/* ==========================================================================
   Chirality AI Ltd — site styles
   Palette and type follow the Chirality App Stone system.
   Structure: tokens, base, header, type, layout primitives, components,
   sections, footer.
   ========================================================================== */

@font-face { font-family:"Plex Serif"; src:url("fonts/ibm-plex-serif-latin-400-normal.woff2") format("woff2"); font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:"Plex Serif"; src:url("fonts/ibm-plex-serif-latin-600-normal.woff2") format("woff2"); font-weight:600; font-style:normal; font-display:swap; }
@font-face { font-family:"Plex Serif"; src:url("fonts/ibm-plex-serif-latin-400-italic.woff2") format("woff2"); font-weight:400; font-style:italic; font-display:swap; }
@font-face { font-family:"Plex Mono"; src:url("fonts/ibm-plex-mono-latin-400-normal.woff2") format("woff2"); font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:"Plex Sans"; src:url("fonts/ibm-plex-sans-latin-400-normal.woff2") format("woff2"); font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:"Plex Sans"; src:url("fonts/ibm-plex-sans-latin-500-normal.woff2") format("woff2"); font-weight:500; font-style:normal; font-display:swap; }
@font-face { font-family:"Plex Sans"; src:url("fonts/ibm-plex-sans-latin-600-normal.woff2") format("woff2"); font-weight:600; font-style:normal; font-display:swap; }

/* Stone tokens, exactly as ruled in the app's shell target spec §11.
   Light: centre #ffffff, side #f2f1ed. Dark: centre #1e1e1c, side #161615. */
:root {
  color-scheme: light;

  --ground:#ffffff; --surface:#f2f1ed; --card:#ffffff; --active:#efede8;
  --ink:#222120; --ink-soft:#5c5a55; --ink-faint:#8a8883;
  --rule:#e2e0da; --rule-strong:#cfccc4;
  --accent:#99552f; --accent-soft:rgba(153,85,47,.12);
  --brand-ink:#4a3423;
  --band:#222120; --band-ink:#f2f1ed; --band-soft:#a5a49d; --band-rule:#3a3a37;
  --sage:#4f7f5c; --warn:#b5772e;

  --sans:"Plex Sans","Avenir Next","Segoe UI",system-ui,sans-serif;
  --serif:"Plex Serif","Iowan Old Style",Palatino,Georgia,serif;
  --mono:"Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;

  --fs-display:clamp(2.6rem,6vw,4.6rem);
  --fs-h2:clamp(1.85rem,3.3vw,2.7rem);
  --fs-h3:clamp(1.25rem,1.7vw,1.45rem);
  --fs-lede:clamp(1.08rem,1.5vw,1.28rem);

  --page:74rem;
  --gutter:clamp(1.25rem,4vw,3rem);
  --section:clamp(4.5rem,8.5vw,7.5rem);
  --shadow:0 1px 2px rgba(34,33,32,.05), 0 12px 34px -18px rgba(34,33,32,.3);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --ground:#1e1e1c; --surface:#161615; --card:#1e1e1c; --active:#2a2a27;
    --ink:#e8e7e2; --ink-soft:#a5a49d; --ink-faint:#77766f;
    --rule:#2b2b29; --rule-strong:#3a3a37;
    --accent:#d08a5c; --accent-soft:rgba(208,138,92,.18);
    --brand-ink:#e8e7e2;
    --band:#111110; --band-ink:#e8e7e2; --band-soft:#a5a49d; --band-rule:#2b2b29;
    --sage:#8fbf9f; --warn:#d1a24a;
    --shadow:0 1px 2px rgba(0,0,0,.45), 0 12px 34px -18px rgba(0,0,0,.75);
  }
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  margin:0;background:var(--ground);color:var(--ink);
  font-family:var(--sans);font-size:1.0625rem;line-height:1.62;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--accent);text-underline-offset:.2em;text-decoration-thickness:1px}
a:hover{color:var(--ink)}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:2px}

.skip{position:absolute;left:-9999px;background:var(--card);color:var(--ink);padding:.7rem 1rem;border:1px solid var(--rule-strong);z-index:30}
.skip:focus{left:1rem;top:1rem}

.wrap{width:min(100% - (var(--gutter) * 2),var(--page));margin-inline:auto}

/* ---------- header ---------------------------------------------------- */

