/* ==========================================================================
   LYRIXSA AI RESELLER LICENSE — post-purchase upgrade page
   Design tokens, type scale and component idiom inherited verbatim from the
   main sales page (Lyrixsa Sales Page/Lyrixa AI — new.html :root) and the
   sibling OTO pages (oto-studio/assets/css/studio.css) so this reads as the
   same product rather than a lookalike.

   THE CERTIFICATE PALETTE IS SEPARATE AND DELIBERATELY SO. The certificate
   is a printable document with its own fixed palette (--cert-*), lifted from
   the app's real CertificatePreview.tsx. It must not follow the page theme.
   ========================================================================== */

:root{
  --bg:#101114; --s1:#17181D; --s2:#1E2026; --s3:#262930;
  --border:#2A2D35; --border-strong:#3A3E48;
  /* Text ramp. Every tier clears WCAG 2.1 AA (4.5:1) against ALL FOUR surface
     tokens, because --t3 carries the legal copy — the JVZoo earnings
     disclaimer, the footer copyright, the "arithmetic, not a forecast"
     footnote, the exclusions panel — and disclosure text a buyer cannot
     comfortably read is the one kind of small print that actually matters.
     --t3 was #63666F, which measured 2.54:1 on --s3 and 3.09:1 on --s1: it
     failed on every surface it was used on. Measured ratios below; the worst
     case is always the lightest surface, --s3:
       --t2 #A7ABB4  ->  bg 8.21 · s1 7.70 · s2 7.08 · s3 6.33
       --t3 #8C909A  ->  bg 5.91 · s1 5.55 · s2 5.09 · s3 4.56
     --t2 moved up with --t3 to keep the three tiers visually distinct; left at
     #9B9FA8 it would sit ~0.05 relative luminance from the new --t3 and the
     ramp would read as two tiers instead of three. */
  --t1:#EDEDEC; --t2:#A7ABB4; --t3:#8C909A;
  --accent:#F2A93C; --accent-soft:rgba(242,169,60,.12); --accent-border:rgba(242,169,60,.55);
  --success:#7FD9A8; --success-soft:rgba(127,217,168,.12);
  --danger:#E8735F;
  --ink-on-accent:#1A1300;

  /* the certificate document's own palette — CertificatePreview.tsx:18-25 */
  --cert-bg:#0B0B0D; --cert-gold:#C9A24B; --cert-text:#F1F0ED;
  --cert-muted:#9A9A9E; --cert-faint:#6C6C70; --cert-rule:#2A2A2E;

  /* The *Fallback families are metric-matched @font-face blocks declared in
     index.html (style#lyrixa-font-fallbacks) — local Arial with measured
     size-adjust and ascent/descent overrides. They sit FIRST in each stack
     after the real face so the pre-swap paint occupies the same line boxes the
     webfont will, which is what took CLS from 0.13 to passing. The generic
     families stay at the end for anything with no Arial at all. */
  --head:'Space Grotesk','Space Grotesk Fallback',system-ui,sans-serif;
  --body:'Inter','Inter Fallback',system-ui,-apple-system,sans-serif;
  --mono:'IBM Plex Mono','IBM Plex Mono Fallback',ui-monospace,Menlo,monospace;

  --wrap:1120px;
  --r-sm:8px; --r:12px; --r-lg:16px; --r-xl:22px;
  --sec-y:clamp(56px,7vw,104px);
}

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

html{-webkit-text-size-adjust:100%}

body{
  margin:0;
  background:var(--bg);
  color:var(--t1);
  font-family:var(--body);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  /* the single guard against horizontal scroll at every breakpoint */
  overflow-x:hidden;
}

img,svg{display:block;max-width:100%}
img{height:auto}
a{color:inherit;text-decoration:none}

h1,h2,h3,h4{font-family:var(--head);margin:0;letter-spacing:-.02em;line-height:1.1}
p{margin:0}

::selection{background:var(--accent);color:var(--ink-on-accent)}

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

.skip{
  position:absolute;left:-9999px;top:0;z-index:200;
  padding:12px 18px;background:var(--accent);color:var(--ink-on-accent);
  font-weight:700;border-radius:0 0 var(--r) 0;
}
.skip:focus{left:0}

.wrap{width:100%;max-width:var(--wrap);margin:0 auto;padding:0 24px}

.sec{padding:var(--sec-y) 0;position:relative}
.sec + .sec{border-top:1px solid var(--border)}

.eyebrow{
  display:inline-block;font-family:var(--mono);font-size:11px;font-weight:500;
  text-transform:uppercase;letter-spacing:.16em;color:var(--accent);margin-bottom:14px;
}

.sec-head{max-width:760px;margin:0 auto clamp(34px,4.4vw,58px);text-align:center}
.sec-head h2{font-size:clamp(27px,4vw,44px);font-weight:700}
.sec-head h2 em{font-style:normal;color:var(--accent)}
.sec-head .lede{margin-top:16px;font-size:clamp(15px,1.5vw,18px);color:var(--t2);line-height:1.65}

