/* ============================================================
   Greenlight — design system
   Type:  Schibsted Grotesk (display) · Hanken Grotesk (body) · JetBrains Mono (data)
   Mood:  Credible · confident · data-driven · clean
   ============================================================ */

:root{
  /* base surfaces */
  --bg:        #ffffff;
  --bg-soft:   #f3f7f4;
  --bg-mute:   #e9efeb;

  /* ink — deep charcoal-navy */
  --ink:       #0d1a16;
  --ink-2:     #2c3a35;
  --ink-3:     #5f6d67;
  --ink-4:     #8a958f;
  --line:      #e4ebe6;
  --line-2:    #d4ddd7;

  /* greenlight cue */
  --green:        #14a05a;
  --green-strong: #0d8a49;
  --green-deep:   #0a5e33;
  --green-50:     #e8f6ed;
  --green-100:    #cdeed8;
  --go:           #19c576;   /* vivid verdict green */

  /* hero / dark surface */
  --hero-bg:   #07150e;

  /* restrained data-viz palette */
  --viz-rev:   #14a05a;   /* revenue / positive */
  --viz-navy:  #163b50;   /* deep navy series  */
  --viz-cost:  #c8922b;   /* cost / amber      */
  --viz-mute:  #a6bcb1;   /* neutral           */

  /* radii + shadow */
  --r-sm: 8px;
  --r:    12px;
  --r-lg: 18px;
  --r-xl: 26px;
  --sh-1: 0 1px 2px rgba(13,26,22,.05), 0 1px 1px rgba(13,26,22,.04);
  --sh-2: 0 4px 14px rgba(13,26,22,.06), 0 1px 3px rgba(13,26,22,.05);
  --sh-3: 0 18px 48px rgba(13,26,22,.12), 0 4px 12px rgba(13,26,22,.07);
  --sh-float: 0 30px 70px rgba(7,21,14,.45), 0 8px 24px rgba(7,21,14,.30);

  /* type */
  --f-display: "Schibsted Grotesk", system-ui, sans-serif;
  --f-body:    "Hanken Grotesk", system-ui, sans-serif;
  --f-mono:    "JetBrains Mono", ui-monospace, monospace;

  --maxw: 1200px;
  --gutter: clamp(20px, 5vw, 56px);
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  margin:0;
  font-family:var(--f-body);
  color:var(--ink);
  background:var(--bg);
  line-height:1.55;
  font-size:17px;
  letter-spacing:-.005em;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img,svg,video{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; cursor:pointer; border:none; background:none; }
h1,h2,h3,h4{ font-family:var(--f-display); font-weight:700; line-height:1.04; letter-spacing:-.03em; margin:0; color:var(--ink); }
p{ margin:0; }
::selection{ background:var(--green-100); color:var(--green-deep); }

/* ---------- layout helpers ---------- */
.wrap{ max-width:var(--maxw); margin:0 auto; padding-inline:var(--gutter); }
.section{ padding-block:clamp(72px,9vw,124px); }
.eyebrow{
  font-family:var(--f-mono);
  font-size:12.5px; font-weight:600;
  letter-spacing:.16em; text-transform:uppercase;
  color:var(--green-strong);
  display:inline-flex; align-items:center; gap:9px;
}
.eyebrow::before{ content:""; width:18px; height:1.5px; background:var(--green); display:inline-block; }
.eyebrow.center::before{ display:none; }
.s-head{ max-width:660px; }
.s-head.center{ margin-inline:auto; text-align:center; }
.s-title{ font-size:clamp(30px,4vw,46px); margin-top:18px; text-wrap:balance; }
.s-sub{ color:var(--ink-3); font-size:clamp(17px,1.4vw,19px); margin-top:18px; max-width:560px; }
.s-head.center .s-sub{ margin-inline:auto; }

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  font-family:var(--f-body); font-weight:600; font-size:15.5px;
  padding:13px 22px; border-radius:var(--r);
  letter-spacing:-.01em; white-space:nowrap;
  transition:transform .18s ease, box-shadow .22s ease, background .18s ease, color .18s ease, border-color .18s ease;
}
.btn-primary{ background:var(--green); color:#fff; box-shadow:0 1px 2px rgba(10,94,51,.4), inset 0 1px 0 rgba(255,255,255,.18); }
.btn-primary:hover{ background:var(--green-strong); transform:translateY(-1px); box-shadow:0 10px 26px rgba(13,138,73,.34); }
.btn-ghost{ background:transparent; color:var(--ink); border:1px solid var(--line-2); }
.btn-ghost:hover{ border-color:var(--ink-3); background:var(--bg-soft); transform:translateY(-1px); }
.btn-onvid{ background:rgba(255,255,255,.10); color:#fff; border:1px solid rgba(255,255,255,.28); backdrop-filter:blur(8px); }
.btn-onvid:hover{ background:rgba(255,255,255,.18); transform:translateY(-1px); }
.btn-lg{ padding:16px 28px; font-size:16.5px; }
.btn .ar{ transition:transform .2s ease; }
.btn:hover .ar{ transform:translateX(3px); }

/* ---------- nav ---------- */
.nav{
  position:fixed; inset:0 0 auto 0; z-index:80;
  transition:background .3s ease, box-shadow .3s ease, border-color .3s ease;
  border-bottom:1px solid transparent;
}
.nav-inner{ display:flex; align-items:center; gap:28px; height:72px; }
.brand{ display:flex; align-items:center; gap:11px; font-family:var(--f-display); font-weight:700; font-size:20px; letter-spacing:-.03em; color:#fff; transition:color .3s ease; }
.nav.solid .brand{ color:var(--ink); }
.brand .mark{ width:30px; height:30px; flex:none; }
.nav-links{ display:flex; gap:30px; margin-left:14px; }
.nav-links a{ font-size:15px; font-weight:500; color:rgba(255,255,255,.82); transition:color .2s ease; }
.nav-links a:hover{ color:#fff; }
.nav.solid .nav-links a{ color:var(--ink-2); }
.nav.solid .nav-links a:hover{ color:var(--green-strong); }
.nav-right{ margin-left:auto; display:flex; align-items:center; gap:18px; }
.nav-login{ font-size:15px; font-weight:600; color:rgba(255,255,255,.9); }
.nav.solid .nav-login{ color:var(--ink); }
.nav.solid{ background:rgba(255,255,255,.86); backdrop-filter:saturate(1.4) blur(14px); border-bottom-color:var(--line); box-shadow:0 1px 0 rgba(13,26,22,.03); }
.nav-burger{ display:none; }

/* ---------- hero ---------- */
.hero{ position:relative; min-height:100svh; display:flex; align-items:center; overflow:hidden; background:var(--hero-bg); isolation:isolate; }
.hero-video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:-3; }
.hero-scrim{ position:absolute; inset:0; z-index:-2;
  background:
    linear-gradient(100deg, rgba(5,16,11,.94) 0%, rgba(5,16,11,.80) 32%, rgba(5,16,11,.40) 62%, rgba(5,16,11,.12) 100%);
}
.hero-scrim-2{ position:absolute; inset:0; z-index:-1;
  background:
    linear-gradient(180deg, rgba(5,16,11,.55) 0%, rgba(5,16,11,0) 22%, rgba(5,16,11,0) 70%, rgba(5,16,11,.55) 100%);
}
.hero .wrap{ width:100%; padding-block:120px 64px; display:grid; grid-template-columns:1.05fr .95fr; gap:56px; align-items:center; }
.hero-copy{ max-width:600px; }
.hero-badge{
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--f-mono); font-size:12.5px; font-weight:600; letter-spacing:.12em; text-transform:uppercase;
  color:#bff3d2; padding:7px 14px 7px 11px; border-radius:100px;
  background:rgba(25,197,118,.12); border:1px solid rgba(25,197,118,.34);
}
.hero-badge .dot{ width:8px; height:8px; border-radius:50%; background:var(--go); box-shadow:0 0 0 4px rgba(25,197,118,.22); animation:pulse 2.4s ease-in-out infinite; }
@keyframes pulse{ 0%,100%{ box-shadow:0 0 0 3px rgba(25,197,118,.30);} 50%{ box-shadow:0 0 0 8px rgba(25,197,118,0);} }
.hero h1{ color:#fff; font-size:clamp(40px,5.6vw,68px); font-weight:800; margin-top:24px; letter-spacing:-.04em; }
.hero h1 .accent{ color:var(--go); }
.hero-sub{ color:rgba(231,243,237,.82); font-size:clamp(17px,1.5vw,20px); margin-top:24px; max-width:520px; line-height:1.5; }
.hero-cta{ display:flex; gap:14px; margin-top:36px; flex-wrap:wrap; }
.hero-meta{ display:flex; align-items:center; gap:18px; margin-top:30px; color:rgba(231,243,237,.62); font-size:13.5px; }
.hero-meta .sep{ width:1px; height:14px; background:rgba(255,255,255,.22); }
.hero-meta b{ color:rgba(231,243,237,.9); font-weight:600; }

/* floating report card in hero */
.report-card{
  position:relative; background:#fff; border-radius:var(--r-xl); box-shadow:var(--sh-float);
  padding:22px; width:100%; max-width:430px; margin-left:auto;
  border:1px solid rgba(255,255,255,.6);
  animation:floaty 7s ease-in-out infinite;
}
@keyframes floaty{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-12px); } }
.rc-top{ display:flex; align-items:flex-start; justify-content:space-between; gap:12px; }
.rc-title{ font-family:var(--f-display); font-weight:700; font-size:17px; letter-spacing:-.02em; }
.rc-meta{ font-family:var(--f-mono); font-size:11px; color:var(--ink-4); letter-spacing:.04em; margin-top:3px; }
.go-badge{
  display:inline-flex; flex-direction:column; align-items:center; justify-content:center;
  width:74px; height:74px; border-radius:18px; flex:none;
  background:linear-gradient(160deg,var(--go),var(--green-strong));
  color:#fff; box-shadow:0 10px 24px rgba(13,138,73,.4), inset 0 1px 0 rgba(255,255,255,.4);
}
.go-badge .v{ font-family:var(--f-display); font-weight:800; font-size:24px; letter-spacing:.02em; line-height:1; }
.go-badge .l{ font-family:var(--f-mono); font-size:8.5px; letter-spacing:.18em; margin-top:4px; opacity:.92; }
.rc-row{ display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:18px; }
.rc-stat{ background:var(--bg-soft); border:1px solid var(--line); border-radius:var(--r); padding:12px 13px; }
.rc-stat .k{ font-family:var(--f-mono); font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-4); }
.rc-stat .val{ font-family:var(--f-display); font-weight:700; font-size:22px; margin-top:4px; letter-spacing:-.02em; }
.rc-stat .val small{ font-size:13px; color:var(--ink-3); font-weight:600; }
.rc-chart{ margin-top:14px; background:var(--bg-soft); border:1px solid var(--line); border-radius:var(--r); padding:14px 14px 8px; }
.rc-chart .lab{ display:flex; justify-content:space-between; font-family:var(--f-mono); font-size:10px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-4); margin-bottom:6px; }

