/* ═══════════════════════════════════════════════════════════════
   ABEBIT — public site (landing + FAQ). Terminal + kinetic direction.
   Real data only: every stat driven off template context, no invented
   numbers. See signals_app/services/expectancy.py for why win-rate
   framing is avoided.
   ═══════════════════════════════════════════════════════════════ */
:root{
  --bg:#050505; --panel:#0A0A0B; --panel-2:#0E0F11; --panel-3:#131417;
  --line:rgba(255,255,255,.08); --line-2:rgba(255,255,255,.16); --line-3:rgba(255,255,255,.26);
  --ink:#F2F3F4; --ink-1:#AEB3BA; --ink-2:#6F757D; --ink-3:#3E4248;
  --amber:#F0B90B; --amber-hi:#FFD23F; --amber-dim:#8A6A0E;
  --pos:#00D97E; --neg:#FF4757;
  --mono:'JetBrains Mono',ui-monospace,'SF Mono',monospace;
  --disp:'Space Grotesk',system-ui,sans-serif;
  --wrap:1240px; --pad:clamp(20px,5vw,56px);
  --e:cubic-bezier(.16,1,.3,1);
  --e2:cubic-bezier(.65,0,.35,1);
}
*{margin:0;padding:0;box-sizing:border-box}
/* Horizontal scroll is always a bug here. The marquees that legitimately
   overflow clip themselves; anything else that grows past the viewport
   would silently drag the whole page sideways on a phone.
   `clip` rather than `hidden` on purpose: `hidden` turns the root into a
   scroll container, which is exactly what breaks position:sticky on the
   nav. `clip` contains the overflow without that side effect. */
