/* Saisonist — Editorial minimalism. Kinfolk / Wilmina / boutique hospitality.
   Typography-led. No shadows, cards, gradients, or animations. */

/* ─── Accent strategy ────────────────────────────────────────────────────────
   Blue #7DA3A6  = ACTION. Every primary CTA (nav, hero button, in-page links,
                   form submit, form focus). Rule: if it’s clickable and moves
                   the user forward, it’s blue. No blue in body copy.
   Yellow #E7D26C  = EMPHASIS. Key words in body copy only (not in headlines). One phrase per section only: the line that states
                    the section’s benefit or outcome (the “so what”). Used
                    only in section headlines/taglines, never in body copy.
   Do not use both accents in the same block. No accents in FAQs or long text.
──────────────────────────────────────────────────────────────────────────── */

/* CONTENTS
   1. Variables & base (body, typography, buttons, nav)
   2. Hero (left + right tablet mockup)
   3. Positioning strip
   4. Respect (section 2 — dark block)
   5. How, Steps, Scenarios, OTA, Network, About, FAQ
   6. CTA & form, Footer
   7. Media queries (1024, 900, 600px)
──────────────────────────────────────────────────────────────────────────── */

:root {
  --text: #1c1c1c;
  --muted: #6f6f6f;
  --line: #e9e6e2;
  --bg: #ffffff;
  --accent-blue: #7DA3A6;
  --accent-yellow: #E7D26C;
  --gold: #E7D26C;
  --parch: #e9e6e2;
  --ember: #1c1c1c;
  --white: #ffffff;
  --serif: 'Cormorant Garamond', serif;
  /* Hero mockup aliases */
  --border: #e9e6e2;
  --mid: #6f6f6f;
  --faint: #bbb;
  --warm: #f8f7f5;
  --yellow-bg: rgba(231,210,108,.12);
  --yellow: #E7D26C;
  --yellow-lt: #f5ecb0;
  --bg-soft: #f8f7f5;
  --accent-blue-lt: #d4e5e6;
  --accent-blue-bg: #f0f6f6;
  --accent-yellow-lt: #f5ecb0;
  --accent-yellow-bg: #fffdf0;
  --page-gutter: 12px;
  --section-pad-y: 80px;
  /* Body copy scale (overridden per breakpoint below) */
  --body-size: 18px;
  --body-lh: 1.7;
  --body-weight: 400;
  --body-color: var(--muted);
  /* Section headlines (primary) & sub-headlines — serif; size overridden per breakpoint */
  --section-head-size: clamp(28px, 3.5vw, 42px);
  --section-head-lh: 1.2;
  --section-head-track: -0.02em;
  --section-subhead-size: clamp(22px, 2.75vw, 32px);
  --section-subhead-lh: 1.22;
  --section-subhead-track: -0.02em;
  /* Short reassurance lines under CTAs (mid form + calendly block) */
  --cta-reassure-size: 12px;
}

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; }
body {
  font-family: 'DM Sans', sans-serif;
  font-weight: var(--body-weight);
  font-size: var(--body-size);
  line-height: var(--body-lh);
  color: var(--text);
  background: var(--bg);
  overflow-x: hidden;
}
img { display: block; max-width: 100%; height: auto; object-fit: cover; }
a { color: inherit; text-decoration: none; }

/* ─── Typography hierarchy ───────────────────────────────────────────────── */
/* All headlines use the same font (Cormorant Garamond) */
h1, h2, h3,
.problem-h, .how-h, .step-h, .scenarios-h, .ota-h, .faq-h, .cta-h {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 500;
  letter-spacing: -0.4px;
}
/* Section headlines only: non-bold (override global 500) */
.hero h1,
.prob-h,
.intel-h,
.how-section-h,
.setup-h,
.faq-hdr h2,
.how-cta-h,
.cta-h,
.scenarios-h,
.ota-h {
  font-weight: 400 !important;
}

/* Primary section headlines — one scale (--section-head-size) */
.prob-h,
.intel-h,
.how-section-h,
.setup-h,
.faq-hdr h2,
.how-cta-h,
.cta-h,
.scenarios-h,
.ota-h {
  font-family: var(--serif);
  font-size: var(--section-head-size);
  line-height: var(--section-head-lh);
  letter-spacing: var(--section-head-track);
}
.prob-h,
.intel-h,
.how-section-h,
.setup-h,
.faq-hdr h2,
.scenarios-h,
.ota-h {
  color: var(--text);
}
.how-cta-h,
.cta-h {
  color: #fff;
}
.prob-h em,
.intel-h em,
.how-section-h em,
.setup-h em,
.faq-hdr h2 em,
.how-cta-h em,
.cta-h em,
.scenarios-h em,
.ota-h em {
  font-family: var(--serif);
  font-weight: 400;
  font-style: italic;
  font-size: 1em;
  letter-spacing: 0;
  color: inherit;
}
.cta-h em {
  color: rgba(255, 255, 255, .9);
}

/* Section sub-headlines — one scale (--section-subhead-size) */
.intel-proof-h,
.about-subhead,
.impressum-block h2 {
  font-family: var(--serif);
  font-size: var(--section-subhead-size);
  line-height: var(--section-subhead-lh);
  letter-spacing: var(--section-subhead-track);
  font-weight: 400;
}
/* Slightly smaller than section subheads: setup / options / step main titles / proof KPI numerals */
.setup-title,
.opt-title,
.proof-stat-n {
  font-family: var(--serif);
  font-size: calc(var(--section-subhead-size) * 0.9);
  line-height: var(--section-subhead-lh);
  letter-spacing: var(--section-subhead-track);
  font-weight: 400;
}
.proof-stat-n {
  font-size: calc(var(--section-subhead-size) * 0.9 + 2px);
}
.intel-proof-h {
  font-weight: 400 !important;
  color: var(--accent-blue);
  width: 100%;
  max-width: 720px;
  margin: 0 0 14px;
  box-sizing: border-box;
  text-align: center;
  align-self: center;
}
.intel-proof-h em {
  font-family: var(--serif);
  font-weight: 400;
  font-style: italic;
  font-size: 1em;
  letter-spacing: 0;
  color: inherit;
}
.about-subhead {
  color: var(--text);
  margin: -4px 0 20px;
}
.impressum-block h2 {
  color: var(--text);
  margin-bottom: 16px;
}
.setup-title,
.opt-title,
.proof-stat-n {
  color: var(--text);
  margin-bottom: 8px;
}

h1 { font-size: 72px; line-height: 1.05; margin-bottom: 32px; }
h2 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: var(--section-head-size);
  line-height: var(--section-head-lh);
  letter-spacing: var(--section-head-track);
  margin-bottom: 32px;
}
p {
  font-size: var(--body-size);
  line-height: var(--body-lh);
  font-weight: var(--body-weight);
  color: var(--body-color);
  max-width: 680px;
}

/* Long-form / marketing body: one type system; size follows --body-size per breakpoint */
.opt-line,
.intel-thesis p,
.how-section .step-body,
.setup-sub,
.setup-body,
.team-text,
.sc-sub,
.sc-reveal,
.ota-sub,
.ota-row span,
.stat-label,
.about-p,
.faq-a,
.proof-stat-l,
.guests-anchor-line,
.guests-anchor-note,
.how-cta-lead,
.impressum-intro,
.impressum-block p,
.ge-text p,
.intel-proof-sub,
.mid-cta-success-sub {
  font-family: 'DM Sans', sans-serif;
  font-size: var(--body-size);
  line-height: var(--body-lh);
  font-weight: var(--body-weight);
  color: var(--body-color);
}

.ge-text p,
.ota-stat,
.impressum-block p { color: var(--text); }

.cta-sub,
.cta-alessa-text {
  font-family: 'DM Sans', sans-serif;
  font-size: var(--body-size);
  line-height: var(--body-lh);
  font-weight: var(--body-weight);
}

.cta-sub { color: rgba(255, 255, 255, 0.92); }
.cta-alessa-text { color: rgba(255, 255, 255, 0.7); }

.how-cta-lead { color: rgba(255, 255, 255, 0.88); }

.mid-cta-success-sub { color: rgba(255, 255, 255, 0.88); }

.mid-cta-success-contact {
  font-family: 'DM Sans', sans-serif;
  font-size: var(--body-size);
  line-height: var(--body-lh);
  font-weight: var(--body-weight);
  color: var(--yellow);
}

.ota-stat {
  font-family: 'DM Sans', sans-serif;
  font-size: var(--body-size);
  line-height: 1.6;
  font-weight: var(--body-weight);
  margin: 0;
}

.eyebrow {
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 12px;
}
.eyebrow::before { display: none; }
.eyebrow.light { color: var(--muted); }
.highlight { background: var(--accent-yellow); padding: 0.12em 0.2em; }
.eyebrow.light::before { display: none; }

hr.rule { border: none; border-top: 1px solid var(--line); margin: 0; }

