/* ============================================================================
   Ryan Stanek · Edge Home Finance, LLC — stanekmortgage.com
   GROVE visual direction.

   Forest green ink on cream paper, ochre used sparingly for emphasis and action.
   Spectral headlines over Work Sans. Flat, square corners, hairline rules.

   Every color, size, and face is a custom property in :root below. No component
   rule in this file contains a literal hex value — grep for '#' outside :root
   and the @font-face fallbacks and you should find nothing.

   Two deliberate deviations from grove-brand/SKILL.md, both approved, both to
   hold body text at 4.5:1 contrast:
     1. Fine print #77826F is NOT used. It measures 3.57:1 on Cream / 4.03:1 on
        White / 3.27:1 on Sage — it fails AA at every ground in this palette.
        Disclosures and captions use Ink Muted #46534A (7.16:1) instead.
     2. Eyebrow labels switch from Ochre Deep to Forest when they sit on a Sage
        ground. Ochre Deep on Sage is 4.44:1 — just under the floor. On Cream
        (4.84:1) and White (5.47:1) the spec'd Ochre Deep is kept.
   ========================================================================= */

:root{
  /* ---- Grove palette. Nothing outside this list appears in this file. ---- */
  --forest:#1C3A2E;       /* headlines, dark fields, utility strip, buttons   */
  --ochre:#C08A2E;        /* primary CTA fill, rules on dark. FILL ONLY.      */
  --ochre-deep:#8A6218;   /* eyebrow labels, accent text on light grounds     */
  --sage:#E4E9E1;         /* section backgrounds, card fills                  */
  --cream:#F4F1E8;        /* page canvas                                      */
  --white:#FFFFFF;        /* cards                                            */
  --ink-muted:#46534A;    /* body copy on light grounds, and all fine print   */
  --pale-sage:#BFD2C6;    /* body and utility text on Forest fields           */
  --line:#DFDCD2;         /* 1px hairlines                                    */
  --on-ochre:#1C1405;     /* the only label color permitted on an ochre fill  */
  --tap:rgba(28,58,46,.14);  /* Forest at 14% - the tap highlight on touch   */

  /* ---- Spacing scale: 8 / 12 / 20 / 26 / 40 / 64 ---- */
  --s1:8px; --s2:12px; --s3:20px; --s4:26px; --s5:40px; --s6:64px;

  /* ---- Grove is flat. These exist so nothing can reintroduce them. ---- */
  --radius:0;
  --shadow:none;
  --rule:2px solid var(--forest);   /* between major sections */
  --hairline:1px solid var(--line); /* inside cards           */

  /* ---- Type ---- */
  --font-head:'Spectral','Spectral Fallback',Georgia,serif;
  --font-body:'Work Sans','Work Sans Fallback','Segoe UI',Helvetica,Arial,sans-serif;
  --track-eyebrow:.16em;
  --track-lockup:.22em;

  --ease:cubic-bezier(.32,.72,0,1);
  --container:1100px;
  --sticky-h:88px;        /* header is 70px; anchor targets clear it by 18px */
}

/* ---- Metric-matched fallback faces.
   `display=swap` guarantees a swap, so the fallback must occupy the same space
   as the webfont or the page reflows when the font arrives. These size-adjust
   values are MEASURED, not guessed: the ratio of total advance width over four
   representative strings of this site's own copy, rendered at 100px.

     Work Sans 400 vs Helvetica Neue ... 109.63%  (Work Sans is wider)

   The heading value came out differently. Canvas says Spectral 600 vs Georgia
   bold is 88.06%, but in the DOM the fallback face declares no weight, so the
   browser SYNTHESISES bold from Georgia regular - different metrics again.
   Rather than model that, the value was swept empirically against the built
   pages: 88.06% was the only value in 88-108% that moved anything, and
   92-106% all held the h1 and the document height at zero shift. 99% is the
   centre of that plateau.

   Headings and body get separate faces because Spectral's ratio against
   Georgia depends on weight: 99.8% at 400, 88.1% at 600.

   Measured residual, stated plainly: across six representative pages the body
   value leaves 3 of 6 at exactly zero and 104px of total absolute shift on the
   rest - whole-line flips of 26px, always below the fold. Uniform scaling
   cannot remove those, because the two faces differ per glyph, not by a
   constant. Anything lower than this needs font-display:optional, which the
   brief rules out by mandating swap.

   Caveat, stated plainly: the fallback that actually resolves is
   platform-dependent - Helvetica Neue on macOS, Segoe UI on Windows - and a
   single size-adjust cannot be exact for both. These are tuned to the measured
   macOS stack. Residual shift is recorded in the build notes. ---- */
