/* Vernacular's site (docs/PLAN-2026-11-01-vernacular-site-redesign.md): the page translates. Dark only, on Forest night.
   Geologica for what the app says, Red Hat Mono for the technical line, the system's text face for reading.
   Forest night #8CC79E is the action (with #0F1A12 text), the links, one hero phrase and every line that carries on.
   Saffron #E9B44C marks only what needs you: a tall mark, a lane that stops, its tick and its words. It is never a
   heading, a button, a glow or a decoration. No red, no warning signs, no countdown, no date for macOS 28.

   WCAG contrast, measured (relative luminance, 1 Nov 2026). AA asks 4.5:1 for text, 3:1 for large text and UI.
                       on ground #0F1A12   on panel #142318   on raised #1B2E20
     text     #F1EEE4       15.4               14.1               12.4
     soft     #CFCBBE       11.0               10.1                8.9
     muted    #A3A195        6.9                6.3                5.5
     forest   #8CC79E        9.2                8.4                7.4
     saffron  #E9B44C        9.4                8.6                7.6
     line28   #7E8076        4.4                4.1                3.6   (a graphic: 3:1)
     #0F1A12 on the action #8CC79E (buttons) 9.2 · the action against the ground 9.2 (UI 3:1)
   Graphics, not text: the quiet marks #3A4A3E are 1.9 on the ground and decorative, as in the app (the meaning is in
   the tall marks and the words beside them). The glow is #234A30 at 40%, behind the hero and the close only. */
@font-face { font-family: 'Geologica'; src: url('fonts/Geologica-Variable.latin.woff2') format('woff2'); font-weight: 100 900; font-display: swap; }
@font-face { font-family: 'Red Hat Mono'; src: url('fonts/RedHatMono-Variable.latin.woff2') format('woff2'); font-weight: 400 600; font-display: swap; }

