/* ============================================================================
   Company-OS — landing
   Visual truth D-013: modernist, light, PP Neue Montreal alone, one verdigris
   accent (live signal + primary action), structure-as-design. Order is the calm.
   ========================================================================== */

/* ---- Fonts -------------------------------------------------------------- */
@font-face{font-family:"Neue Montreal";font-weight:300;font-style:normal;font-display:swap;
  src:url("fonts/neue-montreal/NeueMontreal-Light.woff2") format("woff2"),url("fonts/neue-montreal/NeueMontreal-Light.woff") format("woff")}
@font-face{font-family:"Neue Montreal";font-weight:400;font-style:normal;font-display:swap;
  src:url("fonts/neue-montreal/NeueMontreal-Regular.woff2") format("woff2"),url("fonts/neue-montreal/NeueMontreal-Regular.woff") format("woff")}
@font-face{font-family:"Neue Montreal";font-weight:400;font-style:italic;font-display:swap;
  src:url("fonts/neue-montreal/NeueMontreal-Italic.woff2") format("woff2"),url("fonts/neue-montreal/NeueMontreal-Italic.woff") format("woff")}
@font-face{font-family:"Neue Montreal";font-weight:500;font-style:normal;font-display:swap;
  src:url("fonts/neue-montreal/NeueMontreal-Medium.woff2") format("woff2"),url("fonts/neue-montreal/NeueMontreal-Medium.woff") format("woff")}
@font-face{font-family:"Neue Montreal";font-weight:500;font-style:italic;font-display:swap;
  src:url("fonts/neue-montreal/NeueMontreal-MediumItalic.woff2") format("woff2"),url("fonts/neue-montreal/NeueMontreal-MediumItalic.woff") format("woff")}
@font-face{font-family:"Neue Montreal";font-weight:700;font-style:normal;font-display:swap;
  src:url("fonts/neue-montreal/NeueMontreal-Bold.woff2") format("woff2"),url("fonts/neue-montreal/NeueMontreal-Bold.woff") format("woff")}

/* ---- Tokens ------------------------------------------------------------- */
:root{
  --paper:#F5F7F4;
  --ink:#171A18;
  --ink-2:#565E59;                /* 6.2:1  — secondary body */
  --label:#6C736F;                /* 4.5:1  — rail labels, captions, small UI text (AA) */
  --muted:#6E706E;                /* 4.6:1  — muted-but-readable text (ledger LHS, stale row) */
  --hair:rgba(23,26,24,.13);      /* structural hairlines only */
  --hair-2:rgba(23,26,24,.22);    /* structural — ticks, chip borders, register nodes */
  --faint:rgba(23,26,24,.36);     /* NON-text only — dots, decorative marks */
  --verdigris:#257A66;
  --verdigris-deep:#1B6151;
  /* freshness — quarantined to the freshness map only */
  --fresh:#2E8A5C;
  --warn:#B97F24;                 /* the status dot (graphic, clears 3:1) */
  --warn-ink:#96671D;             /* the status text (AA 4.6:1) */

  --maxw:1300px;
  --gutter:clamp(20px,5vw,64px);
  --rail:172px;
  --bay-pad:clamp(84px,13vh,180px);

  --fs-hero:clamp(2rem,5vw,4.6rem); /* floor lets each headline phrase hold one line on phones */
  --fs-creed:clamp(2.1rem,5.2vw,4rem);
  --fs-h2:clamp(1.85rem,3.5vw,3.05rem);
  --fs-lede:clamp(1.12rem,1.5vw,1.5rem);
  --fs-body:clamp(1.0625rem,.4vw + 1rem,1.15rem);
  --fs-label:.6875rem;
  --fs-small:.8125rem;

  --ease:cubic-bezier(.22,1,.36,1);
}