@font-face{
  font-family:'Spectral Fallback';
  src:local('Georgia'),local('Times New Roman'),local('Times');
  size-adjust:99%; ascent-override:105%; descent-override:28%; line-gap-override:0%;
}
@font-face{
  font-family:'Work Sans Fallback';
  src:local('Helvetica Neue'),local('Segoe UI'),local('Helvetica'),local('Arial');
  size-adjust:109.63%; ascent-override:88%; descent-override:22%; line-gap-override:0%;
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;overflow-x:hidden;color-scheme:light}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  font-family:var(--font-body);font-weight:400;
  color:var(--ink-muted);font-size:16px;line-height:1.62;
  background:var(--cream);overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
a,button,input,select,textarea,summary,label,.btn{
  touch-action:manipulation;-webkit-tap-highlight-color:var(--tap);
}
img{max-width:100%;height:auto;display:block}
a{color:var(--forest);text-decoration:underline;text-underline-offset:3px}
a:hover{text-decoration-thickness:2px}
.container{
  max-width:var(--container);margin:0 auto;
  padding-left:max(var(--s3),env(safe-area-inset-left));
  padding-right:max(var(--s3),env(safe-area-inset-right));
}

/* ---- Type. Spectral 600, sentence case, flush left, never centered. ---- */
h1,h2,h3,h4{
  font-family:var(--font-head);font-weight:600;color:var(--forest);
  line-height:1.15;letter-spacing:0;text-align:left;text-wrap:balance;
}
h1{font-size:clamp(30px,4.6vw,40px);line-height:1.12;max-width:8em  /* was 15ch in Spectral 600; ch is font-metric dependent */}
h2{font-size:clamp(24px,3.2vw,29px)}
h3{font-size:20px}
h4{font-size:17px}
p{margin:var(--s2) 0}
p:first-child{margin-top:0}
p:last-child{margin-bottom:0}
.lead{font-size:16px;color:var(--ink-muted);max-width:38.5em  /* was 62ch in Work Sans 400 */;line-height:1.62}
.meta,.disclaimer,.hint,.form-note,.legalline{color:var(--ink-muted)}
.meta{font-size:13px;line-height:1.55}

/* Grove sets everything flush left — including copy the old build centered.
   The generator still emits .center on shared markup; here it is inert. */
.center,.centered,.card.centered,.card.center,h2.center,.center.lead,.center.meta{text-align:left}
.card.centered h3,.step h3{text-align:left}

/* Anchor targets must clear the sticky header when jumped to. */
:target,h1,h2,h3,h4,.prog,.calc{scroll-margin-top:var(--sticky-h)}

/* ---- Sections. 2px Forest rule between major sections. ---- */
.section{padding:var(--s6) 0}
main>.section+.section{border-top:var(--rule)}
.section.alt{background:var(--sage)}
/* Loan-program entries stack inside one major section — hairline, not a rule. */
main>.prog{padding:var(--s5) 0}
main>.prog+.prog{border-top:var(--hairline)}

