/* ==========================================================================
   site.css — shared design + accessibility layer
   Loaded AFTER each page's inline <style> block, so equal-specificity rules
   here win. Nothing in here changes page structure; it refines the existing
   design system and fixes contrast, focus, motion and target-size issues.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. TOKENS
   The brand citrus (#D98E2B) only reaches 2.5:1 on the light backgrounds,
   so it fails WCAG AA wherever it was used for text. --accent-ink is the
   same hue darkened until it clears 4.5:1 on paper, sand and white; the
   bright citrus is kept for dark sections and for button fills, where it
   already passes.
   -------------------------------------------------------------------------- */
:root{
  --accent-ink:#8A5713;        /* accent TEXT on light backgrounds  5.7:1 paper */
  --accent-ink-hover:#6E4410;
  --citrus:#D98E2B;            /* accent on dark backgrounds        6.1:1 ink   */
  --citrus-deep:#8A5713;   /* fill w/ paper text 5.7:1, and passes as text on light */
  --teal-deep:#245A50;

  --radius-ctl:4px;
  --radius-card:10px;
  --radius-pill:999px;

  --shadow-xs:0 1px 2px rgba(20,35,31,.05);
  --shadow-sm:0 1px 2px rgba(20,35,31,.05), 0 3px 10px -2px rgba(20,35,31,.06);
  --shadow-md:0 2px 4px rgba(20,35,31,.06), 0 14px 30px -10px rgba(20,35,31,.16);
  --shadow-nav:0 1px 0 rgba(20,35,31,.06), 0 8px 24px -12px rgba(20,35,31,.22);

  --focus-ring:#14231F;        /* flipped to paper inside dark sections below  */
  --ease:cubic-bezier(.2,.7,.3,1);
  --step:1.5rem;

  color-scheme:light;
}

/* Dark sections flip the focus ring and restore the bright citrus accent. */
.hero, .about, .cta-band, .page-hero, .quiz-hero, .quiz-teaser, .statbar, footer{
  --focus-ring:#FAF8F3;
  --accent-ink:var(--citrus);
  --accent-ink-hover:#E8A245;
}

/* --------------------------------------------------------------------------
   2. BASE
   -------------------------------------------------------------------------- */
html{ -webkit-text-size-adjust:100%; }
body{ text-rendering:optimizeLegibility; }

/* Anything with an id can be an anchor target; keep it clear of the
   sticky header instead of hiding under it. */
[id]{ scroll-margin-top:96px; }

::selection{ background:rgba(217,142,43,.28); color:var(--ink); }

/* One visible, high-contrast focus style for every interactive element.
   :focus-visible keeps it off mouse clicks but always on for keyboards. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible{
  outline:3px solid var(--focus-ring);
  outline-offset:2px;
  border-radius:var(--radius-ctl);
}
:where(a, button, input, select, textarea, summary, [tabindex]):focus:not(:focus-visible){
  outline:none;
}

/* Screen-reader-only text that still gets focus when tabbed to. */
.visually-hidden{
  position:absolute !important; width:1px; height:1px;
  margin:-1px; padding:0; overflow:hidden;
  clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; border:0;
}

/* --------------------------------------------------------------------------
   3. SKIP LINK
   -------------------------------------------------------------------------- */
.skip-link{
  position:absolute; left:12px; top:-100px; z-index:200;
  background:var(--ink); color:var(--paper);
  font-family:'IBM Plex Mono', monospace; font-size:13px;
  letter-spacing:.04em; text-transform:uppercase; text-decoration:none;
  padding:14px 20px; border-radius:var(--radius-ctl);
  box-shadow:var(--shadow-md);
  transition:top .18s var(--ease);
}
.skip-link:focus{ top:12px; outline:3px solid var(--citrus); outline-offset:2px; }

/* --------------------------------------------------------------------------
   4. TYPOGRAPHY
   -------------------------------------------------------------------------- */
h1, h2, h3{ text-wrap:balance; }
p{ text-wrap:pretty; }

