/* chain.css  ·  THE CHAIN explainer (Figma board THE CHAIN, 19:2). Pairs with chain.js.
   SOURCE OF TRUTH: 03_website/shared/. Copies in counter/ and mock/ are written by
   03_website/sync_shared.py. Edit here, then run the sync.

   Visual language (locked): flat matte colour fields, no gradients, no shadows, no glows,
   black type, geometric type (inherits the page's Poppins), headlines ride a highlight that
   follows their own line breaks. Every class is prefixed pc- so it cannot collide.        */

.pc{
  --pc-ink:#141416; --pc-muted:#6E6A68; --pc-clay:#C9775A; --pc-butter:#E3C36B;
  --pc-sage:#9BAE91; --pc-lavender:#B9A3C9; --pc-cream:#F2EDE4; --pc-bone:#F2EFE7;
  --pc-assistant:#2F6BFF; --pc-white:#FFFFFF;
  --pc-vh:100vh;
  --pc-unit:76vh;            /* scroll length of one beat (beat 4 gets two)               */
  --pc-top:0px;              /* height of a sticky page nav the stage must sit under      */
  --pc-radius:22px;
  --pc-compact-h:560px;
  position:relative; color:var(--pc-ink); font-family:inherit;
  -webkit-font-smoothing:antialiased; -webkit-tap-highlight-color:transparent;
}
@supports (height:100svh){ .pc{ --pc-vh:100svh; --pc-unit:76svh; } }
.pc *, .pc *::before, .pc *::after{ box-sizing:border-box; }
.pc p, .pc h3, .pc ol{ margin:0; padding:0; }
.pc ol{ list-style:none; }
.pc li{ margin:0; }

/* for screen readers: the whole chain as plain text, in order */
.pc-sr{ position:absolute !important; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0);
        -webkit-clip-path:inset(50%); clip-path:inset(50%); white-space:nowrap; }

/* ── the scroll form: a tall wrapper, a sticky stage ───────────────────── */
.pc--scroll{ height:calc(var(--pc-units, 9.6) * var(--pc-unit) + var(--pc-vh)); }
.pc--scroll .pc-sticky{ position:-webkit-sticky; position:sticky; top:var(--pc-top);
  height:calc(var(--pc-vh) - var(--pc-top)); overflow:hidden; }
.pc--scroll .pc-stage{ position:absolute; top:10px; right:12px; bottom:12px; left:12px; border-radius:var(--pc-radius);
  overflow:hidden; display:flex; flex-direction:column; }
.pc--scroll.is-wide .pc-stage{ top:16px; right:24px; bottom:24px; left:24px; border-radius:28px; }

/* ── the compact form: a card that steps itself ─────────────────────────── */
.pc--compact .pc-stage{ position:relative; height:var(--pc-compact-h); border-radius:var(--pc-radius);
  overflow:hidden; display:flex; flex-direction:column; cursor:pointer; touch-action:pan-y;
  -webkit-user-select:none; user-select:none; }
.pc--compact:focus-visible{ outline:none; }
.pc--compact:focus-visible .pc-stage{ outline:2px solid var(--pc-ink); outline-offset:3px; }

/* the rail: eight beats, filled by scroll (or by the clock in the compact form) */
.pc-top{ position:relative; z-index:3; display:flex; align-items:center; gap:12px; padding:16px 18px 0; flex:none; }
.pc-rail{ flex:1; display:flex; gap:5px; }
.pc-rail i{ display:block; flex:1; height:4px; border-radius:4px; background:rgba(20,20,22,.14); overflow:hidden; }
.pc-rail b{ display:block; height:100%; width:100%; background:var(--pc-ink); border-radius:4px;
  transform:scaleX(0); transform-origin:0 50%; }
.pc-pause{ flex:none; display:inline-flex; align-items:center; gap:7px; border:0; border-radius:99px;
  background:var(--pc-ink); color:var(--pc-white); font:inherit; font-size:10.5px; font-weight:600;
  letter-spacing:.12em; text-transform:uppercase; padding:7px 14px; min-height:44px; cursor:pointer; }
