/* ============================================================
   JARVIS — site.css
   Sections beneath the hero. Reuses the hero's :root tokens
   (--cyan, --blue, --amber, --bg, --glow, fonts, etc.).
   ============================================================ */

/* shared design tokens (also defined in the hero page's inline <style>; duplicated
   here so standalone pages that only link site.css inherit the same system) */
:root{
  --bg:#03060d; --bg-2:#060c18;
  --cyan:#54e6ff; --cyan-soft:#8af2ff; --blue:#2b7bff; --blue-deep:#0a3a86;
  --glow:rgba(84,230,255,0.55); --glow-soft:rgba(84,230,255,0.12);
  --amber:#ffb648;
  --line:rgba(120,200,255,0.10); --line-strong:rgba(120,200,255,0.22);
  --txt:#dff3ff; --txt-dim:rgba(193,224,245,0.55); --hud:rgba(150,215,255,0.62);
  --font-display:"Space Grotesk", system-ui, sans-serif;
  --font-mono:"Space Mono", ui-monospace, monospace;
}
@keyframes jv-blink{ 0%,100%{opacity:1} 50%{opacity:.25} }
@keyframes jv-eq{ 0%,100%{ height:20%; opacity:.6 } 50%{ height:100%; opacity:1 } }

html{ scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--bg);
  color:var(--txt);
  font-family:var(--font-display);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

