/* ══════════════════════════════════════════════════════════════════
   pages.css — the standalone pages: /hosts/ and /fill/

   Everything here is prefixed pg-. app.css already owns .fg, .hero,
   .note, .facts, .row and a hundred others, and this codebase has
   been bitten three times by a second file quietly claiming a class
   the first one was already using. One prefix, no arguments.
   ══════════════════════════════════════════════════════════════════ */

/* .brand img is sized alongside .brand svg in app.css now, so the board and
   these pages render the mark identically. */

/* ── header nav, shared with the board ── */
/* On the board this sits quietly on the right, because the chip bar owns the
   middle. On these pages there are no chips, so the nav takes that centre slot
   and wears the same white chip: on a green band a translucent outline is close
   to invisible, and this is the only way in for a host. */

/* ── the green band at the top of a page ── */
.pg-top{position:relative;background:var(--pitch);color:var(--pitch-ink);overflow:hidden}
.pg-top:before{content:'';position:absolute;inset:0;pointer-events:none;
  background:repeating-linear-gradient(90deg,rgba(255,255,255,.030) 0 56px,transparent 56px 112px)}
.pg-top .w{position:relative;z-index:1;padding-top:26px;padding-bottom:28px;text-align:center}
/* Content is a centred column rather than a full-width slab. 820px is about 85
   characters at this size, so the page reads as one centred thing instead of
   text pinned to a left rail. */
.pg-mid{max-width:820px;margin-left:auto;margin-right:auto}
.pg-mid.wide{max-width:980px}
.pg-hd{text-align:center;max-width:660px;margin:0 auto}
.pg-hd h2,.pg-hd .pg-lead,.pg-hd .pg-p{max-width:none;margin-left:auto;margin-right:auto}
.pg-eyebrow{font-family:var(--osw);font-size:10.4px;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--acid);margin-bottom:16px}
.pg-top h1{font-family:var(--blk);font-size:clamp(26px,5.2vw,41px);line-height:1.03;letter-spacing:-1.2px;
  max-width:18ch;margin:0 auto;text-wrap:balance}
