/* Shared components (logo, age gate, header, buttons, footer) — from Docs/reference/index.html. */

/* Logo */
.logo { display: inline-flex; align-items: center; gap: .375rem; color: var(--brand-ink); }
.logo-mark { display: block; width: auto; height: 2rem; flex-shrink: 0; }
.logo-mark-light { display: none; }
.logo-text { display: flex; flex-direction: column; align-items: center; line-height: 1; }
.logo-text b { padding-left: .06em; font-family: var(--font-brand); font-size: .9375rem; font-weight: 500; letter-spacing: .06em; white-space: nowrap; }
.logo-text span { display: flex; align-items: center; gap: .3rem; margin-top: .25rem; font-size: .4375rem; font-weight: 500; letter-spacing: .28em; white-space: nowrap; color: var(--brand-green); }
.logo-text span::after { margin-left: -.28em; }
@media (max-width: 23.5rem) {
  .logo-mark { height: 1.75rem; }
  .logo-text b { font-size: .8125rem; }
  .logo-text span { font-size: .375rem; }
}
@media (min-width: 40rem) {
  .logo { gap: .5rem; }
  .logo-mark { height: 2.25rem; }
  .logo-text b { font-size: 1.0625rem; }
  .logo-text span { gap: .375rem; margin-top: .3rem; font-size: .4375rem; letter-spacing: .3em; }
  .logo-text span::before, .logo-text span::after { content: ''; width: .625rem; height: 1px; background: currentColor; }
  .logo-text span::after { margin-left: -.3em; }
}
/* Full size once the header has room for search + nav next to it. */
@media (min-width: 80rem) {
  .logo-mark { height: 2.5rem; }
  .logo-text b { font-size: 1.25rem; }
  .logo-text span { font-size: .5rem; letter-spacing: .32em; }
  .logo-text span::before, .logo-text span::after { width: .75rem; }
  .logo-text span::after { margin-left: -.32em; }
}
/* Dark footer: ivory monogram and wordmark. */
.footer .logo { color: var(--ink-foreground); }
.footer .logo-mark { display: none; }
.footer .logo-mark-light { display: block; }
.footer .logo-text span { color: var(--brand-green-light); }

