@font-face {
  font-family: "D-DIN";
  src: url("/fonts/d-din.woff") format("woff");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "Editor's Note";
  src: url("/fonts/editors-note-italic.woff") format("woff");
  font-style: italic;
  font-weight: 400;
  font-display: swap;
}

/* =====================================================================
   THEME DESIGN TOKENS — the single source of truth for a rebrand.

   Everything below the :root block is built from these tokens, so rebranding
   a client is mostly editing :root. The `figma-to-theme` skill extracts each
   group from a Figma design and records the chosen values in STYLE-GUIDE.md.

   Groups: Colors · Typography (fonts / scale / rhythm) · Buttons · Forms ·
   Containers · Spacing & shape. Edit values here; the rules further down only
   need touching for structural (non-token) changes.
   ===================================================================== */
:root {
  /* ====================== COLORS ====================== */
  /* Brand */
  --color-primary: #ffffff;
  --color-primary-hover: #dbdbdb;
  --color-on-primary: #000000;          /* text/icons on top of primary */
  --color-secondary: #000000;
  --color-secondary-hover: #262626;
  --color-on-secondary: #ffffff;
  --color-tertiary: rgba(255, 255, 255, 0.2);
  --color-tertiary-hover: #ffffff;
  --color-on-tertiary: #ffffff;

  /* Text & links */
  --color-heading: #ffffff;             /* headings */
  --color-text: #ffffff;                /* body text */
  --color-text-muted: #5e5e5e;          /* secondary text */
  --color-eyebrow: #dbdbdb;             /* eyebrows on dark/default surfaces */
  --color-eyebrow-light: #5e5e5e;       /* eyebrows on white/light surfaces */
  --color-link: #ffffff;
  --color-link-hover: #dbdbdb;

  /* Utility / semantic */
  --color-danger: #dc2626;
  --color-warning: #f59e0b;
  --color-info: #0ea5e9;
  --color-success: #16a34a;
  --color-status-live: #01aa5b;
  --color-dark: #000000;
  --color-light: #ffffff;

  /* Surfaces & borders */
  --color-bg: #000000;                  /* page background */
  --color-bg-section: #121212;          /* dark section surface */
  --color-bg-light: #f2f2f2;            /* light section surface */
  --color-bg-proof: #f4f6f5;            /* positioning section surface */
  --color-bg-soft: rgba(255, 255, 255, 0.1); /* alternating section / card background */
  --color-bg-muted: rgba(255, 255, 255, 0.05); /* neutral muted surface */
  --color-border: rgba(255, 255, 255, 0.1); /* borders / dividers */
  --color-footer-divider: rgba(255, 255, 255, 0.1);

  /* Gradients (two definitions) */
  --color-green: #01aa5b;
  --color-green-dark: #017a41;
  --color-green-ink: #011c0f;
  --color-green-light: #4db171;
  --color-green-deep: #006b37;
  --color-green-forest: #003b22;
  --color-green-bright: #0fa65c;
  --color-bg-warm: #d7d4cc;
  --color-case-dark: #25452e;
  --color-case-light: #aec998;
  --color-case-mid: #2f4d39;
  --color-case-text: #243a25;
  --color-portrait-one-light: #e2b28f;
  --color-portrait-one-dark: #605448;
  --color-portrait-two-light: #e1b598;
  --color-portrait-two-dark: #5f4538;
  --color-portrait-three-light: #d4bba6;
  --color-portrait-three-dark: #80624e;
  --color-portrait-four-light: #d0a889;
  --color-portrait-four-dark: #4e392f;
  --gradient-green: linear-gradient(124deg, #01aa5b 29.6%, #017a41 97.9%);
  --gradient-one: radial-gradient(circle at 50% 50%, #01aa5b 0%, #017a41 48%, #011c0f 100%);
  --gradient-two: linear-gradient(135deg, #011c0f 0%, #017a41 55%, #01aa5b 100%);

  /* ================ TYPOGRAPHY — FONTS ================ */
  --font-body: "Inter", Arial, Helvetica, sans-serif;
  --font-heading: "Inter", Arial, Helvetica, sans-serif;
  --font-h6: "D-DIN", Arial, Helvetica, sans-serif;
  --font-accent: "Editor's Note", Georgia, serif;
  --font-lead: var(--font-body);        /* lead/intro paragraph */
  --font-button: var(--font-body);

  --weight-body: 400;
  --weight-heading: 500;
  --weight-h1: 400;
  --weight-h2-h5: 400;                  /* shared weight for H2–H5 */
  --weight-h6: 400;

  /* ============ TYPOGRAPHY — TYPE SCALE ============ */
  /* clamp(min, fluid, max) gives a responsive min/max range per step. */
  /* Display sizes sit ABOVE h1 — display-4 (smallest) still exceeds h1 at every step. */
  --fs-display-1: clamp(3.25rem, 6vw, 5rem);
  --fs-display-2: clamp(3rem, 5.5vw, 4.5rem);
  --fs-display-3: clamp(2.75rem, 5vw, 4.375rem);
  --fs-display-4: clamp(2.5rem, 4.6vw, 4.125rem);

  --fs-h1: clamp(2.75rem, 5vw, 4.5rem);
  --fs-h2: clamp(2.5rem, 4.5vw, 4.125rem);
  --fs-h3: clamp(2rem, 3vw, 3.125rem);
  --fs-h4: 2.25rem;
  --fs-h5: 1.5rem;
  --fs-h6: 0.8125rem;

  --fs-lead: 1.125rem;
  --fs-base: 0.875rem;
  --fs-sm: 0.8125rem;

  /* ============ TYPOGRAPHY — RHYTHM ============ */
  --lh-heading: 1.25;
  --lh-body: 1.45;
  --lh-lead: 1.45;
  --lh-h1: 1.1;
  --lh-h2: 1.23;

  --ls-tight: -0.02em;                  /* headings */
  --ls-normal: 0;                       /* body */
  --ls-wide: 0.05em;                    /* eyebrows / overlines / small caps */

  /* ==================== BUTTONS ==================== */
  --btn-radius: 180px;
  --btn-weight: 500;
  /* default size (medium — 50px tall) */
  --btn-py: 0.85rem;
  --btn-px: 1.5625rem;
  --btn-fs: 0.875rem;
  /* small size (46px tall) */
  --btn-py-sm: 0.7rem;
  --btn-px-sm: 1.25rem;
  --btn-fs-sm: 0.8125rem;
  /* large size (56px tall) */
  --btn-py-lg: 1rem;
  --btn-px-lg: 1.875rem;
  --btn-fs-lg: 1rem;

  /* ===================== FORMS ===================== */
  --field-bg: rgba(255, 255, 255, 0.1);
  --field-text: var(--color-text);
  --field-placeholder: var(--color-text-muted);
  --field-border: var(--color-border);
  --field-border-focus: #ffffff;
  --field-radius: 180px;
  --field-focus-ring: rgba(255, 255, 255, 0.18);
  --label-color: var(--color-heading);
  --label-weight: 600;
  --error-color: var(--color-danger);

  /* =================== CONTAINERS =================== */
  --container-sm: 740px;
  --container: 1320px;
  --container-lg: 1536px;

  /* Figma 12-col reference (1110px content = 12 x 65px + 11 x 30px) */
  --grid-col: 65px;
  --grid-gutter: 30px;

  /* ============== SPACING & SHAPE ============== */
  /* Section padding tokens */
  --pad-half: clamp(3rem, 5vw, 4.6875rem);
  --pad-full: clamp(4.5rem, 8vw, 7.8125rem);
  /* Reusable spacer steps */
  --space-25: 0.5rem;
  --space-50: 1rem;
  --space-75: 1.5rem;
  --space-100: 2rem;
  /* Shape & depth */
  --radius: 12px;
  --radius-sm: 8px;
  --shadow: 0 20px 60px rgba(0, 0, 0, 0.12);
  --shadow-sm: 0 8px 24px rgba(0, 0, 0, 0.08);
  /* Card system (see COMPONENTS) — the one card radius/padding for the whole site */
  --card-radius: 12px;
  --card-pad: 1.8rem;
}

/* ===================== BASE ===================== */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--fs-base);
  font-weight: var(--weight-body);
  line-height: var(--lh-body);
  letter-spacing: var(--ls-normal);
  color: var(--color-text);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
}

.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}
.surface--light,
.section--light { background: var(--color-light); color: var(--color-dark); }
.surface--light :where(h1, h2, h3, h4, h5, h6),
.section--light :where(h1, h2, h3, h4, h5, h6),
.surface--light :where(p, li),
.section--light :where(p, li) { color: var(--color-dark); }
.surface--light .eyebrow,
.section--light .eyebrow,
.surface--light .faq__eyebrow,
.section--light .faq__eyebrow { color: var(--color-eyebrow-light); }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--color-link); text-decoration: none; }
main :is(p, blockquote, li) a:not(.btn) {
  text-decoration: underline;
  text-underline-offset: .15em;
}
a:hover { color: var(--color-link); }

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  color: var(--color-heading);
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-tight);
  margin: 0 0 .5em;
  overflow-wrap: break-word;
}
h1 { font-size: var(--fs-h1); font-weight: var(--weight-h1); line-height: var(--lh-h1); }
h2 { font-size: var(--fs-h2); font-weight: var(--weight-h2-h5); line-height: var(--lh-h2); }
h3 { font-size: var(--fs-h3); font-weight: var(--weight-h2-h5); }
h4 { font-size: var(--fs-h4); font-weight: var(--weight-h2-h5); }
h5 { font-size: var(--fs-h5); font-weight: var(--weight-h2-h5); }
h6 { font-size: var(--fs-h6); font-weight: var(--weight-h6); font-family: var(--font-h6); }
p { margin: 0 0 1rem; color: var(--color-text); }

/* Display utilities — bigger than H1, for hero/marketing headlines */
.display-1 { font-family: var(--font-heading); font-weight: var(--weight-h1); line-height: var(--lh-h1); letter-spacing: var(--ls-tight); font-size: var(--fs-display-1); margin: 0 0 .4em; }
.display-2 { font-family: var(--font-heading); font-weight: var(--weight-h1); line-height: var(--lh-h1); letter-spacing: var(--ls-tight); font-size: var(--fs-display-2); margin: 0 0 .4em; }
.display-3 { font-family: var(--font-heading); font-weight: var(--weight-h1); line-height: var(--lh-h1); letter-spacing: var(--ls-tight); font-size: var(--fs-display-3); margin: 0 0 .4em; }
.display-4 { font-family: var(--font-heading); font-weight: var(--weight-h1); line-height: var(--lh-h1); letter-spacing: var(--ls-tight); font-size: var(--fs-display-4); margin: 0 0 .4em; }

.eyebrow {
  font-family: var(--font-h6);
  text-transform: uppercase;
  letter-spacing: 2.2px;
  font-size: 11px;
  font-weight: var(--weight-h6);
  color: var(--color-eyebrow);
  margin: 0 0 1rem;
}
.lede, .lead {
  font-family: var(--font-lead);
  font-size: var(--fs-lead);
  line-height: var(--lh-lead);
  color: var(--color-text);
  max-width: 48ch;
}

/* =================== CONTAINERS =================== */
.container { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 15px; }
.container--sm { max-width: var(--container-sm); }
.container--lg { max-width: var(--container-lg); }

/* ================= Grid system (Bootstrap-style, 12 columns) =================
   Flexbox-based so offsets are flow-relative like Bootstrap (a margin-left gap
   AFTER the preceding column). The flex `gap` supplies the gutters, so the
   column math is driven entirely by the single --grid-gutter token (no magic
   numbers): with 12 columns there are 11 gutters, hence `11 * var(--grid-gutter)`.
   Column flex-basis = calc((100% - 11*g)/12 * N + (N-1)*g) where g = the gutter;
   an N-col span also swallows its (N-1) internal gutters. On a .container (1110px
   content) with g = 30px this is exactly 65px columns — the Figma grid. Change
   --grid-gutter once and both the gap and the widths stay in sync. Mobile-first:
   write `col-12 col-md-6` to stack below the md breakpoint (861px) and split
   at/above it. Spans on one line add up to 12 (offsets count too). */
