/* MAKE 10 landing page. Tokens match the game (app-v2/theme.css): orange + sky, ink outlines, Helvetica Bold.
   Flat only: solid fills, no shadows, no gradients. THE STROKE RULE: every object (button, tile, field, plate, card)
   gets one --stroke outline; scenery (sky, clouds, platform) has none. */
:root {
  --c-ink: #111111;
  --c-orange: #F26A0A;
  --c-orange-dk: #D45A05;   /* pressed button */
  --c-sky: #5DB9F2;
  --c-yellow: #FFC20E;
  --c-white: #FFFFFF;
  --c-panel: #EEEFEB;
  --c-wall: #D4D6D3;
  --c-muted: #4F5451;       /* secondary text: 7:1+ on white, AA on --c-panel */
  --c-plat: #C4C7C3;
  --c-plat-dk: #A9ADA9;
  --font: "Helvetica Neue", Helvetica, Arial, -apple-system, system-ui, sans-serif;
  --stroke-w: 2.5px;
  --stroke: var(--stroke-w) solid var(--c-ink);
  --r-tile: 10px;
  --r-btn: 14px;
  --r-card: 18px;
  --gut: 20px;
  --max: 1120px;
  --focus: 0 0 0 3px var(--c-white), 0 0 0 6px var(--c-ink);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; background: var(--c-white); color: var(--c-ink); font: 400 17px/1.5 var(--font); }
img, svg { display: block; }
a { color: inherit; text-underline-offset: 3px; text-decoration-thickness: 2px; }
h1, h2, h3 { font-weight: 700; margin: 0; letter-spacing: -0.02em; line-height: 1.1; }
p { margin: 0; }
:focus-visible { outline: none; box-shadow: var(--focus); border-radius: 6px; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 10; background: var(--c-white); border: var(--stroke); border-radius: var(--r-btn);
  padding: 10px 14px; font-weight: 700; text-decoration: none; }
.skip:focus { top: 12px; }

/* ---------- buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 56px; padding: 0 22px; border: var(--stroke);
  border-radius: var(--r-btn); font: 700 20px/1 var(--font); letter-spacing: 0.01em; text-decoration: none; cursor: pointer;
  transition: transform 120ms ease, background-color 120ms ease; }
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--c-orange); color: var(--c-white); }
.btn-primary:hover { background: var(--c-orange-dk); }
.btn-primary:disabled { cursor: default; }
.btn-ghost { background: var(--c-white); color: var(--c-ink); }
.btn-ghost:hover { background: var(--c-panel); }

/* ---------- hero: the sky, the lockup, the sign-up, the phone ---------- */
.hero { position: relative; background: var(--c-sky); overflow: hidden; }
.clouds { position: absolute; inset: 0 0 auto 0; height: 120px; pointer-events: none; }
.cloud { position: absolute; left: 100%; height: auto; animation: drift linear infinite; }
.c1 { top: 12px; width: 92px; animation-duration: 75s; animation-delay: -10s; }
.c2 { top: 40px; width: 112px; animation-duration: 75s; animation-delay: -35s; }
.c3 { top: 84px; width: 66px; animation-duration: 75s; animation-delay: -60s; }
@keyframes drift { from { transform: translateX(0); } to { transform: translateX(calc(-100vw - 140px)); } }

.hero-in { position: relative; max-width: var(--max); margin: 0 auto; padding: 36px var(--gut) 0;
  display: grid; grid-template-columns: 1fr; justify-items: center; gap: 40px; }
.hero-copy { width: 100%; max-width: 440px; display: flex; flex-direction: column; align-items: center; text-align: center; }
/* the lockup block (owner note 49, the game's home screen): the roundel centred ON TOP of the two lines, the block as wide
   as the lines (main.js fits them), so on desktop the stack sits left in its column but stays centred within itself */
.brand { display: flex; flex-direction: column; align-items: center; width: 100%; max-width: 440px; }
.roundel { width: 112px; height: 112px; margin-bottom: 16px; }

