/* ============================================================
   Repeat Revenue Advisors — site stylesheet
   Sections 1–3 are copied verbatim from the Claude Design export
   (design system tokens + components, marketing kit). Edit the
   tokens there, not per page. Section 4 holds production overrides,
   section 5 the page layouts that were inline styles in the design.
   Source archive: design-source/RRA Call Confirmation Page.zip
   ============================================================ */

/* ---- 1. Design tokens -------------------------------------- */

/* tokens/colors.css */
/* ============================================================
   Repeat Revenue Advisors — Color tokens
   ------------------------------------------------------------
   Palette derived directly from the brand mark:
     navy  #284068  · gold  #F8D060  · teal  #386878
   Base ramps first, then semantic aliases. Consume the
   semantic aliases in product work; reach for raw ramps only
   when a semantic token doesn't exist yet.
   ============================================================ */

:root {
  /* ---- Navy (primary / ink) ---------------------------------- */
  --navy-50:  #edeff4;
  --navy-100: #d6dce6;
  --navy-200: #aab4c5;
  --navy-300: #7e8ca4;
  --navy-400: #536686;
  --navy-500: #3a527a;
  --navy-600: #284068;   /* brand anchor */
  --navy-700: #21385b;
  --navy-800: #1a2e4a;
  --navy-900: #142338;   /* deep ink */
  --navy-950: #0e1828;

  /* ---- Gold (accent / highlight) ----------------------------- */
  --gold-50:  #fffbf0;
  --gold-100: #fef4d8;
  --gold-200: #fce8ac;
  --gold-300: #fbdc86;
  --gold-400: #f9d573;
  --gold-500: #f8d060;   /* brand anchor */
  --gold-600: #e7bb43;
  --gold-700: #be9628;
  --gold-800: #8f6f18;

  /* ---- Teal (secondary / support) ---------------------------- */
  --teal-50:  #ebf1f2;
  --teal-100: #d6e1e4;
  --teal-200: #aec3c9;
  --teal-300: #85a4ae;
  --teal-400: #5c8693;
  --teal-500: #386878;   /* brand anchor */
  --teal-600: #2f5765;
  --teal-700: #274954;
  --teal-800: #1e3841;

  /* ---- Neutrals (cool gray, faint navy undertone) ------------ */
  --neutral-0:   #ffffff;
  --neutral-50:  #f6f7f9;
  --neutral-100: #eef0f3;
  --neutral-200: #e2e6eb;
  --neutral-300: #cdd3db;
  --neutral-400: #a6aeba;
  --neutral-500: #78818f;
  --neutral-600: #576170;
  --neutral-700: #3e4753;
  --neutral-800: #29303a;
  --neutral-900: #171c23;

  /* ---- Positive (revenue up) --------------------------------- */
  --positive-50:  #e7f4ee;
  --positive-100: #c6e7d6;
  --positive-500: #1e8e63;
  --positive-600: #157a54;
  --positive-700: #0f5f42;

  /* ---- Negative (revenue down / error) ----------------------- */
  --negative-50:  #fbecec;
  --negative-100: #f5cfcf;
  --negative-500: #cb4141;
  --negative-600: #b23036;
  --negative-700: #8f2529;

  /* ---- Warning (deeper than brand gold) ---------------------- */
  --warning-50:  #fcf0e0;
  --warning-100: #f8dcb6;
  --warning-500: #d98a2b;
  --warning-600: #b96f1c;

  /* ============================================================
     Semantic aliases — prefer these in product work
     ============================================================ */

  /* Brand */
  --brand-navy: var(--navy-600);
  --brand-gold: var(--gold-500);
  --brand-teal: var(--teal-500);
  --brand-ink:  var(--navy-900);

  /* Text */
  --text-strong:  var(--navy-900);
  --text-body:    var(--neutral-700);
  --text-muted:   var(--neutral-500);
  --text-subtle:  var(--neutral-400);
  --text-inverse: #ffffff;
  --text-on-gold: var(--navy-900);
  --text-on-navy: var(--navy-50);
  --text-brand:   var(--navy-600);

  /* Links */
  --link:        var(--navy-600);
  --link-hover:  var(--teal-600);
  --link-visited: var(--navy-700);

  /* Surfaces */
  --surface-page:      var(--neutral-50);
  --surface-card:      var(--neutral-0);
  --surface-sunken:    var(--neutral-100);
  --surface-hover:     var(--neutral-100);
  --surface-active:    var(--neutral-200);
  --surface-navy:      var(--navy-600);
  --surface-navy-deep: var(--navy-900);
  --surface-cream:     var(--gold-50);
  --surface-teal-tint: var(--teal-50);

  /* Borders */
  --border-subtle:  var(--neutral-200);
  --border-default: var(--neutral-300);
  --border-strong:  var(--neutral-400);
  --border-navy:    var(--navy-600);
  --border-focus:   var(--teal-500);

  /* Actions — primary (navy) */
  --action-primary-bg:       var(--navy-600);
  --action-primary-bg-hover: var(--navy-700);
  --action-primary-bg-active:var(--navy-800);
  --action-primary-text:     #ffffff;

  /* Actions — accent (gold) */
  --action-accent-bg:        var(--gold-500);
  --action-accent-bg-hover:  var(--gold-600);
  --action-accent-bg-active: var(--gold-700);
  --action-accent-text:      var(--navy-900);

  /* Actions — secondary / ghost / danger */
  --action-secondary-border: var(--neutral-300);
  --action-secondary-text:   var(--navy-600);
  --action-ghost-text:       var(--navy-600);
  --action-danger-bg:        var(--negative-500);
  --action-danger-bg-hover:  var(--negative-600);

  /* Status */
  --status-positive: var(--positive-500);
  --status-negative: var(--negative-500);
  --status-warning:  var(--warning-500);
  --status-info:     var(--teal-500);

  /* Data-viz series */
  --data-1: var(--navy-600);
  --data-2: var(--gold-500);
  --data-3: var(--teal-500);
  --data-4: var(--navy-300);
  --data-5: var(--gold-700);
  --data-positive: var(--positive-500);
  --data-negative: var(--negative-500);
}

/* tokens/typography.css */
/* ============================================================
   Repeat Revenue Advisors — Typography tokens
   ------------------------------------------------------------
   Display  → Space Grotesk  (geometric, confident, great figs)
   Body/UI  → Hanken Grotesk (humanist, highly legible)
   Mono     → Space Mono     (kickers, data labels, metrics)
   ============================================================ */

