/* classify.ai landing page — the Amble register.

   Canon: design/design-guidelines-amble.md, with design/classify-restrained.html
   as the visual reference. Adopted Aug 9 2026 by the §11.1 ruling: root unlocks
   and the grid/dots/hard-border register retires estate-wide.

   What this rewrite retires, all of it from the r21 one-system register:
     the graph-paper grid, the canvas vector field and its coords readout,
     the 2px ink borders, the 6px/3px hard offset shadows, the gold focus
     shadow, --signal as a hover accent, the pine Search button, Archivo 800.

   The font <link> is an @import for the same reason it always was: the landing
   suite pins every <link rel=stylesheet> to be root absolute under /landing/,
   and it pins the document's stylesheet list to exactly this file. An @import is
   not a <link>, so it satisfies both.

   §4 is one family plus one mono. Archivo 500 (body) and 700 (display, controls),
   JetBrains Mono 400. Nothing else loads. §5's controls are specced at weight 600,
   but §4 admits only 500 and 700, so controls take 700: a 600 that is not loaded
   would be synthesised or snapped anyway. Flagged in the PR. */

@import url("https://fonts.googleapis.com/css2?family=Archivo:wght@500;700&family=JetBrains+Mono:wght@400&display=swap");

/* >>> TOKENS: generated by scripts/sync-tokens.mjs from BOTH canonical files:
       site-dev/src/tokens.css (the palette and register) and
       site-dev/src/estate-chrome.css (the estate h1 metrics, which live there
       because phoenix.css cannot @import tokens.css).
       Do not edit inside this block; edit the canonical file and re-run the
       script. "the landing token block is in sync with the canonical token
       file" asserts the two match. */
:root{
  /* ---- ground ---- */
  --oat:#EFEAE2;      /* the default ground on every surface */
  --oat-2:#F5F1E9;    /* alternating section ground, one step lighter */
  --sand:#E7E1D3;     /* alternating section ground, one step deeper */
  --white:#FFFFFF;    /* used sparingly, ~one section in three; cards and inputs */
  --chip:#FBF9F5;     /* path-chip fill: a warmer white that sits on oat without
                         reading as a second ground. Ruled Aug 10 2026. */
  /* THE VIEW PILL'S GROUND, ruled Aug 11 2026. Named for its role, as --chip is.
     NOTE THE NEAR-COLLISION: --sand is #E7E1D3 and this is #E7E1D5, two values
     apart in the blue channel and indistinguishable on screen. They are NOT the
     same token and must not be folded together: --sand is a section ground that
     --dim may never sit on, this is a control fill that carries ink. Written out
     here so the next reader does not "tidy" one into the other. */
  --pill:#E7E1D5;

  /* ---- type and rule ---- */
  --ink:#211F1B;      /* all type, all borders, most controls */
  --dim:#8A8474;      /* DECORATIVE TIER — see the contrast note below */
  --dim-2:#7B7567;    /* the fifth neutral: --dim's stand-in on --sand */
  --hair:#DFD9CC;     /* rules and table separators */

  /* ---- the two colours, and there are only two ---- */
  /* --pine, ruled Oct 2 2026 (Brendan) for root and atlas: search and build
     are pine, and request api access is --ink, nav and closing band alike.
     Phoenix keeps the Sep 2 2026 assignment (its nav pill and pricing band are
     pine). Full-width bands stay pine everywhere. See the register, §5. The
     value is unchanged: the move is per surface, never a token swap. */
  --pine:#1E4126;
  /* --cream, ruled Sep 2 2026: the dark-register button fill. Phoenix's hero
     button wears it in place of ink, which would not read on that ground; it is
     also the button that sits on a pine band (a pine control on a pine band
     cannot be seen). Named a token so the dark house and the light bands stop
     each carrying their own literal. phoenix.css does not @import this file
     and declares its own palette on its own :root by its own rule (as it does
     --pine and --oat), so the phoenix build restates this value there. */
  --cream:#EDE7DB;

  /* --ember: FOUR PLACEMENTS ESTATE-WIDE (§3). Four in total, NOT four per page.
       1. "I'm feeling semantic" on root, standing underline .... SPENT (J1)
       2. the latency stamp in a code pane (`214 ms`) ........... unspent
       3. the deal id on a segment card ......................... unspent
       4. reserved, unassigned
     Never a fill, never a button, never a heading, never a nav hover. If a fifth
     use is proposed, one of the four retires. Root's share of the budget is
     asserted by "ember appears at most once on root" in landing.spec.ts. */
  --ember:#BC6B45;

  /* ---- code, the only dark surface in the register ---- */
  --code-bg:#191713;
  --code-fg:#A8CDAF;

  /* ---- type (§4): one family plus one mono, nothing else ---- */
  --display:'Archivo',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --mono:'JetBrains Mono',ui-monospace,'SF Mono',Menlo,monospace;

  /* ---- THE ONE SOFT ELEVATION (§5), ruled Aug 11 2026 ----------------------
     §5 gives the register a single soft elevation and retires offset shadows.
     It was never a token, so three surfaces on the landing page had each written
     their own: the instrument bar 0 18px 44px /.10 (the §5 value), the path
     chips 0 10px 26px /.07, and the view pill 0 10px 26px /.12. They were not
     byte-identical to each other, which is exactly what a token prevents.
     --sh is the §5 value; all three consume it now. */
  --sh:0 18px 44px rgba(33,31,27,.10);

  /* ---- ITEM 2, Aug 11 2026: ONE ESTATE H1 -----------------------------------
     MOVED to estate-chrome.css on Aug 11 2026; the four --h1-* names are
     declared there and nowhere else in the bundle.

     They cannot live in this file. phoenix.css does not @import tokens.css, by
     its own deliberate rule, so a house that consumes --h1-size from here reads
     an undefined name and its font-size declaration dies at computed-value
     time. estate-chrome.css is the sheet all three houses do import.

     The claim this comment used to make was also wrong on its facts, and the
     correction lives with the tokens: the values are the LANDING document's
     h1, not the root house's. Root's hero h1 was a flat 46px in its own serif
     and was never touched by #407; atlas's was clamp(40px,6.5vw,72px), not
     "a fixed 46px". Both are measured in the PR body.

     MIND THE PROSE IN THIS BLOCK. Everything between these braces is copied
     verbatim into public/landing/assets/landing.css by scripts/sync-tokens.mjs,
     and the landing suite scans that file's RAW TEXT for retired face names.
     Naming a retired face here, even inside a comment, fails
     "no retired face is requested by the stylesheet". */
}

