/* VozSay storefront v3: dark, photo-driven, zero external requests */

* { box-sizing: border-box; }

:root {
  --bg: #0d0f0e;
  --bg-2: #141715;
  --ink: #f2f0ea;
  --ink-dim: #c9c6bd;
  --ink-faint: #9a978e;
  --accent: #7cff8a;
  --accent-ink: #0a1f0c;
  --line: rgba(242, 240, 234, 0.14);
  --paper: #1a1d1a;
}

html { scroll-behavior: smooth; }

/* Prelaunch banner was removed at launch (2026-08-27). Its reserved height
   stayed behind and pushed .topbar down into the hero, hiding the kicker
   behind the logo on phones. Zero until/unless that banner returns. */
:root { --pl-h: 0px; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: "Segoe UI", system-ui, -apple-system, Arial, sans-serif;
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

.wrap {
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 24px;
}

h1, h2, h3 { line-height: 1.15; margin: 0 0 16px; }

h2 { font-size: 32px; letter-spacing: -0.01em; }
h3 { font-size: 19px; margin-bottom: 6px; }

p { margin: 0 0 16px; }

a { color: var(--accent); }
a:hover { color: #a8ffb1; }

a:focus-visible, .btn:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ---------- skip link ---------- */

/* Invisible until it receives keyboard focus (the first Tab press on the
   page), then drops in at the top-left. Mouse users never see it. */
.skip-link {
  position: absolute;
  left: 12px;
  top: -60px;
  z-index: 100;
  padding: 10px 18px;
  border-radius: 8px;
  background: var(--accent);
  color: var(--accent-ink);
  font-weight: 700;
  text-decoration: none;
}
.skip-link:focus { top: 12px; }

/* ---------- top bar ---------- */

/* ---------- pre-launch notice ---------- */

.prelaunch {
  position: relative;
  z-index: 20;
  min-height: var(--pl-h);
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
  padding: 10px 20px;
  background: #12160f;
  border-bottom: 1px solid var(--line);
  color: var(--ink-dim);
  font-size: 15px;
  text-align: center;
}

.prelaunch-tag {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--accent-ink);
  background: var(--accent);
  border-radius: 999px;
  padding: 3px 11px;
}

.topbar {
  position: absolute;
  top: var(--pl-h); left: 0; right: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 28px;
}

/* The lockup sits on its own banner. Without it the mark loses against the hero
   photo: the scrim lays ~88% black over the top-left corner, so a dark logo has
   nothing to stand against. The banner deepens on the left and fades out to the
   right so it reads as part of the page, not a box stuck on top of it. */
.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: var(--ink);
  padding: 8px 26px 8px 12px;
  border-radius: 16px;
  background: linear-gradient(100deg,
              rgba(122, 54, 168, 0.92) 0%,
              rgba(74, 32, 110, 0.72) 55%,
              rgba(30, 16, 44, 0.30) 100%);
  border: 1px solid rgba(190, 130, 235, 0.40);
  box-shadow: 0 6px 22px rgba(70, 25, 110, 0.45);
}

/* logo_mark.webp is the green mark cut free of the app-icon box. The full icon
   (assets/logo.webp, untouched original also in assets/_original/) carried a
   near-black square field whose corners read as a hard block sitting on the
   banner. No border-radius here - the mark's own edge is the shape. */
.brand-logo {
  width: 64px;
  height: 64px;
  display: block;
}

/* The company name leads the header. At 20px it sat under both the icon and the
   hero headline and read as a caption instead of a brand. Sized to the icon. */
.brand-name {
  font-size: 30px;
  font-weight: 700;
  letter-spacing: 0.01em;
}

.brand-name span { color: var(--accent); }

.nav {
  display: flex;
  align-items: center;
  gap: 22px;
  font-size: 15px;
}

.nav a {
  color: var(--ink-dim);
  text-decoration: none;
}

.nav a:hover { color: var(--ink); }

.nav a.btn-buy, .nav a.btn-buy:hover { color: var(--accent-ink); }

/* ---------- legal pages (privacy / terms / refund) ---------- */

