/* starcastapp.com. Colours and type are the app's design system (DesignSystem/Theme.swift and
   the Oct 21 design-system proposal): Night sky colours, Newsreader for names and headlines, the
   system font (SF on Apple devices) for everything else, starlight ivory only for people, violet
   only for the one action. The site was warm sepia until the launch page (2026-10-21), then
   charcoal #14161b; it moved to the app's near-black #0A0B10 on 2026-10-22 so the screenshots'
   own background melts into the page instead of sitting in a lighter box.
   Dark is the default look because the app and its screenshots are dark; light mode keeps the
   app's light palette for anyone whose system asks for it. */

/* Newsreader, self-hosted rather than from Google Fonts, so a visit to the site still sends
   nothing to anyone but us (Google Fonts would see every visitor's address). It is the app's own variable font (Resources/Fonts/Newsreader.ttf,
   SIL Open Font License, fonts/OFL.txt), cut down to Latin with
     pyftsubset Newsreader.ttf --unicodes="U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,
       U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215"
       --layout-features='*' --flavor=woff2
   which takes it from 452 KB to 137 KB with both axes (weight, optical size) intact. */
@font-face {
  font-family: "Newsreader"; src: url("/fonts/newsreader.woff2") format("woff2");
  font-weight: 200 800; font-style: normal; font-display: swap;
}

:root {
  --bg: #0a0b10; --elev: #15171e; --elev2: #1f222b;
  --fg: #e6e8ee; --muted: #a4abb8; --t3: #8a919e;
  --line: rgba(255, 255, 255, .08); --line2: rgba(255, 255, 255, .12);
  --accent: #aa80ff; --accent-ink: #0c1417; --ivory: #f4ead2;
  --glow: rgba(126, 76, 226, .26); --star: rgba(230, 232, 238, .5);
  --serif: "Newsreader", "New York", Georgia, serif;
  --sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", system-ui, sans-serif;
  color-scheme: dark light;
}
@media (prefers-color-scheme: light) {
  :root {
    --bg: #eceef2; --elev: #ffffff; --elev2: #e2e5ea;
    --fg: #14161b; --muted: #4a515d; --t3: #5a6270;
    --line: rgba(0, 0, 0, .08); --line2: rgba(0, 0, 0, .12);
    /* Ivory on a light page has no contrast, so people's names fall back to plain ink there
       (the app does the same in light mode). */
    --accent: #6322e6; --accent-ink: #ffffff; --ivory: #14161b;
    --glow: rgba(99, 34, 230, .12); --star: rgba(20, 22, 27, .16);
  }
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 88px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0; background: var(--bg); color: var(--fg);
  font: 17px/1.6 var(--sans); -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: var(--accent); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Shared header and footer (every page) */
header, main, footer { max-width: 720px; margin: 0 auto; padding: 0 16px; }
header { padding-top: 24px; display: flex; gap: 16px; align-items: center; flex-wrap: wrap; }
header .brand {
  display: flex; align-items: center; gap: 10px; margin-right: auto;
  font: 600 23px/1 var(--serif); color: var(--fg); text-decoration: none; letter-spacing: -.005em;
}
header .brand img { width: 32px; height: 32px; border-radius: 8px; }
header nav { display: flex; gap: 20px; align-items: center; }
header nav a { color: var(--muted); text-decoration: none; font-size: 15px; }
header nav a:hover { color: var(--fg); }
footer {
  color: var(--t3); font-size: 14px; border-top: 1px solid var(--line);
  margin-top: 72px; padding-top: 20px; padding-bottom: 48px;
}
footer a { color: var(--t3); margin-right: 16px; display: inline-block; text-decoration: none; }
footer a:hover { color: var(--fg); }

/* Text pages (privacy, terms, support, removal). Headlines are the serif, as screen titles are
   in the app; section heads stay in the sans so long policies scan easily. */
h1 { font: 600 40px/1.1 var(--serif); letter-spacing: -.01em; margin: 48px 0 8px; text-wrap: balance; }
h2 { font-size: 22px; line-height: 1.3; letter-spacing: -.01em; margin: 36px 0 8px; }
h3 { font-size: 17px; margin: 24px 0 4px; }
p.meta { color: var(--muted); margin-top: 0; }
ul { padding-left: 22px; }
li { margin: 4px 0; }
.box { border: 1px solid var(--line); border-radius: 16px; padding: 4px 20px; margin: 20px 0; background: var(--elev); }

/* ---------- The launch page (index.html) ---------- */
.home header, .home main, .home footer { max-width: 1120px; }
.home main { padding: 0 24px; }

/* The header stays put while the page scrolls, over a blur, so "Join the waitlist" is always
   one tap away. */
.home header {
  position: sticky; top: 0; z-index: 10; max-width: none; padding: 14px max(24px, calc((100% - 1072px) / 2));
  border-bottom: 1px solid transparent; transition: background-color .2s, border-color .2s;
}
/* Clear over the glow at the top, frosted once the page moves under it (index.html sets
   .scrolled; without JavaScript the header simply stays clear). */
.home header.scrolled {
  background: color-mix(in srgb, var(--bg) 88%, transparent); border-bottom-color: var(--line);
  -webkit-backdrop-filter: saturate(140%) blur(16px); backdrop-filter: saturate(140%) blur(16px);
}
.home header nav .cta { padding: 0 16px; height: 36px; font-size: 15px; }

/* Pill buttons, the app's three sizes (L 50 / M 38). Violet fill only for the one main action. */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: 50px; padding: 0 24px; border: 0; border-radius: 999px; cursor: pointer;
  font: 600 17px/1 var(--sans); text-decoration: none; white-space: nowrap;
  color: var(--accent-ink); background: var(--accent);
}
header nav a.btn, header nav a.btn:hover { color: var(--accent-ink); }
.btn.quiet { background: var(--elev2); color: var(--fg); }
.btn[disabled] { opacity: .6; cursor: default; }

/* The night sky behind the hero: the app's violet glow at the top (its .glow), plus a faint
   starfield without an image file. Four layers of single-pixel dots at different spacings so
   no grid shows. Drawn on the body, full width, rather than on the hero: a hero pseudo-element
   stretched past the content column made the page scroll sideways. */
.home { position: relative; }
.home::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1100px; pointer-events: none; z-index: -1;
  background:
    radial-gradient(1.2px 1.2px at 12% 18%, var(--star) 50%, transparent 51%) 0 0 / 173px 167px,
    radial-gradient(1px 1px at 68% 32%, var(--star) 50%, transparent 51%) 0 0 / 241px 229px,
    radial-gradient(1.4px 1.4px at 38% 72%, var(--star) 50%, transparent 51%) 0 0 / 311px 293px,
    radial-gradient(1px 1px at 86% 82%, var(--star) 50%, transparent 51%) 0 0 / 397px 383px,
    radial-gradient(60% 55% at 72% 0%, var(--glow), transparent 70%);
  -webkit-mask-image: linear-gradient(to bottom, #000 45%, transparent);
  mask-image: linear-gradient(to bottom, #000 45%, transparent);
}
.home main { position: relative; }

.hero {
  display: grid; grid-template-columns: 1.15fr .85fr; gap: 64px; align-items: center;
  padding: 64px 0 88px;
}
p.eyebrow, .feature p.eyebrow {
  color: var(--accent); font: 600 13px/1.2 var(--sans); letter-spacing: .08em; text-transform: uppercase;
  margin: 0 0 16px;
}
.hero h1 { font: 600 clamp(44px, 6.4vw, 72px)/1.02 var(--serif); letter-spacing: -.02em; margin: 0 0 20px; }
/* "people" in starlight ivory and italic: in the app, ivory serif means a person. */
.hero h1 em, .feature h2 em { color: var(--ivory); font-style: italic; font-weight: 500; }
.hero .lede { font-size: 20px; line-height: 1.55; color: var(--muted); margin: 0 0 32px; max-width: 32em; }

/* The phone frame. The screenshot sets the height (width 100%, height auto), and the frame is
   just a bezel around it. Before 2026-10-22 the frame had its own aspect-ratio and the image
   used object-fit: cover; the bezel padding made the frame's inside narrower than the
   screenshot, so cover cut the right and left edges off (play pills, "Appeared On" covers).
   The inner radius is the iPhone 17 Pro's screen corner (about 55 of its 402 points, 13.7% of
   the width), so the rounding follows the real screen and clips nothing that the phone shows. */
.phone {
  --w: 300px;
  width: 100%; max-width: var(--w); margin: 0 auto; padding: 9px;
  border-radius: calc(var(--w) * .137 + 9px); background: #050609;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, .14), inset 0 0 0 1px rgba(255, 255, 255, .06),
    0 40px 90px -30px rgba(126, 76, 226, .55), 0 20px 40px -20px rgba(0, 0, 0, .6);
}
.phone img { width: 100%; height: auto; border-radius: calc(var(--w) * .137); }
.hero .phone { --w: 320px; }

/* Waitlist form */
.join { background: var(--elev); border: 1px solid var(--line); border-radius: 22px; padding: 20px; max-width: 500px; }
.join .row { display: flex; gap: 8px; }
.join input[type=email] {
  flex: 1; min-width: 0; height: 50px; font: inherit; color: var(--fg); background: var(--bg);
  border: 1px solid var(--line2); border-radius: 999px; padding: 0 20px;
}
.join input[type=email]::placeholder { color: var(--t3); }
.join input[type=email]:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
.join label.check { display: flex; gap: 10px; align-items: flex-start; font-size: 15px; color: var(--muted); margin-top: 12px; padding-left: 6px; }
.join label.check input { margin-top: 5px; accent-color: var(--accent); }
.join .note { font-size: 13px; color: var(--t3); margin: 14px 0 0; padding-left: 6px; }
.join .note a { color: var(--muted); }
.join .status { font-size: 15px; margin: 12px 0 0; padding-left: 6px; }
.join .status:empty { display: none; }
.join .status.ok { color: var(--fg); }
.join .status.err { color: #ff8a80; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Feature rows: text beside a screenshot, alternating sides */
.feature {
  display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center;
  padding: 80px 0; border-top: 1px solid var(--line);
}
.feature.flip .copy { order: 2; }
.feature .copy { max-width: 30em; }
.feature h2, .section-head h2 {
  font: 600 clamp(32px, 4.2vw, 46px)/1.08 var(--serif); letter-spacing: -.015em; margin: 0 0 16px; text-wrap: balance;
}
.feature p { color: var(--muted); font-size: 18px; margin: 0 0 12px; }
.feature .phone { --w: 280px; }

.section-head { text-align: center; max-width: 40em; margin: 0 auto 40px; }
.section-head p { color: var(--muted); font-size: 18px; margin: 0; }

.more { border-top: 1px solid var(--line); padding: 80px 0; }
.grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.grid .card { background: var(--elev); border: 1px solid var(--line); border-radius: 22px; padding: 24px; }
.grid .ico {
  width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center;
  background: color-mix(in srgb, var(--accent) 16%, transparent); color: var(--accent); margin-bottom: 16px;
}
.grid .ico svg { width: 22px; height: 22px; }
.grid h3 { margin: 0 0 6px; font-size: 17px; line-height: 1.3; }
.grid p { margin: 0; color: var(--muted); font-size: 15px; line-height: 1.5; }

.pricing { border-top: 1px solid var(--line); padding: 80px 0; }
.pricing .tiers { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; max-width: 760px; margin: 0 auto; }
.pricing .tier {
  background: var(--elev); border: 1px solid var(--line); border-radius: 22px; padding: 28px;
  display: flex; flex-direction: column;
}
.pricing .tier.pro {
  border-color: color-mix(in srgb, var(--accent) 55%, transparent);
  background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 10%, var(--elev)), var(--elev) 60%);
}
.pricing .tier h3 { margin: 0 0 12px; font-size: 15px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.pricing .tier.pro h3 { color: var(--accent); }
.pricing .price { font: 600 48px/1 var(--serif); margin: 0; letter-spacing: -.01em; }
.pricing .price small { font: 400 16px/1 var(--sans); color: var(--muted); letter-spacing: 0; margin-left: 4px; }
.pricing .sub { color: var(--t3); font-size: 14px; margin: 8px 0 20px; min-height: 1.5em; }
.pricing ul { list-style: none; margin: 0 0 24px; padding: 0; color: var(--muted); font-size: 15px; flex: 1; }
.pricing li { position: relative; padding-left: 26px; margin: 10px 0; }
.pricing li::before {
  content: ""; position: absolute; left: 2px; top: .45em; width: 12px; height: 7px;
  border-left: 2px solid var(--accent); border-bottom: 2px solid var(--accent); transform: rotate(-45deg);
}
.pricing .early {
  margin: 24px auto 0; max-width: 760px; text-align: center; color: var(--muted); font-size: 16px;
}
.pricing .early strong { color: var(--fg); }

.podcasters { border-top: 1px solid var(--line); padding: 80px 0 0; }
.podcasters .card {
  display: grid; grid-template-columns: auto 1fr; gap: 28px; align-items: start;
  background: var(--elev); border: 1px solid var(--line); border-radius: 22px; padding: 32px; max-width: 860px; margin: 0 auto;
}
.podcasters .mic {
  width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center;
  background: color-mix(in srgb, var(--ivory) 14%, transparent); color: var(--ivory);
}
.podcasters .mic svg { width: 26px; height: 26px; }
.podcasters h2 { font: 600 30px/1.15 var(--serif); margin: 0 0 8px; }
.podcasters p { color: var(--muted); font-size: 17px; margin: 0; }

/* The last thing on the page: one more way in to the form at the top. */
.closer { text-align: center; padding: 96px 0 24px; }
.closer h2 { font: 600 clamp(32px, 4.2vw, 46px)/1.08 var(--serif); letter-spacing: -.015em; margin: 0 0 12px; }
.closer p { color: var(--muted); font-size: 18px; margin: 0 0 28px; }

.home footer { display: flex; flex-wrap: wrap; gap: 8px 24px; align-items: center; }
.home footer .links { margin-right: auto; }
.home footer .links a:last-child { margin-right: 0; }

@media (max-width: 960px) {
  .grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 820px) {
  .home main { padding: 0 16px; }
  .home header { padding: 12px 16px; }
  .hero, .feature { grid-template-columns: 1fr; gap: 40px; }
  .hero { padding: 32px 0 64px; }
  .feature { padding: 64px 0; }
  .feature.flip .copy { order: 0; }
  .pricing .tiers { grid-template-columns: 1fr; }
  .hero .phone, .feature .phone { --w: 260px; }
  .more, .pricing { padding: 64px 0; }
  .podcasters { padding-top: 64px; }
  .podcasters .card { grid-template-columns: 1fr; gap: 16px; padding: 24px; }
}
@media (max-width: 520px) {
  .grid { grid-template-columns: 1fr; }
  .join .row { flex-direction: column; }
  header nav { gap: 14px; }
  .home header nav .hide-small { display: none; }
}