.grid{display:grid;gap:var(--s3)}
.grid-2{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.grid-3{grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}
.grid-4{grid-template-columns:repeat(auto-fit,minmax(210px,1fr))}

/* ---- Cards: white or sage fill, 1px hairline, 26px padding, no radius. ---- */
.card{
  background:var(--white);border:var(--hairline);border-radius:var(--radius);
  padding:var(--s4);box-shadow:var(--shadow);transition:border-color .18s var(--ease);
}
/* Card headings carry a real outline level; this keeps them at h3 size. */
.card h2,.card h3{font-size:20px;margin-bottom:var(--s1)}
.card:hover{border-color:var(--forest)}
.section.alt .card{background:var(--white)}

.badge-row{display:flex;gap:var(--s4);align-items:center;justify-content:flex-start;flex-wrap:wrap}
.badge-row img{
  max-height:96px;width:auto;background:var(--white);
  border:var(--hairline);border-radius:var(--radius);padding:var(--s2);
}

/* ---- Accessibility: skip link + a focus ring that is never the browser default. */
.skip-link{
  position:absolute;left:-9999px;top:0;z-index:300;border-radius:var(--radius);
  background:var(--forest);color:var(--cream);padding:var(--s2) var(--s3);font-weight:600;
  text-decoration:none;
}
.skip-link:focus{left:0}
:focus-visible{outline:2px solid var(--forest);outline-offset:2px;border-radius:var(--radius)}
.site-footer :focus-visible,.topbar :focus-visible,.mobile-bar :focus-visible{outline-color:var(--pale-sage)}

/* ---- Buttons. Square, flush-left label, one primary per section. ---- */
.btn{
  display:inline-flex;align-items:center;justify-content:flex-start;vertical-align:middle;
  background:var(--ochre);color:var(--on-ochre);font-family:var(--font-body);font-weight:600;
  padding:14px 22px;border-radius:var(--radius);border:2px solid var(--ochre);
  cursor:pointer;font-size:15px;line-height:1.2;text-align:left;text-decoration:none;
  min-height:48px;box-shadow:var(--shadow);
  transition:background .18s var(--ease),border-color .18s var(--ease),color .18s var(--ease);
}
.btn:hover{background:var(--forest);border-color:var(--forest);color:var(--cream);text-decoration:none}
/* Secondary: Forest fill, Cream label. */
.btn.secondary{background:var(--forest);border-color:var(--forest);color:var(--cream)}
.btn.secondary:hover{background:var(--cream);color:var(--forest);border-color:var(--forest)}
/* Ghost: 1.5px Forest border, Forest label. Used on dark fields as a light ghost. */
.btn.ghost{background:transparent;border:2px solid var(--forest);color:var(--forest)}
.btn.ghost:hover{background:var(--forest);color:var(--cream)}
.btn.light{background:var(--ochre);border-color:var(--ochre);color:var(--on-ochre)}
.btn.light:hover{background:var(--cream);color:var(--forest);border-color:var(--cream)}
.btn-row,.btn-group,.cta-row{
  display:flex;gap:var(--s3);justify-content:flex-start;flex-wrap:wrap;
  align-items:center;margin-top:var(--s5);
}

/* ---- Forest utility strip. Pale Sage text at 7.82:1. ---- */
.topbar{background:var(--forest);color:var(--pale-sage);font-size:12px;padding:var(--s1) 0;letter-spacing:.01em}
.topbar .container{display:flex;justify-content:space-between;gap:var(--s2);flex-wrap:wrap}
.topbar a{color:var(--pale-sage);font-weight:500}

/* ---- Header: cream bar, typographic lockup left, one Forest CTA right. ---- */
.site-header{position:sticky;top:0;background:var(--cream);border-bottom:var(--rule);z-index:100}
.nav{
  display:flex;align-items:center;gap:var(--s3);padding:var(--s2) var(--s3);
  max-width:var(--container);margin:0 auto;flex-wrap:nowrap;
}
.brand{flex:0 0 auto;text-decoration:none;display:block;min-width:120px}

/* ---- Typographic logo lockups. No symbol, no image file. ---- */
.lockup{display:block;line-height:1}
.lockup-name{
  display:block;font-family:var(--font-head);font-weight:600;font-size:27px;
  color:var(--forest);line-height:1;letter-spacing:0;
}
.lockup-sub{
  display:block;margin-top:8px;font-family:var(--font-body);font-weight:600;
  font-size:10px;letter-spacing:var(--track-lockup);color:var(--ochre-deep);
  text-transform:uppercase;line-height:1;
}
/* Stacked — square formats. */
.lockup.stacked .lockup-name{font-size:17px;line-height:1.1}
.lockup.stacked .lockup-sub{font-size:8px;margin-top:6px}
/* On Forest grounds the wordmark inverts to Cream. Never any other color. */
.on-dark .lockup-name{color:var(--cream)}
.on-dark .lockup-sub{color:var(--pale-sage)}
/* Monogram — 58px square, 2px Forest outline, RS in Spectral 600. */
.monogram{
  width:58px;height:58px;border:2px solid var(--forest);border-radius:var(--radius);
  display:flex;align-items:center;justify-content:center;font-family:var(--font-head);
  font-weight:600;font-size:22px;color:var(--forest);flex:0 0 auto;background:transparent;
}
.on-dark .monogram{border-color:var(--cream);color:var(--cream)}

.nav-links{display:flex;gap:var(--s1);list-style:none;margin-left:auto;align-items:center;flex-wrap:nowrap}
.nav-links a{
  position:relative;display:inline-flex;align-items:center;color:var(--forest);
  font-weight:500;font-size:14px;padding:var(--s1) var(--s2);white-space:nowrap;
  min-height:44px;text-decoration:none;border-bottom:2px solid transparent;
}
.nav-links a:hover{border-bottom-color:var(--ochre)}
.nav-links a[aria-current="page"]{font-weight:600;border-bottom-color:var(--forest)}
.nav .btn{padding:var(--s2) var(--s3);font-size:14px;min-height:44px;flex:0 0 auto;
  background:var(--forest);border-color:var(--forest);color:var(--cream)}
.nav .btn:hover{background:var(--ochre);border-color:var(--ochre);color:var(--on-ochre)}
.nav-toggle{
  display:none;background:transparent;border:2px solid var(--forest);border-radius:var(--radius);
  width:44px;height:44px;flex:0 0 auto;cursor:pointer;align-items:center;justify-content:center;
  color:var(--forest);margin-left:auto;
}
.nav-toggle span,.nav-toggle span::before,.nav-toggle span::after{
  content:"";display:block;width:18px;height:2px;background:var(--forest);
}
.nav-toggle span::before{transform:translateY(-6px)}
.nav-toggle span::after{transform:translateY(4px)}

/* ---- Hero: cream ground, hairline border, 40x36 padding, everything left. ---- */
.hero{background:var(--cream);padding:var(--s6) 0 var(--s5)}
.hero .container{display:grid;grid-template-columns:1.15fr .85fr;gap:var(--s5);align-items:start}
.hero-inner{border:var(--hairline);padding:var(--s5) var(--s4);background:var(--white)}
.hero h1{margin:var(--s2) 0}
.hero .lead{font-size:16px;max-width:32.3em  /* was 52ch in Work Sans 400 */}
.hero .cta-row{margin-top:var(--s5)}

/* Eyebrow: Work Sans 11px, uppercase, .16em, Ochre Deep on cream/white. */
.eyebrow{
  display:block;font-family:var(--font-body);font-weight:600;font-size:11px;
  text-transform:uppercase;letter-spacing:var(--track-eyebrow);color:var(--ochre-deep);
  margin-bottom:var(--s2);
}
/* Ochre Deep on Sage is 4.44:1 — below the floor. Forest on Sage is 10.06:1. */
.section.alt .eyebrow,.sage-ground .eyebrow{color:var(--forest)}

.portrait{width:100%;max-width:330px;height:auto;border:var(--hairline);border-radius:var(--radius)}
.hero-portrait{max-width:380px}
.about-grid{display:grid;grid-template-columns:minmax(220px,320px) 1fr;gap:var(--s5);align-items:start}

/* ---- Steps: square Forest numeral tiles, flush left. ---- */
.steps{counter-reset:step}
.step{text-align:left}
.step .num{
  display:flex;align-items:center;justify-content:center;width:40px;height:40px;
  border-radius:var(--radius);background:var(--forest);color:var(--cream);
  font-family:var(--font-head);font-weight:600;font-size:18px;margin:0 0 var(--s2);
}

/* ---- Reviews: white card, hairline, ochre rule above. ---- */
.review-card{
  background:var(--white);border:var(--hairline);border-top:3px solid var(--ochre);
  border-radius:var(--radius);padding:var(--s4);text-align:left;
}
.review-card p{font-size:15px}
.stars{color:var(--ochre-deep);font-size:15px;letter-spacing:2px}
.review-card .who{color:var(--ink-muted);font-size:13px;margin-top:var(--s2);font-weight:600}
.placeholder{background:var(--sage);border:2px dashed var(--ochre-deep);border-radius:var(--radius);
  padding:var(--s2) var(--s3);color:var(--forest);font-weight:600}

/* ---- Forms: square fields, real labels, visible focus. ---- */
form .field{margin-bottom:var(--s3)}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:var(--s3)}
@media(max-width:560px){.field-row{grid-template-columns:1fr;gap:0}}
.form-note{margin:0 0 var(--s3);font-size:13px}
.opt{font-weight:400;color:var(--ink-muted);font-size:.9em}
.hint{font-size:13px;margin:6px 0 0;line-height:1.5}
label{display:block;font-family:var(--font-body);font-weight:600;color:var(--forest);
  margin-bottom:6px;font-size:14px}
