/* Fonts are self-hosted (latin subset, variable weight), so no third party sees visitors. */
@font-face{font-family:"Jost"; font-style:normal; font-weight:400 500; font-display:swap; src:url(fonts/jost.woff2) format("woff2")}
@font-face{font-family:"Geist"; font-style:normal; font-weight:400 600; font-display:swap; src:url(fonts/geist.woff2) format("woff2")}
@font-face{font-family:"Geist Mono"; font-style:normal; font-weight:400 500; font-display:swap; src:url(fonts/geist-mono.woff2) format("woff2")}

:root{
  --ink:#0B0B0C; --paper:#F4F1EC; --surface:#FFFFFF; --graphite:#2B2B2E;
  --stone:#5C5A55; --mist:#DAD6CF; --signal:#FF5A1F; --signal-text:#C23A0B; --on-signal:#0B0B0C;
  --ink-dk:#F4F1EC; --stone-dk:#A5A29B; --mist-dk:#2E2E32;
  --display:"Jost","Futura","Century Gothic",sans-serif;
  --sans:"Geist","Helvetica Neue",Arial,sans-serif;
  --mono:"Geist Mono","SFMono-Regular",Menlo,monospace;
  /* spacing scale: 4 8 16 24 40 64 104. Nothing off-scale anywhere. */
  --s1:4px; --s2:8px; --s3:16px; --s4:24px; --s5:40px; --s6:64px; --s7:104px;
  --radius-1:2px;
  --tap:48px;              /* 44px minimum, rounded to the scale */
  --mark-w:144px;
  --col-label:160px;       /* 4 x s5 */
  --col-price:240px;       /* 6 x s5 */
  --maxw:1180px;
  --headroom:80px;         /* clears the sticky header for anchors */
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--sans); font-size:16px; line-height:1.6; font-weight:400;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
[hidden]{display:none !important}
[id]{scroll-margin-top:var(--headroom)}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 var(--s4); width:100%}
h1,h2,h3{font-family:var(--display); font-weight:500; margin:0; text-wrap:balance}
h1{font-size:clamp(38px,8.4vw,88px); line-height:.95; letter-spacing:-.02em}
h2{font-size:clamp(28px,5vw,56px); line-height:1; letter-spacing:-.015em}
h3{font-size:clamp(21px,2.8vw,32px); line-height:1.1; letter-spacing:-.01em}
p{margin:0}
a{color:inherit}
.lede{font-size:clamp(17px,2vw,20px); line-height:1.5; color:var(--stone); max-width:62ch; text-wrap:pretty}
.body{max-width:68ch; text-wrap:pretty}
.muted{color:var(--stone)}
.label{
  font-family:var(--mono); font-size:11px; font-weight:500; line-height:1.4;
  letter-spacing:.12em; text-transform:uppercase; color:var(--stone);
}

/* icons: 24px grid, 1.5px stroke, square caps, ink. One set, supporting labels. */
.icon{
  width:24px; height:24px; flex:none; display:block;
  stroke:currentColor; stroke-width:1.5; fill:none;
  stroke-linecap:square; stroke-linejoin:miter;
}
.icon-sm{width:16px; height:16px}
.icon-ink{color:var(--ink)}
.icon-signal{color:var(--signal)}

/* offset bar device */
.bar-signal{height:var(--s1); width:var(--s5); background:var(--signal)}

