/* ============================================================
   ALEOOP — shared styles for text pages (/privacy, /terms, /about,
   and the Wave-1 pages still to come).

   Loads AFTER assets/site.css and reuses its tokens, nav, footer
   and .btn. Nothing here touches the homepage: every selector is
   scoped under .lg / .ab or a .legal-page body.

   ⚠️ site.css carries homepage-shaped GLOBAL element rules — most
   notably `h2{max-width:20ch}`, sized for display headings. Text
   pages must reset those explicitly (see `.lg h2` below). Expect
   to hit the same class of leak with any new element.
   ============================================================ */

.legal-page, .text-page{ overflow-x:hidden }

/* ---------- masthead ---------- */
.lg-head{ padding-block:8.5rem 2.6rem; border-bottom:1px solid var(--border) }
.lg-eyebrow{
  font-family:var(--f-mono); font-size:var(--t-label); letter-spacing:.14em;
  text-transform:uppercase; color:var(--muted); margin:0 0 .9rem;
}
.lg-title{
  font-size:clamp(2.1rem,1.5rem + 2.6vw,3.4rem); line-height:1.08;
  letter-spacing:-.02em; margin:0 0 1.1rem; max-width:22ch;
}
.lg-meta{
  display:flex; gap:1.6rem; flex-wrap:wrap; align-items:baseline;
  font-family:var(--f-mono); font-size:.8rem; color:var(--muted);
}
.lg-meta strong{ color:var(--ink); font-weight:600 }

/* ---------- two-column shell: sticky contents + document ---------- */
.lg-shell{
  display:grid; grid-template-columns:16rem minmax(0,1fr);
  gap:clamp(2rem,4vw,4.5rem); align-items:start;
  padding-block:3rem 5rem;
}
@media (max-width:960px){
  .lg-shell{ grid-template-columns:minmax(0,1fr); gap:2rem }
}

/* ---------- table of contents ---------- */
.lg-toc{ position:sticky; top:6rem; max-height:calc(100vh - 9rem); overflow-y:auto }
@media (max-width:960px){
  .lg-toc{
    position:static; max-height:none; overflow:visible;
    border:1px solid var(--border); border-radius:16px;
    background:var(--surface); padding:1.1rem 1.3rem;
  }
}
.lg-toc h2{
  font-family:var(--f-mono); font-size:var(--t-label); letter-spacing:.14em;
  text-transform:uppercase; color:var(--muted); font-weight:500;
  margin:0 0 .9rem; padding:0; border:0;
}
.lg-toc ol{ list-style:none; margin:0; padding:0; counter-reset:none }
.lg-toc li{ margin:0 0 .1rem }
/* One line per entry. At 23 sections the two-line version ran 955px inside a 756px
   rail — a second scrollbar inside the page, and a wall of text competing with the
   document it indexes. Truncating keeps it a scannable index; the section number
   stays because the legal text cross-references by number ("Section 21"), and the
   full title rides along in the anchor's title attribute. */
.lg-toc a{
  display:flex; gap:.55rem; align-items:baseline;
  padding:.26rem 0 .26rem .7rem; font-size:.78rem; line-height:1.38;
  color:var(--muted); border-left:2px solid transparent;
  transition:color .2s var(--ease), border-color .2s var(--ease);
}
.lg-toc a:hover{ color:var(--ink) }
.lg-toc a.here{ color:var(--ink); border-left-color:var(--lime) }
.lg-toc .n{ font-family:var(--f-mono); font-size:.72rem; opacity:.6; flex:0 0 1.4rem }
/* min-width:0 is what lets a flex child actually ellipsis instead of overflowing */
.lg-toc .t{ flex:1 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }

/* ---------- the document body ---------- */
.lg{ max-width:72ch; font-size:1.0125rem; line-height:1.75 }
.lg > *:first-child{ margin-top:0 }

.lg p{ margin:0 0 1.15rem; color:var(--ink) }
.lg .lg-lead{ font-size:var(--t-bodyl); color:var(--muted) }

/* site.css sets a global `h2{max-width:20ch}` for the homepage's display headings.
   Legal section titles are prose-length and must run the full measure. */
.lg h2, .lg-toc h2{ max-width:none }

.lg h2{
  font-size:var(--t-h3); line-height:1.25; letter-spacing:-.01em;
  margin:3.1rem 0 1rem; padding-top:1.7rem; border-top:1px solid var(--border);
  scroll-margin-top:6rem; display:flex; gap:.75rem;
}
.lg h2:first-child{ margin-top:0; padding-top:0; border-top:0 }
.lg .lg-n{ font-family:var(--f-mono); font-size:.9em; color:var(--lime); flex:0 0 auto }
/* the title must be its own flex item, or it becomes an anonymous box that shrinks
   and wraps after ~30 characters instead of filling the measure */
.lg .lg-t{ flex:1 1 auto; min-width:0 }

.lg h3{
  font-size:1.02rem; font-weight:700; letter-spacing:.005em;
  margin:1.9rem 0 .7rem; color:var(--ink); scroll-margin-top:6rem;
}

.lg ul,.lg ol{ margin:0 0 1.3rem; padding-left:1.35rem; color:var(--ink) }
.lg li{ margin:0 0 .55rem }
.lg li::marker{ color:var(--muted) }
.lg ul{ list-style:none; padding-left:1.15rem }
.lg ul > li{ position:relative }
.lg ul > li::before{
  content:""; position:absolute; left:-1.15rem; top:.72em;
  width:5px; height:5px; border-radius:50%; background:var(--border);
}

.lg strong{ font-weight:700; color:var(--ink) }
/* the policy quotes full URLs (e.g. Google's privacy-partners page) — long unbreakable
   strings push past a 375px viewport unless they are allowed to break anywhere */
.lg a{ overflow-wrap:anywhere }
.lg a{ color:var(--ink); text-decoration:underline; text-decoration-color:var(--primary);
       text-decoration-thickness:1.5px; text-underline-offset:3px;
       transition:text-decoration-color .2s var(--ease) }
.lg a:hover{ text-decoration-color:var(--lime) }

/* ALL-CAPS statutory blocks (warranty disclaimers, arbitration notices) read as
   walls of shouting at body size — step them down and set them apart instead. */
.lg p.lg-caps{
  font-size:.9rem; line-height:1.7; color:var(--muted);
  background:var(--surface); border:1px solid var(--border);
  border-radius:16px; padding:1rem 1.2rem; margin:0 0 1.15rem;
}

/* ---------- tables (retention schedule, CCPA disclosure) ---------- */
/* The article is capped at 72ch; a four-column table is wider than that on a phone and
   on plenty of laptops. The wrapper scrolls instead of widening the page — same reason
   .lg a is allowed to break anywhere. */
.lg-table-wrap{ margin:0 0 1.3rem; overflow-x:auto; -webkit-overflow-scrolling:touch }
.lg-table{
  width:100%; min-width:36rem; border-collapse:collapse;
  font-size:.86rem; line-height:1.6;
}
.lg-table th,.lg-table td{
  padding:.7rem .85rem; text-align:left; vertical-align:top;
  border-bottom:1px solid var(--border);
}
.lg-table thead th{
  font-family:var(--f-mono); font-size:.72rem; font-weight:600;
  letter-spacing:.04em; text-transform:uppercase;
  color:var(--muted); border-bottom-color:var(--ink);
}
.lg-table td{ color:var(--ink) }
.lg-table tbody tr:last-child td{ border-bottom:0 }