.row { display: flex; flex-wrap: wrap; gap: var(--grid-gutter); align-items: stretch; }
.row > * { min-width: 0; }
.row--center { align-items: center; }
.row--start { align-items: flex-start; }
.row--end { align-items: flex-end; }
.row--baseline { align-items: baseline; }

.col-1 { flex: 0 1 calc((100% - 11 * var(--grid-gutter)) / 12 * 1 + 0 * var(--grid-gutter)); }
.col-2 { flex: 0 1 calc((100% - 11 * var(--grid-gutter)) / 12 * 2 + 1 * var(--grid-gutter)); }
.col-3 { flex: 0 1 calc((100% - 11 * var(--grid-gutter)) / 12 * 3 + 2 * var(--grid-gutter)); }
.col-4 { flex: 0 1 calc((100% - 11 * var(--grid-gutter)) / 12 * 4 + 3 * var(--grid-gutter)); }
.col-5 { flex: 0 1 calc((100% - 11 * var(--grid-gutter)) / 12 * 5 + 4 * var(--grid-gutter)); }
.col-6 { flex: 0 1 calc((100% - 11 * var(--grid-gutter)) / 12 * 6 + 5 * var(--grid-gutter)); }
.col-7 { flex: 0 1 calc((100% - 11 * var(--grid-gutter)) / 12 * 7 + 6 * var(--grid-gutter)); }
.col-8 { flex: 0 1 calc((100% - 11 * var(--grid-gutter)) / 12 * 8 + 7 * var(--grid-gutter)); }
.col-9 { flex: 0 1 calc((100% - 11 * var(--grid-gutter)) / 12 * 9 + 8 * var(--grid-gutter)); }
.col-10 { flex: 0 1 calc((100% - 11 * var(--grid-gutter)) / 12 * 10 + 9 * var(--grid-gutter)); }
.col-11 { flex: 0 1 calc((100% - 11 * var(--grid-gutter)) / 12 * 11 + 10 * var(--grid-gutter)); }
.col-12 { flex: 0 1 100%; }

@media (min-width: 861px) {
  .col-md-1 { flex: 0 1 calc((100% - 11 * var(--grid-gutter)) / 12 * 1 + 0 * var(--grid-gutter)); }
  .col-md-2 { flex: 0 1 calc((100% - 11 * var(--grid-gutter)) / 12 * 2 + 1 * var(--grid-gutter)); }
  .col-md-3 { flex: 0 1 calc((100% - 11 * var(--grid-gutter)) / 12 * 3 + 2 * var(--grid-gutter)); }
  .col-md-4 { flex: 0 1 calc((100% - 11 * var(--grid-gutter)) / 12 * 4 + 3 * var(--grid-gutter)); }
  .col-md-5 { flex: 0 1 calc((100% - 11 * var(--grid-gutter)) / 12 * 5 + 4 * var(--grid-gutter)); }
  .col-md-6 { flex: 0 1 calc((100% - 11 * var(--grid-gutter)) / 12 * 6 + 5 * var(--grid-gutter)); }
  .col-md-7 { flex: 0 1 calc((100% - 11 * var(--grid-gutter)) / 12 * 7 + 6 * var(--grid-gutter)); }
  .col-md-8 { flex: 0 1 calc((100% - 11 * var(--grid-gutter)) / 12 * 8 + 7 * var(--grid-gutter)); }
  .col-md-9 { flex: 0 1 calc((100% - 11 * var(--grid-gutter)) / 12 * 9 + 8 * var(--grid-gutter)); }
  .col-md-10 { flex: 0 1 calc((100% - 11 * var(--grid-gutter)) / 12 * 10 + 9 * var(--grid-gutter)); }
  .col-md-11 { flex: 0 1 calc((100% - 11 * var(--grid-gutter)) / 12 * 11 + 10 * var(--grid-gutter)); }
  .col-md-12 { flex: 0 1 100%; }
  .offset-md-0 { margin-left: 0; }
  .offset-md-1 { margin-left: calc((100% - 11 * var(--grid-gutter)) / 12 * 1 + 1 * var(--grid-gutter)); }
  .offset-md-2 { margin-left: calc((100% - 11 * var(--grid-gutter)) / 12 * 2 + 2 * var(--grid-gutter)); }
  .offset-md-3 { margin-left: calc((100% - 11 * var(--grid-gutter)) / 12 * 3 + 3 * var(--grid-gutter)); }
  .offset-md-4 { margin-left: calc((100% - 11 * var(--grid-gutter)) / 12 * 4 + 4 * var(--grid-gutter)); }
  .offset-md-5 { margin-left: calc((100% - 11 * var(--grid-gutter)) / 12 * 5 + 5 * var(--grid-gutter)); }
  .offset-md-6 { margin-left: calc((100% - 11 * var(--grid-gutter)) / 12 * 6 + 6 * var(--grid-gutter)); }
  .offset-md-7 { margin-left: calc((100% - 11 * var(--grid-gutter)) / 12 * 7 + 7 * var(--grid-gutter)); }
  .offset-md-8 { margin-left: calc((100% - 11 * var(--grid-gutter)) / 12 * 8 + 8 * var(--grid-gutter)); }
  .offset-md-9 { margin-left: calc((100% - 11 * var(--grid-gutter)) / 12 * 9 + 9 * var(--grid-gutter)); }
  .offset-md-10 { margin-left: calc((100% - 11 * var(--grid-gutter)) / 12 * 10 + 10 * var(--grid-gutter)); }
  .offset-md-11 { margin-left: calc((100% - 11 * var(--grid-gutter)) / 12 * 11 + 11 * var(--grid-gutter)); }
}

/* =============== SPACING UTILITIES =============== */
.section { padding-top: var(--pad-full); padding-bottom: var(--pad-full); }
.section--tight { padding-top: var(--pad-half); padding-bottom: var(--pad-half); }
.spacer-25 { height: var(--space-25); }
.spacer-50 { height: var(--space-50); }
.spacer-75 { height: var(--space-75); }
.spacer-100 { height: var(--space-100); }

/* ===================== BUTTONS ===================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: var(--btn-py) var(--btn-px);
  border-radius: var(--btn-radius);
  font-family: var(--font-button);
  font-weight: var(--btn-weight);
  font-size: var(--btn-fs);
  line-height: 20px;
  letter-spacing: -0.02em;
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  text-align: center;
  transition: background .15s ease, color .15s ease, border-color .15s ease, filter .15s ease;
}
.btn--sm { padding: var(--btn-py-sm) var(--btn-px-sm); font-size: var(--btn-fs-sm); }
.btn--lg { padding: var(--btn-py-lg) var(--btn-px-lg); font-size: var(--btn-fs-lg); }

/* Variant 1 — primary: white pill with black text. */
.btn--primary { background: var(--color-light); color: var(--color-dark); }
.btn--primary:hover { background: var(--color-dark); color: var(--color-light); }

/* Variant 2 — secondary: black pill with white text. */
.btn--secondary { background: var(--color-dark); color: var(--color-light); }
.btn--secondary:hover { background: var(--color-primary-hover); color: var(--color-light); }

/* Variant 3 — tertiary: 20% white fill, then solid white on hover. */
.btn--tertiary { background: var(--color-tertiary); color: var(--color-on-tertiary); border-color: var(--color-tertiary); }
.btn--tertiary:hover { background: var(--color-tertiary-hover); color: var(--color-dark); border-color: var(--color-tertiary-hover); }

/* Outline variants — transparent fill, brand-colored text + border; fills on hover */
.btn--primary-outline { background: transparent; color: var(--color-primary); border-color: var(--color-primary); }
.btn--primary-outline:hover { background: var(--color-primary); color: var(--color-on-primary); }
.btn--secondary-outline { background: transparent; color: var(--color-secondary); border-color: var(--color-secondary); }
.btn--secondary-outline:hover { background: var(--color-secondary); color: var(--color-on-secondary); }
.btn--tertiary-outline { background: transparent; color: var(--color-tertiary); border-color: var(--color-tertiary); }
.btn--tertiary-outline:hover { background: var(--color-tertiary); color: var(--color-on-tertiary); }

/* Variant 4 — gradient one */
.btn--gradient-one { background: var(--gradient-one); color: var(--color-on-primary); box-shadow: var(--shadow-sm); }
.btn--gradient-one:hover { color: var(--color-on-primary); filter: brightness(1.06); }

/* Variant 5 — gradient two */
.btn--gradient-two { background: var(--gradient-two); color: var(--color-on-primary); box-shadow: var(--shadow-sm); }
.btn--gradient-two:hover { color: var(--color-on-primary); filter: brightness(1.12); }

