/* ============================================================
   LANDING NIGHT — cinematic re-grade of the landing page only.
   Loaded after marketing.min.css by index.html; every rule is
   scoped under body.night so no other page changes. The landing
   deliberately commits to a single night world: the theme toggle
   is hidden here and the grade pins its own tokens even if the
   user arrives with :root.light set.
   ============================================================ */

body.night {
  /* Brand Kit v4 palette, pinned on the marketing pages.
     Cyan is emphasis, amber is conversion, navy is the ground. */
  --bg: #12101F;
  --bg-surface: #191E2A;
  --bg-card: #191E2A;
  --text-primary: #E9EBF0;
  --text-main: #E9EBF0;
  --text-heading: #E9EBF0;
  --text-muted: #A6ACB8;
  --border: #27203A;
  --border-hover: #3A3354;
  --accent-teal: #5884D6;
  --accent-teal-hover: #7B9FE0;
  --accent-amber: #E3B341;
  --accent-amber-hover: #EBC468;
  --accent-gold: #E3B341;
  --shadow-glow-amber: 0 0 22px rgba(227, 179, 65, 0.22);

  background: var(--bg);
  color: var(--text-primary);
}

/* The night is one world: fog layers live on the body itself so
   sections melt into each other instead of ending at borders. */
body.night {
  background:
    radial-gradient(1100px 700px at 82% 4%, rgba(88, 132, 214, 0.05), transparent 62%),
    radial-gradient(900px 640px at 8% 30%, rgba(88, 132, 214, 0.05), transparent 60%),
    radial-gradient(1200px 900px at 50% 78%, rgba(227, 179, 65, 0.045), transparent 65%),
    linear-gradient(180deg, #12101F 0%, #161B26 42%, #191E2A 100%);
  background-attachment: fixed;
}

/* ---------- typography ---------- */
body.night h1,
body.night h2,
body.night h3 {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--text-primary);
  text-wrap: balance;
}

/* Brand Kit v4: the highlighted phrase is Sora in Signal Cyan (one cyan
   emphasis per headline), not a serif. Gradient-clip cyan -> white. */
body.night .text-gradient,
body.night .ns-accent {
  background: none;
  -webkit-background-clip: initial;
  background-clip: initial;
  -webkit-text-fill-color: currentColor;
  font-family: inherit;
  font-style: normal;
  font-weight: inherit;
  font-size: inherit;
  letter-spacing: inherit;
  color: #E3B341;
  text-shadow: none;
}

/* ---------- nav: invisible over the night, logo left, links centered,
   pill far right (the reference bar). Gains a frosted floor only after
   scrolling, via .nav-scrolled toggled by the landing. ---------- */
