/* ==========================================================================
   OPENDOCS HOME "Proof" - scoped stylesheet
   Generated from the reviewed concept stylesheet. Every rule lives under
   .proof-home so it cannot leak into the shared navbar, footer or cookie
   banner (css/marketing.css). Class names that collided with marketing.css
   were renamed: btn -> pf-btn, hero -> pf-hero, section -> pf-section,
   reveal -> pf-reveal, is-open -> is-expanded.
   Art direction notes live in the comments below. Light palette only.
   ========================================================================== */
/* ==========================================================================
   OPENDOCS CONCEPT - "Proof"
   --------------------------------------------------------------------------
   ART DIRECTION IN ONE PARAGRAPH
   A documentation product is, at heart, typeset paper that machines can now
   read too. So the page is built like a proof sheet: cool greige paper, deep
   green-black ink, and two editorial marks that are also real product
   features - the HIGHLIGHTER (search hits in reader excerpts) and the
   PROOFREADER'S BLUE (annotations, links, the one interactive colour).
   Everything is self-hosted (no CDN, no Tailwind) because the site's CSP and
   GDPR rules forbid external scripts and fonts - see CLAUDE.md in this repo.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. FONTS (self-hosted, variable)
   Literata: a serif designed for long on-screen reading. Docs are read, so
   the display face is a reading face pushed large, not a "luxury" didone.
   Hanken Grotesk: a quiet, slightly warm grotesque for UI and small labels.
   Weight axes are variable, so one file gives every weight we use.
   -------------------------------------------------------------------------- */
