/* ============================================================
   GeneLab — "Displaced Precision" design language
   Adapted from the Parallax brand system: three reagents only —
   warm paper, near-black ink, and one International Klein Blue.
   Blue appears only where the reading/action happens (CTAs,
   links, the live SLA dot, the helix read-head). Amber is the
   premium/value cue. Semantic tokens only; components never use
   raw values.
   ============================================================ */
:root{
  /* font */
  --font-family-stack:'SF Pro Text','SF Pro Icons','Helvetica Neue',Helvetica,Arial,sans-serif;
  --font-mono:ui-monospace,'SF Mono',Menlo,Consolas,monospace;   /* instrument labels, coordinates, base pairs */
  --font-size-xs:12px; --font-size-sm:14px; --font-size-md:17px; --font-size-lg:21px;
  --font-size-xl:28px; --font-size-2xl:34px; --font-size-3xl:40px; --font-size-4xl:56px;
  --font-weight-base:400; --font-weight-medium:500; --font-weight-semibold:600;
  --font-lineheight-base:1.47059;

  /* color — warm paper, ink, International Klein Blue */
  --color-surface-base:#17171b;                 /* ink — dark nav bleeds & bands */
  --color-text-secondary:#17171b;               /* ink — primary text */
  --color-text-tertiary:#002fa7;                /* International Klein Blue — links, icons, accent */
  --color-text-inverse:#f1efe7;                 /* paper — text on ink bands */
  --color-surface-muted:#002fa7;                /* Klein Blue — primary action fill */
  --color-surface-raised:#faf8f2;               /* warm paper — page & cards */
  --color-surface-strong:#dcd9cd;               /* paper hairline / borders */
  --color-surface-subtle:#efece2;               /* deeper paper — alternating sections & footer */
  --color-accent-bright:#5b7cf0;                /* brightened Klein Blue for marks on ink */
  --color-accent-warm:#d98a2b;                  /* warm amber — value/premium cue */
  --color-accent-warm-tint:color-mix(in srgb,var(--color-accent-warm) 14%,var(--color-surface-raised));
  --color-text-dim:color-mix(in srgb,var(--color-text-secondary) 62%,var(--color-surface-raised));
  --color-surface-muted-hover:color-mix(in srgb,var(--color-surface-muted) 88%,#ffffff);
  --color-good:#2f7d55;                          /* clinical green — status / included */

  /* space */
  --space-1:3px; --space-2:4px; --space-3:6px; --space-4:8px;
  --space-5:9px; --space-6:9.6px; --space-7:11px; --space-8:12px;

  /* radius */
  --radius-xs:50px; --radius-sm:980px;
  --radius-box:calc(var(--radius-xs) * 0.36);   /* ~18px */

  /* motion */
  --motion-instant:100ms; --motion-fast:250ms; --motion-normal:320ms; --motion-slow:1000ms;
}

*{box-sizing:border-box;margin:0;padding:0;-webkit-font-smoothing:antialiased}
html{scroll-behavior:smooth}
body{
  font-family:var(--font-family-stack);
  font-size:var(--font-size-md);
  font-weight:var(--font-weight-base);
  line-height:var(--font-lineheight-base);
  color:var(--color-text-secondary);
  background:var(--color-surface-raised);
  overflow-x:clip;
}
a{color:inherit;text-decoration:none}
[hidden]{display:none !important}   /* flex/grid components must still obey the hidden attribute */
section{scroll-margin-top:calc(var(--space-8) * 6)}
.wrap{max-width:980px;margin:0 auto;padding:0 calc(var(--space-8) + var(--space-2))}
.wrap.wide{max-width:1080px}

:focus-visible{outline:2px solid var(--color-text-tertiary);outline-offset:2px;border-radius:var(--space-2)}
.band :focus-visible{outline-color:var(--color-text-inverse)}
.skip{position:absolute;left:-9999px;top:0;z-index:99;background:var(--color-surface-raised);
  color:var(--color-text-tertiary);padding:var(--space-4) calc(var(--space-8) + var(--space-2));
  border-radius:var(--radius-sm);font-weight:var(--font-weight-medium)}
.skip:focus-visible{left:var(--space-8);top:var(--space-8)}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition:none !important;animation:none !important}
}

/* Text link — blue with chevron */
.tlink{color:var(--color-text-tertiary);font-size:var(--font-size-md)}
.tlink:hover{text-decoration:underline}
.tlink::after{content:' ›'}

/* ============ Nav ============ */
.nav{position:sticky;top:0;z-index:60;
  background:color-mix(in srgb,var(--color-surface-raised) 76%,transparent);
  -webkit-backdrop-filter:saturate(180%) blur(24px);backdrop-filter:saturate(180%) blur(24px);
  border-bottom:1px solid color-mix(in srgb,var(--color-surface-strong) 70%,transparent);
  transition:box-shadow var(--motion-normal),background var(--motion-normal)}
