/* Reelday website theme. White ground; indigo and violet carry the brand, a hot orange
   mixes in through the gradients and accents (owner, 22 Oct). Never the competitor's warm
   beige: grounds stay white or cool mist. Type is editorial:
   Bricolage Grotesque for display, Instrument Serif italic for the one accented word,
   Instrument Sans for reading, JetBrains Mono for timecode-style labels. Squared buttons,
   centred hero. Loaded after site.css, so it wins ties. */
:root {
  --night:#14142B; --night-2:#1E1D3D; --night-3:#2B2A52; --night-line:rgba(255,255,255,.10);
  --paper:#FFFFFF; --mist:#F6F7FC; --mist-2:#EEF0FA;
  --ink:#14142B; --muted:#5B5E7E; --muted-night:rgba(255,255,255,.72); --line:#E6E8F2;
  --indigo:#4B3BFF; --violet:#7C5CFF; --indigo-soft:#EEF0FA;
  --orange-hot:#FF7A2F; --orange-soft:#FFF0E6; --orange-glow:rgba(255,122,47,.28);
  --accent-night:#C9B8FF;   /* the design language's lavender-soft: accents on dark grounds */

  /* names the design language and the funnel already use */
  --cream:var(--mist); --sand:var(--mist-2);
  --coral-deep:var(--indigo); --coral:var(--indigo); --orange:var(--violet);
  --green-bg:#E7F7F0; --green-fg:#0E7C5A;
  --grad-primary:linear-gradient(120deg,#4B3BFF 0%,#7C5CFF 48%,#FF7A2F 100%);
  --grad-text:linear-gradient(100deg,#4B3BFF 0%,#8A4DFF 45%,#FF7A2F 90%);
  --grad-sun:linear-gradient(135deg,#7C5CFF 0%,#4B3BFF 100%);
  --grad-dark-card:linear-gradient(135deg,#14142B,#2B2A52);
  --grad-progress:linear-gradient(90deg,#4B3BFF,#7C5CFF,#FF7A2F);
  --bd-line:1.5px solid var(--line); --bd-focus:2px solid var(--indigo);

  --font-display:"Bricolage Grotesque","Instrument Sans",system-ui,sans-serif;
  --font-serif:"Instrument Serif",Georgia,serif;
  --font-sans:"Instrument Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --font-mono:"JetBrains Mono",ui-monospace,Menlo,monospace;

  --r-btn:12px; --r-card:20px; --r-panel:28px;
  --sh-card:0 2px 10px rgba(20,20,43,.06);
  --sh-raised:0 12px 30px rgba(20,20,43,.10);
  --sh-glow:0 10px 26px rgba(124,72,220,.28), 0 4px 12px var(--orange-glow);
  --ease:cubic-bezier(.2,.7,.2,1);
}

body { font-family:var(--font-sans); color:var(--ink); background:var(--paper);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; }
::selection { background:var(--mist-2); color:var(--ink); }
:focus-visible { outline:2px solid var(--indigo); outline-offset:3px; border-radius:6px; }

/* ── type ─────────────────────────────────────────────────────────────── */
.h1, .h2, .h3, .t-h1, .t-h2, .stage-title, .step h3, .feat h3, .feat-tile h4, .faq .q,
.legal h1, .legal h2, .side h3, .plan-mid .title, .plan-right .big, .stat .value, .logo {
  font-family:var(--font-display); font-optical-sizing:auto; }
.h1 { font-size:clamp(42px,7.2vw,88px); line-height:.98; letter-spacing:-.045em; font-weight:800; margin:0; }
.h2 { font-size:clamp(32px,4.4vw,54px); line-height:1.02; letter-spacing:-.04em; font-weight:800; margin:0; }
.h1 em, .h2 em { font-family:var(--font-serif); font-style:italic; font-weight:400;
  letter-spacing:-.02em; padding-right:.04em; }
.lead { font-size:clamp(17px,1.5vw,19.5px); line-height:1.6; font-weight:450; color:var(--muted); }
.eyebrow { font-family:var(--font-mono); font-size:12px; font-weight:600; letter-spacing:.08em;
  text-transform:uppercase; color:var(--indigo); display:inline-flex; align-items:center; gap:10px; }
.eyebrow::before { content:""; width:22px; height:2px; border-radius:2px; background:linear-gradient(90deg,var(--violet),var(--orange-hot)); }
.t-label { font-family:var(--font-mono); letter-spacing:.08em; color:var(--indigo); }
.t-h1 { letter-spacing:-.035em; }

/* ── buttons: squared, solid, no pills ───────────────────────────────── */
.btn, .btn-primary, .btn-secondary, .btn-xl, .btn-56, .btn-nav { border-radius:var(--r-btn) !important; }
.btn { font-family:var(--font-sans); font-weight:700; letter-spacing:-.005em;
  transition:transform .2s var(--ease), box-shadow .2s var(--ease), background-position .5s var(--ease), background .2s var(--ease); }
.btn-primary, .btn-primary:visited { background:var(--grad-primary); background-size:160% 100%; background-position:0 0; color:#fff; box-shadow:var(--sh-glow); }
.btn-primary:hover { background-position:100% 0; }
.btn-primary:hover { transform:translateY(-2px); box-shadow:0 14px 32px rgba(75,59,255,.32); }
.btn-secondary { background:#fff; color:var(--ink); border:var(--bd-line); }
.btn-secondary:hover { border-color:var(--ink); }
.btn-inverse:hover, .btn-outline-white:hover { transform:translateY(-2px); }
.btn i { transition:transform .2s var(--ease); }
.btn:hover .ph-arrow-right { transform:translateX(3px); }
.nav-links a.btn-primary { color:#fff; }

/* ── nav ──────────────────────────────────────────────────────────────── */
.nav { background:rgba(255,255,255,.86); border-bottom:1px solid var(--line); }
.logo { font-weight:800; letter-spacing:-.035em; font-size:20px; }
.logo-mark { display:block; flex:none; background:none; border-radius:0 !important; } /* the icon itself (assets/logo.png, from brand/make_icons.py) */
.nav-links a { font-weight:600; }

/* ── hero (night) ─────────────────────────────────────────────────────── */
.hero { position:relative; overflow:hidden; padding:clamp(56px,9vw,104px) 0 0;
  background:
    radial-gradient(55% 45% at 30% 0%, rgba(124,92,255,.18) 0%, transparent 70%),
    radial-gradient(40% 40% at 85% 20%, rgba(255,122,47,.13) 0%, transparent 70%),
    linear-gradient(180deg,#F6F7FC 0%,#fff 70%); }
/* fine grain + a faint viewfinder grid, all inline SVG, no image request */
.hero::before { content:""; position:absolute; inset:0; pointer-events:none; opacity:.9;
  background-image:
    linear-gradient(rgba(20,20,43,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(20,20,43,.05) 1px, transparent 1px);
  background-size:96px 96px;
  mask-image:radial-gradient(70% 60% at 50% 30%, #000 0%, transparent 75%);
  -webkit-mask-image:radial-gradient(70% 60% at 50% 30%, #000 0%, transparent 75%); }
.hero > * { position:relative; z-index:1; }
.hero-centred { max-width:960px; margin:0 auto; text-align:center; display:flex; flex-direction:column;
  align-items:center; gap:26px; }
.hero .hero-centred { padding:0 20px 56px; }
.hero .h1 { max-width:14ch; }
.h1 em, .h2 em { background:var(--grad-text); -webkit-background-clip:text; background-clip:text; color:transparent; }
.hero .lead { max-width:640px; }
.hero-btns { display:flex; flex-wrap:wrap; gap:12px; justify-content:center; }
.hero .trust { justify-content:center; font-weight:500; }
.hero .trust i { color:var(--green-fg); }

.rec { display:inline-flex; align-items:center; gap:12px; padding:8px 14px 8px 12px;
  border:1px solid var(--line); border-radius:8px; background:#fff; box-shadow:var(--sh-card);
  font-family:var(--font-mono); font-size:12px; font-weight:500; letter-spacing:.06em;
  text-transform:uppercase; color:var(--muted); }
.rec b { color:var(--ink); font-weight:600; }
.rec .led { width:8px; height:8px; border-radius:50%; background:var(--orange-hot);
  animation:rec 1.6s ease-in-out infinite; }
.rec .tc { color:var(--indigo); }
@keyframes rec { 0%,100% { opacity:1; box-shadow:0 0 0 0 rgba(255,122,47,.5); }
  50% { opacity:.55; box-shadow:0 0 0 6px rgba(255,122,47,0); } }

/* the contact strip: a film strip of finished reels running under the hero */
.strip { position:relative; padding:22px 0 0; margin-top:8px; }
.strip-track { display:flex; width:max-content; padding:26px 0; margin-left:-5vw;
  background:var(--night); transform:rotate(-2deg) translateY(12px); transform-origin:center;
  animation:roll 40s linear infinite;
  --holes:radial-gradient(circle, var(--night-3) 0 4px, transparent 4.5px);
  background-image:var(--holes), var(--holes);
  background-size:22px 14px, 22px 14px; background-repeat:repeat-x;
  background-position:0 6px, 0 calc(100% - 6px); }
.strip:hover .strip-track { animation-play-state:paused; }
@keyframes roll { from { transform:rotate(-2deg) translate3d(0,12px,0); }
  to { transform:rotate(-2deg) translate3d(-25%,12px,0); } }
.frame { position:relative; flex:none; margin-right:14px !important; width:clamp(150px,17vw,210px); aspect-ratio:9/16; margin:0;
  border-radius:10px; overflow:hidden; background:var(--night-3); }
.frame img { width:100%; height:100%; object-fit:cover; }
.frame figcaption { position:absolute; left:8%; right:8%; bottom:16%; text-align:center;
  font-family:var(--font-display); font-weight:800; font-size:clamp(13px,1.2vw,15px); line-height:1.15;
  color:#fff; text-shadow:0 2px 0 rgba(0,0,0,.55), 0 0 14px rgba(0,0,0,.45); }
.frame figcaption span { background:var(--orange-hot); color:#fff; padding:0 .25em; border-radius:3px;
  box-decoration-break:clone; -webkit-box-decoration-break:clone; text-shadow:none; }
.frame .tcode { position:absolute; top:8px; left:8px; font-family:var(--font-mono); font-size:10px;
  color:#fff; background:rgba(0,0,0,.45); padding:2px 6px; border-radius:4px; letter-spacing:.04em; }
.strip-note { position:relative; z-index:2; text-align:center; font-family:var(--font-mono); font-size:11px;
  letter-spacing:.06em; text-transform:uppercase; color:var(--muted); padding:40px 20px 28px; margin:0; }

/* ── numbers row: editorial rules, not cards ──────────────────────────── */
.numbers { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));
  border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.numbers > div { padding:30px 24px; border-left:1px solid var(--line); }
.numbers > div:first-child { border-left:0; }
.numbers .label { font-family:var(--font-mono); font-size:11.5px; letter-spacing:.07em; text-transform:uppercase; color:var(--muted); }
.numbers .value { font-family:var(--font-display); font-size:clamp(30px,3.2vw,42px); font-weight:800;
  letter-spacing:-.04em; line-height:1.05; margin:10px 0 6px; }
.numbers .foot { font-size:14px; color:var(--muted); }
@media (max-width:520px) { .numbers > div { border-left:0; border-top:1px solid var(--line); }
  .numbers > div:first-child { border-top:0; } }

/* ── sections ─────────────────────────────────────────────────────────── */
.section { padding:clamp(72px,9vw,120px) 0; }
.section-cream { background:var(--mist); }
.section-head { display:flex; flex-direction:column; gap:16px; max-width:720px; }
.section-head .lead { max-width:640px; }

/* steps: big timecode numerals */
.steps { display:grid; gap:20px; margin-top:48px; grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr)); }
.step { background:#fff; border-radius:var(--r-card); padding:12px 12px 26px; box-shadow:var(--sh-card);
  border:1px solid var(--line); transition:transform .3s var(--ease), box-shadow .3s var(--ease); }
.step:hover { transform:translateY(-4px); box-shadow:var(--sh-raised); }
.step img { border-radius:12px; aspect-ratio:4/3; object-fit:cover; width:100%; }
.step .tcnum { display:block; font-family:var(--font-mono); font-size:12px; font-weight:600; color:var(--orange-hot);
  letter-spacing:.06em; margin:22px 14px 8px; }
.step h3 { font-size:24px; letter-spacing:-.03em; margin:0 14px 8px; }
.step p { margin:0 14px; color:var(--muted); line-height:1.6; }

/* features: a bento of tiles */
.bento { display:grid; gap:16px; margin-top:48px; grid-template-columns:repeat(6,1fr); }
.tile-f { grid-column:span 2; background:#fff; border:1px solid var(--line); border-radius:var(--r-card);
  padding:26px; display:flex; flex-direction:column; gap:10px; transition:border-color .2s, transform .3s var(--ease); }
.tile-f:hover { border-color:var(--violet); transform:translateY(-3px); box-shadow:0 14px 34px rgba(124,72,220,.10); }
.tile-f:nth-child(even):not(.night) .ic { background:var(--orange-soft); color:var(--orange-hot); }
.tile-f:nth-child(even):not(.night):hover { border-color:var(--orange-hot); }
.tile-f .ic { width:44px; height:44px; border-radius:11px; background:var(--indigo-soft); color:var(--indigo);
  display:inline-flex; align-items:center; justify-content:center; font-size:24px; }
.tile-f h4 { font-family:var(--font-display); font-size:21px; font-weight:800; letter-spacing:-.03em; margin:8px 0 0; }
.tile-f p { margin:0; color:var(--muted); line-height:1.55; }
.tile-f.wide { grid-column:span 3; }
.tile-f.night { background:var(--grad-dark-card); color:#fff; border-color:transparent; }
.tile-f.night p { color:var(--muted-night); }
.tile-f.night .ic { background:rgba(201,184,255,.14); color:var(--accent-night); }
.styles { display:flex; flex-wrap:wrap; gap:8px; margin-top:auto; padding-top:10px; }
.styles span { font-family:var(--font-display); font-weight:800; font-size:13px; padding:5px 10px;
  border-radius:7px; background:rgba(255,255,255,.08); color:#fff; letter-spacing:-.01em; }
.styles span:nth-child(3n+1) { background:var(--grad-primary); color:#fff; }
.styles span:nth-child(3n+2) { background:transparent; border:1px solid rgba(255,255,255,.3); }
@media (max-width:900px) { .bento { grid-template-columns:1fr 1fr; }
  .tile-f, .tile-f.wide { grid-column:span 1; } }
@media (max-width:560px) { .bento { grid-template-columns:1fr; } }

/* autopilot band (night) */
.band { background:var(--grad-dark-card); color:#fff; position:relative; overflow:hidden; }
.band::before { content:""; position:absolute; inset:auto -10% -40% auto; width:70%; height:90%;
  background:radial-gradient(closest-side, rgba(124,92,255,.30), transparent); pointer-events:none; }
.band::after { content:""; position:absolute; inset:-30% auto auto -15%; width:55%; height:80%;
  background:radial-gradient(closest-side, rgba(255,122,47,.20), transparent); pointer-events:none; }
.band .eyebrow { color:var(--accent-night); }
.band .h2 { color:#fff; }
.band .h2 em { background:linear-gradient(100deg,#C9B8FF,#FFB07A); -webkit-background-clip:text; background-clip:text; color:transparent; }
.band .lead { color:var(--muted-night); }
.band-grid { position:relative; display:grid; gap:56px; align-items:center; margin-top:48px;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,380px),1fr)); }
.band-phone { display:flex; justify-content:center; }
.band-phone img { width:min(290px,72vw); border-radius:30px; border:8px solid var(--night-3);
  box-shadow:0 40px 90px rgba(0,0,0,.55), 0 0 0 1px var(--night-line); transform:rotate(-3deg); }
.rules { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; }
.rules li { display:grid; grid-template-columns:72px 1fr; gap:16px; padding:20px 0; border-top:1px solid var(--night-line); }
.rules li:last-child { border-bottom:1px solid var(--night-line); }
.rules .k { font-family:var(--font-mono); font-size:12px; color:#FFB07A; letter-spacing:.05em; padding-top:4px; }
.rules b { display:block; font-family:var(--font-display); font-size:19px; letter-spacing:-.025em; margin-bottom:4px; }
.rules span { color:var(--muted-night); line-height:1.55; }
.pending { display:inline-flex; align-items:center; gap:8px; margin-top:28px; padding:10px 14px; border-radius:10px;
  background:rgba(255,255,255,.05); border:1px dashed rgba(255,255,255,.22); color:var(--muted-night); font-size:14px; }
.pending i { color:#FFB07A; }

/* ── pricing ──────────────────────────────────────────────────────────── */
.panel { background:#fff; border:1px solid var(--line); border-radius:var(--r-panel); box-shadow:var(--sh-raised); }
.plan-row { border:1.5px solid var(--line); border-radius:16px; transition:border-color .15s, box-shadow .15s, transform .2s var(--ease); }
.plan-row:hover { border-color:var(--accent-night); }
.plan-row[aria-checked="true"] { border-color:var(--violet); box-shadow:0 0 0 4px var(--indigo-soft), 0 14px 30px rgba(255,122,47,.12); }
.plan-row[aria-checked="true"] .radio { background:var(--indigo); }
.plan-right .big { letter-spacing:-.04em; }
.popular { background:var(--grad-primary); color:#fff; font-family:var(--font-mono); font-size:11px; letter-spacing:.06em;
  border-radius:6px; }
.tag-black { border-radius:6px; font-family:var(--font-mono); letter-spacing:.04em; }
.checks li { font-weight:500; }
.checks i { color:var(--green-fg); }

/* ── faq: native disclosure ───────────────────────────────────────────── */
.faq { max-width:860px; }
.faq details { border-top:1px solid var(--line); }
.faq details:last-of-type { border-bottom:1px solid var(--line); }
.faq summary { list-style:none; cursor:pointer; display:flex; align-items:center; justify-content:space-between;
  gap:20px; padding:24px 4px; font-family:var(--font-display); font-size:clamp(18px,1.8vw,21px); font-weight:700;
  letter-spacing:-.025em; }
.faq summary::-webkit-details-marker { display:none; }
.faq summary::after { content:"+"; font-family:var(--font-mono); font-weight:500; font-size:22px; color:var(--orange-hot);
  width:36px; height:36px; flex:none; border-radius:9px; background:var(--orange-soft);
  display:inline-flex; align-items:center; justify-content:center; transition:transform .25s var(--ease); }
.faq details[open] summary::after { transform:rotate(45deg); }
.faq details p { margin:0; padding:0 4px 26px; color:var(--muted); line-height:1.65; max-width:720px; }
/* older pages keep the plain list */
.faq .qa { background:#fff; border:1px solid var(--line); border-radius:16px; }

/* ── closing band ─────────────────────────────────────────────────────── */
.cta { background:var(--grad-primary); border-radius:var(--r-panel); box-shadow:0 24px 60px rgba(124,72,220,.26), 0 10px 40px rgba(255,122,47,.22) !important; position:relative; overflow:hidden; }
.cta::before { content:""; position:absolute; inset:-30% auto auto -10%; width:60%; height:120%;
  background:radial-gradient(closest-side, rgba(255,255,255,.16), transparent); pointer-events:none; }
.cta > * { position:relative; }
.cta .h2 em { background:none; color:#fff; }
.cta img { border-radius:16px; }
.btn-outline-white { border:1px solid rgba(255,255,255,.6); }

/* ── shared bits used by other pages ──────────────────────────────────── */
.feat-tile { border:1px solid var(--line); border-radius:var(--r-card); }
.feat-tile i { color:var(--indigo) !important; }
.feat-tile h4 { letter-spacing:-.03em; }
.pill-tag { border-radius:8px; font-family:var(--font-mono); font-weight:500; letter-spacing:.04em; font-size:12px; }
.dot { background:var(--orange-hot); }
.legal a, .footer .fine a { color:var(--indigo); }
.footer { background:var(--paper); }

/* reveal on scroll (site.js adds .in); visible by default without JS */
.js .reveal { opacity:0; transform:translateY(18px); transition:opacity .7s var(--ease), transform .7s var(--ease); }
.js .reveal.in { opacity:1; transform:none; }
.hero-centred > * { animation:rise .8s var(--ease) both; }
.hero-centred > *:nth-child(2) { animation-delay:.08s; } .hero-centred > *:nth-child(3) { animation-delay:.16s; }
.hero-centred > *:nth-child(4) { animation-delay:.24s; } .hero-centred > *:nth-child(5) { animation-delay:.32s; }
@keyframes rise { from { opacity:0; transform:translateY(16px); } to { opacity:1; transform:none; } }

@media (prefers-reduced-motion:reduce) {
  .strip-track { animation:none; transform:rotate(-2deg); }
  .hero-centred > *, .rec .led { animation:none; }
  .js .reveal { opacity:1; transform:none; transition:none; }
  .step, .tile-f, .btn { transition:none; }
}
@media (max-width:640px) {
  .hero .h1 { max-width:none; }
  .band-phone img { transform:none; }
  /* Phone: tighter rhythm between sections and under their titles (desktop unchanged). */
  .hero .hero-centred { padding-bottom:32px; }
  .strip-note { padding:24px 20px 12px; }
  .section, section.section[style] { padding:44px 0 !important; }
  section.wrap[style] { padding-top:36px !important; padding-bottom:36px !important; }
  .section-head { gap:10px; }
  .section-head[style] { margin-bottom:16px !important; }
  .steps, .bento, .band-grid { margin-top:24px; }
  .band-grid { gap:32px; }
  .faq summary { padding:18px 4px; }
}

/* ── plan cards (owner, 27 Oct). Yearly leads: first, chosen by default, a bigger card with
   a "Best value · Save 40%" strip built in and the monthly weekly price crossed out next to
   its own. Monthly is the quiet second option. ── */
#plans { gap:14px !important; }
.plan-row { display:block; padding:0; border-radius:20px; border:1.5px solid var(--line); background:var(--paper);
  box-shadow:none; overflow:hidden; transition:border-color .15s, box-shadow .2s, transform .2s var(--ease); }
.plan-row:hover { transform:translateY(-1px); }
.plan-body { display:flex; align-items:center; gap:14px; padding:16px 18px; }
.radio { width:24px; height:24px; }
.plan-mid .title { font-size:18px; line-height:1.15; }
.plan-mid .sub { font-size:13.5px; font-weight:600; margin-top:4px; white-space:nowrap; }
.plan-mid .sub s, .plan-right .was { color:var(--muted); opacity:.65; font-weight:500; }
.plan-mid .sub s { margin-right:4px; }
.plan-right { display:flex; flex-direction:column; align-items:flex-end; line-height:1; text-align:right; }
.plan-right .big { font-size:26px; }
.plan-right .per { font-size:11.5px; font-weight:600; color:var(--muted); margin-top:5px; }
.plan-right .was { font-size:13px; margin-bottom:3px; }

/* the best-value card */
.plan-best { border:2px solid transparent;
  background:linear-gradient(160deg,#F3EFFF 0%,#FFFFFF 50%,#FFF3EA 100%) padding-box, var(--grad-primary) border-box; }
.plan-best .plan-body { padding:20px 20px 22px; }
.plan-best .plan-mid .title { font-size:22px; }
.plan-best .plan-right .big { font-size:38px; background:var(--grad-text); -webkit-background-clip:text;
  background-clip:text; color:transparent; }
.plan-strip { position:relative; display:flex; justify-content:space-between; align-items:center; padding:8px 18px;
  background:var(--grad-primary); color:#fff; font-family:var(--font-mono); font-size:11px; font-weight:700;
  letter-spacing:.08em; text-transform:uppercase; overflow:hidden; }
.plan-strip span { display:inline-flex; align-items:center; gap:6px; }
.plan-strip i { font-size:15px; }
.plan-strip::after { content:""; position:absolute; inset:0; width:40%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.35),transparent);
  transform:translateX(-120%); animation:plan-sheen 3.6s var(--ease) 1s infinite; }
@keyframes plan-sheen { 0%{transform:translateX(-120%)} 45%,100%{transform:translateX(320%)} }
@media (prefers-reduced-motion: reduce) { .plan-strip::after { animation:none; display:none; } }

/* chosen / not chosen */
.plan-row[aria-checked="true"] .radio { background:var(--grad-primary); border-color:transparent; color:#fff; }
.plan-best[aria-checked="true"] { box-shadow:0 18px 40px rgba(124,72,220,.28), 0 6px 16px var(--orange-glow); }
.plan-best[aria-checked="false"] { box-shadow:var(--sh-card); }
.plan-plain[aria-checked="true"] { border:2px solid var(--violet); box-shadow:0 0 0 4px var(--indigo-soft); }
.plan-plain[aria-checked="true"] .plan-body { padding:15.5px 17.5px; }
.plan-plain .plan-right .big { color:var(--ink); }

@media (max-width: 480px) {
  .plan-body, .plan-best .plan-body { padding:14px; gap:12px; }
  .plan-best .plan-mid .title { font-size:19px; }
  .plan-mid .sub { font-size:12.5px; }
  .plan-best .plan-right .big { font-size:32px; }
  .plan-right .big { font-size:23px; }
  .plan-strip { padding:7px 14px; }
}

/* corner tag on the quieter cards (monthly offer, trial) */
.plan-plain { position:relative; overflow:visible; }
.plan-tag { position:absolute; top:-10px; right:16px; padding:3px 9px; border-radius:999px; white-space:nowrap;
  font-family:var(--font-mono); font-size:10px; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  color:#fff; background:linear-gradient(120deg,#FF7A2F,#FF9F5A); box-shadow:0 5px 12px var(--orange-glow); }
.plan-tag-soft { color:var(--indigo); background:var(--indigo-soft); box-shadow:none; border:1px solid var(--line); }

/* ── /pricing (owner, 27 Oct): the three ways in side by side, then what every plan has,
   then a plain table. Our own look: white, indigo → violet → hot orange. ── */
.pp-hero { text-align:center; padding:64px 0 8px; }
.pp-hero .eyebrow { justify-content:center; }
.pp-hero h1 { margin:14px auto 14px; max-width:820px; font-size:clamp(36px,5.2vw,62px); line-height:1.02; }
.pp-hero .eyebrow { display:inline-flex; }
.pp-hero .lead { max-width:620px; margin:0 auto; }
.grad-text { background:var(--grad-text); -webkit-background-clip:text; background-clip:text; color:transparent; }
.center { text-align:center; }
.pp-wrap { padding:40px 0 64px; }
.pp-cards { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; align-items:stretch; max-width:1080px; margin:0 auto; }
.pp-card { position:relative; display:flex; flex-direction:column; background:var(--paper); border:1.5px solid var(--line);
  border-radius:24px; padding:30px 26px 26px; box-shadow:var(--sh-card); transition:transform .25s var(--ease), box-shadow .25s; }
.pp-card:hover { transform:translateY(-4px); box-shadow:var(--sh-raised); }
.pp-featured { border:2px solid transparent; transform:translateY(-10px);
  background:linear-gradient(165deg,#F3EFFF 0%,#FFFFFF 45%,#FFF3EA 100%) padding-box, var(--grad-primary) border-box;
  box-shadow:0 24px 50px rgba(124,72,220,.22), 0 8px 20px var(--orange-glow); }
.pp-featured:hover { transform:translateY(-14px); }
.pp-badges { position:absolute; top:-13px; left:26px; right:20px; display:flex; flex-wrap:wrap; gap:6px; }
.pp-badge { display:inline-flex; align-items:center; gap:5px; padding:5px 12px; border-radius:999px; font-family:var(--font-mono);
  font-size:11px; font-weight:700; letter-spacing:.07em; text-transform:uppercase; color:#fff; background:var(--grad-primary);
  box-shadow:0 8px 18px rgba(124,72,220,.3); }
.pp-badge i { font-size:14px; }
.pp-badge-hot { background:linear-gradient(120deg,#FF7A2F,#FF9F5A); box-shadow:0 8px 18px var(--orange-glow); }
.pp-badge-best { background:var(--grad-dark-card); box-shadow:0 8px 18px rgba(20,20,43,.28); }
.pp-name { font-family:var(--font-display); font-size:24px; font-weight:800; letter-spacing:-.02em; margin:0; }
.pp-tag { font-size:14px; color:var(--muted); margin:6px 0 22px; min-height:40px; }
.pp-price { display:flex; align-items:baseline; gap:8px; flex-wrap:wrap; }
.pp-big { font-family:var(--font-display); font-size:48px; font-weight:800; letter-spacing:-.04em; line-height:1; }
.pp-big s { font-size:22px; font-weight:600; color:var(--muted); opacity:.6; margin-right:8px; letter-spacing:-.01em; }
.pp-featured .pp-big { background:var(--grad-text); -webkit-background-clip:text; background-clip:text; color:transparent; }
.pp-per { font-size:14px; font-weight:600; color:var(--muted); }
.pp-then { font-size:14px; font-weight:600; color:var(--ink); margin:8px 0 14px; }
.pp-chip { align-self:flex-start; display:inline-flex; align-items:center; gap:6px; padding:6px 11px; border-radius:999px;
  font-size:12.5px; font-weight:700; color:var(--indigo); background:var(--indigo-soft); }
.pp-card:not(.pp-featured) .pp-chip { color:var(--orange-hot); background:var(--orange-soft); }
.pp-chip i { font-size:15px; }
.pp-cta { width:100%; min-height:52px; margin:22px 0 22px; justify-content:center; font-size:15.5px; }
.btn-outline { background:var(--paper); color:var(--indigo); border:1.5px solid var(--indigo); }
.btn-outline:hover { background:var(--indigo-soft); }
.pp-list { list-style:none; margin:0; padding:18px 0 0; border-top:1px solid var(--line); display:grid; gap:11px; }
.pp-list li { display:flex; gap:10px; align-items:flex-start; font-size:14.5px; font-weight:500; }
.pp-list i { color:var(--green-fg); margin-top:3px; }
.pp-under { display:flex; justify-content:center; align-items:center; gap:8px; text-align:center; margin:34px auto 0;
  font-size:13.5px; font-weight:600; color:var(--muted); }
.pp-under i { font-size:18px; color:var(--indigo); }
.pp-incl { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:32px; }
.pp-incl > div { background:var(--paper); border:1px solid var(--line); border-radius:20px; padding:22px; box-shadow:var(--sh-card); }
.pp-incl h4 { margin:14px 0 6px; font-size:16.5px; font-weight:700; }
.pp-incl p { margin:0; font-size:14px; line-height:1.5; color:var(--muted); }
.pp-ico { width:46px; height:46px; border-radius:14px; display:grid; place-items:center; color:#fff; font-size:24px;
  box-shadow:0 8px 18px rgba(124,72,220,.22); }
.pp-ico.i1 { background:linear-gradient(135deg,#4B3BFF,#7C5CFF); } .pp-ico.i2 { background:linear-gradient(135deg,#7C5CFF,#A35CFF); }
.pp-ico.i3 { background:linear-gradient(135deg,#A35CFF,#D45BC8); } .pp-ico.i4 { background:linear-gradient(135deg,#D45BC8,#FF6F6F); }
.pp-ico.i5 { background:linear-gradient(135deg,#FF6F6F,#FF7A2F); } .pp-ico.i6 { background:linear-gradient(135deg,#FF7A2F,#FF9F5A); }
.pp-table-wrap { overflow-x:auto; margin:32px auto 0; max-width:900px; border:1px solid var(--line); border-radius:20px;
  background:var(--paper); box-shadow:var(--sh-card); }
.pp-table { width:100%; border-collapse:collapse; font-size:15px; min-width:560px; }
.pp-table th, .pp-table td { padding:15px 18px; text-align:center; border-bottom:1px solid var(--line); }
.pp-table th { font-family:var(--font-display); font-size:16px; font-weight:800; }
.pp-table td:first-child, .pp-table th:first-child { text-align:left; font-weight:600; color:var(--muted); }
.pp-table tr:last-child td { border-bottom:0; }
.pp-table .hl { background:linear-gradient(180deg,#F5F2FF,#FFF7F1); }
.pp-table thead .hl { color:var(--indigo); }
.pp-table i { color:var(--green-fg); font-size:18px; }
.pp-fine { max-width:900px; margin:28px auto 0; display:grid; gap:10px; }
.pp-fine p { margin:0; font-size:12.5px; line-height:1.55; color:var(--muted); }
@media (max-width: 960px) {
  .pp-cards { grid-template-columns:1fr; max-width:480px; gap:28px; }
  .pp-featured, .pp-featured:hover { transform:none; }
  .pp-tag { min-height:0; }
  .pp-incl { grid-template-columns:1fr 1fr; }
}
@media (max-width: 560px) {
  .pp-hero { padding-top:40px; }
  .pp-incl { grid-template-columns:1fr; }
  .pp-big { font-size:42px; }
}

/* plan cards, tidied (owner, 27 Oct): one caption under the price, the weekly figure in the
   list, solid buttons on every card */
.pp-tag { margin:6px 0 18px; min-height:0; }
.pp-price { margin-top:4px; }
.pp-per { font-size:14px; font-weight:600; color:var(--muted); margin:6px 0 0; }
.pp-cta { margin:20px 0 20px; min-height:54px; font-size:16px; font-weight:800; }
.pp-featured .pp-cta { box-shadow:var(--sh-glow); }
.pp-cta-dark { background:var(--ink); color:#fff; border:0; box-shadow:0 10px 22px rgba(20,20,43,.22); }
.pp-cta-dark:hover { background:var(--night-3); color:#fff; }
.pp-list b { font-weight:800; color:var(--ink); }

/* the plan table lists features, not money (owner, 27 Oct) */
.pp-sub { max-width:560px; margin:10px auto 0; }
.pp-table td:first-child { color:var(--ink); font-weight:500; }
.pp-table tr.pp-group td { text-align:left; padding:22px 18px 8px; font-family:var(--font-mono); font-size:11.5px;
  font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--indigo); background:var(--paper);
  border-bottom:1px solid var(--line); }
.pp-soon { display:inline-block; padding:3px 9px; border-radius:999px; font-size:11.5px; font-weight:700;
  color:var(--orange-hot); background:var(--orange-soft); }