/* ═════════════════════════════════════════════════════════════════════════
   Peel & Eat — the storefront.

   THE PAGE IS A SCORECARD, NOT A CATALOGUE.

   A scorecard is a ruled ledger. Every structural device here comes from that
   one artefact: hairline rules, banded rows, a header strip of hole numbers,
   and a settlement line along the bottom. Consequences, held to deliberately:

     · no box carries a border on all four sides
     · no rounded corners anywhere
     · no drop shadow on any UI element — the ONE shadow on this page is under
       the card render, because that is a physical object lying on a table and
       not a box we drew
     · rules and rhythm carry the structure; nothing is enclosed

   COLOUR. The felt, the cream, the pencil and two rule weights are the whole
   palette. The only other chroma on the page is the fourteen per-game accents
   out of cards.json. They paint a narrow rule and a low-opacity row wash, never
   type: measured against --felt, twelve of the fourteen fall below 4.5:1
   (best-ball and wolf sit at 2.0), so accent-as-text would be unreadable for
   most of the pack. One rule for all fourteen beats two rules and a lookup
   table. Brass is gone — brass on dark green is the generic premium-club
   signal that made the old page anonymous, and nothing here may reintroduce it.

   TYPE. Four roles, and the fourth appears exactly once.
     display — Barlow Condensed 600, uppercase: section heads, game names
     data    — JetBrains Mono, tabular: EVERY numeral on the page
     body    — Source Sans 3: hooks and prose, kept quiet
     wordmark— Playfair Display 700: the masthead, ONCE, as the wink
   The faces are declared by peel-eat.css (Playfair / Source Sans 3 / JetBrains)
   and industry-fonts.css (Barlow Condensed). This page loads both for that
   reason alone and does not load site.css at all — that is where --brass lived.

   MOTION. Two moments, and no others. The pencil stroke that draws a tick, and
   the per-card rate counting down when a larger basket improves it. Both are
   switched off entirely under prefers-reduced-motion.
   ═════════════════════════════════════════════════════════════════════ */

:root{
  --felt:      #14251C;              /* page ground: cold turf in shade      */
  --felt-2:    #1B3026;              /* row banding / hover                  */
  --card:      #F7F5EA;              /* the real card cream, from peel-eat   */
  --ink:       #2C2C2C;              /* type on cream                        */
  --rule:      rgba(247,245,234,0.14);
  --rule-firm: rgba(247,245,234,0.30);
  --pencil:    #8FA08F;              /* secondary type                       */
  --coral:     #ED806F;              /* pulled from the printed card artwork */
  --coral-deep:#6D2E27;              /* readable ink on coral and cream      */

  /* A ticked row has to be distinguishable from a hovered one, so it sits one
     step above --felt-2 rather than sharing it. Derived, not a sixth ground. */
  --felt-lit: color-mix(in srgb, var(--card) 7%, var(--felt));

  /* The tick box's own edge. Firmer than --rule-firm on purpose and NOT a third
     rule weight: a rule is structure the reader looks past, and a control is a
     thing the reader has to find. At 30% the fourteen boxes read as smudges at
     1x; this is the weight at which they read as empty boxes waiting for a
     pencil, which is the entire point of the redraw. Used by .pe-tick only. */
  --tick-rule: color-mix(in srgb, var(--card) 45%, transparent);

  /* Namespaced. site.css owns --display/--body/--fig and is still loaded by
     order-success.html and unlock.html; colliding on those names would restyle
     two pages this redesign is not allowed to touch. */
  --pe-display: 'Barlow Condensed', system-ui, sans-serif;
  --pe-mono:    'JetBrains Mono', ui-monospace, SFMono-Regular, monospace;
  --pe-body:    'Source Sans 3', system-ui, sans-serif;
  --pe-word:    'Playfair Display', Georgia, serif;

  --gut: clamp(1rem, 3.4vw, 2.5rem);
  /* Replaced at runtime with the settlement line's measured height, because it
     wraps to two lines on a narrow phone. The fallback is the one-line case. */
  --pe-settle-h: 4.6rem;

  /* ── the two inherited pages ──────────────────────────────────────────
     order-success.html and unlock.html still use site.css's furniture, and
     shop.css loads after it on both. Remapping site.css's own tokens is how
     they pick up the felt/cream/pencil palette without being redesigned —
     and it is what finally removes brass from the shop, since --brass is
     the variable every one of their controls is painted with. play.html
     does not load this file, so the app keeps its own look untouched. */
  --baize:     var(--felt);
  --baize-2:   var(--felt-2);
  --baize-3:   var(--felt-lit);
  --parchment: var(--card);
  --chalk:     var(--pencil);
  --brass:     var(--pencil);
  --brass-lt:  var(--card);
}

*,*::before,*::after{ box-sizing:border-box; }

body{
  margin:0;
  /* The two hero renders are rotated, and a rotated box overhangs its layout
     box. Clipped rather than scrolled, so a 1.4deg tilt cannot put a sideways
     scrollbar on a phone. `clip` (not `hidden`) leaves the fixed settlement
     line alone — it creates no scroll container. */
  overflow-x:clip;
  background:var(--felt);
  color:var(--card);
  font:400 16px/1.55 var(--pe-body);
  -webkit-text-size-adjust:100%;
  /* The settlement line is fixed to the bottom of the viewport, so the page
     owes it exactly its own height or it covers the last row of the card. */
  padding-bottom:calc(var(--pe-settle-h) + 2rem);
}

a{ color:var(--card); text-decoration-color:var(--rule-firm); text-underline-offset:3px; }
a:hover{ text-decoration-color:var(--card); }
:focus{ outline:none; }
:focus-visible{ outline:2px solid var(--card); outline-offset:2px; }
::selection{ background:rgba(247,245,234,0.20); }

.pe-wrap{ max-width:74rem; margin:0 auto; padding:0 var(--gut); }
.pe-hide{ display:none !important; }

/* Shared small caps label. Condensed, because it is a heading voice. */
.pe-eyebrow{
  font-family:var(--pe-display); font-weight:600; font-size:0.68rem;
  letter-spacing:0.24em; text-transform:uppercase; color:var(--pencil);
}

/* ═══ 1 · MASTHEAD — a scorecard header ═══════════════════════════════════
   Wordmark, then the ruled strip of hole numbers. The strip is decoration in
   exactly the sense a real card's header is: it states the shape of a round
   and nothing else, and it establishes the metaphor before the first scroll. */

/* The rhythm here is tighter than it was. The masthead, the hole strip and the
   proposition between them used to consume the whole first screen at 1440×900,
   which put the only thing on the page that can be bought two scrolls down.
   Nothing was removed — the air between the parts was. */
.pe-mast{ padding-top:clamp(0.7rem,2vw,1rem); }

.pe-mast__top{
  display:flex; align-items:flex-end; gap:0.6rem 2rem; flex-wrap:wrap;
  padding-bottom:clamp(0.5rem,1.4vw,0.62rem);
}
.pe-mast__id{ display:flex; flex-direction:column; gap:0.4rem; }

/* THE ONLY PLAYFAIR ON THE PAGE. */
.pe-word{
  margin:0; font-family:var(--pe-word); font-weight:700; line-height:0.95;
  font-size:clamp(2rem,5.4vw,3.15rem); letter-spacing:-0.018em; color:var(--card);
}
.pe-word em{ font-style:normal; color:var(--pencil); }

.pe-mast__spacer{ flex:1 1 2rem; }
.pe-mast__link{
  font-family:var(--pe-display); font-weight:600; font-size:0.76rem;
  letter-spacing:0.18em; text-transform:uppercase; color:var(--card);
  text-decoration:none; padding:0.5rem 0 0.35rem;
  border-bottom:1px solid var(--rule-firm); transition:border-color .18s;
}
.pe-mast__link:hover{ border-bottom-color:var(--card); }