/* ---------- footer note ---------- */
.lg-foot-note{
  border-top:1px solid var(--border); margin-top:3.5rem; padding-top:1.6rem;
  font-family:var(--f-mono); font-size:.78rem; color:var(--muted); line-height:1.7;
}
.lg-foot-note a{ color:var(--muted); text-decoration:underline }
.lg-foot-note a:hover{ color:var(--ink) }


/* ============================================================
   /about — brand page.
   The legal pages are documents; this one is the company speaking.
   It borrows three devices the rest of the site already owns —
   display type, the query console, the shift to paper — rather
   than inventing a vocabulary that exists nowhere else.
   ============================================================ */

/* ---------- opening statement ---------- */
.ab-open-sec{ padding:clamp(7.5rem,14vh,10.5rem) 0 clamp(3rem,6vh,4.5rem) }
.ab-statement{
  font-size:clamp(1.9rem,1.15rem + 2.7vw,3.15rem);
  line-height:1.14; letter-spacing:-.025em; font-weight:700;
  margin:0; max-width:26ch; text-wrap:balance;
}

/* ---------- origin prose ---------- */
.ab-body{ padding:0 0 clamp(3.5rem,7vh,5.5rem) }

/* ---------- ONE GRID FOR THE WHOLE PAGE ----------
   Every paired row on /about — prose|console, claim|consequence — runs the same two
   columns and the same gutter, so there is a single vertical line down the page and a
   single right edge. Before this, the rows capped at 62rem while the console ran to the
   container edge: two different right margins 128px apart at 1440.
   Measures are set by the column, not by a per-block max-width, for the same reason. */
.ab-layout, .ab-beliefs li, .ab-who{
  display:grid;
  grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);
  column-gap:clamp(2rem,4.5vw,4.25rem);
}
.ab-layout{ align-items:start }
@media (max-width:900px){ .ab-layout{ grid-template-columns:minmax(0,1fr); row-gap:2.5rem } }

.ab{ font-size:var(--t-bodyl); line-height:1.72 }
.ab p{ margin:0 0 1.5rem; color:var(--muted) }
.ab p:last-child{ margin-bottom:0; color:var(--ink) }

/* ---------- the question console ----------
   Reuses .console / .console-bar / .q-ask from site.css. Only the static
   list is new: the homepage cycles one question at a time through an
   absolutely-positioned stage, which a page with no GSAP cannot do. */
.ab-console{ margin:0; max-width:none }
@media (max-width:900px){ .ab-console{ max-width:52ch } }
.ab-qs{ list-style:none; margin:0; padding:0 }
.ab-qs li{
  font-size:1.06rem; font-weight:600; line-height:1.35; color:var(--ink);
  padding:.72rem 0; border-top:1px solid var(--border);
}
.ab-qs li:first-child{ border-top:0; padding-top:.2rem }
.ab-qs li:last-child{ padding-bottom:.2rem }
/* the terminal cursor from the homepage console, parked on the final question
   so the block reads as mid-conversation rather than as a finished list */
.ab-qs li:last-child::after{
  content:""; display:inline-block; width:.55ch; height:1.05em;
  background:var(--lime); margin-left:.35ch; vertical-align:-2px;
  box-shadow:0 0 10px var(--lime); animation:blink 1.1s steps(1) infinite;
}

/* ---------- brand-page chapters (believe / who we build for) ---------- */
.ab-sec{ padding:0 0 clamp(3.5rem,7vh,5.5rem) }
/* site.css caps every h2 at 20ch for the homepage's display headings; these are short
   but the reset stays explicit, per the Reset The Leak rule */
.ab-sec h2{ max-width:none; margin:0 0 .9rem }
.ab-sec-lead{
  font-size:var(--t-bodyl); color:var(--muted); max-width:52ch;
  line-height:1.6; margin:0 0 clamp(1.8rem,3.5vw,2.6rem);
}

/* the tonal band: the same softened-seam gradient `.problem` uses on the homepage,
   so the page steps bg → surface → bg instead of running one flat dark column */
.ab-believe{
  background:linear-gradient(180deg,var(--bg) 0%,var(--surface) 16%,var(--surface) 84%,var(--bg) 100%);
  padding-top:clamp(3.5rem,7vh,5.5rem);
}

/* convictions: claim left, consequence right, hairline-separated rows.
   Not cards — a grid of same-size cards is the pattern the Problem section
   replaced. No numerals either: these are convictions, not a sequence. */
.ab-beliefs{ list-style:none; margin:0; padding:0; border-top:1px solid var(--border) }
.ab-beliefs li{ padding:1.5rem 0; border-bottom:1px solid var(--border) }
@media (max-width:820px){
  .ab-beliefs li{ grid-template-columns:minmax(0,1fr); row-gap:.45rem; padding:1.35rem 0 }
}
.ab-beliefs b{
  font-size:var(--t-h3); font-weight:600; line-height:1.25;
  letter-spacing:-.01em; color:var(--ink); text-wrap:balance;
}
/* same running size as the other text pages (.lg), so the consequence column does not
   read as a caption next to the claim */
.ab-beliefs p{ margin:0; color:var(--muted); font-size:1.0125rem; line-height:1.7 }

/* who we build for: one row in the convictions' grammar — the line that turns the
   wrong buyer away is the claim, the paragraph is what it means. It floated when it
   lived alone in a half-empty column, so it shares the row instead. */
.ab-who{
  padding:1.5rem 0;
  border-top:1px solid var(--border); border-bottom:1px solid var(--border);
}
@media (max-width:820px){
  .ab-who{ grid-template-columns:minmax(0,1fr); row-gap:.45rem; padding:1.35rem 0 }
}
.ab-who b{
  font-size:var(--t-h3); font-weight:600; line-height:1.25;
  letter-spacing:-.01em; color:var(--ink); text-wrap:balance;
}
.ab-who p{ margin:0; color:var(--muted); font-size:1.0125rem; line-height:1.7 }

/* the last line of a paragraph never sits alone: `pretty` where the browser supports
   it, plus the same explicit two-word   binding the homepage sweep uses */
.ab p, .ab-beliefs p, .ab-who p, .ab-sec-lead{ text-wrap:pretty }

/* ---------- coda: full-bleed shift to paper ----------
   Same move the homepage makes for its Proof chapter. */
.ab-coda-band{
  background:var(--paper); color:var(--paper-ink);
  padding:clamp(4rem,9vh,6.5rem) 0;
}
.ab-coda{
  margin:0; max-width:27ch;
  font-family:var(--f-serif); font-style:italic;
  font-size:clamp(1.6rem,1.15rem + 1.9vw,2.75rem); line-height:1.24;
  letter-spacing:-.01em; color:var(--paper-ink);
}

/* ---------- contact ---------- */
.ab-contact-sec{ padding:clamp(3.5rem,7vh,5.5rem) 0 clamp(4rem,8vh,6rem) }
/* the page grid again, not a third one: the auto-fit version put the fields on
   153 / 545 / 937, three edges that exist nowhere else on the page */
