/* ================================================================
   PROSPERO — main.css
   Theme:  Wood-grain · Rosewood · Brass · Cream
   Family: Folio Audio (swap Tier 1 + Tier 7–8 to re-skin per app)
   Mobile-first · Vanilla CSS · Hugo Pipes
   ================================================================ */

/* ---------- Reset ---------- */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* ================================================================
   DESIGN TOKENS — Folio Audio family
   ─────────────────────────────────────────────────────────────────
   Tier 1 · Raw Palette     swap to re-skin for any Folio Audio app
   Tier 2 · Semantic        functional aliases; names stay per theme
   Tier 3 · Typography      font stacks, scale, leading, tracking
   Tier 4 · Layout          container, spacing, chrome dimensions
   Tier 5 · Shape           border-radius scale
   Tier 6 · Motion          duration + easing curve
   Tier 7 · Surfaces        composite bg values — change with Tier 1
   Tier 8 · Texture         --texture alias + theme definition
   ================================================================ */
:root {
  /* ── Tier 1 · Raw Palette — Prospero (wood-grain) ────────────
     Swap this block (and Tiers 7–8) to re-skin for other apps
     in the Folio Audio family (e.g. chromium / art-deco variant). */
  --grain-dark: #140a05; /* near-black warm brown — page canvas  */
  --rosewood: #2e1f14; /* mid brown — panel / card bg          */
  --grain-light: #422b1a; /* warm tan — elevated surfaces         */
  --brass: #b8945c; /* primary accent                       */
  --cream: #f2e1b8; /* primary text                         */
  --dot-core: #f2c759; /* highlight amber — gradient text, glow*/
  --dot-glow: #e6b34d; /* ambient glow colour                  */
  --fret: #bfb8a6; /* fret-wire — decorative line tint     */

  --connected: #66cc4d;
  --disconnected: #cc3326;

  /* ── Tier 2 · Semantic Aliases ─────────────────────────────────
     These names stay the same across all Folio Audio apps; only the
     values they point to change when the palette changes.         */

  /* Backgrounds */
  --bg: var(--grain-dark);
  --bg-card: var(--rosewood);
  --bg-elevated: var(--grain-light);
  --bg-input: #1a0e08; /* input wells — between bg and bg-card */

  /* Text */
  --text-primary: var(--cream);
  --text-secondary: #c4a87a; /* muted warm cream               */
  --text-muted: #6b4e2e; /* dark muted brass               */

  /* Accent — solids */
  --accent: var(--brass);
  --accent-light: #cfa870; /* lighter brass for hover states */
  --accent-bright: var(--dot-core); /* amber highlight                */

  /* Accent — alpha composites (derived from --brass / --dot-core) */
  --accent-dim: rgba(184, 148, 92, 0.14);
  --accent-border: rgba(184, 148, 92, 0.4);
  --accent-glow: 0 0 60px rgba(242, 199, 89, 0.18), 0 0 120px rgba(184, 148, 92, 0.1);

  /* Borders (derived from --fret) */
  --border: rgba(191, 184, 166, 0.08);
  --border-mid: rgba(191, 184, 166, 0.15);
  --border-strong: rgba(191, 184, 166, 0.28);

  /* ── Tier 3 · Typography ────────────────────────────────────────
     --font-display and --font-mono may change per app.
     The type scale and rhythm values are shared across the family. */

  /* Font stacks */
  --font-display: "Poiret One", -apple-system, BlinkMacSystemFont, sans-serif;
  --font:
    -apple-system, "SF Pro Text", BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --font-mono: "SF Mono", "Fira Code", "Cascadia Code", monospace;

  /* Type scale (rem) */
  --text-2xs: 0.68rem; /*  ~11px  badge labels, dim metadata     */
  --text-xs: 0.78rem; /*  ~12px  eyebrow, footnotes, captions   */
  --text-sm: 0.875rem; /*  ~14px  nav links, secondary body      */
  --text-base: 0.95rem; /*  ~15px  buttons, primary UI            */
  --text-md: 1.05rem; /*  ~17px  prose body, form fields        */
  --text-lg: 1.25rem; /*  ~20px  card titles, tagline max       */
  --text-xl: 1.4rem; /*  ~22px  logo wordmarks                 */
  --text-2xl: 1.65rem; /*  ~26px  prose h2                       */
  --text-3xl: 2.8rem; /*  ~45px  pricing display numbers        */

  /* Leading (line-height) */
  --leading-none: 1;
  --leading-tight: 1.12; /* display headings                     */
  --leading-snug: 1.25; /* card titles, compact headings        */
  --leading-normal: 1.45; /* dense body copy                      */
  --leading-relaxed: 1.6; /* comfortable reading                  */
  --leading-loose: 1.75; /* long-form prose                      */

  /* Tracking (letter-spacing) */
  --tracking-tight: 0.02em; /* buttons, subtle links            */
  --tracking-normal: 0.04em; /* display headings                 */
  --tracking-wide: 0.1em; /* badge / tag labels               */
  --tracking-wider: 0.12em; /* logo wordmark, eyebrow pill      */
  --tracking-widest: 0.18em; /* gesture micro-labels             */

  /* ── Tier 4 · Layout ──────────────────────────────────────────── */
  --container: min(100% - 2.5rem, 1200px);
  --section-pad: clamp(5rem, 10vw, 9rem);
  --nav-height: 96px;

  /* ── Tier 5 · Shape ───────────────────────────────────────────── */
  --radius-sm: 5px; /* inline code, small chips                */
  --radius: 12px; /* cards, form inputs, step cards          */
  --radius-lg: 22px; /* large cards, video wrapper              */
  --radius-xl: 32px; /* device screenshots, phone bezels        */
  --radius-full: 100px; /* pill buttons, tags, badges              */

  /* ── Tier 6 · Motion ──────────────────────────────────────────── */
  --ease: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --dur: 220ms; /* micro-interactions, hover states          */
  --dur-slow: 550ms; /* scroll-reveal, larger transitions         */

  /* ── Tier 7 · Surface Composites ──────────────────────────────
     Derived from Tier 1 raw colours; update when palette changes. */
  --nav-bg: rgba(20, 10, 5, 0.88); /* frosted nav header   */
  --mobile-nav-bg: rgba(20, 10, 5, 0.98); /* full-screen mobile nav*/

  /* ── Tier 8 · Texture ─────────────────────────────────────────
     Set --texture to swap textured surfaces across the whole site.
     e.g. --texture: var(--brushed-metal); or --texture: none;     */
  --texture: var(--wood-grain);

  /* Wood-grain — horizontal stripes echoing the rosewood UI panels */
  --wood-grain: repeating-linear-gradient(
    0deg,
    transparent 0px,
    transparent 6px,
    rgba(0, 0, 0, 0.065) 6px,
    rgba(0, 0, 0, 0.065) 7px,
    transparent 7px,
    transparent 14px,
    rgba(0, 0, 0, 0.038) 14px,
    rgba(0, 0, 0, 0.038) 15px,
    transparent 15px,
    transparent 21px,
    rgba(0, 0, 0, 0.11) 21px,
    rgba(0, 0, 0, 0.11) 23px,
    transparent 23px,
    transparent 31px,
    rgba(0, 0, 0, 0.05) 31px,
    rgba(0, 0, 0, 0.05) 32px,
    transparent 32px,
    transparent 39px,
    rgba(0, 0, 0, 0.08) 39px,
    rgba(0, 0, 0, 0.08) 40px,
    transparent 40px
  );

  /* ── Folio Audio main brand palette — used on body.folio-home pages */
  --folio-ink: #0d0a07; /* page canvas — near-black, faintly warm */
  --folio-lead: #252220; /* card / panel background               */
  --folio-vellum: #f0e6cc; /* primary text — aged paper             */
  --folio-gilt: #c8a84b; /* primary accent — gold leaf            */
  --folio-wax: #7a1e2e; /* secondary accent — wax seal crimson   */
  --folio-bone: #8c8070; /* muted text / decorative rules         */
  --folio-verde: #1c3828; /* deep forest green — green leather     */
  --folio-emerald: #2f6445; /* lighter green for card borders        */

  /* ── Caliban palette — earthy dark-olive, island earth (The Tempest) */
  --caliban-earth: #231a07; /* dark ochre — gradient highlight       */
  --caliban-deep: #0c0803; /* near-black warm earth — gradient base */
  --caliban-bronze: #7a6020; /* tarnished bronze — top border accent  */
  --caliban-border: rgba(100, 80, 30, 0.5); /* bronze border, subtle     */
  --caliban-font: "Pirata One", Georgia, serif;

  /* ── Hecate palette — deep violet, arcane (Macbeth) */
  --hecate-shadow: #1a0a2e; /* purple-black — gradient highlight     */
  --hecate-deep: #080410; /* near-black violet — gradient base     */
  --hecate-amethyst: #7a4abf; /* amethyst — top border accent          */
  --hecate-border: rgba(90, 40, 130, 0.5); /* violet border, subtle      */
  --hecate-font: "Almendra", Georgia, serif;

  /* Laid-paper texture — fine horizontal wire marks on printing paper */
  --laid-paper: repeating-linear-gradient(
    0deg,
    transparent 0px,
    transparent 3px,
    rgba(200, 168, 75, 0.03) 3px,
    rgba(200, 168, 75, 0.03) 4px,
    transparent 4px,
    transparent 9px,
    rgba(200, 168, 75, 0.05) 9px,
    rgba(200, 168, 75, 0.05) 10px,
    transparent 10px,
    transparent 18px,
    rgba(200, 168, 75, 0.025) 18px,
    rgba(200, 168, 75, 0.025) 19px
  );

  /* Tooled-leather texture — diagonal crosshatch suggesting grain */
  --tooled-leather: repeating-linear-gradient(
      -55deg,
      transparent 0px,
      transparent 5px,
      rgba(200, 168, 75, 0.055) 5px,
      rgba(200, 168, 75, 0.055) 6px,
      transparent 6px,
      transparent 15px,
      rgba(200, 168, 75, 0.075) 15px,
      rgba(200, 168, 75, 0.075) 16px,
      transparent 16px,
      transparent 24px
    ),
    repeating-linear-gradient(
      35deg,
      transparent 0px,
      transparent 7px,
      rgba(200, 168, 75, 0.035) 7px,
      rgba(200, 168, 75, 0.035) 8px,
      transparent 8px,
      transparent 18px
    );
}