/* Age gate */
.age-gate { position: fixed; inset: 0; z-index: 50; display: flex; align-items: center; justify-content: center; padding: 1rem; background: color-mix(in srgb, var(--ink) 40%, transparent); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.age-gate[hidden] { display: none; }
.age-dialog { display: flex; flex-direction: column; align-items: center; gap: 1.25rem; width: 100%; max-width: 28rem; max-height: 90vh; overflow-y: auto; padding: 2rem; text-align: center; background: var(--card); border-radius: 1.35rem; box-shadow: 0 25px 50px -12px rgb(0 0 0 / .25); }
.age-logo { width: 100%; max-width: 18rem; height: auto; }
.age-dialog h2 { font-size: 1.875rem; line-height: 2.25rem; font-weight: 600; letter-spacing: -0.025em; }
.age-dialog .lead { font-size: .875rem; line-height: 1.625; color: var(--muted-foreground); text-wrap: pretty; }
.age-status { font-size: .875rem; color: var(--muted-foreground); }
.age-status.denied { font-weight: 500; color: var(--primary); }
.age-actions { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; width: 100%; }
.age-actions button { height: 3rem; border-radius: .75rem; font-size: .875rem; font-weight: 600; transition: opacity .15s, background-color .15s; }
.btn-yes { background: var(--primary); color: var(--primary-foreground); }
.btn-yes:hover { opacity: .9; }
.btn-no { border: 1px solid var(--border); background: var(--background); }
.btn-no:hover { background: var(--secondary); }
.age-remember { display: flex; align-items: center; gap: .5rem; cursor: pointer; font-size: .875rem; color: var(--muted-foreground); }
.age-remember input { width: 1rem; height: 1rem; accent-color: var(--primary); }

/* Header */
.site-header { position: sticky; top: 0; z-index: 40; }
.topbar { background: var(--ink); color: var(--ink-foreground); padding: .5rem 1rem; text-align: center; font-size: .75rem; line-height: 1rem; font-weight: 500; letter-spacing: .025em; }
/* One-time "referral code applied" notice after a ?ref= link */
.referral-strip { display: flex; align-items: center; justify-content: center; gap: .5rem; padding: .625rem 1rem; border-bottom: 1px solid color-mix(in srgb, var(--primary) 30%, transparent); background: var(--secondary); font-size: .875rem; line-height: 1.4; text-align: center; }
.referral-strip svg { flex-shrink: 0; color: var(--primary); }
.referral-strip b { font-family: var(--font-mono); letter-spacing: .06em; }
.referral-strip a { color: var(--primary); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.navwrap { border-bottom: 1px solid var(--border); background: color-mix(in srgb, var(--background) 85%, transparent); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); }
.nav { display: flex; height: 4rem; align-items: center; justify-content: space-between; }
.nav-links { display: none; align-items: center; gap: 2rem; }
.nav-links a, .account-link { font-size: .875rem; font-weight: 500; white-space: nowrap; color: var(--muted-foreground); transition: color .15s; }
.nav-links a:hover, .account-link:hover { color: var(--foreground); }
.nav-links a[aria-current="page"] { color: var(--foreground); }
.account-link { display: none; margin-right: .5rem; }
.nav-actions { display: flex; align-items: center; gap: .5rem; }
/* Header search (doc D29): desktop pill from 1024px, full width inside the mobile menu. */
.nav-search { position: relative; display: none; align-items: center; }
.nav-search svg { position: absolute; left: .875rem; color: var(--muted-foreground); pointer-events: none; }
.nav-search input { width: 11rem; height: 2.5rem; padding: 0 1rem 0 2.375rem; border: 1px solid var(--border); border-radius: 9999px; background: var(--card); font: inherit; font-size: .875rem; color: var(--foreground); transition: width .2s var(--ease-rise), border-color .15s; }
.nav-search input:focus { width: 14rem; outline: none; border-color: var(--primary); }
.nav-search-mobile { display: flex; margin: .5rem 0; }
.nav-search-mobile input { width: 100%; }
.nav-search-mobile input:focus { width: 100%; }
.cart-btn { display: inline-flex; height: 2.5rem; align-items: center; gap: .5rem; padding: 0 1rem; border-radius: 9999px; background: var(--ink); color: var(--ink-foreground); font-size: .875rem; font-weight: 600; transition: opacity .15s; }
.cart-btn:hover { opacity: .9; }
.cart-count { display: inline-flex; min-width: 1.25rem; align-items: center; justify-content: center; padding: 0 .375rem; border-radius: 9999px; background: var(--primary); color: var(--primary-foreground); font-size: .75rem; line-height: 1.25rem; }
.menu-btn { display: inline-flex; width: 2.5rem; height: 2.5rem; align-items: center; justify-content: center; border: 1px solid var(--border); border-radius: 9999px; }
.mobile-menu { display: flex; flex-direction: column; border-top: 1px solid var(--border); padding: .5rem 1rem; }
.mobile-menu[hidden] { display: none; }
.mobile-menu a { display: block; padding: .75rem 0; font-size: 1rem; font-weight: 500; }

/* Buttons */
.btn-primary { display: inline-flex; height: 2.75rem; flex-shrink: 0; align-items: center; justify-content: center; gap: .5rem; align-self: flex-start; padding: 0 1.25rem; border-radius: .75rem; background: var(--primary); color: var(--primary-foreground); font-size: .875rem; font-weight: 600; transition: opacity .15s; }
.btn-primary:hover { opacity: .9; }

/* Page header band for non-home pages (doc section 5.7) */
.page-head { display: flex; flex-direction: column; gap: 1rem; padding-top: 4rem; padding-bottom: 3rem; }
.page-head p.muted { max-width: 40rem; line-height: 1.625; }

/* Forms (doc section 5.7) */
.form-card { padding: 1.5rem; border: 1px solid var(--border); border-radius: 1.35rem; background: var(--card); }
.form { display: flex; flex-direction: column; gap: 1.25rem; }
.form-row { display: grid; gap: 1.25rem; }
.field { display: flex; flex-direction: column; gap: .375rem; }
.field label, .field .label { font-size: .875rem; font-weight: 500; }
.field .optional { font-weight: 400; color: var(--muted-foreground); }
.field input, .field select, .field textarea { width: 100%; min-height: 3rem; padding: .75rem 1rem; border: 1px solid var(--border); border-radius: .75rem; background: var(--background); font: inherit; font-size: .9375rem; color: var(--foreground); transition: border-color .15s, box-shadow .15s; }
.field textarea { resize: vertical; line-height: 1.6; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 18%, transparent); }
.field .input-validation-error { border-color: var(--error); }
.field-error { font-size: .875rem; color: var(--error); }
.form-errors { padding: .875rem 1rem; border: 1px solid color-mix(in srgb, var(--error) 35%, transparent); border-radius: .75rem; background: color-mix(in srgb, var(--error) 6%, transparent); font-size: .875rem; color: var(--error); }
.form-errors.validation-summary-valid { display: none; }
.form-errors ul { display: flex; flex-direction: column; gap: .25rem; }
.form-note { font-size: .8125rem; line-height: 1.6; color: var(--muted-foreground); }
.form-note a { color: var(--primary); text-decoration: underline; text-underline-offset: 3px; }
.form-success { display: flex; align-items: flex-start; gap: .75rem; margin-bottom: 1.5rem; padding: 1rem 1.25rem; border-radius: .75rem; background: var(--secondary); color: var(--foreground); font-size: .9375rem; line-height: 1.6; }
.form-success svg { color: var(--primary); margin-top: .125rem; }
/* Members-only category seen by a guest (home card, shop tab). */
.members-badge { display: inline-flex; align-items: center; gap: .3125rem; padding: .25rem .625rem; border-radius: 9999px; background: var(--secondary); color: var(--primary); font-family: var(--font-mono); font-size: .625rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; }
.members-badge svg.i { width: .75rem; height: .75rem; }
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.check { display: flex; align-items: flex-start; gap: .625rem; cursor: pointer; font-size: .875rem; line-height: 1.5; }
.check input { width: 1rem; height: 1rem; margin-top: .1875rem; flex-shrink: 0; accent-color: var(--primary); }
.check a { color: var(--primary); text-decoration: underline; text-underline-offset: 3px; }
.label-row { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }
/* Show/hide button that password-toggle.js puts inside every password field. */
.password-row { position: relative; width: 100%; }
.password-row input { width: 100%; padding-right: 4.75rem; }
.password-toggle { position: absolute; top: 50%; right: .5rem; transform: translateY(-50%); padding: .375rem .625rem; border-radius: .5rem; font-size: .8125rem; font-weight: 600; color: var(--primary); text-decoration: underline; text-underline-offset: 3px; }
.password-toggle:hover { background: var(--secondary); }
.password-toggle:focus-visible { outline: 2px solid var(--primary); outline-offset: 1px; }
.field input:disabled { background: var(--secondary); color: var(--muted-foreground); }
.form-row-3 { grid-template-columns: 1fr; }
.btn-block { width: 100%; height: 3rem; align-self: stretch; }
.btn-danger { display: inline-flex; height: 2.75rem; align-items: center; justify-content: center; align-self: flex-start; padding: 0 1.25rem; border-radius: .75rem; background: var(--error); color: #fff; font-size: .875rem; font-weight: 600; transition: opacity .15s; }
.btn-danger:hover { opacity: .9; }
.link-action { font-size: .875rem; font-weight: 600; color: var(--primary); text-decoration: underline; text-underline-offset: 3px; }
.link-action.danger { color: var(--error); }
.dev-note { padding: .875rem 1rem; border: 1px dashed var(--border); border-radius: .75rem; font-size: .8125rem; color: var(--muted-foreground); }
.dev-note a { color: var(--primary); text-decoration: underline; word-break: break-all; }

/* Header user menu (doc D29) */
.user-menu { position: relative; display: none; }
.user-menu-btn { display: inline-flex; height: 2.5rem; align-items: center; gap: .375rem; padding: 0 .875rem; border: 1px solid var(--border); border-radius: 9999px; font-size: .875rem; font-weight: 500; }
.user-menu-btn:hover { border-color: color-mix(in srgb, var(--foreground) 25%, transparent); }
.user-menu-btn[aria-expanded="true"] svg:last-child { transform: rotate(180deg); }
.user-menu-list { position: absolute; right: 0; top: calc(100% + .5rem); z-index: 45; min-width: 13rem; padding: .5rem; border: 1px solid var(--border); border-radius: 1rem; background: var(--card); box-shadow: 0 12px 32px -12px rgb(0 0 0 / .18); }
.user-menu-list[hidden] { display: none; }
.user-menu-list .menu-label { padding: .5rem .75rem .25rem; font-family: var(--font-mono); font-size: .6875rem; text-transform: uppercase; letter-spacing: .16em; color: var(--muted-foreground); }
.user-menu-list a, .user-menu-list button { display: block; width: 100%; padding: .5rem .75rem; border-radius: .625rem; font-size: .9375rem; text-align: left; }
.user-menu-list a:hover, .user-menu-list a:focus-visible, .user-menu-list button:hover, .user-menu-list button:focus-visible { background: var(--secondary); }
.user-menu-list hr { margin: .375rem .25rem; border-top: 1px solid var(--border); }
.user-menu-list .sign-out { color: var(--error); }

/* Cart drawer (doc section 8.5a) */
body.drawer-open { overflow: hidden; }
.drawer-overlay { position: fixed; inset: 0; z-index: 60; background: color-mix(in srgb, var(--ink) 40%, transparent); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); opacity: 0; transition: opacity .25s var(--ease-rise); }
.drawer-overlay.open { opacity: 1; }
.cart-drawer { position: fixed; top: 0; right: 0; bottom: 0; z-index: 61; display: flex; width: 100%; max-width: 28rem; background: var(--background); box-shadow: -20px 0 50px -20px rgb(0 0 0 / .25); transform: translateX(100%); transition: transform .25s var(--ease-rise); }
.cart-drawer.open { transform: translateX(0); }
.cart-drawer:focus { outline: none; }
@media (prefers-reduced-motion: reduce) { .cart-drawer, .drawer-overlay { transition: none; } }
.cart-drawer-body { display: flex; flex: 1; flex-direction: column; min-width: 0; }
.drawer-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; padding: 1.5rem 1.5rem 1rem; border-bottom: 1px solid var(--border); }
.drawer-head h2 { font-size: 1.375rem; font-weight: 600; letter-spacing: -0.02em; }
.drawer-head .muted { font-size: .875rem; }
.drawer-close { display: inline-flex; width: 2.5rem; height: 2.5rem; align-items: center; justify-content: center; border-radius: 9999px; }
.drawer-close:hover { background: var(--secondary); }
.drawer-message:not(:empty) { margin: .75rem 1.5rem 0; padding: .625rem .875rem; border-radius: .75rem; background: var(--secondary); font-size: .875rem; }
.drawer-message.error { background: color-mix(in srgb, var(--error) 10%, transparent); color: var(--error); }
.drawer-scroll { flex: 1; overflow-y: auto; padding: 1rem 1.5rem; display: flex; flex-direction: column; gap: .75rem; }
.drawer-empty { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1rem; padding: 2rem; color: var(--muted-foreground); text-align: center; }
.drawer-empty svg { color: var(--primary); }
.drawer-empty .btn-primary { align-self: center; }
.cart-notice { padding: .625rem .875rem; border: 1px solid var(--border); border-radius: .75rem; background: var(--card); font-size: .8125rem; color: var(--muted-foreground); }
.drawer-lines { display: flex; flex-direction: column; gap: .75rem; }
.drawer-line { display: grid; grid-template-columns: 4rem 1fr auto; gap: .875rem; align-items: start; padding: .875rem; border: 1px solid var(--border); border-radius: 1rem; background: var(--card); }
.drawer-thumb img { width: 4rem; height: 4rem; border-radius: .75rem; object-fit: cover; background: var(--secondary); }
.drawer-line-info { display: flex; flex-direction: column; gap: .125rem; min-width: 0; }
.drawer-line-name { font-weight: 600; line-height: 1.3; }
.drawer-line-name:hover { color: var(--primary); }
.drawer-line-variant { font-family: var(--font-mono); font-size: .75rem; color: var(--muted-foreground); }
.drawer-line-price { margin-top: .375rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.drawer-line-actions { display: flex; flex-direction: column; align-items: flex-end; justify-content: space-between; gap: .75rem; height: 100%; }
.icon-btn { display: inline-flex; width: 2rem; height: 2rem; align-items: center; justify-content: center; border-radius: .5rem; color: var(--muted-foreground); }
.icon-btn:hover { background: var(--secondary); color: var(--error); }
.qty-mini { display: inline-flex; align-items: center; border: 1px solid var(--border); border-radius: 9999px; }
.qty-mini button { width: 2rem; height: 2rem; font-size: 1rem; color: var(--muted-foreground); }
.qty-mini button:hover:not(:disabled) { color: var(--foreground); }
.qty-mini button:disabled { opacity: .35; cursor: not-allowed; }
.qty-mini span { min-width: 1.5rem; text-align: center; font-size: .875rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.drawer-box { display: flex; flex-direction: column; gap: .5rem; padding: .875rem; border: 1px solid color-mix(in srgb, var(--primary) 35%, var(--border)); border-radius: 1rem; background: color-mix(in srgb, var(--secondary) 45%, var(--card)); }
.drawer-box header { display: flex; align-items: center; justify-content: space-between; gap: .75rem; font-size: .875rem; }
.drawer-box ul { display: flex; flex-direction: column; gap: .5rem; }
.drawer-box li { display: grid; grid-template-columns: 2.5rem 1fr auto; gap: .625rem; align-items: center; font-size: .875rem; }
.drawer-box img { width: 2.5rem; height: 2.5rem; border-radius: .5rem; object-fit: cover; }
.drawer-foot { display: flex; flex-direction: column; gap: .75rem; padding: 1.25rem 1.5rem 1.5rem; border-top: 1px solid var(--border); background: var(--card); }
.cart-totals { display: flex; flex-direction: column; gap: .5rem; font-size: .9375rem; }
.cart-totals div { display: flex; justify-content: space-between; gap: 1rem; }
.cart-totals dt { color: var(--muted-foreground); }
.cart-totals dd { font-variant-numeric: tabular-nums; }
.cart-totals .saving dd { color: var(--primary); }
.cart-totals .total { padding-top: .75rem; border-top: 1px solid var(--border); font-weight: 600; font-size: 1.0625rem; }
.cart-totals .total dt { color: var(--foreground); }

/* Footer */
.footer { background: var(--ink); color: var(--ink-foreground); }
.footer .container { padding-top: 4rem; padding-bottom: 4rem; }
.footer-top { display: grid; gap: 3rem; }
.footer-brand { display: flex; flex-direction: column; gap: 1rem; }
.footer-brand p, .footer-brand address { max-width: 20rem; font-size: .875rem; line-height: 1.625; font-style: normal; color: color-mix(in srgb, var(--ink-foreground) 70%, transparent); }
.footer-brand a { font-size: .875rem; }
/* Icon-only social links under the brand line. */
.footer-socials { display: flex; gap: .5rem; }
.footer-socials a { display: inline-grid; width: 2.5rem; height: 2.5rem; place-items: center; border: 1px solid color-mix(in srgb, var(--ink-foreground) 20%, transparent); border-radius: 9999px; color: color-mix(in srgb, var(--ink-foreground) 85%, transparent); transition: color .15s, border-color .15s, background-color .15s; }
/* .footer prefix: outranks the general ".footer a:hover" below, which would paint the icon the same green as the circle. */
.footer .footer-socials a:hover { border-color: var(--primary); background: var(--primary); color: var(--primary-foreground); }
.footer-socials a:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.footer a:hover { color: var(--primary); }
.footer h3 { font-family: var(--font-mono); font-size: .75rem; font-weight: 400; text-transform: uppercase; letter-spacing: .18em; color: color-mix(in srgb, var(--ink-foreground) 60%, transparent); }
.footer-col { display: flex; flex-direction: column; gap: 1rem; }
.footer-col ul { display: flex; flex-direction: column; gap: .625rem; }
.footer-col a { font-size: .875rem; color: color-mix(in srgb, var(--ink-foreground) 85%, transparent); }
.footer-contact { gap: .875rem; }
.footer-contact li { display: flex; align-items: flex-start; gap: .75rem; }
.footer-contact svg { flex-shrink: 0; margin-top: .1875rem; color: var(--primary); }
.footer-contact address { max-width: 16rem; font-size: .875rem; line-height: 1.5; font-style: normal; color: color-mix(in srgb, var(--ink-foreground) 85%, transparent); }
.catalog { margin-top: 3.5rem; padding-top: 2rem; border-top: 1px solid color-mix(in srgb, var(--ink-foreground) 15%, transparent); }
.catalog ul { display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; margin-top: 1rem; }
.catalog a { font-size: .875rem; color: color-mix(in srgb, var(--ink-foreground) 75%, transparent); }
.legal { display: flex; flex-direction: column; gap: 1rem; margin-top: 3rem; text-align: center; font-size: .75rem; line-height: 1.625; color: color-mix(in srgb, var(--ink-foreground) 55%, transparent); }
.legal p { max-width: 48rem; margin: 0 auto; text-wrap: pretty; }
/* Payment acceptance marks: white cards on the dark footer, brand colors kept as-is. */
.pay-badges { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; margin-top: 2rem; }
.pay-badges li { display: grid; place-items: center; width: 2.75rem; height: 1.75rem; padding: .3rem .375rem; border-radius: .3rem; background: #fff; }
.pay-badges li.pay-amex { background: #016fd0; padding: .25rem .2rem; }
.pay-badges svg { display: block; width: 100%; height: 100%; }
.footer-bottom { display: flex; flex-direction: column; align-items: center; justify-content: space-between; gap: 1rem; margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid color-mix(in srgb, var(--ink-foreground) 15%, transparent); font-size: .75rem; color: color-mix(in srgb, var(--ink-foreground) 60%, transparent); }
.footer-bottom ul { display: flex; flex-wrap: wrap; justify-content: center; gap: 1.25rem; }


/* Promo banner — shared by home and About (from reference) */
.promo-banner { display: flex; flex-direction: column; gap: 1rem; padding: 1.5rem; border: 1px solid var(--border); border-radius: 1.35rem; background: var(--secondary); }
.promo-banner .kicker { font-family: var(--font-mono); font-size: .75rem; text-transform: uppercase; letter-spacing: .18em; color: var(--muted-foreground); }
.promo-banner .title { font-size: 1.5rem; line-height: 2rem; font-weight: 600; letter-spacing: -0.025em; }
.promo-banner .sub { font-size: .875rem; color: var(--muted-foreground); }
.promo-copy { display: flex; flex-direction: column; gap: .25rem; }

/* FAQ accordion — shared by home and /faq (from reference) */
.faq-list details { border-bottom: 1px solid var(--border); padding: 1.25rem 0; }
.faq-list summary { display: flex; cursor: pointer; list-style: none; align-items: center; justify-content: space-between; gap: 1rem; font-size: 1.125rem; font-weight: 500; }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary svg { color: var(--primary); transition: transform .15s; }
.faq-list details[open] summary svg { transform: rotate(45deg); }
.faq-list p { margin-top: .75rem; max-width: 42rem; line-height: 1.625; color: var(--muted-foreground); }

@media (min-width: 768px) {
  .nav-links { display: flex; gap: 1.25rem; }
  .account-link { display: inline; }
  .user-menu { display: block; }
  .form-row-3 { grid-template-columns: 1.4fr 1fr .8fr; }
  .menu-btn, .mobile-menu { display: none !important; }
  .btn-primary { align-self: auto; }
  .form-card { padding: 2rem; }
  .form-row { grid-template-columns: 1fr 1fr; }
  .promo-banner { flex-direction: row; align-items: center; justify-content: space-between; padding: 2rem; }
  .promo-banner .title { font-size: 1.875rem; line-height: 2.25rem; }
  /* Tablets: the brand gets its own row above the four link/contact columns. */
  .footer-top { grid-template-columns: repeat(4, 1fr); }
  .footer-brand { grid-column: 1 / -1; }
  .footer-bottom { flex-direction: row; }
}
@media (min-width: 1024px) {
  .nav-search { display: flex; }
  .nav-links { gap: 1.5rem; }
  .footer-top { grid-template-columns: 1.5fr repeat(3, 1fr) 1.4fr; }
  .footer-brand { grid-column: auto; }
}
.mobile-signout { display: block; width: 100%; padding: .75rem 0; font-size: 1rem; font-weight: 500; text-align: left; color: var(--error); }