/* =====================================================================
   Munoz Automations — single-page site
   Light & airy build. Tokens from brand book v1.
   ===================================================================== */

:root {
  --bg:        #F4F2EC;   /* warm off-white (brand #F0F0F0, nudged warmer for human feel) */
  --surface:   #FFFFFF;   /* raised cards, form, thread */
  --ink:       #1E2942;   /* navy — headings + body text */
  --muted:     #5B6580;   /* secondary text */
  --coral:     #F38163;   /* primary accent — the human touch */
  /* Flame is the CTA colour and carries white text, so it is contrast-bound:
     #D14226 gives 4.65:1 on white (WCAG AA needs 4.5). The old #E34E34 was
     3.88:1 and failed. Do not lighten it back without re-checking the ratio. */
  --flame:     #D14226;   /* call-to-action buttons */
  --line:      #E4E1D8;   /* hairline borders on light */
  --navy:      #1E2942;   /* dark contact band */
  --navy-2:    #26324C;   /* lifted navy surface */
  --navy-line: #394764;
  --navy-text: #F0F0F0;
  --navy-muted:#9BA6BC;

  --display: 'Oswald', system-ui, sans-serif;
  --body:    'Inter', system-ui, sans-serif;
  --mono:    'Space Mono', ui-monospace, monospace;

  --maxw: 1120px;
  --radius: 16px;
  --radius-sm: 10px;
  --shadow: 0 18px 40px -22px rgba(30, 41, 66, 0.30);
  --shadow-lg: 0 30px 60px -28px rgba(30, 41, 66, 0.40);
}

/* ---------- base ---------- */
* { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: 84px; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--body);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }

a { color: inherit; text-decoration: none; }

.container { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }

.mono { font-family: var(--mono); }
.accent { color: var(--coral); }

h1, h2, h3 {
  font-family: var(--display);
  text-transform: uppercase;
  letter-spacing: 0.01em;
  line-height: 1.04;
  margin: 0;
  font-weight: 700;
}

/* ---------- eyebrow ---------- */
.eyebrow {
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: var(--ink);
  margin: 0 0 18px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.eyebrow__dot { width: 8px; height: 8px; background: var(--coral); transform: rotate(45deg); flex: none; }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--display);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 600;
  font-size: 15px;
  padding: 11px 20px;
  border-radius: var(--radius-sm);
  border: 1.5px solid transparent;
  cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease, color .15s ease;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
.btn:focus-visible { outline: 3px solid var(--coral); outline-offset: 2px; }

.btn--solid { background: var(--flame); color: #fff; }
.btn--solid:hover { box-shadow: 0 12px 24px -10px rgba(209, 66, 38, 0.65); }

.btn--coral { background: var(--coral); color: var(--navy); }
.btn--coral:hover { box-shadow: 0 12px 24px -10px rgba(243, 129, 99, 0.7); }

.btn--ghost { background: transparent; color: var(--ink); border-color: var(--ink); }
.btn--ghost:hover { background: var(--ink); color: var(--bg); }

.btn--lg { font-size: 16px; padding: 14px 26px; }
.btn--block { width: 100%; padding: 15px; font-size: 16px; }

/* ---------- nav ---------- */
.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(244, 242, 236, 0.82);
  backdrop-filter: saturate(140%) blur(10px);
  border-bottom: 1px solid transparent;
  transition: border-color .2s ease, box-shadow .2s ease;
}
/* Once scrolled the bar can sit over the navy contact band. At 0.82 alpha the
   blur pulled navy through and the bar went muddy grey, so lift it to 0.95 —
   still translucent, but it reads as the same warm off-white over any section. */
.nav.is-scrolled {
  background: rgba(244, 242, 236, 0.95);
  border-bottom-color: var(--line);
  box-shadow: 0 6px 24px -20px rgba(30,41,66,0.5);
}
.nav__inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; height: 72px; }

