/* DataChaff product page. Chaff green against broker red, on the near-black
   the app itself uses. Structure follows the VaporAgent page. */
:root{
  color-scheme:dark;
  --bg:#06070c;--panel:#0d1119;--panel2:#12161f;--line:#1e2635;--line2:#2b3446;
  --ink:#e6f0ff;--muted:#93a4c0;
  --acc:#2dff9e;--acc-d:#14c977;--acc2:#35d0ff;--broker:#ff2e6b;--warn:#ffc043;
  font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  font-size:16px;line-height:1.7;scroll-behavior:smooth;
}
*{box-sizing:border-box}
body{margin:0;color:var(--ink);background:
  radial-gradient(ellipse at 100% 0,#2dff9e16,transparent 46rem),
  radial-gradient(ellipse at 0 30%,#ff2e6b12,transparent 50rem),
  linear-gradient(180deg,#05060a,#080a11 55%,#05060a),var(--bg)}

/* CRT texture over everything, under the pointer: drifting grain, static
   scanlines, a faint vignette. Decoration only, a few percent over text, and
   the drift stops under prefers-reduced-motion. */
body::before,body::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:60}
body::before{inset:-50%;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.42'/%3E%3C/svg%3E");
  opacity:.06;mix-blend-mode:overlay;animation:grain 1.1s steps(2) infinite}
body::after{background:
  repeating-linear-gradient(to bottom,rgba(120,255,200,.035) 0 1px,transparent 1px 3px),
  radial-gradient(ellipse at 50% 50%,transparent 55%,rgba(0,0,0,.45))}
@keyframes grain{0%{transform:translate(0,0)}20%{transform:translate(-3%,2%)}
  40%{transform:translate(2%,-3%)}60%{transform:translate(-2%,-2%)}
  80%{transform:translate(3%,1%)}100%{transform:translate(0,0)}}
a{color:var(--acc);text-underline-offset:4px}
button,input,select{font:inherit}
button{cursor:pointer}
a:focus-visible,button:focus-visible,summary:focus-visible{outline:3px solid var(--acc);outline-offset:4px}
h1,h2,h3,p{margin-top:0}
h2{font-size:clamp(1.6rem,3.4vw,2.6rem);line-height:1.18;letter-spacing:-.04em}
h3{line-height:1.3}
p{color:var(--muted)}
.wrap{width:min(1160px,calc(100% - 48px));margin-inline:auto}
.site-header{max-width:1280px;margin:auto;padding:24px 36px;display:flex;
  align-items:center;justify-content:space-between;gap:20px;border-bottom:1px solid #2dff9e2e;
  box-shadow:0 1px 0 rgba(45,255,158,.1)}
.site-header>a:last-child{font-size:.82rem;text-decoration:none;color:var(--muted)}
.brand{display:flex;align-items:center;font-family:Georgia,serif;font-size:1.6rem;
  letter-spacing:-.05em;text-decoration:none;color:var(--ink)}
.brand span{color:var(--acc);text-shadow:0 0 18px rgba(45,255,158,.45)}
.brand img{margin-right:10px;filter:drop-shadow(0 0 12px rgba(45,255,158,.45))}
.skip{position:absolute;left:16px;top:-80px;padding:8px;background:var(--bg);z-index:10}
.skip:focus{top:8px}
.eyebrow,.number{font:600 .7rem/1.4 ui-monospace,monospace;letter-spacing:.12em;
  text-transform:uppercase;color:var(--acc);text-shadow:0 0 12px rgba(45,255,158,.35)}
.eyebrow::before{content:"// "}
.muted{color:var(--muted)}

/* ---------- hero ---------- */
.hero{display:grid;grid-template-columns:1.05fr 1fr;align-items:center;gap:70px;
  padding-block:84px 88px}
h1{font:400 clamp(2.8rem,5.6vw,4.5rem)/1.08 Georgia,serif;letter-spacing:-.045em;
  margin-bottom:26px;text-shadow:3px 0 0 rgba(255,46,107,.22),-3px 0 0 rgba(53,208,255,.16)}
h1 em{color:var(--acc);font-weight:400;font-style:italic;
  text-shadow:0 0 26px rgba(45,255,158,.45),3px 0 0 rgba(255,46,107,.3)}
h2{text-shadow:2px 0 0 rgba(255,46,107,.14),-2px 0 0 rgba(53,208,255,.1)}
.lede{font-size:1.05rem;max-width:34rem}
.actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:28px}
.button{display:inline-flex;align-items:center;justify-content:center;gap:18px;
  min-height:46px;padding:10px 20px;border:1px solid #2dff9e66;border-radius:2px;
  font-family:ui-monospace,monospace;text-transform:uppercase;letter-spacing:.08em;
  background:transparent;color:var(--acc);font-weight:650;font-size:.9rem;text-decoration:none;
  transition:background .15s ease,transform .15s ease}
.button:hover{background:#2dff9e14;transform:translateY(-1px);box-shadow:0 0 16px rgba(45,255,158,.3)}
.button.primary{background:var(--acc);border-color:var(--acc);color:#02160c;
  box-shadow:0 0 18px rgba(45,255,158,.45),3px 3px 0 rgba(255,46,107,.55)}
.button.primary:hover{background:#5ae8a3}
.button.small{padding:8px 13px;min-height:42px;font-size:.78rem}
.hero-meta{font:.73rem/1.7 ui-monospace,monospace;margin-top:22px;color:var(--muted)}
.hero-meta span{padding:0 8px}

/* the dossier card in the hero */
.dossier{border:1px solid var(--line2);border-radius:2px;padding:22px;
  clip-path:polygon(0 0,calc(100% - 18px) 0,100% 18px,100% 100%,18px 100%,0 calc(100% - 18px));
  background:linear-gradient(145deg,#16202fee,#0f1420ed);
  box-shadow:0 0 0 1px rgba(255,46,107,.12),0 30px 60px #0006;transform:rotate(-1.4deg)}
.dossier-top{display:flex;justify-content:space-between;align-items:center;gap:12px;
  padding-bottom:14px;border-bottom:2px solid var(--broker);font:1.25rem Georgia,serif}
.sample-tag{font:.6rem ui-monospace,monospace;color:var(--muted);border:1px solid var(--line2);
  padding:5px 8px;border-radius:20px;white-space:nowrap}
.dos-row{display:grid;grid-template-columns:8.5rem 1fr;gap:12px;align-items:baseline;
  padding:9px 0;border-bottom:1px solid var(--line)}
.dos-row:last-of-type{border-bottom:0}
.dos-k{font:.68rem ui-monospace,monospace;color:var(--muted);text-transform:uppercase;
  letter-spacing:.06em}
.dos-v{font-size:.9rem}
.dos-v s{color:var(--muted);text-decoration-color:var(--broker);margin-right:7px}
.dos-v .conflict{color:var(--broker);font-weight:650}
.dos-foot{display:flex;justify-content:space-between;align-items:center;gap:14px;
  margin-top:16px;padding-top:14px;border-top:1px solid var(--line);font-size:.75rem}
.confidence{font:700 1.5rem/1 ui-monospace,monospace;color:var(--acc);
  text-shadow:0 0 14px rgba(45,255,158,.5)}
.confidence.low{color:var(--broker);text-shadow:0 0 14px rgba(255,46,107,.5)}
.meter{height:5px;border-radius:4px;background:#ffffff12;overflow:hidden;margin-top:8px}
.meter i{display:block;height:100%;background:linear-gradient(90deg,var(--broker),var(--warn),var(--acc));
  transition:width .8s cubic-bezier(.22,1,.36,1)}

/* ---------- features ---------- */
.features{display:grid;grid-template-columns:repeat(4,1fr);gap:28px;padding-bottom:80px}
.features article{border-top:1px solid var(--line);padding-top:20px}
.features h2{font-size:1.2rem;letter-spacing:-.02em;margin-top:14px}
.features p{font-size:.89rem}

/* ---------- demo ---------- */
.demo-section{background:#0c111bcc;border-block:1px solid #39d98a22;padding-block:62px;
  scroll-margin-top:20px}
.section-title{display:flex;justify-content:space-between;gap:24px;align-items:center}
.section-title h2{max-width:700px}
.demo-note{font-size:.88rem;max-width:860px}
.demo-shell{display:grid;grid-template-columns:1fr 1.05fr;gap:0;margin-top:28px;
  border:1px solid var(--line2);border-radius:3px;overflow:hidden;
  box-shadow:0 0 30px rgba(45,255,158,.05);
  background:linear-gradient(135deg,#0e1622,#0a0f18)}
.demo-left{padding:24px;border-right:1px solid var(--line)}
.demo-right{padding:24px;min-width:0}
.demo-left h3,.demo-right h3{font-size:1rem;margin-bottom:6px}
.runner{display:flex;gap:10px;flex-wrap:wrap;margin:16px 0 18px}
.persona-now{border:1px solid var(--line2);border-left:3px solid var(--acc);border-radius:2px;
  padding:13px 15px;background:#ffffff06;min-height:92px}
.persona-now b{display:block;font-size:.95rem;margin-bottom:3px}
.persona-now small{font:.72rem/1.6 ui-monospace,monospace;color:var(--muted);display:block}
.trail{margin-top:14px;display:flex;flex-direction:column;gap:5px;min-height:112px}
.trail div{font:.72rem/1.5 ui-monospace,monospace;color:var(--muted);
  display:flex;gap:8px;align-items:baseline}
.trail b{color:var(--acc);font-weight:600}
.trail div::before{content:"> ";color:var(--acc);opacity:.55}
.trail .brk{color:var(--broker)}
.tally{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:18px}
.tally div{border:1px solid var(--line);border-radius:8px;padding:10px;text-align:center;
  background:#ffffff05}
.tally b{display:block;font:700 1.25rem/1.2 ui-monospace,monospace}
.tally span{font-size:.66rem;color:var(--muted)}
.segments{list-style:none;margin:14px 0 0;padding:0;display:flex;flex-direction:column;gap:7px}
.segments li{display:flex;justify-content:space-between;gap:10px;font-size:.82rem;
  padding:8px 11px;border:1px solid var(--line);border-radius:7px;background:#ffffff05}
.segments li.dead{color:var(--muted);border-style:dashed}
.segments li.dead b{text-decoration:line-through;text-decoration-color:var(--broker)}
.segments em{font:.68rem ui-monospace,monospace;font-style:normal;color:var(--muted)}
.segments li.dead em{color:var(--broker)}
.simulation-label{font:.65rem ui-monospace,monospace;color:var(--muted);margin:16px 0 0}

/* ---------- shot ---------- */
.shot{padding-block:70px}
.shot-grid{display:grid;grid-template-columns:1fr 1.25fr;gap:52px;align-items:center}
.shot img{width:100%;height:auto;border:1px solid var(--line2);border-radius:3px;
  box-shadow:0 30px 70px #0006}
.shot ul{padding-left:18px;color:var(--muted);font-size:.9rem}
.shot li{margin-bottom:8px}

/* ---------- how ---------- */
.how{padding-block:10px 70px;display:grid;grid-template-columns:1fr 1fr;gap:56px}
.flow{display:grid;gap:8px;align-content:start;padding:22px;background:#2dff9e07;
  border:1px solid #2dff9e26;border-radius:3px;font-size:.88rem}
.flow div{padding:14px;border:1px solid var(--line2);background:var(--panel);border-radius:2px;
  font-family:ui-monospace,monospace;font-size:.82rem}
.flow small{display:block;font:.69rem/1.8 ui-monospace,monospace;color:var(--muted)}
.flow>span{display:block;color:var(--acc);padding:2px 4px}

/* ---------- limits ---------- */
.limits{border-block:1px solid var(--line);padding-block:60px;background:#0c111b99}
.limit-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;margin-top:28px}
.limit-grid article{border-left:3px solid var(--broker);padding:4px 0 4px 16px;
  background:linear-gradient(90deg,rgba(255,46,107,.07),transparent 60%)}
.limit-grid h3{font-size:.98rem;margin-bottom:6px}
.limit-grid p{font-size:.86rem;margin:0}

/* ---------- faq / cta ---------- */
.faq{max-width:840px;padding-block:55px}
.faq details{padding:18px 0;border-bottom:1px solid var(--line)}
.faq summary{cursor:pointer;font-weight:600}
.faq p{font-size:.9rem;margin:14px 0 0}
.final-cta{padding-block:20px 70px;text-align:center}
.final-cta .actions{justify-content:center}
footer{padding-block:24px 34px;border-top:1px solid var(--line);font-size:.75rem;color:var(--muted)}

/* ---------- motion ---------- */
@media(prefers-reduced-motion:no-preference){
  /* Visible by default: only a browser that ran the script hides them first,
     so a failed or blocked script cannot leave the page blank. */
  .reveal{transition:opacity .7s ease,transform .7s cubic-bezier(.22,1,.36,1)}
  html.js-motion .reveal:not(.in){opacity:0;transform:translateY(14px)}
  .trail div{animation:slide .35s ease-out both}
  .dos-row.changed{animation:flash .9s ease-out}
  @keyframes slide{from{opacity:0;transform:translateX(-8px)}}
  @keyframes flash{0%{background:#ff2e6b26}30%{background:#ff2e6b12}100%{background:transparent}}
  /* The pitch line glitches rarely enough to be a surprise, not a nuisance. */
  h1 em{animation:glitch 7s infinite}
  @keyframes glitch{
    0%,96%,100%{text-shadow:0 0 26px rgba(45,255,158,.45),3px 0 0 rgba(255,46,107,.3)}
    97%{text-shadow:-4px 0 0 var(--broker),4px 0 0 var(--acc2);transform:translateX(2px) skewX(-1deg)}
    98%{text-shadow:4px 0 0 var(--broker),-4px 0 0 var(--acc2);transform:translateX(-2px) skewX(1deg)}
    99%{transform:none}}
  .pulse{animation:pulse 2.4s ease-out infinite}
  @keyframes pulse{0%{box-shadow:0 0 0 0 #39d98a55}70%{box-shadow:0 0 0 14px #39d98a00}100%{box-shadow:0 0 0 0 #39d98a00}}
}
@media(max-width:980px){
  .hero{grid-template-columns:1fr;gap:38px;padding-block:52px 56px}
  .dossier{transform:none;max-width:520px}
  .features{grid-template-columns:repeat(2,1fr)}
  .demo-shell{grid-template-columns:1fr}
  .demo-left{border-right:0;border-bottom:1px solid var(--line)}
  .shot-grid,.how{grid-template-columns:1fr;gap:30px}
  .limit-grid{grid-template-columns:1fr}
}
@media(max-width:700px){
  .wrap{width:calc(100% - 32px)}
  .site-header{padding:18px 16px}
  .site-header>a:last-child{font-size:.68rem;max-width:140px;text-align:right}
  .features{grid-template-columns:1fr;gap:18px}
  .tally{grid-template-columns:1fr 1fr}
  .dos-row{grid-template-columns:1fr;gap:2px}
}
@media(prefers-reduced-motion:reduce){
  :root{scroll-behavior:auto}
  body::before{animation:none;opacity:.04}
}
@media print{body::before,body::after{display:none}}