/* ============================================================
   Kanonik site stylesheet v2 - "story-builder" design, ported 1:1.

   This is a faithful static port of the React/Tailwind landing
   built in the story-builder-booster project. Every value here
   is the resolved Tailwind value from that source (spacing on
   the 4px scale, the bracketed type sizes, the exact tracking,
   radii and shadows), so the rendered page matches it.

   Two deliberate deviations, both forced by the WCAG 2.2 AA
   floor that CI enforces (axe + Lighthouse gate the deploy):
     --ink-mute  #6d7772 -> #606a65  (was 3.76:1 on --surface-2)
     --signal    #d97757 -> #b55333  (was 2.88:1 on --cream)
   Both are the minimum darkening that clears 4.5:1 on every
   surface the token is actually used on.

   The display face is Inter (National in the source is a
   licensed Klim face and was never vendored, so the source
   rendered in its fallback anyway). Inter and IBM Plex Mono
   are self-hosted from /fonts/ so font-src 'self' holds.

   Used by index.html and the help center. The remaining
   interior pages still run the older kanonik.css.
   ============================================================ */

/* ---------- self-hosted faces (Fontsource, OFL-1.1) ---------- */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/fonts/inter-latin-wght-normal.woff2") format("woff2-variations");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/ibm-plex-mono-latin-400-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/fonts/ibm-plex-mono-latin-500-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

/* ---------- tokens (source :root, verbatim except the two AA fixes) ---------- */
:root{
  --background:#eef1ed;
  --surface:#ffffff;
  --surface-2:#e4e9e2;
  --cream:#f5f6f2;

  --ink:#0e1a17;
  --ink-soft:#3a4642;
  --ink-mute:#606a65;          /* source #6d7772, darkened for AA */

  --evergreen:#0a3d34;
  --evergreen-deep:#062822;
  --mint:#8fcaa3;
  --mint-soft:#cbe6d3;

  --signal:#b55333;            /* source #d97757, darkened for AA */
  --signal-deep:#aa4828;       /* signal text sitting on its own tint */

  --line:#d3d8d0;

  --font-sans:"Inter",ui-sans-serif,system-ui,sans-serif;
  --font-mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
}

/* ---------- reset (Tailwind preflight, trimmed to what the page uses) ---------- */
*,*::before,*::after{box-sizing:border-box;border:0 solid var(--line);margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  background:var(--background);
  color:var(--ink);
  font-family:var(--font-sans);
  font-feature-settings:"ss01","cv11";
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  line-height:1.5;
}
h1,h2,h3,h4{font-size:inherit;font-weight:inherit}
ul,ol{list-style:none}
a{color:inherit;text-decoration:none}
img,svg,iframe{display:block;max-width:100%}
button{font:inherit;color:inherit;background:none;cursor:pointer}
input{font:inherit}
::selection{background:var(--evergreen);color:var(--cream)}
:focus-visible{outline:2px solid var(--evergreen);outline-offset:2px;border-radius:4px}
.skip-link{position:absolute;left:-9999px}
.skip-link:focus{left:16px;top:12px;z-index:100;background:var(--surface);color:var(--ink);padding:10px 16px;border-radius:6px;font-size:14px}

/* ---------- shared primitives ---------- */
.wrap{margin-inline:auto;max-width:1240px;padding-inline:24px}
.mono{font-family:var(--font-mono)}
.display{font-weight:600;letter-spacing:-.022em}

.kicker{font-family:var(--font-mono);font-size:11px;line-height:1.5;letter-spacing:.24em;text-transform:uppercase;color:var(--evergreen)}
.slabel{display:flex;align-items:center;gap:12px;font-family:var(--font-mono);font-size:11px;line-height:1.5;letter-spacing:.24em;text-transform:uppercase;color:var(--ink-mute)}
.slabel .i{color:var(--evergreen)}
.slabel .r{height:1px;width:32px;background:var(--line)}

/* section frames */
/* overflow-x:clip (not hidden) contains the decorative -glow bleeds without
   creating a scroll container, so position:sticky inside a section still
   works. Without it the blurred glows widen the page on narrow phones. */
.sec{border-bottom:1px solid var(--line);padding-block:112px;overflow-x:clip}
.sec-cream50{background:color-mix(in srgb,var(--cream) 50%,transparent)}
.sec-cream40{background:color-mix(in srgb,var(--cream) 40%,transparent)}
.sec-deep{background:var(--evergreen-deep);color:var(--cream)}

/* headings, at the source's exact sizes.
   break-word is a safety net: at 320px a single long word in a 44-56px
   heading is wider than the column and would otherwise widen the page. */
h1,h2,h3,.h1,.h2,[class^="h3-"]{overflow-wrap:break-word}
.h1{font-weight:600;font-size:56px;line-height:1.02;letter-spacing:-.03em;color:var(--ink);margin-top:20px}
.h2{font-weight:600;font-size:44px;line-height:1.05;letter-spacing:-.025em;color:var(--ink)}
.h2-deep{color:var(--cream)}
.h3-30{font-weight:600;font-size:30px;line-height:1.12;letter-spacing:-.02em;color:var(--ink)}
.h3-28{font-weight:600;font-size:28px;line-height:1.1;letter-spacing:-.02em;color:var(--ink)}
.h3-26{font-weight:600;font-size:26px;line-height:1.15;letter-spacing:-.015em;color:var(--ink)}
.h3-24{font-weight:600;font-size:24px;line-height:1.15;letter-spacing:-.015em;color:var(--ink)}
.h3-22{font-weight:600;font-size:22px;line-height:1.15;letter-spacing:-.015em;color:var(--ink)}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;border-radius:6px;padding:12px 20px;font-size:14px;font-weight:500;text-decoration:none;transition:background .15s ease,border-color .15s ease}
.btn-lg{padding:12px 20px;font-size:14px}
.btn-md{padding:8px 16px;font-size:13px}
.btn-eg{background:var(--evergreen);color:var(--cream);box-shadow:0 1px 2px 0 rgb(0 0 0/.05)}
.btn-eg:hover{background:var(--evergreen-deep)}
.btn-out{border:1px solid var(--line);background:var(--surface);color:var(--ink);font-weight:500}
.btn-out:hover{background:var(--cream)}
.btn-mint{background:var(--mint);color:var(--evergreen-deep)}
.btn-mint:hover{background:var(--mint-soft)}
.btn-ghost-d{border:1px solid rgb(255 255 255/.2);color:var(--cream)}
.btn-ghost-d:hover{background:rgb(255 255 255/.05)}

/* ============================================================
   Nav
   ============================================================ */
.nav{position:sticky;top:0;z-index:40;border-bottom:1px solid color-mix(in srgb,var(--line) 70%,transparent);background:color-mix(in srgb,var(--background) 85%,transparent);backdrop-filter:blur(8px)}
.nav-in{margin-inline:auto;display:flex;max-width:1240px;align-items:center;justify-content:space-between;gap:16px;padding:16px 24px}
.nav-brand{display:flex;min-width:0;align-items:center;gap:12px}
.nav-brand img{height:28px;width:28px;flex:none}
.nav-brand .nm{font-weight:600;letter-spacing:-.022em;font-size:20px;line-height:1;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.nav-brand .tag{display:none;font-family:var(--font-mono);font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--ink-mute)}
.nav-links{display:none;gap:24px;font-size:13px;color:var(--ink-soft)}
.nav-links a:not(.btn):hover{color:var(--ink)}
.nav-right{display:flex;align-items:center;gap:8px}
.nav-signin{display:none;font-size:13px;color:var(--ink-soft)}
.nav-signin:hover{color:var(--ink)}
.nav-cta{display:none}
.nav-burger{display:grid;height:40px;width:40px;flex:none;place-items:center;border:1px solid var(--line);border-radius:6px;background:var(--surface);color:var(--ink)}
.nav-burger:hover{background:var(--cream)}
.nav-menu{border-top:1px solid var(--line);background:var(--background)}
.nav-menu[hidden]{display:none}
.nav-menu nav{margin-inline:auto;display:flex;max-width:1240px;flex-direction:column;padding:8px 16px}
.nav-menu nav a:not(.btn){border-radius:6px;padding:12px;font-size:15px;color:var(--ink-soft)}
.nav-menu nav a:not(.btn):hover{background:var(--cream);color:var(--ink)}
.nav-menu .pair{margin-top:8px;display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:8px 4px 12px}
.nav-menu .pair a:not(.btn){border-radius:6px;padding:8px 12px;text-align:center;font-size:13px}
.nav-menu .pair .a1{border:1px solid var(--line);background:var(--surface);color:var(--ink)}
.nav-menu .pair .a2{background:var(--evergreen);color:var(--cream);font-weight:500}
@media(min-width:640px){.nav-cta{display:inline-flex}}
@media(min-width:1024px){
  .nav-links{display:flex}
  .nav-signin{display:inline}
  .nav-burger{display:none}
  .nav-menu{display:none}
}
@media(min-width:1280px){.nav-brand .tag{display:inline-block}.nav-links{gap:32px}}

/* ============================================================
   Hero
   ============================================================ */
.hero{position:relative;overflow:hidden}
.hero .dots,.hero .fade{position:absolute;inset:0;z-index:-10;pointer-events:none}
.hero .dots{background-image:radial-gradient(circle at 1px 1px,rgb(10 61 52/.08) 1px,transparent 0);background-size:22px 22px}
.hero .fade{background-image:linear-gradient(to bottom,var(--background),var(--background),color-mix(in srgb,var(--cream) 60%,transparent))}
.hero-grid{margin-inline:auto;display:grid;max-width:1240px;grid-template-columns:1fr;gap:56px;padding:64px 24px 96px}
.hero-copy{display:flex;flex-direction:column;justify-content:center}
.hero-lede{margin-top:24px;max-width:600px;font-size:18px;line-height:1.55;color:var(--ink-soft)}
.hero-cta{margin-top:32px;display:flex;flex-wrap:wrap;align-items:center;gap:12px}
.hero-fine{margin-top:24px;max-width:520px;font-size:12.5px;line-height:1.6;color:var(--ink-mute)}
.hero-art{display:flex;align-items:center}
@media(min-width:640px){.h1{font-size:68px}}
@media(min-width:1024px){
  .hero-grid{grid-template-columns:1.05fr 1fr;gap:64px;padding-top:96px;padding-bottom:128px}
  .h1{font-size:80px}
}