.brand { display: flex; align-items: center; gap: 12px; }
.brand__mark { position: relative; width: 30px; height: 30px; flex: none; }
.brand__mark .d { position: absolute; width: 13px; height: 13px; transform: rotate(45deg); }
.brand__mark .d1 { background: var(--coral); top: 0; left: 8px; }
.brand__mark .d2 { background: var(--flame); top: 12px; left: 0; }
.brand__mark .d3 { background: var(--ink); top: 12px; left: 16px; }
.brand__name { font-family: var(--display); font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; font-size: 19px; }
.brand__name-lo { font-weight: 300; color: var(--muted); margin-left: 4px; }

.nav__links { display: flex; align-items: center; gap: 30px; }
.nav__links a {
  font-family: var(--display);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 14px;
  font-weight: 500;
  color: var(--ink);
  position: relative;
  padding: 4px 0;
}
.nav__links a::after {
  content: ""; position: absolute; left: 0; bottom: 0; height: 2px; width: 0;
  background: var(--coral); transition: width .2s ease;
}
.nav__links a:hover::after { width: 100%; }

.nav__toggle { display: none; flex-direction: column; gap: 5px; background: none; border: 0; cursor: pointer; padding: 8px; }
.nav__toggle span { width: 24px; height: 2px; background: var(--ink); transition: transform .2s ease, opacity .2s ease; }

.nav__mobile { display: none; flex-direction: column; gap: 4px; padding: 12px 24px 22px; border-bottom: 1px solid var(--line); background: var(--bg); }
.nav__mobile a { font-family: var(--display); text-transform: uppercase; letter-spacing: 0.05em; font-size: 16px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.nav__mobile a:last-child { border-bottom: 0; margin-top: 8px; }

/* ---------- hero ---------- */
.hero { padding: 60px 0 52px; position: relative; overflow: hidden; }
/* .hero::before removed — was a soft coral glow top-right that created an unwanted orange blob */
/* ambient neural-network canvas (hero + what-I-do + contact) */
.neural { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none; }

/* Desktop: the canvas keep-out (measured from real DOM geometry in script.js) is
   the sole readability mechanism, so the percent-positioned scrims are neutralized
   here — they mispositioned into the live margins on ultrawide. Divs kept in HTML;
   the under-900px mobile override below re-enables them for the single-column layout. */
.hero__scrim, .what__scrim { position: absolute; inset: 0; z-index: 2; pointer-events: none; background: none; }

.hero__grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 56px;
  align-items: center;
  position: relative;
  z-index: 3;
}
.hero__title { font-size: clamp(52px, 8vw, 92px); }
.hero__sub { font-size: 19px; color: var(--muted); max-width: 30ch; margin: 26px 0 30px; }
.hero__cta { display: flex; flex-wrap: wrap; gap: 14px; }
.hero__trust { font-size: 14px; color: var(--muted); margin: 26px 0 0; display: flex; align-items: center; gap: 8px; }
.check { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--coral); color: #fff; font-size: 12px; flex: none; }