/* header */
header{
  position:sticky; top:0; z-index:40;
  /* dark by default so it reads as one surface with the ink hero */
  --h-bg:var(--ink); --h-fg:var(--ink-dk); --h-mute:var(--stone-dk);
  --h-line:var(--mist-dk); --h-panel:#161618;
  background:var(--h-bg); border-bottom:1px solid var(--h-line);
}
/* once the hero is behind you, the bar matches the paper page */
header.is-light{
  --h-bg:var(--paper); --h-fg:var(--ink); --h-mute:var(--stone);
  --h-line:var(--mist); --h-panel:var(--surface);
}
.hrow{display:flex; align-items:center; justify-content:space-between; gap:var(--s3); padding-top:var(--s2); padding-bottom:var(--s2); min-height:var(--s6)}
.mark{display:block; width:var(--mark-w); height:auto; flex:none}
.mark path{fill:currentColor}
.brand{display:flex; align-items:center; min-height:var(--tap); color:var(--h-fg)}
nav.desk{display:none; gap:var(--s5); font-size:15px}
.menu-btn{
  display:inline-flex; align-items:center; justify-content:center;
  width:var(--tap); height:var(--tap); margin-right:calc(var(--s2) * -1);
  background:none; border:0; border-radius:var(--radius-1); color:var(--h-fg); cursor:pointer;
}
.menu-btn:hover,.menu-btn:focus-visible{background:var(--h-fg); color:var(--h-bg)}
.menu-btn .icon{stroke-width:1.5}
.menu-panel{
  position:absolute; left:0; right:0; top:100%;
  background:var(--h-panel); border-bottom:1px solid var(--h-line);
}
.menu-panel nav{display:flex; flex-direction:column}
.menu-panel a{
  min-height:var(--tap); font-size:16px; border-bottom:1px solid var(--h-line);
  justify-content:space-between;
}
.menu-panel a:last-child{border-bottom:0}
.menu-panel a:hover,.menu-panel a:focus-visible{color:var(--h-fg); border-bottom-color:var(--h-line)}
nav a{
  display:inline-flex; align-items:center; min-height:var(--tap);
  text-decoration:none; color:var(--h-mute); border-bottom:1px solid transparent; white-space:nowrap;
}
nav a:hover,nav a:focus-visible,nav a[aria-current]{color:var(--h-fg); border-bottom-color:var(--h-fg)}

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:var(--s2);
  min-height:var(--tap); padding:0 var(--s5); border-radius:var(--radius-1);
  border:0; background:var(--signal); color:var(--on-signal);
  text-decoration:none; font-family:var(--sans); font-size:15px; font-weight:600; cursor:pointer; white-space:nowrap;
}
.btn:hover,.btn:focus-visible{background:var(--ink); color:var(--paper)}
.btn:active{background:var(--signal-text); color:var(--paper)}
.btn .icon{margin-right:calc(var(--s2) * -1)}
.btn .icon{stroke-width:2}
.btn-more{display:none}
:focus-visible{outline:2px solid var(--signal-text); outline-offset:var(--radius-1)}

.textlink{
  display:inline-flex; align-items:center; gap:var(--s2); min-height:var(--tap);
  font-size:15px; font-weight:600; text-decoration:none; color:var(--ink);
  border-bottom:1px solid var(--ink);
}
.textlink:hover,.textlink:focus-visible{color:var(--signal-text); border-bottom-color:var(--signal-text)}

/* hero */
.hero{padding:var(--s6) 0; position:relative; overflow:hidden}
.hero > .wrap{position:relative; z-index:1}

/* Pixel field: a matrix of hard 4px squares on the 16px grid.
   The brand is built on a pixel grid, so this is brand furniture, not an imported effect.
   Grey grid is a static pattern; signal cells twinkle on a small canvas (main.js). */
