/* ============================================================================
   landing.css — the marketing page at the domain root.
   ----------------------------------------------------------------------------
   HOUSE STYLE, NOT APP STYLE. This page belongs to the Counter.Software family
   (blackjack.counter.software, videopoker.counter.software), not to the
   trainer's own terminal design system. The family look is: near-black ground,
   a single suit-derived accent carrying every heading, the system UI stack at
   weight 800 in sentence case with tight negative tracking, and small tracked
   uppercase eyebrows over each section.

   THE ACCENT IS THE PRODUCT'S SUIT. Counter.Software's mark is four suits, and
   each product takes its own: spade purple for Blackjack, diamond blue for
   Video Poker, HEART YELLOW here. That is the same #FACC15 the trainer already
   uses as --accent, so the page and the app finally agree on one colour.

   This file is self-contained on purpose — it does NOT import the trainer's
   tokens. The app is a dense terminal for someone who already bought in; this
   is a page read once by someone who has not.
   ============================================================================ */

:root{
  /* ground + panels, from the family palette */
  --bg:#0a0d13; --bg1:#0d1320; --bg2:#101826;
  --panel:#141b28; --panel2:#1a2334; --panel3:#1b2334;
  --line:#26314a; --line2:#33405f;

  /* type colours */
  --ink:#e8ecf4; --text:#c3cbdb; --dim:#93a0b8; --faint:#7c8aa8;

  /* HEART YELLOW — this product's suit */
  --accent:#facc15; --accent2:#fde68a; --accent-brd:#8a6d10; --on-accent:#20180a;
  --accent-dim:rgba(250,204,21,.12);

  /* the other three suits, used only as suit glyphs */
  --suit-s:#a855f7; --suit-h:#facc15; --suit-d:#3b82f6; --suit-c:#22c55e;

  /* semantic */
  --green:#2ecc8f; --red:#e5484d; --warn:#eab308;

  --ui:"Segoe UI",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  /* 1168, not 1120, because .lp-wrap's 24px of padding a side comes out of it:
     the CONTENT band is what has to match, and Blackjack's masthead and every
     section of Video Poker's page put their content in a 1120px band centred at
     72.5px on a 1265px viewport. Measured here before this: 1072px at 96.5px,
     so the account buttons on this page sat 24px inside where the same buttons
     sit on the other two. One variable, and the masthead and every section
     below it move together — the alternative, capping only the masthead, buys
     the match across sites at the cost of a 24px step against this page's own
     content. */
  --max:1168px;
  --r:14px;

  /* THE RANGE GRID'S COLOURS, DELIBERATELY NOT THE APP'S.
     .claude/gen_landing.js emits the grid through the trainer's own Core.gradientFor, so
     each cell's fill literally reads
     `linear-gradient(..., var(--act-raise-2) 0% 62%, var(--act-call) 62% 100%)`.
     Redefining those tokens here recolours all 169 cells without touching the emitter or
     the data — the mix shown is still the solver's.

     The app uses saturated red for raise and green for call, which is right inside a dense
     terminal where the whole UI is that language. Dropped onto a near-black-and-gold
     marketing page it is 169 cells of screaming red and green, and it was by some distance
     the ugliest thing here. So the grid speaks the PAGE's palette instead: heart yellow for
     the aggressive action, muted slate for the passive one — the same pairing the hero's
     frequency bar already uses, so the two read as one idea. */
  --act-call:#3c4a63;                 /* passive: muted slate, same as .lp-bar .b */
  --act-raise-1:#fde68a; --act-raise-2:#facc15; --act-raise-3:#d9a90f; --act-raise-4:#a37f08;
  --act-raise:var(--act-raise-2);
  --act-fold:#2a3346;                 /* folded-out portion, barely above the panel */
  --act-fold-text:#7E93A8; --act-raise-text:var(--act-raise-2);
  /* the color-mix in Core's FOLD_MUTED resolves against this */
  --bg-1:#10141A; --bg-2:#161B23;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--text);font:400 16px/1.65 var(--ui);
  -webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit}