/* ---------- SIGNATURE: SMS thread ---------- */
.hero__demo { position: relative; }
.thread {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 22px;
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  max-width: 380px;
  margin-left: auto;
}
.thread__top {
  display: flex; align-items: center; gap: 12px;
  padding: 16px 18px;
  border-bottom: 1px solid var(--line);
  background: linear-gradient(var(--surface), #FBFAF7);
}
.thread__avatar {
  width: 38px; height: 38px; border-radius: 50%; flex: none;
  background: var(--navy); color: #fff;
  font-family: var(--display); font-weight: 700; font-size: 18px;
  display: grid; place-items: center;
}
.thread__who { display: flex; flex-direction: column; line-height: 1.25; }
.thread__name { font-family: var(--display); text-transform: uppercase; letter-spacing: 0.04em; font-size: 15px; font-weight: 600; }
.thread__status { font-size: 11px; color: var(--muted); display: flex; align-items: center; gap: 6px; }
.dot-live { width: 7px; height: 7px; border-radius: 50%; background: #36c08a; box-shadow: 0 0 0 0 rgba(54,192,138,0.6); animation: pulse 2s infinite; }
.thread__sig { margin-left: auto; font-family: var(--mono); font-size: 10px; letter-spacing: 0.15em; color: var(--muted); border: 1px solid var(--line); padding: 3px 8px; border-radius: 999px; }

/* tabs — which automation is playing (ties to the 3 service cards) */
.thread__tabs { display: flex; gap: 6px; padding: 12px 14px; border-bottom: 1px solid var(--line); background: #FBFAF7; }
.ttab {
  flex: 1; text-align: center;
  font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--muted);
  padding: 7px 4px; border-radius: 999px;
  border: 1px solid transparent;
  background: none; -webkit-appearance: none; appearance: none; cursor: pointer;
  transition: color .3s ease, background .3s ease, border-color .3s ease;
}
.ttab:hover { color: var(--navy); background: rgba(30,41,66,0.06); }
.ttab:focus-visible { outline: 2px solid var(--coral); outline-offset: 2px; }
.ttab.is-active { color: var(--navy); background: rgba(243,129,99,0.18); border-color: rgba(243,129,99,0.45); font-weight: 700; }
.ttab.is-active:hover { background: rgba(243,129,99,0.24); }

/* min-height, not height. It holds the card at a constant size through the whole
   animation (a plain auto height made the hero jump as each message landed), but
   because it is a floor rather than a cap the card grows instead of clipping if
   the content ever runs taller than measured — which it does if the webfonts
   fail and the fallback metrics differ.
   The number is the tallest finished scene plus padding, measured at this card
   width: 414px at the 380px card + 36px padding = 450. A fixed 482px height used
   to leave a tall white void at the top; combined with seeding the first two
   messages in script.js this keeps the card looking alive from the first frame. */
.thread__body {
  padding: 18px;
  display: flex; flex-direction: column; justify-content: flex-end; gap: 11px;
  min-height: 452px; overflow: hidden;
  transition: opacity .45s ease, transform .45s ease;
}
.thread__body.is-leaving { opacity: 0; transform: translateY(8px); }

.msg {
  max-width: 84%;
  padding: 10px 14px;
  font-size: 14.5px;
  line-height: 1.45;
  border-radius: 16px;
  position: relative;
}
.msg__time { display: block; font-size: 10px; opacity: 0.6; margin-top: 5px; }

.msg--alert {
  align-self: center;
  max-width: 100%;
  background: rgba(227, 78, 52, 0.10);
  /* Not var(--flame): on this 10% tint the flame red is only 3.41:1. Deepened
     to hit 4.87:1. The tint itself stays put so the pill colour is unchanged. */
  color: #C0361C;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.02em;
  border-radius: 999px;
  padding: 8px 14px;
  /* The text nodes and <span>s here are each separate flex items. Without
     flex-wrap they were forced onto one row and each wrapped internally, which
     split the phone number across lines as "555-" / "0142". Wrap the row
     instead, and hold the mono runs (number, time) together. */
  display: flex; align-items: center; justify-content: center;
  flex-wrap: wrap; gap: 2px 7px;
}
.msg--alert .mono { color: var(--ink); white-space: nowrap; }
.msg__icon { font-size: 14px; }

.msg--out { align-self: flex-end; background: var(--navy); color: var(--navy-text); border-bottom-right-radius: 5px; }
.msg--in  { align-self: flex-start; background: #EEEDE8; color: var(--ink); border-bottom-left-radius: 5px; }

.thread__booked {
  align-self: center;
  margin-top: 4px;
  font-family: var(--display); text-transform: uppercase; letter-spacing: 0.05em;
  font-size: 13px; font-weight: 600;
  color: #157A4E;  /* was #1f9d68 — only 3.12:1 on the green tint, now 4.83:1 */
  background: rgba(54, 192, 138, 0.12);
  border: 1px solid rgba(54, 192, 138, 0.35);
  padding: 8px 16px; border-radius: 999px;
  display: flex; align-items: center; gap: 8px;
}

/* day divider (used in the Nurture follow-up scene) */
.thread__day {
  align-self: center;
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--muted);
  display: flex; align-items: center; gap: 8px;
}
.thread__day::before, .thread__day::after { content: ""; width: 26px; height: 1px; background: var(--line); }

/* typing indicator (the customer is replying) */
.thread__typing { display: inline-flex; align-items: center; gap: 5px; padding: 12px 14px; }
.thread__typing span { width: 7px; height: 7px; border-radius: 50%; background: #9aa3b5; animation: dotBounce 1.25s infinite ease-in-out; }
.thread__typing span:nth-child(2) { animation-delay: 0.16s; }
.thread__typing span:nth-child(3) { animation-delay: 0.32s; }
@keyframes dotBounce { 0%, 60%, 100% { transform: translateY(0); opacity: 0.45; } 30% { transform: translateY(-4px); opacity: 1; } }

/* each message animates in as it is added */
.thread__body .msg,
.thread__body .thread__booked,
.thread__body .thread__day { animation: msgIn 0.4s ease both; }
@keyframes msgIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

.hero__demo-cap { text-align: right; max-width: 380px; margin: 14px 0 0 auto; font-size: 12px; color: var(--muted); letter-spacing: 0.04em; }

@keyframes pulse {
  0%   { box-shadow: 0 0 0 0 rgba(54,192,138,0.55); }
  70%  { box-shadow: 0 0 0 7px rgba(54,192,138,0); }
  100% { box-shadow: 0 0 0 0 rgba(54,192,138,0); }
}

/* ---------- generic section ---------- */
.section { padding: 76px 0; }
.section--alt { background: var(--surface); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }

/* "What I do" hosts the lower half of the neural field */
#what { position: relative; overflow: hidden; }
#what .container { position: relative; z-index: 3; }
.section__title { font-size: clamp(34px, 4.6vw, 52px); margin-bottom: 48px; }

/* ---------- what i do: cards ---------- */
.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 30px 28px 32px;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: rgba(243,129,99,0.5); }
.card__mark { display: block; width: 14px; height: 14px; background: var(--coral); transform: rotate(45deg); margin-bottom: 20px; }
.card__title { font-size: 24px; margin-bottom: 12px; }
.card__body { color: var(--muted); font-size: 15.5px; margin: 0; }

.cards__more {
  color: var(--muted);
  font-size: 14px;
  text-align: center;
  margin: 28px 0 0;
  max-width: 52ch;
  margin-left: auto;
  margin-right: auto;
}

/* ---------- how it works: steps ---------- */
.steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; counter-reset: none; }
.step { position: relative; padding-top: 24px; border-top: 2px solid var(--ink); }
.step__num { display: block; font-size: 14px; color: var(--flame); letter-spacing: 0.12em; margin-bottom: 14px; }
.step__title { font-size: 23px; margin-bottom: 10px; }
.step__body { color: var(--muted); font-size: 15.5px; margin: 0; }

/* ---------- about ---------- */
.about__grid { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 56px; align-items: center; }
.about__photo { position: relative; }
.about__photo img {
  width: 100%; border-radius: var(--radius);
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
  aspect-ratio: 4 / 5; object-fit: cover; object-position: center top;
}
.about__tag {
  position: absolute; left: 14px; bottom: 14px;
  background: var(--navy); color: var(--navy-text);
  font-size: 11px; letter-spacing: 0.05em;
  padding: 6px 12px; border-radius: 999px;
}
.about__body { color: var(--muted); font-size: 17px; margin: 0 0 18px; max-width: 52ch; }
.about__body:last-child { margin-bottom: 0; }

/* ---------- contact (navy anchor) ---------- */
.contact {
  background: var(--navy);
  color: var(--navy-text);
  padding: 92px 0;
  position: relative;
  overflow: hidden;
}
.contact::before {
  content: ""; position: absolute; top: -120px; left: -100px; width: 460px; height: 460px;
  background: radial-gradient(closest-side, rgba(243,129,99,0.18), transparent 70%);
  pointer-events: none;
}
/* align-items: center, not start. The form column is roughly twice the height of
   the copy column, so starting both at the top left ~400px of bare navy hanging
   under the email line and it read as an unfinished hole. Centring splits that
   space above and below the copy so it reads as deliberate air. */
.contact__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; position: relative; z-index: 2; }
/* Defensive, not fixing a known break. A `1fr` track resolves to
   minmax(auto, 1fr), and `auto` floors the track at its content's min-content
   width, so a long unbreakable string (the email address) could otherwise push
   the grid wider than the viewport. Verified fine at 390/500/1280/2560. */
