/* The app's own palette, sampled from the printed cards rather than invented:
   scallop gold is 15.7% of every card face, and red belongs to hearts only --
   it is never spent on a warning. This page is dark-committed, as the app is,
   so the theme blocks below only guard against a transparent ground. */
:root{
  --pitch:#180010; --oxblood:#570106; --plum:#4E043E; --rose:#4E0930;
  --surface:#26071F; --surface-hi:#330B29;
  --gold:#F9C861; --gold-dim:#D9A44B; --gold-deep:#8A5A05;
  --ink:#F6E8E4; --ink-dim:#C9AEB6; --ink-faint:#AF95A0;
  --heart:#C31D2C;
  --rule:rgba(249,200,97,.22); --rule-soft:rgba(249,200,97,.10);
  --shadow:0 18px 50px rgba(0,0,0,.45);
  --max:1180px;
}
*{box-sizing:border-box}

/* THE COMPANION RULE TO THE width/height ATTRIBUTES ON EVERY <img>.
   Those attributes exist so the browser can reserve each image's box before
   it decodes, which is what stops the text jumping. But HTML width/height are
   PRESENTATIONAL HINTS -- they map to the CSS width and height properties --
   so `height="1050"` really does mean `height:1050px` unless something
   overrides it. `.fan img` sets only a width, so the hint won, and the hero
   cards rendered 1050px tall and lay across the headline.
   Caught by measuring: computed height came back 1050px against an expected
   413px. Any rule that genuinely wants a fixed height (.plate img) is more
   specific than this and still wins. */
img{max-width:100%;height:auto}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto}
  *{animation:none!important;transition:none!important}}
body{
  margin:0;background:var(--pitch);color:var(--ink);
  font-family:"Mulish",system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:17px;line-height:1.65;-webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
h1,h2,h3,.display{font-family:"Prata",Georgia,"Times New Roman",serif;font-weight:400;
  text-wrap:balance;margin:0;letter-spacing:-.005em}
h1{font-size:clamp(40px,7.2vw,78px);line-height:1.04}
h2{font-size:clamp(29px,4.4vw,46px);line-height:1.14}
h3{font-size:clamp(19px,2.2vw,23px);line-height:1.3}
p{margin:0 0 18px}
a{color:var(--gold)}
.wrap{max-width:var(--max);margin:0 auto;padding:0 24px}
.eyebrow{font-size:11.5px;font-weight:800;letter-spacing:.2em;text-transform:uppercase;
  color:var(--gold-dim);margin:0 0 18px}
.lede{font-size:clamp(18px,2.1vw,21px);color:var(--ink-dim);max-width:60ch}
section{padding:clamp(64px,9vw,120px) 0;position:relative}

/* ---- nav ------------------------------------------------------------- */
nav{position:sticky;top:0;z-index:50;backdrop-filter:blur(14px);
  background:rgba(24,0,16,.82);border-bottom:1px solid var(--rule-soft)}
.nav-in{max-width:var(--max);margin:0 auto;padding:12px 24px;
  display:flex;align-items:center;gap:18px}
/* PLATED, because half this mark is invisible here otherwise.
   The wordmark is two halves in opposite values -- "Love" in pink, "COUPLES"
   in black chrome -- and measured against this ground the pink half sits at
   7.43:1 while the chrome half is 1.38:1, against a 3:1 floor. Dropped
   straight onto the plum, half the logo simply is not there.
   The app solves it the same way: the mark keeps its own light card. */
.plate{background:linear-gradient(180deg,#FFFFFF,#F6ECEF);
  border-radius:12px;padding:7px 12px;display:inline-flex;align-items:center;
  box-shadow:0 6px 18px rgba(0,0,0,.32)}
.nav-in .plate img{height:34px;width:auto;display:block}
footer .plate img{height:40px;width:auto;display:block}
.nav-links{margin-left:auto;display:flex;gap:26px;align-items:center}
/* ⚠ :not(.btn) OR THE BUTTON LOSES ITS OWN TEXT COLOUR. `.nav-links a` is a
   class plus a type (0,1,1); `.btn-gold` is one class (0,1,0), so the link
   rule wins and paints the gold button's label in --ink-dim. On that gradient
   that measured 1.04:1 -- not dim, gone -- while every other .btn-gold on the
   site sits at 9.27:1. The same guard is on the display rule below, and on
   `footer a` and `.hero-note a`, which have the identical shape and would do
   the identical thing the day a button is put in either. */
.nav-links a:not(.btn){color:var(--ink-dim)}
/* ⚠ THE PADDING IS THE TARGET. At 14.5px with no padding these boxes measure
   23.9px tall -- 0.1px under the 24x24 CSS px WCAG 2.2 floor for a pointer
   target, which a navigation link does not get an exception from. :not(.btn)
   for the reason above: without it this resizes every gold button too. */
.nav-links a{text-decoration:none;font-size:14.5px;font-weight:600}
.nav-links a:not(.btn){padding-block:5px}
.nav-links a:not(.btn):hover{color:var(--gold)}
@media (max-width:760px){.nav-links a:not(.btn){display:none}}

/* ---- buttons --------------------------------------------------------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;
  min-height:52px;padding:14px 26px;border-radius:14px;text-decoration:none;
  font-size:13px;font-weight:800;letter-spacing:.13em;text-transform:uppercase;
  border:1px solid transparent;cursor:pointer;transition:transform .18s ease,box-shadow .18s ease}
.btn-gold{background:linear-gradient(180deg,#FBD98C,#E9AE45);color:#2A0A04;
  box-shadow:0 10px 30px rgba(249,200,97,.22)}
.btn-gold:hover{transform:translateY(-2px);box-shadow:0 16px 40px rgba(249,200,97,.3)}
.btn-ghost{border-color:var(--rule);color:var(--gold);background:rgba(249,200,97,.05)}
.btn-ghost:hover{background:rgba(249,200,97,.1)}
.btn-row{display:flex;gap:14px;flex-wrap:wrap;margin-top:34px}

/* ---- the scallop, lifted from the border of the printed cards -------- */
.scallop{display:block;width:100%;height:16px;opacity:.55;
  background-repeat:repeat-x;background-size:26px 16px;
  background-image:radial-gradient(circle at 13px 16px, transparent 11px, var(--gold) 11px, var(--gold) 12.2px, transparent 12.4px)}

/* ---- hero ------------------------------------------------------------ */
.hero{padding-top:clamp(52px,7vw,92px);padding-bottom:0;overflow:hidden}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center}
.hero h1 em{font-style:normal;color:var(--gold)}
.hero .lede{margin-top:22px}
.hero-note{margin-top:20px;font-size:14px;color:var(--ink-faint)}
.fan{position:relative;height:clamp(340px,42vw,520px)}
.fan img{position:absolute;top:50%;left:50%;width:clamp(150px,20vw,236px);
  border-radius:14px;box-shadow:var(--shadow);transform-origin:50% 90%}
.fan img:nth-child(1){transform:translate(-50%,-50%) rotate(-16deg) translateX(-124px)}
.fan img:nth-child(2){transform:translate(-50%,-50%) rotate(-6deg) translateX(-44px)}
.fan img:nth-child(3){transform:translate(-50%,-52%) rotate(3deg) translateX(44px);z-index:2}
.fan img:nth-child(4){transform:translate(-50%,-50%) rotate(13deg) translateX(128px)}
@media (max-width:900px){
  .hero-grid{grid-template-columns:1fr;gap:34px}
  .fan{height:330px;order:-1}
  .fan img{width:150px}
  .fan img:nth-child(1){transform:translate(-50%,-50%) rotate(-14deg) translateX(-92px)}
  .fan img:nth-child(2){transform:translate(-50%,-50%) rotate(-5deg) translateX(-32px)}
  .fan img:nth-child(3){transform:translate(-50%,-52%) rotate(4deg) translateX(32px)}
  .fan img:nth-child(4){transform:translate(-50%,-50%) rotate(13deg) translateX(94px)}
}

/* ---- grounds --------------------------------------------------------- *
 * THE GROUNDS ARE NOT FLAT ANY MORE, and what is on them is the board's.
 *
 * gamesassets/Love and Couples board.png is not a gradient. It is a dark
 * crimson field with soft blurred swooshes of fabric behind it and a drift
 * of small glossy hearts scattered right across it. The site had the
 * gradient and none of the rest, which is why it read as empty.
 *
 * THREE LAYERS, IN THIS ORDER, and the order is the whole trick:
 *   1. the heart field, or the card border's fish-scale texture
 *   2. a soft bloom, off-centre, standing in for the board's swooshes
 *   3. the gradient that was already here, unchanged
 * Backgrounds paint behind content by definition, so none of this needs a
 * z-index, a pseudo-element or a single extra node in the document.
 *
 * WHICH TEXTURE GOES WHERE alternates deliberately. Hearts carry the loud
 * grounds; the quieter ones take the scales, which is gold and reads as
 * structure rather than sentiment. A page textured the same way all the way
 * down is wallpaper.
 *
 * Every alpha here is low enough to leave the type where it was — checked
 * after the fact against shadowGold eyebrows and inkFaint captions, which
 * are the two dimmest inks on the page and therefore the ones that decide. */
:root{
  --hearts:url(/assets/decor/hearts.svg);
  --hearts-far:url(/assets/decor/hearts-far.svg);
  --scales:url(/assets/decor/scales.svg);
}

/* The loud ones: both heart layers, at two sizes so they never repeat in
   step with each other, plus a magenta bloom high on the right. */
.ground-oxblood{
  background:
    var(--hearts) repeat 0 0/560px,
    var(--hearts-far) repeat 0 0/440px,
    radial-gradient(1100px 620px at 84% 12%, rgba(231,1,137,.10), transparent 68%),
    radial-gradient(900px 520px at 8% 88%, rgba(72,0,0,.55), transparent 70%),
    linear-gradient(180deg,var(--oxblood) 0%,var(--plum) 62%,var(--pitch) 100%)}

/* The middle ones: the far field only, so a busy section (the walkthrough
   phone, five card faces) is not competing with its own background. */
.ground-plum{
  background:
    var(--hearts-far) repeat 0 0/440px,
    radial-gradient(1000px 560px at 12% 20%, rgba(159,31,99,.12), transparent 70%),
    linear-gradient(180deg,var(--pitch) 0%,var(--rose) 48%,var(--pitch) 100%)}

.ground-surface{
  background:
    var(--scales) repeat 0 0/132px 66px,
    radial-gradient(900px 500px at 78% 30%, rgba(159,31,99,.15), transparent 72%),
    linear-gradient(180deg,var(--pitch),var(--surface) 50%,var(--pitch))}

/* Sections with no ground of their own were the emptiest thing on the page:
   flat pitch, edge to edge. They get the scales and one low bloom. Class
   selectors above outrank this element selector, so a section that has a
   ground keeps it. */
section{
  background:
    var(--scales) repeat 0 0/132px 66px,
    radial-gradient(1000px 560px at 88% 8%, rgba(159,31,99,.14), transparent 70%),
    var(--pitch)}

/* ---- the night, as steps -------------------------------------------- */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:44px;counter-reset:s}
.step{background:rgba(255,255,255,.035);border:1px solid var(--rule-soft);
  border-radius:18px;padding:26px 22px}