/* ---------------------------------------------------------------- buttons */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  font-family:var(--head);font-weight:700;letter-spacing:-.01em;
  border-radius:var(--r);border:1px solid transparent;cursor:pointer;
  padding:14px 26px;font-size:15px;text-align:center;
  transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease,color .16s ease;
}
.btn-accent{
  background:linear-gradient(180deg,#F7BC5C,var(--accent));
  color:var(--ink-on-accent);
  box-shadow:0 1px 0 rgba(255,255,255,.3) inset,0 12px 30px -14px rgba(242,169,60,.6);
}
.btn-accent:hover{transform:translateY(-2px);box-shadow:0 1px 0 rgba(255,255,255,.35) inset,0 18px 40px -12px rgba(242,169,60,.72)}
.btn-accent:active{transform:translateY(0)}
.btn-xl{font-size:clamp(15px,1.7vw,18px);padding:18px 34px;width:100%;max-width:460px}
.btn-ghost{background:var(--s2);border-color:var(--border-strong);color:var(--t1)}
.btn-ghost:hover{border-color:var(--accent-border);color:var(--accent)}
.btn .arw{transition:transform .16s ease}
.btn:hover .arw{transform:translateX(3px)}


.fine{margin-top:14px;font-size:13px;color:var(--t3)}
.fine b{color:var(--t2);font-weight:600}

/* ---------------------------------------------------- 01 · sticky header */
.hdr{
  position:sticky;top:0;z-index:100;
  background:rgba(16,17,20,.86);backdrop-filter:blur(12px);
  border-bottom:1px solid var(--border);
}
.hdr-in{
  max-width:var(--wrap);margin:0 auto;padding:11px 24px;
  display:flex;align-items:center;justify-content:space-between;gap:18px;
}
.hdr-brand{display:flex;align-items:center;gap:11px;min-width:0}
.hdr-brand img{height:26px;width:auto;flex:none}
.hdr-brand span{
  font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--t3);padding-left:11px;border-left:1px solid var(--border);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.hdr-right{display:flex;align-items:center;gap:14px;flex:none}
.hdr-price{font-family:var(--mono);font-size:13px;color:var(--t2)}
.hdr-price b{color:var(--accent);font-weight:600}
.hdr .btn{padding:10px 18px;font-size:13.5px}

/* ------------------------------------------------------------- 02 · hero */
#hero{padding-top:clamp(44px,5.4vw,76px);overflow:hidden}
#hero::before{
  content:'';position:absolute;left:50%;top:-32%;transform:translateX(-50%);
  width:min(1180px,148%);height:660px;pointer-events:none;
  background:radial-gradient(ellipse at 50% 50%,rgba(242,169,60,.14),transparent 62%);
}
.hero-grid{
  display:grid;grid-template-columns:1.06fr .94fr;gap:clamp(30px,4vw,64px);
  align-items:center;position:relative;
}
#hero h1{font-size:clamp(31px,5.4vw,60px);font-weight:700;line-height:1.04}
#hero h1 em{font-style:normal;color:var(--accent)}
#hero .lede{margin-top:20px;font-size:clamp(15px,1.6vw,18.5px);color:var(--t2);line-height:1.65;max-width:56ch}
.hero-cta{margin-top:30px}
.hero-cta .btn-xl{max-width:420px}
.hero-badge{
  display:inline-flex;align-items:center;gap:9px;margin-bottom:18px;
  padding:7px 14px;border-radius:999px;
  background:var(--accent-soft);border:1px solid var(--accent-border);
  font-family:var(--mono);font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--accent);
}
.hero-badge i{width:6px;height:6px;border-radius:50%;background:var(--accent);flex:none}