/* Ghost on a dark/photo surface — translucent fill, white text */
.btn--ghost-light { background: rgba(255, 255, 255, .12); color: #fff; border-color: rgba(255, 255, 255, .35); backdrop-filter: blur(4px); }
.btn--ghost-light:hover { background: rgba(255, 255, 255, .22); color: #fff; }

/* Tabs — Figma node 26:50. */
.tabs { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.tabs__tab {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 15px 25px; border: 0; border-radius: var(--btn-radius);
  background: rgba(0, 0, 0, .05); color: var(--color-dark);
  font: inherit; font-family: var(--font-button); font-weight: var(--btn-weight);
  font-size: 14px; line-height: 20px; letter-spacing: -.02em; cursor: pointer;
}
.tabs__tab[aria-selected="true"] { background: var(--color-dark); color: var(--color-light); }
.tabs__tab:focus-visible { outline: 2px solid var(--color-dark); outline-offset: 3px; }
.tabs__panel { margin-top: 24px; color: var(--color-dark); }
.tabs__panel[hidden] { display: none; }

/* ===================== Header ===================== */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  z-index: 50;
  padding: 12.5px 0;
  background: var(--color-bg);
}
.site-header__inner { display: flex; align-items: center; height: 55px; gap: var(--space-50); }
.site-header__inner > .nav-cta { margin-left: auto; width: auto; flex-shrink: 0; }
.brand { display: inline-flex; align-items: center; flex: 0 0 auto; }
.brand__logo { display: block; width: 217px; height: 55px; }

.site-nav { display: flex; align-items: center; gap: clamp(32px, 6.35vw, 122px); }
.nav-menu { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: 0; }
.nav-item { position: relative; }
.nav-link {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 15px 25px; border-radius: var(--btn-radius);
  font-family: var(--font-button); font-size: 14px; font-weight: var(--btn-weight); line-height: 20px;
  letter-spacing: -.02em;
  color: var(--color-heading); text-decoration: none;
  background: none; border: 0; cursor: pointer;
  transition: opacity .15s ease;
}
.nav-link:hover, .nav-link:focus-visible { color: var(--color-heading); opacity: 1; }
.nav-menu:has(.nav-link:hover) .nav-link:not(:hover),
.nav-menu:has(.nav-link:focus-visible) .nav-link:not(:focus-visible) { opacity: .2; }
.nav-link__chevron { width: 16px; height: 16px; flex: 0 0 auto; }
.site-nav__actions { display: flex; align-items: center; gap: 12px; }
.nav-cta { white-space: nowrap; }

/* Copy Rocket global navigation and footer */
.copyrocket-header { position: absolute; padding: 25px 0; background: transparent; }
.copyrocket-header .site-header__inner { gap: clamp(28px, 6.35vw, 122px); }
.copyrocket-brand { display: inline-flex; align-items: center; gap: 11px; color: var(--color-light); font-size: 24px; line-height: 1.25; letter-spacing: -.02em; text-decoration: none; white-space: nowrap; }
.copyrocket-brand strong { font-weight: 700; }
.copyrocket-brand__mark { display: block; width: 48px; height: 55px; }
.copyrocket-nav { display: flex; flex: 1 1 auto; align-items: center; justify-content: center; gap: 0; }
.copyrocket-nav a { display: inline-flex; align-items: center; justify-content: center; padding: 15px 25px; border-radius: var(--btn-radius); color: var(--color-light); font-size: 14px; font-weight: 500; line-height: 20px; letter-spacing: -.02em; text-decoration: none; transition: opacity .15s ease; }
.copyrocket-nav:has(a:hover) a:not(:hover), .copyrocket-nav:has(a:focus-visible) a:not(:focus-visible) { opacity: .25; }
.copyrocket-nav a:focus-visible, .copyrocket-brand:focus-visible { outline: 2px solid var(--color-light); outline-offset: 4px; }

.nav-toggle { display: none; flex-direction: column; gap: 5px; background: none; border: 0; padding: 8px; cursor: pointer; }
.nav-toggle span { width: 22px; height: 2px; background: var(--color-text); border-radius: 2px; transition: .2s ease; }

/* ====================== Hero ====================== */
.hero { padding: 7.1875rem 0 clamp(2.5rem, 5vw, 4.5rem); background: var(--color-bg-soft); }
.hero__title { font-size: clamp(2.5rem, 5vw, 3.125rem); line-height: 1.12; letter-spacing: -1px; color: var(--color-heading); margin: 0 0 .55rem; }
.hero__actions { display: flex; align-items: flex-start; gap: .75rem; flex-wrap: wrap; margin: 0 0 .9rem; }


/* ==================== COMPONENTS — reusable building blocks ====================
   The canonical UI library. Build pages by COMPOSING these — do NOT invent a
   parallel card/list/header style per page (that's what made earlier pages drift).
   Anything genuinely new belongs HERE (and on /components), built from :root
   tokens. See the `page-from-reference` skill and STYLE-GUIDE.md. */

/* Page section wrapper — vertical rhythm for composed sections. */
.section { padding: var(--pad-full) 0; }
.section--soft { background: var(--color-bg-soft); }

/* Section header — centered eyebrow + title + lede above a section's content. */
.section-head { text-align: center; max-width: 40ch; margin: 0 auto 2.6rem; }
.section-head--wide { max-width: 60ch; }
.section-head--pricing { width: 100%; max-width: none; margin-bottom: 75px; }
.section-head--pricing h3 em { font-family: var(--font-accent); font-style: italic; font-weight: 400; }

/* Card — the ONE canonical surface. Default = subtle outline.
   Modifiers: --plain (borderless) · --elevated (stronger shadow) ·
   --hover (lift on hover) · --row (horizontal media + body) ·
   --roomy / --tight (more / less padding). Padding & radius come from the
   --card-* tokens so every card on the site stays in sync. */
.card {
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--card-radius);
  padding: var(--card-pad);
  box-shadow: var(--shadow-sm);
}
.card--plain { border: 0; }
.card--elevated { box-shadow: var(--shadow); }
.card--hover { transition: transform .18s ease, box-shadow .18s ease; }
.card--hover:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.card--row { display: flex; gap: 1.25rem; align-items: flex-start; }
.card--roomy { padding: clamp(2rem, 1rem + 2.5vw, 3.125rem); }
.card--tight { padding: 1.6rem; }
/* Icon tile — 50px secondary (dark) square with a 24px reversed icon, per Figma. */
.card__icon {
  flex: none;
  width: 50px; height: 50px; border-radius: 12px;
  display: grid; place-items: center;
  background: var(--color-secondary); color: var(--color-on-secondary);
  font-size: 1.25rem; margin-bottom: 1rem;
}
.card__icon svg { width: 24px; height: 24px; }
.card__title { font-family: var(--font-heading); font-weight: var(--weight-h2-h5); font-size: var(--fs-h4); line-height: 1.25; letter-spacing: var(--ls-tight); color: var(--color-heading); margin: 0 0 .5rem; }
.card p { margin: 0; color: var(--color-text); }
.card .eyebrow { color: var(--color-eyebrow); }

/* Check-list — a list of ticked feature items. Drop a tick SVG in each <li>.
   12px gaps, 1.35 line-height, body text at 80% — per Figma. */
.check-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .75rem; }
.check-list li { display: flex; align-items: flex-start; gap: .75rem; font-size: var(--fs-sm); line-height: 1.35; color: color-mix(in srgb, var(--color-text) 80%, transparent); }
/* Nudge the 21px tick up so it optically centers on the first text line
   (line box = 1.35em); align-items stays flex-start for multi-line items. */
.check-list svg { flex: 0 0 auto; width: 21px; height: 21px; color: var(--color-text); margin-top: calc((1.35em - 21px) / 2); }


/* ===================== HubSpot form (@hubspot/form) ===================== */
/* Overrides HubSpot's injected baseline form stylesheet — the !important flags
   target exactly the properties HubSpot forces on module-added forms. See the
   `hubspot-forms` skill; the preview reproduces the baseline so this validates
   locally. All values read from the FORMS tokens in :root. */
.hs-form fieldset { display: grid; gap: 1rem; max-width: none !important; margin: 0; padding: 0; border: 0; }
.hs-form fieldset.form-columns-2 { grid-template-columns: 1fr 1fr; }
.hs-form .hs-form-field { width: auto !important; float: none !important; margin: 0 0 1.1rem; }
.hs-form .input { margin-right: 0 !important; }
.hs-form label { display: block; font-size: .9rem; font-weight: var(--label-weight); color: var(--label-color); margin-bottom: .4rem; }
.hs-form .hs-form-required { color: var(--color-primary); margin-left: .15rem; }
.hs-form .hs-input {
  width: 100% !important; max-width: 100% !important; box-sizing: border-box;
  min-height: 0 !important; font: inherit; color: var(--field-text); background: var(--field-bg);
  border: 1px solid var(--field-border); border-radius: var(--field-radius);
  padding: .7rem .85rem !important; transition: border-color .15s ease, box-shadow .15s ease;
}
.hs-form .hs-input::placeholder { color: var(--field-placeholder); opacity: .7; }
.hs-form .hs-input:focus { outline: none; border-color: var(--field-border-focus); box-shadow: 0 0 0 3px var(--field-focus-ring); }
.hs-form textarea.hs-input { resize: vertical; min-height: 150px !important; padding: .7rem .85rem !important; }
.hs-form .hs-button {
  display: inline-flex; align-items: center; justify-content: center; width: 100%;
  margin-top: .3rem; padding: var(--btn-py-lg) var(--btn-px-lg); font: inherit; font-weight: var(--btn-weight); font-size: var(--btn-fs-lg);
  color: var(--color-on-primary); background: var(--color-primary); border: 1px solid transparent;
  border-radius: var(--btn-radius); box-shadow: var(--shadow-sm); cursor: pointer;
  transition: transform .15s ease, background .15s ease, box-shadow .15s ease;
}
.hs-form .hs-button:hover { background: var(--color-primary-hover); transform: translateY(-1px); }
.hs-error-msgs { list-style: none; margin: .4rem 0 0; padding: 0; }
/* HubSpot renders errors as <label class="hs-error-msg">, so `.hs-form label`
   (0,1,1) would win — bump specificity + !important so error text is danger. */
.hs-form .hs-error-msgs label,
.hs-form label.hs-error-msg,
.hs-form .hs-error-msg { color: var(--color-danger) !important; font-size: .82rem; font-weight: var(--label-weight); margin-bottom: 0; }

/* Consent (legal-consent-container): smaller text + shield icon, moved BELOW the
   submit button. The form is a flex column so `order` can reposition it; the
   consent fieldset is found via :has() (HubSpot gives every fieldset one class). */
.hs-form { display: flex; flex-direction: column; }
.hs-form .hs_submit { order: 1; }
.hs-form fieldset:has(.legal-consent-container) { order: 2; margin-top: 1rem; }
/* The container holds a variable number of blocks — a processing notice, an
   optional subscription checkbox, unsubscribe and submit notices. Grid keeps
   the shield in its own column and STACKS every block in the second one; as a
   flex row they were laid out side by side as narrow columns. */
.hs-form .legal-consent-container { display: grid; grid-template-columns: auto 1fr; align-items: start; gap: .5rem .55rem; }
.hs-form .legal-consent-container > * { grid-column: 2; min-width: 0; }
/* Shield icon uses currentColor (theme text-muted) rather than a baked brand
   hex so it stays token-driven; only the stroke is templated. */
.hs-form .legal-consent-container::before {
  content: ""; flex: 0 0 auto; width: 18px; height: 18px; margin-top: 1px;
  color: var(--color-primary);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z'/%3E%3Cpath d='M9 12l2 2 4-4'/%3E%3C/svg%3E") no-repeat center / contain;
}
.hs-form .legal-consent-container .hs-richtext { margin: 0; font-size: .78rem; line-height: 1.5; color: var(--color-text-muted); }
.hs-form .legal-consent-container a { color: var(--color-primary); text-decoration: underline; text-underline-offset: 2px; }
/* Subscription checkbox inside the consent block. HubSpot ships it as a
   bulleted <ul>, and the generic `.hs-form label` / `.hs-input` rules would
   otherwise make its text a bold field label and stretch the box to 100%. */
/* Scoped to the consent block on purpose: a checkbox field elsewhere in a form
   is an ordinary question and must keep the normal label styling. */
.hs-form .legal-consent-container .hs-form-field { margin: 0; }
.hs-form .legal-consent-container .inputs-list { list-style: none; margin: 0; padding: 0; }
.hs-form .legal-consent-container .hs-form-booleancheckbox-display {
  display: flex; align-items: flex-start; gap: .5rem; margin: 0;
  font-size: .78rem; font-weight: 400; line-height: 1.5; color: var(--color-text-muted);
}
.hs-form .legal-consent-container .hs-form-booleancheckbox-display input[type="checkbox"] {
  width: auto !important; flex: 0 0 auto; margin: .15rem 0 0;
  padding: 0 !important; min-height: 0 !important; accent-color: var(--color-primary);
}
@media (max-width: 760px) { .hs-form fieldset.form-columns-2 { grid-template-columns: 1fr; } }

/* ===================== HubSpot CTA (@hubspot/cta) ===================== */
/* HubSpot renders CTAs two ways and this covers both: new "web interactive"
   (an <a> inside .hs-web-interactive-inline) and legacy (<a class="cta_button">).
   The .cta-btn wrapper makes either match .btn--primary. See the `hubspot-ctas`
   skill; the preview renders the real web-interactive markup so this validates
   locally. */
.cta-btn,
.cta-btn .hs_cos_wrapper,
.cta-btn .hs-web-interactive-inline,
.cta-btn .hs-cta-wrapper,
.cta-btn .hs-cta-node { display: inline-flex; }
.cta-btn .hs-web-interactive-inline a,
.cta-btn a.cta_button {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  padding: var(--btn-py) var(--btn-px); border-radius: var(--btn-radius);
  font-family: var(--font-button); font-weight: var(--btn-weight); font-size: var(--btn-fs); line-height: 1;
  text-transform: uppercase; border: 1px solid transparent; text-decoration: none; cursor: pointer;
  background: var(--color-primary); color: var(--color-on-primary); box-shadow: var(--shadow-sm);
  transition: transform .15s ease, background .15s ease, box-shadow .15s ease, color .15s ease;
}
.cta-btn--lg .hs-web-interactive-inline a,
.cta-btn--lg a.cta_button { padding: var(--btn-py-lg) var(--btn-px-lg); font-size: var(--btn-fs-lg); }
.cta-btn .hs-web-interactive-inline a:hover,
.cta-btn a.cta_button:hover { background: var(--color-primary-hover); transform: translateY(-1px); color: var(--color-on-primary); }


/* ============ CSS-only seamless marquee (REUSABLE) ============
   A logo / name ticker that scrolls forever with no JS. Requirements:
   - DUPLICATE the item set ONCE in the markup (mark the copies with the
     `--dup` modifier so reduced-motion can hide them), and animate the track
     by translateX(-50%): at the halfway point the second copy sits exactly
     where the first started, so the loop is seamless.
   - The track is `width: max-content` and its width comes from the items; spacing
     between items uses per-item `margin-right` (NOT a flex `gap`) so the
     duplicated set lines up pixel-for-pixel across the -50% wrap. (A flex gap
     adds an extra gap only between — not after — items and breaks the seam.)
   - Reverse a row's direction with the `--reverse` modifier (animation-direction).
   Compose the names as `.card.card--plain` if you want pill surfaces. */
