/* mysterling.ai: system fonts, no external assets. The whole site lives in the Sterlingverse: always dark,
   with one fixed starfield behind every page (public/verse.js) and the words on dark glass. */

:root {
  --sky: on; /* tells public/verse.js this stylesheet knows the sky */
  color-scheme: dark;
  --space: #03040b;
  --glass: rgba(16, 18, 32, 0.8);
  --glass-strong: rgba(13, 15, 27, 0.9);
  --edge: inset 0 0 0 1px rgba(255, 255, 255, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.05);
  --well: rgba(255, 255, 255, 0.06);
  --field: #0a0c17;
  --text: #f5f5f7;
  --text-2: #bdbdc8;
  --line: #3a3b48;
  --line-soft: rgba(255, 255, 255, 0.1);
  --link: #7aa2ff;
  --accent: #2f62e0;
  --accent-hover: #3d70ee;
  --on-accent: #ffffff;
  --mark: #6b5500;
  --mark-text: #fff6d6;
  --good: #4cc26a;
  --bad: #ff6b6b;
  --focus: #7aa2ff;
  --nav-bg: rgba(3, 4, 11, 0.72);
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.5), 0 14px 36px rgba(0, 0, 0, 0.45);
  --halo: 0 0 3px rgba(3, 4, 11, 0.9), 0 0 14px rgba(3, 4, 11, 0.85), 0 0 30px rgba(3, 4, 11, 0.6);
  --metal: linear-gradient(180deg, #ffffff 20%, #8e8e93 100%);
  --radius-lg: 28px;
  --radius: 20px;
  --max: 1040px;
  --narrow: 620px;
  --gutter: 16px;
  --nav-h: 52px;
}

@media (min-width: 600px) { :root { --gutter: 24px; } }
@media (min-width: 1024px) { :root { --gutter: 32px; } }

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-h) + 12px);
  background: var(--space);
}

@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 17px;
  line-height: 1.5;
  letter-spacing: -0.011em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
}

/* The sky, fixed behind every page: soft nebula clouds, then the stars. Each layer is as tall as the
   largest viewport (100lvh), so a phone's toolbar sliding away never resizes it and no star jumps.
   Without the script the still CSS stars below stay; with it, the canvas takes over. */
