/* Xenva.io — built from the Harbour design system (kit v1, 16 October 2026).
   Sections 1–3 are copied from design-system/components/[Name]/preview.html.
   Section 4 is page layout, using tokens only. */

/* ── 1. Tokens ─────────────────────────────────────────────────────────── */
:root {
  --cloud: #f4f7fc; --white: #ffffff; --navy: #0e2447; --teal: #0d737b;
  --slate: #5b6b7f; --mint: #9de6ca; --mint-pale: #cbf0e6; --line: #d6dee8;
  --on-teal: #ffffff; --on-navy: #f4f7fc; --danger: #b42318; --warning: #8a5a00;
  --focus: #0e2447; --focus-inverse: #f4f7fc; --teal-deep: #0a5a61;
  --disabled-fill: #e8edf4; --overlay: rgba(14, 36, 71, .55); --on-navy-muted: #a7b6cb;
  --space-2: 8px; --space-4: 16px; --space-6: 24px; --space-12: 48px; --space-20: 80px;
  --radius-sm: 6px; --radius-md: 12px; --radius-lg: 24px;
  --motion-fast: 120ms; --motion-base: 180ms; --motion-slow: 320ms; --motion-slower: 480ms;
  --motion-stagger: 60ms;
  --ease-standard: cubic-bezier(.2, 0, 0, 1); --ease-exit: cubic-bezier(.4, 0, 1, 1);
  --measure-prose: 30rem; --z-sticky-bar: 80; --z-header: 100; --z-skip: 200;
  --font-heading: "Plus Jakarta Sans", "Helvetica Neue", Arial, sans-serif;
  --font-body: "Source Sans 3", "Helvetica Neue", Arial, sans-serif;
}

/* ── 2. Foundations ────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-padding-top: 80px; }
body { margin: 0; background: var(--cloud); color: var(--navy);
  font: 400 16px/26px var(--font-body); -webkit-text-size-adjust: 100%; }
p, h1, h2, h3, ul, ol, figure { margin: 0; }
a { color: var(--teal); text-underline-offset: 3px; }
a:hover { color: var(--teal-deep); }

.t-display   { font: 700 48px/56px var(--font-heading); letter-spacing: -.01em; margin: 0; text-wrap: balance; }
.t-heading-1 { font: 700 34px/42px var(--font-heading); margin: 0; text-wrap: balance; }
.t-heading-2 { font: 600 26px/34px var(--font-heading); margin: 0; text-wrap: balance; }
.t-heading-3 { font: 600 20px/28px var(--font-heading); margin: 0; }
.t-lead  { font: 400 19px/30px var(--font-body); margin: 0; }
.t-body  { font: 400 16px/26px var(--font-body); margin: 0; }
.t-small { font: 400 14px/22px var(--font-body); margin: 0; }
.t-label { font: 600 12px/16px var(--font-body); letter-spacing: .12em; text-transform: uppercase; margin: 0; }
@media (max-width: 767px) {
  .t-display   { font-size: 36px; line-height: 44px; }
  .t-heading-1 { font-size: 28px; line-height: 36px; }
}
.t-slate { color: var(--slate); }
.t-teal  { color: var(--teal); }
.t-num   { font-variant-numeric: tabular-nums; }
.t-pretty { text-wrap: pretty; }

.x-page { max-width: 1100px; margin: 0 auto; padding: 0 var(--space-4); }
@media (min-width: 768px) { .x-page { padding: 0 var(--space-6); } }

.x-icon { width: 20px; height: 20px; flex: none; display: block; fill: none; stroke: currentColor;
  stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.x-icon--sm { width: 16px; height: 16px; }
.x-icon--lg { width: 28px; height: 28px; }

.x-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap; border: 0; }

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 3px solid var(--focus); outline-offset: 2px; border-radius: var(--radius-sm);
}

.x-skip { position: absolute; left: var(--space-4); top: -100px; z-index: var(--z-skip);
  padding: var(--space-2) var(--space-4); background: var(--white); color: var(--navy);
  border: 1.5px solid var(--navy); border-radius: var(--radius-md); }
.x-skip:focus-visible { top: var(--space-2); }

/* ── 3. Components ─────────────────────────────────────────────────────── */
/* Button */
.x-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  min-height: 48px; padding: var(--space-2) var(--space-6); border: 1.5px solid transparent;
  border-radius: var(--radius-md); background: transparent; font: 400 16px/26px var(--font-body);
  text-align: center; text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: background-color var(--motion-fast) var(--ease-standard),
    border-color var(--motion-fast) var(--ease-standard), color var(--motion-fast) var(--ease-standard),
    transform var(--motion-base) var(--ease-standard); }
