/* THE PRO PAGE (/pricing; owner, Oct 6: "make /pricing sell Pro honestly"), linked by web/templates/pricing.html only, so
   site.css stays untouched. The /sources chip board's look (hud.css, pipeline.css): dark boards, HUD labels in mono caps,
   LEDs, glowing counters. The locked previews (web/pro.py pricing) draw what Pro hides as placeholder shapes (.p2-ph): a
   fixed width from this sheet, never a value or a width from the data. Colours are site.css's tokens: blue the accent,
   green only for a take-profit (profit), red only for a stop (loss). Small print keeps the site's floor: nothing under
   11.5px on a phone, small labels no wider than .12em there. Every motion rule sits behind
   prefers-reduced-motion: no-preference, and pricing2.js adds .p2-in only once a block is on screen. */

.p2-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ------------------------------------------------------------------------------------------------ the hero */
.p2-hero { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px 40px; align-items: start; }
.p2-hl { min-width: 0; }
.p2-hero .dek { margin-bottom: 12px; }
.p2-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin: 18px 0 0; }
.p2-btn { display: inline-flex; align-items: center; padding: 12px 20px; border-radius: 10px; background: var(--blue); color: #fff; font-weight: 700;
  font-size: 15px; text-decoration: none; box-shadow: 0 10px 30px -12px rgba(79,140,255,.8); transition: transform .15s ease, box-shadow .2s ease; }
