/* BOX² landing — styles transcribed from the Paper boards "Landing v2" (desktop 1440) and
   "Landing v2 — Mobile" (390). Every colour/size/shadow below is the board's computed value, not a
   re-design; the boards are the acceptance test. One breakpoint (860px) flips desktop → mobile layout. */

/* fonts: the game's own self-hosted faces (served from /fonts with the immutable cache tier) */
@font-face{font-family:'Fugaz One';font-style:normal;font-weight:400;font-display:swap;src:url('/fonts/fugaz-one-400-latin.woff2') format('woff2')}
@font-face{font-family:'Anton';font-style:normal;font-weight:400;font-display:swap;src:url('/fonts/anton-400-latin.woff2') format('woff2')}
@font-face{font-family:'Saira';font-style:normal;font-weight:500;font-display:swap;src:url('/fonts/saira-500-latin.woff2') format('woff2')}
@font-face{font-family:'Saira';font-style:normal;font-weight:700;font-display:swap;src:url('/fonts/saira-700-latin.woff2') format('woff2')}
@font-face{font-family:'Saira';font-style:normal;font-weight:800;font-display:swap;src:url('/fonts/saira-800-latin.woff2') format('woff2')}
@font-face{font-family:'Saira Condensed';font-style:normal;font-weight:600;font-display:swap;src:url('/fonts/saira-condensed-600-latin.woff2') format('woff2')}
@font-face{font-family:'Saira Condensed';font-style:normal;font-weight:700;font-display:swap;src:url('/fonts/saira-condensed-700-latin.woff2') format('woff2')}
@font-face{font-family:'Saira Condensed';font-style:normal;font-weight:800;font-display:swap;src:url('/fonts/saira-condensed-800-latin.woff2') format('woff2')}

:root{
  --ink:#EAF0FF; --bg:#04060E; --dark:#0D0D10; --cream:#F3EAD9;
  --pink:#FF3D84; --blue:#2FD0FF; --lime:#93E83A; --you:#2F6BFF;
  --gasket:#05070F;             /* the dark separation layer under every pink/blue heading shadow */
  --font-b:'Saira',system-ui,sans-serif; --font-c:'Saira Condensed',system-ui,sans-serif;
  --font-d:'Anton',system-ui,sans-serif; --font-w:'Fugaz One',system-ui,sans-serif;
  /* the form column is sized to what the FIELDS actually hold (2026-07-20, Paulo) — ~34 chars of email
     at 16px, not the width of the page. Every ticket width derives from it, desktop and mobile. */
  --field-w:320px; --stub-w:190px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;overflow-x:clip}   /* the clip lives here, not on .page, so a full-bleed band can escape .page's 1440 rail */
body{background:var(--bg);color:var(--ink);font-family:var(--font-b);font-size:12px;line-height:16px;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-synthesis:none;
  /* the board's BG texture frame: two soft blue radial pools over near-black */
  background-image:radial-gradient(circle farthest-corner at 18% 0% in oklab, oklab(32.5% -0.005 -0.146 / 90%) 0%, oklab(12.4% -.0005 -0.020 / 0%) 60%),
                   radial-gradient(circle farthest-corner at 100% 8% in oklab, oklab(32.5% -0.005 -0.146 / 55%) 0%, oklab(12.4% -.0005 -0.020 / 0%) 55%);
  background-repeat:no-repeat;background-size:100% 1600px, 100% 1200px;background-position:top, top}
.page{max-width:1440px;margin:0 auto}
img{display:block;max-width:100%;height:auto}
a{text-decoration:none;color:inherit}

