/* ══════════════════════════════════════════════════════════════════════
   Destiny — marketing site design system.

   Ported from the Claude Design handoff "Datestiny Homepage.dc.html".
   Palette, type scale, section rhythm and chrome are shared by every page
   so the site reads as one thing.

   The rhythm every page follows:
     ink band (nav + hero) → ivory/sand content → brick CTA → ink footer
   ══════════════════════════════════════════════════════════════════════ */

:root {
  /* Ground */
  --ink: #141008;          /* deepest — nav, hero, footer */
  --ink-2: #17120e;        /* headings on light */
  --ink-3: #2a231c;        /* large body copy */
  --muted: #3a322a;        /* secondary copy */
  --muted-2: #6b5f52;      /* fine print, captions */
  --ivory: #f3ede3;        /* type on dark, card ground */
  --page: #f4efe6;         /* page background */
  --sand: #ebe3d3;         /* soft section band */

  /* Accent — the brick the design renders with */
  --accent: #8a1f13;
  --accent-deep: #6d180f;
  --accent-soft: #e2a396;  /* pale rose, for accents sitting on ink */

  --line: rgba(23, 18, 14, .14);
  --line-2: rgba(23, 18, 14, .08);
  --line-dark: rgba(243, 237, 227, .14);

  --radius: 20px;
  --radius-lg: 22px;
  --shadow: 0 24px 60px rgba(23, 18, 14, .28);
  --shadow-lg: 0 30px 80px rgba(0, 0, 0, .35);
  --shadow-soft: 0 18px 44px rgba(23, 18, 14, .12);

  --ease: cubic-bezier(.2, .6, .2, 1);

  --display: "Archivo", Helvetica, Arial, sans-serif;
  --serif: "Instrument Serif", Georgia, "Times New Roman", serif;
  --script: "Lora", Georgia, "Times New Roman", serif;

  --pad-x: clamp(24px, 4vw, 56px);
  --section-y: clamp(72px, 11vh, 140px);
}

/* ── Reset ─────────────────────────────────────────────────────────── */

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

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

body {
  margin: 0;
  background: var(--page);
  color: var(--ink-2);
  font-family: var(--display);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

img, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
ul, ol { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, h4, p { margin: 0; }
button, input, select, textarea { font: inherit; color: inherit; }

::selection { background: var(--accent); color: var(--ivory); }

:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 4px;
  border-radius: 4px;
}
.nav :focus-visible,
.dhero :focus-visible,
footer :focus-visible,
.page-hero :focus-visible,
.ready :focus-visible,
.gs-panel :focus-visible { outline-color: var(--accent-soft); }

.skip-link {
  position: fixed; top: -100px; left: 16px; z-index: 200;
  padding: 12px 22px; border-radius: 999px;
  background: var(--ivory); color: var(--ink-2); font-weight: 600;
}
.skip-link:focus { top: 14px; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}

/* ── Layout ────────────────────────────────────────────────────────── */

.wrap { width: 100%; max-width: 1400px; margin-inline: auto; padding-inline: var(--pad-x); }

main > section,
main > .section-soft { padding-block: var(--section-y); }

.section-soft { background: var(--sand); }

/* ── Type scale ────────────────────────────────────────────────────── */

h1, h2 {
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: -.02em;
  word-spacing: .1em;
  line-height: .98;
  text-wrap: balance;
}

h1 { font-size: clamp(44px, 6.4vw, 104px); }
h2 { font-size: clamp(38px, 5.2vw, 80px); }

h3 {
  font-size: clamp(21px, 1.9vw, 27px);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -.01em;
}

/* The serif italic is the one soft note in an otherwise blunt typeface. */
h1 em, h2 em {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  color: var(--accent);
}
/* On ink, the brick goes muddy — use the rose the design mixes for it. */
.dhero em, .page-hero em, .team-hero em, .nf em, .ready em, footer em { color: var(--accent-soft); }

p { text-wrap: pretty; }

.tag {
  display: inline-block;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--accent);
  line-height: 1.4;
}
.page-hero .tag, .team-hero .tag, .ready .tag { color: var(--accent-soft); }

.section-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 22px;
  text-align: center;
  margin-bottom: clamp(48px, 8vh, 96px);
}
.section-head p {
  max-width: 52ch;
  font-size: clamp(16px, 1.25vw, 20px);
  line-height: 1.55;
  font-weight: 500;
  color: var(--muted);
}

/* ── Buttons ───────────────────────────────────────────────────────── */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 16px 32px;
  border: 1px solid transparent;
  border-radius: 999px;
  font-size: 16px;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  text-align: center;
  transition: background .25s var(--ease), color .25s var(--ease),
              border-color .25s var(--ease), transform .25s var(--ease);
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

.btn-lg { padding: 18px 36px; font-size: 17px; }