.x-btn--sm { min-height: 44px; padding: var(--space-2) var(--space-4); font: 400 14px/22px var(--font-body); }
.x-btn--primary { background: var(--teal); color: var(--on-teal); }
.x-btn--primary:hover { background: var(--teal-deep); color: var(--on-teal); }
.x-btn--primary:active { background: var(--teal-deep); transform: translateY(1px); }
.x-btn--primary:focus-visible { outline: 3px solid var(--focus-inverse); outline-offset: -5px;
  box-shadow: 0 0 0 3px var(--focus); }
.x-btn--secondary { border-color: var(--navy); color: var(--navy); }
.x-btn--secondary:hover { background: var(--mint-pale); color: var(--navy); }
.x-btn--secondary:active { background: var(--mint-pale); border-width: 2px; transform: translateY(1px); }
.x-btn--on-navy { border-color: var(--on-navy); color: var(--on-navy); }
.x-btn--on-navy:hover { background: var(--on-navy); color: var(--navy); }
.x-btn--on-navy:focus-visible { outline-color: var(--focus-inverse); }

/* Header */
.x-header { background: var(--cloud); border-bottom: 1px solid var(--line); color: var(--navy); }
.x-header--sticky { position: sticky; top: 0; z-index: var(--z-header); }
.x-header__bar { display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-4); min-height: 64px; }
@media (min-width: 768px) { .x-header__bar { min-height: 72px; } }
.x-header__logo { display: inline-flex; align-items: center; min-height: 44px;
  border-radius: var(--radius-sm); color: var(--navy); }
.x-header__logo svg { display: block; height: 32px; width: auto; }
@media (min-width: 768px) { .x-header__logo svg { height: 36px; } }

/* Card */
.x-card { position: relative; padding: var(--space-4); border: 1px solid var(--line);
  border-radius: var(--radius-md); background: var(--white); color: var(--navy); }
@media (min-width: 768px) { .x-card { padding: var(--space-6); } }
.x-card--flat  { background: var(--cloud); }
.x-card--tint  { background: var(--mint-pale); border-color: transparent; }
.x-card--panel { border-radius: var(--radius-lg); }

/* StatusBadge */
.x-badge { display: inline-flex; align-items: center; gap: var(--space-2); padding: 4px var(--space-2);
  border: 1.5px solid transparent; border-radius: var(--radius-sm); font: 600 12px/16px var(--font-body);
  letter-spacing: .12em; text-transform: uppercase; white-space: nowrap; }
.x-badge--confirmed { background: var(--mint-pale); color: var(--navy); }
.x-badge--reward    { background: var(--mint); color: var(--navy); }
/* Sentence-case chips (draft 4): the brand's sentence-case rule beats the caps label style. */
.x-badge--sentence { text-transform: none; letter-spacing: 0; font: 600 14px/18px var(--font-body); }
.x-badge--quiet { padding: 2px var(--space-2); background: transparent; border: 1px solid var(--line); color: var(--slate);
  text-transform: none; letter-spacing: 0; font: 400 14px/18px var(--font-body); }

/* LoyaltyCard */
.x-loyalty__card { aspect-ratio: 1.586; display: flex; flex-direction: column; gap: var(--space-2);
  padding: var(--space-4); border-radius: var(--radius-md); background: var(--navy); color: var(--on-navy); }