.marquee { background: var(--color-bg-soft); padding: 50px 0; }
.marquee__viewport {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.marquee__track { display: flex; align-items: center; width: max-content; margin: 0; padding: 0; list-style: none; animation: marquee-scroll 38s linear infinite; }
.marquee__track:hover { animation-play-state: paused; }
.marquee__track--reverse { animation-direction: reverse; }
/* Per-item margin-right (not a flex gap) so the duplicated set wraps seamlessly. */
.marquee__logo { flex: 0 0 auto; height: 36px; margin-right: 4.5rem; display: flex; align-items: center; justify-content: center; }
.marquee__logo img { max-height: 100%; width: auto; object-fit: contain; }
/* Text-name variant: plain names instead of logos. */
.marquee__name { flex: 0 0 auto; margin-right: 16px; font-family: var(--font-heading); font-weight: 600; font-size: var(--fs-sm); color: var(--color-text-muted); white-space: nowrap; }
@keyframes marquee-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  /* No motion: drop the duplicate set and wrap the single set into a static row. */
  .marquee__track { animation: none; flex-wrap: wrap; justify-content: center; width: 100%; gap: 1.5rem 1rem; }
  .marquee__logo, .marquee__name { margin-right: 0; }
  .marquee__logo--dup, .marquee__name--dup { display: none; }
}


/* ============ Card — dark surface variant (REUSABLE) ============
   Reversed-text panel on the secondary color. Composes with .card and its parts.
   Defined AFTER the .card base block in main.css so its overrides win. */
.card--dark { background: var(--color-secondary); border-color: transparent; color: var(--color-on-secondary); }
.card--dark .card__title { color: var(--color-on-secondary); }
.card--dark .card__icon { background: rgba(255, 255, 255, .12); color: var(--color-on-secondary); }
/* :not(.card__title) matches the specificity of the `.card p:not(.card__title)`
   muted-color trap (0,2,1) so the white actually wins inside dark cards. */
.card--dark p:not(.card__title) { color: #fff; }
/* Keep eyebrow labels readable on dark cards even when card copy has a
   different text rule. */
.card--dark .eyebrow, .card--dark p.eyebrow { color: var(--color-eyebrow); }
.card--dark .check-list li { color: rgba(255, 255, 255, .85); }
.card--dark .check-list svg { color: var(--color-primary); }


/* ============ Modal — native <dialog> popup (REUSABLE) ============
   Open via a button with data-modal-open="<dialog-id>"; close via
   [data-modal-close], Esc, or a backdrop click (all wired generically in
   main.js). */
.modal { width: min(680px, calc(100vw - 2rem)); max-height: min(82vh, 760px); margin: auto; padding: 0; border: 0; border-radius: var(--card-radius); background: var(--color-bg); color: var(--color-text); box-shadow: 0 24px 64px rgba(0, 0, 0, .28); }
.modal::backdrop { background: color-mix(in srgb, var(--color-secondary) 55%, transparent); }
.modal__head { position: sticky; top: 0; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.1rem 1.5rem; background: var(--color-bg); border-bottom: 1px solid var(--color-border); }
.modal__head .eyebrow { margin: 0; }
.modal__close { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; padding: 0; border: 1px solid var(--color-border); border-radius: 50%; background: transparent; color: var(--color-heading); cursor: pointer; transition: background-color .15s ease, border-color .15s ease; }
.modal__close:hover { background: var(--color-bg-muted); }
.modal__close:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }
.modal__close svg { width: 16px; height: 16px; }
.modal__body { padding: 1.35rem 1.5rem 1.75rem; }


/* ============ FAQ accordion (REUSABLE) ============
   Each item slides open/closed independently via the [data-faq] handler in
   main.js (grid-template-rows 0fr -> 1fr). Closed panels carry [hidden].
   Markup: <div class="faq" data-faq> <div class="faq__item"><h3 class="faq__heading">
   <button class="faq__trigger" aria-controls="ID" aria-expanded="false">
   <span class="faq__question">…</span><span class="faq__icon"></span></button></h3>
   <div class="faq__panel" id="ID"><div class="faq__answer"><div class="faq__answer-inner">…
   </div></div></div></div>…</div> */
.faq { background: var(--color-bg); padding: var(--pad-full) 0; }
.faq__intro { position: static; }
.faq__eyebrow { font-family: var(--font-h6); font-weight: var(--weight-h6); font-size: 11px; line-height: 1.4; letter-spacing: .18em; text-transform: uppercase; color: var(--color-eyebrow); margin: 0 0 1rem; }
.faq__title { font-family: var(--font-heading); font-weight: var(--weight-h2-h5); font-size: var(--fs-h2); line-height: var(--lh-h2); letter-spacing: var(--ls-tight); color: var(--color-heading); margin: 0 0 1rem; }
.faq__lede { color: var(--color-text); font-size: var(--fs-base); line-height: var(--lh-body); margin: 0; max-width: 22rem; }
.faq__list { list-style: none; margin: 0; padding: 0; }
.faq__item { border-bottom: 1px solid var(--color-border); }
.faq__heading { margin: 0; font: inherit; }
.faq__trigger {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem;
  width: 100%; padding: 1.5625rem 0; border: 0; background: none; cursor: pointer; text-align: left;
  color: var(--color-heading);
}
.faq__question { font-family: var(--font-heading); font-weight: var(--weight-h2-h5); font-size: 1rem; line-height: 1.3; letter-spacing: var(--ls-tight); }
.faq__icon { position: relative; flex: 0 0 auto; width: 15px; height: 15px; margin-top: .35rem; }
.faq__icon::before, .faq__icon::after { content: ""; position: absolute; background: var(--color-light); border-radius: 1px; }
.faq__icon::before { left: 0; right: 0; top: 50%; height: 2px; transform: translateY(-50%); }
.faq__icon::after { top: 0; bottom: 0; left: 50%; width: 2px; transform: translateX(-50%); transition: opacity .25s ease, transform .25s ease; }
.faq__item.is-open .faq__icon::after { opacity: 0; transform: translateX(-50%) rotate(90deg); }
.faq__trigger:focus-visible { outline: 2px solid var(--color-light); outline-offset: 3px; border-radius: 4px; }
.faq__panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .3s ease; }
.faq__panel[hidden] { display: none; }
.faq__item.is-open .faq__panel { grid-template-rows: 1fr; }
.faq__answer { overflow: hidden; min-height: 0; }
.faq__answer-inner { padding: 0 0 1.5625rem; max-width: 46rem; }
.faq__answer-inner p { margin: 0 0 1rem; color: var(--color-text); font-size: var(--fs-base); line-height: var(--lh-body); }
.faq__answer-inner p:last-child { margin-bottom: 0; }
.faq__answer-inner ul { margin: 0 0 1rem; padding-left: 1.2rem; display: grid; gap: .6rem; color: var(--color-text); font-size: var(--fs-base); line-height: var(--lh-body); }
.faq__answer-inner ul:last-child { margin-bottom: 0; }
.faq__answer-inner li::marker { color: var(--color-light); }

/* Centered FAQ section modifier. */
.faq--centered { min-height: 934px; padding: 125px 0; background: var(--color-bg-section); }
.faq--centered .faq__intro { text-align: center; }
.faq--centered .faq__eyebrow {
  margin: 0 0 5px; font-family: var(--font-h6); font-size: 13px;
  line-height: 1.25; letter-spacing: .05em;
}
.faq--centered .faq__title {
  margin: 0; font-size: 52px; font-weight: var(--weight-body);
  line-height: 1.25; letter-spacing: -.02em;
}
.faq--centered .faq__title em { font-family: var(--font-accent); font-style: italic; font-weight: 400; }
.faq--centered .faq__lede { max-width: none; margin-top: 12px; color: var(--color-heading); line-height: normal; }
.faq--centered .faq__list { width: min(100%, 850px); margin: 75px auto 0; }
.faq--centered .faq__item { border-color: color-mix(in srgb, var(--color-light) 50%, transparent); }
.faq--centered .faq__trigger {
  align-items: center; gap: 87px; padding: 24px 0;
}
.faq--centered .faq__question {
  width: min(100%, 740px); font-size: 24px; line-height: 1.25; letter-spacing: -.02em;
}
.faq--centered .faq__icon { width: 23px; height: 24px; margin-top: 0; }
.faq--centered .faq__answer-inner { max-width: 740px; padding: 0 0 24px; }
.faq--centered .faq__answer-inner p {
  color: color-mix(in srgb, var(--color-light) 70%, transparent); font-size: 16px; line-height: 1.5;
}
@media (max-width: 767px) {
  .faq--centered { min-height: 0; padding: 80px 0; }
  .faq--centered .faq__title { font-size: clamp(40px, 12vw, 52px); }
  .faq--centered .faq__lede { margin-inline: auto; }
  .faq--centered .faq__list { margin-top: 56px; }
  .faq--centered .faq__trigger { gap: 24px; }
  .faq--centered .faq__question { font-size: 20px; }
}


/* ============ Callout — tinted notice box (REUSABLE) ============
   Default = soft neutral. Modifiers: --info / --warn / --danger / --success add a
   semantic tint (and, for the accented ones, a left accent bar). --cta puts a
   trailing action button on the right. Markup: <div class="callout callout--warn">
   <span class="callout__icon"><svg/></span><p>…</p></div> */
.callout { display: flex; gap: .85rem; align-items: flex-start; padding: 1rem 1.15rem; border-radius: var(--radius-sm); background: var(--color-bg-soft); }
.callout__icon { flex: 0 0 auto; width: 20px; height: 20px; color: var(--color-primary); margin-top: 1px; }
.callout__icon svg { width: 100%; height: 100%; display: block; }
.callout p { margin: 0; font-size: var(--fs-sm); line-height: var(--lh-body); color: var(--color-text); }
.callout strong { color: var(--color-heading); }
.callout--info { background: color-mix(in srgb, var(--color-info) 8%, var(--color-bg)); }
.callout--info .callout__icon { color: var(--color-info); }
.callout--warn { background: color-mix(in srgb, var(--color-warning) 10%, var(--color-bg)); border-left: 3px solid var(--color-warning); }
.callout--warn .callout__icon { color: var(--color-warning); }
.callout--danger { background: color-mix(in srgb, var(--color-danger) 9%, var(--color-bg)); border-left: 3px solid var(--color-danger); }
.callout--danger .callout__icon { color: var(--color-danger); }
.callout--success { background: color-mix(in srgb, var(--color-success) 9%, var(--color-bg)); border-left: 3px solid var(--color-success); }
.callout--success .callout__icon { color: var(--color-success); }
/* --cta: callout with a trailing action button. Markup: <div class="callout callout--cta">
   <span class="callout__icon"><svg/></span><p>…</p><a class="btn btn--primary callout__btn">…</a></div> */
.callout--cta { align-items: center; }
.callout__btn { flex: 0 0 auto; margin-left: auto; white-space: nowrap; }
@media (max-width: 860.98px) {
  .callout--cta { flex-wrap: wrap; }
  .callout--cta .callout__btn { margin-left: 0; }
}


/* ============ Table of contents — sticky in-page nav (REUSABLE) ============
   A sticky rail that highlights the section currently in view. Driven by the
   [data-toc] scroll-spy in js/main.js: it toggles .is-active on the .toc__link
   whose href matches the on-screen section, so no per-page JS is needed.
   Markup: <nav class="toc" data-toc> <p class="toc__label">…</p>
   <ul class="toc__list"><li><a class="toc__link" href="#id">…</a></li>…</ul></nav> */