/* the hole strip */
.pe-holes{
  display:flex; align-items:stretch;
  border-top:1px solid var(--rule-firm); border-bottom:1px solid var(--rule-firm);
}
.pe-holes__cap{
  flex:0 0 auto; padding:0.34rem 0.7rem 0.34rem 0;
  font-family:var(--pe-display); font-weight:600; font-size:0.62rem;
  letter-spacing:0.22em; text-transform:uppercase; color:var(--pencil);
  align-self:center;
}
.pe-holes__n{
  flex:1 1 0; min-width:0; text-align:center; padding:0.34rem 0;
  border-left:1px solid var(--rule);
  font-family:var(--pe-mono); font-weight:400; font-size:0.66rem;
  font-variant-numeric:tabular-nums; color:var(--pencil);
}
/* the turn. A real card firms this rule up because OUT lands here. */
.pe-holes__n--turn{ border-left-color:var(--rule-firm); }

/* ═══ 1a · THE BAND — proposition, object, specification ══════════════════
   One band, not three stacked sections. The proposition and the card used to
   be two full-width blocks; measured at 1440×900 they plus the masthead were
   the entire first screen, so the fourteen rows — the only thing on the page
   that can be bought — began roughly two scrolls down, while a settlement bar
   pinned to the bottom said "Tick a game" with nothing tickable in view.

   At wide widths the claim and the specification run down the left and the
   card sits beside them, centred against the pair. The card is still the
   largest object on the page; it is no longer a screenful of one. Below 60rem
   the three parts stack in their reading order — claim, card, specification —
   which is the order they were written in. */

.pe-band{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,0.95fr);
  grid-template-areas:"say  shot"
                      "facts shot";
  align-content:start;
  column-gap:clamp(1.6rem,4vw,3rem);
  row-gap:clamp(0.6rem,1.6vw,0.85rem);
  padding:clamp(0.7rem,1.8vw,1rem) 0 clamp(0.8rem,2vw,1.15rem);
  border-bottom:1px solid var(--rule);
}
.pe-say  { grid-area:say; }
.pe-facts{ grid-area:facts; }

.pe-say__h{
  /* 30ch, not 22: at 22 the desktop rag left "differently." alone on a third
     line. Measured in ch so the break follows the face rather than a pixel
     guess, and phones are narrower than the cap either way. */
  margin:0.4rem 0 0; max-width:30ch;
  font-family:var(--pe-display); font-weight:600;
  font-size:clamp(1.8rem,4.2vw,2.65rem); line-height:1.05;
  letter-spacing:-0.012em; color:var(--card);
}
.pe-say__p{
  margin:0.6rem 0 0; max-width:34rem;
  font-size:1rem; line-height:1.55; color:var(--pencil);
}

/* ═══ 2 · THE OBJECT ══════════════════════════════════════════════════════
   One card render, barely off square. Capped in width rather than left to
   fill its column: at 1.25fr of a 74rem measure it rendered nearly 400px tall
   and was, on its own, the reason nothing buyable cleared the fold. It is
   still the biggest thing here and still the argument. */

.pe-shot{
  grid-area:shot; position:relative; padding:2.5% 0 0 5%;
  align-self:center; justify-self:center;
  width:100%; max-width:26rem;
}
.pe-shot img{ display:block; width:100%; height:auto; background:var(--card); }
/* the rules face, mostly behind — this is a two-sided card and a pack is a
   stack, so one sheet alone would be a smaller claim than the truth */
.pe-shot__peek{
  position:absolute; left:0; top:-1.5%; width:88%;
  transform:rotate(-3.6deg); opacity:0.82; z-index:1;
  box-shadow:0 10px 26px rgba(0,0,0,.42);
}
/* the scoring side, the one that reads as a scorecard at any size */
.pe-shot__main{
  position:relative; z-index:2; transform:rotate(1.4deg);
  box-shadow:0 18px 42px rgba(0,0,0,.5);
}
.pe-shot__cap{
  position:relative; z-index:3; margin:0.9rem 0 0;
  font-family:var(--pe-body); font-size:0.82rem; line-height:1.45; color:var(--pencil);
}

/* Six ruled lines, two to a line. Same rows, same rules, same type — only the
   number of them sharing a line changed, which halves the block's height
   without taking a single fact off the page. */
.pe-spec{
  margin:0; display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  column-gap:clamp(1.2rem,3vw,2.4rem);
}
.pe-spec__row{
  display:flex; align-items:baseline; justify-content:space-between; gap:1rem;
  padding:0.4rem 0; border-bottom:1px solid var(--rule);
}
.pe-spec__row:nth-child(-n+2){ border-top:1px solid var(--rule-firm); }
.pe-spec dt{
  font-family:var(--pe-display); font-weight:600; font-size:0.66rem;
  letter-spacing:0.2em; text-transform:uppercase; color:var(--pencil); white-space:nowrap;
}
.pe-spec dd{
  margin:0; text-align:right;
  font-family:var(--pe-mono); font-weight:400; font-size:0.78rem;
  font-variant-numeric:tabular-nums; color:var(--card);
}
.pe-lede{
  margin:0.7rem 0 0; max-width:40rem;
  font-size:1rem; line-height:1.55; color:var(--pencil);
}
.pe-lede strong{ color:var(--card); font-weight:600; }

/* ═══ 2a · THE OBJECTION ══════════════════════════════════════════════════
   "Why not just use my phone." Set in the body face at cream rather than
   pencil, because it is an argument and not a caption — the only place on
   the page besides the buy control where prose is given full contrast.
   It now sits below the rows: it was ~190px of prose standing between the
   visitor and the first tick, and the objection is raised while choosing. */

.pe-objection{
  padding:clamp(1.7rem,4.5vw,2.6rem) 0 0;
}
.pe-objection p{
  margin:0.65rem 0 0; max-width:44rem;
  font-size:clamp(1.02rem,1.9vw,1.25rem); line-height:1.5; color:var(--card);
}

/* ═══ 3 · THE SCORECARD ═══════════════════════════════════════════════════
   Fourteen ruled rows. This replaces the price tiles, the Pick Four picker and
   the games grid — all three were the same list of games wearing three coats. */

.pe-sheet{ padding-top:clamp(0.9rem,2.2vw,1.15rem); }

/* Head and instruction on one line at wide widths — they are a heading and its
   caption, and stacking them cost a line of the fold for no gain. */
.pe-sheet__head{
  display:flex; align-items:baseline; justify-content:space-between;
  gap:0.3rem 2rem; flex-wrap:wrap; margin-bottom:clamp(0.35rem,1vw,0.5rem);
}
.pe-sheet__head .pe-instruct{ margin:0; flex:1 1 22rem; max-width:34rem; }
.pe-h{
  margin:0; font-family:var(--pe-display); font-weight:600;
  font-size:clamp(1.55rem,3.6vw,2.15rem); line-height:1;
  letter-spacing:-0.01em; text-transform:uppercase; color:var(--card);
}
.pe-instruct{ margin:0.55rem 0 0; color:var(--pencil); font-size:0.95rem; }

/* rounds already going on this device — same ruled language, no tile */
.pe-resume{
  display:flex; align-items:baseline; gap:0.7rem 1.2rem; flex-wrap:wrap;
  padding:0.7rem 0; border-top:1px solid var(--rule); border-bottom:1px solid var(--rule);
  margin-bottom:clamp(1.2rem,3vw,1.8rem);
}
.pe-resume a{
  font-family:var(--pe-display); font-weight:600; font-size:0.76rem;
  letter-spacing:0.14em; text-transform:uppercase; text-decoration:none;
  border-bottom:1px solid var(--rule-firm);
}
.pe-resume a:hover{ border-bottom-color:var(--card); }

/* the rate bands, rendered from /api/catalog — never written down here */
.pe-ladder{
  display:flex; flex-wrap:wrap; gap:0.35rem 1.8rem;
  padding:0.45rem 0; margin-bottom:0.15rem;
  border-top:1px solid var(--rule-firm); border-bottom:1px solid var(--rule);
  font-family:var(--pe-mono); font-size:0.74rem; font-variant-numeric:tabular-nums;
  color:var(--pencil);
}
.pe-ladder__b{ white-space:nowrap; }
.pe-ladder__b b{ font-weight:400; color:var(--pencil); }
/* the band the current basket sits in */
.pe-ladder__b.on{ color:var(--card); }
.pe-ladder__b.on b{ color:var(--card); font-weight:700; }