.lp-wrap{max-width:var(--max);margin:0 auto;padding:0 24px}
.lp-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.lp-skip{position:absolute;left:-9999px;top:0;z-index:20;padding:10px 16px;background:var(--panel);border:1px solid var(--accent);border-radius:8px;color:var(--ink);text-decoration:none}
.lp-skip:focus{left:16px;top:16px}

/* ------------------------------------------------------------- masthead --- */
.lp-head{position:sticky;top:0;z-index:10;background:rgba(10,13,19,.88);
  backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
/* 70px + the 1px border below is 71px, which is what Blackjack's masthead measures at
   1280px: 10px of padding above and below a 50px mark. A floor rather than a fixed height,
   and wrapping rather than nowrap, because the mark this bar now carries is 48px and the
   wordmark 21px — together 337px, which does not fit beside Launch trainer on a phone.
   Blackjack solves that by wrapping to two rows, measured 119px at 390px, and this does the
   same. At 1280px nothing wraps and the floor is what sets the height. */
.lp-head-in{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;
  gap:10px 20px;min-height:70px;padding-top:10px;padding-bottom:10px}
/* min-width:0 + overflow let the wordmark TRUNCATE instead of forcing the header wider than
   the viewport. Without it the 397px brand sat in a 375px nowrap header and the whole page
   scrolled sideways on a phone — every section inheriting the overflow, not just this one. */
/* overflow:visible, and load-bearing at every width now that the mark is 48px in a 76.8px
   box — the halo is drawn outside the tile on purpose, so a clipping .lp-brand cuts 14px off
   the top and bottom of it. The truncation this used to provide is no longer what keeps the
   header inside a 375px viewport; .lp-head-in wraps instead, and the brand gets its own row. */
.lp-brand{display:flex;align-items:center;gap:10px;text-decoration:none;font:800 13px/1 var(--ui);
  letter-spacing:.14em;text-transform:uppercase;color:var(--ink);white-space:nowrap;
  min-width:0;overflow:visible}
.lp-brand b{color:var(--accent);font-weight:800}
/* 48px box around a 26px tile — 11px of halo a side, cancelled by the negative margin so the
   header lays out exactly as it did with the 26px PNG. overflow:visible or the glow is clipped;
   no border-radius, because the tile carries its own rx and rounding the BOX would cut the
   corners off the halo. */
/* Sized by the TILE, not the box. This mark draws a 30-unit tile in a 48-unit viewBox, so
   the visible square is 30/48 of whatever the box is; Blackjack's spans 92 of 96, so its
   50px box paints a 47.9px tile. 76.8px here paints 48.0px, and the negative margin cancels
   the 14.4px of halo a side so the wordmark sits where a 48px mark would put it. */
.lp-brand-mark{width:76.8px;height:76.8px;margin:-14.4px;display:block;overflow:visible;flex:0 0 auto}
.lp-gold{color:var(--accent)}
/* Same breathing as the trainer header, same clock. transform-box:fill-box because an SVG
   element's default transform origin is the viewBox corner, not the shape. */
@keyframes lp-mark-breathe{0%,100%{opacity:.55;transform:scale(.94)}50%{opacity:1;transform:scale(1.06)}}
@keyframes lp-mark-breathe-in{0%,100%{opacity:.5}50%{opacity:1}}
.lp-mark-halo{transform-box:fill-box;transform-origin:center;animation:lp-mark-breathe 3.4s ease-in-out infinite}
.lp-mark-inner{transform-box:fill-box;transform-origin:center;animation:lp-mark-breathe-in 3.4s ease-in-out infinite}
@media (prefers-reduced-motion:reduce){.lp-mark-halo,.lp-mark-inner{animation:none;opacity:.85}}
.lp-nav{display:none;gap:26px;font-size:14px;color:var(--dim)}
.lp-nav a{text-decoration:none}
.lp-nav a:hover{color:var(--ink)}

/* --------------------------------------------------------------- bits ----- */
.lp-eyebrow{margin:0 0 18px;font:700 12px/1 var(--ui);letter-spacing:.12em;
  text-transform:uppercase;color:var(--faint)}
.lp-eyebrow--accent{color:var(--accent)}
h1,h2,h3{color:var(--accent2);font-family:var(--ui);font-weight:800;margin:0}
h1{font-size:clamp(34px,5.6vw,54px);line-height:1.08;letter-spacing:-.015em}
h2{font-size:clamp(26px,3.9vw,38px);line-height:1.14;letter-spacing:-.01em;margin-bottom:16px}
h3{font-size:17px;line-height:1.3;letter-spacing:-.005em;color:var(--ink)}
.lp-lead{margin:20px 0 0;font-size:clamp(16px,2.1vw,19px);line-height:1.6;color:var(--text);max-width:60ch}
p{margin:0 0 14px}

.lp-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  height:48px;padding:0 26px;border-radius:10px;font:700 15px/1 var(--ui);
  text-decoration:none;cursor:pointer;border:1px solid transparent;
  transition:background .12s ease,border-color .12s ease,transform .12s ease}
