/* ---- Brand faces, self-hosted. The same three the tablet ships. ---- */
@font-face {
  font-family: "Marcellus";
  src: url("/assets/fonts/marcellus_regular.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Hanken Grotesk";
  src: url("/assets/fonts/hanken_grotesk_regular.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Hanken Grotesk";
  src: url("/assets/fonts/hanken_grotesk_medium.woff2") format("woff2");
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: "Hanken Grotesk";
  src: url("/assets/fonts/hanken_grotesk_semibold.woff2") format("woff2");
  font-weight: 600;
  font-display: swap;
}
@font-face {
  font-family: "Spline Sans Mono";
  src: url("/assets/fonts/spline_sans_mono_regular.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}

:root {
  --night: #07100e;
  --dusk-deep: #0c1714;
  --ink: #22372c;
  --cream: #f1ead8;
  --cream-bg: #ece8db;
  --cream-bg-2: #e7e3d4;
  --gold: #c9a86a;
  --terracotta: #c2603e;
  --terracotta-ink: #a5482a;
  --teal: #2e6e66;

  --display: "Marcellus", Georgia, serif;
  --body: "Hanken Grotesk", -apple-system, BlinkMacSystemFont, sans-serif;
  --mono: "Spline Sans Mono", ui-monospace, SFMono-Regular, monospace;

  /* The one value the whole dark act animates on. */
  --stage: #0c1714;

  /* Theme-independent aliases. --cream/--night/--dusk-deep flip in day
           mode below, so anything that means "literally cream" or "literally
           night" (the overlay scrim, the print's mat, glare highlights) or
           "ink on a gold fill" (buttons, chips) points here instead. Gold
           fills keep --gold in both modes; gold *text* on the stage uses
           --gold-text, which inks down in day mode — bright gold type dies
           on parchment. */
  --cream-fixed: #f1ead8;
  --night-fixed: #07100e;
  --on-gold: #0c1714;
  --gold-text: var(--gold);
  /* Gold type that always lands on parchment, in either mode. */
  --gold-ink: #735526;

  /* One easing curve for the entire page. A hair of ease-out overshoot
           reads as "settling into place" rather than "sliding". */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);

  --gut: clamp(1.25rem, 5vw, 5.5rem);
}

/* ---- Day mode ----
         The tablet's Day palette (tablet/DESIGN.md): deep green ink #22372C
         on warm cream, gold and terracotta accents. The dark act's three
         surfaces invert onto the parchment ramp; the console act is already
         daylight and uses its own literal --ink/--cream-bg tokens, so it
         renders identically in both modes. Set by the head script; no JS
         means night, which is also what the no-preference crawler sees. */
html[data-theme="day"] {
  --night: #e3ddc8;
  --dusk-deep: #f1ead8;
  --cream: #22372c;
  --stage: #f1ead8;
  --on-gold: #22372c;
  --gold-text: #735526;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--dusk-deep);
  color: var(--cream);
  font-family: var(--body);
  font-size: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img,
video {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
}

:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
  border-radius: 2px;
}

section[id],
main[id] {
  scroll-margin-top: 4.5rem;
}

/* ---- Shared type ---- */
.kicker {
  font-family: var(--body);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--gold-text);
  margin: 0;
}

h1,
h2,
h3 {
  /* Marcellus ships one weight. Hierarchy comes from size, never bold. */
  font-family: var(--display);
  font-weight: 400;
  margin: 0;
  letter-spacing: -0.01em;
  line-height: 1.04;
}

h2 {
  font-size: clamp(2rem, 1.2rem + 3.6vw, 4rem);
}

p {
  margin: 0;
}

.lede {
  max-width: 34ch;
  color: color-mix(in srgb, var(--cream) 72%, transparent);
}

.shell {
  max-width: 76rem;
  margin-inline: auto;
  padding-inline: var(--gut);
}

/* ================================================================
         MOTION SYSTEM
         One observer arms everything below the fold. Elements are visible
         by default and only hidden when scripting is alive (.js-anim), so
         a dead script never blanks the page.
         ================================================================ */
@media (prefers-reduced-motion: no-preference) {
  .js-anim [data-reveal] {
    opacity: 0;
    transform: translateY(26px);
  }

  [data-reveal] {
    transition:
      opacity 0.55s var(--ease),
      transform 0.55s var(--ease);
    transition-delay: var(--reveal-delay, 0ms);
  }

  [data-reveal].is-visible {
    opacity: 1;
    transform: none;
  }

  /* Disarmed means the entrance is off, not half-played: drop the
           transition too, so an environment that never advances the
           compositor clock (prerender, some webviews, headless capture)
           lands on the final state instead of a permanent mid-fade. */
  html:not(.js-anim) [data-reveal] {
    transition: none;
  }

  /* Section headlines resolve through a soft gradient mask rather than
           a hard wipe — the letters emerge, they don't slide past an edge. */
  [data-reveal] > h2,
  [data-reveal].is-h2 {
    -webkit-mask-image: linear-gradient(to bottom, #000 38%, transparent 78%);
    mask-image: linear-gradient(to bottom, #000 38%, transparent 78%);
    -webkit-mask-size: 100% 260%;
    mask-size: 100% 260%;
    -webkit-mask-position: 0 100%;
    mask-position: 0 100%;
    transition:
      -webkit-mask-position 0.8s linear,
      mask-position 0.8s linear;
    transition-delay: calc(var(--reveal-delay, 0ms) + 60ms);
  }

  [data-reveal].is-visible > h2,
  [data-reveal].is-visible.is-h2 {
    -webkit-mask-position: 0 0;
    mask-position: 0 0;
  }
}

/* Scroll progress. Two pixels of gold across the top — the only chrome
         that survives the whole page. */
.progress {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 70;
  height: 2px;
  transform: scaleX(0);
  transform-origin: left center;
  background: linear-gradient(
    to right,
    color-mix(in srgb, var(--gold) 35%, transparent),
    var(--gold)
  );
  pointer-events: none;
}

/* ---- Chapter navigation ----
         Phones and tablets get a floating menu button, bottom right, opening
         a touch-sized bottom sheet. Wide screens keep every chapter label
         visible in a quiet right-hand rail instead. The disc carries its own
         dark fill, so it stays legible over cream sections in either theme —
         the failure mode the old masthead "Sections" button had in day mode. */
.nav-fab {
  position: fixed;
  right: max(1rem, env(safe-area-inset-right));
  bottom: max(1rem, env(safe-area-inset-bottom));
  z-index: 76;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border: 1px solid color-mix(in srgb, var(--cream) 18%, transparent);
  border-radius: 50%;
  background: color-mix(in srgb, var(--night) 94%, transparent);
  box-shadow: 0 18px 44px -18px rgba(0, 0, 0, 0.85);
  color: var(--cream);
  cursor: pointer;
  backdrop-filter: blur(12px) saturate(1.1);
  -webkit-backdrop-filter: blur(12px) saturate(1.1);
  transition:
    transform 0.35s var(--ease),
    opacity 0.25s ease,
    border-color 0.35s ease;
}

.nav-fab:hover {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--gold) 45%, transparent);
}

.nav-fab:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
}

.nav-fab__lines {
  position: relative;
  display: block;
  width: 20px;
  height: 14px;
}

.nav-fab__lines span {
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  transition:
    transform 0.35s var(--ease),
    opacity 0.25s ease;
}

.nav-fab__lines span:nth-child(1) {
  top: 0;
}

.nav-fab__lines span:nth-child(2) {
  top: 6px;
}

.nav-fab__lines span:nth-child(3) {
  top: 12px;
}

/* Open sheet: the disc gets out of the way entirely — overlapping
         the sheet's corner read as clutter. Closing is the sheet's job:
         handle tap, swipe down, scrim, or Escape. */
.nav-fab[aria-expanded="true"] {
  opacity: 0;
  transform: translateY(6px) scale(0.85);
  pointer-events: none;
}

.chapter-scrim {
  position: fixed;
  inset: 0;
  z-index: 72;
  display: none;
  border: 0;
  background: color-mix(in srgb, var(--night) 54%, transparent);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  cursor: default;
}

.chapter-scrim.is-open {
  display: block;
}

.spine {
  position: fixed;
  inset: auto 0.75rem 0.75rem;
  z-index: 75;
  display: none;
  flex-direction: column;
  gap: 0.125rem;
  max-width: 30rem;
  max-height: calc(100svh - 1.5rem);
  overflow-y: auto;
  overscroll-behavior: contain;
  margin-inline: auto;
  padding: 0 0.65rem 0.65rem;
  border: 1px solid color-mix(in srgb, var(--cream) 16%, transparent);
  border-radius: 14px;
  background: color-mix(in srgb, var(--night) 96%, transparent);
  box-shadow: 0 24px 70px -24px rgba(0, 0, 0, 0.9);
  color: var(--cream);
  transition: transform 0.35s var(--ease);
}

.spine.is-open {
  display: flex;
}

/* The bottom-sheet grab bar. It's also a real close button, and the
         swipe-down gesture reads it as its natural home. */
.spine__handle {
  position: sticky;
  top: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  min-height: 36px;
  margin: 0 -0.65rem;
  padding: 0.5rem 0 0.45rem;
  border: 0;
  background: color-mix(in srgb, var(--night) 96%, transparent);
  cursor: pointer;
  touch-action: none;
}

.spine__handle span {
  width: 2.5rem;
  height: 4px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--cream) 26%, transparent);
  transition: background 0.3s ease;
}

.spine__handle:hover span,
.spine__handle:focus-visible span {
  background: color-mix(in srgb, var(--cream) 48%, transparent);
}

/* In the sheet, chapters live nested under the current page link —
         the flat dot list is the desktop rail's rendering of the same
         information, so it stays off phones. */
.spine__links {
  display: none;
}

.spine__mode {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 52px;
  margin-top: 0.35rem;
  padding: 0.45rem 0.55rem 0.45rem 0.75rem;
  border: 0;
  border-top: 1px solid color-mix(in srgb, var(--cream) 13%, transparent);
  background: transparent;
  color: color-mix(in srgb, var(--cream) 72%, transparent);
  font: 600 0.875rem/1 var(--body);
  cursor: pointer;
}

.spine__mode-value {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  min-width: 4.75rem;
  min-height: 36px;
  padding-inline: 0.75rem;
  border: 1px solid color-mix(in srgb, var(--gold) 35%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--gold) 10%, transparent);
  color: var(--gold-text);
  font-family: var(--mono);
  font-size: 0.6875rem;
  font-weight: 400;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.spine__mode-value::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 0 4px color-mix(in srgb, currentColor 12%, transparent);
}

.spine__mode:hover,
.spine__mode:focus-visible {
  color: var(--cream);
}

@media (min-width: 68rem) and (min-height: 34rem) {
  .nav-fab,
  .chapter-scrim {
    display: none !important;
  }

  .spine {
    inset: 50% clamp(1rem, 2.2vw, 2rem) auto auto;
    z-index: 55;
    display: flex;
    width: 52px;
    max-width: none;
    max-height: none;
    overflow: visible;
    margin: 0;
    padding: 4px;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    transform: translateY(-50%);
    gap: 0;
    transition: color 0.45s ease;
  }

  .spine__links {
    display: contents;
  }

  .spine::before {
    content: "";
    position: absolute;
    inset: 26px auto 26px 50%;
    width: 1px;
    background: color-mix(in srgb, currentColor 18%, transparent);
    transform: translateX(-50%);
    pointer-events: none;
  }

  .spine:not(.on-cream) {
    text-shadow: 0 1px 10px rgba(7, 16, 14, 0.85);
  }

  .spine.on-cream {
    color: var(--ink);
  }

  .spine__handle {
    display: none;
  }

  .spine__mode {
    display: none;
  }
}

.spine__dot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.7rem;
  width: 100%;
  min-height: 44px;
  background: none;
  border: 0;
  border-radius: 8px;
  padding: 0.6rem 0.75rem;
  cursor: pointer;
  color: inherit;
  font-family: var(--body);
  font-size: 0.9375rem;
  font-weight: 500;
  text-align: left;
}

.spine__label {
  opacity: 0.7;
  white-space: nowrap;
  transition: opacity 0.28s ease;
}

.spine__node {
  width: 6px;
  height: 6px;
  flex: none;
  border-radius: 50%;
  background: transparent;
  box-shadow: 0 0 0 1.5px currentColor;
  opacity: 0.42;
  transition:
    transform 0.4s var(--ease),
    opacity 0.4s ease,
    background-color 0.4s ease,
    box-shadow 0.4s ease;
}

.spine__dot:hover,
.spine__dot:focus-visible,
.spine__dot.is-active {
  background: color-mix(in srgb, var(--gold) 10%, transparent);
}

.spine__dot:hover .spine__label,
.spine__dot:focus-visible .spine__label,
.spine__dot.is-active .spine__label {
  opacity: 1;
}

.spine__dot.is-active .spine__node {
  background: var(--gold);
  box-shadow: 0 0 0 1.5px var(--gold);
  opacity: 1;
}

.spine__dot.is-active .spine__label {
  color: var(--gold-text);
}

@media (min-width: 68rem) and (min-height: 34rem) {
  .spine__dot {
    position: relative;
    justify-content: flex-end;
    width: 44px;
    height: 44px;
    padding: 0;
    border-radius: 0;
    font-size: 0.8125rem;
  }

  .spine__dot:hover,
  .spine__dot:focus-visible,
  .spine__dot.is-active {
    background: transparent;
  }

  .spine__label {
    position: absolute;
    right: calc(100% + 0.55rem);
    padding: 0.45rem 0.65rem;
    border: 1px solid color-mix(in srgb, var(--cream-fixed) 14%, transparent);
    border-radius: 6px;
    background: color-mix(in srgb, var(--night-fixed) 96%, transparent);
    box-shadow: 0 12px 28px -18px rgba(0, 0, 0, 0.85);
    color: var(--cream-fixed);
    opacity: 0;
    transform: translateX(6px);
    pointer-events: none;
    transition:
      opacity 0.22s ease,
      transform 0.3s var(--ease);
  }

  .spine__dot.is-active .spine__label {
    opacity: 0;
  }

  .spine__dot:hover .spine__label,
  .spine__dot:focus-visible .spine__label,
  .spine__dot.is-active:hover .spine__label,
  .spine__dot.is-active:focus-visible .spine__label {
    opacity: 1;
    transform: none;
  }

  .spine__node {
    position: relative;
    z-index: 1;
    width: 7px;
    height: 7px;
    margin-inline: auto;
  }

  .spine__dot.is-active .spine__node {
    transform: scale(1.18);
  }
}

/* ---- Masthead ---- */
.masthead {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.15rem var(--gut);
  font-family: var(--mono);
  font-size: 0.75rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--cream);
  pointer-events: none;
  isolation: isolate;
  transition: color 0.45s ease;
}

/* Over the hero plate there is no scrim yet, so the bar needs its own
         lift. Not over cream, where a dark shadow would look grubby. */
.masthead:not(.on-cream) {
  text-shadow: 0 1px 10px rgba(7, 16, 14, 0.8);
}

/* The bar floats clean over the hero, then earns a scrim once content
         starts passing underneath it. */
.masthead::before {
  content: "";
  position: absolute;
  /* Taller than the bar so the fade has room to resolve; otherwise it
           can't separate the bar from whatever scrolls under it. */
  inset: 0 0 -2.25rem 0;
  z-index: -1;
  opacity: 0;
  transition: opacity 0.45s ease;
  backdrop-filter: blur(7px);
  mask-image: linear-gradient(to bottom, #000 55%, transparent 100%);
  background: linear-gradient(
    to bottom,
    var(--night) 0%,
    color-mix(in srgb, var(--night) 80%, transparent) 58%,
    transparent 100%
  );
}

.masthead.is-stuck::before {
  opacity: 1;
}

/* Over the cream act it has to flip, or it's cream on cream. */
.masthead.on-cream {
  color: var(--ink);
}

.masthead.on-cream::before {
  background: linear-gradient(
    to bottom,
    var(--cream-bg) 0%,
    color-mix(in srgb, var(--cream-bg) 80%, transparent) 58%,
    transparent 100%
  );
}

.masthead a {
  pointer-events: auto;
  text-decoration: none;
}

.masthead__mark {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  min-height: 48px;
  padding: 0.55rem 0.95rem 0.55rem 0.75rem;
  font-family: var(--body);
  font-size: 0.9375rem;
  font-weight: 600;
  text-transform: none;
  letter-spacing: -0.01em;
}

.masthead__glyph {
  display: block;
  width: 25px;
  flex: none;
  transform: translateY(1px);
  transition: transform 0.5s var(--ease);
}

.masthead__glyph svg {
  width: 100%;
  height: auto;
}

/* He looks up when you go back to the top. */
.masthead__mark:hover .masthead__glyph {
  transform: translateY(1px) rotate(-8deg) scale(1.08);
}

/* The one commercial exit that's always in reach. Hidden over the
         hero so the page opens on the story, not a sales bar; it goes to
         the close (which always works) rather than straight to mailto,
         which is a dead click on machines with no mail client. */
.masthead .masthead__cta {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  border-bottom: 1px solid var(--gold);
  padding-block: 0.45rem;
  font-family: var(--body);
  font-size: 0.9375rem;
  font-weight: 600;
  text-transform: none;
  letter-spacing: normal;
  opacity: 0;
  transform: translateY(-4px);
  pointer-events: none;
  transition:
    opacity 0.45s ease,
    transform 0.45s var(--ease),
    color 0.45s ease;
}

.masthead.is-stuck .masthead__cta {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

.masthead__cta:hover {
  color: var(--gold-text);
}

@media (max-width: 48rem) {
  .masthead .masthead__cta {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0.45rem 0;
    opacity: 1;
    transform: none;
    pointer-events: auto;
    white-space: nowrap;
  }

  .masthead {
    gap: 0.75rem;
  }

  .masthead__mark {
    min-height: 44px;
    padding: 0.4rem 0.7rem 0.4rem 0.55rem;
  }
}

/* Two panes of villa glass: identity on the left, the site's own
         navigation and Day/Dusk switch on the right. The rest of the masthead
         stays unboxed so the treatment reads as useful contrast, not
         decorative glassmorphism. */
.masthead__mark,
.masthead__rail {
  border: 1px solid color-mix(in srgb, var(--cream-fixed) 16%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--night-fixed) 62%, transparent);
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--cream-fixed) 13%, transparent),
    0 14px 34px -24px rgba(7, 16, 14, 0.9);
  color: var(--cream-fixed);
  text-shadow: none;
  backdrop-filter: blur(14px) saturate(1.12);
  -webkit-backdrop-filter: blur(14px) saturate(1.12);
  transition:
    color 0.35s ease,
    border-color 0.35s ease,
    background-color 0.35s ease,
    box-shadow 0.35s ease,
    transform 0.4s var(--ease);
}

