/* Feature pages, after linear.app/intake and /ai. They reuse styles.css (nav, hero type, frames, chapters, figures,
   closing, footer) and add: the eyebrow, the hero drawing, chapter labels, cards with their own product view, the
   one-line feature rows, and the "More of Miles" links. */

/* ---------- Hero ---------- */
.fp-hero{padding:clamp(88px,11vw,152px) 0 40px}
.fp-eyebrow{display:inline-flex;align-items:center;gap:10px;margin-bottom:28px;color:var(--muted);font-size:15px;letter-spacing:-.011em}
.fp-eyebrow .ic{width:18px;height:18px;--icon-sw:1.9;color:var(--soft)}
.fp-hero .h-hero{max-width:none}
.fp-hero .h-hero .ln{display:block}
.fp-hero .hero-row{align-items:center}
.fp-hero .hero-row .btn{flex:none}
.js .fp-eyebrow{opacity:0;filter:blur(6px);transform:translateY(10px);animation:rise .9s var(--ease) forwards}

/* The hero drawing: wide, centred, its floor fading out at the edges. */
.fp-stage{position:relative;padding:24px 0 64px}
.fp-art{display:block;-webkit-mask-image:radial-gradient(62% 72% at 50% 50%,#000 58%,transparent 100%);mask-image:radial-gradient(62% 72% at 50% 50%,#000 58%,transparent 100%)}
.fp-art svg{width:min(1080px,100%);max-height:620px;margin:0 auto}
.fp-fig{position:absolute;left:20px;top:24px}
.fp-stage::after{content:"";position:absolute;z-index:-1;left:15%;right:15%;top:30%;bottom:10%;background:radial-gradient(50% 50% at 50% 60%,rgba(124,134,239,.09),transparent 70%);filter:blur(20px);pointer-events:none}

.fp-figs{padding-top:40px}

/* ---------- Chapters ---------- */
.fp-label{display:flex;align-items:center;gap:12px;margin-bottom:24px;color:var(--soft);font-size:15px;letter-spacing:-.011em}
.fp-label .mono{font-size:12px;letter-spacing:.06em;color:var(--faint)}
.fp-ch .ch-side{padding-top:40px}
.fp-ch .ch-stage{margin-top:64px}
/* A float card sits over the bottom right of the frame, like Linear's agent window over the board. */
.ch-stage.has-float .float-card{left:auto;right:3%;bottom:-36px}
.float-card.fp-ask{width:min(360px,34%)}

/* Cards: their own product view in a quiet panel, then a title and one line. */
.fp-cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:88px}
.fp-cards.one{grid-template-columns:minmax(0,1fr)}
.fp-card h3{margin-top:22px;font-weight:510;font-size:16px;line-height:24px;letter-spacing:-.011em;color:var(--text)}
.fp-card p{margin-top:4px;max-width:44ch;color:var(--muted);font-size:15px;line-height:24px;letter-spacing:-.011em}
.fp-vis{position:relative;display:grid;place-items:center;aspect-ratio:16/10;padding:clamp(20px,3.4vw,40px);border-radius:16px;background:radial-gradient(120% 100% at 50% 0%,rgba(255,255,255,.035),transparent 60%),var(--panel);box-shadow:inset 0 0 0 1px var(--line);overflow:hidden}
.fp-cards.one .fp-vis{aspect-ratio:32/9}
.fp-vis{container-type:size}
.fp-vis>:not(.frame){width:100%}
.fp-vis.art .fig-art svg{width:min(300px,78%);margin:0 auto}
.fp-vis .frame.boxed{width:min(100cqw,calc(100cqh * var(--arn)))}
.fp-vis .float-card,.fp-vis .float-card.fp-ask{position:relative;inset:auto;width:min(360px,100%);margin:0 auto}

/* One-line features: an icon, a title, a sentence, with hairlines between. */
.fp-grid{display:grid;grid-template-columns:repeat(4,1fr);margin-top:72px;padding-top:32px;border-top:1px solid var(--line)}
.fp-f{padding:0 28px;box-shadow:inset 1px 0 0 var(--line)}
.fp-f:first-child{padding-left:0;box-shadow:none}
.fp-f .ic{width:18px;height:18px;--icon-sw:1.8;color:var(--muted)}
.fp-f h3{margin-top:18px;font-weight:510;font-size:15px;line-height:22px;letter-spacing:-.011em;color:var(--soft)}
.fp-f p{margin-top:4px;color:var(--muted);font-size:14px;line-height:21px;letter-spacing:-.006em}
.fp-grid.four{row-gap:48px;border-top:0;padding-top:0}
.fp-grid.four .fp-f:nth-child(4n+1){padding-left:0;box-shadow:none}
.fp-extra .fp-grid{margin-top:80px}

/* ---------- More of Miles ---------- */
.fp-more{border-top:1px solid var(--line);padding:clamp(96px,9.5vw,136px) 0 0}
.fp-more-h{font-weight:510;font-size:15px;color:var(--muted);letter-spacing:-.011em}
/* The row of pages, after linear.app/plan: no boxes, columns split by hairlines, a title at the top and the page's
   name at the bottom. The page you're on is quiet; the others brighten and nudge their arrow on hover. */
.fp-more-g{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));margin-top:40px}
.fp-mc{display:flex;flex-direction:column;min-height:168px;padding:4px 28px 0;box-shadow:inset 1px 0 0 var(--line)}
.fp-mc:first-child{padding-left:0;box-shadow:none}
.fp-mc .mono{display:none}
.fp-mc b{font-weight:510;font-size:17px;line-height:24px;letter-spacing:-.012em;color:var(--text);text-wrap:balance;transition:color .15s ease}
.fp-mc-l{margin-top:auto;padding-top:28px;color:var(--muted);font-size:14px;transition:color .15s ease}
.fp-mc-l span{display:inline-block;margin-left:2px;transition:transform .2s var(--ease)}
.fp-mc[aria-current]{pointer-events:none}
.fp-mc[aria-current] b{color:var(--faint)}
.fp-mc[aria-current] .fp-mc-l{color:var(--faint)}
.fp-mc[aria-current] .fp-mc-l::after{content:" · you’re here"}
.fp-mc[aria-current] .fp-mc-l span{display:none}
@media (hover:hover) and (pointer:fine){.fp-mc:not([aria-current]):hover .fp-mc-l{color:var(--text)}.fp-mc:not([aria-current]):hover .fp-mc-l span{transform:translateX(3px)}}

