/* Chorus — shared chrome
   Palette from the logo gradient (5B21B6 → 7C3AED → C4B5FD → E25B3A) plus a
   warm coral accent. Purple stays identity (headings, mark body, nav);
   coral owns primary buttons and the accent punctuation.
   Editorial serif headlines, geometric shapes, crisp outlines.
   8px rhythm, 1280px grid. */

:root{
  /* logo stops */
  --violet-deep:#5B21B6;
  --violet:#7C3AED;
  --lavender:#C4B5FD;
  --coral:#E25B3A;
  --coral-ink:#B83A1E;
  --coral-soft:#FDE8DC;
  /* Dark-mode coral (homepage). Unused here — signed-in chrome is light-only. */
  --coral-bright:#F09070;
  --coral-ink-bright:#F0B8A0;
  --coral-soft-dark:#3A221C;
  --grad:linear-gradient(135deg,#5B21B6 0%,#7C3AED 46%,#C4B5FD 72%,#E25B3A 100%);
  /* Primary CTA — deep→bright coral so white type stays readable.
     Hex stays put (bright coral is a text/accent colour, not a fill). */
  --btn-grad:linear-gradient(115deg,#B83A1E 0%,#E25B3A 100%);
  --btn-border:#B83A1E;
  --btn-color:#FFFFFF;
  --btn-focus:var(--violet);
  /* Hover deepens to the ink stop — same move the old purple hover made. */
  --btn-hover-grad:linear-gradient(115deg,#B83A1E 0%,#B83A1E 100%);
  --btn-hover-border:#B83A1E;
  --btn-hover-shadow:0 10px 22px rgba(184,58,30,.30);
  --btn-hover-shadow-strong:0 12px 26px rgba(184,58,30,.32);
  --btn-active-shadow:0 4px 10px rgba(184,58,30,.20);
  /* surfaces */
  --surface:#f8f4ff;
  --surface-low:#f3ecfe;
  --surface-lowest:#ffffff;
  --surface-high:#e8dcff;
  /* ink */
  --ink:#1a1230;
  --ink-variant:#4e4763;
  --navy:#1a1230;
  --on-navy:#a89dc0;
  /* accent — aliases kept so existing rules pick up the logo purple */
  --amethyst:#7C3AED;
  --amethyst-dim:#C4B5FD;
  --amethyst-deep:#5B21B6;
  /* lines */
  --outline:#6b657c;
  --outline-variant:#d4cce3;
  /* system */
  --error:#ba1a1a;
  --error-bg:#ffdad6;
  --ok:#0f7a5a;
  --ok-bg:#e8f5f0;
  --max:1280px;
  --gutter:24px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--surface);color:var(--ink);
  font-family:"Hanken Grotesk",ui-sans-serif,system-ui,-apple-system,sans-serif;
  font-size:16px;line-height:24px;-webkit-font-smoothing:antialiased;
  display:flex;flex-direction:column;min-height:100vh;
}
h1,h2,h3,h4{font-family:"Playfair Display",Georgia,serif;color:var(--ink);margin:0}
h1{font-size:48px;line-height:56px;font-weight:700;letter-spacing:-.02em}
h2{font-size:32px;line-height:40px;font-weight:600}
h3{font-size:24px;line-height:32px;font-weight:600}
p{margin:0}
a{color:inherit;text-decoration:none}

.wrap{max-width:var(--max);margin:0 auto;padding:0 40px;width:100%}
.stack>*+*{margin-top:24px}
.center{text-align:center}
.label{font-size:14px;line-height:20px;font-weight:700;letter-spacing:.05em;text-transform:uppercase}
.lede{font-size:18px;line-height:28px;color:var(--ink-variant)}
.muted{color:var(--ink-variant)}
.small{font-size:14px;line-height:20px}

/* ---------- nav ---------- */
.nav{background:var(--surface);background:color-mix(in srgb,var(--surface) 88%,#fff 12%);border-bottom:1px solid var(--outline-variant);position:sticky;top:0;z-index:50}
.nav::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--grad);background-size:220% 100%;opacity:.85}
.nav-in{display:flex;align-items:center;justify-content:space-between;height:80px;gap:24px}
.brand{font-family:"Playfair Display",serif;font-size:26px;font-weight:700;color:var(--ink)}
.nav-links{display:flex;gap:24px;align-items:center}
.nav-links a{font-size:16px;font-weight:500;color:var(--ink-variant);transition:color .2s}
.nav-links a:hover{color:var(--coral-ink)}
.nav-links a.on{color:var(--amethyst);font-weight:700;border-bottom:2px solid var(--amethyst);padding-bottom:4px}
.nav-right{display:flex;align-items:center;gap:20px;position:relative}
.acct-menu-btn{display:flex;align-items:center;gap:8px;background:none;border:1px solid var(--outline-variant);
  padding:8px 14px;font-family:inherit;font-size:14px;color:var(--ink-variant);cursor:pointer;border-radius:999px}
.acct-menu-btn:hover{border-color:var(--coral);color:var(--coral-ink)}
.acct-menu-btn .avatar{width:24px;height:24px;border-radius:50%;background:var(--grad);color:#fff;display:flex;
  align-items:center;justify-content:center;font-size:12px;font-weight:700}
.acct-dd{position:absolute;top:calc(100% + 8px);right:0;background:#fff;border:1px solid var(--outline-variant);
  box-shadow:0 12px 32px rgba(26,18,48,.14);min-width:220px;display:none;z-index:70}
.acct-dd.open{display:block}
.acct-dd .who{padding:14px 18px;border-bottom:1px solid var(--outline-variant);font-size:14px;color:var(--ink-variant)}
.acct-dd a{display:block;padding:12px 18px;font-size:15px;color:var(--ink)}
.acct-dd a:hover{background:var(--surface-low);color:var(--coral-ink)}
/* Sign out is a POST form, not a link — any site can fire a link at us. These
   rules keep the button reading exactly as the menu row and footer link it
   replaced, so the safer control costs the page nothing. */
.signout{margin:0}
.acct-dd .linklike{display:block;width:100%;text-align:left;padding:12px 18px;font-size:15px;color:var(--ink);
  background:none;border:0;font-family:inherit;cursor:pointer}
.acct-dd .linklike:hover{background:var(--surface-low);color:var(--coral-ink)}
.foot .linklike{background:none;border:0;padding:0;font-family:inherit;font-size:14px;color:var(--on-navy);cursor:pointer}
.foot .linklike:hover{color:#fff}

/* ---------- buttons (sharp, coral primary) ---------- */
.btn{
  display:inline-block;background:var(--btn-grad);color:var(--btn-color);border:2px solid var(--btn-border);
  padding:14px 32px;font-size:14px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
  cursor:pointer;transition:transform .2s ease,box-shadow .2s ease,filter .2s ease,background .2s ease,border-color .2s ease,color .2s ease;font-family:inherit;line-height:20px;text-align:center;
}
.btn:hover{filter:none;transform:translateY(-2px);background:var(--btn-hover-grad);border-color:var(--btn-hover-border);box-shadow:var(--btn-hover-shadow)}
.btn:focus-visible{outline:2px solid var(--btn-focus);outline-offset:3px}
.btn-sm{padding:10px 24px}
.btn-ghost{background:transparent;color:var(--amethyst)}
.btn-ghost:hover{background:var(--coral-soft);color:var(--coral-ink);border-color:var(--coral);filter:none;box-shadow:none}
.btn-on-dark{background:var(--amethyst);border-color:var(--amethyst)}
.btn-on-dark:hover{background:transparent;color:#fff;box-shadow:0 0 15px rgba(104,14,172,.5)}
.btn-outline-light{background:transparent;border:1px solid var(--on-navy);color:#fff}
.btn-outline-light:hover{background:#fff;color:var(--navy);border-color:#fff}
.btn-block{display:block;width:100%}
/* A control that cannot act must not look like it can. */
.btn:disabled,.btn[disabled]{
  background:transparent;color:var(--outline);border-color:var(--outline-variant);
  cursor:not-allowed;opacity:.75;filter:none;transform:none;box-shadow:none;
}
.btn:disabled:hover,.btn[disabled]:hover{
  background:transparent;color:var(--outline);border-color:var(--outline-variant);box-shadow:none;filter:none;transform:none;
}
.panel-dark .btn:disabled,.panel-dark .btn[disabled]{
  background:transparent;color:var(--on-navy);border-color:rgba(255,255,255,.2);
}
.panel-dark .btn:disabled:hover,.panel-dark .btn[disabled]:hover{
  background:transparent;color:var(--on-navy);border-color:rgba(255,255,255,.2);
}

/* ---------- hero ---------- */
.hero{background:var(--navy);position:relative;overflow:hidden;padding:120px 0 140px}
.hero::before{
  content:"";position:absolute;inset:0;
  background:
    radial-gradient(at 0% 0%, rgba(19,27,46,1) 0px, transparent 50%),
    radial-gradient(at 100% 0%, rgba(104,14,172,.35) 0px, transparent 50%),
    radial-gradient(at 100% 100%, rgba(19,27,46,1) 0px, transparent 50%),
    radial-gradient(at 0% 100%, rgba(35,49,68,.8) 0px, transparent 50%);
}
@keyframes drift{from{transform:scale(1);opacity:.9}to{transform:scale(1.08);opacity:1}}
.hero-in{position:relative;z-index:2;display:grid;grid-template-columns:3fr 2fr;gap:48px;align-items:center}
.hero h1{color:#fff;text-transform:uppercase;max-width:12ch}
.hero .lede{color:#c9cede;max-width:44ch;margin-top:24px}
.hero-actions{display:flex;gap:16px;flex-wrap:wrap;margin-top:32px}
.hero-note{color:var(--on-navy);font-size:14px;margin-top:20px}

/* result card */
.rcard{background:#fff;border:1px solid var(--outline-variant);padding:24px;position:relative}
.rcard-badge{
  position:absolute;top:-14px;right:-14px;background:var(--amethyst-deep);color:var(--amethyst-dim);
  border:1px solid var(--amethyst-dim);font-size:12px;font-weight:700;letter-spacing:.05em;
  padding:5px 12px;text-transform:uppercase;
}
.rcard-head{display:flex;justify-content:space-between;align-items:center;
  border-bottom:1px solid var(--outline-variant);padding-bottom:12px;margin-bottom:20px}
.rcard-head h2,.rcard-head h3{font-size:20px;line-height:26px;font-weight:600}
.rrow{margin-bottom:16px}
.rrow-top{display:flex;justify-content:space-between;font-size:14px;color:var(--ink-variant);margin-bottom:8px}
.rrow-top b{color:#000;font-size:15px}
.rrow-top b.win{color:var(--amethyst)}
.track{height:8px;background:var(--surface-low);overflow:hidden}
.track i{display:block;height:100%;background:var(--outline);width:var(--w, 0)}
.track i.win{background:linear-gradient(90deg,var(--violet-deep),var(--violet))}
.rcard-foot{border-top:1px solid var(--outline-variant);padding-top:16px;font-size:14px;
  line-height:20px;color:var(--ink-variant)}

/* ---------- sections ---------- */
.sec{padding:96px 0}
.sec-tight{padding:72px 0}
.sec-white{background:#fff}
.sec-low{background:var(--surface-low);border-top:1px solid var(--outline-variant);border-bottom:1px solid var(--outline-variant)}
.sec-head{text-align:center;max-width:64ch;margin:0 auto 56px}
.sec-head .label{color:var(--coral-ink);margin-bottom:16px}
.sec-head h2{margin-bottom:16px}

/* steps */
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gutter)}
.tile{background:#fff;border:1px solid var(--outline-variant);padding:32px}
.tile .num{width:48px;height:48px;background:var(--navy);color:#fff;display:flex;align-items:center;
  justify-content:center;font-family:"Playfair Display",serif;font-size:20px;margin-bottom:20px}
.tile h3{margin-bottom:12px}
.tile p{color:var(--ink-variant)}

/* bento: limits + proof */
.bento{display:grid;grid-template-columns:8fr 4fr;gap:var(--gutter)}
.bento-main{background:#fff;border:1px solid var(--outline-variant);padding:40px;transition:border-color .4s}
.bento-main:hover{border-color:var(--amethyst)}
.bento-main .icon{width:48px;height:48px;background:var(--navy);color:#fff;display:flex;
  align-items:center;justify-content:center;margin-bottom:24px;font-size:22px}
.bento-main h2,.bento-main h3{margin-bottom:16px;font-size:28px;line-height:36px;font-weight:600}
.bento-side{background:var(--amethyst);color:#fff;padding:40px;position:relative;overflow:hidden}
.bento-side::after{content:"";position:absolute;bottom:-40px;right:-40px;width:128px;height:128px;
  border:4px solid var(--amethyst-dim);border-radius:50%;opacity:.25}
.bento-side .label{color:var(--amethyst-dim);margin-bottom:16px}
.bento-side h3{color:#fff;margin-bottom:24px}
.proof-item{display:flex;gap:10px;align-items:flex-start;margin-bottom:16px;font-size:15px;line-height:22px;position:relative;z-index:2}
.proof-item .dot{width:8px;height:8px;background:var(--amethyst-dim);margin-top:7px;flex:none}
.proof-note{border-top:1px solid rgba(255,255,255,.25);padding-top:16px;margin-top:24px;
  font-size:13px;line-height:19px;color:var(--amethyst-dim);position:relative;z-index:2}

/* compare */
.compare{display:grid;grid-template-columns:1fr 1fr;border:1px solid var(--outline-variant);max-width:960px;margin:0 auto}
.comp{padding:48px;text-align:center;background:var(--surface-low)}
.comp+.comp{border-left:1px solid var(--outline-variant)}
.comp.us{background:#fff;border-top:4px solid var(--amethyst)}
.comp .label{color:var(--ink-variant);margin-bottom:24px}
.comp.us .label{color:var(--amethyst)}
.comp .big{font-family:"Playfair Display",serif;font-size:48px;line-height:56px;font-weight:700;color:var(--ink-variant);
  text-decoration:line-through;opacity:.7}
.comp.us .big{color:#000;text-decoration:none;opacity:1}
.comp .time{font-family:"Playfair Display",serif;font-size:24px;color:var(--ink-variant);margin-top:8px}
.comp.us .time{color:var(--amethyst)}
.comp ul{list-style:none;padding:0;margin:32px auto 0;max-width:300px;text-align:left}
.comp li{display:flex;gap:10px;margin-bottom:12px;font-size:15px;color:var(--ink-variant)}
.comp li .mk{color:var(--outline);font-weight:700;flex:none}
.comp.us li{color:var(--ink)}
.comp.us li .mk{color:var(--amethyst)}

/* packs */
.grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--gutter)}
.pack{background:#fff;border:1px solid var(--outline-variant);padding:28px;text-align:center;position:relative;display:flex;flex-direction:column}
.pack.hot{border:2px solid var(--amethyst)}
.pack .tagpop{position:absolute;top:-13px;left:50%;transform:translateX(-50%);background:var(--amethyst);
  color:#fff;font-size:11px;font-weight:700;letter-spacing:.05em;padding:4px 12px;text-transform:uppercase;white-space:nowrap}
.pack .pname{color:var(--ink-variant);margin-bottom:16px}
.pack.hot .pname{color:var(--amethyst)}
.pack .pcount{font-family:"Playfair Display",serif;font-size:22px;line-height:28px;color:#000;margin-bottom:8px}
.pack .pprice{font-family:"Playfair Display",serif;font-size:40px;line-height:48px;font-weight:700;color:#000;margin-bottom:8px}
.pack .pnote{font-size:14px;color:var(--ink-variant);margin-bottom:24px;flex:1}
.pack .pnote strong,.pack .pnote span{display:block}
.pack .pnote strong{color:var(--ink);font-size:15px}
.buy-note{margin-top:16px}

/* faq */
.faq{max-width:768px;margin:0 auto}
.faq-item{background:#fff;border:1px solid var(--outline-variant);padding:32px;margin-bottom:16px}
.faq-item h3{margin-bottom:12px;font-size:20px;line-height:28px}
.faq-item p{color:var(--ink-variant)}

/* closing */
.close{background:var(--navy);position:relative;overflow:hidden;padding:120px 0;text-align:center}
.close::before{content:"";position:absolute;inset:0;
  background:radial-gradient(at 50% 0%, rgba(104,14,172,.4) 0px, transparent 60%),
             radial-gradient(at 0% 100%, rgba(35,49,68,.9) 0px, transparent 50%)}
.close-in{position:relative;z-index:2}
.close h2{color:#fff;font-size:44px;line-height:52px;margin-bottom:32px}

/* footer */
.foot{background:var(--navy);border-top:none;padding:48px 0;margin-top:auto;position:relative}
.foot::before{content:"";position:absolute;left:0;right:0;top:0;height:2px;background:var(--grad);opacity:.8}
.foot-in{display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap}
.foot .brand{color:#fff}
.foot nav{display:flex;gap:32px;flex-wrap:wrap}
.foot nav a{font-size:14px;color:var(--on-navy)}
.foot nav a:hover{color:#fff}
.foot .cr{font-size:14px;color:var(--on-navy)}

/* ---------- auth ---------- */
.auth{flex:1;display:grid;place-items:center;padding:32px 24px;background:var(--surface-low)}
.authgrid{
  width:100%;max-width:1040px;display:grid;gap:0;align-items:stretch;
  grid-template-columns:minmax(0,440px) minmax(0,1fr);
}
.auth-card{width:100%;max-width:none;background:#fff;border:1px solid var(--outline-variant);padding:32px;position:relative}
.auth-card::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:var(--grad)}
.auth-card h1{font-size:32px;line-height:40px;margin-bottom:8px}
.auth-card .sub{color:var(--ink-variant);margin-bottom:24px}
.gbtn{display:flex;align-items:center;justify-content:center;gap:12px;width:100%;padding:14px;
  border:1px solid var(--outline-variant);background:#fff;font-size:15px;font-weight:600;color:var(--ink);
  cursor:pointer;font-family:inherit;transition:background .2s}
.gbtn:hover{background:var(--surface-low)}
.gbtn-hint{margin:8px 0 0;font-size:13px;line-height:18px;color:var(--ink-variant);text-align:center}
.sep{display:flex;align-items:center;gap:16px;margin:18px 0;color:var(--outline);font-size:13px;
  letter-spacing:.05em;text-transform:uppercase}
.last-method{margin:0 0 14px;font-size:13px;line-height:20px;color:var(--on-surface-variant);text-align:center}
.sep::before,.sep::after{content:"";flex:1;height:1px;background:var(--outline-variant)}
.field{margin-bottom:16px}
.field label{display:block;font-size:14px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
  color:var(--ink);margin-bottom:8px}
.field input{width:100%;padding:14px 16px;border:1px solid var(--outline-variant);font-size:16px;
  font-family:inherit;background:#fff;color:var(--ink)}
.field input:focus{outline:none;border:2px solid var(--amethyst);padding:13px 15px}
.alert{background:var(--error-bg);border:1px solid var(--error);color:#93000a;padding:12px 16px;
  font-size:14px;line-height:20px;margin-bottom:20px}
.auth-switch{text-align:center;margin-top:18px;font-size:14px;color:var(--ink-variant)}
.auth-switch a{color:var(--coral-ink);font-weight:700}
.auth-switch a:hover{text-decoration:underline}
.auth-legal{text-align:center;margin-top:16px;font-size:13px;color:var(--outline)}
.auth-legal a{color:var(--coral-ink);font-weight:600;text-decoration:underline;text-underline-offset:2px}
.auth-legal a:hover{color:var(--coral)}
.auth-reassure{margin-top:16px;font-size:13px;line-height:19px;color:var(--ink-variant);text-align:center}

/* ---------- auth sell panel ---------- */
.sell{
  background:var(--navy);color:#fff;padding:40px;position:relative;overflow:hidden;
  border:1px solid var(--navy);display:flex;flex-direction:column;gap:24px;
}
.sell::before{
  content:"";position:absolute;inset:0;
  background:
    radial-gradient(at 100% 0%, rgba(124,58,237,.42) 0px, transparent 55%),
    radial-gradient(at 0% 100%, rgba(26,18,48,.9) 0px, transparent 50%);
}
.sell::after{
  content:"";position:absolute;width:420px;height:420px;right:-140px;bottom:-160px;border-radius:50%;pointer-events:none;
  z-index:0;opacity:.4;filter:blur(8px);
  background:
    radial-gradient(circle,transparent 48%,rgba(196,181,253,.22) 48.6%,rgba(196,181,253,.22) 51.2%,transparent 51.8%),
    radial-gradient(circle,transparent 61%,rgba(124,58,237,.2) 61.6%,rgba(124,58,237,.2) 64.2%,transparent 64.8%),
    radial-gradient(circle,transparent 75%,rgba(226,91,58,.16) 75.6%,rgba(226,91,58,.16) 77.8%,transparent 78.4%);
}
.sell>*{position:relative;z-index:2}

/* rotating value statements */
.sell-rot{min-height:96px;display:flex;align-items:flex-start}
.sell-rot ul{list-style:none;margin:0;padding:0;position:relative;width:100%}
.sell-rot li{
  position:absolute;top:0;left:0;right:0;margin:0;opacity:0;
  font-family:"Playfair Display",Georgia,serif;font-size:30px;line-height:38px;
  font-weight:600;color:#fff;
  animation:sellrot 20s linear infinite;
}
.sell-rot li:nth-child(1){animation-delay:0s}
.sell-rot li:nth-child(2){animation-delay:4s}
.sell-rot li:nth-child(3){animation-delay:8s}
.sell-rot li:nth-child(4){animation-delay:12s}
.sell-rot li:nth-child(5){animation-delay:16s}
@keyframes sellrot{
  0%{opacity:0;transform:translateY(10px)}
  2.5%{opacity:1;transform:translateY(0)}
  17.5%{opacity:1;transform:translateY(0)}
  20%{opacity:0;transform:translateY(-10px)}
  100%{opacity:0;transform:translateY(-10px)}
}

/* example result, scaled down from the marketing hero card */
.sell-card{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.18);padding:20px;position:relative}
.sell-badge{
  position:absolute;top:-11px;right:12px;background:var(--amethyst-deep);color:var(--amethyst-dim);
  border:1px solid var(--amethyst-dim);font-size:11px;font-weight:700;letter-spacing:.05em;
  padding:4px 10px;text-transform:uppercase;
}
.sell-card-head{border-bottom:1px solid rgba(255,255,255,.18);padding-bottom:10px;margin-bottom:16px}
.sell-card-head h2{font-size:17px;line-height:24px;font-weight:600;color:#fff}
.sell-card .rrow{margin-bottom:14px}
.sell-card .rrow-top{font-size:13px;line-height:18px;color:#c9cede;gap:12px}
.sell-card .rrow-top b{color:#fff;font-size:14px}
.sell-card .rrow-top b.win{color:var(--amethyst-dim)}
.sell-card .track{background:rgba(255,255,255,.12);height:6px}
.sell-card .track i{background:var(--on-navy);width:var(--w);animation:sellbar 1.2s cubic-bezier(.2,.7,.3,1) .25s backwards}
.sell-card .track i.win{background:var(--amethyst-dim);animation-delay:.5s}
@keyframes sellbar{from{width:0}}
.sell-card-foot{border-top:1px solid rgba(255,255,255,.18);padding-top:12px;margin-top:16px;
  font-size:13px;line-height:19px;color:#c9cede}

.sell-proof{margin-top:auto}
.sell-proof .proof-item{font-size:14px;line-height:21px;color:#fff;margin-bottom:12px}
.sell-proof .proof-item .dot{background:var(--amethyst-dim)}
.sell-limit{border-top:1px solid rgba(255,255,255,.2);padding-top:14px;margin-top:16px;
  font-size:12px;line-height:18px;color:var(--on-navy)}

@media (prefers-reduced-motion:reduce){
  .sell-rot li{animation:none;position:static;opacity:0;transform:none}
  .sell-rot li:first-child{opacity:1}
  .sell-rot li:not(:first-child){display:none}
  .sell-card .track i{animation:none}
}

@media (max-width:900px){
  .authgrid{grid-template-columns:minmax(0,1fr);max-width:480px}
  .sell{padding:32px 24px;border-top:none}
  .sell-rot{min-height:88px}
  .sell-rot li{font-size:24px;line-height:32px}
}

/* ---------- legal (terms & privacy) ---------- */
.legal{flex:1;background:var(--surface-low);padding:48px 0 96px}
.legal-doc{max-width:820px;margin:0 auto;background:#fff;border:1px solid var(--outline-variant);padding:48px;position:relative}
.legal-doc::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:var(--grad)}
.legal-doc h1{font-size:36px;line-height:44px;margin-bottom:8px}
.legal-doc .effective{font-size:14px;color:var(--ink-variant);margin:0 0 32px;padding-bottom:24px;
  border-bottom:1px solid var(--outline-variant)}
.legal-doc h2{font-size:22px;line-height:30px;margin:40px 0 12px}
.legal-doc p{margin:0 0 14px;color:var(--ink-variant)}
.legal-doc ul{margin:0 0 14px;padding-left:22px;color:var(--ink-variant)}
.legal-doc li{margin-bottom:8px}
.legal-doc strong,.legal-doc b{color:var(--ink)}
.legal-doc a{color:var(--coral-ink);font-weight:600;text-decoration:underline;text-underline-offset:2px}
.legal-doc a:hover{color:var(--coral)}
.legal-doc table{margin:0 0 18px}
.legal-doc tbody td{color:var(--ink-variant)}
.legal-doc tbody tr:hover{background:transparent}
.legal-doc code{font-family:ui-monospace,Menlo,monospace;font-size:14px;background:var(--surface-low);
  padding:2px 6px}
@media (max-width:820px){.legal-doc{padding:28px 20px}}

/* ---------- app ---------- */
.app{flex:1;background:var(--surface-low);padding:40px 0 96px}
.app h1{font-size:36px;line-height:44px;margin-bottom:8px}
.app .sub{color:var(--ink-variant);margin-bottom:32px}
.appgrid{display:grid;grid-template-columns:7fr 5fr;gap:var(--gutter);margin-bottom:24px}
.panel{background:#fff;border:1px solid var(--outline-variant);padding:32px}
.panel-dark{background:var(--navy);color:#fff}
.panel h2{font-size:24px;line-height:32px;margin-bottom:8px}
.panel-dark h2{color:#fff}
.panel .sub{font-size:15px;line-height:22px;color:var(--ink-variant);margin-bottom:24px}
.panel-dark .sub{color:#c9cede}
.copyrow{display:flex;gap:0}
.copyrow input{flex:1;padding:14px 16px;border:1px solid var(--outline-variant);border-right:none;
  font-family:ui-monospace,Menlo,monospace;font-size:14px;background:var(--surface-low);color:var(--ink)}
.panel-dark .copyrow input{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.2);color:#fff}
.copyrow .btn{border-radius:0;white-space:nowrap}
.works{font-size:14px;color:var(--on-navy);margin-top:16px}

/* The link is a credential. This note has to read as a fact, not a scare. */
.secret{font-size:14px;line-height:21px;color:#c9cede;margin-top:16px;
  border-left:3px solid var(--amethyst-dim);padding-left:14px}
.secret b{color:#fff;font-weight:700}
/* The payoff line: what you actually do once it is connected. */
.next{font-size:15px;line-height:23px;color:#c9cede;margin-top:16px}
.next em{color:#fff;font-style:normal;font-weight:600}

/* per-tool setup steps, folded away so the panel stays a panel */
.setup{margin-top:24px;border-top:1px solid rgba(255,255,255,.15);padding-top:20px}
.setup summary{font-size:15px;font-weight:600;color:#fff;cursor:pointer}
.setup summary:hover{color:var(--amethyst-dim)}
.setup-body{margin-top:24px}
.setup-tool{border-left:3px solid rgba(255,255,255,.18);padding-left:16px;margin-bottom:28px}
.setup-tool:last-child{margin-bottom:0}
.setup-tool.primary{border-left-color:var(--amethyst-dim)}
.setup-tool .tag{display:block;font-size:11px;font-weight:700;letter-spacing:.05em;
  text-transform:uppercase;color:var(--amethyst-dim);margin-bottom:6px}
.setup-tool h3{font-size:19px;line-height:26px;color:#fff;font-weight:600;margin-bottom:8px}
.setup-tool p{font-size:14px;line-height:21px;color:#c9cede}
.setup-tool ol{margin:0;padding-left:20px;color:#c9cede;font-size:14px;line-height:22px}
.setup-tool li{margin-bottom:6px}
.setup-tool b{color:#fff;font-weight:600}
.setup-note{margin-top:10px;font-size:13px;line-height:19px;color:var(--on-navy)}
.setup code{display:block;margin-top:10px;padding:12px 14px;background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.2);color:#fff;font-family:ui-monospace,Menlo,monospace;
  font-size:13px;line-height:20px;white-space:pre;overflow-x:auto}

.adv{margin-top:24px;border-top:1px solid rgba(255,255,255,.15);padding-top:20px}
.adv summary{font-size:14px;color:var(--on-navy);cursor:pointer;letter-spacing:.03em}
.adv summary:hover{color:#fff}
.adv .setup-tool{margin-top:16px;margin-bottom:16px}
/* Reset the connect link. Sits under the copy control on the dark panel; the
   link itself is never rendered, so this row is the only thing that changes it. */
.resetrow{margin-top:24px;border-top:1px solid rgba(255,255,255,.15);padding-top:20px;
  display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.resetrow form{margin:0}
.resetrow .muted{color:var(--on-navy);margin:0;flex:1 1 240px}

/* Connect panel: prompt first, link when the agent asks. */
.connected{font-size:13px;line-height:20px;color:var(--on-navy);margin:0 0 16px}
.step{font-size:15px;font-weight:600;color:#fff;margin:0 0 12px;font-family:inherit}
.promptbox{
  max-height:calc(24px + 7 * 20px);
  overflow:auto;
  padding:12px 14px;
  margin:0 0 12px;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.2);
  color:#fff;
  font-family:ui-monospace,Menlo,monospace;
  font-size:13px;line-height:20px;
  white-space:pre-wrap;word-break:break-word;
}
.secret-row{
  display:flex;align-items:flex-start;justify-content:space-between;gap:24px;flex-wrap:wrap;
  margin-top:28px;padding-top:24px;border-top:1px solid rgba(255,255,255,.15);
}
.secret-row .step{margin-bottom:8px}
.secret-row .secret{margin-top:0}
.secret-ctrl{display:flex;align-items:center;gap:10px;flex:none}
.secret-chip{
  font-family:ui-monospace,Menlo,monospace;
  font-size:13px;line-height:20px;
  padding:10px 14px;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.2);
  color:#fff;white-space:nowrap;
}
.secret-ctrl .btn{padding:10px 20px;white-space:nowrap}
.reset{
  background:none;border:none;color:var(--on-navy);
  font-size:13px;line-height:20px;font-family:inherit;
  cursor:pointer;padding:4px 0;
  text-decoration:underline;text-underline-offset:3px;
}
.reset:hover{color:#fff}
@media (max-width:820px){
  .secret-row{flex-direction:column;align-items:stretch}
  .secret-ctrl{flex-wrap:wrap}
}
.bal{font-family:"Playfair Display",serif;font-size:64px;line-height:68px;font-weight:700;color:var(--amethyst)}
.bal-sub{font-size:15px;color:var(--ink-variant);margin:8px 0 24px}
.meter{height:8px;background:var(--surface-low);margin-bottom:24px;overflow:hidden}
.meter i{display:block;height:100%;background:linear-gradient(90deg,var(--violet-deep),var(--violet));width:0;transition:width 1.2s cubic-bezier(.2,.7,.3,1)}
.portal{margin-top:20px;font-size:14px;color:var(--ink-variant)}
.portal a{color:var(--coral-ink);font-weight:600}
.portal a:hover{text-decoration:underline}

table{width:100%;border-collapse:collapse}
thead th{text-align:left;font-size:12px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
  color:var(--ink-variant);padding:0 16px 14px 0;border-bottom:1px solid var(--outline-variant)}
thead th.r{text-align:right;padding-right:32px}
tbody td{padding:16px 16px 16px 0;border-bottom:1px solid var(--outline-variant);font-size:15px}
tbody td.r{text-align:right;padding-right:32px;font-family:ui-monospace,Menlo,monospace;font-size:14px;color:var(--ink-variant)}
tbody tr:last-child td{border-bottom:none}
tbody tr:hover{background:var(--surface-low)}
.pill{display:inline-flex;align-items:center;gap:6px;background:var(--ok-bg);color:var(--ok);
  font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;padding:4px 10px}
.pill .d{width:6px;height:6px;background:var(--ok);border-radius:50%}
.panel-head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:24px}

/* ---------- account ---------- */
.balstrip{background:var(--navy);color:#fff;padding:24px 32px;display:flex;align-items:center;gap:40px;flex-wrap:wrap;
  position:relative;overflow:hidden}
.balstrip::before{content:"";position:absolute;inset:0;background:radial-gradient(at 100% 0%,rgba(124,58,237,.42) 0,transparent 55%),radial-gradient(at 0% 100%,rgba(26,18,48,.9) 0,transparent 50%)}
.balstrip>*{position:relative;z-index:2}
.balstrip .bignum{font-family:"Playfair Display",Georgia,serif;font-size:48px;line-height:52px;font-weight:700;color:#fff}
.balstrip .bigsub{font-size:14px;color:var(--on-navy)}
.balstrip .meterbox{flex:1;min-width:200px;max-width:420px}
.balstrip .meter{height:8px;background:rgba(255,255,255,.14);overflow:hidden;margin-bottom:8px}
.balstrip .meter i{display:block;height:100%;background:linear-gradient(90deg,var(--violet),var(--lavender))}
.balstrip .meternote{font-size:13px;color:var(--on-navy)}
.tabs{display:flex;border:1px solid var(--outline-variant);border-top:none;background:#fff;margin-bottom:24px;flex-wrap:wrap}
.tab{flex:1;min-width:120px;padding:16px 24px;border-bottom:3px solid transparent;font-size:15px;font-weight:600;
  color:var(--ink-variant);text-align:center}
.tab:hover{color:var(--coral-ink)}
.tab.on{color:var(--amethyst);border-bottom-color:var(--amethyst);background:var(--surface-lowest)}
.tabpane{display:none}
.tabpane.on{display:block}
.tblwrap{overflow-x:auto}
.tabpane tbody td{vertical-align:top}
.credit{color:var(--ok)!important;font-weight:700}
.debit{color:var(--ink-variant)}
.dollars{color:var(--ink)!important}
.rcpt{color:var(--coral-ink);font-weight:600;font-size:14px}
.rcpt:hover{text-decoration:underline}
.actline{color:var(--ink)}
.actsub{display:block;font-size:13px;line-height:18px;color:var(--ink-variant);margin-top:2px}
.conserve{border-top:1px solid var(--outline-variant);margin-top:4px;padding-top:16px;font-size:13px;line-height:19px;color:var(--ink-variant)}
.chips{display:flex;gap:8px}
.chip{border:1px solid var(--outline-variant);background:#fff;color:var(--ink-variant);font-size:13px;font-weight:600;
  padding:6px 16px;border-radius:999px}
.chip.on{background:var(--amethyst);border-color:var(--amethyst);color:#fff}
.pill-off{background:var(--surface-low);color:var(--ink-variant)}
.pill-off .d{background:var(--outline)}
.pill-priv{background:var(--coral-soft);color:var(--coral-ink)}
.pill-priv .d{background:var(--coral)}
.privgrid{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin:24px 0}
.privcol{border:1px solid var(--outline-variant);padding:20px 24px}
.privcol h3{font-family:inherit;font-size:14px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;margin-bottom:12px}
.privcol.keep h3{color:var(--ok)}
.privcol.never h3{color:var(--coral-ink)}
.privcol ul{margin:0;padding-left:18px;color:var(--ink-variant);font-size:14px;line-height:22px}
.privcol li{margin-bottom:6px}
.priv-price{background:var(--surface-low);border-left:3px solid var(--amethyst);padding:14px 18px;font-size:15px;line-height:22px;margin-bottom:24px}
.priv-price b{color:var(--amethyst-deep)}
.priv-confirm{border:1px solid var(--outline-variant);background:var(--surface-low);padding:24px;margin-top:24px}
.priv-confirm h3{font-size:20px;line-height:28px;margin-bottom:12px}
.priv-confirm ol{margin:0 0 20px;padding-left:20px;color:var(--ink-variant);font-size:15px;line-height:24px}
.priv-confirm li{margin-bottom:8px}
.checkline{display:flex;gap:10px;align-items:flex-start;margin-bottom:20px;font-size:15px;line-height:22px;cursor:pointer}
.checkline input{margin-top:4px;accent-color:var(--amethyst);width:16px;height:16px}
.btnrow{display:flex;gap:16px;flex-wrap:wrap;align-items:center}
.exportrow{display:flex;justify-content:space-between;align-items:center;gap:24px;border:1px solid var(--outline-variant);padding:20px 24px;flex-wrap:wrap}
.exportrow b,.exportrow span span{display:block}
.exportrow b{font-size:17px}
.exportrow span span{font-size:14px;color:var(--ink-variant)}
.deleterow{border-color:var(--coral,#E25B3A)}
.btn-danger{background:#9B1C1C;border-color:#9B1C1C;color:#fff}
.btn-danger:hover:not(:disabled):not([disabled]){background:#7F1D1D;border-color:#7F1D1D;color:#fff}
.tgl{display:flex;justify-content:space-between;align-items:center;gap:24px;border:1px solid var(--outline-variant);padding:20px 24px}
.tgl-label b,.tgl-label span{display:block}
.tgl-label b{font-size:17px}
.tgl-label span{font-size:14px;color:var(--ink-variant)}
.switch{display:block;flex:none;width:56px;height:30px;background:var(--outline-variant);border:none;border-radius:15px;position:relative;cursor:pointer;transition:background .25s}
.switch::after{content:"";position:absolute;top:3px;left:3px;width:24px;height:24px;background:#fff;border-radius:50%;transition:left .25s;box-shadow:0 1px 4px rgba(0,0,0,.25)}
.switch[aria-checked="true"]{background:var(--amethyst)}
.switch[aria-checked="true"]::after{left:29px}
.switch:focus-visible{outline:2px solid var(--violet);outline-offset:3px}
.stack24>*+*{margin-top:24px}
.account-copy{max-width:72ch}
.mode-footnote{margin-top:20px}
.account-notice{background:var(--ok-bg);border:1px solid var(--ok);color:var(--ok);padding:12px 16px;margin-bottom:20px}
.fieldrow{display:flex;gap:16px;align-items:flex-end;flex-wrap:wrap}
.fieldrow .field{flex:1;min-width:240px;margin-bottom:0}

/* reveal */
.rv{opacity:0;transform:translateY(24px);transition:opacity .7s ease-out,transform .7s ease-out}
.rv.in{opacity:1;transform:none}

@media (max-width:1024px){
  .hero-in,.bento,.appgrid{grid-template-columns:1fr}
  .grid4{grid-template-columns:1fr 1fr}
}
@media (max-width:820px){
  .wrap{padding:0 16px}
  h1{font-size:32px;line-height:40px}
  h2{font-size:26px;line-height:34px}
  .grid3,.compare,.grid4,.privgrid{grid-template-columns:1fr}
  .comp+.comp{border-left:none;border-top:1px solid var(--outline-variant)}
  .nav-links{display:none}
  .acct-menu-btn>span:nth-child(2){display:none}
  .balstrip{padding:20px 16px;gap:20px}
  .tab{padding:12px 8px;font-size:14px}
  .hero{padding:72px 0 88px}
  .sec{padding:64px 0}
}

/* Brand lockup: the arc mark sits beside the wordmark in the nav */
.brand { display: inline-flex; align-items: center; gap: 10px; }
.brand .brand-mark { flex: 0 0 auto; display: block; }

@media (prefers-reduced-motion: no-preference){
  .hero::before{animation:drift 24s ease-in-out infinite alternate}
  .sell::before{animation:sell-wash 28s ease-in-out infinite alternate;transform-origin:50% 50%}
  .nav::after{animation:hairline-drift 18s linear infinite alternate}
  .btn:hover:not(:disabled):not([disabled]):not(.btn-ghost){
    transform:translateY(-2px) scale(1.025);
    background:var(--btn-hover-grad);
    border-color:var(--btn-hover-border);
    box-shadow:var(--btn-hover-shadow-strong);
  }
  .btn-ghost:hover:not(:disabled):not([disabled]){
    transform:translateY(-1px) scale(1.015);
    background:var(--coral-soft);
    color:var(--coral-ink);
    border-color:var(--coral);
    box-shadow:none;
  }
  .btn:active:not(:disabled):not([disabled]){transform:scale(.985)}
  .pack,.tile{
    transition:transform 200ms ease-out,box-shadow 200ms ease-out;
  }
  .pack:hover,.tile:hover{
    transform:translateY(-4px);
    box-shadow:0 12px 28px rgba(91,33,182,.14);
  }
  .pack.hot:hover{box-shadow:0 14px 32px rgba(91,33,182,.2)}
  .track i{animation:bargrow 1.15s cubic-bezier(.2,.7,.3,1) .12s both}
  .track i.win{animation-delay:.28s}
}
@keyframes hairline-drift{from{background-position:0 50%}to{background-position:100% 50%}}
@keyframes bargrow{from{width:0}}
@keyframes sell-wash{from{transform:scale(1);opacity:.88}to{transform:scale(1.05);opacity:1}}

@media (prefers-reduced-motion:reduce){
  .btn,.btn:hover{transition:none;transform:none;animation:none}
  .hero::before,.nav::after,.track i,.sell::before{animation:none}
}
@media print{
  .nav::after,.foot::before,.sell::after,.auth-card::before,.legal-doc::before{display:none}
  .btn{box-shadow:none;filter:none;transform:none;background:var(--btn-grad);animation:none}
  .hero::before,.track i,.pack,.tile{animation:none;transform:none}
}

/* One logo everywhere: the lockup inherits nav ink for its wordmark. */
.brand .brand-lockup { flex: 0 0 auto; display: block; height: 40px; width: auto; color: var(--ink, #1A1230); }