.site-head{border-bottom:1px solid var(--rule);background:color-mix(in srgb,var(--ground) 88%,transparent);backdrop-filter:saturate(1.4) blur(8px);position:sticky;top:0;z-index:20}
.site-head .wrap{display:flex;align-items:center;gap:2.5rem;min-height:4.75rem}
.wordmark{font-family:var(--serif);font-size:1.34rem;color:var(--brand-ink);text-decoration:none;margin-right:auto;display:inline-flex;align-items:center;gap:.62rem;letter-spacing:.004em}
.wordmark img{width:27px;height:27px;border-radius:22.37%}
.site-nav{display:flex;gap:1.4rem;align-items:center;flex-wrap:wrap}
.site-nav a{color:var(--ink-soft);text-decoration:none;font-size:.94rem;padding:.3rem 0;border-bottom:1px solid transparent}
.site-nav a:hover{color:var(--ink);border-bottom-color:var(--rule-strong)}
.site-nav a[aria-current="page"]{color:var(--ink);border-bottom-color:var(--accent)}
.site-nav .btn{padding:.5rem 1rem;font-size:.9rem;border-bottom:0}
.site-nav .btn:hover{border-bottom:0}
@media (max-width:52rem){
  .site-head{position:static}
  .site-head .wrap{flex-wrap:wrap;gap:.5rem 1.25rem;padding-block:.9rem;min-height:0}
  .wordmark{width:100%;margin-right:0}
  .site-nav{gap:1.15rem}
  .site-nav .btn{
    padding:0;background:transparent;border:0;border-bottom:1px solid transparent;
    color:var(--accent);font-weight:500;font-size:.94rem;
  }
  .site-nav .btn::after{content:none}
  .site-nav .btn:hover{color:var(--ink);background:transparent}
}

/* Narrow: let the record's trailing value sit under its step. */
@media (max-width:34rem){
  .record{font-size:.82rem}
  .record li{grid-template-columns:1.2rem 1fr;gap:.55rem}
  .record li .meta{grid-column:2;text-align:left;margin-top:.1rem;white-space:normal}
}

/* ---------- type ------------------------------------------------------ */

h1,h2,h3,h4{margin:0;font-weight:400;line-height:1.14;letter-spacing:-.016em}
h1{font-family:var(--serif);font-size:var(--fs-display)}
h2{font-family:var(--serif);font-size:var(--fs-h2)}
h3{font-family:var(--sans);font-size:var(--fs-h3);font-weight:600;letter-spacing:-.005em;line-height:1.3}
p{margin:0 0 1.15rem}
.lede{font-size:var(--fs-lede);line-height:1.55;color:var(--ink-soft)}
.measure{max-width:38rem}
.measure-tight{max-width:31rem}

.eyebrow{
  font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;font-weight:600;
  color:var(--ink-faint);margin:0 0 1.15rem;display:flex;align-items:center;gap:.7rem;
}
.eyebrow::after{content:"";height:1px;flex:1;background:var(--rule);max-width:5rem}

.big-quote{
  font-family:var(--serif);font-size:clamp(1.5rem,3vw,2.15rem);line-height:1.34;
  letter-spacing:-.014em;max-width:30ch;margin:0;
}
.big-quote em{font-style:italic;color:var(--accent)}

/* ---------- buttons --------------------------------------------------- */

.actions{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:2.1rem}
.btn{
  display:inline-flex;align-items:center;gap:.5rem;padding:.78rem 1.5rem;
  font:500 .97rem/1 var(--sans);text-decoration:none;border-radius:3px;
  background:var(--ink);color:var(--ground);border:1px solid var(--ink);
  transition:background .15s ease,border-color .15s ease,color .15s ease;
}
.btn:hover{background:var(--accent);border-color:var(--accent);color:#fff}
.btn::after{content:"→";font-size:.95em;transform:translateY(-.5px)}
.btn-quiet{background:transparent;color:var(--ink);border-color:var(--rule-strong)}
.btn-quiet:hover{background:transparent;color:var(--accent);border-color:var(--accent)}
.btn-light{background:var(--band-ink);color:var(--band);border-color:var(--band-ink)}
.btn-light:hover{background:var(--accent);border-color:var(--accent);color:#fff}
.btn-ghost{background:transparent;color:var(--band-ink);border-color:var(--band-rule)}
.btn-ghost:hover{background:transparent;color:var(--band-ink);border-color:var(--band-soft)}
.btn-plain::after{content:none}

/* ---------- sections -------------------------------------------------- */

section{padding-block:var(--section)}
.tinted{background:var(--surface);border-block:1px solid var(--rule)}
.banded{background:var(--band);color:var(--band-ink)}
.banded h2,.banded h3{color:var(--band-ink)}
.banded p{color:var(--band-soft)}
.banded .eyebrow{color:var(--band-soft)}
.banded .eyebrow::after{background:var(--band-rule)}

.section-head{max-width:44rem;margin-bottom:clamp(2.5rem,4vw,3.75rem)}
.section-head p{margin-bottom:0}
.section-head h2 + .lede{margin-top:1.15rem;max-width:39rem}

/* ---------- hero ------------------------------------------------------ */

.hero{padding-block:clamp(3.5rem,7vw,6rem) clamp(4rem,7vw,6.5rem)}
.hero-grid{display:grid;grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr);gap:clamp(2.5rem,5vw,4.5rem);align-items:center}
.hero h1{margin-bottom:1.5rem}
.hero .lede{max-width:33rem}
.hero-note{margin-top:1.6rem;font-size:.9rem;color:var(--ink-faint);display:flex;align-items:center;gap:.55rem}
.hero-note::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--sage);flex:none}
@media (max-width:60rem){.hero-grid{grid-template-columns:1fr;gap:3rem}}