:root{
  /* THE ESTATE H1, and the only two names that are genuinely estate-wide.
     Declared here rather than in tokens.css because phoenix.css does not
     @import that file and read an undefined name for its whole life. Weight
     and tracking are per-house literals; they are not shared and are not here.
     This block is copied into the landing document by scripts/sync-tokens.mjs
     along with tokens.css's, so all four surfaces consume one size. */
  --h1-size:clamp(34px,5.2vw,62px);
  --h1-leading:1.05;

  /* THE ESTATE FOOTER GROUND (register 6b, ruled Sep 3 2026). One ground on
     every house: root's landing document, /about, root's SPA routes, atlas and
     phoenix. Declared HERE and not in tokens.css for the same reason the two
     names above are: phoenix.css does not @import tokens.css by its own
     standing rule, so a footer token declared there is an undefined name on
     that house and the background declaration dies at computed-value time.
     This is the sheet all three SPA houses import, and sync-tokens.mjs copies
     this block into the landing document alongside tokens.css's, so all four
     surfaces read one declaration.

     THE VALUE IS PHOENIX'S SHIPPED FOOTER GROUND, measured off a built bundle,
     not read off a mockup. design/sep3/mock-root-v5.html draws #131210 and the
     Sep 3 prompt repeats it; neither hex is in shipped code. Phoenix measured
     rgb(20, 18, 16) and atlas rgb(15, 13, 11). Brendan ruled #141210 Sep 3:
     it is one of the values actually shipped and the only one that leaves
     phoenix unmoved. Do not "correct" it toward the mockup. */
  --footer-ground:#141210;
  /* The footer's mono strings, register 6b: #F5F1E9 at 70%. Measures 8.57:1 on
     --footer-ground, so the whole line sits at ONE strength and the dark footer
     does not need a secondary and a faint that differ only on paper. A token
     and not a literal because the static landing document and the SPA both
     carry this line, and a literal on each side is exactly the drift that put
     three grounds on one surface before 6b. */
  --footer-mono:rgba(245,241,233,.7);
}
/* <<< TOKENS */

*{margin:0;padding:0;box-sizing:border-box}

/* Oat ground, and nothing painted on it. The grid was two linear-gradients on
   this element; both are gone, and no background-image replaces them. */
body{
  background:var(--oat); color:var(--ink);
  font-family:var(--display); font-weight:500;
  font-size:17px; line-height:1.65;
  min-height:100vh; overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}