.x-loyalty__top { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-2); }
.x-loyalty__eyebrow { color: var(--mint); margin: 0; }
.x-loyalty__progress { display: flex; align-items: baseline; gap: var(--space-2); margin: 0; }
.x-loyalty__count { color: var(--on-navy); }
.x-loyalty__of { color: var(--on-navy-muted); }
.x-loyalty__rule { margin: auto 0 0; color: var(--on-navy-muted); }
.x-loyalty__stamps { list-style: none; margin: 0; padding: 0; display: grid;
  grid-template-columns: repeat(5, 1fr); gap: var(--space-2); }
.x-loyalty__cell { aspect-ratio: 1; display: grid; place-items: center; border-radius: var(--radius-sm);
  border: 1.5px solid var(--on-navy-muted); }
.x-loyalty__cell.is-filled { background: var(--mint); border-color: var(--mint); }
.x-loyalty__cell--reward { background: var(--mint); border-color: var(--mint); color: var(--navy); }

/* PhoneFrame (draft 4). Every frame is drawn at real device proportions, 9 : 19.5,
   with a fixed bezel, notch and side buttons. --pw sets the device width; --crop-h
   crops the device at the bottom without changing its shape. Static frames only:
   aria-hidden, nothing focusable inside, so no frame ever draws a focus ring. */
.x-phone { margin: 0; display: grid; justify-items: center; align-content: start; row-gap: var(--space-4); }
.x-phone__crop { width: calc(var(--pw, 264px) + 12px); height: var(--crop-h, calc(var(--pw, 264px) * 19.5 / 9));
  padding-inline: 6px; overflow: hidden; }
.x-phone__frame { position: relative; width: var(--pw, 264px); aspect-ratio: 9 / 19.5; padding: 6px;
  border: 3px solid var(--navy); border-radius: 40px; background: var(--white); }
.x-phone__frame::before, .x-phone__frame::after { content: ""; position: absolute; top: 96px; width: 3px;
  height: 40px; border-radius: 2px; background: var(--navy); }
.x-phone__frame::before { left: -6px; }
.x-phone__frame::after  { right: -6px; height: 64px; }
.x-phone__speaker { position: absolute; z-index: 1; top: 14px; left: 50%; transform: translateX(-50%);
  width: 64px; height: 18px; border-radius: 9px; background: var(--navy); }
.x-phone__screen { height: 100%; overflow: hidden; border-radius: 31px; background: var(--cloud); padding-top: 42px; }
.x-phone--live .x-phone__frame:has(:focus-visible) { outline: 3px solid var(--focus); outline-offset: 4px; }

.x-phonestack { display: grid; gap: var(--space-6); justify-items: center; }
@media (min-width: 768px) {
  .x-phonestack { display: flex; justify-content: center; gap: 0; }
  .x-phonestack > .x-phone + .x-phone { margin-inline-start: calc(var(--space-20) * -1); }
  .x-phonestack > .x-phone:last-child { margin-top: var(--space-12); }
}

/* Footer */
.x-footer { background: var(--navy); color: var(--on-navy); margin: 0; }
.x-footer__logo { display: inline-flex; align-items: center; gap: var(--space-2); min-height: 44px;
  color: var(--on-navy); text-decoration: none; border-radius: var(--radius-sm); }
.x-footer__logo:hover { color: var(--on-navy); }
.x-footer__logo svg { width: 36px; height: 36px; display: block; }
.x-footer__word { font: 700 26px/34px var(--font-heading); }
.x-footer__list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0 var(--space-6); }
.x-footer__list a { display: inline-flex; align-items: center; justify-content: center; min-height: 44px;
  min-width: 44px; color: var(--on-navy);
  text-decoration: none; font: 400 14px/22px var(--font-body); }
.x-footer__list a:hover { color: var(--on-navy); text-decoration: underline; text-decoration-thickness: 2px;
  text-underline-offset: 4px; text-decoration-color: var(--mint); }
.x-footer :focus-visible { outline: 3px solid var(--focus-inverse); outline-offset: 2px; }

/* ── 4. Page layout ────────────────────────────────────────────────────── */
.lp-band { padding-block: var(--space-12); }
@media (min-width: 768px) { .lp-band { padding-block: var(--space-20); } }
.lp-band--white { background: var(--white); border-top: 1px solid var(--line); }
.lp-band--tint  { background: var(--mint-pale); }
.lp-band--navy  { background: var(--navy); color: var(--on-navy); }
.lp-band__head { display: grid; gap: var(--space-4); max-width: 40rem; margin-bottom: var(--space-6); }
@media (min-width: 768px) { .lp-band__head { margin-bottom: var(--space-12); } }