input,select,textarea{
  width:100%;max-width:100%;padding:12px 14px;border:var(--hairline);border-radius:var(--radius);
  font-family:var(--font-body);font-size:16px;background:var(--white);min-height:48px;
  color:var(--forest);
}
input:hover,select:hover,textarea:hover{border-color:var(--forest)}
input:focus,select:focus,textarea:focus{outline:2px solid var(--forest);outline-offset:2px;border-color:var(--forest)}
input:invalid:not(:placeholder-shown){border-color:var(--ochre-deep)}
.hp{position:absolute;left:-9999px}
.consent{
  display:flex;gap:var(--s2);align-items:flex-start;margin:var(--s3) 0;
  background:var(--sage);border:var(--hairline);border-left:3px solid var(--forest);
  border-radius:var(--radius);padding:var(--s3);
}
.consent input[type=checkbox]{width:20px;height:20px;min-width:20px;min-height:20px;margin-top:3px;accent-color:var(--forest)}
.consent label{font-weight:400;font-size:12px;line-height:1.55;color:var(--ink-muted);margin:0}

/* ---- Social: line icons, 1.5px stroke, Forest. ---- */
.social{display:flex;gap:var(--s2);flex-wrap:wrap;list-style:none;margin:var(--s4) 0 0;padding:0}
.social a{
  display:inline-flex;align-items:center;gap:var(--s1);min-height:44px;
  padding:var(--s1) var(--s2);border-radius:var(--radius);font-size:13px;font-weight:600;
  border:var(--hairline);color:var(--forest);background:var(--white);text-decoration:none;
}
.social a:hover{background:var(--forest);color:var(--cream);border-color:var(--forest)}
.social svg{width:18px;height:18px;flex:0 0 auto}
.site-footer .social a{background:transparent;border-color:var(--pale-sage);color:var(--pale-sage)}
.site-footer .social a:hover{background:var(--cream);color:var(--forest);border-color:var(--cream)}