.ab-contact{
  display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);
  column-gap:clamp(2rem,4.5vw,4.25rem); row-gap:clamp(1.6rem,3vw,2.2rem);
  align-items:start;
}
@media (max-width:900px){ .ab-contact{ grid-template-columns:minmax(0,1fr) } }
/* a display heading, matching the two sections above — it was a mono uppercase label,
   a different order of heading on the same page, and its side-bearing made it read as
   indented next to them */
.ab-contact h2{ margin:0; max-width:none; grid-column:1/-1 }
/* Office and the CTA share the right column: the button's top sits on the same line as
   the field keys, and its right edge lands on the container edge like every other row.
   On the heading line it read as floating above the block it belongs to. */
.ab-contact-right{
  display:flex; align-items:flex-start; justify-content:space-between;
  gap:1.25rem clamp(1.25rem,3vw,2rem); flex-wrap:wrap;
}
.ab-field{ font-size:.98rem; line-height:1.6 }
.ab-field .k{
  display:block; font-family:var(--f-mono); font-size:.72rem; letter-spacing:.1em;
  text-transform:uppercase; color:var(--muted); margin-bottom:.35rem;
}
.ab-field a:not(.btn){ color:var(--ink); text-decoration:underline;
  text-decoration-color:var(--primary); text-decoration-thickness:1.5px;
  text-underline-offset:3px; transition:text-decoration-color .2s var(--ease) }
.ab-field a:not(.btn):hover{ text-decoration-color:var(--lime) }
.ab-field address{ font-style:normal; color:var(--muted) }

/* ---------- the one authored moment ----------
   The console rises as it enters. Default is visible: without JS, or with
   reduced motion, nothing is hidden and nothing moves. */
.js .reveal{ opacity:0; transform:translateY(14px);
  transition:opacity .7s var(--ease), transform .7s var(--ease) }
.js .reveal.in{ opacity:1; transform:none }
@media (prefers-reduced-motion:reduce){
  .js .reveal{ opacity:1; transform:none; transition:none }
  .ab-qs li:last-child::after{ animation:none }
}

/* ============================================================
   /glossary — definitional pages.
   Reuses .faq / .faq-list from site.css so the accordion matches
   the homepage exactly. Term rows follow the hairline-separated
   row pattern the Signals table already establishes, rather than
   a grid of cards.
   ============================================================ */

.gl{ max-width:62ch; font-size:var(--t-bodyl); line-height:1.72 }
.gl p{ margin:0 0 1.4rem; color:var(--muted) }
.gl p strong{ color:var(--ink) }
/* inline prose links — without this the in-copy links render as plain text */
.gl a{ color:var(--ink); text-decoration:underline;
  text-decoration-color:var(--primary); text-decoration-thickness:1.5px;
  text-underline-offset:3px; transition:text-decoration-color .2s var(--ease) }
.gl a:hover{ text-decoration-color:var(--lime) }

/* the definition itself: the sentence answer engines quote, so it gets the weight */
.gl-def{
  /* the documented Title step, at a lighter weight and looser leading: a definition
     runs several lines, so it cannot take Title's 1.2 line-height */
  font-size:var(--t-h3); line-height:1.45;
  color:var(--ink); font-weight:500; margin:0 0 2rem; max-width:44ch;
}
.gl .gl-def{ color:var(--ink) }

.gl h2{
  font-size:var(--t-h3); line-height:1.25; letter-spacing:-.01em; max-width:none;
  margin:2.8rem 0 1rem; color:var(--ink);
}
.gl h2:first-child{ margin-top:0 }

/* the three requirements: bolded lead-in, then the sentence. Not cards. */
.gl-req{ margin:0 0 1.4rem }
.gl-req b{ display:block; color:var(--ink); font-weight:700; margin-bottom:.2rem }

/* ---------- vocabulary rows ---------- */
.gl-terms{ list-style:none; margin:2rem 0 0; padding:0; border-top:1px solid var(--border) }
.gl-term{
  display:grid; grid-template-columns:minmax(0,15rem) minmax(0,1fr);
  gap:.4rem clamp(1.5rem,3vw,2.75rem);
  padding:1.25rem 0; border-bottom:1px solid var(--border);
}
@media (max-width:760px){ .gl-term{ grid-template-columns:minmax(0,1fr); gap:.35rem } }
.gl-term dt{ font-weight:600; font-size:1.02rem; line-height:1.35; color:var(--ink) }
.gl-term dd{ margin:0; color:var(--muted); font-size:.98rem; line-height:1.6 }
.gl-term a{ color:var(--ink); text-decoration:underline;
  text-decoration-color:var(--primary); text-decoration-thickness:1.5px;
  text-underline-offset:3px; transition:text-decoration-color .2s var(--ease) }
.gl-term a:hover{ text-decoration-color:var(--lime) }

/* ---------- back link on an entry ---------- */
.gl-back{
  display:inline-flex; align-items:center; gap:.5rem; margin-bottom:1.1rem;
  font-family:var(--f-mono); font-size:.72rem; letter-spacing:.1em;
  text-transform:uppercase; color:var(--muted);
  transition:color .2s var(--ease);
}
.gl-back:hover{ color:var(--ink) }

/* ---------- related terms ---------- */
.gl-related{
  margin-top:2.6rem; padding-top:1.6rem; border-top:1px solid var(--border);
  color:var(--muted); font-size:.98rem; line-height:1.9;
}
.gl-related .k{
  display:block; font-family:var(--f-mono); font-size:.72rem; letter-spacing:.1em;
  text-transform:uppercase; margin-bottom:.6rem;
}

/* ---------- closing CTA line ---------- */
.gl-cta{
  margin-top:clamp(3rem,6vw,4.5rem); padding-top:2.4rem;
  border-top:1px solid var(--border);
  display:flex; align-items:center; gap:1.5rem 2rem; flex-wrap:wrap;
}
.gl-cta p{ margin:0; color:var(--ink); font-size:var(--t-bodyl); max-width:34ch }

/* ============================================================
   SYSTEM OBJECTS — the page-architecture layer (DESIGN.md).

   These are NOT page-scoped. They are the catalogue objects every
   subpage from Wave 2 on composes from, named as system objects so
   the next page does not add a fourth `.xx-` prefix the way /glossary
   ended up importing `.lg-head` and `.ab-body`.

   The historical prefixes (.lg- .ab- .gl-) stay where they are —
   renaming working pages is not worth the regression risk.
   ============================================================ */

/* ---------- THE PAGE GRID ----------
   One page, one grid. Every paired row runs these same two columns and
   this same gutter, so the page presents exactly four x-edges. Measures
   come from the column; never add a per-block max-width inside it.
   (site.css `.lead` carries max-width:62ch for the homepage — that is
   precisely the leak this rule exists to stop. Use .pg-lead instead.) */
.pg-grid{
  display:grid;
  grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);
  column-gap:clamp(2rem,4.5vw,4.25rem);
  align-items:start;
}
@media (max-width:900px){
  .pg-grid{ grid-template-columns:minmax(0,1fr); row-gap:1.5rem }
}

/* ---------- THE HAIRLINE ROW ----------
   The structural object of the system: claim/term/name left, consequence
   /definition/value right. No fill, no radius, no card. The right column
   runs at reading size, never caption size — at caption size it reads as
   a footnote to the left column instead of its equal. */