/* Hero */
.lp-hero { position: relative; overflow: hidden; padding-block: var(--space-6) var(--space-12); }
.lp-hero__grid { position: relative; display: grid; gap: var(--space-12); }
.lp-hero__copy { position: relative; z-index: 1; display: grid; gap: var(--space-6); align-content: center; }
.lp-hero__h1-line { display: block; }
/* Studios and Cafés jump links (draft 6): one row, outlined, under the lead. */
.lp-hero__jump { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.lp-hero__jump .x-btn { padding-inline: var(--space-4) 12px; }
.lp-hero__lead { max-width: var(--measure-prose); text-wrap: pretty; }
.lp-hero__cta { justify-self: start; }
.lp-hero__visual { position: relative; }
/* Full X (deviation 2). Four arms, flat mint-pale, no container. Centred on the
   pair's combined bounding box: across, the middle of the pair; down, 50% of the pair,
   whose height is the taller of the studio crop and the café's drop plus crop (draft 7).
   Draft 6: sized so no part sits behind hero text. The arms reach 38% of the SVG's
   width either side of centre, so --xs is set to put the left arm ends 8px short of
   the copy column (half the pair + the 48px grid gap − 8px, ÷ .38 = 800px). The arm
   ends still run off the hero's top and bottom edges. Shown from 1024px only. */
.lp-hero__x { display: none; position: absolute; z-index: 0; left: 50%; top: 50%;
  width: var(--xs); height: auto; aspect-ratio: 1; transform: translate(-50%, -50%); max-width: none; pointer-events: none; }

/* Hero phone pair, staggered: the café phone sits --drop lower. No overlap.
   Studio crop: --crop-a. Café crop (draft 7): sized from its content, so the owner line
   always shows in full whatever the font metrics. The frame drops its fixed aspect ratio
   and grows with the screen; the screen ends 56px below the owner line and the frame's
   last 48px (its rounded bottom and the screen's rounded corners) sit below the crop
   edge, hidden by the crop's overflow. */
.lp-pair { --pw: min(152px, calc((100vw - 80px) / 2)); --drop: 48px;
  --crop-a: calc(var(--pw) * 19.5 / 9);
  position: relative; display: grid; grid-template-columns: auto auto; align-items: start;
  justify-content: space-between; }
.lp-pair > .x-phone { position: relative; z-index: 1; }
.lp-pair__studio { --crop-h: var(--crop-a); }
.lp-pair__cafe { margin-top: var(--drop); }
.lp-pair__cafe .x-phone__crop { height: auto; }
.lp-pair__cafe .x-phone__frame { aspect-ratio: auto; margin-bottom: -48px; }
.lp-pair__cafe .x-phone__screen { height: auto; padding-bottom: 56px; }
@media (max-width: 767px) { .lp-sms__early { display: none; } }
/* Deploy prep: below 768px the studio phone shows one message and fitted inside its full
   device, so its rounded bottom showed beside the café phone's flat crop. Crop it from
   its content the same way, so both hero phones end with the same flat edge. */
@media (max-width: 767px) {
  /* Wider phones on real handsets (393–430px): fill the column with a fixed 16px gap
     instead of capping at 152px and pushing the spare width into the gap, which left the
     studio bubble wrapping one word per line and the phones tall and thin. */
  .lp-pair { --pw: min(176px, calc((100vw - 76px) / 2)); justify-content: center; column-gap: var(--space-4); }
  .lp-pair .lp-bubble { max-width: 94%; }
  .lp-pair__studio .x-phone__crop { height: auto; }
  .lp-pair__studio .x-phone__frame { aspect-ratio: auto; margin-bottom: -48px; }
  .lp-pair__studio .x-phone__screen { height: auto; padding-bottom: 56px; }
}
@media (min-width: 768px) {
  .lp-pair { --pw: 240px; --crop-a: 408px;
    width: fit-content; column-gap: var(--space-6); justify-content: start; margin-inline-start: auto; }
}
@media (min-width: 1024px) {
  .lp-hero { padding-block: var(--space-20); }
  .lp-hero__grid { grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-12); align-items: center; }
  .lp-pair { --xs: calc((var(--pw) + 24px + var(--space-12) - var(--space-2)) / .38); }
  .lp-hero__x { display: block; }
}