/* the hero's visual: the 70% dial */
.dial-wrap{display:flex;justify-content:center;align-items:center;position:relative}
.dial{
  position:relative;width:min(360px,100%);aspect-ratio:1;
  display:flex;align-items:center;justify-content:center;
}
.dial svg{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg)}
.dial .track{fill:none;stroke:var(--s3);stroke-width:9}
.dial .fill{
  fill:none;stroke:url(#dialgrad);stroke-width:9;stroke-linecap:round;
  /* r=86 → circumference ≈ 540.35; 70% = 378.2 */
  stroke-dasharray:540.35;stroke-dashoffset:540.35;
  transition:stroke-dashoffset 1.5s cubic-bezier(.22,.61,.36,1);
}
.dial.in .fill{stroke-dashoffset:162.1}
.dial-mid{position:relative;text-align:center;z-index:1}
.dial-mid .n{
  display:block;font-family:var(--head);font-weight:700;letter-spacing:-.03em;
  font-size:clamp(58px,11vw,104px);line-height:1;color:var(--t1);
}
.dial-mid .n sup{font-size:.38em;vertical-align:super;color:var(--accent);top:0}
.dial-mid .lbl{
  display:block;margin-top:8px;font-family:var(--mono);font-size:11px;
  letter-spacing:.15em;text-transform:uppercase;color:var(--accent);
}
.dial-mid .sub{display:block;margin-top:9px;font-size:12.5px;color:var(--t3);max-width:20ch;margin-inline:auto;line-height:1.5}

/* ------------------------------------------- 03 · customer → reseller shift */
.shift{
  display:grid;grid-template-columns:1fr auto 1fr;gap:clamp(16px,2.4vw,30px);
  align-items:stretch;
}
.shift-card{
  background:linear-gradient(158deg,var(--s2),var(--s1) 70%);
  border:1px solid var(--border);border-radius:var(--r-xl);
  padding:clamp(22px,2.6vw,32px);position:relative;
}
.shift-card.now{opacity:.86}
.shift-card.next{border-color:var(--accent-border)}
.shift-card.next::before{
  content:'';position:absolute;inset:0;border-radius:var(--r-xl);pointer-events:none;
  background:radial-gradient(circle at 82% 8%,rgba(242,169,60,.13),transparent 58%);
}
.shift-tag{
  display:inline-block;font-family:var(--mono);font-size:10px;letter-spacing:.15em;
  text-transform:uppercase;padding:5px 11px;border-radius:999px;margin-bottom:16px;
  background:var(--s3);border:1px solid var(--border-strong);color:var(--t3);
}
.shift-card.next .shift-tag{background:var(--accent-soft);border-color:var(--accent-border);color:var(--accent)}
.shift-card h3{font-size:clamp(19px,2.2vw,25px);font-weight:700;margin-bottom:8px}
.shift-card .sub{font-size:13.5px;color:var(--t2);line-height:1.6;margin-bottom:20px}
.shift-steps{list-style:none;margin:0;padding:0;display:grid;gap:10px;position:relative}
.shift-steps li{
  display:flex;align-items:center;gap:12px;font-size:13.5px;color:var(--t2);
  background:var(--bg);border:1px solid var(--border);border-radius:var(--r);
  padding:12px 14px;line-height:1.45;
}
.shift-card.next .shift-steps li{border-color:var(--border-strong)}
.shift-steps li b{color:var(--t1);font-weight:600}
.shift-steps .k{
  flex:none;width:24px;height:24px;border-radius:7px;display:grid;place-items:center;
  font-family:var(--mono);font-size:11px;font-weight:600;
  background:var(--s3);color:var(--t3);
}
.shift-card.next .shift-steps .k{background:var(--accent);color:var(--ink-on-accent)}
.shift-arrow{
  display:grid;place-items:center;align-self:center;
  width:52px;height:52px;border-radius:50%;flex:none;
  background:var(--s2);border:1px solid var(--accent-border);
  color:var(--accent);
  box-shadow:0 0 0 6px rgba(242,169,60,.06);
}
.shift-arrow svg{width:22px;height:22px}

/* --------------------------------------------------- 04 · the flow / model */
.flow{
  display:grid;grid-template-columns:repeat(5,1fr);gap:0;
  border:1px solid var(--border);border-radius:var(--r-xl);overflow:hidden;
  background:linear-gradient(160deg,var(--s2),var(--s1) 72%);
}
.flow-step{
  padding:clamp(20px,2.3vw,30px) clamp(14px,1.6vw,20px);
  border-right:1px solid var(--border);position:relative;text-align:center;
}
.flow-step:last-child{border-right:0}
.flow-step.you{background:rgba(242,169,60,.055)}
.flow-ico{
  width:42px;height:42px;margin:0 auto 14px;border-radius:12px;display:grid;place-items:center;
  background:var(--s3);border:1px solid var(--border-strong);color:var(--accent);
}
.flow-step.you .flow-ico{background:var(--accent-soft);border-color:var(--accent-border)}
.flow-ico svg{width:19px;height:19px}
.flow-n{
  font-family:var(--mono);font-size:10px;letter-spacing:.15em;text-transform:uppercase;
  color:var(--t3);display:block;margin-bottom:7px;
}
.flow-step h4{font-size:15px;font-weight:600;margin-bottom:8px;line-height:1.25}
.flow-step p{font-size:12.5px;color:var(--t2);line-height:1.55}
/* the connector chevron between steps */
.flow-step:not(:last-child)::after{
  content:'';position:absolute;right:-7px;top:50%;transform:translateY(-50%) rotate(45deg);
  width:12px;height:12px;z-index:2;
  border-top:1px solid var(--border-strong);border-right:1px solid var(--border-strong);
  background:var(--s2);
}

.flow-note{
  margin-top:22px;display:flex;gap:13px;align-items:flex-start;
  background:var(--s1);border:1px solid var(--border);border-left:2px solid var(--accent);
  border-radius:var(--r);padding:16px 18px;
}
.flow-note svg{width:17px;height:17px;color:var(--accent);flex:none;margin-top:2px}
.flow-note p{font-size:13px;color:var(--t2);line-height:1.6}
.flow-note b{color:var(--t1);font-weight:600}

/* ------------------------------------------------------ 05 · the 70% split */
.split{
  display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(24px,3.4vw,52px);
  align-items:center;
}
.bar-wrap{
  background:linear-gradient(158deg,var(--s2),var(--s1) 70%);
  border:1px solid var(--border);border-radius:var(--r-xl);padding:clamp(22px,2.8vw,34px);
}
.bar-head{
  display:flex;align-items:baseline;justify-content:space-between;gap:14px;
  margin-bottom:20px;flex-wrap:wrap;
}
.bar-head .ttl{font-family:var(--head);font-size:17px;font-weight:600}
.bar-head .ex{font-family:var(--mono);font-size:11px;color:var(--t3);letter-spacing:.06em}
.bar{
  display:flex;height:64px;border-radius:var(--r);overflow:hidden;
  border:1px solid var(--border-strong);background:var(--bg);
}
.bar-seg{
  display:grid;place-items:center;position:relative;
  transition:flex-grow 1.4s cubic-bezier(.22,.61,.36,1);
  flex-grow:0;flex-basis:0;min-width:0;
}
.bar.in .bar-seg.yours{flex-grow:70}
.bar.in .bar-seg.ops{flex-grow:30}
.bar-seg.yours{background:linear-gradient(180deg,#F7BC5C,var(--accent));color:var(--ink-on-accent)}
.bar-seg.ops{background:var(--s3);color:var(--t2)}
.bar-seg .pct{font-family:var(--head);font-weight:700;font-size:clamp(16px,2.2vw,22px);white-space:nowrap}
.bar-legend{display:grid;gap:12px;margin-top:20px}
.bar-legend div{display:flex;gap:11px;align-items:flex-start;font-size:13px;color:var(--t2);line-height:1.55}
.bar-legend i{width:11px;height:11px;border-radius:3px;flex:none;margin-top:4px}
.bar-legend i.a{background:var(--accent)}
.bar-legend i.b{background:var(--s3);border:1px solid var(--border-strong)}
.bar-legend b{color:var(--t1);font-weight:600}

.calc{
  background:var(--s1);border:1px solid var(--border);border-radius:var(--r-xl);
  padding:clamp(22px,2.6vw,30px);
}
.calc-tag{
  display:inline-block;font-family:var(--mono);font-size:10px;letter-spacing:.15em;
  text-transform:uppercase;color:var(--t3);
  background:var(--s3);border:1px solid var(--border-strong);
  border-radius:999px;padding:5px 11px;margin-bottom:18px;
}
.calc-row{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:13px 0}
.calc-row + .calc-row{border-top:1px solid var(--border)}
.calc-row .l{font-size:13.5px;color:var(--t2)}
.calc-row .v{font-family:var(--mono);font-size:15px;color:var(--t1);font-weight:600;white-space:nowrap}
.calc-row.out .l{color:var(--t1);font-weight:600;font-family:var(--head)}
.calc-row.out .v{color:var(--accent);font-size:clamp(19px,2.4vw,25px)}
.calc-foot{
  margin-top:16px;padding-top:16px;border-top:1px dashed var(--border-strong);
  font-size:12px;color:var(--t3);line-height:1.6;
}

/* ---------------------------------------- 06 · commercial vs reseller card */
.vs{display:grid;grid-template-columns:1fr 1fr;gap:clamp(18px,2.4vw,26px)}
.vs-card{
  border:1px solid var(--border);border-radius:var(--r-xl);
  padding:clamp(22px,2.6vw,32px);
  background:linear-gradient(158deg,var(--s2),var(--s1) 70%);
  display:flex;flex-direction:column;
}
.vs-card.res{border-color:var(--accent-border)}
.vs-ico{
  width:44px;height:44px;border-radius:13px;display:grid;place-items:center;margin-bottom:16px;
  background:var(--s3);border:1px solid var(--border-strong);color:var(--t2);
}
.vs-card.res .vs-ico{background:var(--accent-soft);border-color:var(--accent-border);color:var(--accent)}
.vs-ico svg{width:20px;height:20px}
.vs-card h3{font-size:clamp(18px,2.1vw,23px);font-weight:700;margin-bottom:6px}
.vs-card .eq{
  font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--t3);margin-bottom:16px;
}
.vs-card.res .eq{color:var(--accent)}
.vs-card p{font-size:13.5px;color:var(--t2);line-height:1.65}
.vs-card p b{color:var(--t1);font-weight:600}
.vs-foot{
  margin-top:auto;padding-top:18px;font-size:12.5px;color:var(--t3);line-height:1.6;
}
.vs-sep{
  margin-top:22px;text-align:center;font-size:13px;color:var(--t2);line-height:1.65;
  background:var(--s1);border:1px solid var(--border);border-radius:var(--r);
  padding:16px 20px;
}
.vs-sep b{color:var(--t1);font-weight:600}

/* ------------------------------------------------------ 07 · what you get */
.gets{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2.2vw,24px)}
.get{
  background:linear-gradient(158deg,var(--s2),var(--s1) 70%);
  border:1px solid var(--border);border-radius:var(--r-lg);
  padding:clamp(20px,2.4vw,28px);
  transition:border-color .18s ease,transform .18s ease;
}
.get:hover{border-color:var(--border-strong);transform:translateY(-2px)}
.get-ico{
  width:40px;height:40px;border-radius:12px;display:grid;place-items:center;margin-bottom:15px;
  background:var(--accent-soft);border:1px solid var(--accent-border);color:var(--accent);
}
.get-ico svg{width:18px;height:18px}
.get h4{font-size:15.5px;font-weight:600;margin-bottom:9px;line-height:1.3}
.get p{font-size:13px;color:var(--t2);line-height:1.6}

/* the certificate showcase inside "what you get" */
.cert-show{
  margin-top:clamp(26px,3.2vw,40px);
  display:grid;grid-template-columns:.92fr 1.08fr;gap:clamp(24px,3.2vw,46px);
  align-items:center;
  background:linear-gradient(160deg,var(--s2),var(--s1) 72%);
  border:1px solid var(--border);border-radius:var(--r-xl);
  padding:clamp(22px,3vw,40px);
}
.cert-show h3{font-size:clamp(20px,2.5vw,28px);font-weight:700;margin-bottom:12px}
.cert-show h3 em{font-style:normal;color:var(--accent)}
.cert-show p{font-size:13.5px;color:var(--t2);line-height:1.65}
.cert-show p + p{margin-top:12px}
.cert-show .lnk{
  display:inline-flex;align-items:center;gap:8px;margin-top:18px;
  font-family:var(--head);font-size:13.5px;font-weight:600;color:var(--accent);
  border-bottom:1px solid var(--accent-border);padding-bottom:2px;
}
.cert-show .lnk svg{width:15px;height:15px}

/* ------------------------------------------------------------ 08 · offer */
.offer{display:flex;justify-content:center}
.offer-card{
  width:100%;max-width:720px;text-align:center;
  background:linear-gradient(160deg,var(--s2),var(--s1) 72%);
  border:1px solid var(--accent-border);border-radius:var(--r-xl);
  padding:clamp(26px,3.4vw,46px);
  box-shadow:0 40px 90px -50px rgba(242,169,60,.3);
}
.offer-tag{
  display:inline-block;font-family:var(--mono);font-size:10.5px;letter-spacing:.15em;
  text-transform:uppercase;padding:6px 13px;border-radius:999px;
  background:var(--accent-soft);border:1px solid var(--accent-border);color:var(--accent);
}
.offer-card h3{margin-top:18px;font-size:clamp(24px,3.2vw,36px);font-weight:700}
.offer-card .sub{margin-top:10px;font-size:14.5px;color:var(--t2)}
.offer-price{
  margin:clamp(22px,2.6vw,30px) 0;padding:clamp(18px,2.2vw,24px) 0;
  border-top:1px solid var(--border);border-bottom:1px solid var(--border);
}
.offer-price .amt{
  display:block;font-family:var(--head);font-weight:700;letter-spacing:-.03em;
  font-size:clamp(48px,8.4vw,82px);line-height:1;color:var(--t1);
}
.offer-price .amt sup{font-size:.42em;vertical-align:super;color:var(--accent);margin-right:2px;top:0}
.offer-price .terms{
  display:block;margin-top:11px;font-family:var(--mono);font-size:12px;
  letter-spacing:.08em;text-transform:uppercase;color:var(--t3);
}
.offer-list{list-style:none;margin:0;padding:0;display:grid;gap:11px;text-align:left}
.offer-list li{display:flex;gap:11px;align-items:flex-start;font-size:14px;color:var(--t2);line-height:1.55}
.offer-list li svg{
  width:17px;height:17px;flex:none;margin-top:2px;color:var(--accent);
  fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;
}
.offer-list li b{color:var(--t1);font-weight:600}

.offer-excl{
  margin-top:20px;text-align:left;
  background:var(--bg);border:1px solid var(--border);border-radius:var(--r);
  padding:15px 17px;display:flex;gap:12px;align-items:flex-start;
}
.offer-excl svg{width:16px;height:16px;color:var(--t3);flex:none;margin-top:2px}
.offer-excl p{font-size:12.5px;color:var(--t3);line-height:1.6}
.offer-excl b{color:var(--t2);font-weight:600}

.offer-cta{margin-top:clamp(24px,2.8vw,32px)}

.gtee{
  margin-top:26px;padding-top:24px;border-top:1px solid var(--border);
  display:flex;align-items:center;gap:18px;text-align:left;
}
.gtee img{width:66px;height:auto;flex:none}
.gtee div{font-size:13px;color:var(--t2);line-height:1.55}
.gtee b{display:block;font-family:var(--head);font-size:14px;color:var(--t1);font-weight:600;margin-bottom:3px}

/* --------------------------------------------------------------- 09 · faq */
.faq{max-width:760px;margin:clamp(40px,4.6vw,60px) auto 0;display:grid;gap:10px}
.faq details{
  background:var(--s1);border:1px solid var(--border);border-radius:var(--r);
  transition:border-color .16s ease;
}
.faq details[open]{border-color:var(--border-strong)}
.faq summary{
  list-style:none;cursor:pointer;padding:16px 20px;
  font-family:var(--head);font-size:14.5px;font-weight:600;color:var(--t1);
  display:flex;align-items:center;justify-content:space-between;gap:16px;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:'';flex:none;width:8px;height:8px;margin-right:2px;
  border-right:2px solid var(--t3);border-bottom:2px solid var(--t3);
  transform:rotate(45deg);transition:transform .18s ease;
}
.faq details[open] summary::after{transform:rotate(-135deg);margin-top:2px}
.faq .a{padding:0 20px 18px;font-size:13.5px;color:var(--t2);line-height:1.65}
.faq .a + .a{padding-top:10px}
.faq .a b{color:var(--t1);font-weight:600}

/* ------------------------------------------------------------- 10 · close */
#close{text-align:center}
#close h2{font-size:clamp(26px,4.2vw,46px);font-weight:700;max-width:20ch;margin:0 auto}
#close h2 em{font-style:normal;color:var(--accent)}
#close .lede{
  margin:20px auto 0;max-width:60ch;font-size:clamp(15px,1.5vw,17.5px);
  color:var(--t2);line-height:1.65;
}
#close .hero-cta{margin-top:32px;display:flex;flex-direction:column;align-items:center}