.masthead__mark:hover {
  border-color: color-mix(in srgb, var(--gold) 44%, transparent);
  background: color-mix(in srgb, var(--night-fixed) 72%, transparent);
  transform: translateY(-1px);
}

.masthead.on-cream .masthead__mark,
.masthead.on-cream .masthead__rail,
html[data-theme="day"] .masthead__mark,
html[data-theme="day"] .masthead__rail {
  border-color: color-mix(in srgb, var(--ink) 13%, transparent);
  background: color-mix(in srgb, var(--cream-fixed) 78%, transparent);
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--cream-fixed) 82%, transparent),
    0 14px 34px -25px rgba(34, 55, 44, 0.48);
  color: var(--ink);
}

html[data-theme="day"] .masthead__mark:hover,
.masthead.on-cream .masthead__mark:hover {
  border-color: color-mix(in srgb, var(--gold-text) 35%, transparent);
  background: color-mix(in srgb, var(--cream-fixed) 88%, transparent);
}

.legal-copy {
  max-width: 48rem;
}

.legal-copy h2 {
  margin-top: 3.5rem;
  font-size: clamp(1.6rem, 1.25rem + 1vw, 2.25rem);
}

.legal-copy p,
.legal-copy ul {
  margin-top: 1.1rem;
  color: color-mix(in srgb, var(--cream) 70%, transparent);
}

.legal-copy li + li {
  margin-top: 0.6rem;
}

.legal-copy a {
  color: var(--gold-text);
  text-underline-offset: 3px;
}

@media (max-width: 23rem) {
  .masthead {
    gap: 0.5rem;
  }

  .masthead__glyph {
    width: 22px;
  }

  .masthead__mark {
    gap: 0.45rem;
    font-size: 0.75rem;
  }

  .masthead .masthead__cta {
    font-size: 0.6875rem;
    letter-spacing: 0.1em;
  }
}

/* ---- Hero ---- */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: flex-end;
  padding: 7rem 0 clamp(2.5rem, 7vh, 5.5rem);
  overflow: hidden;
}

.hero__plate,
.hero__plate video,
.hero__plate img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero__plate {
  z-index: 0;
  transition: opacity 1.6s ease;
  transform: scale(1.04);
}

/* Armed before the reveal rule below: these two have equal specificity,
         so source order decides, and .is-ready has to be the one that wins. */
.hero-anim .hero__plate {
  opacity: 0;
}

.is-ready .hero__plate {
  opacity: 1;
}

/* Sink the plate toward the brand green. Three passes: a vignette, a
         floor so the page reads as continuous, and a wedge that darkens the
         left where the type sits — the villa stays legible on the right. */
.hero__wash {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(
      100deg,
      var(--dusk-deep) 0%,
      color-mix(in srgb, var(--dusk-deep) 78%, transparent) 34%,
      color-mix(in srgb, var(--dusk-deep) 30%, transparent) 62%,
      transparent 88%
    ),
    radial-gradient(
      130% 90% at 78% 22%,
      transparent 0%,
      color-mix(in srgb, var(--dusk-deep) 45%, transparent) 58%,
      var(--dusk-deep) 100%
    ),
    linear-gradient(
      to top,
      var(--dusk-deep) 3%,
      color-mix(in srgb, var(--dusk-deep) 72%, transparent) 26%,
      transparent 62%
    );
}

/* One column means the type spans the full width, so the side wedge has
         nothing to hide behind — every line would land on villa. Below this
         breakpoint the photograph stops being a backdrop and becomes a band
         across the top that dissolves into the page. The headline then sits
         on solid ink and reads at full contrast, and you still open on the
         villa. Scrimming harder was the other option; it would have cost the
         photograph and still left type on texture. */
@media (max-width: 62rem) {
  .hero {
    align-items: flex-start;
    padding-top: calc(38svh + 1.25rem);
    padding-bottom: clamp(2.5rem, 6vh, 4rem);
  }

  /* The photograph gets the top of the screen at full strength and only
           dissolves at the very end — the type starts below it, so there is
           nothing to protect and no reason to scrim it down. */
  .hero__plate {
    inset: 0 0 auto 0;
    height: 40svh;
    transform: scale(1.02);
    -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 56%, transparent 97%);
    mask-image: linear-gradient(to bottom, #000 0%, #000 56%, transparent 97%);
  }

  /* Two jobs only: keep the masthead legible over the brightest part of
           the frame, and land the band on the page colour without a seam. */
  .hero__wash {
    inset: 0 0 auto 0;
    height: 40svh;
    background: linear-gradient(
      to bottom,
      color-mix(in srgb, var(--night) 90%, transparent) 0%,
      color-mix(in srgb, var(--night) 62%, transparent) 8%,
      color-mix(in srgb, var(--night) 30%, transparent) 16%,
      transparent 28%,
      transparent 56%,
      color-mix(in srgb, var(--dusk-deep) 55%, transparent) 82%,
      var(--dusk-deep) 100%
    );
  }
}

/* Fireflies over the plate. Canvas, not DOM — a few dozen motes at a
         cost the page can actually afford. */
.fx {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.hero__inner {
  position: relative;
  z-index: 2;
  width: 100%;
  display: block;
}

/* The copy is one column now (the demo moved off the hero), so the
         headline can breathe. We still cap the copy block so the wake device
         — which floats over the villa plate to the right — never lands under
         a line of text. */
.hero__copy {
  max-width: 56ch;
}

.hero h1 {
  font-size: clamp(2.1rem, 1.1rem + 3.5vw, 4.5rem);
  margin: 1.25rem 0 0;
}

.hero h1 > span {
  display: block;
}

/* One-line headline: it has to hold on a single line down to a laptop,
         so it runs a shorter scale than the two-line version did and keeps
         its own line to itself. Below the tablet breakpoint it is allowed to
         wrap — a 29-character line can't survive a phone. */
.hero h1.hero__title--one {
  font-size: clamp(2rem, 0.9rem + 2.9vw, 3.6rem);
  letter-spacing: -0.01em;
}

@media (min-width: 62.001rem) {
  .hero h1.hero__title--one > span {
    white-space: nowrap;
  }
}

.hero__gold {
  color: var(--gold-text);
  font-style: normal;
}

/* A laptop viewport is ~790 CSS px tall, and the hero carries a demo
         card as well as the headline. On anything short, trim the padding so
         the hero actually ends at the fold — a clipped scroll cue and CTAs
         under the edge are worse than a tighter frame. */
@media (min-width: 62.001rem) and (max-height: 56rem) {
  .hero {
    padding-top: 5.5rem;
    padding-bottom: 2.75rem;
  }

  .hero__sub {
    margin-top: 1.25rem;
  }

  .hero__actions {
    margin-top: 1.5rem;
  }
}

/* The turn. Its own line, in gold, over the rule that separates them
         from us. */
.hero__turn {
  color: var(--gold-text);
  position: relative;
  padding-top: 0.34em;
  margin-top: 0.22em;
}

.hero__turn::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 4.5rem;
  max-width: 40%;
  height: 1px;
  background: var(--gold);
  transform-origin: left;
  transform: scaleX(0);
  transition: transform 0.9s var(--ease) 1.15s;
}

.is-ready .hero__turn::before,
html:not(.hero-anim) .hero__turn::before {
  transform: scaleX(1);
}

html:not(.hero-anim) .hero__turn::before {
  transition: none;
}

.hero__sub {
  margin-top: clamp(1.5rem, 3vw, 2.25rem);
  max-width: 46ch;
  color: color-mix(in srgb, var(--cream) 74%, transparent);
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1.25rem;
  margin-top: clamp(1.75rem, 3.5vw, 2.75rem);
}

.hero__terms {
  margin-top: 0.9rem;
  font-family: var(--mono);
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  color: color-mix(in srgb, var(--cream) 68%, transparent);
}

/* The wake device: the tablet's own opening move, performed under the
         headline. The capture is 8:5 like the home screen it wakes to, so
         the two screens crossfade without drifting inside the frame. On small
         screens it leaves the flow as a single column beneath the copy. */
.hero__device {
  margin-top: clamp(2rem, 4vw, 3rem);
  width: min(23rem, 100%);
}

.hero__device .device {
  margin-inline: auto;
}

/* The home screen's 8:5 frame. Doubled class: the base .device rule
         later in the file carries the 1340/800 ratio at equal specificity,
         and source order would hand it the win — which is exactly the
         zoomed-and-cropped hero this fixes. */
.device.device--wide {
  aspect-ratio: 8 / 5;
}

/* The two captures don't share one ratio, so neither is allowed to
         cover-crop. The screen stays night-dark in both page themes: a
         hairline letterbox on the off-ratio capture reads as bezel. */
.device--wide .device__screen {
  background: var(--night-fixed);
}

.device--wide .device__screen img {
  object-fit: contain;
  /* The base rule's scale-and-settle is tuned for the scroll-driven
           stay device; on a direct tap it reads as mush. The wake pair
           gets a plain, quicker crossfade. */
  transform: none;
  transition: opacity 0.45s ease;
}

/* On wide screens the device floats over the villa plate to the right,
         literalising the "window onto the villa" line — while the headline
         keeps the full width the copy column reserves. */
@media (min-width: 62.001rem) {
  .hero__device {
    position: absolute;
    right: clamp(1.5rem, 5vw, 5rem);
    top: 50%;
    transform: translateY(-50%);
    margin: 0;
    width: min(36rem, 42vw);
  }
}

/* Short viewports: the floating device would collide with the copy, so
         it shrinks and drops low, clear of the CTAs. */
@media (min-width: 62.001rem) and (max-height: 58rem) {
  .hero__device {
    width: min(30rem, 38vw);
  }
}

/* Staged entrance: plate, then each line, then the sub and actions. One
         orchestrated moment — nothing else on the page animates on load.
         Hiding is gated on .js-anim so that if the script never runs, the
         content is simply there rather than invisible. */
.hero-anim .rise {
  opacity: 0;
  transform: translateY(1.1rem);
}

.rise {
  transition:
    opacity 0.85s ease,
    transform 0.85s var(--ease);
}

/* Same escape hatch as the reveals: once the entrance window has
         closed, the hero's copy is simply there. */
html:not(.hero-anim) .rise {
  transition: none;
}

.is-ready .rise {
  opacity: 1;
  transform: none;
}

.is-ready .rise-1 {
  transition-delay: 0.35s;
}
.is-ready .rise-2 {
  transition-delay: 0.55s;
}
.is-ready .rise-3 {
  transition-delay: 1.35s;
}
.is-ready .rise-4 {
  transition-delay: 1.55s;
}
.is-ready .rise-5 {
  transition-delay: 1.85s;
}

/* ---- Buttons ---- */
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.95rem 1.5rem;
  border-radius: 999px;
  border: 1px solid transparent;
  background: var(--gold);
  color: var(--on-gold);
  font-family: var(--body);
  font-size: 0.9375rem;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  overflow: hidden;
  transform: translate(var(--mx, 0px), var(--my, 0px));
  transition:
    background 0.35s ease,
    color 0.35s ease,
    border-color 0.35s ease,
    transform 0.4s var(--ease),
    box-shadow 0.4s ease;
}

/* A gold sheen crosses the face on hover. */
.btn::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    105deg,
    transparent 35%,
    rgba(255, 255, 255, 0.4) 50%,
    transparent 65%
  );
  transform: translateX(-120%);
  pointer-events: none;
}

@media (prefers-reduced-motion: no-preference) {
  .btn:hover::after {
    transition: transform 0.75s var(--ease);
    transform: translateX(120%);
  }
}

.btn:hover {
  background: color-mix(in srgb, var(--gold) 82%, #fff);
  box-shadow: 0 12px 34px -14px color-mix(in srgb, var(--gold) 75%, transparent);
}

.btn--ghost {
  background: transparent;
  color: var(--cream);
  border-color: color-mix(in srgb, var(--cream) 28%, transparent);
}

.btn--ghost:hover {
  background: transparent;
  border-color: var(--gold-text);
  color: var(--gold-text);
  box-shadow: none;
}

.btn--ghost::after {
  display: none;
}

/* The parchment acts are literal daylight in both modes, so a ghost
         button there can't borrow --cream (which is only ink-colored in day
         mode). Ink it explicitly, and give the border enough weight to read
         as a button rather than a hairline. */
.day-act .btn--ghost {
  color: var(--ink);
  border-color: color-mix(in srgb, var(--ink) 45%, transparent);
}

.day-act .btn--ghost:hover {
  border-color: var(--gold-ink);
  color: var(--gold-ink);
}

.btn__play {
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 5px 0 5px 8px;
  border-color: transparent transparent transparent currentColor;
  transition: transform 0.35s var(--ease);
}

.btn:hover .btn__play {
  transform: translateX(2px) scale(1.15);
}

.btn__meta {
  opacity: 0.62;
  font-weight: 400;
}

/* ================================================================
         ASK CHUCHO — the hero's live demo.
         Real questions, real grounding lines. It plays itself, pauses when
         you're not looking at it, and hands over control the moment you
         touch a chip.
         ================================================================ */
.ask {
  position: relative;
  border-radius: 16px;
  border: 1px solid color-mix(in srgb, var(--cream) 14%, transparent);
  background: color-mix(in srgb, var(--night) 72%, transparent);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow:
    0 40px 90px -40px rgba(0, 0, 0, 0.95),
    0 0 90px -50px color-mix(in srgb, var(--gold) 70%, transparent);
  overflow: hidden;
  transform: perspective(1100px) rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg));
  transition: transform 0.6s var(--ease);
}

.ask::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(
    circle at var(--gx, 50%) var(--gy, 50%),
    color-mix(in srgb, var(--cream-fixed) 12%, transparent),
    transparent 48%
  );
  transition: opacity 0.35s var(--ease);
}

.ask.is-tilting::before {
  opacity: 1;
}

@media (max-width: 62rem) {
  .ask {
    display: none;
  }
}

.ask__bar {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.85rem 1.05rem;
  border-bottom: 1px solid color-mix(in srgb, var(--cream) 10%, transparent);
  font-family: var(--mono);
  font-size: 0.75rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--cream) 55%, transparent);
}

.ask__glyph {
  width: 17px;
  flex: none;
  color: var(--gold-text);
}

.ask__glyph svg {
  width: 100%;
  height: auto;
  display: block;
}

.ask__bar strong {
  font-weight: 400;
  color: var(--cream);
  letter-spacing: 0.14em;
}

.ask__live {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

.ask__live::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--teal);
}

@media (prefers-reduced-motion: no-preference) {
  .ask__live::before {
    animation: live-blink 2.6s ease-in-out infinite;
  }
  @keyframes live-blink {
    0%,
    100% {
      opacity: 1;
    }
    55% {
      opacity: 0.25;
    }
  }
}

.ask__wire {
  padding: 1.05rem 1.05rem 0.9rem;
}

/* The guest's line. One row, clipped with a soft edge so a long
         question never wraps and re-lays the card out mid-type. */
.ask__q {
  min-height: 1.6em;
  font-size: 0.9375rem;
  color: color-mix(in srgb, var(--cream) 92%, transparent);
  white-space: nowrap;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, #000 88%, transparent 100%);
  mask-image: linear-gradient(to right, #000 88%, transparent 100%);
}

.ask__q::before {
  content: "Guest";
  display: block;
  font-family: var(--mono);
  font-size: 0.6875rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--cream) 34%, transparent);
  margin-bottom: 0.3rem;
}

.ask__caret {
  display: inline-block;
  width: 0.5ch;
  height: 1em;
  margin-left: 1px;
  vertical-align: -0.12em;
  background: var(--gold);
}

@media (prefers-reduced-motion: no-preference) {
  .ask__caret.is-blink {
    animation: caret 1.05s steps(1) infinite;
  }
  @keyframes caret {
    50% {
      opacity: 0;
    }
  }
}

/* Every answer stacks in one grid cell, so the card is always as tall
         as its tallest answer and nothing below it ever moves. */
.ask__stack {
  display: grid;
  margin-top: 0.95rem;
}

.ask__a,
.ask__think {
  grid-area: 1 / 1;
  opacity: 0;
  pointer-events: none;
  transition:
    opacity 0.4s ease,
    transform 0.45s var(--ease);
  transform: translateY(8px);
}

.ask__a.is-live,
.ask__think.is-live {
  opacity: 1;
  transform: none;
}

/* While the next question types, the last answer stays on screen the
         way it would in a real thread — the card never shows a hole. Held
         legible: at typing+thinking length this is the card's only body. */
.ask__a.is-stale {
  opacity: 0.65;
  transform: none;
}

.ask__bubble {
  border-radius: 4px 14px 14px 14px;
  border: 1px solid color-mix(in srgb, var(--gold) 26%, transparent);
  background: color-mix(in srgb, var(--gold) 9%, transparent);
  padding: 0.7rem 0.9rem 0.75rem;
  font-size: 0.9375rem;
  line-height: 1.5;
  color: color-mix(in srgb, var(--cream) 90%, transparent);
}

.ask__source {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  margin-top: 0.6rem;
  font-family: var(--mono);
  font-size: 0.6875rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--cream) 58%, transparent);
}

.ask__source::before {
  content: "";
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--teal);
  flex: none;
}