:root {
  /* ---- Families --------------------------------------------- */
  --font-display: "Space Grotesk", ui-sans-serif, system-ui, sans-serif;
  --font-sans:    "Hanken Grotesk", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono:    "Space Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;

  /* ---- Weights ---------------------------------------------- */
  --fw-regular:   400; /* @kind other */
  --fw-medium:    500; /* @kind other */
  --fw-semibold:  600; /* @kind other */
  --fw-bold:      700; /* @kind other */
  --fw-extrabold: 800; /* @kind other */

  /* ---- Size scale (base 16px, ~1.25 ratio) ------------------ */
  --text-2xs:  0.6875rem;  /* 11px — mono micro-labels          */
  --text-xs:   0.75rem;    /* 12px                              */
  --text-sm:   0.875rem;   /* 14px                              */
  --text-base: 1rem;       /* 16px — body                       */
  --text-md:   1.0625rem;  /* 17px — comfortable body           */
  --text-lg:   1.25rem;    /* 20px — lead / large body          */
  --text-xl:   1.5rem;     /* 24px — H4                         */
  --text-2xl:  1.875rem;   /* 30px — H3                         */
  --text-3xl:  2.375rem;   /* 38px — H2                         */
  --text-4xl:  3rem;       /* 48px — H1                         */
  --text-5xl:  3.75rem;    /* 60px — display                    */
  --text-6xl:  4.75rem;    /* 76px — hero display               */

  /* ---- Line heights ----------------------------------------- */
  --leading-none:    1;
  --leading-tight:   1.05;   /* big display                     */
  --leading-snug:    1.16;   /* headings                        */
  --leading-heading: 1.22;
  --leading-normal:  1.5;    /* body                            */
  --leading-relaxed: 1.65;   /* long-form                       */

  /* ---- Letter spacing --------------------------------------- */
  --tracking-tighter: -0.03em; /* hero display                  */
  --tracking-tight:   -0.02em; /* headings                      */
  --tracking-snug:    -0.01em;
  --tracking-normal:  0;
  --tracking-wide:    0.02em;
  --tracking-label:   0.08em;  /* mono uppercase kickers        */
  --tracking-caps:    0.14em;  /* small caps labels             */

  /* ---- Reusable role bundles (font shorthand fragments) ------ */
  --kicker-font: var(--fw-bold) var(--text-xs)/1 var(--font-mono);
}

/* tokens/spacing.css */
/* ============================================================
   Repeat Revenue Advisors — Spacing & layout tokens
   ------------------------------------------------------------
   4px base grid. Steps stay tight through --space-4 then open
   up for section rhythm.
   ============================================================ */

:root {
  --space-0:    0;
  --space-0-5:  0.125rem;  /* 2px  */
  --space-1:    0.25rem;   /* 4px  */
  --space-1-5:  0.375rem;  /* 6px  */
  --space-2:    0.5rem;    /* 8px  */
  --space-2-5:  0.625rem;  /* 10px */
  --space-3:    0.75rem;   /* 12px */
  --space-4:    1rem;      /* 16px */
  --space-5:    1.5rem;    /* 24px */
  --space-6:    2rem;      /* 32px */
  --space-7:    3rem;      /* 48px */
  --space-8:    4rem;      /* 64px */
  --space-9:    6rem;      /* 96px */
  --space-10:   8rem;      /* 128px */

  /* ---- Layout ------------------------------------------------ */
  --container-max:    1200px;  /* standard content column        */
  --container-wide:   1360px;  /* wide marketing sections         */
  --container-narrow: 760px;   /* long-form / forms               */
  --gutter:  clamp(1.25rem, 5vw, 4rem); /* @kind spacing — page side padding */

  /* ---- Section rhythm --------------------------------------- */
  --section-y:       clamp(4rem, 8vw, 8rem); /* @kind spacing — marketing bands */
  --section-y-tight: clamp(2.5rem, 5vw, 4.5rem); /* @kind spacing */
}

/* tokens/effects.css */
/* ============================================================
   Repeat Revenue Advisors — Effects tokens
   ------------------------------------------------------------
   Radii, borders, elevation, motion, z-index.
   Shadows are cool / navy-tinted (rgba of --navy-900) so
   elevation reads as part of the same family, never gray mud.
   ============================================================ */

:root {
  /* ---- Radii ------------------------------------------------- */
  --radius-xs:   4px;
  --radius-sm:   6px;
  --radius-md:   10px;
  --radius-lg:   14px;
  --radius-xl:   20px;
  --radius-2xl:  28px;
  --radius-pill: 999px;
  --radius-round: 50%;

  /* ---- Border widths ---------------------------------------- */
  --border-width:       1px;
  --border-width-thick: 1.5px;
  --border-width-heavy: 2px;

  /* ---- Elevation (navy-tinted) ------------------------------ */
  --shadow-xs: 0 1px 2px rgba(14,24,40,0.06);
  --shadow-sm: 0 1px 3px rgba(14,24,40,0.08), 0 1px 2px rgba(14,24,40,0.05);
  --shadow-md: 0 4px 12px rgba(14,24,40,0.09), 0 2px 4px rgba(14,24,40,0.05);
  --shadow-lg: 0 12px 28px rgba(14,24,40,0.12), 0 4px 8px rgba(14,24,40,0.06);
  --shadow-xl: 0 24px 48px rgba(14,24,40,0.16), 0 8px 16px rgba(14,24,40,0.08);
  --shadow-inset: inset 0 1px 2px rgba(14,24,40,0.08);

  /* Focus ring — teal halo */
  --ring-focus: 0 0 0 3px rgba(56,104,120,0.35);
  /* Accent glow — gold, for hover on accent CTAs (use sparingly) */
  --glow-gold: 0 8px 24px rgba(248,208,96,0.45);

  /* ---- Motion ----------------------------------------------- */
  --duration-fast:   120ms; /* @kind other */
  --duration-base:   200ms; /* @kind other */
  --duration-slow:   320ms; /* @kind other */
  --duration-slower: 500ms; /* @kind other */

  --ease-standard: cubic-bezier(0.2, 0, 0, 1); /* @kind other */
  --ease-out:      cubic-bezier(0.16, 1, 0.3, 1); /* @kind other */
  --ease-in-out:   cubic-bezier(0.65, 0, 0.35, 1); /* @kind other */
  --ease-spring:   cubic-bezier(0.34, 1.4, 0.64, 1); /* @kind other */

  /* ---- Z-index --------------------------------------------- */
  --z-base:     1; /* @kind other */
  --z-dropdown: 100; /* @kind other */
  --z-sticky:   200; /* @kind other */
  --z-overlay:  300; /* @kind other */
  --z-modal:    400; /* @kind other */
  --z-toast:    500; /* @kind other */
  --z-tooltip:  600; /* @kind other */
}

/* tokens/base.css */
/* ============================================================
   Repeat Revenue Advisors — Base layer
   ------------------------------------------------------------
   Light, intentional element defaults. Not an aggressive reset.
   Consumers link styles.css and inherit these.
   ============================================================ */

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

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

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--text-body);
  background: var(--surface-page);
  font-weight: var(--fw-regular);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* Headings default to the display face, tight tracking, strong ink */