.toc { position: sticky; top: 100px; align-self: start; }
.toc__label { font-family: var(--font-heading); font-weight: var(--weight-h6); font-size: 0.6875rem; line-height: 1.4; letter-spacing: var(--ls-wide); text-transform: uppercase; color: var(--color-text-muted); margin: 0 0 1rem; }
.toc__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; border-left: 1px solid var(--color-border); }
.toc__link { display: block; padding: .5rem 0 .5rem 1rem; margin-left: -1px; border-left: 2px solid transparent; color: var(--color-text-muted); font-size: var(--fs-sm); line-height: 1.35; text-decoration: none; transition: color .15s ease, border-color .15s ease; }
.toc__link:hover { color: var(--color-heading); }
.toc__link.is-active { color: var(--color-primary); border-left-color: var(--color-primary); font-weight: 600; }
.toc__link:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; border-radius: 4px; }
@media (max-width: 860px) { .toc { position: static; } }
/* Bordered rail variant of the TOC list for a div container (no <ul>). */
.toc__nav { display: flex; flex-direction: column; border-left: 1px solid var(--color-border); }


/* ============ Page sidebar — sticky side rail (REUSABLE) ============
   A flex column of cards (TOC + CTA) that sticks beside a scrolling main column.
   Composes the 12-col grid: <aside class="pageaside col-12 col-md-3"> next to a
   <div class="col-12 col-md-9"> main column. Hidden below the md breakpoint. */
.pageaside { align-self: start; display: flex; flex-direction: column; gap: 1rem; }
@media (min-width: 861px) { .pageaside { position: sticky; top: 96px; } }
@media (max-width: 860px) { .pageaside { display: none; } }
/* Inside a .pagebody layout the rail blocks sit further apart, and blocks
   after the first are divided by a hairline rule. */
.pagebody .pageaside { gap: 1.75rem; }
.pageaside .expert-card,
.pageaside .sidenav { padding-top: 1.75rem; border-top: 1px solid var(--color-border); }

/* ============ Two-column TOC page body (REUSABLE) ============
   The page-level wrapper + stacked content sections used with the .pageaside
   rail: <section class="pagebody"><div class="container"><div class="row">
   <aside class="pageaside col-12 col-md-3">…</aside>
   <div class="col-12 col-md-9"> <div id="…" class="pagesection">…</div>… */
.pagebody { padding: var(--pad-full) 0; background: var(--color-bg); }
.pagesection { scroll-margin-top: 96px; }
.pagesection + .pagesection { margin-top: clamp(2.6rem, 5vw, 4rem); }

/* ============ Sidebar note — plain CTA under the TOC (REUSABLE) ============
   Bare text block (no card surface) with a full-width button; sits inside .pageaside. */
.sidebar-note { margin-top: 1.1rem; padding-top: 1.1rem; border-top: 1px solid var(--color-border); }
.sidebar-note__title { font-family: var(--font-heading); font-weight: 700; font-size: var(--fs-sm); color: var(--color-heading); margin: 0 0 .35rem; line-height: 1.25; }
.sidebar-note__sub { font-size: .78rem; color: var(--color-text-muted); margin: 0 0 1rem; line-height: 1.4; }
.sidebar-note .btn { width: 100%; justify-content: center; }


/* ============ Timeline — vertical dated rail (REUSABLE) ============
   Markup: <ol class="timeline"><li class="timeline__item">
   <span class="timeline__dot"></span><span class="timeline__when">…</span>
   <p class="timeline__title">…</p><p class="timeline__what">…</p></li>…</ol> */
.timeline { list-style: none; margin: 0; padding: 0; position: relative; display: flex; flex-direction: column; gap: 1.25rem; }
.timeline::before { content: ""; position: absolute; left: 6px; top: 8px; bottom: 8px; width: 1px; background: var(--color-border); }
.timeline__item { position: relative; padding-left: 1.75rem; }
.timeline__dot { position: absolute; left: 0; top: 4px; width: 13px; height: 13px; border-radius: 50%; background: var(--color-bg); border: 3px solid var(--color-primary); box-sizing: border-box; }
.timeline__when { display: block; font-family: var(--font-heading); font-weight: var(--weight-h6); font-size: 0.6875rem; letter-spacing: var(--ls-wide); text-transform: uppercase; color: var(--color-primary); margin: 0 0 .25rem; }
.timeline__title { margin: 0 0 .3rem; font-family: var(--font-heading); font-weight: var(--weight-h2-h5); font-size: 1.0625rem; line-height: 1.25; letter-spacing: var(--ls-tight); color: var(--color-heading); }
.timeline__what { margin: 0; font-size: var(--fs-sm); line-height: var(--lh-body); color: var(--color-text-muted); }


/* ============ Pinned process scroll — Figma nodes 26:43, 26:161, 26:194 (REUSABLE) ============ */
.process-scroll {
  --process-stage-height: min(600px, calc(100vh - 300px));
  --process-left-gutter: max(15px, calc((100vw - var(--container)) / 2 + 15px));
  --process-content-width: min(calc(100vw - 30px), calc(var(--container) - 30px));
  position: relative;
  background: var(--color-light);
  color: var(--color-dark);
}
.process-scroll.is-enhanced { height: 300vh; min-height: 2280px; }
.process-scroll__sticky { background: var(--color-light); }
.process-scroll.is-enhanced .process-scroll__sticky { position: sticky; top: 0; height: 100vh; overflow: hidden; }
.process-scroll__inner {
  height: 100%; display: flex; flex-direction: column; justify-content: flex-start;
  padding-top: 125px; padding-bottom: 200px;
}
.process-scroll__head { position: relative; z-index: 3; flex: 0 0 auto; text-align: center; margin-bottom: clamp(28px, 4vh, 65px); }
.process-scroll__eyebrow {
  margin: 0 0 5px; font-family: var(--font-h6); font-size: 13px; font-weight: var(--weight-h6);
  line-height: 1.25; letter-spacing: .05em; text-transform: uppercase; color: var(--color-text-muted);
}
.process-scroll__title {
  margin: 0; font-size: clamp(36px, 2.7vw, 52px); font-weight: var(--weight-body);
  line-height: 1.25; letter-spacing: -.02em; color: var(--color-dark);
}
.process-scroll__title em { font-family: var(--font-accent); font-style: italic; font-weight: 400; }
.process-scroll__tabs {
  list-style: none; display: flex; align-items: center; justify-content: center; gap: 12px;
  margin: clamp(22px, 3vh, 50px) 0 0; padding: 0;
}
.process-scroll__tab {
  padding: 15px 25px; border-radius: var(--btn-radius);
  background: color-mix(in srgb, var(--color-light) 94%, var(--color-dark));
  font-family: var(--font-button); font-size: 14px; font-weight: var(--btn-weight);
  line-height: 18px; letter-spacing: -.02em; color: var(--color-dark);
  transition: color .2s ease, background-color .2s ease;
}
.process-scroll__tab.is-active { background: var(--color-dark); color: var(--color-light); }
.process-scroll__stage {
  position: relative; z-index: 1; display: grid; grid-template-columns: repeat(2, minmax(0, 630px));
  gap: 30px; width: 100%; height: var(--process-stage-height); min-height: 420px;
}
.process-scroll__text-window {
  position: relative; z-index: 2; grid-column: 1 / -1; width: 100vw;
  max-width: none; margin-left: calc(-1 * var(--process-left-gutter)); overflow: hidden;
  border-radius: var(--card-radius);
}
.process-scroll__track {
  display: flex; column-gap: 30px; width: 100%; height: 100%; padding-left: var(--process-left-gutter);
  transform: translate3d(0, 0, 0); will-change: transform;
}
.process-scroll__step {
  display: grid; grid-template-columns: repeat(2, minmax(0, 630px)); gap: 30px;
  flex: 0 0 var(--process-content-width); width: var(--process-content-width); height: 100%;
}
.process-scroll__card {
  position: relative; width: 100%; height: 100%; overflow: hidden; border-radius: 12px;
  background: rgba(239, 239, 239, .53);
  -webkit-backdrop-filter: blur(15px);
  backdrop-filter: blur(15px);
  color: var(--color-dark);
}
.process-scroll__step-heading {
  position: absolute; z-index: 2; top: 21.5%; left: 11.9%; width: 71%;
  margin: 0; font-size: clamp(26px, 1.875vw, 36px); font-weight: var(--weight-body);
  line-height: 1.25; letter-spacing: -.02em; color: var(--color-dark);
}
.process-scroll.is-enhanced .process-scroll__step-heading {
  opacity: 0; transform: translateY(22px);
  transition: opacity .55s ease, transform .55s ease;
}
.process-scroll.is-enhanced .process-scroll__step-heading.is-heading-visible { opacity: 1; transform: translateY(0); }
.process-scroll__step-content {
  position: absolute; z-index: 2; top: 48%; left: 42.5%; width: 45.5%;
  font-size: clamp(14px, .9375vw, 18px); line-height: normal; color: var(--color-dark);
}
.process-scroll.is-enhanced .process-scroll__step-content {
  opacity: 0; transform: translateY(18px);
  transition: opacity .55s ease .08s, transform .55s ease .08s;
}
.process-scroll.is-enhanced .process-scroll__step-content.is-content-visible {
  opacity: 1; transform: translateY(0);
}
.process-scroll__step-content p { margin: 0; color: var(--color-dark); }
.process-scroll__step-content .btn { margin-top: clamp(28px, 3.25vw, 62px); }
.process-scroll__media {
  position: relative; z-index: 2; overflow: hidden; border-radius: var(--card-radius);
  background: var(--color-dark);
}
.process-scroll__media video { display: block; width: 100%; height: 100%; object-fit: cover; }
.process-scroll__poster { display: none; width: 100%; height: 100%; object-fit: cover; }
.process-scroll__number-stack {
  position: absolute; z-index: 0; left: -8.05%; bottom: -22.5%; width: 350px; height: 375px;
  display: flex; align-items: flex-start; pointer-events: none;
  font-family: var(--font-heading); font-size: clamp(180px, 15.625vw, 300px);
  font-weight: var(--weight-body); line-height: 1.25; letter-spacing: -.02em; color: var(--color-dark);
}
.process-scroll__number-zero { flex: 0 0 auto; }
.process-scroll__number-window {
  position: relative; display: inline-block; flex: 0 0 .62em; height: 1.25em; overflow: hidden;
}
.process-scroll__number {
  position: absolute; inset: 0 auto auto 0; opacity: 0; transform: translate3d(0, 105%, 0);
  transition: opacity .5s ease, transform .65s cubic-bezier(.22, 1, .36, 1);
  will-change: opacity, transform;
}
.process-scroll__number.is-before { transform: translate3d(0, -105%, 0); }
.process-scroll__number.is-after { transform: translate3d(0, 105%, 0); }
.process-scroll__number.is-active { opacity: 1; transform: translate3d(0, 0, 0); }

@media (max-height: 760px) and (min-width: 861px) {
  .process-scroll { --process-stage-height: calc(100vh - 250px); }
  .process-scroll__head { margin-bottom: 22px; }
  .process-scroll__tabs { margin-top: 18px; }
}

@media (max-width: 860px), (prefers-reduced-motion: reduce) {
  .process-scroll.is-enhanced { height: auto; min-height: 0; }
  .process-scroll.is-enhanced .process-scroll__sticky { position: relative; height: auto; overflow: visible; }
  .process-scroll__inner { padding-top: 75px; padding-bottom: 75px; }
  .process-scroll__stage { display: flex; flex-direction: column; height: auto; min-height: 0; }
  .process-scroll__text-window { order: 2; overflow: visible; }
  .process-scroll__track { display: grid; gap: 50px; transform: none !important; will-change: auto; }
  .process-scroll__step {
    display: flex; flex-direction: column; gap: 50px; height: auto;
  }
  .process-scroll__card { display: flex; min-height: 0; flex-direction: column; padding: 50px 30px; }
  .process-scroll__step .process-scroll__media { order: 1; aspect-ratio: 1.05 / 1; min-height: 0; }
  .process-scroll__step .process-scroll__card { order: 2; }
  .process-scroll__number-stack { display: none; }
  .process-scroll__step-heading, .process-scroll.is-enhanced .process-scroll__step-heading { position: static; width: auto; opacity: 1; transform: none; transition: none; }
  .process-scroll__step-content, .process-scroll.is-enhanced .process-scroll__step-content { position: static; width: auto; margin-top: 30px; opacity: 1; transform: none; transition: none; }
  .process-scroll__step[aria-hidden="true"] { display: block; }
}

