/* Landing, piece 1 (24 Oct): a Tron-style night: black-to-blue sky, a glowing horizon and a still neon grid floor that
   runs to the horizon. The logo in all four corners, the gameplay video in the middle, the
   countdown and the waitlist under it. Nothing else yet. */
:root {
  --tr-black: #02040a;
  --tr-deep: #050d24;
  --tr-blue: #0b2a6b;
  --tr-neon: #2fb6ff;     /* grid lines */
  --tr-glow: #5fd4ff;     /* horizon */
  --tr-aqua: #34e0c4;     /* the ribbons' glass green */
  --tr-ink: #e8f6ff;      /* text */
  --tr-dim: rgba(232, 246, 255, 0.7);
}
html, body { min-height: 100%; }
body { background: var(--tr-black); color: var(--tr-ink); overflow-x: hidden; }

.grid-bg { position: fixed; inset: 0; z-index: 0; overflow: hidden; background: var(--tr-black); }
.gb-sky { position: absolute; inset: 0 0 45% 0; background: linear-gradient(180deg, var(--tr-black) 0%, var(--tr-deep) 45%, var(--tr-blue) 100%); }
.gb-sun { display: none; position: absolute; left: 50%; top: 55%; width: 70vmin; height: 70vmin; transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(95, 212, 255, 0.35) 0%, rgba(47, 182, 255, 0.12) 35%, rgba(47, 182, 255, 0) 65%); }
.gb-floor { position: absolute; left: -50%; right: -50%; top: 55%; bottom: -10%; perspective: 340px; perspective-origin: 50% 0%; }
.gb-lines { position: absolute; inset: 0; transform-origin: 50% 0%; transform: rotateX(68deg);
  background-image:
    linear-gradient(to right, rgba(47, 182, 255, 0.45) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(47, 182, 255, 0.45) 1px, transparent 1.5px);
  background-size: 64px 64px; background-color: #030817;
  box-shadow: inset 0 0 120px rgba(0, 0, 0, 0.9); }
.gb-haze { position: absolute; left: 0; right: 0; top: 55%; height: 22%; transform: translateY(-50%);
  background: linear-gradient(180deg, rgba(95, 212, 255, 0) 0%, rgba(95, 212, 255, 0.18) 49%, rgba(3, 8, 23, 0.9) 51%, rgba(3, 8, 23, 0) 100%); }
.gb-haze::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 2px; background: var(--tr-glow); box-shadow: 0 0 10px 1px rgba(95, 212, 255, 0.6); }

/* Four corner logos, fixed. Cycles renders of the original logo .blend (logo-render/scripts/render_corner.py).
   Bottom right = the file's own camera; the other corners mirror the camera, light, ribbons and HDRI (never the text).
   Each sits 10 % of its width past the screen edge: the wide ribbon still runs off into the edge, and the text clears the video. */
.corner-logo { --clw: clamp(220px, 34vw, 620px); --cl-out: calc(var(--clw) * -0.1);
  position: fixed; z-index: 1; width: var(--clw); height: auto; pointer-events: none;
  filter: drop-shadow(0 0 18px rgba(47, 182, 255, 0.45)); }
.cl-br { right: var(--cl-out); bottom: 14px; }
.cl-bl { left: var(--cl-out); bottom: 14px; }
.cl-tr { right: var(--cl-out); top: 14px; }
.cl-tl { left: var(--cl-out); top: 14px; }

