/* classify.ai homepage (Oct 28 2026): the signal design.

   Source of truth for the look: the approved interactive mockup
   (classify-signal-redesign/index.html, Oct 28 2026). That file stacks several
   passes of overrides; this sheet is its final rendered state, restated once
   per component on the tokens below.

   ONLY THE HOMEPAGE LOADS THIS SHEET. home.css stays as it was because the
   /learn documents still load it; /about keeps landing.css; atlas and phoenix
   keep their own houses.

   Themes: dark is the default. html[data-theme="light"] swaps every token, and
   the choice is saved by landing.js under the localStorage key classify-theme.
   Colour: black, off-white, navy and warm tones only. No green. */

@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400..600&display=swap");

:root{
  color-scheme:dark;
  --canvas:#060605;
  --ink:#f7f7f4;
  --body:#b4b1a7;
  --muted:#9a978c;
  --line:#2b2925;
  --rule:#a8a59b;
  /* r103: the cool charcoal surfaces, shared with the SPA (signal-base.css) */
  --card:#1c2024;
  --raised:#343b42;
  --submit:#343b42;
  --submit-ink:#f7f7f4;
  --edge:#46433b;
  --fade:rgba(6,6,5,.93);
  --fade-0:rgba(6,6,5,0);
  --button-hover:var(--raised);
  --primary-hover:#e9ecee;
  --primary-ink:#060605;

  /* the window chrome inside the demonstrations */
  --w-bg:#0a0a0a;
  --w-edge:#46433b;
  --w-head:#d3d0c5;
  --w-line:#2b2925;
  --w-line-2:#25241f;
  --w-strong:#e5e2d8;
  --w-dim:#77746a;
  --w-side:#10100e;
  --w-side-text:#959183;
  --w-on:var(--raised);
  --w-on-text:#eeece2;
  --w-sel:var(--card);
  --w-tab-line:#34322c;
  --w-tab:#878477;
  --w-copy:#908c7e;
  --w-tag:#929084;

  /* navy selection, used for the chosen passage and the chosen scope */
  --sel-bg:#26394b;
  --sel-text:#d4e4f4;
  --sel-edge:#607d96;
  --scope-bg:#192331;
  --scope-edge:#3e4e60;
  --scope-h:#d5e1ec;
  --scope-p:#a3b6c9;
  --tag-bg:#18202a;
  --tag-edge:#485a6c;
  --tag-text:#b6cce2;

  /* the passage-to-context graphic */
  --flow-in:#141a21;
  --flow-in-edge:#3e4f60;
  --flow-text:#b9c8d7;
  --flow-out:#251d1b;
  --flow-out-edge:#71554c;
  --flow-result:#e0b7a7;

  /* the topic clusters */
  --c-outdoors:#8da9c3;
  --c-travel:#d2ad9c;
  --c-food:#b29ba9;
  --c-transport:#8e9fbd;
  --c-stay:#b5a18d;

  --mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  --nav-height:74px;
  --hero-gap:48px;
}

html[data-theme="light"]{
  color-scheme:light;
  --canvas:#f7f7f4;
  --ink:#171715;
  --body:#56554e;
  --muted:#6b6a62;
  --line:#d7d5cc;
  --rule:#9b988d;
  --card:#e9ecee;
  /* no light raised tone was specified: one step from the surface toward the dark one */
  --raised:color-mix(in srgb,#e9ecee 88%,#1c2024);
  --submit:#1c2024;
  --fade:rgba(247,247,244,.93);
  --fade-0:rgba(247,247,244,0);
  --button-hover:var(--raised);
  --primary-hover:#343b42;
  --primary-ink:#f7f7f4;

  --w-bg:#fafaf8;
  --w-edge:#aaa79c;
  --w-head:#575349;
  --w-line:#d7d5cc;
  --w-line-2:#d7d5cc;
  --w-strong:#29261f;
  --w-dim:var(--muted);   /* r103: #6f6c62 fell to 4.43:1 on the light surface */
  --w-side:var(--card);
  --w-side-text:#55534d;
  --w-on:var(--raised);
  --w-on-text:#26251f;
  --w-sel:var(--raised);
  --w-tab-line:#d7d5cc;
  --w-tab:#6f6c62;
  --w-copy:#58554c;
  --w-tag:#58554c;

  --sel-bg:#dbe7f1;
  --sel-text:#2e465e;
  --sel-edge:#9eb4c9;
  --scope-bg:#e4ebf1;
  --scope-edge:#bac9d6;
  --scope-h:#294157;
  --scope-p:#566e83;
  --tag-bg:#e4ecf3;
  --tag-edge:#b3c4d3;
  --tag-text:#3f5b74;

  --flow-in:#e9eef3;
  --flow-in-edge:#bac8d4;
  --flow-text:#476077;
  --flow-out:#f1e6e0;
  --flow-out-edge:#c3a598;
  --flow-result:#835d4c;

  --c-outdoors:#4f6f8f;
  --c-travel:#a06f5a;
  --c-food:#7d6274;
  --c-transport:#56688a;
  --c-stay:#85705b;
}

/* >>> SHARED TYPE: classify.ai, atlas and phoenix (Oct 29 2026)
   The one heading scale and spacing scale for the three sites, the
   homepage's own type values. This
   block is byte-identical in public/landing/assets/signal.css and
   src/products.css (the static homepage cannot import the app's sheets);
   landing.spec.ts fails if the two copies differ. Change both together. */
:root{
  --type-hero:clamp(30px,1.3rem + 1.5vw,52px);
  --type-hero-lh:1.12;
  --type-hero-ls:-1.5px;
  --type-support:16px;
  --type-support-lh:1.65;
  --type-section:36px;
  --type-section-lh:1.2;
  --type-section-ls:-.72px;
  --type-close:42px;
  --type-close-lh:1.12;
  --type-close-ls:-1.4px;
  /* panel and sub-section titles: Lookup, Search, Atlas, Phoenix, the
     explorer's subject, the ASCII steps. Subordinate to section headings. */
  --type-sub:24px;
  --type-sub-lh:1.25;
  --type-sub-ls:-.5px;
  /* the spacing scale, and the two gaps built from it */
  --space-1:8px;
  --space-2:16px;
  --space-3:24px;
  --space-4:32px;
  --space-5:48px;
  --space-6:64px;
  --space-7:96px;
  /* each section pads half the gap between sections: with no rules between
     them (Oct 29 2026) the whitespace is the divider, 128/96/80px (r103: 80 on phones, was 64) */
  --space-section:var(--space-6);
  --space-section-head:var(--space-5);
  --space-footer:var(--space-7);
  /* the hero's rhythm, shared by classify.ai and phoenix: room under the nav,
     the heading and its control kept together, room before the media */
  --space-hero-top:clamp(64px,12vh,144px);
  --space-hero-inner:clamp(32px,5vh,48px);
  --space-hero-media:clamp(64px,10vh,112px);
}
@media(max-width:1000px){
  :root{--space-section:var(--space-5)}
}
@media(max-width:760px){
  :root{--type-hero:35px;--type-support:14px;--type-section:30px;--type-close:31px;--type-sub:20px;
    --space-section:calc(var(--space-4) + var(--space-1));--space-section-head:var(--space-4);--space-footer:56px;
    --space-hero-top:var(--space-5);--space-hero-inner:var(--space-4);--space-hero-media:56px}
}
/* <<< SHARED TYPE */

/* ---- base ---------------------------------------------------------------- */
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:95px}
body{margin:0;background:var(--canvas);color:var(--body);font:15px/1.6 Inter,Arial,Helvetica,sans-serif;-webkit-font-smoothing:antialiased}
button,input{font:inherit}
button,a{touch-action:manipulation}
button{cursor:pointer;color:inherit}
a{color:inherit;text-decoration:none}
a:hover{color:var(--ink)}
a:focus-visible,button:focus-visible,input:focus-visible,summary:focus-visible,video:focus-visible{outline:2px solid var(--ink);outline-offset:4px}
h1,h2,h3,p{margin:0}
h1,h2,h3{font-weight:400;color:var(--ink);line-height:1.12;letter-spacing:-.04em}
[hidden]{display:none!important}
.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}
.skip{position:fixed;top:-100px;left:10px;background:var(--ink);color:var(--canvas);padding:10px;z-index:40}
.skip:focus{top:10px}
.wrap{width:min(1280px,calc(100% - 112px));margin:auto}