/* ---------- Base ---------- */
/* Custom cursor (amber tracking dot) — kept for demo/presentation use:
html {
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28'%3E%3Ccircle cx='14' cy='14' r='6' fill='%23F2C759'/%3E%3Ccircle cx='14' cy='14' r='12' fill='none' stroke='%23E6B34D' stroke-width='1.5' opacity='.45'/%3E%3C/svg%3E") 14 14, auto;
}
a, button, [role="button"], label, input[type="submit"], input[type="button"], select {
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28'%3E%3Ccircle cx='14' cy='14' r='6' fill='%23F2C759'/%3E%3Ccircle cx='14' cy='14' r='12' fill='none' stroke='%23E6B34D' stroke-width='1.5' opacity='.45'/%3E%3C/svg%3E") 14 14, pointer;
}
*/
html {
  scroll-behavior: smooth;
  scroll-padding-top: var(--nav-height);
}
/* Extra offset when the app subheader is visible */
.has-app-subheader {
  scroll-padding-top: calc(var(--nav-height) + 2.5rem);
}

body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--text-primary);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

img,
video {
  max-width: 100%;
  display: block;
}
a {
  color: var(--accent-light);
  text-decoration: none;
  transition: color var(--dur) var(--ease);
}
a:hover {
  color: var(--cream);
}

/* ---------- Utility ---------- */
.container {
  width: var(--container);
  margin-inline: auto;
}

/* ---------- Typography ---------- */
h1,
h2,
h3,
h4 {
  font-family: var(--font-display);
  font-weight: 400; /* Poiret One is naturally thin */
  line-height: 1.12;
  letter-spacing: 0.04em; /* wide tracking suits the art-deco face */
}
p {
  max-width: 68ch;
}

/* ---------- Section helpers ---------- */
.section {
  padding-block: var(--section-pad);
}

.section-dark {
  background-color: var(--bg-card);
  background-image: var(--texture);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.section-label {
  display: inline-block;
  font-family: var(--font);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent-light);
  margin-bottom: 0.8rem;
}

.section-header {
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
}
.section-header h2 {
  font-size: clamp(1.9rem, 4vw, 3.2rem);
}
.section-header p {
  color: var(--text-secondary);
  font-size: 1.05rem;
  margin-top: 0.75rem;
}

/* ================================================================
   BUTTONS
   ================================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.8rem 1.75rem;
  border-radius: var(--radius-full);
  font-family: var(--font);
  font-weight: 600;
  font-size: 0.95rem;
  cursor: pointer;
  border: none;
  text-decoration: none;
  white-space: nowrap;
  line-height: 1;
  transition: all var(--dur) var(--ease);
}

.btn-primary {
  background: var(--brass);
  color: var(--grain-dark); /* dark text on brass for contrast */
  letter-spacing: 0.02em;
}
.btn-primary:hover {
  background: var(--dot-core);
  color: var(--grain-dark);
  box-shadow: 0 0 40px rgba(242, 199, 89, 0.35);
  transform: translateY(-1px);
}

.btn-ghost {
  background: transparent;
  color: var(--text-primary);
  border: 1px solid var(--border-mid);
}
.btn-ghost:hover {
  border-color: var(--accent-border);
  color: var(--accent-light);
  background: var(--accent-dim);
}

/* ---------- App Store Badge ---------- */
.app-store-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.72rem 1.4rem;
  background: var(--cream);
  color: var(--grain-dark);
  border-radius: var(--radius);
  text-decoration: none;
  font-family: var(--font);
  transition: all var(--dur) var(--ease);
  max-width: 11rem;
}
.app-store-badge:hover {
  color: var(--grain-dark);
  transform: translateY(-2px);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.45);
}
.badge-icon {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
}
.badge-text {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
}
.badge-sub {
  font-size: 0.62rem;
  font-weight: 400;
  letter-spacing: 0.04em;
  opacity: 0.65;
}
.badge-main {
  font-size: 1rem;
  font-weight: 800;
}

