/* ==========================================================================
   GuestNest — guestnest.io
   Brand system ported from mobile/src/theme/palette.js + typography.js.
   Teal is the one action colour and always takes ink labels, never white.
   Sand is the second voice. No pure white, no cool grey, anywhere.
   ========================================================================== */

/* ---------- 0. Fonts (self-hosted DM Sans) ------------------------------- */

@font-face {
  font-family: "DM Sans";
  src: url("assets/fonts/dm-sans-latin-400-normal.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "DM Sans";
  src: url("assets/fonts/dm-sans-latin-500-normal.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "DM Sans";
  src: url("assets/fonts/dm-sans-latin-700-normal.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* ---------- 1. Tokens ---------------------------------------------------- */

:root {
  /* Warm neutrals — the cream-to-ink spine */
  --n-100: #f9f4ed;
  --n-200: #eee7db;
  --n-300: #dcd3c4;
  --n-400: #c0b6a5;
  --n-500: #a19786;
  --n-600: #82796a;
  --n-700: #645c50;
  --n-800: #474238;
  --n-900: #2e2b25;

  /* Brand teal — the action colour */
  --teal-100: #eafaf8;
  --teal-200: #d3f2ef;
  --teal-300: #b0e8e2;
  --teal-400: #8adcd6;
  --teal-500: #66ccc6;
  --teal-600: #45aca6;
  --teal-700: #2c847f;
  --teal-800: #1f5f5b;
  --teal-900: #163e3b;

  /* Logo sand — the second voice */
  --sand-100: #fdf6ea;
  --sand-200: #f7ead4;
  --sand-300: #efdcba;
  --sand-400: #e5cb9d;
  --sand-500: #d8b87f;
  --sand-600: #b99760;
  --sand-700: #927347;
  --sand-800: #6a5233;
  --sand-900: #443421;

  /* Role bases */
  --ink: #212224;
  --cream: #f5ead8;
  --cream-surface: #f9f4ed;
  --ink-deep: #201e1d;      /* warm dark ground */
  --ink-surface: #2a2723;

  /* Snowy sky — sampled straight off the app's welcome hero
     (mobile/assets/heroes/lofoten-sky.png + lofoten-sky-far.png), the faded
     blue a guest sees while the app loads. 100-300 are the hazy band just
     above the snowline; 700-900 are the deeper sky overhead. */
  --sky-100: #eaf0f6;
  --sky-200: #dde6ef;
  --sky-300: #ced8e5;
  --sky-400: #bccadb;
  --sky-500: #a8bbcf;
  --sky-600: #8ca6c2;
  --sky-700: #6b8faa;
  --sky-800: #507aa0;
  --sky-900: #406b92;

  /* Page ground. The sky's hazy band, held at the same value the warm stone
     ground used to sit at (L 0.79), so every card, divider and shadow keeps the
     lift it was tuned for — only the hue moves. Cool ground, warm paper: cards
     stay on --cream-surface and now separate by temperature as well as value,
     and the logo's sand "Nest" reads harder against blue than it did on stone. */
  --sky-ground: #dfe7f0;

  /* Semantic roles — light (default) */
  --bg: var(--sky-ground);
  --surface: var(--cream-surface);
  --surface-2: #fffdf8;
  --text: var(--ink);
  --text-muted: var(--n-700);
  --text-dim: var(--n-600);
  --divider: rgba(33, 34, 36, 0.16);
  --hairline: rgba(33, 34, 36, 0.08);
  --accent: var(--teal-500);
  --accent-deep: var(--teal-600);
  --accent-text: var(--teal-700);
  --on-accent: var(--ink);
  --accent-2: var(--sand-500);
  --accent-2-text: var(--sand-700);
  --accent-soft: var(--teal-100);
  --sand-soft: #eadcc2;

  --shadow-sm: 0 1px 2px rgba(33, 34, 36, 0.05), 0 2px 8px rgba(33, 34, 36, 0.04);
  --shadow-md: 0 2px 4px rgba(33, 34, 36, 0.05), 0 12px 32px rgba(33, 34, 36, 0.08);
  --shadow-lg: 0 4px 8px rgba(33, 34, 36, 0.06), 0 28px 64px rgba(33, 34, 36, 0.14);

  --r-sm: 10px;
  --r-md: 16px;
  --r-lg: 24px;
  --r-xl: 32px;
  --r-pill: 999px;

  --container: 1140px;
  --gutter: clamp(20px, 5vw, 40px);
  --section-y: clamp(72px, 10vw, 132px);

  --font: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;

  /* The wordmark art is pale teal (#65d2cd) + pale sand (#dcc5a3), drawn back
     when the app was teal-on-dark. These two steps land it on the brand's own
     text tints — "Guest" at ~#238581 (teal-700 is #2c847f), "Nest" at ~#8a7557
     (sand-700 is #927347) — so it reads as deliberate brand ink on the sky
     rather than washed-out art. The bird is NOT filtered: it carries its own
     teal tile (see .brand-mark). */
  --logo-pop: saturate(1.5) brightness(0.6);

  /* Keep UA-rendered chrome (form controls, scrollbars) on the light sheet so a
     dark-OS visitor doesn't get dark selects inside a cream page. */
  color-scheme: light;
}

/* The app ships permanent light mode (see mobile/src/theme/lightColors.js), so
   the site does too: cream ground, ink text, teal action, sand second voice, in
   every OS setting. The page is light end to end; the value strip reads as a
   soft teal-tinted band and the free-trial offer as a warm sand-tinted band, so
   both still separate from the cream ground without going dark. There is
   deliberately no prefers-color-scheme override here — a visitor on a dark
   desktop should see the same page a host sees in the app. */

/* ---------- 2. Reset ----------------------------------------------------- */

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

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

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.55;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; height: auto; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }

/* Anchored sections must clear the sticky header */
[id] { scroll-margin-top: 92px; }

h1, h2, h3, h4 {
  margin: 0;
  font-weight: 700;
  line-height: 1.14;
  letter-spacing: -0.02em;
  color: var(--text);
  text-wrap: balance;
}

p { margin: 0; text-wrap: pretty; }

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

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  background: var(--accent);
  color: var(--ink);
  padding: 12px 20px;
  border-radius: 0 0 var(--r-sm) 0;
  font-weight: 700;
}
.skip-link:focus { left: 0; }

/* ---------- 3. Layout primitives ---------------------------------------- */

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section { padding-block: var(--section-y); }
.section--tight { padding-block: clamp(56px, 7vw, 88px); }

.section-head { max-width: 40ch; margin-bottom: clamp(36px, 5vw, 60px); }
.section-head--center { margin-inline: auto; text-align: center; }

.eyebrow {
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent-text);
  margin-bottom: 16px;
}
.eyebrow--sand { color: var(--accent-2-text); }

h1 { font-size: clamp(38px, 6.2vw, 64px); }
h2 { font-size: clamp(30px, 4.4vw, 46px); }
h3 { font-size: clamp(19px, 2vw, 22px); letter-spacing: -0.01em; }

.lede {
  font-size: clamp(17px, 1.6vw, 20px);
  line-height: 1.55;
  color: var(--text-muted);
  margin-top: 18px;
}

/* ---------- 4. Buttons --------------------------------------------------- */

.btn {
  --btn-bg: var(--accent);
  --btn-fg: var(--ink);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 15px 26px;
  background: var(--btn-bg);
  color: var(--btn-fg);
  border: 0;
  border-radius: var(--r-pill);
  font-weight: 700;
  font-size: 16px;
  letter-spacing: -0.01em;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
  box-shadow: 0 1px 2px rgba(33, 34, 36, 0.12);
}
.btn:hover { background: var(--accent-deep); transform: translateY(-1px); box-shadow: var(--shadow-md); }
.btn:active { transform: translateY(0); }

.btn--ghost {
  --btn-bg: transparent;
  --btn-fg: var(--text);
  box-shadow: inset 0 0 0 1.5px var(--divider);
}
.btn--ghost:hover { background: var(--surface); box-shadow: inset 0 0 0 1.5px var(--divider); }

.btn--sm { padding: 11px 20px; font-size: 15px; }
.btn--lg { padding: 17px 32px; font-size: 17px; }
.btn--block { width: 100%; }

/* ---------- 5. Header ---------------------------------------------------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  /* backdrop-filter is deliberately NOT transitioned. Listing it here promoted
     the header to a permanent compositing layer, and that layer's boundary read
     as a lighter band across the top 72px of the hero. It was invisible while
     the hero was flat cream; against the sky gradient it became a hard seam.
     The blur now snaps in when the header sticks, which nobody notices. */
  transition: background 0.25s ease, box-shadow 0.25s ease;
}
.site-header .container {
  display: flex;
  align-items: center;
  gap: 24px;
  height: 72px;
}
.site-header.is-stuck {
  background: color-mix(in srgb, var(--bg) 86%, transparent);
  backdrop-filter: saturate(140%) blur(14px);
  -webkit-backdrop-filter: saturate(140%) blur(14px);
  box-shadow: 0 1px 0 var(--hairline);
}