.button{display:inline-flex;justify-content:center;align-items:center;min-height:44px;padding:10px 23px;border-radius:30px;border:1px solid var(--edge);background:var(--card);color:var(--ink);font-size:13px;line-height:1.3}
.button:hover{background:var(--button-hover);color:var(--ink)}
.button.primary{background:var(--ink);color:var(--primary-ink);border-color:var(--ink)}
.button.primary:hover{background:var(--primary-hover);color:var(--primary-ink)}
html[data-theme="light"] .button.primary:hover{color:#fff}

/* ---- header -------------------------------------------------------------- */
.top{position:fixed;inset:0 0 auto;z-index:20;background:linear-gradient(var(--canvas) 0%,var(--fade) 65%,var(--fade-0));padding-bottom:30px;pointer-events:none}
.top header{height:var(--nav-height);display:flex;align-items:center;justify-content:space-between;gap:30px;pointer-events:auto;position:relative}
.brand{font-size:26px;font-weight:550;letter-spacing:-1.5px;color:var(--ink);display:flex;align-items:center;gap:10px;line-height:1}
/* Oct 29 2026: the canonical lockup (r103: the supplied export, viewBox cropped to the
   art), painted as a mask: white on the dark theme, black on the light one.
   The estate chrome draws the same file at the same size (.est-lockup). */
.lockup{display:block;flex:none;height:33px;aspect-ratio:271.4/58.7;background:#fff;-webkit-mask:url("/landing/assets/classify-lockup-v3.svg") center/contain no-repeat;mask:url("/landing/assets/classify-lockup-v3.svg") center/contain no-repeat}
html[data-theme="light"] .lockup{background:#000}
/* r103: the lockup is 112px wide in the nav and the footer, at every width */
.brand .lockup{height:auto;width:112px}
.side-brand .lockup{height:22px;background:var(--a-strong)}
#site-nav{flex:1;display:flex;align-items:center;gap:27px;font-size:12px}
/* the four links centre in the space between the brand and the toggle */
#site-nav .nav-first{margin-left:auto}
#site-nav .nav-last{margin-right:auto}
#site-nav .theme-desktop{margin-right:-9px}
#site-nav .nav-cta{min-height:38px;font-size:12px;padding:8px 20px}
.theme-toggle{padding:0;width:32px;height:32px;display:grid;place-items:center;background:none;border:0;border-radius:50%;color:var(--body)}
.theme-toggle:hover{color:var(--ink)}
.theme-toggle svg{width:18px;height:18px}
.theme-toggle .moon,html[data-theme="light"] .theme-toggle .sun{display:none}
html[data-theme="light"] .theme-toggle .moon{display:block}
.theme-phone{display:none}
.guide-link{display:inline-block;margin-left:4px;color:var(--ink);text-decoration:underline;text-underline-offset:4px}
.burger{display:none}

/* ---- hero ---------------------------------------------------------------- */
.hero{padding:calc(var(--nav-height) + var(--space-hero-top)) 0 0}
.hero h1{text-wrap:balance;font-size:var(--type-hero);line-height:var(--type-hero-lh);letter-spacing:var(--type-hero-ls);text-align:center;max-width:650px;margin:0 auto}
/* r103: the hero search is a tall, flat panel on the card surface. The query
   sits upper left and the submit is a small round button with an up arrow at
   the lower right; the input's right padding keeps text clear of it. */
.search-form{width:min(540px,100%);min-height:104px;margin:var(--space-hero-inner) auto 0;position:relative;display:block;border:1px solid transparent;border-radius:24px;padding:16px 64px 52px 20px;background:var(--card);color:var(--body);cursor:text}
.search-form:focus-within{border-color:var(--edge)}
.search-form input{display:block;width:100%;min-width:0;background:none;border:0;outline:none;color:var(--ink);font-size:15px;line-height:22px;padding:0}
.search-form input::placeholder{color:var(--muted)}
.search-form input::-webkit-search-cancel-button{display:none}
.search-form button{position:absolute;right:12px;bottom:12px;width:32px;height:32px;display:grid;place-items:center;background:var(--submit);color:var(--submit-ink);border:0;border-radius:50%;cursor:pointer}
.search-form button:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.search-form button[disabled]{opacity:.6;cursor:progress}
.search-form button svg{width:16px;height:16px}

/* The search answer, beneath the bar, in place (landing.js "search"). Ten
   results scroll inside the panel with the status and the request row pinned;
   below 760 the panel runs its full length in the page and the request row
   rides above the view pill (the Oct 24 2026 contract, restyled). */
.out{width:min(540px,100%);margin:10px auto 0;background:var(--card);border:1px solid var(--line);border-radius:9px;text-align:left;max-height:380px;overflow-y:auto}
.out-head{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:10px 12px 10px 20px;border-bottom:1px solid var(--line);position:sticky;top:0;background:var(--card);z-index:1}
.out-status{font-size:12px;color:var(--muted)}
.out-close{width:32px;height:32px;flex:none;border:0;background:none;color:var(--body);font-size:18px;border-radius:50%}
.out-close:hover{color:var(--ink)}
.out-row{display:block;padding:15px 20px;border-bottom:1px solid var(--line);color:var(--ink);font-size:13px}
a.out-row:hover{background:var(--line);color:var(--ink)}
.out-url{display:block;font:10px/1.6 var(--mono);color:var(--muted);overflow-wrap:anywhere}
.out-title{display:block;margin-top:3px}
.out-desc{display:block;margin-top:4px;font-size:12px;line-height:1.55;color:var(--body);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.out-foot{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:12px 20px;font-size:12px;color:var(--muted);background:var(--card);border-top:1px solid var(--line);position:sticky;bottom:0}
.out-foot .button{min-height:36px;font-size:12px;padding:7px 16px}
@media(max-width:760px){
  .out{max-height:none;overflow:visible}
  .out-head{position:static}
  /* r103: the pill no longer floats on phones, so the results row sticks to the safe area */
  .out-foot{flex-wrap:wrap;bottom:env(safe-area-inset-bottom,0px)}
  .out.out-peek .out-foot{visibility:hidden}
}

.hero-audiences{display:flex;justify-content:center;gap:32px;margin:20px auto 0;font-size:13px;line-height:1.5}
.hero-audiences a{color:var(--ink)}
.hero-audiences a:hover{text-decoration:underline;text-underline-offset:5px}

/* the explainer film, at the video's own 16:9 */
/* the frame line is a shadow, not a border, so the video fills the frame exactly */
.explainer{position:relative;width:min(960px,100%);margin:var(--space-hero-media) auto 0;overflow:hidden;box-shadow:0 0 0 1px var(--line);border-radius:12px;background:#111722}
.explainer video{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;background:#111722}
.film-play{position:absolute;inset:0;width:100%;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:12px;padding:0 0 9%;border:0;background:linear-gradient(transparent 45%,rgba(6,10,16,.55));color:#f7f7f4;font-size:12px;letter-spacing:0}
.film-play-icon{width:58px;height:58px;border:1px solid rgba(255,255,255,.55);border-radius:50%;display:grid;place-items:center;background:rgba(6,10,16,.35)}
.film-play-icon:after{content:'';margin-left:4px;border-style:solid;border-width:9px 0 9px 14px;border-color:transparent transparent transparent #f7f7f4}
.film-play:hover .film-play-icon{background:rgba(6,10,16,.6)}
.film-play:focus-visible{outline-offset:-6px}

/* ---- the rail: one ruled column with shared section boundaries ------------ */
/* Oct 29 2026: the lower sections sit straight on the page, on the same grid
   as the nav, the close and the footer. No outer box and no side rails; the
   single rule between sections stays. */
.rail{position:relative;display:flow-root;margin-top:55px}
.section{position:relative;padding:var(--space-section) 0}
.section-head{display:grid;grid-template-columns:1.1fr 1fr;gap:70px;align-items:end;margin-bottom:var(--space-section-head)}
.section-head h2{font-size:var(--type-section);line-height:var(--type-section-lh);letter-spacing:var(--type-section-ls)}
.section-head p{font-size:14px;line-height:1.7;max-width:430px}

/* 3. page level contextual intelligence */
.scope-path{list-style:none;margin:0 0 38px;padding:0 0 38px;display:grid;grid-template-columns:1fr 1fr 1.15fr;gap:62px;align-items:center;border-bottom:1px solid var(--line)}
.scope-path li{position:relative;padding:18px;border:1px solid transparent;border-radius:6px}
.scope-path li+li:before{content:'';position:absolute;left:-46px;top:50%;width:30px;border-top:1px solid var(--muted)}
.scope-path span{font:10px var(--mono);color:var(--muted)}
.scope-path h3{font-size:22px;letter-spacing:-.5px;margin:12px 0 8px}
.scope-path p{font-size:12px;color:var(--muted)}
.scope-path .scope-selected{background:var(--scope-bg);border-color:var(--scope-edge)}
.scope-path .scope-selected h3{color:var(--scope-h)}
.scope-path .scope-selected p{color:var(--scope-p)}

.reader-head{align-items:center;margin-bottom:25px}
.reader-head h3,.product-paths h3,.ascii-flow h3,.cloud-detail h3{font-size:var(--type-sub);line-height:var(--type-sub-lh);letter-spacing:var(--type-sub-ls)}
.reader-switch{display:flex;gap:8px;justify-content:flex-end;flex-wrap:wrap}
.reader-switch button,.cloud-controls button{border:1px solid var(--line);border-radius:30px;background:none;color:var(--body)}
.reader-switch button{font-size:11px;padding:9px 14px}
.reader-switch button[aria-pressed="true"],.cloud-controls button[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:var(--canvas)}
.reader-grid{display:grid;grid-template-columns:1.1fr 1fr;gap:52px;align-items:center}
.real-page{border:1px solid var(--line);border-radius:7px;overflow:hidden;background:var(--card)}
.source-address{font:10px/1.5 var(--mono);padding:12px 18px;border-bottom:1px solid var(--line);color:var(--muted);overflow-wrap:anywhere}
.publisher-name{font:21px Georgia,serif;color:var(--ink);padding:21px 23px}
.real-page img{display:block;width:100%;height:190px;object-fit:cover}
.reader-copy{padding:25px}
.reader-copy h3{font:32px/1.1 Georgia,serif;letter-spacing:-1px}
.reader-copy>p{font-size:12px;line-height:1.7;margin:15px 0 19px}
.reader-copy>a,.context-facts a{text-decoration:underline;text-underline-offset:4px}
.reader-copy>a{font-size:11px}
.passages{margin-bottom:23px;display:grid;gap:7px}
.passages button{background:none;border:1px solid var(--line);border-radius:3px;text-align:left;padding:10px 12px;color:var(--body);font-size:12px}
.passages button[aria-pressed="true"]{background:var(--sel-bg);color:var(--sel-text);border-color:var(--sel-edge)}
.context-flow{width:100%;max-width:470px;margin:0 0 12px}
.context-flow svg{display:block;width:100%;height:auto}
.flow-input rect{fill:var(--flow-in);stroke:var(--flow-in-edge)}
.flow-text{fill:var(--flow-text);font-family:Inter,Arial,sans-serif}
.flow-output{fill:var(--flow-out);stroke:var(--flow-out-edge)}
.flow-result{fill:var(--flow-result);font-family:Inter,Arial,sans-serif}
.flow-packets path{animation:flow-travel 6s linear infinite;animation-play-state:paused}
.flow-packets path:nth-child(2){animation-duration:7s}
.flow-packets path:nth-child(3){animation-duration:9s}
.context-flow.is-active .flow-packets path{animation-play-state:running}
@keyframes flow-travel{to{stroke-dashoffset:-170}}
.reader-context h3{font-size:32px;max-width:360px;margin:25px 0 17px}
.tags{display:flex;flex-wrap:wrap;gap:5px}
.reader-context .tags span{border:1px solid var(--tag-edge);border-radius:3px;padding:3px 7px;font-size:10px;color:var(--tag-text);background:var(--tag-bg)}
.reader-context>p{font-size:13px;margin:24px 0;max-width:360px;line-height:1.8}
.context-facts{margin:0;border-top:1px solid var(--line);font-size:11px;padding-top:10px}
.context-facts>div{padding:9px 0;display:flex;justify-content:space-between;gap:20px}
.context-facts dt{color:var(--muted)}
.context-facts dd{margin:0;color:var(--ink)}

.evidence-details,.analysis-details{border-top:1px solid var(--line);margin-top:30px;padding-top:18px}
.evidence-details summary,.analysis-details summary{cursor:pointer;font-size:13px;color:var(--ink);padding:0 0 18px;list-style:none;display:flex;justify-content:space-between}
.evidence-details summary::-webkit-details-marker,.analysis-details summary::-webkit-details-marker{display:none}
.evidence-details summary:after,.analysis-details summary:after{content:'+'}
.evidence-details[open] summary:after,.analysis-details[open] summary:after{content:'\2212'}

/* the window chrome shared by the evidence, the applications and the app */
.wide-window{border:1px solid var(--w-edge);border-radius:10px;overflow:hidden;background:var(--w-bg)}
.window-head{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:13px 19px;border-bottom:1px solid var(--w-line);color:var(--w-head);font-size:12px}
.small-button{border:1px solid #393939;background:var(--card);border-radius:5px;padding:5px 9px;font-size:9px;color:#d8d7d2}
html[data-theme="light"] .small-button{background:var(--card);color:#514e44;border-color:#c4c0b4}
.window-head .small-button{font-size:10px}
.table{width:100%;border-collapse:collapse;table-layout:fixed;text-align:left}
.table th{font-size:10px;font-weight:400;color:var(--w-dim);padding:14px 22px;border-bottom:1px solid var(--w-line)}
.table th:first-child{width:45%}
.table td{padding:20px 22px;font-size:12px;border-bottom:1px solid var(--w-line-2);color:var(--body);vertical-align:top}
.table tr:last-child td{border-bottom:0}
.table td:first-child{color:var(--w-strong)}
.table button{border:0;padding:0;background:none;text-align:left;color:inherit}
.table button:hover{text-decoration:underline;text-underline-offset:4px}
.table .selected{background:var(--w-sel)}

/* the structured output: the app window over a Tahoe photograph */
.analysis-details .hero-stage{margin-top:0}
.hero-stage{position:relative;border:1px solid var(--edge);border-radius:16px;height:460px;overflow:hidden;display:grid;place-items:center;padding:38px 54px;background:#2a3542}
.backdrop{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* the Tahoe photograph is bright snow; the wash settles it to the mockup's dark field */
.stage-wash{position:absolute;inset:0;background:linear-gradient(rgba(10,17,26,.62),rgba(10,17,26,.78))}
.app{
  --a-bg:#0a0a0a;--a-edge:#4b4944;--a-bar:#101010;--a-line:#262626;--a-text:#a1a1a1;--a-strong:#f0efec;--a-dim:#77766f;
  --a-item:#92918c;--a-on:#232323;--a-on-text:#e9e7e0;--a-url:#101010;--a-url-edge:#343434;--a-url-text:#b3b2ac;
  --a-tab:#74746e;--a-tab-on:#e6e4dd;--a-tab-line:#282828;--a-dek:#929189;--a-chip:var(--card);--a-chip-edge:#36352f;--a-chip-text:#a6a499;
  --a-tag-edge:#383730;--a-tag-text:#b1aea1;--a-reason:#aaa79c;--a-reason-line:#292823;--a-json:#c8c5b9;--a-foot:#77756d;--a-foot-btn:#bcb9ad;
  position:relative;width:100%;height:100%;max-height:520px;background:var(--a-bg);border:1px solid var(--a-edge);border-radius:10px;overflow:hidden;color:var(--a-text);display:flex;flex-direction:column;font-size:11px}
html[data-theme="light"] .app{
  --a-bg:#fafaf8;--a-edge:#aaa79c;--a-bar:var(--card);--a-line:#d7d5cc;--a-text:#55534d;--a-strong:#20201d;--a-dim:var(--muted);
  --a-item:#68665d;--a-on:var(--raised);--a-on-text:#26251f;--a-url:var(--card);--a-url-edge:#d4d1c5;--a-url-text:#666359;
  --a-tab:#6f6c62;--a-tab-on:#28261f;--a-tab-line:#d7d5cc;--a-dek:#58554c;--a-chip:var(--card);--a-chip-edge:#d4d1c6;--a-chip-text:#666155;
  --a-tag-edge:#d0cdc2;--a-tag-text:#58554c;--a-reason:#58554c;--a-reason-line:#d7d5cc;--a-json:#58554c;--a-foot:#6f6c62;--a-foot-btn:#59564e}
.app-bar{height:35px;flex:none;border-bottom:1px solid var(--a-line);display:flex;align-items:center;justify-content:space-between;padding:0 13px;font-size:10px;background:var(--a-bar)}
.lights{display:flex;gap:5px;width:60px}
.lights i{width:6px;height:6px;border-radius:50%;background:#55534e}
.app-bar>span:last-child{width:60px;text-align:right;color:var(--a-dim)}
.app-layout{display:grid;grid-template-columns:155px 1fr;min-height:0;flex:1}
.sidebar{background:var(--a-bar);border-right:1px solid var(--a-line);padding:18px 11px;display:flex;flex-direction:column}
.side-brand{font-size:16px;color:var(--a-strong);letter-spacing:-.6px;padding:0 8px 20px}
.side-item{border:0;background:none;border-radius:5px;color:var(--a-item);text-align:left;font-size:10px;padding:9px;display:flex;align-items:center;gap:9px}
.side-item.active{background:var(--a-on);color:var(--a-on-text)}
.side-label{font-size:9px;color:var(--a-dim);margin:23px 8px 7px}
.side-foot{margin-top:auto;padding:12px 8px 0;display:flex;gap:7px;align-items:center;font-size:9px}
.avatar{width:20px;height:20px;border:1px solid #444;border-radius:50%;display:grid;place-items:center;color:var(--a-text)}
.work{padding:23px 26px;overflow:auto;min-width:0}
.work-header{display:flex;justify-content:space-between;gap:15px;align-items:center;margin-bottom:18px}
.work-header h4{margin:0;font-size:20px;font-weight:400;letter-spacing:-.5px;color:var(--a-strong)}
.app .small-button{border-color:var(--a-url-edge);background:var(--a-chip);color:var(--a-strong)}
.url-bar{display:flex;align-items:center;gap:12px;border:1px solid var(--a-url-edge);border-radius:6px;background:var(--a-url);padding:9px 11px;font:10px/1.5 var(--mono);color:var(--a-url-text);overflow:hidden}
.url-bar span:first-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.url-bar span:last-child{margin-left:auto;font-size:9px}
.app-tabs{display:flex;gap:20px;margin-top:15px;border-bottom:1px solid var(--a-tab-line)}
.app-tabs button{border:0;border-bottom:1px solid transparent;padding:0 0 8px;background:none;color:var(--a-tab);font-size:10px}
.app-tabs button[aria-pressed="true"]{color:var(--a-tab-on);border-color:var(--a-tab-on)}
.result-grid{display:grid;grid-template-columns:1fr 1fr;gap:26px;padding-top:18px}
.result-title{font-size:10px;color:var(--a-dim);margin-bottom:9px}
.source-title,.topic-title{margin:0 0 11px;font-weight:400;letter-spacing:-.5px;color:var(--a-strong);line-height:1.18}
.source-title{font-size:18px}
.topic-title{font-size:19px}
.source-dek{font-size:10px;line-height:1.65;color:var(--a-dek);max-width:320px}
.source-headings{margin-top:16px;display:flex;flex-wrap:wrap;gap:5px}
.source-headings button{padding:5px 7px;border:1px solid var(--a-chip-edge);background:var(--a-chip);color:var(--a-chip-text);font-size:9px;border-radius:3px}
.source-headings button[aria-pressed="true"]{background:var(--sel-bg);color:var(--sel-text);border-color:var(--sel-edge)}
.source-link{font-size:9px;display:inline-block;color:var(--a-dek);margin-top:16px;text-decoration:underline;text-underline-offset:3px}
.app .tags span{border:1px solid var(--a-tag-edge);border-radius:3px;padding:3px 6px;font-size:9px;color:var(--a-tag-text)}
.reason{font-size:10px;line-height:1.65;color:var(--a-reason);border-top:1px solid var(--a-reason-line);margin-top:15px;padding-top:12px}
.replay-running .reason{animation:appear .4s ease}
@keyframes appear{from{opacity:.2}to{opacity:1}}
.json{font:10px/1.8 var(--mono);white-space:pre-wrap;overflow-wrap:anywhere;color:var(--a-json);margin:15px 0 0}
.app-footer{padding:9px 26px;border-top:1px solid var(--a-line);font-size:9px;display:flex;justify-content:space-between;color:var(--a-foot)}
.app-footer button{font-size:9px;padding:0;background:none;border:0;color:var(--a-foot-btn)}

/* 4. context for your work */
.application-tabs{display:flex;gap:20px;border-bottom:1px solid var(--w-tab-line)}
.application-tabs button{font-size:12px;padding:0 0 12px;background:none;border:0;border-bottom:1px solid transparent;color:var(--w-tab)}
.application-tabs button[aria-pressed="true"]{color:var(--ink);border-bottom-color:var(--ink)}
.application-window{border-top:0;border-top-left-radius:0;border-top-right-radius:0}
.application-body{display:grid;grid-template-columns:220px 1fr;min-height:280px}
.application-side{padding:23px;background:var(--w-side);border-right:1px solid var(--w-line)}
.application-side p{font-size:10px;color:var(--w-dim);margin:5px 0 14px}
.application-side button{display:block;border:0;border-radius:4px;background:none;padding:10px;text-align:left;width:100%;font-size:11px;color:var(--w-side-text)}
.application-side button[aria-pressed="true"]{background:var(--w-on);color:var(--w-on-text)}
.application-main{padding:28px 32px}
.application-main h3{font-size:25px;margin-bottom:13px}
.application-main>p{font-size:12px;color:var(--w-copy);max-width:440px}
.matches{margin-top:25px}
.match{display:flex;justify-content:space-between;gap:20px;padding:14px 0;border-top:1px solid var(--w-line);font-size:12px;color:var(--w-strong)}
.match span:last-child{font-size:10px;color:var(--w-tag);text-align:right}
.product-paths{display:grid;grid-template-columns:1fr 1fr;gap:40px;margin-top:35px;padding-top:28px;border-top:1px solid var(--line)}
.product-paths p{font-size:13px;line-height:1.7;max-width:380px;margin-top:12px}
.product-paths p:first-of-type{color:var(--ink);font-size:14px}
.product-paths a,.cloud-detail>a{display:inline-block;margin-top:20px;text-decoration:underline;text-underline-offset:5px;font-size:12px;color:var(--ink)}

/* the three ASCII workflow steps */
.ascii-flow{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:34px}
.ascii-step{height:220px;display:grid;place-items:center;color:var(--ink);overflow:hidden}
/* the type follows the width, so three columns of 30-character art fit down to 761px */
.ascii-step pre{font:clamp(9px,.85vw,12px)/1.5 var(--mono);white-space:pre;margin:0}
.ascii-flow h3{margin-top:var(--space-3)}
.ascii-flow p{font-size:12px;margin-top:12px;color:var(--muted)}

/* the soft colour field between the steps and the explorer */
.closing:before{content:'';position:absolute;inset:-35%;z-index:-1;background:radial-gradient(ellipse at 16% 67%,#d8a58f 0%,rgba(216,165,143,0) 40%),radial-gradient(ellipse at 44% 22%,#6e869c 0%,rgba(110,134,156,0) 44%),radial-gradient(ellipse at 75% 76%,#192a40 0%,rgba(25,42,64,0) 50%),linear-gradient(114deg,#a77f73,#354657 48%,#07121e 85%);filter:blur(22px)}
.closing:after{content:'';position:absolute;inset:0;pointer-events:none;opacity:.15;z-index:0;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' opacity='.7' filter='url(%23n)'/%3E%3C/svg%3E");mix-blend-mode:soft-light}

/* 5. the topic explorer */
.topic-explorer{display:grid;grid-template-columns:1.65fr .75fr;gap:25px}
.cloud-panel,.cloud-detail{border:1px solid var(--line);border-radius:7px;background:var(--card)}
.cloud-panel{overflow:hidden;padding:14px}
.cloud-panel svg{display:block;width:100%;height:auto}
.cloud-cluster{color:var(--c-outdoors);opacity:.18;transition:opacity .3s}
.cloud-cluster.active{opacity:1}
.cloud-cluster[data-cluster="travel"]{color:var(--c-travel)}
.cloud-cluster[data-cluster="food"]{color:var(--c-food)}
.cloud-cluster[data-cluster="transport"]{color:var(--c-transport)}
.cloud-cluster[data-cluster="stay"]{color:var(--c-stay)}
.cloud-label rect{fill:var(--canvas)}
.cloud-label text{fill:var(--body);font-family:Inter,Arial,sans-serif}
.cloud-controls{display:flex;justify-content:center;gap:6px;flex-wrap:wrap;padding:10px 0 18px}
.cloud-controls button{font-size:11px;padding:8px 12px}
.cloud-detail{padding:27px 23px}
.cloud-detail p{font-size:12px;line-height:1.8;margin:17px 0 24px}
.cloud-detail ul{margin:0;padding:0;list-style:none}
.cloud-detail li{border-top:1px solid var(--line);padding:15px 0;font-size:15px;line-height:1.4;color:var(--ink)}
.cloud-detail li a:hover{text-decoration:underline;text-underline-offset:4px}
/* The Alpine Dawn landscape belongs to the Outdoors panel only (ascii.js). */
.alpine-stage{position:relative;width:100%;aspect-ratio:2;margin:18px 0 0;overflow:hidden;border-radius:4px;background:#111b29}
.alpine-stage canvas{display:block;width:100%;height:auto}

/* 6. the close */
.closing{position:relative;isolation:isolate;overflow:hidden;background:#111b29;border-radius:14px;margin:0;padding:76px 25px;text-align:center}
.closing:before{background:radial-gradient(ellipse at 22% 24%,#3e536b,transparent 55%),radial-gradient(ellipse at 77% 76%,#a67d6d,transparent 47%),linear-gradient(100deg,#101c2b,#162537 62%,#554441);filter:blur(25px)}
.closing h2,.closing-actions{position:relative;z-index:1}
.closing h2{text-wrap:balance;font-size:var(--type-close);line-height:var(--type-close-lh);margin-bottom:25px;letter-spacing:var(--type-close-ls);color:#f7f7f4}
.closing-actions{display:flex;justify-content:center;gap:12px}
.closing .button.primary,html[data-theme="light"] .closing .button.primary{background:#f7f7f4;border-color:#f7f7f4;color:#171715}
.closing .button.primary:hover{background:#e9ecee;color:#171715}
.closing .button:not(.primary){background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.38);color:#f7f7f4}
.closing .button:not(.primary):hover{background:rgba(255,255,255,.12)}
.closing a:focus-visible{outline-color:#f7f7f4}

/* ---- footer -------------------------------------------------------------- */
/* Oct 29 2026: no rule between the closing band and the footer, as on atlas
   and phoenix; the rail's section rules above are unchanged */
/* the gap above is page ground: --space-footer, with nothing stacked on it */
.full-footer{display:grid;grid-template-columns:1.2fr repeat(4,1fr);align-items:start;gap:var(--space-4);padding:var(--space-footer) 0 calc(96px + env(safe-area-inset-bottom))}
.full-footer h3{font-size:13px;letter-spacing:0;margin-bottom:var(--space-3);color:var(--muted)}
.full-footer .col a{display:block;margin-bottom:var(--space-2);font-size:13px;color:var(--ink)}
.footer-legal{grid-column:1/-1;display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-top:10px;font-size:11px;color:var(--muted)}
.footer-legal nav{display:flex;gap:20px}






.machine-view{padding:calc(var(--nav-height) + 24px) 0 120px}
.machine-view pre{width:min(820px,calc(100% - 32px));margin:auto;white-space:pre-wrap;overflow-wrap:anywhere;font:12.5px/1.6 var(--mono);color:var(--ink)}

/* ---- widths -------------------------------------------------------------- */
@media(min-width:1600px){
  .wrap{width:min(1480px,calc(100% - 160px))}
  .hero-stage{padding:42px 76px}
  .app-layout{grid-template-columns:185px 1fr}
  .work{padding:30px 38px}
  .result-grid{gap:45px;padding-top:25px}
  .source-title,.topic-title{font-size:24px}
  .source-dek,.reason{font-size:12px}
}
@media(max-width:1050px){
  .wrap{width:calc(100% - 64px)}
  #site-nav{gap:17px}
  .hero-stage{padding:30px}
  .app-layout{grid-template-columns:130px 1fr}
  .work{padding:20px}
  .section-head{gap:35px}
}
@media(max-width:900px){
  .top header{gap:16px}
  #site-nav{gap:16px}
  .full-footer{grid-template-columns:repeat(4,1fr)}
  .full-footer>.footer-brand{grid-column:1/-1}
  .topic-explorer{grid-template-columns:1fr}
  .cloud-detail ul{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
  .cloud-detail p{margin-bottom:18px}
}
@media(max-width:760px){
  :root{--nav-height:65px;--hero-gap:32px}
  .wrap{width:calc(100% - 32px)}
  .lockup{height:29px}
  .hero h1{max-width:340px}
  /* 16px keeps iOS from zooming on focus; the placeholder stays at the design's size */
  .search-form{min-height:96px;border-radius:20px;padding:14px 56px 48px 16px}
  .search-form input{font-size:16px}
  .search-form input::placeholder{font-size:15px}
  /* the poster's own title sits at the centre; the play control keeps below it */
  .film-play{gap:6px;padding-bottom:3%;font-size:11px}
  .film-play-icon{width:40px;height:40px}
  .film-play-icon:after{border-width:7px 0 7px 11px;margin-left:3px}
  .hero-audiences{gap:25px;font-size:12px}
  .explainer{border-radius:8px}
  /* r103: 16px more between the film and the first section (8 here, 8 from the
     section's own padding); between sections the 16px comes from --space-section */
  .rail{margin-top:44px}
  .section-head{grid-template-columns:1fr;gap:var(--space-2)}
  .section-head p{font-size:13px}
  .scope-path{grid-template-columns:1fr;gap:7px;padding-bottom:25px;margin-bottom:25px}
  .scope-path li{padding:13px 16px;display:grid;grid-template-columns:25px 1fr;gap:0 8px}
  .scope-path li+li:before{display:none}
  .scope-path h3{margin:0 0 5px;font-size:18px}
  .scope-path span{grid-row:1/3;padding-top:5px}
  .scope-path p{grid-column:2}
  .reader-head{display:flex;flex-direction:column;align-items:flex-start;gap:18px}
  .reader-switch{justify-content:flex-start}
  .reader-grid{grid-template-columns:1fr;gap:28px}
  .real-page img{height:180px}
  .reader-copy h3{font-size:29px}
  .reader-context{display:grid;grid-template-columns:1fr}
  .reader-context h3{font-size:25px;margin:8px 0 14px}
  .table th,.table td{padding:15px 12px;font-size:11px}
  .window-head{padding:12px;font-size:11px}
  .hero-stage{height:auto;padding:14px;border-radius:10px}
  .app{height:auto;min-height:450px}
  .app-layout{grid-template-columns:1fr}
  .sidebar{display:none}
  .work{padding:19px 16px;overflow:visible}
  .work-header h4{font-size:19px}
  .result-grid{grid-template-columns:1fr;gap:22px}
  .result-grid>div+div{border-top:1px solid var(--a-line);padding-top:18px}
  .source-title,.topic-title{font-size:21px}
  .source-dek,.reason{font-size:11px;max-width:none}
  .source-headings button{font-size:10px}
  .app-footer{padding:10px 16px}
  .application-body{grid-template-columns:1fr}
  .application-side{border-right:0;border-bottom:1px solid var(--w-line);padding:12px;display:flex;gap:8px}
  .application-side p{display:none}
  .application-side button{font-size:11px;padding:8px}
  .application-main{padding:24px 18px}
  .application-main h3{font-size:23px}
  .match{font-size:11px}
  .product-paths{grid-template-columns:1fr;gap:30px}
  .ascii-flow{grid-template-columns:1fr;gap:35px}
  .ascii-flow article{border-bottom:1px solid var(--line);padding-bottom:20px}
  .ascii-flow article:last-child{border-bottom:0;padding-bottom:0}
  .ascii-step{height:210px}
  .ascii-step pre{font-size:12px}
  .ascii-flow h3{margin-top:var(--space-2)}
  .topic-explorer{gap:14px}
  .cloud-detail ul{display:block}
  .cloud-detail{padding:23px}
  .closing{padding:52px 18px;border-radius:10px}
  .closing-actions{flex-direction:column;align-items:center}
  .full-footer{grid-template-columns:1fr 1fr;gap:var(--space-4) var(--space-3)}
}

/* the menu: the estate's breakpoint (720), shared with atlas, phoenix and /about */
@media(max-width:720px){
  .theme-desktop{display:none}
  .theme-phone{display:grid;order:2;margin-left:auto}
  .burger{order:3;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:5px;width:44px;height:44px;margin-right:-8px;border:0;background:none;color:var(--ink);border-radius:8px}
  .burger i{display:block;width:20px;height:1px;background:currentColor}
  .top header{gap:8px}
  #site-nav{display:none;position:absolute;top:calc(100% - 4px);left:0;right:0;flex-direction:column;align-items:stretch;gap:0;padding:8px 18px 14px;background:var(--card);border:1px solid var(--line);border-radius:10px;font-size:14px}
  #site-nav .nav-first,#site-nav .nav-last{margin:0}
  #site-nav>a:not(.nav-cta){padding:12px 0;border-bottom:1px solid var(--line)}
  #site-nav .nav-cta{align-self:flex-start;margin-top:12px;min-height:44px;padding:13px 23px;font-size:13px}
  .top header.open #site-nav{display:flex}
}

/* ---- motion -------------------------------------------------------------- */
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*:before,*:after{animation:none!important;transition:none!important}
}

/* ---- the view toggle: navy segmented, option 02 (Oct 29 2026) ------------
   One skin on every surface (classify.ai, /about, /learn, the SPA routes,
   atlas and phoenix), from view-toggle-options.html. Light variant by
   default; the themed sites (the homepage, atlas, phoenix) switch to the dark
   variant with their theme through --vp-*. The radios stay real inputs for
   the selected state and the keyboard; they are drawn as segments. */
.viewpill{position:fixed;left:50%;bottom:calc(18px + env(safe-area-inset-bottom, 0px));transform:translateX(-50%);z-index:50;display:inline-flex;align-items:center;gap:3px;padding:4px;border-radius:30px;background:var(--vp-track, #e9eef2);border:1px solid var(--vp-edge, #bdcad5);box-shadow:0 10px 30px rgba(6,10,16,.16);font:14px/1 Arial,Helvetica,sans-serif;color:var(--vp-text, #625f58)}
.viewbar-label{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.viewbar-opt{position:relative;display:inline-flex;align-items:center;justify-content:center;min-height:40px;padding:10px 22px;border-radius:25px;color:var(--vp-text, #625f58);cursor:pointer;white-space:nowrap}
.viewbar-opt input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.viewbar-opt:has(input:checked){background:var(--vp-on, #20364b);color:var(--vp-on-text, #f7f7f4)}
.viewbar-opt:has(input:focus-visible){outline:2px solid #a9c4dc;outline-offset:3px}
/* r103: on phones the toggle leaves the floating layer and sits in the page
   flow at the end, clear of Safari's toolbar and the home indicator, so it can
   never cover a heading. Desktop keeps the floating pill. */
@media(max-width:760px){.full-footer{padding-bottom:var(--space-4)}.viewpill{position:relative;left:auto;bottom:auto;transform:none;display:flex;width:max-content;margin:var(--space-4, 32px) auto calc(var(--space-4, 32px) + env(safe-area-inset-bottom, 0px));box-shadow:none}}

/* the toggle's dark variant on this themed site; light under data-theme */
:root{--vp-track:#111820;--vp-edge:#34475a;--vp-text:#b4b1a7;--vp-on:#2a4056;--vp-on-text:#edf3f8}
html[data-theme="light"]{--vp-track:#e9eef2;--vp-edge:#bdcad5;--vp-text:#625f58;--vp-on:#20364b;--vp-on-text:#f7f7f4}