/* ------------------------------------------------------------ 11 · footer */
.ftr{border-top:1px solid var(--border);background:var(--s1);padding:clamp(38px,4.4vw,58px) 0 30px}
.ftr-top{display:flex;align-items:flex-start;justify-content:space-between;gap:26px;flex-wrap:wrap;margin-bottom:26px}
.ftr-brand img{height:26px;width:auto;margin-bottom:12px}
.ftr-brand p{font-size:12.5px;color:var(--t3);line-height:1.6;max-width:44ch}
.ftr-links{display:flex;gap:20px;flex-wrap:wrap;align-items:center}
/* The three legal documents are <button> (they open the modal, they don't
   navigate); Support is a real <a>. Both are styled to one appearance so the row
   reads as a single set of links. */
.ftr-links a,
.ftr-links .ft-doc{font-size:12.5px;color:var(--t2);transition:color .16s ease}
.ftr-links .ft-doc{background:none;border:0;padding:0;cursor:pointer;font-family:inherit;line-height:inherit;text-align:left}
.ftr-links a:hover,
.ftr-links .ft-doc:hover{color:var(--accent)}
.ftr-links .ft-doc:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:3px}
.ftr-legal{display:grid;gap:14px;padding-top:24px;border-top:1px solid var(--border)}
.ftr-legal p{font-size:11.5px;color:var(--t3);line-height:1.7}
.ftr-legal b{color:var(--t2);font-weight:600}
.ftr-jv{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:4px}
.ftr-jv img{height:22px;width:auto;opacity:.5}
.ftr-copy{margin-top:22px;padding-top:20px;border-top:1px solid var(--border);font-size:11.5px;color:var(--t3)}