/* ================================================================
   HEADER / NAV
   ================================================================ */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 200;
  height: var(--nav-height);
  display: flex;
  align-items: center;
  border-bottom: 2px solid var(--accent-border);
}

/* backdrop-filter lives on a pseudo-element so it does not create a
   containing block for position:fixed children (e.g. the mobile nav). */
.site-header::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--nav-bg);
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  transition: background var(--dur) var(--ease);
  z-index: -1;
}

.site-header .container {
  display: flex;
  align-items: center;
  gap: 1.5rem;
}

/* Company wordmark — logo image */
.nav-logo {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  text-decoration: none;
}
.nav-logo img {
  height: 72px;
  width: auto;
  display: block;
}

/* ── Nav dropdown (Apps menu) ─────────────────────────────────── */
.nav-dropdown {
  position: relative;
}
.nav-dropdown-toggle {
  font-family: inherit;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--text-secondary);
  letter-spacing: 0.03em;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  transition: color var(--dur) var(--ease);
}
.nav-dropdown-toggle::after {
  content: " ▾";
  font-size: 0.7em;
  opacity: 0.6;
}
.nav-dropdown-toggle:hover {
  color: var(--cream);
}
.nav-dropdown-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  transform: none;
  min-width: 140px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 0.4rem 0;
  list-style: none;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
  z-index: 300;
}
.nav-dropdown:hover .nav-dropdown-menu,
.nav-dropdown-toggle[aria-expanded="true"] + .nav-dropdown-menu {
  display: block;
}
.nav-dropdown-menu a {
  display: block;
  padding: 0.5rem 1rem;
  font-size: 0.85rem;
  color: var(--cream);
  white-space: nowrap;
}
.nav-dropdown-menu a:hover {
  background: rgba(184, 148, 92, 0.1);
}

/* ── App subheader (appears below site-header on app pages) ──── */
.app-subheader {
  position: fixed;
  top: var(--nav-height);
  left: 0;
  right: 0;
  z-index: 190;
  height: 2.5rem;
  display: flex;
  align-items: center;
  background: var(--rosewood);
  border-bottom: 1px solid var(--border);
}
.app-subheader .container {
  display: flex;
  align-items: center;
  gap: 2rem;
}
.app-subheader-name {
  font-family: var(--font-display);
  font-size: 1.5rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--cream);
  text-decoration: none;
  font-weight: 700;
  flex-shrink: 0;
}
.app-subheader-links {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  list-style: none;
  margin-left: auto;
}
.app-subheader-links a {
  font-size: 0.8rem;
  color: var(--text-secondary);
  transition: color var(--dur) var(--ease);
}
.app-subheader-links a:hover {
  color: var(--cream);
}

/* ── Subheader quote rotator ─────────────────────────────────────
   Generic — works for any app microsite that renders .subheader-quote
   in its header partial. Items crossfade on a JS-driven cycle.    */
.subheader-quote {
  flex: 1;
  position: relative;
  overflow: hidden;
  height: 1.1em;
  /* Hidden on mobile; the whole .app-subheader is display:none there */
}
.subheader-quote-item {
  position: absolute;
  left: 0;
  right: 0;
  text-align: center;
  font-style: italic;
  font-size: 0.8rem;
  letter-spacing: 0.01em;
  color: var(--fret);
  opacity: 0;
  transition: opacity 1s ease;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 0 0.5rem;
  pointer-events: none;
}
.subheader-quote-item.sq-active {
  opacity: 1;
}
.sq-attr {
  color: var(--text-secondary);
  font-size: 0.88em;
}

/* Push content down on pages with the app subheader */
.has-app-subheader .hero {
  padding-top: calc(var(--nav-height) + 2.5rem + 3rem);
}
.has-app-subheader .page-hero {
  padding-top: calc(var(--nav-height) + 2.5rem + 4rem);
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 1.75rem;
  list-style: none;
  margin-left: auto;
}
.nav-links a {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--text-secondary);
  letter-spacing: 0.03em;
  transition: color var(--dur) var(--ease);
}
.nav-links a:hover {
  color: var(--cream);
}

.nav-cta {
  flex-shrink: 0;
}
.nav-cta .btn {
  padding: 0.55rem 1.25rem;
  font-size: 0.85rem;
}

.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 36px;
  height: 36px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
  margin-left: auto;
}
.nav-toggle span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--cream);
  border-radius: 2px;
  transition: all var(--dur) var(--ease);
  transform-origin: center;
}
.nav-toggle.open span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.nav-toggle.open span:nth-child(2) {
  opacity: 0;
  transform: scaleX(0);
}
.nav-toggle.open span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* ================================================================
   HERO
   ================================================================ */
.hero {
  min-height: 100svh;
  display: flex;
  align-items: center;
  padding-top: calc(var(--nav-height) + 3rem);
  padding-bottom: var(--section-pad);
  position: relative;
  overflow: hidden;
  background-color: var(--bg);
  background-image:
    var(--texture),
    radial-gradient(ellipse 80% 55% at 5% 70%, rgba(184, 148, 92, 0.14) 0%, transparent 60%),
    radial-gradient(ellipse 60% 50% at 95% 10%, rgba(242, 199, 89, 0.07) 0%, transparent 55%);
}

/* Two-column layout: text left, device screenshot right */
.hero-inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: 3rem;
  align-items: center;
  width: 100%;
  position: relative;
  z-index: 1;
}
@media (min-width: 960px) {
  .hero-inner {
    grid-template-columns: 1fr auto;
    gap: 5rem;
  }
}

/* Mobile-first: centered hero content */
.hero-content {
  position: relative;
  text-align: center;
}

.hero-actions {
  justify-content: center;
}
.hero-footnote {
  text-align: center;
}

/* Switch to left-aligned on larger screens */
@media (min-width: 640px) {
  .hero-content {
    text-align: left;
  }
  .hero-actions {
    justify-content: flex-start;
  }
  .hero-footnote {
    text-align: left;
  }
}

/* Device screenshots — hidden on mobile, two side-by-side frames at 960px+ */
.hero-device {
  display: none;
}
@media (min-width: 960px) {
  .hero-device {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    flex-shrink: 0;
  }
  .hero-device-frame img {
    height: min(65svh, 500px);
    width: auto;
    border-radius: var(--radius-xl);
    border: 1px solid rgba(184, 148, 92, 0.3);
    box-shadow:
      0 0 60px rgba(242, 199, 89, 0.12),
      0 24px 60px rgba(0, 0, 0, 0.5);
    display: block;
  }
  /* Stagger: second screenshot drops down for a cascading look */
  .hero-device-frame:nth-child(2) {
    margin-top: 3.5rem;
  }
}