/* mini bar chart */
.bars{ display:flex; align-items:flex-end; gap:7px; height:74px; }
.bars .bar{ flex:1; border-radius:5px 5px 2px 2px; background:linear-gradient(180deg,var(--green),var(--green-strong)); transform-origin:bottom; transition:transform .9s cubic-bezier(.2,.7,.2,1); }
html.reveal-armed .bars .bar{ transform:scaleY(.04); }
html.reveal-armed .in-view .bars .bar{ transform:scaleY(1); }

/* ---------- trust strip ---------- */
.trust{ border-top:1px solid var(--line); border-bottom:1px solid var(--line); background:var(--bg-soft); }
.trust .wrap{ padding-block:30px; display:flex; align-items:center; gap:40px; flex-wrap:wrap; justify-content:center; }
.trust-label{ font-family:var(--f-mono); font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-4); }
.trust-row{ display:flex; align-items:center; gap:38px; flex-wrap:wrap; justify-content:center; }
.trust-item{ display:flex; align-items:center; gap:9px; color:var(--ink-3); font-weight:600; font-size:15px; opacity:.72; transition:opacity .2s ease; }
.trust-item:hover{ opacity:1; }
.trust-item svg{ width:20px; height:20px; color:var(--ink-3); }

/* ---------- problem→promise ---------- */
.promise{ background:var(--bg); }
.promise .wrap{ max-width:980px; text-align:center; }
.promise p{ font-family:var(--f-display); font-weight:600; font-size:clamp(26px,3.4vw,40px); line-height:1.22; letter-spacing:-.03em; text-wrap:balance; }
.promise .muted{ color:var(--ink-4); }
.promise .hl{ color:var(--green-strong); position:relative; white-space:nowrap; }
.promise-row{ display:flex; gap:0; justify-content:center; margin-top:54px; flex-wrap:wrap; border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden; }
.promise-cell{ flex:1; min-width:200px; padding:26px 30px; border-right:1px solid var(--line); }
.promise-cell:last-child{ border-right:none; }
.promise-cell .big{ font-family:var(--f-display); font-weight:800; font-size:34px; letter-spacing:-.03em; }
.promise-cell.bad .big{ color:var(--ink-3); }
.promise-cell.good .big{ color:var(--green-strong); }
.promise-cell .cap{ font-size:13.5px; color:var(--ink-3); margin-top:5px; }
.promise-cell .strike{ text-decoration:line-through; text-decoration-color:var(--ink-4); }