.nav.scrolled{box-shadow:0 6px 24px -18px rgba(23,23,27,.5)}
.nav-in{max-width:1080px;margin:0 auto;display:flex;align-items:center;
  gap:calc(var(--space-8) + var(--space-4));min-height:58px;
  padding:var(--space-4) calc(var(--space-8) + var(--space-2))}

/* brand mark — a double helix; the blue strand is the one being read */
.brand{display:inline-flex;align-items:center;gap:var(--space-5);flex:none;color:var(--color-text-secondary)}
.brand .mark{width:30px;height:30px;flex:none;overflow:visible}
.brand .helix-ink{stroke:var(--color-text-secondary)}
.brand .helix-blue{stroke:var(--color-text-tertiary);
  transition:transform var(--motion-normal) cubic-bezier(.22,1,.36,1)}
.brand:hover .helix-blue{transform:translateY(-3px)}
.brand .wm{font-size:var(--font-size-lg);font-weight:var(--font-weight-semibold);letter-spacing:-.015em}
.brand .wm b{font-weight:var(--font-weight-semibold)}

.nav-links{margin-left:auto;display:flex;align-items:center;gap:calc(var(--space-8) + var(--space-5))}
.nav-links a:not(.btn){position:relative;font-size:var(--font-size-sm);
  color:var(--color-text-secondary);opacity:.78;padding:var(--space-2) 0;
  transition:opacity var(--motion-instant),color var(--motion-instant)}
.nav-links a:not(.btn)::after{content:"";position:absolute;left:0;right:100%;
  bottom:calc(-1 * var(--space-1));height:1.5px;background:var(--color-text-tertiary);
  transition:right var(--motion-fast) cubic-bezier(.22,1,.36,1)}
.nav-links a:not(.btn):hover{opacity:1;color:var(--color-text-tertiary)}
.nav-links a:not(.btn):hover::after,.nav-links a:not(.btn)[aria-current]::after{right:0}
.nav-links a:not(.btn)[aria-current]{opacity:1;color:var(--color-text-tertiary)}
.nav .btn.mini{margin-left:var(--space-3);font-size:var(--font-size-sm);
  padding:var(--space-4) calc(var(--space-8) + var(--space-2))}

/* burger */
.burger{display:none;margin-left:auto;width:40px;height:40px;flex:none;border:0;
  background:transparent;cursor:pointer;position:relative;border-radius:var(--radius-box)}
.burger span{position:absolute;left:10px;right:10px;top:50%;height:1.6px;
  background:var(--color-text-secondary);transition:background var(--motion-fast)}
.burger span::before,.burger span::after{content:"";position:absolute;left:0;right:0;height:1.6px;
  background:var(--color-text-secondary);transition:transform var(--motion-fast)}
.burger span::before{top:-6px} .burger span::after{top:6px}
.nav.open .burger span{background:transparent}
.nav.open .burger span::before{transform:translateY(6px) rotate(45deg)}
.nav.open .burger span::after{transform:translateY(-6px) rotate(-45deg)}

/* ============ Buttons ============ */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-3);
  font-family:inherit;font-size:var(--font-size-md);font-weight:var(--font-weight-base);
  line-height:1;border-radius:var(--radius-sm);border:0;cursor:pointer;
  background:var(--color-surface-muted);color:var(--color-surface-raised);
  padding:var(--space-8) calc(var(--space-8) + var(--space-5));
  transition:background-color var(--motion-instant),transform var(--motion-instant),box-shadow var(--motion-fast)}
.btn:hover{background:var(--color-surface-muted-hover);transform:translateY(-1px)}
.btn:active{transform:translateY(0) scale(.98)}
.btn[aria-disabled="true"]{opacity:.42;pointer-events:none}
.btn.mini{font-size:var(--font-size-xs);padding:var(--space-2) var(--space-7)}
.btn.lg{padding:calc(var(--space-8) + var(--space-2)) calc(var(--space-8) * 2)}
.btn.ghost{background:transparent;color:var(--color-text-secondary);
  border:1px solid color-mix(in srgb,var(--color-text-secondary) 30%,transparent)}
.btn.ghost:hover{background:transparent;border-color:var(--color-text-tertiary);color:var(--color-text-tertiary)}
.band .btn.ghost{color:var(--color-text-inverse);
  border-color:color-mix(in srgb,var(--color-text-inverse) 42%,transparent)}
.band .btn.ghost:hover{color:var(--color-text-inverse);border-color:var(--color-text-inverse);
  background:color-mix(in srgb,var(--color-text-inverse) 8%,transparent)}

/* ============ Hero ============ */
.hero{position:relative;text-align:center;padding:calc(var(--space-8) * 7) 0 calc(var(--space-8) * 6)}
.hero::before{content:"";position:absolute;z-index:-1;inset:-12% -18% 30%;pointer-events:none;
  background:
    radial-gradient(50% 56% at 37% 26%, color-mix(in srgb,var(--color-accent-warm) 15%,transparent), transparent 68%),
    radial-gradient(48% 52% at 65% 32%, color-mix(in srgb,var(--color-text-tertiary) 12%,transparent), transparent 66%)}
