/* Subtextual homepage, direction D3 "the sticky canvas" (step 5a), on the step 4 system:
   /system/tokens.css, components.css and sticky-canvas.css carry the type, grid, colour and components.
   This file holds only what is the homepage's own: the hero, the film player, the AI and editor beats and their canvases.
   Spec: overhaul/system/system.md. Display face B (html[data-face="b"]). No third-party anything. */

/* ---------- 1 · Hero: copy in columns 1-5, the film beside it from 1200 px (the film needs >= 631 px for 13 px labels);
   stacked below 1200 with the figure at content width; phones (< 720) use the 4x5 frames. ---------- */
.d3-hero { padding-block: clamp(32px, 20.11px + 3.048vw, 64px) 0; }
.d3-hero-grid { display: grid; gap: var(--sx-s7); align-items: center; }
.d3-hero-copy { min-width: 0; }
.d3-hero .sx-d1 { margin-bottom: var(--sx-s5); }
.d3-hero .sx-lede { max-width: 30em; }
.d3-cta { margin: var(--sx-s6) 0 0; }
@media (min-width: 1200px) {
  .d3-hero-grid { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--sx-gutter); }
  .d3-hero-copy { grid-column: 1 / span 5; }
  /* "Thinking isn't." in face B is a few px wider than five columns at 1440: it may use the gutter; the film is held
     at 640 px (13.2 px labels) and set to the right edge, so the headline never meets it */
  .d3-hero .sx-d1 { margin-right: calc(-1 * var(--sx-gutter) - 24px); white-space: nowrap; }
  .d3-hero-fig { grid-column: 6 / -1; justify-self: end; width: min(100%, 640px); }
}

/* The hero (home-d3.js). Film mode (the default, R3-3): the reveal still (the LCP image), the muted loop over it once playing, pausable;
   the one exception to scroll as the clock (system.md § 6). Lift mode (R3-2, data-hero-mode="lift"): frame 0 of hero-lift at rest,
   later frames on the canvas as the page scrolls; reduced motion and scripts off show the thesis. */
