/* ============================================================
   Recall Partners — stylesheet
   Structure/layout modeled on eaglerev.io, rebuilt from scratch
   as plain HTML + CSS (no framework, no build step).
   ============================================================ */

/* ---------- Design tokens ---------- */
:root {
  /* Palette — warm med-spa premium */
  --cream:        #FAF6F2;
  --cream-2:      #F4ECE5;
  --surface:      #FFFFFF;

  --ink:          #241C22;
  --ink-2:        #4A3D45;
  --muted:        #7C6C76;

  --plum:         #6B2A47;
  --plum-deep:    #4A1B31;
  --plum-soft:    rgba(107, 42, 71, .08);

  --rose:         #B9825F;
  --rose-soft:    #EBD6C6;

  --line:         rgba(36, 28, 34, .10);
  --line-strong:  rgba(36, 28, 34, .18);

  /* Type */
  --font-serif: "DM Serif Display", "Playfair Display", Georgia, "Times New Roman", serif;
  --font-sans:  "Instrument Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-mono:  "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* Layout */
  --wrap: 1180px;
  --wrap-narrow: 760px;
  --radius: 14px;
  --radius-lg: 20px;

  --shadow-sm: 0 1px 2px rgba(36, 28, 34, .05), 0 4px 14px rgba(36, 28, 34, .05);
  --shadow-md: 0 2px 4px rgba(36, 28, 34, .05), 0 16px 40px rgba(36, 28, 34, .08);

  /* Cal.com booking modal backdrop fill. Cal's page is transparent
     below its content, so the modal box paints this behind it and the
     calendar sits on one continuous panel. Matches Cal's own base
     background token: dark is hsla(0,0%,6%,1), light is #fff. Switch
     this if you change the event's theme in Cal. */
  --cal-modal-bg: hsla(0, 0%, 6%, 1);

  /* Modal geometry. Shared by the shadow-root rules in index.html and
     the iframe rule below -- custom properties inherit through the
     shadow boundary, so these are the single source of truth for both
     sides and can't drift apart. The iframe is inset on all four sides
     by the padding, which reads as breathing room since it's the same
     colour. Width resolves against the padded content box, so only the
     height needs the calc -- percentage heights don't resolve for a
     slotted element the way percentage widths do. */
  --cal-modal-h: 82vh;
  --cal-modal-max-h: 880px;
  --cal-modal-pad: 22px;
}

@media (max-width: 768px) {
  :root { --cal-modal-h: 88vh; --cal-modal-pad: 14px; }
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 84px; }
body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg { max-width: 100%; display: block; }
a { color: inherit; }
button { font: inherit; color: inherit; }
h1, h2, h3, h4 { margin: 0; font-weight: 400; }
p { margin: 0 0 1em; }
ul, ol { margin: 0; padding: 0; list-style: none; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* ---------- Layout primitives ---------- */
.container { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: 24px; }
.container.narrow, .narrow { max-width: var(--wrap-narrow); }

.section { padding: 96px 0; }
.section--alt { background: var(--cream-2); }
.mt-xl { margin-top: 72px; }

.section__head { margin-bottom: 48px; text-align: center; }
.section__head.narrow { margin-inline: auto; }
.section__head .lede { margin-inline: auto; }

.grid { display: grid; gap: 20px; }
.grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.gap-lg { gap: 28px; }

/* ---------- Typography ---------- */
h1, h2, h3, .h2-sm, .h3-lead {
  font-family: var(--font-serif);
  letter-spacing: -0.015em;
  line-height: 1.12;
}
h2 { font-size: clamp(2rem, 3.6vw, 2.9rem); margin-bottom: .5em; }
.h2-sm { font-size: clamp(1.6rem, 2.4vw, 2rem); margin: 0 0 1em; }
.h3-lead { font-size: clamp(1.4rem, 2.2vw, 1.8rem); margin-bottom: .5em; }

.eyebrow {
  font-family: var(--font-mono);
  font-size: .74rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--rose);
  margin-bottom: 18px;
}