/* The action chucho offers. Styled as the tablet styles it: one tap,
         one total, nothing placed until the guest says so. */
.ask__act {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  /* A rendering of the tablet's confirm button, not one of the page's.
           It wears the product's gold, so say plainly that it is not a
           control this page offers. */
  cursor: default;
  user-select: none;
  margin-top: 0.7rem;
  padding: 0.45rem 0.85rem;
  border-radius: 999px;
  background: var(--gold);
  color: var(--on-gold);
  font-size: 0.8125rem;
  font-weight: 600;
}

.ask__act span {
  font-family: var(--mono);
  font-size: 0.6875rem;
  opacity: 0.7;
}

@media (prefers-reduced-motion: no-preference) {
  .ask__a.is-live .ask__act {
    animation: act-pop 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) 0.15s backwards;
  }
  @keyframes act-pop {
    from {
      transform: scale(0.86);
      opacity: 0;
    }
  }
}

.ask__think {
  display: flex;
  gap: 4px;
  /* A grid item stretches to fill its cell by default, and this cell is
           sized to the tallest answer — without these it becomes a tall
           column instead of a bubble. */
  align-self: start;
  justify-self: start;
  width: fit-content;
  padding: 0.85rem 0.9rem;
  border-radius: 4px 14px 14px 14px;
  background: color-mix(in srgb, var(--cream) 7%, transparent);
}

.ask__think i {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--gold) 80%, transparent);
}

@media (prefers-reduced-motion: no-preference) {
  .ask__think.is-live i {
    animation: think 1.1s ease-in-out infinite;
  }
  .ask__think i:nth-child(2) {
    animation-delay: 0.16s;
  }
  .ask__think i:nth-child(3) {
    animation-delay: 0.32s;
  }
  @keyframes think {
    30% {
      transform: translateY(-3px);
    }
  }
}

.ask__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  padding: 0.9rem 1.05rem 1.05rem;
  border-top: 1px solid color-mix(in srgb, var(--cream) 8%, transparent);
}

.chip {
  min-height: 44px;
  padding: 0.45rem 0.75rem;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--cream) 16%, transparent);
  background: transparent;
  color: color-mix(in srgb, var(--cream) 62%, transparent);
  font-family: var(--body);
  font-size: 0.75rem;
  font-weight: 500;
  cursor: pointer;
  transition:
    color 0.3s ease,
    border-color 0.3s ease,
    background 0.3s ease,
    transform 0.3s var(--ease);
}

.chip:hover {
  color: var(--cream);
  border-color: color-mix(in srgb, var(--cream) 34%, transparent);
  transform: translateY(-1px);
}

.chip.is-on {
  color: var(--on-gold);
  background: var(--gold);
  border-color: var(--gold);
}

/* ---- The dark act: hero → the stay → the column ---- */
.dark-act {
  background: var(--stage);
  transition: background 1.2s ease;
}

/* ---- The stay ---- */
.stay {
  padding-top: clamp(4rem, 10vh, 8rem);
  max-width: 86rem;
}

.stay__head {
  max-width: 42rem;
  padding-bottom: clamp(2rem, 6vh, 4.5rem);
}

.stay__head h2 {
  margin-top: 0;
}

.stay__head .lede {
  margin-top: 1.25rem;
  max-width: 38ch;
}

/* The device gets the larger share — the screenshots are the argument,
         and they have to be legible. */
.stay__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr);
  gap: clamp(2rem, 4vw, 4rem);
  align-items: start;
}

.stay__viz {
  position: sticky;
  top: 0;
  height: 100svh;
  display: flex;
  align-items: center;
}

.device__wrap {
  position: relative;
  width: 100%;
}

/* The device: a hairline and a warm bloom. The tablet should read as
         lit glass in a dark room, not as a chunky mockup bezel. */
.device {
  position: relative;
  width: 100%;
  aspect-ratio: 1340 / 800;
  border-radius: 16px;
  padding: 6px;
  background: linear-gradient(
    160deg,
    color-mix(in srgb, var(--gold) 34%, transparent),
    color-mix(in srgb, var(--cream) 6%, transparent) 42%,
    transparent 78%
  );
  box-shadow:
    0 40px 90px -30px rgba(0, 0, 0, 0.9),
    0 0 130px -40px color-mix(in srgb, var(--gold) 55%, transparent);
  transform: perspective(1400px) rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg));
  transition: transform 0.7s var(--ease);
}

.device__screen {
  display: block;
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 11px;
  overflow: hidden;
  background: var(--night);
}

.device__screen img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transform: scale(1.025);
  transition:
    opacity 0.7s ease,
    transform 1.4s var(--ease);
}

.device__screen img.is-live {
  opacity: 1;
  transform: none;
}

/* Glass over the screen, tracking the tilt. Sells it as lit glass. */
.device__glare {
  position: absolute;
  inset: 0;
  z-index: 2;
  border-radius: 11px;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(
    circle at var(--gx, 50%) var(--gy, 50%),
    rgba(255, 255, 255, 0.13),
    transparent 45%
  );
  transition: opacity 0.35s var(--ease);
}

.device.is-tilting .device__glare {
  opacity: 1;
}

/* ---- The beats: a shift, on a spine ---- */
.stay__beats {
  position: relative;
}

@media (min-width: 60.001rem) {
  .stay__beats {
    padding-left: 2.5rem;
  }

  .stay__beats::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 1px;
    background: color-mix(in srgb, var(--cream) 11%, transparent);
  }

  .stay__spine {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 1px;
    background: linear-gradient(
      to bottom,
      color-mix(in srgb, var(--gold) 30%, transparent),
      var(--gold)
    );
    transform: scaleY(var(--spine, 0));
    transform-origin: top;
  }

  .beat__time::before {
    content: "";
    position: absolute;
    left: calc(-2.5rem - 3.5px);
    top: 0.42em;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--stage);
    box-shadow: 0 0 0 1.5px color-mix(in srgb, var(--cream) 28%, transparent);
    transition:
      box-shadow 0.5s ease,
      background 0.5s ease,
      transform 0.5s var(--ease);
  }

  .beat.is-active .beat__time::before {
    background: var(--gold);
    box-shadow:
      0 0 0 1.5px var(--gold),
      0 0 0 6px color-mix(in srgb, var(--gold) 14%, transparent);
    transform: scale(1.2);
  }

  /* Only the beat you're on is at full strength. The rest recede so
           the column reads as one moving focus, not six equal blocks. */
  .beat {
    opacity: 0.34;
    transition:
      opacity 0.6s ease,
      transform 0.6s var(--ease);
    transform: translateX(-6px);
  }

  .beat.is-active {
    opacity: 1;
    transform: none;
  }
}

.beat {
  min-height: 68svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-block: 3rem;
}

/* first-of-type, not first-child — the absolutely-positioned spine
         <span> is the container's first child. Shorter still, so the first
         beat arrives with the device instead of a viewport later. */
.beat:first-of-type {
  min-height: 58svh;
}

/* The stay is a real sequence measured in hours, so the marker is the
         villa's clock — not 01 / 02 / 03. */
.beat__time {
  position: relative;
  display: flex;
  align-items: baseline;
  gap: 0.9rem;
  font-family: var(--mono);
  font-size: 0.75rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold-text);
}

.beat__time span {
  color: color-mix(in srgb, var(--cream) 56%, transparent);
  letter-spacing: 0.2em;
}

.beat__time::after {
  content: "";
  flex: 1;
  height: 1px;
  background: color-mix(in srgb, var(--cream) 14%, transparent);
}

.beat h3 {
  font-size: clamp(1.65rem, 1rem + 2vw, 2.5rem);
  margin-top: 1.4rem;
  max-width: 18ch;
}

/* :not() keeps this off .beat__time, which is also a <p>. Without it
         the body rule outranks .beat__time (class+type beats class alone) and
         quietly takes the clock's gold, clamps it to 38ch and pushes it down
         a line. */
.beat p:not(.beat__time) {
  margin-top: 1rem;
  max-width: 38ch;
  color: color-mix(in srgb, var(--cream) 68%, transparent);
}

.beat--wedge h3 {
  color: var(--gold-text);
}

@media (max-width: 60rem) {
  .stay__grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
  }

  .stay__viz {
    top: 3.25rem;
    height: auto;
    padding-block: 0.75rem 1.25rem;
    background: linear-gradient(to bottom, var(--stage) 76%, transparent);
    z-index: 5;
  }

  .stay__spine {
    display: none;
  }

  .beat {
    min-height: 72svh;
    padding-block: 2rem;
  }

  .beat:first-of-type {
    padding-top: 1rem;
  }
}

/* ---- The field report ----
         Three operator studies supply the evidence; the composition turns
         it into a diagnosis. One large frequency line leads, followed by
         two quieter findings. It is deliberately not a stat-card grid:
         these numbers form an argument, not a dashboard. */
.field-report {
  padding-block: clamp(6rem, 16vh, 12rem);
  background: var(--night);
}

.field-report__head {
  display: grid;
  grid-template-columns: minmax(0, 0.72fr) minmax(20rem, 0.28fr);
  gap: clamp(2rem, 7vw, 7rem);
  align-items: end;
}

.field-report__head h2 {
  margin-top: 0;
  max-width: 16ch;
}

.field-report__intro {
  max-width: 33ch;
  color: color-mix(in srgb, var(--cream) 72%, transparent);
}

.field-report__eyebrow {
  display: block;
  margin-bottom: 0.9rem;
  font-family: var(--mono);
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold-text);
}

.work-shift {
  display: grid;
  grid-template-columns: minmax(9rem, 0.42fr) minmax(2rem, 0.12fr) minmax(12rem, 0.46fr);
  gap: clamp(1rem, 3vw, 2.5rem);
  align-items: center;
  margin-top: clamp(3rem, 8vh, 5rem);
  padding-block: clamp(2.5rem, 7vh, 4.5rem);
  border-top: 1px solid color-mix(in srgb, var(--cream) 16%, transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--cream) 16%, transparent);
}

.work-shift__fact {
  margin: 0;
}

.work-shift__number {
  display: block;
  font-family: var(--display);
  font-size: clamp(4rem, 2rem + 8vw, 8rem);
  line-height: 0.82;
  letter-spacing: -0.06em;
  color: var(--cream);
}

.work-shift__label {
  display: block;
  max-width: 25ch;
  margin-top: 1.25rem;
  color: color-mix(in srgb, var(--cream) 72%, transparent);
}

.work-shift__arrow {
  position: relative;
  height: 1px;
  background: color-mix(in srgb, var(--gold) 55%, transparent);
}

.work-shift__arrow::after {
  content: "";
  position: absolute;
  right: 0;
  top: 50%;
  width: 0.65rem;
  height: 0.65rem;
  border-top: 1px solid var(--gold);
  border-right: 1px solid var(--gold);
  transform: translateY(-50%) rotate(45deg);
}

.work-shift__fact--guest .work-shift__number {
  color: var(--gold-text);
}

.work-shift__fact--guest .work-shift__label {
  color: color-mix(in srgb, var(--cream) 86%, transparent);
}

.work-shift__reading {
  grid-column: 3;
  max-width: 31ch;
  margin-top: -1.5rem;
  font-family: var(--display);
  font-size: clamp(1.25rem, 0.9rem + 1.2vw, 1.75rem);
  line-height: 1.32;
}

.work-shift__reading strong {
  color: var(--gold-text);
  font-weight: 400;
}

.findings {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: clamp(3rem, 7vh, 5rem);
  border-bottom: 1px solid color-mix(in srgb, var(--cream) 16%, transparent);
}

.finding {
  display: grid;
  grid-template-columns: minmax(5.5rem, 0.28fr) minmax(0, 0.72fr);
  gap: clamp(1.25rem, 3vw, 2.5rem);
  padding: 0 clamp(1.5rem, 4vw, 4rem) clamp(3rem, 7vh, 4.5rem) 0;
}

.finding + .finding {
  padding-left: clamp(1.5rem, 4vw, 4rem);
  padding-right: 0;
  border-left: 1px solid color-mix(in srgb, var(--cream) 16%, transparent);
}

.finding__number {
  font-family: var(--display);
  font-size: clamp(2.75rem, 1.8rem + 3.2vw, 4.75rem);
  line-height: 0.9;
  letter-spacing: -0.05em;
  color: var(--gold-text);
}

.finding__number small {
  display: block;
  margin-top: 0.75rem;
  font-family: var(--mono);
  font-size: 0.75rem;
  line-height: 1.4;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--cream) 56%, transparent);
}

.finding h3 {
  font-size: clamp(1.35rem, 1rem + 1vw, 1.8rem);
  line-height: 1.15;
}

.finding p {
  margin-top: 0.9rem;
  color: color-mix(in srgb, var(--cream) 68%, transparent);
}

.finding__answer {
  display: block;
  margin-top: 1.25rem;
  font-family: var(--mono);
  font-size: 0.75rem;
  line-height: 1.55;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gold-text);
}

.field-report__source {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 1.5rem;
  align-items: start;
  margin-top: 1.5rem;
  font-family: var(--mono);
  font-size: 0.6875rem;
  line-height: 1.65;
  letter-spacing: 0.04em;
  color: color-mix(in srgb, var(--cream) 56%, transparent);
}

.field-report__source p {
  max-width: 78ch;
}

.field-report__source a {
  color: var(--gold-text);
  text-underline-offset: 0.25em;
  white-space: nowrap;
}

.field-report__links {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.5rem 1rem;
}

@media (max-width: 54rem) {
  .field-report__head {
    grid-template-columns: minmax(0, 1fr);
  }

  .field-report__intro {
    max-width: 48ch;
  }

  .findings {
    grid-template-columns: minmax(0, 1fr);
  }

  .finding {
    padding-right: 0;
  }

  .finding + .finding {
    padding-left: 0;
    padding-top: clamp(3rem, 7vh, 4.5rem);
    border-top: 1px solid color-mix(in srgb, var(--cream) 16%, transparent);
    border-left: 0;
  }
}

@media (max-width: 38rem) {
  /* Side-by-side squeezes both figures into half a phone; stacked,
           each number gets the full measure and the arrow becomes the drop
           from "daily" to "weekly". */
  .work-shift {
    grid-template-columns: minmax(0, 1fr);
    gap: 1.5rem;
  }

  .work-shift__number {
    font-size: clamp(4rem, 21vw, 5.5rem);
  }

  .work-shift__label {
    margin-top: 0.85rem;
    font-size: 0.9375rem;
  }

  .work-shift__arrow {
    width: 1px;
    height: 2.75rem;
    justify-self: start;
    margin-left: 0.25rem;
  }

  .work-shift__arrow::after {
    top: auto;
    right: auto;
    bottom: 0;
    left: 50%;
    border-top: 0;
    border-right: 1px solid var(--gold);
    border-bottom: 1px solid var(--gold);
    transform: translateX(-50%) rotate(45deg);
  }

  .work-shift__reading {
    grid-column: 1;
    margin-top: 0.75rem;
  }

  .finding {
    grid-template-columns: minmax(0, 1fr);
  }

  .finding__number small {
    display: inline;
    margin: 0 0 0 0.6rem;
  }

  .field-report__source {
    grid-template-columns: minmax(0, 1fr);
  }

  .field-report__source a {
    white-space: normal;
  }

  .field-report__links {
    justify-content: flex-start;
  }
}

/* ---- Daybreak. Cream, because the console genuinely is a warm
         parchment surface — the page changes mode the way the product does. */
.day-act {
  position: relative;
  background-color: var(--cream-bg);
  background-image: linear-gradient(to bottom, var(--cream-bg), var(--cream-bg-2));
  color: var(--ink);
  padding-block: clamp(5rem, 14vh, 9rem);
  overflow: hidden;
}

/* The dashboard teaser has to read in one screen, so it runs a tighter
         act than the rest of the parchment and gives the screenshot the wider
         column — the shot is the argument, the copy is the caption. */
.day-act--fit {
  padding-block: clamp(3.5rem, 9vh, 6rem);
}

@media (min-width: 60.001rem) {
  .day-act--fit .split-head {
    grid-template-columns: minmax(0, 0.86fr) minmax(0, 1.14fr);
  }
}

.day-act--fit .console__head h2 {
  font-size: clamp(1.9rem, 1.2rem + 1.9vw, 2.9rem);
}

/* Two slow warm glows drifting behind the parchment — daylight moving
         across a room. */
.day-act__glow {
  position: absolute;
  z-index: 0;
  width: 46vw;
  height: 46vw;
  max-width: 620px;
  max-height: 620px;
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(
    circle,
    color-mix(in srgb, var(--gold) 24%, transparent),
    transparent 68%
  );
}

.day-act__glow--a {
  top: -12%;
  left: -8%;
}

.day-act__glow--b {
  bottom: -14%;
  right: -8%;
  background: radial-gradient(
    circle,
    color-mix(in srgb, var(--terracotta) 14%, transparent),
    transparent 68%
  );
}

@media (prefers-reduced-motion: no-preference) {
  .day-act__glow--a {
    animation: glow-a 27s ease-in-out infinite;
  }
  .day-act__glow--b {
    animation: glow-b 33s ease-in-out infinite;
  }
  @keyframes glow-a {
    0%,
    100% {
      transform: translate(0, 0) scale(1);
    }
    50% {
      transform: translate(14%, 11%) scale(1.12);
    }
  }
  @keyframes glow-b {
    0%,
    100% {
      transform: translate(0, 0) scale(1);
    }
    50% {
      transform: translate(-12%, -9%) scale(1.09);
    }
  }
}

.day-act > .shell {
  position: relative;
  z-index: 1;
}

/* Brand terracotta lands at 3.4:1 on parchment — fine for the 21px
         hover headings it also marks, short of the 4.5:1 an 11px label needs.
         The kicker gets an inked-down version of the same hue. */
.day-act .kicker {
  color: var(--terracotta-ink);
}

.day-act .lede {
  color: color-mix(in srgb, var(--ink) 72%, transparent);
}

.console__head {
  max-width: 44rem;
}