.contact__grid > * { min-width: 0; }
.contact__title { font-size: clamp(36px, 5vw, 58px); }
.contact__sub { color: var(--navy-muted); font-size: 18px; margin: 22px 0 30px; max-width: 32ch; }
/* overflow-wrap so the email can break rather than force the track wider */
.contact__direct { margin-top: 0; font-size: 13px; color: var(--navy-muted); letter-spacing: 0.04em; overflow-wrap: anywhere; }
.contact__direct a { color: inherit; text-decoration: underline; text-underline-offset: 3px; transition: color .18s ease; }
.contact__direct a:hover { color: var(--coral); }

/* ---------- form ---------- */
.form {
  background: var(--navy-2);
  border: 1px solid var(--navy-line);
  border-radius: var(--radius);
  padding: 30px;
}
.form__hp { position: absolute; left: -9999px; }
.form__row { margin-bottom: 16px; }
.form__label {
  display: block;
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--navy-muted); margin-bottom: 7px;
}
.form__opt { text-transform: none; letter-spacing: 0.02em; opacity: 0.62; font-size: 10px; }
.form__input {
  width: 100%;
  background: var(--navy);
  border: 1px solid var(--navy-line);
  border-radius: var(--radius-sm);
  color: var(--navy-text);
  font-family: var(--body); font-size: 15px;
  padding: 12px 14px;
  transition: border-color .15s ease, box-shadow .15s ease;
  resize: vertical;
}
.form__input::placeholder { color: #8592A9; }  /* was #6b768f — 3.18:1, now 4.60:1 */
.form__input:focus { outline: none; border-color: var(--coral); box-shadow: 0 0 0 3px rgba(243,129,99,0.25); }
.form__fine { margin: 14px 0 0; font-size: 11px; color: var(--navy-muted); letter-spacing: 0.03em; text-align: center; }

/* SMS consent row — A2P 10DLC requires an unchecked, non-required checkbox
   with the full disclosure visible next to it. Do not add `required`, and do
   not set `checked`: either one is an automatic carrier rejection. */
.form__consent { display: flex; align-items: flex-start; gap: 11px; margin: 2px 0 18px; }
.form__consent input {
  width: 18px; height: 18px; flex: none; margin: 2px 0 0;
  accent-color: var(--coral); cursor: pointer;
}
.form__consent input:focus-visible { outline: 2px solid var(--coral); outline-offset: 2px; }
.form__consent label { font-size: 11.5px; line-height: 1.55; color: var(--navy-muted); letter-spacing: 0.01em; cursor: pointer; min-width: 0; }
.form__consent a { color: var(--navy-text); text-decoration: underline; text-underline-offset: 2px; }
.form__consent a:hover { color: var(--coral); }

/* ---------- footer ---------- */
.footer { background: var(--bg); border-top: 1px solid var(--line); padding: 40px 0; }
.footer__inner { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.footer__tag { font-family: var(--display); text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); font-size: 14px; margin: 0; }
.footer__meta { font-size: 12px; color: var(--muted); letter-spacing: 0.04em; margin: 0; }

.footer__legal {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  font-size: 12px; letter-spacing: 0.04em;
  margin: 26px 0 0; padding-top: 22px; border-top: 1px solid var(--line);
}
.footer__legal a { color: var(--muted); text-decoration: underline; text-underline-offset: 3px; transition: color .18s ease; overflow-wrap: anywhere; }
.footer__legal a:hover { color: var(--coral); }
.footer__legal .sep { color: var(--line); }

/* A2P 10DLC SMS disclosure. Sits under the legal row on every page. Small and
   muted on purpose: it is a compliance artifact carrier reviewers must be able
   to read, not a selling line. Do not hide it or set display:none. */
.footer__sms {
  max-width: 78ch;
  font-size: 11px; line-height: 1.7; letter-spacing: 0.03em;
  color: var(--muted); margin: 14px 0 0;
}
.footer__sms a { color: var(--muted); text-decoration: underline; text-underline-offset: 3px; }
.footer__sms a:hover { color: var(--coral); }

/* =====================================================================
   Legal pages (privacy.html, terms.html)
   Plain prose pages. No canvas, no scrims. Required to be publicly
   reachable for A2P 10DLC campaign registration, so keep them simple,
   fast, and free of anything that could fail to render for a reviewer.
   ===================================================================== */
.legal { padding: 56px 0 84px; }
.legal__inner { max-width: 74ch; }
.legal__title { font-size: clamp(34px, 5vw, 52px); margin-bottom: 16px; }
.legal__updated { font-family: var(--mono); font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); margin: 0 0 10px; }
.legal__entity { font-size: 15px; color: var(--muted); margin: 0 0 40px; padding-bottom: 28px; border-bottom: 1px solid var(--line); }