/* proof strip under the hero */
.strip{border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:color-mix(in srgb,var(--surface) 60%,transparent)}
.strip-in{margin-inline:auto;display:grid;max-width:1240px;grid-template-columns:1fr;row-gap:24px;padding:24px;font-size:13px}
.strip-i{display:flex;align-items:flex-start;gap:12px}
.strip-i .n{font-family:var(--font-mono);font-size:11px;letter-spacing:.22em;color:var(--evergreen)}
.strip-i .t{display:block;font-weight:500;color:var(--ink)}
.strip-i .s{display:block;margin-top:2px;font-size:12px;line-height:1.45;color:var(--ink-mute)}
@media(min-width:640px){.strip-in{grid-template-columns:1fr 1fr}}
@media(min-width:1024px){.strip-in{grid-template-columns:repeat(4,1fr)}}

/* ============================================================
   Hero infographic: the chat fades, the record holds
   ============================================================ */
.hs{position:relative;width:100%}
.hs-glow{position:absolute;inset:-32px;z-index:-10;border-radius:36px;background:color-mix(in srgb,var(--mint-soft) 45%,transparent);filter:blur(48px)}
.hs-card{position:relative;display:grid;grid-template-columns:46% 54%;overflow:hidden;border:1px solid var(--line);border-radius:16px;background:var(--surface);box-shadow:0 40px 80px -40px rgb(6 40 34/.35);aspect-ratio:5/6}

.hs-l{position:relative;display:flex;min-width:0;min-height:0;flex-direction:column;background:#101410}
.hs-smoke{position:absolute;inset:0;pointer-events:none;opacity:.5;background:radial-gradient(120% 60% at 50% -10%,rgb(143 202 163/.16),transparent 60%)}
.hs-lbar{position:relative;display:flex;align-items:center;gap:8px;border-bottom:1px solid rgb(255 255 255/.1);padding:10px 12px}
.hs-lbar .dot{height:6px;width:6px;border-radius:9999px;background:rgb(232 237 233/.4)}
.hs-lbar .who{font-family:var(--font-mono);font-size:9px;letter-spacing:.2em;text-transform:uppercase;color:rgb(232 237 233/.55)}
.hs-conn{margin-left:auto;display:inline-flex;align-items:center;gap:4px;border:1px solid rgb(143 202 163/.3);background:rgb(143 202 163/.1);border-radius:9999px;padding:2px 8px 2px 3px;white-space:nowrap}
.hs-conn .mk{display:grid;height:13px;width:13px;place-items:center;border-radius:9999px;background:var(--cream)}
.hs-conn .mk img{height:9px;width:9px}
.hs-conn .lb{font-family:var(--font-mono);font-size:8px;letter-spacing:.14em;text-transform:uppercase;color:var(--mint)}
.hs-lbody{position:relative;display:flex;min-height:0;flex:1;flex-direction:column;padding:0 12px 12px}
.hs-log{display:flex;min-height:0;flex:1;flex-direction:column;gap:8px;overflow-y:auto;padding-top:12px;scrollbar-width:none}
.hs-log::-webkit-scrollbar{display:none}
.hs-log .sp{flex:1}
.hs-msg{flex:none;border-radius:8px;padding:8px 10px;font-size:10.5px;line-height:1.45}
.hs-msg.ai{align-self:flex-start;max-width:96%;border:1px solid rgb(255 255 255/.1);background:rgb(255 255 255/.07);color:#e8ede9;border-bottom-left-radius:2px}
.hs-msg.you{align-self:flex-end;max-width:93%;background:#e8ede9;color:#101410;border-bottom-right-radius:2px}
.hs-msg .role{margin-bottom:4px;display:block;font-family:var(--font-mono);font-size:8px;letter-spacing:.18em;text-transform:uppercase;color:var(--mint)}
.hs-ask{margin-top:8px;display:flex;flex:none;align-items:center;gap:8px;border:1px solid rgb(255 255 255/.1);border-radius:6px;background:rgb(255 255 255/.04);padding:8px 10px}
.hs-ask span{font-family:var(--font-mono);font-size:9.5px;color:rgb(232 237 233/.4)}
.hs-ask i{margin-left:auto;height:6px;width:6px;border-radius:9999px;background:var(--mint);animation:hssPulse 1.4s ease-in-out infinite}
.hs-pull{position:absolute;right:0;top:58%;z-index:20;height:2px;width:62%;pointer-events:none;animation:hssPull .9s cubic-bezier(.55,0,.2,1) forwards}
.hs-pull .b{height:100%;width:100%;border-radius:9999px;background:linear-gradient(to right,transparent,var(--mint),var(--mint))}
.hs-pull .h{position:absolute;right:-3px;top:-3px;height:8px;width:8px;border-radius:9999px;background:var(--mint);box-shadow:0 0 10px 2px rgb(143 202 163/.75)}

.hs-r{position:relative;display:flex;min-width:0;min-height:0;flex-direction:column}
.hs-rbar{display:flex;align-items:center;justify-content:space-between;gap:8px;border-bottom:1px solid var(--line);background:color-mix(in srgb,var(--cream) 70%,transparent);padding:10px 12px}
.hs-rbar .mk{display:flex;align-items:center;gap:8px}
.hs-rbar .mk i{display:grid;height:16px;width:16px;flex:none;place-items:center;border-radius:4px;background:var(--evergreen)}
.hs-rbar .mk span{font-family:var(--font-mono);font-size:9px;letter-spacing:.2em;text-transform:uppercase;color:var(--evergreen)}
.hs-state{border:1px solid var(--line);border-radius:9999px;padding:3px 8px;font-family:var(--font-mono);font-size:8.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-mute);white-space:nowrap;transition:color .5s ease,background .5s ease,border-color .5s ease}
.hs-state.work{border-color:color-mix(in srgb,var(--evergreen) 40%,transparent);background:color-mix(in srgb,var(--evergreen) 10%,transparent);color:var(--evergreen)}
.hs-state.wait{border-color:color-mix(in srgb,var(--signal) 50%,transparent);background:color-mix(in srgb,var(--signal) 12%,transparent);color:var(--signal-deep)}
.hs-state.sealed{border-color:var(--evergreen);background:var(--evergreen);color:var(--cream)}
.hs-rbody{position:relative;display:flex;min-height:0;flex:1;flex-direction:column;gap:8px;padding:12px}
.hs-count{display:flex;flex:none;align-items:baseline;justify-content:space-between;font-family:var(--font-mono);font-size:8.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-mute)}
.hs-count .r{letter-spacing:.16em}
.hs-chain{position:relative;min-height:0;flex:1;overflow-y:auto;scrollbar-width:none}
.hs-chain::-webkit-scrollbar{display:none}
.hs-chain .spine{position:absolute;left:9px;top:8px;bottom:8px;width:1px;background:var(--line)}
.hs-blocks{display:flex;flex-direction:column;gap:6px}
.hs-b{position:relative;display:flex;flex:none;gap:8px}
.hs-b.fresh{animation:hssCrystal .62s cubic-bezier(.2,.9,.2,1)}
.hs-b .kind{position:relative;z-index:10;display:grid;height:18px;width:18px;flex:none;place-items:center;margin-top:4px;border:1px solid color-mix(in srgb,var(--evergreen) 35%,transparent);border-radius:5px;background:var(--cream)}
.hs-b .kind.sign{border-color:color-mix(in srgb,var(--signal) 50%,transparent);background:color-mix(in srgb,var(--signal) 12%,transparent)}
.hs-b .kind.seal{border-color:var(--evergreen);background:var(--evergreen)}
.hs-b .body{min-width:0;flex:1;border:1px solid var(--line);border-radius:8px;background:color-mix(in srgb,var(--cream) 60%,transparent);padding:6px 10px}
.hs-b.fresh .body{border-color:color-mix(in srgb,var(--evergreen) 40%,transparent);background:color-mix(in srgb,var(--evergreen) 6%,transparent)}
.hs-b .top{display:flex;align-items:baseline;justify-content:space-between;gap:8px}
.hs-b .lab{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:11px;line-height:1.25;color:var(--ink)}
.hs-b .hash{flex:none;font-family:var(--font-mono);font-size:8.5px;color:var(--evergreen)}
.hs-b .meta{display:block;margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-family:var(--font-mono);font-size:9px;color:var(--ink-mute)}
.hs-bit{display:grid;flex:none;grid-template-columns:1fr 1fr;gap:8px;border:1px solid var(--line);border-radius:8px;background:color-mix(in srgb,var(--cream) 50%,transparent);padding:8px 10px;font-size:10px}
.hs-bit dt{color:var(--ink-mute)}
.hs-bit dd{font-family:var(--font-mono);color:var(--ink)}
.hs-vf{flex:none;padding:10px 12px;background:var(--evergreen);color:#e8ede9;transition:background .5s ease}
.hs-vf.building{background:#0a3d34}
.hs-vf .l{font-family:var(--font-mono);font-size:8.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--mint)}
.hs-vf .c{margin-top:4px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-family:var(--font-mono);font-size:10px;color:#e8ede9}
.hs-vf .c b{font-weight:400;color:var(--mint)}
.hs-cap{margin-top:12px;text-align:center;font-family:var(--font-mono);font-size:10px;line-height:1.5;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-mute);min-height:3em}

/* ---------- drawn separators ----------
   The design's mono labels lean on a middle dot, an em-rule and a
   right arrow as separators. Those glyphs are banned from deployed
   copy by the ascii-typography gate (they are AI-writing tells in
   prose), so they are drawn here instead of typed. Same picture,
   no banned character in any HTML file. All inherit currentColor,
   so they tint with whatever label they sit in. */
.dsep{display:inline-block;width:.3em;height:.3em;margin:0 .55em;border-radius:9999px;background:currentColor;opacity:.65;vertical-align:middle}
.msep{display:inline-block;width:.95em;height:1px;margin:0 .6em;background:currentColor;opacity:.6;vertical-align:middle}
.asep{display:inline-block;width:1em;height:.8em;margin-right:.4em;background:currentColor;vertical-align:middle;
  -webkit-mask:var(--arrow) center/contain no-repeat;mask:var(--arrow) center/contain no-repeat}
:root{--arrow:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 8'%3E%3Cpath d='M0 4h8M5.2 1.2 8.4 4 5.2 6.8' fill='none' stroke='%23000' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}

@keyframes hssIn{from{transform:translateY(8px)}to{transform:translateY(0)}}
@keyframes hssPulse{0%,100%{opacity:1}50%{opacity:.25}}
@keyframes hssPull{0%{transform:translateX(-70%) scaleX(.25);opacity:0}25%{opacity:1}100%{transform:translateX(6%) scaleX(1);opacity:0}}
@keyframes hssCrystal{0%{transform:translateX(-14px) scale(.94)}100%{transform:translateX(0) scale(1)}}
.hs-msg.in{animation:hssIn .42s cubic-bezier(.2,.8,.2,1)}

/* ============================================================
   Shared "proof block" chrome used by the small infographics
   ============================================================ */
.pb{position:relative;width:100%}
.pb-glow{position:absolute;inset:-24px;z-index:-10;border-radius:24px;background:color-mix(in srgb,var(--mint-soft) 50%,transparent);filter:blur(32px)}
.pb-card{position:relative;display:flex;flex-direction:column;overflow:hidden;border:1px solid var(--line);border-radius:12px;background:var(--surface);box-shadow:0 30px 60px -30px rgb(6 40 34/.28);aspect-ratio:5/6}
.pb-bar{display:flex;flex:none;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);padding:12px 20px}
.pb-bar .l{font-family:var(--font-mono);font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--evergreen)}
.pb-bar .r{font-family:var(--font-mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-mute)}
.pb-foot{position:relative;z-index:1;margin-top:auto;flex:none;border-top:1px solid var(--line);background:var(--evergreen);color:var(--cream);padding:12px 20px}
.pb-foot .row{display:flex;align-items:center;justify-content:space-between;gap:16px}
.pb-foot .l{font-family:var(--font-mono);font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--mint)}
.pb-foot .c{margin-top:4px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-family:var(--font-mono);font-size:11.5px;color:var(--cream)}
.pb-foot .c b{font-weight:400;color:var(--mint)}
.pb-foot .tag{flex:none;font-family:var(--font-mono);font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--mint)}