/* ─── Nav (fixed, blue brand bar, yellow CTA) ─────────────────────────────── */
#nav { position: fixed; top: 0; left: 0; right: 0; z-index: 200; height: 58px; background: rgba(125, 163, 166, .96); border-bottom: 1px solid rgba(255, 255, 255, .18); transition: background .3s, border-color .3s; backdrop-filter: blur(12px); }
#nav.scrolled { background: rgba(125, 163, 166, .96); border-color: rgba(255, 255, 255, .18); backdrop-filter: blur(12px); }
.nav-i { max-width: 1120px; margin: 0 auto; padding: 0 var(--page-gutter); height: 100%; display: flex; align-items: center; justify-content: space-between; }
.nav-logo { font-family: var(--serif); font-size: 22px; font-weight: 400; color: #fff; text-decoration: none; }
.nav-logo:hover { color: #fff; opacity: .9; }
.nav-links { display: flex; gap: 28px; list-style: none; margin: 0; padding: 0; }
.nav-links a {
  font-family: 'DM Sans', sans-serif;
  font-size: var(--body-size);
  font-weight: var(--body-weight);
  line-height: var(--body-lh);
  letter-spacing: normal;
  color: rgba(255, 255, 255, .78);
  transition: color .15s;
  text-decoration: none;
}
.nav-links a:hover { color: #fff; }
.nav-cta {
  padding: 10px 22px;
  background: var(--yellow);
  color: var(--text);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: .04em;
  border: none;
  cursor: pointer;
  transition: background .15s;
  text-decoration: none;
  display: inline-block;
  font-family: 'DM Sans', sans-serif;
}
.nav-cta:hover { background: var(--yellow-lt); }
#nav.scrolled .nav-logo { color: #fff; }
#nav.scrolled .nav-links a { color: rgba(255, 255, 255, .78); }
#nav.scrolled .nav-links a:hover { color: #fff; }

/* ─── Buttons (underline only, editorial) ─────────────────────────────────── */
.btn {
  display: inline-block;
  font-family: 'DM Sans', sans-serif;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent-blue);
  border: none;
  background: none;
  cursor: pointer;
  padding: 0;
  padding-bottom: 4px;
  border-bottom: 2px solid var(--accent-blue);
  transition: opacity 0.2s;
}
.btn:hover { opacity: 0.85; }
.btn::after { content: ' →'; font-weight: 300; }
.btn-dark {
  background: none !important;
  color: var(--accent-blue) !important;
  border-bottom: 2px solid var(--accent-blue) !important;
  padding-bottom: 4px !important;
}
.btn-dark:hover { opacity: 0.8; }
.btn-dark::after { content: ' →'; }
.btn-ghost {
  border-bottom: 1px solid var(--line);
  color: var(--muted);
}
.btn-ghost:hover { color: var(--text); border-bottom-color: var(--text); }
.btn-ghost::after { content: ' →'; }
.btn-outline-white {
  border: none;
  border-bottom: 1px solid var(--line);
  color: var(--text);
  padding: 0;
  padding-bottom: 4px;
}
.btn-outline-white:hover { opacity: 0.7; }
.btn-outline-white::after { content: ' →'; }

/* ─── Reveal (no animation: instant or very subtle) ────────────────────────── */
.reveal { opacity: 1; transform: none; }
.reveal.in { opacity: 1; transform: none; }

/* ─── Hero (same container as rest: 1120px, 48px padding; blue + yellow accents) ─── */
.hero { padding-top: 0; background: var(--bg); }
.hero-inner {
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 var(--page-gutter);
  display: grid;
  grid-template-columns: 52% 48%;
  align-items: stretch;
}

/* Desktop + tablet: hero should fill one viewport (no peek of next section). */
@media (min-width: 901px) {
  .hero,
  .hero-inner {
    min-height: 100vh;
  }
}
.hero-left {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 80px 24px 80px 0;
}
.hero h1 {
  font-family: var(--serif);
  font-size: clamp(36px, 4.2vw, 56px);
  font-weight: 400 !important;
  line-height: 1.1;
  letter-spacing: -0.015em;
  color: var(--text);
  margin-bottom: 20px;
}
.hero h1 .hero-line { display: block; }
.hero h1 .hero-line + .hero-line { margin-top: 3px; }
.hero h1 .hero-line-accent {
  font-style: italic;
  color: inherit;
  font-size: 0.92em;
}
.hero h2.hero-deck {
  font-family: 'DM Sans', sans-serif;
  font-size: var(--body-size);
  font-weight: var(--body-weight);
  line-height: var(--body-lh);
  letter-spacing: 0;
  margin-bottom: 32px;
  color: var(--mid);
  max-width: 480px;
}
.hero-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 20px 36px;
  margin-bottom: 0;
}
/* Solid brand-yellow button, square corners */
.hero-btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: 'DM Sans', sans-serif;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: none;
  color: var(--text);
  background: var(--yellow);
  border: none;
  border-radius: 0;
  padding: 14px 26px;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.15s;
}
.hero-btn-primary:hover {
  background: var(--yellow-lt);
}
/* Text link + full-width underline (secondary CTA) */
.hero-cta-text {
  display: inline-block;
  font-family: 'DM Sans', sans-serif;
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 0.02em;
  color: var(--mid);
  text-decoration: none;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--line);
  transition: color 0.15s, border-color 0.15s;
}
.hero-cta-text:hover {
  color: var(--text);
  border-bottom-color: var(--mid);
}
.hero-pos {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 0;
  margin-top: 48px;
  padding-top: 32px;
  border-top: 1px solid var(--line);
}
.hero-pos .pos-item {
  padding-right: 24px;
  border-right: 1px solid var(--line);
}
.hero-pos .pos-item:last-child { padding-right: 0; border-right: none; }

.hero-right {
  position: relative;
  overflow: visible;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 56px 0 72px 4%;
}
.hero-right::before { display: none; }

/* ─── Hero right: floating card composition ───────────────────────────────── */
.hero-visual {
  position: relative;
  width: 100%;
  max-width: 600px;
  min-height: 540px;
  margin: 0 auto;
  z-index: 1;
}
.hero-float-zero {
  position: absolute;
  top: 4%;
  right: -4%;
  z-index: 4;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  max-width: 232px;
  padding: 14px 18px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: 0 8px 28px rgba(28,28,28,.08), 0 2px 8px rgba(28,28,28,.04);
  font-size: 12px;
  line-height: 1.3;
  color: var(--mid);
}
.hfz-stat { display: flex; align-items: baseline; gap: 6px; }
.hfz-number { font-family: var(--serif); font-size: 26px; font-weight: 500; color: var(--text); line-height: 1; }
.hfz-unit { font-family: var(--serif); font-size: 16px; font-weight: 400; color: var(--text); line-height: 1; }
.hfz-caption { margin: 0; font-size: 11px; font-weight: 400; line-height: 1.35; letter-spacing: .02em; color: var(--mid); }
.hfz-compare,
.hfb-eyebrow {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .04em;
  color: var(--accent-blue);
}
.hfz-compare { margin: 0; }
.hfb-eyebrow { margin: 0 0 8px; text-transform: none; }

.hero-float-badge {
  position: absolute;
  top: 10%;
  left: -6%;
  z-index: 4;
  max-width: 240px;
  padding: 14px 18px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 16px;
  box-shadow: 0 8px 28px rgba(28,28,28,.08), 0 2px 8px rgba(28,28,28,.04);
}
.hfb-campaign {
  font-family: var(--serif);
  font-size: 17px;
  font-weight: 400;
  line-height: 1.25;
  color: var(--text);
  margin-bottom: 10px;
}
.hfb-pill {
  display: inline-block;
  padding: 5px 11px;
  border-radius: 100px;
  font-size: 11px;
  font-weight: 500;
  color: var(--text);
  background: var(--yellow-bg);
  border: 1px solid rgba(231,210,108,.35);
}

.hero-dash-card {
  position: relative;
  width: 82%;
  max-width: 400px;
  margin: 64px auto 0;
  z-index: 2;
}
.hero-beige-square {
  aspect-ratio: 1;
  border-radius: 22px;
  background: #e9e2d7;
  overflow: hidden;
  box-shadow: 0 0 0 1px rgba(28,28,28,.06), 0 24px 56px rgba(28,28,28,.12);
}
.hero-beige-square img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

.hero-float-campaign {
  position: absolute;
  bottom: 6%;
  right: -12%;
  z-index: 4;
  width: min(300px, 94%);
  padding: 16px 18px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 16px;
  box-shadow: 0 8px 28px rgba(28,28,28,.08), 0 2px 8px rgba(28,28,28,.04);
}
.hfc-label {
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 12px;
}
.hfc-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  padding: 8px 0;
  border-top: 1px solid var(--line);
  font-size: 13px;
}
.hfc-row:first-of-type { border-top: none; padding-top: 0; }
.hfc-row--segmented {
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: baseline;
  gap: 0 6px;
  line-height: 1.45;
}
.hfc-topic { color: var(--text); font-weight: 500; }
.hfc-sep { color: var(--mid); opacity: .45; font-weight: 300; user-select: none; }
.hfc-guests { font-size: 12px; color: var(--mid); }
.hfc-est { font-size: 12px; font-weight: 500; color: var(--accent-blue); }
.hfc-name { color: var(--text); font-weight: 400; }
.hfc-footer {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}
.hfc-footer-line {
  margin: 0;
  font-size: 11px;
  font-weight: 500;
  line-height: 1.45;
  color: var(--text);
}
.hfc-footer-line + .hfc-footer-line { margin-top: 6px; }
.hfc-footer-line--muted { font-weight: 400; color: var(--mid); }
.hfc-trigger {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
  font-size: 12px;
  color: var(--mid);
}
.hfc-trigger-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent-blue);
  flex-shrink: 0;
}
.hfc-strong { color: var(--text); font-weight: 600; }

