/* ── What's On — Choose Plan 2 · honest cadence/privacy/cost framing ── */
.c2-root { position: absolute; inset: 0; overflow: hidden; color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, "Inter", sans-serif; text-align: left;
  --accent:#ff5fb8; --g1:#ff2bd6; --g2:#8b2bff;
  --ink:#fff; --ink2:rgba(240,237,245,0.86); --muted:rgba(240,237,245,0.55); --faint:rgba(240,237,245,0.34);
  --card:rgba(255,255,255,0.045); --card2:rgba(255,255,255,0.07); --hair:rgba(255,255,255,0.10); --hair2:rgba(255,255,255,0.06);
  --field:rgba(0,0,0,0.28); --success:#2ee6a8; --warn:#ffb44a; --crit:#ff5c78;
  --mono:"JetBrains Mono",ui-monospace,monospace; }
.c2-bg { position:absolute; inset:0; z-index:0;
  background: radial-gradient(120% 42% at 50% -6%, rgba(255,60,200,0.16), transparent 55%),
    radial-gradient(110% 48% at 50% 106%, rgba(110,60,230,0.15), transparent 60%),
    linear-gradient(180deg,#16101f 0%,#120c1c 50%,#0e0917 100%); }
.c2-scroll { position:relative; z-index:2; height:100%; overflow-y:auto; overflow-x:hidden; -webkit-overflow-scrolling:touch; }
.c2-scroll::-webkit-scrollbar { width:0; }
.c2-page { box-sizing:border-box; min-height:100%; padding:58px 20px 36px; display:flex; flex-direction:column; }
.c2-mac .c2-page { padding:34px 40px 36px; align-items:center; }
.c2-mac .c2-wrap { width:100%; max-width:600px; }

/* hero */
.c2-hero { margin-bottom:20px; }
.c2-kicker { font-family:var(--mono); font-size:11px; font-weight:600; letter-spacing:0.16em; text-transform:uppercase; color:var(--accent); margin-bottom:12px; }
.c2-headline { font-size:27px; line-height:1.08; letter-spacing:-0.025em; font-weight:800; color:var(--ink); margin:0 0 10px; text-wrap:balance; }
.c2-mac .c2-headline { font-size:31px; }
.c2-headline em { font-style:normal; background:linear-gradient(120deg,#ff5fb8,#c08bff); -webkit-background-clip:text; background-clip:text; color:transparent; }
.c2-subhead { font-size:14.5px; line-height:1.5; color:var(--muted); margin:0; }
.c2-subhead strong { color:var(--ink2); font-weight:600; }

/* current-plan banner (change-plan context) */
.c2-current { display:flex; align-items:center; gap:10px; margin:0 0 18px; padding:12px 14px; border-radius:13px;
  background:color-mix(in srgb,var(--success) 11%,transparent); border:1px solid color-mix(in srgb,var(--success) 32%,transparent);
  font-size:13px; color:var(--success); font-weight:600; }
.c2-current svg { flex:0 0 auto; }

/* step heading */
.c2-q-eyebrow { font-family:var(--mono); font-size:10.5px; font-weight:600; letter-spacing:0.14em; text-transform:uppercase; color:var(--accent); margin-bottom:10px; }
.c2-q-title { font-size:21px; font-weight:800; letter-spacing:-0.02em; color:var(--ink); margin:0 0 5px; text-wrap:balance; }
.c2-q-sub { font-size:13.5px; color:var(--muted); margin:0 0 18px; line-height:1.45; }
.c2-progress { display:flex; gap:6px; margin:0 0 22px; }
.c2-progress span { height:4px; flex:1; border-radius:3px; background:var(--hair); }
.c2-progress span.on { background:linear-gradient(90deg,var(--g1),var(--g2)); }
.c2-progress span.done { background:var(--accent); }

/* answer options */
.c2-opts { display:flex; flex-direction:column; gap:12px; }
.c2-opt { width:100%; text-align:left; cursor:pointer; font-family:inherit; display:flex; gap:14px; align-items:flex-start;
  background:var(--card); border:1.5px solid var(--hair); border-radius:16px; padding:16px 16px; color:var(--ink); transition:border-color .15s, background .15s; }
.c2-opt:hover { border-color:color-mix(in srgb,var(--accent) 45%,transparent); }
.c2-opt.on { border-color:var(--accent); background:linear-gradient(180deg,color-mix(in srgb,var(--accent) 12%,transparent),transparent 70%),var(--card);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 16%,transparent); }
.c2-opt-ic { flex:0 0 auto; width:42px; height:42px; border-radius:12px; display:inline-flex; align-items:center; justify-content:center; color:#fff;
  background:linear-gradient(135deg,var(--g1),var(--g2)); box-shadow:0 6px 16px color-mix(in srgb,var(--g1) 36%,transparent); }
.c2-opt.alt .c2-opt-ic { background:var(--card2); color:var(--accent); box-shadow:none; border:1px solid var(--hair); }
.c2-opt-body { flex:1; min-width:0; }
.c2-opt-t { display:block; font-size:15.5px; font-weight:800; letter-spacing:-0.01em; margin-bottom:3px; }
.c2-opt-d { display:block; font-size:12.5px; color:var(--muted); line-height:1.45; }
.c2-opt-radio { flex:0 0 auto; width:23px; height:23px; border-radius:50%; margin-top:2px; border:2px solid var(--hair); display:inline-flex; align-items:center; justify-content:center; }
.c2-opt.on .c2-opt-radio { border-color:var(--accent); }
.c2-opt-radio i { width:11px; height:11px; border-radius:50%; background:var(--accent); transform:scale(0); transition:transform .15s; }
.c2-opt.on .c2-opt-radio i { transform:scale(1); }

/* billing toggle */
.c2-billing { display:flex; background:rgba(0,0,0,0.25); border:1px solid var(--hair); border-radius:13px; padding:4px; gap:4px; margin:2px 0 16px; }
.c2-billing button { flex:1; appearance:none; border:none; background:transparent; cursor:pointer; font-family:inherit; font-size:14px; font-weight:700; color:var(--muted); padding:11px; border-radius:9px; display:inline-flex; align-items:center; justify-content:center; gap:8px; }
.c2-billing button.on { color:#fff; background:linear-gradient(135deg,var(--g1),var(--g2)); box-shadow:0 5px 14px color-mix(in srgb,var(--g1) 30%,transparent); }
.c2-save { font-size:11.5px; font-weight:800; color:var(--success); }
.c2-billing button.on .c2-save { color:#d6fff1; }

/* plan card */
.c2-cards { display:flex; flex-direction:column; gap:14px; }
.c2-plan { position:relative; width:100%; text-align:left; cursor:pointer; font-family:inherit; background:var(--card); border:1.5px solid var(--hair);
  border-radius:20px; padding:20px; color:var(--ink); transition:border-color .15s, background .15s; }
.c2-plan:hover { border-color:color-mix(in srgb,var(--accent) 45%,transparent); }
.c2-plan.on { border-color:var(--accent); background:linear-gradient(180deg,color-mix(in srgb,var(--accent) 11%,transparent),transparent 58%),var(--card);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 16%,transparent); }
.c2-plan.reco { border-color:color-mix(in srgb,var(--accent) 40%,transparent); }
.c2-badge { position:absolute; top:-11px; left:18px; white-space:nowrap; max-width:calc(100% - 36px); font-size:11px; font-weight:800; letter-spacing:0.01em; color:#fff;
  background:linear-gradient(135deg,var(--g1),var(--g2)); padding:5px 12px; border-radius:999px; box-shadow:0 6px 14px color-mix(in srgb,var(--g1) 38%,transparent); }
.c2-plan-radio { position:absolute; top:20px; right:20px; width:23px; height:23px; border-radius:50%; border:2px solid var(--hair); display:inline-flex; align-items:center; justify-content:center; }
.c2-plan.on .c2-plan-radio { border-color:var(--accent); }
.c2-plan-radio i { width:11px; height:11px; border-radius:50%; background:var(--accent); transform:scale(0); transition:transform .15s; }
.c2-plan.on .c2-plan-radio i { transform:scale(1); }
.c2-plan-head { display:flex; align-items:baseline; justify-content:space-between; gap:12px; padding-right:32px; }
.c2-plan-name { font-size:21px; font-weight:800; letter-spacing:-0.01em; }
.c2-plan-alias { font-size:12px; font-weight:600; color:var(--muted); margin-left:7px; }
.c2-price { white-space:nowrap; text-align:right; }
.c2-amt { font-size:21px; font-weight:800; }
.c2-per { font-size:12px; color:var(--muted); margin-left:2px; }
.c2-permo { font-size:11.5px; color:var(--muted); margin-top:2px; }
.c2-plan-sub { margin-top:7px; font-size:13px; font-weight:600; color:var(--accent); }
.c2-trial { display:inline-flex; align-items:center; gap:7px; margin-top:12px; font-size:12.5px; font-weight:700; color:var(--success);
  background:color-mix(in srgb,var(--success) 13%,transparent); border:1px solid color-mix(in srgb,var(--success) 32%,transparent); padding:6px 11px; border-radius:999px; }
.c2-stamp-green { display:inline-flex; align-items:center; white-space:nowrap; font-size:10.5px; font-weight:700; line-height:1; color:var(--success);
  background:color-mix(in srgb,var(--success) 14%,transparent); border:1px solid color-mix(in srgb,var(--success) 34%,transparent);
  padding:3px 7px; border-radius:999px; margin:0 2px; vertical-align:middle; }

/* trade rows inside card */
.c2-traits { list-style:none; margin:14px 0 0; padding:0; display:flex; flex-direction:column; gap:11px; }
.c2-trait { display:flex; gap:11px; align-items:flex-start; }
.c2-trait .tk { flex:0 0 auto; width:26px; height:26px; border-radius:8px; display:inline-flex; align-items:center; justify-content:center; color:var(--accent); background:color-mix(in srgb,var(--accent) 13%,transparent); }
.c2-trait .tl { display:block; font-size:10px; font-family:var(--mono); letter-spacing:0.1em; text-transform:uppercase; color:var(--faint); margin-bottom:2px; }
.c2-trait .tv { display:block; font-size:13px; color:var(--ink2); line-height:1.4; }
.c2-trait .tv b { color:var(--ink); font-weight:700; }

/* all-in cost line */
.c2-allin { display:flex; align-items:flex-start; gap:8px; margin-top:14px; font-size:12.5px; line-height:1.45; color:var(--muted);
  background:rgba(255,255,255,0.04); border:1px solid var(--hair); border-radius:12px; padding:11px 13px; }
.c2-allin svg { flex:0 0 auto; margin-top:1px; color:var(--accent); opacity:0.85; }
.c2-allin strong { color:var(--ink2); font-weight:800; }
.c2-extra-tag { display:inline-block; margin-top:10px; font-size:10.5px; font-weight:700; color:var(--accent); white-space:nowrap;
  background:color-mix(in srgb,var(--accent) 12%,transparent); border:1px solid color-mix(in srgb,var(--accent) 26%,transparent); padding:3px 8px; border-radius:7px; }

/* compare matrix */
.c2-matrix { border:1px solid var(--hair); border-radius:18px; overflow:hidden; margin:4px 0 16px; }
.c2-mrow { display:grid; grid-template-columns:1.05fr 1fr 1fr; }
.c2-mrow > div { padding:13px 13px; border-top:1px solid var(--hair2); font-size:12.5px; line-height:1.4; }
.c2-mrow:first-child > div { border-top:none; }
.c2-mrow .mh { background:rgba(255,255,255,0.03); }
.c2-mhead > div { padding:14px 13px; font-weight:800; font-size:13px; color:var(--ink); }
.c2-mhead .mh { background:transparent; }
.c2-mhead .mp1 { background:linear-gradient(180deg,color-mix(in srgb,var(--accent) 14%,transparent),transparent); }
.c2-mlab { font-family:var(--mono); font-size:9.5px; letter-spacing:0.1em; text-transform:uppercase; color:var(--faint); }
.c2-mrow .mh { color:var(--muted); font-weight:700; }
.c2-mrow .mv { color:var(--ink2); }
.c2-mrow .mv b { color:var(--ink); }
.c2-pname { font-size:14px; font-weight:800; color:var(--ink); }
.c2-pname small { display:block; font-size:10.5px; font-weight:600; color:var(--muted); margin-top:1px; }

/* honesty note */
.c2-note { display:flex; gap:10px; align-items:flex-start; font-size:12px; color:var(--muted); line-height:1.5; margin:12px 0 8px;
  border-left:2px solid color-mix(in srgb,var(--warn) 55%,transparent); padding:2px 0 2px 13px; }
.c2-note svg { flex:0 0 auto; margin-top:1px; color:var(--warn); }
.c2-note strong { color:var(--ink2); }

/* prerequisite callout */
.c2-prereq { display:flex; gap:11px; align-items:flex-start; margin:2px 0 16px; padding:13px 14px; border-radius:14px; background:var(--card); border:1px solid var(--hair); }
.c2-prereq .pic { flex:0 0 auto; width:34px; height:34px; border-radius:10px; display:inline-flex; align-items:center; justify-content:center; color:#fff; background:linear-gradient(135deg,var(--g1),var(--g2)); }
.c2-prereq .pt { font-size:13.5px; font-weight:700; color:var(--ink); margin-bottom:2px; }
.c2-prereq .pd { font-size:12px; color:var(--muted); line-height:1.45; }
.c2-prereq .pd b { color:var(--ink2); }

/* CTA */
.c2-spacer { flex:1; min-height:20px; }
.c2-cta { position:relative; overflow:hidden; width:100%; border:none; cursor:pointer; font-family:inherit; display:flex; flex-direction:column; align-items:center; gap:3px;
  padding:16px; border-radius:16px; color:#fff; background:linear-gradient(135deg,var(--g1),var(--g2)); box-shadow:0 14px 32px color-mix(in srgb,var(--g1) 40%,transparent); margin-top:6px; }
.c2-cta:hover { filter:brightness(1.06); }
/* "Coming soon" neon reveal on hover / select */
.c2-cta::after { content:"Coming soon"; position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  font-family:var(--mono); font-weight:700; font-size:16px; letter-spacing:0.05em; color:#ff5fb8;
  background:rgba(9,4,17,0.93);
  text-shadow:0 0 8px rgba(255,43,214,0.95), 0 0 22px rgba(255,43,214,0.6), 0 0 42px rgba(139,43,255,0.45);
  opacity:0; transform:translateY(5px); transition:opacity .18s ease, transform .18s ease; pointer-events:none; }
.c2-cta:hover::after, .c2-cta:focus::after, .c2-cta:active::after { opacity:1; transform:none; }
.c2-cta:hover, .c2-cta:focus { box-shadow:0 0 0 1px #ff2bd6, 0 16px 42px rgba(255,43,214,0.5); outline:none; }
.c2-cta[disabled] { opacity:0.42; box-shadow:none; cursor:not-allowed; }
.c2-cta-main { font-size:17px; font-weight:800; }
.c2-cta-sub { font-size:13px; font-weight:600; color:rgba(255,255,255,0.9); }
.c2-cta-foot { font-size:12px; color:var(--muted); text-align:center; margin-top:10px; }
.c2-ghost { width:100%; border:1px solid var(--hair); background:transparent; cursor:pointer; font-family:inherit; font-size:14px; font-weight:700; color:var(--ink2); padding:14px; border-radius:14px; margin-top:10px; }
.c2-ghost:hover { border-color:color-mix(in srgb,var(--accent) 45%,transparent); }
.c2-link { appearance:none; border:none; background:transparent; cursor:pointer; font-family:inherit; font-size:13.5px; font-weight:700; color:var(--accent); padding:10px; align-self:center; }
.c2-link:hover { text-decoration:underline; }
.c2-back { appearance:none; border:none; background:transparent; cursor:pointer; font-family:inherit; font-size:13.5px; font-weight:700; color:var(--muted); padding:8px 0; margin-bottom:4px; display:inline-flex; align-items:center; gap:6px; align-self:flex-start; }

.c2-fine { list-style:none; margin:14px 0 0; padding:0; display:flex; flex-direction:column; gap:8px; }
.c2-fine li { display:flex; gap:8px; align-items:flex-start; font-size:11.5px; line-height:1.5; color:var(--muted); }
.c2-fine svg { flex:0 0 auto; margin-top:2px; }
.c2-fine strong { color:var(--ink2); font-weight:700; }

.c2-section-gap { height:8px; }

/* ── light theme ── */
.theme-light .c2-root { --accent:#c41d86; --ink:#1c1430; --ink2:rgba(40,28,60,0.86); --muted:rgba(40,28,60,0.55); --faint:rgba(40,28,60,0.34);
  --card:#fff; --card2:rgba(28,16,42,0.05); --hair:rgba(28,16,42,0.12); --hair2:rgba(28,16,42,0.07); --field:#f4eefb; --success:#0e7d57; --warn:#c97a14; --crit:#d23a57; }
.theme-light .c2-bg { background: radial-gradient(120% 42% at 50% -6%, rgba(255,60,200,0.07), transparent 55%),
  radial-gradient(110% 48% at 50% 106%, rgba(110,60,230,0.07), transparent 60%), linear-gradient(180deg,#faf7ff,#f4eefb 55%,#efe6f9); }
.theme-light .c2-plan { box-shadow:0 4px 16px rgba(28,16,42,0.05); }
.theme-light .c2-billing { background:rgba(28,16,42,0.05); }

.device-label { font-family:"Inter",monospace; font-size:11px; letter-spacing:0.3em; text-transform:uppercase; color:rgba(255,255,255,0.4); margin-bottom:13px; }

/* ── repeated Get-early-access band (mirrors the marketing hero form) ── */
.c2-ea { margin-top:30px; padding-top:26px; border-top:1px solid var(--hair);
  display:flex; flex-direction:column; align-items:center; text-align:center; }
.c2-ea-badge { display:inline-flex; align-items:center; gap:7px; font-family:var(--mono);
  font-size:10px; font-weight:600; letter-spacing:.18em; text-transform:uppercase; color:var(--warn);
  border:1px solid color-mix(in srgb,var(--warn) 42%,transparent); background:color-mix(in srgb,var(--warn) 10%,transparent);
  padding:6px 12px; border-radius:999px; }
.c2-ea-pulse { width:7px; height:7px; border-radius:50%; background:var(--warn);
  box-shadow:0 0 9px var(--warn); animation:c2eaPulse 1.8s ease infinite; }
@keyframes c2eaPulse { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.4;transform:scale(.7)} }
.c2-ea-h { font-size:21px; font-weight:800; color:var(--ink); letter-spacing:-.01em; margin:15px 0 0; }
.c2-ea-p { font-size:13.5px; color:var(--muted); line-height:1.5; margin:9px 0 0; max-width:42ch; }
.c2-ea-form { box-sizing:border-box; display:flex; gap:10px; flex-wrap:wrap; justify-content:center; width:100%; max-width:460px;
  margin:20px auto 0; padding:14px; border-radius:18px;
  border:1px solid color-mix(in srgb,var(--g1) 60%,transparent);
  background:linear-gradient(180deg,color-mix(in srgb,var(--g1) 7%,transparent),transparent);
  box-shadow:0 0 0 1px color-mix(in srgb,var(--g1) 20%,transparent),0 0 30px color-mix(in srgb,var(--g1) 22%,transparent),inset 0 0 22px color-mix(in srgb,var(--g1) 6%,transparent); }
.c2-ea-form input { flex:1 1 220px; min-width:0; font-family:"Inter",sans-serif; font-size:15px; color:var(--ink);
  background:var(--field); border:1px solid var(--hair); border-radius:999px; padding:13px 18px; outline:none;
  transition:border-color .18s, box-shadow .18s; }
.c2-ea-form input::placeholder { color:var(--muted); }
.c2-ea-form input:focus { border-color:var(--g1); box-shadow:0 0 0 3px color-mix(in srgb,var(--g1) 18%,transparent); }
.c2-ea-btn { white-space:nowrap; font-family:"Inter",sans-serif; font-weight:700; font-size:15px; color:#fff;
  background:linear-gradient(135deg,var(--g1),var(--g2)); border:none; border-radius:999px; padding:13px 22px; cursor:pointer;
  transition:filter .18s, transform .18s; }
.c2-ea-btn:hover { filter:brightness(1.08); }
.c2-ea-btn:disabled { opacity:.6; cursor:not-allowed; }
.c2-ea-err { flex-basis:100%; font-size:13px; color:var(--crit); }
.c2-ea-done { display:flex; align-items:center; gap:9px; justify-content:center; margin:18px auto 0; max-width:460px;
  font-size:14px; line-height:1.45; color:var(--ink); background:color-mix(in srgb,var(--success) 12%,transparent);
  border:1px solid color-mix(in srgb,var(--success) 34%,transparent); border-radius:14px; padding:14px 18px; }
.c2-ea-done svg { flex:0 0 auto; color:var(--success); }