.btn-primary { background: var(--ink); color: var(--ivory); }
.btn-primary:hover { background: var(--accent); }

.btn-coral { background: var(--accent); color: var(--ivory); }
.btn-coral:hover { background: var(--accent-deep); }

.btn-white { background: var(--ivory); color: var(--ink-2); }
.btn-white:hover { background: #fff; }

.btn-ghost { background: transparent; color: currentColor; border-color: currentColor; }
.btn-ghost:hover { background: var(--ink); color: var(--ivory); border-color: var(--ink); }

/* On ink grounds the ghost inverts, and the ink button would disappear. */
.page-hero .btn-primary,
.team-hero .btn-primary,
.nf .btn-primary { background: var(--ivory); color: var(--ink-2); }
.page-hero .btn-primary:hover,
.team-hero .btn-primary:hover,
.nf .btn-primary:hover { background: var(--accent); color: var(--ivory); }

.page-hero .btn-ghost:hover,
.team-hero .btn-ghost:hover,
.nf .btn-ghost:hover,
.ready .btn-ghost:hover { background: var(--ivory); color: var(--ink-2); border-color: var(--ivory); }

/* ── Scroll reveal (main.js adds .in-view) ─────────────────────────── */

.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity .9s var(--ease), transform .9s var(--ease);
}
.reveal.in-view { opacity: 1; transform: none; }
.reveal[data-delay="1"] { transition-delay: .12s; }
.reveal[data-delay="2"] { transition-delay: .24s; }
.reveal[data-delay="3"] { transition-delay: .36s; }

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; }
}

/* ── Nav ───────────────────────────────────────────────────────────── */

.nav {
  position: relative;
  z-index: 40;
  background: var(--ink);
  color: var(--ivory);
}
/* On the homepage the nav floats inside the hero, which is the same ink. */
.nav--hero { background: transparent; }

.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: 84px;
  padding-block: 22px;
}

.brand {
  font-family: var(--script);
  font-style: italic;
  font-weight: 400;
  font-size: 28px;
  letter-spacing: .01em;
  line-height: 1;
  white-space: nowrap;
}
.brand:hover { opacity: .72; }

.nav-links {
  /* Absolutely centred on the page, as the design has it. This only works
     now that the nav carries no right-hand CTA to crowd it. */
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: clamp(20px, 2.6vw, 36px);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: .02em;
}
.nav-links a { transition: opacity .2s var(--ease); }
.nav-links a:hover { opacity: .68; }


.nav-toggle {
  display: none;
  background: none;
  border: 0;
  padding: 8px;
  margin-left: 4px;
  color: inherit;
  cursor: pointer;
}
.nav-toggle .icon-close { display: none; }
.nav.is-open .nav-toggle .icon-open { display: none; }
.nav.is-open .nav-toggle .icon-close { display: block; }

@media (max-width: 940px) {
  .nav-toggle { display: block; }
  .nav-links {
    position: absolute;
    inset: 100% 0 auto;
    transform: none;
    flex-direction: column;
    gap: 0;
    background: var(--ink);
    border-top: 1px solid var(--line-dark);
    padding: 8px var(--pad-x) 24px;
    display: none;
  }
  .nav.is-open .nav-links { display: flex; }
  .nav-links a { padding-block: 16px; border-bottom: 1px solid var(--line-dark); font-size: 18px; }
}
@media (max-width: 560px) {
  .brand { font-size: 24px; }
}

/* ══════════════════════════════════════════════════════════════════════
   HOMEPAGE
   ══════════════════════════════════════════════════════════════════════ */

/* ── Hero ──────────────────────────────────────────────────────────── */

.dhero {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 100svh;
  background: var(--ink);
  color: var(--ivory);
  overflow: hidden;
  transform-origin: center top;
}

.dhero-media {
  position: absolute;
  top: -1px; right: -1px; bottom: -1px;
  width: calc(44% + 2px);
  overflow: hidden;
}
.dhero-img {
  /* The design's 1.06 zoom, expressed as layout rather than a transform.

     A persistent `transform: scale()` promotes the image to its own compositor
     layer. Mid-scroll the hero is scaled too, which puts the media's
     overflow:hidden clip edge on a fractional device pixel — and the promoted
     image layer then antialiases that edge independently of the scrim painted
     over it. The result is a one-pixel column of raw photo down the hero: a
     visible seam. Sizing the image instead keeps it in the parent's layer. */
  position: absolute;
  top: -3%;
  left: -3%;
  width: 106%;
  height: 106%;
  /* The global img reset caps width at 100%, which would clamp the 106% above
     and leave a strip of the media box uncovered on the right. */
  max-width: none;
  object-fit: cover;
  object-position: 50% 22%;
  animation: heroImg 1.6s var(--ease) both;
}
/* Carries the photograph into the ink so the type never fights the image. */
.dhero-scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, var(--ink) 0%, rgba(20, 16, 8, 0) 34%);
}

