/* ============================================================
   UnderstandStock — marketing site
   Dark, premium, calm. Forest-green + teal over near-black teal.
   Grounded in the UnderstandStock iOS design system.
   ============================================================ */

/* ---------- Fonts ----------
   SF Pro is the native iOS face but is not web-distributable; the design
   system specifies the Apple system stack with Inter as the licensed
   non-Apple fallback. Apple devices render true SF Pro; others get Inter. */

/* ---------- Tokens ---------- */
:root{
  --bg:        #001212;
  --bg-grad:   #001b1a;
  --card:      #001e1d;
  --card-2:    #00211f;
  --raised:    #042927;
  --border:    #0c3a37;
  --border-soft:#072c2a;
  --hair:      rgba(120,200,180,.10);

  --accent:    #15b021;   /* forest green (dark mode brand) */
  --accent-press:#0f8a19;
  --mint:      #3ddc97;   /* mint highlight / glow */
  --teal:      #45bdbb;   /* lochinvar */
  --teal-deep: #0a8a86;   /* blue-stone */
  --gold:      #f0c246;

  --text:      #f3f8f6;
  --text-2:    #b3c8c2;
  --text-3:    #779a90;
  --text-4:    #527067;

  --pos:       #2fb84b;
  --neg:       #e85d4a;

  --display:'SF Pro Display', -apple-system, BlinkMacSystemFont, 'Inter', system-ui, sans-serif;
  --text-font:'SF Pro Text', -apple-system, BlinkMacSystemFont, 'Inter', system-ui, sans-serif;
  --mono: ui-monospace,'SF Mono', Menlo, Consolas, monospace;

  --maxw: 1200px;
  --pad: clamp(20px, 5vw, 48px);
  --r-sm: 10px;
  --r:    14px;
  --r-lg: 20px;
  --r-xl: 28px;
  --shadow: 0 1px 2px rgba(0,0,0,.4);
  --shadow-pop: 0 24px 60px -20px rgba(0,0,0,.7);
  --glow-primary: rgba(18,80,48,.55);
  --glow-accent:  rgba(61,220,151,.10);
}