/* ---------- record illustration --------------------------------------- */

.record{
  background:var(--card);border:1px solid var(--rule);border-radius:6px;
  box-shadow:var(--shadow);overflow:hidden;font-size:.875rem;
}
.record-bar{display:flex;align-items:center;gap:.55rem;padding:.75rem 1.1rem;border-bottom:1px solid var(--rule);background:color-mix(in srgb,var(--surface) 60%,var(--card))}
.record-bar .dot{width:8px;height:8px;border-radius:50%;background:var(--sage);flex:none}
.record-bar .path{font-family:var(--sans);color:var(--ink-soft);font-size:.82rem}
.record-bar .path b{color:var(--ink);font-weight:600}
.record-bar .right{margin-left:auto;font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-faint);font-weight:600}
.record-body{padding:1.15rem 1.1rem 1.35rem}
.record-title{font-family:var(--serif);font-size:1.12rem;margin:0 0 .2rem}
.record-sub{color:var(--ink-faint);font-size:.8rem;margin:0 0 1.15rem}
.record ol{list-style:none;margin:0;padding:0;display:grid;gap:.1rem}
.record li{display:grid;grid-template-columns:1.35rem 1fr auto;gap:.7rem;align-items:baseline;padding:.5rem .55rem;border-radius:4px;line-height:1.45}
.record li .mk{font-size:.8rem;line-height:1.5;color:var(--sage);text-align:center}
.record li.done{color:var(--ink-soft)}
.record li.gate{background:var(--accent-soft);color:var(--ink)}
.record li.gate .mk{color:var(--accent)}
.record li.todo{color:var(--ink-faint)}
.record li.todo .mk{color:var(--rule-strong)}
.record li .meta{font-size:.72rem;color:var(--ink-faint);white-space:nowrap}
.record li.gate .meta{color:var(--accent);font-weight:600}
.record-foot{border-top:1px solid var(--rule);padding:.8rem 1.1rem;display:flex;flex-wrap:wrap;gap:.45rem;align-items:center;font-size:.74rem;color:var(--ink-faint)}
.record-foot .chip{border:1px solid var(--rule-strong);border-radius:99px;padding:.16rem .6rem;white-space:nowrap}
.caption{margin:.9rem 0 0;font-size:.78rem;color:var(--ink-faint);text-align:center}

/* ---------- two-column comparison ------------------------------------- */

.compare{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.25rem,3vw,2.5rem)}
@media (max-width:52rem){.compare{grid-template-columns:1fr}}
.col{padding:1.9rem;border-radius:5px;border:1px solid var(--rule)}
.col-a{background:transparent}
.col-b{background:var(--card);border-color:var(--rule-strong);box-shadow:var(--shadow)}
.col h3{margin-bottom:1.35rem;font-size:1rem;letter-spacing:.02em}
.col-a h3{color:var(--ink-faint)}
.col ul{list-style:none;margin:0;padding:0;display:grid;gap:1rem}
.col li{position:relative;padding-left:1.75rem;font-size:.985rem;line-height:1.5}
.col li strong{color:var(--ink);font-weight:600}
.col-a li{color:var(--ink-faint)}
.col-a li strong{color:var(--ink-soft)}
.col-a li::before{content:"";position:absolute;left:0;top:.72em;width:11px;height:1px;background:var(--rule-strong)}
.col-b li::before{content:"✓";position:absolute;left:0;top:0;color:var(--sage);font-size:.85rem;line-height:1.75;font-weight:600}

/* ---------- numbered steps -------------------------------------------- */

.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1.5rem,3vw,3rem);list-style:none;margin:0;padding:0;counter-reset:s}
@media (max-width:52rem){.steps{grid-template-columns:1fr;gap:2.25rem}}
.steps li{counter-increment:s;border-top:1px solid var(--rule-strong);padding-top:1.35rem}
.steps li::before{
  content:counter(s,decimal-leading-zero);display:block;font-family:var(--serif);
  font-size:1.6rem;color:var(--accent);margin-bottom:.85rem;line-height:1;
}
.steps h3{margin-bottom:.55rem}
.steps p{color:var(--ink-soft);font-size:.985rem;margin:0}