.lede { font-size: 1.06rem; color: var(--ink-2); max-width: 68ch; }
.lede.strong { color: var(--ink); font-weight: 600; }
.accent-serif { color: var(--plum); font-style: italic; }

.section__kicker {
  margin: 44px auto 0;
  font-size: 1.05rem;
  color: var(--ink-2);
  max-width: 68ch;
  text-align: center;
}
.section__kicker a { color: var(--plum); text-decoration: underline; text-underline-offset: 3px; }
.section__note {
  margin: 28px auto 56px;
  max-width: 62ch;
  text-align: center;
  color: var(--muted);
  font-size: .97rem;
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: .5em;
  padding: 14px 26px;
  border: 1px solid transparent;
  border-radius: 999px;
  font-weight: 600;
  font-size: .96rem;
  letter-spacing: -0.005em;
  text-decoration: none;
  cursor: pointer;
  transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease;
}
.btn--primary { background: var(--plum); color: #fff; box-shadow: var(--shadow-sm); }
.btn--primary:hover { background: var(--plum-deep); transform: translateY(-1px); box-shadow: var(--shadow-md); }
.btn--lg { padding: 17px 34px; font-size: 1.02rem; }
.btn--sm { padding: 10px 18px; font-size: .88rem; }

/* ---------- Nav ---------- */
.nav {
  position: sticky; top: 0; z-index: 60;
  background: rgba(250, 246, 242, .82);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color .2s ease, background-color .2s ease;
}
.nav.is-stuck { border-bottom-color: var(--line); }
.nav__inner { display: flex; align-items: center; justify-content: space-between; height: 68px; }

.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; }
.brand__mark { width: 26px; height: 26px; color: var(--plum); flex: none; }
.brand__name {
  font-family: var(--font-serif);
  font-size: 1.22rem;
  letter-spacing: -0.02em;
}
.brand__name-dim { color: var(--muted); }

.nav__links { display: flex; align-items: center; gap: 30px; }
.nav__links a {
  text-decoration: none;
  font-size: .93rem;
  font-weight: 500;
  color: var(--ink-2);
  transition: color .16s ease;
}
.nav__links a:hover { color: var(--plum); }
.nav__links a.btn { color: #fff; }

.nav__toggle {
  display: none;
  width: 40px; height: 40px;
  background: none; border: 1px solid var(--line); border-radius: 10px;
  cursor: pointer;
  padding: 10px 9px;
}
.nav__toggle span { display: block; height: 2px; background: var(--ink); border-radius: 2px; margin: 3px 0; transition: transform .2s ease, opacity .2s ease; }
.nav__toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(5px) rotate(45deg); }
.nav__toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav__toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-5px) rotate(-45deg); }

/* ---------- Hero ---------- */
.hero { position: relative; padding: 96px 0 72px; overflow: hidden; }
.hero__glow {
  position: absolute; inset: -20% -10% auto -10%; height: 620px;
  background:
    radial-gradient(60% 55% at 22% 12%, rgba(107,42,71,.10), transparent 70%),
    radial-gradient(50% 50% at 82% 6%, rgba(185,130,95,.14), transparent 70%);
  pointer-events: none;
}
.hero__inner { position: relative; max-width: 980px; margin-inline: auto; text-align: center; }
.hero__title {
  font-size: clamp(2.5rem, 5.6vw, 4.1rem);
  line-height: 1.06;
  margin: 0 auto 28px;
  max-width: 20ch;
}
.hero__sub {
  font-size: 1.14rem; color: var(--ink-2);
  max-width: 60ch; margin: 0 auto 36px;
}

.hero__cta {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: 14px 20px; margin-bottom: 42px;
}
.hero__cta-note {
  flex-basis: 100%;
  font-family: var(--font-mono); font-size: .78rem;
  color: var(--muted); letter-spacing: .02em;
  text-transform: uppercase;
}
.hero__link {
  flex-basis: 100%;
  font-size: .93rem; color: var(--plum);
  text-decoration: underline; text-underline-offset: 3px;
}

