/* =============================================================
   Contact Router — page body styles
   -------------------------------------------------------------
   Hand-ported from the design system that backs the mockup:
     resources/2026-09-04-corp-site-contact-flow/design/_ds/…
       colors_and_type.css  (tokens)
       ui_kits/web_app/kit.css  (button / input / card recipes)

   Deliberately uses ZERO Tailwind utilities in the page body.
   Every colour in the design system is oklch() and outside
   Tailwind's default palette, so transcribing to utilities would
   mean bg-[oklch(...)] on every element and would throw the token
   layer away. Tailwind still loads for header-tailwind.php /
   footer-tailwind.php, which are utility-classed.

   Custom properties are scoped to .mt-cr, NOT :root — names like
   --primary, --border, --input and --radius are generic enough to
   collide with header/footer/plugin CSS.
   ============================================================= */

.mt-cr {
  /* ---------- Fonts ---------- */
  /* DM Sans is already loaded globally by template-parts/head-tracking.php.
     JetBrains Mono from the mockup is dropped: mono appears twice and is not
     worth a render-blocking font request. System mono stack instead. */
  --cr-font-sans: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
  --cr-font-mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace;

  /* The lead field's type size. A token because two boxes have to agree on
     it: the phone input, and the country button painted over its left end. */
  --cr-font-lead: 17px;

  /* ---------- Base ---------- */
  --cr-bg: oklch(1 0 0);
  --cr-fg: oklch(0.141 0.005 285.823);

  /* ---------- Brand ---------- */
  --cr-primary: oklch(0.844 0.165 85.5);
  --cr-primary-hover: oklch(0.844 0.165 85.5 / 0.85);
  --cr-primary-fg: oklch(0% 0 0);

  /* ---------- Semantic ---------- */
  --cr-success: oklch(0.657 0.169 149.579);
  --cr-destructive: oklch(0.577 0.245 27.325);

  /* ---------- Neutral scale ---------- */
  --cr-neutral-50:  oklch(0.985 0.002 285.882);
  --cr-neutral-100: oklch(0.967 0.001 286.375);
  --cr-neutral-200: oklch(0.92  0.004 286.32);
  --cr-neutral-300: oklch(0.795 0.008 285.938);
  --cr-neutral-400: oklch(0.617 0.013 285.938);
  --cr-neutral-600: oklch(0.421 0.011 285.885);
  --cr-neutral-800: oklch(0.254 0.007 285.823);
  --cr-neutral-900: oklch(0.141 0.005 285.823);

  /* ---------- UI ---------- */
  --cr-muted: oklch(0.967 0.001 286.375);
  --cr-muted-fg: oklch(0.552 0.016 285.938);
  --cr-border: oklch(0.92 0.004 286.32);
  --cr-field: oklch(0.92 0.004 286.32 / 0.28);
  --cr-field-hover: oklch(0.92 0.004 286.32 / 0.5);
  --cr-ring: oklch(0.705 0.015 286.067);
  --cr-ring-shadow: 0 0 0 3px oklch(0.705 0.015 286.067 / 0.5);

  /* ---------- Radius ---------- */
  --cr-radius-pill: 26px;
  --cr-radius-card: 2.5rem;

  /* ---------- Shadow ---------- */
  --cr-shadow-lg: 0 12px 32px oklch(0 0 0 / 0.12);
  --cr-shadow-2xl: 0 30px 60px oklch(0 0 0 / 0.18);
  --cr-card-ring: 0 0 0 1px oklch(0 0 0 / 0.06);

  font-family: var(--cr-font-sans);
  color: var(--cr-fg);
  -webkit-font-smoothing: antialiased;
}

/* The page ground is the neutral-50 wash from the mockup, applied to the
   body so the header/footer chrome sits on the same surface. */
body.contact-router-body {
  background: oklch(0.985 0.002 285.882);
  margin: 0;
}

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

.mt-cr input,
.mt-cr button,
.mt-cr textarea,
.mt-cr select { font-family: inherit; }

/* -------------------------------------------------------------
   Layout
   ------------------------------------------------------------- */

.mt-cr {
  width: 100%;
  max-width: 1000px;
  margin: 0 auto;
  padding: 56px 48px 88px;
}

.mt-cr__eyebrow {
  font-weight: 600;
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--cr-muted-fg);
  margin: 0 0 14px;
}

.mt-cr__title {
  margin: 0 0 40px;
  font-weight: 700;
  font-size: 4rem;
  line-height: 0.95;
  letter-spacing: -0.03em;
  text-transform: uppercase;
}

