/* ==========================================================================
   Funnel Mochi — shared design system
   Dark neon UI: glow cards, gradient CTAs, arc backdrops
   ========================================================================== */

:root {
  /* Surfaces */
  --bg:            #04050e;
  --bg-2:          #070a1a;
  --panel:         rgba(14, 19, 42, 0.55);
  --panel-solid:   #0b1024;
  --panel-hi:      rgba(24, 32, 66, 0.65);
  --line:          rgba(255, 255, 255, 0.08);
  --line-soft:     rgba(255, 255, 255, 0.05);

  /* Text */
  --ink:           #f2f5ff;
  --ink-2:         #b9c2df;
  --ink-3:         #8590b4;
  --ink-4:         #5f6a91;

  /* Accents */
  --blue:          #3b93ff;
  --blue-hi:       #6db4ff;
  --cyan:          #22d3ee;
  --cyan-hi:       #67e8f9;
  --violet:        #8b5cf6;
  --purple:        #a855f7;
  --magenta:       #d946ef;
  --green:         #34d399;

  /* Gradients */
  --grad-orange:   linear-gradient(180deg, #ff9a24 0%, #f97316 45%, #ea5b06 100%);
  --grad-orange-h: linear-gradient(180deg, #ffab45 0%, #fb8624 45%, #f56a12 100%);
  --grad-cta:      linear-gradient(90deg, #2b8fff 0%, #7c5cf7 52%, #d946ef 100%);
  --grad-brand:    linear-gradient(90deg, #4f8dff 0%, #a855f7 100%);

  /* Motion */
  --ease:          cubic-bezier(0.22, 1, 0.36, 1);
  --dur:           220ms;

  --radius:        16px;
  --radius-lg:     22px;
  --shell:         1180px;
}

/* --------------------------------------------------------------- reset -- */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; border: 0; background: none; cursor: pointer; }
h1, h2, h3, h4 { margin: 0; line-height: 1.15; letter-spacing: -0.02em; font-weight: 700; }
p  { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }

::selection { background: rgba(139, 92, 246, 0.4); }

/* ------------------------------------------------------------- layout -- */

.shell {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: 24px;
}
.shell-narrow { max-width: 980px; }
.shell-wide   { max-width: 1320px; }

.page { position: relative; z-index: 1; }

.section       { padding-block: 76px; }
.section-tight { padding-block: 52px; }

/* Anchor targets must clear the sticky header, or a jump to #pricing lands with
   the heading hidden behind the nav. Matches .nav height + a little breathing
   room, and the smaller nav on mobile. */
section[id], [id].part { scroll-margin-top: 88px; }
@media (max-width: 640px) { section[id], [id].part { scroll-margin-top: 74px; } }

/* Ambient background: deep radial haze + the signature arc */

.bg-field {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(900px 520px at 12% -6%,  rgba(59, 147, 255, 0.16), transparent 62%),
    radial-gradient(900px 520px at 88% -6%,  rgba(168, 85, 247, 0.16), transparent 62%),
    radial-gradient(1200px 800px at 50% 110%, rgba(59, 147, 255, 0.07), transparent 70%),
    linear-gradient(180deg, #05060f 0%, #04050c 55%, #050610 100%);
}

/* The luminous outline that frames the hero.

   Measured off Mock Up.png rather than eyeballed: it is a ROUNDED RECTANGLE —
   flat top, circular corners of radius 0.187 x page width, then near-vertical
   sides running down the page and fading out. A rounded-rect model fits the
   traced curve to an rms of 0.74px; circles and ellipses do not fit at all.

   Drawn as an <svg> so the stroke holds a constant width around the corners and
   can take a Gaussian blur for the bloom. Geometry lives in the viewBox, where
   1000 units = the full viewport width; see the markup.

   height MUST stay auto so the browser derives it from the viewBox ratio — a
   fixed height letterboxes the artwork and shrinks the rectangle. */
.arc {
  position: absolute;
  top: 0;
  left: 50%;
  translate: -50% 0;
  width: 100vw;
  height: auto;
  max-width: none;   /* beats the `svg { max-width: 100% }` reset */
  pointer-events: none;
  overflow: visible;
  z-index: 0;
}

/* ------------------------------------------------------------ typography */

.display {
  font-family: 'Anton', 'Inter', sans-serif;
  font-weight: 400;
  letter-spacing: 0.005em;
  text-transform: uppercase;
  line-height: 1.02;
}

.h-xl  { font-size: clamp(2.1rem, 4.6vw, 3.65rem); font-weight: 800; letter-spacing: -0.03em; }
.h-lg  { font-size: clamp(1.85rem, 3.6vw, 2.9rem);  font-weight: 800; letter-spacing: -0.03em; }
.h-md  { font-size: clamp(1.45rem, 2.6vw, 2rem);    font-weight: 700; letter-spacing: -0.025em; }
.h-sm  { font-size: 1.14rem; font-weight: 700; }

.lede {
  color: var(--ink-2);
  font-size: clamp(0.98rem, 1.35vw, 1.08rem);
  line-height: 1.65;
}

.eyebrow {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--violet);
}

.muted   { color: var(--ink-3); }
.muted-2 { color: var(--ink-4); }
.small   { font-size: 0.86rem; }
.xsmall  { font-size: 0.78rem; }

.g-brand {
  background: var(--grad-brand);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
}
.g-tri {
  background: linear-gradient(90deg, #3b93ff 0%, #7c5cf7 45%, #d946ef 100%);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
}

.t-blue    { color: var(--blue-hi); }
.t-cyan    { color: var(--cyan-hi); }
.t-violet  { color: #b492ff; }
.t-magenta { color: #ef9bff; }
.t-green   { color: var(--green); }

.center    { text-align: center; }
.stack     { display: grid; gap: 14px; }
.row       { display: flex; align-items: center; gap: 10px; }
.wrap      { flex-wrap: wrap; }

/* ----------------------------------------------------------------- logo -- */

.logo { display: inline-flex; align-items: center; gap: 11px; }
.logo-mark {
  width: 30px; height: 30px;
  flex: none;
  filter: drop-shadow(0 0 10px rgba(120, 110, 255, 0.55));
}
.logo-word {
  font-size: 1.42rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.05;
}
.logo-word span { color: #a985ff; }
.logo-tag {
  font-size: 0.7rem;
  color: var(--ink-3);
  letter-spacing: 0.005em;
  margin-top: 1px;
}
.logo-stack { display: grid; justify-items: center; gap: 4px; }
.logo-stack .logo-tag { letter-spacing: 0.02em; }

/* ---------------------------------------------------------------- cards -- */

.card {
  position: relative;
  background:
    linear-gradient(180deg, rgba(20, 27, 56, 0.72), rgba(9, 13, 30, 0.72));
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 22px;
  transition: transform var(--dur) var(--ease),
              border-color var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease);
}
.card-lg { border-radius: var(--radius-lg); padding: 26px; }

.card-hover:hover {
  transform: translateY(-3px);
  border-color: rgba(120, 150, 255, 0.34);
  box-shadow: 0 18px 44px -22px rgba(59, 147, 255, 0.7);
}

/* Neon-edged cards: a colored ring plus an outer bloom */
.glow            { border-color: rgba(59, 147, 255, 0.42); box-shadow: 0 0 0 1px rgba(59,147,255,0.14), 0 0 34px -10px rgba(59, 147, 255, 0.55), inset 0 0 40px -28px rgba(59,147,255,0.9); }
.glow-blue       { border-color: rgba(59, 147, 255, 0.55); box-shadow: 0 0 26px -6px rgba(59, 147, 255, 0.55), inset 0 1px 0 rgba(255,255,255,0.05); }
.glow-cyan       { border-color: rgba(34, 211, 238, 0.5);  box-shadow: 0 0 26px -6px rgba(34, 211, 238, 0.5),  inset 0 1px 0 rgba(255,255,255,0.05); }
.glow-violet     { border-color: rgba(139, 92, 246, 0.55); box-shadow: 0 0 26px -6px rgba(139, 92, 246, 0.55), inset 0 1px 0 rgba(255,255,255,0.05); }
.glow-magenta    { border-color: rgba(217, 70, 239, 0.5);  box-shadow: 0 0 26px -6px rgba(217, 70, 239, 0.5),  inset 0 1px 0 rgba(255,255,255,0.05); }

/* The heavy "featured" ring used on the Professional / Most Popular cards */
.ring-feature {
  border-color: rgba(120, 120, 255, 0.85);
  box-shadow:
    0 0 0 1px rgba(150, 120, 255, 0.55),
    0 0 22px -2px rgba(90, 120, 255, 0.75),
    0 0 60px -8px rgba(150, 90, 255, 0.55),
    inset 0 0 60px -34px rgba(140, 130, 255, 1);
}
.ring-cyan {
  border-color: rgba(34, 211, 238, 0.7);
  box-shadow: 0 0 0 1px rgba(34, 211, 238, 0.25), 0 0 34px -10px rgba(34, 211, 238, 0.6);
}
.ring-violet {
  border-color: rgba(168, 85, 247, 0.55);
  box-shadow: 0 0 0 1px rgba(168, 85, 247, 0.2), 0 0 34px -12px rgba(168, 85, 247, 0.55);
}

/* Full-page framing border seen on the confirmation screens */
.frame {
  position: relative;
  border-radius: 26px;
  border: 1px solid rgba(120, 140, 255, 0.4);
  box-shadow:
    0 0 0 1px rgba(90, 120, 255, 0.12),
    0 0 60px -18px rgba(90, 130, 255, 0.6),
    0 0 120px -40px rgba(190, 90, 255, 0.5);
  padding: clamp(22px, 3.2vw, 40px);
  background: linear-gradient(180deg, rgba(10, 14, 32, 0.6), rgba(5, 7, 19, 0.6));
}

/* Corner ribbon with a star, used on "Most Popular" rows */
.ribbon {
  position: absolute;
  top: 0; left: 0;
  width: 74px; height: 74px;
  overflow: hidden;
  border-top-left-radius: inherit;
  pointer-events: none;
}
.ribbon::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, #a855f7 0%, #7c3aed 55%, transparent 56%);
}
.ribbon svg {
  position: absolute;
  top: 11px; left: 11px;
  width: 17px; height: 17px;
  color: #fff;
}

/* --------------------------------------------------------------- badges -- */

.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 13px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.04);
  font-size: 0.79rem;
  font-weight: 600;
  color: var(--ink-2);
  white-space: nowrap;
}
.badge-blue    { border-color: rgba(59, 147, 255, 0.45);  background: rgba(59, 147, 255, 0.1);  color: #8fc3ff; }
.badge-cyan    { border-color: rgba(34, 211, 238, 0.45);  background: rgba(34, 211, 238, 0.1);  color: #7fe6f7; }
.badge-violet  { border-color: rgba(139, 92, 246, 0.5);   background: rgba(139, 92, 246, 0.12); color: #c3a8ff; }
.badge-magenta { border-color: rgba(217, 70, 239, 0.45);  background: rgba(217, 70, 239, 0.1);  color: #f0a8ff; }
.badge-solid   { border-color: transparent; background: linear-gradient(90deg, #2b6fff, #6d4bf6); color: #fff; box-shadow: 0 0 20px -6px rgba(90, 110, 255, 0.9); }

.pill-hero {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 17px;
  border-radius: 999px;
  border: 1px solid rgba(139, 92, 246, 0.5);
  background: rgba(139, 92, 246, 0.08);
  font-size: 0.85rem;
  font-weight: 600;
  color: #c9b6ff;
  box-shadow: 0 0 30px -12px rgba(139, 92, 246, 0.9);
}

.notice {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 11px 20px;
  border-radius: 12px;
  border: 1px solid rgba(34, 211, 238, 0.32);
  background: rgba(34, 211, 238, 0.06);
  color: var(--cyan-hi);
  font-size: 0.92rem;
  font-weight: 500;
}
.notice-plain {
  border-color: var(--line);
  background: rgba(255, 255, 255, 0.03);
  color: var(--ink-2);
}

/* -------------------------------------------------------------- buttons -- */

.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 13px 26px;
  border-radius: 11px;
  font-size: 0.98rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  white-space: nowrap;
  transition: transform var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease),
              background var(--dur) var(--ease),
              border-color var(--dur) var(--ease);
}
.btn:active { transform: translateY(1px) scale(0.995); }
.btn svg { width: 18px; height: 18px; flex: none; }

.btn-orange {
  background: var(--grad-orange);
  color: #fff;
  box-shadow: 0 10px 26px -12px rgba(249, 115, 22, 0.95),
              inset 0 1px 0 rgba(255, 255, 255, 0.28);
}
.btn-orange:hover {
  background: var(--grad-orange-h);
  box-shadow: 0 14px 34px -12px rgba(249, 115, 22, 1),
              inset 0 1px 0 rgba(255, 255, 255, 0.35);
  transform: translateY(-1px);
}
.btn-orange .arrow { transition: transform var(--dur) var(--ease); }
.btn-orange:hover .arrow { transform: translateX(3px); }

.btn-cta {
  background: var(--grad-cta);
  color: #fff;
  box-shadow: 0 12px 34px -14px rgba(124, 92, 247, 1),
              inset 0 1px 0 rgba(255, 255, 255, 0.25);
}
.btn-cta:hover { transform: translateY(-1px); box-shadow: 0 16px 40px -14px rgba(124, 92, 247, 1); }

.btn-ghost {
  border: 1px solid rgba(139, 92, 246, 0.5);
  background: rgba(139, 92, 246, 0.06);
  color: var(--ink);
}
.btn-ghost:hover { border-color: rgba(168, 85, 247, 0.9); background: rgba(139, 92, 246, 0.14); }

.btn-quiet {
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.03);
  color: var(--ink-2);
}
.btn-quiet:hover { border-color: rgba(255, 255, 255, 0.2); background: rgba(255, 255, 255, 0.06); color: var(--ink); }

.btn-outline-violet {
  border: 1px solid rgba(168, 85, 247, 0.6);
  background: transparent;
  color: #c3a8ff;
}
.btn-outline-violet:hover { background: rgba(168, 85, 247, 0.12); }

.btn-outline-blue {
  border: 1px solid rgba(59, 147, 255, 0.55);
  background: transparent;
  color: #8fc3ff;
}
.btn-outline-blue:hover { background: rgba(59, 147, 255, 0.12); }

.btn-block { width: 100%; }
.btn-lg    { padding: 16px 34px; font-size: 1.06rem; border-radius: 13px; }

/* A gated CTA keeps its full colour — the mockups show it bright before the
   terms box is ticked — but refuses the click and nudges the checkbox. */
.btn[data-locked='true'] {
  cursor: not-allowed;
  filter: saturate(0.82) brightness(0.9);
}
.btn[data-locked='true']:hover { transform: none; }

.btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  transform: none !important;
  box-shadow: none;
}

@keyframes nudge {
  0%, 100% { transform: translateX(0); }
  20%      { transform: translateX(-5px); }
  40%      { transform: translateX(5px); }
  60%      { transform: translateX(-3px); }
  80%      { transform: translateX(3px); }
}
.agree.nudge { animation: nudge 380ms var(--ease); }
.agree.nudge .box {
  border-color: var(--magenta);
  box-shadow: 0 0 16px -3px rgba(217, 70, 239, 0.9);
}

/* ---------------------------------------------------------------- icons -- */

.ico {
  display: grid;
  place-items: center;
  flex: none;
  border-radius: 999px;
  border: 1px solid currentColor;
  background: rgba(255, 255, 255, 0.02);
}
.ico svg { width: 52%; height: 52%; }
.ico-56 { width: 56px; height: 56px; }
.ico-64 { width: 64px; height: 64px; }
.ico-72 { width: 72px; height: 72px; }

.ico-sq {
  display: grid;
  place-items: center;
  flex: none;
  width: 84px; height: 84px;
  border-radius: 20px;
  border: 1px solid rgba(139, 92, 246, 0.55);
  background: linear-gradient(160deg, rgba(59, 147, 255, 0.14), rgba(168, 85, 247, 0.1));
  box-shadow: 0 0 30px -10px rgba(139, 92, 246, 0.9), inset 0 0 30px -18px rgba(139, 92, 246, 1);
}
.ico-sq svg { width: 44px; height: 44px; }

.glow-b { color: var(--blue);   box-shadow: 0 0 22px -6px rgba(59, 147, 255, 0.85);  }
.glow-c { color: var(--cyan);   box-shadow: 0 0 22px -6px rgba(34, 211, 238, 0.85);  }
.glow-v { color: var(--violet); box-shadow: 0 0 22px -6px rgba(139, 92, 246, 0.85);  }
.glow-m { color: var(--magenta);box-shadow: 0 0 22px -6px rgba(217, 70, 239, 0.85);  }

.feat-ico {
  display: grid;
  place-items: center;
  width: 46px; height: 46px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.07);
}
.feat-ico svg { width: 26px; height: 26px; }

/* checkmark list */
.checks { display: grid; gap: 11px; }
.checks li {
  display: grid;
  grid-template-columns: 20px 1fr;
  gap: 11px;
  align-items: start;
  font-size: 0.93rem;
  color: var(--ink-2);
  line-height: 1.45;
}
.checks svg { width: 19px; height: 19px; margin-top: 1px; }
.chk-b svg { color: var(--blue); }
.chk-c svg { color: var(--cyan); }
.chk-v svg { color: var(--violet); }
.chk-m svg { color: var(--magenta); }

/* ---------------------------------------------------------------- price -- */

.price { display: flex; align-items: baseline; justify-content: center; gap: 2px; }
.price .cur   { font-size: 1.5rem; font-weight: 700; align-self: flex-start; margin-top: 8px; }
.price .amt   { font-size: clamp(2.6rem, 4.4vw, 3.4rem); font-weight: 800; letter-spacing: -0.045em; line-height: 1; }
.price .per   { font-size: 0.95rem; color: var(--ink-3); font-weight: 500; margin-left: 4px; }
.price-left   { justify-content: flex-start; }

.chip-credits {
  display: block;
  width: 100%;
  text-align: center;
  padding: 8px 14px;
  border-radius: 10px;
  border: 1px solid rgba(59, 147, 255, 0.4);
  background: rgba(59, 147, 255, 0.07);
  font-size: 0.92rem;
  color: var(--ink-2);
}
.chip-credits b { color: var(--blue-hi); font-weight: 700; }
.chip-v  { border-color: rgba(139, 92, 246, 0.45); background: rgba(139, 92, 246, 0.08); }
.chip-v b { color: #c3a8ff; }
.chip-c  { border-color: rgba(34, 211, 238, 0.45); background: rgba(34, 211, 238, 0.07); }
.chip-c b { color: var(--cyan-hi); }

.divider { height: 1px; background: var(--line); border: 0; margin: 0; }
.divider-dash {
  height: 0;
  border: 0;
  border-top: 1px dashed rgba(255, 255, 255, 0.11);
  margin: 0;
}

/* ------------------------------------------------------------------ nav -- */

.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  background: rgba(4, 5, 14, 0.72);
  border-bottom: 1px solid var(--line-soft);
}
.nav-inner {
  display: flex;
  align-items: center;
  gap: 28px;
  height: 72px;
}
.nav-links { display: flex; gap: 34px; margin-inline: auto; }
.nav-links a {
  font-size: 0.94rem;
  color: var(--ink-2);
  font-weight: 500;
  transition: color var(--dur) var(--ease);
}
.nav-links a:hover { color: #fff; }
.nav-right { display: flex; align-items: center; gap: 18px; }

/* --------------------------------------------------------------- toggle -- */

.seg {
  display: inline-flex;
  gap: 4px;
  padding: 5px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.035);
}
.seg button {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 10px 24px;
  border-radius: 999px;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--ink-2);
  transition: all var(--dur) var(--ease);
}
.seg button svg { width: 18px; height: 18px; }
.seg button[aria-selected='true'] {
  background: #fff;
  color: #0b1024;
  box-shadow: 0 4px 18px -6px rgba(255, 255, 255, 0.5);
}

/* -------------------------------------------------------------- accordion */

.acc {
  border: 1px solid var(--line);
  border-radius: 13px;
  background: rgba(255, 255, 255, 0.025);
  overflow: hidden;
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.acc + .acc { margin-top: 12px; }
.acc:hover  { border-color: rgba(120, 150, 255, 0.32); }
.acc[open]  { border-color: rgba(120, 150, 255, 0.4); background: rgba(255, 255, 255, 0.04); }

.acc summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 17px 19px;
  font-weight: 600;
  font-size: 0.98rem;
  cursor: pointer;
  list-style: none;
}
.acc summary::-webkit-details-marker { display: none; }
.acc .plus {
  display: grid;
  place-items: center;
  flex: none;
  width: 24px; height: 24px;
  border-radius: 999px;
  border: 1px solid rgba(59, 147, 255, 0.55);
  color: var(--blue-hi);
  transition: transform var(--dur) var(--ease), background var(--dur) var(--ease);
}
.acc .plus svg { width: 13px; height: 13px; }
.acc[open] .plus { transform: rotate(45deg); background: rgba(59, 147, 255, 0.16); }
.acc .acc-body {
  padding: 0 19px 18px;
  color: var(--ink-3);
  font-size: 0.9rem;
  line-height: 1.6;
}
.acc[open] .acc-body { animation: acc-in 260ms var(--ease); }
@keyframes acc-in {
  from { opacity: 0; transform: translateY(-5px); }
  to   { opacity: 1; transform: none; }
}

/* --------------------------------------------------------------- footer -- */

.footer {
  border-top: 1px solid var(--line-soft);
  padding-block: 34px;
  margin-top: 26px;
}
.footer-inner {
  display: flex;
  align-items: center;
  gap: 28px;
  flex-wrap: wrap;
}
.footer-links { display: flex; gap: 30px; margin-inline: auto; }
.footer-links a { font-size: 0.92rem; color: var(--ink-2); }
.footer-links a:hover { color: #fff; }
.socials { display: flex; gap: 10px; }
.socials a {
  display: grid;
  place-items: center;
  width: 36px; height: 36px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.03);
  color: var(--ink-2);
  transition: all var(--dur) var(--ease);
}
.socials a:hover { color: #fff; border-color: rgba(120, 150, 255, 0.45); background: rgba(120, 150, 255, 0.1); }
.socials svg { width: 17px; height: 17px; }

/* ------------------------------------------------------------- checkbox -- */

.agree {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 13px;
  cursor: pointer;
  font-size: 0.93rem;
  color: var(--ink-2);
  line-height: 1.5;
}
/* The real input sits invisibly *on top of* the drawn box rather than being
   collapsed to 0×0, so it stays hit-testable and focus lands where it looks. */
.agree input {
  position: absolute;
  top: 1px;
  left: 0;
  width: 22px;
  height: 22px;
  margin: 0;
  opacity: 0;
  cursor: pointer;
  z-index: 1;
}
.agree .box {
  display: grid;
  place-items: center;
  flex: none;
  width: 22px; height: 22px;
  margin-top: 1px;
  border-radius: 6px;
  border: 1.5px solid rgba(139, 92, 246, 0.65);
  background: rgba(139, 92, 246, 0.06);
  transition: all var(--dur) var(--ease);
}
.agree .box svg { width: 14px; height: 14px; opacity: 0; transform: scale(0.6); transition: all var(--dur) var(--ease); color: #fff; }
.agree input:checked + .box { background: var(--grad-cta); border-color: transparent; box-shadow: 0 0 18px -5px rgba(124, 92, 247, 1); }
.agree input:checked + .box svg { opacity: 1; transform: none; }
.agree input:focus-visible + .box { outline: 2px solid var(--blue); outline-offset: 3px; }
.agree a { color: var(--blue-hi); text-decoration: underline; text-underline-offset: 3px; }

/* Pre-purchase disclosure. Section 2 of the Terms requires the price, billing
   frequency, auto-renewal, cancellation and credit/refund restrictions to be
   shown BEFORE the purchase completes, so this sits directly above the confirm
   button rather than in a footnote. */
.disclosure {
  margin-top: 22px;
  padding: 16px 20px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 13px;
  background: rgba(255, 255, 255, 0.03);
}
.disclosure p {
  font-size: 0.83rem;
  line-height: 1.65;
  color: var(--ink-3);
}
.disclosure b { color: var(--ink-2); font-weight: 600; }
.disclosure a { color: var(--blue-hi); text-decoration: underline; text-underline-offset: 3px; }

/* --------------------------------------------------------- summary rows -- */

.sum-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-block: 13px;
  font-size: 0.95rem;
  color: var(--ink-2);
}
.sum-row .k { display: flex; align-items: center; gap: 11px; }
.sum-row .k svg { width: 19px; height: 19px; color: var(--ink-3); flex: none; }
.sum-row .v { font-weight: 600; text-align: right; }
.sum-row-lg { padding-block: 16px; }
.sum-row-lg .k { font-weight: 700; color: var(--ink); font-size: 1.02rem; }
.sum-row-lg .v { font-size: 1.5rem; font-weight: 800; letter-spacing: -0.03em; color: #fff; }

/* ---------------------------------------------------------------- misc --- */

.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.grid-4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.grid-6 { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 14px; }

/* Two facts side by side, divided by a rule that becomes horizontal on mobile */
.split-2 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.split-2 > * { display: flex; align-items: center; gap: 16px; }
.split-2 > *:first-child { padding-right: 22px; }
.split-2 > *:last-child  { padding-left: 22px; border-left: 1px solid var(--line); }

@media (max-width: 720px) {
  .split-2 { grid-template-columns: minmax(0, 1fr); }
  .split-2 > *:first-child { padding-right: 0; padding-bottom: 16px; }
  .split-2 > *:last-child  { padding-left: 0; padding-top: 16px; border-left: 0; border-top: 1px solid var(--line); }
}

.checkout-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr);
  gap: 20px;
  align-items: start;
}

.step-line {
  position: absolute;
  top: 36px;
  left: calc(50% + 52px);
  right: calc(-50% + 52px);
  border-top: 2px dashed rgba(110, 130, 220, 0.4);
}

.num-dot {
  position: absolute;
  top: -6px; left: -6px;
  display: grid;
  place-items: center;
  width: 26px; height: 26px;
  border-radius: 999px;
  background: #0a0e22;
  border: 1px solid currentColor;
  font-size: 0.76rem;
  font-weight: 700;
  color: inherit;
}

/* Entrance animation */
.reveal {
  opacity: 0;
  transform: translateY(16px);
}
.reveal.is-in {
  opacity: 1;
  transform: none;
  transition: opacity 620ms var(--ease), transform 620ms var(--ease);
}

/* ---------------------------------------------------------- responsive -- */

@media (max-width: 1080px) {
  .grid-6 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .nav-links { display: none; }
  /* Connector lines only make sense while the steps sit on one row */
  .grid-4 .step-line { display: none; }
}

@media (max-width: 900px) {
  .checkout-grid { grid-template-columns: minmax(0, 1fr); }
  .step-line { display: none; }
}

/* Compact nav: the tagline and the login link are the first things to go,
   then the CTA shortens, so the header never forces a horizontal scroll. */
@media (max-width: 640px) {
  .nav-inner   { gap: 12px; height: 62px; }
  .nav-right   { gap: 12px; margin-left: auto; }
  .nav-login   { display: none; }
  .logo .logo-tag { display: none; }
  .logo-word   { font-size: 1.1rem; }
  .logo-mark   { width: 25px; height: 25px; }
  .nav-right .btn { padding: 10px 15px; font-size: 0.85rem; }
  .nav-right .btn .full { display: none; }
}

/* Label swap: long copy on desktop, short copy in the compact nav */
.compact { display: none; }
@media (max-width: 640px) { .compact { display: inline; } }

@media (max-width: 720px) {
  .section { padding-block: 54px; }
  .grid-6, .grid-4, .grid-3, .grid-2 { grid-template-columns: minmax(0, 1fr); }
  .footer-links { gap: 18px; margin-inline: 0; }
  .footer-inner { justify-content: center; text-align: center; }
  .btn-lg { padding: 14px 24px; font-size: 1rem; }
  .frame { padding: 18px; border-radius: 18px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .reveal { opacity: 1; transform: none; }
}