/* ============================================================================
   BakaBoost Wishlist — design system
   Brand tokens lifted VERBATIM from bakaboost.com (do not re-tune):
     --pink #FF6B9D  --pink-dark #e0517f  --lavender #C084FC  --rose #FB7185
     --blush #FFF0F5 --blush2 #FFE4F0     --text #1a0a12      --muted #7d4e6a
     --line #f3d6e4  --radius 20px        --shadow 0 4px 24px rgba(255,107,157,.13)
   Neutral scaffolding also lifted from their pages: #f4f7fc, #dfe4ee, #111827, #050505.
   Dark mode is built from their own darkest brand colour (#1a0a12), so the hues
   never change — only the surfaces they sit on.
   ========================================================================== */

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

:root{
  /* --- brand, identical to bakaboost.com --- */
  --pink:#FF6B9D;
  --pink-dark:#e0517f;
  --pink-soft:#FFB3D1;
  --plum:#d63077;
  --lavender:#C084FC;
  --rose:#FB7185;
  --blush:#FFF0F5;
  --blush2:#FFE4F0;
  --radius:20px;
  --shadow:0 4px 24px rgba(255,107,157,0.13);

  /* --- surfaces (light) ---
     The pink is unchanged; what changed is how much ground it covers. A warm
     cream base lets #FF6B9D read as an accent instead of a wash, which is what
     "proper pink, not too pinkish" means in practice. */
  --bg:#FFFBF7;
  --card:#ffffff;
  --cream:#FFF7F0;
  --soft:#F7F4F1;
  --soft2:#F1EDE9;
  --text:#1a0a12;
  --ink:#111827;
  --muted:#7A6A72;
  --muted2:#8A7F86;
  --line:#F0DDE6;
  --line2:#EAE4DE;
  --black:#050505;
  --ok:#12a870;
  --warn:#d97706;
  --bad:#dc2626;

  --grad:linear-gradient(135deg,var(--pink),var(--lavender));
  --grad-text:linear-gradient(135deg,#d63077,#C084FC);
  --shadow-lg:0 18px 48px rgba(255,107,157,.22);
  --shadow-soft:0 2px 8px rgba(15,23,42,.08);
  --ring:0 0 0 3px rgba(255,107,157,.25);
  --maxw:1120px;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
}

html.dark{
  color-scheme:dark;
  --bg:#140911;
  --card:#1e0f1a;
  --cream:#1a0c15;
  --soft:#241320;
  --soft2:#2c1826;
  --text:#ffeef6;
  --ink:#ffeef6;
  --muted:#c39ab0;
  --muted2:#a892a4;
  --line:#3a2130;
  --line2:#33202c;
  --black:#ffffff;
  --blush:#26121d;
  --blush2:#2e1523;
  --shadow:0 4px 24px rgba(0,0,0,.45);
  --shadow-soft:0 2px 10px rgba(0,0,0,.4);
  --shadow-lg:0 18px 48px rgba(0,0,0,.5);
  --grad-text:linear-gradient(135deg,#FF8FB6,#D3A6FF);
}

html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  font-family:var(--sans);color:var(--text);background:var(--bg);
  line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden;
  transition:background .25s ease,color .25s ease;
}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
button{cursor:pointer;font:inherit;color:inherit}
input,textarea,select{font:inherit;color:inherit}
::selection{background:rgba(255,107,157,.28)}
:focus-visible{outline:2px solid var(--pink);outline-offset:2px;border-radius:6px}

/* ---------- demo ribbon ---------- */
.demo-bar{
  background:linear-gradient(135deg,#1a0a12,#3a1a2a);color:#ffe4f0;
  font-size:12.5px;font-weight:600;text-align:center;padding:8px 16px;letter-spacing:.01em;
}
.demo-bar b{color:var(--pink-soft)}
.demo-bar a{text-decoration:underline;text-underline-offset:2px}

/* ---------- header ---------- */
.site-header{
  position:sticky;top:0;z-index:100;
  background:color-mix(in srgb,var(--bg) 68%,transparent);
  backdrop-filter:blur(22px) saturate(180%);-webkit-backdrop-filter:blur(22px) saturate(180%);
  border-bottom:1px solid color-mix(in srgb,var(--line2) 60%,transparent);
}
/* three tracks: brand hard left, nav dead centre, account hard right */
.header-inner{
  max-width:76rem;min-height:66px;margin:0 auto;padding:10px 20px;
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:16px;
}
.brand{display:inline-flex;align-items:center;gap:10px;font-size:21px;font-weight:800;color:var(--ink);letter-spacing:-.025em;justify-self:start}
.brand .mark{
  width:32px;height:32px;border-radius:11px;background:var(--grad);color:#fff;
  display:grid;place-items:center;box-shadow:0 5px 16px rgba(255,107,157,.35);flex:none;
  transition:transform .25s cubic-bezier(.16,1,.3,1),box-shadow .25s;
}
.brand .mark .ic{width:19px;height:19px;stroke-width:1.9}
.brand:hover .mark{transform:rotate(-6deg) scale(1.05);box-shadow:0 8px 22px rgba(255,107,157,.48)}
.top-nav{display:flex;align-items:center;gap:26px;justify-self:center}
.top-nav a{color:var(--ink);font-size:14.5px;font-weight:500;opacity:.8;transition:opacity .2s,color .2s;white-space:nowrap}
.top-nav a:not(.btn):hover,.top-nav a:not(.btn).active{opacity:1;color:var(--pink)}
.top-nav a.btn:hover{color:#fff}
.header-right{display:flex;align-items:center;gap:12px;justify-self:end}
.nav-toggle{display:none;background:none;border:1px solid var(--line2);border-radius:11px;width:38px;height:38px;
  align-items:center;justify-content:center;color:var(--ink);transition:border-color .2s,color .2s}
.nav-toggle:hover{border-color:var(--pink);color:var(--pink)}
.nav-toggle .ic{width:19px;height:19px}
.who{display:inline-flex;align-items:center;gap:9px;padding:4px 10px 4px 4px;border-radius:999px;
  border:1px solid var(--line2);transition:border-color .2s,background .2s}
.who:hover{border-color:var(--pink);background:var(--blush)}
.who span{font-size:14px;font-weight:700;white-space:nowrap}
.m-auth{display:none}   /* mirrored auth links: mobile menu only */

.theme-toggle{
  display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;padding:0;
  border-radius:999px;border:1px solid var(--line2);background:transparent;color:var(--muted);
  transition:background .2s,border-color .2s,color .2s
}
.theme-toggle .ic{width:18px;height:18px;transition:transform .45s cubic-bezier(.16,1,.3,1)}
html.dark .theme-toggle .ic{transform:rotate(180deg)}
.theme-toggle:hover{background:color-mix(in srgb,var(--pink) 12%,transparent);border-color:var(--pink);color:var(--pink)}


/* ---------- icons ---------- */
.ic{width:1.15em;height:1.15em;flex:none;vertical-align:-0.19em;display:inline-block}
.ic-brand{width:1.05em;height:1.05em}
.ic-lg{width:1.6em;height:1.6em}
.ic-xl{width:34px;height:34px}
.ic-feature{width:28px;height:28px;stroke-width:1.5}
.badge-check .ic-verified,.ic-verified{color:#1D9BF0}
html.dark .badge-check .ic-verified,html.dark .ic-verified{color:#4CB2F5}
.badge-check .ic-partner,.ic-partner{color:var(--lavender)}
.badge-check{display:inline-flex;align-items:center;vertical-align:-.16em;margin-left:10px}
.badge-check + .badge-check{margin-left:5px}
.badge-check .ic{width:1.12em;height:1.12em}
/* On a card the name is small, so the badge needs a floor to stay readable */
.cc2 h4 .badge-check .ic,.cc .badge-check .ic{width:19px;height:19px}
.pname .badge-check{margin-left:4px}
.verify-key .badge-check{margin-left:0}
.verify-key .badge-check .ic{width:17px;height:17px}
/* verification is never colour-alone: each mark carries a label on hover/focus
   and a legend sits on the explore page */
.verify-key{display:flex;gap:16px;flex-wrap:wrap;font-size:.8rem;color:var(--muted);align-items:center}
.verify-key span{display:inline-flex;align-items:center;gap:6px}
.verify-key .ic{width:15px;height:15px}

/* social row — real brand marks, glow on hover (same treatment as mecivi.com) */
.soc{
  width:40px;height:40px;border-radius:13px;border:1px solid var(--line2);
  display:grid;place-items:center;background:var(--card);color:var(--muted);
  transition:color .2s ease,transform .2s ease,border-color .2s ease,filter .2s ease,background .2s ease;
}
.soc .ic{width:17px;height:17px}
.soc:hover,.soc:focus-visible{
  color:var(--pink);border-color:var(--pink);transform:translateY(-2px);
  filter:drop-shadow(0 0 7px rgba(255,107,157,.55));
}


/* icons in context — sizes and colours that stop them reading as hairlines */
.demo-bar .ic{width:14px;height:14px;color:var(--pink-soft);vertical-align:-.18em}
.btn .ic{width:1.05em;height:1.05em}
.badge .ic{width:.95em;height:.95em}
.empty .ico .ic{width:44px;height:44px;color:var(--pink);opacity:.55;stroke-width:1.4}
.x-btn .ic{width:15px;height:15px}
.chip .ic{width:15px;height:15px}
.tabs button .ic{width:15px;height:15px}
.section-tag .ic,.eyebrow .ic{width:14px;height:14px}
.snav button .ic{width:17px;height:17px;color:var(--muted);transition:color .16s}
.snav button.on .ic,.snav button:hover .ic{color:var(--pink)}
.gaps .tag .ic{width:13px;height:13px}
.panel.hide .ic{color:var(--bad)}
.panel.show .ic{color:var(--ok)}

/* ---------- liquid glass ----------
   One surface treatment, used where a panel floats over content: the header,
   modals, sticky sidebars, the hero stat strip. Frosted, faintly saturated, with
   a light-catching top edge. */
.glass{
  background:color-mix(in srgb,var(--card) 62%,transparent);
  backdrop-filter:blur(22px) saturate(180%);
  -webkit-backdrop-filter:blur(22px) saturate(180%);
  border:1px solid color-mix(in srgb,var(--line2) 70%,transparent);
  position:relative;
}
.glass::before{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:linear-gradient(160deg,rgba(255,255,255,.55),rgba(255,255,255,.06) 42%,transparent 62%);
  opacity:.7;
}
html.dark .glass::before{background:linear-gradient(160deg,rgba(255,255,255,.10),rgba(255,255,255,.02) 42%,transparent 62%)}
.glass > *{position:relative;z-index:1}
@supports not (backdrop-filter:blur(2px)){
  .glass{background:var(--card)}
}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  border:none;border-radius:999px;padding:12px 24px;font-size:.95rem;font-weight:700;
  transition:transform .18s ease,box-shadow .18s ease,background .18s ease,color .18s,border-color .18s;
  white-space:nowrap;text-align:center
}
.btn:disabled{opacity:.55;cursor:not-allowed;transform:none!important;box-shadow:none!important}
.btn-pink{background:var(--pink);color:#fff;box-shadow:0 8px 24px rgba(255,107,157,.32)}
.btn-pink:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 14px 34px rgba(255,107,157,.45)}
.btn-grad{background:var(--grad);color:#fff;box-shadow:0 8px 26px rgba(192,132,252,.32)}
.btn-grad:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 14px 36px rgba(192,132,252,.45)}
.btn-outline{background:transparent;color:var(--pink);border:2px solid var(--pink);padding:10px 22px}
.btn-outline:hover:not(:disabled){background:var(--blush)}
.btn-dark{background:var(--black);color:var(--bg);font-weight:700}
.btn-dark:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 10px 26px rgba(0,0,0,.2)}
.btn-ghost{background:var(--soft);color:var(--text);border:1px solid var(--line2)}
.btn-ghost:hover:not(:disabled){border-color:var(--pink);color:var(--pink)}
.btn-sm{padding:8px 16px;font-size:.85rem}
.btn-lg{padding:16px 36px;font-size:1rem}
.btn-block{width:100%}
.btn-danger{background:transparent;color:var(--bad);border:1px solid color-mix(in srgb,var(--bad) 40%,transparent)}
.btn-danger:hover:not(:disabled){background:color-mix(in srgb,var(--bad) 10%,transparent)}

/* ---------- layout ---------- */
.section{padding:76px 24px;max-width:var(--maxw);margin:0 auto}
.section-narrow{max-width:760px}
.band{background:var(--soft);border-top:1px solid var(--line2);border-bottom:1px solid var(--line2)}
.band-blush{background:linear-gradient(180deg,var(--blush),var(--bg));border-bottom:1px solid var(--line)}
.section-tag{font-size:12px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--pink);margin-bottom:12px}
.section-title{font-size:clamp(1.8rem,4vw,2.8rem);font-weight:900;line-height:1.15;margin-bottom:16px;letter-spacing:-.02em}
.section-sub{font-size:1.05rem;color:var(--muted);max-width:560px;line-height:1.65;margin-bottom:48px}
.center{text-align:center}
.center .section-sub,.section-sub.center,.section-title.center{margin-left:auto;margin-right:auto}
.grad-text{background:var(--grad-text);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}

/* ---------- cards ---------- */
.card{
  background:var(--card);border:1px solid var(--line2);border-radius:var(--radius);
  transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease
}
.card-pad{padding:28px}
.card-hover:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:var(--line)}
.grid{display:grid;gap:24px}
.g2{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.g3{grid-template-columns:repeat(auto-fill,minmax(260px,1fr))}
.g4{grid-template-columns:repeat(auto-fill,minmax(220px,1fr))}

/* ---------- badges & chips ---------- */
.badge{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:800;letter-spacing:.03em;
  padding:4px 10px;border-radius:999px;background:var(--blush);color:var(--pink-dark);border:1px solid var(--line)}
.badge-grad{background:var(--grad);color:#fff;border-color:transparent}
.badge-soft{background:var(--soft);color:var(--muted2);border-color:var(--line2)}
.badge-ok{background:color-mix(in srgb,var(--ok) 14%,transparent);color:var(--ok);border-color:color-mix(in srgb,var(--ok) 30%,transparent)}
.badge-warn{background:color-mix(in srgb,var(--warn) 14%,transparent);color:var(--warn);border-color:color-mix(in srgb,var(--warn) 30%,transparent)}
.badge-bad{background:color-mix(in srgb,var(--bad) 12%,transparent);color:var(--bad);border-color:color-mix(in srgb,var(--bad) 30%,transparent)}
.chip{display:inline-flex;align-items:center;gap:6px;padding:8px 16px;border-radius:999px;border:1px solid var(--line2);
  background:var(--card);font-size:.85rem;font-weight:600;color:var(--muted);transition:.18s;cursor:pointer}
.chip:hover{border-color:var(--pink);color:var(--pink)}
.chip.on{background:var(--pink);border-color:var(--pink);color:#fff}

/* ---------- forms ---------- */
.field{margin-bottom:18px}
.field label,.lbl{display:block;font-size:.82rem;font-weight:700;color:var(--muted);margin-bottom:7px;letter-spacing:.01em}
.inp{
  width:100%;padding:13px 15px;border-radius:14px;border:1px solid var(--line2);
  background:var(--card);color:var(--text);font-size:.95rem;transition:border-color .18s,box-shadow .18s
}
.inp::placeholder{color:color-mix(in srgb,var(--muted) 70%,transparent)}
.inp:focus{outline:none;border-color:var(--pink);box-shadow:var(--ring)}
.inp.bad{border-color:var(--bad)}
textarea.inp{resize:vertical;min-height:96px;line-height:1.55}
select.inp{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%237d4e6a' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 15px center;padding-right:38px}
.hint{font-size:.78rem;color:var(--muted);margin-top:6px}
.err{font-size:.8rem;color:var(--bad);margin-top:6px;display:none;font-weight:600}
.err.show{display:block}
.row{display:grid;gap:14px}
.row2{grid-template-columns:1fr 1fr}
.row3{grid-template-columns:1fr 1fr 1fr}

.switch{display:inline-flex;align-items:center;gap:10px;cursor:pointer;user-select:none}
.switch input{position:absolute;opacity:0;width:0;height:0}
.switch .track{width:44px;height:25px;border-radius:999px;background:var(--line2);position:relative;transition:background .2s;flex:none}
.switch .track::after{content:"";position:absolute;top:3px;left:3px;width:19px;height:19px;border-radius:50%;background:#fff;
  box-shadow:0 1px 4px rgba(0,0,0,.25);transition:transform .2s}
.switch input:checked + .track{background:var(--pink)}
.switch input:checked + .track::after{transform:translateX(19px)}
.switch input:focus-visible + .track{box-shadow:var(--ring)}
.switch span.txt{font-size:.9rem;font-weight:600}

.radio-cards{display:grid;gap:12px}
.radio-card{display:flex;gap:12px;align-items:flex-start;padding:16px;border:1px solid var(--line2);
  border-radius:16px;cursor:pointer;transition:.18s;background:var(--card)}
.radio-card:hover{border-color:var(--pink)}
.radio-card.on{border-color:var(--pink);background:var(--blush);box-shadow:var(--ring)}
.radio-card input{margin-top:3px;accent-color:var(--pink)}
.radio-card b{display:block;font-size:.95rem}
.radio-card small{color:var(--muted);font-size:.83rem;line-height:1.45;display:block}

/* ---------- progress ---------- */
.prog{height:8px;border-radius:999px;background:var(--soft2);overflow:hidden}
.prog > i{display:block;height:100%;border-radius:999px;background:var(--grad);
  transition:width .6s cubic-bezier(.16,1,.3,1);box-shadow:0 0 12px rgba(255,107,157,.5)}
.prog-lbl{display:flex;justify-content:space-between;font-size:.78rem;font-weight:700;color:var(--muted);margin-top:6px}

/* ---------- tabs ---------- */
.tabs{display:flex;gap:6px;border-bottom:1px solid var(--line2);overflow-x:auto;scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
.tabs button{background:none;border:none;padding:13px 16px;font-size:.92rem;font-weight:700;color:var(--muted);
  border-bottom:2px solid transparent;white-space:nowrap;transition:.18s}
.tabs button:hover{color:var(--pink)}
.tabs button.on{color:var(--pink);border-bottom-color:var(--pink)}
.tabpane{display:none;animation:fadeUp .35s ease both}
.tabpane.on{display:block}

/* ---------- modal ---------- */
.modal{position:fixed;inset:0;z-index:200;display:none;align-items:center;justify-content:center;padding:16px}
.modal.open{display:flex}
.modal-scrim{position:absolute;inset:0;background:rgba(26,10,18,.55);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);animation:fade .2s ease}
.modal-box{position:relative;border-radius:24px;width:100%;max-width:520px;max-height:92vh;
  overflow-y:auto;box-shadow:0 30px 80px rgba(26,10,18,.35);animation:pop .28s cubic-bezier(.16,1,.3,1);
  background:color-mix(in srgb,var(--card) 88%,transparent);
  backdrop-filter:blur(26px) saturate(180%);-webkit-backdrop-filter:blur(26px) saturate(180%);
  border:1px solid color-mix(in srgb,var(--line2) 80%,transparent)}
@supports not (backdrop-filter:blur(2px)){.modal-box{background:var(--card)}}
.modal-box.wide{max-width:720px}
.modal-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:22px 24px 0}
.modal-head h3{font-size:1.2rem;font-weight:900;letter-spacing:-.01em}
.modal-body{padding:18px 24px 24px}
.x-btn{background:var(--soft);border:1px solid var(--line2);border-radius:50%;width:34px;height:34px;font-size:16px;
  display:grid;place-items:center;flex:none;transition:.18s}
.x-btn:hover{background:var(--blush);color:var(--pink);border-color:var(--pink)}

/* ---------- toast ---------- */
#toasts{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);z-index:400;display:flex;flex-direction:column;gap:10px;
  align-items:center;pointer-events:none;width:calc(100% - 32px);max-width:440px}
.toast{background:var(--black);color:var(--bg);padding:13px 20px;border-radius:14px;font-size:.9rem;font-weight:600;
  box-shadow:0 12px 34px rgba(0,0,0,.3);animation:toastIn .3s cubic-bezier(.16,1,.3,1);display:flex;gap:10px;align-items:center;
  pointer-events:auto;max-width:100%}
.toast.bad{background:var(--bad);color:#fff}
.toast.ok{background:var(--ok);color:#fff}
.toast.leaving{animation:toastOut .25s ease forwards}

/* ---------- misc ---------- */
.avatar{border-radius:50%;object-fit:cover;background:var(--soft);flex:none;border:3px solid var(--card)}
.stack{display:flex;align-items:center;gap:12px}
.spread{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.muted{color:var(--muted)}
.small{font-size:.85rem}
.tiny{font-size:.78rem}
.b{font-weight:800}
.mt{margin-top:14px}.mt2{margin-top:26px}.mb{margin-bottom:14px}.mb2{margin-bottom:26px}
.hr{height:1px;background:var(--line2);border:0;margin:22px 0}
.empty{text-align:center;padding:52px 20px;color:var(--muted)}
.empty .ico{font-size:44px;margin-bottom:12px;opacity:.6}
.skel{background:linear-gradient(90deg,var(--soft) 25%,var(--soft2) 37%,var(--soft) 63%);
  background-size:400% 100%;animation:shimmer 1.4s ease infinite;border-radius:12px}
.spin{width:18px;height:18px;border-radius:50%;border:2px solid rgba(255,255,255,.35);border-top-color:#fff;
  animation:spin .7s linear infinite;display:inline-block}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

.table{width:100%;border-collapse:collapse;font-size:.9rem}
.table th{text-align:left;font-size:.75rem;text-transform:uppercase;letter-spacing:.07em;color:var(--muted);
  padding:12px 14px;border-bottom:1px solid var(--line2);font-weight:800;white-space:nowrap}
.table td{padding:14px;border-bottom:1px solid var(--line2);vertical-align:middle}
.table tr:last-child td{border-bottom:0}
.table-wrap{overflow-x:auto;border:1px solid var(--line2);border-radius:var(--radius);background:var(--card)}

/* ---------- footer ---------- */
.site-footer{background:var(--soft);border-top:1px solid var(--line2);padding:56px 24px 32px;margin-top:60px}
.footer-inner{max-width:var(--maxw);margin:0 auto;display:grid;gap:36px;grid-template-columns:1.6fr 1fr 1fr 1fr}
.site-footer h4{font-size:.8rem;text-transform:uppercase;letter-spacing:.1em;color:var(--muted);margin-bottom:14px;font-weight:800}
.site-footer a{display:block;font-size:.9rem;color:var(--text);opacity:.8;padding:5px 0;transition:.18s}
.site-footer a:hover{opacity:1;color:var(--pink)}
.footer-bottom{max-width:var(--maxw);margin:34px auto 0;padding-top:22px;border-top:1px solid var(--line2);
  display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;font-size:.83rem;color:var(--muted)}

/* ---------- animation ---------- */
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
@keyframes fade{from{opacity:0}to{opacity:1}}
@keyframes fadeUp{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes pop{from{opacity:0;transform:translateY(18px) scale(.97)}to{opacity:1;transform:none}}
@keyframes toastIn{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@keyframes toastOut{to{opacity:0;transform:translateY(10px)}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes shimmer{0%{background-position:100% 0}100%{background-position:-100% 0}}
@keyframes pulseRing{0%{box-shadow:0 0 0 0 rgba(255,107,157,.45)}70%{box-shadow:0 0 0 14px rgba(255,107,157,0)}100%{box-shadow:0 0 0 0 rgba(255,107,157,0)}}
.reveal{opacity:0;transform:translateY(18px);transition:opacity .6s cubic-bezier(.16,1,.3,1),transform .6s cubic-bezier(.16,1,.3,1)}
.reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  .reveal{opacity:1;transform:none}
  html.page-leaving body > *{animation:none!important}
}



/* ---------- headline entrance ----------
   Each line sits in its own clipping row and slides up from under it, one after
   the next. Built from the operator's description of Throne's landing animation,
   which we cannot load from this server to copy exactly. */
.rise{display:block;overflow:hidden}
.rise > span{
  display:block;
  transform:translateY(105%);
  animation:riseUp .82s cubic-bezier(.16,1,.3,1) forwards;
}
.rise:nth-of-type(1) > span{animation-delay:.05s}
.rise:nth-of-type(2) > span{animation-delay:.17s}
.rise:nth-of-type(3) > span{animation-delay:.29s}
@keyframes riseUp{to{transform:none}}

.fade-up{opacity:0;animation:fadeUpIn .7s cubic-bezier(.16,1,.3,1) forwards}
.d1{animation-delay:.42s}.d2{animation-delay:.54s}.d3{animation-delay:.66s}.d4{animation-delay:.78s}
@keyframes fadeUpIn{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}

@media (prefers-reduced-motion:reduce){
  .rise > span{transform:none;animation:none}
  .fade-up{opacity:1;animation:none}
}

/* ---------- motion ---------- */
/* Theme change crossfades instead of snapping. Transitioning `background` and
   `color` on everything is the cheap trick that reads as expensive. */
html.theme-anim,html.theme-anim *{
  transition:background-color .32s ease,border-color .32s ease,color .32s ease,fill .32s ease,box-shadow .32s ease!important;
}

/* Page transitions. Driven from JS rather than @view-transition so the behaviour
   is the same in every browser instead of depending on an opt-in that silently
   no-ops. The header and the demo bar hold still; only the page body moves. */
body > *:not(#hdr):not(#toasts){
  animation:pageIn .42s cubic-bezier(.16,1,.3,1) both;
}
html.page-leaving body > *:not(#hdr):not(#toasts){
  animation:pageOut .2s cubic-bezier(.4,0,1,1) both;
}
@keyframes pageIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@keyframes pageOut{from{opacity:1;transform:none}to{opacity:0;transform:translateY(-8px)}}
html.page-leaving{cursor:progress}

/* FAQ: grid-row trick so height animates without measuring anything */
.faq details{overflow:hidden}
.faq .ans{display:grid;grid-template-rows:0fr;transition:grid-template-rows .34s cubic-bezier(.16,1,.3,1)}
.faq details[open] .ans{grid-template-rows:1fr}
.faq details.closing .ans{grid-template-rows:0fr}
.faq .ans > div{overflow:hidden;min-height:0}
.faq summary .ic{transition:transform .3s cubic-bezier(.16,1,.3,1);color:var(--pink)}
.faq details[open] summary .ic{transform:rotate(45deg)}
.faq details.closing summary .ic{transform:none}

/* ---------- responsive ---------- */
@media (max-width:860px){
  .footer-inner{grid-template-columns:1fr 1fr}
  .row2,.row3{grid-template-columns:1fr}
  .section{padding:56px 18px}
}
@media (max-width:880px){
  .header-inner{grid-template-columns:auto 1fr auto;gap:10px}
  .nav-toggle{display:inline-flex;order:3}
  .header-right{order:2;justify-self:end}
  .header-right .who span{display:none}
  .m-auth{display:flex;flex-direction:column;gap:10px;padding-top:14px}
  /* (shown only here; hidden by default below) */
  .m-auth a{padding:0;border:0}
  .m-auth .btn{justify-content:center}
  .top-nav{
    position:fixed;inset:66px 0 auto;flex-direction:column;align-items:stretch;gap:0;
    background:color-mix(in srgb,var(--bg) 94%,transparent);
    backdrop-filter:blur(22px) saturate(180%);-webkit-backdrop-filter:blur(22px) saturate(180%);
    border-bottom:1px solid var(--line2);padding:8px 20px 20px;display:none;
    box-shadow:0 24px 48px rgba(0,0,0,.14);
  }
  .top-nav.open{display:flex;animation:navDrop .28s cubic-bezier(.16,1,.3,1) both}
  .top-nav a{padding:14px 4px;border-bottom:1px solid var(--line2);font-size:1.02rem}
  .footer-inner{grid-template-columns:1fr}
}

@media (max-width:620px){
  #authSlot{display:none}
  .header-inner{padding:8px 16px}
  .brand{font-size:19px}
  .brand .mark{width:29px;height:29px}
}
@keyframes navDrop{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:none}}