.eyebrow, .step-num{
  color:var(--accent-ink);
  font-weight:500;
  display:inline-block;
}
em{ color:var(--accent-ink); }

/* Body-copy links need more than colour to be identifiable (WCAG 1.4.1).
   Buttons, cards and nav are excluded — they carry their own affordance. */
article p a, article li a,
.narrow p a, .narrow li a,
main p a:not([class]), main li a:not([class]){
  color:var(--accent-ink);
  text-decoration:underline;
  text-decoration-thickness:1px;
  text-underline-offset:3px;
  transition:color .15s var(--ease), text-decoration-color .15s var(--ease);
}
article p a:hover, article li a:hover,
.narrow p a:hover, .narrow li a:hover,
main p a:not([class]):hover, main li a:not([class]):hover{
  color:var(--accent-ink-hover);
  text-decoration-thickness:2px;
}

.mini-more a, .intro-links a, .nearby-links a, .segment-cta,
.match-link, .src-note a, .data-note a{ color:var(--accent-ink); }

/* These sit at 12–13px; give them a finger-sized hit area. */
.nearby-links a, .intro-links a, .mini-more a, .match-link, .city-tag, .region-tag{
  display:inline-flex; align-items:center;
  min-height:44px; padding:4px 2px;
}
.nearby-links{ gap:8px 18px; }
.mini-more a:hover, .nearby-links a:hover{ color:var(--accent-ink-hover); }

article p, article li, .narrow p{ line-height:1.7; }
article h2{ letter-spacing:-.012em; }

/* --------------------------------------------------------------------------
   5. HEADER + NAVIGATION
   -------------------------------------------------------------------------- */
header{
  background:rgba(250,248,243,.86);
  -webkit-backdrop-filter:saturate(1.6) blur(10px);
  backdrop-filter:saturate(1.6) blur(10px);
  transition:box-shadow .2s var(--ease), background .2s var(--ease);
}
header.is-scrolled{
  background:rgba(250,248,243,.96);
  box-shadow:var(--shadow-nav);
}
.brand{ display:inline-block; padding:11px 0; }   /* not flex: it would eat the space before the span */
.brand span{ color:var(--accent-ink); }

.navlinks a{
  position:relative;
  padding:6px 2px;
  transition:color .15s var(--ease);
}
/* Underline grows from the link rather than appearing on colour alone. */
.navlinks a:not(.nav-cta)::after{
  content:""; position:absolute; left:0; right:0; bottom:-2px; height:2px;
  background:var(--accent-ink); transform:scaleX(0); transform-origin:left;
  transition:transform .2s var(--ease);
}
.navlinks a:not(.nav-cta):hover::after,
.navlinks a:not(.nav-cta):focus-visible::after{ transform:scaleX(1); }

/* `.navlinks a` (0,2,0) outranks `.nav-cta` (0,1,0), so the pill inside the
   mobile menu was inheriting the muted grey — 2.26:1 on the orange fill.
   Restore the dark ink it was meant to have (6.09:1). */
.navlinks a.nav-cta{ color:var(--ink); }
.navlinks a.nav-cta:hover{ color:var(--paper); }

.navlinks a.current,
.navlinks a[aria-current="page"]{ color:var(--text-dark); font-weight:600; }
.navlinks a[aria-current="page"]::after{ transform:scaleX(1); }

.nav-cta{
  align-items:center; justify-content:center;
  gap:6px;                       /* flex eats the literal space before the arrow */
  min-height:44px;
  box-shadow:var(--shadow-xs);
  transition:background .15s var(--ease), transform .15s var(--ease), box-shadow .15s var(--ease);
}
/* Media queries add no specificity, so this must be scoped to the desktop range
   or it would override the page's own `@media(max-width:860px){.nav-cta{display:none}}`
   and leave the desktop pill stranded next to the hamburger. */
@media (min-width:861px){
  .navlinks > .nav-cta:not(.mobile-only-cta), nav > .nav-cta{ display:inline-flex; }
}
.navlinks .mobile-only-cta{ display:none; }
.nav-cta:hover, .opt-in-row button:hover{ background:var(--citrus-deep); color:var(--paper); transform:translateY(-1px); box-shadow:var(--shadow-sm); }
.nav-cta:active{ transform:translateY(0); }