.pixfield{position:absolute; inset:0; z-index:0; pointer-events:none; overflow:hidden}
.pixfield svg{position:absolute; inset:0; width:100%; height:100%; display:block}
.pixfield .px-mask{
  -webkit-mask-image:linear-gradient(215deg, #000 0%, #000 16%, transparent 58%);
          mask-image:linear-gradient(215deg, #000 0%, #000 16%, transparent 58%);
}
#cells{position:absolute; inset:0}
#cells canvas{position:absolute; top:0; left:0; display:block}
.pixfield #cells{
  -webkit-mask-image:linear-gradient(215deg, #000 0%, #000 16%, transparent 58%);
          mask-image:linear-gradient(215deg, #000 0%, #000 16%, transparent 58%);
}

/* The anchor object: the Chapter3 mark (the three bars of the wordmark's E)
   built from voxels in three signal tones. Drawn on canvas by main.js:
   wireframe plan first, then the blocks land bar by bar, then a slow sway.
   Flat tones only, no gradients, no glow, no pointer tracking. */
.hero-grid{display:grid; grid-template-columns:1fr; gap:var(--s5)}
/* Desktop only: below 1024px the hero is text alone and the animation never starts. */
.hero-vis{display:none; pointer-events:none; width:100%; max-width:560px; aspect-ratio:1/1}
.hero-vis canvas{display:block; width:100%; height:100%}

/* Loader: the wordmark's 3 draws in bar by bar, then the screen lifts away.
   CSS only, so it can never get stuck if a script fails. About 1.1s in all. */
.loader{
  position:fixed; inset:0; z-index:100; pointer-events:none;
  display:flex; align-items:center; justify-content:center;
  background:var(--ink);
  animation:ld-out .4s cubic-bezier(.7,0,.3,1) .75s forwards;
}
.ld-mark{position:relative; width:72px; height:80px}
.ld-mark i{
  position:absolute; right:0; height:var(--s3); background:var(--ink-dk);
  transform:scaleX(0); transform-origin:left center;
  animation:ld-bar .28s cubic-bezier(.2,.8,.2,1) forwards;
}
.ld-mark i:nth-child(1){top:0; width:100%; animation-delay:.05s}
.ld-mark i:nth-child(2){top:32px; width:50%; background:var(--signal); animation-delay:.2s}
.ld-mark i:nth-child(3){bottom:0; width:100%; animation-delay:.35s}
@keyframes ld-bar{to{transform:scaleX(1)}}
@keyframes ld-out{to{transform:translateY(-100%); visibility:hidden}}

/* Hero runs on the Ink theme. Both references are dark for the same reason:
   a fine field is invisible on a light ground. */
.hero{background:var(--ink); color:var(--ink-dk)}
.hero .lede{color:var(--stone-dk)}
.hero .label{color:var(--stone-dk)}
.hero .btn:hover,.hero .btn:focus-visible{background:var(--ink-dk); color:var(--ink)}
.hero .textlink{color:var(--ink-dk); border-bottom-color:var(--ink-dk)}
.hero .textlink:hover,.hero .textlink:focus-visible{color:var(--signal); border-bottom-color:var(--signal)}

.hero h1{max-width:15ch}
.hero .lede{margin-top:var(--s4)}
.cursor{
  display:inline-block; width:.42em; height:.1em; background:var(--signal);
  vertical-align:baseline; margin-left:.12em; animation:blink 1.1s steps(1) infinite;
}
@keyframes blink{0%,49%{opacity:1}50%,100%{opacity:0}}
.cta-row{display:flex; flex-wrap:wrap; align-items:center; gap:var(--s4); margin-top:var(--s5)}

/* sections */
section{padding:var(--s6) 0}
.sec-head{display:flex; flex-direction:column; gap:var(--s3); margin-bottom:var(--s5)}
.sec-head .lede{margin-top:var(--s1)}
.stack{display:flex; flex-direction:column; gap:var(--s4)}

/* chapters: hairline rows, never boxes in a row */
.chap{
  display:grid; grid-template-columns:1fr; gap:var(--s4);
  padding:var(--s5) 0; border-top:1px solid var(--mist);
}
.chap:last-of-type{border-bottom:1px solid var(--mist)}
.chap-key{display:flex; align-items:center; gap:var(--s2)}
.chap-detail{display:flex; flex-direction:column; gap:var(--s3)}
.chap ul{margin:0; padding:0; list-style:none; display:flex; flex-direction:column; gap:var(--s2)}
.chap li{display:flex; align-items:flex-start; gap:var(--s2); color:var(--stone); font-size:15px}
.chap-key{display:flex; flex-direction:column; gap:var(--s4); align-items:flex-start}
.chap-marker{display:flex; align-items:center; gap:var(--s2)}
.tick{margin-top:var(--s1); color:var(--ink)}

/* Chapter stack: three isometric slabs, one per chapter, sticky beside the rows on desktop.
   The slab for the row you are reading turns signal and lifts. Flat fills, hairline edges. */
.stack-fig{display:none; margin:0}
.stack-fig svg{display:block; width:100%; height:auto; overflow:visible}
.slab{transition:transform .35s cubic-bezier(.2,.8,.2,1)}
.slab polygon{stroke:var(--ink); stroke-width:1; stroke-linejoin:round; vector-effect:non-scaling-stroke;
  transition:fill .25s ease}
.slab .s-t{fill:var(--surface)}
.slab .s-l{fill:var(--mist)}
.slab .s-r{fill:#C9C4BB}
.slab .s-mark rect{fill:var(--ink)}
.slab .s-lead{stroke:var(--mist); stroke-width:1; vector-effect:non-scaling-stroke}
.slab .s-lab{font-family:var(--mono); font-size:11px; font-weight:500; letter-spacing:.12em; fill:var(--stone)}
.slab.is-on{transform:translateY(-10px)}
.slab.is-on .s-t{fill:#FFB08F}
.slab.is-on .s-l{fill:var(--signal)}
.slab.is-on .s-r{fill:var(--signal-text)}
.slab.is-on .s-lead{stroke:var(--signal-text)}
.slab.is-on .s-lab{fill:var(--signal-text)}
.chap .chap-marker .label{transition:color .25s ease}
.chap.is-on .chap-marker .label{color:var(--signal-text)}
.tick-live{color:var(--signal)}

/* ink blocks */
.ink-block{background:var(--ink); color:var(--ink-dk)}
.ink-block .label,.ink-block .muted,.ink-block .lede{color:var(--stone-dk)}
.loop{display:grid; grid-template-columns:1fr; gap:0; margin-top:var(--s5)}
.loop-row{
  display:grid; grid-template-columns:1fr; gap:var(--s2);
  padding:var(--s4) 0; border-top:1px solid var(--mist-dk);
}
.loop-row:last-child{border-bottom:1px solid var(--mist-dk)}
.items{display:flex; flex-wrap:wrap; gap:var(--s2) var(--s4); margin:0; padding:0; list-style:none}
.items li{display:flex; align-items:center; gap:var(--s2); font-size:15px; color:var(--ink-dk)}
.items .icon{color:var(--stone-dk)}
.who{display:flex; align-items:center; gap:var(--s2); font-family:var(--mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase}
.who.agent{color:var(--signal)}
.who.human{color:var(--stone-dk)}

/* timeline */
.tl{display:grid; grid-template-columns:1fr; gap:0}
.tl-row{display:grid; grid-template-columns:1fr; gap:var(--s3); padding:var(--s4) 0; border-top:1px solid var(--mist)}
.tl-row:last-child{border-bottom:1px solid var(--mist)}
.tl-key{display:flex; align-items:baseline; gap:var(--s2)}
.tl-num{font-family:var(--display); font-weight:500; font-size:32px; line-height:1; letter-spacing:-.01em}
.tl-unit{font-family:var(--mono); font-size:11px; font-weight:500; letter-spacing:.12em; text-transform:uppercase; color:var(--stone)}
.tl-body{display:flex; flex-direction:column; gap:var(--s2)}
.tl-title{font-weight:600; font-size:17px}
.tl-bar{height:var(--s1); background:var(--mist); margin-top:var(--s2)}
.tl-fill{height:100%; background:var(--ink)}
.tl-row.now .tl-fill{background:var(--signal)}
.w10{width:10%}.w20{width:20%}.w50{width:50%}
.o10{margin-left:10%}.o30{margin-left:30%}.o80{margin-left:80%}

/* 30-day scope boundary */
.scope{display:grid; grid-template-columns:1fr; gap:var(--s5); margin-top:var(--s6); padding-top:var(--s5); border-top:1px solid var(--mist)}
.scope-col{display:flex; flex-direction:column; gap:var(--s3)}
.scope-col ul{margin:0; padding:0; list-style:none; display:flex; flex-direction:column; gap:var(--s2)}
.scope-col li{display:flex; align-items:flex-start; gap:var(--s2); font-size:15px; color:var(--stone)}
.scope-col .tick{margin-top:var(--s1); color:var(--ink); flex:none}
.w17{width:17%}.w23{width:23%}.w47{width:47%}.w13{width:13%}
.o17{margin-left:17%}.o40{margin-left:40%}.o87{margin-left:87%}

/* pricing */
.prices{display:grid; grid-template-columns:1fr; gap:0}
.price{display:grid; grid-template-columns:1fr; gap:var(--s4); padding:var(--s5) 0; border-top:1px solid var(--mist)}
.price:last-of-type{border-bottom:1px solid var(--mist)}
.price-copy{display:flex; flex-direction:column; gap:var(--s2)}
.price-copy .textlink{align-self:flex-start; margin-top:var(--s2)}
.fig{font-family:var(--display); font-weight:500; font-size:clamp(28px,3.6vw,36px); line-height:1; letter-spacing:-.015em; white-space:nowrap}
.fig-pre{display:block; font-family:var(--mono); font-size:11px; font-weight:500; letter-spacing:.12em; text-transform:uppercase; color:var(--stone); margin-bottom:var(--s2)}
.fig small{font-family:var(--sans); font-size:14px; font-weight:400; color:var(--stone); letter-spacing:0; display:block; margin-top:var(--s2)}

/* faq */
details{border-top:1px solid var(--mist)}
details:last-of-type{border-bottom:1px solid var(--mist)}
summary{
  list-style:none; cursor:pointer; padding:var(--s4) 0; min-height:var(--tap);
  display:flex; align-items:center; justify-content:space-between; gap:var(--s4);
  font-weight:600; font-size:17px;
}
summary::-webkit-details-marker{display:none}
.chev{color:var(--signal-text); transition:none}
details[open] .chev{transform:rotate(180deg)}
details .ans{padding:0 0 var(--s4); color:var(--stone); max-width:68ch}

/* form */
form{display:grid; gap:var(--s4); max-width:640px; margin-top:var(--s5)}
.field{display:flex; flex-direction:column; gap:var(--s2)}
input,textarea{
  font-family:var(--sans); font-size:16px; line-height:1.6; color:var(--ink); background:var(--surface);
  border:1px solid var(--mist); border-radius:var(--radius-1);
  padding:var(--s2) var(--s3); min-height:var(--tap); width:100%;
}
textarea{min-height:calc(var(--s4) * 6); resize:vertical}
input:focus,textarea:focus{outline:2px solid var(--signal-text); outline-offset:0; border-color:var(--ink)}
input[aria-invalid="true"],textarea[aria-invalid="true"]{border-color:var(--signal-text)}
.err:empty{display:none}
.err{display:flex; align-items:center; gap:var(--s1); color:var(--signal-text); font-size:13px}
.hp{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}
.ok{display:flex; flex-direction:column; gap:var(--s3); border:1px solid var(--ink); padding:var(--s5); background:var(--surface); max-width:640px; margin-top:var(--s5)}

.status{display:flex; align-items:center; gap:var(--s3); margin-top:var(--s4); min-height:48px}
.status p{font-size:15px; color:var(--stone)}
.formerr{display:flex; align-items:flex-start; gap:var(--s3); border-left:var(--s1) solid var(--signal); background:var(--surface); padding:var(--s4); margin-top:var(--s4); max-width:640px}
.formerr p{font-size:15px; color:var(--stone)}
.formerr strong{color:var(--ink); font-weight:600; display:block}
.ok-head{display:flex; align-items:center; gap:var(--s2); color:var(--signal-text)}

/* footer: one row on desktop, a short stack on mobile */
footer{border-top:1px solid var(--mist); padding-top:var(--s5); padding-bottom:var(--s5)}
.frow{display:flex; flex-direction:column; align-items:flex-start; gap:var(--s3)}
.fbrand{display:flex; flex-direction:column; gap:var(--s2)}
.fbrand .mark{width:120px}
.fbrand p{margin:0; font-size:15px}
.fcopy{margin:0; font-size:15px; color:var(--stone)}
.fmail{display:inline-flex; align-items:center; gap:var(--s2); min-height:var(--tap); font-size:15px; text-decoration:underline; text-underline-offset:var(--s1)}
.fmail:hover,.fmail:focus-visible{color:var(--signal-text)}
.flinks{display:flex; flex-wrap:wrap; gap:var(--s4)}
.flinks button,.flinks a{
  display:inline-flex; align-items:center;
  background:none; border:0; padding:0; min-height:var(--tap); font:inherit; font-size:15px;
  color:var(--stone); cursor:pointer; text-decoration:underline; text-underline-offset:var(--s1);
}
.flinks button:hover,.flinks button:focus-visible,.flinks a:hover,.flinks a:focus-visible{color:var(--ink)}
.ink-link{color:var(--ink-dk); border-bottom-color:var(--ink-dk)}
.ink-link:hover,.ink-link:focus-visible{color:var(--signal); border-bottom-color:var(--signal)}
.ulink{color:inherit; text-decoration:underline; text-underline-offset:var(--s1)}
.ulink:hover,.ulink:focus-visible{color:var(--signal-text)}

/* modal */
dialog{
  border:1px solid var(--ink); border-radius:0; padding:0;
  max-width:680px; width:calc(100% - var(--s5)); background:var(--paper); color:var(--ink); max-height:85vh;
}
dialog::backdrop{background:rgba(11,11,12,.72)}
.dhead{
  display:flex; align-items:center; justify-content:space-between; gap:var(--s4);
  padding:var(--s4); border-bottom:1px solid var(--mist); position:sticky; top:0; background:var(--paper);
}
.dbody{padding:var(--s4); overflow-y:auto; max-height:calc(85vh - var(--s7))}
.dbody h4{font-family:var(--sans); font-size:15px; font-weight:600; margin:var(--s4) 0 var(--s2)}
.dbody h4:first-child{margin-top:0}
.dbody p{color:var(--stone); font-size:15px; margin-bottom:var(--s3)}
.dbody p:last-child{margin-bottom:0}
.dclose{
  display:inline-flex; align-items:center; justify-content:center;
  background:none; border:1px solid var(--mist); border-radius:var(--radius-1);
  width:var(--tap); height:var(--tap); cursor:pointer; color:var(--ink); flex:none;
}
.dclose:hover,.dclose:focus-visible{background:var(--ink); color:var(--paper)}

/* ---------- tablet ---------- */
@media (min-width:768px){
  :root{--mark-w:184px}
  .scope{grid-template-columns:1fr 1fr; gap:var(--s6)}
  .btn-more{display:inline}
  .wrap{padding:0 var(--s5)}
  .hero{padding:var(--s7) 0}
  section{padding:var(--s7) 0}
  .chap{grid-template-columns:var(--col-label) 1fr; gap:var(--s5)}
  .loop-row{grid-template-columns:var(--col-label) 1fr; gap:var(--s5); align-items:baseline}
  .tl-row{grid-template-columns:var(--col-label) 1fr; gap:var(--s5); align-items:baseline}
}

/* ---------- desktop ---------- */
@media (min-width:1024px){
  .hero{
    min-height:100svh; min-height:100vh;
    display:flex; flex-direction:column; justify-content:center;
    padding-top:var(--s7); padding-bottom:var(--s7);
  }
  .hero-grid{grid-template-columns:minmax(0,1.25fr) minmax(0,1fr); align-items:center; gap:var(--s6)}
  .hero-vis{display:block}
  .hrow{min-height:var(--s6)}
  nav.desk{display:flex}
  .menu-btn{display:none}
  .menu-panel{display:none}
  .price{grid-template-columns:1fr var(--col-price); gap:var(--s5); align-items:start}
  .sec-head{max-width:68ch}
  .chap-layout{display:grid; grid-template-columns:minmax(0,1.45fr) minmax(0,1fr); gap:var(--s6); align-items:start}
  .stack-fig{display:block; position:sticky; top:calc(var(--headroom) + var(--s5))}
  .frow{flex-direction:row; align-items:center; justify-content:space-between; gap:var(--s4)}
  .frow > *{flex:none; white-space:nowrap}
  .fbrand{flex-direction:row; align-items:center; gap:var(--s3)}
  .frow .flinks{flex-wrap:nowrap}
}

@media (prefers-reduced-motion:reduce){
  .loader{display:none}
  .cursor{animation:none; opacity:1}
  *{transition:none !important}
}


/* ---------- document pages ---------- */
.doc{max-width:760px}
.doc-head{padding:var(--s6) 0 var(--s5)}
.doc-head h1{font-size:clamp(34px,6.5vw,64px); max-width:20ch}
.doc-head .lede{margin-top:var(--s4)}
.back{display:inline-flex; align-items:center; gap:var(--s2); min-height:var(--tap); font-size:15px; font-weight:600; text-decoration:none}
.back:hover,.back:focus-visible{color:var(--signal-text)}
.back .icon{transform:rotate(180deg)}
.notice{display:flex; gap:var(--s3); padding:var(--s4); background:var(--surface); border-left:var(--s1) solid var(--signal); margin-top:var(--s5)}
.notice p{font-size:15px; color:var(--stone)}
.notice strong{color:var(--ink); font-weight:600}
.meta{display:grid; grid-template-columns:1fr 1fr; gap:var(--s4); padding:var(--s4) 0; border-top:1px solid var(--mist); border-bottom:1px solid var(--mist); margin-top:var(--s5)}
.meta div{display:flex; flex-direction:column; gap:var(--s1)}
.meta p{font-size:15px}
.doc section{padding:var(--s5) 0; border-top:1px solid var(--mist)}
.doc section:first-of-type{border-top:0}
.doc h2{font-size:clamp(24px,3.4vw,32px); margin-bottom:var(--s3)}
.doc h3{font-size:19px; font-family:var(--sans); font-weight:600; letter-spacing:0; margin:var(--s5) 0 var(--s2)}
.doc p{margin-bottom:var(--s3); max-width:68ch}
.doc p:last-child{margin-bottom:0}
.doc ul{margin:0 0 var(--s3); padding:0; list-style:none; display:flex; flex-direction:column; gap:var(--s2)}
.doc ul li{display:flex; align-items:flex-start; gap:var(--s2); max-width:68ch}
.doc ul li .icon{margin-top:var(--s1); color:var(--ink); flex:none}
.doc ol{margin:0 0 var(--s3) var(--s4); padding:0; display:flex; flex-direction:column; gap:var(--s2); max-width:68ch}
.doc blockquote{margin:0 0 var(--s3); padding-left:var(--s4); border-left:1px solid var(--mist); color:var(--stone); font-size:17px}
.tbl{width:100%; border-collapse:collapse; margin-bottom:var(--s3); font-size:15px}
.tbl th{text-align:left; font-family:var(--mono); font-size:11px; font-weight:500; letter-spacing:.12em; text-transform:uppercase; color:var(--stone); padding:var(--s2) var(--s3) var(--s2) 0; border-bottom:1px solid var(--ink); vertical-align:bottom}
.tbl td{padding:var(--s3) var(--s3) var(--s3) 0; border-bottom:1px solid var(--mist); vertical-align:top; color:var(--stone)}
.tbl td:first-child{color:var(--ink); font-weight:600; white-space:nowrap}
.tbl td strong{color:var(--ink); font-weight:600}
.scroller{overflow-x:auto; -webkit-overflow-scrolling:touch}
.ban{display:flex; flex-direction:column; gap:var(--s5)}
.ban-group h3{margin-top:0}
.ban-list{display:flex; flex-wrap:wrap; gap:var(--s2) var(--s4)}
.ban-list span{display:flex; align-items:center; gap:var(--s2); font-size:15px; color:var(--stone)}
.ban-list .icon{color:var(--signal-text)}
.sum{display:grid; grid-template-columns:1fr; gap:var(--s4); padding:var(--s5); background:var(--surface); margin-top:var(--s5)}
.sum-fig{font-family:var(--display); font-weight:500; font-size:32px; line-height:1}
.sum-lab{font-family:var(--mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--stone); margin-top:var(--s1)}
.doc-cta{padding:var(--s6) 0}
@media (min-width:768px){
  .meta{grid-template-columns:repeat(4,1fr)}
  .sum{grid-template-columns:repeat(3,1fr)}
}