.lp-btn--primary{background:var(--accent);color:var(--on-accent);border-color:var(--accent)}
.lp-btn--primary:hover{background:var(--accent2)}
.lp-btn--ghost{background:transparent;color:var(--ink);border-color:var(--line2)}
.lp-btn--ghost:hover{border-color:var(--accent);color:var(--accent2)}
.lp-btn:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

/* --------------------------------------------------------- account cluster ---
   The same controls in the same place as Blackjack and Video Poker: hard right
   in the masthead, 10px between, buttons 40px tall at 14px/500 with a 6px
   radius and 0 16px of padding. These deliberately do NOT reuse .lp-btn — that
   is this page's own 48px/15px/10px button and it is used all down the page.
   Matching the other two sites means matching their numbers, not this one's.
   Two slots: Sign in, which becomes the account control once
   accounts.counter.software says who you are, and Sign up, which is inert. */
.lp-auth{display:flex;align-items:center;gap:10px;flex:0 0 auto}
.lp-auth-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  height:40px;padding:0 16px;border-radius:6px;box-sizing:border-box;
  font-family:var(--ui);font-size:14px;font-weight:500;letter-spacing:.01em;
  background:var(--panel);border:1px solid rgba(232,236,244,.18);color:var(--ink);
  text-decoration:none;cursor:pointer;white-space:nowrap}