.step .n{font-family:"Prata",serif;font-size:15px;color:var(--gold-dim);
  display:block;margin-bottom:12px;font-variant-numeric:tabular-nums}
.step h3{margin-bottom:8px}
.step p{color:var(--ink-dim);font-size:15.5px;margin:0}
@media (max-width:900px){.steps{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.steps{grid-template-columns:1fr}}

/* ---- suits ----------------------------------------------------------- */
.suits{display:grid;grid-template-columns:repeat(5,1fr);gap:18px;margin-top:46px}
.suit img{width:100%;border-radius:12px;box-shadow:var(--shadow);display:block}
.suit b{display:block;margin-top:14px;font-family:"Prata",serif;font-weight:400;font-size:18px}
.suit span{color:var(--ink-faint);font-size:14px}
/* Who plays it. Five lines, and each is one sentence.
   ⚠ A LIST, NOT CARDS. Five cards would be a grid of five boxes competing
   with the suits section two screens down, which is the one place on this
   page that earns a grid. This reads at a glance and takes a fifth of the
   height. */
.whofor{list-style:none;padding:0;margin:34px 0 0;
  display:grid;gap:14px;max-width:62ch}
.whofor li{padding-left:16px;border-left:2px solid var(--rule)}
.whofor b{display:block;font-family:"Prata",serif;font-weight:400;
  font-size:19px;color:var(--ink)}
.whofor span{display:block;margin-top:3px;color:var(--ink-dim);
  font-size:15px;line-height:1.6}
@media (min-width:820px){
  .whofor{grid-template-columns:1fr 1fr;gap:14px 34px;max-width:none}
}

/* A real idea from the app, under each suit.
   ⚠ QUOTED AND SET APART, because it is somebody else's sentence: every one
   of these is copied out of the shipped `suggestions` table rather than
   written for this page. It reads as an example, not as a claim the site is
   making about what a day contains. */
.eg{display:block;margin-top:9px;font-style:normal;font-size:13.5px;
  line-height:1.5;color:var(--gold-dim);
  border-left:2px solid var(--rule);padding-left:10px}

/* The price's one comparison, kept to one line and no arithmetic. */
.price-note{margin:22px 0 0;color:var(--gold-dim);font-size:14.5px}

/* The mechanics, folded.
   ⚠ THE MARKER IS THE AFFORDANCE. A summary with the default triangle reads
   as a browser control rather than as part of the page, and one with the
   marker removed and nothing put back reads as a heading nobody can open. */
.fold{margin-top:34px}
.fold>summary{list-style:none;cursor:pointer;display:flex;align-items:center;
  gap:10px;padding:14px 18px;border-radius:12px;
  border:1px solid var(--rule);background:rgba(249,200,97,.05);
  font-size:13px;font-weight:800;letter-spacing:.13em;text-transform:uppercase;
  color:var(--gold)}
.fold>summary::-webkit-details-marker{display:none}
.fold>summary::after{content:"+";margin-left:auto;font-size:19px;line-height:1;
  font-weight:400}
.fold[open]>summary::after{content:"3"}
.fold>summary:hover{background:rgba(249,200,97,.1)}
@media (max-width:980px){
  .suits{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:64%;
    overflow-x:auto;scroll-snap-type:x mandatory;
    padding-bottom:14px;margin-left:-24px;margin-right:-24px;padding-left:24px;padding-right:24px}
  .suit{scroll-snap-align:center}
}

/* ---- feature rows ---------------------------------------------------- */
.rows{display:grid;gap:18px;margin-top:44px}
.row{display:grid;grid-template-columns:190px 1fr;gap:26px;align-items:start;
  padding:26px 0;border-top:1px solid var(--rule-soft)}
.row:last-child{border-bottom:1px solid var(--rule-soft)}
.row h3{color:var(--gold)}
.row p{margin:0;color:var(--ink-dim)}
@media (max-width:760px){.row{grid-template-columns:1fr;gap:8px}}

/* ---- tokens ---------------------------------------------------------- */
.tokens{display:grid;grid-template-columns:repeat(5,1fr);gap:22px;margin-top:46px}
.token{text-align:center}
.token img{width:100%;max-width:132px;height:auto;display:block;margin:0 auto;
  filter:drop-shadow(0 12px 26px rgba(0,0,0,.5))}
.token b{display:block;margin-top:16px;font-family:"Prata",serif;font-weight:400;
  font-size:19px}
.token span{display:block;margin-top:6px;color:var(--ink-dim);font-size:14.5px;
  line-height:1.5}
.token em{display:block;margin-top:8px;font-style:normal;font-size:12px;
  letter-spacing:.12em;text-transform:uppercase;color:var(--gold-dim)}
@media (max-width:980px){.tokens{grid-template-columns:repeat(3,1fr);gap:30px 18px}}
@media (max-width:600px){.tokens{grid-template-columns:repeat(2,1fr)}
  .token img{max-width:104px}}

/* ---- the case ---------------------------------------------------------- */
.case{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;margin-top:48px}
.case blockquote{margin:0;padding:0}
.case .big{font-family:"Prata",serif;font-size:clamp(30px,4vw,42px);
  line-height:1.15;color:var(--gold);margin:0 0 14px}
.case p{color:var(--ink-dim);margin:0;font-size:16px}
@media (max-width:860px){.case{grid-template-columns:1fr;gap:34px}}

/* ---- pledge / privacy ------------------------------------------------ */
.pledge{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:44px}
.card{background:rgba(255,255,255,.035);border:1px solid var(--rule-soft);
  border-radius:18px;padding:28px 24px}
.card h3{margin-bottom:10px}
.card p{margin:0;color:var(--ink-dim);font-size:15.5px}
@media (max-width:860px){.pledge{grid-template-columns:1fr}}

/* ---- finale ---------------------------------------------------------- */
.finale{text-align:center}
.script{font-family:"Pinyon Script",cursive;font-size:clamp(38px,6vw,68px);
  color:var(--gold);line-height:1.25;margin:0 0 22px}
.finale .lede{margin:0 auto}

/* ---- board ----------------------------------------------------------- */
.board-grid{display:grid;grid-template-columns:1fr 1fr;gap:52px;align-items:center}
.board-grid img{width:100%;border-radius:18px;box-shadow:var(--shadow);display:block}
@media (max-width:900px){.board-grid{grid-template-columns:1fr;gap:30px}}

/* ---- price ----------------------------------------------------------- */
.price-card{max-width:560px;margin:44px auto 0;text-align:center;
  background:linear-gradient(180deg,rgba(249,200,97,.09),rgba(249,200,97,.02));
  border:1px solid var(--rule);border-radius:24px;padding:44px 32px}
.price{font-family:"Prata",serif;font-size:clamp(46px,7vw,66px);line-height:1;margin:6px 0}
.price small{font-size:17px;color:var(--ink-faint);font-family:"Mulish",sans-serif}
.price-card ul{list-style:none;padding:0;margin:26px 0 0;text-align:left;
  display:inline-block}
.price-card li{padding:9px 0 9px 30px;position:relative;color:var(--ink-dim);font-size:16px}
.price-card li::before{content:"";position:absolute;left:6px;top:18px;
  width:7px;height:7px;border-radius:50%;background:var(--gold)}

/* ---- faq ------------------------------------------------------------- */
details{border-top:1px solid var(--rule-soft);padding:20px 0}
details:last-of-type{border-bottom:1px solid var(--rule-soft)}
summary{cursor:pointer;font-family:"Prata",serif;font-size:19px;list-style:none;
  display:flex;justify-content:space-between;gap:18px;align-items:center;min-height:32px}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";color:var(--gold);font-size:24px;font-family:"Mulish",sans-serif;line-height:1}
details[open] summary::after{content:"\2212"}
details p{margin:14px 0 0;color:var(--ink-dim);max-width:70ch}

/* ---- footer ---------------------------------------------------------- */
footer{padding:56px 0 44px;border-top:1px solid var(--rule-soft);color:var(--ink-faint);font-size:14.5px}
.foot-grid{display:flex;flex-wrap:wrap;gap:22px 40px;align-items:center}
footer a:not(.btn){color:var(--ink-dim)}
footer a{text-decoration:none}
/* Same 23.9px shortfall as the nav, and on a phone these are the ONLY links
   still on screen -- the nav ones are display:none under 760px. */
footer a:not(.btn){padding-block:5px}
footer a:not(.btn):hover{color:var(--gold)}
.foot-note{margin-top:26px;font-size:13px;color:var(--ink-faint);max-width:70ch}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:6px}
/* =======================================================================
   THE PREMIUM LAYER
   -----------------------------------------------------------------------
   Everything above this line is the page standing still. Everything below
   is what it does when somebody arrives, scrolls, or points at something.

   ONE RULE GOVERNS ALL OF IT: every animation here is decoration over a
   layout that already works. Nothing appears only after a scroll listener
   fires, nothing is positioned by script, and no content depends on a
   keyframe completing. The reduced-motion block at the very bottom turns
   the whole layer off in one stroke, and the page it leaves behind is the
   page -- not a broken version of it. That is the difference between a
   site that feels expensive and one that feels fragile.
   ======================================================================= */