body::before, body::after, .sky {
  position: fixed; top: 0; left: 0; width: 100%; height: 100vh; height: 100lvh; pointer-events: none;
}
body::before {
  content: ""; z-index: -3;
  background:
    radial-gradient(60% 45% at 14% 12%, rgba(98, 76, 204, 0.22), transparent 70%),
    radial-gradient(55% 45% at 88% 86%, rgba(30, 104, 196, 0.2), transparent 70%),
    radial-gradient(40% 30% at 64% 44%, rgba(214, 168, 86, 0.06), transparent 70%);
}
body::after {
  content: ""; z-index: -2; opacity: 0.75;
  background-image:
    radial-gradient(1.4px 1.4px at 12px 30px, #ffffff 50%, transparent 52%),
    radial-gradient(1px 1px at 80px 120px, #dfe6ff 50%, transparent 52%),
    radial-gradient(1.2px 1.2px at 150px 60px, #ffffff 50%, transparent 52%),
    radial-gradient(1px 1px at 200px 190px, #ffe8c8 50%, transparent 52%),
    radial-gradient(1.6px 1.6px at 40px 210px, #ffffff 50%, transparent 52%),
    radial-gradient(1px 1px at 120px 20px, #ffffff 50%, transparent 52%),
    radial-gradient(1px 1px at 230px 100px, #dfe6ff 50%, transparent 52%);
  background-size: 240px 240px;
}
.sky-live body::after { display: none; }
.sky { z-index: -1; display: block; }

svg { display: block; max-width: 100%; }
a { color: var(--link); text-decoration: none; }
a:hover { text-decoration: underline; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 6px; }
h1, h2, h3, p, figure { margin: 0; }
[hidden] { display: none !important; }

.wrap {
  width: 100%;
  max-width: calc(var(--max) + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.wrap.narrow { max-width: calc(var(--narrow) + 2 * var(--gutter)); }

.skip {
  position: absolute; left: -9999px; top: 8px; z-index: 100;
  padding: 8px 14px; border-radius: 10px;
  background: var(--accent); color: var(--on-accent);
}
.skip:focus { left: 8px; }

/* Icons: 24-unit stroke drawings that inherit the text colour. */
.i { width: 28px; height: 28px; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.i-sm { width: 20px; height: 20px; }

/* Words that sit straight on the stars get a soft dark halo, so a bright star never lands behind a letter.
   (Never on gradient lettering: the halo would show through it.) */
.hero .eyebrow, .tagline, .hero > .wrap > .lead, .section-head, .facts, .how, .caption,
.soon-price, .buy-test, .buy .fine, .buy-status, .planet-name, .planet-note { text-shadow: var(--halo); }

/* Navigation: the only frosted glass. It's a thin strip, so blurring the moving sky behind it stays cheap. */
.nav {
  position: sticky; top: 0; z-index: 50;
  background: var(--nav-bg);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid var(--line-soft);
}
.nav-inner { display: flex; align-items: center; justify-content: space-between; gap: 12px; height: var(--nav-h); }
.brand { color: var(--text); font-size: 19px; font-weight: 650; letter-spacing: -0.02em; }
.brand:hover { text-decoration: none; }
.nav-links { display: flex; align-items: center; gap: 2px; }
.nav-links a { padding: 7px 10px; border-radius: 999px; color: var(--text); font-size: 14px; }
.nav-links a:hover { text-decoration: none; background: rgba(255, 255, 255, 0.1); }
.nav-links .nav-cta { margin-left: 6px; padding: 7px 14px; background: var(--accent); color: var(--on-accent); font-weight: 500; }
.nav-links .nav-cta:hover { background: var(--accent-hover); }
.short { display: none; }
@media (max-width: 440px) { .long { display: none; } .short { display: inline; } }

/* Buttons */
.button {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 0 26px; border: 0; border-radius: 999px;
  background: var(--accent); color: var(--on-accent);
  font: inherit; font-size: 17px; font-weight: 500; letter-spacing: -0.01em; text-shadow: none;
  cursor: pointer; transition: background-color 0.2s ease, transform 0.2s ease;
}
.button:hover { background: var(--accent-hover); text-decoration: none; }
.button:active { transform: scale(0.98); }
.button[disabled] { opacity: 0.6; cursor: progress; transform: none; }
.button.wide { width: 100%; }

/* Sections: open space between them, so the stars show all the way down. */
.section { padding-block: clamp(72px, 11vw, 128px); }
.section-head { max-width: 760px; margin-bottom: clamp(40px, 6vw, 64px); }
.section-head.center { margin-inline: auto; text-align: center; }

.eyebrow {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
  margin-bottom: 14px; color: var(--text-2); font-size: 15px; font-weight: 600;
}
.center .eyebrow, .hero .eyebrow { justify-content: center; }
.product-name { color: var(--text); }

.badge {
  display: inline-block; padding: 4px 10px; border-radius: 999px;
  background: rgba(22, 24, 40, 0.9); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.16);
  color: var(--text-2); font-size: 12px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; text-shadow: none;
}

h2 { font-size: clamp(38px, 6.4vw, 64px); line-height: 1.05; letter-spacing: -0.035em; font-weight: 700; }
h3 { font-size: 21px; line-height: 1.25; letter-spacing: -0.02em; font-weight: 650; }

.lead { margin-top: 18px; color: var(--text-2); font-size: clamp(19px, 2.3vw, 23px); line-height: 1.42; letter-spacing: -0.015em; }
.lead strong { color: var(--text); font-weight: 600; }
.fine { margin-top: 16px; color: var(--text-2); font-size: 14px; line-height: 1.45; }

/* Glass: every card, panel and pill the words sit on. Tinted, not blurred: blurring a moving sky behind
   many panels would be slow on an old phone, and the tint alone keeps the contrast strong. */
.hero-card, .card, .call, .honest, .biz, .price-card, .chips a, .soon-pill {
  background: var(--glass); box-shadow: var(--edge);
}

/* Hero */
.hero { padding-block: clamp(72px, 14vw, 156px) clamp(64px, 10vw, 112px); text-align: center; }
.wordmark { padding-bottom: 0.06em; font-size: clamp(68px, 17vw, 152px); line-height: 1; letter-spacing: -0.05em; font-weight: 700; }
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .wordmark { background: var(--metal); -webkit-background-clip: text; background-clip: text; color: transparent; }
}
.tagline { margin-top: 10px; font-size: clamp(27px, 4.6vw, 46px); line-height: 1.12; letter-spacing: -0.03em; font-weight: 600; }
.hero .lead { max-width: 620px; margin-inline: auto; }

.hero-cards { display: grid; gap: 16px; margin-top: clamp(44px, 6vw, 72px); text-align: left; }
@media (min-width: 720px) { .hero-cards { grid-template-columns: 1fr 1fr; } }
.hero-card {
  display: flex; flex-direction: column; align-items: flex-start; gap: 10px;
  padding: 28px; border-radius: var(--radius); color: var(--text);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.hero-card:hover { text-decoration: none; transform: translateY(-2px); box-shadow: var(--edge), var(--shadow); }
.hero-card strong { font-size: 25px; font-weight: 650; letter-spacing: -0.025em; }
.hero-card .desc { color: var(--text-2); }
.hero-card .more { margin-top: auto; padding-top: 6px; color: var(--link); font-weight: 500; }

/* Cards */
.card { padding: 28px; border-radius: var(--radius); }
.card .i { margin-bottom: 18px; color: var(--link); }
.card h3 + p { margin-top: 8px; color: var(--text-2); }

/* Sterling Desk */
.desk-top { display: grid; gap: 40px; align-items: center; margin-bottom: clamp(40px, 6vw, 64px); }
.desk-top .section-head { margin-bottom: 0; }
@media (min-width: 900px) { .desk-top { grid-template-columns: 1.15fr 0.85fr; gap: 56px; } }
.setup { margin-top: 18px; color: var(--text-2); }
.setup strong { color: var(--text); font-weight: 600; }

.call { display: grid; gap: 12px; padding: 22px; border-radius: var(--radius-lg); }
.call-head { display: flex; align-items: center; justify-content: space-between; color: var(--text-2); font-size: 13px; font-weight: 500; }
.call-live { display: inline-flex; align-items: center; gap: 7px; }
.call-live::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--good); }
.bubble { max-width: 90%; padding: 12px 16px; border-radius: 20px; font-size: 16px; line-height: 1.4; }
.bubble .who { display: block; margin-bottom: 3px; color: var(--text-2); font-size: 12px; font-weight: 600; }
.bubble.caller { justify-self: start; border-bottom-left-radius: 6px; background: rgba(255, 255, 255, 0.09); }
.bubble.ai { justify-self: end; border-bottom-right-radius: 6px; background: var(--accent); color: var(--on-accent); }
.bubble.ai .who { color: rgba(255, 255, 255, 0.82); }
.call-alert {
  display: inline-flex; align-items: center; gap: 8px; justify-self: center; margin-top: 4px;
  padding: 8px 14px; border-radius: 999px; background: var(--well); box-shadow: inset 0 0 0 1px var(--line-soft);
  font-size: 14px; font-weight: 600;
}
.call-alert .i { color: var(--bad); }
.caption { margin-top: 10px; color: var(--text-2); font-size: 13px; text-align: center; }

.features { display: grid; gap: 16px; margin: 0; padding: 0; list-style: none; }
@media (min-width: 640px) { .features { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px) { .features { grid-template-columns: repeat(4, 1fr); } }

.honest {
  display: flex; align-items: flex-start; gap: 16px; margin-top: 16px;
  padding: 24px 28px; border-radius: var(--radius);
}
.honest .i { color: var(--good); }
.honest p { color: var(--text-2); }
.honest strong { display: block; margin-bottom: 2px; color: var(--text); font-size: 19px; font-weight: 650; letter-spacing: -0.02em; }

/* Business types */
.chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; max-width: 780px; margin: calc(-1 * clamp(16px, 3vw, 32px)) auto 40px; }
.chips a { padding: 8px 16px; border-radius: 999px; color: var(--text); font-size: 15px; }
.chips a:hover { text-decoration: none; box-shadow: inset 0 0 0 1px var(--line); }

.biz-list { display: grid; gap: 16px; }
.biz { display: grid; gap: 22px; padding: clamp(24px, 4vw, 40px); border-radius: var(--radius-lg); }
@media (min-width: 880px) { .biz { grid-template-columns: 230px 1fr; gap: 32px; } }
.biz-title { display: flex; align-items: center; gap: 12px; }
.biz-title .i { color: var(--link); }
.biz-title h3 { font-size: 24px; }
.pf { display: grid; gap: 14px; }
@media (min-width: 640px) { .pf { grid-template-columns: 1fr 28px 1fr; gap: 20px; } }
.pf .label { margin-bottom: 6px; color: var(--text-2); font-size: 13px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; }
.pf .fix .label { color: var(--link); }
.pf .problem p:not(.label) { color: var(--text-2); }
.pf .arrow { align-self: center; justify-self: center; width: 22px; height: 22px; color: var(--text-2); transform: rotate(90deg); }
@media (min-width: 640px) { .pf .arrow { transform: none; } }

/* Pricing */
.price-card { padding: clamp(32px, 6vw, 56px); border-radius: var(--radius-lg); text-align: center; }
.price-card .eyebrow { justify-content: center; }
.price { display: flex; align-items: baseline; justify-content: center; gap: 6px; margin-top: 8px; }
.price .amount { font-size: clamp(60px, 11vw, 92px); font-weight: 700; line-height: 1; letter-spacing: -0.045em; }
.price .per { color: var(--text-2); font-size: 22px; font-weight: 500; }
.price-plus { margin-top: 10px; font-size: 22px; font-weight: 600; letter-spacing: -0.02em; }
.perks-title { margin-top: 32px; font-size: 17px; }
.perks { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 12px 0 32px; padding: 0; list-style: none; }
.perks li { display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: 999px; background: var(--well); font-weight: 500; }
.perks .i { color: var(--good); }
.perk-line {
  display: inline-flex; align-items: center; gap: 10px;
  margin: 32px 0 8px; padding: 12px 20px; border-radius: 999px; background: var(--well);
  font-weight: 500; line-height: 1.35; text-align: left;
}
.perk-line .i { color: var(--good); }
@media (max-width: 480px) { .perk-line { border-radius: 18px; } }

/* Sterling Glance */
.glance-grid { display: grid; gap: 48px; align-items: center; }
@media (min-width: 900px) { .glance-grid { grid-template-columns: 1fr 1fr; gap: 64px; } }
.glance-grid .section-head { margin-bottom: 32px; }
.window { padding: 20px 22px 24px; border-radius: 18px; background: rgba(26, 27, 36, 0.94); box-shadow: var(--shadow), inset 0 0 0 1px var(--line-soft); }
.dots { display: flex; gap: 7px; margin-bottom: 18px; }
.dots span { width: 11px; height: 11px; border-radius: 50%; background: var(--line); }
.window-text { font-size: 17px; line-height: 1.6; }
.window-text mark { padding: 1px 3px; border-radius: 4px; background: var(--mark); color: var(--mark-text); }
.answer { margin-top: 18px; padding: 14px 16px; border-radius: 14px; background: var(--well); box-shadow: inset 0 0 0 1px var(--line-soft); font-size: 15px; line-height: 1.45; }
.answer .q { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; color: var(--text-2); font-size: 13px; font-weight: 600; }
.answer .q .i { color: var(--link); }

.facts { display: grid; gap: 22px; margin: 0 0 36px; padding: 0; list-style: none; }
.facts li { display: grid; grid-template-columns: 28px 1fr; gap: 2px 14px; }
.facts .i { grid-row: span 2; color: var(--link); }
.facts strong { font-size: 19px; font-weight: 650; letter-spacing: -0.02em; }
.facts span { color: var(--text-2); }

/* Sterling Glance: Buy button (shown only when the shop is open) */
.buy { display: grid; justify-items: start; gap: 14px; max-width: 420px; }
.buy .button { min-width: 220px; }
.buy .form-status { min-height: 0; text-align: left; }
.buy .form-status:empty { display: none; }
.buy .fine { margin-top: 0; }
.buy-test { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; color: var(--text-2); font-size: 15px; }
@media (max-width: 480px) { .buy { justify-items: stretch; } .buy .button { width: 100%; } }

/* Forms */
.form { position: relative; display: grid; gap: 22px; padding: clamp(24px, 5vw, 40px); border-radius: var(--radius-lg); background: var(--well); box-shadow: inset 0 0 0 1px var(--line-soft); }
.field { display: grid; gap: 8px; min-width: 0; margin: 0; padding: 0; border: 0; }
.field > label, .field > legend { padding: 0; font-size: 15px; font-weight: 600; }
.field > legend { margin-bottom: 8px; }

input[type="email"], input[type="text"], select, textarea {
  width: 100%; min-height: 50px; padding: 12px 16px;
  border: 1px solid var(--line); border-radius: 12px; background-color: var(--field); color: var(--text);
  font: inherit; font-size: 17px; -webkit-appearance: none; appearance: none;
}
select {
  padding-right: 44px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2386868b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center; background-size: 18px;
}
textarea { min-height: 168px; line-height: 1.45; resize: vertical; }
.optional { color: var(--text-2); font-weight: 400; }
.sender { margin-top: -8px; color: var(--text-2); font-size: 13px; text-align: center; }
.doc .contact-form, .doc .done, .download .form { margin-top: 32px; }
.download input[name="key"] { font-family: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace; letter-spacing: 0.04em; }
.download #download-ready .button { margin-top: 20px; }
.doc .contact-form p { margin-top: 0; }
input[type="email"]:focus, input[type="text"]:focus, select:focus, textarea:focus { outline: none; border-color: var(--focus); box-shadow: 0 0 0 4px color-mix(in srgb, var(--focus) 24%, transparent); }
[aria-invalid="true"] { border-color: var(--bad) !important; }
.error { color: var(--bad); font-size: 14px; }

.segmented { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; padding: 4px; border-radius: 14px; background: var(--field); box-shadow: inset 0 0 0 1px var(--line); }
.segmented label {
  position: relative; display: flex; align-items: center; justify-content: center;
  min-height: 44px; padding: 6px 8px; border-radius: 10px;
  color: var(--text-2); font-size: 15px; font-weight: 500; line-height: 1.2; text-align: center; cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease;
}
.segmented input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
.segmented label.is-checked { background: var(--accent); color: var(--on-accent); }
.segmented label.is-focused { outline: 3px solid var(--focus); outline-offset: 2px; }
.hint { color: var(--text-2); font-size: 14px; }

.check { grid-template-columns: 24px 1fr; align-items: start; gap: 12px; }
.check input { width: 22px; height: 22px; margin: 1px 0 0; accent-color: var(--accent); }
.check label { color: var(--text-2); font-size: 15px; line-height: 1.45; }
.check .error { grid-column: 2; }

.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.turnstile:empty { display: none; }
.form-status { min-height: 1.4em; color: var(--text-2); font-size: 15px; text-align: center; }
.form-status.is-error { color: var(--bad); }
.form .fine { margin-top: -8px; text-align: center; }

.done { padding: clamp(32px, 6vw, 56px); border-radius: var(--radius-lg); background: var(--well); box-shadow: inset 0 0 0 1px var(--line-soft); text-align: center; }
.done:focus { outline: none; }
.done .i { width: 52px; height: 52px; margin: 0 auto 18px; color: var(--good); }
.done h3 { font-size: 28px; }
.done p { margin-top: 10px; color: var(--text-2); }
.done strong { color: var(--text); word-break: break-all; }

/* Footer: a band of dark glass along the bottom. */
.footer { padding-block: 40px 56px; border-top: 1px solid var(--line-soft); background: var(--glass-strong); color: var(--text-2); font-size: 14px; }
.footer-inner { display: grid; gap: 10px; }
.footer strong { color: var(--text); font-weight: 600; }
.footer nav { display: flex; flex-wrap: wrap; gap: 20px; margin-top: 6px; }
.footer a { color: var(--text-2); }
.footer a:hover { color: var(--text); }

/* Placeholder that must be filled before launch (deploy refuses while any remain). */
.todo { padding: 0 4px; border-radius: 4px; background: #ffe58a; color: #1d1d1f; }

/* Reading pages (privacy, terms, contact, the licence key): the whole text sits on one sheet of dark glass,
   floating over the stars. */
.doc { padding-block: clamp(32px, 7vw, 88px) clamp(48px, 8vw, 96px); }
.doc > .wrap {
  --sheet-pad: clamp(20px, 5vw, 52px);
  width: calc(100% - 2 * min(var(--gutter), 8px));
  max-width: calc(var(--narrow) + 2 * var(--sheet-pad));
  padding: var(--sheet-pad);
  border-radius: var(--radius-lg);
  background: var(--glass-strong); box-shadow: var(--edge), var(--shadow);
}
@media (min-width: 600px) { .doc > .wrap { width: calc(100% - 2 * var(--gutter)); } }
.doc h1 { font-size: clamp(38px, 6vw, 56px); line-height: 1.08; letter-spacing: -0.035em; }
.doc .updated { margin-top: 12px; color: var(--text-2); }
.doc .summary { margin-top: 32px; padding: 20px 24px; border-radius: var(--radius); background: var(--well); }
.doc .summary p:first-child { margin-top: 0; }
.doc h2 { margin-top: 44px; font-size: 24px; line-height: 1.25; letter-spacing: -0.02em; }
.doc p, .doc li { margin-top: 12px; }
.doc ul { margin: 0; padding-left: 1.2em; }
.doc li { margin-top: 8px; }

/* Thanks page: the buyer's licence key */
.thanks .done .thanks-title { font-size: clamp(28px, 5vw, 34px); line-height: 1.15; letter-spacing: -0.03em; }
.thanks .done .button { margin-top: 24px; }
.thanks .eyebrow { margin-bottom: 14px; }
#thanks-ready:focus { outline: none; }
.key-card {
  display: grid; justify-items: center; gap: 14px;
  margin-top: 32px; padding: clamp(18px, 5vw, 36px); border-radius: var(--radius-lg);
  background: var(--well); box-shadow: inset 0 0 0 1px var(--line-soft); text-align: center;
}
.doc .key-card p { margin-top: 0; }
.key-label { color: var(--text-2); font-size: 15px; font-weight: 600; }
.key {
  max-width: 100%; padding: 12px clamp(10px, 3vw, 18px); border-radius: 14px;
  background: var(--field); box-shadow: inset 0 0 0 1px var(--line);
  font-family: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
  font-size: clamp(12px, 3.9vw, 26px); font-weight: 600; letter-spacing: 0.02em; line-height: 1.3;
  overflow-wrap: anywhere; user-select: all; -webkit-user-select: all;
}
.key-card .form-status { min-height: 1.4em; }
.doc .key-notes { display: grid; gap: 10px; margin: 28px 0 0; padding: 0; list-style: none; }
.doc .key-notes li { display: grid; grid-template-columns: 20px 1fr; gap: 10px; margin-top: 0; }
.key-notes .i { margin-top: 2px; color: var(--good); }
.downloads { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 16px; }
.button-quiet { background: var(--well); color: var(--link); box-shadow: inset 0 0 0 1px var(--line); }
.button-quiet:hover { background: rgba(255, 255, 255, 0.1); }
@media (max-width: 480px) { .downloads .button { width: 100%; } }
.doc .steps { margin: 0; padding-left: 1.4em; }
.doc .steps li { margin-top: 10px; padding-left: 4px; }

/* Small pages: 404 */
.simple { display: grid; place-items: center; min-height: calc(100vh - var(--nav-h) - 160px); padding-block: 72px; text-align: center; }
.panel { max-width: 520px; }
.simple > .panel { width: calc(100% - 2 * var(--gutter)); padding: clamp(28px, 6vw, 48px); border-radius: var(--radius-lg); background: var(--glass-strong); box-shadow: var(--edge), var(--shadow); }
.panel h1 { font-size: clamp(34px, 6vw, 48px); line-height: 1.1; letter-spacing: -0.03em; }
.panel p { margin-top: 14px; color: var(--text-2); font-size: 19px; }
.panel .button { margin-top: 28px; }
.panel .i { width: 52px; height: 52px; margin: 0 auto 18px; color: var(--link); }
.panel .ok { color: var(--good); }

/* Scroll reveal: only elements below the fold start hidden, and only when JS runs. */
.reveal { transition: opacity 0.8s ease, transform 0.8s cubic-bezier(0.2, 0.65, 0.2, 1); }
.reveal.is-hidden { opacity: 0; transform: translateY(28px); }
@media (prefers-reduced-motion: reduce) {
  .reveal { transition: none; }
  .reveal.is-hidden { opacity: 1; transform: none; }
  .hero-card, .button { transition: none; }
}

/* Text only screen readers hear. */
.sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }

/* Sterling Glance page */
.glance-hero { padding-block: clamp(64px, 12vw, 136px) clamp(48px, 8vw, 88px); }
.glance-title { font-size: clamp(44px, 9vw, 92px); line-height: 1.03; letter-spacing: -0.045em; font-weight: 700; }
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .glance-title { padding-bottom: 0.06em; background: var(--metal); -webkit-background-clip: text; background-clip: text; color: transparent; }
}
.glance-hero .lead { max-width: 640px; margin-inline: auto; }
.kbd {
  display: inline-block; padding: 0 8px; border-radius: 8px;
  background: #15172a; box-shadow: inset 0 0 0 1px var(--line), 0 1px 0 var(--line);
  color: var(--text); font: inherit; font-size: 0.92em; font-weight: 600; letter-spacing: 0.06em; white-space: nowrap; text-shadow: none;
}
.soon { display: grid; justify-items: center; gap: 14px; margin-top: clamp(32px, 5vw, 48px); }
.soon-pill {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 60px; padding: 0 clamp(30px, 6vw, 46px); border-radius: 999px;
  box-shadow: var(--edge), inset 0 0 0 1px var(--line);
  color: var(--text); font-size: clamp(22px, 3.6vw, 28px); font-weight: 650; letter-spacing: -0.02em;
}
.soon-price { color: var(--text-2); }
.soon-price strong { color: var(--text); font-weight: 600; }
.buy-center { justify-items: center; margin: clamp(32px, 5vw, 48px) auto 0; text-align: center; }
.buy-center .fine, .buy-center .buy-status { text-align: center; }
.buy-center .buy-test { justify-content: center; }
.price-card .perks { margin-bottom: 28px; }

.demo { padding-bottom: clamp(56px, 9vw, 104px); }
.video-slot {
  position: relative; max-width: 960px; margin-inline: auto; overflow: hidden;
  border-radius: var(--radius-lg);
  background: radial-gradient(70% 90% at 50% 0%, #2a2f45 0%, #0d0f18 62%, #05060a 100%);
  box-shadow: var(--shadow), inset 0 0 0 1px rgba(255, 255, 255, 0.06);
  color: #f5f5f7;
}
.video-slot::before { content: ""; display: block; padding-top: 56.25%; } /* 16:9, reserved before anything loads */
.video-inner { position: absolute; inset: 0; display: grid; place-items: center; align-content: center; gap: 14px; }
.play {
  display: grid; place-items: center; width: clamp(56px, 9vw, 84px); height: clamp(56px, 9vw, 84px); border-radius: 50%;
  background: rgba(255, 255, 255, 0.1); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.24);
}
.play svg { width: 42%; height: 42%; margin-left: 8%; fill: #ffffff; }
.video-note { color: rgba(235, 235, 245, 0.72); font-size: 15px; font-weight: 500; }

.shortcuts { display: grid; gap: 16px; max-width: 860px; margin: 0 auto; padding: 0; list-style: none; }
@media (min-width: 700px) { .shortcuts { grid-template-columns: 1fr 1fr; } }
.shortcut { padding: clamp(24px, 4vw, 36px); }
.shortcut h3 { font-size: 24px; }
.keys { display: flex; gap: 8px; margin-bottom: 20px; }
.keys kbd {
  display: grid; place-items: center; min-width: 54px; height: 54px; padding: 0 12px; border-radius: 12px;
  background: var(--field); box-shadow: inset 0 0 0 1px var(--line), 0 3px 0 var(--line-soft), 0 8px 18px rgba(0, 0, 0, 0.3);
  color: var(--text); font: inherit; font-size: 24px; font-weight: 600;
}

.how { display: grid; gap: 22px; margin: 0; padding: 0; list-style: none; counter-reset: how; }
.how li { display: grid; grid-template-columns: 40px 1fr; gap: 2px 16px; counter-increment: how; }
.how li::before {
  content: counter(how); grid-row: span 2; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%;
  background: #15172a; box-shadow: inset 0 0 0 1px var(--line); color: var(--link); font-weight: 650; text-shadow: none;
}
.how strong { font-size: 19px; font-weight: 650; letter-spacing: -0.02em; }
.how li > span { color: var(--text-2); }

/* The Sterlingverse section (home page): the planets for Desk and Glance. The sky itself is the page's. */
.verse {
  position: relative; isolation: isolate;
  display: grid; align-items: center;
  min-height: 640px; min-height: clamp(620px, 100svh, 900px);
  padding-block: clamp(72px, 10vw, 120px);
  background: radial-gradient(60% 46% at 50% 60%, rgba(84, 70, 200, 0.16), transparent 72%);
  color: #f5f5f7;
}
.verse-inner { position: relative; }
.verse .section-head { margin-bottom: 0; }
.verse h2 { padding-bottom: 0.06em; color: #ffffff; font-size: clamp(40px, 7vw, 72px); text-shadow: none; }
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .verse h2 { background: linear-gradient(180deg, #ffffff 30%, #9c9caa 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
}
.verse .lead { color: rgba(235, 235, 245, 0.8); }
.verse :focus-visible { outline-color: #9db8ff; }

.verse-map { position: relative; display: grid; align-items: center; max-width: 780px; min-height: 300px; margin: clamp(32px, 6vw, 64px) auto 0; }
.orbits { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 0; padding: 0; list-style: none; }
.orbit { display: flex; justify-content: center; }
.orbit-desk { padding-bottom: clamp(28px, 7vw, 64px); }
.orbit-glance { padding-top: clamp(28px, 7vw, 64px); }
.planet-link { display: grid; justify-items: center; gap: 12px; padding: 14px 8px; border-radius: 28px; color: #f5f5f7; text-align: center; -webkit-tap-highlight-color: transparent; }
.planet-link:hover { text-decoration: none; }
.planet {
  position: relative; display: block; width: clamp(92px, 17vw, 150px); height: clamp(92px, 17vw, 150px); border-radius: 50%;
  transition: transform 0.4s cubic-bezier(0.2, 0.65, 0.2, 1);
  animation: planet-float 9s ease-in-out infinite alternate;
}
.orbit-glance .planet { animation-delay: -4.5s; }
.planet-link:hover .planet, .planet-link:focus-visible .planet, .planet-link[aria-expanded="true"] .planet { transform: scale(1.07); }
@keyframes planet-float { from { translate: 0 -6px; } to { translate: 0 6px; } }
.planet-desk {
  background: radial-gradient(circle at 34% 30%, #ffffff 0, #dbe6ff 5%, #7c9cff 24%, #3550c4 50%, #141f63 76%, #060a24 100%);
  box-shadow: 0 0 0 1px rgba(168, 192, 255, 0.16), 0 0 42px rgba(92, 130, 255, 0.5), 0 0 120px rgba(70, 110, 255, 0.26), inset -16px -20px 40px rgba(2, 4, 20, 0.62);
}
.planet-desk::after { /* its ring; the dim top edge reads as the far side */
  content: ""; position: absolute; top: 41%; right: -24%; bottom: 41%; left: -24%;
  border: 1.5px solid rgba(196, 214, 255, 0.55); border-top-color: rgba(196, 214, 255, 0.14); border-radius: 50%;
  box-shadow: 0 0 16px rgba(140, 170, 255, 0.3);
  transform: rotate(-16deg);
}
.planet-glance {
  background: radial-gradient(circle at 38% 34%, #fffdf3 0, #fff1c2 8%, #ffd877 24%, #f2a93b 46%, #a85b12 74%, #3a1c03 100%);
  box-shadow: 0 0 0 1px rgba(255, 222, 160, 0.18), 0 0 46px rgba(255, 186, 76, 0.55), 0 0 130px rgba(255, 160, 50, 0.28), inset -14px -18px 36px rgba(40, 14, 0, 0.55);
}
.planet-name { font-size: clamp(18px, 2.6vw, 23px); font-weight: 650; letter-spacing: -0.02em; line-height: 1.2; }
.planet-note { margin-top: -6px; color: rgba(235, 235, 245, 0.66); font-size: 12px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; }

.verse-card {
  position: absolute; z-index: 3; top: 50%; left: 50%; width: min(420px, 100%);
  padding: clamp(24px, 5vw, 32px); border-radius: var(--radius-lg);
  background: rgba(18, 20, 32, 0.98); text-align: left;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12), 0 30px 80px rgba(0, 0, 0, 0.55), 0 0 60px rgba(92, 130, 255, 0.18);
  transform: translate(-50%, -50%);
  animation: verse-card-in 0.35s cubic-bezier(0.2, 0.65, 0.2, 1);
}
.verse-card:focus { outline: none; }
@keyframes verse-card-in { from { opacity: 0; transform: translate(-50%, -46%) scale(0.98); } }
.verse-card .eyebrow { margin-bottom: 10px; }
.verse-card .badge { background: rgba(255, 255, 255, 0.08); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18); color: rgba(235, 235, 245, 0.78); }
.verse-card h3 { font-size: 26px; }
.verse-desc { margin-top: 8px; color: rgba(235, 235, 245, 0.76); }
.verse-price { display: flex; align-items: baseline; gap: 6px; margin-top: 18px; }
.verse-price .amount { font-size: 44px; font-weight: 700; line-height: 1; letter-spacing: -0.04em; }
.verse-price .per { color: rgba(235, 235, 245, 0.72); font-size: 17px; font-weight: 500; }
.verse-plus { margin-top: 6px; font-size: 17px; font-weight: 600; }
.verse-fine { margin-top: 12px; color: rgba(235, 235, 245, 0.62); font-size: 13px; line-height: 1.45; }
.verse-more { display: inline-block; margin-top: 16px; color: #9db8ff; font-weight: 500; }
.verse-close {
  position: absolute; top: 12px; right: 12px; display: grid; place-items: center; width: 40px; height: 40px;
  border: 0; border-radius: 50%; background: rgba(255, 255, 255, 0.08); color: #f5f5f7; cursor: pointer;
}
.verse-close svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
@media (prefers-reduced-motion: reduce) {
  .planet { animation: none; transition: none; }
  .verse-card { animation: none; }
}

/* "Try it" (Glance page, public/try.js): sample lines to highlight, and the Glance banner in the corner. */
.try-screen {
  position: relative; max-width: 960px; margin-inline: auto;
  padding: clamp(16px, 3vw, 28px);
  border-radius: var(--radius-lg);
  background: radial-gradient(80% 70% at 20% 0%, rgba(70, 60, 150, 0.35), transparent 70%), rgba(10, 11, 22, 0.86);
  box-shadow: var(--edge), var(--shadow);
}
.try-list { display: grid; gap: 16px; margin: 0; padding: 0; list-style: none; }
.try-list li { display: grid; gap: 4px; }
.try-kind { color: var(--text-2); font-size: 13px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; }
.try-sample {
  justify-self: start; margin-inline: -4px; padding: 2px 4px; border-radius: 4px;
  font-size: 18px; line-height: 1.5; cursor: text; -webkit-tap-highlight-color: transparent;
  transition: background-color 0.15s ease;
}
.try-sample:hover { background: rgba(255, 255, 255, 0.06); }
.try-sample::selection { background: rgba(10, 132, 255, 0.55); }
.try-sample.is-picked { background: rgba(10, 132, 255, 0.55); color: #ffffff; } /* how a Mac shows highlighted text */
.try-note { margin-top: 16px; color: var(--text-2); font-size: 14px; line-height: 1.45; }

/* Like the app, the banner pops up in the bottom-right corner of the screen, 16px in, over everything. */
.try-corner {
  position: fixed; right: max(16px, env(safe-area-inset-right)); bottom: max(16px, env(safe-area-inset-bottom)); z-index: 60;
  display: grid; justify-items: start; gap: 6px; max-width: calc(100vw - 32px); animation: gb-in 0.16s ease-out;
}
.try-corner.is-closing { animation: gb-out 0.12s ease-in forwards; }
@keyframes gb-in { from { opacity: 0; transform: translateX(40px); } }
@keyframes gb-out { to { opacity: 0; } }
.try-app-note {
  max-width: 290px; padding: 6px 10px; border-radius: 10px; background: rgba(18, 18, 21, 0.92); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.09);
  color: #a1a1ab; font-size: 12px; line-height: 1.35;
}
.try-demo {
  padding: 2px 8px; border-radius: 999px; background: rgba(212, 175, 55, 0.16); box-shadow: inset 0 0 0 1px rgba(212, 175, 55, 0.45);
  color: #d4af37; font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
}

/* The banner, drawn to the app's design spec (sterling-glance windows-handoff/DESIGN.md): card #121215 at
   97%, radius 12, 1px white 9% border; gold #D4AF37; an 18px › tab; an 8px status dot; S 290×140,
   M 370×150, L 470×186 and 196×44 collapsed; 14px padding. */
.gb {
  position: relative; width: 196px; height: 44px; max-width: 100%; overflow: hidden;
  border-radius: 12px; background: rgba(18, 18, 21, 0.97); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.09), 0 12px 32px rgba(0, 0, 0, 0.5), 0 2px 8px rgba(0, 0, 0, 0.35);
  color: #f2f2f2; font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  letter-spacing: 0; text-align: left; text-shadow: none;
  transition: width 0.14s ease-out, height 0.14s ease-out;
}
.gb.is-still { transition: none; }
.gb.is-open[data-size="s"] { width: 290px; height: 140px; }
.gb.is-open[data-size="m"] { width: 370px; height: 150px; }
.gb.is-open[data-size="l"] { width: 470px; height: 186px; }
.gb button { margin: 0; padding: 0; border: 0; background: none; color: inherit; font: inherit; cursor: pointer; }
.gb .gb-tab {
  position: absolute; top: 0; bottom: 0; left: 0; width: 18px;
  background: rgba(212, 175, 55, 0.16); box-shadow: inset -1px 0 0 rgba(212, 175, 55, 0.55);
  color: #d4af37; font-size: 15px; font-weight: 600; line-height: 1;
}
.gb-chev::before { content: "›"; }
.gb.is-open .gb-chev::before { content: "‹"; }
.gb .gb-pill { position: absolute; inset: 0 0 0 18px; display: flex; align-items: center; gap: 10px; padding-left: 14px; text-align: left; }
.gb .gb-pill[disabled] { cursor: default; }
.gb-dot { width: 8px; height: 8px; flex: none; border-radius: 50%; background: #34c759; }
.gb[data-status="thinking"] .gb-dot { background: #f5a623; animation: gb-pulse 1.14s ease-in-out infinite; }
@keyframes gb-pulse { 50% { opacity: 0.45; } }
.gb-status { font-size: 13px; font-weight: 500; white-space: nowrap; }
.gb-body { display: none; }
.gb.is-open .gb-pill { display: none; }
.gb.is-open .gb-body { display: block; }
.gb-body .gb-dot { position: absolute; top: 17px; left: 32px; }
.gb-sizes { position: absolute; top: 11px; right: 14px; display: flex; gap: 4px; }
.gb .gb-size { display: grid; place-items: center; width: 16px; height: 16px; border-radius: 4px; color: #a1a1ab; font-size: 10px; font-weight: 600; line-height: 1; }
.gb .gb-size[aria-pressed="true"] { background: rgba(212, 175, 55, 0.18); color: #d4af37; }
.gb-text {
  position: absolute; top: 32px; left: 32px; right: 14px; bottom: 14px; overflow: hidden;
  font-size: 17px; font-weight: 400; line-height: calc(1.2em + 1.5px); overflow-wrap: break-word;
}
.gb-text[data-font="16"] { font-size: 16px; }
.gb-text[data-font="15"] { font-size: 15px; }
.gb-text[data-font="14"] { font-size: 14px; }
.gb-text[data-font="13"] { font-size: 13px; }
.gb-text[data-font="12"] { font-size: 12px; }
.gb-text[data-font="11"] { font-size: 11px; }
.gb :focus-visible { outline: 2px solid #d4af37; outline-offset: -2px; border-radius: 4px; }
@media (prefers-reduced-motion: reduce) {
  .try-corner, .try-corner.is-closing, .gb-dot, .gb[data-status="thinking"] .gb-dot { animation: none; }
  .gb, .try-sample { transition: none; }
}

/* ==== Email sign-ups: start (owned by the sign-ups part: public/lists.js, test/lists.test.mjs) ====
   The sign-up form on the home and Glance pages sits on its own sheet of glass, like the price card, and
   the confirm and unsubscribe pages read on the usual glass sheet (.doc). */
.signup-card { padding: clamp(24px, 5vw, 44px); border-radius: var(--radius-lg); background: var(--glass); box-shadow: var(--edge), var(--shadow); }
.signup-card h2 { font-size: clamp(28px, 4.6vw, 38px); line-height: 1.12; letter-spacing: -0.03em; }
.signup-card > .lead { margin-top: 10px; color: var(--text-2); font-size: 17px; }
.signup-card > .buy-test { margin-top: 14px; }
.signup-card .form { margin-top: 24px; padding: 0; background: none; box-shadow: none; }
.signup-lists { gap: 14px; }
.signup-who { display: grid; gap: 6px; color: var(--text-2); font-size: 14px; line-height: 1.45; }
.signup-who p { margin: 0; }
.signup-card .done { margin-top: 24px; }
.email-page .done { margin-top: 32px; }
.email-page .email-title { margin-top: 0; font-size: clamp(26px, 5vw, 32px); line-height: 1.15; letter-spacing: -0.03em; }
.email-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 24px; }
.email-page .form-status:empty { display: none; }
.doc .email-undo { display: grid; gap: 6px; margin: 16px 0 0; padding: 0; list-style: none; font-size: 15px; }
.doc .email-undo li { margin-top: 0; }
@media (max-width: 480px) { .email-actions .button { width: 100%; } }
/* ==== Email sign-ups: end ==== */