:root {
  --ground: #0F1A12; --panel: #142318; --raised: #1B2E20; --line: rgba(140, 199, 158, .14); --line-strong: rgba(140, 199, 158, .28);
  --text: #F1EEE4; --soft: #CFCBBE; --muted: #A3A195;
  --forest: #8CC79E; --saffron: #E9B44C; --on-action: #0F1A12; --action-hover: #A7D6B5;
  --quiet: #3A4A3E; --line28: #7E8076;
  --glow: rgba(35, 74, 48, .4); --top: rgba(15, 26, 18, .84);
  --head: 'Geologica', -apple-system, BlinkMacSystemFont, 'SF Pro Display', sans-serif;
  --mono: 'Red Hat Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --body: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --ease: cubic-bezier(.25, .1, .25, 1);
  --out: cubic-bezier(.2, .8, .2, 1);
  --gutter: 24px;
  --wrap: min(1180px, calc(100vw - 2 * var(--gutter)));
  color-scheme: dark;
}
/* Increase Contrast, as in the app: stronger hairlines and quiet marks, muted text up to soft */
@media (prefers-contrast: more) {
  :root { --line: rgba(140, 199, 158, .32); --line-strong: rgba(140, 199, 158, .55); --muted: var(--soft); --quiet: #5C6B60; --line28: #A3A195; }
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; background: var(--ground); }
main { overflow-x: clip; }
body { margin: 0; background: var(--ground); color: var(--text); font: 17px/1.55 var(--body); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
a { color: var(--forest); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }
h1, h2, h3 { font-family: var(--head); font-weight: 600; letter-spacing: -0.03em; line-height: 1.04; margin: 0; text-wrap: balance; font-variant-numeric: lining-nums; }
h3 { line-height: 1.18; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
img { max-width: 100%; }
code { font-family: var(--mono); font-size: .9em; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: -999px; top: 8px; background: var(--text); color: var(--ground); padding: 8px 12px; border-radius: 8px; z-index: 50; }
.skip:focus { left: 12px; }
:focus-visible { outline: 2px solid var(--forest); outline-offset: 3px; border-radius: 6px; }
.ve-wrap { width: var(--wrap); margin: 0 auto; }

/* Type: mono eyebrows carry the structure; Geologica carries what the app says */
.ve-eyebrow, .ve-caps { font: 500 12px/1.4 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.ve-caps.stop { color: var(--saffron); }
/* The app's own labels are set in capitals already, with macOS kept as Apple writes it */
.ve-label { text-transform: none; }
.ve-eyebrow { margin-bottom: 20px; }
.ve-head { position: relative; display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding-top: 14px; margin-bottom: 44px; }
.ve-head::before { content: ''; position: absolute; top: 0; left: calc(50% - 50vw); width: 100vw; height: 1px; background: var(--line-strong); -webkit-mask-image: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent); mask-image: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent); }
.ve-head .ve-eyebrow { margin: 0; }
.ve-fact { font: 500 12px/1.4 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); white-space: nowrap; }
section h2 { font-size: clamp(38px, 5vw, 72px); line-height: 1; }
section h2 em, .ve-hero h1 em { font-style: normal; color: var(--forest); }
.ve-sub { color: var(--soft); font-size: clamp(17px, 1.4vw, 19px); line-height: 1.55; max-width: 620px; margin-top: 22px; }
.ve-fine { color: var(--muted); font-size: 14px; margin-top: 20px; }
/* Saffron, as a mark beside the words of what needs you */
.ve-mark-s { display: inline-block; flex: none; width: 3px; height: .95em; margin-right: 10px; border-radius: 2px; background: var(--saffron); vertical-align: -0.12em; }

/* Buttons and the status line. Forest night, with dark text, is the one action colour. */
.ve-btn { display: inline-flex; align-items: center; justify-content: center; height: 46px; padding: 0 22px; border-radius: 10px; background: var(--forest); color: var(--on-action); font: 600 15.5px var(--body); letter-spacing: -0.005em; border: 0; cursor: pointer; white-space: nowrap; transition: background .2s var(--ease); }
.ve-btn:hover { text-decoration: none; background: var(--action-hover); }
.ve-status { display: inline-flex; align-items: center; gap: 9px; color: var(--muted); font: 500 12.5px var(--mono); letter-spacing: .04em; }
.ve-status i { width: 7px; height: 7px; border-radius: 50%; flex: none; border: 1.5px solid var(--muted); }
.ve-status.review i, .ve-status.live i { background: var(--forest); border-color: var(--forest); }
@media (prefers-reduced-motion: no-preference) { .ve-status i { animation: pulse 2.4s var(--ease) infinite; } }
@keyframes pulse { 50% { box-shadow: 0 0 0 5px rgba(163, 161, 149, .12); } }
.ve-glyph-fill { transform-box: fill-box; transform-origin: bottom; transform: scaleY(var(--read, 1)); }
.ve-actions { display: flex; align-items: center; gap: 14px 20px; flex-wrap: wrap; margin-top: 28px; }

/* The header: the icon's roll and the wordmark in Geologica */
.ve-top { position: fixed; inset: 0 0 auto; z-index: 20; height: 60px; display: flex; align-items: center; gap: 28px; padding: 0 max(var(--gutter), calc((100vw - 1180px) / 2)); transition: background .3s, border-color .3s; border-bottom: 1px solid transparent; }
.ve-top.solid { background: var(--top); backdrop-filter: saturate(1.4) blur(16px); -webkit-backdrop-filter: saturate(1.4) blur(16px); border-color: var(--line); }
.ve-mark { display: inline-flex; align-items: center; gap: 10px; color: var(--text); }
.ve-mark:hover { text-decoration: none; }
.ve-mark b { font: 600 20px var(--head); letter-spacing: -0.01em; }
.ve-glyph { width: 22px; height: 22px; flex: none; }
.ve-top nav { display: flex; gap: 24px; margin-left: auto; }
.ve-top nav a { color: var(--soft); font-size: 14px; }
.ve-top nav a:hover { color: var(--text); text-decoration: none; }
.ve-top > .ve-btn, .ve-top > a:last-child:not(.ve-mark) { height: 36px; padding: 0 16px; border-radius: 9px; font-size: 13.5px; opacity: 0; pointer-events: none; transition: opacity .25s, background .2s; }
.ve-top.past > .ve-btn, .ve-top.past > a:last-child:not(.ve-mark) { opacity: 1; pointer-events: auto; }

/* The footer: the studio's other products, then the rule and the wordmark */
.ve-foot { border-top: 1px solid var(--line); padding: 48px max(var(--gutter), calc((100vw - 1180px) / 2)) 42px; }
.ve-foot .more h2 { font: 500 12px var(--mono); letter-spacing: .14em; color: var(--muted); }
.ve-foot .more a.more-app { background: var(--panel); border-color: var(--line); }
.ve-foot .more a.more-app:hover { border-color: var(--line-strong); }
.ve-foot .more .more-store { font: 12px var(--mono); letter-spacing: .02em; color: var(--muted); }
.ve-foot-top { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; padding-top: 28px; border-top: 1px solid var(--line); }
.ve-foot .ve-mark span { display: flex; flex-direction: column; gap: 3px; }
.ve-foot .ve-mark small { font: 12.5px var(--body); color: var(--muted); letter-spacing: 0; }
.ve-foot nav { display: flex; gap: 22px; flex-wrap: wrap; }
.ve-foot nav a { color: var(--soft); font-size: 14px; }
.ve-foot-fine { display: flex; justify-content: space-between; gap: 8px 16px; flex-wrap: wrap; margin-top: 24px; color: var(--muted); font-size: 12.5px; }
.ve-foot-fine a { color: var(--soft); }

/* Other pages: privacy, notify, the press kit */
.ve-doc { position: relative; isolation: isolate; width: min(760px, calc(100vw - 2 * var(--gutter))); margin: 0 auto; padding: 150px 0 120px; }
.ve-doc::before { content: ''; position: absolute; inset: -40px 0 auto; height: 520px; background: radial-gradient(50% 50% at 50% 30%, var(--glow), rgba(35, 74, 48, 0) 70%); pointer-events: none; z-index: -1; }
.ve-doc h1 { font-size: clamp(40px, 6vw, 64px); margin-bottom: 16px; }
.ve-meta { color: var(--muted); font: 12.5px var(--mono); letter-spacing: .04em; margin-bottom: 38px; }
.ve-prose h2, .ve-prose h3 { font-size: 26px; margin: 44px 0 12px; }
.ve-prose p, .ve-prose li { color: var(--soft); line-height: 1.65; }
.ve-prose strong { color: var(--text); }
.ve-prose p + p { margin-top: 12px; }
.ve-prose ul { list-style: none; padding: 0; margin: 10px 0; }
.ve-prose li { position: relative; padding-left: 22px; }
.ve-prose li::before { content: ''; position: absolute; left: 0; top: .78em; width: 10px; height: 1px; background: var(--muted); }
.ve-prose li + li { margin-top: 8px; }
.ve-icon { display: block; width: 76px; height: 76px; margin-bottom: 28px; border-radius: 17px; }
.ve-form { margin-top: 32px; }
.ve-form label { display: block; font: 500 12px var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin-bottom: 10px; }
.ve-form .row { display: flex; gap: 10px; }
.ve-form input[type=email] { flex: 1; min-width: 0; height: 46px; border-radius: 10px; border: 1px solid var(--line-strong); background: var(--panel); color: var(--text); padding: 0 14px; font: 16px var(--body); }
.ve-form input[type=email]::placeholder { color: var(--muted); }
.ve-form .error { color: var(--saffron); margin-top: 10px; }
.hp { position: absolute; left: -9999px; }
.ve-link { font-weight: 600; }


/* Grain over everything, as film: fine, warm, never moving. */
body::before { content: ''; position: fixed; inset: -50%; z-index: 60; pointer-events: none; opacity: .055; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }

/* Headings arrive in Geologica's sharp register and settle into the app's rounded letterforms: technical to plain. */
h1, h2 { font-variation-settings: 'SHRP' 0; }
@media (prefers-reduced-motion: no-preference) {
  .js [data-reveal] h2, .js h2[data-reveal], .js .ve-hero h1 { transition: font-variation-settings 1.4s var(--out) .15s; }
  .js [data-reveal]:not(.seen) h2, .js h2[data-reveal]:not(.seen), .js .ve-hero h1:not(.settled) { font-variation-settings: 'SHRP' 100; }
}

/* 1. The crossing. The hero holds still while the macOS 28 line sweeps across the roll: each mark it passes either
   carries on or stops, the stopping ones dim to their outline and say why, and the count falls to the answer.
   Without script or with Reduce Motion it is shown crossed: the line at the end, every reason up, the answer said. */
.ve-hero { position: relative; }
.ve-hero-pin { position: relative; min-height: 100svh; display: flex; flex-direction: column; padding-top: clamp(92px, 12vh, 132px); overflow: hidden; }
.ve-hero-pin::before { content: ''; position: absolute; inset: -30% 30% 35% -15%; background: radial-gradient(50% 50% at 40% 40%, var(--glow), rgba(35, 74, 48, 0) 70%); pointer-events: none; }
.ve-hero-text { position: relative; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; align-items: end; }
.ve-hero-text > .ve-eyebrow { grid-column: 1 / -1; }
.ve-hero h1 { grid-column: 1 / span 8; font-size: clamp(46px, min(6.2vw, 10.5vh), 96px); line-height: .96; letter-spacing: -0.035em; }
.ve-hero-side { grid-column: 9 / -1; padding-bottom: 8px; }
.ve-lede { color: var(--soft); font-size: 19px; line-height: 1.5; max-width: 620px; }
.ve-price-line { margin-top: 16px; color: var(--muted); font-size: 14px; }
.ve-price-line span { display: block; margin-top: 4px; font: 12.5px var(--mono); }
.js [data-in] { opacity: 0; transform: translateY(14px); animation: rise .9s var(--out) forwards; animation-delay: calc(var(--d) * 110ms + 120ms); }
@keyframes rise { to { opacity: 1; transform: none; } }

.ve-rolled { --p: 1; position: relative; flex: 1; display: flex; flex-direction: column; justify-content: flex-end; margin: clamp(16px, 3vh, 40px) 0 0; padding-bottom: 22px; }
.ve-count { display: flex; align-items: flex-end; gap: 16px; margin-top: clamp(18px, 3vh, 34px); padding-top: clamp(14px, 2vh, 22px); border-top: 1px solid var(--line); }
.ve-count b { font: 600 clamp(60px, min(7.4vw, 12vh), 124px)/.8 var(--head); letter-spacing: -0.06em; font-variant-numeric: tabular-nums; }
.ve-count span { font: 500 12px/1.45 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); padding-bottom: 6px; }
.ve-roll { --pad: clamp(100px, 14vh, 140px); position: relative; height: clamp(190px, 34vh, 330px); padding: var(--pad) 6px 0; }
.ve-marks { position: relative; height: 100%; display: flex; align-items: flex-end; gap: clamp(3px, .45vw, 7px); }
.ve-marks i { flex: 1; height: 18%; border-radius: 3px; background: var(--quiet); transform-origin: bottom; transition: opacity .35s var(--ease), box-shadow .35s var(--ease), background .35s var(--ease); }
.ve-marks i.s { height: 100%; background: var(--saffron); }
.ve-marks i.p { height: 100%; background: linear-gradient(var(--quiet) 50%, var(--saffron) 50%); }
.ve-marks i.o { height: 100%; background: transparent; box-shadow: inset 0 0 0 1.5px var(--muted); }
.ve-marks b.gap { flex: 1.6; }
/* Past the line: what stops is drawn as it will be after macOS 28, an outline in its colour */
.ve-roll .crossed.s { background: transparent; box-shadow: inset 0 0 0 2px var(--saffron); }
.ve-roll .crossed.p { background: linear-gradient(var(--quiet) 50%, rgba(233, 180, 76, .3) 50%); }
.ve-roll .crossed.n { background: #4C6352; }
.ve-tag { position: absolute; left: var(--x); bottom: calc(100% - var(--pad) + 12px + var(--row) * 42px); transform: translateX(-6px); padding-left: 10px; border-left: 1px solid var(--line-strong); white-space: nowrap; font: 500 11.5px/1.35 var(--mono); color: var(--muted); }
.ve-tag b { display: block; font: 600 14px/1.3 var(--head); color: var(--text); letter-spacing: 0; }
.ve-tag.stop { border-left-color: var(--saffron); }
.ve-tag.left { transform: translateX(calc(-100% + 6px)); padding: 0 10px 0 0; border-left: 0; border-right: 1px solid var(--line-strong); text-align: right; }
.ve-tag.stop.left { border-right-color: var(--saffron); }
.ve-line28 { position: absolute; left: calc(6px + var(--p) * (100% - 12px)); top: 0; bottom: -14px; border-left: 2px dashed var(--line28); }
.ve-line28 span { position: absolute; left: 10px; top: 0; font: 500 12px var(--mono); letter-spacing: .06em; color: var(--text); white-space: nowrap; }
.ve-cap { display: flex; flex-wrap: wrap; gap: 6px 22px; align-items: baseline; margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--line); }
.ve-cue { font: 500 11.5px/1.4 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.ve-cue::after { content: ' ↓'; }
.ve-cap-say { margin-left: auto; font: 600 clamp(18px, 1.8vw, 24px)/1.3 var(--head); letter-spacing: -0.01em; }
.js .ve-hero:not(.done) .ve-cap-say { opacity: 0; }
.ve-cap-say { transition: opacity .5s var(--out); }
.ve-hero.done .ve-cue { opacity: 0; }
.ve-roll.close { height: 120px; padding-top: 0; margin: 0; }
.ve-roll.close .ve-marks i { height: 28px; }
.ve-roll.close .ve-marks i:is(.s, .p, .o) { height: 96px; }

@media (prefers-reduced-motion: no-preference) {
  .js .ve-hero { height: 270vh; }
  .js .ve-hero-pin { position: sticky; top: 0; height: 100svh; }
  .js .ve-hero .ve-tag { opacity: 0; transform: translate(-6px, 8px); transition: opacity .4s var(--out), transform .4s var(--out); }
  .js .ve-hero .ve-tag.left { transform: translate(calc(-100% + 6px), 8px); }
  .js .ve-hero .ve-tag.up { opacity: 1; transform: translateX(-6px); }
  .js .ve-hero .ve-tag.up.left { transform: translateX(calc(-100% + 6px)); }
  .js .ve-rolled .ve-marks i { animation: grow .5s var(--out) backwards; animation-delay: calc(.35s + var(--k) * 12ms); }
  .js .ve-return .ve-marks i { transform: scaleY(0); }
  .js .ve-return.seen .ve-marks i { transform: none; transition: transform .32s var(--out) calc(.2s + var(--k) * 14ms); }
}
@keyframes grow { from { transform: scaleY(0); } }
/* Short screens (a 13-inch laptop): a shorter roll and a tighter top, so the answer stays on screen */
@media (max-height: 820px) and (min-width: 801px) {
  .ve-hero-pin { padding-top: 84px; }
  .ve-roll { --pad: 96px; height: clamp(170px, 27vh, 230px); }
  .ve-cap { margin-top: 14px; padding-top: 12px; }
}
@media (max-width: 1100px) {
  .ve-hero h1, .ve-hero-side { grid-column: 1 / -1; }
  .ve-hero-side { margin-top: 22px; padding: 0; max-width: 620px; }
}
@media (max-width: 800px) {
  .ve-tag { display: none; }
  .ve-count b { font-size: 64px; }
  .ve-roll { height: 120px; padding-top: 20px; }
  .ve-marks { gap: 2px; }
  .ve-marks i { border-radius: 1.5px; }
  .ve-cap-say { margin-left: 0; flex-basis: 100%; }
  .ve-hero-side .ve-lede { font-size: 17px; }
}
@media (max-width: 600px) { .ve-actions { flex-direction: column; align-items: flex-start; gap: 14px; } }

/* 2. Apple's words, brightening word by word as you read down */
.ve-apple { padding: 150px 0 140px; }
.ve-quote { margin: 0; }
.ve-quote p { font: 500 clamp(30px, 3.8vw, 54px)/1.18 var(--head); letter-spacing: -0.02em; max-width: 22em; text-wrap: pretty; }
.js .ve-quote span { color: rgba(241, 238, 228, .22); transition: color .35s var(--ease); }
.js .ve-quote span.lit { color: var(--text); }
.ve-sources { display: flex; flex-wrap: wrap; gap: 10px 32px; margin-top: 34px; padding-top: 18px; border-top: 1px solid var(--line); }
.ve-sources a { display: inline-flex; gap: 10px; align-items: baseline; font-size: 14px; color: var(--soft); }
.ve-sources a span { font: 500 11px var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.ve-calm { margin-top: 56px; font: 600 clamp(22px, 2.2vw, 30px)/1.3 var(--head); letter-spacing: -0.01em; max-width: 26em; color: var(--forest); }

/* 3. Sixteen bytes: a program's header set large, each group named, then the sentence it becomes. Pinned on wide
   screens with motion, one file at a time; otherwise the four files simply follow each other. */
.ve-bytes { position: relative; padding: 40px 0 120px; }
.ve-bytes-head { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; align-items: end; }
.ve-bytes-head h2 { grid-column: 1 / span 7; }
.ve-bytes-head .ve-sub { grid-column: 8 / -1; margin: 0; font-size: 16.5px; }
.ve-steps-list { margin-top: 56px; display: grid; gap: 48px; }
.ve-step { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 56px; align-items: center; padding: 34px 0; border-top: 1px solid var(--line); }
.ve-file { display: flex; flex-direction: column; gap: 8px; }
.ve-file code { font: 13px/1.4 var(--mono); color: var(--muted); overflow-wrap: anywhere; }
.ve-hex { margin-top: 26px; display: grid; gap: 22px; }
.ve-hex-row { display: grid; grid-template-columns: repeat(4, max-content); justify-content: space-between; gap: 0 18px; }
.ve-byte { max-width: 11.5em; }
.ve-byte b { display: block; font: 500 clamp(17px, 1.55vw, 25px)/1 var(--mono); letter-spacing: 0; color: rgba(241, 238, 228, .32); white-space: nowrap; }
.ve-byte.said b { color: var(--text); }
.ve-byte.intel b { color: var(--saffron); }
.ve-byte small { display: block; margin-top: 10px; padding-top: 8px; border-top: 1px solid var(--line-strong); font: 500 11px/1.35 var(--mono); letter-spacing: .06em; color: var(--soft); }
.ve-byte.intel small { border-top-color: var(--saffron); }
.ve-twin { display: flex; gap: 12px; align-items: baseline; flex-wrap: wrap; margin-top: 22px; padding-top: 14px; border-top: 1px dashed var(--line-strong); }
.ve-twin code { font: 14px var(--mono); color: var(--forest); }
.ve-twin span:last-child { font: 12px var(--mono); color: var(--muted); }
.ve-say-side .ve-caps { display: flex; align-items: center; }
.ve-say { margin-top: 18px; font: 600 clamp(26px, 2.7vw, 40px)/1.15 var(--head); letter-spacing: -0.025em; text-wrap: balance; }
.ve-pips { display: none; }
@media (min-width: 1001px) and (prefers-reduced-motion: no-preference) {
  .js .ve-bytes { height: 400vh; padding: 0; }
  .js .ve-bytes-pin { position: sticky; top: 0; min-height: 100vh; display: flex; align-items: center; padding: 84px 0 40px; }
  .js .ve-bytes-pin > .ve-wrap { width: var(--wrap); }
  .js .ve-steps-list { display: grid; margin-top: 44px; }
  .js .ve-step { grid-area: 1 / 1; opacity: 0; visibility: hidden; transition: opacity .45s var(--out), visibility .45s; }
  .js .ve-step.on { opacity: 1; visibility: visible; }
  .js .ve-step .ve-byte small { opacity: 0; transform: translateY(6px); transition: opacity .4s var(--out), transform .4s var(--out); }
  .js .ve-step.on .ve-byte small { opacity: 1; transform: none; transition-delay: .35s; }
  .js .ve-pips { display: flex; gap: 8px; margin-top: 28px; }
  .js .ve-pips li { width: 28px; height: 3px; border-radius: 2px; background: var(--line-strong); transition: background .3s; }
  .js .ve-pips li.on { background: var(--text); }
  .js .ve-pips li.on.stop { background: var(--saffron); }
}
@media (max-width: 1000px) {
  .ve-bytes-head { grid-template-columns: minmax(0, 1fr); row-gap: 20px; }
  .ve-bytes-head > * { grid-column: 1 !important; }
  .ve-step { grid-template-columns: minmax(0, 1fr); gap: 26px; }
}
@media (max-width: 600px) {
  .ve-hex-row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
  .ve-byte b { font-size: 20px; }
}

/* 4. Native means native: giant numerals from one real Mac, and a ledger of what the read took */
.ve-native { padding: 120px 0 150px; }
.ve-native h2 { max-width: 15em; }
.ve-giants { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: end; gap: 40px; margin-top: 64px; }
.ve-giants b { display: block; font: 600 clamp(120px, 17vw, 260px)/.78 var(--head); letter-spacing: -0.065em; font-variant-numeric: tabular-nums; }
.ve-giants .zero b { color: var(--forest); }
.ve-giants p { margin-top: 18px; max-width: 18em; font: 500 12.5px/1.5 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.ve-arrow { width: clamp(60px, 9vw, 140px); height: 2px; margin-bottom: clamp(50px, 7vw, 110px); background: var(--line-strong); position: relative; }
.ve-arrow::after { content: ''; position: absolute; right: 0; top: -5px; width: 12px; height: 12px; border-top: 2px solid var(--line-strong); border-right: 2px solid var(--line-strong); transform: rotate(45deg); }
.ve-native .ve-sub { margin-top: 48px; }
.ve-ledger { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; margin: 64px 0 0; }
.ve-ledger div { border-top: 2px solid var(--line-strong); padding-top: 14px; display: flex; flex-direction: column-reverse; justify-content: flex-end; gap: 8px; }
.ve-ledger dt { font: 500 11.5px var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.ve-ledger dd { margin: 0; font: 600 clamp(32px, 3.4vw, 50px)/1 var(--head); letter-spacing: -0.035em; font-variant-numeric: tabular-nums; }
@media (max-width: 800px) {
  .ve-native { padding: 90px 0 100px; }
  .ve-giants { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .ve-arrow { display: none; }
  .ve-ledger { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 28px; }
}

/* 5. Each one, in plain words: a tablist beside the verdict card, as the app shows it */
.ve-each { padding: 40px 0 150px; }
.ve-each h2 { max-width: 13em; }
.ve-picker { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 40px; margin-top: 56px; align-items: start; }
.ve-tabs { display: flex; flex-direction: column; border-top: 1px solid var(--line-strong); }
.ve-tabs button { all: unset; box-sizing: border-box; cursor: pointer; display: block; padding: 18px 16px 18px 18px; border-bottom: 1px solid var(--line); border-left: 2px solid transparent; transition: background .25s, border-color .25s; }
.ve-tabs button b { display: block; font: 600 19px/1.25 var(--head); letter-spacing: -0.01em; color: var(--soft); transition: color .25s; }
.ve-tabs button span { display: block; margin-top: 4px; font: 12px/1.4 var(--mono); color: var(--muted); }
.ve-tabs button:hover b, .ve-tabs button[aria-selected=true] b { color: var(--text); }
.ve-tabs button[aria-selected=true] { background: var(--panel); border-left-color: var(--saffron); }
.ve-tabs button:focus-visible { outline: 2px solid var(--forest); outline-offset: -2px; border-radius: 0; }
.ve-card { padding: 34px 38px 30px; border-radius: 18px; background: var(--panel); border: 1px solid var(--line); box-shadow: 0 50px 110px -50px #000; }
.js .ve-card[data-off] { display: none; }
.ve-card + .ve-card { margin-top: 18px; }
.js .ve-card + .ve-card { margin-top: 0; }
.ve-card h3 { margin-top: 12px; font-size: clamp(34px, 3.6vw, 52px); letter-spacing: -0.03em; }
.ve-card-say { margin-top: 14px; font-size: 18px; line-height: 1.5; color: var(--soft); max-width: 36em; }
.ve-card-lane { position: relative; height: 92px; margin: 30px 0 26px; font: 500 11px var(--mono); color: var(--muted); }
.ve-card-lane > span { position: absolute; top: 0; left: 0; }
.ve-card-lane > span + span { left: calc(var(--at) + 10px); }
.ve-card-lane::before { content: ''; position: absolute; left: var(--at); top: 0; bottom: 0; border-left: 1.5px dashed var(--line28); }
.ve-card-lane p { position: absolute; top: 24px; left: calc(var(--at) + 12px); right: 0; font: 15px/1.4 var(--body); color: var(--text); }
.ve-card-lane .ve-track { position: absolute; left: 0; bottom: 14px; height: 5px; width: var(--at); border-radius: 3px; background: var(--saffron); }
.ve-card.on .ve-track { width: 96%; height: 3px; background: var(--forest); }
.ve-card-lane .ve-tick { position: absolute; left: calc(var(--at) - 1px); bottom: 5px; width: 2px; height: 22px; background: var(--saffron); }
.ve-steps { counter-reset: s; display: grid; gap: 10px; margin-top: 12px; }
.ve-steps li { counter-increment: s; display: grid; grid-template-columns: 26px minmax(0, 1fr); font-size: 16px; line-height: 1.45; }
.ve-steps li::before { content: counter(s); font: 500 12.5px/1.9 var(--mono); color: var(--muted); }
.ve-card-tech { margin-top: 24px; padding-top: 14px; border-top: 1px solid var(--line); }
.ve-card-tech code { font: 12.5px/1.45 var(--mono); color: var(--muted); overflow-wrap: anywhere; }
@media (max-width: 900px) {
  .ve-each { padding-bottom: 100px; }
  .ve-picker { grid-template-columns: minmax(0, 1fr); }
  .ve-tabs { flex-direction: row; overflow-x: auto; border-top: 0; border-bottom: 1px solid var(--line-strong); scrollbar-width: none; }
  .ve-tabs button { flex: none; border-left: 0; border-bottom: 2px solid transparent; padding: 12px 14px; }
  .ve-tabs button span { display: none; }
  .ve-tabs button[aria-selected=true] { background: none; border-bottom-color: var(--saffron); }
  .ve-card { padding: 26px 22px; }
  .ve-card-lane { height: auto; padding-bottom: 40px; }
  .ve-card-lane p { position: static; margin: 24px 0 0 calc(var(--at) + 8px); font-size: 14px; }
}

/* 6. The ones people forget: the Mac's Library as a board, on its own band */
.ve-board-band { position: relative; padding: 110px 0 130px; background: var(--panel); border-block: 1px solid var(--line); }
.ve-board-band .ve-head::before { display: none; }
.ve-board-head { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; align-items: end; }
.ve-board-head h2 { grid-column: 1 / span 6; }
.ve-board-head .ve-sub { grid-column: 8 / -1; margin: 0; font-size: 16.5px; }
.ve-board { margin-top: 56px; border-top: 1px solid var(--line-strong); }
.ve-board li { display: grid; grid-template-columns: 150px minmax(0, 5fr) minmax(0, 5fr); gap: 0 32px; align-items: center; padding: 20px 0; border-bottom: 1px solid var(--line); }
.ve-board-n { font: 600 clamp(54px, 5.4vw, 84px)/.9 var(--head); letter-spacing: -0.05em; font-variant-numeric: tabular-nums; color: rgba(241, 238, 228, .9); }
.ve-board li.stop .ve-board-n { color: var(--text); }
.ve-board b { display: block; font: 600 22px/1.2 var(--head); }
.ve-board code { display: block; margin-top: 6px; font: 12.5px var(--mono); color: var(--muted); }
.ve-board-state { display: flex; flex-direction: column; gap: 6px; font-size: 15px; color: var(--soft); }
.ve-board-state span { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0 8px; }
.ve-board-state span b { display: inline; font: 600 15.5px var(--body); color: var(--text); }
.ve-board-state .calm { font: 500 12px var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
@media (prefers-reduced-motion: no-preference) {
  .js .ve-board li { opacity: 0; transform: translateY(10px); }
  .js .ve-board.seen li { opacity: 1; transform: none; transition: opacity .5s var(--out) calc(var(--i) * 70ms), transform .5s var(--out) calc(var(--i) * 70ms); }
}
@media (max-width: 900px) {
  .ve-board-band { padding: 90px 0 100px; }
  .ve-board-head { grid-template-columns: minmax(0, 1fr); row-gap: 20px; }
  .ve-board-head > * { grid-column: 1 !important; }
  .ve-board li { grid-template-columns: 70px minmax(0, 1fr); row-gap: 10px; }
  .ve-board-state { grid-column: 2; }
  .ve-board-n { font-size: 44px; }
}

/* 7. See it through: a checklist you can use */
.ve-through { padding: 140px 0 150px; }
.ve-through-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 56px; align-items: start; }
.ve-through h2 { max-width: 9em; }
.ve-check { padding: 26px 28px 14px; border-radius: 18px; background: var(--panel); border: 1px solid var(--line); box-shadow: 0 50px 110px -50px #000; }
.ve-check-head { display: flex; flex-direction: column; gap: 12px; padding-bottom: 18px; border-bottom: 1px solid var(--line); }
.ve-check-head b { font: 600 22px/1.2 var(--head); letter-spacing: -0.015em; }
.ve-check-bar { display: block; height: 6px; border-radius: 3px; background: var(--raised); overflow: hidden; }
.ve-check-bar i { display: block; height: 100%; width: calc(var(--done) * 100%); background: var(--forest); border-radius: 3px; transition: width .5s var(--out); }
.ve-check li { padding: 16px 0; border-bottom: 1px solid var(--line); }
.ve-check li:last-child { border-bottom: 0; }
.ve-check li > p { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.ve-check li > p b { font: 600 17px var(--head); }
.ve-check li > p .ve-caps { font-size: 10.5px; }
.ve-check li.done > p .ve-caps { color: var(--muted); }
.ve-seg { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 12px; padding: 3px; border-radius: 10px; background: var(--ground); width: fit-content; max-width: 100%; }
.ve-seg label { position: relative; cursor: pointer; }
.ve-seg input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.ve-seg span { display: block; padding: 6px 11px; border-radius: 7px; font: 500 13px var(--body); color: var(--soft); transition: background .2s, color .2s; }
.ve-seg input:checked + span { background: var(--raised); color: var(--text); }
.ve-seg input:checked:not([value=""]) + span { background: var(--forest); color: var(--on-action); }
.ve-seg input:focus-visible + span { outline: 2px solid var(--forest); outline-offset: 1px; }
@media (max-width: 1000px) { .ve-through-grid { grid-template-columns: minmax(0, 1fr); } .ve-through { padding: 100px 0; } }

/* 6. How it looks: a numbered list beside one framed screen that changes as you scroll (wide screens, with motion).
   Without script, with Reduce Motion, or on a phone, each step simply shows its own screen. */
.ve-looks { padding: 40px 0 120px; }
.ve-looks-in { width: var(--wrap); margin: 0 auto; }
.ve-looks-text h2 { max-width: 10em; }
.ve-looks-steps { margin: 40px 0 0; }
.ve-looks-steps li { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 4px 12px; padding: 18px 0; border-top: 1px solid var(--line); }
.ve-looks-steps .n { font: 500 12.5px var(--mono); color: var(--forest); padding-top: 6px; }
.ve-looks-steps h3 { font-size: 22px; }
.ve-looks-steps p { color: var(--soft); font-size: 15px; margin-top: 6px; max-width: 34em; }
.ve-look-pic { grid-column: 1 / -1; margin-top: 16px; }
.ve-looks-pic { display: none; }
.ve-win { position: relative; border-radius: 12px; overflow: hidden; background: var(--panel); box-shadow: 0 0 0 1px var(--line-strong), 0 50px 110px -20px rgba(0, 0, 0, .65); line-height: 0; }
.ve-win img { display: block; width: 100%; height: auto; }
@media (min-width: 901px) {
  .ve-looks-steps li { grid-template-columns: 44px minmax(0, 1fr) minmax(0, 2fr); gap: 0 32px; padding: 26px 0; }
  .ve-looks-steps li > div:not(.ve-look-pic) { grid-column: 2; }
  .ve-look-pic { grid-column: 3; grid-row: 1; margin: 0; }
}
@media (min-width: 901px) and (prefers-reduced-motion: no-preference) {
  .js .ve-looks { height: 420vh; padding: 0; }
  .js .ve-looks-in { position: sticky; top: 0; min-height: 100vh; display: flex; align-items: center; gap: 56px; padding: 84px 0 30px; }
  .js .ve-looks-text { flex: 0 0 34%; }
  .js .ve-looks-text h2 { font-size: clamp(34px, 3.6vw, 50px); }
  .js .ve-looks-text .ve-sub { font-size: 15.5px; margin-top: 16px; }
  .js .ve-looks-steps { margin-top: 26px; }
  .js .ve-looks-steps li { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 0 12px; padding: 12px 0; opacity: .38; transition: opacity .4s var(--out); }
  .js .ve-looks-steps li.on { opacity: 1; }
  .js .ve-looks-steps h3 { font-size: 19px; }
  .js .ve-looks-steps p { font-size: 14px; margin-top: 3px; }
  .js .ve-look-pic { display: none; }
  .js .ve-looks-pic { display: block; flex: 1; }
  .js .ve-looks-pic .ve-win { aspect-ratio: 1600 / 981; }
  .js .ve-looks-pic img { position: absolute; inset: 0; height: 100%; opacity: 0; transition: opacity .4s var(--out); }
  .js .ve-looks-pic img.on { opacity: 1; }
}

/* The film, on the raised frame */
.ve-film { position: relative; padding: 40px 0 150px; }
.ve-film-frame { position: relative; margin-top: 48px; border-radius: 18px; overflow: hidden; background: var(--raised); box-shadow: 0 0 0 1px var(--line-strong), 0 60px 140px -50px #000; }
.ve-film video { display: block; width: 100%; aspect-ratio: 16 / 9; background: var(--raised); }
.ve-film video.tall { aspect-ratio: 9 / 16; }
.ve-film-frame:has(video.tall) { max-width: 420px; margin-inline: auto; }
.ve-play { position: absolute; inset: 0; margin: auto; width: 92px; height: 92px; border-radius: 50%; border: 0; cursor: pointer; color: var(--on-action); background: var(--forest); display: grid; place-items: center; box-shadow: 0 18px 50px rgba(0, 0, 0, .5), 0 0 0 10px rgba(140, 199, 158, .18); transition: transform .25s var(--out), background .2s; }
.ve-play:hover { transform: scale(1.05); background: var(--action-hover); }
.ve-play svg { width: 32px; height: 32px; margin-left: 4px; }

/* Private, the price, questions, and the close: the roll returns, settled, under one line */
.ve-private { padding: 40px 0 150px; }
.ve-promises li { font: 600 clamp(40px, 5.8vw, 84px)/1.02 var(--head); letter-spacing: -0.025em; }
.ve-promises li:last-child { color: var(--forest); }
.js .ve-private .ve-promises li { opacity: 0; transform: translateY(14px); }
.js .ve-private.seen .ve-promises li { animation: rise .8s var(--out) forwards; animation-delay: calc(var(--i) * 240ms); }
.ve-private .ve-sub { margin-top: 36px; }
.ve-price { padding: 20px 0 150px; }
.ve-price h2 { max-width: 13em; }
.ve-plans { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 48px; }
.ve-plan { background: var(--panel); border: 1px solid var(--line); border-radius: 16px; padding: 28px 30px; display: flex; flex-direction: column; }
.ve-plan.main { border-color: rgba(140, 199, 158, .5); background: linear-gradient(180deg, rgba(140, 199, 158, .08), rgba(140, 199, 158, 0) 60%), var(--panel); }
.ve-plan.main .ve-caps { color: var(--forest); }
.ve-plan .amount { font: 600 56px/1.05 var(--head); letter-spacing: -0.03em; margin: 12px 0 20px; }
.ve-plan .amount em { font: 500 12.5px var(--mono); color: var(--muted); font-style: normal; margin-left: 10px; letter-spacing: .12em; text-transform: uppercase; }
.ve-plan ul { margin: 0 0 26px; border-top: 1px solid var(--line); }
.ve-plan li { position: relative; padding: 10px 0 10px 22px; font-size: 15.5px; border-bottom: 1px solid var(--line); }
.ve-plan li::before { content: ''; position: absolute; left: 0; top: 50%; width: 10px; height: 1px; background: var(--muted); }
.ve-plan.main li::before { background: var(--forest); }
.ve-plan .ve-btn { margin-top: auto; align-self: flex-start; }
.ve-faq { padding: 20px 0 140px; }
.ve-faq-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; }
.ve-faq-grid > div:first-child { grid-column: 1 / span 4; }
.ve-faq-grid > div:last-child { grid-column: 6 / -1; }
.ve-qs details, .ve-new details { border-top: 1px solid var(--line); padding: 18px 0; }
.ve-qs details:last-child { border-bottom: 1px solid var(--line); }
.ve-qs summary, .ve-new summary { cursor: pointer; font: 600 19px/1.35 var(--head); list-style: none; display: flex; justify-content: space-between; gap: 16px; }
.ve-qs summary::-webkit-details-marker, .ve-new summary::-webkit-details-marker { display: none; }
.ve-qs summary::after { content: '+'; color: var(--muted); font: 400 18px var(--mono); }
.ve-qs details[open] summary::after { content: '−'; }
.ve-qs details p { color: var(--soft); margin-top: 10px; max-width: 40em; }
.ve-new { padding: 0 0 100px; }
.ve-new summary span { font: 12.5px var(--mono); color: var(--muted); }
.ve-new details div { color: var(--soft); margin-top: 8px; }
.ve-end { position: relative; padding: 120px 0 0; overflow: hidden; }
.ve-end::before { content: ''; position: absolute; inset: 0 0 -20%; background: radial-gradient(45% 55% at 50% 45%, var(--glow), rgba(35, 74, 48, 0) 70%); pointer-events: none; }
.ve-end-text { position: relative; text-align: center; }
.ve-end h2 { font-size: clamp(42px, 6vw, 88px); max-width: 12em; margin: 0 auto; letter-spacing: -0.025em; }
.ve-end .ve-actions { justify-content: center; }
.ve-return { position: relative; margin: 96px 0 0; padding-bottom: 60px; }

/* Sections that rise in */
.js [data-reveal] { opacity: 0; transform: translateY(24px); transition: opacity .9s var(--out), transform .9s var(--out); }
.js [data-reveal].seen { opacity: 1; transform: none; }

@media (max-width: 900px) {
  :root { --gutter: 20px; }
  .ve-top nav { display: none; }
  .ve-top > .ve-btn, .ve-top > a:last-child:not(.ve-mark) { margin-left: auto; }
  .ve-apple { padding: 100px 0; }
  .ve-faq-grid { grid-template-columns: minmax(0, 1fr); row-gap: 28px; }
  .ve-faq-grid > div { grid-column: 1 !important; }
  .ve-film { padding: 20px 0 100px; }
  .ve-looks { padding: 20px 0 90px; }
  .ve-private, .ve-price, .ve-faq { padding-bottom: 100px; }
  .ve-end { padding-top: 100px; }
}
@media (max-width: 600px) {
  :root { --gutter: 16px; }
  body { font-size: 16px; }
  .ve-head .ve-fact { white-space: normal; text-align: right; }
  .ve-looks-steps li { grid-template-columns: 34px minmax(0, 1fr); }
  .ve-play { width: 76px; height: 76px; }
  .ve-plans { grid-template-columns: 1fr; }
  .ve-plan { padding: 24px 22px; }
  .ve-end .ve-actions { flex-direction: column; align-items: center; }
  .ve-form .row { flex-direction: column; }
  .ve-form input[type=email] { flex: none; width: 100%; }
  .ve-foot-fine { flex-direction: column; }
}

/* Reduce Motion: every section shows its final state, and changes are instant */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js [data-in], .js [data-reveal], .js .ve-private .ve-promises li { opacity: 1 !important; transform: none !important; animation: none !important; transition: none !important; }
  .ve-btn, .ve-play, .ve-top { transition: none; }
}