/* ---- scroll rail ------------------------------------------------------
   A season is twenty-one nights, so reading progress is drawn as a season:
   a gold line that fills, and a counter naming the night you would be on.
   A progress bar that says something about the game, not the document. */
.rail{position:fixed;top:0;left:0;right:0;height:2px;z-index:60;
  background:transparent;pointer-events:none}
.rail i{display:block;height:100%;width:0;
  background:linear-gradient(90deg,var(--gold-deep),var(--gold));
  box-shadow:0 0 14px rgba(249,200,97,.55)}
.rail-night{position:fixed;right:18px;bottom:18px;z-index:60;
  font-size:11px;letter-spacing:.16em;text-transform:uppercase;font-weight:800;
  color:var(--gold-dim);background:rgba(24,0,16,.78);backdrop-filter:blur(10px);
  border:1px solid var(--rule-soft);border-radius:999px;padding:9px 15px;
  font-variant-numeric:tabular-nums;opacity:0;transition:opacity .4s ease;
  pointer-events:none}
.rail-night.on{opacity:1}
@media (max-width:760px){.rail-night{display:none}}

/* ---- reveal on scroll -------------------------------------------------
   THIS CLASS IS NEVER WRITTEN INTO THE HTML. It sets opacity to 0, so any
   markup carrying it depends on script running to become visible again --
   and a page whose content is invisible when a script fails is a page that
   fails completely rather than partially. The script attaches it at run
   time and observes in the same breath. See lc_tail.html. */
.rise{opacity:0;transform:translateY(22px);
  transition:opacity .7s cubic-bezier(.2,.7,.3,1),transform .7s cubic-bezier(.2,.7,.3,1)}
