/* ═══════════════════════════════════════════════════════════════════
   Lamma — sections. Layout for the 10 movements.
   ═══════════════════════════════════════════════════════════════════ */

/* ── Shared section frame ──────────────────────────────────────────── */
.section {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 var(--pad-screen);
}
.section--prose { max-width: var(--maxw-prose); }
.section--bleed { max-width: none; padding: 0; }

.section-stack > * + * { margin-block-start: var(--pad-section); }

.section-head { text-align: center; margin-bottom: 48px; }
.section-head .eyebrow { margin-bottom: 14px; display: block; }
.section-head .display { font-size: clamp(1.8rem, 4vw, 2.8rem); }
.section-head .lead { margin: 18px auto 0; text-align: center; }

/* RTL: mirror logical spacing (the whole document flips via dir="rtl") */

/* ═══════════════════════════════════════════════════════════════════
   §0 — TOP BAR
   "The mark + name. Minimal. Condenses to a hairline on scroll."
   ═══════════════════════════════════════════════════════════════════ */
.topbar {
  position: fixed;
  top: 0; inset-inline: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px var(--pad-screen);
  background: color-mix(in srgb, var(--ground) 80%, transparent);
  backdrop-filter: saturate(1.4) blur(10px);
  -webkit-backdrop-filter: saturate(1.4) blur(10px);
  transition: padding var(--t-normal) var(--ease), box-shadow var(--t-normal) var(--ease);
}
.topbar.is-scrolled {
  padding-block: 10px;
  box-shadow: 0 1px 0 var(--hairline);
}
.topbar__brand {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--ink);
}
.topbar__brand .display { font-size: 1.3rem; letter-spacing: 0.02em; }
.topbar__mark { width: 28px; height: 28px; color: var(--brand); }
.topbar__controls { display: flex; align-items: center; gap: 14px; }

.lang-switcher {
  position: relative;
}
.lang-switcher__btn {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  background: none;
  border: 1px solid var(--hairline);
  border-radius: var(--r-pill);
  padding: 6px 14px;
  cursor: pointer;
  transition: border-color var(--t-quick) var(--ease), background var(--t-quick) var(--ease);
}
.lang-switcher__btn:hover { border-color: color-mix(in srgb, var(--ink) 20%, transparent); }
.lang-switcher__btn .chev { width: 10px; height: 10px; opacity: 0.5; transition: transform var(--t-quick) var(--ease); }
.lang-switcher[data-open] .chev { transform: rotate(180deg); }

.lang-menu {
  position: absolute;
  top: calc(100% + 8px);
  inset-inline-end: 0;
  min-width: 180px;
  background: var(--card);
  border: 1px solid var(--hairline);
  border-radius: var(--r-block);
  box-shadow: var(--shadow-soft);
  padding: 6px;
  list-style: none;
  opacity: 0;
  transform: translateY(-6px);
  pointer-events: none;
  /* Hidden from Tab and screen readers while closed, not just transparent:
     ten invisible buttons sat in the tab order (scan, 2026-10-02).
     Visibility flips after the fade out, and at once on the way in. */
  visibility: hidden;
  transition: opacity var(--t-quick) var(--ease), transform var(--t-quick) var(--ease),
              visibility 0s linear var(--t-quick);
  max-height: 60vh;
  overflow-y: auto;
}
.lang-switcher[data-open] .lang-menu {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
  visibility: visible;
  transition-delay: 0s;
}
.lang-menu li button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  text-align: start;
  font-family: var(--font-body);
  font-size: 15px;
  padding: 9px 12px;
  border: none;
  background: none;
  border-radius: var(--r-cell);
  cursor: pointer;
  color: var(--ink);
  transition: background var(--t-quick) var(--ease);
}
.lang-menu li button:hover { background: color-mix(in srgb, var(--ink) 5%, transparent); }
.lang-menu li button[aria-current="true"] {
  background: color-mix(in srgb, var(--brand) 14%, transparent);
  color: var(--brand);
  font-weight: 600;
}
.lang-menu__native { color: var(--ink); }
.lang-menu__tag { font-size: 11px; color: var(--ink-faint); font-weight: 500; text-transform: uppercase; letter-spacing: 0.5px; }
.lang-menu__tag--draft { color: var(--attention); }

/* Theme toggle */
.theme-toggle {
  width: 38px; height: 38px;
  display: grid; place-items: center;
  border: 1px solid var(--hairline);
  border-radius: var(--r-pill);
  background: none;
  color: var(--ink);
  cursor: pointer;
  transition: border-color var(--t-quick) var(--ease);
}
.theme-toggle:hover { border-color: color-mix(in srgb, var(--ink) 20%, transparent); }
.theme-toggle svg { width: 18px; height: 18px; }
:root[data-theme="dark"] .theme-toggle .sun { display: block; }
:root[data-theme="dark"] .theme-toggle .moon { display: none; }
.theme-toggle .sun { display: none; }
.theme-toggle .moon { display: block; }

/* ═══════════════════════════════════════════════════════════════════
   §1 — THE COLLAPSE (hero)
   ═══════════════════════════════════════════════════════════════════ */
.topbar .nav-links a.btn--primary { color: var(--on-brand); }

.hero {
  min-height: 100svh;
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr);
  grid-template-areas:
    "eyebrow visual"
    "title visual"
    "sub visual"
    "ctas visual"
    "reassure visual";
  align-content: center;
  align-items: start;
  column-gap: clamp(32px, 6vw, 108px);
  text-align: start;
  padding: 108px max(var(--pad-screen), calc((100vw - 1320px) / 2)) 64px;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(circle at 78% 36%, color-mix(in srgb, var(--appearance-blue-linen-feature) 48%, transparent), transparent 46%),
    linear-gradient(150deg, var(--ground), color-mix(in srgb, var(--ground) 68%, var(--card)));
}
[dir="rtl"] .hero {
  background:
    radial-gradient(circle at 22% 36%, color-mix(in srgb, var(--appearance-blue-linen-feature) 48%, transparent), transparent 46%),
    linear-gradient(210deg, var(--ground), color-mix(in srgb, var(--ground) 68%, var(--card)));
}
:root[data-theme="dark"] .hero,
:root[data-theme="dark"][dir="rtl"] .hero {
  background:
    radial-gradient(circle at 75% 36%, color-mix(in srgb, var(--appearance-night-ink-feature) 74%, transparent), transparent 52%),
    var(--ground);
}
.hero > :not(.hero__nur) { position: relative; z-index: 1; }
/* The hero's wash hands over to the page ground instead of stopping on a
   ruled line where the next section begins. Above the light, under the text. */
