/* Ribbon, calm (from v2). Same ribbon and letters, no scroll story: one screen that answers
   what it is, what it works with and what it costs, then three short blocks. */
.pin { height:100svh; }
.dial, .dock { display:none; }
.cap { bottom:calc(9.6rem + 4.6rem); width:min(30rem,calc(100% - 2*var(--g))); }
.cap .lede { font-size:clamp(1.05rem,1.5vw,1.3rem); max-width:28rem; }
.acts { bottom:9.9rem; }
.facts { position:absolute; z-index:5; inset:auto 0 0 0; display:grid; grid-template-columns:1fr 1fr 1.25fr; border-top:1px solid var(--line); background:rgba(241,237,228,.9); backdrop-filter:blur(8px); }
.facts div { padding:1.1rem var(--g) 1.3rem; border-left:1px solid var(--line); } .facts div:first-child { border-left:0; }
.facts .eyebrow { display:block; margin:0; color:var(--fgsoft); }
.facts b { display:block; font:700 clamp(1.2rem,1.9vw,1.6rem)/1.1 var(--sans); letter-spacing:-.02em; margin-top:.4rem; }
.facts small { display:block; color:var(--fgsoft); font-size:.86rem; margin-top:.25rem; }
.facts .price b { font-size:clamp(1.6rem,2.8vw,2.5rem); } .facts .price i { font-style:normal; color:var(--red); }