h1, h2, h3, h4, h5, h6 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-tight);
  color: var(--text-strong);
}

p {
  margin: 0;
}

/* Links — always defined so editor-added links aren't browser-blue */
a {
  color: var(--link);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.14em;
  text-decoration-color: color-mix(in srgb, var(--link) 40%, transparent);
  transition: color var(--duration-fast) var(--ease-standard),
              text-decoration-color var(--duration-fast) var(--ease-standard);
}

a:hover {
  color: var(--link-hover);
  text-decoration-color: currentColor;
}

a:visited {
  color: var(--link-visited);
}

/* Media */
img, svg, video, canvas {
  display: block;
  max-width: 100%;
}

/* Forms inherit type */
button, input, select, textarea {
  font: inherit;
  color: inherit;
}

/* Mono numerals & code */
code, kbd, samp, pre {
  font-family: var(--font-mono);
  font-size: 0.92em;
}

/* Brand selection */
::selection {
  background: var(--gold-300);
  color: var(--navy-900);
}

/* Consistent, on-brand focus */
:focus-visible {
  outline: 2px solid var(--border-focus);
  outline-offset: 2px;
}

hr {
  border: none;
  border-top: var(--border-width) solid var(--border-subtle);
  margin: var(--space-6) 0;
}

/* ---- 2. Components (Button, Card, Badge) -------------------- */

/* components/actions/actions.css */
/* ============================================================
   Actions — Button & IconButton
   ============================================================ */

.rra-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  font-family: var(--font-sans);
  font-weight: var(--fw-semibold);
  line-height: 1;
  letter-spacing: var(--tracking-snug);
  border-radius: var(--radius-md);
  border: var(--border-width-thick) solid transparent;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  user-select: none;
  transition: background var(--duration-fast) var(--ease-standard),
    border-color var(--duration-fast) var(--ease-standard),
    color var(--duration-fast) var(--ease-standard),
    box-shadow var(--duration-fast) var(--ease-standard),
    transform var(--duration-fast) var(--ease-standard);
}
.rra-btn:focus-visible {
  outline: none;
  box-shadow: var(--ring-focus);
}
.rra-btn:active {
  transform: translateY(1px);
}
.rra-btn[disabled],
.rra-btn.is-loading {
  cursor: not-allowed;
  opacity: 0.5;
  transform: none;
}
.rra-btn--block {
  display: flex;
  width: 100%;
}

/* Sizes */
.rra-btn--sm {
  height: 34px;
  padding: 0 14px;
  font-size: var(--text-sm);
  border-radius: var(--radius-sm);
}
.rra-btn--md {
  height: 42px;
  padding: 0 var(--space-5);
}
.rra-btn--lg {
  height: 52px;
  padding: 0 var(--space-6);
  font-size: var(--text-md);
  border-radius: var(--radius-lg);
}

/* Icons + label */
.rra-btn__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.rra-btn__icon svg {
  display: block;
  width: 1.15em;
  height: 1.15em;
}
.rra-btn.is-loading .rra-btn__label,
.rra-btn.is-loading .rra-btn__icon {
  visibility: hidden;
}
.rra-btn__spinner {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 1.1em;
  height: 1.1em;
  margin: -0.55em 0 0 -0.55em;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: rra-spin 0.62s linear infinite;
}
@keyframes rra-spin {
  to {
    transform: rotate(360deg);
  }
}

/* Variants */
.rra-btn--primary {
  background: var(--action-primary-bg);
  border-color: var(--action-primary-bg);
  color: var(--action-primary-text);
}
.rra-btn--primary:hover {
  background: var(--action-primary-bg-hover);
  border-color: var(--action-primary-bg-hover);
}
.rra-btn--primary:active {
  background: var(--action-primary-bg-active);
}

.rra-btn--accent {
  background: var(--action-accent-bg);
  border-color: var(--action-accent-bg);
  color: var(--action-accent-text);
}
.rra-btn--accent:hover {
  background: var(--action-accent-bg-hover);
  border-color: var(--action-accent-bg-hover);
  box-shadow: var(--glow-gold);
}
.rra-btn--accent:active {
  background: var(--action-accent-bg-active);
  box-shadow: none;
}

.rra-btn--secondary {
  background: var(--surface-card);
  border-color: var(--action-secondary-border);
  color: var(--action-secondary-text);
}
.rra-btn--secondary:hover {
  background: var(--surface-hover);
  border-color: var(--border-strong);
}
.rra-btn--secondary:active {
  background: var(--surface-active);
}

.rra-btn--ghost {
  background: transparent;
  border-color: transparent;
  color: var(--action-ghost-text);
}
.rra-btn--ghost:hover {
  background: var(--surface-hover);
}
.rra-btn--ghost:active {
  background: var(--surface-active);
}

.rra-btn--danger {
  background: var(--action-danger-bg);
  border-color: var(--action-danger-bg);
  color: #fff;
}
.rra-btn--danger:hover {
  background: var(--action-danger-bg-hover);
  border-color: var(--action-danger-bg-hover);
}

/* ---- IconButton -------------------------------------------- */
.rra-iconbtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-md);
  border: var(--border-width-thick) solid transparent;
  cursor: pointer;
  padding: 0;
  transition: background var(--duration-fast) var(--ease-standard),
    border-color var(--duration-fast) var(--ease-standard),
    color var(--duration-fast) var(--ease-standard),
    box-shadow var(--duration-fast) var(--ease-standard);
}
.rra-iconbtn:focus-visible {
  outline: none;
  box-shadow: var(--ring-focus);
}
.rra-iconbtn:active {
  transform: translateY(1px);
}
.rra-iconbtn[disabled] {
  cursor: not-allowed;
  opacity: 0.5;
}
.rra-iconbtn__icon {
  display: inline-flex;
}
.rra-iconbtn__icon svg {
  display: block;
  width: 1.2em;
  height: 1.2em;
}
.rra-iconbtn--sm {
  width: 34px;
  height: 34px;
  font-size: var(--text-sm);
  border-radius: var(--radius-sm);
}
.rra-iconbtn--md {
  width: 42px;
  height: 42px;
  font-size: var(--text-base);
}
.rra-iconbtn--lg {
  width: 52px;
  height: 52px;
  font-size: var(--text-md);
  border-radius: var(--radius-lg);
}
.rra-iconbtn--primary {
  background: var(--action-primary-bg);
  border-color: var(--action-primary-bg);
  color: #fff;
}
.rra-iconbtn--primary:hover {
  background: var(--action-primary-bg-hover);
}
.rra-iconbtn--accent {
  background: var(--action-accent-bg);
  border-color: var(--action-accent-bg);
  color: var(--navy-900);
}
.rra-iconbtn--accent:hover {
  background: var(--action-accent-bg-hover);
}
.rra-iconbtn--secondary {
  background: var(--surface-card);
  border-color: var(--action-secondary-border);
  color: var(--action-secondary-text);
}
.rra-iconbtn--secondary:hover {
  background: var(--surface-hover);
  border-color: var(--border-strong);
}
.rra-iconbtn--ghost {
  background: transparent;
  color: var(--action-ghost-text);
}
.rra-iconbtn--ghost:hover {
  background: var(--surface-hover);
}
.rra-iconbtn--danger {
  background: var(--action-danger-bg);
  border-color: var(--action-danger-bg);
  color: #fff;
}
.rra-iconbtn--danger:hover {
  background: var(--action-danger-bg-hover);
}