/* Phone screens */
.lp-screen { display: grid; gap: var(--space-2); padding: 0 var(--space-2); align-content: start; }
@media (min-width: 768px) { .lp-screen { padding: 0 12px; } }
.lp-sms__who { display: grid; justify-items: center; gap: 4px; padding-bottom: 12px;
  border-bottom: 1px solid var(--line); margin: 0 calc(var(--space-2) * -1) var(--space-2); }
@media (min-width: 768px) { .lp-sms__who { margin-inline: -12px; } }
.lp-sms__avatar { width: 40px; height: 40px; border-radius: 50%; background: var(--mint-pale);
  display: grid; place-items: center; color: var(--navy); }
.lp-sms__when { text-align: center; margin-top: 4px; font: 400 12px/16px var(--font-body); color: var(--slate); }
/* Owner line (draft 6): what the owner gets, under the last element on each hero phone. */
.lp-owner { margin: -4px 0 0 4px; font: 400 12px/16px var(--font-body); color: var(--slate); text-wrap: pretty; }
.lp-stampstrip + .lp-owner { margin-top: 0; }

/* Message bubbles (hero studio screen and trust band). Incoming: mint-pale, navy text,
   tail bottom-left. Outgoing: navy, on-navy text, tail bottom-right. The tail is two
   pseudo-elements; the second is painted in --bubble-ground to carve the curve. */
.lp-thread { --bubble-ground: var(--cloud); }
.lp-bubble { position: relative; justify-self: start; max-width: 85%; padding: 8px 14px;
  border-radius: 18px; font: 400 14px/20px var(--font-body); background: var(--mint-pale); color: var(--navy);
  text-wrap: pretty; }
.lp-bubble::before, .lp-bubble::after { content: ""; position: absolute; bottom: 0; height: 16px; }
.lp-bubble--in::before { left: -6px; width: 16px; background: var(--mint-pale); border-bottom-right-radius: 14px 12px; }
.lp-bubble--in::after  { left: -14px; width: 14px; background: var(--bubble-ground); border-bottom-right-radius: 8px; }
.lp-bubble--out { justify-self: end; background: var(--navy); color: var(--on-navy); }
.lp-bubble--out::before { right: -6px; width: 16px; background: var(--navy); border-bottom-left-radius: 14px 12px; }
.lp-bubble--out::after  { right: -14px; width: 14px; background: var(--bubble-ground); border-bottom-left-radius: 8px; }
.lp-bubble a { color: var(--teal); text-decoration: underline; }
@media (max-width: 767px) {
  .lp-thread .lp-bubble { padding: 6px 10px; border-radius: 14px; font-size: 13px; line-height: 18px; }
  .lp-sms__who { padding-bottom: 8px; }
  .lp-sms__avatar { width: 32px; height: 32px; }
}
.lp-app__head { display: flex; justify-content: space-between; align-items: center; gap: var(--space-2); padding-bottom: 4px; }

/* Hero café screen: the usual order, then a compact stamp strip. The order action is
   the client app's navy in-app button, so it never reads as a teal page action. */
.lp-usual { display: grid; gap: 2px; padding: 12px; background: var(--white); border: 1px solid var(--line);
  border-radius: var(--radius-md); }
.lp-usual__title { font: 600 16px/22px var(--font-heading); }
.lp-usual__item { font: 400 14px/20px var(--font-body); color: var(--slate); }
.lp-appbtn { text-wrap: balance; text-align: center; display: flex; align-items: center; justify-content: center; min-height: 40px; margin-top: 10px;
  padding: 6px 12px; border-radius: var(--radius-md); background: var(--navy); color: var(--on-navy);
  font: 600 14px/18px var(--font-body); text-align: center; }