/* ---- Reset -------------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0}
h1,h2,h3,h4,p,figure,blockquote,dl,dd,ol,ul{margin:0}
ol,ul{padding:0;list-style:none}
a{color:inherit;text-decoration:none}
img,svg{display:block}
button{font:inherit}
::selection{background:var(--verdigris);color:#fff}

html{scrollbar-color:var(--hair-2) transparent}

body{
  background:var(--paper);
  color:var(--ink);
  font-family:"Neue Montreal",-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif;
  font-weight:400;
  font-size:var(--fs-body);
  line-height:1.55;
  letter-spacing:-.006em;
  font-feature-settings:"kern" 1,"ss01" 1;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:clip; /* clip, not hidden — no scroll-container side effect on sticky */
}

/* in-page anchors clear the fixed masthead on every path (JS on/off) */
html{scroll-padding-top:clamp(70px,12vh,110px)}
section[id]{scroll-margin-top:clamp(70px,12vh,110px)}

/* Numeric data aligns like a ledger — no separate mono face (per brief). */
.tnum,.brief__time,.hero__status-log b,.brief__verdict,.receipt dd,
.brief__effect,.freshness__age,.flow__no,.brief__actions{font-variant-numeric:tabular-nums}

/* ---- Skip link ---------------------------------------------------------- */
.skip-link{position:fixed;top:10px;left:10px;z-index:100;padding:.5rem .8rem;
  background:var(--ink);color:var(--paper);border-radius:2px;transform:translateY(-160%);
  transition:transform .2s var(--ease)}
.skip-link:focus{transform:none}

/* ---- Focus -------------------------------------------------------------- */
a:focus-visible,button:focus-visible{outline:2px solid var(--verdigris);outline-offset:3px;border-radius:1px}

/* ============================================================================
   Masthead
   ========================================================================== */
.masthead{position:fixed;top:0;left:0;right:0;z-index:50;
  background:color-mix(in srgb,var(--paper) 82%,transparent);
  -webkit-backdrop-filter:blur(9px);backdrop-filter:blur(9px);
  border-bottom:1px solid transparent;transition:border-color .4s var(--ease),background .4s var(--ease)}
.masthead.is-scrolled{border-bottom-color:var(--hair)}
.masthead__inner{max-width:var(--maxw);margin:0 auto;padding:clamp(14px,1.6vw,20px) var(--gutter);
  display:flex;align-items:center;justify-content:space-between;gap:1.5rem}

.brand{display:inline-flex;align-items:center;gap:.62rem;padding:.55rem 0} /* >=44px hit area */
.brand__mark{display:inline-block;width:26px;height:26px;flex:none}
.brand__mark svg{width:100%;height:100%}
.brand__frame{stroke:var(--ink)}
.brand__pulse{stroke:var(--verdigris)}
.brand__word{font-weight:500;font-size:1.02rem;letter-spacing:-.01em}

.masthead__nav{display:flex;align-items:center;gap:1.6rem}
.masthead__cta{font-size:.92rem;color:var(--ink);position:relative;padding:.6rem 0}
.masthead__cta::after{content:"";position:absolute;left:0;right:0;bottom:.45rem;height:1px;
  background:var(--ink);transform:scaleX(0);transform-origin:left;transition:transform .35s var(--ease)}
.masthead__cta:hover::after{transform:scaleX(1)}

/* ============================================================================
   Page shell + the architect's spine
   ========================================================================== */
.page{position:relative;max-width:var(--maxw);margin:0 auto;padding:0 var(--gutter)}

/* one continuous hairline — the conveyor belt */
.spine{position:absolute;top:0;bottom:0;left:calc(var(--gutter) + var(--rail));
  width:1px;background:var(--hair);pointer-events:none}

/* ---- Bay (a section on the belt) ---------------------------------------- */
.bay{display:grid;grid-template-columns:var(--rail) 1fr;
  padding-block:var(--bay-pad);position:relative}
.bay + .bay{padding-top:0}
.bay__body{padding-left:clamp(24px,3.4vw,60px);max-width:60ch}
.bay--hero .bay__body,.bay--shift .bay__body{max-width:none}