.mt-cr__title-accent { color: var(--cr-primary); }

/* Two-column router card. Below the breakpoint the columns stack with
   "Now" first — it is the impatient path, and the slot grid is taller. */
.mt-cr__card {
  display: grid;
  grid-template-columns: 1fr 1fr;
  background: var(--cr-bg);
  border-radius: var(--cr-radius-card);
  box-shadow: var(--cr-card-ring), var(--cr-shadow-lg);
  overflow: hidden;
}

.mt-cr__col { padding: 44px 40px 40px 44px; }

.mt-cr__col--later {
  padding: 44px 44px 40px 40px;
  background: var(--cr-neutral-50);
  border-left: 1px solid var(--cr-border);
}

.mt-cr__col-title {
  margin: 0 0 6px;
  font-weight: 700;
  font-size: 2rem;
  letter-spacing: -0.02em;
}

.mt-cr__col-sub {
  margin: 0 0 26px;
  font-size: 1rem;
  line-height: 1.55;
  color: var(--cr-muted-fg);
}

/* -------------------------------------------------------------
   Fields
   ------------------------------------------------------------- */

.mt-cr__fields {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.mt-cr__fields + .mt-cr__fields { margin-top: 10px; }

.mt-cr__input {
  width: 100%;
  height: 52px;
  padding: 0 22px;
  border-radius: var(--cr-radius-pill);
  border: 1px solid var(--cr-border);
  background: var(--cr-field);
  font-size: 16px;
  color: var(--cr-fg);
  outline: none;
  transition: border-color 150ms, box-shadow 150ms, background-color 150ms;
}

/* The phone field leads the Now column, so it is a notch bigger. */
.mt-cr__input--lead { height: 56px; font-size: var(--cr-font-lead); }

.mt-cr__input::placeholder { color: var(--cr-neutral-400); }
.mt-cr__input:focus { border-color: var(--cr-ring); box-shadow: var(--cr-ring-shadow); }
.mt-cr__input[aria-invalid="true"] {
  border-color: var(--cr-destructive);
  box-shadow: 0 0 0 3px oklch(0.577 0.245 27.325 / 0.2);
}

/* -------------------------------------------------------------
   Phone field — intl-tel-input inside the pill
   -------------------------------------------------------------
   The library ships its own stylesheet (assets/vendor/intl-tel-input/)
   and draws a generic square field. Everything below is the theme
   talking back to it: its variables take the router's values, and the
   few shapes its variables cannot reach — the rounded left of the
   country button, the dropdown's card — are set by hand.

   Everything hangs off .mt-cr-iti, the containerClass the script passes
   the library, rather than off .mt-cr. On a narrow screen the country
   list is not a dropdown but a sheet the library moves to <body>, which
   puts it outside .mt-cr and out of reach of both the router's
   descendant selectors and its custom properties. .mt-cr-iti is on both
   the inline wrapper and that sheet, so one scope styles both — and a
   second intl-tel-input elsewhere on the site (a plugin form, say)
   still keeps its own look.

   The colours below are therefore literals rather than var(--cr-…):
   each one names the token it mirrors, and the two must be changed
   together.
   ------------------------------------------------------------- */

.mt-cr-iti {
  --iti-border-color: oklch(0.92 0.004 286.32);       /* --cr-border */
  --iti-country-selector-bg: oklch(1 0 0);            /* --cr-bg */
  --iti-icon-color: oklch(0.552 0.016 285.938);       /* --cr-muted-fg */
  --iti-hover-color: oklch(0 0 0 / 0.045);
  /* The pill's own breathing room, so the flag does not sit in the
     curve of the left edge. */
  --iti-spacer-horizontal: 20px;

  --mt-cr-iti-fg: oklch(0.141 0.005 285.823);         /* --cr-fg */
  --mt-cr-iti-muted: oklch(0.552 0.016 285.938);      /* --cr-muted-fg */
  --mt-cr-iti-placeholder: oklch(0.617 0.013 285.938);/* --cr-neutral-400 */
  --mt-cr-iti-ring: oklch(0.705 0.015 286.067);       /* --cr-ring */
  --mt-cr-iti-shadow: 0 12px 32px oklch(0 0 0 / 0.12);/* --cr-shadow-lg */
}

/* The library wraps the input in an inline-block; the form is a column of
   full-width fields. The type is set here rather than on the input because
   the country button is a separate box painted over the input's left end,
   inheriting from this wrapper: give it a different family or size and the
   dial code and the number sit on visibly different baselines. Both boxes
   are already centred on the same axis, so matching the font is the whole
   of the alignment. */
.mt-cr__phone .iti {
  display: block;
  width: 100%;
  font-family: inherit;
  font-size: var(--cr-font-lead);
  /* A whole-pixel line box, which is the last 1px of the alignment. Both
     boxes centre their text in the same 54px (56px field, 1px borders), but
     the inherited 1.5 makes that a 25.5px line box with 14.25px of leading
     either side — and an input and a flex item round that quarter pixel in
     opposite directions, which is a visible one-row step between the dial
     code and the number. 24px leaves exactly 15px either side for both. */
  line-height: 24px;
}

/* Follows the pill, or the hover state paints square corners over a
   rounded edge. */
.mt-cr-iti .iti__selected-country-primary {
  border-radius: 26px 0 0 26px;                       /* --cr-radius-pill */
  transition: background-color 150ms;
}

.mt-cr-iti .iti__selected-dial-code { color: var(--mt-cr-iti-muted); }

/* Keyboard focus lands on the country button before the number, so it
   has to be as visible there as the ring is on the input itself. */
.mt-cr-iti .iti__selected-country:focus-visible .iti__selected-country-primary {
  outline: 2px solid var(--mt-cr-iti-ring);
  outline-offset: -2px;
}

/* ---------- The country list ---------- */

/* The doubled class is not a typo. The library's own border and shadow for
   this element are two classes deep (.iti--inline-country-selector .iti__…),
   its stylesheet is enqueued after this one, and equal specificity is
   settled by source order — so the theme needs one class more than the
   library to be heard at all. */

.mt-cr-iti.mt-cr-iti .iti__country-selector {
  border-radius: 18px;
  border: 1px solid var(--iti-border-color);
  box-shadow: var(--mt-cr-iti-shadow);
  overflow: hidden;
  font-size: 15px;
  font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
}

.mt-cr-iti .iti__search-input {
  font: inherit;
  font-size: 15px;
  color: var(--mt-cr-iti-fg);
  background: transparent;
  padding-top: 12px;
  padding-bottom: 12px;
}

.mt-cr-iti .iti__search-input::placeholder { color: var(--mt-cr-iti-placeholder); }

/* The library leaves the search box borderless and lets the browser draw
   its focus ring, which is a black rectangle across the top of the card. */
.mt-cr-iti .iti__search-input:focus-visible {
  outline: 2px solid var(--mt-cr-iti-ring);
  outline-offset: -3px;
  border-radius: 14px;
}

.mt-cr-iti .iti__country {
  padding-top: 9px;
  padding-bottom: 9px;
  color: var(--mt-cr-iti-fg);
}

/* The library's 185px shows barely five rows — a list of 240 countries
   that short reads as a scroll trap rather than a menu. Only as a
   dropdown: as a sheet the list should fill the sheet, which is what the
   library does when nobody caps it. */
.mt-cr-iti.iti--inline-country-selector .iti__country-list { max-height: 264px; }

.mt-cr-iti .iti__dial-code { color: var(--mt-cr-iti-muted); }

/* As a sheet rather than a dropdown, the corners belong to the sheet. */
.mt-cr-iti.iti--fullscreen-popup .iti__country-selector { border-radius: 20px; }

/* Honeypot. Offscreen rather than display:none — some bots skip hidden
   inputs, and screen readers are handled by aria-hidden + tabindex. */
.mt-cr__hp {
  position: absolute !important;
  left: -9999px !important;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* -------------------------------------------------------------
   Buttons
   ------------------------------------------------------------- */

.mt-cr__submit {
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  height: 64px;
  margin-top: 12px;
  padding: 0 28px;
  border: 1px solid transparent;
  border-radius: var(--cr-radius-pill);
  background: var(--cr-neutral-900);
  color: #fff;
  font-size: 18px;
  font-weight: 700;
  white-space: nowrap;
  transition: background-color 150ms, transform 120ms, box-shadow 150ms;
  outline: none;
}

.mt-cr__submit:hover { background: var(--cr-neutral-800); }
.mt-cr__submit:active { transform: scale(0.98); }
.mt-cr__submit:focus-visible { box-shadow: var(--cr-ring-shadow); border-color: var(--cr-ring); }
.mt-cr__submit[disabled] { opacity: 0.5; pointer-events: none; }

.mt-cr__submit--confirm { margin-top: 18px; }

.mt-cr__cta-primary {
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 64px;
  padding: 0 28px;
  border: 1px solid transparent;
  border-radius: var(--cr-radius-pill);
  background: var(--cr-primary);
  color: var(--cr-primary-fg);
  font-size: 18px;
  font-weight: 700;
  text-decoration: none;
  transition: background-color 150ms, transform 120ms;
}

.mt-cr__cta-primary:hover { background: var(--cr-primary-hover); color: var(--cr-primary-fg); }
.mt-cr__cta-primary:active { transform: scale(0.98); }

/* "In a hurry? Call +32 …" — for anyone who would rather not wait even the
   promised minutes. The number is the only dark thing under the button, so
   the eye lands on it and not on the sentence around it. */
.mt-cr__hurry {
  margin: 16px 0 0;
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--cr-muted-fg);
}

.mt-cr__hurry a {
  color: var(--cr-fg);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
  white-space: nowrap;
}

.mt-cr__hurry a:hover { text-decoration-thickness: 2px; }
.mt-cr__hurry a:focus-visible { outline: none; box-shadow: var(--cr-ring-shadow); border-radius: 4px; }

/* When both lines are there, they read as one block, not two afterthoughts. */
.mt-cr__hurry + .mt-cr__message { margin-top: 4px; }

/* The way out of the Now column for anyone who would rather write than talk. */
.mt-cr__message {
  margin: 16px 0 0;
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--cr-muted-fg);
}

