/* ===========================================================================
   BOTCLIPSE — shared design system
   ===========================================================================
   Single source of truth for every page. Extracted verbatim from the original
   index.html so the landing page is unchanged visually, then extended with the
   components the sub-pages need (pricing tiers, pipeline stages, scorecard
   sheet, overview sheet).

   Loaded by: index.html, Botclipse_How_It_Works.html, Botclipse_Pricing.html,
              Botclipse_Sample_Scorecard.html, Botclipse_Sales_Sheet.html

   Static file — no build step. Edit tokens in section 1 to re-skin the site.
   =========================================================================== */

/* ==========================================================================
   1. TOKENS
   ========================================================================== */
:root{
  /* ink / surface */
  --ink-900:#070B18;
  --ink-850:#0A0F20;
  --ink-800:#0E1428;
  --ink-700:#161E38;
  --ink-600:#1F2A4A;

  --paper:#FFFFFF;
  --paper-tint:#F6F7FB;
  --paper-line:#E7E9F2;

  /* text */
  --t-strong:#0A0F20;
  --t-body:#4A5268;
  --t-muted:#6B7488;
  --t-on-dark:#EEF1FA;
  --t-on-dark-soft:#A3ADC7;
  --t-on-dark-faint:#6E7A99;

  /* electric accent */
  --acc:#5B8CFF;
  --acc-bright:#7FA6FF;
  --acc-deep:#3D63D6;
  --acc-cyan:#34E7DA;

  /* status */
  --ok:#2FBF7E;
  --ok-soft:#E4F7EE;
  --warn:#E0A21A;
  --warn-soft:#FCF3DF;
  --bad:#E5533D;
  --bad-soft:#FCEBE7;

  /* shape */
  --r-sm:10px;
  --r-md:14px;
  --r-lg:20px;
  --r-xl:28px;

  --shadow-sm:0 1px 2px rgba(10,15,32,.05), 0 4px 12px rgba(10,15,32,.05);
  --shadow-md:0 2px 4px rgba(10,15,32,.04), 0 12px 32px rgba(10,15,32,.08);
  --shadow-lg:0 24px 70px -20px rgba(10,15,32,.30), 0 8px 24px rgba(10,15,32,.08);
  --shadow-glow:0 20px 60px -18px rgba(91,140,255,.55);

  --gut:clamp(20px, 5vw, 40px);
  --sec-y:clamp(76px, 10vw, 132px);

  /* ---- TYPE ---------------------------------------------------------------
     Two typefaces carry the whole site:
       --font-display   Plus Jakarta Sans — EVERY heading, at every size
       --font-body      Inter — all running text, buttons, labels, eyebrows
     --font-mono is reserved for DATA ONLY: scorecard figures, chart axis
     labels, timestamps, transcript quotes. It never sets prose.
     The logo is an image set in DM Serif Display and stays deliberately
     separate — nothing in this stylesheet touches it.
     -------------------------------------------------------------------------- */
  --font-display:"Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif;
  --font-body:"Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono:"JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* One heading scale, six steps. Components pick a step — they never invent
     their own size. Tracking tightens as size grows, which is what keeps a
     70px hero and a 17px card title reading as the same typeface. */
  --fs-hero:clamp(2.6rem, 6.4vw, 4.4rem);   /* landing-page h1        42 -> 70 */
  --fs-h1:  clamp(2.15rem, 4.8vw, 3.25rem); /* sub-page h1            34 -> 52 */
  --fs-h2:  clamp(1.9rem, 3.6vw, 2.7rem);   /* section titles         30 -> 43 */
  --fs-h3:  clamp(1.45rem, 2.4vw, 1.85rem); /* sub-section titles     23 -> 30 */
  --fs-h4:  clamp(1.2rem, 1.9vw, 1.5rem);   /* card titles            19 -> 24 */
  --fs-h5:  1.0625rem;                      /* small card titles      17      */

  --tr-hero:-.038em;
  --tr-h1:-.032em;
  --tr-h2:-.028em;
  --tr-h3:-.022em;
  --tr-h4:-.016em;
  --tr-h5:-.012em;

  --ease:cubic-bezier(.22,.68,.36,1);
}

/* ==========================================================================
   2. RESET / BASE
   ========================================================================== */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:88px}