html{scroll-behavior:smooth;overflow-x:clip}
.pb{--font-body:var(--disp);background:var(--bg);color:var(--ink);font-family:var(--disp);line-height:1.6;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;text-rendering:optimizeLegibility}
.pb a{text-decoration:none;color:inherit}
.pb ::selection{background:rgba(240,185,11,.3);color:#000}
.pb img,.pb svg{display:block}
.pb-mono{font-family:var(--mono)}

/* ── faint grid + vignette, no gradient orbs ───────────────────── */
.pb-bg{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.pb-grid{position:absolute;inset:0;opacity:.5;
  background-image:linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);
  background-size:44px 44px;mask-image:radial-gradient(ellipse 85% 60% at 50% 0%,#000,transparent 75%)}
.pb-vig{position:absolute;inset:0;background:radial-gradient(ellipse 70% 50% at 50% -10%,rgba(240,185,11,.05),transparent 60%)}
.pb-nav,.pb-tape,main,.pb-foot{position:relative;z-index:1}

/* ── scroll progress ────────────────────────────────────────────── */
.pb-progress{position:fixed;top:0;left:0;height:2px;width:0%;z-index:80;background:var(--amber);
  box-shadow:0 0 10px rgba(240,185,11,.7);transition:width .1s linear}

/* ── reveal (gated behind .js) ─────────────────────────────────── */
.js .reveal{opacity:0;transform:translateY(16px);transition:opacity .6s var(--e) var(--d,0ms),transform .6s var(--e) var(--d,0ms)}
.js .reveal.in{opacity:1;transform:none}
.js .reveal-mask{opacity:0;clip-path:inset(0 0 100% 0);transition:opacity .1s,clip-path .8s var(--e2) var(--d,0ms)}
.js .reveal-mask.in{opacity:1;clip-path:inset(0 0 0% 0)}

/* Per-child stagger: a grid should assemble itself, not pop in as one
   block. --i is set per child in landing.js. */
.js .stagger>*{opacity:0;transform:translateY(18px);
  transition:opacity .55s var(--e),transform .55s var(--e);
  transition-delay:calc(var(--i,0) * 55ms)}
.js .stagger.in>*{opacity:1;transform:none}

/* Hero headline: lines rise out from behind a mask, one after another. */
.js .pb-hero h1 .ln{display:block;overflow:hidden}
.js .pb-hero h1 .ln>span{display:block;transform:translateY(105%);
  transition:transform .85s var(--e2);transition-delay:calc(var(--i,0) * 90ms)}
.js .pb-hero h1.in .ln>span{transform:none}

/* ── buttons ────────────────────────────────────────────────────── */
.pb-btn,.pb-btn-ghost{display:inline-flex;align-items:center;gap:9px;height:42px;padding:0 20px;
  border-radius:3px;font-family:var(--mono);font-weight:600;font-size:13.5px;cursor:pointer;white-space:nowrap;
  letter-spacing:.01em;transition:transform .18s var(--e),box-shadow .2s,background .2s,border-color .2s,color .2s}
/* Selector carries .pb on purpose. `.pb a{color:inherit}` above is (0,1,1) and
   was beating a bare `.pb-btn` at (0,1,0), so every primary button rendered
   near-white text on amber — about 1.9:1 contrast, unreadable and far under
   the 4.5:1 minimum. Two classes takes this to (0,2,0) and the dark ink wins.
   Keep .pb in the selector if this rule is ever moved or rewritten. */
.pb-btn,.pb .pb-btn{color:#0A0700;background:var(--amber);box-shadow:inset 0 1px 0 rgba(255,255,255,.3);
  position:relative;overflow:hidden}
.pb-btn:hover,.pb .pb-btn:hover{color:#0A0700;background:var(--amber-hi);transform:translateY(-2px);box-shadow:0 10px 24px -8px rgba(240,185,11,.5)}
/* a light sweeps across the primary button on hover — the one flourish
   reserved for the single action we most want people to take */
.pb-btn::after{content:'';position:absolute;top:0;bottom:0;left:-60%;width:45%;pointer-events:none;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);
  transform:skewX(-18deg);opacity:0}
.has-fine .pb-btn:hover::after{animation:sheen .75s var(--e) forwards}
@keyframes sheen{from{left:-60%;opacity:1}to{left:130%;opacity:0}}
.pb-btn-ghost{color:var(--ink);background:transparent;border:1px solid var(--line-2)}
.pb-btn-ghost:hover{border-color:var(--amber);color:var(--amber-hi);transform:translateY(-2px)}
.pb-btn-lg{height:52px;padding:0 28px;font-size:15px}

/* ── nav ────────────────────────────────────────────────────────── */
.pb-nav{display:flex;align-items:center;justify-content:space-between;gap:34px;padding:15px var(--pad);position:sticky;top:0;z-index:40;
  transition:background .3s,border-color .3s;border-bottom:1px solid transparent;
  background:rgba(5,5,5,.7);backdrop-filter:blur(10px)}
.pb-nav.scrolled{background:rgba(5,5,5,.92);border-bottom-color:var(--line)}
.pb-logo{display:inline-flex;align-items:center;gap:10px;font-size:19px;font-weight:700}
.pb-logo b{color:var(--amber)}
.pb-links{display:flex;gap:28px;flex:1;font-family:var(--mono);font-size:13px;color:var(--ink-1)}
.pb-links a{transition:color .18s}.pb-links a:hover{color:var(--ink)}

/* ── ticker tape ────────────────────────────────────────────────── */
.pb-tape{border-bottom:1px solid var(--line);background:var(--panel);overflow:hidden;white-space:nowrap}
.pb-tape-track{display:inline-flex;animation:tape 38s linear infinite}
.pb-tape:hover .pb-tape-track{animation-play-state:paused}
.pb-tape-item{display:inline-flex;align-items:center;gap:8px;padding:9px 22px;font-family:var(--mono);font-size:12px;
  color:var(--ink-2);border-inline-end:1px solid var(--line)}
.pb-tape-item b{color:var(--ink-1);font-weight:600}
.pb-tape-dot{width:5px;height:5px;border-radius:50%;background:var(--pos)}
@keyframes tape{to{transform:translateX(-50%)}}

/* ── section rhythm ──────────────────────────────────────────────
   One left rail down the whole page: section headings start on the
   same x as the grid they introduce, never floated to a centred
   column — a centred block holding left-aligned text reads as a
   mistake, not a choice. Vertical rhythm is deliberately uneven:
   sections that continue a thought sit closer than ones that start
   a new one (see .pb-tight below). */
main>section{max-width:var(--wrap);margin:0 auto;padding:clamp(60px,7.5vw,104px) var(--pad)}
main>section.pb-tight{padding-top:clamp(24px,3vw,44px)}
.pb-sec-head{max-width:680px;margin:0 0 clamp(32px,4vw,52px)}
.pb-sec-head h2,.pb-sec-head h1{font-size:clamp(26px,3.8vw,42px);font-weight:700;letter-spacing:-.02em;line-height:1.12}
.pb-sec-head p{margin-top:14px;color:var(--ink-1);font-size:16px}
.pb-tag{display:inline-flex;align-items:center;gap:8px;font-family:var(--mono);font-size:11px;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;color:var(--amber);margin-bottom:16px}
.pb-tag::before{content:'';width:7px;height:7px;background:var(--amber)}

/* ── hero ───────────────────────────────────────────────────────── */
.pb-hero{position:relative;padding-top:clamp(52px,8vw,88px)!important;padding-bottom:clamp(48px,7vw,72px)!important}
.pb-spot{position:absolute;inset:0;pointer-events:none;opacity:0;z-index:0;transition:opacity .5s;
  background:radial-gradient(560px circle at var(--mx,50%) var(--my,0%),rgba(240,185,11,.1),transparent 65%)}
.has-fine .pb-spot{opacity:1}
.pb-hero-in{position:relative;z-index:1;max-width:900px}
.pb-record{display:inline-flex;align-items:center;gap:10px;font-family:var(--mono);font-size:12px;color:var(--ink-1);
  border:1px solid var(--line-2);padding:7px 14px 7px 7px;margin-bottom:28px}
.pb-record b{display:inline-flex;align-items:center;gap:6px;color:#0A0700;background:var(--pos);
  padding:3px 8px;font-weight:700;font-size:11px}
.pb-hero h1{font-size:clamp(38px,6.4vw,80px);line-height:1.02;font-weight:700;letter-spacing:-.03em;max-width:15ch}
.pb-hero h1 .pb-h1-amber{color:var(--amber)}
/* no-JS / reduced-motion fallback: lines are just block elements */
.pb-hero h1 .ln{display:block}
.pb-hero-p{margin:24px 0 0;max-width:600px;color:var(--ink-1);font-size:clamp(15.5px,1.6vw,18px);line-height:1.65}
.pb-hero-p b{color:var(--ink);font-weight:600}
.pb-cta{display:flex;gap:12px;margin-top:32px;flex-wrap:wrap}
.pb-trust{display:flex;gap:22px;margin-top:26px;flex-wrap:wrap;font-family:var(--mono);font-size:12px;color:var(--ink-2)}
/* `a` as well as `span`: the non-custodial chip is a jump link to #custody,
   and without this it lost the flex alignment the other chips have. */
.pb-trust span,.pb-trust a{display:inline-flex;align-items:center;gap:7px}
.pb-trust a{transition:color .18s var(--e)}
.pb-trust a:hover{color:var(--ink)}
.pb-trust svg{width:13px;height:13px;color:var(--pos)}

/* ── terminal readout panel (hero visual) ──────────────────────── */
.pb-term{margin-top:clamp(40px,6vw,64px);border:1px solid var(--line-2);background:var(--panel);position:relative}
.pb-term::before{content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(255,255,255,.03),transparent 30%)}
.pb-term-bar{display:flex;align-items:center;gap:10px;padding:10px 16px;border-bottom:1px solid var(--line);font-family:var(--mono)}
.pb-term-dots{display:flex;gap:6px}.pb-term-dots i{width:8px;height:8px;border-radius:50%;background:var(--line-3)}
.pb-term-title{font-size:11.5px;color:var(--ink-2);flex:1;text-align:center}
.pb-term-live{display:inline-flex;align-items:center;gap:6px;font-size:10.5px;font-weight:600;color:var(--pos);letter-spacing:.08em}
.pb-term-live i{width:6px;height:6px;border-radius:50%;background:var(--pos);animation:blink 1.6s steps(2) infinite}
@keyframes blink{50%{opacity:.25}}
.pb-ticksec{color:var(--ink-3);font-weight:500}
.pb-term-grid{display:grid;grid-template-columns:1.5fr 1fr}
.pb-term-scan{padding:20px;border-inline-end:1px solid var(--line)}
.pb-scan-head{display:flex;justify-content:space-between;font-family:var(--mono);font-size:11.5px;color:var(--ink-2);margin-bottom:14px}
.pb-scan-row{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:10px;padding:8px 0;font-family:var(--mono);font-size:12px;
  color:var(--ink-1);border-top:1px solid var(--line);align-items:center}
.pb-scan-row:first-of-type{border-top:none}
.pb-scan-row b{color:var(--ink)}
.pb-scan-row .buy{color:var(--pos)}.pb-scan-row .rej{color:var(--ink-3)}
.pb-scan-bar{height:4px;background:rgba(255,255,255,.06);position:relative}
.pb-scan-bar i{position:absolute;inset:0 auto 0 0;width:var(--w);background:var(--amber)}
.pb-term-side{padding:18px;display:flex;flex-direction:column;gap:12px}
.pb-term-stat{display:flex;justify-content:space-between;align-items:baseline;font-family:var(--mono)}
.pb-term-stat span{font-size:11px;color:var(--ink-2)}
.pb-term-stat b{font-size:15px;color:var(--ink)}
.pb-term-stat b.pos{color:var(--pos)}

/* ── dashboard preview — a window into the actual app ────────────
   Deliberately its own visual language (rounded, gradient cards) that
   mirrors dashboard.css's --dbx tokens, not the sharp marketing-site
   look — because it's supposed to read as "a different screen inside
   the product," the same way the real dashboard looks different from
   this landing page. Numbers are illustrative except outcomes tracked. */
.pb-preview{display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(32px,5vw,56px);align-items:center}
.pb-preview-copy p{margin-top:14px;color:var(--ink-1);font-size:15px;line-height:1.65;max-width:46ch}
.pb-preview-copy .pb-btn-ghost{margin-top:22px}

.pb-dbx{
  --dc:#12141B; --dc2:#0F1116; --delev:#171A22; --db:rgba(255,255,255,.07); --db2:rgba(255,255,255,.13);
  --dt0:#F2F4F7; --dt1:#A9B1BD; --dt2:#6B7280;
  --dbull:#12D18E; --dbear:#F7485F;
  --dr-md:12px; --dr-lg:15px;
  border:1px solid var(--line-2);background:#08090C;border-radius:16px;overflow:hidden;
  box-shadow:0 24px 60px -20px rgba(0,0,0,.6);
}
.pb-dbx-top{display:flex;align-items:center;gap:8px;padding:10px 14px;border-bottom:1px solid var(--db);background:#0A0B0F}
.pb-dbx-top .pb-term-dots{display:flex;gap:6px}
.pb-dbx-top .pb-term-dots i{width:8px;height:8px;border-radius:50%;background:var(--line-3)}
.pb-dbx-url{flex:1;text-align:center;font-family:var(--mono);font-size:11px;color:var(--dt2)}
.pb-dbx-body{padding:14px}

/* marquee */
.pb-dbx-marquee{border:1px solid var(--db);border-radius:var(--dr-md);background:linear-gradient(180deg,var(--delev),var(--dc));
  overflow:hidden;white-space:nowrap;margin-bottom:10px}
.pb-dbx-marquee-track{display:inline-flex;animation:tape 34s linear infinite}
.pb-dbx-mq{display:inline-flex;align-items:center;gap:7px;padding:9px 16px;border-inline-end:1px solid var(--db);
  font-family:var(--mono);font-size:11.5px}
.pb-dbx-mq b{font-family:var(--disp);font-weight:700;color:var(--dt0)}
.pb-dbx-mq span{color:var(--dt1)}
.pb-dbx-mq em{font-style:normal;font-weight:700}
.pb-dbx-mq em.up{color:var(--dbull)}.pb-dbx-mq em.dn{color:var(--dbear)}

/* market pulse */
.pb-dbx-pulse{position:relative;display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  border:1px solid var(--db);border-radius:var(--dr-md);background:linear-gradient(180deg,var(--delev),var(--dc));
  padding:10px 14px 10px 17px;margin-bottom:10px;font-family:var(--mono);font-size:11px;overflow:hidden}
.pb-dbx-pulse::before{content:'';position:absolute;inset:0 auto 0 0;width:3px;background:var(--dbull);box-shadow:0 0 12px var(--dbull)}
.pb-dbx-pulse .dot{width:8px;height:8px;border-radius:50%;background:var(--dbull);box-shadow:0 0 8px var(--dbull)}
.pb-dbx-pulse b{color:var(--dbull);font-size:12px}
.pb-dbx-pulse .num{color:var(--dt0);font-weight:700;font-size:13px}
.pb-dbx-pulse .lbl{color:var(--dt2);text-transform:uppercase;letter-spacing:.06em;font-size:9.5px;margin-inline-end:3px}
.pb-dbx-pulse .grp{display:flex;align-items:center;gap:6px}

/* KPI row */
.pb-dbx-kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:10px}
.pb-dbx-kpi{border:1px solid var(--db);border-radius:var(--dr-lg);background:linear-gradient(180deg,var(--delev),var(--dc));padding:12px}
.pb-dbx-kpi-top{display:flex;align-items:center;gap:6px;font-size:9px;color:var(--dt2);text-transform:uppercase;letter-spacing:.06em;font-weight:600;margin-bottom:10px}
.pb-dbx-kpi-ic{width:18px;height:18px;border-radius:6px;background:rgba(240,185,11,.12);border:1px solid rgba(240,185,11,.22);
  color:var(--amber);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.pb-dbx-kpi-ic svg{width:10px;height:10px}
.pb-dbx-kpi-val{font-family:var(--disp);font-size:17px;font-weight:700;color:var(--dt0);letter-spacing:-.02em}
.pb-dbx-kpi-val.pos{color:var(--dbull)}

/* main: hot signals + chart */
.pb-dbx-main{display:grid;grid-template-columns:1.3fr 1fr;gap:10px}
.pb-dbx-card{border:1px solid var(--db);border-radius:var(--dr-lg);background:linear-gradient(180deg,var(--delev),var(--dc));overflow:hidden}
.pb-dbx-card-h{display:flex;align-items:center;gap:8px;padding:10px 14px;border-bottom:1px solid var(--db);
  font-family:var(--disp);font-weight:600;font-size:12.5px;color:var(--dt0)}
.pb-dbx-sigs{padding:6px}
.pb-dbx-sig{display:grid;grid-template-columns:auto auto 1fr auto;align-items:center;gap:9px;
  padding:8px 9px;border-radius:8px;border-inline-start:2px solid var(--dbull);font-family:var(--mono)}
.pb-dbx-sig-dir{font-size:9px;font-weight:700;padding:2px 7px;border-radius:5px;background:rgba(18,209,142,.15);color:var(--dbull)}
.pb-dbx-sig-sym{font-family:var(--disp);font-weight:700;font-size:12.5px;color:var(--dt0)}
.pb-dbx-sig-tf{font-size:9.5px;color:var(--dt2)}
.pb-dbx-sig-bar{width:44px;height:4px;border-radius:3px;background:rgba(255,255,255,.08);position:relative}
.pb-dbx-sig-bar i{position:absolute;inset:0 auto 0 0;width:var(--w);border-radius:3px;background:linear-gradient(90deg,var(--amber),var(--amber-hi))}
.pb-dbx-tf-row{margin-inline-start:auto;display:flex;gap:3px}
.pb-dbx-tf{font-family:var(--mono);font-size:9.5px;font-weight:600;color:var(--dt2);background:none;border:none;padding:3px 7px;border-radius:5px}
.pb-dbx-tf.active{background:var(--amber);color:#1A1400}
.pb-dbx-chart{padding:10px 12px;height:118px}
.pb-dbx-chart svg{width:100%;height:100%;overflow:visible}
.pb-dbx-line{stroke-dasharray:500;stroke-dashoffset:500}
.pb-preview.in .pb-dbx-line,.pb-dbx-line.drawn{animation:prevdraw 1.5s var(--e) .2s forwards}
@keyframes prevdraw{to{stroke-dashoffset:0}}

@media(max-width:1000px){
  .pb-preview{grid-template-columns:1fr}
}
@media(max-width:680px){
  .pb-dbx-kpis{grid-template-columns:1fr 1fr}
  .pb-dbx-main{grid-template-columns:1fr}
}

/* ── mechanism (pipeline) ──────────────────────────────────────── */
.pb-pipe{display:flex;align-items:stretch;gap:0;position:relative;margin-top:10px}
.pb-pipe-node{flex:1;position:relative;padding:22px 18px;border:1px solid var(--line);background:var(--panel);
  opacity:.4;transition:opacity .5s var(--e),border-color .5s}
.pb-pipe-node.lit{opacity:1;border-color:var(--line-2)}
.pb-pipe-node+.pb-pipe-node{border-inline-start:none}
.pb-pipe-n{font-family:var(--mono);font-size:10.5px;color:var(--amber);letter-spacing:.1em}
.pb-pipe-node h4{margin-top:10px;font-size:15px;font-weight:600}
.pb-pipe-node p{margin-top:7px;font-size:12.5px;color:var(--ink-2);line-height:1.5}
.pb-pipe-arrow{display:flex;align-items:center;padding:0 2px;color:var(--ink-3);opacity:.4;transition:opacity .5s var(--e), color .5s}
.pb-pipe-arrow.lit{opacity:1;color:var(--amber)}
.pb-pipe-arrow svg{width:16px;height:16px}

/* ── ledger (real daily P&L) ────────────────────────────────────── */
.pb-ledger-top{display:flex;flex-wrap:wrap;gap:20px;align-items:flex-end;justify-content:space-between;margin-bottom:26px}
.pb-record-card{border:1px solid rgba(240,185,11,.35);background:linear-gradient(180deg,rgba(240,185,11,.06),transparent);
  padding:18px 22px}
.pb-record-card span{display:block;font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;color:var(--amber);text-transform:uppercase}
.pb-record-card b{display:block;font-family:var(--mono);font-size:32px;font-weight:700;margin-top:6px;color:var(--ink)}
.pb-record-card em{font-style:normal;font-size:12px;color:var(--ink-2)}
.pb-ledger-note{max-width:360px;font-size:13.5px;color:var(--ink-2);line-height:1.6}

/* ── our story (origin) ─────────────────────────────────────────── */
.pb-story-body{max-width:680px;margin:0;display:flex;flex-direction:column;gap:16px}
.pb-story-body p{font-size:16px;color:var(--ink-1);line-height:1.75}
.pb-story-body b{color:var(--ink);font-weight:600}
.pb-story-tags{max-width:680px;margin:26px 0 0;display:flex;gap:10px;flex-wrap:wrap}
.pb-story-tags span{font-family:var(--mono);font-size:11.5px;color:var(--ink-1);border:1px solid var(--line-2);
  padding:7px 13px;display:inline-flex;align-items:center;gap:7px}
.pb-story-tags span::before{content:'';width:6px;height:6px;background:var(--amber);flex-shrink:0}
.pb-ledger-note b{color:var(--ink)}
.pb-tape-2{border:1px solid var(--line);overflow:hidden;white-space:nowrap;background:var(--panel)}
.pb-tape-2-track{display:inline-flex;animation:tape 46s linear infinite}
.pb-tape-2:hover .pb-tape-2-track{animation-play-state:paused}
.pb-day{display:inline-flex;flex-direction:column;gap:6px;width:104px;padding:14px 12px;border-inline-end:1px solid var(--line);font-family:var(--mono)}
.pb-day span{font-size:10px;color:var(--ink-3)}
.pb-day b{font-size:15px}
.pb-day.pos b{color:var(--pos)}.pb-day.neg b{color:var(--neg)}
.pb-legend{display:flex;gap:20px;margin-top:16px;font-family:var(--mono);font-size:11.5px;color:var(--ink-2)}
.pb-legend span{display:inline-flex;align-items:center;gap:7px}
.pb-legend i{width:8px;height:8px}
.pb-legend .pos-i{background:var(--pos)}.pb-legend .neg-i{background:var(--neg)}

/* ── honesty (compact, supports the ledger's proof) ─────────────── */
/* Three cards since 2026-08-22 — the daily P&L strip that used to sit above
   them was removed (it summed percentages across signals, see landing.html),
   and the reporting-method cards now carry this section on their own. Matches
   .pb-cust-grid's three-up so the two evidence blocks read as one language. */
.pb-honesty{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line)}
.pb-hcard{background:var(--panel);padding:28px 26px}
.pb-hcard h3{font-size:17px;font-weight:600;margin-bottom:10px}
.pb-hcard p{font-size:14px;color:var(--ink-1);line-height:1.62}
.pb-hcard b{color:var(--ink)}.pb-hcard .sh{color:#B79CFF;font-family:var(--mono);font-size:.86em}

/* ── non-custodial (objection handling, sits just before the price) ──
   Same bordered-grid language as .pb-honesty and .pb-feat-grid so it reads
   as part of the evidence, not as a bolted-on legal notice. The icon wells
   are green rather than amber on purpose: amber is this page's "look here"
   accent, and these three cards are meant to relieve tension, not raise it. */
.pb-cust-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;
  background:var(--line);border:1px solid var(--line)}
.pb-cust-c{background:var(--panel);padding:28px 26px;transition:background .2s}
.pb-cust-c:hover{background:var(--panel-3)}
.pb-cust-ic{display:flex;align-items:center;justify-content:center;width:34px;height:34px;
  margin-bottom:16px;color:var(--pos);
  background:rgba(0,217,126,.08);border:1px solid rgba(0,217,126,.32)}
.pb-cust-ic svg{width:17px;height:17px}
.pb-cust-c h3{font-size:16.5px;font-weight:600;letter-spacing:-.01em;margin-bottom:9px}
.pb-cust-c p{font-size:13.5px;color:var(--ink-1);line-height:1.62}
.pb-cust-note{display:flex;gap:14px;align-items:flex-start;margin-top:20px;
  padding:18px 22px;background:var(--panel-2);border:1px solid var(--line)}
.pb-cust-note svg{width:17px;height:17px;color:var(--amber);flex-shrink:0;margin-top:3px}
.pb-cust-note p{font-size:13.5px;color:var(--ink-1);line-height:1.65}
.pb-cust-note b{color:var(--ink)}
.pb-cust-note a{color:var(--amber)}
.pb-cust-note a:hover{color:var(--amber-hi)}

/* ── features (data-card grid) ──────────────────────────────────── */
.pb-feat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:1px solid var(--line)}
.pb-f{background:var(--panel);padding:26px 24px;grid-column:span 2;transition:background .2s}
.pb-f:hover{background:var(--panel-3)}
.pb-f-lg{grid-row:span 2}
.pb-f-wide{grid-column:span 4}
.pb-f-n{font-family:var(--mono);font-size:11px;color:var(--amber);letter-spacing:.08em}
.pb-f h3{margin-top:12px;font-size:18px;font-weight:600}
.pb-f p{margin-top:9px;font-size:13.5px;color:var(--ink-1);line-height:1.62}
.pb-f-viz{display:flex;flex-wrap:wrap;gap:8px;margin-top:20px}
.pb-f-viz span{font-family:var(--mono);font-size:10.5px;color:var(--ink-1);border:1px solid var(--line-2);padding:6px 11px}
.pb-f-viz span.out{color:#0A0700;background:var(--amber);border-color:transparent;font-weight:700}

/* ── comprehensive feature tour (every menu item, grouped) ──────── */
.pb-tour{margin-top:clamp(48px,6vw,72px)}
.pb-cat{margin-top:40px}
.pb-cat:first-child{margin-top:0}
.pb-cat-head{display:flex;align-items:baseline;gap:12px;margin-bottom:16px;padding-bottom:10px;border-bottom:1px solid var(--line)}
.pb-cat-head b{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--amber)}
.pb-cat-head span{font-size:13px;color:var(--ink-2)}
.pb-cat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:1px solid var(--line)}
.pb-c{background:var(--panel);padding:18px;transition:background .2s}
.pb-c:hover{background:var(--panel-3)}
.pb-c-top{display:flex;align-items:center;justify-content:space-between;gap:8px}
.pb-c h4{font-size:14.5px;font-weight:600}
.pb-c-plan{font-family:var(--mono);font-size:9px;font-weight:700;letter-spacing:.06em;padding:2px 7px;border:1px solid var(--line-2);color:var(--ink-2)}
.pb-c-plan.pro{color:var(--amber);border-color:rgba(240,185,11,.35)}
.pb-c-plan.elite{color:#0A0700;background:var(--amber);border-color:transparent}
.pb-c p{margin-top:8px;font-size:12.5px;color:var(--ink-2);line-height:1.55}

/* ── learn-as-you-go strip ──────────────────────────────────────── */
.pb-learn{margin-top:clamp(48px,6vw,72px);display:flex;align-items:center;gap:22px;flex-wrap:wrap;justify-content:space-between;
  border:1px solid var(--line);padding:22px 26px;background:var(--panel)}
.pb-learn-txt{max-width:560px}
.pb-learn-txt b{display:block;font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--amber);margin-bottom:6px}
.pb-learn-txt p{font-size:14px;color:var(--ink-1);line-height:1.6}
.pb-learn-cta{display:flex;gap:10px;flex-wrap:wrap}

/* ── pricing ────────────────────────────────────────────────────── */
.pb-price-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line)}
.pb-price{background:var(--panel);padding:28px 24px;display:flex;flex-direction:column}
.pb-price-best{background:var(--panel-3);position:relative}
.pb-price-ribbon{position:absolute;top:0;right:0;font-family:var(--mono);font-size:10px;font-weight:700;letter-spacing:.08em;
  color:#0A0700;background:var(--amber);padding:5px 12px}
.pb-price-name{font-family:var(--mono);font-size:12px;color:var(--ink-2);text-transform:uppercase;letter-spacing:.08em}
.pb-price-amt{font-family:var(--mono);font-size:38px;font-weight:700;margin-top:12px}
.pb-price-amt small{font-size:14px;color:var(--ink-2);font-weight:500}
.pb-price-note{font-family:var(--mono);font-size:11.5px;color:var(--pos);margin-top:6px;line-height:1.7}
/* The "or $X/month, no commitment" line under a per-day headline. Quieter than
   the billed total above it, but deliberately still legible — it is the escape
   hatch for a reader who does not want to pay a year up front, and burying it
   would make the daily figure read as the only option. */
.pb-price-alt{color:var(--ink-2);font-size:11px}
.pb-price ul{list-style:none;margin:22px 0 24px;display:flex;flex-direction:column;gap:11px;flex:1}
.pb-price li{position:relative;padding-inline-start:22px;font-size:13.5px;color:var(--ink-1)}
.pb-price li::before{content:'+';position:absolute;inset-inline-start:0;color:var(--amber);font-family:var(--mono);font-weight:700}
.pb-price-cta{display:flex;align-items:center;justify-content:center;height:46px;border:1px solid var(--line-2);
  font-family:var(--mono);font-size:13.5px;font-weight:600;transition:.18s}
.pb-price-cta:hover{border-color:var(--amber);color:var(--amber-hi)}
/* Same (0,1,1) vs (0,1,0) trap as .pb-btn — `.pb a{color:inherit}` was making
   the Elite call-to-action near-white on amber. Two classes to outrank it. */
.pb-price-cta-gold,.pb .pb-price-cta-gold{color:#0A0700;background:var(--amber);border-color:transparent}
.pb-price-cta-gold:hover,.pb .pb-price-cta-gold:hover{color:#0A0700;filter:brightness(1.08)}
.pb-price-compare{display:block;text-align:center;margin-top:26px;font-family:var(--mono);font-size:13px;color:var(--amber)}
.pb-price-compare:hover{text-decoration:underline}

/* ── pricing page: duration toggle ─────────────────────────────── */
.pb-dur-row{display:flex;justify-content:center;margin-bottom:32px}
.pb-dur{display:inline-flex;gap:1px;background:var(--line);border:1px solid var(--line);max-width:100%;overflow-x:auto}
.pb-dur-btn{display:inline-flex;align-items:center;gap:6px;height:42px;padding:0 18px;background:var(--panel);
  border:none;color:var(--ink-1);font-family:var(--mono);font-size:12.5px;font-weight:600;cursor:pointer;
  white-space:nowrap;transition:background .18s,color .18s;flex-shrink:0}
.pb-dur-btn i{font-style:normal;color:var(--pos);font-size:10.5px;font-weight:700}
.pb-dur-btn:hover{color:var(--ink)}
.pb-dur-btn.active{background:var(--amber);color:#0A0700}
.pb-dur-btn.active i{color:#0A0700}

/* toggleable multi-month price display inside .pb-price-amt */
.pb-price-amt[data-matrix] span{display:none;flex-direction:column;gap:3px;align-items:flex-start}
.pb-price-amt[data-matrix] span.active{display:flex}
.pb-price-amt s{font-size:14px;color:var(--ink-2);text-decoration:line-through;font-family:var(--mono);font-weight:500}
.pb-price-amt s+b{margin-top:1px}
.pb-price-amt-em{font-style:normal;font-size:10.5px;font-weight:700;color:var(--pos);background:rgba(0,217,126,.12);
  padding:3px 9px;margin-top:4px;width:fit-content}

/* ── pricing page: full comparison table ──────────────────────── */
.pb-compare{margin-top:clamp(48px,6vw,72px)}
.pb-compare-h{text-align:center;font-size:clamp(22px,3vw,28px);font-weight:700;margin:0 0 24px;letter-spacing:-.01em}
.pb-table-scroll{overflow-x:auto;border:1px solid var(--line)}
.pb-table{width:100%;border-collapse:collapse;font-size:12.5px;min-width:560px}
.pb-table th,.pb-table td{padding:12px 16px;text-align:center;border-bottom:1px solid var(--line);font-family:var(--mono)}
.pb-table thead th{background:var(--panel-2);color:var(--ink);font-weight:700;font-size:10.5px;
  text-transform:uppercase;letter-spacing:.06em}
.pb-table tbody th{text-align:start;font-weight:500;color:var(--ink-1);font-family:var(--disp);font-size:13.5px}
.pb-table tbody th[scope=row]{color:var(--ink)}
.pb-table td{color:var(--ink-1)}
.pb-table td.yes{color:var(--pos);font-weight:700}
.pb-table tbody tr:nth-child(even){background:rgba(255,255,255,.015)}
.pb-table tbody tr:last-child th,.pb-table tbody tr:last-child td{border-bottom:none}

/* ── contact ────────────────────────────────────────────────────── */
.pb-contact-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--line);border:1px solid var(--line)}
.pb-contact-card{background:var(--panel);padding:26px}
.pb-contact-card b{display:block;font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--amber)}
.pb-contact-card p{margin-top:8px;font-size:13.5px;color:var(--ink-2);line-height:1.6}
.pb-contact-card a.mail{display:inline-block;margin-top:14px;font-family:var(--mono);font-size:15px;color:var(--ink);border-bottom:1px solid var(--line-2);padding-bottom:2px;transition:color .18s,border-color .18s}
.pb-contact-card a.mail:hover{color:var(--amber);border-color:var(--amber)}
.pb-contact-foot{margin-top:18px;font-size:13px;color:var(--ink-2)}
.pb-contact-foot a{color:var(--amber)}

/* ── final CTA ──────────────────────────────────────────────────── */
.pb-final{text-align:center;border:1px solid var(--line-2);padding:clamp(44px,6vw,76px) var(--pad)}
.pb-final h2{font-size:clamp(26px,4vw,42px);font-weight:700;letter-spacing:-.02em}
.pb-final p{margin-top:12px;color:var(--ink-1);font-size:15.5px}
.pb-final .pb-cta{justify-content:center;margin-top:26px}

/* ── footer ─────────────────────────────────────────────────────── */
.pb-foot{border-top:1px solid var(--line);padding:36px var(--pad) 48px;max-width:var(--wrap);margin-inline:auto}
.pb-foot-top{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-bottom:20px}
/* wrap: eight links in one non-wrapping row overflowed the viewport on
   phones and gave the whole page a horizontal scrollbar */
.pb-foot-links{display:flex;flex-wrap:wrap;gap:14px 22px;font-family:var(--mono);font-size:12.5px;color:var(--ink-2)}
.pb-foot-links a:hover{color:var(--amber)}
.pb-social{display:flex;gap:14px;align-items:center}
.pb-social a{display:inline-flex;color:var(--ink-2);transition:color .18s}
.pb-social a:hover{color:var(--amber)}
.pb-social svg{width:18px;height:18px}
.pb-disclaimer{font-size:12px;color:var(--ink-2);line-height:1.6;max-width:720px}
/* Ownership notice sits under the risk disclaimer and is deliberately quieter
   than it — the risk warning is the one a reader must not miss. */
.pb-copyright{margin-top:10px;font-size:11.5px;color:var(--ink-3);line-height:1.65;max-width:720px}

/* ── legal pages (shares this stylesheet + nav/footer) ───────────── */
.lg-wrap{max-width:var(--wrap);margin:0 auto;padding:clamp(56px,8vw,96px) var(--pad) clamp(80px,10vw,120px)}

/* ── FAQ page (shares this stylesheet + nav/footer) ─────────────── */
.fq-main{max-width:760px;margin:0 auto;padding:clamp(56px,8vw,96px) var(--pad) clamp(80px,10vw,120px)}
.fq-main h1{font-size:clamp(28px,4vw,40px);font-weight:700;letter-spacing:-.02em}
.fq-list{margin-top:32px;display:flex;flex-direction:column}
.fq-item{border-top:1px solid var(--line);padding:22px 0}
.fq-item:last-child{border-bottom:1px solid var(--line)}
.fq-item h3{font-size:16.5px;font-weight:600;display:flex;gap:12px}
.fq-item h3 i{font-family:var(--mono);color:var(--amber);font-style:normal}
.fq-item p{margin-top:10px;color:var(--ink-1);font-size:14.5px;line-height:1.65;padding-inline-start:26px}
.fq-cta{margin-top:36px;font-family:var(--mono);font-size:14px;color:var(--amber)}

/* ── a11y focus ─────────────────────────────────────────────────── */
.pb a:focus-visible,.pb button:focus-visible{outline:2px solid var(--amber);outline-offset:3px}

/* ── responsive ─────────────────────────────────────────────────── */
@media(max-width:1000px){
  .pb-honesty{grid-template-columns:1fr}
  .pb-feat-grid{grid-template-columns:repeat(2,1fr)}
  .pb-f,.pb-f-lg,.pb-f-wide{grid-column:span 1;grid-row:auto}
  .pb-pipe{flex-direction:column}
  .pb-pipe-node+.pb-pipe-node{border-inline-start:1px solid var(--line);border-top:none}
  .pb-pipe-arrow{display:none}
  .pb-cat-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:560px){
  .pb-cat-grid{grid-template-columns:1fr}
  .pb-learn{flex-direction:column;align-items:flex-start}
}
@media(max-width:820px){
  .pb-links{display:none}
  /* 34px was spacing for a nav that still had links in it. */
  .pb-nav{gap:14px}
  .pb-term-grid{grid-template-columns:1fr}
  .pb-term-scan{border-inline-end:none;border-bottom:1px solid var(--line)}
  /* Three text columns stay readable down to ~820px; below that they get
     narrower than the copy needs, so stack rather than squeeze. */
  .pb-cust-grid{grid-template-columns:1fr}
  .pb-cust-note{padding:16px 18px}
}
@media(max-width:680px){
  .pb-price-grid{grid-template-columns:1fr}
  .pb-feat-grid{grid-template-columns:1fr}
  .pb-contact-grid{grid-template-columns:1fr}
  .pb-cta{flex-direction:column}.pb-cta .pb-btn-lg{width:100%;justify-content:center}
  /* Log in stays visible here on purpose — hiding it left returning users on
     a phone with no way back into their account short of typing /login/
     themselves. Shrunk rather than removed so Start free still leads. */
  .pb-auth{display:flex;gap:8px}
  .pb-auth .pb-btn-ghost{height:38px;padding:0 12px;font-size:13px}
  .pb-auth .pb-btn{height:38px;padding:0 16px;font-size:13px}
  /* The switcher shrinks with them. Left out of this block once already, which
     put a 42px control beside two 38px buttons on every phone — the same
     mismatch this rewrite existed to remove, just at a different width. */
  .pb-lang{height:38px}
  .pb-lang select{font-size:13px}
  .pb-foot-top{flex-direction:column;align-items:flex-start;gap:14px}
  .pb-scan-row{grid-template-columns:1.6fr 1fr 1fr}
  .pb-scan-row span:nth-child(3){display:none}
  .pb-ledger-top{flex-direction:column;align-items:flex-start}
  /* On a phone the page is read one column at a time, so the desktop
     air between sections reads as dead space — tighten the whole
     rhythm and the longest body copy. */
  main>section{padding-top:clamp(48px,11vw,68px);padding-bottom:clamp(48px,11vw,68px)}
  main>section.pb-tight{padding-top:clamp(20px,5vw,32px)}
  .pb-sec-head{margin-bottom:26px}
  .pb-hero-p,.pb-story-body p{font-size:15.5px;line-height:1.62}
  .pb-story-body{gap:13px}
  .pb-cat{margin-top:28px}
  .pb-tour{margin-top:36px}
  .pb-learn{margin-top:32px;padding:18px 20px}
}
@media(max-width:420px){
  .pb-hero h1{font-size:32px}
  .pb-hero-p{font-size:15px}
}
/* Raised from 340px on 2026-09-13. The comment below had the right intent and
   the wrong number: measured on a 375px viewport — the width of most iPhones in
   portrait — the auth cluster ran to 413px, so "Start free" was cut off by 38px.
   html carries overflow-x:clip, so there was no scrollbar and nothing to see:
   the primary signup button was simply part-way off the screen on the most
   common phone size there is, and the rule written to prevent exactly that
   never fired because 340px is below every common phone.
   430px covers 375, 390, 414 and 428. */
@media(max-width:430px){
  /* Logo + Log in + Start free no longer fit one row —
     wrap instead of letting Start free clip off the edge of the screen. */
  .pb-nav{flex-wrap:wrap;row-gap:10px}
  .pb-auth{flex-basis:100%;justify-content:flex-end}
}

/* ── reduced motion ─────────────────────────────────────────────── */
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .pb-tape-track,.pb-tape-2-track,.pb-term-live i{animation:none}
  .reveal,.reveal-mask,.stagger>*{opacity:1!important;transform:none!important;clip-path:none!important;transition:none}
  .pb-h1-lines .ln>span{transform:none!important;transition:none}
  .pb-spot{display:none}
  .pb-progress{transition:none}
  .pb-btn::after{display:none}
  .pb-term{transform:none!important}
  *:hover{transform:none!important}
}

/* ── writing / blog on the homepage ──────────────────────────────
   Three cards in the same bordered-grid language as .pb-feat-grid and
   .pb-cust-grid, so the section reads as part of the evidence rather than a
   bolted-on marketing block. Cards are whole-card links: the target is the
   card, not a small "read more" string, which matters most on a phone. */
.pb-writing-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;
  background:var(--line);border:1px solid var(--line)}