/* 09 draft vs evidence */
.v9{display:grid;flex:1;grid-template-columns:1fr 1fr;min-height:0}
.v9 .col{display:flex;flex-direction:column;gap:12px;padding:20px}
.v9 .col.a{background:color-mix(in srgb,var(--cream) 70%,transparent)}
.v9 .col.b{background:var(--surface);border-left:1px solid var(--line)}
.v9 .hd{font-family:var(--font-mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-mute)}
.v9 .col.b .hd{color:var(--evergreen)}
.v9 .quote{border:1px dashed var(--line);border-radius:6px;background:color-mix(in srgb,var(--surface) 60%,transparent);padding:12px;font-size:12px;line-height:1.375;color:var(--ink-mute)}
.v9 .col.b .quote{border-style:solid;background:color-mix(in srgb,var(--mint-soft) 30%,transparent);color:var(--ink)}
.v9 ul{margin-top:4px;display:flex;flex-direction:column;gap:8px;font-size:12px}
.v9 .col.a li{color:var(--signal)}
.v9 .col.b li{color:var(--ink)}
.v9 li{display:flex;gap:8px}
.v9 .col.b li .m{color:var(--evergreen)}
.v9 .ft{margin-top:auto;font-family:var(--font-mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-mute)}
.v9 .col.b .ft{color:var(--evergreen)}

/* 02 the gate */
.v2{display:flex;min-height:0;flex:1;flex-direction:column;justify-content:center;gap:16px;padding-inline:20px;overflow:hidden}
.v2 .lbl{font-family:var(--font-mono);font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--ink-mute);margin-bottom:8px}
.v2 .q{display:flex;flex-direction:column;gap:8px}
.v2 .qi{display:flex;align-items:center;justify-content:space-between;border:1px solid var(--line);border-radius:6px;background:var(--cream);padding:8px 12px;font-size:12.5px;color:var(--ink-mute);transition:all .5s ease}
.v2 .qi.on{border-color:var(--evergreen);background:color-mix(in srgb,var(--mint-soft) 40%,transparent);color:var(--ink)}
.v2 .qi .s{font-family:var(--font-mono);font-size:10px;text-transform:uppercase;letter-spacing:.18em}
.v2 .sep{position:relative;display:flex;align-items:center;gap:12px}
.v2 .sep .ln{height:1px;flex:1;background:var(--line)}
.v2 .sep .pill{border:1px solid var(--evergreen);border-radius:9999px;background:var(--surface);padding:4px 12px;font-family:var(--font-mono);font-size:10px;text-transform:uppercase;letter-spacing:.2em;color:var(--evergreen)}
.v2 .rec{border:1px solid var(--line);border-radius:8px;background:var(--surface);padding:16px}
.v2 .rec .h{font-family:var(--font-mono);font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--evergreen)}
.v2 .rec .list{margin-top:8px;display:flex;flex-direction:column;gap:6px}
.v2 .rec .row{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--ink)}
.v2 .rec .row i{height:6px;width:6px;flex:none;border-radius:9999px;background:var(--evergreen)}
.v2 .rec .row .t{margin-left:auto;font-family:var(--font-mono);font-size:10.5px;color:var(--ink-mute)}
.v2 .rec .empty{font-size:12.5px;color:var(--ink-mute)}

/* 05 questionnaire */
.v5{display:flex;min-height:0;flex:1;flex-direction:column;gap:14px;padding:20px;overflow:hidden}
.v5 .top{display:flex;align-items:flex-end;justify-content:space-between}
.v5 .clock{font-weight:600;letter-spacing:-.022em;font-size:40px;line-height:1;color:var(--evergreen)}
.v5 .el{margin-top:4px;font-family:var(--font-mono);font-size:10px;text-transform:uppercase;letter-spacing:.2em;color:var(--ink-mute)}
.v5 .was{text-align:right}
.v5 .was .a{font-family:var(--font-mono);font-size:11px;color:var(--ink-mute);text-decoration:line-through}
.v5 .was .b{font-family:var(--font-mono);font-size:11px;color:var(--evergreen)}
.v5 .track{height:6px;width:100%;overflow:hidden;border-radius:9999px;background:var(--surface-2)}
.v5 .track i{display:block;height:100%;border-radius:9999px;background:var(--evergreen);transition:width .7s ease}
.v5 .qs{display:flex;flex-direction:column;gap:8px}
.v5 .qq{border:1px solid var(--line);border-radius:6px;background:var(--cream);padding:8px 12px}
.v5 .qq .t{font-size:12.5px;color:var(--ink)}
.v5 .qq .m{margin-top:4px;display:flex;align-items:center;gap:8px;font-family:var(--font-mono);font-size:10.5px;color:var(--ink-mute)}
.v5 .qq .m .src{color:var(--evergreen)}
.v5 .qq .m .ln{height:1px;flex:1;background:var(--line)}
.v5 .note{margin-top:auto;font-size:12px;line-height:1.375;color:var(--ink-soft)}

/* 04 frameworks fan-out */
.v4{display:flex;min-height:0;flex:1;flex-direction:column;padding:20px;overflow:hidden}
.v4 .ctl{border:1px solid var(--evergreen);border-radius:8px;background:color-mix(in srgb,var(--mint-soft) 40%,transparent);padding:14px}
.v4 .ctl .h{font-family:var(--font-mono);font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--evergreen)}
.v4 .ctl .t{margin-top:6px;font-size:14px;color:var(--ink)}
.v4 .ctl .m{margin-top:4px;font-family:var(--font-mono);font-size:11px;color:var(--ink-soft)}
.v4 .fan{position:relative;margin-block:12px;height:24px}
.v4 .fan .v{position:absolute;left:50%;top:0;height:24px;width:1px;transform:translateX(-50%);background:var(--line)}
.v4 .fan .h{position:absolute;left:8%;right:8%;bottom:0;height:1px;background:var(--line)}
.v4 .grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.v4 .fw{border:1px solid var(--line);border-radius:6px;background:color-mix(in srgb,var(--cream) 60%,transparent);padding:8px 12px;transition:all .5s ease}
.v4 .fw.on{border-color:var(--evergreen);background:var(--surface)}
.v4 .fw .n{font-size:12.5px;color:var(--ink-mute)}
.v4 .fw.on .n{color:var(--ink)}
.v4 .fw .s{margin-top:2px;font-family:var(--font-mono);font-size:10px;text-transform:uppercase;letter-spacing:.16em;color:var(--ink-mute)}