.dhero .nav-inner { padding-block: 26px; min-height: 0; }

.dhero-body {
  position: relative;
  z-index: 2;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 100%;
  max-width: 1400px;
  padding: clamp(32px, 6vh, 72px) var(--pad-x) clamp(48px, 8vh, 96px);
}

.dhero-title {
  font-size: clamp(52px, 8.6vw, 142px);
  line-height: .94;
  max-width: 12ch;
}
.dhero-title span { display: block; }
.dhero-title span:nth-child(1) { animation: heroUp 1s .25s var(--ease) both; }
.dhero-title span:nth-child(2) { animation: heroUp 1s .38s var(--ease) both; }

.dhero-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 36px;
  animation: heroUp 1s .62s var(--ease) both;
}

@keyframes heroUp {
  from { opacity: 0; transform: translateY(46px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes heroImg {
  /* Same relative zoom-out as the design (1.12 → 1.06), but ending at `none`
     so no composited layer outlives the animation. */
  from { opacity: 0; transform: scale(1.057); }
  to   { opacity: 1; transform: none; }
}

@media (max-width: 940px) {
  .dhero { min-height: 0; }
  /* Stacked order is nav, then photo, then copy — the nav has to stay
     reachable at the top rather than sitting below a 400px image. */
  .dhero .nav--hero { order: -2; }
  .dhero-media {
    position: relative;
    inset: auto;
    width: 100%;
    height: 120vw;
    max-height: 560px;
    order: -1;
  }
  .dhero-img { object-position: 50% 28%; }
  .dhero-scrim { background: linear-gradient(0deg, var(--ink) 0%, rgba(20, 16, 8, 0) 52%); }
  .dhero-body { padding-block: 40px 72px; }
  .dhero-title { max-width: none; }
}

/* ── The 3Bs ───────────────────────────────────────────────────────── */

.threebs {
  position: relative;
  background: var(--sand);
  color: var(--ink-2);
  overflow: hidden;
  padding-block: clamp(96px, 14vh, 180px) !important;
}

/* Warm gradient mesh — atmosphere under the collage, not a flat band. */
.mesh {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(52% 44% at 12% 8%,  rgba(138, 31, 19, .38) 0%, rgba(138, 31, 19, 0) 100%),
    radial-gradient(46% 40% at 88% 16%, rgba(240, 178, 140, .34) 0%, rgba(240, 178, 140, 0) 100%),
    radial-gradient(60% 52% at 78% 88%, rgba(138, 31, 19, .26) 0%, rgba(138, 31, 19, 0) 100%),
    radial-gradient(48% 42% at 8% 82%,  rgba(246, 222, 196, .55) 0%, rgba(246, 222, 196, 0) 100%),
    radial-gradient(70% 60% at 50% 45%, rgba(250, 244, 232, .65) 0%, rgba(250, 244, 232, 0) 100%);
}

.threebs .wrap { position: relative; }
.threebs .section-head { margin-bottom: clamp(56px, 9vh, 110px); }

.collage {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(20px, 2.2vw, 36px);
}

.bcard {
  position: relative;
  width: clamp(220px, 24vw, 330px);
  border-radius: var(--radius);
  transition: transform .45s var(--ease);
}
.bcard:nth-child(2) { z-index: 2; }
.bcard img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  transition: filter .4s ease;
}
.bcard-label {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ivory);
  font-weight: 800;
  font-size: clamp(20px, 1.8vw, 28px);
  letter-spacing: .16em;
  text-transform: uppercase;
  text-shadow: 0 2px 24px rgba(20, 16, 8, .55);
  pointer-events: none;
  transition: opacity .4s ease;
}
.bcard-desc {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-end;
  padding: 24px;
  border-radius: var(--radius);
  background: linear-gradient(0deg, rgba(20, 16, 8, .78) 0%, rgba(20, 16, 8, 0) 55%);
  opacity: 0;
  transition: opacity .4s ease;
  pointer-events: none;
}
.bcard-desc p {
  color: var(--ivory);
  font-size: clamp(17px, 1.35vw, 20px);
  line-height: 1.5;
  font-weight: 500;
}

/* The label trades places with the explanation on hover. */
.bcard:hover { transform: scale(1.04); z-index: 3; }
.bcard:hover img { filter: brightness(.72); }
.bcard:hover .bcard-label { opacity: 0; }
.bcard:hover .bcard-desc { opacity: 1; }

@media (max-width: 940px) {
  /* No hover on touch — show every explanation outright. */
  .collage { flex-wrap: wrap; }
  /* Always-on copy needs more scrim than the hover state did — it spans
     more of the card than the original 55% fade covered. */
  .bcard-desc {
    opacity: 1;
    background: linear-gradient(0deg, rgba(20, 16, 8, .86) 0%, rgba(20, 16, 8, .52) 62%, rgba(20, 16, 8, .12) 100%);
  }
  .bcard-label { align-items: flex-start; padding-top: 24px; }
  .bcard img { filter: brightness(.78); }
}

/* ── A simple idea ─────────────────────────────────────────────────
   Image left, copy right, inside one soft card on the page ground. */

.idea .wrap { max-width: 1240px; }

.idea-card {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  align-items: center;
  gap: clamp(28px, 4vw, 72px);
  padding: clamp(20px, 2.4vw, 32px);
  background: #faf6ee;
  border: 1px solid var(--line-2);
  border-radius: clamp(24px, 3vw, 40px);
  box-shadow: var(--shadow-soft);
}

.idea-art img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: 50% 40%;
  border-radius: clamp(16px, 2vw, 26px);
}