/* Tablet mockup (used elsewhere) */
.tablet-frame {
  width: 880px;
  height: 620px;
  transform: scale(0.85);
  transform-origin: top left;
  background: #1a1a1a;
  border-radius: 28px;
  padding: 7px;
  box-shadow: 0 0 0 1px rgba(0,0,0,.12), 0 40px 100px rgba(0,0,0,.22);
  overflow: hidden;
}
.tablet-screen {
  width: 100%;
  height: 100%;
  background: #fff;
  border-radius: 21px;
  overflow: hidden;
}
.tablet-screen img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top left;
  display: block;
}
/* ─── Positioning strip ───────────────────────────────────────────────────── */
.pos-strip {
  padding: var(--section-pad-y) var(--page-gutter);
  display: grid;
  grid-template-columns: 1fr 1px 1fr 1px 1fr;
  max-width: 1100px;
  margin: 0 auto;
  background: var(--bg);
}
.pos-div { background: var(--line); }
.pos-item { padding: 0 40px; display: flex; flex-direction: column; gap: 8px; }
.pos-item:first-child { padding-left: 0; }
.pos-item:last-child { padding-right: 0; }
.pos-label { font-size: 13px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.pos-statement { font-family: 'Cormorant Garamond', serif; font-size: 20px; font-weight: 400; line-height: 1.35; color: var(--text); }

/* ─── Section accent (visual separation) ───────────────────────────────────── */
.how-section,
#setup,
.faq,
#start { border-top: 3px solid var(--accent-blue); }

/* ─── Problem (section 2). Warm bg, 4 options grid. ────────────────────────── */
#problem { padding: var(--section-pad-y) 0; background: var(--warm); }
#problem .inner { max-width: 1120px; margin: 0 auto; padding: 0 var(--page-gutter); }
/* Section label above headlines — use .section-kicker (uppercase); --caps = wider tracking + lighter weight; --yellow = final CTA band */
.section-kicker {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent-blue);
}
.section-kicker--caps {
  font-weight: 400;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.section-kicker--yellow {
  color: var(--yellow);
}
#problem .inner > .section-kicker { margin-bottom: 28px; }
.intel-header > div:first-child .section-kicker { margin-bottom: 28px; }
.intel-practice-rule .section-kicker {
  flex-shrink: 0;
  margin: 0;
  width: auto;
  max-width: none;
  white-space: nowrap;
  color: var(--text);
}
.how-section .section-header .section-kicker { margin-bottom: 28px; }
.setup-hdr .section-kicker { margin-bottom: 20px; }
.faq-hdr .section-kicker { margin-bottom: 20px; }
/* Same measure as .cta-sub / .cta-note so the label shares their center axis; slight -X nudge offsets tracking on all-caps */
.cta-inner > .section-kicker.section-kicker--yellow {
  margin-bottom: 24px;
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  transform: translateX(-0.07em);
}
.hero-left .section-kicker.section-kicker--caps { margin-bottom: 20px; }
.prob-h { max-width: 680px; margin-bottom: 56px; }
.options {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-top: 1px solid var(--border);
  text-align: left;
}
.opt {
  position: relative;
  padding: 28px 0;
  border-bottom: 1px solid var(--border);
  border-right: 1px solid var(--border);
  text-align: left;
}
.opt:nth-child(odd) {
  padding-right: 36px;
}
.opt:nth-child(even) {
  border-right: none;
  padding-left: 36px;
}
.opt:nth-child(3), .opt:nth-child(4) { border-bottom: none; }
.opt-line { margin-bottom: 10px; }
.opt-sting {
  font-family: 'DM Sans', sans-serif;
  font-size: var(--body-size);
  line-height: var(--body-lh);
  font-weight: var(--body-weight);
  color: var(--text);
  margin: 0;
  padding-left: 11px;
  border-left: 2px solid var(--accent-blue);
}

/* ─── Intelligence section (orbital profiles) ─────────────────────────────── */
.intel-section { padding: var(--section-pad-y) 0; background: var(--bg); border-top: 1px solid var(--line); }
.intel-inner { max-width: 1160px; margin: 0 auto; padding: 0 var(--page-gutter); }
.intel-header { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: end; margin-bottom: 56px; }
.intel-h { margin-bottom: 0; }
.intel-thesis p { margin-bottom: 14px; max-width: 520px; }
.intel-thesis p:last-child { margin-bottom: 0; }
.intel-thesis strong { color: var(--text); font-weight: 500; }
.intel-proof-head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  width: 100%;
  max-width: none;
  margin: 0 auto 56px;
}
.intel-practice-rule {
  display: flex;
  align-items: center;
  align-self: stretch;
  gap: clamp(12px, 3vw, 20px);
  width: 100%;
  max-width: none;
  margin: 0 0 20px;
  box-sizing: border-box;
}
.intel-proof-rule-line {
  flex: 1;
  min-width: 16px;
  height: 1px;
  background: #bfb5a8;
  opacity: .45;
}
.intel-emails-divider {
  margin: 56px 0 0;
  width: 100%;
  box-sizing: border-box;
}
.intel-emails-divider .intel-proof-rule-line {
  width: 100%;
  flex: none;
}
.intel-proof-sub {
  max-width: 720px;
  width: 100%;
  margin: 0;
  box-sizing: border-box;
  text-align: left;
}
.guests-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: start; }
.guest-col { display: flex; flex-direction: column; gap: 28px; }
.orbit-card { position: relative; height: 460px; }
.orbit-photo-wrap { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -52%); width: 240px; height: 240px; border-radius: 50%; overflow: hidden; box-shadow: 0 8px 32px rgba(42,37,32,.13), 0 2px 8px rgba(42,37,32,.06); z-index: 2; }
.orbit-photo { width: 100%; height: 100%; object-fit: cover; display: block; }
.orbit-ring { position: absolute; top: 50%; left: 50%; width: 276px; height: 276px; transform: translate(-50%, -54%); border-radius: 50%; border: 1px solid #bfb5a8; opacity: .3; z-index: 1; pointer-events: none; animation: rotateSlow 40s linear infinite; }
.orbit-ring::before { content: ''; position: absolute; inset: -1px; border-radius: 50%; border: 1px dashed #bfb5a8; opacity: .4; }
.orbit-connectors { position: absolute; inset: 0; pointer-events: none; z-index: 1; overflow: visible; }
.orbit-connectors line { stroke: #bfb5a8; stroke-width: 1; stroke-dasharray: 4 5; opacity: .45; }
.orbit-name { position: absolute; top: 58px; left: 0; background: #fff; border-radius: 16px; padding: 14px 18px; box-shadow: 0 2px 12px rgba(42,37,32,.07), 0 1px 3px rgba(42,37,32,.04); z-index: 3; animation: floatA 7s ease-in-out infinite; }
.orbit-name .on-name { font-family: var(--serif); font-size: 16px; font-weight: 500; display: block; margin-bottom: 4px; color: var(--text); }
.orbit-name .on-meta { font-size: 11.5px; color: #9c9490; letter-spacing: .02em; }
.orbit-pattern { position: absolute; top: 44px; right: 0; background: #fff; border-radius: 16px; padding: 14px 18px; box-shadow: 0 2px 12px rgba(42,37,32,.07), 0 1px 3px rgba(42,37,32,.04); z-index: 3; min-width: 170px; animation: floatB 8s ease-in-out infinite; }
.orbit-pattern .op-label { font-size: 9.5px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: #9c9490; margin-bottom: 9px; }
.orbit-pattern ul { list-style: none; display: flex; flex-direction: column; gap: 6px; }
.orbit-pattern li {
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--text);
  display: flex;
  align-items: center;
  gap: 7px;
}
.orbit-pattern li::before { content: ''; width: 4px; height: 4px; border-radius: 50%; background: #8b7355; flex-shrink: 0; opacity: .7; }
.orbit-pattern li strong { font-weight: 500; color: #8b7355; }
.orbit-signals {
  position: absolute;
  bottom: 122px;
  left: 0;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  align-content: flex-start;
  gap: 7px 8px;
  row-gap: 8px;
  max-width: min(100%, 280px);
  z-index: 3;
  animation: floatC 6s ease-in-out infinite;
}
.orbit-signals .os-label,
.orbit-triggers .os-label {
  flex: 1 0 100%;
  width: 100%;
  font-size: 9.5px;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #9c9490;
  margin-bottom: 6px;
}
.orbit-signals .os-label {
  padding-left: 2px;
  text-align: left;
}
.orbit-triggers .os-label {
  padding-right: 2px;
  padding-left: 0;
  text-align: right;
}
.orbit-pill {
  background: #ede8e1;
  border: 1px solid rgba(191,181,168,.5);
  border-radius: 100px;
  padding: 5px 12px;
  font-size: 12.5px;
  color: var(--text);
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  flex: 0 1 auto;
}
.orbit-triggers {
  position: absolute;
  bottom: 64px;
  right: 0;
  left: auto;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  align-content: flex-start;
  justify-content: flex-end;
  gap: 7px 8px;
  row-gap: 8px;
  max-width: min(100%, 280px);
  z-index: 5;
  animation: floatC 6s ease-in-out infinite;
}
.orbit-trigger-badge {
  background: #3d5a6e;
  color: #fff;
  border-radius: 100px;
  padding: 7px 14px;
  font-size: 12.5px;
  font-weight: 500;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 1 auto;
  text-align: center;
}
.orbit-trigger-badge.secondary { background: rgba(61,90,110,.6); font-weight: 400; font-size: 12.5px; }
.guest-email {
  font-family: var(--serif);
  background: #f9f7f4;
  border: 1px solid rgba(191,181,168,.3);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 2px 12px rgba(42,37,32,.07), 0 1px 3px rgba(42,37,32,.04);
}
/* Body stack forces DM Sans on .ge-text p — restore Cormorant for the whole mockup */
.guest-email .ge-text p {
  font-family: var(--serif);
}
.ge-chrome { display: flex; align-items: center; gap: 8px; padding: 12px 18px; border-bottom: 1px solid rgba(191,181,168,.22); background: rgba(255,255,255,.55); }
.ge-dot { width: 9px; height: 9px; border-radius: 50%; background: #bfb5a8; opacity: .6; }
.ge-from {
  font-size: max(13px, calc(var(--body-size) * 0.88));
  color: #9c9490;
  margin-left: 8px;
  letter-spacing: .02em;
}
.ge-bar { padding: 16px 20px 12px; border-bottom: 1px solid rgba(191,181,168,.18); background: rgba(255,255,255,.35); }
.ge-bar-to {
  font-size: max(13px, calc(var(--body-size) * 0.88));
  color: #9c9490;
  margin-bottom: 6px;
}
.ge-bar-subject {
  font-family: var(--serif);
  font-size: calc(var(--body-size) * 1.2);
  font-weight: 500;
  line-height: 1.35;
  color: var(--text);
}
.ge-body { padding: 22px 20px 20px; }
.ge-text p { margin-bottom: 10px; max-width: none; }
.ge-text .hl { background: rgba(139,115,85,.11); border-radius: 3px; padding: 0 3px; color: #8b7355; font-weight: 500; }
.ge-cta { margin-top: 8px; margin-bottom: 6px; }
.ge-cta--stack {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
}
.ge-cta--stack .ge-cta-btn {
  width: fit-content;
  max-width: 100%;
  text-align: center;
}
.ge-cta-btn {
  display: inline-block;
  padding: 9px 16px;
  border-radius: 100px;
  background: #3d5a6e;
  color: #fff;
  font-size: max(13px, calc(var(--body-size) * 0.8));
  letter-spacing: .04em;
  text-transform: uppercase;
  font-weight: 500;
}
.ge-cta-btn--secondary {
  background: #ede8e1;
  color: var(--text);
}
.ge-sig {
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px solid rgba(191,181,168,.22);
  font-size: max(14px, calc(var(--body-size) * 0.94));
  color: #9c9490;
  letter-spacing: .02em;
}
.guests-anchor { margin-top: 48px; text-align: center; padding-bottom: 24px; }
.guests-anchor-line { font-style: normal; margin: 0 auto 10px; max-width: 520px; }
.guests-anchor-note { color: #9c9490; letter-spacing: .04em; max-width: none; }
@keyframes rotateSlow { from { transform: translate(-50%, -54%) rotate(0deg); } to { transform: translate(-50%, -54%) rotate(360deg); } }
@keyframes floatA { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
@keyframes floatB { 0%,100% { transform: translateY(0); } 50% { transform: translateY(8px); } }
@keyframes floatC { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }

/* ─── Stats ───────────────────────────────────────────────────────────────── */
.stats {
  padding: var(--section-pad-y) var(--page-gutter);
  display: grid;
  grid-template-columns: 1fr 1px 1fr 1px 1fr;
  max-width: 1100px;
  margin: 0 auto;
  background: var(--bg);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.stat-div { background: var(--line); }
.stat-item { padding: 0 var(--page-gutter); display: flex; flex-direction: column; gap: 10px; }
.stat-item:first-child { padding-left: 0; }
.stat-item:last-child { padding-right: 0; }
.stat-n {
  font-family: 'Cormorant Garamond', serif;
  font-size: 44px;
  font-weight: 500;
  color: var(--text);
  line-height: 1;
}
.stat-label { max-width: 240px; }
.stat-label strong { color: var(--text); font-weight: 500; display: block; margin-bottom: 4px; }

/* ─── Proof strip (stats only) ───────────────────────────────────────────── */
.proof {
  padding: var(--section-pad-y) 0;
  background: linear-gradient(180deg, #f7faf9 0%, #ffffff 65%);
  border-top: 2px solid var(--yellow);
  border-bottom: 1px solid var(--line);
}
.proof-inner {
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 var(--page-gutter);
}
.intel-section .proof-inner { padding-top: 14px; }
.proof-intro { margin: 0 0 28px; } /* retain hook if used later */
.proof-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}
.proof-stat {
  padding: 24px 18px 22px;
  border: 1px solid var(--line);
  background: var(--accent-yellow-bg);
  position: relative;
}
.proof-stat::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--yellow);
}
.proof-stat:nth-child(2) { background: var(--accent-yellow-bg); }
.proof-stat:nth-child(3) { background: var(--accent-yellow-bg); }
.proof-stat:nth-child(4) { background: var(--accent-yellow-bg); }
.proof-stat:nth-child(2)::before { background: var(--yellow); }
.proof-stat:nth-child(3)::before { background: var(--yellow); }
.proof-stat:nth-child(4)::before { background: var(--yellow); }
.proof-stat-l {
  max-width: 240px;
  line-height: 1.32;
}
.proof-note {
  font-size: 11px;
  line-height: 1.55;
  color: var(--muted);
  margin: 14px 0 0;
  max-width: none;
}

/* ─── Saisonist CSS additions (v8 diff) ─────────────────────────────────────
   These rules extend style.css. Link AFTER the main stylesheet.
   (Step mockups are now demo screenshots; old HTML mockup styles removed.)
──────────────────────────────────────────────────────────────────────────── */

/* ─── How (five steps + mockups) ───────────────────────────────────────────── */
.how-section { padding: var(--section-pad-y) 0; border-top: 1px solid var(--line); background: var(--warm); }
.how-section-inner { max-width: 1120px; margin: 0 auto; padding: 0 var(--page-gutter); }
.how-section .section-header { margin-bottom: 56px; }
.how-section-h { max-width: 560px; }

.how-section .step {
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: 64px;
  align-items: start;
  padding: 48px 0;
  border-top: 1px solid var(--line);
}
.how-section .step:last-child { border-bottom: 1px solid var(--line); }
.how-section .step-left { position: sticky; top: 40px; }
.how-section .step-num-row { display: flex; align-items: baseline; gap: 16px; margin-bottom: 16px; }
.how-section .step-eyebrow { font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--accent-blue); font-weight: 500; margin-bottom: 0; }
.how-section .step-title-main,
.how-section .step-title {
  all: unset;
  display: block;
  font-family: var(--serif) !important;
  font-size: calc(var(--section-subhead-size) * 0.9);
  font-weight: 400;
  color: var(--text);
  line-height: var(--section-subhead-lh);
  margin-bottom: 8px;
  font-style: normal;
  letter-spacing: var(--section-subhead-track);
}
.how-section .step-title-em {
  all: unset;
  display: block;
  font-family: 'Cormorant Garamond', serif !important;
  font-size: calc(var(--section-subhead-size) * 0.9 * 0.875);
  font-weight: 400;
  font-style: italic;
  color: var(--accent-blue);
  line-height: var(--section-subhead-lh);
  margin-bottom: 24px;
  letter-spacing: var(--section-subhead-track);
}
/* Hard override: keep step titles in serif + subhead scale */
body .how-section .step-left .step-title-main,
body .how-section .step-left .step-title {
  font-family: var(--serif) !important;
  font-size: calc(var(--section-subhead-size) * 0.9) !important;
  font-weight: 400 !important;
  font-style: normal !important;
  line-height: var(--section-subhead-lh) !important;
  letter-spacing: var(--section-subhead-track) !important;
  font-variant: normal !important;
  text-transform: none !important;
}
body .how-section .step-left .step-title-em {
  font-family: 'Cormorant Garamond', serif !important;
  font-size: calc(var(--section-subhead-size) * 0.9 * 0.875) !important;
  font-weight: 400 !important;
  font-style: italic !important;
  line-height: var(--section-subhead-lh) !important;
  letter-spacing: var(--section-subhead-track) !important;
  font-variant: normal !important;
  text-transform: none !important;
}

/* Match subsection scale (e.g. “Precise guest profiles” KPI headline) */
.precise-guest-profiles {
  font-family: 'Cormorant Garamond', serif !important;
  font-size: var(--section-subhead-size) !important;
  font-weight: 500 !important;
  line-height: var(--section-subhead-lh) !important;
  letter-spacing: var(--section-subhead-track) !important;
  color: var(--text) !important;
}
/* Step mockups: demo screenshots — cap at native width so they don’t scale up and go soft */
.how-section .step-mockup { overflow: visible; }
.how-section .step-tablet-frame {
  display: inline-block;
  max-width: 100%;
  background: #1a1a1a;
  border-radius: 14px;
  padding: 5px;
  box-shadow: 0 0 0 1px rgba(0,0,0,.15), 0 8px 32px rgba(0,0,0,.18);
}
.how-section .step-tablet-screen {
  overflow: hidden;
  border-radius: 8px;
  background: #fff;
  max-width: 980px;
}
.how-section .step-tablet-screen img {
  width: 100%;
  max-width: 980px;
  height: auto;
  display: block;
}

/* ─── Mid-CTA (free first campaign) — image strip + full-bleed blue content band ─ */
.how-cta {
  background: var(--bg);
}
/* Aspirational strip above CTA — full width; blue band is only .how-cta-inner */
.how-cta-strip {
  height: 160px;
  width: 100%;
  background: url('../images/saisonist-direct-booking-for-boutique-hoteliers.png') center 62% / cover no-repeat;
  opacity: 0.85;
}
@media (min-width: 769px) {
  .how-cta-strip { height: 280px; }
}
.how-cta-inner {
  max-width: none;
  width: 100%;
  margin: 0 auto;
  padding: 44px var(--page-gutter) 48px;
  background: var(--accent-blue);
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0;
}
.how-cta-h { margin: 0 0 14px; max-width: 560px; }
.how-cta-lead {
  max-width: 520px;
  margin: 0 0 24px;
}
.how-cta-actions { margin-bottom: 14px; }
.how-cta-meta {
  font-size: var(--cta-reassure-size);
  font-weight: 400;
  letter-spacing: 0.01em;
  text-transform: none;
  color: rgba(255, 255, 255, 0.72);
  margin: 0;
  max-width: 480px;
  line-height: 1.5;
}
/* Same look as nav “Let’s talk” so the CTA feels familiar and consistent */
.how-cta-link {
  padding: 11px 24px;
  background: var(--yellow);
  color: var(--text);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: .04em;
  border: none;
  text-decoration: none;
  display: inline-block;
  transition: background .15s;
  font-family: 'DM Sans', sans-serif;
}
.how-cta-link:hover { background: var(--yellow-lt); }

/* Mid-CTA progressive form layout (dates -> email -> submit API) */
.mid-cta-form {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

#mid-cta-step-1,
#mid-cta-step-2 {
  width: 100%;
  max-width: 640px;
}

#mid-cta-dates {
  width: 100%;
  max-width: 640px;
  display: flex;
  gap: 12px;
  justify-content: center;
  align-items: flex-end;
}

#mid-cta-step-2 .mid-cta-step2-row {
  width: 100%;
  display: flex;
  gap: 12px;
  align-items: flex-start;
}

#mid-cta-step-2 .mid-cta-step2-row > * {
  flex: 1;
}

#mid-cta-dates .mid-cta-date-field {
  flex: 1;
}

/* Override inline max-width so both inputs can share the row */
#mid-cta-dates input,
.mid-cta-house-field input,
#mid-cta-email-wrap input {
  max-width: none !important;
}

#mid-cta-form input,
#mid-cta-form button {
  font-family: 'DM Sans', sans-serif;
}

/* Make input visuals consistent with the rest of the site (override inline styles). */
#mid-cta-form input {
  background: rgba(0, 0, 0, .22) !important;
  border: 1px solid rgba(255, 255, 255, .18) !important;
  border-radius: 0 !important;
  padding: 14px 16px !important;
  min-height: 52px;
  font-size: var(--body-size) !important;
  font-weight: var(--body-weight) !important;
  letter-spacing: .01em !important;
  color: rgba(255,255,255,.92) !important;
  outline: none !important;
  transition: border-color .15s, box-shadow .15s, background .15s;
}

#mid-cta-form input::placeholder {
  color: rgba(255, 255, 255, .55);
}

#mid-cta-form input:focus {
  border-color: rgba(255, 255, 255, .45) !important;
  box-shadow: none !important;
  background: rgba(0, 0, 0, .28) !important;
}

#mid-cta-form label {
  display: block !important;
  font-size: 11px !important;
  font-weight: 400 !important;
  letter-spacing: .12em !important;
  text-transform: uppercase !important;
  color: rgba(255,255,255,.82) !important;
  margin: 0 0 6px !important;
}