.console__head h2 {
  margin-top: 1.1rem;
}

.console__head .lede {
  margin-top: 1.5rem;
  max-width: 42ch;
}

/* ---- The figures, counted up ---- */
/* Three figures, not three equal figures: an operator reads the money
         first and the other two are its denominators. The lead cell gets the
         extra width that difference in size needs. */
.stats {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(1.5rem, 4vw, 3rem);
  margin-top: clamp(2.5rem, 6vh, 4rem);
  padding-block: clamp(1.75rem, 4vh, 2.5rem);
  border-block: 1px solid color-mix(in srgb, var(--ink) 15%, transparent);
}

/* Every figure box is as tall as the tallest figure and its digits sit
         on the floor of it, so three different sizes still share a baseline
         and all three labels start on one line. */
.stat__n {
  display: flex;
  align-items: flex-end;
  min-height: clamp(2.5rem, 1.4rem + 3.4vw, 4.25rem);
  font-family: var(--display);
  font-size: clamp(2rem, 1.2rem + 2.6vw, 3.25rem);
  line-height: 1;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}

.stat--lead .stat__n {
  font-size: clamp(2.5rem, 1.4rem + 3.4vw, 4.25rem);
}

.stat__l {
  margin-top: 0.6rem;
  font-family: var(--mono);
  font-size: 0.75rem;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--ink) 74%, transparent);
}

/* A caption on the strip, under the rule — not a fourth cell pretending
         to be a fourth figure. */
.stats__note {
  margin-top: 1rem;
  font-family: var(--mono);
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--ink) 74%, transparent);
}

@media (max-width: 46rem) {
  /* Two columns on a phone, with the money figure taking the full first
           row — the same hierarchy, stacked. */
  .stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    row-gap: clamp(1.75rem, 5vw, 2.5rem);
  }

  .stat--lead {
    grid-column: 1 / -1;
  }
}

.console__grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: clamp(2rem, 4vw, 3.25rem);
  margin-top: clamp(3rem, 7vh, 5rem);
}

.shot {
  grid-column: span 4;
  margin: 0;
}

.shot--lead {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(16rem, 0.45fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
  padding-bottom: clamp(2rem, 5vh, 3.5rem);
  border-bottom: 1px solid color-mix(in srgb, var(--ink) 16%, transparent);
}

.shot--lead figcaption {
  margin-top: 0;
}

.shot--lead h3 {
  font-size: clamp(1.75rem, 1.25rem + 1.4vw, 2.5rem);
}

.shot__facts {
  display: grid;
  gap: 1rem;
  margin: 1.5rem 0 0;
  padding: 0;
  list-style: none;
}

.shot__facts li {
  padding-top: 1rem;
  border-top: 1px solid color-mix(in srgb, var(--ink) 14%, transparent);
  color: color-mix(in srgb, var(--ink) 74%, transparent);
}

.shot__facts strong {
  display: block;
  font-family: var(--display);
  font-size: 1.5rem;
  font-weight: 400;
  color: var(--ink);
}

@media (max-width: 60rem) {
  .console__grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .shot,
  .shot--lead {
    grid-column: 1;
  }

  .shot--lead {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* The screenshots are the argument, and at this size they're small.
         Tap or click to read one properly. */
.shot__frame {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  border-radius: 10px;
  cursor: zoom-in;
  transform: perspective(1200px) rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg));
  transition:
    transform 0.6s var(--ease),
    box-shadow 0.45s ease;
}

.shot__frame img {
  width: 100%;
  height: auto;
  border-radius: 10px;
  border: 1px solid color-mix(in srgb, var(--ink) 14%, transparent);
  box-shadow: 0 24px 50px -34px rgba(34, 55, 44, 0.55);
  background: var(--cream-fixed);
  transition: border-color 0.4s ease;
}

.shot__frame::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 10px;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(
    circle at var(--gx, 50%) var(--gy, 50%),
    rgba(255, 255, 255, 0.5),
    transparent 45%
  );
  transition: opacity 0.35s var(--ease);
}

.shot__frame.is-tilting {
  box-shadow: 0 34px 60px -34px rgba(34, 55, 44, 0.6);
}

.shot__frame.is-tilting::after {
  opacity: 1;
}

.shot__frame.is-tilting img {
  border-color: color-mix(in srgb, var(--gold) 60%, transparent);
}

.shot__zoom {
  position: absolute;
  z-index: 2;
  right: 0.7rem;
  bottom: 0.7rem;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.28rem 0.6rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--ink) 88%, transparent);
  color: var(--cream-fixed);
  font-family: var(--body);
  font-size: 0.75rem;
  font-weight: 600;
  /* Visible at rest, not on hover. These thumbnails are unreadable at
           this size and the lightbox is the only way to actually read one —
           hiding the affordance until the pointer arrives means a reader
           never learns the section has a second layer, and a touch reader
           never has a pointer at all. */
  opacity: 0.82;
  transition: opacity 0.3s ease;
}

.shot__frame:hover .shot__zoom,
.shot__frame:focus-visible .shot__zoom {
  opacity: 1;
}

.shot figcaption {
  margin-top: 1.15rem;
}

.shot h3 {
  font-size: 1.3rem;
  transition: color 0.35s ease;
}

.shot:hover h3 {
  color: var(--terracotta);
}

.shot p {
  margin-top: 0.5rem;
  max-width: 40ch;
  color: color-mix(in srgb, var(--ink) 70%, transparent);
}

.shot--lead figcaption {
  margin-top: 0;
}

.shot--lead h3 {
  font-size: clamp(1.75rem, 1.25rem + 1.4vw, 2.5rem);
}

/* ---- The network ---- */
.network {
  margin-top: clamp(4rem, 10vh, 7rem);
  border-top: 1px solid color-mix(in srgb, var(--ink) 16%, transparent);
  padding-top: clamp(2.5rem, 6vh, 4rem);
}

.network__title {
  font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem);
}

.network__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
  gap: clamp(1.75rem, 4vw, 3rem);
  margin-top: 2.5rem;
}

.partner {
  position: relative;
  padding-left: 0;
  transition: transform 0.4s var(--ease);
}

@media (hover: hover) and (pointer: fine) {
  .partner::after {
    content: "";
    position: absolute;
    left: -0.9rem;
    top: 0.35rem;
    bottom: 0.35rem;
    width: 0;
    border-radius: 0 3px 3px 0;
    background: var(--tone, var(--teal));
    transition: width 0.35s var(--ease);
  }

  .partner:hover {
    transform: translateX(0.9rem);
  }

  .partner:hover::after {
    width: 3px;
  }
}

.partner h3 {
  font-size: 1.15rem;
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
}

.partner h3::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--tone, var(--teal));
  flex: none;
  transform: translateY(-2px);
  transition: box-shadow 0.4s ease;
}

.partner:hover h3::before {
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--tone) 18%, transparent);
}

.partner p {
  margin-top: 0.6rem;
  color: color-mix(in srgb, var(--ink) 70%, transparent);
  font-size: 0.9375rem;
}

.network__note {
  margin-top: 2.25rem;
  max-width: 48ch;
}

/* ---- Close ---- */
.close {
  position: relative;
  background: var(--dusk-deep);
  padding-block: clamp(6rem, 18vh, 12rem);
  overflow: hidden;
}

.close::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(
    70% 90% at 50% 118%,
    color-mix(in srgb, var(--gold) 22%, transparent),
    transparent 68%
  );
}

/* The ask sits left, the proof print sits right, and the gold pool
         underneath reads as light coming off it rather than off nothing.
         Below the breakpoint the print follows the CTA — proof after the
         ask, never a detour before the button. */
.close .shell {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
  gap: clamp(2rem, 5vw, 4rem);
}

.close__visual {
  position: relative;
  justify-self: center;
  width: min(18rem, 76vw);
}

/* A physical print, not a UI screenshot: cream mat, slight tilt,
         mono caption. The tilt is on the figure so the lightbox button's
         focus ring tilts with it. */
.close__proof {
  margin: 0;
  transform: rotate(-1.8deg);
}

.close__proof-frame {
  display: block;
  width: 100%;
  padding: 0.55rem 0.55rem 0.75rem;
  background: color-mix(in srgb, var(--cream-fixed) 94%, transparent);
  border: 0;
  border-radius: 3px;
  box-shadow:
    0 26px 60px rgba(0, 0, 0, 0.5),
    0 10px 24px color-mix(in srgb, var(--gold) 20%, transparent);
  cursor: zoom-in;
}

.close__proof-frame img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 2px;
}

.close__proof figcaption {
  margin-top: 0.85rem;
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-align: center;
  color: color-mix(in srgb, var(--cream) 60%, transparent);
}

@media (min-width: 62rem) {
  .close .shell {
    grid-template-columns: minmax(0, 1fr) minmax(0, 21rem);
  }
}

.close__inner {
  max-width: 34rem;
}

.close h2 {
  margin-top: 1.1rem;
}

.close .lede {
  margin-top: 1.4rem;
  max-width: 42ch;
}

.close__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem;
  margin-top: 2.25rem;
}

.close__mail {
  margin-top: 1.25rem;
  font-size: 0.875rem;
  color: color-mix(in srgb, var(--cream) 55%, transparent);
}

.close__terms {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 1.25rem;
  margin-top: 1.5rem;
  font-family: var(--mono);
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  color: color-mix(in srgb, var(--cream) 72%, transparent);
}

.close__terms span::before {
  content: "✓";
  margin-right: 0.45rem;
  color: var(--gold-text);
}

.close__mail a {
  color: color-mix(in srgb, var(--cream) 80%, transparent);
  text-decoration-color: color-mix(in srgb, var(--gold) 55%, transparent);
  text-underline-offset: 3px;
  transition: color 0.3s ease;
}

.close__mail a:hover {
  color: var(--gold-text);
}

.colophon {
  background: var(--night);
  padding-block: 2.5rem;
  font-family: var(--mono);
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--cream) 56%, transparent);
}

.colophon .shell {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 1rem;
}

.colophon a {
  text-decoration: none;
  transition: color 0.3s ease;
}

.colophon a:hover {
  color: var(--gold-text);
}

/* ---- Overlays: the film, and the screenshot reader ---- */
.overlay {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: none;
  place-items: center;
  padding: clamp(1rem, 4vw, 3rem);
  /* Fixed to night in both modes: film and dense screenshots read
           best out of a dark room, and the scrim is not part of the page. */
  background: color-mix(in srgb, var(--night-fixed) 92%, transparent);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.overlay.is-open {
  display: grid;
}

@media (prefers-reduced-motion: no-preference) {
  .overlay.is-open {
    animation: overlay-in 0.3s ease;
  }
  .overlay.is-open > * {
    animation: overlay-lift 0.45s var(--ease);
  }
  @keyframes overlay-in {
    from {
      opacity: 0;
    }
  }
  @keyframes overlay-lift {
    from {
      opacity: 0;
      transform: translateY(14px) scale(0.985);
    }
  }
}

.film__frame {
  width: min(100%, 68rem);
  aspect-ratio: 16 / 9;
  border-radius: 12px;
  overflow: hidden;
  background: #000;
  box-shadow: 0 50px 120px -40px rgba(0, 0, 0, 0.95);
}

.film video {
  width: 100%;
  height: 100%;
}

.lightbox img {
  width: auto;
  max-width: min(100%, 84rem);
  max-height: 86vh;
  border-radius: 12px;
  border: 1px solid color-mix(in srgb, var(--cream-fixed) 16%, transparent);
  box-shadow: 0 50px 120px -40px rgba(0, 0, 0, 0.95);
}

.overlay__close {
  position: absolute;
  top: clamp(1rem, 3vw, 2rem);
  right: clamp(1rem, 3vw, 2rem);
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--cream-fixed) 30%, transparent);
  background: transparent;
  color: var(--cream-fixed);
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
  transition:
    border-color 0.3s ease,
    color 0.3s ease,
    transform 0.3s var(--ease);
}

.overlay__close:hover {
  border-color: var(--gold);
  color: var(--gold);
  transform: rotate(90deg);
}

body.is-locked {
  overflow: hidden;
}

/* ================================================================
         DAY MODE ADJUSTMENTS
         The variable flip above does most of the work; what's left is the
         physics that doesn't invert. Shadows tint to ink instead of black
         (the tablet's own elevation rule — warm, never gray), the masthead
         halo becomes light instead of dark, and the hero's left wedge
         thickens: ink type needs more cream under it than cream type
         needed ink.
         ================================================================ */
html[data-theme="day"] .masthead:not(.on-cream),
html[data-theme="day"] .spine:not(.on-cream) {
  text-shadow: 0 1px 10px color-mix(in srgb, var(--cream-fixed) 85%, transparent);
}

/* The desktop rail crosses a photograph whose luminance changes from
         beam to sky to foliage. A warm veil gives the ink a predictable
         surface; stronger quiet labels preserve hierarchy without gambling
         their contrast on the frame underneath. */
@media (min-width: 68rem) and (min-height: 34rem) {
  html[data-theme="day"] .spine:not(.on-cream) {
    padding: 4px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--cream-fixed) 92%, transparent);
    box-shadow: 0 12px 32px -22px rgba(34, 55, 44, 0.5);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
  }

  html[data-theme="day"] .spine .spine__label {
    border-color: color-mix(in srgb, var(--ink) 12%, transparent);
    background: color-mix(in srgb, var(--cream-fixed) 96%, transparent);
    box-shadow: 0 12px 28px -18px rgba(34, 55, 44, 0.45);
    color: var(--ink);
  }

  html[data-theme="day"] .spine .spine__dot.is-active .spine__label {
    color: var(--gold-text);
  }
}

/* Scoped to the open phone sheet: the desktop rail sets box-shadow:
         none, and this would win the cascade and paint a ghost panel. */
html[data-theme="day"] .spine.is-open {
  box-shadow: 0 24px 70px -24px rgba(34, 55, 44, 0.4);
}

html[data-theme="day"] .ask {
  box-shadow:
    0 40px 90px -40px rgba(34, 55, 44, 0.45),
    0 0 90px -50px color-mix(in srgb, var(--gold) 55%, transparent);
}

html[data-theme="day"] .device {
  box-shadow:
    0 40px 90px -30px rgba(34, 55, 44, 0.45),
    0 0 130px -40px color-mix(in srgb, var(--gold) 42%, transparent);
}

html[data-theme="day"] .close__proof-frame {
  box-shadow:
    0 26px 60px rgba(34, 55, 44, 0.4),
    0 10px 24px color-mix(in srgb, var(--gold) 25%, transparent);
}

@media (min-width: 62.001rem) {
  html[data-theme="day"] .hero__wash {
    background:
      linear-gradient(
        100deg,
        var(--dusk-deep) 0%,
        color-mix(in srgb, var(--dusk-deep) 88%, transparent) 38%,
        color-mix(in srgb, var(--dusk-deep) 46%, transparent) 64%,
        transparent 88%
      ),
      radial-gradient(
        130% 90% at 78% 22%,
        transparent 0%,
        color-mix(in srgb, var(--dusk-deep) 45%, transparent) 58%,
        var(--dusk-deep) 100%
      ),
      linear-gradient(
        to top,
        var(--dusk-deep) 3%,
        color-mix(in srgb, var(--dusk-deep) 72%, transparent) 26%,
        transparent 62%
      );
  }
}

/* Mid-mix cream text lands lighter on parchment than it did on night
         — the same 56% that read fine on ink is a whisper on cream. The
         quiet mono layer steps up to the day-act's own 74%. */
html[data-theme="day"] .ask__bar,
html[data-theme="day"] .ask__source,
html[data-theme="day"] .finding__number small,
html[data-theme="day"] .field-report__source,
html[data-theme="day"] .colophon,
html[data-theme="day"] .beat__time span,
html[data-theme="day"] .close__mail,
html[data-theme="day"] .close__proof figcaption {
  color: color-mix(in srgb, var(--cream) 74%, transparent);
}

html[data-theme="day"] .ask__q::before {
  color: color-mix(in srgb, var(--cream) 55%, transparent);
}

html[data-theme="day"] .chip {
  color: color-mix(in srgb, var(--cream) 78%, transparent);
}

html[data-theme="day"] .chip.is-on {
  color: var(--on-gold);
}

html[data-theme="day"] .beat p:not(.beat__time) {
  color: color-mix(in srgb, var(--cream) 74%, transparent);
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }

  /* These have to outrank the arming rules above. */
  .hero-anim .rise,
  .hero-anim .hero__plate,
  .js-anim [data-reveal] {
    opacity: 1;
    transform: none;
  }

  .hero__turn::before {
    transform: scaleX(1);
  }

  .device,
  .ask,
  .shot__frame {
    transform: none !important;
  }

  .beat {
    opacity: 1 !important;
    transform: none !important;
  }

  .cue {
    display: none;
  }
}

/* ================================================================
         SPLIT-SITE CHROME
         The site is now several pages sharing one masthead, one spine,
         one film/lightbox, and one footer.
         ================================================================ */

/* --- Site nav in the masthead (desktop) ---
         Pages and the Day/Dusk switch share one pane of glass on the right,
         packed tighter than the mark so the links carry the weight. Below the
         desktop breakpoint the whole rail hands off to the spine sheet. */
.masthead__rail {
  display: flex;
  align-items: center;
  gap: 0.2rem;
  /* Matches the mark's rendered height so the two panes read as a pair. */
  min-height: 52px;
  margin-left: auto;
  padding: 0.3rem 0.4rem;
  pointer-events: auto;
}
.masthead__nav {
  display: flex;
  align-items: center;
  gap: 0.1rem;
}
/* Hairline between the pages and the page's own control. Dropped when
         a page ships no switch (the legal pages), so nothing dangles. */