.hero__stats {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: 10px 14px;
  padding-top: 26px; border-top: 1px solid var(--line);
  font-size: .93rem; color: var(--muted);
}
.hero__stats b { color: var(--ink); font-weight: 600; }
.hero__stats .dot { color: var(--line-strong); }

/* ---------- Marquee ---------- */
.marquee-wrap { padding: 24px 0 56px; }
.marquee-label {
  text-align: center; font-size: .84rem; color: var(--muted);
  margin-bottom: 20px;
}
.marqueeMask {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 12%, #000 88%, transparent);
          mask-image: linear-gradient(to right, transparent, #000 12%, #000 88%, transparent);
}
.marquee__track {
  display: flex; gap: 56px; width: max-content;
  animation: rpMarquee 38s linear infinite;
  will-change: transform;
}
.marqueeMask:hover .marquee__track { animation-play-state: paused; }
.marquee__track span {
  font-family: var(--font-serif);
  font-size: 1.3rem;
  color: var(--muted);
  white-space: nowrap;
  opacity: .7;
}
@keyframes rpMarquee { from { transform: translate3d(0,0,0); } to { transform: translate3d(-50%,0,0); } }

/* ---------- Cards ---------- */
.mechanism__label {
  font-family: var(--font-mono);
  font-size: .78rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink); margin: 8px 0 24px;
  text-align: center;
}
.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 30px 28px;
  box-shadow: var(--shadow-sm);
}
.card__num {
  font-family: var(--font-mono);
  font-size: .8rem; color: var(--rose); letter-spacing: .1em;
  margin-bottom: 16px;
}
.card h3 { font-size: 1.28rem; margin-bottom: 12px; line-height: 1.25; }
.card p { color: var(--ink-2); font-size: .97rem; margin: 0; }

/* ---------- Proof ---------- */
.proof-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  display: flex; flex-direction: column;
}
.proof-card__shot {
  aspect-ratio: 16 / 10;
  background:
    repeating-linear-gradient(45deg, var(--cream-2) 0 12px, var(--cream) 12px 24px);
  display: grid; place-items: center;
  border-bottom: 1px solid var(--line);
}
.proof-card__body { padding: 22px 24px 26px; }
.proof-card__name { font-family: var(--font-mono); font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-bottom: 16px; }
.proof-stats { display: grid; gap: 10px; margin-bottom: 16px; }
.proof-stats > div { display: flex; align-items: baseline; gap: 10px; }
.proof-stats__n { font-family: var(--font-serif); font-size: 1.5rem; color: var(--plum); min-width: 3ch; }
.proof-stats span:last-child { font-size: .88rem; color: var(--muted); }
.proof-card p { font-size: .93rem; color: var(--ink-2); margin: 0; }

.placeholder-tag {
  font-family: var(--font-mono);
  font-size: .72rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--muted);
  border: 1px dashed var(--line-strong);
  border-radius: 999px;
  padding: 6px 14px;
  background: var(--surface);
}
.is-placeholder { position: relative; }

/* ---------- Flow diagram ---------- */
.flow {
  display: flex; align-items: center; justify-content: center;
  flex-wrap: wrap; gap: 10px;
  padding: 30px 24px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}
.flow__step {
  padding: 9px 16px;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: .88rem;
  color: var(--ink-2);
  background: var(--cream);
  white-space: nowrap;
}
.flow__step--end { background: var(--plum); color: #fff; border-color: var(--plum); font-weight: 600; }
.flow__arrow { color: var(--rose); font-size: 1rem; }

/* ---------- Channels ---------- */
.channel {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 34px 32px;
  box-shadow: var(--shadow-sm);
}
.channel__tag {
  font-family: var(--font-mono);
  font-size: .74rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--rose); margin-bottom: 14px;
}
.channel h3 { font-size: 1.5rem; margin-bottom: 16px; }
.channel p { color: var(--ink-2); font-size: .98rem; }
.channel p:last-child { margin: 0; }