/* Vendor-mandated JVZoo disclaimer. Deliberately NOT styled like .ftr-legal: it
   sits in a bordered panel at 15px/1.75 in --t1 (the body text colour), so it
   reads larger and higher-contrast than the 11.5px --t3 legal print below it. It
   must be conspicuous, so do not fold it into .ftr-legal or shrink the type.
   Same treatment as /professional and /musicDNA-GenreMixer.

   It leads the footer disclosures, above .ftr-legal, so the margin-bottom sets
   the gap down to that block; .ftr-top's margin-bottom handles the gap above. */
.jv-disclaimer{
  margin:0 0 26px; padding:22px 24px;
  background:var(--s2); border:1px solid var(--border-strong); border-radius:13px;
}
.jv-disclaimer p{color:var(--t1); font-size:15px; line-height:1.75; max-width:100%;}
.jv-disclaimer p + p{margin-top:14px;}

/* --------------------------------------------------------- reveal on scroll */
.rv{opacity:0;transform:translateY(18px);transition:opacity .7s cubic-bezier(.22,.61,.36,1),transform .7s cubic-bezier(.22,.61,.36,1)}
.rv.in{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  .rv{opacity:1;transform:none;transition:none}
  .dial .fill{transition:none;stroke-dashoffset:162.1}
  .bar-seg{transition:none}
  .btn,.get{transition:none}
  .btn-accent:hover,.get:hover{transform:none}
}