.pg-rows{ list-style:none; margin:0; padding:0; border-top:1px solid var(--border) }
.pg-row{ padding:1.5rem 0; border-bottom:1px solid var(--border) }
.pg-row > b{
  font-size:var(--t-h3); font-weight:600; line-height:1.25;
  letter-spacing:-.01em; color:var(--ink); text-wrap:balance;
}
.pg-row > p{ margin:0; color:var(--muted); font-size:1.0125rem; line-height:1.7; text-wrap:pretty }
/* mono variant of the left member — a kicker that is a row member, not a
   label floating in a half-empty column */
.pg-row-k{
  margin:0; font-family:var(--f-mono); font-size:var(--t-label);
  letter-spacing:.14em; text-transform:uppercase; color:var(--muted);
  line-height:1.5; padding-top:.3rem;
}
@media (max-width:820px){
  .pg-row{ padding:1.35rem 0 }
  .pg-row-k{ padding-top:0 }
}

/* ---------- lead paragraph ----------
   Measure from the column, which is why there is no max-width here. */
.pg-lead{ font-size:var(--t-bodyl); color:var(--muted); line-height:1.62; margin:0; text-wrap:pretty }

/* ---------- the paper band ----------
   Full-bleed pacing device, at most one per page. */
.pg-band-paper{
  background:var(--paper); color:var(--paper-ink);
  padding:clamp(4rem,9vh,6.5rem) 0;
}

/* ---------- closing CTA ----------
   Hairline above, one line of copy, one lime button. Every page that does
   not end on a coda ends on this. (.gl-cta is its historical twin.) */
.pg-cta{
  padding-top:2.4rem; border-top:1px solid var(--border);
  display:flex; align-items:center; justify-content:space-between;
  gap:1.5rem 2rem; flex-wrap:wrap;
}
.pg-cta p{ margin:0; color:var(--ink); font-size:var(--t-bodyl); max-width:34ch }

/* ============================================================
   /customers — case studies. Archetype: single page (2 stories for
   3 accounts; the system floor for a hub is 3 children). Rail: none,
   deliberately — five sections that read in one pass.
   Built almost entirely from .pg-row, which is the point.
   ============================================================ */

/* leak resets: site.css h2{max-width:20ch} is shaped for homepage display
   headings and wraps this H2 after ~20 characters */
.cs-ends h2{ max-width:none; margin:0 0 1rem; color:var(--ink); grid-column:1/-1 }
/* the H2 spans both columns; the lead sits in column 1, so its measure comes from
   the column instead of running the full 1120px container (~105ch, unreadable) */
.cs-ends-head{ margin-bottom:clamp(1.6rem,3.5vw,2.4rem) }

/* the masthead rule is a container-width line and the row hairlines are content-width;
   two rules of almost the same length reads as a mistake, so this page closes its
   masthead with air instead */
.cs-head{ border-bottom:0 }

/* the stories are the page substance, not an annotation: they step up to the lead size
   so they do not read at the same weight as the claim rows consequence column */
.cs-sec .pg-row > p{ font-size:var(--t-bodyl); line-height:1.68 }
.cs-ends .pg-row > p{ font-size:1.0125rem; line-height:1.7 }

.cs-open{ padding-block:clamp(2.4rem,5vh,3.4rem) clamp(3rem,6vh,4.5rem) }
.cs-sec{ padding-block:0 clamp(3rem,6vh,4.5rem) }

.cs-lead{ margin:0; font-size:var(--t-bodyl); line-height:1.7; color:var(--muted); text-wrap:pretty }

/* ---------- logo wall on the dark canvas ----------
   site.css styles .logos for the homepage's LIGHT Proof strip:
   `filter:brightness(0)` renders the marks black and `.nm` is paper-ink.
   Both are invisible here. Inverted to a white mono treatment; hover still
   restores the real colour, same as the homepage. */
.cs-proof{ padding-top:.2rem }
.cs-k{
  margin:0 0 .55rem; font-family:var(--f-mono); font-size:var(--t-label);
  letter-spacing:.14em; text-transform:uppercase; color:var(--muted);
}
.cs-proof-line{ margin:0; font-size:var(--t-h3); font-weight:600; line-height:1.3;
  letter-spacing:-.01em; color:var(--ink); text-wrap:balance }
.cs-logos{ margin-top:1.5rem; gap:1.8rem 2.2rem }
.cs-logos .clogo{ filter:brightness(0) invert(1); opacity:.62 }
.cs-logos .clogo:hover{ filter:none; opacity:1 }
.cs-logos .clogo-lockup{ opacity:.62 }
.cs-logos .clogo-lockup:hover{ opacity:1 }
.cs-logos .clogo-lockup .nm{ color:var(--ink); font-size:1rem }

/* ---------- the number, on paper ----------
   Money is lime everywhere on the dark canvas; on #F5F5F2 lime fails
   contrast, so paper money is indigo. The homepage's Proof stat set that
   precedent and this follows it rather than inventing a second rule. */
.cs-fig{
  margin:0; font-family:var(--f-mono); font-weight:600;
  font-size:clamp(2.6rem,1.8rem + 3vw,4rem); line-height:1;
  letter-spacing:-.02em; color:var(--primary); font-variant-numeric:tabular-nums;
}
.cs-fig-cap{ margin:0; color:var(--paper-muted); font-size:var(--t-bodyl);
  line-height:1.6; text-wrap:pretty }
@media (max-width:900px){ .cs-number .pg-grid{ row-gap:1.1rem } }

.cs-close{ padding-block:clamp(3.5rem,7vh,5.5rem) clamp(4rem,8vh,6rem) }

/* the separator inside a mono kicker: the character is decorative, the
   two halves are the content */
.pg-row-k .sep{ opacity:.55 }

/* ============================================================
   SYSTEM OBJECTS — second batch (Wave 2 · /features)
   Named .pg-* because they are catalogue objects, not page-local ones.
   ============================================================ */

/* ---------- Statement opening ----------
   A full sentence as the H1, on generous top air. The Commercial and Brand
   archetypes open on this; pages with a NAME open on the masthead instead.
   26ch is a DECLARED display measure — the edge census subtracts it. */
.pg-open{ padding-block:clamp(7.5rem,14vh,10.5rem) clamp(3rem,6vh,4.5rem) }
.pg-statement{
  font-size:clamp(1.9rem,1.15rem + 2.7vw,3.15rem);
  line-height:1.14; letter-spacing:-.025em; font-weight:700;
  margin:0 0 clamp(2rem,4vw,2.8rem); max-width:26ch; text-wrap:balance;
}
.pg-open-lead{ align-items:start }

/* ---------- section head ----------
   H2 spans both columns; the lead sits in column 1 so its measure comes from
   the column. Never let a lead run the full container — at 1120px it is ~105ch. */
.pg-sec{ padding-block:0 clamp(3rem,6vh,4.5rem) }
.pg-sec-head{ margin-bottom:clamp(1.6rem,3.5vw,2.4rem) }
/* leak reset: site.css h2{max-width:20ch} is sized for homepage display headings */
.pg-sec-head h2{ max-width:none; margin:0; color:var(--ink); grid-column:1/-1 }
.pg-sec-head .pg-lead{ margin-top:.9rem }
.pg-close{ padding-block:clamp(3.5rem,7vh,5.5rem) clamp(4rem,8vh,6rem) }

