/* page.css — the vision page. Website lane of lift-ui: scroll-linked motion is allowed here and nowhere in the app.
   Every value comes from lift-style.css (tokens.json); the page only scales the reading sizes up for a website.
   The base is the still page (phones, reduced motion, "Skip the film"); html.film (set by page.js) adds the pinned stages,
   whose film follows the scroll (round 5, his A-35bf0e74: no film mode, no autoplay). Round 5 also sets every heading and
   Mia's lines in upright Inter (the italic serif was hard to read) and lifts the reading onto glass cards.
   Round 3 (his WS31-14): each stage is a moment (kicker, headline, lead); its reading section follows on the page's own
   ground, in the form its information has (steps, columns, grid, list, strip, stats, rows, cards, table, Q and A). */
:root{
  --site-text:calc(var(--size-lead) * 1.125);
  --site-h2:calc(var(--size-display) * 1.25);
  --site-hero:calc(var(--size-display) * 1.75);
  /* The type table of round 3 (design-r3/PLAN.md §3), laptop; the phone values follow under 700 px. */
  --t-kicker:calc(var(--size-caption) + 1px);
  --t-stage-h2:var(--site-h2);
  --t-stage-lh:1.1;
  --t-lead:calc(var(--size-lead) * 1.375);
  --t-read-h2:clamp(2rem, 3.2vw, 2.5rem); /* round 5: 36-45 px, the reading's headings carry the page (research-text §1) */
  --t-card-h3:var(--size-heading);
  --t-body:var(--site-text);
  --t-body-lh:var(--line-height-body);
  --t-number:calc(var(--size-display) * 1.375);
  --t-mia:var(--t-lead); /* Mia's lines, the story's spine: lead size in the full text colour (R4-9) */
  --gap-block:var(--space-10);
  --gap-row:var(--space-9);
  --gap-card:var(--space-5);
  --measure:32rem; /* 55-75 characters a line of Inter 18 px (reading.spec.ts measures it) */
  --page:76rem;
  --edge:max(var(--space-5), 5vw);
  /* Round 5 (his A-35bf0e74: cards "slightly 3D, slightly glassy ... float over the page"; research-text.md §2): faux glass,
     an opaque lit slab (gradient fill, ring, top highlight, three shadow layers), no backdrop-filter: the page has nothing
     moving behind its cards and the film needs the frame budget. */
  --glass-fill:linear-gradient(160deg, rgba(255,255,255,.085) 0%, rgba(255,255,255,.035) 55%, rgba(255,255,255,.055) 100%);
  --glass-solid:#1b1c20;
  --glass-border:rgba(255,255,255,.10);
  --glass-rim:rgba(255,255,255,.22);
  --glass-radius:24px;
  --glass-pad:clamp(1.25rem, 2.2vw, 2rem);
  --glass-shadow:0 0 0 1px rgba(255,255,255,.06), inset 0 1px 0 rgba(255,255,255,.16), inset 0 -1px 0 rgba(0,0,0,.35),
    0 1px 2px rgba(0,0,0,.35), 0 12px 28px -10px rgba(0,0,0,.55), 0 40px 80px -30px rgba(0,0,0,.6);
  --ease-out:cubic-bezier(.22,1,.36,1);
}
*{box-sizing:border-box}
html{background:var(--ground);color:var(--text-1);font-family:var(--font-sans);font-size:var(--site-text);line-height:var(--line-height-body);-webkit-text-size-adjust:100%}
body{margin:0;overflow-x:clip}
img,video{display:block;max-width:100%;height:auto}
/* Links (R4-2; his WS31-14: no blue marks): the text colour, no underline at rest; hover and the keyboard focus underline. */
a{color:var(--text-1);text-decoration:none}
a:hover,a:focus-visible{text-decoration:underline;text-underline-offset:.25em}
:focus-visible{outline:var(--stroke-focus) solid var(--focus);outline-offset:var(--stroke-focus-offset)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.skip{position:absolute;left:var(--space-4);top:var(--space-4);z-index:10;padding:var(--space-2) var(--space-4);border-radius:var(--radius-control);background:var(--button-main);color:var(--button-main-text);text-decoration:none;transform:translateY(-300%)}
.skip:focus{transform:none}
.site-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:0 var(--space-5);max-width:80rem;margin:0 auto;padding:var(--space-4) var(--space-5);font-size:var(--size-lead)}
.site-head a{color:var(--text-1);text-decoration:none;min-height:var(--space-row);display:inline-flex;align-items:center}
.brand{font-weight:var(--weight-strong);letter-spacing:.02em;display:inline-flex;align-items:center}
.brand .logo{width:28px;height:28px;border-radius:50%;flex:none;margin-right:.5em}
.brand .by{font-weight:var(--weight-regular);letter-spacing:0;color:var(--text-2);white-space:pre}
.draft-note{flex-basis:100%;margin:0;color:var(--text-3);font-size:var(--t-kicker)}
/* .proposed marks a line that is not yet his in the source only: nothing on the page shows it (his WS31-14). */
main:focus{outline:none}