/* the colour wipe between beats (chain.js paintWipe): behind the beat, under the rail */
.pc-wipe{ position:absolute; top:0; right:0; bottom:0; left:0; z-index:0; pointer-events:none; visibility:hidden; }
.pc-pause .pc-arw{ font-size:11px; line-height:1; }

.pc-beats{ position:relative; flex:1; min-height:0; }

/* ── one beat ───────────────────────────────────────────────────────────── */
.pc-beat{ --pc-pr:20px; --pc-pb:22px; position:absolute; top:0; right:0; bottom:0; left:0;
  padding:16px var(--pc-pr) var(--pc-pb) 20px; display:flex; flex-direction:column; gap:14px; visibility:hidden; }
.pc-beat.is-on{ visibility:visible; }
.pc-head{ display:flex; gap:12px; align-items:baseline; font-size:11px; font-weight:600;
  letter-spacing:.14em; text-transform:uppercase; }
.pc-num{ color:var(--pc-numc, var(--pc-clay)); font-variant-numeric:tabular-nums; }
.pc-h{ font-size:clamp(23px, 6.4vw, 30px); line-height:1.24; font-weight:600; letter-spacing:-.012em; max-width:22ch; }
/* the signature: the headline rides a highlight that follows its own line breaks */
.pc-hl{ display:inline; -webkit-box-decoration-break:clone; box-decoration-break:clone;
  background:var(--pc-hlc, var(--pc-butter)); color:var(--pc-hlt, var(--pc-ink));
  padding:.1em .28em; border-radius:12px;
  box-shadow:.28em 0 0 var(--pc-hlc, var(--pc-butter)), -.28em 0 0 var(--pc-hlc, var(--pc-butter)); }
/* a wrapped highlight paints each line's background over the line above; the words sit in a positioned span, which
   paints after every background, so a g, p or y is never cut by the next line's box */
.pc-hlx{ position:relative; }
.pc-vis{ position:relative; flex:0 0 auto; display:flex; flex-direction:column; gap:12px; }
/* narrow: a beat with a band (chain.js placeBands, class has-band) sits a fixed gap under its number
   and her band takes what is left of the panel below it; a beat with nobody standing alone keeps its
   group as one block in the middle of the panel, so a short beat never strands its caption on the floor */
.pc-beat > .pc-h{ margin-top:auto; }
.pc-beat:not(.has-band) > :last-child{ margin-bottom:auto; }
.pc-beat.has-band > .pc-h{ margin-top:clamp(4px, 2.4vh, 22px); }
.pc-foot{ font-size:14px; line-height:1.45; font-weight:500; max-width:36ch; margin-top:4px; }
.pc-foot b{ font-weight:600; }
.pc-small{ font-size:12.5px; line-height:1.45; color:var(--pc-muted); }
.pc-small.pc-cap{ color:var(--pc-ink); }
.pc-extop{ margin-bottom:10px; }

.pc-card{ background:var(--pc-cardc, var(--pc-bone)); border-radius:18px; padding:16px 18px; }
.pc-card p + p{ margin-top:4px; }
.pc-row{ display:flex; align-items:center; gap:14px; }
.pc-grow{ flex:1 1 auto; min-width:0; }

/* her host, and the assistant's. Square boxes; she stands on the bottom edge. */
.pc-char{ position:relative; flex:none; width:84px; height:84px; }
.pc-bot{ position:relative; flex:none; width:64px; height:64px; }
.pc-botcol{ flex:none; display:flex; flex-direction:column; align-items:center; gap:8px; }
.pc-label{ font-size:9.5px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; text-align:center; }

.pc-quote{ font-size:16px; line-height:1.45; font-weight:500; }
.pc-heard{ gap:12px; }
.pc-heard .pc-label{ text-align:left; }

/* beat 2 */
.pc-doors{ display:grid; grid-template-columns:1fr; gap:10px; }
.pc-door p:first-child{ font-weight:600; font-size:15px; margin-bottom:4px; }
.pc-door p{ font-size:13.5px; line-height:1.4; }
.pc-door--app{ --pc-cardc:var(--pc-cream); color:var(--pc-ink); }
.pc-door--counter{ --pc-cardc:var(--pc-clay); }
.pc-door--counter .pc-strong{ font-weight:600; margin-top:8px; }
.pc-path{ flex:1; height:2px; background:rgba(20,20,22,.18); border-radius:2px; }