.idea-copy { padding-right: clamp(0px, 2vw, 32px); }
.idea-copy h2 { font-size: clamp(36px, 4.2vw, 62px); margin-bottom: 26px; }
.idea-copy p {
  font-size: clamp(16px, 1.2vw, 19px);
  line-height: 1.65;
  color: var(--muted);
  max-width: 46ch;
}
.idea-copy p + p { margin-top: 18px; }
.idea-copy .btn { margin-top: 34px; }

@media (max-width: 860px) {
  /* Stack, and let the photo become a banner rather than a tall portrait. */
  .idea-card { grid-template-columns: 1fr; gap: 28px; }
  .idea-art img { aspect-ratio: 3 / 2; object-position: 50% 34%; }
  .idea-copy { padding-right: 0; }
}

/* ── Ready to date differently ─────────────────────────────────────── */

.ready {
  background: var(--accent);
  color: var(--ivory);
  overflow: hidden;
  padding-block: clamp(96px, 14vh, 180px) !important;
}
.ready-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(40px, 6vw, 96px);
}
.ready-copy { flex: 1 1 480px; min-width: 0; }
.ready-copy h2 { font-size: clamp(44px, 6vw, 96px); max-width: 13ch; }
.ready-cta { display: flex; align-items: center; flex-wrap: wrap; gap: 20px; margin-top: 40px; }

.ready-art { flex: 0 1 380px; min-width: 260px; transform: rotate(2.5deg); }
.ready-art img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
}
/* .reveal writes its own transform, so tilt the image instead of the box. */
.ready-art.reveal { transform: translateY(30px); }
.ready-art.reveal.in-view { transform: none; }
.ready-art.reveal img { transform: rotate(2.5deg); }

@media (max-width: 940px) {
  .ready-row { flex-direction: column; align-items: flex-start; gap: 48px; }
  /* The flex-basis on these two is a WIDTH in the row layout above, but the
     main axis is now vertical — leaving it set would floor the copy block at
     480px tall for ~180px of content, and open a huge gap above the image. */
  .ready-copy, .ready-art { flex: 0 0 auto; width: 100%; }
  .ready-art { align-self: center; max-width: 340px; }
}

/* ══════════════════════════════════════════════════════════════════════
   PAGE CHROME — inner-page heroes + footer
   ══════════════════════════════════════════════════════════════════════ */

/* The ink band continues straight out of the nav on every inner page. */
.page-hero, .team-hero {
  /* Grid places every child in one centred 1400px column, so a narrow
     paragraph stays flush with the headline instead of self-centring. */
  display: grid;
  grid-template-columns: minmax(0, 1400px);
  justify-content: center;
  background: var(--ink);
  color: var(--ivory);
  padding: clamp(56px, 9vh, 104px) var(--pad-x) clamp(72px, 11vh, 128px);
}
.page-hero h1, .team-hero h1 { max-width: 16ch; }
.page-hero p, .team-hero p {
  max-width: 62ch;
  margin-top: 28px;
  font-size: clamp(17px, 1.3vw, 21px);
  line-height: 1.6;
  font-weight: 500;
  color: rgba(243, 237, 227, .78);
}
.page-hero .tag { margin-bottom: 24px; }

footer {
  background: var(--ink);
  color: var(--ivory);
  padding: clamp(56px, 9vh, 96px) 0 48px;
}
.foot {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: clamp(32px, 5vw, 80px);
}
.foot-brand { grid-column: 1 / -1; }
.foot-brand p { max-width: 34ch; margin-top: 14px; font-size: 15px; color: rgba(243, 237, 227, .6); }
.foot h3 {
  margin-bottom: 22px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  opacity: .6;
}
.foot ul { display: flex; flex-direction: column; gap: 22px; }
.foot a { font-size: 16px; font-weight: 500; transition: opacity .2s var(--ease); }
.foot a:hover { opacity: .68; }