/* ---------- feature grid ---------------------------------------------- */

.features{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border-top:1px solid var(--rule)}
.features > div{padding:2rem 2.1rem 2.15rem;border-bottom:1px solid var(--rule);border-right:1px solid var(--rule)}
.features > div:nth-child(3n){border-right:0;padding-right:0}
.features > div:nth-child(3n+1){padding-left:0}
.features h3{margin-bottom:.6rem}
.features p{color:var(--ink-soft);font-size:.96rem;margin:0}
.features p + p{margin-top:.85rem}
.banded .features,.banded .features > div{border-color:var(--band-rule)}
@media (max-width:62rem){
  .features{grid-template-columns:1fr 1fr}
  .features > div{padding-inline:1.75rem;border-right:1px solid var(--rule)}
  .features > div:nth-child(3n),.features > div:nth-child(3n+1){padding-inline:1.75rem;border-right:1px solid var(--rule)}
  .features > div:nth-child(2n){border-right:0;padding-right:0}
  .features > div:nth-child(2n+1){padding-left:0}
  .banded .features > div{border-right-color:var(--band-rule)}
}
@media (max-width:44rem){
  .features{grid-template-columns:1fr}
  .features > div{padding:1.6rem 0 1.7rem;border-right:0}
  .features > div:nth-child(n){border-right:0;padding-inline:0}
}

/* ---------- product panels -------------------------------------------- */

.product{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:clamp(2rem,5vw,4.5rem);align-items:center}
.product + .product{margin-top:clamp(3.5rem,6vw,5.5rem);padding-top:clamp(3.5rem,6vw,5.5rem);border-top:1px solid var(--rule)}
.product.flip > *:first-child{order:2}
@media (max-width:56rem){.product{grid-template-columns:1fr;gap:2rem}.product.flip > *:first-child{order:0}}
.tag{display:inline-block;font-size:.7rem;letter-spacing:.13em;text-transform:uppercase;font-weight:600;color:var(--accent);border:1px solid color-mix(in srgb,var(--accent) 35%,transparent);padding:.28rem .65rem;border-radius:99px;margin-bottom:1.1rem}
.product h2{margin-bottom:1rem;font-size:clamp(1.6rem,2.6vw,2.15rem)}
.product h3{margin:0 0 1rem;font-size:clamp(1.35rem,2.1vw,1.7rem);line-height:1.25}
.product p{color:var(--ink-soft)}
.panel{background:var(--card);border:1px solid var(--rule);border-radius:6px;padding:clamp(1.6rem,3vw,2.4rem);box-shadow:var(--shadow)}
.panel ul{list-style:none;margin:0;padding:0;display:grid;gap:1.05rem}
.panel li{position:relative;padding-left:1.4rem;font-size:.97rem;line-height:1.55;color:var(--ink-soft)}
.panel li strong{color:var(--ink);font-weight:600;display:block}
.panel li::before{content:"";position:absolute;left:0;top:.62em;width:5px;height:5px;border-radius:50%;background:var(--accent)}

/* ---------- audience list --------------------------------------------- */

.audience{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:2rem}
.audience span{border:1px solid var(--rule-strong);border-radius:99px;padding:.42rem 1rem;font-size:.9rem;color:var(--ink-soft)}
.banded .audience span{border-color:var(--band-rule);color:var(--band-soft)}

/* ---------- closing cta ----------------------------------------------- */

.cta-grid{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:clamp(2rem,5vw,4rem);align-items:center}
@media (max-width:56rem){.cta-grid{grid-template-columns:1fr}.cta-mark{display:none}}
.cta-mark{width:clamp(120px,15vw,168px);border-radius:22.37%;opacity:.92}

/* ---------- tiers (ways in) ------------------------------------------- */

.tiers{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem;margin-top:2.75rem}
@media (max-width:60rem){.tiers{grid-template-columns:1fr;gap:1.25rem}}
.tier{background:var(--card);border:1px solid var(--rule);border-radius:5px;padding:2rem 1.9rem 1.9rem;display:flex;flex-direction:column}
.tier-featured{border-color:var(--ink-faint);box-shadow:var(--shadow)}
.tier .cost{font:600 .72rem/1.4 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--accent);margin:0 0 .9rem;min-height:1.4em}
.tier h3{margin-bottom:.6rem;font-size:1.3rem}
.tier > p{color:var(--ink-soft);font-size:.97rem}
.tier ul{list-style:none;margin:1.1rem 0 1.6rem;padding:0;display:grid;gap:.7rem}
.tier li{position:relative;padding-left:1.35rem;font-size:.94rem;line-height:1.5;color:var(--ink-soft)}
.tier li::before{content:"";position:absolute;left:0;top:.65em;width:5px;height:5px;border-radius:50%;background:var(--accent)}
.tier .actions{margin-top:auto;padding-top:.4rem}
.tier .actions .btn{width:100%;justify-content:center}
.tier-note{font-size:.86rem;color:var(--ink-faint);margin:1.1rem 0 0;padding-top:1.1rem;border-top:1px solid var(--rule)}