.nav-toggle{
  width:44px; height:44px;
  display:none; place-items:center;
  border-radius:var(--radius-ctl);
  transition:background .15s var(--ease);
}
.nav-toggle:hover{ background:rgba(20,35,31,.06); }
.nav-toggle .nav-toggle-icon{ display:block; width:20px; height:14px; position:relative; }
.nav-toggle .nav-toggle-icon::before,
.nav-toggle .nav-toggle-icon::after,
.nav-toggle .nav-toggle-icon span{
  content:""; position:absolute; left:0; right:0; height:2px;
  background:var(--ink); border-radius:2px;
  transition:transform .2s var(--ease), opacity .15s var(--ease);
}
.nav-toggle .nav-toggle-icon::before{ top:0; }
.nav-toggle .nav-toggle-icon span{ top:6px; }
.nav-toggle .nav-toggle-icon::after{ bottom:0; }
.nav-toggle[aria-expanded="true"] .nav-toggle-icon::before{ transform:translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle-icon span{ opacity:0; }
.nav-toggle[aria-expanded="true"] .nav-toggle-icon::after{ transform:translateY(-6px) rotate(-45deg); }

@media (max-width:860px){
  .nav-toggle{ display:grid; }
  .navlinks.mobile-open{
    box-shadow:var(--shadow-md);
    padding:14px 28px 24px;
    gap:2px;
  }
  .navlinks.mobile-open a{
    padding:14px 4px;
    min-height:44px;
    display:flex; align-items:center;
    border-bottom:1px solid var(--line);
  }
  .navlinks.mobile-open a:last-of-type{ border-bottom:none; }
  .navlinks.mobile-open .mobile-only-cta{
    display:inline-flex; justify-content:center; border-bottom:none; margin-top:12px;
  }
}

/* --------------------------------------------------------------------------
   6. BUTTONS
   -------------------------------------------------------------------------- */
.btn{
  gap:2px;                       /* the markup now carries an &nbsp; before the arrow */
  min-height:48px;
  border-radius:var(--radius-ctl);
  font-weight:500;
  text-decoration:none;
  justify-content:center;
  transition:background .16s var(--ease), color .16s var(--ease),
             border-color .16s var(--ease), transform .16s var(--ease),
             box-shadow .16s var(--ease);
}
.btn:hover{ transform:translateY(-1px); }
.btn:active{ transform:translateY(0); }

.btn-primary{
  background:var(--citrus); color:var(--ink);
  box-shadow:var(--shadow-xs);
}
.btn-primary:hover{ background:var(--citrus-deep); color:var(--paper); box-shadow:var(--shadow-sm); }

/* .btn-ghost is light-on-dark in the hero/CTA bands but dark-on-light on the
   quiz card, so only the dark-section variant is recoloured here. */
.hero .btn-ghost, .about .btn-ghost, .cta-band .btn-ghost,
.quiz-teaser .btn-ghost, .page-hero .btn-ghost{
  border-color:rgba(250,248,243,.45); color:var(--paper);
}
.hero .btn-ghost:hover, .about .btn-ghost:hover, .cta-band .btn-ghost:hover,
.quiz-teaser .btn-ghost:hover, .page-hero .btn-ghost:hover{ border-color:var(--paper); }
.btn-ghost:hover{ background:rgba(128,128,128,.14); }

.btn-dark{ border-color:var(--ink); color:var(--ink); }
.btn-dark:hover{ background:var(--ink); color:var(--paper); }

.btn[disabled], .btn:disabled{
  opacity:.55; cursor:not-allowed; transform:none; box-shadow:none;
}

/* --------------------------------------------------------------------------
   7. HERO + DARK BANDS
   -------------------------------------------------------------------------- */
.hero, .page-hero, .quiz-hero{
  background:
    radial-gradient(120% 90% at 82% 0%, rgba(47,110,99,.30) 0%, rgba(47,110,99,0) 62%),
    radial-gradient(100% 70% at 6% 100%, rgba(217,142,43,.16) 0%, rgba(217,142,43,0) 60%),
    linear-gradient(168deg, #182A25 0%, var(--ink) 58%);
}
.hero h1{ letter-spacing:-.022em; }
.hero p.lede{ max-width:60ch; }
.hero-actions .btn{ flex:0 1 auto; }

.cta-band, .quiz-teaser{
  background:
    radial-gradient(90% 120% at 100% 0%, rgba(47,110,99,.26) 0%, rgba(47,110,99,0) 60%),
    var(--ink);
}

/* Stat bar reads as one row of figures rather than four boxed cells. */
.statgrid div{ border-left-color:rgba(250,248,243,.16); }
.stat-num{ font-size:24px; letter-spacing:-.01em; }
.stat-label{ color:rgba(250,248,243,.7); }

/* --------------------------------------------------------------------------
   8. CARDS + PANELS
   Flat 1px boxes get a soft edge and a real hover state, so they read as
   the tappable things they are.
   -------------------------------------------------------------------------- */
.segment-card, .testi-card, .city-card, .link-card, .region-card,
.story-card, .timing-card, .cred-item, .why-box, .data-note,
.mini-card, .q-option, .quiz-card, .form-panel, .post-row,
.match-item, .funnel-form, .faq-item, .check-item, .timing, .step{
  border-radius:var(--radius-card);
}

.segment-card, .testi-card, .city-card, .link-card, .region-card,
.story-card, .timing-card, .mini-card, .post-row{
  box-shadow:var(--shadow-xs);
  transition:border-color .18s var(--ease), box-shadow .18s var(--ease),
             transform .18s var(--ease), background .18s var(--ease);
}

a.segment-card:hover, a.city-card:hover, a.link-card:hover,
a.region-card:hover, a.mini-card:hover, a.post-row:hover,
.segment-card:hover, .city-card:hover, .link-card:hover,
.region-card:hover, .mini-card:hover, .post-row:hover{
  border-color:var(--accent-ink);
  box-shadow:var(--shadow-md);
  transform:translateY(-3px);
}

/* Card links get a focus ring around the whole card, not just its text. */
a.segment-card:focus-visible, a.city-card:focus-visible, a.link-card:focus-visible,
a.region-card:focus-visible, a.mini-card:focus-visible, a.post-row:focus-visible{
  outline:3px solid var(--focus-ring); outline-offset:3px;
}

.mini-card{
  display:flex; align-items:center; justify-content:center;
  min-height:56px;
}

/* Emoji "icons" sit in a tinted disc so they read as deliberate marks. */
.segment-icon{
  width:56px; height:56px; margin:0 auto 18px;
  display:grid; place-items:center;
  font-size:26px; line-height:1;
  background:rgba(217,142,43,.14);
  border-radius:var(--radius-pill);
}
.segment-cta{ font-weight:500; }
a.segment-card:hover .segment-cta{ text-decoration:underline; text-underline-offset:3px; }

.testi-card{ box-shadow:var(--shadow-sm); }
.testi-route{ color:var(--teal-deep); font-weight:500; }

.pros-cons > div{ border-radius:var(--radius-card); box-shadow:var(--shadow-xs); }

/* --------------------------------------------------------------------------
   9. SECTION RHYTHM
   -------------------------------------------------------------------------- */
.split-head, .mini-head, .lead-head, .section-head, .results-head{ margin-bottom:44px; }
.split-head p, .mini-head p, .lead-head p{ max-width:56ch; margin-left:auto; margin-right:auto; }

/* --------------------------------------------------------------------------
   10. FORMS
   -------------------------------------------------------------------------- */
.form-panel{ box-shadow:var(--shadow-sm); background:#fff; }

label{ color:var(--text-mute); font-weight:500; }
/* Required fields say so, in text as well as with the asterisk. */
label .req{ color:var(--accent-ink); margin-left:3px; }

input, select, textarea{
  min-height:48px;
  border-radius:var(--radius-ctl);
  border-color:rgba(20,35,31,.22);
  transition:border-color .15s var(--ease), box-shadow .15s var(--ease);
}
input:hover, select:hover, textarea:hover{ border-color:rgba(20,35,31,.4); }
input:focus, select:focus, textarea:focus{
  outline:3px solid var(--focus-ring);
  outline-offset:1px;
  border-color:var(--ink);
  box-shadow:none;
}
textarea{ min-height:110px; padding-top:12px; }
::placeholder{ color:#767F7A; opacity:1; }

/* Only flags a field the visitor has actually finished with. */
input:user-invalid, select:user-invalid, textarea:user-invalid{
  border-color:#A3341C;
  background:rgba(163,52,28,.03);
}

.more-toggle{
  color:var(--teal-deep); font-weight:500;
  min-height:44px; display:inline-flex; align-items:center;
  border-radius:var(--radius-ctl);
}
.more-toggle:hover{ color:var(--ink); text-decoration:underline; text-underline-offset:3px; }

.form-status{ border-radius:var(--radius-ctl); line-height:1.5; }
.form-status.success{ background:rgba(36,90,80,.09); color:#1D4A42; border-color:rgba(36,90,80,.3); }
.form-status.error{ background:rgba(163,52,28,.07); color:#8C2C18; border-color:rgba(163,52,28,.3); }
.form-note{ color:var(--text-mute); }

/* Tabs behave as a real tablist (roles added by site.js). */
.tab-btn{
  min-height:48px; font-weight:500;
  transition:background .15s var(--ease), color .15s var(--ease), border-color .15s var(--ease);
}
.tab-btn:hover{ border-color:var(--ink); color:var(--text-dark); }
.tab-btn.active, .tab-btn[aria-selected="true"]{ background:var(--ink); color:var(--paper); border-color:var(--ink); }

/* --------------------------------------------------------------------------
   11. QUIZ
   -------------------------------------------------------------------------- */
.quiz-card{ box-shadow:var(--shadow-sm); }
.q-option{
  min-height:56px;
  transition:border-color .15s var(--ease), background .15s var(--ease), transform .15s var(--ease);
}
.q-option:hover{ border-color:var(--accent-ink); transform:translateY(-1px); }
.q-option.selected, .q-option[aria-checked="true"]{
  border-color:var(--ink);
  background:rgba(20,35,31,.05);
  font-weight:600;
}
/* A check mark, so selection is not signalled by colour alone. */
.q-option.selected::after, .q-option[aria-checked="true"]::after{
  content:"✓"; margin-left:10px; color:var(--accent-ink); font-weight:700;
}
.progress-track{ border-radius:var(--radius-pill); overflow:hidden; }
.progress-fill{ transition:width .35s var(--ease); }
.q-count{ color:var(--text-mute); font-weight:500; }
.q-nav button:disabled, .q-nav .btn:disabled{ opacity:.5; }
.match-rank{ color:var(--accent-ink); font-weight:500; }
.match-item{ box-shadow:var(--shadow-xs); }

/* --------------------------------------------------------------------------
   12. FOOTER
   The muted greys here sat at 3.6–4.2:1. These alphas clear 4.5:1 on ink.
   -------------------------------------------------------------------------- */
footer{ color:rgba(250,248,243,.72); }
.foot-col-head{ color:rgba(250,248,243,.62); }
.foot-legal{ color:rgba(250,248,243,.58); }
.foot-legal a{ color:rgba(250,248,243,.85) !important; text-decoration:underline; text-underline-offset:3px; }
.foot-legal a:hover{ color:#fff !important; }
.foot-col a, .foot-contact a, .foot-links a{
  color:rgba(250,248,243,.78);
  min-height:32px; display:inline-flex; align-items:center;
  transition:color .15s var(--ease);
}
.foot-col a{ display:block; padding:3px 0; }
.foot-col a:hover, .foot-contact a:hover, .foot-links a:hover{
  color:var(--paper); text-decoration:underline; text-underline-offset:3px;
}
footer p[style]{ color:rgba(250,248,243,.72) !important; }

.foot-cta-band h2{ max-width:22ch; margin-left:auto; margin-right:auto; }

/* --------------------------------------------------------------------------
   13. BACK TO TOP (injected by site.js)
   -------------------------------------------------------------------------- */
.to-top{
  position:fixed; right:20px; bottom:20px; z-index:60;
  width:48px; height:48px; display:grid; place-items:center;
  background:var(--ink); color:var(--paper);
  border:none; border-radius:var(--radius-pill); cursor:pointer;
  box-shadow:var(--shadow-md);
  opacity:0; visibility:hidden; transform:translateY(8px);
  transition:opacity .2s var(--ease), transform .2s var(--ease), visibility .2s;
}
.to-top.is-visible{ opacity:1; visibility:visible; transform:translateY(0); }
.to-top:hover{ background:var(--ink-soft); }
.to-top svg{ width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:2.2; }

/* --------------------------------------------------------------------------
   14. SCROLL REVEAL
   The hidden state is only applied once JS confirms it can reveal again,
   so content is never trapped invisible.
   -------------------------------------------------------------------------- */
.js-reveal .reveal{
  opacity:0; transform:translateY(14px);
  transition:opacity .5s var(--ease), transform .5s var(--ease);
}
.js-reveal .reveal.is-in{ opacity:1; transform:none; }

/* --------------------------------------------------------------------------
   15. MOTION + LEGIBILITY PREFERENCES
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *, *::before, *::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important;
  }
  .js-reveal .reveal{ opacity:1 !important; transform:none !important; }
}

@media (prefers-contrast:more){
  :root{ --line:rgba(20,35,31,.4); --text-mute:#414B46; }
  .btn, .segment-card, .city-card, .mini-card, .testi-card, .q-option{ border-width:2px; }
  .navlinks a{ text-decoration:underline; text-underline-offset:3px; }
}

/* --------------------------------------------------------------------------
   16. SMALL SCREENS
   -------------------------------------------------------------------------- */
@media (max-width:860px){
  .hero{ padding:64px 0 56px; }
  .hero-actions{ gap:10px; }
  .hero-actions .btn{ width:100%; }
  .split-section{ padding:64px 0 56px; }
  .lead{ padding:64px 0 72px; }
  .form-panel{ padding:24px 20px; }
  .statgrid div{ padding:10px 12px; }
  .to-top{ right:14px; bottom:14px; }
}

@media (max-width:520px){
  .wrap{ padding:0 20px; }
  .tabs{ flex-direction:column; }
  .tab-btn{ width:100%; }
  .mini-grid{ grid-template-columns:1fr 1fr; }
  .foot-cols{ grid-template-columns:1fr; gap:22px; }
}

/* --------------------------------------------------------------------------
   17. PRINT
   -------------------------------------------------------------------------- */
@media print{
  header, footer, .to-top, .skip-link, .cta-band, .foot-cta-band,
  .quiz-teaser, .lead, .map-wrap{ display:none !important; }
  body{ background:#fff; color:#000; font-size:11pt; }
  .hero, .page-hero, .post-hero{ background:#fff !important; color:#000 !important; padding:0 0 12pt; }
  .hero h1, .page-hero h1, .hero p{ color:#000 !important; }
  article a[href^="http"]::after{ content:" (" attr(href) ")"; font-size:9pt; word-break:break-all; }
  .wrap{ max-width:none; padding:0; }
}

/* --------------------------------------------------------------------------
   18. MARKET SNAPSHOT
   Sourced figures pulled through from /market-updates/ so the city guides
   carry something specific enough for a person — or an assistant — to quote.
   -------------------------------------------------------------------------- */
.market-snap{
  margin:26px 0 32px;
  border:1px solid var(--line);
  border-left:3px solid var(--accent-ink);
  border-radius:0 var(--radius-card) var(--radius-card) 0;
  background:#fff;
  padding:20px 22px 16px;
  box-shadow:var(--shadow-xs);
}
.market-snap .ms-title{
  font-family:'IBM Plex Mono', monospace;
  font-size:11.5px; letter-spacing:.11em; text-transform:uppercase;
  color:var(--accent-ink); font-weight:500; margin:0 0 14px;
}
.ms-grid{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:16px 22px; margin:0;
}
.ms-grid > div{display:flex; flex-direction:column; gap:3px;}
.ms-grid dt{
  font-family:'IBM Plex Mono', monospace;
  font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--text-mute);
}
.ms-fig{
  margin:0; font-family:'Fraunces', Georgia, serif;
  font-size:22px; font-weight:600; letter-spacing:-.01em; color:var(--text-dark);
  font-variant-numeric:tabular-nums;
}
.ms-up{color:#1C6349;}
.ms-down{color:#A32E1C;}
.ms-src{
  margin:16px 0 0; padding-top:12px; border-top:1px solid var(--line);
  font-size:12px; line-height:1.55; color:var(--text-mute);
}
.ms-src a{color:var(--accent-ink); text-decoration:underline; text-underline-offset:3px;}
@media (max-width:520px){ .ms-grid{grid-template-columns:1fr 1fr;} }

/* --------------------------------------------------------------------------
   19. INLINE CAPTURE
   A short, low-friction ask on the guide and blog pages, which previously
   had no way to respond without navigating away.
   -------------------------------------------------------------------------- */
.inline-capture-band{ background:var(--sand); padding:44px 0; }
.inline-capture{ max-width:680px; margin:0 auto; }
.ic-head{
  font-family:'Fraunces', Georgia, serif; font-weight:600;
  font-size:clamp(20px,2.6vw,25px); line-height:1.2; letter-spacing:-.01em;
  color:var(--text-dark); margin:0 0 8px;
}
.ic-sub{ font-size:14.5px; color:var(--text-mute); margin:0 0 18px; max-width:56ch; }
.ic-row{ display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-bottom:14px; }
.inline-capture .field{ display:flex; flex-direction:column; gap:6px; }
.inline-capture label{
  font-family:'IBM Plex Mono', monospace; font-size:11px; letter-spacing:.06em;
  text-transform:uppercase; color:var(--text-mute);
}
.inline-capture input{
  font-family:'Inter', sans-serif; font-size:16px; padding:12px 13px;
  border:1px solid rgba(20,35,31,.22); border-radius:var(--radius-ctl);
  background:#fff; color:var(--text-dark); min-height:48px; width:100%;
}
.inline-capture .btn{ width:100%; justify-content:center; }
.inline-capture .form-status{ margin-bottom:14px; }
@media (max-width:640px){ .ic-row{ grid-template-columns:1fr; } }

/* Contextual link back to a hub page, set apart from the body copy. */
.hub-link{
  margin:26px 0 0; padding:14px 16px;
  background:var(--sand); border-radius:var(--radius-card);
  font-size:14.5px; line-height:1.6; color:var(--text-dark);
}
.hub-link a{ color:var(--accent-ink); text-decoration:underline; text-underline-offset:3px; font-weight:500; }
.hub-link a:hover{ color:var(--accent-ink-hover); }

/* A checkbox group is a fieldset, not a label with nothing to point at. */
.check-fieldset{ border:0; padding:0; margin:0; min-width:0; }
.check-fieldset legend{
  font-family:'IBM Plex Mono', monospace; font-size:11px; letter-spacing:.06em;
  text-transform:uppercase; color:var(--text-mute); padding:0; margin-bottom:6px;
}

/* Checkbox groups: the box itself was 13px. The wrapping label was always the
   real target, but the control should be comfortable to hit on its own. */
.check-item{
  display:flex; align-items:center; gap:10px;
  min-height:44px; padding:6px 10px; cursor:pointer;
  border-radius:var(--radius-ctl);
}
.check-item:hover{ background:rgba(20,35,31,.04); }
.check-item input[type="checkbox"]{
  width:20px; height:20px; min-height:20px; flex:0 0 20px;
  accent-color:var(--accent-ink); margin:0; cursor:pointer;
}
.check-item:focus-within{ outline:3px solid var(--focus-ring); outline-offset:2px; }