/* components/data-display/data-display.css */
/* ============================================================
   Data display — Card, Badge, Tag, Stat
   ============================================================ */

/* ---- Card ------------------------------------------------- */
.rra-card {
  position: relative;
  border-radius: var(--radius-lg);
  background: var(--surface-card);
  color: var(--text-body);
  overflow: clip;
}
.rra-card--default {
  border: var(--border-width) solid var(--border-subtle);
  box-shadow: var(--shadow-sm);
}
.rra-card--elevated {
  border: var(--border-width) solid transparent;
  box-shadow: var(--shadow-lg);
}
.rra-card--outline {
  border: var(--border-width) solid var(--border-default);
  box-shadow: none;
}
.rra-card--navy {
  background: var(--navy-600);
  color: var(--navy-100);
  border: var(--border-width) solid var(--navy-600);
}
.rra-card--navy .rra-card__title { color: #fff; }
.rra-card--navy .rra-card__header { border-color: rgba(255, 255, 255, 0.12); }
.rra-card--navy .rra-card__footer { border-color: rgba(255, 255, 255, 0.12); }
.rra-card--cream {
  background: var(--surface-cream);
  border: var(--border-width) solid var(--gold-200);
}
.rra-card--interactive {
  cursor: pointer;
  transition: transform var(--duration-base) var(--ease-out),
    box-shadow var(--duration-base) var(--ease-out);
}
.rra-card--interactive:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-lg);
}

.rra-card__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-5) var(--space-5) var(--space-4);
}
.rra-card__heading { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.rra-card__title {
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  font-size: var(--text-lg);
  letter-spacing: var(--tracking-snug);
  color: var(--navy-900);
}
.rra-card__subtitle { font-size: var(--text-sm); color: var(--text-muted); }
.rra-card__actions { display: inline-flex; gap: var(--space-2); flex: none; }
.rra-card__body { padding: 0 var(--space-5) var(--space-5); }
.rra-card__header + .rra-card__body { padding-top: 0; }
.rra-card__footer {
  padding: var(--space-4) var(--space-5);
  border-top: var(--border-width) solid var(--border-subtle);
  font-size: var(--text-sm);
  color: var(--text-muted);
}

/* ---- Badge ------------------------------------------------ */
.rra-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-sans);
  font-weight: var(--fw-semibold);
  line-height: 1;
  white-space: nowrap;
  border-radius: var(--radius-pill);
  border: var(--border-width) solid transparent;
}
.rra-badge--sm { font-size: var(--text-2xs); padding: 4px 8px; }
.rra-badge--md { font-size: var(--text-xs); padding: 5px 10px; }
.rra-badge__dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.rra-badge__icon { display: inline-flex; }
.rra-badge__icon svg { width: 0.95em; height: 0.95em; display: block; }

.rra-badge--neutral  { background: var(--neutral-100); color: var(--neutral-700); border-color: var(--neutral-200); }
.rra-badge--positive { background: var(--positive-50); color: var(--positive-700); border-color: var(--positive-100); }
.rra-badge--negative { background: var(--negative-50); color: var(--negative-700); border-color: var(--negative-100); }
.rra-badge--warning  { background: var(--warning-50); color: var(--warning-600); border-color: var(--warning-100); }
.rra-badge--info     { background: var(--teal-50); color: var(--teal-700); border-color: var(--teal-100); }
.rra-badge--gold     { background: var(--gold-100); color: var(--gold-800); border-color: var(--gold-200); }
.rra-badge--navy     { background: var(--navy-600); color: #fff; border-color: var(--navy-600); }

/* ---- Tag -------------------------------------------------- */
.rra-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: var(--fw-medium);
  color: var(--navy-800);
  background: var(--neutral-100);
  border: var(--border-width) solid var(--border-subtle);
  border-radius: var(--radius-sm);
  padding: 4px 6px 4px 10px;
  line-height: 1.2;
}
.rra-tag:has(.rra-tag__remove) { padding-right: 4px; }
.rra-tag:not(:has(.rra-tag__remove)) { padding-right: 10px; }
.rra-tag__icon { display: inline-flex; color: var(--text-muted); }
.rra-tag__icon svg { width: 0.95em; height: 0.95em; display: block; }
.rra-tag__remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border: none;
  background: transparent;
  color: var(--text-muted);
  border-radius: var(--radius-xs);
  cursor: pointer;
  padding: 0;
  transition: background var(--duration-fast), color var(--duration-fast);
}
.rra-tag__remove svg { width: 12px; height: 12px; }
.rra-tag__remove:hover { background: var(--neutral-200); color: var(--navy-800); }

/* ---- Stat ------------------------------------------------- */
.rra-stat { display: flex; flex-direction: column; gap: var(--space-1); font-family: var(--font-sans); }
.rra-stat__icon {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-md);
  background: var(--teal-50);
  color: var(--teal-600);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--space-2);
}
.rra-stat__icon svg { width: 20px; height: 20px; }
.rra-stat__label {
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
  color: var(--text-muted);
}
.rra-stat__value {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  color: var(--navy-900);
  line-height: 1.02;
  letter-spacing: var(--tracking-tight);
  font-variant-numeric: tabular-nums;
}
.rra-stat--md .rra-stat__value { font-size: var(--text-3xl); }
.rra-stat--lg .rra-stat__value { font-size: var(--text-4xl); }
.rra-stat__meta { display: flex; align-items: center; gap: var(--space-2); margin-top: var(--space-1); flex-wrap: wrap; }
.rra-stat__delta {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-weight: var(--fw-semibold);
  font-size: var(--text-sm);
  font-variant-numeric: tabular-nums;
}
.rra-stat__arrow { width: 10px; height: 10px; }
.rra-stat__delta--up { color: var(--positive-600); }
.rra-stat__delta--down { color: var(--negative-600); }
.rra-stat__delta--flat { color: var(--text-muted); }
.rra-stat__caption { font-size: var(--text-sm); color: var(--text-muted); }

/* components/forms/forms.css (contact form) */
/* ============================================================
   Forms — Input, Textarea, Select, Checkbox, Radio, Switch
   ============================================================ */