/* beat 3: the board */
.pc-board .pc-line{ display:flex; align-items:center; gap:10px; padding:10px 0; border-bottom:1px solid rgba(20,20,22,.1); font-size:14.5px; font-weight:500; }
.pc-board .pc-line:last-child{ border-bottom:0; padding-bottom:2px; }
.pc-board .pc-line:first-child{ padding-top:2px; }
.pc-line .pc-name{ flex:1; min-width:0; }
.pc-line .pc-price{ font-variant-numeric:tabular-nums; font-weight:600; }
.pc-line.is-out .pc-name, .pc-line.is-out .pc-price{ color:var(--pc-muted); }
.pc-tag{ flex:none; font-style:normal; font-size:9px; font-weight:700; letter-spacing:.11em; text-transform:uppercase;
  border-radius:5px; padding:3px 7px; background:var(--pc-sage); color:var(--pc-ink); }
.pc-tag--out{ background:var(--pc-clay); color:var(--pc-white); }

/* beat 4: the whole product, so it gets the most room */
.pc-feed{ display:flex; align-items:center; gap:10px; background:var(--pc-cream); border-radius:12px;
  padding:9px 12px; font-size:13px; color:var(--pc-muted); font-weight:500; }
.pc-feed .pc-feedk{ flex:none; white-space:nowrap; font-size:9.5px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--pc-ink); }
.pc-feed .pc-stop{ margin-left:auto; flex:none; width:10px; height:10px; border-radius:2px; background:var(--pc-muted); }
/* beat 4: the chip is never narrower than its own words (min-content), so nothing runs off it;
   she is the one who gives way, shrinking towards 72px, and the row reaches the panel's right edge
   so she is cropped by it rather than laid over the chip. She never paints outside her host. */
