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

    :root {
      /* ══ BRANDSMITH · Good Neighbor v16 — universals (see index.html) ══ */

      /* colors */
      --bg: #F4F4F4;
      --ink: #141412;
      --surface: #FFFFFF;
      --muted: #E8E8E6;
      --border: #E5E5E5;
      --ink-muted: #5C5C5C;
      --accent: #9B3FB8;
      --accent-deep: #6B2A86;
      --highlight: #FED141;
      --focus-ring: #9B3FB8;

      /* spacing */
      --spacing-xs: 4px;
      --spacing-sm: 8px;
      --spacing-md: 16px;
      --spacing-lg: 24px;
      --spacing-xl: 40px;
      --spacing-2xl: 64px;

      /* rounded */
      --rounded-sm: 6px;
      --rounded-md: 12px;
      --rounded-lg: 20px;
      --rounded-xl: 28px;
      --rounded-full: 9999px;
      --rounded-section: 60px;

      /* shadows */
      --shadow-sm: 0 1px 2px rgba(20,20,18,0.08);
      --shadow-md: 0 6px 16px rgba(20,20,18,0.12);
      --shadow-lg: 0 20px 40px rgba(20,20,18,0.18);

      /* motion */
      --motion-fast: 150ms;
      --motion-base: 260ms;
      --motion-slow: 480ms;
      --ease-standard: cubic-bezier(0.2, 0.8, 0.2, 1);
      --ease-emphasized: cubic-bezier(0.34, 1.56, 0.64, 1);

      /* typography */
      --font-display: Doyle, 'Recoleta', Georgia, serif;
      --font-ui: 'ITC Avant Garde Gothic Pro', 'ITC Avant Garde Gothic', 'Century Gothic', sans-serif;

      --display-xl-size: clamp(3rem, 5.5vw, 5.5rem);
      --display-xl-line-height: 0.92;
      --display-xl-letter-spacing: -0.03em;
      --display-letter-spacing: -0.02em;

      --body-size: 1rem;
      --body-weight: 500;
      --body-line-height: 1.5;
      --body-letter-spacing: -0.01em;

      --caption-size: 0.8125rem;
      --caption-weight: 500;
      --caption-line-height: 1.3;
      --caption-letter-spacing: 0.02em;

      /* typography.footer-* */
      --footer-brand-size: clamp(2rem, 3.5vw, 3.5rem);
      --footer-brand-weight: 900;
      --footer-brand-line-height: 0.95;
      --footer-brand-letter-spacing: -0.02em;
      --footer-title-size: 1.125rem;
      --footer-title-weight: 700;
      --footer-title-line-height: 1.18;
      --footer-title-letter-spacing: -0.02em;
      --footer-link-size: 0.875rem;
      --footer-link-weight: 400;
      --footer-link-line-height: 1.18;
      --footer-link-letter-spacing: -0.02em;
      --footer-copyright-size: 0.875rem;
      --footer-copyright-weight: 400;
      --footer-copyright-line-height: 1.18;
      --footer-copyright-letter-spacing: -0.02em;
      --spacing-footer-bottom: clamp(3.75rem, 7vw, 6.25rem);

      /* typography.nav-overlay — +2px scale vs footer-link/title */
      --nav-overlay-title-size: 1.25rem;
      --nav-overlay-title-weight: var(--footer-title-weight);
      --nav-overlay-title-line-height: var(--footer-title-line-height);
      --nav-overlay-title-letter-spacing: var(--footer-title-letter-spacing);
      --nav-overlay-link-size: 1rem;
      --nav-overlay-link-weight: var(--footer-link-weight);
      --nav-overlay-link-line-height: var(--footer-link-line-height);
      --nav-overlay-link-letter-spacing: var(--footer-link-letter-spacing);

      /* components.button + button-marketing */
      --btn-size: 0.9375rem;
      --btn-weight: 600;
      --btn-padding-x: 20px;
      --btn-padding-y: 10px;
      --btn-radius: 12px;
      --btn-shadow: var(--shadow-sm);
      --btn-mkt-size: 1rem;
      --btn-mkt-weight: 600;
      --btn-mkt-padding-x: 28px;
      --btn-mkt-padding-y: 14px;
      --btn-mkt-min-height: 3.375rem;
      --btn-mkt-radius: var(--rounded-full);
      --btn-mkt-shadow: var(--shadow-sm);

      /* site-only — layout shell + overlay (matches index.html) */
      --layout-max: 80rem;
      --layout-gutter: var(--spacing-xl);
      --section-gap: var(--spacing-2xl);
      --overlay-scrim: color-mix(in srgb, var(--ink) 45%, transparent);

      /* faq — Figma comp: bordered accordion + tab pills */
      --faq-border-width: 6px;
      --faq-list-margin-inline: calc(var(--faq-border-width) + 60px);
      --faq-radius: var(--rounded-section);
      --faq-pad-inline: clamp(1.5rem, 6vw, 5.625rem);
      --faq-pad-block: clamp(1.75rem, 4vw, 3.75rem);
      --faq-question-size: clamp(1.5rem, 2.8vw, 2.5rem);
      --toggle-pad: 6px;

      /* components.footer — layout tokens */
      --footer-pad-top: var(--spacing-2xl);
      --footer-pad-bottom: var(--spacing-footer-bottom);
      --footer-gap: var(--spacing-2xl);
      --footer-nav-gap: 20px;
      --footer-col-gap: 20px;
      --footer-col-width: 12.5rem;

      /* components.nav-overlay — layout tokens */
      --nav-shell-inset: 60px;
      --nav-overlay-pad-left: var(--spacing-xl);
      --nav-overlay-pad-right: var(--spacing-lg);
      --nav-overlay-section-gap: var(--spacing-2xl);
      --nav-overlay-col-gap: 20px;
    }

    .layout-shell {
      width: 100%;
      max-width: var(--layout-max);
      margin-inline: auto;
      padding-inline: var(--layout-gutter);
      box-sizing: border-box;
    }

    .nav-shell {
      width: 100%;
      max-width: none;
      margin: 0;
      padding: var(--nav-shell-inset) var(--nav-shell-inset) var(--spacing-lg);
      box-sizing: border-box;
    }

    .footer-shell {
      width: 100%;
      max-width: none;
      margin: 0;
      padding-inline: var(--nav-shell-inset);
      box-sizing: border-box;
    }

    .site-surface {
      --site-surface-margin: 20px;
      --site-surface-radius: var(--rounded-section);
      margin: var(--site-surface-margin);
      margin-bottom: var(--site-surface-margin);
      background: var(--bg);
      border-radius: var(--site-surface-radius);
      overflow: hidden;
    }

    html {
      background-color: var(--ink);
    }
    body {
      background: var(--ink);
      color: var(--ink);
      font-family: var(--font-ui);
      font-size: var(--body-size);
      font-weight: var(--body-weight);
      line-height: var(--body-line-height);
      letter-spacing: var(--body-letter-spacing);
      overflow-x: hidden;
    }
    img { display: block; max-width: 100%; }

    /* ── Type roles ───────────────────────────────────────────── */
    .t-display-xl {
      font-family: var(--font-display);
      font-size: var(--display-xl-size);
      font-weight: 700;
      line-height: var(--display-xl-line-height);
      letter-spacing: var(--display-xl-letter-spacing);
    }

    /* ── components.button + button-marketing ────────────────── */
    .btn,
    .nav-hamburger,
    .nav-close {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-family: var(--font-ui);
      line-height: 1;
      white-space: nowrap;
      cursor: pointer;
      border: none;
      text-decoration: none;
      transition: background var(--motion-fast) var(--ease-standard),
                  color var(--motion-fast) var(--ease-standard),
                  box-shadow var(--motion-fast) var(--ease-standard);
    }
    a.btn.btn-marketing,
    button.btn-marketing,
    .nav-hamburger,
    .nav-close {
      border-radius: var(--btn-mkt-radius);
      min-height: var(--btn-mkt-min-height);
      padding: var(--btn-mkt-padding-y) var(--btn-mkt-padding-x);
      font-size: var(--btn-mkt-size);
      font-weight: var(--btn-mkt-weight);
      letter-spacing: var(--caption-letter-spacing);
      box-shadow: var(--btn-mkt-shadow);
    }
    .btn:hover,
    .nav-hamburger:hover,
    .nav-close:hover { box-shadow: var(--shadow-md); }
    .btn:focus-visible,
    .nav-hamburger:focus-visible,
    .nav-close:focus-visible {
      outline: 2px solid var(--focus-ring);
      outline-offset: 2px;
    }
    .btn-accent { background: var(--accent); color: var(--surface); }
    .btn-accent:hover { background: var(--accent-deep); }
    .btn-dark { background: var(--ink); color: var(--bg); }

    /* Optical centering: ITC Avant Garde's em box (12:4 ascent/descent) sits
       cap-height text ~0.12em above true center, so nudge labels down. */
    .btn > span,
    .faq-toggle-btn > span { position: relative; top: 0.12em; }

    /* ══ NAV ══════════════════════════════════════════════════════ */
    .nav {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      width: 100%;
      padding: 0;
    }
    .nav-logo-link { display: block; }
    .nav-logo { width: min(240px, 40vw); height: auto; }
    .nav-right { display: flex; gap: 8px; align-items: center; }
    .nav-hamburger { background: var(--ink); }
    .nav-hamburger img { width: 22.9px; height: 14.3px; }
    .nav-logo--mobile { display: none; }

    /* ══ NAV OVERLAY ════════════════════════════════════════════════ */
    .nav-overlay {
      position: fixed;
      inset: 0;
      z-index: 1000;
      background: var(--overlay-scrim);
      opacity: 0;
      pointer-events: none;
      transition: opacity var(--motion-base) var(--ease-standard);
    }
    .nav-overlay.is-open {
      opacity: 1;
      pointer-events: all;
    }
    .nav-overlay-panel {
      position: absolute;
      top: 0; right: 0; bottom: 0;
      width: min(505px, 100%);
      background: var(--ink);
      display: flex;
      flex-direction: column;
      transform: translateX(100%);
      transition: transform var(--motion-base) var(--ease-standard);
      overflow-y: auto;
    }
    .nav-overlay.is-open .nav-overlay-panel {
      transform: translateX(0);
    }
    .nav-overlay-bar {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      padding: var(--spacing-xl) var(--nav-overlay-pad-right) 0 var(--nav-overlay-pad-left);
      flex-shrink: 0;
    }
    .nav-close {
      background: var(--surface);
      color: var(--ink);
    }
    .nav-close svg { display: block; }
    .nav-overlay-body {
      flex: 1;
      display: flex;
      flex-direction: column;
      padding: var(--spacing-xl) var(--nav-overlay-pad-right) 0 var(--nav-overlay-pad-left);
      gap: var(--nav-overlay-section-gap);
    }
    .nav-overlay-section {
      display: flex;
      flex-direction: column;
      gap: var(--footer-col-gap);
    }
    .nav-overlay-section .footer-col-title {
      margin: 0;
      font-family: var(--font-ui);
      font-weight: var(--nav-overlay-title-weight);
      font-size: var(--nav-overlay-title-size);
      line-height: var(--nav-overlay-title-line-height);
      letter-spacing: var(--nav-overlay-title-letter-spacing);
      color: var(--surface);
    }
    .nav-overlay-section ul {
      list-style: none;
      display: flex;
      flex-direction: column;
      gap: var(--footer-col-gap);
      padding: 0;
      margin: 0;
    }
    .nav-overlay-section ul a {
      font-family: var(--font-ui);
      font-weight: var(--nav-overlay-link-weight);
      font-size: var(--nav-overlay-link-size);
      line-height: var(--nav-overlay-link-line-height);
      letter-spacing: var(--nav-overlay-link-letter-spacing);
      color: var(--surface);
      text-decoration: none;
      transition: opacity var(--motion-fast) var(--ease-standard);
    }
    .nav-overlay-section ul a:hover { opacity: 0.7; }
    .nav-overlay-section .social-icons {
      justify-content: flex-start;
      padding-top: 0;
    }
    .nav-overlay-spacer { flex: 1; min-height: var(--spacing-xl); }

    .gap { height: var(--section-gap); }

    /* ══ LEGAL ═════════════════════════════════════════════════════ */
    .legal-page {
      padding: clamp(2.5rem, 5vw, 6.25rem) 0 clamp(3rem, 6vw, 6.25rem);
      --legal-margin-inline: 60px;
    }
    .legal-page__header {
      margin-inline: var(--legal-margin-inline);
      text-align: center;
      display: flex;
      flex-direction: column;
      gap: var(--spacing-md);
      margin-bottom: clamp(2rem, 4vw, 3rem);
    }
    .legal-page__header h1 { color: var(--ink); }
    .legal-page__effective {
      font-family: var(--font-ui);
      font-size: clamp(1rem, 1.4vw, 1.125rem);
      font-weight: 500;
      color: var(--ink-muted);
      letter-spacing: -0.02em;
    }
    .legal-prose {
      margin-inline: var(--legal-margin-inline);
      background: var(--surface);
      border-radius: var(--rounded-lg);
      box-shadow: var(--shadow-sm);
      padding: clamp(1.75rem, 4vw, 3rem) clamp(1.5rem, 5vw, 3.5rem);
      color: var(--ink);
      font-family: var(--font-ui);
      font-size: clamp(0.9375rem, 1.2vw, 1.0625rem);
      font-weight: var(--body-weight);
      line-height: 1.55;
      letter-spacing: -0.01em;
    }
    .legal-prose h2,
    .legal-prose h3 {
      font-family: var(--font-display);
      font-weight: 700;
      letter-spacing: -0.02em;
      line-height: 1.2;
      margin-top: 1.75em;
      margin-bottom: 0.65em;
    }
    .legal-prose h2 { font-size: clamp(1.25rem, 2vw, 1.5rem); }
    .legal-prose h3 { font-size: clamp(1.0625rem, 1.6vw, 1.25rem); }
    .legal-prose h2:first-child,
    .legal-prose h3:first-child,
    .legal-prose p:first-child { margin-top: 0; }
    .legal-prose p + p,
    .legal-prose ul + p,
    .legal-prose p + ul,
    .legal-prose h2 + p,
    .legal-prose h3 + p { margin-top: 0.85em; }
    .legal-prose ul {
      margin-top: 0.85em;
      padding-left: 1.25rem;
      display: flex;
      flex-direction: column;
      gap: 0.5em;
    }
    .legal-prose li::marker { color: var(--accent); }
    .legal-prose strong { font-weight: 700; }
    .legal-prose a { color: var(--accent-deep); text-decoration: underline; }
    .legal-effective { color: var(--ink-muted); }

    /* ══ FOOTER ══════════════════════════════════════════════════════ */
    footer {
      background: var(--ink);
      padding-block: var(--footer-pad-top) var(--footer-pad-bottom);
    }
    footer .footer-shell {
      display: flex;
      flex-direction: column;
      gap: var(--footer-gap);
    }
    .footer-top {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: var(--spacing-xl);
    }
    .footer-brand {
      flex: 0 1 auto;
      min-width: 0;
    }
    .footer-brand h2 {
      font-family: var(--font-display);
      font-size: var(--footer-brand-size);
      font-weight: var(--footer-brand-weight);
      line-height: var(--footer-brand-line-height);
      letter-spacing: var(--footer-brand-letter-spacing);
      color: var(--surface);
      white-space: pre;
    }
    .footer-nav {
      display: flex;
      flex: 0 0 auto;
      gap: var(--footer-nav-gap);
      align-items: flex-start;
    }
    .footer-col {
      display: flex;
      flex-direction: column;
      gap: var(--footer-col-gap);
      align-items: flex-end;
      width: var(--footer-col-width);
      text-align: right;
    }
    .footer-col-title {
      font-family: var(--font-ui);
      font-weight: var(--footer-title-weight);
      font-size: var(--footer-title-size);
      line-height: var(--footer-title-line-height);
      letter-spacing: var(--footer-title-letter-spacing);
      color: var(--surface);
    }
    .footer-col a {
      font-family: var(--font-ui);
      font-weight: var(--footer-link-weight);
      font-size: var(--footer-link-size);
      line-height: var(--footer-link-line-height);
      letter-spacing: var(--footer-link-letter-spacing);
      color: var(--surface);
      text-decoration: none;
      transition: opacity var(--motion-fast) var(--ease-standard);
    }
    .footer-col a:hover { opacity: 0.7; }
    .social-icons {
      display: flex;
      gap: 12px;
      justify-content: flex-end;
      align-items: center;
      padding-top: 2px;
    }
    .social-icon {
      width: 17.79px;
      height: 17.79px;
      overflow: hidden;
      flex-shrink: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--surface);
      transition: opacity var(--motion-fast) var(--ease-standard);
    }
    .social-icon:hover { opacity: 0.7; }
    .social-icon img { width: 100%; height: 100%; object-fit: contain; }
    .footer-bottom {
      display: flex;
      justify-content: flex-start;
    }
    .footer-copyright {
      font-family: var(--font-ui);
      font-weight: var(--footer-copyright-weight);
      font-size: var(--footer-copyright-size);
      line-height: var(--footer-copyright-line-height);
      letter-spacing: var(--footer-copyright-letter-spacing);
      color: var(--surface);
    }

    /* ══ TABLET  769px – 1100px ══════════════════════════════════════ */
    @media (max-width: 1100px) and (min-width: 769px) {
      .footer-top { gap: var(--spacing-xl); }
      .footer-nav { flex-wrap: wrap; justify-content: flex-end; }
    }

    /* ══ MOBILE  ≤ 768px — layout only; typography stays on-brand ══ */
    @media (max-width: 768px) {

      /* ── NAV ── */
      .nav-logo--desktop { display: none; }
      .nav-logo--mobile  { display: block; width: 171px; height: auto; }
      .nav-right .btn    { display: none; }

      /* ── NAV OVERLAY (mobile) ── */
      .nav-overlay-bar {
        padding: var(--spacing-lg) var(--nav-overlay-pad-right) 0 var(--nav-overlay-pad-left);
      }
      .nav-overlay-body {
        padding: var(--spacing-xl) var(--nav-overlay-pad-right) 0 var(--nav-overlay-pad-left);
      }
      .nav-overlay-section .footer-col-title { font-size: 1.125rem; }
      .nav-overlay-section ul a { font-size: 0.9375rem; }

      .gap { height: var(--spacing-xl); }

      .legal-page { padding-top: var(--spacing-lg); }
      .legal-page__header h1 { font-size: min(var(--display-xl-size), 12.5vw); }
      .legal-prose { padding: var(--spacing-xl) var(--spacing-lg); }

      /* ── FOOTER ── */
      footer {
        padding-block: var(--spacing-2xl) clamp(3rem, 8vw, 4.5rem);
      }
      footer .footer-shell { gap: var(--spacing-2xl); }
      .footer-top  { flex-direction: column; gap: var(--spacing-2xl); }
      .footer-nav  { flex-direction: column; gap: var(--spacing-2xl); width: 100%; }
      .footer-col  { align-items: flex-start; text-align: left; width: 100%; gap: var(--spacing-md); }
      .footer-col-title { font-size: 1rem; }
      .footer-col a     { font-size: 0.8125rem; }
      .social-icons     { justify-content: flex-start; }
      .footer-bottom    { justify-content: flex-start; }
      .footer-copyright { text-align: left; }
    }