/* Text */
h1,h2,h3{text-wrap:balance;margin:0 0 var(--space-3);line-height:var(--line-height-heading);font-weight:var(--weight-strong)}
h1{font-size:var(--site-hero);line-height:var(--line-height-display);letter-spacing:-.03em}
h2{font-size:var(--t-stage-h2);line-height:var(--t-stage-lh);letter-spacing:-.025em}
h3{font-size:var(--t-card-h3);line-height:1.3}
p,ul,ol{margin:0 0 var(--space-4)}
.label{font-weight:var(--weight-strong)}
.kicker{margin:0 0 var(--space-3);font-size:var(--t-kicker);font-weight:var(--weight-strong);letter-spacing:.12em;text-transform:uppercase;color:var(--text-2)}
.lead{font-size:var(--t-lead);line-height:1.4;margin:0}

/* Sections, still page: the picture, the stage's words under it, then the reading section. */
.sec{margin:0 0 var(--space-8)}
.stage{display:flex;flex-direction:column;background:var(--ground);color:var(--text-1)}
.copy{max-width:calc(var(--measure) + 2 * var(--space-5));width:100%;margin:0 auto;padding:var(--space-6) var(--space-5) 0}
.copy .bullets{margin:var(--space-4) 0 0}
.media{position:relative}
.media video,.media .still.start{display:none;width:100%}
.frames{display:grid;gap:var(--space-2)}
.frame{margin:0}
.clip .still.after{margin-top:var(--space-2)}
.still.from{display:none}
/* The still page's play button stands under the stage's words, never over the picture (PLAN §6 step 5); it stays while
   the clip plays (tapping it again starts the scene over), so nothing below it moves. Without a script it is not shown. */
.play{display:block;margin-top:var(--space-5);min-height:var(--space-row);padding:0 var(--space-5);border:0;border-radius:var(--radius-control);background:var(--button-main);color:var(--button-main-text);font:inherit;font-size:var(--size-lead);font-weight:var(--weight-medium);cursor:pointer}
.playing video{display:block}
.playing .still.end{display:none}
@media (prefers-reduced-motion:reduce){.play,.playing video{display:none}.playing .still.end{display:block}}

/* The reading section: the page's own ground, document flow, one wide frame with a reading measure inside it. Text sits
   on the stage's side: left, right (why now, the destination) or centred (the opening). */
.read{max-width:calc(var(--page) + 2 * var(--edge));margin:0 auto;padding:var(--gap-block) var(--edge);font-size:var(--t-body);line-height:var(--t-body-lh)}
.read p:last-child,.read ul:last-child,.read ol:last-child{margin-bottom:0}
.block + .block{margin-top:var(--gap-block)}
.block.mia-lines,.prose + .mia-lines,.mia-lines + .prose{margin-top:var(--space-7)}
/* A running block holds paragraphs at the measure; its lead line (22 px) gets the same 55-75 characters, so it runs wider. */
.measure{width:fit-content;max-width:calc(var(--measure) * 1.22)}
.measure > p{max-width:var(--measure)}
.measure > .lead-line{max-width:calc(var(--measure) * 1.22)}
.measure > .mia{max-width:35rem} /* upright Inter 500 sets fewer letters a line than the italic serif did: 55-75 again */
.side-right .read .measure{margin-left:auto}
.side-centre .read .measure{margin-inline:auto}
.block-h{font-size:var(--t-read-h2);line-height:1.2;margin-bottom:var(--space-5)}
.lead-line{font-size:var(--t-lead);line-height:1.4}
.read p{margin:0 0 var(--space-4)}
.mia{max-width:35rem;font-size:var(--t-mia);font-weight:var(--weight-medium);line-height:1.45;letter-spacing:-.01em;color:var(--text-1)}
.mia-lines{padding-left:var(--space-5);border-left:2px solid var(--brand-gold)}
.side-right .mia-lines{padding:0 var(--space-5) 0 0;border-left:0;border-right:2px solid var(--brand-gold)}
.side-centre .mia-lines{border:0;padding:0;text-align:center}

