/* GLXY landing page. Locked to docs/design/mockups/beta-landing by
   scripts/__tests__/landing-page.sce4200.test.ts: change the mockup and this together. */

@font-face { font-family: 'Bebas Neue'; font-style: normal; font-weight: 400; font-display: swap; src: url('fonts/BebasNeue-Regular.woff2') format('woff2'); }

:root {
  color-scheme: dark;
  --bg: #0D0D0D; --bg-alt: #131316; --card: #1A1A1D; --card-hi: #222226;
  --stroke: rgba(255,255,255,0.08); --stroke-hi: rgba(255,255,255,0.14);
  --text: #FFFFFF; --text-2: rgba(235,235,245,0.72); --text-3: rgba(235,235,245,0.55);
  --athlete: #FF375F; --coach: #2563EB; --coach-hi: #3B82F6; --guardian: #30D158;
  --display: 'Bebas Neue', Impact, sans-serif;
  --body: -apple-system, BlinkMacSystemFont, 'SF Pro Text', system-ui, sans-serif;
  --gutter: 20px; --max: 1120px;
  --r8: 8px; --r12: 12px; --r16: 16px; --r24: 24px;
  --marker: 12px;
  --ease: cubic-bezier(.22,1.15,.36,1); /* ~ spring stiffness 150 / damping 15 */
}
@media (min-width: 960px) { :root { --marker: 14px; } }
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--body); font-size: 16px; line-height: 1.45; -webkit-font-smoothing: antialiased; }
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
p { margin: 0; }
.wrap { max-width: calc(var(--max) + 2 * var(--gutter)); margin: 0 auto; padding: 0 var(--gutter); }
.band { padding: 64px 0; position: relative; overflow: hidden; }
.band.alt { background: var(--bg-alt); }
@media (min-width: 960px) { .band { padding: 112px 0; } }

/* ---------- type ---------- */
.display { font-family: var(--display); font-weight: 400; letter-spacing: 0.04em; line-height: 0.95; margin: 0; }
.eyebrow { font-family: var(--display); font-size: 20px; letter-spacing: 0.08em; color: var(--text-3); margin: 0 0 16px; font-weight: 400; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
@media (min-width: 960px) { .eyebrow { font-size: 24px; } }
.h2 { font-size: 44px; }
@media (min-width: 960px) { .h2 { font-size: 72px; } }
.lede { color: var(--text-2); font-size: 16px; max-width: 46ch; }
@media (min-width: 960px) { .lede { font-size: 18px; } }
.small { font-size: 14px; } .caption { font-size: 12px; color: var(--text-3); }
.muted { color: var(--text-3); }
.lines { list-style: none; margin: 24px 0 0; padding: 0; display: grid; gap: 12px; }
.lines li { position: relative; padding-left: 20px; color: var(--text-2); }
.lines li::before { content: ''; position: absolute; left: 0; top: 0.62em; width: 8px; height: 2px; background: var(--text-3); }

/* ---------- wordmark ---------- */
.wordmark { font-family: var(--display); letter-spacing: 0.04em; color: var(--athlete); font-size: 72px; line-height: 1; display: inline-block; white-space: nowrap; } /* 72px draws GLXY 122px wide: app-identity.md minimum is 120px */

/* ---------- state markers (component sheet: review.html) ---------- */
.marker { display: inline-flex; align-items: center; gap: 8px; font: 600 var(--marker)/1 var(--body); letter-spacing: 0.1em; text-transform: uppercase; color: var(--text); white-space: nowrap; }
.marker svg { width: calc(var(--marker) + 2px); height: calc(var(--marker) + 2px); flex: none; }
.marker.roadmap { color: var(--text-2); }
.state-card { border-radius: var(--r16); padding: 20px; background: var(--card); border: 1px solid var(--stroke-hi); }
.state-card.roadmap { background: transparent; border: 1.5px dashed rgba(255,255,255,0.28); }
.state-card.roadmap .t { color: var(--text-2); }
.limit { margin-top: 8px; font-size: 14px; color: var(--text-2); }
.limit b { color: var(--text); font-weight: 600; }

/* ---------- device frames ---------- */
.phone { position: relative; width: 300px; padding: 9px; border-radius: 52px; background: #1C1C1F;
  box-shadow: 0 0 0 1px rgba(255,255,255,0.10), 0 40px 80px rgba(0,0,0,0.6); flex: none; }
.phone img { border-radius: 43px; width: 100%; }
.phone.lg { width: 330px; }
@media (min-width: 960px) { .phone { width: 340px; } .phone.lg { width: 380px; } }
.phone.crop { overflow: hidden; border-bottom-left-radius: 0; border-bottom-right-radius: 0; padding-bottom: 0; }
.phone.crop .viewport { overflow: hidden; border-radius: 43px 43px 0 0; position: relative; }
.phone.crop .viewport::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 72px; background: linear-gradient(to bottom, rgba(13,13,13,0), var(--fade, #0D0D0D)); }
.alt .phone.crop .viewport::after { --fade: #131316; }
.browser { border-radius: 12px; overflow: hidden; box-shadow: 0 0 0 1px rgba(255,255,255,0.10), 0 40px 80px rgba(0,0,0,0.55); background: #0D0D0D; }
.browser img { width: 100%; }
.frame-caption { margin-top: 16px; font-size: 12px; color: var(--text-3); letter-spacing: 0.02em; }

/* role chips */
.role { display: inline-flex; align-items: center; gap: 8px; height: 28px; padding: 0 12px; border-radius: 999px; font: 600 12px/1 var(--body); letter-spacing: 0.08em; text-transform: uppercase; }
.role::before { content: ''; width: 8px; height: 8px; border-radius: 999px; background: currentColor; }
.role.athlete { color: var(--athlete); background: rgba(255,55,95,0.12); box-shadow: inset 0 0 0 1px rgba(255,55,95,0.35); }
.role.coach { color: #6E9BFF; background: rgba(37,99,235,0.16); box-shadow: inset 0 0 0 1px rgba(59,130,246,0.40); }
.role.guardian { color: var(--guardian); background: rgba(48,209,88,0.12); box-shadow: inset 0 0 0 1px rgba(48,209,88,0.35); }

/* ---------- A. hero ---------- */
.hero { padding: 24px 0 0; position: relative; overflow: hidden; min-height: min(100svh, 860px); display: flex; flex-direction: column; }
.hero .atmo { position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(520px 520px at 70% 62%, rgba(255,55,95,0.30), rgba(255,55,95,0) 70%),
    repeating-linear-gradient(135deg, rgba(255,255,255,0.025) 0 2px, transparent 2px 22px); }
.hero .atmo::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(13,13,13,0) 60%, var(--bg)); }
.hero .wrap { position: relative; flex: 1; display: flex; flex-direction: column; }
.hero-grid { flex: 1; display: grid; gap: 32px; padding-top: 40px; }
.hero h1 { font-size: 64px; }
.hero .sub { margin-top: 20px; color: var(--text-2); font-size: 17px; max-width: 34ch; }
.hero .phone-slot { display: flex; justify-content: center; margin-bottom: -180px; }
.beta-note { position: relative; padding: 28px 0 0; color: var(--text-3); font-size: 14px; border-top: 1px solid var(--stroke); margin-top: 0; }
@media (min-width: 960px) {
  .hero { padding-top: 32px; min-height: 0; }
  .hero-grid { grid-template-columns: 1.2fr 0.8fr; align-items: center; padding: 64px 0 96px; }
  .hero h1 { font-size: 128px; margin-right: -180px; position: relative; z-index: 2; text-shadow: 0 2px 24px rgba(13,13,13,0.6); }
  .hero .sub { font-size: 20px; }
  .hero .phone-slot { justify-content: flex-end; position: relative; z-index: 1; } /* phone sits on the right content edge: same gutter as the headline on the left */
  .hero .atmo { background:
    radial-gradient(720px 720px at 78% 50%, rgba(255,55,95,0.38), rgba(255,55,95,0) 68%),
    repeating-linear-gradient(135deg, rgba(255,255,255,0.025) 0 2px, transparent 2px 22px); }
}
.beta-band { position: relative; z-index: 3; background: var(--bg); padding: 0 0 8px; }

/* ---------- B. universe ---------- */
.universe { position: relative; margin-top: 40px; }
.hub { position: relative; z-index: 2; margin: 0 auto; width: 280px; aspect-ratio: 1; border-radius: 999px; display: grid; place-items: center; text-align: center;
  background: radial-gradient(circle at 50% 40%, rgba(255,55,95,0.28), rgba(255,55,95,0.08) 70%), var(--card);
  box-shadow: 0 0 0 1.5px var(--athlete), 0 0 80px rgba(255,55,95,0.25); }
.hub .display { font-size: 40px; color: var(--text); }
.hub .caption { color: var(--text-2); margin-top: 6px; }
.hub-roles { display: flex; gap: 6px; justify-content: center; flex-wrap: wrap; margin-top: 16px; padding: 0 20px; }
.hub-roles .role { height: 24px; padding: 0 9px; font-size: 11px; }
.hub-roles-cap { text-align: center; margin-top: 8px; font-size: 12px; color: var(--text-2); }
.nodes { list-style: none; margin: 32px 0 0; padding: 0 0 0 28px; position: relative; display: grid; gap: 12px; }
.nodes::before { content: ''; position: absolute; left: 8px; top: -32px; bottom: 32px; width: 1.5px; background: var(--stroke-hi); }
.node { position: relative; }
.node::before { content: ''; position: absolute; left: -20px; top: 32px; width: 20px; height: 1.5px; background: var(--stroke-hi); }
.node.roadmap::before { background: none; border-top: 1.5px dashed rgba(255,255,255,0.28); }
.node a, .node > div { display: block; min-height: 44px; }
.node .t { font-family: var(--display); font-size: 28px; letter-spacing: 0.04em; line-height: 1; display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.node .go { font-family: var(--body); font-size: 14px; color: var(--text-3); }
.node .marker { margin-top: 12px; }
.legend { display: flex; flex-wrap: wrap; gap: 12px 28px; margin-top: 32px; padding-top: 20px; border-top: 1px solid var(--stroke); }
.legend .item { display: flex; gap: 10px; align-items: baseline; font-size: 14px; color: var(--text-2); }
.legend .item .marker { flex: none; }
.links-svg { display: none; }
@media (min-width: 1024px) {
  .state-card.roadmap { background: var(--bg); } /* the dashed spoke must not draw through the card */
  .universe { height: 780px; margin-top: 24px; }
  .hub { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 320px; }
  .hub .display { font-size: 52px; }
  .nodes { position: absolute; inset: 0; margin: 0; padding: 0; display: block; }
  .nodes::before, .node::before { display: none; }
  .node { position: absolute; width: 236px; transform: translate(-50%, -50%); }
  .links-svg { display: block; position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; }
}

/* ---------- C. problem ---------- */
.apps { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; margin-top: 32px; max-width: 520px; }
.app { aspect-ratio: 1; border-radius: 22%; background: var(--card-hi); border: 1px solid var(--stroke-hi); display: grid; place-items: center; }
.app svg { width: 46%; height: 46%; stroke: var(--text-3); fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.app-labels { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; max-width: 520px; margin-top: 8px; font-size: 12px; color: var(--text-3); text-align: center; }
.problem-grid { display: grid; gap: 40px; margin-top: 8px; }
.founder { border: 1.5px dashed rgba(255,255,255,0.28); border-radius: var(--r16); padding: 24px; display: grid; gap: 16px; align-content: start; }
.placeholder { font: 600 13px/1.4 ui-monospace, 'SF Mono', Menlo, monospace; letter-spacing: 0.04em; color: var(--text-2); }
.founder .bars { display: grid; gap: 10px; }
.founder .bars i { display: block; height: 10px; border-radius: 5px; background: rgba(255,255,255,0.08); }
.byline { display: flex; align-items: center; gap: 12px; padding-top: 16px; border-top: 1px solid var(--stroke); }
.byline .av { width: 40px; height: 40px; border-radius: 999px; border: 1.5px dashed rgba(255,255,255,0.28); }
@media (min-width: 960px) { .problem-grid { grid-template-columns: 1.1fr 0.9fr; gap: 72px; align-items: start; } }

/* ---------- D–F. capability bands ---------- */
.cap-head { display: grid; gap: 8px; }
.cap-head .marker { margin-bottom: 4px; }
.split { display: grid; gap: 48px; margin-top: 40px; }
@media (min-width: 960px) { .split { grid-template-columns: 0.8fr 1.2fr; gap: 64px; align-items: start; margin-top: 0; } .split .h2 { font-size: 60px; } }
.train-frames { position: relative; }
.train-frames .browser { width: 100%; }
.train-frames .phone { position: relative; margin: -120px 0 0 auto; width: 240px; }
@media (min-width: 960px) { .train-frames .phone { width: 280px; margin: -200px -24px 0 auto; } }
/* Mobile stacks the two screens; no hidden sideways scroll. */
.pair { display: grid; gap: 40px; justify-items: center; }
.pair > figure { margin: 0; }
@media (min-width: 960px) { .pair { display: flex; gap: 32px; justify-content: flex-end; align-items: flex-start; } .pair > figure:nth-child(2) { margin-top: 64px; } }
figure figcaption { margin-top: 16px; display: flex; gap: 8px; align-items: center; }

.duo { display: grid; gap: 24px; }
@media (min-width: 960px) { .duo { grid-template-columns: 1fr 1fr; gap: 24px; } }
.panel { background: var(--card); border: 1px solid var(--stroke-hi); border-radius: var(--r24); padding: 28px 24px 0; overflow: hidden; display: flex; flex-direction: column; }
@media (min-width: 960px) { .panel { padding: 40px 40px 0; } }
.panel .h3 { font-size: 40px; }
.panel .frames { display: flex; gap: 16px; justify-content: center; margin-top: 32px; }
.panel .frames .phone { width: 220px; }
@media (min-width: 960px) { .panel .frames .phone { width: 250px; } }
/* Athlete Home frame is 780 x 1378, cut by the capture itself above the tab bar, so no fade over RSVP. */
.phone.crop .plan-vp::after { display: none; }
.plan-vp img { display: block; }
.panel.guardian { background: radial-gradient(420px 300px at 50% 100%, rgba(48,209,88,0.10), transparent 70%), var(--card); }
.note-line { margin-top: 16px; font-size: 14px; color: var(--text-2); display: flex; gap: 8px; align-items: center; }

/* ---------- G. partly live ---------- */
.partly .state-card { padding: 28px 24px; }
@media (min-width: 960px) { .partly .state-card { padding: 40px; } }
.partly .h3 { font-size: 40px; margin: 16px 0 0; }
.next { margin-top: 24px; padding-top: 16px; border-top: 1px solid var(--stroke); display: flex; justify-content: space-between; gap: 12px; font-size: 14px; color: var(--text-2); }
.next span:last-child { color: var(--text-3); }

/* ---------- H. roles ---------- */
/* Mobile stacks the role cards; no hidden sideways scroll. */
.roles { display: grid; gap: 20px; margin: 40px 0 0; }
.role-card { background: var(--card); border: 1px solid var(--stroke-hi); border-radius: var(--r24); padding: 24px 20px 0; overflow: hidden; display: flex; flex-direction: column; }
.role-card > .role { align-self: flex-start; }
.role-card p { margin-top: 12px; color: var(--text-2); min-height: 3em; }
.role-card .stage { margin-top: 24px; flex: 1; display: flex; align-items: flex-end; justify-content: center; }
.role-card .phone { width: 230px; }
.role-card .browser { width: 150%; max-width: none; border-radius: 10px 0 0 0; align-self: flex-end; margin-right: -60%; }
.role-card.coach { box-shadow: inset 0 2px 0 var(--coach); }
.role-card.athlete { box-shadow: inset 0 2px 0 var(--athlete); }
.role-card.guardian { box-shadow: inset 0 2px 0 var(--guardian); }
@media (min-width: 960px) {
  .roles { display: grid; grid-template-columns: repeat(3, 1fr); overflow: visible; margin: 48px 0 0; padding: 0; gap: 24px; }
  .role-card { width: auto; padding: 32px 28px 0; } .role-card .phone { width: 250px; }

}

/* safe for minors */
.safety { margin-top: 40px; display: grid; gap: 16px; position: relative; }
.s-node { border-radius: var(--r16); padding: 20px; background: var(--card); border: 1px solid var(--stroke-hi); }
.s-node .k { font: 600 12px/1 var(--body); letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-3); }
.s-node .v { margin-top: 10px; font-size: 16px; }
.s-node .s { margin-top: 6px; font-size: 14px; color: var(--text-2); }
.s-center { text-align: center; box-shadow: 0 0 0 1.5px var(--athlete), 0 0 60px rgba(255,55,95,0.18); background: radial-gradient(circle at 50% 30%, rgba(255,55,95,0.18), transparent 70%), var(--card); border: none; }
.s-center .display { font-size: 32px; }
.s-gate { display: flex; align-items: center; gap: 12px; }
.s-gate .lock { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: var(--card-hi); flex: none; }
.s-arrow { display: flex; align-items: center; justify-content: center; gap: 8px; color: var(--text-3); font-size: 12px; letter-spacing: 0.04em; }
.s-arrow svg { width: 16px; height: 28px; }
.who { display: inline-flex; gap: 8px; align-items: center; margin-top: 12px; }
@media (min-width: 960px) {
  .safety { grid-template-columns: 1fr 72px 1.1fr 72px 1fr; grid-template-rows: auto auto auto; align-items: center; gap: 0; margin-top: 56px; }
  .safety .c-left { grid-column: 1; grid-row: 2; }
  .safety .a-left { grid-column: 2; grid-row: 2; }
  .safety .c-center { grid-column: 3; grid-row: 2; }
  .safety .a-right { grid-column: 4; grid-row: 2; }
  .safety .c-right { grid-column: 5; grid-row: 2; }
  .safety .a-down { grid-column: 3; grid-row: 3; padding: 16px 0; }
  .safety .c-bottom { grid-column: 2 / 5; grid-row: 4; }
  .s-arrow.h svg { transform: rotate(-90deg); }
  .s-arrow.h { flex-direction: column; }
}

/* what we add */
.adds { list-style: none; margin: 40px 0 0; padding: 0; display: grid; gap: 0; }
.adds li { display: grid; grid-template-columns: 64px 1fr; gap: 16px; padding: 24px 0; border-top: 1px solid var(--stroke); }
.adds .n { font-family: var(--display); font-size: 48px; line-height: 0.9; letter-spacing: 0.04em; color: var(--text-3); }
.adds h3 { margin: 0; font-size: 20px; font-weight: 700; }
.adds p { margin-top: 8px; color: var(--text-2); }
@media (min-width: 960px) {
  .adds { grid-template-columns: 1fr 1fr; column-gap: 64px; }
  .adds li { grid-template-columns: 96px 1fr; padding: 32px 0; }
  .adds .n { font-size: 80px; }
  .adds h3 { font-size: 24px; }
}

/* roadmap rail */
.rail { margin-top: 40px; position: relative; padding-left: 32px; }
.rail::before { content: ''; position: absolute; left: 7px; top: 8px; bottom: 8px; width: 2px; background: linear-gradient(var(--stroke-hi), var(--stroke-hi)); }
.rung { position: relative; padding: 0 0 28px; }
.rung::before { content: ''; position: absolute; left: -32px; top: 2px; width: 16px; height: 16px; border-radius: 999px; background: var(--bg); box-shadow: inset 0 0 0 2px var(--stroke-hi); }
.rung.now::before { background: var(--text); box-shadow: none; }
.rung.quiet .rname { color: rgba(235,235,245,0.40); }
.rname { font-family: var(--display); font-size: 24px; letter-spacing: 0.06em; line-height: 1; }
.rung .items { display: grid; gap: 10px; margin-top: 12px; }
.lane { font: 600 11px/1 var(--body); letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-3); }
.r-item { border-radius: var(--r12); padding: 14px 16px; }
.r-item .t { margin-top: 8px; font-size: 15px; }
.r-item.roadmap { border: 1.5px dashed rgba(255,255,255,0.28); }
.r-item.roadmap .t { color: var(--text-2); }
.r-item.now { background: var(--card); border: 1px solid var(--stroke-hi); }
.r-item.now .t { color: var(--text); }
.r-item.now .ms { display: flex; flex-wrap: wrap; gap: 8px 16px; margin-top: 12px; }
.r-item.now .ms .marker { white-space: normal; line-height: 1.35; align-items: flex-start; }
.r-item.now .ms .marker svg { margin-top: 1px; }
.rail-desk { display: none; }
.unplaced { margin-top: 24px; }
.unplaced h3 { font-family: var(--display); font-weight: 400; font-size: 24px; letter-spacing: 0.06em; margin: 0 0 12px; color: var(--text-2); }
.unplaced .grid { display: grid; gap: 10px; }
.rail-disclaimer { margin-top: 16px; font-size: 12px; color: var(--text-3); }
@media (min-width: 960px) {
  .rail { display: none; }
  .rail-desk { display: block; margin-top: 48px; }
  .rrow { display: grid; grid-template-columns: 140px repeat(6, 1fr); border-top: 1px solid var(--stroke); min-height: 76px; }
  .rrow.head { border-top: none; position: relative; }
  .rrow.head::after { content: ''; position: absolute; left: 148px; right: 0; bottom: 18px; height: 2px; background: var(--stroke-hi); }
  .rail-desk .rh { padding: 0 8px 40px; position: relative; }
  .rail-desk .rh::after { content: ''; position: absolute; left: 8px; bottom: 12px; width: 14px; height: 14px; border-radius: 999px; background: var(--bg-alt); box-shadow: inset 0 0 0 2px var(--stroke-hi); z-index: 1; }
  .rail-desk .rh.now::after { background: var(--text); box-shadow: none; }
  .rail-desk .rh.quiet .rname { color: rgba(235,235,245,0.40); }
  .rail-desk .lane-h { grid-column: 1; padding: 22px 16px 18px 0; }
  .rail-desk .cell { padding: 12px 8px; grid-row: 1; }
  .unplaced .grid { grid-template-columns: repeat(5, 1fr); }
}

/* footer */
footer { padding: 48px 0 56px; border-top: 1px solid var(--stroke); }
footer .wrap { display: grid; gap: 16px; }
@media (min-width: 960px) { footer .wrap { grid-template-columns: auto 1fr auto; align-items: center; gap: 40px; } }

/* motion: entrance + reveal only */
.js .reveal { opacity: 0; transform: translateY(24px); transition: opacity 600ms ease-out, transform 700ms var(--ease); }
.js .reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .js .reveal { opacity: 1; transform: none; transition: none; } }

/* width and height attributes reserve each frame's space; the frame still scales to its bezel */
img { height: auto; }

/* ---------- 404 page ---------- */
html.page-404, .page-404 body { margin: 0; height: 100%; background: var(--bg); color: var(--text); font: 16px/1.45 var(--body); }
.page-404 main { position: relative; min-height: 100%; overflow: hidden; padding: 24px var(--gutter); display: flex; flex-direction: column; }
.page-404 .atmo { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(520px 520px at 70% 62%, rgba(255,55,95,0.30), rgba(255,55,95,0) 70%), repeating-linear-gradient(135deg, rgba(255,255,255,0.025) 0 2px, transparent 2px 22px); }
.page-404 .wordmark { position: relative; font-family: var(--display); letter-spacing: 0.04em; color: var(--athlete); font-size: 72px; line-height: 1; }
.page-404 .body { position: relative; margin: auto 0; max-width: 1120px; width: 100%; align-self: center; }
.page-404 h1 { font: 400 64px/0.95 var(--display); letter-spacing: 0.04em; margin: 0; }
.page-404 a { display: inline-flex; align-items: center; min-height: 44px; margin-top: 16px; color: var(--text-2); text-decoration: underline; text-underline-offset: 4px; }
@media (min-width: 960px) { .page-404 h1 { font-size: 96px; } .page-404 main { padding: 32px 40px; } }

/* ---------- what the mockup set inline ----------
   The Content-Security-Policy blocks style attributes. !important keeps the one thing an
   inline style has that a class lacks: it wins over every rule above, media queries included. */
.u-ai-center { align-items: center !important; }
.u-fd-column { flex-direction: column !important; }
.u-fw-400 { font-weight: 400 !important; }
.u-g-10 { gap: 10px !important; }
.u-gc-2 { grid-column: 2 !important; }
.u-gc-5 { grid-column: 5 !important; }
.u-gc-6 { grid-column: 6 !important; }
.u-h-300 { height: 300px !important; }
.u-h-330 { height: 330px !important; }
.u-h-340 { height: 340px !important; }
.u-h-360 { height: 360px !important; }
.u-jc-center { justify-content: center !important; }
.u-jc-flex-end { justify-content: flex-end !important; }
.u-mb-24 { margin-bottom: 24px !important; }
.u-mt-0 { margin-top: 0 !important; }
.u-mt-12 { margin-top: 12px !important; }
.u-mt-16 { margin-top: 16px !important; }
.u-mt-24 { margin-top: 24px !important; }
.u-mt-32 { margin-top: 32px !important; }
.u-mt-8 { margin-top: 8px !important; }
.u-p-absolute { position: absolute !important; }
.u-pb-0 { padding-bottom: 0 !important; }
.u-pb-32 { padding-bottom: 32px !important; }
.u-t-rotate-180deg { transform: rotate(180deg) !important; }
.u-ta-center { text-align: center !important; }
.u-w-60 { width: 60% !important; }
.u-w-84 { width: 84% !important; }
.u-w-92 { width: 92% !important; }