.masthead__nav:not(:last-child) {
  margin-right: 0.3rem;
  padding-right: 0.4rem;
  border-right: 1px solid color-mix(in srgb, currentColor 20%, transparent);
}
.masthead__nav a {
  display: inline-flex;
  align-items: center;
  min-height: 38px;
  padding: 0.4rem 0.7rem;
  border-radius: 999px;
  text-decoration: none;
  font-family: var(--body);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  text-transform: none;
  white-space: nowrap;
  transition:
    color 0.3s ease,
    background-color 0.3s ease;
}
.masthead__nav a:hover,
.masthead__nav a.is-current {
  color: var(--gold-text);
}
.masthead__nav a:hover {
  background: color-mix(in srgb, currentColor 10%, transparent);
}
.masthead__nav a.is-current {
  background: color-mix(in srgb, var(--gold) 18%, transparent);
}

/* The page's Day/Dusk switch — one tap flips the whole page the way the
         tablet flips at sunset. The product demonstrating itself, in the
         chrome. The glyph is a half-filled disc: the universal contrast mark,
         mirrored so its filled half tracks the mode you're about to leave. */
.masthead__mode {
  display: inline-flex;
  align-items: center;
  gap: 0.42rem;
  min-height: 38px;
  padding: 0.4rem 0.72rem 0.4rem 0.62rem;
  border: 0;
  border-radius: 999px;
  background: none;
  font-family: var(--mono);
  font-size: 0.6875rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: inherit;
  opacity: 0.72;
  cursor: pointer;
  pointer-events: auto;
  transition:
    opacity 0.3s ease,
    background-color 0.3s ease;
}
.masthead__mode:hover,
.masthead__mode:focus-visible {
  opacity: 1;
  background: color-mix(in srgb, currentColor 10%, transparent);
}
.masthead__mode::before {
  content: "";
  width: 10px;
  height: 10px;
  flex: none;
  border: 1px solid currentColor;
  border-radius: 50%;
  background: linear-gradient(to right, currentColor 50%, transparent 50%);
}
html[data-theme="night"] .masthead__mode::before {
  background: linear-gradient(to left, currentColor 50%, transparent 50%);
}

@media (max-width: 62rem) {
  .masthead__rail {
    display: none;
  }
}

/* --- The sheet's site map: pages lead, the open page carries its
         sections as sub-items. Two type sizes do the hierarchy. --- */
.spine__pages {
  display: grid;
  margin-bottom: 0.4rem;
  padding-bottom: 0.4rem;
  border-bottom: 1px solid color-mix(in srgb, var(--cream) 13%, transparent);
}
.spine__pages > a {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  min-height: 48px;
  padding: 0.55rem 0.75rem;
  border-radius: 8px;
  text-decoration: none;
  font-family: var(--body);
  font-size: 1.0625rem;
  font-weight: 600;
}
.spine__pages > a::before {
  content: "";
  width: 6px;
  height: 6px;
  flex: none;
  border-radius: 50%;
  background: transparent;
  box-shadow: 0 0 0 1.5px currentColor;
  opacity: 0.42;
}
.spine__pages > a.is-current {
  color: var(--gold-text);
}
.spine__pages > a.is-current::before {
  background: var(--gold);
  box-shadow: 0 0 0 1.5px var(--gold);
  opacity: 1;
}
/* The open page's sections, indented off its own entry. */
.spine__sub {
  display: grid;
  margin: 0.05rem 0 0.4rem 1.05rem;
  padding-left: 0.9rem;
  border-left: 1px solid color-mix(in srgb, var(--cream) 14%, transparent);
}
.spine__sub a {
  display: flex;
  align-items: center;
  min-height: 40px;
  padding: 0.3rem 0.55rem;
  border-radius: 6px;
  text-decoration: none;
  font-family: var(--body);
  font-size: 0.875rem;
  font-weight: 500;
  color: color-mix(in srgb, var(--cream) 68%, transparent);
}
.spine__sub a:hover,
.spine__sub a:focus-visible {
  color: var(--cream);
}
.spine__sub a.is-active {
  color: var(--gold-text);
}

/* --- Subpage body sections on the night/stage floor --- */
.section {
  padding-block: clamp(5rem, 14vh, 9rem);
}
.section--tight {
  padding-block: clamp(4rem, 10vh, 7rem);
}
.section__head {
  max-width: 46rem;
}
.section__head h2 {
  margin-top: 1.1rem;
}
.section__head .lede {
  margin-top: 1.5rem;
  max-width: 46ch;
}
.section__eyebrow {
  display: block;
  margin-bottom: 0.9rem;
  font-family: var(--mono);
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold-text);
}

/* --- Subpage hero --- */
.page-head {
  position: relative;
  min-height: 60svh;
  display: flex;
  align-items: flex-end;
  padding: 8rem 0 clamp(3rem, 8vh, 5.5rem);
  background: var(--stage);
  overflow: hidden;
}
.page-head__inner {
  position: relative;
  z-index: 1;
}
.page-head h1 {
  font-size: clamp(2.4rem, 1.1rem + 4vw, 4.75rem);
  max-width: 19ch;
  margin: 1.25rem 0 0;
}
.page-head h1 > span {
  display: block;
}
.page-head__turn {
  color: var(--gold-text);
}
.page-head .lede {
  margin-top: 1.5rem;
  max-width: 54ch;
}
.page-head__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem;
  margin-top: 2.25rem;
}
.page-head__terms {
  margin-top: 1rem;
  font-family: var(--mono);
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  color: color-mix(in srgb, var(--cream) 68%, transparent);
}

/* ================================================================
         HOME: the voice note — a real recording, played in place.
         One PM's WhatsApp note, transcoded and loudness-normalized; the
         player is ours so it wears the page's ink, not browser chrome.
         ================================================================ */
.proof {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2rem, 6vw, 5rem);
  align-items: center;
}
.memo {
  margin: 0;
  padding: clamp(1.5rem, 3.5vw, 2.25rem);
  border: 1px solid color-mix(in srgb, var(--gold) 26%, transparent);
  border-radius: 14px;
  background: color-mix(in srgb, var(--night) 55%, transparent);
}
/* The hero copy of the player: same instrument, smaller room. It sits
         under the CTA where the film button used to be, so it has to stay
         short enough that the terms line still lands above the fold. */
.memo--hero {
  margin-top: 1.5rem;
  max-width: 30rem;
  padding: 1.15rem 1.35rem;
}
.memo--hero .memo__play {
  width: 2.75rem;
  height: 2.75rem;
}
.memo--hero .memo__play::before {
  border-width: 7px 0 7px 11px;
}
.memo--hero .memo__quote {
  margin-top: 0.85rem;
  padding-top: 0.85rem;
  font-size: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
}

.memo__row {
  display: flex;
  align-items: center;
  gap: 1.1rem;
}
.memo__play {
  flex: none;
  width: 3.5rem;
  height: 3.5rem;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: var(--gold);
  color: var(--on-gold);
  cursor: pointer;
  transition:
    transform 0.3s var(--ease),
    box-shadow 0.3s ease;
}
.memo__play:hover {
  transform: scale(1.06);
  box-shadow: 0 12px 30px -12px color-mix(in srgb, var(--gold) 70%, transparent);
}
.memo__play::before {
  content: "";
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 9px 0 9px 14px;
  border-color: transparent transparent transparent currentColor;
  margin-left: 4px;
}
.memo.is-playing .memo__play::before {
  width: 14px;
  height: 16px;
  border-style: none;
  border-inline: 5px solid currentColor;
  margin: 0;
}
.memo__wave {
  flex: 1;
  min-width: 0;
}
.memo__track {
  position: relative;
  display: block;
  width: 100%;
  min-height: 44px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}
.memo__track::before {
  content: "";
  position: absolute;
  inset: 50% 0 auto 0;
  height: 4px;
  transform: translateY(-50%);
  border-radius: 999px;
  background: color-mix(in srgb, var(--cream) 16%, transparent);
}
.memo__fill {
  position: absolute;
  left: 0;
  top: 50%;
  width: 0%;
  height: 4px;
  transform: translateY(-50%);
  border-radius: 999px;
  background: linear-gradient(
    to right,
    color-mix(in srgb, var(--gold) 55%, transparent),
    var(--gold)
  );
  pointer-events: none;
}
.memo__meta {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  font-family: var(--mono);
  font-size: 0.6875rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--cream) 58%, transparent);
  font-variant-numeric: tabular-nums;
}
.memo__quote {
  margin: 1.25rem 0 0;
  padding-top: 1.15rem;
  border-top: 1px solid color-mix(in srgb, var(--cream) 10%, transparent);
  font-family: var(--display);
  font-size: clamp(1.05rem, 0.95rem + 0.5vw, 1.3rem);
  line-height: 1.45;
  color: color-mix(in srgb, var(--cream) 88%, transparent);
}
.proof__caption {
  margin-top: 1rem;
  font-family: var(--mono);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--ink) 58%, transparent);
}
.proof__caption::before {
  content: "✓ ";
  color: var(--gold-text);
}
@media (max-width: 54rem) {
  .proof {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ================================================================
         HOME: the compact cost strip "What it costs. What it pays."
         ================================================================ */
.pay-strip {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: center;
  margin-top: clamp(2.5rem, 6vh, 4rem);
  padding-block: clamp(2rem, 5vh, 3.5rem);
  border-block: 1px solid color-mix(in srgb, var(--ink) 16%, transparent);
}
.pay-strip__fact {
  margin: 0;
}
.pay-strip__number {
  display: block;
  font-family: var(--display);
  font-size: clamp(2.25rem, 1.4rem + 3vw, 3.75rem);
  line-height: 1;
  color: var(--ink);
}
.pay-strip__label {
  display: block;
  margin-top: 0.6rem;
  max-width: 26ch;
  font-family: var(--mono);
  font-size: 0.75rem;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--ink) 70%, transparent);
}
.pay-strip__fact--money .pay-strip__number {
  color: var(--gold-text);
}
@media (max-width: 46rem) {
  .pay-strip {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ================================================================
         PRICING: plan cards (structure ported from the admin billing page)
         ================================================================ */
.plans {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1.5rem, 4vw, 2.5rem);
  margin-top: clamp(2.5rem, 6vh, 4rem);
}
.plan {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: clamp(1.75rem, 3vw, 2.5rem);
  border: 1px solid color-mix(in srgb, var(--ink) 16%, transparent);
  border-radius: 16px;
  background: color-mix(in srgb, var(--cream-fixed) 55%, transparent);
}
.plan--featured {
  border-color: color-mix(in srgb, var(--gold) 55%, transparent);
  background: color-mix(in srgb, var(--cream-fixed) 74%, transparent);
  box-shadow: 0 34px 80px -50px rgba(34, 55, 44, 0.55);
}
.plan__badge {
  align-self: flex-start;
  margin-bottom: 1rem;
  padding: 0.28rem 0.7rem;
  border: 1px solid color-mix(in srgb, var(--gold) 45%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--gold) 12%, transparent);
  color: var(--gold-text);
  font-family: var(--mono);
  font-size: 0.6875rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.plan__name {
  font-family: var(--mono);
  font-size: 0.75rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--terracotta-ink);
}
.plan__price {
  display: flex;
  align-items: baseline;
  gap: 0.55rem;
  margin-top: 1rem;
}
.plan__price strong {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(2.75rem, 1.6rem + 3vw, 4rem);
  line-height: 0.95;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.plan__price small {
  font-family: var(--mono);
  font-size: 0.8125rem;
  letter-spacing: 0.04em;
  color: color-mix(in srgb, var(--ink) 66%, transparent);
}
.plan__body {
  margin-top: 1.1rem;
  color: color-mix(in srgb, var(--ink) 72%, transparent);
  font-size: 0.9375rem;
}
.plan ul {
  margin: 1.6rem 0 0;
  padding: 1.6rem 0 0;
  list-style: none;
  border-top: 1px solid color-mix(in srgb, var(--ink) 15%, transparent);
}
.plan li {
  display: flex;
  gap: 0.7rem;
  padding-block: 0.4rem;
  font-size: 0.9375rem;
  color: color-mix(in srgb, var(--ink) 80%, transparent);
}
.plan li::before {
  content: "✓";
  flex: none;
  margin-top: 0.05rem;
  color: var(--gold-text);
}
.plan .btn {
  align-self: flex-start;
  margin-top: 2rem;
}
.plan .btn--ghost {
  color: var(--ink);
  border-color: color-mix(in srgb, var(--ink) 32%, transparent);
}
.plan .btn--ghost:hover {
  border-color: var(--gold-ink);
  color: var(--gold-ink);
}
@media (max-width: 46rem) {
  .plans {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* --- Price context rows under the cards --- */
.plans-note {
  margin-top: 1.25rem;
  font-family: var(--mono);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--ink) 72%, transparent);
}
.price-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
  gap: 1px;
  margin-top: clamp(2.5rem, 6vh, 4rem);
  border: 1px solid color-mix(in srgb, var(--ink) 13%, transparent);
  background: color-mix(in srgb, var(--ink) 13%, transparent);
  border-radius: 14px;
  overflow: hidden;
}
.price-strip__cell {
  padding: clamp(1.25rem, 3vw, 1.75rem);
  background: color-mix(in srgb, var(--cream-fixed) 72%, transparent);
}
.price-strip__cell strong {
  display: block;
  font-family: var(--display);
  font-size: 1.6rem;
  font-weight: 400;
  color: var(--ink);
}
.price-strip__cell span {
  display: block;
  margin-top: 0.4rem;
  font-family: var(--mono);
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--ink) 70%, transparent);
}
.price-strip__cell--hot strong {
  color: var(--gold-text);
}