/* ---------- Chain ---------- */
.chain {
  display: flex; align-items: center; justify-content: center; flex-wrap: wrap;
  gap: 8px 12px;
  margin: 40px 0 0;
}
.chain > span {
  padding: 9px 18px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--surface);
  font-size: .9rem;
  color: var(--muted);
}
.chain__end { background: var(--plum) !important; color: #fff !important; border-color: var(--plum) !important; font-weight: 600; }
.chain i { color: var(--rose); font-style: normal; }

/* ---------- Mini cards ---------- */
.mini {
  border-top: 2px solid var(--rose-soft);
  padding-top: 22px;
}
.mini__num { font-family: var(--font-mono); font-size: .78rem; color: var(--rose); margin-bottom: 10px; }
.mini__title { font-weight: 600; font-size: 1.04rem; margin-bottom: 8px; }
.mini p { color: var(--ink-2); font-size: .94rem; margin: 0; }

/* ---------- Quotes ---------- */
.quote {
  margin: 0;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 34px 32px;
  box-shadow: var(--shadow-sm);
}
.quote p {
  font-family: var(--font-serif);
  font-size: 1.28rem;
  line-height: 1.4;
  color: var(--ink);
  margin-bottom: 24px;
}
.quote footer { display: flex; align-items: center; gap: 14px; }
.quote__avatar {
  width: 42px; height: 42px; border-radius: 50%;
  background: var(--cream-2); border: 1px solid var(--line); flex: none;
}
.quote__name { display: block; font-weight: 600; font-size: .95rem; }
.quote__role { display: block; font-size: .86rem; color: var(--muted); }

/* ---------- Timeline ---------- */
.timeline { position: relative; padding-left: 0; }
.timeline__item {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 32px;
  padding: 32px 0;
  border-top: 1px solid var(--line);
}
.timeline__item:last-child { border-bottom: 1px solid var(--line); }
.timeline__when {
  font-family: var(--font-mono);
  font-size: .8rem; letter-spacing: .08em; text-transform: uppercase;
  color: var(--rose);
  padding-top: 4px;
}
.timeline__body h3 { font-size: 1.4rem; margin-bottom: 12px; }
.timeline__body p { color: var(--ink-2); margin: 0; }

/* ---------- Checklist ---------- */
.checklist { display: grid; gap: 2px; }
.checklist li {
  position: relative;
  padding: 18px 20px 18px 52px;
  background: var(--surface);
  border: 1px solid var(--line);
  font-size: .99rem;
  color: var(--ink-2);
}
.checklist li:first-child { border-radius: var(--radius) var(--radius) 0 0; }
.checklist li:last-child { border-radius: 0 0 var(--radius) var(--radius); }
.checklist li b { color: var(--ink); }
.checklist li::before {
  content: "";
  position: absolute; left: 22px; top: 25px;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--plum);
}

/* ---------- Fit lists ---------- */
.fitlist { display: grid; gap: 14px; }
.fitlist li {
  position: relative;
  padding-left: 34px;
  font-size: .97rem;
  color: var(--ink-2);
}
.fitlist li b { color: var(--ink); display: block; margin-bottom: 2px; }
.fitlist li::before {
  position: absolute; left: 0; top: 0;
  width: 22px; height: 22px;
  display: grid; place-items: center;
  border-radius: 50%;
  font-size: .72rem; font-weight: 700;
}
.fitlist--yes li::before { content: "\2713"; background: var(--plum-soft); color: var(--plum); }
.fitlist--no li::before { content: "\2715"; background: rgba(36,28,34,.06); color: var(--muted); }