.rise.in{opacity:1;transform:none}
.rise-2{transition-delay:.09s}
.rise-3{transition-delay:.18s}
.rise-4{transition-delay:.27s}
.rise-5{transition-delay:.36s}

/* ---- hero: the deal ---------------------------------------------------
   The cards arrive the way a hand is dealt -- from one point, in order,
   settling into the fan. The end state of every card is exactly the
   transform the static rule already gave it, so this is a way of ARRIVING
   at the layout rather than a second layout that has to agree with it. */
.fan img{animation:deal .9s cubic-bezier(.16,.9,.3,1) backwards}
.fan img:nth-child(1){animation-delay:.05s}
.fan img:nth-child(2){animation-delay:.14s}
.fan img:nth-child(3){animation-delay:.23s}
.fan img:nth-child(4){animation-delay:.32s}
@keyframes deal{
  from{opacity:0;
    transform:translate(-50%,-50%) rotate(0deg) translateX(0) translateY(46px) scale(.86)}
}
/* Ambient light behind the fan, drifting. The printed board is photographed
   under a warm lamp; this is the same lamp, moving slowly enough that you
   notice it only if you stop and look. */
.fan::before{content:"";position:absolute;inset:-14% -8%;border-radius:50%;
  background:radial-gradient(closest-side,rgba(231,1,137,.20),rgba(249,200,97,.09) 55%,transparent 78%);
  filter:blur(28px);animation:drift 14s ease-in-out infinite alternate;z-index:0}
.fan img{z-index:1}
.fan img:nth-child(3){z-index:2}
@keyframes drift{
  from{transform:translate(-4%,2%) scale(1)}
  to{transform:translate(5%,-3%) scale(1.09)}
}

/* ---- countdown --------------------------------------------------------
   Four cells, tabular figures, and a tick on the seconds only. Animating
   all four makes a clock that never settles; animating the one that
   actually changes each second reads as alive and stays legible. */
.count{display:flex;gap:10px;margin-top:18px;flex-wrap:wrap}
.count .cell{min-width:78px;padding:14px 12px 11px;text-align:center;
  border:1px solid var(--rule);border-radius:14px;
  background:linear-gradient(180deg,rgba(249,200,97,.09),rgba(249,200,97,.015))}
.count .num{font-family:"Prata",serif;font-size:30px;line-height:1;
  font-variant-numeric:tabular-nums;color:var(--ink);display:block}
.count .lab{display:block;margin-top:7px;font-size:10px;font-weight:800;
  letter-spacing:.16em;text-transform:uppercase;color:var(--gold-dim)}
.count .cell.tick .num{animation:tick .5s ease}
@keyframes tick{
  0%{transform:translateY(-5px);opacity:.35}
  100%{transform:none;opacity:1}
}
.count-lead{margin:30px 0 0;font-size:11.5px;font-weight:800;letter-spacing:.2em;
  text-transform:uppercase;color:var(--gold-dim)}
@media (max-width:420px){.count .cell{min-width:0;flex:1}}

/* ---- the walkthrough --------------------------------------------------
   A phone that plays the real flow rather than four screenshots in a row.
   The frame is CSS; the screens inside are built from the app's own
   colours and strings -- LcColor, the ritual's two questions, the reveal's
   three cells -- so what is demonstrated is what ships. */
.walk{display:grid;grid-template-columns:1fr 380px;gap:56px;align-items:center;
  margin-top:52px}
@media (max-width:940px){.walk{grid-template-columns:1fr;gap:38px}
  .walk .phone-col{order:-1;justify-self:center}}