.pe-rows{
  list-style:none; display:grid; grid-template-columns:minmax(0,1.65fr) minmax(18rem,0.75fr);
  gap:0 clamp(1.6rem,3.5vw,3.2rem); align-items:start; margin:0; padding:0;
}
.pe-row{ grid-column:1; border-bottom:1px solid var(--rule); }
.pe-row:first-child{ border-top:1px solid var(--rule); }
/* …unless the rate bands are above it, which already closed with a rule. Two
   hairlines two pixels apart read as a mistake, not as structure. shop.js
   removes #ladder outright when the catalog is unreachable, so the sibling
   selector fails then and the first row keeps its own rule. */
.pe-ladder + .pe-rows .pe-row:first-child{ border-top:0; }

.pe-row__l{
  --pe-gap:clamp(0.7rem,1.9vw,1.2rem);
  --pe-pad:0.75rem;
  --pe-tickw:24px;
  /* The price column is fixed, not `auto`. Fourteen right-aligned mono figures
     of a fixed width are what turn the old dead space between the hook and the
     right edge into a scannable column — the eye gets one vertical line of
     numerals plus one vertical line of tick boxes, and the ragged right edge of
     the hooks stops being the last thing on the row. */
  --pe-pricew:4.4rem;
  position:relative; display:grid; align-items:center;
  grid-template-columns:2.8ch 5px minmax(0,1fr) var(--pe-pricew) var(--pe-tickw);
  gap:0 var(--pe-gap);
  padding:0.72rem var(--pe-pad); margin:0 calc(var(--pe-pad) * -1);
  cursor:pointer;
  background:color-mix(in srgb,var(--pe-acc,var(--pencil)) 5%,var(--felt));
  transition:background-color .16s ease;
}
/* The column rule that opens the right-hand block. One per row, and because
   every row is the same height it stacks into one continuous vertical line down
   the sheet — which is what a scorecard does around its OUT / IN / TOT columns.
   Everything right of it is price and tick, which is the buying half of the row. */
.pe-row__l::after{
  content:""; position:absolute; top:0; bottom:0; width:1px;
  right:calc(var(--pe-pad) + var(--pe-tickw) + var(--pe-gap)
             + var(--pe-pricew) + var(--pe-gap) / 2);
  background:var(--rule); pointer-events:none;
}
.pe-row__l:hover{
  background:color-mix(in srgb,var(--pe-acc,var(--pencil)) 10%,var(--felt));
}
.pe-row__l:has(.pe-cb:checked){
  background:color-mix(in srgb,var(--pe-acc,var(--pencil)) 14%,var(--felt));
}
/* The checkbox is visually replaced, never removed: it is still in the
   accessibility tree, still focusable, still keyboard-operable. The row lifts
   so the reader can find their place in fifteen of them; the ring itself is
   drawn on the tick box, because the box is the control. */
.pe-row__l:has(.pe-cb:focus-visible){
  background:color-mix(in srgb,var(--pe-acc,var(--pencil)) 10%,var(--felt));
}
.pe-cb{
  position:absolute; width:1px; height:1px; margin:0; padding:0;
  opacity:0; pointer-events:none;
}

.pe-row__i{
  font-family:var(--pe-mono); font-weight:700; font-size:0.78rem;
  font-variant-numeric:tabular-nums; color:var(--pencil); letter-spacing:0.02em;
}
.pe-row__l:has(.pe-cb:checked) .pe-row__i{ color:var(--card); }

/* The game's own colour: full-strength in the rule and tick, diluted in the
   row ground above so the palette is visible without ever carrying type. */
.pe-row__bar{ align-self:stretch; background:var(--pe-acc,var(--pencil)); opacity:0.72;
              transition:opacity .16s ease; }
.pe-row__l:hover .pe-row__bar{ opacity:0.75; }
.pe-row__l:has(.pe-cb:checked) .pe-row__bar{ opacity:1; }

.pe-row__body{
  display:grid; grid-template-columns:minmax(7rem,15ch) minmax(0,1fr);
  align-items:baseline; gap:0 clamp(0.7rem,2vw,1.3rem); min-width:0;
}
.pe-row__n{
  font-family:var(--pe-display); font-weight:600; font-size:1.12rem; line-height:1.1;
  letter-spacing:-0.005em; text-transform:uppercase; color:var(--card);
}
.pe-row__h{
  font-size:0.86rem; line-height:1.35; color:var(--pencil); min-width:0;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.pe-row__l:has(.pe-cb:checked) .pe-row__h{ color:color-mix(in srgb, var(--card) 55%, var(--pencil)); }

/* The price of one pack, on every row, at the rate the CURRENT basket earns.
   shop.js repaints all fourteen on every tick, so the discount is visible where
   the decision is made rather than only in the settlement line.

   THERE IS NO `is-free` STATE, AND THERE MUST NOT BE ONE AGAIN. Earlier passes
   painted FREE into every unticked row while `freeExtras > 0`. Each label was
   individually true — at three games, adding any one of the eleven costs
   nothing — but eleven of them read as a claim that eleven games are free when
   exactly one is. The free extra is stated once, exactly, and with its real
   count, in the settlement bar. One true sentence beats eleven that add up to
   a false impression. */
.pe-row__p{
  font-family:var(--pe-mono); font-weight:400; font-size:0.86rem;
  font-variant-numeric:tabular-nums; color:var(--card); white-space:nowrap;
  text-align:right;
}

/* The tick.
   A box, deliberately. The no-four-borders rule is about CONTAINERS — things
   that enclose content we could have ruled instead. A checkbox is a form
   control, and a control that does not look like one cannot be found: the
   previous version was a single hairline at the right margin, and a first-time
   visitor could not tell the page was interactive at all. So it is drawn as
   what it is, in the scorecard's own hand: an empty ruled box you put a pencil
   mark in, filled with the game's own colour once you do. */
.pe-tick{
  width:var(--pe-tickw); height:var(--pe-tickw);
  display:grid; place-items:center; justify-self:end;
  border:1px solid var(--tick-rule); background:transparent;
  transition:border-color .16s ease, background-color .16s ease;
}
.pe-row__l:hover .pe-tick{ border-color:var(--card); }
.pe-row__l:has(.pe-cb:focus-visible) .pe-tick{
  outline:2px solid var(--card); outline-offset:2px;
}
/* Ticked: the accent fills the box. This is the second and last place a game's
   colour appears, and it still carries no type — the check is not type, and its
   stroke colour is chosen per accent by shop.js so all fourteen stay legible. */
.pe-row__l:has(.pe-cb:checked) .pe-tick{
  background:var(--pe-acc,var(--pencil)); border-color:var(--pe-acc,var(--pencil));
}
.pe-tick svg{ display:block; width:15px; height:15px; overflow:visible; }
.pe-tick path{
  fill:none; stroke:var(--pe-mark,var(--card)); stroke-width:2.2;
  stroke-linecap:round; stroke-linejoin:round;
  stroke-dasharray:21; stroke-dashoffset:21;
}
/* the entire motion budget, part one: a pencil stroke, 180ms */
.pe-row__l:has(.pe-cb:checked) .pe-tick path{
  stroke-dashoffset:0; transition:stroke-dashoffset .18s ease-out;
}

/* the booklet — one ruled row in the same language, not a tile */
.pe-row--book{ border-top:1px solid var(--rule-firm); }
.pe-row--book .pe-row__bar{ opacity:0.35; }

/* The rule book, sold on Amazon. Same ruled row, one column different.
   It is an <a>, not a <label>, so none of the :has(.pe-cb) states can fire and
   it cannot enter the basket — the row is quieter than a game row by
   construction rather than by being styled down. The price column carries
   "Amazon" and the tick column an outbound arrow, so the two things a reader has
   to know before clicking (this is not ours, this leaves the site) are in the
   two columns their eye is already tracking down the sheet. No brass button, no
   tile: it is a row, like everything else in this chooser. */
.pe-row--out .pe-row__l{ text-decoration:none; }
.pe-row--out .pe-row__bar{ opacity:0.35; }
.pe-row--out .pe-row__p{ font-size:0.8rem; letter-spacing:0.04em; color:var(--pencil); }
.pe-row--out .pe-row__l:hover .pe-row__p{ color:var(--card); }
.pe-row--out .pe-row__l:focus-visible{ outline:2px solid var(--card); outline-offset:-2px; }
.pe-row__out{
  font-family:var(--pe-mono); font-size:0.9rem; line-height:1;
  color:var(--pencil); justify-self:end; transition:color .16s ease;
}
.pe-row--out .pe-row__l:hover .pe-row__out{ color:var(--card); }

/* One physical proof follows the last game touched. It earns the second
   column: this is the object being bought, not decorative furniture. */
.pe-card-preview{
  grid-column:2; grid-row:1 / span 99; position:sticky; top:1.25rem;
  align-self:start; min-width:0; padding:1rem 0 0; border-top:1px solid var(--rule-firm);
}
.pe-card-preview__head{ display:flex; align-items:baseline; justify-content:space-between; gap:1rem; }
.pe-card-preview__head strong{
  font:600 1.35rem/1 var(--pe-display); color:var(--card); text-transform:uppercase;
}
.pe-card-preview__sides{
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); margin:0.85rem 0 1rem;
  border-top:1px solid var(--rule); border-bottom:1px solid var(--rule);
}
.pe-card-preview__sides button{
  min-height:44px; padding:0.62rem 0.5rem; border:0; background:transparent;
  color:var(--pencil); cursor:pointer; font:600 0.72rem/1 var(--pe-display);
  letter-spacing:0.1em; text-transform:uppercase;
}
.pe-card-preview__sides button + button{ border-left:1px solid var(--rule); }
.pe-card-preview__sides button[aria-pressed="true"]{ background:var(--card); color:var(--ink); }
.pe-card-preview__sides button:focus-visible{ outline:2px solid var(--card); outline-offset:2px; position:relative; z-index:1; }
.pe-card-preview__art{ display:block; color:var(--card); text-decoration:none; }
.pe-card-preview__art img{
  display:block; width:calc(100% - 0.4rem); height:auto; margin-left:0.2rem;
  background:var(--card); box-shadow:0 1.2rem 2.5rem rgba(0,0,0,0.26); transform:rotate(0.7deg);
}
.pe-card-preview__art span{
  display:inline-block; margin-top:0.85rem; border-bottom:1px solid var(--rule-firm);
  font:600 0.72rem/1.4 var(--pe-display); letter-spacing:0.1em; text-transform:uppercase;
}
.pe-card-preview__art:hover span{ border-bottom-color:var(--card); }
.pe-card-preview__art:focus-visible{ outline:2px solid var(--card); outline-offset:4px; }
.pe-card-preview > p{ margin:0.65rem 0 0; color:var(--pencil); font-size:0.86rem; line-height:1.45; }