/* =========================================================================
   RESPONSIVE — verified at 1920 1440 1200 1024 768 480 414 390 375 360 320
   ========================================================================= */

@media (max-width:1100px){
  .flow{grid-template-columns:repeat(3,1fr)}
  /* rows of 3 then 2 — reset the right border on the row ends */
  .flow-step:nth-child(3){border-right:0}
  .flow-step:nth-child(3)::after{display:none}
  .flow-step:nth-child(-n+3){border-bottom:1px solid var(--border)}
}

@media (max-width:1024px){
  .hero-grid{gap:clamp(26px,3.4vw,44px)}
  .dial{width:min(310px,100%)}
  .split{grid-template-columns:1fr;gap:26px}
  .cert-show{grid-template-columns:1fr;gap:26px}
  .cert-show .cert-copy{order:2}
  .cert-show .cert-art{order:1}
}

@media (max-width:960px){
  .gets{grid-template-columns:repeat(2,1fr)}
  .hdr-brand span{display:none}
}

@media (max-width:880px){
  .hero-grid{grid-template-columns:1fr;text-align:center}
  #hero .lede{margin-inline:auto}
  .hero-cta{display:flex;flex-direction:column;align-items:center}
  .dial-wrap{order:-1;margin-bottom:6px}
  .shift{grid-template-columns:1fr;gap:0}
  /* the arrow rotates to point down once the cards stack */
  .shift-arrow{margin:16px auto;transform:rotate(90deg)}
  .vs{grid-template-columns:1fr}
}