.p2-btn:hover { color: #fff; transform: translateY(-1px); box-shadow: 0 14px 34px -12px rgba(79,140,255,.95); }
.p2-ghost { display: inline-flex; align-items: center; gap: 6px; padding: 11px 16px; border-radius: 10px; border: 1px solid var(--line2);
  color: var(--ink2); font-size: 14px; text-decoration: none; transition: border-color .15s, color .15s; }
.p2-ghost:hover { color: var(--ink); border-color: var(--blue-dim); }

/* what an exit alert looks like: a notification card, its numbers locked */
.p2-ping { position: relative; min-width: 0; padding: 16px 18px 14px; border-radius: 16px; border: 1px solid rgba(79,140,255,.35);
  background: radial-gradient(ellipse at 15% 0%, rgba(79,140,255,.16), rgba(79,140,255,0) 60%), linear-gradient(180deg, #0F141C, #0A0C10);
  box-shadow: 0 24px 60px -28px rgba(79,140,255,.55), inset 0 1px 0 rgba(255,255,255,.05); }
.p2-ping-k { display: flex; align-items: center; gap: 9px; margin: 0 0 10px; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink3); }
.p2-ping-k > span:nth-child(2) { flex: 1; min-width: 0; }
.p2-bell { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 8px;
  background: rgba(79,140,255,.14); color: var(--blue); flex: none; }
.p2-bell .ic { width: 14px; height: 14px; }
.p2-ping-now { padding: 2px 8px; border-radius: 999px; border: 1px solid var(--blue-dim); color: var(--blue); font-weight: 700; letter-spacing: .1em; }
.p2-ping-t { margin: 0 0 4px; font-size: 18px; color: var(--ink); }
.p2-ping-t b { font-weight: 800; letter-spacing: .01em; }
.p2-ping-s { margin: 0 0 12px; font-size: 14px; line-height: 1.5; color: var(--ink2); }
.p2-ping-l { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 0 0 12px; }
.p2-ping-l > div { min-width: 0; padding: 9px 10px; border-radius: 10px; border: 1px solid #232A35; background: rgba(5,6,8,.55); }
.p2-ping-l dt { margin: 0 0 6px; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.p2-ping-l dd { margin: 0; }
.p2-ping-l .p2-ph { width: 74%; height: 13px; }
.p2-ping-f { display: flex; gap: 8px; align-items: flex-start; margin: 0; font-size: 11.5px; line-height: 1.5; color: var(--ink3); }
.p2-ping-f .ic { flex: none; width: 12px; height: 12px; margin-top: 2px; color: var(--blue); }
.p2-ping-f a { color: var(--ink2); }

/* the HUD line: the board's counts in one strip */
.p2-hud { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 0; margin: 0; padding: 8px 16px; border-radius: 999px;
  border: 1px solid rgba(79,140,255,.3); background: rgba(79,140,255,.06); box-shadow: inset 0 0 22px rgba(79,140,255,.07), 0 0 26px rgba(79,140,255,.06);
  font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink2); }
.p2-hud > span + span::before { content: "·"; margin: 0 10px; color: var(--ink4); }
.p2-hud b { color: var(--ink); font-weight: 700; }
.p2-hud-k { display: inline-flex; align-items: center; color: var(--blue); }
.p2-hud time, .p2-k time, .p2-stats time, .p2-n time { font: inherit; }
.p2-led { display: inline-block; flex: none; width: 7px; height: 7px; margin-right: 9px; border-radius: 50%; background: var(--blue); box-shadow: 0 0 8px var(--blue); }

@media (min-width: 980px) {
  .p2-hero { grid-template-columns: minmax(0, 1fr) 390px; }
  .p2-hero .p2-ping { margin-top: 30px; }
  .p2-hud { grid-column: 1 / -1; }
}

/* ------------------------------------------------------------------------------------------------ the placeholders */
/* a locked value: a fixed shape, blurred; pricing2.js never sets one, the data never sizes one */
.p2-ph { position: relative; display: inline-block; vertical-align: middle; width: 58px; height: 11px; border-radius: 4px; overflow: hidden;
  background: linear-gradient(90deg, #2A313C, #3B4351 50%, #2A313C); filter: blur(1.6px); opacity: .9; }
.p2-ph.p2-tp { background: linear-gradient(90deg, rgba(56,242,164,.18), rgba(56,242,164,.65)); }
.p2-ph.p2-sl { background: linear-gradient(90deg, rgba(255,77,94,.18), rgba(255,77,94,.6)); }
.p2-ph.p2-w1 { width: 88%; } .p2-ph.p2-w2 { width: 62%; } .p2-ph.p2-w3 { width: 48%; } .p2-ph.p2-w4 { width: 70%; }
.p2-book .p2-tr:nth-child(3n) .p2-w1 { width: 72%; } .p2-book .p2-tr:nth-child(3n + 1) .p2-w2 { width: 80%; }
.p2-book .p2-tr:nth-child(2n) .p2-w4 { width: 54%; } .p2-book .p2-tr:nth-child(3n + 2) .p2-w3 { width: 66%; }

/* ------------------------------------------------------------------------------------------------ the board of previews */
.p2-board { position: relative; margin: 34px 0 0; padding: 20px 20px 22px; border: 1px solid var(--line2); border-radius: 18px;
  background: radial-gradient(ellipse at 50% 0%, rgba(79,140,255,.09), rgba(79,140,255,0) 55%), linear-gradient(180deg, #0C0F14, #07080B); }
.p2-board::before { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: .5;
  background-image: radial-gradient(rgba(255,255,255,.07) 1px, transparent 1.2px); background-size: 22px 22px;
  -webkit-mask-image: linear-gradient(180deg, #000, transparent 70%); mask-image: linear-gradient(180deg, #000, transparent 70%); }
.p2-bh { position: relative; display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 14px 28px; margin: 0 0 18px; }
.p2-bh-l { min-width: 0; flex: 1 1 420px; }
.p2-k { display: flex; align-items: center; margin: 0; font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--ink3); }
.p2-bh h2, .p2-h2 { margin: 6px 0 6px; font-size: 24px; line-height: 1.2; }
.p2-sub { margin: 0; max-width: 78ch; font-size: 14px; line-height: 1.55; color: var(--ink3); }
.p2-sw { flex: 0 1 auto; min-width: 0; }
.p2-sw-l { margin: 0 0 6px; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink3); }
.p2-sw-b { display: inline-flex; border: 1px solid var(--line2); border-radius: 12px; padding: 3px; background: rgba(5,6,8,.75); gap: 2px; }
.p2-sw-b button { display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 76px; padding: 7px 12px; border: 0; border-radius: 9px;
  background: none; color: var(--ink3); font: inherit; font-size: 11.5px; cursor: pointer; transition: background .2s, color .2s, box-shadow .2s; }
.p2-sw-b button b { font-size: 12.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink2); }
.p2-sw-b button:hover b, .p2-sw-b button:hover { color: var(--ink); }
.p2-sw-b button[aria-pressed="true"] { color: var(--ink); background: var(--blue-dim); box-shadow: 0 0 16px rgba(79,140,255,.35); }
.p2-sw-b button[aria-pressed="true"] b { color: #fff; }
.p2-sw-b button:focus-visible { outline: 2px solid var(--blue); outline-offset: 1px; }
.p2-st { min-height: 1.5em; margin: 7px 0 0; font-size: 11.5px; color: var(--ink3); }
.p2-st b { color: var(--ink); font-weight: 700; }

.p2-grid { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.p2-m { position: relative; display: flex; flex-direction: column; min-width: 0; padding: 18px 16px 14px; border-radius: 13px; border: 1px solid #262D38;
  background: linear-gradient(180deg, #10141A 0%, #0B0E12 100%); box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
  transition: opacity .35s ease, filter .35s ease, border-color .35s ease, box-shadow .35s ease; }
/* the chip's pins along its top edge, as on /sources' modules */
.p2-pins { position: absolute; left: 16px; right: 16px; top: -4px; height: 7px; pointer-events: none; opacity: .65;
  background: repeating-linear-gradient(90deg, #3A4352 0 5px, transparent 5px 13px);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
.p2-mh { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; }
.p2-mk { flex: 1; min-width: 0; display: flex; align-items: baseline; gap: 8px; margin: 0; font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase; color: #C9D0DA; }
.p2-no { color: var(--ink3); letter-spacing: .06em; }
.p2-tag { flex: none; padding: 2px 8px; border-radius: 999px; border: 1px solid var(--blue-dim); color: var(--blue); font-size: 11px; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; cursor: help; }
.p2-mled { flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--ink4); }
.p2-n { display: flex; align-items: baseline; flex-wrap: wrap; gap: 2px 10px; margin: 0 0 8px; color: var(--ink3); font-size: 13px; line-height: 1.35; }
.p2-n b { font-size: 30px; font-weight: 700; color: var(--ink); letter-spacing: -.01em; text-shadow: 0 0 18px rgba(79,140,255,.35); }
.p2-say { margin: 0 0 12px; font-size: 13.5px; line-height: 1.5; color: var(--ink2); }
.p2-lock { display: flex; align-items: flex-start; gap: 8px; margin: auto 0 0; padding-top: 12px; border-top: 1px dashed #262D38; font-size: 11.5px; line-height: 1.45;
  color: var(--ink2); }
.p2-lock .ic { flex: none; width: 12px; height: 12px; margin-top: 2px; color: var(--blue); }
.p2-mf { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 12px; margin: 10px 0 0; }
.p2-go { color: var(--blue); font-size: 12px; font-weight: 700; letter-spacing: .04em; text-decoration: none; }
.p2-go:hover { text-decoration: underline; }
.p2-asof { margin: 0; font-size: 11px; color: var(--ink3); letter-spacing: .04em; }
.p2-asof time { font-size: inherit; }
.p2-more, .p2-free, .p2-note { margin: 8px 0 0; font-size: 11.5px; line-height: 1.45; color: var(--ink3); }
.p2-more a, .p2-free a { color: var(--ink2); }
.p2-note { margin: 6px 0 10px; }
.p2-need { display: none; flex: none; padding: 2px 9px; border-radius: 999px; border: 1px solid var(--line2); color: var(--ink2); font-size: 11px;
  letter-spacing: .06em; white-space: nowrap; }
/* the plan switcher (pricing2.js): what the picked plan unlocks stays lit, the rest dims and says which plan has it */
.p2-js .p2-m.p2-off { opacity: .42; filter: saturate(.3); }
.p2-js .p2-m.p2-off .p2-need { display: inline-block; }
.p2-js .p2-m.p2-off .p2-tag { display: none; }
.p2-js .p2-m.p2-on { border-color: rgba(79,140,255,.42); box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 0 0 1px rgba(79,140,255,.12), 0 16px 40px -26px rgba(79,140,255,.7); }
.p2-js .p2-m.p2-on .p2-mled, .p2-m .p2-mled { background: var(--blue); box-shadow: 0 0 8px var(--blue); }
.p2-js .p2-m.p2-off .p2-mled { background: var(--ink4); box-shadow: none; }

/* 01 exit alerts: a sketch, never data (the template says so under it) */
.p2-ex { position: relative; height: 118px; margin: 2px 0 0; border-radius: 10px; border: 1px solid #1F252F; background: rgba(5,6,8,.5); overflow: hidden; }
.p2-ex-svg { position: absolute; inset: 6px 8px; width: calc(100% - 16px); height: calc(100% - 12px); overflow: visible; }
.p2-ex-cloud { fill: rgba(79,140,255,.16); stroke: rgba(79,140,255,.25); stroke-width: 1; filter: blur(2px); }
.p2-ex-you { fill: none; stroke: var(--blue); stroke-width: 2.4; stroke-linecap: round; vector-effect: non-scaling-stroke; filter: drop-shadow(0 0 4px rgba(79,140,255,.8)); }
.p2-ex-dot { fill: #fff; stroke: var(--blue); stroke-width: 2; vector-effect: non-scaling-stroke; }
.p2-ex-x { stroke: var(--gold); stroke-width: 1.4; stroke-dasharray: 4 4; vector-effect: non-scaling-stroke; opacity: .85; }
.p2-ex-l { position: absolute; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink3); pointer-events: none; }
.p2-ex-l1 { left: 12px; bottom: 8px; }
.p2-ex-l2 { left: 12px; top: 9px; color: var(--blue); }
.p2-ex-l3 { right: 10px; top: 9px; display: inline-flex; align-items: center; gap: 6px; color: var(--gold); }
.p2-ex-l3 .ic { width: 11px; height: 11px; }
.p2-ex-l3 .p2-ph { width: 34px; height: 9px; }

/* 02 instant alerts: the feed, newest first; pricing2.js lights one row at a time like a phone */
.p2-feed { display: grid; gap: 6px; margin: 0 0 10px; padding: 0; list-style: none; }
.p2-fi, .p2-trig li { position: relative; display: flex; align-items: center; gap: 8px; min-width: 0; padding: 7px 10px; border-radius: 9px; border: 1px solid #1F252F;
  background: rgba(5,6,8,.45); font-size: 13px; color: var(--ink2); transition: border-color .4s ease, background .4s ease, box-shadow .4s ease; }
.p2-fi .ccbdg { flex: none; padding: 2px 7px; }
.p2-fw { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.p2-fw a { color: var(--ink); font-weight: 700; text-decoration: none; }
.p2-fw a:hover { color: var(--blue); }
.p2-fi time, .p2-trig time { flex: none; font-size: 11.5px; color: var(--ink3); }
.p2-fb { flex: none; display: inline-flex; color: var(--ink4); transition: color .3s; }
.p2-fb .ic { width: 13px; height: 13px; }
.p2-fi.p2-new { border-color: rgba(79,140,255,.5); background: rgba(79,140,255,.08); box-shadow: 0 0 18px -6px rgba(79,140,255,.6); }
.p2-fi.p2-new .p2-fb { color: var(--blue); }
.p2-parts { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 0 0 4px; font-size: 11.5px; color: var(--ink3); }
.p2-parts b { color: var(--ink); }
.p2-parts .dim b { color: var(--ink3); }

/* 03 levels and 05 the strategy book: rows of a locked table */
.p2-tbl, .p2-book { display: grid; gap: 4px; }
.p2-tr { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, .9fr); align-items: center; gap: 10px;
  padding: 7px 10px; border-radius: 8px; background: rgba(5,6,8,.45); border: 1px solid #1B2028; font-size: 13px; color: var(--ink2); }
.p2-tr > span { min-width: 0; }
.p2-tr a { color: var(--ink); font-weight: 700; text-decoration: none; }
.p2-tr a:hover { color: var(--blue); }
.p2-tr small { font-size: 11.5px; color: var(--ink3); white-space: nowrap; }
.p2-tr .p2-ph { width: 82%; }
.p2-th { padding-top: 0; padding-bottom: 2px; background: none; border-color: transparent; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink3); }
.p2-tbl .p2-tr > span:last-child { text-align: right; }

/* 04 setups and drivers that triggered */
.p2-trig { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.p2-trig .p2-fb { color: var(--gold); }

/* 06 the API: an alert as JSON, its numbers locked */
.p2-code { margin: 0; padding: 12px 14px; border-radius: 10px; border: 1px solid #1F252F; background: #07090C; font-size: 12.5px; line-height: 1.65;
  color: var(--ink3); white-space: pre; overflow-x: auto; }
.p2-code code { font: inherit; }
.p2-cl { display: inline; }
.p2-jk { color: var(--steel); }
.p2-js { color: var(--ink); }
.p2-jn { color: var(--ink); }
.p2-code .p2-ph { width: 46px; height: 10px; vertical-align: -1px; }
.p2-caret { display: inline-block; width: 7px; height: 14px; margin-left: 4px; vertical-align: -2px; background: var(--blue); }

/* ------------------------------------------------------------------------------------------------ the plans */
.p2-h2 { margin: 6px 0 4px; }
.p2-board + .prp { margin-top: 44px; }
.prp > .p2-h2 { margin: 10px 0 -12px; }
.p2-pu { margin: 12px 0 0; font-size: 11.5px; color: var(--ink3); }
.p2-swipe { display: none; margin: -14px 0 0; font-size: 11.5px; color: var(--ink3); }
.p2-pu a { color: var(--ink2); text-decoration: none; border-bottom: 1px dotted var(--ink3); }
.p2-pu a:hover { color: var(--blue); border-color: var(--blue); }
.pr-plan { transition: border-color .2s ease, transform .2s ease, box-shadow .3s ease; }
.pr-plan:hover { border-color: var(--blue-dim); }
.pr-plan.p2-picked { border-color: var(--blue); box-shadow: 0 0 0 1px var(--blue) inset, 0 18px 50px -30px rgba(79,140,255,.6); }

/* ------------------------------------------------------------------------------------------------ the comparison */
.p2-cmp-w { margin: 14px 0 0; border: 1px solid var(--line2); border-radius: 16px; background: var(--bg2); overflow: hidden; }
.p2-ct { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.p2-ct th, .p2-ct td { padding: 11px 14px; border-bottom: 1px solid var(--line); text-align: center; vertical-align: middle; white-space: normal;
  background: none; font-family: var(--sans); font-size: 13.5px; letter-spacing: 0; text-transform: none; font-weight: 500; color: var(--ink2); }
.p2-ct .mono { font-family: var(--mono); font-size: 13px; color: var(--ink); }
.p2-ct tbody th { text-align: left; font-weight: 500; color: var(--ink2); width: 34%; }
.p2-ct thead th { padding-top: 16px; padding-bottom: 14px; }
.p2-ct thead th span { display: block; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink2); }
.p2-ct thead th b { display: block; margin-top: 4px; font-size: 24px; color: var(--ink); }
.p2-ct thead th small { display: block; font-size: 11px; color: var(--ink3); }
.p2-ct .p2-top { background: rgba(79,140,255,.06); }
.p2-ct thead th.p2-top span { color: var(--blue); }
.p2-ct tr:last-child td, .p2-ct tr:last-child th { border-bottom: 0; }
.p2-ct tbody tr:hover th, .p2-ct tbody tr:hover td { background-color: rgba(255,255,255,.015); }
.p2-cr-price td { font-size: 13px; color: var(--ink); }
.p2-cr-price td small { font-size: 11px; color: var(--ink3); }
.p2-yes { display: inline-flex; color: var(--blue); }
.p2-yes .ic { width: 15px; height: 15px; }
.p2-dash { color: var(--ink4); }
.p2-v { color: var(--ink); font-weight: 600; }
.p2-see { display: inline-block; margin-left: 6px; padding: 0 6px; border-radius: 999px; border: 1px solid var(--blue-dim); color: var(--blue); font-size: 11px;
  line-height: 18px; text-decoration: none; vertical-align: 1px; }
.p2-see:hover { background: rgba(79,140,255,.12); }
.p2-cr-go td { padding-top: 14px; padding-bottom: 16px; }
.p2-ct a.p2-go { color: var(--blue); font-size: 12px; }
.p2-ct a.p2-go:hover { color: #8FB4FF; }
.p2-c0 { border-bottom-color: transparent; }

/* ------------------------------------------------------------------------------------------------ the lab behind it */
.p2-lab { position: relative; padding: 20px 22px 18px; border: 1px solid var(--line2); border-radius: 18px;
  background: radial-gradient(ellipse at 85% 0%, rgba(79,140,255,.08), rgba(79,140,255,0) 55%), linear-gradient(180deg, #0C0F14, #08090C); }
.p2-lab-g { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 18px 34px; align-items: start; margin: 12px 0 0; }
.p2-big { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; margin: 0 0 10px; color: var(--ink3); font-size: 14px; }
.p2-big b { font-size: 46px; font-weight: 700; color: var(--ink); letter-spacing: -.02em; line-height: 1; text-shadow: 0 0 26px rgba(79,140,255,.45); }
.p2-stats { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; font-size: 14px; color: var(--ink2); }
.p2-stats li { line-height: 1.5; }
.p2-stats b { color: var(--ink); font-size: 15px; margin-right: 4px; }
.p2-stats .vb { margin-right: 6px; vertical-align: 1px; }
.p2-nk { margin: 0 0 8px; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink3); }
.p2-bars { display: flex; align-items: flex-end; justify-content: flex-end; gap: 4px; height: 112px; padding: 8px 8px 0; border-radius: 10px; border: 1px solid #1F252F;
  background: repeating-linear-gradient(0deg, rgba(255,255,255,.03) 0 1px, transparent 1px 28px), rgba(5,6,8,.5); }
.p2-bars i { flex: 1 1 0; max-width: 36px; height: var(--h, 4%); min-height: 3px; border-radius: 3px 3px 0 0; transform-origin: bottom;
  background: linear-gradient(180deg, var(--blue), rgba(79,140,255,.35)); box-shadow: 0 0 10px rgba(79,140,255,.35); cursor: help; }
.p2-bars i:hover { background: linear-gradient(180deg, #8FB4FF, rgba(79,140,255,.5)); }
.p2-stages { display: flex; flex-wrap: wrap; gap: 6px 8px; margin: 10px 0 0; padding: 0; list-style: none; font-size: 11.5px; color: var(--ink3); }
.p2-stages li { display: inline-flex; align-items: baseline; gap: 6px; padding: 4px 9px; border-radius: 999px; border: 1px solid var(--line2); background: rgba(5,6,8,.5); }
.p2-stages b { color: var(--ink); }
.p2-cards { margin: 18px 0 0; }
.p2-cards-r { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.p2-card { display: block; border-radius: 10px; overflow: hidden; border: 1px solid var(--line2); transition: transform .2s ease, border-color .2s ease; }
.p2-card:hover { transform: translateY(-2px); border-color: var(--blue-dim); }
.p2-card img { display: block; width: 100%; height: auto; }
.p2-lab-f { margin: 14px 0 0; font-size: 12px; color: var(--ink3); }
.p2-lab-f a { color: var(--ink2); }

/* ------------------------------------------------------------------------------------------------ the waitlist and the questions */
.p2-pick { margin: 2px 0 0; font-size: 12px; color: var(--ink2); }
.wl-done .p2-pick { display: none; }
.p2-faq { max-width: none; }
.p2-qs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 14px; margin: 12px 0 0; align-items: start; }
.p2-q { border: 1px solid var(--line2); border-radius: 12px; background: var(--bg2); }
.p2-q summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px; cursor: pointer; list-style: none; }
.p2-q summary::-webkit-details-marker { display: none; }
.p2-q summary::after { content: "+"; flex: none; font-family: var(--mono); font-size: 18px; line-height: 1; color: var(--blue); transition: transform .2s ease; }
.p2-q[open] summary::after { transform: rotate(45deg); }
.p2-q summary:focus-visible { outline: 2px solid var(--blue); outline-offset: -2px; border-radius: 12px; }
.pr-faq .p2-q h3 { margin: 0; font-size: 15px; line-height: 1.35; }
.pr-faq .p2-q p { margin: 0; padding: 0 16px 15px; font-size: 14px; line-height: 1.6; color: var(--ink2); }

/* ------------------------------------------------------------------------------------------------ narrower screens */
@media (max-width: 1100px) {
  .p2-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .p2-lab-g { grid-template-columns: minmax(0, 1fr); }
  .p2-qs { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 760px) {
  .p2-board { margin-top: 26px; padding: 16px 12px 14px; border-radius: 16px; }
  .p2-grid { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .p2-sw { width: 100%; }
  .p2-sw-b { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); width: 100%; }
  .p2-sw-b button { min-width: 0; padding: 7px 4px; }
  .p2-bh h2, .p2-h2 { font-size: 21px; }
  .p2-hud { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; gap: 8px 10px; border-radius: 12px; padding: 10px 12px; letter-spacing: .06em; }
  .p2-hud-k { grid-column: 1 / -1; }
  .p2-hud > span + span::before { content: none; }
  .p2-hud > span:not(.p2-hud-k) { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
  .p2-hud b { font-size: 16px; }
  .p2-lab { padding: 16px 12px 14px; }
  .p2-big b { font-size: 38px; }
  .p2-cards-r { grid-template-columns: minmax(0, 1fr); }
  .p2-cards-r .p2-card:nth-child(n + 2) { display: none; }
  /* the four plans side by side, swiped: one card and the edge of the next (pricing2.js brings the picked one in) */
  .pr-plans { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 86%; gap: 12px; overflow-x: auto; overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory; scrollbar-width: none; padding: 2px 2px 8px; margin: 0 -2px; align-items: start; }
  .pr-plans::-webkit-scrollbar { display: none; }
  .pr-plans .pr-plan { scroll-snap-align: start; }
  .p2-swipe { display: block; }
  /* the comparison: each row is its label, then the four plans side by side under the sticky head */
  .p2-cmp-w { overflow: visible; border-radius: 14px; }
  .p2-ct, .p2-ct thead, .p2-ct tbody, .p2-ct tr, .p2-ct th, .p2-ct td { display: block; }
  .p2-ct tr { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-bottom: 1px solid var(--line); }
  .p2-ct th, .p2-ct td { border-bottom: 0; padding: 8px 4px; }
  .p2-ct tbody th { grid-column: 1 / -1; width: auto; padding: 11px 10px 0; font-size: 13.5px; color: var(--ink); }
  .p2-ct .p2-c0 { display: none; }
  .p2-ct thead { position: sticky; top: calc(var(--mast-h) + var(--ribh)); z-index: 2; }
  .p2-ct thead tr { background: var(--bg2); border-radius: 14px 14px 0 0; box-shadow: 0 6px 16px -10px rgba(0,0,0,.8); }
  .p2-ct thead th { padding: 12px 2px 10px; }
  .p2-ct thead th span { font-size: 11.5px; letter-spacing: .08em; }
  .p2-ct thead th b { font-size: 17px; }
  .p2-ct td { font-size: 12.5px; line-height: 1.3; }
  .p2-ct .p2-cr-go td { padding: 10px 2px 14px; }
  .p2-ct a.p2-go { font-size: 11.5px; }
  .p2-ct tr:last-child { border-bottom: 0; }
}
@media (max-width: 600px) {          /* the phone floor: last, so it wins */
  .p2-k, .p2-sw-l, .p2-nk { font-size: 11.5px; letter-spacing: .12em; }
  .p2-ping-k, .p2-ping-l dt, .p2-tag, .p2-asof, .p2-ex-l, .p2-th, .p2-js .p2-m.p2-off .p2-need, .p2-ct thead th small,
  .p2-cr-price td small, .p2-see, .p2-stages, .p2-mk { font-size: 11.5px; letter-spacing: .06em; }
  .pr-tag, .wl-l, .wl-l .dim, .wl-fine, .wl-fine a { font-size: 11.5px; }     /* the form's own small print, lifted to the floor */
  .p2-btn, .p2-ghost { flex: 1 1 100%; justify-content: center; }
  .p2-hero h1 { font-size: 31px; }
  .p2-ping { padding: 14px 14px 12px; }
  .p2-ping-l { gap: 6px; }
  .p2-ping-l > div { padding: 8px 8px; }
  .p2-tr { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, .8fr); gap: 8px; padding: 7px 8px; font-size: 12.5px; }
  .p2-n b { font-size: 27px; }
  .p2-code { font-size: 12px; padding: 10px 10px; }
  .p2-fi, .p2-trig li { font-size: 12.5px; padding: 7px 8px; }
}

/* ------------------------------------------------------------------------------------------------ motion */
@media (prefers-reduced-motion: no-preference) {
  .p2-wait .p2-m { opacity: 0; }                     /* below the fold until it boots (pricing2.js onView) */
  .p2-wait .p2-bars i { transform: scaleY(0); }
  .p2-led { animation: p2-blink 1.6s ease-in-out infinite; }
  .p2-in .p2-ph::after, .p2-ping .p2-ph::after { content: ""; position: absolute; inset: 0; transform: translateX(-100%);
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.35), transparent); animation: p2-sheen 2.6s ease-in-out infinite; }
  .p2-in .p2-tr:nth-child(2n) .p2-ph::after { animation-delay: .4s; }
  .p2-in .p2-tr:nth-child(3n) .p2-ph::after { animation-delay: .8s; }
  .p2-bell { animation: p2-ring 3.2s ease-in-out infinite; transform-origin: 50% 20%; }
  .p2-bell::after { content: ""; position: absolute; inset: -1px; border-radius: inherit; border: 1px solid var(--blue); animation: p2-halo 3.2s ease-out infinite; }
  .p2-in .p2-m { animation: p2-up .55s ease-out backwards; animation-delay: calc(var(--i, 0) * 90ms); }
  .p2-js .p2-m.p2-boot { animation: p2-boot .9s ease-out; }
  .p2-js .p2-m.p2-boot .p2-mled { animation: p2-blink .3s steps(2, start) 3; }
  .p2-in .p2-ex-you { stroke-dasharray: 320; stroke-dashoffset: 320; animation: p2-draw 2.4s ease-out .3s forwards; }
  .p2-in .p2-ex-dot { opacity: 0; animation: p2-pop .4s ease-out 2.5s forwards, p2-pulse 1.8s ease-in-out 3s infinite; transform-box: fill-box; transform-origin: center; }
  .p2-in .p2-ex-x { animation: p2-dash 1.2s linear infinite; }
  .p2-in .p2-cl { animation: p2-type .3s ease-out backwards; }
  .p2-in .p2-cl:nth-child(2) { animation-delay: .15s; } .p2-in .p2-cl:nth-child(3) { animation-delay: .3s; }
  .p2-in .p2-cl:nth-child(4) { animation-delay: .45s; } .p2-in .p2-cl:nth-child(5) { animation-delay: .6s; }
  .p2-in .p2-cl:nth-child(6) { animation-delay: .75s; } .p2-in .p2-cl:nth-child(7) { animation-delay: .9s; }
  .p2-in .p2-cl:nth-child(8) { animation-delay: 1.05s; }
  .p2-caret { animation: p2-blink 1s steps(2, start) infinite; }
  .p2-in .p2-bars i { animation: p2-grow .7s cubic-bezier(.2, .8, .2, 1) backwards; animation-delay: calc(var(--j, 0) * 35ms + .1s); }
  .pr-top { animation: p2-glow 4s ease-in-out infinite; }
}
@media (prefers-reduced-motion: reduce) {          /* still: no transition either, and no lift on hover */
  .p2-btn, .p2-ghost, .p2-sw-b button, .p2-m, .p2-fi, .p2-trig li, .p2-fb, .pr-plan, .p2-card, .p2-q summary::after { transition: none; }
  .p2-btn:hover, .p2-card:hover { transform: none; }
}
@keyframes p2-blink { 50% { opacity: .35; } }
@keyframes p2-sheen { 0% { transform: translateX(-100%); } 60%, 100% { transform: translateX(100%); } }
@keyframes p2-ring { 0%, 70%, 100% { transform: rotate(0); } 74% { transform: rotate(-12deg); } 80% { transform: rotate(10deg); } 86% { transform: rotate(-6deg); } 92% { transform: rotate(3deg); } }
@keyframes p2-halo { 0%, 68% { opacity: 0; transform: scale(1); } 72% { opacity: .9; } 100% { opacity: 0; transform: scale(1.7); } }
@keyframes p2-up { from { opacity: 0; transform: translateY(10px); } }
@keyframes p2-boot { 0% { box-shadow: 0 0 0 1px rgba(79,140,255,.7), 0 0 30px rgba(79,140,255,.45); } 100% { } }
@keyframes p2-draw { to { stroke-dashoffset: 0; } }
@keyframes p2-pop { from { opacity: 0; transform: scale(.2); } to { opacity: 1; transform: scale(1); } }
@keyframes p2-pulse { 50% { transform: scale(1.35); } }
@keyframes p2-dash { to { stroke-dashoffset: -16; } }
@keyframes p2-type { from { opacity: 0; } }
@keyframes p2-grow { from { transform: scaleY(0); } }
@keyframes p2-glow { 50% { box-shadow: 0 0 0 1px var(--blue) inset, 0 18px 60px -24px rgba(79,140,255,.85); } }