/* classify.ai homepage (Oct 24 2026): the context-first design, on the site's chrome.

   Source of truth for the look: classify-thrad-concept/context-first.html
   (Oct 24 2026). That file stacks some 5,000 lines of passes and overrides;
   this sheet is its final rendered state, measured from the rendered reference
   and restated once, per component, on the tokens below.

   ONLY THE HOMEPAGE LOADS THIS SHEET. /about keeps landing.css; atlas and
   phoenix keep their own houses. Nothing here reaches them.

   Type (ruled Oct 23 2026, homepage only; design-guidelines-amble.md §4a):
   Archivo for every sans line, JetBrains Mono for URLs, labels, code and ASCII,
   and Georgia for the design's editorial accents only (the hero's "the noise",
   the walkthrough title, page titles and excerpts, the comparison and outcome
   headings, the supporting-text quote and the explorer's page list).

   Grounds: oatmeal #EFEAE2 (--oat), the lighter paper band for the demo, warm
   gray #DCD8D1 (--stone) for the explorer, solid pine #1E4126 (--pine) for the
   close, and film charcoal #181B1F (--charcoal) for the footer, the ASCII cards
   and the active controls. Radii: cards 12px, insets 8px, pills fully rounded. */

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

/* >>> TOKENS */
: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 SHARED HEADING SCALE (Oct 24 2026). One responsive scale for the
     titles on the three home pages, classify.ai, atlas and phoenix, taken from
     the approved classify.ai homepage: its hero h1, its section h2 and its
     card h3, as home.css declared them. Size, leading and tracking; family,
     weight, colour and the serif accents stay each house's own. Tracking is
     shared because at the hero size a house's looser tracking re-broke atlas's
     two-clause headline into five lines beside its portrait. Titles are
     sentence case and carry no punctuation (the Aug 11 lowercase rule is
     retired with this). --h1-size above still sizes root's SPA routes
     (/signup, /signin and the rest), which this scale does not reach. */
  --type-hero:clamp(60px,7.4vw,106px);
  --type-hero-leading:1.01;
  --type-section:clamp(38px,4.6vw,64px);
  --type-section-leading:1.06;
  --type-card:clamp(23px,1.95vw,28px);
  --type-card-leading:1.12;
  --type-display-tracking:-.055em;
  --type-card-tracking:-.035em;

  /* 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 */

/* The homepage layer. Every colour the page uses is named here once; the
   components below consume names, never literals. */
:root{
  --serif:Georgia,'Times New Roman',serif;

  /* grounds */
  --paper:#F8F5EF;        /* the page-level band (#try) */
  --paper-warm:#FFFCF6;   /* the chosen half of a segmented control */
  --stone:#DCD8D1;        /* the explorer band (warm gray) */
  --scope:#E9E4DB;        /* the domain and subdomain cards */
  --well:#F3EFE7;         /* the demo's result panel */
  --excerpt:#F6F3EB;      /* the source excerpt */
  --capture:#EEEAE2;      /* behind the page capture while it loads */
  --chip-off:#E4DFD5;     /* an unchosen pill on the demo */
  --chip-cloud:#D9D4CB;   /* an unchosen pill on the explorer */

  /* the dark surfaces: footer, ASCII cards, chosen pills, the JSON view */
  --charcoal:#181B1F;
  --json:#202429;
  --pine-deep:#102419;    /* the Alpine Dawn ground */

  /* type */
  --muted:#5F685A;        /* sage secondary copy on paper and white */
  --muted-cool:#60656A;
  --label:#626B5D;        /* small labels */
  --leaf:#304A35;         /* headings and values in the green register */
  --leaf-link:#315B39;
  --on-dark:#F7F2E8;
  --on-dark-2:#D6CFC1;
  --on-pine:#E0E5DA;
  --guide-dim:#CCD6C1;
  --ascii:#D8DDC6;
  --json-ink:#DCE2E5;
  --field-rule:#D4CFC5;

  /* the supporting-passage buttons */
  --passage:#E9E6DA;
  --passage-on:#D2DDC0;
  --passage-rule:#49633D;
  --focus-guide:#8D9F78;

  /* geometry */
  --r-card:12px;
  --r-inset:8px;
  --r-pill:999px;
  --sh-card:0 15px 50px rgba(31,33,35,.03);
  --sh-panel:0 18px 50px rgba(28,48,32,.10);
  --sh-field:0 8px 25px -20px rgba(57,58,44,.33);
  --sh-stage:0 24px 64px rgba(8,19,12,.18);
}

/* ---- base ---------------------------------------------------------------- */

