/* DataShield v2 — hand-authored; colors/type/layout ONLY via tokens.css variables. */
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--font-body);font-size:var(--fs-body);line-height:var(--lh-body);color:var(--ink);background:var(--ground)}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}
code{font-family:var(--font-mono);font-size:0.9em;background:var(--surface-alt);padding:0.1em 0.35em;border-radius:calc(var(--radius) / 2)}
h1,h2,h3,h4{letter-spacing:var(--tracking-heading);font-weight:600}
h1{font-size:var(--fs-display);line-height:var(--lh-display)}
h2{font-size:var(--fs-h2);line-height:var(--lh-h2);margin-bottom:0.5em}
h3{font-size:var(--fs-h3);line-height:var(--lh-h3);margin-bottom:0.4em}
p{max-width:var(--measure);margin-bottom:1em}
ul{max-width:var(--measure);margin:0 0 1em 1.25em}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
/* nav */
.nav{position:sticky;top:0;background:var(--ground);border-bottom:1px solid var(--hairline);z-index:50}
.nav-inner{max-width:var(--nav-max);margin:0 auto;display:flex;align-items:center;gap:2rem;padding:0 var(--gutter);height:64px}
.logo{font-weight:600;font-size:1.25rem;color:var(--ink)}
.nav-list{display:flex;gap:1.5rem;list-style:none;margin:0;flex:1}
.nav-list a,.nav-drop>button{color:var(--ink);font-size:var(--fs-small);font-weight:500;background:none;border:0;cursor:pointer;font-family:inherit}
.nav-drop{position:relative}
.nav-drop>ul{display:none;position:absolute;top:100%;left:0;background:var(--ground);border:1px solid var(--hairline);border-radius:var(--radius);min-width:280px;padding:0.5rem 0;list-style:none;margin:0;box-shadow:0 1px 2px rgba(14,27,44,.06)}
.nav-drop:hover>ul,.nav-drop:focus-within>ul{display:block}
.nav-drop>ul a{display:block;padding:0.4rem 1rem}
.nav-cta{white-space:nowrap}
/* buttons */
.btn{display:inline-block;padding:0.65rem 1.4rem;border-radius:var(--radius);font-weight:600;font-size:var(--fs-small);border:1px solid transparent;cursor:pointer;font-family:inherit}
.btn-primary{background:var(--accent);color:var(--ground)}
.btn-primary:hover{text-decoration:none;filter:brightness(1.08)}
.btn-ghost{border-color:var(--hairline);color:var(--ink)}
.btn-inverse{background:var(--ground);color:var(--ink)}
/* sections */
main{display:block}
.section,.hero{max-width:var(--content-max);margin:0 auto;padding:var(--section-pad) var(--gutter)}
.section-alt{max-width:none;background:var(--surface-alt)}
.section-alt>*{max-width:var(--content-max);margin-left:auto;margin-right:auto}
.kicker{font-size:var(--fs-kicker);text-transform:uppercase;letter-spacing:0.08em;color:var(--accent);font-weight:600;margin-bottom:0.75rem}
.hero{display:grid;grid-template-columns:minmax(340px,5fr) 7fr;gap:3rem;align-items:start;padding-top:clamp(24px,3vw,44px);padding-bottom:calc(var(--section-pad) * 0.55);max-width:calc(var(--content-max) + 120px)}
/* Hero diagram sits near the top of the column (aligned just under the H1's cap height)
   rather than vertically centred — fills the whitespace above it on the tall-hero pages. */
