/* ===================================================================
   ManaLegal landing.
   Editorial layout: one full-bleed photographic hero, at least as tall
   as the viewport, with the copy, the product panel and the stat rail
   floating over it. Warm leather-and-parchment palette taken from the
   law-library photograph, so the type sits on the image rather than
   fighting it.
   =================================================================== */

@font-face {
  font-family: "Merriweather Sans";
  src: url("/assets/MerriweatherSans-Regular.ttf") format("truetype");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Merriweather Sans";
  src: url("/assets/MerriweatherSans-Medium.ttf") format("truetype");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Merriweather Sans";
  src: url("/assets/MerriweatherSans-SemiBold.ttf") format("truetype");
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Merriweather Sans";
  src: url("/assets/MerriweatherSans-Bold.ttf") format("truetype");
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Merriweather Sans";
  src: url("/assets/MerriweatherSans-ExtraBold.ttf") format("truetype");
  font-weight: 800; font-style: normal; font-display: swap;
}
/* Only the italic cut of the serif is bundled, so italic is where the
   serif gets used as a voice; the roman display face falls back through
   whatever high-contrast serif the reader happens to have. */
@font-face {
  font-family: "Playfair Display";
  src: url("/assets/PlayfairDisplay-Italic.ttf") format("truetype");
  font-weight: 400 800; font-style: italic; font-display: swap;
}

:root {
  --espresso: #2b1e15;
  --bark: #4a3324;
  --clay: #8d6a50;
  --clay-deep: #6f5340;
  --parchment: #faf6f0;
  --sand: #f1e9df;
  --sand-2: #e8dccd;
  --rule: #e0d3c2;
  --brass: #c8a87f;
  --ink-soft: #6d5c4c;
  --cream: #f7f0e6;
  --cream-dim: #cbbaa6;

  /* The ground of a deliberately dark block - the footer, the numbers band,
     the feature card - and the text that sits on it. Same values as
     --espresso/--cream in light mode, but named for the job so dark mode can
     invert the page without inverting these with it. */
  --ink-block: #2b1e15;
  --ink-block-fg: #f7f0e6;
  --ink-block-hover: #4a3324;

  /* Fixed-light surfaces and the ink that sits on them. Never themed - see the
     dark block at the foot of this file. */
  --paper-ink: #2b1e15;
  --paper-ink-soft: #6d5c4c;
  --paper-accent: #6f5340;
  --paper-rule: #e0d3c2;

  --shell: #e9e6e2;

  --gutter: clamp(24px, 5vw, 78px);

  --r-xl: 40px;
  --r-lg: 26px;
  --r-md: 16px;
  --pill: 999px;

  --sans: "Merriweather Sans", -apple-system, "Segoe UI", system-ui, Roboto, Arial, sans-serif;
  --display: "Playfair Display", "Didot", "Bodoni MT", "Big Caslon",
             "Hoefler Text", "Book Antiqua", Georgia, serif;
  --italic: "Playfair Display", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  background: var(--shell);
  color: var(--espresso);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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

.wrap {
  width: min(1240px, calc(100% - 48px));
  margin-inline: auto;
}

/* ═══ HERO ═══════════════════════════════════════════════════════════
   Full bleed, edge to edge. Height is the viewport OR the height the
   composition needs, whichever is larger - on a short laptop screen the
   hero runs past the fold rather than crushing the panel into the
   bottom rail. */
.stage { background: var(--shell); }

.stage-frame {
  position: relative;
  isolation: isolate;
  min-height: 100vh;
  min-height: max(940px, 100svh);
  overflow: hidden;
  display: grid;
  grid-template-rows: auto 1fr auto;
}

.stage-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 62% 50%;
  z-index: -2;
}

/* Two washes stacked: a warm tint that ties the photograph to the
   palette, and a left-weighted darkening so the headline has something
   solid under it wherever the shelves happen to fall. */
.stage-wash {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(100deg,
      rgba(24, 15, 9, 0.92) 0%,
      rgba(28, 18, 11, 0.78) 34%,
      rgba(38, 25, 15, 0.42) 58%,
      rgba(43, 30, 21, 0.30) 100%),
    linear-gradient(to bottom,
      rgba(20, 13, 8, 0.55) 0%,
      rgba(20, 13, 8, 0.10) 26%,
      rgba(20, 13, 8, 0.16) 60%,
      rgba(18, 11, 7, 0.72) 100%);
}

