/* StellarMesh — the marketing page at /sky.
 *
 * Ported from StellarMesh/landing.html, which was already dark, token-driven
 * and Tailwind-free. Two things were stripped on the way in:
 *
 *   1. Brass. The original carried #c9a24b / #e6cd8b as StellarMesh's own
 *      accent, in 57 places — the primary CTA, every eyebrow, the step ticks,
 *      the moment numbers, the card icons, the checkmarks, the blockquote rule,
 *      ::selection, :focus-visible, and nine hard-coded rgba() washes that a
 *      token rename would have walked straight past. All of it is --signal now.
 *      One accent, house rule.
 *   2. Fraunces and Spline Sans, which came from fonts.googleapis.com. The
 *      display face is Audiowide and the text face is Outfit, both served
 *      from /fonts. Zero third-party requests.
 *
 * --- Why this file is self-contained, and does not link /page.css -----------
 *
 * The obvious move was to link /page.css for the shell (topbar / footer) and
 * let this file carry only the marketing sections. It does not survive contact:
 *
 *   .wrap     page.css: max-width 820px, centred. Here: the full-bleed layer
 *             that holds the starfield, the nebulas and the whole page. A
 *             820px cap on it collapses the entire landing to a document
 *             column. Not a rename away either — page.css's own topbar and
 *             footer markup use .wrap as their measure.
 *   a         page.css puts a 1px signal underline on every anchor. That lands
 *             on every nav link, every card link and every button.
 *   .btn      page.css: 12/20 padding, radius 8. Here: 0.9/1.5rem, radius 6,
 *             uppercase mono. Different button.
 *   .brand    page.css sizes it for a 20px document wordmark.
 *   footer, main, section, h2, h3, p, ul, li, body — all carry page.css
 *             opinions sized for an 820px text page.
 *
 * Neutralising that list means a dozen rules in here whose only job is to undo
 * a rule in there — exactly the "two stylesheets with overlapping rules" the
 * plan says to avoid. So: one stylesheet. The topbar and footer MARKUP is
 * copied from static/moon/apollo-11.html and the rules below are page.css's,
 * re-measured to this page's 1180px instead of 820px. The one markup change is
 * .wrap -> .container inside the topbar and footer, because .wrap is already
 * taken here by the starfield layer, and .container is what this page calls
 * its measure everywhere else. library.html:18 made the same call against
 * style.css for the same reason.
 *
 * Paths are absolute throughout — house rule, and the page is served at /sky
 * (no trailing directory) so a relative path would still resolve at the root
 * today and break the day it moves.
 */

/* The display face. Audiowide is declared per page on purpose — it is not
   in /fonts/fonts.css, which 32 tracked HTML files fetch under a year-long
   immutable cache rule (30 before this branch; /sky and /sky/app are the other
   two, and every one of the 32 carries the same ?v=20260803_1 stamp).
   Absolute path, URL-encoded space, 400 weight only:
   there is no bold cut, so a display heading is never weighted up — it is
   sized and tracked instead. */