.legal h2 { font-size: 22px; margin: 44px 0 14px; }
.legal h3 { font-size: 16px; margin: 26px 0 10px; letter-spacing: 0.03em; }
.legal p { color: var(--muted); font-size: 16px; margin: 0 0 16px; }
.legal ul { color: var(--muted); font-size: 16px; margin: 0 0 16px; padding-left: 22px; }
.legal li { margin-bottom: 9px; }
.legal a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.legal a:hover { color: var(--flame); }
.legal strong { color: var(--ink); font-weight: 600; }

/* The carrier-mandated disclosures. Called out so a reviewer scanning the
   page finds them without reading every paragraph. */
.legal__callout {
  background: var(--surface);
  border: 1px solid var(--line);
  border-left: 3px solid var(--coral);
  border-radius: var(--radius-sm);
  padding: 22px 24px;
  margin: 24px 0 28px;
}
.legal__callout p:last-child { margin-bottom: 0; }

.legal__back { display: inline-flex; align-items: center; gap: 8px; margin-top: 48px; font-family: var(--display); text-transform: uppercase; letter-spacing: 0.05em; font-size: 14px; color: var(--ink); }
.legal__back:hover { color: var(--flame); }

/* =====================================================================
   Thank-you page (thank-you.html)
   The form's redirect target. Netlify would otherwise show its own generic
   confirmation, which is off-brand and gives nothing to hang tracking on.
   ===================================================================== */