/* ── Nav ── */
.topbar {
  position: relative;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 32px;
  padding: 34px var(--gutter);
}

.brand { display: flex; align-items: center; gap: 11px; }

.brand-mark {
  width: 30px; height: 30px;
  display: grid; place-items: center;
}
.brand-mark img {
  width: 26px; height: 26px;
  object-fit: contain;
  filter: brightness(0) invert(1);
}

.brand-name {
  font-size: 17px;
  font-weight: 700;
  letter-spacing: 0.16em;
  color: var(--cream);
}

.topbar-links {
  display: flex;
  gap: 38px;
  margin-inline: auto;
}

.topbar-link {
  font-size: 14.5px;
  font-weight: 500;
  color: rgba(247, 240, 230, 0.86);
  transition: color 0.18s ease;
}
.topbar-link:hover { color: #fff; }

.topbar-end { display: flex; align-items: center; gap: 20px; }

.topbar-alt {
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.12em;
  color: rgba(247, 240, 230, 0.8);
}
.topbar-alt:hover { color: #fff; }

.topbar-rule {
  width: 1px; height: 20px;
  background: rgba(247, 240, 230, 0.32);
}

.topbar-cta {
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--cream);
  border-bottom: 1.5px solid var(--cream);
  padding-bottom: 3px;
  transition: opacity 0.18s ease;
}
.topbar-cta:hover { opacity: 0.75; }

.burger {
  display: none;
  flex-direction: column;
  gap: 5px;
  width: 40px; height: 40px;
  align-items: center; justify-content: center;
  background: rgba(247, 240, 230, 0.10);
  border: 1px solid rgba(247, 240, 230, 0.22);
  border-radius: 10px;
  cursor: pointer;
}
.burger-bar {
  width: 17px; height: 1.6px;
  background: var(--cream);
  transition: transform 0.2s ease, opacity 0.2s ease;
}
.burger.open .burger-bar:nth-child(1) { transform: translateY(6.6px) rotate(45deg); }
.burger.open .burger-bar:nth-child(2) { opacity: 0; }
.burger.open .burger-bar:nth-child(3) { transform: translateY(-6.6px) rotate(-45deg); }

.nav-mobile-menu {
  position: absolute;
  top: 88px; left: var(--gutter); right: var(--gutter);
  z-index: 20;
  display: none;
  flex-direction: column;
  padding: 10px;
  border-radius: var(--r-md);
  background: var(--parchment);
  box-shadow: 0 24px 60px rgba(20, 12, 6, 0.34);
}
.nav-mobile-menu.open { display: flex; }
.nav-mobile-item {
  padding: 13px 16px;
  border-radius: 11px;
  font-size: 15px;
  font-weight: 500;
  color: var(--bark);
}
.nav-mobile-item:hover { background: var(--sand); }
.nav-mobile-primary {
  margin-top: 4px;
  background: var(--ink-block);
  color: var(--ink-block-fg);
  text-align: center;
  font-weight: 600;
}

/* ── Headline ── */
.stage-copy {
  position: relative;
  z-index: 4;
  grid-row: 2;
  align-self: center;
  padding: 0 var(--gutter) clamp(170px, 20vh, 250px);
  max-width: 680px;
}

.titan {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(52px, 7.6vw, 108px);
  line-height: 0.92;
  letter-spacing: -0.005em;
  color: var(--cream);
  text-shadow: 0 2px 34px rgba(16, 9, 4, 0.5);
}
.titan span { display: block; }
.titan sup {
  font-size: 0.26em;
  vertical-align: super;
  font-family: var(--sans);
  font-weight: 500;
  letter-spacing: 0;
}

.titan-sub {
  margin-top: 26px;
  font-size: clamp(15px, 1.5vw, 19px);
  letter-spacing: 0.02em;
  color: rgba(247, 240, 230, 0.9);
}

.pill-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 32px;
  padding: 17px 46px;
  border-radius: var(--pill);
  background: var(--ink-block);
  color: var(--ink-block-fg);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.18em;
  border: 1px solid rgba(247, 240, 230, 0.18);
  transition: transform 0.18s ease, background 0.18s ease;
}
.pill-btn:hover { transform: translateY(-2px); background: var(--ink-block-hover); }