/* Ambient tracking dots — drift upward and fade in/out against hero bg */
.ambient-dot {
  position: absolute;
  left: var(--x, 50%);
  top: var(--y, 50%);
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--dot-core);
  pointer-events: none;
  z-index: 0;
  animation: ambient-drift var(--dur, 6s) ease-in-out var(--delay, 0s) infinite;
}
.ambient-dot::after {
  content: "";
  position: absolute;
  inset: -8px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(242, 199, 89, 0.42) 0%, transparent 68%);
}
@keyframes ambient-drift {
  0% {
    opacity: 0;
    transform: translateY(0);
  }
  18% {
    opacity: 0.85;
  }
  72% {
    opacity: 0.6;
  }
  100% {
    opacity: 0;
    transform: translateY(-32px);
  }
}

.hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--dot-core);
  margin-bottom: 1.75rem;
  padding: 0.42rem 1rem;
  background: rgba(242, 199, 89, 0.1);
  border: 1px solid rgba(242, 199, 89, 0.28);
  border-radius: var(--radius-full);
}
.hero-eyebrow::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--dot-core);
  box-shadow: 0 0 8px var(--dot-glow);
  flex-shrink: 0;
}

.hero h1 {
  font-size: clamp(2rem, 8vw, 6rem);
  letter-spacing: 0.06em;
  line-height: 0.98;
  margin-bottom: 1.5rem;
}

/* Warm brass-to-amber gradient text — matches dot/tracking palette */
.gradient-text {
  background: linear-gradient(135deg, var(--cream) 0%, var(--brass) 45%, var(--dot-core) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.hero-tagline {
  font-family: var(--font);
  font-size: clamp(1rem, 2.5vw, 1.25rem);
  color: var(--text-secondary);
  line-height: 1.6;
  margin-bottom: 2.5rem;
  max-width: 52ch;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
  margin-bottom: 2.5rem;
}

.hero-footnote {
  font-family: var(--font);
  font-size: 0.8rem;
  color: var(--text-muted);
  letter-spacing: 0.03em;
}

/* ================================================================
   DEMO VIDEO
   ================================================================ */
.demo-video {
  padding-block: var(--section-pad);
}

.video-wrapper {
  position: relative;
  max-width: 880px;
  margin-inline: auto;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow:
    0 0 0 1px var(--border-mid),
    var(--accent-glow),
    0 60px 100px rgba(0, 0, 0, 0.55);
}
.video-wrapper iframe {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  border: none;
  background: var(--bg-card);
}

.video-placeholder {
  width: 100%;
  aspect-ratio: 16 / 9;
  max-width: 880px;
  margin-inline: auto;
  background: var(--bg-card);
  border: 1px dashed var(--border-mid);
  border-radius: var(--radius-lg);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.25rem;
  color: var(--text-muted);
  text-align: center;
  padding: 2rem;
}
.play-icon {
  width: 72px;
  height: 72px;
  background: var(--accent-dim);
  border: 1px solid var(--accent-border);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.play-icon::after {
  content: "";
  display: block;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 12px 0 12px 22px;
  border-color: transparent transparent transparent var(--brass);
  margin-left: 5px;
}
.video-placeholder p {
  font-size: 0.9rem;
  max-width: none;
}
.video-placeholder code {
  font-size: 0.8rem;
  background: var(--bg-elevated);
  padding: 0.15rem 0.4rem;
  border-radius: 4px;
  color: var(--accent-light);
}

/* ================================================================
   FEATURES / PRICING
   ================================================================ */
.features {
  padding-block: var(--section-pad);
}

.pricing-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  gap: 1.5rem;
  align-items: stretch;
}

.pricing-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 2.25rem;
  display: flex;
  flex-direction: column;
  position: relative;
  transition:
    transform var(--dur) var(--ease),
    border-color var(--dur) var(--ease);
}
.pricing-card:hover {
  transform: translateY(-5px);
  border-color: var(--border-mid);
}

/* Featured card: warm amber border + faint glow */
.pricing-card.featured {
  border-color: var(--accent-border);
  background: linear-gradient(160deg, rgba(184, 148, 92, 0.1) 0%, var(--bg-card) 55%);
  box-shadow: var(--accent-glow);
}
.pricing-card.featured:hover {
  border-color: var(--brass);
}

.popular-tag {
  position: absolute;
  top: -1px;
  right: 1.75rem;
  font-family: var(--font);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.3rem 0.9rem;
  background: linear-gradient(135deg, var(--brass), var(--dot-core));
  color: var(--grain-dark);
  border-radius: 0 0 var(--radius) var(--radius);
}

.tier-badge {
  display: inline-block;
  font-family: var(--font);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.28rem 0.8rem;
  border-radius: var(--radius-full);
  margin-bottom: 1.75rem;
}
.tier-free {
  background: var(--bg-elevated);
  color: var(--text-muted);
}
.tier-pro {
  background: var(--accent-dim);
  color: var(--accent-light);
  border: 1px solid var(--accent-border);
}
.tier-creator {
  background: linear-gradient(135deg, var(--brass), var(--dot-core));
  color: var(--grain-dark);
}

.pricing-price {
  margin-bottom: 0.25rem;
}
.price-amount {
  font-family: var(--font-display);
  font-size: 2.8rem;
  letter-spacing: 0.04em;
  line-height: 1;
  color: var(--cream);
}
.price-period {
  font-size: 0.875rem;
  color: var(--text-muted);
  margin-left: 0.2rem;
}

.pricing-name {
  font-size: 1.35rem;
  margin-bottom: 0.4rem;
}
.pricing-desc {
  font-family: var(--font);
  font-size: 0.9rem;
  color: var(--text-secondary);
  line-height: 1.5;
  margin-bottom: 1.75rem;
}

.pricing-features {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  margin-bottom: 2rem;
  flex: 1;
}
.pricing-features li {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  font-family: var(--font);
  font-size: 0.875rem;
  color: var(--text-secondary);
  line-height: 1.45;
}
.pricing-features li::before {
  content: "";
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  margin-top: 1px;
  background: var(--accent-dim);
  border-radius: 50%;
  /* Checkmark using brass/amber colour */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpolyline points='3,8 6,11 13,5' stroke='%23B8945C' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' fill='none'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 11px;
}

.pricing-card .btn {
  width: 100%;
  justify-content: center;
  margin-top: auto;
}

/* Coming-soon overlay — used on the Creator tier card */
.coming-soon-region {
  position: relative;
  flex: 1;
  overflow: hidden;
  margin-bottom: 1.5rem;
}
.coming-soon-region .pricing-features {
  margin-bottom: 0;
  pointer-events: none;
  user-select: none;
}
/* Gradient veil: transparent at top → fully opaque at bottom */
.coming-soon-veil {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, transparent 0%, transparent 15%, var(--rosewood) 80%);
}

/* "In Development" badge */
.coming-soon-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  padding: 0.65rem 1.25rem;
  border-radius: var(--radius-full);
  border: 1px solid var(--accent-border);
  background: var(--accent-dim);
  font-family: var(--font);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent-light);
  margin-top: auto;
}
/* Pulsing amber dot */
.coming-soon-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--dot-core);
  flex-shrink: 0;
  animation: cs-pulse 2.2s ease-in-out infinite;
}
@keyframes cs-pulse {
  0%,
  100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.4;
    transform: scale(0.75);
  }
}