.hero h1{font-size:clamp(var(--font-size-3xl),6.5vw,var(--font-size-4xl));
  font-weight:var(--font-weight-semibold);letter-spacing:-0.015em;line-height:1.05}
.hero h1 .accent{color:var(--color-text-tertiary)}
.hero .sub{font-size:clamp(var(--font-size-lg),2.2vw,24px);line-height:1.35;
  color:var(--color-text-dim);max-width:660px;margin:calc(var(--space-8) + var(--space-4)) auto 0}
.hero .cta{display:flex;gap:calc(var(--space-8) * 2);align-items:center;justify-content:center;
  flex-wrap:wrap;margin-top:calc(var(--space-8) * 3)}
.hero .note{font-size:var(--font-size-xs);color:var(--color-text-dim);margin-top:calc(var(--space-8) * 2)}

/* eyebrow kicker */
.kick{font-family:var(--font-mono);font-size:var(--font-size-xs);
  font-weight:var(--font-weight-medium);letter-spacing:.18em;text-transform:uppercase;
  color:var(--color-text-tertiary)}
.hero .kick{display:block;margin-bottom:var(--space-7)}

/* ---- Split hero ---- */
.hero.split{text-align:left;padding-top:calc(var(--space-8) * 5)}
.hgrid{display:grid;grid-template-columns:1fr auto;align-items:center;gap:calc(var(--space-8) * 5)}
.hero.split .sub{margin-left:0}
.hero.split .cta{justify-content:flex-start}
@media(max-width:860px){
  .hgrid{display:flex;flex-direction:column;gap:calc(var(--space-8) * 4)}
  .hero.split{text-align:center}
  .hero.split .sub{margin-left:auto}
  .hero.split .cta{justify-content:center}
}

/* ---- SLA stat row ---- */
.stats{display:flex;flex-wrap:wrap;justify-content:center;gap:calc(var(--space-8) * 2) calc(var(--space-8) * 4);
  margin-top:calc(var(--space-8) * 5);padding-top:calc(var(--space-8) * 4);
  border-top:1px solid var(--color-surface-strong)}
.stat{text-align:center;min-width:140px}
.stat .v{font-size:var(--font-size-2xl);font-weight:var(--font-weight-semibold);letter-spacing:-.01em;
  color:var(--color-text-secondary)}
.stat .v span{color:var(--color-text-tertiary)}
.stat .l{font-family:var(--font-mono);font-size:var(--font-size-xs);letter-spacing:.1em;
  text-transform:uppercase;color:var(--color-text-dim);margin-top:var(--space-3)}

/* ============ Section shells ============ */
.alt{background:var(--color-surface-subtle)}
.pad{padding:calc(var(--space-8) * 7) 0}
.shead{text-align:center;margin-bottom:calc(var(--space-8) * 4)}
.shead .kick{display:block}
.shead h2{font-size:clamp(var(--font-size-xl),4.5vw,var(--font-size-3xl));
  font-weight:var(--font-weight-semibold);letter-spacing:-0.01em;margin-top:var(--space-3)}
.shead .sub{color:var(--color-text-dim);font-size:var(--font-size-md);
  margin-top:var(--space-4);max-width:580px;margin-left:auto;margin-right:auto}

/* ============ Feature cards ============ */
.feats{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:calc(var(--space-8) + var(--space-4))}
.feat{background:var(--color-surface-raised);border:1px solid var(--color-surface-strong);
  border-radius:var(--radius-box);padding:calc(var(--space-8) * 3) calc(var(--space-8) * 2);
  transition:transform var(--motion-normal) cubic-bezier(.22,1,.36,1),box-shadow var(--motion-normal)}
.feat:hover{transform:translateY(-6px);box-shadow:0 24px 46px -26px rgba(23,23,27,.45)}
.feat .ic{color:var(--color-text-tertiary);margin-bottom:calc(var(--space-8) + var(--space-2));
  transition:transform var(--motion-normal) cubic-bezier(.22,1,.36,1)}
.feat:hover .ic{transform:scale(1.14) rotate(-4deg)}
.feat .ic svg{width:32px;height:32px}
.feat h3{font-size:var(--font-size-lg);font-weight:var(--font-weight-semibold);
  letter-spacing:-0.01em;margin-bottom:var(--space-3)}
.feat p{font-size:var(--font-size-sm);line-height:1.43;color:var(--color-text-dim)}

/* ============ Steps / pipeline ============ */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:calc(var(--space-8) * 3)}
.step{text-align:center;position:relative}
.step .n{width:calc(var(--space-8) * 3);height:calc(var(--space-8) * 3);border-radius:var(--radius-sm);
  background:var(--color-surface-muted);color:var(--color-surface-raised);display:grid;place-items:center;
  font-weight:var(--font-weight-semibold);font-size:var(--font-size-md);
  margin:0 auto calc(var(--space-8) + var(--space-2))}
.step h3{font-size:var(--font-size-lg);font-weight:var(--font-weight-semibold);
  letter-spacing:-0.01em;margin-bottom:var(--space-3)}