/* The hero is light now, so the header needs no over-dark treatment: the nav
   keeps its default ink-on-cream colours whether or not it is stuck. */

/* The lockup is two pieces, not one image. The bird is pale cream line art, so
   on any light ground it all but vanished (1.07:1 on the hero's top sky). It
   now rides the same deep-teal tile the favicon uses, which both makes it
   legible (cream on #2c847f) and gives the header a saturated brand anchor
   against the pale sky. The wordmark sits beside it, deepened by --logo-pop.
   flex-shrink:0 so the wordmark keeps its aspect ratio: without it the header's
   flex row squeezes the logo horizontally (squished) when the CTA is wide. */
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; margin-right: auto; flex-shrink: 0; }
.brand-mark { height: 34px; width: 34px; flex-shrink: 0; }
.brand-word { height: 21px; width: auto; flex-shrink: 0; filter: var(--logo-pop); }

/* Header CTA carries a full label on desktop and a short one on phones. */
.cta-short { display: none; }

.nav { display: flex; align-items: center; gap: 28px; }
.nav-link {
  font-size: 15px;
  font-weight: 500;
  color: var(--text-muted);
  text-decoration: none;
  transition: color 0.15s ease;
}
.nav-link:hover { color: var(--text); }

@media (max-width: 860px) {
  .nav { display: none; }
}