/* ---- Station: a drafting register mark on the spine --------------------- */
/* the tick runs INTO the spine; a small node sits on the line where they
   register; "you are here" darkens the mark ON the line, not just the label. */
.station{position:sticky;top:clamp(88px,12vh,120px);align-self:start;
  display:flex;flex-direction:column;gap:.5rem;padding-top:1.05rem;height:0;overflow:visible}
.station::before{content:"";position:absolute;top:0;left:0;width:var(--rail);
  height:1px;background:var(--hair-2);transition:background .55s var(--ease)}
.station::after{content:"";position:absolute;top:-3px;left:calc(var(--rail) - 3px);
  width:6px;height:6px;background:var(--paper);border:1px solid var(--hair-2);
  transition:border-color .55s var(--ease),background .55s var(--ease)}
.station__idx{font-size:var(--fs-label);font-weight:500;letter-spacing:.06em;
  color:var(--label);font-variant-numeric:tabular-nums;transition:color .55s var(--ease)}
.station__label{font-size:var(--fs-label);font-weight:500;text-transform:uppercase;
  letter-spacing:.16em;color:var(--label);transition:color .55s var(--ease)}
.bay.is-active .station::before{background:var(--ink)}
.bay.is-active .station::after{background:var(--ink);border-color:var(--ink)}
.bay.is-active .station__idx{color:var(--ink)}
.bay.is-active .station__label{color:var(--ink-2)}

/* ---- Shared section heads ---------------------------------------------- */
.bay__head{font-weight:400;font-size:var(--fs-h2);line-height:1.04;letter-spacing:-.025em}
.bay__lede{font-size:var(--fs-lede);line-height:1.42;color:var(--ink-2);
  max-width:34ch;margin-top:1.4rem;letter-spacing:-.01em}

/* live signal — verdigris, the one recurring "always on" token */
/* the single "live" signal — verdigris, static (nothing else moves) */
.livedot{display:inline-block;width:.52em;height:.52em;border-radius:50%;
  background:var(--verdigris);flex:none;position:relative;top:-.02em}

/* ============================================================================
   00 · Hero
   ========================================================================== */
.masthead + .page .bay--hero{padding-top:clamp(108px,14vh,156px)}
.hero__title{font-weight:400;font-size:var(--fs-hero);line-height:1.02;letter-spacing:-.036em;
  margin-bottom:clamp(2.4rem,4.5vw,3.6rem);max-width:24ch}
.reveal-line{display:block}
.hero__lower{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.02fr);
  gap:clamp(32px,5vw,80px);align-items:stretch}
.hero__claim{display:flex;flex-direction:column;padding-top:.3rem}
.hero__lede{font-size:var(--fs-lede);line-height:1.4;color:var(--ink-2);max-width:38ch;
  letter-spacing:-.011em;margin-bottom:2rem}

/* the ambient system readout — pinned to the base so it rhymes with the card's foot */
.hero__status{margin-top:auto;display:flex;align-items:baseline;flex-wrap:wrap;gap:.5rem;
  font-size:var(--fs-small);color:var(--ink-2);letter-spacing:.005em;
  padding-top:1.3rem;border-top:1px solid var(--hair)}
.hero__status-sep{color:var(--faint)}
.hero__status-log b{font-weight:500;color:var(--ink)}

.hero__actions{display:flex;align-items:center;gap:1.6rem;margin-bottom:0}
.scroll-cue{font-size:var(--fs-label);text-transform:uppercase;letter-spacing:.16em;
  color:var(--label);display:inline-flex;align-items:center;gap:.5rem}
.scroll-cue::before{content:"";width:34px;height:1px;background:var(--label);display:inline-block}

/* ---- The morning brief (the drafted decision) --------------------------- */
/* one frame only: the corner crop-marks (registration marks; the box is never
   sealed). The card sits on bare paper like a drafted sheet — no tint. */