main { background:var(--paper); color:var(--ink); --line:rgba(14,14,16,.14); --fgsoft:rgba(14,14,16,.62); }
main section.c { padding:clamp(3rem,7vw,6rem) var(--g); border-top:1px solid var(--line); display:grid; grid-template-columns:minmax(0,1fr) minmax(0,2fr); gap:2rem; }
main section.c h2 { font:400 clamp(2.2rem,4.4vw,4rem)/.92 var(--display); text-transform:uppercase; }
main section.c h2 i { font-family:"Instrument Serif",serif; text-transform:none; }
.rows div { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:.2rem 1.5rem; padding:1rem 0; border-top:1px solid var(--line); } .rows div:first-child { border-top:0; }
.rows b { font-weight:700; font-size:1.2rem; } .rows span { color:var(--fgsoft); font-size:.92rem; } .rows em { font:500 .92rem/1.3 var(--mono); font-style:normal; text-align:right; grid-row:1 / span 2; grid-column:2; align-self:center; }
main pre { font:400 .82rem/1.75 var(--mono); background:var(--ink); color:#d9d4c8; border-radius:14px; padding:1.3rem 1.4rem; overflow:auto; } main pre u { text-decoration:none; color:var(--amber); }
.more { display:inline-block; margin-top:1rem; border-bottom:1.5px solid var(--ink); }
main section.end { display:block; text-align:center; } main section.end h2 { font-size:clamp(3rem,8vw,7rem); } main section.end p { color:var(--fgsoft); margin:1rem auto 1.5rem; max-width:30rem; }
main .btns { display:flex; gap:.6rem; justify-content:center; flex-wrap:wrap; } main .btn.ghost { color:var(--ink); }
/* The footer every page has: the mark, one line, the year, on paper behind a hairline. */
.cf { display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:1rem; padding:1.5rem var(--g) calc(1.7rem + env(safe-area-inset-bottom)); border-top:1px solid var(--line); background:var(--paper); font:400 .72rem/1.4 var(--mono); letter-spacing:.06em; text-transform:uppercase; color:rgba(14,14,16,.62); }
.cf .mark { justify-self:start; font-size:1.05rem; gap:.4rem; text-transform:none; letter-spacing:-.04em; color:var(--ink); } .cf .mark i { width:.6rem; height:.6rem; }
.cf .foot-copy { justify-self:end; }
.cf .foot-copy a { border-bottom:1px solid currentColor; }

@media (max-width:760px) {
  /* On a phone the 3D headline already says the line; the strip is three one-line answers. */
  .facts { grid-template-columns:1fr; }
  .facts div { border-left:0; border-top:1px solid var(--line); padding:.6rem var(--g); display:flex; align-items:baseline; justify-content:space-between; gap:1rem; } .facts div:first-child { border-top:0; }
  .facts .eyebrow { font-size:.6rem; flex:none; } .facts small { display:none; }
  .facts b { font-size:.92rem; margin:0; text-align:right; } .facts .price b { font-size:1.15rem; }
  .cap, .cap[data-ch="0"] { display:none; }
  .acts { bottom:9.6rem; } .act[data-ch="0"] { display:flex; }
  .hint { display:none; }
  main section.c { grid-template-columns:1fr; gap:1.2rem; } .rows em { font-size:.78rem; } .cf { grid-template-columns:1fr auto; } .cf .foot-line { display:none; }
}
/* A small or short window: the 3D line fills the screen, so the paragraph under it would sit in the letters. */
@media (max-width:1100px), (max-height:760px) { .cap, .cap[data-ch="0"] { display:none; } }
/* The scrollbar is the page's own: a thin ink pill on paper, no arrows, no white gutter. */
::-webkit-scrollbar { width:12px; height:12px; background:transparent; }
::-webkit-scrollbar-track, ::-webkit-scrollbar-corner { background:transparent; }
::-webkit-scrollbar-button { display:none; width:0; height:0; }
::-webkit-scrollbar-thumb { background:rgba(14,14,16,.28); border:3px solid transparent; border-radius:99px; background-clip:padding-box; min-height:40px; }
::-webkit-scrollbar-thumb:hover { background-color:rgba(14,14,16,.55); }
::-webkit-scrollbar-thumb:active { background-color:var(--ink); }
@supports not selector(::-webkit-scrollbar) { * { scrollbar-width:thin; scrollbar-color:rgba(14,14,16,.35) transparent; } }
/* The bar is the dashboard's bar: the same paper behind it, so nothing shifts between the two pages,
   and it stays paper when the page is scrolled. */
.nav, .nav.solid { background:rgba(241,237,228,.86); backdrop-filter:blur(14px); color:var(--ink); }
.nav.solid .btn { background:var(--ink); color:var(--paper); }

/* Drawn on the CPU (no GPU acceleration): blurring what lies behind a bar is redone on every scrolled pixel, so the bars are plain paper. */
.soft .facts, .soft .nav, .soft .nav.solid { backdrop-filter:none; -webkit-backdrop-filter:none; background:var(--paper, #f1ede4); }
.soft .grain { display:none; }
.soft .hint { display:none; }          /* the ribbon holds still there, so there is nothing to pull */
@media (max-width:760px) { .facts, .nav, .nav.solid { backdrop-filter:none; -webkit-backdrop-filter:none; background:rgba(241,237,228,.97); } }

/* No WebGL at all (the text version of the first screen): the strip of facts follows the text
   instead of lying over its last lines, and runs edge to edge like everywhere else. */
.nogl .facts { position:static; margin:2.5rem calc(-1 * var(--g)) -4rem; backdrop-filter:none; -webkit-backdrop-filter:none; background:var(--paper, #f1ede4); }
.nogl .grain { display:none; }

/* No WebGL: the first screen's picture, rendered once from the real scene (still-wide / still-tall:
   the headline with the ribbon through it), stands where the scene would be. The picture carries
   the headline, so the text one is kept for screen readers only. Its paper is a shade lighter than
   the page's, as the lit scene's is, so the block takes that shade too. */
.nogl .stage { background:#fbf7f4; padding-top:5.2rem; }
.nogl .stage::before { content:""; display:block; margin:0 calc(-1 * var(--g)) 1rem; aspect-ratio:1908 / 800; background:url(still-wide.webp) 0 18% / 100% auto no-repeat; }
.nogl .sr h1 { position:absolute; width:1px; height:1px; margin:0; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
@media (max-width:760px) { .nogl .stage::before { aspect-ratio:500 / 620; background:url(still-tall.webp) 0 39.7% / 177.6% auto no-repeat; } }
/* The Acrobat extension's floating button (a host it appends to <html>) has no place on this page. */
#aiFabShadowRoot, html > [data-fab-type] { display:none !important; }