.mt-cr__message a {
  color: var(--cr-muted-fg);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.mt-cr__message a:hover { color: var(--cr-fg); }
.mt-cr__message a:focus-visible { outline: none; box-shadow: var(--cr-ring-shadow); border-radius: 4px; }

/* -------------------------------------------------------------
   Day tabs + slot pills
   ------------------------------------------------------------- */

.mt-cr__tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;
}

.mt-cr__pill {
  height: 40px;
  padding: 0 14px;
  border-radius: var(--cr-radius-pill);
  border: 1px solid var(--cr-border);
  background: #fff;
  color: var(--cr-fg);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 150ms, color 150ms, border-color 150ms;
  outline: none;
}

.mt-cr__pill:hover { background: var(--cr-neutral-100); }
.mt-cr__pill:focus-visible { box-shadow: var(--cr-ring-shadow); border-color: var(--cr-ring); }

.mt-cr__pill[aria-pressed="true"] {
  background: var(--cr-neutral-900);
  border-color: transparent;
  color: #fff;
}

/* The way OUT of the four resting dates, wearing the same muted-at-rest clothes
   as .mt-cr__more one level down: it is a way out of the strip, not a fifth day.
   Transparent border rather than absent, so hovering changes no geometry. */
.mt-cr__pill--ghost {
  background: transparent;
  border-color: transparent;
  color: var(--cr-muted-fg);
}