.gov-notice{
  background:var(--sage);border:var(--hairline);border-left:3px solid var(--forest);
  border-radius:var(--radius);padding:var(--s3);font-size:13px;color:var(--ink-muted);margin-top:var(--s3);
}

/* ---- Calculators ---- */
.calc{background:var(--white);border:var(--hairline);border-radius:var(--radius);padding:var(--s5)}
.calc .inputs{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:var(--s3);align-items:end}
.calc .result{background:var(--sage);border:var(--hairline);border-radius:var(--radius);padding:var(--s4);margin-top:var(--s4)}
.calc .result .big{
  font-family:var(--font-head);font-size:34px;font-weight:600;color:var(--forest);
  font-variant-numeric:tabular-nums;letter-spacing:0;display:block;
}
.calc canvas{max-width:200px;margin:var(--s2) 0}
.calc .flex{display:flex;gap:var(--s4);align-items:center;flex-wrap:wrap}
.disclaimer{font-size:12px;margin-top:var(--s3);border-top:var(--hairline);padding-top:var(--s2)}
.legend{list-style:none;font-size:14px}
.legend li{display:flex;align-items:center;gap:var(--s1);margin:4px 0}
.legend .dot{width:12px;height:12px;border-radius:var(--radius);display:inline-block}

/* ---- Tables ---- */
table{width:100%;border-collapse:collapse;margin:var(--s3) 0;border:var(--hairline);border-radius:var(--radius)}
th,td{padding:var(--s2) var(--s2);border-bottom:var(--hairline);text-align:left;font-size:14px}
th{background:var(--forest);color:var(--cream);font-family:var(--font-body);font-weight:600;border-bottom:0}
tr:nth-child(even){background:var(--sage)}
tr:last-child td{border-bottom:0}
.table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}