/* ---- Shared field chrome ---------------------------------- */
.rra-field {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  font-family: var(--font-sans);
}
.rra-field__label {
  font-size: var(--text-sm);
  font-weight: var(--fw-semibold);
  color: var(--navy-900);
  line-height: 1.3;
}
.rra-field__req {
  color: var(--negative-500);
}
.rra-field__msg {
  font-size: var(--text-xs);
  color: var(--text-muted);
  line-height: 1.4;
}
.rra-field__msg--error {
  color: var(--negative-600);
}

/* ---- Input ------------------------------------------------ */
.rra-input {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  background: var(--surface-card);
  border: var(--border-width) solid var(--border-default);
  border-radius: var(--radius-md);
  transition: border-color var(--duration-fast) var(--ease-standard),
    box-shadow var(--duration-fast) var(--ease-standard);
}
.rra-input:hover {
  border-color: var(--border-strong);
}
.rra-input:focus-within {
  border-color: var(--border-focus);
  box-shadow: var(--ring-focus);
}
.rra-input[data-invalid="true"] {
  border-color: var(--negative-500);
}
.rra-input[data-invalid="true"]:focus-within {
  box-shadow: 0 0 0 3px rgba(203, 65, 65, 0.26);
}
.rra-input:has(.rra-input__control:disabled) {
  background: var(--surface-sunken);
  border-color: var(--border-default);
}
.rra-input__control {
  flex: 1;
  min-width: 0;
  border: none;
  background: transparent;
  outline: none;
  color: var(--navy-900);
  font: inherit;
}
.rra-input__control::placeholder {
  color: var(--text-subtle);
}
.rra-input__control:disabled {
  color: var(--text-subtle);
  cursor: not-allowed;
}
.rra-input__affix {
  display: inline-flex;
  align-items: center;
  color: var(--text-muted);
  font-size: 0.95em;
  white-space: nowrap;
}
.rra-input__affix svg {
  width: 1.1em;
  height: 1.1em;
  display: block;
}
.rra-input--sm { height: 34px; padding: 0 10px; font-size: var(--text-sm); border-radius: var(--radius-sm); }
.rra-input--md { height: 42px; padding: 0 12px; font-size: var(--text-base); }
.rra-input--lg { height: 50px; padding: 0 14px; font-size: var(--text-md); }

/* ---- Textarea --------------------------------------------- */
.rra-textarea__control {
  font: inherit;
  color: var(--navy-900);
  background: var(--surface-card);
  border: var(--border-width) solid var(--border-default);
  border-radius: var(--radius-md);
  padding: 10px 12px;
  resize: vertical;
  outline: none;
  min-height: 84px;
  transition: border-color var(--duration-fast) var(--ease-standard),
    box-shadow var(--duration-fast) var(--ease-standard);
}
.rra-textarea__control::placeholder { color: var(--text-subtle); }
.rra-textarea__control:hover { border-color: var(--border-strong); }
.rra-textarea__control:focus { border-color: var(--border-focus); box-shadow: var(--ring-focus); }
.rra-textarea__control[data-invalid="true"] { border-color: var(--negative-500); }
.rra-textarea__control:disabled { background: var(--surface-sunken); color: var(--text-subtle); cursor: not-allowed; }

/* ---- Select ----------------------------------------------- */
.rra-select { position: relative; display: flex; }
.rra-select__control {
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  font: inherit;
  color: var(--navy-900);
  background: var(--surface-card);
  border: var(--border-width) solid var(--border-default);
  border-radius: var(--radius-md);
  outline: none;
  cursor: pointer;
  transition: border-color var(--duration-fast) var(--ease-standard),
    box-shadow var(--duration-fast) var(--ease-standard);
}
.rra-select:hover .rra-select__control { border-color: var(--border-strong); }
.rra-select__control:focus { border-color: var(--border-focus); box-shadow: var(--ring-focus); }
.rra-select[data-invalid="true"] .rra-select__control { border-color: var(--negative-500); }
.rra-select__control:disabled { background: var(--surface-sunken); color: var(--text-subtle); cursor: not-allowed; }
.rra-select__chevron {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  color: var(--neutral-500);
  pointer-events: none;
}
.rra-select--sm .rra-select__control { height: 34px; padding: 0 34px 0 10px; font-size: var(--text-sm); border-radius: var(--radius-sm); }
.rra-select--md .rra-select__control { height: 42px; padding: 0 36px 0 12px; font-size: var(--text-base); }
.rra-select--lg .rra-select__control { height: 50px; padding: 0 38px 0 14px; font-size: var(--text-md); }

/* ---- Checkbox --------------------------------------------- */
.rra-check,
.rra-radio,
.rra-switch {
  display: inline-flex;
  align-items: flex-start;
  gap: var(--space-2-5);
  cursor: pointer;
  font-family: var(--font-sans);
}
.rra-check[data-disabled="true"],
.rra-radio[data-disabled="true"],
.rra-switch[data-disabled="true"] {
  cursor: not-allowed;
  opacity: 0.55;
}
.rra-check__input,
.rra-radio__input,
.rra-switch__input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  margin: 0;
}
.rra-check__box {
  flex: none;
  width: 20px;
  height: 20px;
  margin-top: 1px;
  border-radius: var(--radius-sm);
  border: var(--border-width-thick) solid var(--border-strong);
  background: var(--surface-card);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  transition: background var(--duration-fast) var(--ease-standard),
    border-color var(--duration-fast) var(--ease-standard);
}
.rra-check__tick {
  width: 14px;
  height: 14px;
  opacity: 0;
  transform: scale(0.6);
  transition: opacity var(--duration-fast), transform var(--duration-fast) var(--ease-spring);
}
.rra-check__dash {
  position: absolute;
  width: 9px;
  height: 2px;
  border-radius: 1px;
  background: #fff;
  opacity: 0;
}
.rra-check__input:checked + .rra-check__box {
  background: var(--navy-600);
  border-color: var(--navy-600);
}
.rra-check__input:checked + .rra-check__box .rra-check__tick { opacity: 1; transform: scale(1); }
.rra-check__input:indeterminate + .rra-check__box { background: var(--navy-600); border-color: var(--navy-600); }
.rra-check__input:indeterminate + .rra-check__box .rra-check__dash { opacity: 1; }
.rra-check__input:focus-visible + .rra-check__box { box-shadow: var(--ring-focus); }

