/* ============================================================
   Mention Tracker — buy flow (signup with plan · paywall/checkout ·
   confirmation). Self-contained + SCOPED under `.bf`. The global
   /dashboard.css styles every other page, so every rule here is nested
   under `.bf` and every class is `bf-` prefixed — nothing may leak out,
   nothing global may leak in.
   Design source: Claude Design "Mention Tracker — Petal" project,
   ui_kits/pricing/step2..step4 (Petal token values, mirrored not renamed).
   ============================================================ */

@font-face { font-family:'Poppins'; font-style:normal; font-weight:300; font-display:swap; src:url('/media/font/poppins-v24-latin/poppins-v24-latin-300.woff2') format('woff2'); }
@font-face { font-family:'Poppins'; font-style:normal; font-weight:500; font-display:swap; src:url('/media/font/poppins-v24-latin/poppins-v24-latin-500.woff2') format('woff2'); }
@font-face { font-family:'Poppins'; font-style:normal; font-weight:600; font-display:swap; src:url('/media/font/poppins-v24-latin/poppins-v24-latin-600.woff2') format('woff2'); }

.bf {
  /* Petal tokens — scoped to the buy-flow wrapper. */
  --canvas:#F5F1E8; --canvas-deep:#EDE7DA; --surface:#FFFFFF; --surface-2:#EFEADF;
  --ink:#1E1D1D; --ink-muted:#6B6157; --ink-faint:#A79E93;
  --line:rgba(30,29,29,.10); --line-soft:rgba(30,29,29,.06);
  --accent:#12C879; --accent-press:#0FA867;
  --accent-weak:rgba(18,200,121,.12); --accent-weak-2:rgba(18,200,121,.20);
  --mint:#CDECD8; --butter:#FBEDA8; --sky:#CFE2F5;
  --series-chatgpt:#1B8F6A; --series-claude:#C0673A; --series-gemini:#6E4FD1;
  --series-perplexity:#C24E77; --series-grok:#3E4045;
  --font-sans:'Poppins',system-ui,-apple-system,sans-serif;
  --fw-light:300; --fw-medium:500; --fw-semibold:600;
  --radius-lg:22px; --radius-pill:999px;
  --ease:cubic-bezier(0.4,0,0.2,1); --dur-base:.28s;

  min-height:100dvh; box-sizing:border-box;
  background:var(--canvas);
  background-image:
    radial-gradient(1200px 720px at 84% -12%, rgba(18,200,121,.045) 0%, rgba(18,200,121,0) 60%),
    radial-gradient(1000px 760px at -6% 110%, rgba(138,109,18,.05) 0%, rgba(138,109,18,0) 55%);
  font-family:var(--font-sans); font-weight:var(--fw-medium); color:var(--ink);
  -webkit-font-smoothing:antialiased;
  display:flex; align-items:center; justify-content:center; padding:48px 24px;
}
.bf *, .bf *::before, .bf *::after { box-sizing:border-box; }
.bf a { text-decoration:none; }
@media (prefers-reduced-motion: reduce) { .bf { --dur-base:.001s; } }

/* ── Shared: account card, plan rail, model chips ── */
.bf-shell { display:grid; grid-template-columns:400px 320px; gap:22px; align-items:start; width:100%; max-width:742px; }
.bf-single { max-width:420px; }
.bf-single .bf-shell { grid-template-columns:1fr; max-width:420px; }

.bf-card { background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-lg); padding:34px 32px; }
.bf-logo { font-size:15px; font-weight:var(--fw-semibold); color:var(--ink); margin:0 0 26px; display:flex; align-items:center; justify-content:center; gap:8px; }
.bf-logo img { height:34px; }
.bf-card h1 { font-size:24px; font-weight:var(--fw-semibold); letter-spacing:-.02em; color:var(--ink); margin:0 0 6px; text-align:center; }
.bf-sub { font-size:13.5px; font-weight:var(--fw-light); color:var(--ink-muted); margin:0 0 24px; text-align:center; }

.bf-google { display:flex; align-items:center; justify-content:center; gap:10px; width:100%; font-size:14px; font-weight:var(--fw-medium); color:var(--ink); background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-pill); padding:12px; margin-bottom:18px; cursor:pointer; transition:background var(--dur-base) var(--ease); }
.bf-google:hover { background:var(--surface-2); }
.bf-or { display:flex; align-items:center; gap:12px; font-size:11px; font-weight:var(--fw-medium); letter-spacing:.08em; text-transform:uppercase; color:var(--ink-faint); margin-bottom:18px; }
.bf-or::before, .bf-or::after { content:""; flex:1; height:1px; background:var(--line-soft); }

.bf-card label { display:block; font-size:12px; font-weight:var(--fw-semibold); color:var(--ink); margin:0 0 6px; }
.bf-field { width:100%; font-family:var(--font-sans); font-size:14px; color:var(--ink); background:var(--canvas); border:1px solid var(--line); border-radius:12px; padding:12px 14px; margin-bottom:14px; outline:none; transition:border-color var(--dur-base) var(--ease); }
.bf-field::placeholder { color:var(--ink-faint); }
.bf-field:focus { border-color:var(--accent); }