/* ---------- spec list (deployment facts) ------------------------------ */

.spec{margin:2.5rem 0 0;border-top:1px solid var(--rule)}
.spec > div{display:grid;grid-template-columns:15rem 1fr;gap:2.5rem;padding:1.5rem 0;border-bottom:1px solid var(--rule);align-items:start}
@media (max-width:52rem){.spec > div{grid-template-columns:1fr;gap:.5rem}}
.spec dt{font-weight:600;color:var(--ink);font-size:.97rem;line-height:1.5}
.spec dd{margin:0;color:var(--ink-soft);font-size:.97rem}
.spec dd p{margin:0 0 .6rem;max-width:40rem}
.spec dd p:last-child{margin-bottom:0}
.banded .spec,.banded .spec > div{border-color:var(--band-rule)}
.banded .spec dt{color:var(--band-ink)}
.banded .spec dd{color:var(--band-soft)}

/* ---------- longform (thesis and essays) ------------------------------ */

.longform{max-width:35rem;margin-inline:auto}
.longform.wide{max-width:44rem}
.essay-head{max-width:35rem;margin-inline:auto;text-align:left}
.essay-head h1{font-size:clamp(2.2rem,4.6vw,3.4rem);margin-bottom:1.4rem}
.essay-meta{font-size:.86rem;color:var(--ink-faint);margin:0}

.longform p{
  font-family:var(--serif);font-size:1.14rem;line-height:1.72;
  color:var(--ink);margin:0 0 1.35rem;max-width:none;
}
.longform > p:first-of-type{font-size:1.3rem;line-height:1.62;color:var(--ink-soft)}
.longform h2{
  font-size:1.5rem;margin:3.2rem 0 1.1rem;letter-spacing:-.01em;
}
.longform h2:first-child{margin-top:0}
.longform em{font-style:italic}
.longform strong{font-weight:600}
.longform blockquote{
  margin:2.2rem 0;padding-left:1.5rem;border-left:2px solid var(--accent);
}
.longform blockquote p{font-size:1.22rem;line-height:1.55;color:var(--ink);margin-bottom:0}
.longform hr{
  border:0;height:1px;background:var(--rule);margin:3rem 0;
}
.longform ul{margin:0 0 1.35rem;padding-left:1.3rem}
.longform li{
  font-family:var(--serif);font-size:1.14rem;line-height:1.7;margin-bottom:.7rem;
}
.longform .aside{
  font-family:var(--sans);font-size:.95rem;line-height:1.6;color:var(--ink-soft);
  background:var(--surface);border:1px solid var(--rule);border-radius:4px;
  padding:1.4rem 1.6rem;margin:2.4rem 0;
}
.longform .aside p{font-family:var(--sans);font-size:.95rem;line-height:1.6;color:var(--ink-soft);margin-bottom:.7rem}
.longform .aside p:last-child{margin-bottom:0}
.longform .aside strong{color:var(--ink)}

.reading-list{display:grid;gap:0;border-top:1px solid var(--rule);margin-top:2.5rem}
.reading-list a{
  display:grid;grid-template-columns:1fr auto;gap:2rem;align-items:baseline;
  padding:1.4rem 0;border-bottom:1px solid var(--rule);
  text-decoration:none;color:var(--ink);
}
.reading-list a:hover{color:var(--accent)}
.reading-list .t{font-family:var(--serif);font-size:1.2rem;line-height:1.35}
.reading-list .d{font-size:.88rem;color:var(--ink-faint);font-family:var(--sans)}
.reading-list .s{grid-column:1/-1;font-size:.95rem;color:var(--ink-soft);margin-top:.35rem;font-family:var(--sans)}

/* ---------- prose (legal pages) --------------------------------------- */

.prose{max-width:38rem}
.prose h2{font-size:1.5rem;margin:2.6rem 0 .9rem}
.prose h2:first-child{margin-top:0}
.prose p{color:var(--ink-soft)}
.prose ul{color:var(--ink-soft);padding-left:1.1rem;margin:0 0 1.15rem}
.prose li{margin-bottom:.5rem}