/* 03 bitemporal */
.v3{display:flex;min-height:0;flex:1;flex-direction:column;gap:12px;padding:16px 20px;overflow:hidden}
.v3 .intro{font-size:12.5px;line-height:1.375;color:var(--ink-soft)}
.v3 .two{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.v3 .cell{border:1px solid var(--line);border-radius:8px;background:var(--cream);padding:12px}
.v3 .cell .k{font-family:var(--font-mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-mute)}
.v3 .cell .v{margin-top:4px;font-family:var(--font-mono);font-size:15px;color:var(--evergreen)}
.v3 .cell .s{margin-top:2px;font-size:11px;color:var(--ink-mute)}
.v3 input[type=range]{width:100%;accent-color:var(--evergreen)}
.v3 .ticks{margin-top:4px;display:flex;justify-content:space-between;font-family:var(--font-mono);font-size:9.5px;text-transform:uppercase;letter-spacing:.14em;color:var(--ink-mute)}
.v3 .out{border:1px solid var(--line);border-radius:8px;background:var(--surface);padding:16px}
.v3 .out .row{display:flex;align-items:center;justify-content:space-between;gap:8px}
.v3 .out .nm{font-size:13px;color:var(--ink)}
.v3 .out .st{border-radius:9999px;background:var(--mint-soft);padding:2px 10px;font-family:var(--font-mono);font-size:10px;text-transform:uppercase;letter-spacing:.16em;color:var(--evergreen);white-space:nowrap}
.v3 .out .by{margin-top:8px;font-family:var(--font-mono);font-size:11px;color:var(--ink-mute)}

/* 10 trust site */
.v10-bar{display:flex;flex:none;align-items:center;gap:8px;border-bottom:1px solid var(--line);background:color-mix(in srgb,var(--surface-2) 60%,transparent);padding:10px 16px}
.v10-bar .dots{display:flex;gap:6px}
.v10-bar .dots i{height:8px;width:8px;border-radius:9999px;background:#c9cfc9}
.v10-bar .url{margin-left:8px;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;border-radius:4px;background:var(--surface);padding:4px 10px;font-family:var(--font-mono);font-size:10.5px;color:var(--ink-soft)}
.v10-bar .live{font-family:var(--font-mono);font-size:9.5px;text-transform:uppercase;letter-spacing:.16em;color:var(--evergreen)}
.v10{min-height:0;flex:1;padding:20px;overflow:hidden}
.v10 .t{font-weight:600;letter-spacing:-.022em;font-size:22px;line-height:1.25;color:var(--ink)}
.v10 .s{margin-top:4px;font-size:12px;color:var(--ink-soft)}
.v10 .grid{margin-top:20px;display:grid;grid-template-columns:1fr 1fr;gap:10px}
.v10 .cell{border:1px solid var(--line);border-radius:6px;background:var(--cream);padding:12px;transition:all .7s ease}
.v10 .cell.on{border-color:var(--evergreen);background:color-mix(in srgb,var(--mint-soft) 30%,transparent)}
.v10 .cell .k{font-size:12.5px;color:var(--ink)}
.v10 .cell .v{margin-top:2px;font-family:var(--font-mono);font-size:10px;text-transform:uppercase;letter-spacing:.16em;color:var(--ink-mute)}
.v10 .tdocs{margin-top:16px;display:flex;flex-direction:column;gap:8px}
.v10 .tdoc{display:flex;align-items:center;justify-content:space-between;border:1px solid var(--line);border-radius:6px;background:var(--surface);padding:8px 12px;font-size:12.5px;color:var(--ink)}
.v10 .tdoc .d{font-family:var(--font-mono);font-size:10px;text-transform:uppercase;letter-spacing:.16em;color:var(--evergreen)}

/* 07 the seal */
.v7{display:flex;min-height:0;flex:1;flex-direction:column;align-items:center;justify-content:center;gap:20px;padding-inline:28px;overflow:hidden}
.v7 .mark{position:relative;display:grid;height:132px;width:132px;place-items:center}
.v7 .mark .ring{position:absolute;inset:0;border:1px solid var(--evergreen);border-radius:9999px;transition:all 1s ease}
.v7 .mark .ring.off{border-color:var(--line);opacity:.6;transform:scale(.9)}
.v7 .mark .dash{position:absolute;inset:12px;border:1px dashed var(--mint);border-radius:9999px}
.v7 .mark .disc{display:grid;height:86px;width:86px;place-items:center;border-radius:9999px;background:var(--evergreen)}
.v7 .id{width:100%;text-align:center;display:flex;flex-direction:column;gap:8px}
.v7 .id .a{font-size:15px;color:var(--ink)}
.v7 .id .b{font-family:var(--font-mono);font-size:11px;color:var(--ink-mute)}
.v7 .kv{width:100%;display:flex;flex-direction:column;gap:6px;border:1px solid var(--line);border-radius:8px;background:var(--cream);padding:16px;font-family:var(--font-mono);font-size:10.5px}
.v7 .kv .r{display:flex;justify-content:space-between;gap:12px}
.v7 .kv .r .k{color:var(--ink-mute)}
.v7 .kv .r .v{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--evergreen)}

/* ============================================================
   Problem
   ============================================================ */
.problem-in{margin-inline:auto;max-width:1100px;padding-inline:24px}
.problem .h2{margin-top:24px}
.problem .cols{margin-top:48px;display:grid;grid-template-columns:1fr;gap:32px}
.problem .cols p{font-size:17px;line-height:1.6;color:var(--ink-soft)}
.problem .cols p b{font-weight:400;color:var(--ink)}
.problem .art{margin-top:56px;display:flex;justify-content:center}
.problem .art>div{width:100%;max-width:440px}
@media(min-width:768px){.problem .cols{grid-template-columns:1fr 1fr}}

/* ============================================================
   How it works
   ============================================================ */
.how .head{margin-top:24px;display:flex;flex-direction:column;justify-content:space-between;gap:32px}
.how .head .h2{max-width:760px}
.how .head p{max-width:360px;font-size:15px;color:var(--ink-soft)}
.steps{margin-top:56px;display:grid;grid-template-columns:1fr;gap:1px;overflow:hidden;border-radius:8px;background:var(--line)}
.steps li{background:var(--surface);padding:32px}
.steps .n{display:flex;align-items:baseline;justify-content:space-between}
.steps .n .a{font-family:var(--font-mono);font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--evergreen)}
.steps .n .b{font-family:var(--font-mono);font-size:11px;color:var(--ink-mute)}
.steps h3{margin-top:16px}
.steps p{margin-top:12px;font-size:14.5px;line-height:1.55;color:var(--ink-soft)}
/* minmax(0,1fr) not 1fr: the auto minimum of a 1fr track is the item's
   min-content width, which the fixed-ratio card blows past on a 375px
   phone and widens the whole page. */
.gate{margin-top:64px;display:grid;grid-template-columns:minmax(0,1fr);align-items:center;gap:48px}
.gate .h3-30{margin-top:16px;max-width:520px}
.gate .cp{margin-top:16px;max-width:520px;font-size:15.5px;line-height:1.6;color:var(--ink-soft)}
.gate .art{width:100%;min-width:0;max-width:380px;justify-self:center}
@media(min-width:768px){.how .head{flex-direction:row;align-items:flex-end}}
@media(min-width:640px){.steps{grid-template-columns:1fr 1fr}}
@media(min-width:1024px){
  .steps{grid-template-columns:repeat(3,1fr)}
  .gate{grid-template-columns:1fr 380px}
  .gate .art{justify-self:end}
}

/* ============================================================
   Capabilities
   ============================================================ */
.caps{margin-top:56px;display:grid;grid-template-columns:1fr;gap:40px}
.cap{display:flex;flex-direction:column;overflow:hidden;border:1px solid var(--line);border-radius:8px;background:var(--surface)}
.cap .in{padding:32px}
.cap .in p{margin-top:12px;font-size:14.5px;line-height:1.55;color:var(--ink-soft)}
.cap .vis{margin-top:auto;border-top:1px solid var(--line);background:color-mix(in srgb,var(--cream) 60%,transparent);padding:20px}
.cap .vis>div{margin-inline:auto;width:100%;max-width:340px;padding-block:8px}
@media(min-width:1024px){.caps{grid-template-columns:1fr 1fr}}

/* ============================================================
   Differentiators (unified-message IA item 6)

   Seven blocks on the landing's hairline-grid idiom. The seventh
   spans the full row: the auditor export is the payoff, and a
   3-column grid would otherwise leave two dead cells.
   ============================================================ */
.diffs{margin-top:56px;display:grid;grid-template-columns:1fr;gap:1px;overflow:hidden;border-radius:8px;background:var(--line)}
.diff{background:var(--surface);padding:32px}
.diff .n{font-family:var(--font-mono);font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--evergreen)}
.diff h3{margin-top:16px;font-weight:600;font-size:20px;line-height:1.2;letter-spacing:-.015em;color:var(--ink)}
.diff p{margin-top:12px;font-size:14.5px;line-height:1.55;color:var(--ink-soft)}
.diff.wide .n{color:var(--mint)}
.diff.wide{background:var(--evergreen-deep)}
.diff.wide h3{color:var(--cream)}
.diff.wide p{color:#c0c9c4;max-width:70ch}
@media(min-width:640px){.diffs{grid-template-columns:1fr 1fr}}
@media(min-width:1024px){.diffs{grid-template-columns:repeat(3,1fr)}.diff.wide{grid-column:1/-1}}
@media(min-width:640px) and (max-width:1023px){.diff.wide{grid-column:1/-1}}

/* ============================================================
   Who it serves
   ============================================================ */
.who .top{margin-top:24px;display:grid;grid-template-columns:1fr;gap:40px}
.who .top .sub{margin-top:16px;font-weight:600;letter-spacing:-.01em;font-size:22px;line-height:1.35;color:var(--ink-soft)}
.who .top .r{display:flex;flex-direction:column;justify-content:flex-end}
.who .top .r p{font-size:16px;line-height:1.6;color:var(--ink-soft)}
.segs{margin-top:56px;display:grid;grid-template-columns:1fr;gap:1px;overflow:hidden;border-radius:8px;background:var(--line)}
.seg{display:flex;flex-direction:column;background:var(--surface);padding:32px}
.seg .r{font-family:var(--font-mono);font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--evergreen)}
.seg h3{margin-top:20px}
.seg p{margin-top:12px;font-size:14px;line-height:1.55;color:var(--ink-soft)}
.who .note{margin-top:56px;display:grid;grid-template-columns:1fr;gap:32px;border:1px solid var(--line);border-radius:8px;background:var(--surface);padding:32px}
.who .note p{font-size:16px;line-height:1.6;color:var(--ink-soft)}
@media(min-width:768px){.segs{grid-template-columns:1fr 1fr}}
@media(min-width:1024px){
  .who .top{grid-template-columns:1.1fr 1fr}
  .segs{grid-template-columns:repeat(4,1fr)}
  .who .note{grid-template-columns:1fr 1.4fr}
}

/* ============================================================
   Proof
   ============================================================ */