/* The middle */
.center-stage { position: relative; z-index: 2; min-height: 100%; box-sizing: border-box; display: grid; place-content: center; justify-items: center;
  gap: 16px; padding-block: 40px; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
.cs-screen { position: relative; width: min(860px, 92vw, calc((100vh - 300px) * 16 / 9)); aspect-ratio: 16 / 9; max-width: 100%;
  border-radius: 18px; overflow: hidden; background: #000; border: 2px solid var(--tr-neon);
  box-shadow: 0 0 0 1px rgba(95, 212, 255, 0.3), 0 0 28px rgba(47, 182, 255, 0.55), 0 0 80px rgba(47, 182, 255, 0.25); }
.cs-screen .portal-reel { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cs-caption { position: absolute; left: 14px; bottom: 12px; margin: 0; padding: 7px 12px; border-radius: 10px; background: rgba(2, 4, 10, 0.7);
  border: 1px solid rgba(47, 182, 255, 0.5); color: var(--tr-ink); font: 600 14px/1.3 var(--font-body); max-width: calc(100% - 28px); }
.cs-when { margin: 6px 0 0; font: 600 15px/1.2 var(--font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--tr-glow);
  text-shadow: 0 0 12px rgba(47, 182, 255, 0.8); }
.center-stage .countdown { display: grid; grid-template-columns: repeat(4, minmax(64px, 1fr)); gap: 10px; }
.center-stage .countdown[hidden] { display: none; }
.center-stage .countdown div { display: grid; justify-items: center; padding: 10px 14px 8px; border-radius: 12px;
  background: rgba(3, 8, 23, 0.78); border: 1px solid rgba(47, 182, 255, 0.6); box-shadow: 0 0 16px rgba(47, 182, 255, 0.3), inset 0 0 14px rgba(47, 182, 255, 0.12); }
.center-stage .countdown b { font: 600 40px/1 var(--font-mono); font-variant-numeric: tabular-nums; color: #fff; text-shadow: 0 0 14px rgba(95, 212, 255, 0.9); }
.center-stage .countdown span { font: 500 11px/1.6 var(--font-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--tr-dim); }
.cs-play { display: inline-block; padding: 14px 40px; border-radius: 12px; background: var(--tr-neon); color: var(--tr-black); text-decoration: none;
  font: 700 22px/1 var(--font-head); box-shadow: 0 0 24px rgba(47, 182, 255, 0.8); }
.cs-signup { width: min(460px, 92vw); margin: 4px 0 0; }
.cs-signup .signup-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; }
.cs-signup input[type=email] { min-width: 0; background: rgba(3, 8, 23, 0.85); color: var(--tr-ink); border: 1px solid rgba(47, 182, 255, 0.6);
  border-radius: 10px; padding: 13px 16px; font: 500 16px var(--font-body); }
.cs-signup input[type=email]::placeholder { color: rgba(232, 246, 255, 0.45); }
.cs-signup input[type=email]:focus { outline: 0; border-color: var(--tr-glow); box-shadow: 0 0 14px rgba(47, 182, 255, 0.6); }
.cs-signup .btn-primary { border-radius: 10px; background: var(--tr-neon); color: var(--tr-black); border: 0; padding: 0 22px;
  font: 700 16px/1 var(--font-body); box-shadow: 0 0 18px rgba(47, 182, 255, 0.7); }
.cs-small { margin: 0; font-size: 14px; color: var(--tr-dim); }
.cs-small a { color: var(--tr-ink); }

@media (max-width: 700px) {
  .corner-logo { --clw: 56vw; }
  .cs-screen { width: 92vw; }
  .center-stage .countdown { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
  .center-stage .countdown div { padding: 8px 4px 6px; }
  .center-stage .countdown b { font-size: 28px; }
}
.cs-play[hidden] { display: none; }

/* Piece 2 (24 Oct): only the video for now, dead centre, square. The texts stay in the template, hidden. */
.cs-caption, .cs-signup, .cs-small { display: none !important; }
.center-stage { place-content: center; padding-block: 0; }
.cs-screen { width: min(1000px, 90vw, calc(86vh * 1600 / 898)); aspect-ratio: 1600 / 898; }
.cs-screen .landing-reel { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cs-screen .portal-reel { object-fit: contain; }

/* Piece 3 (24 Oct): the background is a colour-graded in-game shot of Kalasatama from the air (tools/bg_grade.py),
   instead of the Tron grid. Clicking the video pauses / plays it. */
.grid-bg { display: none; }
.photo-bg { position: fixed; inset: 0; z-index: 0; background: #2a3c58 url("media/bg-city.jpg") center 55% / cover no-repeat; }
@media (max-width: 1300px) { .photo-bg { background-image: url("media/bg-city-1280.jpg"); } }
.photo-bg::after { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 50%, rgba(10, 20, 40, 0) 40%, rgba(10, 20, 40, 0.35) 100%); }
.cs-screen .landing-reel { cursor: pointer; }
.cs-screen { border-color: rgba(255, 255, 255, 0.9); box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.4), 0 24px 60px rgba(8, 18, 36, 0.45); }
.corner-logo { filter: drop-shadow(0 10px 22px rgba(8, 18, 36, 0.4)); }

/* Piece 4 (24 Oct): minimal footer, one small line under the video. Credits and company details are on their pages. */
.lp-foot { margin-top: 14px; color: rgba(255, 255, 255, 0.82); font: 500 12px/1.4 var(--font-body); text-align: center;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.55); }
.lp-foot a { color: inherit; text-decoration: none; }
.lp-foot a:hover, .lp-foot a:focus-visible { color: #fff; text-decoration: underline; }
/* Footer pinned to the bottom of the page, between the bottom logos, not tied to the video. */
.lp-foot { position: fixed; left: 50%; bottom: max(10px, env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); z-index: 3; margin: 0; white-space: nowrap; }
@media (max-width: 700px) { .lp-foot { white-space: normal; width: 92vw; } }

/* Style pass (24 Oct): the video starts paused with a play button; the background photo is softened so it stays behind
   the video; the date line and countdown are restyled for the photo (white frosted glass instead of the Tron neon). */
.reel-play { position: absolute; left: 50%; top: 50%; width: 92px; height: 92px; transform: translate(-50%, -50%); border: 0; border-radius: 50%;
  background: rgba(255, 255, 255, 0.88); box-shadow: 0 10px 30px rgba(8, 18, 36, 0.35); cursor: pointer; }
.reel-play::before { content: ""; position: absolute; left: 36px; top: 28px; border-style: solid; border-width: 18px 0 18px 30px;
  border-color: transparent transparent transparent #12355b; }
.reel-play:hover { background: #fff; }
.reel-play:focus-visible { outline: 3px solid #fff; outline-offset: 4px; }
.reel-play[hidden] { display: none; }

.photo-bg { filter: saturate(0.8) blur(1.5px); transform: scale(1.02); }
.photo-bg::after { background: linear-gradient(180deg, rgba(18, 36, 66, 0.30), rgba(18, 36, 66, 0.42)); }

.cs-when { color: #fff; text-shadow: 0 1px 8px rgba(8, 18, 36, 0.6); letter-spacing: .1em; }
.center-stage .countdown div { background: rgba(255, 255, 255, 0.16); border: 1px solid rgba(255, 255, 255, 0.45);
  box-shadow: 0 8px 24px rgba(8, 18, 36, 0.25); backdrop-filter: blur(10px); }
.center-stage .countdown b { color: #fff; text-shadow: 0 2px 10px rgba(8, 18, 36, 0.5); font-family: var(--font-head); }
.center-stage .countdown span { color: rgba(255, 255, 255, 0.82); }
.cs-play { background: #fff; color: #12355b; box-shadow: 0 10px 30px rgba(8, 18, 36, 0.35); }

/* Piece 5 (24 Oct): the pitch line above the video, the Founders / Everyone cards and the email form under it.
   The video is smaller now so all of it fits on one desktop screen. */
.center-stage { gap: 14px; padding-block: 28px 44px; }
.cs-screen { width: min(820px, 80vw, calc(48vh * 1600 / 898)); }
.lp-pitch { text-align: center; display: grid; gap: 4px; }
.lp-pitch-main { margin: 0; color: #fff; font: 600 clamp(20px, 2.1vw, 28px)/1.2 var(--font-head); text-shadow: 0 2px 14px rgba(8, 18, 36, 0.65); text-wrap: balance; }
.lp-pitch-sub { margin: 0; color: rgba(255, 255, 255, 0.85); font: 500 13px/1.3 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; text-shadow: 0 1px 8px rgba(8, 18, 36, 0.6); }
.lp-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; width: min(820px, 92vw); }
.lp-card { display: grid; gap: 8px; align-content: start; padding: 16px 18px; border-radius: 16px; color: #fff;
  background: rgba(255, 255, 255, 0.14); border: 1px solid rgba(255, 255, 255, 0.4); backdrop-filter: blur(10px); box-shadow: 0 10px 30px rgba(8, 18, 36, 0.25); }
.lp-card-founder { background: rgba(255, 255, 255, 0.22); border-color: rgba(255, 255, 255, 0.7); }
.lp-card-when { margin: 0; font: 600 12px/1.3 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: rgba(255, 255, 255, 0.85); }
.lp-card-title { margin: 0; font: 700 26px/1.1 var(--font-head); color: #fff; }
.lp-card-list { margin: 0; padding-left: 18px; display: grid; gap: 3px; font: 500 15px/1.4 var(--font-body); color: rgba(255, 255, 255, 0.95); }
.lp-card .countdown { margin-top: 6px; gap: 6px; }
.lp-card .countdown div { padding: 6px 4px 5px; }
.lp-card .countdown b { font-size: 26px; }
.lp-card [data-check] { outline: 1px dashed rgba(255, 210, 120, 0.9); outline-offset: 2px; }
.lp-signup { width: min(520px, 92vw); display: grid; gap: 6px; }
.lp-signup .signup-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; }
.lp-signup input[type=email] { min-width: 0; background: #fff; color: #12355b; border: 0; border-radius: 999px; padding: 13px 18px; font: 500 16px var(--font-body); }
.lp-signup input[type=email]::placeholder { color: rgba(18, 53, 91, 0.5); }
.lp-signup .btn-primary { border-radius: 999px; background: #12355b; color: #fff; border: 2px solid #fff; padding: 0 20px; font: 600 15px/1 var(--font-body); white-space: nowrap; }
.lp-signup-fine { margin: 0; text-align: center; font: 500 12.5px/1.4 var(--font-body); color: rgba(255, 255, 255, 0.85); text-shadow: 0 1px 6px rgba(8, 18, 36, 0.6); }
.lp-signup-fine a { color: #fff; }
@media (max-width: 700px) { .lp-cards { grid-template-columns: 1fr; } }
.lp-pitch { max-width: min(560px, 80vw); }

/* Three cards: Founder (29.10.), Citizen and Free (5.11.). */
.lp-cards { grid-template-columns: 1.25fr 1fr 1fr; width: min(900px, 92vw); }
@media (max-width: 800px) { .lp-cards { grid-template-columns: 1fr; } }

/* Yellow cards (24 Oct): Helsinki tram yellow with dark navy text; Founders brightest. One countdown above the cards. */
.lp-countdown { display: grid; justify-items: center; gap: 6px; }
.lp-countdown-label { margin: 0; color: #fff; font: 600 13px/1.3 var(--font-mono); letter-spacing: .1em; text-transform: uppercase;
  text-shadow: 0 1px 8px rgba(8, 18, 36, 0.6); }
.lp-countdown .countdown { gap: 8px; }
.lp-countdown .countdown div { padding: 8px 12px 6px; min-width: 64px; }
.lp-countdown .countdown b { font-size: 32px; }
.lp-card { background: #ffe58a; border: 2px solid #f2c21b; color: #12355b; backdrop-filter: none; box-shadow: 0 10px 26px rgba(8, 18, 36, 0.3); }
.lp-card-founder { background: #ffd23f; border-color: #12355b; }
.lp-card-when { color: rgba(18, 53, 91, 0.75); }
.lp-card-title { color: #12355b; }
.lp-card-list { color: #12355b; }
.lp-card [data-check] { outline-color: rgba(18, 53, 91, 0.6); }
/* Fit on one desktop screen: smaller video, tighter cards, room for the footer. */
.center-stage { gap: 10px; padding-block: 20px 52px; }
.cs-screen { width: min(720px, 72vw, calc(40vh * 1600 / 898)); }
.lp-card { padding: 12px 14px; gap: 4px; }
.lp-card-title { font-size: 22px; }
.lp-card-list { font-size: 14px; gap: 2px; }
.lp-countdown .countdown b { font-size: 26px; }
.lp-countdown .countdown div { padding: 6px 10px 4px; min-width: 56px; }

.lp-signup-title { margin: 4px 0 0; text-align: center; color: #fff; font: 600 17px/1.25 var(--font-head); text-shadow: 0 1px 10px rgba(8, 18, 36, 0.65); }

/* Tickets (24 Oct). Warm paper, a coloured band on the left (HSL tram yellow for Founders, tram green for Citizen,
   sky blue for Visitor), the price big at top right, and a perforated stub at the bottom with the date. */
.lp-tickets { display: grid; grid-template-columns: 1.2fr 1fr 1fr; gap: 14px; width: min(940px, 92vw); align-items: stretch; }
.lp-ticket { position: relative; display: grid; grid-template-rows: auto 1fr auto; border-radius: 14px; overflow: hidden;
  background: #fffaf0; color: #12355b; box-shadow: 0 12px 30px rgba(8, 18, 36, 0.32); border-left: 10px solid var(--band, #ffcc1f); }
.t-founder { --band: #ffcc1f; background: #fff3c9; }
.t-citizen { --band: #2fae4f; }
.t-free { --band: #3aa0e8; }
.t-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding: 12px 14px 4px; }
.t-name { margin: 0; font: 700 21px/1.1 var(--font-head); }
.t-price { margin: 0; font: 700 21px/1 var(--font-head); white-space: nowrap; }
.t-list { margin: 0; padding: 4px 14px 10px 30px; display: grid; gap: 3px; font: 500 13.5px/1.38 var(--font-body); }
.t-stub { position: relative; padding: 8px 14px 10px; border-top: 2px dashed rgba(18, 53, 91, 0.25); background: rgba(18, 53, 91, 0.04);
  display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.t-stub::before, .t-stub::after { content: ""; position: absolute; top: -9px; width: 16px; height: 16px; border-radius: 50%; background: rgba(30, 45, 70, 0.9); }
.t-stub::before { left: -18px; } .t-stub::after { right: -8px; }
.t-when { margin: 0; font: 600 12px/1.2 var(--font-mono); letter-spacing: .06em; text-transform: uppercase; color: rgba(18, 53, 91, 0.8); }
.t-founder .t-stub { background: #ffcc1f; }
.t-founder .t-when { color: #12355b; }
.t-countdown.countdown { display: flex; gap: 6px; }
.t-countdown.countdown div { display: flex; align-items: baseline; gap: 2px; padding: 0; background: none; border: 0; box-shadow: none; backdrop-filter: none; min-width: 0; }
.t-countdown.countdown b { font: 700 18px/1 var(--font-mono); color: #12355b; text-shadow: none; }
.t-countdown.countdown span { font: 600 11px/1 var(--font-mono); color: rgba(18, 53, 91, 0.75); letter-spacing: 0; text-transform: none; }
.lp-ticket [data-check] { outline: 1px dashed rgba(18, 53, 91, 0.5); outline-offset: 2px; }
@media (max-width: 860px) { .lp-tickets { grid-template-columns: 1fr; } }
.t-list { align-content: start; }
.t-stub::before { display: none; }
.t-stub::after { right: -8px; background: rgba(40, 55, 80, 0.85); }
.lp-support { margin: 2px 0 0; max-width: min(640px, 90vw); text-align: center; color: #fff; font: 500 14px/1.4 var(--font-body); text-shadow: 0 1px 8px rgba(8, 18, 36, 0.7); }
.t-tag { margin: 0; padding: 0 14px 4px; font: italic 500 13.5px/1.4 var(--font-head); color: rgba(18, 53, 91, 0.9); }
/* Founders in the middle, the two others shorter beside it (no stretched empty space). */
.lp-tickets { grid-template-columns: 1fr 1.25fr 1fr; align-items: center; }
.t-free { order: 1; } .t-founder { order: 2; } .t-citizen { order: 3; }
.t-free, .t-citizen { grid-template-rows: auto auto auto; }
.t-founder { transform: scale(1.03); z-index: 1; }
@media (max-width: 860px) { .t-founder { order: 0; transform: none; } }
/* Ticket paper texture: fine grain (SVG noise), faint security-print lines like a real transit ticket, and a soft
   inner edge. All overlays, so the text and colours underneath stay as they are. */
.lp-ticket { isolation: isolate; box-shadow: 0 12px 30px rgba(8, 18, 36, 0.32), inset 0 0 0 1px rgba(18, 53, 91, 0.08), inset 0 -18px 30px -24px rgba(120, 90, 30, 0.25); }
.lp-ticket::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .55; mix-blend-mode: multiply;
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.45  0 0 0 0 0.38  0 0 0 0 0.25  0 0 0 .55 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>"),
    repeating-linear-gradient(115deg, rgba(18, 53, 91, 0.035) 0 1px, transparent 1px 7px); }
.lp-ticket > * { position: relative; }
.t-founder .t-stub { background-image: repeating-linear-gradient(115deg, rgba(18, 53, 91, 0.06) 0 1px, transparent 1px 6px); background-color: #ffcc1f; }
/* Fanned tickets (24 Oct): the side tickets tilt outward like a hand of cards, Founders sits straight and raised in
   front. Hover lifts a ticket and straightens it. Deeper, layered shadows for depth. */
.lp-ticket { transition: transform .25s cubic-bezier(.2, .8, .2, 1), box-shadow .25s; will-change: transform;
  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.08), 0 14px 28px rgba(8, 18, 36, 0.35), 0 30px 60px rgba(8, 18, 36, 0.22),
              inset 0 0 0 1px rgba(18, 53, 91, 0.08), inset 0 -18px 30px -24px rgba(120, 90, 30, 0.25); }
.t-free { transform: rotate(-3deg) translate(10px, 8px); transform-origin: 100% 100%; }
.t-citizen { transform: rotate(2.5deg) translate(-10px, 6px); transform-origin: 0% 100%; }
.t-founder { transform: translateY(-6px) scale(1.04); z-index: 2; }
.lp-ticket:hover { transform: translateY(-10px) rotate(0deg) scale(1.05); z-index: 3;
  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.08), 0 22px 40px rgba(8, 18, 36, 0.42), 0 44px 80px rgba(8, 18, 36, 0.25); }
@media (max-width: 860px) { .t-free, .t-citizen, .t-founder { transform: none; } }
@media (prefers-reduced-motion: reduce) { .lp-ticket { transition: none; } }

/* Scroll page (24 Oct). Background and corner logos are position: fixed and stay; the stage and the sections scroll
   between them; the footer is fixed at the bottom. Sections sit in a middle column on soft dark glass. */

.center-stage { min-height: 100vh; min-height: 100svh; }
.lp-section { position: relative; z-index: 2; width: min(900px, 90vw); margin: 0 auto 56px; box-sizing: border-box; padding: 26px 28px;
  border-radius: 20px; background: rgba(10, 22, 44, 0.62); backdrop-filter: blur(12px); color: #fff; box-shadow: 0 20px 50px rgba(8, 18, 36, 0.35); }
.lp-section:last-of-type { margin-bottom: 90px; }
.lp-h2 { margin: 0 0 16px; font: 700 28px/1.15 var(--font-head); color: #fff; }
.lp-feat-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.lp-feat { margin: 0; display: grid; gap: 8px; }
.lp-feat video { width: 100%; aspect-ratio: 1600 / 898; object-fit: cover; border-radius: 12px; background: #000; border: 2px solid rgba(255, 255, 255, 0.8); }
.lp-feat figcaption { display: grid; gap: 2px; }
.lp-feat b { font: 700 17px/1.2 var(--font-head); }
.lp-feat span { font: 500 14px/1.4 var(--font-body); color: rgba(255, 255, 255, 0.85); }
.lp-faq details { border-top: 1px solid rgba(255, 255, 255, 0.18); padding: 12px 0; }
.lp-faq details:last-of-type { border-bottom: 1px solid rgba(255, 255, 255, 0.18); }
.lp-faq summary { cursor: pointer; font: 600 17px/1.3 var(--font-head); list-style: none; display: flex; justify-content: space-between; gap: 12px; }
.lp-faq summary::after { content: "+"; font-size: 22px; line-height: 1; }
.lp-faq details[open] summary::after { content: "\2212"; }
.lp-faq summary::-webkit-details-marker { display: none; }
.lp-faq p { margin: 8px 0 0; color: rgba(255, 255, 255, 0.88); font: 500 15px/1.5 var(--font-body); max-width: 65ch; }
.lp-dev { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 24px; align-items: center; }
.lp-dev-photo { aspect-ratio: 4 / 5; border-radius: 16px; border: 2px dashed rgba(255, 255, 255, 0.6); display: grid; place-content: center;
  text-align: center; padding: 12px; color: rgba(255, 255, 255, 0.8); font: 500 14px/1.4 var(--font-body); }
.lp-dev-text p { margin: 0 0 10px; font: 500 16px/1.5 var(--font-body); color: rgba(255, 255, 255, 0.92); }
.lp-dev-links { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 6px; }
.lp-btn-discord { display: inline-flex; align-items: center; gap: 8px; padding: 11px 18px; border-radius: 999px; background: #5865f2; color: #fff;
  text-decoration: none; font: 600 15px/1 var(--font-body); box-shadow: 0 6px 16px rgba(8, 18, 36, 0.3); }
.lp-btn-discord:hover { filter: brightness(1.08); }
.lp-btn-ghost { display: inline-flex; align-items: center; padding: 11px 18px; border-radius: 999px; border: 2px solid rgba(255, 255, 255, 0.7);
  color: #fff; text-decoration: none; font: 600 15px/1 var(--font-body); }
.lp-discord-under { justify-self: center; padding: 8px 14px; font-size: 14px; }
.lp-foot { z-index: 4; display: flex; align-items: center; gap: 14px; padding: 6px 14px; border-radius: 999px; background: rgba(10, 22, 44, 0.5); backdrop-filter: blur(8px); }
.lp-socials { display: inline-flex; gap: 10px; }
.lp-socials a { display: inline-flex; }
.lp-socials svg { width: 16px; height: 16px; fill: rgba(255, 255, 255, 0.85); }
.lp-socials a:hover svg { fill: #fff; }
@media (max-width: 860px) {
  .lp-feat-grid { grid-template-columns: 1fr 1fr; }
  .lp-dev { grid-template-columns: 1fr; }
  .lp-foot { flex-wrap: wrap; justify-content: center; border-radius: 14px; }
}

/* Discord buttons: the Discord mark, Discord's own blurple, a bevel and a lift on hover. */
.lp-btn-discord { gap: 10px; padding: 12px 22px 12px 18px; background: linear-gradient(180deg, #6b77ff, #5865f2 55%, #4752c4);
  border: 1px solid rgba(255, 255, 255, 0.35); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), 0 4px 0 #3a43a6, 0 10px 22px rgba(8, 18, 36, 0.35);
  font: 700 15px/1 var(--font-body); letter-spacing: .01em; transition: transform .15s, box-shadow .15s; }
.lp-btn-discord:hover { transform: translateY(-2px); filter: none; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), 0 6px 0 #3a43a6, 0 14px 26px rgba(8, 18, 36, 0.4); }
.lp-btn-discord:active { transform: translateY(2px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), 0 1px 0 #3a43a6, 0 6px 14px rgba(8, 18, 36, 0.35); }
.lp-btn-discord .dc-logo { width: 22px; height: 22px; fill: #fff; flex: none; }
.lp-discord-under { padding: 10px 18px 10px 14px; font-size: 14px; }
.lp-discord-under .dc-logo { width: 19px; height: 19px; }

/* The developer photo is landscape (the bathroom and the cables are the point), so it gets the wider column. */
.lp-dev { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); }
img.lp-dev-photo { width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; border: 2px solid rgba(255, 255, 255, 0.8); padding: 0; display: block; }
/* Bigger footer icons, with a hover lift and a little more room. */
.lp-socials { gap: 14px; margin-left: 4px; }
.lp-socials svg { width: 20px; height: 20px; transition: transform .15s; }
.lp-socials a:hover svg { transform: translateY(-1px) scale(1.1); }

/* Social row on the first screen: round frosted buttons, readable at a glance. */
.lp-follow { display: flex; align-items: center; gap: 12px; justify-content: center; flex-wrap: wrap; }
.lp-follow-label { color: #fff; font: 600 13px/1 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; text-shadow: 0 1px 8px rgba(8, 18, 36, 0.6); }
.lp-socials-big { gap: 10px; margin: 0; }
.lp-socials-big a { width: 42px; height: 42px; border-radius: 50%; align-items: center; justify-content: center;
  background: rgba(255, 255, 255, 0.16); border: 1px solid rgba(255, 255, 255, 0.45); backdrop-filter: blur(8px);
  box-shadow: 0 6px 16px rgba(8, 18, 36, 0.3); transition: transform .15s, background .15s; }
.lp-socials-big a:hover { transform: translateY(-2px); background: rgba(255, 255, 255, 0.3); }
.lp-socials-big svg { width: 22px; height: 22px; fill: #fff; transform: none !important; }

.lp-steam-link { color: inherit; text-decoration: underline; text-decoration-color: rgba(255, 255, 255, 0.5); text-underline-offset: 3px; }
.lp-steam-link:hover { color: #fff; text-decoration-color: #fff; }

/* The main video autoplays and can't be paused (no controls, clicks pass through). */
.cs-screen .landing-reel { cursor: default; pointer-events: none; }
/* Bigger video, grown downwards: its top stays where it was, the extra height goes under the tickets
   (negative bottom margin keeps everything after it in place; the tickets sit on top of the video's lower part). */
.cs-screen { width: min(1080px, 84vw, calc(58vh * 1600 / 898)); margin-bottom: calc(-1 * (min(1080px, 84vw, calc(58vh * 1600 / 898)) - min(720px, 72vw, calc(40vh * 1600 / 898))) * 898 / 1600); z-index: 1; }
.lp-tickets { position: relative; z-index: 3; }
/* Balance: the tickets cover only the bottom ~15 % of the video (half the earlier overlap). The space comes from
   putting the Discord button and the follow icons on one row under the email form. */
.cs-screen { margin-bottom: calc(-0.45 * (min(1080px, 84vw, calc(58vh * 1600 / 898)) - min(720px, 72vw, calc(40vh * 1600 / 898))) * 898 / 1600); }
.center-stage { gap: 8px; padding-block: 16px 48px; }
.lp-social-row { display: flex; align-items: center; justify-content: center; gap: 18px; flex-wrap: wrap; }
.lp-social-row .lp-discord-under { justify-self: auto; }
.lp-signup-fine { margin-top: 2px; }
/* Footer at the very bottom of the page (after the last section), not pinned to the screen. */
.lp-foot { position: relative; left: auto; bottom: auto; transform: none; width: fit-content; max-width: 92vw; margin: 0 auto 28px; }
.center-stage { padding-block: 16px 28px; }
.lp-section:last-of-type { margin-bottom: 40px; }

/* The time-limited Founder badge line on the Supporter ticket. */
.t-list .t-badge { font-weight: 700; color: #a04a00; }

/* Sign-up status line on the photo: white, centred, readable. */
.lp-signup .signup-status { margin: 4px 0 0; text-align: center; color: #fff; font: 600 15px/1.4 var(--font-body); text-shadow: 0 1px 8px rgba(8, 18, 36, 0.8); }
.lp-signup.done .signup-row { opacity: .75; }

/* Phones and tablets (25 Oct). Up to 900 px: no fixed corner logos (they are not even downloaded, see the <picture>
   blanks in template.html); one logo at the top of the page instead, with its ribbons running into the screen edges.
   Everything stacks in one column: pitch, video, the "play on your PC" note and the email sign-up (the main action on
   a phone), then the tickets with Supporter first, then Discord and the follow icons. No tilt, 44 px+ tap targets. */
.phone-logo { display: none; }
@media (max-width: 900px) {
  html, body { overflow-x: clip; }
  .corner-logo { display: none; }
  .phone-logo { display: block; order: 0; width: 100vw; max-width: 500px; margin: -4px 0 -10px; pointer-events: none;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
            mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%); }
  .phone-logo img { width: 100%; height: auto; filter: drop-shadow(0 8px 18px rgba(8, 18, 36, 0.4)); }

  .center-stage { display: flex; flex-direction: column; align-items: center; min-height: 0; gap: 14px;
    padding: 8px max(16px, env(safe-area-inset-right, 0px)) 28px max(16px, env(safe-area-inset-left, 0px)); }
  .lp-pitch { order: 1; max-width: 100%; }
  .lp-pitch-main { font-size: clamp(22px, 6vw, 30px); }
  .lp-pitch-sub { font-size: 13px; }
  .lp-steam-link { display: inline-block; padding: 14px 4px; margin: -10px 0; }
  .cs-screen { order: 2; width: 100%; max-width: 720px; margin-bottom: 0; border-radius: 12px; }
  .lp-phone-note { order: 3; }
  .lp-signup { order: 4; }
  .lp-tickets { order: 5; }
  .lp-social-row { order: 6; }

  .lp-phone-note { width: 100%; max-width: 560px; box-sizing: border-box; margin: 2px 0 0; padding: 14px 16px; border-radius: 14px;
    background: rgba(10, 22, 44, 0.66); border: 1px solid rgba(255, 255, 255, 0.35); backdrop-filter: blur(10px);
    color: rgba(255, 255, 255, 0.92); font: 500 15px/1.5 var(--font-body); }
  .lp-phone-note .phone-note-title { color: #fff; font-size: 17px; }

  .lp-signup { width: 100%; max-width: 560px; gap: 10px; }
  .lp-signup-title { font-size: 20px; }
  .lp-signup .signup-row { grid-template-columns: 1fr; gap: 10px; }
  .lp-signup input[type=email] { min-height: 50px; box-sizing: border-box; font-size: 17px; }
  .lp-signup .btn-primary { min-height: 50px; font-size: 16px; }
  .lp-signup-fine { font-size: 13.5px; }
  .lp-signup-fine a { display: inline-block; padding: 13px 2px; margin: -13px 0; }

  .lp-tickets { width: 100%; max-width: 560px; grid-template-columns: 1fr; gap: 16px; margin-top: 6px; }
  .lp-ticket, .lp-ticket:hover, .t-free, .t-citizen, .t-founder { transform: none; }
  .t-founder { order: 0; } .t-citizen { order: 1; } .t-free { order: 2; }
  .t-name, .t-price { font-size: 23px; }
  .t-list { font-size: 15.5px; gap: 5px; padding-right: 16px; }
  .t-tag { font-size: 15px; }
  .t-when { font-size: 12.5px; }
  .t-countdown.countdown b { font-size: 20px; }

  .lp-social-row { flex-direction: column; gap: 14px; margin-top: 6px; }
  .lp-discord-under { min-height: 48px; box-sizing: border-box; padding: 12px 22px 12px 18px; font-size: 16px; }
  .lp-socials-big a { width: 48px; height: 48px; }

  .lp-section { width: auto; margin: 0 16px 24px; padding: 22px 18px; border-radius: 16px; }
  .lp-section:last-of-type { margin-bottom: 28px; }
  .lp-h2 { font-size: 26px; overflow-wrap: anywhere; }
  .lp-feat-grid { grid-template-columns: 1fr 1fr; gap: 18px; }
  .lp-feat b { font-size: 18px; }
  .lp-feat span { font-size: 15px; }
  .lp-faq summary { min-height: 44px; align-items: center; font-size: 17px; }
  .lp-faq p { font-size: 16px; }
  .lp-dev { grid-template-columns: 1fr; gap: 18px; }
  .lp-dev-text p { font-size: 16px; }
  .lp-btn-discord, .lp-btn-ghost { min-height: 48px; box-sizing: border-box; }

  .lp-foot { flex-wrap: wrap; justify-content: center; gap: 0 4px; width: auto; max-width: none; margin: 0 16px 24px; padding: 8px 12px;
    border-radius: 14px; white-space: normal; font-size: 13.5px; line-height: 1.2; }
  .lp-foot a { display: inline-block; padding: 14px 6px; }
}
@media (max-width: 560px) {
  .lp-feat-grid { grid-template-columns: 1fr; }
}
/* Tablets: Supporter across the top, Citizen and Visitor side by side under it. */
@media (min-width: 640px) and (max-width: 900px) {
  .lp-tickets { max-width: 720px; grid-template-columns: 1fr 1fr; align-items: stretch; }
  .t-founder { grid-column: 1 / -1; }
  .lp-signup { max-width: 600px; }
  .lp-signup .signup-row { grid-template-columns: minmax(0, 1fr) auto; }
  .lp-phone-note { max-width: 600px; }
}