.hero::after {
  content: '';
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  height: 140px;
  background: linear-gradient(to bottom, transparent, var(--ground));
  pointer-events: none;
}
.hero__nur {
  --nur-bloom-opacity: 1;
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}
:root[data-theme="dark"] .hero__nur { --nur-bloom-opacity: 0.65; }
.hero__nur-bloom {
  position: absolute;
  inset: 0;
  background: radial-gradient(
    circle at 0% 46%,
    color-mix(in srgb, var(--brand) 16%, transparent) 0%,
    transparent 68%
  );
  opacity: 0;
  transform: scale(0.6);
  transform-origin: 0% 46%;
  animation: hero-nur-open var(--t-entrance) var(--ease-settle) 120ms forwards;
}
[dir="rtl"] .hero__nur-bloom {
  background: radial-gradient(
    circle at 100% 46%,
    color-mix(in srgb, var(--brand) 16%, transparent) 0%,
    transparent 68%
  );
  transform-origin: 100% 46%;
}
.hero__nur-mote {
  position: absolute;
  inset-inline-start: var(--x);
  top: var(--y);
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--brand);
  opacity: 0.1;
  animation: hero-nur-drift 4500ms ease-in-out var(--phase) 2 both;
}
@keyframes hero-nur-open {
  to { opacity: var(--nur-bloom-opacity); transform: scale(1); }
}
@keyframes hero-nur-drift {
  0%, 100% { opacity: 0.1; transform: translate3d(0, 0, 0); }
  50% { opacity: 0.22; transform: translate3d(7px, 12px, 0); }
}
/* ── The staged entrance ──────────────────────────────────────────────
   The hero arrives in five beats rather than appearing whole.

   Done with an animation rather than a class the way Sylva does it, because
   this site is served under `script-src 'self'` with no `'unsafe-inline'`:
   an inline `<script>` that sets a `js` class on <html> is silently refused
   by the Content-Security-Policy and never runs. A CSS animation needs no
   script, cannot flash unstyled content, and lands on its end state through
   `both` whatever else fails.

   Under reduce-motion the global kill-switch in base.css collapses these
   durations, so the same five elements are simply *there* on the first
   frame. The staging is a sequence, never a gate. */
@keyframes hero-enter {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}
.hero__enter { animation: hero-enter 760ms var(--ease-settle) both; }
.hero__eyebrow    { animation-delay: 80ms; }
.hero__title      { animation-delay: 180ms; }
.hero__sub        { animation-delay: 330ms; }
.hero__ctas       { animation-delay: 560ms; }
.hero__reassure   { animation-delay: 620ms; }
.hero__product    { animation-delay: 300ms; }

.hero__reassure {
  grid-area: reassure;
  margin: 14px 0 0;
  font-size: 0.92rem;
  color: var(--ink-soft);
}

/* ── The product, on a laptop and a phone ────────────────────────────
   Real screens rendered from the app (test/marketing). The laptop carries
   the page; the phone overlaps its reading-end corner, the way people meet
   Lamma: the host at a desk, the guests on a phone. */
.hero__product {
  grid-area: visual;
  align-self: center;
  position: relative;
  width: 100%;
  max-width: 720px;
  justify-self: center;
  margin-block-end: 48px;
}
.device {
  position: relative;
  overflow: hidden;
  background: var(--card);
  box-shadow: 0 30px 60px -28px color-mix(in srgb, var(--ink) 40%, transparent),
              0 2px 6px color-mix(in srgb, var(--ink) 10%, transparent);
}
.device img { display: block; width: 100%; height: auto; }
.device--laptop {
  border-radius: 14px;
  border: 1px solid var(--hairline);
}
.device--phone {
  position: absolute;
  width: 27%;
  inset-inline-end: -5%;
  bottom: -12%;
  border-radius: 26px;
  border: 5px solid color-mix(in srgb, var(--ink) 88%, var(--card));
}
:root[data-theme="dark"] .device--phone { border-color: color-mix(in srgb, var(--ink) 30%, var(--ground)); }

.hero__eyebrow { grid-area: eyebrow; margin-bottom: 18px; }
.hero__title {
  grid-area: title;
  font-size: clamp(2.5rem, 3.7vw, 4.3rem);
  line-height: 1.06;
  letter-spacing: -0.025em;
  margin-bottom: 18px;
  max-width: 19ch;
}
.hero__title em { font-style: normal; color: var(--brand); }