/* ---- FAQ ---- */
details{border:var(--hairline);border-radius:var(--radius);margin-bottom:-1px;background:var(--white)}
details[open]{border-color:var(--forest)}
summary{
  padding:var(--s3);font-family:var(--font-head);font-weight:600;font-size:17px;color:var(--forest);
  cursor:pointer;min-height:48px;display:flex;align-items:center;gap:var(--s2);list-style:none;
}
summary::-webkit-details-marker{display:none}
summary::after{
  content:"";margin-left:auto;width:9px;height:9px;flex:0 0 auto;
  border-right:2px solid var(--forest);border-bottom:2px solid var(--forest);
  transform:rotate(45deg) translate(-2px,-2px);transition:transform .2s var(--ease);
}
details[open] summary::after{transform:rotate(-135deg) translate(-2px,-2px)}
details .a{padding:0 var(--s3) var(--s3);color:var(--ink-muted)}

/* ---- Article ---- */
.article{max-width:42.3em  /* was 68ch in Work Sans 400 */}
.article h2{margin-top:var(--s5)}
.article h3{margin-top:var(--s4)}
.article ul,.article ol{margin:var(--s3) 0 var(--s3) 1.3rem}
.article li{margin:6px 0}

/* ---- Guide banner: the one Forest field in the page body. ---- */
.guide-banner{
  background:var(--forest);color:var(--pale-sage);border-radius:var(--radius);
  padding:var(--s5);display:flex;gap:var(--s5);align-items:flex-start;
  flex-wrap:wrap;justify-content:flex-start;border-top:3px solid var(--ochre);
}
.guide-banner h2{color:var(--cream)}
.guide-banner p{margin-bottom:0}

/* ---- Footer: Forest field, Pale Sage body at 7.82:1. ---- */
.site-footer{background:var(--forest);color:var(--pale-sage);padding:var(--s6) 0 110px;font-size:14px;border-top:var(--rule)}
.site-footer a{color:var(--cream)}
.site-footer h2,.site-footer h3{
  font-family:var(--font-body);font-size:11px;text-transform:uppercase;
  letter-spacing:var(--track-eyebrow);font-weight:600;margin-bottom:var(--s3);color:var(--cream);
}
.site-footer .cols{display:grid;grid-template-columns:2fr 1fr 1fr;gap:var(--s5)}
.site-footer .brandblock{margin-bottom:var(--s3)}
.site-footer img.eho{height:56px;width:auto;background:var(--white);padding:5px;border-radius:var(--radius);margin-top:var(--s3)}
.site-footer img.corp{height:38px;width:auto;background:var(--white);padding:6px var(--s1);border-radius:var(--radius);margin-top:var(--s3)}
.site-footer ul{list-style:none}
.site-footer li{margin:var(--s1) 0}
.site-footer .legalline{
  border-top:1px solid var(--pale-sage);margin-top:var(--s5);padding-top:var(--s4);
  line-height:1.7;font-size:12px;color:var(--pale-sage);
}
.site-footer .legalline a{color:var(--cream)}