/* The wrapper owns the full viewport, and the footer strip is pinned to the
   bottom of it (Aug 10 2026).

   Prior: min-height was calc(100vh - 54px) with a matching body padding-bottom
   of 54px, which reserved the view pill's band OUTSIDE the wrapper. That worked,
   but it stacked under the footer's own 40px bottom padding, leaving 94px of
   empty below the legal links. The pill clearance now lives inside the footer's
   padding instead, so the strip sits just above the pill rather than 40px above
   the reserved band.

   The footer reaches the bottom because .center below carries margin:auto and
   absorbs the free space above it. That is a single mechanism and it already
   works; adding margin-top:auto to the footer as well would introduce a THIRD
   auto margin for flexbox to divide the free space between, which un-centres the
   hero. See the PR for the measurement. */
.hud{min-height:100vh; display:flex; flex-direction:column}
/* THE FOLD (Sep 2 2026). Header and hero own the first screen exactly as they
   did when they were the whole document: .center still centres on margin:auto,
   now inside a wrapper that is one viewport tall rather than inside .hud,
   which grew its bands. The hero centres inside it at rest; with a results panel
   open the hero is taller than one screen and the wrapper simply grows. */
.fold{min-height:100vh; display:flex; flex-direction:column}
/* An author `display` beats the UA stylesheet's [hidden]{display:none}, so the
   flex above would keep the page visible behind the machine view without this. */
.hud[hidden]{display:none}

/* ---- chrome ---------------------------------------------------------------
   Lowercase is PRESENTATIONAL: every shipped string keeps its real casing in
   source and text-transform does the work, so the copy tests are untouched and
   the register reverses by deleting these rules. The wordmark is the one
   exception and is never transformed. */

header{
  display:flex; justify-content:space-between; align-items:center;
  gap:24px; padding:28px 44px;
}
/* An anchor since Sep 3 2026, so it explicitly refuses the link paint: the
   lockup is ink and undecorated on every house, and about.css already carried
   this pair for the same reason. */
.brand{display:flex; align-items:center; gap:11px; color:inherit; text-decoration:none}
/* The mark ships at its natural 108x120 and is drawn at 22px, so it stays crisp
   on a retina screen. */
.brand .mark{flex:none; display:block; width:22px; height:auto}
/* THE WORDMARK IS ALWAYS `Classify`, CAPITALISED (§4). Not negotiable, and
   deliberately carries no text-transform. */
.brand b{font-weight:700; font-size:19px; letter-spacing:-0.01em; text-transform:none}

header nav{display:flex; align-items:center; gap:30px}
header nav a{
  color:var(--ink); text-decoration:none; font-size:15px; 
}
/* §5: everything that is not one of the two controls is a text link in ink,
   underlined on hover. No colour change, no border-colour accent. */
header nav a:hover{text-decoration:underline; text-underline-offset:4px}

/* The nav CTA. INK (Brendan, Oct 2 2026): request api access is ink on root
   and atlas, nav and closing band alike, and pine moves to the search button.
   This supersedes the Sep 2 2026 "the nav pill owns pine on every house" rule
   for root and atlas; phoenix keeps its own colours. Selected structurally so
   the shipped nav markup needs no new class. */
header nav a:last-child{
  background:var(--ink); color:var(--oat); font-weight:700;
  padding:12px 28px; border-radius:100px;
  /* THE PILL IS SIZED BY ITS LABEL AND NEVER SHRINKS. Every nav child is a flex
     item with the default flex-shrink:1, so between 641px and about 748px the
     row ran out of room and took it from this one: the label wrapped to two and
     then three lines and the box fell to 110x98, which under a 100px radius is
     a circle. flex:none keeps the width off the negotiating table and nowrap
     keeps the label on one line; the space now comes from the row's gap below.
     inline-flex so the label centres in the box once the box is content-sized. */
  display:inline-flex; align-items:center; flex:none; white-space:nowrap;
}
header nav a:last-child:hover{text-decoration:none; opacity:.88}

/* THE MENU BUTTON (Oct 5 2026). Mobile only; see the 720 block. The same
   three-bar glyph as EstateNav's .est-burger on atlas and phoenix, drawn
   inside a 44px box so the touch target is comfortable while the glyph keeps
   its 26x18. The negative right margin puts the glyph, not the box, on the
   header's right padding. */