/* The collapse stage — four competitor cards folding into one. */
.collapse {
  grid-area: visual;
  position: relative;
  width: min(100%, 590px);
  height: 440px;
  margin: auto;
  align-self: center;
  isolation: isolate;
  /* The cards travel to this box's centre in container units (collapse
     below), so the stage answers its own size whatever the viewport. */
  container-type: size;
}
.collapse::before,
.collapse::after {
  content: '';
  position: absolute;
  inset: 3%;
  border-radius: 34px;
  pointer-events: none;
  z-index: -1;
}
.collapse::before {
  background: linear-gradient(150deg,
    color-mix(in srgb, var(--appearance-blue-linen-feature) 80%, white),
    color-mix(in srgb, var(--appearance-blue-linen-ground) 72%, white));
  border: 1px solid color-mix(in srgb, var(--appearance-blue-linen-ink) 10%, transparent);
  box-shadow: 0 36px 72px -38px color-mix(in srgb, var(--appearance-blue-linen-ink) 38%, transparent);
}
.collapse::after {
  background: repeating-linear-gradient(0deg, transparent 0 5px,
      color-mix(in srgb, var(--appearance-blue-linen-ink) 3%, transparent) 5px 6px),
    repeating-linear-gradient(90deg, transparent 0 7px,
      color-mix(in srgb, var(--appearance-blue-linen-ink) 3%, transparent) 7px 8px);
}
:root[data-theme="dark"] .collapse::before {
  background: linear-gradient(150deg, var(--appearance-night-ink-feature), var(--appearance-night-ink-ground));
  border-color: color-mix(in srgb, var(--appearance-night-ink-accent) 24%, transparent);
}
:root[data-theme="dark"] .collapse::after {
  opacity: .2;
}
.collapse__card {
  position: absolute;
  width: 200px;
  padding: 16px 18px;
  background: var(--card);
  border-radius: var(--r-block);
  border: 1px solid color-mix(in srgb, #fff 90%, transparent);
  box-shadow: var(--shadow-contact), var(--shadow-soft);
  text-align: start;
  /* Transform and opacity only. The cards used to animate top/left/right
     out of the scattered layout, but two of them were placed with `bottom`
     and leaving the scattered class dropped every offset to `auto`, which
     does not animate: all four jumped to the top-left corner in one frame
     and faded there. Now each keeps its place and is carried to the centre. */
  transform: translate(0, 0) rotate(var(--rot, 0deg)) scale(1);
  transition:
    transform 820ms var(--ease-settle),
    opacity 520ms var(--ease) 220ms;
  will-change: transform, opacity;
}
.collapse__card-tag {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  margin-bottom: 8px;
  display: block;
}
.collapse__card-line {
  font-size: 13px;
  line-height: 1.45;
  color: var(--ink-soft);
}
.collapse__card-line + .collapse__card-line { margin-top: 4px; }
.collapse__card-skel { height: 8px; border-radius: 4px; margin-top: 8px; background: color-mix(in srgb, var(--ink) 8%, transparent); }

/* Where the four fragments lie, in both states. --to-x/--to-y carry each
   card from its own box to the stage's centre: 50cqw/50cqh is the centre,
   50% is half the card, and the px terms are the card's own offset. */
.collapse__card--partiful  { top: 0; left: 0; --rot: -7deg; --accent: var(--tint-partiful);
  --to-x: calc(50cqw - 50%); --to-y: calc(50cqh - 50%); }
.collapse__card--signup    { top: 30px; right: 0; --rot: 6deg; --accent: var(--tint-signup);
  --to-x: calc(50% - 50cqw); --to-y: calc(50cqh - 50% - 30px); }
.collapse__card--whatsapp  { bottom: 40px; left: 20px; --rot: 5deg; --accent: var(--tint-whatsapp);
  --to-x: calc(50cqw - 50% - 20px); --to-y: calc(50% + 40px - 50cqh); }
.collapse__card--splitwise { bottom: 0; right: 30px; --rot: -5deg; --accent: var(--tint-splitwise);
  --to-x: calc(50% + 30px - 50cqw); --to-y: calc(50% - 50cqh); }
.collapse__card .collapse__card-tag { color: var(--accent); }

/* The merged Lamma card — shown after collapse. */
.collapse__merged {
  position: absolute;
  inset: 0;
  margin: auto;
  width: min(420px, 92%);
  height: fit-content;
  opacity: 0;
  transform: scale(0.9);
  pointer-events: none;
  transition: opacity 700ms var(--ease) 500ms, transform 800ms var(--ease-settle) 500ms;
}
.collapse--merged .collapse__card {
  opacity: 0;
  transform: translate(var(--to-x, 0), var(--to-y, 0)) rotate(0deg) scale(0.82);
  pointer-events: none;
}
.collapse--merged .collapse__merged { opacity: 1; transform: scale(1); pointer-events: auto; }

.merged-card { --accent: var(--brand); }
.merged-card__head {
  padding: 18px 22px 14px;
  border-bottom: 1px solid var(--hairline);
}
.merged-card__title { font-family: var(--font-display); font-size: 1.15rem; font-weight: 600; color: var(--ink); }
.merged-card__sub { font-size: 13px; color: var(--ink-soft); margin-top: 2px; }
.merged-card__row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 22px;
  font-size: 14px;
  color: var(--ink-soft);
}
.merged-card__row-icon { width: 18px; height: 18px; color: var(--brand); flex-shrink: 0; opacity: 0.8; }
.merged-card__row b { color: var(--ink); font-weight: 600; }

.hero__sub { grid-area: sub; max-width: 540px; margin: 0 0 10px; text-align: start; }
.hero__ctas { grid-area: ctas; display: flex; gap: 14px; flex-wrap: wrap; justify-content: flex-start; }
.collapse-section { padding-block: var(--pad-section) 0; }

@media (max-width: 900px) {
  .hero,
  [dir="rtl"] .hero {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding-inline: var(--pad-screen);
  }
  .hero__title { max-width: 18ch; }
  .hero__sub { text-align: center; margin: 0 auto 18px; }
  .hero__ctas { justify-content: center; }
  .hero__reassure { text-align: center; }
  .hero__product { margin: 36px auto 64px; width: min(560px, 92%); }
  .device--phone { inset-inline-end: -4%; bottom: -14%; }
  .collapse { width: min(650px, 100%); margin: 8px auto 28px; }
}

/* ═══════════════════════════════════════════════════════════════════
   §2 — THE THESIS (one quiet sentence)
   ═══════════════════════════════════════════════════════════════════ */
.thesis {
  padding: var(--pad-section) var(--pad-screen);
  text-align: center;
}
.thesis__sentence {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 3.5vw, 2.4rem);
  font-weight: 400;
  line-height: 1.35;
  max-width: var(--maxw-prose);
  margin: 24px auto;
  color: var(--ink);
}
.thesis__sentence em { font-style: italic; color: var(--brand); }
.thesis__attr { display: block; margin-top: 28px; }

/* ═══════════════════════════════════════════════════════════════════
   §3 — THE CEREMONY (the envelope opens)
   ═══════════════════════════════════════════════════════════════════ */
.ceremony {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--pad-section) var(--pad-screen);
  text-align: center;
  position: relative;
}

/* ── The ceremony's light (Nur) ───────────────────────────────────────
   The same language as the hero: a bronze bloom entering from the reading
   side, gold dust drifting two finite cycles, then stillness. It lights
   only when the envelope opens, sits behind the stage, and never touches
   the card's measured contrast. */
