/* Frequency Talk — shared site styles.
   Brand type: Orbitron Black for wordmarks, Montserrat for everything else.
   Self-hosted latin subsets (deploy/site/fonts/, served by Caddy at /fonts/). */
@font-face {
  font-family: "Orbitron";
  font-style: normal; font-weight: 900; font-display: swap;
  src: url(/fonts/orbitron-900-latin.woff2) format("woff2");
}
@font-face {
  font-family: "Montserrat";
  font-style: normal; font-weight: 400 600; font-display: swap;
  src: url(/fonts/montserrat-latin.woff2) format("woff2");
}

:root {
  --bg: #0a0c10;
  --surface: #12151c;
  --edge: #232835;
  --ink: #e8eaf0;
  --muted: #98a0ad;
  --amber: #ffb000;       /* brand accent — the heritage dial lamp */
  --green: #39ff6a;       /* reserved for live/on-air status */
}
* { margin: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  background:
    radial-gradient(ellipse 80% 50% at 50% -10%, rgba(255,176,0,.07), transparent 70%),
    var(--bg);
  color: var(--ink);
  font-family: "Montserrat", -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-weight: 400; line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
a { color: var(--amber); }

main { max-width: 64rem; margin: 0 auto; padding: 0 1.5rem; }

/* ---- top nav ---- */
.site-nav {
  position: sticky; top: 0; z-index: 50;
  background: rgba(10,12,16,.88);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--edge);
}
.nav-inner {
  max-width: 64rem; margin: 0 auto; padding: .6rem 1.5rem;
  display: flex; align-items: center; gap: 1.1rem; position: relative;
}
.nav-brand {
  display: flex; align-items: center; gap: .6rem;
  font-family: "Orbitron", "Montserrat", sans-serif; font-weight: 900;
  font-size: .78rem; letter-spacing: .15em; color: var(--ink);
  text-decoration: none; white-space: nowrap;
}
.nav-brand img { height: 30px; width: auto; display: block; }
.nav-brand:hover { color: var(--amber); }
.nav-links { display: flex; align-items: center; gap: 1.5rem; margin-left: auto; }
.nav-links a {
  color: var(--muted); text-decoration: none;
  font-size: .85rem; font-weight: 600; letter-spacing: .02em;
}
.nav-links a:hover { color: var(--ink); }
.nav-links a.active { color: var(--amber); }
.nav-cta { padding: .48rem 1.1rem; font-size: .82rem; }
.nav-toggle { display: none; }
.nav-burger { display: none; }
@media (max-width: 680px) {
  .nav-links {
    display: none; position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; align-items: flex-start; gap: 0;
    background: var(--surface); border-bottom: 1px solid var(--edge);
    padding: .4rem 0;
  }
  .nav-links a { display: block; width: 100%; padding: .7rem 1.5rem; }
  .nav-toggle:checked ~ .nav-links { display: flex; }
  .nav-burger {
    display: block; cursor: pointer; order: 3;
    color: var(--ink); font-size: 1.25rem; line-height: 1; user-select: none;
  }
  .nav-cta { order: 2; margin-left: auto; }
}
@media (max-width: 380px) {
  .nav-inner { padding: .6rem 1rem; gap: .6rem; }
  .nav-brand { font-size: .7rem; gap: .45rem; }
  .nav-brand img { height: 24px; }
  .nav-cta { padding: .44rem .85rem; font-size: .78rem; }
}