body.night .site-nav {
  background: none;
  border: none;
  box-shadow: none;
  padding: 0;
}
body.night .nav-inner {
  max-width: none;
  border-radius: 0;
  background: transparent;
  border: none;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  padding: 16px clamp(20px, 3.5vw, 48px);
  position: relative;
  transition: background 0.35s ease, -webkit-backdrop-filter 0.35s ease, backdrop-filter 0.35s ease;
}
body.night .site-nav.nav-scrolled .nav-inner {
  background: rgba(6, 5, 12, 0.62);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  box-shadow: 0 1px 0 rgba(233, 235, 240, 0.05);
}
@media (min-width: 769px) {
  /* the link row spans the whole bar and centers itself; the CTA breaks
     out of it to sit on the far right like the reference */
  body.night .nav-links {
    position: absolute;
    inset: 0;
    justify-content: center;
    gap: clamp(6px, 1.6vw, 26px);
    pointer-events: none;
  }
  body.night .nav-links > * { pointer-events: auto; }
  body.night .nav-divider { display: none; }
  body.night .nav-links .nav-cta {
    position: absolute;
    right: clamp(20px, 3.5vw, 48px);
    top: 50%;
    transform: translateY(-50%);
  }
  body.night .nav-links .nav-cta:hover { transform: translateY(-50%); }
  body.night .nav-brand { position: relative; z-index: 2; }
}
body.night .nav-link { color: #A6ACB8; font-weight: 500; font-size: 14px; }
body.night .nav-link:hover { color: #E9EBF0; background: none; }
body.night .theme-toggle { display: none; }
body.night .nav-cta,
body.night .site-nav .nav-cta {
  background: rgba(233, 235, 240, 0.05);
  color: #C9CDD8;
  border: 1px solid rgba(233, 235, 240, 0.16);
  border-radius: 9999px;
  box-shadow: none;
  font-weight: 600;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
body.night .nav-cta:hover,
body.night .site-nav .nav-cta:hover {
  background: rgba(88, 132, 214, 0.1);
  border-color: rgba(88, 132, 214, 0.45);
  color: #7B9FE0;
  box-shadow: 0 0 24px rgba(88, 132, 214, 0.18);
  transform: none;
}
/* While the hero (with its own primary CTA) is on screen, the nav's duplicate
   "Add to Chrome" recedes to a quiet ghost so the first view has a single bold
   ask. The glass-pill treatment below would otherwise keep it looking fully
   active, defeating the cta-quiet demotion — so strip the fill here and let it
   regain the pill once the hero scrolls away. */
body.night .site-nav.cta-quiet .nav-cta {
  background: none;
  border-color: rgba(233, 235, 240, 0.14);
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  color: #8F94A3;
}
body.night .site-nav.cta-quiet .nav-cta:hover {
  background: rgba(88, 132, 214, 0.08);
  border-color: rgba(88, 132, 214, 0.4);
  color: #7B9FE0;
  box-shadow: none;
}

/* ---------- hero: left composition over the light art ---------- */
body.night .hero {
  position: relative;
  min-height: 92vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  text-align: left;
  max-width: none;
  padding: 120px 8vw 140px;
  background: none;
  overflow: hidden;
}
body.night .hero::before { display: none; }
body.night .hero-canvas-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 1;
  filter: none;
  /* the canvas fades itself out below its waterline (destination-out in
     night-ribbon.js), so no CSS mask — a mask would also erase the
     reflection */
  mask-image: none;
  -webkit-mask-image: none;
}
/* text column sits above the canvas, capped like the reference */
body.night .hero > :not(.hero-canvas-bg) { position: relative; z-index: 2; }
body.night .hero h1 {
  font-size: clamp(2.6rem, 5.2vw, 4.6rem);
  line-height: 1.06;
  margin: 0 0 26px;
  max-width: 13em;
}
body.night .hero p {
  font-size: clamp(1rem, 1.25vw, 1.15rem);
  line-height: 1.75;
  color: var(--text-muted);
  max-width: 34em;
  margin: 0 0 34px;
}
body.night .hero-badge {
  background: rgba(233, 235, 240, 0.04);
  border: 1px solid rgba(233, 235, 240, 0.12);
  color: #9BA0AE;
  border-radius: 9999px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 11px;
  padding: 8px 16px;
  margin-bottom: 30px;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

/* waitlist form: one frosted capsule */
body.night .waitlist-form {
  display: flex;
  gap: 10px;
  padding: 6px;
  border-radius: 9999px;
  background: rgba(10, 9, 18, 0.55);
  border: 1px solid rgba(233, 235, 240, 0.14);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  box-shadow: 0 18px 50px rgba(4, 4, 9, 0.5);
  max-width: 460px;
  width: 100%;
  margin: 0;
}
body.night .waitlist-input {
  flex: 1;
  min-width: 0;
  background: transparent;
  border: none;
  color: var(--text-primary);
  font-size: 15px;
  padding: 12px 18px;
}
body.night .waitlist-input::placeholder { color: #6E7688; }
body.night .waitlist-input:focus { outline: none; box-shadow: none; border: none; }
/* Brand Kit v4: the primary is the one saturated Action Amber fill. */
body.night .btn-primary {
  background: var(--accent-amber);
  border: 1px solid var(--accent-amber);
  color: #0D0B17;
  border-radius: 9999px;
  font-weight: 700;
  letter-spacing: 0.01em;
  box-shadow: 0 0 26px rgba(227, 179, 65, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.22);
  text-shadow: none;
}
body.night .btn-primary:hover {
  background: var(--accent-amber-hover);
  border-color: var(--accent-amber-hover);
  color: #0D0B17;
  box-shadow: 0 0 38px rgba(227, 179, 65, 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.3);
  transform: translateY(-1px);
}
body.night .btn-secondary {
  background: rgba(233, 235, 240, 0.04);
  border: 1px solid rgba(233, 235, 240, 0.16);
  color: #C2C7D3;
  border-radius: 9999px;
}
body.night .hero-note--prelaunch,
body.night .hero-note {
  color: #8F94A3; /* was #6E7688: ~3.9:1 on the night bg, below AA for 12.5px text */
  font-size: 12.5px;
  letter-spacing: 0.02em;
  margin-top: 18px;
}

/* ---------- liquid glass: the secondary-control language ----------
   Split agreed with the owner (2026-07-15): primaries stay filled teal
   (the one saturated "press this"), everything secondary is translucent
   glass. The recipe: backdrop blur+saturate showing the drifting letters
   through the surface, a specular top edge, a faint cool inner glow. */
body.night .hero-badge,
body.night .btn-secondary,
body.night .nav-cta,
body.night .site-nav .nav-cta,
body.night .waitlist-form,
body.night .pchip {
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.10) 0%, rgba(255, 255, 255, 0.03) 36%, rgba(139, 160, 216, 0.03) 64%, rgba(88, 132, 214, 0.06) 100%);
  border: 1px solid rgba(255, 255, 255, 0.16);
  -webkit-backdrop-filter: blur(16px) saturate(1.6);
  backdrop-filter: blur(16px) saturate(1.6);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.25),
    inset 0 -1px 1px rgba(255, 255, 255, 0.05),
    inset 0 0 22px rgba(139, 160, 216, 0.04),
    0 10px 30px rgba(4, 4, 9, 0.4);
}
body.night .btn-secondary:hover {
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.16) 0%, rgba(255, 255, 255, 0.05) 36%, rgba(139, 160, 216, 0.05) 64%, rgba(88, 132, 214, 0.1) 100%);
  border-color: rgba(255, 255, 255, 0.3);
  color: #E9EBF0;
  transform: translateY(-1px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.35),
    0 14px 34px rgba(4, 4, 9, 0.5),
    0 0 24px rgba(88, 132, 214, 0.12);
}