/* ═══ 3a · WILL IT TURN UP ════════════════════════════════════════════════
   Three ruled lines in the same language as the spec rows and the game rows,
   so the answer to "is this real" is set as a matter of record rather than as
   a reassurance panel. The lead-in is the heading; nothing here is bigger
   than a section head. */

.pe-assure{ padding-top:clamp(2rem,5vw,3rem); }
.pe-assure p{
  margin:0; padding:0.75rem 0;
  border-bottom:1px solid var(--rule);
  font-size:0.94rem; line-height:1.55; color:var(--pencil); max-width:52rem;
}
.pe-assure p:first-child{ border-top:1px solid var(--rule-firm); }
.pe-assure b{ font-weight:600; color:var(--card); }

/* ═══ 4 · THE SETTLEMENT LINE ═════════════════════════════════════════════
   Pinned to the bottom, live, and set entirely in mono. It is called the
   settlement line because settling up is what the product is for. */

.pe-settle{
  position:fixed; left:0; right:0; bottom:0; z-index:40;
  /* Its own ground, one step off the page, so it reads as a persistent bar
     rather than as the last line of the document. */
  background:var(--felt-2); border-top:2px solid var(--rule-firm);
}
.pe-settle__in{
  max-width:74rem; margin:0 auto; padding:1rem var(--gut);
  min-height:5.4rem;
  display:flex; align-items:center; gap:0.7rem 1.6rem; flex-wrap:wrap;
}
.pe-read{
  flex:1 1 20rem; min-width:0;
  font-family:var(--pe-mono); font-size:0.94rem; line-height:1.45;
  font-variant-numeric:tabular-nums; color:var(--card);
}
.pe-read__sep{ color:var(--pencil); padding:0 0.55em; }
/* The free-extra nudge. Cream, not pencil: it is the single most persuasive
   true sentence on the page and it was set in the quietest colour available. */
.pe-read__note{
  display:block; margin-top:0.32rem; padding-left:0.6rem;
  border-left:2px solid var(--card);
  font-size:0.84rem; color:var(--card);   /* still mono — the line is all mono */
}
/* THE one filled, high-contrast element on the page. The whole contrast budget
   is spent here and nowhere else: cream ground, ink type, ~11:1. */