.ceremony__nur {
  --nur-bloom-opacity: 1;
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  /* Light has no edge. Clipped to the section box, the bloom ended in a
     ruled line across the page under the open card; it fades out instead. */
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 12%, #000 78%, transparent);
  mask-image: linear-gradient(to bottom, transparent, #000 12%, #000 78%, transparent);
}
:root[data-theme="dark"] .ceremony__nur { --nur-bloom-opacity: 0.65; }
.ceremony__nur-bloom {
  position: absolute;
  inset: 0;
  background: radial-gradient(
    circle at 0% 44%,
    color-mix(in srgb, var(--brand) 18%, transparent) 0%,
    transparent 66%
  );
  opacity: 0;
  transform: scale(0.62);
  transform-origin: 0% 44%;
  transition: opacity 900ms var(--ease-settle), transform 1200ms var(--ease-settle);
}
[dir="rtl"] .ceremony__nur-bloom {
  background: radial-gradient(
    circle at 100% 44%,
    color-mix(in srgb, var(--brand) 18%, transparent) 0%,
    transparent 66%
  );
  transform-origin: 100% 44%;
}
/* :has() is the seam between the light and the envelope's state; where it is
   unsupported the ceremony simply opens without its light, nothing breaks. */
.ceremony:has(.envelope.is-open) .ceremony__nur-bloom {
  opacity: var(--nur-bloom-opacity);
  transform: scale(1);
}
.ceremony__nur-mote {
  position: absolute;
  inset-inline-start: var(--x);
  top: var(--y);
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--brand);
  opacity: 0;
}
.ceremony:has(.envelope.is-open) .ceremony__nur-mote {
  animation: ceremony-nur-drift 4200ms ease-in-out var(--phase) 2 both;
}
@keyframes ceremony-nur-drift {
  0%   { opacity: 0;    transform: translate3d(0, 0, 0); }
  20%  { opacity: 0.22; }
  50%  { opacity: 0.2;  transform: translate3d(7px, 12px, 0); }
  100% { opacity: 0;    transform: translate3d(0, 0, 0); }
}

/* ═══════════════════════════════════════════════════════════════════
   §3 — THE CEREMONY

   The one place in the product where motion is allowed to be long. Every
   other surface obeys the 160/240/320 cadence; an invitation opening is a
   deliberate ceremony and gets 2100ms, once, then absolute stillness.

   What a real envelope does, and what this reproduces:

     * The seal breaks before anything moves — it lifts, tilts off true, and
       falls away. Wax does not dissolve.
     * The flap is a two-sided object. It swings past 90° and you see its
       lining, because that is what the inside of an envelope looks like.
       `backface-visibility` swaps the faces; no image, no shader.
     * Paper has momentum. The flap overshoots a few degrees and settles.
     * The card is *drawn out*. It rises, turns a half-degree off square the
       way a hand pulls paper, gains its own shadow as it separates, and
       comes in FRONT of the envelope. (It used to rise behind the pocket,
       which hid the date, the venue and the reply — the invitation's entire
       content sat under a white rectangle.)
     * The envelope recedes as the card leaves it. Two objects at two depths,
       not two divs at one.
     * Then the card speaks, a line at a time.

   Everything here is transform and opacity — composited, no layout, no
   blur, no shader, nothing that keeps a ticker after it settles. Under
   reduce-motion the global kill-switch in base.css collapses every duration
   and the whole composition is simply *there* on the first frame.
   ═══════════════════════════════════════════════════════════════════ */

.envelope-stage {
  position: relative;
  width: min(380px, 90vw);
  /* The card is the thing that decides how tall this is. It sits in flow in
     a single grid cell, so the stage always has room for it — at 320px in
     English the card runs to 448px, and a fixed 430px box put its reply
     block over the caption underneath. `min-height` keeps the closed
     composition, where the envelope alone is 280px. */
  display: grid;
  align-items: start;
  min-height: 430px;
  margin: 40px auto 28px;
  perspective: 1400px;
  perspective-origin: 50% 38%;
  cursor: pointer;
  /* The stage turns toward the pointer (motion.js). Kept on the stage rather
     than the card so the envelope and the card turn together, as one object
     on a table. */
  transform-style: preserve-3d;
  transition: transform 420ms var(--ease-settle);
  will-change: transform;
}
/* While the pointer is actually driving it, the easing lives in JavaScript —
   a CSS transition on top would fight it. */
.envelope-stage[style*="rotate"] { transition: none; }
.envelope.is-resetting, .envelope.is-resetting * {
  transition-duration: 0ms !important;
  transition-delay: 0ms !important;
}

/* The whole paper object: body, flap and seal together, so it can recede as
   one while the card comes forward. */
.envelope-paper {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  height: 280px;
  transform-style: preserve-3d;
  transition:
    transform 1100ms var(--ease-settle),
    opacity 900ms var(--ease);
}
.envelope.is-open .envelope-paper {
  /* Receding, not shrinking: a half-step back while the card steps forward. */
  transform: translateY(14px) scale(0.955);
  opacity: 0.92;
  transition-delay: 620ms;
}