.pb-wcard{background:var(--panel);padding:26px 24px;display:flex;flex-direction:column;
  gap:10px;transition:background .2s}
.pb-wcard:hover{background:var(--panel-2)}
.pb-wcard-date{font-family:var(--mono);font-size:11px;color:var(--ink-2);
  letter-spacing:.06em;text-transform:uppercase}
.pb-wcard h3{font-size:17px;font-weight:650;line-height:1.35;letter-spacing:-.005em}
.pb-wcard p{font-size:13.5px;color:var(--ink-1);line-height:1.62;margin:0}
.pb-wcard-more{margin-top:auto;font-family:var(--mono);font-size:12px;color:var(--amber)}
.pb-wcard:hover .pb-wcard-more{color:var(--amber-hi)}
@media(max-width:900px){.pb-writing-grid{grid-template-columns:1fr}}

/* ── founder ─────────────────────────────────────────────────────
   One card, photo left, words right. Deliberately the only place on the page
   with a human face: on a small product the founder being findable IS the
   trust signal, and diluting it with stock imagery elsewhere would spend it. */
.pb-founder-card{display:flex;gap:28px;align-items:flex-start;background:var(--panel);
  border:1px solid var(--line);border-radius:2px;padding:32px 30px;max-width:900px}
.pb-founder-photo{width:120px;height:120px;border-radius:50%;object-fit:cover;
  flex-shrink:0;filter:grayscale(1);border:1px solid var(--line-2)}
.pb-founder-body{min-width:0}
.pb-founder-body h2{font-size:22px;font-weight:700;letter-spacing:-.01em;margin:10px 0 14px;
  display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.pb-founder-body h2 span{font-family:var(--mono);font-size:12px;font-weight:500;
  color:var(--ink-2);letter-spacing:.06em;text-transform:uppercase}
.pb-founder-body p{font-size:14.5px;color:var(--ink-1);line-height:1.68;margin:0 0 12px;max-width:62ch}
.pb-founder-body em{color:var(--ink);font-style:italic}
.pb-founder-line{color:var(--ink)!important;font-weight:600}
.pb-founder-link{display:inline-block;margin-top:4px;font-family:var(--mono);
  font-size:12.5px;color:var(--amber)}
.pb-founder-link:hover{color:var(--amber-hi)}
@media(max-width:700px){
  .pb-founder-card{flex-direction:column;gap:18px;padding:26px 22px}
  .pb-founder-photo{width:88px;height:88px}
}

/* ── language switcher ───────────────────────────────────────────
   Built to be a sibling of the ghost button beside it, not a form control that
   happens to sit nearby. It previously rendered 33px tall at 12.5px next to two
   42px buttons at 13.5px, with the globe floating outside the border and no gap
   on the container — which is what made the header look assembled by accident.

   The wrapper carries the border and the icon; the <select> is transparent and
   fills it, so there is exactly one box and the whole thing is one hit target.
   Identical at every width: only the horizontal padding tightens on a phone,
   because a control that changes shape between breakpoints is the thing that
   reads as unfinished. */
.pb-lang{position:relative;display:inline-flex;align-items:center;height:42px;
  border:1px solid var(--line-2);border-radius:3px;background:transparent;
  transition:border-color .18s}
.pb-lang:hover{border-color:var(--line-3)}
.pb-lang:focus-within{border-color:var(--amber)}
/* globe, inside the box and vertically centred against the text */
.pb-lang-lbl{position:absolute;left:11px;top:50%;transform:translateY(-50%);
  display:inline-flex;color:var(--ink-2);pointer-events:none}
.pb-lang-lbl svg{width:15px;height:15px}
.pb-lang:hover .pb-lang-lbl{color:var(--ink-1)}
/* the select fills the wrapper; left pad clears the globe, right pad the caret */
.pb-lang select{appearance:none;-webkit-appearance:none;background:transparent;
  border:0;height:100%;width:100%;color:var(--ink-1);
  font-family:var(--mono);font-size:13.5px;font-weight:600;letter-spacing:.01em;
  padding:0 30px 0 34px;cursor:pointer;transition:color .18s}
.pb-lang:hover select{color:var(--ink)}
.pb-lang select:focus{outline:none}
.pb-lang select option{background:var(--panel);color:var(--ink);font-weight:500}
/* caret, drawn so it matches the rest of the header rather than the platform.
   Its POSITION is logical (inset-inline-end) so it sits on the trailing edge in
   Persian as well as English — it was pinned to the right and therefore on the
   wrong side of the one control a Persian reader is most likely to look at.
   Its two borders stay PHYSICAL on purpose: with the rotate below they draw a
   downward chevron, and a chevron pointing down points down in every direction.
   Making those logical would mirror the shape, not the layout. */
.pb-lang::after{content:'';position:absolute;inset-inline-end:12px;top:50%;width:5px;height:5px;
  border-right:1.5px solid var(--ink-2);border-bottom:1.5px solid var(--ink-2);
  transform:translateY(-70%) rotate(45deg);pointer-events:none}
.pb-lang:hover::after{border-color:var(--ink-1)}
.pb-lang-go{margin-inline-start:6px;font-family:var(--mono);font-size:13px;height:42px;
  padding:0 12px;background:var(--amber);color:#0A0700;border:0;border-radius:3px;cursor:pointer}
/* visually hidden but announced */
.pb-vh{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}
@media(max-width:680px){
  .pb-lang select{padding:0 26px 0 30px;font-size:13px}
  .pb-lang-lbl{left:9px}
  .pb-lang::after{right:10px}
}
  .pb-lang-lbl{display:none}
}

/* The header's right-hand cluster: switcher + auth buttons. Explicit gap and
   centre alignment so the three controls read as one row rather than three
   things that happened to end up next to each other. */
.pb-auth{display:flex;align-items:center;gap:10px}
@media(max-width:680px){.pb-auth{gap:8px}}

/* Marks the scan strip as an illustration rather than a live feed. Small and
   quiet — it has to be readable without competing with the rows it labels,
   because a disclaimer nobody reads is the same as no disclaimer. */
.pb-scan-note{
  font-size:11px;
  letter-spacing:.02em;
  color:var(--muted,#8b8b8b);
  padding:6px 0 8px;
  border-bottom:1px solid rgba(255,255,255,.06);
  margin-bottom:6px;
}
/* Shown when there is genuinely nothing open, in place of invented rows. */
.pb-dbx-sig-none{
  font-size:12px;
  color:var(--muted,#8b8b8b);
  justify-content:center;
  padding:10px 0;
}

/* ── Methodology page ───────────────────────────────────────────────────
   The site's own tokens throughout, and logical properties from the start so
   /fa/ needs no second pass — the RTL breakage fixed above came precisely from
   rules written physically the first time.

   Numbered rules rather than cards: this is a document meant to be read in
   order, and a grid of equal boxes would invite skimming the one thing the
   page exists to have read carefully. */
.pb-hero-sm{padding-top:clamp(40px,6vw,64px)!important;padding-bottom:clamp(28px,4vw,44px)!important}
.pb-h1-sm{font-size:clamp(30px,5vw,52px);line-height:1.1;font-weight:700;
  letter-spacing:-.02em;margin:14px 0 18px}

.pb-method{display:flex;flex-direction:column;gap:0;
  border-top:1px solid var(--line);margin-top:clamp(20px,3vw,32px)}
.pb-mrule{display:grid;grid-template-columns:auto 1fr;gap:clamp(16px,3vw,34px);
  padding:clamp(26px,4vw,38px) 0;border-bottom:1px solid var(--line)}
.pb-mrule h2{font-size:clamp(18px,2.4vw,23px);font-weight:650;letter-spacing:-.01em;
  margin:0 0 10px;line-height:1.3}
.pb-mrule p{color:var(--ink-1);font-size:15px;line-height:1.75;margin:0 0 12px;
  max-width:64ch}
.pb-mrule p:last-child{margin-bottom:0}
.pb-mnum{font-family:var(--mono);font-size:12px;font-weight:700;color:var(--amber);
  letter-spacing:.08em;padding-top:6px;direction:ltr}

/* Rule 07 is the one a competitor cannot copy without building it, so it is
   allowed to carry a little more weight than the rest. */
.pb-mrule-hi{background:linear-gradient(90deg,rgba(240,185,11,.05),transparent 70%);
  margin-inline:calc(var(--pad,0px) * -1);padding-inline:clamp(14px,2vw,22px);
  border-inline-start:2px solid var(--amber)}

.pb-mnever{margin-top:clamp(52px,7vw,84px)}
.pb-mlist{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px;
  border-top:1px solid var(--line)}
.pb-mlist li{padding:18px 0;border-bottom:1px solid var(--line);
  color:var(--ink-1);font-size:14.5px;line-height:1.7;max-width:70ch}
.pb-mlist li b{color:var(--ink);font-weight:650;display:block;margin-bottom:4px}

@media (max-width:620px){
  .pb-mrule{grid-template-columns:1fr;gap:8px}
  .pb-mnum{padding-top:0}
}

/* ── The worked example ─────────────────────────────────────────────────
   The card itself is the PRODUCT'S component (signals_app/_signal_card.html,
   styled by signals.css under .sig-page). Nothing here restyles it — that was
   the earlier mistake, a landing-page imitation that looked nothing like the
   thing a visitor would meet after signing up.

   This only gives it somewhere to sit: .sig-page is a full page container with
   its own max-width and padding, so those are neutralised here and the card is
   held to a readable measure instead of stretching across the section. */
.pb-eg-wrap{max-width:680px}
.pb-eg-wrap .sig-page{max-width:none;margin:0;padding:0}
/* One card, not a feed — hover lift would suggest it is clickable furniture. */
.pb-eg-wrap .sig-page .sig-card:hover{transform:none}

.pb-eg-note{margin-top:20px;font-size:13px;color:var(--ink-2);max-width:620px}