.pg-top .pg-sub{font-size:clamp(14px,2vw,16px);line-height:1.5;color:#C9D8C6;margin:14px auto 0;max-width:62ch}
.pg-cta{display:flex;gap:10px;flex-wrap:wrap;margin-top:26px;justify-content:center}
@media(max-width:560px){ .pg-top .w{padding-top:22px;padding-bottom:24px} }

/* ── the three points, in the hero ────────────────────────────────────────────
   These were three bordered cards with a 9.6px label on top, which read as small
   print under a large headline. They are the argument, so they are set as three
   headings with one line under each, held apart by a rule rather than a box. The
   acid numeral does the work the border used to do. */
.pg-tri{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:26px;
  text-align:left}
/* A rule between them was too quiet against the striped green. Each point sits on
   its own darker plate now, which is the same treatment as the team sheet on the
   fill page and reads at a glance. */
.pg-tri .pg-t{padding:18px 18px 19px;background:rgba(0,0,0,.22);
  border:1.5px solid rgba(242,240,231,.30)}
.pg-tri .pg-tn{display:block;font-family:var(--osw);font-size:10.4px;font-weight:700;
  letter-spacing:.14em;color:var(--acid);margin-bottom:9px}
.pg-tri .pg-t h2{font-family:var(--blk);font-size:clamp(19px,2.4vw,23px);line-height:1.06;
  letter-spacing:-.7px;color:var(--pitch-ink);margin:0 0 8px}
.pg-tri .pg-t p{font-size:13.8px;line-height:1.5;color:#C9D8C6;margin:0;max-width:32ch}

/* ══════════════════════════════════════════════════════════════════
   THE THREE POINTS, PLAYED OUT
   Same idea as the team sheet on /fill/: show the thing rather than
   assert it. Three panels rather than one morphing stage, because
   collapsing them would leave a crawler and a screen reader with one
   heading where there are three arguments. The headings and the copy
   are static HTML; only the pictures move, and they are aria-hidden
   because they say nothing the sentence beneath them does not.

   Act one pays six players off. Act two fills eight places with a
   mix of people. Act three hands three things back. Each panel dims
   until its turn, lights while it plays, and stays lit afterwards,
   so the finished state is all three lit at once.
   ══════════════════════════════════════════════════════════════════ */
.pg-tri .pg-t{transition:opacity .45s ease,border-color .45s ease,background .45s ease}
.pg-tri .pg-t.wait{opacity:.46}
.pg-tri .pg-t.live{border-color:rgba(217,240,53,.72);background:rgba(0,0,0,.30)}
.pg-tri .pg-t.live .pg-tn{color:var(--acid)}

.pg-viz{margin:13px 0 12px;border:1.5px solid rgba(242,240,231,.22);background:rgba(0,0,0,.22);
  padding:10px 11px 11px}
.pg-vhd{display:flex;align-items:baseline;gap:8px;margin-bottom:9px;font-family:var(--osw);
  font-size:8.8px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:#93AC90}
.pg-vhd b{margin-left:auto;color:var(--acid);font-size:9.2px;white-space:nowrap}

/* ── act one: six players, paid ── */
.pg-pay{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
.pg-chit{height:26px;display:flex;align-items:center;justify-content:center;gap:5px;
  border:1.5px dashed rgba(217,240,53,.5);color:#93AC90;font-family:var(--osw);font-size:9.2px;
  font-weight:700;letter-spacing:.06em}
.pg-chit.done{border:1.5px solid var(--acid);background:var(--acid);color:var(--ink)}
.pg-chit.land{animation:vizland .42s cubic-bezier(.2,.9,.25,1.25) both}

/* ── act two: what joining actually takes, from the player's side ──
   A spine with four beats on it. Distinct in shape from act one's grid and
   act three's row, so the eye reads three arguments rather than one repeated. */
.pg-flow{display:grid;gap:0;position:relative}
.pg-flow:before{content:'';position:absolute;left:6px;top:11px;bottom:11px;width:2px;
  background:rgba(242,240,231,.22)}
.pg-fstep{position:relative;display:flex;align-items:center;gap:11px;padding:4px 0;
  font-family:var(--osw);font-size:10px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;
  color:#7E9A7C;transition:color .3s ease}
.pg-fstep i{position:relative;z-index:1;width:14px;height:14px;flex:none;display:block;
  border:1.5px solid rgba(242,240,231,.34);background:var(--pitch-2);transition:.2s}
.pg-fstep.done{color:var(--pitch-ink)}
.pg-fstep.done i{border-color:var(--acid);background:var(--acid)}
/* the tick, drawn rather than a glyph so it scales with the dot */
.pg-fstep.done i:after{content:'';position:absolute;left:3px;top:.5px;width:4px;height:7px;
  border:solid var(--ink);border-width:0 2px 2px 0;transform:rotate(45deg)}
.pg-fstep.land i{animation:vizland .42s cubic-bezier(.2,.9,.25,1.25) both}

/* ── act three: what does not move ── */
.pg-keeps{display:grid;gap:6px}
.pg-keep{display:flex;align-items:center;gap:8px;padding:0 9px;height:26px;
  border:1.5px solid rgba(242,240,231,.22);color:#93AC90;
  font-family:var(--osw);font-size:9.2px;font-weight:600;letter-spacing:.07em;text-transform:uppercase}
.pg-keep u{margin-left:auto;text-decoration:none;color:#93AC90;font-weight:700}
.pg-keep.done{border-color:var(--acid);color:var(--pitch-ink)}
.pg-keep.done u{color:var(--acid)}
.pg-keep.land{animation:vizland .42s cubic-bezier(.2,.9,.25,1.25) both}

@keyframes vizland{
  0%{opacity:0;transform:translateY(-9px) scale(.72)}
  62%{opacity:1;transform:translateY(0) scale(1.08)}
  100%{opacity:1;transform:none}}

@media(prefers-reduced-motion:reduce){
  .pg-tri .pg-t,.pg-tri .pg-t.wait{opacity:1}
  .pg-chit.land,.pg-fstep.land i,.pg-keep.land{animation:none}
}
@media(max-width:760px){
  /* Stacked, the three panels put the hero at 985px on a phone, which is a
     screen and a half before anything else. The pictures survive at half the
     height: one row instead of two, square cells become bars, and the copy
     tightens. Nothing is removed, it is just no longer set at desktop scale. */
  .pg-viz{margin:10px 0 9px;padding:9px 10px 10px}
  .pg-vhd{margin-bottom:7px}
  .pg-pay{grid-template-columns:repeat(6,minmax(0,1fr));gap:4px}
  .pg-chit{height:24px;font-size:8.4px;letter-spacing:0}
  .pg-fstep{font-size:9.2px;gap:9px;padding:3px 0}
  .pg-fstep i{width:13px;height:13px}
  /* Three stacked bars was the tallest picture of the three at 122px. Side by
     side with the value under the label it is 40, and it reads the same. */
  .pg-keeps{grid-template-columns:repeat(3,minmax(0,1fr));gap:4px}
  .pg-keep{height:auto;min-height:38px;flex-direction:column;align-items:flex-start;
    justify-content:center;gap:3px;padding:6px 7px;font-size:8.2px;line-height:1.15}
  .pg-keep u{margin-left:0;font-size:8.8px}
  .pg-tri .pg-t{padding:14px 14px 15px}
  .pg-tri .pg-t h2{font-size:19px}
  .pg-tri .pg-t p{font-size:13.2px}
}
@media(max-width:760px){
  .pg-tri{grid-template-columns:minmax(0,1fr);gap:9px}
  .pg-tri .pg-t{padding:15px 16px 16px}
  .pg-tri .pg-t p{max-width:none}
}

/* ── body sections ── */
.pg-sec{padding:44px 0;border-bottom:1.5px solid var(--rule)}
.pg-sec:last-of-type{border-bottom:0}
.pg-sec.turf{position:relative}
.pg-sec.turf:before{content:'';position:absolute;inset:0;z-index:0;pointer-events:none;
  background:repeating-linear-gradient(90deg,var(--turf-a) 0 56px,var(--turf-b) 56px 112px)}
.pg-sec.turf > *{position:relative;z-index:1}
.pg-lbl{font-family:var(--osw);font-size:10.4px;font-weight:600;letter-spacing:.12em;
  text-transform:uppercase;color:var(--mu);margin-bottom:12px}
.pg-sec h2{font-family:var(--blk);font-size:clamp(21px,3.8vw,30px);line-height:1.08;letter-spacing:-1px;
  max-width:22ch;text-wrap:balance}
.pg-sec h3{font-family:var(--blk);font-size:16px;letter-spacing:-.4px;line-height:1.2}
.pg-lead{font-size:clamp(14.5px,1.9vw,16.5px);line-height:1.6;color:var(--ink2);margin-top:14px;max-width:62ch}
.pg-p{font-size:14.5px;line-height:1.65;color:var(--ink2);margin-top:12px;max-width:62ch}
.pg-sec.turf .pg-lead,.pg-sec.turf .pg-p{max-width:62ch}

/* ── grids ── */
.pg-g2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-top:24px}
.pg-g3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:24px}
.pg-g4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-top:24px}
@media(max-width:860px){ .pg-g3,.pg-g4{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media(max-width:560px){ .pg-g2,.pg-g3,.pg-g4{grid-template-columns:minmax(0,1fr)} }
.pg-split{display:grid;grid-template-columns:minmax(0,1fr);gap:26px;align-items:start}
@media(min-width:900px){ .pg-split{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:44px} }

/* ── cards ── */
.pg-card{border:1.5px solid var(--rule2);background:var(--card,#fff);padding:18px}
.pg-card.k{border:1.5px solid var(--ink)}
.pg-card.acid{background:var(--acid);border-color:var(--ink)}
.pg-card h3{margin-bottom:8px}
.pg-card p{font-size:13.8px;line-height:1.6;color:var(--ink2)}
.pg-card .pg-k{display:block;font-family:var(--osw);font-size:9.6px;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;color:var(--mu);margin-bottom:9px}
.pg-card.acid .pg-k{color:var(--acid-dk)}
.pg-big{font-family:var(--blk);font-size:31px;letter-spacing:-1.3px;line-height:1;display:block}
.pg-card .pg-i{display:block;font-style:normal;font-size:12.8px;color:var(--mu);margin-top:9px;line-height:1.55}
.pg-card.acid .pg-i{color:var(--acid-dk)}

/* ── numbered steps ── */
.pg-steps{display:grid;gap:12px;margin-top:24px}
.pg-step{display:grid;grid-template-columns:44px minmax(0,1fr);gap:14px;align-items:start;
  border:1.5px solid var(--rule2);background:var(--card,#fff);padding:16px}
.pg-step .n{width:44px;height:44px;display:grid;place-items:center;border:1.5px solid var(--ink);
  font-family:var(--blk);font-size:19px;line-height:1}
.pg-step h3{margin-bottom:5px}
.pg-step p{font-size:13.8px;line-height:1.6;color:var(--ink2)}

/* ── plain list with acid ticks ── */
.pg-list{list-style:none;margin-top:18px}
.pg-list li{position:relative;padding-left:26px;margin-bottom:12px;font-size:14.5px;line-height:1.6;
  color:var(--ink2)}
.pg-list li:before{content:'';position:absolute;left:0;top:6px;width:12px;height:12px;
  background:var(--acid);border:1.5px solid var(--ink)}
.pg-list b{color:var(--ink)}

/* ── tables ── */
.pg-tw{border:1.5px solid var(--ink);background:var(--card,#fff);overflow-x:auto;margin-top:20px}
.pg-tw table{width:100%;border-collapse:collapse;min-width:420px}
.pg-tw th{font-family:var(--osw);font-size:9.6px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--mu);text-align:left;padding:12px;border-bottom:1.5px solid var(--ink);white-space:nowrap}
.pg-tw td{padding:12px;border-bottom:1px solid var(--rule);font-size:14px;vertical-align:middle}
.pg-tw tr:last-child td{border-bottom:0}
.pg-tw .rt{text-align:right}
.pg-tw .num{font-variant-numeric:tabular-nums;font-weight:600}

/* ── the price plan ───────────────────────────────────────────────────────────
   Was a four column table with the one genuinely useful column ("in plain terms")
   hidden below 560px, which left a phone reading "Free 5 RM0" and guessing. It is
   a grid now: the tier and what it means always visible, the price set in the
   display face so the number is what the eye lands on, and the free row carrying
   an acid edge because that is the row that gets someone to try it. */
.pg-plan{border:1.5px solid var(--ink);background:var(--card,#fff);margin-top:20px}
.pg-prow{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr) 116px 118px;
  gap:14px;align-items:center;padding:15px 18px;border-bottom:1px solid var(--rule)}
.pg-prow:last-child{border-bottom:0}
.pg-prow.hd{padding:11px 18px;border-bottom:1.5px solid var(--ink);
  font-family:var(--osw);font-size:9.6px;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--mu)}
.pg-prow .rt{text-align:right}
.pg-prow .t{font-family:var(--blk);font-size:18px;letter-spacing:-.6px;line-height:1.1}
.pg-prow .t em{display:block;font-family:var(--osw);font-style:normal;font-size:8.8px;
  font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--acid-dk);
  margin-top:4px;letter-spacing:.1em}
.pg-prow .d{font-size:13.6px;line-height:1.45;color:var(--ink2)}
.pg-prow .s{font-size:14px;font-variant-numeric:tabular-nums;color:var(--ink2)}
.pg-prow .p{font-family:var(--blk);font-size:22px;letter-spacing:-1px;line-height:1;
  font-variant-numeric:tabular-nums}
/* the row we want tried first */
.pg-prow.on{background:var(--card2,#F7F6EF);box-shadow:inset 4px 0 0 var(--acid)}
.pg-prow.on .p{color:var(--ink)}
@media(max-width:640px){
  .pg-prow{grid-template-columns:minmax(0,1fr) auto;gap:4px 12px;padding:14px 15px;
    align-items:baseline}
  .pg-prow.hd{display:none}
  .pg-prow .d{grid-column:1;order:3;font-size:12.8px}
  .pg-prow .t{grid-column:1;order:1}
  .pg-prow .p{grid-column:2;grid-row:1;order:2}
  /* the session count reads as a label on a phone, not a bare number in a column */
  .pg-prow .s{grid-column:2;order:4;text-align:right;font-family:var(--osw);font-size:9.6px;
    font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--mu);white-space:nowrap}
  .pg-prow .s:after{content:' sessions'}
}

/* ── the aside note ── */
.pg-note{border:1.5px solid var(--rule2);border-left:4px solid var(--acid-dk);background:var(--card,#fff);
  padding:14px 16px;font-size:13.8px;line-height:1.65;color:var(--ink2);margin-top:20px}
.pg-note b{color:var(--ink)}
.pg-note.warn{border-left-color:var(--hot)}

/* ══ the form ══
   One column on a phone because a two-column form on 390px is a
   scroll-and-guess exercise. Labels above fields, always visible. */
.pg-form{margin-top:24px;max-width:660px;margin-left:auto;margin-right:auto;text-align:left}
.pg-fg{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
@media(max-width:560px){ .pg-fg{grid-template-columns:minmax(0,1fr)} }
.pg-f{margin-bottom:14px}
.pg-f.full{grid-column:1/-1}
.pg-f label{display:block;font-family:var(--osw);font-size:10.4px;font-weight:600;letter-spacing:.09em;
  text-transform:uppercase;color:var(--mu);margin-bottom:7px}
.pg-f label .req{color:var(--hot)}
.pg-inp{width:100%;background:var(--card,#fff);border:1.5px solid var(--rule2);padding:13px;min-height:46px;
  font-size:16px;font-family:var(--sans);color:var(--ink);border-radius:0;transition:.12s;min-height:48px}
textarea.pg-inp{resize:vertical;min-height:96px;line-height:1.55;font-size:15px}
select.pg-inp{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--ink) 50%),
  linear-gradient(135deg,var(--ink) 50%,transparent 50%);
  background-position:calc(100% - 18px) 21px,calc(100% - 13px) 21px;
  background-size:5px 5px,5px 5px;background-repeat:no-repeat;padding-right:38px}
.pg-inp:focus{outline:none;border-color:var(--ink);box-shadow:3px 3px 0 var(--rule2)}
.pg-inp::placeholder{color:var(--mu2)}
.pg-inp.bad{border-color:var(--hot);background:var(--hot-soft)}
.pg-hint{font-family:var(--osw);font-size:9.8px;font-weight:400;letter-spacing:.05em;text-transform:uppercase;
  color:var(--mu2);margin-top:7px;line-height:1.6}
.pg-err{display:none;font-size:13.5px;color:var(--hot);margin-top:12px;font-weight:600}
.pg-err.on{display:block}
.pg-submit{margin-top:8px;display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.pg-submit .pg-small{font-family:var(--osw);font-size:9.8px;letter-spacing:.05em;text-transform:uppercase;
  color:var(--mu2);line-height:1.6;flex:1 1 220px}

/* the panel that replaces the form once it is sent */
.pg-done{display:none;border:2px solid var(--ink);background:var(--card,#fff);padding:24px;
  box-shadow:5px 5px 0 var(--ink);margin:24px auto 0;max-width:660px;text-align:center}
.pg-done.on{display:block}
.pg-done h3{font-size:22px;letter-spacing:-.7px;margin-bottom:10px}
.pg-done p{font-size:14.5px;line-height:1.6;color:var(--ink2)}
.pg-done .pg-cta{margin-top:20px}

/* ── buttons, on the green band and on paper ── */
.pg-btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;padding:14px 20px;
  font-family:var(--osw);font-size:11.4px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  border:1.5px solid var(--ink);background:var(--acid);color:var(--ink);transition:.12s;min-height:50px;
  cursor:pointer;white-space:nowrap}
.pg-btn:hover{box-shadow:4px 4px 0 var(--ink)}
.pg-btn.o{background:transparent;color:var(--pitch-ink);border-color:rgba(242,240,231,.55)}
.pg-btn.o:hover{background:var(--pitch-ink);color:var(--ink);border-color:var(--pitch-ink);box-shadow:none}
/* .o is paper on a translucent paper border, which is invisible on a paper
   section. .ol is the same idea for a light ground: ink on ink. */
.pg-btn.ol{background:transparent;color:var(--ink);border-color:var(--ink)}
.pg-btn.ol:hover{background:var(--ink);color:var(--acid);box-shadow:none}
.pg-btn.ink{background:var(--ink);color:var(--acid);border-color:var(--ink)}
.pg-btn.wa{background:#25D366;color:#062f16;border-color:var(--ink)}
.pg-btn[disabled]{opacity:.45;pointer-events:none}
.pg-btn svg{width:16px;height:16px;flex:none}

/* ── footer for the standalone pages ── */
/* .football sits in the logo's muted grey, same as the mark in the header. */

/* ══ mobile ══
   A 420px min-width turned every table into a sideways scroll on a
   390px phone. These tables are small enough to fit if the one long
   descriptive column steps out of the way. */
@media(max-width:560px){
  .pg-tw table{min-width:0}
  .pg-tw th,.pg-tw td{padding:11px 9px;font-size:13px}
  .pg-tw th{font-size:9px;letter-spacing:.05em}
  .pg-tw .sm-hide{display:none}
  .pg-step{grid-template-columns:38px minmax(0,1fr);gap:12px;padding:14px}
  .pg-step .n{width:38px;height:38px;font-size:16px}
  .pg-sec{padding:32px 0}
  .pg-big{font-size:27px}
}
/* the 44px touch target for footer links is set on `footer .in a` in
   app.css, so the board and these pages get it from one place */

/* ══════════════════════════════════════════════════════════════════
   HOW IT WORKS — the zigzag
   Steps alternate side to side down a spine, each arriving as it comes
   into view. The motion is a fade and a short travel only: anything
   bigger fights the reading. Reduced-motion gets the finished state
   with no transition at all, which is the whole point of the setting.
   ══════════════════════════════════════════════════════════════════ */
.pg-zig{position:relative;margin-top:20px}
.pg-zig:before{content:'';position:absolute;left:50%;top:0;bottom:0;width:2px;
  background:repeating-linear-gradient(180deg,var(--rule2) 0 7px,transparent 7px 14px);
  transform:translateX(-50%)}
/* Two things were making this sprawl. The gap between steps, and the fact that a
   left step and the right step after it never shared any vertical space at all,
   so five half-width boxes stacked to the height of five full-width ones. They
   are pulled up into each other now: the eye travels diagonally across a short
   overlap instead of dropping the full height of a card between each one. They
   sit on opposite sides, so overlapping cannot collide. */
.pg-zstep{position:relative;width:calc(50% - 30px);margin-bottom:0}
.pg-zstep + .pg-zstep{margin-top:-52px}
.pg-zstep:nth-child(odd){margin-right:auto}
.pg-zstep:nth-child(even){margin-left:auto}
.pg-zbox{border:1.5px solid var(--ink);background:var(--card,#fff);padding:14px 16px 15px;
  box-shadow:4px 4px 0 var(--rule2)}
.pg-zstep .n{position:absolute;top:16px;width:34px;height:34px;display:grid;place-items:center;
  font-family:var(--blk);font-size:15px;line-height:1;background:var(--acid);
  border:1.5px solid var(--ink);z-index:2}
.pg-zstep:nth-child(odd) .n{right:-47px}
.pg-zstep:nth-child(even) .n{left:-47px}
/* the little arm out to the spine */
.pg-zstep:after{content:'';position:absolute;top:30px;width:14px;height:2px;background:var(--rule2)}
.pg-zstep:nth-child(odd):after{right:-14px}
.pg-zstep:nth-child(even):after{left:-14px}
.pg-zbox h3{font-family:var(--blk);font-size:15.5px;letter-spacing:-.4px;line-height:1.2;margin-bottom:7px}
.pg-zwho{display:grid;gap:6px;margin-top:9px;padding-top:9px;border-top:1px solid var(--rule)}
.pg-zwho div{display:grid;grid-template-columns:64px minmax(0,1fr);gap:10px;align-items:baseline}
.pg-zwho span{font-family:var(--osw);font-size:8.8px;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;color:var(--mu)}
.pg-zwho p{font-size:12.8px;line-height:1.5;color:var(--ink2);margin:0;max-width:none}

.pg-reveal{opacity:0;transform:translateY(16px);transition:opacity .5s ease,transform .5s ease}
.pg-zstep:nth-child(odd).pg-reveal{transform:translate(-14px,16px)}
.pg-zstep:nth-child(even).pg-reveal{transform:translate(14px,16px)}
.pg-reveal.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  .pg-reveal,.pg-zstep:nth-child(odd).pg-reveal,.pg-zstep:nth-child(even).pg-reveal{
    opacity:1;transform:none;transition:none}
}
@media(max-width:720px){
  .pg-zig:before{left:17px}
  /* one column on a phone, so the overlap has to come back off */
  .pg-zstep,.pg-zstep:nth-child(odd),.pg-zstep:nth-child(even){width:auto;margin-left:44px;margin-right:0;
    margin-bottom:8px}
  .pg-zstep + .pg-zstep{margin-top:0}
  .pg-zstep:nth-child(odd) .n,.pg-zstep:nth-child(even) .n{left:-44px;right:auto}
  .pg-zstep:nth-child(odd):after,.pg-zstep:nth-child(even):after{left:-10px;right:auto;width:10px}
  .pg-zstep:nth-child(odd).pg-reveal,.pg-zstep:nth-child(even).pg-reveal{transform:translateY(16px)}
}

/* ── the collapsible ── */
.pg-fold{border:1.5px solid var(--ink);background:var(--card,#fff);margin-top:20px}
.pg-fold > summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:12px;
  padding:15px 17px;font-family:var(--osw);font-size:11.4px;font-weight:600;letter-spacing:.07em;
  text-transform:uppercase;color:var(--ink);min-height:52px}
.pg-fold > summary::-webkit-details-marker{display:none}
.pg-fold > summary:hover{background:var(--card2)}
.pg-fold > summary i{margin-left:auto;font-style:normal;font-family:var(--osw);font-size:9.6px;
  font-weight:500;letter-spacing:.05em;color:var(--mu)}
.pg-fold > summary b{width:22px;height:22px;flex:none;border:1.5px solid var(--ink);
  display:grid;place-items:center;position:relative;background:var(--acid)}
.pg-fold > summary b:before,.pg-fold > summary b:after{content:'';position:absolute;
  background:var(--ink)}
.pg-fold > summary b:before{width:10px;height:2px}
.pg-fold > summary b:after{width:2px;height:10px;transition:transform .16s}
.pg-fold[open] > summary b:after{transform:scaleY(0)}
/* Chrome was still laying the panel out with the details closed, so this does
   not lean on the UA rule at all. Explicit, and the same in every browser. */
.pg-fold .pg-foldin{border-top:1.5px solid var(--ink)}
.pg-fold:not([open]) .pg-foldin{display:none}
.pg-fold .pg-tw{border:0;margin-top:0}
.pg-fold .pg-hint{padding:0 17px 15px}

/* ── powered by ── */
.pg-pwr{display:flex;align-items:center;justify-content:center;gap:16px;flex-wrap:wrap;
  padding-top:8px}
.pg-pwr span{font-family:var(--osw);font-size:10.4px;font-weight:600;letter-spacing:.12em;
  text-transform:uppercase;color:var(--mu)}
.pg-pwr img{height:34px;width:auto;border:1.5px solid var(--rule2);display:block}
/* The Studio 42 credit, built to the brand pack rather than as a cropped jpg:
   green brackets, Georgia wordmark, terracotta 42, no box around it. Sized so it
   reads at roughly the weight of the line above rather than competing with it. */
.pg-pwr .s42{display:inline-flex;align-items:center;gap:8px;text-decoration:none;
  font-family:var(--sans);font-size:12px;letter-spacing:.02em;line-height:1;color:var(--mu);
  transition:color .18s;text-transform:none}
.pg-pwr .s42 svg{flex:none;display:block}
.pg-pwr .s42 .nm{font-family:Georgia,'Times New Roman',serif;font-weight:600;font-size:15px;
  letter-spacing:-.01em;color:#3c4235;text-transform:none}
.pg-pwr .s42 .nm i{font-style:normal;color:#C1603C}
.pg-pwr .s42:hover .nm{color:#23271F}

/* ══════════════════════════════════════════════════════════════════
   FILL YOUR GAME — the team sheet
   The page is built around the thing being asked for: a lineup with
   holes in it. Filled studs are your regulars, dashed ones are what
   we send. It says "we find the players you are missing" without a
   paragraph explaining it.
   ══════════════════════════════════════════════════════════════════ */
/* The header used to pop the five empty slots in once and then sit still, which
   showed the gap but never showed us closing it. Now it plays the actual promise
   on a loop: five dashed holes breathing, then one filling every 900ms in acid so
   you can see which ones came from us, a counter and a bar running down to zero,
   a beat on GAME ON, and back to the gap. Reduced motion gets the finished sheet
   and no loop at all. */
.pg-sheet{border:1.5px solid rgba(242,240,231,.28);background:rgba(0,0,0,.16);padding:20px 20px 17px;
  transition:border-color .35s ease,box-shadow .35s ease}
.pg-sheet.full{border-color:var(--acid);box-shadow:0 0 0 1.5px var(--acid)}
.pg-sheetlbl{display:flex;align-items:center;gap:11px;flex-wrap:wrap;margin-bottom:14px;
  font-family:var(--osw);font-size:9.6px;font-weight:700;letter-spacing:.13em;
  text-transform:uppercase;color:#9DB79F}
.pg-sheetlbl b{color:var(--acid);transition:color .2s,background .2s;padding:2px 0}
.pg-sheetlbl b.done{color:var(--ink);background:var(--acid);padding:2px 8px}

/* how much of the gap is closed, as a bar */
.pg-sfill{flex:1 1 80px;min-width:56px;max-width:190px;height:4px;
  background:rgba(242,240,231,.22);position:relative}
.pg-sfill i{position:absolute;top:0;bottom:0;left:0;width:0;background:var(--acid);
  transition:width .55s cubic-bezier(.2,.9,.25,1)}

/* 21 studs on a flex row wrapped 19 + 2, which reads as a layout bug rather than
   a squad. A grid makes every wrap deliberate: one row of 21 on a wide screen,
   then 11 + 10, then three clean rows of seven, which is the format anyway. */
.pg-studs{display:grid;grid-template-columns:repeat(21,minmax(0,1fr));gap:6px}
.pg-stud{position:relative;aspect-ratio:1;display:grid;place-items:center;
  font-family:var(--osw);font-size:11.4px;font-weight:700;background:var(--pitch-ink);
  color:var(--ink);border:1.5px solid var(--pitch-ink)}
/* a hole we have not filled yet: dashed, and breathing so it reads as outstanding */
.pg-stud.gap{background:transparent;color:var(--acid);border:1.5px dashed var(--acid);
  animation:studwait 1.7s ease-in-out infinite}
.pg-stud.gap:nth-of-type(2n){animation-delay:.28s}
.pg-stud.gap:nth-of-type(3n){animation-delay:.56s}
/* one we sent: solid acid, so the eye can count what we added */
.pg-stud.sent{background:var(--acid);border:1.5px solid var(--acid);color:var(--ink);
  animation:none}
.pg-stud.land{animation:studland .52s cubic-bezier(.2,.9,.25,1.25) both}
.pg-stud.land:after{content:'';position:absolute;inset:-7px;border:2px solid var(--acid);
  animation:studring .62s ease-out both;pointer-events:none}

@keyframes studwait{0%,100%{opacity:.42}50%{opacity:1}}
@keyframes studland{
  0%{opacity:0;transform:translateY(-15px) scale(.55)}
  62%{opacity:1;transform:translateY(0) scale(1.17)}
  100%{opacity:1;transform:none}}
@keyframes studring{from{opacity:.85;transform:scale(.55)}to{opacity:0;transform:scale(1.55)}}

/* the key, because the colour is doing real work and should be named */
.pg-key{display:flex;justify-content:center;gap:18px;flex-wrap:wrap;margin-top:15px;
  font-family:var(--osw);font-size:9.4px;font-weight:600;letter-spacing:.11em;
  text-transform:uppercase;color:#9DB79F}
.pg-key span{display:inline-flex;align-items:center;gap:7px}
.pg-key i{width:11px;height:11px;flex:none;display:block}
.pg-key .k1{background:var(--pitch-ink);border:1.5px solid var(--pitch-ink)}
.pg-key .k2{background:var(--acid);border:1.5px solid var(--acid)}

@media(prefers-reduced-motion:reduce){
  .pg-stud.gap,.pg-stud.land{animation:none}
  .pg-stud.land:after{display:none}
  .pg-sfill i{transition:none}
}
@media(max-width:900px){ .pg-studs{grid-template-columns:repeat(11,minmax(0,1fr))} }
@media(max-width:620px){ .pg-studs{grid-template-columns:repeat(7,minmax(0,1fr));gap:5px} }
@media(max-width:560px){ .pg-stud{font-size:10.4px} }

/* The fill header's smaller type and tighter padding is now the base rule for
   both pages, so /hosts/ and /fill/ open at the same weight. Only the sheet's
   own spacing is left here. */
.pg-top.fill .pg-sheet{margin-top:22px}

/* ── the clinical form ── */
.pg-kit{border:1.5px solid var(--ink);background:var(--card,#fff);margin-top:26px;
  max-width:720px;margin-left:auto;margin-right:auto}
.pg-kithd{display:flex;align-items:center;gap:12px;padding:15px 18px;
  border-bottom:1.5px solid var(--ink);background:var(--pitch);color:var(--pitch-ink)}
.pg-kithd b{font-family:var(--blk);font-size:15px;letter-spacing:-.4px}
.pg-kithd i{margin-left:auto;font-style:normal;font-family:var(--osw);font-size:9.4px;
  font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:#9DB79F}
.pg-kitrow{display:grid;grid-template-columns:132px minmax(0,1fr);gap:0;
  border-bottom:1px solid var(--rule);align-items:stretch}
.pg-kitrow:last-of-type{border-bottom:0}
.pg-kitrow > label,.pg-kitrow > .pg-kl{display:flex;align-items:center;padding:0 16px;
  background:var(--card2);border-right:1px solid var(--rule);
  font-family:var(--osw);font-size:9.6px;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink2);min-height:56px}
.pg-kitrow > label .req,.pg-kitrow > .pg-kl .req{color:var(--hot);margin-left:4px}
.pg-kitv{padding:9px 14px;display:flex;flex-direction:column;justify-content:center;gap:8px;min-width:0}
.pg-kitv .pg-inp{border:0;padding:7px 2px;min-height:40px;background:transparent;font-size:16px}
.pg-kitv .pg-inp:focus{box-shadow:none;outline:2px solid var(--ink);outline-offset:2px}
.pg-kitv .pg-hint{margin-top:0}
.pg-kit2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
@media(max-width:560px){
  .pg-kitrow{grid-template-columns:minmax(0,1fr)}
  .pg-kitrow > label,.pg-kitrow > .pg-kl{border-right:0;border-bottom:1px solid var(--rule);min-height:44px}
  .pg-kit2{grid-template-columns:minmax(0,1fr)}
}

/* segmented control, for the choices with few options */
.pg-seg{display:flex;flex-wrap:wrap;gap:0;border:1.5px solid var(--ink);width:fit-content;max-width:100%}
.pg-seg button{font-family:var(--osw);font-size:10.4px;font-weight:600;letter-spacing:.06em;
  text-transform:uppercase;padding:11px 14px;min-height:44px;background:var(--card,#fff);
  color:var(--ink2);border-right:1.5px solid var(--ink);cursor:pointer;white-space:nowrap}
.pg-seg button:last-child{border-right:0}
.pg-seg button.on{background:var(--acid);color:var(--ink);font-weight:700}
.pg-seg button:hover:not(.on){background:var(--card2)}

/* a stepper for the count */
.pg-cnt{display:flex;align-items:center;border:1.5px solid var(--ink);width:fit-content}
.pg-cnt button{width:46px;height:46px;font-family:var(--blk);font-size:19px;line-height:1;
  background:var(--card,#fff);cursor:pointer}
.pg-cnt button:hover{background:var(--card2)}
.pg-cnt .v{min-width:58px;text-align:center;font-family:var(--blk);font-size:21px;
  letter-spacing:-.6px;border-left:1.5px solid var(--ink);border-right:1.5px solid var(--ink);
  padding:11px 6px;font-variant-numeric:tabular-nums}

/* price, with the ringgit set in the field */
.pg-rm{display:flex;align-items:center;border:1.5px solid var(--ink);width:fit-content;max-width:100%}
.pg-rm span{padding:0 12px;font-family:var(--osw);font-size:11.4px;font-weight:700;
  letter-spacing:.06em;color:var(--mu);border-right:1.5px solid var(--ink);
  align-self:stretch;display:flex;align-items:center;background:var(--card2)}
.pg-rm input{border:0;padding:12px;width:110px;font-family:var(--blk);font-size:19px;
  letter-spacing:-.4px;background:transparent;min-height:46px;font-variant-numeric:tabular-nums}
.pg-rm input:focus{outline:2px solid var(--ink);outline-offset:-2px}

/* ── venue picker ── */
.pg-vpick{display:grid;gap:9px}
.pg-vmapwrap{display:none;border:1.5px solid var(--ink);margin-top:2px}
.pg-vmapwrap.on{display:block}
.pg-vsearch{display:flex;gap:0;border-bottom:1.5px solid var(--ink)}
.pg-vsearch input{flex:1;border:0;padding:12px;font-size:16px;min-height:48px;background:transparent}
.pg-vsearch input:focus{outline:2px solid var(--ink);outline-offset:-2px}
.pg-vsearch button{flex:none;padding:0 16px;background:var(--acid);border-left:1.5px solid var(--ink);
  font-family:var(--osw);font-size:10.4px;font-weight:700;letter-spacing:.07em;
  text-transform:uppercase;cursor:pointer;min-height:48px}
.pg-vhits{max-height:168px;overflow-y:auto;border-bottom:1.5px solid var(--ink);display:none}
.pg-vhits.on{display:block}
.pg-vhits button{display:block;width:100%;text-align:left;padding:11px 13px;font-size:13.5px;
  line-height:1.45;border-bottom:1px solid var(--rule);background:var(--card,#fff);cursor:pointer;
  min-height:44px}
.pg-vhits button:last-child{border-bottom:0}
.pg-vhits button:hover{background:var(--card2)}
.pg-vhits button b{display:block;font-weight:700}
.pg-vhits button i{font-style:normal;color:var(--mu);font-size:12px}
.pg-vmap{height:230px;background:var(--card2)}
.pg-vpicked{padding:11px 13px;border-top:1.5px solid var(--ink);background:var(--acid-soft);
  font-size:13px;line-height:1.5;display:none}
.pg-vpicked.on{display:block}
.pg-vpicked b{display:block;font-weight:700}
.pg-vnote{font-family:var(--osw);font-size:9.6px;letter-spacing:.05em;text-transform:uppercase;
  color:var(--mu2);line-height:1.6}


/* ══════════════════════════════════════════════════════════════════
   QUESTIONS
   Real answers to what people actually type into a search box, marked
   up as FAQPage. Google will only show FAQ rich results when the
   answer is on the page a person lands on, so these are visible
   content first and structured data second, not the other way round.
   <details> keeps the answer in the DOM while it is closed, which is
   what the guidelines ask for.
   ══════════════════════════════════════════════════════════════════ */
.pg-qs{display:grid;gap:9px;margin-top:22px}
.pg-q{border:1.5px solid var(--ink);background:var(--card,#fff)}
.pg-q > summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:14px;
  padding:15px 17px;min-height:56px}
.pg-q > summary::-webkit-details-marker{display:none}
.pg-q > summary:hover{background:var(--card2)}
.pg-q > summary h3{font-family:var(--blk);font-size:15px;letter-spacing:-.35px;line-height:1.25;
  margin:0;flex:1 1 auto}
.pg-q > summary b{width:22px;height:22px;flex:none;border:1.5px solid var(--ink);
  display:grid;place-items:center;position:relative;background:var(--acid)}
.pg-q > summary b:before,.pg-q > summary b:after{content:'';position:absolute;background:var(--ink)}
.pg-q > summary b:before{width:10px;height:2px}
.pg-q > summary b:after{width:2px;height:10px;transition:transform .16s}
.pg-q[open] > summary b:after{transform:scaleY(0)}
.pg-qa{border-top:1.5px solid var(--rule);padding:14px 17px 16px}
.pg-q:not([open]) .pg-qa{display:none}
.pg-qa p{font-size:14px;line-height:1.65;color:var(--ink2);margin:0;max-width:74ch}
@media(max-width:560px){
  .pg-q > summary{padding:13px 14px;gap:11px;min-height:60px}
  .pg-q > summary h3{font-size:14.2px}
  .pg-qa{padding:12px 14px 14px}
}

/* ── phone: the form is the conversion, so it gets the full treatment ──
   Fields measured 40px tall on every phone width, under the 44px target the
   rest of the site holds to, and the labels sat at 10.4px, which is a caption
   size being asked to do a form label's job. */
@media(max-width:560px){
  .pg-inp{min-height:48px;font-size:16px}
  .pg-f label{font-size:11.4px}
  /* .pg-kitv .pg-inp is two classes deep and pins 40px, so it has to be named
     here or it wins on specificity and the team sheet keeps its short fields. */
  .pg-kitv .pg-inp{min-height:48px;font-size:16px}
  /* 16px on inputs specifically: iOS Safari zooms the whole page in on focus
     for anything smaller, and the page never zooms back out. */
  .pg-seg button,.pg-cnt button{min-height:46px}
}
/* The credit is meant to be quiet, and the brand pack is explicit that it never
   grows past the footer's own body text. So the type stays put and the padding
   does the work of making it tappable. */
.sfoot .s42,.pg-pwr .s42{padding:14px 0;min-height:44px}

/* ══════════════════════════════════════════════════════════════════
   THE POST-GAME RATING PAGE
   Someone has just walked off a pitch and opened this on a phone,
   sweaty, one-handed, with about thirty seconds of goodwill. So: one
   required question, big targets, and everything else optional.
   ══════════════════════════════════════════════════════════════════ */
.pg-rate{max-width:560px}
.pg-rcard{border:1.5px solid var(--ink);background:var(--card,#fff)}
.pg-rhd{padding:14px 17px;border-bottom:1.5px solid var(--ink);background:var(--pitch);
  color:var(--pitch-ink);display:flex;flex-direction:column;gap:3px}
.pg-rhd b{font-family:var(--blk);font-size:17px;letter-spacing:-.5px;line-height:1.15}
.pg-rhd i{font-style:normal;font-family:var(--osw);font-size:9.6px;font-weight:600;
  letter-spacing:.1em;text-transform:uppercase;color:#9DB79F}
.pg-rq{padding:16px 17px;border-bottom:1px solid var(--rule)}
.pg-rq:last-of-type{border-bottom:0}
.pg-rl{display:block;font-family:var(--osw);font-size:10.4px;font-weight:600;letter-spacing:.09em;
  text-transform:uppercase;color:var(--mu);margin-bottom:11px}
.pg-rl .req{color:var(--hot)}

/* the score: five targets, wide enough to hit without looking */
.pg-scale{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px}
.pg-scale button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
  border:1.5px solid var(--rule2);background:var(--card,#fff);padding:11px 4px;min-height:64px;
  transition:.12s;cursor:pointer}
.pg-scale button b{font-family:var(--blk);font-size:20px;letter-spacing:-.6px;line-height:1}
.pg-scale button span{font-family:var(--osw);font-size:8.6px;font-weight:600;letter-spacing:.08em;
  text-transform:uppercase;color:var(--mu)}
.pg-scale button:hover{border-color:var(--ink)}
.pg-scale button.on{background:var(--acid);border-color:var(--ink);box-shadow:3px 3px 0 var(--ink)}
.pg-scale button.on span{color:var(--acid-dk)}

.pg-tags{display:flex;flex-wrap:wrap;gap:7px}
.pg-tag{border:1.5px solid var(--rule2);background:var(--card,#fff);padding:9px 12px;min-height:44px;
  font-family:var(--osw);font-size:10.4px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;
  color:var(--ink2);cursor:pointer;transition:.12s}
.pg-tag:hover{border-color:var(--ink)}
.pg-tag.on{background:var(--ink);border-color:var(--ink);color:var(--acid)}
/* The browser's default focus fill on a tag read as a third state next to
   picked and not picked. An outline says focus and leaves the fill to mean
   only one thing. */
.pg-tag:focus{outline:none;background:var(--card,#fff);color:var(--ink2)}
.pg-tag.on:focus{background:var(--ink);color:var(--acid)}
.pg-tag:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.pg-scale button:focus-visible{outline:2px solid var(--ink);outline-offset:2px}

.pg-rate .pg-err{margin:0 17px}
.pg-rate .pg-submit{padding:15px 17px 17px;border-top:1.5px solid var(--ink);margin-top:0}
.pg-rate textarea.pg-inp{min-height:78px}

@media(max-width:560px){
  .pg-scale{gap:5px}
  .pg-scale button{min-height:70px;padding:10px 2px}
  .pg-scale button b{font-size:18px}
  .pg-scale button span{font-size:8px;letter-spacing:.04em}
  .pg-rq{padding:14px 14px}
  .pg-rate .pg-submit{padding:14px}
  .pg-rate .pg-err{margin:0 14px}
  .pg-rate .pg-btn{width:100%}
}