@font-face {
  font-family: 'Literata';
  src: url('/fonts/literata-var-latin.woff2') format('woff2');
  font-weight: 200 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Literata';
  src: url('/fonts/literata-italic-var-latin.woff2') format('woff2');
  font-weight: 200 900;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Hanken Grotesk';
  src: url('/fonts/hanken-grotesk-var-latin.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* --------------------------------------------------------------------------
   2. TOKENS
   Palette is deliberately not "tech blue": the base is a green-grey paper,
   blue appears only as an annotation colour (and in very small amounts).
   -------------------------------------------------------------------------- */
.proof-home {
  --paper:      #E7E9E2;   /* page background: cool greige, never white */
  --paper-lift: #F1F2EC;   /* raised sheets (manuscript, cards) */
  --paper-sink: #DADDD3;   /* recessed areas, rules on paper */
  --ink:        #14201C;   /* text: green-black, warmer than #000 */
  --ink-soft:   #3E4A44;   /* secondary text, passes AA on --paper */
  --pine:       #2E4B40;   /* deep undertone used for dark sections */
  --pine-deep:  #0F1B17;   /* the "night press" section background */
  --hl:         #F0E442;   /* highlighter yellow: the memorable mark */
  --proof:      #2B3FD6;   /* proofreader's blue: links, focus, marginalia */

  --font-read:  'Literata', 'Iowan Old Style', Georgia, serif;
  --font-ui:    'Hanken Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-code:  ui-monospace, 'Cascadia Code', Consolas, Menlo, monospace;

  /* Type scale: 1.333 (perfect fourth) from 17px, display sizes are fluid. */
  --step--1: 0.8125rem;
  --step-0:  1.0625rem;
  --step-1:  1.4rem;
  --step-2:  clamp(1.7rem, 1.3rem + 1.4vw, 2.4rem);
  --step-3:  clamp(2.2rem, 1.4rem + 3vw, 4rem);
  --step-hero: clamp(3rem, .6rem + 6.4vw, 8.2rem);

  /* Radius scales with element size: small things are tighter, big sheets
     are softer. One radius everywhere is the template tell we avoid. */
  --r-chip: 999px;
  --r-s: 6px;
  --r-m: 14px;
  --r-l: 28px;

  --gutter: clamp(1.1rem, 4vw, 3.5rem);
  --ease: cubic-bezier(.2, .8, .2, 1);        /* quick start, long settle */
  --ease-spring: cubic-bezier(.34, 1.4, .5, 1); /* slight overshoot */
}

/* --------------------------------------------------------------------------
   3. BASE
   -------------------------------------------------------------------------- */
.proof-home *, .proof-home *::before, .proof-home *::after { box-sizing: border-box; }
.proof-home { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
.proof-home {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: var(--step-0);
  line-height: 1.55;
  overflow-x: hidden;           /* the cursor halo and tilted sheets must not create page scroll */
  -webkit-font-smoothing: antialiased;
}
.proof-home h1, .proof-home h2, .proof-home h3, .proof-home p { margin: 0; }
.proof-home a { color: inherit; }
.proof-home img, .proof-home svg { display: block; max-width: 100%; }

/* Keyboard focus is always visible, in the proof-blue annotation colour. */
.proof-home :focus-visible {
  outline: 3px solid var(--proof);
  outline-offset: 3px;
  border-radius: var(--r-s);
}

.proof-home .sr-only {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}

/* GRAIN: a fixed film of fractal noise over the whole page. It is an inline
   SVG data URI (img-src allows data:), tiny, and sits above content with
   pointer-events off. mix-blend-mode multiply keeps highlights clean. */
.proof-home::after {
  content: '';
  position: fixed; inset: 0; z-index: 90; pointer-events: none;
  opacity: .5;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .08  0 0 0 0 .12  0 0 0 0 .1  0 0 0 .09 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

/* The highlighter motif, reused everywhere a phrase deserves a mark.
   background-size animates 0 -> 100% to look like a pen stroke. */
.proof-home .mark {
  background: linear-gradient(var(--hl), var(--hl)) 0 86% / 100% .62em no-repeat;
  padding: 0 .08em;
}

/* --------------------------------------------------------------------------
   5. BUTTONS (with magnetic hook)
   JS sets --mx / --my (px offsets) on .magnetic elements; the inner label
   moves a little more than the shell, which reads as physical pull.
   -------------------------------------------------------------------------- */
.proof-home .pf-btn {
  --mx: 0px; --my: 0px;
  display: inline-flex; align-items: center; gap: .6rem;
  padding: .85rem 1.5rem;
  border-radius: var(--r-chip);
  font: 600 .98rem/1 var(--font-ui);
  text-decoration: none; border: 0; cursor: pointer;
  background: var(--ink); color: var(--paper-lift);
  transform: translate(var(--mx), var(--my));
  transition: transform .45s var(--ease-spring), background .25s, color .25s;
  will-change: transform;
}
.proof-home .pf-btn span { display: block; transform: translate(calc(var(--mx) * .4), calc(var(--my) * .4)); transition: transform .45s var(--ease-spring); }
.proof-home .pf-btn:hover { background: var(--proof); }
.proof-home .pf-btn--hl { background: var(--hl); color: var(--ink); }
.proof-home .pf-btn--hl:hover { background: var(--ink); color: var(--hl); }
.proof-home .pf-btn--ghost { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--ink); }
.proof-home .pf-btn--ghost:hover { background: var(--ink); color: var(--paper-lift); }
.proof-home .pf-btn--ghost-light { background: transparent; color: #F1F2EC; box-shadow: inset 0 0 0 1.5px rgba(241,242,236,.55); }
.proof-home .pf-btn--ghost-light:hover { background: #F1F2EC; color: var(--ink); }
.proof-home .pf-btn--sm { padding: .65rem 1.15rem; font-size: .9rem; }

/* --------------------------------------------------------------------------
   6. HERO
   Asymmetric 12-column grid. The headline is set in three lines with
   deliberately uneven indents (a "staircase") that lead the eye down and
   across to the manuscript sheet, which is tilted and overlaps the type.
   Alignment: all text is left aligned; nothing is centred.
   -------------------------------------------------------------------------- */
.proof-home .pf-hero {
  position: relative;
  min-height: calc(100svh - 64px);
  padding: 4.5rem var(--gutter) 4rem;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: clamp(.6rem, 2vw, 2rem);
  align-content: center;
  overflow: clip;
}
.proof-home .hero__copy { grid-column: 1 / 9; grid-row: 1; position: relative; z-index: 2; }
.proof-home .pf-hero h1 {
  font-family: var(--font-read);
  font-weight: 560;
  font-size: var(--step-hero);
  line-height: .96;
  letter-spacing: -.045em;
  font-optical-sizing: auto;
}
/* Each line is clipped so the load animation can slide the text up from
   behind an invisible edge (a masked reveal, not a fade). */
.proof-home .h-line { display: block; overflow: hidden; padding-bottom: .12em; margin-bottom: -.12em; }
.proof-home .h-line > span { display: block; transform: translateY(105%); animation: rise 1s var(--ease) forwards; }
.proof-home .h-line:nth-child(1) > span { animation-delay: .05s; }
.proof-home .h-line:nth-child(2) > span { animation-delay: .17s; }
.proof-home .h-line:nth-child(3) > span { animation-delay: .29s; }
/* The staircase: the indents are in em so they scale with the type. */
.proof-home .h-line:nth-child(2) { margin-left: .9em; }
.proof-home .h-line:nth-child(3) { margin-left: .25em; }
.proof-home .h-line em { font-style: italic; font-weight: 400; letter-spacing: -.035em; }
/* Desktop: each headline line is a deliberate break of the staircase, never wrap it.
   The sheet is allowed to overlap the last line slightly, that is the layered look. */
@media (min-width: 961px) { .proof-home .h-line > span { white-space: nowrap; } }

@keyframes rise { to { transform: none; } }

.proof-home .hero__lede {
  max-width: 34rem; margin: 2.4rem 0 0 .25rem;
  font-family: var(--font-read); font-size: var(--step-1); line-height: 1.5;
  color: var(--ink-soft);
  opacity: 0; animation: settle .9s .7s var(--ease) forwards;
}
.proof-home .hero__actions {
  display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.4rem;
  margin: 2.2rem 0 0 .25rem;
  opacity: 0; animation: settle .9s .85s var(--ease) forwards;
}
.proof-home .hero__fine { font-size: var(--step--1); color: var(--ink-soft); }
@keyframes settle { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* ---- Manuscript sheet (the memorable element) ---- */
.proof-home .sheet-wrap {
  grid-column: 7 / 13; grid-row: 1;
  align-self: center; justify-self: end;
  width: min(100%, 36rem);
  margin-top: 6rem;
  position: relative; z-index: 3;
  opacity: 0; animation: settle 1s .45s var(--ease) forwards;
}
.proof-home .sheet {
  position: relative;
  background: var(--paper-lift);
  border-radius: var(--r-l);
  padding: clamp(1.4rem, 2.6vw, 2.3rem);
  rotate: 1.8deg;                       /* a sheet dropped on a desk */
  box-shadow: 0 1px 0 rgba(255,255,255,.7) inset,
              0 30px 60px -28px rgba(20,32,28,.45),
              0 8px 18px -10px rgba(20,32,28,.25);
  transition: rotate .8s var(--ease);
}
.proof-home .sheet-wrap:hover .sheet { rotate: 0deg; }

/* MASK-COMPOSITE EDGE: a 1.5px gradient border that follows the pointer.
   The ::before is filled with a radial gradient centred on --px/--py, then
   masked so only the 1.5px ring between the two masks shows (exclude). */
.proof-home .sheet::before, .proof-home .tile::before, .proof-home .panel::before {
  content: '';
  position: absolute; inset: 0; border-radius: inherit; padding: 1.5px;
  background: radial-gradient(220px circle at var(--px, 50%) var(--py, 0%), var(--proof), transparent 70%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  opacity: 0; transition: opacity .4s;
  pointer-events: none;
}
.proof-home .sheet:hover::before, .proof-home .tile:hover::before, .proof-home .panel:hover::before { opacity: 1; }

.proof-home .sheet__path { font: 500 var(--step--1)/1 var(--font-ui); color: var(--ink-soft); margin-bottom: 1.1rem; }
.proof-home .sheet h2 { font-family: var(--font-read); font-weight: 650; font-size: 1.9rem; letter-spacing: -.03em; line-height: 1.1; margin-bottom: 1rem; }
.proof-home .sheet p { font-family: var(--font-read); font-size: 1.02rem; line-height: 1.7; color: #26322d; }
.proof-home .sheet p + p { margin-top: .9rem; }

/* Highlight sweep. Marks start with zero-width highlighter; JS adds .on
   to the ones matching the active question. --i staggers each stroke. */
.proof-home .sheet mark {
  color: inherit; padding: 0 .06em;
  background: linear-gradient(var(--hl), var(--hl)) 0 88% / 0% .7em no-repeat;
  transition: background-size .7s var(--ease) calc(var(--i, 0) * 120ms);
}
.proof-home .sheet mark.on { background-size: 100% .7em; }

/* ---- The question + cited answer (lives under the sheet) ---- */
.proof-home .ask { margin-top: 1.4rem; display: flex; flex-wrap: wrap; gap: .5rem; }
.proof-home .chip {
  font: 500 .86rem/1.2 var(--font-ui);
  padding: .55rem .9rem; border-radius: var(--r-chip);
  background: transparent; color: var(--ink); cursor: pointer;
  border: 0; box-shadow: inset 0 0 0 1.25px rgba(20,32,28,.28);
  transition: background .25s, box-shadow .25s, color .25s;
}
.proof-home .chip:hover { box-shadow: inset 0 0 0 1.25px var(--ink); }
.proof-home .chip[aria-pressed="true"] { background: var(--ink); color: var(--paper-lift); box-shadow: none; }

.proof-home .answer {
  margin-top: .9rem; padding: 1rem 1.15rem;
  border-radius: var(--r-m);
  background: var(--pine-deep); color: #DDE5DF;
  font-size: .95rem; line-height: 1.55; min-height: 6.6rem;
}
.proof-home .answer__who { display: flex; align-items: center; gap: .5rem; font-weight: 600; font-size: .8rem; color: var(--hl); margin-bottom: .35rem; }
.proof-home .answer__who::before { content: ''; width: .5rem; height: .5rem; border-radius: 50%; background: var(--hl); }
.proof-home .answer__cite { margin-top: .6rem; font: 500 .78rem/1.3 var(--font-code); color: #9FB3A8; }
.proof-home .answer__text { transition: opacity .25s; }
.proof-home .answer.is-swapping .answer__text { opacity: 0; }

/* Marginalia: handwritten-feeling note in proof blue, pinned beside the sheet. */
.proof-home .margin-note {
  position: absolute; z-index: 4; left: -3.6rem; top: 7.5rem; width: 8.2rem;
  font: italic 400 .92rem/1.3 var(--font-read); color: var(--proof);
  rotate: -5deg;
}
.proof-home .margin-note svg { width: 3rem; height: 1.6rem; margin-top: .2rem; }
@media (max-width: 1100px) { .proof-home .margin-note { display: none; } }

/* Tablet/mobile hero: single column, sheet follows the copy. */
@media (max-width: 960px) {
  .proof-home .pf-hero { display: block; padding-top: 3.5rem; min-height: 0; }
  .proof-home .sheet-wrap { margin: 3.5rem 0 0; width: 100%; }
  .proof-home .sheet { rotate: 0deg; }
  .proof-home .h-line:nth-child(2) { margin-left: .5em; }
}

/* --------------------------------------------------------------------------
   7. SECTION FRAME
   Section titles sit hard left, body copy to the right on a narrower measure
   (never wider than ~64ch), so headings and text form an offset pair.
   -------------------------------------------------------------------------- */
.proof-home .pf-section { padding: clamp(5rem, 11vw, 9rem) var(--gutter); position: relative; }
.proof-home .section__head {
  display: grid; grid-template-columns: repeat(12, 1fr); column-gap: clamp(.6rem, 2vw, 2rem);
  margin-bottom: clamp(2.5rem, 5vw, 4.5rem);
}
.proof-home .section__head h2 {
  grid-column: 1 / 8;
  font-family: var(--font-read); font-weight: 560; font-size: var(--step-3);
  line-height: 1.02; letter-spacing: -.04em;
}
.proof-home .section__head p {
  grid-column: 9 / 13; align-self: end;
  font-family: var(--font-read); color: var(--ink-soft); max-width: 30rem;
}
@media (max-width: 860px) {
  .proof-home .section__head { display: block; }
  .proof-home .section__head p { margin-top: 1.2rem; }
}

/* --------------------------------------------------------------------------
   8. HORIZONTAL TRACK ("Where one page ends up")
   Native overflow scroll + scroll-snap (no scroll hijacking: the page keeps
   its normal vertical wheel behaviour). Cards deliberately have different
   widths and heights so the strip reads as a collage, not a carousel.
   -------------------------------------------------------------------------- */
.proof-home .track-wrap { margin: 0 calc(-1 * var(--gutter)); }
.proof-home .track {
  display: flex; align-items: flex-start; gap: clamp(.9rem, 2vw, 1.6rem);
  overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  padding: 0 var(--gutter) 2rem;
  scrollbar-width: none;
  cursor: grab;
}
.proof-home .track::-webkit-scrollbar { display: none; }
.proof-home .track.is-dragging { cursor: grabbing; scroll-snap-type: none; }
.proof-home .tile {
  position: relative; flex: none; scroll-snap-align: start;
  border-radius: var(--r-l); padding: 1.6rem;
  background: var(--paper-lift);
  box-shadow: 0 18px 40px -26px rgba(20,32,28,.45);
}
.proof-home .tile h3 { font-family: var(--font-read); font-weight: 650; font-size: 1.5rem; letter-spacing: -.03em; line-height: 1.12; margin-bottom: .7rem; }
.proof-home .tile p { color: var(--ink-soft); font-size: .98rem; }
.proof-home .tile--a { width: min(26rem, 82vw); }
.proof-home .tile--b { width: min(34rem, 86vw); margin-top: 3.5rem; background: var(--pine-deep); color: #DDE5DF; }
.proof-home .tile--b p { color: #A9BBB1; }
.proof-home .tile--c { width: min(22rem, 80vw); margin-top: 1.2rem; background: var(--hl); box-shadow: 0 18px 40px -26px rgba(80,70,0,.6); }
.proof-home .tile--c p { color: #3a3500; }
.proof-home .tile--d { width: min(30rem, 84vw); margin-top: 5rem; }
.proof-home .tile--e { width: min(24rem, 82vw); margin-top: 2rem; background: var(--paper-sink); box-shadow: none; }

/* Code-ish excerpts inside tiles. Small, plain, honest about the format. */
.proof-home .snip {
  margin-top: 1.1rem; padding: .9rem 1rem; border-radius: var(--r-s);
  font: .8rem/1.6 var(--font-code); white-space: pre-wrap; overflow-wrap: anywhere;
  background: rgba(20,32,28,.07);
}
.proof-home .tile--b .snip { background: rgba(255,255,255,.07); color: #C9D8CF; }
.proof-home .tile--c .snip { background: rgba(20,32,28,.1); color: var(--ink); }
.proof-home .snip b { font-weight: 600; color: var(--proof); }
.proof-home .tile--b .snip b { color: var(--hl); }

.proof-home .track-meter { height: 2px; background: var(--paper-sink); margin: 0 var(--gutter); border-radius: 2px; overflow: hidden; }
.proof-home .track-meter i { display: block; height: 100%; width: 20%; background: var(--ink); transform-origin: left; transition: width .15s linear; }

/* Language list inside the translations tile. */
.proof-home .langs { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: 1rem; }
.proof-home .langs span { font-size: .82rem; padding: .3rem .65rem; border-radius: var(--r-chip); background: var(--paper-lift); }

/* --------------------------------------------------------------------------
   9. EXPANDING PANELS (bento that opens on action)
   Desktop: a row of four; the active one grows (flex-grow) and reveals its
   content, the others fold to vertical titles. Mobile: a vertical accordion.
   Motion here answers a click, so it is allowed to be expressive.
   -------------------------------------------------------------------------- */
.proof-home .panels { display: flex; gap: .8rem; height: clamp(26rem, 52vw, 32rem); }
.proof-home .panel {
  position: relative; overflow: hidden; border-radius: var(--r-l);
  flex: 1 1 0; min-width: 4.6rem;
  background: var(--paper-lift);
  box-shadow: 0 18px 40px -28px rgba(20,32,28,.5);
  transition: flex-grow .8s var(--ease), background .5s;
}
.proof-home .panel.is-expanded { flex-grow: 5.2; }
.proof-home .panel:nth-child(2) { border-radius: var(--r-l) var(--r-l) 80px var(--r-l); }   /* custom container shapes */
.proof-home .panel:nth-child(3) { border-radius: var(--r-l) 80px var(--r-l) var(--r-l); }
.proof-home .panel__btn {
  position: absolute; inset: 0; width: 100%; z-index: 2;
  background: none; border: 0; cursor: pointer; text-align: left;
  display: flex; padding: 1.4rem;
  font: 600 1.3rem/1 var(--font-read); letter-spacing: -.02em; color: var(--ink);
}
/* Folded: the title is turned sideways. Open: it returns to horizontal. */
.proof-home .panel__title { transition: transform .6s var(--ease); writing-mode: vertical-rl; rotate: 180deg; align-self: flex-end; }
.proof-home .panel.is-expanded .panel__title { writing-mode: horizontal-tb; rotate: 0deg; align-self: flex-start; }
.proof-home .panel__body {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 1.4rem;
  opacity: 0; translate: 0 14px; pointer-events: none;
  transition: opacity .35s, translate .6s var(--ease);
}
.proof-home .panel.is-expanded .panel__body { opacity: 1; translate: 0 0; pointer-events: auto; transition-delay: .25s; }
.proof-home .panel__body p { max-width: 28rem; color: var(--ink-soft); font-family: var(--font-read); }
.proof-home .panel__body ul { margin: .9rem 0 0; padding: 0; list-style: none; display: grid; gap: .35rem; font-size: .95rem; }
.proof-home .panel__body li::before { content: ''; display: inline-block; width: .55em; height: .55em; margin-right: .6em; border-radius: 50%; background: var(--hl); box-shadow: inset 0 0 0 1px rgba(20,32,28,.3); }
.proof-home .panel[data-tone="dark"] { background: var(--pine-deep); }
.proof-home .panel[data-tone="dark"] .panel__btn { color: #F1F2EC; }
.proof-home .panel[data-tone="dark"] .panel__body p, .proof-home .panel[data-tone="dark"] li { color: #B3C4BA; }

/* PANEL PHOTOS: generated images sit behind the content on two panels.
   ::after is the picture; a gradient on top keeps the text readable.
   Translate (dark) darkens the whole photo, Publish (light) washes the
   lower half toward paper because its text is dark. */
.proof-home .panel::after { content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none; background-size: cover; background-position: center; }
.proof-home .panel__body { z-index: 2; }
.proof-home .panel--translate::after {
  background-image: linear-gradient(to top, rgba(15,27,23,.94) 8%, rgba(15,27,23,.55) 70%), url('/images/proof-home/type-macro.webp');
}
.proof-home .panel--publish::after {
  background-image: linear-gradient(to top, rgba(241,242,236,.97) 12%, rgba(241,242,236,.35) 75%), url('/images/proof-home/paper-edge.webp');
}

@media (max-width: 860px) {
  .proof-home .panels { flex-direction: column; height: auto; }
  .proof-home .panel { flex: none; min-height: 4.2rem; transition: min-height .7s var(--ease); }
  .proof-home .panel.is-expanded { min-height: 20rem; }
  .proof-home .panel__title, .proof-home .panel.is-expanded .panel__title { writing-mode: horizontal-tb; rotate: 0deg; align-self: flex-start; }
}

/* --------------------------------------------------------------------------
   9a. ROLE PICKER
   Left: roles set as large serif lines, the active one wears the highlighter.
   Right: one sheet that swaps content. Selection answers a click, so the
   highlighter stroke (background-size) animates to show what changed.
   -------------------------------------------------------------------------- */
.proof-home .roles__grid { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: clamp(.6rem, 2vw, 2rem); row-gap: 2rem; align-items: start; }
.proof-home .roles__tabs { grid-column: 1 / 6; display: grid; justify-items: start; gap: .15rem; }
.proof-home .roles__tabs button {
  font: 560 var(--step-2)/1.15 var(--font-read); letter-spacing: -.035em;
  color: var(--ink-soft); background: linear-gradient(var(--hl), var(--hl)) 0 90% / 0% .55em no-repeat;
  border: 0; padding: .1em .12em; margin-left: -.12em; cursor: pointer; text-align: left;
  transition: background-size .5s var(--ease), color .25s;
}
.proof-home .roles__tabs button:hover { color: var(--ink); }
.proof-home .roles__tabs button[aria-selected="true"] { color: var(--ink); background-size: 100% .55em; }
.proof-home .roles__stage { grid-column: 7 / 13; background: var(--paper-lift); border-radius: var(--r-l); padding: clamp(1.4rem, 2.6vw, 2.4rem); min-height: 22rem; box-shadow: 0 18px 40px -26px rgba(20,32,28,.45); }
.proof-home .role h3 { font: 650 1.6rem/1.15 var(--font-read); letter-spacing: -.03em; margin-bottom: .9rem; }
.proof-home .role p { font-family: var(--font-read); color: var(--ink-soft); }
.proof-home .role .snip { margin-top: 1.2rem; }
.proof-home .role__link { display: inline-block; margin-top: 1.2rem; font-weight: 600; font-size: .95rem; color: var(--proof); }
.proof-home .role:not([hidden]) { animation: settle .5s var(--ease); }
@media (max-width: 900px) { .proof-home .roles__tabs, .proof-home .roles__stage { grid-column: 1 / -1; } .proof-home .roles__tabs { grid-auto-flow: row; display: flex; flex-wrap: wrap; gap: .1rem .9rem; width: 100%; } .proof-home .roles__tabs button { font-size: 1.5rem; } }

/* --------------------------------------------------------------------------
   9b. START SECTION (conversion)
   Left: the real three-step sequence (so numerals are justified) with the
   one-click buttons directly under it. Right: a plain statement of what
   happens when the trial ends. The highlighter marks the Pro column only,
   the one place the eye should land when comparing.
   -------------------------------------------------------------------------- */
.proof-home .start { padding-top: 0; }
.proof-home .start__grid { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: clamp(.6rem, 2vw, 2rem); row-gap: 3rem; align-items: start; }
.proof-home .start__steps { grid-column: 1 / 7; }
.proof-home .start__steps ol { list-style: none; margin: 0; padding: 0; counter-reset: s; display: grid; gap: 1.5rem; }
.proof-home .start__steps li { counter-increment: s; display: grid; grid-template-columns: 3.4rem 1fr; column-gap: 1rem; align-items: baseline; }
.proof-home .start__steps li::before { content: counter(s); grid-row: 1 / 3; font: 400 italic 3.2rem/1 var(--font-read); color: var(--proof); }
.proof-home .start__steps b { font: 650 1.35rem/1.2 var(--font-read); letter-spacing: -.02em; }
.proof-home .start__steps li span { color: var(--ink-soft); }
.proof-home .start__sso { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 2.2rem; }
.proof-home .start__alt { margin-top: 1.1rem; font-size: .92rem; color: var(--ink-soft); }
.proof-home .start__alt a { color: var(--proof); }

.proof-home .keep { grid-column: 8 / 13; background: var(--paper-lift); border-radius: var(--r-l); padding: clamp(1.4rem, 2.4vw, 2.2rem); box-shadow: 0 18px 40px -26px rgba(20,32,28,.45); }
.proof-home .keep__lede { font: 600 1.25rem/1.3 var(--font-read); letter-spacing: -.02em; margin-bottom: 1.4rem; }
.proof-home .keep__cols { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; }
.proof-home .keep h3 { font: 700 .95rem/1 var(--font-ui); margin-bottom: .8rem; }
.proof-home .keep__pro h3 { width: fit-content; }   /* block-level so both columns' lists start on the same line */
.proof-home .keep__pro h3 { background: linear-gradient(var(--hl), var(--hl)) 0 88% / 100% .6em no-repeat; padding: 0 .15em; margin-left: -.15em; }
.proof-home .keep ul { list-style: none; margin: .9rem 0 0; padding: 0; display: grid; gap: .5rem; font-size: .92rem; color: var(--ink-soft); }
.proof-home .keep__more { display: inline-block; margin-top: 1.4rem; font-size: .92rem; font-weight: 600; color: var(--proof); }
.proof-home .proof a { color: var(--proof); }
.proof-home .proof.proof--hosting { margin-top: 1rem; font-style: normal; font-family: var(--font-ui); font-size: .92rem; }
.proof-home .proof { margin-top: 3rem; font-family: var(--font-read); font-style: italic; color: var(--ink-soft); max-width: 36rem; }
@media (max-width: 900px) { .proof-home .start__steps, .proof-home .keep { grid-column: 1 / -1; } .proof-home .keep__cols { grid-template-columns: 1fr; } }

/* --------------------------------------------------------------------------
   10. NIGHT PRESS (dark section)
   One dark section, to give the page a change of pressure. A soft spotlight
   follows the pointer (--sx/--sy) so the section feels lit from your cursor.
   -------------------------------------------------------------------------- */
.proof-home .night {
  position: relative; background: var(--pine-deep); color: #E3EAE5;
  border-radius: var(--r-l) var(--r-l) 0 0;
  overflow: clip;
}
.proof-home .night::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(520px circle at var(--sx, 70%) var(--sy, 20%), rgba(240,228,66,.13), transparent 70%);
}
.proof-home .night .section__head h2 { color: #F1F2EC; }
.proof-home .night .section__head p { color: #A9BBB1; }
.proof-home .night__grid { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: clamp(.6rem, 2vw, 2rem); row-gap: 2rem; position: relative; }
.proof-home .night__quote {
  grid-column: 1 / 6;
  font-family: var(--font-read); font-style: italic; font-weight: 400;
  font-size: var(--step-2); line-height: 1.25; letter-spacing: -.02em;
}
.proof-home .night__quote .mark { color: var(--ink); }
.proof-home .night__code { grid-column: 7 / 13; display: grid; gap: 1rem; }
.proof-home .file {
  border-radius: var(--r-m); background: rgba(255,255,255,.05);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.1);
  overflow: hidden;
}
.proof-home .file__name { padding: .6rem 1rem; font: 500 .78rem/1 var(--font-code); color: #9FB3A8; background: rgba(255,255,255,.05); }
.proof-home .file pre { margin: 0; padding: 1rem; font: .82rem/1.65 var(--font-code); color: #D5E0D9; white-space: pre-wrap; overflow-wrap: anywhere; }
.proof-home .file pre b { color: var(--hl); font-weight: 500; }
@media (max-width: 900px) {
  .proof-home .night__quote, .proof-home .night__code { grid-column: 1 / -1; }
}

/* PLATE: the generated still life. It bleeds off the right edge, and a
   two-axis mask fades its top and left into the pine background so it
   reads as lit paper emerging from the dark rather than a pasted photo. */
.proof-home .plate { margin: clamp(3rem, 7vw, 6rem) calc(-1 * var(--gutter)) calc(-1 * clamp(5rem, 11vw, 9rem)) 18%; position: relative; }
.proof-home .plate img {
  width: 100%; height: auto; aspect-ratio: 1800 / 1005; object-fit: cover;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 38%), linear-gradient(to bottom, transparent, #000 30%);
  -webkit-mask-composite: source-in;
          mask-image: linear-gradient(to right, transparent, #000 38%), linear-gradient(to bottom, transparent, #000 30%);
          mask-composite: intersect;
}
@media (max-width: 900px) { .proof-home .plate { margin-left: 0; } }

/* --------------------------------------------------------------------------
   11. CLOSING CTA + FOOTER
   -------------------------------------------------------------------------- */
.proof-home .close { background: var(--pine-deep); color: #F1F2EC; padding: 0 var(--gutter) 3rem; position: relative; isolation: isolate; }
/* The type-tray photo sits on the right half, faded into the pine background
   on its left edge so the headline keeps clean dark space. */
.proof-home .close::before {
  content: ''; position: absolute; z-index: -1; top: 0; right: 0; bottom: 0; width: min(64%, 62rem);
  background: url('/images/proof-home/type-tray.webp') right center / cover no-repeat;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 55%);
          mask-image: linear-gradient(to right, transparent, #000 55%);
  opacity: .8;
}
@media (max-width: 900px) { .proof-home .close::before { width: 100%; opacity: .35; } }
.proof-home .close__inner { border-top: 1px solid rgba(255,255,255,.14); padding-top: clamp(3rem, 7vw, 6rem); display: grid; grid-template-columns: repeat(12, 1fr); column-gap: clamp(.6rem, 2vw, 2rem); row-gap: 2rem; }
.proof-home .close h2 { grid-column: 1 / 9; font-family: var(--font-read); font-weight: 560; font-size: var(--step-hero); line-height: .96; letter-spacing: -.045em; }
.proof-home .close h2 span { display: block; margin-left: .7em; font-style: italic; font-weight: 400; }
.proof-home .close__cta { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.6rem; }
.proof-home .close__cta small { color: #A9BBB1; }
.proof-home .foot { margin-top: 4rem; display: flex; flex-wrap: wrap; gap: 1rem 2rem; justify-content: space-between; font-size: .88rem; color: #B3C4BA; text-shadow: 0 1px 8px rgba(15,27,23,.9); }
.proof-home .foot a { text-decoration: none; }
.proof-home .foot a:hover { color: #F1F2EC; }

/* --------------------------------------------------------------------------
   12. CURSOR TRAIL (fine pointers only)
   A highlighter-yellow halo trails the real cursor (the native cursor is
   NOT hidden, for accessibility). It swells over interactive elements.
   -------------------------------------------------------------------------- */
.proof-home .halo {
  position: fixed; z-index: 95; top: 0; left: 0; pointer-events: none;
  width: 2.2rem; height: 2.2rem; margin: -1.1rem 0 0 -1.1rem;
  border-radius: 50%; background: var(--hl); mix-blend-mode: multiply;
  opacity: 0; transition: opacity .3s, width .35s var(--ease), height .35s var(--ease), margin .35s var(--ease);
}
.proof-home .halo.is-live { opacity: .85; }
.proof-home .halo.is-big { width: 4.4rem; height: 4.4rem; margin: -2.2rem 0 0 -2.2rem; }
@media (hover: none), (pointer: coarse) { .proof-home .halo { display: none; } }

/* --------------------------------------------------------------------------
   13. SCROLL REVEAL (used once per section head, not per element)
   -------------------------------------------------------------------------- */
.proof-home .pf-reveal { opacity: 0; translate: 0 22px; transition: opacity .8s var(--ease), translate .8s var(--ease); }
.proof-home .pf-reveal.in { opacity: 1; translate: 0 0; }

/* --------------------------------------------------------------------------
   14. REDUCED MOTION
   Everything animated becomes instantly visible and static.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .proof-home { scroll-behavior: auto; }
  .proof-home .h-line > span, .proof-home .hero__lede, .proof-home .hero__actions, .proof-home .sheet-wrap { animation: none; transform: none; opacity: 1; }
  .proof-home .pf-reveal { opacity: 1; translate: 0 0; transition: none; }
  .proof-home .sheet, .proof-home .panel, .proof-home .panel__body, .proof-home .pf-btn, .proof-home .pf-btn span, .proof-home .sheet mark { transition: none; }
  .proof-home .halo { display: none; }
}

/* ==========================================================================
   DARK THEME ("night press")
   The site toggles dark mode with [data-theme="dark"] on <html>. Tokens are
   re-pointed first, so everything built from var(--paper), var(--ink) and
   friends flips for free. The rules after the tokens fix the places that
   hard-code a colour or put text on the solid highlighter yellow: light ink
   on solid yellow is unreadable, so in dark mode highlights become a
   translucent yellow wash that keeps the light text legible.
   ========================================================================== */
[data-theme="dark"] .proof-home {
  --paper:      #0E1512;
  --paper-lift: #16231E;
  --paper-sink: #1D2D26;
  --ink:        #E7E9E2;
  --ink-soft:   #A9B7AF;
  --pine-deep:  #070D0A;   /* darker than the page so dark cards still read as cards */
  --proof:      #8E9BFF;   /* lighter blue: AA contrast on the dark paper */
}
/* shadows: ink-coloured shadows vanish on dark, use black */
[data-theme="dark"] .proof-home .sheet,
[data-theme="dark"] .proof-home .tile,
[data-theme="dark"] .proof-home .panel,
[data-theme="dark"] .proof-home .keep,
[data-theme="dark"] .proof-home .roles__stage { box-shadow: 0 18px 40px -26px rgba(0,0,0,.8); }
[data-theme="dark"] .proof-home .sheet { box-shadow: 0 1px 0 rgba(255,255,255,.06) inset, 0 30px 60px -28px rgba(0,0,0,.8); }
[data-theme="dark"] .proof-home .sheet p { color: #D2DAD4; }
[data-theme="dark"] .proof-home .chip { box-shadow: inset 0 0 0 1.25px rgba(231,233,226,.35); }
[data-theme="dark"] .proof-home .chip[aria-pressed="true"] { box-shadow: none; }
[data-theme="dark"] .proof-home .snip { background: rgba(255,255,255,.06); }
/* solid yellow surfaces keep dark text in both themes */
[data-theme="dark"] .proof-home .pf-btn--hl,
[data-theme="dark"] .proof-home .tile--c,
[data-theme="dark"] .proof-home .tile--c h3,
[data-theme="dark"] .proof-home .tile--c .snip { color: #14201C; }
[data-theme="dark"] .proof-home .pf-btn--hl:hover { background: var(--ink); color: #14201C; }
[data-theme="dark"] .proof-home .tile--c .snip { background: rgba(20,32,28,.12); }
/* highlighter under light text: translucent wash instead of solid yellow */
[data-theme="dark"] .proof-home .sheet mark { background-image: linear-gradient(rgba(240,228,66,.4), rgba(240,228,66,.4)); }
[data-theme="dark"] .proof-home .mark,
[data-theme="dark"] .proof-home .night__quote .mark { color: var(--ink); background-image: linear-gradient(rgba(240,228,66,.38), rgba(240,228,66,.38)); }
[data-theme="dark"] .proof-home .keep__pro h3 { background-image: linear-gradient(rgba(240,228,66,.4), rgba(240,228,66,.4)); }
[data-theme="dark"] .proof-home .roles__tabs button { background-image: linear-gradient(rgba(240,228,66,.4), rgba(240,228,66,.4)); }
/* Publish panel photo: wash toward the dark panel, not toward light paper */
[data-theme="dark"] .proof-home .panel--publish::after {
  background-image: linear-gradient(to top, rgba(22,35,30,.97) 12%, rgba(22,35,30,.4) 75%), url('/images/proof-home/paper-edge.webp');
}
/* the halo multiplies on light paper; on dark it needs to add light instead */
[data-theme="dark"] .proof-home .halo { mix-blend-mode: screen; }
[data-theme="dark"] .proof-home .halo.is-live { opacity: .3; }
/* grain: multiply darkens, which is invisible on dark paper; soften it */
[data-theme="dark"] .proof-home::after { opacity: .25; }
/* The dark section and closing band are already dark; separate them from the dark page */
[data-theme="dark"] .proof-home .night { box-shadow: 0 -1px 0 rgba(255,255,255,.06); }