/* ---- buttons ---- */
.btn {
  display: inline-block; padding: .78rem 1.6rem; border-radius: 6px;
  font-weight: 600; font-size: .95rem; text-decoration: none; letter-spacing: .02em;
  transition: transform .15s, box-shadow .15s, background .15s;
}
.btn-primary {
  background: var(--amber); color: #14100a;
  box-shadow: 0 2px 18px rgba(255,176,0,.35);
}
.btn-primary:hover { background: #ffc233; box-shadow: 0 4px 26px rgba(255,176,0,.5); transform: translateY(-1px); }
.btn-secondary { border: 1px solid var(--edge); color: var(--ink); background: var(--surface); }
.btn-secondary:hover { border-color: var(--amber); transform: translateY(-1px); }

/* Mystical pulse for the hero CTA: a slow breathing aura plus a radiating
   ring that ripples outward like a transmitted pulse. */
.btn-glow { position: relative; animation: btn-breathe 3.2s ease-in-out infinite; }
.btn-glow::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  pointer-events: none;
  animation: btn-ripple 3.2s ease-out infinite;
}
@keyframes btn-breathe {
  0%, 100% { box-shadow: 0 2px 18px rgba(255,176,0,.35); }
  50%      { box-shadow: 0 2px 34px 4px rgba(255,176,0,.72), 0 0 60px 10px rgba(255,176,0,.28); }
}
@keyframes btn-ripple {
  0%   { box-shadow: 0 0 0 0 rgba(255,176,0,.45); opacity: 1; }
  70%  { box-shadow: 0 0 18px 22px rgba(255,176,0,0); opacity: 0; }
  100% { box-shadow: 0 0 0 0 rgba(255,176,0,0); opacity: 0; }
}
.cta-row { margin-top: 2.4rem; display: flex; gap: .9rem; justify-content: center; flex-wrap: wrap; }
.fineprint { margin-top: 1rem; font-size: .74rem; color: var(--muted); opacity: .8; }

/* ---- landing hero ---- */
.hero { text-align: center; padding: 0 0 3rem; }
/* Full-bleed brand artwork (the company symbol: clock = 24/7, tower = broadcast,
   bars = sound) fading into the page background; the lockup nests into the fade. */
.hero-art {
  width: 100vw; margin-left: calc(50% - 50vw);
  height: clamp(240px, 34vw, 430px);
  background-image: url(/hero-bg.jpg);
  background-image: image-set(url(/hero-bg.webp) type("image/webp") 1x);
  background-size: cover; background-position: center 42%;
  position: relative;
}
.hero-art::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg,
    rgba(10,12,16,.25), transparent 30%,
    transparent 55%, var(--bg) 96%);
}
.hero h1 { margin-top: -2.4rem; position: relative; }
.lockup-main {
  display: block;
  font-family: "Orbitron", "Montserrat", sans-serif; font-weight: 900;
  /* Floor low enough that the nowrap wordmark fits a 320px viewport — Orbitron caps
     run ~1em advance + .12em tracking, so 14 glyphs ≈ 15.5× the font size. */
  font-size: clamp(1.15rem, 5.6vw, 3.2rem); letter-spacing: .12em; line-height: 1.15;
  color: var(--ink);
  text-shadow: 0 0 24px rgba(255,176,0,.25);
  white-space: nowrap;
}
.lockup-sub {
  display: block;
  font-weight: 600; text-transform: uppercase;
  font-size: clamp(.62rem, 2vw, .85rem); letter-spacing: .58em; text-indent: .58em;
  color: var(--muted); margin-top: .55rem;
}
.slogan {
  margin-top: 2.2rem; font-weight: 600; color: var(--amber);
  font-size: clamp(1rem, 2.6vw, 1.3rem); letter-spacing: .02em;
}
.lede {
  margin: 1rem auto 0; max-width: 38rem; color: var(--muted);
  font-size: clamp(.95rem, 2.2vw, 1.05rem);
}

/* "One Frequency" — a chirp. Waves of green wash through the amber text,
   accelerating like a tuner honing in on a station, then lock on green
   (green = on-air). The whole chirp is encoded spatially in one wide
   gradient: band wavelengths shrink left→right and the tail is solid
   green, so a single linear background-position sweep produces a
   rising-frequency oscillation that ends parked on green. */
