/* Form tiles: the same on the portal home page (index.html), the sign-in page and the Forms tab (account/).
   Coloured by kind so the page isn't all white (Dean, 21 Oct 2026). Brand colours only:
   payroll = Officium Blue tint, aml = Gold Light, services = Officium Blue, help = Paper. */

.ftiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px; margin: 0 0 8px; }
.ftile { display: flex; flex-direction: column; gap: 6px; min-width: 0; border: 1.5px solid; border-radius: 10px; padding: 18px 20px;
  text-decoration: none; color: #2D3748; font-family: "Source Sans 3", "Segoe UI", Arial, sans-serif; transition: transform .15s, box-shadow .15s; }
a.ftile:hover { transform: translateY(-2px); box-shadow: 0 4px 16px rgba(15, 43, 61, .14); color: #2D3748; }
a.ftile:focus-visible { outline: 3px solid #9F864F; outline-offset: 2px; }
.ftile__tag { font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.ftile__name { font: 600 1.25rem/1.25 "Cormorant Garamond", Georgia, serif; color: #196583; }
.ftile__desc { font-size: 13.5px; line-height: 1.5; color: #4A5563; }
.ftile__go { margin-top: auto; padding-top: 8px; font-size: 13.5px; font-weight: 600; color: #196583; }
.ftile__status { align-self: flex-start; font-size: 12px; font-weight: 600; border-radius: 999px; padding: 2px 10px; background: #fff; }

.ftile--payroll { background: #E8F1F5; border-color: #BCD5E0; }
.ftile--payroll .ftile__tag { color: #196583; }
.ftile--aml { background: #F5EDD8; border-color: #DCCBA2; }
.ftile--aml .ftile__tag { color: #7A6438; }
.ftile--services { background: #196583; border-color: #196583; }
.ftile--services .ftile__tag { color: #F5EDD8; }
.ftile--services .ftile__name, .ftile--services .ftile__go { color: #fff; }
.ftile--services .ftile__desc { color: rgba(255, 255, 255, .88); }
a.ftile--services:hover { color: #fff; }
.ftile--help { background: #F7F8FA; border-color: #DDE3EA; }
.ftile--help .ftile__tag { color: #6B7685; }

@media (max-width: 600px) { .ftiles { grid-template-columns: 1fr; } }