#mid-cta-form input[type="date"] {
  appearance: none;
  -webkit-appearance: none;
  padding: 10px 12px !important;
  min-height: 42px;
  font-size: var(--body-size) !important;
  font-weight: var(--body-weight) !important;
  line-height: var(--body-lh);
}

/* Try to keep the date picker icon subtle + light. (Supported in modern WebKit/Chromium.) */
#mid-cta-form input[type="date"]::-webkit-calendar-picker-indicator {
  filter: invert(1);
  opacity: .55;
  cursor: pointer;
  padding: 4px;
  transform: scale(0.92);
  transform-origin: right center;
}
#mid-cta-form input[type="date"]::-webkit-calendar-picker-indicator:hover {
  opacity: .8;
}

/* Anchor offset: fixed nav (~58px) + room — #mid-cta = top of image strip + blue CTA block */
#mid-cta,
#mid-cta-form {
  scroll-margin-top: 84px;
}

.mid-cta-house-field {
  width: 100%;
  max-width: 640px;
}

#mid-cta-email-wrap,
#mid-cta-status {
  width: 100%;
  max-width: 640px;
}

.mid-cta-email-field {
  width: 100%;
}

.mid-cta-submit {
  margin-top: 14px;
}

.mid-cta-actions-row {
  width: 100%;
  max-width: 640px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
  margin-top: 14px;
}
.mid-cta-actions-row[hidden] { display: none !important; }