/* ---------- feature grid (what's in every study) ---------- */
.feat-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:56px; }
.feat{ background:var(--bg); border:1px solid var(--line); border-radius:var(--r-lg); padding:28px 26px; transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease; }
.feat:hover{ transform:translateY(-3px); box-shadow:var(--sh-2); border-color:var(--line-2); }
.feat .ico{ width:46px; height:46px; border-radius:12px; display:grid; place-items:center; background:var(--green-50); color:var(--green-strong); margin-bottom:18px; }
.feat .ico svg{ width:23px; height:23px; }
.feat .num{ font-family:var(--f-mono); font-size:11px; color:var(--ink-4); letter-spacing:.1em; float:right; }
.feat h3{ font-size:19.5px; letter-spacing:-.02em; }
.feat p{ color:var(--ink-3); font-size:15px; margin-top:9px; }

/* ---------- use cases (tabs) ---------- */
.usecases{ background:var(--bg-soft); border-block:1px solid var(--line); }
.uc-tabs{ display:flex; gap:8px; margin-top:42px; flex-wrap:wrap; }
.uc-tab{ display:inline-flex; align-items:center; gap:9px; padding:11px 17px; border-radius:100px; font-weight:600; font-size:15px; color:var(--ink-3); border:1px solid var(--line-2); background:var(--bg); transition:all .2s ease; }
.uc-tab svg{ width:17px; height:17px; }
.uc-tab:hover{ border-color:var(--ink-4); color:var(--ink); }
.uc-tab.active{ background:var(--ink); color:#fff; border-color:var(--ink); }
.uc-tab.active svg{ color:var(--go); }
.uc-panel{ display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:center; margin-top:38px; background:var(--bg); border:1px solid var(--line); border-radius:var(--r-xl); padding:44px; box-shadow:var(--sh-1); }
.uc-body{ opacity:0; transform:translateY(8px); transition:opacity .35s ease, transform .35s ease; }
.uc-body.show{ opacity:1; transform:none; }
.uc-kicker{ font-family:var(--f-mono); font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:var(--green-strong); }
.uc-body h3{ font-size:clamp(24px,2.6vw,32px); margin-top:12px; }
.uc-body p{ color:var(--ink-3); margin-top:14px; font-size:16.5px; }
.uc-points{ list-style:none; padding:0; margin:22px 0 0; display:grid; gap:11px; }
.uc-points li{ display:flex; gap:11px; align-items:flex-start; font-size:15px; color:var(--ink-2); }
.uc-points li svg{ width:19px; height:19px; color:var(--green); flex:none; margin-top:2px; }
.uc-visual{ aspect-ratio:4/3.2; border-radius:var(--r-lg); background:var(--bg-soft); border:1px solid var(--line); padding:22px; display:flex; flex-direction:column; }

/* ---------- how it works ---------- */
.steps{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:56px; counter-reset:step; }
.step{ position:relative; padding:30px 26px; border-radius:var(--r-lg); border:1px solid var(--line); background:var(--bg); }
.step .n{ font-family:var(--f-display); font-weight:800; font-size:15px; width:40px; height:40px; border-radius:11px; background:var(--ink); color:#fff; display:grid; place-items:center; letter-spacing:0; }
.step h3{ font-size:21px; margin-top:20px; letter-spacing:-.02em; }
.step p{ color:var(--ink-3); font-size:15px; margin-top:10px; }
.step .arrow{ position:absolute; top:48px; right:-30px; color:var(--line-2); z-index:2; }
.step:last-child .arrow{ display:none; }

/* ---------- sample output ---------- */
.sample{ background:var(--ink); color:#fff; position:relative; overflow:hidden; }
.sample::before{ content:""; position:absolute; inset:0; background:radial-gradient(900px 500px at 78% 8%, rgba(25,197,118,.16), transparent 60%); }
.sample .wrap{ position:relative; }
.sample .eyebrow{ color:var(--go); }
.sample .eyebrow::before{ background:var(--go); }
.sample .s-title{ color:#fff; }
.sample .s-sub{ color:rgba(231,243,237,.7); }
.sample-grid{ display:grid; grid-template-columns:1fr 1fr; gap:40px; align-items:center; margin-top:52px; }
.report-spread{ position:relative; }
.sheet{ background:#fff; color:var(--ink); border-radius:14px; box-shadow:var(--sh-3); }
.sheet-back{ position:absolute; inset:18px -14px -16px 22px; background:#f4f7f5; border-radius:14px; box-shadow:var(--sh-3); z-index:0; }
.sheet-main{ position:relative; z-index:1; padding:26px; }
.sheet-hd{ display:flex; align-items:center; justify-content:space-between; padding-bottom:16px; border-bottom:1px solid var(--line); }
.sheet-hd .t{ font-family:var(--f-display); font-weight:700; font-size:15px; }
.sheet-hd .t small{ display:block; font-family:var(--f-mono); font-size:10px; color:var(--ink-4); letter-spacing:.06em; font-weight:400; margin-top:3px; }
.verdict-pill{ display:inline-flex; align-items:center; gap:7px; font-family:var(--f-mono); font-size:11px; font-weight:700; letter-spacing:.1em; color:var(--green-deep); background:var(--green-50); border:1px solid var(--green-100); padding:6px 11px; border-radius:100px; }
.verdict-pill .d{ width:7px; height:7px; border-radius:50%; background:var(--go); }
.sheet-charts{ display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:18px; }
.mini{ border:1px solid var(--line); border-radius:10px; padding:13px; }
.mini .ct{ font-family:var(--f-mono); font-size:9.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-4); }
.mini .cv{ font-family:var(--f-display); font-weight:700; font-size:20px; margin-top:2px; letter-spacing:-.02em; }
.sample-side h3{ color:#fff; font-size:clamp(24px,2.6vw,30px); }
.sample-side .row{ display:flex; gap:14px; margin-top:24px; align-items:flex-start; }
.sample-side .row .ic{ width:38px; height:38px; border-radius:10px; background:rgba(25,197,118,.15); color:var(--go); display:grid; place-items:center; flex:none; }
.sample-side .row .ic svg{ width:19px; height:19px; }
.sample-side .row h4{ font-family:var(--f-display); font-weight:600; font-size:16.5px; color:#fff; }
.sample-side .row p{ color:rgba(231,243,237,.62); font-size:14.5px; margin-top:3px; }

/* ---------- stats band ---------- */
.statsband{ background:var(--green); color:#fff; position:relative; overflow:hidden; }
.statsband::after{ content:""; position:absolute; inset:0; background:linear-gradient(120deg, rgba(10,94,51,.45), transparent 55%); }
.statsband .wrap{ position:relative; display:grid; grid-template-columns:repeat(3,1fr); gap:28px; padding-block:64px; }
.statcol{ text-align:center; }
.statcol .num{ font-family:var(--f-display); font-weight:800; font-size:clamp(44px,6vw,68px); letter-spacing:-.04em; line-height:1; }
.statcol .lab{ font-size:15.5px; color:rgba(255,255,255,.88); margin-top:12px; }
.statcol + .statcol{ border-left:1px solid rgba(255,255,255,.22); }

/* ---------- testimonials ---------- */
.tgrid{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:54px; }
.tcard{ background:var(--bg); border:1px solid var(--line); border-radius:var(--r-lg); padding:30px 28px; display:flex; flex-direction:column; }
.tcard .quote{ font-size:17px; line-height:1.5; color:var(--ink-2); letter-spacing:-.01em; }
.tcard .quote::before{ content:"“"; font-family:var(--f-display); font-size:46px; line-height:0; color:var(--green-100); display:block; height:22px; }
.tcard .who{ display:flex; align-items:center; gap:13px; margin-top:auto; padding-top:24px; }
.tcard .av{ width:44px; height:44px; border-radius:50%; flex:none; display:grid; place-items:center; font-family:var(--f-display); font-weight:700; color:#fff; font-size:16px; }
.tcard .who .nm{ font-weight:700; font-size:15px; }
.tcard .who .rl{ font-size:13px; color:var(--ink-3); }

/* ---------- pricing ---------- */
.pricing{ background:var(--bg-soft); border-block:1px solid var(--line); }
.toggle{ display:inline-flex; align-items:center; gap:12px; margin:30px auto 0; padding:5px; background:var(--bg); border:1px solid var(--line-2); border-radius:100px; }
.toggle button{ padding:9px 20px; border-radius:100px; font-weight:600; font-size:14.5px; color:var(--ink-3); transition:all .2s ease; }
.toggle button.active{ background:var(--ink); color:#fff; }
.toggle .save{ font-family:var(--f-mono); font-size:10.5px; letter-spacing:.06em; color:var(--green-strong); background:var(--green-50); padding:3px 8px; border-radius:100px; margin-left:4px; }
.pgrid{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:48px; align-items:start; }
.plan{ background:var(--bg); border:1px solid var(--line); border-radius:var(--r-xl); padding:32px 28px; position:relative; transition:transform .2s ease, box-shadow .2s ease; }
.plan.feature{ border-color:var(--green); box-shadow:0 16px 40px rgba(20,160,90,.16); transform:scale(1.025); }
.plan.feature::before{ content:"Most popular"; position:absolute; top:-13px; left:50%; transform:translateX(-50%); font-family:var(--f-mono); font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:#fff; background:var(--green); padding:5px 14px; border-radius:100px; }
.plan .pname{ font-family:var(--f-display); font-weight:700; font-size:18px; }
.plan .pdesc{ color:var(--ink-3); font-size:14px; margin-top:6px; min-height:40px; }
.plan .price{ font-family:var(--f-display); font-weight:800; font-size:46px; letter-spacing:-.04em; margin-top:14px; }
.plan .price small{ font-size:16px; color:var(--ink-3); font-weight:600; letter-spacing:0; }
.plan .price .per{ font-family:var(--f-body); }
.plan .btn{ width:100%; margin-top:22px; }
.plan ul{ list-style:none; padding:0; margin:26px 0 0; display:grid; gap:13px; }
.plan li{ display:flex; gap:11px; font-size:14.5px; color:var(--ink-2); align-items:flex-start; }
.plan li svg{ width:18px; height:18px; color:var(--green); flex:none; margin-top:2px; }

/* ---------- faq ---------- */
.faq-list{ margin-top:46px; max-width:820px; margin-inline:auto; border-top:1px solid var(--line); }
.faq-item{ border-bottom:1px solid var(--line); }
.faq-q{ width:100%; display:flex; align-items:center; justify-content:space-between; gap:20px; text-align:left; padding:24px 4px; font-family:var(--f-display); font-weight:600; font-size:19px; letter-spacing:-.02em; color:var(--ink); }
.faq-q .pm{ width:26px; height:26px; flex:none; border-radius:50%; border:1px solid var(--line-2); display:grid; place-items:center; transition:transform .3s ease, background .2s ease, border-color .2s ease; color:var(--ink-3); }
.faq-item.open .faq-q .pm{ transform:rotate(45deg); background:var(--green); border-color:var(--green); color:#fff; }
.faq-a{ overflow:hidden; max-height:0; transition:max-height .35s ease; }
.faq-a .inner{ padding:0 4px 26px; color:var(--ink-3); font-size:16px; max-width:680px; }

/* ---------- final cta ---------- */
.finalcta{ background:var(--ink); color:#fff; position:relative; overflow:hidden; }
.finalcta::before{ content:""; position:absolute; inset:0; background:radial-gradient(700px 360px at 50% -10%, rgba(25,197,118,.22), transparent 60%); }
.finalcta .wrap{ position:relative; text-align:center; padding-block:clamp(80px,10vw,128px); }
.finalcta h2{ color:#fff; font-size:clamp(34px,5vw,58px); font-weight:800; letter-spacing:-.04em; text-wrap:balance; }
.finalcta p{ color:rgba(231,243,237,.7); font-size:19px; margin-top:20px; }
.finalcta .hero-cta{ justify-content:center; margin-top:36px; }

/* ---------- footer ---------- */
.footer{ background:#061009; color:rgba(231,243,237,.6); }
.footer .wrap{ padding-block:60px 36px; }
.foot-top{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:40px; }
.foot-brand .brand{ color:#fff; margin-bottom:14px; }
.foot-brand p{ font-size:14px; max-width:280px; line-height:1.55; }
.foot-col h5{ font-family:var(--f-mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:rgba(231,243,237,.45); margin:0 0 16px; font-weight:600; }
.foot-col a{ display:block; font-size:14.5px; color:rgba(231,243,237,.7); padding:6px 0; transition:color .18s ease; }
.foot-col a:hover{ color:#fff; }
.foot-bottom{ display:flex; align-items:center; justify-content:space-between; gap:20px; margin-top:48px; padding-top:26px; border-top:1px solid rgba(255,255,255,.1); font-size:13.5px; flex-wrap:wrap; }
.foot-social{ display:flex; gap:14px; }
.foot-social a{ width:36px; height:36px; border-radius:9px; border:1px solid rgba(255,255,255,.14); display:grid; place-items:center; color:rgba(231,243,237,.7); transition:all .2s ease; }
.foot-social a:hover{ background:rgba(255,255,255,.08); color:#fff; }

/* ---------- scroll reveal ----------
   Visible is the BASE state. The hidden start state only applies once JS adds
   `reveal-armed` to <html>, so content is never permanently invisible if JS,
   the observer, or the transition fails to run. */
.reveal{ transition:opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1); }
html.reveal-armed .reveal{ opacity:0; transform:translateY(22px); }
html.reveal-armed .reveal.in-view{ opacity:1; transform:none; }
.reveal.d1{ transition-delay:.07s; } .reveal.d2{ transition-delay:.14s; } .reveal.d3{ transition-delay:.21s; }
.reveal.d4{ transition-delay:.28s; } .reveal.d5{ transition-delay:.35s; } .reveal.d6{ transition-delay:.42s; }

@media (prefers-reduced-motion: reduce){
  .reveal{ opacity:1 !important; transform:none !important; }
  .report-card{ animation:none; }
  .bars .bar{ transform:scaleY(1) !important; }
}

/* ---------- responsive ---------- */
@media (max-width:980px){
  .hero .wrap{ grid-template-columns:1fr; gap:40px; padding-block:108px 56px; }
  .report-card{ margin-inline:0; max-width:400px; }
  .feat-grid,.steps,.tgrid,.pgrid,.statsband .wrap{ grid-template-columns:1fr 1fr; }
  .uc-panel,.sample-grid,.foot-top{ grid-template-columns:1fr; gap:32px; }
  .plan.feature{ transform:none; }
  .step .arrow{ display:none; }
}
@media (max-width:900px){
  .nav-links{ display:none; }
}
@media (max-width:680px){
  .nav-login{ display:none; }
  .feat-grid,.steps,.tgrid,.pgrid{ grid-template-columns:1fr; }
  .statsband .wrap{ grid-template-columns:1fr; gap:36px; }
  .statcol + .statcol{ border-left:none; border-top:1px solid rgba(255,255,255,.22); padding-top:30px; }
  .promise-cell{ border-right:none; border-bottom:1px solid var(--line); }
  .promise-cell:last-child{ border-bottom:none; }
  .uc-panel{ padding:28px; }
  .foot-bottom{ flex-direction:column; align-items:flex-start; }
}