.one-freq { color: var(--amber); }
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .one-freq {
    background-image: linear-gradient(90deg,
      var(--amber) 0%,   var(--amber) 10%,   /* start: solid amber in view */
      var(--green) 16%,  var(--amber) 22%,
      var(--green) 27.5%, var(--amber) 32.5%,
      var(--green) 37%,  var(--amber) 41%,
      var(--green) 44.8%, var(--amber) 48.2%,
      var(--green) 51.4%, var(--amber) 54.2%,
      var(--green) 56.8%, var(--amber) 59.2%,
      var(--green) 61.4%, var(--amber) 63.4%,
      var(--green) 65.2%, var(--amber) 67%,
      var(--green) 68.6%, var(--amber) 70.2%,
      var(--green) 71.7%, var(--amber) 73.2%,
      var(--green) 74.6%, var(--amber) 76%,
      var(--green) 77.3%, var(--amber) 78.6%,
      var(--green) 79.8%, var(--amber) 81%,
      var(--green) 82.1%, var(--amber) 83.2%,
      var(--green) 84.2%,                    /* lock */
      var(--green) 100%);                    /* end: solid green in view */
    background-size: 1000% 100%;
    background-repeat: no-repeat;
    background-position: 0% 0%;
    -webkit-background-clip: text; background-clip: text;
    color: transparent; -webkit-text-fill-color: transparent;
    animation: one-freq-lock 6.5s linear .8s forwards;
  }
}
@keyframes one-freq-lock { to { background-position: 100% 0%; } }

/* ---- page hero (subpages) ---- */
.page-hero { text-align: center; padding: 3.4rem 0 .6rem; }
.page-hero h1 {
  font-family: "Orbitron", "Montserrat", sans-serif; font-weight: 900;
  font-size: clamp(1.25rem, 4vw, 2rem); letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink); text-shadow: 0 0 24px rgba(255,176,0,.2);
}
.page-hero .sub { margin: .9rem auto 0; max-width: 36rem; color: var(--muted); }
.page-hero .big {
  margin-top: 1.4rem; color: var(--amber); font-weight: 600;
  font-size: clamp(1.05rem, 2.8vw, 1.45rem);
}

/* ---- dial divider: the one retro flourish — a tick strip with an amber needle ---- */
.dial {
  height: 22px; margin: 2.6rem auto 0; max-width: 40rem; position: relative;
  background:
    repeating-linear-gradient(90deg,
      var(--edge) 0 1px, transparent 1px 12px),
    repeating-linear-gradient(90deg,
      rgba(152,160,173,.55) 0 1px, transparent 1px 60px);
  background-size: 100% 8px, 100% 16px;
  background-position: 0 100%, 0 100%;
  background-repeat: no-repeat;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 15%, #000 85%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 15%, #000 85%, transparent);
}
.dial::after {
  content: ""; position: absolute; bottom: 0; left: 50%; width: 2px; height: 20px;
  background: var(--amber); box-shadow: 0 0 8px rgba(255,176,0,.8);
}

/* ---- sections ---- */
section { padding: 3.2rem 0 0; }
.sec-title {
  font-family: "Orbitron", "Montserrat", sans-serif; font-weight: 900;
  font-size: .85rem; letter-spacing: .38em; text-indent: .38em; text-transform: uppercase;
  color: var(--amber); text-align: center; margin-bottom: 2rem;
}
.sec-more { margin-top: 1.4rem; text-align: center; font-size: .88rem; }

/* ---- cards / pillars ---- */
.pillars { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 1rem; }
.card {
  background: var(--surface); border: 1px solid var(--edge); border-radius: 10px;
  padding: 1.4rem 1.5rem; text-align: center;
  position: relative; overflow: hidden;
}
/* Cards aren't clickable, so no lift/border hover (that reads as a link
   affordance). Instead: a soft sheen sweeps across when the pointer passes. */
.card::before {
  content: ""; position: absolute; top: 0; bottom: 0; left: -80%; width: 55%;
  background: linear-gradient(105deg,
    transparent, rgba(255,255,255,.05) 38%,
    rgba(255,176,0,.13) 50%,
    rgba(255,255,255,.05) 62%, transparent);
  transform: skewX(-18deg);
  pointer-events: none;
}
.card:hover::before { animation: card-shimmer .9s ease; }
@keyframes card-shimmer { from { left: -80%; } to { left: 125%; } }
.card svg {
  width: 42px; height: 42px; margin-bottom: .85rem;
  color: var(--amber);
  filter: drop-shadow(0 0 7px rgba(255,176,0,.35));
}
/* green is reserved for live/on-air — the Live Broadcast tower earns it */
.card.on-air svg { color: var(--green); filter: drop-shadow(0 0 7px rgba(57,255,106,.3)); }
.card h3 { font-size: 1rem; font-weight: 600; letter-spacing: .02em; margin-bottom: .45rem; color: var(--ink); }
.card p { font-size: .88rem; color: var(--muted); }

/* ---- feature list: short direct statements ---- */
.feat-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
  gap: .9rem 2.4rem; max-width: 54rem; margin: 0 auto;
}
.feat {
  display: flex; gap: .75rem; align-items: baseline;
  font-size: .92rem; color: var(--muted);
}
.feat::before { content: "▸"; color: var(--amber); flex: none; }
.feat b { color: var(--ink); font-weight: 600; }

/* ---- pricing ---- */
.plans {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(14.5rem, 1fr));
  gap: 1rem; max-width: 56rem; margin: 0 auto;
}
.plan {
  background: var(--surface); border: 1px solid var(--edge); border-radius: 10px;
  padding: 1.7rem 1.5rem; text-align: center;
  transition: border-color .2s, transform .2s;
}
.plan:hover { border-color: rgba(255,176,0,.45); transform: translateY(-2px); }
/* Plan tiles can be links (landing page → /pricing.html); the hover lift is
   the click affordance there, so it stays. */
a.plan { display: block; text-decoration: none; color: inherit; }
a.plan:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; }
.plan.free { border-color: rgba(57,255,106,.35); }
.plan-name {
  font-family: "Orbitron", "Montserrat", sans-serif; font-weight: 900;
  font-size: .72rem; letter-spacing: .26em; text-indent: .26em; text-transform: uppercase;
  color: var(--muted);
}
.plan.free .plan-name { color: var(--green); }
.plan-price { margin-top: .7rem; font-size: 2.1rem; font-weight: 600; color: var(--ink); line-height: 1.1; }
.plan-price sup { font-size: .55em; font-weight: 600; }
.plan-per { display: block; margin-top: .3rem; font-size: .72rem; color: var(--muted); letter-spacing: .06em; text-transform: uppercase; }
.plan-tag { margin-top: .9rem; font-size: .9rem; color: var(--ink); font-weight: 600; }
.plan ul {
  list-style: none; padding: 0; margin: 1rem 0 0;
  display: flex; flex-direction: column; gap: .5rem;
  font-size: .85rem; color: var(--muted); text-align: left;
}
.plan li { padding-left: 1.25rem; position: relative; }
.plan li::before { content: "✓"; position: absolute; left: 0; color: var(--amber); }
.plan.free li::before { color: var(--green); }
.plan .btn { margin-top: 1.3rem; width: 100%; }

/* ---- subscribe flow: selectable plan cards + order panel ---- */
.choose { cursor: pointer; user-select: none; }
.choose:hover { transform: none; }
.choose.selected {
  border-color: var(--amber);
  box-shadow: 0 0 26px rgba(255,176,0,.18), inset 0 0 0 1px var(--amber);
}
.choose .pick {
  margin-top: 1.2rem; font-size: .78rem; font-weight: 600; letter-spacing: .14em;
  text-transform: uppercase; color: var(--muted);
}
.choose.selected .pick { color: var(--amber); }
.choose.selected .pick::before { content: "● "; }
.sub-panel {
  max-width: 30rem; margin: 2.4rem auto 0;
  background: var(--surface); border: 1px solid var(--edge); border-radius: 10px;
  padding: 1.6rem 1.6rem 1.8rem; text-align: center;
}
.sub-panel .sum-name {
  font-family: "Orbitron", "Montserrat", sans-serif; font-weight: 900;
  font-size: .72rem; letter-spacing: .26em; text-indent: .26em; text-transform: uppercase;
  color: var(--amber);
}
.sub-panel .sum-price { margin-top: .5rem; font-size: 1.9rem; font-weight: 600; color: var(--ink); }
.sub-panel .sum-per { font-size: .72rem; color: var(--muted); letter-spacing: .06em; text-transform: uppercase; }
.sub-panel .btn { margin-top: 1.2rem; width: 100%; }
.sub-panel .fineprint { margin-top: .9rem; }