.burger{
  display:none; position:relative; flex:none;
  width:44px; height:44px; margin-right:-9px;
  background:none; border:0; padding:0; cursor:pointer; color:var(--ink);
}
.burger i{
  position:absolute; left:9px; right:9px; height:2px; border-radius:1px;
  background:currentColor; transition:transform .25s ease, opacity .2s, top .25s;
}
.burger i:nth-child(1){top:13px}
.burger i:nth-child(2){top:21px}
.burger i:nth-child(3){top:29px}
header.open .burger i:nth-child(1){top:21px; transform:rotate(45deg)}
header.open .burger i:nth-child(2){opacity:0}
header.open .burger i:nth-child(3){top:21px; transform:rotate(-45deg)}
@media (prefers-reduced-motion:reduce){ .burger i{transition:none} }

header nav a:focus-visible, .burger:focus-visible, .paths a:focus-visible, .pill:focus-visible,
.text-link:focus-visible, .faq summary:focus-visible, .rec summary:focus-visible{
  outline:2px solid var(--ink); outline-offset:3px;
}

/* ---- hero ---------------------------------------------------------------- */

/* Critic 2, gap 3: the hero ends on a beat. The door pills sit 24px under the
   results panel and the hero carries 96px of bottom padding, so its terminus
   answers the 88px band padding below rather than pinning the pills to the
   seam. Top padding is unchanged; .center still centres on margin:auto. */
.center{margin:auto; width:min(720px,92vw); text-align:center; padding:40px 0 96px}

h1{
  /* The estate h1: size and leading are the shared tokens, synced into the
     block above from src/estate-chrome.css. Aug 11 2026: weight and tracking
     go back to LITERALS. They were never estate-wide -- atlas shipped 800 and
     root's house ships the serif 400 -- so the shared names were dropped rather
     than left implying an agreement that does not exist. (Atlas has since moved
     to 700 with the §4 addendum below, so the WEIGHT half of that divergence is
     half closed; tracking still diverges three ways and the literal stays.)

     This 700 is the PAYOFF weight. It is carried by the h1 itself so the
     unwrapped payoff clause inherits it without a span. */
  font-weight:700; font-size:var(--h1-size);
  letter-spacing:-0.025em; line-height:var(--h1-leading);
  text-transform:lowercase;
}
/* The em is a shipped markup hook, not a colour slot. It used to carry pine;
   pine is now the CTA pill and nothing else, so this renders as plain ink.
   §4 addendum: that is exactly what the payoff clause needs, so the em doubles
   as the payoff hook here and gains nothing new. */
h1 em{font-style:normal; color:inherit}

/* ---- THE HERO EMPHASIS RULE (§4 addendum) ---------------------------------
   First clause 500, payoff 700. Only the lede carries a hook; see the h1 rule
   above for why the payoff does not need one.

   This is a HAND-MAINTAINED TWIN of .h1-lede in src/estate-chrome.css, not a
   synced copy: sync-tokens.mjs replicates the :root token blocks only, and this
   document ships no estate bundle (its suite pins its stylesheet list to
   landing.css alone), so it cannot @import the shared sheet. If the shared rule
   changes, change this one too. Archivo 500 is already requested at the top of
   this file, so the axis is loaded and nothing is synthesised. */
.h1-lede{font-weight:500}

.lede{
  margin:18px auto 34px; max-width:520px;
  font-size:18px; line-height:1.65; color:var(--ink);
}

/* THE INSTRUMENT (§5) — white fill, fully rounded, soft wide shadow, no border.
   The submit button is PINE (Brendan, Oct 2 2026): search and build own pine
   on root and atlas, and request api access is ink. Replaces the Sep 2 2026
   ink-search line. Focus rings the whole bar in pine, so a keyboard reader
   sees where Enter goes. */
.instrument{
  display:flex; background:var(--white);
  border:0; border-radius:100px; overflow:hidden;
  box-shadow:var(--sh);        /* §5, the one soft elevation */
}
.instrument input{
  flex:1; border:0; background:transparent; min-width:0;
  font-family:var(--mono); font-size:15px; padding:20px 28px; color:var(--ink);
}
/* Placeholder: ink thinned toward white, 5.9:1 on the white bar (Oct 2 2026;
   --dim was 3.73). Distinct from typed text, and above the 4.5 floor. */
.instrument input::placeholder{color:color-mix(in srgb, var(--ink) 72%, var(--white))}
.instrument input:focus{outline:none}
/* Focus deepens the same soft shadow rather than turning it gold. */
.instrument:focus-within{box-shadow:0 20px 50px rgba(33,31,27,.16); outline:2px solid var(--pine); outline-offset:4px}
.instrument button{
  border:0; background:var(--pine); color:var(--oat-2);
  font-family:inherit; font-weight:700; font-size:16px;
  padding:0 34px; cursor:pointer; 
}
.instrument button:hover:not([disabled]){opacity:.9}
.instrument button[disabled]{opacity:.55; cursor:default}