.mid-cta-actions-row .mid-cta-submit {
  margin-top: 0;
}

.mid-cta-actions-row .mid-cta-submit,
.mid-cta-actions-row .mid-cta-change-dates {
  min-height: 44px;
  box-sizing: border-box;
}

.mid-cta-actions-row .mid-cta-submit {
  border: 1px solid transparent;
}

.mid-cta-change-dates {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 11px 24px;
  border-radius: 0;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(125, 163, 166, .42);
  color: rgba(255,255,255,.92);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: .04em;
  text-transform: none;
  cursor: pointer;
  transition: background .15s, border-color .15s, opacity .15s;
  white-space: nowrap;
}
.mid-cta-change-dates[hidden] { display: none !important; }
.mid-cta-change-dates:hover {
  background: rgba(125, 163, 166, .55);
  border-color: rgba(255,255,255,.26);
}
.mid-cta-change-dates:disabled { opacity: .55; cursor: default; }

.mid-cta-status {
  margin-top: 10px;
  font-size: 11px;
  font-weight: 400;
  color: rgba(255, 255, 255, .88);
  line-height: 1.5;
  text-align: center;
  min-height: 18px;
}

.mid-cta-success {
  padding-top: 10px;
}
.mid-cta-success-title {
  font-family: var(--serif);
  font-size: 22px;
  font-weight: 400;
  line-height: 1.25;
  color: var(--yellow);
}
.mid-cta-success-spacer {
  height: 12px;
}
.mid-cta-success-sub { margin-bottom: 10px; }
.mid-cta-success-contact a {
  color: var(--yellow);
  text-decoration: none;
  border-bottom: 1px solid rgba(231, 210, 108, .55);
  padding-bottom: 2px;
}
.mid-cta-success-contact a:hover {
  border-bottom-color: rgba(231, 210, 108, .85);
}

@media (max-width: 600px) {
  #mid-cta-dates {
    flex-direction: column;
    gap: 10px;
    align-items: stretch;
  }

  #mid-cta-step-2 .mid-cta-step2-row {
    flex-direction: column;
    gap: 10px;
    align-items: stretch;
  }

  .mid-cta-actions-row {
    flex-direction: column;
    align-items: stretch;
  }
}

