/* Shared stylesheet for the Unblo landing pages. See DESIGN.md. */
/* The wordmark's face, the same file the app serves so the two lockups match
   exactly. One weight, 29 KB, swap — it never blocks a render. */
@font-face{
  font-family:"Tw Cen MT Medium";
  src:url("fonts/TwentiethCenturyMedium.woff2") format("woff2");
  font-weight:500;
  font-style:normal;
  font-display:swap;
}
/* Geist, self-hosted: the two weights the page uses and the mono, swap. Light (300)
   was the poster sentence's weight; it left with the sentence on 2026-09-05 and its
   file stays in fonts/ for the day a poster returns. */
@font-face{
  font-family:"Geist";
  src:url("fonts/Geist-Regular.woff2") format("woff2");
  font-weight:400;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:"Geist";
  src:url("fonts/Geist-Medium.woff2") format("woff2");
  font-weight:500;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:"Geist Mono";
  src:url("fonts/GeistMono-Regular.woff2") format("woff2");
  font-weight:400;
  font-style:normal;
  font-display:swap;
}
/* What shows during the swap: the system grotesk with its metrics pulled to
   Geist's, so lines break in the same places and nothing shifts when it lands. */
@font-face{
  font-family:"Geist Fallback";
  src:local("Helvetica Neue"), local("Arial");
  size-adjust:100%;
  ascent-override:100.5%;
  descent-override:29.5%;
  line-gap-override:0%;
}
/* ------------------------------------------------------------------
   Tokens. See DESIGN.md. Single theme, painted explicitly.
------------------------------------------------------------------ */
:root{
  --paper:#F4F4F4;   /* the canvas, matching ploy's background-primary */
  --card:#FFFFFF;    /* surfaces that sit on the canvas: screenshot slots, the secondary button */
  --on-ink:#FFFFFF;  /* text reversed out of ink or Klein; stays pure white */
  --ink:#111111;
  --ink-2:#5C5C5C;
  --grey:#E9E9EA;    /* one step under the canvas: the secondary button's hover */
  --line:#CFCFD1;    /* darkened with the canvas: on grey, #D9D9DB dropped the grid to 1.28:1 */
  --klein:#002FA7;
  --line-on-klein: rgba(255,255,255,0.28);   /* the grid's rails where they cross the Klein block; a rule, not a surface */
  --on-ink-2: rgba(255,255,255,0.72);        /* secondary text on Klein: the role and the date under the quote on the reframe */
  --klein-deep:#00246F;  /* Klein under the pointer */
  --err:#B3261E;         /* the one colour outside the palette: a field that will not send */

  /* The CRT silver on main, shared with the hero's machined enclosure. */
  --hardware-light:#E9E9EA;
  --hardware-face:#DDDDE0;
  --hardware-shade:#CECED1;
  --hardware-edge:#A9AAAD;
  --hardware-engraving:#9599A1;

  /* Reference-locked to the sites in DESIGN.md: a compact neo-grotesk for
     everything, its mono for metadata. Self-hosted, with the metric-matched
     fallback second so the swap does not reflow. */
  --font-sans:'Geist','Geist Fallback','Inter',-apple-system,'Helvetica Neue',Helvetica,Arial,sans-serif;
  --font-mono:'Geist Mono',ui-monospace,'SF Mono',Menlo,monospace;

  --pad:24px;        /* horizontal cell padding */
  --band:48px;       /* vertical padding of a content row */
  --air:96px;        /* vertical padding of a statement row */
  --margin:24px;
  --ease-out:cubic-bezier(0.23,1,0.32,1);   /* the one curve for anything that enters or leaves */
  color-scheme:light;
}
@media (min-width:1280px){ :root{ --margin:48px; --pad:28px; } }


*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--font-sans);
  font-size:16px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
a{ color:inherit; text-decoration:none; }
/* Buttons and fields do not inherit the page face by default: every browser sets them in
   its own control font. Until 2026-09-05 every button on the page was in the system
   sans, close enough to Geist at 15px that nobody caught it. */
button, input, select, textarea{ font:inherit; }
p{ margin:0; }
h1,h2{ margin:0; font-weight:400; }
ul,ol{ margin:0; padding:0; list-style:none; }
dl,dd{ margin:0; }

:focus-visible{ outline:2px solid var(--klein); outline-offset:2px; }

/* ------------------------------------------------------------------
   Type. Four roles below display: lead, body, meta, control.
------------------------------------------------------------------ */
.t-hero{
  font-size:clamp(36px,4.5vw,68px);
  letter-spacing:-0.03em;
  line-height:1.04;
  text-wrap:balance;
}
.t-hero .line{ display:block; white-space:nowrap; }
@media (max-width:900px){ .t-hero .line{ white-space:normal; } }
/* Klein is the colour of display type, not only of the one block. This is the move
   listenlabs makes: the headline is the brand, and everything around it stays quiet.
   Body, controls, metadata and the grid remain ink. */
.t-hero, .t-line{ color:var(--klein); }
.t-line{
  font-size:clamp(28px,2.9vw,44px);
  letter-spacing:-0.025em;
  line-height:1.05;
  text-wrap:balance;
}
/* The page's one quote: the hero's numbers, white on the Klein screen. A person speaking
   is not a heading, so it is not Klein type; it is white on Klein, as the poster sentence
   was until 2026-09-05. Nothing else uses it. Leading 1.04, the hero's: three lines this large want to hold
   together. */
.t-quote{
  font-size:clamp(36px, 4.5vw, 68px);
  letter-spacing:-0.03em;
  line-height:1.04;
  max-width:24ch;      /* three lines at 1512 */
  text-wrap:balance;   /* three lines of one length, not two long and a short one */
}

.t-lead{
  font-size:22px;
  letter-spacing:-0.01em;
  line-height:1.35;
  max-width:46ch;
  text-wrap:pretty;
}
.t-body{ font-size:16px; line-height:1.5; max-width:56ch; text-wrap:pretty; }
.t-meta{
  font-family:var(--font-mono);
  font-size:12px;
  letter-spacing:0.01em;
  line-height:1.4;
}
.strong{ font-weight:500; }
.muted{ color:var(--ink-2); }
.num{ font-variant-numeric:tabular-nums; }

/* ------------------------------------------------------------------
   The grid. Two outer rails, one rule between bands.
   Vertical rules appear only on rows marked .ruled.
------------------------------------------------------------------ */
.wrap{
  margin:0 var(--margin);
  border-left:1px solid var(--line);
  border-right:1px solid var(--line);
}
.row{
  display:grid;
  grid-template-columns:repeat(12,minmax(0,1fr));
  border-top:1px solid var(--line);
}
.row > .c{ padding:var(--band) var(--pad); min-width:0; }
.row.ruled > .c + .c{ border-left:1px solid var(--line); }

.s4{grid-column:span 4} .s5{grid-column:span 5}
.s6{grid-column:span 6} .s7{grid-column:span 7} .s8{grid-column:span 8}
.s10{grid-column:span 10} .s12{grid-column:span 12}
.from8{ grid-column:8 / span 5; }
.from9{ grid-column:9 / span 4; }
.from5{ grid-column:5 / span 8; }

/* section header: the name, one cell, one line, in ink at Control size and weight
   (the labels inside a section stay muted 400). It sticks under the nav while its
   section scrolls and is pushed out by the next one, so the reader always knows
   which section they are in. It carries its own bottom rule, and the row under it
   gives up its top rule, so the two never stack. */
.sh{ position:sticky; top:var(--nav-h,56px); z-index:5; background:var(--paper); border-bottom:1px solid var(--line); }
.sh + .row{ border-top:0; }
.sh > .c{ padding-top:14px; padding-bottom:14px; display:flex; gap:20px; align-items:baseline; color:var(--ink); font-weight:500; font-size:15px; }

/* The record cell of a section: its blocks are separated by hairlines inside the
   cell; no vertical rule is drawn anywhere. */
.stack > * + *{ border-top:1px solid var(--line); }
.stack > *{ padding:32px 0; }
.stack > :first-child{ padding-top:0; }
.stack > :last-child{ padding-bottom:0; }

/* statement row */
.air > .c{ padding-top:var(--air); padding-bottom:var(--air); }

section{ scroll-margin-top:var(--nav-h,56px); }

/* ------------------------------------------------------------------
   Nav
------------------------------------------------------------------ */
.nav{
  position:sticky; top:0; z-index:10;
  background:var(--paper);
  border-bottom:1px solid var(--line);
}
.nav .in{
  margin:0 var(--margin);
  height:56px;
  /* three tracks: mark left, links centred on the page, action right */
  display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:32px;
  border-left:1px solid var(--line);
  border-right:1px solid var(--line);
  padding:0 var(--pad);
}
.nav .in > .wordmark{ justify-self:start; }
.nav .in > .btn{ justify-self:end; }
.wordmark{ color:var(--klein); display:inline-flex; align-items:center; gap:8px; font-family:"Tw Cen MT Medium","Twentieth Century Pro","Century Gothic","Avenir Next",var(--font-sans); font-size:20px; font-weight:500; letter-spacing:-0.02em; line-height:1; }
/* The mark ships as black artwork. Rather than recolour the file it is used as an
   alpha mask on an empty element and filled with the wordmark's own colour, so the
   mark and the name are exactly one colour. It is decorative, so it carries no image
   element and no alt text: an <img> would keep painting its black self over the mask. */
.wordmark .mk{ display:block; width:24px; height:24px; flex:0 0 auto;
  background:currentColor;
  -webkit-mask:url(logos/unblo-mark.png) center/contain no-repeat;
          mask:url(logos/unblo-mark.png) center/contain no-repeat; }
/* In the nav the wordmark is the one thing larger than the links: 28px mark, 24px name,
   centred on the same line as the links and the 40px button. */
.nav .wordmark{ font-size:24px; gap:9px; }
.nav .wordmark .mk{ width:28px; height:28px; }
.nav .in > nav{ justify-self:center; }
.mobile-menu{ display:none; }
.nav ul{ display:flex; gap:28px; align-items:center; }
/* The links draw as one line of text with a rule under it, but their box is 44px tall
   (padding, pulled back with a negative margin) so a thumb lands on them. */
.nav li a:not(.btn){ color:var(--klein); font-size:15px; font-weight:500; line-height:1; padding:14px 0; margin:-8px 0; border-bottom:1px solid transparent; transition:border-color 150ms ease; }
.nav li a:not(.btn):hover{ border-bottom-color:var(--klein); }
.nav .btn{ height:44px; padding:0 18px; margin-left:8px; }   /* 44 in the 56px bar: the one control on a phone */