.pe-buy{
  flex:0 0 auto; min-height:52px; padding:0.9rem 1.7rem;
  border:1px solid var(--card); border-radius:0; cursor:pointer;
  background:var(--card); color:var(--ink);
  font-family:var(--pe-mono); font-weight:700; font-size:0.92rem; letter-spacing:0.01em;
  font-variant-numeric:tabular-nums;
  transition:background .16s ease, color .16s ease, border-color .16s ease;
}
.pe-buy:hover:not(:disabled){ background:#fff; }
/* Empty basket, and shop closed, share this state. The control stays VISIBLE
   and legible so a first-time visitor can see that buying is a thing this page
   does — it just is not armed yet. Outlined rather than filled, because the
   filled treatment is reserved for the live action. */
.pe-buy:disabled{
  background:transparent; color:var(--pencil);
  border-color:var(--pencil); cursor:default;
}

/* ═══ 5 · FOOTER ══════════════════════════════════════════════════════════ */

/* Two tracks, sized. The third — "Unlock code" — is gone: DIGITAL_LIVE ships
   "0", no code has ever been minted and none can be, so the column invited a
   reader to enter something that does not exist. /unlock.html and /api/unlock
   remain live and reachable by direct link. `auto-fit` would have left the two
   survivors at 1fr each and the fourteen-name print list wrapping into a
   narrow column with a hole beside it, so the tracks are stated: the prose
   gets its measure, the list gets the rest. */
.pe-foot{
  margin-top:clamp(2.4rem,6vw,4rem);
  padding:clamp(1.5rem,4vw,2.2rem) 0 0.5rem;
  border-top:1px solid var(--rule-firm);
  display:grid; gap:1.6rem 3rem;
  grid-template-columns:minmax(0,26rem) minmax(0,1fr);
}
.pe-foot p{ margin:0.5rem 0 0; font-size:0.88rem; color:var(--pencil); max-width:26rem; }
.pe-foot a{ color:var(--card); }
.pe-prints{
  display:flex; flex-wrap:wrap; gap:0.3rem 0.9rem; margin:0.6rem 0 0;
  padding:0; list-style:none;
}
.pe-prints a{
  font-family:var(--pe-mono); font-size:0.72rem; color:var(--pencil);
  text-decoration:none; border-bottom:1px solid var(--rule);
}
.pe-prints a:hover{ color:var(--card); border-bottom-color:var(--card); }
/* ── the all-fourteen offer ────────────────────────────────────────────────
   Sits under the print list, in the second footer track, because that is the
   block it belongs to: the reader who has just seen fourteen links is the
   reader who would rather have them mailed. In the SECOND track and not a
   third of its own — the two-track grid above is stated deliberately, and a
   third block would land in row two of the prose column with a hole beside it,
   which is the exact failure that comment warns about.

   The ruled language, unchanged: no box, no radius, no shadow, one hairline
   under the field. A form is the one place a border on four sides would be
   conventional, and it is still not allowed here — the field is a line to
   write on, which is what every other input on a scorecard is. */
.pe-mail{ margin:1.3rem 0 0; max-width:26rem; }
.pe-mail__l{ display:block; margin:0 0 0.55rem; font-size:0.88rem; color:var(--pencil); }
.pe-mail__l b{ color:var(--card); font-weight:600; }
.pe-mail__bar{ display:flex; flex-wrap:wrap; gap:0.5rem 0.8rem; align-items:flex-end; }
.pe-mail__in{
  flex:1 1 11rem; min-width:0; min-height:42px; padding:0.45rem 0 0.35rem;
  border:0; border-bottom:1px solid var(--rule-firm); border-radius:0;
  background:transparent; color:var(--card);
  font:400 0.9rem/1.2 var(--pe-mono);
}
.pe-mail__in::placeholder{ color:color-mix(in srgb,var(--pencil) 68%,transparent); }
.pe-mail__in:focus{ outline:0; border-bottom-color:var(--card); }
.pe-mail__go{
  flex:0 0 auto; min-height:42px; padding:0.5rem 0.95rem;
  border:1px solid var(--card); border-radius:0;
  background:transparent; color:var(--card);
  font:600 0.7rem/1.1 var(--pe-display); letter-spacing:0.12em;
  text-transform:uppercase; cursor:pointer;
}
.pe-mail__go:hover:not(:disabled){ background:var(--card); color:var(--felt); }
.pe-mail__go:disabled{ border-color:var(--rule-firm); color:var(--pencil); cursor:default; }
/* Both of these need `.pe-foot` in front of them for the same specificity
   reason the colophon does, immediately below. */
.pe-foot .pe-mail__note{
  margin:0.65rem 0 0; max-width:none;
  font-family:var(--pe-mono); font-size:0.68rem; color:var(--pencil);
}
/* Reserves its line, so the footer does not jump when the reply arrives. */
.pe-foot .pe-mail__msg{
  margin:0.35rem 0 0; max-width:none; min-height:1.15em;
  font-family:var(--pe-mono); font-size:0.72rem; color:var(--card);
}

/* `.pe-foot p` is a class-plus-element selector and outranks a bare class, so
   the colophon needs the same weight or it inherits the 26rem prose measure
   and its rule stops halfway across the page — which reads as a column that
   fell out rather than a footer that was set. */
.pe-foot .pe-colophon{
  grid-column:1/-1; max-width:none; margin-top:0.6rem; padding-top:0.9rem;
  border-top:1px solid var(--rule);
  font-family:var(--pe-mono); font-size:0.7rem; color:var(--pencil);
}

/* ── the policies, and the one address ────────────────────────────────────
   Spanning both tracks for the reason .pe-foot's own comment gives: a third
   block in a two-track grid lands in row two of the prose column with a hole
   beside it. One ruled mono row, at the colophon's weight, because these are
   the same kind of statement the colophon is — a matter of record. The contact
   item is pushed to the far end on a wide screen and simply wraps on a narrow
   one; it is not a second block. */
.pe-legal{
  grid-column:1/-1; display:flex; flex-wrap:wrap; align-items:baseline;
  gap:0.4rem 1.5rem; margin:0.9rem 0 0; padding-top:0.9rem;
  border-top:1px solid var(--rule); list-style:none;
  font-family:var(--pe-mono); font-size:0.72rem; color:var(--pencil);
}
.pe-legal a{ color:var(--card); text-decoration-color:var(--rule-firm); }
.pe-legal a:hover{ text-decoration-color:var(--card); }
.pe-legal__contact{ margin-left:auto; }

/* ── <picture> is a wrapper, not a box ────────────────────────────────────
   Every card render on this page is either absolutely positioned inside a
   stage or a block with its own measure, and both were written as rules on the
   `img`. An inline <picture> around one of those introduces a line box — and
   around a block-level img, an anonymous block — that neither layout expects,
   which is a stray 25px of height under the hero. A zero-height block wrapper
   leaves every rule below pointed at the img exactly as written. */
.pe-product-stage picture,
.pe-how figure picture,
.pe-try__preview picture,
.pe-card-preview__art picture{ display:block; }

/* ═══ 6 · FAILURE, STATED ═════════════════════════════════════════════════
   A buy control that silently does nothing is worse than one that says why.
   .buyerr and .shopnotice are produced by shop.js and are shared with
   order-success.html and unlock.html, so the class names are fixed. */

.buyerr{
  flex-basis:100%; margin:0;
  font-family:var(--pe-mono); font-size:0.76rem; color:var(--card);
  border-left:2px solid var(--pencil); padding-left:0.7rem;
}
.shopnotice{
  margin:0; padding:0.7rem var(--gut);
  background:var(--felt-2); border-bottom:1px solid var(--rule-firm);
  font-family:var(--pe-mono); font-size:0.78rem; color:var(--card);
}

/* ═══ 7 · the two inherited pages ═════════════════════════════════════════
   Not redesigned. Repainted only, by the token remap in :root, plus these
   three components which live in this file rather than site.css. */

.codebox{
  display:inline-block; padding:0.9rem 1.4rem;
  border:0; border-bottom:2px solid var(--card); background:var(--felt-2);
  font-family:var(--pe-mono); font-weight:700; font-size:1.4rem;
  letter-spacing:0.12em; color:var(--card);
}
.codein{
  width:auto; min-width:14rem; max-width:100%; border-radius:0;
  font-family:var(--pe-mono); font-size:1.05rem; letter-spacing:0.1em;
  text-transform:uppercase;
}
.msg{ min-height:1.5rem; margin-top:1rem; color:var(--pencil); }
.locked{ opacity:0.5; }

/* ═══ 8 · NARROW ══════════════════════════════════════════════════════════
   Down to 360px the rows stay ruled and legible, the settlement line stays
   reachable, and nothing scrolls sideways. */

@media (max-width:60rem){
  /* Claim, card, specification — the order they were written in. */
  .pe-band{ grid-template-columns:1fr; grid-template-areas:"say" "shot" "facts"; }
  /* min(), not a bare max-width: a fixed max-width wider than a phone is still
     a width, and it pushed the document out to 544px and took every row and
     the hole strip off the right edge with it. */
  .pe-shot{ max-width:min(26rem,100%); justify-self:start; }
}

@media (max-width:44rem){
  /* One ruled row per fact on a phone. Two to a line was tried and measured at
     390: it saved about fifty pixels of the run to the first tick and broke
     three of the six values ("United States, on demand", "10 identical cards",
     "free, USPS Ground") onto a second line in a mono face, right-aligned,
     which looks like a mistake. The label/value pair fits its full measure
     here with room over, and the run is still one scroll. */
  .pe-spec{ grid-template-columns:minmax(0,1fr); }
  /* Row 2 is no longer the top of a second column, so it must not carry the
     firm rule that row 1 already closes above it. */
  .pe-spec__row:nth-child(2){ border-top:0; }
  /* The card carries the argument, not the fold. At full bleed it was 235px of
     a 704px readable viewport on its own, and the run to the first tick was
     three screens. Roughly two-thirds of the measure still reads as the hero
     object; a phone-width render only bought height. */
  .pe-shot{ max-width:min(20rem,100%); }
  .pe-shot__cap{ margin-top:0.6rem; }
  /* THE TICK MOVES TO THE FRONT.
     On a phone the right margin is where nothing is looked at and no thumb
     reaches. Scanning starts at the left edge and so does the hand, so the box
     sits immediately after the index and the price closes the row. The DOM
     order is unchanged — this is `order` on five grid items, so the checkbox
     keeps its position in the accessibility tree and in the tab sequence. */
  .pe-row__l{ --pe-pad:0.6rem; --pe-gap:0.7rem; --pe-tickw:26px; --pe-pricew:3.6rem;
              grid-template-columns:2.4ch var(--pe-tickw) 3px minmax(0,1fr) var(--pe-pricew);
              padding:0.72rem var(--pe-pad); margin:0 calc(var(--pe-pad) * -1); }
  .pe-row__i{ order:1 }
  /* The outbound arrow takes the tick's slot on a phone for the same reason the
     tick does: the left edge is where the eye starts and the thumb reaches. */
  .pe-tick,.pe-row__out{ order:2 }
  .pe-row__bar{ order:3 }
  .pe-row__body{ order:4 }
  .pe-row__p{ order:5 }
  /* the right-hand block is gone; the tick anchors the left edge instead */
  .pe-row__l::after{ display:none; }
  .pe-row__body{ grid-template-columns:1fr; gap:0.12rem 0; }
  .pe-row__n{ font-size:1.05rem; }
  /* On its own line the hook has room for two, and one truncated line of sales
     copy is worse than none. Still clamped, so the row rhythm holds. */
  .pe-row__h{ font-size:0.8rem; white-space:normal;
              display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; }
  .pe-holes__cap{ display:none; }
  /* The eyebrow is the widest thing in the identity block, and with a 2rem
     minimum spacer it pushed "Keep score free" onto a line of its own — forty
     pixels of the run to the first tick spent on white space. The spacer only
     exists to hold the two apart at desktop. */
  .pe-mast__spacer{ display:none; }
  .pe-mast__top{ gap:0.3rem 0.9rem; justify-content:space-between; }
  .pe-mast__link{ padding:0.3rem 0 0.2rem; }
  .pe-holes__n{ font-size:0.56rem; padding:0.4rem 0; }
  .pe-settle__in{ padding:0.8rem var(--gut) 0.9rem; gap:0.6rem 1rem; min-height:0; }
  .pe-read{ flex:1 1 100%; font-size:0.86rem; }
  /* full-width, thumb-height, and the last thing above the home bar */
  .pe-buy{ flex:1 1 100%; min-height:54px; font-size:0.95rem; }
  /* the readout has to fit one narrow line — the card count is the segment
     the reader can recompute from the game count, so it is the one that goes */
  .pe-read__drop{ display:none; }
  /* One track. The stated two-track grid above would otherwise give the whole
     measure to the prose column and leave the print list nothing. */
  .pe-foot{ grid-template-columns:minmax(0,1fr); }
}

@media (max-width:23.5rem){
  .pe-holes__n{ font-size:0.5rem; }
  /* The index is what goes, not the price. An earlier version dropped the price
     column here; a row with no price on it is the defect this pass exists to
     fix, and 360px is a real phone. */
  .pe-row__l{ --pe-gap:0.55rem; --pe-pricew:3.3rem;
              grid-template-columns:var(--pe-tickw) 3px minmax(0,1fr) var(--pe-pricew); }
  .pe-row__i{ display:none; }
  .pe-row__p{ font-size:0.8rem; }
}

/* ═══ 9 · REDUCED MOTION ══════════════════════════════════════════════════
   Both moments are switched off, not shortened. shop.js reads the same query
   and sets the rate straight to its new value rather than tweening it. */

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ transition:none !important; animation:none !important; }
  .pe-row__l:has(.pe-cb:checked) .pe-tick path{ transition:none; }
}