/* ---------- footer ---------------------------------------------------- */

.site-foot{border-top:1px solid var(--rule);background:var(--surface);padding-block:3.5rem 2.5rem;font-size:.92rem}
.foot-grid{display:grid;grid-template-columns:1.6fr repeat(3,1fr);gap:2.5rem}
@media (max-width:56rem){.foot-grid{grid-template-columns:1fr 1fr;gap:2rem}}
.foot-brand .wordmark{margin-bottom:.9rem}
.foot-brand p{color:var(--ink-faint);font-size:.9rem;max-width:22rem;margin:0}
.foot-grid h4{font:600 .72rem/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-faint);margin:0 0 1rem}
.foot-grid ul{list-style:none;margin:0;padding:0;display:grid;gap:.6rem}
.foot-grid a{color:var(--ink-soft);text-decoration:none}
.foot-grid a:hover{color:var(--accent)}
.legal{margin-top:3rem;padding-top:1.5rem;border-top:1px solid var(--rule);font-size:.84rem;color:var(--ink-faint);display:flex;flex-wrap:wrap;gap:.4rem 1.5rem}
.legal p{margin:0}


/* ---------- hero, stacked (headline over a full-width frame) --------- */

.hero-stack{padding-block:clamp(3rem,6vw,5rem) clamp(3.5rem,6vw,5.5rem)}
.hero-stack h1{max-width:17ch;margin-bottom:1.4rem}
.hero-stack .lede{max-width:40rem}
.hero-figure{margin:clamp(2.75rem,5vw,4.25rem) 0 0}
.mock-figure{margin:clamp(2rem,4vw,3rem) 0 0}
figure.hero-figure,figure.mock-figure{margin-inline:0}

/* ---------- application frame ----------------------------------------
   An HTML rendering of the app shell, in the shell's own tokens. Sized in
   em so one markup block works in a hero and in a column.               */