.foot-base {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-top: clamp(48px, 7vh, 72px);
  padding-top: 32px;
  border-top: 1px solid var(--line-dark);
  font-size: 13px;
  color: rgba(243, 237, 227, .6);
}
.foot-base .brand { font-size: 24px; color: var(--ivory); }

@media (min-width: 941px) {
  .foot { grid-template-columns: 1.4fr repeat(3, 1fr); }
  .foot-brand { grid-column: auto; }
}

/* ══════════════════════════════════════════════════════════════════════
   COMPONENTS — shared by the inner pages
   ══════════════════════════════════════════════════════════════════════ */

/* ── Closing CTA block ─────────────────────────────────────────────── */

.cta {
  background: var(--accent);
  color: var(--ivory);
  border-radius: clamp(24px, 3vw, 40px);
  padding: clamp(56px, 9vw, 104px) clamp(28px, 5vw, 80px);
  text-align: center;
}
.cta h2 { font-size: clamp(38px, 5vw, 72px); max-width: 16ch; margin-inline: auto; }
.cta p {
  max-width: 54ch;
  margin: 28px auto 36px;
  font-size: clamp(16px, 1.25vw, 20px);
  line-height: 1.6;
  font-weight: 500;
  color: rgba(243, 237, 227, .82);
}
.cta .btn + .btn { margin-left: 12px; }

/* ── Pillars (how-it-works, safety, contact) ───────────────────────── */

.pillars {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: clamp(20px, 2.4vw, 36px);
}
.pillar {
  background: var(--page);
  border: 1px solid var(--line-2);
  border-radius: var(--radius);
  padding: clamp(28px, 3vw, 40px);
  box-shadow: var(--shadow-soft);
  transition: transform .45s var(--ease), box-shadow .45s var(--ease);
}
.pillar:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.section-soft .pillar { background: var(--page); }

.pillar-ico {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  margin-bottom: 26px;
  border-radius: 16px;
  background: rgba(138, 31, 19, .1);
  color: var(--accent);
}
/* The three tints stay as warm siblings rather than unrelated hues. */
.pillar-ico.coral { background: rgba(138, 31, 19, .1);   color: var(--accent); }
.pillar-ico.sage  { background: rgba(42, 35, 28, .09);   color: var(--ink-3); }
.pillar-ico.amber { background: rgba(240, 178, 140, .34); color: #8a4a22; }

.pillar h2, .pillar h3 {
  font-size: clamp(20px, 1.7vw, 25px);
  font-weight: 700;
  text-transform: none;
  letter-spacing: -.01em;
  line-height: 1.22;
  margin-bottom: 14px;
}
.pillar p { font-size: 16px; line-height: 1.65; color: var(--muted); }
.pillar p + p { margin-top: 14px; }
.pillar a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }

/* ── Funnel rail (how-it-works) ────────────────────────────────────── */

.funnel-rail { display: flex; flex-direction: column; }
.funnel-step {
  position: relative;
  display: grid;
  grid-template-columns: minmax(72px, 120px) 1fr;
  column-gap: clamp(20px, 4vw, 56px);
  row-gap: 0;
  align-items: start;
  padding-block: clamp(36px, 5vh, 56px);
  border-top: 1px solid var(--line);
}
.funnel-step:last-child { border-bottom: 1px solid var(--line); }
/* Auto-placement would drop the body copy back under the number, so pin
   the number to column one and keep every other child in column two. */
.funnel-num { grid-column: 1; grid-row: 1 / -1; }
.funnel-step > :not(.funnel-num) { grid-column: 2; }
.funnel-num {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(40px, 5vw, 72px);
  line-height: .9;
  color: var(--accent);
}
.funnel-step h2 {
  font-size: clamp(26px, 2.8vw, 40px);
  text-transform: none;
  letter-spacing: -.015em;
  line-height: 1.1;
  margin-bottom: 16px;
}
.funnel-step p { font-size: clamp(16px, 1.15vw, 18px); line-height: 1.7; color: var(--muted); max-width: 62ch; }
.funnel-step p + p { margin-top: 14px; }
.funnel-meta {
  font-size: 14px !important;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--accent) !important;
}
.funnel-step-end .funnel-num { color: var(--ink-2); }

@media (max-width: 640px) {
  .funnel-step { grid-template-columns: 1fr; column-gap: 0; row-gap: 12px; }
  .funnel-num, .funnel-step > :not(.funnel-num) { grid-column: 1; grid-row: auto; }
}

/* ── Pricing ───────────────────────────────────────────────────────── */