.mt-cr__pill--ghost:hover {
  background: #fff;
  border-color: var(--cr-border);
  color: var(--cr-fg);
}

/* The full-window date panel. It REPLACES the strip and the slot grid rather
   than pushing them down, so opening it costs no scroll and the whole shape of
   availability — gaps included, a fully booked Tuesday simply is not there —
   reads at a glance. */
.mt-cr__days {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-bottom: 8px;
}

.mt-cr__days-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.mt-cr__days-label {
  margin: 0;
  font-weight: 600;
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--cr-muted-fg);
}

.mt-cr__days-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.mt-cr__slots {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

/* tabular-nums: six times in a grid only read as a column if the digits align. */
.mt-cr__slot { height: 44px; font-variant-numeric: tabular-nums; }

/* The long tail behind one quiet control. Borderless and muted at rest so it
   reads as a way out of the six rather than a seventh time; the pill only draws
   itself on hover, when it becomes a thing you are about to press.

   The border is transparent rather than absent so hovering changes no geometry —
   and every property here is stated outright, because Tailwind's preflight
   (border-width: 0, svg { display: block }) is what this button falls back to if
   this stylesheet ever fails to load. */
.mt-cr__more {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  height: 44px;
  margin-top: 8px;
  padding: 0 14px;
  border: 1px solid transparent;
  border-radius: var(--cr-radius-pill);
  background: transparent;
  color: var(--cr-muted-fg);
  font-size: 14px;
  font-weight: 500;
  line-height: 1;
  cursor: pointer;
  outline: none;
  transition: background-color 150ms, color 150ms, border-color 150ms;
}

.mt-cr__more:hover {
  background: #fff;
  border-color: var(--cr-border);
  color: var(--cr-fg);
}

.mt-cr__more:focus-visible {
  box-shadow: var(--cr-ring-shadow);
  border-color: var(--cr-ring);
}

.mt-cr__more svg {
  flex: none;
  transition: transform 150ms;
}

.mt-cr__more[aria-expanded="true"] svg { transform: rotate(180deg); }

.mt-cr__slot-empty {
  margin: 0;
  padding: 20px 0 4px;
  font-size: 0.875rem;
  line-height: 1.55;
  color: var(--cr-muted-fg);
}

.mt-cr__tz-note {
  margin: 14px 0 0;
  font-size: 0.75rem;
  line-height: 1.45;
  color: var(--cr-muted-fg);
}

/* Skeleton shown while availability is in flight. Never a bare box. */
.mt-cr__skeleton {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

.mt-cr__skeleton span {
  display: block;
  height: 44px;
  border-radius: var(--cr-radius-pill);
  background: linear-gradient(90deg, var(--cr-neutral-100), var(--cr-neutral-200), var(--cr-neutral-100));
  background-size: 200% 100%;
  animation: mtCrShimmer 1.4s ease-in-out infinite;
}

@keyframes mtCrShimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* -------------------------------------------------------------
   Identity step (revealed after a slot is picked)
   ------------------------------------------------------------- */

.mt-cr__identity {
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid var(--cr-border);
}

.mt-cr__identity-title {
  margin: 0 0 12px;
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.2;
  color: var(--cr-fg);
}

.mt-cr__identity .mt-cr__input { background: #fff; }

/* -------------------------------------------------------------
   Iframe fallback (HubSpot meetings embed)
   ------------------------------------------------------------- */

.mt-cr__iframe-wrap {
  border-radius: 18px;
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--cr-border);
}

.mt-cr__iframe-wrap iframe {
  display: block;
  width: 100%;
  min-height: 620px;
  border: 0;
}

/* -------------------------------------------------------------
   Inline messages (errors, 409 slot-taken, rate limits)
   ------------------------------------------------------------- */

.mt-cr__notice {
  margin: 14px 0 0;
  padding: 12px 16px;
  border-radius: 14px;
  font-size: 0.875rem;
  line-height: 1.5;
  background: oklch(0.778 0.151 86.052 / 0.18);
  color: var(--cr-neutral-800);
}

.mt-cr__notice--error {
  background: oklch(0.577 0.245 27.325 / 0.1);
  color: var(--cr-destructive);
}

.mt-cr__notice a { color: inherit; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }

/* -------------------------------------------------------------
   Footer row under the card
   ------------------------------------------------------------- */

.mt-cr__footer {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 20px;
  margin-top: 44px;
}

.mt-cr__footer-link {
  font-size: 0.875rem;
  color: var(--cr-muted-fg);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
  background: transparent;
  border: 0;
  padding: 0;
}

.mt-cr__footer-link:hover { color: var(--cr-fg); }

/* -------------------------------------------------------------
   Confirmation screen
   ------------------------------------------------------------- */

.mt-cr__done {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 0 0 40px;
}

.mt-cr__done-card {
  max-width: 40em;
  width: 100%;
  background: #fff;
  border-radius: var(--cr-radius-card);
  box-shadow: var(--cr-card-ring), var(--cr-shadow-lg);
  overflow: hidden;
}

.mt-cr__done-body { padding: 48px 48px 40px; }

.mt-cr__done-badge {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 24px;
}

.mt-cr__done-check {
  width: 34px;
  height: 34px;
  border-radius: var(--cr-radius-pill);
  background: var(--cr-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
}

.mt-cr__done-badge span {
  font-weight: 600;
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--cr-muted-fg);
}

.mt-cr__done-title {
  margin: 0;
  font-weight: 700;
  font-size: 2.75rem;
  line-height: 1.05;
  letter-spacing: -0.025em;
}

.mt-cr__done-lead {
  margin: 14px 0 32px;
  max-width: 26em;
  font-size: 1.125rem;
  line-height: 1.55;
  color: var(--cr-muted-fg);
}

.mt-cr__steps { display: flex; flex-direction: column; }

.mt-cr__step {
  display: flex;
  align-items: baseline;
  gap: 16px;
  padding: 14px 0;
  border-top: 1px solid var(--cr-border);
}

.mt-cr__step-n {
  font-family: var(--cr-font-mono);
  font-size: 0.8125rem;
  font-feature-settings: "tnum";
  color: var(--cr-muted-fg);
  flex: none;
}

.mt-cr__step-text { font-size: 1rem; line-height: 1.55; }

/* -------------------------------------------------------------
   One-Take Manual banner on the confirmation card
   ------------------------------------------------------------- */

.mt-cr__otm {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 28px 48px;
  background: var(--cr-primary);
  color: #000;
  text-decoration: none;
  transition: background-color 150ms;
}

.mt-cr__otm:hover { background: var(--cr-primary-hover); color: #000; }

.mt-cr__otm > span { display: block; }

.mt-cr__otm-eyebrow {
  display: block;
  font-weight: 600;
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: oklch(0 0 0 / 0.55);
  margin-bottom: 6px;
}

.mt-cr__otm-title {
  display: block;
  font-weight: 700;
  font-size: 20px;
  letter-spacing: -0.01em;
  color: #000;
}

.mt-cr__otm-body {
  display: block;
  font-size: 0.875rem;
  line-height: 1.5;
  color: oklch(0 0 0 / 0.65);
  margin-top: 4px;
}

.mt-cr__otm svg { flex: none; }

/* -------------------------------------------------------------
   Screen switching
   ------------------------------------------------------------- */

.mt-cr [hidden] { display: none !important; }

/* Visually hidden but reachable by assistive tech. */
.mt-cr__sr {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* -------------------------------------------------------------
   Responsive — the mockup is desktop-only (1fr 1fr, no breakpoint)
   ------------------------------------------------------------- */

@media (max-width: 880px) {
  .mt-cr { padding: 40px 20px 64px; }

  .mt-cr__title { font-size: 2.75rem; margin-bottom: 28px; }

  .mt-cr__card { grid-template-columns: 1fr; border-radius: 1.75rem; }

  /* "Now" first: it is the impatient path. */
  .mt-cr__col { padding: 32px 24px 28px; }

  .mt-cr__col--later {
    padding: 32px 24px 32px;
    border-left: 0;
    border-top: 1px solid var(--cr-border);
  }

  .mt-cr__done-body { padding: 32px 24px 28px; }
  .mt-cr__done-title { font-size: 2rem; }
  .mt-cr__done-card { border-radius: 1.75rem; }
  .mt-cr__otm { padding: 24px; }

  .mt-cr__footer { margin-top: 32px; gap: 16px; }
  .mt-cr__cta-primary { width: 100%; font-size: 16px; padding: 0 20px; }
}

@media (max-width: 420px) {
  .mt-cr__slots,
  .mt-cr__skeleton { grid-template-columns: repeat(2, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
  .mt-cr *,
  .mt-cr *::before,
  .mt-cr *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* =============================================================
   The footer band
   -------------------------------------------------------------
   The same grey band that used to hold the HubSpot "Talk to us"
   form, on every page the band shows on. Deliberately NOT the
   theme's .talk-to-us-footer class: main.css styles that band's
   inputs and submit through descendant selectors that out-specify
   every .mt-cr__* rule, so the band takes its own name and its own
   type instead of fighting them.

   Tokens are literals here rather than var(--cr-*): those are
   scoped to .mt-cr on purpose, and the band is its sibling, not
   its child. The two values below are neutral-50 and the base
   foreground, straight from the block above.
   ============================================================= */

.mt-cr-band {
  background: oklch(0.985 0.002 285.882);
  padding: 72px 24px 80px;
  font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
  color: oklch(0.141 0.005 285.823);
}

.mt-cr-band__header {
  width: 100%;
  max-width: 1000px;
  margin: 0 auto 28px;
}

/* Smaller than the page's 4rem title: the band is a closing offer
   under someone else's page, not the page. */
.mt-cr-band__title {
  margin: 0 0 10px;
  font-weight: 700;
  font-size: 2.5rem;
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: inherit;
}

.mt-cr-band__sub {
  margin: 0;
  font-size: 1.0625rem;
  line-height: 1.55;
  color: oklch(0.552 0.016 285.938);
}

/* The band owns the padding and the ground, so the block drops both
   and only keeps the width the two of them share. */
.mt-cr--embedded {
  padding: 0;
  scroll-margin-top: 24px;
}

@media (max-width: 880px) {
  .mt-cr-band { padding: 48px 20px 56px; }
  .mt-cr-band__header { margin-bottom: 22px; }
  .mt-cr-band__title { font-size: 2rem; }
  .mt-cr-band__sub { font-size: 1rem; }
}

/* The Later column's way back to a callback, for anyone the slots are too far out for. */
.mt-cr__sooner { margin-top: 20px; }