/* ═══ CONVERSION STOREFRONT — AUGUST 2026 ════════════════════════════════
   This layer keeps the scorecard visual system and makes the offer legible
   before the catalogue. All prices still come from /api/catalog; the HTML
   contains no operational price used by checkout. */

.pe-mast__id{ color:inherit; text-decoration:none; }
.pe-nav{ display:flex; align-items:center; gap:clamp(0.9rem,2.2vw,1.8rem); }
.pe-nav a{
  color:var(--pencil); text-decoration:none; font-family:var(--pe-display);
  font-size:0.72rem; font-weight:600; letter-spacing:0.14em; text-transform:uppercase;
}
.pe-nav a:hover{ color:var(--card); }

.pe-hero{
  display:grid; grid-template-columns:minmax(0,0.92fr) minmax(24rem,1.08fr);
  gap:clamp(2rem,5vw,5rem); align-items:center;
  min-height:min(47rem,calc(100svh - 6rem));
  padding:clamp(2.5rem,7vw,6.5rem) 0 clamp(3rem,7vw,5.5rem);
  border-bottom:1px solid var(--rule-firm);
}
.pe-kicker{
  display:inline-flex; width:max-content; max-width:100%; padding:0.42rem 0.65rem;
  border-left:3px solid var(--coral); background:var(--felt-2);
  color:var(--card); font-family:var(--pe-display); font-size:0.72rem;
  font-weight:600; letter-spacing:0.14em; line-height:1.25; text-transform:uppercase;
}
.pe-hero h1{
  margin:clamp(1.1rem,2.4vw,1.7rem) 0 0; max-width:13ch;
  font-family:var(--pe-display); font-size:clamp(3.25rem,7.2vw,6.6rem);
  font-weight:600; letter-spacing:-0.035em; line-height:0.87; text-transform:uppercase;
}
.pe-hero__lede{
  margin:1.5rem 0 0; max-width:36rem; color:var(--card);
  font-size:clamp(1.06rem,1.8vw,1.28rem); line-height:1.5;
}
.pe-hero__actions{ display:flex; flex-wrap:wrap; gap:0.75rem; margin-top:1.7rem; }
.pe-cta{
  display:inline-flex; justify-content:center; align-items:center; min-height:52px;
  padding:0.76rem 1rem; border:1px solid var(--card); border-radius:0;
  font:600 0.78rem/1.1 var(--pe-display); letter-spacing:0.1em;
  text-decoration:none; text-transform:uppercase; cursor:pointer;
}
.pe-cta--primary{ border-color:var(--coral); background:var(--coral); color:var(--felt); }
.pe-cta--primary:hover{ border-color:var(--card); background:var(--card); }
.pe-cta--primary span{ margin-left:0.45em; }
.pe-cta--secondary{ background:transparent; color:var(--card); }
.pe-cta--secondary:hover{ background:var(--felt-2); }
.pe-hero__deal{
  width:max-content; max-width:100%; margin:0.65rem 0 0; padding:0.42rem 0.62rem;
  border:1px solid color-mix(in srgb,var(--coral) 72%,transparent);
  color:var(--card); font:600 0.72rem/1.25 var(--pe-display);
  letter-spacing:0.1em; text-transform:uppercase;
}
.pe-hero__deal:empty{ display:none; }
.pe-trust{
  display:flex; flex-wrap:wrap; gap:0.45rem 1.35rem; list-style:none;
  margin:1.15rem 0 0; padding:0; color:var(--pencil); font:400 0.78rem/1.4 var(--pe-mono);
}
.pe-trust li::before{ content:"✓"; margin-right:0.38rem; color:var(--coral); }
.pe-hero__micro{ margin:0.65rem 0 0; max-width:34rem; color:var(--pencil); font-size:0.78rem; }

.pe-hero__product{ position:relative; align-self:center; padding:1rem 1.2rem 2.5rem 0; }
.pe-product-stage{ position:relative; aspect-ratio:1.32; }
.pe-product-stage img{
  position:absolute; display:block; width:83%; height:auto; background:var(--card);
  box-shadow:0 1.6rem 3.5rem rgba(0,0,0,0.3);
}
.pe-product-stage__back{ top:4%; right:0; transform:rotate(4deg); opacity:0.88; }
.pe-product-stage__front{ bottom:0; left:0; transform:rotate(-3deg); z-index:1; }
.pe-offer-stamp{
  position:absolute; right:0; bottom:0; z-index:2; width:9.2rem; aspect-ratio:1;
  display:flex; flex-direction:column; justify-content:center; align-items:center;
  padding:1rem; background:var(--card); color:var(--felt); text-align:center;
  transform:rotate(2deg);
}
.pe-offer-stamp strong{ font:700 2.4rem/1 var(--pe-mono); letter-spacing:-0.08em; }
.pe-offer-stamp span{ margin-top:0.35rem; font:600 0.72rem/1.15 var(--pe-display); letter-spacing:0.08em; text-transform:uppercase; }
.pe-offer-stamp small{ margin-top:0.25rem; font:400 0.68rem/1.2 var(--pe-body); }
.pe-art-note{ margin:1rem 0 0; max-width:30rem; color:var(--pencil); font-size:0.72rem; }

.pe-proofbar{
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
  margin-inline:calc(var(--gut) * -1); padding-inline:var(--gut);
  border-bottom:0; background:var(--coral); color:var(--felt);
}
.pe-proofbar div{ padding:1.35rem clamp(1rem,2.5vw,2rem); border-left:1px solid color-mix(in srgb,var(--felt) 22%,transparent); }
.pe-proofbar div:first-child{ padding-left:0; border-left:0; }
.pe-proofbar strong{ display:block; font:600 0.88rem/1.2 var(--pe-display); letter-spacing:0.08em; text-transform:uppercase; }
.pe-proofbar span{ display:block; margin-top:0.35rem; color:color-mix(in srgb,var(--felt) 88%,transparent); font-size:0.86rem; line-height:1.4; }