.lp-auth-btn:hover{border-color:var(--line2);color:#fff}
.lp-auth-btn--primary{background:var(--accent);border-color:transparent;color:var(--on-accent);font-weight:700}
.lp-auth-btn--primary:hover{color:var(--on-accent)}
/* Inert, and it has to LOOK inert or it is a lie about what the page can do.
   Registration is closed before launch — accounts are minted from a paid grant,
   not by open signup. The 55% also keeps it from competing with Launch trainer,
   which is the live accent button immediately to its left. */
.lp-auth-btn[disabled]{opacity:.55;cursor:default}
.lp-auth-btn[disabled]:hover{border-color:transparent}
/* Locked, which is a different thing from inert. Sign up is disabled because the
   flow does not exist; Launch trainer is grey because it is not yours yet and one
   sign-in away from being accent. Stated after --primary so it wins on order
   rather than on a fight about specificity, and it repaints all three of
   background, border and text: dropping opacity alone on an accent button leaves
   a washed-out accent that still reads as the thing to press. */
.lp-auth-btn.is-locked,
.lp-auth-btn.is-locked:hover{
  background:var(--panel);border-color:rgba(232,236,244,.14);color:var(--faint);
  font-weight:500;cursor:default}
/* Everything after the leftmost control goes right, so brand and Launch trainer
   stay together against the left edge. .lp-head-in is space-between, which would
   otherwise spread four children across the bar and strand this one near a third
   of the way in. */
.lp-head-in > .lp-auth-btn{margin-right:auto}
.lp-auth-btn:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
/* The signed-in control. Same box as Sign in, with the name in it and a menu
   under it. position:relative on the wrapper, not the button, so the menu hangs
   off the cluster rather than being bounded by the button. */
.lp-acct{position:relative;display:flex;flex:0 0 auto}
/* Who you are, above the menu's actions rather than on the button. Not a
   menuitem: it is a label, and putting it in the roving focus order would give
   keyboard users a stop that does nothing. */
.lp-acct-who{padding:8px 11px 9px;margin-bottom:4px;border-bottom:1px solid var(--line);
  font:700 11px/1.3 var(--ui);letter-spacing:.1em;text-transform:uppercase;color:var(--faint)}
.lp-acct-who::before{content:'Signed in as '}
.lp-acct-who span{display:block;margin-top:3px;font:400 13.5px/1.3 var(--ui);letter-spacing:0;
  text-transform:none;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lp-acct-menu{position:absolute;top:calc(100% + 6px);right:0;min-width:190px;
  background:var(--panel);border:1px solid var(--line2);border-radius:9px;
  box-shadow:0 18px 40px rgba(0,0,0,.55);padding:6px;display:none;z-index:40}
.lp-acct-menu.open{display:block}
.lp-acct-menu button,.lp-acct-menu a{display:block;width:100%;box-sizing:border-box;text-align:left;
  background:none;border:0;border-radius:6px;padding:9px 11px;
  font:400 13.5px/1.3 var(--ui);color:var(--text);text-decoration:none;cursor:pointer}
.lp-acct-menu button:hover,.lp-acct-menu a:hover{background:var(--panel2);color:var(--ink)}

.lp-ctas{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}
.lp-trust{margin:20px 0 0;font-size:13.5px;color:var(--faint)}

/* --------------------------------------------------------------- hero ----- */
.lp-hero{padding:72px 0 8px;position:relative;overflow:hidden}
/* one soft accent bloom, the family's only decorative flourish */
.lp-hero::before{content:'';position:absolute;top:-220px;left:50%;transform:translateX(-50%);
  width:900px;height:520px;background:radial-gradient(ellipse at center,rgba(250,204,21,.10),transparent 68%);
  pointer-events:none}
.lp-hero-in{position:relative}



/* -------------------------------------------------- the product, for real ----- */
/* THIS BLOCK DELIBERATELY BREAKS HOUSE STYLE. Everything else on this page is
   Counter.Software family look; this one panel is the TRAINER's look, because its job
   is to answer "what am I actually buying" and a house-styled abstraction answered that
   question wrong. So it carries the app's own ground, its own IBM Plex, its own dense
   terminal chrome — the values here were read off the running app's computed styles, not
   invented. Treat it as a screenshot that happens to be made of text: it must keep looking
   like the app, so if the app's chrome changes, change it here too.

   The MARKUP is emitted by .claude/gen_landing.js from data.js, so the numbers inside
   cannot drift from the shipped strategy table. Static — no JS, nothing interactive. */
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:500;font-display:swap;
  src:url('../assets/fonts/IBMPlexSans-Medium.woff2') format('woff2')}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:600;font-display:swap;
  src:url('../assets/fonts/IBMPlexSans-SemiBold.woff2') format('woff2')}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;
  src:url('../assets/fonts/IBMPlexMono-Medium.woff2') format('woff2')}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:600;font-display:swap;
  src:url('../assets/fonts/IBMPlexMono-SemiBold.woff2') format('woff2')}

.lp-real{--a-bg:#0a0c0e;--a-panel:#10141a;--a-line:#20272f;--a-line2:#2b3440;
  --a-ink:#e4eaf1;--a-dim:#5f6b7a;--a-mono:'IBM Plex Mono',ui-monospace,Menlo,Consolas,monospace;
  --a-sans:'IBM Plex Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
  margin:44px 0 0;background:var(--a-bg);border:1px solid var(--a-line2);border-radius:10px;
  overflow:hidden;box-shadow:0 24px 60px -30px rgba(0,0,0,.9);font-family:var(--a-sans);
  text-align:left}
.lp-real-top{display:flex;align-items:center;gap:16px;flex-wrap:wrap;padding:0 14px;height:52px;
  background:var(--a-panel);border-bottom:1px solid var(--a-line)}
.lp-real-brand{font:600 11px/1 var(--a-sans);letter-spacing:.10em;color:var(--a-dim);
  text-transform:uppercase;display:flex;gap:9px;align-items:center}
.lp-real-brand b{color:var(--accent);letter-spacing:.06em}
.lp-real-tabs{display:flex;gap:4px;margin-left:auto}
.lp-real-tabs i{font-style:normal;font:600 10.5px/1 var(--a-sans);letter-spacing:.11em;
  padding:7px 10px;border-radius:3px;color:var(--a-dim);border:1px solid transparent}