.rra-check__text,
.rra-radio__text,
.rra-switch__text {
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.rra-check__label,
.rra-radio__label,
.rra-switch__label {
  font-size: var(--text-sm);
  font-weight: var(--fw-medium);
  color: var(--navy-900);
  line-height: 1.35;
}
.rra-check__hint,
.rra-radio__hint,
.rra-switch__hint {
  font-size: var(--text-xs);
  color: var(--text-muted);
  line-height: 1.35;
}

/* ---- Radio ------------------------------------------------ */
.rra-radio__mark {
  flex: none;
  width: 20px;
  height: 20px;
  margin-top: 1px;
  border-radius: 50%;
  border: var(--border-width-thick) solid var(--border-strong);
  background: var(--surface-card);
  position: relative;
  transition: background var(--duration-fast) var(--ease-standard),
    border-color var(--duration-fast) var(--ease-standard);
}
.rra-radio__mark::after {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #fff;
  transform: scale(0);
  transition: transform var(--duration-fast) var(--ease-spring);
}
.rra-radio__input:checked + .rra-radio__mark {
  background: var(--navy-600);
  border-color: var(--navy-600);
}
.rra-radio__input:checked + .rra-radio__mark::after { transform: scale(1); }
.rra-radio__input:focus-visible + .rra-radio__mark { box-shadow: var(--ring-focus); }

/* ---- Switch ----------------------------------------------- */
.rra-switch { align-items: center; }
.rra-switch__track {
  flex: none;
  width: 40px;
  height: 24px;
  border-radius: var(--radius-pill);
  background: var(--neutral-300);
  position: relative;
  transition: background var(--duration-base) var(--ease-standard);
}
.rra-switch__thumb {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #fff;
  box-shadow: var(--shadow-sm);
  transition: transform var(--duration-base) var(--ease-standard);
}
.rra-switch__input:checked + .rra-switch__track { background: var(--teal-500); }
.rra-switch__input:checked + .rra-switch__track .rra-switch__thumb { transform: translateX(16px); }
.rra-switch__input:focus-visible + .rra-switch__track { box-shadow: var(--ring-focus); }

/* ---- 3. Marketing kit -------------------------------------- */

/* ============================================================
   Marketing site — layout styles (composes the component lib)
   Prefix mk-. Token-driven; no new colors.
   ============================================================ */

.mk-page { background: var(--surface-page); color: var(--text-body); min-height: 100%; }
.mk-container { width: 100%; max-width: var(--container-max); margin: 0 auto; padding-inline: var(--gutter); }
.mk-container--wide { max-width: var(--container-wide); }

/* Icon helper (cached Lucide SVG rendered into a sized span) */
.mk-icon { display: inline-flex; align-items: center; justify-content: center; color: currentColor; }
.mk-icon svg { width: 100%; height: 100%; display: block; }

/* ---- Header ----------------------------------------------- */
.mk-header {
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
  background: color-mix(in srgb, var(--surface-page) 82%, transparent);
  -webkit-backdrop-filter: saturate(1.2) blur(10px);
  backdrop-filter: saturate(1.2) blur(10px);
  border-bottom: var(--border-width) solid var(--border-subtle);
}
.mk-header__inner { display: flex; align-items: center; justify-content: space-between; height: 72px; gap: var(--space-6); }
.mk-brand { display: inline-flex; align-items: center; gap: var(--space-3); cursor: pointer; background: none; border: none; padding: 0; }
.mk-brand img { height: 34px; width: auto; }
.mk-brand__name { font-family: var(--font-display); font-weight: var(--fw-bold); font-size: var(--text-lg); letter-spacing: var(--tracking-tight); color: var(--navy-900); line-height: 1; }
.mk-brand__name .rev { color: var(--teal-600); }
.mk-nav { display: flex; align-items: center; gap: var(--space-6); }
.mk-nav__links { display: flex; align-items: center; gap: var(--space-6); }
.mk-nav__link {
  background: none; border: none; cursor: pointer;
  font-family: var(--font-sans); font-size: var(--text-sm); font-weight: var(--fw-semibold);
  color: var(--navy-800); padding: 0; text-decoration: none;
  transition: color var(--duration-fast) var(--ease-standard);
}
.mk-nav__link:hover { color: var(--teal-600); }
.mk-nav__link.is-active { color: var(--teal-600); }
@media (max-width: 720px) { .mk-nav__links { display: none; } }

/* ---- Sections --------------------------------------------- */
.mk-section { padding-block: var(--section-y); }
.mk-section--tight { padding-block: var(--section-y-tight); }
.mk-band { background: var(--surface-navy-deep); color: var(--navy-100); }
.mk-band--cream { background: var(--surface-cream); color: var(--text-body); }

.mk-kicker {
  font-family: var(--font-mono); font-weight: var(--fw-bold);
  font-size: var(--text-xs); text-transform: uppercase; letter-spacing: var(--tracking-label);
  color: var(--teal-600);
}
.mk-band .mk-kicker { color: var(--gold-500); }
.rra-card--navy .mk-kicker { color: var(--gold-500); }

.mk-h1 { font-family: var(--font-display); font-weight: var(--fw-bold); font-size: clamp(2.5rem, 5.2vw, 4.25rem); line-height: 1.03; letter-spacing: var(--tracking-tighter); color: var(--navy-900); }
.mk-h2 { font-family: var(--font-display); font-weight: var(--fw-bold); font-size: clamp(1.9rem, 3.6vw, 2.75rem); line-height: 1.1; letter-spacing: var(--tracking-tight); color: var(--navy-900); }
.mk-h3 { font-family: var(--font-display); font-weight: var(--fw-bold); font-size: var(--text-xl); line-height: 1.2; letter-spacing: var(--tracking-tight); color: var(--navy-900); }
.mk-band .mk-h1, .mk-band .mk-h2, .mk-band .mk-h3 { color: #fff; }
.mk-lead { font-size: var(--text-lg); line-height: var(--leading-normal); color: var(--text-body); }
.mk-band .mk-lead { color: var(--navy-100); }
.mk-eyebrow-gap { margin-bottom: var(--space-4); }

/* ---- Hero ------------------------------------------------- */
.mk-hero { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: var(--space-8); align-items: center; }
.mk-hero__copy { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-5); }
.mk-hero__cta { display: flex; gap: var(--space-3); flex-wrap: wrap; margin-top: var(--space-2); }
.mk-hero__panel { position: relative; }
@media (max-width: 880px) { .mk-hero { grid-template-columns: 1fr; gap: var(--space-7); } }

/* ---- Grids ------------------------------------------------ */
.mk-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-5); }
.mk-grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-5); }
@media (max-width: 880px) { .mk-grid-3 { grid-template-columns: 1fr; } .mk-grid-2 { grid-template-columns: 1fr; } }

.mk-stack { display: flex; flex-direction: column; gap: var(--space-4); }
.mk-stack--lg { gap: var(--space-6); }
.mk-section__head { max-width: 640px; display: flex; flex-direction: column; gap: var(--space-4); margin-bottom: var(--space-7); }

/* Feature card body layout */
.mk-feature { display: flex; flex-direction: column; gap: var(--space-3); height: 100%; }
.mk-feature__icon { width: 44px; height: 44px; border-radius: var(--radius-md); display: inline-flex; align-items: center; justify-content: center; background: var(--teal-50); color: var(--teal-600); }
.mk-feature__icon .mk-icon { width: 22px; height: 22px; }
.mk-feature__title { font-family: var(--font-display); font-weight: var(--fw-bold); font-size: var(--text-lg); color: var(--navy-900); letter-spacing: var(--tracking-tight); }
.mk-feature__text { color: var(--text-body); font-size: var(--text-base); line-height: var(--leading-normal); }