/* ---------- wordmark ---------- */
.wordmark{display:flex;align-items:baseline;gap:2px;font-family:var(--font-w);color:var(--ink)}
.wm-box{font-size:38px;line-height:46px;text-shadow:var(--gasket) 1px 1px 0, #FF3D84 3px 3px 0}   /* bumped a weight class (2026-07-17, Paulo); gasket layer added 2026-07-20 so the logo gets the same black separation the titles have */
.wm-two{font-size:24px;line-height:30px;position:relative;top:-13px;text-shadow:var(--gasket) .7px .7px 0, #FF3D84 2px 2px 0}
.wordmark-sm .wm-box{font-size:28px;line-height:34px;text-shadow:var(--gasket) .7px .7px 0, #FF3D84 2px 2px 0}
.wordmark-sm .wm-two{font-size:18px;line-height:22px;top:-9px;text-shadow:var(--gasket) .5px .5px 0, #FF3D84 1.5px 1.5px 0}

/* ---------- header ---------- */
.nav{display:flex;align-items:center;justify-content:space-between;padding:34px 72px}
.nav-cta{display:flex;align-items:center;background:var(--lime);color:var(--dark);border:2px solid var(--dark);
  border-radius:3px;box-shadow:#00000080 3px 3px 0;padding:11px 22px;rotate:-2deg;
  font:italic 800 14px/18px var(--font-b);letter-spacing:.02em;text-transform:uppercase}

/* ---------- hero ---------- */
.hero{display:flex;align-items:flex-start;gap:40px;padding:36px 72px 10px}
.hero-copy{display:flex;flex-direction:column;flex-shrink:0;gap:26px;padding-top:18px;width:660px}
.badge-row{display:flex;align-items:center;gap:10px}
.dot{width:10px;height:10px;border-radius:50%;background:var(--lime);flex-shrink:0}
.badge-label{color:var(--lime);font:700 14px/18px var(--font-c);letter-spacing:.22em;text-transform:uppercase}
.headline{display:flex;flex-direction:column;gap:6px}
.hl{font:400 92px/92% var(--font-d);letter-spacing:.005em;text-transform:uppercase;color:var(--ink);display:block}
.hl-pink{rotate:-1.2deg;text-shadow:var(--gasket) 2px 2px 0, var(--pink) 7px 7px 0}
.hl-blue{rotate:.8deg;text-shadow:var(--gasket) 2px 2px 0, var(--blue) 7px 7px 0}
.hl-lime{rotate:-.6deg;text-shadow:var(--gasket) 2px 2px 0, var(--lime) 7px 7px 0}
.hero-sub{color:#EAF0FFD6;font:500 19px/155% var(--font-b);max-width:560px}
/* THE HERO CLUSTER — three real cards + CSS, not a baked export (2026-07-20, Paulo). Every number below
   is lifted verbatim from the Paper board "Landing v2" > Card cluster (600x540, transform-origin 0 0),
   so the arrangement is the design's, not a reconstruction. The one thing dropped is each sticker's
   5px #F3EAD9 border + 10px radius — that cream band was the "border" on the hero, and it is now gone
   from the Paper file too. Offsets are % of the 600x540 box and shadows are cqw, so the whole cluster
   scales as one piece; the faces keep their own alpha corners, so the sticker shadow is a drop-shadow
   that follows the card silhouette instead of a rectangle. */
.hero-cards{position:relative;flex-shrink:0;width:600px;aspect-ratio:600/540;container-type:inline-size}
.h-card{position:absolute;transform-origin:0 0;filter:drop-shadow(1.333cqw 1.667cqw 0 #00000073)}
.h-messi {left:1.667%;top:12.963%;width:32.667%;height:58.889%;rotate:-9deg}
.h-simon {left:63%;    top:16.667%;width:32.667%;height:58.889%;rotate:-4deg}
.h-mbappe{left:30%;    top:3.704%; width:36%;    height:64.815%;rotate:5deg}
.h-vs{position:absolute;left:42.5%;top:62.963%;width:11.667%;aspect-ratio:1;transform-origin:0 0;rotate:-8deg;
  display:flex;align-items:center;justify-content:center;border-radius:50%;
  background:var(--lime);border:.5cqw solid var(--dark);box-shadow:#00000080 .667cqw .833cqw 0;
  color:var(--dark);font:400 4cqw/5cqw var(--font-d);text-transform:uppercase}
.h-tape{position:absolute;transform-origin:0 0;box-shadow:#0000004D 0 .5cqw 1cqw}
.h-tape-1{left:23.833%;top:10.556%;width:20%;   height:6.296%;rotate:-32deg;background:#E9DCAFE0}
.h-tape-2{left:71.667%;top:10%;    width:18.333%;height:5.926%;rotate:28deg; background:#FF3D84B3}

/* ---------- waitlist ticket ---------- */
.waitlist{display:flex;flex-direction:column;align-items:center;gap:16px;padding:34px 72px 60px}
/* the ticket is TWO paper pieces (2026-07-20): the stub owns its cream + the perforated edge; the form
   face carries its own. The container is transparent — so when the form tears off, the dark page shows
   through the gap, and the landed receipt rests slightly low + askew like a genuinely torn piece. */
/* the form STACKS at every width (2026-07-20, Paulo: desktop should read like mobile) — so the ticket is
   only ever as wide as the stub + one field column + the form face's own 26px padding. */
.ticket{display:flex;position:relative;width:min(100%,calc(var(--stub-w) + var(--field-w) + 52px))}
.ticket-1{rotate:-.6deg}
.rot-r05{rotate:.5deg}
/* PERFORATION = semicircle BITES cut out of the tear edge (2026-07-20, Paulo — inset dots "don't look
   like teeth"). CSS `dotted`/`dashed` borders both render as square dashes, and a mask would clip the
   ticket's hard box-shadow — so the cream BACKGROUND itself is composed of an edge strip of
   transparent-circle tiles (the bites, centered ON the edge) + a solid fill for the rest. */
.stub{display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;gap:4px;flex-shrink:0;
  width:var(--stub-w);padding:22px;border-radius:6px 0 0 6px;
  background:radial-gradient(circle at 100% 50%,#0000 3.4px,var(--cream) 3.9px) 100% 50%/8px 12px repeat-y,
    linear-gradient(var(--cream) 0 0) 0 0/calc(100% - 8px) 100% no-repeat;
  box-shadow:#00000080 9px 10px 0}
.stub-brand{color:var(--dark);font:400 34px/38px var(--font-w)}
.stub-pass{color:#7A1339;font:800 13px/16px var(--font-c);letter-spacing:.16em;text-transform:uppercase;margin-top:auto}   /* auto margin = the brand rides the top, pass + number sit on the bottom */
.stub-no{color:#5A5646;font:600 12px/16px var(--font-c);letter-spacing:.1em;text-transform:uppercase;margin-top:6px}
/* the FORM is the two-faced piece (referral rip+flip, 2026-07-19, Paulo: "it's the form that transforms
   into the shareable receipt, which also acts as the success state"): front = the inputs, back = the
   receipt. On signup it tears along the perforation (which lives here, so the line stays printed) and
   turns over. The FRONT stays in normal flow so the ticket keeps its exact height through the flip. */
.fields{flex:1 1 0;perspective:1100px}
.fields-inner{position:relative;transform-style:preserve-3d}
/* each face is its own cream sheet (bg + padding + the ticket's hard shadow) — box-shadow, NOT filter:
   iOS Safari drops animated/filter shadows on transformed elements (the tut-focus lesson) */
.fields-front{position:relative;display:flex;flex-direction:column;align-items:stretch;gap:14px;padding:22px 26px 24px;
  background:radial-gradient(circle at 0 50%,#0000 3.4px,var(--cream) 3.9px) 0 50%/8px 12px repeat-y,
    linear-gradient(var(--cream) 0 0) 100% 0/calc(100% - 8px) 100% no-repeat;
  border-radius:0 6px 6px 0;box-shadow:#00000080 9px 10px 0;backface-visibility:hidden;-webkit-backface-visibility:hidden}
/* DESKTOP FLIPS ABOUT X (2026-07-20, Paulo: "the perforation shouldn't change sides"). The stub is on the
   LEFT here, so a rotateY spin mirrors left/right and lands the bitten edge on the wrong side; tumbling
   top-over-bottom preserves it. Phones are the mirror case — stub on TOP, so they keep rotateY (see the
   700px block). Either way the back face's own pre-rotation cancels the flip, so its text reads normally. */
.fields-back{position:absolute;inset:0;transform:rotateX(180deg);backface-visibility:hidden;-webkit-backface-visibility:hidden;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;text-align:center;padding:22px 26px 24px;
  background:radial-gradient(circle at 0 50%,#0000 3.4px,var(--cream) 3.9px) 0 50%/8px 12px repeat-y,
    linear-gradient(var(--cream) 0 0) 100% 0/calc(100% - 8px) 100% no-repeat;
  border-radius:0 6px 6px 0;box-shadow:#00000080 9px 10px 0}   /* SAME sides as the front: the back face's own 180° pre-rotation cancels the flip (that's why its text reads normally), so nothing mirrors */
.fields.ripped .fields-inner{animation:ripFlip 1.4s cubic-bezier(.4,.1,.3,1) forwards}
/* both pieces are bitten from the start, so the perforation reads as a real tear line while intact
   (2026-07-20, Paulo: the teeth were "missing on the detachable side") — the rip needs no bite override. */
.fields.ripped input,.fields.ripped .wl-btn{pointer-events:none}
/* the RIP (reworked 2026-07-20, Paulo: "no ripping off of the stub!"): grip → the piece TEARS off the
   perforation, sagging as one corner lets go (the dark page shows through the opening gap) → jerks free
   and floats → turns over → lands slightly LOW and ASKEW, leaving a permanent torn slit at the tear line. */
@keyframes ripFlip{
  0%{transform:none;animation-timing-function:cubic-bezier(.5,0,.7,.4)}
  10%{transform:translateX(3px);animation-timing-function:cubic-bezier(.3,.7,.4,1)}
  28%{transform:translateX(16px) rotate(2.6deg);animation-timing-function:cubic-bezier(.3,.7,.4,1)}
  42%{transform:translateX(32px) rotate(-1.8deg);animation-timing-function:cubic-bezier(.35,.1,.25,1)}
  55%{transform:translateX(36px) rotate(1.2deg);animation-timing-function:cubic-bezier(.4,.1,.3,1)}
  100%{transform:translateX(11px) rotate(.7deg) rotateX(180deg)}
}
.ticket:has(.fields.ripped) .stub{animation:stubJolt .6s cubic-bezier(.3,.7,.3,1) .16s both}
@keyframes stubJolt{
  0%{transform:none}
  35%{transform:translate(-3px,-1px) rotate(-.7deg)}
  65%{transform:translate(1.5px,.5px) rotate(.3deg)}
  100%{transform:none}
}
.field{display:flex;flex-direction:column;gap:6px}   /* both fields simply fill the stacked column (= --field-w) */
.field-label{color:#5A5646;font:700 12px/15px var(--font-c);letter-spacing:.14em;text-transform:uppercase}
.field input{height:38px;width:100%;background:#fff;border:2px solid var(--dark);border-radius:3px;
  font:600 16px/1 var(--font-b);color:var(--dark);padding:0 10px;outline:none}   /* ≥16px REQUIRED: anything smaller makes iOS Safari auto-zoom the viewport on focus (2026-07-18, Paulo) */
.field input:focus{border-color:#7A1339}
.wl-btn{display:flex;align-items:center;justify-content:center;height:38px;padding:0 24px;margin-top:4px;width:100%;flex-shrink:0;
  border:2px solid var(--dark);border-radius:3px;cursor:pointer;
  font:italic 800 14px/18px var(--font-b);letter-spacing:.02em;text-transform:uppercase}
.wl-pink{background:var(--pink);color:var(--ink)}
.wl-lime{background:var(--lime);color:var(--dark)}
.wl-btn:disabled{cursor:default;filter:saturate(.6) brightness(.92)}
/* the note UNDER the ticket carries the disclosure (2026-07-20, Paulo) — it moved off the ticket face and
   took over this slot from the launch-email line, which is gone. Both tickets. */
/* THE DISCLOSURE VOICE — one rule, both places (2026-07-20, Paulo: the note under the ticket should read
   like the footer's). Tiny condensed caps on the dark ground; .foot-legal shares it verbatim rather than
   restating the values. */
.foot-legal,.wl-note{color:#EAF0FF73;font:700 9px/12px var(--font-c);letter-spacing:.14em;text-transform:uppercase}
.wl-note{padding-left:.14em}   /* letter-spacing leaves a trailing gap on the last glyph; pad the head so the CENTRED line actually reads centred (same trick as .rc-code) */
/* the receipt (the form's back face — also the success state): a proper matchday stub back (2026-07-20,
   Paulo: "more exciting and shareable") — seat metadata, a printed barcode with the code as its
   human-readable line, and an inked ADMITTED stamp. */
.rc-main{display:contents}   /* its children join the ticket column so the barcode slots in ABOVE the buttons (2026-07-20, Paulo) */
.rc-title{color:#7A1339;font:italic 800 16px/20px var(--font-b);letter-spacing:.02em;text-transform:uppercase}
.rc-meta{display:flex;gap:16px}
.rc-chip{display:flex;flex-direction:column;align-items:center;gap:1px;color:var(--dark);font:700 13px/15px var(--font-c);letter-spacing:.08em;text-transform:uppercase}
.rc-chip b{color:#5A5646;font:700 8px/10px var(--font-c);letter-spacing:.16em}
.rc-actions{display:flex;align-items:center;gap:8px;order:1;margin-top:0}
.rc-btn{display:flex;align-items:center;justify-content:center;height:26px;padding:0 11px;cursor:pointer;
  border:2px solid var(--dark);border-radius:3px;background:transparent;color:var(--dark);
  font:italic 800 10px/13px var(--font-b);letter-spacing:.02em;text-transform:uppercase;text-decoration:none}
.rc-x{background:var(--dark);color:var(--cream)}
.rc-bar{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;flex-shrink:0;width:min(300px,86%)}
.rc-barcode{width:100%;height:42px;background:repeating-linear-gradient(90deg,
  var(--dark) 0 2px, transparent 2px 4px, var(--dark) 4px 7px, transparent 7px 9px,
  var(--dark) 9px 10px, transparent 10px 14px, var(--dark) 14px 16px, transparent 16px 17px,
  var(--dark) 17px 19px, transparent 19px 23px)}
.rc-code{color:var(--dark);font:700 13px/16px var(--font-c);letter-spacing:.34em;text-transform:uppercase;padding-left:.34em}
.wl-err{color:var(--pink);font:700 12px/16px var(--font-c);letter-spacing:.08em;text-transform:uppercase;display:none}

@keyframes ripFlipX{
  0%{transform:none;animation-timing-function:cubic-bezier(.5,0,.7,.4)}
  10%{transform:translateY(3px);animation-timing-function:cubic-bezier(.3,.7,.4,1)}
  28%{transform:translateY(16px) rotate(-4deg);animation-timing-function:cubic-bezier(.3,.7,.4,1)}
  42%{transform:translateY(32px) rotate(2.4deg);animation-timing-function:cubic-bezier(.35,.1,.25,1)}
  55%{transform:translateY(36px) rotate(-1.4deg);animation-timing-function:cubic-bezier(.4,.1,.3,1)}
  100%{transform:translateY(11px) rotate(-1deg) rotateY(180deg)}
}
@media (prefers-reduced-motion:reduce){
  .fields.ripped .fields-inner{animation:none;transform:translateX(8px) rotateX(180deg)}
  .ticket:has(.fields.ripped) .stub{animation:none}
}
@media (prefers-reduced-motion:reduce) and (max-width:700px){
  .fields.ripped .fields-inner{transform:translateY(8px) rotateY(180deg)}
}

/* ---------- shared display type ---------- */
.h2{font:400 52px/98% var(--font-d);text-transform:uppercase;color:var(--ink)}
.h2-blue{text-shadow:var(--gasket) 2px 2px 0, var(--blue) 6px 6px 0}
.h2-pink{text-shadow:var(--gasket) 2px 2px 0, var(--pink) 6px 6px 0}
.h2-lime{text-shadow:var(--gasket) 2px 2px 0, var(--lime) 6px 6px 0}
.rot-l{rotate:-.7deg}.rot-r{rotate:.6deg}.rot-l1{rotate:-.5deg}.rot-l2{rotate:-.8deg}
.rot-r2{rotate:2deg}.rot-l1p{rotate:-1deg}
.body-copy{color:#EAF0FFD1;font:500 18px/155% var(--font-b)}

/* ---------- deck ---------- */
.deck{display:flex;flex-direction:column;align-items:stretch;gap:30px;padding:20px 0 10px}   /* column: copy above, full-bleed band below */
.deck-copy{display:flex;flex-direction:column;flex-shrink:0;gap:20px;width:100%;padding-inline:72px;order:-1}   /* DOM puts the cards first; order:-1 lifts the copy above the band */
.deck-copy .body-copy{max-width:500px}
.squad-row{flex:1 1 0}
/* NEVER CONSTRAIN / CROP A CARD (2026-07-20, Paulo). The faces carry their own rounded corners in the
   alpha channel and their own printed edge — so they get NO aspect-ratio, NO clip box and NO scale: just
   a width, natural height, and a drop-shadow that follows the actual card silhouette instead of a box. */

/* THE COLLECTION BAND (2026-07-20, Paulo: "2 rows that continuously move across the screen") — a
   full-bleed marquee replacing the static wall. Each row's card sequence is rendered --m-copies times and
   the track slides exactly one sequence (-100%/copies), so the next copy lands precisely where the last
   began and the loop is seamless. COPY COUNT IS NOT COSMETIC: a track sitting at offset -S covers only
   [-S, T-S], so the row runs out of cards on the right unless (copies-1) x sequence >= the container
   width. Two copies left a bare strip on any viewport past one sequence (~1242px on the 9-card row, which
   is why the reversed row showed it immediately — reverse starts at that worst offset). Four copies cover
   to 4140px / 3726px, i.e. past ultrawide. If you change the copy count, change --m-copies with it. The gap is
   a per-card margin-right rather than flex `gap` — with flex gap the last card has none, -50% lands half
   a gap off, and the loop visibly stutters once a cycle. Rows run opposite ways so the band reads as
   motion rather than a conveyor. */
.mosaic{--m-card:128px;--m-gap:10px;--m-copies:4;display:flex;flex-direction:column;gap:var(--m-gap);
  width:100vw;margin-left:calc(50% - 50vw);   /* breaks out of .page's 1440 rail to the true viewport edge */
  -webkit-mask-image:linear-gradient(90deg,#0000,#000 7%,#000 93%,#0000);
  mask-image:linear-gradient(90deg,#0000,#000 7%,#000 93%,#0000)}   /* the ends fade instead of hard-cutting a card */
.m-row{overflow:hidden}
.m-track{display:flex;width:max-content;animation:drift 68s linear infinite;will-change:transform}
.m-row-rev .m-track{animation-direction:reverse}
@keyframes drift{from{transform:translateX(0)}to{transform:translateX(calc(-100% / var(--m-copies)))}}
.m-card{width:var(--m-card);flex-shrink:0;margin-right:var(--m-gap)}
.m-card img{width:100%;height:auto;display:block;filter:drop-shadow(0 7px 12px rgba(0,0,0,.55))}

/* ---------- angles ---------- */
.angles{display:flex;gap:30px;padding:64px 72px 10px}
.angle{flex:1 1 0;display:flex;flex-direction:column;gap:14px;background:#FFFFFF0B;border:2px solid #EAF0FF24;
  border-radius:4px;padding:34px 26px 28px}
.angle-lime{border-left:6px solid var(--lime)}
.angle-blue{border-left:6px solid var(--blue)}
.angle-pink{border-left:6px solid var(--pink)}
.h3{font:400 29px/102% var(--font-d);text-transform:uppercase;color:var(--ink)}
.h3-lime{text-shadow:var(--gasket) 1px 1px 0, var(--lime) 4px 4px 0}
.h3-blue{text-shadow:var(--gasket) 1px 1px 0, var(--blue) 4px 4px 0}
.h3-pink{text-shadow:var(--gasket) 1px 1px 0, var(--pink) 4px 4px 0}
.angle-copy{color:#EAF0FFC7;font:500 16.5px/150% var(--font-b)}
.works{align-self:flex-start;margin-top:2px;padding:5px 12px;border:1.5px dashed #EAF0FF80;border-radius:20px;
  color:#EAF0FFA6;font:700 11px/14px var(--font-c);letter-spacing:.12em;text-transform:uppercase}

/* ---------- evolving ---------- */
.evolving{display:flex;align-items:flex-start;gap:56px;padding:56px 72px 10px}
.evolving-copy{display:flex;flex-direction:column;flex-shrink:0;gap:20px;width:520px}
.evolving-copy .body-copy{max-width:480px}
.nations{display:flex;flex-wrap:nowrap;gap:26px;flex:1 1 0;padding-top:14px;align-items:flex-start}   /* ONE row, three tilted cards, NO overlap (2026-07-18, Paulo) — the gap also clears the right-hanging chips */
.evolving-copy{order:-1}   /* DOM puts the cards first (stacked tiers show them above the title); wide tiers keep copy left */
.nation{flex:1 1 0;min-width:0;max-width:165px;display:flex;flex-direction:column;align-items:center}   /* cap trimmed 215 -> 165 so the fan reads at the same scale as the wall + hero cards (2026-07-20, Paulo: "too big") */
.nation:nth-child(1){z-index:3}
.nation:nth-child(2){z-index:2}
.nation:nth-child(3){z-index:1}   /* LEFT card on top: the chips hang off each card's RIGHT edge — descending z keeps every chip stack visible over its neighbour */
.nation:nth-child(1) .gcard{rotate:-4deg;translate:0 10px}
.nation:nth-child(2) .gcard{rotate:1deg}
.nation:nth-child(3) .gcard{rotate:4.5deg;translate:0 14px}
/* LIVE in-game cards (2026-07-18, Paulo: "actual cards with in-game badges"): the real colors card faces
   with the game's own stat chips (up-pennant ATK / shield DEF / stop-octagon SAVE — shapes and ink stroke
   verbatim from render/cards.ts + 04-card.css) hanging off the edges, numbers ticking and ability pips
   cycling on a staggered loop — form on the pitch, moving the card. */
/* NO radius, NO border, NO fill behind the art (2026-07-20, Paulo): the face already carries its own
   rounded silhouette in the alpha channel, so a radius would round it twice and a background-colour would
   square the corners off behind it. drop-shadow (not box-shadow) so the shadow follows that silhouette. */
.gcard{position:relative;width:100%;aspect-ratio:300/486;container-type:inline-size;
  background-size:cover;background-position:center top;filter:drop-shadow(0 12px 22px rgba(0,0,0,.55))}
.gc-stats{position:absolute;right:0;bottom:7%;translate:38% 0;display:flex;flex-direction:column;gap:2cqw;align-items:center}
/* chip/pip/number sizing = the game's clamps VERBATIM (04-card.css: badges track the card in cqw) —
   .gcard is the container, so proportions hold at every card size (2026-07-18, Paulo: "respect the
   in-game proportions") */
.chip{position:relative;width:clamp(14px,33cqw,64px);height:clamp(14px,33cqw,64px);display:flex;align-items:center;justify-content:center;
  filter:drop-shadow(1px 1px 0 rgba(0,0,0,.85))}
.chip > svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.chip polygon{stroke:#0b0b09;stroke-width:7.5;stroke-linejoin:round}
.chip-atk polygon{fill:var(--pink)}
.chip-def polygon{fill:var(--blue)}
.chip-save polygon{fill:var(--lime)}
/* numbers: the in-game recipe VERBATIM (04-card + 07-chrome, 2026-07-18 "exactly like in-game"):
   Anton 400 (--font-num), ~0.55× the chip; ATK white tucked BELOW the pennant point, DEF dark tucked
   ABOVE the shield point, SAVE dark. */
.chip b{position:relative;z-index:1;font:400 clamp(8px,18cqw,36px)/1 var(--font-d);color:#14110A}
.chip-atk b{color:#fff;transform:translateY(17%)}
.chip-def b{color:#06122e;transform:translateY(-13%)}
.chip-save b{color:#06122e}
.tick{display:grid;place-items:center}
.tick span{grid-area:1/1;opacity:0}
.tick span:nth-child(1){animation:cycA 9s infinite}
.tick span:nth-child(2){animation:cycB 9s infinite}
.tick span:nth-child(3){animation:cycC 9s infinite}
.chip.anim{animation:chipPop 3s infinite}
.pipcycle{position:absolute;top:5%;right:0;translate:38% 0;width:clamp(15px,30cqw,58px);height:clamp(15px,30cqw,58px)}
.pip-f{position:absolute;inset:0;opacity:0;filter:drop-shadow(1px 1px 0 rgba(0,0,0,.82))}
.pip-f:nth-child(1){animation:cycA 9s infinite}
.pip-f:nth-child(2){animation:cycB 9s infinite}
.pip-f:nth-child(3){animation:cycC 9s infinite}
.pip-f svg{position:absolute;overflow:visible}
.pip-f .pip-bg{inset:0;width:100%;height:100%}
.pip-f .pip-bg polygon{stroke:#0b0b09;stroke-width:7.5;stroke-linejoin:round}
.pip-atk .pip-bg polygon{fill:var(--pink)}
.pip-def .pip-bg polygon{fill:var(--blue)}
.pip-f .pip-ico{inset:20%;width:60%;height:60%}
.pip-atk .pip-ico{fill:#fff}          /* white reads on magenta — in-game verbatim */
.pip-def .pip-ico{fill:#06122e}       /* dark reads on cyan — in-game verbatim */
.nation:nth-child(2) .anim, .nation:nth-child(2) .tick span, .nation:nth-child(2) .pip-f{animation-delay:-.75s}   /* NEGATIVE delays: phase-shift with no dead first seconds (positive delays left chips EMPTY until they kicked in) */
.nation:nth-child(3) .anim, .nation:nth-child(3) .tick span, .nation:nth-child(3) .pip-f{animation-delay:-1.5s}
.nation:nth-child(4) .anim, .nation:nth-child(4) .tick span, .nation:nth-child(4) .pip-f{animation-delay:-2.25s}
@keyframes cycA{0%,30%{opacity:1}33%,97%{opacity:0}100%{opacity:1}}
@keyframes cycB{0%,32%{opacity:0}34%,63%{opacity:1}66%,100%{opacity:0}}
@keyframes cycC{0%,65%{opacity:0}67%,96%{opacity:1}98%,100%{opacity:0}}
@keyframes chipPop{0%{transform:scale(1)}2%{transform:scale(1.22)}9%{transform:scale(1)}100%{transform:scale(1)}}
@media (prefers-reduced-motion:reduce){
  .m-track{animation:none !important}
  .tick span,.pip-f,.chip.anim{animation:none !important}
  .tick span:nth-child(1),.pip-f:nth-child(1){opacity:1}
}
.rot-l1{rotate:-1deg}

/* ---------- steps ---------- */
.steps-wrap{display:flex;flex-direction:column;gap:22px;padding:60px 72px 10px}
.steps-title{align-self:flex-start}
.steps{display:flex;gap:18px;padding:14px 72px 50px}
.step{flex:1 1 0;display:flex;flex-direction:column;gap:12px;background:#FFFFFF0A;border-top:3px solid var(--lime);
  border-radius:5px;padding:18px 14px}
.step-no{color:var(--lime);font:400 15px/20px var(--font-d)}   /* size swapped with the heading (2026-07-18, Paulo) */
.step-h{color:var(--ink);font:800 22px/115% var(--font-c);letter-spacing:.04em;text-transform:uppercase}
.step-p{color:#EAF0FF9E;font:400 14.5px/145% var(--font-b)}

/* ---------- closing ---------- */
/* the tail sections sit OUTSIDE .page (2026-07-20, Paulo: "background must also be full bleed") — .page is
   max-width:1440 + overflow-x:clip, so nothing inside it can reach the viewport edge on a wide monitor.
   The section runs edge to edge and an inner wrapper keeps the CONTENT on the same 1440 rail as the rest
   of the page. Bottom padding is 0 and .foot has no top margin, so the gradient runs straight into the
   footer rule with no dead strip between them. */
.closing{overflow-x:clip;margin-top:20px;padding:80px 0 50px;
  background:linear-gradient(in oklab 180deg, oklab(32.5% -0.005 -0.146 / 0%) 0%, oklab(32.5% -0.005 -0.146 / 35%) 100%)}
.closing-inner{display:flex;flex-direction:column;align-items:center;gap:24px;max-width:1440px;margin:0 auto;padding-inline:72px}
.kicker{color:var(--pink);font:800 14px/18px var(--font-c);letter-spacing:.24em;text-transform:uppercase}
.closing-h{font:400 76px/96% var(--font-d);text-transform:uppercase;color:var(--ink);text-align:center;
  text-shadow:var(--gasket) 2px 2px 0, var(--blue) 7px 7px 0}
.closing-sub{color:#EAF0FFCC;font:500 18px/150% var(--font-b);max-width:540px;text-align:center}
.closing .ticket{margin-top:14px}
.closing .wl-note{margin-top:14px}

/* ---------- footer ---------- */
.foot{padding:56px 0 40px;border-top:1px solid #EAF0FF24}   /* no margin-top: the rule sits flush against the gradient above it */
.foot-inner{display:flex;flex-direction:column;gap:26px;max-width:1440px;margin:0 auto;padding-inline:72px}
.foot-row{display:flex;align-items:center;justify-content:space-between}   /* just the wordmark now (menu links removed 2026-07-17, Paulo — boards updated to match) */
/* .foot-legal's type is declared with .wl-note up in the waitlist block — one disclosure voice, one rule. */

/* =========================================================================================
   LANDSCAPE / SMALL TABLET (the "Landing v2 — Landscape" board, 956): the middle the desktop's
   fixed 660/600/820 columns can't reach — landscape phones (~956×440, the iPhone-in-landscape
   report, 2026-07-17) and portrait tablets. Fluid hero split (copy flex:1 + 330px cluster),
   near-native ticket, 3-across angles, 4-across nations, 3×2 steps. Applies 700–1180.
   ========================================================================================= */
@media (max-width:1180px){
  .nav{padding:28px 44px}
  .hero{gap:32px;padding:24px 44px 10px}
  .hero-copy{width:auto;flex:1 1 0;padding-top:8px}
  .hl{font-size:56px}
  .hl-pink{text-shadow:var(--gasket) 1.5px 1.5px 0, var(--pink) 5px 5px 0}
  .hl-blue{text-shadow:var(--gasket) 1.5px 1.5px 0, var(--blue) 5px 5px 0}
  .hl-lime{text-shadow:var(--gasket) 1.5px 1.5px 0, var(--lime) 5px 5px 0}
  .hero-sub{font-size:17px}
  .hero-cards{width:330px}

  .waitlist{padding:28px 44px 44px}

  .deck{gap:26px;padding:20px 0 10px}
  .deck-copy{padding-inline:44px}
  .h2{font-size:40px}
  .h2-blue{text-shadow:var(--gasket) 1.5px 1.5px 0, var(--blue) 4.5px 4.5px 0}
  .h2-pink{text-shadow:var(--gasket) 1.5px 1.5px 0, var(--pink) 4.5px 4.5px 0}
  .h2-lime{text-shadow:var(--gasket) 1.5px 1.5px 0, var(--lime) 4.5px 4.5px 0}
  .deck-copy .h2{font-size:36px}   /* the single-line title fits the 360px column */


  .angles{gap:20px;padding:44px 44px 10px}
  .angle{padding:26px 22px 22px}
  .h3{font-size:24px}
  .h3-blue{text-shadow:var(--gasket) 1px 1px 0, var(--blue) 3px 3px 0}
  .h3-pink{text-shadow:var(--gasket) 1px 1px 0, var(--pink) 3px 3px 0}
  .h3-lime{text-shadow:var(--gasket) 1px 1px 0, var(--lime) 3px 3px 0}
  .angle-copy{font-size:16px}

  .evolving{gap:36px;padding:44px 44px 10px}
  .evolving-copy{width:340px}

  .steps-wrap{padding:44px 44px 10px}
  .steps{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;padding:10px 0 40px;align-items:stretch}

  .closing{padding:56px 0 44px}
  .closing-inner{padding-inline:44px}
  .closing-h{font-size:52px;text-shadow:var(--gasket) 1.5px 1.5px 0, var(--blue) 5px 5px 0}

  .foot{padding:40px 0 32px}
  .foot-inner{padding-inline:44px}
}

/* =========================================================================================
   MOBILE (the "Landing v2 — Mobile" board, 390): one column, cluster scaled, 2×2 nations,
   2×3 steps, stacked ticket. Flips below 700 (the landscape tier owns 700–1180).
   ========================================================================================= */
@media (max-width:700px){
  .nav{padding:20px 20px}
  .wm-box{font-size:32px;line-height:38px;text-shadow:var(--gasket) .7px .7px 0, #FF3D84 2px 2px 0}
  .wm-two{font-size:20px;line-height:25px;top:-10px;text-shadow:var(--gasket) .5px .5px 0, #FF3D84 1.5px 1.5px 0}
  .nav-cta{padding:9px 16px;font-size:12px;line-height:16px}

  .hero{flex-direction:column;gap:28px;padding:18px 20px 10px}
  .hero-copy{width:100%;padding-top:0;gap:20px}
  .hl{font-size:min(16.5vw,70px)}   /* spread to fill the column on phones (2026-07-17, Paulo) */
  .hl-pink{text-shadow:var(--gasket) 1.5px 1.5px 0, var(--pink) 4.5px 4.5px 0}
  .hl-blue{text-shadow:var(--gasket) 1.5px 1.5px 0, var(--blue) 4.5px 4.5px 0}
  .hl-lime{text-shadow:var(--gasket) 1.5px 1.5px 0, var(--lime) 4.5px 4.5px 0}
  .hero-sub{font-size:17px}
  .hero-cards{width:min(360px,100%);align-self:center}   /* the cluster scales off its own aspect-ratio box */

  .waitlist{padding:26px 20px 44px}
  .ticket{width:min(100%,calc(var(--field-w) + 40px));flex-direction:column}
  .stub{display:grid;grid-template-columns:1fr auto;align-items:center;row-gap:2px;width:100%;padding:16px 20px;
    border-radius:6px 6px 0 0;
    background:radial-gradient(circle at 50% 100%,#0000 3.4px,var(--cream) 3.9px) 50% 100%/12px 8px repeat-x,
      linear-gradient(var(--cream) 0 0) 0 0/100% calc(100% - 8px) no-repeat}
  .stub-brand{grid-row:1 / span 2;font-size:30px;line-height:34px}
  .stub-pass{grid-column:2;justify-self:end;text-align:right}
  .stub-no{grid-column:2;justify-self:end;text-align:right;margin-top:0}
  .fields-front,.fields-back{   /* phones: the bite runs along the TOP edge, under the stacked stub */
    background:radial-gradient(circle at 50% 0,#0000 3.4px,var(--cream) 3.9px) 50% 0/12px 8px repeat-x,
      linear-gradient(var(--cream) 0 0) 0 100%/100% calc(100% - 8px) no-repeat}
  .fields-front{flex-direction:column;align-items:stretch;gap:14px;padding:18px 20px 24px;border-radius:0 0 6px 6px}
  .fields-back{transform:rotateY(180deg);padding:18px 20px 24px;border-radius:0 0 6px 6px}   /* stub is on TOP here, so the spin goes back to Y and the teeth stay put */
  .stub-pass{margin-top:0}       /* the stub is a GRID here, so the desktop auto-margin must not leak in */
  .rc-title{font-size:19px;line-height:23px}
  .rc-btn{height:32px;padding:0 14px;font-size:12px;line-height:15px}
  .fields.ripped .fields-inner{animation-name:ripFlipX}

  .deck{gap:24px;padding:26px 0 10px}
  .deck-copy{padding-inline:20px}
  .deck-copy{order:-1}   /* copy stays above the band on phones too */
  .h2{font-size:34px}
  .h2-blue{text-shadow:var(--gasket) 1.5px 1.5px 0, var(--blue) 4.5px 4.5px 0}
  .h2-pink{text-shadow:var(--gasket) 1.5px 1.5px 0, var(--pink) 4.5px 4.5px 0}
  .h2-lime{text-shadow:var(--gasket) 1.5px 1.5px 0, var(--lime) 4.5px 4.5px 0}
  .mosaic{--m-card:96px;--m-gap:8px}

  .angles{flex-direction:column;gap:18px;padding:34px 20px 10px}
  .angle{padding:26px 20px 22px}
  .h3{font-size:24px}
  .h3-blue{text-shadow:var(--gasket) 1px 1px 0, var(--blue) 3px 3px 0}
  .h3-pink{text-shadow:var(--gasket) 1px 1px 0, var(--pink) 3px 3px 0}
  .h3-lime{text-shadow:var(--gasket) 1px 1px 0, var(--lime) 3px 3px 0}
  .angle-copy{font-size:16px}

  .evolving{flex-direction:column;gap:38px;padding:40px 20px 10px}   /* the title breathes below the fan (2026-07-18, Paulo) */
  .evolving-copy{width:100%}
  .evolving-copy{order:0}   /* stacked tier: DOM order rules — cards ABOVE the title (2026-07-18, Paulo) */
  .nations{width:88%;align-self:center;gap:14px;padding-top:4px}   /* explicit width (the pill-less fan has no min-content and flex-start would shrink-wrap it); 88% centered — a notch smaller, consistent with the neighbouring sections (2026-07-18) */
  .gc-stats{translate:30% 0;gap:4px}

  .steps-wrap{padding:40px 20px 10px;gap:16px}
  .steps{display:grid;grid-template-columns:1fr 1fr;gap:14px;padding:6px 0 34px}
  .step{padding:16px 14px}
  .step-p{font-size:14.5px}

  .closing{padding:54px 0 40px}
  .closing-inner{padding-inline:20px;gap:18px}
  .closing-h{font-size:56px;text-shadow:var(--gasket) 2px 2px 0, var(--blue) 6px 6px 0}   /* up a notch (2026-07-18, Paulo) */
  .closing-sub{font-size:16px}
  .kicker{font-size:12px;letter-spacing:.2em;text-align:center}

  .foot{padding:36px 0 30px}
  .foot-inner{padding-inline:20px;gap:20px}
  .foot-row{flex-direction:column;align-items:flex-start;gap:18px}
}