/* The invitation card — inside the envelope, then out in front of it. */
.invite-card {
  /* In flow, not absolute: this is what gives the stage its height. */
  position: relative;
  grid-area: 1 / 1;
  justify-self: center;
  width: min(360px, 86vw);
  background: var(--card);
  border-radius: var(--r-card);
  padding: 30px 30px 26px;
  text-align: center;
  z-index: 1;
  /* Closed: down inside the pocket, slightly small, slightly off-square. */
  transform: translateY(46%) scale(0.93) rotate(-1.1deg);
  opacity: 0;
  transform-origin: 50% 100%;
  transition:
    transform 1000ms var(--ease-draw),
    opacity 420ms var(--ease);
  /* While it is still in the envelope the card is invisible but still laid
     out, and it hangs below the stage. Without this, an unseen reply pill
     sat on top of the caption and ate the clicks meant for it. */
  pointer-events: none;
  border: 1px solid color-mix(in srgb, #fff 90%, transparent);
  box-shadow: var(--shadow-contact);
  --accent: var(--brand);
}
/* The card's own shadow, as a separate layer so it can deepen on opacity
   alone — animating box-shadow would repaint every frame. */
.invite-card::before {
  content: '';
  position: absolute;
  inset: 6px 10px -6px;
  border-radius: var(--r-card);
  box-shadow: var(--shadow-lift);
  opacity: 0;
  transition: opacity 900ms var(--ease-settle);
  z-index: -1;
}
.envelope.is-open .invite-card {
  transform: translateY(0) scale(1) rotate(0deg);
  opacity: 1;
  /* In front of the envelope it just left. This is the whole fix: the card
     used to stay at z-index 1 under a z-index 2 pocket. */
  z-index: 6;
  pointer-events: auto;
  transition-delay: 560ms;
}
.envelope.is-open .invite-card::before { opacity: 1; transition-delay: 700ms; }

/* Each line of the card arrives on its own beat, a breath after the card
   itself has settled (animated_invite.dart:46-68 — details at 0.75–1.0). */
.invite-card__line {
  opacity: 0;
  transform: translateY(9px);
  transition:
    opacity 520ms var(--ease-settle),
    transform 620ms var(--ease-settle);
}
.envelope.is-open .invite-card__line { opacity: 1; transform: translateY(0); }
/* Named, not counted. `nth-of-type` counts every div in the card, and the
   corner ornaments are the first of them — which left the reply block with no
   delay at all and visible before the envelope had opened. Each beat names
   the line it belongs to, so adding an ornament cannot shift the timing. */
.envelope.is-open .invite-card__eyebrow { transition-delay: 1060ms; }
.envelope.is-open .invite-card__names   { transition-delay: 1160ms; }
.envelope.is-open .invite-card__divider { transition-delay: 1250ms; }
.envelope.is-open .invite-card__facts   { transition-delay: 1340ms; }
.envelope.is-open .invite-card__rsvp    { transition-delay: 1450ms; }

/* ── The envelope itself ────────────────────────────────────────────── */
.envelope-body {
  position: absolute;
  bottom: 0;
  inset-inline: 0;
  height: 200px;
  background: var(--card);
  border-radius: 8px;
  box-shadow: var(--shadow-contact), var(--shadow-soft);
  z-index: 2;
  transition: transform 700ms var(--ease-settle);
  transform-origin: bottom center;
}
.envelope.is-open .envelope-body { transform: translateY(8px); transition-delay: 200ms; }

/* Two-sided flap. The container rotates; the faces hide their own backs.
   It hangs from the body's top edge (280 - 200 = 80px down the paper): a
   flap hinged above the pocket reads as a loose triangle floating over it. */
.envelope-flap {
  position: absolute;
  top: 80px;
  inset-inline: 0;
  height: 130px;
  z-index: 3;
  transform-style: preserve-3d;
  transform-origin: top center;
  transform: rotateX(0deg);
  transition: transform 900ms var(--ease-flap);
}
.envelope-flap__face,
.envelope-flap__lining {
  position: absolute;
  top: 0;
  inset-inline-start: 50%;
  width: 0;
  height: 0;
  transform: translateX(-50%);
  border-inline-start: min(190px, 45vw) solid transparent;
  border-inline-end: min(190px, 45vw) solid transparent;
  backface-visibility: hidden;
}
.envelope-flap__face {
  border-top: 130px solid var(--card);
  /* The fold casts down onto the pocket it covers. */
  filter: drop-shadow(0 2px 3px color-mix(in srgb, var(--ink) 10%, transparent));
}
/* The inside of the envelope: the same paper, one step deeper, so the open
   flap reads as a lining and not as a second front. Pre-flipped, so it is
   the face you see once the flap has passed 90°. */
.envelope-flap__lining {
  border-top: 130px solid color-mix(in srgb, var(--brand) 12%, var(--card));
  transform: translateX(-50%) rotateX(180deg);
}
.envelope.is-open .envelope-flap {
  /* 181deg, not 180: the extra degree is what stops a flap looking like a
     hinge in a diagram. --ease-flap carries the overshoot and the settle. */
  transform: rotateX(181deg);
  z-index: 0;
  transition-delay: 240ms;
}

/* Wax seal, pressed where the flap's point meets the pocket. */
.wax-seal {
  position: absolute;
  top: 150px;
  inset-inline: 0;
  margin: 0 auto;
  width: 70px;
  height: 70px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #B89060, var(--brand) 60%, #7A5E3D);
  display: grid;
  place-items: center;
  z-index: 4;
  box-shadow: 0 2px 8px color-mix(in srgb, var(--brand) 40%, transparent),
              inset 0 2px 4px color-mix(in srgb, #fff 30%, transparent),
              inset 0 -3px 6px color-mix(in srgb, #000 25%, transparent);
  transition:
    transform 620ms var(--ease-settle),
    opacity 420ms var(--ease);
}
.wax-seal__marks {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 700;
  color: color-mix(in srgb, #fff 85%, var(--brand));
  font-style: italic;
  letter-spacing: -0.05em;
}
/* Pressed: the seal takes the weight for a moment before it gives. */
.envelope.is-opening .wax-seal { transform: translateY(-5px) scale(0.97) rotate(-2deg); }
/* Broken: lifted, turned off true, and gone. Wax does not fade in place. */
.envelope.is-open .wax-seal {
  transform: translateY(-46px) scale(0.72) rotate(-13deg);
  opacity: 0;
  transition-delay: 40ms;
}

.envelope.is-opening .envelope-prompt,
.envelope.is-open .envelope-prompt { opacity: 0; }

/* ── The card's own content ──────────────────────────────────────── */
.invite-card__corners { position: absolute; inset: 0; pointer-events: none; }
.invite-card__corner { position: absolute; width: 28px; height: 28px; color: color-mix(in srgb, var(--accent) 55%, transparent); }
.invite-card__corner--tl { top: 10px; inset-inline-start: 10px; }
.invite-card__corner--tr { top: 10px; inset-inline-end: 10px; transform: scaleX(-1); }

.invite-card__eyebrow { color: var(--brand); margin-bottom: 10px; font-size: 11px; }
.invite-card__names {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 4vw, 2rem);
  line-height: 1.15;
  margin-bottom: 16px;
}
.invite-card__divider { margin: 14px auto; width: 200px; }
.invite-card__facts { font-size: 14px; color: var(--ink-soft); line-height: 1.7; }
.invite-card__facts b { color: var(--ink); font-weight: 600; }
.invite-card__rsvp {
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid var(--hairline);
}
.invite-card__rsvp-label { font-size: 13px; color: var(--ink-soft); margin-bottom: 10px; }
.invite-card__rsvp-options { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.invite-card__rsvp-options .pill { cursor: pointer; font-size: 12.5px; transition: background var(--t-quick) var(--ease), border-color var(--t-quick) var(--ease); border: 1px solid transparent; }
.invite-card__rsvp-options .pill:hover { background: color-mix(in srgb, var(--accent) 22%, transparent); }
/* The reply you chose is more than a colour: it fills, gains weight, and
   carries its own check. The accent is the template's own (restaged with
   the ceremony), darkened toward ink so the label stays readable. */
.invite-card__rsvp-options .pill--active {
  background: color-mix(in srgb, var(--accent, var(--brand)) 30%, transparent);
  border-color: color-mix(in srgb, var(--accent, var(--brand)) 45%, transparent);
  color: color-mix(in srgb, var(--accent, var(--brand)) 72%, var(--ink));
  font-weight: 600;
}
.invite-card__rsvp-options .pill--active::before {
  content: '✓';
  font-weight: 700;
  margin-inline-end: 2px;
}
.invite-card__respond-by { font-size: 11px; color: var(--ink-faint); margin-top: 12px; }

.envelope-prompt {
  position: absolute;
  bottom: -36px;
  inset-inline: 0;
  text-align: center;
  font-size: 14px;
  color: var(--ink-faint);
  transition: opacity var(--t-normal) var(--ease);
  border: 0;
  background: transparent;
  font-family: inherit;
  cursor: pointer;
  z-index: 5;
}
.envelope-prompt[hidden] { display: none; }
.envelope-prompt:focus-visible, .ceremony__replay:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 4px;
}
.ceremony__replay {
  display: block;
  margin: 0 auto 8px;
  padding: 8px 14px;
  border: 1px solid var(--hairline);
  border-radius: 999px;
  background: var(--card);
  color: var(--ink);
  cursor: pointer;
}
.ceremony__replay[hidden] { display: none; }

.ceremony__caption { max-width: 460px; margin-top: 32px; font-size: 15px; color: var(--ink-soft); }
.ceremony__caption b { color: var(--ink); }

/* ═══════════════════════════════════════════════════════════════════
   §4 — WHAT LAMMA HOLDS (the blocks)
   ═══════════════════════════════════════════════════════════════════ */
#blocks { --accent: var(--brand); }  /* the same bronze as the hero's merged card rows */
.blocks__list {
  max-width: 540px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.block {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  background: var(--card);
  border-radius: var(--r-block);
  padding: 18px 22px;
  border: 1px solid color-mix(in srgb, #fff 90%, transparent);
  box-shadow: var(--shadow-contact);
  cursor: pointer;
  transition: box-shadow var(--t-quick) var(--ease), transform var(--t-quick) var(--ease);
}
.block:hover { box-shadow: var(--shadow-contact), var(--shadow-soft); transform: translateY(-1px); }
.block__main { display: flex; align-items: center; gap: 14px; }
.block__icon {
  width: 36px; height: 36px;
  border-radius: var(--r-cell);
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  color: var(--accent);
  display: grid; place-items: center;
  flex-shrink: 0;
}
.block__icon svg { width: 18px; height: 18px; }
.block__label { font-weight: 600; font-size: 15px; color: var(--ink); }
.block__summary { font-size: 13px; color: var(--ink-soft); margin-top: 1px; }
.block__chev { width: 16px; height: 16px; color: var(--ink-faint); transition: transform var(--t-normal) var(--ease); flex-shrink: 0; }
.block[data-open] .block__chev { transform: rotate(90deg); }
.block__detail {
  max-height: 0;
  overflow: hidden;
  transition: max-height var(--t-normal) var(--ease),
              margin-top var(--t-normal) var(--ease),
              padding-top var(--t-normal) var(--ease);
  border-top: 1px solid transparent;
  font-size: 13.5px;
  color: var(--ink-soft);
  line-height: 1.6;
}
.block[data-open] .block__detail { max-height: 160px; margin-top: 12px; padding-top: 12px; border-top-color: var(--hairline); }
.block__content { width: 100%; }

.blocks__more {
  display: block;
  margin: 16px auto 0;
  font-size: 14px;
  color: var(--accent);
  background: none;
  border: none;
  cursor: pointer;
  font-weight: 600;
  transition: color var(--t-quick) var(--ease);
}
.blocks__more:hover { color: var(--brand); }
.blocks__more .count { color: var(--ink-faint); font-weight: 500; }

/* ═══════════════════════════════════════════════════════════════════
   §5 — WILL IT ACTUALLY HAPPEN? (the live outlook)
   ═══════════════════════════════════════════════════════════════════ */
.outlook {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  max-width: 900px;
  margin: 0 auto;
  align-items: center;
}
@media (max-width: 760px) { .outlook { grid-template-columns: 1fr; } }

.outlook__controls {
  background: var(--card);
  border-radius: var(--r-card);
  padding: 28px;
  box-shadow: var(--shadow-contact), var(--shadow-soft);
}
.outlook__control + .outlook__control { margin-top: 22px; }
.outlook__control-label {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 8px;
}
.outlook__control-value { color: var(--brand); font-size: 13px; }

/* Sliders */
.outlook input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 4px;
  background: var(--track);
  border-radius: 2px;
  outline: none;
}
.outlook input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--brand);
  cursor: pointer;
  box-shadow: 0 2px 6px color-mix(in srgb, var(--brand) 40%, transparent);
  border: 2px solid var(--card);
}
.outlook input[type="range"]::-moz-range-thumb {
  width: 18px; height: 18px;
  border-radius: 50%;
  background: var(--brand);
  cursor: pointer;
  border: 2px solid var(--card);
}

/* Toggle (for date set) */
.outlook__toggle {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  font-size: 14px;
}
.outlook__toggle input { display: none; }
.outlook__toggle-track {
  width: 40px; height: 22px;
  background: var(--track);
  border-radius: var(--r-pill);
  position: relative;
  transition: background var(--t-quick) var(--ease);
}
.outlook__toggle-track::after {
  content: '';
  position: absolute;
  top: 2px; inset-inline-start: 2px;
  width: 18px; height: 18px;
  background: var(--card);
  border-radius: 50%;
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
  transition: transform var(--t-quick) var(--ease);
}
.outlook__toggle input:checked + .outlook__toggle-track { background: var(--brand); }
.outlook__toggle input:checked + .outlook__toggle-track::after { transform: translateX(18px); }
:root[dir="rtl"] .outlook__toggle input:checked + .outlook__toggle-track::after { transform: translateX(-18px); }

/* The verdict */
.outlook__verdict {
  text-align: center;
  padding: 12px;
}
.outlook__status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 3vw, 1.9rem);
  font-weight: 600;
  margin-bottom: 16px;
}
.outlook__status-dot { width: 12px; height: 12px; border-radius: 50%; }
.outlook__status[data-status="on-track"] { color: var(--ok); }
.outlook__status[data-status="on-track"] .outlook__status-dot { background: var(--ok); }
.outlook__status[data-status="attention"] { color: var(--attention); }
.outlook__status[data-status="attention"] .outlook__status-dot { background: var(--attention); }
.outlook__status[data-status="risk"] { color: var(--risk); }
.outlook__status[data-status="risk"] .outlook__status-dot { background: var(--risk); }
.outlook__status[data-status="neutral"] { color: var(--ink-soft); }
.outlook__status[data-status="neutral"] .outlook__status-dot { background: var(--ink-faint); }

