/* Marketing, guide, and example pages.
   Direction: shop software, not a startup page. Flat design on light slate
   neutrals, ink text, one plain blue accent, system fonts throughout. No
   gradients, no decorative shadows. The only dark surfaces are the
   instrument screens (trace preview + DRO), because that is what the real
   tool looks like. */

:root{
  --paper:#F8FAFC;
  --panel:#FFFFFF;
  --panel2:#F1F5F9;
  --line:#E2E8F0;
  --line-soft:#EDF1F6;
  --ink:#0F172A;
  --slate:#334155;
  --muted:#64748B;
  --accent:#1868C2;
  --accent-deep:#12549E;
  --good:#15803D;
  --danger:#DC2626;
  --screen:#FFFFFF;
  --screen-line:#EDF1F6;
  --radius:8px;
  --font-body:system-ui,-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --font-mono:ui-monospace,'Cascadia Mono',Consolas,Menlo,monospace;
}
*{box-sizing:border-box;margin:0;padding:0}
body{
  background:var(--paper);color:var(--ink);
  font-family:var(--font-body);font-size:16px;line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
a{color:var(--accent);text-underline-offset:3px;transition:color .16s ease}
a:hover{color:var(--accent-deep)}
img,svg{max-width:100%;height:auto}
::selection{background:rgba(24,104,194,.16)}
button{cursor:pointer}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* ---------- site chrome ---------- */
.sitenav{
  display:flex;align-items:center;gap:22px;flex-wrap:wrap;
  padding:14px 24px;
  border-bottom:1px solid var(--line);
  background:var(--panel);
  position:sticky;top:0;z-index:20;
}
.sitenav .wordmark{
  font-weight:700;font-size:17px;letter-spacing:-.01em;
  color:var(--ink);text-decoration:none;
}
.sitenav .wordmark span{color:var(--accent)}
.sitenav nav{display:flex;gap:22px;margin-left:auto;flex-wrap:wrap}
.sitenav nav a{font-size:14.5px;color:var(--muted);text-decoration:none}
.sitenav nav a:hover,.sitenav nav a[aria-current=page]{color:var(--ink)}
.sitenav .cta{
  background:var(--accent);color:#fff;font-weight:600;font-size:14px;
  border-radius:var(--radius);padding:8px 16px;text-decoration:none;
  transition:background .16s ease;
}
.sitenav .cta:hover{background:var(--accent-deep);color:#fff}

.wrap{max-width:840px;margin:0 auto;padding:48px 24px 76px}
.wrap.wide{max-width:1100px}

h1{
  font-weight:600;font-size:clamp(28px,4.4vw,38px);
  line-height:1.15;letter-spacing:-.02em;margin-bottom:14px;color:var(--ink);
}
h2{
  font-weight:600;font-size:clamp(20px,2.8vw,24px);
  letter-spacing:-.01em;margin:40px 0 12px;color:var(--ink);
}
h3{font-size:16.5px;font-weight:600;margin:22px 0 7px}
p{margin-bottom:14px;color:var(--slate)}
.lede{font-size:18px;color:var(--ink);margin-bottom:24px;max-width:60ch}
ul,ol{margin:0 0 16px 22px;color:var(--slate)}
li{margin-bottom:7px}
code{
  font-family:var(--font-mono);font-size:.87em;
  background:var(--panel2);border:1px solid var(--line);
  border-radius:4px;padding:1px 5px;
}
hr{border:none;border-top:1px solid var(--line);margin:36px 0}
.muted{color:var(--muted)}
.small{font-size:14px}

/* ---------- example gallery ---------- */
.gallery{
  display:grid;gap:20px;margin:22px 0 8px;
  grid-template-columns:repeat(auto-fit,minmax(268px,1fr));
}
.card{
  background:var(--panel);border:1px solid var(--line);
  border-radius:10px;overflow:hidden;display:flex;flex-direction:column;
}
.card .art{
  aspect-ratio:4/3;background:#FFFFFF;border-bottom:1px solid var(--line);
  display:flex;align-items:center;justify-content:center;padding:14px;
}
.card .art img{width:100%;height:100%;object-fit:contain}
.card .meta{padding:14px 16px 16px;flex:1;display:flex;flex-direction:column;gap:7px}
.card h3{margin:0;font-size:15.5px}
.card p{font-size:14px;margin:0;color:var(--slate)}
.card .verdict{font-size:12.5px;font-weight:600}
.card.good .verdict{color:var(--good)}
.card.bad .verdict{color:var(--danger)}
.card .try{
  margin-top:auto;align-self:flex-start;
  font-size:13px;font-weight:600;color:#fff;background:var(--accent);
  border:none;border-radius:6px;padding:7px 13px;
  cursor:pointer;text-decoration:none;font-family:var(--font-body);
  transition:background .16s ease;
}
.card .try:hover{background:var(--accent-deep)}

/* ---------- callouts + pricing ---------- */
.note{
  border-left:3px solid var(--accent);background:#FFF4EC;
  padding:13px 16px;border-radius:0 8px 8px 0;margin:18px 0;
}
.note.warn{border-left-color:#B45309;background:#FDF6E7}
.note p{color:#44403C}
.note p:last-child{margin-bottom:0}

.tiers{
  display:grid;gap:20px;margin:26px 0;
  grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
}
.tier{
  background:var(--panel);border:1px solid var(--line);
  border-radius:10px;padding:22px;display:flex;flex-direction:column;gap:10px;
}
.tier.featured{border-color:var(--accent)}
.tier h3{margin:0;font-size:13.5px;font-weight:600;color:var(--muted)}
.tier .price{font-size:28px;font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums}
.tier.featured .price{color:var(--accent)}
.tier .price small{font-size:13px;color:var(--muted)}
.tier ul{margin:0 0 0 18px;font-size:14.5px}
.tier .btn{
  margin-top:auto;text-align:center;text-decoration:none;
  font-weight:600;font-size:14px;padding:10px 14px;border-radius:var(--radius);
  background:var(--panel);border:1px solid var(--line);color:var(--ink);
  transition:background .16s ease;
}
.tier .btn:hover{background:var(--panel2)}
.tier.featured .btn{background:var(--accent);border-color:var(--accent);color:#fff}
.tier.featured .btn:hover{background:var(--accent-deep)}

table{width:100%;border-collapse:collapse;margin:16px 0;font-size:14.5px}
th,td{text-align:left;padding:9px 12px;border-bottom:1px solid var(--line)}
th{color:var(--muted);font-weight:600;font-size:13px}

.faq details{border-bottom:1px solid var(--line);padding:14px 0}
.faq summary{cursor:pointer;font-weight:600;font-size:15.5px}
.faq details p{margin:9px 0 0;font-size:14.5px}

footer.sitefoot{
  border-top:1px solid var(--line);background:var(--panel2);
  padding:26px 24px;
}
footer.sitefoot .inner{
  max-width:1100px;margin:0 auto;
  display:flex;gap:20px;flex-wrap:wrap;align-items:center;
  font-size:13.5px;color:var(--muted);
}
footer.sitefoot a{color:var(--muted);text-decoration:none}
footer.sitefoot a:hover{color:var(--ink)}
footer.sitefoot .spacer{flex:1}

@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* =====================================================================
   LANDING PAGE
   ===================================================================== */
.lwrap{max-width:1100px;margin:0 auto;padding:0 24px}

.hero{
  display:grid;grid-template-columns:1fr 1.05fr;gap:56px;align-items:center;
  padding:72px 0 64px;
}
.hero h1{
  font-size:clamp(32px,4.8vw,50px);line-height:1.08;
  letter-spacing:-.025em;margin-bottom:18px;
}
.hero .sub{font-size:17px;line-height:1.65;color:var(--slate);max-width:47ch;margin-bottom:26px}
.hero-ctas{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:22px}
.btn-lg{
  display:inline-block;text-decoration:none;font-weight:600;font-size:15px;
  padding:12px 22px;border-radius:9px;
  background:var(--accent);color:#fff;border:1px solid var(--accent);
  transition:background .16s ease;
}
.btn-lg:hover{background:var(--accent-deep);color:#fff}
.btn-lg.ghost{background:var(--panel);color:var(--ink);border-color:var(--line)}
.btn-lg.ghost:hover{background:var(--panel2);border-color:#CBD5E1;color:var(--ink)}
.hero-facts{margin:0;font-size:13.5px;color:var(--muted)}

/* -- the bench: the product's own screen, framed like the app -- */
.bench{
  margin:0;background:var(--panel);border:1px solid var(--line);border-radius:12px;
  overflow:hidden;
}
.bench-head{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:10px 14px;border-bottom:1px solid var(--line);
  font-size:12.5px;color:var(--muted);
}
.bench-head .chip{
  border:1px solid var(--line);border-radius:4px;padding:2px 8px;
  color:var(--accent);font-size:11px;font-weight:600;
}
.bench svg{display:block;width:100%;height:auto}
.bench-dro{
  display:flex;background:var(--screen);
  border-top:1px solid var(--line);
}
.bench-dro .cell{
  flex:1;padding:10px 16px;border-right:1px solid var(--screen-line);
  display:flex;flex-direction:column;gap:2px;min-width:0;
}
.bench-dro .cell:last-child{border-right:none}
.bench-dro .lab{
  font-size:9px;letter-spacing:.14em;color:var(--muted);text-transform:uppercase;
  font-family:var(--font-body);font-weight:600;
}
.bench-dro .val{
  font-size:13.5px;font-weight:600;color:var(--accent);font-variant-numeric:tabular-nums;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.bench-dro .val.plain{color:var(--ink)}

/* the cut path draws itself once; each path carries its own length */
.bench .trace{
  stroke-dasharray:var(--len);stroke-dashoffset:var(--len);
  animation:benchdraw 1.6s cubic-bezier(.4,0,.2,1) forwards;
}
.bench .trace.t2{animation-delay:.35s}
.bench .trace.t3{animation-delay:.7s}
@keyframes benchdraw{to{stroke-dashoffset:0}}
.bench .pierce{opacity:0;animation:benchpop .3s ease forwards}
.bench .pierce.p1{animation-delay:.1s}
.bench .pierce.p2{animation-delay:.45s}
.bench .pierce.p3{animation-delay:.8s}
@keyframes benchpop{to{opacity:1}}
@media (prefers-reduced-motion:reduce){
  .bench .trace{animation:none;stroke-dashoffset:0}
  .bench .pierce{animation:none;opacity:1}
}

/* -- landing sections -- */
.band{border-top:1px solid var(--line);padding:64px 0}
.band.tight{padding:52px 0}
.band.alt{background:var(--panel)}
.sec-head{margin-bottom:10px}
.sec-head h2{margin:0;font-size:clamp(22px,3vw,28px);letter-spacing:-.02em}
.sec-head .rule{display:none}
.sec-sub{color:var(--muted);font-size:15.5px;max-width:64ch;margin-bottom:34px}

/* features: editorial columns with an engineered rule, not glowing cards */
.featgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:30px 36px}
.featgrid .cell{border-top:2px solid var(--slate);padding-top:14px}
.featgrid h3{margin:0 0 6px;font-size:16px;font-weight:600;letter-spacing:-.01em}
.featgrid p{margin:0;font-size:14.5px;color:var(--slate);line-height:1.62}

/* workflow: a genuine sequence, so the numbers mean something */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:30px 32px}
.step .n{
  display:block;font-weight:600;font-size:14px;color:var(--accent);
  margin-bottom:8px;font-variant-numeric:tabular-nums;
}
.step h3{margin:0 0 6px;font-size:16px;letter-spacing:-.01em}
.step p{margin:0;font-size:14.5px;color:var(--slate);line-height:1.62}

/* the pipeline: technical content, mono stage tags earn their keep */
.steps.five{grid-template-columns:repeat(5,1fr);gap:26px}
.step.tech .n{
  font-weight:500;font-size:12px;
  color:var(--muted);
}
.step.tech h3{font-size:15.5px}
.step.tech p{font-size:13.5px}

/* examples teaser reuses .card */
.exteaser{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-bottom:18px}
.morelink{font-size:14.5px}

/* price band */
.priceband{
  display:flex;align-items:center;gap:36px;flex-wrap:wrap;
  border:1px solid var(--line);border-radius:12px;
  background:var(--panel);
  padding:36px 40px;
}
.priceband .big{
  font-weight:600;font-size:clamp(22px,3.4vw,30px);
  line-height:1.2;letter-spacing:-.02em;
}
.priceband .big em{font-style:normal;color:var(--accent)}
.priceband .sub{color:var(--muted);font-size:14.5px;margin:8px 0 0;max-width:52ch}
.priceband .spacer{flex:1}
.priceband .fine{font-size:13px;color:var(--muted);margin-top:8px}
.priceband .hero-ctas{margin:0}

/* 404 */
.errwrap{min-height:56vh;display:flex;align-items:center}
.errcode{
  font-size:clamp(56px,11vw,100px);
  color:#CBD5E1;font-weight:700;line-height:1;margin-bottom:6px;
}

@media (max-width:940px){
  .hero{grid-template-columns:1fr;gap:40px;padding:48px 0 44px}
  .featgrid{grid-template-columns:1fr 1fr}
  .steps{grid-template-columns:1fr 1fr}
  .steps.five{grid-template-columns:1fr 1fr}
}
@media (max-width:600px){
  .featgrid{grid-template-columns:1fr}
  .steps{grid-template-columns:1fr}
  .steps.five{grid-template-columns:1fr}
  .exteaser{grid-template-columns:1fr}
  .priceband{padding:28px 24px}
  .bench-dro .cell{padding:8px 10px}
}

/* ---------- cookie notice ---------- */
.cookienote[hidden]{display:none}
.cookienote{
  position:fixed;left:16px;bottom:16px;z-index:60;
  max-width:360px;
  background:var(--panel);border:1px solid var(--line);border-radius:10px;
  padding:14px 16px;
  display:flex;align-items:flex-start;gap:12px;
  box-shadow:0 8px 28px rgba(15,23,42,.14);
}
.cookienote p{margin:0;font-size:13px;line-height:1.55;color:var(--slate)}
.cookienote button{
  flex:0 0 auto;font-family:var(--font-body);font-size:13px;font-weight:600;
  color:#fff;background:var(--accent);border:1px solid var(--accent);
  border-radius:7px;padding:6px 14px;cursor:pointer;
  transition:background .16s ease;
}
.cookienote button:hover{background:var(--accent-deep)}
@media (max-width:600px){.cookienote{left:10px;right:10px;max-width:none}}