/* Phones: nav is gone, so it is just the logo and the CTA. Tighten the gap and
   swap to the short CTA label so the full-size wordmark never gets squeezed. */
@media (max-width: 560px) {
  .site-header .container { gap: 14px; }
  .site-header .btn--sm { padding: 10px 15px; font-size: 14px; }
  .cta-long { display: none; }
  .cta-short { display: inline; }
}

/* ---------- 6. Hero ------------------------------------------------------ */

.hero {
  position: relative;
  background: linear-gradient(176deg, var(--sky-400) 0%, var(--sky-200) 46%, var(--bg) 100%);
  color: var(--text);
  margin-top: -72px;
  padding-top: 72px;
  overflow: hidden;
  isolation: isolate;
}

/* Two blooms behind the copy. On the sky ground the teal reads as a brighter
   patch of weather and the sand as a low sun off the snow, which is the same
   pairing the welcome hero gets from the photo itself. */
.hero::before,
.hero::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  z-index: -1;
  pointer-events: none;
}
.hero::before {
  width: 620px; height: 620px;
  top: -180px; left: -160px;
  background: radial-gradient(circle, rgba(69, 172, 166, 0.20), transparent 68%);
}
.hero::after {
  width: 720px; height: 720px;
  bottom: -320px; right: -180px;
  background: radial-gradient(circle, rgba(185, 151, 96, 0.20), transparent 68%);
}

.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
  padding-block: clamp(56px, 8vw, 104px) clamp(64px, 9vw, 116px);
}

.hero h1 { color: var(--text); }
.hero .lede { color: var(--text-muted); max-width: 46ch; }

.badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 16px 8px 10px;
  border-radius: var(--r-pill);
  background: var(--surface-2);
  box-shadow: inset 0 0 0 1px var(--divider), var(--shadow-sm);
  font-size: 13.5px;
  font-weight: 500;
  color: var(--text-muted);
  margin-bottom: 26px;
}
.badge b { color: var(--text); font-weight: 700; }
.badge .dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--accent-deep);
  margin-left: 6px;
  box-shadow: 0 0 0 4px rgba(69, 172, 166, 0.22);
}