/* index.html's .topbar is position:absolute so it floats over the full-bleed
   hero photo below it. privacy/terms/refund have no hero - same class, no
   background - so the floating header sat on top of the h1 instead of above
   it. This modifier only ever appears together with .topbar on the three
   legal pages; index.html's header never gets it, so index is untouched. */
.topbar.topbar--static {
  position: static;
  border-bottom: 1px solid var(--line);
  background: var(--bg-2);
}

/* On index.html .brand and .nav sit directly inside .topbar, which is itself
   the flex row. The legal pages keep their existing .wrap wrapper around
   both (for the boxed layout below), so that wrapper - not .topbar - needs
   to be the flex row here. Class is unique to the legal pages' markup. */
.topbar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
}

/* Readable column for long-form legal text, and clearance below the
   now-in-flow header above. */
main.legal {
  padding: 64px 0 80px;
}

main.legal .wrap {
  max-width: 760px;
}

/* ---------- buttons ---------- */

.btn {
  display: inline-block;
  padding: 13px 26px;
  border-radius: 8px;
  font-size: 16px;
  font-weight: 600;
  text-decoration: none;
  border: 1px solid transparent;
}

.btn-buy {
  background: var(--accent);
  color: var(--accent-ink);
}

.btn-buy:hover {
  background: #95ffa1;
  color: var(--accent-ink);
}

.btn-quiet {
  background: rgba(242, 240, 234, 0.08);
  color: var(--ink);
  border-color: rgba(242, 240, 234, 0.35);
}

.btn-quiet:hover {
  background: rgba(242, 240, 234, 0.16);
  color: var(--ink);
}

.btn-mini {
  padding: 8px 16px;
  font-size: 14px;
}

/* Struck old price inside a buy button. Muted rather than the button's
   own ink, so the price you pay is the one that reads first. */
.btn-was {
  text-decoration: line-through;
  opacity: 0.55;
  font-weight: 500;
  margin-right: 2px;
}

/* ---------- hero ---------- */

.hero {
  position: relative;
  min-height: calc(100vh - var(--pl-h));
  min-height: calc(100svh - var(--pl-h));
  display: flex;
  align-items: flex-end;
  overflow: hidden;
}

.hero-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 70% 40%;
}

.hero-scrim {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to top, rgba(8, 10, 9, 0.94) 0%, rgba(8, 10, 9, 0.55) 38%, rgba(8, 10, 9, 0.18) 62%, rgba(8, 10, 9, 0.35) 100%),
    linear-gradient(105deg, rgba(8, 10, 9, 0.82) 0%, rgba(8, 10, 9, 0.35) 55%, rgba(8, 10, 9, 0.05) 85%);
}

.hero-inner {
  position: relative;
  padding-top: 140px;
  padding-bottom: 72px;
  max-width: 760px;
  margin-left: max(24px, calc((100% - 1080px) / 2 + 24px));
  margin-right: 24px;
}

.hero-kicker {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 14px;
}

.hero h1 {
  font-size: clamp(38px, 6vw, 64px);
  letter-spacing: -0.02em;
  margin-bottom: 18px;
  text-wrap: balance;
}

.hero-sub {
  font-size: 19px;
  color: var(--ink-dim);
  max-width: 34em;
  margin-bottom: 28px;
}

.actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  margin-bottom: 26px;
}

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.chips li {
  font-family: "Cascadia Mono", Consolas, monospace;
  font-size: 13px;
  color: var(--ink-dim);
  border: 1px solid rgba(242, 240, 234, 0.3);
  background: rgba(8, 10, 9, 0.45);
  border-radius: 999px;
  padding: 6px 14px;
}

/* ---------- offline band ---------- */

.band {
  padding: 96px 0;
  background: var(--bg);
}

.band-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: center;
}

.band-fig {
  margin: 0;
}

.band-fig img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 12px;
  border: 1px solid var(--line);
}

.band-fig video {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 12px;
  border: 1px solid var(--line);
}

.band-fig-tall video {
  max-width: 340px;
  margin: 0 auto;
}

.band-fig figcaption {
  margin-top: 12px;
  font-size: 14px;
  color: var(--ink-faint);
}

.band-copy p { color: var(--ink-dim); }