.price-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: clamp(20px, 2.4vw, 36px);
  align-items: start;
}
.price-card {
  background: var(--page);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: clamp(32px, 3.4vw, 48px);
  box-shadow: var(--shadow-soft);
}
.price-card-pro {
  background: var(--ink);
  color: var(--ivory);
  border-color: transparent;
  box-shadow: var(--shadow);
}
.price-card h2 {
  font-size: clamp(24px, 2.2vw, 32px);
  letter-spacing: .04em;
  margin-bottom: 20px;
}
.price-amount {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(56px, 6vw, 84px);
  line-height: 1;
  color: var(--accent);
}
.price-per { font-family: var(--display); font-style: normal; font-size: 17px; font-weight: 600; }
.price-sub { margin: 18px 0 26px; font-size: 16px; line-height: 1.6; color: var(--muted); }
.price-card-pro .price-sub { color: rgba(243, 237, 227, .72); }

.plan-options { display: grid; gap: 12px; margin-bottom: 4px; }
.plan-option {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 20px 22px;
  border: 1px solid var(--line-dark);
  border-radius: 16px;
}
.plan-option-best { border-color: var(--accent-soft); background: rgba(226, 163, 150, .08); }
.plan-tag {
  align-self: flex-start;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--accent-soft);
}
.plan-price { font-size: clamp(28px, 2.6vw, 38px); font-weight: 800; letter-spacing: -.02em; line-height: 1; }
.plan-meta { font-size: 13px; line-height: 1.5; color: rgba(243, 237, 227, .6); }

.price-list { display: flex; flex-direction: column; gap: 14px; margin-bottom: 32px; }
.price-list li {
  position: relative;
  padding-left: 30px;
  font-size: 16px;
  line-height: 1.55;
  color: var(--muted);
}
.price-list li::before {
  content: "";
  position: absolute;
  left: 0; top: .5em;
  width: 14px; height: 8px;
  border-left: 2px solid var(--accent);
  border-bottom: 2px solid var(--accent);
  transform: rotate(-45deg);
}
.price-list-pro li { color: rgba(243, 237, 227, .82); }
.price-list-pro li::before { border-color: var(--accent-soft); }

.price-btn { width: 100%; }
.price-card-pro .btn-coral { background: var(--ivory); color: var(--ink-2); }
.price-card-pro .btn-coral:hover { background: #fff; }
.price-fine, .price-footnote { margin-top: 20px; font-size: 13px; line-height: 1.6; color: var(--muted-2); }
.price-card-pro .price-fine { color: rgba(243, 237, 227, .55); }
.price-footnote { text-align: center; max-width: 70ch; margin-inline: auto; }

/* ── FAQ / disclosure lists ────────────────────────────────────────── */

.faq { max-width: 920px; margin-inline: auto; }
.faq-item {
  border-bottom: 1px solid var(--line);
  padding-block: 8px;
}
.faq-item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding-block: 24px;
  font-size: clamp(18px, 1.5vw, 22px);
  font-weight: 700;
  letter-spacing: -.01em;
  line-height: 1.35;
  cursor: pointer;
  list-style: none;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "";
  flex: none;
  width: 12px; height: 12px;
  border-right: 2px solid var(--accent);
  border-bottom: 2px solid var(--accent);
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform .3s var(--ease);
}
.faq-item[open] summary::after { transform: rotate(-135deg) translate(-4px, -4px); }
.faq-item summary:hover { color: var(--accent); }
.faq-item > p, .faq-item > ul, .faq-item > ol {
  padding-bottom: 26px;
  font-size: 16px;
  line-height: 1.72;
  color: var(--muted);
  max-width: 72ch;
}
.faq-item > p + p { padding-top: 0; margin-top: -12px; padding-bottom: 26px; }
.faq-item a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }

/* ── Team ──────────────────────────────────────────────────────────── */

.team-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: clamp(20px, 2.4vw, 36px);
  max-width: 1400px;
  margin-inline: auto;
  padding: var(--section-y) var(--pad-x);
}
.team-card {
  background: var(--page);
  border: 1px solid var(--line-2);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-soft);
}
.team-photo { width: 100%; aspect-ratio: 1; object-fit: cover; }
.team-card-body { padding: clamp(24px, 2.6vw, 34px); }
.team-name { font-size: clamp(21px, 1.8vw, 26px); text-transform: none; letter-spacing: -.01em; line-height: 1.2; }
.team-title {
  margin: 10px 0 16px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--accent);
}
.team-bio { font-size: 15px; line-height: 1.7; color: var(--muted); }

/* ── Legal pages ───────────────────────────────────────────────────── */