.pill-btn-dark { letter-spacing: 0.06em; padding: 15px 32px; }
.pill-btn-cream { background: var(--cream); color: var(--espresso); border-color: transparent; }
.pill-btn-cream:hover { background: #fff; }
.pill-btn-block { width: 100%; letter-spacing: 0.08em; padding: 16px 24px; }

/* ── Floating product panel ── */
.panel {
  position: absolute;
  z-index: 3;
  top: clamp(112px, 13vh, 156px);
  right: var(--gutter);
  width: min(620px, 46vw);
  padding: 26px 28px 0;
  border-radius: var(--r-xl);
  background: linear-gradient(170deg, rgba(255, 253, 251, 0.97), rgba(246, 238, 229, 0.9));
  box-shadow: 0 34px 90px rgba(22, 13, 6, 0.34);
}

.panel-tabs { display: flex; gap: 9px; }

.panel-tab {
  padding: 9px 20px;
  border-radius: var(--pill);
  border: 1px solid var(--paper-rule);
  background: transparent;
  color: var(--paper-ink);
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}
.panel-tab:hover { border-color: var(--clay); }
.panel-tab.is-active {
  background: var(--ink-block);
  border-color: var(--espresso);
  color: var(--ink-block-fg);
  font-weight: 600;
}

.panel-copy { margin-top: 26px; max-width: 320px; }

.panel-title {
  font-size: clamp(22px, 2.2vw, 30px);
  font-weight: 500;
  line-height: 1.18;
  letter-spacing: -0.01em;
  color: var(--paper-ink);
}

.panel-sub {
  margin-top: 12px;
  font-size: 14.5px;
  color: var(--paper-ink-soft);
}

/* The callout sits over the panel's top-right corner. */
.panel-aside {
  position: absolute;
  top: 76px;
  right: 26px;
  width: 158px;
  padding: 13px;
  border-radius: 18px;
  background: var(--sand);
  box-shadow: 0 14px 34px rgba(22, 13, 6, 0.18);
}
.aside-label {
  display: block;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--bark);
  margin-bottom: 10px;
}
.aside-art { border-radius: 10px; overflow: hidden; }
.aside-art svg { width: 100%; height: auto; }
.aside-play {
  position: absolute;
  left: -20px;
  bottom: 26px;
  width: 42px; height: 42px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--clay);
  color: #fff;
  box-shadow: 0 8px 20px rgba(22, 13, 6, 0.3);
}

/* The app window deliberately overhangs the panel's bottom edge, the way
   the reference lets its subject break out of the card. */
.panel-art {
  position: relative;
  margin: 22px -14px -46px 46px;
}
.appshot {
  width: 100%;
  height: auto;
  border-radius: var(--r-md);
  box-shadow: 0 26px 60px rgba(22, 13, 6, 0.36);
}

.spot {
  position: absolute;
  width: 11px; height: 11px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.34);
  z-index: 2;
}
.spot-1 { top: 22%; left: 30%; }
.spot-2 { top: 58%; left: 62%; }
.spot-3 { top: 78%; left: 22%; }

/* ── Bottom rail ── */
.clay-card {
  position: absolute;
  z-index: 4;
  left: 0;
  bottom: 0;
  width: min(400px, 31vw);
  padding: 30px var(--gutter) 38px;
  border-radius: 0 var(--r-lg) 0 0;
  background: var(--clay);
  color: var(--cream);
}
.clay-card h3 {
  font-size: clamp(20px, 2vw, 26px);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.01em;
}
.clay-card p {
  margin-top: 12px;
  font-size: 13.5px;
  line-height: 1.55;
  color: rgba(247, 240, 230, 0.82);
}