*{box-sizing:border-box}
html{scroll-behavior:smooth; scroll-padding-top:95px}
body{margin:0; background:var(--oat); color:var(--ink); font:400 16px/1.55 var(--display)}
button,input,textarea{font:inherit}
button{cursor:pointer; touch-action:manipulation}
a{color:inherit; text-decoration:none; touch-action:manipulation}
a:hover{text-decoration:underline; text-underline-offset:5px}
button:hover{filter:brightness(.94)}
:is(a,button,summary):focus-visible{outline:3px solid var(--pine); outline-offset:5px}
h1,h2,h3,p{margin:0}
h1,h2,h3{font-weight:500; letter-spacing:-.055em; line-height:1.02}
/* Sizes come from the shared heading scale (--type-*, src/estate-chrome.css),
   which was taken from these three rules (Oct 24 2026). Every section h2 and
   every card or subsection h3/h4 on the page reads the same step; the footer's
   column labels are not titles and keep their own size. */
h1{font-size:var(--type-hero); line-height:var(--type-hero-leading)}
h2{font-size:var(--type-section); line-height:var(--type-section-leading)}
h3{font-size:var(--type-card); line-height:var(--type-card-leading); letter-spacing:-.035em}
p{max-width:620px}
img{max-width:100%}
[hidden]{display:none!important}
.hud[hidden]{display:none}

.wrap{max-width:1376px; margin:0 auto; padding:0 56px}
.skip{position:fixed; top:-100px; left:12px; z-index:100; padding:15px; background:var(--paper); color:var(--ink)}
.skip:focus{top:10px}
.sr-only{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0}

@media (max-width:1050px){ .wrap{padding:0 30px} }
@media (max-width:760px){ .wrap{padding:0 23px} }
@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} }

/* ---- controls ------------------------------------------------------------ */

.btn{
  display:inline-flex; align-items:center; justify-content:space-between; gap:25px;
  padding:13px 23px; border:1px solid var(--ink); border-radius:var(--r-pill);
  background:var(--ink); color:var(--paper); font-size:13px; line-height:1.4;
}
.btn:hover{text-decoration:none}
.btn.light{background:var(--on-dark); border-color:var(--on-dark); color:var(--pine)}
.btn.outline{background:transparent; color:var(--ink)}
.textlink{font-size:13px; color:var(--pine); border-bottom:1px solid currentColor; padding-bottom:4px}
.actions{display:flex; flex-wrap:wrap; align-items:center; gap:20px}
.small-button{padding:7px 0; border:0; background:none; color:inherit; font-size:11px; text-decoration:underline}


/* ---- header -------------------------------------------------------------- */

.top{position:sticky; top:0; z-index:10; background:var(--oat)}
header{height:86px; display:flex; align-items:center; justify-content:space-between; gap:25px}
.brand{display:flex; align-items:center; gap:11px; color:inherit}
.brand:hover{text-decoration:none}
.brand .mark{flex:none; display:block; width:22px; height:auto}
.brand b{font-weight:700; font-size:19px; letter-spacing:-0.01em}
header nav{display:flex; align-items:center; gap:27px; font-size:13px}
header nav a:last-child{
  display:inline-flex; align-items:center; gap:25px; padding:13px 23px;
  border-radius:var(--r-pill); background:var(--ink); color:var(--paper);
}
/* one size everywhere, the open drawer included (the pill is not a drawer link) */
header nav a:last-child{font-size:13px; white-space:nowrap; flex:none}
header nav a:last-child:hover{text-decoration:none; filter:brightness(1.2)}

.burger{
  display:none; position:relative; flex:none; width:44px; height:44px; margin-right:-9px;
  padding:0; border:0; background:none; 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} }

@media (max-width:1050px){ header nav{gap:18px} }
@media (max-width:760px){ header{height:74px} }
/* THE MOBILE MENU is the estate's (Oct 5 2026, mobile-nav.spec.ts): the burger
   at 720 and below on every house, and the drawer opens in the flow under the
   bar, pushing the page down rather than covering it. */
@media (max-width:720px){
  header{flex-wrap:wrap; gap:0 16px; height:auto; min-height:74px}
  .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:4px; padding:16px 0 18px; font-size:16px;
  }
}

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

/* Centred: the headline, the lede, the search field and the two audience
   links, in one column no wider than the field. */
.hero{display:flex; flex-direction:column; align-items:center; max-width:920px; padding-top:74px; padding-bottom:72px; text-align:center}
.hero h1 em{font-family:var(--serif); font-weight:400; letter-spacing:-.065em}
.hero .intro{max-width:610px; margin:26px auto 30px; font-size:18px; line-height:1.6}