/* ---------- tonal band ----------
   The MID-PAGE pacing device: the page steps bg → surface → bg instead of
   running one flat dark column. Softer than the paper band, and usable once or
   twice per page where paper is spent on a single moment. */
.pg-band-tone{
  background:linear-gradient(180deg,var(--bg) 0%,var(--surface) 14%,var(--surface) 86%,var(--bg) 100%);
  padding-block:clamp(3.5rem,7vh,5.5rem) 0;
}

/* ---------- the gap marker ----------
   For a page that is a PROPOSAL: it marks the exact place a product fact is
   missing. It must be impossible to mistake for finished copy, and it must not
   become a coloured callout — the palette has no warning colour and a coloured
   border-left is banned system-wide.
   So: the system's ONLY dashed rules. Dashed reads as "not final" without
   inventing a colour, and the one-off is the point. If this treatment ever
   appears on a page that is not a proposal, something has gone wrong. */
.pg-gap{
  margin:1.6rem 0; padding:1.15rem 0;
  border-top:1px dashed var(--border); border-bottom:1px dashed var(--border);
}
.pg-gap-k{
  margin:0 0 .45rem; font-family:var(--f-mono); font-size:var(--t-label);
  letter-spacing:.14em; text-transform:uppercase; color:var(--muted);
}
.pg-gap-k::before{ content:"⟨ "; }
.pg-gap-k::after{ content:" ⟩"; }
.pg-gap p:not(.pg-gap-k){
  margin:0; color:var(--muted); font-size:.98rem; line-height:1.65;
  font-style:italic; max-width:64ch;
}



/* the comparison component ships from site.css with its columns at 1fr 1.05fr — the
   REVERSE of the page grid. On the homepage nothing sits above it to disagree with; here
   the claim rows do. Measured at 1440: with the page's own ratio the right column's TEXT
   starts at 749 against the rows' 758, nine pixels; with the site.css default it starts at
   721, thirty-seven. Scoped override, site.css untouched.
   The remaining nine pixels are the cells' own 1.4rem padding. They are not closable with a
   fixed ratio — the page grid has a fluid column-gap and this component has none — so the
   table's interior is DECLARED as component internals, the same status as the logo wall and
   the nav. Do not chase it with a magic number. */
.pg-sec .vs-head, .pg-sec .vs-row{ grid-template-columns:minmax(0,1.05fr) minmax(0,1fr) }

/* ---------- numbered step ----------
   A sequence that is the page's CONTENT rather than its index: mono numerals
   inline in the content column, never on a rail. The numbered spine on a rail
   is the homepage's alone, and a page that is not making the homepage's
   argument has nothing to number that way.
   Introduced for the mechanism section /features absorbed from /how-it-works. */
.pg-steps{ list-style:none; margin:0; padding:0; border-top:1px solid var(--border) }
.pg-step{ padding:1.6rem 0; border-bottom:1px solid var(--border) }
/* the step runs the page grid: title spans, prose takes column 1 so its measure comes
   from the column instead of the full 1120px container (~105ch), and the gap marker takes
   column 2 — which puts each unknown physically beside the thing it is unknown about. */
.pg-step{ display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);
  column-gap:clamp(2rem,4.5vw,4.25rem); align-items:start }
@media (max-width:900px){ .pg-step{ grid-template-columns:minmax(0,1fr); row-gap:.2rem } }
.pg-step h3{
  grid-column:1/-1; margin:0 0 .9rem; font-size:var(--t-h3); line-height:1.25; letter-spacing:-.01em;
  color:var(--ink); font-weight:600; display:flex; gap:1rem; align-items:baseline;
}
.pg-step h3 .pg-n{ font-family:var(--f-mono); font-size:.82em; color:var(--muted); flex:0 0 auto }
.pg-step h3 .pg-t{ flex:1 1 auto; min-width:0 }
.pg-step > p{ margin:0; color:var(--muted); font-size:1.0125rem; line-height:1.7; text-wrap:pretty }
/* always column 2, including on a step that has no prose yet — a reader scanning the
   sequence expects the unknowns in one column, and step 02 is nothing but an unknown */
.pg-step .pg-gap{ margin:0; grid-column:2 }
@media (max-width:900px){ .pg-step .pg-gap{ grid-column:1 } }

/* the worked example: a quote block. The hairline rule at 1px is the system
   hairline doing what it always does — the ban is on COLOURED accent bars. */
.pg-example{
  margin:0 0 clamp(1.8rem,4vw,2.6rem); padding:.2rem 0 .2rem 1.4rem;
  border-left:1px solid var(--border);
}
.pg-example p{ margin:0; color:var(--muted); font-style:italic; line-height:1.7 }

/* ============================================================
   SYSTEM OBJECTS — third batch (density).
   Written 2026-08-26 after the user's critique that the subpages read plain.
   The cause was structural: the architecture layer prescribed STRUCTURE and never
   prescribed DENSITY, so pages got built out of one object end to end. These are
   the devices that were missing, plus the motion the subpages never had.
   ============================================================ */

/* ---------- product screen, framed ----------
   site.css already draws this chrome, but only inside the homepage tour, welded to
   sticky scrollytelling and crossfade. This is the same frame as a STATIC object any
   page can place. It does not recreate the tour and must not: the tour is the
   homepage's one guided moment. */
.pg-figure{ margin:0 }
.pg-frame{
  border:1px solid var(--border); border-radius:16px; overflow:hidden;
  background:var(--card-2);
  box-shadow:0 40px 80px -50px rgba(45,51,244,.7), 0 0 0 1px rgba(176,222,94,.04);
}
.pg-frame-bar{
  display:flex; gap:.45rem; align-items:center;
  padding:.7rem .9rem; background:var(--surface); border-bottom:1px solid var(--border);
}
.pg-frame-bar i{ width:10px; height:10px; border-radius:50%; background:var(--border) }
.pg-frame-bar .lbl{
  margin-left:auto; font-family:var(--f-mono); font-size:.72rem; letter-spacing:.1em;
  text-transform:uppercase; color:var(--muted);
}
.pg-frame img{ display:block; width:100%; height:auto }
.pg-figure figcaption{
  margin-top:.8rem; font-family:var(--f-mono); font-size:.72rem; letter-spacing:.1em;
  text-transform:uppercase; color:var(--muted);
}
/* two placements, alternating down a page — one consistent frame, two rhythms, which
   is what stops every section reading as the same shape */
.pg-figure-wide{ margin-top:clamp(2rem,4.5vw,3.2rem) }

/* ---------- image slot ----------
   A DESIGNED placeholder, not a grey rectangle: it declares its ratio and says in
   words which asset belongs there, so the client can actually fill it. It is allowed
   to look unfinished — it is unfinished — but it must look deliberately so. */
.pg-slot{
  display:flex; flex-direction:column; justify-content:center; gap:.5rem;
  aspect-ratio:16/10; padding:1.4rem;
  border:1px dashed var(--border); border-radius:16px;
  background:linear-gradient(180deg,rgba(45,51,244,.05),transparent 70%);
}
.pg-slot .k{
  font-family:var(--f-mono); font-size:var(--t-label); letter-spacing:.14em;
  text-transform:uppercase; color:var(--muted);
}
.pg-slot .k::before{ content:"⟨ " } .pg-slot .k::after{ content:" ⟩" }
.pg-slot p{ margin:0; color:var(--muted); font-size:.98rem; line-height:1.55; max-width:38ch }
.pg-slot .dim{ font-family:var(--f-mono); font-size:.72rem; letter-spacing:.1em; color:var(--muted); opacity:.7 }