.pc-b4 .pc-feedrow{ display:flex; align-items:flex-end; gap:12px; margin-right:calc(-1 * var(--pc-pr)); }
.pc-b4 .pc-feedrow .pc-feed{ flex:1 1 auto; min-width:-webkit-min-content; min-width:min-content; margin-bottom:6px; }
.pc-b4 .pc-feedrow .pc-feed > span:not(.pc-feedk){ min-width:0; }
.pc-b4 .pc-char{ width:118px; height:118px; margin-bottom:-2px; }
.pc-b4 .pc-feedrow .pc-char{ flex:0 1 auto; min-width:72px; }
.pc-b4.has-band .pc-feedrow{ margin-right:0; }
.pc-attr + .pc-swap{ margin-top:2px; }
.pc-said{ font-size:clamp(18px, 4.9vw, 22px); line-height:1.42; font-weight:600; letter-spacing:-.006em; }
.pc-said .pc-w{ opacity:.55; }
.pc-attr{ font-size:12.5px; font-weight:600; color:#5C4810; }
.pc-swap{ display:flex; justify-content:space-between; align-items:baseline; gap:12px; padding-top:12px;
  border-top:1px solid rgba(20,20,22,.18); font-size:16px; font-weight:600; }
.pc-swap b{ font-variant-numeric:tabular-nums; }

/* beat 5 */
.pc-carry{ position:relative; display:flex; align-items:center; gap:10px; }
.pc-carry .pc-char{ width:64px; height:64px; }
.pc-token{ position:absolute; left:0; top:0; width:30px; height:16px; border-radius:99px; background:var(--pc-butter);
  pointer-events:none; opacity:0; }
.pc-bubble{ --pc-cardc:var(--pc-bone); }
.pc-bubble .pc-quote{ font-size:15.5px; }
/* beat 5's reason: the host's sentence as its own paragraph in the AI assistant's bubble (2026-10-04), same type */
.pc-bubble .pc-why{ margin-top:8px; }
.pc-yes{ display:inline-flex; align-items:center; gap:9px; margin-top:12px; border:0; border-radius:99px;
  background:var(--pc-ink); color:var(--pc-white); font:inherit; font-size:12px; font-weight:600;
  letter-spacing:.1em; text-transform:uppercase; padding:10px 18px; }

/* beat 6: the ticket prints */
.pc-slot{ overflow:hidden; border-radius:18px; flex:1 1 auto; min-width:0; }
.pc-ticket{ --pc-cardc:var(--pc-white); }
.pc-ticket .pc-tkhead{ font-size:10px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; margin-bottom:10px; }
.pc-ticket .pc-tkline{ font-size:14.5px; font-weight:500; line-height:1.35; padding:3px 0; }
.pc-ticket .pc-tktotal{ margin-top:10px; padding-top:10px; border-top:1px solid rgba(20,20,22,.14);
  font-size:18px; font-weight:700; font-variant-numeric:tabular-nums; }

/* beat 7 */
.pc-keep{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.pc-keep .pc-card{ padding:14px 14px 16px; }
.pc-keep .pc-k1{ font-size:12px; font-weight:600; line-height:1.3; }
.pc-keep .pc-k2{ font-size:30px; font-weight:700; letter-spacing:-.02em; margin-top:6px; font-variant-numeric:tabular-nums; }
.pc-keep .pc-k3{ font-size:12px; line-height:1.35; margin-top:4px; }
.pc-keep--app{ --pc-cardc:var(--pc-cream); color:var(--pc-ink); }
.pc-keep--counter{ --pc-cardc:var(--pc-sage); }
.pc-ex{ display:inline-block; font-size:9.5px; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
  background:var(--pc-ink); color:var(--pc-white); border-radius:5px; padding:3px 7px; margin-right:8px; vertical-align:1px; }

/* beat 8 */
.pc-voice{ font-size:15px; line-height:1.5; color:var(--pc-ink); max-width:40ch; }
.pc-box{ --pc-cardc:var(--pc-clay); position:relative; display:flex; align-items:flex-end; gap:8px; padding:18px 0 0 18px;
  overflow:hidden; }
.pc-box .pc-boxcopy{ flex:1 1 auto; min-width:0; padding-bottom:18px; }
.pc-box .pc-b1t{ font-size:19px; font-weight:700; letter-spacing:-.01em; line-height:1.25; }
.pc-box .pc-b2t{ font-size:13.5px; margin-top:6px; line-height:1.4; }
.pc-box .pc-char{ width:96px; height:96px; margin-right:-14px; margin-bottom:-12px; }

/* ── wide: the chain is at least 720px across ───────────────────────────────
   Two columns: the number, the headline and the caption on the left; the picture on the
   right. The whole group is centred in the panel, and everything is set larger: on a
   desktop the stage is a whole screen of colour.                                         */
.pc.is-wide .pc-beat{ display:grid; grid-template-columns:minmax(0,5fr) minmax(0,6fr);
  grid-template-rows:auto auto auto; align-content:center; column-gap:clamp(40px,5vw,96px); row-gap:20px;
  padding:48px clamp(44px,5vw,88px) 56px; max-width:1320px; margin:0 auto; }
.pc.is-wide .pc-beat > .pc-h, .pc.is-wide .pc-beat > :last-child{ margin-top:0; margin-bottom:0; }
.pc.is-wide .pc-head{ grid-column:1; grid-row:1; font-size:12.5px; }
.pc.is-wide .pc-h{ grid-column:1; grid-row:2; font-size:clamp(32px, 3.3vw, 50px); }
.pc.is-wide .pc-foot{ grid-column:1; grid-row:3; align-self:start; font-size:17px; margin-top:6px; }
.pc.is-wide .pc-vis{ grid-column:2; grid-row:1 / span 3; align-self:center; gap:18px; }
.pc.is-wide .pc-card{ padding:22px 26px; border-radius:22px; }
.pc.is-wide .pc-quote{ font-size:20px; }
.pc.is-wide .pc-small{ font-size:15px; }
.pc.is-wide .pc-label{ font-size:11px; }
.pc.is-wide .pc-char{ width:150px; height:150px; }
.pc.is-wide .pc-bot{ width:104px; height:104px; }
.pc.is-wide .pc-doors{ grid-template-columns:1fr 1fr; gap:14px; }
.pc.is-wide .pc-door p{ font-size:16px; }
.pc.is-wide .pc-door p:first-child{ font-size:19px; }
.pc.is-wide .pc-board .pc-line{ font-size:18px; padding:14px 0; }
.pc.is-wide .pc-tag{ font-size:10.5px; padding:4px 9px; }
.pc.is-wide .pc-feed{ font-size:15px; padding:12px 16px; }
.pc.is-wide .pc-feed .pc-feedk{ font-size:11px; }
.pc.is-wide .pc-b4 .pc-char{ width:210px; height:210px; }
.pc.is-wide .pc-beat{ --pc-pr:clamp(44px,5vw,88px); }
.pc.is-wide .pc-said{ font-size:clamp(24px, 2.2vw, 31px); }
.pc.is-wide .pc-attr{ font-size:15px; }
.pc.is-wide .pc-swap{ font-size:20px; padding-top:16px; }
.pc.is-wide .pc-carry .pc-char{ width:110px; height:110px; }
.pc.is-wide .pc-token{ width:38px; height:20px; }
.pc.is-wide .pc-bubble .pc-quote{ font-size:20px; }
.pc.is-wide .pc-yes{ font-size:13.5px; padding:12px 22px; }
.pc.is-wide .pc-ticket .pc-tkhead{ font-size:12px; }
.pc.is-wide .pc-ticket .pc-tkline{ font-size:18px; padding:5px 0; }
.pc.is-wide .pc-ticket .pc-tktotal{ font-size:24px; }
.pc.is-wide .pc-keep{ gap:14px; }
.pc.is-wide .pc-keep .pc-card{ padding:22px 22px 24px; }
.pc.is-wide .pc-keep .pc-k1{ font-size:15px; }
.pc.is-wide .pc-keep .pc-k2{ font-size:clamp(40px, 4vw, 58px); }
.pc.is-wide .pc-keep .pc-k3{ font-size:15px; }
.pc.is-wide .pc-voice{ font-size:19px; }
.pc.is-wide .pc-box{ padding:28px 0 0 28px; }
.pc.is-wide .pc-box .pc-boxcopy{ padding-bottom:28px; }
.pc.is-wide .pc-box .pc-b1t{ font-size:28px; }
.pc.is-wide .pc-box .pc-b2t{ font-size:17px; }
.pc.is-wide .pc-box .pc-char{ width:170px; height:170px; margin-right:-20px; margin-bottom:-16px; }
.pc.is-wide .pc-rail{ max-width:560px; }
.pc.is-wide .pc-top{ padding:24px clamp(44px,5vw,88px) 0; max-width:1320px; margin:0 auto; width:100%; }

/* scroll, narrow, with room: the characters and her sentence take more of the panel */
.pc--scroll:not(.is-wide):not(.is-tight) .pc-char{ width:100px; height:100px; }
.pc--scroll:not(.is-wide):not(.is-tight) .pc-bot{ width:72px; height:72px; }
.pc--scroll:not(.is-wide):not(.is-tight) .pc-b4 .pc-char{ width:136px; height:136px; }
.pc--scroll:not(.is-wide):not(.is-tight) .pc-carry .pc-char{ width:76px; height:76px; }
.pc--scroll:not(.is-wide):not(.is-tight) .pc-box .pc-char{ width:112px; height:112px; }

/* compact card and reduced-motion strip (pc--small), narrow, and a scroll stage too short
   for its tallest beat (is-tight): type steps down */
.pc--small:not(.is-wide) .pc-beat, .pc.is-tight:not(.is-wide) .pc-beat{ --pc-pr:18px; --pc-pb:18px; padding:12px 18px 18px; gap:11px; }
.pc--small:not(.is-wide) .pc-h, .pc.is-tight:not(.is-wide) .pc-h{ font-size:21px; }
.pc--small:not(.is-wide) .pc-said, .pc.is-tight:not(.is-wide) .pc-said{ font-size:17px; }
.pc--small:not(.is-wide) .pc-b4 .pc-char, .pc.is-tight:not(.is-wide) .pc-b4 .pc-char{ width:96px; height:96px; }
.pc--small:not(.is-wide) .pc-quote, .pc.is-tight:not(.is-wide) .pc-quote{ font-size:14.5px; }
.pc--small:not(.is-wide) .pc-foot, .pc.is-tight:not(.is-wide) .pc-foot{ font-size:13px; }
.pc--small:not(.is-wide) .pc-keep .pc-k2, .pc.is-tight:not(.is-wide) .pc-keep .pc-k2{ font-size:26px; }
.pc.is-tight.is-wide .pc-h{ font-size:clamp(26px, 2.4vw, 34px); }
.pc.is-tight.is-wide .pc-beat{ padding-top:24px; padding-bottom:28px; }
/* a stage so short that is-tight still cuts a beat's words (chain.js fit(): 375x548, 320x568): one more step, her
   band put away (it is the first thing cropped anyway), then the static list if the words still do not fit */
.pc.is-tighter:not(.is-wide) .pc-beat{ padding:10px 16px 14px; gap:8px; }
.pc.is-tighter:not(.is-wide) .pc-beat > .pc-band{ display:none; }
.pc.is-tighter:not(.is-wide) .pc-h{ font-size:19px; }
.pc.is-tighter:not(.is-wide) .pc-said{ font-size:15.5px; }
.pc.is-tighter:not(.is-wide) .pc-quote{ font-size:13.5px; }
.pc.is-tighter:not(.is-wide) .pc-foot{ font-size:12.5px; }
.pc.is-tighter:not(.is-wide) .pc-board .pc-line{ padding:7px 0; font-size:13.5px; }

/* ── reduced motion: a static sequence ────────────────────────────────────── */
.pc--static .pc-list{ display:flex; flex-direction:column; gap:14px; }
.pc--list .pc-list{ padding:0 12px; }
.pc--list.is-wide .pc-list{ padding:0 24px; }
.pc--static .pc-beat{ position:relative; top:auto; right:auto; bottom:auto; left:auto; visibility:visible; border-radius:var(--pc-radius);
  overflow:hidden; padding-top:20px; }
.pc--static.is-wide .pc-beat{ min-height:420px; }
.pc--static .pc-said .pc-w{ opacity:1; }
/* the compact form keeps its footprint: a strip you swipe, nothing moves on its own */
.pc--strip .pc-list{ flex-direction:row; overflow-x:auto; -webkit-overflow-scrolling:touch;
  scroll-snap-type:x mandatory; gap:10px; padding-bottom:6px; scrollbar-width:none; }
.pc--strip .pc-list::-webkit-scrollbar{ display:none; }
.pc--strip .pc-beat{ flex:0 0 88%; scroll-snap-align:start; min-height:var(--pc-compact-h); }
.pc--strip.is-wide .pc-beat{ flex-basis:100%; }

/* ── narrow: her band along the bottom edge (chain.js placeBands) ───────────────
   In flow, after everything else, taking what is left of the panel: it can only ever sit
   below the words, so she cannot overlap them. It reaches the panel's right and bottom
   edges, and she stands in it oversized and cropped by them.                            */
.pc-band{ position:relative; flex:1 1 auto; min-height:104px; display:flex; align-items:flex-end;
  margin:0 calc(-1 * var(--pc-pr)) calc(-1 * var(--pc-pb)) 0; }
.pc:not(.is-wide) .pc-beat > .pc-band > .pc-char{ position:absolute; right:-7%; bottom:-9%; height:109%; width:46%; max-width:64%; margin:0; }
@supports (aspect-ratio:1 / 1){ .pc:not(.is-wide) .pc-beat > .pc-band > .pc-char{ width:auto; aspect-ratio:1 / 1; } }
.pc-band--row{ min-height:0; }
.pc-band > .pc-row{ padding:0 var(--pc-pr) var(--pc-pb) 0; align-items:flex-end; }
.pc:not(.is-wide) .pc-band > .pc-row .pc-bot{ width:104px; height:104px; }
.pc--small:not(.is-wide) .pc-band > .pc-row .pc-bot, .pc.is-tight:not(.is-wide) .pc-band > .pc-row .pc-bot{ width:80px; height:80px; }
.pc-band > .pc-row .pc-label{ padding-bottom:10px; }