/* getquads.com. Tokens are the app's "Clay & Ink" (src/ui/styles/tokens.css on release): ink on paper, colour only from
   the chips and the cards. The landing and the legal pages share this file; bump ?v= in every page when it changes. */

@font-face{font-family:"Space Grotesk";font-style:normal;font-weight:300 700;font-display:swap;src:url(/fonts/space-grotesk-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Space Grotesk";font-style:normal;font-weight:300 700;font-display:swap;src:url(/fonts/space-grotesk-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Geist";font-style:normal;font-weight:400 700;font-display:swap;src:url(/fonts/geist.woff2) format("woff2")}
@font-face{font-family:"Geist Mono";font-style:normal;font-weight:400 600;font-display:swap;src:url(/fonts/mono.woff2) format("woff2")}

:root{
  color-scheme:light;
  --paper:#f4f5f7;--surface:#fff;--sunken:#eceef2;--ink:#0e1116;--ink-2:#3b414d;--muted:#636b7a;
  --line:#e1e4ea;--line-strong:#cbd0d9;--on-ink:#fff;--focus:#3a63e0;
  --plus-ink:#0e1116;--plus-on:#f4f5f7;--plus-on-2:rgba(244,245,247,.7);--plus-line:rgba(255,255,255,.1);
  --bezel:#0b0d11;--bezel-ring:rgba(14,17,22,.1);--rim:#454b55;--pool:rgba(255,255,255,.95);
  --sh-phone:0 40px 70px -28px rgba(14,17,22,.42),0 12px 24px -12px rgba(14,17,22,.2);
  --sh-1:0 1px 2px rgba(14,17,22,.05),0 1px 1px rgba(14,17,22,.03);
  --sh-2:0 1px 2px rgba(14,17,22,.05),0 12px 28px -12px rgba(14,17,22,.22);
  --sh-3:0 24px 48px -16px rgba(14,17,22,.3),0 2px 6px rgba(14,17,22,.06);
  --f-display:"Space Grotesk","Geist",ui-sans-serif,system-ui,sans-serif;
  --f-ui:"Geist",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  --f-mono:"Geist Mono",ui-monospace,"SF Mono",Menlo,monospace;
  --r-pill:999px;
  --ease-out:cubic-bezier(.22,.8,.24,1);
  --d-fast:120ms;--d-base:200ms;
  /* The app's springs (motion.ts), as CSS linear(). */
  --spring-press:linear(0,.041 2.5%,.127 5%,.252 7.5%,.378 10%,.517 12.5%,.635 15%,.75 17.5%,.839 20%,.917 22.5%,.972 25%,1.016 27.5%,1.043 30%,1.06 32.5%,1.068 35%,1.069 37.5%,1.065 40%,1.05 45%,1.031 50%,1.016 55%,1.005 60%,.998 65%,.996 70%,.995 75%,.996 80%,.998 87.5%,1 100%);
  --spring-flip:linear(0,.032 2.5%,.111 5%,.218 7.5%,.339 10%,.463 12.5%,.581 15%,.69 17.5%,.784 20%,.864 22.5%,.928 25%,.977 27.5%,1.014 30%,1.039 32.5%,1.053 35%,1.062 37.5%,1.064 40%,1.062 42.5%,1.057 45%,1.05 47.5%,1.042 50%,1.027 55%,1.014 60%,1.005 65%,.999 70%,.997 75%,.996 80%,.997 90%,1 100%);
  --gut:clamp(20px,5.4vw,40px);
  /* Nested corners (r = R - p, borders counted): a card's own radius, and what its holders take from it. */
  --cd-r:9px;
  --r-diagram:22px;--p-diagram:12px;
}
@media (prefers-color-scheme:dark){
  :root{
    color-scheme:dark;
    --paper:#0a0c10;--surface:#14171d;--sunken:#1a1e25;--ink:#f2f4f7;--ink-2:#c4c9d2;--muted:#8b93a1;
    --line:#23272f;--line-strong:#343b46;--on-ink:#0e1116;--focus:#86a2ff;
    --plus-ink:#06080b;--plus-line:rgba(255,255,255,.08);
    --bezel:#000;--bezel-ring:rgba(255,255,255,.06);--rim:#3a3f48;--pool:rgba(120,140,180,.10);
    --sh-phone:0 40px 80px -24px rgba(0,0,0,.9),0 0 60px -10px rgba(120,140,190,.08);
    --sh-1:0 1px 0 rgba(255,255,255,.02) inset,0 1px 2px rgba(0,0,0,.5);
    --sh-2:0 0 0 1px rgba(255,255,255,.03),0 14px 32px -12px rgba(0,0,0,.75);
    --sh-3:0 24px 56px -16px rgba(0,0,0,.8),0 0 0 1px rgba(255,255,255,.04);
  }
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font:400 16px/1.55 var(--f-ui);-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%;height:auto}
h1,h2,h3{margin:0}
.defs{position:absolute;width:0;height:0;overflow:hidden}
:focus-visible{outline:2px solid var(--focus);outline-offset:3px;border-radius:6px}
.skip{position:absolute;left:12px;top:-60px;z-index:10;padding:10px 16px;border-radius:var(--r-pill);background:var(--ink);color:var(--on-ink);font-weight:600;text-decoration:none}
.skip:focus{top:12px}

.wrap{width:100%;max-width:1200px;margin-inline:auto;padding-inline:var(--gut)}
.wm{display:block;height:34px;width:auto;aspect-ratio:2378/900;fill:currentColor}
.brand{display:inline-flex;padding:8px 0;color:var(--ink)}

/* The app's pills (PushButton): Ink presses to 97% and springs back. */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;padding:0 22px;border:0;border-radius:var(--r-pill);font:600 16px/1 var(--f-ui);letter-spacing:-.01em;white-space:nowrap;text-decoration:none;cursor:pointer;touch-action:manipulation;transition:transform 420ms var(--spring-press),background-color var(--d-base) var(--ease-out)}
.btn:active{transform:scale(.97);transition-duration:var(--d-fast);transition-timing-function:var(--ease-out)}
.btn-ink{background:var(--ink);color:var(--on-ink);box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 1px 2px rgba(14,17,22,.18),0 6px 14px -6px rgba(14,17,22,.4)}
.btn-lg{min-height:56px;padding:0 28px;font-size:17px}
.btn-sm{min-height:40px;padding:0 18px;font-size:15px}
.btn:focus-visible{border-radius:var(--r-pill)}

/* The product's name as the app draws it (QuadsPlus, .lockup): the wordmark and the plus, one mark at the text's size.
   Never typed. */
.ql{display:inline-block;height:1em;width:auto;aspect-ratio:3150/900;fill:currentColor;overflow:visible;vertical-align:-.2em}

/* ---------- Header ---------- */
.top{position:relative;z-index:2;display:flex;align-items:center;gap:16px;min-height:76px;padding-top:env(safe-area-inset-top)}
.top .brand{margin-right:auto}
.nav{display:none}
/* Phones: the hero's own button is right there, so the header is just the name. */
.top .btn{display:none}
.btn-xl{min-height:60px;padding:0 34px;font-size:18px}
.btn-light{background:#f4f5f7;color:#0e1116;box-shadow:inset 0 1px 0 #fff,0 1px 2px rgba(0,0,0,.3),0 10px 24px -10px rgba(0,0,0,.6)}

/* ---------- The system: one spacing step for sections, one eyebrow, one heading ---------- */
:root{--sec:80px;--head-gap:32px}
.sec{padding-top:var(--sec)}
.sec-head{margin-bottom:var(--head-gap)}
.eb{margin:0 0 14px;color:var(--muted);font:500 12.5px/1 var(--f-mono);letter-spacing:.14em;text-transform:uppercase}
h2{max-width:18ch;font:700 clamp(30px,8.2vw,38px)/1.02 var(--f-display);letter-spacing:-.03em;text-wrap:balance}
.lede{margin:0;max-width:38ch;color:var(--ink-2);font-size:17px;line-height:1.5;text-wrap:pretty}
.sec-head .lede{margin-top:16px}
.fine{margin:14px 0 0;color:var(--muted);font-size:13.5px}
.acts{margin:28px 0 0}

/* A phone, drawn around a real screen of the app. The bezel and its rim are spreads of the screen's own shadow, so every
   corner is concentric with the screen's at any size; the radii are in the phone's width (cqw). */
.phone{margin:0;padding:10px;container-type:inline-size}
.screen{--bz:max(5px,2.3cqw);position:relative;overflow:hidden;border-radius:12.5cqw;background:var(--paper);box-shadow:0 0 0 1px rgba(0,0,0,.4),0 0 0 var(--bz) var(--bezel),0 0 0 calc(var(--bz) + 1.5px) var(--rim),0 0 0 calc(var(--bz) + 2.5px) var(--bezel-ring),var(--sh-phone)}
.screen img{width:100%}
/* A clip of the app's own motion over its still: the still is always there, and the clip fades in once it plays. */
.screen video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .16s var(--ease-out)}
.screen video.on{opacity:1}

/* ---------- Let's go: the app's first steps, framed full screen in place of the page (site.js) ---------- */
/* Sign in, top right: an outlined pill, so a returning player finds it at a glance. */
.top-in{display:inline-flex;align-items:center;min-height:40px;padding:0 18px;border-radius:999px;color:var(--ink);font-size:15px;font-weight:600;text-decoration:none;box-shadow:inset 0 0 0 1.5px var(--line-strong);transition:box-shadow .15s var(--ease-out),background-color .15s var(--ease-out)}
.top-in:hover{box-shadow:inset 0 0 0 1.5px var(--ink)}
.top-in:active{background:var(--line)}
.have{display:block;margin-top:14px;padding:8px 0;color:var(--ink);font-size:16px;font-weight:600;text-align:center;text-decoration:underline;text-decoration-color:var(--line-strong);text-underline-offset:4px;text-decoration-thickness:1.5px}
.have:hover{color:var(--ink);text-decoration-color:currentColor}
html.starting{overflow:hidden}
html.starting body>:not(.start-view){transform:scale(.985);opacity:.4;transition:transform .32s var(--ease-out),opacity .32s var(--ease-out)}
.start-view{position:fixed;inset:0;z-index:100;background:var(--paper);opacity:0;transition:opacity .32s var(--ease-out)}
.start-view.in{opacity:1}
/* Until the steps say they are ready, a quiet spinner holds the place; then they rise in. */
.start-view::before{content:"";position:absolute;left:50%;top:50%;width:28px;height:28px;margin:-14px 0 0 -14px;border:2.5px solid var(--line-strong);border-top-color:var(--ink);border-radius:50%;animation:spin .8s linear infinite;transition:opacity .2s}
.start-view.ready::before{opacity:0;animation:none}
.start-view iframe{position:absolute;inset:0;width:100%;height:100%;border:0;background:transparent;opacity:0;transform:translateY(18px);transition:opacity .36s var(--ease-out),transform .5s var(--spring-flip)}
.start-view.ready iframe{opacity:1;transform:none}
@keyframes spin{to{transform:rotate(1turn)}}

/* ---------- Hero ---------- */
:root{--spot:rgba(255,255,255,.95);--felt:rgba(206,190,152,.32)}
@media (prefers-color-scheme:dark){:root{--spot:rgba(150,170,215,.13);--felt:rgba(233,226,206,.10)}}
.hero{position:relative;isolation:isolate;overflow:clip}
.hero-in{display:flex;flex-direction:column;gap:16px;padding-bottom:8px}
.hero-copy{display:flex;flex-direction:column}
h1{font:700 clamp(36px,10vw,46px)/1 var(--f-display);letter-spacing:-.034em;text-wrap:balance;margin-bottom:14px}
.hero .acts .btn{width:100%}
.hero .fine{text-align:center;text-wrap:balance;color:var(--ink-2);font-size:14px}
.hero .fine .keep{display:inline-block}
/* The first action (a phone): "Let's go!" waits at the foot of the screen, over a solid bar, until the page shows one of its
   own (site.js hides the bar then, and at the end). The bar goes while the sign-up steps are open. */
.dock{position:fixed;left:0;right:0;bottom:0;z-index:50;display:flex;justify-content:center;padding:12px var(--gut) calc(12px + env(safe-area-inset-bottom,0px));background:var(--paper);border-top:1px solid var(--line);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);transition:transform .32s var(--ease-out),visibility .32s}
.dock .btn{width:100%;max-width:460px}
.dock.gone{transform:translateY(110%);visibility:hidden}
.dock[hidden]{display:none}
html.starting .dock{display:none}
/* The table under a soft spotlight, its felt glowing on the page. */
.stage{order:-1;position:relative}
.stage::before{content:"";position:absolute;inset:-14% -18%;z-index:-1;pointer-events:none;background:radial-gradient(closest-side at 50% 56%,var(--felt),transparent),radial-gradient(closest-side at 50% 42%,var(--spot),transparent)}
/* Phones: the hand on top as in the app's welcome, sized so the button lands above the fold, and never wider than the
   frame draws the phone table (366 plus its padding), so the poster and the frame have the same height. */
.hand{position:relative;width:min(100%,382px,calc((100svh - 470px) * .795));min-width:min(100%,250px);margin-inline:auto;aspect-ratio:696/876}
.hand picture,.hand .poster,.hand iframe{position:absolute;inset:0;width:100%;height:100%}
.hand .poster{object-fit:contain}
.hand iframe{border:0;background:transparent;opacity:0;transition:opacity .5s var(--ease-out)}
/* On a touch screen the page owns every touch on the hand: a swipe that starts on it scrolls the page, never the frame. */
@media (hover:none){.hand iframe{pointer-events:none}}
.hand picture{transition:opacity .5s var(--ease-out)}
.hand.live iframe{opacity:1}
.hand.live picture{opacity:0}
/* The facts, as clay-chip pills: each chip is the app's own, in its table's colour. */
.pills{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px;margin:18px 0 0;padding:0;list-style:none}
.pills li{display:flex;align-items:center;gap:8px;min-height:50px;padding:8px 16px 8px 8px;white-space:nowrap;border-radius:var(--r-pill);background:var(--surface);box-shadow:var(--sh-1),inset 0 0 0 1px var(--line)}
.pills img{flex:none;width:32px;filter:drop-shadow(0 2px 2px rgba(10,12,16,.22))}
.pills b{font:700 17px/1 var(--f-display);letter-spacing:-.02em;white-space:nowrap}
.pills span{color:var(--muted);font-size:14px;line-height:1}
/* Narrow phones: the four facts still sit two by two, every pill the same width. */
@media (max-width:420px){.pills li{gap:7px;padding:8px 12px 8px 7px}.pills img{width:28px}.pills b{font-size:18px}.pills span{font-size:13px}}
/* The narrowest phones: a long fact may take two lines in its pill rather than run out of it. */
@media (max-width:359px){.pills li{gap:6px;padding:8px 10px 8px 6px}.pills img{width:24px}.pills span{white-space:normal;line-height:1.1}}

/* ---------- A friend's invite (invite-landing): the welcome at the top of the hero ---------- */
/* An invitation card, set as the share cards are: their near-black, the friend's face in a ringed disc, the label in the
   page's small capitals, the headline in Space Grotesk. html.invited (in.js) gives it its room before the page paints;
   it fades in once site.js has the server's words, and goes for a code that isn't one. Never without an invite. */