/* ---------- scroll-driven entrance ----------
   The subpages' motion, and a system object rather than a per-page effect. CSS only:
   no JS, no CDN, and GSAP stays the homepage's alone.
   THE DEFAULT IS VISIBLE. Without support, without JS, or under reduced motion the
   animation simply never applies and nothing is hidden — which is why this is safe on
   a browser that has never heard of scroll timelines. */
@keyframes pg-enter{ from{ opacity:0; transform:translateY(18px) } to{ opacity:1; transform:none } }
@keyframes pg-rise{ from{ opacity:0; transform:translateY(34px) scale(.985) } to{ opacity:1; transform:none } }

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .pg-in{ animation:pg-enter linear both; animation-timeline:view(); animation-range:entry 4% cover 20% }
    /* a figure earns a longer, slightly heavier entrance than a line of text */
    .pg-figure{ animation:pg-rise linear both; animation-timeline:view(); animation-range:entry 2% cover 26% }
  }
}

/* ---------- static console question list ----------
   The signature device in its subpage form: no cycling stage (that needs the homepage's
   GSAP), so the questions read as a hairline-separated list with the cursor parked on
   the last one. `.ab-qs` is this object's historical twin on /about. */
.pg-qs{ list-style:none; margin:0; padding:0 }
.pg-qs li{
  padding:.75rem 0; border-top:1px solid var(--border);
  font-size:1.02rem; font-weight:600; line-height:1.35; color:var(--ink);
}
.pg-qs li:first-child{ border-top:0; padding-top:.2rem }
.pg-qs li:last-child{ padding-bottom:.2rem; position:relative }
.pg-qs li:last-child::after{
  content:""; display:inline-block; width:.55ch; height:1.05em; background:var(--lime);
  margin-left:4px; vertical-align:-3px; box-shadow:0 0 10px var(--lime);
  animation:blink 1.1s steps(1) infinite;
}
@media (prefers-reduced-motion:reduce){ .pg-qs li:last-child::after{ animation:none } }

/* the $60K gets a white card on the paper band — the same move the homepage's Proof
   chapter makes for the same figure. It was a bare number on a light field, which is
   the least presence the one real number on the site could possibly have. */
.cs-stat{
  background:#fff; border:1px solid var(--paper-border); border-radius:18px;
  padding:clamp(1.6rem,3.5vw,2.4rem);
}
.cs-stat .cs-fig{ margin:0 0 .7rem }
.cs-stat .cs-fig-cap{ color:var(--paper-muted) }
/* the slot beside it belongs to the light band, so it is drawn in paper ink */
.cs-slot{ border-color:var(--paper-border); background:linear-gradient(180deg,rgba(45,51,244,.05),transparent 70%) }
.cs-slot .k, .cs-slot p, .cs-slot .dim{ color:var(--paper-muted) }
@media (max-width:900px){ .cs-number .pg-grid{ row-gap:1.6rem } }

/* Shape A: when a section head carries a figure, the H2 stops spanning and the two
   share the row — heading left, screen right. Without this the H2 spans, the figure
   drops to the next row, and "beside the head" silently becomes "under the head". */
.pg-sec-head:has(.pg-figure) h2{ grid-column:auto }
@media (max-width:900px){ .pg-sec-head:has(.pg-figure) h2{ grid-column:1/-1 } }

/* a kicker that now sits directly above its prose instead of beside it needs the gap
   the grid used to give it */
.pg-row > div > .pg-row-k{ margin-bottom:.6rem; padding-top:0 }

/* ============================================================
   RHYTHM — fourth batch, 2026-08-26, after a critique measured the problem.

   The numbers that forced this, at 1440 with motion silenced:
     · /features ran 23 grids, ALL of them 540.469 / 514.719 (51.2 / 48.8).
       The homepage runs FIFTEEN distinct geometries, one of them a 6% rail.
     · Every /features body section: padding-block 0 / 72px. Every single one.
       The homepage swings 48 → 312px and uses `air`/`knit` five times.
     · Full-bleed elements: /features 1, /customers 1, homepage 12 — every
       homepage section bleeds.
     · The homepage has a 6,864px stretch with NOT ONE horizontal rule.
       /features' largest rule-free gap is 700px, and it is the inside of a
       screenshot. The steps section runs 14.8 rules per 1000px.
     · DM Serif Display, the system's declared one indulgence: 0 uses on the
       subpages, 2 on the homepage.
   A constant is not a rhythm. It is the absence of one.
   ============================================================ */

/* ---------- section durations ----------
   The subpage equivalents of site.css's `air` / `knit`, which the homepage uses
   five times and page.css had never once. A page assigns DURATIONS to its
   sections — long, short, long, longest — before any of this is written. */
.pg-sec.knit{ padding-block:0 clamp(1.8rem,3.5vh,2.6rem) }
.pg-sec.air { padding-block:clamp(2.5rem,5vh,4rem) clamp(6rem,12vh,9rem) }
/* a section head sat 38.4px from its own rows while sections sat 72px apart —
   a ratio of 1.9:1, so a section barely separated from its own heading and the
   whole page merged into one ladder. Knit tightens the head to what it owns. */
.pg-sec.knit .pg-sec-head{ margin-bottom:clamp(1rem,2vw,1.4rem) }

/* ---------- the mirror ----------
   The Edge Census enforces FOUR X-POSITIONS. It never required a single column
   ratio — that was smuggled in by calling the rule "one page, one grid", and it
   is why the object sat in column 2 in 100% of cases and the page had one
   silhouette top to bottom. Flipping which column carries the object keeps all
   four edges exactly where they were and changes the shape of the page. */
.pg-flip > *:nth-child(1){ grid-column:2 }
.pg-flip > *:nth-child(2){ grid-column:1; grid-row:1 }
@media (max-width:900px){
  .pg-flip > *:nth-child(1), .pg-flip > *:nth-child(2){ grid-column:1; grid-row:auto }
}

/* ---------- indigo atmosphere ----------
   DESIGN.md: "Indigo is the brand, not an accent — it appears as atmosphere,
   wash and glow, rarely as fill." The homepage is full of radial indigo washes.
   The subpages had FLAT backgrounds and not one lit element, on a system whose
   north star is a near-black room where something glows. This is the missing
   layer, and it costs the lime reservation nothing. */
.pg-glow{ position:relative; overflow:clip }
.pg-glow::before{
  content:""; position:absolute; z-index:0; pointer-events:none;
  width:44rem; height:44rem; top:-16rem; right:-12rem;
  background:radial-gradient(circle, rgba(45,51,244,.30), transparent 62%);
  filter:blur(6px);
}
.pg-glow > *{ position:relative; z-index:1 }
/* a second, cooler wash low on the page so the bottom third is not dead navy */
.pg-glow-low::before{ top:auto; bottom:-20rem; right:auto; left:-14rem;
  background:radial-gradient(circle, rgba(45,51,244,.20), transparent 64%) }

/* ---------- ghosted sequence numerals ----------
   The steps ran 21px numerals against a 25.6px title — a numeral SMALLER than
   the thing it numbers. The homepage's `.prob-num` is roughly double its heading
   and is `--ink` at 16% opacity, NOT lime: scale carries it, colour does not.
   Same device here. */