.stage-stat {
  position: absolute;
  z-index: 4;
  left: 50%;
  transform: translateX(-50%);
  bottom: 56px;
  text-align: center;
  color: var(--cream);
}
.stat-faces { display: flex; justify-content: center; margin-bottom: 14px; }
.face {
  width: 44px; height: 44px;
  border-radius: 50%;
  border: 2.5px solid var(--cream);
}
.face + .face { margin-left: -13px; }
.face-a { background: linear-gradient(150deg, #8d6a50, #5c4433); }
.face-b { background: linear-gradient(150deg, #b08e6c, #7a5c44); }
.face-c { background: linear-gradient(150deg, #6e5744, #483426); }

.stat-figure {
  font-family: var(--italic);
  font-style: italic;
  font-size: clamp(38px, 4.4vw, 58px);
  line-height: 1;
  letter-spacing: -0.01em;
}
.stat-caption {
  margin-top: 6px;
  font-size: 13.5px;
  color: rgba(247, 240, 230, 0.78);
}

.stage-claim {
  position: absolute;
  z-index: 4;
  right: var(--gutter);
  bottom: 56px;
  color: var(--cream);
}
.stage-claim h2 {
  font-size: clamp(19px, 2.1vw, 29px);
  font-weight: 400;
  line-height: 1.24;
  letter-spacing: 0.01em;
  text-transform: uppercase;
}
.underline-link {
  display: inline-block;
  margin-top: 18px;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.12em;
  border-bottom: 1.5px solid currentColor;
  padding-bottom: 3px;
}
.underline-link:hover { opacity: 0.75; }

/* ═══ TICKER ═════════════════════════════════════════════════════════ */
.ticker {
  background: var(--ink-block);
  color: var(--ink-block-fg);
  overflow: hidden;
  padding: 16px 0;
}
.ticker-row {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 26px;
  padding-inline: 24px;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.ticker-row i { color: var(--brass); font-style: normal; font-size: 8px; }

/* ═══ BANDS ══════════════════════════════════════════════════════════ */
.band { background: var(--parchment); padding: 108px 0; }
.band-sand { background: var(--sand); }

.kicker {
  display: inline-block;
  margin-bottom: 18px;
  padding: 6px 15px;
  border-radius: var(--pill);
  border: 1px solid var(--rule);
  background: rgba(255, 255, 255, 0.6);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--clay-deep);
}
.kicker-light {
  border-color: rgba(247, 240, 230, 0.26);
  background: rgba(247, 240, 230, 0.08);
  color: var(--brass);
}

.deck {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(34px, 4.2vw, 58px);
  line-height: 1.06;
  letter-spacing: -0.015em;
  color: var(--espresso);
}
.deck em {
  font-family: var(--italic);
  font-style: italic;
  color: var(--clay);
}
.deck-light { color: var(--cream); }
.deck-light em { color: var(--brass); }

.lede {
  margin-top: 20px;
  font-size: 16.5px;
  line-height: 1.68;
  color: var(--ink-soft);
  max-width: 56ch;
}

.band-head { text-align: center; margin-bottom: 62px; }
.band-head .lede { margin-inline: auto; }

.split-head {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: end;
  margin-bottom: 58px;
}

/* ── Practice duo ── */
.duo { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; }

.duo-card {
  border-radius: var(--r-xl);
  padding: 40px;
  display: flex;
  flex-direction: column;
  gap: 32px;
}
.duo-dark { background: var(--ink-block); color: var(--ink-block-fg); }
.duo-light { background: var(--sand); }

.duo-text h3 {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(24px, 2.6vw, 34px);
  line-height: 1.14;
  letter-spacing: -0.012em;
}
.duo-text p {
  margin-top: 14px;
  font-size: 15px;
  line-height: 1.66;
  max-width: 44ch;
}
.duo-dark .duo-text p { color: var(--cream-dim); }
.duo-light .duo-text p { color: var(--ink-soft); }

.duo-media {
  position: relative;
  margin-top: auto;
  border-radius: var(--r-lg);
  overflow: hidden;
  aspect-ratio: 16 / 10;
}
.duo-media img { width: 100%; height: 100%; object-fit: cover; }

.chip {
  position: absolute;
  display: flex;
  flex-direction: column;
  padding: 12px 16px;
  border-radius: 14px;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.01em;
  box-shadow: 0 12px 28px rgba(22, 13, 6, 0.22);
}
.chip em {
  font-style: normal;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.04em;
  opacity: 0.72;
  margin-top: 2px;
}
.chip-dark { left: 20px; bottom: 20px; background: var(--ink-block); color: var(--ink-block-fg); }
.chip-light { right: 20px; top: 20px; background: var(--parchment); color: var(--espresso); }

/* ── Modules ── */
.mod-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.mod {
  position: relative;
  padding: 34px 30px 32px;
  border-radius: var(--r-lg);
  background: var(--parchment);
  border: 1px solid var(--rule);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.mod:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 44px rgba(43, 30, 21, 0.12);
}

.mod-num {
  position: absolute;
  top: 26px; right: 28px;
  font-family: var(--italic);
  font-style: italic;
  font-size: 22px;
  color: var(--sand-2);
}

.mod-icon {
  display: grid;
  place-items: center;
  width: 46px; height: 46px;
  border-radius: 13px;
  background: var(--sand);
  color: var(--bark);
  margin-bottom: 20px;
}
.mod-icon svg { width: 22px; height: 22px; }

.mod h4 {
  font-size: 18.5px;
  font-weight: 600;
  letter-spacing: -0.01em;
  margin-bottom: 10px;
}
.mod p { font-size: 14.5px; line-height: 1.62; color: var(--ink-soft); }

.mod-feature { background: var(--ink-block); border-color: var(--ink-block); color: var(--ink-block-fg); }
.mod-feature .mod-icon { background: rgba(247, 240, 230, 0.12); color: var(--brass); }
.mod-feature p { color: var(--cream-dim); }
.mod-feature .mod-num { color: rgba(247, 240, 230, 0.22); }

/* ── Showcase ── */
.showcase {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: 60px;
  align-items: center;
}

.tick-list { list-style: none; margin: 26px 0 0; }
.tick-list li {
  position: relative;
  padding-left: 26px;
  margin-bottom: 11px;
  font-size: 15px;
  color: var(--ink-soft);
}
.tick-list li::before {
  content: "";
  position: absolute;
  left: 0; top: 9px;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--clay);
}
.showcase-copy .pill-btn { margin-top: 30px; }

.showcase-frame {
  border-radius: var(--r-xl);
  padding: 22px;
  background: var(--sand);
  box-shadow: 0 30px 70px rgba(43, 30, 21, 0.14);
}
.showcase-frame svg { width: 100%; height: auto; border-radius: var(--r-md); }

/* ── Numbers ── */
.numbers { background: var(--ink-block); padding: 92px 0; }
.numbers-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: center;
}
.numbers-figs { display: flex; gap: 46px; flex-wrap: wrap; }
.fig-num {
  font-family: var(--italic);
  font-style: italic;
  font-size: clamp(46px, 5.4vw, 74px);
  line-height: 1;
  color: var(--cream);
}
.fig-label {
  margin-top: 8px;
  font-size: 13.5px;
  color: var(--cream-dim);
  max-width: 14ch;
}

/* ── Pricing ── */
.price-wrap {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
}

.price-card {
  padding: 42px;
  border-radius: var(--r-xl);
  background: var(--parchment);
  border: 1px solid var(--rule);
  box-shadow: 0 26px 60px rgba(43, 30, 21, 0.1);
}
.price-badge {
  display: inline-block;
  padding: 6px 15px;
  border-radius: var(--pill);
  background: var(--ink-block);
  color: var(--ink-block-fg);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.price-card h3 {
  margin-top: 22px;
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(26px, 2.8vw, 36px);
  line-height: 1.12;
  letter-spacing: -0.012em;
}
.price-desc { margin-top: 14px; font-size: 15px; line-height: 1.66; color: var(--ink-soft); }
.price-list { list-style: none; margin: 26px 0 30px; }
.price-list li {
  position: relative;
  padding-left: 30px;
  padding-block: 9px;
  font-size: 14.5px;
  border-bottom: 1px solid var(--rule);
}
.price-list li:last-child { border-bottom: 0; }
.price-list li::before {
  content: "";
  position: absolute;
  left: 4px; top: 15px;
  width: 12px; height: 6px;
  border-left: 2px solid var(--clay);
  border-bottom: 2px solid var(--clay);
  transform: rotate(-45deg);
}

/* ── FAQ ── */
.faq-wrap { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: 64px; align-items: start; }

.faq-item { border-bottom: 1px solid var(--rule); }
.faq-question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
  padding: 24px 0;
  cursor: pointer;
}
.faq-q-text { font-size: 17px; font-weight: 500; letter-spacing: -0.005em; }
.faq-icon {
  flex: 0 0 auto;
  width: 30px; height: 30px;
  display: grid; place-items: center;
  border-radius: 50%;
  border: 1px solid var(--rule);
  font-size: 17px;
  color: var(--clay-deep);
  transition: transform 0.24s ease, background 0.24s ease, color 0.24s ease;
}
.faq-item.open .faq-icon {
  transform: rotate(45deg);
  background: var(--ink-block);
  border-color: var(--espresso);
  color: var(--ink-block-fg);
}
.faq-answer {
  max-height: 0;
  overflow: hidden;
  font-size: 15px;
  line-height: 1.7;
  color: var(--ink-soft);
  transition: max-height 0.3s ease, padding-bottom 0.3s ease;
}
.faq-item.open .faq-answer { max-height: 340px; padding-bottom: 26px; }

/* ── Closer ── */
.closer {
  position: relative;
  isolation: isolate;
  border-radius: var(--r-xl);
  overflow: hidden;
  padding: clamp(56px, 7vw, 104px) clamp(30px, 5vw, 80px);
  min-height: 400px;
  display: grid;
  align-items: center;
}
.closer-photo {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  z-index: -2;
}
.closer-wash {
  position: absolute; inset: 0;
  z-index: -1;
  background: linear-gradient(95deg,
    rgba(24, 15, 9, 0.93) 0%,
    rgba(28, 18, 11, 0.8) 46%,
    rgba(43, 30, 21, 0.42) 100%);
}
.closer-copy { max-width: 620px; color: var(--cream); }
.closer-copy h2 {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(32px, 4.4vw, 58px);
  line-height: 1.06;
  letter-spacing: -0.015em;
}
.closer-copy h2 em { font-family: var(--italic); font-style: italic; color: var(--brass); }
.closer-copy p {
  margin-top: 18px;
  font-size: 16.5px;
  line-height: 1.66;
  color: rgba(247, 240, 230, 0.82);
  max-width: 46ch;
}
.closer-copy .pill-btn { margin-top: 30px; }

/* ── Footer ── */
.foot { background: var(--ink-block); color: var(--ink-block-fg); padding: 78px 0 34px; }
.foot-top {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1fr;
  gap: 48px;
  padding-bottom: 52px;
  border-bottom: 1px solid rgba(247, 240, 230, 0.14);
}
.foot-wordmark {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: 0.16em;
}
.foot-wordmark sup { font-size: 0.44em; vertical-align: super; }
.foot-brand p {
  margin-top: 14px;
  font-size: 14.5px;
  line-height: 1.62;
  color: var(--cream-dim);
  max-width: 34ch;
}
.foot-col { display: flex; flex-direction: column; gap: 11px; }
.foot-col h5 {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--brass);
  margin-bottom: 5px;
}
.foot-col a { font-size: 14.5px; color: var(--cream-dim); transition: color 0.18s ease; }
.foot-col a:hover { color: var(--cream); }

.foot-bottom {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  padding-top: 26px;
  font-size: 13px;
  color: rgba(203, 186, 166, 0.72);
}

/* ═══ RESPONSIVE ═════════════════════════════════════════════════════
   The panel and the bottom rail stop fitting beside each other well
   before the rest of the layout breaks, so the hero relaxes into a
   stack first and the grid columns collapse later. */
@media (max-width: 1180px) {
  .stage-frame { min-height: auto; }
  .panel {
    position: relative;
    top: 0; right: 0;
    width: auto;
    margin: 34px var(--gutter) 0;
  }
  .panel-art { margin: 22px 0 -30px; }
  .stage-copy { padding-top: 46px; padding-bottom: 0; }
  .clay-card,
  .stage-stat,
  .stage-claim {
    position: relative;
    left: auto; right: auto; bottom: auto;
    transform: none;
  }
  .clay-card {
    width: auto;
    margin: 62px var(--gutter) 0;
    padding: 28px 30px 34px;
    border-radius: var(--r-lg);
  }
  .stage-stat { margin: 40px auto 0; }
  .stage-claim { margin: 40px var(--gutter) 56px; }
}

@media (max-width: 980px) {
  .topbar-links, .topbar-end { display: none; }
  .burger { display: flex; margin-left: auto; }

  .duo, .mod-grid, .showcase, .price-wrap,
  .faq-wrap, .split-head, .numbers-inner {
    grid-template-columns: 1fr;
  }
  .mod-grid { gap: 16px; }
  .split-head { align-items: start; gap: 24px; }
  .showcase { gap: 40px; }
  .foot-top { grid-template-columns: 1fr 1fr; gap: 36px; }
}

@media (max-width: 720px) {
  /* Stacked, so the height is whatever the content needs. */
  .stage-frame { min-height: 0; }
  .topbar { padding: 24px var(--gutter); }
  .stage-copy { padding: 44px var(--gutter) 0; }
  .panel { padding: 20px 20px 0; border-radius: var(--r-lg); }
  .panel-aside { display: none; }
  .panel-copy { max-width: none; }
  .clay-card { margin-top: 48px; padding: 26px; }
  .stage-claim { margin-bottom: 44px; }

  .band { padding: 72px 0; }
  .wrap { width: calc(100% - 36px); }
  .duo-card { padding: 28px; border-radius: var(--r-lg); }
  .price-card { padding: 30px; border-radius: var(--r-lg); }
  .showcase-frame { padding: 14px; border-radius: var(--r-lg); }
  .closer { padding: 48px 26px; border-radius: var(--r-lg); }
  .numbers-figs { gap: 30px; }
  .foot-top { grid-template-columns: 1fr; }
  .ticker-row { gap: 10px 18px; font-size: 11px; }
}

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

/* The landing switch. Sits between LOG IN and GET STARTED, so it borrows the
   topbar's own ink rather than the app shell's light-on-navy treatment. */
.nav-theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  flex: 0 0 auto;
  padding: 0;
  border: 1px solid currentColor;
  border-radius: var(--pill);
  background: transparent;
  color: inherit;
  cursor: pointer;
  opacity: 0.75;
  transition: opacity 0.15s ease, transform 0.15s ease;
}

.nav-theme-toggle:hover { opacity: 1; }
.nav-theme-toggle:active { transform: scale(0.94); }
.nav-theme-toggle:focus-visible { outline: 2px solid var(--brass); outline-offset: 2px; }

.shell-theme-icon { display: none; }
.shell-theme-icon-moon { display: block; }
:root[data-theme="dark"] .shell-theme-icon-moon { display: none; }
:root[data-theme="dark"] .shell-theme-icon-sun { display: block; }

@media (prefers-reduced-motion: reduce) {
  .nav-theme-toggle { transition: none; }
  .nav-theme-toggle:active { transform: none; }
}

/* ── Dark theme ──────────────────────────────────────────────────────────────
   The Ascone palette is warm on purpose, so this is not the app's cool grey
   dark mode wearing a different name: the ground goes to roasted espresso
   rather than neutral black and the ink to cream, which keeps the paper-and-
   coffee character the page is built on instead of fighting it.

   --cream and --cream-dim deliberately do not move. They are the text laid over
   the hero photograph and over the dark blocks, both of which are dark in
   either theme, so inverting them would put dark text on a dark picture. */
:root[data-theme="dark"] {
  color-scheme: dark;

  /* Grounds, outermost first. */
  --shell: #100b07;
  --parchment: #17110c;
  --sand: #1e1710;
  --rule: #3a2e22;

  /* A block that is dark on purpose has to stay darker than the page, and the
     light-mode value is now almost exactly the colour of the page it sits on.
     Lifted until it reads as a raised block again. */
  --ink-block: #241a12;
  --ink-block-hover: #33251a;

  /* Ink, in descending emphasis. */
  --espresso: #f4ece1;
  --bark: #e3d6c5;
  --ink-soft: #c0b1a0;
  --sand-2: #a5967f;

  /* Accents, lifted just far enough to carry on a dark ground. */
  --clay: #a87e5f;
  --clay-deep: #c9a184;
  --brass: #dcc39c;
}

/* The kicker is a translucent white chip with brown ink, drawn for a parchment
   band. On a dark band the wash goes muddy and the ink is too light to read, so
   it takes the same treatment .kicker-light already uses on dark grounds. */
:root[data-theme="dark"] .kicker {
  border-color: rgba(247, 240, 230, 0.22);
  background: rgba(247, 240, 230, 0.08);
  color: var(--brass);
}