.hero-proof {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 22px;
  margin-top: 26px;
  font-size: 14.5px;
  color: var(--text-muted);
}
.hero-proof span { display: inline-flex; align-items: center; gap: 8px; }
.hero-proof svg { flex: none; color: var(--accent-text); }

/* ---------- 7. Signup form ---------------------------------------------- */

.signup { margin-top: 32px; max-width: 520px; }

.signup-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  padding: 8px;
  border-radius: var(--r-pill);
  background: var(--cream-surface);
  box-shadow: var(--shadow-lg);
}

.signup-row input[type="email"] {
  border: 0;
  background: transparent;
  padding: 12px 8px 12px 18px;
  font-size: 16px;
  color: var(--ink);
  min-width: 0;
}
.signup-row input::placeholder { color: var(--n-500); }
.signup-row input:focus { outline: none; }
.signup-row:focus-within { box-shadow: var(--shadow-lg), 0 0 0 3px rgba(102, 204, 198, 0.55); }

.signup-aside {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 14px;
  margin-top: 14px;
  font-size: 13.5px;
  color: var(--n-300);
}
.signup-aside label { display: inline-flex; align-items: center; gap: 8px; }
.signup-aside select {
  appearance: none;
  -webkit-appearance: none;
  background-color: rgba(245, 234, 216, 0.10);
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23eee7db' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  color: var(--cream);
  border: 0;
  box-shadow: inset 0 0 0 1px rgba(245, 234, 216, 0.22);
  border-radius: var(--r-pill);
  padding: 7px 32px 7px 14px;
  font-size: 13.5px;
  font-weight: 500;
  cursor: pointer;
}
.signup-aside select option { color: var(--ink); background: var(--cream-surface); }

.signup-note { margin-top: 14px; font-size: 13.5px; color: var(--n-400); }

/* Light-ground variant, used in the closing CTA */
.signup--onlight .signup-row { background: var(--surface-2); box-shadow: var(--shadow-md); }
.signup--onlight .signup-aside { color: var(--text-muted); }
.signup--onlight .signup-aside select {
  background-color: var(--surface);
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23645c50' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  color: var(--text);
  box-shadow: inset 0 0 0 1px var(--divider);
}


/* Stack the field and the button once the row gets tight */
@media (max-width: 440px) {
  .signup-row {
    grid-template-columns: 1fr;
    border-radius: var(--r-lg);
    gap: 8px;
  }
  .signup-row input[type="email"] { padding: 12px 16px; }
  .signup-row .btn { width: 100%; }
}
.signup--onlight .signup-note { color: var(--text-muted); }

.hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }

.form-status {
  margin-top: 16px;
  padding: 14px 18px;
  border-radius: var(--r-md);
  font-size: 15px;
  line-height: 1.5;
  display: none;
}
.form-status.is-visible { display: block; }
.form-status[data-tone="ok"] {
  background: var(--teal-100);
  color: var(--teal-900);
  box-shadow: inset 0 0 0 1px var(--teal-300);
}
.form-status[data-tone="err"] {
  background: var(--sand-100);
  color: var(--sand-900);
  box-shadow: inset 0 0 0 1px var(--sand-300);
}
.form-status a { color: inherit; font-weight: 700; }

/* ---------- 8. Phone mockups -------------------------------------------- */