/* one continuous HUD environment behind every section below the hero */
.jv-site{
  position:relative;
  z-index:1;
  background:
    radial-gradient(120% 60% at 50% 0%, rgba(14,34,64,.55), transparent 60%),
    linear-gradient(180deg, #03060d 0%, #04080f 40%, #03060d 100%);
}
.jv-site::before{
  content:"";
  position:absolute; inset:0;
  background-image:
    linear-gradient(rgba(120,200,255,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(120,200,255,.045) 1px, transparent 1px);
  background-size:64px 64px;
  mask-image:linear-gradient(180deg, transparent 0, #000 6%, #000 94%, transparent 100%);
  -webkit-mask-image:linear-gradient(180deg, transparent 0, #000 6%, #000 94%, transparent 100%);
  pointer-events:none;
  z-index:0;
}
.jv-site > *{ position:relative; z-index:1; }

/* ---------- section scaffold ---------- */
.sec{
  position:relative;
  padding:clamp(72px, 11vh, 132px) clamp(20px, 5vw, 64px);
}
.sec--tight{ padding-top:clamp(40px,6vh,72px); }
.wrap{ max-width:1240px; margin:0 auto; }
.wrap--narrow{ max-width:920px; }

.sec-head{ text-align:center; margin:0 auto clamp(40px, 6vh, 72px); max-width:760px; }
.eyebrow{
  font-family:var(--font-mono);
  font-size:clamp(10px,1vw,12px); letter-spacing:.34em; text-transform:uppercase;
  color:var(--cyan-soft);
  display:inline-flex; align-items:center; gap:10px;
  padding:7px 15px;
  border:1px solid var(--line-strong); border-radius:999px;
  background:rgba(10,22,40,.4);
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  margin-bottom:22px;
}
.eyebrow::before{
  content:""; width:6px; height:6px; border:1px solid var(--cyan);
  transform:rotate(45deg); box-shadow:0 0 8px var(--glow);
}
.sec-title{
  font-weight:700;
  font-size:clamp(28px, 4.4vw, 56px);
  line-height:1.06; letter-spacing:-0.02em;
  margin:0; text-wrap:balance;
}
.sec-title .hl{
  background:linear-gradient(180deg,#fff 0%, var(--cyan-soft) 55%, var(--cyan) 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  text-shadow:0 0 34px var(--glow-soft);
}
.sec-sub{
  color:var(--txt-dim);
  font-size:clamp(15px, 1.55vw, 19px);
  line-height:1.65; margin:20px auto 0; max-width:680px; text-wrap:pretty;
}

/* ---------- shared glass surface ---------- */
.glass{
  position:relative;
  background:linear-gradient(180deg, rgba(13,27,50,.52), rgba(6,13,25,.4));
  border:1px solid var(--line-strong);
  border-radius:16px;
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  overflow:hidden;
  box-shadow:inset 0 1px 0 rgba(160,220,255,.08), 0 18px 48px rgba(0,0,0,.4);
}
/* faint top hairline + corner ticks */
.glass::before{
  content:""; position:absolute; top:0; left:18px; right:18px; height:1px;
  background:linear-gradient(90deg, transparent, rgba(140,242,255,.5), transparent);
  opacity:.7;
}
.tick-tl::after, .tick-br::after{ content:""; position:absolute; width:12px; height:12px; pointer-events:none; opacity:.55; }
.tick-tl::after{ top:10px; left:10px; border-top:1px solid var(--cyan); border-left:1px solid var(--cyan); }
.tick-br::after{ bottom:10px; right:10px; border-bottom:1px solid var(--cyan); border-right:1px solid var(--cyan); }

/* ---------- scroll reveal ---------- */
.reveal{ opacity:0; transform:translateY(30px); transition:opacity .85s cubic-bezier(.2,.7,.2,1), transform .85s cubic-bezier(.2,.7,.2,1); transition-delay:var(--d,0s); will-change:opacity,transform; }
.reveal.in{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){
  .reveal{ opacity:1 !important; transform:none !important; }
}

/* mono micro-label used across sections */
.mono-tag{ font-family:var(--font-mono); font-size:11px; letter-spacing:.22em; text-transform:uppercase; color:var(--hud); }

/* generic glowing buttons (reuse hero feel) */
.btn{
  position:relative; display:inline-flex; align-items:center; justify-content:center; gap:10px;
  font-family:var(--font-mono); font-size:13px; letter-spacing:.16em; text-transform:uppercase;
  padding:15px 28px; min-height:50px; border-radius:9px; cursor:pointer; border:1px solid transparent;
  text-decoration:none; transition:transform .25s ease, box-shadow .35s ease, background .35s ease, border-color .35s ease;
}
.btn:active{ transform:translateY(1px) scale(.99); }
.btn--primary{
  color:#021018; font-weight:700;
  background:linear-gradient(180deg, var(--cyan-soft), var(--cyan));
  border-color:rgba(190,245,255,.7);
  box-shadow:0 8px 32px rgba(43,160,255,.45), 0 0 60px var(--glow-soft);
}
.btn--primary:hover{ transform:translateY(-2px); box-shadow:0 12px 46px rgba(43,160,255,.6), 0 0 90px var(--glow); }
.btn--ghost{
  color:var(--cyan-soft); background:rgba(12,26,46,.4); border-color:var(--line-strong);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
}
.btn--ghost:hover{ transform:translateY(-2px); border-color:rgba(140,242,255,.55); background:rgba(20,44,76,.5); box-shadow:0 0 30px var(--glow-soft); }
.preview-btn{ margin:10px 0 2px; box-sizing:border-box; display:flex; align-items:center; justify-content:center; text-align:center; }
.preview-note{ text-align:center; font-size:11px; color:var(--txt-dim); margin:7px 0 2px; font-family:var(--font-mono); letter-spacing:.04em; }

/* =========================================================
   SOCIAL PROOF
   ========================================================= */
.stats-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(14px,1.6vw,22px); }
.stat{ padding:30px 26px 24px; text-align:left; }
.stat .stat-top{ display:flex; align-items:center; justify-content:space-between; margin-bottom:18px; }
.stat .stat-top .mono-tag{ font-size:9.5px; }
.stat .dot{ width:7px; height:7px; border-radius:50%; background:var(--cyan); box-shadow:0 0 10px var(--cyan); animation:jv-blink 2.2s ease-in-out infinite; }
.stat .num{ font-size:clamp(34px, 4.2vw, 54px); font-weight:700; letter-spacing:-0.02em; line-height:1;
  background:linear-gradient(180deg,#fff, var(--cyan-soft)); -webkit-background-clip:text; background-clip:text; color:transparent;
  text-shadow:0 0 30px var(--glow-soft); }
.stat .num .suffix{ color:var(--cyan); -webkit-text-fill-color:var(--cyan); }
.stat .label{ margin-top:10px; color:var(--txt-dim); font-size:14px; line-height:1.4; }
.stat .mini-bar{ height:3px; border-radius:3px; background:rgba(120,200,255,.12); overflow:hidden; margin-top:18px; }
.stat .mini-bar i{ display:block; height:100%; width:0; border-radius:3px; background:linear-gradient(90deg,var(--blue),var(--cyan)); box-shadow:0 0 10px var(--glow); transition:width 1.6s cubic-bezier(.2,.7,.2,1); }
.stat:hover{ border-color:rgba(140,242,255,.45); box-shadow:0 0 0 1px rgba(140,242,255,.18), 0 22px 60px rgba(0,0,0,.5), 0 0 50px var(--glow-soft); transform:translateY(-4px); transition:transform .35s ease, box-shadow .35s ease, border-color .35s ease; }

/* =========================================================
   WHAT IS JARVIS
   ========================================================= */
.split{ display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(30px,4vw,64px); align-items:center; }
.about-copy h2{ font-weight:700; font-size:clamp(26px,3.6vw,46px); line-height:1.1; letter-spacing:-0.02em; margin:0 0 22px; }
.about-copy p{ color:var(--txt-dim); font-size:clamp(15px,1.5vw,18px); line-height:1.7; margin:0 0 18px; max-width:560px; }
.pillars{ display:flex; flex-wrap:wrap; gap:10px; margin-top:26px; }
.pillar{ font-family:var(--font-mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--cyan-soft);
  padding:9px 14px; border:1px solid var(--line-strong); border-radius:999px; background:rgba(12,26,46,.4); display:inline-flex; align-items:center; gap:8px; }
.pillar::before{ content:""; width:5px; height:5px; border-radius:50%; background:var(--cyan); box-shadow:0 0 8px var(--cyan); }

/* floating interface panels visual */
.panels{ position:relative; min-height:440px; }
.panel{ position:absolute; padding:18px 18px 16px; width:min(78%, 360px); }
.panel .p-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; }
.panel .p-title{ font-family:var(--font-mono); font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--cyan-soft); }
.panel .p-dots{ display:flex; gap:5px; }
.panel .p-dots i{ width:6px; height:6px; border-radius:50%; background:rgba(140,242,255,.5); }
.panel-a{ top:0; left:0; z-index:3; animation:floaty 7s ease-in-out infinite; }
.panel-b{ top:120px; right:0; z-index:2; animation:floaty 8.5s ease-in-out infinite .6s; }
.panel-c{ bottom:0; left:32px; z-index:4; animation:floaty 9.5s ease-in-out infinite 1.1s; }
@keyframes floaty{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-12px); } }
@media (prefers-reduced-motion: reduce){ .panel-a,.panel-b,.panel-c{ animation:none; } }

.code-line{ display:flex; gap:8px; align-items:center; font-family:var(--font-mono); font-size:12px; color:var(--txt-dim); margin:7px 0; }
.code-line .k{ color:var(--cyan); } .code-line .a{ color:var(--amber); }
.wave{ display:flex; align-items:flex-end; gap:3px; height:40px; margin-top:6px; }
.wave i{ width:4px; border-radius:2px; background:linear-gradient(180deg,var(--cyan),var(--blue)); box-shadow:0 0 6px var(--glow); animation:jv-eq 1.2s ease-in-out infinite; }
.mem-row{ display:flex; align-items:center; gap:10px; margin:9px 0; font-size:12px; color:var(--txt-dim); font-family:var(--font-mono); }
.mem-row .chip{ width:26px; height:26px; border:1px solid var(--line-strong); border-radius:6px; display:grid; place-items:center; color:var(--cyan); flex:0 0 auto; }
.mem-bar{ flex:1; height:4px; border-radius:3px; background:rgba(120,200,255,.12); overflow:hidden; }
.mem-bar i{ display:block; height:100%; background:linear-gradient(90deg,var(--blue),var(--cyan)); box-shadow:0 0 8px var(--glow); }

/* =========================================================
   CORE CAPABILITIES
   ========================================================= */
.cap-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(240px,1fr)); gap:clamp(14px,1.4vw,20px); }
.cap{ padding:26px 24px; cursor:default; transition:transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .35s ease, border-color .35s ease; }
.cap .ico{ width:52px; height:52px; border-radius:12px; display:grid; place-items:center; color:var(--cyan);
  border:1px solid var(--line-strong); background:radial-gradient(circle at 35% 30%, rgba(84,230,255,.18), rgba(10,22,40,.4)); margin-bottom:18px;
  transition:box-shadow .35s ease, color .35s ease; box-shadow:inset 0 0 18px rgba(84,230,255,.08); }
.cap .ico svg{ width:24px; height:24px; }
.cap h3{ font-size:18px; font-weight:600; margin:0 0 8px; letter-spacing:-0.01em; }
.cap p{ color:var(--txt-dim); font-size:13.5px; line-height:1.55; margin:0; }
.cap .more{ overflow:hidden; max-height:0; opacity:0; transition:max-height .4s ease, opacity .4s ease, margin .4s ease; margin-top:0; }
.cap .more p{ font-family:var(--font-mono); font-size:11.5px; letter-spacing:.04em; color:var(--cyan-soft); line-height:1.5; }
.cap .more .div{ height:1px; background:linear-gradient(90deg, var(--line-strong), transparent); margin:14px 0 12px; }
.cap:hover{ transform:translateY(-6px); border-color:rgba(140,242,255,.5); box-shadow:0 0 0 1px rgba(140,242,255,.2), 0 26px 60px rgba(0,0,0,.55), 0 0 50px var(--glow-soft); }
.cap:hover .ico{ color:var(--cyan-soft); box-shadow:0 0 24px var(--glow), inset 0 0 20px rgba(84,230,255,.2); }
.cap:hover .more{ max-height:120px; opacity:1; }
.cap .idx{ position:absolute; top:18px; right:18px; font-family:var(--font-mono); font-size:11px; color:var(--txt-dim); letter-spacing:.1em; }

/* =========================================================
   COMPARISON
   ========================================================= */
.cmp{ overflow:hidden; }
.cmp-row{ display:grid; grid-template-columns:1.2fr 1fr 1fr; align-items:stretch; border-bottom:1px solid var(--line); }
.cmp-row:last-child{ border-bottom:0; }
.cmp-head{ font-family:var(--font-mono); letter-spacing:.16em; text-transform:uppercase; font-size:12px; }
.cmp-head-row .cmp-cell{ padding-top:52px; padding-bottom:14px; }
.cmp-cell{ padding:18px clamp(14px,2vw,26px); display:flex; align-items:center; gap:10px; font-size:14.5px; color:var(--txt); }
.cmp-cat{ color:var(--txt-dim); font-family:var(--font-mono); font-size:12px; letter-spacing:.12em; text-transform:uppercase; }
.cmp-trad{ color:var(--txt-dim); }
.cmp-trad .x{ color:rgba(255,120,120,.7); }
.cmp-jv{ position:relative; color:var(--txt); background:linear-gradient(180deg, rgba(20,52,92,.34), rgba(10,28,52,.22)); }
.cmp-jv .ck{ color:var(--cyan); filter:drop-shadow(0 0 6px var(--glow)); flex:0 0 auto; }
.cell-tag{ display:none; }
.cmp-head.cmp-jv{ color:var(--cyan-soft); }
.cmp .col-glow{ position:absolute; inset:0; pointer-events:none; box-shadow:inset 0 0 0 1px rgba(140,242,255,.3), inset 0 0 40px rgba(84,230,255,.08); border-radius:14px; }
.cmp-wrap{ position:relative; border-radius:16px; }
.cmp-jv-badge{ position:absolute; top:12px; right:18%; transform:translateX(50%); z-index:3;
  font-family:var(--font-mono); font-size:10px; letter-spacing:.2em; text-transform:uppercase; color:#021018; font-weight:700;
  padding:6px 14px; border-radius:999px; background:linear-gradient(180deg,var(--cyan-soft),var(--cyan)); box-shadow:0 0 24px var(--glow); }

/* =========================================================
   DEMO
   ========================================================= */
.video-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(16px,1.8vw,24px); }
.vcard{ position:relative; border-radius:16px; overflow:hidden; cursor:pointer; border:1px solid var(--line-strong); background:#05101f; }
.vcard .frame{ position:relative; aspect-ratio:16/9; overflow:hidden;
  background:
    repeating-linear-gradient(135deg, rgba(120,200,255,.05) 0 10px, transparent 10px 20px),
    radial-gradient(120% 90% at 50% 30%, rgba(20,52,92,.5), rgba(5,12,24,.9)); }
.vcard .scan{ position:absolute; inset:0; background:repeating-linear-gradient(to bottom, transparent 0 3px, rgba(0,8,16,.25) 3px 4px); opacity:.4; }
.vcard .play{ position:absolute; inset:0; display:grid; place-items:center; }
.vcard .play .disc{ width:64px; height:64px; border-radius:50%; display:grid; place-items:center;
  background:rgba(8,20,38,.6); border:1px solid rgba(140,242,255,.5); box-shadow:0 0 30px var(--glow-soft); backdrop-filter:blur(6px);
  transition:transform .3s ease, box-shadow .3s ease; }
.vcard .play .disc::after{ content:""; width:0;height:0;border-style:solid;border-width:9px 0 9px 15px;border-color:transparent transparent transparent var(--cyan-soft); margin-left:4px; }
.vcard:hover .play .disc{ transform:scale(1.1); box-shadow:0 0 40px var(--glow); }
.vcard .v-meta{ position:absolute; left:16px; bottom:14px; right:16px; display:flex; align-items:center; justify-content:space-between; }
.vcard .v-title{ font-size:15px; font-weight:600; }
.vcard .v-dur{ font-family:var(--font-mono); font-size:11px; color:var(--cyan-soft); letter-spacing:.1em; }
.vcard .border-anim{ position:absolute; inset:0; border-radius:16px; padding:1px; pointer-events:none;
  background:conic-gradient(from 0deg, transparent 0deg, var(--cyan) 40deg, transparent 120deg, transparent 360deg);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude;
  opacity:0; transition:opacity .4s ease; animation:spinborder 4s linear infinite; }
.vcard:hover .border-anim{ opacity:.9; }
@keyframes spinborder{ to{ transform:rotate(360deg); } }
@media (prefers-reduced-motion: reduce){ .vcard .border-anim{ animation:none; } }
.vcard{ background:#000; }
.vcard .frame{ position:relative; }
.vcard iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }
.yt-mount{ position:absolute; inset:0; z-index:1; }
.yt-mount iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }

/* real video thumbnail — the resting first frame; fades out while playing */
.yt-thumb{ position:absolute; inset:0; z-index:2; background-size:cover; background-position:center;
  transition:opacity .4s ease; }
.vcard.is-playing .yt-thumb{ opacity:0; }

/* poster overlays (play disc + label) sit above the thumbnail, fade out while playing */
.vcard .scan{ z-index:2; }
.vcard .play, .vcard .v-meta, .vcard .border-anim{ z-index:3; transition:opacity .35s ease; }
.vcard.is-playing .play, .vcard.is-playing .v-meta{ opacity:0; pointer-events:none; }

/* transparent click-shield — blocks clicks/right-click and YouTube's hover chrome */
.yt-shield{ position:absolute; inset:0; z-index:4; cursor:pointer; background:transparent; }

/* =========================================================
   PRICING
   ========================================================= */
.price-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(14px,1.4vw,20px); align-items:stretch; }
.price{ display:flex; flex-direction:column; padding:30px 26px; }
.price .tier{ font-family:var(--font-mono); font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--cyan-soft); }
.price .amt{ font-size:clamp(34px,3.6vw,46px); font-weight:700; letter-spacing:-0.02em; margin:14px 0 4px; }
.price .amt small{ font-size:14px; font-weight:500; color:var(--txt-dim); letter-spacing:0; }
.price .amt .was{ font-size:.5em; font-weight:500; letter-spacing:0; margin-left:8px; vertical-align:middle;
  color:#7c91a3; -webkit-text-fill-color:#7c91a3;
  position:relative; display:inline-block; }
/* diagonal slash instead of a flat line-through (a flat line made $297 read like $207) */
.price .amt .was::after{ content:""; position:absolute; left:-3px; right:-3px; top:50%;
  border-top:2px solid var(--cyan); transform:rotate(-16deg); }