/* Forms: each is a list of cards; the form lays them out. */
.read ul,.read ol{list-style:none;padding:0}
.steps,.strip,.columns,.grid,.list,.stats,.cards{display:grid;gap:var(--gap-card)}
.steps{grid-template-columns:repeat(4, 1fr);counter-reset:n}
.strip{grid-template-columns:minmax(0, 1fr);gap:0;counter-reset:n}
.columns{grid-template-columns:repeat(3, 1fr)}
.grid,.list{grid-template-columns:repeat(2, 1fr)}
.stats{grid-template-columns:repeat(auto-fit, minmax(14rem, 1fr))}
.cards{grid-template-columns:repeat(auto-fit, minmax(16rem, 1fr))}
.card{min-width:0}
.grid{align-items:start}
.grid > .card:last-child:nth-child(odd){grid-column:1 / -1}
.grid:has(.n) > .card:not(:has(> .n))::before{content:"";display:block;height:calc(var(--t-number) + var(--space-3))} /* the number row kept */
.steps .card,.strip > li{counter-increment:n;padding-top:var(--space-4);border-top:2px solid var(--line-strong)}
.steps .card::before,.strip > li::before{content:counter(n, decimal-leading-zero);display:block;margin-bottom:var(--space-3);font-size:var(--t-kicker);font-weight:var(--weight-strong);letter-spacing:.12em;color:var(--text-2)}
/* The studio (R4-11): one step per row, its number in a gutter, the text at the reading measure; the fair that loses
   money is set apart on a tint of the ground. */
.strip > li{display:grid;grid-template-columns:var(--space-8) minmax(0, var(--measure));column-gap:var(--space-5);padding:var(--space-5) var(--space-4) var(--space-5) 0;border-top-width:1px}
.strip > li::before{margin:.35em 0 0}
.strip > li > *{grid-column:2}
.strip > li.apart{padding-left:var(--space-4);margin-left:calc(-1 * var(--space-4));border-top-color:transparent}
.strip > li.apart + li{border-top-color:transparent}
.grid .card,.columns .card,.cards .card,.stats .card{padding:var(--glass-pad)}
.list .card{padding-top:var(--space-5);border-top:1px solid var(--line-strong)}
.card .mia{margin-top:var(--space-4)}
.n{margin:0 0 var(--space-3);font-size:var(--t-number);line-height:1;font-weight:var(--weight-strong);font-variant-numeric:tabular-nums;letter-spacing:-.01em}
/* Rows: five editorial rows, a large row number on one side and the text at the reading measure on the other; the sides
   alternate. */