/* ================================================================
   HOW IT WORKS
   ================================================================ */
.how-it-works {
  padding-block: var(--section-pad);
}

.steps-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.5rem;
  position: relative;
}

/* Fret-wire connector between step cards on desktop */
@media (min-width: 768px) {
  .steps-grid::before {
    content: "";
    position: absolute;
    top: 3.25rem;
    left: calc(33.33% - 0.5rem);
    right: calc(33.33% - 0.5rem);
    height: 1px;
    background: linear-gradient(
      90deg,
      transparent,
      var(--accent-border) 20%,
      var(--accent-border) 80%,
      transparent
    );
    pointer-events: none;
    z-index: 0;
  }
}

.step-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 2rem;
  position: relative;
  z-index: 1;
  transition:
    border-color var(--dur) var(--ease),
    transform var(--dur) var(--ease);
}
.step-card:hover {
  border-color: var(--accent-border);
  transform: translateY(-4px);
}

.step-number {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  background: var(--accent-dim);
  border: 1px solid var(--accent-border);
  border-radius: 50%;
  font-family: var(--font);
  font-size: 0.78rem;
  font-weight: 800;
  color: var(--brass);
  margin-bottom: 1.5rem;
}

.step-img-placeholder {
  width: 100%;
  aspect-ratio: 9 / 16;
  max-height: 220px;
  background: var(--bg-elevated);
  border-radius: var(--radius);
  border: 1px dashed var(--border-mid);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  margin-bottom: 1.5rem;
  color: var(--text-muted);
  font-size: 0.75rem;
  text-align: center;
  padding: 1rem;
}
.step-img-icon {
  font-size: 2rem;
  opacity: 0.35;
}
.step-img-dim {
  font-size: 0.68rem;
  opacity: 0.45;
}

.step-card h3 {
  font-size: 1.15rem;
  margin-bottom: 0.45rem;
}
.step-card p {
  font-family: var(--font);
  font-size: 0.9rem;
  color: var(--text-secondary);
  line-height: 1.6;
}

/* ================================================================
   GALLERY / SCREENSHOTS
   ================================================================ */
.gallery {
  padding-block: var(--section-pad);
}

.screenshot-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(155px, 1fr));
  gap: 1rem;
}

.screenshot-item {
  aspect-ratio: 9 / 19.5;
  background: var(--bg-card);
  border-radius: var(--radius);
  border: 1px dashed var(--border-mid);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  color: var(--text-muted);
  font-size: 0.78rem;
  text-align: center;
  padding: 1rem;
  transition:
    border-color var(--dur) var(--ease),
    background var(--dur) var(--ease);
  cursor: default;
}
.screenshot-item:hover {
  border-color: var(--accent-border);
  background: var(--accent-dim);
}
.shot-icon {
  font-size: 1.5rem;
  opacity: 0.28;
}
.shot-label {
  font-family: var(--font);
  font-weight: 600;
  color: var(--text-secondary);
}
.shot-dim {
  font-size: 0.68rem;
  opacity: 0.45;
}

/* ================================================================
   FAQ PREVIEW
   ================================================================ */
.faq-preview {
  padding-block: var(--section-pad);
}

.faq-preview-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
  gap: 1.25rem;
  margin-bottom: 3rem;
}

.faq-card {
  display: block;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.75rem;
  text-decoration: none;
  color: inherit;
  transition: all var(--dur) var(--ease);
}
.faq-card:hover {
  border-color: var(--accent-border);
  background: linear-gradient(135deg, rgba(184, 148, 92, 0.08), var(--bg-card));
  transform: translateY(-2px);
  color: inherit;
}
.faq-card h3 {
  font-family: var(--font);
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 0.5rem;
  line-height: 1.4;
}
.faq-card p {
  font-size: 0.875rem;
  color: var(--text-secondary);
  line-height: 1.5;
  max-width: none;
}
.faq-card .arrow {
  display: inline-block;
  margin-top: 0.75rem;
  font-size: 0.8rem;
  color: var(--brass);
  font-weight: 600;
  letter-spacing: 0.02em;
}

.faq-cta {
  text-align: center;
}

/* ================================================================
   PAGE HERO (FAQ / Contact interior pages)
   ================================================================ */
.page-hero {
  padding-top: calc(var(--nav-height) + 4rem);
  padding-bottom: 3.5rem;
  background-color: var(--bg);
  background-image:
    var(--texture),
    radial-gradient(ellipse 70% 50% at 20% 60%, rgba(184, 148, 92, 0.1) 0%, transparent 55%);
  border-bottom: 1px solid var(--border);
}

.page-hero h1 {
  font-size: clamp(2rem, 5vw, 3.5rem);
}
.page-hero p {
  font-family: var(--font);
  color: var(--text-secondary);
  font-size: 1.05rem;
  margin-top: 0.75rem;
}

/* ================================================================
   FAQ PAGE CONTENT
   ================================================================ */
.faq-content {
  max-width: 720px;
  margin-inline: auto;
  padding-block: 4rem;
}

.faq-item {
  border-bottom: 1px solid var(--border);
  padding-block: 2rem;
}
.faq-item:first-child {
  padding-top: 0;
}
.faq-item:last-child {
  border-bottom: none;
}

.faq-item h3 {
  font-family: var(--font);
  font-size: 1rem;
  font-weight: 600;
  color: var(--cream);
  margin-bottom: 0.85rem;
}
.faq-item p,
.faq-item ul,
.faq-item ol {
  font-size: 0.93rem;
  color: var(--text-secondary);
  line-height: 1.75;
}
.faq-item ul,
.faq-item ol {
  padding-left: 1.25rem;
  margin-top: 0.5rem;
}
.faq-item li {
  margin-bottom: 0.3rem;
}
.faq-item strong {
  color: var(--cream);
  font-weight: 600;
}

/* ================================================================
   CONTACT PAGE
   ================================================================ */
.contact-content {
  max-width: 640px;
  margin-inline: auto;
  padding-block: 4rem 6rem;
}