/* ---------- Signals ---------- */
.signals {
  margin-top: 64px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 34px 32px;
}
.signals__head { text-align: center; }
.signals__head p { color: var(--ink-2); margin: 0 auto 24px; max-width: 56ch; }
.signals__grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 14px 32px; }
.signals__grid > div { font-size: .95rem; color: var(--ink-2); }
.signals__grid span { color: var(--rose); font-size: .6rem; vertical-align: middle; margin-right: 8px; }

/* ---------- Features ---------- */
.feature {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 24px 22px;
}
.feature h3 { font-family: var(--font-sans); font-weight: 600; font-size: 1rem; margin-bottom: 8px; letter-spacing: 0; }
.feature p { font-size: .92rem; color: var(--ink-2); margin: 0; }

/* ---------- Comparison table ---------- */
.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); }
.ctable { width: 100%; border-collapse: collapse; min-width: 860px; font-size: .93rem; }
.ctable th, .ctable td { padding: 16px 18px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); }
.ctable thead th {
  font-family: var(--font-mono);
  font-size: .74rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--muted); font-weight: 500;
  background: var(--cream);
}
.ctable thead th.is-us { color: var(--plum); }
.ctable tbody th { font-weight: 600; color: var(--ink); width: 180px; }
.ctable td { color: var(--ink-2); }
.ctable .is-us { background: var(--plum-soft); color: var(--ink); font-weight: 500; }
.ctable tr:last-child th, .ctable tr:last-child td { border-bottom: 0; }