.pg-step h3 .pg-n{
  font-size:clamp(2.1rem,1.4rem + 2vw,3.1rem); line-height:.85;
  color:var(--ink); opacity:.16; font-variant-numeric:tabular-nums;
  align-self:start;
}
.pg-step h3{ align-items:start; gap:1.2rem }

/* ---------- the comparison table, on paper ----------
   A page whose last third was one continuous grey needed a second pacing event,
   and this section is the natural one: the objection-killer arrives, the ground
   changes under it, and the table stops reading as more of the same rows.
   .vs-* ships tuned for the dark canvas — indigo tints on near-black, --ink text.
   All of it is remapped here; site.css is untouched. */
.pg-band-paper .vs-head .vs-a{ color:var(--paper-muted) }
.pg-band-paper .vs-head .vs-b{ color:var(--paper-ink); background:rgba(45,51,244,.10) }
.pg-band-paper .vs-row{ border-top-color:var(--paper-border) }
.pg-band-paper .vs-x{ color:var(--paper-muted) }
.pg-band-paper .vs-y{ color:var(--paper-ink); background:rgba(45,51,244,.05);
  border-left-color:var(--paper-border) }
.pg-band-paper .vs-y::before{ color:var(--primary) }
.pg-band-paper .vs-head span{ border-bottom:1px solid var(--paper-border) }
.pg-band-paper h2{ color:var(--paper-ink); max-width:none }
.pg-band-paper .pg-lead{ color:var(--paper-muted) }
@media (max-width:900px){ .pg-band-paper .vs-x::before, .pg-band-paper .vs-y::before{ color:var(--paper-muted) } }

/* ---------- the close ----------
   An 8,529px argument ended in 273px of flat navy while the homepage closes on
   an 808px full-bleed band. Peak-end says the reader keeps the opening and the
   ending; this was the least designed part of the site.
   Full-bleed, indigo atmosphere, and the ONE place the subpages finally spend
   the system's declared indulgence — the serif italic. */
.pg-close-band{
  background:linear-gradient(180deg,var(--bg) 0%,var(--surface) 55%,var(--surface) 100%);
  padding-block:clamp(4.5rem,9vh,7rem) clamp(4.5rem,9vh,7rem);
}
.pg-close-band .pg-cta{ border-top:0; padding-top:0; align-items:end }
.pg-close-band .pg-cta p{
  font-family:var(--f-serif); font-style:italic; font-weight:400;
  font-size:clamp(1.6rem,1.15rem + 1.9vw,2.4rem); line-height:1.24;
  letter-spacing:-.01em; color:var(--ink); max-width:20ch;
}

/* ============================================================
   RHYTHM — sixth batch, 2026-08-26, after the user read §3 as
   "texto perdido com duas imagens coladas". Both halves were real.

   ① EIGHT PIXELS. §2's full-width screen ended at y=2967 and §3's screen began
   at y=2975. The cause is structural, not a one-off: every `.pg-sec` runs
   `padding-block: 0 X`, so ALL the space between two sections comes from the
   previous one's BOTTOM. A full-bleed band ends with `padding-bottom: 0` — by
   design, so its gradient can resolve — which means a band contributes no
   trailing air at all and the next section, whose top is also 0, lands flush
   against it. Two large light screenshots then touch.

   Removing `knit` from §3 (previous commit) could not fix this: knit only ever
   changed the BOTTOM. The wrong end was adjusted.

   The rule, general rather than per-page: A BAND SUPPLIES NO TRAILING AIR, SO
   THE SECTION AFTER IT OWNS ITS OWN TOP. And a band's last element should not
   sit on the band's own edge either.

   ② The mirror is a ROW device, never a HEAD device. `.pg-flip` on a section
   head puts the object before the heading in reading order, and a heading that
   arrives second reads as the object's caption. /customers uses the flip
   correctly — its two story ROWS alternate text/slot while the heading stays
   out of it. /features has no row that carries an object, so it has nowhere
   honest to flip, and forcing it onto the head is what produced the defect.
   A page with no object-bearing rows simply does not flip.
   ============================================================ */

/* the band no longer ends flush on its last element */
.pg-band-tone{ padding-bottom:clamp(2.25rem,4.5vh,3.25rem) }
/* and whatever follows a full-bleed band brings its own top air. Two adjacent
   product screens need more than the default section gap, which is why this is
   nearer `air` than `.pg-sec`'s default. */
.pg-band-tone + .pg-sec,
.pg-band-paper + .pg-sec,
.pg-band-tone + .cs-sec,
.pg-band-paper + .cs-sec{ padding-top:clamp(3.25rem,6.5vh,5rem) }

/* /customers: the .cs-sec durations, same reasoning as .pg-sec's */
.cs-sec.knit{ padding-block:0 clamp(1.8rem,3.5vh,2.6rem) }
.cs-sec.air { padding-block:clamp(2.5rem,5vh,4rem) clamp(5rem,10vh,7.5rem) }
/* the band already supplies the bottom air; the section inside must not add its own */
.pg-band-paper > .pg-sec, .pg-band-tone > .wrap.pg-sec{ padding-bottom:0 }

/* ============================================================
   MOTION, APPLIED — fifth batch, 2026-08-26.

   The fourth batch WROTE the subpage entrance and nothing USED it.
   Measured before this batch:
     · `.pg-in`      — 0 occurrences on /features, /customers, /about.
       The class was defined, documented as "the subpages' motion", and
       applied to not one element on the site.
     · `.pg-figure`  — 8 uses on /features, 0 on /customers.
     · Reactive elements on /customers — none at all, across 2,857px.
     · GSAP + ScrollTrigger: loaded only by build/index.html. That part is
       system law, not a defect — subpage motion is CSS scroll-driven and
       GSAP stays the homepage's. The defect was that the CSS never ran.
   A vocabulary nobody applies is a note, not a system.

   TWO devices, and the split is the whole idea:

     · `.pg-in`       — one block, its OWN view timeline. Use for a heading,
       a lead, a quote, a stat: things that arrive alone.
     · `.pg-in-group` — a LIST as ONE authored event. The children run
       against the LIST's timeline, so they stagger together instead of each
       row drip-fading on its own arrival. Ten rows on ten timelines is the
       scroll-reveal reflex every site has; ten rows on one timeline is a
       composition. Only for lists SHORTER than the viewport — a list taller
       than the scrollport has a degenerate `entry` phase, which is why
       `.pg-steps` uses per-step timelines instead.

   THE DEFAULT IS STILL VISIBLE. Everything below sits inside the same
   @supports + prefers-reduced-motion guard the fourth batch established:
   no support, no scroll timelines, or reduced motion means the animation
   never applies and nothing is ever hidden.
   ============================================================ */

@keyframes pg-step-in{ from{ opacity:0; transform:translateY(12px) } to{ opacity:1; transform:none } }
/* the ghosted numeral drops IN as its step arrives, settling at the .16 it
   holds statically — the sequence's own beat, distinct from a block entrance */