@media (prefers-reduced-motion: reduce) {
  .process-scroll__media video { display: none; }
  .process-scroll__poster:not([hidden]) { display: block; }
}

@media (max-width: 860px) {
  .process-scroll__head { display: contents; }
  .process-scroll__eyebrow, .process-scroll__title { text-align: center; }
  .process-scroll__tabs { position: sticky; z-index: 20; top: 80px; gap: 8px; margin: 32px -15px 50px; padding: 10px 15px; background: color-mix(in srgb, var(--color-light) 92%, transparent); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); }
  .process-scroll__tab { flex: 1 1 0; padding: 12px 10px; font-size: 13px; }
  .process-scroll__card { min-height: 0; }
  .process-scroll__step-content .btn { margin-top: 28px; }
}


/* ============ Pinned problem card stack (REUSABLE) ============ */
.problem-scroll {
  height: 400vh;
  background: var(--color-bg-light); color: var(--color-dark);
}
.problem-scroll__sticky {
  position: sticky; top: 0; height: 100vh; min-height: 720px; overflow: hidden;
  background: var(--color-bg-light);
}
.problem-scroll__sticky::after {
  content: ""; position: absolute; z-index: 1; right: 0; bottom: 0; left: 0; height: 176px;
  background: linear-gradient(180deg, transparent, var(--color-dark)); pointer-events: none;
}
.problem-scroll__inner { position: relative; height: 100%; padding-top: clamp(90px, 7.8vw, 150px); }
.problem-scroll__head { width: min(100%, 860px); }
.problem-scroll__eyebrow {
  margin: 0 0 5px; font-family: var(--font-h6); font-size: 13px; font-weight: var(--weight-h6);
  line-height: 1.25; letter-spacing: .05em; text-transform: uppercase; color: var(--color-eyebrow-light);
}
.problem-scroll__title {
  margin: 0; font-size: clamp(42px, 2.7vw, 52px); font-weight: var(--weight-body);
  line-height: 1.25; letter-spacing: -.02em; color: var(--color-dark);
}
.problem-scroll__title em { font-family: var(--font-accent); font-style: italic; font-weight: 400; }
.problem-scroll__lede {
  width: min(100%, 440px); margin: clamp(54px, 5.4vw, 104px) 0 0; color: var(--color-text-muted);
  font-size: clamp(18px, 1.15vw, 22px); line-height: normal;
}
.problem-scroll__deck {
  position: absolute; z-index: 2; top: clamp(270px, 34.65vh, 420px); right: 40px;
  width: clamp(480px, 32.8125vw, 630px); aspect-ratio: 630 / 661;
}
.problem-scroll__card {
  position: absolute; inset: 0; display: grid; grid-template-rows: 530fr 131fr;
  overflow: hidden; border-radius: var(--card-radius); background: var(--color-light);
  opacity: 0; transform-origin: center; will-change: transform, opacity;
}
.problem-scroll__card:first-child { opacity: 1; }
.problem-scroll__media { position: relative; overflow: hidden; background: var(--color-dark); }
.problem-scroll__media :is(video, .problem-scroll__poster) {
  position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover;
}
.problem-scroll__caption {
  display: flex; align-items: center; gap: 16px; padding: 20px 30px; color: var(--color-dark);
}
.problem-scroll__caption p { margin: 0; font-size: clamp(14px, .84vw, 16px); line-height: normal; color: var(--color-dark); }
.problem-scroll__brand {
  display: block; flex: 0 0 51px; width: 51px; height: 51px; overflow: hidden; border-radius: 12px;
}
.problem-scroll__brand:is(span) { display: grid; place-items: center; }
.problem-scroll__brand--webflow { background: var(--color-bg-light); }
.problem-scroll__brand--designrocket { border: 1px solid color-mix(in srgb, var(--color-dark) 14%, transparent); background: var(--color-light); }
.problem-scroll__brand--designrocket svg { display: block; width: 26px; height: 26px; }
.problem-scroll__brand img { display: block; max-width: 70%; max-height: 70%; }

@media (max-width: 860px), (prefers-reduced-motion: reduce) {
  .problem-scroll { height: auto; }
  .problem-scroll__sticky { position: relative; height: auto; min-height: 0; overflow: visible; padding: 75px 0; }
  .problem-scroll__sticky::after { display: none; }
  .problem-scroll__inner { height: auto; padding-top: 0; }
  .problem-scroll__lede { margin-top: 36px; }
  .problem-scroll__deck { position: static; width: min(100%, 630px); margin: 56px auto 0; aspect-ratio: auto; }
  .problem-scroll__card {
    position: relative; inset: auto; aspect-ratio: 630 / 661; margin-top: 50px;
    opacity: 1 !important; transform: none !important; will-change: auto;
  }
  .problem-scroll__card:first-child { margin-top: 0; }
  .problem-scroll__media video { display: none; }
  .problem-scroll__poster[hidden] { display: block; }
}

@media (max-width: 560px) {
  .problem-scroll__title { font-size: 26px; }
  .problem-scroll__caption { gap: 12px; padding: 16px 18px; }
  .problem-scroll__brand { flex-basis: 42px; width: 42px; height: 42px; }
  .problem-scroll__caption p { font-size: 13px; }
}
@media (max-width: 360px) { .problem-scroll__title { font-size: 22px; } }


/* ============ Page type tabs — Figma node 26:108 (REUSABLE) ============ */
.page-type-tabs {
  --page-type-left-gutter: max(15px, calc((100vw - var(--container)) / 2));
  overflow: hidden; padding: clamp(72px, 8vw, 136px) 0 clamp(72px, 7vw, 120px);
  background: var(--color-dark);
  color: var(--color-light);
}
.page-type-tabs__head { text-align: center; }
.page-type-tabs__eyebrow {
  margin: 0 0 5px; font-family: var(--font-h6); font-size: 13px; font-weight: var(--weight-h6);
  line-height: 1.25; letter-spacing: .05em; text-transform: uppercase; color: var(--color-text-subtle);
}
.page-type-tabs__title {
  margin: 0; font-size: clamp(36px, 2.7vw, 52px); font-weight: var(--weight-body);
  line-height: 1.25; letter-spacing: -.02em; color: var(--color-light);
}
.page-type-tabs__title em { font-family: var(--font-accent); font-style: italic; font-weight: 400; }
.page-type-tabs__tablist {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px;
  margin-top: clamp(34px, 4.7vw, 74px);
}
.page-type-tabs__tab {
  display: inline-flex; align-items: center; justify-content: center; padding: 15px 25px;
  border: 0; border-radius: var(--btn-radius); background: rgba(255, 255, 255, .2);
  font-family: var(--font-button); font-size: 14px; font-weight: var(--btn-weight);
  line-height: 18px; letter-spacing: -.02em; color: var(--color-light); cursor: pointer;
  transition: background-color .25s ease, color .25s ease;
}
.page-type-tabs__tab.is-active,
.page-type-tabs__tab[aria-selected="true"] { background: var(--color-light); color: var(--color-dark); }
.page-type-tabs__tab:focus-visible { outline: 2px solid var(--color-light); outline-offset: 3px; }
.page-type-tabs__panels {
  position: relative; display: grid; margin-top: clamp(64px, 8vw, 100px);
}
.page-type-tabs__panels::before,
.page-type-tabs__panels::after {
  content: ""; position: absolute; z-index: 2; top: 0; bottom: 0;
  width: clamp(180px, 27vw, 500px); pointer-events: none;
  transition: opacity .2s ease;
}
.page-type-tabs__panels::before {
  left: 0; opacity: 0;
  background: linear-gradient(90deg, var(--color-dark), transparent);
}
.page-type-tabs__panels::after {
  right: 0;
  background: linear-gradient(90deg, transparent, var(--color-dark));
}
.page-type-tabs__panels.has-previous::before { opacity: 1; }
.page-type-tabs__panel {
  position: relative; grid-area: 1 / 1; width: 100%;
  min-width: 0; overflow-x: auto;
  scrollbar-width: none; scroll-behavior: smooth;
}
.page-type-tabs__panel::-webkit-scrollbar { display: none; }
.page-type-tabs__panel[hidden] { display: none; }
.page-type-tabs__gallery {
  display: flex; align-items: stretch; gap: 30px; width: max-content;
  box-sizing: border-box; padding-inline: var(--page-type-left-gutter);
}
.page-type-tabs__card {
  position: relative; flex: 0 0 clamp(390px, 32.8vw, 630px); aspect-ratio: 630 / 709;
  overflow: hidden; margin: 0; border-radius: var(--card-radius); background: var(--color-bg-soft);
  opacity: 0; filter: blur(18px);
  transition: opacity .45s ease, filter .45s ease;
  will-change: opacity, filter;
}
.page-type-tabs__panel.is-visible .page-type-tabs__card { opacity: 1; filter: blur(0); }
.page-type-tabs__panel.is-visible .page-type-tabs__card:nth-child(2) { transition-delay: .05s; }
.page-type-tabs__panel.is-visible .page-type-tabs__card:nth-child(3) { transition-delay: .1s; }
.page-type-tabs__card img { display: block; width: 100%; height: auto; max-width: none; }
.page-type-tabs__arrow {
  position: absolute; z-index: 3; top: 50%;
  width: 72px; height: 72px; padding: 0;
  border: 0; border-radius: 50%; background: transparent; transform: translateY(-50%);
  font-family: var(--font-body);
  font-size: clamp(52px, 3.65vw, 70px); font-weight: var(--weight-body); line-height: 1; color: var(--color-light);
  cursor: pointer; transition: opacity .2s ease;
}
.page-type-tabs__arrow--previous {
  left: clamp(30px, 7vw, 105px); opacity: 0; pointer-events: none;
}
.page-type-tabs__arrow--next { right: clamp(30px, 7vw, 105px); }
.page-type-tabs__panels.has-previous .page-type-tabs__arrow--previous { opacity: 1; pointer-events: auto; }
.page-type-tabs__arrow:disabled { opacity: .35; cursor: default; }
.page-type-tabs__arrow--previous:disabled { opacity: 0; }
.page-type-tabs__arrow:focus,
.page-type-tabs__arrow:focus-visible { outline: 2px solid var(--color-light); outline-offset: 4px; }

@media (max-width: 860px) {
  .page-type-tabs__tablist {
    flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; margin-right: -15px; padding: 0 15px 8px 0;
    scrollbar-width: none;
  }
  .page-type-tabs__tablist::-webkit-scrollbar { display: none; }
  .page-type-tabs__tab { flex: 0 0 auto; }
  .page-type-tabs__panels { margin-top: 50px; }
  .page-type-tabs__gallery { gap: 20px; }
  .page-type-tabs__card { flex-basis: calc(100vw - 54px); scroll-snap-align: start; }
  .page-type-tabs__arrow { width: 58px; height: 58px; }
  .page-type-tabs__arrow--previous { left: 20px; }
  .page-type-tabs__arrow--next { right: 20px; }
}

@media (prefers-reduced-motion: reduce) {
  .page-type-tabs__panel { scroll-behavior: auto; }
  .page-type-tabs__card { opacity: 1; filter: none; transition: none; }
  .page-type-tabs__panels::before,
  .page-type-tabs__panels::after,
  .page-type-tabs__arrow { transition: none; }
}


/* ============ Calm water ripple canvas — Figma node 26:3 (REUSABLE) ============ */
.water-ripple-demo {
  display: grid; place-items: center; min-height: 100vh; overflow: hidden; background: var(--color-dark);
}
.water-ripple {
  position: relative; width: min(96vw, 926px); aspect-ratio: 1; overflow: hidden;
  border-radius: 50%; background: var(--color-dark); pointer-events: none;
}
.water-ripple__canvas { display: block; width: 100%; height: 100%; }
.water-ripple--background {
  position: absolute; z-index: 0; top: 50%; left: 50%; width: max(100vw, 100vh);
  max-width: none; transform: translate(-50%, -50%);
}