@font-face {
    font-family: 'Audiowide';
    src: url('/fonts/Audiowide-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

/* ─────────────────────────────────────────────────────────────────────────
   Tokens — design-system/tokens.css values, plus the handful of page-local
   surfaces this layout needs.
   ───────────────────────────────────────────────────────────────────────── */
:root {
    --bg:            #05070b;   /* page — the void behind the moon */
    --bg-2:          #080b12;
    --bg-card:       rgba(255, 255, 255, 0.022);
    --bg-card-hover: rgba(255, 255, 255, 0.045);

    --text:          #f3f5f8;
    --text-muted:    #8b95a3;
    /* Deliberately lighter than page.css's --faint (#5b6473). The smallest
       caps on this page are 0.64rem; #5b6473 is 3.4:1 on --bg and fails AA at
       that size, #7a8494 is 5.3:1 and passes. */
    --faint:         #7a8494;
    --bone:          #e9e6df;   /* warm moon light — brand headings */
    --silver:        #b9c0ca;

    /* The one accent. */
    --signal:        #5aa9e6;
    --signal-bright: #8fcdf6;
    --signal-ink:    #071a2b;   /* dark text placed on a signal fill */

    /* MakerWorld's own brand green, for the one button that points at it.
       Same value static/index.html:289 already uses. Not an accent. */
    --makerworld:    linear-gradient(135deg, #00A680 0%, #008766 100%);

    --border:        rgba(255, 255, 255, 0.08);
    --border-strong: rgba(255, 255, 255, 0.16);

    /* Fills every gradient-text run on the page — .grad, .stat .num,
       .mstat .num, .final-card::before. Both stops are opaque: these elements
       are painted with color:transparent and background-clip:text, which has
       no fallback, so a gradient that resolves to nothing renders nothing. */
    --gradient-hero: linear-gradient(135deg, var(--bone) 0%, var(--signal-bright) 100%);

    --display: 'Audiowide', 'Outfit', sans-serif;
    --sans:    'Outfit', -apple-system, BlinkMacSystemFont, sans-serif;
    --mono:    'IBM Plex Mono', ui-monospace, 'Courier New', monospace;

    --maxw: 1180px;
    /* The design system's name for this curve. tokens.css:89-90 defines BOTH
       --ease (cubic-bezier(0.4, 0, 0.2, 1)) and --ease-out (this one); calling
       this value --ease here meant the two stylesheets on /sky used one name
       for two different curves. The value is the one this page wants —
       decelerating, for entrances — so the name moved, not the numbers. */
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

* { box-sizing: border-box; }

html {
    scroll-behavior: smooth;
    /* The topbar is fixed and 83px tall (66px on a phone), so an anchor jump
       would otherwise land the target under it. Today the four in-page nav
       links survive only because section.block happens to carry ≥72px of top
       padding — this makes the clearance deliberate rather than incidental. */
    scroll-padding-top: 96px;
    overflow-x: hidden;
    -webkit-text-size-adjust: 100%;
    background: var(--bg);
}

body {
    margin: 0;
    background:
        radial-gradient(110% 70% at 78% -8%, rgba(143, 205, 246, 0.10) 0%, transparent 46%),
        radial-gradient(90% 62% at 14% 4%, rgba(90, 169, 230, 0.11) 0%, transparent 52%),
        linear-gradient(180deg, var(--bg-2) 0%, var(--bg) 42%, #04050a 100%);
    color: var(--text-muted);
    font-family: var(--sans);
    line-height: 1.72;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

/* ─────────────────────────────────────────────────────────────────────────
   Night sky layers
   ───────────────────────────────────────────────────────────────────────── */
#stars { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }

.tw {
    position: fixed; border-radius: 50%; background: var(--text);
    z-index: 0; pointer-events: none;
    animation: twinkle var(--twd, 3.2s) ease-in-out var(--twdel, 0s) infinite;
}
.tw.s { background: var(--signal-bright); }
@keyframes twinkle { 0%, 100% { opacity: 0.18; } 50% { opacity: 0.9; } }

.meteor {
    position: fixed; top: 12%; left: -12%; width: 130px; height: 2px;
    border-radius: 2px; z-index: 0; pointer-events: none;
    background: linear-gradient(90deg, transparent, rgba(243, 245, 248, 0.95));
    transform: rotate(18deg); opacity: 0;
    animation: shoot 14s linear 4s infinite;
}
.meteor::after {
    content: ""; position: absolute; right: -1px; top: -1px;
    width: 4px; height: 4px; border-radius: 50%; background: #fff;
    box-shadow: 0 0 10px 2px rgba(243, 245, 248, 0.8), 0 0 26px 6px rgba(90, 169, 230, 0.35);
}
.meteor.m2 { top: 34%; left: -16%; width: 90px; animation-duration: 23s; animation-delay: 11s; transform: rotate(14deg); }
.meteor.m3 { top: 58%; left: -10%; width: 110px; animation-duration: 19s; animation-delay: 7s; }
@keyframes shoot {
    0%   { transform: translate(0, 0) rotate(18deg); opacity: 0; }
    1.2% { opacity: 0.9; }
    4%   { transform: translate(60vw, 19vw) rotate(18deg); opacity: 0; }
    100% { transform: translate(60vw, 19vw) rotate(18deg); opacity: 0; }
}

/* The page sits above the starfield. Its two fixed nebulas return the
   atmosphere partway down and at the bottom of the scroll. */
.wrap { position: relative; z-index: 2; isolation: isolate; }
.wrap::before {
    content: ""; position: fixed; z-index: -1; pointer-events: none;
    width: 70vw; height: 60vh; left: -15vw; top: 45vh;
    background: radial-gradient(closest-side, rgba(90, 169, 230, 0.07), transparent 70%);
    filter: blur(40px);
}
.wrap::after {
    content: ""; position: fixed; z-index: -1; pointer-events: none;
    width: 60vw; height: 50vh; right: -12vw; bottom: -10vh;
    background: radial-gradient(closest-side, rgba(143, 205, 246, 0.06), transparent 70%);
    filter: blur(48px);
}

.container { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 clamp(1.25rem, 4vw, 3rem); }

a { color: inherit; text-decoration: none; }
::selection { background: var(--signal); color: var(--signal-ink); }
:focus-visible { outline: 2px solid var(--signal); outline-offset: 3px; border-radius: 3px; }

/* ─────────────────────────────────────────────────────────────────────────
   Shared shell — page.css's topbar and footer, at this page's measure
   ───────────────────────────────────────────────────────────────────────── */
/* page.css makes this bar position:sticky. It cannot be sticky here: this page
   sets overflow-x:hidden on html and body to contain the meteors, which
   computes overflow-y to auto, turns body into a scroll container and leaves
   sticky inert — the bar scrolls away with the page. The original landing nav
   was position:fixed for exactly this reason, so it stays fixed, and .hero
   carries the top padding that clears it. */
.topbar {
    border-bottom: 1px solid var(--border);
    padding: 16px 0;
    position: fixed; top: 0; left: 0; right: 0; z-index: 50;
    background: rgba(5, 7, 11, 0.92);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}
.topbar .container { display: flex; align-items: center; justify-content: space-between; gap: 20px; }

.brand {
    font-family: var(--display);
    font-size: 20px; letter-spacing: 0.5px;
    color: var(--bone); text-decoration: none;
}

.nav-links { display: flex; align-items: center; gap: 1.7rem; }
.nav-links a.link {
    font-family: var(--mono); font-size: 0.68rem;
    letter-spacing: 0.12em; text-transform: uppercase;
    color: var(--text-muted); transition: color 0.3s;
}
.nav-links a.link:hover { color: var(--signal); }
/* Below 860 the section links fold away and the topbar is brand + CTA; below
   520 the CTA has to share a 375px row with the wordmark, so it steps down. */
@media (max-width: 860px) { .nav-links .link { display: none; } }
@media (max-width: 520px) {
    .topbar { padding: 12px 0; }
    .topbar .btn { padding: 0.7rem 1rem; font-size: 0.68rem; letter-spacing: 0.06em; }
}

footer {
    border-top: 1px solid var(--border);
    background: linear-gradient(180deg, transparent, rgba(3, 4, 7, 0.9));
    padding: 32px 0 48px;
    color: var(--faint); font-size: 14px;
}
footer .container:first-child { display: flex; flex-wrap: wrap; gap: 16px; justify-content: space-between; align-items: center; }
footer a { color: var(--text-muted); }
footer a:hover { color: var(--signal); }
.footlinks { display: flex; gap: 20px; flex-wrap: wrap; }
.footlinks a {
    font-family: var(--mono); font-size: 0.66rem;
    letter-spacing: 0.13em; text-transform: uppercase;
    transition: color 0.3s;
}
.foot-colo { margin-top: 2.3rem; padding-top: 1.1rem; border-top: 1px solid var(--border); }

/* ─────────────────────────────────────────────────────────────────────────
   Type
   ───────────────────────────────────────────────────────────────────────── */
/* Audiowide is a wide face — noticeably wider than the Fraunces this page
   was drawn against: "OrbitStudio" measures 96px where Outfit measures 83.
   Every display size below is therefore stepped down from the original, and
   the headings balance their line breaks rather than orphaning a word. */
h1, h2, h3 { font-family: var(--display); color: var(--text); font-weight: 400; margin: 0; letter-spacing: 0.01em; }
h1, h2 { text-wrap: balance; }
h1 { font-size: clamp(1.95rem, 4.4vw, 3.5rem); line-height: 1.12; }
h2 { font-size: clamp(1.6rem, 3.4vw, 2.5rem); line-height: 1.18; }
h3 { font-size: 1.16rem; line-height: 1.3; font-family: var(--sans); font-weight: 600; letter-spacing: -0.01em; }

.grad { background: var(--gradient-hero); -webkit-background-clip: text; background-clip: text; color: transparent; }

.microcap {
    font-family: var(--mono); font-size: 0.64rem;
    letter-spacing: 0.2em; text-transform: uppercase;
    color: var(--faint); font-weight: 400;
}

.pill {
    display: inline-flex; align-items: center; gap: 0.55rem;
    font-family: var(--mono); font-size: 0.66rem;
    letter-spacing: 0.09em; text-transform: uppercase;
    color: var(--text-muted); border: 1px solid var(--border); border-radius: 999px;
    padding: 0.42rem 0.95rem; background: rgba(90, 169, 230, 0.06);
}
.pill .dot {
    width: 6px; height: 6px; border-radius: 50%;
    background: var(--signal-bright); box-shadow: 0 0 9px var(--signal-bright);
    animation: livePulse 2.6s ease-out infinite;
}
@keyframes livePulse {
    0%   { box-shadow: 0 0 0 0 rgba(90, 169, 230, 0.65); }
    70%  { box-shadow: 0 0 0 9px rgba(90, 169, 230, 0); }
    100% { box-shadow: 0 0 0 0 rgba(90, 169, 230, 0); }
}

.sec-eyebrow {
    font-family: var(--mono); font-size: 0.66rem;
    letter-spacing: 0.26em; text-transform: uppercase;
    color: var(--signal); margin-bottom: 1rem;
    display: inline-flex; align-items: center; gap: 12px;
}
.sec-eyebrow::before { content: ""; width: 26px; height: 1px; background: var(--signal); opacity: 0.55; flex: none; }
.sec-sub { color: var(--text-muted); max-width: 54ch; margin: 1.1rem 0 0; }

/* ─────────────────────────────────────────────────────────────────────────
   Buttons — radius 6, ring plus a coloured glow. Mono is self-hosted at 400
   and 500 only, so 500 is as heavy as a button label gets; 600/700 would be a
   browser-synthesised faux bold.
   ───────────────────────────────────────────────────────────────────────── */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 0.6rem;
    padding: 0.9rem 1.5rem;
    font-family: var(--mono); font-size: 0.76rem;
    letter-spacing: 0.08em; text-transform: uppercase;
    border-radius: 6px; cursor: pointer; border: 0;
    transition: all 0.4s var(--ease-out); white-space: nowrap;
}
.btn-signal {
    background: var(--signal); color: var(--signal-ink); font-weight: 500;
    box-shadow: 0 0 0 1px var(--signal), 0 12px 34px -10px rgba(90, 169, 230, 0.6);
}
.btn-signal:hover {
    background: var(--signal-bright); transform: translateY(-2px);
    box-shadow: 0 0 0 1px var(--signal-bright), 0 16px 40px -10px rgba(90, 169, 230, 0.75);
}
.btn-signal .arw { transition: transform 0.4s var(--ease-out); }
.btn-signal:hover .arw { transform: translateX(4px); }
.btn-ghost { background: rgba(255, 255, 255, 0.04); color: var(--text); border: 1px solid var(--border); border-radius: 6px; }
.btn-ghost:hover { border-color: var(--border-strong); background: rgba(255, 255, 255, 0.07); }
.btn-mw {
    background: var(--makerworld); color: #eafff9; font-weight: 500;
    box-shadow: 0 0 0 1px #00A680, 0 12px 34px -10px rgba(0, 166, 128, 0.55);
}
.btn-mw:hover { transform: translateY(-2px); box-shadow: 0 0 0 1px #00c294, 0 16px 40px -10px rgba(0, 166, 128, 0.7); }

/* ─────────────────────────────────────────────────────────────────────────
   Hero
   ───────────────────────────────────────────────────────────────────────── */
/* Top padding clears the fixed topbar (83px at desktop, ~60px on a phone). */
.hero { padding-block: clamp(7rem, 14vh, 9.5rem) clamp(3.5rem, 7vh, 5rem); position: relative; }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1.04fr) minmax(0, 0.96fr); gap: clamp(2rem, 4vw, 4rem); align-items: center; }
.hero-copy > * { opacity: 0; }
.hero-copy .pill { margin-bottom: 1.7rem; }
.hero h1 { margin-bottom: 1.6rem; }
.hero p.lead { font-size: clamp(1.02rem, 1.4vw, 1.2rem); max-width: 47ch; margin: 0 0 2.2rem; color: var(--text-muted); }
.hero-cta { display: flex; flex-wrap: wrap; gap: 0.85rem; margin-bottom: 2.1rem; }
.hero-account { margin: -1.1rem 0 1.8rem; font-size: 0.95rem; color: var(--text-muted); }
.hero-account a { color: var(--signal); text-underline-offset: 3px; }
.nav-links a.link-signup { color: var(--signal); }
.hero-foot { display: flex; flex-wrap: wrap; gap: 0.5rem 1.7rem; border-top: 1px solid var(--border); padding-top: 1.25rem; }

.loaded .hero-copy > * { animation: rise 0.95s var(--ease-out) forwards; }
.loaded .hero-copy .pill      { animation-delay: 0.1s; }
.loaded .hero-copy h1         { animation-delay: 0.24s; }
.loaded .hero-copy p.lead     { animation-delay: 0.44s; }
.loaded .hero-copy .hero-cta  { animation-delay: 0.6s; }
.loaded .hero-copy .hero-account { animation-delay: 0.68s; }
.loaded .hero-copy .hero-foot { animation-delay: 0.76s; }
.loaded .scope { animation: fadeScale 1.5s var(--ease-out) 0.3s forwards; }
@keyframes rise { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
@keyframes fadeScale { from { opacity: 0; transform: scale(0.95); } to { opacity: 1; transform: none; } }

.scope { position: relative; opacity: 0; }
.scope-chart { width: min(44vw, 480px); aspect-ratio: 1; margin: 0 auto; position: relative; }
.scope-chart::before {
    content: ""; position: absolute; inset: -16%; border-radius: 50%;
    background: radial-gradient(circle, rgba(90, 169, 230, 0.16) 0%, rgba(143, 205, 246, 0.10) 45%, transparent 72%);
    filter: blur(18px); pointer-events: none;
}
/* task-hero-truth: the hero is a camera render of a real generated chart now
   (static/sky-hero.jpg), not an SVG built from a fabricated seed -- see
   .scope-chart's own comment in sky.html. object-fit: cover so the square box
   above crops the 900x900 source instead of stretching it; the drop-shadow
   pair is the same two values .planisphere used to carry (glow + contact
   shadow), kept here so the photo sits in the layout the same way the SVG did. */
.scope-photo {
    display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 18px;
    filter: drop-shadow(0 0 22px rgba(90, 169, 230, 0.18)) drop-shadow(0 18px 50px rgba(0, 0, 0, 0.55));
}
.hud { margin-top: 1.3rem; text-align: center; }
.hud-panel {
    display: inline-flex; flex-direction: column; gap: 0.45rem; padding: 0.7rem 1.1rem;
    border: 1px solid var(--border); border-radius: 6px; background: rgba(8, 11, 18, 0.55);
    backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.hud .ro { font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.08em; color: var(--silver); }
.hud .ro .tgt { color: var(--signal-bright); }
.hud .ro-src { font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.06em; color: var(--faint); }
@media (max-width: 700px) { .hud .ro-src { display: none; } }
@media (max-width: 900px) {
    .hero-grid { grid-template-columns: 1fr; }
    .scope { margin-top: 2.5rem; }
    .scope-chart { width: min(64vw, 320px); }
}

/* ─────────────────────────────────────────────────────────────────────────
   Stats band
   ───────────────────────────────────────────────────────────────────────── */
.stats {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px;
    background: var(--border);
    border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
}
.stat { background: var(--bg); padding: clamp(1.6rem, 3.4vw, 2.6rem) 1rem; text-align: center; }
.stat .num {
    font-family: var(--display); font-size: clamp(1.7rem, 3.2vw, 2.6rem); line-height: 1;
    background: var(--gradient-hero); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.stat .cap { font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--faint); margin-top: 0.7rem; }
@media (max-width: 720px) { .stats { grid-template-columns: repeat(2, 1fr); } }

/* ─────────────────────────────────────────────────────────────────────────
   Sections
   ───────────────────────────────────────────────────────────────────────── */
section.block { padding-block: clamp(4.5rem, 10vh, 7.5rem); }
[data-reveal] { opacity: 0; transform: translateY(26px); transition: opacity 0.85s var(--ease-out), transform 0.85s var(--ease-out); }
[data-reveal].in { opacity: 1; transform: none; }

/* Feature cards */
.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.card {
    background: var(--bg-card); border: 1px solid var(--border); border-radius: 14px;
    padding: 1.7rem 1.6rem; transition: background 0.35s, border-color 0.35s, transform 0.35s;
}
.card:hover { background: var(--bg-card-hover); border-color: var(--border-strong); transform: translateY(-3px); }
.card .ic { width: 32px; height: 32px; color: var(--signal-bright); margin-bottom: 1.1rem; }
.card.blue .ic { color: var(--signal); }
.card h3 { margin-bottom: 0.5rem; color: var(--text); }
.card p { margin: 0; font-size: 0.93rem; color: var(--text-muted); }
@media (max-width: 900px) { .cards { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .cards { grid-template-columns: 1fr; } }

/* Workflow */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.4rem, 3vw, 2.4rem); }
.step { border-top: 1px solid var(--border); padding-top: 1.5rem; position: relative; }
.step::before { content: ""; position: absolute; top: -1px; left: 0; width: 44px; height: 1px; background: var(--signal); }
.step .num { font-family: var(--mono); font-size: 0.72rem; color: var(--signal); letter-spacing: 0.12em; display: block; margin-bottom: 0.9rem; }
.step h3 { color: var(--text); margin-bottom: 0.6rem; font-family: var(--display); font-weight: 400; font-size: 1.22rem; letter-spacing: 0.01em; }
.step p { margin: 0; font-size: 0.95rem; }
@media (max-width: 760px) { .steps { grid-template-columns: 1fr; } }

/* Moments */
.idx-rows { border-bottom: 1px solid var(--border); }
.idx-row {
    display: grid; grid-template-columns: 4.6rem minmax(0, 0.85fr) minmax(0, 1.15fr) auto;
    align-items: baseline; gap: 1.2rem; padding: 1.3rem 0.5rem; border-top: 1px solid var(--border);
    transition: background 0.35s, padding-left 0.35s;
}
.idx-row:hover { background: var(--bg-card-hover); padding-left: 1rem; }
.idx-row .no { font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.12em; color: var(--signal); }
.idx-row .name { font-family: var(--display); font-size: clamp(1.1rem, 2vw, 1.45rem); color: var(--text); font-weight: 400; letter-spacing: 0.01em; }
.idx-row .desc { font-size: 0.93rem; color: var(--text-muted); }
.idx-row .coord { font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.1em; color: var(--faint); white-space: nowrap; }
.idx-row .coord .tgt { color: var(--signal-bright); }
#moments { background: linear-gradient(180deg, transparent, rgba(90, 169, 230, 0.045) 45%, transparent); }
@media (max-width: 760px) {
    .idx-row { grid-template-columns: 3.2rem 1fr; grid-template-rows: auto auto; row-gap: 0.25rem; }
    .idx-row .desc, .idx-row .coord { grid-column: 2; }
}

/* Print quality */
.quality { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(2rem, 5vw, 4rem); align-items: center; }
.qlist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.85rem; }
.qlist li {
    display: flex; gap: 0.9rem; align-items: flex-start;
    background: var(--bg-card); border: 1px solid var(--border);
    border-radius: 10px; padding: 0.95rem 1.1rem; font-size: 0.95rem; color: var(--text-muted);
}
.qlist .chk { color: var(--signal-bright); font-family: var(--mono); font-weight: 500; }
.qlist b { color: var(--text); font-weight: 500; }
@media (max-width: 820px) { .quality { grid-template-columns: 1fr; } }

/* Cross-promo */
.sibling {
    border: 1px solid var(--border); border-radius: 16px; overflow: hidden; position: relative;
    background:
        radial-gradient(90% 130% at 85% 20%, rgba(90, 169, 230, 0.10) 0%, transparent 55%),
        var(--bg-card);
    display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1.5rem; align-items: center;
    padding: clamp(1.6rem, 4vw, 2.6rem);
}
.sibling .moon {
    width: 104px; height: 104px; border-radius: 50%; flex: none; position: relative;
    background: radial-gradient(circle at 34% 30%, #cfd6de 0%, #9aa4b1 42%, #4b5563 78%, #2c333e 100%);
    box-shadow: inset -14px -10px 30px rgba(0, 0, 0, 0.55), 0 0 40px rgba(90, 169, 230, 0.22);
}
.sibling .moon::after {
    content: ""; position: absolute; inset: 0; border-radius: 50%; opacity: 0.5;
    background:
        radial-gradient(9px 9px at 30% 58%, rgba(0, 0, 0, 0.4) 40%, transparent 60%),
        radial-gradient(6px 6px at 60% 34%, rgba(0, 0, 0, 0.35) 40%, transparent 60%),
        radial-gradient(12px 12px at 68% 68%, rgba(0, 0, 0, 0.3) 40%, transparent 60%),
        radial-gradient(5px 5px at 44% 22%, rgba(0, 0, 0, 0.35) 40%, transparent 60%);
}
.sibling h2 { font-size: clamp(1.4rem, 2.8vw, 2rem); margin: 0.4rem 0 0.7rem; }
.sibling p { margin: 0 0 1.3rem; max-width: 52ch; font-size: 0.97rem; }
@media (max-width: 700px) { .sibling { grid-template-columns: 1fr; } .sibling .moon { order: -1; } }

/* Maker */
.maker { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: clamp(2rem, 5vw, 4rem); align-items: center; }
/* Display face, no synthesised italic: Audiowide ships one 400 upright cut,
   so font-style:italic here would be a browser-slanted fake. */
.maker blockquote {
    margin: 1.4rem 0 1.8rem; padding-left: 1.1rem; border-left: 2px solid var(--signal);
    font-family: var(--display); font-weight: 400; font-size: 1.02rem;
    line-height: 1.6; letter-spacing: 0.012em; color: var(--silver);
}
.maker-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.mstat { background: var(--bg-card); border: 1px solid var(--border); border-radius: 12px; padding: 1.4rem; text-align: center; }
.mstat .num {
    font-family: var(--display); font-size: 1.8rem; line-height: 1.1;
    background: var(--gradient-hero); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.mstat .cap { font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--faint); margin-top: 0.5rem; }
/* minmax(0, 1fr), not 1fr: a bare 1fr track is never narrower than its
   widest unbreakable content, and "50,000+" in the display face made that
   366px -- on a 360px phone the whole About section ran 46px off the right
   edge, the quote and the last stat cut mid-word. tests/test_sky_mobile.py. */
@media (max-width: 820px) { .maker { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 480px) {
    .mstat { padding: 1.1rem 0.6rem; }
    .mstat .num { font-size: 1.35rem; }
}

/* Final CTA */
.final { text-align: center; padding-block: clamp(5rem, 12vh, 8.5rem); position: relative; isolation: isolate; }
.final::before {
    content: ""; position: absolute; left: 0; right: 0; top: 8%; height: 70%; z-index: -1; pointer-events: none;
    background: radial-gradient(46% 55% at 50% 42%, rgba(90, 169, 230, 0.12), transparent 70%);
    filter: blur(24px);
}
.final-card {
    position: relative; overflow: hidden; border: 1px solid var(--border); border-radius: 16px;
    background: var(--bg-card); padding: clamp(3rem, 8vw, 5rem) 2rem;
}
.final-card::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: var(--gradient-hero); }
.final h2 { max-width: 20ch; margin: 1.2rem auto 2.2rem; font-size: clamp(1.9rem, 4.6vw, 3.4rem); }
.final .sub { margin-top: 1.4rem; }

@media (prefers-reduced-motion: reduce) {
    * { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
    .tw, .meteor { animation: none !important; opacity: 0.5; }
    .meteor { opacity: 0; }
    .hero-copy > *, .scope { opacity: 1 !important; }
    [data-reveal] { opacity: 1 !important; transform: none !important; }
    /* The three hover lifts. Collapsing a duration does not stop a transform,
       it only makes it instant, so they are named off outright — the same guard
       static/sky/app.css carries for its own. Colour and border feedback stays. */
    .card:hover, .btn-mw:hover { transform: none; }
    .btn-signal:hover .arw { transform: none; }
}