/* ------------------------------------------------------------------
   Buttons
------------------------------------------------------------------ */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  cursor:pointer;
  height:44px; padding:0 20px;
  border-radius:2px;
  font-size:15px; font-weight:500; line-height:1;
  white-space:nowrap;
  border:1px solid var(--klein);
  background:var(--klein); color:var(--on-ink);
  transition:background-color 200ms ease, border-color 200ms ease, transform 160ms var(--ease-out);
}
.btn.alt{ background:var(--card); color:var(--klein); border-color:var(--klein); }
/* Large: the hero and the close. 52px, Body size, wider padding. */
.btn.lg{ height:52px; padding:0 28px; font-size:16px; }
/* The arrow is drawn, not typed: a 16px stroke at 1.5px with square caps, the weight
   of the Geist letterforms beside it. The text glyph was thinner and wider than the type. */
.btn .arrow{ margin-left:10px; display:inline-flex; transition:transform 200ms var(--ease-out); }
.arrow svg{ display:block; }
@media (hover:hover) and (pointer:fine){
  .btn:hover{ background:var(--klein-deep); border-color:var(--klein-deep); }
  .btn.alt:hover{ background:var(--grey); }
  .btn:hover .arrow{ transform:translateX(3px); }
}
/* A press on a touch screen answers in the page's own colours: the browser's tap
   flash (a translucent blue on iOS) is off, and the control darkens or greys for the
   press instead, as it does under a pointer. Colour only, no transform: a finger
   covers the control, so the scale that a pointer sees would go unseen (2026-09-10). */
a, button, summary, input, [role="button"]{ -webkit-tap-highlight-color:transparent; }
@media (hover:none){
  .btn:active{ background:var(--klein-deep); border-color:var(--klein-deep); }
  .btn.alt:active{ background:var(--grey); }
  .link:active, .nav li a:not(.btn):active, .mobile-menu summary:active, .test-transport button:active, .verdict-tabs button:active, .loop .step-trigger:active, .evidence-detail > summary:active, .full-capture > summary:active, .evidence-close:active{ color:var(--klein-deep); }
  .nav li a:not(.btn):active{ border-bottom-color:var(--klein-deep); }
}
/* 44 under the sub-line against 24 above it: the headline and its sentence are one
   statement, and the control is the answer to it, not the third line of it. */
.hero-btns{ margin-top:44px; display:flex; flex-wrap:wrap; align-items:center; gap:14px 22px; }


/* Email capture. The address carries into the request form to avoid retyping it.
   The field is the white surface; the button is the same ink control as everywhere. */
.capture{ display:flex; align-items:stretch; width:100%; min-width:0; transition:transform 160ms var(--ease-out); }
.capture input{
  flex:1; min-width:0;
  font:inherit; font-size:16px; line-height:1;
  height:56px; width:clamp(220px, 22vw, 320px); padding:0 18px;
  background:var(--card); color:var(--klein);
  border:1px solid var(--klein); border-right:0; border-radius:2px 0 0 2px;
  outline-offset:-2px;
}
.capture input::placeholder{ color:var(--klein); opacity:1; }   /* listenlabs sets the prompt in full brand blue */
.capture input:focus::placeholder{ color:var(--ink-2); }         /* the prompt steps back once the field is being written in */
/* The press is answered by the whole control: field and button are one object, and
   a button scaling on its own opened a hairline down the seam on every click. */
.capture .btn{ height:56px; flex-shrink:0; border-radius:0 2px 2px 0; }
@media (hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){
  .btn:active:not(:focus-visible){ transform:scale(.97); }
  .capture .btn:active{ transform:none; }
  .capture:has(.btn:active:not(:focus-visible)){ transform:scale(.985); }
}
.capture input[aria-invalid="true"]{ border-color:var(--err); }
/* The script puts the message after the form, inside the wrapping flex row. It takes
   a row of its own under the control: full basis, and the body measure lifted, since
   at 56ch it still fitted beside the form. Ordered last so the plain action beside
   the form (the close) stays on the form's line rather than dropping under the message. */
.hero-btns .err{ flex-basis:100%; max-width:none; order:1; margin-top:0; color:var(--err); }
@media (max-width:600px){
  :root{ --margin:16px; --pad:16px; }
  .capture{ flex-direction:column; width:100%; }
  .capture input{ flex:none; width:100%; border-right:1px solid var(--klein); border-radius:2px 2px 0 0; }
  .capture .btn{ border-radius:0 0 2px 2px; justify-content:center; }
}

/* visually hidden, still read aloud */
.vh{ position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }
/* A machined path sculpture. All face shading lives in the editable SVG scene. */
.hero{ position:relative; }
.stagecell{ position:relative; overflow:hidden; }
.agent-test{ position:absolute; inset:0; margin:0; display:flex; flex-direction:column; justify-content:center; padding:32px var(--pad); }
/* The full camera frame can shrink above the caption and controls on short screens. */
.test-visual{ width:100%; aspect-ratio:440 / 332; flex:0 1 auto; min-height:0; }
.test-sculpture{ display:block; width:100%; height:100%; transform-origin:50% 65%; }
.test-caption{ flex:none; margin:16px 0 0; font-size:16px; line-height:1.5; }
.test-count{ display:block; margin-bottom:8px; font-weight:500; }
.test-sentences{ display:grid; color:var(--ink-2); }
/* All captions size the same grid cell; only the selected one is visible or spoken. */
.test-sentence{ grid-area:1 / 1; visibility:hidden; }
.test-sentence[aria-hidden="false"]{ visibility:visible; }
.test-transport{ display:flex; flex:none; align-items:center; gap:12px; margin:0; border-bottom:1px solid var(--line); }
.test-transport[hidden]{ display:none; }
.test-chapters{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); flex:1; gap:12px; }
.test-chapters button{ min-width:44px; min-height:44px; text-align:left; font-size:15px; font-weight:400; padding:12px 0; margin-bottom:-1px; border:0; border-bottom:1px solid transparent; background:none; color:var(--ink-2); cursor:pointer; white-space:nowrap; }
.test-chapters button[aria-pressed="true"]{ color:var(--klein); border-bottom-color:var(--klein); }
.test-transport button:focus-visible{ outline:2px solid var(--klein); outline-offset:3px; }
@media (hover:hover) and (pointer:fine){
  .test-transport button:hover{ color:var(--klein); }
  .test-transport button{ transition:transform 120ms var(--ease-out), color 150ms ease; }
  .test-transport button:active:not(:focus-visible){ transform:scale(.97); }
}
@media (min-width:901px) and (max-width:1350px){
  .agent-test{ padding-inline:16px; }
  .test-chapters{ grid-template-columns:repeat(3,max-content); justify-content:space-between; gap:8px; }
  .test-transport{ gap:8px; }
}
@media (prefers-reduced-motion:reduce){ .agent-test *{ animation:none !important; transition:none !important; } }
@media (prefers-reduced-motion:reduce){ .test-sculpture{ transform:none !important; } }
/* The type is real, selectable text. */
.hero .t-hero, .hero .t-lead{ user-select:text; cursor:text; }
.hero a, .hero .btn{ cursor:pointer; }
/* Below 900 the band has no room for two cells: the demo is dropped rather than
   squeezed, and the type takes the whole band. */
/* Below 900 the band has no room for two cells, so the illustration takes the band
   under the type rather than being dropped (it was dropped from 2026-09-03 to
   2026-09-10, when the phone and the tablet lost the page's one picture of the
   mechanism). It sits at the type's left edge, on the lead's measure, and plays
   there; the scroll tilt stays a desktop move. */
@media (max-width:900px){
  .stagecell{ overflow:visible; }
  .agent-test{ position:static; max-width:600px; padding:0; }   /* the lead and the form share this measure */
  .test-visual{ flex:none; }
}
.link{ color:var(--klein); text-decoration:underline; text-underline-offset:3px; text-decoration-thickness:1px; transition:color 150ms ease; }
.link:hover{ color:var(--klein-deep); }
button.link{ padding:0; border:0; background:none; font:inherit; cursor:pointer; }

/* ------------------------------------------------------------------
   Frame and timeline
------------------------------------------------------------------ */
.frame{
  position:relative; container-type:inline-size;
  background:transparent;
}
/* Physical hardware is the user-approved exception to the flat page surfaces.
   Container units follow the glass opening, keeping the application in proportion. */
