/* ============================================================
   SURGIV v5 — DESIGN TOKENS + SYSTEM
   Palette: Midnight Charge (founder decision 2026-07-24 —
   "futuristic medicine"; overrides spec §10 clinical-daylight).
   Type: Fraunces (display) · Geist (body) · system mono (data).
   Signature element: the vertical charge drip-line = the
   12-week timeline, one droplet animation, reduced-motion safe.
   ============================================================ */

* { margin:0; padding:0; box-sizing:border-box; }
:root {
  --ink:#0A0B0D;           /* page base */
  --carbon:#101114;        /* cards */
  --carbon2:#15171B;       /* raised cards */
  --line:#23262D;          /* hairlines */
  --line-soft:#1A1C21;
  --bone:#EDEBE3;          /* primary text */
  --slate:#8A9199;         /* body text */
  --dim:#5A6069;           /* captions */
  --charge:#46E0FF;        /* the brand current */
  --charge-hi:#9CF3FF;
  --charge-soft:rgba(70,224,255,.09);
  --charge-line:rgba(70,224,255,.35);
  --grad:linear-gradient(100deg,#9CF3FF,#46E0FF);
  --mono:ui-monospace,"SF Mono","Cascadia Mono",Consolas,monospace;
  --maxw:1120px;
}
html { scroll-behavior:smooth; }
body { font-family:Geist,ui-sans-serif,system-ui,sans-serif; background:var(--ink); color:var(--bone); -webkit-font-smoothing:antialiased; overflow-x:hidden; }
img { max-width:100%; display:block; }
a { color:inherit; text-decoration:none; }
.wrap { max-width:var(--maxw); margin:0 auto; padding:0 20px; }
@media (min-width:640px){ .wrap { padding:0 32px; } }

/* type scale */
.display { font-family:Fraunces,Georgia,serif; font-weight:600; letter-spacing:-.01em; }
h1 { font-family:Fraunces,Georgia,serif; font-weight:600; font-size:clamp(34px,7vw,58px); line-height:1.04; letter-spacing:-.015em; }
h2 { font-family:Fraunces,Georgia,serif; font-weight:600; font-size:clamp(26px,4.6vw,42px); line-height:1.1; letter-spacing:-.01em; }
h3.card-h { font-family:Fraunces,Georgia,serif; font-weight:600; font-size:22px; }
.grad-text { background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent; }
.lead { color:var(--slate); font-size:clamp(15px,2.4vw,17.5px); line-height:1.65; }
.kicker { font-family:var(--mono); font-size:11px; letter-spacing:.22em; text-transform:uppercase; color:var(--charge); }
.mono { font-family:var(--mono); }

/* buttons */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:9px; border-radius:999px; font-weight:700; cursor:pointer; transition:transform .16s ease, box-shadow .2s ease, filter .2s ease, border-color .2s, background .2s; }
.btn-charge { background:var(--grad); color:#06141B; padding:17px 34px; font-size:16px; box-shadow:0 18px 44px -16px rgba(70,224,255,.55); }
.btn-charge:hover { transform:translateY(-2px); filter:brightness(1.06); }
.btn-ghost { border:1.5px solid var(--line); color:var(--bone); padding:13px 24px; font-size:14px; }
.btn-ghost:hover { border-color:var(--charge-line); background:var(--charge-soft); }
.btn-block { width:100%; }
.cta-note { margin-top:10px; text-align:center; font-size:12px; color:var(--dim); }

/* sections */
section.blk { padding:clamp(52px,9vw,96px) 0; position:relative; }
section.wash { background:var(--carbon); border-top:1px solid var(--line-soft); border-bottom:1px solid var(--line-soft); }
.center { text-align:center; }
.center .lead { margin-left:auto; margin-right:auto; max-width:640px; }

/* cards */
.card { background:var(--carbon); border:1px solid var(--line); border-radius:18px; padding:24px; }
.card.raised { background:linear-gradient(180deg,var(--carbon2),var(--carbon)); }
.card.hot { border:2px solid var(--charge); box-shadow:0 24px 60px -28px rgba(70,224,255,.4); }

/* checks */
ul.checks { list-style:none; display:grid; gap:10px; }
ul.checks li { display:flex; gap:11px; color:var(--bone); font-size:15px; line-height:1.5; font-weight:500; }
.tick { flex-shrink:0; width:21px; height:21px; border-radius:99px; background:var(--charge-soft); color:var(--charge); display:flex; align-items:center; justify-content:center; font-size:12px; margin-top:1px; }

/* media placeholders — art-directed, mono-captioned (spec §10) */
.slot { border:1.5px dashed #2E3138; background:var(--carbon); border-radius:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:9px; text-align:center; padding:24px; width:100%; height:100%; }
.slot .sn { font-family:var(--mono); font-size:10.5px; letter-spacing:.2em; color:var(--charge); }
.slot .st { font-weight:700; font-size:13.5px; color:var(--slate); letter-spacing:.02em; }
.slot small { font-size:11.5px; color:var(--dim); line-height:1.55; max-width:320px; font-weight:400; }

/* founder placeholders — visibly styled (spec §14) */
.ph { font-family:var(--mono); font-size:.86em; background:rgba(217,166,33,.12); color:#D9A621; border:1px dashed rgba(217,166,33,.45); border-radius:6px; padding:1px 7px; white-space:nowrap; }

/* hero carousel */
.caro { display:flex; overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none; border-radius:18px; border:1px solid var(--line); }
.caro::-webkit-scrollbar { display:none; }
.caro > div { flex:0 0 100%; scroll-snap-align:start; aspect-ratio:1/1; position:relative; overflow:hidden; }
.thumbs { display:grid; grid-template-columns:repeat(7,1fr); gap:7px; margin-top:10px; }
.thumb { aspect-ratio:1/1; border:1.5px solid var(--line); border-radius:9px; background:var(--carbon); cursor:pointer; display:flex; align-items:center; justify-content:center; transition:all .2s; font-family:var(--mono); font-size:11px; color:var(--dim); }
.thumb.on { border-color:var(--charge); background:var(--charge-soft); color:var(--charge); }
.dots { display:flex; gap:6px; justify-content:center; margin-top:10px; }
.dot { width:7px; height:7px; border-radius:99px; background:var(--line); transition:all .2s; }
.dot.on { background:var(--charge); width:20px; }
@media (min-width:1024px){ .dots{display:none;} }

/* proof strip / quote cards */
.quote { background:var(--carbon); border:1px solid var(--line); border-radius:16px; padding:20px; }
.quote .stars { color:var(--charge); letter-spacing:2px; font-size:14px; }
.quote p.q { margin-top:10px; color:var(--slate); font-size:14px; line-height:1.65; }
.quote .who { margin-top:12px; font-size:12.5px; font-weight:700; }
.quote .who span { color:var(--dim); font-weight:500; }
.quote.slotq { border-style:dashed; border-color:#2E3138; }
.quote.slotq p { color:var(--dim); font-weight:600; font-size:13px; }
.ivr { font-size:10.5px; color:var(--dim); margin-top:8px; font-style:italic; }

/* ===== signature: the drip-line timeline ===== */
.timeline { position:relative; max-width:720px; margin:44px auto 0; padding-left:44px; }
.timeline::before { content:""; position:absolute; left:14px; top:0; bottom:0; width:2px;
  background:linear-gradient(180deg, var(--charge) var(--fill,0%), var(--line) var(--fill,0%)); transition:--fill .3s; }
.droplet { position:absolute; left:8px; top:0; width:14px; height:14px; border-radius:50% 50% 50% 0; transform:rotate(-45deg);
  background:var(--grad); box-shadow:0 0 18px rgba(70,224,255,.7); animation:drip 2.6s ease-in forwards; animation-delay:.4s; }
@keyframes drip { 0%{ top:0; opacity:0; } 12%{ opacity:1; } 100%{ top:calc(100% - 14px); opacity:1; } }
.tl-item { position:relative; padding:0 0 40px; }
.tl-item:last-child { padding-bottom:0; }
.tl-item::before { content:""; position:absolute; left:-36px; top:5px; width:12px; height:12px; border-radius:99px;
  background:var(--ink); border:2.5px solid var(--charge); }
.tl-wk { font-family:var(--mono); font-size:11px; letter-spacing:.18em; color:var(--charge); }
.tl-item h3 { font-family:Fraunces,Georgia,serif; font-weight:600; font-size:21px; margin-top:6px; }
.tl-item p { margin-top:7px; color:var(--slate); font-size:14.5px; line-height:1.65; max-width:560px; }
@media (max-width:640px){ .timeline { padding-left:34px; } .tl-item::before { left:-27px; } .timeline::before{ left:10px; } .droplet{ left:4px; } }

/* comparison table */
.cmpwrap { overflow-x:auto; margin-top:30px; border-radius:16px; border:1px solid var(--line); }
table.cmp { width:100%; border-collapse:collapse; font-size:13.5px; min-width:720px; background:var(--carbon); }
.cmp th, .cmp td { padding:13px 12px; text-align:center; border-top:1px solid var(--line-soft); color:var(--slate); }
.cmp th:first-child, .cmp td:first-child { text-align:left; padding-left:18px; }
.cmp thead th { border-top:none; font-weight:600; color:var(--dim); font-size:12.5px; background:var(--carbon2); }
.cmp thead th.us { color:#06141B; background:var(--grad); font-weight:800; }
.cmp td.us { background:var(--charge-soft); color:var(--charge); font-weight:700; }
.cmp .mono { font-size:12.5px; }

/* tier cards */
.tiers { display:grid; gap:18px; margin-top:36px; }
@media (min-width:900px){ .tiers { grid-template-columns:1fr 1fr; max-width:880px; margin-left:auto; margin-right:auto; } }
.tier .price-line { font-family:var(--mono); font-size:13px; color:var(--charge); margin-top:14px; }
.tier ul { margin-top:16px; }
.tier .foot { margin-top:16px; padding-top:14px; border-top:1px solid var(--line-soft); font-size:12.5px; color:var(--dim); line-height:1.6; }

/* FAQ */
.faq { display:grid; gap:9px; }
.faq details { border:1px solid var(--line); border-radius:13px; background:var(--carbon); }
.faq summary { list-style:none; cursor:pointer; display:flex; justify-content:space-between; align-items:center; gap:12px; padding:15px 17px; font-weight:600; font-size:14.5px; }
.faq summary::-webkit-details-marker { display:none; }
.faq .plus { color:var(--charge); font-weight:800; transition:transform .25s; flex-shrink:0; }
.faq details[open] .plus { transform:rotate(45deg); }
.faq .a { padding:0 17px 16px; color:var(--slate); font-size:14px; line-height:1.65; }

/* reveal on scroll */
.rv { opacity:0; transform:translateY(18px); transition:opacity .6s ease, transform .6s ease; }
.rv.in { opacity:1; transform:none; }

/* sticky mobile CTA */
.sticky-cta { position:fixed; left:0; right:0; bottom:0; z-index:70; padding:10px 14px calc(10px + env(safe-area-inset-bottom));
  background:rgba(10,11,13,.93); backdrop-filter:blur(12px); border-top:1px solid var(--line); transform:translateY(110%); transition:transform .3s; }
.sticky-cta.show { transform:translateY(0); }
.sticky-cta .btn-charge { width:100%; padding:14px 20px; font-size:14.5px; }
@media (min-width:1024px){ .sticky-cta { display:none; } }

/* header + footer */
header.site { display:flex; align-items:center; justify-content:space-between; padding:16px 0; }
.logo { display:flex; align-items:center; gap:9px; font-family:Fraunces,Georgia,serif; font-weight:600; font-size:22px; }
.logo img { height:30px; }
.logo b { color:var(--charge); font-weight:600; }
footer.site { border-top:1px solid var(--line); padding:44px 20px 54px; text-align:center; font-size:12px; color:var(--dim); line-height:1.75; }
footer.site a { color:var(--slate); }

/* forms (apply page) */
.field { width:100%; background:var(--carbon); border:1.5px solid var(--line); border-radius:12px; color:var(--bone);
  padding:13px 15px; font-size:15px; font-family:inherit; transition:border-color .2s; }
.field:focus { outline:none; border-color:var(--charge); }
label.lab { display:block; font-family:var(--mono); font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--slate); margin:18px 0 7px; }
.choice { display:flex; flex-wrap:wrap; gap:8px; }
.chip { border:1.5px solid var(--line); border-radius:999px; padding:9px 16px; font-size:13.5px; color:var(--slate); cursor:pointer; transition:all .2s; user-select:none; }
.chip.on { border-color:var(--charge); color:var(--charge); background:var(--charge-soft); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior:auto; }
  .rv { opacity:1; transform:none; transition:none; }
  .droplet { animation:none; top:calc(100% - 14px); }
  .btn, .thumb, .dot { transition:none; }
}