/* ─── Setup (the setup) ───────────────────────────────────────────────────── */
#setup { padding: var(--section-pad-y) 0; background: var(--warm); border-top: 1px solid var(--border); }
.setup-inner { max-width: 1120px; margin: 0 auto; padding: 0 var(--page-gutter); }
.setup-hdr { text-align: center; max-width: 560px; margin: 0 auto 56px; }
.setup-h { margin-bottom: 16px; }
.setup-grid { display: grid; grid-template-columns: repeat(3, 1fr); border: 1px solid var(--border); }
.setup-item { padding: 28px; border-right: 1px solid var(--border); background: #fff; position: relative; }
.setup-item .setup-num {
  margin-bottom: 26px;
}
.setup-item .setup-title {
  margin-bottom: 0;
}
.setup-item .setup-body {
  margin-top: 10px;
}
.setup-item:last-child { border-right: none; }
.setup-item::after { content: ''; position: absolute; bottom: 0; left: 0; width: 28px; height: 2px; background: var(--accent-blue); }
.setup-num,
.opt-letter,
.how-section .step-num-big {
  font-family: var(--serif);
  font-size: 24px;
  line-height: 1;
  color: var(--accent-blue);
  letter-spacing: .02em;
  font-weight: 500;
}
.setup-num,
.opt-letter {
  margin-bottom: 10px;
}
.setup-time { display: grid; grid-template-columns: repeat(3, 1fr); border: 1px solid var(--border); border-top: none; }
.time-item { padding: 16px 28px; border-right: 1px solid var(--border); display: flex; align-items: center; gap: 12px; background: #fff; }
.time-item:last-child { border-right: none; }
.time-val { font-family: var(--serif); font-size: 22px; font-weight: 300; color: var(--accent-blue); flex-shrink: 0; }
.time-label { font-size: 11px; font-weight: 300; color: var(--mid); line-height: 1.4; }
.team-strip { padding: 22px 28px; border: 1px solid var(--yellow-lt); border-top: 2px solid var(--yellow); background: var(--yellow-bg); display: flex; align-items: center; justify-content: center; gap: 16px; margin-top: 0; }
.f-avs { display: flex; flex-shrink: 0; }
.f-av { width: 38px; height: 38px; border-radius: 50%; background: var(--accent-blue-bg); border: 2px solid #fff; display: flex; align-items: center; justify-content: center; font-family: var(--serif); font-size: 16px; color: var(--accent-blue); }
.f-av:last-child { margin-left: -10px; }
.team-text {
  text-align: center;
  margin: 0 auto;
  max-width: min(56rem, 100%);
}
.team-text strong { color: var(--text); font-weight: 500; }

/* ─── Scenarios ───────────────────────────────────────────────────────────── */
.scenarios { padding: var(--section-pad-y) var(--page-gutter); background: var(--bg); }
.scenarios-inner { max-width: 1100px; margin: 0 auto; }
.sc-head {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: end;
  margin-bottom: 56px;
}
.scenarios-h {
  margin-top: 12px;
}
.scenarios-h em { font-style: italic; }
.sc-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border-top: 1px solid var(--line);
  margin-bottom: 0;
}
.sc-card {
  background: var(--bg);
  padding: 40px 32px;
  border-right: 1px solid var(--line);
}
.sc-card:last-child { border-right: none; }
.sc-card .sc-reveal { opacity: 1; transform: none; }
.sc-card-img { width: 100%; height: 180px; object-fit: cover; margin-bottom: 24px; }
.sc-tag { font-size: 13px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); margin-bottom: 12px; }
.sc-quote {
  font-family: 'Cormorant Garamond', serif;
  font-size: 20px;
  font-style: italic;
  font-weight: 400;
  line-height: 1.5;
  color: var(--text);
  margin-bottom: 12px;
}
.sc-bar {
  background: var(--bg);
  padding: 28px 0;
  border-top: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}
.sc-bar-text { font-family: 'Cormorant Garamond', serif; font-size: 18px; font-style: italic; color: var(--muted); }
.sc-bar-cta { font-size: 13px; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 500; color: var(--accent-blue); border-bottom: 2px solid var(--accent-blue); padding-bottom: 2px; }
.sc-bar-cta::after { content: ''; }
.sc-bar-cta:hover { opacity: 0.7; }

/* ─── OTA ─────────────────────────────────────────────────────────────────── */
.ota { padding: var(--section-pad-y) var(--page-gutter); background: #ffffff; }
.ota-inner { max-width: 1100px; margin: 0 auto; }
.ota-h {
  margin: 12px 0 16px;
  max-width: 560px;
}
.ota-h em { font-style: italic; }
.ota-sub { margin-bottom: 48px; max-width: 480px; }
.ota-cols {
  border-top: 1px solid var(--line);
  margin-bottom: 0;
}
.ota-table-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: start;
  border-bottom: 1px solid var(--line);
}
.ota-table-row:last-child { border-bottom: none; }
.ota-table-head .ota-cell { padding: 28px var(--page-gutter) 24px; }
.ota-cell {
  background: #ffffff;
  padding: 24px var(--page-gutter);
  border-right: 1px solid var(--line);
}
.ota-cell:last-child { border-right: none; }
.ota-cell.good { background: var(--accent-yellow); }
.ota-col-head { font-size: 13px; letter-spacing: 0.12em; text-transform: uppercase; margin-bottom: 0; font-weight: 500; color: var(--muted); }
.ota-row {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 0;
  border: none;
}
.ota-ico { font-size: 14px; flex-shrink: 0; line-height: 1; margin-top: 2px; color: var(--muted); }
.ota-row strong { display: block; font-size: 16px; font-weight: 500; color: var(--text); margin-bottom: 4px; }
.ota-cell.good .ota-ico { color: var(--text); }
.ota-verdict {
  background: #ffffff;
  color: var(--text);
  padding: 28px 0;
  border-top: 1px solid var(--line);
  display: flex;
  align-items: center;
  gap: 24px;
}
.ov-label { font-size: 13px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); white-space: nowrap; font-weight: 500; }
.ov-text { font-family: 'Cormorant Garamond', serif; font-size: 20px; font-style: italic; font-weight: 400; color: var(--text); line-height: 1.5; }
.ota-stats { margin-top: 48px; padding-top: 32px; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 16px; }
.ota-stat-n { font-family: 'Cormorant Garamond', serif; font-weight: 500; }

/* ─── About ───────────────────────────────────────────────────────────────── */
.about { padding: var(--section-pad-y) var(--page-gutter); background: var(--bg); border-top: 1px solid var(--line); }
.about-inner { max-width: 640px; margin: 0 auto; }
.about-p { margin-bottom: 14px; }
.about-p:last-of-type { margin-bottom: 0; }

/* ─── FAQ ─────────────────────────────────────────────────────────────────── */
#faq { padding: var(--section-pad-y) 0; background: var(--bg); border-top: 1px solid var(--border); }
.faq-inner { max-width: 700px; margin: 0 auto; padding: 0 var(--page-gutter); }
.faq-hdr { text-align: center; max-width: 500px; margin: 0 auto 56px; }
.faq-hdr h2 { margin-bottom: 0; }
.faq-list { max-width: 700px; margin: 0 auto; }
.faq-item { border-bottom: 1px solid var(--border); }
.faq-item:first-child { border-top: 1px solid var(--border); }
.faq-q {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 0;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  font: inherit;
}
/* Serif questions: scaled past body for x-height; weight + tracking + lh read more editorial / “premium” */
.faq-qt {
  font-family: var(--serif);
  font-size: calc(var(--body-size) * 1.22);
  font-weight: 500;
  line-height: 1.28;
  letter-spacing: -0.025em;
  color: var(--text);
  transition: color 0.15s;
}
.faq-q:hover .faq-qt { color: var(--accent-blue); }
.faq-icon { font-size: 20px; color: var(--mid); flex-shrink: 0; transition: transform .25s, color .15s; font-weight: 300; line-height: 1; }
.faq-item.open .faq-icon { transform: rotate(45deg); color: var(--accent-blue); }
.faq-a { max-height: 0; overflow: hidden; transition: max-height .35s ease, padding .25s ease; }
.faq-item.open .faq-a { max-height: 1200px; padding-bottom: 20px; }
.faq-a em { font-style: italic; color: var(--text); }
.faq-a a { color: var(--accent-blue); text-decoration: underline; text-underline-offset: 2px; }

/* ─── CTA (accent blue background) ─────────────────────────────────────────── */
#start { padding: var(--section-pad-y) 0; background: var(--accent-blue); position: relative; overflow: hidden; }
#start::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 80% 35%, rgba(231, 210, 108, .09) 0%, transparent 55%),
    radial-gradient(circle at 15% 65%, rgba(255, 255, 255, .04) 0%, transparent 50%);
  pointer-events: none;
}
.cta-inner { max-width: none; margin: 0 auto; padding: 0; text-align: center; position: relative; }
.cta-h { margin-bottom: 18px; }
.cta-sub { max-width: 720px; margin: 0 auto 40px; }
/* Two lines on wider viewports; single flow on phones */
.cta-sub-br { display: none; }
@media (min-width: 769px) {
  .cta-sub-br { display: inline; }
}
.cta-form { display: flex; max-width: 400px; margin: 0 auto 10px; justify-content: center; }
.cta-form-with-photo { align-items: center; gap: 16px; max-width: none; }
.cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 14px 22px;
  background: var(--yellow);
  color: var(--text);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: .04em;
  border: none;
  cursor: pointer;
  transition: background .15s, gap .15s;
  white-space: nowrap;
  text-decoration: none;
  font-family: inherit;
}
.cta-btn:hover { background: var(--yellow-lt); gap: 10px; }
/* Same content column as .cta-sub (720px); text centered in that container */
.cta-note {
  font-size: var(--cta-reassure-size);
  font-weight: 400;
  letter-spacing: 0.01em;
  color: rgba(255, 255, 255, .85);
  line-height: 1.5;
  max-width: 720px;
  margin: 0 auto 48px;
  text-align: center;
}
.cta-founders { display: flex; align-items: center; gap: 16px; justify-content: center; flex-wrap: wrap; text-align: center; }
.cta-alessa-photo-wrap { flex-shrink: 0; width: 56px; height: 56px; border-radius: 50%; overflow: hidden; background: rgba(255,255,255,.15); border: 2px solid rgba(255,255,255,.2); }
.cta-alessa-photo { width: 100%; height: 100%; object-fit: cover; object-position: center 25%; }
.cta-alessa-text { margin: 0; max-width: 280px; }

/* ─── Impressum page ───────────────────────────────────────────────────────── */
.impressum-page { padding: 120px var(--page-gutter) 80px; border-top: 3px solid var(--accent-blue); }
.impressum-inner { max-width: 680px; margin: 0 auto; }
.impressum-title {
  font-family: var(--serif);
  font-size: var(--section-head-size);
  line-height: var(--section-head-lh);
  letter-spacing: var(--section-head-track);
  font-weight: 400;
  color: var(--text);
  margin-bottom: 12px;
}
.impressum-intro { margin-bottom: 40px; letter-spacing: .04em; }
.impressum-block {
  margin-bottom: 40px;
  padding-bottom: 32px;
  border-bottom: 1px solid var(--line);
}
.impressum-block:last-child { border-bottom: none; }
.impressum-block p { margin-bottom: 12px; max-width: none; }
.impressum-block a { color: var(--accent-blue); }
.impressum-block a:hover { text-decoration: underline; }
.agb-draft-notice { font-size: 0.9rem; color: var(--muted); font-style: italic; margin-bottom: 24px; line-height: 1.5; }
.impressum-block .agb-table { width: 100%; border-collapse: collapse; margin: 16px 0 24px; font-size: 0.95rem; line-height: 1.45; }
.impressum-block .agb-table th,
.impressum-block .agb-table td { border: 1px solid var(--line); padding: 10px 12px; text-align: left; vertical-align: top; }
.impressum-block .agb-table th { background: var(--warm); font-weight: 500; color: var(--text); }

/* ─── Footer ─────────────────────────────────────────────────────────────────
   1fr auto 1fr: middle column is truly centered (matches CTA above); sides align in/out. */
