/* =====================================================================
   landing.css — the front page's first screen: the campus lobby.

   The frame (same contract as the course app, assets/css/game.css):
     top bar   one row at every width; crest, tabs, chips share one height (44px), as in the course app
     stage     the photograph covers it; the left rail holds the pitch, the
               right rail the rotating feature card; neither ever reaches the
               dock or the operator
     dock      eight doors along the bottom

   The photograph sits in a 4:3 box (.screen__art) that covers the whole screen
   and is anchored to its bottom edge, sized with container units. The plaza in
   the picture runs to the bottom of the screen, so the dock's doors stand on the
   stones like everything else in the world. Because the box keeps
   the picture's own proportions, anything placed inside it in percentages
   (the airship) lands on the same spot in the photograph at every size.

   Short windows: the screen never gets shorter than 760px; the page scrolls
   instead of squeezing the rail into the dock. Below 900px of height the six
   counters step out (the same facts are in the dock and the sections below).

   Below the fold the marketing sections take over (marketing.css).
   ===================================================================== */

:root {
  --hu-navy-950: #061027;
  --hu-blue-600: #1467ef;
  --hu-blue-400: #38a5ff;
  --hu-gold: #e6bb66;
  --hu-panel: rgba(5, 15, 37, 0.78);
  --hu-panel-border: rgba(144, 195, 255, 0.4);
  --hu-top-h: 64px;
  --hu-dock-h: 118px;   /* the course app's --dock-h: the doors are the same size on both sides of Sign in */
  --hu-gutter: clamp(16px, 1.6vw, 28px);
  --hu-control-h: 44px;
  --hu-radius: 12px;
}

/* ---- Top bar ---- */
.gtop { position: fixed; top: 0; left: 0; right: 0; z-index: 40; height: calc(var(--hu-top-h) + env(safe-area-inset-top, 0px)); padding: env(safe-area-inset-top, 0px) var(--hu-gutter) 0; display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 16px; background: linear-gradient(180deg, rgba(6, 16, 39, 0.78), rgba(6, 16, 39, 0)); transition: background 300ms var(--ease), box-shadow 300ms var(--ease); }
.gtop.is-scrolled { background: rgba(6, 16, 39, 0.9); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); box-shadow: 0 1px 0 rgba(144, 195, 255, 0.18); }
.gtop__crest { justify-self: start; display: block; }
.gtop__crest img { display: block; width: 52px; height: 52px; filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.6)); }
.gtop__tabs { display: flex; gap: 4px; padding: 3px; border-radius: 14px; background: var(--hu-panel); border: 1px solid var(--hu-panel-border); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.gtop__tabs a { display: flex; align-items: center; height: calc(var(--hu-control-h) - 6px); padding: 0 16px; border-radius: 10px; color: rgba(255, 255, 255, 0.86); text-decoration: none; font-weight: 800; font-size: 0.76rem; letter-spacing: 0.12em; text-transform: uppercase; white-space: nowrap; transition: background 160ms, color 160ms; }
.gtop__tabs a:hover { background: rgba(144, 195, 255, 0.14); color: #fff; text-decoration: none; }
.gtop__tabs a.is-on { background: linear-gradient(180deg, var(--hu-blue-400), var(--hu-blue-600)); color: #fff; box-shadow: 0 6px 18px -6px rgba(56, 165, 255, 0.9); }
.gtop__right { justify-self: end; display: flex; gap: 8px; align-items: center; }
.gtop__chip { display: inline-flex; align-items: center; gap: 6px; height: var(--hu-control-h); padding: 0 14px; margin: 0; border-radius: var(--hu-radius); background: var(--hu-panel); border: 1px solid var(--hu-panel-border); color: #fff; font: inherit; font-weight: 700; font-size: 0.82rem; line-height: 1; text-decoration: none; white-space: nowrap; cursor: pointer; backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.gtop__chip:hover { text-decoration: none; border-color: var(--hu-blue-400); color: #fff; }
.gtop__chip--buy { background: linear-gradient(180deg, var(--hu-blue-400), var(--hu-blue-600)); border-color: transparent; }
.gtop__chip--buy b { font-weight: 900; }

/* The sound switch: the same control as the course app's top bar. */
.gtop__right .sound { gap: 3px; padding: 0 12px; color: rgba(234, 245, 255, 0.6); }
.sound__glyph { margin-right: 4px; color: rgba(234, 245, 255, 0.8); }
.sound__wave { opacity: 0; transition: opacity 160ms; }
.sound.is-on .sound__wave { opacity: 1; } .sound.is-on .sound__slash { display: none; }
.sound i { width: 3px; height: 6px; border-radius: 1px; background: rgba(234, 245, 255, 0.35); align-self: center; transition: background 160ms; }
.sound.is-on i { background: var(--hu-blue-400); box-shadow: 0 0 6px rgba(56, 165, 255, 0.7); animation: sound-bar 900ms ease-in-out infinite alternate; }
.sound.is-on i:nth-child(3) { animation-delay: 150ms; } .sound.is-on i:nth-child(4) { animation-delay: 300ms; } .sound.is-on i:nth-child(5) { animation-delay: 450ms; }
@keyframes sound-bar { from { height: 5px; } to { height: 12px; } }

/* ---- The screen ---- */
.screen { position: relative; isolation: isolate; height: max(100vh, 760px); height: max(100svh, 760px); overflow: hidden; background: var(--hu-navy-950); color: #fff; }
.screen::before, .screen::after { display: none; } /* marketing.css hero effects have no place over a photograph */
.screen__world { position: absolute; inset: 0; z-index: -1; }
.screen__ground { position: absolute; inset: 0; overflow: hidden; container-type: size; }
/* On very wide windows the top of the picture would crop through the operator's head; the box then slides down (the
   plaza gives way instead) just enough to keep the head 16px below the top bar. 0.65 = 1 - the head line at 35%. */
.screen__art { position: absolute; left: 50%; bottom: calc(-1 * max(0px, 0.65 * max(75cqw, 100cqh) - 100cqh + var(--hu-top-h) + 16px)); width: max(100cqw, 133.33cqh); aspect-ratio: 4 / 3; transform: translateX(-50%); }
.screen__still { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
/* The airship: a fixed spot in the open sky of the photograph, right of the operator's head and left of the feature card.
   On very wide windows the top of the picture is cropped, so it drops just enough to stay clear of the top bar. */
.screen__blimp { --blimp-clear: calc(var(--hu-top-h) + 16px); position: absolute; left: 66%; top: max(calc(0.14 * max(75cqw, 100cqh)), calc(max(75cqw, 100cqh) - 100cqh + var(--blimp-clear))); width: 10%; height: auto; filter: drop-shadow(0 18px 24px rgba(6, 16, 39, 0.35)); animation: blimp-drift 110s ease-in-out infinite alternate; pointer-events: none; }
@keyframes blimp-drift { from { transform: translate(0, 0) rotate(0.2deg); } to { transform: translate(-6%, 1%) rotate(-0.4deg); } }
.screen__veil { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(90deg, rgba(6, 16, 39, 0.8) 0, rgba(6, 16, 39, 0.5) 22%, rgba(6, 16, 39, 0) 40%), linear-gradient(180deg, rgba(6, 16, 39, 0.45), transparent 16%); }

/* ---- Rails: between the top bar and the dock, never touching either ---- */
.screen__rail { position: absolute; top: calc(var(--hu-top-h) + env(safe-area-inset-top, 0px) + 8px); display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.screen__rail > * { flex: none; }
.screen__rail--left { left: var(--hu-gutter); bottom: calc(var(--hu-dock-h) + 12px); width: clamp(320px, 27vw, 440px); }
.screen__rail--right { right: var(--hu-gutter); width: clamp(260px, 21vw, 320px); }

/* Operator badge: face, rank, Her/Him. */
.opbadge { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 8px 12px; border-radius: 14px; background: var(--hu-panel); border: 1px solid var(--hu-panel-border); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.opbadge__face { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; object-position: 50% 8%; background: #0b1a3d; border: 2px solid var(--hu-blue-400); }
.opbadge > div:nth-child(2) { display: grid; line-height: 1.15; min-width: 0; }
.opbadge__name { font-size: 0.64rem; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(255, 255, 255, 0.72); }
.opbadge__rank { display: flex; align-items: center; gap: 8px; font-weight: 900; font-size: 1.1rem; text-transform: uppercase; letter-spacing: 0.04em; }
.opbadge__chapter { display: block; margin-top: 2px; font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--hu-blue-400); white-space: nowrap; }
.bars { display: inline-flex; gap: 2px; }
.bars b { width: 5px; height: 12px; border-radius: 1px; background: rgba(255, 255, 255, 0.22); }
.bars b:first-child { background: var(--hu-blue-400); box-shadow: 0 0 8px var(--hu-blue-400); }
.opbadge__sex { display: inline-flex; padding: 3px; border-radius: 999px; background: rgba(255, 255, 255, 0.08); }
.opbadge__sex button { font: inherit; font-size: 0.72rem; font-weight: 800; color: rgba(255, 255, 255, 0.7); background: none; border: 0; padding: 5px 11px; border-radius: 999px; cursor: pointer; }
.opbadge__sex button[aria-pressed="true"] { background: #2563eb; /* 5.2:1 under white 11.5px type (the brighter blue was 3.6:1) */ color: #fff; box-shadow: 0 0 14px rgba(56, 165, 255, 0.6); }

/* The pitch. */
.screen__over { margin: 4px 0 0; font-size: 0.7rem; letter-spacing: 0.22em; text-transform: uppercase; color: rgba(255, 255, 255, 0.78); text-shadow: 0 1px 8px rgba(0, 0, 0, 0.8); }
.screen__title { margin: 0; font-size: clamp(2.3rem, 3.1vw, 3.2rem); line-height: 1; text-wrap: balance; font-weight: 900; letter-spacing: -0.02em; background: linear-gradient(180deg, #fff 45%, #9fd2ff 100%); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.7)); }
.screen__line { margin: 0; max-width: 38ch; font-size: 0.98rem; line-height: 1.42; color: rgba(255, 255, 255, 0.92); text-shadow: 0 1px 10px rgba(0, 0, 0, 0.9); text-wrap: pretty; }

/* The blue pill: the one button the whole screen funnels to. */
.cta { display: inline-flex; align-items: center; gap: 10px; width: max-content; height: 52px; padding: 0 28px; border-radius: 999px; background: linear-gradient(180deg, var(--hu-blue-400), var(--hu-blue-600)); color: #fff; font-weight: 900; font-size: 1.1rem; text-decoration: none; box-shadow: 0 12px 30px -8px rgba(20, 103, 239, 0.9), inset 0 1px 0 rgba(255, 255, 255, 0.35); animation: cta-pulse 2.6s ease-in-out infinite; }
.cta:hover { text-decoration: none; color: #fff; transform: translateY(-2px); }
.cta > span { position: relative; z-index: 1; }
.cta__tag { font-size: 0.64rem; letter-spacing: 0.16em; text-transform: uppercase; padding: 4px 8px; border-radius: 999px; background: rgba(255, 255, 255, 0.18); }
@keyframes cta-pulse { 0%, 100% { box-shadow: 0 12px 30px -8px rgba(20, 103, 239, 0.9), 0 0 0 0 rgba(56, 165, 255, 0.5); } 50% { box-shadow: 0 12px 30px -8px rgba(20, 103, 239, 0.9), 0 0 0 10px rgba(56, 165, 255, 0); } }

/* Founding price: the real number, and the real next one. */
.founding { display: grid; gap: 4px; padding: 12px 14px; border-radius: 14px; background: var(--hu-panel); border: 1px solid var(--hu-panel-border); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.founding__label { font-size: 0.64rem; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(255, 255, 255, 0.72); }
.founding__row { margin: 0; display: flex; align-items: baseline; gap: 8px; }
.founding__row b { font-size: 1.7rem; font-weight: 900; }
.founding__row span { font-size: 0.82rem; color: rgba(255, 255, 255, 0.85); }
.founding__next { margin: 0; font-size: 0.82rem; color: rgba(255, 255, 255, 0.85); }
.founding__next .num { color: #fff; font-weight: 900; font-size: 1.05em; }
.founding__buy { justify-self: start; margin-top: 4px; }

/* The refund line sits right under every Unlock button on the page (hero, system, price, close): the risk answer at the moment of the click. */
.refund-note { margin: 0; font-size: 0.8rem; line-height: 1.4; color: rgba(234, 245, 255, 0.78); }
.founding .refund-note { margin-top: 2px; font-size: 0.76rem; }
.sec .refund-note, .close .refund-note { margin-top: 10px; }

/* In-text links read as links: underlined, in the light blue, not only by colour (axe: link-in-text-block). */
.reviews__empty a, .faq__body a, .sec__title p a:not(.btn), .letter a { color: #9fd2ff; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.reviews__empty a:hover, .faq__body a:hover { color: #fff; }

/* The anchor block above the price card: the two mistakes and the system, read as a bill. */
.cost-sec .compare { margin: 0; }
.cost-sec .compare__row { padding: var(--s-4) 0; font-size: 1rem; line-height: 1.45; }
.cost-sec .compare__v { font-size: clamp(1.25rem, 2vw, 1.6rem); }
.cost-sec .compare__row:last-child { border-top: 2px solid rgba(56, 165, 255, 0.6); font-weight: 700; }

/* The six counters: icon, number, label, one line each. Plain facts, not links (the dock holds the doors). */
.counters { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 0; padding: 0; list-style: none; }
.counter { display: grid; grid-template-columns: 36px minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 8px; align-items: center; padding: 8px 10px; border-radius: var(--hu-radius); background: var(--hu-panel); border: 1px solid var(--hu-panel-border); color: #fff; backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.counter img { grid-row: 1 / 3; width: 36px; height: 36px; object-fit: contain; }
.counter b { font-size: 1.2rem; font-weight: 900; line-height: 1; white-space: nowrap; }
.counter span { font-size: 0.58rem; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(255, 255, 255, 0.72); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---- The dock: eight doors ----
   Same doors as the course app (game.css .dock): 124px tiles, 96px tall, 60px icons, the same names in the same order,
   stepping down at the same widths (100px under 1280, 86px under 1000 and on phones). */
.dock { position: absolute; left: 0; right: 0; bottom: 0; height: calc(var(--hu-dock-h) + env(safe-area-inset-bottom, 0px)); padding: 0 var(--hu-gutter) env(safe-area-inset-bottom, 0px); display: flex; gap: 10px; align-items: center; overflow-x: auto; scrollbar-width: none; }
/* A soft shade low on the stones so the doors read; the plaza stays visible. */
.screen__world::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: calc(var(--hu-dock-h) + 60px); background: linear-gradient(180deg, rgba(6, 16, 39, 0), rgba(6, 16, 39, 0.38)); pointer-events: none; }
.dock::-webkit-scrollbar { display: none; }
.dock a { flex: 0 0 auto; display: grid; justify-items: center; align-content: center; gap: 4px; width: 124px; height: calc(var(--hu-dock-h) - 22px); padding: 0 6px; border-radius: 16px; background: rgba(6, 16, 39, 0.52); border: 1px solid rgba(190, 220, 255, 0.45); box-shadow: 0 14px 22px -12px rgba(0, 0, 0, 0.65); color: #fff; font-weight: 800; font-size: 0.78rem; letter-spacing: 0.04em; text-decoration: none; backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); transition: transform 180ms var(--ease-out), border-color 180ms, box-shadow 180ms; }
.dock a img { width: 60px; height: 60px; object-fit: contain; transition: transform 180ms var(--ease-out), filter 180ms; }
.dock a:hover, .dock a:focus-visible { text-decoration: none; color: #fff; transform: translateY(-4px); border-color: var(--hu-blue-400); box-shadow: 0 0 30px -4px rgba(56, 165, 255, 0.7); }
.dock a:hover img { transform: scale(1.1); filter: drop-shadow(0 0 12px rgba(56, 165, 255, 0.9)); }
.dock a:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
@media (max-width: 1280px) and (min-width: 761px) { .dock { gap: 8px; } .dock a { width: 100px; } .dock a img { width: 50px; height: 50px; } }
@media (max-width: 1000px) and (min-width: 761px) { .dock a { width: 86px; font-size: 0.7rem; } }

/* ---- Fitting the frame ---- */
/* Short windows: the counters step out rather than crowd the dock. */
@media (max-height: 959px) and (min-width: 761px) { .screen__rail--left .counters { display: none; } }
/* The airship only where there is sky to spare beside the feature card. */
@media (max-width: 1279px) { .screen__blimp { display: none; } }
@media (max-width: 1180px) { .gtop__tabs a { padding: 0 11px; letter-spacing: 0.08em; } }
/* The tabs only point at sections further down this page; below 1024px the chips are enough. */
@media (max-width: 1023px) {
  .gtop__tabs { display: none; }
  .gtop__right { grid-column: 3; }
  .screen__rail--right { display: none; }
}

/* ---- Phones: the picture on top, the rail below it, the dock as a scrolling row ---- */
@media (max-width: 760px) {
  :root { --hu-top-h: 58px; --hu-dock-h: 92px; --hu-control-h: 36px; }
  .gtop__right .hide-phone { display: none !important; }
  .gtop__crest img { width: 40px; height: 40px; }
  .gtop__chip { padding: 0 12px; }
  .screen { height: auto; }
  /* The picture is capped so the H1, the free-lesson button and the $999 all land on the first phone screen. */
  .screen__world { bottom: auto; height: calc(var(--hu-top-h) + env(safe-area-inset-top, 0px) + min(40vh, 340px)); }
  .screen__ground { bottom: 0; }
  .screen__art { left: 38%; }
  .screen__blimp { display: block; left: 65%; top: 13%; width: 15%; }
  .screen__veil { background: linear-gradient(180deg, rgba(6, 16, 39, 0.4), transparent 20%, transparent 55%, var(--hu-navy-950) 100%); }
  .screen__rail { position: static; width: auto; }
  .screen__rail--left { padding: calc(var(--hu-top-h) + env(safe-area-inset-top, 0px) + min(36vh, 306px)) 16px 0; }
  /* The operator pick follows the price on phones: the pitch and the buy come first. */
  .screen__rail--left .opbadge { order: 1; }
  .screen__rail--left .counters { order: 2; }
  .screen__title { font-size: 2.3rem; }
  .counters { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dock { position: static; height: auto; padding: 16px 16px calc(16px + env(safe-area-inset-bottom, 0px)); }
  .dock a { width: 86px; height: 80px; font-size: 0.68rem; }
  .dock a img { width: 44px; height: 44px; }
}

@media (prefers-reduced-motion: reduce) {
  .cta, .screen__blimp { animation: none; }
  .sound.is-on i { animation: none; height: 10px; }
}

/* The lit word in a section headline is italic; its overhang ate the space after it ("Realnumbers"). */
.sec__title h2 .lit { padding-right: 0.1em; }
/* Card heads under a section h2 are h3 in the outline (no skipped level) but keep the h4 size and face. */
h3.h4 { font-family: var(--font-sans); font-size: var(--t-lg); font-weight: 600; letter-spacing: -0.015em; line-height: 1.25; }
.index-list h3.h4 { margin-bottom: var(--s-2); }

/* ---- Reviews, before there are any (r40 B4, L17) ----
   One glass card with the honest line, no counter: a "0" read as a broken widget. The section is a short beat between
   the team and the price, so it is padded tighter than a full section and leaves no void before the cost block. */
#reviews { padding-block: var(--s-8) 0; }
#reviews h2 { max-width: 22ch; text-wrap: balance; }
.reviews { margin-top: var(--s-5); }
.reviews__empty { max-width: 72ch; padding: var(--s-5) var(--s-6); border-radius: 16px; background: var(--hu-panel); border: 1px solid var(--hu-panel-border); }
.reviews__empty p { margin: 0; color: rgba(234, 245, 255, 0.86); line-height: 1.6; }
@media (max-width: 760px) { .reviews__empty { padding: var(--s-4) var(--s-5); } }
/* Fleet figures never split across lines ("$4 / a day"). */
[data-fleet] { white-space: nowrap; }