/* Step number */
.mk-step__num {
  font-family: var(--font-mono); font-weight: var(--fw-bold); font-size: var(--text-sm);
  color: var(--gold-700); background: var(--gold-100);
  width: 34px; height: 34px; border-radius: var(--radius-round);
  display: inline-flex; align-items: center; justify-content: center;
}

/* Big money band stats */
.mk-mathgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-6); }
@media (max-width: 880px) { .mk-mathgrid { grid-template-columns: 1fr; gap: var(--space-7); } }
.mk-math__fig { font-family: var(--font-display); font-weight: var(--fw-bold); font-size: clamp(3rem, 6vw, 4.5rem); line-height: 1; letter-spacing: var(--tracking-tight); color: #fff; font-variant-numeric: tabular-nums; }
.mk-math__fig .unit { color: var(--gold-500); }
.mk-math__label { color: var(--navy-100); font-size: var(--text-base); margin-top: var(--space-2); max-width: 26ch; }

/* Logo strip */
.mk-logos { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-6) var(--space-8); }
.mk-logos__item { font-family: var(--font-display); font-weight: var(--fw-bold); font-size: var(--text-lg); color: var(--neutral-400); letter-spacing: var(--tracking-tight); }

/* Pull quote */
.mk-quote { font-family: var(--font-display); font-weight: var(--fw-medium); font-size: clamp(1.5rem, 3vw, 2.1rem); line-height: 1.3; letter-spacing: var(--tracking-tight); color: var(--navy-900); }
.mk-quote__cite { margin-top: var(--space-4); font-size: var(--text-sm); color: var(--text-muted); font-family: var(--font-mono); text-transform: uppercase; letter-spacing: var(--tracking-label); }

/* ---- Footer ----------------------------------------------- */
.mk-footer { background: var(--navy-900); color: var(--navy-200); padding-block: var(--space-8) var(--space-6); }
.mk-footer__top { display: flex; justify-content: space-between; gap: var(--space-7); flex-wrap: wrap; padding-bottom: var(--space-7); border-bottom: 1px solid var(--navy-700); }
.mk-footer__brand { display: flex; flex-direction: column; gap: var(--space-3); max-width: 320px; }
.mk-footer__brandrow { display: inline-flex; align-items: center; gap: var(--space-3); }
.mk-footer__brandrow img { height: 32px; }
.mk-footer__name { font-family: var(--font-display); font-weight: var(--fw-bold); font-size: var(--text-lg); color: #fff; }
.mk-footer__name .rev { color: var(--gold-500); }
.mk-footer__cols { display: flex; gap: var(--space-8); flex-wrap: wrap; }
.mk-footer__col { display: flex; flex-direction: column; gap: var(--space-2-5); }
.mk-footer__coltitle { font-family: var(--font-mono); font-size: var(--text-2xs); text-transform: uppercase; letter-spacing: var(--tracking-label); color: var(--navy-300); margin-bottom: var(--space-1); }
.mk-footer__link { color: var(--navy-100); text-decoration: none; font-size: var(--text-sm); background: none; border: none; padding: 0; cursor: pointer; text-align: left; transition: color var(--duration-fast); }
.mk-footer__link:hover { color: var(--gold-500); }
.mk-footer__bottom { padding-top: var(--space-5); font-size: var(--text-xs); color: var(--navy-300); }

/* Chip that seats the navy-heavy mark on dark */
.mk-markchip { background: #fff; border-radius: var(--radius-sm); padding: 5px; display: inline-flex; }
.mk-markchip img { height: 26px; }

/* Case-study stat row collapses on small screens */
@media (max-width: 760px) { .mk-casestats { grid-template-columns: 1fr 1fr !important; } }

/* ---- 4. Production overrides ------------------------------- */

/* Page-level defaults the designs set in their <helmet> blocks. The text-wrap
   rules belong to the call confirmation design only (.mk-page), so they're
   scoped there and can't re-flow the marketing pages' headings. */
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--surface-page); color: var(--text-body); }
.mk-page h1, .mk-page h2, .mk-page h3 { text-wrap: balance; }
.mk-page p { text-wrap: pretty; }
a { color: var(--link); }
a:hover { color: var(--link-hover); }

/* Click-to-load YouTube players (assets/js/video.js) fill their 16:9 box. */
[data-video] iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* Accessibility: the design's muted grey (#78818f) is 3.7:1 on the page
   background, under the WCAG AA 4.5:1 minimum for small text. One step
   darker on the same neutral ramp passes (6.2:1) with minimal visual change. */
:root { --text-muted: var(--neutral-600); }

/* [hidden] must win over component display rules. */
[hidden] { display: none !important; }

/* Buttons rendered as links: keep the variant colour on hover/visited
   (the generic a:hover / a:visited rules otherwise recolour the label). */
a.rra-btn { text-decoration: none; }
a.rra-btn--primary, a.rra-btn--primary:hover, a.rra-btn--primary:visited { color: var(--action-primary-text); }
a.rra-btn--accent, a.rra-btn--accent:hover, a.rra-btn--accent:visited { color: var(--action-accent-text); }
a.rra-btn--secondary, a.rra-btn--secondary:hover, a.rra-btn--secondary:visited { color: var(--action-secondary-text); }
a.rra-btn--ghost, a.rra-btn--ghost:hover, a.rra-btn--ghost:visited { color: var(--action-ghost-text); }

/* Brand lockups are links home; keep them looking like the design. */
a.mk-brand, a.mk-footer__brandrow { text-decoration: none; }

.u-center { text-align: center; }
.u-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;
}

