:root {
  --bg-cream: #FFFAF1;
  --bg-cream-bottom: #FAF1E1;
  --bg-cream-soft: #f5edd6;
  --bg-dark: #1c1c1c;
  --text-dark: #2a2620;
  --text-muted: #7a6f56;
  --text-on-dark: #efe5cb;
  --text-on-dark-muted: #968c7a;
  --accent: #e8c547;
  --rule: rgba(42, 38, 32, 0.18);
  --rule-on-dark: rgba(239, 229, 203, 0.18);

  --serif: "David Libre", Georgia, "Times New Roman", serif;
  --sans: "Nunito Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --container: 1100px;
  --pad-x: clamp(20px, 4vw, 48px);
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { scroll-behavior: smooth; }

html {
  /* Safety net behind the fixed reveal footers if anything ever has a gap */
  background: var(--bg-cream);
  min-width: 280px;
  overflow-x: hidden;
}
body {
  overflow-x: hidden;
}

body {
  font-family: var(--sans);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.55;
  color: var(--text-dark);
  background: transparent;
  /* Make room below the regular content so the user can scroll past it
     and reveal the fixed footers underneath. Matches .page-footers height. */
  padding-bottom: 720px;
  /* Floor on layout width — below this, the page horizontally scrolls
     rather than collapsing further */
  min-width: 280px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* Main is the regular content stack — sits above the fixed footers and
   has an opaque cream bg so the footers are hidden until scroll exposes them. */
main {
  position: relative;
  z-index: 1;
  background: var(--bg-cream);
  min-width: 280px;
}

/* Fixed reveal-footer stack: dark promo footer on top, black copyright row
   on the bottom. Both pinned to the viewport bottom, behind main. */
.page-footers {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 720px;
  z-index: 0;
  display: flex;
  flex-direction: column;
}
.page-footers .watch {
  flex: 1 1 auto;
  min-height: 0;
}
.page-footers .site-footer {
  flex: 1 1 auto;
}

/* Brief subtle fade-in for dark-footer content as user scrolls past
   the main content and the footers are revealed. */
.page-footers .newsletter,
.page-footers .footer-logo,
.page-footers .watch > * {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 700ms ease-out, transform 700ms ease-out;
}
.page-footers.is-revealed .newsletter,
.page-footers.is-revealed .footer-logo,
.page-footers.is-revealed .watch > * {
  opacity: 1;
  transform: translateY(0);
}

img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }

h1, h2, h3 {
  font-family: var(--serif);
  font-weight: 400;
  letter-spacing: -0.005em;
  line-height: 1.15;
  margin: 0;
}

h1 { font-size: clamp(2.5rem, 6.5vw, 4.25rem); /* caps at 68px on desktop */ }
h2 { font-size: clamp(1.75rem, 4vw, 2.5rem); }
h3 { font-size: clamp(1.05rem, 1.6vw, 1.2rem); font-weight: 500; }

p { margin: 0; }

/* ---------- Header ---------- */
.site-header {
  display: flex;
  justify-content: center;
  padding: 52px var(--pad-x) 8px;
}
.brand-logo {
  height: 36px;
  width: auto;
  display: block;
}

/* ---------- Hero ---------- */
.hero {
  text-align: center;
  padding: 32px 0 0;
  overflow-x: clip;
}
.hero-text {
  margin: 0 auto;
  padding: 0 var(--pad-x);
}
.hero h1 {
  white-space: nowrap;
}
@media (max-width: 600px) {
  .hero h1 {
    white-space: normal;
  }
}
.svg-defs {
  position: absolute;
  width: 0;
  height: 0;
  pointer-events: none;
}

/* Announcement strip at the very top of the page */
.announcement-bar {
  position: relative;
  z-index: 1;
  min-height: 60px;
  min-width: 280px;
  background: #F3E9D5;
  color: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px var(--pad-x);
  font-size: 0.95rem;
  text-align: center;
}
.announcement-bar p {
  margin: 0;
  text-wrap: pretty;
}
.announcement-bar .no-break {
  white-space: nowrap;
}
@media (max-width: 400px) {
  .announcement-bar .no-break {
    white-space: normal;
  }
}
/* "get in touch" link — always together, underlined, darkens on hover */
.announcement-bar .get-in-touch {
  white-space: nowrap;
  color: inherit;
  text-decoration: underline;
  transition: color 0.15s ease;
}
.announcement-bar .get-in-touch:hover {
  color: rgba(0, 0, 0, 0.85);
}

/* Top of site through the carousel sits on a subtle gradient.
   Top color is a warm cream — lighter than the announcement bar (so the
   bar still reads as distinct) but warm enough that the area around the
   header logo doesn't read as white.
   Below this wrapper, the CTA "footer" panel and onwards use solid cream. */
.page-gradient {
  background: linear-gradient(180deg, var(--bg-cream) 0%, var(--bg-cream-bottom) 100%);
}
.lede {
  margin: 18px auto 0;
  max-width: 460px;
  font-size: 0.95rem;
  color: var(--text-muted);
  line-height: 1.4;
  text-wrap: pretty;
}
.store-badges {
  display: flex;
  gap: 10px;
  justify-content: center;
  margin-top: 28px;
}

.store-badge {
  display: inline-block;
  height: 60px;
  transition: transform 0.15s ease, opacity 0.15s ease;
}
.store-badge img {
  height: 100%;
  width: auto;
  display: block;
}
.store-badge:hover { transform: translateY(-1px); opacity: 0.92; }

/* Hero image: superellipse, max 800px → expands past viewport on scroll */
.hero-image-wrap {
  --p: 0;
  --scroll: 0;
  --w-start: min(800px, 80vw);
  --w-end: 104vw;
  margin: 56px 0 0;
  width: calc(var(--w-start) + (var(--w-end) - var(--w-start)) * var(--p));
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  will-change: width;
  /* Brief subtle fade-in on first page load */
  animation: hero-initial-fade 900ms ease-out 120ms both;
}
/* Push the final zoom 10% wider on tablet/phone — the image needs more
   visual presence at narrower viewports */
@media (max-width: 768px) {
  .hero-image-wrap {
    --w-end: 124vw;
  }
}
@keyframes hero-initial-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}
.hero-image {
  position: relative;
  aspect-ratio: 16 / 9;
  clip-path: url(#hero-squircle);
  overflow: hidden;
  /* Keep this element on its own compositor layer so the bg image doesn't
     get re-rasterized (causing a flash) when scrolling back into view. */
  transform: translateZ(0);
  backface-visibility: hidden;
}
.hero-image-bg {
  position: absolute;
  left: 0;
  top: -20%;
  width: 100%;
  height: 140%;
  object-fit: cover;
  object-position: center;
  /* Parallax: shift up to 14% of bg height as --scroll goes 0 → 1.
     14% of 140% bg = 19.6% of frame, just under the 20% top buffer. */
  transform: translate3d(0, calc(-14% * var(--scroll, 0)), 0);
  will-change: transform;
}

/* ---------- Carousel ---------- */
.features {
  padding: 100px var(--pad-x) 80px;
}
.carousel {
  position: relative;
  max-width: var(--container);
  margin: 0 auto;
}
.carousel-track {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -ms-overflow-style: none;
  /* Break the inherited html { scroll-behavior: smooth } so JS can fully
     control scroll animation timing/easing. */
  scroll-behavior: auto;
  gap: 0;
}
.carousel-track::-webkit-scrollbar { display: none; }

.slide {
  flex: 0 0 100%;
  scroll-snap-align: center;
  padding: 0 var(--pad-x);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.slide h3 {
  margin-top: 40px;
  font-family: var(--serif);
  font-weight: 400;
  font-size: 1.625rem;
  letter-spacing: -0.005em;
  color: var(--text-dark);
}
.slide p.slide-eyebrow {
  margin: -10px 0 0;
  max-width: none;
  font-size: 10px;
  letter-spacing: 0.1em;
  font-weight: 600;
  line-height: 1.2;
  color: rgba(0, 0, 0, 0.5);
}
.slide p.slide-eyebrow + h3 {
  margin-top: 16px;
}
.slide p {
  margin-top: 10px;
  max-width: 380px;
  font-size: 0.95rem;
  color: var(--text-muted);
  line-height: 1.4;
  text-wrap: pretty;
}

.phone {
  display: inline-block;
  height: 500px;
  border-radius: 36px;
  overflow: hidden;
  box-shadow: 0 36px 58px -18px #DCD0BA;
  /* Stack the phone above the chevrons so slides visually pass over them */
  position: relative;
  z-index: 1;
}
.phone-image {
  height: 100%;
  width: auto;
  display: block;
}
/* Watch slide: no rectangular shadow, blend cream pixels into the page,
   image rendered at 80% height for a 20% smaller appearance, centered */
.phone--blend {
  box-shadow: none;
  border-radius: 0;
  overflow: visible;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.phone--blend .phone-image {
  height: 80%;
  width: auto;
  mix-blend-mode: multiply;
}

.carousel-btn {
  position: absolute;
  width: 44px;
  height: 44px;
  /* Hit area only — no visible circle, just the chevron */
  border: none;
  background: transparent;
  color: var(--text-dark);
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: opacity 0.15s ease, transform 0.15s ease;
  opacity: 0.5;
  /* Below the .phone (z-index 1) so slides pass over the chevrons */
  z-index: 0;
}
.carousel-btn:hover {
  opacity: 1;
  transform: translateY(-1px);
}
.carousel-btn svg {
  width: 24px;
  height: 24px;
}
/* Pull the buttons toward the centered phone but leave breathing room,
   with a hard floor so they don't drift off-screen on narrow viewports */
.carousel-btn--prev { left: max(12px, calc(50% - 270px)); }
.carousel-btn--next { right: max(12px, calc(50% - 270px)); }

/* Hide chevrons on small viewports — touch swipe takes over */
@media (max-width: 480px) {
  .carousel-btn { display: none; }
}

.carousel-btn { top: 232px; }
@media (max-width: 600px) {
  .phone { height: 480px; }
  .carousel-btn { top: 222px; }
}
@media (min-width: 720px) {
  .phone { height: 520px; }
  .carousel-btn { top: 242px; }
}
@media (min-width: 1024px) {
  .phone { height: 540px; }
  .carousel-btn { top: 252px; }
}

.carousel-dots {
  display: flex;
  gap: 8px;
  justify-content: center;
  margin-top: 52px;
}
.carousel-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  border: 0;
  padding: 0;
  background: rgba(42, 38, 32, 0.25);
  cursor: pointer;
  transition: background 0.15s ease, transform 0.15s ease;
}
.carousel-dot.is-active {
  background: var(--text-dark);
  transform: scale(1.3);
}

/* ---------- CTA / footer panel ---------- */
.cta {
  position: relative; /* anchor for the absolutely-positioned sound toggle */
  text-align: center;
  padding: 40px var(--pad-x);
  min-height: 600px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.cta h2 {
  max-width: 640px;
  margin: 0 auto;
  font-size: clamp(2rem, 5.5vw, 3.375rem); /* caps at 54px on desktop */
  text-wrap: pretty;
}
@media (max-width: 450px) {
  .cta h2 br { display: none; }
}
.cta p {
  max-width: 460px;
  margin: 18px auto 0;
  font-size: 0.95rem;
  color: var(--text-muted);
  line-height: 1.4;
  text-wrap: pretty;
}
.cta .store-badges { margin-top: 28px; }

/* Below 940px, the CTA panel's footer-credit row and the sound toggle
   stack centrally instead of hugging left/right. The toggle stays
   absolutely positioned at the bottom of the CTA — it just shifts
   from left-aligned to horizontally centered. */
@media (max-width: 940px) {
  .cta {
    padding-top: 80px;
    padding-bottom: 100px;
  }
  .cta .sound-toggle {
    left: 50%;
    transform: translateX(-50%);
  }
  .status-bar {
    flex-direction: column;
    text-align: center;
    gap: 10px;
  }
  .status-bar .status-text,
  .status-bar .status-nav {
    font-size: 0.85rem;
  }
  .announcement-bar p {
    font-size: 0.85rem;
  }
}

/* ---------- Status bar ---------- */
.status-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px var(--pad-x);
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  flex-wrap: wrap;
}
.pill {
  display: inline-block;
  padding: 4px 10px;
  background: var(--accent);
  color: #1a1a1a;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-radius: 999px;
}
.status-text {
  margin: 0;
  font-size: 0.8875rem;
  color: var(--text-muted);
  text-wrap: pretty;
}
.status-text a {
  white-space: nowrap;
}
.status-text-tail {
  white-space: nowrap;
}
.status-text a {
  text-decoration: underline;
  transition: color 0.15s ease;
}
.status-text a:hover {
  color: var(--text-dark);
}
.status-nav {
  display: flex;
  gap: 22px;
  font-size: 0.8875rem;
  color: var(--text-muted);
}
.status-nav a:hover { color: var(--text-dark); }

/* ---------- Dark feature section (fixed reveal footer) ---------- */
.watch {
  background: var(--bg-dark);
  color: var(--text-on-dark);
  text-align: center;
  padding: 40px var(--pad-x);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.watch h2 {
  margin-top: 28px;
  color: var(--text-on-dark);
}
.watch p {
  margin: 14px auto 0;
  max-width: 460px;
  font-size: 0.95rem;
  color: var(--text-on-dark-muted);
  line-height: 1.4;
}
.watch-image {
  height: 280px;
  width: auto;
  display: block;
}

/* ---------- Bottom black footer (fixed reveal) ---------- */
.site-footer {
  background: #000;
  color: #fff;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 56px;
  padding: 60px var(--pad-x);
}
.footer-logo {
  height: 36px;
  width: auto;
  display: block;
  /* Logo is dark on transparent — invert to render light on the black bg */
  filter: invert(1);
}

/* Newsletter signup */
.newsletter {
  width: 100%;
  max-width: 540px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.newsletter-heading {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(1.75rem, 3.5vw, 2.25rem);
  color: var(--bg-cream);
  margin: 0;
}
.newsletter-sub {
  margin: 14px 0 0;
  font-size: 0.95rem;
  color: rgba(255, 255, 255, 0.55);
  line-height: 1.4;
  text-wrap: pretty;
}
.newsletter-form {
  width: 100%;
  max-width: 440px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 14px;
  margin-top: 32px;
}
.newsletter-input {
  width: 100%;
  height: 56px;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.35);
  color: #fff;
  padding: 0 18px;
  font-family: var(--sans);
  font-size: 1rem;
  transition: border-color 0.15s ease;
}
.newsletter-input::placeholder {
  color: rgba(255, 255, 255, 0.35);
}
.newsletter-input:focus {
  outline: none;
  border-color: rgba(255, 255, 255, 0.85);
}
.newsletter-submit {
  width: 100%;
  height: 56px;
  background: #6b6258;
  color: #fff;
  border: none;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-family: var(--sans);
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s ease, opacity 0.15s ease;
}
.newsletter-submit:hover {
  background: #7a7066;
}
.newsletter-submit:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
.newsletter-status {
  margin: 0;
  min-height: 1.4em;
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.6);
}
.newsletter-status.is-success { color: #b6e3b6; }
.newsletter-status.is-error { color: #f0a0a0; }

/* Visually hidden label for accessibility */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ---------- Ambient sound toggle ---------- */
/* Pinned to the bottom-left of the cream CTA panel, just above the
   site-credit status bar. ~10% smaller than the original sketch. */
.sound-toggle {
  position: absolute;
  left: var(--pad-x);
  bottom: 22px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 16px 8px 10px;
  background: #f4e87a;
  border: none;
  border-radius: 999px;
  cursor: pointer;
  font-family: var(--sans);
  font-size: 0.9rem;
  color: #2a2620;
  white-space: nowrap;
}
/* Toggle "track" — the small darker oval inside the pill that the knob lives in */
.sound-toggle-track {
  position: relative;
  width: 32px;
  height: 18px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.08);
  flex-shrink: 0;
}
.sound-toggle-knob {
  position: absolute;
  left: 2px;
  top: 2px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #6f6541;
  transition: left 0.22s ease, background 0.22s ease;
}
.sound-toggle[aria-pressed="true"] .sound-toggle-knob {
  left: 16px;
  background: #2a2620;
}
.sound-toggle-label {
  font-weight: 400;
  letter-spacing: 0.005em;
  opacity: 0.7;
}

/* On narrower viewports, ease the corner offset */
@media (max-width: 600px) {
  .sound-toggle {
    bottom: 16px;
    font-size: 0.85rem;
    padding: 9px 14px 9px 9px;
    gap: 8px;
  }
  .sound-toggle-track { width: 28px; height: 16px; }
  .sound-toggle-knob {
    width: 12px;
    height: 12px;
  }
  .sound-toggle[aria-pressed="true"] .sound-toggle-knob {
    left: 14px;
  }
}

/* ---------- Legal pages (privacy, terms, etc.) ---------- */
.legal-body {
  background: var(--bg-cream);
  padding-bottom: 0;
}
.legal-page {
  max-width: 880px;
  margin: 0 auto;
  padding: 40px var(--pad-x) 96px;
  background: transparent;
}
.legal-content h1 {
  font-size: clamp(1.8rem, 4vw, 2.5rem);
  margin: 0 0 8px;
  line-height: 1.15;
  font-family: var(--serif);
  font-weight: 400;
}
.legal-updated {
  font-style: italic;
  color: var(--text-muted);
  margin: 0 0 32px;
  font-size: 0.95rem;
}
.legal-content h2 {
  font-size: 1.35rem;
  margin: 40px 0 12px;
  font-family: var(--serif);
  font-weight: 400;
  line-height: 1.2;
  color: var(--text-dark);
}
.legal-content p {
  margin: 0 0 16px;
  line-height: 1.6;
  color: var(--text-dark);
  font-size: 1rem;
  text-wrap: pretty;
}
.legal-content a {
  color: inherit;
  text-decoration: underline;
  transition: color 0.15s ease;
}
.legal-content a:hover {
  color: var(--text-muted);
}
.legal-content ul {
  margin: 8px 0 24px;
  padding-left: 22px;
  line-height: 1.6;
}
.legal-content li {
  margin-bottom: 8px;
}
.legal-content strong {
  font-weight: 600;
}
.legal-table {
  width: 100%;
  border-collapse: collapse;
  margin: 8px 0 24px;
  font-size: 0.95rem;
  line-height: 1.5;
}
.legal-table th,
.legal-table td {
  text-align: left;
  padding: 14px 16px;
  border-bottom: 1px solid var(--rule);
  vertical-align: top;
}
.legal-table th:first-child,
.legal-table td:first-child {
  white-space: nowrap;
  width: 1%; /* shrink to content width but no wrapping */
}
.legal-table th {
  background: rgba(0, 0, 0, 0.04);
  font-weight: 600;
  font-size: 0.9rem;
  letter-spacing: 0.02em;
}
.legal-back {
  margin-top: 48px;
  font-size: 0.95rem;
}

/* ---------- Focus styles ---------- */
/* Suppress the default :focus ring (fires on every click) and replace
   it with a subtle box-shadow halo — only when navigating via keyboard.
   Box-shadow naturally follows each element's border-radius, so a
   single base rule covers chevrons, store badges, dots, etc. */
:focus { outline: none; }

:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(108, 90, 60, 0.4);
  transition: box-shadow 0.15s ease;
}

/* Sound toggle sits on yellow — needs a darker halo for contrast */
.sound-toggle:focus-visible {
  box-shadow: 0 0 0 3px rgba(42, 38, 32, 0.45);
}

/* Newsletter form sits on the black footer — needs a light halo */
.newsletter-input:focus-visible,
.newsletter-submit:focus-visible {
  box-shadow: 0 0 0 3px rgba(244, 232, 122, 0.55);
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hero-image-wrap,
  .hero-image {
    transition: none;
  }
}