.step p{font-size:var(--font-size-sm);line-height:1.43;color:var(--color-text-dim)}

/* ============ Pricing ============ */
.plans{display:grid;grid-template-columns:repeat(3,1fr);gap:calc(var(--space-8) + var(--space-4));text-align:left}
.card{position:relative;background:var(--color-surface-raised);border:1px solid var(--color-surface-strong);
  border-radius:var(--radius-box);padding:calc(var(--space-8) * 2);display:flex;flex-direction:column;
  transition:transform var(--motion-normal) cubic-bezier(.22,1,.36,1),box-shadow var(--motion-normal),border-color var(--motion-instant)}
.card:hover{transform:translateY(-6px);box-shadow:0 26px 50px -28px rgba(23,23,27,.42)}
.card.featured{border:2px solid var(--color-surface-muted);background:var(--color-accent-warm-tint)}
.card .badge{position:absolute;top:calc(-1 * var(--space-8) - var(--space-1));left:calc(var(--space-8) * 2);
  background:var(--color-accent-warm);color:var(--color-text-secondary);
  font-size:var(--font-size-xs);font-weight:var(--font-weight-semibold);
  padding:var(--space-2) var(--space-7);border-radius:var(--radius-sm)}
.card .name{font-size:var(--font-size-md);font-weight:var(--font-weight-semibold)}
.card .tagline{font-size:var(--font-size-xs);color:var(--color-text-dim);margin-top:var(--space-2);
  font-family:var(--font-mono);letter-spacing:.04em}
.card .price{font-size:var(--font-size-3xl);font-weight:var(--font-weight-semibold);
  letter-spacing:-0.01em;margin:calc(var(--space-8) + var(--space-2)) 0 var(--space-1)}
.card .price span{font-size:var(--font-size-sm);font-weight:var(--font-weight-base);color:var(--color-text-dim)}
.card ul{list-style:none;margin:calc(var(--space-8) + var(--space-2)) 0 calc(var(--space-8) * 2);flex:1}
.card li{font-size:var(--font-size-sm);color:var(--color-text-secondary);
  padding:var(--space-3) 0 var(--space-3) calc(var(--space-8) * 2);position:relative;line-height:1.4}
.card li::before{content:'✓';position:absolute;left:var(--space-2);
  color:var(--color-text-tertiary);font-weight:var(--font-weight-semibold)}
.card li.off{color:var(--color-text-dim)}
.card li.off::before{content:'—';color:var(--color-surface-strong)}
.card .btn{width:100%}
.foot{font-size:var(--font-size-xs);color:var(--color-text-dim);text-align:center;
  max-width:620px;margin:calc(var(--space-8) * 2) auto 0}
.foot a{color:var(--color-text-tertiary)}
.foot a:hover{text-decoration:underline}

/* ============ Comparison matrix ============ */
.matrix-wrap{overflow-x:auto;border:1px solid var(--color-surface-strong);border-radius:var(--radius-box)}
table.matrix{width:100%;border-collapse:collapse;min-width:620px;font-size:var(--font-size-sm)}
table.matrix th,table.matrix td{text-align:left;padding:calc(var(--space-8) + var(--space-1)) calc(var(--space-8) + var(--space-4));
  border-bottom:1px solid var(--color-surface-strong)}
table.matrix thead th{background:var(--color-surface-subtle);font-weight:var(--font-weight-semibold);
  position:sticky;top:0}
table.matrix thead th:not(:first-child){text-align:center}
table.matrix tbody td:not(:first-child){text-align:center}
table.matrix tbody tr:last-child td{border-bottom:0}
table.matrix td.feature{font-weight:var(--font-weight-medium);color:var(--color-text-secondary)}
table.matrix .yes{color:var(--color-good);font-weight:var(--font-weight-semibold)}
table.matrix .no{color:var(--color-surface-strong)}
table.matrix .colhi{background:color-mix(in srgb,var(--color-accent-warm) 7%,transparent)}
table.matrix thead th .pt{display:block;font-size:var(--font-size-xs);color:var(--color-text-dim);
  font-weight:var(--font-weight-base);margin-top:2px}

/* ============ File-type chips ============ */
.chips{display:flex;flex-wrap:wrap;gap:var(--space-4);justify-content:center}
.chip{display:inline-flex;align-items:center;gap:var(--space-3);
  background:var(--color-surface-raised);border:1px solid var(--color-surface-strong);
  border-radius:var(--radius-sm);padding:var(--space-4) calc(var(--space-8) + var(--space-2));
  font-family:var(--font-mono);font-size:var(--font-size-sm);color:var(--color-text-secondary);
  transition:border-color var(--motion-instant),transform var(--motion-instant)}
.chip:hover{border-color:color-mix(in srgb,var(--color-text-tertiary) 40%,transparent);transform:translateY(-2px)}
.chip .dot{width:8px;height:8px;border-radius:50%;background:var(--color-text-tertiary)}