/* platform chips: the hero's availability line, three small glass doors */
body.night .platform-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 18px;
}
body.night .pchip {
  display: inline-flex;
  align-items: center;
  padding: 7px 14px;
  border-radius: 9999px;
  color: #8F94A3;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
  white-space: nowrap;
  text-decoration: none;
  transition: color 0.2s ease, border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
body.night a.pchip:hover {
  color: #7B9FE0;
  border-color: rgba(88, 132, 214, 0.4);
  transform: translateY(-1px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.32),
    0 12px 30px rgba(4, 4, 9, 0.45),
    0 0 20px rgba(88, 132, 214, 0.14);
}

/* Launched hero: the platform option is a quiet text link, not a glass pill,
   so the hero keeps ONE bold CTA (the Add-to-Chrome button). Strips the pill
   chrome and adds a link arrow; hover just brightens + underlines. */
body.night .platform-links .pchip {
  padding: 2px 0;
  border: none;
  background: none;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  color: #8F94A3;
}
body.night .platform-links a.pchip::after {
  content: " \2192";
  opacity: 0.7;
}
body.night .platform-links a.pchip:hover {
  color: #7B9FE0;
  transform: none;
  box-shadow: none;
  text-decoration: underline;
  text-underline-offset: 3px;
}
body.night a.pchip:focus-visible { outline: 2px solid #5884D6; outline-offset: 2px; }

/* ---------- platform icon row (quiet secondary under the hero CTA) ----------
   Every other platform is one visible, tappable icon (no dropdown to open).
   The device-aware primary already surfaces the likely-right one; this is the
   escape hatch for everyone else. ---------- */
body.night .platform-icons {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  margin-top: 18px;
  /* Shrink to the icon row so the OR rule spans exactly that width and the
     whole block still sits flush-left under the primary CTA. */
  width: max-content;
  max-width: 100%;
}
/* "OR" reads as a fork in the path (primary above, everything else below),
   which a floating label never did. The rules stretch to the row width. */
body.night .pi-or {
  display: flex;
  align-items: center;
  gap: 10px;
  align-self: stretch;
  color: #6E7688;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  line-height: 1;
}
body.night .pi-or::before,
body.night .pi-or::after {
  content: "";
  flex: 1;
  height: 1px;
  background: rgba(255, 255, 255, 0.13);
}
body.night .pi-row {
  display: flex;
  gap: 10px;
}
body.night .pi {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  width: 60px;
  padding: 8px 4px 7px;
  border-radius: 11px;
  border: 1px solid rgba(255, 255, 255, 0.10);
  background: rgba(255, 255, 255, 0.03);
  transition: border-color 0.18s ease, background 0.18s ease, transform 0.18s ease;
}
/* Icons wear their real brand colors (set in the SVGs), so hover lifts the
   tile instead of recoloring the mark. */
body.night .pi:hover {
  border-color: rgba(88, 132, 214, 0.45);
  background: rgba(88, 132, 214, 0.08);
  transform: translateY(-1px);
}
body.night .pi:focus-visible { outline: 2px solid #5884D6; outline-offset: 2px; }
body.night .pi svg { width: 24px; height: 24px; }
/* One word per icon. Bare marks looked legible but weren't: a globe sitting
   under "15 languages" reads as translation, not web player. */
body.night .pi-name {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: #8F94A3;
  line-height: 1;
  transition: color 0.18s ease;
}
body.night .pi:hover .pi-name { color: #E9EBF0; }

/* feature explorer: center the visual beside the text column instead of
   pinning it to the top and leaving a dead zone under it */
body.night .feat-panel { align-items: center; }

/* FAQ category labels align with the centered 800px question column
   instead of floating at the section's far-left edge */
body.night .faq-category { max-width: 800px; margin: 40px auto 16px; padding-left: 4px; }
body.night .faq-category:first-child { margin-top: 0; }

/* "Share your story" joins the glass secondary family: the filled amber
   original was the only saturated non-teal control on the page and
   outshouted the real CTAs */
body.night .story-cta-btn {
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.10) 0%, rgba(255, 255, 255, 0.03) 36%, rgba(88, 132, 214, 0.06) 100%);
  color: #7B9FE0;
  border: 1px solid rgba(88, 132, 214, 0.35);
  -webkit-backdrop-filter: blur(16px) saturate(1.6);
  backdrop-filter: blur(16px) saturate(1.6);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25), 0 10px 30px rgba(4, 4, 9, 0.4);
}
body.night .story-cta-btn:hover {
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.05) 36%, rgba(88, 132, 214, 0.1) 100%);
  border-color: rgba(88, 132, 214, 0.6);
  color: #E9EBF0;
  transform: translateY(-2px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.32), 0 0 24px rgba(88, 132, 214, 0.16), 0 14px 34px rgba(4, 4, 9, 0.5);
}