.pe-section-intro{ max-width:48rem; }
.pe-section-intro h2,.pe-how h2,.pe-try h2,.pe-why h2{
  margin:0.65rem 0 0; font-family:var(--pe-display); font-size:clamp(2.2rem,5vw,4.3rem);
  font-weight:600; letter-spacing:-0.025em; line-height:0.95; text-transform:uppercase;
}
.pe-section-intro p{ margin:1rem 0 0; max-width:42rem; color:var(--pencil); font-size:1.05rem; }

.pe-offers{
  margin-inline:calc(var(--gut) * -1); padding:clamp(4rem,8vw,7rem) var(--gut);
  border-bottom:0; background:var(--card); color:var(--ink);
}
.pe-offers .pe-eyebrow{ color:var(--coral-deep); }
.pe-offers .pe-section-intro p{ color:color-mix(in srgb,var(--ink) 72%,transparent); }
.pe-offer-grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1px; margin-top:2.2rem; background:color-mix(in srgb,var(--ink) 22%,transparent); }
.pe-offer-card{ position:relative; display:flex; flex-direction:column; min-height:22rem; padding:1.6rem; background:var(--card); }
.pe-offer-card--featured{ background:var(--coral); color:var(--felt); transform:translateY(-0.5rem); }
.pe-offer-card__flag{
  position:absolute; top:0; right:0; padding:0.42rem 0.65rem; background:var(--felt); color:var(--card);
  font:600 0.64rem/1 var(--pe-display); letter-spacing:0.12em; text-transform:uppercase;
}
.pe-offer-card__label{ color:color-mix(in srgb,var(--ink) 62%,transparent); font:600 0.68rem/1.2 var(--pe-display); letter-spacing:0.16em; text-transform:uppercase; }
.pe-offer-card--featured .pe-offer-card__label{ color:var(--felt); }
.pe-offer-card h3{ margin:0.75rem 0 0; font:600 clamp(1.75rem,3vw,2.5rem)/1 var(--pe-display); text-transform:uppercase; }
.pe-offer-card__price{ margin:0.8rem 0 0; font:700 clamp(2rem,4vw,3.4rem)/1 var(--pe-mono); letter-spacing:-0.08em; }
.pe-offer-card > p:not(.pe-offer-card__price){ margin:1rem 0 1.5rem; color:color-mix(in srgb,var(--ink) 72%,transparent); }
.pe-offer-card--featured > p:not(.pe-offer-card__price){ color:color-mix(in srgb,var(--felt) 88%,transparent); }
.pe-offer-card__action{
  min-height:48px; margin-top:auto; padding:0.7rem 0.9rem; border:1px solid var(--ink);
  border-radius:0; background:transparent; color:var(--ink); cursor:pointer;
  font:600 0.75rem/1 var(--pe-display); letter-spacing:0.1em; text-transform:uppercase;
}
.pe-offer-card__action:hover{ background:color-mix(in srgb,var(--ink) 8%,transparent); }
.pe-offer-card--featured .pe-offer-card__action{ border-color:var(--felt); color:var(--felt); }
.pe-offer-card--featured .pe-offer-card__action--filled{ background:var(--felt); color:var(--card); }
.pe-offer-card--featured .pe-offer-card__action--filled:hover{ background:var(--felt-2); }
.pe-offers__note{ margin:1.3rem 0 0; color:color-mix(in srgb,var(--ink) 62%,transparent); font-size:0.76rem; }

.pe-how{ padding:clamp(4rem,8vw,7rem) 0; border-bottom:1px solid var(--rule-firm); }
.pe-how .pe-eyebrow{ color:var(--coral); }
.pe-how__grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(1.6rem,3vw,3rem); margin-top:2.5rem; }
.pe-how figure{ position:relative; margin:0; padding-top:2.2rem; }
.pe-how__tag{
  position:absolute; top:0; left:0; display:flex; align-items:baseline; gap:0.65rem;
  color:var(--coral); font:600 0.72rem/1 var(--pe-display);
  letter-spacing:0.16em; text-transform:uppercase;
}
.pe-how__tag b{ color:var(--card); font:700 0.8rem/1 var(--pe-mono); letter-spacing:0; }
.pe-how figure img{
  display:block; width:calc(100% - 1rem); height:auto; background:var(--card);
  box-shadow:0 1.4rem 3rem rgba(0,0,0,0.24); transform-origin:center;
}
.pe-how figure:first-child img{ margin-left:0.2rem; transform:rotate(-1deg); }
.pe-how figure:nth-child(2) img{ margin-left:0.8rem; transform:rotate(1deg); }
.pe-how figcaption{ margin-top:1rem; color:var(--pencil); font-size:0.9rem; }
.pe-how figcaption b{ color:var(--card); }
.pe-how__finish{
  grid-column:1/-1; display:grid; grid-template-columns:minmax(7rem,0.28fr) minmax(15rem,0.9fr) minmax(18rem,1fr);
  gap:clamp(1.4rem,4vw,4rem); align-items:center; margin-top:0.5rem;
  padding:clamp(1.6rem,3.5vw,2.8rem); background:var(--coral); color:var(--felt);
}
.pe-how__number{ color:var(--felt); font:700 clamp(4rem,8vw,7rem)/0.8 var(--pe-mono); letter-spacing:-0.1em; }
.pe-how__finish h3{ margin:0; font:600 clamp(2rem,3.8vw,3.3rem)/0.92 var(--pe-display); text-transform:uppercase; }
.pe-how__finish p{ margin:0; color:color-mix(in srgb,var(--felt) 88%,transparent); font-size:1.02rem; }

.pe-sheet{ padding:clamp(4rem,8vw,7rem) 0 0; }
.pe-sheet__head{ align-items:flex-end; }
.pe-sheet__head .pe-h{ margin:0.55rem 0 0; max-width:13ch; font-size:clamp(2.2rem,5vw,4rem); line-height:0.95; }

.pe-why{
  display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,0.95fr); gap:clamp(2rem,6vw,6rem);
  align-items:end; margin:clamp(4rem,8vw,7rem) calc(var(--gut) * -1) 0;
  padding:clamp(3rem,6vw,5rem) var(--gut); background:var(--coral); color:var(--felt);
  border-top:0; border-bottom:0;
}
.pe-why .pe-eyebrow{ color:var(--felt); }
.pe-why p{ margin:0; color:color-mix(in srgb,var(--felt) 88%,transparent); font-size:clamp(1.05rem,2vw,1.3rem); line-height:1.55; }

.pe-try{
  display:grid; grid-template-columns:minmax(0,0.85fr) minmax(20rem,1.15fr); gap:clamp(2rem,6vw,5rem);
  align-items:center; padding:clamp(4rem,9vw,8rem) 0;
}
.pe-try__copy p{ margin:1rem 0 1.5rem; max-width:33rem; color:var(--pencil); font-size:1.05rem; }
.pe-try__preview{ position:relative; min-height:21rem; }
.pe-try__preview img{ position:absolute; display:block; width:72%; height:auto; background:var(--card); box-shadow:0 1.4rem 3rem rgba(0,0,0,0.28); }
.pe-try__preview img:first-child{ top:0; right:0; transform:rotate(4deg); }
.pe-try__preview img:last-child{ left:0; bottom:0; transform:rotate(-4deg); }

.pe-body-settle-empty{ padding-bottom:2rem; }
.pe-settle--empty{ display:none; }