/* --- How hosts earn: the four streams --- */
.streams {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(1rem, 2.5vw, 1.75rem);
  margin-top: clamp(2.5rem, 6vh, 4rem);
}
.stream {
  padding: clamp(1.25rem, 2.5vw, 1.75rem);
  border: 1px solid color-mix(in srgb, var(--cream) 13%, transparent);
  border-radius: 14px;
  background: color-mix(in srgb, var(--night) 55%, transparent);
}
.stream__tag {
  font-family: var(--mono);
  font-size: 0.6875rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold-text);
}
.stream h3 {
  font-size: clamp(1.2rem, 1rem + 0.6vw, 1.5rem);
  margin-top: 0.7rem;
}
.stream p {
  margin-top: 0.6rem;
  color: color-mix(in srgb, var(--cream) 68%, transparent);
  font-size: 0.9rem;
}
.stream__state {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: 0.9rem;
  font-family: var(--mono);
  font-size: 0.6875rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--cream) 70%, transparent);
}
.stream__state::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--teal);
}
.stream__state--soon::before {
  background: var(--gold);
}
@media (max-width: 62rem) {
  .streams {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 38rem) {
  .streams {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ================================================================
         FREE GUEST GUIDE
         An editorial product page: dark hospitality stage, parchment
         working surfaces, and a browser guide built from the real guest UI.
         ================================================================ */
.free-guide-page {
  background: var(--night);
}

.free-guide-page section {
  position: relative;
  overflow: hidden;
}

.free-guide-page h2 {
  max-width: 13ch;
}

.free-guide-hero {
  min-height: min(64rem, 100svh);
  display: grid;
  align-items: center;
  padding-block: clamp(8rem, 14vh, 11rem) clamp(5rem, 10vh, 8rem);
  background:
    radial-gradient(
      circle at 78% 22%,
      color-mix(in srgb, var(--teal) 31%, transparent),
      transparent 32rem
    ),
    linear-gradient(145deg, var(--night-fixed), #10241d 65%, #17352b);
  color: var(--cream-fixed);
}

.free-guide-hero__grain {
  position: absolute;
  inset: 0;
  opacity: 0.22;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.2'/%3E%3C/svg%3E");
  mix-blend-mode: soft-light;
}

.free-guide-hero__grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1.04fr) minmax(20rem, 0.76fr);
  gap: clamp(3rem, 8vw, 8rem);
  align-items: center;
}

.free-guide-hero__copy h1 {
  max-width: 10.5ch;
  margin-top: 1.15rem;
  font-size: clamp(3.2rem, 7.3vw, 7.35rem);
  line-height: 0.93;
  letter-spacing: -0.045em;
}

.free-guide-hero__lede {
  max-width: 39rem;
  margin-top: clamp(1.5rem, 3vw, 2.25rem);
  color: color-mix(in srgb, var(--cream-fixed) 76%, transparent);
  font-size: clamp(1.04rem, 0.98rem + 0.35vw, 1.3rem);
  line-height: 1.6;
}

.free-guide-hero__actions,
.free-guide-start__inner > div {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 2rem;
}

.free-guide-proof {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  margin: 1.4rem 0 0;
  padding: 0;
  list-style: none;
  color: color-mix(in srgb, var(--cream-fixed) 64%, transparent);
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.free-guide-proof li {
  display: flex;
  align-items: center;
}

.free-guide-proof li:not(:last-child)::after {
  content: "";
  width: 3px;
  height: 3px;
  margin-inline: 0.7rem;
  border-radius: 50%;
  background: var(--gold);
}

.browser-guide {
  width: min(100%, 28rem);
  justify-self: end;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--cream-fixed) 20%, transparent);
  border-radius: 1.5rem;
  background: #f3efe4;
  box-shadow: 0 2.5rem 7rem -3rem rgba(0, 0, 0, 0.92);
  color: var(--ink);
  transform: rotate(1.2deg);
}

.browser-guide__bar {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  min-height: 2.45rem;
  padding: 0 0.9rem;
  background: #ddd8ca;
}

.browser-guide__bar > span {
  width: 0.48rem;
  height: 0.48rem;
  border-radius: 50%;
  background: color-mix(in srgb, var(--ink) 28%, transparent);
}

.browser-guide__bar small {
  margin-left: auto;
  font-family: var(--mono);
  font-size: 0.56rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.58;
}

.browser-guide__hero {
  min-height: 26rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 1.3rem 1.4rem 2rem;
  background:
    linear-gradient(to bottom, transparent 35%, rgba(9, 35, 28, 0.58)),
    linear-gradient(145deg, #25594c, #103329 65%, #071d17);
  color: var(--cream-fixed);
}

.browser-guide__top {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 0.65rem;
  font-family: var(--mono);
  font-size: 0.58rem;
  letter-spacing: 0.18em;
}

.browser-guide__mark {
  display: grid;
  place-items: center;
  width: 2.15rem;
  height: 2.15rem;
  border-radius: 50%;
  background: var(--cream-fixed);
  color: var(--ink);
  font-family: var(--display);
  font-size: 1rem;
}

.browser-guide__save {
  justify-self: end;
  padding: 0.45rem 0.65rem;
  border: 1px solid color-mix(in srgb, var(--cream-fixed) 42%, transparent);
  border-radius: 999px;
  letter-spacing: 0.03em;
}

.browser-guide__title small {
  color: var(--gold);
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.16em;
}

.browser-guide__title strong {
  display: block;
  margin-top: 0.5rem;
  font-family: var(--display);
  font-size: clamp(2.65rem, 5vw, 4.2rem);
  font-weight: 400;
  line-height: 0.9;
  letter-spacing: -0.04em;
}

.browser-guide__title p {
  margin-top: 1rem;
  color: color-mix(in srgb, var(--cream-fixed) 72%, transparent);
  font-size: 0.92rem;
}

.browser-guide__nav {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  padding: 1rem 1.25rem;
  border-bottom: 1px solid #d6cfbe;
  font-size: 0.78rem;
  font-weight: 600;
  text-align: center;
}

.browser-guide__cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.75rem;
  padding: 1rem;
}

.browser-guide__cards article {
  min-height: 8.2rem;
  padding: 1rem;
  border: 1px solid #d7d0bf;
}

.browser-guide__cards small,
.browser-guide__cards span,
.browser-guide__cards code {
  display: block;
}

.browser-guide__cards small {
  color: var(--gold-ink);
  font-family: var(--mono);
  font-size: 0.58rem;
  letter-spacing: 0.15em;
}

.browser-guide__cards strong {
  display: block;
  margin-top: 0.6rem;
  font-family: var(--display);
  font-size: 1.25rem;
  font-weight: 400;
  line-height: 1.1;
}

.browser-guide__cards code,
.browser-guide__cards span {
  margin-top: 0.55rem;
  color: color-mix(in srgb, var(--ink) 65%, transparent);
  font-family: var(--mono);
  font-size: 0.62rem;
}

.free-guide-inside,
.free-guide-editor,
.free-guide-allowance,
.free-guide-faq {
  background: var(--cream-bg);
  color: var(--ink);
}

.free-guide-inside,
.free-guide-editor,
.free-guide-publish,
.free-guide-allowance,
.free-guide-upgrade,
.free-guide-faq {
  padding-block: clamp(5.5rem, 12vw, 10rem);
}

.free-guide-intro {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(15rem, 0.52fr);
  gap: 1.5rem clamp(2rem, 8vw, 8rem);
  align-items: end;
}

.free-guide-intro .kicker {
  grid-column: 1 / -1;
}

.free-guide-intro > p:last-child {
  max-width: 35rem;
  color: color-mix(in srgb, var(--ink) 68%, transparent);
}

.free-guide-index {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 0;
  margin-top: clamp(3.5rem, 8vw, 6.5rem);
  border-top: 1px solid color-mix(in srgb, var(--ink) 18%, transparent);
}

.free-guide-index article {
  grid-column: span 6;
  min-height: 16rem;
  padding: clamp(1.5rem, 4vw, 3rem);
  border-bottom: 1px solid color-mix(in srgb, var(--ink) 18%, transparent);
}

.free-guide-index article:nth-child(odd) {
  border-right: 1px solid color-mix(in srgb, var(--ink) 18%, transparent);
}

.free-guide-index article > span,
.free-guide-steps > li > span {
  color: var(--gold-ink);
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
}

.free-guide-index h3 {
  max-width: 17ch;
  margin-top: 2.7rem;
  font-size: clamp(1.55rem, 1.2rem + 1vw, 2.25rem);
}

.free-guide-index p {
  max-width: 35rem;
  margin-top: 0.85rem;
  color: color-mix(in srgb, var(--ink) 67%, transparent);
}

.free-guide-editor {
  padding-top: 0;
}

.free-guide-editor__grid,
.free-guide-upgrade__grid,
.free-guide-allowance__grid,
.free-guide-faq__grid {
  display: grid;
  grid-template-columns: minmax(15rem, 0.7fr) minmax(0, 1.3fr);
  gap: clamp(3rem, 8vw, 8rem);
  align-items: center;
}

.free-guide-editor__copy > p:not(.kicker),
.free-guide-upgrade__grid > div > p:not(.kicker) {
  margin-top: 1.35rem;
  color: color-mix(in srgb, var(--ink) 68%, transparent);
}

.free-guide-editor__copy ul {
  margin: 2rem 0 0;
  padding: 0;
  list-style: none;
}

.free-guide-editor__copy li {
  padding-block: 0.75rem;
  border-top: 1px solid color-mix(in srgb, var(--ink) 16%, transparent);
  font-size: 0.92rem;
}

.free-guide-shot {
  margin: 0;
}

.free-guide-shot button {
  position: relative;
  display: block;
  width: 100%;
  overflow: hidden;
  padding: 0;
  border: 1px solid color-mix(in srgb, var(--ink) 18%, transparent);
  border-radius: 0.8rem;
  background: #ded8c8;
  cursor: zoom-in;
  box-shadow: 0 2rem 4rem -3rem rgba(17, 34, 27, 0.65);
}

.free-guide-shot img {
  width: 100%;
  height: auto;
  transition: transform 0.65s var(--ease);
}

.free-guide-shot button:hover img {
  transform: scale(1.012);
}

.free-guide-shot button span {
  position: absolute;
  right: 0.8rem;
  bottom: 0.8rem;
  padding: 0.5rem 0.65rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--night-fixed) 88%, transparent);
  color: var(--cream-fixed);
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.free-guide-shot figcaption {
  max-width: 46rem;
  margin-top: 0.8rem;
  color: color-mix(in srgb, var(--ink) 58%, transparent);
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.05em;
}

.free-guide-publish,
.free-guide-upgrade,
.free-guide-start {
  background: var(--night-fixed);
  color: var(--cream-fixed);
}

.free-guide-intro--light > p:last-child {
  color: color-mix(in srgb, var(--cream-fixed) 70%, transparent);
}

.free-guide-steps {
  margin: clamp(3.5rem, 8vw, 6.5rem) 0 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid color-mix(in srgb, var(--cream-fixed) 18%, transparent);
}

.free-guide-steps li {
  display: grid;
  grid-template-columns: 6rem minmax(0, 1fr);
  gap: 1.5rem;
  padding-block: clamp(1.75rem, 4vw, 3rem);
  border-bottom: 1px solid color-mix(in srgb, var(--cream-fixed) 18%, transparent);
}

.free-guide-steps h3 {
  font-size: clamp(1.6rem, 1.25rem + 1vw, 2.4rem);
}

.free-guide-steps p {
  max-width: 45rem;
  margin-top: 0.65rem;
  color: color-mix(in srgb, var(--cream-fixed) 66%, transparent);
}

.free-guide-allowance__grid {
  grid-template-columns: minmax(0, 0.83fr) minmax(20rem, 1.17fr);
}

.free-guide-allowance__lede {
  max-width: 36rem;
  margin-top: 1.5rem;
  color: color-mix(in srgb, var(--ink) 68%, transparent);
}

.free-guide-allowance .btn {
  margin-top: 2rem;
}

.free-guide-ledger {
  margin: 0;
  border-top: 1px solid color-mix(in srgb, var(--ink) 22%, transparent);
}

.free-guide-ledger div {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 2rem;
  padding-block: 1.1rem;
  border-bottom: 1px solid color-mix(in srgb, var(--ink) 22%, transparent);
}

.free-guide-ledger dt {
  color: color-mix(in srgb, var(--ink) 66%, transparent);
}

.free-guide-ledger dd {
  margin: 0;
  color: var(--ink);
  font-family: var(--mono);
  font-size: 0.78rem;
  letter-spacing: 0.05em;
  text-align: right;
}

.free-guide-upgrade__grid {
  grid-template-columns: minmax(0, 1.25fr) minmax(15rem, 0.75fr);
}

.free-guide-upgrade .free-guide-shot {
  order: -1;
}

.free-guide-shot--dark button {
  border-color: color-mix(in srgb, var(--cream-fixed) 18%, transparent);
  background: #10251d;
  box-shadow: 0 2rem 5rem -3rem rgba(0, 0, 0, 0.9);
}

.free-guide-shot--dark figcaption {
  color: color-mix(in srgb, var(--cream-fixed) 58%, transparent);
}

.free-guide-upgrade__grid > div > p:not(.kicker) {
  color: color-mix(in srgb, var(--cream-fixed) 68%, transparent);
}

.text-link {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  margin-top: 1.8rem;
  color: var(--gold);
  font-weight: 600;
  text-decoration: none;
}

.text-link span {
  transition: transform 0.3s var(--ease);
}

.text-link:hover span {
  transform: translateX(0.25rem);
}

.free-guide-faq__grid {
  align-items: start;
}

.free-guide-faq__list {
  border-top: 1px solid color-mix(in srgb, var(--ink) 22%, transparent);
}

.free-guide-faq details {
  border-bottom: 1px solid color-mix(in srgb, var(--ink) 22%, transparent);
}

.free-guide-faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-block: 1.4rem;
  cursor: pointer;
  font-family: var(--display);
  font-size: clamp(1.2rem, 1rem + 0.55vw, 1.55rem);
  list-style: none;
}

.free-guide-faq summary::-webkit-details-marker {
  display: none;
}

.free-guide-faq summary::after {
  content: "+";
  color: var(--gold-ink);
  font-family: var(--body);
  font-size: 1.15rem;
}

.free-guide-faq details[open] summary::after {
  content: "−";
}

.free-guide-faq details p {
  max-width: 45rem;
  padding: 0 3rem 1.5rem 0;
  color: color-mix(in srgb, var(--ink) 68%, transparent);
}

.free-guide-start {
  padding-block: clamp(6rem, 14vw, 12rem);
  text-align: center;
}

.free-guide-start::before {
  content: "";
  position: absolute;
  inset: 10% 12%;
  border: 1px solid color-mix(in srgb, var(--gold) 20%, transparent);
  border-radius: 50%;
  transform: scale(1.7, 0.72);
  pointer-events: none;
}

.free-guide-start__inner {
  position: relative;
  z-index: 1;
  display: grid;
  justify-items: center;
}

.free-guide-start h2 {
  max-width: 16ch;
  margin-top: 1rem;
  font-size: clamp(2.7rem, 6vw, 6rem);
  letter-spacing: -0.035em;
}

.free-guide-start p:not(.kicker) {
  max-width: 40rem;
  margin-top: 1.3rem;
  color: color-mix(in srgb, var(--cream-fixed) 68%, transparent);
}

@media (max-width: 58rem) {
  .free-guide-hero {
    min-height: auto;
  }
  .free-guide-hero__grid,
  .free-guide-editor__grid,
  .free-guide-upgrade__grid,
  .free-guide-allowance__grid,
  .free-guide-faq__grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .browser-guide {
    width: min(100%, 30rem);
    justify-self: center;
    transform: none;
  }
  .free-guide-intro {
    grid-template-columns: minmax(0, 1fr);
  }
  .free-guide-intro .kicker {
    grid-column: auto;
  }
  .free-guide-editor__copy {
    max-width: 42rem;
  }
  .free-guide-upgrade .free-guide-shot {
    order: 0;
  }
}

@media (max-width: 42rem) {
  .free-guide-hero__copy h1 {
    font-size: clamp(3rem, 15vw, 4.65rem);
  }
  .free-guide-proof {
    display: grid;
    gap: 0.45rem;
  }
  .free-guide-proof li:not(:last-child)::after {
    display: none;
  }
  .browser-guide__hero {
    min-height: 22rem;
  }
  .browser-guide__cards {
    grid-template-columns: minmax(0, 1fr);
  }
  .free-guide-index article {
    grid-column: 1 / -1;
    min-height: 0;
    padding: 2rem 0;
    border-right: 0 !important;
  }
  .free-guide-index h3 {
    margin-top: 1.5rem;
  }
  .free-guide-steps li {
    grid-template-columns: 3.5rem minmax(0, 1fr);
  }
  .free-guide-ledger div {
    grid-template-columns: minmax(0, 1fr);
    gap: 0.3rem;
  }
  .free-guide-ledger dd {
    text-align: left;
  }
  .free-guide-start__inner > div,
  .free-guide-hero__actions {
    width: 100%;
  }
  .free-guide-start .btn,
  .free-guide-hero__actions .btn {
    width: 100%;
  }
}

+/* ================================================================
         FREE GUEST GUIDE
         An editorial product page: dark hospitality stage, parchment
         working surfaces, and a browser guide built from the real guest UI.
         ================================================================ */
.free-guide-page {
  background: var(--night);
}

.free-guide-page section {
  position: relative;
  overflow: hidden;
}

.free-guide-page h2 {
  max-width: 13ch;
}

.free-guide-hero {
  min-height: min(64rem, 100svh);
  display: grid;
  align-items: center;
  padding-block: clamp(8rem, 14vh, 11rem) clamp(5rem, 10vh, 8rem);
  background:
    radial-gradient(
      circle at 78% 22%,
      color-mix(in srgb, var(--teal) 31%, transparent),
      transparent 32rem
    ),
    linear-gradient(145deg, var(--night-fixed), #10241d 65%, #17352b);
  color: var(--cream-fixed);
}

.free-guide-hero__grain {
  position: absolute;
  inset: 0;
  opacity: 0.22;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.2'/%3E%3C/svg%3E");
  mix-blend-mode: soft-light;
}

.free-guide-hero__grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1.04fr) minmax(20rem, 0.76fr);
  gap: clamp(3rem, 8vw, 8rem);
  align-items: center;
}

.free-guide-hero__copy h1 {
  max-width: 10.5ch;
  margin-top: 1.15rem;
  font-size: clamp(3.2rem, 7.3vw, 7.35rem);
  line-height: 0.93;
  letter-spacing: -0.045em;
}

.free-guide-hero__lede {
  max-width: 39rem;
  margin-top: clamp(1.5rem, 3vw, 2.25rem);
  color: color-mix(in srgb, var(--cream-fixed) 76%, transparent);
  font-size: clamp(1.04rem, 0.98rem + 0.35vw, 1.3rem);
  line-height: 1.6;
}

.free-guide-hero__actions,
.free-guide-start__inner > div {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 2rem;
}

.free-guide-proof {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  margin: 1.4rem 0 0;
  padding: 0;
  list-style: none;
  color: color-mix(in srgb, var(--cream-fixed) 64%, transparent);
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.free-guide-proof li {
  display: flex;
  align-items: center;
}

.free-guide-proof li:not(:last-child)::after {
  content: "";
  width: 3px;
  height: 3px;
  margin-inline: 0.7rem;
  border-radius: 50%;
  background: var(--gold);
}

.browser-guide {
  width: min(100%, 28rem);
  justify-self: end;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--cream-fixed) 20%, transparent);
  border-radius: 1.5rem;
  background: #f3efe4;
  box-shadow: 0 2.5rem 7rem -3rem rgba(0, 0, 0, 0.92);
  color: var(--ink);
  transform: rotate(1.2deg);
}

.browser-guide__bar {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  min-height: 2.45rem;
  padding: 0 0.9rem;
  background: #ddd8ca;
}

.browser-guide__bar > span {
  width: 0.48rem;
  height: 0.48rem;
  border-radius: 50%;
  background: color-mix(in srgb, var(--ink) 28%, transparent);
}

.browser-guide__bar small {
  margin-left: auto;
  font-family: var(--mono);
  font-size: 0.56rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.58;
}

.browser-guide__hero {
  min-height: 26rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 1.3rem 1.4rem 2rem;
  background:
    linear-gradient(to bottom, transparent 35%, rgba(9, 35, 28, 0.58)),
    linear-gradient(145deg, #25594c, #103329 65%, #071d17);
  color: var(--cream-fixed);
}

.browser-guide__top {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 0.65rem;
  font-family: var(--mono);
  font-size: 0.58rem;
  letter-spacing: 0.18em;
}

.browser-guide__mark {
  display: grid;
  place-items: center;
  width: 2.15rem;
  height: 2.15rem;
  border-radius: 50%;
  background: var(--cream-fixed);
  color: var(--ink);
  font-family: var(--display);
  font-size: 1rem;
}

.browser-guide__save {
  justify-self: end;
  padding: 0.45rem 0.65rem;
  border: 1px solid color-mix(in srgb, var(--cream-fixed) 42%, transparent);
  border-radius: 999px;
  letter-spacing: 0.03em;
}

.browser-guide__title small {
  color: var(--gold);
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.16em;
}

.browser-guide__title strong {
  display: block;
  margin-top: 0.5rem;
  font-family: var(--display);
  font-size: clamp(2.65rem, 5vw, 4.2rem);
  font-weight: 400;
  line-height: 0.9;
  letter-spacing: -0.04em;
}

.browser-guide__title p {
  margin-top: 1rem;
  color: color-mix(in srgb, var(--cream-fixed) 72%, transparent);
  font-size: 0.92rem;
}

.browser-guide__nav {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  padding: 1rem 1.25rem;
  border-bottom: 1px solid #d6cfbe;
  font-size: 0.78rem;
  font-weight: 600;
  text-align: center;
}

.browser-guide__cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.75rem;
  padding: 1rem;
}

.browser-guide__cards article {
  min-height: 8.2rem;
  padding: 1rem;
  border: 1px solid #d7d0bf;
}

.browser-guide__cards small,
.browser-guide__cards span,
.browser-guide__cards code {
  display: block;
}

.browser-guide__cards small {
  color: var(--gold-ink);
  font-family: var(--mono);
  font-size: 0.58rem;
  letter-spacing: 0.15em;
}

.browser-guide__cards strong {
  display: block;
  margin-top: 0.6rem;
  font-family: var(--display);
  font-size: 1.25rem;
  font-weight: 400;
  line-height: 1.1;
}