.app{
  --app-fs:clamp(.6rem,.78vw + .3rem,.8rem);
  font:400 var(--app-fs)/1.45 var(--sans);color:var(--ink);
  background:var(--card);border:1px solid var(--rule-strong);border-radius:8px;
  box-shadow:var(--shadow);overflow:hidden;text-align:left;
}
.app-title{display:flex;align-items:center;gap:.45em;padding:.7em 1em;border-bottom:1px solid var(--rule);background:var(--surface)}
.app-title .tl{width:.85em;height:.85em;border-radius:50%;background:var(--rule-strong)}
.app-title .name{margin-left:.6em;color:var(--ink-faint);font-size:.9em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.app-body{display:grid;grid-template-columns:19% minmax(0,1fr) 34%;min-height:30em}
.app-left{background:var(--surface);border-right:1px solid var(--rule);padding:1.1em 1em;display:flex;flex-direction:column;gap:.2em;min-width:0}
.app-brand{font-family:var(--serif);font-size:1.3em;color:var(--brand-ink);margin-bottom:.7em}
.app-new{color:var(--ink);margin-bottom:.8em}
.app-new::before{content:"+";color:var(--accent);margin-right:.4em;font-weight:600}
.app-group{font-size:.76em;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-faint);margin:.7em 0 .25em}
.app-chat{padding:.42em .6em;border-radius:4px;color:var(--ink-soft);line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.app-chat small{display:block;font-size:.82em;color:var(--ink-faint);margin-top:.15em}
.app-chat.on{background:var(--active);color:var(--ink);box-shadow:inset 2px 0 0 var(--accent)}
.app-account{margin-top:auto;padding-top:.8em;border-top:1px solid var(--rule);color:var(--ink-soft);font-size:.9em;display:flex;align-items:center;gap:.45em}
.app .dot{width:.55em;height:.55em;border-radius:50%;background:var(--sage);flex:none;display:inline-block}
.app .dot.live{background:var(--accent)}
.app-centre{padding:1.4em 1.6em 1.2em;display:flex;flex-direction:column;gap:1em;min-width:0}
.msg b{display:block;font-weight:600;font-size:.85em;color:var(--ink-faint);margin-bottom:.25em}
.msg p{margin:0;max-width:46em}
.msg.you p{color:var(--ink-soft)}
.pills{display:flex;flex-wrap:wrap;gap:.4em;margin-top:.6em}
.pill{border:1px solid var(--rule);border-radius:99px;padding:.18em .7em .18em .55em;font-size:.88em;color:var(--ink-soft);display:inline-flex;align-items:center;gap:.4em;background:var(--card);white-space:nowrap}
.pill::before{content:"";width:.45em;height:.45em;border-radius:50%;background:var(--sage)}
.gate{border:1px solid color-mix(in srgb,var(--accent) 45%,var(--rule));border-radius:6px;padding:.9em 1em;background:var(--accent-soft);max-width:46em}
.gate-head{font-weight:600;color:var(--accent);display:flex;align-items:center;gap:.45em;margin-bottom:.3em}
.gate-head .r{margin-left:auto;font-weight:400;color:var(--ink-faint);font-size:.9em}
.gate p{margin:0 0 .75em;color:var(--ink)}
.gate-tuple{display:flex;flex-wrap:wrap;gap:.35em 1.1em;font-size:.9em;color:var(--ink-soft);margin:0 0 .8em}
.gate-tuple em{font-style:normal;color:var(--accent)}
.gate-actions{display:flex;flex-wrap:wrap;gap:.5em;align-items:center}
.gate-actions span{border:1px solid var(--rule-strong);border-radius:3px;padding:.3em .8em;font-weight:500;color:var(--ink);background:var(--card)}
.gate-actions .fill{background:var(--ink);color:var(--ground);border-color:var(--ink)}
.gate-actions .why{margin-left:auto;border:0;background:transparent;color:var(--ink-faint);font-weight:400;padding-right:0}
.composer{margin-top:auto;border:1px solid var(--rule-strong);border-radius:.8em;padding:.65em .65em .65em 1em;display:flex;align-items:center;color:var(--ink-faint)}
.composer .send{margin-left:auto;width:1.9em;height:1.9em;border-radius:50%;background:var(--ink);color:var(--ground);display:grid;place-items:center;font-weight:600;flex:none}
.ctx{font-size:.85em;color:var(--ink-faint);margin-top:-.45em}
.ctx b{color:var(--ink-soft);font-weight:500}
.ctx em{font-style:normal;color:var(--accent)}
.app-right{border-left:1px solid var(--rule);display:flex;flex-direction:column;min-width:0}
.app-tabs{display:flex;gap:1em;padding:.7em 1.1em;border-bottom:1px solid var(--rule);font-size:.9em;color:var(--ink-faint);background:var(--surface);white-space:nowrap;overflow:hidden}
.app-tabs .on{color:var(--ink);font-weight:500}
.app-tabs b{font-weight:600;color:var(--warn)}
.doc{padding:1.2em 1.3em 1.3em;font-family:var(--serif);line-height:1.6}
.doc h4{font:400 1.25em/1.2 var(--serif);margin:0 0 .6em}
.doc p{margin:0 0 .9em}
.doc-reg{font-family:var(--sans);font-size:.85em;border-top:1px solid var(--rule);padding-top:.8em;display:grid;gap:.3em;color:var(--ink-soft)}
.doc-reg b{color:var(--ink);font-weight:600}
.app-strip{display:flex;align-items:center;gap:.5em;padding:.55em 1em;border-top:1px solid var(--rule);background:var(--surface);font-size:.9em;color:var(--ink-soft)}
.app-strip .right{margin-left:auto;color:var(--ink)}
@media (max-width:48rem){
  .app-body{grid-template-columns:1fr}
  .app-left{display:none}
  .app-right{border-left:0;border-top:1px solid var(--rule)}
}

/* ---------- claim standing (the tell, put back) ----------------------- */

.claim{padding:.06em .3em;border-radius:3px;background:var(--claim-bg);color:var(--ink);-webkit-box-decoration-break:clone;box-decoration-break:clone}
.claim i{font:600 .6em/1 var(--sans);letter-spacing:.07em;text-transform:uppercase;font-style:normal;color:var(--claim-ink);margin-left:.5em;vertical-align:.18em;white-space:nowrap}
.claim-fact{--claim-bg:color-mix(in srgb,var(--sage) 15%,transparent);--claim-ink:var(--sage)}
.claim-assume{--claim-bg:color-mix(in srgb,var(--warn) 17%,transparent);--claim-ink:var(--warn)}
.claim-tbd{--claim-bg:color-mix(in srgb,var(--ink-faint) 17%,transparent);--claim-ink:var(--ink-faint)}
.claim-prop{--claim-bg:var(--accent-soft);--claim-ink:var(--accent)}

.tell{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.25rem,3vw,2.5rem)}
@media (max-width:52rem){.tell{grid-template-columns:1fr}}
.tell > div{border:1px solid var(--rule);border-radius:6px;padding:1.6rem 1.8rem 1.4rem;background:var(--card)}
.tell .lab{font:600 .72rem/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-faint);margin:0 0 1.1rem}
.tell .b .lab{color:var(--accent)}
.tell p{font-family:var(--serif);font-size:1.08rem;line-height:1.75;margin:0}
.tell .a p{color:var(--ink-soft)}
.tell .fin{margin-top:1.1rem;padding-top:.9rem;border-top:1px solid var(--rule);font:400 .9rem/1.5 var(--sans);color:var(--ink-faint)}
.tell .b{border-color:var(--rule-strong);box-shadow:var(--shadow)}
.tell .b .fin{color:var(--ink)}