@keyframes pg-num-in{ from{ opacity:0; transform:translateY(-10px) } to{ opacity:.16; transform:none } }

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {

    /* ---------- the list as one event ---------- */
    .pg-in-group{ view-timeline-name:--pg-group; view-timeline-axis:block }
    .pg-in-group > *{
      animation:pg-enter linear both;
      animation-timeline:--pg-group;
      animation-range:entry 4% entry 55%;
    }
    /* three waves, capped at the fourth child: the stagger has to FINISH
       inside the entry phase or a long list animates for its whole height,
       which reads as lag rather than as arrival */
    .pg-in-group > *:nth-child(2){ animation-range:entry 13% entry 64% }
    .pg-in-group > *:nth-child(3){ animation-range:entry 22% entry 73% }
    .pg-in-group > *:nth-child(n+4){ animation-range:entry 30% entry 80% }

    /* ---------- the numbered sequence ----------
       Per-step timelines, on purpose: the steps list is taller than the
       viewport, and a walkthrough is read one beat at a time. Each step is
       its own arrival, and the numeral arrives with it. */
    .pg-step{ animation:pg-step-in linear both; animation-timeline:view();
      animation-range:entry 8% cover 22% }
    .pg-step h3 .pg-n{ animation:pg-num-in linear both; animation-timeline:view();
      animation-range:entry 10% cover 26% }
  }
}

/* ============================================================
   AUTHORED DIAGRAMS — the site's first use of the data-viz layer.

   DESIGN.md has carried --mint / --magenta / --teal since the palette was
   set, declared "chart and diagram series, never chrome", and no page had
   ever used one. These two diagrams are that layer arriving.

   Both are GEOMETRY, not illustration: crisp vector shapes diagramming a
   claim the page already makes in words. Neither carries a dollar figure —
   Product Principle 5 forbids inventing one, and neither needs one.

   Both are also deliberately silent about MECHANISM. /features has six
   open product questions (handoff/10-features-open-product-questions.md);
   the time diagram shows the OUTCOME the copy already publishes — eleven
   conversations read as one signal — and says nothing about how the
   grouping happens, which is exactly open question 3.
   ============================================================ */

.pg-viz{ margin:0 }
.pg-viz svg{ display:block; width:100%; height:auto }
.pg-viz figcaption{
  margin-top:.9rem; font-family:var(--f-mono); font-size:.72rem; letter-spacing:.1em;
  text-transform:uppercase; color:var(--muted); line-height:1.5;
}
/* Diagram end labels — HTML, not SVG text.

   SVG text scales with the viewBox, so it can never hold a type step across a
   fluid column: one shared 9.5px rendered as 9.9px on the time diagram
   (viewBox 493 wide) and 14.5px on the loop (viewBox 337). Correcting each
   diagram separately then clipped the labels at 375px, because a label sized in
   user units grows past the box it is drawn in.
   As HTML they take --t-micro-label like every other mono label in the system,
   and the SVG is left holding geometry only. */
.pg-viz-ends{
  display:flex; justify-content:space-between; gap:1rem;
  margin-top:.7rem;
  /* .72rem is the Micro Label step. DESIGN.md documents it; site.css never
     declared a token for it, so every micro label in this file writes the
     literal — .pg-frame-bar .lbl and .pg-viz figcaption both do. */
  font-family:var(--f-mono); font-size:.72rem;
  letter-spacing:.14em; text-transform:uppercase; color:var(--muted);
}
.pg-viz-ends span{ line-height:1.3 }

/* ---------- A · the time collapse (/features) ----------
   Eleven mentions scattered across a time axis, threaded into one object.
   The scatter is --teal at low presence; the resolved signal is --mint,
   the only saturated thing in the frame — same grammar as the system's
   "one lit element", spent on a diagram instead of on chrome. */
.tc-axis{ stroke:var(--border); stroke-width:1 }
.tc-marks circle{ fill:var(--teal); opacity:.8 }
.tc-threads path{ fill:none; stroke:var(--teal); stroke-width:.75; opacity:.2 }
.tc-ring{ fill:none; stroke:var(--mint); stroke-width:1.25; opacity:.55 }
.tc-dot{ fill:var(--mint) }

/* ---------- B · the loop (/customers) ----------
   The infinity motif, which PRODUCT.md lists as an ownable asset to
   elevate and which appeared on no page. One continuous path, lit at the
   two ends the section is about. */
.lp-path{ fill:none; stroke:var(--teal); stroke-width:1.5; opacity:.7 }
.lp-node{ fill:var(--mint); transform-box:fill-box; transform-origin:center }

@keyframes tc-pop{ from{ opacity:0; transform:scale(.3) } to{ opacity:.8; transform:none } }
@keyframes tc-thread{ from{ stroke-dashoffset:100 } to{ stroke-dashoffset:0 } }
@keyframes tc-ring{ from{ opacity:0; transform:scale(.72) } to{ opacity:.55; transform:none } }
@keyframes tc-dot{ from{ opacity:0; transform:scale(.2) } to{ opacity:1; transform:none } }
@keyframes lp-draw{ from{ stroke-dashoffset:100 } to{ stroke-dashoffset:0 } }
@keyframes lp-lit{ from{ opacity:0; transform:scale(.35) } to{ opacity:1; transform:none } }

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {

    /* A — the scatter pops left to right in four waves, the threads draw
       toward the node, and the node resolves last. Reading order IS the
       argument: mentions first, connection second, one object third. */
    .pg-viz-time{ view-timeline-name:--tc; view-timeline-axis:block }
    .tc-marks circle{
      animation:tc-pop linear both; animation-timeline:--tc;
      transform-box:fill-box; transform-origin:center;
      animation-range:entry 6% entry 44%;
    }
    .tc-marks circle:nth-child(n+4){ animation-range:entry 12% entry 50% }
    .tc-marks circle:nth-child(n+7){ animation-range:entry 18% entry 56% }
    .tc-marks circle:nth-child(n+10){ animation-range:entry 24% entry 62% }
    .tc-threads path{
      stroke-dasharray:100; animation:tc-thread linear both; animation-timeline:--tc;
      animation-range:entry 30% entry 88%;
    }
    .tc-ring{ animation:tc-ring linear both; animation-timeline:--tc;
      transform-box:fill-box; transform-origin:center;
      animation-range:entry 52% entry 92% }
    .tc-dot{ animation:tc-dot linear both; animation-timeline:--tc;
      transform-box:fill-box; transform-origin:center;
      animation-range:entry 60% entry 96% }

    /* B — one continuous stroke drawing itself, then the two ends light in
       the order the section reads them: price it, then keep counting. */
    .pg-viz-loop{ view-timeline-name:--lp; view-timeline-axis:block }
    .lp-path{ stroke-dasharray:100; animation:lp-draw linear both;
      animation-timeline:--lp; animation-range:entry 8% cover 30% }
    .lp-node{ animation:lp-lit linear both; animation-timeline:--lp;
      animation-range:entry 34% cover 22% }
    .lp-node-b{ animation-range:entry 48% cover 36% }
  }
}

/* the diagram beside a section head is an OBJECT in column 2, the same slot a
   product screen takes. The H2 keeps spanning here — unlike the figure case —
   because the lead and the diagram share the row below it, and a two-line H2
   squeezed into one column would fight the diagram for the same eye. */
.pg-sec-head:has(.pg-viz) h2{ grid-column:1/-1 }
.cs-ends-head:has(.pg-viz) h2{ grid-column:1/-1 }