.phone {
  position: relative;
  width: 260px;
  padding: 10px;
  border-radius: 42px;
  background: linear-gradient(160deg, #3a352c, #201e1d 60%);
  box-shadow: var(--shadow-lg), inset 0 0 0 1px rgba(245, 234, 216, 0.14);
}
.phone img { border-radius: 32px; }

@media (max-width: 980px) {
  .hero-grid { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .phone { width: 210px; border-radius: 34px; padding: 8px; }
  .phone img { border-radius: 26px; }
}

/* ---------- 8b. Hero artwork: property photo + one phone over it ---------
   The photo is illustrative of the kind of place GuestNest is built for, not a
   real listing. The phone overlaps its lower-left corner so the product is
   still visible without the photo becoming pure decoration. */

.hero-art { position: relative; isolation: isolate; }

.hero-art .shot {
  border-radius: var(--r-xl);
  overflow: hidden;
  aspect-ratio: 4 / 3;
  box-shadow: var(--shadow-lg), inset 0 0 0 1px rgba(33, 34, 36, 0.06);
}
.hero-art .shot img { width: 100%; height: 100%; object-fit: cover; }

/* Sized as a share of the photo, not a fixed width: a phone is 2.17x taller
   than it is wide, so a fixed width easily ends up taller than the 4:3 photo
   and reads as a slab rather than an inset. ~29% keeps it to roughly three
   quarters of the photo's height at every width. */
.hero-art .phone {
  position: absolute;
  left: -26px;
  bottom: -30px;
  width: clamp(116px, 29%, 164px);
  padding: 6px;
  border-radius: 26px;
  z-index: 2;
}
.hero-art .phone img { border-radius: 21px; }

@media (max-width: 980px) {
  /* Hero stacks here; keep the phone tucked at the corner, not off-canvas */
  .hero-art .phone { left: -14px; }
}
@media (max-width: 560px) {
  .hero-art .phone { display: none; }
}

/* ---------- 8d. Sections on a photo ground ------------------------------
   The photo sits far back: blurred, dimmed and covered by a cream wash, so the
   content keeps full contrast and the page stays light. --photo is set inline
   on the section; --photo-pos tunes the crop (defaults to center 62%). Used by
   the problem, how-it-works and closing sections. */

.section--photo { position: relative; isolation: isolate; overflow: hidden; }
.section--photo::before {
  content: "";
  position: absolute; inset: -8px;
  background-image: var(--photo);
  background-size: cover;
  background-position: var(--photo-pos, center 62%);
  filter: blur(3px);
  opacity: 0.30;
  z-index: -2;
}
.section--photo::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg,
    var(--surface) 0%,
    rgba(249, 244, 237, 0.80) 44%,
    var(--surface) 100%);
  z-index: -1;
}

/* ---------- 9. Marquee strip -------------------------------------------- */

.strip {
  background: var(--accent-soft);
  color: var(--text-muted);
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
}
.strip .container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px clamp(24px, 5vw, 64px);
  padding-block: 22px;
  font-size: 14px;
  text-align: center;
}
.strip b { color: var(--text); font-weight: 700; }
.strip .sep { color: var(--divider); }

@media (max-width: 700px) { .strip .sep { display: none; } }

/* ---------- 10. Cards ---------------------------------------------------- */

.card {
  background: var(--surface);
  border-radius: var(--r-lg);
  padding: 28px;
  box-shadow: inset 0 0 0 1px var(--hairline), var(--shadow-sm);
}

.card h3 { margin-bottom: 10px; }
.card p { color: var(--text-muted); font-size: 15.5px; }

.grid { display: grid; gap: clamp(16px, 2vw, 22px); }
.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

@media (max-width: 900px) { .grid--3 { grid-template-columns: 1fr; } }
@media (max-width: 760px) { .grid--2 { grid-template-columns: 1fr; } }

.icon-tile {
  width: 44px; height: 44px;
  border-radius: 13px;
  display: grid; place-items: center;
  background: var(--accent-soft);
  color: var(--accent-text);
  margin-bottom: 18px;
}
.icon-tile--sand { background: var(--sand-soft); color: var(--accent-2-text); }

/* ---------- 11. Problem block ------------------------------------------- */

.problem { background: var(--surface); }

.problem-quote {
  font-size: clamp(26px, 3.6vw, 40px);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.14;
  max-width: 22ch;
}
.problem-quote em { font-style: normal; color: var(--accent-2-text); }

.loss-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 18px; }
.loss-list li {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  gap: 14px;
  align-items: start;
  font-size: 16px;
  color: var(--text-muted);
}
.loss-list b { color: var(--text); font-weight: 700; }
.loss-list .x {
  width: 30px; height: 30px;
  border-radius: 50%;
  display: grid; place-items: center;
  background: var(--sand-soft);
  color: var(--accent-2-text);
  margin-top: 1px;
}

.split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(32px, 6vw, 80px);
  align-items: center;
}
@media (max-width: 880px) { .split { grid-template-columns: 1fr; } }

/* ---------- 12. Steps ---------------------------------------------------- */

.steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 3vw, 32px); counter-reset: step; }
@media (max-width: 900px) { .steps { grid-template-columns: 1fr; } }

