/* ============================================================
   PocaPal: the product page, in the app's Encore look (since 23 October 2026)
   Night #09090D for the hero and the arena, in both themes, like a venue with
   the lights down; the paper below follows the reader's light or dark. Anton in
   capitals for titles and figures, Inter for words, IBM Plex Mono in capitals
   for labels. One colour, the lit pink block (#FF3D7F) with black words on it,
   glowing at night, and on paper its deep shade (#C23062) where it is words.
   Containers are one shape: 14 corners, a light top edge, a soft shadow, no
   lips. Small pictures stand on the block's print, a third of the colour 3–5
   points down and across, as the app's grids do. The type scale, the feature
   blades, the phone and the download blade are /shared/components/product.css.
   ============================================================ */

@font-face{font-family:"Anton";src:url("assets/fonts/anton.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Inter";src:url("assets/fonts/inter-400.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Inter";src:url("assets/fonts/inter-600.woff2") format("woff2");font-weight:500 650;font-display:swap}
@font-face{font-family:"Inter";src:url("assets/fonts/inter-800.woff2") format("woff2");font-weight:651 900;font-display:swap}
@font-face{font-family:"IBM Plex Mono";src:url("assets/fonts/plexmono-500.woff2") format("woff2");font-weight:500;font-display:swap}
/* Czech (cs/): the same faces' Latin Extended cuts (Google Fonts' subsets of the same versions, from Fontsource),
   fetched only for a letter the Latin cut hasn't got, such as ř or ů. Korean (ko/): the app's own display face,
   Black Han Sans (Tokens.swift's display), cut to its Hangul, for Hangul in a title; words and labels fall to the
   system's Korean face. */
@font-face{font-family:"Anton";src:url("assets/fonts/anton-latin-ext.woff2") format("woff2");font-weight:400;font-display:swap;unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Inter";src:url("assets/fonts/inter-400-latin-ext.woff2") format("woff2");font-weight:400;font-display:swap;unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Inter";src:url("assets/fonts/inter-600-latin-ext.woff2") format("woff2");font-weight:500 650;font-display:swap;unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Inter";src:url("assets/fonts/inter-800-latin-ext.woff2") format("woff2");font-weight:651 900;font-display:swap;unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"IBM Plex Mono";src:url("assets/fonts/plexmono-500-latin-ext.woff2") format("woff2");font-weight:500;font-display:swap;unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Black Han Sans";src:url("assets/fonts/blackhansans-hangul.woff2") format("woff2");font-weight:400;font-display:swap;unicode-range:U+1100-11FF,U+3130-318F,U+AC00-D7A3}

:root{
  /* the night: the hero and the arena, in both themes */
  --night:#09090D; --night-panel:#131318; --night-card:#1B1B21;
  --night-ink:#F2F2F0; --night-grey:#A2A4AA; --night-well:rgba(255,255,255,.07); --night-hair:rgba(255,255,255,.08);

  /* the paper: everything after them, light here and night in Dark Mode */
  --paper:#ECEDEF; --panel:#F6F6F8; --card:#FFFFFF;
  --ink:#0B0B0C; --grey:#5D5F66; --well:rgba(11,11,12,.06); --hair:rgba(11,11,12,.08);
  --card-edge:inset 0 0 0 .5px rgba(11,11,12,.08);
  --card-shadow:0 3px 12px rgba(0,0,0,.08);

  /* the colour block: the pink lit, black words on it; its deep shade for words on paper */
  --block:#FF3D7F; --on-block:#0B0B0C; --glow:rgba(255,61,127,.55);
  --print:rgba(255,61,127,.3);
  --lit:#C23062;

  --f-display:"Anton", "Black Han Sans", "Impact", "Haettenschweiler", "Arial Narrow Bold", sans-serif;
  --f-ui:"Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  --f-mono:"IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --r:14px;
  --spring:cubic-bezier(.34,1.45,.5,1);

  /* the product kit's names for the same colours (product.css, faq.css) */
  --accent:var(--lit);
  --text-dark:var(--ink); --text-mid:var(--grey);
  --text-on-dark-mid:var(--night-grey);

  /* the shared navbar and footer (/shared/components/) in Encore */
  --mk-font:var(--f-ui);
  --mk-nav-position:fixed;
  --mk-nav-bg:rgba(9,9,13,.68); --mk-nav-fg:var(--night-ink); --mk-nav-saturate:160%;
  --mk-nav-light-bg:rgba(236,237,239,.8); --mk-nav-light-fg:var(--ink);
  --mk-nav-mark-r:5px;
  --mk-accent:#FF3D7F; --mk-accent-deep:#E2306D; --mk-cta-fg:#0B0B0C; --mk-cta-hover:#FF5A93;
  --mk-cta-weight:700;
  --mk-footer-bg:var(--paper); --mk-footer-fg:var(--grey); --mk-footer-strong:var(--ink);
  --mk-footer-muted:var(--grey); --mk-footer-line:var(--hair); --mk-footer-z:6;
  --mk-footer-ink:#FF3D7F; --mk-footer-mark-font:var(--f-display);
}

@media (prefers-color-scheme:dark){
  :root{
    --paper:#09090D; --panel:#131318; --card:#1B1B21;
    --ink:#F2F2F0; --grey:#A2A4AA; --well:rgba(255,255,255,.07); --hair:rgba(255,255,255,.08);
    --card-edge:inset 0 .75px 0 rgba(255,255,255,.14), inset 0 0 0 .75px rgba(255,255,255,.06);
    --card-shadow:0 3px 12px rgba(0,0,0,.45);
    --print:rgba(255,61,127,.34);
    --lit:#FF3D7F;
    --mk-footer-bg:#09090D;
  }
}

body{
  margin:0;
  font-family:var(--f-ui);
  background:var(--night);
  color:var(--night-ink);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
html{scroll-padding-top:calc(var(--nav-h) + 12px)}

/* the reveals wait for motion: without the script, or with reduced motion, everything is simply there */
html:not(.motion) .reveal{opacity:1;transform:none}

/* a control a script has not turned on yet stays out of the way, whatever its display */
[hidden]{display:none !important}
.visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.product .skip{
  position:absolute;left:var(--pad);top:-60px;z-index:60;padding:10px 16px;border-radius:12px;
  background:var(--block);color:var(--on-block);font-weight:700;
}
.product .skip:focus{top:calc(var(--nav-h) + 10px)}
.product :focus-visible{outline:3px solid #FF3D7F;outline-offset:3px;border-radius:6px}

/* ---------- type: Anton for titles, Plex Mono for labels ---------- */
.display{
  font-family:var(--f-display);font-weight:400;
  text-transform:uppercase;letter-spacing:.004em;line-height:.96;
  text-wrap:balance;
}
/* Korean (ko/) breaks lines between words, never inside one, as Korean is set; Hangul in a title (Black Han Sans)
   stands taller than Anton's capitals, so its lines are let out a little */
:lang(ko){word-break:keep-all;overflow-wrap:break-word}
:lang(ko) .display{line-height:1.08;letter-spacing:0}
.h1.display{font-size:clamp(44px,6.6vw,88px)}
.h2.display{font-size:clamp(40px,5.8vw,78px)}
.lit{color:var(--lit)}
.nowrap{white-space:nowrap}
.night .lit{color:var(--block);text-shadow:0 0 26px var(--glow)}
.eyebrow,.kicker,.facts,.fine,.arena-note,.pill-btn,.playpause,.venue span,.key-word{font-family:var(--f-mono);font-weight:500;text-transform:uppercase;letter-spacing:.07em}
.product .eyebrow{margin:0 0 18px;font-size:13px;color:var(--block)}
.product .kicker{margin:0 0 14px;font-size:13px;color:var(--grey)}
.night .kicker{color:var(--block)}
.facts{margin:16px 0 0;font-size:12.5px;color:var(--night-grey)}
.fine{margin:18px 0 0;font-size:12px;line-height:1.5;color:var(--grey);max-width:44ch}
.product .body{font-size:clamp(17px,1.4vw,19px);line-height:1.55;letter-spacing:-.01em;color:var(--grey)}
.night .body{color:var(--night-grey)}
.product .sub{font-size:clamp(17px,1.5vw,20px);line-height:1.5;letter-spacing:-.01em}

/* ---------- the night bands: the venue with the lights down, a halo of the colour at the top ---------- */
.night{position:relative;background:var(--night);color:var(--night-ink);isolation:isolate}
.night::before{
  content:"";position:absolute;left:0;right:0;top:0;height:min(720px,90vh);z-index:-1;pointer-events:none;
  background:radial-gradient(60% 70% at 50% 0%, rgba(255,61,127,.30), rgba(255,61,127,.08) 55%, transparent 78%);
}

/* ---------- the hero ---------- */
body.product{--hang:clamp(150px,22vh,240px)}
/* the hero stands over the arena below, so its phone can hang down into it */
.hero{
  z-index:2;
  padding-top:calc(var(--nav-h) + clamp(32px,7vh,80px));
  text-align:center;
}
.hero-copy{max-width:980px;margin:0 auto;padding:0 var(--pad)}
.hero .sub{margin:22px auto 0;max-width:42ch;color:var(--night-grey)}
.get{display:flex;align-items:center;justify-content:center;gap:22px;margin-top:30px}
.get .mk-store{flex:none;box-shadow:0 0 0 1px rgba(255,255,255,.24)}

.hero-stage{
  position:relative;
  margin-top:clamp(40px,7vh,72px);
  display:flex;justify-content:center;
  padding:0 var(--pad);
}
.hero-phone{width:min(300px,62vw);z-index:2;margin-bottom:calc(-1 * var(--hang))}
.device-shot{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}

/* the phone on its print: the colour block behind, down and across (the app's OffsetBlock on a stage) */
.device.print::after{
  content:"";position:absolute;z-index:0;
  left:var(--body-l);top:var(--body-t);width:var(--body-w);height:var(--body-h);
  border-radius:var(--body-r);
  background:var(--block);
  --off:clamp(10px,1.4vw,16px);
  transform:translate(calc(var(--e,1) * var(--off)),calc(var(--e,1) * var(--off)));
  box-shadow:0 0 44px -6px var(--glow);
}
.device.print::before{box-shadow:0 30px 60px rgba(0,0,0,.28)}
.hero-phone.print::before{box-shadow:0 40px 90px rgba(0,0,0,.6)}

/* the queue of cards and things behind the phone, two lanes running opposite ways */
.marquee{
  position:absolute;left:0;right:0;top:clamp(36px,7vw,90px);z-index:1;
  display:grid;gap:clamp(10px,2vw,26px);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);
  pointer-events:none;
}
/* the lane clips the row sideways, so it gets room above and below for a picture growing under the pointer */
.marquee-lane{overflow:hidden;padding:22px 0;margin:-22px 0}
.lane-shift{will-change:transform}
.marquee-row{margin-left:-360px}
.marquee-row{
  display:flex;align-items:flex-end;width:max-content;
  animation:lane var(--dur,40s) linear infinite;
  animation-play-state:paused;
}
.marquee-lane[data-lane="things"] .marquee-row{animation-direction:reverse}
.motion .marquee.is-live .marquee-row{animation-play-state:running}
.motion .marquee.is-live .marquee-lane.is-held .marquee-row,
.motion .marquee.is-paused .marquee-row{animation-play-state:paused}
/* two identical halves, so -50% → 0 loops seamlessly */
@keyframes lane{from{transform:translate3d(-50%,0,0)}to{transform:translate3d(0,0,0)}}
/* the spacing is a margin, not a gap: a gap leaves one fewer than items and the loop would jump */
.marquee img{
  display:block;height:clamp(118px,13.5vw,176px);width:auto;
  margin-right:clamp(26px,3.2vw,52px);
  border-radius:clamp(8px,.95vw,12px);
  box-shadow:5px 5px 0 var(--print-night,rgba(255,61,127,.34));
  opacity:.5;pointer-events:auto;cursor:default;
  transition:opacity .3s var(--ease), transform .14s linear;
}
.marquee img.is-cut{border-radius:0;box-shadow:none;filter:drop-shadow(5px 5px 0 rgba(255,61,127,.34))}
.marquee img.is-square{height:clamp(104px,12vw,156px)}
.marquee img:hover{opacity:1;position:relative;z-index:2}

/* the one button that stops the queue (WCAG 2.2.2), and the arena's spin */
.playpause,.key{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:36px;padding:0 14px;border:0;border-radius:999px;cursor:pointer;
  font-size:11.5px;color:var(--night-ink);
  background:rgba(255,255,255,.1);
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  box-shadow:inset 0 .75px 0 rgba(255,255,255,.16);
  transition:transform .18s var(--ease),background .2s var(--ease);
}
.playpause:hover,.key:hover{background:rgba(255,255,255,.16)}
.playpause:active,.key:active{transform:scale(.96)}
.playpause{position:absolute;z-index:3;right:var(--pad);top:calc(-1 * clamp(28px,5vh,52px))}
.pp-icon{width:10px;height:11px;display:inline-block;
  background:linear-gradient(90deg,currentColor 0 35%,transparent 35% 65%,currentColor 65%)}
[aria-pressed="true"] > .pp-icon{background:currentColor;clip-path:polygon(0 0,100% 50%,0 100%)}

/* ---------- the arena: big, front and centre, standing on the night itself with no box round it ---------- */
.arena-sec{z-index:1;padding:calc(var(--hang) + clamp(36px,5vh,64px)) var(--pad) clamp(48px,7vh,84px)}
.sec-head{max-width:860px;margin:0 auto;text-align:center}
.sec-head .body{margin:18px auto 0;max-width:54ch}
/* the box's shape: 2:1 on a wide screen, 4:3 on a tablet, 4:5 on a phone, each with a still drawn at it (the posters),
   as wide as the window and no taller than the window leaves under the controls (--ctl) */
.arena-view{position:relative;--shape:2;--ctl:118px;margin:clamp(14px,2.4vh,28px) calc(-1 * var(--pad)) 0}
.arena-box{
  position:relative;aspect-ratio:var(--shape);margin:0 auto;
  width:min(100%, calc((100vh - var(--nav-h) - var(--ctl)) * var(--shape)));
  /* its edges melt into the night: no frame, no corners */
  -webkit-mask-image:radial-gradient(closest-side,#000 86%,transparent);mask-image:radial-gradient(closest-side,#000 86%,transparent);
  -webkit-mask-size:100% 100%;mask-size:100% 100%;
}
.arena-poster,.arena-box canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.arena-poster{object-fit:cover;transition:opacity .6s var(--ease)}
.arena-box canvas{opacity:0;transition:opacity .6s var(--ease);touch-action:pan-y;cursor:grab;outline:none}
.arena-box canvas:active{cursor:grabbing}
.arena-box:has(canvas:focus-visible){-webkit-mask-image:none;mask-image:none;outline:3px solid #FF3D7F;outline-offset:-3px;border-radius:14px}
.arena-box.ready canvas{opacity:1}
.arena-box.ready .arena-poster{opacity:0}

.arena-ctl{margin-top:6px;padding:0 var(--pad);display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:10px 8px}
.arena-ctl .arena-note{flex-basis:100%}
.venues{display:flex;flex-wrap:wrap;justify-content:center;gap:8px}
.venue{
  display:inline-flex;align-items:baseline;gap:9px;min-height:44px;padding:0 14px;
  border:0;border-radius:10px;cursor:pointer;
  font:600 14.5px/1 var(--f-ui);letter-spacing:-.01em;color:var(--night-ink);
  background:var(--night-card);
  box-shadow:inset 0 .75px 0 rgba(255,255,255,.14), inset 0 0 0 .75px rgba(255,255,255,.06), 0 3px 10px rgba(0,0,0,.4);
  transition:transform .18s var(--ease),background .2s var(--ease),color .2s var(--ease),box-shadow .2s var(--ease);
}
.venue b{font-weight:600;align-self:center;white-space:nowrap}
.venue span{font-size:11px;color:var(--night-grey);align-self:center}
.venue:hover{background:#24242C}
.venue:active{transform:scale(.96)}
.venue[aria-pressed="true"]{background:var(--block);color:var(--on-block);box-shadow:0 0 22px -2px var(--glow)}
.venue[aria-pressed="true"] span{color:rgba(11,11,12,.72)}
.arena-keys{display:flex;gap:8px}
.arena-keys[hidden]{display:none}
.key{min-width:44px;min-height:44px;padding:0 12px;background:var(--night-card)}
.key svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.key-word{padding:0 16px}
.arena-note{margin:0;font-size:11.5px;color:var(--night-grey);text-align:center;max-width:60ch}

.points{list-style:none;margin:clamp(28px,4.5vh,48px) auto 0;padding:0;max-width:var(--maxw);
  display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));gap:14px}
.point{
  background:var(--night-card);border-radius:var(--r);padding:22px 22px 24px;
  box-shadow:inset 0 .75px 0 rgba(255,255,255,.14), inset 0 0 0 .75px rgba(255,255,255,.06), 0 3px 12px rgba(0,0,0,.45);
}
.point h3,.card h3{margin:14px 0 0;font:700 18px/1.25 var(--f-ui);letter-spacing:-.015em}
.point p,.card p{margin:8px 0 0;font-size:15.5px;line-height:1.5}
.point p{color:var(--night-grey)}
.glyph{display:grid;place-items:center;width:42px;height:42px;border-radius:50%;background:var(--well)}
.night .glyph{background:var(--night-well)}
.glyph svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}

/* ---------- the paper ---------- */
.paper{
  position:relative;z-index:1;
  background:var(--paper);color:var(--ink);
  border-radius:40px 40px 0 0;margin-top:-40px;
  padding-top:clamp(12px,2vh,28px);
}
.paper .h2{color:var(--ink)}
.product .feature{padding-block:clamp(36px,5.5vh,68px)}
.feature-art .device{width:min(100%,300px)}

/* the card to turn over: front and back, the holo following the turn */
.turn-art{flex-direction:column;align-items:center;gap:26px}
.turn{
  position:relative;width:min(272px,66vw);aspect-ratio:55/85;
  perspective:1300px;touch-action:pan-y;cursor:grab;
  -webkit-user-select:none;user-select:none;
}
.turn::after{  /* the stage light under it */
  content:"";position:absolute;left:-18%;right:-18%;bottom:-9%;height:16%;z-index:-1;
  background:radial-gradient(closest-side,var(--glow),transparent);opacity:.7;
}
.turn:active{cursor:grabbing}
.turn-card{
  position:absolute;inset:0;transform-style:preserve-3d;
  transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));
}
.turn-card.is-settling{transition:transform .9s var(--spring)}
.face{
  position:absolute;inset:0;border-radius:7%/4.5%;overflow:hidden;
  -webkit-backface-visibility:hidden;backface-visibility:hidden;
  box-shadow:0 0 0 1px rgba(11,11,12,.08), 0 24px 50px -18px rgba(0,0,0,.45);
}
.face.front img{width:100%;height:100%;object-fit:cover;display:block}
.holo{
  position:absolute;inset:0;mix-blend-mode:color-dodge;opacity:.55;pointer-events:none;
  background:linear-gradient(115deg,transparent 20%,rgba(255,61,127,.55) 34%,rgba(164,123,255,.55) 44%,rgba(77,163,255,.5) 54%,rgba(52,224,176,.5) 64%,transparent 78%);
  background-size:260% 100%;
  background-position:calc(50% + var(--sheen,0) * 1%) 0;
}
.face.back{
  transform:rotateY(180deg);
  background:radial-gradient(120% 80% at 30% 10%,#2A1426,#131318 70%);
}
.stk{position:absolute;transform:rotate(var(--r))}
.stk-photo{left:12%;top:9%;width:58%;padding:5px;background:#fff;border-radius:6px;box-shadow:4px 4px 0 rgba(255,61,127,.45)}
.stk-photo img{width:100%;height:auto;display:block;border-radius:3px}
.stk-name{right:6%;top:58%;font:400 clamp(30px,8vw,40px)/1 var(--f-display);color:#FF3D7F;text-shadow:0 0 18px rgba(255,61,127,.6)}
.stk-heart{left:9%;bottom:15%;width:20%}
.stk-heart svg{width:100%;fill:#FF3D7F;filter:drop-shadow(2px 2px 0 #fff)}
.stk-star{right:10%;top:9%;width:17%}
.stk-star svg{width:100%;fill:#FFD129;filter:drop-shadow(2px 2px 0 #fff)}
.stk-tag{left:10%;bottom:6%;font:500 10px/1 var(--f-mono);letter-spacing:.08em;color:#0B0B0C;background:#F2F2F0;padding:5px 7px;border-radius:4px}
.pill-btn{
  min-height:44px;padding:0 20px;border:0;border-radius:999px;cursor:pointer;font-size:12px;
  color:var(--ink);background:var(--card);box-shadow:var(--card-edge),var(--card-shadow);
  transition:transform .18s var(--ease);
}
.pill-btn:active{transform:scale(.96)}

/* the countdown's flap tiles: D-18, the D in the block, a changed digit flipping down */
.flaps{display:flex;gap:6px;margin:24px 0 2px}
.flap{
  position:relative;display:grid;place-items:center;
  width:clamp(48px,5vw,64px);height:clamp(64px,6.6vw,86px);border-radius:10px;overflow:hidden;
  font:400 clamp(40px,4.4vw,58px)/1 var(--f-display);
  color:#F2F2F0;background:#16161C;
  box-shadow:inset 0 .75px 0 rgba(255,255,255,.14), 0 4px 12px rgba(0,0,0,.25);
  perspective:300px;
}
.flap::after{content:"";position:absolute;left:0;right:0;top:50%;height:1px;background:rgba(0,0,0,.55)}
.flap > span{display:block;transform-origin:50% 0}
.flap.flap-d{background:var(--block);color:var(--on-block);box-shadow:0 0 22px -4px var(--glow)}
.flap.flap-d::after{background:rgba(0,0,0,.22)}
.flap .is-flipping{animation:flap .2s cubic-bezier(.3,.7,.4,1)}
@keyframes flap{from{transform:rotateX(-88deg);opacity:.35}to{transform:none;opacity:1}}

/* ---------- the rest ---------- */
.more{max-width:var(--maxw);margin:0 auto;padding:clamp(40px,6vh,76px) var(--pad)}
.more-head{text-align:center;margin:0 0 clamp(22px,3vh,36px)}

/* ---------- every little thing: a bento, as Apple's "Get the highlights" grids are ----------
   One idea a tile: a short bold line, one quiet line, and the app's own picture of it filling the rest, cut by the
   tile. Two large tiles lead the two halves (a home page each, the Home Screen); the rest are small, and one is wide.
   Four columns from 1,000 points, two from 640, one under that. A small tile's picture has a fixed room at its foot (a
   size container: a container query's height needs a definite one), a large tile's takes what its two rows leave; nothing
   is sized by an image, so a picture arriving never moves anything. */
.elt .more-head{margin-bottom:clamp(28px,4vh,48px)}
.elt-grid{
  list-style:none;margin:0;padding:0;display:grid;gap:16px;grid-template-columns:minmax(0,1fr);
}
.elt-tile{
  position:relative;display:flex;flex-direction:column;min-width:0;overflow:hidden;isolation:isolate;
  border-radius:24px;background:var(--card);box-shadow:var(--card-edge),var(--card-shadow);
  padding:clamp(24px,2.3vw,32px) clamp(24px,2.3vw,32px) 0;
}
.elt-copy{position:relative;z-index:2;margin-bottom:22px}
.elt-copy h3{margin:0;font:700 clamp(21px,1.75vw,24px)/1.14 var(--f-ui);letter-spacing:-.024em;color:var(--ink);text-wrap:balance}
.elt-copy p{margin:8px 0 0;font-size:clamp(15px,1.15vw,16.5px);line-height:1.42;letter-spacing:-.01em;color:var(--grey);max-width:36ch;text-wrap:pretty}
.elt-copy .elt-tag{margin:0 0 10px;font:500 11.5px/1 var(--f-mono);text-transform:uppercase;letter-spacing:.08em;color:var(--lit)}
.elt-big .elt-copy h3{font-size:clamp(26px,2.5vw,34px);letter-spacing:-.028em}
.elt-big .elt-copy h3 + p{font-size:clamp(16px,1.3vw,18px)}
.elt-art{position:relative;flex:none;height:240px;margin:auto calc(-1 * clamp(24px,2.3vw,32px)) 0;container-type:size}
.elt-big .elt-art{flex:1 1 auto;height:auto;min-height:440px;margin-top:0;container-type:inline-size}
.elt-art > *{position:absolute}

/* a crop of a real screen: the part (--x, --y, --w, --h, in the 600-wide screenshot's points) as large as the room
   allows, standing on the tile's foot, its own rounded panel */
.elt-crop{
  --room:calc(100cqw - 2 * clamp(20px,2vw,28px));
  left:50%;bottom:clamp(20px,2vw,28px);translate:-50% 0;
  width:min(var(--room), calc((100cqh - 2 * clamp(20px,2vw,28px)) * var(--w) / var(--h)));
  aspect-ratio:var(--w) / var(--h);overflow:hidden;border-radius:18px;
  box-shadow:0 0 0 .5px var(--hair),0 10px 30px -12px rgba(0,0,0,.28);
  background:var(--paper);
}
.elt-crop img{
  display:block;max-width:none;height:auto;
  width:calc(600 / var(--w) * 100%);
  margin-left:calc(var(--x) / var(--w) * -100%);
  margin-top:calc(var(--y) / var(--w) * -100%);
}

/* a home page each: Home on a phone, cut by the tile's foot, a faint wash of the colour behind it, and the home
   pages' faces at its foot (the worn one ringed) */
.elt-home{background:radial-gradient(70% 55% at 50% 100%,var(--print),transparent 72%),var(--card)}
.elt-phone{
  left:50%;top:6px;translate:-50% 0;width:min(330px,64cqw);aspect-ratio:600 / 1304;
  border:9px solid #0B0B0C;border-radius:46px;overflow:hidden;background:#0B0B0C;
  box-shadow:0 0 0 1px rgba(255,255,255,.08),0 24px 50px -18px rgba(0,0,0,.4);
}
.elt-phone img{display:block;width:100%;height:auto;border-radius:37px}
.elt-faces{
  left:50%;bottom:clamp(22px,3cqh,34px);translate:-50% 0;display:flex;gap:12px;padding:9px 12px;border-radius:999px;
  background:rgba(255,255,255,.72);backdrop-filter:blur(18px) saturate(160%);-webkit-backdrop-filter:blur(18px) saturate(160%);
  box-shadow:0 0 0 .5px var(--hair),0 12px 30px -10px rgba(0,0,0,.3);
}
.elt-face{display:block;width:46px;height:46px;border-radius:50%;padding:3px;background:#fff;box-shadow:0 0 0 .5px var(--hair)}
.elt-face img{display:block;width:100%;height:100%;border-radius:50%;object-fit:cover;object-position:50% 22%}
.elt-face.is-on{box-shadow:0 0 0 2.5px var(--block)}

/* the binder: a spread of two 2 × 2 pages on a graphite board, one pocket still empty */
.elt-binder{
  left:50%;top:50%;translate:-50% -54%;
  --side:min(calc(100cqw - 48px), calc((100cqh - 30px) * 1.36));
  width:var(--side);display:grid;grid-template-columns:1fr 9% 1fr;align-items:center;
  padding:5% 4%;border-radius:12px;background:#24242B;box-shadow:inset 0 1px 0 rgba(255,255,255,.08),inset 0 0 0 1px rgba(255,255,255,.05),0 16px 34px -14px rgba(0,0,0,.45);
}
.elt-page{display:grid;grid-template-columns:1fr 1fr;gap:6%;padding:5%;border-radius:6px;background:rgba(255,255,255,.06)}
.elt-page img,.elt-pocket{display:block;width:100%;aspect-ratio:55 / 85;object-fit:cover;border-radius:7%/4.5%;box-shadow:0 0 0 .5px rgba(255,255,255,.18)}
.elt-pocket{background:rgba(255,255,255,.07)}
.elt-rings{display:flex;flex-direction:column;align-items:center;justify-content:space-around;height:72%}
.elt-rings i{display:block;width:60%;aspect-ratio:1;border-radius:50%;border:2px solid #9A9CA3}

/* a poster of the arena, a card in the colour's duotone behind it, and the link */
.elt-posters{inset:0}
.elt-poster{
  position:absolute;top:50%;--h:min(calc(100cqh - 44px), 230px);height:var(--h);aspect-ratio:9 / 16;
  border-radius:12px;overflow:hidden;box-shadow:0 0 0 .5px var(--hair),0 14px 30px -12px rgba(0,0,0,.4);
}
.elt-poster img{display:block;width:100%;height:100%;object-fit:cover}
.elt-arena{left:50%;translate:-30% -56%;rotate:4deg;background:#09090D}
.elt-duo{left:50%;translate:-86% -50%;rotate:-6deg;background:var(--block)}
.elt-duo img{filter:grayscale(1) contrast(1.15);mix-blend-mode:multiply}
.elt-link{
  position:absolute;left:50%;bottom:18px;translate:-50% 0;display:flex;align-items:center;gap:7px;white-space:nowrap;
  padding:8px 13px 8px 10px;border-radius:999px;font:500 11.5px/1 var(--f-mono);letter-spacing:.02em;color:var(--ink);
  background:rgba(255,255,255,.8);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  box-shadow:0 0 0 .5px var(--hair),0 8px 20px -8px rgba(0,0,0,.3);
}
.elt-link svg,.elt-island svg,.elt-act-glyph svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* Seollal on a tear-off calendar page (the app's red-headed date badge) and a die-cut sticker beside it */
.elt-days{left:50%;top:50%;translate:-50% -54%;display:flex;align-items:center;gap:6px}
.elt-date{
  display:flex;flex-direction:column;width:112px;border-radius:16px;overflow:hidden;rotate:-5deg;background:#fff;
  box-shadow:0 0 0 1.5px #B3261E,0 16px 30px -12px rgba(0,0,0,.35);text-align:center;
}
.elt-date b{display:block;padding:7px 0 6px;background:#D9301F;color:#fff;font:500 14px/1 var(--f-mono);text-transform:uppercase;letter-spacing:.1em}  /* the system red a step deeper: white type on it is 4.8:1 */
.elt-date span{display:block;padding:6px 0 10px;font:400 62px/1 var(--f-display);color:#0B0B0C}
.elt-sticker{
  display:grid;place-items:center;width:104px;height:104px;border-radius:50%;rotate:9deg;margin-left:-14px;margin-top:44px;
  background:var(--block);color:var(--on-block);font:800 30px/1 var(--f-ui);letter-spacing:-.02em;
  box-shadow:0 0 0 5px #fff,0 0 0 5.5px var(--hair),0 14px 26px -10px rgba(0,0,0,.4);
}

/* iCloud: a Mac, an iPad and an iPhone under the cloud, in line */
.elt-devices{left:50%;top:50%;translate:-50% -52%;width:min(calc(100cqw - 56px), calc((100cqh - 30px) * 1.6));height:auto;overflow:visible}
.elt-devices *{fill:none;stroke:var(--ink);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.elt-devices .elt-fill{fill:var(--card)}
.elt-devices .elt-cloud{stroke:var(--lit)}
.elt-devices .elt-dash{stroke:var(--grey);stroke-width:1.6;stroke-dasharray:2 5}

/* the Home Screen: the night in both themes, the colour's halo at its top. A Live Activity and its Dynamic Island,
   then two Home Screen widgets with their name under them, as the Home Screen labels them */
.elt-live{
  background:radial-gradient(80% 45% at 50% 0%,rgba(255,61,127,.26),transparent 75%),var(--night);
  box-shadow:inset 0 .75px 0 rgba(255,255,255,.12),0 3px 12px rgba(0,0,0,.18);
}
.elt-live .elt-copy h3{color:var(--night-ink)}
.elt-live .elt-copy p{color:var(--night-grey)}
.elt-live .elt-copy .elt-tag{color:var(--block)}
.elt-live .elt-art{display:flex;align-items:center;justify-content:center;padding-bottom:clamp(24px,2.3vw,32px)}
.elt-ls{position:relative;width:min(460px,calc(100cqw - 48px));display:flex;flex-direction:column;align-items:center;gap:18px;color:var(--night-ink)}
.elt-clock{margin:-4px 0 -6px;font:700 clamp(64px,20cqw,104px)/1 var(--f-ui);letter-spacing:-.04em;font-variant-numeric:tabular-nums;color:rgba(242,242,240,.94)}
.elt-island{
  display:flex;align-items:center;justify-content:space-between;width:178px;height:38px;padding:0 16px;border-radius:999px;
  background:#000;box-shadow:0 0 0 1px rgba(255,255,255,.08);color:var(--block);font:600 15px/1 var(--f-ui);font-variant-numeric:tabular-nums;
}
.elt-island svg{width:18px;height:18px}
.elt-activity{
  width:100%;padding:16px 18px 18px;border-radius:24px;box-sizing:border-box;
  background:rgba(255,255,255,.1);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);box-shadow:inset 0 .75px 0 rgba(255,255,255,.14);
}
.elt-act-row{display:flex;align-items:center;gap:12px}
.elt-act-glyph{display:grid;place-items:center;flex:none;width:38px;height:38px;border-radius:11px;background:var(--block);color:var(--on-block)}
.elt-act-glyph svg{width:20px;height:20px}
.elt-act-words{display:flex;flex-direction:column;gap:4px;min-width:0;flex:1}
.elt-act-words b{font:700 16px/1.15 var(--f-ui);letter-spacing:-.015em}
.elt-act-words span{font-size:13px;color:var(--night-grey);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.elt-act-left{font:400 34px/1 var(--f-display);color:var(--block);font-variant-numeric:tabular-nums}
.elt-bar{display:block;height:6px;margin-top:14px;border-radius:3px;background:rgba(255,255,255,.14);overflow:hidden}
.elt-bar span{display:block;width:62%;height:100%;border-radius:3px;background:var(--block)}
html.motion .elt-live .elt-bar span{transition:width 1.6s var(--ease) .5s}
html.motion .elt-live:not(.in) .elt-bar span{width:8%}
.elt-hs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;width:100%;margin:0}
.elt-w{margin:0;min-width:0;display:flex;flex-direction:column;align-items:center;gap:7px;font-size:11.5px;color:var(--night-grey)}
.elt-w-face{display:block;width:100%;aspect-ratio:1;min-height:0;border-radius:22px;box-sizing:border-box;overflow:hidden}
.elt-w-cotd{display:grid;place-items:center;background:rgba(255,255,255,.12);box-shadow:inset 0 .75px 0 rgba(255,255,255,.14)}
.elt-w-cotd img{display:block;height:78%;aspect-ratio:55 / 85;object-fit:cover;border-radius:7%/4.5%;rotate:-3deg;box-shadow:0 8px 16px -8px rgba(0,0,0,.4)}
.elt-w-next{display:flex;flex-direction:column;justify-content:center;gap:7px;padding:14px 15px;background:rgba(255,255,255,.12);box-shadow:inset 0 .75px 0 rgba(255,255,255,.14);color:var(--night-ink)}
.elt-w-next em{font:500 10px/1 var(--f-mono);text-transform:uppercase;letter-spacing:.08em;font-style:normal;color:var(--block)}
.elt-w-next > span{display:flex;flex-direction:column;gap:2px;font:600 12.5px/1.15 var(--f-ui);letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@container (max-width:400px){.elt-w-next > span:last-of-type{display:none}.elt-w-next > span{font-size:11.5px}}
.elt-w-next small{font:500 9.5px/1 var(--f-mono);text-transform:uppercase;letter-spacing:.06em;color:var(--night-grey)}

@media (prefers-color-scheme:dark){
  .elt-faces,.elt-link{background:rgba(27,27,33,.72)}
  .elt-face{background:#1B1B21}
  .elt-date{box-shadow:0 0 0 1.5px #B3261E,0 16px 30px -12px rgba(0,0,0,.6)}
  .elt-live{background:radial-gradient(80% 45% at 50% 0%,rgba(255,61,127,.22),transparent 75%),#0F0F14;box-shadow:inset 0 .75px 0 rgba(255,255,255,.14),inset 0 0 0 .75px rgba(255,255,255,.06)}
  .elt-sticker{box-shadow:0 0 0 5px #F2F2F0,0 14px 26px -10px rgba(0,0,0,.6)}
}

/* one column: the wide crop's room is its own height, not the small tiles' */
@media (max-width:639px){.elt-widgets .elt-art{height:min(240px, calc((100vw - 2 * var(--pad)) * .445 + 28px))}}

/* two columns, then four; the large tiles span two of each, the wide one two across */
@media (min-width:640px){
  .elt-grid{grid-template-columns:repeat(2,minmax(0,1fr));
    grid-template-areas:"home home" "home home" "sets book" "widg widg" "live live" "live live" "share holi" "arti sync"}
  .elt-art{height:230px}
  .elt-big .elt-art{min-height:540px}
  .elt-home{grid-area:home}.elt-sets{grid-area:sets}.elt-book{grid-area:book}.elt-widgets{grid-area:widg}
  .elt-live{grid-area:live}.elt-share{grid-area:share}.elt-holiday{grid-area:holi}.elt-artists{grid-area:arti}.elt-sync{grid-area:sync}
}
@media (min-width:1000px){
  .elt-grid{grid-template-columns:repeat(4,minmax(0,1fr));
    grid-template-areas:"home home sets book" "home home widg widg" "share holi live live" "arti sync live live"}
  .elt-big .elt-art{min-height:0}
}

/* ---------- the Fanclub ---------- */
.club{
  max-width:var(--maxw);margin:0 auto;padding:clamp(40px,6vh,76px) var(--pad);
  display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(36px,6vw,84px);align-items:center;
}
.club-art{display:flex;justify-content:center}
.member-card{
  position:relative;width:min(100%,380px);aspect-ratio:1.586;border-radius:24px;padding:22px 24px;
  display:flex;flex-direction:column;justify-content:space-between;
  color:#fff;background:linear-gradient(135deg,#FF6FAA,#E8337F 58%,#B81D60);
  box-shadow:inset 0 0 0 3px rgba(255,255,255,.18), 12px 12px 0 var(--print), 0 30px 60px -22px rgba(184,29,96,.6);
  transform:rotate(-4deg);
}
.club-art{perspective:1100px}
.motion .club-art .member-card{
  transform:translateY(calc((1 - var(--e,1)) * 60px)) rotateX(calc((1 - var(--e,1)) * 22deg)) rotateY(calc((1 - var(--e,1)) * -30deg)) rotate(calc(-4deg - (1 - var(--e,1)) * 8deg));
}
.mc-mark{width:34px;height:34px}
.mc-mark svg{width:100%;fill:#fff}
.mc-name{font:400 clamp(30px,3.6vw,42px)/.95 var(--f-display);text-transform:uppercase}
.mc-foot{display:flex;justify-content:space-between;font:500 12px/1 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;opacity:.9}
.perks{list-style:none;margin:28px 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));gap:2px 26px}
.perks li{padding:12px 0;border-top:1px solid var(--hair);display:grid;gap:3px}
.perks b{font:700 15.5px/1.3 var(--f-ui);letter-spacing:-.01em;color:var(--ink)}
.perks span{font-size:14.5px;line-height:1.45;color:var(--grey)}

/* ---------- get it ---------- */
.product .cta{background:var(--paper);padding-top:clamp(64px,9vh,104px);padding-bottom:clamp(64px,9vh,104px)}
.cta-brand{gap:14px}
/* a hand of photocards fanned out behind the icon, pivoting on a point below the hand as cards held in one hand do,
   standing up out of the icon (they had slipped down level with it); dealt out once as the blade arrives, and spread a
   little wider under the pointer, on focus or on a tap (.is-spread, app.js) */
.cta-fan{
  --card-w:clamp(78px,8.6vw,108px);
  position:relative;width:min(100%,460px);height:calc(var(--card-w) * 1.9);
  display:flex;justify-content:center;align-items:flex-end;cursor:default;-webkit-tap-highlight-color:transparent;
}
.fan-card{
  position:absolute;left:50%;bottom:22%;
  width:var(--card-w);height:auto;aspect-ratio:55/85;object-fit:cover;margin-left:calc(var(--card-w) / -2);
  border-radius:8px;box-shadow:4px 4px 0 var(--print);
  transform-origin:50% 135%;
  transform:rotate(calc(var(--k) * 14deg)) translate3d(0,calc(var(--k) * var(--k) * 4px),0);
}
/* the icon is pale (the evolved heart, 26 October): a hairline keeps its edge on the paper */
.cta-icon{position:relative;z-index:2;width:clamp(78px,8vw,98px);border-radius:22.5%;filter:drop-shadow(0 0 .6px rgba(11,11,12,.35)) drop-shadow(0 14px 26px rgba(184,29,96,.35))}
.mk-nav .mk-nav-mark{box-shadow:0 0 0 .5px rgba(11,11,12,.16)}
/* stacked out of sight behind the icon until the blade arrives, then dealt out, the outer ones a moment later */
.motion .cta-brand .fan-card{
  transition:transform 1.2s var(--spring),opacity .5s var(--ease);
  transition-delay:calc(.25s + var(--k) * var(--k) * .05s);
}
.motion .cta-brand:not(.in) .fan-card{opacity:0;transform:translate3d(0,26px,0) scale(.8)}
.motion .cta-brand .cta-icon{transition:opacity .5s var(--ease),transform 1s var(--spring)}
.motion .cta-brand:not(.in) .cta-icon{opacity:0;transform:scale(.55)}
.motion .cta-brand.in .cta-fan.is-spread .fan-card{
  transition-delay:0s;transition-duration:.7s;
  transform:rotate(calc(var(--k) * 19deg)) translate3d(0,calc(var(--k) * var(--k) * 3px - 10px),0);
}
.cta-name{color:var(--ink)}
.cta .get{margin-top:30px}
.cta .h2{max-width:none}
.cta .body{margin-inline:auto}
.cta .facts{color:var(--grey)}

/* ---------- questions ---------- */
.product .faq{background:var(--paper);padding-top:clamp(16px,3.2vh,40px);padding-bottom:clamp(48px,7vh,90px)}
.product .faq-q{color:var(--ink)}
.product .faq-q:hover{color:var(--lit)}
.product .faq-a p{color:var(--grey)}
.product .faq-item,.product .faq-item:last-child{border-color:var(--hair)}

/* ---------- on a computer, the QR code to scan with an iPhone (as UoP Bus has it) ---------- */
.qr{display:none;align-items:center;gap:14px;text-align:left}
.qr img{width:84px;height:84px;padding:7px;border-radius:12px;background:#fff;box-sizing:content-box;box-shadow:0 0 0 1px var(--hair)}
.qr p{margin:0;max-width:16ch;font-size:13.5px;line-height:1.35;color:var(--grey)}
.night .qr p{color:var(--night-grey)}
@media (hover:hover) and (pointer:fine) and (min-width:900px){ .qr{display:flex} }

/* ---------- the stream: the arena pinned for a short run while the cards fall into it ---------- */
.arena-run{position:relative}
.motion .arena-run{--run:120vh;height:calc(100vh - var(--nav-h) + var(--run))}
.motion .arena-pin{
  position:sticky;top:var(--nav-h);height:calc(100vh - var(--nav-h));
  display:flex;flex-direction:column;justify-content:center;
}
/* the cards come down from above the arena, from behind the bar, so it clips only at the sides */
.stream{position:absolute;inset:0;pointer-events:none;z-index:3;overflow-x:clip;overflow-y:visible}
.stream img{
  position:absolute;left:0;top:0;width:auto;transform-origin:50% 50%;
  border-radius:9px;box-shadow:4px 4px 0 rgba(255,61,127,.34);
  opacity:0;will-change:transform,opacity;
}
.stream img.is-cut{border-radius:0;box-shadow:none;filter:drop-shadow(4px 4px 0 rgba(255,61,127,.34))}
.stream .spark{
  position:absolute;left:0;top:0;width:90px;height:90px;margin:-45px 0 0 -45px;border-radius:50%;
  background:radial-gradient(closest-side,rgba(255,61,127,.9),rgba(255,61,127,.25) 55%,transparent);
  opacity:0;mix-blend-mode:screen;will-change:transform,opacity;
}
/* the lights come up as the cards land: --lights, 0.3 → 1 */
.arena-box.dim > picture,.arena-box.dim canvas{filter:brightness(var(--lights,1)) saturate(calc(.4 + var(--lights,1) * .6))}
.arena-count{
  position:absolute;left:var(--pad);top:8px;z-index:4;margin:0;padding:6px 11px;border-radius:999px;
  font:500 11.5px/1 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--night-grey);
  background:rgba(9,9,13,.6);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
}
.arena-count b{font:400 18px/1 var(--f-display);letter-spacing:.02em;color:#FF3D7F;vertical-align:-2px;margin-right:2px;text-shadow:0 0 14px var(--glow)}

/* ---------- a place for everything you collect: a gallery of tall cards paged sideways, as Peregrino's "Get to know
   Peregrino" is (sites/peregrino, .gk), in Encore: each card its kind's name and line at the top and its screen rising
   from the foot, cut by the card's edge; the cards alternate the night and the container; nothing moves by itself ---------- */
.gk{--edge:max(var(--pad), calc((100vw - var(--maxw)) / 2 + var(--pad)));padding:clamp(28px,4vh,52px) 0 clamp(24px,3.5vh,44px)}
.gk-top{padding:0 var(--edge)}
.gk-track{list-style:none;margin:clamp(20px,3vh,32px) 0 0;padding:6px var(--edge) 20px;display:flex;gap:20px;
  overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:var(--edge);overscroll-behavior-x:contain;scrollbar-width:none;outline:none}
.gk-track::-webkit-scrollbar{display:none}
.gk-track:focus-visible{outline:3px solid #FF3D7F;outline-offset:-3px;border-radius:var(--r)}
.gk-card{--w:clamp(290px,27vw,370px);flex:none;width:var(--w);height:calc(var(--w) * 1.62);position:relative;overflow:hidden;isolation:isolate;
  scroll-snap-align:start;border-radius:22px;background:var(--card);color:var(--ink);box-shadow:var(--card-edge),var(--card-shadow)}
/* the night card: a venue with the lights down, the colour's halo at its top */
.gk-night{background:radial-gradient(90% 60% at 50% 0%,rgba(255,61,127,.24),transparent 75%),var(--night);color:var(--night-ink);
  box-shadow:inset 0 .75px 0 rgba(255,255,255,.1),0 10px 30px -14px rgba(0,0,0,.5)}
@media (prefers-color-scheme:dark){.gk-night{background:radial-gradient(90% 60% at 50% 0%,rgba(255,61,127,.24),transparent 75%),var(--night-panel)}}
.gk-copy{position:relative;z-index:2;padding:26px 26px 0}
.gk-head{margin:0;font:400 clamp(30px,2.6vw,36px)/1 var(--f-display);text-transform:uppercase;letter-spacing:.004em}
.gk-line{margin:10px 0 0;max-width:30ch;font-size:15px;line-height:1.45;color:var(--grey)}
.gk-night .gk-line{color:var(--night-grey)}
/* the screen: the phone rising from the card's foot, its print behind it, its lower part cut by the card */
.gk-art{position:absolute;left:0;right:0;bottom:0;z-index:1;display:flex;justify-content:center}
.gk-art .device{width:66%;margin-bottom:-36%}
/* the + : opens the card's story (the dialog below), an ink key on the container, a light one on the night */
.gk-more{position:absolute;right:18px;bottom:18px;z-index:3;width:40px;height:40px;border:0;border-radius:50%;cursor:pointer;
  background:var(--ink);box-shadow:0 4px 14px rgba(0,0,0,.25);transition:transform .2s var(--ease)}
.gk-night .gk-more{background:var(--night-ink)}
.gk-more:hover{transform:scale(1.08)}
.gk-more:active{transform:scale(.96)}
.gk-more:focus-visible,.gk-close:focus-visible{outline:3px solid #FF3D7F;outline-offset:3px}
.gk-more span,.gk-close span{position:absolute;inset:0}
.gk-more span::before,.gk-more span::after,.gk-close span::before,.gk-close span::after{content:"";position:absolute;left:50%;top:50%;width:14px;height:2.4px;margin:-1.2px 0 0 -7px;border-radius:2px;background:var(--paper)}
.gk-night .gk-more span::before,.gk-night .gk-more span::after{background:var(--night)}
.gk-more span::after{transform:rotate(90deg)}
/* the story: a sheet over the dimmed page, the card's screen beside its features */
.gk-modal{border:0;padding:0;margin:0;width:100%;max-width:none;height:100%;max-height:none;background:transparent;overflow-y:auto;overscroll-behavior:contain;color:var(--ink)}
.gk-modal::backdrop{background:rgba(9,9,13,.55);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
.gk-modal[open]{animation:gkIn .4s var(--ease)}
@keyframes gkIn{from{opacity:0;transform:translateY(30px)}}
.gk-sheet{position:relative;max-width:900px;margin:clamp(24px,7vh,80px) auto;background:var(--card);border-radius:22px;box-shadow:var(--card-edge),0 30px 80px rgba(0,0,0,.35);
  padding:clamp(28px,5vw,56px);display:grid;grid-template-columns:minmax(0,.72fr) minmax(0,1.28fr);gap:clamp(24px,4vw,52px);align-items:center}
.gk-close{position:absolute;top:16px;right:16px;width:40px;height:40px;border:0;border-radius:50%;background:var(--ink);cursor:pointer}
.gk-close span::before{transform:rotate(45deg)}
.gk-close span::after{transform:rotate(-45deg)}
.gk-shot .device{width:min(100%,260px);margin:0 auto}
.gk-body .kicker{margin:0 0 10px;color:var(--lit)}
.gk-body h3{margin:0;font-size:clamp(36px,4.4vw,54px);line-height:.96;color:var(--ink)}
.gk-feats{list-style:none;margin:24px 0 0;padding:0;display:grid;gap:14px}
.gk-feats li{display:grid;grid-template-columns:36px 1fr;gap:14px;align-items:start;font-size:16px;line-height:1.45;color:var(--grey)}
.gk-feats svg{width:36px;height:36px;padding:8px;border-radius:50%;background:var(--well);color:var(--ink);fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.gk-feats span{padding-top:7px}
@media (max-width:700px){
  .gk-modal{padding:0 12px}
  .gk-sheet{grid-template-columns:1fr;padding:56px 22px 26px;gap:22px;margin:16px auto}
  .gk-shot .device{width:46%}
}
@media (prefers-reduced-motion:reduce){.gk-modal[open]{animation:none}.gk-more{transition:none}}
/* paging, as Peregrino's: two keys at the end of the row */
.gk-nav{display:flex;justify-content:flex-end;gap:12px;padding:4px var(--edge) 0}
.gk-paddle:disabled{opacity:.4;cursor:default;transform:none}
.paper .key{background:var(--card);color:var(--ink);box-shadow:var(--card-edge),var(--card-shadow);-webkit-backdrop-filter:none;backdrop-filter:none}
.paper .key:hover{background:var(--panel)}
@media (max-width:620px){
  .gk-card{--w:min(80vw,330px)}
  .gk-track{gap:14px}
}
@media (prefers-reduced-motion:reduce){.gk-track{scroll-behavior:auto}}

/* ---------- Korean words: two phones side by side, the second a step lower, as the UoP Bus site pairs them ---------- */
.pair{display:flex;justify-content:center;align-items:flex-start;gap:clamp(12px,2vw,22px);width:100%}
.feature-art .pair .device{flex:none;width:min(42vw,250px)}
.pair .device + .device{margin-top:48px}
.ko-points{list-style:none;margin:18px 0 0;padding:0;display:grid;gap:10px;max-width:46ch}
.ko-points li{position:relative;padding-left:22px;font-size:16px;line-height:1.5;color:var(--grey)}
.ko-points li::before{content:"";position:absolute;left:2px;top:.62em;width:8px;height:8px;border-radius:50%;background:var(--block)}
/* the Lock Screen, drawn: the wallpaper, the date over the big clock, and the rectangular widget as the app draws it
   (PocaPalWidgets/KoreanWidget.swift: the word heavy, the romanization in mono, the meaning) on the system's glass */
.lock{position:absolute;inset:0;container-type:inline-size;color:#fff;text-align:center;overflow:hidden;
  background:radial-gradient(120% 70% at 30% 0%,#FF6FA8 0%,rgba(255,61,127,.55) 30%,transparent 62%),
             radial-gradient(90% 60% at 90% 100%,#7B5BFF 0%,transparent 60%),linear-gradient(180deg,#3A1240,#120A1E 80%)}
.lock-date{margin:13cqw 0 0;font:600 5.2cqw/1 var(--f-ui);letter-spacing:-.01em;opacity:.92}
.lock-time{margin:1cqw 0 0;font:700 25cqw/1 var(--f-ui);letter-spacing:-.04em;text-shadow:0 1px 8px rgba(0,0,0,.15)}
.lock-widget{display:grid;justify-items:start;gap:.6cqw;width:64%;margin:4cqw auto 0;padding:3.2cqw 4.4cqw;border-radius:5.4cqw;text-align:left;
  background:rgba(255,255,255,.16);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);box-shadow:inset 0 .5px 0 rgba(255,255,255,.35)}
.lock-widget b{font:800 8.6cqw/1.05 "Apple SD Gothic Neo","Noto Sans KR","Malgun Gothic",var(--f-ui)}
.lock-widget span{font:500 3.6cqw/1.2 ui-monospace,SFMono-Regular,Menlo,monospace;opacity:.85}
.lock-widget i{font:600 4.2cqw/1.2 var(--f-ui);font-style:normal;opacity:.92}
@media (max-width:560px){
  .feature-art .pair .device{width:min(43vw,220px)}
  .pair .device + .device{margin-top:32px}
}

/* ---------- the players, picked under the phone ---------- */
.players-art{flex-direction:column;align-items:center;gap:24px}
.players picture{position:absolute;inset:0;opacity:0;transition:opacity .45s var(--ease)}
.players picture.is-on{opacity:1}
.segments{display:inline-flex;gap:2px;padding:4px;border-radius:12px;background:var(--well)}
.segments button{
  min-height:40px;padding:0 15px;border:0;border-radius:9px;cursor:pointer;background:none;
  font:600 14.5px/1 var(--f-ui);letter-spacing:-.01em;color:var(--grey);
  transition:background .25s var(--ease),color .25s var(--ease),transform .15s var(--ease);
}
.segments button:hover{color:var(--ink)}
.segments button:active{transform:scale(.96)}
.segments button[aria-pressed="true"]{background:var(--block);color:var(--on-block);box-shadow:0 0 18px -4px var(--glow)}

/* ---------- the blades' phones rise into place as they come into view (--e on the art, the phone moved) ---------- */
.feature-art{perspective:1300px}
.motion .feature-art > .device,.motion .feature-art > .pair{
  transform:translateY(calc((1 - var(--e,1)) * 80px)) rotateX(calc((1 - var(--e,1)) * 16deg)) scale(calc(.93 + var(--e,1) * .07));
  transform-origin:50% 100%;
}

/* the footer's wordmark in Anton, which is narrow enough already: the shared footer tightens it for a wide face */
body .mk-footer .mk-footer-mark{letter-spacing:.005em}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1023px){
  .arena-view{--shape:1.3333;--ctl:130px}
}
@media (max-width:900px){
  .club{grid-template-columns:1fr}
}
@media (max-width:640px){
  .motion .arena-run{--run:70vh}
  .arena-view{--shape:.8;--ctl:150px}
  /* one row of venues to swipe along, so the arena keeps the height */
  .venues{flex-wrap:nowrap;justify-content:flex-start;overflow-x:auto;scrollbar-width:none;margin:0 calc(-1 * var(--pad));padding:2px var(--pad);flex-basis:calc(100% + var(--pad) * 2)}
  .venues::-webkit-scrollbar{display:none}
  .segments button{padding:0 11px;font-size:14px}
  .paper{border-radius:28px 28px 0 0;margin-top:-28px}
  .venue{min-height:40px;padding:0 12px;font-size:14px}
  .playpause{top:calc(-1 * 24px)}
}
@media (prefers-reduced-motion:reduce){
  .marquee-row{animation:none}
  .turn-card.is-settling{transition:transform .3s ease}
  .flap .is-flipping{animation:none}
}