/* ============ Stat grid — Figma node 26:76 (REUSABLE) ============ */
.statgrid { display: grid; grid-template-columns: repeat(4, minmax(0, 300px)); justify-content: center; gap: 30px; }
.statgrid__item { min-height: 150px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.statgrid__num {
  display: inline-flex; align-items: baseline; justify-content: center;
  font-family: var(--font-heading); font-weight: var(--weight-body); font-size: 72px;
  font-variant-numeric: tabular-nums; line-height: 1.25; letter-spacing: -.02em; color: var(--color-heading);
}
.statgrid__cap { width: 100%; font-size: 16px; line-height: normal; color: var(--color-text); margin: 0; }
@media (max-width: 980px) { .statgrid { grid-template-columns: repeat(2, minmax(0, 300px)); } }
@media (max-width: 560px) {
  .statgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 12px; }
  .statgrid__item { min-height: 112px; }
  .statgrid__num { font-size: 42px; }
  .statgrid__cap { font-size: 13px; }
}

/* ============ Pricing system — Figma nodes 26:157 and 37:694 (REUSABLE) ============ */
.pricing-system {
  --pricing-bottom-row: 190px;
  --pricing-pad-y: 75px;
  position: relative; overflow: hidden; display: grid; grid-template-columns: 480px 1fr;
  min-height: 681px; border-radius: var(--card-radius);
  background: var(--color-bg-soft);
}
.pricing-system::after {
  content: ""; position: absolute; z-index: 1; bottom: calc(var(--pricing-pad-y) + var(--pricing-bottom-row)); left: 0; right: 0;
  height: 1px; background: var(--color-border); pointer-events: none;
}
.pricing-system__core,
.pricing-system__details {
  display: grid;
  grid-template-rows: minmax(min-content, 1fr) var(--pricing-bottom-row);
}
.pricing-system__core { padding: var(--pricing-pad-y) 50px; border-right: 1px solid var(--color-border); }
.pricing-system__core-main, .pricing-system__details-main { padding-bottom: 32px; }
.pricing-system__label,
.pricing-system__included-label,
.pricing-system__plan-name {
  margin: 0; font-family: var(--font-h6); font-size: 13px; font-weight: var(--weight-h6);
  line-height: 1.25; letter-spacing: .05em; text-transform: uppercase; color: #dbdbdb;
}
.pricing-system__title { margin: 28px 0 4px; font-size: 24px; line-height: 1.25; letter-spacing: -.02em; }
.pricing-system__sub { margin: 0; color: rgba(255, 255, 255, .7); }
.pricing-system__setup { display: flex; align-items: flex-end; gap: 4px; margin-top: 62px; }
.pricing-system__setup-price { font-size: 70px; line-height: 1.25; letter-spacing: -.02em; }
.pricing-system__setup-term { padding-bottom: 14px; color: rgba(255, 255, 255, .7); }
.pricing-system__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 20px; }
.pricing-system__usage { padding-top: 32px; }
.pricing-system__usage-title { margin: 28px 0 4px; font-size: 24px; line-height: 1.25; }
.pricing-system__usage-copy { margin: 0; color: rgba(255, 255, 255, .7); }
.pricing-system__details { padding: var(--pricing-pad-y) 70px; }
.pricing-system__features { display: grid; grid-template-columns: repeat(2, minmax(0, 300px)); gap: 40px 30px; margin-top: 28px; }
.pricing-system__feature { display: grid; grid-template-columns: 14px 1fr; gap: 12px; align-items: start; }
.pricing-system__check { display: block; width: 14px; height: 14px; max-width: none; margin-top: 2px; }
.pricing-system__feature-title { margin: 0 0 4px; font-size: 14px; line-height: 1.25; letter-spacing: -.02em; }
.pricing-system__feature-copy { margin: 0; font-size: 14px; line-height: 1.25; color: #bababa; }
.pricing-system__plans { display: grid; grid-template-columns: repeat(3, 190px); gap: 30px; padding-top: 32px; }
.pricing-system__price { display: flex; align-items: flex-end; gap: 4px; margin-top: 20px; }
.pricing-system__amount { font-size: 50px; line-height: 1.25; letter-spacing: -.02em; }
.pricing-system__term { padding-bottom: 9px; color: rgba(255, 255, 255, .7); }
.pricing-system__plan-copy { margin: 4px 0 0; font-size: 14px; line-height: 1.25; color: rgba(255, 255, 255, .7); }
@media (max-width: 1160px) {
  .pricing-system { --pricing-pad-y: 55px; }
  .pricing-system { grid-template-columns: 390px 1fr; }
  .pricing-system__core { padding: 55px 40px; }
  .pricing-system__details { padding: 55px 40px; }
  .pricing-system__plans { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 980px) {
  .pricing-system { grid-template-columns: 1fr; }
  .pricing-system::after { display: none; }
  .pricing-system__core, .pricing-system__details { display: flex; flex-direction: column; }
  .pricing-system__core-main, .pricing-system__details-main { padding-bottom: 0; }
  .pricing-system__core { border-right: 0; border-bottom: 1px solid var(--color-border); }
  .pricing-system__usage, .pricing-system__plans { margin-top: 48px; padding-top: 48px; border-top: 1px solid var(--color-border); }
}
@media (max-width: 620px) {
  .pricing-system__core, .pricing-system__details { padding: 40px 24px; }
  .pricing-system__features, .pricing-system__plans { grid-template-columns: 1fr; }
  .pricing-system__setup-price { font-size: 56px; }
}


/* ============ Status icon — yes / limited / no (REUSABLE) ============
   CONTRACT: .stat is ONLY the inline-flex wrapper; the colored circle lives on
   .stat__icon. Never move the circle/background onto .stat — the matrix legend
   and cells rely on styling .stat__icon independently. */
.stat { display: inline-flex; }
.stat__icon { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; }
.stat__icon svg { width: 13px; height: 13px; }
.stat--yes .stat__icon { background: var(--color-primary); color: var(--color-on-primary); }
.stat--limited .stat__icon { background: transparent; color: var(--color-primary); border: 1.5px solid var(--color-primary); }
.stat--no .stat__icon { background: transparent; color: var(--color-text-muted); border: 1.5px solid var(--color-border); }


/* ============ Benefit matrix — accordion of category tables (REUSABLE) ============
   Collapsible category sections, each opening to a grid of rows x N plan columns
   with a status icon + detail per cell. Driven by the generic [data-accordion]
   handler in main.js. Tokens only. */
.matrix__legend { display: flex; flex-wrap: wrap; gap: .6rem 1.5rem; margin: 0 0 1.5rem; }
.matrix__key { display: inline-flex; align-items: center; gap: .5rem; font-size: var(--fs-sm); color: var(--color-text-muted); }
.matrix__key .stat__icon { width: 20px; height: 20px; }
.matrix__scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.matrix__table { min-width: 720px; }
.matrix__cols { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; background: var(--color-secondary); color: var(--color-on-secondary); border-radius: 14px 14px 0 0; padding: .9rem 1.25rem; }
.matrix__col { font-family: var(--font-heading); font-weight: 700; font-size: var(--fs-sm); text-align: left; display: flex; flex-direction: column; gap: .15rem; }
.matrix__col--label { text-align: left; }
.matrix__col small { font-family: var(--font-body); font-weight: 500; font-size: .68rem; opacity: .75; }
.matrix__cta { display: inline-flex; align-self: flex-start; align-items: center; justify-content: center; gap: .3rem; margin-top: .6rem; padding: .42rem .85rem; border-radius: 999px; background: var(--color-primary); color: var(--color-on-secondary); font-family: var(--font-heading); font-weight: 700; font-size: .72rem; line-height: 1; text-decoration: none; transition: background .15s ease; }
.matrix__cta:hover { background: var(--color-primary-hover); color: var(--color-on-secondary); }
.matrix__cta:focus-visible { outline: 2px solid var(--color-on-secondary); outline-offset: 2px; }
.matrix__cta-arrow { font-size: .9em; }
.matrix__lead { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; background: var(--color-bg); border-left: 1px solid var(--color-border); border-right: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border); }
.matrix__leadnote { display: block; margin-top: .4rem; font-family: var(--font-body); font-weight: 500; font-size: .76rem; line-height: 1.4; color: var(--color-text-muted); }
.matrix__price { font-family: var(--font-heading); font-weight: 700; font-size: var(--fs-base); color: var(--color-primary); }
.matrix__price small { font-family: var(--font-body); font-weight: 500; font-size: .72rem; color: var(--color-text-muted); }

.matrix__cat { border: 1px solid var(--color-border); border-top: 0; }
.matrix__cat:last-of-type { border-radius: 0 0 14px 14px; }
.matrix__cat:last-of-type:not(.is-open) .matrix__trigger { border-bottom-left-radius: 14px; border-bottom-right-radius: 14px; }
.matrix__cat-head { margin: 0; font: inherit; }
.matrix__trigger { display: flex; align-items: center; justify-content: space-between; gap: 1rem; width: 100%; padding: 1rem 1.25rem; border: 0; background: var(--color-bg-muted); cursor: pointer; text-align: left; }
.matrix__trigger:hover { background: color-mix(in srgb, var(--color-bg-muted) 90%, var(--color-text-muted)); }
.matrix__cat-title { font-family: var(--font-heading); font-weight: 700; font-size: var(--fs-base); color: var(--color-heading); }
.matrix__chev { flex: none; width: 11px; height: 11px; border-right: 2px solid var(--color-primary); border-bottom: 2px solid var(--color-primary); transform: rotate(45deg); transition: transform .25s ease; }
.matrix__cat.is-open .matrix__chev { transform: rotate(-135deg); }
.matrix__trigger:focus-visible { outline: 2px solid var(--color-primary); outline-offset: -2px; }

.matrix__panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .3s ease; }
.matrix__panel[hidden] { display: none; }
.matrix__cat.is-open .matrix__panel { grid-template-rows: 1fr; }
.matrix__panel-inner { overflow: hidden; min-height: 0; }

.matrix__row { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; border-top: 1px solid var(--color-border); }
.matrix__rowlabel { font-size: var(--fs-sm); font-weight: 600; color: var(--color-heading); line-height: 1.3; padding: .95rem 1.25rem; }
.matrix__cell { display: flex; flex-direction: column; align-items: flex-start; gap: .45rem; padding: .95rem 1rem; text-align: left; border-left: 1px solid var(--color-border); }
/* A11Y INVARIANT: the per-cell plan label (.matrix__collabel) stays VISUALLY
   HIDDEN at every width but readable by screen readers, so each status cell is
   associated with its plan column. Never set display:none on it. */