.step { counter-increment: step; position: relative; }
.step-num {
  width: 40px; height: 40px;
  border-radius: 50%;
  display: grid; place-items: center;
  background: var(--accent);
  color: var(--ink);
  font-weight: 700;
  font-size: 16px;
  margin-bottom: 18px;
}
.step-num::before { content: counter(step); }
.step h3 { margin-bottom: 8px; }
.step p { color: var(--text-muted); font-size: 15.5px; }

/* ---------- 13. Feature showcase ---------------------------------------- */

.showcase { display: grid; gap: clamp(52px, 8vw, 104px); }

.showcase-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr);
  gap: clamp(32px, 6vw, 76px);
  align-items: center;
}
.showcase-row:nth-child(even) .showcase-media { order: -1; }
@media (max-width: 880px) {
  .showcase-row { grid-template-columns: 1fr; }
  .showcase-row:nth-child(even) .showcase-media { order: 0; }
}

.showcase-media { display: flex; justify-content: center; }

.feature-list { list-style: none; margin: 22px 0 0; padding: 0; display: grid; gap: 12px; }
.feature-list li {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  font-size: 16px;
  color: var(--text-muted);
}
.feature-list svg { color: var(--accent-deep); margin-top: 4px; }
.feature-list b { color: var(--text); font-weight: 700; }

.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 24px; }
.chip {
  padding: 7px 14px;
  border-radius: var(--r-pill);
  font-size: 13.5px;
  font-weight: 500;
  background: var(--accent-soft);
  color: var(--accent-text);
}
.chip--sand { background: var(--sand-soft); color: var(--accent-2-text); }

/* ---------- 14. Offer ---------------------------------------------------- */

.offer { background: var(--sand-soft); color: var(--text); position: relative; overflow: hidden; isolation: isolate; }
.offer .eyebrow { color: var(--accent-2-text); }

.offer-card {
  background: var(--surface-2);
  box-shadow: inset 0 0 0 1px var(--hairline), var(--shadow-md);
  border-radius: var(--r-xl);
  padding: clamp(28px, 4vw, 44px);
}

.perks { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
.perks li {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  gap: 14px;
  align-items: start;
  color: var(--text-muted);
  font-size: 16px;
}
.perks b { color: var(--text); font-weight: 700; }
.perks svg { color: var(--accent-deep); margin-top: 4px; }

.offer-note {
  margin: 28px 0 0;
  padding-top: 24px;
  border-top: 1px solid var(--divider);
  font-size: 14px;
  line-height: 1.55;
  color: var(--text-dim);
}

/* ---------- 15. FAQ ------------------------------------------------------ */

.faq { max-width: 760px; margin-inline: auto; }

details.qa {
  border-bottom: 1px solid var(--divider);
  padding: 6px 0;
}
details.qa summary {
  list-style: none;
  cursor: pointer;
  padding: 20px 40px 20px 0;
  font-weight: 700;
  font-size: 17px;
  letter-spacing: -0.01em;
  position: relative;
}
details.qa summary::-webkit-details-marker { display: none; }
details.qa summary::after {
  content: "";
  position: absolute;
  right: 6px; top: 50%;
  width: 10px; height: 10px;
  border-right: 2.2px solid var(--text-dim);
  border-bottom: 2.2px solid var(--text-dim);
  transform: translateY(-70%) rotate(45deg);
  transition: transform 0.2s ease;
}
details.qa[open] summary::after { transform: translateY(-30%) rotate(-135deg); }
details.qa p { padding: 0 40px 22px 0; color: var(--text-muted); font-size: 16px; }

/* ---------- 16. Closing CTA + footer ------------------------------------ */

.closing { text-align: center; }
.closing .signup { margin-inline: auto; }
.closing .signup-aside { justify-content: center; }
.closing .form-status { text-align: left; }

.site-footer {
  border-top: 1px solid var(--hairline);
  padding-block: 40px 48px;
  font-size: 14px;
  color: var(--text-muted);
}
.site-footer .container {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 28px;
}
.brand--footer { gap: 9px; }
.site-footer .brand-mark { height: 27px; width: 27px; }
.site-footer .brand-word { height: 17px; }
.site-footer a { color: var(--text-muted); text-decoration: none; }
.site-footer a:hover { color: var(--text); }

/* ---------- 17. Scroll reveal ------------------------------------------- */

.reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
.reveal.is-in { opacity: 1; transform: none; }

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