.table-tabs { display: none; gap: 8px; margin-top: 18px; justify-content: center; }
.table-tabs button {
  padding: 9px 16px; border-radius: 999px;
  border: 1px solid var(--line); background: var(--surface);
  font-size: .86rem; cursor: pointer;
}
.table-tabs button.is-active { background: var(--plum); color: #fff; border-color: var(--plum); }

/* ---------- FAQ ---------- */
.faq { display: grid; gap: 2px; }
.faq__item {
  background: var(--surface);
  border: 1px solid var(--line);
}
.faq__item:first-child { border-radius: var(--radius) var(--radius) 0 0; }
.faq__item:last-child { border-radius: 0 0 var(--radius) var(--radius); }
.faq__item summary {
  list-style: none;
  cursor: pointer;
  padding: 20px 52px 20px 24px;
  position: relative;
  font-weight: 600;
  font-size: 1.02rem;
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after {
  content: "+";
  position: absolute; right: 22px; top: 50%; transform: translateY(-50%);
  font-size: 1.4rem; font-weight: 400; color: var(--rose);
  transition: transform .2s ease;
}
.faq__item[open] summary::after { content: "\2212"; }
.faq__a { padding: 0 24px 22px; }
.faq__a p { color: var(--ink-2); font-size: .97rem; margin: 0; }

/* ---------- Book ---------- */
.book { background: var(--cream-2); }
.book__inner { text-align: center; }
.book__inner .lede { margin-inline: auto; margin-bottom: 36px; }
.book__note { margin-top: 22px; font-size: .87rem; color: var(--muted); }

.booking-embed {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 48px 32px;
  box-shadow: var(--shadow-sm);
}
.booking-embed__inner { display: grid; gap: 18px; justify-items: center; }
.booking-embed__inner p { color: var(--muted); font-size: .92rem; margin: 0; }

/* ---------- Cal.com modal iframe ----------
   Cal slots its booking iframe into <cal-modal-box> from the light
   DOM, so the shadow-root CSS in index.html can't style it and a
   percentage height won't resolve against the shadow box. Size it
   here instead, matching the .modal-box dimensions set there.
   ------------------------------------------ */
cal-modal-box iframe.cal-embed {
  width: 100% !important;
  height: calc(var(--cal-modal-h) - var(--cal-modal-pad) * 2) !important;
  max-height: calc(var(--cal-modal-max-h) - var(--cal-modal-pad) * 2) !important;
  border: 0 !important;
  display: block !important;
  background-color: var(--cal-modal-bg) !important;
}

/* ---------- Plain terms ---------- */
.plain { padding-top: 0; }
.plain p { color: var(--muted); font-size: .95rem; max-width: 74ch; }

/* ---------- Footer ---------- */
.footer { background: var(--ink); color: var(--cream); padding: 64px 0 28px; }
.footer .brand__mark { color: var(--rose); }
.footer .brand__name-dim { color: rgba(250,246,242,.5); }
.footer__inner { display: grid; grid-template-columns: 1.4fr 2fr; gap: 48px; padding-bottom: 44px; }
.footer__brand p { margin-top: 16px; color: rgba(250,246,242,.55); font-size: .93rem; max-width: 34ch; }
.footer__links { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 32px; }
.footer__links > div { display: grid; gap: 10px; align-content: start; }
.footer__col-title {
  font-family: var(--font-mono);
  font-size: .72rem; letter-spacing: .14em; text-transform: uppercase;
  color: rgba(250,246,242,.4); margin-bottom: 4px;
}
.footer__links a { text-decoration: none; font-size: .93rem; color: rgba(250,246,242,.75); transition: color .16s ease; }
.footer__links a:hover { color: var(--rose); }

.footer__bottom {
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px;
  padding-top: 24px;
  border-top: 1px solid rgba(250,246,242,.12);
  font-size: .85rem; color: rgba(250,246,242,.45);
}
.footer__legal { display: flex; gap: 20px; }
.footer__legal a { text-decoration: none; color: inherit; }
.footer__legal a:hover { color: var(--rose); }

/* ---------- Scroll reveal ---------- */
.reveal { opacity: 0; transform: translateY(16px); transition: opacity .6s ease, transform .6s ease; }
.reveal.is-visible { opacity: 1; transform: none; }

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 1000px) {
  .grid--4 { grid-template-columns: repeat(2, minmax(0,1fr)); }
}

@media (max-width: 860px) {
  .section { padding: 72px 0; }
  html { scroll-padding-top: 76px; }

  .nav__toggle { display: block; }
  .nav__links {
    position: absolute; top: 68px; left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--cream);
    border-bottom: 1px solid var(--line);
    padding: 8px 24px 20px;
    display: none;
  }
  .nav__links.is-open { display: flex; }
  .nav__links a { padding: 13px 0; border-bottom: 1px solid var(--line); }
  .nav__links a.btn { margin-top: 14px; border-bottom: 0; justify-content: center; }

  .grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; }
  .signals__grid { grid-template-columns: 1fr; }

  .hero { padding: 64px 0 48px; }
  .hero__title { max-width: none; }

  .timeline__item { grid-template-columns: 1fr; gap: 12px; }

  .footer__inner { grid-template-columns: 1fr; gap: 36px; }
  .footer__links { grid-template-columns: repeat(2, minmax(0,1fr)); }

  /* Comparison table collapses to us-vs-one */
  .table-wrap { overflow-x: visible; }
  .ctable { min-width: 0; font-size: .9rem; }
  .ctable th[data-col], .ctable td[data-col] { display: none; }
  .ctable th[data-col].is-shown, .ctable td[data-col].is-shown { display: table-cell; }
  .ctable tbody th { width: auto; }
  .ctable th, .ctable td { padding: 13px 12px; }
  .table-tabs { display: flex; flex-wrap: wrap; }
}

@media (max-width: 520px) {
  body { font-size: 16px; }
  .container { padding-inline: 18px; }
  .flow { gap: 8px; padding: 22px 16px; }
  .flow__arrow { display: none; }
  .chain i { display: none; }
  .footer__links { grid-template-columns: 1fr; }
}

/* ---------- Motion / print ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .marquee__track { animation: none; }
  .reveal { opacity: 1; transform: none; transition: none; }
  * { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

@media print {
  .nav, .marquee-wrap, .table-tabs { display: none; }
  .reveal { opacity: 1; transform: none; }
  body { background: #fff; }
}