.crt-case{
  padding:14px 14px 0;
  border:1px solid #a9aaad;
  border-radius:12px;
  background:linear-gradient(135deg,#e9e9ea 0%,#dddde0 55%,#ceced1 100%);
  box-shadow:inset 0 2px 1px #ffffff,inset 2px 0 2px #f4f4f4,
    inset -2px -3px 2px #b6b7bb,0 2px 2px #11111112,0 10px 16px -12px #11111155;
}
.crt-glass{
  position:relative; container-type:inline-size;
  padding:5px; border:1px solid #6b7783; border-radius:10px;
  background:#242a30;
  box-shadow:0 1px 0 #ffffff,inset 0 2px 3px #11111190,
    inset 2px 0 2px #11111155;
}
.crt-glass > .shot{ overflow:hidden; border-radius:5px; }
.crt-glass::after{
  content:''; position:absolute; inset:5px; border-radius:5px; pointer-events:none;
  box-shadow:inset 0 1px 2px #11111138,inset 1px 0 1px #11111120;
}
.crt-chin{ display:flex; align-items:center; gap:14px; height:34px; padding:0 3px; }
/* Shallow silver engraving: a dark upper cut and a light lower lip, with no badge. */
.crt-emblem{ flex:none; gap:5px; color:#9599a1; font-size:16px;
  filter:drop-shadow(0 1px 0 #ffffffb8); }
.crt-emblem .mk{ width:16px; height:16px;
  background:linear-gradient(180deg,#7e838c 0%,#b5b8bf 48%,#9297a0 100%); }
.crt-name{ text-shadow:0 -0.5px 0 #72778270; }
.crt-vents{ display:flex; gap:3px; }
.crt-vents i{ width:2px; height:9px; border-radius:1px; background:#999ba1; box-shadow:1px 1px 0 #ffffff; }
.crt-drive{ display:flex; align-items:center; gap:9px; margin-left:auto; }
.crt-drive::before{ content:''; width:66px; height:3px; border-radius:1px; background:#64676d; box-shadow:0 1px 0 #ffffff,inset 0 1px 1px #303236; }
.crt-drive > span{ width:6px; height:3px; border-radius:1px; background:var(--klein); box-shadow:0 1px 0 #ffffff; }
/* The fictional workspace is the framed object. Evidence is readable beside its
   source; mobile clones the same content instead of reconstructing the claims. */
.frame .cap{ display:flex; align-items:baseline; justify-content:space-between; gap:16px; padding:12px 2px; color:var(--ink-2); }
.frame .cap-note{ font-size:13px; line-height:1.4; text-align:right; }
.run-context{ margin-top:-24px; }
.run-context > .cap-note{ display:block; margin-top:12px; color:var(--ink-2); font-size:13px; line-height:1.4; }
.full-capture > summary{ display:none; }
.evidence-detail > summary{ color:var(--klein); font-size:16px; cursor:pointer; padding:10px 0; min-height:44px; }
.capture-viewport{ border-radius:2px; }
.evidence-crop{ margin:8px 0 0; padding:16px; border:1px solid var(--line); border-radius:2px; container-type:inline-size; }
.evidence-image{ font:16px/1.5 var(--font-sans); color:var(--ink); }
.evidence-heading{ margin-bottom:16px; font-weight:500; }
.evidence-crop figcaption{ padding-top:16px; color:var(--ink-2); }
.evidence-close{ display:block; width:fit-content; min-height:44px; border:0; padding:10px 0; background:transparent; color:var(--klein); font-size:16px; line-height:1.5; cursor:pointer; }
.evidence-reader[hidden]{ display:none; }
.evidence-reader-head .cap-note{ display:block; margin-top:8px; font-size:13px; line-height:1.4; color:var(--ink-2); }
.evidence-reader-head{ display:flex; justify-content:space-between; align-items:baseline; gap:24px; margin-bottom:24px; }
.evidence-reading-grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:32px; }
.evidence-reading-grid > .evidence-crop{ margin:0; padding:24px 0 0; border:0; border-top:1px solid var(--line); border-radius:0; }
.evidence-reading-grid > .evidence-crop:last-child{ grid-column:1 / -1; }
.evidence-reader, .evidence-crop{ scroll-margin-top:calc(var(--nav-h,56px) + 76px); }
/* A 1200 × 750 desktop capture, scaled as one composition inside the glass.
   1cqw = 12 native pixels. Pixel floors here would enlarge individual controls
   independently and force the screen to grow; mobile excerpts have their own scale. */
.shot{
  --work-space:1.333333cqw;
  --work-toolbar:3.666667cqw;
  --work-small:1.083333cqw;
  --work-meta:1cqw;
  font:1.25cqw/1.5 var(--font-sans);
  color:var(--ink); background:var(--card); height:62.5cqw;
}
.work-shot{ display:flex; flex-direction:column; position:relative; isolation:isolate; }
.work-symbols{ position:absolute; width:0; height:0; overflow:hidden; }
.work-icon{ display:block; flex:none; width:1.333333cqw; height:1.333333cqw; fill:none; stroke:currentColor; stroke-width:1.4; stroke-linecap:round; stroke-linejoin:round; }
.work-top{ display:flex; align-items:center; gap:2cqw; height:var(--work-toolbar); flex:none; padding:0 1.7cqw; border-bottom:1px solid var(--line); }
.work-brand{ display:flex; align-items:center; gap:0.9cqw; font-size:1.333333cqw; letter-spacing:-.03em; font-weight:500; }
.work-logo{ display:block; flex:none; width:1.666667cqw; height:1.666667cqw; color:var(--ink); }
.work-logo svg{ display:block; width:100%; height:100%; }
.work-breadcrumb{ display:flex; align-items:center; gap:1cqw; font-size:var(--work-small); color:var(--ink-2); }
.work-breadcrumb > span{ color:var(--ink); }
.work-breadcrumb .work-icon{ width:1.3cqw; height:1.3cqw; }
.work-search{ display:flex; align-items:center; gap:0.7cqw; margin-left:auto; width:16cqw; padding:0.6cqw 0.9cqw; background:var(--paper); border-radius:2px; font-size:var(--work-small); color:var(--ink-2); }
.work-search .work-icon{ width:1.5cqw; height:1.5cqw; }
.work-account{ display:flex; align-items:center; gap:0.6cqw; font-size:var(--work-small); color:var(--ink-2); white-space:nowrap; }
.work-account .work-icon{ width:1.3cqw; height:1.3cqw; transform:rotate(90deg); }
.work-body{ display:grid; grid-template-columns:4cqw 34cqw minmax(0,1fr); flex:1; min-width:0; min-height:0; }
.work-rail{ display:flex; flex-direction:column; align-items:center; gap:1cqw; padding:1.2cqw 0; border-right:1px solid var(--line); color:var(--ink-2); }
.work-rail > span{ display:grid; place-items:center; width:100%; height:2.666667cqw; position:relative; }
.work-rail .work-icon{ width:1.5cqw; height:1.5cqw; }
.work-rail .work-rail-active{ color:var(--klein); }
.work-rail-active::before{ content:''; position:absolute; left:0; top:0.4cqw; bottom:0.4cqw; width:2px; background:var(--klein); }
.work-rail .work-rail-bottom{ margin-top:auto; }
.work-chat{ display:flex; flex-direction:column; min-width:0; background:var(--paper); }
.work-pane-head{ display:flex; align-items:center; justify-content:space-between; height:var(--work-toolbar); flex:none; padding:0 var(--work-space); border-bottom:1px solid var(--line); font-size:var(--work-small); }
.work-pane-head .work-label{ margin:0; }
.work-chrome-action{ color:var(--ink-2); }
.work-conversation{ flex:1; padding:1.666667cqw var(--work-space); }
.work-message, .work-result{ position:relative; min-width:0; }
.work-label{ font-weight:500; margin-bottom:1cqw; }
.work-time{ font:400 var(--work-meta)/1.4 var(--font-mono); color:var(--ink-2); margin-left:0.8cqw; white-space:nowrap; }
.work-user-message{ margin-left:2cqw; padding:1cqw; background:var(--card); border-radius:2px; }
.work-request .work-label{ display:flex; justify-content:space-between; align-items:baseline; font-size:var(--work-small); color:var(--ink-2); }
.work-attachments{ margin-top:1.1cqw; padding-top:1cqw; border-top:1px solid var(--line); }
.work-file{ display:grid; gap:0.4cqw; font:400 var(--work-meta)/1.5 var(--font-mono); color:var(--ink-2); }
.work-file > span{ display:flex; align-items:center; gap:0.7cqw; }
.work-file .work-icon{ width:1.5cqw; height:1.5cqw; }
.work-activity{ display:flex; align-items:center; gap:0.7cqw; font-size:var(--work-small); color:var(--ink-2); padding:1.333333cqw 0 1.333333cqw 2cqw; }
.work-activity .work-icon{ width:1.5cqw; height:1.5cqw; }
.work-activity > .work-time{ display:none; }
.work-response .work-label{ display:flex; align-items:center; gap:0.8cqw; margin-bottom:0.8cqw; font-size:var(--work-small); }
.work-completion{ margin-left:2cqw; }
.work-agent-message{ padding:1cqw; }
.work-response .work-label > .work-time{ margin-left:auto; }
.work-agent-icon{ display:grid; place-items:center; width:1.666667cqw; height:1.666667cqw; color:var(--ink); }
.work-agent-icon .work-icon{ width:1.8cqw; height:1.8cqw; }
.work-artifact{ display:flex; align-items:center; gap:1.1cqw; margin:1.333333cqw 0 0; padding:1cqw; background:var(--card); border-radius:2px; font-size:var(--work-small); }
.work-artifact > div > span:first-child{ font-weight:500; }
.work-artifact > .work-icon:first-child{ color:var(--ink-2); }
.work-artifact > .work-icon:last-child{ margin-left:auto; width:1.5cqw; height:1.5cqw; color:var(--ink-2); }
.work-artifact-meta{ display:block; color:var(--ink-2); margin-top:0.2cqw; font-size:var(--work-meta); }
.work-compose-wrap{ margin-top:auto; padding:0 var(--work-space) 1.2cqw; }
.work-composer{ padding:1.2cqw; border-radius:2px; background:var(--card); color:var(--ink-2); }
.work-composer > div{ display:flex; justify-content:space-between; align-items:center; margin-top:1.2cqw; }
.work-compose-tools{ display:flex; align-items:center; gap:1cqw; font-size:var(--work-small); }
.work-send{ display:grid; place-items:center; width:2.333333cqw; height:2.333333cqw; background:var(--klein); color:var(--card); border-radius:2px; }
.work-chat-note{ font-size:var(--work-meta); color:var(--ink-2); margin:1cqw 0.5cqw 0; }
.work-result{ display:flex; flex-direction:column; border-left:1px solid var(--line); }
.work-result-kind{ display:flex; align-items:center; gap:0.8cqw; font-size:var(--work-small); color:var(--ink-2); }
.work-comparison{ display:flex; flex:1; flex-direction:column; }
/* Add task supplies the lower spacing; a second bottom pad clips source evidence
   at the narrowest desktop width once the table has consistent inner padding. */
.work-brief{ order:0; flex:1; min-width:0; padding:0 var(--work-space); }
.work-task-heading{ padding:2cqw 0 2cqw; }
.work-title-row{ display:flex; align-items:center; justify-content:space-between; gap:1cqw; }
.work-share{ display:flex; align-items:center; gap:0.4cqw; flex:none; padding:0.55cqw 0.75cqw; border:1px solid var(--line); border-radius:2px; font-size:var(--work-small); }
.work-share .work-icon{ width:1.3cqw; height:1.3cqw; transform:rotate(90deg); }
.work-title{ font-size:2cqw; letter-spacing:-.03em; line-height:1.2; }
.work-location{ display:flex; align-items:center; gap:1.4cqw; margin-top:0.9cqw; font-size:var(--work-small); color:var(--ink-2); }
.work-location .work-time{ display:inline-flex; align-items:center; gap:0.4cqw; margin-left:0; }
.work-location .work-icon{ width:1.3cqw; height:1.3cqw; }
.work-list-toolbar{ display:flex; align-items:center; justify-content:space-between; gap:1cqw; border-bottom:1px solid var(--line); font-size:var(--work-small); }
.work-list-view{ display:flex; align-items:center; gap:0.7cqw; padding:1cqw 0; margin-bottom:-1px; border-bottom:1px solid var(--ink); }
.work-list-view .work-icon{ width:1.7cqw; height:1.7cqw; }
.work-task-count{ color:var(--ink-2); margin-left:0.3cqw; font-variant-numeric:tabular-nums; }
.work-view-tools{ display:flex; align-items:center; gap:1.2cqw; color:var(--ink-2); }
.work-view-tools > span{ display:flex; align-items:center; gap:0.4cqw; }
.work-view-tools .work-icon{ width:1.5cqw; height:1.5cqw; }
.work-add{ display:flex; align-items:center; gap:0.7cqw; padding:1.1cqw 0; color:var(--ink-2); font-size:var(--work-small); }
.work-add .work-icon{ width:1.5cqw; height:1.5cqw; }
.work-table-head, .work-task-row{ display:grid; grid-template-columns:minmax(0,1fr) 10cqw; gap:1cqw; padding:0.833333cqw 0; border-bottom:1px solid var(--line); }
.work-table-head{ color:var(--ink-2); font-size:var(--work-small); padding:1cqw 0; }
.work-table-head > span:first-child, .work-task-row > span:first-child{ display:flex; align-items:center; gap:0.8cqw; }
.work-table-head .work-checkbox{ border-color:var(--line); }
.work-checkbox{ flex:0 0 1.35cqw; height:1.35cqw; border:1px solid var(--ink-2); border-radius:2px; }
.work-owner{ display:flex; align-items:center; gap:1cqw; color:var(--ink); }
.work-end{ margin-top:0.7cqw; color:var(--ink-2); font-size:var(--work-meta); }
.work-saved-tasks, .work-source-evidence{ padding:1cqw; }
.work-sources{ order:1; font-size:1.166667cqw; padding:1.333333cqw var(--work-space); border-top:1px solid var(--line); }
.work-sources > .work-label{ display:flex; align-items:center; gap:0.7cqw; margin-bottom:1.2cqw; font-size:var(--work-small); }
.work-sources > .work-label .work-icon{ color:var(--ink-2); }
.work-note-count{ margin-left:auto; font-size:var(--work-small); font-weight:400; color:var(--ink-2); }
.work-source + .work-source{ margin-top:0.833333cqw; padding-top:0.833333cqw; border-top:1px solid var(--line); }
.work-source-name{ display:flex; align-items:center; gap:0.7cqw; font:400 var(--work-meta)/1.4 var(--font-mono); color:var(--ink-2); margin-bottom:0.5cqw; }
.work-source-name .work-icon{ width:1.5cqw; height:1.5cqw; }
.work-source > p:last-child{ padding-left:2.2cqw; }
.work-source strong{ font-weight:500; }
.frame .mark{ position:absolute; z-index:1; display:grid; place-items:center; width:24px; height:24px; background:var(--ink); color:var(--on-ink); border-radius:2px; font-size:12px; transition:transform 200ms var(--ease-out), background-color 200ms ease; }
.work-message > .mark{ left:-28px; top:0; }
.work-agent-message > .mark{ left:-28px; }
.frame .work-owner > .mark{ position:static; margin-left:auto; flex:none; }
.frame .mark.is-hot{ background:var(--klein); }
/* Editorial focus keeps selected evidence at full contrast above a light ink
   veil. Surrounding text and the application's structure remain readable.
   Every region uses the same 12-native-pixel inner padding and an inset border.
   The border and undimmed surface share one rectangle, without a separate halo.
   0ms: select number and evidence together. 160ms: outline and veil settle.
   The layer stays inside the glass and never intercepts pointer input. */
.run{ --evidence-duration:160ms; --evidence-veil-opacity:.22; }
.work-shot::before{
  content:''; position:absolute; inset:0; z-index:2;
  background:var(--ink); pointer-events:none;
  opacity:0; transition:opacity var(--evidence-duration) var(--ease-out);
}
.work-shot:has(.evidence-target.is-highlighted)::before{ opacity:var(--evidence-veil-opacity); }
.shot .evidence-target{ position:relative; }
.shot .evidence-target.is-highlighted{ z-index:3; background:var(--card); border-radius:2px; }
.shot .work-agent-message.is-highlighted{ background:var(--paper); }
.shot .evidence-target::after{
  content:''; position:absolute; inset:0; z-index:2;
  border:1px solid var(--klein); border-radius:2px; pointer-events:none;
  opacity:0; transition:opacity var(--evidence-duration) var(--ease-out);
}
.shot .evidence-target.is-highlighted::after{ opacity:1; }
.shot .evidence-target.is-highlighted :is(.work-source strong, .work-owner, .work-task-row > span:first-child){ color:var(--klein); }
.run:has(:focus-visible) .work-shot::before,
.run:has(:focus-visible) .evidence-target::after,
.run:has(:focus-visible) .mark,
.run:has(:focus-visible) .ann .k{ transition:none; }
@media (prefers-reduced-motion:reduce){
  .work-shot::before, .shot .evidence-target::after, .run .mark, .run .ann .k{ transition:none; }
}
/* Keep the complete evidence readable when the screenshot is collapsed. */
.evidence-image .work-icon{ width:16px; height:16px; }
.evidence-image .work-label{ margin-bottom:8px; }
.evidence-image .work-time{ font-size:12px; margin-left:8px; }
.evidence-image .work-request .work-label{ font-size:16px; }
.evidence-image .work-response .work-label{ flex-wrap:wrap; gap:8px; font-size:16px; }
.evidence-image .work-agent-icon{ width:20px; height:20px; }
.evidence-image .work-comparison{ display:grid; grid-template-columns:1fr; gap:24px; }
@container (min-width:600px){ .evidence-image .work-comparison{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
.evidence-image .work-sources{ order:0; padding:0; border:0; font-size:16px; }
.evidence-image .work-saved-tasks, .evidence-image .work-source-evidence{ padding:0; }
.evidence-image .work-sources > .work-label{ gap:8px; margin-bottom:20px; font-size:16px; }
.evidence-image .work-brief{ order:1; padding:0; }
.evidence-image .work-note-count{ font-size:12px; }
.evidence-image .work-source + .work-source{ margin-top:16px; padding-top:16px; }
.evidence-image .work-source-name{ gap:8px; font-size:12px; margin-bottom:8px; overflow-wrap:anywhere; }
.evidence-image .work-source-name .work-icon{ width:16px; height:16px; }
.evidence-image .work-source > p:last-child{ padding-left:0; }
.evidence-image .work-share, .evidence-image .work-view-tools{ display:none; }
.evidence-image .work-task-heading{ padding:0 0 20px; }
.evidence-image .work-title{ font-size:16px; font-weight:500; }
.evidence-image .work-location{ display:block; font-size:12px; margin-top:8px; }
.evidence-image .work-location .work-time{ display:flex; gap:4px; margin:4px 0 0; }
.evidence-image .work-list-toolbar{ font-size:12px; margin-bottom:12px; }
.evidence-image .work-list-view{ gap:8px; padding:8px 0; }
.evidence-image .work-add{ display:none; }
.evidence-image .work-table-head, .evidence-image .work-task-row{ grid-template-columns:minmax(0,1fr) 62px; gap:12px; padding:12px 0; }
.evidence-image .work-table-head{ font-size:12px; }
.evidence-image .work-task-row > span:first-child{ gap:8px; }
.evidence-image .work-checkbox{ flex-basis:12px; height:12px; }
.evidence-image .work-end{ margin-top:12px; font-size:12px; }
@media (min-width:901px) and (max-width:1100px){
  .frame .cap{ padding:12px; gap:8px; }
}

/* ------------------------------------------------------------------
   Sections
------------------------------------------------------------------ */
/* The hero owns the first screen: nav plus hero equal one viewport, so
   the reframe block starts exactly at the fold. Spare height goes around
   the headline; the paddings are minimums. */
/* On desktop, nav plus hero fill one screen, placing the Klein block at the fold. The spare height goes to the statement band, which is a ruled row
   of two cells: the sentence and its actions on the left, the heads in a cell of
   their own on the right. The band grows, the heads' cell grows with it, and the
   air around the type is a drawn cell rather than a gap. This is the Kalkbrenner
   move the page is built on: large empty cells read as intentional when the rules
   are there to describe them. */
.hero{ min-height:calc(100svh - var(--nav-h,56px)); display:flex; flex-direction:column; }
.hero .sub{ flex:1; }
.hero-eyebrow{ margin-bottom:20px; }
/* Keep the lead and form on one width so the action belongs to the promise. */
.hero .sub .t-lead{ margin-top:28px; max-width:600px; text-wrap:balance; }
.hero-copy .hero-btns{ margin-top:32px; width:100%; max-width:600px; }
@media (max-width:600px){
  .hero .sub .t-lead{ margin-top:24px; }
}
.hero .sub > .c{ padding-top:var(--band); padding-bottom:var(--band); }
.hero .sub > .c.stagecell{ padding:0; }
/* "Spare height goes around the headline" was the intent and the paddings are its
   minimums, but the stack sat at the top of the band and every spare pixel pooled
   under the form: 32px above the headline against 170 below it at 1512x805, beside a
   river that runs the full height of its cell. Centring splits it. It was guarded to
   the widths where the river exists until 2026-09-05, on the argument that below 900
   the cell is alone and has nothing to balance against; on a tablet that left 400px of
   empty paper under the form, the nav and hero still filling the screen. The spare
   splits at every width now; on a phone there is none to split, and nothing moves. */
.hero .sub > .c:not(.stagecell){ display:flex; flex-direction:column; justify-content:center; }

/* A short laptop screen cannot carry the full vertical padding: the larger headline
   pushes the hero past the fold at 700px tall. Trim the bands rather
   than the type, so the composition survives without the headline shrinking. */
@media (max-height:820px){
  .hero .sub > .c{ padding-top:32px; padding-bottom:32px; }
  .hero .credrow > .c{ padding-top:32px; padding-bottom:32px; }
}

/* Credibility band. A ruled row: the sentence takes its natural width,
   the marks share the remaining space. Each mark is the full official lockup, in a
   42px box, greyscale at 72% so crests and seals keep their detail.
   Reference: the partner bar on aaru.com. */
.hero .credrow > .c{ padding-top:var(--band); padding-bottom:var(--band); }
.hero .credrow > .c:first-child{ display:flex; align-items:center; }
/* Body type keeps the provenance subordinate to the hero lead and proportional
   to the marks. Balance the sentence when narrow phone widths require two lines. */
.hero .credrow > .c:first-child p{ text-wrap:balance; }
.cred-logos-cell{ display:flex; align-items:center; }
.cred-logos{ display:grid; grid-template-columns:repeat(8,minmax(0,1fr)); align-items:center; justify-items:center; column-gap:16px; row-gap:16px; width:100%; }
.cred-logos li{ height:52px; display:flex; align-items:center; }
.cred-logos img{ display:block; height:var(--h,42px); width:var(--w,120px); max-width:100%; object-fit:contain; object-position:center; filter:grayscale(1); opacity:0.72; }
@media (min-width:1401px){
  .hero .credrow{ grid-template-columns:max-content minmax(0,1fr); }
  .hero .credrow > .c{ grid-column:auto; }
}
@media (max-width:1400px){ .hero .credrow > .c{ grid-column:1 / -1; } .hero .credrow > .c + .c{ padding-top:0; } .hero .credrow > .c:first-child{ padding-bottom:20px; } }
/* the larger marks are a wide-screen move: on a narrow screen they would wrap to
   three rows and push the hero past the fold, so the band keeps its original size */
@media (max-width:900px){ .cred-logos{ grid-template-columns:repeat(4,minmax(0,1fr)); justify-items:start; } .cred-logos li{ height:44px; } .cred-logos img{ height:var(--h,36px); object-position:left center; opacity:.8; } .hero .credrow > .c{ padding-top:24px; padding-bottom:24px; } .hero .credrow > .c:first-child p{ white-space:normal; } }
/* Below 900 the marks are sized by their ink, not their files. The files carry
   different margins (the Academy's art fills 60% of its box, Stonly's 82%), and boxed
   to one height the thin crests came out half the size of the wordmarks. Each mark's
   box is set so its drawn art lands near one of two optical sizes, 26px for a wordmark
   and 40px for a crest, and the art, not the box, sits on the column's left edge
   (object-position left; the Academy's file margin is pulled back by a margin). At
   80% rather than 72% the fine crests keep their lines at this size (2026-09-10). */
@media (max-width:900px){
  .cred-logos img[src="logos/stonly.svg"]{ height:38px; width:120px; }
  .cred-logos img[src="logos/polytechnique.svg"]{ height:40px; width:110px; }
  .cred-logos img[src="logos/pan.svg"]{ height:67px; width:83px; max-width:none; margin-left:-16px; }
  .cred-logos img[src="logos/warsaw.png"]{ height:40px; width:104px; }
  .cred-logos img[src="logos/hec.svg"]{ height:36px; width:80px; }
  .cred-logos img[src="logos/sciencespo.svg"], .cred-logos img[src="logos/mcgill.png"]{ width:132px; }
}

/* The full-screen quote holds beneath the nav for an extra 48svh on desktop.
   The founder explicitly retained this pause during the unveiling review. */
.hold{ min-height:calc(100svh - var(--nav-h,56px) + var(--hold,48svh)); background:var(--klein); }
.reframe{ background:var(--klein); color:var(--on-ink); position:sticky; top:var(--nav-h,56px); }
@media (prefers-reduced-motion:reduce){ .hold{ min-height:0; } .reframe{ position:static; } }
/* One screen, less the nav. --nav-h is measured by the script below. */
.reframe > .wrap{ min-height:calc(100svh - var(--nav-h,56px)); display:flex; flex-direction:column; }
.reframe .stage{ flex:1; }
.reframe .wrap,.reframe .row{ border-color:var(--line-on-klein); }
.reframe .stage > .c{ min-height:0; padding-top:var(--air); padding-bottom:var(--air); display:flex; flex-direction:column; justify-content:center; }
.reframe .muted{ color:var(--on-ink-2); }
/* The Stonly mark as provenance: the artwork is red and ink, so it is a mask on an
   empty element filled with currentColor, the wordmark's own trick, and comes out
   white. 107:34 in the file; 28px tall here, the wordmark's height in the nav. */
.reframe .pmark{ display:block; width:88px; height:28px; margin-bottom:40px; background:currentColor;
  -webkit-mask:url(logos/stonly.svg) left center/contain no-repeat;
          mask:url(logos/stonly.svg) left center/contain no-repeat; }
/* The opening mark sits on the cell's left edge with the mark and the name above and
   below it. It hung into the gutter until 2026-09-05, the way a book sets it; on a
   ruled page a glyph past the rail read as a misalignment. */
.reframe .quote{ margin:0; }
/* The attribution is one ruled row under the quote: name and role on the left, the
   date on the right, all on one baseline. 44 above the rule and 20 under it: the rule
   belongs to the attribution, not to the quote. */
.reframe .who{ margin-top:44px; padding-top:20px; border-top:1px solid var(--line-on-klein); display:flex; flex-wrap:wrap; align-items:baseline; gap:8px 24px; }

/* ─────────────────────────────────────────────────────────────────────────────
 * THE KLEIN SCREEN'S REVEAL  (once, as the block's top passes 40% down the viewport)
 *
 *    0ms   the mark fades in                         500ms, opacity only
 *    0ms   the quote rises 28px with its first sentence   700ms
 *  240ms   the second sentence, the point, fades in       600ms, opacity only
 *  360ms   the attribution row rises 20px                 600ms
 *  ~960ms  settled
 *
 * The poster's move at the poster's timing, with one beat added: the second
 * sentence is the reason the quote is on the page, and it lands after the first
 * has been read. The sentences are inline spans, so they can fade but not move;
 * the movement belongs to the blockquote. Everything uses the one --ease-out
 * token, transitions rather than keyframes, and transform and opacity only.
 * The block then holds under the nav for 48svh of scrolling.
 * Hidden-until-revealed states are scoped to .js, set by a one-line script in the head:
 * without it, a page with scripts blocked or failed would show an empty Klein block and
 * an empty How it works (2026-09-05).
 * ───────────────────────────────────────────────────────────────────────────── */
.js .reframe .pmark{ opacity:0; transition:opacity 500ms var(--ease-out); }
.js .reframe .quote{ opacity:0; transform:translateY(28px); transition:opacity 700ms var(--ease-out), transform 700ms var(--ease-out); }
.js .reframe .s2{ opacity:0; transition:opacity 600ms var(--ease-out) 240ms; }
.js .reframe .who{ opacity:0; transform:translateY(20px); transition:opacity 600ms var(--ease-out) 360ms, transform 600ms var(--ease-out) 360ms; }
.reframe.is-in .pmark, .reframe.is-in .quote, .reframe.is-in .s2, .reframe.is-in .who{ opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce){ .js .reframe .pmark, .js .reframe .quote, .js .reframe .s2, .js .reframe .who{ opacity:1; transform:none; transition:none; } }

/* The statement column of a record section: the line, then one sentence, then the
   blocks that carry the evidence. 48 rather than 40, because these columns now hold
   four things instead of two and the reader needs the seams. The line and its own
   sentence are one statement and sit 24 apart; the 48 is between blocks. */
.left{ display:grid; gap:48px; align-content:start; }
.left > .t-line + p{ margin-top:-24px; }
.run dl{ display:grid; grid-template-columns:auto 1fr; column-gap:20px; row-gap:16px; }
.run dt{ color:var(--ink-2); }

/* The capture holds under the sticky section header while her three moments scroll
   past it. Without this the marks numbered 1, 2 and 3 were explained a screen below
   the picture they sit on. --nav-h is measured by the page; 74 is the section header
   plus the air the frame needs under it. */
@media (min-width:901px){
  /* The cell keeps its stretched height on purpose: a cell shrunk to its frame has
     nothing for the frame to stick inside, and sticky silently does nothing. */
  /* A slight reduction aligns the frame foot with the divider after step 9 at 1512px. */
  .run .hold-shot > .full-capture{ width:97%; position:sticky; top:calc(var(--nav-h,56px) + 74px); }
  /* The extra depth belongs to the statement column alone. Padding on the capture's
     own cell is outside its content box, which is the box sticky is bounded by: put
     it there and the frame lets go exactly as early as before. Put it on the column
     opposite and the row grows, the capture's content box grows with it, and the
     frame holds for the whole read. */
  .run .runband > .left{ padding-bottom:calc(var(--band) + 80px); }
}

/* The step timeline: three rows, each the step number in an ink square (the same
   number as the mark on the capture) over her words and what she expected. Rows are
   hairline-separated like every list on the page. */
.run .session{ display:grid; gap:20px; }
.run .ann li{ display:grid; gap:10px; padding:22px 0; border-top:1px solid var(--line); }
.run .ann li:first-child{ border-top:0; padding-top:0; }
.run .ann li:last-child{ padding-bottom:0; }
.run .ann .hd{ display:flex; align-items:center; gap:12px; }
.run .ann .say{ display:grid; gap:4px; }
.k{ width:24px; height:24px; flex:0 0 auto; display:grid; place-items:center; background:var(--ink); color:var(--on-ink); border-radius:2px; transition:transform 200ms var(--ease-out), background-color 200ms ease; }
/* The same square carries a verdict: filled with a check for a requirement met, an
   outline with a cross for one not met. Ink both ways; the verdict is read from the
   mark, not from a colour. The outline alone read as an unticked box (2026-09-04). */
.k.open{ background:transparent; border:1px solid var(--ink); color:var(--ink); }
/* Ruled rows headed by a square: the requirements, the Issue's evidence, and the
   How it works' one-line rows. 12px of padding, not the moments' 22: these are one line. */
.rows{ list-style:none; margin:0; padding:0; display:grid; }
.rows li{ display:grid; grid-template-columns:24px 1fr; column-gap:12px; align-items:start; padding:12px 0; border-top:1px solid var(--line); }
.rows li:first-child{ border-top:0; padding-top:0; }
.rows li:last-child{ padding-bottom:0; }
.rows li > span:last-child{ padding-top:1px; }   /* 16px body on a 24px square: the first line sits on the square's centre */
.rows.fix-list li{ display:block; }
/* Annotation numbers live at page scale, outside the screenshot's native scale.
   One active leader makes the relationship visible without covering the evidence. */
.run .runband{ position:relative; }
.run .ann .step-link{ display:grid; place-items:center; width:44px; height:44px; margin:-10px; border:0; padding:0; border-radius:2px; background:transparent; font:12px/1.4 var(--font-mono); cursor:pointer; }
.run .ann li.is-current .k{ background:var(--klein); outline:1px solid var(--klein); outline-offset:3px; }
.run .step-connector{ position:absolute; inset:0; width:100%; height:100%; overflow:visible; pointer-events:none; z-index:3; }
.run .step-connector path{ fill:none; stroke:var(--klein); stroke-width:1; opacity:.65; vector-effect:non-scaling-stroke; }
@media (max-width:1200px){
  .run .step-connector{ display:none; }
  .run .ann li.is-current .evidence-crop{ border-color:var(--klein); }
}

/* A benefit and its worked finding share the same columns as the workspace above.
   The full reading order remains available when the carousel script is absent. */
.run .verdicts{ display:grid; gap:48px; }
.run .verdict{ display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); margin-inline:calc(-1 * var(--pad)); align-content:start; }
.verdict-summary{ grid-column:1 / span 4; padding-inline:var(--pad); min-width:0; }
.verdict-summary h3{ margin:0; font-weight:400; }
.verdict-summary > p{ margin-top:24px; max-width:34ch; }
.run .verdict .detail{ grid-column:5 / -1; padding-inline:var(--pad); min-width:0; }
.run .verdict + .verdict{ padding-top:48px; border-top:1px solid var(--line); }
.finding-outcome{ display:flex; flex-direction:column; align-items:flex-start; gap:8px; padding-bottom:24px; border-bottom:1px solid var(--line); margin-bottom:24px; }
.finding-list-label{ margin-bottom:16px; color:var(--ink); font-weight:500; }
.finding-checks li{ display:grid; grid-template-columns:24px minmax(0,1fr); column-gap:16px; align-items:start; padding:24px 0; border-top:1px solid var(--line); }
.finding-checks li:first-child{ padding-top:0; border-top:0; }
.finding-checks li:last-child{ padding-bottom:0; }
.finding-checks .k{ margin-top:3px; }
.finding-result{ min-width:0; }
.finding-requirement{ margin-top:8px; color:var(--ink-2); }
.finding-observation{ max-width:46ch; }
.finding-fixes li{ display:grid; grid-template-columns:minmax(0,.65fr) minmax(0,1.35fr); gap:24px; padding:24px 0; border-top:1px solid var(--line); }
.finding-fixes li:first-child{ border-top:0; padding-top:0; }
.finding-fixes li:last-child{ padding-bottom:0; }
.finding-fixes .t-lead + p{ margin-top:8px; }
.finding-comparison{ display:grid; grid-template-columns:minmax(0,1fr) 48px minmax(0,1fr); gap:24px; align-items:start; padding:0 0 24px; border-bottom:1px solid var(--line); }
.run .finding-comparison dl{ display:block; min-width:0; }
.finding-comparison .t-lead{ margin-top:8px; }
.finding-comparison .t-meta{ margin-top:12px; overflow-wrap:anywhere; }
.finding-mismatch{ color:var(--ink-2); place-self:center; }
/* Numbered views and a visible playback clock explain the walkthrough. */
.verdict-toolbar{ display:block; margin-bottom:32px; }
.verdict-navigation-heading{ display:flex; align-items:baseline; justify-content:space-between; gap:16px; margin-bottom:16px; }
.verdict-navigation-heading > p{ font-weight:500; }
.verdict-toolbar[hidden]{ display:none; }
.verdict-tabs{ position:relative; display:flex; gap:32px; min-width:0; border-bottom:1px solid var(--line); }
.verdict-tabs button{ position:relative; min-height:44px; padding:12px 0 16px; border:0; background:transparent; color:var(--ink-2); font-size:15px; font-weight:500; line-height:1.2; text-align:left; cursor:pointer; }
.verdict-tab-arrow{ display:none; }
.verdict-tab-number{ display:inline-block; margin-right:12px; }
.verdict-progress{ position:absolute; inset:auto 0 -1px; height:2px; background:var(--klein); opacity:0; transform:scaleX(1); transform-origin:left; }
.is-playing .verdict-tabs button[aria-selected="true"] .verdict-progress{ opacity:1; }
.verdict-tab-indicator{ position:absolute; top:0; left:0; width:1px; height:1px; background:var(--klein); transform-origin:0 50%; pointer-events:none; transition:transform 240ms var(--ease-out), opacity 150ms ease; }
.is-playing .verdict-tab-indicator{ opacity:.25; }
.verdict-tabs button[aria-selected="true"]{ color:var(--klein); }
.verdict-position{ flex-shrink:0; font-size:15px; }
.verdict-toolbar button{ transition:color 150ms ease, transform 120ms var(--ease-out); }
.verdict-toolbar button:focus-visible{ outline:2px solid var(--klein); outline-offset:3px; }
@media (hover:hover) and (pointer:fine){
  .verdict-tabs button:hover{ color:var(--klein-deep); }
}
.run .is-carousel .verdicts{ gap:0; }
/* Let the old finding finish its fade before hiding it. A shorter exit and a
   slight entrance delay keep text legible; CSS transitions retarget on rapid taps. */
.run .is-carousel .verdicts > *{ grid-area:1 / 1; min-width:0; padding-top:0; border-top:0; opacity:0; visibility:hidden; pointer-events:none; transform:translateX(8px); transition:opacity 120ms var(--ease-out), transform 240ms var(--ease-out), visibility 0s linear 240ms; }
.run .is-carousel .verdicts > .is-before{ transform:translateX(-8px); }
.run .is-carousel .verdicts > .is-current{ opacity:1; visibility:visible; pointer-events:auto; transform:translateX(0); transition:opacity 200ms var(--ease-out) 40ms, transform 240ms var(--ease-out), visibility 0s; }
.run .is-carousel.is-instant .verdicts > *,
.is-carousel.is-instant .verdict-tab-indicator,
.is-carousel.is-instant .verdict-toolbar button{ transition:none; }
@media (prefers-reduced-motion:reduce){
  .verdict-tab-indicator, .verdict-toolbar button{ transition:none; }
  .run .is-carousel .verdicts > *,
  .run .is-carousel .verdicts > .is-before,
  .run .is-carousel .verdicts > .is-current{ transition:none; transform:none; }
}
@media (min-width:1201px){
  .run.has-excerpts .evidence-detail{ display:none; }
}

/* On desktop, the benefit and its navigation form one quiet reading column.
   Overlapping grid areas retain content-driven height without absolute positioning. */
@media (min-width:901px){
  .verdict-carousel.is-carousel{ display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); grid-template-rows:1fr auto; }
  .is-carousel .verdicts{ grid-area:1 / 1 / 3 / -1; }
  .is-carousel .verdict-summary{ padding-bottom:288px; }
  .is-carousel .verdict-toolbar{ grid-area:2 / 1 / 3 / 5; z-index:1; align-self:end; display:block; margin:32px calc(var(--pad) * 4 / 3) 0 0; border-bottom:0; }
  .is-carousel .verdict-tabs{ display:flex; flex-direction:column; gap:0; border-bottom:0; }
  .is-carousel .verdict-tabs button{ min-height:48px; padding:14px 28px 14px 0; border-top:1px solid var(--line); }
  .is-carousel .verdict-progress{ inset:-1px 0 auto; }
  .is-carousel .verdict-tab-arrow{ display:block; position:absolute; right:0; top:16px; opacity:0; }
  .is-carousel .verdict-tabs button[aria-selected="true"] .verdict-tab-arrow{ opacity:1; }
}
@media (hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){
  .verdict-toolbar button:active:not(:focus-visible){ transform:scale(.97); }
}

@media (max-width:900px){
  .run .verdict{ grid-template-columns:1fr; gap:32px; }
  .verdict-summary, .run .verdict .detail{ grid-column:1; }
  .verdict-summary h3{ max-width:18ch; }
  .verdict-summary > p{ max-width:56ch; margin-top:16px; }
}
@media (max-width:700px){
  .verdict-tabs{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; width:100%; border-bottom:1px solid var(--line); }
  /* A button centres its content; with "What needs fixing" on two lines the numbers
     drifted to three heights. The cells read from the top. */
  .verdict-tabs button{ display:grid; align-content:start; justify-items:start; }
  .verdict-tab-number{ display:block; margin:0 0 8px; }
}
@media (max-width:600px){
  .finding-outcome{ display:grid; gap:8px; margin-bottom:24px; }
  .finding-checks li{ column-gap:12px; }
  .finding-fixes li{ grid-template-columns:1fr; gap:12px; }
  .finding-comparison{ grid-template-columns:minmax(0,1fr) 24px minmax(0,1fr); gap:12px; padding:24px 0; }
}

/* ANIMATION STORYBOARD (timing tokens are supplied by loop.js)
 *    0ms  the complete circuit enters view: opacity 0 → 1, y 10px → 0
 *  420ms  settled; a single direction marker travels clockwise in 20 seconds
 *  hover  pause travel; lift the matching object 6px and reveal its circuit
 *  leave  the object settles in 220ms; travel resumes from the same position
 * Keyboard and reduced motion keep every object spatially stable.
 * Only the marker rotates; the objects, words and reading order stay in place.
 */
.loop-track{ --cycle-size:clamp(300px,24vw,372px); --loop-lift:-6px; position:relative; }
.loop .steps{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); min-height:var(--cycle-size); column-gap:var(--cycle-size); row-gap:64px; align-content:space-between; list-style:none; margin:0; padding:0; }
.loop .step{ position:relative; display:grid; grid-template-columns:24px minmax(0,1fr); column-gap:12px; row-gap:12px; align-items:baseline; align-content:start; }
.loop .step:nth-child(1){ grid-column:1; grid-row:1; }
.loop .step:nth-child(2){ grid-column:2; grid-row:1; }
.loop .step:nth-child(3){ grid-column:2; grid-row:2; }
.loop .step:nth-child(4){ grid-column:1; grid-row:2; }
.loop .step .t-meta{ padding-top:0; }
.t-verb{ font-size:clamp(28px,2.9vw,44px); font-weight:400; letter-spacing:-0.025em; line-height:1.05; text-wrap:balance; }
.loop .step .name{ display:block; color:var(--ink); }
.loop .step p{ grid-column:2; max-width:32ch; text-wrap:pretty; }
.loop .step-trigger{ display:block; width:fit-content; min-height:44px; padding:0; border:0; background:transparent; text-align:left; cursor:pointer; }
.loop .step-trigger::after{ content:""; position:absolute; inset:-12px; }
.loop .step-trigger:focus-visible{ outline:0; }
.loop .step-trigger:focus-visible::after{ outline:2px solid var(--klein); outline-offset:2px; }
.loop .step-trigger .name{ transition:color var(--loop-highlight-duration,160ms) ease; }
.loop .step.is-current .name{ color:var(--klein); }
.loop .step.is-current > .t-meta{ color:var(--klein); }
.loop-cycle{ position:absolute; left:50%; top:50%; width:var(--cycle-size); aspect-ratio:1; transform:translate(-50%,-50%); display:grid; place-items:center; }
.loop-orbit{ position:absolute; inset:0; width:100%; height:100%; overflow:visible; color:var(--klein); }
.loop-rail{ stroke:var(--klein); stroke-opacity:.4; }
.loop-rail-inner{ stroke:var(--line); stroke-width:.65; }
.loop-registration{ stroke:var(--ink-2); stroke-width:1; }
.loop-trail{ stroke-width:2; }
.loop-arrow{ stroke-width:1.75; }
.loop-tail{ stroke:var(--line); stroke-width:2; }
.loop-rotor{ transform-origin:210px 210px; pointer-events:none; }
.loop-track.is-enhanced .loop-rotor{ animation:loop-circulate var(--loop-orbit-duration,20000ms) linear infinite; animation-play-state:paused; }
.loop-track.is-running .loop-rotor{ animation-play-state:running; }
@keyframes loop-circulate{ to{ transform:rotate(360deg); } }
.loop-sector{ color:var(--ink-2); }
.loop-sector-arc{ stroke:var(--klein); stroke-width:1.5; opacity:0; transition:opacity var(--loop-highlight-duration,160ms) ease; pointer-events:none; }
.loop-leader{ stroke:var(--line); stroke-width:1; pointer-events:none; }
.loop-seat{ fill:var(--paper); stroke:var(--line); stroke-dasharray:2 4; stroke-width:1; }
.loop-side{ fill:var(--grey); stroke:var(--line); stroke-width:1; }
.loop-face{ fill:var(--card); stroke:var(--line); stroke-width:1; }
.loop-edge, .loop-fold{ stroke:var(--line); stroke-width:1; }
.loop-engraving{ stroke:currentColor; stroke-width:1.5; }
.loop-detail{ stroke:var(--klein); }
.loop-pointer-side{ fill:var(--line); stroke:var(--line); stroke-width:1.5; }
.loop-pointer{ fill:var(--card); stroke:var(--ink); stroke-width:2; }
.loop-object{ transition:transform var(--loop-lift-duration,220ms) var(--ease-out); pointer-events:none; }
.loop-piece-hit{ fill:transparent; stroke:none; pointer-events:none; }
.is-enhanced .loop-piece-hit{ pointer-events:all; cursor:pointer; }
.loop-sector.is-current{ color:var(--klein); }
.loop-sector.is-current .loop-sector-arc{ opacity:1; }
.loop-sector.is-current .loop-leader,
.loop-sector.is-current .loop-face,
.loop-sector.is-current .loop-pointer{ stroke:var(--klein); }
.loop-center{ position:relative; display:grid; justify-items:start; }
.loop-repeat{ position:relative; color:var(--ink-2); text-align:left; }
.loop-title-toggle{ min-height:44px; padding:0; border:0; border-radius:2px; background:transparent; cursor:pointer; transition:color var(--loop-highlight-duration,160ms) ease, transform var(--loop-press-duration,120ms) var(--ease-out); }
.loop-title-toggle:disabled{ cursor:default; }
.loop-track.is-paused .loop-title-toggle{ color:var(--klein); }
.loop-cycle-labels{ display:none; }
@media (hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){
  .loop-track:not(.is-keyboard) .loop-sector.is-current .loop-object{ transform:translateY(var(--loop-lift)); }
  .loop-track:not(.is-keyboard) .loop-title-toggle:active{ transform:scale(.97); }
  .loop-title-toggle:enabled:hover{ color:var(--klein); }
}
@media (prefers-reduced-motion:no-preference){
  .loop-track.reveal-ready{ transition:opacity var(--loop-reveal-duration,420ms) var(--ease-out), transform var(--loop-reveal-duration,420ms) var(--ease-out); }
  .loop-track.reveal-ready:not(.is-in){ opacity:0; transform:translateY(10px); }
}
.loop-track.is-keyboard .loop-object,
.loop-track.is-keyboard .loop-sector-arc,
.loop-track.is-keyboard .loop-title-toggle,
.loop-track.is-keyboard .step-trigger .name{ transition:none; }
@media (prefers-reduced-motion:reduce){
  .loop-track.is-enhanced .loop-rotor{ animation:none; }
  .loop-object, .loop-sector-arc, .loop-title-toggle, .loop .step-trigger .name{ transition:none; }
}
/* Stack before the surrounding prose columns shrink below about 200px.
   The drawing and body-size descriptions retain the same reading order. */
@media (max-width:1400px){
  .loop-cycle{ position:relative; left:auto; top:auto; transform:none; margin:0 auto 40px; width:min(100%,360px); }
  .loop .steps{ min-height:0; column-gap:40px; row-gap:32px; align-content:start; }
  .loop .step:nth-child(n){ grid-column:auto; grid-row:auto; border-top:1px solid var(--line); padding-top:24px; }
  .loop-cycle-labels{ display:block; position:absolute; inset:0; pointer-events:none; }
  .loop-cycle-labels span{ position:absolute; }
  .loop-cycle-labels .is-current{ color:var(--klein); }
  .loop-cycle-labels span:nth-child(1){ left:0; top:0; }
  .loop-cycle-labels span:nth-child(2){ right:0; top:0; }
  .loop-cycle-labels span:nth-child(3){ right:0; bottom:0; }
  .loop-cycle-labels span:nth-child(4){ left:0; bottom:0; }
}

.partner .deal{ display:grid; grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr); gap:48px; }
.partner .terms li{ padding:24px 0; border-top:1px solid var(--line); }
.partner .terms li:last-child{ padding-bottom:0; }
.partner .term-title{ display:block; margin:0; font-weight:400; }
.partner .term-description{ margin-top:8px; color:var(--ink-2); text-wrap:pretty; }
.partner .deal-heading{ color:var(--ink); font-size:16px; font-weight:500; line-height:1.5; margin:0 0 20px; }
.offer-followup{ display:grid; grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr); column-gap:48px; row-gap:12px; }
.offer-followup h3{ margin:0; font-weight:400; }
.offer-followup > h3{ grid-column:1; }
.offer-followup > p{ grid-column:2; grid-row:1 / span 2; }
.offer-followup > #partner-scope{ grid-column:1; grid-row:2; }
@media (max-width:1100px){
  .partner .deal, .offer-followup{ gap:32px; }
}
@media (max-width:600px){
  .offer-followup{ display:block; }
  .offer-followup > p{ margin-top:16px; }
}
.reframe .partner-context{ margin-left:auto; display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 24px; }
/* One measure connects the closing headline, next steps, and capture.
   The form grid keeps its label and feedback in the reading order. */
#partner-close > .c{ display:grid; justify-items:start; gap:32px; padding-top:64px; padding-bottom:64px; }
.close-intro{ display:grid; gap:24px; min-width:0; width:100%; max-width:640px; }
.close-intro .t-hero{ max-width:100%; }
.close-intro .t-hero > span{ display:block; }
.close-intro .t-lead{ max-width:100%; text-wrap:pretty; }
.close-fields{ display:grid; grid-template-columns:minmax(0,1fr); gap:12px; width:100%; max-width:600px; margin-top:0; }
.close-fields > .err{ order:0; }
@media (max-width:600px){
  #partner-close > .c{ padding-top:48px; padding-bottom:48px; }
  .close-intro{ gap:16px; }
}

footer .row > .c{ padding-top:24px; padding-bottom:24px; display:flex; flex-wrap:wrap; gap:24px; align-items:center; font-size:15px; }
footer ul{ display:flex; gap:20px; flex-wrap:wrap; }
footer ul .link{ display:inline-block; padding:12px 0; margin:-12px 0; }   /* 44px tap height on a 19px line */
footer .end{ margin-left:auto; color:var(--ink-2); }

/* The landing footer gives contact, research and social links the first row.
   Legal controls and copyright follow below, in the same keyboard order. */
#footer .row > .c{ display:grid; gap:24px; padding-top:32px; padding-bottom:32px; }
#footer .footer-main, #footer .footer-secondary{ display:flex; justify-content:space-between; align-items:center; gap:24px 48px; }
#footer ul{ gap:0 32px; }
#footer ul .link{ display:inline-flex; align-items:center; min-height:44px; padding:10px 0; margin:0; }
@media (max-width:600px){
  #footer .footer-main, #footer .footer-secondary{ flex-direction:column; align-items:flex-start; gap:16px; }
  #footer ul{ gap:0 24px; }
}

/* ------------------------------------------------------------------
   Collapse
------------------------------------------------------------------ */
@media (max-width:900px){
  :root{ --band:36px; --air:64px; }
  .row{ grid-template-columns:repeat(4,minmax(0,1fr)); }
  .s4,.s5,.s6,.s7,.s8,.s10,.s12,.from5,.from8,.from9{ grid-column:span 4; }
  .row > .c + .c{ padding-top:0; }
  .row.ruled > .c + .c{ border-left:0; border-top:1px solid var(--line); padding-top:var(--band); }
  .reframe .who{ margin-top:32px; padding-top:16px; }   /* the quote is 36 to 40px here; the rule sits closer */
  .reframe .pmark{ margin-bottom:32px; }
  /* The row wraps here: the product and the date take a second line at the left
     edge, as they do on a phone, rather than a right-aligned line under the role. */
  .reframe .partner-context{ flex-basis:100%; margin-left:0; }
  /* The links fold into the Menu; the demo button stays beside it while the bar has
     room (down to 600), so the second way in is in reach on a tablet as on desktop. */
  .nav .in > nav{ display:none; }
  .nav .in{ grid-template-columns:1fr auto auto; gap:16px; position:relative; }
  .nav .in > .btn{ margin-left:0; }
  .mobile-menu .menu-demo{ display:none; }
  .nav .in > .wordmark{ min-height:44px; }   /* the link's target, not its drawing: the mark and name stay 28 and 24 */
  .mobile-menu{ display:block; justify-self:end; color:var(--klein); }
  .mobile-menu summary{ display:flex; align-items:center; gap:12px; min-height:44px; padding:0 8px; font-size:15px; font-weight:500; cursor:pointer; list-style:none; }
  .mobile-menu summary::-webkit-details-marker{ display:none; }
  .mobile-menu[open] summary span{ transform:rotate(45deg); }
  .mobile-menu nav{ position:absolute; z-index:1; top:100%; left:-1px; right:-1px; padding:12px var(--pad); background:var(--paper); border-bottom:1px solid var(--line); max-height:calc(100svh - var(--nav-h,56px)); overflow:auto; }
  .mobile-menu ul{ display:block; }
  .mobile-menu li a:not(.btn){ display:flex; align-items:center; min-height:44px; margin:0; padding:12px 0; }
  .hero{ min-height:0; }
  .hero .sub{ flex:initial; }
  /* 96 above the headline, 48 between the form and the illustration, 64 under it. */
  .hero .sub > .c:not(.stagecell){ padding-top:96px; padding-bottom:48px; }
  .hero .sub > .c.stagecell{ padding:0 var(--pad) 64px; }
  /* The hero and the quote on a tablet: the desktop clamp bottoms out at 36px here, the
     phone's size, in a cell that has just grown to the full width. 6.4vw runs 38 to 52
     across the band, so at 768 the three lines are 49px and fill their measure. */
  .t-hero, .t-quote{ font-size:clamp(36px, 6.4vw, 52px); }
  /* The quote uses its content height on smaller screens, without an extra hold. */
  .hold{ min-height:0; }
  .reframe{ position:static; }
  .reframe > .wrap{ min-height:0; }

}
/* Keep document evidence at reading size on narrow laptops as well as phones. */
@media (max-width:1200px){
  .run .runband > .c{ grid-column:1 / -1; }
  .run .hold-shot > .full-capture{ width:100%; position:static; }
  .run.has-excerpts .evidence-detail > summary{ display:none; }
  .run .runband > .hold-shot{ padding-top:0; }
  .full-capture > summary{ display:list-item; color:var(--klein); font-size:16px; cursor:pointer; padding:12px 0; }
  .full-capture .hide-capture, .full-capture[open] .show-capture{ display:none; }
  .full-capture[open] .hide-capture{ display:inline; }
  .capture-viewport{ overflow:auto; }
  .full-capture .frame{ min-width:960px; }
  /* Keep the no-script caption within the initial horizontal view of the frame. */
  .frame .cap{ flex-direction:column; align-items:flex-start; gap:8px; }
  .run .runband > .left{ padding-bottom:24px; }
  /* Keep the desktop CRT and its scroll-driven evidence visible on phones.
     Excerpts below retain reading-size text; the screen scales as one picture.
     Limit the pinned frame's height so the current excerpt has room beneath it. */
  .run.has-excerpts .hold-shot{ display:none; }
  .run.has-excerpts .left > .full-capture{
    position:sticky; top:calc(var(--nav-h,56px) + var(--run-header-height,52px)); z-index:4;
    width:100%; margin:24px 0; padding:24px 0 16px; background:var(--paper);
  }
  .run.has-excerpts .full-capture > summary{ display:none; }
  .run.has-excerpts .capture-viewport{ overflow:visible; max-width:min(600px, calc((100svh - 360px) * 1.6)); }
  .run.has-excerpts .full-capture .frame{ min-width:0; }
  .run.has-excerpts .frame .cap{ display:none; }
  .run.has-excerpts .crt-case{ padding:8px 8px 0; border-radius:10px; }
  .run.has-excerpts .crt-glass{ padding:3px; border-radius:7px; }
  .run.has-excerpts .crt-glass::after{ inset:3px; }
  .run.has-excerpts .crt-chin{ height:28px; }
  .run.has-excerpts .frame .mark{ width:clamp(12px,3.2cqw,20px); height:clamp(12px,3.2cqw,20px); font-size:clamp(8px,2cqw,11px); }
  .run.has-excerpts .work-message > .mark{ left:-5cqw; }
  .run.has-excerpts .evidence-crop{ scroll-margin-top:calc(var(--nav-h,56px) + 84px + var(--run-capture-height,0px)); }
}
/* Landscape phones keep the CRT in the document without pinning over the text. */
@media (max-width:1200px) and (max-height:600px){
  .run.has-excerpts .left > .full-capture{ position:static; }
  .run.has-excerpts .capture-viewport{ max-width:480px; }
}
@media (max-width:1200px) and (prefers-reduced-motion:reduce){
  .run.has-excerpts .left > .full-capture{ position:static; }
}
@media (max-height:800px){ .run .hold-shot > .full-capture{ position:static; } }
@media (max-height:600px){
  .hold{ min-height:0; }
  .reframe{ position:static; }
  .reframe > .wrap{ min-height:0; }
  .run .hold-shot > .full-capture{ position:static; }
}
@media (max-width:600px){
  .row{ grid-template-columns:1fr; }
  .hero .sub > .c:not(.stagecell){ padding-top:48px; padding-bottom:40px; }
  .hero .sub > .c.stagecell{ padding-bottom:40px; }
  /* 390 minus margins holds the wordmark, the Menu and a 44px button with nothing
     to spare; the demo path goes back into the menu here. */
  .nav .in:has(.mobile-menu) > .btn{ display:none; }
  .nav .in{ grid-template-columns:1fr auto; }
  .mobile-menu .menu-demo{ display:block; }
  .evidence-image .work-comparison{ grid-template-columns:1fr; }
  /* Name and role stack; product context and date wrap beneath them. */
  .reframe .who{ display:block; }
  .reframe .who > * + *{ margin-top:4px; }
  .reframe .partner-context{ margin-left:0; margin-top:16px; }
  /* Two columns, four rows: eight marks fill the grid with no short last row, and
     each cell is wide enough for the wordmarks at their desktop widths, so Sciences Po
     and McGill are no longer squeezed to a 100px column. Left-aligned, the two columns
     read as a table (three columns of 100px, 3-3-2, until 2026-09-10). */
  .cred-logos{ grid-template-columns:repeat(2,minmax(0,1fr)); justify-items:center; column-gap:16px; }
  /* Two equal columns with every mark centred in its column, so the Academy and HEC
     sit on the axis of Stonly and CentraleSupélec above them, and the pair stays a
     pair at every phone width (columns sized to their widest mark and pushed to the
     rails drifted apart on a wide phone; the founder's notes of 2026-09-10). */
  .cred-logos img{ object-position:center; }
  .cred-logos img[src="logos/pan.svg"]{ margin-left:0; }
  /* Stonly's file ends 19 units after the wordmark, so centred by its box the mark sat
     11px left of the column's axis. The box is the width of the ink; cover keeps the
     height and drops the empty margin, not any of the mark. */
  .cred-logos img[src="logos/stonly.svg"]{ width:99px; object-fit:cover; object-position:left center; }
  /* The optional complete screenshot keeps its original layout and scrolls inside
     its own viewport; the inline excerpts above are readable without panning. */
  .t-lead{ font-size:19px; }
  /* The section header pins under the nav; on a phone the two together took 109px of
     the screen. 10px of padding brings the band to 44. */
  .sh > .c{ padding-top:10px; padding-bottom:10px; }
  /* Four rows of 44 with 8 between: the crests (44 and 48 tall) sit inside their
     rows instead of eating the gaps, and the band stays under 260px. */
  .cred-logos{ row-gap:8px; }
  .cred-logos li{ height:44px; }
}
/* At 320 the two widest wordmarks and the 16px gap overrun the cell by 12px. */
@media (max-width:360px){
  .cred-logos img[src="logos/sciencespo.svg"], .cred-logos img[src="logos/mcgill.png"]{ width:116px; }
}
/* A wide phone keeps the two columns but has room for larger marks: the whole grid
   steps up by a fifth, so the marks are not the small phone's sizes in a cell half
   again as wide. */
@media (min-width:480px) and (max-width:600px){
  .cred-logos{ zoom:1.2; }
  .stack > *{ padding:24px 0; }
  .stack > :first-child{ padding-top:0; }
  .stack > :last-child{ padding-bottom:0; }
  footer .end{ margin-left:0; }   /* one column reads left; a line pushed right stood alone */
  .partner .deal{ grid-template-columns:1fr; gap:36px; }
  .loop .steps{ grid-template-columns:1fr; gap:24px; }
  .loop .step p{ max-width:100%; }
}


/* ------------------------------------------------------------------
   Legal pages (privacy.html, terms.html). Boilerplate for review; the
   layout is the loop-steps row: index, name, one or two paragraphs.
------------------------------------------------------------------ */
.legal .left > div{ display:grid; gap:8px; }
.legal .term{ display:grid; grid-template-columns:30px minmax(0,1fr); gap:16px; align-items:start; }
.legal-table{ max-width:100%; overflow-x:auto; }
.legal-toc{ margin-top:24px; }
.legal-toc ol{ list-style:none; margin:0; padding:0; display:grid; gap:8px; }
.legal-toc a{ display:inline-block; font-size:16px; line-height:1.5; }
.legal .term[id]{ scroll-margin-top:calc(var(--nav-h, 56px) + 24px); }
.legal .term .legal-table + p, .legal .term p + .legal-table{ margin-top:12px; }
.legal .term td{ overflow-wrap:anywhere; }
.legal .term .t-meta{ padding-top:7px; }
.legal .term .name{ display:block; margin:0 0 8px; font-weight:400; }
.legal .term p + p{ margin-top:12px; }
@media (max-width:600px){ .legal .term{ grid-template-columns:26px minmax(0,1fr); gap:12px; } }

/* ---- Cookie consent ----
   One hairline, no shadow, 2px radius: the same edge as every other framed thing.
   It enters from below on the page's one curve and leaves the same way. */
.consent{
  position:fixed; right:var(--margin); bottom:12px; z-index:50;
  width:min(420px, calc(100vw - 2*var(--margin)));
  padding:16px var(--pad);
  background:var(--paper); border:1px solid var(--line); border-radius:2px;
  font-size:16px; line-height:1.5; color:var(--ink);   /* prose is Body; 15 is for controls */
  opacity:0; transform:translateY(12px);
  transition:opacity 240ms var(--ease-out), transform 240ms var(--ease-out);
}
.consent.in{ opacity:1; transform:none; }
.consent.leaving{ opacity:0; transform:translateY(12px); visibility:hidden; pointer-events:none; }
.consent p{ margin:0 0 16px; }
.consent-actions{ display:flex; gap:8px; }
@media (max-width:900px){ .consent{ bottom:max(var(--margin), env(safe-area-inset-bottom, 0px)); padding-block:20px; } }
@media (prefers-reduced-motion:reduce){ .consent{ transition:none; transform:none; } }
/* The press and the arrow nudge are movement too; under reduced motion the colour change
   is the whole answer to a press. */
@media (prefers-reduced-motion:reduce){ .btn, .btn .arrow, .capture{ transition:none; } .btn:active, .btn:hover .arrow, .capture:has(.btn:active){ transform:none; } }
@media (prefers-reduced-motion:reduce){
  .run .ann li.is-current .k, .frame .mark.is-hot{ transform:none; }
  .run .k, .frame .mark{ transition:background-color 200ms ease; }
}

/* Legal text: lists and tables inside a section row. Hairlines only, no cell borders. */
.legal strong{ font-weight:500; }
.legal .term p + ul, .legal .term p + table, .legal .term ul + p, .legal .term table + p{ margin-top:12px; }
.legal .term ul{ list-style:disc; padding-left:18px; max-width:56ch; }
.legal .term li + li{ margin-top:6px; }
.legal .term table{ width:100%; max-width:64ch; border-collapse:collapse; font-size:15px; line-height:1.4; }
.legal .term th, .legal .term td{ text-align:left; vertical-align:top; padding:10px 16px 10px 0; border-top:1px solid var(--line); }
.legal .term th{ font-weight:500; }
.legal .term tr:last-child td{ border-bottom:1px solid var(--line); }