.invite{display:none}
html.invited .invite{order:-2;display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;align-content:center;column-gap:16px;min-height:var(--invite-h);padding:var(--inv-p) 20px var(--inv-p) var(--inv-p);border-radius:var(--inv-r);color:#f2f4f7;background:radial-gradient(120% 140% at 0% 0%,#252a35,#0e1116 58%,#0a0c10);box-shadow:inset 0 0 0 1px rgba(255,255,255,.08),0 18px 40px -22px rgba(14,17,22,.55);visibility:hidden;opacity:0;transform:translateY(8px);transition:opacity .5s var(--ease-out),transform .7s var(--spring-flip),visibility 0s .5s}
html.invited .invite.in{visibility:visible;opacity:1;transform:none;transition-delay:0s}
/* Nested corners (r = R - p): the card's R and p; the plate inside keeps the app's 8px corner, which is R - p at its own
   size, and the avatar is the app's disc. */
:root{--invite-h:238px;--inv-r:26px;--inv-p:18px}
.invite-av{display:block;width:58px;height:58px;padding:3px;border-radius:50%;background:linear-gradient(145deg,rgba(255,255,255,.3),rgba(255,255,255,.05));box-shadow:0 10px 20px -10px rgba(0,0,0,.8)}
.invite-av img{width:100%;height:100%;border-radius:50%}
.invite-copy{display:grid;gap:7px;min-width:0}
.invite p{margin:0}
.invite p[hidden]{display:none}
.invite-eb{color:rgba(242,244,247,.58);font:500 11.5px/1 var(--f-mono);letter-spacing:.16em;text-transform:uppercase}
.invite-h{font:700 21px/1.1 var(--f-display);letter-spacing:-.025em;text-wrap:balance}
.invite-who{display:flex;align-items:center;flex-wrap:wrap;gap:6px 12px;min-height:36px;color:rgba(242,244,247,.7);font-size:14px;line-height:1.35}
/* The rank: the app's own plate, a picture drawn at four times its size (app.getquads.com/share/rank/), shown at the
   plate's own 32px and the 2px of its rim's room round it. */
.invite-chip{display:block;height:36px;width:auto;flex:none}
.invite-chip[hidden]{display:none}
.invite .invite-gift{grid-column:1/-1;margin-top:14px;padding-top:13px;border-top:1px solid rgba(255,255,255,.1);color:rgba(242,244,247,.86);font-size:14px;line-height:1.45;text-wrap:pretty}
/* A narrow phone: the band keeps its room by setting its words a little smaller. */
@media (max-width:379px){:root{--invite-h:240px;--inv-p:16px;--inv-r:24px}html.invited .invite{column-gap:12px;padding:var(--inv-p) var(--inv-p) var(--inv-p) 14px}.invite-av{width:50px;height:50px}.invite-h{font-size:19px}.invite .invite-gift{font-size:13.5px}}
/* A phone: the band and the table above the button, so the table gives up some of its height. */
html.invited .hand{width:min(100%,382px,calc((100svh - 610px) * .795));min-width:min(100%,250px)}
@media (prefers-color-scheme:dark){
  html.invited .invite{background:radial-gradient(120% 140% at 0% 0%,#2a303c,#15181f 58%,#101318);box-shadow:inset 0 0 0 1px rgba(255,255,255,.1),0 18px 40px -22px rgba(0,0,0,.9)}
}

/* ---------- How it works: three cards, each the app's screen and its step ---------- */
.steps{display:grid;gap:16px;margin-block:0;list-style:none}
.step{display:flex;flex-direction:column;gap:20px;padding:22px 22px 26px;border-radius:30px;background:var(--sunken);box-shadow:inset 0 0 0 1px var(--line)}
.step .phone{width:min(74%,290px);margin-inline:auto}
.num{display:block;margin-bottom:10px;font:500 13px/1 var(--f-mono);color:var(--muted)}
.step h3{margin:0 0 6px;font:700 24px/1.05 var(--f-display);letter-spacing:-.03em}
.step p{margin:0;color:var(--ink-2);font-size:16px;line-height:1.45}
.anchor{display:block;height:0;overflow:hidden}

/* ---------- Every answer and Past the basics: the words, then the phone on a stage ---------- */
/* The phone under the hero's spotlight, its felt glowing on the page, and the line it says floating in front of it. */
.why,.deep,.arcade{overflow-x:clip}
.showcase{position:relative;isolation:isolate;display:flex;flex-direction:column;align-items:center;padding:8px 0 4px}
.showcase::before{content:"";position:absolute;inset:-6% max(-34%,-120px) 0;z-index:-1;pointer-events:none;background:radial-gradient(closest-side at 50% 62%,var(--felt),transparent),radial-gradient(closest-side at 50% 34%,var(--spot),transparent)}
.phone.big{width:min(86%,350px)}
/* The answer's phone, larger and cropped to its payoff: the top of the screen (the question) slides up out of view
   under a soft fade, so the sheet, its why and its math, reads at a glance. The crop keeps room for the phone's
   shadow at the sides and foot. */
.crop{position:relative;overflow:hidden;container-type:inline-size;width:min(100%,380px);margin:0 -40px -60px;padding:0 40px 60px;box-sizing:content-box}
.crop .phone.big{width:100%;margin-top:calc((100cqw - 20px) * -.62)}
.crop::after{content:"";position:absolute;inset:0 0 auto;z-index:1;height:26%;background:linear-gradient(var(--paper) 6%,transparent);pointer-events:none}
.said{margin:0}
.said blockquote{margin:0}
.said p{margin:0;font:700 20px/1.15 var(--f-display);letter-spacing:-.02em;text-wrap:balance}
.said p::before{content:"\201C"}
.said p::after{content:"\201D"}
.said figcaption{margin-top:10px;color:var(--muted);font:500 12px/1.3 var(--f-mono);letter-spacing:.1em;text-transform:uppercase}
/* It lets the pointer through, so hovering the phone under it keeps the clip playing. */
.said.float{position:relative;z-index:1;width:min(88%,330px);margin-top:-22px;pointer-events:none;padding:18px 20px 16px;border-radius:22px;background:color-mix(in srgb,var(--surface) 84%,transparent);-webkit-backdrop-filter:blur(16px) saturate(1.3);backdrop-filter:blur(16px) saturate(1.3);box-shadow:var(--sh-2),inset 0 0 0 1px var(--line)}

/* ---------- The Arcade: the cash table under the spotlight, its home behind it, a Beat the Table result in front ---------- */
/* The Arcade's facts: at most three short chips under its line. */
.facts.boards-facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
.facts.boards-facts li{display:grid;place-items:center;padding:8px 8px;border-radius:18px;font-size:13px;text-align:center;text-wrap:balance}
@media (min-width:600px){.facts.boards-facts{display:flex;flex-wrap:wrap;gap:8px}.facts.boards-facts li{display:block;padding:7px 13px;border-radius:999px;font-size:14px;text-wrap:wrap}}
/* The leaderboards' phone: the screen cut between two boards (the Top Ranks board, then the XP This Week row), larger than the
   others so the app's text reads at 12px. */
.boards-phone .screen{aspect-ratio:1170/2300}
.showcase.boards-show .said.float{margin-top:18px}
.boards-phone .screen img{display:block;width:100%;height:auto}
.facts{display:flex;flex-wrap:wrap;gap:8px;margin:20px 0 0;padding:0;list-style:none}
.facts li{padding:7px 13px;border-radius:999px;background:var(--sunken);color:var(--ink-2);font-size:14px;font-weight:600;line-height:1.2;box-shadow:inset 0 0 0 1px var(--line)}
.chips-only{display:flex;align-items:center;gap:10px;margin:22px 0 0;color:var(--ink-2);font-size:15px;font-weight:500}
.chips-only img{flex:none;width:26px;filter:drop-shadow(0 2px 2px rgba(10,12,16,.22))}

/* ---------- Quads plus ---------- */
:root{--plus-glow:rgba(14,17,22,.5)}
@media (prefers-color-scheme:dark){:root{--plus-glow:rgba(130,150,230,.2)}}
/* A fine gradient edge and a soft glow around the ink card. */
.plus{position:relative;isolation:isolate;overflow:hidden;padding:44px 20px 28px;border:1px solid transparent;border-radius:30px;color:var(--plus-on);background:linear-gradient(var(--plus-ink),var(--plus-ink)) padding-box,linear-gradient(140deg,rgba(255,255,255,.36),rgba(255,255,255,.06) 32%,rgba(255,255,255,.04) 62%,rgba(255,255,255,.24)) border-box;box-shadow:0 44px 90px -44px var(--plus-glow)}
.plus::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(120% 80% at 30% 0%,rgba(255,255,255,.08),transparent 60%)}
.plus-mark{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;margin:0 0 22px;line-height:0}
.plus-mark .ql{height:34px;vertical-align:0}
.plus h2{color:var(--plus-on)}
.plus .lede{margin-top:16px;color:var(--plus-on-2)}
/* Each part: its number, name and line, then a row of cards. A card is the app's own picture of the feature, full width on
   a stage of stars (the stars only there, behind the picture), its name and one line under it inside the card. In a
   row the cards share their rows (subgrid): every stage is as tall as the row's tallest picture, so the names line up. */
.pp{margin-top:44px}
.pp-head{margin:0 0 18px}
.pp-n{display:block;margin:0 0 8px;color:var(--plus-on-2);font:500 12px/1 var(--f-mono);letter-spacing:.14em}
.pp-t{margin:0;color:var(--plus-on);font:700 22px/1.15 var(--f-display);letter-spacing:-.025em}
.pp-t .ql{height:.9em;vertical-align:-.05em}
.pp-l{margin:8px 0 0;max-width:48ch;color:var(--plus-on-2);font-size:15px;line-height:1.45}
.pp-l .ql,.pf .ql{height:.95em;vertical-align:-.12em}
.pf-grid{display:grid;gap:14px;margin:0;padding:0;list-style:none}
.pf{display:grid;grid-template-rows:auto auto 1fr;align-content:start;min-width:0;padding:8px 8px 16px;border-radius:24px;background:color-mix(in srgb,#fff 4%,var(--plus-ink));box-shadow:inset 0 0 0 1px var(--plus-line)}
.pf-stage{position:relative;isolation:isolate;display:flex;align-items:center;justify-content:center;padding:18px 16px;overflow:hidden;border-radius:18px;background:radial-gradient(90% 70% at 50% 0%,rgba(130,150,230,.16),transparent 70%),#05070a}
.pf-stage img{position:relative;z-index:1;display:block;width:100%;height:auto;border-radius:12px;box-shadow:0 0 0 1px rgba(255,255,255,.1),0 18px 34px -20px rgba(0,0,0,.9)}
/* The stars: the Quads glint at seeded places along the stage's edges, behind the picture, a few twinkling. */
.pf-sky{position:absolute;inset:0;z-index:0;pointer-events:none}
.pf-sky svg{position:absolute;height:auto;aspect-ratio:1;fill:#fff;transform:translate(-50%,-50%)}
.pf-sky svg:nth-child(3n+1){animation:twinkle 5s ease-in-out infinite}
.pf-sky svg:nth-child(3n+2){animation:twinkle 6.5s ease-in-out -2s infinite}
@keyframes twinkle{50%{opacity:.2}}
/* The app's starfield on the big card: the Quads star at three depths, behind everything on it. site.js moves the layers
   apart as the card scrolls by, and leans them away from a pointer on the card, the near ones most (not on a device that
   runs slow); a few near stars twinkle. The feature cards are opaque, so no star is ever drawn over one. */
.stars{position:absolute;inset:0;z-index:-1;overflow:hidden;pointer-events:none}
.stars .layer{position:absolute;inset:-14% 0}
.stars svg{position:absolute;height:auto;aspect-ratio:1;fill:#fff;transform:translate(-50%,-50%)}
.stars .near svg:nth-child(2n+1){animation:twinkle 5s ease-in-out infinite}
.stars .near svg:nth-child(3){animation-delay:-1.7s}
.stars .near svg:nth-child(5){animation-delay:-3.1s}
.pf h4{margin:14px 8px 0;color:var(--plus-on);font:600 17px/1.3 var(--f-ui);letter-spacing:-.01em}
.pf p{margin:5px 8px 0;color:var(--plus-on-2);font-size:14.5px;line-height:1.45;text-wrap:pretty}
.plus-head .lede{max-width:52ch}
.plus-buy{margin-top:48px}
/* The plans, the way in, and the fine print: the price and the period always together, nothing in small type alone. */
.plans{display:grid;gap:10px;margin:18px 0 0;padding:0;list-style:none}
.plans li{display:grid;grid-template-columns:auto 1fr;grid-template-areas:"n b" "per per";align-items:baseline;column-gap:12px;row-gap:4px;padding:16px 18px;border-radius:18px;background:rgba(255,255,255,.05);box-shadow:inset 0 0 0 1px var(--plus-line)}
.plans .plan-main{background:rgba(255,255,255,.09);box-shadow:inset 0 0 0 1px rgba(255,255,255,.22)}
.plan-n{grid-area:n;color:var(--plus-on-2);font:500 12px/1 var(--f-mono);letter-spacing:.12em;text-transform:uppercase}
.plans b{grid-area:b;justify-self:end;font:700 26px/1 var(--f-display);letter-spacing:-.02em;color:var(--plus-on)}
.plan-per{grid-area:per;color:var(--plus-on-2);font-size:14px;line-height:1.4}
.plus-join{margin:24px 0 0}
.plus-join .btn .ql{height:.95em;vertical-align:0}
.plus-guarantee{display:grid;justify-items:center;gap:3px;margin:18px auto 0;max-width:36ch;text-align:center;color:var(--plus-on-2);font-size:14px;line-height:1.45}
.plus-guarantee b{color:var(--plus-on);font:600 15px/1.3 var(--f-display);letter-spacing:.01em}
.plus-guarantee small{font-size:13px;line-height:1.5}
.plus-guarantee a{color:var(--plus-on);text-underline-offset:3px}
.plus-fine{margin:16px 0 0;color:var(--plus-on-2);font-size:13.5px;line-height:1.5}
.plus-fine a{color:var(--plus-on);text-underline-offset:3px}

/* ---------- The climb: where you start, then the six tables, the clay climbing a colour each ---------- */
.climb-top{display:flex;flex-direction:column;gap:28px;margin-bottom:28px}
.climb .sec-head{margin-bottom:0}
.starts{padding:18px;border-radius:24px;background:var(--surface);box-shadow:var(--sh-1),inset 0 0 0 1px var(--line)}
.starts-q{margin:0 0 14px;max-width:30ch;font:600 16.5px/1.35 var(--f-ui);letter-spacing:-.01em}
.starts ul{display:grid;gap:6px;margin:0;padding:0;list-style:none}
.starts li{display:grid;grid-template-columns:28px minmax(0,1fr);grid-template-rows:auto auto;column-gap:12px;row-gap:2px;align-items:center;padding:9px 14px 9px 12px;border-radius:16px;background:var(--sunken)}
.starts img{grid-row:span 2;width:28px;filter:drop-shadow(0 2px 2px rgba(10,12,16,.22))}
.starts b{align-self:end;font:600 15px/1.2 var(--f-ui);letter-spacing:-.01em}
.starts span{align-self:start;color:var(--muted);font-size:13.5px;line-height:1.3}

/* ---------- Questions ---------- */
.faq-in{display:flex;flex-direction:column}
.qa details{border-top:1px solid var(--line)}
.qa details:last-child{border-bottom:1px solid var(--line)}
.qa summary{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:58px;padding:14px 0;cursor:pointer;list-style:none;font:600 17px/1.35 var(--f-ui);letter-spacing:-.01em}
.qa summary::-webkit-details-marker{display:none}
.qa summary::after{content:"";flex:none;width:9px;height:9px;margin-right:4px;border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);transform:translateY(-3px) rotate(45deg);transition:transform 320ms var(--spring-flip)}
.qa details[open] summary::after{transform:translateY(2px) rotate(225deg)}
.qa p{margin:0;padding:0 0 18px;max-width:60ch;color:var(--ink-2);text-wrap:pretty}

/* ---------- Closing: it ends on the table's stack, in its spotlight ---------- */
.cta{position:relative;isolation:isolate;overflow:hidden;margin-top:var(--sec);padding:24px 0 88px;background:#0a0c10;color:#f2f4f7;text-align:center}
.cta-art{width:min(60vw,280px);aspect-ratio:600/700;margin:0 auto 12px;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 22%,#000 78%,transparent),linear-gradient(transparent,#000 14%,#000 88%,transparent);-webkit-mask-composite:source-in;mask-image:linear-gradient(90deg,transparent,#000 22%,#000 78%,transparent),linear-gradient(transparent,#000 14%,#000 88%,transparent);mask-composite:intersect}
.cta-art img{width:100%}
.cta h2{max-width:14ch;margin-inline:auto;color:#f2f4f7;font-size:clamp(34px,9.6vw,48px)}
.cta .fine{color:rgba(242,244,247,.62)}
.cta .btn{min-width:min(100%,260px)}
.cta::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(60% 40% at 50% 30%,rgba(255,255,255,.06),transparent 70%)}

/* ---------- Footer (landing) ---------- */
.site-foot{border-top:1px solid var(--line)}
.foot-in{display:flex;flex-wrap:wrap;align-items:center;gap:8px 24px;padding-block:28px calc(28px + env(safe-area-inset-bottom))}
.foot-in .wm{height:28px}
.foot-in nav{display:flex;flex-wrap:wrap;gap:0 20px;flex:1 1 100%;order:2}
.foot-in nav a{padding:10px 0;color:var(--ink-2);font-size:14.5px;text-decoration:none}
.foot-in nav a:hover{text-decoration:underline;text-underline-offset:3px}
.foot-in .copy{order:3;margin:0;color:var(--muted);font-size:14px}

/* ---------- Sections rise in as they are reached ----------
   Everything is visible by default: nothing on the page is ever hidden waiting for a script. site.js adds .rise to a
   section just before it scrolls into view, and that plays a one-off entrance on top; if it never does, the section is
   simply there. */
@keyframes rise{from{opacity:0;transform:translateY(28px)}}
.rise{animation:rise 1s var(--spring-flip) backwards}

/* ---------- Wider phones and tablets ---------- */
@media (min-width:600px){
  .top .btn{display:inline-flex}
  .hero-copy{align-items:center;text-align:center}
  html.invited .invite{width:min(100%,520px);margin-inline:auto}
  .hero .acts .btn{width:auto;min-width:280px}
  .pills{grid-template-columns:repeat(4,max-content);justify-content:center}
  .plans{grid-template-columns:repeat(3,1fr)}
  .plans li{grid-template-columns:1fr;grid-template-areas:"n" "b" "per";row-gap:10px;padding:20px}
  .plans b{justify-self:start;font-size:32px}
  .starts ul{grid-template-columns:1fr 1fr}
  .starts li{padding:12px 14px 12px 12px}
  .steps{grid-template-columns:repeat(3,1fr)}
  .step{padding:16px 16px 22px}
  .step .phone{width:100%}
  .foot-in nav{flex:0 1 auto;order:0;margin-left:auto}
  .foot-in .copy{flex:1 1 100%}
}


/* ---------- Desktop ---------- */
@media (min-width:900px){
  :root{--sec:120px;--head-gap:48px}
  .step{padding:26px 26px 30px}
  .step .phone{width:min(82%,300px)}
  .step h3{font-size:27px}
  .wm{height:44px}
  .top{min-height:96px}
  .nav{display:flex;gap:30px;margin-right:12px}
  .nav a{padding:8px 0;color:var(--ink-2);font-size:15px;font-weight:500;text-decoration:none}
  .nav a:hover{color:var(--ink)}
  h2{font-size:clamp(40px,3.8vw,54px)}
  .sec-head .lede{font-size:19px;max-width:44ch}

  /* The table takes about 64% of the width; the headline column stays tight; the facts run along the foot. */
  .hero-in{display:grid;grid-template-columns:minmax(0,36fr) minmax(0,64fr);grid-template-areas:"copy stage" "pills pills";align-items:center;column-gap:40px;row-gap:12px;padding-bottom:0}
  .hero-copy{grid-area:copy;align-items:flex-start;text-align:left}
  /* With an invite, its band heads the copy's column, the two together centred against the table. */
  html.invited .hero-in{grid-template-areas:". stage" "invite stage" "copy stage" ". stage" "pills pills";grid-template-rows:1fr auto auto 1fr auto}
  html.invited .invite{grid-area:invite;width:100%;margin:0 0 30px}
  :root{--invite-h:216px}
  html.invited .hand{width:100%}
  .stage{grid-area:stage;order:0}
  .stage::before{inset:-16% -12%}
  .hand{width:100%;min-width:0;aspect-ratio:1360/1036}
  h1{font-size:clamp(44px,3.7vw,54px);margin-bottom:20px}
  .hero .lede{font-size:19px;max-width:30ch}
  .acts{margin-top:32px}
  .hero .acts .btn{min-width:220px}
  .hero .acts{display:flex;align-items:center;gap:22px}
  .have{display:inline-block;margin:0;white-space:nowrap}
  .hero .fine{text-align:left}
  .pills{grid-area:pills;justify-content:start;gap:12px;margin-top:8px}


  .showcase{padding:40px 0}
  .phone.big{width:min(100%,360px,calc((100vh - 180px) * .462))}

  .plus{padding:76px 64px 48px;border-radius:40px}
  .plus-mark .ql{height:44px}
  .plus .lede{font-size:19px}

  .climb-top{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:end;gap:64px;margin-bottom:40px}
  .starts{padding:24px}
  .starts ul{grid-template-columns:1fr 1fr;gap:10px}
  .starts li{padding:14px 16px}

  /* Past the basics mirrors Every answer: the phone on the left. */

  .faq-in{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:64px;align-items:start}
  .qa summary{font-size:18px;min-height:64px}

  .cta{padding-bottom:120px}
  .cta-art{width:320px;margin-bottom:12px}
  .cta h2{font-size:clamp(46px,4.5vw,62px)}
}

/* Wide: the phone keeps to the outer side of its column and the line floats over its inner edge. */
@media (min-width:1100px){
  /* The stage is the phone's width (a phone, as a size container, has no width of its own to fit). */
  .showcase{width:min(100%,360px,calc((100vh - 180px) * .462));margin-left:auto}
  .showcase .phone.big{width:100%}
  .why .showcase{width:min(100%,440px)}
  .crop{width:100%}
  .said.float{position:absolute;right:calc(100% - 28px);bottom:13%;width:250px;margin:0;padding:20px 22px 18px}
  .said.float p{font-size:24px}
  .showcase.boards-show{width:min(100%,414px)}
  .boards-show .said.float{left:calc(100% + 20px);bottom:5%;width:220px}
}

/* ---------- Legal pages ---------- */
.pg-top{display:flex;align-items:center;min-height:72px;padding:0 24px;max-width:720px;margin:0 auto}
.pg-top a{display:inline-flex;padding:10px 0;color:var(--ink)}
.pg-top .wm{height:32px}
.logo{display:inline-flex;align-items:center;color:var(--ink)}
.pg{max-width:720px;margin:0 auto;padding:12px 24px 56px}
.pg h1{margin:8px 0 6px;font:700 clamp(30px,7.4vw,40px)/1.04 var(--f-display);letter-spacing:-.034em;text-wrap:balance}
.pg h2{margin:36px 0 8px;font:700 21px/1.2 var(--f-ui);letter-spacing:-.015em}
.pg p,.pg li{color:var(--ink-2);max-width:66ch;text-wrap:pretty}
.pg p{margin:0 0 14px}
.pg ul,.pg ol{margin:0 0 14px;padding-left:22px}
.pg li{margin:0 0 6px}
.pg a{color:var(--ink);text-decoration-color:var(--line-strong);text-underline-offset:3px;text-decoration-thickness:1.5px}
.pg a:hover{text-decoration-color:var(--ink)}
.pg .lede{font-size:18px;color:var(--ink)}
.pg .upd{font-size:14px;color:var(--muted);margin-bottom:24px}
.pg .fh-play{margin:-8px 0 22px}
.pg .fh-play a.btn.btn-ink{color:var(--on-ink)}
.pg a.btn{margin:6px 0 14px;text-decoration:none;width:auto;color:var(--on-ink)}
.pg table{border-collapse:collapse;width:100%;margin:0 0 16px;font-size:15px}
.pg th,.pg td{text-align:left;vertical-align:top;padding:10px 12px 10px 0;border-bottom:1px solid var(--line);color:var(--ink-2)}
.pg th{color:var(--ink);font-weight:600;width:34%}
@media (max-width:480px){.pg th,.pg td{display:block;width:auto;padding:0}.pg th{padding-top:10px}.pg td{padding-bottom:10px;border-bottom:1px solid var(--line)}.pg tr th{border:0}}
.pg-note{background:var(--sunken);border-radius:16px;padding:16px 18px;margin:0 0 18px}
.pg-note p{margin:0}
.foot{padding:20px 24px calc(28px + env(safe-area-inset-bottom));display:flex;flex-wrap:wrap;gap:6px 20px;justify-content:center;font-size:14px;color:var(--muted);border-top:1px solid var(--line)}
.foot a{color:var(--ink-2);text-decoration:none;padding:10px 2px;min-height:24px}
.foot a:hover{text-decoration:underline;text-underline-offset:3px}
.foot span{padding:10px 0}
/* The social links, a quiet group after Support: YouTube, Instagram, Discord, a middot between. */
.soc,.foot .soc{display:inline-flex;align-items:center;padding:0}
.soc a+a::before{content:"\b7";display:inline-block;margin-right:10px;color:var(--muted);text-decoration:none}
.soc a+a{margin-left:10px}

/* The consent bar (site.js): where consent is due, one line and two equal buttons floating at the foot of the screen. */
.consent{position:fixed;z-index:60;left:50%;bottom:calc(16px + env(safe-area-inset-bottom));transform:translateX(-50%);width:min(560px,calc(100% - 2 * var(--gut)));display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;padding:12px 12px 12px 16px;border-radius:18px;background:var(--surface);color:var(--ink-2);box-shadow:inset 0 0 0 1px var(--line),var(--sh-3);font-size:14px;line-height:20px}
.consent p{flex:1 1 220px;margin:0}
.consent a{color:var(--ink);font-weight:600;white-space:nowrap;text-underline-offset:3px}
.consent-acts{display:flex;flex:1 1 200px;gap:8px}
.consent-btn{flex:1 1 0;min-width:0;min-height:44px;background:var(--surface);color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--line-strong)}
.consent-btn:hover{background:var(--sunken)}

/* The search pages (tools/seo.mjs): hand rankings, pot odds, the glossary and the famous hands. They use the policy pages' column
   and add only what they show: a breadcrumb, cards as text, the ladder, term lists and the quiet link into the app. */
.pg-crumb{margin:0 0 10px;color:var(--muted);font-size:14px}
.pg-crumb a{color:var(--ink-2)}
.pg h3{margin:22px 0 6px;font:700 17px/1.25 var(--f-ui);letter-spacing:-.01em}
.pg-ladder{list-style:none;padding:0}
.pg-ladder li{margin:0;padding:6px 0 12px;border-bottom:1px solid var(--line)}
.pg-ladder h3{margin-top:14px}
.pg-ladder p{margin:0 0 6px}
.pg-cards{display:inline-flex;flex-wrap:wrap;gap:6px;vertical-align:middle}
.cd{display:inline-flex;align-items:center;justify-content:center;min-width:2.5em;height:2.6em;padding:0 .35em;border-radius:var(--cd-r);background:var(--surface);box-shadow:inset 0 0 0 1px var(--line),var(--sh-1);color:var(--ink);font:700 16px/1 var(--f-ui);white-space:nowrap}
.cd.r{color:#c62835}
@media (prefers-color-scheme:dark){.cd.r{color:#ff6b75}}
.pg-eg{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;margin:0 0 12px}
.pg-eg>span:first-child{color:var(--ink-2);font-size:15px}
.pg-log{margin:0 0 6px}
.pg-terms{list-style:none;padding:0}
.pg-terms li{margin:0;padding:10px 0;border-bottom:1px solid var(--line)}
.pg-terms b{font-weight:700}
.pg-go{margin:36px 0 0;font-size:15px}
.pg-go a{font-weight:600}
.pg-go span{color:var(--muted)}
.pg-learn{display:flex;flex-wrap:wrap;gap:4px 18px;margin:40px 0 0;padding-top:16px;border-top:1px solid var(--line);font-size:14.5px}
.pg-learn a{padding:8px 0;color:var(--ink-2);text-decoration:none}
.pg-learn a:hover{text-decoration:underline;text-underline-offset:3px}
@media (max-width:480px){.pg table{font-size:14px}.pg th,.pg td{padding-right:8px}}
.pg-fine{margin:32px 0 0;color:var(--muted);font-size:14px}

/* The call to action band (ctaBand in tools/seo.mjs): the felt card the Hand of the Day asks from, a headline, the button and
   the fine print beside one of the app's own phone screens. About a third of a phone's screen; wider, side by side and under
   300px tall, the phone scaled down with it. */
.cta-band{display:grid;grid-template-columns:minmax(0,1fr) clamp(80px,26vw,104px);align-items:center;gap:14px;margin:26px 0;padding:16px 16px 16px 20px;border-radius:26px;color:#fff;background:radial-gradient(120% 120% at 15% 0%,#1f6b57,#12423a 58%,#0b2824);box-shadow:inset 0 0 0 1px rgba(255,255,255,.12),0 18px 40px -22px rgba(14,17,22,.55)}
.cta-band.cta-end{margin:40px 0 0}
.cta-copy{display:grid;justify-items:start;gap:12px;min-width:0}
.pg .cta-h{margin:0;max-width:20ch;color:#fff;font:700 clamp(19px,5.4vw,21px)/1.15 var(--f-display);letter-spacing:-.022em;text-wrap:balance}
.cta-nw{white-space:nowrap}
.pg .cta-band .btn{margin:0;padding:0 20px}
.pg .cta-band .cta-alt{color:#fff;font-size:15px;font-weight:600;text-decoration:underline;text-underline-offset:3px;text-decoration-color:rgba(255,255,255,.5)}
.pg .cta-fine{margin:0;color:rgba(255,255,255,.72);font-size:13px;line-height:1.3}
.cta-phone{display:block;padding:3px;border-radius:20px;background:#05070a;box-shadow:0 0 0 1px rgba(255,255,255,.16),0 20px 32px -16px rgba(0,0,0,.75);transform:rotate(3deg)}
.cta-phone img{border-radius:17px}
@media (max-width:379px){.pg .cta-band .btn{min-height:50px;padding:0 16px;font-size:16px}}
@media (min-width:640px){
  .cta-band{grid-template-columns:minmax(0,1fr) 104px;gap:32px;padding:20px 40px 20px 36px}
  .cta-copy{grid-template-columns:auto minmax(0,1fr);align-items:center;gap:20px 18px}
  .pg .cta-h{grid-column:1/-1;max-width:22ch;font-size:30px;line-height:1.1}
}
/* A wide page (pg-wide): the copy takes the left, the phone stands in the middle of the right, a little larger. */
@media (min-width:900px){
  .pg-wide .cta-band{grid-template-columns:minmax(0,1.25fr) minmax(0,1fr)}
  .pg-wide .cta-phone{justify-self:center;width:112px}
  .pg-wide .cta-h{font-size:32px}
}
@media (prefers-color-scheme:dark){
  .cta-band{background:radial-gradient(120% 120% at 15% 0%,#1b5e4d,#0f3a33 58%,#082220);box-shadow:inset 0 0 0 1px rgba(255,255,255,.1),0 18px 40px -22px rgba(0,0,0,.9)}
}
/* The top band (cta-top): quieter than the end band, so the two never look alike. The page's own surface with a little
   felt glowing from the chip, the headline beside the chip and one button; a phone stacks the button under the headline. */
.cta-band.cta-top{grid-template-columns:44px minmax(0,1fr);gap:14px;margin:24px 0;padding:14px 16px;border-radius:22px;color:var(--ink);background:radial-gradient(60% 150% at 0% 50%,rgba(31,107,87,.16),transparent 70%),var(--surface);box-shadow:inset 0 0 0 1px var(--line)}
.cta-top .cta-chip{grid-area:1/1;width:44px;height:auto;align-self:start}
.cta-top .cta-copy{grid-area:1/2;gap:10px}
.pg .cta-top .cta-h{max-width:none;color:var(--ink);font-size:17px;line-height:1.2}
.pg .cta-top .btn{min-height:44px;padding:0 18px;font-size:15px}
@media (min-width:640px){
  .cta-band.cta-top{grid-template-columns:52px minmax(0,1fr);gap:18px;padding:14px 16px 14px 18px}
  .cta-top .cta-chip{width:52px;align-self:center}
  .cta-top .cta-copy{grid-template-columns:minmax(0,1fr) auto;gap:16px}
  .pg .cta-top .cta-h{grid-column:auto;font-size:20px}
}
@media (prefers-color-scheme:dark){
  .cta-band.cta-top{background:radial-gradient(60% 150% at 0% 50%,rgba(31,107,87,.28),transparent 70%),var(--surface)}
}

/* The Duolingo-style page: three of the app's own screens in a row, smaller than a phone's width, stacked no further than the column. */
.pg-shots{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:8px 0 8px;padding:0}
.pg-shots figure{margin:0}
.pg-shots img{display:block;width:100%;height:auto;border-radius:18px;box-shadow:0 0 0 1px var(--line),0 10px 24px -14px rgba(14,17,22,.45);background:var(--sunken)}
.pg-shots figcaption{margin-top:8px;color:var(--muted);font-size:13px;text-align:center}

/* Quads+, from the app's own page: Welcome to the club, three parts of feature cards, the plans, what is free beside what it adds. */
.plus-eb{margin:0 0 14px;color:var(--plus-on-2);font:500 12.5px/1 var(--f-mono);letter-spacing:.14em;text-transform:uppercase}
.plus-free{margin-top:28px;border-top:1px solid var(--plus-line);border-bottom:1px solid var(--plus-line)}
.plus-free summary{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:56px;color:var(--plus-on);font:700 20px/1.2 var(--f-display);letter-spacing:-.02em;cursor:pointer;list-style:none}
.plus-free summary::-webkit-details-marker{display:none}
.plus-free summary::after{content:"";flex:none;width:10px;height:10px;border-right:2px solid var(--plus-on-2);border-bottom:2px solid var(--plus-on-2);rotate:45deg;translate:0 -2px;transition:rotate .2s}
.plus-free[open] summary::after{rotate:225deg;translate:0 2px}
.plus-free summary .ql{height:1em}
.plus-cmp{width:100%;margin:6px 0 14px;border-collapse:collapse;color:var(--plus-on);font-size:15px;line-height:1.4}
.plus-cmp th,.plus-cmp td{padding:12px 14px 12px 0;border-top:1px solid var(--plus-line);text-align:left;vertical-align:top}
.plus-cmp thead th{border-top:0;color:var(--plus-on-2);font:500 12px/1 var(--f-mono);letter-spacing:.12em;text-transform:uppercase}
.plus-cmp thead .ql{height:1.1em;vertical-align:-.2em}
.plus-cmp tbody th{width:26%;font-weight:600}
.plus-cmp td{color:var(--plus-on-2)}
.plus-cmp td:last-child{color:var(--plus-on)}
.plus-stays{margin-top:18px}
.plus-stays b{color:var(--plus-on)}
@media (max-width:699px){
  .plus-cmp thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .plus-cmp tr{display:block;padding:12px 0;border-top:1px solid var(--plus-line)}
  .plus-cmp th,.plus-cmp td{display:block;width:auto;padding:0;border:0}
  .plus-cmp tbody th{margin-bottom:4px}
  .plus-cmp td::before{content:attr(data-l) ": ";color:var(--plus-on-2);font:500 11.5px/1 var(--f-mono);letter-spacing:.08em;text-transform:uppercase}
  .plus-cmp td{margin-top:3px}
}
.more-list{display:grid;gap:12px;margin:0;padding:0;list-style:none}
.more-list li{align-content:start;display:grid;grid-template-columns:44px 1fr;column-gap:14px;align-items:start;padding:18px;border-radius:var(--r-lg,22px);background:var(--surface);box-shadow:inset 0 0 0 1px var(--line)}
.more-list img{grid-row:1/3;width:44px;height:auto}
.more-list h3{margin:0;font:700 19px/1.2 var(--f-display);letter-spacing:-.02em}
.more-list p{margin:6px 0 0;color:var(--ink-2);font-size:15px;line-height:1.5;max-width:56ch}
@media (min-width:900px){.more-list{grid-template-columns:repeat(2,1fr);gap:16px}}
/* The promise (no forced ads, no paywall): three cards in a row, then its own way in. */
.promise .more-list h3 .ql{height:.92em;vertical-align:-.16em}
@media (min-width:900px){.promise .more-list{grid-template-columns:repeat(3,1fr)}}

/* Quads+ cards: one column on a phone, then each part's cards in one row (two or three), every stage the same shape. */
@media (min-width:700px){
  .pf-grid{grid-template-columns:repeat(var(--n,3),minmax(0,1fr));gap:16px}
  .pf-grid[data-n="2"]{--n:2}
  .pf{grid-row:span 3;grid-template-rows:subgrid;row-gap:0}
  .pp-t{font-size:24px}
}
@media (min-width:1100px){
  .pp{margin-top:64px}
  .pp-head{margin-bottom:24px}
  .pf-grid{gap:20px}
  .pf{padding:10px 10px 20px}
  .pf h4{font-size:18px}
  .pf p{font-size:15px}
  .plus-buy{margin-top:64px}
}
@media (max-width:899px){
  .plans li{padding:12px 16px}
  .plans{gap:8px}
}

/* Starting hands chart (tools/seo.mjs): four 13 x 13 grids, one shown at a time by the radio picked above them (no script), all four on the printed sheet. */
.sc-r{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.sc-tabs{display:flex;gap:6px;margin:18px 0 16px}
.sc-tabs label{flex:1 1 0;min-width:0;display:flex;align-items:center;justify-content:center;min-height:44px;padding:0 6px;border-radius:var(--r-pill);box-shadow:inset 0 0 0 1.5px var(--line-strong);color:var(--ink-2);font:600 15px/1.2 var(--f-ui);cursor:pointer;user-select:none}
.sc-v{display:none}
.pg .sc-v h2{margin:0 0 4px;font-size:19px}
.sc-who{font-size:14.5px}
.pg .sc-t{table-layout:fixed;width:100%;margin:0 0 14px;border-collapse:separate;border-spacing:1px;font:500 clamp(7.5px,2.55vw,12px)/1 var(--f-mono)}
.pg .sc-t th,.pg .sc-t td{display:table-cell;width:auto;padding:0;border:0;text-align:center;vertical-align:middle;height:clamp(20px,5.6vw,34px)}
.pg .sc-t th{height:auto;padding-bottom:3px;color:var(--muted);font-weight:600}
.pg .sc-t tbody th{padding:0}
.pg .sc-t td.r{background:var(--ink);color:var(--on-ink);font-weight:600;border-radius:3px}
.pg .sc-t td.f{background:var(--sunken);color:var(--muted);border-radius:3px}
.pg .sc-t caption{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.sc-key{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;font-size:14px}
.sc-chip{display:inline-flex;align-items:center;justify-content:center;min-width:42px;height:26px;padding:0 6px;border-radius:5px;font:500 12px/1 var(--f-mono)}
.sc-chip.r{background:var(--ink);color:var(--on-ink);font-weight:600}
.sc-chip.f{background:var(--sunken);color:var(--muted)}
.sc-sep{flex:1 1 100%;color:var(--muted)}
.sc-pdf{display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px}
.sc-pdf span{color:var(--muted);font-size:14px}
.sc-print{display:none}
#sc-early:checked~.sc-views .sc-early,#sc-middle:checked~.sc-views .sc-middle,#sc-late:checked~.sc-views .sc-late,#sc-blinds:checked~.sc-views .sc-blinds{display:block}
#sc-early:checked~.sc-tabs label[for=sc-early],#sc-middle:checked~.sc-tabs label[for=sc-middle],#sc-late:checked~.sc-tabs label[for=sc-late],#sc-blinds:checked~.sc-tabs label[for=sc-blinds]{background:var(--ink);box-shadow:none;color:var(--on-ink)}
#sc-early:focus-visible~.sc-tabs label[for=sc-early],#sc-middle:focus-visible~.sc-tabs label[for=sc-middle],#sc-late:focus-visible~.sc-tabs label[for=sc-late],#sc-blinds:focus-visible~.sc-tabs label[for=sc-blinds]{outline:2px solid var(--focus);outline-offset:3px}

/* Best apps to learn poker: a small table that becomes cards on a phone, then a card for each app. */
.pg .ap-t th,.pg .ap-t td{width:auto}
.pg .ap-t thead th{font-size:13px;color:var(--muted)}
.ap-list{list-style:none;margin:0 0 14px;padding:0;display:grid;gap:12px}
.pg .ap-list>li{max-width:none;margin:0;padding:18px;border-radius:22px;background:var(--surface);box-shadow:inset 0 0 0 1px var(--line)}
.pg .ap-list h3{margin:0 0 10px;font:700 20px/1.2 var(--f-display);letter-spacing:-.02em}
.ap-d{display:grid;gap:10px;margin:0}
.ap-d div{display:grid;gap:2px}
.ap-d dt{color:var(--muted);font:500 11.5px/1.2 var(--f-mono);letter-spacing:.08em;text-transform:uppercase}
.ap-d dd{margin:0;color:var(--ink-2);font-size:15px;line-height:1.5}
.pg .ap-src{margin:12px 0 0;color:var(--muted);font-size:13.5px}
.ap-refs{font-size:14.5px;word-break:break-word}
@media (max-width:699px){
  .pg .ap-t thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .pg .ap-t tr{display:block;padding:12px 0;border-bottom:1px solid var(--line)}
  .pg .ap-t th,.pg .ap-t td{display:block;padding:0;border:0}
  .pg .ap-t tbody th{margin-bottom:4px;font-size:16px}
  .pg .ap-t td{margin-top:3px;font-size:14.5px}
  .pg .ap-t td::before{content:attr(data-l) ": ";color:var(--muted);font:500 11.5px/1 var(--f-mono);letter-spacing:.06em;text-transform:uppercase}
}
@media (min-width:700px){
  .ap-d div{grid-template-columns:110px 1fr;gap:12px}
  .pg .ap-t td,.pg .ap-t th{padding-right:12px}
}

/* The printed chart: one sheet, the four positions in a 2 x 2, the page's own text left off. */
@media print{
  :root{color-scheme:light;--paper:#fff;--surface:#fff;--sunken:#fff;--ink:#000;--ink-2:#222;--muted:#666;--line:#ccc;--on-ink:#fff}
  @page{margin:10mm}
  body{background:#fff;color:#000}
  .pg-top,.foot,.consent{display:none!important}
  .pg{max-width:none;padding:0}
  .pg>:not(h1):not(.lede):not(.sc){display:none!important}
  .pg h1{margin:0 0 2mm;font-size:18pt}
  .pg .lede{margin:0 0 3mm;font-size:9pt}
  .sc-tabs,.sc-pdf,.sc-key .sc-sep{display:none}
  .sc-print{display:block;margin:3mm 0 0;font-size:8pt;color:#444}
  .sc-views{display:grid;grid-template-columns:1fr 1fr;gap:6mm}
  .sc-v{display:block!important;break-inside:avoid}
  .pg .sc-v h2{font-size:10pt}
  .sc-who{margin:0 0 2mm;font-size:6.5pt;line-height:1.3}
  .pg .sc-t{font-size:6.2pt;border-spacing:0;margin:0}
  .pg .sc-t th,.pg .sc-t td{height:5.6mm}
  .pg .sc-t th{height:auto;padding-bottom:.6mm}
  .pg .sc-t td{border:.25pt solid #bbb;border-radius:0;-webkit-print-color-adjust:exact;print-color-adjust:exact}
  .pg .sc-t td.r{background:#000;color:#fff}
  .pg .sc-t td.f{background:#fff;color:#999}
  .sc-key{margin:3mm 0 0;font-size:8pt}
  .sc-chip{-webkit-print-color-adjust:exact;print-color-adjust:exact;border:.25pt solid #999}
  .sc-chip.r{background:#000;color:#fff}
  .sc-chip.f{background:#fff;color:#777}
}

/* Hand of the Day: the answer behind a tap, the working as steps, and the neighbouring days. */
.pg-answer{margin:14px 0 20px;border-radius:16px;background:var(--sunken)}
.pg-answer>summary{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:52px;padding:0 18px;color:var(--ink);font:600 16px/1.2 var(--f-ui);cursor:pointer;list-style:none}
.pg-answer>summary::-webkit-details-marker{display:none}
.pg-answer>summary::after{content:"";flex:none;width:9px;height:9px;border-right:2px solid var(--ink-2);border-bottom:2px solid var(--ink-2);rotate:45deg;translate:0 -2px;transition:rotate .2s}
.pg-answer[open]>summary::after{rotate:225deg;translate:0 2px}
.pg-answer>:not(summary){margin-left:18px;margin-right:18px}
.pg-answer>:last-child{margin-bottom:18px}
.pg .pg-math{padding-left:20px}
.pg-math i{color:var(--muted);font-style:normal;font-size:14px}
.pg-days{display:flex;justify-content:space-between;gap:12px;margin:28px 0 8px;font-size:15px}
.pg-days a{display:inline-flex;align-items:center;min-height:44px}

/* The call to action under a guide's lede and at its end (tools/seo.mjs): a real button, and the quiet one beside it. */
.btn-quiet{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--line-strong)}
.pg a.btn.btn-quiet{color:var(--ink)}
.pg-cta{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;margin:18px 0 6px}
.pg .pg-cta a.btn{margin:0}
.pg-cta span{color:var(--muted);font-size:14px}
@media (max-width:480px){.pg-cta .btn{flex:1 1 100%}}

/* An app's card header on the roundup: a tile with its initial (no logos, the same ink for all) and its platforms as pills. */
.ap-head{display:flex;align-items:center;gap:14px;margin:0 0 14px}
.ap-tile{flex:none;display:flex;align-items:center;justify-content:center;width:48px;height:48px;border-radius:14px;background:var(--sunken);box-shadow:inset 0 0 0 1px var(--line);color:var(--ink);font:700 19px/1 var(--f-display);letter-spacing:-.02em}
.pg .ap-head h3{margin:0 0 6px}
.pg .ap-pills{display:flex;flex-wrap:wrap;gap:6px;margin:0;padding:0;list-style:none}
.pg .ap-pills li{margin:0;padding:3px 10px;border-radius:var(--r-pill);background:var(--sunken);box-shadow:inset 0 0 0 1px var(--line);color:var(--ink-2);font:500 12px/1.4 var(--f-mono)}

/* The poker odds calculator (/poker-odds-calculator, js/odds.js): the app's cards (a light face in both themes, its rank over
   its suit), the slots to fill, the odds, and a deck of 52 to pick from, a suit to a row (two on a phone). */
.vh{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.odds{--cw:46px;margin:18px 0 8px;padding:16px;border-radius:22px;background:var(--surface);box-shadow:inset 0 0 0 1px var(--line),var(--sh-1)}
.odds-set{display:flex;flex-wrap:wrap;gap:14px 22px}
.odds-group{min-width:0}
.odds-lab{max-width:none!important;margin:0 0 8px!important;color:var(--muted)!important;font:500 11.5px/1 var(--f-mono);letter-spacing:.12em;text-transform:uppercase}
.odds-slots{display:flex;align-items:center;gap:6px}
.odds-gap{width:4px}
.odds-slot,.odds-pick{position:relative;display:grid;place-items:center;align-content:center;gap:1px;padding:0;border:0;border-radius:calc(var(--cw)*.12);background:#fff;color:#0e1116;font:700 calc(var(--cw)*.46)/1 var(--f-display);letter-spacing:-.03em;cursor:pointer;touch-action:manipulation;box-shadow:0 0 0 1px rgba(14,17,22,.1),0 1px 2px rgba(14,17,22,.12)}
.odds-slot{width:var(--cw);height:calc(var(--cw)*1.38)}
.odds-slot:empty{background:transparent;box-shadow:inset 0 0 0 1.5px var(--line-strong)}
.odds-slot:empty::after{content:"+";color:var(--muted);font:400 calc(var(--cw)*.42)/1 var(--f-ui)}
.odds-slot.on{box-shadow:0 0 0 2px var(--surface),0 0 0 4px var(--ink)}
.odds-slot.on:empty{box-shadow:inset 0 0 0 1.5px var(--ink),0 0 0 2px var(--surface),0 0 0 4px var(--ink)}
.odds .red{color:#c62835}
.odds-s{width:.82em;height:.82em;fill:currentColor}
.odds-r{display:block}
.odds-opp{display:flex;flex-basis:100%;flex-wrap:wrap;align-items:center;gap:8px 14px}
.odds-opp .odds-lab{flex-basis:100%;width:100%}
.odds-step{display:inline-flex;align-items:center;gap:6px}
.odds-round{width:40px;height:40px;padding:0;border:0;border-radius:50%;background:var(--sunken);color:var(--ink);font:500 22px/1 var(--f-ui);cursor:pointer;touch-action:manipulation}
.odds-round:disabled{opacity:.35;cursor:default}
.odds-n{min-width:1.6em;text-align:center;font:700 22px/1 var(--f-display);font-variant-numeric:tabular-nums}
.odds-mode{display:inline-flex;margin:0;padding:3px;border:0;border-radius:var(--r-pill);background:var(--sunken)}
.odds-mode label{position:relative;display:inline-flex;cursor:pointer}
.odds-mode input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.odds-mode span{display:inline-flex;align-items:center;min-height:34px;padding:0 12px;border-radius:var(--r-pill);color:var(--ink-2);font:600 13.5px/1 var(--f-ui);white-space:nowrap}
.odds-mode input:checked+span{background:var(--surface);color:var(--ink);box-shadow:var(--sh-1)}
.odds-mode input:focus-visible+span{outline:2px solid var(--focus);outline-offset:2px}
.odds-them{flex-basis:100%}
.odds-them[hidden]{display:none}
.odds-result{margin:16px 0 0;padding:14px 0 0;border-top:1px solid var(--line);transition:opacity var(--d-base) var(--ease-out)}
.odds-result.idle .odds-bar,.odds-result.idle .odds-facts,.odds-result.idle .odds-conf{opacity:.35}
.odds-hint{margin:0 0 8px!important;color:var(--ink)!important;font-weight:600}
.odds-hint:empty{display:none}
.odds-bar{display:grid;grid-template-columns:3.4em 1fr 4.2em;align-items:center;gap:10px;margin:0 0 8px}
.odds-k{color:var(--ink-2);font-size:14px}
.odds-track{height:10px;border-radius:var(--r-pill);background:var(--sunken);overflow:hidden}
.odds-track i{display:block;height:100%;border-radius:inherit;transition:width 260ms var(--ease-out)}
.odds-win .odds-track i{background:#12805f}
.odds-tie .odds-track i{background:var(--muted)}
.odds-lose .odds-track i{background:#d23c35}
.odds-bar b{text-align:right;font:700 17px/1 var(--f-display);font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.odds-win b{font-size:22px}
.odds-facts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 16px;margin:14px 0 0}
.odds-facts div{min-width:0}
.odds-outs{grid-column:1/-1}
.odds-facts dt{color:var(--muted);font-size:13px}
.odds-facts dd{margin:2px 0 0;color:var(--ink);font-weight:600}
.odds-conf{margin:10px 0 0!important;color:var(--muted)!important;font-size:13px}
.odds-pickbar{display:flex;align-items:center;justify-content:space-between;margin:18px 0 0}
.odds-pickbar .odds-lab{margin:0!important}
.odds-clear{min-height:36px;padding:0 14px;border:0;border-radius:var(--r-pill);background:var(--sunken);color:var(--ink);font:600 14px/1 var(--f-ui);cursor:pointer}
.odds-grid{display:grid;gap:8px;margin:10px 0 0}
.odds-suit{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:5px}
.odds-pick{width:100%;aspect-ratio:5/7;border-radius:6px;font-size:clamp(14px,4.6vw,20px)}
.odds-pick[aria-pressed="true"]{opacity:.22;box-shadow:inset 0 0 0 1px rgba(14,17,22,.25)}
.odds-pick:focus-visible,.odds-slot:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.odds-cta .btn{max-width:100%;white-space:normal;text-align:center;line-height:1.25;padding-block:10px}
.odds-nojs{margin:12px 0 0!important;color:var(--muted)!important;font-size:14px}
@media (prefers-color-scheme:dark){
  .odds-slot,.odds-pick{background:#e9ecf1;box-shadow:0 0 0 1px rgba(0,0,0,.4),0 1px 2px rgba(0,0,0,.5)}
  .odds-slot:empty{background:transparent;box-shadow:inset 0 0 0 1.5px var(--line-strong)}
  .odds-pick[aria-pressed="true"]{opacity:.2}
}
@media (max-width:379px){.odds{--cw:40px;padding:14px 12px}.odds-gap{width:2px}.odds-slots{gap:5px}}
@media (min-width:600px){
  .odds{--cw:52px;padding:20px 22px}
  .odds-suit{grid-template-columns:repeat(13,minmax(0,1fr));gap:6px}
  .odds-pick{font-size:19px}
  .odds-facts{grid-template-columns:repeat(3,minmax(0,1fr))}
  .odds-outs{grid-column:auto}
}

/* ===== Guide pages: shared components (tools/seo.mjs: cta, tiles, linkTiles, steps, stat, tableDiagram, the ranks and the pot example) ===== */
.pg-sub{color:var(--muted)}
.pg-grid{list-style:none;margin:8px 0 16px;padding:0;display:grid;grid-template-columns:minmax(0,1fr);gap:10px}
.pg .pg-grid>li{margin:0;max-width:none}
.pg .pg-tile{display:grid;align-content:start;gap:4px;margin:0;padding:14px 16px;border-radius:18px;background:var(--surface);box-shadow:inset 0 0 0 1px var(--line);color:var(--ink-2);font-size:15px;line-height:1.45;text-decoration:none;max-width:none}
.pg .pg-tile>b{color:var(--ink);font:700 16.5px/1.25 var(--f-ui);letter-spacing:-.01em}
.pg .pg-tile>b a{text-decoration:none}
.pg .pg-tile>span{display:block;color:var(--ink-2)}
.pg a.pg-tile:hover{box-shadow:inset 0 0 0 1.5px var(--line-strong)}
.pg a.pg-tile>b::after{content:" \2192";color:var(--muted)}
.pg .pg-tile .pg-big{color:var(--ink);font:700 26px/1.1 var(--f-display);letter-spacing:-.03em}
.pg .pg-tile p{margin:0 0 8px;max-width:none}
.pg .pg-tile h3{margin:0 0 6px}
.pg .pg-block{margin:0 0 10px;gap:0}
@media (min-width:600px){.pg-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}

.pg-steps{list-style:none;margin:8px 0 16px;padding:0;display:grid;gap:10px;counter-reset:st}
.pg .pg-steps>li{counter-increment:st;position:relative;display:grid;gap:2px;margin:0;padding:14px 16px 14px 62px;border-radius:18px;background:var(--surface);box-shadow:inset 0 0 0 1px var(--line);max-width:none;font-size:15px;line-height:1.45}
.pg-steps>li::before{content:counter(st);position:absolute;left:14px;top:50%;translate:0 -50%;display:flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:50%;background:var(--ink);color:var(--on-ink);font:700 16px/1 var(--f-display)}
.pg .pg-steps>li>b{color:var(--ink);font:700 16.5px/1.25 var(--f-ui);letter-spacing:-.01em}
.pg .pg-steps>li>span{color:var(--ink-2)}

.pg-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(96px,1fr));gap:8px;margin:8px 0 16px}
.pg .pg-stat{display:grid;gap:2px;margin:0;padding:14px 16px;border-radius:18px;background:var(--sunken);max-width:none}
.pg-stat b{color:var(--ink);font:700 clamp(34px,9vw,44px)/1 var(--f-display);letter-spacing:-.04em}
.pg-stat span{color:var(--ink-2);font-size:14px;line-height:1.35}

.pg-diagram{margin:10px 0 16px;padding:var(--p-diagram);border-radius:var(--r-diagram);background:var(--surface);box-shadow:inset 0 0 0 1px var(--line)}
.pg-diagram svg{display:block;width:100%;max-width:420px;height:auto;margin:0 auto}
.pg-diagram figcaption{margin-top:6px;color:var(--muted);font-size:14px;text-align:center}
.pg-felt{fill:var(--sunken);stroke:var(--line-strong);stroke-width:1.5}
.pg-felt-t{fill:var(--muted);font:500 10px var(--f-mono);letter-spacing:.04em}
.pg-seat circle{fill:var(--surface);stroke:var(--line-strong);stroke-width:1.5}
.pg-seat text{fill:var(--ink-2);font:600 10px var(--f-mono)}
.pg-seat.on circle{fill:var(--ink);stroke:var(--ink)}
.pg-seat.on text{fill:var(--on-ink)}

/* The streets: five board slots filling up, one row a street. */
.pg-streets>li{padding-left:16px!important}
.pg-streets>li::before{display:none}
.pg-slots{display:flex;gap:4px;margin-bottom:6px}
.pg-slots i{width:22px;height:30px;border-radius:5px;box-shadow:inset 0 0 0 1.5px var(--line-strong)}
.pg-slots i.on{background:var(--ink);box-shadow:none}

/* The pot example: a pot, a bet and the call, and the call as a share of what will be in the middle. */
.pg-potrow{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.pg-pt{display:grid;gap:2px;padding:10px 6px;border-radius:max(8px,calc(var(--r-diagram) - var(--p-diagram)));background:var(--sunken);text-align:center}
.pg-pt i{color:var(--muted);font:500 11.5px/1.2 var(--f-mono);letter-spacing:.06em;text-transform:uppercase;font-style:normal}
.pg-pt b{color:var(--ink);font:700 28px/1.1 var(--f-display);letter-spacing:-.03em}
.pg-pt.you{background:var(--ink)}
.pg-pt.you i{color:var(--on-ink);opacity:.75}
.pg-pt.you b{color:var(--on-ink)}
.pg-bar{height:14px;margin:12px 0 4px;border-radius:var(--r-pill);background:var(--sunken);box-shadow:inset 0 0 0 1px var(--line);overflow:hidden}
.pg-bar i{display:block;height:100%;background:var(--ink)}

/* Hand rankings: a number, the name, the cards large, the rule and how often it comes up. */
.pg-ranks{display:grid;gap:10px}
.pg .pg-ranks>li{margin:0;padding:14px 16px;border-radius:18px;background:var(--surface);box-shadow:inset 0 0 0 1px var(--line);border-bottom:0;max-width:none}
.pg-n{display:flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:50%;background:var(--ink);color:var(--on-ink);font:700 16px/1 var(--f-display)}
.pg-rh{display:flex;align-items:center;gap:12px;margin:0 0 10px}
.pg .pg-ranks h3{margin:0;font:700 19px/1.2 var(--f-display);letter-spacing:-.02em}
.pg .pg-ranks h3 a{text-decoration:none}
.pg .pg-ranks .pg-cards{margin-bottom:8px}
.pg .pg-ranks .cd{font-size:18px}
.pg .pg-ranks p{margin:0 0 4px;font-size:15px}
.pg .pg-ranks .pg-odds{color:var(--muted);font-size:14px}
.pg-cta a.btn{margin:0}
.pg-cta .btn{max-width:100%;white-space:normal;text-align:center;line-height:1.2;padding-block:12px}
.pg ul.pg-grid,.pg ol.pg-steps,.pg ol.pg-ranks{margin:8px 0 16px;padding:0}
.pg-stats.pg-four{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (min-width:600px){.pg-stats.pg-four{grid-template-columns:repeat(4,minmax(0,1fr))}}

/* Hand of the Day: the spot drawn from cards, pips, chips and pills (HTML and CSS only), the choices, the answer in tiles, the archive grid. */
.pg-wide{max-width:980px}
body:has(.pg-wide) .pg-top{max-width:980px}
.pcs{display:inline-flex;flex-wrap:nowrap;gap:6px;vertical-align:middle}
.pc{display:inline-grid;grid-template-rows:auto 1fr;justify-items:center;width:40px;height:56px;padding:5px 0 3px;border-radius:7px;background:#fff;box-shadow:inset 0 0 0 1px rgba(14,17,22,.16),0 1px 2px rgba(14,17,22,.14);color:#0e1116;font-family:var(--f-ui);line-height:1}
.pc b{font-size:17px;font-weight:700}
.pc i{align-self:center;font-style:normal;font-size:23px}
.pc.r{color:#c62835}
.pc.new{box-shadow:inset 0 0 0 1px rgba(14,17,22,.16),0 0 0 2px var(--focus)}
.pcs.sm{gap:4px}
.pcs.sm .pc{width:30px;height:42px;padding:3px 0 2px;border-radius:6px}
.pcs.sm .pc b{font-size:13px}
.pcs.sm .pc i{font-size:17px}
.pcs.md .pc{width:48px;height:68px;border-radius:8px}
.pcs.md .pc b{font-size:20px}
.pcs.md .pc i{font-size:29px}
.pips{display:inline-flex;gap:4px;vertical-align:middle}
.pips i{width:7px;height:7px;border-radius:50%;background:var(--line-strong)}
.pips i.on{background:var(--ink)}
.vchip{display:inline-flex;align-items:center;gap:10px;min-width:0}
.vchip>b{display:grid;place-items:center;flex:none;width:36px;height:36px;border-radius:50%;background:var(--ink);color:var(--on-ink);font:700 16px/1 var(--f-display)}
.vchip>span{display:grid;line-height:1.2;font:700 16px/1.2 var(--f-ui);color:var(--ink)}
.vchip em{font:500 13px/1.2 var(--f-ui);font-style:normal;color:var(--muted)}
.vchip.sm>b{width:26px;height:26px;font-size:12px}
.vchip.sm>span{font-size:14px}
.pill{display:inline-flex;align-items:center;gap:7px;padding:6px 12px 6px 8px;border-radius:var(--r-pill);background:var(--sunken);color:var(--ink);font:600 14px/1.2 var(--f-ui);white-space:nowrap}
.chipdot{flex:none;width:16px;height:16px;border-radius:50%;background:radial-gradient(circle,#fff 0 28%,transparent 30%),repeating-conic-gradient(#c62835 0 25deg,#f4f5f7 25deg 50deg);box-shadow:0 0 0 1px rgba(14,17,22,.25)}
.spot{margin:22px 0}
.spot-who{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 16px}
.spot-diff{display:inline-flex;align-items:center;gap:10px;color:var(--muted);font:500 14px/1 var(--f-ui)}
.pg .muted{margin:12px 0 0;color:var(--muted);font-size:14.5px}
.pg .timeline{list-style:none;display:grid;gap:12px;margin:18px 0 22px 6px;padding:0 0 0 18px;border-left:2px solid var(--line-strong)}
.street{position:relative;display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin:0}
.street .sname{position:relative;min-width:58px;color:var(--muted);font:700 12px/1 var(--f-ui);letter-spacing:.1em;text-transform:uppercase}
.hd-acts{display:flex;flex-wrap:wrap;gap:6px}
.pg .spot h2{margin:8px 0 12px;font:700 22px/1.2 var(--f-display);letter-spacing:-.02em}
.pg .choices{list-style:none;display:grid;gap:10px;margin:0 0 6px;padding:0}
.pg .choices li{margin:0;max-width:none}
.choice{display:flex;align-items:center;gap:12px;width:100%;min-height:54px;padding:0 16px;border:0;border-radius:16px;background:var(--surface);box-shadow:inset 0 0 0 1.5px var(--line-strong);color:var(--ink);font:600 16px/1.2 var(--f-ui);text-align:left;cursor:pointer;transition:transform var(--d-fast) var(--ease-out),box-shadow var(--d-base) var(--ease-out)}
.choice:hover{box-shadow:inset 0 0 0 1.5px var(--ink)}
.choice:active{transform:scale(.985)}
.choice .letter{display:grid;place-items:center;flex:none;width:28px;height:28px;border-radius:50%;background:var(--sunken);color:var(--ink-2);font:700 13px/1 var(--f-mono)}
.spot:has(.pg-answer[open]) .choice[data-right]{background:color-mix(in srgb,#1f9d6a 12%,var(--surface));box-shadow:inset 0 0 0 2px #1f9d6a}
.spot:has(.pg-answer[open]) .choice[data-picked]:not([data-right]){box-shadow:inset 0 0 0 2px #c62835}
.hd-big{margin:6px 0 10px;color:var(--ink);font:600 20px/1.25 var(--f-display);letter-spacing:-.015em}
.hd-big b{font-weight:700}
.hd-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:10px;margin:0 18px 14px}
.hd-stats>div{padding:12px 14px;border-radius:14px;background:var(--surface);box-shadow:inset 0 0 0 1px var(--line)}
.hd-stats b{display:block;font:700 30px/1.05 var(--f-display);letter-spacing:-.03em;color:var(--ink)}
.hd-stats span{display:block;margin-top:4px;color:var(--muted);font-size:13px;line-height:1.3}
.pg-work{margin:0 18px 6px}
.pg-work>summary{display:flex;align-items:center;min-height:44px;color:var(--ink-2);font:600 14px/1 var(--f-ui);cursor:pointer}
.pg-work[open]>summary{margin-bottom:4px}
.pg-answer .pg-work>:not(summary){margin-left:0;margin-right:0}
.decide-cards{display:flex;flex-wrap:wrap;gap:14px 28px;margin:14px 0}
.decide-cards .label{display:block;margin-bottom:6px;color:var(--muted);font:700 12px/1 var(--f-ui);letter-spacing:.1em;text-transform:uppercase}
.hd-stats.money{grid-template-columns:repeat(3,1fr);margin:0 0 12px}
.hd-stats.money b{font-size:26px}
.hd-cta,.pg .pg-go{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;margin:18px 0 22px}
.hd-cta span,.pg .pg-go span{color:var(--muted);font-size:14px}
.pg .hd-cta .btn,.pg .pg-go .btn{margin:0}
.hd-cta .btn,.pg-go .btn{width:100%}
.pg-days{margin-top:8px}
@media (min-width:520px){
  .hd-cta .btn,.pg-go .btn{width:auto;min-width:260px}
  .choices:not(.two){grid-template-columns:1fr 1fr}
  .choices.two{grid-template-columns:1fr 1fr}
}
.choices.two{grid-template-columns:1fr 1fr}
.hd-today{display:grid;gap:14px 36px;margin:26px 0 8px;padding:20px 18px 22px;border-radius:26px;color:#fff;background:radial-gradient(120% 120% at 20% 0%,#1f6b57,#12423a 58%,#0b2824);box-shadow:inset 0 0 0 1px rgba(255,255,255,.12),0 18px 40px -22px rgba(0,0,0,.7)}
.hd-today .eyebrow{margin:0;color:rgba(255,255,255,.72);font:500 12.5px/1 var(--f-mono);letter-spacing:.14em;text-transform:uppercase}
.hd-today .spot-who{grid-column:1/-1}
.hd-today .vchip>b{background:#fff;color:#12423a}
.hd-today .vchip>span{color:#fff}
.hd-today .vchip em,.hd-today .spot-diff{color:rgba(255,255,255,.72)}
.hd-today .pips i{background:rgba(255,255,255,.3)}
.hd-today .pips i.on{background:#fff}
.pg .hd-today .timeline{margin:6px 0 0 6px;border-left-color:rgba(255,255,255,.3)}
.hd-today .street .sname{color:rgba(255,255,255,.72)}
.hd-today .pill{background:rgba(255,255,255,.16);color:#fff}
.hd-ask{display:grid;align-content:center;justify-items:start;gap:14px}
.pg .hd-q{margin:0;max-width:20ch;font:700 26px/1.12 var(--f-display);letter-spacing:-.025em;color:#fff}
.pg .hd-ask .btn{margin:0;width:100%}
.pg .hd-ask .hd-fine{margin:0;color:rgba(255,255,255,.72)}
.pg h2:has(+ .hd-grid){margin-top:30px}
.pg .hd-grid{list-style:none;display:grid;grid-template-columns:1fr;gap:12px;margin:12px 0 0;padding:0}
.pg a.btn.btn-light{color:#0e1116}
.pg .hd-grid li{margin:0;max-width:none}
.hd-card{display:grid;gap:12px;height:100%;padding:14px;border-radius:18px;background:var(--surface);box-shadow:inset 0 0 0 1px var(--line);color:var(--ink);text-decoration:none;transition:transform var(--d-base) var(--ease-out),box-shadow var(--d-base) var(--ease-out)}
.pg a.hd-card{text-decoration:none}
.hd-card:hover{transform:translateY(-2px);box-shadow:inset 0 0 0 1px var(--line-strong),0 10px 24px -14px rgba(14,17,22,.4)}
.hd-date{font:700 13px/1 var(--f-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2)}
.hd-meta{display:flex;align-items:center;justify-content:space-between;gap:10px;color:var(--muted);font:500 14px/1 var(--f-ui)}
.hd-tag{justify-self:start;padding:5px 10px;border-radius:var(--r-pill);background:var(--sunken);color:var(--ink-2);font:600 12.5px/1 var(--f-ui)}
.pg .hd-fine{margin:22px 0 0;color:var(--muted);font-size:14px}
@media (min-width:620px){.pg .hd-grid{grid-template-columns:repeat(2,1fr)}}
@media (min-width:900px){
  .pg .hd-grid{grid-template-columns:repeat(3,1fr)}
  .hd-today{grid-template-columns:1.25fr 1fr;padding:26px 28px 28px}
  .hd-today .eyebrow,.hd-today .spot-who{grid-column:1/-1}
  .hd-ask{grid-column:2;grid-row:3;align-content:center}
  .hd-today .timeline{grid-column:1;grid-row:3}
  .pg .hd-ask .btn{width:auto}
}

/* The timeline's dot sits on its street's label, so it is on the label's centre line however the cards and bets wrap. */
.street .sname::before{content:"";position:absolute;left:-23px;top:50%;width:8px;height:8px;margin-top:-4px;border-radius:50%;background:var(--ink)}
.hd-today .street .sname::before{background:#fff}
/* Past hands on a phone: two compact columns (one on the narrowest), older months behind a tap. */
.hd-month{margin-top:14px}
.hd-month>summary{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:52px;padding:0 18px;border-radius:16px;background:var(--sunken);color:var(--ink);font:600 16px/1.2 var(--f-ui);cursor:pointer;list-style:none}
.hd-month>summary::-webkit-details-marker{display:none}
.hd-month>summary span{color:var(--muted);font-size:14px;font-weight:500}
.hd-month[open]>summary{margin-bottom:12px}
@media (max-width:619px){
  .pg .hd-grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
  .hd-card{gap:8px;padding:10px}
  .hd-card .pcs.sm{gap:2px}
  .hd-card .pcs.sm .pc{width:24px;height:34px;padding:2px 0 1px;border-radius:5px}
  .hd-card .pcs.sm .pc b{font-size:11px}
  .hd-card .pcs.sm .pc i{font-size:14px}
  .hd-card .vchip.sm em{display:none}
  .hd-card .vchip.sm>span{font-size:13px}
  .hd-card .vchip.sm>b{width:22px;height:22px;font-size:11px}
  .hd-card .hd-meta{flex-wrap:wrap;gap:6px}
  .hd-card .hd-tag{padding:4px 8px;font-size:11.5px}
  .hd-date{font-size:12px}
}

/* ===== Guide pages, wide: parallel items use the width on a desktop, a numbered list reads down each column in turn (tools/seo.mjs: tiles cols/down, steps down, split, the ranks, the blocks, the worked hands) ===== */
/* Hand rankings: compact, one card a hand. */
.pg .pg-ranks>li{padding:10px 14px}
.pg-rh{margin:0 0 8px}
.pg-n{width:auto;min-width:28px;height:28px;padding:0 7px;border-radius:14px;font-size:14px}
.pg .pg-ranks h3{font-size:17px}
.pg .pg-ranks .cd{font-size:15px}
.pg .pg-ranks .pg-cards{margin:0}
.pg .pg-ranks p{margin:6px 0 0;font-size:14px;line-height:1.35}
.pg .pg-ranks .pg-odds{margin-top:2px;font-size:12.5px}
.pg-split>div+div{margin-top:4px}
.pg-blocks .pg-block{margin-bottom:10px}
.pg-vsgrid{display:grid;gap:10px;margin:8px 0 16px}
.pg .pg-vs{display:block;margin:0}
.pg .pg-vs h3{margin:0 0 8px;font:700 16.5px/1.25 var(--f-ui)}
.pg .pg-vs .pg-eg{margin:0 0 8px}
.pg .pg-vs>p{margin:0 0 4px;font-size:15px}
@media (min-width:600px){
  .pg-grid.c1{grid-template-columns:minmax(0,1fr)}
  .pg-grid.down,.pg-ranks.down{grid-auto-flow:column;grid-template-rows:repeat(var(--rows),auto)}
  .pg-ranks.down{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (min-width:900px){
  .pg-wide .pg-grid.c3{grid-template-columns:repeat(3,minmax(0,1fr))}
  .pg-wide .pg-grid.c4{grid-template-columns:repeat(4,minmax(0,1fr))}
  .pg-wide .pg-grid.c1{grid-template-columns:minmax(0,1fr)}
  .pg-wide .pg-steps.pg-2{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pg-wide .pg-steps.down{grid-auto-flow:column;grid-template-rows:repeat(var(--rows),auto)}
  .pg-wide .pg-split{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:24px;align-items:center}
  .pg-wide .pg-split>div+div{margin-top:0}
  .pg-wide .pg-split .pg-diagram{margin:0}
  .pg-wide .pg-split p:last-child,.pg-wide .pg-split .pg-grid{margin-bottom:0}
  .pg-wide .pg-blocks,.pg-wide .pg-vsgrid{display:block;column-count:2;column-gap:10px;margin:8px 0 16px}
  .pg-wide .pg-blocks .pg-block,.pg-wide .pg-vsgrid .pg-vs{break-inside:avoid;margin:0 0 10px}
  .pg-wide .pg-streets{grid-template-columns:repeat(4,minmax(0,1fr))}
  .pg-wide .pg-faq{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 40px}
  .pg-wide .ap-list{display:block;column-count:2;column-gap:12px}
  .pg-wide .ap-list>li{break-inside:avoid;margin:0 0 12px}
  .pg-wide .sc{max-width:760px}
  .pg-wide .pg-stats{grid-template-columns:repeat(auto-fit,minmax(160px,1fr))}
}
.pg ol.ap-list{margin:0 0 14px;padding:0}

/* ===== Guide pages, phone: what is secondary waits behind a tap, the questions are rows, tiles sit tight (tools/seo.mjs: moreGroup, faqHtml; site.js opens the rows from 700px) ===== */
.pg-more-t{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.pg-more-l{display:flex;align-items:center;justify-content:center;min-height:44px;margin:10px 0 4px;padding:0 16px;border-radius:var(--r-pill);box-shadow:inset 0 0 0 1.5px var(--line-strong);color:var(--ink-2);font:600 15px/1.2 var(--f-ui);text-align:center;cursor:pointer}
.pg-more-l .t-off{display:none}
.pg-more-t:checked~.pg-more-l .t-on{display:none}
.pg-more-t:checked~.pg-more-l .t-off{display:inline}
.pg-more-t:focus-visible~.pg-more-l{outline:2px solid var(--focus);outline-offset:3px}
.ap-d+.pg-mg{margin-top:10px}
.pg-faq{border-top:1px solid var(--line)}
.pg-q{border-bottom:1px solid var(--line)}
.pg-q summary{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:52px;padding:6px 0;list-style:none;cursor:pointer}
.pg-q summary::-webkit-details-marker{display:none}
.pg-q summary::after{content:"";flex:none;width:9px;height:9px;border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);rotate:45deg;translate:0 -2px;transition:rotate .2s}
.pg-q[open] summary::after{rotate:225deg;translate:0 2px}
.pg .pg-q h3{margin:0;font-size:16px;line-height:1.3}
.pg .pg-q p{margin:0 0 12px}
@media (max-width:699px){
  .pg-mg>.pg-more-t:not(:checked)~* .pg-more,.pg-mg>.pg-more-t:not(:checked)~.pg-more{display:none}
  .pg-grid.s2{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .pg .pg-tile{padding:10px 12px;font-size:14px}
  .pg .pg-tile>b{font-size:15px}
  .pg .pg-steps>li{padding:10px 12px 10px 50px}
  .pg-steps>li::before{left:11px;width:28px;height:28px;font-size:14px}
  .pg-diagram svg{max-width:300px}
  :root{--p-diagram:8px}
  .pg-slots i{width:16px;height:22px}
  .pg-slots{margin-bottom:4px}
  .pg h2{margin:26px 0 8px}
  .pg-stats{gap:6px}
  .pg .pg-stat{padding:10px 12px}
}
@media (min-width:700px){
  .pg-more-t,.pg-more-l{display:none}
  .pg-faq{border-top:0}
  .pg-q{border-bottom:0}
  .pg-q summary{min-height:0;padding:0;cursor:default;pointer-events:none}
  .pg-q summary::after{display:none}
  .pg .pg-q h3{margin:22px 0 6px;font-size:17px}
  .pg .pg-q p{margin:0 0 14px}
}
@media (min-width:700px){.pg-q::details-content{content-visibility:visible}}
@media (max-width:699px){
  .pg-streets{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pg-diagram svg{max-width:240px}
  .pg-more-l{min-height:40px;margin:8px 0 2px;font-size:14.5px}
  .pg .ap-list>li{padding:14px}
  .ap-head{margin-bottom:10px}
  .pg-learn{gap:0 14px;margin-top:28px}
  .pg-learn a{padding:6px 0}
}
/* On a phone the guides' links wrap onto lines, like the legal links under them: a row cut off at the edge read as a bug. */
@media (max-width:699px){
  .pg-learn{gap:0 16px;padding-top:6px}
  .pg-learn a{white-space:nowrap}
}
.pg-streets>li{align-content:start}
/* ---------- Glossary and famous hands (site-pages): the drawings (.dw-*, tools/draw.mjs), the glossary (.gx-*) and the famous
   hands (.fh-*). Cards are the site's .cd, chips the site's clay stacks (img/stack-*). Every box has its size up front: nothing moves. ---------- */
.dw-cards{gap:5px}
.cd.on{box-shadow:inset 0 0 0 1px var(--line),0 0 0 2.5px var(--ink),var(--sh-1)}
.cd.back{background:repeating-linear-gradient(135deg,#2c3446 0 3px,#1c2230 3px 6px);box-shadow:inset 0 0 0 3px var(--surface),inset 0 0 0 4px var(--line-strong),var(--sh-1)}
.pg-cards.sm .cd{font-size:12.5px;border-radius:7px}
.dw{margin:20px 0 6px;padding:18px 14px;border-radius:22px;background:var(--sunken);box-shadow:inset 0 0 0 1px var(--line)}
.dw>span[role=img]{display:block}
.dw figcaption{margin:12px 0 0;color:var(--muted);font-size:14px;line-height:1.4;text-align:center;text-wrap:balance}
.dw-head{display:block;color:var(--muted);font:600 11.5px/1.2 var(--f-ui);letter-spacing:.05em;text-transform:uppercase}
.dw-label{color:var(--ink-2);font-size:14px;line-height:1.3}
.dw-rows{display:grid;gap:12px;justify-content:center}
.dw-row{display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px}
.dw-row>.dw-label{min-width:7.2em;color:var(--ink);font-weight:600}
.dw-ladder{gap:8px}
.dw-ladder .dw-label{min-width:8.6em}
/* Chips: a clay stack, one to five tall, standing on the same line whatever its height. */
.dw-pile{display:flex;align-items:flex-end;justify-content:center;width:46px;height:36px}
.dw-pile img{display:block;width:46px;height:auto}
.dw-bets{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:center;gap:16px 10px}
.dw-step{display:grid;justify-items:center;gap:5px;min-width:60px;text-align:center}
.dw-step b{color:var(--ink-2);font:700 21px/1 var(--f-display);letter-spacing:-.02em}
.dw-step.on b{color:var(--ink);font-size:25px}
.dw-step.on .dw-label{color:var(--ink);font-weight:700}
.dw-then{align-self:center;flex:none;width:10px;height:10px;margin:0 2px 26px;border-top:2px solid var(--line-strong);border-right:2px solid var(--line-strong);transform:rotate(45deg)}
/* Seats: the app's mini table (Seats.tsx), the felt in the house green, the plates round it. */
.dw-table{position:relative;display:block;width:min(100%,380px);margin:8px auto;aspect-ratio:200/128}
.dw-table svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.dw-felt{fill:#1f5c47;stroke:#0e1116;stroke-width:5}
.dw-arrow{fill:none;stroke:rgba(255,255,255,.82);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.dw-way{fill:rgba(255,255,255,.72);font:600 7px var(--f-ui);letter-spacing:.06em;text-transform:uppercase}
.dw-plate{position:absolute;display:grid;justify-items:center;gap:1px;padding:5px 9px;border-radius:var(--r-pill);background:var(--surface);box-shadow:inset 0 0 0 1px var(--line-strong),var(--sh-1);color:var(--ink);font:700 12px/1.1 var(--f-ui);white-space:nowrap;transform:translate(-50%,-50%)}
.dw-plate b{margin-right:4px;color:var(--muted)}
.dw-plate small{color:var(--muted);font:500 10.5px/1.1 var(--f-ui)}
.dw-plate.on{background:var(--ink);color:var(--on-ink);box-shadow:var(--sh-1)}
.dw-plate.on b,.dw-plate.on small{color:inherit;opacity:.72}
.dw-dealer{position:absolute;width:18px;height:18px;border-radius:50%;background:#f4f5f7;color:#0e1116;font:700 10px/18px var(--f-ui);text-align:center;box-shadow:0 1px 2px rgba(0,0,0,.45);transform:translate(-50%,-50%)}
.dw-pair{display:grid;gap:14px}
.dw-half{display:grid;justify-items:center;gap:4px}
/* Streets: the hand's stops, each a label over its cards; a chip between for each round of betting. */
.dw-streets{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:10px 6px}
.dw-stop{--p:8px;display:grid;justify-items:center;gap:6px;padding:var(--p);border-radius:calc(var(--cd-r) + var(--p))}
.dw-stop.on{background:var(--surface);box-shadow:inset 0 0 0 2px var(--ink)}
.dw-stop .pg-cards{gap:3px}
.dw-stop .cd{font-size:13px}
.dw-bet{flex:none;width:14px;height:14px;margin-top:18px;border-radius:50%;background:#c62835;box-shadow:inset 0 0 0 3px rgba(255,255,255,.55)}
.dw-bet.on{box-shadow:inset 0 0 0 3px rgba(255,255,255,.55),0 0 0 2px var(--paper),0 0 0 4px var(--ink)}
/* Pot: piles in the middle and in front, then the same amounts as one bar, your call in ink. */
.dw-pot{display:grid;gap:14px}
.dw-parts{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:center;gap:14px 24px}
.dw-part{display:grid;justify-items:center;gap:4px;text-align:center}
.dw-part b{color:var(--ink);font:700 19px/1 var(--f-display)}
.dw-part.you .dw-label{color:var(--ink);font-weight:700}
.dw-bar{display:flex;gap:3px;height:10px;max-width:420px;width:100%;margin:0 auto;border-radius:var(--r-pill);overflow:hidden}
.dw-bar i{background:var(--line-strong)}
.dw-bar i.you{background:var(--ink)}
.dw-share{color:var(--ink-2);font-size:14px;text-align:center}
/* Actions: no bet yet, or facing a bet. */
.dw-sides{display:grid;gap:10px}
.dw-side{display:grid;gap:8px;padding:12px 14px;border-radius:16px;background:var(--surface);box-shadow:inset 0 0 0 1px var(--line)}
.dw-side.on{box-shadow:inset 0 0 0 2px var(--ink)}
.dw-moves{display:flex;flex-wrap:wrap;gap:6px}
.dw-moves span{padding:7px 13px;border-radius:var(--r-pill);background:var(--sunken);color:var(--ink);font:600 14px/1 var(--f-ui)}
.dw-side.on .dw-moves span{background:var(--ink);color:var(--on-ink)}
/* Combos and ranges. */
.dw-combos .r,.dw-pairs .r{color:#c62835}
.dw-pairs{display:flex;flex-wrap:wrap;justify-content:center;gap:8px}
.dw-pairs>span{display:inline-flex;gap:4px;padding:9px 11px;border-radius:10px;background:var(--surface);box-shadow:inset 0 0 0 1px var(--line);font:700 15px/1 var(--f-ui)}
.dw-grid4{display:grid;grid-template-columns:auto repeat(4,minmax(0,auto));gap:4px;justify-content:center;font:700 clamp(11px,3.4vw,13.5px)/1 var(--f-ui)}
.dw-gh{display:grid;place-items:center;padding:6px 3px;color:var(--ink-2)}
.dw-gc{display:inline-flex;justify-content:center;gap:2px;padding:7px 5px;border-radius:8px;background:var(--surface);box-shadow:inset 0 0 0 1px var(--line)}
.dw-gc.on{background:var(--ink);color:var(--on-ink);box-shadow:none}
.dw-gc.on .r{color:#ff8a92}
.dw-key{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:6px;margin-top:12px;color:var(--ink-2);font-size:13.5px}
.dw-key i{display:inline-block;width:12px;height:12px;border-radius:3px;background:var(--surface);box-shadow:inset 0 0 0 1px var(--line-strong)}
.dw-key i.on{background:var(--ink);box-shadow:none}
.dw-grid13{display:grid;grid-template-columns:repeat(13,minmax(0,1fr));grid-template-rows:repeat(13,minmax(0,1fr));gap:1px;width:min(100%,400px);margin:0 auto;aspect-ratio:1}
.dw-grid13 span{display:grid;place-items:center;border-radius:2px;background:var(--surface);color:var(--muted);font:600 clamp(5.5px,1.7vw,8.5px)/1 var(--f-ui);overflow:hidden}
.dw-grid13 .on{background:var(--ink);color:var(--on-ink)}
@media (prefers-color-scheme:dark){.dw-combos .r,.dw-pairs .r{color:#ff6b75}.dw-gc.on .r{color:#c62835}}
@media (min-width:560px){.dw{padding:22px 20px}.dw-sides{grid-template-columns:1fr 1fr}.dw-pair{grid-template-columns:1fr 1fr}}

/* The glossary: a word's page in short blocks. */
.gx-block{margin:18px 0 0;padding:16px 18px;border-radius:18px;background:var(--surface);box-shadow:inset 0 0 0 1px var(--line)}
.pg .gx-block h2{margin:0 0 8px;color:var(--muted);font:600 12px/1.2 var(--f-ui);letter-spacing:.05em;text-transform:uppercase}
.pg .gx-block p{margin:0}
.pg .gx-chips{display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0;list-style:none}
.pg .gx-chips li{margin:0}
.gx-chips span,.pg .gx-chips a{display:inline-flex;align-items:center;min-height:36px;padding:0 14px;border-radius:var(--r-pill);background:var(--sunken);color:var(--ink);font:600 14.5px/1 var(--f-ui);text-decoration:none}
.pg .gx-rel a{min-height:44px;padding:0 16px;background:var(--paper);box-shadow:inset 0 0 0 1.5px var(--line-strong)}
.pg .gx-rel a:hover{box-shadow:inset 0 0 0 1.5px var(--ink)}
/* The index: find a word as you type or by its first letter, the seven topics as tiles with a drawing each, then each
   topic's picture cards (the drawing from the word's own page, small) and its other words as chips. On a phone each topic
   but the first waits behind a tap; from 700px every topic is open. js/glossary.js only filters: every word is in the HTML. */
.gx-find{display:grid;gap:10px;margin:18px 0 14px}
.gx-q{position:relative;display:block}
.gx-q svg{position:absolute;top:50%;left:17px;width:19px;height:19px;margin-top:-9.5px;fill:none;stroke:var(--muted);stroke-width:2.2;stroke-linecap:round;pointer-events:none}
.gx-q input{display:block;width:100%;height:52px;margin:0;padding:0 18px 0 46px;border:0;border-radius:var(--r-pill);background:var(--surface);box-shadow:inset 0 0 0 1.5px var(--line-strong),var(--sh-1);color:var(--ink);font:500 17px/1 var(--f-ui);-webkit-appearance:none;appearance:none}
.gx-q input::placeholder{color:var(--muted);opacity:1}
.gx-q input:focus{outline:none;box-shadow:inset 0 0 0 2px var(--ink),var(--sh-1)}
.gx-q input::-webkit-search-cancel-button{-webkit-appearance:none}
.gx-letters{display:flex;gap:5px;overflow-x:auto;scrollbar-width:none;padding:2px 1px}
.gx-letters::-webkit-scrollbar{display:none}
.gx-letters button{flex:none;width:34px;height:34px;margin:0;padding:0;border:0;border-radius:10px;background:var(--sunken);color:var(--ink-2);font:700 14px/1 var(--f-ui);cursor:pointer}
.gx-letters button:hover{box-shadow:inset 0 0 0 1.5px var(--ink)}
.gx-letters button[aria-pressed=true]{background:var(--ink);color:var(--on-ink)}
.gx-letters button:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.pg .gx-topics{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:0;padding:0;list-style:none}
.pg .gx-topics li{max-width:none;margin:0}
.pg .gx-topics li:last-child{grid-column:1/-1}
.pg .gx-tile{display:grid;align-content:start;gap:2px;height:100%;padding:10px 10px 12px;border-radius:20px;background:var(--surface);box-shadow:inset 0 0 0 1px var(--line),var(--sh-1);color:var(--ink);text-decoration:none}
.pg .gx-tile:hover{box-shadow:inset 0 0 0 1.5px var(--ink),var(--sh-2)}
.gx-tile b{margin:6px 4px 0;font:700 16px/1.2 var(--f-display);letter-spacing:-.01em}
.gx-tile>span:last-child{margin:0 4px;color:var(--muted);font-size:13px}
.gx-art{display:grid;grid-template-columns:minmax(0,1fr);place-items:center;height:60px;border-radius:14px;background:var(--sunken);overflow:hidden}
.gx-art .pg-cards{flex-wrap:nowrap}
/* The topics' own drawings: a fanned hand, a board, chips, and the four player types. */
.gx-fan{display:flex;padding-top:14px;zoom:.8}
.gx-fan .cd{align-items:flex-start;height:3.4em;min-width:2.5em;margin:0 -5px;padding-top:.5em;transform-origin:50% 120%;box-shadow:inset 0 0 0 1px var(--line),var(--sh-2)}
.gx-fan .cd:nth-child(1){rotate:-15deg}
.gx-fan .cd:nth-child(2){rotate:-5deg}
.gx-fan .cd:nth-child(3){rotate:5deg}
.gx-fan .cd:nth-child(4){rotate:15deg}
.gx-board{zoom:.6}
.gx-board .pg-cards{gap:4px}
.gx-stack3{display:flex;align-items:flex-end;gap:4px;zoom:.8}
.dw-types{display:flex;flex-wrap:wrap;justify-content:center;gap:5px;width:100%;padding:0 8px}
.dw-types span{padding:5px 9px;border-radius:var(--r-pill);background:var(--surface);box-shadow:inset 0 0 0 1px var(--line-strong);color:var(--ink-2);font:600 12px/1 var(--f-ui);white-space:nowrap}
.dw-types span.on{background:var(--ink);color:var(--on-ink);box-shadow:none}
/* A word's drawing, small: the same picture at a fraction of its size, no words under it, in a box of fixed height. */
.dw-mini{display:block;zoom:.5}
.dw-mini .dw-label,.dw-mini .dw-key,.dw-mini .dw-share{display:none}
.dw-mini.dw-cards{zoom:.58}
.dw-mini .dw-rows{gap:8px}
.dw-mini.dw-seats{zoom:.26}
.dw-mini.dw-seats .dw-table{width:360px;margin:0}
.dw-mini.dw-streets{zoom:.6}
.dw-mini.dw-pot{zoom:.5}
.dw-mini.dw-pot .dw-bar{width:220px}
.dw-mini.dw-actions{zoom:.44}
.dw-mini.dw-actions .dw-sides{grid-template-columns:1fr 1fr;width:340px}
.dw-mini.dw-combos{zoom:.36}
.dw-mini.dw-range,.dw-mini.dw-types{zoom:1}
.dw-mini.dw-types{display:flex}
.dw-mini .dw-grid13{width:54px;gap:1px}
.dw-mini .dw-grid13 i{border-radius:1px;background:var(--line)}
.dw-mini .dw-grid13 i.on{background:var(--ink)}
.dw-mini.dw-bets{zoom:.55}
.gx-tile .dw-mini.dw-bets{zoom:.62}
.gx-status{margin:14px 0 0;color:var(--muted);font:600 14px/1.3 var(--f-ui)}
.pg.gx-finding .gx-topics,.pg.gx-finding .gx-topics+.cta-band{display:none}
.gx-sec{border-top:1px solid var(--line);scroll-margin-top:12px}
.gx-sec:first-of-type{margin-top:22px}
.gx-sec:last-of-type{border-bottom:1px solid var(--line)}
.gx-sec>summary{position:relative;display:grid;gap:2px;padding:12px 32px 12px 0;list-style:none;cursor:pointer}
.gx-sec>summary::-webkit-details-marker{display:none}
.gx-sec>summary::after{content:"";position:absolute;top:50%;right:6px;width:9px;height:9px;margin-top:-7px;border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);rotate:45deg;transition:rotate .2s}
.gx-sec[open]>summary::after{rotate:225deg;margin-top:-2px}
.pg .gx-sec h2{margin:0;font:700 19px/1.2 var(--f-display);letter-spacing:-.01em}
.gx-n{color:var(--muted);font:600 15px/1 var(--f-ui)}
.gx-peek{overflow:hidden;color:var(--muted);font-size:13.5px;line-height:1.35;white-space:nowrap;text-overflow:ellipsis}
.gx-sec[open] .gx-peek{display:none}
.gx-sec[open]{padding-bottom:16px}
.pg .gx-words{gap:6px}
.pg .gx-words a{min-height:32px;padding:0 12px;font-size:14px}
.pg .gx-pics{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin:2px 0 10px;padding:0;list-style:none}
.pg .gx-pics li{max-width:none;margin:0}
.pg .gx-pic{display:grid;align-content:start;gap:3px;height:100%;padding:8px 8px 10px;border-radius:18px;background:var(--surface);box-shadow:inset 0 0 0 1px var(--line);color:var(--ink);text-decoration:none}
.pg .gx-pic:hover{box-shadow:inset 0 0 0 1.5px var(--ink)}
.gx-pic .gx-art{height:60px;margin-bottom:5px;border-radius:12px}
.gx-pic b{margin:0 4px;font:700 15px/1.2 var(--f-ui);letter-spacing:-.01em}
.gx-pic>span:last-child{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;margin:0 4px;color:var(--ink-2);font-size:13px;line-height:1.35}
/* On a phone a topic's picture cards are one row to swipe, the next card showing at the edge. */
@media (max-width:699px){
  .pg .gx-pics{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding-bottom:2px}
  .gx-pics::-webkit-scrollbar{display:none}
  .pg .gx-pics li{flex:0 0 148px;scroll-snap-align:start}
}
@media (min-width:700px){
  .gx-find{margin-top:22px}
  .gx-letters{flex-wrap:wrap;overflow:visible}
  .pg .gx-topics{grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
  .pg .gx-topics li:last-child{grid-column:span 2}
  .gx-art{height:76px}
  .gx-fan{zoom:1}
  .gx-board{zoom:.7}
  .gx-tile .dw-mini.dw-bets{zoom:.75}
  .gx-tile b{font-size:17px}
  .gx-sec,.gx-sec:last-of-type{border:0}
  .gx-sec:first-of-type{margin-top:26px}
  .gx-sec+.gx-sec{margin-top:18px}
  .gx-sec[open]{padding-bottom:0}
  .gx-sec>summary{display:flex;align-items:baseline;gap:10px;margin:0 0 8px;padding:0;cursor:default;pointer-events:none}
  .gx-sec>summary::after,.gx-peek{display:none}
  .gx-sec::details-content{content-visibility:visible}
  .pg .gx-pics{grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:10px}
  .pg.gx-finding .gx-pics{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
  .gx-pic .gx-art{height:68px}
  .dw-mini .dw-grid13{width:60px}
  .dw-mini.dw-cards{zoom:.56}
  .dw-mini.dw-seats{zoom:.29}
  .dw-mini.dw-streets{zoom:.64}
  .dw-mini.dw-pot{zoom:.56}
  .dw-mini.dw-combos{zoom:.4}
  .dw-mini.dw-bets{zoom:.56}
  .pg .gx-words a{min-height:30px}
  .pg .gx-words{gap:5px}
}

/* The end band is followed by the 18+ line: room between them. */
.pg .cta-end+.pg-fine{margin-top:18px}
/* Famous hands (tools/seo.mjs "Famous hands"). A hand: the table as the hero, its seats round a felt and the board of the street
   on show, picked by tabs that are radios and labels (no script); the famous decision as one moment with its bet in chips; the
   result; why it is famous and the sources folded. The index: decade by decade, each hand a plaque with its board on felt, and a
   filter that is radios too. Cards on the felt are white in both themes, as on the app's table. */
.fh-r{position:absolute;width:1px;height:1px;margin:0;opacity:0;pointer-events:none}
.fh-hero{position:relative;display:grid;grid-template-areas:"head" "tabs" "felt" "cap" "panel";gap:12px;margin:24px 0 0}
.pg .fh-hero>h2,.pg .fh-result h2,.fh-mo-top{margin:0;color:var(--muted);font:700 12px/1.2 var(--f-ui);letter-spacing:.08em;text-transform:uppercase}
.pg .fh-hero>h2{grid-area:head}
.fh-tabs{grid-area:tabs;display:flex;gap:4px;padding:4px;border-radius:var(--r-pill);background:var(--sunken);box-shadow:inset 0 0 0 1px var(--line)}
.fh-tabs label{flex:1;display:grid;place-items:center;min-height:40px;border-radius:var(--r-pill);color:var(--ink-2);font:600 14.5px/1 var(--f-ui);cursor:pointer;user-select:none;-webkit-tap-highlight-color:transparent}
.fh-tabs label:hover{color:var(--ink)}
#st-preflop:checked~.fh-tabs [for=st-preflop],#st-flop:checked~.fh-tabs [for=st-flop],#st-turn:checked~.fh-tabs [for=st-turn],#st-river:checked~.fh-tabs [for=st-river]{background:var(--ink);color:var(--on-ink);box-shadow:var(--sh-1)}
#st-preflop:focus-visible~.fh-tabs [for=st-preflop],#st-flop:focus-visible~.fh-tabs [for=st-flop],#st-turn:focus-visible~.fh-tabs [for=st-turn],#st-river:focus-visible~.fh-tabs [for=st-river]{outline:2px solid var(--focus);outline-offset:2px}
.fh-felt{grid-area:felt;position:relative;aspect-ratio:342/340}
.fh-felt[data-n="2"]{aspect-ratio:342/270}
.fh-felt[data-n="3"]{aspect-ratio:342/290}
.fh-felt[data-n="5"],.fh-felt[data-n="6"],.fh-felt[data-n="7"],.fh-felt[data-n="8"]{aspect-ratio:342/390}
.fh-felt::before,.fh-felt::after{content:"";position:absolute;border-radius:999px;pointer-events:none}
.fh-felt::before{inset:15% 5%;background:radial-gradient(85% 90% at 50% 35%,#2b323e,#161a21 72%);box-shadow:0 0 0 7px #c8cdd5,0 0 0 8px rgba(14,17,22,.22),inset 0 3px 22px rgba(0,0,0,.6),0 22px 36px -18px rgba(14,17,22,.6)}
.fh-felt::after{inset:25% 17%;box-shadow:inset 0 0 0 1px rgba(255,255,255,.14)}
.fh-seat{position:absolute;z-index:1;display:grid;justify-items:center;gap:4px;width:max-content;max-width:40%;padding:7px 10px 8px;border-radius:14px;background:var(--surface);box-shadow:0 0 0 1px var(--line),0 10px 20px -12px rgba(14,17,22,.55);transform:translate(-50%,-50%);text-align:center}
.fh-seat b{color:var(--ink);font:700 13.5px/1.1 var(--f-ui);overflow-wrap:anywhere}
.fh-chips{color:var(--muted);font:600 11.5px/1 var(--f-mono);white-space:nowrap}
.fh-nocards{color:var(--muted);font-size:11px}
/* A seat whose player folded, on every later street: dimmed, its stack line saying "Folded". */
.fh-out{display:none;color:var(--muted);font:700 11px/1 var(--f-ui);letter-spacing:.06em;text-transform:uppercase}
#st-flop:checked~.fh-felt .fh-seat[data-out~=flop]>:not(.fh-out):not(.fh-btn),#st-turn:checked~.fh-felt .fh-seat[data-out~=turn]>:not(.fh-out):not(.fh-btn),#st-river:checked~.fh-felt .fh-seat[data-out~=river]>:not(.fh-out):not(.fh-btn){opacity:.38}
#st-flop:checked~.fh-felt .fh-seat[data-out~=flop] .fh-chips,#st-turn:checked~.fh-felt .fh-seat[data-out~=turn] .fh-chips,#st-river:checked~.fh-felt .fh-seat[data-out~=river] .fh-chips{display:none}
#st-flop:checked~.fh-felt .fh-seat[data-out~=flop] .fh-out,#st-turn:checked~.fh-felt .fh-seat[data-out~=turn] .fh-out,#st-river:checked~.fh-felt .fh-seat[data-out~=river] .fh-out{display:block}
.fh-btn{position:absolute;top:-8px;right:-8px;display:grid;place-items:center;width:21px;height:21px;border-radius:50%;background:#fff;color:#0e1116;font:700 11px/1 var(--f-ui);font-style:normal;box-shadow:0 0 0 1px rgba(14,17,22,.22),0 2px 5px rgba(0,0,0,.35)}
.fh-felt .pg-cards{flex-wrap:nowrap;gap:4px}
.fh-felt .cd,.fh-mini .cd,.fh-shown .cd{background:#fff;color:#0e1116;box-shadow:inset 0 0 0 1px rgba(14,17,22,.14),0 1px 2px rgba(0,0,0,.25)}
.fh-felt .cd.r,.fh-mini .cd.r,.fh-shown .cd.r{color:#c62835}
.fh-seat .cd{min-width:2.2em;height:2.5em;font-size:12px;border-radius:6px}
.fh-felt:not([data-n="2"]):not([data-n="3"]) .fh-seat{gap:3px;padding:5px 7px 6px;border-radius:12px}
.fh-felt:not([data-n="2"]):not([data-n="3"]) .fh-seat b{font-size:12px}
.fh-felt:not([data-n="2"]):not([data-n="3"]) .fh-chips{font-size:10px}
/* A crowded table on a phone: names a size down, and the board in two rows (the flop, then the turn and river) between the seats. */
@media (max-width:639px){
  .fh-felt:not([data-n="2"]):not([data-n="3"]) .fh-seat b{font-size:11px}
  .fh-felt:not([data-n="2"]):not([data-n="3"]) .fh-bd .pg-cards{flex-wrap:wrap;justify-content:center;width:calc(8.1em + 8px)}
  /* The blinds with an ante or a straddle wrap between the side seats rather than run under them. */
  .fh-felt:not([data-n="2"]):not([data-n="3"]) .fh-pot{max-width:min(140px,30vw);font-size:clamp(10.5px,2.95vw,11.5px);line-height:1.3;text-align:center;white-space:normal}
}
.fh-felt:not([data-n="2"]):not([data-n="3"]) .fh-seat .cd{font-size:10.5px}
.fh-mid{position:absolute;left:50%;top:50%;z-index:1;transform:translate(-50%,-50%)}
.fh-bd{display:none;flex-direction:column;align-items:center;gap:8px}
#st-preflop:checked~.fh-felt .fh-bd[data-st=preflop],#st-flop:checked~.fh-felt .fh-bd[data-st=flop],#st-turn:checked~.fh-felt .fh-bd[data-st=turn],#st-river:checked~.fh-felt .fh-bd[data-st=river]{display:flex}
.fh-bd .pg-cards{font-size:clamp(12.5px,3.8vw,17px)}
.fh-felt:not([data-n="2"]):not([data-n="3"]) .fh-bd .pg-cards{font-size:clamp(11.5px,3.3vw,16px)}
.fh-bd .cd{min-width:2.3em;height:2.6em;font-size:1em;border-radius:8px}
.fh-bd .cd.on{box-shadow:inset 0 0 0 1px rgba(14,17,22,.14),0 0 0 2px #161a21,0 0 0 4px #fff}
.fh-bd .cd.slot{background:transparent;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.2)}
.fh-pot{padding:5px 11px;border-radius:var(--r-pill);background:rgba(0,0,0,.5);color:#fff;font:600 12.5px/1 var(--f-mono);white-space:nowrap;box-shadow:inset 0 0 0 1px rgba(255,255,255,.14)}
.pg .fh-cap{grid-area:cap;margin:0;max-width:none;color:var(--muted);font-size:13.5px;line-height:1.4;text-align:center}
.fh-panels{grid-area:panel;min-width:0}
.fh-panel{display:none;padding:14px 16px 6px;border-radius:20px;background:var(--surface);box-shadow:inset 0 0 0 1px var(--line)}
#st-preflop:checked~.fh-panels [data-st=preflop],#st-flop:checked~.fh-panels [data-st=flop],#st-turn:checked~.fh-panels [data-st=turn],#st-river:checked~.fh-panels [data-st=river]{display:block}
.pg .fh-panel h3{margin:0 0 4px;font-size:16px}
.pg .fh-log{margin:0;padding:0;list-style:none}
.pg .fh-log>li{max-width:none;margin:0;padding:9px 0;border-top:1px solid var(--line);color:var(--ink-2)}
.pg .fh-log>li:first-child{border-top:0}
.fh-tag{display:inline-block;margin-left:4px;padding:4px 8px;border-radius:var(--r-pill);background:var(--sunken);color:var(--ink);font:700 10.5px/1 var(--f-ui);letter-spacing:.06em;text-transform:uppercase;vertical-align:1px}
.fh-dec summary{cursor:pointer;list-style:none}
.fh-dec summary::-webkit-details-marker{display:none}
.fh-dec details[open] .fh-tag{background:var(--ink);color:var(--on-ink)}
.pg .fh-dec p{margin:8px 0 2px;font-size:15px}
.pg .fh-dec p b{color:var(--ink)}
.pg .fh-dec.key a{color:var(--ink);font-weight:600;text-decoration:none}
.fh-dec.key .fh-tag{background:var(--ink);color:var(--on-ink)}
.fh-moment{margin:20px 0 0;padding:20px 20px 8px;border-radius:24px;background:var(--ink);color:var(--on-ink);box-shadow:var(--sh-2);scroll-margin-top:16px}
.fh-moment .fh-mo-top{margin:0 0 4px;color:inherit;opacity:.66}
.pg .fh-moment h2{margin:0 0 14px;color:inherit;font:700 25px/1.1 var(--f-display);letter-spacing:-.02em}
.fh-mo-bet{display:flex;flex-wrap:wrap;align-items:flex-end;gap:6px 14px;margin:0 0 14px}
.fh-mo-bet .dw-pile{width:62px;height:auto}
.fh-mo-bet .dw-pile img{width:62px}
.fh-mo-bet b{font:700 40px/.9 var(--f-display);letter-spacing:-.03em}
.fh-mo-bet>span:last-child{flex-basis:100%;font-size:14.5px;opacity:.75}
.pg .fh-moment p{max-width:62ch;color:inherit;font-size:16px}
.pg .fh-moment p b{color:inherit}
.pg .fh-moment .fh-after{opacity:.72;font-size:15px}
.fh-result{margin:12px 0 0;padding:16px 18px;border-radius:20px;background:var(--surface);box-shadow:inset 0 0 0 1px var(--line)}
.pg .fh-result h2{margin:0 0 6px}
.pg .fh-result p{margin:0;color:var(--ink);font-size:17px}
.fh-shown{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0 0;padding:0;list-style:none}
.pg .fh-shown li{display:flex;align-items:center;gap:8px;max-width:none;margin:0;padding:6px 8px 6px 12px;border-radius:var(--r-pill);background:var(--sunken);color:var(--ink)}
.fh-shown li.won{box-shadow:inset 0 0 0 1.5px var(--ink)}
.fh-shown .pg-cards{gap:3px}
.fh-shown .cd{font-size:12px;border-radius:6px}
.fh-shown li>span:last-child:not(.pg-cards){padding-right:4px;font:700 12px/1 var(--f-ui)}
.fh-folds{display:grid;gap:10px;margin:22px 0 0}
.fh-fold{border-radius:18px;background:var(--surface);box-shadow:inset 0 0 0 1px var(--line)}
.fh-fold summary{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:56px;padding:0 18px;cursor:pointer;list-style:none}
.fh-fold summary::-webkit-details-marker{display:none}
.fh-fold summary::after{content:"";flex:none;width:8px;height:8px;border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);transform:translateY(-2px) rotate(45deg)}
.fh-fold[open] summary::after{transform:translateY(2px) rotate(-135deg)}
.pg .fh-fold summary h2{margin:0;font-size:17px}
.fh-fold>:not(summary){margin-left:18px;margin-right:18px}
.fh-fold>:last-child{margin-bottom:16px}
.pg .fh-fold h3{margin:16px 18px 6px}
.pg .fh-src{padding-left:20px}
/* The index */
.fh-kinds{display:flex;flex-wrap:wrap;gap:8px;margin:24px 0 0}
.fh-kinds label{display:inline-flex;align-items:center;gap:7px;min-height:40px;padding:0 15px;border-radius:var(--r-pill);background:var(--surface);box-shadow:inset 0 0 0 1px var(--line);color:var(--ink);font:600 14.5px/1 var(--f-ui);cursor:pointer;user-select:none;-webkit-tap-highlight-color:transparent}
.fh-kinds label span{color:var(--muted);font-weight:500}
#k-all:checked~.fh-kinds [for=k-all],#k-tour:checked~.fh-kinds [for=k-tour],#k-cash:checked~.fh-kinds [for=k-cash]{background:var(--ink);color:var(--on-ink);box-shadow:none}
#k-all:checked~.fh-kinds [for=k-all] span,#k-tour:checked~.fh-kinds [for=k-tour] span,#k-cash:checked~.fh-kinds [for=k-cash] span{color:inherit;opacity:.7}
#k-all:focus-visible~.fh-kinds [for=k-all],#k-tour:focus-visible~.fh-kinds [for=k-tour],#k-cash:focus-visible~.fh-kinds [for=k-cash]{outline:2px solid var(--focus);outline-offset:2px}
#k-tour:checked~.fh-eras li[data-kind=cash],#k-cash:checked~.fh-eras li[data-kind=tour],#k-tour:checked~.fh-eras .fh-era:not(:has([data-kind=tour])),#k-cash:checked~.fh-eras .fh-era:not(:has([data-kind=cash])){display:none}
/* On a phone every part of the index is folded behind a tap row with its count; from 700px all are open. */
.fh-era{border-top:1px solid var(--line);scroll-margin-top:16px}
.fh-era:first-of-type{margin-top:22px}
.fh-era:last-of-type{border-bottom:1px solid var(--line)}
.fh-era>summary{position:relative;padding:14px 32px 14px 0;list-style:none;cursor:pointer;-webkit-tap-highlight-color:transparent}
.fh-era>summary::-webkit-details-marker{display:none}
.fh-era>summary::after{content:"";position:absolute;top:50%;right:6px;width:9px;height:9px;margin-top:-7px;border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);rotate:45deg;transition:rotate .2s}
.fh-era[open]>summary::after{rotate:225deg;margin-top:-2px}
.fh-era[open]{padding-bottom:16px}
.pg .fh-era h2{margin:0;font:700 21px/1.1 var(--f-display);letter-spacing:-.02em}
.fh-n{margin-left:6px;color:var(--muted);font:600 15px/1 var(--f-ui);letter-spacing:0}
.fh-n [data-k]{display:none}
#k-all:checked~.fh-eras .fh-n [data-k=all],#k-tour:checked~.fh-eras .fh-n [data-k=tour],#k-cash:checked~.fh-eras .fh-n [data-k=cash]{display:inline}
@media (min-width:700px){
  .fh-era,.fh-era:last-of-type{border:0}
  .fh-era{margin:26px 0 0}
  .fh-era[open]{padding-bottom:0}
  .fh-era>summary{margin:0 0 12px;padding:0;cursor:default;pointer-events:none}
  .fh-era>summary::after{display:none}
  .fh-era::details-content{content-visibility:visible}
  .pg .fh-era h2{font-size:22px}
}
.pg .fh-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:0;padding:0;list-style:none}
.pg .fh-grid li{max-width:none;margin:0}
.pg .fh-card{display:flex;flex-direction:column;gap:4px;height:100%;padding:7px 7px 12px;border-radius:20px;background:var(--surface);box-shadow:inset 0 0 0 1px var(--line),var(--sh-1);color:var(--ink);text-decoration:none;transition:transform var(--d-base) var(--ease-out),box-shadow var(--d-base) var(--ease-out)}
.pg .fh-card:hover{transform:translateY(-2px);box-shadow:inset 0 0 0 1.5px var(--ink),var(--sh-2)}
.fh-mini{display:grid;place-items:center;height:56px;margin:0 0 8px;border-radius:14px;background:radial-gradient(90% 120% at 50% 30%,#2b323e,#161a21 75%);box-shadow:inset 0 0 0 3px #c8cdd5,inset 0 0 0 4px rgba(14,17,22,.25)}
.fh-mini>span:not(.pg-cards){color:rgba(255,255,255,.75);font-size:12px}
.fh-mini .pg-cards{flex-wrap:nowrap;gap:3px}
.fh-mini .cd{min-width:0;width:22px;height:31px;padding:0;border-radius:5px;font-size:10.5px;letter-spacing:-.06em}
.fh-yr{margin:0 6px;color:var(--muted);font:600 12px/1 var(--f-mono);letter-spacing:.1em}
.fh-card b{margin:2px 6px 0;font:700 16px/1.15 var(--f-display);letter-spacing:-.02em}
.fh-meta{margin:0 6px;color:var(--muted);font-size:12.5px;line-height:1.3}
.fh-hook{margin:2px 6px 0;color:var(--ink-2);font-size:13px;line-height:1.35}
.fh-foot{margin:auto 6px 0;padding-top:8px;color:var(--muted);font:600 11.5px/1.3 var(--f-ui)}
@media (min-width:640px){
  .pg .fh-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
  .fh-mini{height:64px}
  .fh-mini .cd{width:26px;height:36px;font-size:12px}
  .pg .fh-card b{font-size:17px}
}
@media (min-width:900px){
  .pg-wide .fh-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
  .fh-hero{grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);grid-template-areas:"head head" "felt tabs" "felt panel" "cap panel";column-gap:32px;row-gap:14px;align-items:start}
  .fh-felt{aspect-ratio:560/440}
  .fh-felt[data-n="2"]{aspect-ratio:560/380}
  .fh-felt[data-n="3"]{aspect-ratio:560/400}
  .fh-felt[data-n="5"],.fh-felt[data-n="6"],.fh-felt[data-n="7"],.fh-felt[data-n="8"]{aspect-ratio:560/480}
  .fh-seat .cd{font-size:14px}
  .fh-seat b{font-size:15px}
  .fh-felt:not([data-n="2"]):not([data-n="3"]) .fh-seat .cd{font-size:12px}
  .fh-moment{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:36px;padding:26px 32px 14px}
  .fh-moment>*{grid-column:2}
  .fh-moment>.fh-mo-bet{grid-column:1;grid-row:1/span 5;flex-direction:column;align-items:flex-start;align-self:start;max-width:220px;margin:0}
  .fh-mo-bet .dw-pile,.fh-mo-bet .dw-pile img{width:84px}
  .fh-mo-bet b{font-size:52px}
  .fh-folds{grid-template-columns:repeat(2,minmax(0,1fr));align-items:start}
}

/* ---------- Starting hands and match-ups (starting-hands): a hand's page (.hx-*), the 169 on a grid, and the all-ins (.mx-*).
   Every number on them is counted (tools/preflop-odds.mjs). Cards are the site's .cd; the grid's colours follow the chart's. ---------- */
.hx-top{display:grid;grid-template-columns:auto minmax(0,1fr);gap:10px;margin:16px 0 6px}
.pg .hx-hand{display:grid;justify-items:center;align-content:center;gap:8px;margin:0;padding:14px 12px;border-radius:22px;background:var(--sunken);box-shadow:inset 0 0 0 1px var(--line)}
.hx-hand>span{display:block}
.hx-hand .pg-cards{flex-wrap:nowrap;gap:6px}
.hx-hand .cd{font-size:26px;border-radius:13px}
.hx-hand figcaption{max-width:12em;color:var(--muted);font-size:13px;line-height:1.3;text-align:center}
.pg .hx-stats{grid-template-columns:minmax(0,1fr);gap:8px;margin:0}
.pg .hx-stats .pg-stat{margin:0;padding:10px 12px}
.hx-stats .pg-stat b{font-size:clamp(22px,6.4vw,30px)}
.hx-stats .pg-stat span{font-size:12.5px;line-height:1.3}
.hx-stats .pg-stat small{display:block;margin-top:4px;color:var(--muted);font-size:12px}
.pg .hx-vs{display:grid;gap:8px;margin:8px 0 10px;padding:0;list-style:none}
.pg .hx-vs li{display:grid;grid-template-columns:minmax(0,1fr);gap:5px;max-width:none;margin:0;padding:9px 12px;border-radius:18px;background:var(--surface);box-shadow:inset 0 0 0 1px var(--line)}
.hx-opp{display:flex;align-items:center;gap:10px;font-weight:600}
.pg .hx-opp .hx-more{margin-left:auto;font-size:13.5px;font-weight:600}
.hx-opp small{color:var(--muted);font-weight:500;font-size:13px}
.hx-opp .pg-cards{flex-wrap:nowrap;gap:4px}
.hx-bar{display:flex;gap:2px;height:10px;border-radius:var(--r-pill);overflow:hidden;background:var(--line)}
.hx-bar i{background:var(--ink)}
.hx-bar i.t{background:var(--muted)}
.hx-bar i.l{background:var(--line-strong)}
.hx-wtl{display:flex;flex-wrap:wrap;gap:2px 14px;color:var(--ink-2);font-size:14px}
.hx-wtl b{color:var(--ink)}
.hx-note{color:var(--muted);font-size:14px}
.pg .hx-types{width:100%;margin:6px 0 14px;border-collapse:separate;border-spacing:3px;table-layout:fixed;font-size:13.5px}
.pg .hx-types caption{caption-side:bottom;padding-top:6px;color:var(--muted);font-size:13px;text-align:left}
.pg .hx-types th,.pg .hx-types td{display:table-cell;width:auto;padding:6px 2px;border:0;text-align:center;border-radius:8px;line-height:1.2}
.pg .hx-types thead th{padding:0 0 2px;color:var(--muted);font-weight:600}
.pg .hx-types tbody th{width:30%;padding-left:0;text-align:left;font-weight:600;font-size:13px}
.pg .hx-types td{background:var(--sunken);color:var(--ink-2)}
.pg .hx-types thead td{background:none}
.pg .hx-types td.r{background:var(--ink);color:var(--on-ink);font-weight:700}
.pg .hx-types tr.hx-chart th a{font-weight:700}
.hx-two{display:grid;gap:0 28px}
.hx-place{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:12px;margin:8px 0 10px}
.pg .hx-place .dw{display:none;margin:0;padding:12px 8px}
.pg .hx-place .hx-near{margin:0}
.hx-place .dw figcaption{margin-top:6px;font-size:13px}
.pg .hx-grid{display:grid;justify-items:center;align-content:center;gap:6px;margin:0;padding:12px;border-radius:22px;background:var(--sunken);box-shadow:inset 0 0 0 1px var(--line)}
.hx-grid figcaption{color:var(--muted);font-size:13px}
.pg .hx-chips{gap:6px}
.pg .hx-chips a{min-height:34px;padding:0 13px;font-size:14px}
.hx-mini{display:grid;grid-template-columns:repeat(13,8px);gap:2px;margin:0}
.hx-mini i{width:8px;height:8px;border-radius:2px;background:var(--line)}
.hx-mini i.p{background:var(--line-strong)}
.hx-mini i.on{background:var(--ink);box-shadow:0 0 0 2px var(--paper),0 0 0 3.5px var(--ink)}
.hx-near{font-size:15px}
.hx-also{color:var(--ink-2);font-size:15px}
@media (min-width:640px){
  .hx-top{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px}
  .hx-hand .cd{font-size:34px}
  .hx-stats .pg-stat{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:12px}
  .pg .hx-vs li{grid-template-columns:minmax(0,19em) minmax(0,1fr) auto;align-items:center;column-gap:16px}
  .hx-opp{white-space:nowrap}
  .hx-stats .pg-stat span{font-size:14px}
  .hx-place{grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);align-items:stretch}
  .pg .hx-place .dw{display:block}
  .pg .hx-place .hx-near{grid-column:1/-1}
  .hx-mini{grid-template-columns:repeat(13,12px)}
  .hx-mini i{width:12px;height:12px}
}
@media (min-width:900px){
  .hx-two{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
}
/* The 169 on one grid: darker is stronger; a seat picked dims the hands the chart folds from it. */
.hx-r{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.hx-tabs{display:flex;flex-wrap:wrap;gap:5px;margin:18px 0 6px}
.hx-tabs-note{margin:0 0 12px;color:var(--muted);font-size:13.5px}
.hx-tabs label{flex:1 1 auto;display:flex;align-items:center;justify-content:center;min-height:40px;padding:0 10px;border-radius:var(--r-pill);box-shadow:inset 0 0 0 1.5px var(--line-strong);color:var(--ink-2);font:600 14px/1.2 var(--f-ui);cursor:pointer;white-space:nowrap}
#hx-all:checked~.hx-tabs label[for=hx-all],#hx-early:checked~.hx-tabs label[for=hx-early],#hx-middle:checked~.hx-tabs label[for=hx-middle],#hx-late:checked~.hx-tabs label[for=hx-late],#hx-blinds:checked~.hx-tabs label[for=hx-blinds]{background:var(--ink);box-shadow:none;color:var(--on-ink)}
#hx-all:focus-visible~.hx-tabs label[for=hx-all],#hx-early:focus-visible~.hx-tabs label[for=hx-early],#hx-middle:focus-visible~.hx-tabs label[for=hx-middle],#hx-late:focus-visible~.hx-tabs label[for=hx-late],#hx-blinds:focus-visible~.hx-tabs label[for=hx-blinds]{outline:2px solid var(--focus);outline-offset:2px}
.pg .hx-t{table-layout:fixed;width:100%;margin:0 0 10px;border-collapse:separate;border-spacing:2px;font:600 clamp(7.5px,2.55vw,13px)/1 var(--f-mono)}
.pg .hx-t th,.pg .hx-t td{display:table-cell;width:auto;padding:0;border:0;text-align:center;vertical-align:middle}
.pg .hx-t th{padding-bottom:3px;color:var(--muted);font-weight:600}
.pg .hx-t tbody th{padding:0 2px 0 0}
.pg .hx-t caption{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.pg .hx-t td{border-radius:4px}
.pg .hx-t td a{display:flex;align-items:center;justify-content:center;height:clamp(22px,6vw,44px);color:inherit;text-decoration:none;border-radius:4px}
.pg .hx-t td a:hover{box-shadow:inset 0 0 0 2px var(--ink)}
.hx-t .b1,.hx-key .b1{background:var(--ink);color:var(--on-ink)}
.hx-t .b2,.hx-key .b2{background:color-mix(in srgb,var(--ink) 34%,var(--surface));color:var(--ink)}
.hx-t .b3,.hx-key .b3{background:color-mix(in srgb,var(--ink) 18%,var(--surface));color:var(--ink)}
.hx-t .b4,.hx-key .b4{background:color-mix(in srgb,var(--ink) 8%,var(--surface));color:var(--ink)}
.hx-t .b5,.hx-key .b5{background:var(--surface);color:var(--ink);box-shadow:inset 0 0 0 1px var(--line)}
#hx-early:checked~.hx-t td:not(.e),#hx-middle:checked~.hx-t td:not(.m),#hx-late:checked~.hx-t td:not(.l),#hx-blinds:checked~.hx-t td:not(.b){opacity:.22}
#hx-early:checked~.hx-t td.e,#hx-middle:checked~.hx-t td.m,#hx-late:checked~.hx-t td.l,#hx-blinds:checked~.hx-t td.b{background:var(--ink);color:var(--on-ink);box-shadow:none}
.hx-key{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 6px;font-size:13px}
.hx-key span{padding:5px 10px;border-radius:6px}
.pg .hx-list{margin:6px 0 14px;padding:0;list-style:none}
.hx-lists{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0 16px}
.pg .hx-list li{display:grid;grid-template-columns:2em 3.2em minmax(0,1fr);align-items:baseline;gap:6px;max-width:none;margin:0;padding:7px 0;border-top:1px solid var(--line);font-size:15px}
.hx-list li>span:not(.hx-n){display:none}
.hx-list li>b{justify-self:end;font:600 14px/1 var(--f-mono)}
.hx-list .hx-n{color:var(--muted);font:600 13px/1 var(--f-mono)}
.hx-list li>a{font:700 15px/1 var(--f-mono)}
.hx-list li>span:not(.hx-n){color:var(--ink-2)}
/* A match-up: the two hands side by side with their wins, the split as a bar, then the line on it. */
.mx-duel{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:start;gap:10px;margin:18px 0 10px;padding:18px 12px;border-radius:22px;background:var(--sunken);box-shadow:inset 0 0 0 1px var(--line)}
.mx-side{display:grid;justify-items:center;gap:6px;text-align:center}
.mx-side .pg-cards{gap:5px}
.mx-side .cd{font-size:22px;border-radius:11px}
.mx-side b{font:700 clamp(26px,8vw,40px)/1 var(--f-display);letter-spacing:-.02em}
.mx-side>span:last-child{color:var(--ink-2);font-size:14px}
.mx-vs{align-self:center;color:var(--muted);font:700 14px/1 var(--f-ui);text-transform:uppercase}
.mx-split{margin:0 0 6px}
.mx-split .hx-bar{height:14px}
.mx-split p{display:flex;flex-wrap:wrap;gap:4px 16px;margin:8px 0 0;font-size:14px}
.mx-split p i{display:inline-block;width:10px;height:10px;margin-right:6px;border-radius:2px;background:var(--ink)}
.mx-split p i.t{background:var(--muted)}
.mx-split p i.l{background:var(--line-strong)}
.pg .mx-take{margin:14px 0 6px;padding:14px 16px;border-radius:18px;background:var(--surface);box-shadow:inset 0 0 0 1px var(--line);color:var(--ink);font-size:16.5px;line-height:1.45}
.pg .mx-hands{display:grid;gap:8px;margin:8px 0 14px;padding:0;list-style:none}
.pg .mx-hands li{max-width:none;margin:0}
.pg .mx-hands a{display:grid;gap:3px;padding:12px 14px;border-radius:16px;background:var(--surface);box-shadow:inset 0 0 0 1px var(--line);color:var(--ink);text-decoration:none}
.pg .mx-hands a:hover{box-shadow:inset 0 0 0 1.5px var(--ink)}
.mx-hands a span{color:var(--ink-2);font-size:14px}
.pg .mx-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,150px),1fr));gap:8px;margin:10px 0 18px;padding:0;list-style:none}
.pg .mx-grid li{max-width:none;margin:0}
.pg .mx-card{display:grid;gap:6px;height:100%;padding:12px;border-radius:16px;background:var(--surface);box-shadow:inset 0 0 0 1px var(--line);color:var(--ink);text-decoration:none}
.pg .mx-card:hover{box-shadow:inset 0 0 0 1.5px var(--ink)}
.mx-card b{font:700 16px/1.2 var(--f-display)}
.mx-mini{display:flex;flex-wrap:wrap;align-items:center;gap:4px}
.mx-mini i{color:var(--muted);font:600 11px/1 var(--f-ui);font-style:normal;text-transform:uppercase}
.mx-mini .pg-cards{gap:3px}
.mx-odds{color:var(--ink-2);font:600 13px/1.2 var(--f-mono)}
.mx-stats .pg-stat b{font-size:clamp(19px,5.6vw,30px)}
@media (min-width:640px){
  .pg .mx-hands{grid-template-columns:1fr 1fr}
  .mx-duel{padding:24px 20px;gap:18px}
  .mx-side .cd{font-size:28px}
}
@media (min-width:900px){.pg-wide .mx-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (min-width:640px){
  .pg .hx-list li{grid-template-columns:2.2em 3.4em minmax(0,1fr) auto;gap:8px}
  .hx-list li>span:not(.hx-n){display:block}
}
/* On a phone a group of match-ups is one row to swipe, the next card showing at the edge. */
@media (max-width:699px){
  .pg .mx-grid{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding-bottom:2px}
  .mx-grid::-webkit-scrollbar{display:none}
  .pg .mx-grid li{flex:0 0 156px;scroll-snap-align:start}
}

/* ===== The landing's clips and follow row (tools/clips.mjs; the section is rewritten at build between <!--clips--> markers) ===== */
.clips{--clip-r:var(--r-lg,22px);--clip-p:8px}
.clip-row{display:flex;gap:12px;margin:0 calc(var(--gut) * -1);padding:0 var(--gut) 4px;list-style:none;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:var(--gut);scrollbar-width:none}
.clip-row::-webkit-scrollbar{display:none}
.clip-row>li{flex:0 0 min(46vw,190px);scroll-snap-align:start}
.clip{display:grid;align-content:start;gap:4px;height:100%;padding:var(--clip-p);border-radius:var(--clip-r);background:var(--surface);box-shadow:inset 0 0 0 1px var(--line);color:var(--ink);text-decoration:none}
.clip-p{display:block;aspect-ratio:9/16;overflow:hidden;border-radius:calc(var(--clip-r) - var(--clip-p));background:var(--sunken)}
.clip-p img{display:block;width:100%;height:100%;object-fit:cover}
.clip-t{margin:6px 4px 0;font:700 15px/1.25 var(--f-display);letter-spacing:-.015em;text-wrap:balance}
.clip-s{margin:0 4px;overflow:hidden;color:var(--muted);font:500 11.5px/1.3 var(--f-mono);letter-spacing:.03em;white-space:nowrap;text-overflow:ellipsis}
.clip-w{margin:4px 4px 6px;overflow:hidden;color:var(--ink-2);font:600 13.5px/1.2 var(--f-ui);white-space:nowrap;text-overflow:ellipsis}
.clip-w::after{content:" \2192"}
.clip:hover .clip-w{color:var(--ink)}
.clip-ig .clip-p{display:flex;align-items:center;justify-content:center;background:radial-gradient(120% 90% at 20% 10%,#343b4c,#171a21 60%,#0c0e13);color:#f2f4f7}
.clip-mark{display:inline-flex;width:64px;height:64px;align-items:center;justify-content:center;border-radius:calc((var(--clip-r) - var(--clip-p)) * .75);box-shadow:inset 0 0 0 2px rgba(255,255,255,.4)}
.clip-mark svg{width:34px;height:34px}
.clip:focus-visible{outline:2px solid var(--focus);outline-offset:3px}
.follow{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;margin-top:28px}
.follow-l{margin:0;color:var(--muted);font:500 12.5px/1 var(--f-mono);letter-spacing:.14em;text-transform:uppercase}
.follow ul{display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0;list-style:none}
.follow a{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 16px 0 14px;border-radius:var(--r-pill);box-shadow:inset 0 0 0 1.5px var(--line-strong);color:var(--ink);font:600 15px/1 var(--f-ui);text-decoration:none}
.follow a:hover{box-shadow:inset 0 0 0 1.5px var(--ink)}
.follow svg{width:20px;height:20px}
.foot-in .soc-i{display:inline-flex;gap:4px;align-items:center}
.foot-in .soc-i a{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;padding:0;margin:0;border-radius:50%;color:var(--ink-2)}
.foot-in .soc-i a::before{display:none}
.foot-in .soc-i a:hover{color:var(--ink);background:var(--sunken);text-decoration:none}
.foot-in .soc-i svg{width:20px;height:20px}
@media (min-width:900px){
  /* The cards share the row, but never wider than 250px (two or three look intended) and never narrower than 148px (seven fit). */
  .clip-row{overflow:visible;margin-inline:0;padding:0;display:grid;grid-auto-flow:column;justify-content:start;grid-auto-columns:clamp(148px,calc((100% - (var(--n,7) - 1) * 12px) / var(--n,7)),250px)}
  .clip-row>li{flex:none}
  .clip-t{font-size:14px}
  .clip-w{font-size:13px}
}

/* The store badges: two large badges side by side filling the row (App Store 3:1, Google Play 3.3575:1 once its margin is cropped, so both share one height).
   Coming soon: both greyed and not links; the Coming Soon pill straddles Google Play's top-right corner like a sticker. */
.as-row{--as-w:min(100%,360px);display:grid;grid-template-columns:3fr 3.3575fr;gap:10px;align-items:start;width:var(--as-w);margin:18px auto 0;padding-top:10px}
.as-cell{position:relative;display:block;min-width:0}
.as-badge{display:block;padding:0;line-height:0;cursor:default}
a.as-badge{cursor:pointer;transition:transform var(--d-fast) var(--ease-out)}
a.as-badge:hover{transform:translateY(-2px)}
.as-badge img{display:block;width:100%;height:auto}
.as-play{position:relative;aspect-ratio:564/168;overflow:hidden}
.as-play img{width:114.54%;max-width:none;margin:-7.27% 0 0 -7.27%}
.as-off{filter:grayscale(1);opacity:.45;pointer-events:none;user-select:none}
.as-soon{position:absolute;top:-15px;right:-12px;z-index:1;display:inline-flex;align-items:center;height:22px;padding:0 10px;border-radius:var(--r-pill);background:#d2342a;color:#fff;font:700 11px/1 var(--f-ui);letter-spacing:.02em;white-space:nowrap;transform:rotate(7deg);transform-origin:center;box-shadow:0 0 0 1.5px var(--as-edge,var(--paper)),0 2px 6px rgba(14,17,22,.25);cursor:default;user-select:none}
.cta .as-soon{--as-edge:#0a0c10}
@media (max-width:340px){.as-row{grid-template-columns:1fr;gap:24px;--as-w:min(100%,220px)}.as-play{width:100%}}
@media (min-width:900px){.as-row{--as-w:min(100%,420px)}}
.foot .as-row,.foot-in nav .as-row{--as-w:min(100%,320px);margin:14px 0 6px;flex:0 0 auto}
@media (min-width:900px){
  .hero .acts{flex-wrap:wrap}
  .hero .acts .as-row{margin:0}
}

/* ---------- Home, shorter (tiles, carousel, Quads+ cards, sticky header) ---------- */
html{scroll-padding-top:72px}
.sec[id]{scroll-margin-top:80px}
@media (min-width:900px){html{scroll-padding-top:88px}.sec[id]{scroll-margin-top:96px}}

/* The slim bar: slides in only once the page's own header has scrolled away (the header itself is the page's, unchanged). */
.sbar{position:fixed;top:0;left:0;right:0;z-index:40;background:color-mix(in srgb,var(--paper) 94%,transparent);border-bottom:1px solid var(--line);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);transform:translateY(-110%);visibility:hidden;transition:transform .32s var(--ease-out),visibility .32s}
.sbar.on{transform:none;visibility:visible}
.sbar[hidden]{display:none}
.sbar-in{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:60px;padding-top:env(safe-area-inset-top)}
.sbar .wm{display:block;flex:none;height:30px;width:auto}
.sbar-acts{display:flex;align-items:center;gap:8px}
.sbar .top-in{padding:0 14px;white-space:nowrap}
.sbar .btn{white-space:nowrap}
@media (min-width:900px){.sbar-in{min-height:64px}.sbar .wm{height:34px}.sbar .top-in{padding:0 18px}}
@media (prefers-reduced-motion:reduce){.sbar{transition:none}}

/* The dock: a phone's bar at the foot; on a desktop the same button floats at the corner. */
@media (min-width:900px){
  .dock{left:auto;right:28px;bottom:28px;padding:0;background:none;border:0;-webkit-backdrop-filter:none;backdrop-filter:none}
  .dock .btn{width:auto;max-width:none;box-shadow:0 18px 36px -14px rgba(14,17,22,.55)}
}

/* The tables: two across on a phone, four on a desktop. A tap opens one panel of lessons under the row. */
.ladder{--tile-r:20px;--tile-p:10px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:0;padding:0;list-style:none}
.tile{position:relative;display:grid;grid-template-rows:auto auto auto auto;align-content:start;padding:var(--tile-p);border-radius:var(--tile-r);background:var(--surface);box-shadow:var(--sh-1),inset 0 0 0 1px var(--line)}
.tile-hit{position:absolute;inset:0;z-index:2;width:100%;margin:0;padding:0;border:0;border-radius:var(--tile-r);background:none;cursor:pointer;touch-action:manipulation}
.tile-stage{display:flex;align-items:flex-end;justify-content:center;height:132px;padding:10px;border-radius:calc(var(--tile-r) - var(--tile-p));background:radial-gradient(70% 55% at 50% 84%,color-mix(in srgb,var(--clay) 34%,transparent),transparent 72%),var(--sunken)}
.tile-stage img{width:100%;height:100%;object-fit:contain;object-position:center bottom;filter:drop-shadow(0 5px 6px rgba(10,12,16,.18))}
.tile-n{margin:10px 4px 0;color:var(--muted);font:500 11px/1.2 var(--f-mono);letter-spacing:.08em;text-transform:uppercase}
.tile-name{margin:5px 4px 0;font:700 16px/1.15 var(--f-display);letter-spacing:-.02em}
.tile-more{display:inline-flex;align-items:center;gap:6px;margin:6px 4px 2px;color:var(--ink-2);font-size:13px;font-weight:600}
.tile-more::after{content:"";width:6px;height:6px;border-right:1.75px solid currentColor;border-bottom:1.75px solid currentColor;transform:translateY(-2px) rotate(45deg);transition:transform .3s var(--ease-out)}
.tile.open{box-shadow:var(--sh-1),inset 0 0 0 2px var(--ink)}
.tile.open .tile-more::after{transform:translateY(1px) rotate(225deg)}
.tile-reveal{display:none}
.tile-panel{grid-column:1/-1;padding:14px 16px 12px;border-radius:var(--tile-r);background:var(--surface);box-shadow:var(--sh-1),inset 0 0 0 1px var(--line);animation:panel-in .3s var(--ease-out)}
.tile-panel .tile-line{margin:0 0 8px;color:var(--ink-2);font-size:14px;line-height:1.45}
.tile-panel .tile-lessons{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:18px;margin:0;padding:0;list-style:none}
.tile-panel .tile-lessons li{display:flex;align-items:center;gap:8px;min-height:30px;padding:3px 0;box-shadow:inset 0 -1px 0 var(--line);color:var(--ink-2);font-size:13px;line-height:1.3}
.tile-panel .tile-lessons li::before{content:"";flex:none;width:8px;height:8px;border-radius:50%;background:var(--clay);box-shadow:inset 0 0 0 1px rgba(10,12,16,.22)}
@keyframes panel-in{from{opacity:0;transform:translateY(-6px)}}
@media (max-width:359px){.tile-panel .tile-lessons{grid-template-columns:minmax(0,1fr)}}
@media (min-width:700px){.ladder{gap:14px}.tile-stage{height:160px}.tile-name{font-size:18px}.tile-panel .tile-lessons{column-gap:28px}.tile-panel .tile-line{font-size:15px}.tile-panel .tile-lessons li{font-size:14px}}
@media (min-width:1000px){.ladder{grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}.tile-panel .tile-lessons{grid-template-columns:repeat(3,minmax(0,1fr))}}

/* The carousel: one flat centre phone, turned and dimmed neighbours. Transform and opacity only. */
.screens{--sec:36px;--head-gap:12px}
.screens .eb{margin-bottom:10px}
.cs{--cs-w:min(60vw,240px,calc((100svh - 450px) / 2.18));--cs-step:calc(var(--cs-w) * .6);position:relative}
.cs-stage{position:relative;height:calc(var(--cs-w) * 2.42 + 28px);overflow:clip;perspective:1700px;perspective-origin:50% 38%;touch-action:pan-y;cursor:grab;-webkit-tap-highlight-color:transparent;outline-offset:-3px;border-radius:24px;-webkit-mask-composite:source-in;mask-composite:intersect;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent),linear-gradient(180deg,#000 calc(100% - 28px),transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent),linear-gradient(180deg,#000 calc(100% - 28px),transparent)}
.cs.is-drag .cs-stage{cursor:grabbing}
/* Before site.js runs, or with JS off, the first phone stands alone and centred; the rest wait hidden. */
.cs:not(.is-live) .cs-slide:not(:first-child){visibility:hidden}
.cs-slides{position:absolute;inset:0;margin:0;padding:0;list-style:none;transform-style:preserve-3d;pointer-events:none}
.cs-slide{position:absolute;top:calc(14px + var(--cs-w) * .22);left:50%;width:var(--cs-w);margin-left:calc(var(--cs-w) / -2);will-change:transform,opacity}
/* The side phones fade under a paper veil, not by opacity, so one phone never shows through another. */
.cs-slide .phone{position:relative;width:100%}
.cs-slide .phone::after{content:"";position:absolute;z-index:2;inset:calc(10px - max(5px,2.3cqw) - 2.5px);border-radius:calc(12.5cqw + max(5px,2.3cqw) + 2.5px);background:var(--paper);opacity:var(--v,0);pointer-events:none}
.cs-slide:not([data-far]){pointer-events:auto}
.cs-caps{display:grid;max-width:44ch;margin:8px auto 0;text-align:center}
.cs-cap{grid-area:1/1;opacity:0;visibility:hidden;transition:opacity .4s var(--ease-out),visibility .4s}
.cs-cap.is-on{opacity:1;visibility:visible}
.cs-cap h3{margin:0;font:700 22px/1.15 var(--f-display);letter-spacing:-.025em;text-wrap:balance}
.cs-cap p{margin:8px 0 0;color:var(--ink-2);font-size:15.5px;line-height:1.5;text-wrap:pretty}
.cs-bar{display:flex;align-items:center;justify-content:center;gap:10px;margin-top:10px;padding-bottom:8px}
.cs-arrow{display:grid;place-items:center;width:44px;height:44px;padding:0;border:0;border-radius:50%;background:var(--surface);color:var(--ink);box-shadow:inset 0 0 0 1px var(--line-strong);cursor:pointer;touch-action:manipulation}
.cs-arrow:hover{box-shadow:inset 0 0 0 1.5px var(--ink)}
.cs-arrow svg{width:20px;height:20px}
.cs-dots{display:flex;align-items:center}
.cs-dot{position:relative;width:24px;height:44px;padding:0;border:0;background:none;cursor:pointer;touch-action:manipulation}
.cs-dot::after{content:"";position:absolute;left:50%;top:50%;width:8px;height:8px;margin:-4px 0 0 -4px;border-radius:99px;background:var(--line-strong);transition:width .5s var(--spring-flip),margin .5s var(--spring-flip),background .3s}
.cs-dot[aria-current="true"]::after{width:20px;margin-left:-10px;background:var(--ink)}
@media (min-width:700px){.cs{--cs-w:min(34vw,270px,calc((100svh - 410px) / 2.18));--cs-step:calc(var(--cs-w) * .68)}.cs-stage{-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent),linear-gradient(180deg,#000 calc(100% - 40px),transparent);mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent),linear-gradient(180deg,#000 calc(100% - 40px),transparent)}.cs-cap h3{font-size:28px}.cs-cap p{font-size:17px}}
@media (min-width:1000px){.cs{--cs-w:min(24vw,300px,calc((100svh - 410px) / 2.18));--cs-step:calc(var(--cs-w) * .66)}}
@media (min-width:1800px){.cs{--cs-w:min(340px,calc((100svh - 410px) / 2.18))}}
@media (max-width:359px){.cs{--cs-w:min(56vw,calc((100svh - 450px) / 2.18))}}
@media (prefers-reduced-motion:reduce){
  .tile-panel{animation:none}
  .cs-cap{transition:none}
}

/* Quads+ on the home page: a compact grid of its four own features. */
.pf-compact{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:28px}
.pf-compact .pf{padding:6px 6px 12px;border-radius:20px}
.pf-compact .pf-stage{height:100px;padding:8px 8px 0;align-items:flex-start;border-radius:14px}
.pf-compact .pf-stage img{height:auto;border-radius:6px 6px 0 0}
.pf-compact h4{margin:10px 6px 0;font-size:15px}
.pf-compact p{margin:4px 6px 0;font-size:13px;line-height:1.4}
.plus-join{display:flex;justify-content:center}
@media (max-width:699px){.plus{padding:32px 18px 22px}.plus>.stars{display:none}.plus-mark{margin-bottom:16px}.plus-join{margin-top:20px}}
@media (max-width:359px){.pf-compact{grid-template-columns:minmax(0,1fr)}}
@media (min-width:700px){.pf-compact{grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-top:40px}.pf-compact .pf-stage{height:170px}.pf-compact h4{font-size:17px}.pf-compact p{font-size:14px}}
@media (min-width:900px){.plus{padding:56px 56px 40px}}

/* The rest of the home page, tighter. */
.more-list{gap:10px}
.more-list li{grid-template-columns:36px 1fr;column-gap:12px;padding:14px}
.more-list img{width:36px}
.more-list h3{font-size:17px}
.more-list p{margin-top:4px;font-size:14px;line-height:1.45}
@media (min-width:1100px){.more-list,.promise .more-list{grid-template-columns:repeat(4,1fr)}}
.starts{padding:14px}
.starts-q{margin-bottom:10px}
.starts ul{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.starts li{grid-template-columns:24px minmax(0,1fr);column-gap:10px;padding:10px}
.starts img{width:24px}
@media (min-width:1000px){.starts ul{grid-template-columns:repeat(4,minmax(0,1fr))}}
#climb,#more,#clips,#promise,#plus,#faq,.cta{--sec:72px;--head-gap:22px}
@media (min-width:900px){#climb,#more,#clips,#promise,#plus,#faq,.cta{--sec:120px;--head-gap:32px}}

/* ---------- The roundup: Quads, made by us. A felt-lit dark card with a gold edge; the start button leads it. ---------- */
.ap-quads{--aq-r:26px;--aq-p:18px;--gold:linear-gradient(140deg,#f3dc95,#b58a32 38%,#8f6a22 62%,#ecce7a)}
.pg .ap-list>li.ap-quads{--ink:#f4f5f7;--ink-2:rgba(244,245,247,.76);--muted:rgba(244,245,247,.62);--line:rgba(255,255,255,.12);--line-strong:rgba(255,255,255,.24);--surface:#0e1116;--sunken:rgba(255,255,255,.07);--on-ink:#0e1116;position:relative;isolation:isolate;display:grid;gap:0;padding:var(--aq-p);border:1.5px solid transparent;border-radius:var(--aq-r);color:var(--ink);background:radial-gradient(120% 70% at 50% 0%,rgba(36,128,92,.42),transparent 62%) padding-box,linear-gradient(#0e1116,#0e1116) padding-box,var(--gold) border-box;box-shadow:0 34px 70px -34px rgba(14,17,22,.7)}
.pg .ap-quads>*{grid-column:1/-1;min-width:0}
.pg .ap-quads>.defs{position:absolute}
.ap-icon{flex:none;width:64px;height:64px;border-radius:16px;box-shadow:0 0 0 1px rgba(255,255,255,.18),0 10px 22px -10px rgba(0,0,0,.7)}
.pg .ap-quads .ap-head{margin-bottom:14px}
.pg .ap-quads .ap-head h3{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;font-size:24px;color:var(--ink)}
.pg .ap-quads .ap-head h3 a{color:inherit}
.ap-made{display:inline-flex;align-items:center;padding:3px 10px;border-radius:var(--r-pill);background:var(--gold);color:#1b1405;font:600 12px/1.4 var(--f-mono);letter-spacing:.04em}
.pg .ap-quads .pg-cta{margin:0 0 16px}
.pg .ap-quads .pg-cta .btn{width:100%;min-height:60px;font-size:18px;box-shadow:0 0 0 1px rgba(243,220,149,.5),0 14px 30px -12px rgba(0,0,0,.8)}
.pg .ap-quads .pg-cta span{flex:1 1 100%;text-align:center;font-size:13.5px}
.pg .ap-chips{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 16px;padding:0;list-style:none}
.pg .ap-chips li{margin:0;padding:6px 12px;border-radius:var(--r-pill);background:var(--sunken);box-shadow:inset 0 0 0 1px var(--line);color:var(--ink);font:600 13px/1.2 var(--f-ui)}
.ap-shots{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:0 0 18px}
.ap-shots figure{margin:0;padding:5px;border-radius:18px;background:rgba(255,255,255,.07);box-shadow:inset 0 0 0 1px rgba(255,255,255,.14),0 20px 34px -22px rgba(0,0,0,.9)}
.ap-shots img{display:block;width:100%;height:auto;border-radius:13px}
.ap-quads .ql{height:.95em;vertical-align:-.12em}
.ap-t .ql{height:.95em;vertical-align:-.12em}
@media (min-width:700px){
  .pg-wide .ap-list>li.ap-quads{column-span:all;margin-top:4px;grid-template-columns:minmax(0,1fr) auto;column-gap:28px}
  .ap-quads{--aq-p:28px}
  .pg .ap-quads .ap-head{grid-column:1;margin-bottom:20px}
  .pg .ap-quads .pg-cta{grid-column:2;grid-row:1;align-self:start;display:grid;justify-items:center;gap:8px;margin:0 0 20px}
  .pg .ap-quads .pg-cta .btn{width:auto;min-width:260px;min-height:68px;padding-inline:36px;font-size:20px}
  .pg .ap-quads .pg-cta span{flex:none}
  .pg .ap-quads .ap-head h3{font-size:28px}
  .ap-icon{width:80px;height:80px;border-radius:20px}
  .ap-shots{gap:18px}
  .ap-shots figure{padding:8px;border-radius:24px}
  .ap-shots img{border-radius:16px}
  .pg-wide .ap-quads .ap-d{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:40px}
}

/* Starts: a four-rung ladder, one full-width row each on a phone, four equal columns from 700. */
.starts{padding:18px}
.starts-q{margin:0;font:700 22px/1.15 var(--f-display);letter-spacing:-.025em;text-wrap:balance}
.starts-sub{margin:6px 0 14px;color:var(--ink-2);font-size:15px;line-height:1.45;max-width:52ch}
.starts ul{grid-template-columns:minmax(0,1fr);gap:8px}
.starts li{grid-template-columns:40px minmax(0,1fr);column-gap:14px;padding:10px 14px 10px 10px;border-radius:18px}
.starts img{width:40px}
.starts b,.starts span{white-space:nowrap}
.starts b{font-size:16px}
@media (min-width:700px){
  .starts{padding:22px}
  .starts-q{font-size:26px}
  .starts ul{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
}
/* The promise: plain text on the page, two refusals, the Quads+ point small beneath. */
.promise .wrap{text-align:center}
.promise h2{font-size:clamp(30px,8.6vw,52px);line-height:1.02;text-wrap:balance}
.pr-big{display:grid;gap:34px;margin:28px 0 0;padding:0;list-style:none}
.pr-ic{display:block;width:44px;height:44px;margin:0 auto 12px;color:var(--ink)}
.pr-ic svg{display:block;width:44px;height:44px}
.pr-ic path:last-child{stroke:#c7362f}
.pr-big h3{margin:0;font:700 clamp(25px,7vw,34px)/1.05 var(--f-display);letter-spacing:-.03em;text-wrap:balance}
.pr-big p{margin:10px auto 0;max-width:34ch;color:var(--ink-2);font-size:16.5px;line-height:1.45}
.pr-plus{display:flex;align-items:center;justify-content:center;gap:.4em;margin:26px 0 0;color:var(--ink-2);font:600 16px/1.2 var(--f-ui)}
.pr-plus .ql{height:1.05em;width:auto}
.promise .acts{margin-top:22px}
@media (min-width:760px){.pr-big{grid-template-columns:1fr 1fr;gap:32px}}
.promise .sec-head{max-width:none;margin-inline:auto;text-align:center}
.promise .sec-head h2{margin-inline:auto}

/* Round 8: the promise heading in two clean lines, roomier starts tiles, the clips inside the carousel. */
.promise h2 .nb{display:inline-block;max-width:100%}
.promise .pr-big p{text-wrap:pretty}
@media (min-width:700px){.promise h2 .nb{display:block}}

/* Round 9: starts back to a 2x2 card level with its heading; no-chip spot; every band shares one width. */
.chip-none{grid-row:span 2;width:40px;aspect-ratio:1;border-radius:50%;box-sizing:border-box;border:1.5px dashed var(--muted)}
.starts li{padding:10px 16px 10px 10px}
@media (min-width:700px){.starts li{padding:12px 16px}}
@media (min-width:900px){
  .climb-top{align-items:stretch}
  .starts{display:flex;flex-direction:column}
  .starts ul{flex:1;grid-auto-rows:1fr}
}
@media (min-width:900px){
  .climb-top .sec-head{display:flex;flex-direction:column}
  .climb-top .sec-head .lede{margin-top:auto;padding-top:var(--head-gap,22px)}
}
@media (min-width:900px) and (max-width:1279px){
  .climb-top{grid-template-columns:minmax(0,.75fr) minmax(0,1.25fr);gap:40px}
  .starts li{padding:12px 12px 12px 10px}
  .starts li{column-gap:12px}
}

/* Round 10b: more air over the Quads+ line, the day cards centred, and inline links in the page ink. */
@media (min-width:760px){.pr-plus{margin-top:38px}}
@media (min-width:900px){.clip-row{justify-content:center}}
.more-list a{color:inherit;text-decoration:underline;text-decoration-color:var(--line-strong);text-underline-offset:3px;text-decoration-thickness:1.5px}
.more-list a:hover{text-decoration-color:var(--ink)}

/* Round 11b: the phone hero a little tighter so its Let's go! lands whole (the dock covers it whenever it is cut), a 44px hit area
   on the top-bar pills, and the clips head centred over the centred cards. */
.hero .acts{margin-top:22px}
.hero h1{margin-bottom:12px}
.top-in,.sbar .btn{position:relative}
.top-in::after{content:"";position:absolute;inset:-2px;border-radius:inherit}
@media (min-width:600px){.hero .acts{margin-top:28px}.hero h1{margin-bottom:14px}}
@media (min-width:900px){
  .hero .acts{margin-top:32px}
  .clips .sec-head{text-align:center}
  .clips .sec-head h2,.clips .sec-head .lede{margin-inline:auto}
  .follow{justify-content:center}
}
.clip-ig .clip-p{position:relative;overflow:hidden}
.clip-grid{position:absolute;inset:0;display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;gap:3px}
.clip-grid img{display:block;width:100%;height:100%;object-fit:cover}
.clip-ig .clip-p::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(12,14,19,.62),rgba(12,14,19,.8))}
.clip-ig .clip-mark{position:relative;z-index:2;background:rgba(12,14,19,.35)}
/* Directory badges (Fazier and the next ones): their own centred row, the very last thing in every footer. */
.foot .fz,.foot-in .fz{flex:1 1 100%;order:9;display:flex;justify-content:center;padding:6px 0 0}
.foot .fz:hover{text-decoration:none}
.fz img{display:block;width:120px;height:auto}