.fp .closing{padding:180px 0 200px}
.fp .h-close{text-wrap:balance}
.nav [aria-current="page"]{color:var(--text)}
.mega .mi[aria-current="page"]{background:var(--hover)}
.sheet a[aria-current="page"]{color:var(--text)}

@media (prefers-reduced-motion:reduce){
  .js .fp-eyebrow{opacity:1;filter:none;transform:none;animation:none}
  .fp-mc,.fp-mc-l span{transition:none}
}

/* ---------- Tablet ---------- */
@media (max-width:1060px){
  .fp-grid{grid-template-columns:1fr 1fr;row-gap:40px}
  .fp-f:nth-child(odd){padding-left:0;box-shadow:none}
  .fp-grid.four .fp-f:nth-child(odd){padding-left:0;box-shadow:none}
  .fp-grid.four .fp-f:nth-child(even){padding-left:28px;box-shadow:inset 1px 0 0 var(--line)}
  .fp-more-g{grid-template-columns:1fr 1fr}
  .fp-mc:nth-child(odd){box-shadow:none;padding-left:0}
  .fp-mc:nth-child(n+3){border-top:1px solid var(--line)}
  .fp-ch .ch-side{padding-top:0}
  .float-card.fp-ask{width:min(340px,44%)}
}
@media (max-width:900px){.fp-cards{grid-template-columns:minmax(0,1fr);gap:48px}.fp-cards .fp-vis{aspect-ratio:16/9}}
/* ---------- Phone ---------- */
@media (max-width:760px){
  .fp-hero{padding:64px 0 32px}
  .fp-eyebrow{margin-bottom:20px}
  .fp-hero .hero-row{align-items:flex-start}
  .fp-stage{padding:40px 0 24px}
  .fp-art{-webkit-mask-image:radial-gradient(80% 70% at 50% 50%,#000 60%,transparent 100%);mask-image:radial-gradient(80% 70% at 50% 50%,#000 60%,transparent 100%)}
  .fp-fig{top:8px;left:20px}
  .fp-ch .ch-stage{margin-top:40px}
  .ch-stage.has-float .float-card,.float-card.fp-ask{position:relative;inset:auto;width:auto;margin:-24px 12px 0}
  .fp-cards{grid-template-columns:minmax(0,1fr);gap:40px;margin-top:56px}
  .fp-vis,.fp-cards.one .fp-vis{container-type:normal;aspect-ratio:auto;padding:12px;border-radius:12px}
  .fp-vis .frame.boxed{width:100%}
  .fp-vis.art{padding:32px 12px}
  .fp-vis .float-card{margin:8px auto}
  .fp-grid{grid-template-columns:1fr;row-gap:28px;margin-top:48px}
  .fp-f,.fp-grid.four .fp-f:nth-child(even){padding:0;box-shadow:none}
  .fp-more-g{grid-template-columns:1fr}
  .fp-mc,.fp-mc:nth-child(odd){min-height:0;box-shadow:none;padding:24px 0;border-top:1px solid var(--line)}
  .fp-mc:first-child{border-top:0}
  .fp .closing{padding:120px 0 140px}
}

/* About and Docs, until they're written: a quiet "Coming soon" beside the eyebrow, and what each will cover. */
.fp-soon{display:inline-flex;align-items:center;gap:7px;height:26px;margin-left:6px;padding:0 11px;border-radius:999px;box-shadow:inset 0 0 0 1px var(--line-2);color:var(--soft);font-size:12.5px}
.fp-soon i{width:6px;height:6px;border-radius:50%;background:#f0b44c;box-shadow:0 0 0 3px rgba(240,180,76,.18)}
.fp-next{padding:clamp(56px,6vw,88px) 0 clamp(96px,9.5vw,136px)}
.fp-next .fp-grid{margin-top:28px}

/* =================================================================================================================
   Security. An index of the page for reviewers; who can see what, by role; and the audit chain you can break.
   ================================================================================================================= */

/* Who can see what: one table, rows of data, a column per role. A tick is plain; the lock and the cross are the
   page's accent, because they're the guarantees. The row nobody can see is lit faintly. */
.acc{margin-top:64px}
.acc-t{width:100%;table-layout:fixed;border-collapse:separate;border-spacing:0;border-radius:16px;background:radial-gradient(120% 140% at 0% 0%,rgba(124,134,239,.05),transparent 50%),var(--panel);box-shadow:inset 0 0 0 1px var(--line);overflow:hidden;font-variant-numeric:tabular-nums}
.acc-t th,.acc-t td{padding:18px 24px;text-align:left;vertical-align:middle}
.acc-t thead th{padding-block:16px;font:500 13px/1.3 var(--font);color:var(--muted);box-shadow:inset 0 -1px 0 var(--line)}
.acc-t thead th:first-child{width:38%}
.acc-t tbody th{font-weight:400}
.acc-t tbody th b{display:block;font-weight:510;font-size:15px;line-height:22px;letter-spacing:-.011em;color:var(--text)}
.acc-t tbody th span{display:block;margin-top:2px;font-size:13px;line-height:19px;color:var(--muted)}
.acc-t tbody tr+tr>*{box-shadow:inset 0 1px 0 var(--line)}
.acc-t tbody tr>*{transition:background-color .15s ease}
@media (hover:hover) and (pointer:fine){.acc-t tbody tr:hover>*{background-color:rgba(255,255,255,.022)}}
.acc-t td{font-size:14px;line-height:20px;color:var(--soft)}
.acc-t td .ic,.acc-t td>i{display:inline-block;width:15px;height:15px;margin-right:9px;vertical-align:-3px;--icon-sw:2.1;flex:none}
.acc-yes .ic{color:var(--soft)}
.acc-lock .ic,.acc-never .ic{color:var(--accent)}
.acc-part,.acc-no{color:var(--muted)!important}
.acc-half{border-radius:50%;box-shadow:inset 0 0 0 1.5px var(--muted);background:linear-gradient(90deg,var(--muted) 50%,transparent 50%);transform:scale(.8)}
.acc-dash{position:relative}
.acc-dash::after{content:"";position:absolute;left:3px;right:3px;top:50%;height:1.5px;border-radius:1px;background:var(--faint)}
.acc-t tr:has(.acc-never){background:linear-gradient(90deg,rgba(124,134,239,.08),rgba(124,134,239,.015))}
@media (max-width:760px){
  /* Stacked: each row is a block, each role a line with its name. The roles keep their table semantics. */
  .acc{margin-top:40px}
  .acc-t,.acc-t tbody,.acc-t tr,.acc-t th,.acc-t td{display:block}
  .acc-t thead{display:none}
  .acc-t tbody th{padding:18px 18px 8px}
  .acc-t td{display:flex;align-items:center;padding:7px 18px;font-size:13.5px}
  .acc-t td::before{content:attr(data-col);flex:1;color:var(--muted);font-size:13px}
  .acc-t td:last-child{padding-bottom:18px}
  .acc-t tbody tr+tr>*{box-shadow:none}
  .acc-t tbody tr+tr{box-shadow:inset 0 1px 0 var(--line)}
  .acc-t td .ic,.acc-t td>i{order:1;margin:0 0 0 8px}
}

/* The audit chain: four events, each holding the hash of the one before (the hairline between them). Change event
   42 and it turns amber, its hash changes, and the break runs down the chain, one event at a time; putting it back
   is instant. Colours only, so it reads the same under reduced motion. main.js › wireTamper. */
.tamper{--bad:#eb5757;width:100%;max-width:470px;margin:0 auto;display:grid;gap:16px;text-align:left}
.tp-chain{list-style:none;margin:0;padding:0}
.tp-e{position:relative;display:grid;grid-template-columns:22px minmax(0,1fr) auto;align-items:center;gap:12px;padding:10px 14px;border-radius:10px;background:var(--card);box-shadow:inset 0 0 0 1px var(--line);transition:background-color .2s ease,box-shadow .2s ease}
.tp-e+.tp-e{margin-top:10px}
.tp-e+.tp-e::before{content:"";position:absolute;left:25px;bottom:100%;width:1px;height:10px;background:var(--line-2);transition:background-color .2s ease}
.tp-n{font-size:11px;color:var(--faint)}
.tp-t{min-width:0}
.tp-t>b{display:block;font-weight:510;font-size:13px;line-height:18px;color:var(--soft)}
.tp-t>span{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12px;line-height:17px;color:var(--muted)}
.tp-t [data-amt]{font-weight:500;color:var(--soft);transition:color .2s ease}
.tp-h{display:inline-flex;align-items:center;gap:7px;font-size:11px;color:var(--muted);transition:color .2s ease}
.tp-h i{width:6px;height:6px;border-radius:50%;background:var(--ok);transition:background-color .2s ease}
.tp-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:34px}
.tamper .tp-st{display:inline-flex;align-items:center;gap:9px;min-width:0;margin:0;color:var(--soft);font-size:13px;line-height:18px}
.tp-st i{flex:none;width:7px;height:7px;border-radius:50%;background:var(--ok);box-shadow:0 0 0 3px rgba(76,183,130,.16);transition:background-color .2s ease,box-shadow .2s ease}
.tp-btn{flex:none;height:32px;padding:0 14px;border-radius:999px;background:rgba(255,255,255,.06);box-shadow:inset 0 0 0 1px var(--line-2);color:var(--text);font:500 13px var(--font);transition:background-color .15s ease,scale .16s var(--ease)}
.tp-btn:active{scale:.97}
.tp-btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
@media (hover:hover) and (pointer:fine){.tp-btn:hover{background:rgba(255,255,255,.1)}}
/* Broken: 42 is edited, and each event after it stops matching, 90ms after the one before. */
.broken .tp-e:nth-child(2){box-shadow:inset 0 0 0 1px rgba(242,201,76,.4)}
.broken .tp-e:nth-child(2) [data-amt],.broken .tp-e:nth-child(2) .tp-h{color:var(--warn)}
.broken .tp-e:nth-child(2) .tp-h i{background:var(--warn)}
.broken .tp-e:nth-child(n+3){background:rgba(235,87,87,.05);box-shadow:inset 0 0 0 1px rgba(235,87,87,.38)}
.broken .tp-e:nth-child(n+3)::before{background:var(--bad)}
.broken .tp-e:nth-child(n+3) .tp-h{color:var(--bad);text-decoration:line-through}
.broken .tp-e:nth-child(n+3) .tp-h i{background:var(--bad)}
.broken .tp-e,.broken .tp-e::before,.broken .tp-e *{transition-delay:calc((var(--i) - 1) * 90ms)}
.broken .tp-st i{background:var(--bad);box-shadow:0 0 0 3px rgba(235,87,87,.16)}
@media (prefers-reduced-motion:reduce){.broken .tp-e,.broken .tp-e::before,.broken .tp-e *{transition-delay:0s}}
.fp-vis:has(.tamper){aspect-ratio:auto;container-type:normal}
@media (max-width:760px){.tp-e{gap:10px;padding:9px 12px}.tp-e+.tp-e::before{left:23px}.tp-bar{flex-wrap:wrap}}


/* =================================================================================================================
   Rhythm. Each page has its own colour (pages.mjs › accent): it lights the drawings, the numbers, a glow behind the
   hero and a short mark on each chapter's rule, so the five pages are told apart at a glance. Chapters alternate
   between the wide layout and the split one, and a statement line breaks the page in the middle.
   ================================================================================================================= */
.fp{--accent:var(--pa,#7c86ef)}
.fp-eyebrow .ic{color:var(--pa)}
.fp-label .mono{color:var(--pa)}
.fp-stage{isolation:isolate}
.fp-stage::before{content:"";position:absolute;z-index:-1;inset:0 8% -10%;background:radial-gradient(46% 42% at 50% 56%,color-mix(in oklab,var(--pa) 16%,transparent),transparent 72%);pointer-events:none}
.fp .chapter{position:relative}
.fp .chapter::before{content:"";position:absolute;top:-1px;left:max(var(--gut),(100% - var(--w)) / 2);width:56px;height:1px;background:var(--pa);opacity:.9}

/* The split chapter: the words in a column that stays in view, the product running off the right edge. */
.fp-split{overflow-x:clip}
.fp-split-g{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(40px,5vw,88px);align-items:start}
.fp-split-t{position:sticky;top:112px}
.fp-split-t .ch-sum{margin-top:28px;font-size:clamp(17px,1.4vw,20px);max-width:28em}
.fp-split-v{margin-right:calc(-1 * max(var(--gut),(100vw - var(--w)) / 2));padding-top:6px}
.fp-split .ch-stage{margin-top:0}
.fp-split .ch-stage .frame,.fp-split .ch-stage .frame.crop{width:100%;margin-left:0}
.fp-list{list-style:none;margin:40px 0 0;padding:0}
.fp-list li{display:grid;grid-template-columns:18px minmax(0,1fr);gap:14px;padding:16px 0;box-shadow:inset 0 1px 0 var(--line)}
.fp-list .ic{width:18px;height:18px;margin-top:2px;color:var(--pa);--icon-sw:1.8}
.fp-list h3{font-weight:510;font-size:15px;line-height:22px;letter-spacing:-.011em;color:var(--soft)}
.fp-list p{margin-top:2px;color:var(--muted);font-size:14px;line-height:21px;letter-spacing:-.006em}
.fp-split .fp-cards{margin-top:104px}

/* The statement midway down. */
.fp-say{padding:clamp(104px,10vw,152px) 0;border-top:1px solid var(--line)}
.fp-say .h-statement{max-width:23em}
/* The lead sentence warms from white into the page's colour. */
.say-lead{background:linear-gradient(90deg,var(--text) 30%,color-mix(in oklab,var(--pa) 70%,var(--text)));-webkit-background-clip:text;background-clip:text;color:transparent}

@media (max-width:900px){
  .fp-split-g{grid-template-columns:minmax(0,1fr);gap:40px}
  .fp-split-t{position:static}
  .fp-split-v{margin-right:0;padding-top:0}
  .fp-split .fp-cards{margin-top:56px}
  .fp-list{margin-top:28px}
}


/* The security review as a questionnaire. */
.qa{margin-top:56px;border-top:1px solid var(--line)}
.qa-r{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr) 24px;gap:24px;align-items:center;padding:18px 0;border-bottom:1px solid var(--line);transition:background-color .15s ease}
.qa dt{display:flex;align-items:center;gap:12px;font-weight:510;font-size:15px;line-height:22px;color:var(--text)}
.qa dt .ic{width:18px;height:18px;flex:none;color:var(--pa);--icon-sw:1.8}
.qa dd{margin:0;color:var(--muted);font-size:15px;line-height:22px}
.qa-ok .ic{width:16px;height:16px;color:var(--ok);--icon-sw:2.2}
@media (max-width:760px){.qa-r{grid-template-columns:minmax(0,1fr) 20px;gap:6px 12px}.qa dd{grid-column:1;grid-row:2;padding-left:30px}.qa-ok{grid-row:1/3;grid-column:2}}

/* =================================================================================================================
   Security, after linear.app/plan (security.mjs). A quiet hero over a faint field of dots; each section opens with a
   label, a heading and a line, shows one product view on a lit stage, then a grid of hairline cells, each holding a
   small piece of the product's UI with its caption at the bottom.
   ================================================================================================================= */
.pl-hero{position:relative;padding:clamp(160px,17vw,240px) 0 clamp(96px,10vw,140px);isolation:isolate}
.pl-dots{position:absolute;z-index:-1;inset:-80px calc(-1 * var(--gut)) 0;background:radial-gradient(circle,rgba(160,168,255,.9) 1px,transparent 1.7px) 0 0/22px 22px;-webkit-mask-image:radial-gradient(55% 75% at 72% 40%,#000 0%,rgba(0,0,0,.4) 45%,transparent 75%);mask-image:radial-gradient(55% 75% at 72% 40%,#000 0%,rgba(0,0,0,.4) 45%,transparent 75%);opacity:.55;animation:pl-drift 40s linear infinite}
@keyframes pl-drift{to{background-position:26px 52px}}
.pl-label{margin-bottom:20px;color:var(--muted);font-size:15px;letter-spacing:-.011em}
.pl-hero .h-hero{max-width:none}
.pl-lede{margin-top:28px;max-width:560px}
.pl-sec{padding:clamp(96px,9vw,136px) 0 0}
.pl-sec+.pl-sec,.pl .fp-qa{border-top:1px solid var(--line)}
.pl-head .pl-label{margin-bottom:24px}
.pl-hrow{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:start}
.pl-link{display:inline-flex;gap:6px;margin-top:18px;padding-block:4px;color:var(--muted);font-size:15px;transition:color .15s ease}
@media (hover:hover) and (pointer:fine){.pl-link:hover{color:var(--text)}}
/* The stage: a soft light from above on a dark panel, the product window set into it and cut by its bottom edge. */
.pl-stage{position:relative;margin-top:72px;padding:clamp(40px,5vw,72px) clamp(24px,7vw,120px) 0;border-radius:16px 16px 0 0;overflow:hidden;background:radial-gradient(70% 90% at 50% 0%,#3a3c43 0%,#1d1e22 45%,#0e0f11 80%);box-shadow:inset 0 1px 0 rgba(255,255,255,.08)}
.pl-stage .frame{margin:0 auto;border-radius:12px 12px 0 0}
.pl-stage .frame.crop.boxed{border-radius:12px 12px 0 0;box-shadow:0 0 0 1px rgba(0,0,0,.6),0 -1px 0 rgba(255,255,255,.08),0 40px 80px -30px rgba(0,0,0,.9)}
.pl-stage .pl-acc{margin:0 auto;max-width:1100px}
.pl-stage .acc-t{border-radius:12px 12px 0 0}
/* The cells (.pl-grid, .pl-cell, .lx-*) live in styles.css, shared with the home page. */
.pl .tamper{max-width:560px;width:100%;padding:8px 0}
.pl .fp-more{margin-top:0}
@media (prefers-reduced-motion:reduce){.pl-dots,.lx-field i{animation:none}}
@media (max-width:900px){.pl-hrow{grid-template-columns:1fr;gap:18px}.pl-grid{grid-template-columns:1fr}.pl-cell{min-height:0}}
@media (max-width:760px){
  .pl-hero{padding:120px 0 72px}
  .pl-stage{margin-top:40px;padding:24px 12px 0;border-radius:12px 12px 0 0}
  .pl-ui{padding:32px 20px 20px}.pl-txt{padding:0 20px 28px}
  .pl-grid{border-left:0;border-right:0}.pl-cell{border-right:0}
  .lx-wide,.lx-flow{width:100%;margin-right:0;-webkit-mask-image:none;mask-image:none}
  .lx-src .lx-node{margin-left:0;border-radius:10px;padding-left:14px}
  .lx-wires{width:40px}
  .lx-gap{flex-direction:column;align-items:stretch}.lx-cutw{transform:rotate(90deg);margin:6px auto}
}

/* The chain demo, in the cells' style. */
.pl .tp-e{border-radius:10px;background:#121315;box-shadow:inset 0 0 0 1px rgba(255,255,255,.08),0 16px 32px -20px rgba(0,0,0,.7);padding:11px 16px}
.pl .tp-n{color:#8a8f98;font-size:13px;font-variant-numeric:tabular-nums}
.pl .tp-t>b{font-size:14px;font-weight:450;color:#e2e4e9}
.pl .tp-t>span{font-size:13px;color:#8a8f98}
.pl .tp-h{font-size:13px;color:#8a8f98}
.pl .tp-btn{border-radius:7px;height:30px;background:#191a1d;box-shadow:inset 0 0 0 1px rgba(255,255,255,.09);font-size:13px}
.pl .tamper .tp-st{font-size:13px;color:#d0d6e0}

/* ---------------------------------------------------------------------------------------------------------------
   Legal pages (legal.mjs): the document beside a contents list that stays in view.
   --------------------------------------------------------------------------------------------------------------- */
.lg-hero{padding-bottom:56px}
.lg-hero .lede{margin-top:28px}
.lg-meta{display:flex;align-items:center;gap:12px;margin-top:24px;color:var(--faint);font-size:13px}
.lg-draft{display:inline-flex;align-items:center;height:22px;padding:0 9px;border-radius:999px;color:#f0b44c;font-size:12px;font-weight:550;background:rgba(240,180,76,.1);box-shadow:inset 0 0 0 1px rgba(240,180,76,.25)}
.lg{display:grid;grid-template-columns:240px minmax(0,1fr);gap:72px;padding-top:48px;padding-bottom:120px;border-top:1px solid var(--line)}
.lg-side{position:sticky;top:96px;align-self:start;display:grid;gap:36px;max-height:calc(100vh - 120px);overflow:auto;scrollbar-width:none}
.lg-side p{margin-bottom:12px;color:var(--faint);font-size:12px;font-weight:550;letter-spacing:.02em;text-transform:uppercase}
.lg-side ol,.lg-side ul{list-style:none;display:grid;gap:2px;padding:0;margin:0}
.lg-side a{display:block;padding:5px 0;color:var(--muted);font-size:13.5px;line-height:1.4;transition:color .15s ease}
.lg-side a[aria-current]{color:var(--text)}
.lg-toc a.on{color:var(--text)}
@media (hover:hover) and (pointer:fine){.lg-side a:hover{color:var(--text)}}
.lg-doc{max-width:720px;counter-reset:lg}
.lg-doc section{padding-top:8px;margin-bottom:48px;scroll-margin-top:96px}
.lg-doc h2{display:flex;align-items:baseline;gap:14px;margin-bottom:16px;color:var(--text);font-size:21px;font-weight:550;line-height:1.3;letter-spacing:-.015em}
.lg-n{flex:none;min-width:22px;color:var(--faint);font-size:14px;font-weight:500;font-variant-numeric:tabular-nums}
.lg-doc p,.lg-doc li{color:var(--soft);font-size:15.5px;line-height:1.7;letter-spacing:-.006em;text-wrap:pretty}
.lg-doc p+p,.lg-doc p+ul,.lg-doc ul+p,.lg-doc .lg-table+p,.lg-doc p+.lg-table{margin-top:14px}
.lg-doc ul{display:grid;gap:10px;padding-left:20px}
.lg-doc li::marker{color:var(--faint)}
.lg-doc b{color:var(--text);font-weight:550}
.lg-doc a{color:var(--text);text-decoration:underline;text-decoration-color:rgba(255,255,255,.3);text-underline-offset:3px;transition:text-decoration-color .15s ease}
@media (hover:hover) and (pointer:fine){.lg-doc a:hover{text-decoration-color:var(--text)}}
.lg-note{margin-bottom:48px;padding:16px 18px;border-radius:12px;background:rgba(240,180,76,.06);box-shadow:inset 0 0 0 1px rgba(240,180,76,.18);color:var(--soft)!important;font-size:14.5px!important}
.tbc{padding:1px 5px;border-radius:5px;color:#f6d08d;background:rgba(240,180,76,.14);box-decoration-break:clone;-webkit-box-decoration-break:clone}
.lg-table{overflow-x:auto;border-radius:12px;box-shadow:inset 0 0 0 1px var(--line)}
.lg-table table{width:100%;border-collapse:collapse;font-size:14px;line-height:1.55}
.lg-table th{padding:12px 16px;color:var(--faint);font-size:12px;font-weight:550;text-align:left;letter-spacing:.02em;text-transform:uppercase;border-bottom:1px solid var(--line)}
.lg-table td{padding:12px 16px;color:var(--soft);vertical-align:top;border-top:1px solid var(--line)}
.lg-table tr:first-child td{border-top:0}
.lg-table td:first-child{color:var(--text);font-weight:500;min-width:140px}
.lg-table thead:has(th:empty){display:none}
@media (max-width:900px){
  .lg{grid-template-columns:1fr;gap:40px;padding-top:32px}
  .lg-side{position:static;max-height:none;grid-template-columns:1fr 1fr;gap:24px}
}
@media (max-width:560px){
  .lg-side{grid-template-columns:1fr}
  .lg-docs{display:none}
  .lg-doc h2{font-size:19px}
  .lg-doc p,.lg-doc li{font-size:15px}
  .lg-table td,.lg-table th{padding:10px 12px}
}