.brief{position:relative;padding:clamp(20px,2.2vw,32px) clamp(22px,2.4vw,34px);
  align-self:start;margin-top:.4rem}
.brief__crop{position:absolute;width:13px;height:13px;pointer-events:none}
.brief__crop--tl{top:0;left:0;border-top:1.5px solid var(--ink);border-left:1.5px solid var(--ink)}
.brief__crop--tr{top:0;right:0;border-top:1.5px solid var(--ink);border-right:1.5px solid var(--ink)}
.brief__crop--bl{bottom:0;left:0;border-bottom:1.5px solid var(--ink);border-left:1.5px solid var(--ink)}
.brief__crop--br{bottom:0;right:0;border-bottom:1.5px solid var(--ink);border-right:1.5px solid var(--ink)}

.brief__head{display:flex;align-items:center;justify-content:space-between;
  padding-bottom:1rem;margin-bottom:1.1rem;border-bottom:1px solid var(--hair)}
.brief__live{display:inline-flex;align-items:center;gap:.45rem;font-size:var(--fs-small);color:var(--ink-2)}
.brief__time{font-size:var(--fs-small);color:var(--label)}

.brief__kicker{font-size:var(--fs-label);text-transform:uppercase;letter-spacing:.14em;
  color:var(--label);margin-bottom:.9rem}
.brief__verdict{font-weight:500;font-size:clamp(1.25rem,1.9vw,1.7rem);line-height:1.12;
  letter-spacing:-.02em;margin-bottom:1.4rem}

.brief__receipts{display:flex;flex-direction:column}
.receipt{display:grid;grid-template-columns:8.4rem 1fr;gap:1rem;align-items:baseline;
  padding:.72rem 0;border-top:1px solid var(--hair)}
.receipt dt{font-size:var(--fs-label);text-transform:uppercase;letter-spacing:.1em;color:var(--label)}
.receipt dd{font-size:.94rem;color:var(--ink);line-height:1.4}

.brief__effect{font-size:.94rem;color:var(--ink-2);padding:1rem 0 0;
  border-top:1px solid var(--hair);margin-top:.2rem}
.brief__effect b{font-weight:500;color:var(--ink)}

.brief__actions{display:flex;gap:.55rem;margin-top:1.3rem}
.chip{font-size:.82rem;padding:.42rem .9rem;border:1px solid var(--hair-2);border-radius:2px;color:var(--ink-2)}
.chip--go{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.brief__caption{font-size:var(--fs-small);color:var(--label);margin-top:1.2rem;line-height:1.4;font-style:italic}

/* ============================================================================
   01 · The glue (problem)
   ========================================================================== */
.truths{margin-top:clamp(2.4rem,4vw,3.4rem);display:flex;flex-direction:column}
.truth{display:grid;grid-template-columns:2.6rem 1fr;gap:1.4rem;align-items:start;
  padding:clamp(1.6rem,2.6vw,2.4rem) 0;border-top:1px solid var(--hair)}
.truth:first-child{border-top:0;padding-top:0}
.truth__no{font-size:.9rem;color:var(--label);font-style:italic;padding-top:.28rem}
.truth h3{font-weight:500;font-size:clamp(1.15rem,1.7vw,1.42rem);letter-spacing:-.015em;
  line-height:1.16;margin-bottom:.55rem}
.truth p{color:var(--ink-2);max-width:52ch;line-height:1.5}

/* ============================================================================
   02 · The shift
   ========================================================================== */
.bay--shift .bay__body{max-width:none}
.creed{margin:0}
.creed p{font-weight:400;font-size:var(--fs-creed);line-height:1.02;letter-spacing:-.032em;max-width:16ch}
.creed em{font-style:italic;font-weight:400;color:var(--ink-2)}
.creed__gloss{color:var(--ink-2);font-size:var(--fs-lede);line-height:1.42;max-width:42ch;
  margin-top:1.8rem;letter-spacing:-.01em}

.ledger{margin-top:clamp(2.6rem,4.5vw,4rem);border-top:1px solid var(--ink)}
.ledger__head,.ledger__row{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.2rem,3vw,3rem)}
.ledger__head{padding:1rem 0;border-bottom:1px solid var(--hair)}
.ledger__head span{font-size:var(--fs-label);text-transform:uppercase;letter-spacing:.14em}
.ledger__head span:first-child{color:var(--label)}
.ledger__head .ledger__rhs{color:var(--ink)}
.ledger__row{padding:clamp(1rem,1.8vw,1.5rem) 0;border-bottom:1px solid var(--hair)}
.ledger__row span{font-size:clamp(1rem,1.4vw,1.22rem);line-height:1.3;letter-spacing:-.012em}
.ledger__row span:first-child{color:var(--muted)}
.ledger__rhs{color:var(--ink)}