/* tile color classes (used by contact page) */
.tile.blue{background:var(--color-surface-muted)}
.tile.bright{background:var(--color-accent-bright)}
.tile.amber{background:var(--color-accent-warm)}
.tile.ink{background:var(--color-surface-base)}
.tile.green{background:var(--color-good)}

/* ============ Deliverable dossier cards ============ */
.rows{display:flex;flex-direction:column;gap:calc(var(--space-8) + var(--space-8))}
.row-item{position:relative;overflow:hidden;--fc:var(--color-surface-muted);
  display:grid;grid-template-columns:1.18fr .92fr;gap:calc(var(--space-8) * 2);align-items:center;
  background:var(--color-surface-raised);
  border:1px solid var(--color-surface-strong);border-radius:var(--radius-box);
  padding:calc(var(--space-8) + var(--space-7)) calc(var(--space-8) + var(--space-8));
  transition:transform var(--motion-base),box-shadow var(--motion-base),border-color var(--motion-base)}
.row-item::before{content:'';position:absolute;left:0;top:0;bottom:0;width:4px;
  background:linear-gradient(var(--fc),color-mix(in srgb,var(--fc) 42%,transparent))}
.row-item:hover{transform:translateY(-4px);
  border-color:color-mix(in srgb,var(--fc) 40%,var(--color-surface-strong));
  box-shadow:0 26px 54px -34px color-mix(in srgb,var(--fc) 70%,#000)}
.dcard-main{min-width:0;padding-left:var(--space-5)}
.dcard-top{display:flex;align-items:center;gap:var(--space-8);margin-bottom:calc(var(--space-8) + var(--space-2))}
.rtile{width:50px;height:50px;flex:none;border-radius:14px;display:grid;place-items:center;color:#fff;
  background:linear-gradient(150deg,var(--fc),color-mix(in srgb,var(--fc) 76%,#000));
  box-shadow:0 12px 24px -12px color-mix(in srgb,var(--fc) 75%,transparent),
    inset 0 1px 0 color-mix(in srgb,#fff 26%,transparent)}
.rtile svg{width:24px;height:24px}
.dcard-ix{margin-left:auto;font-family:var(--font-mono);font-size:var(--font-size-xs);letter-spacing:.14em;
  font-weight:var(--font-weight-medium);color:color-mix(in srgb,var(--fc) 72%,var(--color-text-secondary))}
.rtags{display:flex;flex-wrap:wrap;gap:var(--space-3);margin-bottom:var(--space-4)}
.rtag{font-family:var(--font-mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;
  font-weight:var(--font-weight-medium);padding:3px var(--space-4) 2px;border-radius:var(--radius-sm);
  color:var(--fc);background:color-mix(in srgb,var(--fc) 11%,var(--color-surface-raised));
  border:1px solid color-mix(in srgb,var(--fc) 22%,transparent);line-height:1.5}
.rtag.warm{--fc:#b97a1e}
.row-item h3{font-size:var(--font-size-lg);font-weight:var(--font-weight-semibold);
  letter-spacing:-.01em;line-height:1.2}
.meta-mono{font-family:var(--font-mono);font-size:10px;letter-spacing:.07em;text-transform:uppercase;
  color:var(--color-text-tertiary);margin-top:var(--space-4)}
.rdesc{font-size:var(--font-size-sm);color:var(--color-text-dim);line-height:1.55;margin-top:var(--space-5)}
.scope{list-style:none;margin-top:calc(var(--space-8) + var(--space-2));
  display:grid;grid-template-columns:repeat(auto-fit,minmax(172px,1fr));
  gap:var(--space-5) calc(var(--space-8) + var(--space-2))}
.scope li{font-size:var(--font-size-sm);color:var(--color-text-secondary);
  padding-left:calc(var(--space-8) + var(--space-6));position:relative;line-height:1.3}
.scope li::before{content:'';position:absolute;left:0;top:0;width:17px;height:17px;border-radius:50%;
  background:color-mix(in srgb,var(--fc) 13%,var(--color-surface-raised));
  border:1px solid color-mix(in srgb,var(--fc) 26%,transparent)}
.scope li::after{content:'';position:absolute;left:6px;top:2px;width:3.5px;height:7px;
  border-right:2px solid var(--fc);border-bottom:2px solid var(--fc);transform:rotate(45deg)}
/* preview artifact panel */
.dcard-art{min-width:0}
.artframe{border:1px solid var(--color-surface-strong);border-radius:12px;
  background:var(--color-surface-subtle);padding:var(--space-5);overflow:hidden;
  box-shadow:inset 0 1px 3px rgba(23,23,27,.05)}
.artframe svg{display:block;width:100%;height:auto;border-radius:6px}
.artframe .f-acc{fill:var(--fc)}
.artframe .s-acc{stroke:var(--fc)}
.artcap{display:block;margin-top:var(--space-5);font-family:var(--font-mono);font-size:10px;
  letter-spacing:.06em;text-transform:uppercase;color:var(--color-text-tertiary);display:flex;
  align-items:center;gap:var(--space-3)}
.artcap::before{content:'';width:5px;height:5px;border-radius:50%;background:var(--fc);flex:none}
.r-blue{--fc:#002fa7}
.r-bright{--fc:#4663d8}
.r-amber{--fc:#b97a1e}
.r-ink{--fc:#17171b}
@media(max-width:760px){
  .row-item{grid-template-columns:1fr;gap:calc(var(--space-8) + var(--space-5));
    padding:calc(var(--space-8) + var(--space-5))}
  .dcard-main{padding-left:var(--space-2)}
  .dcard-art{order:2}
}

/* ============ FAQ ============ */
.faq{max-width:720px;margin:0 auto;border-top:1px solid var(--color-surface-strong)}
.faq details{border-bottom:1px solid var(--color-surface-strong)}
.faq summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:var(--space-8);
  font-size:var(--font-size-md);font-weight:var(--font-weight-semibold);
  padding:calc(var(--space-8) + var(--space-4)) var(--space-2);transition:color var(--motion-instant)}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--color-text-tertiary)}
.faq summary::after{content:'+';margin-left:auto;flex:none;font-size:var(--font-size-lg);
  font-weight:var(--font-weight-base);color:var(--color-text-tertiary);line-height:1;transition:transform var(--motion-fast)}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq .a{padding:0 var(--space-2) calc(var(--space-8) + var(--space-4));
  font-size:var(--font-size-md);color:var(--color-text-dim);max-width:640px;line-height:1.5}
.faq .a a{color:var(--color-text-tertiary)} .faq .a a:hover{text-decoration:underline}

/* ============ Band ============ */
.band{position:relative;overflow:hidden;background:var(--color-surface-base);
  color:var(--color-text-inverse);text-align:center;padding:calc(var(--space-8) * 8) 0}
.band::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(42% 70% at 26% 20%, color-mix(in srgb,var(--color-accent-warm) 22%,transparent), transparent 60%),
    radial-gradient(46% 80% at 78% 96%, color-mix(in srgb,var(--color-accent-bright) 22%,transparent), transparent 62%)}
.band .wrap{position:relative;z-index:1}
.band .kick{color:var(--color-accent-bright)}
.band h2{font-size:clamp(var(--font-size-xl),4.5vw,var(--font-size-3xl));
  font-weight:var(--font-weight-semibold);letter-spacing:-0.01em;margin-top:var(--space-3)}
.band .sub{color:var(--color-text-inverse);opacity:.72;margin-top:var(--space-4);font-size:var(--font-size-md);
  max-width:560px;margin-left:auto;margin-right:auto}
.band .cta{display:flex;gap:calc(var(--space-8) * 2);justify-content:center;align-items:center;
  flex-wrap:wrap;margin-top:calc(var(--space-8) * 3)}
.band .note{font-size:var(--font-size-xs);opacity:.6;margin-top:calc(var(--space-8) * 2)}

/* ============ Trust / compliance badges ============ */
.badges{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:calc(var(--space-8) + var(--space-4))}
.badgecard{background:var(--color-surface-raised);border:1px solid var(--color-surface-strong);
  border-radius:var(--radius-box);padding:calc(var(--space-8) + var(--space-6));text-align:center}
.badgecard .ic{width:44px;height:44px;margin:0 auto calc(var(--space-8) + var(--space-2));
  border-radius:13px;display:grid;place-items:center;background:color-mix(in srgb,var(--color-text-tertiary) 12%,var(--color-surface-raised));
  color:var(--color-text-tertiary)}
.badgecard .ic svg{width:22px;height:22px}
.badgecard b{display:block;font-size:var(--font-size-md);font-weight:var(--font-weight-semibold)}
.badgecard small{display:block;font-size:var(--font-size-xs);color:var(--color-text-dim);margin-top:var(--space-3);line-height:1.45}

/* ============ Live SLA pill ============ */
.slapill{display:inline-flex;align-items:center;gap:var(--space-4);
  background:var(--color-surface-raised);border:1px solid var(--color-surface-strong);
  border-radius:var(--radius-sm);padding:var(--space-4) calc(var(--space-8) + var(--space-2));
  font-family:var(--font-mono);font-size:var(--font-size-xs);letter-spacing:.08em;text-transform:uppercase;
  color:var(--color-text-dim)}
.slapill .live{width:8px;height:8px;border-radius:50%;background:var(--color-good);position:relative}
.slapill .live::after{content:"";position:absolute;inset:-4px;border-radius:50%;
  background:var(--color-good);opacity:.3;animation:ping 2.2s ease-out infinite}
@keyframes ping{0%{transform:scale(1);opacity:.35}100%{transform:scale(2.4);opacity:0}}

/* ============ Prose (legal / about) ============ */
.prose{max-width:720px;margin:0 auto}
.prose h2{font-size:var(--font-size-xl);font-weight:var(--font-weight-semibold);letter-spacing:-.01em;
  margin:calc(var(--space-8) * 3) 0 var(--space-7)}
.prose h2:first-child{margin-top:0}
.prose h3{font-size:var(--font-size-lg);font-weight:var(--font-weight-semibold);margin:calc(var(--space-8) * 2) 0 var(--space-5)}
.prose p{color:var(--color-text-dim);margin-bottom:calc(var(--space-8) + var(--space-2));line-height:1.6}
.prose ul{margin:0 0 calc(var(--space-8) + var(--space-2)) calc(var(--space-8) + var(--space-4));color:var(--color-text-dim)}
.prose li{margin-bottom:var(--space-5);line-height:1.55}
.prose a{color:var(--color-text-tertiary)} .prose a:hover{text-decoration:underline}
.prose .updated{font-family:var(--font-mono);font-size:var(--font-size-xs);letter-spacing:.06em;
  color:var(--color-text-dim);text-transform:uppercase;margin-bottom:calc(var(--space-8) * 2)}

/* ============ AI chat mockup ============ */
.chatwin{background:var(--color-surface-raised);border:1px solid var(--color-surface-strong);
  border-radius:var(--radius-box);overflow:hidden;box-shadow:0 34px 70px -34px rgba(23,23,27,.4)}
.chatwin .bar{display:flex;align-items:center;gap:var(--space-4);padding:calc(var(--space-8) + var(--space-1)) calc(var(--space-8) + var(--space-4));
  border-bottom:1px solid var(--color-surface-strong);background:var(--color-surface-subtle)}
.chatwin .bar .d{width:11px;height:11px;border-radius:50%;background:var(--color-surface-strong)}
.chatwin .bar .d.b{background:var(--color-text-tertiary)}
.chatwin .bar .t{margin-left:var(--space-4);font-family:var(--font-mono);font-size:var(--font-size-xs);
  letter-spacing:.08em;text-transform:uppercase;color:var(--color-text-dim)}
.chatwin .log{padding:calc(var(--space-8) + var(--space-4));display:flex;flex-direction:column;gap:calc(var(--space-8) + var(--space-2))}
.msg{max-width:84%;padding:calc(var(--space-8)) calc(var(--space-8) + var(--space-2));border-radius:16px;
  font-size:var(--font-size-sm);line-height:1.5}
.msg.me{align-self:flex-end;background:var(--color-surface-muted);color:var(--color-text-inverse);border-bottom-right-radius:5px}
.msg.ai{align-self:flex-start;background:var(--color-surface-subtle);color:var(--color-text-secondary);border-bottom-left-radius:5px}
.msg.ai .cite{display:block;margin-top:var(--space-5);font-family:var(--font-mono);font-size:11px;
  letter-spacing:.04em;color:var(--color-text-tertiary)}
.chatwin .inrow{display:flex;gap:var(--space-4);padding:var(--space-7) calc(var(--space-8) + var(--space-4));
  border-top:1px solid var(--color-surface-strong)}
.chatwin .inrow .fake{flex:1;background:var(--color-surface-subtle);border-radius:var(--radius-sm);
  padding:var(--space-5) calc(var(--space-8) + var(--space-2));font-size:var(--font-size-sm);color:var(--color-text-dim)}
.chatwin .inrow .send{width:40px;height:40px;flex:none;border-radius:50%;background:var(--color-surface-muted);
  display:grid;place-items:center;color:#fff}
.chatwin .inrow .send svg{width:18px;height:18px}

/* ============ Two-column prose + aside ============ */
.split-panels{display:grid;grid-template-columns:1fr 1fr;gap:calc(var(--space-8) * 4);align-items:center}
.split-panels.rev > :first-child{order:2}
.panel-copy h2{font-size:clamp(var(--font-size-xl),4vw,var(--font-size-2xl));font-weight:var(--font-weight-semibold);
  letter-spacing:-.01em;margin:var(--space-3) 0 calc(var(--space-8) + var(--space-2))}
.panel-copy p{color:var(--color-text-dim);line-height:1.55;margin-bottom:calc(var(--space-8) + var(--space-2))}
.panel-copy ul{list-style:none;display:flex;flex-direction:column;gap:var(--space-7)}
.panel-copy li{position:relative;padding-left:calc(var(--space-8) + var(--space-6));font-size:var(--font-size-sm);
  color:var(--color-text-secondary);line-height:1.45}
.panel-copy li svg{position:absolute;left:0;top:1px;width:18px;height:18px;color:var(--color-text-tertiary)}
@media(max-width:840px){.split-panels{grid-template-columns:1fr;gap:calc(var(--space-8) * 3)}
  .split-panels.rev > :first-child{order:0}}

/* ============ Footer ============ */
.footer{background:var(--color-surface-subtle);font-size:var(--font-size-xs);color:var(--color-text-dim)}
.footer .in{max-width:1080px;margin:0 auto;padding:calc(var(--space-8) * 3) calc(var(--space-8) + var(--space-2))}
.footer .ftop{display:grid;grid-template-columns:1.4fr repeat(3,1fr);gap:calc(var(--space-8) * 2);
  padding-bottom:calc(var(--space-8) * 3);border-bottom:1px solid var(--color-surface-strong)}
.footer .fbrand .brand{color:var(--color-text-secondary);margin-bottom:var(--space-7)}
.footer .fbrand p{max-width:280px;line-height:1.5}
.footer .fcol h4{font-size:var(--font-size-xs);font-family:var(--font-mono);letter-spacing:.1em;text-transform:uppercase;
  color:var(--color-text-secondary);margin-bottom:calc(var(--space-8) + var(--space-1))}
.footer .fcol a{display:block;padding:var(--space-3) 0;transition:color var(--motion-instant)}
.footer .fcol a:hover{color:var(--color-text-tertiary)}
.footer .fbot{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:var(--space-8);
  padding-top:calc(var(--space-8) + var(--space-4))}
.footer .fbot .legal a:hover{color:var(--color-text-secondary);text-decoration:underline}
.footer .disclaimer{margin-top:calc(var(--space-8) + var(--space-2));padding-top:calc(var(--space-8) + var(--space-2));
  line-height:1.5;max-width:860px;opacity:.85}
@media(max-width:760px){.footer .ftop{grid-template-columns:1fr 1fr}}
@media(max-width:460px){.footer .ftop{grid-template-columns:1fr}}

/* progress bar */
.progress{position:fixed;top:0;left:0;height:2px;width:0;z-index:100;
  background:var(--color-text-tertiary);border-radius:0 2px 2px 0;transition:width .08s linear}

/* ============ Motion — scroll reveal ============ */
.js :is(.shead,.steps .step,.rows .row-item,.badges .badgecard,.split-panels,.faq details,.matrix-wrap,.chips){
  opacity:0;translate:0 24px;
  transition:opacity .7s cubic-bezier(.22,1,.36,1),translate .7s cubic-bezier(.22,1,.36,1)}
.js :is(.shead,.steps .step,.rows .row-item,.badges .badgecard,.split-panels,.faq details,.matrix-wrap,.chips).in{opacity:1;translate:0 0}
.js :is(.feats .feat,.plans .card,.stats .stat){--rd:0s;opacity:0;translate:0 24px;
  transition:opacity .7s cubic-bezier(.22,1,.36,1) var(--rd),translate .7s cubic-bezier(.22,1,.36,1) var(--rd),
    transform var(--motion-normal) cubic-bezier(.22,1,.36,1),box-shadow var(--motion-normal)}
.js :is(.feats .feat,.plans .card,.stats .stat).in{opacity:1;translate:0 0}
.js .steps .step:nth-child(2),.js .rows .row-item:nth-child(2),.js .badges .badgecard:nth-child(2){transition-delay:.08s}
.js .steps .step:nth-child(3),.js .rows .row-item:nth-child(3),.js .badges .badgecard:nth-child(3){transition-delay:.16s}
.js .badges .badgecard:nth-child(4){transition-delay:.24s}
.js .feats .feat:nth-child(2),.js .stats .stat:nth-child(2){--rd:.08s}
.js .feats .feat:nth-child(3),.js .stats .stat:nth-child(3){--rd:.16s}
.js .feats .feat:nth-child(4){--rd:.24s}
.js .plans .card:nth-child(2){--rd:.08s}
.js .plans .card:nth-child(3){--rd:.16s}

/* helix float */
.helix-art{animation:floaty 6s ease-in-out infinite}
@keyframes floaty{0%,100%{translate:0 0}50%{translate:0 -10px}}

@media (prefers-reduced-motion:reduce){
  .js :is(.shead,.steps .step,.rows .row-item,.badges .badgecard,.split-panels,.faq details,.matrix-wrap,.chips,.feats .feat,.plans .card,.stats .stat){opacity:1;translate:0 0}
  .helix-art{animation:none}.progress{display:none}
}

/* ============ Responsive ============ */
@media(max-width:860px){
  .steps{grid-template-columns:1fr}
  .plans{grid-template-columns:1fr}
}
@media(max-width:760px){
  .burger{display:block}
  .nav-links{position:absolute;top:100%;left:0;right:0;flex-direction:column;align-items:stretch;
    gap:0;margin:0;background:var(--color-surface-raised);
    border-bottom:1px solid var(--color-surface-strong);
    padding:var(--space-2) calc(var(--space-8) + var(--space-2)) calc(var(--space-8) + var(--space-4));
    transform:translateY(-10px);opacity:0;pointer-events:none;
    transition:transform var(--motion-fast) cubic-bezier(.22,1,.36,1),opacity var(--motion-fast)}
  .nav.open .nav-links{transform:none;opacity:1;pointer-events:auto}
  .nav-links a:not(.btn){font-size:var(--font-size-md);opacity:1;padding:var(--space-5) 0;
    border-top:1px solid color-mix(in srgb,var(--color-surface-strong) 55%,transparent)}
  .nav-links a:not(.btn)::after{display:none}
  .nav .btn.mini{margin:var(--space-8) 0 0;align-self:flex-start;
    font-size:var(--font-size-md);padding:var(--space-5) calc(var(--space-8) + var(--space-4))}
  .hero{padding-top:calc(var(--space-8) * 4)}
}