.contact-form {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.form-label {
  font-size: 0.83rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.form-input,
.form-select,
.form-textarea {
  background: var(--bg-input);
  border: 1px solid var(--border-mid);
  border-radius: var(--radius);
  padding: 0.875rem 1rem;
  font-family: var(--font);
  font-size: 0.975rem;
  color: var(--text-primary);
  width: 100%;
  -webkit-appearance: none;
  appearance: none;
  transition:
    border-color var(--dur) var(--ease),
    box-shadow var(--dur) var(--ease),
    background var(--dur) var(--ease);
}
.form-select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpolyline points='4,6 8,10 12,6' stroke='%236b4e2e' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' fill='none'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  background-size: 16px;
  padding-right: 2.75rem;
  cursor: pointer;
}
.form-select option {
  background: var(--rosewood);
  color: var(--cream);
}
.form-textarea {
  resize: vertical;
  min-height: 160px;
  line-height: 1.6;
}

.form-input:focus,
.form-select:focus,
.form-textarea:focus {
  outline: none;
  border-color: var(--accent-border);
  box-shadow: 0 0 0 3px rgba(184, 148, 92, 0.13);
  background: var(--bg-elevated);
}
.form-input::placeholder,
.form-textarea::placeholder {
  color: var(--text-muted);
}

.form-submit-wrap {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}
.form-note {
  font-size: 0.8rem;
  color: var(--text-muted);
}

/* ================================================================
   FOOTER
   ================================================================ */
.site-footer {
  background-color: var(--rosewood);
  background-image: var(--texture);
  border-top: 1px solid var(--border);
  padding-block: 3.5rem 2.5rem;
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: 3rem;
  margin-bottom: 3rem;
}

.footer-brand {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}

.footer-logo {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 400;
  letter-spacing: 0.1em;
  color: var(--cream);
  text-decoration: none;
}
/* wordmark is uniform cream */

.footer-tagline {
  font-family: var(--font);
  font-size: 0.875rem;
  color: var(--text-muted);
  line-height: 1.55;
  max-width: 30ch;
}

.footer-social {
  display: flex;
  gap: 1rem;
  align-items: center;
}
.footer-social-link {
  display: flex;
  align-items: center;
  color: var(--text-muted);
  transition: color var(--dur) var(--ease);
}
.footer-social-link:hover {
  color: var(--accent);
}
.footer-social-link svg {
  width: 18px;
  height: 18px;
}

.footer-nav-cols {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2rem;
}

.footer-nav-col h4 {
  font-family: var(--font);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 1rem;
}
.footer-nav-col ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}
.footer-nav-col a {
  font-family: var(--font);
  font-size: 0.875rem;
  color: var(--text-secondary);
  text-decoration: none;
  transition: color var(--dur) var(--ease);
}
.footer-nav-col a:hover {
  color: var(--cream);
}

.footer-bottom {
  padding-top: 2rem;
  border-top: 1px solid var(--border);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}
.footer-copyright {
  font-size: 0.78rem;
  color: var(--text-muted);
}
.footer-copyright a {
  color: var(--text-muted);
}
.footer-copyright a:hover {
  color: var(--cream);
}

/* ================================================================
   HERO MARK (hand icon above wordmark, matching app splash screen)
   ================================================================ */
.hero-mark {
  display: flex;
  justify-content: center;
  margin-bottom: 2rem;
}
.hero-hand {
  width: 72px;
  height: 72px;
  color: var(--brass);
  filter: drop-shadow(0 0 14px rgba(184, 148, 92, 0.45));
}

@media (min-width: 640px) {
  .hero-mark {
    justify-content: flex-start;
  }
}

/* ================================================================
   GESTURE CARD (How It Works — matches in-app tutorial)
   ================================================================ */

/* Container: mimics the app's single rounded card with rows */
.gesture-card {
  background-color: var(--bg-card);
  background-image: var(--texture);
  border: 1px solid var(--border-mid);
  border-radius: var(--radius-lg);
  overflow: hidden;
  max-width: 560px;
  width: 100%;
}

/* On larger screens: card sits alongside intro text */
.hiw-inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: 3rem;
  align-items: center;
}

@media (min-width: 900px) {
  .hiw-inner {
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
  }
  .gesture-card {
    max-width: none;
  }
}

.gesture-row {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  padding: 1.6rem 1.75rem;
  border-bottom: 1px solid var(--border);
  transition: background var(--dur) var(--ease);
}
.gesture-row:last-child {
  border-bottom: none;
}
.gesture-row:hover {
  background: rgba(184, 148, 92, 0.05);
}

.gesture-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  flex-shrink: 0;
  background: var(--accent-dim);
  border: 1px solid var(--accent-border);
  border-radius: var(--radius);
  color: var(--brass);
}
.gesture-icon svg {
  width: 26px;
  height: 26px;
}

.gesture-text {
}
.gesture-label {
  font-family: var(--font);
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--brass);
  margin-bottom: 0.2rem;
}
.gesture-desc {
  font-family: var(--font);
  font-size: 0.9rem;
  color: var(--text-secondary);
  line-height: 1.45;
  max-width: none;
}

/* ================================================================
   SCROLL REVEAL
   ================================================================ */
[data-reveal] {
  opacity: 0;
  transform: translateY(22px);
  transition:
    opacity var(--dur-slow) var(--ease),
    transform var(--dur-slow) var(--ease);
}
[data-reveal].visible {
  opacity: 1;
  transform: none;
}

/* ================================================================
   FOCUS / ACCESSIBILITY
   ================================================================ */
:focus-visible {
  outline: 2px solid var(--brass);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ================================================================
   BLOG — list page
   ================================================================ */
.blog-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 2rem;
  padding-top: 0.5rem;
}

.post-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 2rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  transition:
    border-color var(--dur) var(--ease),
    transform var(--dur) var(--ease);
}
.post-card:hover {
  border-color: var(--border-mid);
  transform: translateY(-3px);
}

.post-meta {
  font-family: var(--font);
  font-size: 0.8rem;
  color: var(--text-muted);
  letter-spacing: 0.03em;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  flex-wrap: wrap;
}
.post-author {
  color: var(--text-muted);
}

.post-card-title {
  font-size: 1.25rem;
  line-height: 1.25;
  margin: 0;
}
.post-card-title a {
  color: var(--cream);
}
.post-card-title a:hover {
  color: var(--accent-light);
}

.post-card-excerpt {
  font-family: var(--font);
  font-size: 0.9rem;
  color: var(--text-secondary);
  line-height: 1.55;
  flex: 1;
}

.post-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}
.post-tag {
  font-family: var(--font);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.2rem 0.65rem;
  border-radius: var(--radius-full);
  background: var(--accent-dim);
  color: var(--accent-light);
  border: 1px solid var(--accent-border);
}

.post-read-more {
  font-family: var(--font);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--brass);
  margin-top: 0.25rem;
  align-self: flex-start;
}
.post-read-more:hover {
  color: var(--dot-core);
}

/* ================================================================
   BLOG — single post
   ================================================================ */
.post-header {
  max-width: 720px;
}
.post-header h1 {
  margin-top: 0.75rem;
}

.post-footer {
  max-width: 720px;
  margin-top: 4rem;
  padding-top: 2rem;
  border-top: 1px solid var(--border);
}

/* Prose — typographic styles for Markdown post content */
.prose {
  max-width: 720px;
  font-family: var(--font);
  font-size: 1.05rem;
  line-height: 1.75;
  color: var(--text-secondary);
}
.prose > * + * {
  margin-top: 1.4em;
}

.prose h2,
.prose h3,
.prose h4 {
  color: var(--cream);
  margin-top: 2.5em;
  margin-bottom: 0.6em;
  line-height: 1.2;
}
.prose h2 {
  font-size: 1.65rem;
}
.prose h3 {
  font-size: 1.3rem;
}
.prose h4 {
  font-size: 1.05rem;
}

.prose p {
  max-width: none;
}