@media (max-width:768px){
  .flow{grid-template-columns:1fr 1fr}
  .flow-step{border-right:1px solid var(--border);border-bottom:1px solid var(--border)}
  .flow-step:nth-child(2n){border-right:0}
  .flow-step:nth-child(2n)::after{display:none}
  .flow-step:last-child{border-bottom:0}
  .flow-step:not(:last-child)::after{display:none}
  .hdr-price{display:none}
}

@media (max-width:620px){
  .wrap{padding:0 18px}
  .hdr-in{padding:10px 18px}
  .flow{grid-template-columns:1fr}
  .flow-step{border-right:0;text-align:left;display:grid;grid-template-columns:42px 1fr;gap:0 16px;align-items:start}
  .flow-ico{margin:0}
  .flow-n{grid-column:2}
  .flow-step h4,.flow-step p{grid-column:2}
  .gets{grid-template-columns:1fr}
  .bar{height:56px}
  .gtee{flex-direction:column;align-items:flex-start;gap:14px}
  .ftr-top{flex-direction:column;gap:22px}
  /* padding trim only — the type size never drops, the disclosure stays conspicuous */
  .jv-disclaimer{padding:18px 16px}
}

@media (max-width:480px){
  .dial{width:min(268px,100%)}
  .offer-card{padding:24px 18px}
  .offer-price .amt{font-size:clamp(44px,15vw,58px)}
  .bar-head{gap:8px}
  .bar-seg .pct{font-size:14px}
  .calc-row{gap:10px}
  .calc-row .l{font-size:12.5px}
  .faq summary{padding:14px 16px;font-size:13.5px}
  .faq .a{padding:0 16px 16px;font-size:13px}
}

@media (max-width:400px){
  .wrap{padding:0 15px}
  .hdr-in{padding:9px 15px}
  .hdr-brand img{height:22px}
  .hdr .btn{padding:9px 14px;font-size:12.5px}
  #hero h1{font-size:clamp(27px,8.4vw,34px)}
  .dial{width:min(232px,100%)}
  .dial-mid .n{font-size:clamp(46px,17vw,60px)}
  .shift-card,.vs-card,.get,.bar-wrap,.calc{padding:18px 16px}
  .shift-steps li{font-size:12.5px;padding:11px 12px;gap:10px}
  .btn-xl{padding:16px 20px}
}

@media (max-width:340px){
  .dial{width:min(206px,100%)}
  .dial-mid .n{font-size:44px}
  .dial-mid .sub{display:none}
  .offer-price .amt{font-size:42px}
  .bar-seg.ops .pct{font-size:12px}
}

/* --------------------------------------------------------------- printing */
@media print{
  .hdr,.hero-cta,.offer-cta,.skip,#close .hero-cta{display:none}
  body{background:#fff;color:#000}
  .sec{padding:18px 0;border:0}
}


/* ===== LEGAL MODAL ========================================================
   Ported verbatim from Lyrixsa Sales Page / assets/css/styles.css section 19b,
   the authoritative copy. It renders assets/js/legal-docs.js through
   assets/js/legal-modal.js, exactly as the other JV pages do, so the footer's
   Terms / Commercial Music License / Privacy Policy links open the real
   documents instead of dead href="#" stubs.

   Do not restyle this to taste. It reads --s1/--s2/--border/--accent/--t1-3,
   which this stylesheet already defines under the same names; keeping the rules
   byte-identical to the source means a future update there can be re-copied
   straight over the top.
   ------------------------------------------------------------------------ */
#legal-modal[hidden]{display:none;}
#legal-modal{
  position:fixed; inset:0; z-index:120;
  display:flex; align-items:center; justify-content:center;
  padding:24px;
}
#legal-modal .lg-scrim{
  position:absolute; inset:0; background:rgba(6,6,8,.82);
  backdrop-filter:blur(3px); -webkit-backdrop-filter:blur(3px);
}
#legal-modal .lg-box{
  position:relative; z-index:1;
  width:100%; max-width:820px; max-height:88vh;
  display:flex; flex-direction:column;
  background:var(--s1); border:1px solid var(--border-strong);
  border-radius:16px; overflow:hidden;
  box-shadow:0 40px 90px -30px rgba(0,0,0,.95);
}
#legal-modal .lg-head{
  display:flex; align-items:flex-start; justify-content:space-between; gap:16px;
  padding:22px 24px 16px; border-bottom:1px solid var(--border); flex:none;
}
#legal-modal .lg-eyebrow{
  font-family:var(--mono); font-size:10.5px;
  letter-spacing:.12em; text-transform:uppercase; color:var(--accent);
  display:block; margin-bottom:8px;
}
#legal-modal h2{font-size:clamp(18px,2.4vw,23px); margin:0;}
#legal-modal .lg-date{font-size:12px; color:var(--t3); margin:7px 0 0;}
#legal-modal .lg-x{
  flex:none; width:34px; height:34px; border-radius:9px; cursor:pointer;
  background:var(--s2); border:1px solid var(--border); color:var(--t2);
  display:grid; place-items:center; transition:.15s;
}
#legal-modal .lg-x:hover{color:var(--t1); border-color:var(--border-strong);}
#legal-modal .lg-x svg{width:17px; height:17px;}
#legal-modal .lg-tabs{
  display:flex; gap:7px; padding:14px 24px; flex:none;
  border-bottom:1px solid var(--border);
  overflow-x:auto; scrollbar-width:none;
}
#legal-modal .lg-tabs::-webkit-scrollbar{display:none;}
#legal-modal .lg-tab{
  flex:none; cursor:pointer; white-space:nowrap;
  background:var(--s2); border:1px solid var(--border); color:var(--t2);
  border-radius:20px; padding:7px 14px; font-size:12.5px; font-weight:500;
  transition:.15s;
}
#legal-modal .lg-tab:hover{color:var(--t1);}
#legal-modal .lg-tab[aria-selected="true"]{
  background:var(--accent-soft); border-color:var(--accent-border); color:var(--accent);
}
#legal-modal .lg-body{
  padding:22px 24px 30px; overflow-y:auto; flex:1 1 auto;
  font-size:13.8px; color:var(--t2); line-height:1.72;
  overscroll-behavior:contain;
}
#legal-modal .lg-body h3,
#legal-modal .lg-body h4{color:var(--t1); margin:22px 0 9px; font-size:15px;}
#legal-modal .lg-body h3:first-child,
#legal-modal .lg-body h4:first-child{margin-top:0;}
#legal-modal .lg-body p{margin:0 0 12px;}
#legal-modal .lg-body ul,
#legal-modal .lg-body ol{margin:0 0 12px; padding-left:20px; list-style:disc;}
#legal-modal .lg-body ol{list-style:decimal;}
#legal-modal .lg-body li{margin-bottom:7px;}
#legal-modal .lg-body strong{color:var(--t1);}
#legal-modal .lg-body table{width:100%; border-collapse:collapse; margin:0 0 14px; font-size:12.5px;}
#legal-modal .lg-body th,
#legal-modal .lg-body td{
  border:1px solid var(--border); padding:8px 10px; text-align:left; vertical-align:top;
}
#legal-modal .lg-body th{color:var(--t1); background:var(--s2); font-weight:600;}
@media (max-width:560px){
  #legal-modal{padding:12px;}
  #legal-modal .lg-box{max-height:92vh; border-radius:13px;}
  #legal-modal .lg-head{padding:18px 17px 14px;}
  #legal-modal .lg-tabs{padding:12px 17px;}
  #legal-modal .lg-body{padding:18px 17px 26px; font-size:13.5px;}
}