/* hero headline entrance: words rise out of the dark */
body.night .hero .hw {
  display: inline-block;
  opacity: 0;
  transform: translateY(0.55em);
  transition: opacity 0.9s cubic-bezier(0.22, 1, 0.36, 1), transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}
body.night .hero.hero-in .hw { opacity: 1; transform: translateY(0); }
body.night .hero .hero-badge,
body.night .hero p,
body.night .hero .waitlist-form,
body.night .hero .hero-note--prelaunch,
body.night .hero .hero-ctas,
body.night .hero .hero-note {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 1s ease 0.55s, transform 1s cubic-bezier(0.22, 1, 0.36, 1) 0.55s;
}
body.night .hero.hero-in .hero-badge { transition-delay: 0.1s; }
body.night .hero.hero-in .hero-badge,
body.night .hero.hero-in p,
body.night .hero.hero-in .waitlist-form,
body.night .hero.hero-in .hero-note--prelaunch,
body.night .hero.hero-in .hero-ctas,
body.night .hero.hero-in .hero-note { opacity: 1; transform: translateY(0); }

/* ---------- sections: fog depth instead of card walls ---------- */
body.night .section { background: none; }

/* ---------- section rhythm: alternating raised bands ----------
   Every other section sits on a full-bleed, faintly lighter shelf with
   hairline edges and a soft teal crown, so the page reads as a sequence
   of rooms instead of one continuous scroll. Ground sections stay on
   the deep night between them. */
body.night .band-raised {
  position: relative;
  z-index: 0;
}
body.night .band-raised::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 100vw;
  transform: translateX(-50%);
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(56% 140px at 50% 0%, rgba(88, 132, 214, 0.06), transparent 72%),
    linear-gradient(180deg, rgba(139, 160, 216, 0.05), rgba(139, 160, 216, 0.016));
  border-top: 1px solid rgba(233, 235, 240, 0.08);
  border-bottom: 1px solid rgba(233, 235, 240, 0.08);
}