.steps-list{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.steps-list li{position:relative}
.steps-list button{width:100%;text-align:left;display:grid;
  grid-template-columns:32px 1fr;gap:16px;align-items:start;
  background:transparent;border:0;border-left:2px solid var(--rule-soft);
  padding:16px 18px;cursor:pointer;color:inherit;font:inherit;
  transition:background .3s ease,border-color .3s ease}
.steps-list button:hover{background:rgba(255,255,255,.03)}
.steps-list li.on button{border-left-color:var(--gold);
  background:linear-gradient(90deg,rgba(249,200,97,.09),transparent)}
.steps-list .k{font-family:"Prata",serif;font-size:14px;color:var(--gold-dim);
  font-variant-numeric:tabular-nums;padding-top:3px}
.steps-list li.on .k{color:var(--gold)}
.steps-list .t{font-family:"Prata",serif;font-size:19px;display:block;
  margin-bottom:3px}
.steps-list .d{color:var(--ink-faint);font-size:14.5px;line-height:1.5;
  display:block;max-width:46ch}
.steps-list li.on .d{color:var(--ink-dim)}
/* The autoplay clock, drawn as the left border filling. It is the only
   sign the thing advances on its own, and it stops when anybody clicks. */
.steps-list li.on button::before{content:"";position:absolute;left:-2px;top:0;
  width:2px;height:0;background:var(--gold);box-shadow:0 0 8px var(--gold)}
.steps-list li.on.timing button::before{animation:fill 7s linear forwards}
@keyframes fill{to{height:100%}}

.phone-col{display:flex;flex-direction:column;align-items:center;gap:18px}
/* THE FRAME FOLLOWS THE SCREENSHOTS, not the other way round. These are
   real captures at 800x1240, and a 9/19.5 phone shell would have to letterbox
   or crop them -- a device outline that lies about the picture inside it. So
   there is no shell and no notch: the screen sits on the ground with its own
   corners, which is also what every screenshot on this page then agrees on. */
.device{width:340px;max-width:88vw;aspect-ratio:800/1240;position:relative;
  border-radius:26px;overflow:hidden;background:var(--pitch);
  box-shadow:0 40px 90px rgba(0,0,0,.6),0 0 0 1px rgba(249,200,97,.16)}
.screens{position:absolute;inset:0}
.scr{position:absolute;inset:0;opacity:0;transform:translateX(14px) scale(.99);
  transition:opacity .45s ease,transform .45s ease;pointer-events:none}
.scr.on{opacity:1;transform:none;pointer-events:auto}
.scr img{display:block;width:100%;height:100%;object-fit:cover;
  object-position:top center}
.scr .eye{font-size:8.5px;font-weight:800;letter-spacing:.17em;
  text-transform:uppercase;color:var(--gold-dim);margin:0 0 9px}
.scr .q{font-family:"Prata",serif;font-size:17px;line-height:1.28;margin:0 0 13px}
.scr .sub{font-size:11px;color:var(--ink-faint);line-height:1.45;margin:0}
.scr .grow{flex:1;min-height:0}
.pbtn{display:block;width:100%;text-align:center;border-radius:11px;
  padding:12px 8px;font-size:9.5px;font-weight:800;letter-spacing:.14em;
  text-transform:uppercase;margin-top:8px}
.pbtn.gold{background:linear-gradient(180deg,#FBD98C,#E9AE45);color:#2A0A04}
.pbtn.ghost{border:1px solid var(--rule);color:var(--gold)}
.pbtn.flat{border:1px solid var(--rule-soft);color:var(--ink-dim)}
.strip{border:1px solid var(--rule-soft);border-radius:15px;padding:14px;
  background:linear-gradient(180deg,rgba(255,255,255,.05),transparent)}
.strip .big{font-family:"Prata",serif;font-size:23px;margin:5px 0 3px}
.clock{font-variant-numeric:tabular-nums;color:var(--gold);font-size:12px;
  font-weight:700;letter-spacing:.06em}
.mini{display:flex;gap:3px;margin-top:15px}
.mini i{flex:1;height:6px;border-radius:2px;background:rgba(255,255,255,.09)}
.mini i.d{background:var(--gold-dim)}
.mini i.n{background:var(--gold);box-shadow:0 0 8px rgba(249,200,97,.8)}
.chips{display:flex;gap:6px;margin-top:4px}
.chips b{flex:1;text-align:center;padding:11px 0;border-radius:9px;
  border:1px solid var(--rule-soft);font-family:"Prata",serif;font-size:15px;
  font-weight:400;color:var(--ink-dim)}
.chips b.sel{background:rgba(249,200,97,.16);border-color:var(--gold);color:var(--gold)}
.note-box{margin-top:11px;border:1px solid var(--rule-soft);border-radius:11px;
  padding:11px;min-height:60px;font-size:11px;color:var(--ink-faint);line-height:1.5}
.note-box u{text-decoration:none;color:var(--ink-dim)}
.caret{display:inline-block;width:1px;height:11px;background:var(--gold);
  vertical-align:-1px;animation:blink 1.1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
.cells{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:12px}
.cell2{border:1px solid var(--rule-soft);border-radius:12px;padding:13px 10px;
  text-align:center}
.cell2 .l{font-size:8px;font-weight:800;letter-spacing:.15em;
  text-transform:uppercase;color:var(--gold-dim);display:block}
.cell2 .v{font-family:"Prata",serif;font-size:29px;display:block;margin-top:5px;
  line-height:1}
.hit{margin-top:11px;text-align:center;font-size:10.5px;color:var(--gold);
  border:1px solid var(--rule);border-radius:999px;padding:8px;
  letter-spacing:.09em;text-transform:uppercase;font-weight:800}
.phone-cap{font-size:12.5px;color:var(--ink-faint);text-align:center;max-width:300px}

/* ---- the season track, drawn ------------------------------------------
   Twenty-one tiles in three acts. It fills once, on entering view, because
   the point is the SHAPE of a season -- the acts changing colour, the
   finale sitting apart -- not a loop that keeps asking for attention. */
.track{margin-top:46px}
.track-tiles{display:grid;grid-template-columns:repeat(21,1fr);gap:4px}
.track-tiles i{height:44px;border-radius:5px;background:rgba(255,255,255,.055);
  position:relative;overflow:hidden}
.track-tiles i::after{content:"";position:absolute;inset:0;
  transform:scaleY(0);transform-origin:bottom;background:var(--c);
  transition:transform .5s cubic-bezier(.2,.8,.3,1)}
.track.in .track-tiles i::after{transform:scaleY(1)}
.track-legend{display:flex;gap:20px;flex-wrap:wrap;margin-top:16px;
  font-size:12px;letter-spacing:.1em;text-transform:uppercase;font-weight:800;
  color:var(--ink-faint)}
.track-legend span{display:flex;align-items:center;gap:8px}
.track-legend s{width:11px;height:11px;border-radius:3px;text-decoration:none}
@media (max-width:700px){.track-tiles i{height:30px}.track-tiles{gap:2px}}

/* ---- counters ---------------------------------------------------------- */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:46px;
  border-top:1px solid var(--rule-soft);border-bottom:1px solid var(--rule-soft);
  padding:34px 0}
.stat b{display:block;font-family:"Prata",serif;font-size:clamp(34px,5vw,52px);
  line-height:1;color:var(--gold);font-variant-numeric:tabular-nums;font-weight:400}
.stat span{display:block;margin-top:9px;font-size:13px;color:var(--ink-faint);
  line-height:1.45}
@media (max-width:700px){.stats{grid-template-columns:1fr 1fr;gap:28px 20px}}

/* ---- token medallions, in the hand ------------------------------------
   They lift and turn toward the pointer. A physical piece is the thing
   being sold here, so it behaves like one. Guarded on hover:hover -- a
   tilt that needs a hover state is a tilt that sticks on a phone. */
.token{transition:transform .5s cubic-bezier(.2,.8,.3,1)}
.token img{transition:transform .5s cubic-bezier(.2,.8,.3,1),
  filter .5s ease;will-change:transform}
@media (hover:hover){
  .token:hover{transform:translateY(-8px)}
  .token:hover img{transform:rotate(-7deg) scale(1.06);
    filter:drop-shadow(0 20px 34px rgba(0,0,0,.62))
      drop-shadow(0 0 22px rgba(249,200,97,.22))}
  .suit img{transition:transform .5s cubic-bezier(.2,.8,.3,1),box-shadow .5s ease}
  .suit:hover img{transform:translateY(-10px) rotate(-1.4deg) scale(1.03);
    box-shadow:0 34px 70px rgba(0,0,0,.6)}
}

/* ---- sticky call to action, phones only --------------------------------
   The hero's buttons scroll away after one screen and the page is long.
   This is the one piece of chrome that follows you down it. */
.dock{position:fixed;left:0;right:0;bottom:0;z-index:55;
  padding:11px 16px calc(11px + env(safe-area-inset-bottom));
  background:rgba(24,0,16,.9);backdrop-filter:blur(14px);
  border-top:1px solid var(--rule-soft);
  transform:translateY(115%);transition:transform .45s cubic-bezier(.2,.8,.3,1)}
.dock.up{transform:none}
.dock .btn{width:100%;min-height:50px}
@media (min-width:761px){.dock{display:none}}
/* The dock is fixed, so it sits ON the page rather than in it, and at the
   very bottom of the scroll it covered the last line of the footer -- the
   copyright and the note about the printed game. Measured at 12px of
   overlap on a 375x812 phone; the footer buys back the dock's own height
   plus the home-indicator inset. */
@media (max-width:760px){footer{padding-bottom:calc(120px + env(safe-area-inset-bottom))}}

/* ---- reduced motion ----------------------------------------------------
   One block, and the premium layer is gone. What remains is the page as it
   was before any of it: every element at its final position, every screen
   in the walkthrough still reachable by clicking a step, the countdown
   still counting. Nothing here hides content. */
@media (prefers-reduced-motion: reduce){
  .rise{opacity:1;transform:none}
  .fan img{animation:none}
  .fan::before{animation:none}
  .track-tiles i::after{transform:scaleY(1);transition:none}
  .steps-list li.on.timing button::before{animation:none}
  .scr{transition:none}
  .caret{animation:none}
  .dock{transition:none}
  .count .cell.tick .num{animation:none}
}

/* ---- a pair of real screens ------------------------------------------ */
/* Shown at the screenshots' own 800x1240 and never cropped: a screenshot
   cropped to fit a frame is a picture of a decision somebody made in CSS
   rather than of the app. */
.pair{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(24px,4vw,56px);
  margin:clamp(40px,6vw,68px) 0 0;align-items:start}
.pair>div{display:flex;flex-direction:column;gap:16px;align-items:center}
.pair img{display:block;width:100%;max-width:330px;height:auto;
  border-radius:22px;background:var(--pitch);
  box-shadow:0 30px 70px rgba(0,0,0,.55),0 0 0 1px rgba(249,200,97,.16)}
.pair figcaption{font-size:13.5px;line-height:1.55;color:var(--ink-dim);
  max-width:330px;text-align:center}
@media (max-width:760px){.pair{grid-template-columns:1fr;gap:44px}}

/* ---- how to play ------------------------------------------------------ */
/* ⚠ EVERY SCENE IS SOMETHING YOU DO, and the button under it stays dead
   until you have. The app's walkthrough works the same way for the same
   reason: nine taps on Next teaches nobody anything, and afterwards the page
   believes it has explained the game. site.js arms each one. */
.learn-hero h1{max-width:14ch}
.beats{list-style:none;margin:0;padding:0;counter-reset:none}
.beat{padding:clamp(44px,7vw,86px) 0;border-top:1px solid var(--rule-soft)}
.beat:first-child{border-top:0;padding-top:0}
.beat .n{font-size:12px;font-weight:800;letter-spacing:.2em;color:var(--gold);
  margin:0 0 14px}
.beat .n span{color:var(--ink-faint);font-weight:600}
.beat h2{margin:6px 0 0}
.beat .lede{margin-top:16px;max-width:58ch}
.beat .foot{margin:22px 0 0;padding:14px 16px;border:1px solid var(--rule-soft);
  border-radius:12px;color:var(--ink-faint);font-size:14px;line-height:1.6;
  max-width:62ch}

/* The stage. One height for all nine so the page does not jump. */
.scene{margin-top:30px;min-height:250px;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:18px;cursor:pointer;
  user-select:none}
.beat[data-act="read"] .scene{cursor:default}
.scene .do{margin:0;font-size:13px;color:var(--ink-faint);text-align:center}
.beat.done .scene .do{color:var(--gold-dim)}

/* 01 — the season deals itself. The tiles rest faint and in place: an empty
   rectangle with a caption in it reads as a page that failed to draw. */
/* ⚠ overflow-x:clip OR THE PAGE SCROLLS SIDEWAYS ON A PHONE. The tiles rest
   at translate(26px,-16px) and only snap home when the beat is scrolled into
   view, so until then the seventh column sits 26px right of the grid -- which
   at 369 and 393 is 2px past the viewport, and 2px is enough for a phone to
   scroll. Measured on how-to-play.html at both widths.
   clip, NOT hidden: hidden would make this a scroll container. overflow-y
   stays visible so the -16px part of the entry is not cut. */
.sc-deal{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;width:100%;
  max-width:420px;overflow-x:clip}
.sc-deal i{aspect-ratio:1/1.4;border:1px solid var(--rule);border-radius:4px;
  background:var(--surface);opacity:.2;transform:translate(26px,-16px);
  transition:opacity .42s ease,transform .42s ease;
  transition-delay:calc(var(--i) * 26ms);display:grid;place-items:center;
  font-style:normal;font-size:11px;color:var(--ink-dim)}
.sc-deal i.fin{border-color:var(--heart);color:var(--heart)}
.sc-deal i::after{content:attr(data-n)}
.beat.done .sc-deal i{opacity:1;transform:none}

/* 02 — a card goes on a night */
.sc-draft{display:flex;flex-direction:column;align-items:center;gap:20px}
.sc-draft .day{width:70px;height:98px;border:1px solid var(--rule);
  border-radius:5px;background:var(--surface);display:grid;place-items:center;
  font-size:12px;color:var(--ink-faint);transition:border-color .3s ease}
.beat.done .sc-draft .day{border-color:var(--gold)}
.sc-draft .chips{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
.sc-draft .chip{padding:8px 13px;border-radius:9px;font-size:13px;
  color:var(--ink);background:transparent;border:1px solid currentColor;
  cursor:pointer;transition:opacity .3s ease}
.beat.done .sc-draft .chip:not(.picked){opacity:.28}
.s-assistance{color:#C93F94}.s-gifts{color:#7E6BD9}.s-time{color:#E3A6DF}
.s-touch{color:#FF7DA8}.s-words{color:#D5202F}

/* 03 — the envelope. The wax lands late and hard: it is the moment the thing
   stops being changeable, which is what the beat is about. */
.sc-seal{perspective:700px}
.sc-seal .env{position:relative;width:190px;height:126px;border-radius:6px;
  /* The envelope stock and the wax, the same two the app uses. */
  background:#FBF3EA;box-shadow:0 14px 34px rgba(0,0,0,.45)}
.sc-seal .flap{position:absolute;inset:0 0 auto;height:68px;
  transform-origin:top center;transform:rotateX(-88deg);
  transition:transform .55s cubic-bezier(.2,.7,.3,1);
  background:linear-gradient(#F7EADF,#EEDCCB);
  clip-path:polygon(0 0,100% 0,50% 100%)}
.sc-seal .wax{position:absolute;left:50%;top:50%;width:40px;height:40px;
  margin:-20px 0 0 -20px;border-radius:50%;background:#480000;
  color:var(--gold);display:grid;place-items:center;font-family:"Prata",serif;
  transform:scale(0);transition:transform .4s cubic-bezier(.3,1.5,.5,1) .34s}
.beat.done .sc-seal .flap{transform:rotateX(0)}
.beat.done .sc-seal .wax{transform:scale(1)}

/* 04 — the card turns over */
.sc-turn{perspective:900px}
.sc-turn .flip{position:relative;width:118px;height:166px;
  transform-style:preserve-3d;transition:transform .68s cubic-bezier(.4,0,.2,1)}
.beat.done .sc-turn .flip{transform:rotateY(180deg)}
.sc-turn .flip>span{position:absolute;inset:0;backface-visibility:hidden;
  border:1.5px solid var(--gold);border-radius:7px;overflow:hidden;
  display:grid;place-items:center;background:var(--surface-hi);
  box-shadow:0 16px 34px rgba(0,0,0,.5);color:var(--gold-dim);font-size:22px}
.sc-turn .face{transform:rotateY(180deg)}
.sc-turn .face img{width:100%;height:100%;object-fit:cover}

/* 05 — the phone goes face down. Nothing to press; it breathes. */
.sc-apart{display:flex;align-items:center;gap:26px}
.sc-apart .who{width:54px;height:54px;border-radius:50%;
  border:1px solid var(--rule);display:grid;place-items:center;font-size:12px;
  color:var(--ink-dim);animation:sway 2.6s ease-in-out infinite alternate}
.sc-apart .who:last-child{animation-direction:alternate-reverse}
.sc-apart .phone{width:84px;height:50px;border-radius:9px;
  border:1px solid var(--rule);display:grid;place-items:center;font-size:11px;
  color:var(--ink-faint)}
@keyframes sway{from{transform:translateX(-6px)}to{transform:translateX(6px)}}

/* 06 & 07 — the guess and the score */
.sc-pick,.sc-score{display:flex;flex-direction:column;align-items:center;
  gap:16px;width:100%;max-width:400px}
.sc-pick .ask{margin:0;font-size:14px;color:var(--ink-dim)}
.opts{display:flex;gap:12px}
.opts button{width:74px;height:66px;border-radius:11px;background:var(--surface);
  border:1px solid var(--rule);color:var(--ink);font-family:"Prata",serif;
  font-size:24px;cursor:pointer;transition:border-color .25s ease,
  background .25s ease}
.opts.round button{width:68px;height:68px;border-radius:50%;background:none}
.opts button.picked{border-color:var(--gold);background:rgba(249,200,97,.12)}
.sc-pick .secret{margin:0;font-size:12px;color:var(--gold-dim);opacity:0;
  transition:opacity .4s ease}
.beat.done .sc-pick .secret{opacity:1}
.sc-score .note{width:100%;margin:0;min-height:58px;padding:12px 14px;
  border:1px solid var(--rule);border-radius:11px;color:var(--ink-faint);
  font-size:14px;line-height:1.5;transition:border-color .25s ease,
  color .25s ease}
.beat.done .sc-score .note{border-color:var(--gold);color:var(--ink)}

/* 08 — both locks, then the reveal */
.sc-lock{display:flex;flex-direction:column;align-items:center;gap:22px}
.sc-lock .locks{display:flex;gap:38px}
.sc-lock .pad{position:relative;font-size:11px;color:var(--ink-faint);
  padding-top:34px;text-align:center}
.sc-lock .pad::before{content:"";position:absolute;top:0;left:50%;
  width:22px;height:18px;margin-left:-11px;border-radius:3px;
  background:var(--gold-dim);opacity:.45;transition:opacity .3s ease}
.sc-lock .pad::after{content:"";position:absolute;top:-9px;left:50%;
  width:16px;height:16px;margin-left:-8px;border:2px solid var(--gold-dim);
  border-bottom:0;border-radius:8px 8px 0 0;opacity:.45;
  transition:transform .3s ease,opacity .3s ease}
.beat.done .sc-lock .pad::before,.beat.done .sc-lock .pad::after{opacity:1;
  background:var(--gold);border-color:var(--gold)}
.beat.done .sc-lock .them::before{transition-delay:.42s}
.beat.done .sc-lock .them::after{transition-delay:.42s}
.beat.done .sc-lock .pad{color:var(--ink)}
.sc-lock .figures{display:flex;gap:14px;opacity:0;transform:translateY(10px);
  transition:opacity .45s ease .8s,transform .45s ease .8s}
.beat.done .sc-lock .figures{opacity:1;transform:none}
.sc-lock .figures span{width:106px;padding:12px 0;border:1px solid var(--rule);
  border-radius:11px;display:flex;flex-direction:column;align-items:center;
  gap:4px;font-family:"Prata",serif;font-size:22px}
.sc-lock .figures b{font-family:inherit;font-size:10px;font-weight:800;
  letter-spacing:.16em;text-transform:uppercase;color:var(--gold-dim)}

/* 09 — a Double Down, and the line */
.sc-spend{display:flex;flex-direction:column;align-items:center;gap:26px;
  width:100%;max-width:440px}
.sc-spend .dd{display:flex;align-items:center;gap:14px;font-family:"Prata",serif;
  font-size:26px;color:var(--ink-faint)}
.sc-spend .dd i{width:38px;height:38px;border-radius:7px;background:#C0577F;
  opacity:.35;transition:opacity .3s ease}
.beat.done .sc-spend .dd i{opacity:1}
.sc-spend .arw{font-size:16px;color:var(--gold-dim)}
.sc-spend .now{color:var(--gold);transform:scale(.6);opacity:0;
  transition:transform .45s cubic-bezier(.3,1.5,.5,1) .1s,opacity .3s ease .1s}
.beat.done .sc-spend .now{transform:none;opacity:1}
.sc-spend .bar{position:relative;width:100%;height:22px}
.sc-spend .bar::before{content:"";position:absolute;left:0;right:0;top:9px;
  height:4px;background:var(--rule-soft)}
.sc-spend .fill{position:absolute;left:0;top:9px;height:4px;width:0;
  background:var(--gold);transition:width 1s ease .3s}
.beat.done .sc-spend .fill{width:100%}
.sc-spend .tick{position:absolute;top:2px;width:2px;height:18px;
  background:var(--gold-dim);font-style:normal}
.sc-spend .line-note{margin:0;font-size:13px;color:var(--ink-faint)}

@media (prefers-reduced-motion:reduce){
  .sc-deal i,.sc-seal .flap,.sc-seal .wax,.sc-turn .flip,.sc-lock .figures,
  .sc-spend .fill,.sc-spend .now,.sc-lock .pad::before,.sc-lock .pad::after{
    transition-duration:1ms;transition-delay:0ms}
  .sc-apart .who{animation:none}
}

/* ---- the scale ---------------------------------------------------------
   The four bands a season can put you in, on both the landing page and the
   pitch. A definition list in all but name: the number is the term and the
   name is what it means, so they are laid out as pairs rather than as a
   sentence with four commas in it.

   ⚠ TABULAR FIGURES on the ranges, because "43-62" and "66-68" sit one above
   the other and proportional digits make the dashes wander. */
.scale{list-style:none;margin:14px 0 16px;padding:0;
  display:flex;flex-direction:column;gap:7px}
.scale li{display:flex;align-items:baseline;gap:14px;
  padding:9px 14px;border-radius:11px;
  background:rgba(249,200,97,.05);
  border-left:2px solid var(--gold-dim)}
.scale b{flex:0 0 auto;min-width:84px;color:var(--gold);
  font-size:13.5px;font-weight:800;letter-spacing:.04em;
  font-variant-numeric:tabular-nums}
.scale span{color:var(--ink);font-size:15px}
/* The top band earns the brighter edge: it is the one that cannot be reached
   without the Double Down landing. */
.scale li:last-child{border-left-color:var(--gold);
  background:rgba(249,200,97,.09)}
@media (max-width:430px){
  .scale li{flex-direction:column;gap:2px}
  .scale b{min-width:0}
}

/* ---- the pitch --------------------------------------------------------- */
/* ⚠ IT IS HIDDEN UNTIL SCRIPT OPENS IT. The markup ships with [hidden], so a
   visitor with no JavaScript gets the site rather than a modal they cannot
   close, and a crawler indexes the page rather than a dialog. */
.pitch{position:fixed;inset:0;z-index:80;display:flex;align-items:center;
  justify-content:center;padding:clamp(12px,3vw,32px);
  background:rgba(10,0,7,.72);backdrop-filter:blur(7px);
  animation:pitch-in .4s ease both}
.pitch[hidden]{display:none}
.pitch-sheet{position:relative;width:min(680px,100%);max-height:100%;
  display:flex;flex-direction:column;border-radius:20px;overflow:hidden;
  background:linear-gradient(#2E0724,#1B0413 62%,#230618);
  border:1px solid var(--rule);
  box-shadow:0 50px 120px rgba(0,0,0,.7);
  animation:pitch-rise .5s cubic-bezier(.2,.8,.3,1) both}
@keyframes pitch-in{from{opacity:0}to{opacity:1}}
@keyframes pitch-rise{from{opacity:0;transform:translateY(20px) scale(.985)}
  to{opacity:1;transform:none}}

.pitch-x{position:absolute;top:10px;right:12px;z-index:2;width:40px;height:40px;
  border:0;border-radius:50%;background:rgba(0,0,0,.34);color:var(--ink-dim);
  font-size:24px;line-height:1;cursor:pointer}
.pitch-x:hover{color:var(--ink)}

/* The mark, so the sheet says whose game this is before it says anything
   else. It is NOT in _pitch.html: that block is shared with the page at
   /what-is-this, where the nav already carries the logo.

   ⚠ PLATED, FOR THE REASON THE NAV IS PLATED. This wordmark is two halves in
   opposite values -- "Love" in pink, "COUPLES" in black chrome -- and on this
   plum the chrome half measures 1.38:1 against a 3:1 floor. Dropped straight
   onto the ground it is not so much dim as absent, and the mark reads as the
   one word. It reuses .plate rather than restating it, so the sheet and the
   nav cannot drift apart.

   AND IT IS SIZED IN HEIGHT, not width. The file is 320x221; setting a width
   makes the cap height depend on the aspect ratio of whatever is in the file,
   which is how it ended up smaller here than in the nav despite a larger
   number. 54px of mark against the nav's 34 -- this is the first thing on the
   sheet and has the room to be. */
.pitch-mark{margin:0;padding:26px 0 0;text-align:center}
.pitch-mark .plate{padding:9px 15px;border-radius:14px}
.pitch-mark img{height:54px;width:auto;display:block}
@media (max-width:520px){.pitch-mark img{height:44px}}

/* ⚠ THE SCROLLBAR IS PART OF THE DESIGN HERE, not something the browser is
   left to draw. A default Windows bar is a grey chute down the side of a deep
   plum sheet, and it is the first thing the eye goes to. Both syntaxes are
   given: Firefox honours the standard properties, Chrome and Safari still
   want the ::-webkit- pseudo-elements, and neither reads the other's.
   scrollbar-gutter keeps the text from shifting when the bar appears. */
.pitch-scroll{overflow-y:auto;padding:clamp(20px,4vw,34px) clamp(26px,5vw,44px)
  clamp(26px,5vw,44px);-webkit-overflow-scrolling:touch;
  scrollbar-width:thin;scrollbar-gutter:stable;
  scrollbar-color:rgba(249,200,97,.30) transparent}
.pitch-scroll::-webkit-scrollbar{width:8px}
.pitch-scroll::-webkit-scrollbar-track{background:transparent}
.pitch-scroll::-webkit-scrollbar-thumb{border-radius:99px;
  background:rgba(249,200,97,.26);border:2px solid transparent;
  background-clip:content-box}
.pitch-scroll::-webkit-scrollbar-thumb:hover{background:rgba(249,200,97,.46);
  background-clip:content-box}

/* And a hint that there IS more, which a hairline bar no longer gives.
   ⚠ ANCHORED TO THE FOOTER, NOT TO A NUMBER. This was `bottom:var(--foot,96px)`
   on the sheet -- a guess at the footer's height that nothing ever set. It
   happened to clear the buttons on a wide screen, where they sit in one row.
   Under 560px they wrap to two rows, the footer grows past the guess, and the
   fade landed square across the top of the gold call to action and dimmed it.
   Hung off .pitch-foot at bottom:100% it sits exactly on that footer's top
   edge, one row or two, and there is no height left to get wrong. */
.pitch-foot::before{content:"";position:absolute;left:0;right:0;bottom:100%;
  height:56px;pointer-events:none;
  background:linear-gradient(rgba(27,4,19,0),rgba(27,4,19,.92))}
.pitch-scroll>p{margin:0 0 15px;color:var(--ink-dim);line-height:1.7;
  font-size:15.5px}
.pitch-scroll h2{font-size:clamp(28px,5.4vw,42px);line-height:1.1;margin:8px 0 0}
.pitch-scroll h3{font-size:clamp(17px,2.6vw,21px);margin:30px 0 12px;
  color:var(--gold)}
.pitch-scroll .ask{margin-top:22px;color:var(--ink);font-size:17.5px;
  font-family:"Prata",serif}
.pitch-scroll .sub{margin-top:22px;color:var(--ink)}
.pitch-scroll .turn{margin:24px 0 6px;color:var(--gold-dim);
  font-family:"Prata",serif;font-size:17px}
.pitch-scroll .beats-lines{line-height:1.9;color:var(--ink)}
.pitch-scroll .pay{font-family:"Prata",serif;font-size:20px;color:var(--gold);
  margin:18px 0 20px}
.pitch-scroll .cry{margin-top:30px;font-family:"Prata",serif;
  font-size:clamp(20px,3.4vw,26px);color:var(--ink);letter-spacing:.01em}
.pitch-scroll .cry-sub{color:var(--gold-dim)}

/* ⚠ THE REAL CARDS, NOT EMOJI. The five suits are printed objects with their
   own art, and the site already ships it -- a heart and a clock glyph beside a
   Prata heading is a stock icon standing in for a thing the reader can
   actually see. Same argument as the tokens two lists down. */
.cats{list-style:none;margin:0 0 18px;padding:0;display:grid;gap:13px}
.cats li{display:flex;align-items:center;gap:15px}
.cats img{width:46px;height:80px;flex:0 0 46px;border-radius:4px;
  object-fit:cover;border:1px solid var(--rule)}
.cats span{color:var(--ink-dim);font-size:14.5px;line-height:1.55}
.cats b{display:block;color:var(--ink);font-size:15px;margin-bottom:3px}

/* The five medallions are the app's own art, not a drawing of it. */
.toks{list-style:none;margin:0 0 8px;padding:0;display:grid;gap:14px}
.toks li{display:flex;align-items:center;gap:15px}
.toks img{width:58px;height:58px;flex:0 0 58px}
.toks span{color:var(--ink-dim);font-size:14.5px;line-height:1.55}
.toks b{display:block;color:var(--gold);font-size:12px;font-weight:800;
  letter-spacing:.16em;text-transform:uppercase;margin-bottom:3px}
.dd-block{display:flex;align-items:flex-start;gap:18px;margin:6px 0 18px;
  padding:18px;border:1px solid var(--rule-soft);border-radius:14px}
.dd-block img{width:66px;height:66px;flex:0 0 66px}
.dd-block h3{margin:0 0 8px}
.dd-block p{margin:0;color:var(--ink-dim);font-size:15px;line-height:1.65}

.pitch-foot{position:relative;display:flex;gap:12px;flex-wrap:wrap;
  justify-content:center;
  padding:16px clamp(20px,4vw,34px) 20px;border-top:1px solid var(--rule-soft);
  background:rgba(0,0,0,.22)}
.pitch-foot .btn{flex:1 1 auto;text-align:center;min-width:180px}

@media (max-width:560px){
  .toks img{width:46px;height:46px;flex-basis:46px}
  .dd-block{flex-direction:column;gap:12px}
}
@media (prefers-reduced-motion:reduce){
  .pitch,.pitch-sheet{animation-duration:1ms}
}

/* The pitch, given a page of its own. */
.pitch-page{padding-bottom:clamp(56px,8vw,96px)}
.pitch-article{max-width:660px;margin:0 auto}
.pitch-article h2{font-size:clamp(30px,6vw,50px);line-height:1.08;margin:8px 0 0}
.pitch-article h3{font-size:clamp(18px,2.8vw,23px);margin:34px 0 12px;
  color:var(--gold)}
.pitch-article>p{margin:0 0 15px;color:var(--ink-dim);line-height:1.7;
  font-size:16px}
.pitch-article .ask{margin-top:24px;color:var(--ink);font-size:18px;
  font-family:"Prata",serif}
.pitch-article .sub{margin-top:24px;color:var(--ink)}
.pitch-article .turn{margin:26px 0 6px;color:var(--gold-dim);
  font-family:"Prata",serif;font-size:18px}
.pitch-article .beats-lines{line-height:1.9;color:var(--ink)}
.pitch-article .pay{font-family:"Prata",serif;font-size:22px;color:var(--gold);
  margin:18px 0 20px}
.pitch-article .cry{margin-top:32px;font-family:"Prata",serif;
  font-size:clamp(22px,4vw,30px);color:var(--ink)}
.pitch-article .cry-sub{color:var(--gold-dim)}

.hero-note a:not(.btn){color:var(--gold-dim)}
.hero-note a{text-decoration:underline;
  text-underline-offset:3px}
.hero-note a:not(.btn):hover{color:var(--gold)}