.browser-guide__cards code,
.browser-guide__cards span {
  margin-top: 0.55rem;
  color: color-mix(in srgb, var(--ink) 65%, transparent);
  font-family: var(--mono);
  font-size: 0.62rem;
}

.free-guide-inside,
.free-guide-editor,
.free-guide-allowance,
.free-guide-faq {
  background: var(--cream-bg);
  color: var(--ink);
}

.free-guide-inside,
.free-guide-editor,
.free-guide-publish,
.free-guide-allowance,
.free-guide-upgrade,
.free-guide-faq {
  padding-block: clamp(5.5rem, 12vw, 10rem);
}

.free-guide-intro {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(15rem, 0.52fr);
  gap: 1.5rem clamp(2rem, 8vw, 8rem);
  align-items: end;
}

.free-guide-intro .kicker {
  grid-column: 1 / -1;
}

.free-guide-intro > p:last-child {
  max-width: 35rem;
  color: color-mix(in srgb, var(--ink) 68%, transparent);
}

.free-guide-index {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 0;
  margin-top: clamp(3.5rem, 8vw, 6.5rem);
  border-top: 1px solid color-mix(in srgb, var(--ink) 18%, transparent);
}

.free-guide-index article {
  grid-column: span 6;
  min-height: 16rem;
  padding: clamp(1.5rem, 4vw, 3rem);
  border-bottom: 1px solid color-mix(in srgb, var(--ink) 18%, transparent);
}

.free-guide-index article:nth-child(odd) {
  border-right: 1px solid color-mix(in srgb, var(--ink) 18%, transparent);
}

.free-guide-index article > span,
.free-guide-steps > li > span {
  color: var(--gold-ink);
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
}

.free-guide-index h3 {
  max-width: 17ch;
  margin-top: 2.7rem;
  font-size: clamp(1.55rem, 1.2rem + 1vw, 2.25rem);
}

.free-guide-index p {
  max-width: 35rem;
  margin-top: 0.85rem;
  color: color-mix(in srgb, var(--ink) 67%, transparent);
}

.free-guide-editor {
  padding-top: 0;
}

.free-guide-editor__grid,
.free-guide-upgrade__grid,
.free-guide-allowance__grid,
.free-guide-faq__grid {
  display: grid;
  grid-template-columns: minmax(15rem, 0.7fr) minmax(0, 1.3fr);
  gap: clamp(3rem, 8vw, 8rem);
  align-items: center;
}

.free-guide-editor__copy > p:not(.kicker),
.free-guide-upgrade__grid > div > p:not(.kicker) {
  margin-top: 1.35rem;
  color: color-mix(in srgb, var(--ink) 68%, transparent);
}

.free-guide-editor__copy ul {
  margin: 2rem 0 0;
  padding: 0;
  list-style: none;
}

.free-guide-editor__copy li {
  padding-block: 0.75rem;
  border-top: 1px solid color-mix(in srgb, var(--ink) 16%, transparent);
  font-size: 0.92rem;
}

.free-guide-shot {
  margin: 0;
}

.free-guide-shot button {
  position: relative;
  display: block;
  width: 100%;
  overflow: hidden;
  padding: 0;
  border: 1px solid color-mix(in srgb, var(--ink) 18%, transparent);
  border-radius: 0.8rem;
  background: #ded8c8;
  cursor: zoom-in;
  box-shadow: 0 2rem 4rem -3rem rgba(17, 34, 27, 0.65);
}

.free-guide-shot img {
  width: 100%;
  height: auto;
  transition: transform 0.65s var(--ease);
}

.free-guide-shot button:hover img {
  transform: scale(1.012);
}

.free-guide-shot button span {
  position: absolute;
  right: 0.8rem;
  bottom: 0.8rem;
  padding: 0.5rem 0.65rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--night-fixed) 88%, transparent);
  color: var(--cream-fixed);
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.free-guide-shot figcaption {
  max-width: 46rem;
  margin-top: 0.8rem;
  color: color-mix(in srgb, var(--ink) 58%, transparent);
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.05em;
}

.free-guide-publish,
.free-guide-upgrade,
.free-guide-start {
  background: var(--night-fixed);
  color: var(--cream-fixed);
}

.free-guide-intro--light > p:last-child {
  color: color-mix(in srgb, var(--cream-fixed) 70%, transparent);
}

.free-guide-steps {
  margin: clamp(3.5rem, 8vw, 6.5rem) 0 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid color-mix(in srgb, var(--cream-fixed) 18%, transparent);
}

.free-guide-steps li {
  display: grid;
  grid-template-columns: 6rem minmax(0, 1fr);
  gap: 1.5rem;
  padding-block: clamp(1.75rem, 4vw, 3rem);
  border-bottom: 1px solid color-mix(in srgb, var(--cream-fixed) 18%, transparent);
}

.free-guide-steps h3 {
  font-size: clamp(1.6rem, 1.25rem + 1vw, 2.4rem);
}

.free-guide-steps p {
  max-width: 45rem;
  margin-top: 0.65rem;
  color: color-mix(in srgb, var(--cream-fixed) 66%, transparent);
}

.free-guide-allowance__grid {
  grid-template-columns: minmax(0, 0.83fr) minmax(20rem, 1.17fr);
}

.free-guide-allowance__lede {
  max-width: 36rem;
  margin-top: 1.5rem;
  color: color-mix(in srgb, var(--ink) 68%, transparent);
}

.free-guide-allowance .btn {
  margin-top: 2rem;
}

.free-guide-ledger {
  margin: 0;
  border-top: 1px solid color-mix(in srgb, var(--ink) 22%, transparent);
}

.free-guide-ledger div {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 2rem;
  padding-block: 1.1rem;
  border-bottom: 1px solid color-mix(in srgb, var(--ink) 22%, transparent);
}

.free-guide-ledger dt {
  color: color-mix(in srgb, var(--ink) 66%, transparent);
}

.free-guide-ledger dd {
  margin: 0;
  color: var(--ink);
  font-family: var(--mono);
  font-size: 0.78rem;
  letter-spacing: 0.05em;
  text-align: right;
}

.free-guide-upgrade__grid {
  grid-template-columns: minmax(0, 1.25fr) minmax(15rem, 0.75fr);
}

.free-guide-upgrade .free-guide-shot {
  order: -1;
}

.free-guide-shot--dark button {
  border-color: color-mix(in srgb, var(--cream-fixed) 18%, transparent);
  background: #10251d;
  box-shadow: 0 2rem 5rem -3rem rgba(0, 0, 0, 0.9);
}

.free-guide-shot--dark figcaption {
  color: color-mix(in srgb, var(--cream-fixed) 58%, transparent);
}

.free-guide-upgrade__grid > div > p:not(.kicker) {
  color: color-mix(in srgb, var(--cream-fixed) 68%, transparent);
}

.text-link {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  margin-top: 1.8rem;
  color: var(--gold);
  font-weight: 600;
  text-decoration: none;
}

.text-link span {
  transition: transform 0.3s var(--ease);
}

.text-link:hover span {
  transform: translateX(0.25rem);
}

.free-guide-faq__grid {
  align-items: start;
}

.free-guide-faq__list {
  border-top: 1px solid color-mix(in srgb, var(--ink) 22%, transparent);
}

.free-guide-faq details {
  border-bottom: 1px solid color-mix(in srgb, var(--ink) 22%, transparent);
}

.free-guide-faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-block: 1.4rem;
  cursor: pointer;
  font-family: var(--display);
  font-size: clamp(1.2rem, 1rem + 0.55vw, 1.55rem);
  list-style: none;
}

.free-guide-faq summary::-webkit-details-marker {
  display: none;
}

.free-guide-faq summary::after {
  content: "+";
  color: var(--gold-ink);
  font-family: var(--body);
  font-size: 1.15rem;
}

.free-guide-faq details[open] summary::after {
  content: "−";
}

.free-guide-faq details p {
  max-width: 45rem;
  padding: 0 3rem 1.5rem 0;
  color: color-mix(in srgb, var(--ink) 68%, transparent);
}

.free-guide-start {
  padding-block: clamp(6rem, 14vw, 12rem);
  text-align: center;
}

.free-guide-start::before {
  content: "";
  position: absolute;
  inset: 10% 12%;
  border: 1px solid color-mix(in srgb, var(--gold) 20%, transparent);
  border-radius: 50%;
  transform: scale(1.7, 0.72);
  pointer-events: none;
}

.free-guide-start__inner {
  position: relative;
  z-index: 1;
  display: grid;
  justify-items: center;
}

.free-guide-start h2 {
  max-width: 16ch;
  margin-top: 1rem;
  font-size: clamp(2.7rem, 6vw, 6rem);
  letter-spacing: -0.035em;
}

.free-guide-start p:not(.kicker) {
  max-width: 40rem;
  margin-top: 1.3rem;
  color: color-mix(in srgb, var(--cream-fixed) 68%, transparent);
}

@media (max-width: 58rem) {
  .free-guide-hero {
    min-height: auto;
  }
  .free-guide-hero__grid,
  .free-guide-editor__grid,
  .free-guide-upgrade__grid,
  .free-guide-allowance__grid,
  .free-guide-faq__grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .browser-guide {
    width: min(100%, 30rem);
    justify-self: center;
    transform: none;
  }
  .free-guide-intro {
    grid-template-columns: minmax(0, 1fr);
  }
  .free-guide-intro .kicker {
    grid-column: auto;
  }
  .free-guide-editor__copy {
    max-width: 42rem;
  }
  .free-guide-upgrade .free-guide-shot {
    order: 0;
  }
}

@media (max-width: 42rem) {
  .free-guide-hero__copy h1 {
    font-size: clamp(3rem, 15vw, 4.65rem);
  }
  .free-guide-proof {
    display: grid;
    gap: 0.45rem;
  }
  .free-guide-proof li:not(:last-child)::after {
    display: none;
  }
  .browser-guide__hero {
    min-height: 22rem;
  }
  .browser-guide__cards {
    grid-template-columns: minmax(0, 1fr);
  }
  .free-guide-index article {
    grid-column: 1 / -1;
    min-height: 0;
    padding: 2rem 0;
    border-right: 0 !important;
  }
  .free-guide-index h3 {
    margin-top: 1.5rem;
  }
  .free-guide-steps li {
    grid-template-columns: 3.5rem minmax(0, 1fr);
  }
  .free-guide-ledger div {
    grid-template-columns: minmax(0, 1fr);
    gap: 0.3rem;
  }
  .free-guide-ledger dd {
    text-align: left;
  }
  .free-guide-start__inner > div,
  .free-guide-hero__actions {
    width: 100%;
  }
  .free-guide-start .btn,
  .free-guide-hero__actions .btn {
    width: 100%;
  }
}


/* ================================================================
         THE CALCULATOR
         Plain arithmetic, dotted-ledger rows, gold figures. No percentages.
         ================================================================ */
.calc {
  margin-top: clamp(2.5rem, 6vh, 4rem);
  padding: clamp(1.5rem, 3vw, 2.75rem);
  border: 1px solid color-mix(in srgb, var(--ink) 16%, transparent);
  border-radius: 16px;
  background: color-mix(in srgb, var(--cream-fixed) 72%, transparent);
}
.calc__intro {
  max-width: 58ch;
  color: color-mix(in srgb, var(--ink) 72%, transparent);
}
.calc__intro strong {
  color: var(--ink);
  font-weight: 600;
}
.calc__dials {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.2fr) minmax(0, 0.9fr);
  gap: clamp(1.5rem, 3.5vw, 3rem);
  margin-top: 2.25rem;
}
.calc__dials label > span {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  color: color-mix(in srgb, var(--ink) 72%, transparent);
  font-size: 0.875rem;
}
.calc__dials strong {
  font-family: var(--mono);
  font-size: 1rem;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.calc__dials input[type="range"] {
  appearance: none;
  width: 100%;
  height: 5px;
  margin-top: 14px;
  background: color-mix(in srgb, var(--ink) 18%, transparent);
  border-radius: 999px;
  cursor: pointer;
}
.calc__dials input[type="range"]::-webkit-slider-thumb {
  appearance: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--gold);
  border: 3px solid var(--cream-fixed);
  box-shadow: 0 2px 10px color-mix(in srgb, var(--ink) 30%, transparent);
}
.calc__dials input[type="range"]::-moz-range-thumb {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--gold);
  border: 3px solid var(--cream-fixed);
}
.calc__dials input[type="range"]:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--gold) 38%, transparent);
  outline-offset: 5px;
}
@media (max-width: 60rem) {
  .calc__dials {
    grid-template-columns: minmax(0, 1fr);
  }
}
.calc__ledger {
  margin-top: 2.25rem;
  border-top: 1px solid color-mix(in srgb, var(--ink) 16%, transparent);
}
.calc__row {
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
  padding-block: 0.95rem;
  border-bottom: 1px solid color-mix(in srgb, var(--ink) 12%, transparent);
  font-family: var(--mono);
  font-size: 0.8125rem;
}
.calc__label {
  color: color-mix(in srgb, var(--ink) 66%, transparent);
}
.calc__rule {
  flex: 1;
  border-bottom: 1px dotted color-mix(in srgb, var(--ink) 34%, transparent);
}
.calc__value {
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.calc__row--strong .calc__value {
  color: var(--gold-text);
  font-family: var(--display);
  font-size: 1.5rem;
}
.calc__row--strong .calc__value.is-positive {
  color: var(--teal);
}
.calc__note {
  margin-top: 1.5rem;
  font-family: var(--mono);
  font-size: 0.72rem;
  line-height: 1.6;
  letter-spacing: 0.04em;
  color: color-mix(in srgb, var(--ink) 66%, transparent);
}

/* ================================================================
         FAQ
         ================================================================ */
.faq {
  margin-top: clamp(2.5rem, 6vh, 4rem);
  max-width: 48rem;
}
.faq details {
  border-top: 1px solid color-mix(in srgb, var(--cream) 14%, transparent);
}
.faq details:last-of-type {
  border-bottom: 1px solid color-mix(in srgb, var(--cream) 14%, transparent);
}
.faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 1.3rem 0;
  cursor: pointer;
  list-style: none;
  font-family: var(--display);
  font-size: clamp(1.15rem, 1rem + 0.6vw, 1.45rem);
  line-height: 1.25;
}
.faq summary::-webkit-details-marker {
  display: none;
}
.faq summary::after {
  content: "+";
  flex: none;
  font-family: var(--mono);
  font-weight: 400;
  color: var(--gold-text);
  transition: transform 0.35s var(--ease);
}
.faq details[open] summary::after {
  transform: rotate(45deg);
}
.faq .faq__a {
  padding: 0 0 1.5rem;
  max-width: 52ch;
  color: color-mix(in srgb, var(--cream) 68%, transparent);
}
.faq .faq__a p + p {
  margin-top: 0.8rem;
}

/* ================================================================
         STORY: the living guestbook, rendered as a leaf from the book
         ================================================================ */
.gb-page {
  position: relative;
  padding: clamp(2.25rem, 5vw, 4rem);
  border-radius: 5px;
  background: var(--cream-bg);
  background-image: linear-gradient(to bottom, var(--cream-bg), var(--cream-bg-2));
  color: var(--ink);
  box-shadow: 0 44px 100px -50px rgba(0, 0, 0, 0.7);
  transform: rotate(-0.5deg);
}
.gb-page__title {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(1.6rem, 1.1rem + 1.4vw, 2.4rem);
  line-height: 1.15;
}
.gb-page__meta {
  margin-top: 0.7rem;
  font-family: var(--mono);
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--terracotta-ink);
}
.gb-page__lines {
  margin-top: 2rem;
  border-top: 1px solid color-mix(in srgb, var(--ink) 16%, transparent);
}
.gb-line {
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
  padding-block: 1.1rem;
  border-bottom: 1px solid color-mix(in srgb, var(--ink) 13%, transparent);
}
.gb-line__day {
  flex: none;
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--ink) 62%, transparent);
}
.gb-line__text {
  font-family: var(--display);
  font-size: clamp(1.05rem, 0.95rem + 0.6vw, 1.3rem);
  line-height: 1.4;
}
.gb-line__rule {
  flex: 1;
  border-bottom: 1px dotted color-mix(in srgb, var(--ink) 30%, transparent);
}
.gb-page__sig {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 2rem;
  margin-top: 2.25rem;
}
.gb-sig {
  font-family: var(--display);
  font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.5rem);
  font-style: italic;
  color: var(--ink);
  white-space: nowrap;
}
.gb-sig small {
  display: block;
  margin-top: 0.3rem;
  font-family: var(--mono);
  font-style: normal;
  font-size: 0.6875rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--ink) 64%, transparent);
}
.gb-page__stamp {
  align-self: flex-start;
  padding: 0.35rem 0.8rem;
  border: 1px solid color-mix(in srgb, var(--gold) 50%, transparent);
  border-radius: 4px;
  color: var(--gold-text);
  font-family: var(--mono);
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  transform: rotate(-3deg);
}
@media (max-width: 40rem) {
  .gb-page__sig {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* ================================================================
         STORY: the stay-arc walkthrough (device-framed screenshots)
         ================================================================ */
.arc {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2.5rem, 6vw, 5rem);
  align-items: center;
  padding-block: clamp(3.5rem, 9vh, 6rem);
  border-top: 1px solid color-mix(in srgb, var(--cream) 14%, transparent);
}
.arc--flip .arc__media {
  order: 2;
}
.arc__media {
  min-width: 0;
}
.arc__copy h3 {
  font-size: clamp(1.6rem, 1.1rem + 1.4vw, 2.4rem);
  margin-top: 0;
}
.arc__copy .arc__time {
  font-family: var(--mono);
  font-size: 0.75rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold-text);
}
.arc__copy p {
  margin-top: 1rem;
  max-width: 42ch;
  color: color-mix(in srgb, var(--cream) 68%, transparent);
}
.arc__copy .arc__line {
  display: block;
  margin-top: 1.1rem;
  font-family: var(--display);
  font-style: italic;
  font-size: 1.15rem;
  color: var(--gold-text);
}
@media (max-width: 60rem) {
  .arc,
  .arc--flip {
    grid-template-columns: minmax(0, 1fr);
  }
  .arc--flip .arc__media {
    order: 0;
  }
  .arc__media {
    order: -1;
  }
}
.arc__media .device {
  cursor: zoom-in;
}