.outlook__sentence {
  font-size: clamp(1rem, 1.5vw, 1.15rem);
  line-height: 1.5;
  color: var(--ink);
  max-width: 340px;
  margin: 0 auto 18px;
  transition: opacity var(--t-normal) var(--ease);
}
.outlook__action {
  font-size: 14px;
  color: var(--brand);
  font-weight: 600;
  display: block;
  transition: opacity var(--t-normal) var(--ease);
}
.outlook__footnote { max-width: 760px; margin: 36px auto 0; text-align: center; font-size: 14px; color: var(--ink-faint); font-style: italic; }

/* ═══════════════════════════════════════════════════════════════════
   §6 — FOR EVERY KIND (template gallery)
   ═══════════════════════════════════════════════════════════════════ */
.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 24px;
  max-width: var(--maxw);
  margin: 0 auto;
}
.gallery__item {
  background: var(--card);
  border-radius: var(--r-card);
  overflow: hidden;
  box-shadow: var(--shadow-contact), var(--shadow-soft);
  cursor: pointer;
  transition: transform var(--t-normal) var(--ease), box-shadow var(--t-normal) var(--ease);
  text-align: start;
}
.gallery__item:hover { transform: translateY(-4px); box-shadow: var(--shadow-contact), 0 20px 50px color-mix(in srgb, var(--accent) 16%, transparent); }
/* Which kind is staging the ceremony: a ring in the template's own semantic
   colour plus a check on the wash — legible without colour vision, and
   never a second house accent (the colour is the template's meaning, not
   decoration). A shadow ring, not a border, so nothing shifts under it. */