.lp-stampstrip { display: grid; gap: 8px; padding: 10px 12px; border-radius: var(--radius-md);
  background: var(--navy); color: var(--on-navy-muted); }
.lp-stampstrip__txt { font: 400 13px/18px var(--font-body); color: var(--on-navy); }
.lp-stampstrip__row { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 3px; }
.lp-stampstrip__row li { aspect-ratio: 1; display: grid; place-items: center; border-radius: 3px; border: 1.5px solid var(--on-navy-muted); }
.lp-stampstrip__row .is-filled, .lp-stampstrip__row .is-reward { background: var(--mint); border-color: var(--mint); }
.lp-stampstrip__row .is-reward { color: var(--navy); }
.lp-stampstrip__row .x-icon { width: 11px; height: 11px; }
@media (max-width: 767px) {
  .lp-usual { padding: 8px; }
  .lp-usual__title { font-size: 13px; line-height: 18px; }
  .lp-usual__item { font-size: 12px; line-height: 16px; }
  .lp-appbtn { min-height: 0; margin-top: 6px; padding: 6px 8px; font-size: 12px; line-height: 16px; }
  .lp-stampstrip { gap: 6px; padding: 8px; }
  .lp-stampstrip__txt { font-size: 12px; line-height: 16px; }
  .lp-stampstrip__row { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .lp-stampstrip__row .x-icon { width: 10px; height: 10px; }
}
.lp-row { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 4px var(--space-2); }
.lp-rows { list-style: none; padding: 0; display: grid; }
.lp-rows li { padding-block: 12px; border-top: 1px solid var(--line); }
.lp-rows li:first-child { border-top: 0; padding-top: 4px; }

/* Bands 3a and 3b: copy beside a screen; cafés mirrored */
.lp-split { display: grid; gap: var(--space-12); }
.lp-split__copy { display: grid; gap: var(--space-6); align-content: center; }
.lp-split__head { display: grid; gap: var(--space-4); max-width: 36rem; }
.lp-split__visual { display: flex; justify-content: center; }
.lp-split__visual .x-phone { --pw: 264px; --crop-h: 456px; }
@media (min-width: 1024px) {
  .lp-split { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--space-20); align-items: center; }
  .lp-split--rev { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
  .lp-split--rev .lp-split__visual { order: -1; }
}
.lp-list { list-style: none; padding: 0; display: grid; max-width: 36rem; }
.lp-list li { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: var(--space-4);
  align-items: start; padding-block: var(--space-4); border-top: 1px solid var(--line); }
.lp-list li:last-child { border-bottom: 1px solid var(--line); }
.lp-list .x-icon { color: var(--teal); }
.lp-band--tint .lp-list li { border-color: var(--white); }
.lp-band--white + .lp-band--tint { border-top: 0; }

/* Stepper (band 4, draft 4). Icons in 56px mint-pale circles; the number sits in the
   title. A 2px line-coloured rule runs behind the circles from the first centre to the
   last, never past it. Vertical below 1024px, horizontal and centred above. */
.lp-steps { list-style: none; padding: 0; display: grid; }
.lp-step { position: relative; display: grid; grid-template-columns: 56px minmax(0, 1fr);
  column-gap: var(--space-4); padding-bottom: var(--space-6); }
.lp-step:last-child { padding-bottom: 0; }
.lp-step:not(:last-child)::before { content: ""; position: absolute; left: 27px; top: 28px; bottom: -28px;
  width: 2px; background: var(--line); }
.lp-step__icon { position: relative; z-index: 1; width: 56px; height: 56px; display: grid; place-items: center;
  border-radius: 50%; background: var(--mint-pale); color: var(--navy); }
.lp-step__body { display: grid; gap: 4px; padding-top: 14px; }
.lp-step__title { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; }
.lp-step__num { font: 600 20px/28px var(--font-heading); color: var(--teal); }
.lp-step__tag { justify-self: start; margin-top: 4px; }
@media (min-width: 1024px) {
  .lp-steps { grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: var(--space-6); }
  .lp-step { grid-template-columns: none; justify-items: center; text-align: center; row-gap: var(--space-4); padding-bottom: 0; }
  .lp-step:not(:last-child)::before { left: 50%; top: 27px; bottom: auto; width: calc(100% + var(--space-6)); height: 2px; }
  .lp-step__body { padding-top: 0; gap: var(--space-2); justify-items: center; max-width: 15rem; }
  .lp-step__title { justify-content: center; }
  .lp-step__tag { justify-self: center; margin-top: 0; }
}

/* Trust band (draft 5): copy on the left, a short owner–Xenva thread on a white card
   on the right. Kept on the mint-pale panel (see CHANGES.md, point 9). */
.lp-band--trust { padding-top: 0; }
.lp-trust { display: grid; gap: var(--space-6); padding: var(--space-6) var(--space-4); border-radius: var(--radius-lg);
  background: var(--mint-pale); color: var(--navy); }
.lp-trust__copy { display: grid; gap: var(--space-4); align-content: center; max-width: 30rem; }
.lp-trust__rule { width: 100%; margin: var(--space-2) 0; border: 0; border-top: 1px solid var(--line); }
.lp-trust__card { display: grid; gap: var(--space-4); align-content: start; padding: var(--space-4);
  background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-md); }
