/* ============================================================================
   FlowTCG — "Watch one card run the whole shop" (marketing site v2)
   A NEW, second landing page. The CONVEYOR / assembly-line is the hero metaphor:
   one card flows down the line through the whole shop, hands-free.
   Self-contained: no build, no deps, no network, no frameworks.

   Brand: evolved from the existing FlowTCG site (dark navy + #4a9eff blue +
   #b07cf0 purple) into a richer JEWEL-TONE palette — sapphire / amethyst /
   emerald with rose + gold accents on a deep-midnight canvas. Premium SaaS for a
   real business: big type, one message per section, tasteful motion, mobile-first.
   ========================================================================== */

:root{
  /* ---- jewel-tone accents (evolution of FlowTCG blue/purple) ---- */
  --sapphire:#5b8bff; --amethyst:#9b6bff; --emerald:#23c8a8; --rose:#ff6ba8; --gold:#ffc24d;
  --sapphire-dim:rgba(91,139,255,.14); --amethyst-dim:rgba(155,107,255,.14);
  --emerald-dim:rgba(35,200,168,.14); --rose-dim:rgba(255,107,168,.14); --gold-dim:rgba(255,194,77,.14);

  /* ---- deep-midnight canvas ---- */
  --bg:#070a16;             /* near-black blue */
  --bg-2:#0b0f1f;           /* panel base */
  --pan:#10162b;            /* card */
  --pan-2:#141b34;          /* raised card */
  --line:#1f2742;           /* hairline */
  --line-2:#2b365a;         /* stronger hairline */
  --ink-1:#f1f4fb;          /* headings */
  --ink-2:#b9c2dc;          /* body */
  --ink-3:#7e89aa;          /* muted */
  --ink-faint:#566080;      /* faintest */

  /* ---- signature gradients ---- */
  --grad-flow:linear-gradient(120deg,#5b8bff,#9b6bff 52%,#23c8a8);
  --grad-jewel:linear-gradient(110deg,#5b8bff 0%,#a06bff 50%,#ff6ba8 100%);
  --grad-text:linear-gradient(110deg,#6c9bff 0%,#a98bff 48%,#43e0c2 100%);
  --grad-warm:linear-gradient(120deg,#ffc24d,#ff6ba8);

  /* ---- glows / shadows tuned for dark ---- */
  --sh-sm:0 2px 10px -3px rgba(0,0,0,.5);
  --sh-md:0 18px 44px -22px rgba(0,0,0,.7);
  --sh-lg:0 40px 90px -34px rgba(0,0,0,.8);
  --glow-blue:0 0 0 1px rgba(91,139,255,.35),0 18px 50px -18px rgba(91,139,255,.5);
  --glow-grape:0 0 0 1px rgba(155,107,255,.35),0 18px 50px -18px rgba(155,107,255,.5);

  --r-sm:12px; --r-md:18px; --r-lg:24px; --r-xl:32px; --r-pill:999px;
  --ease:cubic-bezier(.16,1,.3,1); --fast:.16s; --med:.34s;
  --font-ui:-apple-system,"SF Pro Display","SF Pro Text","Helvetica Neue","Inter",system-ui,sans-serif;
  --font-mono:"SF Mono","JetBrains Mono","Menlo",ui-monospace,monospace;
  --maxw:1160px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  font-family:var(--font-ui); color:var(--ink-2); line-height:1.55;
  -webkit-font-smoothing:antialiased; overflow-x:hidden; background:var(--bg);
  background-image:
    radial-gradient(1100px 720px at 6% -8%, rgba(91,139,255,.16), transparent 58%),
    radial-gradient(1000px 700px at 100% 0%, rgba(155,107,255,.14), transparent 56%),
    radial-gradient(1100px 900px at 50% 118%, rgba(35,200,168,.10), transparent 60%);
  background-attachment:fixed;
}
::selection{background:rgba(155,107,255,.32);color:#fff}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.defs{position:absolute;width:0;height:0;overflow:hidden}

/* ---------------------------------------------------------- shared atoms */
.wrap{width:100%;max-width:var(--maxw);margin:0 auto;padding:0 28px}
.section{position:relative;padding:96px 0}
@media(max-width:760px){.section{padding:62px 0}}
.center{text-align:center}.center .lead{margin-left:auto;margin-right:auto}
h1,h2,h3{color:var(--ink-1);letter-spacing:-.02em;line-height:1.05;font-weight:800}
h2.big{font-size:clamp(31px,5vw,55px);margin:18px 0 0}
.lead{font-size:clamp(16px,1.7vw,20px);color:var(--ink-2);max-width:64ch;line-height:1.62}
.gradtext{background:var(--grad-text);-webkit-background-clip:text;background-clip:text;color:transparent}

.eyebrow{display:inline-flex;align-items:center;gap:9px;font-family:var(--font-mono);font-size:12px;
  letter-spacing:.16em;text-transform:uppercase;color:var(--amethyst);background:var(--amethyst-dim);
  border:1px solid rgba(155,107,255,.28);border-radius:var(--r-pill);padding:7px 15px;font-weight:600}

.btn{display:inline-flex;align-items:center;gap:10px;font-weight:700;font-size:16px;
  padding:15px 28px;border-radius:var(--r-pill);border:none;cursor:pointer;transition:var(--med);
  font-family:var(--font-ui);position:relative;overflow:hidden}
.btn.primary{color:#fff;background:var(--grad-jewel);box-shadow:0 16px 40px -14px rgba(155,107,255,.6)}
.btn.primary:hover{transform:translateY(-2px);box-shadow:0 24px 56px -14px rgba(155,107,255,.75)}
/* shimmer sweep on primary (mirrors the app's intake/verify shimmer language) */
.btn.primary::after{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 32%,rgba(255,255,255,.4) 50%,transparent 68%);
  background-size:220% 100%;background-position:200% center;animation:sheen 4.8s linear infinite}
.btn.ghost{color:var(--ink-1);background:rgba(255,255,255,.03);border:1.5px solid var(--line-2)}
.btn.ghost:hover{transform:translateY(-2px);border-color:var(--sapphire);background:rgba(91,139,255,.08)}
.btn .k{font-family:var(--font-mono);font-size:12px;opacity:.72;font-weight:600}

.pill{display:inline-flex;align-items:center;gap:7px;font-family:var(--font-mono);font-size:12px;
  letter-spacing:.04em;color:var(--ink-3);background:rgba(255,255,255,.03);border:1px solid var(--line);border-radius:var(--r-pill);padding:6px 13px}
.live-dot{width:8px;height:8px;border-radius:50%;background:var(--emerald);box-shadow:0 0 0 0 rgba(35,200,168,.5);animation:livepulse 2s infinite}
@keyframes livepulse{0%{box-shadow:0 0 0 0 rgba(35,200,168,.55)}70%{box-shadow:0 0 0 8px rgba(35,200,168,0)}100%{box-shadow:0 0 0 0 rgba(35,200,168,0)}}
@keyframes sheen{to{background-position:-200% center}}
@keyframes drift{0%{transform:translate(0,0)}50%{transform:translate(18px,-14px)}100%{transform:translate(0,0)}}

/* reveal-on-scroll */
.rise{opacity:0;transform:translateY(26px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.rise.in{opacity:1;transform:none}
.rise.d1{transition-delay:.07s}.rise.d2{transition-delay:.14s}.rise.d3{transition-delay:.21s}

/* ============================================================================
   NAV
   ========================================================================== */
.nav{position:sticky;top:0;z-index:80;backdrop-filter:saturate(160%) blur(16px);
  background:rgba(7,10,22,.74);border-bottom:1px solid var(--line)}
.nav .wrap{display:flex;align-items:center;gap:18px;height:64px}
.brand{display:flex;align-items:center;gap:10px;font-weight:800;font-size:18px;color:var(--ink-1);letter-spacing:-.01em}
.brand .mk{width:30px;height:30px;flex:none}
.brand .nm b{background:var(--grad-text);-webkit-background-clip:text;background-clip:text;color:transparent}
.nav .links{margin-left:auto;display:flex;align-items:center;gap:4px}
.nav .links a{font-size:14px;font-weight:600;color:var(--ink-3);padding:9px 13px;border-radius:var(--r-pill);transition:var(--fast)}
.nav .links a:hover{color:var(--ink-1);background:rgba(255,255,255,.05)}
.nav .cta{color:#fff!important;background:var(--grad-jewel);box-shadow:0 10px 26px -12px rgba(155,107,255,.7)}
.nav .cta:hover{background:var(--grad-jewel)}
.nav .links a.login{position:relative;overflow:hidden;isolation:isolate;font-weight:700;color:var(--ink-1);
  border:1px solid transparent;
  background:linear-gradient(var(--bg-2),var(--bg-2)) padding-box, var(--grad-jewel) border-box;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07);
  transition:transform var(--fast),box-shadow var(--fast),color var(--fast)}
.nav .links a.login::before{content:"";position:absolute;top:0;left:-120%;width:55%;height:100%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.42),transparent);
  transform:skewX(-18deg);transition:left .55s ease;z-index:2;pointer-events:none}
.nav .links a.login:hover{transform:translateY(-1px);color:#fff;
  background:linear-gradient(var(--bg-2),var(--bg-2)) padding-box, var(--grad-jewel) border-box;
  box-shadow:0 8px 24px -8px rgba(160,107,255,.55),inset 0 1px 0 rgba(255,255,255,.1)}
.nav .links a.login:hover::before{left:135%}
@media(max-width:960px){.nav .links a.hideable{display:none}}

/* ============================================================================
   HERO — THE CONVEYOR
   ========================================================================== */
#hero{padding:74px 0 56px;position:relative}
.hero-head{text-align:center;max-width:900px;margin:0 auto}
.kicker{display:inline-flex;align-items:center;gap:9px;font-family:var(--font-mono);font-size:12.5px;
  letter-spacing:.06em;color:var(--ink-1);background:rgba(255,255,255,.04);border:1px solid var(--line-2);
  border-radius:var(--r-pill);padding:8px 16px;box-shadow:var(--sh-sm);font-weight:600}
.kicker .spark{color:var(--sapphire);font-size:12px}
.hero-head h1{font-size:clamp(40px,6.6vw,76px);margin:22px 0 0;line-height:.98;letter-spacing:-.03em}
.hero-head h1 .gradtext{background-size:200% auto;animation:sheen 9s linear infinite alternate}
.hero-head .lead{margin:22px auto 0;font-size:clamp(17px,1.9vw,21px);color:var(--ink-2)}
.hero-head .cta-row{margin-top:32px;display:flex;gap:14px;flex-wrap:wrap;justify-content:center}
.hero-head .trust{margin-top:24px;display:flex;gap:13px;flex-wrap:wrap;align-items:center;justify-content:center}

/* ---- the conveyor module ---- */
.conveyor{position:relative;margin:54px auto 0;max-width:1040px;border-radius:var(--r-xl);
  background:linear-gradient(180deg,var(--pan-2),var(--bg-2));border:1px solid var(--line-2);
  box-shadow:var(--sh-lg);overflow:hidden}
.conveyor .cv-glow{position:absolute;inset:-2px;pointer-events:none;z-index:0}
.conveyor .cv-glow::before,.conveyor .cv-glow::after{content:"";position:absolute;border-radius:50%;filter:blur(46px);opacity:.4}
.conveyor .cv-glow::before{width:300px;height:300px;left:-60px;top:-70px;background:var(--sapphire);animation:drift 13s ease-in-out infinite}
.conveyor .cv-glow::after{width:320px;height:320px;right:-70px;bottom:-90px;background:var(--amethyst);animation:drift 16s ease-in-out infinite reverse}
.conveyor > *{position:relative;z-index:1}

.cv-bar{display:flex;align-items:center;gap:10px;padding:13px 18px;background:rgba(255,255,255,.02);border-bottom:1px solid var(--line)}
.cv-bar .tl{display:flex;gap:7px}
.cv-bar .tl i{width:11px;height:11px;border-radius:50%}
.cv-bar .tl i:nth-child(1){background:#ff6b81}.cv-bar .tl i:nth-child(2){background:#ffc24d}.cv-bar .tl i:nth-child(3){background:#23c8a8}
.cv-bar .winmk{display:flex;align-items:center;gap:8px;margin-left:6px;font-size:12.5px;font-weight:800;color:var(--ink-2)}
.cv-bar .winmk svg{width:17px;height:17px}
.cv-bar .winmk b{background:var(--grad-text);-webkit-background-clip:text;background-clip:text;color:transparent}
.cv-bar .meter{margin-left:auto;display:inline-flex;align-items:center;gap:7px;font-family:var(--font-mono);font-size:11px;
  color:var(--emerald);background:var(--emerald-dim);border-radius:var(--r-pill);padding:5px 12px;font-weight:700}

/* the moving stage */
.cv-stage{position:relative;height:188px;padding:20px 0 0;overflow:hidden;
  background:radial-gradient(520px 200px at 50% -40%,rgba(155,107,255,.14),transparent 62%)}
.cv-card{position:absolute;top:30px;left:0;width:108px;height:140px;will-change:transform;
  transition:transform 1.1s var(--ease);transform:translateX(40px)}
.cv-card-face{position:relative;width:100%;height:100%;border-radius:13px;padding:12px 11px;
  background:linear-gradient(160deg,#1d2747,#141c33);
  border:1px solid var(--line-2);box-shadow:0 18px 36px -16px rgba(0,0,0,.8),0 0 0 1px rgba(91,139,255,.25),0 0 40px -8px rgba(91,139,255,.45);
  display:flex;flex-direction:column;gap:5px;overflow:hidden}
.cv-card-face::before{content:"";position:absolute;inset:0;background:linear-gradient(115deg,transparent 38%,rgba(255,255,255,.16) 50%,transparent 62%);
  background-size:240% 100%;animation:sheen 3.4s linear infinite}
.cv-card-face .cc-spark{position:absolute;top:9px;right:10px;width:9px;height:9px;border-radius:50%;background:var(--grad-flow);box-shadow:0 0 10px var(--sapphire)}
.cv-card-face .cc-name{font-size:13px;font-weight:800;color:var(--ink-1);line-height:1.12;letter-spacing:-.01em;position:relative}
.cv-card-face .cc-sub{font-size:10px;color:var(--ink-3);font-weight:600;position:relative}
.cv-card-face .cc-sku{margin-top:auto;font-family:var(--font-mono);font-size:10px;color:var(--emerald);letter-spacing:.04em;position:relative}
.cv-card.pulse{animation:cardpulse .5s var(--ease)}
@keyframes cardpulse{0%{transform:translateX(var(--cx,40px)) scale(1)}40%{transform:translateX(var(--cx,40px)) scale(1.07)}100%{transform:translateX(var(--cx,40px)) scale(1)}}

/* the belt */
.cv-belt{position:absolute;left:0;right:0;bottom:14px;height:14px;background:#0c1124;border-top:1px solid var(--line-2);border-bottom:1px solid var(--line-2);overflow:hidden}
.cv-belt span{position:absolute;inset:0;background-image:repeating-linear-gradient(90deg,transparent 0 22px,rgba(91,139,255,.22) 22px 26px);
  animation:belt 1.1s linear infinite}
@keyframes belt{to{background-position:-26px 0}}

/* the 8 stations */
.cv-rail{display:grid;grid-template-columns:repeat(8,1fr);gap:0;background:rgba(255,255,255,.015);border-top:1px solid var(--line)}
.cv-stop{position:relative;text-align:center;padding:15px 6px;border-right:1px solid var(--line);transition:var(--med)}
.cv-stop:last-child{border-right:none}
.cv-stop .em{font-size:21px;display:block;filter:grayscale(.5) opacity(.6);transition:var(--med)}
.cv-stop b{display:block;font-size:11.5px;color:var(--ink-3);margin-top:5px;font-weight:700;letter-spacing:-.01em;transition:var(--med)}
.cv-stop i{display:block;font-family:var(--font-mono);font-size:8.5px;color:var(--ink-faint);letter-spacing:.03em;margin-top:2px;font-style:normal}
.cv-stop.active{background:linear-gradient(180deg,rgba(91,139,255,.16),transparent)}
.cv-stop.active .em{filter:none;transform:translateY(-2px) scale(1.12)}
.cv-stop.active b{color:var(--ink-1)}
.cv-stop.active::after{content:"";position:absolute;left:14%;right:14%;top:0;height:3px;background:var(--grad-flow);border-radius:0 0 3px 3px}
@media(max-width:720px){
  .cv-rail{grid-template-columns:repeat(4,1fr)}
  .cv-stop:nth-child(4){border-right:none}
  .cv-stop:nth-child(n+5){border-top:1px solid var(--line)}
  .cv-stop i{display:none}
}

.hero-hint{text-align:center;margin-top:22px;font-family:var(--font-mono);font-size:12.5px;letter-spacing:.03em;color:var(--ink-3)}
.hero-hint b{color:var(--ink-1)}.hero-hint i{color:var(--amethyst);font-style:normal}

/* ============================================================================
   THE STRUGGLE
   ========================================================================== */
#struggle{position:relative}
.pain-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:48px}
@media(max-width:880px){.pain-grid{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.pain-grid{grid-template-columns:1fr}}
.pain{position:relative;background:var(--pan);border:1px solid var(--line);border-radius:var(--r-lg);padding:24px;transition:var(--med);overflow:hidden}
.pain::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:linear-gradient(180deg,var(--rose),transparent);opacity:.55}
.pain:hover{transform:translateY(-4px);border-color:var(--line-2);box-shadow:var(--sh-md)}
.pain .ic{width:46px;height:46px;border-radius:13px;display:grid;place-items:center;font-size:23px;background:var(--rose-dim);border:1px solid rgba(255,107,168,.2);margin-bottom:14px}
.pain h3{font-size:18px;margin-bottom:7px;color:var(--ink-1)}
.pain p{font-size:14px;color:var(--ink-2);line-height:1.58}
.turn-say{margin:46px auto 0;font-size:clamp(20px,2.6vw,30px);font-weight:700;color:var(--ink-2);line-height:1.32;max-width:30ch}
.turn-say b{color:var(--ink-1)}.turn-say i{color:var(--amethyst);font-style:italic}

/* ============================================================================
   THE TURN
   ========================================================================== */
#turn{background:linear-gradient(180deg,transparent,rgba(91,139,255,.05) 22%,rgba(155,107,255,.05) 78%,transparent)}
.turn-wrap{max-width:900px;margin:0 auto;text-align:center}
.turn-wrap .bigsay{font-size:clamp(26px,4.2vw,46px);font-weight:800;color:var(--ink-1);line-height:1.16;letter-spacing:-.02em;margin-top:18px}
.turn-wrap .bigsay b{background:var(--grad-text);-webkit-background-clip:text;background-clip:text;color:transparent}
.turn-wrap .sub{margin:24px auto 0;font-size:clamp(16px,1.8vw,20px);color:var(--ink-2);max-width:62ch;line-height:1.6}
.turn-row{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:46px;text-align:left}
@media(max-width:820px){.turn-row{grid-template-columns:1fr}}
.trn{background:var(--pan);border:1px solid var(--line);border-radius:var(--r-lg);padding:26px;box-shadow:var(--sh-sm);transition:var(--med)}
.trn:hover{transform:translateY(-5px);box-shadow:var(--sh-md)}
.trn .ic{width:50px;height:50px;border-radius:14px;display:grid;place-items:center;font-size:25px;margin-bottom:15px;border:1px solid var(--line-2)}
.trn.a .ic{background:var(--sapphire-dim)} .trn.b .ic{background:var(--emerald-dim)} .trn.c .ic{background:var(--amethyst-dim)}
.trn h3{font-size:19px;margin-bottom:8px}
.trn p{font-size:14.5px;color:var(--ink-2);line-height:1.58}
.trn.c{border-color:rgba(155,107,255,.4);box-shadow:var(--glow-grape)}
.trn .me{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.05em;text-transform:uppercase;color:var(--amethyst);font-weight:700;margin-top:12px;display:inline-block}
.trn i{color:var(--ink-1);font-style:italic}

/* ============================================================================
   THE LINE — interactive station walk
   ========================================================================== */
.line-shell{margin-top:46px;border-radius:var(--r-xl);background:linear-gradient(180deg,var(--pan-2),var(--bg-2));
  border:1px solid var(--line-2);box-shadow:var(--sh-lg);overflow:hidden}
.line-rail{display:grid;grid-template-columns:repeat(8,1fr);background:rgba(255,255,255,.015);border-bottom:1px solid var(--line)}
.ls{position:relative;display:flex;flex-direction:column;align-items:center;gap:5px;cursor:pointer;
  padding:16px 6px;background:transparent;border:none;border-right:1px solid var(--line);transition:var(--med);color:inherit;font-family:inherit}
.ls:last-child{border-right:none}
.ls .em{font-size:21px;filter:grayscale(.4) opacity(.62);transition:var(--med)}
.ls .t{font-size:11.5px;font-weight:700;color:var(--ink-3);letter-spacing:-.01em;transition:var(--med);line-height:1.1;text-align:center}
.ls:hover{background:rgba(255,255,255,.03)}.ls:hover .em{filter:none}
.ls[aria-selected="true"]{background:linear-gradient(180deg,rgba(155,107,255,.16),transparent)}
.ls[aria-selected="true"] .em{filter:none;transform:translateY(-2px) scale(1.12)}
.ls[aria-selected="true"] .t{color:var(--ink-1)}
.ls[aria-selected="true"]::after{content:"";position:absolute;left:18%;right:18%;bottom:-1px;height:3px;background:var(--grad-flow);border-radius:3px 3px 0 0}
@media(max-width:780px){
  .line-rail{grid-template-columns:repeat(4,1fr)}
  .ls:nth-child(4){border-right:none}
  .ls:nth-child(n+5){border-top:1px solid var(--line)}
}

.line-panel{display:grid;grid-template-columns:1fr 1fr;gap:0;min-height:340px}
@media(max-width:840px){.line-panel{grid-template-columns:1fr}}
.lp-left{padding:34px 32px;display:flex;flex-direction:column;justify-content:center}
.lp-step{font-family:var(--font-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--amethyst)}
.lp-left h3{font-size:clamp(23px,3.2vw,32px);margin:12px 0 12px;line-height:1.08}
.lp-blurb{font-size:15px;color:var(--ink-2);line-height:1.62;max-width:46ch}
.lp-points{list-style:none;margin-top:20px;display:grid;gap:11px}
.lp-points li{display:flex;gap:11px;align-items:flex-start;font-size:14px;color:var(--ink-2);font-weight:600;
  opacity:0;transform:translateX(-6px);animation:lpIn .4s var(--ease) forwards}
.lp-points li .ck{flex:none;width:20px;height:20px;border-radius:50%;display:grid;place-items:center;font-size:11px;color:#fff;margin-top:1px;background:var(--grad-flow)}
@keyframes lpIn{to{opacity:1;transform:none}}

.lp-right{padding:30px 32px;display:grid;place-items:center;border-left:1px solid var(--line);
  background:radial-gradient(440px 280px at 70% 0%,rgba(91,139,255,.1),transparent 60%)}
@media(max-width:840px){.lp-right{border-left:none;border-top:1px solid var(--line)}}
.lp-screen{width:100%;max-width:380px;border-radius:var(--r-md);background:#0a0f20;border:1px solid var(--line-2);box-shadow:var(--sh-md);overflow:hidden}
.lps-head{display:flex;align-items:center;gap:6px;padding:10px 13px;background:rgba(255,255,255,.02);border-bottom:1px solid var(--line)}
.lps-head .dot{width:9px;height:9px;border-radius:50%;background:var(--line-2)}
.lps-head .dot:nth-child(1){background:#ff6b81}.lps-head .dot:nth-child(2){background:#ffc24d}.lps-head .dot:nth-child(3){background:#23c8a8}
.lps-head .lps-ttl{margin-left:6px;font-family:var(--font-mono);font-size:10.5px;color:var(--ink-3);letter-spacing:.04em}
.lps-body{padding:18px 16px;min-height:188px;display:flex;flex-direction:column;gap:10px}
/* faux-UI atoms used by the per-station screens */
.lps-body .row{display:flex;align-items:center;gap:10px;font-size:12.5px;color:var(--ink-2);
  opacity:0;transform:translateY(6px);animation:lpIn .42s var(--ease) forwards}
.lps-body .row .ic{flex:none;width:30px;height:30px;border-radius:9px;display:grid;place-items:center;font-size:15px;background:rgba(255,255,255,.04);border:1px solid var(--line)}
.lps-body .row .gr{flex:1;display:flex;flex-direction:column;gap:4px}
.lps-body .row .gr b{color:var(--ink-1);font-size:12.5px;font-weight:700}
.lps-body .row .gr .bar{height:6px;border-radius:6px;background:rgba(255,255,255,.06);overflow:hidden}
.lps-body .row .gr .bar i{display:block;height:100%;border-radius:6px;background:var(--grad-flow)}
.lps-body .row .tag{font-family:var(--font-mono);font-size:10px;padding:3px 8px;border-radius:var(--r-pill);font-weight:700}
.lps-body .tag.ok{background:var(--emerald-dim);color:var(--emerald)} .lps-body .tag.go{background:var(--sapphire-dim);color:var(--sapphire)}
.lps-body .tag.warn{background:var(--gold-dim);color:var(--gold)} .lps-body .tag.amt{background:var(--amethyst-dim);color:var(--amethyst)}
.lps-body .big{font-size:26px;font-weight:800;color:var(--ink-1);letter-spacing:-.02em}
.lps-body .mono{font-family:var(--font-mono);font-size:11px;color:var(--emerald);letter-spacing:.04em}
.lps-body .label-chip{margin-top:auto;display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:10px 12px;border-radius:10px;background:rgba(255,255,255,.03);border:1px dashed var(--line-2)}
.lps-body .label-chip .bc{display:flex;gap:2px;align-items:flex-end;height:26px}
.lps-body .label-chip .bc i{width:2px;background:var(--ink-2);display:block}

/* ============================================================================
   WHAT'S LIVE — feature grid
   ========================================================================== */
#live{background:linear-gradient(180deg,transparent,rgba(35,200,168,.045) 24%,rgba(35,200,168,.045) 76%,transparent)}
.live-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:46px}
@media(max-width:960px){.live-grid{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.live-grid{grid-template-columns:1fr}}
.lcard{position:relative;background:var(--pan);border:1px solid var(--line);border-radius:var(--r-lg);padding:24px;transition:var(--med);overflow:hidden}
.lcard:hover{transform:translateY(-5px);border-color:var(--line-2);box-shadow:var(--sh-md)}
.lc-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
.lcard .ic{width:50px;height:50px;border-radius:14px;display:grid;place-items:center;font-size:25px;border:1px solid var(--line-2)}
.lcard h3{font-size:18px;margin-bottom:8px;color:var(--ink-1)}
.lcard p{font-size:14px;color:var(--ink-2);line-height:1.6}
.lcard p b{color:var(--ink-1);font-weight:700}
.badge{font-family:var(--font-mono);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;font-weight:700;padding:4px 10px;border-radius:var(--r-pill)}
.badge.live{color:var(--emerald);background:var(--emerald-dim);border:1px solid rgba(35,200,168,.28)}
.ic.blue{background:var(--sapphire-dim)} .ic.grape{background:var(--amethyst-dim)} .ic.mint{background:var(--emerald-dim)}
.ic.gold{background:var(--gold-dim)} .ic.rose{background:var(--rose-dim)}

/* ============================================================================
   WHAT'S NEXT — roadmap grid
   ========================================================================== */
.road-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:46px}
@media(max-width:980px){.road-grid{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.road-grid{grid-template-columns:1fr}}
.road{position:relative;background:var(--pan);border:1px solid var(--line);border-radius:var(--r-lg);padding:22px;transition:var(--med);overflow:hidden}
.road::after{content:"";position:absolute;inset:0;border-radius:var(--r-lg);padding:1px;background:linear-gradient(140deg,rgba(155,107,255,.32),transparent 55%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;opacity:0;transition:var(--med)}
.road:hover{transform:translateY(-4px);box-shadow:var(--sh-md)} .road:hover::after{opacity:1}
.road .ic{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;font-size:22px;background:rgba(255,255,255,.03);border:1px solid var(--line-2);margin-bottom:13px}
.road h3{font-size:16.5px;margin-bottom:7px;color:var(--ink-1)}
.road p{font-size:13.5px;color:var(--ink-2);line-height:1.55}
.road i{font-style:italic;color:var(--ink-1)}
.road .rtag{display:inline-block;margin-top:13px;font-family:var(--font-mono);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--amethyst);background:var(--amethyst-dim);border-radius:var(--r-pill);padding:4px 10px;font-weight:700}

/* ============================================================================
   CTA / WAITLIST + FOOTER
   ========================================================================== */
#waitlist{position:relative}
.cta-card{position:relative;border-radius:var(--r-xl);padding:62px 40px;text-align:center;overflow:hidden;
  background:linear-gradient(135deg,var(--pan-2),rgba(91,139,255,.1) 45%,rgba(155,107,255,.12));
  border:1px solid var(--line-2);box-shadow:var(--sh-lg)}
.cta-card .blob{position:absolute;border-radius:50%;filter:blur(60px);opacity:.4}
.cta-card .blob.a{width:300px;height:300px;left:-70px;top:-80px;background:var(--sapphire);animation:drift 13s ease-in-out infinite}
.cta-card .blob.b{width:340px;height:340px;right:-80px;bottom:-90px;background:var(--amethyst);animation:drift 16s ease-in-out infinite reverse}
.cta-card h2{position:relative;font-size:clamp(30px,5vw,52px);color:var(--ink-1)}
.cta-card .lead{position:relative;margin:18px auto 0;color:var(--ink-2)}
.notify{position:relative;display:flex;gap:10px;max-width:520px;margin:30px auto 0;flex-wrap:wrap;justify-content:center}
.notify input{flex:1;min-width:240px;background:rgba(7,10,22,.6);border:1px solid var(--line-2);color:var(--ink-1);
  padding:15px 18px;border-radius:var(--r-pill);font-size:15px;font-family:inherit}
.notify input::placeholder{color:var(--ink-faint)}
.notify input:focus{outline:none;border-color:var(--sapphire);box-shadow:0 0 0 3px rgba(91,139,255,.18)}
.notify button{background:var(--grad-jewel);color:#fff;border:0;padding:15px 26px;border-radius:var(--r-pill);font-weight:700;cursor:pointer;font-size:15px;font-family:inherit;box-shadow:0 14px 34px -14px rgba(155,107,255,.7);transition:var(--med)}
.notify button:hover{transform:translateY(-2px)}
.notify button:disabled{opacity:.85;cursor:default;transform:none}
/* WAITLIST STATUS LINE (2026-08-04). The form used to have no way to say anything except
   "you're on the list", which it said whether or not that was true. This is where the real
   outcome goes. Empty by default and it takes no vertical space until it has something to
   say, so the card is pixel-identical to today's until a submit actually happens. */
.cta-card .notify-note{position:relative;margin-top:12px;font-family:var(--font-mono);
  font-size:12px;letter-spacing:.03em;line-height:1.45;min-height:0;color:var(--ink-3)}
.cta-card .notify-note:empty{display:none}
.cta-card .notify-note[data-kind="good"]{color:#4ade80}
/* Failure is deliberately legible rather than alarming: this fires for a typo'd address as
   often as for a real outage, and the visitor's next move is the same either way. */
.cta-card .notify-note[data-kind="bad"]{color:#fbbf24}
.cta-card .fine{position:relative;margin-top:18px;font-family:var(--font-mono);font-size:11.5px;letter-spacing:.05em;color:var(--ink-3)}

.foot{padding:56px 0 44px;border-top:1px solid var(--line);margin-top:30px}
.foot .wrap{display:flex;flex-wrap:wrap;gap:26px;align-items:flex-start;justify-content:space-between}
.foot .brand{font-size:16px}
.foot .cols{display:flex;gap:40px;flex-wrap:wrap}
.foot .col h5{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-faint);font-family:var(--font-mono);margin-bottom:11px}
.foot .col a{display:block;font-size:13.5px;color:var(--ink-3);padding:3px 0;transition:var(--fast)}
.foot .col a:hover{color:var(--ink-1)}
.foot .legal{width:100%;text-align:center;margin-top:32px;color:var(--ink-faint);font-size:12px;font-family:var(--font-mono);letter-spacing:.03em;line-height:1.7}

/* Candy Shop Labs — portfolio brand badge (additive) */
.css-badge{width:max-content;max-width:100%;margin:22px auto 0;display:flex;align-items:center;gap:14px;
  padding:12px 20px;border:1px solid var(--line);border-radius:var(--r-pill,999px);background:var(--pan,#10162b);
  text-decoration:none;transition:border-color var(--fast,.16s) ease,box-shadow var(--fast,.16s) ease}
.css-badge:hover{border-color:var(--amethyst,#9b6bff);box-shadow:var(--glow-grape)}
.css-badge img{display:block;flex:none}
.css-badge-txt{display:flex;flex-direction:column;gap:2px;text-align:left;line-height:1.3}
.css-badge-txt b{font-size:12.5px;font-weight:800;color:var(--ink-1)}
.css-badge-txt em{font-size:11.5px;font-style:normal;color:var(--ink-3)}
@media (max-width:480px){.css-badge{flex-direction:column;gap:10px;text-align:center}.css-badge-txt{align-items:center;text-align:center}}

/* ============================================================================
   reduced motion
   ========================================================================== */
@media(prefers-reduced-motion:reduce){
  *{animation-duration:.001s!important;animation-iteration-count:1!important;transition-duration:.001s!important;scroll-behavior:auto}
  .rise{opacity:1;transform:none}
  .cv-card{transition:none}
  .lp-points li,.lps-body .row{opacity:1;transform:none;animation:none}
}