.gallery__item.is-selected {
  box-shadow:
    var(--shadow-contact),
    0 0 0 2px var(--accent),
    0 0 0 7px color-mix(in srgb, var(--accent) 14%, transparent);
}
.gallery__item.is-selected .gallery__wash::after {
  content: '✓';
  position: absolute;
  top: 10px;
  inset-inline-start: 10px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--accent);
  color: var(--on-wash, #fff);
  font-size: 15px;
  font-weight: 700;
}
.gallery__wash {
  height: 140px;
  background: linear-gradient(135deg, var(--accent-deep, var(--accent)), var(--accent-light, var(--accent)));
  position: relative;
  display: grid;
  place-items: center;
  color: var(--on-wash, #fff);
}
.gallery__wash svg { width: 40px; height: 40px; opacity: 0.9; }
.gallery__wash .gallery__template-mark { position: absolute; top: 12px; inset-inline-end: 12px; opacity: 0.5; }
.gallery__body { padding: 18px 20px; }
.gallery__name { font-family: var(--font-display); font-size: 1.15rem; font-weight: 600; margin-bottom: 4px; }
.gallery__meaning { font-size: 13px; color: var(--ink-soft); font-style: italic; }
.gallery__swatch { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-inline-end: 7px; vertical-align: middle; background: var(--accent); }

/* ═══════════════════════════════════════════════════════════════════
   §7 — TWO LANGUAGES, ONE GATHERING (bilingual flip)
   ═══════════════════════════════════════════════════════════════════ */
.bilingual { text-align: center; }
.bilingual__card-wrap {
  perspective: 1000px;
  width: min(380px, 100%);
  margin: 40px auto;
  position: relative;
}
.bilingual__card {
  background: var(--card);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-contact), var(--shadow-soft);
  padding: 40px 32px;
  position: relative;
  transition: transform 600ms var(--ease-settle);
  --accent: #9E4B2B;  /* earth cognac — iftar gold accent */
}
.bilingual__card[flipped] { transform: rotateY(0deg); }
.bilingual__corners { position: absolute; inset: 14px; pointer-events: none; border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent); border-radius: calc(var(--r-card) - 14px); }
.bilingual__corners::after { content: ''; position: absolute; inset: 5px; border: 1px solid color-mix(in srgb, var(--accent) 20%, transparent); border-radius: calc(var(--r-card) - 19px); }
.bilingual__eyebrow { color: var(--accent); margin-bottom: 12px; }
.bilingual__names { font-family: var(--font-display); font-size: 1.6rem; margin-bottom: 14px; line-height: 1.2; }
:lang(ar) .bilingual__names { font-family: var(--font-display-ar); }
.bilingual__line { font-size: 14px; color: var(--ink-soft); line-height: 1.7; }
.bilingual__line b { color: var(--ink); }
.bilingual__flip-btn {
  margin-top: 28px;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 600;
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 25%, transparent);
  border-radius: var(--r-pill);
  padding: 10px 22px;
  cursor: pointer;
  transition: background var(--t-quick) var(--ease);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.bilingual__flip-btn:hover { background: color-mix(in srgb, var(--accent) 20%, transparent); }
.bilingual__chips { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 36px; max-width: 600px; margin-inline: auto; }
.bilingual__chips .pill { font-size: 12.5px; --accent: var(--brand); }

/* ═══════════════════════════════════════════════════════════════════
   §8 — KEEPS THE PEOPLE IN IT (belonging)
   ═══════════════════════════════════════════════════════════════════ */
.belonging { text-align: center; }
.belonging__panel {
  max-width: 520px;
  margin: 40px auto 0;
  background: var(--card);
  border-radius: var(--r-card);
  padding: 36px 32px;
  box-shadow: var(--shadow-contact), var(--shadow-soft);
  text-align: start;
}
.belonging__row { display: flex; align-items: center; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--hairline); }
.belonging__row:last-child { border-bottom: none; }
.belonging__row-num { font-family: var(--font-display); font-size: 2rem; font-weight: 600; color: var(--brand); min-width: 60px; }
:lang(ar) .belonging__row-num,
:lang(ur) .belonging__row-num,
:lang(fa) .belonging__row-num { font-family: var(--font-display-ar); }
.belonging__row-text { font-size: 15px; color: var(--ink); line-height: 1.5; }
.belonging__row-text small { display: block; color: var(--ink-soft); font-size: 13px; margin-top: 2px; }
.belonging__whisper {
  background: color-mix(in srgb, var(--brand) 8%, transparent);
  border-radius: var(--r-block);
  padding: 16px 18px;
  margin-top: 18px;
  font-size: 14px;
  color: var(--ink-soft);
  font-style: italic;
  border-inline-start: 3px solid var(--brand);
}
.belonging__whisper em { color: var(--brand); font-style: normal; font-weight: 600; }
.belonging__disclaimer { margin-top: 24px; font-size: 13px; color: var(--ink-faint); }