.lp-trust__who { display: flex; align-items: center; gap: 12px; padding-bottom: 12px; border-bottom: 1px solid var(--line);
  font: 600 16px/22px var(--font-heading); }
.lp-trust__who img { width: 32px; height: 32px; display: block; }
.lp-thread--card { --bubble-ground: var(--white); display: grid; gap: 12px; padding-inline: 8px; }
.lp-thread--card .lp-bubble { font-size: 16px; line-height: 24px; padding: 10px 16px; }
@media (min-width: 768px) {
  .lp-trust { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-12); padding: var(--space-12); }
  .lp-trust__card { padding: var(--space-6); }
}

/* Book (band 5) */
.lp-book { display: grid; gap: var(--space-12); }
@media (min-width: 1024px) { .lp-book { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: var(--space-12); } }
.lp-book__copy { display: grid; gap: var(--space-6); align-content: start; }
.lp-book__copy .x-btn { justify-self: start; }
.lp-embed { min-height: 640px; display: grid; place-content: center; justify-items: center; gap: var(--space-2);
  padding: var(--space-6); text-align: center; border: 1.5px dashed var(--on-navy-muted);
  border-radius: var(--radius-md); color: var(--on-navy); }
.lp-embed code { font: 400 14px/22px var(--font-body); color: var(--on-navy-muted); }
/* Deploy prep: once Cal.com's inline scheduler loads, the dashed placeholder frame gives way
   to a white panel holding the light-theme scheduler. */
.lp-embed.is-loaded { display: block; padding: 0; border: 0; background: var(--white); overflow: hidden; }
.lp-embed.is-loaded > p { display: none; }

/* Footer layout: flush against band 5, no margin-top anywhere */
.lp-foot { display: grid; gap: var(--space-6); padding-block: var(--space-12);
  border-top: 1px solid var(--on-navy-muted); }
@media (min-width: 768px) { .lp-foot { grid-template-columns: 1fr auto; align-items: end; } }
.lp-foot__brand { display: grid; gap: var(--space-2); }
.lp-foot__place { color: var(--on-navy-muted); }

/* Motion. Guarded by .js on <html>, so without JavaScript nothing is hidden.
   Entrances: 12px, opacity and transform only, --motion-slow. */
.js [data-reveal] { opacity: 0; transform: translateY(12px);
  transition: opacity var(--motion-slow) var(--ease-standard), transform var(--motion-slow) var(--ease-standard); }
.js [data-reveal].is-in { opacity: 1; transform: none; }
.js .d1 { transition-delay: calc(var(--motion-stagger) * 1); }
.js .d2 { transition-delay: calc(var(--motion-stagger) * 2); }
.js .d3 { transition-delay: calc(var(--motion-stagger) * 3); }
.js .d8 { transition-delay: calc(var(--motion-stagger) * 8); }
.js .d12 { transition-delay: var(--motion-slower); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important;
    transition-duration: .001ms !important; transition-delay: 0s !important; }
  .js [data-reveal] { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }