/* Quantor marketing pages — shared layout (2026-05-11 Phase 2).
   Loaded AFTER styles.css. Uses design tokens from styles.css
   (--bg, --card, --stroke, --txt, --muted, --radius, --btnGrad,
    --font-body, --font-display, --font-mono).

   Sections:
     1. Shared layout primitives (hero, CTA block, footer-mini, pill variants)
     2. /security      page-specific
     3. /why           page-specific
     4. /how-it-works  page-specific
     5. /pricing       page-specific
     6. /strategies    page-specific
   ─────────────────────────────────────────────────────────────── */

/* 1. Shared layout primitives ──────────────────────────────────── */

/* .page-hero is the canonical class. The aliases (.sec-hero/.why-hero/
   .how-hero/.pr-hero/.st-hero) exist so existing HTML works without a
   rename; new pages should just use .page-hero. */
.page-hero, .sec-hero, .why-hero, .how-hero, .pr-hero, .st-hero{
  padding:84px 0 50px;text-align:center
}
.page-hero h1, .sec-hero h1, .why-hero h1, .how-hero h1, .pr-hero h1, .st-hero h1{
  font-size:clamp(36px,5.2vw,64px);line-height:1.06;margin:12px 0 18px;max-width:20ch;margin-left:auto;margin-right:auto
}
.page-hero .sub, .sec-hero .sub, .why-hero .sub, .how-hero .sub, .pr-hero .sub, .st-hero .sub{
  font-size:clamp(16px,2vw,19px);color:var(--muted);max-width:62ch;margin:0 auto;line-height:1.55
}
.page-hero .pill, .sec-hero .pill, .why-hero .pill, .how-hero .pill, .pr-hero .pill, .st-hero .pill{
  display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border-radius:999px;font-size:13px;letter-spacing:.04em;text-transform:uppercase;font-weight:600
}

/* Pill colour variants — per existing HTML the colour comes from the
   hero parent class (each page chose its own accent). Aliases below
   preserve the visual identity of every existing page. */
.sec-hero .pill, .st-hero .pill{background:rgba(79,140,255,.12);border:1px solid rgba(79,140,255,.3);color:#a8c8ff}
.why-hero .pill{background:rgba(138,79,255,.12);border:1px solid rgba(138,79,255,.3);color:#c9aaff}
.how-hero .pill, .pr-hero .pill{background:rgba(34,197,94,.12);border:1px solid rgba(34,197,94,.3);color:#86efac}
.page-hero .pill--blue{background:rgba(79,140,255,.12);border:1px solid rgba(79,140,255,.3);color:#a8c8ff}
.page-hero .pill--purple{background:rgba(138,79,255,.12);border:1px solid rgba(138,79,255,.3);color:#c9aaff}
.page-hero .pill--green{background:rgba(34,197,94,.12);border:1px solid rgba(34,197,94,.3);color:#86efac}
.page-hero .pill--amber{background:rgba(245,158,11,.12);border:1px solid rgba(245,158,11,.3);color:#fcd34d}

.cta-block{
  margin:60px auto 80px;max-width:780px;text-align:center;
  padding:40px 28px;background:linear-gradient(135deg,rgba(79,140,255,.12),rgba(138,79,255,.10));
  border:1px solid rgba(79,140,255,.25);border-radius:24px
}
.cta-block h2{font-size:clamp(24px,3vw,32px);margin:0 0 12px;font-family:var(--font-display)}
.cta-block p{font-size:16px;color:var(--muted);margin:0 0 22px;max-width:50ch;margin-left:auto;margin-right:auto;line-height:1.6}
.cta-block .row{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}

.footer-mini{padding:30px 0 60px;text-align:center;font-size:13px;color:var(--muted);border-top:1px solid var(--stroke2);margin-top:40px}
.footer-mini a{color:#a8c8ff;text-decoration:none;margin:0 8px}
.footer-mini a:hover{text-decoration:underline}

/* Live trust-badge — shown in every page footer. Tiny live indicator
   that fetches /_identity.json on load and shows verified state +
   short pubkey fingerprint. Builds ambient trust on every page,
   not just /security. */
.trust-badge{
  display:inline-flex;align-items:center;gap:10px;
  padding:8px 14px;margin:14px auto 0;
  background:rgba(20,32,64,.6);border:1px solid var(--stroke2);
  border-radius:999px;font-family:var(--font-mono);font-size:11.5px;
  letter-spacing:.02em;color:var(--muted);transition:border-color .2s ease
}
.trust-badge[data-verified="true"]{border-color:rgba(34,197,94,.35);color:#86efac}
.trust-badge[data-verified="false"]{border-color:rgba(245,158,11,.35);color:#fcd34d}
.trust-badge .dot{width:8px;height:8px;border-radius:50%;background:currentColor;animation:pulse 2.5s ease-in-out infinite}
.trust-badge .fp{opacity:.7}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.4}}

/* Closed-beta banner used on /pricing (and any page where a card-payment
   CTA is reachable). Honest signal that LS checkout runs in test mode
   through 2026-07-01 (closed beta period). Amber accent —
   transitional state, not alarm. */
.beta-banner{
  margin:30px auto 0;max-width:880px;
  padding:18px 24px;
  background:linear-gradient(135deg, rgba(245,158,11,.08), rgba(245,158,11,.04));
  border:1px solid rgba(245,158,11,.3);border-radius:14px;
  display:flex;gap:18px;align-items:flex-start;flex-wrap:wrap
}
.beta-banner__tag{
  font-family:var(--font-mono);font-size:11.5px;
  letter-spacing:.08em;text-transform:uppercase;color:#fcd34d;
  padding:5px 12px;border-radius:999px;background:rgba(245,158,11,.12);
  border:1px solid rgba(245,158,11,.3);
  flex-shrink:0;white-space:nowrap;font-weight:600
}
.beta-banner p{
  margin:0;font-size:14.5px;color:var(--muted);line-height:1.6;
  flex:1;min-width:260px
}
.beta-banner strong{color:#fcd34d;font-weight:600}

/* Differentiators cards — used on / (landing) directly under hero.
   Four cards linking to /security, /why, /how-it-works, /strategies.
   Same visual rhythm as the cta-block but as a row of clickable cards. */
.differentiators{padding:50px 0 30px}
.diff-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:18px;margin-top:28px}
.diff-card{
  display:block;text-decoration:none;
  background:rgba(20,32,64,.5);border:1px solid var(--stroke);border-radius:20px;
  padding:26px 24px;color:var(--txt);
  transition:transform .18s ease, border-color .18s ease, box-shadow .18s ease
}
.diff-card:hover{transform:translateY(-4px);border-color:rgba(79,140,255,.4);box-shadow:0 18px 50px rgba(0,0,0,.4)}
.diff-card__num{font-family:var(--font-mono);font-size:12px;color:#a8c8ff;letter-spacing:.08em;margin-bottom:10px;font-weight:600}
.diff-card h3{margin:0 0 10px;font-size:18px;font-family:var(--font-display);font-weight:600;line-height:1.3}
.diff-card p{margin:0 0 14px;font-size:14px;color:var(--muted);line-height:1.55}
.diff-card__cta{font-size:13px;color:#a8c8ff;font-weight:500}
.diff-card:hover .diff-card__cta{text-decoration:underline}

/* 2. /security page ────────────────────────────────────────────── */

.verify-card{
  margin:36px auto 0;max-width:780px;
  background:linear-gradient(180deg,rgba(20,32,64,.85),rgba(15,24,52,.75));
  border:1px solid var(--stroke);border-radius:20px;padding:28px;
  box-shadow:var(--shadow2)
}
.verify-card h3{margin:0 0 16px;font-size:18px;letter-spacing:.04em;text-transform:uppercase;color:#a8c8ff;font-weight:600}
.verify-row{display:grid;grid-template-columns:120px 1fr;gap:12px 16px;align-items:start;padding:10px 0;border-top:1px solid var(--stroke2);font-size:14px}
.verify-row:first-of-type{border-top:0}
.verify-row .k{color:var(--muted);text-transform:uppercase;letter-spacing:.06em;font-size:11px;padding-top:3px}
.verify-row .v{font-family:var(--font-mono);font-size:13px;word-break:break-all;line-height:1.5;color:var(--txt)}
.verify-row .v.status{font-family:var(--font-body);font-size:14px}
.badge-ok{display:inline-block;padding:3px 10px;border-radius:999px;background:rgba(34,197,94,.15);border:1px solid rgba(34,197,94,.35);color:#86efac;font-size:12px;font-weight:600}
.badge-warn{display:inline-block;padding:3px 10px;border-radius:999px;background:rgba(245,158,11,.15);border:1px solid rgba(245,158,11,.35);color:#fcd34d;font-size:12px;font-weight:600}
.verify-card .recipe{margin-top:20px;padding-top:18px;border-top:1px solid var(--stroke2)}
.verify-card .recipe summary{cursor:pointer;font-size:14px;color:#a8c8ff;font-weight:500}
.verify-card .recipe pre{margin:14px 0 0;padding:14px 16px;background:rgba(0,0,0,.4);border:1px solid var(--stroke2);border-radius:12px;font-size:12.5px;line-height:1.6;overflow-x:auto;color:#cbd5e1}

.pillars{padding:60px 0;display:grid;gap:24px}
.pillar{background:rgba(20,32,64,.5);border:1px solid var(--stroke);border-radius:20px;padding:30px}
.pillar h2{font-size:clamp(24px,3vw,34px);margin:0 0 12px;font-family:var(--font-display)}
.pillar .lead{font-size:17px;color:var(--muted);line-height:1.6;margin:0 0 24px;max-width:65ch}
.pillar h3.subhead{font-size:14px;letter-spacing:.06em;text-transform:uppercase;color:#a8c8ff;margin:28px 0 14px;font-weight:600}

/* Risk-gate list — 2026-05-12 redesign.
   Each <li> has a small numbered chip on the left and a two-line body
   on the right: bold title (+ optional code badge) on the top row,
   plain description below. Plan-aware "ladders" (max-notional, daily-
   loss) replace the comma-separated <code> string with a row of
   compact rungs that wrap cleanly on narrow viewports. */
.gate-list{counter-reset:gate;list-style:none;padding:0;margin:0;display:grid;gap:10px}
.gate-list li{
  counter-increment:gate;
  display:grid;
  grid-template-columns:40px 1fr;
  column-gap:14px;
  row-gap:6px;
  padding:14px 16px;
  background:rgba(11,17,26,.55);
  border:1px solid var(--stroke2);
  border-radius:12px;
  align-items:start;
}
.gate-list li::before{
  content:counter(gate);
  display:flex;align-items:center;justify-content:center;
  width:32px;height:32px;border-radius:50%;
  background:var(--btnGrad);
  font-family:var(--font-mono);font-size:13px;font-weight:600;color:#fff;
  grid-row:1 / span 3;
  align-self:start;
  margin-top:1px;
}
.gate__head{
  display:flex;flex-wrap:wrap;align-items:center;
  gap:8px 10px;
  grid-column:2;
}
.gate__title{
  font-weight:600;
  font-size:15px;
  color:#e8eef7;
  line-height:1.3;
}
.gate__code{
  font-family:var(--font-mono);
  font-size:11.5px;
  padding:2px 7px;
  border-radius:5px;
  background:rgba(79,140,255,.12);
  color:#a8c8ff;
  border:1px solid rgba(79,140,255,.22);
  white-space:nowrap;
  line-height:1.4;
}
.gate__desc{
  font-size:13.5px;
  color:var(--muted);
  line-height:1.55;
  grid-column:2;
}
.gate__desc em{
  font-style:normal;
  color:#cfe1ff;
  font-family:var(--font-mono);
  font-size:12.5px;
  padding:1px 5px;
  border-radius:4px;
  background:rgba(255,180,90,.10);
  border:1px solid rgba(255,180,90,.22);
}
.gate__ladder{
  grid-column:2;
  margin-top:2px;
  margin-right:-4px;
}
.gate__ladder .rung{
  display:inline-block;
  padding:4px 10px;
  margin:4px 4px 0 0;
  border-radius:6px;
  background:rgba(11,17,26,.7);
  border:1px solid var(--stroke2);
  font-family:var(--font-mono);
  font-size:12.5px;
  color:#e8eef7;
  vertical-align:baseline;
  white-space:nowrap;
}
.gate__ladder .rung b{
  color:#8aa6d4;
  font-size:10.5px;
  letter-spacing:.06em;
  text-transform:uppercase;
  font-weight:600;
  margin-right:6px;
  font-family:inherit;
}

.compare-table{width:100%;border-collapse:collapse;margin-top:18px;font-size:14.5px}
.compare-table th,.compare-table td{padding:12px 14px;text-align:left;border-bottom:1px solid var(--stroke2);vertical-align:top}
.compare-table th{font-weight:600;color:#a8c8ff;font-size:13px;letter-spacing:.04em;text-transform:uppercase}
.compare-table td.tick{color:#86efac;font-weight:600}
.compare-table td.cross{color:#f87171}
.compare-table tr td:first-child{color:var(--muted);font-size:13px}

/* 3. /why page ────────────────────────────────────────────────── */

.grid-compare{
  margin:40px auto;max-width:1080px;overflow-x:auto;
  background:rgba(20,32,64,.5);border:1px solid var(--stroke);border-radius:20px;padding:8px
}
.grid-compare table{width:100%;border-collapse:collapse;font-size:14.5px;min-width:760px}
.grid-compare th,.grid-compare td{padding:14px 18px;text-align:left;border-bottom:1px solid var(--stroke2);vertical-align:top}
.grid-compare th{font-weight:600;color:#a8c8ff;font-size:12.5px;letter-spacing:.06em;text-transform:uppercase;background:rgba(11,17,26,.4)}
.grid-compare th.quantor-col{color:#c9aaff;background:rgba(138,79,255,.10)}
.grid-compare td.quantor-col{background:rgba(138,79,255,.06)}
.grid-compare tr:last-child td{border-bottom:0}
.grid-compare td:first-child{color:var(--muted);font-size:13px;letter-spacing:.04em;text-transform:uppercase;font-weight:500}
.tick{color:#86efac;font-weight:600}
.cross{color:#f87171}
.opaque{color:#fcd34d;font-weight:500}

.dimension{margin:60px 0;padding:28px 30px;background:rgba(20,32,64,.5);border:1px solid var(--stroke);border-radius:20px}
.dimension h2{font-size:clamp(22px,2.8vw,30px);margin:0 0 10px;font-family:var(--font-display)}
.dimension .label{font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:#c9aaff;margin-bottom:8px;font-weight:600}
.dimension p{font-size:15.5px;color:var(--muted);line-height:1.65;margin:0 0 12px;max-width:70ch}
.dimension .verdict{display:inline-block;padding:6px 14px;border-radius:999px;font-size:13px;font-weight:600;margin-top:14px}
.dimension .verdict.win{background:rgba(34,197,94,.15);border:1px solid rgba(34,197,94,.35);color:#86efac}
.dimension .verdict.parity{background:rgba(245,158,11,.15);border:1px solid rgba(245,158,11,.35);color:#fcd34d}

.fairness{margin:60px auto;max-width:780px;padding:28px 30px;background:rgba(0,0,0,.3);border:1px dashed var(--stroke);border-radius:16px}
.fairness h3{margin:0 0 12px;font-size:18px;color:#a8c8ff;letter-spacing:.04em;text-transform:uppercase}
.fairness p{font-size:14.5px;color:var(--muted);line-height:1.7;margin:0 0 10px;max-width:65ch}

/* 4. /how-it-works page ───────────────────────────────────────── */

/* CSS namespace collision: styles.css:1156 also defines .steps with
   grid-template-columns:repeat(3,1fr) for a different page's small
   stepCard layout. That rule was leaking onto /how-it-works and
   producing a 3+2 ragged grid with wildly different inner heights
   (Step 2 has many TG commands stacked, others are short).
   Explicit 1fr here forces single-column vertical timeline — the
   correct UX for a step-by-step guide. 2026-05-11 polish. */
.steps{margin:50px 0;display:grid;gap:20px;grid-template-columns:1fr;max-width:880px;margin-left:auto;margin-right:auto}
.step{display:grid;grid-template-columns:80px 1fr;gap:24px;background:rgba(20,32,64,.5);border:1px solid var(--stroke);border-radius:20px;padding:28px 30px}
.step__num{display:flex;align-items:flex-start;justify-content:center;font-family:var(--font-display);font-size:48px;font-weight:700;background:linear-gradient(135deg,#4f8cff,#8a4fff);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;line-height:1}
.step__body h2{margin:0 0 8px;font-size:clamp(20px,2.6vw,26px);font-family:var(--font-display)}
.step__body .meta{font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:#a8c8ff;margin-bottom:10px;font-weight:600}
.step__body p{margin:0 0 10px;font-size:15.5px;color:var(--muted);line-height:1.65;max-width:65ch}
.step__body ul{margin:8px 0 0;padding-left:18px;font-size:14.5px;color:var(--txt);line-height:1.7}
.step__body code{font-family:var(--font-mono);font-size:13px;padding:1px 6px;border-radius:4px;background:rgba(79,140,255,.12);color:#a8c8ff}
.step__body .cmd-line{font-family:var(--font-mono);font-size:13px;padding:8px 12px;border-radius:8px;background:rgba(0,0,0,.4);border:1px solid var(--stroke2);display:inline-block;margin-top:8px;color:#cbd5e1}

.tg-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px;margin:18px 0 0}
.tg-cmd{padding:14px 16px;background:rgba(11,17,26,.6);border:1px solid var(--stroke2);border-radius:12px}
.tg-cmd code{display:block;font-family:var(--font-mono);font-size:14px;color:#a8c8ff;margin-bottom:6px;font-weight:600}
.tg-cmd .desc{font-size:13px;color:var(--muted);line-height:1.5}

.live-vs-paper{margin:40px 0;display:grid;grid-template-columns:1fr 1fr;gap:20px}
.live-vs-paper .lane{padding:24px 26px;border-radius:18px;border:1px solid var(--stroke)}
.live-vs-paper .lane.paper{background:rgba(34,197,94,.06);border-color:rgba(34,197,94,.25)}
.live-vs-paper .lane.live{background:rgba(239,68,68,.06);border-color:rgba(239,68,68,.25)}
.live-vs-paper h3{margin:0 0 14px;font-size:20px;font-family:var(--font-display)}
.live-vs-paper .lane.paper h3 span{color:#86efac}
.live-vs-paper .lane.live h3 span{color:#fca5a5}
.live-vs-paper ul{margin:0;padding-left:18px;font-size:14.5px;color:var(--txt);line-height:1.7}

/* 5. /pricing page ────────────────────────────────────────────── */

/* 2026-05-21 — Free hero strip above .plan-grid. Pulled FREE out of
   the 4-card row because it looked stunted next to the longer paid
   cards (mismatched feature counts, different CTA layout). Hero
   format gives FREE the prominence it deserves during the closed
   beta when paid plans are preview-only. */
.free-hero{
  margin: 32px 0 24px;
  padding: 28px 32px;
  background: linear-gradient(135deg, rgba(52,211,153,.10), rgba(58,123,213,.08));
  border: 1px solid rgba(52,211,153,.32);
  border-radius: 22px;
  position: relative;
}
.free-hero__badge{
  display: inline-block;
  padding: 4px 12px;
  background: rgba(52,211,153,.18);
  border: 1px solid rgba(52,211,153,.45);
  border-radius: 999px;
  color: #a7f3d0;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  margin-bottom: 14px;
}
.free-hero__grid{
  display: grid;
  grid-template-columns: 1fr 280px;
  gap: 32px;
  align-items: center;
}
@media (max-width: 720px){
  .free-hero{padding: 22px 20px}
  .free-hero__grid{grid-template-columns: 1fr; gap: 18px}
}
.free-hero__title{
  margin: 0 0 10px;
  font-size: clamp(24px, 3.4vw, 32px);
  font-family: var(--font-display);
  color: #fff;
}
.free-hero__sub{
  margin: 0 0 16px;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--muted);
  max-width: 60ch;
}
.free-hero__features{
  margin: 0 0 12px;
  padding: 0;
  list-style: none;
  font-size: 14px;
  line-height: 1.7;
  color: var(--txt);
}
.free-hero__features li{
  padding-left: 22px;
  position: relative;
}
.free-hero__features li::before{
  content: '✓';
  position: absolute;
  left: 0;
  color: #86efac;
  font-weight: 700;
}
.free-hero__caveat{
  margin: 6px 0 0;
  font-size: 12.5px;
  color: rgba(170,180,214,.65);
}
.free-hero__cta{
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: stretch;
}
.free-hero__btn{
  font-size: 15px;
  padding: 14px 22px;
  text-align: center;
  font-weight: 700;
}
.free-hero__footer{
  margin: 0;
  font-size: 11.5px;
  color: rgba(170,180,214,.55);
  line-height: 1.5;
  text-align: center;
}

/* 2026-05-27 — pricing tier visual polish.
   Pavel: «сделай красивее». Pre-state: 3 nearly-identical cards
   with a slim sliver "Most popular" badge that's easy to miss,
   plain grey CTAs, plain text "What LIVE requires" block. Goal:
   make the Pro tier *unmistakably* the highlighted choice while
   keeping the other two readable + scannable. Changes:
   * Recommended badge: top-CENTER pill (was top-left sliver),
     bigger font, animated gradient drop-shadow so it actually
     pulls focus.
   * Pro tier: thicker purple border + lifted by 6px on desktop +
     stronger box-shadow halo. The card visibly sits proud.
   * Pro CTA: gradient button (matches the main beta CTA on /)
     vs flat charcoal on Starter/Teams.
   * Conditions block: yellow border-left accent so the "What LIVE
     requires" callout reads as info-block, not paragraph text.
   * Features: bigger spacing between rows, green check chips with
     subtle background pill (was bare ✓).
   * Annual price line: green pill background so the savings read
     as a *badge*, not muted text.
   * Card hover: stronger lift (-8px) + shadow + border colour
     transition. */
.plan-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:28px;
  margin:48px 0;
  align-items:stretch;
}
.plan{
  background:linear-gradient(180deg,rgba(22,34,66,.72),rgba(16,26,52,.55));
  border:1px solid var(--stroke);
  border-radius:22px;
  padding:34px 28px 28px;
  display:flex;flex-direction:column;gap:14px;
  position:relative;
  transition:transform .25s cubic-bezier(.22,.61,.36,1),
             box-shadow .25s cubic-bezier(.22,.61,.36,1),
             border-color .25s ease;
}
.plan:hover{
  transform:translateY(-8px);
  border-color:rgba(79,140,255,.4);
  box-shadow:
    0 24px 60px rgba(79,140,255,.18),
    0 0 80px rgba(138,79,255,.10);
}
/* 2026-05-29 — Pavel pointed at the same artifact through multiple
   rounds: a sliver of purple/blue at the very top of the Pro card.
   Root cause was the card's own background gradient — top stop
   rgba(40,30,90,.45) is deep purple while Starter/Teams use navy
   rgba(22,34,66,.72), so the Pro top edge read as a stray strip of
   the blue→purple CTA button bleeding above the card. Removed the
   gradient outright; .plan.recommended now inherits the standard
   .plan background and the only thing distinguishing Pro is the
   gradient CTA button below. Reinstate a featured-card accent once
   we have real social-proof to justify it. */
/* 2026-05-29 — Pavel: «обрез в Pro сверху кусочек синей кнопки —
   уродует вид». Leftover ★ MOST POPULAR pseudo-element ribbon from
   earlier branding. The on-page HTML never carried that copy
   (removed per the pre-launch honesty pass — zero paying customers,
   "most popular" would be unverifiable), but the CSS pseudo stayed
   and a sliver of it leaked above the Pro card's top edge.

   Killed here belt-and-suspenders: content:none stops the pseudo
   from rendering at all; display:none + visibility:hidden + !important
   make sure no stale stylesheet override (e.g. a different version
   served from a CDN cache that still has the old rule) can resurrect
   it. Reinstate as a real HTML node with verifiable copy once we
   actually have plan-level stats. */
.plan.recommended::before {
  content: none !important;
  display: none !important;
  visibility: hidden !important;
  background: none !important;
  box-shadow: none !important;
}
.plan h3{
  margin:0;
  font-size:26px;
  font-family:var(--font-display);
  letter-spacing:-0.01em;
}
.plan .price{
  font-size:42px;
  font-weight:700;
  font-family:var(--font-display);
  line-height:1;
  color:#fff;
  letter-spacing:-0.02em;
}
.plan .price .per{
  font-size:14px;
  font-weight:400;
  color:var(--muted);
  margin-left:4px;
}
.plan .price .annual{
  display:inline-block;
  margin-top:10px;
  font-size:12.5px;
  color:#86efac;
  font-weight:600;
  background:rgba(134,239,172,.10);
  border:1px solid rgba(134,239,172,.28);
  padding:4px 10px;
  border-radius:999px;
  letter-spacing:.01em;
}
.plan .tag{
  font-size:14.5px;
  color:var(--muted);
  line-height:1.55;
  margin:0;
}
.plan .features{
  margin:18px 0 0;
  padding:0;
  list-style:none;
  font-size:14.5px;
  line-height:1.65;
  display:flex;
  flex-direction:column;
  gap:11px;
}
.plan .features li{
  padding-left:28px;
  position:relative;
  color:var(--txt);
}
.plan .features li::before{
  content:'✓';
  position:absolute;
  left:0;
  top:1px;
  width:18px;
  height:18px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(134,239,172,.16);
  border:1px solid rgba(134,239,172,.35);
  color:#86efac;
  font-weight:700;
  font-size:11px;
  border-radius:999px;
  line-height:1;
}
.plan .conditions{
  margin:14px 0 0;
  padding:14px 16px 14px 18px;
  background:rgba(252,211,77,.06);
  border-left:3px solid rgba(252,211,77,.55);
  border-radius:6px;
  font-size:12.5px;
  color:rgba(232,237,246,.78);
  line-height:1.6;
}
.plan .conditions strong{
  color:#fcd34d;
  display:block;
  margin-bottom:6px;
  font-size:11px;
  letter-spacing:.08em;
  text-transform:uppercase;
}
/* 2026-05-22 — Pavel: «добавь на всех тарифах что LIVE пока не работает».
   Per-card amber note placed right above the .cta-row so it's the last
   thing the user reads before clicking "Start PAPER demo". Remove this
   class + the inline blocks on the same deploy that flips
   QUANTOR_SALES_PAUSED=false (LIVE becomes active at beta end). */
.plan .live-pending-note{
  margin:12px 0 0;
  padding:12px 14px;
  background:rgba(251,191,36,.10);
  border:1px solid rgba(251,191,36,.30);
  border-radius:10px;
  font-size:12.5px;
  color:#fde68a;
  line-height:1.55;
}
.plan .live-pending-note strong{color:#fde68a;font-weight:600;}
.plan .cta-row{
  margin-top:auto;
  padding-top:18px;
  display:flex;
  flex-direction:column;
  gap:8px;
}
.plan .cta-row .btn--cta{
  width:100%;
  text-align:center;
  font-weight:600;
}
/* Pro tier gets a gradient CTA so the eye lands here when scanning
   the three buttons. Starter / Teams keep the default flat style. */
.plan.recommended .cta-row .btn--cta{
  background:linear-gradient(135deg,#4F8CFF,#8A4FFF);
  color:#fff;
  border:none;
  font-weight:700;
  letter-spacing:.01em;
  box-shadow:0 4px 16px rgba(138,79,255,.28);
  transition:transform .15s ease, box-shadow .15s ease, filter .15s ease;
}
.plan.recommended .cta-row .btn--cta:hover{
  transform:translateY(-1px);
  filter:brightness(1.08);
  box-shadow:0 8px 24px rgba(138,79,255,.42);
}

/* 2026-05-18 — Payment-rails Stage 8. Two paid-rail buttons under each
   plan card. Small + ghost-styled so the primary "Start PAPER demo" CTA
   still wins the eye; users who scroll-and-decide get the option to pay
   straight from the pricing page without going through /app first. */
.plan .payRails{margin-top:10px;display:flex;flex-direction:column;gap:6px;border-top:1px solid var(--stroke2);padding-top:12px}
.plan .btn--pay{font-size:13px;padding:9px 14px;text-align:left;display:flex;align-items:center;gap:6px}
.plan .btn--pay:disabled{opacity:.55;cursor:not-allowed}

.limits-table{margin:40px 0;overflow-x:auto;background:rgba(20,32,64,.5);border:1px solid var(--stroke);border-radius:20px;padding:8px}
.limits-table table{width:100%;border-collapse:collapse;font-size:14.5px;min-width:680px}
.limits-table th,.limits-table td{padding:12px 16px;text-align:left;border-bottom:1px solid var(--stroke2)}
.limits-table th{font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:#a8c8ff;font-weight:600;background:rgba(11,17,26,.4)}
.limits-table tr:last-child td{border-bottom:0}
.limits-table td:first-child{color:var(--muted);font-size:13px;font-weight:500}
.limits-table td.num{font-family:var(--font-mono);font-size:13.5px;color:#fff}

.rails{margin:40px 0;padding:28px 30px;background:rgba(20,32,64,.5);border:1px solid var(--stroke);border-radius:20px}
.rails h2{font-size:24px;margin:0 0 18px;font-family:var(--font-display)}
.rail-row{display:grid;grid-template-columns:140px 1fr;gap:16px;padding:12px 0;border-top:1px solid var(--stroke2);font-size:14.5px;line-height:1.6}
.rail-row:first-of-type{border-top:0}
.rail-row .name{color:#a8c8ff;font-weight:600;letter-spacing:.04em;font-size:13px;text-transform:uppercase}

.no-promise{margin:36px auto;max-width:780px;padding:24px 28px;background:rgba(0,0,0,.3);border:1px dashed rgba(245,158,11,.35);border-radius:16px}
.no-promise h3{margin:0 0 10px;font-size:16px;color:#fcd34d;letter-spacing:.04em;text-transform:uppercase}
.no-promise p{font-size:14.5px;color:var(--muted);line-height:1.65;margin:0 0 8px;max-width:65ch}

/* 6. /strategies page ─────────────────────────────────────────── */

.strat-grid{display:grid;gap:20px;margin:40px 0}
.strat{background:rgba(20,32,64,.55);border:1px solid var(--stroke);border-radius:20px;padding:30px;display:grid;grid-template-columns:1fr 220px;gap:24px}
.strat__main h2{margin:0 0 8px;font-size:clamp(22px,2.8vw,28px);font-family:var(--font-display)}
.strat__main .meta{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px}
.strat__main .tag{font-size:11px;letter-spacing:.06em;text-transform:uppercase;padding:4px 10px;border-radius:999px;border:1px solid var(--stroke);font-weight:600}
.strat__main .tag.safe{background:rgba(34,197,94,.12);border-color:rgba(34,197,94,.3);color:#86efac}
.strat__main .tag.adv{background:rgba(245,158,11,.12);border-color:rgba(245,158,11,.3);color:#fcd34d}
.strat__main .tag.mode{background:rgba(79,140,255,.10);border-color:rgba(79,140,255,.25);color:#a8c8ff}
.strat__main p{margin:0 0 10px;font-size:15px;color:var(--muted);line-height:1.65;max-width:60ch}
.strat__main .nut{margin-top:14px;padding:14px 16px;background:rgba(11,17,26,.5);border:1px solid var(--stroke2);border-radius:12px;font-size:14px;line-height:1.6}
.strat__main .nut strong{color:#a8c8ff;font-size:12px;letter-spacing:.06em;text-transform:uppercase;display:block;margin-bottom:6px}
.strat__params{background:rgba(0,0,0,.3);border:1px solid var(--stroke2);border-radius:14px;padding:18px 18px;font-family:var(--font-mono);font-size:12.5px;color:#cbd5e1;line-height:1.7}
.strat__params .label{font-family:var(--font-body);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:#a8c8ff;font-weight:600;margin-bottom:10px}
.strat__params .row{display:flex;justify-content:space-between;padding:2px 0}
.strat__params .row .k{color:var(--muted)}

.pine-block{
  margin:40px 0;padding:30px 32px;background:linear-gradient(135deg,rgba(79,140,255,.08),rgba(138,79,255,.08));
  border:1px solid rgba(79,140,255,.25);border-radius:20px
}
.pine-block h2{font-size:24px;margin:0 0 10px;font-family:var(--font-display)}
.pine-block p{font-size:15.5px;color:var(--muted);line-height:1.65;margin:0 0 12px;max-width:65ch}
.pine-block .versions{display:flex;gap:14px;flex-wrap:wrap;margin:18px 0 0}
.pine-block .ver{padding:14px 18px;border-radius:14px;background:rgba(20,32,64,.6);border:1px solid var(--stroke);min-width:240px}
.pine-block .ver h3{margin:0 0 6px;font-size:18px;font-family:var(--font-display)}
.pine-block .ver .status{font-size:11px;letter-spacing:.06em;text-transform:uppercase;padding:3px 10px;border-radius:999px;font-weight:600}
.pine-block .ver .status.shipped{background:rgba(34,197,94,.15);color:#86efac}
.pine-block .ver .status.beta{background:rgba(245,158,11,.15);color:#fcd34d}
.pine-block .ver p{font-size:13.5px;margin:8px 0 0;color:var(--muted)}

/* Responsive ─────────────────────────────────────────────────── */

/* Regime USP cards on /index.html — CALM / VOLATILE / DANGEROUS.
   Was inline-styled with hardcoded grid-template-columns:repeat(3,1fr)
   which crushed the cards on phone (each ~110px wide, uneven heights
   from different content lengths). Moved to proper classes with
   responsive layout + flex-equalised vertical rhythm. */
.regimeUSPGrid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:14px;
  margin:22px 0;
}
.regimeUSPCard{
  display:flex;flex-direction:column;
  border-radius:14px;
  padding:18px 20px;
  border:1px solid;
  background:linear-gradient(180deg, var(--regime-bg-from), var(--regime-bg-to));
  border-color:var(--regime-border);
}
.regimeUSPCard__head{
  display:flex;align-items:center;gap:8px;margin-bottom:8px;
}
.regimeUSPCard__dot{
  display:inline-block;width:10px;height:10px;border-radius:50%;
  background:var(--regime-dot);box-shadow:0 0 10px var(--regime-dot);
  flex-shrink:0;
}
.regimeUSPCard__label{
  color:var(--regime-dot);letter-spacing:.04em;font-weight:700;
  font-size:14px;
}
.regimeUSPCard p{
  margin:0;font-size:13.5px;line-height:1.55;
  color:rgba(234,240,255,.85);
  flex-grow:1;
}
.regimeUSPCard p strong{
  color:var(--regime-dot);
  font-weight:600;
}
.regimeUSPCard--calm{
  --regime-bg-from:rgba(46,235,189,.10);
  --regime-bg-to:rgba(46,235,189,.04);
  --regime-border:rgba(46,235,189,.25);
  --regime-dot:#2EEBBD;
}
.regimeUSPCard--volatile{
  --regime-bg-from:rgba(251,191,36,.10);
  --regime-bg-to:rgba(251,191,36,.04);
  --regime-border:rgba(251,191,36,.25);
  --regime-dot:#FBBF24;
}
.regimeUSPCard--dangerous{
  --regime-bg-from:rgba(255,92,126,.10);
  --regime-bg-to:rgba(255,92,126,.04);
  --regime-border:rgba(255,92,126,.25);
  --regime-dot:#FF5C7E;
}

@media (max-width:880px){
  /* Below 880px, force single column. 3 cards on a narrow viewport
     produce <120px-wide cards with text wrapping awkwardly. */
  .regimeUSPGrid{grid-template-columns:1fr;gap:12px}
  .regimeUSPCard{padding:16px 18px}
}

/* Plan cards — equalise vertical rhythm.
   align-items:stretch (grid default) gives equal card heights, but
   the inner content was floating to the top because there was no
   flex-grow on any child. Result: cards in a row had different
   visual centers — features list ended at different y-positions,
   conditions box at different y-positions, only the CTA snapped to
   bottom via margin-top:auto. Looked "ragged" between Starter / Pro
   / Teams. Adding flex-grow:1 to .features pushes the post-features
   block (conditions + cta) toward the bottom predictably.
   2026-05-11 polish pass. */
.plan .features{flex-grow:1}

/* Orphan-card fix for the landing .diff-cards (4 items) and pricing
   .plan-grid (3 items).

   Both grids used repeat(auto-fit, minmax(NNNpx, 1fr)), which is a
   great pattern for unbounded item counts but produces the classic
   "N+orphan" ragged layout for fixed counts: at viewport widths
   where (count-1) items fit per row, the last item sits alone in
   its own row, looking visually broken.

   For diff-cards (4 items, minmax 240px): orphan window ~720-960px
     → force 2x2 between those widths.
   For plan-grid (3 items, minmax 280px): orphan window ~560-880px
     → force single-column (cleaner on tablet portrait than 2+1).

   2026-05-11 polish pass. */
@media (max-width:1080px){
  .diff-cards{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:520px){
  .diff-cards{grid-template-columns:1fr}
}
@media (max-width:880px){
  .plan-grid{grid-template-columns:1fr;max-width:560px;margin-left:auto;margin-right:auto}
  .plan.recommended::before{left:50%;transform:translateX(-50%)}
}

/* Rail-row label column — fixed 140px was overflowing on phones.
   Mobile breakpoint stacks label above value. 2026-05-11 polish. */

@media (max-width:768px){
  .strat{grid-template-columns:1fr;gap:18px}
  .rail-row{grid-template-columns:1fr;gap:4px;padding:14px 0}
  .rail-row .name{font-size:11.5px}
  .pine-block .ver{min-width:0;flex:1 1 220px}
}
@media (max-width:640px){
  .verify-row{grid-template-columns:1fr;gap:4px}
  .verify-row .k{padding-top:0}
  .gate-list li{grid-template-columns:30px 1fr;padding:12px 14px}
  .gate-list li::before{width:26px;height:26px;font-size:11.5px}
  .gate__title{font-size:14.5px}
  .gate__desc{font-size:13px}
  /* 2026-08-21 — the chip's white-space:nowrap (base rule above) is the reason
     every .pillar on /security measured 417px on a 390px screen: a chip like
     quantor.trading.live.allowedUserIds cannot break, the gate row's 1fr column
     inherits that min-content, the pillar stretches, and the page's overflow
     clip hides the right 43px of all six security pillars — on the page whose
     whole job is credibility. A mid-token break is the cheaper loss. */
  .gate__code{font-size:11px;white-space:normal;overflow-wrap:anywhere}
  .compare-table{font-size:13px}
  .compare-table th,.compare-table td{padding:10px 8px}
  .step{grid-template-columns:1fr;gap:8px;padding:24px 22px}
  .step__num{font-size:36px;justify-self:start}
  .live-vs-paper{grid-template-columns:1fr}
  .plan-grid{gap:14px}
  .plan{padding:26px 22px}
  /* Wide table fallback — wrap into single-column rows via display.
     limits-table + grid-compare already use overflow-x:auto so user
     can horizontally scroll if they prefer. */
  .pillars{padding:40px 0;gap:18px}
  .pillar{padding:24px 22px}
  .dimension{padding:22px 24px;margin:40px 0}
  .rails{padding:22px 24px}
  .pine-block{padding:24px 26px}
  .pine-block .versions{gap:10px}
  .no-promise{padding:20px 22px}
}
@media (max-width:480px){
  /* Beta banner — on narrow phones the tag + paragraph stack;
     reduce padding so it doesn't dominate the viewport. */
  .beta-banner{padding:14px 16px;gap:10px}
  .beta-banner__tag{font-size:11px;padding:4px 10px}
  .beta-banner p{font-size:13.5px;line-height:1.55}
  .diff-card{padding:22px 20px}
  .diff-card h3{font-size:17px}
}

/* Marketing illustration block — used on /security, /why, /strategies,
   /how-it-works hero areas + at the top of the /blog/14-risk-gates
   article. Each page gets ONE figure under its <h1>+sub copy.
   2026-05-12: first marketing image rollout. */
.marketing-hero{
  display:block;
  max-width:1200px;
  margin:32px auto 48px;
  /* No border, no shadow, no background fill — image blends with the
     page background. PNG carries its own dark gradient that matches the
     site palette. */
  border:0;
  box-shadow:none;
  background:transparent;
  /* Reserves space ahead of the image loading so layout doesn't shift.
     Anchors to the natural aspect of the supplied PNGs (~16:9). */
  aspect-ratio: 16 / 9;
  position:relative;
}
.marketing-hero img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  /* 2026-06-27: sharp (un-feathered) edges with rounded card corners.
     The mask-gradient that dissolved the PNG into the page background was
     removed; corners rounded to 20px to match the site's card radius. */
  border-radius:20px;
}
.marketing-hero figcaption{
  position:absolute;
  inset:auto 14px 12px 16px;
  font-size:11px;
  letter-spacing:.05em;
  text-transform:uppercase;
  color:rgba(170,180,214,.5);
  pointer-events:none;
}
@media (max-width:768px){
  .marketing-hero{margin:24px auto 32px;}
}
@media (max-width:480px){
  .marketing-hero{margin:18px -4px 24px;}
}

/* 2026-05-30 — Related-reads block on blog posts. Added per SEO
   link-audit: under-linked blog posts were stuck in Google's
   "discovered, not yet crawled" queue. Cross-linking lifts each above
   the 8-inbound floor that triggers routine crawl, and gives readers a
   contextual next step instead of dropping them on the legal footer. */
.article__related {
  margin: 56px 0 24px;
  padding: 28px 0 0;
  border-top: 1px solid rgba(255,255,255,.08);
}
.article__relatedTitle {
  font-size: 15px;
  font-weight: 600;
  color: rgba(170,180,214,.7);
  margin: 0 0 14px;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.article__relatedList {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.article__relatedList li {
  font-size: 15.5px;
  line-height: 1.5;
}
.article__relatedList a {
  color: #cfe2ff;
  text-decoration: none;
  transition: color .15s ease;
}
.article__relatedList a:hover {
  color: #fff;
  text-decoration: underline;
}