.thanks { padding: 90px 0 110px; }
.thanks__inner { max-width: 54ch; }
.thanks__check {
  display: grid; place-items: center;
  width: 54px; height: 54px; border-radius: 50%;
  background: var(--coral); color: #fff;
  font-size: 26px; margin-bottom: 28px;
}
.thanks__title { font-size: clamp(46px, 7vw, 76px); margin-bottom: 22px; }
.thanks__body { color: var(--muted); font-size: 18px; margin: 0 0 18px; }
.thanks__body a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; overflow-wrap: anywhere; }
.thanks__body a:hover { color: var(--flame); }

@media (max-width: 520px) {
  .thanks { padding: 64px 0 80px; }
}

/* =====================================================================
   Responsive
   ===================================================================== */
@media (max-width: 900px) {
  /* On mobile the keep-out is disabled (single-column, copy spans full width),
     so re-enable the CSS scrims to carry text readability. */
  .hero__scrim { background: radial-gradient(75% 55% at 50% 36%, var(--bg) 0%, var(--bg) 50%, rgba(244,242,236,0.75) 68%, rgba(244,242,236,0) 88%); }
  /* Was a percent-positioned radial. #what is ~2900px tall on a phone, so a
     percentage radius overshot the title block and still let the mesh cut
     through the headline. Pin it in px instead: solid over the title, faded out
     by the time the cards start, mesh still alive further down the section. */
  .what__scrim {
    background: linear-gradient(180deg,
      var(--bg) 0px, var(--bg) 700px,
      rgba(244,242,236,0.55) 790px,
      rgba(244,242,236,0) 880px);
  }

  /* The hard <br> in section titles produced a one-word orphan line once the
     text was also wrapping naturally ("...FOR THE / LEADS / YOU'RE ALREADY").
     Let these wrap on their own down here. Hero and contact titles keep theirs. */
  .section__title br { display: none; }

  .hero__grid { grid-template-columns: 1fr; gap: 48px; }
  .hero { padding: 48px 0 72px; }
  .thread { margin: 0 auto; }
  .hero__demo-cap { text-align: center; margin: 14px auto 0; }
  .cards, .steps { grid-template-columns: 1fr; }
  .about__grid { grid-template-columns: 1fr; gap: 40px; }
  .about__photo { max-width: 420px; }
  .contact__grid { grid-template-columns: 1fr; gap: 40px; }

  .nav__links, .nav__cta { display: none; }
  .nav__toggle { display: flex; }
  .nav.is-open .nav__mobile { display: flex; }
  .nav__toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .nav__toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
  .nav__toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  /* Below 900px the DOM-measured canvas keep-out is off, and this is the only
     run of text with no card behind it, so the mesh ran straight through it.
     A halo in the page background colour lifts it off the field without having
     to blank the field out. */
  .cards__more { text-shadow: 0 0 10px var(--bg), 0 0 5px var(--bg), 0 0 2px var(--bg); }
}