/* ============================================================================
   03 · How it works
   ========================================================================== */
.flow{margin-top:clamp(2.4rem,4vw,3.4rem);display:grid;grid-template-columns:repeat(4,1fr);
  border-top:1px solid var(--ink)}
.flow__step{padding:1.4rem clamp(.9rem,1.4vw,1.4rem) 1.5rem 0;position:relative;
  display:flex;flex-direction:column;gap:.85rem}
.flow__step::after{content:"";position:absolute;top:1.75rem;right:clamp(.9rem,1.4vw,1.4rem);
  width:20px;height:1px;background:var(--hair-2)}
.flow__step:last-child::after{display:none}
.flow__no{font-size:var(--fs-label);color:var(--label);font-variant-numeric:tabular-nums;letter-spacing:.06em}
.flow__txt{font-size:clamp(1.02rem,1.4vw,1.28rem);line-height:1.18;letter-spacing:-.015em}

.notes{margin-top:clamp(3rem,5vw,4.6rem);display:grid;grid-template-columns:repeat(3,1fr);
  gap:clamp(1.6rem,3vw,3rem)}
.note h3{font-weight:500;font-size:1.08rem;letter-spacing:-.012em;margin-bottom:.6rem;
  padding-top:1rem;border-top:1px solid var(--ink)}
.note p{color:var(--ink-2);font-size:.98rem;line-height:1.5}

/* ============================================================================
   04 · Glass box — the freshness map (the one place color breathes)
   ========================================================================== */
.freshness{margin-top:clamp(2.6rem,4.5vw,3.8rem);border-top:1px solid var(--ink);max-width:640px}
.freshness__row{display:grid;grid-template-columns:1fr auto;align-items:center;gap:1.2rem;
  padding:clamp(.95rem,1.6vw,1.35rem) 0;border-bottom:1px solid var(--hair);position:relative}
.freshness__pillar{font-size:clamp(1.05rem,1.5vw,1.3rem);letter-spacing:-.015em;
  display:flex;align-items:center;gap:.75rem}
.freshness__pillar::before{content:"";width:.5rem;height:.5rem;border-radius:50%;flex:none;background:var(--faint)}
.freshness__age{font-size:var(--fs-small);color:var(--label)}
.freshness__row[data-state="fresh"] .freshness__pillar::before{background:var(--fresh)}
.freshness__row[data-state="warn"] .freshness__pillar::before{background:var(--warn)}
.freshness__row[data-state="warn"] .freshness__age{color:var(--warn-ink)}
.freshness__row[data-state="stale"] .freshness__pillar{color:var(--muted)}
.freshness__row[data-state="stale"] .freshness__pillar::before{background:var(--faint)}
.freshness__row[data-state="stale"] .freshness__age{color:var(--muted)}
.freshness__caption{margin-top:1.4rem;color:var(--ink-2);font-size:.98rem}
.freshness__tag{font-style:italic;color:var(--label)}