.price .price-sub{ color:var(--txt-dim); font-size:13px; line-height:1.5; min-height:38px; }
.price .feat{ list-style:none; padding:0; margin:22px 0 26px; display:flex; flex-direction:column; gap:11px; flex:1; }
.price .feat li{ display:flex; gap:10px; font-size:13.5px; color:var(--txt); line-height:1.45; }
.price .feat li .ck{ color:var(--cyan); flex:0 0 auto; filter:drop-shadow(0 0 5px var(--glow)); }
.price .feat li.incl{ color:var(--txt-dim); font-family:var(--font-mono); font-size:11.5px; letter-spacing:.04em; text-transform:uppercase; }
.price .btn{ width:100%; }
.price:hover{ transform:translateY(-5px); border-color:rgba(140,242,255,.4); box-shadow:0 24px 60px rgba(0,0,0,.5), 0 0 40px var(--glow-soft); transition:transform .35s ease, box-shadow .35s ease, border-color .35s ease; }
.price--founder{ border-color:rgba(140,242,255,.55); box-shadow:0 0 0 1px rgba(140,242,255,.3), 0 0 60px var(--glow-soft); overflow:visible; }
.price--founder::after{ content:""; position:absolute; inset:-1px; border-radius:16px; pointer-events:none;
  background:linear-gradient(180deg, rgba(84,230,255,.12), transparent 60%); }
.price--founder .amt{ background:linear-gradient(180deg,#fff,var(--cyan-soft)); -webkit-background-clip:text; background-clip:text; color:transparent; }
.badge-exclusive{ position:absolute; top:-13px; left:50%; transform:translateX(-50%); z-index:3; white-space:nowrap;
  font-family:var(--font-mono); font-size:10px; letter-spacing:.22em; text-transform:uppercase; color:#021018; font-weight:700;
  padding:7px 16px; border-radius:999px; background:linear-gradient(180deg,var(--cyan-soft),var(--cyan)); box-shadow:0 0 26px var(--glow); }
.price-note{ text-align:center; margin-top:26px; }
.price-support{ font-size:12px; line-height:1.5; color:var(--cyan-soft); font-family:var(--font-mono); letter-spacing:.02em; margin:4px 0 18px; padding-top:14px; border-top:1px solid var(--line); }

/* pricing disclaimer */
.price-disclaimer{ display:flex; gap:14px; align-items:flex-start; max-width:880px; margin:34px auto 0; padding:18px 22px;
  border:1px solid var(--line-strong); border-radius:12px; background:rgba(10,22,40,.4); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); }
.price-disclaimer .pd-icon{ flex:0 0 auto; width:24px; height:24px; border-radius:50%; display:grid; place-items:center;
  border:1px solid rgba(255,182,72,.6); color:var(--amber); font-family:var(--font-mono); font-weight:700; font-size:13px; box-shadow:0 0 14px rgba(255,182,72,.25); }
.price-disclaimer p{ margin:0; color:var(--txt-dim); font-size:13.5px; line-height:1.6; }
.price-disclaimer strong{ color:var(--cyan-soft); font-weight:700; }

/* "before you buy" requirements callout (Claude Pro + API tokens) */
.req-note{ display:flex; gap:14px; align-items:flex-start; max-width:880px; margin:0 auto 26px; padding:16px 22px;
  border:1px solid var(--line-strong); border-radius:12px; background:rgba(10,22,40,.45); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); }
.req-note .rn-icon{ flex:0 0 auto; width:24px; height:24px; border-radius:7px; display:grid; place-items:center;
  border:1px solid var(--line-strong); color:var(--cyan); font-size:13px; box-shadow:0 0 14px var(--glow-soft); }
.req-note p{ margin:0; color:var(--txt-dim); font-size:13.5px; line-height:1.6; }
.req-note strong{ color:var(--cyan-soft); font-weight:700; }

/* VRAM acknowledgement checkbox (Creator / Founder tiers) */
.vram-ack{ display:flex; gap:10px; align-items:flex-start; margin:0 0 14px; padding:11px 13px; border-radius:10px;
  border:1px solid var(--line); background:rgba(6,13,25,.5); cursor:pointer; transition:border-color .2s ease, box-shadow .2s ease; }
.vram-ack input{ flex:0 0 auto; width:16px; height:16px; margin-top:1px; accent-color:var(--cyan); cursor:pointer; }
.vram-ack span{ font-size:11.5px; line-height:1.5; color:var(--txt-dim); font-family:var(--font-mono); letter-spacing:.005em; }
.vram-ack strong{ color:var(--cyan-soft); font-weight:700; }
.vram-ack a{ color:var(--cyan); text-decoration:underline; text-underline-offset:2px; }
.vram-ack a:hover{ color:var(--cyan-soft); }
.vram-ack.needed{ border-color:rgba(255,150,80,.75); box-shadow:0 0 0 3px rgba(255,150,80,.13); }
.vram-note{ font-size:11.5px; line-height:1.5; color:var(--txt-dim); font-family:var(--font-mono); letter-spacing:.005em; margin:0 0 14px; padding:0 2px; }
.vram-note strong{ color:var(--cyan-soft); font-weight:700; }
.vram-note a{ color:var(--cyan); text-decoration:underline; text-underline-offset:2px; }
.vram-note a:hover{ color:var(--cyan-soft); }

/* =========================================================
   CUSTOM IMPLEMENTATION (Application Only)
   ========================================================= */
/* pull the Custom Implementation section up close beneath the pricing disclaimer (page 2 only) */
#pricing{ padding-bottom:clamp(18px,2.5vw,30px); }
#custom{ padding-top:0; }

.custom-panel{ position:relative; padding:clamp(30px,4vw,52px); overflow:visible;
  border-color:rgba(255,182,72,.32);
  background:linear-gradient(135deg, rgba(28,24,18,.5), rgba(8,14,26,.5));
  box-shadow:inset 0 1px 0 rgba(255,210,150,.1), 0 26px 70px rgba(0,0,0,.5), 0 0 60px rgba(255,182,72,.07); }