/* ---- checkout forms (subscribe page) ---- */
.wizard { max-width: 40rem; margin: 0 auto; display: flex; flex-direction: column; gap: 1.2rem; }
.step {
  background: var(--surface); border: 1px solid var(--edge); border-radius: 10px;
  padding: 1.4rem 1.6rem 1.6rem;
}
.step.locked { opacity: .45; pointer-events: none; }
.step.done { border-color: rgba(57,255,106,.3); }
.step-hd { display: flex; align-items: center; gap: .8rem; margin-bottom: 1rem; }
.step-num {
  flex: none; width: 1.9rem; height: 1.9rem; line-height: 1.9rem; border-radius: 50%;
  text-align: center; font-family: "Orbitron", "Montserrat", sans-serif; font-weight: 900;
  font-size: .85rem; color: #14100a; background: var(--amber);
}
.step.done .step-num { background: var(--green); }
.step-hd h3 { font-size: 1rem; font-weight: 600; letter-spacing: .02em; }
.step-hd .step-note { margin-left: auto; font-size: .78rem; color: var(--muted); }
.fgrid { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem 1rem; }
.fgrid .wide { grid-column: 1 / -1; }
@media (max-width: 520px) { .fgrid { grid-template-columns: 1fr; } }
.field label {
  display: block; font-size: .68rem; font-weight: 600; letter-spacing: .1em;
  text-transform: uppercase; color: var(--muted); margin-bottom: .3rem;
}
.field input, .field select {
  width: 100%; padding: .58rem .7rem; border-radius: 6px;
  background: var(--bg); border: 1px solid var(--edge); color: var(--ink);
  font-family: inherit; font-size: .92rem;
}
.field input:focus, .field select:focus { outline: none; border-color: var(--amber); }
.field input.bad, .field select.bad { border-color: #ff4a3d; }
.field .ferr { margin-top: .25rem; font-size: .74rem; color: #ff4a3d; }
.phone-row { display: flex; gap: .5rem; }
.phone-row select { width: 9.5rem; flex: none; }
.check-row { display: flex; align-items: baseline; gap: .55rem; font-size: .88rem; color: var(--muted); }
.check-row input { accent-color: var(--amber); }
.form-err { margin-top: .9rem; font-size: .85rem; color: #ff4a3d; }
.form-ok { margin-top: .9rem; font-size: .85rem; color: var(--green); }
.step .btn { margin-top: 1.1rem; }
.btn[disabled] { opacity: .55; pointer-events: none; }
.signed-chip {
  display: flex; align-items: baseline; gap: .7rem; flex-wrap: wrap;
  background: var(--bg); border: 1px solid rgba(57,255,106,.3); border-radius: 8px;
  padding: .7rem 1rem; font-size: .88rem;
}
.signed-chip b { color: var(--green); }
.signed-chip .station-id { font-family: "Orbitron", "Montserrat", sans-serif; font-size: .72rem; letter-spacing: .12em; color: var(--muted); }
.signed-chip a { margin-left: auto; font-size: .8rem; }
.notice {
  margin-top: .9rem; border: 1px solid rgba(255,176,0,.4); border-left-width: 3px;
  border-radius: 8px; padding: .8rem 1rem; background: rgba(255,176,0,.05);
  font-size: .85rem; color: var(--ink);
}
#payment-element { margin-top: .4rem; }
.pay-secure { font-size: .76rem; color: var(--muted); margin-top: .7rem; }
.success-panel {
  max-width: 34rem; margin: 2rem auto 0; text-align: center;
  background: var(--surface); border: 1px solid rgba(57,255,106,.4); border-radius: 12px;
  padding: 2.2rem 1.8rem;
}
.success-panel h2 { color: var(--green); font-family: "Orbitron", "Montserrat", sans-serif; letter-spacing: .12em; font-size: 1.1rem; }
.success-panel p { margin-top: .8rem; color: var(--muted); font-size: .92rem; }

/* ---- q&a rows (pricing/platform notes) ---- */
.qa { max-width: 46rem; margin: 0 auto; display: flex; flex-direction: column; gap: .6rem; }
.qa-row {
  background: var(--surface); border: 1px solid var(--edge); border-radius: 10px;
  padding: .95rem 1.3rem; font-size: .88rem;
}
.qa-row b { color: var(--ink); display: block; margin-bottom: .15rem; }
.qa-row span { color: var(--muted); }

/* ---- numbered steps ---- */
.steps {
  list-style: none; padding: 0; counter-reset: step;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: 1rem; max-width: 54rem; margin: 0 auto;
}
.steps li {
  counter-increment: step;
  background: var(--surface); border: 1px solid var(--edge); border-radius: 10px;
  padding: 1.4rem 1.5rem; text-align: center;
}
.steps li::before {
  content: counter(step);
  display: block; margin: 0 auto .7rem;
  width: 2.1rem; height: 2.1rem; line-height: 2.1rem; border-radius: 50%;
  font-family: "Orbitron", "Montserrat", sans-serif; font-weight: 900; font-size: .95rem;
  color: #14100a; background: var(--amber);
  box-shadow: 0 0 14px rgba(255,176,0,.4);
}
.steps b { color: var(--ink); display: block; margin-bottom: .3rem; }
.steps span { font-size: .86rem; color: var(--muted); }

/* ---- app family ---- */
.family { display: flex; flex-direction: column; gap: .6rem; max-width: 46rem; margin: 0 auto; }
.app-row {
  display: flex; align-items: baseline; gap: 1rem; flex-wrap: wrap;
  background: var(--surface); border: 1px solid var(--edge); border-radius: 10px;
  padding: .95rem 1.3rem;
}
.app-name {
  font-family: "Orbitron", "Montserrat", sans-serif; font-weight: 900;
  font-size: .82rem; letter-spacing: .14em; color: var(--ink); white-space: nowrap;
}
.app-desc { flex: 1; font-size: .85rem; color: var(--muted); min-width: 12rem; }
.app-act { font-size: .84rem; font-weight: 600; white-space: nowrap; }
/* A second, alternative download on the same row (the Windows ZIP): present and clickable
   without competing with the primary installer link. Muted until hover. */
.app-act.alt { color: var(--muted); }
.app-act.alt:hover { color: var(--amber); }
.chip {
  font-size: .62rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase;
  padding: .28rem .7rem; border-radius: 999px; white-space: nowrap;
}
.chip.live {
  color: #0c1409; background: var(--green);
  box-shadow: 0 0 14px rgba(57,255,106,.45);
}
.chip.soon { color: var(--muted); border: 1px solid var(--edge); }
.chip.dev, .chip.beta { color: var(--amber); border: 1px solid rgba(255,176,0,.45); }
.app-row.live { border-color: rgba(57,255,106,.35); }

/* Windows download note. Unfolds inline from the app's own action row (never a separate
   section): a Windows user needs to know what SmartScreen will say BEFORE they click, and
   a reader on any other platform should not have to scroll past it. flex-basis:100% puts
   it on its own line inside the same card, so it reads as part of that app's row. */
/* order:4 keeps this LAST inside the row on narrow screens, where the mobile rule below
   gives .app-desc order:3 and would otherwise float the description underneath it. */
.win-note { flex-basis: 100%; order: 4; font-size: .78rem; }
.win-note > summary {
  cursor: pointer; color: var(--muted); list-style: none;
  display: inline-flex; align-items: baseline; gap: .45rem;
}
.win-note > summary::-webkit-details-marker { display: none; }
.win-note > summary::before { content: "\25B8"; color: var(--amber); font-size: .8em; }
.win-note[open] > summary::before { content: "\25BE"; }
.win-note > summary:hover { color: var(--ink); }
.win-body {
  margin-top: .6rem; padding: .8rem 1rem;
  border-left: 2px solid rgba(255,176,0,.45); border-radius: 0 6px 6px 0;
  background: rgba(255,176,0,.045); color: var(--muted); line-height: 1.6;
}
.win-body p + p { margin-top: .6rem; }
.win-body b { color: var(--ink); font-weight: 600; }
.win-body .win-alt { font-weight: 600; }

/* ---- downloads list, grouped by platform ----
   The App Family list (.app-row above) is a ONE-LINE-per-app shape, and it is shared with
   index.html and subscribe.html's owned-frequency list — so it is deliberately NOT reused
   here. The downloads page needs a second axis the family list does not have: one app, more
   than one operating system, each with its own installer, its own alternate download and its
   own platform caveat. Piling those onto a single baseline-aligned row is what this replaces
   ("Open → Windows Installer → ZIP →" already read as three ways to get one thing).

   The shape is: app card → description → a LIST OF PLATFORMS. Adding an OS to an app is one
   <li>, and adding an app is one card, so this scales to the whole suite on both axes without
   another format change. A platform with no build yet gets .pending and states that plainly
   rather than being hidden — a Mac user who finds no macOS line cannot tell "not supported"
   from "not yet". */
.dl-list { display: flex; flex-direction: column; gap: 1rem; max-width: 46rem; margin: 0 auto; }
.dl-app {
  background: var(--surface); border: 1px solid var(--edge); border-radius: 10px;
  padding: 1.1rem 1.3rem;
}
.dl-app.live { border-color: rgba(57,255,106,.35); }
.dl-head { display: flex; align-items: center; gap: .9rem; flex-wrap: wrap; }
.dl-head .app-name { font-size: .9rem; }
.dl-desc { font-size: .85rem; color: var(--muted); margin-top: .5rem; }

.dl-plats { list-style: none; padding: 0; margin: .9rem 0 0; }
.dl-plat {
  display: grid; grid-template-columns: 5.5rem 1fr auto;
  align-items: baseline; gap: .35rem 1rem;
  padding: .6rem 0; border-top: 1px solid var(--edge);
}
.dl-os {
  font-family: "Orbitron", "Montserrat", sans-serif; font-weight: 900;
  font-size: .68rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink); white-space: nowrap;
}
.dl-req { font-size: .78rem; color: var(--muted); }
/* The actions cell holds 1–2 links; nowrap keeps "Installer → ZIP →" from breaking mid-pair. */
.dl-acts { display: flex; align-items: baseline; gap: 1rem; white-space: nowrap; }
.dl-plat.pending .dl-os { color: var(--muted); }
.dl-soon {
  font-size: .62rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase;
  color: var(--muted); white-space: nowrap;
}
/* The platform caveat belongs to ONE platform, not to the app: it sits inside that <li>, so a
   Windows note never appears to qualify the macOS or Web line. It starts at the second column
   on desktop, hanging it off its own OS label; the narrow layout drops that indent because
   there is no room for it. */
.dl-plat > .win-note { grid-column: 2 / -1; flex-basis: auto; order: 0; margin-top: .15rem; }

@media (max-width: 560px) {
  .dl-plat { grid-template-columns: 1fr auto; }
  .dl-req { grid-column: 1 / -1; order: 3; }
  .dl-plat > .win-note { grid-column: 1 / -1; order: 4; }
}

/* ---- status lamp ---- */
.status {
  margin-top: 3.2rem; text-align: center; font-size: .8rem; color: var(--muted);
  letter-spacing: .18em; text-transform: uppercase; font-weight: 600;
}
.lamp {
  display: inline-block; width: .6em; height: .6em; border-radius: 50%;
  background: #3a4150; margin-right: .6em; vertical-align: baseline;
}
.lamp.on { background: var(--green); box-shadow: 0 0 10px var(--green); animation: pulse 2.4s infinite; }
.lamp.err { background: #ff4a3d; box-shadow: 0 0 10px #ff4a3d; }
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: .45; } }
#status-text.on { color: var(--green); }

/* ---- footer ---- */
footer {
  margin-top: 3.4rem; border-top: 1px solid var(--edge);
  padding: 1.8rem 1.5rem 2.6rem; text-align: center;
  font-size: .78rem; color: var(--muted);
}
footer a { color: var(--muted); text-decoration: none; }
footer a:hover { color: var(--amber); }
footer .links { margin-bottom: .5rem; }
footer .sep { opacity: .45; margin: 0 .55em; }

@media (max-width: 700px) {
  .hero-art {
    background-image: url(/hero-bg.jpg);
    background-image: image-set(url(/hero-bg-mobile.webp) type("image/webp") 1x);
  }
}
@media (max-width: 520px) {
  .hero h1 { margin-top: -1.2rem; }
  .app-row { gap: .5rem; }
  .app-desc { order: 3; flex-basis: 100%; min-width: 0; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .lamp.on { animation: none; }
  .btn, .card, .plan { transition: none; }
  /* Reduced motion gentles rather than kills the color-only brand effects
     (Windows sets this flag whenever "Animation effects" is off, so plenty of
     ordinary machines report it): the chirp becomes ONE slow amber→green wave
     (same sweep keyframes, two-stop gradient — no flutter), and the CTA keeps
     its soft breathing glow. Genuinely spatial effects stay off. */
  .one-freq {
    background-image: linear-gradient(90deg,
      var(--amber) 0%, var(--amber) 15%, var(--green) 80%, var(--green) 100%);
    animation-duration: 4s;
  }
  /* No expanding ripple ring (spatial). */
  .btn-glow::after { animation: none; }
  /* No shimmer sweep. */
  .card:hover::before { animation: none; }
}

/* ============================================================================
   "OPEN BETA" RIBBON — DELETE THIS ENTIRE BLOCK AT GENERAL AVAILABILITY.
   Was "COMING SOON" until beta launch (2026-08-27); it now says OPEN BETA and
   runs on ALL pages including subscribe.html. The old exclusion existed only
   because "coming soon" over a live Stripe checkout reads as broken — "open
   beta" over one reads as true, so the opt-out class was dropped rather than
   kept pointing at nothing.
   Done as pure CSS on purpose: this site has no includes, so markup would have
   to be un-added from seven pages by hand at GA. One block, one delete.
   Bottom-right on purpose: the sticky nav owns the top-right corner (Sign In
   CTA + mobile burger). Decorative only — pointer-events: none.
   ============================================================================ */
body:not(.no-ribbon)::after {
  content: "OPEN BETA";
  position: fixed; z-index: 60;          /* .site-nav is z-index 50 */
  bottom: 3.1rem; right: -4.2rem;
  width: 16rem; padding: .34rem 0;
  text-align: center;
  transform: rotate(-45deg);
  pointer-events: none;
  font-family: "Orbitron", "Montserrat", sans-serif; font-weight: 900;
  font-size: .68rem; letter-spacing: .22em;
  color: #14100a;                        /* same amber-on-dark ink as .btn-primary */
  background: var(--amber);
  box-shadow: 0 2px 18px rgba(255,176,0,.35);
  border-top: 1px solid rgba(255,255,255,.22);
  border-bottom: 1px solid rgba(0,0,0,.25);
}
/* Keep the fixed ribbon off the footer text once the footer wraps on mobile.
   Out-specifies the bare `footer` rule in terms.html/privacy.html's inline
   <style>, which would otherwise win by source order. */
body:not(.no-ribbon) footer { padding-bottom: 5rem; }
@media (max-width: 520px) {
  body:not(.no-ribbon)::after {
    bottom: 2.5rem; right: -3.6rem; width: 13rem; font-size: .6rem; letter-spacing: .18em;
  }
}
/* ===================== END OPEN BETA RIBBON ===================== */