/* ============================================================================
   05 · Ownership
   ========================================================================== */
.own__body{font-size:var(--fs-lede);line-height:1.4;letter-spacing:-.015em;max-width:26ch;
  color:var(--ink);margin-top:1.6rem}
.bay--own{padding-bottom:clamp(56px,8vh,110px)}
.bay--own .bay__body{max-width:none}
.bay--own .own__body{max-width:26ch;font-size:clamp(1.4rem,2.6vw,2.1rem);color:var(--ink);
  line-height:1.28;margin-top:1.8rem}

/* portability strip — the wide, concrete proof beneath the narrow creed */
.homes{margin-top:clamp(2.2rem,4vw,3.2rem);width:fit-content;max-width:100%;border-top:1px solid var(--ink);
  padding-top:1.05rem;display:flex;flex-direction:column;gap:.85rem}
.homes__k{font-size:var(--fs-label);text-transform:uppercase;letter-spacing:.14em;color:var(--label)}
.homes__set{display:flex;flex-wrap:wrap;gap:.6rem 1.5rem}
.homes__set li{position:relative;font-size:clamp(1.05rem,1.5vw,1.3rem);letter-spacing:-.015em;color:var(--ink)}
.homes__set li + li::before{content:"";position:absolute;left:-.78rem;top:.18em;bottom:.18em;
  width:1px;background:var(--hair-2)}

/* ============================================================================
   06 · The ask — the closing sheet (bookends the hero brief)
   ========================================================================== */
.bay--ask{padding-bottom:clamp(48px,6vh,88px)}
.bay--ask .bay__body{max-width:none}
.ask__eyebrow{font-size:var(--fs-small);color:var(--label);max-width:44ch;
  padding-bottom:1.6rem;margin-bottom:1.8rem;border-bottom:1px solid var(--hair);
  text-transform:none;letter-spacing:0}
.ask__head{font-weight:400;font-size:clamp(2.2rem,4vw,3.5rem);letter-spacing:-.032em;line-height:1.02}

/* the closing sheet — same crop-mark frame as the hero's brief, inverted:
   the page opens with what the system drafts, and closes with your move. */
.close{position:relative;max-width:600px;margin-top:clamp(2.2rem,4vw,3.4rem);
  padding:clamp(24px,3vw,40px)}
.exchange{display:flex;flex-direction:column;border-top:1px solid var(--ink)}
.xrow{display:grid;grid-template-columns:7rem 1fr;gap:1.2rem;align-items:baseline;
  padding:clamp(.85rem,1.7vw,1.2rem) 0;border-bottom:1px solid var(--hair)}
.xrow dt{font-size:var(--fs-label);text-transform:uppercase;letter-spacing:.12em;color:var(--label)}
.xrow dd{font-size:clamp(1.05rem,1.5vw,1.25rem);line-height:1.32;letter-spacing:-.014em;color:var(--ink)}
.close__act{display:flex;flex-direction:column;gap:1.1rem;align-items:flex-start;
  margin-top:clamp(1.7rem,3vw,2.5rem)}
.ask__fine{font-size:var(--fs-small);color:var(--label);max-width:44ch}

/* ---- Buttons ------------------------------------------------------------ */
.btn{display:inline-flex;align-items:center;gap:.6rem;font-size:1.02rem;letter-spacing:-.01em;
  padding:.92rem 1.5rem;border-radius:2px;transition:background .3s var(--ease),color .3s var(--ease),border-color .3s var(--ease),transform .3s var(--ease)}