/* ================================================================
         FEATURES: deep-dive rows + the capability index
         ================================================================ */
.feature-row {
  display: grid;
  grid-template-columns: minmax(0, 0.94fr) minmax(0, 1.06fr);
  gap: clamp(2.5rem, 6vw, 5rem);
  align-items: center;
  padding-block: clamp(3.5rem, 9vh, 6rem);
  border-top: 1px solid color-mix(in srgb, var(--cream) 13%, transparent);
}
.feature-row--flip .feature-row__media {
  order: 2;
}
.feature-row__media {
  min-width: 0;
}
.feature-row__copy h3 {
  font-size: clamp(1.6rem, 1.1rem + 1.4vw, 2.4rem);
}
.feature-row__copy p {
  margin-top: 1rem;
  max-width: 44ch;
  color: color-mix(in srgb, var(--cream) 68%, transparent);
}
.feature-row__copy .feature-row__tag {
  display: block;
  margin-bottom: 0.8rem;
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold-text);
}
.feature-row__facts {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 1.5rem;
  margin-top: 1.4rem;
  font-family: var(--mono);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--cream) 62%, transparent);
}
.feature-row__facts span::before {
  content: "· ";
  color: var(--gold-text);
  margin-right: 0.3rem;
}
.feature-row__facts span:first-child::before {
  content: "";
  margin-right: 0;
}
@media (max-width: 60rem) {
  .feature-row,
  .feature-row--flip {
    grid-template-columns: minmax(0, 1fr);
  }
  .feature-row--flip .feature-row__media {
    order: 0;
  }
  .feature-row__media {
    order: -1;
  }
}
.feature-row__media .device {
  cursor: zoom-in;
}

.cap-index {
  margin: clamp(2.5rem, 6vh, 4rem) 0 0;
  padding: 0;
  list-style: none;
  columns: 2;
  column-gap: 4rem;
  font-family: var(--mono);
  font-size: 0.8125rem;
}
.cap-index li {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  padding-block: 0.75rem;
  break-inside: avoid;
  border-bottom: 1px solid color-mix(in srgb, var(--cream) 12%, transparent);
  color: var(--cream);
}
.cap-index li::after {
  content: "";
  flex: 1;
  border-bottom: 1px dotted color-mix(in srgb, var(--cream) 28%, transparent);
}
.cap-index li span {
  color: color-mix(in srgb, var(--cream) 58%, transparent);
  white-space: nowrap;
}
@media (max-width: 48rem) {
  .cap-index {
    columns: 1;
  }
}
.cap-index__note {
  margin-top: 1.25rem;
  max-width: 52ch;
  color: color-mix(in srgb, var(--cream) 62%, transparent);
}

/* --- Guest doors (story) --- */
.doors {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1.5rem, 4vw, 2.5rem);
  margin-top: clamp(2.5rem, 6vh, 4rem);
}
.door {
  padding: clamp(1.75rem, 3vw, 2.5rem);
  border: 1px solid color-mix(in srgb, var(--cream) 13%, transparent);
  border-radius: 16px;
  background: color-mix(in srgb, var(--night) 55%, transparent);
}
.door h3 {
  font-size: clamp(1.35rem, 1.1rem + 0.8vw, 1.9rem);
}
.door p {
  margin-top: 0.7rem;
  max-width: 40ch;
  color: color-mix(in srgb, var(--cream) 68%, transparent);
}
.door .btn {
  margin-top: 1.5rem;
}
@media (max-width: 46rem) {
  .doors {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* The site links live in the masthead on wide screens; in the sheet
         they'd clutter the 52px rail, so there they're hidden. */
@media (min-width: 68rem) and (min-height: 34rem) {
  .spine__pages {
    display: none;
  }
}

/* ================================================================
         MARKET PAGES — Costa Rica + Spanish acquisition
         The existing site is cinematic; these pages tighten that language
         into a buyer's field brief: product first, local proof, then a short
         qualified walkthrough form on daylight parchment.
         ================================================================ */
.market-head {
  min-height: 88svh;
  align-items: center;
  padding-bottom: clamp(4rem, 8vh, 6rem);
  background:
    radial-gradient(
      58% 72% at 82% 58%,
      color-mix(in srgb, var(--gold) 14%, transparent),
      transparent 72%
    ),
    var(--stage);
}

.market-head__grid {
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(22rem, 1.08fr);
  gap: clamp(3rem, 7vw, 6.5rem);
  align-items: center;
}

.market-head h1 {
  max-width: 15ch;
}

.market-head__visual {
  position: relative;
}

.market-head__visual::before {
  content: "";
  position: absolute;
  inset: 18% 8% -14%;
  z-index: -1;
  border-radius: 50%;
  background: color-mix(in srgb, var(--gold) 18%, transparent);
  filter: blur(70px);
}

.market-head__visual .device {
  transform: perspective(1400px) rotateY(-4deg) rotateX(1deg);
}

.market-head__caption {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 1.1rem;
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--cream) 56%, transparent);
}

.market-head__caption span:first-child {
  color: var(--gold-text);
}

@media (max-width: 60rem) {
  .market-head {
    min-height: auto;
    padding-top: 8.5rem;
  }

  .market-head__grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .market-head__visual {
    width: min(46rem, 100%);
  }
}

.market-ledger {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: clamp(2.75rem, 6vh, 4.5rem);
  border-top: 1px solid color-mix(in srgb, var(--cream) 15%, transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--cream) 15%, transparent);
}

.market-ledger article {
  min-height: 15rem;
  padding: clamp(1.5rem, 3vw, 2.4rem);
  border-right: 1px solid color-mix(in srgb, var(--cream) 15%, transparent);
}

.market-ledger article:last-child {
  border-right: 0;
}

.market-ledger__number {
  display: block;
  margin-bottom: clamp(2.5rem, 8vh, 5rem);
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  color: var(--gold-text);
}

.market-ledger h3 {
  font-size: clamp(1.35rem, 1.05rem + 0.9vw, 1.9rem);
}

.market-ledger p {
  margin-top: 0.8rem;
  max-width: 31ch;
  color: color-mix(in srgb, var(--cream) 65%, transparent);
}

@media (max-width: 46rem) {
  .market-ledger {
    grid-template-columns: minmax(0, 1fr);
  }

  .market-ledger article {
    min-height: 0;
    border-right: 0;
    border-bottom: 1px solid color-mix(in srgb, var(--cream) 15%, transparent);
  }

  .market-ledger article:last-child {
    border-bottom: 0;
  }

  .market-ledger__number {
    margin-bottom: 1.8rem;
  }
}

.coverage-line {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: clamp(2rem, 7vw, 7rem);
  align-items: end;
}

.coverage-line__places {
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
  font-family: var(--mono);
  font-size: clamp(0.78rem, 0.72rem + 0.2vw, 0.9rem);
}

.coverage-line__places li {
  display: flex;
  align-items: baseline;
  gap: 0.8rem;
  padding-block: 0.95rem;
  border-bottom: 1px solid color-mix(in srgb, var(--ink) 14%, transparent);
}

.coverage-line__places li::after {
  content: "";
  flex: 1;
  border-bottom: 1px dotted color-mix(in srgb, var(--ink) 28%, transparent);
}

@media (max-width: 52rem) {
  .coverage-line {
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
  }
}

.lead-act {
  padding-block: clamp(5rem, 13vh, 8rem);
}

.lead-layout {
  display: grid;
  grid-template-columns: minmax(0, 0.72fr) minmax(28rem, 1.28fr);
  gap: clamp(3rem, 8vw, 7rem);
  align-items: start;
}

.lead-promise {
  position: sticky;
  top: 7rem;
}

.lead-promise h2 {
  margin-top: 1rem;
  font-size: clamp(2.2rem, 1.4rem + 2.7vw, 4rem);
}

.lead-promise .lede {
  margin-top: 1.4rem;
}

.lead-promise__terms {
  display: grid;
  gap: 0.8rem;
  margin: 2rem 0 0;
  padding: 1.4rem 0 0;
  border-top: 1px solid color-mix(in srgb, var(--ink) 16%, transparent);
  list-style: none;
  font-family: var(--mono);
  font-size: 0.76rem;
  letter-spacing: 0.04em;
  color: color-mix(in srgb, var(--ink) 72%, transparent);
}

.lead-promise__terms li::before {
  content: "✓";
  margin-right: 0.65rem;
  color: var(--gold-ink);
}

.lead-form {
  padding: clamp(1.5rem, 4vw, 2.75rem);
  border: 1px solid color-mix(in srgb, var(--ink) 18%, transparent);
  border-radius: 14px;
  background: color-mix(in srgb, var(--cream-fixed) 72%, transparent);
}

.lead-form__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.15rem 1.25rem;
}

.lead-field {
  display: grid;
  gap: 0.45rem;
}

.lead-field--wide {
  grid-column: 1 / -1;
}

.lead-field label,
.lead-field > span {
  font-size: 0.82rem;
  font-weight: 600;
  color: color-mix(in srgb, var(--ink) 78%, transparent);
}

.lead-field input,
.lead-field select,
.lead-field textarea {
  width: 100%;
  min-height: 48px;
  padding: 0.72rem 0.85rem;
  border: 1px solid color-mix(in srgb, var(--ink) 24%, transparent);
  border-radius: 7px;
  background: color-mix(in srgb, var(--cream-fixed) 92%, transparent);
  color: var(--ink);
  font: 500 1rem/1.35 var(--body);
  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease,
    background 0.2s ease;
}

.lead-field textarea {
  min-height: 7.5rem;
  resize: vertical;
}

.lead-field input:focus,
.lead-field select:focus,
.lead-field textarea:focus {
  outline: none;
  border-color: var(--gold-ink);
  background: var(--cream-fixed);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--gold) 20%, transparent);
}

.lead-field--trap {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  white-space: nowrap !important;
}

.lead-consent {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  margin-top: 1.25rem;
  font-size: 0.78rem;
  line-height: 1.5;
  color: color-mix(in srgb, var(--ink) 70%, transparent);
}

.lead-consent input {
  width: 18px;
  height: 18px;
  flex: none;
  margin-top: 0.1rem;
  accent-color: var(--gold-ink);
}

.lead-consent a,
.lead-form__fallback a {
  color: var(--ink);
  text-decoration-color: var(--gold-ink);
  text-underline-offset: 3px;
}

.lead-form__challenge {
  min-height: 66px;
  margin-top: 1.25rem;
}

.lead-form__footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.25rem;
  margin-top: 1.25rem;
}

.lead-form__footer .btn {
  border: 0;
}

.lead-form__status {
  flex: 1;
  min-width: 14rem;
  font-size: 0.86rem;
  color: color-mix(in srgb, var(--ink) 72%, transparent);
}

.lead-form__status[data-state="error"] {
  color: #8d352b;
}

.lead-form__fallback {
  display: none;
  margin-top: 1.25rem;
  padding: 1rem 1.1rem;
  border: 1px solid color-mix(in srgb, var(--terracotta) 32%, transparent);
  border-radius: 7px;
  font-size: 0.86rem;
  color: color-mix(in srgb, var(--ink) 78%, transparent);
}

.lead-form.is-unavailable .lead-form__grid,
.lead-form.is-unavailable .lead-consent,
.lead-form.is-unavailable .lead-form__challenge,
.lead-form.is-unavailable .lead-form__footer {
  display: none;
}

.lead-form.is-unavailable .lead-form__fallback {
  display: block;
}

.lead-form.is-complete {
  min-height: 24rem;
  display: grid;
  align-content: center;
}

.lead-form__success {
  display: none;
}

.lead-form.is-complete > :not(.lead-form__success) {
  display: none;
}

.lead-form.is-complete .lead-form__success {
  display: block;
}

.lead-form__success-mark {
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  margin-bottom: 1.5rem;
  border: 1px solid var(--gold-ink);
  border-radius: 50%;
  color: var(--gold-ink);
  font-family: var(--mono);
}

.lead-form__success h3 {
  font-size: clamp(1.8rem, 1.4rem + 1.3vw, 2.6rem);
}

.lead-form__success p {
  margin-top: 1rem;
  max-width: 42ch;
  color: color-mix(in srgb, var(--ink) 70%, transparent);
}

@media (max-width: 60rem) {
  .lead-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .lead-promise {
    position: static;
  }
}

@media (max-width: 40rem) {
  .lead-form__grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .lead-field--wide {
    grid-column: auto;
  }
}

/* --- Zoomable device on subpage sections (arc / feature rows) ---
         The screenshots are presented inside the tablet frame, and tapping
         one opens the lightbox the same way the console shots do. A button
         element reuses the .device frame; strip the native face. */
button.device {
  appearance: none;
  -webkit-appearance: none;
  margin: 0;
  color: inherit;
  font: inherit;
  cursor: zoom-in;
  text-align: left;
}

/* --- Section head paired with a screenshot (split-head) ---
         Used where a textual pitch (the binder, the plain math, the story
         chapters) deserves an accompanying product screenshot beside it. */
.split-head {
  display: grid;
  grid-template-columns: minmax(0, 1.06fr) minmax(0, 0.94fr);
  gap: clamp(2.5rem, 6vw, 5rem);
  align-items: center;
}
.split-head--media-first > :first-child {
  order: 1;
}
.split-head__media {
  min-width: 0;
}
.split-head__media .device {
  cursor: zoom-in;
}
.split-head__media .device__screen img {
  opacity: 1;
}
@media (max-width: 60rem) {
  .split-head {
    grid-template-columns: minmax(0, 1fr);
  }
  .split-head__media {
    order: -1;
  }
  .split-head--media-first .split-head__media {
    order: 1;
  }
}

/* --- The Ask demo moved onto /features --------------------------
         The widget was built as a hero column and hidden below 62rem; here
         it stands on its own under the concierge pitch, so re-show it at
         every width and give it a sensible column to sit in. */
.ask-panel {
  margin: clamp(2.5rem, 5vw, 4.5rem) auto 0;
  width: min(30rem, 100%);
}
.ask-panel .ask {
  width: 100%;
}
/* The media query above hides the ask card on small screens; an
         inline widget has no such constraint. Same specificity, later in
         the file, so this wins. */
.ask--inline {
  display: block !important;
}
.ask-panel__note {
  margin: 0.9rem auto 0;
  max-width: 32ch;
  text-align: center;
  font-family: var(--mono);
  font-size: 0.78rem;
  line-height: 1.6;
  color: color-mix(in srgb, var(--cream) 58%, transparent);
}

/* ================================================================
         COMPARISON PAGES (/compare/)
         Reuses .stream / .faq / .close from pricing & features; this
         block adds only what those pages didn't need — a verdict box,
         a feature-matrix table, and a stacked "pillars" list.
   ================================================================ */
.tldr {
  margin-top: clamp(2rem, 5vh, 3rem);
  padding: clamp(1.25rem, 3vw, 2rem);
  border: 1px solid color-mix(in srgb, var(--gold) 35%, transparent);
  border-radius: 14px;
  background: color-mix(in srgb, var(--night) 55%, transparent);
}
.tldr__label {
  font-family: var(--mono);
  font-size: 0.6875rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold-text);
}
.tldr ul {
  margin: 0.9rem 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0.75rem;
}
.tldr li {
  color: color-mix(in srgb, var(--cream) 82%, transparent);
  line-height: 1.55;
}
.tldr strong {
  color: var(--cream);
  font-weight: 600;
}

.table-scroll {
  margin-top: clamp(2rem, 5vh, 3rem);
  overflow-x: auto;
}
.compare-table {
  width: 100%;
  min-width: 40rem;
  border-collapse: collapse;
  font-size: 0.9rem;
}
.compare-table caption {
  caption-side: top;
  text-align: left;
  margin-bottom: 0.75rem;
  font-family: var(--mono);
  font-size: 0.6875rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--ink) 58%, transparent);
}
.compare-table th,
.compare-table td {
  padding: 0.85rem 1rem;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid color-mix(in srgb, var(--ink) 12%, transparent);
}
.compare-table thead th {
  font-family: var(--mono);
  font-size: 0.6875rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--ink) 62%, transparent);
  font-weight: 400;
}
.compare-table tbody th {
  font-family: var(--body);
  font-weight: 600;
  color: var(--ink);
  white-space: nowrap;
}
.compare-table td {
  color: color-mix(in srgb, var(--ink) 74%, transparent);
}
.compare-table thead th:last-child,
.compare-table tbody td:last-child {
  background: color-mix(in srgb, var(--gold) 14%, transparent);
  border-left: 1px solid color-mix(in srgb, var(--gold) 40%, transparent);
  color: var(--ink);
  font-weight: 500;
}

.pillars {
  margin-top: clamp(2.5rem, 6vh, 4rem);
  display: grid;
  gap: clamp(1.75rem, 4vh, 2.75rem);
}
.pillar {
  padding-top: clamp(1.75rem, 4vh, 2.75rem);
  border-top: 1px solid color-mix(in srgb, var(--cream) 14%, transparent);
}
.pillar:first-child {
  border-top: none;
  padding-top: 0;
}
.pillar__num {
  font-family: var(--mono);
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  color: var(--gold-text);
}
.pillar h3 {
  margin-top: 0.6rem;
  font-size: clamp(1.25rem, 1rem + 0.7vw, 1.6rem);
}
.pillar p {
  margin-top: 0.7rem;
  max-width: 62ch;
  color: color-mix(in srgb, var(--cream) 74%, transparent);
}

.stream__badge {
  display: block;
  margin-top: 0.5rem;
  font-family: var(--mono);
  font-size: 0.6875rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--cream) 55%, transparent);
}
.stream__more {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: 1rem;
  font-family: var(--mono);
  font-size: 0.8125rem;
  color: var(--gold-text);
  text-decoration: none;
}
.stream__more:hover {
  color: var(--gold);
}