/* one eyebrow voice for every section opener */
body.night .sec-eyebrow,
body.night .persona-picker__eyebrow {
  display: block;
  color: #5884D6;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 11px;
  font-weight: 600;
  margin-bottom: 14px;
}
body.night .section-header h2,
body.night .cta-section h2 {
  font-size: clamp(1.9rem, 3vw, 2.7rem);
  font-weight: 600;
}
body.night .section-subtitle { color: var(--text-muted); }

/* generic frosted surface for the landing's cards/chips */
body.night .faq-item,
body.night .t-card {
  background: rgba(10, 18, 34, 0.5);
  border: 1px solid rgba(233, 235, 240, 0.08);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  box-shadow: 0 14px 44px rgba(4, 4, 9, 0.35);
}

/* teal like every other section eyebrow (the grey here was both the
   page's one inconsistent eyebrow and a contrast failure) */
body.night .testimonials-eyebrow,
body.night .faq-category {
  color: #5884D6;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 11px;
  font-weight: 600;
}
body.night .t-name { color: var(--text-primary); }
body.night .t-role { color: #6E84A6; }

body.night .faq-item summary { color: var(--text-primary); }
body.night .faq-answer { color: var(--text-muted); }
body.night .faq-answer a { color: #7B9FE0; }

/* story section (shared partial) melts into the same night */
body.night .story { background: none; }
body.night .story .kick-play {
  color: #5884D6;
  text-shadow: none;
  font-family: inherit;
  font-style: normal;
  font-weight: inherit;
}
body.night .story .accent { color: #5884D6; text-shadow: none; }

/* demo widget shell goes frosted */
body.night .widget-section .widget-card,
body.night .widget-card {
  background: rgba(8, 17, 32, 0.55);
  border: 1px solid rgba(233, 235, 240, 0.09);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  box-shadow: 0 24px 70px rgba(4, 4, 9, 0.5);
}

/* demo widget + carousel: amber accents become the landing's teal light */
body.night .w2t {
  --w-amber: #5884D6;
  --w-amber-glow: rgba(88, 132, 214, 0.35);
}
body.night .w2t .pbtn { color: #032018; }
body.night .w2t .pbtn:hover { background: #7B9FE0; }
body.night .t-dot--active::after {
  background: #7B9FE0;
  box-shadow: 0 0 10px rgba(88, 132, 214, 0.45);
}

/* ---------- bottom CTA: the night answers back ---------- */
body.night .cta-section {
  position: relative;
  background: none;
  border: none;
  overflow: hidden;
  padding-top: 140px;
  padding-bottom: 150px;
}
body.night .cta-canvas-bg { opacity: 1; filter: none; }
body.night .cta-section > :not(.cta-canvas-bg) { position: relative; z-index: 2; }
body.night .cta-section p { color: var(--text-muted); }
body.night .cta-section .waitlist-form { margin: 0 auto; }

/* footer sinks into the deepest fog */
body.night footer,
body.night .site-footer {
  background: rgba(6, 5, 12, 0.6);
  border-top: 1px solid rgba(233, 235, 240, 0.05);
}

/* ---------- reveal tuning: slower, softer ---------- */
body.night [data-reveal] {
  transition-duration: 1.1s;
  transition-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ---------- mobile ---------- */
@media (max-width: 820px) {
  body.night .hero {
    min-height: 88vh;
    padding: 108px 24px 96px;
    align-items: center;
    text-align: center;
  }
  body.night .hero h1 { font-size: clamp(2.1rem, 9vw, 2.9rem); }
  body.night .hero p { font-size: 1rem; }
  body.night .waitlist-form { flex-direction: column; border-radius: 22px; padding: 10px; }
  body.night .platform-chips { justify-content: center; }
  body.night .waitlist-input { padding: 12px 14px; text-align: center; }
  body.night .btn-primary { padding: 13px 18px; }
  body.night .hero { justify-content: flex-start; }
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  body.night .hero .hw,
  body.night .hero .hero-badge,
  body.night .hero p,
  body.night .hero .waitlist-form,
  body.night .hero .hero-note--prelaunch,
  body.night .hero .hero-ctas,
  body.night .hero .hero-note {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* ── nav polish (2026-07-15): the wordmark/mark were large against 14px links.
   Nudge links up and the logo down so the three sit in proportion. Applies
   wherever the night nav shows, which is now every marketing page. ── */
body.night .nav-brand img { width: 34px; height: 34px; }
body.night .nav-brand span { font-size: 18px; }
body.night .nav-link { font-size: 15px; }

/* ── inner-page night fixes: elements whose base styling hard-codes a non-token
   color that the night grade can't reach through the token remap. ── */
/* Contact "Send message" mixed var(--accent-amber) (now teal) with a hard-coded
   #f97316, so it read teal→orange. Rejoin the all-teal primary family. */
body.night .contact-submit {
  background: var(--accent-amber);
  border: 1px solid var(--accent-amber);
  color: #0D0B17;
  box-shadow: 0 0 26px rgba(227, 179, 65, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.22);
}
body.night .contact-submit:hover {
  background: var(--accent-amber-hover);
  border-color: var(--accent-amber-hover);
  color: #0D0B17;
}

/* ── already-installed CTAs: when the extension is detected, the "Add to
   Chrome" controls become "Open Word2Talk", so drop the Chrome logo they
   carried. Not night-scoped — this state applies on every page. ── */
.w2t-ext-installed .js-get-extension svg { display: none; }

/* Blog prose (.bp-content) hard-codes var(--action-amber) for inline links,
   blockquote rules, the TOC, and inline CTAs. Night doesn't touch that token
   (it lives in marketing.css as #E3B341), so those read orange on the night
   ground. Remap the one token to teal to rejoin the all-teal action language. */
body.night { --action-amber: #5884D6; }


/* ════════════════════════════════════════════════════════════════
   DEEP HARBOR TYPE SCALE (owner spec 2026-07-29, made fluid same day)
   The single source of truth for marketing type. Appended last so it wins
   over the earlier per-section sizes here and in marketing.css. Scoped under
   body.night, which every marketing page carries.

   WHY CLAMPS AND NOT FLAT PX: the spec's numbers were authored on a ~1440px
   canvas. Pinned as fixed px (or clamped with a 1440-era ceiling) they stop
   growing while the viewport keeps going, so on a 2560px display the page
   reads tiny — the type/viewport ratio collapses. Every token below is
   clamp(spec, vw, cap) with the vw coefficient anchored so the value equals
   the spec EXACTLY at 1440px, holds as a floor below that, and keeps scaling
   above it to a ~1.3x ceiling. Change the spec number and its coefficient
   together: coefficient = spec_px / 1440 * 100.

   Three faces only: Space Grotesk display, Atkinson Hyperlegible body,
   Geist Mono labels/metadata.
   ════════════════════════════════════════════════════════════════ */

body.night {
  /* labels / metadata (mono) */
  --fs-11: clamp(11px, 0.764vw, 15px);
  --fs-12: clamp(12px, 0.833vw, 16px);
  /* UI + body */
  --fs-14: clamp(14px, 0.972vw, 17px);
  --fs-145: clamp(14.5px, 1.007vw, 17.5px);
  /* Content body climbs further than nav/chrome above: a 112px hero headline
     over a 20px subhead reads thin (5.5:1). These ceilings keep it near 4.5:1
     while staying inside a comfortable reading range. */
  --fs-15: clamp(15px, 1.042vw, 20px);
  --fs-16: clamp(16px, 1.111vw, 22px);
  --fs-17: clamp(17px, 1.181vw, 24px);
  --fs-18: clamp(18px, 1.25vw, 26px);
  /* Body/UI/label ceilings above are ~1.3x and land around 1900px on purpose:
     comfortable reading size is an absolute range, not a fraction of the
     viewport, so body text should stop growing. DISPLAY type is what has to
     keep tracking the viewport — otherwise a 2560px screen reads as tiny even
     though the body copy is fine. So the display tier below carries ceilings
     high enough to keep scaling through ~2500px. */
  --fs-20: clamp(20px, 1.389vw, 30px);
  --fs-30: clamp(30px, 2.083vw, 46px);
  --fs-h1: clamp(2.25rem, 4.6vw, 7rem);          /* 36 → 59@1280 → 112 cap */
  --fs-h2: clamp(1.625rem, 2.6vw, 4.25rem);      /* 26 → 33@1280 → 68 cap */
  --fs-h2-closing: clamp(1.875rem, 3.4vw, 5.5rem);/* 30 → 44@1280 → 88 cap */
}

/* The 1280px container left ~half of a 2560px screen empty, which made the
   type read smaller than it is. Widen the measure on big displays only. */
@media (min-width: 1800px) { body.night { --max-width: 1440px; } }
@media (min-width: 2300px) { body.night { --max-width: 1560px; } }

/* ---------- nav ---------- */
body.night .nav-link,
body.night .nav-link--subtle { font-size: var(--fs-145); }
body.night .site-nav .nav-cta,
body.night .nav-cta { font-size: var(--fs-14); }
body.night .nav-brand span { font-size: var(--fs-17); }

/* ---------- hero ---------- */
body.night .hero h1 {
  font-size: var(--fs-h1);
  font-weight: 700;
  line-height: 0.98;
  letter-spacing: -0.035em;
}
body.night .hero p {
  font-size: var(--fs-17);
  line-height: 1.7;
}
body.night .hero .btn-primary,
body.night .hero .hero-primary {
  font-size: var(--fs-18);
  font-weight: 600;
}
/* platform chips + the "OR" fork: mono, one size */
body.night .pchip,
body.night .pi-name,
body.night .pi-or,
body.night .hero-note,
body.night .hero-note--prelaunch {
  font-family: var(--font-mono);
  font-size: var(--fs-11);
}

/* ---------- live demo ---------- */
body.night .demo-canvas__header h2 { font-size: var(--fs-20); }
body.night .demo-canvas__header p { font-size: var(--fs-145); }
/* Reading surfaces are Atkinson Hyperlegible, not the display face: this is
   the pane a second-language reader actually reads along in. */
body.night .dw-prose,
body.night .dw-story #demo-reader-display,
body.night .dw-editor {
  font-family: var(--font-sans);
}
body.night .dw-prose,
body.night .dw-story #demo-reader-display {
  font-size: var(--fs-16);
  line-height: 1.75;
}
body.night .dw-times,
body.night .dw-seg button,
body.night .dw-label {
  font-family: var(--font-mono);
  font-size: var(--fs-12);
}
body.night .dw-ghost { font-size: var(--fs-14); }

/* ---------- section openers ---------- */
body.night .sec-eyebrow,
body.night .persona-picker__eyebrow,
body.night .testimonials-eyebrow,
body.night .faq-category,
body.night .w2t-eyebrow {
  font-family: var(--font-mono);
  font-size: var(--fs-12);
  letter-spacing: 0.14em;
}
body.night .section-header h2 {
  font-size: var(--fs-h2);
  font-weight: 600;
}
body.night .section-subtitle { font-size: var(--fs-17); }

/* ---------- trust / testimonials ---------- */
body.night .t-quote { font-size: var(--fs-16); line-height: 1.7; }
body.night .t-name { font-size: var(--fs-15); }
body.night .t-role {
  font-family: var(--font-mono);
  font-size: var(--fs-11);
}

/* ---------- pricing ---------- */
body.night .pricing-price { font-size: var(--fs-30); }
body.night .pricing-card h3 { font-size: var(--fs-18); }
body.night .pricing-metric,
body.night .pricing-fit-who { font-size: var(--fs-15); }
body.night .pricing-renew-pill {
  font-family: var(--font-mono);
  font-size: var(--fs-12);
}

/* ---------- FAQ ---------- */
body.night .faq-item summary { font-size: var(--fs-18); font-weight: 500; }
body.night .faq-answer { font-size: var(--fs-16); line-height: 1.7; }

/* ---------- closing CTA + footer ---------- */
body.night .cta-section h2 { font-size: var(--fs-h2-closing); }
body.night .cta-section p { font-size: var(--fs-17); }
body.night .cta-section .btn-primary,
body.night .cta-section .hero-primary {
  font-size: var(--fs-17);
  font-weight: 600;
}
body.night .footer-col-title,
body.night .footer-bottom p {
  font-family: var(--font-mono);
  font-size: var(--fs-11);
}
body.night .footer-col a { font-size: var(--fs-145); }