.custom-panel::before{ background:linear-gradient(90deg, transparent, rgba(255,200,120,.5), transparent); }
.custom-panel .tick-tl::after, .custom-panel .tick-br::after{ display:none; }
.app-only{ position:absolute; top:-13px; left:clamp(28px,4vw,52px); z-index:3;
  font-family:var(--font-mono); font-size:10px; letter-spacing:.24em; text-transform:uppercase; color:#1a1206; font-weight:700;
  padding:7px 16px; border-radius:999px; background:linear-gradient(180deg,#ffd58a,var(--amber)); box-shadow:0 0 26px rgba(255,182,72,.5); }
.custom-grid{ display:grid; grid-template-columns:1.5fr .9fr; gap:clamp(28px,4vw,56px); align-items:center; }
.custom-lead .eyebrow{ border-color:rgba(255,182,72,.4); color:#ffce8f; }
.custom-lead .eyebrow::before{ border-color:var(--amber); box-shadow:0 0 8px rgba(255,182,72,.5); }
.custom-lead h2{ font-weight:700; font-size:clamp(26px,3.4vw,42px); line-height:1.1; letter-spacing:-0.02em; margin:18px 0 16px; }
.custom-lead p{ color:var(--txt-dim); font-size:clamp(15px,1.5vw,17px); line-height:1.7; margin:0 0 24px; max-width:560px; }
.custom-incl{ display:grid; grid-template-columns:1fr 1fr; gap:12px 24px; }
.ci-row{ display:flex; align-items:center; gap:10px; font-size:14px; color:var(--txt); }
.ci-row .ck{ color:var(--amber); filter:drop-shadow(0 0 5px rgba(255,182,72,.5)); flex:0 0 auto; }
.custom-cta{ text-align:center; padding:clamp(24px,2.6vw,32px) clamp(20px,2vw,26px); border:1px solid var(--line-strong); border-radius:14px;
  background:rgba(6,13,25,.5); }
.custom-cta .mono-tag{ display:block; margin-bottom:10px; }
.custom-price{ font-size:clamp(18px,2vw,23px); font-weight:700; line-height:1.25; letter-spacing:-0.01em; margin-bottom:14px;
  background:linear-gradient(180deg,#fff,#ffce8f); -webkit-background-clip:text; background-clip:text; color:transparent; }
.custom-note{ color:var(--txt-dim); font-size:12.5px; line-height:1.5; margin:0 0 22px; }
.custom-cta .btn--primary{ width:100%; background:linear-gradient(180deg,#ffd58a,var(--amber)); border-color:rgba(255,210,150,.7); color:#1a1206;
  box-shadow:0 8px 32px rgba(255,150,40,.4), 0 0 50px rgba(255,182,72,.12); }
.custom-cta .btn--primary:hover{ box-shadow:0 12px 46px rgba(255,150,40,.55), 0 0 80px rgba(255,182,72,.3); }

/* =========================================================
   EARLY ACCESS
   ========================================================= */
.ea{ position:relative; overflow:hidden; }
.ea-glow{ position:absolute; left:50%; top:42%; transform:translate(-50%,-50%); width:min(900px,120vw); aspect-ratio:1; pointer-events:none;
  background:radial-gradient(closest-side, rgba(43,123,255,.28), rgba(43,123,255,.07) 55%, transparent 72%);
  filter:blur(8px); }
.ea-glow::before{ content:""; position:absolute; inset:18%; border-radius:50%;
  background:radial-gradient(closest-side, rgba(84,230,255,.3), transparent 70%); animation:pulseGlow 5s ease-in-out infinite; }
@keyframes pulseGlow{ 0%,100%{ transform:scale(1); opacity:.85; } 50%{ transform:scale(1.08); opacity:1; } }
.ea-ring{ position:absolute; left:50%; top:42%; width:min(640px,92vw); aspect-ratio:1; transform:translate(-50%,-50%); border:1px solid rgba(120,200,255,.14); border-radius:50%; pointer-events:none; }
.ea-ring.r2{ width:min(820px,110vw); border-style:dashed; border-color:rgba(120,200,255,.08); animation:spinborder 60s linear infinite; }
.ea-card{ position:relative; max-width:620px; margin:0 auto; padding:clamp(30px,4vw,48px); text-align:center; }
.ea-card h2{ font-weight:700; font-size:clamp(26px,3.8vw,46px); line-height:1.08; letter-spacing:-0.02em; margin:0 0 16px; }
.ea-card p{ color:var(--txt-dim); font-size:clamp(15px,1.5vw,18px); line-height:1.6; margin:0 auto 28px; max-width:480px; }
.ea-form{ display:flex; flex-direction:column; gap:12px; text-align:left; }
.field label{ display:block; font-family:var(--font-mono); font-size:10.5px; letter-spacing:.18em; text-transform:uppercase; color:var(--hud); margin-bottom:7px; }
.field input{ width:100%; padding:15px 16px; border-radius:10px; border:1px solid var(--line-strong); background:rgba(6,14,26,.7); color:var(--txt);
  font-family:var(--font-display); font-size:15px; transition:border-color .3s ease, box-shadow .3s ease; }
.field input::placeholder{ color:rgba(150,200,235,.4); }
.field input:focus{ outline:none; border-color:rgba(140,242,255,.6); box-shadow:0 0 0 3px rgba(84,230,255,.14); }
.ea-form .btn{ width:100%; margin-top:6px; }
.ea-trust{ display:flex; align-items:center; justify-content:center; gap:10px; margin-top:20px; font-family:var(--font-mono); font-size:11.5px; letter-spacing:.08em; color:var(--txt-dim); }
.ea-trust .pulse{ width:7px;height:7px;border-radius:50%; background:var(--cyan); box-shadow:0 0 10px var(--cyan); animation:jv-blink 2s ease-in-out infinite; }
.ea-success{ display:none; flex-direction:column; align-items:center; gap:14px; padding:20px 0; }
.ea-success.show{ display:flex; }
.ea-success .check{ width:60px; height:60px; border-radius:50%; display:grid; place-items:center; color:var(--cyan); border:1px solid rgba(140,242,255,.5); box-shadow:0 0 30px var(--glow); }

/* =========================================================
   FOUNDER
   ========================================================= */
.founder-split{ display:grid; grid-template-columns:.85fr 1.15fr; gap:clamp(28px,4vw,60px); align-items:center; }
.headshot{ position:relative; border-radius:18px; aspect-ratio:4/3; overflow:hidden; border:1px solid var(--line-strong);
  background:
    repeating-linear-gradient(135deg, rgba(120,200,255,.06) 0 12px, transparent 12px 24px),
    linear-gradient(180deg, rgba(20,44,76,.4), rgba(6,13,25,.7)); display:grid; place-items:center;
  box-shadow:0 26px 70px rgba(0,0,0,.5), 0 0 50px var(--glow-soft); }
.headshot img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:50% 38%; }
.headshot::after{ content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg, transparent 55%, rgba(3,6,13,.45) 100%), radial-gradient(120% 80% at 75% 40%, rgba(84,230,255,.12), transparent 60%); }
.headshot .corners-fr{ position:absolute; inset:14px; border:1px solid rgba(140,242,255,.18); border-radius:10px; }
.founder-copy h2{ font-weight:700; font-size:clamp(26px,3.4vw,44px); line-height:1.1; margin:0 0 6px; letter-spacing:-0.02em; }
.founder-role{ display:flex; flex-wrap:wrap; gap:8px; margin:14px 0 22px; }
.founder-role span{ font-family:var(--font-mono); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--cyan-soft); padding:6px 11px; border:1px solid var(--line-strong); border-radius:999px; }
.founder-copy p{ color:var(--txt-dim); font-size:clamp(15px,1.5vw,17px); line-height:1.75; margin:0 0 16px; max-width:600px; }
.founder-copy .sig{ font-family:var(--font-mono); font-size:13px; color:var(--cyan-soft); letter-spacing:.06em; margin-top:24px; }

/* =========================================================
   FAQ
   ========================================================= */
.faq-list{ display:flex; flex-direction:column; gap:12px; }
.faq{ padding:0; overflow:hidden; }
.faq button.q{ all:unset; cursor:pointer; display:flex; align-items:center; justify-content:space-between; gap:16px; width:100%;
  padding:22px clamp(18px,2.4vw,28px); font-size:clamp(15px,1.7vw,18px); font-weight:500; color:var(--txt); box-sizing:border-box; }
.faq button.q:focus-visible{ outline:1px solid rgba(140,242,255,.6); outline-offset:-2px; }
.faq .sign{ position:relative; width:18px; height:18px; flex:0 0 auto; }
.faq .sign::before, .faq .sign::after{ content:""; position:absolute; background:var(--cyan); box-shadow:0 0 8px var(--glow); transition:transform .35s ease, opacity .35s ease; }
.faq .sign::before{ top:8px; left:0; width:18px; height:2px; }
.faq .sign::after{ left:8px; top:0; width:2px; height:18px; }
.faq.open .sign::after{ transform:scaleY(0); opacity:0; }
.faq .a-wrap{ overflow:hidden; }
.faq .a-inner{ overflow:hidden; max-height:0; transition:max-height .45s cubic-bezier(.2,.7,.2,1); }
.faq.open .a-inner{ max-height:520px; }
.faq .a-inner p{ margin:0; padding:0 clamp(18px,2.4vw,28px) 24px; color:var(--txt-dim); font-size:15px; line-height:1.7; max-width:760px; }

/* =========================================================
   CLOSING + FOOTER
   ========================================================= */
.closing{ position:relative; text-align:center; overflow:hidden; padding-block:clamp(90px,14vh,160px); }
.mini-core{ position:relative; width:clamp(180px,26vw,260px); aspect-ratio:1; margin:0 auto clamp(34px,5vh,52px); }
.mini-core .orb{ position:absolute; inset:24%; border-radius:50%;
  background:radial-gradient(circle at 42% 38%, #eafcff 0%, var(--cyan) 24%, var(--blue) 60%, rgba(10,40,90,.2) 100%);
  box-shadow:0 0 60px var(--glow), 0 0 120px rgba(43,123,255,.5); animation:pulseGlow 4.5s ease-in-out infinite; }
.mini-core .mc-dots{ position:absolute; inset:18%; border-radius:50%;
  background:radial-gradient(circle, rgba(200,245,255,.9) 0 1px, transparent 1.4px) 0 0 / 14px 14px;
  -webkit-mask:radial-gradient(circle at 42% 38%, #000 30%, transparent 64%); mask:radial-gradient(circle at 42% 38%, #000 30%, transparent 64%);
  mix-blend-mode:screen; opacity:.5; animation:spinborder 40s linear infinite; }
.mini-core .mc-ring{ position:absolute; inset:0; border:1px solid rgba(120,200,255,.2); border-radius:50%; }
.mini-core .mc-ring.a{ inset:6%; border-style:dashed; border-color:rgba(120,200,255,.25); animation:spinborder 24s linear infinite; }
.mini-core .mc-ring.b{ inset:-6%; border-color:rgba(120,200,255,.12); animation:spinborder 40s linear infinite reverse; }
@media (prefers-reduced-motion: reduce){ .mini-core .orb,.mini-core .mc-dots,.mini-core .mc-ring.a,.mini-core .mc-ring.b{ animation:none; } }
.closing h2{ font-weight:700; font-size:clamp(30px,5vw,68px); line-height:1.04; letter-spacing:-0.02em; margin:0 auto 20px; max-width:14ch; text-wrap:balance; }
.closing p{ color:var(--txt-dim); font-size:clamp(15px,1.6vw,19px); line-height:1.6; max-width:520px; margin:0 auto 34px; }

.footer{ border-top:1px solid var(--line); padding:clamp(48px,7vh,72px) clamp(20px,5vw,64px) 40px; }
.footer-grid{ max-width:1240px; margin:0 auto; display:flex; flex-wrap:wrap; align-items:flex-start; justify-content:space-between; gap:32px; }
.footer .brand{ font-weight:700; font-size:20px; letter-spacing:.04em; display:flex; align-items:center; gap:10px; }
.footer .brand .gem{ width:14px; height:14px; border:1.5px solid var(--cyan); transform:rotate(45deg); box-shadow:0 0 10px var(--glow); }
.footer .brand-sub{ color:var(--txt-dim); font-size:13px; margin-top:12px; max-width:280px; line-height:1.6; }
.footer nav{ display:flex; gap:48px; flex-wrap:wrap; }
.footer .col h4{ font-family:var(--font-mono); font-size:10.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--hud); margin:0 0 14px; }
.footer .col a{ display:block; color:var(--txt-dim); text-decoration:none; font-size:14px; margin-bottom:10px; transition:color .25s ease; }
.footer .col a:hover{ color:var(--cyan-soft); }
.socials{ display:flex; gap:10px; margin-top:16px; }
.socials a{ width:38px; height:38px; border-radius:9px; border:1px solid var(--line-strong); display:grid; place-items:center; color:var(--cyan-soft); transition:border-color .25s ease, box-shadow .25s ease; }
.socials a:hover{ border-color:rgba(140,242,255,.5); box-shadow:0 0 18px var(--glow-soft); }
.footer-bottom{ max-width:1240px; margin:36px auto 0; padding-top:24px; border-top:1px solid var(--line); display:flex; flex-wrap:wrap; gap:14px; align-items:center; justify-content:space-between; }
.footer-bottom .mono-tag{ font-size:10.5px; }

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width: 1080px){
  .stats-grid{ grid-template-columns:repeat(2,1fr); }
  .price-grid{ grid-template-columns:repeat(2,1fr); }
  .video-grid{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width: 860px){
  .founder-split{ grid-template-columns:1fr; }
  .custom-grid{ grid-template-columns:1fr; }
  .founder-split .headshot{ max-width:360px; }
}
@media (max-width: 600px){
  .stats-grid{ grid-template-columns:1fr; }
  .video-grid{ grid-template-columns:repeat(2,1fr); }     /* 2-up demo videos on phone */
  .custom-incl{ grid-template-columns:1fr; }

  /* Pricing: single column on phone — one product per row, cleaner & less cluttered */
  .price-grid{ grid-template-columns:1fr; gap:16px; }
  .price{ padding:22px 18px; }
  .price .tier{ font-size:9.5px; letter-spacing:.16em; }
  .price .amt{ font-size:28px; margin:9px 0 3px; }
  .price .amt .was{ margin-left:6px; }
  .price .price-sub{ font-size:11.5px; line-height:1.4; min-height:0; margin-bottom:2px; }
  .price .feat{ margin:13px 0 15px; gap:9px; }
  .price .feat li{ font-size:11.5px; gap:7px; line-height:1.4; }
  .price .feat li.incl{ font-size:10px; }
  .price-support{ font-size:10.5px; margin:2px 0 13px; padding-top:10px; }
  .price .btn{ font-size:10.5px; padding:11px 8px; letter-spacing:.05em; }
  .badge-exclusive{ font-size:8.5px; padding:5px 11px; letter-spacing:.14em; top:-11px; }

  .eyebrow{ white-space:nowrap; }   /* short labels never wrap */

  /* About: copy stacked above the floating panel cluster — full-width readable copy
     (a side-by-side split squeezes the text column too narrow on a phone), with the
     layered floating panels shown at a comfortable size below */
  .split{ grid-template-columns:1fr; gap:30px; }
  .about-copy h2{ font-size:clamp(25px,7.4vw,34px); margin-bottom:16px; }
  .about-copy p{ font-size:14.5px; line-height:1.65; max-width:none; }
  .panels{ width:min(340px,100%); margin:0 auto; min-height:432px; }
  .panel{ width:min(86%,262px); }
  /* space the three panels out so each is mostly visible (gentle corner overlap),
     and layer Voice Engine OVER Console, Memory Core on top */
  .panel-a{ top:0; left:0; z-index:2; }
  .panel-b{ top:150px; right:0; left:auto; z-index:3; }
  .panel-c{ top:auto; bottom:0; left:20px; z-index:4; }

  /* Capabilities: two per row, with aligned titles so cards read evenly */
  .cap-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
  .cap{ padding:18px 15px; }
  .cap .ico{ width:42px; height:42px; border-radius:10px; margin-bottom:13px; }
  .cap .ico svg{ width:20px; height:20px; }
  .cap h3{ font-size:14px; line-height:1.2; min-height:2.4em; display:flex; align-items:flex-start; }
  .cap p{ font-size:12px; line-height:1.5; }
  .cap .idx{ top:14px; right:14px; font-size:10px; }

  /* Comparison: SAME 3-column table as desktop, tightened so cells stay ~2 lines.
     Use block flow (not flex) so the ◆/✕ icon sits inline and text wraps compactly */
  .cmp-row{ grid-template-columns:0.72fr 1fr 1fr; }
  .cmp-cell{ display:block; padding:9px 7px; font-size:9.5px; line-height:1.45; min-width:0; }
  .cmp-cat{ font-size:8.5px; letter-spacing:.03em; }
  .cmp-jv .ck, .cmp-trad .x{ margin-right:3px; }
  .cmp-head-row .cmp-cell{ padding-top:32px; padding-bottom:9px; }
  .cmp-head{ font-size:9.5px; letter-spacing:.05em; }
  .cmp-jv-badge{ top:8px; font-size:8px; padding:4px 8px; letter-spacing:.1em; }

  /* Footer: brand + nav stacked, links tidy */
  .footer{ padding-left:clamp(20px,6vw,40px); padding-right:clamp(20px,6vw,40px); }
  .footer-grid{ flex-direction:column; gap:36px; }
  .footer .brand-sub{ max-width:none; }
  .footer nav{ width:100%; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:28px 14px; }
  .footer .col h4{ margin-bottom:12px; }
  .footer .col a{ font-size:13px; margin-bottom:9px; }

  /* Footer bottom: copyright hard-left, status hard-right on one row */
  .footer-bottom{ flex-direction:row; flex-wrap:nowrap; justify-content:space-between;
    align-items:center; gap:10px; margin-top:30px; }
  .footer-bottom .mono-tag{ font-size:8.5px; letter-spacing:.02em; line-height:1.5; }
  .footer-bottom .mono-tag:first-child{ flex:1 1 auto; min-width:0; }
  .footer-bottom .mono-tag:last-child{ flex:0 0 auto; white-space:nowrap; text-align:right; }

  /* Access page (page 2): keep the greeting a tidy compact tag, not a 4-line stadium */
  .access-intro .access-confirm{ font-size:10px; line-height:1.5; padding:10px 14px;
    border-radius:12px; align-items:flex-start; gap:8px; max-width:312px; text-align:left; }
  .access-intro .access-confirm .pulse{ margin-top:4px; }
}
@media (max-width: 380px){
  .footer nav{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:26px 16px; }
}

/* =========================================================
   ACCESS PAGE (gated page 2) — intro banner + toast
   ========================================================= */
.access-intro{ text-align:center; padding:clamp(64px,12vh,120px) clamp(20px,5vw,48px) 0; }
.access-intro .back{ display:inline-flex; align-items:center; gap:8px; font-family:var(--font-mono); font-size:11px; letter-spacing:.18em;
  text-transform:uppercase; color:var(--cyan-soft); text-decoration:none; margin-bottom:28px; opacity:.85; transition:opacity .25s ease, gap .25s ease; }
.access-intro .back:hover{ opacity:1; gap:12px; }
.access-confirm{ display:inline-flex; align-items:center; gap:10px; font-family:var(--font-mono); font-size:11.5px; letter-spacing:.1em;
  color:var(--cyan-soft); padding:9px 16px; border:1px solid var(--line-strong); border-radius:999px; background:rgba(10,22,40,.4); margin-bottom:26px; }
.access-confirm .pulse{ width:7px;height:7px;border-radius:50%; background:var(--cyan); box-shadow:0 0 10px var(--cyan); animation:jv-blink 2s ease-in-out infinite; }

.toast{ position:fixed; left:50%; bottom:30px; transform:translate(-50%, 24px); z-index:9999;
  display:flex; align-items:center; gap:12px; max-width:90vw;
  font-family:var(--font-mono); font-size:13px; letter-spacing:.02em; color:var(--txt);
  padding:14px 20px; border:1px solid rgba(140,242,255,.4); border-radius:12px;
  background:linear-gradient(180deg, rgba(13,27,50,.92), rgba(6,13,25,.92));
  box-shadow:0 18px 50px rgba(0,0,0,.55), 0 0 40px var(--glow-soft); backdrop-filter:blur(10px);
  opacity:0; pointer-events:none; transition:opacity .35s ease, transform .35s cubic-bezier(.2,.7,.2,1); }
.toast.show{ opacity:1; transform:translate(-50%, 0); }
.toast .tk{ width:22px;height:22px;border-radius:50%; display:grid; place-items:center; flex:0 0 auto;
  color:var(--cyan); border:1px solid rgba(140,242,255,.5); box-shadow:0 0 14px var(--glow-soft); }

/* =========================================================
   APPLICATION MODAL (Custom Implementation questionnaire)
   ========================================================= */
.appl-overlay{ position:fixed; inset:0; z-index:10000; display:flex; align-items:center; justify-content:center;
  padding:24px; background:rgba(2,6,13,.72); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  opacity:0; pointer-events:none; transition:opacity .3s ease; }
.appl-overlay.open{ opacity:1; pointer-events:auto; }
.appl-modal{ position:relative; width:min(480px,100%); max-height:92vh; overflow-y:auto; padding:clamp(26px,4vw,38px);
  border-color:rgba(255,182,72,.32);
  background:linear-gradient(135deg, rgba(28,24,18,.62), rgba(8,14,26,.72));
  box-shadow:inset 0 1px 0 rgba(255,210,150,.1), 0 30px 80px rgba(0,0,0,.6), 0 0 60px rgba(255,182,72,.08);
  transform:translateY(16px) scale(.98); transition:transform .35s cubic-bezier(.2,.7,.2,1); }
.appl-overlay.open .appl-modal{ transform:none; }
.appl-tag{ position:static; display:inline-block; margin-bottom:16px; }
.appl-close{ position:absolute; top:16px; right:16px; width:34px; height:34px; border-radius:9px; cursor:pointer;
  display:grid; place-items:center; font-size:14px; color:var(--txt-dim);
  border:1px solid var(--line-strong); background:rgba(6,13,25,.6); transition:color .25s ease, border-color .25s ease; }
.appl-close:hover{ color:var(--txt); border-color:rgba(255,182,72,.5); }
.appl-title{ font-weight:700; font-size:clamp(20px,2.4vw,26px); letter-spacing:-0.01em; margin:0 0 10px; line-height:1.15; }
.appl-sub{ color:var(--txt-dim); font-size:14px; line-height:1.6; margin:0 0 22px; }

.appl-form{ display:flex; flex-direction:column; gap:16px; }
.appl-field{ display:flex; flex-direction:column; gap:7px; }
.appl-label{ font-family:var(--font-mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--cyan-soft); }
.appl-label i{ color:var(--amber); font-style:normal; }
.appl-label em{ font-style:normal; text-transform:none; letter-spacing:0; color:var(--txt-dim); font-size:11px; margin-left:4px; }
.appl-field input, .appl-field textarea{ width:100%; box-sizing:border-box; font-family:inherit; font-size:14.5px; color:var(--txt);
  padding:12px 14px; border:1px solid var(--line-strong); border-radius:10px; background:rgba(6,13,25,.55); outline:none;
  transition:border-color .2s ease, box-shadow .2s ease; resize:vertical; }
.appl-field textarea{ min-height:96px; line-height:1.5; }
.appl-field input::placeholder, .appl-field textarea::placeholder{ color:rgba(193,224,245,.4); }
.appl-field input:focus, .appl-field textarea:focus{ border-color:rgba(140,242,255,.6); box-shadow:0 0 0 3px rgba(84,230,255,.12); }
.appl-field.invalid input, .appl-field.invalid textarea{ border-color:rgba(255,120,120,.7); box-shadow:0 0 0 3px rgba(255,120,120,.12); }
.appl-field select{ width:100%; box-sizing:border-box; font-family:inherit; font-size:14.5px; color:var(--txt);
  padding:12px 38px 12px 14px; border:1px solid var(--line-strong); border-radius:10px; background:rgba(6,13,25,.55); outline:none; cursor:pointer;
  transition:border-color .2s ease, box-shadow .2s ease; -webkit-appearance:none; -moz-appearance:none; appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%2354e6ff' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 14px center; }
.appl-field select:focus{ border-color:rgba(140,242,255,.6); box-shadow:0 0 0 3px rgba(84,230,255,.12); }
.appl-field.invalid select{ border-color:rgba(255,120,120,.7); box-shadow:0 0 0 3px rgba(255,120,120,.12); }
.appl-field select:invalid{ color:rgba(193,224,245,.45); }
.appl-field select option{ background:#0a1422; color:var(--txt); }
.appl-err{ display:none; font-size:12px; color:#ff9a9a; font-family:var(--font-mono); letter-spacing:.01em; }
.appl-field.invalid .appl-err{ display:block; }
.appl-submit{ width:100%; margin-top:6px; background:linear-gradient(180deg,#ffd58a,var(--amber)); border-color:rgba(255,210,150,.7); color:#1a1206;
  box-shadow:0 8px 32px rgba(255,150,40,.4), 0 0 50px rgba(255,182,72,.12); }
.appl-submit:hover{ box-shadow:0 12px 46px rgba(255,150,40,.55), 0 0 80px rgba(255,182,72,.3); }
.appl-fineprint{ text-align:center; font-size:11.5px; color:var(--txt-dim); line-height:1.5; margin:2px 0 0; }
.appl-fineprint strong{ color:var(--cyan-soft); font-weight:600; }
.appl-error{ text-align:center; font-size:12.5px; color:#ff9a9a; font-family:var(--font-mono); margin:4px 0 0; }

.appl-success{ display:none; text-align:center; }
.appl-success.show{ display:block; }
.appl-modal.sent .appl-tag, .appl-modal.sent .appl-title, .appl-modal.sent .appl-sub{ display:none; }
.appl-success .appl-check{ width:58px; height:58px; margin:6px auto 18px; border-radius:50%; display:grid; place-items:center;
  font-size:26px; color:var(--cyan); border:1px solid rgba(140,242,255,.5); box-shadow:0 0 30px var(--glow-soft); }
.appl-success h3{ font-weight:700; font-size:22px; margin:0 0 12px; }
.appl-success p{ color:var(--txt-dim); font-size:14px; line-height:1.6; margin:0 0 22px; }
.appl-success a{ color:var(--cyan-soft); }
.appl-success .btn{ width:100%; }
.appl-form.hide{ display:none; }

/* =================== Stripe checkout modal =================== */
.co-overlay{ position:fixed; inset:0; z-index:10000; display:flex; align-items:center; justify-content:center;
  padding:24px; background:rgba(2,6,13,.72); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  opacity:0; pointer-events:none; transition:opacity .3s ease; }
.co-overlay.open{ opacity:1; pointer-events:auto; }
.co-modal{ position:relative; box-sizing:border-box; width:min(560px,100%); max-height:92vh; overflow-y:auto; padding:clamp(22px,3.2vw,30px);
  border-color:var(--line-strong);
  background:linear-gradient(135deg, rgba(10,18,32,.72), rgba(6,12,24,.78));
  box-shadow:inset 0 1px 0 rgba(140,242,255,.08), 0 30px 80px rgba(0,0,0,.6), 0 0 60px var(--glow-soft);
  transform:translateY(16px) scale(.98); transition:transform .35s cubic-bezier(.2,.7,.2,1); }
.co-overlay.open .co-modal{ transform:none; }
.co-close:hover{ border-color:rgba(140,242,255,.5); }
.co-head{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin:0 40px 18px 0; }
.co-tag{ font-family:var(--font-mono); font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--cyan-soft); }
.co-lock{ font-size:11px; color:var(--txt-dim); }
.co-loading{ display:flex; align-items:center; gap:12px; padding:36px 4px; color:var(--txt-dim); font-size:14px; }
.co-loading[hidden], .co-error[hidden]{ display:none; }
.co-spinner{ width:20px; height:20px; border-radius:50%; flex:0 0 auto;
  border:2px solid var(--line-strong); border-top-color:var(--cyan); animation:jv-spin .8s linear infinite; }
@keyframes jv-spin{ to{ transform:rotate(360deg); } }
.co-error{ padding:24px 4px; color:var(--txt-dim); font-size:14px; line-height:1.6; }
.co-error a{ color:var(--cyan-soft); }
#co-mount{ min-height:0; }

/* mobile: trim the overlay/modal padding so the Stripe embedded checkout isn't cut off */
@media (max-width: 600px){
  .co-overlay{ padding:10px; }
  .co-modal{ padding:18px 12px; }
}