.hero-graphic{align-self:start;margin-top:clamp(8px,3.5vw,3.25rem)}
.hero-text h1{margin-bottom:0.6em}
.hero-plain{display:block;padding-bottom:calc(var(--section-pad) * 0.3)}
.hero-plain .hero-text{max-width:52rem}
.hero-plain h1{max-width:20ch}
.cta-row{display:flex;gap:1.25rem;margin-top:1.25rem;flex-wrap:wrap;align-items:center}
.cta-row .btn-ghost{border:0;padding:0.65rem 0;color:var(--accent);font-weight:600}
.cta-row .btn-ghost::after{content:" →"}
.cta-row .btn-ghost:hover{text-decoration:underline}
.hero-graphic{border:1px solid var(--hairline);border-radius:var(--radius);background:var(--surface-alt);padding:1.25rem;box-shadow:0 1px 2px rgba(14,27,44,.06)}
.diagram{padding:1.25rem}
.hero-graphic svg,.diagram svg{width:100%;height:auto}
.diagram{border:1px solid var(--hairline);border-radius:var(--radius);background:var(--surface-alt);padding:1.5rem;margin-top:1rem}
.diagram figcaption{font-size:var(--fs-small);color:var(--muted);margin-top:0.75rem}
.cols{display:grid;gap:1.25rem;margin-top:1.5rem}
.cols-2{grid-template-columns:repeat(2,1fr)}
.cols-3{grid-template-columns:repeat(3,1fr)}
.cols-4{grid-template-columns:repeat(2,1fr)}
.col{border:1px solid var(--hairline);border-radius:var(--radius);background:var(--ground);padding:1.5rem;transition:border-color .15s}
.col:hover{border-color:var(--accent)}
.col h3{font-size:1.125rem}
.col p{font-size:var(--fs-small);line-height:1.55}
.section-alt .col{background:var(--ground)}
.section .col{background:var(--surface-alt)}
/* proof lines */
.proof-lines{list-style:none;margin:0 auto;max-width:var(--content-max);padding:var(--section-pad-m) var(--gutter);display:grid;grid-template-columns:1fr 1fr;gap:1.25rem 2rem}
.proof-lines li{padding:1.1rem 1.4rem;max-width:none;background:var(--ground);border:1px solid var(--hairline);border-left:3px solid var(--accent);border-radius:var(--radius)}
.proof-claim{display:block;font-weight:500;line-height:1.45}
.proof-cite{display:block;margin-top:0.4rem;color:var(--muted);font-style:normal;font-size:var(--fs-small)}
@media (max-width: 760px){.proof-lines{grid-template-columns:1fr;padding:2.5rem var(--gutter-m)}}
.vd-buttons{display:flex;flex-wrap:wrap;gap:0.6rem;margin:1.25rem 0 0.5rem}
.vd-btn{background:var(--deny);color:#fff;border:none;border-radius:var(--radius);padding:0.55rem 0.9rem;font-size:var(--fs-small);font-weight:600;cursor:pointer}
.vd-btn:hover{filter:brightness(1.1)}
.vd-reset{background:var(--allow)}
.vd-note{color:var(--muted);font-size:var(--fs-small);margin-bottom:1rem}
.vd-flex{display:grid;grid-template-columns:3fr 2fr;gap:1.5rem;align-items:start}
.vd-chain{overflow-x:auto;border:1px solid var(--hairline);border-radius:var(--radius)}
.vd-table{width:100%;border-collapse:collapse;font-size:var(--fs-small)}
.vd-table th,.vd-table td{padding:0.45rem 0.7rem;text-align:left;border-bottom:1px solid var(--hairline);vertical-align:top}
.vd-table .vd-mono{white-space:nowrap}
.vd-table td:nth-child(2){min-width:14ch}
.vd-mono{font-family:var(--font-mono)}
.vd-ckpt td{background:var(--accent-soft);color:var(--accent);font-family:var(--font-mono);font-size:0.72rem}
.vd-broken td{background:rgba(196,61,61,0.12);color:var(--deny);font-weight:600}
.vd-json{background:var(--dark-surface);color:var(--dark-ink);border-radius:var(--radius);padding:1rem;font-size:0.72rem;overflow-x:auto;border-left:4px solid var(--allow)}
.vd-json.vd-bad{border-left-color:var(--deny)}
.vd-caption{font-size:var(--fs-small);color:var(--muted);margin-top:0.75rem}
@media (max-width: 900px){.vd-flex{grid-template-columns:1fr}}
/* Demo Center two-pane layout */
.dc-shell{display:grid;grid-template-columns:280px 1fr;min-height:100vh}
.dc-nav{position:sticky;top:0;align-self:start;height:100vh;overflow-y:auto;border-right:1px solid var(--hairline);background:var(--surface-alt);padding:1.5rem 1rem}
.dc-nav-head{margin-bottom:1rem}
.dc-nda-badge{font-size:var(--fs-small);color:var(--deny);font-weight:600;margin-top:0.3rem}
.dc-nav-tier{font-size:0.68rem;font-weight:700;letter-spacing:0.06em;text-transform:uppercase;color:var(--muted);margin:1.25rem 0 0.4rem;padding-left:0.4rem}
.dc-nav-item{display:block;padding:0.5rem 0.6rem;border-radius:var(--radius);text-decoration:none;color:var(--ink);border-left:2px solid transparent}
.dc-nav-item:hover{background:var(--accent-soft)}
.dc-nav-item.dc-cur{background:var(--accent-soft);border-left-color:var(--accent)}
.dc-nav-item.dc-soon{opacity:0.5}
.dc-nav-code{display:block;font-family:var(--font-mono);font-size:0.64rem;color:var(--accent)}
.dc-nav-title{display:block;font-size:0.82rem;font-weight:500;line-height:1.3}
.dc-main{max-width:1080px;margin-inline:auto;padding:3rem clamp(24px,4vw,64px) 5rem;width:100%;min-width:0;overflow-x:clip}
.dc-intro h1{font-size:var(--fs-display);line-height:var(--lh-display);letter-spacing:var(--tracking-heading)}
.dc-lede{font-size:1.125rem;color:var(--muted);max-width:60ch}
.dc-stat-row{display:flex;flex-wrap:wrap;gap:1rem;margin:1.75rem 0 1rem}
.dc-stat{border:1px solid var(--hairline);border-radius:var(--radius);padding:0.75rem 1.1rem;min-width:120px}
.dc-stat-n{font-size:1.5rem;font-weight:700;color:var(--accent)}
.dc-stat-l{font-size:var(--fs-small);color:var(--muted)}
.dc-stage{scroll-margin-top:1.5rem;padding:3.5rem 0;border-top:1px solid var(--hairline)}
.dc-stage-head{display:flex;gap:0.5rem;align-items:center;margin-bottom:0.6rem}
.dc-badge{font-family:var(--font-mono);font-size:0.66rem;font-weight:600;padding:0.15rem 0.5rem;border-radius:4px}
.dc-badge-value{background:var(--accent-soft);color:var(--accent)}
.dc-badge-vertical{background:rgba(20,122,77,0.1);color:var(--allow)}
.dc-badge-solution{background:rgba(14,27,44,0.08);color:var(--ink)}
.dc-badge-live{background:var(--allow);color:#fff}
.dc-badge-soon,.dc-badge-gate{background:var(--muted);color:#fff}
.dc-badge-sim{background:var(--accent);color:#fff}
.dc-badge-cat{background:transparent;border:1px solid var(--hairline);color:var(--muted);text-transform:none;letter-spacing:0}
.dc-nav-cat{display:block;font-family:var(--font-mono);font-size:0.6rem;letter-spacing:0.03em;text-transform:uppercase;color:var(--muted)}
.dc-nav-item.dc-cur .dc-nav-cat{color:var(--accent)}
.dc-ov-tags{display:flex;flex-wrap:wrap;gap:0.35rem;align-items:center}
.dc-input{width:100%;max-width:420px;padding:0.55rem 0.7rem;border:1px solid var(--hairline);border-radius:var(--radius);font:inherit;font-family:var(--font-mono);font-size:0.85rem;margin-bottom:0.75rem}
.dc-stage-title{font-size:var(--fs-h2);margin:0 0 0.5rem}
.dc-stakes{font-size:1.05rem;line-height:1.55}
.dc-mech{background:var(--surface-alt);border-radius:var(--radius);padding:0.9rem 1.1rem;font-size:0.95rem;line-height:1.5}
.dc-mech-tag{display:inline-block;font-family:var(--font-mono);font-size:0.66rem;font-weight:700;color:var(--allow);border:1px solid var(--allow);border-radius:3px;padding:0 0.35rem;margin-right:0.5rem;vertical-align:middle}
.dc-body{margin:1.25rem 0}
.dc-figure{margin:1.25rem 0;border:1px solid var(--hairline);border-radius:var(--radius);padding:1rem;background:var(--ground);overflow-x:auto}
.dc-figure img{width:100%;height:auto;display:block}
.dc-landmine{margin:1.5rem 0 1rem;padding:1rem 1.2rem;border-left:3px solid var(--deny);background:rgba(196,61,61,0.06);border-radius:var(--radius);font-size:0.95rem;font-style:italic}
.dc-lm-label{display:block;font-family:var(--font-mono);font-style:normal;font-size:0.64rem;font-weight:700;letter-spacing:0.05em;text-transform:uppercase;color:var(--deny);margin-bottom:0.35rem}
.dc-stage-cta{display:flex;gap:0.75rem;flex-wrap:wrap;margin-top:1rem}
@media (max-width: 820px){
  .dc-shell{grid-template-columns:1fr}
  .dc-nav{position:sticky;top:0;z-index:20;height:auto;overflow:visible;border-right:none;border-bottom:1px solid var(--hairline);padding:0.5rem 0.75rem}
  .dc-nav-head{margin-bottom:0.5rem}
  .dc-nav-head .kicker{margin:0}
  .dc-nda-badge{margin-top:0.1rem}
  .dc-nav nav{display:flex;flex-direction:row;flex-wrap:nowrap;gap:0.4rem;overflow-x:auto;-webkit-overflow-scrolling:touch;padding-bottom:0.35rem}
  .dc-nav-tier{display:none}
  .dc-nav-item{flex:0 0 auto;white-space:nowrap;border-left:none;border:1px solid var(--hairline);border-radius:100px;padding:0.35rem 0.75rem;background:var(--ground)}
  .dc-nav-item.dc-cur{border-color:var(--accent);background:var(--accent-soft)}
  .dc-nav-code{display:none}
  .dc-nav-title{font-size:0.78rem}
  .dc-main{padding:1.75rem 20px 3rem}
  .dc-intro h1{font-size:clamp(1.9rem,7vw,2.5rem)}
  .dc-stage{padding:2.25rem 0}
  .dc-stage-cta .btn{width:100%;text-align:center}
}
/* Demo Center — router pages & motifs */
.dc-nav-overview{font-weight:600;border:1px solid var(--hairline);margin-bottom:0.5rem}
.dc-theme-value{--pa:var(--accent);--pa-soft:var(--accent-soft)}
.dc-theme-vertical{--pa:var(--allow);--pa-soft:rgba(20,122,77,0.09)}
.dc-theme-solution{--pa:#0E1B2C;--pa-soft:rgba(14,27,44,0.07)}
/* overview cards */
.dc-overview-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:1rem;margin-top:2rem}
.dc-ov-card{display:flex;flex-direction:column;gap:0.4rem;padding:1.1rem 1.2rem;border:1px solid var(--hairline);border-top:3px solid var(--pa);border-radius:var(--radius);text-decoration:none;color:var(--ink);background:var(--ground);transition:transform .12s,box-shadow .12s}
.dc-ov-card:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(14,27,44,0.08)}
.dc-ov-code{font-family:var(--font-mono);font-size:0.64rem;color:var(--pa)}
.dc-ov-card .dc-badge{align-self:flex-start}
.dc-ov-title{font-size:1.05rem;font-weight:600;line-height:1.25}
.dc-ov-stakes{font-size:var(--fs-small);color:var(--muted);line-height:1.45}
/* page shell */
.dc-page{animation:dcfade .25s ease}
@keyframes dcfade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.dc-eyebrow{display:flex;align-items:center;gap:0.5rem;flex-wrap:wrap;margin-bottom:0.5rem}
.dc-eyebrow-num{font-family:var(--font-mono);font-size:1.5rem;font-weight:700;color:var(--pa);opacity:0.5;line-height:1;margin-right:0.2rem}
.dc-page-title{font-size:clamp(1.9rem,3.4vw,2.9rem);line-height:1.08;letter-spacing:var(--tracking-heading);margin:0.2rem 0 0.6rem}
.dc-page-stakes{font-size:1.2rem;line-height:1.5;color:var(--ink);max-width:60ch;margin:0 0 1.5rem}
.dc-page .dc-mech{border-left:3px solid var(--pa)}
.dc-page .dc-landmine{border-left-color:var(--pa);background:var(--pa-soft)}
.dc-page .dc-lm-label{color:var(--pa)}
.dc-page .dc-stage-cta{margin-top:2rem;padding-top:1.5rem;border-top:1px solid var(--hairline)}
/* console frame */
.dc-console{border:1px solid var(--hairline);border-radius:8px;overflow:hidden;margin:1.5rem 0;box-shadow:0 6px 20px rgba(14,27,44,0.06)}
.dc-console-bar{display:flex;align-items:center;gap:0.4rem;padding:0.5rem 0.8rem;background:var(--surface-alt);border-bottom:1px solid var(--hairline)}
.dc-dot{width:10px;height:10px;border-radius:50%;background:var(--hairline)}
.dc-console-bar .dc-dot:nth-child(1){background:#E5534B}.dc-console-bar .dc-dot:nth-child(2){background:#E3B341}.dc-console-bar .dc-dot:nth-child(3){background:#3FB950}
.dc-console-title{margin-left:0.5rem;font-family:var(--font-mono);font-size:0.7rem;color:var(--muted)}
.dc-console-body{padding:1.1rem 1.2rem}
.dc-console-body .vd-buttons{margin-top:0}
/* versus motif */
.dc-hero-versus{margin:0 0 1.5rem;padding:1.5rem 1.75rem;border-radius:8px;background:var(--pa);color:#fff}
.dc-hero-q-label{display:block;font-family:var(--font-mono);font-size:0.66rem;letter-spacing:0.06em;text-transform:uppercase;opacity:0.8;margin-bottom:0.5rem}
.dc-hero-q{font-size:1.35rem;line-height:1.4;font-weight:500;margin:0}
/* split motif */
.dc-split{display:grid;grid-template-columns:minmax(240px,320px) 1fr;gap:2rem;align-items:start}
.dc-split-left,.dc-split-right{min-width:0}
.dc-split-right{position:sticky;top:1.5rem}
.dc-page-stakes{max-width:62ch}
.dc-console,.dc-figure,.dc-mech,.dc-landmine,.dc-hero-versus{max-width:100%}
.dc-console-body{overflow-x:auto}
/* diagram motif */
.dc-diagram-hero{margin:0.5rem 0 1.5rem}
.dc-diagram-hero .dc-figure{margin:0;border-width:0;padding:0;background:transparent}
.dc-motif-diagram .dc-page-stakes{max-width:none}
@media (max-width: 820px){
  .dc-split{grid-template-columns:1fr;gap:1.25rem}
  .dc-split-right{position:static}
  .dc-page-stakes{font-size:1.05rem}
  .dc-hero-q{font-size:1.1rem}
  .dc-page-title{font-size:clamp(1.7rem,6vw,2.2rem)}
}
/* faq */
.faq-item{border-top:1px solid var(--hairline);padding:1.25rem 0}
.faq-item h3{font-size:1.125rem}
/* table */
.table-wrap{overflow-x:auto;margin-top:1rem}
table{border-collapse:collapse;width:100%;font-size:var(--fs-small)}
th,td{text-align:left;padding:0.6rem 0.9rem;border-bottom:1px solid var(--hairline);vertical-align:top}
th{font-weight:600;background:var(--surface-alt)}
/* split-graphic: text/faq left + economic-buyer infographic (sticky) right */
.split-graphic{display:grid;grid-template-columns:1fr minmax(300px,44%);gap:2.5rem;align-items:start}
.split-graphic-text{min-width:0}
.split-graphic-col{align-self:start;position:sticky;top:84px;display:flex;flex-direction:column;gap:1rem}
.split-graphic-media{border:1px solid var(--hairline);border-radius:var(--radius);background:var(--surface-alt);padding:1.35rem}
.split-graphic-media svg{width:100%;height:auto;display:block}
.split-graphic-cta{align-self:flex-start}
@media(max-width:900px){.split-graphic{grid-template-columns:1fr;gap:1.5rem}.split-graphic-col{position:static}.split-graphic-cta{align-self:stretch;text-align:center}}
/* demo-cta: text left + mini demo-console teaser & button right */
.demo-cta{display:grid;grid-template-columns:1fr minmax(300px,380px);gap:2.5rem;align-items:center}
.demo-cta-text{min-width:0}
.demo-cta-media{display:flex;flex-direction:column;gap:1rem}
.demo-teaser{border:1px solid var(--hairline);border-radius:8px;overflow:hidden;background:var(--ground);box-shadow:0 8px 24px rgba(14,27,44,.08)}
.demo-teaser-bar{display:flex;align-items:center;gap:0.35rem;padding:0.55rem 0.8rem;background:var(--surface-alt);border-bottom:1px solid var(--hairline)}
.dt-dot{width:9px;height:9px;border-radius:50%;background:var(--hairline)}
.demo-teaser-bar .dt-dot:nth-child(1){background:#E5534B}.demo-teaser-bar .dt-dot:nth-child(2){background:#E3B341}.demo-teaser-bar .dt-dot:nth-child(3){background:#3FB950}
.dt-title{margin-left:0.5rem;font-family:var(--font-mono);font-size:0.68rem;color:var(--muted)}
.demo-teaser-body{padding:1.35rem 1.2rem}
.demo-teaser-chain{display:flex;align-items:center;gap:2px;margin-bottom:1.1rem}
.dt-node{width:26px;height:32px;border:1.5px solid var(--ink);border-radius:3px;flex:0 0 auto}
.dt-node-bad{border-color:var(--deny);border-style:dashed;background:rgba(196,61,61,0.08)}
.dt-link{flex:1;height:1.5px;background:var(--muted);opacity:0.45;max-width:22px}
.demo-teaser-actions{display:flex;flex-wrap:wrap;gap:0.4rem;margin-bottom:1rem}
.dt-act{font-family:var(--font-mono);font-size:0.7rem;font-weight:600;color:var(--deny);border:1px solid var(--deny);border-radius:4px;padding:0.28rem 0.55rem;background:rgba(196,61,61,0.05)}
.demo-teaser-steps{display:flex;flex-direction:column;gap:0.5rem;margin-bottom:1rem}
.dt-step{display:flex;align-items:center;gap:0.55rem;font-family:var(--font-mono);font-size:0.78rem;color:var(--ink)}
.dt-check{display:inline-flex;align-items:center;justify-content:center;width:17px;height:17px;border-radius:50%;flex:0 0 auto;font-size:0.62rem;font-weight:700;line-height:1}
.dt-step-ok .dt-check{color:var(--allow);background:rgba(20,122,77,0.12);border:1px solid var(--allow)}
.dt-step-deny .dt-check{color:var(--deny);background:rgba(196,61,61,0.1);border:1px solid var(--deny)}
.dt-step-muted .dt-check{color:var(--muted);border:1px solid var(--hairline)}
.dt-step-deny{color:var(--deny);font-weight:600}
.dt-step-muted{opacity:0.5}
.demo-teaser-verdict{font-family:var(--font-mono);font-size:0.8rem;color:var(--ink)}
.demo-teaser-verdict strong{color:var(--deny)}
.demo-cta-btn{align-self:flex-start}
@media(max-width:820px){.demo-cta{grid-template-columns:1fr;gap:1.5rem}.demo-cta-media{align-items:stretch}.demo-cta-btn{align-self:stretch;text-align:center}}
/* status + cta band */
.status-line{font-family:var(--font-mono);font-size:var(--fs-small);color:var(--muted)}
.cta-band{background:var(--dark-surface);color:var(--dark-ink);text-align:center;padding:var(--section-pad-m) var(--gutter)}
.cta-band p{max-width:none;margin-bottom:1rem;font-size:var(--fs-h3)}
/* video facade */
.video-facade{position:relative;max-width:640px;border:1px solid var(--hairline);border-radius:var(--radius);overflow:hidden}
.video-facade img{width:100%;height:auto;display:block}
.video-play{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:3rem;color:var(--ground);text-shadow:0 1px 4px rgba(14,27,44,.5)}
.video-caption{font-size:var(--fs-small);color:var(--muted);margin-top:0.5rem}
/* chat */
.chat-shell{max-width:760px}
.chat-notice{font-size:var(--fs-small);color:var(--muted);border:1px solid var(--hairline);border-radius:var(--radius);padding:0.75rem 1rem;background:var(--surface-alt)}
.chat-chips{display:flex;gap:0.5rem;flex-wrap:wrap;margin-top:1rem}
.chat-chip{border:1px solid var(--hairline);background:var(--ground);border-radius:999px;padding:0.45rem 0.9rem;font-size:var(--fs-small);font-family:inherit;color:var(--ink);cursor:pointer;transition:border-color .15s}
.chat-chip:hover{border-color:var(--accent);color:var(--accent)}
.chat-log{min-height:200px;display:flex;flex-direction:column;gap:0.75rem;padding:1rem 0}
.chat-typing{display:flex;gap:4px;align-items:center;min-height:1.5em}
.chat-typing span{width:6px;height:6px;border-radius:50%;background:var(--muted);animation:ct-blink 1.2s ease-in-out infinite}
.chat-typing span:nth-child(2){animation-delay:.2s}
.chat-typing span:nth-child(3){animation-delay:.4s}
@keyframes ct-blink{0%,80%,100%{opacity:.25}40%{opacity:1}}
.chat-msg{max-width:85%;padding:0.7rem 1rem;border-radius:var(--radius);font-size:var(--fs-small)}
.chat-msg.visitor{align-self:flex-end;background:var(--accent-soft);border:1px solid var(--hairline)}
.chat-msg.agent{align-self:flex-start;background:var(--surface-alt);border:1px solid var(--hairline)}
.chat-form{display:flex;gap:0.5rem;align-items:flex-end}
/* `hidden` must beat the .chat-form display rule — the email gate stays hidden
   until quote-chat.js reveals it at the turn limit. */
.chat-form[hidden]{display:none}
.chat-form textarea,.chat-form input[type=email]{flex:1;font-family:inherit;font-size:var(--fs-small);padding:0.6rem 0.8rem;border:1px solid var(--hairline);border-radius:var(--radius);resize:vertical}
.email-gate{flex-direction:column;align-items:stretch;border:1px solid var(--accent);border-radius:var(--radius);padding:1rem;margin-top:0.75rem}
.email-gate label{font-weight:600;font-size:var(--fs-small);margin-bottom:0.5rem}
.hp{position:absolute;left:-9999px}
/* ---- Quote chat page: side-by-side intro + chat card ---- */
.chat-page{content-visibility:visible;max-width:calc(var(--content-max) + 40px);padding-top:clamp(32px,5vw,64px)}
.chat-split{display:grid;grid-template-columns:minmax(280px,0.92fr) minmax(0,1.08fr);gap:2.5rem;align-items:start}
.chat-intro{position:sticky;top:88px}
.chat-intro h1{font-size:clamp(1.75rem,3.2vw,2.6rem);line-height:1.08;margin-bottom:0.75rem}
.chat-intro>p{font-size:1.0625rem;color:var(--muted);max-width:44ch}
.chat-intro-links{display:flex;flex-direction:column;gap:0.6rem;margin-top:1.5rem}
.chat-intro-link{font-weight:600;font-size:var(--fs-small)}
.chat-card{display:flex;flex-direction:column;border:1px solid var(--hairline);border-radius:12px;background:var(--ground);box-shadow:0 10px 34px rgba(14,27,44,.09);overflow:hidden;height:min(640px,74vh)}
.chat-card-head{display:flex;align-items:center;gap:0.55rem;padding:0.8rem 1.1rem;border-bottom:1px solid var(--hairline);background:var(--surface-alt)}
.chat-status-dot{width:8px;height:8px;border-radius:50%;background:var(--allow);box-shadow:0 0 0 3px rgba(20,122,77,.15)}
.chat-card-title{font-weight:600;font-size:0.9rem}
.chat-card-sub{margin-left:auto;font-family:var(--font-mono);font-size:0.64rem;color:var(--muted);letter-spacing:0.02em}
.chat-card .chat-log{flex:1;min-height:0;overflow-y:auto;padding:1.1rem;display:flex;flex-direction:column;gap:0.75rem}
.chat-noscript{padding:1rem;color:var(--muted);font-size:var(--fs-small)}
.chat-card .chat-chips{display:grid;grid-template-columns:1fr 1fr;gap:0.5rem;padding:0.5rem 1.1rem 0.15rem;margin:0}
.chat-card .chat-chip{border:1px solid var(--hairline);background:var(--surface-alt);border-radius:8px;padding:0.55rem 0.7rem;font-size:0.78rem;line-height:1.25;text-align:left;color:var(--ink);cursor:pointer;transition:border-color .15s,background .15s}
.chat-card .chat-chip:hover{border-color:var(--accent);background:var(--accent-soft);color:var(--accent)}
.chat-card .chat-form{padding:0.8rem 1.1rem;border-top:1px solid var(--hairline);gap:0.5rem;margin-top:0.35rem}
.chat-card textarea{min-height:42px;max-height:120px}
.chat-card .email-gate{margin:0.8rem 1.1rem}
.chat-consent{font-size:0.7rem;color:var(--muted);padding:0 1.1rem 0.85rem;margin:0;line-height:1.45;max-width:none}
@media(max-width:900px){
  .chat-split{grid-template-columns:1fr;gap:1.5rem}
  .chat-intro{position:static}
  .chat-card{height:min(560px,72vh)}
}
@media(max-width:480px){.chat-card .chat-chips{grid-template-columns:1fr}}
/* footer */
.footer{border-top:1px solid var(--hairline);background:var(--surface-alt);padding:3rem var(--gutter) 2rem}
.f-cols{max-width:var(--nav-max);margin:0 auto;display:grid;grid-template-columns:repeat(4,1fr);gap:2rem}
.f-col h4{font-size:var(--fs-small);text-transform:uppercase;letter-spacing:0.05em;color:var(--muted);margin-bottom:0.75rem}
.f-col ul{list-style:none;margin:0}
.f-col li{padding:0.2rem 0}
.f-col a{color:var(--ink);font-size:var(--fs-small)}
.f-legal{max-width:var(--nav-max);margin:2rem auto 0;font-size:var(--fs-small);color:var(--muted)}
/* responsive */
/* mobile nav (no-JS, details/summary) */
.nav-mobile{display:none;position:relative;margin-left:auto}
.nav-mobile summary{list-style:none;cursor:pointer;display:flex;flex-direction:column;gap:5px;padding:10px}
.nav-mobile summary::-webkit-details-marker{display:none}
.nav-mobile summary::marker{content:"";display:none}
.nav-mobile summary span{display:block;width:22px;height:2px;background:var(--ink);border-radius:1px;transition:transform .2s}
.nav-mobile[open] summary span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-mobile[open] summary span:nth-child(2){opacity:0}
.nav-mobile[open] summary span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.nav-mobile>nav{position:absolute;right:0;top:100%;background:var(--ground);border:1px solid var(--hairline);border-radius:var(--radius);min-width:280px;box-shadow:0 8px 24px rgba(14,27,44,.12);padding:0.5rem 0;z-index:60}
.nav-mobile>nav ul{list-style:none;margin:0}
.nav-mobile>nav a{display:block;padding:0.65rem 1.25rem;color:var(--ink);font-size:var(--fs-small);font-weight:500}
.nav-mobile-cta{color:var(--accent) !important;font-weight:600 !important;border-top:1px solid var(--hairline)}
@media(max-width:1080px){
.hero{grid-template-columns:1fr;gap:2rem}
.hero-graphic{padding:1.25rem}
.cols-3{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:820px){
.hero-graphic{padding:1rem;overflow-x:auto}
.hero-graphic svg{min-width:640px}
.diagram{overflow-x:auto;padding:1rem}
.diagram svg{min-width:640px}
.cols-2,.cols-3,.cols-4{grid-template-columns:1fr}
.f-cols{grid-template-columns:repeat(2,1fr)}
.nav-list,.nav-cta{display:none}
.nav-mobile{display:block}
.chat-form{flex-direction:column;align-items:stretch}
table{font-size:0.75rem}
}
@media(max-width:480px){
.f-cols{grid-template-columns:1fr}
.cta-row{flex-direction:column;align-items:stretch}
.cta-row .btn-primary{text-align:center}
}
/* diagram motion — subtle, GPU-cheap, semantics-preserving */
.da-audit{animation:da-flow 1.8s linear infinite}
.da-pulse{animation:da-breathe 2.6s ease-in-out infinite}
.da-danger{animation:da-warn 2.2s ease-in-out infinite}
@keyframes da-flow{to{stroke-dashoffset:-10}}
@keyframes da-breathe{0%,100%{opacity:1}50%{opacity:0.55}}
@keyframes da-warn{0%,100%{opacity:1}50%{opacity:0.45}}
.diagram,.hero-graphic{transition:box-shadow .2s}
.diagram:hover,.hero-graphic:hover{box-shadow:0 2px 12px rgba(14,27,44,.10)}
/* below-fold render skipping — keeps long pages light */
.section,.cta-band,.footer{content-visibility:auto;contain-intrinsic-size:auto 480px}
.hero{content-visibility:visible}
@media(prefers-reduced-motion:reduce){
html{scroll-behavior:auto}
.da-audit,.da-pulse,.da-danger{animation:none}
}
/* ============================================================
   Conversion layer — post-engagement quote accelerators.
   Hidden until <body class="ds-engaged"> is set on engagement.
   - Marketing pages: conversion.js sets it from the shared localStorage flag,
     revealing the bottom .ds-engaged-band only (no floating pill — it would
     duplicate the nav CTA).
   - Demo Center: demo-center.js sets it once the visitor has interacted enough
     (>=3 demos or >=90s), revealing the floating .ds-quote-fab in-context.
   Progressive enhancement: with no JS nothing shows; /pricing + /quote stay
   reachable via nav + footer.
   ============================================================ */
.ds-quote-fab{display:none}
.ds-engaged-band{display:none}
body.ds-engaged .ds-quote-fab{display:inline-flex}
body.ds-engaged .ds-engaged-band{display:block}
/* Floating pill — bottom-right (the Demo Center has a left rail, no top nav bar). */
.ds-quote-fab{position:fixed;bottom:24px;right:clamp(16px,4vw,32px);z-index:45;
  align-items:center;gap:0.5rem;padding:0.7rem 1.25rem;border-radius:999px;
  background:var(--accent);color:#fff;font-weight:600;font-size:var(--fs-small);
  box-shadow:0 8px 24px rgba(36,86,230,.32);border:1px solid rgba(255,255,255,.15);
  animation:fab-in .4s ease both}
.ds-quote-fab:hover{text-decoration:none;filter:brightness(1.08)}
.ds-quote-fab .ds-fab-dot{width:7px;height:7px;border-radius:50%;background:#7CFFB2;
  box-shadow:0 0 0 3px rgba(124,255,178,.25);animation:da-breathe 2.6s ease-in-out infinite}
@keyframes fab-in{from{opacity:0;transform:translateY(10px) scale(.96)}to{opacity:1;transform:none}}
.ds-engaged-band{background:var(--accent-soft);border-top:1px solid var(--hairline);
  border-bottom:1px solid var(--hairline);text-align:center;padding:2.25rem var(--gutter)}
.ds-engaged-band .kicker{margin-bottom:0.4rem}
.ds-engaged-band p{max-width:52ch;margin:0 auto 1rem;font-size:var(--fs-h3);color:var(--ink)}
@media(max-width:820px){.ds-quote-fab{bottom:16px;right:16px}}
@media(prefers-reduced-motion:reduce){.ds-quote-fab,.ds-quote-fab .ds-fab-dot{animation:none}}
/* ============================================================
   Quote worksheet (/quote) — scope + discount-lever configurator.
   Not a price calculator (no static price book, by decision 08/#1):
   it structures the buyer's inputs and hands them to the quoting
   agent / GTM as a scoped Opportunity.
   ============================================================ */
/* .qw renders inside a .section, which already supplies max-width + gutter + vertical pad.
   Pull the worksheet up under the plain hero — the stacked section paddings otherwise
   leave a dead band between the lede and the first fieldset. */
#worksheet{padding-top:0.5rem}
.qw{display:grid;grid-template-columns:1fr 340px;gap:2.5rem;align-items:start}
.qw-form{min-width:0}
.qw-group{border:1px solid var(--hairline);border-radius:var(--radius);padding:1.5rem;margin-bottom:1.25rem;background:var(--ground)}
.qw-group>legend,.qw-group-title{font-size:1.05rem;font-weight:600;letter-spacing:var(--tracking-heading);padding:0;margin-bottom:0.25rem}
.qw-group-note{font-size:var(--fs-small);color:var(--muted);margin-bottom:1rem}
.qw-field{margin:1.1rem 0 0}
.qw-field>.qw-label{display:block;font-size:var(--fs-small);font-weight:600;margin-bottom:0.5rem}
.qw-hint{font-size:0.78rem;color:var(--muted);font-weight:400}
.qw-opts{display:flex;flex-wrap:wrap;gap:0.5rem}
.qw-opt{position:relative;display:inline-flex;align-items:center;gap:0.45rem;border:1px solid var(--hairline);
  border-radius:999px;padding:0.5rem 0.95rem;font-size:var(--fs-small);cursor:pointer;background:var(--ground);
  transition:border-color .15s,background .15s}
.qw-opt:hover{border-color:var(--accent)}
.qw-opt input{position:absolute;opacity:0;width:0;height:0}
.qw-opt:has(input:checked){border-color:var(--accent);background:var(--accent-soft);color:var(--accent);font-weight:600}
.qw-opt:has(input:focus-visible){outline:2px solid var(--accent);outline-offset:2px}
.qw-opt .qw-lever{font-size:0.62rem;font-family:var(--font-mono);color:var(--allow);border:1px solid var(--allow);border-radius:3px;padding:0 0.3rem;text-transform:uppercase;letter-spacing:0.03em}
.qw-grid{display:grid;grid-template-columns:1fr 1fr;gap:0.6rem}
.qw-check{display:flex;gap:0.6rem;align-items:flex-start;border:1px solid var(--hairline);border-radius:var(--radius);padding:0.7rem 0.85rem;cursor:pointer;transition:border-color .15s}
.qw-check:hover{border-color:var(--accent)}
.qw-check:has(input:checked){border-color:var(--accent);background:var(--accent-soft)}
.qw-check input{margin-top:0.2rem}
.qw-check .qw-ct{font-size:var(--fs-small);font-weight:600}
.qw-check .qw-cd{display:block;font-size:0.76rem;color:var(--muted);font-weight:400;line-height:1.4}
.qw-input,.qw-select{width:100%;padding:0.6rem 0.75rem;border:1px solid var(--hairline);border-radius:var(--radius);font:inherit;font-size:var(--fs-small);background:var(--ground);color:var(--ink)}
.qw-input:focus,.qw-select:focus{outline:2px solid var(--accent);outline-offset:1px;border-color:var(--accent)}
.qw-two{display:grid;grid-template-columns:1fr 1fr;gap:0.85rem}
/* summary rail */
.qw-rail{position:sticky;top:84px;border:1px solid var(--hairline);border-radius:var(--radius);background:var(--surface-alt);padding:1.4rem;font-size:var(--fs-small)}
.qw-rail h3{font-size:0.95rem}
.qw-rail-note{color:var(--muted);font-size:0.78rem;line-height:1.5;margin-bottom:1rem}
.qw-summary{list-style:none;margin:0 0 1rem;padding:0}
.qw-summary li{padding:0.4rem 0;border-bottom:1px dashed var(--hairline);display:flex;justify-content:space-between;gap:0.75rem}
.qw-summary li:last-child{border-bottom:0}
.qw-summary .qw-k{color:var(--muted)}
.qw-summary .qw-v{font-weight:600;text-align:right}
.qw-summary .qw-v.qw-empty{color:var(--muted);font-weight:400}
.qw-rail .qw-levers{margin:0 0 1rem;padding:0.75rem;border-radius:var(--radius);background:var(--ground);border:1px solid var(--hairline)}
.qw-rail .qw-levers-t{font-size:0.72rem;text-transform:uppercase;letter-spacing:0.05em;color:var(--allow);font-weight:700;margin-bottom:0.4rem}
.qw-rail .qw-levers ul{margin:0;padding-left:1.1rem}
.qw-rail .qw-levers li{font-size:0.8rem;color:var(--ink);margin:0.15rem 0}
.qw-submit-row{margin-top:0.5rem}
.qw-submit-row .btn{width:100%;text-align:center;padding:0.8rem}
.qw-err{color:var(--deny);font-size:var(--fs-small);margin-top:0.6rem;min-height:1.2em}
.qw-consent{font-size:0.76rem;color:var(--muted);line-height:1.5;margin-top:0.75rem}
/* confirmation */
.qw-done{border:1px solid var(--allow);border-left:4px solid var(--allow);border-radius:var(--radius);background:rgba(20,122,77,.05);padding:2rem;max-width:640px}
.qw-done h2{color:var(--allow)}
.qw-done .qw-recap{background:var(--dark-surface);color:var(--dark-ink);border-radius:var(--radius);padding:1rem;font-family:var(--font-mono);font-size:0.72rem;white-space:pre-wrap;overflow-x:auto;margin:1rem 0}
@media(max-width:900px){
  .qw{grid-template-columns:1fr;gap:1.5rem}
  .qw-rail{position:static}
  .qw-grid,.qw-two{grid-template-columns:1fr}
}
/* ============================================================
   ROI worksheet (/pricing) — interactive, economic-buyer tool.
   Buyer's numbers x cited rates; live one-incident + annual friction.
   ============================================================ */
.roi{display:grid;grid-template-columns:1fr 330px;gap:2.5rem;align-items:start}
.roi-form{min-width:0}
.roi-group{border:1px solid var(--hairline);border-radius:var(--radius);padding:1.25rem 1.5rem;margin-bottom:1.25rem;background:var(--ground)}
.roi-group>legend{font-size:1.05rem;font-weight:600;letter-spacing:var(--tracking-heading);padding:0}
.roi-group-note{font-size:var(--fs-small);color:var(--muted);margin:0.3rem 0 0.85rem}
.roi-chips{display:flex;flex-wrap:wrap;gap:0.5rem;margin-bottom:0.85rem}
.roi-chip{border:1px solid var(--hairline);background:var(--surface-alt);border-radius:999px;padding:0.4rem 0.85rem;font-size:0.76rem;font-family:inherit;color:var(--ink);cursor:pointer;transition:border-color .15s,background .15s}
.roi-chip:hover{border-color:var(--accent)}
.roi-chip-on{border-color:var(--accent);background:var(--accent-soft);color:var(--accent);font-weight:600}
.roi-row{display:flex;align-items:center;gap:1rem;justify-content:space-between;padding:0.6rem 0;border-bottom:1px dashed var(--hairline)}
.roi-row:last-child{border-bottom:0;padding-bottom:0}
.roi-label{font-size:var(--fs-small);font-weight:500;max-width:58%;line-height:1.35}
.roi-hint{color:var(--muted);font-weight:400;font-size:0.74rem}
.roi-field{display:flex;align-items:center;gap:0.35rem;flex:0 0 auto}
.roi-affix{font-size:var(--fs-small);color:var(--muted)}
.roi-input{width:104px;text-align:right;padding:0.45rem 0.6rem;border:1px solid var(--hairline);border-radius:var(--radius);font:inherit;font-size:var(--fs-small);font-family:var(--font-mono);background:var(--ground);color:var(--ink)}
.roi-input:focus{outline:2px solid var(--accent);outline-offset:1px;border-color:var(--accent)}
/* dark result panel */
.roi-panel{position:sticky;top:84px;border-radius:var(--radius);background:var(--dark-surface);color:var(--dark-ink);padding:1.5rem;box-shadow:0 10px 30px rgba(14,27,44,.14)}
.roi-panel-kicker{font-family:var(--font-mono);font-size:0.66rem;letter-spacing:0.08em;opacity:0.55;margin:0 0 0.9rem}
.roi-big{margin-bottom:1rem}
.roi-big-val{display:block;font-size:2.1rem;font-weight:700;line-height:1.05;letter-spacing:-0.01em}
.roi-big:not(.roi-big-annual) .roi-big-val{color:#F79A9A}
.roi-big-annual .roi-big-val{font-size:1.6rem;color:#8FB4FF}
.roi-big-lbl{display:block;font-size:0.8rem;opacity:0.7;margin-top:0.15rem}
.roi-breakdown{list-style:none;margin:0 0 0.85rem;padding:0.75rem 0;border-top:1px solid rgba(255,255,255,0.12);border-bottom:1px solid rgba(255,255,255,0.12)}
.roi-breakdown li{display:flex;justify-content:space-between;gap:1rem;font-size:0.8rem;padding:0.22rem 0}
.roi-bd-k{opacity:0.75}
.roi-bd-v{font-family:var(--font-mono);font-weight:600}
.roi-preserved{font-size:0.78rem;opacity:0.78;margin:0 0 0.6rem;line-height:1.45}
.roi-divider{height:1px;background:rgba(255,255,255,0.12);margin:0.85rem 0}
.roi-panel-line{font-size:0.9rem;font-weight:500;margin:0 0 1rem;max-width:none}
.roi-cta{width:100%;text-align:center}
.roi-foot{font-size:0.68rem;opacity:0.55;margin:0.9rem 0 0;line-height:1.5;max-width:none}
@media(max-width:900px){.roi{grid-template-columns:1fr;gap:1.5rem}.roi-panel{position:static}}
@media(max-width:520px){.roi-row{flex-direction:column;align-items:stretch;gap:0.4rem}.roi-label{max-width:none}.roi-field{justify-content:flex-start}.roi-input{width:140px;text-align:left}}