.rows{counter-reset:n}
.rows .card{counter-increment:n;display:grid;grid-template-columns:minmax(0, 1fr) var(--measure);column-gap:var(--space-9);align-items:start}
.rows .card + .card{margin-top:var(--gap-row)}
.rows .card::before{content:counter(n, decimal-leading-zero);grid-row:1;align-self:baseline;font-size:calc(var(--t-card-h3) * 1.3);line-height:1.25;font-weight:var(--weight-strong);color:var(--text-3);font-variant-numeric:tabular-nums}
.rows .card > h3{align-self:baseline}
.rows .card > *{grid-column:2}
.rows .card:nth-child(even){grid-template-columns:var(--measure) minmax(0, 1fr)}
.rows .card:nth-child(even)::before{grid-column:2;text-align:right}
.rows .card:nth-child(even) > *{grid-column:1}
.rows h3{font-size:calc(var(--t-card-h3) * 1.3);line-height:1.25}
/* Mia's line stands on the row's other side, under its number, as a pull line. */
.rows .card > .mia{grid-column:1;grid-row:2 / span 19;max-width:33rem;margin-top:var(--space-5)}
.rows .card:nth-child(even) > .mia{grid-column:2;justify-self:end}
/* 3b, what is new: the seven names as one loop, left to right and back (PLAN §2 row 3b; CSS lines, no words). */
.loop-wrap{--loop-gap:var(--space-6);position:relative}
.loop{display:grid;grid-template-columns:repeat(7, minmax(0, 1fr));gap:var(--loop-gap);margin:0}
.loop > li{position:relative;display:flex;align-items:center;justify-content:center;min-height:6rem;padding:var(--space-3);text-align:center;font-size:var(--t-body);line-height:var(--line-height-lead);font-weight:var(--weight-medium)}
.loop > li + li::before{content:"";position:absolute;left:calc(-1 * var(--loop-gap) - 1px);top:50%;width:var(--loop-gap);height:2px;background:var(--line-strong)}
.loop > li + li::after{content:"";position:absolute;left:-9px;top:calc(50% - 5px);border:6px solid transparent;border-left:8px solid var(--line-strong);border-right:0}
.loop-back{position:relative;height:var(--space-7);margin:0 calc((100% - 6 * var(--loop-gap)) / 14);border:2px solid var(--line-strong);border-top:0;border-radius:0 0 var(--radius-card) var(--radius-card)}
.loop-back::before{content:"";position:absolute;left:-8px;top:-4px;border:7px solid transparent;border-bottom:10px solid var(--line-strong);border-top:0}
/* Where we are: the dated targets on one line. */
.dates{display:grid;grid-template-columns:repeat(2, minmax(0, 1fr));gap:var(--space-7);max-width:calc(var(--measure) * 2);border-top:2px solid var(--line-strong)}
.dates > li{position:relative;padding-top:var(--space-5)}
.dates > li::before{content:"";position:absolute;left:0;top:calc(var(--space-4) / -2 - 1px);width:var(--space-4);height:var(--space-4);border-radius:50%;background:var(--text-1)}
table.risks{max-width:46rem}
.bullets{list-style:none;padding:0}
.bullets li{position:relative;padding-left:var(--space-5);margin-bottom:var(--space-3)}
.bullets li::before{content:"";position:absolute;left:0;top:.62em;width:var(--space-2);height:var(--space-2);border-radius:50%;background:var(--text-2)}
/* The doubts (R4-1): one grid, the question on the left, its answer beside it, one text weight. */
.qa{max-width:52rem}
.qa-grid{display:grid;grid-template-columns:minmax(0, 2fr) minmax(0, 3fr);gap:0 var(--space-7);margin:0}
.qa-grid dt,.qa-grid dd{margin:0;padding:var(--space-5) 0;border-top:1px solid var(--line-strong);font-weight:var(--weight-regular)}
.table-wrap{overflow-x:auto}
table{width:100%;border-collapse:collapse;font-size:var(--size-lead);line-height:var(--line-height-lead)}
caption{caption-side:top;text-align:left;margin-bottom:var(--space-4);font-size:var(--t-body);color:var(--text-2)}
th,td{padding:var(--space-4) var(--space-3);border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
tbody th{width:30%;font-weight:var(--weight-strong)}
td p{margin:0 0 var(--space-2)}

#destination .read > .prose:last-child{margin-inline:auto;text-align:center}
.founders{max-width:var(--measure);margin:var(--space-10) auto var(--space-8);padding:0 var(--space-5);display:grid;justify-items:center;text-align:center;gap:var(--space-3)}
.founders img{width:var(--space-10);height:auto}
.people{display:flex;gap:var(--space-5);list-style:none;margin:0;padding:0}
.people a{display:inline-flex;align-items:center;gap:var(--space-2);min-height:var(--space-row);font-size:var(--size-heading)}
.people a::after{content:"\2192" / "";color:var(--text-2)} /* a quiet sign that the name leads on */

/* Phones (390): every form stacks into one column; the type table's phone values. */
@media (max-width:1100px){
  .steps{grid-template-columns:repeat(2, 1fr)}
  .rows .card,.rows .card:nth-child(even){grid-template-columns:var(--space-10) minmax(0, 1fr);column-gap:var(--space-6)}
  .rows .card:nth-child(even)::before{grid-column:1;text-align:left}
  .rows .card:nth-child(even) > *{grid-column:2}
  .rows .card > .mia,.rows .card:nth-child(even) > .mia{grid-column:2;grid-row:auto;justify-self:start;font-size:var(--t-mia)}
}
/* The still page on a laptop (no script, or reduced motion): the opening's picture leaves room for its headline in the
   first screen (R4-22). */
@media (min-width:701px){html:not(.film) .hero .media img{width:100%;height:min(62vh, 56.25vw);object-fit:cover}}
/* Phones: a table's rows become stacked cards, each cell under its column's name (R4-13). */
@media (max-width:600px){
  table,thead,tbody,tr,th,td,caption{display:block;width:auto}
  thead{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
  tr{padding:var(--space-4) 0;border-bottom:1px solid var(--line)}
  th,td{padding:var(--space-1) 0;border:0}
  tbody th,td:first-child{font-weight:var(--weight-strong)}
  td[data-label]::before{content:attr(data-label);display:block;color:var(--text-2);font-size:var(--t-kicker);font-weight:var(--weight-strong);letter-spacing:.12em;text-transform:uppercase}
  td[data-label]:first-child::before{content:none}
}
@media (max-width:700px){
  :root{--t-stage-h2:30px;--t-stage-lh:1.13;--t-lead:18px;--t-read-h2:26px;--t-card-h3:18px;--t-body:17px;--t-body-lh:1.55;
    --t-number:34px;--gap-block:var(--space-8);--gap-row:var(--space-7);--gap-card:20px}
  .lead{line-height:1.45}
  .steps,.strip,.columns,.grid,.list{grid-template-columns:1fr}
  .strip > li.apart{margin-left:0} /* on a phone the tinted step keeps the list's one left edge; its words sit inset */
  .rows .card,.rows .card:nth-child(even){grid-template-columns:1fr}
  .rows .card::before,.rows .card:nth-child(even)::before{grid-row:auto;grid-column:1;margin-bottom:var(--space-3);font-size:var(--t-number);text-align:left}
  .rows .card > *,.rows .card:nth-child(even) > *,.rows .card > .mia,.rows .card:nth-child(even) > .mia{grid-column:1}
  .loop-wrap{padding-right:var(--space-7)}
  .loop{grid-template-columns:1fr}
  .loop > li{min-height:0}
  .loop > li + li::before{left:50%;top:calc(-1 * var(--loop-gap) - 1px);width:2px;height:var(--loop-gap)}
  .loop > li + li::after{left:calc(50% - 5px);top:-9px;border:6px solid transparent;border-top:8px solid var(--line-strong);border-bottom:0}
  .loop-back{position:absolute;top:var(--space-8);bottom:var(--space-8);right:0;width:var(--space-6);height:auto;margin:0;border:2px solid var(--line-strong);border-left:0;border-radius:0 var(--radius-card) var(--radius-card) 0}
  .loop-back::before{left:-4px;top:-8px;border:7px solid transparent;border-right:10px solid var(--line-strong);border-left:0}
  .dates{grid-template-columns:1fr;border-top:0}
  .dates > li{border-top:2px solid var(--line-strong)}
  .side-right .mia-lines{padding:0 0 0 var(--space-5);border-right:0;border-left:2px solid var(--brand-gold)}
  tbody th{width:auto}
  .qa-grid{grid-template-columns:1fr}
  /* One picture before each title, tall enough to read (R4-6); the after-still waits for the film, which a phone does
     not run. */
  .clip .still.after{display:none}
  .media img,.media video{width:100%;height:62vh;object-fit:cover}
  .side-centre .mia-lines{text-align:left}
  .qa-grid dd{padding-top:0;border-top:0}
}


/* Film (laptop): page.js sets each pin's height (--h): the stage arrives by ordinary scroll, holds while its film plays
   and scrolls on with its reading section after it. The stage's words sit in the lower third over a bottom gradient
   (transparent to 65 % of the ground), on the side the plan names. */
html.film{scrollbar-gutter:stable}
html.film .site-head{position:absolute;top:0;left:0;right:0;z-index:5;max-width:none;padding:var(--space-4) max(var(--space-7), 5vw)}
html.film .sec:not(.founders){margin:0}
html.film .pin{height:var(--h, 100vh)}
html.film .stage{display:block;position:sticky;top:0;height:100vh;overflow:clip}
/* The bottom gradient sits under the words: 65 % of the ground from the screen's foot up to the top of the words (--words,
   set by page.js), then transparent over one rhythm step above them, so every glyph line stands on the full 65 % (proof 5:
   4.5:1 on the brightest pixel). It belongs to the stage, not the words: it stays while the words leave ahead of the
   reading (R4-3), so the picture's lower third never brightens at once. */
html.film .stage::after{content:"";position:absolute;z-index:1;left:0;right:0;bottom:0;height:calc(var(--words, 0px) + var(--space-9));background:linear-gradient(to top, color-mix(in srgb, var(--ground) 65%, transparent) calc(100% - var(--space-9)), transparent);pointer-events:none}
html.film .stage .kicker{color:var(--text-1)} /* on a picture the kicker needs the full text colour for 4.5:1 */
html.film .media,html.film .frames,html.film .frame{position:absolute;inset:0;margin:0}
/* The picture's top and bottom feather into the ground, so no straight picture edge crosses the screen as a stage comes and
   goes (R4-12); the reading's last block ends closer, so the next stage rises under its last paragraph. */
html.film .stage .media{-webkit-mask-image:linear-gradient(to bottom, transparent, #000 22vh, #000 calc(100% - 22vh), transparent);mask-image:linear-gradient(to bottom, transparent, #000 22vh, #000 calc(100% - 22vh), transparent)}
html.film .read{padding-bottom:var(--space-8)}
html.film .stills .media,html.film .stills .frames{display:block}
html.film .media video,html.film .media .still,html.film .media canvas{position:absolute;inset:0;width:100%;max-width:none;height:100%;object-fit:cover}
html.film .clip .still{display:none}
html.film .clip .still.start{display:block}
html.film .clip .still.after{display:block;margin:0;opacity:0}
html.film .clip .still.from{display:block}
html.film .frame{opacity:0}
html.film .frame:first-child{opacity:1}
html.film .play{display:none}
html.film .copy{position:absolute;z-index:2;left:var(--edge);bottom:max(var(--space-8), 9vh);width:min(40rem, 46vw);max-width:none;margin:0;padding:0}
html.film .side-right .copy{left:auto;right:var(--edge)}
/* The stage's words wait until its picture has settled (page.js sets .settled when the stage fills the screen), then fade
   in; they leave in 0.2 s (round 6: no longer at once, which read as a jump) a third of a screen before the reading, so two
   texts never meet (his WS31-16). */
html.film .copy{opacity:0;transition:opacity .2s var(--ease-standard)}
html.film .stage.settled .copy{opacity:1;transition:opacity .6s var(--ease-standard)}
html.film .side-centre .copy{left:50%;width:min(52rem, 80vw);transform:translateX(-50%);text-align:center}
html.film .hero .copy h1{font-size:calc(var(--size-display) * 1.5);margin-bottom:var(--space-4)}
/* The film is drawn on a canvas; the after-still dissolves in by scroll. */
html.film .media video{display:none}
/* The opening moves before any scroll: one view, a slow push-in (his WS31-08 round 2: one view, not three). */
html.film .hero .frame:first-child img{animation:push 16s ease-out both}
@keyframes push{from{transform:scale(1)}to{transform:scale(1.07)}}


/* --- Round 5: the reading (his A-35bf0e74, 1 Nov; research-text.md). Glass cards that float over a soft, still glow; the
   forms rotate (pair, cards, numbers, quote, timeline, plain), so no two neighbours share one skeleton. */
.read{position:relative;isolation:isolate}
.read::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(40rem 28rem at 12% 22%, rgba(217,173,73,.09), transparent 70%),
    radial-gradient(36rem 26rem at 88% 72%, rgba(120,150,210,.09), transparent 70%)}
.sec:nth-of-type(even) .read::before{background:radial-gradient(38rem 26rem at 86% 20%, rgba(217,173,73,.08), transparent 70%),
    radial-gradient(40rem 28rem at 10% 78%, rgba(120,150,210,.09), transparent 70%)}
.gcard,.grid .card,.columns .card,.cards .card,.stats .card,.list .card,.loop > li,.strip > li.apart{position:relative;
  border-radius:var(--glass-radius);background:var(--glass-fill), var(--glass-solid);border:1px solid var(--glass-border);
  box-shadow:var(--glass-shadow)}
/* the specular rim, light from the top left, still */
.gcard::after,.grid .card::after,.columns .card::after,.stats .card::after,.list .card::after{content:"";position:absolute;inset:-1px;
  border-radius:inherit;padding:1px;pointer-events:none;
  background:linear-gradient(145deg, var(--glass-rim), rgba(255,255,255,0) 35%, rgba(255,255,255,0) 70%, rgba(255,255,255,.08));
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude}
.gcard{padding:var(--glass-pad)}
.list{gap:var(--gap-card)}
.list .card{padding:var(--glass-pad);border-top:1px solid var(--glass-border)}
.strip > li.apart{border:1px solid var(--glass-border)}
.loop > li{border-radius:18px}
.stats .n{font-size:clamp(3.5rem, 6vw, 5rem);font-weight:700;letter-spacing:-.03em}
@media (hover:hover){
  .gcard,.grid .card,.columns .card,.cards .card,.stats .card,.list .card{transition:transform .35s var(--ease-out),box-shadow .35s var(--ease-out)}
  :is(.gcard,.grid .card,.columns .card,.cards .card,.stats .card,.list .card):hover{transform:translateY(-3px)}
  .strip > li:hover{transform:none} /* a zero-gap list: a lifted card would sit over its neighbour (measured, engine-1300 r6b) */
}
/* A. Pair: the lead line on one side, the paragraphs as cards on the other; the sides swap from one section to the next.
   (Round 6: the lead no longer sticks while its cards pass; a line standing still beside sliding cards read as text
   over text, opinions-1235.) */
.pair{display:grid;grid-template-columns:minmax(0, 1fr) calc(var(--measure) + 2 * var(--glass-pad) + 2px);gap:var(--space-5) var(--space-8);align-items:start}
.pair-lead{position:static}
.pair-lead .lead-line{margin:0}
.pair-cards{display:grid;gap:var(--gap-card)}
.pair-cards > .gcard,.side-right .read .pair-cards > .gcard,.side-centre .read .pair-cards > .gcard{width:auto;max-width:none;margin:0}
.pair-cards p{margin:0}
.sec:nth-of-type(even) .pair{grid-template-columns:calc(var(--measure) + 2 * var(--glass-pad) + 2px) minmax(0, 1fr)}
.sec:nth-of-type(even) .pair-lead{grid-column:2;grid-row:1}
.sec:nth-of-type(even) .pair-cards{grid-column:1;grid-row:1}
/* D. Quote: Mia's lines on one wide glass card, a gold rule on its edge. */
.mia-lines.quote,.side-right .mia-lines.quote,.side-centre .mia-lines.quote{padding:var(--glass-pad) var(--glass-pad) var(--glass-pad) calc(var(--glass-pad) + var(--space-2));
  border:1px solid var(--glass-border);border-left:3px solid var(--brand-gold);border-radius:var(--glass-radius);text-align:left;max-width:calc(var(--measure) * 1.4)}
.side-centre .mia-lines.quote{margin-inline:auto}
.side-right .mia-lines.quote{margin-left:auto}
.quote .mia{max-width:none}
/* The reveal: a card or heading rises 18 px and fades in once, as it comes on screen (page.js adds .in); never a
   paragraph at a time, never again on the way back, nothing with reduced motion or without a script. */
html.js .rv{opacity:0;transform:translate3d(0, 18px, 0);transition:opacity .6s var(--ease-out),transform .7s var(--ease-out);transition-delay:calc(var(--i, 0) * 70ms)}
html.js .rv.in{opacity:1;transform:none}
/* In a list with no gap (.strip) a rising card would sit over the next one while it rises (measured, opinions-1235/opus-a.md
   §5: 17 samples of text over text): those fade in only. */
html.js .strip > li.rv{transform:none}
@media (hover:hover){html.js .rv.in:is(.gcard,.card):not(.strip > li):hover{transform:translateY(-3px);transition-delay:0s}}
@media (prefers-reduced-motion:reduce){html.js .rv{opacity:1;transform:none;transition:none}}
@media (max-width:1100px){
  .pair,.sec:nth-of-type(even) .pair{grid-template-columns:minmax(0, calc(var(--measure) + 2 * var(--glass-pad) + 2px))}
  .pair-lead,.sec:nth-of-type(even) .pair-lead{position:static;grid-column:1;grid-row:auto}
  .sec:nth-of-type(even) .pair-cards{grid-column:1;grid-row:auto}
  .sec:nth-of-type(even) .pair{justify-content:end}
}
@media (max-width:700px){
  :root{--glass-radius:18px;--glass-pad:20px}
  .gcard,.grid .card,.columns .card,.cards .card,.stats .card,.list .card{transition:none}
  .pair-cards{gap:14px}
  .sec:nth-of-type(even) .pair{justify-content:stretch}
  html.js .rv{transform:translate3d(0, 12px, 0);transition-delay:0s}
  .stats .n{font-size:56px}
}
/* Hub-style pieces (round 5, his A-604f71c5: small parts of Lift's Agent Hub, drawn, never a screenshot): the Hub's own
   values (renderer tokens.css: raised #232428, avatar 30 px at radius 9 with the gold tint, 8 px status dot with a 3 px
   ring, 16 x 12 progress tiles at radius 5); done is green, work is gold (no blue on this page, his WS31-14). */
.hub{margin-top:var(--space-4);padding:14px;border-radius:14px;background:#232428;border:1px solid rgba(255,255,255,.07);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05), 0 1px 2px rgba(0,0,0,.55)}
.hub .mia{margin:0;max-width:none;font-size:calc(var(--t-mia) * .82)}
.hub-head{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.hub-card > .hub-head{margin-bottom:var(--space-4)}
.hub-avatar{display:inline-grid;place-items:center;width:30px;height:30px;flex:none;border-radius:9px;background:rgba(232,162,58,.10);color:#e8a23a}
.hub-avatar .icon{width:16px;height:16px}
.hub-dot{width:8px;height:8px;border-radius:50%;flex:none;background:#707e99;box-shadow:0 0 0 3px rgba(112,126,153,.18)}
.hub-dot.work{background:#e8a23a;box-shadow:0 0 0 3px rgba(232,162,58,.18)}
.hub-dot.done{background:#35d18c;box-shadow:0 0 0 3px rgba(53,209,140,.16)}
.hub-tiles{display:flex;gap:6px;flex-wrap:wrap}
.hub-tiles i{width:16px;height:12px;border-radius:5px;background:#303237}
.hub-tiles i.on{background:#e8a23a}
.hub-bars{display:flex;gap:4px;margin-left:auto}
.hub-bars i{width:18px;height:4px;border-radius:2px;background:#303237}
.hub-bars i:nth-child(-n+2){background:#e8a23a}
.hub-peers{display:flex;margin-left:auto}
.hub-peers i{width:20px;height:20px;border-radius:50%;background:#292b2f;border:2px solid #232428;margin-left:-6px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.1)}
.hub-steps{display:flex;align-items:center;gap:8px;margin-top:12px;color:#35d18c}
.hub-pending{width:13px;height:13px;border-radius:50%;border:2px solid rgba(232,162,58,.35);border-top-color:#e8a23a}
.list .hub-card{border-left:4px solid #e8a23a}
@media (prefers-reduced-motion:no-preference){
  html.js .rv.in .hub-tiles i.on{animation:tile .5s var(--ease-out) both;animation-delay:calc(.3s + var(--k, 0) * 60ms)}
  html.js .rv.in .hub-tiles i.on:nth-child(2){--k:1}
  html.js .rv.in .hub-tiles i.on:nth-child(3){--k:2}
  html.js .rv.in .hub-tiles i.on:nth-child(4){--k:3}
}
@keyframes tile{from{background:#303237}}
.founders .legal{margin-top:var(--space-4);font-size:.875rem}
.founders .legal a{color:var(--text-2);text-decoration:none;margin:0 var(--space-3)}
.founders .legal a:hover,.founders .legal a:focus-visible{color:var(--text-1)}
/* The second-brain clip carries a faint generator mark in its bottom-right corner (Fable 5.1 P0-6, seat crop check 1 Nov):
   enlarge that one stage 6 % from the top-left so the corner (last ~4 % of width and height) falls outside the frame. */
#second-brain .media,#destination .media{overflow:hidden}
html.film #second-brain .media :is(canvas,img,video),html.film #destination .media .still.after{transform:scale(1.06);transform-origin:0 0}
/* whynow-1610 (his A-bc6a866c, 1 Nov 16:07: the section was "way too confusing"): Why now reads as one calm column in
   one order, centred, every block on one left edge: the lead, a line that names the four groups, the groups as a plain
   list between hairlines (no glass, no grid), Mia with her gold rule, then the paragraphs. */
#why-now .read > .block{width:auto;max-width:calc(var(--measure) * 1.22);margin-left:auto;margin-right:auto}
#why-now .read > .block + .block{margin-top:var(--space-8)}
#why-now .read .block-h{font-size:var(--t-lead);line-height:1.4;font-weight:var(--weight-strong);margin:0 0 var(--space-5)}
#why-now .read .mia-lines{padding:0 0 0 var(--space-5);border-right:0;border-left:2px solid var(--brand-gold)}
#why-now .list{grid-template-columns:1fr;gap:0}
#why-now .list .card{background:none;border:0;border-top:1px solid var(--line-strong);border-radius:0;box-shadow:none;
  padding:var(--space-5) 0;backdrop-filter:none;-webkit-backdrop-filter:none}
#why-now .list .card:last-child{border-bottom:1px solid var(--line-strong)}
#why-now .list .card::after{content:none}
#why-now .list .card:hover{transform:none}
#why-now .list h3{font-size:var(--t-card-h3);line-height:1.35;margin:0 0 var(--space-2)}
#why-now .list p{max-width:var(--measure);margin:0 0 var(--space-2);color:var(--text-2)}
#why-now .list p:last-child{margin-bottom:0}
/* principles-1630 (his A-9569a9e6, 1 Nov 16:30: "the section down below is still not looking great in terms of the reading
   experience ... maybe using icons"): the destination and the closing section read like why-now, one calm column on one
   left edge. The destination's seven items are a plain list between hairlines, each with one gold line icon (Lucide, 24
   px, stroke 1.6, aria-hidden) beside its heading and text; no glass, no grid, no hub piece. */
:is(#destination,#where-we-are) .read > .block{width:auto;max-width:calc(var(--measure) * 1.22);margin-left:auto;margin-right:auto}
:is(#destination,#where-we-are) .read > .block + .block{margin-top:var(--space-8)}
#destination .read .block-h{font-size:var(--t-lead);line-height:1.4;font-weight:var(--weight-strong);margin:0 0 var(--space-5)}
#destination .read .mia-lines{padding:0 0 0 var(--space-5);border-right:0;border-left:2px solid var(--brand-gold)}
#destination .list{grid-template-columns:1fr;gap:0}
#destination .list .card{display:grid;grid-template-columns:var(--space-6) minmax(0, 1fr);column-gap:var(--space-5);align-items:start;
  background:none;border:0;border-top:1px solid var(--line-strong);border-radius:0;box-shadow:none;padding:var(--space-5) 0;
  backdrop-filter:none;-webkit-backdrop-filter:none}
#destination .list .card:last-child{border-bottom:1px solid var(--line-strong)}
#destination .list .card::after{content:none}
#destination .list .card:hover{transform:none}
#destination .list .card > *{grid-column:2}
#destination .list .card > .card-icon{grid-column:1;grid-row:1 / span 9;display:flex;padding-top:2px;color:var(--brand-gold)}
#destination .list h3{font-size:var(--t-card-h3);line-height:1.35;margin:0 0 var(--space-2)}
#destination .list p{max-width:var(--measure);margin:0 0 var(--space-2);color:var(--text-2)}
#destination .list p:last-child{margin-bottom:0}
#destination .read > .prose:last-child{text-align:left} /* the closing line keeps the column's one left edge */
#where-we-are .dates{grid-template-columns:1fr;max-width:none}
@media (max-width:700px){
  #destination .list .card{column-gap:var(--space-4)}
  #where-we-are .dates{border-top:0}
}