.hero-film { position: relative; margin: 0; min-width: 0; aspect-ratio: 16 / 10; border-radius: var(--sx-radius); overflow: hidden; background: #f3f0ea; box-shadow: var(--sx-surface); }
@media (prefers-color-scheme: dark) { html:not([data-theme="light"]) .hero-film { background: #121315; } }
html[data-theme="dark"] .hero-film { background: #121315; }
@media (max-width: 719px) { .hero-film { aspect-ratio: 4 / 5; } }
.hero-film picture { display: contents; }
.hero-film img, .hero-canvas { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.hero-film video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; opacity: 0; transition: opacity var(--sx-dur-2) var(--sx-ease); }
.hero-film.is-live video { opacity: 1; }
.hero-film[role="button"] { cursor: pointer; }
.hero-film:focus-visible { outline: 2px solid var(--sx-focus); outline-offset: 4px; }
.hero-canvas { visibility: hidden; }
.hero-canvas.is-on { visibility: visible; }
.hero-thesis img { display: none; }                          /* scripts on: the rest frame (and, with reduced motion, the thesis) */
html:not(.sx-js) .hero-rest img { display: none; }           /* scripts off: the thesis still */
html:not(.sx-js) .hero-thesis img { display: block; }

/* ---------- 2 · The film link and its player (film.js; unchanged behaviour from the live page) ---------- */
.film-cta { margin: var(--sx-s5) 0 0; }
.film-link { display: inline-flex; align-items: center; gap: 8px; padding: 4px 0; font: 500 15px/1.2 var(--sx-ui); color: var(--sx-soft); text-decoration: none; transition: color var(--sx-dur-1) var(--sx-ease); }
.film-link:hover { color: var(--sx-ink); }
.film-link:hover .film-play { background: color-mix(in srgb, currentColor 10%, transparent); }
.film-link:focus { outline: none; }
.film-link:focus-visible { outline: 2px solid var(--sx-focus); outline-offset: 4px; border-radius: 6px; }
.film-label { text-decoration: none; }
.film-play { display: grid; place-items: center; flex: 0 0 24px; width: 24px; height: 24px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px currentColor; transition: background-color var(--sx-dur-1) var(--sx-ease); }
.film-play .sx-icon { width: 14px; height: 14px; display: block; margin-left: 1px; }
.film-dot { margin: 0 2px; color: var(--sx-muted); } /* aria-hidden; muted is 4.8:1 light, 6.7:1 dark (release 6) (QA 6a, D5; it was 60% opacity, 3.3:1) */

.film { position: fixed; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; outline: none; background: transparent; color: #fff; overflow: hidden; }
.film[open] { display: grid; place-items: center; }
.film::backdrop { background: rgba(0, 0, 0, 0.72); }
.film-stage { position: relative; width: min(960px, 88vw, calc(80vh * 16 / 9)); width: min(960px, 88vw, calc(80dvh * 16 / 9)); }
.film-frame { width: 100%; aspect-ratio: 16 / 9; border-radius: 12px; overflow: hidden; background: #000; box-shadow: 0 24px 64px rgba(0, 0, 0, 0.4); }
.film video { display: block; width: 100%; height: 100%; object-fit: contain; background: #000; border: 0; outline: none; }
.film video:focus, .film video:focus-visible { outline: none; }
.film-close { position: absolute; top: -44px; right: -44px; display: grid; place-items: center; width: 36px; height: 36px; padding: 0; border: 0; border-radius: 50%; background: rgba(255, 255, 255, 0.14); color: #fff; cursor: pointer; transition: background-color var(--sx-dur-1) var(--sx-ease); }
.film-close .sx-icon { width: 18px; height: 18px; }
.film-close:hover { background: rgba(255, 255, 255, 0.26); }
.film-close:focus { outline: none; }
.film-close:focus-visible { outline: 2px solid #8fb4d8; outline-offset: 2px; }
@media (max-width: 1100px) { .film-close { top: 10px; right: 10px; background: rgba(0, 0, 0, 0.5); } .film-close:hover { background: rgba(0, 0, 0, 0.7); } }
.film.is-4x5 .film-stage { width: min(calc(100vw - 32px), calc(80vh * 4 / 5)); width: min(calc(100vw - 32px), calc(80dvh * 4 / 5)); }
.film.is-4x5 .film-frame { aspect-ratio: 4 / 5; }
@media (prefers-reduced-motion: no-preference) {
  /* the film overlay (R3-2): opens with the backdrop's fade and the dialog's 6 px rise (--sx-dur-2); closes faster (--sx-dur-1) */
  .film[open] .film-stage { animation: film-in var(--sx-dur-2) var(--sx-ease); }
  .film[open]::backdrop { animation: film-fade var(--sx-dur-2) var(--sx-ease); }
  .film.is-closing .film-stage { animation: film-out var(--sx-dur-1) var(--sx-ease) forwards; }
  .film.is-closing::backdrop { animation: film-fade-out var(--sx-dur-1) var(--sx-ease) forwards; }
}
@keyframes film-in { from { opacity: 0; transform: translateY(6px); } }
@keyframes film-out { to { opacity: 0; transform: translateY(6px); } }
@keyframes film-fade { from { opacity: 0; } }
@keyframes film-fade-out { to { opacity: 0; } }

/* ---------- 3 · Beats ---------- */
/* The AI and editor beats (R3-1): the split head's two columns share one top line (heading in columns 1-4, copy in 6-12, no hole
   above the heading); the AI beat's claim is a subhead at D4, not bold body; its hand-over sits at the beat's bottom, beside the link. */
@media (min-width: 900px) {
  .sx-head.d3-split { align-items: start; }
  .sx-head.d3-split > :first-child { grid-column: 1 / span 4; }
  .sx-head.d3-split > :nth-child(2) { grid-column: 6 / -1; }
  .sx-head.d3-split-5 > :first-child { grid-column: 1 / span 5; } /* the editor heading sets in two lines ("Your editor writes" / "beneath, too."); the copy keeps 6-12 */
}
@media (min-width: 900px) and (max-width: 1099px) { /* narrower: the editor heading takes 1-6, its copy 7-12, so it still sets in two lines */
  .sx-head.d3-split-5 > :first-child { grid-column: 1 / span 6; }
  .sx-head.d3-split-5 > :nth-child(2) { grid-column: 7 / -1; }
}
.d3-sub { margin: var(--sx-s4) 0 0; color: var(--sx-ink); text-wrap: balance; } /* a section's subhead is D3 (system.md § 1) */
/* the hand-over and its link (R3-2): the sentence and the link never wrap around each other. The sentence is 1310 px on one line at
   17 px and the measure is 1180, so it can't sit on a single line; from 1200 the link runs on right after its last word, in the same line
   of text. Narrower, the link follows the sentence on its own line, left-aligned. */
.d3-handover-row { margin-top: var(--sx-s7); max-width: 64em; }
.d3-handover-row .d3-handover { margin: 0; font-size: var(--sx-body); line-height: 1.55; }
.d3-handover-row .sx-more { display: inline-block; margin-top: var(--sx-s2); }
@media (min-width: 1200px) {
  .d3-handover-row .d3-handover { display: inline; }
  .d3-handover-row .sx-more { margin: 0 0 0 0.6em; }
}
.sx-trust li { min-width: 0; }
.sx-trust .d3-trust-link { margin-top: var(--sx-s2); }
.sx-faq details a { color: var(--sx-accent); }
.sx-close .sx-d1 { margin-inline: auto; }

/* Keep a phrase whole inside a balanced heading ("Your draft. / AI beneath it."): the heading still balances, it just never splits the phrase. */
.sx-keep { display: inline-block; }

/* The homepage window's parts (8a/8b) are in home-window.css, generated by scripts/build-window.cjs and loaded only from 1200 px. */
/* Depth inside the window (release 6, system.md § 5). The page sheet is baked into the frame, so its lift is a pseudo-element on the
   clip rect (14, 90, 1524 x 859 of 1552 x 962, radius 21) with an outer shadow only: it falls on the shell, never on the sheet. The
   panel ground carries a static leftward drop-shadow, rasterised once with the layer and carried by its transform. Neither changes
   per frame: the moves stay transform and opacity. */
.sx-comp::after { content: ""; position: absolute; left: 0.9021%; right: 0.9021%; top: 9.3555%; bottom: 1.3514%; border-radius: 1.378% / 2.445%; box-shadow: var(--sx-shadow-in); pointer-events: none; }
/* At rest the panel waits just past the sheet's right edge, where its shadow would show; it is fully opaque after its first 3 px of travel
   (m1 0.05), so the shadow never shows without the panel. Opacity, not the shadow, is what changes. */
.sx-clip .sx-part[data-part="panel-ground"] { filter: drop-shadow(var(--sx-shadow-in-x)); opacity: clamp(0, var(--m1) * 20, 1); will-change: transform, opacity; }

/* ---------- 4 · The close-crop canvases (R3-1): the AI beat and the editor beat. A crop of the panel at reading size, no toolbar.
   Scroll objects (system/scroll-object.js, "parts"): the still (the whole meaning, with the alt) shows with scripts off and with reduced
   motion; otherwise the layers (frame, then parts) show, and the later parts arrive on their share of p (opacity, a 6 px rise). ---------- */
.d3-crop { position: relative; margin: 0; border-radius: var(--sx-radius); overflow: hidden; background: var(--sx-ground-2); box-shadow: var(--sx-surface); --p: 1; }
.d3-crop-still img { display: block; width: 100%; height: auto; }
.d3-crop-layers { display: none; position: relative; width: 100%; }
.d3-crop-layers picture { display: contents; }
.d3-crop-frame { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.d3-crop-part { position: absolute; display: block; max-width: none; }
@media (prefers-reduced-motion: no-preference) {
  html.sx-js .d3-crop.is-scroll .d3-crop-still img { display: none; }
  html.sx-js .d3-crop.is-scroll .d3-crop-desk { display: block; }
}
@media (prefers-reduced-motion: no-preference) and (max-width: 899px) {
  html.sx-js .d3-crop.is-scroll .d3-crop-desk { display: none; }
  html.sx-js .d3-crop.is-scroll .d3-crop-phone { display: block; }
}
@media (min-width: 720px) and (max-width: 899px) { .d3-crop { max-width: 480px; margin-inline: auto; } }
@media (max-width: 719px) { .d3-crop { margin-inline: calc(-1 * var(--sx-pad)); border-radius: 0; box-shadow: 0 -1px 0 var(--sx-ring), 0 1px 0 var(--sx-ring); } }
/* Depth inside the crops (release 6): from 900 px the panel sits over the page's edge (the sliver), at 350 of 2085 file px; a static
   leftward shadow from that edge lifts the panel over the page. Phones show no sliver, so no edge. */
@media (min-width: 900px) { .d3-crop::before { content: ""; position: absolute; z-index: 1; left: 8.4917%; top: 0; right: 0; bottom: 0; box-shadow: var(--sx-shadow-in-x); pointer-events: none; } }
/* canvas:parts · generated by scripts/build-canvas.cjs; edit the parts, not this */
.d3-crop-part[data-part="ai-desk-panel-para"]{left:23.5971%;top:16.9536%;width:69.6882%;height:15.4967%}
.d3-crop-part[data-part="ai-desk-rail-thoughts"]{left:24.0767%;top:39.0728%;width:0.1439%;height:60.9272%}
.d3-crop-part[data-part="ai-desk-row-question"]{left:25.5635%;top:38.4106%;width:73.2374%;height:12.5828%}
.d3-crop-part[data-part="ai-desk-rail-replies"]{left:28.8729%;top:51.6556%;width:0.1439%;height:37.7483%;--a:clamp(0, (var(--p) - 0.12) * 2.7778, 1);opacity:calc(var(--a) * var(--a) * (3 - 2 * var(--a)));transform:translateY(calc((1 - var(--a) * var(--a) * (3 - 2 * var(--a))) * 6px))}
.d3-crop-part[data-part="ai-desk-reply-1"]{left:33.1894%;top:54.9669%;width:62.446%;height:12.7152%;--a:clamp(0, (var(--p) - 0.12) * 2.7778, 1);opacity:calc(var(--a) * var(--a) * (3 - 2 * var(--a)));transform:translateY(calc((1 - var(--a) * var(--a) * (3 - 2 * var(--a))) * 6px))}
.d3-crop-part[data-part="ai-desk-reply-2"]{left:33.1894%;top:75.2318%;width:63.6451%;height:12.5828%;--a:clamp(0, (var(--p) - 0.52) * 2.7778, 1);opacity:calc(var(--a) * var(--a) * (3 - 2 * var(--a)));transform:translateY(calc((1 - var(--a) * var(--a) * (3 - 2 * var(--a))) * 6px))}
@media (min-width: 900px){.d3-crop[data-scene="ai"]{aspect-ratio:1896 / 755}.d3-crop[data-scene="ai"] .d3-crop-desk,.d3-crop[data-scene="ai"] .d3-crop-still img{width:109.9684%;max-width:none;margin-left:-9.9684%}}
.d3-crop[data-scene="ai"] .d3-crop-desk{aspect-ratio:2085 / 755}
.d3-crop-part[data-part="ai-phone-panel-para"]{left:6.9444%;top:10.6742%;width:77.5%;height:19.2884%}
.d3-crop-part[data-part="ai-phone-rail-thoughts"]{left:8.0556%;top:33.7079%;width:0.2778%;height:66.2921%}
.d3-crop-part[data-part="ai-phone-row-question"]{left:12.2222%;top:33.3333%;width:82.3611%;height:11.6105%}
.d3-crop-part[data-part="ai-phone-rail-replies"]{left:15.8333%;top:45.3184%;width:0.2778%;height:48.6891%;--a:clamp(0, (var(--p) - 0.12) * 2.7778, 1);opacity:calc(var(--a) * var(--a) * (3 - 2 * var(--a)));transform:translateY(calc((1 - var(--a) * var(--a) * (3 - 2 * var(--a))) * 6px))}
.d3-crop-part[data-part="ai-phone-reply-1"]{left:22.5%;top:47.3783%;width:60.4167%;height:24.8127%;--a:clamp(0, (var(--p) - 0.12) * 2.7778, 1);opacity:calc(var(--a) * var(--a) * (3 - 2 * var(--a)));transform:translateY(calc((1 - var(--a) * var(--a) * (3 - 2 * var(--a))) * 6px))}
.d3-crop-part[data-part="ai-phone-reply-2"]{left:22.5%;top:76.9663%;width:58.0556%;height:16.2921%;--a:clamp(0, (var(--p) - 0.52) * 2.7778, 1);opacity:calc(var(--a) * var(--a) * (3 - 2 * var(--a)));transform:translateY(calc((1 - var(--a) * var(--a) * (3 - 2 * var(--a))) * 6px))}
.d3-crop[data-scene="ai"] .d3-crop-phone{aspect-ratio:720 / 1068}
.d3-crop-part[data-part="share-desk-panel-para"]{left:23.5971%;top:31.9178%;width:69.6882%;height:16.0274%}
.d3-crop-part[data-part="share-desk-rail-notes"]{left:24.0767%;top:54.7945%;width:0.1439%;height:23.2877%;--a:clamp(0, (var(--p) - 0.12) * 2.7778, 1);opacity:calc(var(--a) * var(--a) * (3 - 2 * var(--a)));transform:translateY(calc((1 - var(--a) * var(--a) * (3 - 2 * var(--a))) * 6px))}
.d3-crop-part[data-part="share-desk-note-1"]{left:27.4341%;top:56.8493%;width:39.0408%;height:7.5342%;--a:clamp(0, (var(--p) - 0.12) * 2.7778, 1);opacity:calc(var(--a) * var(--a) * (3 - 2 * var(--a)));transform:translateY(calc((1 - var(--a) * var(--a) * (3 - 2 * var(--a))) * 6px))}
.d3-crop-part[data-part="share-desk-note-2"]{left:27.4341%;top:69.863%;width:54.5803%;height:7.5342%;--a:clamp(0, (var(--p) - 0.52) * 2.7778, 1);opacity:calc(var(--a) * var(--a) * (3 - 2 * var(--a)));transform:translateY(calc((1 - var(--a) * var(--a) * (3 - 2 * var(--a))) * 6px))}
@media (min-width: 900px){.d3-crop[data-scene="share"]{aspect-ratio:1896 / 730}.d3-crop[data-scene="share"] .d3-crop-desk,.d3-crop[data-scene="share"] .d3-crop-still img{width:109.9684%;max-width:none;margin-left:-9.9684%}}
.d3-crop[data-scene="share"] .d3-crop-desk{aspect-ratio:2085 / 730}
.d3-crop-part[data-part="share-phone-panel-para"]{left:6.9444%;top:24.6269%;width:77.5%;height:25.6219%}
.d3-crop-part[data-part="share-phone-rail-notes"]{left:8.0556%;top:55.2239%;width:0.2778%;height:28.8557%;--a:clamp(0, (var(--p) - 0.12) * 2.7778, 1);opacity:calc(var(--a) * var(--a) * (3 - 2 * var(--a)));transform:translateY(calc((1 - var(--a) * var(--a) * (3 - 2 * var(--a))) * 6px))}
.d3-crop-part[data-part="share-phone-note-1"]{left:12.5%;top:56.7164%;width:67.9167%;height:10.9453%;--a:clamp(0, (var(--p) - 0.12) * 2.7778, 1);opacity:calc(var(--a) * var(--a) * (3 - 2 * var(--a)));transform:translateY(calc((1 - var(--a) * var(--a) * (3 - 2 * var(--a))) * 6px))}
.d3-crop-part[data-part="share-phone-note-2"]{left:12.5%;top:72.1393%;width:66.9444%;height:10.3234%;--a:clamp(0, (var(--p) - 0.52) * 2.7778, 1);opacity:calc(var(--a) * var(--a) * (3 - 2 * var(--a)));transform:translateY(calc((1 - var(--a) * var(--a) * (3 - 2 * var(--a))) * 6px))}
.d3-crop[data-scene="share"] .d3-crop-phone{aspect-ratio:720 / 804}
/* /canvas:parts */