/* ============================================================
   The Centurion Awards — design system
   Two themes (dark default, light), toggled via
   html[data-theme]. Every color flows from the tokens below.
   ============================================================ */

html[data-theme="dark"]{
  color-scheme: dark;

  --page:       #0D0B08;   /* base sections */
  --page-alt:   #14110B;   /* alternate sections */
  --page-emph:  #171208;   /* emphasis sections (gold-warmed) */
  --card:       #1E1810;
  --line:       #382E1D;

  --text:       #F7F1E3;
  --muted:      #C4B79D;

  --gold:       #C79B3B;
  --gold-2:     #EDCB72;
  --gold-text:  #EFCF78;   /* gold used as text — bright on dark */
  --gold-tile:  rgba(237,203,114,.12);
  --gold-tile-border: rgba(237,203,114,.28);
  --gold-i-grad: linear-gradient(100deg, #D9AC46 5%, #F4D88E 42%, #FFEFBC 55%, #E5BC5E 95%);
  --gold-i-glow: drop-shadow(0 0 22px rgba(240,206,116,.35));

  --ok:         #63C289;
  --bad:        #E08560;

  --hero-bg:
    radial-gradient(90% 60% at 50% 0%, rgba(237,203,114,.26) 0%, rgba(199,155,59,.09) 40%, transparent 66%),
    radial-gradient(40% 30% at 78% 12%, rgba(237,203,114,.10) 0%, transparent 70%),
    linear-gradient(to bottom, #0D0B08 0%, #15110B 62%, #1C160D 100%);
  --hero-line:  rgba(237,203,114,.4);
  --hero-seal-opacity: .06;

  --header-bg:  rgba(13,11,8,.86);
  --header-border: rgba(237,203,114,.16);

  --solid-btn-bg: #F7F1E3;
  --solid-btn-fg: #1D1609;
  --outline-border: rgba(239,207,120,.55);
  --outline-color: #EFCF78;
  --outline-hover-bg: rgba(239,207,120,.1);

  --stat-num:   #F2D383;

  --market-bg:
    radial-gradient(120% 90% at 85% 0%, rgba(237,203,114,.22), transparent 55%),
    linear-gradient(150deg, #251E12, #0F0C08);
  --market-border: #3A3020;
  --market-text: #F7F1E3;
  --market-muted:#C4B79D;

  --input-bg:   #14110B;
  --input-focus-bg: #1B160E;
  --input-border: #766040;  /* form-control border: ~3:1 on --input-bg (WCAG 1.4.11) */

  --footer-bg:  #0A0805;
  --footer-border: #2C2415;

  --shadow-sm: 0 1px 2px rgba(0,0,0,.3), 0 4px 14px rgba(0,0,0,.25);
  --shadow-md: 0 2px 6px rgba(0,0,0,.35), 0 14px 34px rgba(0,0,0,.4);
  --shadow-gold: 0 8px 30px rgba(233,196,104,.35);
}

html[data-theme="light"]{
  color-scheme: light;

  --page:       #FAF6EC;
  --page-alt:   #F2EAD8;
  --page-emph:  #F6EDD6;
  --card:       #FFFDF8;
  --line:       #E0D3B6;

  --text:       #241D10;
  --muted:      #675D49;

  --gold:       #B58527;
  --gold-2:     #C79B3B;
  --gold-text:  #7E5F14;   /* gold used as text — deep on cream */
  --gold-tile:  rgba(181,133,39,.13);
  --gold-tile-border: rgba(181,133,39,.35);
  --gold-i-grad: linear-gradient(100deg, #7E5F14 5%, #A87F1E 45%, #8A6812 60%, #6E5310 95%);
  --gold-i-glow: none;

  --ok:         #256B43;
  --bad:        #A44A26;

  --hero-bg:
    radial-gradient(90% 62% at 50% 0%, rgba(199,155,59,.30) 0%, rgba(199,155,59,.10) 40%, transparent 66%),
    linear-gradient(to bottom, #F7F0DE 0%, #FAF6EC 100%);
  --hero-line:  rgba(126,95,20,.35);
  --hero-seal-opacity: .08;

  --header-bg:  rgba(250,246,236,.88);
  --header-border: rgba(126,95,20,.22);

  --solid-btn-bg: #241D10;
  --solid-btn-fg: #FAF6EC;
  --outline-border: rgba(36,29,16,.38);
  --outline-color: #241D10;
  --outline-hover-bg: rgba(36,29,16,.05);

  --stat-num:   #8A6812;

  --market-bg:
    radial-gradient(120% 90% at 85% 0%, rgba(199,155,59,.22), transparent 55%),
    linear-gradient(150deg, #FFFDF8, #F6EDD6);
  --market-border: #DFCFA8;
  --market-text: #241D10;
  --market-muted:#675D49;

  --input-bg:   #FBF8F0;
  --input-focus-bg: #FFFFFF;
  --input-border: #A38B5A;  /* form-control border: ~3:1 on --input-bg (WCAG 1.4.11) */

  --footer-bg:  #EFE6D1;
  --footer-border: #DCCEAD;

  --shadow-sm: 0 1px 2px rgba(64,50,20,.06), 0 4px 14px rgba(64,50,20,.06);
  --shadow-md: 0 2px 6px rgba(64,50,20,.08), 0 14px 34px rgba(64,50,20,.12);
  --shadow-gold: 0 8px 26px rgba(160,120,35,.3);
}

:root{
  --font-d: "Fraunces", Georgia, "Times New Roman", serif;
  --font-b: "Inter", -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  --r-sm: 10px;
  --r-md: 16px;
  --r-lg: 24px;
  --container: 1140px;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  font-family:var(--font-b);
  font-size:16.5px;
  line-height:1.65;
  color:var(--text);
  background:var(--page);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

h1,h2,h3,h4{ font-family:var(--font-d); font-weight:600; line-height:1.12; margin:0 0 .5em; letter-spacing:-.01em; color:var(--text); text-wrap:balance; }
h1{ font-size:clamp(2.5rem, 5.4vw, 4.1rem); }
h2{ font-size:clamp(1.85rem, 3.4vw, 2.6rem); }
h3{ font-size:1.3rem; }
p{ margin:0 0 1em; }
a{ color:var(--gold-text); text-decoration:none; }
a:hover{ text-decoration:underline; text-underline-offset:3px; }
/* Prose/body links carry a permanent underline so they aren't set apart from
   surrounding text by color alone (WCAG 1.4.1). Nav, buttons, cards, and
   breadcrumbs keep their own affordances and opt out via their own rules. */
.legal a, .lede a, .prose a, .card p a, .stat p a{ text-decoration:underline; text-underline-offset:2px; }
img,svg{ display:block; max-width:100%; }

/* Skip link: the first focusable element, kept out of sight until it takes
   focus, then it drops in over the sticky header and jumps to <main>. */
.skip-link{
  position:fixed; top:10px; left:10px; z-index:200;
  transform:translateY(-160%);
  background:var(--card); color:var(--gold-text);
  border:1.5px solid var(--gold-tile-border); border-radius:var(--r-sm);
  padding:.6em 1.15em; font-weight:600; font-size:.94rem; text-decoration:none;
  box-shadow:var(--shadow-md);
  transition:transform .18s ease;
}
.skip-link:focus, .skip-link:focus-visible{ transform:none; outline:2px solid var(--gold-text); outline-offset:2px; }
::selection{ background:var(--gold-2); color:#1D1609; }
:focus-visible{ outline:2px solid var(--gold-text); outline-offset:2px; }

.container{ width:min(var(--container), calc(100% - 48px)); margin-inline:auto; }
.narrow{ max-width:760px; }
.center{ text-align:center; }
.center .lede{ margin-inline:auto; }

.lede{ font-size:1.15rem; color:var(--muted); max-width:640px; }

.eyebrow{
  display:inline-flex; align-items:center; gap:.5em;
  font-size:.78rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  color:var(--gold-text); margin-bottom:1.1em;
}
.eyebrow::before{ content:""; width:22px; height:1.5px; background:currentColor; opacity:.7; }

.gold-i{
  font-style:italic; font-weight:500;
  background:var(--gold-i-grad);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
  filter:var(--gold-i-glow);
}

/* ---------- sections ---------- */
section{ padding:96px 0; }
.section-tight{ padding:72px 0; }
.dark{ background:var(--page-emph); }
.alt{ background:var(--page-alt); }
.section-head{ max-width:720px; margin-bottom:52px; }
.section-head.center{ margin-inline:auto; }

/* ---------- header ---------- */
.site-header{
  position:sticky; top:0; z-index:60;
  background:var(--header-bg);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--header-border);
}
.nav{ display:flex; align-items:center; gap:28px; height:68px; }
.brand{
  display:flex; align-items:center; gap:11px;
  font-family:var(--font-d); font-weight:600; font-size:1.1rem;
  color:var(--text); white-space:nowrap;
}
.brand:hover{ text-decoration:none; }
.brand .seal{ width:34px; height:34px; }
.nav-links{
  display:flex; align-items:center; gap:26px;
  margin-left:auto;
  font-size:.94rem; font-weight:500;
}
.nav-links a{ color:var(--muted); transition:color .18s ease; white-space:nowrap; }
.nav-links a:hover{ color:var(--gold-text); text-decoration:none; }
.nav-links a[aria-current="page"]{ color:var(--text); }
.nav-links a.btn-gold, .nav-links a.btn-gold:hover{ color:#241B08; }
.nav-cta{ margin-left:2px; }
/* No opacity: at .85 the light-theme "Log in" dropped under 4.5:1 (WCAG 1.4.3);
   full --muted clears it. */
.nav-login{ font-size:.88rem; }
.nav-toggle{
  display:none; margin-left:auto;
  background:none; border:0; color:var(--text); cursor:pointer; padding:8px;
}
.nav-toggle svg{ width:26px; height:26px; }

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.55em;
  font-family:var(--font-b); font-weight:600; font-size:.99rem;
  padding:.82em 1.5em; border-radius:999px; border:1.5px solid transparent;
  cursor:pointer; transition:transform .16s ease, box-shadow .2s ease, background .2s ease, color .2s ease, border-color .2s ease;
  text-decoration:none; line-height:1.2; white-space:nowrap;
}
.btn:hover{ text-decoration:none; transform:translateY(-2px); }
.btn:active{ transform:translateY(0); }

.btn-gold{
  background:linear-gradient(120deg, #D9AC46, #EDCB72 55%, #D9AC46);
  color:#241B08; box-shadow:0 4px 16px rgba(199,155,59,.3);
}
.btn-gold:hover{ box-shadow:var(--shadow-gold); color:#241B08; }

.btn-outline{ border-color:var(--outline-border); color:var(--outline-color); background:transparent; }
.btn-outline:hover{ background:var(--outline-hover-bg); border-color:var(--outline-color); }

.btn-dark{ background:var(--solid-btn-bg); color:var(--solid-btn-fg); }
.btn-dark:hover{ box-shadow:var(--shadow-md); }

.btn-outline-dark{ border-color:var(--outline-border); color:var(--outline-color); background:transparent; }
.btn-outline-dark:hover{ background:var(--outline-hover-bg); border-color:var(--outline-color); }

.btn-lg{ font-size:1.06rem; padding:.95em 1.8em; }
.btn-sm{ font-size:.88rem; padding:.6em 1.15em; }

.cta-row{ display:flex; flex-wrap:wrap; gap:14px; align-items:center; }
.cta-note{ font-size:.86rem; color:var(--muted); margin-top:16px; }
.cta-note .dot{ margin:0 .55em; opacity:.5; }

/* ---------- hero ---------- */
.hero{
  position:relative; overflow:hidden;
  background:var(--hero-bg);
  padding:104px 0 92px;
}
.hero::after{
  content:""; position:absolute; inset:auto 0 0 0; height:1px;
  background:linear-gradient(90deg, transparent, var(--hero-line), transparent);
}
.hero h1{ color:var(--text); }
.hero-sub{
  font-size:clamp(1.05rem, 1.6vw, 1.22rem);
  color:var(--muted); max-width:620px; margin:22px 0 34px;
}
.hero .center .hero-sub{ margin-inline:auto; }
.hero-short{ padding:84px 0 72px; }
/* winners page: compress the hero so the first city carousel peeks above the fold */
.hero-winners{ padding:52px 0 30px; }
.hero-winners .hero-sub{ margin-bottom:14px; }
/* business page: pull the hero up so the primary CTA lands ~2/3 down the fold */
.hero-biz{ padding:40px 0 76px; }
.hero-biz .hero-sub{ margin:18px 0 30px; }
/* business hero: inline eligibility-check form — a review URL hands off to /apply */
.hero-check{ display:flex; flex-wrap:wrap; gap:12px; align-items:stretch; max-width:600px; }
.hero-check input[type=url]{
  flex:1 1 300px; min-width:0;
  font:inherit; font-size:1rem; color:var(--text);
  padding:.9em 1.05em; border-radius:var(--r-sm);
  border:1.5px solid var(--input-border); background:var(--input-bg);
  transition:border-color .18s ease, box-shadow .18s ease, background .18s ease;
}
.hero-check input[type=url]::placeholder{ color:var(--muted); }
.hero-check input[type=url]:focus{
  outline:none; border-color:var(--gold); background:var(--input-focus-bg);
  box-shadow:0 0 0 4px rgba(199,155,59,.18);
}
.hero-check .btn{ flex:0 0 auto; white-space:nowrap; }
.hero-check.is-centered{ margin-inline:auto; justify-content:center; }
.cta-note-link{ color:var(--gold-text); font-weight:600; text-decoration:none; border-bottom:1px solid transparent; }
.cta-note-link:hover{ border-bottom-color:currentColor; }
@media (max-width: 700px){
  .hero-check{ flex-direction:column; align-items:stretch; }
  .hero-check input[type=url]{ flex:0 0 auto; width:100%; }
  .hero-check .btn{ width:100%; }
}
.hero-seal-bg{
  position:absolute; right:-120px; top:50%; transform:translateY(-50%);
  width:560px; height:560px; opacity:var(--hero-seal-opacity); pointer-events:none;
}
/* homepage hero: a real two-column composition (index.html only).
   The crest used to be pinned to the viewport (right + width:min(520px,100vw-690px))
   while the copy sat in the centered, capped .container — two coordinate systems with
   nothing coupling them, so the text collided with the crest from ~1000-1210px and the
   gutter then ballooned past 600px on wide screens. The crest is now a grid track inside
   .container, so the copy-to-crest gutter is a reserved gap that cannot collapse.
   Scoped to .hero-home so the other .hero pages are untouched. */
.hero-home{
  --crest-col:   clamp(272px, 33%, 400px);  /* the emblem's track, sized off .container */
  --hero-gutter: clamp(48px, 5%, 72px);     /* the copy-to-crest gap */
  --copy-min:    42rem;                     /* the two CTAs side by side; below this they'd stack */
  /* spill past the container edge; 0 until a side margin exists, and always kept 24px
     inside the viewport so a classic scrollbar can never shear the artwork */
  --crest-bleed: clamp(0px, (100vw - var(--container)) / 2 - 24px, 84px);
  padding-block: clamp(76px, 7vw, 92px);
}
.hero-home .container{
  display:grid;
  /* the copy holds its floor and the crest yields, so the CTAs never stack on desktop */
  grid-template-columns:minmax(min(100%, var(--copy-min)), 1fr) minmax(0, var(--crest-col));
  gap:var(--hero-gutter);
  align-items:center;
}
.hero-home .hero-copy{ min-width:0; }
.hero-home .hero-crest{
  justify-self:start;                     /* hug the gutter, so the gap is the whole story */
  width:calc(100% + var(--crest-bleed));  /* fill the track, then bleed past the container */
  max-width:none;                         /* beat the global img{ max-width:100% } */
  height:auto; pointer-events:none;
  transform:translateY(1.25%);            /* the artwork's ink sits 1.25% high in its box */
}
/* the crest is display:none below 980px — drop the grid so the empty track can't
   squeeze the copy (a track survives its item being removed) */
@media (max-width: 980px){
  .hero-home .container{ display:block; }
}

/* breadcrumb (market & winner pages) */
.crumbs{ display:flex; flex-wrap:wrap; gap:.6em; align-items:center; font-size:.86rem; color:var(--muted); margin-bottom:26px; }
.crumbs a{ color:var(--muted); }
.crumbs a:hover{ color:var(--gold-text); text-decoration:none; }
.crumbs .sep{ opacity:.5; }
.crumbs .here{ color:var(--text); font-weight:600; }

/* ---------- ticker ---------- */
.ticker-band{
  background:var(--page-alt); border-block:1px solid var(--line);
  overflow:hidden; padding:13px 0; color:var(--muted);
}
.ticker{ display:flex; gap:0; width:max-content; animation:ticker 46s linear infinite; }
.ticker-band:hover .ticker,
.ticker-band:focus-within .ticker{ animation-play-state:paused; }
.ticker-group{ display:flex; align-items:center; }
.ticker-item{ display:inline-flex; align-items:center; gap:.6em; font-size:.9rem; padding:0 28px; white-space:nowrap; }
.ticker-item .seal-mini{ width:15px; height:15px; flex:none; }
.ticker-item b{ color:var(--text); font-weight:600; }
@keyframes ticker{ from{ transform:translateX(0);} to{ transform:translateX(-50%);} }

/* ---------- chips ---------- */
.chip{
  display:inline-flex; align-items:center; gap:.45em;
  font-size:.8rem; font-weight:600; letter-spacing:.02em;
  padding:.38em .95em; border-radius:999px;
  background:var(--gold-tile); color:var(--gold-text);
  border:1px solid var(--gold-tile-border);
}
.chip-live::before{ content:""; width:7px; height:7px; border-radius:50%; background:var(--ok); box-shadow:0 0 0 3px color-mix(in srgb, var(--ok) 20%, transparent); }
.chip-soon{ background:transparent; color:var(--muted); border-color:var(--line); }
.chip-soon::before{ content:""; width:7px; height:7px; border-radius:50%; background:var(--line); }

/* ---------- cards & grids ---------- */
.grid{ display:grid; gap:22px; }
.grid-2{ grid-template-columns:repeat(2, 1fr); }
.grid-3{ grid-template-columns:repeat(3, 1fr); }
.grid-4{ grid-template-columns:repeat(4, 1fr); }

.card{
  background:var(--card); border:1px solid var(--line); border-radius:var(--r-md);
  padding:30px 28px; box-shadow:var(--shadow-sm);
  transition:transform .2s ease, box-shadow .25s ease;
}
.card:hover{ transform:translateY(-4px); box-shadow:var(--shadow-md); }
.card h3{ margin-bottom:.45em; }
.card p{ color:var(--muted); }
.card p:last-child{ margin-bottom:0; }
.card .icon{
  width:44px; height:44px; border-radius:12px; margin-bottom:18px;
  display:flex; align-items:center; justify-content:center;
  background:var(--gold-tile); color:var(--gold-text);
  border:1px solid var(--gold-tile-border);
}
.card .icon svg{ width:22px; height:22px; }

/* steps */
.step-num{
  font-family:var(--font-d); font-size:2.6rem; font-weight:600; line-height:1;
  color:transparent; -webkit-text-stroke:1.3px var(--gold-2); margin-bottom:14px;
}
.step h3{ font-size:1.15rem; }
.step p{ color:var(--muted); font-size:.97rem; margin:0; }

/* winner cards */
.winner-card{
  display:flex; flex-direction:column; gap:10px;
  background:var(--card); border:1px solid var(--line); border-radius:var(--r-md);
  padding:26px 24px 22px; box-shadow:var(--shadow-sm); position:relative;
  transition:transform .2s ease, box-shadow .25s ease, border-color .2s ease;
}
.winner-card:hover{ transform:translateY(-4px); box-shadow:var(--shadow-md); border-color:var(--gold); text-decoration:none; }
.winner-card .seal-mini{ width:26px; height:26px; position:absolute; top:22px; right:22px; }
.winner-card .w-logo{
  position:absolute; right:24px; bottom:22px;
  width:76px; height:76px; flex:none; border-radius:12px; overflow:hidden;
  background:#fff; border:1px solid var(--line); padding:8px;
}
.winner-card .w-logo img{ width:100%; height:100%; object-fit:contain; display:block; }
/* Reserve the lower-right strip so the copy never runs under the logo on
   narrow cards; the name up top only clears the seal. */
.winner-card.has-logo .w-cat,
.winner-card.has-logo .w-city{ padding-right:96px; }
.winner-card h3{ margin:0; font-size:1.22rem; padding-right:34px; }
.winner-card .w-cat{ font-size:.92rem; color:var(--gold-text); font-weight:600; }
.winner-card .w-city{ font-size:.88rem; color:var(--muted); }
.winner-card .w-years{ display:flex; gap:6px; margin-top:6px; flex-wrap:wrap; }
.winner-card .w-years span{
  font-size:.75rem; font-weight:600; padding:.25em .7em; border-radius:6px;
  background:var(--gold-tile); color:var(--gold-text); border:1px solid var(--gold-tile-border);
}

/* market cards */
.market-card{
  display:flex; flex-direction:column; justify-content:flex-end; gap:6px; min-height:170px;
  border-radius:var(--r-md); padding:26px;
  background:var(--market-bg);
  border:1px solid var(--market-border); color:var(--market-text);
  transition:transform .2s ease, border-color .2s ease, box-shadow .25s ease;
}
.market-card:hover{ transform:translateY(-4px); border-color:var(--gold); box-shadow:var(--shadow-md); text-decoration:none; }
.market-card h3{ font-size:1.4rem; margin:0; color:var(--market-text); }
.market-card p{ margin:0; font-size:.9rem; color:var(--market-muted); }
.market-card .go{ color:var(--gold-text); font-weight:600; font-size:.92rem; margin-top:8px; }

/* ---------- city carousels (winners page) ---------- */
.city-carousel{ padding:30px 0 6px; }
/* first carousel sits tight under the hero so its cards break the fold */
.section-tight > .city-carousel:first-of-type{ padding-top:8px; }
.carousel-head{
  display:flex; align-items:flex-end; justify-content:space-between;
  gap:20px; margin-bottom:20px; flex-wrap:wrap;
}
.carousel-title{ display:flex; flex-direction:column; gap:4px; text-decoration:none; color:inherit; }
.carousel-title h2{ margin:0; font-size:1.55rem; transition:color .2s ease; }
.carousel-title .go-arrow{ color:var(--gold-text); font-weight:600; display:inline-block; transition:transform .2s ease; }
.carousel-title:hover{ text-decoration:none; }
.carousel-title:hover h2{ color:var(--gold-text); }
.carousel-title:hover .go-arrow{ transform:translateX(4px); }
.carousel-meta{ font-size:.9rem; color:var(--muted); }
.carousel-controls{ display:flex; align-items:center; gap:16px; }
.carousel-viewall{ font-size:.92rem; font-weight:600; color:var(--gold-text); white-space:nowrap; }
.carousel-nav{ display:flex; gap:8px; }
.cn-btn{
  width:40px; height:40px; border-radius:50%; flex:none;
  border:1px solid var(--line); background:var(--card); color:var(--text);
  display:flex; align-items:center; justify-content:center; cursor:pointer;
  transition:border-color .2s ease, opacity .2s ease, color .2s ease;
}
.cn-btn svg{ width:18px; height:18px; }
.cn-btn:hover{ border-color:var(--gold); color:var(--gold-text); }
.cn-btn:disabled{ opacity:.32; cursor:default; border-color:var(--line); color:var(--text); }

/* Three full cards plus a sliver of the fourth, so the track visibly invites a
   scroll. Top/bottom padding leaves room for the winner-card hover lift + shadow
   (overflow clips otherwise). */
.carousel-track{
  display:flex; gap:22px; overflow-x:auto; scroll-snap-type:x mandatory;
  scroll-behavior:smooth; padding:6px 2px 18px; margin:0 -2px;
  -webkit-overflow-scrolling:touch; scrollbar-width:none;
}
.carousel-track::-webkit-scrollbar{ display:none; }
.carousel-track > .winner-card{
  flex:0 0 calc((100% - 66px) / 3.25); scroll-snap-align:start; min-width:0;
}

/* ---------- comparison table ---------- */
.compare{ border-radius:var(--r-lg); overflow:hidden; border:1px solid var(--line); box-shadow:var(--shadow-md); background:var(--card); }
.compare table{ width:100%; border-collapse:collapse; font-size:.95rem; }
.compare th, .compare td{ padding:17px 20px; text-align:left; vertical-align:top; border-bottom:1px solid var(--line); }
.compare tr:last-child td{ border-bottom:0; }
.compare thead th{ font-family:var(--font-d); font-size:1.02rem; background:var(--page-alt); color:var(--text); }
.compare td:first-child, .compare th:first-child{ font-weight:600; width:21%; color:var(--text); }
.compare .col-c{ background:var(--gold-tile); border-left:1px solid var(--gold-tile-border); }
.compare thead .col-c{ color:var(--gold-text); }
.compare .x{ color:var(--bad); font-weight:600; }
.compare .ok{ color:var(--ok); font-weight:600; }
.compare td{ color:var(--muted); }
.compare td.col-c{ color:var(--text); }

/* ---------- stats ---------- */
.stats{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.stat{
  padding:34px 30px; border-radius:var(--r-md);
  background:var(--card); border:1px solid var(--line);
}
.stat .stat-n{
  font-family:var(--font-d); font-weight:600; font-size:clamp(2.4rem, 4vw, 3.4rem); line-height:1;
  color:var(--stat-num); display:flex; align-items:baseline; gap:.06em;
}
.stat .stat-n small{ font-size:.45em; color:var(--muted); font-family:var(--font-b); font-weight:500; }
.stat p{ margin:12px 0 0; color:var(--muted); font-size:.95rem; }
.footnote{ font-size:.8rem; color:var(--muted); opacity:.85; margin-top:26px; }
.light-footnote{ font-size:.8rem; color:var(--muted); margin-top:26px; }

/* ---------- deliverables ---------- */
.deliv{ display:flex; gap:18px; align-items:flex-start; }
.deliv .icon{
  flex:none; width:46px; height:46px; border-radius:12px;
  display:flex; align-items:center; justify-content:center;
  background:var(--gold-tile); color:var(--gold-text); border:1px solid var(--gold-tile-border);
}
.deliv .icon svg{ width:22px; height:22px; }
.deliv h3{ font-size:1.1rem; margin-bottom:.3em; }
.deliv p{ font-size:.95rem; color:var(--muted); margin:0; }

/* ---------- social mockups (literal-color objects, theme-independent) ---------- */
.mockups{ position:relative; display:flex; justify-content:center; align-items:center; min-height:420px; }
.ig-card{
  width:310px; background:#fff; border-radius:18px; overflow:hidden;
  box-shadow:0 24px 60px rgba(20,14,4,.4); transform:rotate(-2.5deg);
  font-size:.85rem; color:#222; position:relative; z-index:2;
}
.ig-head{ display:flex; align-items:center; gap:10px; padding:11px 14px; }
.ig-avatar{
  width:32px; height:32px; border-radius:50%;
  background:linear-gradient(135deg, #C79B3B, #EDCB72); color:#241B08;
  display:flex; align-items:center; justify-content:center; font-weight:700; font-size:.8rem; font-family:var(--font-d);
}
.ig-head b{ font-size:.85rem; color:#111; }
.ig-head span{ display:block; font-size:.72rem; color:#777; line-height:1.2; }
.ig-img{
  aspect-ratio:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px;
  background:
    radial-gradient(100% 80% at 50% 0%, rgba(233,196,104,.22), transparent 60%),
    linear-gradient(160deg, #17130C, #0E0C09);
  color:#F3ECDC; text-align:center; padding:24px;
}
.ig-img .seal{ width:74px; height:74px; }
.ig-img .ig-title{ font-family:var(--font-d); font-size:1.22rem; line-height:1.25; }
.ig-img .ig-sub{ font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; color:#EDCB72; }
.ig-actions{ display:flex; gap:12px; padding:11px 14px 4px; color:#333; }
.ig-actions svg{ width:21px; height:21px; }
.ig-caption{ padding:2px 14px 14px; font-size:.8rem; color:#333; }
.ig-caption b{ font-weight:600; }

.plaque{
  position:absolute; right:8%; bottom:-6px; z-index:1;
  width:250px; padding:26px 22px 22px; text-align:center; transform:rotate(3deg);
  background:linear-gradient(160deg, #221C12, #17130C);
  border:1px solid rgba(233,196,104,.4); border-radius:10px;
  box-shadow:inset 0 0 0 5px #0E0C09, inset 0 0 0 6.5px rgba(233,196,104,.5), 0 24px 50px rgba(20,14,4,.45);
  color:#F3ECDC;
}
.plaque .seal{ width:52px; height:52px; margin:0 auto 12px; }
.plaque .p-eyebrow{ font-size:.62rem; letter-spacing:.22em; text-transform:uppercase; color:#EDCB72; margin-bottom:6px; }
.plaque .p-name{ font-family:var(--font-d); font-size:1.12rem; line-height:1.3; margin-bottom:4px; }
.plaque .p-cat{ font-size:.75rem; color:#B4A88F; }
.plaque .p-year{ font-family:var(--font-d); color:#EDCB72; font-size:1rem; margin-top:10px; }

/* ---------- winning showcase (business page) ---------- */
.value-grid{ display:grid; grid-template-columns:1.05fr 1fr; gap:56px 64px; align-items:center; margin-top:72px; }
.showcase{ columns:2; column-gap:22px; }
.showcase figure{ margin:0 0 24px; break-inside:avoid; }
.showcase figcaption{ font-size:.8rem; color:var(--muted); text-align:center; line-height:1.5; margin-top:11px; padding-inline:8px; }
.showcase .ig-card{ width:100%; transform:rotate(-1.2deg); }
.showcase .plaque{ position:static; width:100%; transform:rotate(1.4deg); }

.serp-card{
  background:#fff; border-radius:14px; padding:18px 20px;
  box-shadow:0 18px 44px rgba(20,14,4,.35); transform:rotate(1.2deg);
}
.serp-url{ display:flex; align-items:center; gap:8px; font-size:.7rem; color:#5F6368; margin-bottom:8px; }
.serp-url .seal-mini{ width:16px; height:16px; flex:none; }
.serp-title{ font-size:.92rem; font-weight:600; color:#1A0DAB; line-height:1.35; margin-bottom:5px; }
.serp-snippet{ font-size:.78rem; color:#4D5156; line-height:1.5; margin:0; }
.serp-link{ display:flex; align-items:center; gap:8px; margin-top:11px; font-size:.78rem; font-weight:600; color:#0B57D0; }
.serp-chip{
  font-size:.6rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; white-space:nowrap;
  color:#7E5F14; background:rgba(199,155,59,.16); border:1px solid rgba(199,155,59,.45);
  border-radius:999px; padding:2.5px 9px; flex:none;
}

.ai-card{
  background:linear-gradient(160deg, #17130C, #0E0C09);
  border:1px solid rgba(233,196,104,.32); border-radius:16px; padding:18px;
  box-shadow:0 18px 44px rgba(20,14,4,.4); transform:rotate(-1deg); color:#F3ECDC;
}
.ai-q{ margin:0 0 12px 34px; background:#2B2416; border-radius:14px 14px 4px 14px; padding:9px 13px; font-size:.8rem; color:#EFE6D0; }
.ai-a{ font-size:.8rem; line-height:1.6; color:#CFC3A8; margin:0; }
.ai-a b{ color:#F3ECDC; font-weight:600; }
.ai-src{
  display:inline-flex; align-items:center; gap:7px; margin-top:12px;
  font-size:.66rem; color:#EDCB72;
  border:1px solid rgba(233,196,104,.35); border-radius:999px; padding:3px 11px;
}
.ai-src .seal-mini{ width:14px; height:14px; flex:none; }

/* ---------- quote ---------- */
.pullquote{
  max-width:820px; margin-inline:auto; text-align:center;
  font-family:var(--font-d); font-size:clamp(1.5rem, 3vw, 2.15rem); font-weight:500; line-height:1.35;
  color:var(--text);
}
.pullquote .attr{ display:block; margin-top:22px; font-family:var(--font-b); font-size:.92rem; font-weight:500; color:var(--muted); }

/* ---------- criteria list ---------- */
.criteria{ counter-reset:crit; display:grid; gap:16px; }
.crit{
  counter-increment:crit; display:flex; gap:22px; align-items:flex-start;
  background:var(--card); border:1px solid var(--line); border-radius:var(--r-md);
  padding:26px 28px; box-shadow:var(--shadow-sm);
}
.crit::before{
  content:counter(crit, decimal-leading-zero);
  font-family:var(--font-d); font-size:1.5rem; font-weight:600; color:var(--gold-text);
  flex:none; padding-top:2px;
}
.crit h3{ font-size:1.15rem; margin-bottom:.3em; }
.crit p{ margin:0; color:var(--muted); font-size:.97rem; }

/* verification checklist (winner pages) */
.verify-list{ list-style:none; margin:0; padding:0; display:grid; gap:12px; }
.verify-list li{ display:flex; gap:12px; align-items:flex-start; color:var(--muted); }
.verify-list li b{ color:var(--text); font-weight:600; }
.verify-list .tick{
  flex:none; width:22px; height:22px; border-radius:50%; margin-top:2px;
  display:flex; align-items:center; justify-content:center;
  background:var(--gold-tile); border:1px solid var(--gold-tile-border); color:var(--ok);
  font-size:.8rem; font-weight:700;
}

/* fact table (winner pages) */
.facts{ display:grid; gap:0; border:1px solid var(--line); border-radius:var(--r-md); overflow:hidden; background:var(--card); }
.fact{ display:flex; justify-content:space-between; gap:18px; padding:15px 22px; border-bottom:1px solid var(--line); font-size:.95rem; }
.fact:last-child{ border-bottom:0; }
.fact .k{ color:var(--muted); flex:none; }
.fact .v{ text-align:right; color:var(--text); font-weight:500; word-break:break-word; }

/* ---------- FAQ accordion ---------- */
.faq-group{ margin-bottom:48px; }
.faq-group h2{ font-size:1.5rem; margin-bottom:20px; }
details.qa{
  background:var(--card); border:1px solid var(--line); border-radius:var(--r-md);
  margin-bottom:12px; overflow:hidden; transition:border-color .2s ease;
}
details.qa[open]{ border-color:var(--gold); }
details.qa summary{
  cursor:pointer; list-style:none; display:flex; justify-content:space-between; align-items:center; gap:16px;
  padding:19px 24px; font-weight:600; font-size:1.02rem; color:var(--text);
}
details.qa summary::-webkit-details-marker{ display:none; }
details.qa summary::after{
  content:"+"; font-family:var(--font-d); font-size:1.5rem; color:var(--gold-text); line-height:1;
  transition:transform .2s ease; flex:none;
}
details.qa[open] summary::after{ transform:rotate(45deg); }
details.qa .qa-body{ padding:0 24px 22px; color:var(--muted); }
details.qa .qa-body p:last-child{ margin-bottom:0; }
details.qa .qa-body ul{ margin:.3em 0 .8em; padding-left:1.2em; }
details.qa .qa-body li{ margin-bottom:.4em; }

/* ---------- forms ---------- */
.form-card{
  background:var(--card); border:1px solid var(--line); border-radius:var(--r-lg);
  padding:40px; box-shadow:var(--shadow-md);
}
.form-grid{ display:grid; grid-template-columns:1fr 1fr; gap:18px 20px; }
.field{ display:flex; flex-direction:column; gap:7px; }
.field-full{ grid-column:1 / -1; }
.field label{ font-size:.88rem; font-weight:600; color:var(--text); }
.field .hint{ font-size:.8rem; color:var(--muted); margin-top:-2px; }
.field .req{ color:var(--gold-text); }
.field input[type=text], .field input[type=email], .field input[type=url], .field input[type=tel],
.field select, .field textarea{
  font:inherit; font-size:.96rem; color:var(--text);
  padding:.72em .95em; border-radius:var(--r-sm);
  border:1.5px solid var(--input-border); background:var(--input-bg);
  transition:border-color .18s ease, box-shadow .18s ease, background .18s ease;
  width:100%;
}
.field textarea{ resize:vertical; min-height:96px; }
.field input:focus, .field select:focus, .field textarea:focus{
  outline:none; border-color:var(--gold); background:var(--input-focus-bg); box-shadow:0 0 0 4px rgba(199,155,59,.18);
}
.check{ display:flex; gap:11px; align-items:flex-start; font-size:.92rem; color:var(--text); }
.check input{ margin-top:4px; width:17px; height:17px; accent-color:var(--gold); flex:none; }
.owner-toggle{
  display:flex; gap:11px; align-items:center; padding:14px 16px;
  background:var(--gold-tile); border:1px solid var(--gold-tile-border); border-radius:var(--r-sm);
  font-weight:600; font-size:.94rem; color:var(--text);
}
.owner-toggle input{ width:17px; height:17px; accent-color:var(--gold); }
.field-lead{
  background:var(--gold-tile); border:1px solid var(--gold-tile-border);
  border-radius:var(--r-md); padding:18px 18px 16px;
}
.field-lead label{ font-size:1.02rem; }
.field-lead input[type=url]{ font-size:1.02rem; padding:.85em 1em; }
.profile-status{ display:none; font-weight:600; }
.profile-status.on{ display:block; }
.profile-status.ok{ color:var(--ok); }
.field .autofilled{ animation:autofill-flash 1.4s ease; }
@keyframes autofill-flash{
  0%{ background:var(--gold-tile); border-color:var(--gold); }
  100%{ background:var(--input-bg); border-color:var(--input-border); }
}
.form-success{ display:none; text-align:center; padding:56px 30px; }
.form-success .seal{ width:64px; height:64px; margin:0 auto 20px; }
.form-success h3{ font-size:1.6rem; }
.form-success p{ color:var(--muted); max-width:440px; margin-inline:auto; }
.form-card.submitted form{ display:none; }
.form-card.submitted .form-success{ display:block; }
.form-error{ display:none; color:var(--bad); font-size:.9rem; font-weight:600; margin-top:14px; }

/* ---------- filter chips ---------- */
.filter-row{ display:flex; gap:10px; flex-wrap:wrap; margin-bottom:36px; }
.filter-btn{
  font:inherit; font-size:.9rem; font-weight:600; cursor:pointer;
  padding:.5em 1.2em; border-radius:999px;
  border:1.5px solid var(--line); background:var(--card); color:var(--muted);
  transition:all .18s ease;
}
.filter-btn:hover{ border-color:var(--gold); color:var(--text); }
.filter-btn.active{ background:var(--solid-btn-bg); border-color:var(--solid-btn-bg); color:var(--solid-btn-fg); }

/* ---------- footer ---------- */
.site-footer{ background:var(--footer-bg); color:var(--muted); padding:72px 0 40px; }
.footer-grid{ display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; gap:40px; margin-bottom:52px; }
.footer-brand .brand{ margin-bottom:14px; }
.footer-brand p{ font-size:.92rem; max-width:280px; }
.site-footer h4{ font-family:var(--font-b); font-size:.8rem; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--text); margin-bottom:16px; }
.site-footer ul{ list-style:none; margin:0; padding:0; }
.site-footer li{ margin-bottom:10px; }
.site-footer a{ color:var(--muted); font-size:.94rem; }
.site-footer a:hover{ color:var(--gold-text); text-decoration:none; }
.footer-social{ display:flex; gap:12px; margin-top:18px; }
.footer-social a{
  width:38px; height:38px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  border:1px solid var(--footer-border); color:var(--muted); transition:all .2s ease;
}
.footer-social a:hover{ border-color:var(--gold-text); color:var(--gold-text); transform:translateY(-2px); }
.footer-social svg{ width:17px; height:17px; }
.footer-bottom{
  border-top:1px solid var(--footer-border); padding-top:28px;
  display:flex; justify-content:space-between; align-items:center; gap:16px; flex-wrap:wrap;
  font-size:.84rem;
}

/* theme toggle */
.theme-toggle{
  display:inline-flex; align-items:center; gap:2px;
  background:transparent; border:1px solid var(--footer-border); border-radius:999px;
  padding:3px; cursor:pointer;
}
.theme-toggle .tt-opt{
  width:30px; height:30px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  color:var(--muted); transition:background .2s ease, color .2s ease;
}
.theme-toggle .tt-opt svg{ width:15px; height:15px; }
html[data-theme="light"] .theme-toggle .tt-light,
html[data-theme="dark"] .theme-toggle .tt-dark{
  background:var(--gold-tile); color:var(--gold-text);
  border:1px solid var(--gold-tile-border);
}

/* ---------- business profile (winner pages) ---------- */
.crumb-bar{ background:var(--page-alt); border-bottom:1px solid var(--line); padding:11px 0; }
.crumb-bar .crumbs{ margin-bottom:0; }

.biz-cover{ position:relative; height:clamp(220px, 38vw, 420px); overflow:hidden; background:#0D0B08; }
.biz-cover img{ width:100%; height:100%; object-fit:cover; }
.biz-cover::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(to bottom, rgba(13,11,8,0) 40%, rgba(13,11,8,.6) 100%);
}

.biz-head{ position:relative; z-index:2; margin-top:-64px; display:flex; gap:28px; align-items:flex-start; flex-wrap:wrap; }
.biz-logo{
  width:132px; height:132px; border-radius:50%; flex:none; overflow:hidden;
  border:4px solid var(--page); background:#0B0908;
  box-shadow:var(--shadow-md), 0 0 0 1.5px var(--gold);
}
.biz-logo img{ width:100%; height:100%; object-fit:cover; }
.biz-title{ flex:1; min-width:280px; padding-top:80px; }
.biz-title h1{ font-size:clamp(2rem, 4.2vw, 3rem); margin:.35em 0 .15em; }
.biz-title .biz-cat{ font-weight:600; color:var(--gold-text); }
.biz-title .biz-meta{ color:var(--muted); font-size:.95rem; }

.rating-line{ display:flex; align-items:baseline; gap:12px; flex-wrap:wrap; margin-top:12px; }
.rating-line .rating-attribution{ flex:1 1 100%; margin:6px 0 0; font-size:.78rem; line-height:1.45; color:var(--muted); max-width:42em; }
.rating-line .rating-attribution a{ color:inherit; text-decoration:underline; text-underline-offset:2px; }
/* Partial star fill. The base row paints the dim remainder and .stars-on is a
   gold overlay clipped by --star-fill (set inline from the parsed rating), so
   "4.5 stars" shows four and a half. Both rows carry the same glyphs at the
   same tracking, so they register exactly. The renderers omit the whole span
   when no rating parses, so an unfilled row never reads as zero stars. */
.stars{
  --star-on:var(--gold-2);
  --star-off:rgba(237,203,114,.28);
  position:relative; display:inline-block; white-space:nowrap;
  color:var(--star-off); font-size:1.1rem; letter-spacing:2px;
}
.stars .stars-on{
  position:absolute; left:0; top:0; overflow:hidden; white-space:nowrap;
  width:var(--star-fill, 100%); color:var(--star-on);
}
html[data-theme="light"] .stars{ --star-on:#A87F1E; --star-off:rgba(168,127,30,.3); }
.rating-line b{ font-size:1.02rem; color:var(--text); }
.rating-line .rating-note{ color:var(--muted); font-size:.9rem; }

/* ---------- multi-year winners: hero year streak ---------- */
.year-streak{ display:flex; align-items:center; flex-wrap:wrap; gap:8px; margin-top:14px; }
.ys-label{
  display:inline-flex; align-items:center; gap:.55em; margin-right:4px;
  font-size:.78rem; font-weight:600; letter-spacing:.09em; text-transform:uppercase;
  color:var(--gold-text); white-space:nowrap;
}
.ys-label .seal-mini{ width:17px; height:17px; flex:none; }
.ys-year{
  font-size:.84rem; font-weight:600; font-variant-numeric:tabular-nums;
  padding:.32em .78em; border-radius:8px;
  background:var(--gold-tile); color:var(--gold-text);
  border:1px solid var(--gold-tile-border);
  transition:transform .16s ease, border-color .2s ease, box-shadow .2s ease;
}
a.ys-year:hover{ text-decoration:none; transform:translateY(-2px); border-color:var(--gold); box-shadow:var(--shadow-sm); }
.ys-year.is-current{
  background:linear-gradient(120deg, #D9AC46, #EDCB72 55%, #D9AC46);
  color:#241B08; border-color:transparent; box-shadow:0 2px 10px rgba(199,155,59,.35);
}

/* ---------- multi-year winners: the award wall ---------- */
/* Framed "Best of {City} {Year}" badges, one per award year — certificates on
   the restaurant wall. The badge art is gold on black, so every frame keeps
   its own fixed dark mat in both themes, like a real plaque on any wall. */
/* (.wall-plaque, not .plaque — that name is taken by the homepage showcase) */
.award-wall{ display:flex; flex-wrap:wrap; justify-content:center; gap:30px 26px; margin-top:10px; }
.wall-plaque{ flex:0 1 225px; min-width:170px; display:flex; flex-direction:column; gap:12px; text-align:center; }
.wall-plaque:hover{ text-decoration:none; }
.wp-art{
  position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center;
  aspect-ratio:1; width:100%; overflow:hidden; border-radius:8px;
  container-type:inline-size; /* etched-plaque type sizes in cqw track the frame */
  background:#0E0B07; border:1px solid rgba(237,203,114,.4);
  box-shadow:0 0 0 5px #171208, 0 0 0 6px rgba(237,203,114,.32), 0 16px 30px rgba(0,0,0,.3);
  transition:transform .2s ease, box-shadow .25s ease;
}
.wall-plaque:hover .wp-art{
  transform:translateY(-4px);
  box-shadow:0 0 0 5px #171208, 0 0 0 6px rgba(237,203,114,.55), 0 22px 40px rgba(0,0,0,.36), 0 6px 24px rgba(199,155,59,.28);
}
.wp-art img{ width:100%; height:100%; object-fit:cover; }
.wp-cap{ font-size:.86rem; color:var(--muted); line-height:1.4; }
.wp-cap b{ color:var(--text); font-weight:600; margin-right:.45em; font-variant-numeric:tabular-nums; }
/* Etched house plaque for award years whose city artwork isn't produced yet —
   fixed golds echoing the badge art, independent of theme. */
.wp-etched{ gap:2px; padding:12%; }
.wp-etched .pe-seal{ width:24%; aspect-ratio:1; height:auto; flex:none; margin-bottom:7%; }
.wp-etched .pe-best{
  font-size:clamp(.6rem, 8cqw, .78rem); font-weight:600; letter-spacing:.34em; text-transform:uppercase;
  color:#C9A249; padding-left:.34em;
}
.wp-etched .pe-city{
  font-family:var(--font-d); font-weight:600; font-size:clamp(1rem, 14cqw, 1.5rem); line-height:1.1;
  color:#EFCF78; letter-spacing:.02em;
}
.wp-etched .pe-year{
  font-family:var(--font-d); font-weight:600; font-size:clamp(1.3rem, 20cqw, 2.1rem); line-height:1.15;
  color:#F4D88E; font-variant-numeric:tabular-nums;
}
.wp-etched .pe-award{
  margin-top:9%; font-size:clamp(.52rem, 6.5cqw, .66rem); font-weight:600; letter-spacing:.26em; text-transform:uppercase;
  color:#A97F27; padding-left:.26em;
}
@media (max-width: 620px){
  .award-wall{ gap:22px 16px; }
  .wall-plaque{ flex:0 1 calc(50% - 8px); min-width:0; }
}

.platform-card{
  display:flex; align-items:center; gap:16px;
  background:var(--card); border:1px solid var(--line); border-radius:var(--r-md);
  padding:20px 22px; box-shadow:var(--shadow-sm);
  transition:transform .2s ease, box-shadow .25s ease, border-color .2s ease;
}
.platform-card:hover{ transform:translateY(-3px); border-color:var(--gold); box-shadow:var(--shadow-md); text-decoration:none; }
.platform-card .p-ic{
  width:44px; height:44px; border-radius:12px; flex:none;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-d); font-weight:700; font-size:1.15rem;
  background:var(--gold-tile); color:var(--gold-text); border:1px solid var(--gold-tile-border);
}
.platform-card .p-name{ font-weight:600; color:var(--text); line-height:1.3; }
.platform-card .p-stat{ font-size:.87rem; color:var(--muted); }
.platform-card .p-go{ margin-left:auto; color:var(--gold-text); font-weight:600; font-size:.9rem; white-space:nowrap; }

.glance{ display:grid; grid-template-columns:1fr 1fr; gap:0 44px; margin:0; border:1px solid var(--line); border-radius:var(--r-md); background:var(--card); padding:8px 28px; }
.glance > div{ display:flex; justify-content:space-between; gap:18px; padding:13px 0; border-bottom:1px solid var(--line); font-size:.94rem; }
.glance > div:nth-last-child(-n+2){ border-bottom:0; }
.glance dt{ color:var(--muted); margin:0; flex:none; }
.glance dd{ margin:0; text-align:right; color:var(--text); font-weight:500; }

.tour-list{ list-style:none; margin:0; padding:0; display:grid; gap:12px; }
.tour-list li{ display:flex; gap:12px; align-items:baseline; color:var(--muted); }
.tour-list li::before{ content:"—"; color:var(--gold-text); flex:none; }
.tour-list b{ color:var(--text); font-weight:600; }

/* ---------- split layouts ---------- */
.split-form{ grid-template-columns:1.5fr 1fr; gap:44px; align-items:start; }
.split-side{ grid-template-columns:1fr 1.4fr; gap:56px; align-items:start; }
.sticky-head{ position:sticky; top:100px; }

/* ---------- audience router (home) ---------- */
.paths{ display:grid; grid-template-columns:1fr 1fr; gap:26px; }
.path{
  position:relative; overflow:hidden; display:flex; flex-direction:column;
  border-radius:var(--r-lg); padding:42px 40px 38px;
  background:var(--card); border:1px solid var(--line); box-shadow:var(--shadow-sm);
}
.path h3{ font-size:clamp(1.5rem, 2.4vw, 1.85rem); margin-bottom:.4em; }
.path > p{ color:var(--muted); margin-bottom:0; }
.path .cta-row{ margin-top:auto; padding-top:26px; }
.path-owner{ background:var(--market-bg); border-color:var(--market-border); }
.path-corner{
  position:absolute; top:0; right:0; width:150px; height:150px; pointer-events:none;
  opacity:.09; transform:translate(30%,-30%);
}
.path-links{ display:flex; flex-wrap:wrap; gap:6px 24px; margin-top:16px; font-size:.93rem; font-weight:600; }

/* founder portraits (about page) */
.founder-head{ display:flex; align-items:center; gap:20px; margin-bottom:24px; }
.founder-photo{
  position:relative; flex:0 0 auto; width:108px; height:108px;
  border-radius:var(--r-sm); overflow:hidden;
  background:var(--gold-tile); border:1px solid var(--gold-tile-border);
  display:flex; align-items:center; justify-content:center;
}
.founder-photo img{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; filter:grayscale(1) contrast(1.02);
}
.founder-monogram{
  font-family:var(--font-d); font-weight:600; font-size:2rem; line-height:1;
  color:var(--gold-text); letter-spacing:.01em; user-select:none;
}
.founder-id{ min-width:0; }
.founder-id h3{ margin:0 0 .18em; }
.founder-id .ab-role{ margin:0 !important; }
@media (max-width:520px){
  .founder-head{ gap:16px; }
  .founder-photo{ width:88px; height:88px; }
  .founder-monogram{ font-size:1.6rem; }
}

/* owner status lookup */
.lookup{ display:flex; gap:10px; margin-top:auto; padding-top:26px; }
.lookup input{
  flex:1; min-width:0; font:inherit; font-size:.98rem; color:var(--text);
  padding:.8em 1.25em; border-radius:999px;
  border:1.5px solid var(--input-border); background:var(--input-bg);
  transition:border-color .18s ease, box-shadow .18s ease;
}
.lookup input::placeholder{ color:var(--muted); opacity:.8; }
.lookup input:focus{ outline:none; border-color:var(--gold); box-shadow:0 0 0 4px rgba(199,155,59,.18); }
.lookup .btn{ flex:none; }
.lookup-note{ font-size:.84rem; color:var(--muted); margin:14px 0 0; }

/* ---------- star-rule divider ----------
   Standard element: a centered row of FIVE seals between two fading rules.
   Always five stars, never one. Canonical markup (copy verbatim):
   <div class="orn reveal" aria-hidden="true"><span class="orn-stars"><svg class="seal-mini" viewBox="0 0 64 64"><use href="#seal-mark"/></svg><svg class="seal-mini" viewBox="0 0 64 64"><use href="#seal-mark"/></svg><svg class="seal-mini" viewBox="0 0 64 64"><use href="#seal-mark"/></svg><svg class="seal-mini" viewBox="0 0 64 64"><use href="#seal-mark"/></svg><svg class="seal-mini" viewBox="0 0 64 64"><use href="#seal-mark"/></svg></span></div>
*/
.orn{
  display:flex; align-items:center; gap:18px;
  max-width:380px; margin:0 auto 56px;
}
.orn::before, .orn::after{ content:""; flex:1; height:1px; }
.orn::before{ background:linear-gradient(90deg, transparent, var(--line)); }
.orn::after{ background:linear-gradient(270deg, transparent, var(--line)); }
.orn .seal-mini{ width:17px; height:17px; flex:none; }
.orn-stars{ display:inline-flex; align-items:center; gap:7px; flex:none; }

/* ---------- count strip ---------- */
.count-strip{
  display:flex; flex-wrap:wrap; margin-top:36px;
  border:1px solid var(--line); border-radius:var(--r-md); background:var(--card);
  width:max-content; max-width:100%; box-shadow:var(--shadow-sm); overflow:hidden;
}
.count{ display:flex; flex-direction:column; gap:2px; padding:20px 32px 18px; }
.count + .count{ border-left:1px solid var(--line); }
.count b{
  font-family:var(--font-d); font-weight:600; font-size:1.9rem; line-height:1.1;
  color:var(--stat-num); font-variant-numeric:tabular-nums;
}
.count span{ font-size:.82rem; color:var(--muted); }

/* numbers everywhere: lining, even widths */
.stat .stat-n, .w-years span, .ticker-item, .count b{ font-variant-numeric:tabular-nums; }

/* winner-card gold sheen on hover */
.winner-card{ overflow:hidden; }
.winner-card::before{
  content:""; position:absolute; top:0; left:-55%; width:45%; height:2px;
  background:linear-gradient(90deg, transparent, var(--gold-2), transparent);
  transition:left .6s ease; pointer-events:none;
}
.winner-card:hover::before{ left:110%; }

/* ---------- reveal animations ----------
   Default is VISIBLE, so the content reads with no JS (or before site.js runs)
   — no permanently blank sections if the script fails or is slow. The hidden,
   pre-animation state only applies under html.js, which the inline head script
   sets before first paint (no flash). ?revealall=1 still adds .in for QA, and
   reduced-motion keeps every reveal visible with no transition. */
.reveal{ opacity:1; transform:none; }
html.js .reveal{ opacity:0; transform:translateY(22px); transition:opacity .65s ease, transform .65s ease; }
html.js .reveal.in{ opacity:1; transform:none; }
.reveal-d1{ transition-delay:.08s; } .reveal-d2{ transition-delay:.16s; }
.reveal-d3{ transition-delay:.24s; } .reveal-d4{ transition-delay:.32s; }
@media (prefers-reduced-motion: reduce){
  html.js .reveal{ opacity:1; transform:none; transition:none; }
  .ticker{ animation:none; }
  .field .autofilled{ animation:none; }
  html{ scroll-behavior:auto; }
}

/* ---------- responsive ---------- */
@media (max-width: 1100px){
  .nav-links{ gap:16px; font-size:.9rem; }
}
@media (max-width: 980px){
  .grid-4{ grid-template-columns:repeat(2,1fr); }
  .grid-3{ grid-template-columns:repeat(2,1fr); }
  .stats{ grid-template-columns:1fr; }
  .paths{ grid-template-columns:1fr; }
  .footer-grid{ grid-template-columns:1fr 1fr; }
  .hero-seal-bg{ display:none; }
  .hero-crest{ display:none; }
  .split-form, .split-side{ grid-template-columns:1fr; }
  .sticky-head{ position:static; }
  .value-grid{ grid-template-columns:1fr; }
  .showcase{ max-width:700px; margin-inline:auto; }
  .carousel-track > .winner-card{ flex-basis:calc((100% - 44px) / 2.25); }
}
@media (max-width: 900px){
  .nav-links{
    display:none; position:absolute; top:68px; left:0; right:0;
    flex-direction:column; align-items:flex-start; gap:4px;
    background:var(--page); border-bottom:1px solid var(--line);
    padding:18px 24px 24px;
  }
  .nav-links.open{ display:flex; }
  .nav-links a{ padding:10px 0; font-size:1.05rem; width:100%; }
  .nav-links .btn{ width:auto; margin-top:10px; }
  .nav-toggle{ display:block; }
  section{ padding:72px 0; }
}
@media (max-width: 700px){
  .grid-2, .grid-3, .grid-4{ grid-template-columns:1fr; }
  .carousel-title h2{ font-size:1.3rem; }
  .carousel-nav{ display:none; }
  .carousel-track > .winner-card{ flex-basis:84%; }
  .form-grid{ grid-template-columns:1fr; }
  .form-card{ padding:28px 22px; }
  .path{ padding:32px 26px 28px; }
  .lookup{ flex-direction:column; }
  .lookup .btn{ width:100%; }
  .count{ padding:16px 22px 14px; flex:1 1 40%; }
  .count + .count{ border-left:0; border-top:1px solid var(--line); }
  .count:nth-child(2){ border-top:0; border-left:1px solid var(--line); }
  .compare{ overflow-x:auto; }
  .compare table{ min-width:640px; }
  .mockups{ min-height:0; flex-direction:column; gap:26px; padding-bottom:10px; }
  .plaque{ position:static; transform:rotate(2deg); }
  .ig-card{ transform:rotate(-1.5deg); }
  .showcase{ columns:1; max-width:340px; }
  .footer-grid{ grid-template-columns:1fr; gap:30px; }
  .container{ width:calc(100% - 40px); }
  .biz-head{ margin-top:-52px; gap:14px; flex-direction:column; }
  .biz-logo{ width:104px; height:104px; }
  .biz-title{ padding-top:0; min-width:0; }
  .glance{ grid-template-columns:1fr; padding:6px 22px; }
  .glance > div:nth-last-child(-n+2){ border-bottom:1px solid var(--line); }
  .glance > div:last-child{ border-bottom:0; }
  .platform-card .p-go{ display:none; }
}

/* ---------- market directory (year / state / city / category pages) ---------- */
/* Skylines sit in the lower band of most city photos — bias the crop down. */
.market-cover img{ object-position:center 68%; }
.market-cover .cover-credit{
  position:absolute; right:14px; bottom:10px; z-index:2;
  font-size:.72rem; letter-spacing:.01em;
  color:rgba(247,241,227,.82); background:rgba(13,11,8,.5);
  padding:4px 12px; border-radius:999px; backdrop-filter:blur(4px);
}
.market-cover .cover-credit a{ color:inherit; text-decoration:none; }
.market-cover .cover-credit a:hover{ color:#fff; text-decoration:underline; }

.market-head{ padding:44px 0 6px; }
.market-head h1{ margin:.2em 0 .25em; }
.market-head .hero-sub{ max-width:760px; }
.stat-chips{ display:flex; flex-wrap:wrap; gap:10px; margin-top:20px; }

/* city cards with a photo (atlas + state pages) */
.place-card{
  display:flex; flex-direction:column;
  background:var(--card); border:1px solid var(--line); border-radius:var(--r-md);
  overflow:hidden; box-shadow:var(--shadow-sm);
  transition:transform .2s ease, box-shadow .25s ease, border-color .2s ease;
}
.place-card:hover{ transform:translateY(-4px); box-shadow:var(--shadow-md); border-color:var(--gold); text-decoration:none; }
.place-card img{
  width:100%; aspect-ratio:16/9; height:auto; object-fit:cover; display:block;
  border-bottom:1px solid var(--line); background:#0D0B08;
}
.place-card .pc-body{ display:flex; flex-direction:column; gap:4px; padding:18px 20px 20px; }
.place-card h3{ margin:0; font-size:1.25rem; color:var(--text); }
.place-card .pc-meta{ font-size:.86rem; color:var(--muted); }
.place-card .go{ color:var(--gold-text); font-weight:600; font-size:.9rem; margin-top:8px; }

/* the atlas, grouped by state */
.atlas-state{ margin-top:44px; }
.atlas-state-name{
  font-size:1.15rem; margin-bottom:16px; padding-bottom:10px;
  border-bottom:1px solid var(--line);
}
.atlas-state-name a{ color:var(--text); }
.atlas-state-name a:hover{ color:var(--gold-text); text-decoration:none; }

/* category link list (market + category pages) */
.cat-list{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(2, 1fr); gap:10px 22px;
}
.cat-list a{
  display:flex; justify-content:space-between; align-items:baseline; gap:14px;
  padding:13px 16px; border:1px solid var(--line); border-radius:12px;
  background:var(--card); color:var(--text);
  transition:border-color .2s ease, transform .2s ease;
}
.cat-list a:hover{ border-color:var(--gold); transform:translateY(-2px); text-decoration:none; }
.cat-list .cl-name{ font-weight:600; }
.cat-list .cl-meta{ font-size:.84rem; color:var(--muted); white-space:nowrap; }
.cat-list .cl-go{ color:var(--gold-text); }

@media (max-width: 700px){
  .cat-list{ grid-template-columns:1fr; }
  .market-head{ padding-top:34px; }
}

/* ── Apply flow (/apply) ─────────────────────────────────────────────────
   The owner onboarding + checkout. Reuses the form components above; these
   pieces are the progress rail, the qualified card, and the order summary. */

.apply-rail{
  list-style:none; margin:0 0 26px; padding:0;
  display:flex; gap:8px; justify-content:space-between;
}
.apply-rail li{
  display:flex; align-items:center; gap:9px; flex:1;
  font-size:.86rem; font-weight:600; color:var(--muted);
}
.apply-rail li:not(:last-child)::after{
  content:""; flex:1; height:1.5px; background:var(--line); margin:0 4px;
}
.apply-rail .ar-dot{
  width:26px; height:26px; border-radius:50%; flex:none;
  display:grid; place-items:center;
  border:1.5px solid var(--line); color:var(--muted);
  font-size:.8rem; font-family:Fraunces, serif;
}
.apply-rail li.current{ color:var(--text); }
.apply-rail li.current .ar-dot{ border-color:var(--gold); color:var(--gold-text); }
.apply-rail li.done{ color:var(--gold-text); }
.apply-rail li.done .ar-dot{
  border-color:var(--gold); background:var(--gold); color:#241B08;
}
.apply-rail li.done .ar-dot::before{ content:"✓"; position:absolute; }
.apply-rail li.done .ar-dot{ position:relative; font-size:0; }
.apply-rail li.done .ar-dot::before{ font-size:.8rem; position:static; }

.apply-panel{ margin-bottom:20px; }
#apply-error{ margin:0 0 16px; }

.apply-spinner{
  width:44px; height:44px; margin:6px auto 20px;
  border-radius:50%; border:3px solid var(--line); border-top-color:var(--gold);
  animation:apply-spin .9s linear infinite;
}
@keyframes apply-spin{ to{ transform:rotate(360deg); } }

.qualified-card{
  background:var(--card); border:1px solid var(--gold);
  border-radius:16px; padding:26px 28px;
  box-shadow:var(--shadow-md);
}
.qualified-card .q-head{ display:flex; gap:16px; align-items:center; }
.qualified-card .q-head .seal{ width:46px; height:46px; flex:none; }
.qualified-card h3{ margin:0; font-size:1.35rem; }
.crit-list{
  list-style:none; margin:16px 0 0; padding:0;
  display:grid; grid-template-columns:1fr 1fr; gap:7px 18px;
}
.crit-list li{ font-size:.9rem; color:var(--muted); }
.crit-list li.pass{ color:var(--text); }
.crit-list li.pass::first-letter{ color:var(--ok); }

.offer-note{
  margin-top:18px; padding:14px 16px; border-radius:12px;
  background:var(--page-emph); border:1px solid var(--line);
  font-size:.93rem; color:var(--muted); line-height:1.55;
}
.offer-note b{ color:var(--text); }

.order-summary{ border:1px solid var(--line); border-radius:12px; overflow:hidden; }
.or-row{
  display:flex; justify-content:space-between; align-items:baseline; gap:16px;
  padding:14px 16px; font-size:.95rem;
}
.or-row + .or-row{ border-top:1px solid var(--line); }
.or-row .or-sub{ display:block; font-size:.8rem; color:var(--muted); margin-top:3px; }
.or-price{ white-space:nowrap; }
.or-price s{ color:var(--muted); opacity:.75; margin-right:4px; font-size:.86rem; }
.or-offer{ font-size:.85rem; color:var(--gold-text); background:var(--page-emph); }

.addon-row{
  display:flex; justify-content:space-between; align-items:center; gap:16px;
  padding:12px 14px; border:1px solid var(--line); border-radius:12px;
  margin-bottom:8px; cursor:pointer; font-size:.95rem;
  transition:border-color .18s ease;
}
.addon-row:hover{ border-color:var(--gold); }
.addon-row input{ accent-color:var(--gold); width:17px; height:17px; margin-right:6px; }

.order-total{
  display:flex; justify-content:space-between; align-items:baseline;
  margin-top:16px; padding-top:14px; border-top:1.5px solid var(--line);
  font-size:1.05rem;
}
.order-total b{ font-size:1.5rem; font-family:Fraunces, serif; }

.copy-row{ display:flex; gap:8px; max-width:440px; margin:0 auto; }
.copy-row input{
  flex:1; font-size:.85rem; padding:.6em .8em;
  background:var(--page); color:var(--muted);
  border:1px solid var(--input-border); border-radius:10px;
}
.or-rule{
  display:flex; align-items:center; gap:14px; margin:18px 0 14px;
  color:var(--muted); font-size:.82rem;
}
.or-rule::before, .or-rule::after{ content:""; flex:1; height:1px; background:var(--line); }

.hint.center{ text-align:center; }

@media (max-width: 700px){
  .apply-rail li{ font-size:0; gap:0; }
  .apply-rail .ar-dot{ font-size:.8rem; }
  .apply-rail li.done .ar-dot::before{ font-size:.8rem; }
  .crit-list{ grid-template-columns:1fr; }
}

/* ── Legal pages (terms.html, privacy.html) ─────────────────────── */
.legal{ color:var(--muted); font-size:.98rem; }
.legal h2{ font-size:1.35rem; margin:2.1em 0 .55em; }
.legal h3{ font-size:1.02rem; margin:1.5em 0 .45em; }
.legal ul{ margin:.3em 0 1.1em; padding-left:1.25em; }
.legal li{ margin-bottom:.5em; }
.legal strong{ color:var(--text); }
.legal a{ color:var(--gold-text); }
.legal-note{
  background:var(--card); border:1px solid var(--line); border-radius:16px;
  padding:22px 26px; margin:0 0 36px;
}
.legal-note p:last-child{ margin-bottom:0; }

/* ── The Centurion Journal (blog) ───────────────────────────────── */

/* index cards */
.blog-card{
  display:flex; flex-direction:column;
  background:var(--card); border:1px solid var(--line); border-radius:var(--r-md);
  overflow:hidden; box-shadow:var(--shadow-sm);
  transition:transform .2s ease, box-shadow .25s ease, border-color .2s ease;
}
.blog-card:hover{ transform:translateY(-4px); box-shadow:var(--shadow-md); border-color:var(--gold); text-decoration:none; }
.blog-card img{
  width:100%; aspect-ratio:16/9; height:auto; object-fit:cover;
  border-bottom:1px solid var(--line); background:#0D0B08;
}
.bc-fallback{
  display:flex; align-items:center; justify-content:center;
  aspect-ratio:16/9; background:var(--page-emph); border-bottom:1px solid var(--line);
}
.bc-fallback svg{ width:64px; height:64px; opacity:.55; }
.blog-card .bc-body{ display:flex; flex-direction:column; gap:8px; padding:20px 22px 22px; }
.blog-card h3{ margin:0; font-size:1.22rem; color:var(--text); }
.bc-aud{ align-self:flex-start; font-size:.72rem; }
.bc-excerpt{ margin:0; font-size:.92rem; color:var(--muted); }
.bc-meta{ font-size:.82rem; color:var(--muted); margin-top:auto; padding-top:6px; }

/* featured article */
.blog-feature{
  display:grid; grid-template-columns:1.15fr 1fr; align-items:stretch;
  background:var(--card); border:1px solid var(--line); border-radius:var(--r-lg);
  overflow:hidden; box-shadow:var(--shadow-sm);
  transition:transform .2s ease, box-shadow .25s ease, border-color .2s ease;
}
.blog-feature:hover{ transform:translateY(-4px); box-shadow:var(--shadow-md); border-color:var(--gold); text-decoration:none; }
.blog-feature img{ width:100%; height:100%; object-fit:cover; background:#0D0B08; }
.blog-feature .bc-fallback{ aspect-ratio:auto; border-bottom:0; border-right:1px solid var(--line); }
.blog-feature .bf-body{ display:flex; flex-direction:column; gap:10px; padding:34px 36px; }
.blog-feature h2{ margin:0; font-size:clamp(1.5rem, 2.6vw, 2rem); color:var(--text); }
.blog-feature p{ margin:0; color:var(--muted); }
.blog-feature .bc-meta{ display:flex; align-items:center; gap:10px; }

/* audience filter */
.blog-filter{ display:flex; flex-wrap:wrap; gap:10px; margin-bottom:26px; }
.blog-filter .chip{ cursor:pointer; font:inherit; font-size:.82rem; }
.blog-filter .chip.is-active{
  background:var(--gold-tile); color:var(--gold-text); border-color:var(--gold);
}

/* article page */
.post-head{ padding:64px 0 8px; }
.post-head h1{ font-size:clamp(2.1rem, 4.2vw, 3.2rem); }
.post-meta{
  display:flex; flex-wrap:wrap; align-items:center; gap:.6em;
  font-size:.9rem; color:var(--muted); margin-top:18px;
}
.post-meta b{ color:var(--text); font-weight:600; }
.post-meta .dot{ opacity:.5; }
.post-cover{ margin:34px 0 0; }
.post-cover img{ width:100%; height:auto; border-radius:var(--r-lg); border:1px solid var(--line); }

.post-body{ padding:36px 0 8px; }
.post-body h2{ font-size:clamp(1.45rem, 2.6vw, 1.9rem); margin:1.7em 0 .55em; }
.post-body h3{ font-size:1.15rem; margin:1.5em 0 .45em; }
.post-body p{ color:var(--muted); }
.post-body ul, .post-body ol{ margin:.3em 0 1.2em; padding-left:1.3em; color:var(--muted); }
.post-body li{ margin-bottom:.55em; }
.post-body li::marker{ color:var(--gold-text); }
.post-body strong, .post-body b{ color:var(--text); }
.post-body blockquote{
  margin:1.6em 0; padding:4px 0 4px 22px; border-left:3px solid var(--gold);
  font-family:var(--font-d); font-size:1.15rem; font-style:italic; color:var(--text);
}
.post-body blockquote p{ color:inherit; }

.post-tags{ display:flex; flex-wrap:wrap; gap:10px; margin:10px 0 6px; }

.author-box{
  display:flex; gap:18px; align-items:flex-start;
  background:var(--card); border:1px solid var(--line); border-radius:var(--r-md);
  padding:24px 26px; margin:34px 0 64px;
}
.ab-avatar{ width:72px; height:72px; border-radius:50%; object-fit:cover; flex:none; }
.ab-seal{
  display:flex; align-items:center; justify-content:center;
  background:var(--gold-tile); border:1px solid var(--gold-tile-border);
}
.ab-seal svg{ width:40px; height:40px; }
.author-box p{ margin:0; }
.ab-name{ font-weight:600; color:var(--text); }
.ab-role{ font-size:.85rem; color:var(--gold-text); margin-bottom:6px !important; }
.ab-bio{ font-size:.92rem; color:var(--muted); }

/* article FAQ */
.post-faq details{
  background:var(--card); border:1px solid var(--line); border-radius:var(--r-sm);
  padding:16px 20px; margin-bottom:12px;
}
.post-faq summary{ cursor:pointer; font-weight:600; color:var(--text); }
.post-faq p{ margin:12px 0 0; color:var(--muted); }

@media (max-width: 900px){
  .blog-feature{ grid-template-columns:1fr; }
  .blog-feature .bc-fallback{ border-right:0; border-bottom:1px solid var(--line); aspect-ratio:16/9; }
}

/* ============================================================
   Mobile refinements (2026 pass)
   Scoped, appended last so source order lets these win. Fixes
   surfaced by auditing the live pages at 320–430px:
     · CTA buttons overflowed the viewport (nowrap + content width)
     · the comparison table hid its punchline column off-screen
     · sub-16px inputs triggered iOS zoom-on-focus
     · the mobile menu's CTA sat stranded at content width
   ============================================================ */

@media (max-width: 700px){
  /* Primary CTAs: stack full-width and let long labels wrap, instead of
     forcing a single nowrap line that ran off narrow screens. Gives equal,
     tidy, thumb-sized targets — matching the hero-check / lookup treatment. */
  .cta-row{ flex-direction:column; align-items:stretch; gap:12px; }
  .cta-row .btn{ width:100%; white-space:normal; }

  /* No form control below 16px — anything smaller makes iOS Safari zoom the
     page in on focus, then leaves the viewport awkwardly scrolled. */
  .field input, .field select, .field textarea,
  .lookup input, .hero-check input[type=url], .copy-row input{
    font-size:16px;
  }

  /* ---- Comparison: card layout instead of an off-screen scroll ----
     The scrolling 4-column table put the highlighted "Centurion Awards"
     column — the whole point — past the right edge, unseen. Reflow each row
     into its own card so all three answers are visible at a glance, with
     ours labelled and highlighted. */
  .compare{ border:0; border-radius:0; overflow:visible; box-shadow:none; background:transparent; }
  .compare table{ display:block; width:auto; min-width:0; font-size:1rem; }
  .compare thead{ display:none; }
  .compare tbody, .compare tr, .compare td{ display:block; width:auto; }
  .compare tr{
    background:var(--card); border:1px solid var(--line); border-radius:var(--r-md);
    box-shadow:var(--shadow-sm); overflow:hidden; margin-bottom:16px;
  }
  .compare tr:last-child{ margin-bottom:0; }
  .compare td{ padding:13px 20px; border-bottom:1px solid var(--line); text-align:left; }
  .compare tr td:last-child{ border-bottom:0; }
  /* the criterion becomes the card's header */
  .compare td:first-child{
    width:auto; font-family:var(--font-d); font-weight:600; font-size:1.08rem;
    color:var(--text); background:var(--page-alt);
  }
  /* each answer cell: a small column label above the answer */
  .compare td:not(:first-child){ color:var(--muted); }
  .compare td:not(:first-child)::before{
    content:attr(data-label); display:block; margin-bottom:4px;
    font-size:.7rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
    color:var(--muted); opacity:.75;
  }
  /* our column: keep it lit up as the answer that matters */
  .compare td.col-c{ background:var(--gold-tile); border-left:0; color:var(--text); }
  .compare td.col-c::before{ color:var(--gold-text); opacity:1; }
}

@media (max-width: 900px){
  /* Mobile menu: read as a floating panel and give the account actions their
     own zone. The CTA was stranded at content width, hugging the left edge. */
  .nav-links{ box-shadow:var(--shadow-md); gap:2px; padding-bottom:22px; }
  .nav-links a{ padding:12px 2px; }
  .nav-links .nav-login{ margin-top:8px; padding-top:16px; border-top:1px solid var(--line); }
  .nav-links .btn.nav-cta{ width:100%; margin-top:12px; justify-content:center; }
}

/* ---------- launch-gates additions: heading hierarchy, a11y helper, crest ---------- */

/* The two audience-door headings were promoted from h3 to h2 so the page
   outline has no skipped level; this keeps their size identical to the former
   .path h3 rule. */
.path h2{ font-size:clamp(1.5rem, 2.4vw, 1.85rem); margin-bottom:.4em; }

/* Visually-hidden: kept in the accessibility tree and the heading outline,
   removed from the visual layout. Used for section headings that would be
   redundant on screen (e.g. the nominate form section). */
.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

/* The hero crest is now a <picture> so mobile never downloads crest.webp; the
   inner <img> fills the box so the desktop composition is unchanged. */
.hero-crest img{ display:block; width:100%; height:auto; max-width:100%; }