.prose a {
  color: var(--accent-light);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.prose a:hover {
  color: var(--cream);
}

.prose strong {
  color: var(--cream);
  font-weight: 600;
}
.prose em {
  color: var(--cream);
}

.prose ul,
.prose ol {
  padding-left: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.4em;
}
.prose ul {
  list-style: disc;
}
.prose ol {
  list-style: decimal;
}
.prose li {
  padding-left: 0.25rem;
}

.prose blockquote {
  border-left: 3px solid var(--brass);
  padding: 0.75rem 1.25rem;
  background: var(--accent-dim);
  border-radius: 0 var(--radius) var(--radius) 0;
  color: var(--text-secondary);
  font-style: italic;
}
.prose blockquote p {
  margin-top: 0;
}

.prose code {
  font-family: var(--font-mono);
  font-size: 0.875em;
  background: var(--bg-elevated);
  color: var(--dot-core);
  padding: 0.15em 0.45em;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
}
.prose pre {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.25rem 1.5rem;
  overflow-x: auto;
}
.prose pre code {
  background: none;
  border: none;
  padding: 0;
  font-size: 0.9em;
  color: var(--cream);
}

.prose hr {
  border: none;
  border-top: 1px solid var(--border-mid);
  margin-block: 2.5em;
}

.prose img {
  border-radius: var(--radius-lg);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
  margin-inline: auto;
}

/* YouTube embeds inside prose get the same treatment as the home page video */
.prose .video-wrapper {
  margin-top: 2rem;
  margin-bottom: 2rem;
}

/* ================================================================
   RESPONSIVE
   ================================================================ */
@media (max-width: 767px) {
  :root {
    --section-pad: clamp(3.5rem, 8vw, 6rem);
  }

  /* Full-screen mobile nav */
  .nav-links {
    position: fixed;
    top: var(--nav-height);
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--mobile-nav-bg);
    backdrop-filter: blur(20px);
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    padding: 1.5rem;
    border-top: 1px solid var(--border);
    display: none;
    overflow-y: auto;
    z-index: 100;
  }
  .nav-links.open {
    display: flex;
  }
  .nav-links li {
    width: 100%;
  }
  .nav-links a {
    display: block;
    padding: 0.9rem 0;
    font-size: 1.1rem;
    border-bottom: 1px solid var(--border);
  }
  .nav-toggle {
    display: flex;
  }
  .nav-cta {
    display: none;
  }

  /* Mobile dropdown — inline, no flyout */
  .nav-dropdown-menu {
    position: static;
    transform: none;
    background: none;
    border: none;
    box-shadow: none;
    padding: 0 0 0 1rem;
    display: block;
  }
  .nav-dropdown-toggle::after {
    display: none;
  }
  .nav-dropdown-menu a {
    padding: 0.6rem 0;
    font-size: 1rem;
    border-bottom: 1px solid var(--border);
  }

  /* Hide app subheader on mobile — its links are in the main nav */
  .app-subheader {
    display: none;
  }
  .has-app-subheader .hero {
    padding-top: calc(var(--nav-height) + 3rem);
  }
  .has-app-subheader .page-hero {
    padding-top: calc(var(--nav-height) + 4rem);
  }

  /* Hero */
  .hero-actions {
    flex-direction: column;
    align-items: flex-start;
  }

  /* Grids → single column */
  .pricing-grid {
    grid-template-columns: 1fr;
  }
  .steps-grid {
    grid-template-columns: 1fr;
  }
  .footer-grid {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
  .footer-bottom {
    flex-direction: column;
    align-items: flex-start;
  }
  .form-row {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 480px) {
  .screenshot-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .faq-preview-grid {
    grid-template-columns: 1fr;
  }
  .footer-nav-cols {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
}

/* ────────────────────────────────────────────
   Company Home Page
   ──────────────────────────────────────────── */

.company-hero {
  text-align: center;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  padding-top: var(--nav-height);
  padding-bottom: 0; /* override .hero's padding-bottom: var(--section-pad) */
}
/* Fills the space above the quote strip, centering the headline content */
.company-hero-body {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-block: 3rem 5rem;
}
.company-hero-content {
  max-width: 640px;
  margin-inline: auto;
}
.company-hero h1 {
  font-size: clamp(2rem, 5vw, 3.5rem);
}
/* Keep the hero CTA centered regardless of screen width */
.company-hero-actions {
  justify-content: center !important;
  align-items: center !important;
}
/* Quote strip pinned to the bottom of the hero viewport — fixed height */
.company-hero-quotes {
  border-top: 1px solid var(--accent-border);
  padding: 0.65rem 0;
  text-align: center;
  overflow: hidden;
}

.company-products {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 2rem;
  padding-block: 2rem 4rem;
}

.product-card {
  display: block;
  text-decoration: none;
  color: var(--text-primary);
  background: var(--bg-card);
  border: 1px solid var(--accent-border);
  position: relative;
  overflow: hidden;
  border-radius: 1rem;
  padding: 2.5rem 2rem;
  transition:
    border-color 0.25s,
    box-shadow 0.25s;
}
.product-card:hover {
  border-color: var(--accent);
  box-shadow: 0 0 20px var(--accent-dim);
}
.product-card h3 {
  font-family: var(--font-display);
  font-size: 1.6rem;
  margin-bottom: 0.5rem;
}
.product-tagline {
  color: var(--text-secondary);
  font-size: 0.95rem;
  margin-bottom: 1.25rem;
}
.product-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  list-style: none;
  padding: 0;
  margin-bottom: 1.5rem;
}
.product-meta li {
  font-size: 0.75rem;
  color: var(--accent);
  background: var(--accent-dim);
  border: 1px solid var(--accent-border);
  border-radius: 999px;
  padding: 0.25rem 0.75rem;
}
.product-cta {
  color: var(--accent);
  font-size: 0.9rem;
  font-weight: 500;
}
.product-card-coming {
  opacity: 0.5;
  pointer-events: none;
  border-style: dashed;
}

/* ── Home page quote rotator (inside .company-hero-quotes) ────────
   Fixed-height grid: all items stack in one cell; non-active items
   are opacity:0 so only the transition matters, not layout height. */
.home-quote-rotator {
  display: grid;
  height: 3rem; /* fixed — prevents variable-length quotes from inflating the strip */
}
.home-quote-item {
  grid-area: 1 / 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 1.2s ease;
  padding: 0 1rem;
  pointer-events: none;
}
.home-quote-item.sq-active {
  opacity: 1;
  pointer-events: auto;
}
.home-quote-text {
  font-style: italic;
  font-size: clamp(0.85rem, 1.6vw, 0.98rem);
  color: var(--text-primary);
  line-height: 1.4;
  margin-bottom: 0.2rem;
  max-width: 52em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.home-quote-cite {
  display: block;
  font-style: normal;
}
.home-quote-speaker {
  font-family: var(--font-display);
  font-size: 0.7rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--accent);
}
.home-quote-source {
  font-size: 0.7rem;
  color: var(--text-muted);
  margin-left: 0.35em;
}

/* ────────────────────────────────────────────
   Folio Audio brand overrides — main landing page (body.folio-home)
   Swaps Tier 1 + Tier 7–8 tokens to use the company palette instead
   of Prospero's wood-grain theme.
   ──────────────────────────────────────────── */
body.folio-home {
  --bg: var(--folio-ink);
  --bg-card: var(--folio-lead);
  --bg-elevated: #3a3530;
  --text-primary: var(--folio-vellum);
  --text-secondary: #b8a880;
  --text-muted: #6a6050;
  --accent: var(--folio-gilt);
  --accent-light: #d8b860;
  --accent-bright: var(--folio-gilt);
  --accent-dim: rgba(200, 168, 75, 0.14);
  --accent-border: rgba(200, 168, 75, 0.35);
  --dot-core: var(--folio-gilt);
  --dot-glow: var(--folio-gilt);
  --nav-bg: rgba(13, 10, 7, 0.88);
  --mobile-nav-bg: rgba(13, 10, 7, 0.98);
  --font-display: "Cinzel", Georgia, serif;
  --texture: var(--tooled-leather);
}

/* Gold-leaf shimmer gradient — three-stop foil effect */
body.folio-home .gradient-text {
  background: linear-gradient(
    135deg,
    #d8c87a 0%,
    var(--folio-gilt) 35%,
    #a87830 65%,
    #d4b85a 100%
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ── Folio home hero — richer gilt/wax/verde radial background ─── */
body.folio-home .hero {
  background-image:
    var(--texture),
    radial-gradient(ellipse 75% 55% at 8% 80%, rgba(122, 30, 46, 0.14) 0%, transparent 65%),
    radial-gradient(ellipse 60% 50% at 92% 8%, rgba(200, 168, 75, 0.13) 0%, transparent 55%),
    radial-gradient(ellipse 55% 40% at 50% 110%, rgba(28, 56, 40, 0.10) 0%, transparent 50%);
}

/* ── Elizabethan product cards ──────────────────────────────────── */

/* Prospero — wood-grain and brass, matching the microsite aesthetic */
body.folio-home a.product-card {
  background: radial-gradient(ellipse at 35% 25%, #3a2215 0%, #160a04 100%);
  border: 1px solid rgba(184, 148, 92, 0.4);
  border-top: 2px solid #b8945c;
  border-radius: 0.375rem;
}
body.folio-home a.product-card:hover {
  border-color: rgba(184, 148, 92, 0.8);
  border-top-color: #f2c759;
  box-shadow: 0 4px 40px rgba(184, 148, 92, 0.18), 0 0 60px rgba(242, 199, 89, 0.07);
}

/* Coming soon — green leather (placeholder, 4th card) */
body.folio-home .product-card-coming {
  background: radial-gradient(ellipse at 35% 25%, #0e2318 0%, #050c08 100%);
  border: 1px solid rgba(28, 56, 40, 0.55);
  border-top: 2px solid var(--folio-verde);
  border-radius: 0.375rem;
}

/* ── Named preview cards — Caliban + Hecate ─────────────────────── */

/* Preview cards: less faded than the generic coming-soon placeholder */
.product-card-preview {
  opacity: 0.82;
  pointer-events: none;
  cursor: default;
}

/* Diagonal ribbon banner */
.coming-banner {
  position: absolute;
  top: 30px;
  right: -42px;
  width: 170px;
  background: var(--folio-gilt);
  color: var(--folio-ink);
  font-family: var(--font);
  font-size: 0.55rem;
  font-weight: 900;
  letter-spacing: 0.2em;
  text-align: center;
  padding: 6px 0;
  transform: rotate(45deg);
  pointer-events: none;
  z-index: 1;
}

/* Caliban — earthy dark-olive, Pirata One */
body.folio-home .product-card--caliban {
  background: radial-gradient(ellipse at 35% 25%, var(--caliban-earth) 0%, var(--caliban-deep) 100%);
  border: 1px solid var(--caliban-border);
  border-top: 2px solid var(--caliban-bronze);
  border-radius: 0.375rem;
}
body.folio-home .product-card--caliban h3 {
  font-family: var(--caliban-font);
  font-size: 2.2rem;
  text-transform: uppercase;
  letter-spacing: -0.05em;
}

/* Hecate — deep violet, Almendra */
body.folio-home .product-card--hecate {
  background: radial-gradient(ellipse at 35% 25%, var(--hecate-shadow) 0%, var(--hecate-deep) 100%);
  border: 1px solid var(--hecate-border);
  border-top: 2px solid var(--hecate-amethyst);
  border-radius: 0.375rem;
}
body.folio-home .product-card--hecate h3 {
  font-family: var(--hecate-font);
  font-weight: 700;
  font-size: 2rem;
  letter-spacing: 0.04em;
}

/* Prospero card — Poiret One all-caps */
body.folio-home .product-card--prospero h3 {
  font-family: "Poiret One", sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  font-size: 1.6rem;
}

/* Ornamental flanking diamonds on the Products section label */
body.folio-home .section-label {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
}
body.folio-home .section-label::before,
body.folio-home .section-label::after {
  content: "◆";
  font-size: 0.45em;
  color: var(--folio-gilt);
  opacity: 0.8;
  display: inline-block;
}

/* ────────────────────────────────────────────
   Prospero microsite — island aesthetic additions
   ──────────────────────────────────────────── */

/* Smaller headline on Prospero hero — app icon now occupies vertical space */
body.has-app-subheader .hero h1 {
  font-size: clamp(1.5rem, 4.5vw, 3.5rem);
  line-height: 1.05;
}

/* Faint island-sky wash at the top of the Prospero hero */
body.has-app-subheader .hero {
  position: relative;
}
body.has-app-subheader .hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 50% 0%, rgba(26, 42, 61, 0.08) 0%, transparent 60%);
  pointer-events: none;
  z-index: 0;
}

/* App icon display in the hero device column */
.hero-app-icon {
  margin-bottom: 1.5rem;
}
.hero-app-icon img {
  width: 100px;
  height: 100px;
  border-radius: 22%;
  display: block;
}

@media (min-width: 960px) {
  .hero-app-icon img {
    width: 140px;
    height: 140px;
  }
}

/* ================================================================
   DOWNLOADS PAGE
   ================================================================ */

.downloads-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: 2rem;
  padding-block: 1rem 4rem;
}

.download-card {
  background: var(--bg-card);
  border: 1px solid var(--accent-border);
  border-top: 2px solid var(--accent);
  border-radius: 0.5rem;
  padding: 2rem;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.download-card-identity {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.download-card-icon {
  border-radius: 20%;
  flex-shrink: 0;
}

.download-card-name {
  font-family: var(--font-display);
  font-size: 1.5rem;
  margin: 0;
}

.download-card-platform {
  font-size: 0.8rem;
  color: var(--text-muted);
  margin: 0.2rem 0 0;
  letter-spacing: 0.04em;
}

.download-card-description {
  color: var(--text-secondary);
  font-size: 0.95rem;
  line-height: 1.6;
  margin: 0;
}

.download-card-meta {
  display: flex;
  gap: 0.75rem;
  align-items: center;
}

.download-card-price {
  font-size: 0.78rem;
  color: var(--accent);
  background: var(--accent-dim);
  border: 1px solid var(--accent-border);
  border-radius: 999px;
  padding: 0.2rem 0.75rem;
}

.download-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  align-self: flex-start;
  margin-top: auto;
}