/* ---- tablet: 601-900px ----
   MUST come after the max-width:900px block above: same specificity, so the
   later rule wins and these would otherwise be overridden back to one column.
   Between the phone and desktop layouts the hero copy was left-aligned while the
   SMS card centred under it, which read as a mistake. Centre the copy so the
   single column is deliberate, and run the cards/steps 2-up instead of wasting
   half the width. */
@media (min-width: 601px) and (max-width: 900px) {
  .hero__copy { max-width: 560px; margin: 0 auto; text-align: center; }
  .hero__copy .eyebrow { justify-content: center; }
  .hero__sub { max-width: none; }
  .hero__cta, .hero__trust { justify-content: center; }
  .cards, .steps { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 520px) {
  body { font-size: 16px; }
  .section { padding: 64px 0; }
  .contact, .hero { padding-left: 0; padding-right: 0; }
  .hero__cta { flex-direction: column; align-items: stretch; }
  .hero__cta .btn { width: 100%; }
  /* The card is narrower here so the same messages wrap to more lines: the
     tallest scene measures 471px at 390px wide and 492px at 320px. The old
     fixed 452px box clipped the "Missed call" pill clean off the top of every
     Catch loop. 530 clears the 320px worst case. */
  .thread__body { min-height: 530px; }
  .form { padding: 22px; }
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
  .thread__body { justify-content: flex-start; }
}