/* ═══════════════════════════════════════════════════════════════════
   §9 — THE EVENT PASS (pricing)
   ═══════════════════════════════════════════════════════════════════ */
.pricing { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; max-width: 980px; margin: 0 auto; align-items: stretch; }
@media (max-width: 760px) { .pricing { grid-template-columns: 1fr; } }
.tier {
  background: var(--card);
  border-radius: var(--r-card);
  padding: 32px 28px;
  box-shadow: var(--shadow-contact), var(--shadow-soft);
  display: flex;
  flex-direction: column;
  position: relative;
}
.tier--featured {
  transform: translateY(-12px);
  box-shadow: var(--shadow-contact), 0 24px 60px color-mix(in srgb, var(--brand) 20%, transparent);
  border: 1px solid color-mix(in srgb, var(--brand) 30%, transparent);
}
@media (max-width: 760px) { .tier--featured { transform: none; } }
.tier__badge {
  position: absolute;
  top: -12px; inset-inline: 0;
  margin: 0 auto;
  width: fit-content;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  background: var(--brand);
  color: var(--on-brand);
  padding: 5px 14px;
  border-radius: var(--r-pill);
}
.tier__name { font-family: var(--font-display); font-size: 1.4rem; font-weight: 600; }
.tier__size { font-size: 13px; color: var(--ink-faint); margin-bottom: 16px; }
.tier__price { font-family: var(--font-display); font-size: 2.4rem; font-weight: 600; margin-bottom: 4px; }
.tier__price small { font-size: 0.9rem; font-weight: 400; color: var(--ink-soft); }
.tier__price-note { font-size: 13px; color: var(--ink-soft); margin-bottom: 24px; }
.tier__features { list-style: none; font-size: 14px; color: var(--ink-soft); line-height: 1.7; flex: 1; }
.tier__features li { padding-inline-start: 22px; position: relative; margin-bottom: 8px; }
.tier__features li::before { content: '✓'; position: absolute; inset-inline-start: 0; color: var(--brand); font-weight: 700; }
.tier__cta { margin-top: 24px; width: 100%; }
.tier__contrast { font-size: 13px; color: var(--ink-soft); margin-top: 12px; line-height: 1.5; font-style: italic; }
.tier__contrast b { color: var(--ink); font-style: normal; }

/* D4, under the prices. Centred and quiet: a promise that has to shout is not
   one, and this reads as a fact about the business rather than a boast. */
.pricing__promise {
  max-width: 54ch;
  margin: 28px auto 0;
  text-align: center;
  font-size: 14px;
  line-height: 1.65;
  color: var(--ink-soft);
}

/* ═══════════════════════════════════════════════════════════════════
   §10 — THE MASTHEAD (footer)
   ═══════════════════════════════════════════════════════════════════ */
.masthead {
  border-top: 1px solid var(--hairline);
  margin-top: var(--pad-section);
  padding: 64px var(--pad-screen) 48px;
  text-align: center;
}
.masthead__ornament { color: var(--brand); opacity: 0.4; margin-bottom: 24px; }
.masthead__ornament svg { width: 36px; height: 36px; }
.masthead__name { font-family: var(--font-display); font-size: 1.6rem; font-weight: 600; margin-bottom: 10px; display: flex; align-items: center; justify-content: center; gap: 12px; }
.masthead__mark { width: 30px; height: 30px; color: var(--brand); }
.masthead__etymology { font-family: var(--font-display); font-style: italic; font-size: 15px; color: var(--ink-soft); max-width: 420px; margin: 0 auto 32px; }
.masthead__links { display: flex; flex-wrap: wrap; gap: 8px 24px; justify-content: center; margin-bottom: 32px; }
.masthead__links a { color: var(--ink-soft); text-decoration: none; font-size: 14px; transition: color var(--t-quick) var(--ease); }
.masthead__links a:hover { color: var(--brand); }
.masthead__copy { font-size: 12px; color: var(--ink-faint); }

/* ── CTA banner before footer ──────────────────────────────────────── */
.cta-banner {
  text-align: center;
  padding: var(--pad-section) var(--pad-screen);
}
.cta-banner .display { font-size: clamp(1.8rem, 4vw, 2.6rem); margin-bottom: 16px; }
.cta-banner .lead { margin-inline: auto; margin-bottom: 32px; }
.cta-banner__btns { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }

/* ── Mobile adjustments ───────────────────────────────────────────── */
@media (max-width: 600px) {
  .topbar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px 10px;
    padding-block: 10px;
  }
  .topbar__brand { grid-column: 1; grid-row: 1; }
  .topbar__controls { grid-column: 2; grid-row: 1; gap: 6px; }
  .topbar__nav, .topbar .nav-links {
    grid-column: 1 / -1;
    grid-row: 2;
    min-width: 0;
    width: 100%;
    overflow-x: auto;
    white-space: nowrap;
    margin: 0 !important;
    gap: 16px !important;
    scrollbar-width: none;
  }
  .topbar__nav::-webkit-scrollbar, .topbar .nav-links::-webkit-scrollbar { display: none; }
  .topbar__nav a, .topbar .nav-links a { flex-shrink: 0; }
  /* The way into the app is never scrolled out of reach: it holds the end
     of the row while the other links scroll beneath it (either direction). */
  .topbar__nav .btn, .topbar .nav-links .btn {
    position: sticky;
    inset-inline-end: 0;
    z-index: 1;
    box-shadow: 0 0 0 6px var(--ground);
  }
  .hero { padding-top: 150px; }
  /* The flap rotates in 3D past the narrow viewport; it must not create a
     sideways document scroll in RTL while the card is opening. */
  #ceremony { overflow-x: clip; }
  .collapse { height: 320px; }
  .collapse__card { width: 160px; padding: 12px 14px; }
  .collapse__card--partiful { top: 10px; left: -10px; --to-y: calc(50cqh - 50% - 10px); --to-x: calc(50cqw - 50% + 10px); }
  .collapse__card--signup { top: 30px; right: -10px; --to-x: calc(50% - 50cqw - 10px); }
  .collapse__card--whatsapp { bottom: 50px; left: 0; --to-x: calc(50cqw - 50%); --to-y: calc(50% + 50px - 50cqh); }
  .collapse__card--splitwise { bottom: 10px; right: 0; --to-x: calc(50% - 50cqw); --to-y: calc(50% + 10px - 50cqh); }
  /* `scale`, not `transform`: motion.js writes the stage's transform inline
     while a pointer moves, which used to snap this back to full size. */
  .envelope-stage { scale: 0.85; }
}