/* THE RESULTS PANEL (root v5, Sep 3 ruling). The answer opens under the bar,
   in place, in the mockup's card shape: chip ground, 16px radius, the one
   elevation, hairline rows. The hero stays whole around it; results mode
   (the collapse to a top bar) is retired with this layout. The panel is CAPPED
   and scrolls inside itself, so ten results never push the door pills under
   the fold. */
.out{
  max-width:720px; margin:26px auto 0; text-align:left;
  background:var(--chip); border-radius:16px; box-shadow:var(--sh);
  max-height:380px; overflow-y:auto;
}
/* The panel header: the status line, and the way out at its right (Sep 3 2026).
   The row is baseline-aligned and the glyph's line-height is 1, so the header's
   height is still the status line's own and nothing below it moves. The x takes
   the mono of the line it sits beside and a dim-to-ink hover: no new token, no new colour, and the count of coloured things on the
   page is unchanged. */
.out-head{
  display:flex; align-items:baseline; justify-content:space-between; gap:16px;
  padding:12px 18px 12px 22px; border-bottom:1px solid var(--hair);
  position:sticky; top:0; background:var(--chip);
}
.out-close{
  flex:none; background:none; border:0; padding:0; cursor:pointer;
  font-family:var(--mono); font-weight:400; font-size:16px; line-height:1;
  color:var(--ink);
}
.out-close:hover{color:var(--ink)}
/* Ink, not --dim (Oct 2 2026): the line carries the failure and rate-limit
   messages now, and --dim measures 3.55:1 on --chip. */