.legal-page { background: var(--page); }
.legal-container {
  max-width: 820px;
  margin-inline: auto;
  padding: clamp(56px, 9vh, 96px) var(--pad-x) clamp(72px, 11vh, 128px);
}
.legal-container h1 { font-size: clamp(38px, 4.6vw, 66px); margin-bottom: 16px; }
.legal-container .legal-updated {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: clamp(40px, 6vh, 64px);
}
.legal-container h2 {
  font-size: clamp(22px, 2vw, 30px);
  text-transform: none;
  letter-spacing: -.015em;
  line-height: 1.2;
  margin: clamp(40px, 6vh, 56px) 0 16px;
}
.legal-container h3 {
  font-size: 19px;
  text-transform: none;
  margin: 32px 0 12px;
}
.legal-container p, .legal-container li { font-size: 16px; line-height: 1.75; color: var(--muted); }
.legal-container p + p { margin-top: 16px; }
.legal-container ul, .legal-container ol { margin: 16px 0; padding-left: 22px; list-style: disc; }
.legal-container ol { list-style: decimal; }
.legal-container li { margin-bottom: 10px; padding-left: 4px; }
.legal-container a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.legal-container strong, .legal-container b { color: var(--ink-2); font-weight: 700; }
.legal-container table { width: 100%; border-collapse: collapse; margin: 24px 0; font-size: 15px; }
.legal-container th, .legal-container td {
  border: 1px solid var(--line);
  padding: 12px 14px;
  text-align: left;
  vertical-align: top;
}
.legal-container th { background: var(--sand); font-weight: 700; color: var(--ink-2); }

/* Legal pages close with one quiet line rather than a brick CTA — a
   terms page should not shout, but it should not be a dead end either. */
.legal-onward {
  max-width: 820px;
  margin: 0 auto;
  padding: 0 var(--pad-x) clamp(64px, 9vh, 96px);
  font-size: 16px;
  color: var(--muted-2);
}
.legal-onward a {
  color: var(--accent);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ── Forms (contact, feedback) ─────────────────────────────────────── */

.feedback-form { max-width: 720px; margin-inline: auto; display: grid; gap: 22px; }
.field-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 22px; }
.field { display: flex; flex-direction: column; gap: 10px; }
.field > span { font-size: 14px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.field > span small { font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--muted-2); }
.field input, .field select, .field textarea {
  width: 100%;
  padding: 15px 18px;
  background: var(--page);
  border: 1px solid var(--line);
  border-radius: 14px;
  font-size: 16px;
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.field textarea { resize: vertical; min-height: 140px; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(138, 31, 19, .14);
}
.feedback-status { font-size: 15px; font-weight: 600; color: var(--accent); min-height: 1.5em; }

/* ── 404 ───────────────────────────────────────────────────────────── */

.nf {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
  min-height: calc(100svh - 84px);
  padding: clamp(56px, 10vh, 120px) var(--pad-x);
  background: var(--ink);
  color: var(--ivory);
  text-align: center;
}
.nf-code {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(96px, 16vw, 220px);
  line-height: .85;
  color: var(--accent-soft);
}
.nf p { max-width: 54ch; font-size: clamp(16px, 1.3vw, 20px); line-height: 1.6; color: rgba(243, 237, 227, .78); }
.nf-cta { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; margin-top: 20px; }

/* ── Image placeholders (grey boxes awaiting real photography) ─────── */

.ph {
  position: relative;
  background: var(--sand) center / cover no-repeat;
  color: var(--muted-2);
}
.ph::after {
  content: attr(data-ph);
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.ph[style*="background-image"]::after { content: none; }

/* ══════════════════════════════════════════════════════════════════════
   GET-STARTED MODAL
   Built by main.js, so it only exists when JS runs — with JS off every
   CTA stays an ordinary link straight to the web app.
   ══════════════════════════════════════════════════════════════════════ */

.gs-backdrop {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(10, 8, 4, .72);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  animation: gsFade .28s var(--ease) both;
  overflow-y: auto;
}

.gs-panel {
  position: relative;
  width: 100%;
  max-width: 460px;
  padding: clamp(32px, 5vw, 44px) clamp(24px, 4vw, 40px) clamp(28px, 4vw, 36px);
  background: var(--ink);
  color: var(--ivory);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  text-align: center;
  animation: gsRise .38s var(--ease) both;
}

@keyframes gsFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes gsRise {
  from { opacity: 0; transform: translateY(18px) scale(.97); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .gs-backdrop, .gs-panel { animation: none; }
}

.gs-close {
  position: absolute;
  top: 14px;
  right: 14px;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--ivory);
  cursor: pointer;
  opacity: .6;
  transition: opacity .2s var(--ease), background .2s var(--ease);
}
.gs-close:hover { opacity: 1; background: rgba(243, 237, 227, .1); }

.gs-brand {
  font-family: var(--script);
  font-style: italic;
  font-size: 26px;
  line-height: 1;
  margin-bottom: 22px;
}

.gs-title {
  font-size: clamp(34px, 7vw, 46px);
  margin-bottom: 16px;
}

.gs-lede {
  max-width: 34ch;
  margin: 0 auto clamp(26px, 4vw, 34px);
  font-size: 16px;
  line-height: 1.55;
  font-weight: 500;
  color: rgba(243, 237, 227, .76);
}

/* The two doors. main.js emits them in the right order for the device —
   DOM order, not CSS `order`, so tab order matches the visual order. */
.gs-doors { display: flex; flex-direction: column; gap: 14px; }

.gs-door-web { width: 100%; }

/* Apple supplies the badge as a fixed-proportion lockup; give it a hit area
   that matches the pill next to it rather than letting it shrink. */
.gs-door-store {
  display: flex;
  justify-content: center;
  padding: 4px;
  border-radius: 12px;
  transition: transform .25s var(--ease), opacity .25s var(--ease);
}
.gs-door-store:hover { transform: translateY(-2px); }
.gs-door-store img { height: 52px; width: auto; }

.gs-or {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 4px 0;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(243, 237, 227, .44);
}
.gs-or::before, .gs-or::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--line-dark);
}