/* ---------- Reset ---------- */
*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }
body{
  margin:0; background:var(--bg); color:var(--text);
  font-family:var(--text-font); font-size:17px; line-height:1.55;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img,svg{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; cursor:pointer; }
::selection{ background:rgba(61,220,151,.28); color:#fff; }

/* ---------- Layout ---------- */
.wrap{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--pad); }
.section{ position:relative; padding-block:clamp(72px,9vw,128px); }
.section--tight{ padding-block:clamp(48px,6vw,80px); }
.section .wrap{ position:relative; z-index:2; }

/* animated shader backdrop (problem section) */
.section--shader{ overflow:hidden; }
.section-shader{
  position:absolute; inset:0; width:100%; height:100%; z-index:0;
  display:block; pointer-events:none; opacity:.85;
  -webkit-mask-image:linear-gradient(180deg, transparent, #000 18%, #000 78%, transparent);
  mask-image:linear-gradient(180deg, transparent, #000 18%, #000 78%, transparent);
}

/* ---------- Type ---------- */
.eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--text-font); font-size:12.5px; font-weight:600;
  letter-spacing:.13em; text-transform:uppercase; color:var(--mint);
}
.eyebrow::before{ content:""; width:6px; height:6px; border-radius:50%; background:var(--mint); box-shadow:0 0 12px var(--mint); }
.eyebrow--plain::before{ display:none; }

/* hero eyebrow — pill with sparkle + glow */
.eyebrow-pill{
  display:inline-flex; align-items:center; gap:9px; height:34px; padding:0 15px 0 11px;
  border-radius:999px; font-family:var(--text-font); font-size:12.5px; font-weight:600;
  letter-spacing:.11em; text-transform:uppercase; color:var(--mint);
  background:linear-gradient(180deg, rgba(61,220,151,.10), rgba(61,220,151,.04));
  border:1px solid rgba(61,220,151,.24);
  box-shadow:0 0 0 1px rgba(0,0,0,.2) inset, 0 6px 20px -10px rgba(61,220,151,.5);
  position:relative; overflow:hidden;
}
.eyebrow-pill::after{
  content:""; position:absolute; top:0; left:-60%; width:45%; height:100%;
  background:linear-gradient(100deg, transparent, rgba(150,255,210,.22), transparent);
  transform:skewX(-18deg); animation:ep-sheen 5.5s ease-in-out infinite;
}
@keyframes ep-sheen{ 0%,72%{ left:-60%; } 88%,100%{ left:130%; } }
.eyebrow-pill .ep-ic{ display:grid; place-items:center; width:18px; height:18px; border-radius:50%; background:rgba(61,220,151,.16); color:var(--mint); flex-shrink:0; }
.eyebrow-pill .ep-ic svg{ width:12px; height:12px; animation:ep-spin 9s linear infinite; }
@keyframes ep-spin{ to{ transform:rotate(360deg); } }
@media (prefers-reduced-motion: reduce){ .eyebrow-pill::after, .eyebrow-pill .ep-ic svg{ animation:none; } }

h1,h2,h3,h4{ font-family:var(--display); margin:0; color:var(--text); }
.display{ font-weight:700; font-size:clamp(40px, 6.4vw, 76px); line-height:1.02; letter-spacing:-.028em; text-wrap:balance; }
.h2{ font-weight:600; font-size:clamp(30px, 4.2vw, 50px); line-height:1.06; letter-spacing:-.02em; text-wrap:balance; }
.h3{ font-weight:600; font-size:clamp(21px, 2.2vw, 26px); line-height:1.18; letter-spacing:-.012em; }
.lead{ font-size:clamp(17px,1.55vw,21px); line-height:1.55; color:var(--text-2); text-wrap:pretty; }
.muted{ color:var(--text-3); }
.section-head{ max-width:760px; }
.section-head .h2{ margin-top:16px; }
.section-head .lead{ margin-top:20px; }
.center{ text-align:center; margin-inline:auto; }

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  height:52px; padding:0 24px; border-radius:var(--r-sm);
  font-family:var(--text-font); font-weight:600; font-size:16px; letter-spacing:.005em;
  border:1px solid transparent; white-space:nowrap;
  transition:transform .14s ease, background .18s ease, border-color .18s ease, box-shadow .18s ease, opacity .18s;
}
.btn svg{ width:18px; height:18px; }
.btn-primary{ background:var(--accent); color:#021207; box-shadow:0 1px 0 rgba(255,255,255,.18) inset, 0 8px 26px -10px rgba(21,176,33,.7); }
.btn-primary:hover{ background:#19c127; box-shadow:0 1px 0 rgba(255,255,255,.22) inset, 0 12px 34px -10px rgba(21,176,33,.85); transform:translateY(-1px); }
.btn-primary:active{ transform:scale(.985); background:var(--accent-press); }
.btn-secondary{ background:rgba(255,255,255,.04); color:var(--text); border-color:var(--border); }
.btn-secondary:hover{ background:rgba(255,255,255,.07); border-color:#155a52; transform:translateY(-1px); }
.btn-ghost{ background:transparent; color:var(--text-2); height:auto; padding:0; }
.btn-ghost:hover{ color:var(--text); }
.btn-sm{ height:42px; padding:0 18px; font-size:15px; }
.btn-lg{ height:58px; padding:0 30px; font-size:17px; }
.arrow-link{ display:inline-flex; align-items:center; gap:7px; color:var(--mint); font-weight:600; font-size:15px; }
.arrow-link svg{ width:16px; height:16px; transition:transform .18s ease; }
.arrow-link:hover svg{ transform:translateX(3px); }

/* ---------- Chips / badges ---------- */
.chip{
  display:inline-flex; align-items:center; gap:7px; height:30px; padding:0 13px;
  border-radius:999px; background:rgba(61,220,151,.07); border:1px solid rgba(61,220,151,.16);
  color:var(--mint); font-size:13px; font-weight:600; letter-spacing:.01em;
}
.tag{
  display:inline-flex; align-items:center; gap:6px; height:26px; padding:0 11px; border-radius:999px;
  background:rgba(255,255,255,.045); border:1px solid var(--border); color:var(--text-2);
  font-size:12.5px; font-weight:500; font-family:var(--text-font);
}
.ticker{ font-family:var(--mono); font-weight:600; letter-spacing:-.01em; }
.pos{ color:var(--pos); } .neg{ color:var(--neg); }

/* ---------- Glows ---------- */
.hero-wave{ position:absolute; inset:0; width:100%; height:100%; z-index:0; pointer-events:none; display:block; opacity:.9;
  -webkit-mask-image:linear-gradient(180deg, rgba(0,0,0,.32) 0%, rgba(0,0,0,.5) 34%, #000 66%, #000 100%);
  mask-image:linear-gradient(180deg, rgba(0,0,0,.32) 0%, rgba(0,0,0,.5) 34%, #000 66%, #000 100%); }
.glow{ position:absolute; pointer-events:none; border-radius:50%; filter:blur(20px); z-index:0; }
.glow-hero{
  width:120vw; max-width:1500px; height:760px; left:50%; top:-280px; transform:translateX(-50%);
  background:radial-gradient(closest-side, var(--glow-primary), rgba(18,80,48,.16) 45%, transparent 72%);
  filter:blur(36px);
}
.glow-mint{
  width:520px; height:520px; right:-80px; top:-120px;
  background:radial-gradient(closest-side, var(--glow-accent), transparent 70%);
}
.glow-soft{
  width:760px; height:520px; left:50%; top:0; transform:translateX(-50%);
  background:radial-gradient(closest-side, rgba(18,80,48,.30), transparent 70%); filter:blur(50px);
}

/* ============================================================
   NAV
   ============================================================ */
.nav{
  position:sticky; top:0; z-index:100;
  border-bottom:1px solid transparent; transition:background .25s ease, border-color .25s ease, backdrop-filter .25s;
}
.nav.scrolled{
  background:rgba(0,16,16,.72); border-bottom-color:var(--border-soft);
  -webkit-backdrop-filter:saturate(160%) blur(18px); backdrop-filter:saturate(160%) blur(18px);
}
.nav-inner{ display:flex; align-items:center; gap:32px; height:72px; }
.brand{ display:flex; align-items:center; gap:10px; flex-shrink:0; }
.brand img{ height:23px; width:auto; }
.brand .wm{ height:23px; width:auto; display:block; }
.nav-links{ display:flex; align-items:center; gap:30px; margin-inline:auto; }
.nav-links a{ color:var(--text-2); font-size:15px; font-weight:500; transition:color .15s; }
.nav-links a:hover{ color:var(--text); }
.nav-cta{ display:flex; align-items:center; gap:18px; flex-shrink:0; }
.nav-link-cta{ display:inline-flex; align-items:center; gap:6px; color:var(--mint); font-size:15px; font-weight:600; letter-spacing:.005em; transition:color .15s; }
.nav-link-cta svg{ width:15px; height:15px; transition:transform .18s ease; }
.nav-link-cta:hover{ color:#7df0bd; }
.nav-link-cta:hover svg{ transform:translateX(3px); }
.nav-toggle{ display:none; }

/* ============================================================
   HERO
   ============================================================ */
.hero{ position:relative; padding-top:clamp(40px,6vw,72px); padding-bottom:clamp(60px,7vw,96px); overflow:hidden; }
.hero-copy{ max-width:560px; }
.hero h1{ margin-top:22px; }
.hero .lead{ margin-top:24px; max-width:520px; }
.display .hl{ background:linear-gradient(180deg,#88f3c6,var(--mint)); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.hero-cta{ display:flex; align-items:center; gap:14px; margin-top:34px; flex-wrap:wrap; }

/* ============================================================
   SOURCE STRIP
   ============================================================ */
.strip{ border-block:1px solid var(--border-soft); background:rgba(255,255,255,.012); }
.strip-inner{ display:flex; flex-direction:column; align-items:center; gap:18px; padding-block:30px; text-align:center; }
.strip-label{ font-size:12px; color:var(--text-3); font-weight:600; letter-spacing:.1em; text-transform:uppercase; }
.strip-count{ color:var(--mint); font-variant-numeric:tabular-nums; font-feature-settings:"tnum"; letter-spacing:.04em; }
.strip-and{ color:var(--text-3); }
.strip-items{ display:flex; align-items:center; justify-content:center; gap:clamp(18px,3.2vw,44px); flex-wrap:wrap; }
.strip-item{ display:flex; align-items:center; gap:9px; color:var(--text-2); font-size:15px; font-weight:500; white-space:nowrap; }
.strip-item svg{ width:18px; height:18px; color:var(--teal); }

/* ============================================================
   PAIN
   ============================================================ */
.pain-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; margin-top:56px; }
.pain-card{
  position:relative; padding:26px 22px 24px; border-radius:var(--r);
  background:linear-gradient(180deg, rgba(2,20,18,.72), rgba(2,16,15,.82));
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  border:1px solid var(--border-soft); overflow:hidden; transition:border-color .2s, transform .2s, background .2s;
}
.pain-card:hover{ border-color:var(--border); transform:translateY(-2px); background:linear-gradient(180deg, rgba(3,26,23,.78), rgba(2,18,16,.86)); }
.pain-ic{ width:42px; height:42px; border-radius:11px; background:rgba(232,93,74,.10); border:1px solid rgba(232,93,74,.18); display:grid; place-items:center; margin-bottom:18px; }
.pain-ic svg{ width:21px; height:21px; color:#ef8674; }
.pain-card h3{ font-size:18px; margin-bottom:8px; }
.pain-card p{ margin:0; font-size:14.5px; color:var(--text-3); line-height:1.5; }

/* ============================================================
   WORKFLOW
   ============================================================ */
.wf{ display:grid; grid-template-columns:0.82fr 1fr; gap:clamp(32px,5vw,60px); margin-top:56px; align-items:start; }

/* explained steps */
.wf-steps{ position:sticky; top:90px; align-self:start; display:flex; flex-direction:column; gap:8px; padding-top:4px; }
.wf-rail{ position:absolute; left:23px; top:34px; bottom:34px; width:2px; background:linear-gradient(180deg, transparent, var(--border) 8%, var(--border) 92%, transparent); }
.wf-step{ position:relative; display:grid; grid-template-columns:48px 1fr; gap:16px; padding:14px 0; align-items:start; }
.wf-num{
  position:relative; z-index:1; width:48px; height:48px; border-radius:50%; display:grid; place-items:center;
  background:radial-gradient(circle at 30% 30%, #06302d, var(--card)); border:1px solid var(--border);
  font-family:var(--display); font-weight:600; font-size:18px; color:var(--mint);
  box-shadow:0 0 0 6px var(--bg), 0 8px 22px -12px rgba(0,0,0,.7);
}
.wf-step-body{ padding-top:3px; }
.wf-step-body h3{ font-size:18px; letter-spacing:-.01em; margin-bottom:7px; }
.wf-step-body p{ margin:0; font-size:14px; color:var(--text-3); line-height:1.55; }

/* composed mockup */
.wf-mock{
  position:relative; border:1px solid var(--border); border-radius:var(--r-lg); overflow:hidden;
  background:linear-gradient(180deg, var(--card-2), var(--card)); box-shadow:var(--shadow-pop);
}
.wf-stage{ padding:16px 18px; }
.wf-stage-tag{ display:flex; align-items:center; gap:8px; font-size:11px; font-weight:600; letter-spacing:.07em; text-transform:uppercase; color:var(--text-4); margin-bottom:12px; }
.wf-live{ display:inline-flex; align-items:center; gap:5px; color:var(--mint); letter-spacing:.04em; }
.wf-live::before{ content:""; width:6px; height:6px; border-radius:50%; background:var(--mint); box-shadow:0 0 8px var(--mint); animation:wf-pulse 1.4s ease-in-out infinite; }
@keyframes wf-pulse{ 50%{ opacity:.35; } }

.wf-flowmark{ display:flex; justify-content:center; padding:2px 0; }
.wf-flowmark svg{ width:18px; height:18px; color:var(--text-4); }

/* stage 1 — question */
.wf-ask{ display:flex; align-items:center; gap:11px; height:52px; padding:0 8px 0 15px; background:#021e1c; border:1px solid var(--border); border-radius:var(--r-sm); }
.wf-ask-ic{ width:18px; height:18px; color:var(--text-3); flex-shrink:0; }
.wf-ask-q{ flex:1; min-width:0; font-size:14.5px; color:var(--text); }
.wf-ask-go{ display:inline-flex; align-items:center; gap:6px; height:36px; padding:0 14px; border-radius:8px; background:var(--accent); color:#021207; font-size:13.5px; font-weight:600; flex-shrink:0; }
.wf-ask-go svg{ width:14px; height:14px; }

/* stage 2 — progress */
.wf-prog{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:4px; }
.wf-prog li{ display:flex; align-items:center; gap:11px; padding:9px 11px; border-radius:9px; border:1px solid transparent; font-size:13.5px; color:var(--text-3); }
.wf-prog li.done{ color:var(--text-2); }
.wf-prog li.active{ color:var(--text); background:rgba(61,220,151,.06); border-color:rgba(61,220,151,.16); }
.wf-prog-ic{ width:18px; height:18px; flex-shrink:0; color:var(--teal); }
.wf-prog-ic svg{ width:100%; height:100%; }
.wf-prog li.done .wf-prog-ic{ color:var(--mint); }
.wf-prog-t{ flex:1; min-width:0; }
.wf-prog-m{ font-size:12px; color:var(--text-4); font-family:var(--mono); }
.wf-prog-wait{ font-style:normal; }
.wf-prog-ck{ width:16px; height:16px; color:var(--mint); flex-shrink:0; }
.wf-prog-ck svg{ width:100%; height:100%; }
.wf-prog-sp{ width:14px; height:14px; border:2px solid rgba(61,220,151,.25); border-top-color:var(--mint); border-radius:50%; flex-shrink:0; animation:wf-spin .7s linear infinite; }
@keyframes wf-spin{ to{ transform:rotate(360deg); } }

/* stage 3 — cited brief */
.wf-brief{ border:1px solid var(--border-soft); border-radius:var(--r); overflow:hidden; background:rgba(255,255,255,.012); }
.wf-brief-hd{ display:flex; align-items:center; gap:11px; padding:13px 14px; border-bottom:1px solid var(--border-soft); position:relative; }
.wf-brief-hd::before{ content:""; position:absolute; inset:0; background:linear-gradient(90deg, rgba(21,176,33,.10), rgba(69,189,187,.04) 60%, transparent); pointer-events:none; }
.wf-brief-logo{ width:36px; height:36px; border-radius:9px; background:#0a1a14; border:1px solid var(--border); display:grid; place-items:center; font-family:var(--display); font-weight:700; font-size:13px; color:var(--mint); flex-shrink:0; position:relative; z-index:1; }
.wf-brief-meta{ flex:1; min-width:0; position:relative; z-index:1; }
.wf-brief-title{ font-family:var(--display); font-weight:600; font-size:14.5px; color:var(--text); }
.wf-brief-sub{ font-size:12px; color:var(--text-3); margin-top:1px; }
.wf-brief-pill{ position:relative; z-index:1; display:inline-flex; align-items:center; gap:5px; height:24px; padding:0 10px; border-radius:999px; background:rgba(61,220,151,.10); border:1px solid rgba(61,220,151,.2); color:var(--mint); font-size:11px; font-weight:600; flex-shrink:0; }
.wf-brief-pill svg{ width:11px; height:11px; }
.wf-seg{ padding:12px 14px; border-bottom:1px solid var(--border-soft); }
.wf-seg:last-child{ border-bottom:0; }
.wf-seg-lab{ display:block; font-size:10.5px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--mint); margin-bottom:6px; }
.wf-seg p{ margin:0; font-size:13.5px; line-height:1.5; color:var(--text-2); }
.wf-cite{ display:inline-flex; align-items:center; margin-left:6px; height:17px; padding:0 7px; border-radius:5px; background:rgba(69,189,187,.12); border:1px solid rgba(69,189,187,.22); color:var(--teal); font-size:10.5px; font-weight:600; white-space:nowrap; vertical-align:middle; }
.wf-mini-metrics{ display:flex; flex-wrap:wrap; gap:7px; }
.wf-mini{ display:inline-flex; align-items:baseline; gap:5px; padding:6px 9px; border-radius:8px; border:1px solid var(--border-soft); background:rgba(255,255,255,.02); font-size:11.5px; color:var(--text-3); }
.wf-mini b{ font-family:var(--display); font-weight:600; font-size:13px; color:var(--text); }

/* stage 4 — destinations */
.wf-dest{ display:grid; grid-template-columns:repeat(2,1fr); gap:8px; }
.wf-dest-card{ display:flex; align-items:center; gap:10px; padding:11px 12px; border-radius:10px; border:1px solid var(--border-soft); background:rgba(255,255,255,.02); transition:border-color .18s, background .18s; }
.wf-dest-card:hover{ border-color:var(--border); background:rgba(61,220,151,.05); }
.wf-dest-card:nth-child(5){ grid-column:1 / -1; }
.wf-dest-ic{ width:32px; height:32px; border-radius:8px; background:rgba(61,220,151,.09); border:1px solid rgba(61,220,151,.16); display:grid; place-items:center; flex-shrink:0; color:var(--mint); }
.wf-dest-ic svg{ width:16px; height:16px; }
.wf-dest-card b{ display:block; font-size:13.5px; font-weight:600; color:var(--text); }
.wf-dest-card span{ font-size:12px; color:var(--text-4); }

/* ============================================================
   USE CASES
   ============================================================ */
.uc-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:56px; }
.uc-card{
  position:relative; padding:28px 26px; border-radius:var(--r);
  background:linear-gradient(180deg, var(--card-2), var(--card)); border:1px solid var(--border-soft);
  overflow:hidden; transition:border-color .2s, transform .2s, box-shadow .2s;
}
.uc-card::after{ content:""; position:absolute; inset:0; border-radius:inherit; background:radial-gradient(120% 80% at 100% 0%, rgba(61,220,151,.06), transparent 60%); opacity:0; transition:opacity .25s; pointer-events:none; }
.uc-card:hover{ border-color:var(--border); transform:translateY(-3px); box-shadow:var(--shadow-pop); }
.uc-card:hover::after{ opacity:1; }
.uc-ic{ width:46px; height:46px; border-radius:12px; background:rgba(61,220,151,.08); border:1px solid rgba(61,220,151,.16); display:grid; place-items:center; margin-bottom:20px; }
.uc-ic svg{ width:23px; height:23px; color:var(--mint); }
.uc-card h3{ font-size:19px; margin-bottom:10px; letter-spacing:-.01em; }
.uc-card p{ margin:0; font-size:14.5px; color:var(--text-3); line-height:1.55; }

/* ============================================================
   SIGNAL split
   ============================================================ */
.split{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(36px,5vw,72px); align-items:center; }
.signal-panel{ position:relative; border-radius:var(--r-lg); border:1px solid var(--border); background:linear-gradient(180deg, var(--card-2), var(--card)); padding:22px; box-shadow:var(--shadow-pop); }
.insg-head{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:2px 4px 15px; border-bottom:1px solid var(--border-soft); margin-bottom:6px; }
.insg-badge{ display:inline-flex; align-items:center; gap:8px; font-size:13px; font-weight:600; color:var(--text-2); }
.insg-badge svg{ width:15px; height:15px; color:var(--mint); }
.insg-badge .ticker{ color:var(--mint); }
.insg-cited{ display:inline-flex; align-items:center; gap:5px; height:24px; padding:0 10px; border-radius:999px; background:rgba(61,220,151,.10); border:1px solid rgba(61,220,151,.2); color:var(--mint); font-size:11px; font-weight:600; flex-shrink:0; }
.insg-cited svg{ width:11px; height:11px; }
.insg-row{ display:flex; gap:13px; padding:14px 4px; border-bottom:1px solid var(--border-soft); }
.insg-row:last-child{ border-bottom:0; padding-bottom:2px; }
.insg-tag{ flex-shrink:0; align-self:flex-start; display:inline-flex; align-items:center; justify-content:center; min-width:96px; font-size:10.5px; font-weight:600; letter-spacing:.04em; text-transform:uppercase; padding:5px 10px; border-radius:999px; white-space:nowrap; }
.insg-tag.ok{ background:rgba(61,220,151,.12); color:var(--mint); }
.insg-tag.open{ background:rgba(69,189,187,.12); color:var(--teal); }
.insg-main{ flex:1; min-width:0; display:flex; align-items:baseline; gap:8px; flex-wrap:wrap; }
.insg-main p{ margin:0; font-size:14px; line-height:1.45; color:var(--text-2); flex:1; min-width:0; }
.insg-src{ flex-shrink:0; height:18px; display:inline-flex; align-items:center; padding:0 7px; border-radius:5px; background:rgba(69,189,187,.10); border:1px solid rgba(69,189,187,.22); color:var(--teal); font-size:10.5px; font-weight:600; }
.feat-list{ list-style:none; margin:28px 0 0; padding:0; display:grid; grid-template-columns:1fr 1fr; gap:14px 24px; }
.feat-list li{ display:flex; align-items:center; gap:10px; font-size:14.5px; color:var(--text-2); }
.feat-list li svg{ width:17px; height:17px; color:var(--mint); flex-shrink:0; }

/* ============================================================
   EXAMPLE NOTEBOOK
   ============================================================ */
.nb-shell{
  position:relative; margin-top:52px; border-radius:var(--r-xl); overflow:hidden;
  border:1px solid var(--border); background:linear-gradient(180deg, var(--card-2), var(--bg));
  box-shadow:var(--shadow-pop);
}

/* top bar: tabs + read/edit */
.nb-topbar{ display:flex; align-items:center; justify-content:space-between; gap:16px; padding:11px 16px; border-bottom:1px solid var(--border-soft); background:rgba(255,255,255,.012); }
.nb-crumb{ display:flex; align-items:center; gap:9px; min-width:0; font-size:13.5px; color:var(--text-3); overflow:hidden; white-space:nowrap; }
.nb-crumb svg{ width:15px; height:15px; color:var(--mint); flex-shrink:0; }
.nb-crumb-sep{ color:var(--text-4); }
.nb-crumb-cur{ color:var(--text); font-weight:600; min-width:0; overflow:hidden; text-overflow:ellipsis; }
.nb-mode{ flex-shrink:0; display:inline-flex; padding:3px; border-radius:9px; border:1px solid var(--border-soft); background:rgba(0,0,0,.2); }
.nb-mode-opt{ display:inline-flex; align-items:center; gap:6px; padding:5px 11px; border-radius:7px; font-size:13px; font-weight:600; color:var(--text-3); }
.nb-mode-opt svg{ width:14px; height:14px; }
.nb-mode-opt.active{ background:var(--raised); color:var(--text); }

/* body: tab rail + document + AI panel */
.nb-body{ display:grid; grid-template-columns:212px 1fr 320px; gap:1px; background:var(--border-soft); }
.nb-doc{ background:var(--bg); padding:clamp(22px,3vw,34px); min-width:0; }
.nb-ai{ background:linear-gradient(180deg, rgba(61,220,151,.03), transparent 38%), var(--card); padding:clamp(20px,2.4vw,26px); display:flex; flex-direction:column; min-width:0; }

/* left rail: notebook tabs + table of contents */
.nb-rail{ background:var(--card); padding:18px 16px; min-width:0; }
.nb-rail-lab{ font-size:10.5px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--text-4); margin-bottom:10px; }
.nb-rail-tabs{ display:flex; flex-direction:column; gap:3px; margin-bottom:24px; }
.nb-tab{ padding:8px 11px; border-radius:8px; font-size:13px; font-weight:500; color:var(--text-3); border:1px solid transparent; }
.nb-tab.active{ color:var(--text); background:rgba(61,220,151,.08); border-color:rgba(61,220,151,.18); }
.nb-tab.add{ display:inline-flex; align-items:center; gap:6px; color:var(--text-4); }
.nb-tab.add svg{ width:13px; height:13px; }
.nb-toc{ list-style:none; margin:0; padding:0; counter-reset:none; display:flex; flex-direction:column; gap:11px; }
.nb-toc li{ display:flex; gap:9px; font-size:12px; line-height:1.4; color:var(--text-3); }
.nb-toc-n{ flex-shrink:0; width:16px; height:16px; border-radius:5px; background:rgba(255,255,255,.04); color:var(--text-4); font-size:10px; font-weight:600; display:grid; place-items:center; margin-top:1px; }
.nb-toc li:first-child{ color:var(--text-2); }
.nb-toc li:first-child .nb-toc-n{ background:rgba(61,220,151,.12); color:var(--mint); }

/* stock header */
.nb-stock{ display:flex; align-items:center; gap:14px; padding-bottom:20px; margin-bottom:22px; border-bottom:1px solid var(--border-soft); }
.nb-logo{ width:48px; height:48px; border-radius:12px; background:#0a1a14; border:1px solid var(--border); display:grid; place-items:center; flex-shrink:0; font-family:var(--display); font-weight:700; font-size:17px; color:var(--mint); }
.nb-stock-meta{ flex:1; min-width:0; }
.nb-stock-name{ font-family:var(--display); font-weight:600; font-size:18px; color:var(--text); }
.nb-stock-name .ticker{ color:var(--mint); margin-right:7px; }
.nb-stock-chips{ display:flex; gap:7px; margin-top:6px; }
.nb-chip{ height:22px; display:inline-flex; align-items:center; padding:0 9px; border-radius:6px; border:1px solid var(--border-soft); background:rgba(255,255,255,.02); font-size:11.5px; color:var(--text-3); }
.nb-price{ text-align:right; flex-shrink:0; }
.nb-price-lab{ font-size:11px; color:var(--text-4); margin-bottom:2px; }
.nb-pv{ font-family:var(--display); font-weight:600; font-size:20px; color:var(--text); }
.nb-pc{ font-size:13px; font-weight:600; margin-top:1px; }
.nb-pc.pos{ color:var(--pos); }

/* document text + inline citations */
.nb-h{ font-size:clamp(20px,2.2vw,25px); letter-spacing:-.015em; margin-bottom:16px; }
.nb-p{ margin:0 0 16px; font-size:15px; line-height:1.62; color:var(--text-2); }
.nb-p b{ color:var(--text); font-weight:600; }
.nb-cite-n{ color:var(--teal); font-weight:600; font-size:11px; padding-left:1px; }

/* embedded financial metric tiles */
.nb-metrics{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin:22px 0 4px; }
.nb-metric{ padding:13px 14px; border-radius:11px; border:1px solid var(--border-soft); background:rgba(255,255,255,.018); }
.nb-metric-k{ display:block; font-size:11.5px; color:var(--text-3); margin-bottom:6px; }
.nb-metric-v{ display:block; font-family:var(--display); font-weight:600; font-size:19px; color:var(--text); letter-spacing:-.01em; }

/* second section heading */
.nb-h2{ margin-top:28px; font-size:clamp(18px,1.9vw,21px); }

/* embedded chart */
.nb-chart{ margin-top:18px; padding:14px 15px; border-radius:12px; border:1px solid var(--border-soft); background:rgba(255,255,255,.015); }
.nb-chart-hd{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:8px; }
.nb-chart-title{ font-size:11.5px; font-weight:600; letter-spacing:.05em; text-transform:uppercase; color:var(--text-3); }
.nb-chart-legend{ display:flex; gap:13px; }
.nb-chart-legend .lg{ display:inline-flex; align-items:center; gap:6px; font-size:11.5px; color:var(--text-3); }
.nb-chart-legend .lg::before{ content:""; width:9px; height:9px; border-radius:2px; }
.nb-chart-legend .lg.amd::before{ background:var(--mint); }
.nb-chart-legend .lg.intc::before{ background:var(--teal); }
.nb-chart-svg{ width:100%; height:auto; display:block; }
.nb-bar-amd{ fill:var(--mint); }
.nb-bar-intc{ fill:var(--teal); }
.nb-chart-base{ stroke:var(--border); stroke-width:1; }
.nb-chart-x{ fill:var(--text-4); font-size:11px; text-anchor:middle; }

/* "continues" indicator */
.nb-more{ display:flex; align-items:center; justify-content:center; gap:9px; margin-top:24px; padding-top:20px; border-top:1px dashed var(--border); font-size:12.5px; color:var(--text-3); text-align:center; }
.nb-more svg{ width:15px; height:15px; color:var(--text-4); flex-shrink:0; }

/* citations list */
.nb-cites{ margin-top:24px; padding-top:18px; border-top:1px solid var(--border-soft); }
.nb-cites-lab{ font-size:11px; font-weight:600; letter-spacing:.07em; text-transform:uppercase; color:var(--text-4); margin-bottom:12px; }
.nb-cite-list{ margin:0; padding-left:18px; display:flex; flex-direction:column; gap:9px; font-size:13px; color:var(--text-3); }
.nb-cite-list li{ line-height:1.45; }
.nb-cite-link{ color:var(--teal); text-decoration:underline; text-underline-offset:2px; text-decoration-color:rgba(69,189,187,.4); }

/* AI assistant panel */
.nb-ai-head{ display:flex; align-items:center; gap:9px; font-family:var(--display); font-weight:600; font-size:15px; color:var(--text); padding-bottom:16px; margin-bottom:16px; border-bottom:1px solid var(--border-soft); }
.nb-ai-spark{ display:grid; place-items:center; width:26px; height:26px; border-radius:8px; background:rgba(61,220,151,.10); border:1px solid rgba(61,220,151,.18); color:var(--mint); flex-shrink:0; }
.nb-ai-spark svg{ width:15px; height:15px; }
.nb-ai-q{ align-self:flex-end; max-width:92%; font-size:13.5px; line-height:1.5; color:var(--text); padding:11px 14px; margin-bottom:12px; border-radius:13px 13px 4px 13px; background:rgba(255,255,255,.05); border:1px solid var(--border-soft); }
.nb-ai-msg{ font-size:14px; line-height:1.6; color:var(--text-2); padding:14px 16px; border-radius:13px 13px 13px 4px; border:1px solid rgba(61,220,151,.14); background:rgba(61,220,151,.05); }
.nb-ai-msg b{ color:var(--text); font-weight:600; }
.nb-ai-refs{ display:flex; flex-wrap:wrap; gap:7px; margin-top:14px; }
.nb-ai-ref{ display:inline-flex; align-items:center; height:24px; padding:0 10px; border-radius:999px; border:1px solid var(--border-soft); background:rgba(255,255,255,.02); font-size:12px; color:var(--text-3); }
.nb-ai-ref .ticker{ color:var(--mint); }
.nb-ai-input{ display:flex; align-items:center; gap:9px; margin-top:auto; padding-top:18px; }
.nb-ai-input > span:first-child{ flex:1; min-width:0; height:42px; display:flex; align-items:center; padding:0 14px; border-radius:10px; border:1px solid var(--border-soft); background:rgba(0,0,0,.22); color:var(--text-4); font-size:14px; }
.nb-kbd{ flex-shrink:0; height:42px; display:inline-flex; align-items:center; padding:0 11px; border-radius:9px; border:1px solid var(--border-soft); background:rgba(0,0,0,.2); color:var(--text-4); font-size:13px; font-family:var(--mono); }

/* footer */
.nb-foot{ display:flex; align-items:center; justify-content:space-between; gap:16px; padding:16px clamp(22px,3vw,32px); border-top:1px solid var(--border-soft); background:rgba(255,255,255,.012); flex-wrap:wrap; }
.nb-foot-src{ font-size:13px; color:var(--text-3); }

@media (max-width:1080px){
  .nb-body{ grid-template-columns:1fr 300px; }
  .nb-rail{ display:none; }
}
@media (max-width:720px){
  .nb-body{ grid-template-columns:1fr; }
  .nb-metrics{ grid-template-columns:1fr 1fr; }
}

/* ============================================================
   PLATFORMS
   ============================================================ */
.platforms{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:52px; }
.plat-card{ border:1px solid var(--border-soft); border-radius:var(--r-lg); background:linear-gradient(180deg, var(--card-2), var(--card)); padding:22px; transition:border-color .2s, transform .2s; }
.plat-card:hover{ border-color:var(--border); transform:translateY(-3px); }
.plat-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:18px; }
.plat-head .pt{ display:flex; align-items:center; gap:10px; font-weight:600; font-size:16px; }
.plat-head .pt svg{ width:18px; height:18px; color:var(--mint); }
.plat-shot{ border-radius:12px; overflow:hidden; border:1px solid var(--border); background:#02110f; }
.plat-shot img{ width:100%; height:300px; object-fit:cover; object-position:top; }
.plat-placeholder{
  display:grid; place-items:center; height:300px;
  background:radial-gradient(120% 130% at 50% 0%, #06302d, #021a18 72%);
}
.plat-placeholder img, .plat-placeholder svg{ width:44px; height:44px; opacity:.16; }

/* ============================================================
   LEVERAGE / quote
   ============================================================ */
.lev{ position:relative; border-radius:var(--r-xl); border:1px solid var(--border); overflow:hidden; padding:clamp(40px,6vw,72px) clamp(28px,5vw,64px); background:linear-gradient(135deg, #032420, #021a18 60%); }
.lev .lead{ max-width:680px; }
.lev-stats{ display:flex; gap:clamp(28px,5vw,64px); margin-top:40px; flex-wrap:wrap; }
.lev-stat .v{ font-family:var(--display); font-weight:700; font-size:clamp(34px,4vw,48px); letter-spacing:-.02em; background:linear-gradient(180deg,#fff,var(--mint)); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.lev-stat .k{ color:var(--text-3); font-size:14px; margin-top:6px; }

/* ============================================================
   FINAL CTA
   ============================================================ */
.final{ position:relative; text-align:center; overflow:hidden; }
.final .h2{ margin-bottom:20px; }
.final .lead{ max-width:580px; margin-inline:auto; }
.final-cta{ display:flex; align-items:center; justify-content:center; gap:14px; margin-top:36px; flex-wrap:wrap; }
.final-note{ margin-top:20px; color:var(--text-4); font-size:13px; }

/* ============================================================
   FOOTER
   ============================================================ */
.footer{ border-top:1px solid var(--border-soft); padding-block:56px 40px; }
.footer-top{ display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; gap:32px; }
.footer-brand img{ height:24px; margin-bottom:18px; }
.footer-brand .wm{ height:24px; width:auto; display:block; margin-bottom:18px; }
.footer-brand p{ color:var(--text-3); font-size:14px; max-width:280px; line-height:1.55; margin:0; }
.foot-col h5{ font-family:var(--text-font); font-size:12px; font-weight:600; letter-spacing:.07em; text-transform:uppercase; color:var(--text-4); margin:0 0 16px; }
.foot-col a{ display:block; color:var(--text-2); font-size:14.5px; margin-bottom:11px; transition:color .15s; }
.foot-col a:hover{ color:var(--text); }
.footer-bottom{ display:flex; align-items:flex-start; justify-content:space-between; gap:24px; margin-top:48px; padding-top:26px; border-top:1px solid var(--border-soft); flex-wrap:wrap; }
.disclaimer{ max-width:680px; color:var(--text-4); font-size:12.5px; line-height:1.6; }
.footer-bottom .copy{ color:var(--text-4); font-size:13px; white-space:nowrap; }

/* reveal-on-scroll */
.reveal{ opacity:0; transform:translateY(20px); transition:opacity .7s ease, transform .7s cubic-bezier(.2,.7,.3,1); }
.reveal.in{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){ .reveal{ opacity:1; transform:none; transition:none; } }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1080px){
  .pain-grid{ grid-template-columns:repeat(2,1fr); }
  .uc-grid{ grid-template-columns:repeat(2,1fr); }
  .platforms{ grid-template-columns:1fr; max-width:520px; }
}
@media (max-width:880px){
  .hero-grid{ grid-template-columns:1fr; gap:44px; }
  .hero-copy{ max-width:640px; }
  .split{ grid-template-columns:1fr; gap:40px; }
  .wf{ grid-template-columns:1fr; gap:36px; }
  .wf-steps{ position:static; }
  .nav-links{ display:none; }
  .nav-toggle{ display:inline-flex; }
  .footer-top{ grid-template-columns:1fr 1fr; gap:28px; }
  .footer-brand{ grid-column:1 / -1; }
}
@media (max-width:560px){
  .pain-grid,.uc-grid{ grid-template-columns:1fr; }
  .strip-items{ gap:18px; }
  .nav-cta .btn-secondary{ display:none; }
  .nav-inner{ gap:14px; }
  .nav-cta{ gap:12px; }
  .brand .wm{ height:18px; }
  .nav-link-cta, .nav-cta .btn-ghost{ font-size:14px; }
  .footer-top{ grid-template-columns:1fr; }
  .nb-price{ display:none; }
}

/* ============================================================
   HERO v2 — type-led, switchable directions
   ============================================================ */
.hero-inner{ display:grid; gap:clamp(30px,4vw,52px); position:relative; z-index:2; }

/* layout per direction */
body[data-herostyle="editorial"] .hero-inner,
body[data-herostyle="showcase"] .hero-inner{ grid-template-columns:1fr; max-width:880px; margin-inline:auto; text-align:center; justify-items:center; }
body[data-herostyle="split"] .hero-inner{ grid-template-columns:1.04fr .96fr; align-items:center; text-align:left; gap:clamp(32px,4vw,64px); }

.hero-copy{ max-width:560px; }
body[data-herostyle="editorial"] .hero-copy,
body[data-herostyle="showcase"] .hero-copy{ max-width:840px; }

.hero h1{ margin-top:22px; }
.hero .lead{ margin-top:22px; max-width:600px; }
body[data-herostyle="editorial"] .hero .lead,
body[data-herostyle="showcase"] .hero .lead{ margin-inline:auto; max-width:640px; }
body[data-herostyle="showcase"] .display{ font-size:clamp(34px,4.8vw,58px); }

/* bigger, more confident display in editorial */
body[data-herostyle="editorial"] .display{ font-size:clamp(40px,5.4vw,68px); letter-spacing:-.032em; line-height:1.0; }
body[data-herostyle="split"] .display{ font-size:clamp(33px,3.9vw,50px); letter-spacing:-.022em; line-height:1.05; }

.hero-cta{ display:flex; align-items:center; gap:14px; margin-top:34px; flex-wrap:wrap; }
body[data-herostyle="editorial"] .hero-cta,
body[data-herostyle="showcase"] .hero-cta{ justify-content:center; }

.hero-trust{ display:flex; align-items:center; gap:11px; margin-top:30px; flex-wrap:wrap; color:var(--text-3); font-size:13px; }
body[data-herostyle="editorial"] .hero-trust,
body[data-herostyle="showcase"] .hero-trust{ justify-content:center; }
.hero-trust .ht-label{ color:var(--text-4); }
.hero-trust .ht-item{ color:var(--text-2); font-weight:500; }
.hero-trust .ht-dot{ width:3px; height:3px; border-radius:50%; background:var(--text-4); }

/* hero-demo holds the video player across all hero directions */
.hero-demo{ width:100%; display:flex; justify-content:center; }
.hero-brief{ display:block; width:100%; max-width:680px; margin-inline:auto; }

/* ---- Hero video player ---- */
.video-frame{
  position:relative; width:100%; aspect-ratio:16/9; margin:0; overflow:hidden;
  border-radius:var(--r-lg); border:1px solid var(--border);
  background:radial-gradient(120% 130% at 50% 0%, #06302d, #021a18 72%);
  box-shadow:var(--shadow-pop);
}
.demo-video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; background:#02110f; }
/* YouTube player sits hidden behind the poster + overlay until play is clicked */
.video-frame iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; opacity:0; pointer-events:none; transition:opacity .3s ease; }
.video-frame.is-playing iframe{ opacity:1; pointer-events:auto; }
.video-frame.is-playing #demoVideo{ opacity:0; pointer-events:none; }

/* On play, grow the video inline by widening its container */
.hero-brief{ transition:max-width .45s cubic-bezier(.16,1,.3,1); }
.hero-brief:has(.video-frame.is-playing){ max-width:min(94vw, 1080px); }
.video-overlay{
  position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px;
  background:
    radial-gradient(60% 55% at 50% 56%, rgba(0,12,11,.62), transparent 75%),
    linear-gradient(180deg, rgba(0,20,18,.34), rgba(0,15,14,.6));
  border:0; cursor:pointer; color:var(--text);
  transition:opacity .35s ease;
}
.video-overlay.hidden{ opacity:0; pointer-events:none; }
.vo-glow{ position:absolute; width:260px; height:260px; border-radius:50%; background:radial-gradient(closest-side, rgba(61,220,151,.20), transparent 70%); filter:blur(8px); pointer-events:none; }
.vo-badge{ position:absolute; top:16px; left:16px; display:inline-flex; align-items:center; gap:7px; height:28px; padding:0 12px; border-radius:999px; background:rgba(0,0,0,.32); border:1px solid var(--border); color:var(--mint); font-size:12px; font-weight:600; -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); }
.vo-badge svg{ width:13px; height:13px; }
.vo-play{ position:relative; width:76px; height:76px; border-radius:50%; background:var(--accent); display:grid; place-items:center; box-shadow:0 14px 44px -10px rgba(21,176,33,.75), 0 1px 0 rgba(255,255,255,.2) inset; transition:transform .16s ease, background .16s; }
.vo-play svg{ width:30px; height:30px; color:#021207; margin-left:5px; }
.video-overlay:hover .vo-play{ transform:scale(1.06); background:#19c127; }
.video-overlay:active .vo-play{ transform:scale(.98); }
.vo-text{ position:relative; margin-top:6px; font-family:var(--display); font-weight:600; font-size:18px; letter-spacing:-.01em; text-shadow:0 1px 12px rgba(0,0,0,.6); }
.vo-time{ position:relative; font-size:13px; color:var(--text-2); text-shadow:0 1px 10px rgba(0,0,0,.55); }

@media (max-width:980px){
  .hero-brief{ max-width:560px; }
}

/* ============================================================
   FLASH (Rails flash messages, e.g. redirects back to root)
   ============================================================ */
.flash-stack{ position:fixed; top:84px; left:50%; transform:translateX(-50%); z-index:200; display:flex; flex-direction:column; gap:8px; width:min(92vw,560px); }
.flash{
  padding:12px 18px; border-radius:var(--r-sm); font-size:14.5px; text-align:center;
  background:var(--raised); border:1px solid var(--border); color:var(--text);
  box-shadow:var(--shadow-pop); animation:flash-in .3s ease;
}
.flash-alert{ border-color:rgba(232,93,74,.4); color:#f3a193; }
.flash-notice{ border-color:rgba(61,220,151,.35); color:var(--mint); }
@keyframes flash-in{ from{ opacity:0; transform:translateY(-8px); } }