.matrix__collabel { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.matrix__detail { font-size: .78rem; line-height: 1.35; color: var(--color-text-muted); margin: 0; }
.matrix__sublabel { display: block; margin-top: .3rem; font-size: 12px; font-weight: 400; line-height: 1.45; color: var(--color-text-muted); }
.matrix__cell--hl { background: var(--color-bg-soft); }
.matrix__cell--hl .matrix__detail { color: var(--color-heading); }

/* 3-column variant — label + two plan columns */
.matrix--3col .matrix__cols { grid-template-columns: 1.8fr 1fr 1fr; }
.matrix--3col .matrix__row { grid-template-columns: 1.8fr 1fr 1fr; }
.matrix--3col .matrix__table { min-width: 620px; }
/* Mobile: the matrix keeps its column layout and scrolls horizontally inside
   .matrix__scroll (overflow-x:auto above; .matrix__table's min-width guarantees
   the columns keep their shape). No stacked-card fallback — it stays a plain
   swipeable table, and .matrix__collabel stays visually hidden at every width. */
@media (prefers-reduced-motion: reduce) {
  .matrix__panel, .matrix__chev { transition: none; }
}


/* ============ .acc-slider — the ONLY styled range input (REUSABLE) ============
   White track, thumb, current value, and scale values on the default dark surface.
   The JS still exposes --fill for compatibility, but the DesignRocket treatment
   intentionally uses one solid track color. */
.acc-slider__head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-bottom: .55rem; }
.acc-slider__label { font-size: var(--fs-sm); font-weight: 700; color: var(--color-heading); margin: 0; }
.acc-slider__value { font-family: var(--font-heading); font-weight: 700; font-size: 1.05rem; color: var(--color-light); font-variant-numeric: tabular-nums; }
.acc-slider input[type="range"] { --fill: 0%; width: 100%; appearance: none; -webkit-appearance: none; height: 8px; border-radius: 999px; background: var(--color-light); border: 1px solid var(--color-light); cursor: pointer; }
.acc-slider input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 18px; height: 18px; border-radius: 50%; background: var(--color-light); border: 2px solid var(--color-dark); box-shadow: none; }
.acc-slider input[type="range"]::-moz-range-thumb { width: 18px; height: 18px; border-radius: 50%; background: var(--color-light); border: 2px solid var(--color-dark); box-shadow: none; }
.acc-slider__scale { display: flex; justify-content: space-between; margin-top: .3rem; font-size: .72rem; color: var(--color-light); }

/* ================= Closing CTA band ================= */
.cta { padding: var(--pad-full) 0; }
.cta__inner {
  background: var(--gradient-two);
  color: #fff; text-align: center;
  border-radius: 22px; padding: clamp(2.6rem, 5vw, 4rem) 1.5rem;
}
.cta__inner h2 { color: #fff; }
.cta__inner p { color: rgba(255,255,255,.8); margin-bottom: 1.6rem; }
.cta__actions { display: flex; gap: .8rem; justify-content: center; flex-wrap: wrap; }

/* ===================== Footer ===================== */
.site-footer { background: var(--color-bg); color: var(--color-text); padding: 75px 0; }
.site-footer__inner { display: flex; flex-direction: column; gap: 50px; }

.site-footer__top { display: grid; grid-template-columns: 1fr; gap: 30px; align-items: start; }
.site-footer__intro { width: 100%; text-align: center; }
.site-footer__brand { display: inline-flex; }
.site-footer__brand-logo { display: block; width: 197px; height: 50px; }
.site-footer__tagline { margin: 16px 0 0; font-size: 14px; line-height: normal; color: var(--color-text); }
.site-footer__actions { display: flex; align-items: center; gap: 12px; margin-top: 50px; }
.site-footer__actions .btn { line-height: 18px; }

.site-footer__nav { display: grid; grid-template-columns: repeat(4, 190px); gap: 30px; }
.site-footer__group { width: 190px; }
.site-footer__group--split { display: flex; flex-direction: column; gap: 30px; }

.site-footer__heading {
  margin: 0 0 16px; font-family: var(--font-h6); font-weight: var(--weight-h6);
  font-size: 13px; line-height: 1.25; letter-spacing: .05em;
  color: var(--color-eyebrow);
}
.site-footer__list { list-style: none; margin: 0; padding: 0; }
.site-footer__list a {
  display: inline-block; font-family: var(--font-body); font-size: 14px; line-height: 2;
  color: var(--color-text); text-decoration: none; opacity: 1; transition: opacity .15s ease;
}
.site-footer__nav:has(a:hover) a:not(:hover),
.site-footer__nav:has(a:focus-visible) a:not(:focus-visible) { opacity: .2; }
.site-footer__list a:hover, .site-footer__list a:focus-visible { color: var(--color-text); opacity: 1; }

.site-footer__base { display: flex; align-items: center; justify-content: space-between; min-height: 30px; }
.site-footer__tools { display: flex; align-items: center; gap: 50px; }
.site-footer__tools-logo, .site-footer__tools-logo img { display: block; width: 122px; height: 30px; }
.site-footer__family, .site-footer__legal { display: flex; align-items: center; gap: 30px; }
.site-footer__family a, .site-footer__legal a, .site-footer__legal p {
  margin: 0; font-size: 13px; line-height: normal; color: var(--color-text); opacity: .5;
  transition: opacity .15s ease;
}
.site-footer__family:has(a:hover) a:not(:hover),
.site-footer__family:has(a:focus-visible) a:not(:focus-visible),
.site-footer__legal:has(a:hover) :is(a, p):not(:hover),
.site-footer__legal:has(a:focus-visible) :is(a, p):not(:focus-visible) { opacity: .2; }
.site-footer__family a:hover, .site-footer__family a:focus-visible,
.site-footer__legal a:hover, .site-footer__legal a:focus-visible { color: var(--color-text); opacity: 1; }

.copyrocket-footer { padding: 75px 0; background: var(--color-dark); }
.copyrocket-footer__grid { display: grid; grid-template-columns: 410px 1fr; gap: 30px; }
.copyrocket-footer__intro { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
.copyrocket-footer__intro p { margin: 0 0 34px; font-size: 14px; line-height: 1.45; }
.copyrocket-footer__nav { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 30px; }
.copyrocket-footer__nav > div { display: flex; flex-direction: column; align-items: flex-start; }
.copyrocket-footer__nav p { margin: 0 0 16px; color: var(--color-eyebrow); font-family: var(--font-h6); font-size: 13px; letter-spacing: .05em; line-height: 1.25; text-transform: uppercase; }
.copyrocket-footer__nav .copyrocket-footer__subhead { margin-top: 24px; }
.copyrocket-footer__nav a { color: var(--color-light); font-size: 14px; line-height: 2; text-decoration: none; transition: opacity .15s ease; }
.copyrocket-footer__nav:has(a:hover) a:not(:hover), .copyrocket-footer__nav:has(a:focus-visible) a:not(:focus-visible) { opacity: .25; }
.copyrocket-footer__nav a:focus-visible { outline: 2px solid var(--color-light); outline-offset: 3px; }

/* "Edit in Replit" button — only rendered inside the HubSpot page editor (the
   is_in_editor wrapper in base.html). Fixed bottom-left, Replit brand orange. */
.replit-edit-btn {
  position: fixed;
  left: 20px;
  bottom: 20px;
  z-index: 2147483000;
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .7rem 1.05rem;
  border-radius: 999px;
  background: var(--color-primary);
  color: #fff;
  font-weight: 600;
  font-size: .9rem;
  line-height: 1;
  text-decoration: none;
  box-shadow: 0 6px 20px rgba(109,40,217,.35), 0 2px 6px rgba(0,0,0,.15);
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.replit-edit-btn:hover {
  background: var(--color-primary-hover);
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 10px 26px rgba(109,40,217,.45), 0 3px 8px rgba(0,0,0,.18);
}
.replit-edit-btn__logo { display: block; color: #fff; flex: none; }

/* =================== Testimonials =================== */
.stars { display: block; width: 88px; height: 18px; fill: #fbbc04; }

/* Composes .card .card--plain .card--elevated — keeps its generous 50px padding. */
.testimonial-card { display: flex; flex-direction: column; gap: 25px; height: 100%; box-sizing: border-box; margin: 0; padding: 50px; }
.testimonial-card__quote { margin: 0; }
.testimonial-card__quote p { margin: 0; font-family: var(--font-heading); font-style: italic; font-weight: 500; font-size: var(--fs-base); line-height: 1.35; color: var(--color-text); }
.testimonial-card__author { display: flex; flex-direction: column; gap: 4px; }
.testimonial-card__name { font-family: var(--font-heading); font-weight: 700; font-size: 14px; letter-spacing: -.28px; color: var(--color-text); }
.testimonial-card__role { font-size: 13px; line-height: 1.35; color: var(--color-text); }

@media (max-width: 520px) {
  .testimonial-card { padding: 32px; }
}

/* =================== Load and scroll reveal =================== */
.load-reveal {
  animation: load-reveal-up var(--reveal-duration, 1.25s) cubic-bezier(.22, .6, .28, 1) var(--reveal-delay, 0s) both;
}
.load-reveal--fade { animation-name: load-reveal-fade; }
@keyframes load-reveal-up {
  from { opacity: 0; filter: blur(10px); transform: translateY(24px); }
  to { opacity: 1; filter: blur(0); transform: translateY(0); }
}
@keyframes load-reveal-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}
.reveal { opacity: 0; transform: translateY(16px); transition: opacity .6s ease, transform .6s ease; }
.reveal.is-visible { opacity: 1; transform: none; }
.reveal--heading {
  filter: blur(10px); transform: translateY(24px);
  transition:
    opacity 1.15s cubic-bezier(.22, .6, .28, 1),
    filter 1.4s cubic-bezier(.22, .6, .28, 1),
    transform 1.4s cubic-bezier(.22, .6, .28, 1);
}
.reveal--heading.is-visible { filter: blur(0); transform: translateY(0); }
.reveal--heading + .reveal--heading { transition-delay: .16s; }
@media (prefers-reduced-motion: reduce) {
  .load-reveal { animation: none; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .reveal--heading { filter: none; }
  html { scroll-behavior: auto; }
}

/* ==================== Flex alignment utilities ==================== */
.justify-end { justify-content: flex-end; }
.items-start { align-items: flex-start; }

/* ==================== Responsive ==================== */
@media (max-width: 1260px) {
  .nav-toggle { display: flex; margin-left: auto; }
  .site-nav {
    position: absolute; top: 80px; left: 0; right: 0;
    background: var(--color-bg); border-bottom: 1px solid var(--color-border);
    flex-direction: column; align-items: stretch; gap: 12px;
    padding: 20px 30px 30px;
    display: none;
  }
  .site-nav.is-open { display: flex; }
  .nav-menu { flex-direction: column; align-items: stretch; width: 100%; }
  .nav-item { width: 100%; }
  .nav-link { width: 100%; justify-content: space-between; padding: 15px 0; }
  .site-nav__actions { display: grid; grid-template-columns: 1fr 1fr; width: 100%; }
  .nav-cta { width: 100%; }
  .copyrocket-header .site-header__inner { justify-content: space-between; }
  .copyrocket-nav { display: none; }
}

@media (max-width: 1340px) {
  .site-footer__top { grid-template-columns: 1fr; gap: 50px; }
  .site-footer__intro { width: 100%; }
}

@media (max-width: 1100px) {
  .site-footer__base { flex-direction: column; align-items: flex-start; gap: 30px; }
}

@media (max-width: 860px) {
  .section { padding: 75px 0; }
  .page-type-tabs { padding-top: 75px; padding-bottom: 75px; }
  .process-scroll__title, .page-type-tabs__title, .section-head h3, .faq--centered .faq__title { font-size: clamp(26px, 7.25vw, 30px); }
  .grid--3 { grid-template-columns: 1fr; }
  .site-footer__nav { display: grid; grid-template-columns: 1fr 1fr; gap: 32px 24px; }
  .site-footer__group { width: auto; }

  .hero { padding: 40px 0; }

  .site-footer__tools { flex-direction: column; align-items: flex-start; gap: 24px; }
  .site-footer__family { flex-wrap: wrap; }
  .copyrocket-footer__grid { grid-template-columns: 1fr; gap: 50px; }
  .copyrocket-footer__nav { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 560px) {
  .site-header__inner { padding-left: 20px; padding-right: 20px; }
  .brand__logo { width: 177.55px; height: 45px; }
  .site-nav { padding-left: 20px; padding-right: 20px; }
  .site-nav__actions { grid-template-columns: 1fr; }
  .site-footer { padding: 50px 0; }
  .site-footer__nav { grid-template-columns: 1fr; }
  .site-footer__actions { flex-direction: column; align-items: stretch; }
  .site-footer__actions .btn { width: 100%; }
  .site-footer__legal { flex-wrap: wrap; }
  .copyrocket-header { padding: 12px 0; }
  .copyrocket-brand { font-size: 20px; }
  .copyrocket-brand__mark { width: 39px; height: 45px; }
  .copyrocket-header .nav-cta { width: auto; padding-inline: 17px; }
  .copyrocket-footer__nav { grid-template-columns: 1fr; gap: 30px; }
}