/* the lockup: the game's menu title. main.js fits both lines to the same width (like the game's fitLockup) */
.lockup { display: flex; flex-direction: column; align-items: center; width: 100%; text-align: center; }
.h-small { font-size: 31px; line-height: 1.05; letter-spacing: -0.012em; white-space: nowrap; }
.h-big { font-size: 68px; line-height: 0.92; letter-spacing: -0.035em; text-transform: uppercase; white-space: nowrap; margin-top: 2px; }
.lede { margin-top: 18px; font-size: 19px; line-height: 1.4; max-width: 34ch; }

.signup { width: 100%; margin-top: 26px; text-align: left; }
.signup-label { display: block; font-weight: 700; font-size: 16px; margin: 0 0 8px 2px; }
.signup-row { display: flex; gap: 10px; }
.signup input[type=email] { flex: 1; min-width: 0; height: 56px; padding: 0 16px; border: var(--stroke); border-radius: var(--r-btn);
  background: var(--c-white); color: var(--c-ink); font: 400 18px/1 var(--font); }
.signup input[type=email]::placeholder { color: #6B706D; }
.signup input[type=email]:focus-visible { box-shadow: 0 0 0 4px var(--c-orange); }
.signup input[aria-invalid=true] { box-shadow: 0 0 0 4px var(--c-white); }
.signup .btn { flex: none; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.signup-consent { margin: 8px 0 0 2px; font-size: 14px; line-height: 1.35; }
.signup.done .signup-consent { display: none; }
.signup-msg { min-height: 1.5em; margin: 8px 0 0 2px; font-size: 16px; font-weight: 700; }
.signup.done .signup-row { display: none; }
.signup.done .signup-msg { background: var(--c-white); border: var(--stroke); border-radius: var(--r-btn); padding: 14px 16px; margin: 0; }

.store-pill { display: inline-flex; align-items: center; gap: 12px; margin-top: 14px; padding: 9px 22px 9px 16px; border: var(--stroke);
  border-radius: 999px; background: var(--c-white); text-align: left; }
.store-pill .dot { width: 12px; height: 12px; border-radius: 50%; background: var(--c-orange); flex: none; }
.pill-txt { display: flex; flex-direction: column; line-height: 1.15; }
.pill-k { font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--c-muted); }
.pill-v { font-size: 17px; font-weight: 700; }

/* the phone: a generic flat handset (no brand details), the game's real screens crossfading inside */
.phone-wrap { margin: 0 0 28px; display: flex; flex-direction: column; align-items: center; gap: 12px; position: relative; z-index: 1; }
.phone { position: relative; width: min(270px, 72vw); aspect-ratio: 390 / 844; box-sizing: content-box; padding: 10px;
  background: var(--c-ink); border-radius: 46px; }
.screen { position: relative; width: 100%; height: 100%; border-radius: 36px; overflow: hidden; background: var(--c-sky); }
.shot { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; transition: opacity 600ms ease; }
.shot.is-on { opacity: 1; }
.cam { position: absolute; top: 20px; left: 50%; width: 30%; height: 20px; margin-left: -15%; border-radius: 10px; background: var(--c-ink); }
.phone-wrap figcaption { display: flex; align-items: center; gap: 10px; font-size: 14px; }
.pause { min-height: 32px; padding: 0 12px; border: 2px solid var(--c-ink); border-radius: 999px; background: var(--c-white);
  font: 700 13px/1 var(--font); color: var(--c-ink); cursor: pointer; }

/* the platform edge the phone stands on: coping, the yellow line with its tactile dots, paving */
.platform { position: relative; height: 56px; background: var(--c-plat);
  border-top: 14px solid var(--c-yellow); }
.platform::before { content: ""; position: absolute; left: 0; right: 0; top: -10px; height: 6px;
  background: radial-gradient(circle, #E0A800 2.5px, transparent 3px) 0 0 / 16px 6px repeat-x; }
.platform::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 24px; background: var(--c-plat-dk); }

/* ---------- how to play ---------- */
section { padding: 64px var(--gut); }
section h2 { font-size: 34px; }
.how { max-width: var(--max); margin: 0 auto; }
.how > h2 { text-align: center; }
.steps { list-style: none; margin: 32px 0 0; padding: 0; display: grid; gap: 36px; }
.step { text-align: center; display: flex; flex-direction: column; align-items: center; }
.step .art { height: 120px; display: flex; align-items: center; justify-content: center; margin-bottom: 18px; }
.step h3 { font-size: 22px; display: flex; align-items: center; gap: 10px; }
.step h3 .n { width: 30px; height: 30px; border-radius: 50%; background: var(--c-ink); color: var(--c-white); font-size: 16px;
  display: inline-flex; align-items: center; justify-content: center; letter-spacing: 0; }
.step p { margin-top: 8px; max-width: 30ch; color: var(--c-muted); }
.step p .sr + * { margin: 0; }

/* the game's tiles (white, ink outline, Helvetica Bold) */
.t { display: inline-flex; align-items: center; justify-content: center; background: var(--c-white); border: var(--stroke);
  border-radius: var(--r-tile); font-weight: 700; line-height: 1; color: var(--c-ink); }
.plate { display: flex; gap: 6px; padding: 10px; background: var(--c-panel); border: var(--stroke); border-radius: 14px; }
.plate .t { width: 48px; height: 72px; font-size: 54px; letter-spacing: -1px; }
.ops { display: grid; grid-template-columns: repeat(3, 48px); gap: 8px; }
.ops .t { height: 44px; }
.ops .t svg { width: 20px; height: 20px; fill: currentColor; }
.ops .br { font-size: 28px; padding-bottom: 3px; }
.rail { display: flex; flex-direction: column; align-items: center; color: var(--c-orange); }
.rail .sum { display: flex; align-items: center; gap: 3px; white-space: nowrap; }
.rail .t { width: 38px; height: 56px; font-size: 38px; letter-spacing: -1px; }
.rail .t.on { background: var(--c-orange); color: var(--c-white); }
.rail .g { width: 18px; height: 18px; fill: currentColor; margin: 0 2px; }
.rail .br { font-weight: 700; font-size: 40px; line-height: 1; padding-bottom: 4px; }
.rail .eq { font-weight: 700; font-size: 40px; letter-spacing: -0.03em; line-height: 1; margin-top: 4px; }
.step .art.tall { height: 120px; }

/* ---------- the story (the orange band) ---------- */
.story { background: var(--c-orange); }
.story-in { max-width: var(--max); margin: 0 auto; display: grid; gap: 40px; }
.story h2 { font-size: 30px; margin-bottom: 14px; }
.story p { font-size: 18px; max-width: 46ch; }
.story p + p { margin-top: 12px; }

/* ---------- the second sign-up button ---------- */
.again { display: flex; justify-content: center; padding: 56px var(--gut) 48px; background: var(--c-sky); }

/* ---------- footer ---------- */
/* owner note 38: the footer stays on the sky so it runs straight into the fence + tracks below (no dark band) */
.foot { background: var(--c-sky); color: var(--c-ink); padding: 0 var(--gut) 32px; font-size: 15px; display: grid; gap: 12px;
  justify-items: center; text-align: center; }
.foot p { max-width: 60ch; }
.foot details { max-width: 60ch; }
.foot summary { cursor: pointer; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; display: inline; }
.foot details p { margin-top: 8px; }
.foot :focus-visible { box-shadow: var(--focus); }
/* owner notes 42 + 54 (r9): "A [JetWorks wordmark] Game": "A" + "Game" in the UI font, only the wordmark in OCR-A; the co-creators smaller */
.makers { display: flex; flex-direction: column; align-items: center; gap: 8px; padding-bottom: 18px; margin-bottom: 6px;
  border-bottom: 2px solid rgba(17, 17, 17, 0.18); }
.makers .credit { font-size: 28px; font-weight: 400; letter-spacing: 0.01em; line-height: 1.2; }   /* owner 14 Oct: "A"/"Game" regular, to match the OCR-A line weight */
.makers .credit a { text-decoration: none; white-space: nowrap; }
.makers .credit a:hover .wordmark { background: var(--c-orange-dk); }
.makers .credit-co { font-size: 15px; }
.makers .nw { white-space: nowrap; }
@media (max-width: 559px) { .makers .sep { display: none; } .makers .credit-co .nw { display: block; } }
/* the JetWorks wordmark (OCR-A outlines, viewBox 5549 x 820: glyphs 780 tall, 20 units of air above + below, baseline at
   800 of 820) as a mask in the text colour. Optical sizing (r9): the glyphs' 780 units = Helvetica Neue's cap height
   (0.714em), so the box is 0.714 x 820/780 = 0.751em tall; an empty inline-block sits its bottom on the baseline, so it
   drops by the 20-unit air (0.018em) to put the OCR-A baseline on the text baseline. */
.wordmark { display: inline-block; height: 1.1em; /* owner 14 Oct (x2): A/Game clearly smaller than the wordmark (~45% taller than their caps) */ aspect-ratio: 5549 / 820; background: currentColor; vertical-align: baseline;
  position: relative; top: 0.018em; margin: 0 0.02em;
  -webkit-mask: url("assets/jetworks-wordmark.svg") center / contain no-repeat; mask: url("assets/jetworks-wordmark.svg") center / contain no-repeat; }

/* ---------- variant B (?v=b, owner note 39): MAKE + the roundel as the 10; the separate roundel goes; a calm skyline ---------- */
.h-b, .skyline { display: none; }
.v-b .h-a, .v-b .brand > .roundel { display: none; }
.v-b .h-b { display: block; }
.inline-10 { display: inline-block; height: 0.8em; width: 0.8em; vertical-align: -0.04em; margin-left: 0.08em; }
.v-b .skyline { display: block; position: absolute; left: 0; right: 0; bottom: 70px; height: 110px; pointer-events: none;
  background: url("assets/skyline.svg") no-repeat center bottom / auto 110px; }
.v-b .hero-in { z-index: 1; }
.v-b .phone-wrap { margin-bottom: 120px; }
.v-b .hero-in { padding-top: 128px; } /* the headline starts below the cloud band (no roundel above it in B) */
@media (min-width: 960px) {
  .v-b .skyline { height: 130px; background-size: auto 130px; }
  .v-b .hero-in { padding-top: 140px; }
  .v-b .phone-wrap { margin-bottom: 150px; } /* the caption + Pause stay on plain sky, above the skyline */
}

/* ---------- the ground (owner note 38): fence + tracks along the very bottom; all content sits above it ---------- */
.ground { height: 150px; background: var(--c-sky) url("assets/ground-tile.svg") repeat-x left bottom / 240px 150px; }

/* ---------- tablet + desktop ---------- */
@media (min-width: 720px) {
  :root { --gut: 32px; }
  .story-in { grid-template-columns: 1fr 1fr; gap: 56px; }
  section h2 { font-size: 40px; }
}
@media (min-width: 1000px) {
  .steps { grid-template-columns: repeat(3, 1fr); gap: 28px; }
}
@media (min-width: 960px) {
  .hero-in { grid-template-columns: minmax(0, 500px) auto; justify-content: center; align-items: center; justify-items: stretch; padding-top: 56px; gap: 96px; }
  .hero-copy { align-items: flex-start; text-align: left; max-width: 500px; }
  .lede { font-size: 21px; }
  .phone { width: 300px; }
  .phone-wrap { justify-self: start; }
}

/* ---------- motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .cloud { animation: none; left: auto; }
  .c1 { right: 8%; } .c2 { right: 62%; } .c3 { right: 30%; }
  .shot { transition: none; }
  .btn { transition: none; }
}

/* owner 14 Oct: the credit = "© JetWorks 2026", all OCR-A (brand/copyright-jetworks.svg, the © drawn to OCR-A stroke weight) */
.cr-mark { display: inline-block; height: 1.05em; aspect-ratio: 6839.289959839358 / 940; background: currentColor; vertical-align: baseline;
  -webkit-mask: url("assets/copyright-jetworks.svg") center / contain no-repeat; mask: url("assets/copyright-jetworks.svg") center / contain no-repeat; }

/* ---------- note 84: the SYDNEY HARBOUR backdrop (?scene=harbour or SCENE in the config; main.js harbour()) ----------
   The game's harbour menu, wide: back (sky, the Harbour Bridge, Sydney Tower, the CBD in one mid-blue, the water band,
   blue-green shrubs) → flat shimmer dashes → fore (the fence + tracks on a clear sky). Drawn 1 px per art unit, centred:
   the bridge never stretches; wider screens show more low CBD + shrubs. Generated by tools/harbour-scene.mjs. */
.hb-back, .hb-water, .hb-fore { position: absolute; left: 0; right: 0; bottom: var(--hb-bottom, 0px); height: 336px; pointer-events: none; overflow: hidden; }
.hb-back { background: url("assets/harbour-back-wide.svg") center bottom / auto 100% no-repeat; }
.hb-fore { background: url("assets/harbour-fore-wide.svg") center bottom / auto 100% no-repeat; }
.hb-dash {
  position: absolute; left: calc(50% + var(--x) * 1px); bottom: calc((756 - var(--y)) * 1px); width: calc(var(--w) * 1px); height: 2.6px;
  border-radius: 99px; background: #9AD8FB; will-change: transform;
  animation: hbShimmer var(--d) ease-in-out infinite alternate; animation-delay: calc(var(--d) * var(--k) * -2);
}
@keyframes hbShimmer { from { transform: translateX(-5px) scaleX(0.7); opacity: 0.55; } to { transform: translateX(5px) scaleX(1); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .hb-dash { animation: none; } }
/* the landing page: the harbour takes the place of the fence-tile ground along the very bottom (the footer sits on the sky) */
.scene-harbour .ground { position: relative; height: 336px; background: var(--c-sky); overflow: hidden; }

/* note 91: the HARBOUR LIFE on the wide art (harbour-life.js; the game's coastal life, calm: a rare fish, one gull now and
   then, a glint, the dashes bob). Flat silhouettes, no faces. Reduced motion = none of it. */
.hl-box { position: absolute; left: 0; right: 0; bottom: var(--hb-bottom, 0px); height: 336px; pointer-events: none; overflow: hidden; }
.hb-dash.hl-dash { animation-name: hlShimmer; }
@keyframes hlShimmer { 0% { transform: translate(-5px, 0) scaleX(0.7); opacity: 0.55; } 50% { transform: translate(0, calc(var(--bob, 1) * -1px)) scaleX(0.85); opacity: 0.8; } 100% { transform: translate(5px, 0) scaleX(1); opacity: 1; } }
.hl-jump { position: absolute; left: 0; right: 0; top: 0; overflow: hidden; }
.hl-fish { position: absolute; left: 0; top: 0; width: 34px; height: 17px; }
.hl-fish svg, .hl-gull svg, .hl-glint svg { display: block; width: 100%; height: 100%; overflow: visible; }
.hl-fish-body { fill: #1D5C8A; }
.hl-ring { position: absolute; border: 1.6px solid #D9F1FF; border-radius: 50%; opacity: 0; }
.hl-drop { position: absolute; width: 4px; height: 4px; border-radius: 50%; background: #D9F1FF; opacity: 0; }
.hl-glint { position: absolute; width: 11px; height: 11px; margin: -5.5px 0 0 -5.5px; transform: scale(0); }
.hl-glint-p { fill: #FFFFFF; }
.hl-gull { position: absolute; left: 0; top: 0; width: 52px; height: 26px; transform-origin: 0 0; }
.hl-gull .hl-flip { transform: scaleX(-1); }
.hl-gull-w { fill: #FFFFFF; } .hl-gull-tip { fill: #5F6461; }
.hl-gull .w-l { transform-box: view-box; transform-origin: 14.6px 8.6px; } .hl-gull .w-r { transform-box: view-box; transform-origin: 15.4px 8.6px; }
.hl-sun { position: absolute; left: -8%; top: -30%; width: 70%; height: 90%; pointer-events: none; mix-blend-mode: screen; z-index: 0;
  background: radial-gradient(closest-side, rgba(255, 248, 220, 0.95), rgba(255, 241, 196, 0.5) 45%, rgba(255, 239, 196, 0) 100%); }
@media (prefers-reduced-motion: reduce) { .hb-dash.hl-dash { animation: none; } }