.lp-real-tabs i.is-on{color:#0b0f16;background:var(--accent);border-color:var(--accent)}

.lp-real-spot{display:flex;align-items:center;gap:20px;flex-wrap:wrap;padding:12px 14px;
  border-bottom:1px solid var(--a-line);background:#0c1014}
.lp-rf{display:flex;flex-direction:column;gap:5px;min-width:0}
.lp-rf b{font:500 10px/1 var(--a-sans);letter-spacing:.14em;text-transform:uppercase;color:var(--a-dim)}
.lp-rf{font:500 13px/1.25 var(--a-mono);color:var(--a-ink)}
.lp-rf--wide{flex:1 1 240px;min-width:180px}
.lp-rchip{margin-left:auto;align-self:center;font:600 10.5px/1 var(--a-sans);letter-spacing:.13em;
  padding:6px 9px;border-radius:2px;background:rgba(250,204,21,.14);color:var(--accent2);
  border:1px solid rgba(250,204,21,.45)}

.lp-real-stage{display:grid;gap:22px;padding:22px 16px}
@media(min-width:820px){.lp-real-stage{grid-template-columns:1.15fr 1fr;gap:28px;padding:26px 22px}}
.lp-rfelt{background:#060709;border:1px solid var(--a-line2);border-radius:96px;
  padding:22px 18px;display:flex;flex-direction:column;align-items:center;gap:14px}
.lp-rseats{display:flex;gap:6px;flex-wrap:wrap;justify-content:center}
.lp-rseat{font:500 10px/1 var(--a-mono);letter-spacing:.08em;color:var(--a-dim);
  border:1px solid var(--a-line);border-radius:3px;padding:5px 7px;display:inline-flex;gap:5px}
.lp-rseat.is-hero{color:var(--accent2);border-color:rgba(250,204,21,.45);background:rgba(250,204,21,.08)}
.lp-rseat b{color:var(--a-ink)}
.lp-rpot{font:600 10px/1 var(--a-sans);letter-spacing:.16em;color:var(--a-dim)}

.lp-rboard,.lp-rhole{display:flex;gap:7px}
.lp-rcard{width:44px;height:62px;border-radius:8px;background:#12101f;border:1px solid #56407e;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
  font:600 18px/1 var(--a-sans);color:var(--a-ink)}
.lp-rcard i{font-style:normal;font-size:15px;line-height:1}
.lp-rcard.is-big{width:62px;height:86px;border-radius:11px;font-size:25px}
.lp-rcard.is-big i{font-size:21px}
.s-h{color:var(--suit-h)}.s-s{color:var(--suit-s)}.s-d{color:var(--suit-d)}.s-c{color:var(--suit-c)}

.lp-rhand{display:flex;flex-direction:column;gap:12px;justify-content:center}
.lp-rhandlab{margin:0;font:500 11.5px/1 var(--a-mono);color:var(--a-dim)}
.lp-racts{display:flex;gap:8px;flex-wrap:wrap}
.lp-ract{display:inline-flex;align-items:center;gap:8px;height:38px;padding:0 14px;border-radius:4px;
  background:#131820;border:1px solid var(--a-line2);font:600 12px/1 var(--a-sans);
  letter-spacing:.06em;color:#9aa7ba;text-transform:uppercase}
.lp-ract.is-on{border-color:var(--accent);color:var(--accent2);background:rgba(250,204,21,.10)}
.lp-ract i{font-style:normal;display:inline-flex;align-items:center;justify-content:center;
  min-width:18px;height:18px;border-radius:3px;background:var(--a-bg);border:1px solid var(--a-line2);
  font:600 10px/1 var(--a-mono);color:var(--a-dim)}

.lp-real-reveal{display:grid;gap:18px;padding:20px 16px 22px;border-top:1px solid var(--a-line);
  background:#0c1014}
@media(min-width:820px){.lp-real-reveal{grid-template-columns:auto 1fr;gap:36px;padding:22px}}
.lp-rverdict{display:inline-flex;padding:5px 10px;border-radius:2px;font:600 10.5px/1 var(--a-sans);
  letter-spacing:.13em}
.lp-rverdict.is-mix{background:rgba(250,204,21,.14);color:var(--accent2);border:1px solid rgba(250,204,21,.4)}
.lp-rverdict.is-bad{background:rgba(229,72,77,.14);color:#ff9ea1;border:1px solid rgba(229,72,77,.45)}
.lp-rprice{margin:12px 0 0;font:600 clamp(26px,4.4vw,36px)/1 var(--a-mono);color:var(--a-ink);
  letter-spacing:-.01em;white-space:nowrap}
.lp-rprice small{display:block;margin-top:9px;font:500 10px/1 var(--a-sans);letter-spacing:.14em;
  text-transform:uppercase;color:var(--a-dim)}
.lp-rmix{margin:0 0 13px;font:400 13.5px/1.5 var(--a-sans);color:#9aa7ba}
.lp-rmix b{color:var(--a-ink);font-weight:600}
.lp-rbar{display:flex;height:30px;border-radius:4px;overflow:hidden;border:1px solid var(--a-line2)}
.lp-rbar span{display:flex;align-items:center;justify-content:center;font:600 11px/1 var(--a-mono)}
.lp-rbar .a{background:var(--accent);color:#0b0f16}
.lp-rbar .b{background:#3c4a63;color:var(--a-ink)}

.lp-shot{margin:14px 0 0;font-size:13px;color:var(--faint);text-align:center}
.lp-shot a{color:var(--accent2)}

/* ---------------------------------------------------------- stat band ----- */
.lp-stats{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;margin:56px 0 0;
  background:var(--line);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
@media(min-width:760px){.lp-stats{grid-template-columns:repeat(4,1fr)}}
.lp-stat{background:var(--bg1);padding:22px 18px;text-align:center}
.lp-stat b{display:block;font:800 clamp(26px,4vw,34px)/1 var(--ui);color:var(--accent2);letter-spacing:-.02em}
.lp-stat span{display:block;margin-top:8px;font:700 11px/1.3 var(--ui);letter-spacing:.11em;
  text-transform:uppercase;color:var(--faint)}

/* --------------------------------------------------------- provenance ----- */
/* The counts are generated from data.js, so this section cannot outlive the claim
   it makes. Deliberately NOT styled as fine print: which numbers are a solve and
   which are an approximation is a feature of the product, not a disclaimer on it. */
.lp-prov{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;margin:8px 0 0;
  background:var(--line);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
@media(min-width:820px){.lp-prov{grid-template-columns:repeat(4,1fr)}}
.lp-prov-cell{background:var(--bg1);padding:20px 16px}
.lp-prov-cell b{display:block;font:800 clamp(22px,3.4vw,30px)/1 var(--ui);color:var(--accent2);
  letter-spacing:-.02em}
.lp-prov-cell span{display:block;margin-top:8px;font:700 10.5px/1.3 var(--ui);letter-spacing:.11em;
  text-transform:uppercase;color:var(--ink)}
.lp-prov-cell em{display:block;margin-top:7px;font-style:normal;font-size:12.5px;line-height:1.45;
  color:var(--faint)}
.lp-provnote{margin:26px 0 0;display:grid;gap:14px}
@media(min-width:820px){.lp-provnote{grid-template-columns:1fr 1fr;gap:26px}}
.lp-provnote p{margin:0;font-size:14.5px;line-height:1.6;color:var(--text)}
.lp-provnote b{color:var(--ink)}
.lp-provsmall{font-size:13px !important;color:var(--faint) !important}
@media(min-width:820px){.lp-provsmall{grid-column:1/-1}}
.lp-tag{display:inline-block;padding:2px 7px;border-radius:2px;background:rgba(250,204,21,.13);
  border:1px solid rgba(250,204,21,.4);color:var(--accent2);
  font:700 10.5px/1.5 var(--mono);letter-spacing:.09em;white-space:nowrap}

/* -------------------------------------------------------------- section --- */
.lp-sec{padding:82px 0}
.lp-sec--alt{background:var(--bg1);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.lp-sec-head{max-width:66ch;margin-bottom:38px}

.lp-grid{display:grid;gap:18px;grid-template-columns:1fr}
@media(min-width:700px){.lp-grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1000px){.lp-grid--3{grid-template-columns:repeat(3,1fr)}}
.lp-card2{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:24px 22px}
.lp-card2 h3{margin-bottom:9px}
.lp-card2 p{margin:0;font-size:14.7px;color:var(--dim);line-height:1.6}
.lp-ico{display:flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:9px;
  background:var(--accent-dim);border:1px solid rgba(250,204,21,.28);margin-bottom:15px;
  font-size:18px;line-height:1;color:var(--accent2)}

/* steps */
.lp-steps{counter-reset:step;display:grid;gap:20px;grid-template-columns:1fr}
@media(min-width:820px){.lp-steps{grid-template-columns:repeat(3,1fr)}}
.lp-step{position:relative;padding-top:52px}
.lp-step::before{counter-increment:step;content:counter(step,decimal-leading-zero);
  position:absolute;top:0;left:0;font:800 30px/1 var(--mono);color:var(--accent);opacity:.85}
.lp-step h3{margin-bottom:8px}
.lp-step p{margin:0;color:var(--dim);font-size:14.7px}

/* range grid */
.lp-matrix{display:grid;grid-template-columns:repeat(13,1fr);gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:8px;overflow:hidden;user-select:none}
.lp-matrix .pt-matrix{display:contents}
.lp-matrix .pt-matrix-cell{display:flex;align-items:center;justify-content:center;height:var(--cell,26px);
  font:700 9px/1 var(--mono);color:rgba(255,255,255,.9);text-shadow:0 1px 2px rgba(0,0,0,.7)}
.lp-matrix .pt-matrix-cell.is-off{color:var(--faint);text-shadow:none}
.lp-matrix .pt-matrix-cell.is-dk{color:rgba(8,10,12,.95);text-shadow:none}
.lp-legend{display:flex;flex-wrap:wrap;gap:8px 20px;margin-top:16px;font-size:13px;color:var(--dim)}
.lp-legend i{display:inline-block;width:11px;height:11px;border-radius:3px;margin-right:7px;vertical-align:-1px}

/* closing */
.lp-close{text-align:center;padding:92px 0}
.lp-close .lp-ctas{justify-content:center}
.lp-foot{border-top:1px solid var(--line);padding:34px 0 60px;font-size:13.5px;color:var(--faint)}
.lp-foot-in{display:flex;flex-wrap:wrap;gap:14px;align-items:center;justify-content:space-between}
.lp-foot a{color:var(--dim);text-decoration:none}
.lp-foot a:hover{color:var(--accent2)}

@media(min-width:900px){ .lp-nav{display:flex} }
@media(max-width:520px){ .lp-matrix .pt-matrix-cell{--cell:19px;font-size:0} }
@media (prefers-reduced-motion:reduce){ *,*::before,*::after{animation:none!important;transition:none!important} }


/* THE WORDMARK IS A TWO-LINE LOCKUP, because one line did not fit. Measured at 390px: the
   single line wanted 397px and had 231, so it truncated to an ellipsis mid-word — the header
   was advertising "COUNTER.SOFTWARE: GTO POKER TRAI…". Stacked it is ~150px wide and fits
   with room, and it now matches the trainer's own header, which has always been a two-line
   lockup. The product line drops its heavy tracking: 1.82px of letter-spacing on 13px caps is
   what made the single line so wide in the first place. */
.lp-brand{gap:14px}
.lp-brand-text{display:flex;flex-direction:column;gap:5px;line-height:1;min-width:0}
/* 21px is Blackjack's wordmark, and the product line scales with it, 12.5 to 14.5. These
   used to live in a min-width:900px block and the base was 13px, so between 381px and 899px
   this bar was two thirds the size of the same bar on the other two sites. */
.lp-brand-co{font:800 21px/1 var(--ui);letter-spacing:.15em;text-transform:uppercase;color:var(--ink);white-space:nowrap}
.lp-brand-co b{color:var(--accent);font-weight:800}
.lp-brand-prod{font:600 14.5px/1 var(--ui);letter-spacing:.17em;text-transform:uppercase;color:var(--dim);white-space:nowrap}
/* 380px, not 420px: this is where Blackjack steps down, measured at 375px — a 40px box, so a
   38.3px tile, and a 15px wordmark, held all the way to 320px. 61.4px of box paints 38.4px of
   tile here. The bar floor comes down with it, 70px to 60px, which is 10px either side of the
   smaller mark. */
@media (max-width:380px){
  .lp-head-in{min-height:60px}
  .lp-brand{gap:11px}
  .lp-brand-mark{width:61.4px;height:61.4px;margin:-11.5px}
  .lp-brand-co{font-size:15px;letter-spacing:.1em}
  .lp-brand-prod{font-size:10.5px;letter-spacing:.12em}
  .lp-brand-text{gap:3px}
}

/* THE LOCKUP, BIGGER ON DESKTOP. It was one size from 320px to 1920px — sized for the phone,
   where the header is tight, and then left at 42px/13px on a viewport with room to spare.
   At 900px the nav appears alongside it, which is the point where the header stops being
   cramped, so that is where it grows rather than at an arbitrary width of its own.

   The mark keeps its -8px margin: the SVG carries a radiating halo drawn OUTSIDE the 30px
   tile, so its box is deliberately larger than the tile it appears to be, and the negative
   margin is what stops that padding pushing the wordmark away. It scales with the mark. */
/* The min-width:900px block that used to sit here is gone. It grew the lockup once the nav
   appeared beside it, which left three sizes across the width — 42px below 900px, 58px above
   — where Blackjack has two, 50px down to 381px and 40px below that. Its sizes are the base
   now and the step is at 380px, so the overflow:visible it carried moved up to .lp-brand,
   where it is needed at every width. */


/* ------------------------------------------------- the still, on a phone --- */
/* MEASURED AT 390x844 BEFORE THIS BLOCK: the still stood 871px tall — taller than the
   viewport it was being shown on, so the "demo" was something you scrolled through rather
   than something you saw. Where it went:

     spot header 175 (five fields wrapping to five lines) · stage 394 · reveal 248 · top 52

   The cuts are by what a first-time reader needs from a still, not by what the app shows.
   The FACING sentence and the stack are context for someone already drilling; the seat ring
   is decoration at 340px wide. What has to survive is the board, the hole cards, the two
   actions and the price — that IS the pitch. */
@media (max-width:760px){
  .lp-real-spot{gap:6px 14px;padding:8px 12px}
  .lp-real-spot .lp-rf--wide,          /* the FACING sentence: five words of context, one line of pitch */
  .lp-real-spot .lp-rf:nth-of-type(3){display:none}   /* STACK */
  .lp-rf{font-size:10px}
  .lp-real-top{padding:8px 12px}
  .lp-real-stage{gap:10px;padding:12px}
  .lp-rseats{display:none}
  .lp-rfelt{padding:12px 10px}
  .lp-rboard .lp-rcard{width:34px;height:48px}
  .lp-rhole .lp-rcard.is-big{width:48px;height:66px}
  .lp-racts{gap:6px}
  .lp-ract{padding:7px 10px;font-size:11px}
  .lp-real-reveal{grid-template-columns:1fr;gap:8px;padding:10px 12px}
  .lp-rprice{font-size:24px;margin:2px 0 0}
  .lp-rmix{font-size:11.5px;line-height:1.4;margin:0}
  .lp-rbar{height:18px}
  .lp-rverdict{font-size:10px;padding:4px 8px}
  /* the felt and the hand side by side: the stage was 272 of the 576 stacked, and a 3-card
     board next to two hole cards is the one arrangement that reads at this width */
  .lp-real-stage{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:8px}
  .lp-rhandlab{font-size:9.5px}
}

/* The mix bar states what it is. Unlabelled, two coloured segments reading 27 and 73 sitting
   directly under "EV LOST ON THIS DECISION" read as "you against the solver" — which is not
   what it shows, and is the one comparison a reader most wants to see. It is the solver's own
   mix for that hand. The segments carry their action names now and the caption says so; the
   you-against-solver view is the app's Statistics screen. */
.lp-rbarlab{margin:0 0 6px;font:600 10.5px/1.3 var(--a-sans,var(--ui));letter-spacing:.04em;
  text-transform:uppercase;color:var(--faint)}
.lp-rbar span{padding:0 8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media (max-width:760px){
  .lp-rbarlab{font-size:9px;margin-bottom:4px}
  .lp-rbar span{padding:0 6px;font-size:10px}
}