footer {
  max-width: 1120px;
  margin: 0 auto;
  padding: 28px var(--page-gutter);
  border-top: 1px solid var(--border);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 12px 20px;
  background: var(--bg);
}
.ft-logo {
  font-family: var(--serif);
  font-size: 21px;
  font-weight: 400;
  color: var(--text);
  justify-self: start;
  text-align: left;
  min-width: 0;
}
.ft-note {
  font-size: 13px;
  color: var(--mid);
  justify-self: center;
  text-align: center;
  min-width: 0;
}
.ft-note a { text-decoration: none; }
.ft-note a:hover { text-decoration: underline; }
.ft-photo-credit {
  font-size: 10px;
  color: rgba(111,111,111,.55);
  letter-spacing: .02em;
  justify-self: end;
  text-align: right;
  min-width: 0;
}
.ft-photo-credit a { color: inherit; text-decoration: none; }
.ft-photo-credit a:hover { text-decoration: underline; }

/* ─── Tablet (1024px): same hero setup as desktop, consistent 6% horizontal padding for all sections ─ */
@media (max-width: 1024px) {
  :root {
    --page-gutter: 6%;
    --section-pad-y: 72px;
    --body-size: 19px;
    --section-head-size: 32px;
    --section-subhead-size: 26px;
  }
  .hero { padding-top: 0; }
  .hero-inner { align-items: center; grid-template-columns: 52% 48%; padding: 0 var(--page-gutter); }
  .hero-left { padding: 72px 0 48px 0; }
  .hero-right {
    padding: 72px 0 72px 5%;
    justify-content: flex-start;
    align-items: center;
    overflow: visible;
  }
  .section, #problem, .intel-section, .how-section, #setup, .about, #faq { padding: var(--section-pad-y) var(--page-gutter); }
  #start { padding: var(--section-pad-y) var(--page-gutter); }
  #problem .inner, .how-section-inner, .setup-inner, .faq-inner { max-width: 100%; padding-left: 0; padding-right: 0; }
  .pos-strip, .stats { padding-left: var(--page-gutter); padding-right: var(--page-gutter); }
  .scenarios, .ota, .about { padding-left: var(--page-gutter); padding-right: var(--page-gutter); }
  footer { padding-left: var(--page-gutter); padding-right: var(--page-gutter); }
  .how-cta-inner { padding-left: var(--page-gutter); padding-right: var(--page-gutter); }
  .nav-i { padding-left: var(--page-gutter); padding-right: var(--page-gutter); }
  .how-section .step { grid-template-columns: 1fr 1fr; gap: 40px; padding: 48px 0; }
  h1 { font-size: 58px; }
  .hero h1 { font-size: 44px !important; }
}

/* ─── Tablet narrow (1000px): 2-column step mockups ───────────────────────────── */
@media (max-width: 1000px) {
  .step-mockups { grid-template-columns: repeat(2, 1fr); gap: 28px; }
  .step-mockup { max-width: none; min-height: 480px; }
}