.gs-note {
  margin-top: clamp(24px, 3.5vw, 30px);
  padding-top: 22px;
  border-top: 1px solid var(--line-dark);
  font-size: 14px;
  line-height: 1.6;
  color: rgba(243, 237, 227, .58);
}

@media (max-width: 420px) {
  .gs-backdrop { padding: 0; place-items: end stretch; }
  .gs-panel {
    max-width: none;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    animation-name: gsSheet;
  }
  @keyframes gsSheet {
    from { opacity: 0; transform: translateY(40px); }
    to   { opacity: 1; transform: none; }
  }
}

/* ══════════════════════════════════════════════════════════════════════
   HERO INTRO
   The wordmark holds centred on ink, then flies into its nav position
   while the rest of the hero staggers in. Plays on every load — there is
   deliberately no "already seen" flag.

   The gate class is set by a tiny inline script in the head so the hero
   never paints before it is hidden. Everything here is scoped to that
   class, so with JS off (or if the script throws) the page renders
   normally and no intro machinery exists at all.
   ══════════════════════════════════════════════════════════════════════ */

/* Held back until the timeline releases them. visibility, not display, so
   layout is already settled and the FLIP measurement below is accurate. */
.intro-pending .dhero-body,
.intro-pending .dhero-media,
.intro-pending .nav--hero .nav-links,
.intro-pending .nav--hero .brand,
.intro-pending .nav--hero .nav-toggle,
.intro-pending main,
.intro-pending footer { visibility: hidden; }

/* The CSS entrance animations would otherwise burn down while the intro is
   still running, so the hero would be mid-reveal when it finishes. */
.intro-pending .dhero-title span,
.intro-pending .dhero-cta,
.intro-pending .dhero-img { animation-play-state: paused; }

/* The rest of the hero is released while the clone is still travelling, so
   the real wordmark has to stay hidden a beat longer — otherwise both are on
   screen at once and the wordmark ghosts as it lands. */
.intro-brand-hold .nav--hero .brand { visibility: hidden; }

.intro-cover {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: var(--ink);
  transition: opacity .7s cubic-bezier(0.16, 1, 0.3, 1);
}
.intro-cover.is-clearing { opacity: 0; }

/* A stand-in for the nav wordmark: same face, same size, positioned over
   where the real one will land, then transformed out to centre screen.
   Animating a clone avoids fighting the nav's own stacking context. */
.intro-word {
  position: fixed;
  z-index: 201;
  margin: 0;
  font-family: var(--script);
  font-style: italic;
  font-weight: 400;
  font-size: 28px;
  letter-spacing: .01em;
  line-height: 1;
  white-space: nowrap;
  color: var(--ivory);
  transform-origin: 0 0;
  will-change: transform;
}

/* Blocks released by the timeline, each fading up into place. */
.intro-reveal {
  opacity: 0;
  transform: translateY(24px);
}
.intro-reveal.is-in {
  opacity: 1;
  transform: none;
  transition: opacity .8s cubic-bezier(0.16, 1, 0.3, 1),
              transform .8s cubic-bezier(0.16, 1, 0.3, 1);
}

@media (prefers-reduced-motion: reduce) {
  /* Nothing is ever hidden, and no timeline runs — see main.js. */
  .intro-pending .dhero-body,
  .intro-pending .dhero-media,
  .intro-pending .nav--hero .nav-links,
  .intro-pending .nav--hero .brand,
  .intro-pending .nav--hero .nav-toggle,
  .intro-pending main,
  .intro-pending footer { visibility: visible; }
  .intro-brand-hold .nav--hero .brand { visibility: visible; }
  .intro-cover, .intro-word { display: none; }
  .intro-reveal { opacity: 1; transform: none; }
}