/* ---------- numbers ---------------------------------------------------- */

.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:1.5rem;margin-bottom:clamp(3rem,5vw,4.5rem)}
@media (max-width:52rem){.stats{grid-template-columns:1fr 1fr;gap:1.25rem}}
.stats div{border-top:1px solid var(--rule-strong);padding-top:1rem}
.stats .n{font-family:var(--serif);font-size:clamp(2.4rem,4.5vw,3.6rem);line-height:1;color:var(--accent);letter-spacing:-.02em;display:block;margin-bottom:.55rem}
.stats .l{font-size:.95rem;color:var(--ink-soft);line-height:1.45;display:block;max-width:15rem}

/* feature-grid variants */
.features.words h3{font-family:var(--serif);font-weight:400;font-size:1.7rem;letter-spacing:-.015em;margin-bottom:.5rem}
.features .g{margin-top:1rem;padding-top:.8rem;border-top:1px solid var(--rule);font-size:.9rem;color:var(--ink);font-weight:500}
.features .g::before{content:"◆";color:var(--accent);margin-right:.5em;font-size:.72em;vertical-align:.1em}

/* closing credential line inside a band */
.cred{margin:2.5rem 0 0;padding-top:1.25rem;border-top:1px solid var(--band-rule);font-size:.9rem;color:var(--band-soft);max-width:36rem}
.cred a{color:var(--band-ink)}

/* ---------- piping frame (proxy for the SWB interface) ---------------- */

.pipe .app-body{grid-template-columns:17% minmax(0,1fr) 30%;min-height:0}
.pipe-view{background:var(--surface);position:relative;display:flex;align-items:center}
.pipe-view svg{width:100%;height:auto;display:block}
.pipe-view .hud{position:absolute;left:1em;top:.8em;font:500 .8em/1.4 var(--mono);color:var(--ink-faint);letter-spacing:.02em}
.pipe-view .hud b{color:var(--ink);font-weight:500;display:block}
.res{padding:1em 1.2em 1.1em;font-size:.95em;display:grid;gap:.45em;align-content:start}
.res-case{margin:0 0 .4em;color:var(--ink-soft)}
.res-case b{color:var(--ink);font-weight:500;display:block}
.res-h{margin:.5em 0 .1em;font-size:.78em;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-faint)}
.res-row{display:grid;grid-template-columns:2.2em 1fr 1fr;gap:.6em;font-family:var(--mono);font-size:.9em;color:var(--ink-soft)}
.res-row span:first-child{color:var(--ink);font-weight:500}
.res-bar{display:grid;grid-template-columns:2.2em 1fr 2.6em;gap:.6em;align-items:center;font-family:var(--mono);font-size:.9em;color:var(--ink-soft)}
.res-bar span:first-child{color:var(--ink);font-weight:500}
.res-bar span:last-child{text-align:right}
.bar{height:.5em;background:var(--rule);border-radius:99px;overflow:hidden;display:block}
.bar i{display:block;height:100%;background:var(--sage);border-radius:99px}
.bar.w i{background:var(--warn)}
.bar i.p41{width:41%}.bar i.p72{width:72%}.bar i.p38{width:38%}
.warnrow{margin-top:.6em;border:1px solid color-mix(in srgb,var(--warn) 50%,var(--rule));background:color-mix(in srgb,var(--warn) 10%,transparent);border-radius:4px;padding:.5em .7em;font-family:var(--mono);font-size:.8em;color:var(--ink);line-height:1.4}
.res-note{margin:.4em 0 0;font-size:.85em;color:var(--ink-faint)}

/* ---------- utilities (the host CSP forbids inline style attributes) -- */

.lede-cta{max-width:36rem;margin-top:1.4rem}
.h-narrow{max-width:18ch}
.mt-section{margin-top:var(--section)}
.mt-lg{margin-top:2.75rem}
.mt-md{margin-top:1.6rem}
.mt-h3{margin-top:2.5rem}
.max-42{max-width:42rem}
.steps.four{grid-template-columns:repeat(4,1fr)}
@media (max-width:62rem){.steps.four{grid-template-columns:1fr 1fr}}
@media (max-width:40rem){.steps.four{grid-template-columns:1fr}}
.spec.tight > div{padding:1.15rem 0}
.tell.stack{grid-template-columns:1fr;gap:1.25rem}
.tell.stack p{font-size:1.04rem}