@media (max-width:54rem){
  .pe-hero{ grid-template-columns:minmax(0,1fr); min-height:0; padding-top:3rem; }
  .pe-hero__copy{ max-width:42rem; }
  .pe-hero__product{ width:min(100%,40rem); margin:0 auto; }
  .pe-offer-grid{ grid-template-columns:minmax(0,1fr); background:transparent; gap:1rem; }
  .pe-offer-card{ min-height:0; border:1px solid color-mix(in srgb,var(--ink) 22%,transparent); }
  .pe-offer-card--featured{ transform:none; }
  .pe-how__finish{ grid-template-columns:minmax(5rem,0.22fr) minmax(12rem,0.9fr) minmax(14rem,1fr); }
  .pe-rows{ grid-template-columns:minmax(0,1fr); }
  .pe-row{ grid-column:1; }
  .pe-card-preview{
    display:none; grid-column:1; grid-row:auto; position:static; margin:0.8rem 0 1.35rem;
    padding:1.1rem; background:var(--felt-2); border-top:2px solid var(--rule-firm);
  }
  .pe-card-preview.is-active{ display:block; }
  .pe-card-preview__art img{ width:min(100%,34rem); margin-inline:auto; transform:none; }
  .pe-why{ grid-template-columns:minmax(0,1fr); align-items:start; }
  .pe-try{ grid-template-columns:minmax(0,1fr); }
  .pe-try__preview{ width:min(100%,38rem); min-height:19rem; }
}

@media (max-width:40rem){
  .pe-nav{ width:100%; order:3; justify-content:space-between; border-top:1px solid var(--rule); padding-top:0.7rem; }
  .pe-nav a{ font-size:0.66rem; }
  .pe-hero{ gap:2rem; padding:2.4rem 0 3.4rem; }
  .pe-hero h1{ font-size:clamp(3.25rem,15.5vw,5rem); }
  .pe-hero__actions{ display:grid; grid-template-columns:minmax(0,1fr); }
  .pe-cta{ width:100%; }
  .pe-hero__product{ padding-right:0.5rem; }
  .pe-offer-stamp{ width:7.6rem; }
  .pe-offer-stamp strong{ font-size:2rem; }
  .pe-proofbar{ grid-template-columns:minmax(0,1fr); }
  .pe-proofbar div,.pe-proofbar div:first-child{ padding:1rem 0; border-left:0; border-top:1px solid color-mix(in srgb,var(--felt) 22%,transparent); }
  .pe-proofbar div:first-child{ border-top:0; }
  .pe-how__grid{ grid-template-columns:minmax(0,1fr); }
  .pe-how figure img{ width:100%; margin-left:0 !important; transform:none !important; }
  .pe-how__finish{ grid-column:auto; grid-template-columns:minmax(0,1fr); gap:1rem; min-height:0; }
  .pe-how__number{ font-size:4rem; }
  .pe-try__preview{ min-height:14rem; }
}

/* ═══ 7 · THE POLICY PAGES ════════════════════════════════════════════════
   privacy.html, terms.html, shipping-returns.html.

   THEY ARE THE SAME DOCUMENT AS THE STOREFRONT, and they had to be: a policy
   page that reads as pasted boilerplate is the thing an ad reviewer and a
   customer both discount, and this site's whole argument is that the terms of
   a bet are legible because they are printed on the card. So the devices are
   the storefront's own — the same masthead, the same four type roles, the same
   hairline rules, no box with four borders, no radius, no shadow — and NOT ONE
   new colour or font is introduced. Everything below is layout for running
   prose, which section 1 through 6 had no reason to define.

   The one structure worth naming is .pe-record: a ruled two-column ledger of
   what is collected against where it goes. It is the same shape as a game row
   and the same shape as the hero's spec list, because it is the same kind of
   statement — a fact set down in mono, not a reassurance. */

/* ONE MEASURE FOR THE SHEET. Every ruled element below inherits this width
   rather than stating its own, because a hairline that stops short of the one
   above it is the difference between a ledger and a draft. 44rem is also the
   reading measure for the prose, which is why the two can be the same number:
   this document is prose with rules through it, not a layout. */
.pe-doc{ padding:clamp(2.2rem,5vw,3.6rem) 0 0; max-width:44rem; }

.pe-doc__head{ padding-bottom:clamp(1.4rem,3vw,2rem); border-bottom:1px solid var(--rule-firm); }
.pe-doc__head h1{
  margin:0.6rem 0 0; font-family:var(--pe-display); font-weight:600;
  font-size:clamp(2.4rem,6vw,3.9rem); line-height:0.94; letter-spacing:-0.025em;
  text-transform:uppercase; color:var(--card);
}
/* The date is data, so it is mono, like every other numeral on the site. */
.pe-doc__stamp{
  margin:0.85rem 0 0; font-family:var(--pe-mono); font-size:0.72rem;
  font-variant-numeric:tabular-nums; color:var(--pencil);
}
.pe-doc__lede{
  margin:1.1rem 0 0; color:var(--card);
  font-size:clamp(1.02rem,1.6vw,1.14rem); line-height:1.55;
}

.pe-doc section{ padding:clamp(1.5rem,3.4vw,2.2rem) 0 0; }
.pe-doc h2{
  margin:0; padding-bottom:0.5rem; border-bottom:1px solid var(--rule);
  font-family:var(--pe-display); font-weight:600; font-size:clamp(1.15rem,2.4vw,1.5rem);
  letter-spacing:0.04em; line-height:1.1; text-transform:uppercase; color:var(--card);
}
.pe-doc h3{
  margin:1.4rem 0 0; font-family:var(--pe-display); font-weight:600;
  font-size:0.86rem; letter-spacing:0.14em; text-transform:uppercase; color:var(--card);
}
.pe-doc p{ margin:0.95rem 0 0; color:var(--pencil); font-size:0.97rem; line-height:1.6; }
.pe-doc p strong,.pe-doc li strong{ color:var(--card); font-weight:600; }
.pe-doc a{ color:var(--card); }

/* A list is a set of ruled lines here, not bullets — the same reason the
   fourteen games are rows. The marker is the rule, which is what a scorecard
   uses to separate one thing from the next. */
.pe-doc ul{ margin:0.95rem 0 0; padding:0; list-style:none; }
.pe-doc ul li{
  padding:0.6rem 0; border-top:1px solid var(--rule);
  color:var(--pencil); font-size:0.97rem; line-height:1.6;
}
.pe-doc ul li:last-child{ border-bottom:1px solid var(--rule); }

/* The ledger: what is collected, and who gets it. */
.pe-record{ margin:1.1rem 0 0; }
.pe-record__row{
  display:grid; grid-template-columns:minmax(0,12.5rem) minmax(0,1fr);
  gap:0.25rem 1.5rem; padding:0.75rem 0; border-top:1px solid var(--rule);
}
.pe-record__row:last-child{ border-bottom:1px solid var(--rule); }
.pe-record dt{
  font-family:var(--pe-mono); font-size:0.72rem; letter-spacing:0.03em;
  line-height:1.5; text-transform:uppercase; color:var(--card);
}
.pe-record dd{ margin:0; color:var(--pencil); font-size:0.94rem; line-height:1.55; }

/* One line of mono per shipping stage, tabular, so the two windows line up
   under each other and can be read against one another. */
.pe-window{ margin:1.1rem 0 0; }
.pe-window__row{
  display:flex; flex-wrap:wrap; align-items:baseline; gap:0.2rem 1.2rem;
  padding:0.7rem 0; border-top:1px solid var(--rule);
  font-family:var(--pe-mono); font-size:0.86rem; font-variant-numeric:tabular-nums;
}
.pe-window__row:last-child{ border-bottom:2px solid var(--rule-firm); }
.pe-window__row b{ flex:1 1 12rem; font-weight:400; color:var(--pencil); text-transform:uppercase; font-size:0.72rem; letter-spacing:0.1em; }
.pe-window__row span{ color:var(--card); }
.pe-window__row--total span{ font-weight:700; }

/* The closing note. Cream on a felt-2 band with one firm rule above it: the
   loudest quiet thing on the page, in the same treatment the settlement line
   uses, because on a policy page the caveat is the settlement. */
.pe-doc__note{
  margin:clamp(1.8rem,4vw,2.6rem) 0 0; padding:1.1rem 0 0;
  border-top:2px solid var(--rule-firm);
}
.pe-doc__note p{ color:var(--card); font-size:0.9rem; }

@media (max-width:54rem){
  /* On a phone nothing is at the far end of a line, and pushing the address
     there leaves it hanging off a row of links with a hole in the middle. */
  .pe-legal__contact{ margin-left:0; }
}

@media (max-width:40rem){
  .pe-record__row{ grid-template-columns:minmax(0,1fr); gap:0.3rem; }
}