.proof .lbl{display:flex;align-items:center;gap:12px;font-family:var(--font-mono);font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--mint)}
.proof .lbl .r{height:1px;width:32px;background:color-mix(in srgb,var(--mint) 40%,transparent)}
.proof .lbl .t{color:#adb8b4}
.proof .grid{margin-top:24px;display:grid;grid-template-columns:1fr;gap:48px}
.proof .lede{margin-top:24px;max-width:520px;font-size:16px;line-height:1.6;color:#b9c2be}
.bundle{margin-top:32px;display:flex;flex-direction:column;gap:16px}
.bundle li{display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid rgb(255 255 255/.1);padding-bottom:12px}
.bundle .l{display:flex;align-items:center;gap:12px}
.bundle .ok{display:grid;height:24px;width:24px;flex:none;place-items:center;border-radius:9999px;background:color-mix(in srgb,var(--mint) 15%,transparent);font-size:11px;color:var(--mint)}
.bundle .n{font-size:15px;color:#dde1dd}
.bundle .v{font-family:var(--font-mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:#7e8f8a}
.vframe{overflow:hidden;border:1px solid rgb(255 255 255/.1);border-radius:8px;background:#062822}
.vframe .top{display:flex;align-items:center;justify-content:space-between;gap:12px;border-bottom:1px solid rgb(255 255 255/.1);padding:12px 16px;font-family:var(--font-mono)}
.vframe .top .l{display:flex;align-items:center;gap:8px;color:#95a49f}
.vframe .top .l .nm{font-size:11px;letter-spacing:.2em;text-transform:uppercase}
.vframe .top .off{font-size:10px;text-transform:uppercase;letter-spacing:.2em;color:var(--mint)}
.vframe .vbody{padding:22px 20px;background:var(--surface)}
.vframe .vlede{font-size:14px;line-height:1.6;color:var(--ink-soft)}
.vframe .vlede code{font-family:var(--font-mono);font-size:12.5px;background:var(--cream);border:1px solid var(--line);border-radius:4px;padding:1px 5px;color:var(--ink)}
.vsteps{display:flex;flex-direction:column;gap:24px}
.vsteps>li{display:flex;align-items:flex-start;gap:14px}
.vsteps .sn{display:grid;height:28px;width:28px;flex:none;place-items:center;border-radius:9999px;background:var(--evergreen);font-family:var(--font-mono);font-size:13px;font-weight:500;color:var(--cream)}
.vsteps .sb{min-width:0}
.vsteps .st{margin-top:3px;font-size:16px;font-weight:600;line-height:1.25;letter-spacing:-.01em;color:var(--ink)}
.vsteps .sd{margin-top:6px;font-size:13.5px;line-height:1.55;color:var(--ink-soft)}
.vsteps .sd code{font-family:var(--font-mono);font-size:12.5px;background:var(--cream);border:1px solid var(--line);border-radius:4px;padding:1px 5px;color:var(--ink)}
.vframe .vbtn{margin-top:12px;min-height:44px}
.vframe .vwhat{margin-top:28px;border-top:1px solid var(--line);padding-top:16px;font-family:var(--font-mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-mute)}
#vchecks{margin-top:12px;display:grid;grid-template-columns:1fr 1fr;gap:8px 16px}
#vchecks li{position:relative;padding-left:22px;font-size:13px;line-height:1.4;color:var(--ink)}
#vchecks li::before{content:"";position:absolute;left:0;top:4px;width:12px;height:12px;border-radius:3px;background:var(--seal-tint);border:1px solid var(--seal-line)}
@media(max-width:560px){#vchecks{grid-template-columns:1fr}}
.vframe .vfoot{border-top:1px solid rgb(255 255 255/.1);padding:12px 16px;font-family:var(--font-mono);font-size:11px;color:#7e8f8a}
@media(min-width:1024px){.proof .grid{grid-template-columns:1fr 1.15fr;gap:80px}}


/* ============================================================
   Frameworks
   ============================================================ */
.fw-grid{margin-top:48px;display:grid;grid-template-columns:1fr;gap:24px}
.fw-card{border:1px solid var(--line);border-radius:8px;background:var(--surface);padding:24px}
.fw-card .a{font-family:var(--font-mono);font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--evergreen)}
.fw-card .t{margin-top:12px;font-weight:600;letter-spacing:-.015em;font-size:22px;line-height:1.15;color:var(--ink)}
.fw-card p{margin-top:12px;font-size:13.5px;line-height:1.55;color:var(--ink-soft)}
.fw-note{margin-top:32px;max-width:760px;font-size:13px;color:var(--ink-mute)}
@media(min-width:640px){.fw-grid{grid-template-columns:1fr 1fr}}
@media(min-width:1024px){.fw-grid{grid-template-columns:repeat(4,1fr)}}

/* ============================================================
   Pricing
   ============================================================ */
.pricing .head{margin-top:24px;display:flex;flex-direction:column;justify-content:space-between;gap:24px}
.pricing .head .h2{max-width:820px}
.pricing .head p{max-width:420px;font-size:14.5px;color:var(--ink-soft)}
.plan{margin-top:56px;overflow:hidden;border:1px solid var(--evergreen-deep);border-radius:8px;background:var(--evergreen-deep);color:var(--cream)}
.plan .in{display:grid;grid-template-columns:1fr}
.plan .l{padding:40px}
.plan .k{font-family:var(--font-mono);font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--mint)}
.plan .amt{margin-top:24px;display:flex;align-items:baseline;gap:12px}
.plan .amt .n{font-weight:600;letter-spacing:-.035em;font-size:80px;line-height:1}
.plan .amt .p{font-size:15px;color:#adb8b4}
.plan .yr{margin-top:8px;font-size:13px;color:#95a49f}
.plan .blurb{margin-top:24px;max-width:440px;font-size:15.5px;line-height:1.55;color:#c5cdc8}
.plan .acts{margin-top:32px;display:flex;flex-wrap:wrap;gap:12px}
.plan ul{display:grid;grid-template-columns:1fr;row-gap:16px;border-top:1px solid rgb(255 255 255/.1);padding:40px;font-size:14px;color:#d1d7d3}
.plan li{display:flex;align-items:flex-start;gap:12px}
.plan li .ok{margin-top:4px;display:inline-flex;height:16px;width:16px;flex:none;align-items:center;justify-content:center;border-radius:9999px;background:color-mix(in srgb,var(--mint) 20%,transparent);font-size:10px;color:var(--mint)}
.moments{margin-top:56px}
.moments .hd{display:flex;align-items:baseline;justify-content:space-between}
.moments .hd .a{font-family:var(--font-mono);font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--evergreen)}
.moments .hd .b{display:none;font-family:var(--font-mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-mute)}
.moments .grid{margin-top:24px;display:grid;grid-template-columns:1fr;gap:1px;overflow:hidden;border-radius:8px;background:var(--line)}
.moment{display:flex;flex-direction:column;background:var(--surface);padding:32px}
.moment .p{font-weight:600;letter-spacing:-.03em;font-size:44px;line-height:1;color:var(--ink)}
.moment .t{margin-top:12px;font-size:15px;font-weight:500;color:var(--ink)}
.moment p{margin-top:12px;font-size:13.5px;line-height:1.6;color:var(--ink-soft)}
.pricing .fine{margin-top:40px;max-width:900px;font-size:13px;line-height:1.65;color:var(--ink-mute)}
.pricing .fine a:not(.btn){color:var(--evergreen);text-decoration:underline;text-underline-offset:2px}
@media(min-width:768px){.pricing .head{flex-direction:row;align-items:flex-end}.moments .hd .b{display:block}.moments .grid{grid-template-columns:repeat(3,1fr)}}
@media(min-width:640px){.plan ul{grid-template-columns:1fr 1fr}}
@media(min-width:1024px){.plan .in{grid-template-columns:1.1fr 1fr}.plan ul{border-top:0;border-left:1px solid rgb(255 255 255/.1)}}

/* ============================================================
   Trust posture
   ============================================================ */
.trust-grid{margin-inline:auto;display:grid;max-width:1240px;grid-template-columns:1fr;gap:56px;padding-inline:24px}
.trust .h2-40{margin-top:24px;font-weight:600;font-size:40px;line-height:1.08;letter-spacing:-.02em;color:var(--ink)}
.trust .lede{margin-top:24px;max-width:500px;font-size:16px;line-height:1.6;color:var(--ink-soft)}
.trust .art{margin-top:40px;width:100%;max-width:340px}
.trust ul{display:flex;flex-direction:column;gap:16px}
.trust li{display:flex;align-items:flex-start;gap:16px;border:1px solid var(--line);border-radius:8px;background:var(--surface);padding:20px}
.trust li .ok{margin-top:4px;display:inline-flex;height:24px;width:24px;flex:none;align-items:center;justify-content:center;border-radius:9999px;background:var(--mint);font-size:11px;font-weight:500;color:var(--evergreen-deep)}
.trust li .t{font-size:15px;line-height:1.55;color:var(--ink-soft)}
@media(min-width:640px){.trust .h2-40{font-size:48px}}
@media(min-width:1024px){.trust-grid{grid-template-columns:1fr 1.2fr}}

/* ============================================================
   Final CTA
   ============================================================ */
.final{background:var(--evergreen-deep);padding-block:112px;color:var(--cream)}
.final .in{margin-inline:auto;max-width:1240px;padding-inline:24px;text-align:center}
.final .k{font-family:var(--font-mono);font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--mint)}
.final h2{margin:24px auto 0;max-width:900px;font-weight:600;font-size:52px;line-height:1.05;letter-spacing:-.03em;color:var(--cream)}
.final p{margin:24px auto 0;max-width:560px;font-size:16px;line-height:1.6;color:#b9c2be}
.final .acts{margin-top:40px;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:12px}
.final .btn-lg{padding-inline:24px}
@media(min-width:640px){.final h2{font-size:68px}}

/* ============================================================
   Footer
   ============================================================ */
.foot{border-top:1px solid var(--line);background:var(--background);padding-block:56px 0}
.foot .in{margin-inline:auto;display:grid;max-width:1240px;grid-template-columns:1fr;gap:40px;padding-inline:24px}
.foot .brand{display:flex;align-items:center;gap:12px}
.foot .brand img{height:24px;width:24px}
.foot .brand .nm{font-weight:600;letter-spacing:-.022em;font-size:18px;color:var(--ink)}
.foot .blurb{margin-top:14px;max-width:34ch;font-size:13.5px;line-height:1.6;color:var(--ink-mute)}
.foot .fcols{display:grid;grid-template-columns:1fr 1fr;gap:32px}
.foot .fcols h2{font-family:var(--font-mono);font-size:10.5px;font-weight:400;letter-spacing:.22em;text-transform:uppercase;color:var(--ink-mute)}
.foot .fcols a:not(.btn){display:block;margin-top:11px;font-size:13.5px;line-height:1.4;color:var(--ink-soft)}
.foot .fcols a:not(.btn):hover{color:var(--evergreen);text-decoration:underline;text-underline-offset:3px}
.foot .fbottom{margin-top:48px;border-top:1px solid var(--line)}
.foot .fbottom .in{display:flex;flex-direction:row;align-items:center;justify-content:space-between;gap:16px;padding-block:20px;font-family:var(--font-mono);font-size:11px;letter-spacing:.06em;color:var(--ink-mute)}
@media(min-width:640px){.foot .fcols{grid-template-columns:repeat(3,1fr)}}
@media(min-width:900px){.foot .in{grid-template-columns:1fr 1.6fr;gap:64px}}

/* ============================================================
   Type scale bumps that ride the source's sm: breakpoint
   ============================================================ */
@media(min-width:640px){
  .h2{font-size:54px}
}

/* ============================================================
   Reduced motion: freeze every looping infographic on its
   finished frame. The source shipped no such handling.
   ============================================================ */
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  .hs-pull,.hs-ask i{display:none}
}

/* ============================================================
   Interior pages: help center + knowledge-base articles.

   Scoped to .doc on <body> so none of it reaches the landing.
   Same tokens, same type scale, same components as the landing.
   The page hero reuses the landing's deep-evergreen band (the
   Proof / Final-CTA treatment) so an interior page reads as the
   same site, and the body sits on the light canvas.
   ============================================================ */

/* ---------- shared interior wrappers ---------- */
.doc .inner{margin-inline:auto;max-width:1240px;padding-inline:24px}
.doc .band-warm{background:color-mix(in srgb,var(--cream) 50%,transparent)}
.doc main > section{border-bottom:1px solid var(--line);padding-block:80px}
.doc main > section:last-of-type{border-bottom:0}

/* ---------- page hero (deep band) ---------- */
.doc .page-hero{background:var(--evergreen-deep);color:var(--cream);border-bottom:0;padding-block:88px 80px}
.doc .page-hero .eyebrow{font-family:var(--font-mono);font-size:11px;line-height:1.5;letter-spacing:.24em;text-transform:uppercase;color:var(--mint);margin-bottom:0}
/* Fluid below 640px: a fixed 44px overflows its own box at 320px on the
   longer help-centre titles (a single long word cannot break). */
.doc .page-hero h1{margin-top:20px;font-weight:600;font-size:clamp(32px,8.5vw,44px);line-height:1.05;letter-spacing:-.03em;color:var(--cream);max-width:20ch}
.doc .page-hero .hero-rule{margin-top:24px;height:2px;width:44px;border-radius:2px;background:var(--mint)}
.doc .page-hero .lead{margin-top:24px;max-width:600px;font-size:18px;line-height:1.55;color:#b9c3be}
@media(min-width:640px){.page-hero h1{font-size:54px}}

/* ---------- generic interior headings ---------- */
.doc .eyebrow{font-family:var(--font-mono);font-size:11px;line-height:1.5;letter-spacing:.24em;text-transform:uppercase;color:var(--ink-mute);margin-bottom:16px}
.doc main > section h2{margin-bottom:16px;font-weight:600;font-size:32px;line-height:1.12;letter-spacing:-.025em;color:var(--ink)}
/* The reset zeroes every margin, so interior section copy had no flow
   spacing of its own: a plain <p> sat flush against its heading. .prose
   manages its own rhythm through p{margin-top}, so it opts back out. */
.doc main > section p + p,
.doc main > section .lead + p,
.doc main > section p + ul,
.doc main > section ul + p{margin-top:16px}
.doc .prose h2{margin-bottom:0}
.doc main > section .lead{margin-top:16px;max-width:680px;font-size:18px;line-height:1.55;color:var(--ink-soft)}
.doc .muted{color:var(--ink-mute)}
.doc main > section .muted{margin-top:20px;font-size:14px}
/* prose links only: buttons keep their own plate colour and stay unlined */
.doc main a[href]:not(.btn){color:var(--evergreen);text-decoration:underline;text-underline-offset:2px;text-decoration-thickness:1px}
.doc main a[href]:not(.btn):hover{text-decoration-thickness:2px}

/* ---------- article prose ---------- */
.doc .inner.prose{max-width:1240px}
.doc .prose > *{max-width:760px}
.doc .prose > section > *{max-width:760px}
.doc .prose h2{margin-top:56px;font-weight:600;font-size:28px;line-height:1.15;letter-spacing:-.02em;color:var(--ink)}
.doc .prose h2:first-child{margin-top:0}
.doc .prose h3{margin-top:36px;font-weight:600;font-size:20px;line-height:1.2;letter-spacing:-.015em;color:var(--ink)}
.doc .prose p{margin-top:16px;font-size:17px;line-height:1.65;color:var(--ink-soft)}
.doc .prose ul, .doc .prose ol{margin-top:16px;padding-left:22px}
.doc .prose ul{list-style:disc}
.doc .prose ol{list-style:decimal}
.doc .prose li{margin-top:8px;font-size:17px;line-height:1.65;color:var(--ink-soft)}
.doc .prose li::marker{color:var(--evergreen)}
.doc .prose strong{font-weight:600;color:var(--ink)}
.doc .prose em{font-style:normal;color:var(--ink);font-weight:500}
.doc .prose blockquote{margin-top:24px;border-left:3px solid var(--evergreen);background:var(--surface);border-radius:0 8px 8px 0;padding:16px 20px}
.doc .prose blockquote p{margin-top:0;color:var(--ink)}
.doc .prose blockquote p + p{margin-top:12px}
.doc .prose code{font-family:var(--font-mono);font-size:.88em;background:var(--cream);border:1px solid var(--line);border-radius:4px;padding:1px 5px;color:var(--ink)}

/* ---------- data tables (sub-processors, annexes) ----------
   Wide tables scroll inside their own container so the PAGE never
   scrolls sideways on a phone. .tscroll is the wrapper; it is the
   only element allowed to overflow. */
.doc .prose .tscroll{margin-top:24px;max-width:760px;overflow-x:auto;border:1px solid var(--line);border-radius:8px;background:var(--surface);-webkit-overflow-scrolling:touch}
.doc .prose .tscroll:focus-visible{outline:2px solid var(--evergreen);outline-offset:2px}
.doc .prose table{width:100%;min-width:640px;border-collapse:collapse;font-size:14.5px;line-height:1.55}
.doc .prose thead th{position:sticky;top:0;background:var(--cream);border-bottom:1px solid var(--line);padding:12px 16px;text-align:left;font-family:var(--font-mono);font-size:11px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-mute);white-space:nowrap}
.doc .prose tbody td{border-bottom:1px solid var(--line);padding:12px 16px;vertical-align:top;color:var(--ink-soft)}
.doc .prose tbody tr:last-child td{border-bottom:0}

/* ---------- card grids (help center index) ---------- */
.doc .feature-grid{margin-top:32px;display:grid;grid-template-columns:1fr;gap:24px}
.doc .card{border:1px solid var(--line);border-radius:8px;background:var(--surface);padding:24px}
.doc .card h3{font-weight:600;font-size:19px;line-height:1.25;letter-spacing:-.015em;color:var(--ink)}
.doc .card h3 a:not(.btn){color:var(--ink);text-decoration:none}
.doc .card h3 a:not(.btn):hover{color:var(--evergreen);text-decoration:underline;text-underline-offset:3px}
.doc .card p{margin-top:10px;font-size:14.5px;line-height:1.6;color:var(--ink-soft)}
@media(min-width:768px){.feature-grid.two{grid-template-columns:1fr 1fr}}

/* ---------- FAQ rows ---------- */
.doc .qa{border-top:1px solid var(--line);padding-block:24px}
.doc .qa:first-of-type{margin-top:32px}
.doc .qa h3{font-weight:600;font-size:19px;line-height:1.25;letter-spacing:-.015em;color:var(--ink)}
.doc .qa p{margin-top:10px;max-width:760px;font-size:16px;line-height:1.6;color:var(--ink-soft)}

/* ---------- code snippet block ---------- */
.doc .snippet{margin-top:24px;overflow:hidden;border:1px solid var(--line);border-radius:8px;background:var(--evergreen-deep)}
.doc .snippet pre{overflow-x:auto;padding:16px 20px;font-family:var(--font-mono);font-size:13px;line-height:1.6;color:var(--cream)}
.doc .snippet code{background:none;border:0;padding:0;color:inherit}

/* ---------- helpdesk widget mount ---------- */
.doc #kanonik-helpdesk{margin-top:32px}
.doc #kanonik-helpdesk:empty{display:none}

@media(max-width:640px){
.doc main > section{padding-block:56px}
.doc .page-hero{padding-block:56px 48px}
.doc .prose h2{margin-top:40px}
}

/* ---------- legal pages (terms / privacy / DPA) ---------- */
.doc .legal-meta{font-family:var(--font-mono);font-size:12.5px;line-height:1.7;color:var(--ink-mute);border:1px solid var(--line);border-radius:8px;background:var(--surface);padding:16px 20px}
.doc .legal-meta strong{font-weight:500;color:var(--ink)}
.doc .prose > section{margin-top:56px;scroll-margin-top:88px}
.doc .prose > section:first-of-type{margin-top:40px}
.doc .prose > section > h2:first-child{margin-top:0}


/* ============================================================
   Interior components ported from the v1 stylesheet.

   The nine remaining interior pages (how-it-works, pricing,
   security, about, capabilities, frameworks, for-auditors,
   for-consultants, 404) were built on v1 component classes.
   Their layout was already right, so the rules are carried over
   verbatim and re-pointed at the v2 palette through the alias
   block below, rather than rebuilt. Everything is .doc-scoped,
   so none of it can reach the landing.

   Legacy button class names are deliberately NOT carried over -
   they map onto the v2 button shapes instead, so a button looks
   the same on every page of the site.
   ============================================================ */
.doc{
  --bg-warm:var(--surface-2);
  --border:var(--line);
  --border-strong:#bec7bc;
  --dark-bg:var(--evergreen-deep);
  --dark-elev:var(--evergreen);
  --dark-border:#164237;
  --dark-ink:var(--cream);
  --dark-ink-muted:#a7bdb3;
  --ink-muted:var(--ink-mute);
  --ink-faint:var(--ink-mute);
  --seal:var(--evergreen);
  --seal-deep:var(--evergreen-deep);
  --seal-on-dark:var(--mint);
  --seal-tint:#dcebe1;
  --surface-tint:var(--cream);
  --font-display:var(--font-sans);
  --proposed:#7a4e1c;
  --proposed-tint:#f4eee0;
  --container:1240px;
}

/* legacy button names -> v2 button shapes */
.doc .btn-seal{background:var(--evergreen);color:var(--cream);box-shadow:0 1px 2px 0 rgb(0 0 0/.05)}
.doc .btn-seal:hover{background:var(--evergreen-deep)}
.doc .btn-ghost{border:1px solid var(--line);background:var(--surface);color:var(--ink)}
.doc .btn-ghost:hover{background:var(--cream)}
.doc .btn-dark-seal{background:var(--mint);color:var(--evergreen-deep)}
.doc .btn-dark-seal:hover{background:var(--mint-soft)}
.doc .btn-dark-ghost{border:1px solid rgb(255 255 255/.2);color:var(--cream)}
.doc .btn-dark-ghost:hover{background:rgb(255 255 255/.05)}
.doc .btn-sm{padding:8px 16px;font-size:13px}
.doc .ctarow{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-top:32px}

@media(max-width:640px){
  .doc .chrome .right .btn{padding:8px 14px;font-size:13.5px}
}
.doc .hero .ctarow{display:flex;gap:14px;flex-wrap:wrap;align-items:center}
.doc .node.sealed i{background:var(--seal)}
.doc .tag.sealed{color:var(--seal);background:var(--seal-tint)}
.doc .band-dark{background:var(--dark-bg);color:var(--dark-ink);border-top:1px solid var(--dark-border)}
.doc .band-dark h2, .doc .band-dark h1, .doc .band-dark h3{color:#fff}
.doc .band-dark .eyebrow{color:var(--seal-on-dark)}
.doc .band-dark p{color:var(--dark-ink-muted)}
.doc .band-dark a:not(.btn){color:var(--seal-on-dark)}
.doc .split{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:start}
@media(max-width:820px){
  .doc .split{grid-template-columns:1fr;gap:28px}
}
.doc .page-hero .ctarow{display:flex;gap:14px;flex-wrap:wrap;margin-top:26px}
.doc .card .n{font-family:var(--font-mono);font-size:12px;color:var(--seal);letter-spacing:.1em}
.doc .card .ctag{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--seal);background:var(--seal-tint);border-radius:999px;padding:2px 9px;display:inline-block;margin-bottom:12px}
.doc .steps{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:30px}
.doc .step{background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:22px;box-shadow:0 1px 2px rgba(20,30,45,.04)}
.doc .step .n{font-family:var(--font-mono);font-size:12px;color:var(--seal);letter-spacing:.1em}
.doc .step h3{margin:8px 0 6px}
.doc .step p{font-size:14px;color:var(--ink-soft);margin:0}
@media(max-width:820px){
  .doc .steps{grid-template-columns:1fr}
}
.doc .snippet{background:var(--dark-elev);border:1px solid var(--dark-border);border-radius:12px;margin-top:22px;overflow:hidden}
.doc .snippet .sbar{display:flex;align-items:center;gap:8px;padding:9px 14px;border-bottom:1px solid var(--dark-border);font-family:var(--font-mono);font-size:11px;color:var(--dark-ink-muted);letter-spacing:.04em}
.doc .snippet .sbar .copy{margin-left:auto;color:var(--seal-on-dark);font-size:11px;cursor:pointer;background:none;border:0;font-family:var(--font-mono)}
.doc .snippet pre{margin:0;padding:16px;font-family:var(--font-mono);font-size:13px;line-height:1.7;color:var(--dark-ink);overflow-x:auto}
.doc .snippet pre .cmd{color:var(--seal-on-dark)}
.doc .snippet pre .url{color:#fff}
.doc .skills{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:30px}
.doc .skills-note{font-size:13.5px;color:var(--ink-muted);margin-top:18px}
.doc .skill{background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:22px;box-shadow:0 1px 2px rgba(20,30,45,.04)}
.doc .skill .stag{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--seal);background:var(--seal-tint);border-radius:999px;padding:2px 9px;display:inline-block;margin-bottom:12px}
.doc .skill h3{font-size:1.1rem}
.doc .skill code{font-family:var(--font-mono);font-size:12.5px;color:var(--ink-muted);display:block;margin-top:2px;font-weight:400}
.doc .skill p{font-size:14px;color:var(--ink-soft)}
.doc .skill .repl{font-size:13px;color:var(--ink-muted);border-top:1px solid var(--border);padding-top:10px;margin-top:12px}
.doc .skill .repl b{color:var(--ink-soft)}
@media(max-width:820px){
  .doc .skills{grid-template-columns:1fr}
}
.doc .loop{margin-top:36px;display:grid;gap:30px}
.doc .loop-rail{display:grid;grid-template-columns:repeat(5,1fr);position:relative}
.doc .loop-rail::before{content:"";position:absolute;top:26px;left:9%;right:9%;height:2px;background:var(--border-strong);z-index:0}
.doc .lnode{position:relative;z-index:1;text-align:center;padding:0 10px}
.doc .lnode .who{font-family:var(--font-mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-muted);display:block;margin-bottom:9px}
.doc .lnode .who b{color:var(--seal);font-weight:600}
.doc .lmark{width:54px;height:54px;margin:0 auto 13px;border-radius:15px;display:flex;align-items:center;justify-content:center;font-family:var(--font-mono);font-size:16px;font-weight:600;background:var(--surface);border:2px solid var(--border-strong);color:var(--ink-muted);box-shadow:0 1px 2px rgba(20,30,45,.05)}
.doc .lnode.kn .lmark{background:var(--seal);border-color:var(--seal-deep);color:#fff}
.doc .lnode h3{font-size:1rem;margin:0 0 5px}
.doc .lnode p{font-size:13px;color:var(--ink-muted);line-height:1.45;margin:0}
.doc .loop-sample{background:var(--surface);border:1px solid var(--border);border-radius:16px;padding:24px 26px 22px;box-shadow:0 1px 2px rgba(20,30,45,.04)}
.doc .ls-head{font-family:var(--font-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-faint);margin:0 0 16px}
.doc .chat{max-width:78%;padding:12px 16px;border-radius:14px;font-size:15px;line-height:1.5;margin-bottom:12px}
.doc .chat.you{background:var(--bg-warm);color:var(--ink);border:1px solid var(--border);margin-left:auto;border-bottom-right-radius:4px}
.doc .chat.ai{background:var(--surface-tint);color:var(--ink-soft);border:1px solid var(--border);border-bottom-left-radius:4px}
.doc .chat .lbl{display:block;font-family:var(--font-mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-muted);margin-bottom:5px}
.doc .ls-step{display:flex;gap:13px;align-items:baseline;font-size:14px;color:var(--ink-soft);padding:11px 0;border-top:1px solid var(--border)}
.doc .ls-step:first-of-type{margin-top:8px}
.doc .chip{flex:none;min-width:84px;text-align:center;font-family:var(--font-mono);font-size:10.5px;letter-spacing:.05em;text-transform:uppercase;padding:4px 10px;border-radius:999px;font-weight:600}
.doc .chip.checked{background:var(--seal-tint);color:var(--seal-deep)}
.doc .chip.awaiting{background:var(--proposed-tint);color:var(--proposed)}
.doc .chip.sealed{background:var(--seal);color:#fff}
@media(max-width:760px){
  .doc .loop-rail{grid-template-columns:1fr 1fr;gap:26px 0}
  .doc .loop-rail::before{display:none}
  .doc .chat{max-width:100%}
}
.doc .stack{display:flex;flex-direction:column;gap:8px;margin-top:8px}
.doc .layer{display:flex;align-items:center;gap:14px;background:var(--surface);border:1px solid var(--border);border-radius:11px;padding:14px 18px}
.doc .layer.np{border-left:3px solid var(--seal)}
.doc .layer.dim{opacity:.9}
.doc .layer.dim .lt, .doc .layer.dim .ln{color:var(--ink)}
.doc .layer .lt{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.07em;text-transform:uppercase;color:var(--ink-muted);width:170px;flex:none}
.doc .layer .ln{font-size:15px;font-weight:600;color:var(--ink)}
@media(max-width:680px){
  .doc .layer{flex-direction:column;align-items:flex-start;gap:4px}
  .doc .layer .lt{width:auto}
}
.doc .pos-step .url{font-family:var(--font-mono);font-size:11px;color:var(--ink-faint);margin-top:10px;display:block;word-break:break-all}
.doc .tier .tn{font-family:var(--font-mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-muted)}
.doc .tier .price{font-family:var(--font-display);font-size:2rem;margin:8px 0 2px}
.doc .tier .per{font-size:13px;color:var(--ink-muted)}
.doc .ent{margin-top:16px;background:var(--bg-warm);border:1px solid var(--border);border-radius:14px;padding:20px 24px;display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.doc .ent .et{font-family:var(--font-display);font-size:1.2rem}
.doc .ent .ep{font-size:13.5px;color:var(--ink-soft);flex:1;min-width:200px}
.doc .closer{text-align:center}
.doc .closer .mark{width:40px;height:40px;margin:0 auto 18px;display:block}
.doc .closer .pre{max-width:60ch;margin:0 auto 18px;color:var(--dark-ink-muted)}
.doc .closer .line{font-family:var(--font-display);font-size:clamp(1.6rem,3.4vw,2.3rem);color:#fff;margin:0 0 26px}
.doc .closer .ctarow{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
.doc .fit-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:30px}
.doc .fit{background:var(--surface);border:1px solid var(--border);border-radius:16px;padding:28px;box-shadow:0 1px 2px rgba(20,30,45,.04),0 14px 36px -22px rgba(20,30,45,.25)}
.doc .fit .ft{font-family:var(--font-mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-muted);margin-bottom:12px}
.doc .fit h3{font-size:1.35rem;margin:0 0 10px}
.doc .fit p{font-size:14.5px;color:var(--ink-soft);margin:0 0 .8em}
.doc .fit .fine{font-family:var(--font-mono);font-size:11px;color:var(--ink-faint);border-top:1px solid var(--border);padding-top:12px;margin-top:14px;line-height:1.6}
@media(max-width:820px){
  .doc .fit-grid{grid-template-columns:1fr}
}
/* Single column: the plan cards get the full container so two of them read
   at a comfortable measure, and the paid moments sit beneath as a row. The
   old 1.05fr/.95fr split dated from when there was ONE plan card. */
.doc .price-grid{display:grid;grid-template-columns:1fr;gap:28px;margin-top:34px;align-items:start}
/* Two plan cards. `.plans` is the grid so the "$0 proof" band can span both
   columns: the fact that the Proof Snapshot belongs to Solo AND Pro is then
   structural, not a sentence the reader has to trust. The per-user price
   rides inside each card as a chip attached to the price, because a seat
   cost read as a footnote is a seat cost the buyer discovers at checkout. */
.doc .plans{display:grid;grid-template-columns:1fr;gap:16px;align-content:start}
@media(min-width:760px){.doc .plans{grid-template-columns:1fr 1fr}}
.doc .solo,.doc .pro{background:var(--surface);border-radius:16px;padding:28px;display:flex;flex-direction:column}
.doc .solo{border:1.5px solid var(--seal);box-shadow:0 14px 36px -20px rgba(23,109,103,.45)}
.doc .pro{border:1px solid var(--border-strong)}
.doc .solo .tn,.doc .pro .tn{font-family:var(--font-mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--seal)}
.doc .solo .price,.doc .pro .price{font-family:var(--font-display);font-size:2.6rem;margin:10px 0 2px}
.doc .solo .price small,.doc .pro .price small{font-size:1.05rem;color:var(--ink-muted);font-family:var(--font-sans)}
.doc .solo .per,.doc .pro .per{font-size:13px;color:var(--ink-muted)}
.doc .solo ul,.doc .pro ul{list-style:none;padding:0;margin:18px 0 22px;font-size:14px;color:var(--ink-soft);flex:1 1 auto}
.doc .solo li,.doc .pro li{padding:6px 0 6px 20px;position:relative}
.doc .solo li::before,.doc .pro li::before{content:"";position:absolute;left:0;top:12px;width:8px;height:8px;border-radius:2px;transform:rotate(45deg);background:var(--seal)}
.doc .solo .btn,.doc .pro .btn{align-self:flex-start}

/* The per-user price, worn by the plan price rather than filed beneath it. */
.doc .seat{margin-top:14px;align-self:flex-start;display:inline-flex;align-items:baseline;gap:6px;
  padding:6px 12px;border-radius:9999px;background:var(--seal-tint);
  color:var(--seal-deep);font-family:var(--font-mono);font-size:12px;letter-spacing:.01em}
.doc .seat b{font-weight:600;font-size:13px}

/* Spans both cards on desktop, sits between them on mobile. */
.doc .bothband{grid-column:1/-1;display:flex;flex-wrap:wrap;align-items:center;gap:12px 18px;
  padding:18px 22px;border-radius:14px;background:var(--seal-tint);
  border:1px solid color-mix(in srgb,var(--seal) 26%,transparent)}
.doc .bothband .amt{font-family:var(--font-display);font-size:2rem;line-height:1;color:var(--seal-deep);flex:none}
.doc .bothband .txt{flex:1 1 300px;min-width:0;font-size:14px;line-height:1.55;color:var(--ink-soft)}
.doc .bothband .txt b{color:var(--ink);font-weight:600}
.doc .bothband .on{flex:none;font-family:var(--font-mono);font-size:10.5px;letter-spacing:.09em;
  text-transform:uppercase;color:var(--seal);white-space:nowrap}
.doc .seat-note{margin-top:14px;font-size:13px;line-height:1.55;color:var(--ink-muted);max-width:66ch}
.doc .moments{display:grid;grid-template-columns:1fr;gap:12px}
@media(min-width:760px){.doc .moments{grid-template-columns:1fr 1fr}}
.doc .moments .mhead{grid-column:1/-1}
.doc .moments .mhead{font-family:var(--font-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-muted);margin-bottom:2px}
.doc .moment{background:var(--surface);border:1px solid var(--border);border-radius:13px;padding:16px 18px;display:flex;gap:14px;align-items:baseline}
.doc .moment .mp{font-family:var(--font-display);font-size:1.3rem;color:var(--ink);flex:none;min-width:86px}
.doc .moment .md b{display:block;color:var(--ink);font-size:14.5px;font-weight:600}
.doc .moment .md span{font-size:13px;color:var(--ink-muted)}
.doc .moment .ms{margin-left:auto;flex:none;font-family:var(--font-mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--seal);background:var(--seal-tint);border-radius:999px;padding:2px 8px;align-self:center}
.doc .policy{font-size:13.5px;color:var(--ink-muted);max-width:66ch;margin-top:20px;line-height:1.55}
@media(max-width:600px){
  .doc .moment{flex-wrap:wrap}
  .doc .moment .ms{margin-left:0}
}

/* ============================================================
   "Ask" launcher + chat drawer.

   Restores the persistent Ask affordance removed in 5eb25fd,
   but it now opens the assistant in place instead of navigating
   to a page. The widget is mounted lazily on first open, so no
   page pays for it until someone asks.
   Touch target >= 44px per the A11Y checklist.
   ============================================================ */
.ask{position:fixed;right:20px;bottom:20px;z-index:60;display:inline-flex;align-items:center;gap:9px;
  min-height:44px;padding:10px 18px 10px 12px;border:1px solid var(--line);border-radius:9999px;
  background:var(--surface);color:var(--evergreen);
  font-family:var(--font-mono);font-size:12.5px;letter-spacing:.04em;
  box-shadow:0 6px 20px -6px rgb(6 40 34/.28);cursor:pointer;
  transition:transform .15s ease,box-shadow .15s ease,border-color .15s ease}
.ask:hover{transform:translateY(-1px);border-color:var(--evergreen);box-shadow:0 10px 26px -8px rgb(6 40 34/.34)}
.ask .ico{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;flex:none;
  border-radius:9999px;background:var(--evergreen);color:var(--cream);
  font-family:var(--font-sans);font-size:13px;font-weight:600;line-height:1}
.ask[aria-expanded="true"]{opacity:0;pointer-events:none}

.askpanel{position:fixed;right:20px;bottom:20px;z-index:61;display:flex;flex-direction:column;
  width:min(390px,calc(100vw - 40px));max-height:min(620px,calc(100vh - 40px));
  border:1px solid var(--line);border-radius:12px;background:var(--surface);
  box-shadow:0 24px 60px -20px rgb(6 40 34/.45);overflow:hidden}
.askpanel[hidden]{display:none}
.askpanel .head{display:flex;align-items:center;gap:10px;flex:none;
  padding:12px 14px;border-bottom:1px solid var(--line);background:var(--evergreen-deep)}
.askpanel .head .t{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--mint)}
.askpanel .head .x{margin-left:auto;display:grid;place-items:center;width:32px;height:32px;flex:none;
  border-radius:6px;color:var(--cream);background:transparent;line-height:1}
.askpanel .head .x:hover{background:rgb(255 255 255/.08)}
.askpanel .body{flex:1;min-height:0;overflow-y:auto;padding:16px}
.askpanel .fallback{font-size:13.5px;line-height:1.6;color:var(--ink-soft)}
.askpanel .fallback a:not(.btn){color:var(--evergreen);text-decoration:underline;text-underline-offset:2px}
@media(max-width:520px){
  .ask{right:12px;bottom:12px;padding:10px 15px 10px 10px;font-size:12px}
  .askpanel{right:0;left:0;bottom:0;width:100%;max-height:82vh;border-radius:12px 12px 0 0;border-bottom:0}
}
@media(prefers-reduced-motion:reduce){
  .ask,.ask:hover{transition:none;transform:none}
}

/* ============================================================
   Mobile + target-size pass.

   The source keeps the hero card at a fixed 46/54 split at every
   width, which leaves the chat pane about 125px wide on a 320px
   phone: the bubbles become unreadable and every record label is
   ellipsed away. Stacking the two panes below 560px is a
   deliberate deviation from the source, taken because the site's
   own floor is mobile-first from 320px.
   ============================================================ */
@media(max-width:560px){
  .hs-card{grid-template-columns:1fr;aspect-ratio:auto}
  .hs-l{height:236px}
  .hs-r{border-top:1px solid var(--line)}
  .hs-chain{max-height:200px}
  .hs-pull{display:none}          /* the seam runs left-to-right; meaningless stacked */
  .hs-cap{min-height:0}
}

/* WCAG 2.2 target size: give the dense link lists a real tap area
   rather than relying on the spacing exception. */
.nav-links a{display:inline-block;padding-block:6px}
.foot .fcols a:not(.btn){padding-block:4px;margin-top:7px}
.foot .fbottom .in{flex-wrap:wrap}

/* Touch devices get the full 44px floor (the house rule, stricter than
   WCAG 2.2 AA's 24px). Scoped to coarse pointers so mouse-driven desktop
   keeps its intended density and nothing reflows for existing visitors. */
@media(pointer:coarse){
  .btn{min-height:44px}
  .nav-burger{height:44px;width:44px}
  .nav-brand{min-height:44px}
  .nav-menu .pair a:not(.btn){min-height:44px;display:inline-flex;align-items:center;justify-content:center}
  .foot .fcols a:not(.btn){min-height:44px;display:flex;align-items:center;padding-block:0;margin-top:0}
  .doc .snippet .sbar .copy{min-height:44px;min-width:44px}
  .skip-link:focus{min-height:44px;display:inline-flex;align-items:center}
  input[type="range"]{min-height:44px}
}

/* Long unbroken tokens (hashes, URLs, ids) must not push a phone
   viewport sideways. */
.doc .prose p,.doc .prose li,.doc .legal-meta{overflow-wrap:anywhere}