.out-status{font-family:var(--mono); font-size:13px; color:var(--ink)}
/* A row is url in mono, the title, and a one-line description. */
.out-row{display:block; padding:16px 22px; border-bottom:1px solid var(--hair); text-decoration:none}
.out-row:last-child{border-bottom:none}
.out-url{display:block; font-family:var(--mono); font-size:12px; color:var(--ink); overflow-wrap:anywhere}
.out-title{display:block; font-size:16px; font-weight:700; color:var(--ink); margin-top:3px}
.out-row:hover .out-title{text-decoration:underline; text-underline-offset:3px}
.out-desc{
  display:block; font-size:14px; color:var(--ink); margin-top:4px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
/* The panel ends on the request path in every state (Oct 2 2026). Sticky, so
   ten rows of results never scroll the next step out of the capped panel. */
.out-foot{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:14px 18px 14px 22px; border-top:1px solid var(--hair);
  position:sticky; bottom:0; background:var(--chip); font-size:14px;
}
.out-foot .pill{padding:9px 20px; font-size:13px}

/* PATH CHIPS (§5) — soft-shadowed pills with dim mono numerals. The hard 2px
   border and the 3px offset shadow are retired, and the numerals are dim, never
   pine. Fill moved from --white to --chip on Aug 10 2026: a warmer white that
   sits on oat without reading as a second ground the way pure white did. */
.paths{display:flex; gap:14px; justify-content:center; margin-top:24px; flex-wrap:wrap}
.paths a{
  display:flex; align-items:center; gap:9px;
  background:var(--chip); color:var(--ink); text-decoration:none;
  font-size:15px; font-weight:700; padding:12px 26px;
  border:0; border-radius:100px;
  box-shadow:var(--sh);        /* was a bespoke 0 10px 26px /.07 */ 
}
.paths a:hover{box-shadow:0 14px 32px rgba(33,31,27,.12)}
.paths a:focus-visible{outline:2px solid var(--ink); outline-offset:3px}
/* `.paths a span` deleted Aug 11 2026 with the 01/02 numerals it styled. */

/* ---- footer --------------------------------------------------------------- */

/* THE FOOTER SITS IN THE PILL'S BAND (ruled Aug 11 2026).

   SUPERSEDES the "further down" ruling from #401, which added 160px of
   clearance and pushed the strip below the fold. That value is withdrawn:
   margin-top is 0 and the bottom padding drops 76px -> 26px, so the strip sits
   on the same vertical band as the fixed view pill and is visible in the
   initial viewport at 1440x900. The pill is centred and the strip's two blocks
   are flush left and right, so they share the band without colliding.

   WHY MARGIN AND NOT PADDING. .hud is a 100vh flex column, so the strip was
   already flush to the viewport bottom and could not move "down" within it;
   what it could do is move BELOW the fold. 160px of top margin makes the
   document taller than the viewport, so the strip now sits below the first
   screen and is scrolled to rather than sharing the opening frame.

   The bottom padding rises 54px -> 76px for a mechanical reason, not a taste
   one: the view pill grew ~8px taller when it took the chips' 12px padding, and
   the pin assertion forbids the strip overlapping it. 76px keeps the measured
   clearance positive with headroom.

   The J4-era pin assertion in landing.spec.ts moves with this in the same
   commit; it measures AT THE DOCUMENT BOTTOM, so "flush" still holds. */
/* THE ESTATE FOOTER GROUND, register 6b, ruled Sep 3 2026. This strip used to
   sit on the page ground with ink type, which made root's landing and /about
   the two surfaces whose footer was not the estate's. One ground on all four
   houses now, from --footer-ground, which sync-tokens.mjs copies into the block
   at the top of this file from estate-chrome.css. Nothing here is hand-typed.

   VERTICAL PADDING IS DELIBERATELY UNCHANGED at 64/26. 6b names landing's 44px
   side padding and font sizes as the estate's measurements and says nothing
   about the vertical, and the mockup's 30px is a re-layout rather than a skin.
   Flagged for the root v5 session rather than taken here. */
footer{
  display:flex; justify-content:space-between; align-items:flex-end;
  flex-wrap:wrap; gap:18px; padding:64px 44px 26px; margin-top:0;
  font-family:var(--mono); font-size:12.5px;
  background:var(--footer-ground); color:var(--footer-mono);
}
footer .agent{max-width:460px}
/* Kicker role (§4): mono 400, uppercase, 0.3em. Uppercase is presentational; the
   shipped string is "Agents:" and stays that way in source.

   Inline as of Aug 10 2026, when the block collapsed to one line. The
   letterspacing stays on the LABEL only: it is a display treatment, and running
   it across the curl command would both hurt legibility and, with the uppercase,
   corrupt a string the reader is meant to copy and run. */
/* No margin-right: the separation is a real space in the markup plus the 0.3em
   letterspacing trailing the colon. A CSS gap would look identical but leave
   innerText reading "AGENTS:curl …", and this line is meant to be copied. */
footer .agent b{
  display:inline;
  font-family:var(--mono); font-weight:400; font-size:12px;
  letter-spacing:0.3em; text-transform:uppercase; color:var(--footer-mono);
}
footer code{font-family:var(--mono); color:var(--footer-mono)}
footer nav a{
  color:var(--footer-mono); margin-left:22px; text-decoration:none;
  font-size:14.5px; 
}
footer nav a:hover{text-decoration:underline; text-underline-offset:4px}
footer .copyright{margin-left:22px}

/* ---- machine view and the human/machine toggle ---------------------------- */

.machine-view{max-width:820px; margin:0 auto; padding:24px 16px 0; text-align:left}
.machine-view pre{
  margin:0; font-family:var(--mono); font-size:12.5px; line-height:1.6;
  color:var(--ink); white-space:pre-wrap; word-wrap:break-word;
}

/* LOCKED: horizontal centre, bottom of the viewport, identical on every surface
   across all three estates. No grip, no drag, no stored position. Restyled to
   the soft register; the position, markup and storage key are untouched. */
/* THE VIEW PILL, recoloured and lifted (ruled Aug 11 2026).

     ground      var(--white) -> var(--pill) #E7E1D5
     elevation   bespoke 0 10px 26px /.12 -> var(--sh), the §5 value
     geometry    padding 8px 16px -> 12px 26px, matching the path chips

   The token is consumed, never the literal, so the pill cannot drift from the
   ground it was ruled to sit on. Radius was already the chips' 100px. */
.viewpill{
  position:fixed; left:50%; bottom:18px; transform:translateX(-50%);
  background:var(--pill); border:0; border-radius:100px;
  box-shadow:var(--sh);
  padding:12px 26px; font-family:var(--mono); font-size:11px;
  color:var(--ink); display:flex; align-items:center; gap:8px; z-index:50;
}
.viewbar-opt input{accent-color:var(--pine); margin:0}
/* --dim-2, not --dim: --dim on the pill's --pill ground measures 2.86 and fails
   even the decorative tier. Kept in step with estate-chrome.css, where the same
   fix carries the full reasoning. */
.viewbar-label{font-weight:400; color:var(--ink)}
.viewbar-opt{display:inline-flex; align-items:center; gap:3px; cursor:pointer}

/* ---- responsive, down to 375px ---- */

/* JUST ABOVE THE MENU (Oct 5 2026). Sentence-case labels are a few pixels
   wider than the lowercase ones were, and at 721 the row overran by 2px. The
   space comes off the link gap only: the side padding is the page's left
   rail at this width and stays 44. */
@media (min-width:721px) and (max-width:820px){
  header nav{gap:20px}
}

/* THE MOBILE MENU (Oct 5 2026). At 720 and below the header is the estate's
   mobile bar: the lockup left, the menu button right, and the links plus the
   request-access pill collapsed behind it. Replaces the two earlier layouts
   here (a squeezed row from 641 to 720, a stacked and wrapping nav below 641),
   which left the CTA on the bar and pushed the hero down. 720 is atlas and
   phoenix's breakpoint (estate-chrome.css), so all three houses switch at one
   width. The body CTAs are untouched.

   THE SIDE PADDING IS THE RAIL'S. 22 is what `.below .wrap` changes to at this
   same 720, so the logo and the first content block below it start at the same
   x at every width. Pinned by "the header logo and the content below it share
   one left rail" in landing.spec.ts. */
@media (max-width:720px){
  header{flex-wrap:wrap; gap:0 16px; padding:20px 22px}
  .burger{display:block}
  header nav{display:none}
  header.open nav{
    display:flex; flex-direction:column; align-items:flex-start; gap:16px;
    width:100%; margin-top:14px; padding:16px 0 6px;
    border-top:1px solid var(--hair);
  }
  /* links take the drawer size; the pill keeps its one size (as .est-cta does) */
  header nav a:not(:last-child){font-size:16px}
}

@media (max-width:640px){
  .instrument input{font-size:14px; padding:16px 20px}
  .instrument button{padding:0 22px; font-size:15px}
  .paths{gap:10px; margin-top:40px}
  .paths a{padding:11px 20px; font-size:14px}
  /* Same bottom-padding rule as desktop: the pill's band is reserved inside the
     footer, so the strip clears it without the wrapper stopping short. */
  footer{flex-direction:column; align-items:flex-start; padding:48px 22px 54px}
  footer nav a:first-child{margin-left:0}
}


/* ---- below the fold (Oct 2 2026, reviewed proposal) ------------------------
   Five bands, no kicker labels, no hairline dividers between sections; the
   ground change is the separator (§6). The ladder, top to bottom, with
   RESULTS_BAND off: s-proof oat-2 / s-routes oat / s-faq oat-2 / s-close oat.
   With the flag on, s-results (sand, the pine band inside it) follows s-proof.
   h2 is Archivo 500: on root 700 is reserved for the h1 payoff. */

.below section{padding:88px 0; background:var(--oat)}
.below section.oat2{background:var(--oat-2)}
.below section.sand{background:var(--sand)}
/* The lightest ground on the page, the privacy band only. */
.below section.light{background:var(--chip)}
.below .wrap{max-width:1180px; margin:0 auto; padding:0 44px}
/* Critic 1, gap 1: the FAQ's narrow measure keeps the page's left edge rather
   than centring on its own axis, so the block sits on the grid every other
   left-aligned band uses. The list itself is capped, not the wrapper. */
.below .wrap-n{max-width:1180px}

.below h2{
  font-weight:500; font-size:34px; line-height:1.12; letter-spacing:-0.01em;
  text-transform:lowercase;
}
.below h2.keep-case{text-transform:none}
.below h3{font-weight:500; font-size:20px; line-height:1.25; text-transform:lowercase}
.below .sub{font-size:19px; line-height:1.55; max-width:640px; margin:20px 0 0}
.below p{margin:0}

/* 1. a page, with more context: copy beside the record card.

   SECONDARY TEXT IS INK in these bands (Oct 2 2026). --dim measures 3.11:1 on
   oat and --dim-2 3.83 to 4.36:1 on the grounds used here, both under the 4.5
   body floor, and the register has no darker neutral; hierarchy comes from
   size and weight instead. Decorative mono stays where it was. */
.proof-grid{display:grid; grid-template-columns:.85fr 1.15fr; gap:88px; align-items:center}
.proof-copy p{margin:20px 0 22px; max-width:440px; font-size:18px; line-height:1.6; color:var(--ink)}
.text-link{color:var(--ink); text-decoration:underline; text-underline-offset:4px; font-size:15px; }

/* The record card: the record as a definition list, its JSON behind a
   disclosure. Height follows content now: the rotation only changes the
   classification lines, and the band is centred on the copy beside it. */
.rec{background:var(--chip); border-radius:16px; box-shadow:var(--sh); padding:26px 30px}
.rec .url{font-family:var(--mono); font-size:12px; color:var(--ink); overflow-wrap:anywhere}
.rec .rec-title{font-size:21px; font-weight:500; line-height:1.3; margin:14px 0 0; text-transform:none}
.rec dl{margin:18px 0 0}
.rec dl > div{display:grid; grid-template-columns:120px 1fr; gap:16px; border-top:1px solid var(--hair); padding:13px 0; font-size:14px}
.rec dt{color:var(--ink)}
.rec dd{margin:0}
.rec .rec-value{font-family:var(--mono); font-size:13px; line-height:1.8}
.rec details{border-top:1px solid var(--hair); padding-top:16px}
.rec summary{font-size:13px; cursor:pointer; }
.rec .code{margin-top:14px; height:auto; box-shadow:none}

/* The code pane, the only dark surface in the register (§9). */
.code{
  margin:0; background:var(--code-bg); color:var(--code-fg); border-radius:10px;
  padding:18px 20px; font-family:var(--mono); font-size:12px; line-height:1.75;
  white-space:pre-wrap; overflow-wrap:anywhere;
}

/* the results band, behind RESULTS_BAND. Pine as a BAND, never a button
   (ruled Sep 2 2026). The rules stay so the flag-on build still paints. */
.pineband{background:var(--pine); color:var(--oat-2); border-radius:18px; padding:56px 48px}
.proof{display:grid; grid-template-columns:3fr 1fr; gap:48px; margin-top:32px}
.proof h3{font-size:15px; font-weight:500; opacity:.8; margin-bottom:18px}
.stats{display:grid; grid-template-columns:repeat(3,1fr); gap:24px}
.stats.one{grid-template-columns:1fr}
.stats b{display:block; font-size:56px; font-weight:700; line-height:1; letter-spacing:-0.02em}
.stats span{display:block; font-size:14px; opacity:.85; margin-top:8px; text-transform:lowercase}

/* 2. the two routes, split by a hairline. */
.routes{display:grid; grid-template-columns:1fr 1fr; gap:72px}
.route + .route{border-left:1px solid var(--hair); padding-left:72px}
.route h2{max-width:400px}
.route p{margin:18px 0 20px; max-width:430px; font-size:17px; color:var(--ink)}

/* 3. the access questions: details/summary, first open, plus and minus in mono */
.faq-grid{display:grid; grid-template-columns:.8fr 1.2fr; gap:80px}
.faq details{border-top:1px solid var(--hair); padding:18px 0}
.faq details:last-child{border-bottom:1px solid var(--hair)}
.faq summary{
  cursor:pointer; font-weight:500; font-size:18px; list-style:none;
  display:flex; justify-content:space-between; gap:24px; align-items:baseline;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:'+'; font-family:var(--mono); color:var(--ink); flex:none}
.faq details[open] summary::after{content:'\2013'}
.faq p{margin:12px 0 0; max-width:560px; font-size:16px; color:var(--ink)}

/* 4. the close: one ink pill, the same destination as the nav pill. */
.close{text-align:center}
.close p{margin:20px auto 28px; max-width:460px; color:var(--ink)}
.pill{
  display:inline-flex; align-items:center; justify-content:center;
  font-size:15px; font-weight:700; padding:12px 28px; border-radius:100px;
  text-decoration:none;  white-space:nowrap;
}
.pill.ink{background:var(--ink); color:var(--oat)}
.pill.ink:hover{opacity:.88}

@media (max-width:720px){
  .below section{padding:60px 0}
  .below .wrap{padding:0 22px}
  .below h2{font-size:28px}
  .proof-grid, .routes, .faq-grid{grid-template-columns:1fr; gap:30px}
  .faq-grid{gap:18px}
  .rec{padding:22px 20px}
  .rec dl > div{grid-template-columns:96px 1fr; gap:12px}
  .route + .route{border-left:0; border-top:1px solid var(--hair); padding-left:0; padding-top:36px}
  .pineband{padding:40px 24px; border-radius:14px}
  .proof{grid-template-columns:1fr; gap:32px}
  .stats b{font-size:32px}
  .out-foot{flex-wrap:wrap}
  /* the desktop line break would strand one word on a phone. Every one of
     these <br>s has a real space before it in the markup (Oct 5 2026): with
     the break hidden, that space is the only thing between the two words, and
     without it they ran together ("contextinto"). On desktop a trailing space
     before a line break collapses and renders nothing. */
  .close p br, .route h2 br{display:none}
}

/* The Oct 20 2026 homepage refinement (rules scoped under body.home) left
   this file on Oct 23 2026: the homepage has its own sheet, home.css, and
   no longer loads this one. /about is the only document that does. */