.band-copy .big-line {
  font-size: 24px;
  line-height: 1.35;
  font-weight: 600;
  color: var(--ink);
  border-left: 3px solid var(--accent);
  padding-left: 20px;
  margin: 24px 0;
}

.small-note {
  font-size: 14px;
  color: var(--ink-faint);
}

/* ---------- features ---------- */

.section {
  padding: 96px 0;
  border-top: 1px solid var(--line);
}

.section-sub {
  color: var(--ink-dim);
  max-width: 40em;
  margin-bottom: 40px;
}

.features {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.features li {
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 26px 24px;
}

.features h3 { color: var(--ink); }
.features p { color: var(--ink-dim); font-size: 15.5px; margin: 0; }

/* ---------- pricing ---------- */

.paper {
  background: var(--paper);
}

.price-row {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 20px;
}

.price {
  font-size: 64px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--accent);
}

.price-was {
  font-size: 30px;
  color: var(--ink-faint);
  text-decoration: line-through;
}

.price-tag {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent);
  border: 1px solid rgba(124, 255, 138, 0.45);
  border-radius: 999px;
  padding: 6px 14px;
}

#pricing p { color: var(--ink-dim); max-width: 42em; }

.includes {
  list-style: none;
  margin: 0 0 32px;
  padding: 0;
  max-width: 42em;
}

.includes li {
  padding: 10px 0 10px 28px;
  position: relative;
  border-bottom: 1px solid var(--line);
  color: var(--ink-dim);
}

.includes li::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 18px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
}

.note {
  font-size: 14px;
  color: var(--ink-faint);
}

/* ---------- trial rail ---------- */

.rail {
  background: var(--bg);
}

.rail-body {
  border-left: 3px solid var(--accent);
  padding-left: 24px;
  max-width: 42em;
}

.rail-body p { color: var(--ink-dim); font-size: 19px; }

/* ---------- limits ---------- */

.limits-list {
  margin: 0;
  padding-left: 22px;
  max-width: 44em;
  color: var(--ink-dim);
}

.limits-list li { margin-bottom: 12px; }

/* ---------- footer ---------- */

.foot {
  border-top: 1px solid var(--line);
  padding: 48px 0;
  background: var(--bg-2);
  font-size: 15px;
  color: var(--ink-dim);
}

.foot .wrap {
  display: flex;
  justify-content: space-between;
  gap: 32px;
  flex-wrap: wrap;
}

.foot address { font-style: normal; }

.foot .fill { color: var(--ink-faint); }

/* ---------- responsive ---------- */

@media (max-width: 900px) {
  .band-grid { grid-template-columns: 1fr; gap: 32px; }
  .features { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 640px) {
  :root { --pl-h: 0px; }

  body { font-size: 16px; }

  .topbar { padding: 14px 16px; }
  .nav a:not(.btn) { display: none; }

  .hero-img { object-position: 62% 30%; }
  .hero-scrim {
    background:
      linear-gradient(to top, rgba(8, 10, 9, 0.96) 0%, rgba(8, 10, 9, 0.72) 45%, rgba(8, 10, 9, 0.35) 75%, rgba(8, 10, 9, 0.5) 100%);
  }

  .hero-inner {
    margin-left: 24px;
    /* Clears the absolutely-positioned .topbar, which floats on top of the
       hero rather than pushing it down. 72px was tuned for a smaller logo;
       the bigger .brand-logo (64px) plus .topbar/.brand padding now makes
       the header ~108px tall on phone widths, so this has to clear that. */
    padding-top: 128px;
    padding-bottom: 56px;
  }

  .hero h1 { font-size: clamp(28px, 8vw, 36px); margin-bottom: 12px; }

  .hero-sub { font-size: 15px; line-height: 1.5; margin-bottom: 20px; }

  .actions { gap: 12px; margin-bottom: 20px; }

  .actions .btn { width: 100%; text-align: center; padding-top: 15px; padding-bottom: 15px; }

  .band, .section { padding: 64px 0; }

  .features { grid-template-columns: 1fr; }

  .price { font-size: 52px; }
}

/* ---------- motion ---------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * {
    animation: none !important;
    transition: none !important;
  }
}