body{
  margin:0;
  font-family:var(--font-body);
  font-size:17px;
  line-height:1.65;
  color:var(--t-body);
  background:var(--paper);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
img,svg{display:block;max-width:100%}
/* Every heading, one typeface, one scale. Size and tracking come in pairs —
   change a step here and the whole site moves together. */
h1,h2,h3,h4,h5,h6{
  font-family:var(--font-display);
  color:var(--t-strong);
  margin:0;
  font-weight:600;
  font-size:var(--fs-h3);
  letter-spacing:var(--tr-h3);
  line-height:1.16;
  text-wrap:balance;
}
/* Negative tracking closes up the word gaps too, which reads as cramped once
   the type gets big. Give the top two steps a little of that space back. */
h1{font-size:var(--fs-h1); letter-spacing:var(--tr-h1); line-height:1.07; word-spacing:.06em}
h2{font-size:var(--fs-h2); letter-spacing:var(--tr-h2); line-height:1.09; word-spacing:.04em}
h3{font-size:var(--fs-h3); letter-spacing:var(--tr-h3); line-height:1.16}
h4{font-size:var(--fs-h4); letter-spacing:var(--tr-h4); line-height:1.22}
h5,h6{font-size:var(--fs-h5); letter-spacing:var(--tr-h5); line-height:1.28}

/* Utility steps, for when the element is not the heading level it looks like. */
.t-hero{font-size:var(--fs-hero); letter-spacing:var(--tr-hero); line-height:1.04}
.t-h1{font-size:var(--fs-h1);  letter-spacing:var(--tr-h1);  line-height:1.07}
.t-h2{font-size:var(--fs-h2);  letter-spacing:var(--tr-h2);  line-height:1.09}
.t-h3{font-size:var(--fs-h3);  letter-spacing:var(--tr-h3);  line-height:1.16}
.t-h4{font-size:var(--fs-h4);  letter-spacing:var(--tr-h4);  line-height:1.22}
.t-h5{font-size:var(--fs-h5);  letter-spacing:var(--tr-h5);  line-height:1.28}
p{margin:0}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
ul{margin:0;padding:0;list-style:none}

::selection{background:rgba(91,140,255,.28)}

:focus-visible{
  outline:2px solid var(--acc);
  outline-offset:3px;
  border-radius:6px;
}

.skip{
  position:absolute; left:-9999px; top:12px; z-index:200;
  background:#fff; color:var(--t-strong); padding:10px 16px;
  border-radius:var(--r-sm); box-shadow:var(--shadow-md); font-weight:600;
}
.skip:focus{left:12px}

/* ==========================================================================
   3. LAYOUT PRIMITIVES
   ========================================================================== */
.wrap{width:100%; max-width:1180px; margin-inline:auto; padding-inline:var(--gut)}
.wrap-tight{max-width:880px}
section{position:relative}
.pad{padding-block:var(--sec-y)}
.pad-sm{padding-block:clamp(52px,7vw,84px)}

.dark{background:var(--ink-900); color:var(--t-on-dark-soft)}
.dark h1,.dark h2,.dark h3,.dark h4{color:var(--t-on-dark)}

/* eyebrow */
.eyebrow{
  display:inline-flex; align-items:center; gap:9px;
  font-size:12.5px; font-weight:600; letter-spacing:.12em; text-transform:uppercase;
  color:var(--acc-deep);
  background:rgba(91,140,255,.09);
  border:1px solid rgba(91,140,255,.20);
  padding:6px 13px; border-radius:999px;
  margin-bottom:22px;
}
.dark .eyebrow, .page-hero .eyebrow{
  color:var(--acc-bright);
  background:rgba(91,140,255,.11);
  border-color:rgba(91,140,255,.26);
}
.eyebrow .dot{width:6px;height:6px;border-radius:50%;background:currentColor;flex:none}

.h-sec{font-size:var(--fs-h2); letter-spacing:var(--tr-h2); line-height:1.09}
.h-hero{font-size:var(--fs-hero); letter-spacing:var(--tr-hero); line-height:1.04}
.lede{font-size:clamp(1.05rem, 1.6vw, 1.22rem); line-height:1.6; color:var(--t-body); max-width:62ch}
.dark .lede{color:var(--t-on-dark-soft)}

.sec-head{max-width:720px; margin-bottom:clamp(44px, 6vw, 68px)}
.sec-head h2{margin-bottom:18px}
.sec-head-c{margin-inline:auto; text-align:center}
.sec-head-c .lede{margin-inline:auto}

/* gradient text accent */
.grad{
  background:linear-gradient(103deg,#8FB4FF 0%, #5B8CFF 38%, #34E7DA 100%);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
}

/* ==========================================================================
   4. BUTTONS
   ========================================================================== */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  font-family:var(--font-body); font-weight:600; font-size:15.5px; letter-spacing:-.01em;
  padding:13px 22px; border-radius:11px;
  transition:transform .22s var(--ease), box-shadow .22s var(--ease), background .22s var(--ease), border-color .22s var(--ease), color .22s var(--ease);
  white-space:nowrap; position:relative; isolation:isolate;
}
.btn svg{width:16px;height:16px;flex:none}

.btn-primary{
  color:#fff;
  background:linear-gradient(180deg, var(--acc) 0%, var(--acc-deep) 100%);
  box-shadow:0 1px 0 rgba(255,255,255,.22) inset, 0 8px 24px -8px rgba(61,99,214,.75);
}
.btn-primary:hover{transform:translateY(-2px); box-shadow:0 1px 0 rgba(255,255,255,.25) inset, 0 16px 34px -10px rgba(61,99,214,.85)}
.btn-primary:active{transform:translateY(0)}

.btn-ghost{
  color:var(--t-strong);
  background:var(--paper);
  border:1px solid var(--paper-line);
  box-shadow:var(--shadow-sm);
}
.btn-ghost:hover{transform:translateY(-2px); box-shadow:var(--shadow-md); border-color:#D3D8E8}

.dark .btn-ghost, .btn-ghost-dark{
  color:var(--t-on-dark);
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.13);
  box-shadow:none;
  backdrop-filter:blur(8px);
}
.dark .btn-ghost:hover, .btn-ghost-dark:hover{background:rgba(255,255,255,.09); border-color:rgba(255,255,255,.24); transform:translateY(-2px)}

.btn-lg{padding:16px 28px; font-size:16.5px; border-radius:12px}
.btn-block{display:flex; width:100%}

.btn .arr{transition:transform .25s var(--ease)}
.btn:hover .arr{transform:translateX(3px)}

/* ==========================================================================
   5. NAV
   ========================================================================== */
.nav{
  position:sticky; top:0; z-index:100;
  transition:background .3s var(--ease), border-color .3s var(--ease), backdrop-filter .3s;
  border-bottom:1px solid transparent;
}
.nav.stuck{
  background:rgba(7,11,24,.78);
  backdrop-filter:blur(16px) saturate(160%);
  -webkit-backdrop-filter:blur(16px) saturate(160%);
  border-bottom-color:rgba(255,255,255,.09);
}
.nav-in{display:flex; align-items:center; gap:18px; height:70px}

/* Brand lockup. The nav and footer both sit on ink, so both use the on-dark
   logo. Height is fixed and width is auto — never set both, it distorts.
   The PNGs are pre-trimmed to their artwork and share one crop box, so the
   light and on-dark files are interchangeable at any height. */
.brand{
  display:flex; align-items:center; margin-right:auto;
  line-height:0;              /* no text baseline gap under the image */
  padding:4px 6px 4px 0;      /* clear space around the mark */
  border-radius:8px;
}
.brand-logo{
  height:40px; width:auto; display:block; flex:none;
  /* nudge: keeps the wordmark optically level with the nav links */
  transform:translateY(-1px);
}
.foot .brand-logo{height:34px; transform:none}

@media (max-width:420px){
  .brand-logo{height:34px}
}

.nav-links{display:flex; align-items:center; gap:4px}
.nav-links a{
  font-size:14.5px; font-weight:500; color:var(--t-on-dark-soft);
  padding:9px 14px; border-radius:9px;
  transition:color .2s, background .2s;
}
.nav-links a:hover{color:#fff; background:rgba(255,255,255,.07)}

/* current page */
.nav-links a[aria-current="page"]{color:#fff; background:rgba(255,255,255,.07)}
.mobile-panel a[aria-current="page"]{color:var(--acc-bright)}

.nav-cta{margin-left:10px}

.burger{
  display:none; width:42px; height:42px; border-radius:11px;
  border:1px solid rgba(255,255,255,.14); background:rgba(255,255,255,.05);
  align-items:center; justify-content:center;
}
.burger span{display:block; width:17px; height:1.6px; background:#fff; border-radius:2px; position:relative; transition:transform .28s var(--ease), opacity .18s}
.burger span::before,.burger span::after{content:""; position:absolute; left:0; width:17px; height:1.6px; background:#fff; border-radius:2px; transition:transform .28s var(--ease)}
.burger span::before{top:-6px}
.burger span::after{top:6px}
.nav.open .burger span{transform:rotate(45deg)}
.nav.open .burger span::before{transform:translateY(6px) rotate(-90deg)}
.nav.open .burger span::after{opacity:0}

.mobile-panel{
  display:none;
  border-top:1px solid rgba(255,255,255,.09);
  background:rgba(7,11,24,.96);
  backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);
}
.mobile-panel ul{display:flex; flex-direction:column; padding:14px 0 22px}
.mobile-panel a{
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 2px; font-size:16.5px; font-weight:500; color:var(--t-on-dark);
  border-bottom:1px solid rgba(255,255,255,.06);
}
.mobile-panel a svg{width:15px;height:15px;color:var(--t-on-dark-faint)}
.mobile-panel .btn{margin-top:20px; width:100%}

@media (max-width:980px){
  .nav-links,.nav-cta{display:none}
  .burger{display:inline-flex}
  .nav.open{background:rgba(7,11,24,.96); backdrop-filter:blur(18px)}
  .nav.open .mobile-panel{display:block}
}

/* ==========================================================================
   6. HERO (landing page)
   ========================================================================== */
.hero{
  position:relative;
  background:var(--ink-900);
  overflow:hidden;
  margin-top:-70px;
  padding-top:calc(70px + clamp(72px, 11vw, 132px));
  padding-bottom:clamp(76px, 10vw, 128px);
  isolation:isolate;
}
.hero-bg{position:absolute; inset:0; z-index:-1; overflow:hidden}

/* animated perspective grid */
.hero-grid{
  position:absolute; inset:-20% -30% 20% -30%;
  background-image:
    linear-gradient(rgba(120,150,255,.085) 1px, transparent 1px),
    linear-gradient(90deg, rgba(120,150,255,.085) 1px, transparent 1px);
  background-size:64px 64px;
  mask-image:radial-gradient(ellipse 90% 65% at 50% 22%, #000 15%, transparent 72%);
  -webkit-mask-image:radial-gradient(ellipse 90% 65% at 50% 22%, #000 15%, transparent 72%);
  animation:gridDrift 32s linear infinite;
}
@keyframes gridDrift{from{background-position:0 0, 0 0} to{background-position:64px 64px, 64px 64px}}

/* aurora blobs */
.blob{position:absolute; border-radius:50%; filter:blur(90px); opacity:.55; will-change:transform}
.blob-1{width:52vw; height:52vw; max-width:720px; max-height:720px; top:-24%; left:6%; background:radial-gradient(circle, rgba(91,140,255,.85) 0%, rgba(91,140,255,0) 68%); animation:float1 20s ease-in-out infinite}
.blob-2{width:44vw; height:44vw; max-width:600px; max-height:600px; top:-6%; right:2%; background:radial-gradient(circle, rgba(52,231,218,.42) 0%, rgba(52,231,218,0) 68%); animation:float2 26s ease-in-out infinite}
.blob-3{width:60vw; height:34vw; max-width:820px; top:38%; left:20%; background:radial-gradient(circle, rgba(126,58,242,.34) 0%, rgba(126,58,242,0) 70%); animation:float1 30s ease-in-out infinite reverse}
@keyframes float1{0%,100%{transform:translate3d(0,0,0) scale(1)} 50%{transform:translate3d(4%,6%,0) scale(1.09)}}
@keyframes float2{0%,100%{transform:translate3d(0,0,0) scale(1)} 50%{transform:translate3d(-6%,4%,0) scale(1.12)}}

/* fade hero into next section */
.hero::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:180px; z-index:-1;
  background:linear-gradient(180deg, rgba(7,11,24,0) 0%, var(--ink-900) 82%);
}

.hero-in{max-width:920px}
.hero h1{margin-bottom:26px; color:#fff}
.hero .lede{font-size:clamp(1.08rem,1.75vw,1.3rem); color:#B6C0D8; max-width:60ch; margin-bottom:38px}

.hero-cta{display:flex; flex-wrap:wrap; gap:14px; margin-bottom:30px}
.hero-cta .btn{flex:1 1 auto; min-width:0}
@media (min-width:520px){.hero-cta .btn{flex:0 0 auto}}

/* the hero headline break helps line balance on wide screens only */
@media (max-width:760px){ br.dsk{display:none} }

.trust{
  display:flex; align-items:center; flex-wrap:wrap; gap:8px 22px;
  font-size:14px; color:var(--t-on-dark-faint);
}
.trust span{display:inline-flex; align-items:center; gap:8px}
.trust svg{width:15px;height:15px;color:var(--acc-cyan);flex:none}

/* live pill */
.live{
  display:inline-flex; align-items:center; gap:10px;
  padding:7px 15px 7px 12px; border-radius:999px;
  background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.11);
  font-size:13.5px; font-weight:500; color:#C9D3EA; margin-bottom:26px;
  backdrop-filter:blur(8px);
}
.pulse{position:relative; width:8px; height:8px; flex:none}
.pulse i{position:absolute; inset:0; border-radius:50%; background:var(--acc-cyan)}
.pulse i::after{content:""; position:absolute; inset:0; border-radius:50%; background:var(--acc-cyan); animation:ping 2.2s cubic-bezier(0,0,.2,1) infinite}
@keyframes ping{0%{transform:scale(1);opacity:.8} 75%,100%{transform:scale(3);opacity:0}}

/* hero stat strip */
.stats{
  display:grid; grid-template-columns:repeat(4,1fr); gap:1px;
  margin-top:clamp(56px,7vw,80px);
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.08);
  border-radius:var(--r-lg); overflow:hidden;
}
.stat{background:rgba(10,15,32,.72); padding:24px 22px; backdrop-filter:blur(6px)}
.stat b{display:block; font-family:var(--font-display); font-size:var(--fs-h3); font-weight:600; color:#fff; letter-spacing:var(--tr-h3); line-height:1.1}
.stat small{display:block; margin-top:6px; font-size:13.5px; color:var(--t-on-dark-faint); line-height:1.45}
@media (max-width:760px){
  .stats{grid-template-columns:repeat(2,1fr)}
  .stat{padding:20px 18px}
}

/* ==========================================================================
   6b. PAGE HERO (sub-pages) — compact dark header so the nav always sits
       on ink, exactly like the landing page.
   ========================================================================== */
.page-hero{
  position:relative;
  background:var(--ink-900);
  color:var(--t-on-dark-soft);
  overflow:hidden;
  margin-top:-70px;
  padding-top:calc(70px + clamp(56px, 8vw, 92px));
  padding-bottom:clamp(56px, 8vw, 92px);
  isolation:isolate;
}
.page-hero .hero-bg{position:absolute; inset:0; z-index:-1; overflow:hidden}
.page-hero::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:150px; z-index:-1;
  background:linear-gradient(180deg, rgba(7,11,24,0) 0%, var(--ink-900) 84%);
}
.page-hero h1{
  color:#fff;
  margin-bottom:20px;
  max-width:18ch;
}
.page-hero .lede{color:#B6C0D8; max-width:58ch}
.page-hero-c{text-align:center}
.page-hero-c h1{margin-inline:auto}
.page-hero-c .lede{margin-inline:auto}

.crumb{
  display:flex; align-items:center; gap:9px; flex-wrap:wrap;
  font-size:13.5px; color:var(--t-on-dark-faint); margin-bottom:20px;
}
.crumb a{color:#9AA6C4; transition:color .2s}
.crumb a:hover{color:#fff}
.crumb svg{width:13px;height:13px;opacity:.6}

.page-hero .hero-cta{margin-top:34px; margin-bottom:0}

/* ==========================================================================
   7. PROBLEM — chat failure cards (landing)
   ========================================================================== */
.problem{background:var(--paper)}
.chat-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:22px}
@media (max-width:980px){.chat-grid{grid-template-columns:1fr; max-width:560px}}

.chat-card{
  background:var(--paper);
  border:1px solid var(--paper-line);
  border-radius:var(--r-lg);
  padding:24px 22px 22px;
  box-shadow:var(--shadow-sm);
  transition:transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s;
  display:flex; flex-direction:column;
}
.chat-card:hover{transform:translateY(-4px); box-shadow:var(--shadow-md); border-color:#D8DDEC}

.chat-tag{
  display:inline-flex; align-items:center; gap:7px; align-self:flex-start;
  font-size:11.5px; font-weight:700; letter-spacing:.09em; text-transform:uppercase;
  padding:5px 10px; border-radius:7px; margin-bottom:18px;
  background:var(--bad-soft); color:#B23A26;
}
.chat-tag.amber{background:var(--warn-soft); color:#96690B}
.chat-tag svg{width:13px;height:13px}

.bubbles{display:flex; flex-direction:column; gap:9px; margin-bottom:18px; flex:1}
.bub{
  font-size:14.5px; line-height:1.55; padding:11px 14px; border-radius:14px; max-width:92%;
}
.bub.user{align-self:flex-end; background:#EEF1F8; color:#39415A; border-bottom-right-radius:5px}
.bub.bot{align-self:flex-start; background:var(--ink-900); color:#DDE3F2; border-bottom-left-radius:5px}
.bub.bot.err{background:#1B1113; color:#F3C8C0; font-family:var(--font-mono); font-size:12.5px; line-height:1.5}
.bub .who{display:block; font-size:10.5px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; opacity:.5; margin-bottom:4px}

.chat-why{
  font-size:14px; line-height:1.55; color:var(--t-muted);
  border-top:1px solid var(--paper-line); padding-top:15px;
}
.chat-why b{color:var(--t-strong); font-weight:600}

.cost{
  margin-top:clamp(40px,5vw,56px);
  display:flex; align-items:center; gap:16px; flex-wrap:wrap;
  padding:22px 26px; border-radius:var(--r-lg);
  background:linear-gradient(100deg, #F4F7FF 0%, #F7FAFF 60%, #F3FBFA 100%);
  border:1px solid #DEE6FA;
}
.cost svg{width:22px;height:22px;color:var(--acc-deep);flex:none}
.cost p{font-size:16px; color:#33405E}
.cost b{color:var(--t-strong); font-weight:600}

/* ==========================================================================
   8. CATEGORY GRID + STEP FLOW
   ========================================================================== */
.what{background:var(--paper-tint); border-block:1px solid var(--paper-line)}

.cat-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:20px}
@media (max-width:980px){.cat-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:620px){.cat-grid{grid-template-columns:1fr}}

.cat{
  position:relative; background:var(--paper);
  border:1px solid var(--paper-line); border-radius:var(--r-lg);
  padding:26px 24px 24px; overflow:hidden;
  transition:transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s;
}
.cat::before{
  content:""; position:absolute; inset:0 0 auto 0; height:2px;
  background:linear-gradient(90deg, var(--acc) 0%, var(--acc-cyan) 100%);
  transform:scaleX(0); transform-origin:left; transition:transform .4s var(--ease);
}
.cat:hover{transform:translateY(-4px); box-shadow:var(--shadow-md); border-color:#D8DDEC}
.cat:hover::before{transform:scaleX(1)}

.cat-ico{
  width:46px; height:46px; border-radius:13px; margin-bottom:18px;
  display:grid; place-items:center;
  background:linear-gradient(150deg, #EDF2FF 0%, #E6FBF8 100%);
  border:1px solid #DFE8FF;
  color:var(--acc-deep);
}
.cat-ico svg{width:22px;height:22px}
.cat h3{font-size:var(--fs-h5); letter-spacing:var(--tr-h5); margin-bottom:8px}
.cat p{font-size:14.8px; line-height:1.58; color:var(--t-muted)}
.cat .num{
  position:absolute; top:20px; right:22px;
  font-family:var(--font-mono); font-size:12px; color:#C3CADB; letter-spacing:.02em;
}

/* Per-category real example: problem -> how Botclipse catches it */
.cat-eg{margin-top:16px; display:flex; flex-direction:column; gap:8px}
.cat-eg p{
  font-size:12.8px; line-height:1.5; color:var(--t-body);
  border-radius:var(--r-sm); padding:9px 11px; margin:0;
}
.cat-bad{background:var(--bad-soft); border:1px solid rgba(229,83,61,.20)}
.cat-bad b{color:var(--bad)}
.cat-fix{background:var(--ok-soft); border:1px solid rgba(47,191,126,.24)}
.cat-fix b{color:var(--ok)}

/* 3-step flow */
.flow-head{margin-top:clamp(72px,9vw,104px); margin-bottom:40px; max-width:640px}
.flow-head h3{margin-bottom:12px}
.flow-head p{font-size:16.5px; color:var(--t-muted)}

.flow{display:grid; grid-template-columns:repeat(3,1fr); gap:20px; position:relative}
@media (max-width:900px){.flow{grid-template-columns:1fr; max-width:560px}}

.step{
  background:var(--paper); border:1px solid var(--paper-line);
  border-radius:var(--r-lg); padding:26px 24px; position:relative;
  transition:transform .3s var(--ease), box-shadow .3s var(--ease);
}
.step:hover{transform:translateY(-4px); box-shadow:var(--shadow-md)}
.step-n{
  width:34px;height:34px;border-radius:10px; display:grid;place-items:center;
  font-family:var(--font-display); font-weight:600; font-size:15px; letter-spacing:0; color:#fff;
  background:linear-gradient(160deg, var(--acc) 0%, var(--acc-deep) 100%);
  box-shadow:0 6px 16px -6px rgba(61,99,214,.7);
  margin-bottom:16px;
}
.step h4{font-size:var(--fs-h5); letter-spacing:var(--tr-h5); margin-bottom:8px}
.step p{font-size:14.8px; line-height:1.58; color:var(--t-muted)}
.step .conn{
  position:absolute; top:44px; right:-20px; width:20px; color:#C9D2E8; display:grid; place-items:center;
}
.step .conn svg{width:18px;height:18px}
@media (max-width:900px){.step .conn{display:none}}

/* ==========================================================================
   9. SHOWCASE / PRODUCT CARD (shared by landing + scorecard page)
   ========================================================================== */
.showcase{
  background:
    radial-gradient(ellipse 70% 55% at 50% 0%, rgba(91,140,255,.20) 0%, rgba(91,140,255,0) 62%),
    radial-gradient(ellipse 50% 40% at 85% 30%, rgba(52,231,218,.10) 0%, rgba(52,231,218,0) 60%),
    var(--ink-900);
  overflow:hidden;
}
.showcase .sec-head{margin-inline:auto; text-align:center; max-width:660px}

.card-shell{
  position:relative;
  border-radius:var(--r-xl);
  background:linear-gradient(160deg, rgba(255,255,255,.16) 0%, rgba(255,255,255,.03) 45%, rgba(255,255,255,.09) 100%);
  padding:1px;
  box-shadow:0 50px 110px -30px rgba(0,0,0,.75), 0 0 90px -30px rgba(91,140,255,.45);
}
.card{
  background:linear-gradient(178deg, #0D142A 0%, #0A1020 100%);
  border-radius:calc(var(--r-xl) - 1px);
  overflow:hidden;
}

/* window chrome */
.chrome{
  display:flex; align-items:center; gap:14px;
  padding:14px 20px; border-bottom:1px solid rgba(255,255,255,.07);
  background:rgba(255,255,255,.025);
}
.dots{display:flex; gap:7px}
.dots i{width:11px;height:11px;border-radius:50%;background:rgba(255,255,255,.14)}
.dots i:first-child{background:rgba(229,83,61,.55)}
.dots i:nth-child(2){background:rgba(224,162,26,.55)}
.dots i:nth-child(3){background:rgba(47,191,126,.55)}
.chrome .url{
  flex:1; text-align:center; font-family:var(--font-mono); font-size:12px;
  color:var(--t-on-dark-faint); letter-spacing:.01em;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.chrome .badge-live{
  display:inline-flex; align-items:center; gap:7px; font-size:11.5px; font-weight:600;
  color:#7FE9DE; background:rgba(52,231,218,.10); border:1px solid rgba(52,231,218,.24);
  padding:4px 10px; border-radius:999px; white-space:nowrap;
}
@media (max-width:640px){.chrome .url{display:none}}

.card-body{padding:clamp(22px,3.4vw,34px)}

.card-top{
  display:flex; justify-content:space-between; align-items:flex-start; gap:20px; flex-wrap:wrap;
  padding-bottom:26px; border-bottom:1px solid rgba(255,255,255,.07); margin-bottom:28px;
}
.card-top h3{font-size:var(--fs-h4); letter-spacing:var(--tr-h4); margin-bottom:8px}
.meta{display:flex; flex-wrap:wrap; gap:6px 18px; font-family:var(--font-mono); font-size:12.5px; color:var(--t-on-dark-faint)}
.meta em{font-style:normal; color:#93A0BF}
.meta b{color:#93A0BF; font-weight:500}

.mockflag{
  font-size:11px; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  color:#8C97B5; border:1px dashed rgba(255,255,255,.18); padding:5px 11px; border-radius:8px;
  white-space:nowrap;
}

/* score + categories grid */
.score-layout{display:grid; grid-template-columns:270px 1fr; gap:clamp(24px,3.5vw,40px); align-items:start}
@media (max-width:880px){.score-layout{grid-template-columns:1fr}}

.dial-box{
  background:rgba(255,255,255,.035); border:1px solid rgba(255,255,255,.08);
  border-radius:var(--r-lg); padding:26px 22px; text-align:center;
}
.dial{position:relative; width:190px; height:190px; margin:0 auto 6px}
.dial svg{width:100%;height:100%; transform:rotate(-90deg)}
.dial .ring-bg{fill:none; stroke:rgba(255,255,255,.075); stroke-width:11}
.dial .ring-fg{
  fill:none; stroke:url(#dialGrad); stroke-width:11; stroke-linecap:round;
  stroke-dasharray:339.29; stroke-dashoffset:339.29;
  transition:stroke-dashoffset 1.6s cubic-bezier(.16,.84,.32,1);
  filter:drop-shadow(0 0 10px rgba(91,140,255,.55));
}
/* dial fill is set per page via --dash-offset (339.29 = empty, 0 = full) */
.dial.on .ring-fg{stroke-dashoffset:var(--dash-offset, 61.07)}
.dial-val{
  position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center;
}
.dial-val b{font-family:var(--font-display); font-size:56px; font-weight:600; color:#fff; letter-spacing:var(--tr-hero); line-height:1}
.dial-val small{font-size:11.5px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--t-on-dark-faint); margin-top:7px}
.dial-label{font-size:14.5px; color:#9FAAC6; margin-top:10px}
.delta{
  display:inline-flex; align-items:center; gap:6px; margin-top:14px;
  font-size:13px; font-weight:600; padding:6px 12px; border-radius:999px;
  background:rgba(224,162,26,.11); color:#F0C25F; border:1px solid rgba(224,162,26,.26);
}
.delta svg{width:13px;height:13px}

.cat-rows{display:flex; flex-direction:column; gap:2px}
.row{
  display:flex; align-items:center; gap:14px;
  padding:15px 16px; border-radius:12px;
  background:rgba(255,255,255,.022);
  border:1px solid transparent;
  transition:background .25s, border-color .25s, transform .25s var(--ease);
}
.row:hover{background:rgba(255,255,255,.055); border-color:rgba(255,255,255,.09); transform:translateX(3px)}
.row .ri{width:34px;height:34px;border-radius:9px; display:grid;place-items:center; background:rgba(255,255,255,.05); color:#9BAAD0; flex:none}
.row .ri svg{width:17px;height:17px}
.row .rt{flex:1; min-width:0}
.row .rt b{display:block; font-size:15px; font-weight:600; color:#E7ECF8; letter-spacing:-.01em}
.row .rt span{display:block; font-size:12.8px; color:var(--t-on-dark-faint); margin-top:2px}
.row .rs{font-family:var(--font-mono); font-size:13px; color:#8996B7; flex:none}
@media (max-width:520px){.row .rs{display:none}}

.badge{
  display:inline-flex; align-items:center; gap:6px; flex:none;
  font-size:11.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  padding:5px 11px; border-radius:7px; white-space:nowrap;
}
.badge svg{width:12px;height:12px}
.b-pass{background:rgba(47,191,126,.13); color:#5FDBA3; border:1px solid rgba(47,191,126,.28)}
.b-part{background:rgba(224,162,26,.13); color:#F0C25F; border:1px solid rgba(224,162,26,.30)}
.b-fail{background:rgba(229,83,61,.13); color:#F58C77; border:1px solid rgba(229,83,61,.30)}

/* findings */
.sub-h{
  display:flex; align-items:center; gap:12px; margin:34px 0 16px;
  font-family:var(--font-display); font-size:13px; font-weight:600;
  letter-spacing:.13em; text-transform:uppercase; color:#8A97B8;
}
.sub-h::after{content:""; flex:1; height:1px; background:rgba(255,255,255,.08)}
.sub-h .cnt{
  font-family:var(--font-mono); font-size:11.5px; letter-spacing:0;
  background:rgba(255,255,255,.06); padding:3px 9px; border-radius:6px; color:#A6B2CF;
}

.finds{display:flex; flex-direction:column; gap:12px}
.find{
  display:grid; grid-template-columns:auto 1fr auto; gap:14px; align-items:start;
  padding:17px 18px; border-radius:14px;
  background:rgba(255,255,255,.028); border:1px solid rgba(255,255,255,.07);
  transition:background .25s, border-color .25s;
}
.find:hover{background:rgba(255,255,255,.05); border-color:rgba(255,255,255,.12)}
.sev{
  width:8px; height:8px; border-radius:50%; margin-top:8px; flex:none;
  box-shadow:0 0 0 4px rgba(229,83,61,.14);
  background:var(--bad);
}
.sev.med{background:var(--warn); box-shadow:0 0 0 4px rgba(224,162,26,.14)}
.find-b{min-width:0}
.find-b b{display:block; font-size:15px; font-weight:600; color:#E9EDF8; margin-bottom:5px; letter-spacing:-.01em}
.find-b p{font-size:14px; line-height:1.55; color:#94A0BF}
.find-b .quote{
  display:block; margin-top:10px; padding:10px 13px; border-radius:9px;
  background:rgba(0,0,0,.30); border-left:2px solid rgba(229,83,61,.5);
  font-family:var(--font-mono); font-size:12.4px; line-height:1.55; color:#C3CDE6;
}
.find-b .quote.amber{border-left-color:rgba(224,162,26,.55)}
.find-b .quote .who{
  display:block; font-family:var(--font-body); font-size:10.5px; font-weight:700;
  letter-spacing:.1em; text-transform:uppercase; color:#7C89AB; margin-bottom:5px;
}
.find-tag{
  font-family:var(--font-mono); font-size:11px; color:#8391B4;
  background:rgba(255,255,255,.05); padding:4px 9px; border-radius:6px; white-space:nowrap;
}
@media (max-width:620px){
  .find{grid-template-columns:auto 1fr}
  .find-tag{display:none}
}

/* drift chart */
.chart-box{
  margin-top:34px; padding:24px clamp(16px,2.4vw,26px) 20px;
  border-radius:var(--r-lg);
  background:rgba(255,255,255,.028); border:1px solid rgba(255,255,255,.08);
}
.chart-head{display:flex; justify-content:space-between; align-items:flex-start; gap:16px; flex-wrap:wrap; margin-bottom:20px}
.chart-head b{display:block; font-family:var(--font-display); font-size:var(--fs-h5); font-weight:600; color:#EAEFFA; letter-spacing:var(--tr-h5)}
.chart-head span{display:block; font-size:13.5px; color:var(--t-on-dark-faint); margin-top:3px}
.legend{display:flex; gap:16px; flex-wrap:wrap; font-size:12.5px; color:#93A0BF}
.legend i{display:inline-block; width:16px; height:2.5px; border-radius:2px; margin-right:7px; vertical-align:middle}
.legend .l1{background:#5B8CFF}
.legend .l2{background:#E0A21A}
.legend .l3{background:transparent; border-top:2px dashed rgba(255,255,255,.35); height:0}
.legend .l4{background:#E5533D}

.chart-scroll{overflow-x:auto; -webkit-overflow-scrolling:touch}
.chart-scroll svg{min-width:520px; width:100%; height:auto}

.spark path.draw{
  stroke-dasharray:900; stroke-dashoffset:900;
  transition:stroke-dashoffset 1.8s cubic-bezier(.3,.7,.4,1) .25s;
}
.chart-box.on .spark path.draw{stroke-dashoffset:0}
.spark polyline.draw{
  stroke-dasharray:900; stroke-dashoffset:900;
  transition:stroke-dashoffset 1.8s cubic-bezier(.3,.7,.4,1) .25s;
}
.chart-box.on .spark polyline.draw{stroke-dashoffset:0}
.spark .fade-el{opacity:0; transition:opacity .7s ease 1.5s}
.chart-box.on .spark .fade-el{opacity:1}
.spark .alert-ring{transform-origin:410px 90px; animation:alertPulse 2.4s ease-out infinite}
.spark .alert-ring-b{transform-origin:380px 119.25px; animation:alertPulse 2.4s ease-out infinite}
@keyframes alertPulse{0%{transform:scale(.6);opacity:.85} 70%,100%{transform:scale(2.4);opacity:0}}

.alert-strip{
  display:flex; align-items:flex-start; gap:13px; margin-top:20px;
  padding:15px 17px; border-radius:12px;
  background:linear-gradient(96deg, rgba(224,162,26,.11) 0%, rgba(224,162,26,.03) 100%);
  border:1px solid rgba(224,162,26,.24);
}
.alert-strip svg{width:19px;height:19px;color:#F0C25F;flex:none;margin-top:1px}
.alert-strip p{font-size:14.3px; line-height:1.55; color:#D3D9E8}
.alert-strip b{color:#F5DFA8; font-weight:600}
.alert-strip .ts{display:block; font-family:var(--font-mono); font-size:12px; color:#8E9AB8; margin-top:5px}

.showcase-note{
  text-align:center; margin-top:26px; font-size:13.5px; color:var(--t-on-dark-faint);
}

/* ==========================================================================
   10. WHY BOTCLIPSE (landing)
   ========================================================================== */
.why{background:var(--paper)}
.why-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:22px}
@media (max-width:860px){.why-grid{grid-template-columns:1fr}}

.why-card{
  position:relative; overflow:hidden;
  border:1px solid var(--paper-line); border-radius:var(--r-xl);
  padding:clamp(26px,3.4vw,36px);
  background:linear-gradient(168deg, #FFFFFF 0%, #FBFCFF 100%);
  transition:transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s;
}
.why-card::after{
  content:""; position:absolute; width:280px; height:280px; right:-120px; top:-120px; border-radius:50%;
  background:radial-gradient(circle, rgba(91,140,255,.10) 0%, rgba(91,140,255,0) 70%);
  opacity:0; transition:opacity .45s var(--ease);
}
.why-card:hover{transform:translateY(-5px); box-shadow:var(--shadow-lg); border-color:#D5DCEF}
.why-card:hover::after{opacity:1}

.why-ico{
  width:52px;height:52px;border-radius:15px; display:grid;place-items:center; margin-bottom:20px;
  background:linear-gradient(155deg, var(--ink-800) 0%, var(--ink-900) 100%);
  color:#8FB4FF; box-shadow:0 10px 26px -12px rgba(14,20,40,.7);
}
.why-ico svg{width:24px;height:24px}
.why-card h3{font-size:var(--fs-h4); letter-spacing:var(--tr-h4); margin-bottom:11px}
.why-card p{font-size:15.5px; line-height:1.62; color:var(--t-body)}
.why-kick{
  display:inline-block; font-size:12px; font-weight:700; letter-spacing:.11em; text-transform:uppercase;
  color:var(--acc-deep); margin-bottom:14px;
}

/* not-this / this comparison */
.vs{
  margin-top:clamp(44px,5vw,60px);
  display:grid; grid-template-columns:1fr 1fr; gap:1px;
  background:var(--paper-line); border:1px solid var(--paper-line);
  border-radius:var(--r-lg); overflow:hidden;
}
@media (max-width:720px){.vs{grid-template-columns:1fr}}
.vs-col{background:var(--paper); padding:28px 26px}
.vs-col:last-child{background:linear-gradient(160deg,#F7FAFF 0%, #F4FBFA 100%)}
.vs-col h4{font-size:13px; letter-spacing:.12em; text-transform:uppercase; color:var(--t-muted); margin-bottom:18px; font-weight:700; line-height:1.3}
.vs-col:last-child h4{color:var(--acc-deep)}
.vs-col li{display:flex; gap:12px; align-items:flex-start; font-size:15.3px; line-height:1.55; padding:9px 0; color:var(--t-body)}
.vs-col li svg{width:18px;height:18px;flex:none;margin-top:2px}
.vs-col li .x{color:#B9C0D2}
.vs-col li .c{color:var(--ok)}
.vs-col:last-child li{color:var(--t-strong); font-weight:500}

/* ==========================================================================
   11. WHO IT'S FOR (landing)
   ========================================================================== */
.who{background:var(--paper-tint); border-block:1px solid var(--paper-line)}
.who-in{display:grid; grid-template-columns:1fr 1fr; gap:clamp(32px,5vw,64px); align-items:center}
@media (max-width:900px){.who-in{grid-template-columns:1fr}}

.who-list{display:flex; flex-direction:column; gap:14px; margin-top:30px}
.who-list li{
  display:flex; gap:14px; align-items:flex-start;
  background:var(--paper); border:1px solid var(--paper-line);
  border-radius:var(--r-md); padding:16px 18px;
  transition:transform .28s var(--ease), box-shadow .28s var(--ease);
}
.who-list li:hover{transform:translateX(4px); box-shadow:var(--shadow-sm)}
.who-list .tick{
  width:24px;height:24px;border-radius:8px;flex:none; display:grid;place-items:center;
  background:var(--ok-soft); color:#1E8F5C;
}
.who-list .tick svg{width:14px;height:14px}
.who-list b{display:block; font-size:15.5px; color:var(--t-strong); font-weight:600; margin-bottom:3px}
.who-list span{font-size:14.4px; color:var(--t-muted); line-height:1.55}

.fit-card{
  background:var(--ink-900); border-radius:var(--r-xl); padding:clamp(28px,3.6vw,38px);
  color:var(--t-on-dark-soft); box-shadow:var(--shadow-lg);
  position:relative; overflow:hidden;
}
.fit-card::before{
  content:""; position:absolute; inset:0;
  background:radial-gradient(ellipse 80% 60% at 20% 0%, rgba(91,140,255,.24) 0%, transparent 60%);
}
.fit-card > *{position:relative}
.fit-card h3{font-size:var(--fs-h4); letter-spacing:var(--tr-h4); margin-bottom:16px; color:#fff}
.fit-card p{font-size:15.5px; line-height:1.65; color:#A9B4CE}
.fit-card .fit-quote{
  margin-top:22px; padding-top:22px; border-top:1px solid rgba(255,255,255,.09);
  font-family:var(--font-display); font-size:var(--fs-h5); line-height:1.5; color:#DCE3F4; letter-spacing:var(--tr-h5);
}
.fit-card .fit-quote span{color:var(--acc-bright)}

/* ==========================================================================
   12. FINAL CTA BAND
   ========================================================================== */
.cta{
  background:var(--ink-900); position:relative; overflow:hidden; isolation:isolate;
}
.cta-bg{position:absolute; inset:0; z-index:-1}
.cta-bg .g{
  position:absolute; inset:-40% -10% auto -10%; height:120%;
  background:
    radial-gradient(ellipse 55% 60% at 30% 40%, rgba(91,140,255,.42) 0%, transparent 62%),
    radial-gradient(ellipse 45% 55% at 78% 55%, rgba(52,231,218,.24) 0%, transparent 62%),
    radial-gradient(ellipse 40% 50% at 55% 80%, rgba(126,58,242,.26) 0%, transparent 65%);
  filter:blur(30px);
  animation:ctaShift 24s ease-in-out infinite;
}
@keyframes ctaShift{0%,100%{transform:translate3d(0,0,0) scale(1)} 50%{transform:translate3d(-3%,2%,0) scale(1.08)}}
.cta-bg .mesh{
  position:absolute; inset:0;
  background-image:linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px);
  background-size:46px 46px;
  mask-image:radial-gradient(ellipse 70% 70% at 50% 50%, #000 10%, transparent 70%);
  -webkit-mask-image:radial-gradient(ellipse 70% 70% at 50% 50%, #000 10%, transparent 70%);
}

.cta-in{text-align:center; max-width:760px; margin-inline:auto}
.cta-in h2{color:#fff; margin-bottom:20px}
.cta-in p{font-size:clamp(1.02rem,1.6vw,1.18rem); color:#B7C1DA; margin-bottom:34px}
.cta-btns{display:flex; gap:14px; justify-content:center; flex-wrap:wrap; margin-bottom:26px}
.cta-fine{font-size:13.8px; color:var(--t-on-dark-faint); line-height:1.6}
.cta-fine a{color:#B3C4EC; text-decoration:underline; text-underline-offset:3px; text-decoration-color:rgba(179,196,236,.35)}
.cta-fine a:hover{text-decoration-color:currentColor}

/* ==========================================================================
   13. FOOTER
   ========================================================================== */
.foot{background:var(--ink-900); border-top:1px solid rgba(255,255,255,.08); padding-block:44px 40px}
.foot-in{display:flex; justify-content:space-between; align-items:flex-start; gap:28px; flex-wrap:wrap}
.foot .brand{margin-right:0; margin-bottom:12px}
.foot-tag{font-size:14.2px; color:var(--t-on-dark-faint); max-width:42ch; line-height:1.6}
.foot-links{display:flex; gap:26px; flex-wrap:wrap; font-size:14.2px}
.foot-links a{color:#98A3BF; transition:color .2s}
.foot-links a:hover{color:#fff}
.foot-bot{
  margin-top:34px; padding-top:22px; border-top:1px solid rgba(255,255,255,.06);
  display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap;
  font-size:13px; color:#7A85A3; /* 5.3:1 on --ink-900 */
}

/* ==========================================================================
   14. SCROLL REVEAL
   ========================================================================== */
.rv{opacity:0; transform:translateY(22px); transition:opacity .75s var(--ease), transform .75s var(--ease); transition-delay:var(--d,0ms)}
.rv.in{opacity:1; transform:none}

/* ==========================================================================
   15. PRICING PAGE
   ========================================================================== */
.pricing{background:var(--paper-tint); border-bottom:1px solid var(--paper-line)}

.tier-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:20px; align-items:stretch}
@media (max-width:1040px){.tier-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:600px){.tier-grid{grid-template-columns:1fr; max-width:420px; margin-inline:auto}}

.tier{
  position:relative; display:flex; flex-direction:column;
  background:var(--paper); border:1px solid var(--paper-line);
  border-radius:var(--r-xl); padding:28px 26px;
  transition:transform .32s var(--ease), box-shadow .32s var(--ease), border-color .32s;
}
.tier:hover{transform:translateY(-5px); box-shadow:var(--shadow-lg); border-color:#D5DCEF}

/* featured tier — dark, matching the landing page's ink surfaces */
.tier.feat{
  background:linear-gradient(168deg, var(--ink-800) 0%, var(--ink-900) 100%);
  border-color:rgba(91,140,255,.42);
  box-shadow:var(--shadow-glow);
  overflow:hidden;
}
.tier.feat::before{
  content:""; position:absolute; inset:0;
  background:radial-gradient(ellipse 90% 55% at 50% 0%, rgba(91,140,255,.26) 0%, transparent 62%);
  pointer-events:none;
}
.tier.feat > *{position:relative}
.tier.feat .tname{color:var(--acc-bright)}
.tier.feat .price{color:#fff}
.tier.feat .price small{color:var(--t-on-dark-faint)}
.tier.feat .tdesc{color:var(--t-on-dark-soft)}
.tier.feat li{color:#CBD4E9}
.tier.feat li svg{color:var(--acc-cyan)}

.tier .tag{
  position:absolute; top:-11px; left:50%; transform:translateX(-50%);
  background:linear-gradient(180deg, var(--acc) 0%, var(--acc-deep) 100%);
  color:#fff; font-size:10.5px; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  padding:5px 14px; border-radius:999px; white-space:nowrap;
  box-shadow:0 8px 20px -8px rgba(61,99,214,.9);
}

.tname{
  font-size:12.5px; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
  color:var(--acc-deep);
}
.price{
  font-family:var(--font-display); font-size:var(--fs-h2); font-weight:600;
  color:var(--t-strong); letter-spacing:var(--tr-h2); line-height:1.1; margin-top:14px;
}
.price small{font-family:var(--font-display); font-size:14px; font-weight:500; color:var(--t-muted); letter-spacing:0}
.tier.free .price{color:var(--ok)}

.tdesc{font-size:14.5px; line-height:1.55; color:var(--t-muted); margin-top:10px; min-height:44px}

.tier ul{display:flex; flex-direction:column; gap:10px; margin:22px 0 26px; flex:1}
.tier li{display:flex; gap:10px; align-items:flex-start; font-size:14.6px; line-height:1.5; color:var(--t-body)}
.tier li svg{width:16px;height:16px;flex:none;margin-top:3px;color:var(--acc-deep)}

.price-note{
  margin-top:clamp(36px,4vw,48px);
  display:flex; align-items:flex-start; gap:14px;
  padding:20px 24px; border-radius:var(--r-lg);
  background:linear-gradient(100deg, #F4F7FF 0%, #F7FAFF 60%, #F3FBFA 100%);
  border:1px solid #DEE6FA;
}
.price-note svg{width:20px;height:20px;color:var(--acc-deep);flex:none;margin-top:2px}
.price-note p{font-size:15px; line-height:1.6; color:#33405E}
.price-note b{color:var(--t-strong); font-weight:600}

/* pricing FAQ-ish strip reused for the authorization note */
.fine-print{
  margin-top:26px; text-align:center; font-size:13.8px; color:var(--t-muted); line-height:1.6;
}

/* ==========================================================================
   16. HOW IT WORKS PAGE — 5-stage pipeline
   ========================================================================== */
.pipeline{display:grid; grid-template-columns:repeat(5,1fr); gap:16px; position:relative}
@media (max-width:1040px){.pipeline{grid-template-columns:repeat(3,1fr)}}
@media (max-width:720px){.pipeline{grid-template-columns:repeat(2,1fr)}}
@media (max-width:520px){.pipeline{grid-template-columns:1fr; max-width:420px; margin-inline:auto}}

.stage{
  position:relative; text-align:center;
  background:var(--paper); border:1px solid var(--paper-line);
  border-radius:var(--r-lg); padding:26px 20px;
  transition:transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s;
}
.stage:hover{transform:translateY(-4px); box-shadow:var(--shadow-md); border-color:#D8DDEC}
.stage .n{
  width:38px;height:38px;border-radius:12px; margin:0 auto 15px;
  display:grid;place-items:center;
  font-family:var(--font-display); font-weight:600; font-size:16px; letter-spacing:0; color:#fff;
  background:linear-gradient(160deg, var(--acc) 0%, var(--acc-deep) 100%);
  box-shadow:0 8px 20px -8px rgba(61,99,214,.8);
}
.stage .st{font-family:var(--font-display); font-weight:600; font-size:var(--fs-h5); color:var(--t-strong); letter-spacing:var(--tr-h5)}
.stage .sd{font-size:14px; line-height:1.55; color:var(--t-muted); margin-top:8px}
.stage .arrow{
  position:absolute; right:-13px; top:44px; z-index:2;
  color:#C3CDE6; display:grid; place-items:center;
}
.stage .arrow svg{width:18px;height:18px}
@media (max-width:1040px){.stage .arrow{display:none}}

/* trust panel */
.trust-panel{
  margin-top:clamp(44px,5vw,60px);
  position:relative; overflow:hidden;
  background:linear-gradient(160deg, var(--ink-800) 0%, var(--ink-900) 100%);
  border-radius:var(--r-xl); padding:clamp(28px,3.6vw,40px);
  box-shadow:var(--shadow-lg);
}
.trust-panel::before{
  content:""; position:absolute; inset:0;
  background:radial-gradient(ellipse 70% 60% at 15% 0%, rgba(91,140,255,.26) 0%, transparent 60%);
  pointer-events:none;
}
.trust-panel > *{position:relative}
.trust-panel h3{color:#fff; font-size:var(--fs-h4); letter-spacing:var(--tr-h4); margin-bottom:8px}
.trust-panel .tp-sub{font-size:15px; color:var(--t-on-dark-soft); margin-bottom:26px; max-width:60ch}
.trust-panel ul{display:grid; grid-template-columns:1fr 1fr; gap:16px}
@media (max-width:760px){.trust-panel ul{grid-template-columns:1fr}}
.trust-panel li{
  display:flex; gap:13px; align-items:flex-start;
  font-size:15px; line-height:1.6; color:#BAC4DC;
  background:rgba(255,255,255,.035); border:1px solid rgba(255,255,255,.08);
  border-radius:var(--r-md); padding:16px 18px;
}
.trust-panel li svg{width:18px;height:18px;flex:none;margin-top:3px;color:var(--acc-cyan)}
.trust-panel li b{color:#fff; font-weight:600}

/* ==========================================================================
   17. SAMPLE SCORECARD PAGE
   ========================================================================== */
.report{
  background:
    radial-gradient(ellipse 70% 50% at 50% 0%, rgba(91,140,255,.16) 0%, rgba(91,140,255,0) 60%),
    var(--ink-900);
  overflow:hidden;
}

/* summary counters */
.summary{display:flex; gap:12px; flex-wrap:wrap; margin-top:20px}
.summary .sc{
  flex:1 1 90px; min-width:90px;
  background:rgba(255,255,255,.035); border:1px solid rgba(255,255,255,.08);
  border-radius:var(--r-md); padding:14px 16px;
}
.summary .sc b{
  display:block; font-family:var(--font-display); font-size:var(--fs-h3); font-weight:600;
  letter-spacing:var(--tr-h3); line-height:1.1;
}
.summary .sc span{display:block; font-size:12.5px; color:var(--t-on-dark-faint); margin-top:3px}
.summary .p b{color:#5FDBA3}
.summary .w b{color:#F0C25F}
.summary .f b{color:#F58C77}

.verdict{
  font-family:var(--font-display); font-size:var(--fs-h4); font-weight:600;
  color:#fff; letter-spacing:var(--tr-h4); margin-bottom:10px;
}
.verdict-p{font-size:15px; line-height:1.6; color:var(--t-on-dark-soft); max-width:52ch}

/* category rows with progress bars */
.row-bar{
  display:block; height:5px; border-radius:3px; margin-top:9px;
  background:rgba(255,255,255,.08); overflow:hidden;
}
.row-bar > i{
  display:block; height:100%; border-radius:3px; width:0;
  transition:width 1.1s cubic-bezier(.16,.84,.32,1) .2s;
}
.cat-rows.on .row-bar > i{width:var(--w)}
.row-bar > i.g-pass{background:linear-gradient(90deg,#2FBF7E,#5FDBA3)}
.row-bar > i.g-part{background:linear-gradient(90deg,#E0A21A,#F0C25F)}
.row-bar > i.g-fail{background:linear-gradient(90deg,#E5533D,#F58C77)}

/* the bar sits under the label block, so let .rt breathe */
.row.has-bar{align-items:flex-start}
.row.has-bar .ri{margin-top:2px}
.row.has-bar .badge,.row.has-bar .rs{margin-top:4px}

/* ==========================================================================
   18. OVERVIEW / SALES SHEET PAGE
   ========================================================================== */
.ov-grid{display:grid; grid-template-columns:1fr 1fr; gap:clamp(26px,4vw,48px)}
@media (max-width:860px){.ov-grid{grid-template-columns:1fr}}

.ov-h{
  display:inline-block; font-size:12px; font-weight:700; letter-spacing:.12em;
  text-transform:uppercase; color:var(--acc-deep); margin-bottom:16px;
}
.prob{
  display:flex; gap:12px; align-items:flex-start;
  background:linear-gradient(100deg, #FEF4F2 0%, #FDF7F5 100%);
  border:1px solid #F6DCD5; border-radius:var(--r-md);
  padding:14px 16px; margin-bottom:10px;
  font-size:14.8px; line-height:1.55; color:#7A3A2C;
  transition:transform .28s var(--ease), box-shadow .28s var(--ease);
}
.prob:hover{transform:translateX(4px); box-shadow:var(--shadow-sm)}
.prob svg{width:17px;height:17px;flex:none;margin-top:3px;color:var(--bad)}
.prob b{color:#B23A26; font-weight:600}

.ov-t{font-size:15.5px; line-height:1.62; color:var(--t-body)}

.chips{display:flex; flex-wrap:wrap; gap:9px; margin-top:18px}
.chip{
  font-size:13.5px; font-weight:600; letter-spacing:-.01em;
  background:rgba(91,140,255,.08); color:var(--acc-deep);
  border:1px solid rgba(91,140,255,.20);
  border-radius:999px; padding:7px 15px;
  transition:transform .25s var(--ease), background .25s;
}
.chip:hover{transform:translateY(-2px); background:rgba(91,140,255,.14)}

.ov-divider{height:1px; background:var(--paper-line); margin-block:clamp(36px,4.6vw,56px)}

.diff-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:18px}
@media (max-width:940px){.diff-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.diff-grid{grid-template-columns:1fr}}

.dcard{
  background:var(--paper); border:1px solid var(--paper-line);
  border-radius:var(--r-lg); padding:22px 20px;
  transition:transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s;
}
.dcard:hover{transform:translateY(-4px); box-shadow:var(--shadow-md); border-color:#D8DDEC}
.dcard .di{
  width:42px;height:42px;border-radius:12px; display:grid;place-items:center; margin-bottom:15px;
  background:linear-gradient(155deg, var(--ink-800) 0%, var(--ink-900) 100%);
  color:#8FB4FF; box-shadow:0 8px 20px -10px rgba(14,20,40,.7);
}
.dcard .di svg{width:20px;height:20px}
.dcard .dt{font-family:var(--font-display); font-weight:600; font-size:var(--fs-h5); color:var(--t-strong); letter-spacing:var(--tr-h5)}
.dcard .dd{font-size:14.3px; line-height:1.55; color:var(--t-muted); margin-top:6px}

/* ==========================================================================
   19. SHARED SMALL PIECES
   ========================================================================== */
.note-line{
  text-align:center; font-size:13.5px; color:var(--t-muted);
  margin-top:24px; line-height:1.6;
}
.dark .note-line{color:var(--t-on-dark-faint)}

/* cross-page "next step" nav at the foot of sub-pages */
.next-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:18px}
@media (max-width:820px){.next-grid{grid-template-columns:1fr; max-width:520px; margin-inline:auto}}
.next-card{
  display:flex; flex-direction:column; gap:8px;
  background:var(--paper); border:1px solid var(--paper-line);
  border-radius:var(--r-lg); padding:24px 22px;
  transition:transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s;
}
.next-card:hover{transform:translateY(-4px); box-shadow:var(--shadow-md); border-color:#D8DDEC}
.next-card .nk{
  font-size:11.5px; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
  color:var(--acc-deep);
}
.next-card b{font-family:var(--font-display); font-size:var(--fs-h5); font-weight:600; color:var(--t-strong); letter-spacing:var(--tr-h5)}
.next-card p{font-size:14.4px; line-height:1.55; color:var(--t-muted)}
.next-card .go{
  display:inline-flex; align-items:center; gap:7px; margin-top:6px;
  font-size:14.2px; font-weight:600; color:var(--acc-deep);
}
.next-card .go svg{width:15px;height:15px; transition:transform .25s var(--ease)}
.next-card:hover .go svg{transform:translateX(4px)}

/* ==========================================================================
   20. REDUCED MOTION
   ========================================================================== */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    transition-delay:0ms !important;
  }
  .rv{opacity:1 !important; transform:none !important}
  .dial .ring-fg{stroke-dashoffset:var(--dash-offset, 61.07)}
  .spark path.draw,.spark polyline.draw{stroke-dashoffset:0}
  .spark .fade-el{opacity:1}
  .row-bar > i{width:var(--w)}
  .btn:hover,.cat:hover,.step:hover,.why-card:hover,.chat-card:hover,.who-list li:hover,
  .row:hover,.tier:hover,.stage:hover,.dcard:hover,.next-card:hover,.prob:hover,.chip:hover{transform:none}
}