/* ---------- THE DECLINE BUTTON ----------------------------------------------
   The way OUT of this page, styled as a real button rather than fine print.
   A buyer who does not want the upgrade has to be able to SEE the exit, or the
   page reads as a dead end and they stop trusting the funnel.

   Amber OUTLINE, not a neutral one. A neutral button on a #101114 page separates
   from it by 1.16:1 (fill) / 1.76:1 (border), which reads as a section divider
   rather than a control — the label was legible, the button was not findable.
   The accent border puts the edge at 3.53:1 or better against the page, the label
   at 8.88:1 or better, everywhere.

   An outline rather than a fill, on purpose. The buy button is a solid amber slab
   with a glow; same colour family at a lighter weight is the usual primary /
   secondary pairing, and it stays unmistakably the second choice. A tinted fill
   tested louder but began to read as a second OFFER, which on an OTO page pulls
   clicks off the purchase. This has to be findable, not competitive.

   Self-contained rather than .btn.btn-ghost: these pages define .btn with
   different paddings, two of them have no .btn-block, and three keep .btn in a
   separate stylesheet. Only custom properties that exist on every one of these
   pages are used; border-radius and font-family are literal because --r, --head
   and --sans are not declared on all of them. */
.pass-btn{
  display:flex; align-items:center; justify-content:center; gap:10px;
  box-sizing:border-box; width:100%; max-width:480px; margin:16px auto 0;
  min-height:56px; padding:16px 24px;
  font-family:inherit; font-size:16px; font-weight:600; line-height:1.3;
  text-align:center; text-decoration:none;
  color:var(--accent); background:transparent;
  /* 2px, not 1.5: Chromium floors a fractional border to 1px at dsf=1 and
     dsf=2 alike, so 1.5 silently rendered as the hairline it replaced. */
  border:2px solid var(--accent-border); border-radius:12px;
  cursor:pointer; transition:background .16s, border-color .16s, color .16s;
}
/* Hover goes further INTO the accent rather than to grey, so the affordance is
   unambiguous: the wash fills in and the border reaches full --accent. */
.pass-btn:hover{
  background:var(--accent-soft); border-color:var(--accent);
  color:var(--accent); text-decoration:none;
}
.pass-btn:focus-visible{outline:2px solid var(--accent-border); outline-offset:3px}
/* Matches .btn:hover .arw. .pass-btn is not a .btn by design, so the
   shared arrow rule does not reach it and has to be restated. */
.pass-btn .arw{transition:transform .16s ease}
.pass-btn:hover .arw{transform:translateX(3px)}
/* The reassurance under it. Answers "what happens to what I already bought?"
   at the moment of the click, which is where the page's decline FAQ cannot. */
.pass-note{
  max-width:480px; margin:9px auto 0;
  font-size:13px; line-height:1.5; text-align:center; color:var(--t3);
}
@media(max-width:420px){
  .pass-btn{font-size:15px; padding:15px 16px}
}