/* Keyboard users can jump past the header. */
.u-skip-link {
  position: absolute; left: var(--space-4); top: -100px; z-index: var(--z-toast);
  background: var(--navy-900); color: #fff; padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-sm); font-weight: var(--fw-semibold); text-decoration: none;
}
.u-skip-link:focus, .u-skip-link:hover { top: var(--space-3); color: #fff; }

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

/* ---- 5. Page layouts --------------------------------------- */

/* Shared shell */
.site-page { min-height: 100vh; display: flex; flex-direction: column; }
.site-header--static { position: static; }
.site-header__kicker { color: var(--text-muted); }
.site-header__actions { display: flex; align-items: center; gap: var(--space-3); }
.site-footer { padding-block: var(--space-6); margin-top: auto; }
.site-footer__inner {
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center;
  gap: var(--space-4) var(--space-6);
}
.site-footer__note { font-size: var(--text-sm); color: var(--navy-200); }
.site-footer__note a { color: var(--navy-50); text-decoration-color: color-mix(in srgb, var(--navy-50) 45%, transparent); white-space: nowrap; }
.site-footer__note a:hover { color: var(--gold-500); }
.site-footer__copy { font-size: var(--text-xs); color: var(--navy-300); }

/* Small phones: brand + kicker/CTA can't share one 72px row. */
@media (max-width: 520px) {
  .mk-header__inner { height: auto; min-height: 64px; padding-block: var(--space-3); flex-wrap: wrap; gap: var(--space-2) var(--space-4); }
  .mk-brand__name { font-size: var(--text-md); }
  .mk-brand img { height: 30px; }
}

/* Icon tile sizes (the design's .mk-feature__icon at 36/40px) */
.cc-icon-36 { width: 36px; height: 36px; flex: none; }
.cc-icon-40 { width: 40px; height: 40px; flex: none; }

/* ---- Call confirmation: hero ---- */
.cc-hero { padding-block: clamp(3rem, 6vw, 6rem); }
.cc-inbox-note {
  display: flex; gap: var(--space-3); align-items: flex-start; padding: var(--space-4);
  background: var(--surface-card); border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md); max-width: 540px; box-shadow: var(--shadow-xs);
}
.cc-inbox-note p { font-size: var(--text-sm); line-height: 1.55; color: var(--text-body); margin: 0; }
.cc-inbox-note strong, .cc-checklist strong { color: var(--text-strong); font-weight: 600; }

/* Appointment card */
.cc-details { display: flex; flex-direction: column; gap: var(--space-4); }
.cc-detail { display: flex; gap: var(--space-3); align-items: flex-start; }
.cc-detail__text { display: flex; flex-direction: column; gap: 4px; min-width: 0; padding-top: 2px; }
.cc-detail__label {
  font-family: var(--font-mono); font-size: var(--text-2xs); text-transform: uppercase;
  letter-spacing: var(--tracking-label); color: var(--text-muted);
}
.cc-detail__value {
  font-family: var(--font-display); font-weight: 700; font-size: var(--text-xl); line-height: 1.2;
  letter-spacing: var(--tracking-tight); color: var(--navy-900); font-variant-numeric: tabular-nums;
}
.cc-detail__meta { font-size: var(--text-sm); color: var(--text-muted); }
.cc-detail__note { font-size: var(--text-base); color: var(--text-body); line-height: 1.5; }
.cc-detail__link { font-weight: 600; font-size: var(--text-base); }
.cc-divider { height: 1px; background: var(--border-subtle); margin: var(--space-5) 0; }
.cc-cal { display: flex; flex-direction: column; gap: var(--space-3); align-items: flex-start; }
.cc-cal__row { display: flex; flex-wrap: wrap; gap: var(--space-3) var(--space-4); align-items: center; }
.cc-cal__gcal { font-size: var(--text-sm); font-weight: 600; }
.cc-tz { display: flex; align-items: center; gap: 8px; }
.cc-tz svg { flex: none; }

/* What happens next */
.cc-next { padding-top: 0; }
.cc-step { padding-top: var(--space-5); }
.cc-step .mk-feature__title { line-height: var(--leading-normal); }
.cc-step__cta { margin-top: var(--space-1); margin-left: -14px; }

/* Testimonial */
#testimonial { scroll-margin-top: 16px; }
.cc-testimonial { display: flex; flex-direction: column; gap: var(--space-7); }
.cc-testimonial .mk-section__head { margin-bottom: 0; }
.cc-video-wrap { width: 100%; max-width: 1000px; margin: 0 auto; display: flex; flex-direction: column; gap: var(--space-5); }
.cc-video {
  position: relative; aspect-ratio: 16 / 9; border-radius: var(--radius-lg); overflow: hidden;
  background: var(--navy-950); box-shadow: var(--shadow-xl);
}
.cc-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.cc-video__facade {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  cursor: pointer; color: var(--navy-900); text-decoration: none; border-radius: inherit;
}
.cc-video__facade img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cc-video__facade::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(14, 24, 40, 0.1), rgba(14, 24, 40, 0.45));
  transition: background var(--duration-base) var(--ease-standard);
}
.cc-video__play {
  position: relative; z-index: 1; width: 72px; height: 72px; border-radius: 50%;
  background: var(--gold-500); color: var(--navy-900); display: inline-flex; align-items: center; justify-content: center;
  box-shadow: var(--glow-gold); transition: transform var(--duration-base) var(--ease-spring);
}
.cc-video__play svg { margin-left: 4px; }
.cc-video__facade:hover .cc-video__play, .cc-video__facade:focus-visible .cc-video__play { transform: scale(1.08); }
.cc-video__facade:hover::after { background: linear-gradient(180deg, rgba(14, 24, 40, 0.05), rgba(14, 24, 40, 0.35)); }
.cc-video__facade:focus-visible { outline: 3px solid var(--gold-500); outline-offset: -3px; }
.cc-video-caption { display: flex; flex-wrap: wrap; gap: var(--space-3) var(--space-6); align-items: flex-start; }
.cc-video-caption .mk-kicker { color: var(--gold-500); padding-top: 5px; flex: none; }
.cc-video-caption p { color: var(--navy-100); font-size: var(--text-md); line-height: 1.55; max-width: 62ch; margin: 0; flex: 1 1 280px; text-align: center; }

/* Prepare for your call */
.cc-prepare { gap: var(--space-7); align-items: start; }
.cc-checklist { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--space-4); }
.cc-checklist li { display: flex; gap: var(--space-3); align-items: flex-start; line-height: 1.5; color: var(--text-body); font-size: var(--text-base); }
.cc-checklist li > svg { color: var(--teal-600); flex: none; margin-top: 2px; }

/* Appointment management */
.cc-appt { padding-block: var(--section-y-tight); }
.cc-appt__inner { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--space-4); }
.cc-appt .mk-kicker { color: var(--teal-600); }
.cc-appt__title.mk-h3 { color: var(--navy-900); font-size: var(--text-2xl); }
.cc-appt__text { max-width: 54ch; color: var(--text-body); font-size: var(--text-md); line-height: 1.55; margin: 0; }

/* ---- Holding home page & 404 (stand-ins until the full site design is exported) ---- */
.hp-hero { padding-block: clamp(3rem, 8vw, 7rem); }
.hp-hero__inner { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--space-5); max-width: 760px; margin: 0 auto; }
.hp-hero__cta { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-3); margin-top: var(--space-2); }
@media (max-width: 600px) { .site-header__actions .rra-btn { display: none; } }
@media (max-width: 420px) { .hp-hero__cta .rra-btn { width: 100%; } }

/* Semantic headings reusing the card/feature title classes keep the design's body line-height. */
h2.rra-card__title, h3.rra-card__title { line-height: var(--leading-normal); }
/* Logos carry width/height attributes (prevents layout shift); size by height only. */
.mk-markchip img, .mk-footer__brandrow img { width: auto; }