/* Provenize — provenize.ai · shared stylesheet · no external dependencies */

:root{
  --bg:#ffffff; --bg2:#f5f8fd; --panel:rgba(248,250,254,.86); --panel2:#ffffff;
  --ink:#0f1729; --mut:#4d5c78; --dim:#5c6a84;
  --teal:#0d9488; --teal-ink:#0f766e; --teal-soft:rgba(13,148,136,.08); --teal-line:rgba(13,148,136,.34);
  --green:#15803d; --amber:#b45309; --gray:#5b6a86; --rose:#e11d48;
  --line:rgba(90,104,130,.22); --line-soft:rgba(90,104,130,.13);
  --r-card:24px; --r-pill:999px; --r-input:14px; --r-code:16px;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Ubuntu,Cantarell,"Noto Sans",sans-serif;
  --mono:ui-monospace,"SF Mono","Cascadia Code",Menlo,Consolas,"Liberation Mono",monospace;
  --glow:0 10px 34px rgba(13,148,136,.16);
  --shadow:0 20px 46px rgba(15,23,41,.12);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--bg); color:var(--ink); font:400 17px/1.6 var(--sans);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; overflow-x:hidden;
}
::selection{background:rgba(13,148,136,.18)}
a{color:var(--teal-ink);text-decoration:none}
a:hover{color:#0b6b60}
:focus-visible{outline:2px solid var(--teal);outline-offset:3px;border-radius:8px}
img,svg{max-width:100%}
h1,h2,h3{font-weight:650;letter-spacing:-.02em;line-height:1.15;text-wrap:pretty}
p{text-wrap:pretty}
.vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.wrap{max-width:1120px;margin:0 auto;padding:0 24px}
.wrap-n{max-width:780px;margin:0 auto;padding:0 24px}
.skip{position:absolute;left:24px;top:-64px;z-index:200;background:var(--teal-ink);color:#fff;padding:10px 20px;border-radius:var(--r-pill);font-weight:600;transition:top .2s ease}
.skip:focus{top:16px;color:#fff}

/* ── Header ─────────────────────────────────────── */
.site-head{position:sticky;top:14px;z-index:100;margin:14px 0 0}
.nav-bar{
  display:flex;align-items:center;gap:8px;max-width:1120px;margin:0 auto;
  padding:8px 10px 8px 20px;border-radius:var(--r-pill);
  background:rgba(255,255,255,.8);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  border:1px solid var(--line-soft);box-shadow:0 10px 30px rgba(15,23,41,.08);
}
@media(max-width:1180px){.nav-bar{margin:0 16px}}
.brand{display:flex;align-items:center;gap:10px;font-weight:650;font-size:18px;color:var(--ink);letter-spacing:-.01em;white-space:nowrap}
.brand:hover{color:#fff}
.brand-mark{flex:0 0 auto;display:block}
img.brand-mark{width:30px;height:30px;object-fit:contain}
img.brand-mark-sm{width:24px;height:24px}
.choose-logo{width:80px;height:80px;object-fit:contain}
.menu{display:flex;align-items:center;gap:2px;margin-left:auto}
.nav-link,.drop-btn{
  display:inline-flex;align-items:center;gap:6px;padding:9px 16px;border-radius:var(--r-pill);
  color:var(--mut);font:500 15px/1 var(--sans);background:none;border:0;cursor:pointer;white-space:nowrap;
  transition:color .2s ease,background .2s ease;
}
.nav-link:hover,.drop-btn:hover,.drop.open .drop-btn{color:var(--ink);background:rgba(90,104,130,.09)}
.nav-link[aria-current="page"],.drop-btn.is-on{color:var(--ink)}
.drop-btn svg{transition:transform .25s ease}
.drop.open .drop-btn svg{transform:rotate(180deg)}
.drop{position:relative}
.drop-menu{
  position:absolute;top:calc(100% + 12px);left:0;min-width:264px;padding:8px;z-index:50;
  background:rgba(255,255,255,.97);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  border:1px solid var(--line-soft);border-radius:20px;box-shadow:var(--shadow);
  opacity:0;visibility:hidden;transform:translateY(6px);transition:opacity .22s ease,transform .22s ease,visibility .22s;
}
.drop.open .drop-menu,.drop:focus-within .drop-menu{opacity:1;visibility:visible;transform:none}
@media(hover:hover){.drop:hover .drop-menu{opacity:1;visibility:visible;transform:none}}
.drop-item{display:flex;align-items:center;gap:10px;padding:11px 14px;border-radius:14px;color:var(--ink);font-size:15px}
.drop-item:hover{background:rgba(90,104,130,.09);color:#000}
.drop-item .dot{margin-left:auto}
.dot{width:7px;height:7px;border-radius:50%;flex:0 0 auto}
.dot-built{background:var(--green);box-shadow:0 0 8px rgba(21,128,61,.45)}
.dot-dev{background:var(--amber);box-shadow:0 0 8px rgba(180,83,9,.4)}
.dot-plan{background:transparent;border:1.5px solid var(--dim)}
.nav-cta{margin-left:6px;border:1px solid var(--teal-line);color:var(--teal-ink)}
.nav-cta:hover{background:var(--teal-soft);color:#0b6b60}
.langs{display:flex;gap:3px;margin-left:10px;padding:3px;border-radius:var(--r-pill);background:rgba(90,104,130,.09)}
.lang-pill{padding:6px 11px;border-radius:var(--r-pill);font:600 12.5px/1 var(--mono);letter-spacing:.04em;color:var(--mut)}
.lang-pill:hover{color:var(--ink)}
.lang-pill.on{background:var(--teal-ink);color:#fff}
.lang-pill.on:hover{color:#fff}
.nav-burger{display:none;margin-left:auto;width:44px;height:44px;border:0;border-radius:var(--r-pill);background:rgba(90,104,130,.1);cursor:pointer;position:relative}
.nav-burger span,.nav-burger span::before{content:"";position:absolute;left:13px;right:13px;height:2.5px;border-radius:2px;background:var(--ink);transition:transform .25s ease,top .25s ease}
.nav-burger span{top:19px}
.nav-burger span::before{left:0;right:0;top:6px}
html.nav-open .nav-burger span{transform:rotate(45deg);top:22px}
html.nav-open .nav-burger span::before{transform:rotate(-90deg);top:0}

@media(max-width:980px){
  .nav-burger{display:block}
  .menu{
    display:none;position:absolute;top:calc(100% + 10px);left:16px;right:16px;z-index:90;
    flex-direction:column;align-items:stretch;gap:2px;padding:14px;
    background:rgba(255,255,255,.98);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
    border:1px solid var(--line-soft);border-radius:var(--r-card);box-shadow:var(--shadow);
  }
  html.nav-open .menu{display:flex}
  .site-head{position:relative;top:0}
  .nav-bar{position:relative}
  .drop-menu{position:static;opacity:1;visibility:visible;transform:none;background:none;border:0;box-shadow:none;padding:0 0 4px 14px;min-width:0}
  .drop-btn svg{display:none}
  .nav-link,.drop-btn{padding:12px 16px;font-size:16px;width:100%;text-align:left}
  .langs{margin:10px 4px 2px;align-self:flex-start}
  .nav-cta{margin:8px 4px 0;justify-content:center;border-radius:var(--r-pill)}
}

/* ── Footer ─────────────────────────────────────── */
.site-foot{margin-top:110px;padding:54px 0 60px;position:relative}
.site-foot::before{content:"";position:absolute;inset:0 0 auto;height:1px;background:linear-gradient(90deg,transparent,rgba(90,104,130,.22),transparent)}
.foot-in{display:flex;flex-wrap:wrap;gap:18px 36px;align-items:center;justify-content:space-between}
.foot-brand{display:flex;align-items:center;gap:10px;color:var(--mut);font-size:15px}
.foot-links{display:flex;flex-wrap:wrap;gap:8px 22px;font-size:15px}
.foot-links a{color:var(--mut)}
.foot-links a:hover{color:var(--teal-ink)}
.foot-note{width:100%;color:var(--dim);font-size:13.5px;display:flex;flex-wrap:wrap;gap:6px 18px}

/* ── Hero ───────────────────────────────────────── */
.hero{position:relative;padding:108px 0 44px;text-align:center}
.hero-glow{position:absolute;inset:-120px 0 0;pointer-events:none;z-index:-1;
  background:radial-gradient(560px 340px at 50% 12%,rgba(13,148,136,.09),transparent 70%),
             radial-gradient(900px 480px at 78% -10%,rgba(37,99,235,.05),transparent 70%)}
.hero-kicker{display:inline-flex;align-items:center;gap:8px;margin-bottom:22px}
.hero h1{font-size:clamp(38px,6vw,64px);max-width:820px;margin:0 auto}
.hero-sub{margin:20px auto 0;max-width:560px;color:var(--mut);font-size:clamp(17px,2.2vw,20px);line-height:1.55}
.hero-ctas{display:flex;flex-wrap:wrap;gap:14px;justify-content:center;margin-top:34px}
.hero-bg{position:absolute;inset:0;z-index:-2;overflow:hidden;pointer-events:none}
.hero-bg svg{position:absolute;left:50%;top:-40px;transform:translateX(-50%);min-width:1300px;opacity:.6}

/* ── Buttons / badges / pills ───────────────────── */
.btn{display:inline-flex;align-items:center;gap:9px;padding:13px 26px;border-radius:var(--r-pill);white-space:nowrap;
  font:600 15.5px/1 var(--sans);letter-spacing:.01em;cursor:pointer;border:0;transition:transform .2s ease,box-shadow .25s ease,background .2s ease,border-color .2s ease}
.btn-pri{background:linear-gradient(180deg,#12a08f,#0d7a6e);color:#fff;box-shadow:0 6px 22px rgba(13,148,136,.28)}
.btn-pri:hover{transform:translateY(-1.5px);box-shadow:0 10px 30px rgba(13,148,136,.36);color:#fff}
.btn-gho{background:#fff;border:1px solid var(--line);color:var(--ink)}
.btn-gho:hover{border-color:var(--teal-line);color:#000;transform:translateY(-1.5px)}
.btn-sm{padding:10px 20px;font-size:14.5px}
.badge{display:inline-flex;align-items:center;gap:6px;padding:4px 12px;border-radius:var(--r-pill);
  font:600 10.5px/1.5 var(--mono);letter-spacing:.09em;text-transform:uppercase;white-space:nowrap}
.b-built{color:var(--green);border:1px solid rgba(21,128,61,.38);background:rgba(21,128,61,.07)}
.b-dev{color:var(--amber);border:1px solid rgba(180,83,9,.38);background:rgba(180,83,9,.07)}
.b-plan{color:var(--gray);border:1px solid rgba(90,104,130,.34);background:rgba(90,104,130,.06)}
.pill-note{display:inline-flex;align-items:center;gap:8px;padding:9px 18px;border-radius:var(--r-pill);
  border:1px solid var(--line);color:var(--mut);font:500 14px/1.4 var(--mono);background:rgba(90,104,130,.05)}
.status-banner{display:inline-flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:12px;padding:10px 20px;border-radius:var(--r-pill);
  background:var(--panel);border:1px solid var(--line-soft);color:var(--mut);font-size:14.5px}

/* ── Sections ───────────────────────────────────── */
.sec{padding:64px 0 8px}
.kicker{display:block;font:600 12px/1 var(--mono);letter-spacing:.18em;text-transform:uppercase;color:var(--teal-ink);margin-bottom:14px}
.sec-intro{color:var(--mut);font-size:17px;max-width:640px;margin-bottom:34px}
.center{text-align:center}
.center .sec-intro{margin-left:auto;margin-right:auto}

/* ── Cards / animation frames ───────────────────── */
.card{background:var(--panel);border:1px solid var(--line-soft);border-radius:var(--r-card);box-shadow:0 12px 30px rgba(15,23,41,.06)}
.animcard,.scene{background:linear-gradient(180deg,#101932,#0b1226);border-color:rgba(154,165,189,.16);box-shadow:0 18px 44px rgba(15,23,41,.16)}
.animcard .anim-cap,.scene figcaption span{color:#9aa5bd}
.scene figcaption strong{color:#e9edf6}
.animcard .anim-cap::before{background:#38dfc7;box-shadow:0 0 10px rgba(56,223,199,.8)}
.animcard{padding:20px 20px 0;overflow:hidden;position:relative}
.animcard.pad{padding:28px}
.anim svg{width:100%;height:auto;display:block}
.anim *{transform-box:fill-box;transform-origin:50% 50%}
.anim text{font-family:var(--mono);font-weight:600;letter-spacing:.02em}
.anim-cap{display:flex;align-items:center;gap:10px;justify-content:center;padding:16px 22px 22px;color:var(--mut);font-size:15px;text-align:center}
.anim-cap::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--teal);box-shadow:0 0 10px rgba(13,148,136,.55);flex:0 0 auto}

/* ── Home: scenes ───────────────────────────────── */
.scenes{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:8px}
@media(max-width:960px){.scenes{grid-template-columns:1fr;max-width:520px;margin-inline:auto}}
.scene{display:flex;flex-direction:column}
.scene figcaption{padding:4px 24px 24px;text-align:center}
.scene figcaption strong{display:block;font-size:16.5px;font-weight:650;letter-spacing:-.01em}
.scene figcaption span{display:block;margin-top:6px;color:var(--mut);font-size:14.5px}

/* ── Home: product cards / diff / ribbon ────────── */
.prods{display:grid;grid-template-columns:1fr 1fr;gap:22px}
@media(max-width:860px){.prods{grid-template-columns:1fr}}
.prod{display:flex;flex-direction:column;gap:12px;padding:30px 30px 26px;position:relative;transition:transform .25s ease,box-shadow .3s ease,border-color .3s ease}
.prod:hover{transform:translateY(-3px);border-color:rgba(13,148,136,.3);box-shadow:var(--glow),0 16px 36px rgba(15,23,41,.09)}
.prod-head{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.prod-head h3{font-size:21px}
.prod p{color:var(--mut);font-size:15.5px}
.prod-go{margin-top:auto;padding-top:8px;font-weight:600;font-size:15px;display:inline-flex;align-items:center;gap:7px}
.prod-go::after{content:"→";transition:transform .2s ease}
.prod:hover .prod-go::after{transform:translateX(4px)}
.prod > a.cover{position:absolute;inset:0;border-radius:var(--r-card)}
.diff{display:flex;flex-wrap:wrap;gap:14px;justify-content:center}
.diff-chip{padding:13px 26px;border-radius:var(--r-pill);border:1px solid var(--teal-line);color:var(--ink);
  background:linear-gradient(180deg,rgba(13,148,136,.07),rgba(13,148,136,.03));font-weight:600;font-size:15.5px;box-shadow:0 10px 26px rgba(15,23,41,.06)}
.ribbon{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:12px 26px;padding:26px 34px;border-radius:var(--r-card);
  background:linear-gradient(90deg,rgba(13,148,136,.07),rgba(37,99,235,.05));border:1px solid var(--line-soft);text-align:center}
.ribbon p{font-size:16.5px;font-weight:550}
.ribbon a{font-weight:650;white-space:nowrap}

/* ── How-it-works steps ─────────────────────────── */
.tsteps{list-style:none;display:flex;flex-direction:column;gap:14px;margin:0;padding:0;counter-reset:tstep}
.tstep{counter-increment:tstep;display:grid;grid-template-columns:auto 1fr;gap:4px 20px;
  padding:26px 30px;border-radius:var(--r-card);background:var(--panel);border:1px solid var(--line-soft);
  transition:border-color .25s ease,box-shadow .25s ease}
.tstep:hover{border-color:var(--teal-line);box-shadow:var(--glow)}
.tstep::before{content:counter(tstep,decimal-leading-zero);grid-row:1/span 3;align-self:start;
  font:600 13px/1.5 var(--mono);letter-spacing:.06em;color:var(--teal-ink);
  padding:3px 0 0;min-width:2.2em}
.tstep h3{font-size:19.5px;letter-spacing:-.015em;line-height:1.3}
.tstep p{margin-top:8px;color:var(--mut);font-size:16px;line-height:1.62;max-width:62ch}
.tstep-term{margin-top:14px;padding-top:13px;border-top:1px solid var(--line-soft);
  color:var(--dim);font:500 13.5px/1.5 var(--mono)}
.tstep-term b{color:var(--mut);font-weight:600}
@media(max-width:620px){
  .tstep{grid-template-columns:1fr;padding:22px 20px;gap:0}
  .tstep::before{grid-row:auto;margin-bottom:8px}
}

/* ── Plain-language lead (every page) ───────────── */
.plain-sec{padding:26px 0 0}
.plainbox{max-width:780px;margin:0 auto;padding:28px 32px;border-radius:var(--r-card);
  background:linear-gradient(180deg,rgba(13,148,136,.065),rgba(13,148,136,.02));
  border:1px solid var(--teal-line);box-shadow:0 10px 26px rgba(15,23,41,.05)}
.plainbox .kicker{margin-bottom:12px}
.plainbox p{color:var(--ink);font-size:17.5px;line-height:1.62}
.plainbox p + p{margin-top:12px}
@media(max-width:600px){.plainbox{padding:24px 22px}.plainbox p{font-size:16.5px}}

/* ── Home: two key features ─────────────────────── */
.keys{display:grid;grid-template-columns:1fr 1fr;gap:22px}
@media(max-width:860px){.keys{grid-template-columns:1fr}}
.key{display:flex;flex-direction:column;gap:12px;padding:34px 34px 30px;
  transition:transform .25s ease,box-shadow .3s ease,border-color .3s ease}
.key:hover{transform:translateY(-3px);border-color:rgba(13,148,136,.3);box-shadow:var(--glow),0 16px 36px rgba(15,23,41,.09)}
.key-n{font:600 12px/1 var(--mono);letter-spacing:.18em;text-transform:uppercase;color:var(--teal-ink)}
.key h2{font-size:clamp(22px,2.7vw,27px);line-height:1.22;letter-spacing:-.018em;max-width:15em}
.key p{color:var(--mut);font-size:16.5px;line-height:1.6}
.key-eg{margin-top:auto;padding-top:10px;display:flex;align-items:baseline;gap:11px;
  color:var(--teal-ink)!important;font-size:15px;font-weight:600}
.key-eg::before{content:"";flex:none;width:8px;height:8px;border-radius:50%;transform:translateY(-2px);
  background:var(--teal);box-shadow:0 0 0 4px rgba(13,148,136,.13)}
.plain-note{margin-top:20px;text-align:center;color:var(--dim);font-size:14.5px}

/* ── Chips ──────────────────────────────────────── */
.cgroup{margin-top:38px}
.cgroup h3{font:600 12.5px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--mut);margin-bottom:16px}
.chips{list-style:none;display:flex;flex-wrap:wrap;gap:12px}
.chip{display:inline-flex;align-items:center;flex-wrap:wrap;gap:7px 12px;padding:12px 22px;border-radius:var(--r-pill);
  background:var(--panel);border:1px solid var(--line-soft);max-width:100%;transition:border-color .25s ease,box-shadow .25s ease}
.chip:hover{border-color:rgba(93,106,131,.28);box-shadow:0 10px 26px rgba(15,23,41,.07)}
.chip-name{font-weight:650;font-size:15px;letter-spacing:-.005em;color:var(--ink)}
.chip-line{color:var(--mut);font-size:14px}

.chip-gray{opacity:.9}
.chip-gray .chip-name{color:var(--mut);font-weight:600}
.strip{padding:20px 30px;border-radius:var(--r-card);background:var(--panel);border:1px solid var(--line-soft);color:var(--mut);font-size:15.5px;text-align:center}

/* ── Code block ─────────────────────────────────── */
.code{background:linear-gradient(180deg,#101932,#0b1226);border:1px solid rgba(154,165,189,.16);border-radius:var(--r-code);padding:24px 28px;overflow-x:auto;
  font:500 14.5px/1.7 var(--mono);color:#c8d2e8;box-shadow:inset 0 1px 0 rgba(154,165,189,.06),0 14px 34px rgba(15,23,41,.16)}
.c-k{color:#38dfc7}
.c-s{color:#a5c8ff}
.c-c{color:#7d8aa5}

/* ── CTA band ───────────────────────────────────── */
.ctaband{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:18px 30px;padding:44px 40px;text-align:center;
  border-radius:var(--r-card);background:radial-gradient(480px 200px at 50% 0%,rgba(13,148,136,.1),transparent 75%),var(--panel);
  border:1px solid var(--line-soft)}
.ctaband p{font-size:clamp(19px,2.6vw,24px);font-weight:650;letter-spacing:-.015em;width:100%}

/* ── Roadmap timeline ───────────────────────────── */
.tl{list-style:none;position:relative;margin:26px 0 0;padding-left:6px}
.tl-h{margin:44px 0 6px;padding-left:44px;font:600 12.5px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--mut)}
.tl-item{position:relative;padding:10px 0 10px 44px}
.tl-item::before{content:"";position:absolute;left:8px;top:-14px;bottom:-14px;width:2px;border-radius:2px;
  background:linear-gradient(180deg,rgba(90,104,130,.2),rgba(90,104,130,.2));transform:scaleY(0);transform-origin:top;transition:transform .8s ease .1s}
.tl-item.in::before{transform:scaleY(1)}
.tl-item:first-child::before{top:26px}
.tl-item:last-child::before{bottom:14px}
.tl-dot{position:absolute;left:0;top:16px;width:18px;height:18px;border-radius:50%;border:2px solid var(--dim);background:#fff;transition:background .5s ease .3s,border-color .5s ease .3s,box-shadow .6s ease .3s}
.t-built.in .tl-dot{background:var(--green);border-color:var(--green);box-shadow:0 0 14px rgba(21,128,61,.35)}
.t-dev.in .tl-dot{background:var(--amber);border-color:var(--amber);animation:tl-pulse 3s ease-in-out infinite}
.t-plan .tl-dot{border-style:dashed}
@keyframes tl-pulse{0%,100%{box-shadow:0 0 0 0 rgba(180,83,9,.35)}50%{box-shadow:0 0 0 12px rgba(180,83,9,0)}}
.tl .chip{opacity:0;transform:translateY(8px);transition:opacity .6s ease .15s,transform .6s ease .15s,border-color .25s ease}
.tl-item.in .chip{opacity:1;transform:none}
html:not(.js) .tl .chip,html:not(.js) .tl-item::before{opacity:1;transform:none}
.road-notes{margin-top:48px;display:flex;flex-direction:column;gap:8px;color:var(--mut);text-align:center;font-size:15.5px}
.road-notes .mono{font-family:var(--mono);font-size:14px}

/* ── Partners ───────────────────────────────────── */
.spots{display:inline-flex;align-items:baseline;gap:10px;padding:12px 28px;border-radius:var(--r-pill);
  border:1px solid var(--teal-line);background:var(--teal-soft);color:var(--ink);
  animation:breathe 6s ease-in-out infinite}
.spots strong{font-size:26px;font-weight:700;color:var(--teal-ink);letter-spacing:-.02em}
.spots span{font-size:15px;color:var(--mut)}
@keyframes breathe{0%,100%{box-shadow:0 0 0 0 rgba(13,148,136,0),0 8px 22px rgba(13,148,136,.1);transform:scale(1)}
  50%{box-shadow:0 0 0 1px rgba(13,148,136,.18),0 10px 32px rgba(13,148,136,.2);transform:scale(1.015)}}
.pitch{max-width:640px;margin:0 auto;display:flex;flex-direction:column;gap:16px;color:var(--mut);font-size:17px;text-align:center}
.pitch strong{color:var(--ink);font-weight:600}
.form{margin-top:44px;padding:38px 38px 42px;display:grid;grid-template-columns:1fr 1fr;gap:22px 20px}
@media(max-width:760px){.form{grid-template-columns:1fr;padding:28px 22px 34px}}
.field{display:flex;flex-direction:column;gap:8px}
.field.full{grid-column:1/-1}
.field label,.field legend{font-size:14.5px;font-weight:600;color:var(--ink)}
.field .opt{color:var(--dim);font-weight:500}
.field input[type="text"],.field input[type="email"],.field select,.field textarea{
  appearance:none;background:#fff;border:1px solid var(--line);border-radius:var(--r-input);
  padding:13px 16px;color:var(--ink);font:400 15.5px/1.5 var(--sans);width:100%;transition:border-color .2s ease,box-shadow .2s ease}
.field select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%234d5c78' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 16px center;padding-right:40px}
.field textarea{min-height:110px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--teal-line);box-shadow:0 0 0 3px rgba(13,148,136,.14)}
.field [aria-invalid="true"]{border-color:rgba(225,29,72,.55)}
fieldset.field{border:0}
.radios{display:flex;flex-wrap:wrap;gap:9px}
.radio-pill{position:relative}
.radio-pill input{position:absolute;inset:0;opacity:0;cursor:pointer}
.radio-pill span{display:inline-block;padding:10px 19px;border-radius:var(--r-pill);border:1px solid var(--line);color:var(--mut);font-size:14.5px;transition:all .2s ease;cursor:pointer}
.radio-pill input:checked + span{border-color:var(--teal-ink);color:#fff;background:var(--teal-ink);font-weight:600}
.radio-pill input:focus-visible + span{outline:2px solid var(--teal);outline-offset:3px}
.checkline{flex-direction:row;align-items:flex-start;gap:12px}
.checkline input{width:20px;height:20px;margin-top:3px;accent-color:var(--teal);border-radius:6px;flex:0 0 auto}
.checkline label{font-weight:400;color:var(--mut);font-size:14.5px;line-height:1.55}
.err{display:none;color:var(--rose);font-size:13.5px}
.err.show{display:block}
.form-actions{grid-column:1/-1;display:flex;flex-wrap:wrap;align-items:center;gap:16px;margin-top:4px}
.form-msg{display:none;padding:14px 22px;border-radius:var(--r-input);font-size:15px;line-height:1.5}
.form-msg.show{display:block}
.form-msg.ok{background:rgba(21,128,61,.08);border:1px solid rgba(21,128,61,.32);color:#146c37}
.form-msg.bad{background:rgba(225,29,72,.07);border:1px solid rgba(225,29,72,.3);color:#be123c}
.form-msg.note{background:rgba(90,104,130,.07);border:1px solid var(--line);color:var(--mut)}

/* Copyable draft — shown when a mailto: may not open (webmail-only machines) */
.fbk{display:none;grid-column:1/-1;margin-top:14px;padding:20px 22px;border-radius:var(--r-input);
  background:var(--bg2);border:1px solid var(--line)}
.fbk.show{display:block}
.fbk-lead{color:var(--mut);font-size:14.5px;line-height:1.55}
.fbk-meta{display:flex;gap:8px;margin-top:14px;font:500 13.5px/1.5 var(--mono)}
.fbk-meta dt{color:var(--dim)}
.fbk-meta dt::after{content:":"}
.fbk-meta dd{margin:0;color:var(--ink)}
.fbk-body{margin-top:10px;padding:14px 16px;border-radius:var(--r-input);background:#fff;
  border:1px solid var(--line-soft);font:500 13.5px/1.65 var(--mono);color:var(--ink);
  white-space:pre-wrap;word-break:break-word;max-height:220px;overflow-y:auto}
.fbk-act{display:flex;align-items:center;gap:14px;margin-top:14px}
.fbk-said{color:var(--teal-ink);font-size:13.5px;font-weight:600}

/* ── GDPR page ──────────────────────────────────── */
.disclaim{display:block;max-width:760px;margin:26px auto 0;padding:14px 26px;border-radius:var(--r-pill);
  background:rgba(90,104,130,.06);border:1px solid var(--line);color:var(--mut);font-size:14.5px;line-height:1.5;text-align:center}
.page-note{margin-top:34px;color:var(--dim);font-size:13.5px;text-align:center;line-height:1.6}
.rgrid{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:30px}
@media(max-width:880px){.rgrid{grid-template-columns:1fr}}
.rcard{padding:28px 28px 30px;display:flex;flex-direction:column;gap:18px}
.rcard-head{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.rcard-head h3{font-size:18.5px}
.art-pill{padding:5px 14px;border-radius:var(--r-pill);border:1px solid var(--line);background:rgba(90,104,130,.06);
  color:var(--mut);font:600 11px/1.4 var(--mono);letter-spacing:.06em;white-space:nowrap}
.rcard .chips{flex-direction:column;align-items:flex-start;gap:10px}
.rcard .chip{background:var(--panel)}
.linkchip{display:inline-flex;align-items:center;gap:10px;padding:12px 24px;border-radius:var(--r-pill);
  border:1px solid var(--teal-line);background:var(--teal-soft);color:var(--ink);font-weight:600;font-size:15px;
  transition:transform .2s ease,box-shadow .25s ease}
.linkchip:hover{transform:translateY(-2px);box-shadow:var(--glow);color:#000}
.linkchip::after{content:"→";color:var(--teal-ink);transition:transform .2s ease}
.linkchip:hover::after{transform:translateX(4px)}

/* GDPR — subject request, end to end (24s = 3 × 8s) */
.g-pkt{opacity:0;animation:gpkt 8s ease-in-out infinite}
@keyframes gpkt{0%{opacity:0;transform:translateX(0)}8%{opacity:1}34%{opacity:1;transform:translateX(96px)}42%,100%{opacity:0;transform:translateX(96px)}}
.g-cring{opacity:0;animation:gcring 8s ease-out infinite}
@keyframes gcring{0%,34%{transform:scale(.75);opacity:0}40%{opacity:.8}52%{transform:scale(1.4);opacity:0}100%{opacity:0}}
.g-core{animation:gcore 8s ease-in-out infinite}
@keyframes gcore{0%,30%{transform:scale(1)}40%{transform:scale(1.05)}54%,100%{transform:scale(1)}}
.g-vok{animation:gvok 8s cubic-bezier(.34,1.5,.5,1) infinite}
@keyframes gvok{0%,72%{transform:scale(1)}80%{transform:scale(1.07)}90%,100%{transform:scale(1)}}
.g-vtick{opacity:0;animation:gvtick 8s ease-out infinite}
@keyframes gvtick{0%,74%{transform:scale(.8);opacity:0}80%{opacity:.75}92%{transform:scale(1.5);opacity:0}100%{opacity:0}}
.gA,.gB,.gC{animation:gph 24s ease-in-out infinite}
.gB,.gC{opacity:0}
.gB{animation-delay:-16s}
.gC{animation-delay:-8s}
@keyframes gph{0%,10%{opacity:0}13%,32%{opacity:1}33.4%,100%{opacity:0}}
.gl1,.gl2,.gl3{animation:glab 24s linear infinite}
.gl2,.gl3{opacity:0}
.gl2{animation-delay:-16s}
.gl3{animation-delay:-8s}
@keyframes glab{0%,32%{opacity:1}33.4%,98.6%{opacity:0}100%{opacity:1}}
.gA-doc{animation:gadoc 24s ease-in-out infinite}
@keyframes gadoc{0%,12%{transform:translateX(-16px)}19%,33%{transform:translateX(0)}100%{transform:translateX(0)}}
.gA-seal{animation:gaseal 24s cubic-bezier(.3,1.5,.45,1) infinite}
@keyframes gaseal{0%,20%{opacity:0;transform:scale(1.8) rotate(-10deg)}25%,33%{opacity:1;transform:scale(1) rotate(0)}34%,100%{opacity:0}}
.gB-key{animation:gbkey 24s ease-in-out infinite;animation-delay:-16s}
@keyframes gbkey{0%,18%{opacity:1;filter:blur(0)}25%,100%{opacity:0;filter:blur(4px)}}
.gB-rows{animation:gbrows 24s ease-in-out infinite;animation-delay:-16s;filter:blur(2.6px)}
@keyframes gbrows{0%,19%{filter:blur(0);opacity:1}27%,100%{filter:blur(2.6px);opacity:.5}}
.gB-rec{animation:gbrec 24s cubic-bezier(.3,1.5,.45,1) infinite;animation-delay:-16s}
@keyframes gbrec{0%,24%{opacity:0;transform:scale(.7)}29%,33%{opacity:1;transform:scale(1)}34%,100%{opacity:0}}
.gC-pause{animation:gcpause 24s cubic-bezier(.3,1.5,.45,1) infinite;animation-delay:-8s}
@keyframes gcpause{0%,17%{opacity:0;transform:translateX(22px) scale(.7)}23%,33%{opacity:1;transform:translateX(0) scale(1)}34%,100%{opacity:0}}
.gC-beam{stroke-dasharray:230;animation:gcbeam 24s ease-in-out infinite;animation-delay:-8s}
.gC-beam.b2{animation-delay:-7.4s}
@keyframes gcbeam{0%,22%{stroke-dashoffset:230;opacity:0}25%{opacity:.9}31%,33%{stroke-dashoffset:0;opacity:.9}34%,100%{opacity:0}}

/* GDPR — pseudonymisation (12s) */
.q-trav{opacity:0;animation:qtrav 12s ease-in-out infinite}
@keyframes qtrav{0%,4%{opacity:0;transform:translateX(0)}10%{opacity:1}26%{opacity:1;transform:translateX(50px)}32%,100%{opacity:0;transform:translateX(50px)}}
.q-gate{animation:qgate 12s ease-in-out infinite}
@keyframes qgate{0%,28%{stroke:rgba(154,165,189,.4)}36%{stroke:#38dfc7}52%,100%{stroke:rgba(154,165,189,.4)}}
.q-tok{animation:qtok 12s cubic-bezier(.34,1.45,.5,1) infinite}
@keyframes qtok{0%,36%{opacity:0;transform:scale(.72)}44%,96%{opacity:1;transform:scale(1)}100%{opacity:1}}
.q-key{animation:qkey 12s ease-in-out infinite}
@keyframes qkey{0%,52%{opacity:1;filter:blur(0)}66%,100%{opacity:0;filter:blur(4px)}}
.q-lock{animation:qlock 12s cubic-bezier(.34,1.45,.5,1) infinite}
@keyframes qlock{0%,66%{opacity:0;transform:scale(.5)}74%,96%{opacity:1;transform:scale(1)}100%{opacity:1}}

/* ── Policy / about ─────────────────────────────── */
.pol{display:flex;flex-direction:column;gap:20px;color:var(--mut);font-size:16.5px}
.pol strong{color:var(--ink)}
.pol-date{font:500 13.5px/1.5 var(--mono);color:var(--dim)}
.contact-pill{display:inline-flex;align-items:center;gap:10px;padding:14px 28px;border-radius:var(--r-pill);
  border:1px solid var(--line);background:var(--panel);font:500 16px/1 var(--mono);color:var(--ink)}
.contact-pill:hover{border-color:var(--teal-line);color:var(--teal-ink)}

/* ── Language chooser ───────────────────────────── */
.choose{min-height:100svh;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0;padding:40px 24px;text-align:center;position:relative}
.choose-name{margin-top:22px;font-size:34px;font-weight:650;letter-spacing:-.02em}
.choose-line{margin-top:10px;color:var(--mut);font-size:16px}
.choose-btns{display:flex;flex-direction:column;gap:14px;margin-top:44px;width:min(320px,100%)}
.choose-btn{position:relative;display:flex;align-items:center;justify-content:center;padding:16px 28px;border-radius:var(--r-pill);
  border:1px solid var(--line);background:var(--panel);color:var(--ink);font-size:17px;font-weight:600;
  transition:transform .2s ease,border-color .25s ease,box-shadow .25s ease}
.choose-btn:hover{transform:translateY(-2px);border-color:var(--teal-line);box-shadow:var(--glow);color:#000}
.choose-btn.suggest{border-color:var(--teal-line);box-shadow:0 0 0 1px rgba(13,148,136,.22),var(--glow)}
.choose-btn.suggest::after{content:"";position:absolute;right:20px;width:8px;height:8px;border-radius:50%;background:var(--teal);box-shadow:0 0 10px rgba(13,148,136,.6);animation:breathe 4s ease-in-out infinite}
.choose-foot{position:absolute;bottom:26px;left:0;right:0;color:var(--dim);font-size:12.5px;display:flex;flex-wrap:wrap;gap:4px 16px;justify-content:center;padding:0 20px}

/* ── Scroll reveal ──────────────────────────────── */
html.js .reveal{opacity:0;transform:translateY(16px);transition:opacity .75s ease,transform .75s ease}
html.js .reveal.in{opacity:1;transform:none}

/* ═══ ANIMATIONS — base styles are always the meaningful end-state;
   keyframes replay the story. With animation off, each SVG is a clean
   static diagram. ═══ */

/* shared svg vocab */
.sv-node{fill:#131e3a;stroke:rgba(154,165,189,.35);stroke-width:1.5}
.sv-node-hot{fill:rgba(56,223,199,.1);stroke:#38dfc7;stroke-width:1.5}
.sv-bar{fill:rgba(154,165,189,.35)}
.sv-bar-dim{fill:rgba(154,165,189,.18)}
.sv-pill{fill:rgba(56,223,199,.12);stroke:rgba(56,223,199,.38);stroke-width:1.2}
.sv-thread{fill:none;stroke:#38dfc7;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.sv-soft{fill:none;stroke:rgba(154,165,189,.3);stroke-width:1.6;stroke-linecap:round;stroke-dasharray:1 7}
.sv-tx{fill:#9aa5bd;font-size:11.5px}
.sv-tx-teal{fill:#38dfc7;font-size:11.5px}
.sv-tx-ink{fill:#e9edf6;font-size:12.5px}
.sv-lab{fill:#7d8aa5;font-size:10.5px;letter-spacing:.08em;text-transform:uppercase}

/* Scene 1 — the repeat finding (9s) */
.s1q{animation:s1q 9s ease-in-out infinite}
@keyframes s1q{0%{opacity:0;transform:translateY(9px)}7%,92%{opacity:1;transform:none}98%,100%{opacity:0}}
.s1beam{stroke-dasharray:150;stroke-dashoffset:0;animation:s1beam 9s ease-in-out infinite}
@keyframes s1beam{0%,10%{stroke-dashoffset:150;opacity:0}14%{opacity:1}30%,92%{stroke-dashoffset:0;opacity:1}98%,100%{opacity:0}}
.s1hot{animation:s1hot 9s ease-in-out infinite}
@keyframes s1hot{0%,30%{fill:#131e3a;stroke:rgba(154,165,189,.35)}44%,92%{fill:rgba(56,223,199,.13);stroke:#38dfc7}98%,100%{fill:#131e3a;stroke:rgba(154,165,189,.35)}}
.s1halo{animation:s1halo 9s ease-in-out infinite}
@keyframes s1halo{0%,32%{opacity:0}48%,90%{opacity:1}97%,100%{opacity:0}}
.s1cite{animation:s1cite 9s cubic-bezier(.34,1.4,.5,1) infinite}
@keyframes s1cite{0%,48%{opacity:0;transform:scale(.72)}58%,92%{opacity:1;transform:scale(1)}98%,100%{opacity:0;transform:scale(1)}}

/* Scene 2 — the AI that stays silent (9s) */
.s2p{animation:s1q 9s ease-in-out infinite}
.s2r{opacity:0;animation:s2r 9s ease-out infinite}
.s2r.r2{animation-delay:.8s}
@keyframes s2r{0%,12%{transform:scale(.2);opacity:0}20%{opacity:.55}46%{transform:scale(1.9);opacity:0}100%{opacity:0}}
.s2b{animation:s2b 9s ease-in-out infinite}
@keyframes s2b{0%,56%{opacity:0;transform:translateY(10px)}66%,92%{opacity:1;transform:none}98%,100%{opacity:0}}

/* Scene 3 — erasure, chain intact (10s) */
.s3key{opacity:0;animation:s3key 10s ease-in-out infinite}
@keyframes s3key{0%{opacity:1;filter:blur(0)}28%{opacity:1;filter:blur(0)}44%,100%{opacity:0;filter:blur(5px)}}
.s3rows{filter:blur(2.6px);opacity:.5;animation:s3rows 10s ease-in-out infinite}
@keyframes s3rows{0%,38%{filter:blur(0);opacity:1}56%,100%{filter:blur(2.6px);opacity:.5}}
.s3chk{animation:s3chk 10s cubic-bezier(.34,1.45,.5,1) infinite}
@keyframes s3chk{0%,58%{opacity:0;transform:scale(.55)}68%,94%{opacity:1;transform:scale(1)}100%{opacity:1}}
.s3thread{animation:s3thread 5s ease-in-out infinite}
@keyframes s3thread{0%,100%{opacity:.75}50%{opacity:1}}

/* SDK pipeline (12s) */
.p-doc{animation:pdoc 12s ease-in-out infinite}
@keyframes pdoc{0%{opacity:0;transform:translateX(-10px)}6%,93%{opacity:1;transform:none}98%,100%{opacity:0}}
.p-b1{stroke-dasharray:120;animation:pb1 12s ease-in-out infinite}
@keyframes pb1{0%,8%{stroke-dashoffset:120;opacity:0}11%{opacity:1}20%,93%{stroke-dashoffset:0;opacity:1}98%,100%{opacity:0}}
.p-cha{animation:pcha 12s cubic-bezier(.34,1.4,.5,1) infinite}
@keyframes pcha{0%,16%{opacity:0;transform:scale(.3)}23%,93%{opacity:1;transform:scale(1)}98%,100%{opacity:0}}
.p-chb{animation:pchb 12s cubic-bezier(.34,1.4,.5,1) infinite}
@keyframes pchb{0%,21%{opacity:0;transform:scale(.3)}28%,93%{opacity:1;transform:scale(1)}98%,100%{opacity:0}}
.p-shim{opacity:0;animation:pshim 12s ease-in-out infinite}
@keyframes pshim{0%,30%{opacity:0;transform:translateX(-46px)}36%{opacity:.9}44%{opacity:0;transform:translateX(52px)}100%{opacity:0}}
.p-bv{stroke-dasharray:170;animation:pbv 12s ease-in-out infinite}
@keyframes pbv{0%,46%{stroke-dashoffset:170;opacity:0}50%{opacity:1}62%,93%{stroke-dashoffset:0;opacity:1}98%,100%{opacity:0}}
.p-bk{stroke-dasharray:170;animation:pbk 12s ease-in-out infinite}
@keyframes pbk{0%,50%{stroke-dashoffset:170;opacity:0}54%{opacity:.8}66%,93%{stroke-dashoffset:0;opacity:.8}98%,100%{opacity:0}}
.p-ans{animation:pans 12s ease-in-out infinite}
@keyframes pans{0%,64%{opacity:0;transform:translateY(12px)}73%,93%{opacity:1;transform:none}98%,100%{opacity:0}}
.p-cite{animation:pcite 12s cubic-bezier(.34,1.45,.5,1) infinite}
@keyframes pcite{0%,74%{opacity:0;transform:scale(.7)}82%,93%{opacity:1;transform:scale(1)}98%,100%{opacity:0}}

/* Provenance chain (16s) */
.c-b1{animation:cb1 16s ease-in-out infinite}
.c-b2{animation:cb2 16s ease-in-out infinite}
.c-b4{animation:cb4 16s ease-in-out infinite}
.c-b5{animation:cb5 16s ease-in-out infinite}
@keyframes cb1{0%{opacity:0;transform:scale(.6)}3%,96%{opacity:1;transform:scale(1)}99%,100%{opacity:0}}
@keyframes cb2{0%,3%{opacity:0;transform:scale(.6)}6%,96%{opacity:1;transform:scale(1)}99%,100%{opacity:0}}
@keyframes cb4{0%,9%{opacity:0;transform:scale(.6)}12%,96%{opacity:1;transform:scale(1)}99%,100%{opacity:0}}
@keyframes cb5{0%,12%{opacity:0;transform:scale(.6)}15%,96%{opacity:1;transform:scale(1)}99%,100%{opacity:0}}
.c-b3{animation:cb3 16s ease-in-out infinite}
@keyframes cb3{0%,6%{opacity:0;transform:scale(.6)}9%{opacity:1;transform:scale(1)}30%{transform:scale(1)}34%{transform:scale(1.07) translateY(-2px)}40%{transform:scale(1)}96%{opacity:1}99%,100%{opacity:0}}
.c-b3x{animation:cb3x 16s ease-in-out infinite}
@keyframes cb3x{0%,30%{fill:#131e3a;stroke:rgba(154,165,189,.35)}34%{fill:rgba(251,113,133,.16);stroke:#fb7185}56%{fill:rgba(251,113,133,.16);stroke:#fb7185}64%,100%{fill:#131e3a;stroke:rgba(154,165,189,.35)}}
.c-l1{stroke-dasharray:60;animation:cl1 16s ease-in-out infinite}
.c-l2{stroke-dasharray:60;animation:cl2 16s ease-in-out infinite}
@keyframes cl1{0%,4%{stroke-dashoffset:60}7%,96%{stroke-dashoffset:0}99%,100%{opacity:0}}
@keyframes cl2{0%,7%{stroke-dashoffset:60}10%,96%{stroke-dashoffset:0}99%,100%{opacity:0}}
.c-l3{stroke-dasharray:60;animation:cl3 16s ease-in-out infinite}
.c-l4{stroke-dasharray:60;animation:cl4 16s ease-in-out infinite}
@keyframes cl3{0%,10%{stroke-dashoffset:60}13%{stroke-dashoffset:0}30%{stroke:#0d9488}36%{stroke:#e11d48}58%{stroke:#e11d48}64%,96%{stroke:#0d9488;stroke-dashoffset:0}99%,100%{opacity:0}}
@keyframes cl4{0%,13%{stroke-dashoffset:60}16%{stroke-dashoffset:0}32%{stroke:#0d9488}39%{stroke:#e11d48}58%{stroke:#e11d48}66%,96%{stroke:#0d9488;stroke-dashoffset:0}99%,100%{opacity:0}}
.c-cur{opacity:0;animation:ccur 16s ease-in-out infinite}
@keyframes ccur{0%,24%{opacity:0;transform:translate(26px,-34px)}29%{opacity:1;transform:translate(4px,-5px)}
  32%{transform:translate(0,0) scale(.92)}34%{transform:translate(0,0) scale(1)}40%{opacity:1}46%,100%{opacity:0;transform:translate(18px,-26px)}}
.c-vok{animation:cvok 16s ease-in-out infinite}
@keyframes cvok{0%,37%{opacity:1}40%,60%{opacity:0}66%,100%{opacity:1}}
.c-vbad{opacity:0;animation:cvbad 16s ease-in-out infinite}
@keyframes cvbad{0%,37%{opacity:0}40%,60%{opacity:1}66%,100%{opacity:0}}
.c-sweep{opacity:0;stroke-dasharray:26 600;animation:csweep 16s ease-in-out infinite}
@keyframes csweep{0%,62%{stroke-dashoffset:620;opacity:0}64%{opacity:1}74%{stroke-dashoffset:0;opacity:0}100%{opacity:0}}
.c-ml{stroke-dasharray:140;animation:cml 16s ease-in-out infinite}
@keyframes cml{0%,74%{stroke-dashoffset:140;opacity:0}77%{opacity:.85}84%,96%{stroke-dashoffset:0;opacity:.85}99%,100%{opacity:0}}
.c-root{animation:croot 16s cubic-bezier(.34,1.4,.5,1) infinite}
@keyframes croot{0%,78%{opacity:0;transform:scale(.5) rotate(-14deg)}85%,96%{opacity:1;transform:scale(1) rotate(0)}99%,100%{opacity:0}}
.c-seal{animation:cseal 16s cubic-bezier(.3,1.5,.45,1) infinite}
@keyframes cseal{0%,85%{opacity:0;transform:scale(1.7)}90%,96%{opacity:1;transform:scale(1)}99%,100%{opacity:0}}
.c-sring{opacity:0;animation:csring 16s ease-out infinite}
@keyframes csring{0%,89%{transform:scale(.7);opacity:0}91%{opacity:.7}97%{transform:scale(1.7);opacity:0}100%{opacity:0}}

/* Privacy — local-first boundary (10s) */
.b-corp{animation:bcorp 5s ease-in-out infinite}
@keyframes bcorp{0%,100%{transform:scale(1)}50%{transform:scale(1.014)}}
.b-out{opacity:0;animation:bout 10s ease-in-out infinite}
@keyframes bout{0%,12%{opacity:0;transform:translateX(0)}17%{opacity:1}38%{opacity:1;transform:translateX(212px)}44%,100%{opacity:0;transform:translateX(212px)}}
.b-mem{animation:bmem 10s ease-in-out infinite}
@keyframes bmem{0%,24%{opacity:.35}30%{opacity:.9}36%,52%{opacity:.35}58%{opacity:.9}64%,100%{opacity:.35}}
.b-mring{opacity:0;animation:bmring 10s ease-out infinite}
@keyframes bmring{0%,40%{transform:scale(.75);opacity:0}44%{opacity:.8}54%{transform:scale(1.45);opacity:0}100%{opacity:0}}
.b-ret{animation:bret 10s ease-in-out infinite}
@keyframes bret{0%,52%{opacity:0;transform:translateX(250px)}57%{opacity:1}76%{opacity:1;transform:translateX(0)}94%{opacity:1}99%,100%{opacity:0}}

/* Privacy — PII masking (12s) */
.m-real{animation:mreal 12s ease-in-out infinite}
@keyframes mreal{0%,9%{opacity:1}15%,76%{opacity:0}84%,97%{opacity:1}100%{opacity:1}}
.m-mask{opacity:0;animation:mmask 12s ease-in-out infinite}
@keyframes mmask{0%,10%{opacity:0;transform:scale(.85)}16%,74%{opacity:1;transform:scale(1)}82%,100%{opacity:0}}
.m-trav{opacity:0;animation:mtrav 12s ease-in-out infinite}
@keyframes mtrav{0%,26%{opacity:0;transform:translateX(0)}31%{opacity:1}48%{transform:translateX(268px)}60%{opacity:1;transform:translateX(268px)}64%{opacity:1}78%{opacity:1;transform:translateX(0)}82%,100%{opacity:0;transform:translateX(0)}}
.m-mring{opacity:0;animation:mmring 12s ease-out infinite}
@keyframes mmring{0%,49%{transform:scale(.75);opacity:0}53%{opacity:.8}62%{transform:scale(1.5);opacity:0}100%{opacity:0}}
.m-lock{animation:mlock 12s cubic-bezier(.34,1.45,.5,1) infinite}
@keyframes mlock{0%,84%{opacity:0;transform:scale(.5)}90%,97%{opacity:1;transform:scale(1)}100%{opacity:1}}

/* MCP hub */
.a-hub .h-orb{transform-box:view-box;transform-origin:440px 200px}
.h-orb{animation:horb 90s linear infinite}
@keyframes horb{to{transform:rotate(360deg)}}
.h-cnt{animation:hcnt 90s linear infinite}
@keyframes hcnt{to{transform:rotate(-360deg)}}
.h-th{stroke-dasharray:3 9;animation:hth 30s linear infinite}
@keyframes hth{to{stroke-dashoffset:-240}}
.h-core{animation:hcore 6s ease-in-out infinite}
@keyframes hcore{0%,100%{transform:scale(1)}50%{transform:scale(1.03)}}
.h-fl{animation:hfl 12s ease-in-out infinite}
@keyframes hfl{0%,16%{opacity:0;transform:scale(.8)}20%{opacity:.9}28%{opacity:0;transform:scale(1.5)}100%{opacity:0}}
.h-fl.o1{animation-delay:3.6s}
.h-fl.o3{animation-delay:4.3s}
.h-cring{opacity:0;animation:hcring 12s ease-out infinite}
@keyframes hcring{0%,30%{transform:scale(.8);opacity:0}34%{opacity:.85}44%{transform:scale(1.6);opacity:0}100%{opacity:0}}
.h-c2{opacity:0;stroke-dasharray:12 100;animation:hc2 12s ease-in-out infinite}
@keyframes hc2{0%,18%{stroke-dashoffset:112;opacity:0}21%{opacity:1}32%{stroke-dashoffset:0;opacity:0}100%{opacity:0}}
.h-c1{opacity:0;stroke-dasharray:12 100;animation:hc1 12s ease-in-out infinite}
.h-c3{opacity:0;stroke-dasharray:12 100;animation:hc3 12s ease-in-out infinite}
@keyframes hc1{0%,34%{stroke-dashoffset:0;opacity:0}37%{opacity:1}48%{stroke-dashoffset:-112;opacity:0}100%{opacity:0}}
@keyframes hc3{0%,37%{stroke-dashoffset:0;opacity:0}40%{opacity:1}51%{stroke-dashoffset:-112;opacity:0}100%{opacity:0}}

/* Desktop concept (12s) */
.a-desk .d-ph1,.a-desk .d-ph2,.a-desk .d-ph3{filter:blur(1.1px)}
.d-float{animation:dfloat 9s ease-in-out infinite}
@keyframes dfloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
.d-ph1{opacity:0;animation:dph1 12s ease-in-out infinite}
@keyframes dph1{0%,2%{opacity:0}6%,28%{opacity:1}33%,100%{opacity:0}}
.d-ph2{animation:dph2 12s ease-in-out infinite}
@keyframes dph2{0%,33%{opacity:0}38%,62%{opacity:1}67%,100%{opacity:0}}
.d-ph3{opacity:0;animation:dph3 12s ease-in-out infinite}
@keyframes dph3{0%,67%{opacity:0}72%,95%{opacity:1}99%,100%{opacity:0}}
.d-prog{animation:dprog 12s ease-in-out infinite;transform:scaleX(1);transform-origin:left center}
@keyframes dprog{0%,6%{transform:scaleX(.06)}26%{transform:scaleX(1)}100%{transform:scaleX(1)}}
.d-note{animation:dnote 6s ease-in-out infinite}
@keyframes dnote{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}

/* Home hero background chain */
.hb1{animation:hb1 70s ease-in-out infinite alternate}
@keyframes hb1{from{transform:translate(0,0) rotate(0)}to{transform:translate(46px,-26px) rotate(1.6deg)}}
.hb2{animation:hb2 90s ease-in-out infinite alternate}
@keyframes hb2{from{transform:translate(0,0)}to{transform:translate(-52px,20px)}}
.hbn{animation:hbn 9s ease-in-out infinite}
@keyframes hbn{0%,100%{opacity:.25}50%{opacity:.85}}
.hbn.t2{animation-delay:-3s}
.hbn.t3{animation-delay:-6s}

/* ── Reduced motion: every explainer holds its meaningful end-state ── */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
  html.js .reveal{opacity:1;transform:none}
  .tl .chip{opacity:1;transform:none}
  .tl-item::before{transform:scaleY(1)}
  .t-built .tl-dot{background:var(--green);border-color:var(--green)}
  .t-dev .tl-dot{background:var(--amber);border-color:var(--amber)}
}

@media(max-width:640px){
  .hero{padding:72px 0 30px}
  .sec{padding:48px 0 8px}
  .form{gap:18px}
  .hero-ctas .btn{width:100%;justify-content:center}
}


/* Chip rows: even spacing, centred; widest box first (order set in main.js) */
.chips{gap:14px;justify-content:center;align-items:stretch}
.chip{flex:0 1 auto}
.cgroup h3{text-align:center}
.tl .chips,.rcard .chips{justify-content:flex-start}

/* ── Threat model ──────────────────────────────── */
.tm-bounds{list-style:none;display:flex;flex-direction:column;gap:12px;margin:0;padding:0}
.tm-b{display:grid;grid-template-columns:1fr 1fr;gap:6px 20px;padding:20px 24px;border-radius:var(--r-card);
  background:var(--panel);border:1px solid var(--line-soft)}
.tm-b strong{grid-column:1/-1;font-size:16.5px;letter-spacing:-.01em}
.tm-in,.tm-out{position:relative;padding-left:20px;color:var(--mut);font-size:14.5px;line-height:1.55}
.tm-in::before,.tm-out::before{position:absolute;left:0;top:0;font:600 13px/1.6 var(--mono)}
.tm-in::before{content:"↓";color:var(--teal-ink)}
.tm-out::before{content:"↑";color:var(--dim)}
.tm-assume{list-style:none;display:flex;flex-direction:column;gap:10px;margin:0;padding:0}
.tm-assume li{position:relative;padding:14px 20px 14px 44px;border-radius:var(--r-card);
  background:var(--panel);border:1px solid var(--line-soft);color:var(--mut);font-size:15px;line-height:1.55}
.tm-assume li::before{content:"?";position:absolute;left:18px;top:14px;width:18px;height:18px;border-radius:50%;
  display:grid;place-items:center;border:1.5px solid var(--line);color:var(--dim);font:600 10px/1 var(--mono)}
@media(max-width:640px){.tm-b{grid-template-columns:1fr;padding:16px 18px}}

/* ── Glossary ──────────────────────────────────── */
.gl{display:flex;flex-direction:column;gap:10px;margin:0}
.gl-i{display:grid;grid-template-columns:180px 1fr;gap:8px 24px;padding:16px 22px;border-radius:var(--r-card);
  background:var(--panel);border:1px solid var(--line-soft)}
.gl-i dt{font:600 14px/1.5 var(--mono);color:var(--teal-ink);word-break:break-word}
.gl-i dd{margin:0;color:var(--mut);font-size:15px;line-height:1.6}
@media(max-width:640px){.gl-i{grid-template-columns:1fr;gap:4px;padding:14px 18px}}

/* ── Changelog ─────────────────────────────────── */
.cl{display:flex;flex-direction:column;gap:34px}
.cl-e h2{display:flex;align-items:center;gap:12px;margin-bottom:14px;
  font:600 13px/1 var(--mono);letter-spacing:.1em;color:var(--dim)}
.cl-e h2::after{content:"";flex:1 1 auto;height:1px;
  background:linear-gradient(90deg,var(--line),transparent)}
.cl-e .chips{justify-content:flex-start}

/* ── Legal & compliance ────────────────────────── */
.lg-probs{list-style:none;display:flex;flex-direction:column;gap:12px;margin:0;padding:0}
.lg-p{display:flex;flex-direction:column;gap:7px;padding:20px 24px;border-radius:var(--r-card);
  background:var(--panel);border:1px solid var(--line-soft)}
.lg-p strong{font-size:16.5px;letter-spacing:-.01em}
.lg-p span{color:var(--mut);font-size:15px;line-height:1.6;max-width:60ch}
.lg-p em{font-style:normal;align-self:flex-start;margin-top:2px;padding:5px 14px;border-radius:var(--r-pill);
  background:var(--teal-soft);border:1px solid var(--teal-line);color:var(--teal-ink);
  font:600 12.5px/1.4 var(--mono)}
a.diff-chip:hover{border-color:var(--teal);box-shadow:0 10px 30px rgba(13,148,136,.18)}

/* ── Comparison ────────────────────────────────── */
.cmp{display:flex;flex-direction:column;border-radius:var(--r-card);overflow:hidden;
  border:1px solid var(--line-soft);background:var(--panel)}
.cmp-r{display:grid;grid-template-columns:1.3fr 1fr 1fr 1fr;gap:0}
.cmp-r + .cmp-r{border-top:1px solid var(--line-soft)}
.cmp-r > *{padding:14px 18px;font-size:14.5px;color:var(--mut);line-height:1.5}
.cmp-r > [role="rowheader"]{font-weight:600;color:var(--ink);font-size:14.5px}
.cmp-h > *{padding:18px}
.cmp-h b{display:block;font-size:15.5px;color:var(--ink);letter-spacing:-.01em}
.cmp-h em{display:block;margin-top:4px;font-style:normal;font-size:13px;color:var(--dim)}
.cmp-c.is-us{background:rgba(13,148,136,.06);box-shadow:inset 1px 0 0 var(--teal-line),inset -1px 0 0 var(--teal-line)}
.cmp-h .cmp-c.is-us{box-shadow:inset 1px 0 0 var(--teal-line),inset -1px 0 0 var(--teal-line),inset 0 2px 0 var(--teal)}
.cmp-c.is-us{color:var(--ink)}
.cmp-when li{padding-left:46px}
.cmp-when li::before{content:"";left:20px;top:21px;width:8px;height:8px;border-radius:50%;
  border:0;background:var(--teal)}
.cmp-when li strong{color:var(--ink)}
@media(max-width:820px){
  .cmp{border:0;background:none;gap:12px}
  .cmp-r{grid-template-columns:1fr;border-radius:var(--r-card);border:1px solid var(--line-soft);background:var(--panel)}
  .cmp-r + .cmp-r{border-top:1px solid var(--line-soft)}
  .cmp-h{display:none}
  .cmp-r > [role="rowheader"]{border-bottom:1px solid var(--line-soft)}
  .cmp-r > [role="cell"]{display:flex;justify-content:space-between;gap:14px}
  .cmp-r > [role="cell"]::before{content:attr(data-c);color:var(--dim);font:600 11px/1.5 var(--mono);
    letter-spacing:.08em;text-transform:uppercase;flex:0 0 auto}
  .cmp-c.is-us{box-shadow:none;border-left:2px solid var(--teal)}
}

/* ── Founder ───────────────────────────────────── */
.founder{display:flex;flex-direction:column;gap:12px;padding:24px 28px;border-radius:var(--r-card);
  background:var(--panel);border:1px solid var(--line-soft)}
.founder-id{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 14px}
.founder-id strong{font-size:19px;letter-spacing:-.015em}
.founder-id em{font-style:normal;font:600 12px/1.4 var(--mono);letter-spacing:.1em;
  text-transform:uppercase;color:var(--teal-ink)}
.founder-why{color:var(--mut);font-size:15.5px;line-height:1.65;max-width:58ch}
.contact-note{margin-top:12px;color:var(--dim);font-size:13.5px}

/* ── What happens next ─────────────────────────── */
.next{list-style:none;counter-reset:nx;display:flex;flex-direction:column;gap:10px;margin:0;padding:0}
.next li{counter-increment:nx;position:relative;display:flex;flex-direction:column;gap:4px;
  padding:16px 22px 16px 58px;border-radius:var(--r-card);
  background:var(--panel);border:1px solid var(--line-soft)}
.next li::before{content:counter(nx);position:absolute;left:20px;top:16px;width:24px;height:24px;
  border-radius:50%;display:grid;place-items:center;background:var(--teal-soft);
  border:1px solid var(--teal-line);color:var(--teal-ink);font:600 12px/1 var(--mono)}
.next li strong{font-size:15.5px;letter-spacing:-.005em}
.next li span{color:var(--mut);font-size:14.5px;line-height:1.6}
.rep-block > em{display:block}

/* ── Notify list ───────────────────────────────── */
.notify{display:grid;grid-template-columns:minmax(200px,.8fr) 1.5fr;gap:22px 34px;align-items:start;
  padding:30px 32px;border-radius:var(--r-card);background:var(--panel);border:1px solid var(--teal-line)}
.notify-tx p{color:var(--mut);font-size:15.5px;max-width:30ch}
.notify-form{display:grid;grid-template-columns:minmax(190px,1fr) auto;gap:12px}
.notify-form .field{margin:0}
.notify-form .checkline,.notify-form .err,.notify-form [aria-live]{grid-column:1/-1}
.notify-form .checkline label{font-size:13.5px}
.notify-form .err{margin-top:-6px}
@media(max-width:1000px){
  .notify{grid-template-columns:1fr;padding:24px 20px}
  .notify-form{grid-template-columns:1fr}
  .notify-form .btn{justify-content:center}
}

/* ── Proof playground ──────────────────────────── */
.pf-chain,.pf-mask{display:flex;flex-direction:column;gap:16px;padding:26px 28px;border-radius:var(--r-card);
  background:var(--panel);border:1px solid var(--line-soft)}
.pf-recs{list-style:none;display:flex;flex-direction:column;gap:10px;margin:0;padding:0}
.pf-rec{display:flex;gap:14px;align-items:flex-start;padding:14px 16px;border-radius:var(--r-input);
  background:var(--bg2);border:1px solid var(--line-soft);transition:border-color .3s ease,background .3s ease}
.pf-i{flex:0 0 auto;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;
  border:1.5px solid var(--line);color:var(--mut);font:600 11px/1 var(--mono)}
.pf-body{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:8px}
.pf-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.pf-lab{flex:0 0 62px;font:600 9.5px/1.5 var(--mono);letter-spacing:.11em;text-transform:uppercase;color:var(--dim)}
.pf-row b{font-size:14.5px;font-weight:600}
.pf-in{flex:1 1 200px;min-width:0;padding:8px 12px;border-radius:10px;border:1px solid var(--line);
  background:var(--panel2);color:var(--ink);font:500 13px/1.4 var(--mono)}
.pf-in:focus{outline:none;border-color:var(--teal-line);box-shadow:0 0 0 3px rgba(13,148,136,.12)}
.pf-hashes{display:flex;flex-wrap:wrap;gap:6px 20px}
.pf-hashes span{display:inline-flex;align-items:center;gap:7px;min-width:0}
.pf-hashes em{font-style:normal;font:600 9px/1.5 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--dim)}
.pf-hashes code{font:500 11.5px/1.5 var(--mono);color:var(--teal-ink);word-break:break-all}
.pf-rec.is-bad{border-color:rgba(190,60,80,.5);background:rgba(190,60,80,.05)}
.pf-rec.is-bad .pf-i{border-color:var(--rose);color:var(--rose)}
.pf-rec.is-bad .pf-hashes code{color:var(--rose)}
.pf-rec.is-ok{border-color:rgba(13,148,136,.32)}
.pf-ctl{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.pf-result{font:600 13.5px/1.5 var(--mono);color:var(--mut)}
.pf-result.ok{color:var(--green)}
.pf-result.bad{color:var(--rose)}
.pf-note{color:var(--dim);font-size:13px;line-height:1.6;max-width:64ch}
.pf-mask .field-l{font-size:14.5px;font-weight:600;color:var(--ink)}
.pf-mask textarea{min-height:84px;font:500 14px/1.6 var(--mono)}
.pf-out{display:block;min-height:74px;padding:14px 16px;border-radius:var(--r-input);
  background:var(--bg2);border:1px solid var(--line-soft);font:500 14px/1.6 var(--mono);color:var(--mut);white-space:pre-wrap}
.pf-out mark{background:rgba(13,148,136,.16);color:var(--teal-ink);border-radius:6px;padding:1px 5px;font-weight:600}
.pf-arts{display:flex;flex-direction:column;gap:14px}
.pf-art{display:flex;flex-direction:column;gap:12px;padding:22px 24px;border-radius:var(--r-card);
  background:var(--panel);border:1px solid var(--line-soft)}
.pf-art-h{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 14px}
.pf-art-h strong{font-size:16.5px;letter-spacing:-.01em}
.pf-art-h span{color:var(--mut);font-size:14px}
.pf-art .code{font-size:12.5px;line-height:1.65;max-height:200px;overflow:auto}
.pf-art .btn{align-self:flex-start}
@media(max-width:640px){
  .pf-chain,.pf-mask{padding:20px 18px}
  .pf-art{padding:18px 18px}
  .pf-lab{flex-basis:100%}
  .pf-ctl .btn{flex:1 1 auto;justify-content:center}
}

/* ── Audit-readiness scan ──────────────────────── */
.scan-priv{margin:22px auto 0;max-width:52ch;color:var(--dim);font-size:13.5px}
.ladder{list-style:none;display:flex;flex-direction:column;gap:12px;margin-top:8px}
.rung{display:flex;gap:18px;align-items:flex-start;padding:20px 24px;border-radius:var(--r-card);
  background:var(--panel);border:1px solid var(--line-soft);transition:border-color .3s ease,box-shadow .3s ease}
.rung-n{flex:0 0 auto;width:34px;height:34px;border-radius:var(--r-pill);display:grid;place-items:center;
  border:1.5px solid var(--line);color:var(--mut);font:600 15px/1 var(--mono)}
.rung-tx{display:flex;flex-direction:column;gap:6px;min-width:0}
.rung-tx strong{font-size:17px;letter-spacing:-.01em}
.rung-tx span{color:var(--mut);font-size:14.5px;line-height:1.6}
.rung.is-you{border-color:var(--teal-line);box-shadow:var(--glow)}
.rung.is-you .rung-n{border-color:var(--teal);background:var(--teal-soft);color:var(--teal-ink)}
.rung.is-dim{opacity:.55}

.scan-group{display:flex;flex-direction:column;gap:26px;margin-top:6px}
.scan-q{border:0;padding:0;background:none;display:flex;flex-direction:column;gap:14px}
.scan-q legend{display:block;float:none;width:100%;padding:0 4px;margin:0}
.scan-num{display:block;margin-bottom:8px;font:600 10.5px/1 var(--mono);letter-spacing:.14em;
  text-transform:uppercase;color:var(--teal-ink)}
.scan-q legend{font-weight:600;font-size:16.5px;letter-spacing:-.01em;color:var(--ink);text-wrap:pretty}
.scan-opts{display:flex;flex-direction:column;gap:10px;padding:18px 20px;
  border:1px solid var(--line-soft);border-radius:var(--r-card);background:var(--panel)}
.scan-opt{position:relative;display:block}
.scan-opt input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer;margin:0}
.scan-opt span{display:flex;align-items:center;gap:13px;padding:13px 18px;border-radius:var(--r-input);
  border:1px solid var(--line);color:var(--mut);font-size:15px;line-height:1.5;cursor:pointer;
  transition:border-color .2s ease,color .2s ease,background .2s ease}
.scan-let{flex:0 0 auto;width:24px;height:24px;display:grid;place-items:center;border-radius:50%;
  border:1.5px solid var(--line);font:600 11px/1 var(--mono);font-weight:600;color:var(--dim);
  transition:border-color .2s ease,background .2s ease,color .2s ease}
.scan-opt span:hover{border-color:var(--teal-line);color:var(--ink)}
.scan-opt input:checked + span{border-color:var(--teal);background:var(--teal-soft);color:var(--ink);font-weight:500}
.scan-opt input:checked + span .scan-let{border-color:var(--teal);background:var(--teal);color:#f2fbf9}
.scan-opt input:focus-visible + span{outline:2px solid var(--teal);outline-offset:2px}

.scan-bar{display:flex;flex-wrap:wrap;align-items:center;gap:18px 24px;padding:22px 26px;
  border-radius:var(--r-card);background:var(--panel);border:1px solid var(--line-soft)}
.scan-prog{flex:1 1 240px;display:grid;grid-template-columns:1fr auto;gap:6px 12px;align-items:center}
.scan-prog-l{font:600 11px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--dim)}
.scan-prog-c{font:600 13px/1 var(--mono);color:var(--mut)}
.scan-prog-c b{color:var(--teal-ink);font-weight:600}
.scan-prog-t{grid-column:1/-1;height:6px;border-radius:var(--r-pill);background:var(--line-soft);overflow:hidden}
.scan-prog-t i{display:block;height:100%;width:0%;border-radius:var(--r-pill);
  background:linear-gradient(90deg,var(--teal),#5ee9d4);transition:width .45s ease}
.scan-bar .err{width:100%;margin:0}

.report{display:flex;flex-direction:column;gap:14px}
.rep-head{display:flex;flex-direction:column;gap:8px}
.rep-head h2{font-size:clamp(24px,4vw,32px)}
.rep-meta{color:var(--dim);font:500 13px/1.5 var(--mono)}
.rep-score{display:flex;flex-wrap:wrap;align-items:baseline;gap:12px;padding:24px 28px;border-radius:var(--r-card);
  background:radial-gradient(420px 180px at 12% 0%,rgba(13,148,136,.1),transparent 70%),var(--panel);
  border:1px solid var(--teal-line)}
.rep-score b{font:600 40px/1 var(--mono);letter-spacing:-.02em;color:var(--teal-ink)}
.rep-score .rep-max{color:var(--dim);font:500 16px/1 var(--mono)}
.rep-score .rep-rung{margin-left:auto;font-size:18px;font-weight:650;letter-spacing:-.01em}
.rep-note{color:var(--mut);font-size:15px;line-height:1.6}
.rep-ladder{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0}
.rep-ladder li{display:flex;align-items:center;gap:9px;white-space:nowrap;padding:9px 16px;border-radius:var(--r-pill);
  border:1px solid var(--line-soft);background:var(--panel);color:var(--dim);font-size:14px}
.rep-ladder li span{font:600 11px/1 var(--mono);opacity:.8}
.rep-ladder li b{font-weight:500}
.rep-ladder li.is-you{border-color:var(--teal);background:var(--teal-soft);color:var(--ink)}
.rep-ladder li.is-you b{font-weight:650}
.rep-ladder li.is-you span{color:var(--teal-ink);opacity:1}
.rep-areas{display:flex;flex-wrap:wrap;gap:12px}
.rep-area{display:flex;flex-direction:column;gap:4px;padding:14px 20px;border-radius:var(--r-card);
  background:var(--panel);border:1px solid var(--line-soft);min-width:200px;flex:1 1 auto}
.rep-area em{font-style:normal;font:600 10.5px/1 var(--mono);letter-spacing:.13em;text-transform:uppercase;color:var(--dim)}
.rep-area strong{font-size:15.5px}
.rep-area span{font:500 12.5px/1 var(--mono);color:var(--teal-ink)}
.rep-block{padding:22px 26px;border-radius:var(--r-card);background:var(--panel);border:1px solid var(--line-soft);
  display:flex;flex-direction:column;gap:10px}
.rep-block > em{font-style:normal;font:600 10.5px/1 var(--mono);letter-spacing:.13em;text-transform:uppercase;color:var(--teal-ink)}
.rep-block h3{font-size:17.5px;letter-spacing:-.01em}
.rep-block p{color:var(--mut);font-size:15px;line-height:1.65;max-width:64ch}
.rep-steps{margin:4px 0 0;padding-left:0;list-style:none;display:flex;flex-direction:column;gap:9px;counter-reset:s}
.rep-steps li{position:relative;padding-left:34px;color:var(--mut);font-size:14.5px;line-height:1.6;counter-increment:s}
.rep-steps li::before{content:counter(s);position:absolute;left:0;top:0;width:22px;height:22px;border-radius:50%;
  display:grid;place-items:center;background:var(--teal-soft);border:1px solid var(--teal-line);
  color:var(--teal-ink);font:600 11px/1 var(--mono)}
.rep-steps-h{font:600 10.5px/1 var(--mono);letter-spacing:.13em;text-transform:uppercase;color:var(--dim);margin-top:4px}
.rep-prov{border-color:var(--teal-line);background:linear-gradient(180deg,rgba(13,148,136,.06),transparent)}
.rep-honest{color:var(--mut);font-size:14px;line-height:1.6;padding-top:10px;border-top:1px solid var(--line-soft)}
.rep-cta{display:flex;flex-wrap:wrap;align-items:center;gap:14px}
.rep-disc{color:var(--dim);font-size:13px;line-height:1.6;max-width:70ch}
.rep-ver{color:var(--dim);font:500 12px/1.5 var(--mono)}
.rep-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:4px}

@media(max-width:640px){
  .rung{padding:16px 18px;gap:14px}
  .scan-opts{padding:14px 14px}
  .scan-q legend{font-size:15.5px}
  .rep-score{padding:20px}
  .rep-score .rep-rung{margin-left:0;width:100%}
  .rep-block{padding:18px 20px}
  .rep-actions .btn{flex:1 1 auto;justify-content:center}
}
@media (prefers-reduced-motion: reduce){
  .scan-prog-t i{transition:none}
}
@media print{
  .site-head,.site-foot,.hero,.ladder,.scan-form,.rep-actions,.skip{display:none!important}
  body{background:#fff;color:#000}
  #scan-report{display:block!important;padding:0}
  .report{gap:16px}
  .rep-block,.rep-score,.rep-area,.rep-ladder li{break-inside:avoid;border-color:#c9d2e0;background:#fff;box-shadow:none}
  .rep-ladder li.is-you{border-color:#0b7a6e;background:#f2fbf9;color:#000}
  .rep-score b,.rep-block > em,.rep-area span,.rep-steps li::before{color:#0b7a6e}
  .rep-block p,.rep-steps li,.rep-note{color:#2a3448}
}

/* ── FAQ accordion ─────────────────────────────── */
.faq{display:flex;flex-direction:column;gap:10px;margin-top:6px}
.faq-item{border-radius:var(--r-card);background:var(--panel);border:1px solid var(--line-soft);
  overflow:hidden;transition:border-color .25s ease,box-shadow .25s ease}
.faq-item:hover{border-color:var(--teal-line)}
.faq-item[open]{border-color:var(--teal-line);box-shadow:var(--glow)}
.faq-item summary{display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  padding:18px 24px;cursor:pointer;list-style:none;color:var(--ink)}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary:focus-visible{outline:2px solid var(--teal);outline-offset:-3px;border-radius:var(--r-card)}
.faq-q{font-weight:600;font-size:16.5px;letter-spacing:-.01em;flex:1 1 auto;min-width:0;text-wrap:pretty}
.faq-mark{position:relative;width:20px;height:20px;flex:0 0 auto;margin-left:auto}
.faq-mark::before,.faq-mark::after{content:"";position:absolute;left:50%;top:50%;border-radius:2px;
  background:var(--teal);transform:translate(-50%,-50%);transition:transform .3s ease,opacity .3s ease}
.faq-mark::before{width:13px;height:2.5px}
.faq-mark::after{width:2.5px;height:13px}
.faq-item[open] .faq-mark::after{transform:translate(-50%,-50%) rotate(90deg);opacity:0}
.faq-a{padding:0 24px 20px;color:var(--mut);font-size:15.5px;line-height:1.6;max-width:62ch}
.faq-item[open] .faq-a{animation:faqIn .3s ease both}
@keyframes faqIn{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
@media(max-width:640px){
  .faq-item summary{padding:16px 18px}
  .faq-a{padding:0 18px 18px}
  .faq-q{font-size:15.5px}
}
@media (prefers-reduced-motion: reduce){
  .faq-item[open] .faq-a{animation:none}
  .faq-mark::before,.faq-mark::after{transition:none}
}

/* ── Ask-a-question dialog ─────────────────────── */
.ask-modal{width:min(560px,calc(100vw - 32px));max-height:calc(100vh - 48px);margin:auto;padding:0;border:0;
  border-radius:var(--r-card);background:var(--panel2);color:var(--ink);box-shadow:var(--shadow);overflow:auto}
.ask-modal::backdrop{background:rgba(15,23,41,.42);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.ask-modal[open]{animation:askIn .28s ease both}
@keyframes askIn{from{opacity:0;transform:translateY(10px) scale(.985)}to{opacity:1;transform:none}}
.ask-form{display:flex;flex-direction:column;gap:18px;padding:28px 30px 30px}
.ask-head{display:flex;align-items:flex-start;gap:16px}
.ask-head h2{font-size:22px;letter-spacing:-.015em}
.ask-sub{margin-top:6px;color:var(--mut);font-size:14.5px;max-width:44ch}
.ask-x{width:36px;height:36px;flex:0 0 auto;margin-left:auto;border:1px solid var(--line);border-radius:var(--r-pill);
  background:var(--panel);cursor:pointer;position:relative;transition:border-color .2s ease,background .2s ease}
.ask-x:hover{border-color:var(--teal-line);background:var(--teal-soft)}
.ask-x span,.ask-x span::before{content:"";position:absolute;left:50%;top:50%;width:14px;height:2px;border-radius:2px;
  background:var(--mut);transform:translate(-50%,-50%) rotate(45deg)}
.ask-x span::before{left:0;top:0;transform:rotate(90deg)}
.ask-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:2px}
.ask-form .err{margin-top:-10px}
@media(max-width:560px){.ask-form{padding:22px 20px 24px}.ask-actions .btn{flex:1 1 auto;justify-content:center}}
@media (prefers-reduced-motion: reduce){.ask-modal[open]{animation:none}}

/* ── Explainer guide (figure + spoken explanation, own strip in the card) ── */
.anim-row{display:flex;flex-direction:column;gap:16px}
.guide-only{padding:22px 20px}
.guide{display:flex;flex-direction:row-reverse;align-items:center;gap:16px;width:100%;max-width:560px;margin:0 auto;padding:0 4px}
.guide-fig{width:112px;flex:0 0 112px;height:auto;display:block;animation:gvBob 5.5s ease-in-out infinite}
.guide.speaking .guide-fig{animation-duration:2.6s}
@keyframes gvBob{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
.guide-say{display:flex;flex-direction:column;align-items:flex-start;gap:9px;flex:1 1 auto;min-width:0}
.guide-bubble{position:relative;align-self:stretch;padding:11px 15px;border-radius:16px;
  background:rgba(233,237,246,.07);border:1px solid rgba(233,237,246,.22);
  color:#e9edf6;font:500 12.5px/1.5 var(--sans)}
.guide-bubble::after{content:"";position:absolute;left:-7px;top:22px;width:12px;height:12px;
  transform:rotate(45deg);background:rgba(233,237,246,.07);
  border-left:1px solid rgba(233,237,246,.22);border-bottom:1px solid rgba(233,237,246,.22)}
.guide-ctl{display:flex;flex-wrap:wrap;gap:7px}
.guide-btn{display:inline-flex;align-items:center;gap:8px;padding:8px 15px;border-radius:999px;cursor:pointer;
  background:rgba(56,223,199,.12);border:1px solid rgba(56,223,199,.45);color:#38dfc7;
  font:600 11.5px/1.35 var(--sans)}
.guide-btn:hover{background:rgba(56,223,199,.2)}
.guide-btn.ghost{background:rgba(233,237,246,.06);border-color:rgba(233,237,246,.24);color:#9aa5bd}
.guide-btn.ghost:hover{background:rgba(233,237,246,.12);color:#e9edf6}
.guide-btn:focus-visible{outline:2px solid #38dfc7;outline-offset:3px}
.guide-wave{display:inline-flex;align-items:flex-end;gap:2px;height:12px;flex:0 0 auto}
.guide-wave i{width:2px;height:3px;border-radius:2px;background:currentColor;opacity:.55}
.guide-say.speaking .guide-wave i{animation:gvWave 1s ease-in-out infinite}
.guide-say.speaking .guide-wave i:nth-child(2){animation-delay:.12s}
.guide-say.speaking .guide-wave i:nth-child(3){animation-delay:.24s}
.guide-say.speaking .guide-wave i:nth-child(4){animation-delay:.36s}
@keyframes gvWave{0%,100%{height:3px;opacity:.5}50%{height:12px;opacity:1}}
.guide-say.speaking .guide-bubble{border-color:rgba(56,223,199,.45)}
.guide-bubble [data-said]{color:#9aa5bd;transition:color .2s ease}
.guide-bubble [data-said].saying{color:#e9edf6}
@media (prefers-reduced-motion: reduce){.guide-bubble [data-said]{transition:none}}
.guide-fallback{color:#9aa5bd;font:400 11.5px/1.5 var(--sans)}
.chip.now-speaking{border-color:rgba(56,223,199,.55);box-shadow:0 0 0 1px rgba(56,223,199,.25),0 8px 22px rgba(3,7,17,.35)}
.animcard.has-guide{background:#0b1226}
@media(max-width:640px){
  .guide{flex-direction:column-reverse;align-items:center;text-align:center}
  .guide-fig{width:96px;flex:0 0 96px}
  .guide-say{align-items:center}
  .guide-bubble::after{left:50%;top:-7px;transform:translateX(-50%) rotate(45deg);
    border-left:1px solid rgba(233,237,246,.22);border-top:1px solid rgba(233,237,246,.22);
    border-bottom:0;border-right:0}
}
@media (prefers-reduced-motion: reduce){
  .guide-fig{animation:none}
}

/* ── Desktop concept GUI (stylized mock — labeled Planned) ── */
.a-desk{padding:0}
.gui{position:relative;border-radius:20px;overflow:hidden;background:linear-gradient(180deg,#0e1730,#0a1122);
  border:1px solid rgba(154,165,189,.16);font-size:13px;color:#e9edf6;line-height:1.5}
.gui-bar{display:flex;align-items:center;gap:12px;padding:11px 16px;background:rgba(154,165,189,.05)}
.gui-dots{display:flex;gap:6px}
.gui-dots i{width:9px;height:9px;border-radius:50%;background:rgba(154,165,189,.3)}
.gui-title{font-weight:600;font-size:13px;color:#9aa5bd}
.gui-hint{margin-left:auto;color:#7d8aa5;font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gui-plan{margin-left:12px;padding:4px 12px;border-radius:999px;border:1px solid rgba(154,165,189,.38);
  color:#9aa5bd;font:600 10px/1.5 var(--mono);letter-spacing:.09em;text-transform:uppercase;white-space:nowrap}
.gui-frame{display:block;width:100%;height:620px;border:0;background:#0a1122}
@media(max-width:860px){.gui-frame{height:560px}}
@media(max-width:640px){.gui-frame{height:480px}}
.gui-overlay{display:block;margin:0 14px 14px;padding:9px 20px;border-radius:999px;text-align:center;white-space:nowrap;
  background:rgba(56,223,199,.08);border:1px solid rgba(56,223,199,.45);color:#38dfc7;font:600 11.5px/1.4 var(--sans)}
.gui-hint{margin-left:auto;color:#7d8aa5;font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media(max-width:860px){.gui-hint{display:none}}


/* ── Print: every page ─────────────────────────── */
@media print{
  .site-head,.site-foot,.skip,.hero-glow,.hero-bg,.guide,.notify,.ask-modal,
  .pf-ctl,.rep-actions,.scan-bar,.gui-hint{display:none!important}
  html,body{background:#fff!important;color:#000!important}
  a{color:#0b7a6e!important;text-decoration:none}
  main{padding-top:0}
  .sec{padding:16px 0 0;break-inside:avoid}
  .hero{padding:0 0 12px;text-align:left}
  h1{font-size:24pt}
  h2,h3{break-after:avoid}
  p,li{font-size:11pt;color:#20293c!important}
  .card,.chip,.pf-chain,.pf-mask,.pf-art,.faq-item,.strip,.ctaband,.rung{
    border-color:#c9d2e0!important;background:#fff!important;box-shadow:none!important;break-inside:avoid}
  .code,.pf-out{background:#f7f9fc!important;color:#20293c!important;border-color:#dde4ee!important}
  .badge{border-color:#8b98ae!important;color:#333!important}
  .faq-item[open] .faq-a,.faq-a{display:block!important}
  details{break-inside:avoid}
  .anim svg{max-height:2.4in}
  @page{margin:16mm}
}