.hero-search{
  display:flex; align-items:center; gap:15px; width:min(690px,100%); padding:9px 10px 9px 23px;
  border:1px solid var(--field-rule); border-radius:var(--r-pill); background:var(--white); box-shadow:var(--sh-field);
}
/* The field rings when its input has focus; the Search button keeps its own
   ring, so a keyboard reader can tell the two apart, and a mouse press on
   Search leaves no ring at all. */
.hero-search:has(input:focus-visible){outline:3px solid var(--pine); outline-offset:4px}
.hero-search input:focus-visible{outline:0}
.hero-search button:focus-visible{outline-offset:3px}
.hero-search svg{flex:none; color:#72786C}
.hero-search input{
  flex:1; min-width:0; padding:11px 0; border:0; outline:0; background:transparent;
  color:#25372A; font-size:15px; text-align:left;
}
.hero-search input::placeholder{color:#6D7268}
.hero-search input::-webkit-search-cancel-button{display:none}
.hero-search button{
  flex:none; padding:15px 24px; border:0; border-radius:var(--r-pill);
  background:var(--pine); color:#F5F1E8; font-size:14px; line-height:1;
}
.search-response{max-width:610px; margin-top:15px; font-size:13px; color:#5A6253}
.hero-audiences{display:flex; justify-content:center; gap:38px; margin-top:24px; font-size:14px}
.hero-audiences a{padding:6px 0}

@media (max-width:760px){
  .hero{padding-top:46px; padding-bottom:48px}
  .hero .intro{font-size:17px}
  .hero-search{gap:10px; padding-left:16px}
  .hero-search button{padding:14px 18px}
  .hero-audiences{gap:24px}
}

/* THE RESULTS PANEL (restored Oct 24 2026 with the search). The panel the
   search has always opened under the bar, in place: chip ground, 16px radius,
   the one elevation, hairline rows, capped so ten results scroll inside it
   rather than pushing the page down. The rules are landing.css's, at the bar's
   width; the only change is the request link, which is this design's .btn. */
.hero-search button[disabled]{opacity:.55; cursor:default}
.out{
  width:min(690px,100%); margin:22px auto 0; text-align:left;
  background:var(--chip); border-radius:16px; box-shadow:var(--sh);
  max-height:380px; overflow-y:auto;
}
.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-status{font-family:var(--mono); font-size:13px; color:var(--ink)}
.out-row{display:block; padding:16px 22px; border-bottom:1px solid var(--hair); color:var(--ink); text-decoration:none}
.out-row:hover{text-decoration: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;
}
.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 .btn{padding:9px 20px}
/* ON A PHONE (Oct 24 2026) the view pill, fixed at bottom centre, sat over the
   panel's last row and covered Request API access. Below 760 the panel stops
   scrolling inside itself and runs its full length in the page, so its last
   row can stick to the VIEWPORT instead of to the panel: it rides just above
   the pill while the results scroll past, and settles at the panel's foot when
   the panel ends. --pill-clear is the pill's bottom offset (18px), its height
   (about 41px) and a 13px gap, plus the same safe-area inset the pill takes.
   The header row stops being sticky here, so it cannot slide under the site
   header. Above 760 the button sits right of the pill and nothing changes. */
@media (max-width:760px){
  .out{max-height:none; overflow:visible}
  .out-head{position:static; border-radius:16px 16px 0 0}
  .out-foot{flex-wrap:wrap; bottom:calc(72px + env(safe-area-inset-bottom, 0px)); border-radius:0 0 16px 16px}
  /* the panel has only just entered at the bottom: the row waits (landing.js) */
  .out.out-peek .out-foot{visibility:hidden}
}

/* ---- film ---------------------------------------------------------------- */

/* The frame takes the video's own shape (1920x1080) from the markup's width
   and height, so the picture fills it edge to edge: no bars, no crop. */
.film{padding-bottom:70px}
.film-frame{position:relative; overflow:hidden; border-radius:var(--r-card); background:var(--charcoal)}
.film-video{display:block; width:100%; height:auto; aspect-ratio:1920/1080; object-fit:contain; background:var(--charcoal)}
.film-video:focus-visible{outline:2px solid var(--pine); outline-offset:3px}
.film-play{
  position:absolute; left:24px; bottom:24px; display:inline-flex; align-items:center; gap:10px;
  padding:11px 20px 11px 14px; border:0; border-radius:var(--r-pill);
  background:rgba(245,241,233,.94); color:var(--ink); font:700 15px/1.2 var(--display);
}
.film-play:hover{background:var(--oat-2); filter:none}
.film-play:focus-visible{outline:2px solid var(--oat-2); outline-offset:3px}
.film-play-icon{position:relative; flex:none; width:22px; height:22px; border-radius:50%; background:var(--ink)}
.film-play-icon::after{
  content:''; position:absolute; left:8px; top:6px; border-style:solid;
  border-width:5px 0 5px 8px; border-color:transparent transparent transparent var(--oat-2);
}
@media (max-width:760px){
  .film{padding-bottom:50px}
  .film-play{left:12px; bottom:12px; padding:9px 16px 9px 11px; font-size:14px}
}

/* ---- bands --------------------------------------------------------------- */

.band{padding:90px 0}
.band-paper{background:var(--paper)}
.band-stone{background:var(--stone)}

.section-head{display:flex; align-items:end; justify-content:space-between; gap:35px; margin-bottom:45px}
.section-head p{max-width:330px; font-size:14px; color:var(--muted)}
@media (max-width:760px){
  .band{padding:60px 0}
  .section-head{flex-direction:column; align-items:flex-start; gap:18px; margin-bottom:32px}
}

/* ---- #try: page level contextual intelligence --------------------------- */

#try{padding:80px 0 95px}
#try .section-head{display:grid; grid-template-columns:minmax(0,1fr) 440px; align-items:end; gap:55px; margin-bottom:35px}
#try .section-head h2{max-width:700px}
#try .section-head p{max-width:360px; padding-bottom:4px; font-size:15px; line-height:1.65; color:var(--muted)}
/* Oct 25 2026: the link to the guide sits on its own line under the lede, never broken across two */
#try .section-head p .textlink{display:block; width:fit-content; margin-top:12px; line-height:1.4}

/* Domain, subdomain, full path: three cards, the page one in pine. The arrow
   is a drawn connector, not a glyph, and turns downward when the cards stack. */
.scopes{display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin:0 0 34px; padding:0; list-style:none}
.scopes li{padding:22px 23px; border-radius:var(--r-card); background:var(--scope)}
.scopes h3{display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:13px; font-weight:400; font-size:var(--type-card); line-height:var(--type-card-leading); letter-spacing:-.025em; color:var(--leaf)}
.scopes p{font-size:13px; line-height:1.65; color:var(--muted)}
.scope-arrow{flex:none; width:22px; height:12px; fill:none; stroke:#6B7A62; stroke-width:1.3}
.scopes .scope-page{background:var(--pine)}
.scopes .scope-page h3{color:#F4EFE5}
.scopes .scope-page p{color:#DBE0D0}

/* The demo: a pine walkthrough strip, a page bar, then the page and its context. */
.demo{overflow:hidden; border-radius:var(--r-card); background:var(--white); box-shadow:var(--sh-card)}
.demo-guide{display:flex; align-items:center; justify-content:space-between; gap:30px; padding:28px 30px; background:var(--pine); color:#F5F0E6}
.guide-progress{display:block; margin-bottom:10px; font-size:11px; color:var(--guide-dim)}
.guide-copy h3{margin-bottom:11px; font:400 var(--type-card)/var(--type-card-leading) var(--serif); letter-spacing:-.025em}
.guide-copy p{font-size:13px; line-height:1.65; color:#DFE4D5}
.guide-controls{display:flex; flex:none; flex-wrap:wrap; align-items:center; gap:8px}
.guide-controls button{padding:12px 17px; border:0; border-radius:var(--r-pill); background:transparent; color:#E6EADD; font-size:12px; line-height:1.2}
.guide-controls .guide-next{background:#F0EBE1; color:#263E2B}
.guide-finished .guide-next{background:#DCE5C8}
.demo-guide button:focus-visible{outline-color:var(--on-dark)}

.demo-bar{display:flex; align-items:center; justify-content:space-between; gap:15px; padding:17px 24px; background:var(--oat-2)}
.page-history{display:flex; align-items:center; gap:7px}
.page-history button{display:inline-flex; align-items:center; padding:9px 13px; border:0; border-radius:var(--r-pill); background:transparent; color:#40543D; font-size:12px; line-height:1.2}
.page-history svg{width:16px; height:12px; fill:none; stroke:currentColor; stroke-width:1.4}
.page-history button:disabled{opacity:.4; cursor:default; filter:none}
.page-options{display:flex; flex-wrap:wrap; justify-content:flex-end; gap:8px}
.page-options button{padding:9px 13px; border:0; border-radius:var(--r-pill); background:var(--chip-off); color:#40543D; font-size:12px; line-height:1.2}
.page-options button[aria-pressed=true]{background:var(--charcoal); color:#F2EFE7}

.demo-body{display:grid; grid-template-columns:minmax(0,.96fr) minmax(0,1fr); align-items:start}
.source{min-width:0; padding:24px}
/* The live page. On desktop the frame renders the site at a 1280px viewport
   and is scaled into the box, so it reads as the page does on a laptop; on a
   phone it fills the box at the site's own mobile layout. The frame stays
   hidden until the site reports which page is open, and the fallback image
   replaces it only if that never happens. */
.page-capture{position:relative; margin:0; overflow:hidden; aspect-ratio:1600/1156; border-radius:var(--r-inset); background:var(--capture)}
.page-frame{position:absolute; inset:0; overflow:hidden}
.page-frame iframe{display:block; width:1280px; height:924px; border:0; background:var(--white); transform:scale(var(--frame-scale,1)); transform-origin:0 0}
.page-capture[data-frame="idle"] .page-frame, .page-capture[data-frame="loading"] .page-frame{visibility:hidden}
.page-capture[data-frame="fallback"] .page-frame{display:none}
.page-capture > img{position:absolute; inset:0; display:block; width:100%; height:100%; object-fit:cover; object-position:top}
.source-url{display:block; padding-top:13px; font:11px/1.5 var(--mono); color:#43543F; overflow-wrap:anywhere}
.source-document{margin:18px 0; padding:26px 22px; border-radius:var(--r-inset); background:var(--excerpt)}
.source-label{font-size:11px; color:#5F6658}
.source-document p{margin:16px 0 20px; font:19px/1.5 var(--serif); color:#394E3D}
.source-passages{display:grid; gap:10px}
.source-evidence{
  display:block; width:100%; padding:10px 12px; border:0; border-radius:7px;
  background:var(--passage); color:#42573D; font-size:13px; line-height:1.4; text-align:left;
}
.source-evidence[aria-pressed=true]{background:var(--passage-on); color:#243F29; box-shadow:inset 3px 0 var(--passage-rule)}
.source > h3{margin:22px 0 12px; font:400 var(--type-card)/var(--type-card-leading) var(--serif); letter-spacing:-.035em}
.source > p{font-size:13px; line-height:1.65; color:#5F675B}

.output{min-width:0; margin:18px 18px 18px 0; padding:28px; border-radius:var(--r-card); background:var(--well)}
.output-head{display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:25px}
.analysis-label{font-size:12px; line-height:1.5; color:var(--label)}
.mode-tabs{display:flex; gap:4px; padding:3px; border-radius:var(--r-pill); background:var(--sand)}
.mode-tabs button{padding:6px 12px; border:0; border-radius:var(--r-pill); background:transparent; color:var(--muted-cool); font-size:11px; line-height:1.4}
.mode-tabs button[aria-pressed=true]{background:var(--paper-warm); color:var(--ink)}
#topic{font-size:36px; line-height:1.1}
.analysis-summary{margin:17px 0 19px; font-size:14px; line-height:1.65; color:#475643}
.taxonomy{display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin:24px 0; font-size:12px}
.taxonomy span{padding:5px 9px; border-radius:var(--r-pill); background:var(--sand); color:#2C3D2D}
.analysis-facts{display:grid; gap:14px; margin:24px 0}
.analysis-facts div{display:grid; grid-template-columns:100px minmax(0,1fr); gap:14px}
.analysis-facts div:has(dd:empty){display:none}   /* no result yet: only the rows with a value */
.analysis-facts dt{font-size:12px; line-height:1.5; color:#666D60}
.analysis-facts dd{margin:0; font-size:13px; line-height:1.5; color:#354A37}
.evidence{margin-top:24px; font-size:12px}
.evidence blockquote{margin:10px 0; font:17px/1.5 var(--serif); color:#324B36}
#analysis-reason{min-height:38px; font-size:12px; line-height:1.65; color:#5D6958}
.json-view{padding:22px; border-radius:var(--r-inset); background:var(--json); color:var(--json-ink)}
.json-view pre{margin:0; font:12px/1.8 var(--mono); white-space:pre-wrap; overflow-wrap:anywhere}
.json-view button:focus-visible{outline-color:var(--on-dark)}
.demo-change{max-width:none; padding:16px 24px 22px; font-size:12px; line-height:1.6; color:#56664D}

/* A walkthrough step outlines the part of the demo it is talking about. */
.guide-focus{outline:2px solid var(--focus-guide); outline-offset:5px; transition:outline-color .2s}

/* Same domain, different context: the two guides side by side. */
.url-comparison{display:grid; grid-template-columns:minmax(0,320px) minmax(0,1fr); gap:32px; margin:40px 0 25px}
.url-comparison-intro{padding-top:14px}
.url-comparison-intro h3{margin-bottom:18px; font:400 var(--type-card)/var(--type-card-leading) var(--serif); letter-spacing:-.035em}
.url-comparison-intro p{font-size:14px; line-height:1.65; color:var(--muted)}
.url-examples{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px}
.url-examples article{padding:24px; border-radius:var(--r-card); background:var(--white)}
.url-example-source{display:block; margin-bottom:17px; font:11px/1.6 var(--mono); color:#5F6B58; overflow-wrap:anywhere}
.url-examples h4{margin:0 0 15px; font:400 var(--type-card)/var(--type-card-leading) var(--serif); letter-spacing:-.03em; color:#2D4432}
.open-example{display:inline-block; margin-bottom:15px; padding:0 0 3px; border:0; border-bottom:1px solid currentColor; background:none; color:var(--leaf-link); font-size:12px}
.url-examples article > p{font-size:13px; line-height:1.6; color:var(--muted)}
.url-examples dl{display:grid; gap:16px; margin:20px 0 0}
.url-examples dt{margin-bottom:5px; font-size:11px; color:#6E7468}
.url-examples dd{margin:0; font-size:13px; line-height:1.6; color:#344F3B}

/* Context you can use: who the context is for, and where they go next. */
.context-outcome{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:55px; margin:25px 0 55px; padding:12px 5px}
.context-outcome h3{margin-bottom:16px; font:400 var(--type-card)/var(--type-card-leading) var(--serif); letter-spacing:-.035em}
.context-outcome p{font-size:14px; line-height:1.7; color:#5F655C}
.outcome-tabs{display:flex; flex-wrap:wrap; gap:8px}
.outcome-tabs button{padding:10px 14px; border:0; border-radius:var(--r-pill); background:#E5DFD4; color:#394C3D; font-size:11px; line-height:1.2}
.outcome-tabs button[aria-pressed=true]{background:var(--charcoal); color:#F2EFE7}
#outcome-copy{margin:13px 0 7px}
#outcome-link{display:inline-block; font-size:12px}

@media (max-width:1050px){
  #try .section-head{grid-template-columns:1fr; gap:18px}
  .url-comparison{grid-template-columns:1fr; gap:12px}
}
@media (max-width:850px){
  .demo-guide{flex-direction:column; align-items:flex-start; gap:18px; padding:24px}
  .guide-controls{justify-content:flex-start}
  .demo-bar{align-items:flex-start}
  .demo-body{grid-template-columns:1fr}
  .output{margin:0 14px 18px}
}
@media (max-width:760px){
  #try{padding:55px 0 60px}
  .scopes{grid-template-columns:1fr; gap:9px}
  .scope-arrow{transform:rotate(90deg)}
  .url-examples{grid-template-columns:1fr}
  .context-outcome{grid-template-columns:1fr; gap:24px; margin-bottom:40px}
  .output{padding:24px}
  #topic{font-size:32px}
  .source{padding:18px}
  .page-capture{aspect-ratio:auto; height:560px}
  .page-frame iframe{width:100%; height:100%; transform:none}
}
/* The static page shot keeps the screenshot's own proportions at every width,
   so the page's headline is never cropped; its copy sits level with the image
   and, once the columns stack, directly under the link. */
.page-shot-copy > h3{margin-top:0}
@media (max-width:850px){ .page-shot-copy{padding-top:0} }
@media (max-width:760px){ .page-shot .page-capture{aspect-ratio:1600/1156; height:auto} }
@media (max-width:520px){
  .demo-bar{flex-direction:column; gap:8px; padding:14px}
  .page-options{justify-content:flex-start}
  .page-options button{padding:9px 11px; font-size:11px}
  .demo-guide{padding:22px 18px}
  .guide-controls{gap:5px}
  .guide-controls button{padding:11px 13px}
  .source-document{padding:22px 17px}
  .demo-change{padding:15px 18px}
  .guide-focus{outline-offset:2px}
  .analysis-facts div{grid-template-columns:92px minmax(0,1fr); gap:10px}
}
@media (prefers-reduced-motion:reduce){ .guide-focus{transition:none} }

/* ---- the three ASCII cards ---------------------------------------------- */

.how{display:grid; grid-template-columns:repeat(3,1fr); gap:50px; margin-top:30px}
.step{min-width:0}
.step h3{margin:0 0 12px}
.step p{font-size:13px; color:var(--muted-cool)}
.ascii-card{
  display:flex; align-items:center; justify-content:center; width:100%; height:226px; margin:0 0 27px;
  overflow:hidden; border-radius:var(--r-card); background:var(--charcoal); color:var(--ascii);
}
.ascii-card pre{margin:0; padding:0; white-space:pre; text-align:left; overflow:visible; font:12px/1.45 var(--mono); letter-spacing:0}
.ascii-live{position:relative; padding:12px 14px 32px}
.ascii-live pre{line-height:1.2}
.ascii-live button{
  position:absolute; right:14px; bottom:10px; padding:4px 9px; border:0; border-radius:var(--r-pill);
  background:rgba(255,255,255,.05); color:#C5CDBA; font:10px var(--display);
}
.ascii-live button:focus-visible{outline:2px solid var(--oat); outline-offset:3px}
@media (max-width:950px) and (min-width:701px){ .ascii-card pre{font-size:10px} }
@media (max-width:760px){ .how{grid-template-columns:1fr; gap:30px} }
@media (max-width:700px){ .ascii-card{height:220px; margin-bottom:22px} }

/* ---- the topic explorer -------------------------------------------------- */

.band-stone{padding:100px 0 90px}
.band-stone .section-head h2{color:#22392B}
.band-stone .section-head p{color:#39483E}
.explorer{display:grid; grid-template-columns:minmax(0,1fr) 275px; gap:20px; align-items:stretch}
.cloud-panel{position:relative; overflow:hidden; padding:18px 10px; border-radius:var(--r-card); background:var(--white); box-shadow:var(--sh-panel)}
.cloud-panel > svg{display:block; width:100%; height:auto; min-height:270px}
.cloud-cluster{cursor:pointer; transition:opacity .2s}
.cloud-cluster.is-dimmed{opacity:.2}
.cloud-label rect{fill:#FAF8F0; fill-opacity:.94}
.cloud-label text{font-family:var(--display)}
.cloud-controls{display:flex; flex-wrap:wrap; justify-content:center; gap:7px; padding:15px 5px 5px}
.cloud-controls button{padding:9px 13px; border:0; border-radius:var(--r-pill); background:var(--chip-cloud); color:#465044; font:11px var(--display)}
.cloud-controls button[aria-pressed=true]{background:var(--pine); color:var(--paper)}
.cloud-radar{position:absolute; right:21px; top:17px; width:57px; height:57px; opacity:.6; pointer-events:none}
.cloud-radar svg{display:block; width:100%; height:100%}
.radar-sweep{transform-origin:32px 32px; animation:radar-turn 9s linear infinite; animation-play-state:paused}
.cloud-radar.is-visible .radar-sweep{animation-play-state:running}
@keyframes radar-turn{to{transform:rotate(360deg)}}
.cloud-detail{
  display:flex; flex-direction:column; overflow:hidden; padding:30px 25px; border-radius:var(--r-card);
  background:var(--white); color:#28372E; box-shadow:0 12px 28px -22px #443F35;
}
.cloud-detail h3{margin-bottom:18px}
.cloud-detail p{font-size:13px; color:#69695F}
.branches{margin:26px 0 30px; padding:0; list-style:none}
.branches li{position:relative; margin-bottom:24px; padding-left:25px; font:19px/1.35 var(--serif); animation:branch-reveal .6s both}
.branches li:nth-child(2){animation-delay:.12s}
.branches li:nth-child(3){animation-delay:.24s}
.branches li::before{content:'├─'; position:absolute; left:0; top:2px; font:15px/1.4 var(--mono); color:#969A87}
.branches li:last-child::before{content:'└─'}
@keyframes branch-reveal{from{opacity:0; transform:translateY(8px)} to{opacity:1; transform:none}}
.cloud-detail .textlink{align-self:flex-start; margin-top:auto; font-size:11px; color:#354D39}

@media (max-width:1050px){ .explorer{grid-template-columns:minmax(0,1fr) 240px} }
@media (max-width:760px){
  .band-stone{padding:65px 0 55px}
  .explorer{grid-template-columns:1fr}
  .cloud-panel{padding:8px}
  .cloud-panel > svg{min-height:200px}
  .cloud-controls button{padding:9px 11px; font-size:10px}
  .cloud-detail{padding:25px}
  .branches{display:grid; gap:18px; margin-bottom:30px}
}
@media (max-width:700px){
  .cloud-radar{right:12px; top:10px; width:40px; height:40px}
  .branches li{font-size:20px}
}
@media (prefers-reduced-motion:reduce){
  .cloud-cluster{transition:none}
  .branches li,.radar-sweep{animation:none}
}

/* ---- the close: solid pine, the landscape in a box ---------------------- */

/* The pine band runs straight into the charcoal footer: no gradient, no
   overlap, no shared margin. The landscape's own box keeps a faint darkening
   at its foot, inside its rounded corners, which is the reference's. */
.band-close{padding:70px 0 72px; background:var(--pine); color:#F4F4EF}
.closing-copy{display:flex; align-items:center; justify-content:space-between; gap:30px; padding-bottom:12px}
.closing-copy h2{max-width:650px}
.closing-copy p{margin-top:20px; font-size:14px; color:var(--on-pine)}
.band-close .actions{flex-direction:column; align-items:flex-start; max-width:245px; gap:12px}
.band-close .btn.light{border-color:#F0F1ED; background:#F0F1ED; color:var(--pine)}
.band-close .btn.outline{border-color:#BAC1C7; color:#F1F3EF}
.band-close .btn:focus-visible{outline-color:var(--on-dark)}
.alpine-stage{
  position:relative; isolation:isolate; overflow:hidden; margin-top:36px;
  border-radius:var(--r-card); background:var(--pine-deep); box-shadow:var(--sh-stage);
}
.alpine-stage img{display:block; width:100%; height:auto}
.alpine-stage canvas{position:absolute; inset:0; display:none; width:100%; height:100%; pointer-events:none}
.alpine-stage.is-playing canvas{display:block}
.alpine-stage::after{
  content:''; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(180deg, rgba(24,27,31,0) 60%, rgba(24,27,31,.22) 100%);
}

@media (max-width:760px){
  .band-close{padding:50px 0 40px}
  .closing-copy{flex-direction:column; align-items:flex-start}
  .band-close .actions{max-width:none}
  .alpine-stage{margin-top:28px}
}

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

footer{background:var(--charcoal); color:var(--on-dark); padding:72px 0 calc(38px + env(safe-area-inset-bottom, 0px))}
footer a{color:var(--on-dark)}
footer a:focus-visible{outline-color:var(--on-dark)}
/* the mark is a black glyph on transparent; the phoenix house inverts it the same way */
footer .brand .mark{width:30px; filter:invert(1) brightness(1.06)}
footer .brand b{font-size:31px; line-height:1.2}
.footer-main{display:grid; grid-template-columns:1.4fr repeat(4,1fr); gap:32px; padding-bottom:58px}
.footer-column h3{margin:6px 0 25px; font-size:15px; font-weight:700; letter-spacing:0}
.footer-column a{display:block; margin:14px 0; font-size:14px; line-height:1.6}
.footer-column p{margin:-8px 0 24px; font-size:12px; line-height:1.6; color:var(--on-dark-2)}
.footer-bottom{display:flex; justify-content:space-between; gap:25px; padding-top:10px; font-size:13px; color:var(--on-dark-2)}
.footer-bottom nav{display:flex; gap:28px}

@media (max-width:1050px){
  .footer-main{grid-template-columns:1fr 1fr 1fr; gap:35px}
  .footer-intro{grid-column:1/-1}
}
/* Below 1180 the legal row reaches the middle of the page, so the footer keeps
   the view pill's band free under it: 18px offset, the 42px pill, 14px air. */
@media (max-width:1179px){
  footer{padding-bottom:calc(74px + env(safe-area-inset-bottom, 0px))}
}
@media (max-width:760px){
  footer{padding-top:48px}
  .footer-main{grid-template-columns:1fr 1fr; gap:32px 24px; padding-bottom:35px}
  .footer-intro{grid-column:1/-1; margin-bottom:10px}
  .footer-column h3{margin-bottom:18px; font-size:14px}
  .footer-bottom{flex-direction:column; gap:20px}
  .footer-bottom nav{flex-wrap:wrap; gap:20px}
}

/* ---- the machine view and the view pill (estate chrome) ----------------- */

.machine-view{max-width:820px; margin:0 auto; padding:24px 16px 56px; text-align:left}
.machine-view pre{margin:0; font:12.5px/1.6 var(--mono); 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 (landing.css and estate-chrome.css carry the same
   values). Lifted by the bottom safe-area inset on notched phones. */
.viewpill{
  position:fixed; left:50%; bottom:calc(18px + env(safe-area-inset-bottom, 0px)); transform:translateX(-50%);
  display:flex; align-items:center; gap:8px; z-index:50;
  padding:12px 26px; border:0; border-radius:100px; background:var(--pill); box-shadow:var(--sh);
  color:var(--ink); font-family:var(--mono); font-size:11px;
}
.viewbar-opt input{margin:0; accent-color:var(--pine)}
.viewbar-label{font-weight:400; color:var(--ink)}
.viewbar-opt{display:inline-flex; align-items:center; gap:3px; cursor:pointer}