/* ==========================================================================
   RANKED CAPPERS — funnel + legal pages (install, wait, picker, exit,
   pre-checkout, billing-soon, legal/*).
   REQUIRES /assets/site.css to be linked FIRST: this file defines NO tokens —
   it consumes the shared brand tokens (--bg, --panel, --ink, --line, --accent,
   --serif, --mono, --radius, --elev …) so light default / dark toggle and any
   future palette change flow through automatically. CSP-safe: no inline.
   ========================================================================== */

body.fn{
  background:
    radial-gradient(900px 460px at 82% -8%, var(--glow) 0%, transparent 60%),
    linear-gradient(180deg, var(--bg-2), var(--bg) 340px);
  min-height:100vh;
}
.fn-wrap{max-width:720px;margin:0 auto;padding:clamp(28px,6vw,56px) 20px 64px}

/* cards — mirror .panel from site.css */
.fn-card{
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:var(--elev);
  padding:clamp(24px,4vw,36px) clamp(22px,4vw,34px);
  margin-bottom:22px;
}
.fn h1{font-family:var(--serif);font-weight:600;letter-spacing:-.01em;font-size:clamp(26px,4.4vw,34px);line-height:1.12;margin:0 0 14px;color:var(--ink)}
.fn h2{font-family:var(--serif);font-weight:600;font-size:clamp(18px,2.6vw,21px);line-height:1.2;margin:26px 0 8px;color:var(--ink)}
.fn p{margin:0 0 14px;color:var(--ink-2);line-height:1.6}
.fn a{color:var(--accent);text-decoration:none}
.fn a:hover{text-decoration:underline}

/* eyebrow — same voice as site .eyebrow */
.fn-eyebrow{
  display:inline-block;font-family:var(--mono);font-size:12px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--mut);margin-bottom:12px;
}

/* buttons — mirror site .btn-primary / .btn-ghost */
.fn-btn{
  display:inline-flex;align-items:center;gap:9px;
  background:var(--ink);color:var(--bg);border:1px solid var(--ink);
  padding:13px 20px;border-radius:11px;font-weight:550;font-size:15px;line-height:1;
  cursor:pointer;transition:transform .16s ease,background .18s;
}
.fn a.fn-btn{color:var(--bg)}
.fn-btn:hover{transform:translateY(-1px);background:color-mix(in srgb,var(--ink) 88%,var(--accent));text-decoration:none}
.fn-ghost{background:transparent;border-color:var(--line);color:var(--ink)}
.fn a.fn-ghost{color:var(--ink)}
.fn-ghost:hover{background:transparent;border-color:var(--mut-2)}
@media (prefers-reduced-motion: reduce){.fn-btn:hover{transform:none}}

/* server picker */
.fn-servers{list-style:none;padding:0;margin:18px 0 0}
.fn-server{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 0;border-bottom:1px solid var(--line-soft)}
.fn-server:last-child{border-bottom:0}
.fn-name{font-weight:600;color:var(--ink)}

/* pre-checkout */
.fn-formula{
  background:var(--panel-2);border:1px solid var(--line-soft);border-radius:10px;
  padding:14px 16px;color:var(--ink-2);font-size:15px;line-height:1.6;
}
.fn-disclose{list-style:none;padding:0;margin:8px 0 0}
.fn-disclose li{padding:12px 0;border-bottom:1px solid var(--line-soft);color:var(--ink-2);line-height:1.6}
.fn-disclose li:last-child{border-bottom:0}
.fn-refund{color:var(--mut)}
.fn-note{color:var(--mut);font-size:14px}
.fn-price{font-family:var(--mono);font-size:22px;font-weight:700;margin:6px 0;color:var(--ink)}

/* numbered steps */
.fn-steps{list-style:none;counter-reset:s;padding:0;margin:18px 0 0}
.fn-steps li{counter-increment:s;padding:10px 0 10px 42px;position:relative;color:var(--ink-2);line-height:1.6}
.fn-steps li::before{
  content:counter(s);position:absolute;left:0;top:9px;width:26px;height:26px;
  border-radius:50%;border:1px solid var(--line);background:var(--panel-2);
  color:var(--accent);text-align:center;line-height:26px;font-weight:700;font-size:13px;
  font-family:var(--mono);
}

/* install-wait status */
.fn-status{
  padding:14px 16px;border-radius:10px;border:1px solid var(--line);
  background:var(--panel-2);margin:16px 0;color:var(--ink-2);
  font-family:var(--mono);font-size:13.5px;line-height:1.6;
}
.fn-status.ok{border-color:color-mix(in srgb,var(--pos) 45%,var(--line));color:var(--ink)}

/* footer — quiet legal voice, matches site .legal */
.fn-foot{color:var(--mut);font-size:13px;text-align:center;margin-top:34px;padding-top:22px;border-top:1px solid var(--line)}
.fn-foot p{margin:6px 0;color:var(--mut);font-family:var(--mono);font-size:12px;letter-spacing:.02em;line-height:1.7}
.fn-foot a{color:var(--mut)}
.fn-foot a:hover{color:var(--ink)}