/* ---- Sticky mobile bar ---- */
.mobile-bar{display:none;position:fixed;bottom:0;left:0;right:0;background:var(--forest);
  z-index:200;box-shadow:var(--shadow);border-top:2px solid var(--ochre);padding-bottom:env(safe-area-inset-bottom)}
.mobile-bar a{flex:1;text-align:center;color:var(--cream);font-weight:600;padding:15px 6px;
  font-size:15px;min-height:48px;text-decoration:none}
.mobile-bar a+a{border-left:1px solid var(--pale-sage)}

/* ---- Responsive. No horizontal scroll at any width down to 360px. ---- */
@media(max-width:1100px){
  .hero .container{grid-template-columns:1fr;gap:var(--s5)}
  .about-grid{grid-template-columns:1fr}
  .portrait{max-width:260px}
  .hero-portrait{max-width:300px}
  .nav-toggle{display:flex}
  .nav-links{
    display:none;position:absolute;top:100%;left:0;right:0;background:var(--cream);
    flex-direction:column;align-items:stretch;padding:var(--s2) var(--s3) var(--s3);
    border-bottom:var(--rule);
  }
  .nav-links.open{display:flex;overscroll-behavior:contain;max-height:calc(100vh - var(--sticky-h));overflow-y:auto}
  .nav-links a{padding:var(--s2);font-size:16px;min-height:48px;border-bottom:var(--hairline)}
  .nav .btn{display:none}
  .mobile-bar{display:flex}
  .site-footer .cols{grid-template-columns:1fr}
  .site-footer{padding-bottom:130px}
}
@media(max-width:640px){
  .section,main>.prog{padding:var(--s5) 0}
  .hero{padding:var(--s5) 0}
  .hero-inner{padding:var(--s4) var(--s3)}
  .guide-banner,.calc{padding:var(--s4)}
  .container{padding-left:max(var(--s3),env(safe-area-inset-left));padding-right:max(var(--s3),env(safe-area-inset-right))}
  h1{max-width:none}
  .btn{width:100%;max-width:340px}
  .badge-row img{max-height:72px}
}
@media(max-width:380px){
  .lockup-name{font-size:22px}
  .container{padding-left:max(var(--s2),env(safe-area-inset-left));padding-right:max(var(--s2),env(safe-area-inset-right))}
}

/* ---- User preferences ---- */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}
}
@media(prefers-contrast:more){
  :root{--ink-muted:var(--forest);--line:var(--forest)}
  .btn.secondary,.btn.ghost{border-width:2px}
}
@media print{
  .site-header,.mobile-bar,.nav-toggle,.skip-link,.topbar{display:none !important}
  body{font-size:11pt;background:var(--white)}
  .site-footer{background:none;color:var(--forest);padding-bottom:0;border-top:var(--hairline)}
  .site-footer a,.site-footer .legalline{color:var(--forest)}
  .card,.calc,details{border-color:var(--line)}
  main>.section+.section{border-top:var(--hairline)}
}

/* Calculator empty state: the result is hidden until a rate is entered, so say
   why instead of rendering nothing and looking broken. */
.calc-empty{
  background:var(--sage);border:var(--hairline);border-left:3px solid var(--ochre);
  border-radius:var(--radius);padding:var(--s3);margin-top:var(--s4);
  font-size:14px;color:var(--ink-muted);
}

/* Representative-example tables on example-numbers.html. Figures are the point,
   so digits line up (tabular-nums) and the table scrolls rather than squeezing. */
table.numbers{width:100%;border-collapse:collapse;margin-top:18px;font-size:.97rem}
table.numbers th{text-align:left;font-weight:600;font-size:.8rem;letter-spacing:.04em;
  text-transform:uppercase;padding:10px 12px;border-bottom:2px solid currentColor;opacity:.75}
table.numbers td{padding:11px 12px;border-bottom:1px solid rgba(0,0,0,.12);vertical-align:top}
table.numbers td:last-child,table.numbers th:last-child{text-align:right;
  font-variant-numeric:tabular-nums;white-space:nowrap}
table.numbers tbody tr:last-child td{border-bottom:none}