.bf-primary { display:block; width:100%; text-align:center; font-family:var(--font-sans); font-size:14px; font-weight:var(--fw-semibold); background:var(--accent); color:#06301E; padding:13px; border:none; border-radius:var(--radius-pill); cursor:pointer; margin-top:6px; transition:transform var(--dur-base) var(--ease), box-shadow var(--dur-base) var(--ease), opacity var(--dur-base) var(--ease); }
.bf-primary:hover { transform:translateY(-2px); box-shadow:0 12px 24px rgba(18,128,90,.28); }
.bf-primary:disabled { opacity:.6; cursor:default; transform:none; box-shadow:none; }
.bf-fine { font-size:11.5px; font-weight:var(--fw-light); color:var(--ink-faint); line-height:1.5; margin:14px 0 0; text-align:center; }
.bf-fine a { color:var(--ink-muted); text-decoration:underline; }
.bf-error { display:block; font-size:12.5px; font-weight:var(--fw-medium); color:#B24A63; margin:2px 0 12px; text-align:center; }

/* Plan rail — the plan chosen on the pricing page rides along. */
.bf-plan { background:var(--ink); color:#fff; border-radius:var(--radius-lg); padding:26px 26px 24px; position:sticky; top:24px; }
.bf-plan .bf-tag { font-size:10.5px; font-weight:var(--fw-semibold); letter-spacing:.1em; text-transform:uppercase; color:rgba(255,255,255,.5); }
.bf-plan .bf-row1 { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-top:10px; }
.bf-plan .bf-pname { font-size:20px; font-weight:var(--fw-semibold); }
.bf-plan .bf-pop { font-size:10px; font-weight:var(--fw-semibold); letter-spacing:.05em; text-transform:uppercase; color:#06301E; background:var(--accent); padding:4px 9px; border-radius:var(--radius-pill); white-space:nowrap; }
.bf-plan .bf-pprice { font-size:30px; font-weight:var(--fw-semibold); letter-spacing:-.02em; margin-top:12px; }
.bf-plan .bf-pprice span { font-size:13px; font-weight:var(--fw-medium); color:rgba(255,255,255,.6); }
.bf-plan .bf-pterms { font-size:12px; font-weight:var(--fw-light); color:rgba(255,255,255,.45); margin-top:3px; }
.bf-plan ul { list-style:none; margin:18px 0 0; padding:16px 0 0; border-top:1px dashed rgba(255,255,255,.16); display:flex; flex-direction:column; gap:9px; }
.bf-plan li { font-size:12.5px; font-weight:var(--fw-medium); color:rgba(255,255,255,.85); display:flex; gap:8px; }
.bf-plan li::before { content:"✓"; color:var(--accent); font-weight:var(--fw-semibold); }
.bf-chips { display:flex; flex-wrap:wrap; gap:5px; margin-top:16px; }
.bf-chip { display:inline-flex; align-items:center; gap:5px; font-size:10.5px; font-weight:var(--fw-medium); border-radius:var(--radius-pill); padding:3px 9px 3px 6px; white-space:nowrap; }
.bf-plan .bf-chip { color:rgba(255,255,255,.88); background:rgba(255,255,255,.09); }
.bf-plan .bf-dot { box-shadow:0 0 0 1px rgba(255,255,255,.35); }
.bf-dot { width:7px; height:7px; border-radius:50%; flex:none; }
.bf-change { display:block; margin-top:18px; font-size:12px; font-weight:var(--fw-medium); color:rgba(255,255,255,.55); text-align:center; text-decoration:underline; }
.bf-plan .bf-note { font-size:11px; font-weight:var(--fw-light); color:rgba(255,255,255,.4); margin-top:12px; text-align:center; }

/* ── Step 3: paywall / checkout ── */
.bf-checkout { width:100%; max-width:460px; }
.bf-checkout .bf-card { padding:36px 34px 30px; text-align:center; }
.bf-checkout h1 { font-size:26px; font-weight:var(--fw-semibold); letter-spacing:-.02em; margin:0 0 8px; }
.bf-checkout .bf-lead { font-size:14px; font-weight:var(--fw-light); line-height:1.6; color:var(--ink-muted); margin:0 0 22px; }
.bf-summary { background:var(--canvas); border:1px dashed var(--line); border-radius:16px; padding:16px 20px; display:flex; align-items:center; justify-content:space-between; gap:12px; text-align:left; margin-bottom:16px; }
.bf-summary .bf-l .bf-pname { font-size:15px; font-weight:var(--fw-semibold); color:var(--ink); }
.bf-summary .bf-l .bf-pmeta { font-size:12px; font-weight:var(--fw-light); color:var(--ink-faint); margin-top:2px; }
.bf-summary .bf-pprice { font-size:16px; font-weight:var(--fw-semibold); color:var(--ink); white-space:nowrap; }
.bf-checkout .bf-chips { justify-content:center; margin:0 0 20px; }
.bf-checkout .bf-chip { color:var(--ink); background:var(--surface-2); }
.bf-notice { font-size:12.5px; font-weight:var(--fw-light); line-height:1.55; color:var(--ink-muted); background:var(--butter); border-radius:12px; padding:12px 15px; margin:14px 0 0; text-align:left; }
.bf-notice b { font-weight:var(--fw-semibold); color:var(--ink); }

/* Cold paywall: three-card chooser + billing toggle. */
.bf-chooser { width:100%; max-width:860px; text-align:center; }
.bf-chooser .bf-head h1 { font-size:28px; font-weight:var(--fw-semibold); letter-spacing:-.02em; margin:0 0 8px; }
.bf-chooser .bf-head p { font-size:14px; font-weight:var(--fw-light); color:var(--ink-muted); margin:0; }
.bf-toggle { display:inline-flex; gap:4px; background:var(--surface-2); border-radius:var(--radius-pill); padding:4px; margin:22px 0 0; }
.bf-toggle button { font-family:var(--font-sans); font-size:13.5px; font-weight:var(--fw-semibold); border:none; cursor:pointer; padding:8px 18px; border-radius:var(--radius-pill); background:transparent; color:var(--ink-muted); transition:background var(--dur-base) var(--ease), color var(--dur-base) var(--ease); }
.bf-toggle button.on { background:var(--ink); color:#fff; }
.bf-toggle .bf-save { font-size:11px; font-weight:var(--fw-semibold); color:var(--accent-press); background:var(--accent-weak); padding:2px 7px; border-radius:var(--radius-pill); margin-left:6px; }
.bf-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:28px; text-align:left; }
.bf-tier { background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-lg); padding:26px 24px; display:flex; flex-direction:column; }
.bf-tier.pop { background:var(--ink); color:#fff; border-color:var(--ink); position:relative; }
.bf-tier .bf-tname { font-size:17px; font-weight:var(--fw-semibold); }
.bf-tier .bf-ttag { font-size:12.5px; font-weight:var(--fw-light); color:var(--ink-muted); margin:5px 0 0; min-height:34px; }
.bf-tier.pop .bf-ttag { color:rgba(255,255,255,.6); }
.bf-tier .bf-tprice { font-size:34px; font-weight:var(--fw-semibold); letter-spacing:-.02em; margin:14px 0 0; }
.bf-tier .bf-tprice span { font-size:13px; font-weight:var(--fw-medium); color:var(--ink-faint); }
.bf-tier.pop .bf-tprice span { color:rgba(255,255,255,.55); }
.bf-tier .bf-tbill { font-size:11.5px; font-weight:var(--fw-light); color:var(--ink-faint); margin-top:3px; }
.bf-tier.pop .bf-tbill { color:rgba(255,255,255,.45); }
.bf-tier ul { list-style:none; margin:16px 0 20px; padding:0; display:flex; flex-direction:column; gap:8px; }
.bf-tier li { font-size:12.5px; font-weight:var(--fw-medium); display:flex; gap:7px; }
.bf-tier li::before { content:"✓"; color:var(--accent-press); font-weight:var(--fw-semibold); }
.bf-tier.pop li::before { color:var(--accent); }
.bf-tier .bf-primary { margin-top:auto; }
.bf-tier .bf-pop { position:absolute; top:-11px; left:24px; font-size:10px; font-weight:var(--fw-semibold); letter-spacing:.05em; text-transform:uppercase; color:#06301E; background:var(--accent); padding:4px 10px; border-radius:var(--radius-pill); }
.bf-back { display:inline-block; margin-top:22px; font-size:12.5px; font-weight:var(--fw-medium); color:var(--ink-muted); text-decoration:underline; }

/* ── Step 4: confirmation ── */
.bf-confirm { width:480px; max-width:100%; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-lg); padding:44px 40px 38px; text-align:center; }
.bf-ok { width:64px; height:64px; border-radius:50%; background:var(--accent-weak-2); display:flex; align-items:center; justify-content:center; margin:0 auto 22px; }
.bf-confirm h1 { font-size:26px; font-weight:var(--fw-semibold); letter-spacing:-.02em; color:var(--ink); margin:0 0 8px; }
.bf-confirm .bf-lead { font-size:14px; font-weight:var(--fw-light); line-height:1.6; color:var(--ink-muted); margin:0 0 24px; }
.bf-confirm .bf-summary { margin-bottom:12px; }
.bf-confirm .bf-chips { justify-content:center; margin-bottom:26px; }
.bf-confirm .bf-chip { color:var(--ink); background:var(--surface-2); }

/* ── Responsive ── */
@media (max-width:760px) {
  .bf { padding:32px 18px; align-items:flex-start; }
  .bf-shell { grid-template-columns:1fr; max-width:420px; }
  .bf-plan { position:static; order:-1; }
  .bf-grid { grid-template-columns:1fr; }
}