.btn--primary{background:var(--verdigris);color:#fff}
.btn--primary:hover{background:var(--verdigris-deep)}
.btn__arrow{transition:transform .3s var(--ease)}
.btn--primary:hover .btn__arrow{transform:translateX(4px)}
.btn--ghost{border:1px solid var(--hair-2);color:var(--ink);padding:.82rem 1.35rem}
.btn--ghost:hover{border-color:var(--ink)}
.btn--lg{font-size:1.08rem;padding:1.05rem 1.75rem}

/* ============================================================================
   Footer
   ========================================================================== */
/* the belt ends at the content: the footer sits above the spine and masks its tail */
.colophon{position:relative;z-index:1;background:var(--paper);
  border-top:1px solid var(--hair);margin-top:clamp(52px,7vh,96px)}
.colophon__inner{max-width:var(--maxw);margin:0 auto;padding:clamp(48px,8vh,96px) var(--gutter);
  display:flex;flex-direction:column;gap:2.4rem}
.colophon__line{font-weight:400;font-size:clamp(1.6rem,3.4vw,2.7rem);letter-spacing:-.03em;line-height:1.05;max-width:20ch}
.colophon__meta{display:flex;align-items:center;flex-wrap:wrap;gap:.7rem;font-size:var(--fs-small);color:var(--label)}
.colophon__mark{width:20px;height:20px}
.colophon__dot{color:var(--faint)}

/* ============================================================================
   Motion — one surgical move: elements rise into place, in order.
   Baseline (no .anim) = fully visible. .anim is only added when motion is OK.
   ========================================================================== */
.anim .rise{opacity:0;transform:translateY(26px)}
.anim .brief-rise{opacity:0;transform:translateY(20px)}
.anim .reveal-line{opacity:0;transform:translateY(34px)}

/* ---- Reduced motion ----------------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;
    transition-duration:.001ms !important;scroll-behavior:auto !important}
  .rise,.brief-rise,.reveal-line{opacity:1 !important;transform:none !important}
  .livedot{animation:none}
}

/* ============================================================================
   Responsive
   ========================================================================== */
@media (max-width:1080px){
  .hero__lower{grid-template-columns:1fr;gap:clamp(40px,7vw,60px)}
  .brief{max-width:540px}
}
@media (max-width:860px){
  :root{--rail:112px}
  .notes{grid-template-columns:1fr;gap:0}
  .note h3{margin-top:1.6rem}
  .flow{grid-template-columns:1fr 1fr}
  .flow__step::after{display:none}
}
/* stack the comparison ledger before its columns get cramped */
@media (max-width:560px){
  .ledger__head,.ledger__row{grid-template-columns:1fr;gap:.3rem}
  .ledger__head span:first-child,.ledger__row span:first-child{font-size:var(--fs-small)}
  .ledger__row span:first-child{color:var(--muted)}
}
@media (max-width:680px){
  :root{--rail:0px;--bay-pad:clamp(64px,11vh,110px)}
  .spine{left:var(--gutter)}
  .bay{grid-template-columns:1fr;gap:1.4rem}
  .bay__body{padding-left:clamp(18px,5vw,26px)}
  .station{position:static;height:auto;flex-direction:row;align-items:center;gap:.9rem;padding:0 0 0 clamp(18px,5vw,26px)}
  .station::before,.station::after{display:none}
  .station__idx::after{content:"";display:inline-block;width:20px;height:1px;background:var(--hair-2);margin-left:.7rem;vertical-align:middle}
  .ledger__head,.ledger__row{gap:1.2rem}
  .flow{grid-template-columns:1fr}
  .flow__step{flex-direction:row;justify-content:space-between;align-items:baseline;
    padding:1.1rem 0;border-bottom:1px solid var(--hair);gap:1rem}
  .flow__step:first-child{border-top:0}
  .receipt{grid-template-columns:1fr}
  .receipt dt{margin-bottom:.15rem}
  .xrow{grid-template-columns:1fr;gap:.25rem}
  .xrow dt{margin-bottom:.1rem}
  .close{padding:clamp(20px,5vw,28px)}
  .homes__set{gap:.45rem 1.3rem}
  .homes__set li + li::before{display:none}
  .masthead__cta{display:none}
  .masthead + .page .bay--hero{padding-top:clamp(84px,13vh,116px)}
}