/* ─── 768px: hero stacks — text on top, image container at the bottom (hero-right from 900px + second 768px block) ─ */
@media (max-width: 768px) {
  :root { --page-gutter: 20px; --section-pad-y: 56px; }
  .nav-i { padding-left: var(--page-gutter); padding-right: var(--page-gutter); }
  .hero-inner {
    grid-template-columns: 1fr;
    padding-bottom: 0;
  }
  .hero-left {
    order: 1;
    padding: 104px var(--page-gutter) 48px;
    border-right: none;
    border-bottom: 1px solid var(--line);
  }
  .section, #problem, .intel-section, .how-section, #setup, .about, #faq { padding: var(--section-pad-y) var(--page-gutter); }
  .intel-header { grid-template-columns: 1fr; gap: 32px; margin-bottom: 48px; }
  .intel-proof-head { margin-bottom: 48px; }
  .guests-grid { grid-template-columns: 1fr; gap: 40px; }
  #start { padding: var(--section-pad-y) var(--page-gutter); }
  .sc-grid { grid-template-columns: repeat(2, 1fr); }
  .sc-card { border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
  .sc-card:nth-child(2n) { border-right: none; }
  .sc-card:last-child { border-right: none; }
  .how-section .step { grid-template-columns: 1fr; gap: 36px; padding: 40px 0; }
  .pos-strip { grid-template-columns: 1fr; padding: var(--section-pad-y) var(--page-gutter); }
  .pos-div { display: none; }
  .pos-item { padding: 16px 0; border-right: none; border-bottom: 1px solid var(--line); }
  .pos-item:last-child { border-bottom: none; }
  .stats { grid-template-columns: 1fr; padding: var(--section-pad-y) var(--page-gutter); }
  .stat-div { display: none; }
  .stat-item { padding: 20px 0; border-bottom: 1px solid var(--line); }
  .stat-item:last-child { border-bottom: none; }
  .proof { padding: var(--section-pad-y) 0; }
  .proof-stats { grid-template-columns: 1fr; }
  .proof-stat {
    border-right: 1px solid var(--line);
    padding: 20px 16px;
  }
  .proof-stat:last-child { border-bottom: 1px solid var(--line); }

  /* Intelligence — headline + KPI cards: left-aligned, compact stat rows */
  .intel-section .guests-anchor {
    margin-top: 36px;
    padding-bottom: 16px;
    text-align: left;
  }
  .intel-section .guests-anchor-line {
    margin-left: 0;
    margin-right: 0;
    max-width: none;
    text-align: left;
  }
  .intel-section .guests-anchor-line.precise-guest-profiles {
    font-size: clamp(20px, 4.8vw, 24px) !important;
    line-height: 1.3;
  }
  .intel-section .proof-inner {
    padding-top: 8px;
  }
  .intel-section .proof-stats {
    gap: 10px;
  }
  .intel-section .proof-stat {
    display: grid;
    grid-template-columns: minmax(4.2rem, auto) 1fr;
    align-items: start;
    gap: 10px 14px;
    padding: 16px 16px 18px;
    text-align: left;
    border-right: none;
  }
  .intel-section .proof-stat:last-child {
    border-bottom: 1px solid var(--line);
  }
  .intel-section .proof-stat-n {
    margin-bottom: 0;
  }
  .intel-section .proof-stat-l {
    max-width: none;
  }

}

/* ─── 900px: same hero setup (two columns), rest of page tighter ─ */
@media (max-width: 900px) {
  :root {
    --page-gutter: 20px;
    --section-pad-y: 56px;
    --section-head-size: 30px;
    --section-subhead-size: 24px;
  }
  .nav-i { padding-left: var(--page-gutter); padding-right: var(--page-gutter); }
  h1 { font-size: 44px; }
  .hero h1 { font-size: 42px !important; }
  .section, #problem, .intel-section, .how-section, .scenarios, #setup, .about, #faq { padding: var(--section-pad-y) var(--page-gutter); }
  /* Hero stacks at 900px — mobile hero: centered tablet, full card visible (match reference) */
  .hero-inner { grid-template-columns: 1fr; padding-left: 0; padding-right: 0; padding-bottom: 0; }
  .hero-left { order: 1; padding: 112px var(--page-gutter) 48px; border-right: none; border-bottom: 1px solid var(--line); }
  .hero-right {
    order: 2;
    padding: 32px var(--page-gutter);
    justify-content: center;
    align-items: center;
    /* allow hero float cards to overlap + extend slightly past the photo */
    overflow: visible;
  }
  #setup { padding: var(--section-pad-y) var(--page-gutter); }
  .setup-inner { padding: 0 var(--page-gutter); }
  .setup-hdr { margin-bottom: 40px; }
  .setup-grid { grid-template-columns: 1fr; }
  .setup-item { border-right: none; border-bottom: 1px solid var(--border); padding: 24px; }
  .setup-item:last-child { border-bottom: none; }
  .setup-time { grid-template-columns: 1fr; }
  .time-item { border-right: none; border-bottom: 1px solid var(--border); }
  .time-item:last-child { border-bottom: none; }
  .team-strip { flex-direction: column; align-items: center; padding: 20px var(--page-gutter); gap: 12px; }
  .ota-cols { display: flex; flex-direction: column; }
  .ota-table-row { display: contents; }
  .ota-cell.bad { order: 0; }
  .ota-cell.good { order: 1; }
  .hero-quote { padding: 20px var(--page-gutter); }
  .hero-pos { grid-template-columns: 1fr; margin-top: 40px; padding-top: 28px; }
  .hero-pos .pos-item { padding: 16px 0; border-right: none; border-bottom: 1px solid var(--line); }
  .hero-pos .pos-item:last-child { border-bottom: none; }
  .pos-strip { grid-template-columns: 1fr; padding: var(--section-pad-y) var(--page-gutter); }
  .pos-div { display: none; }
  .pos-item { padding: 20px 0; border-bottom: 1px solid var(--line); }
  .pos-item:last-child { border-bottom: none; }
  #problem .inner { max-width: none; padding: 0 var(--page-gutter); }
  .options { grid-template-columns: 1fr; }
  .opt { padding: 24px 0; border-right: none; border-bottom: 1px solid var(--border); }
  .opt:nth-child(odd),
  .opt:nth-child(even) { padding-left: 0; padding-right: 0; }
  .opt:nth-child(3), .opt:nth-child(4) { border-bottom: 1px solid var(--border); }
  .built-i { flex-direction: column; padding: 0 var(--page-gutter); }
  .stats { grid-template-columns: 1fr; padding: var(--section-pad-y) var(--page-gutter); }
  .stat-div { display: none; }
  .stat-item { padding: 24px 0; border-bottom: 1px solid var(--line); }
  .stat-item:last-child { border-bottom: none; }
  .how-section .section-header, .sc-head { grid-template-columns: 1fr; gap: 32px; }
  .how-section .step { grid-template-columns: 1fr; gap: 32px; padding: 48px 0; }
  .how-section .step-left { position: static; }
  .steps { grid-template-columns: 1fr; }
  .step { border-right: none; border-bottom: 1px solid var(--line); }
  .step:last-child { border-bottom: none; }
  .sc-grid { grid-template-columns: 1fr; }
  .sc-card { border-right: none; border-bottom: 1px solid var(--line); }
  .sc-card:last-child { border-bottom: none; }
  .sc-bar { flex-direction: column; align-items: flex-start; padding: 24px 0; }
  .ota-cell { border-right: none; border-bottom: 1px solid var(--line); padding-left: var(--page-gutter); padding-right: var(--page-gutter); }
  .ota-cell:last-child { border-bottom: none; }
  #start { padding: var(--section-pad-y) var(--page-gutter); }
  .cta-inner { padding: 0 var(--page-gutter); }
  .cta-founders { flex-direction: column; align-items: center; gap: 12px; text-align: center; }
  .cta-alessa-text { max-width: 100%; }
  .cta-btn { min-height: 44px; padding: 12px 20px; justify-content: center; }
  .faq-q { padding: 18px 0; min-height: 44px; align-items: center; }
  footer {
    display: flex;
    flex-direction: column;
    text-align: center;
    padding: 24px var(--page-gutter);
    gap: 8px;
  }
  .ft-logo,
  .ft-note,
  .ft-photo-credit {
    justify-self: auto;
    text-align: center;
  }
  .nav-links a:not(.nav-cta) { display: none; }
  .nav-cta { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }
  .hero-proof { flex-wrap: wrap; gap: 24px; }
  .step-mockups { grid-template-columns: 1fr; gap: 40px; margin-top: 40px; padding-top: 40px; }
  .step-mockup { max-width: none; min-height: auto; }
  .how-cta-inner { padding: 36px var(--page-gutter) 40px; }
  .how-cta-link { justify-content: center; }
  .how-section-inner { padding-left: var(--page-gutter); padding-right: var(--page-gutter); }
}

/* Intelligence — orbit: stacked layout + wrap only on narrow phones (not tablet) */
@media (max-width: 767px) {
  .intel-section .orbit-card {
    height: auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    overflow: visible;
    isolation: isolate;
  }
  .intel-section .orbit-connectors,
  .intel-section .orbit-ring {
    display: none;
  }
  .intel-section .orbit-photo-wrap {
    position: relative;
    top: auto;
    left: auto;
    transform: none;
    width: 160px;
    height: 160px;
    margin: 0 auto 0;
    z-index: 5;
  }
  .intel-section .orbit-name {
    position: relative;
    top: auto;
    left: auto;
    animation: none;
    margin: -28px auto 10px;
    max-width: min(100%, 300px);
    width: 100%;
    z-index: 2;
    box-shadow: 0 6px 22px rgba(42, 37, 32, .1);
  }
  .intel-section .orbit-pattern {
    position: relative;
    top: auto;
    right: auto;
    animation: none;
    margin: -14px auto 12px;
    max-width: min(100%, 300px);
    width: 100%;
    min-width: 0;
    z-index: 3;
    box-shadow: 0 6px 22px rgba(42, 37, 32, .1);
  }
  .intel-section .orbit-pattern li {
    font-size: 12.5px;
    line-height: var(--body-lh);
    font-weight: var(--body-weight);
  }
  .intel-section .orbit-signals {
    position: relative;
    bottom: auto;
    left: auto;
    animation: none;
    margin: 6px 0 10px 0;
    z-index: 4;
    max-width: 100%;
    align-items: flex-start;
  }
  .intel-section .orbit-triggers {
    position: relative;
    bottom: auto;
    left: auto;
    right: auto;
    transform: none;
    animation: none;
    margin-top: -4px;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
    max-width: 100%;
    width: 100%;
    z-index: 4;
  }
  .intel-section .orbit-triggers .os-label {
    text-align: left;
    padding-left: 2px;
    padding-right: 0;
  }
  .intel-section .orbit-pill {
    white-space: normal;
    max-width: 100%;
  }
  .intel-section .orbit-trigger-badge {
    white-space: normal;
    text-align: center;
    max-width: 100%;
    width: auto;
    flex: 0 1 auto;
    box-sizing: border-box;
  }
}

@media (max-width: 900px) and (min-width: 769px) {
  .proof-stats { grid-template-columns: repeat(2, 1fr); gap: 10px; }
}

/* ─── Mobile (≤768px): hero stack, centered tablet (match reference) ─ */
@media (max-width: 768px) {
  .hero-inner {
    grid-template-columns: 1fr !important;
    padding-bottom: 0;
  }
  .hero-left {
    order: 1 !important;
    padding: 80px 6% 48px;
    border-right: none;
    border-bottom: 1px solid var(--line);
  }
  .hero-right {
    order: 2 !important;
    padding: 32px 6%;
    justify-content: center;
    align-items: center;
    overflow: visible;
  }
}

/* ─── Small mobile (600px): minimal gutter, compact typography ─ */
@media (max-width: 600px) {
  :root {
    --page-gutter: 18px;
    --section-pad-y: 48px;
    --body-size: 18px;
    --section-head-size: 26px;
    --section-subhead-size: 22px;
  }
  .nav-i { padding-left: var(--page-gutter); padding-right: var(--page-gutter); }
  .hero-inner { padding-left: var(--page-gutter); padding-right: var(--page-gutter); }
  #problem .inner, .how-section-inner, .setup-inner, .faq-inner { padding-left: var(--page-gutter); padding-right: var(--page-gutter); }
  .section, #problem, .intel-section, .how-section, .scenarios, #setup, .about, #faq { padding: var(--section-pad-y) var(--page-gutter); }
  #start { padding: var(--section-pad-y) var(--page-gutter); }
  .pos-strip, .stats { padding-left: var(--page-gutter); padding-right: var(--page-gutter); }
  .proof { padding: var(--section-pad-y) 0; }
  .scenarios, .ota, .about { padding-left: var(--page-gutter); padding-right: var(--page-gutter); }
  footer { padding: 20px var(--page-gutter); }
  .how-cta-inner { padding: 32px var(--page-gutter) 36px; }
  .ota-cell { padding-left: var(--page-gutter); padding-right: var(--page-gutter); }
  h1 { font-size: 40px; }
  .hero h1 { font-size: 40px !important; }
  .hero-left { padding: 96px var(--page-gutter) 40px; }
  .hero-right { padding: 24px var(--page-gutter); justify-content: center; }

  /* Narrow phones — allow hyphenation on long KPI lines */
  .intel-section .proof-stat-l {
    hyphens: auto;
    -webkit-hyphens: auto;
    overflow-wrap: break-word;
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   5. HERO — floating composition responsive
   ══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 1100px) {
  .hero-visual { min-height: 520px; max-width: 540px; }
  .hero-dash-card { width: 78%; max-width: 360px; margin-top: 60px; }
  .hero-float-zero { right: 1%; max-width: 228px; }
  .hero-float-badge { left: 1%; }
}

@media (max-width: 900px) {
  .hero-right { padding: 32px var(--page-gutter) 48px; justify-content: center; }
  /* Less overlap on small screens: top pills sit in a reserved band; campaign follows the photo in flow */
  .hero-visual {
    min-height: 0;
    max-width: min(420px, 100%);
    margin: 0 auto;
    padding: clamp(116px, 31vw, 142px) clamp(12px, 4vw, 20px) clamp(10px, 2.5vw, 20px);
    box-sizing: border-box;
  }
  .hero-float-badge {
    position: absolute;
    top: 12px;
    left: clamp(0px, 0.8vw, 8px);
    max-width: min(198px, 44vw);
    width: auto;
    margin: 0;
    z-index: 4;
  }
  .hero-float-zero {
    position: absolute;
    top: clamp(38px, 8.5vw, 52px);
    right: clamp(0px, 0.8vw, 8px);
    left: auto;
    max-width: min(190px, 43vw);
    width: auto;
    margin: 0;
    z-index: 5;
  }
  .hero-dash-card {
    position: relative;
    width: 76%;
    max-width: 300px;
    margin: 0 auto;
    z-index: 2;
  }
  .hero-float-campaign {
    position: relative;
    bottom: auto;
    right: auto;
    left: auto;
    width: 100%;
    max-width: min(300px, 100%);
    /* Light overlap: card rides slightly onto the bottom of the photo */
    margin: clamp(-14px, -3.2vw, -8px) auto 0;
    z-index: 3;
  }
}

@media (max-width: 600px) {
  .hero-visual {
    padding-top: clamp(108px, 34vw, 130px);
    padding-left: clamp(10px, 4vw, 16px);
    padding-right: clamp(10px, 4vw, 16px);
  }
  .hfz-number { font-size: 20px; }
  .hfz-unit { font-size: 14px; }
  .hfb-campaign { font-size: 15px; }
  .hero-float-badge {
    top: 10px;
    left: clamp(0px, 0.6vw, 6px);
    max-width: min(178px, 42vw);
  }
  .hero-float-zero {
    top: clamp(36px, 8vw, 48px);
    right: clamp(0px, 0.6vw, 6px);
    max-width: min(170px, 40vw);
  }
  .hero-dash-card {
    width: 74%;
    max-width: 268px;
  }
  .hero-float-campaign {
    max-width: min(280px, 100%);
    margin-top: clamp(-12px, -3vw, -6px);
  }
}