/* =====================================================
       TYPOGRAPHY — Self-hosted fonts (assets/fonts/, same origin)
       font-display: optional → no swap after initial paint → CLS = 0.
       Weight 300 dropped (matches mymaid.app — saves 7.8 KB).
       HARD RULE (GEMINI.md): Do NOT change size-adjust: 97% on
       QuicksandFallback — empirically confirmed to fix 0.118 CLS.
    ===================================================== */

    /* Self-hosted Poppins (5 variants, latin subset — 300 dropped) */
    @font-face {
      font-family: 'Poppins';
      font-style: normal;
      font-weight: 400;
      font-display: optional;
      src: url('/assets/fonts/poppins-400.woff2') format('woff2');
    }
    @font-face {
      font-family: 'Poppins';
      font-style: italic;
      font-weight: 400;
      font-display: optional;
      src: url('/assets/fonts/poppins-400italic.woff2') format('woff2');
    }
    @font-face {
      font-family: 'Poppins';
      font-style: normal;
      font-weight: 500;
      font-display: optional;
      src: url('/assets/fonts/poppins-500.woff2') format('woff2');
    }
    @font-face {
      font-family: 'Poppins';
      font-style: normal;
      font-weight: 600;
      font-display: optional;
      src: url('/assets/fonts/poppins-600.woff2') format('woff2');
    }
    @font-face {
      font-family: 'Poppins';
      font-style: normal;
      font-weight: 700;
      font-display: optional;
      src: url('/assets/fonts/poppins-700.woff2') format('woff2');
    }

    /* Self-hosted Quicksand (all 4 weights share one latin file) */
    @font-face {
      font-family: 'Quicksand';
      font-style: normal;
      font-weight: 400 700;
      font-display: optional;
      src: url('/assets/fonts/quicksand-latin.woff2') format('woff2');
    }

    /* Calibrated fallback @font-face blocks (zero network requests) */
    @font-face {
      font-family: 'PoppinsFallback';
      src: local('Arial');
      ascent-override:   105%;   /* 1050 / 1000 */
      descent-override:   35%;   /*  350 / 1000 */
      line-gap-override:  10%;   /*  100 / 1000 */
      size-adjust:       100%;   /* Poppins width ≈ Arial — no horizontal scale needed */
    }
    @font-face {
      font-family: 'QuicksandFallback';
      src: local('Arial');
      ascent-override:   100%;   /* 1000 / 1000 */
      descent-override:   25%;   /*  250 / 1000 */
      line-gap-override:   0%;   /*    0 / 1000 */
      size-adjust:        97%;   /* HARD RULE — do not change. Fixes 0.118 CLS on hero btn. */
    }

    :root {
      --green:         #009c3b;
      --green-dark:    #007a2e;
      --green-aa:      #008532;
      --green-light:   #e8f5ec;
      --green-lighter: #f0faf3;
      --yellow:        #ffdf00;   /* CTA buttons, accents, highlights        */
      --yellow-hover:  #e6c800;
      --yellow-soft:   #fff8d6;
      --yellow-aa:     #877600;   /* WCAG AA — stars/text on white cards     */

      --blue:          #002776;
      --blue-dark:     #001a52;
      --blue-light:    #e5ebf5;
      --white:         #ffffff;
      --off-white:     #fafbfc;
      --gray-50:       #f8f9fa;
      --gray-100:      #f1f3f5;
      --gray-200:      #e9ecef;
      --gray-300:      #dee2e6;
      --gray-400:      #ced4da;
      --gray-500:      #adb5bd;
      --gray-600:      #6c757d;
      --gray-700:      #495057;
      --gray-800:      #343a40;
      --gray-900:      #212529;

      --state-error-text:   #dc2626;
      --state-error-bg:     #fff5f5;
      --state-success-bg:   #f6fff9;

      --shadow-xs: 0 1px 2px rgba(0,0,0,0.05);
      --shadow-sm: 0 2px 4px rgba(0,0,0,0.06);
      --shadow-md: 0 4px 12px rgba(0,0,0,0.08);
      --shadow-lg: 0 12px 24px rgba(0,0,0,0.12);
      --shadow-xl: 0 20px 40px rgba(0,0,0,0.15);

      --radius-sm: 8px;
      --radius:    12px;
      --radius-lg: 20px;
      --radius-xl: 28px;

      --font-body:    'Poppins', 'PoppinsFallback', sans-serif;
      --font-heading: 'Quicksand', 'QuicksandFallback', sans-serif;

      --fs-h2:      2.2rem;
      --fs-h3:      1.3rem;
      --fs-h4:      1.15rem;
      --fs-h5:      1.1rem;
      --fs-h6:      1.05rem;
      --fs-nav:     1.2rem;
      --fs-body:    1rem;
      --fs-sm:      0.9rem;
      --fs-xs:      0.88rem;
      --fs-xxs:     0.85rem;
      --fs-caption: 0.78rem;

      --lh-tight:   1.15;
      --lh-ui:      1.2;
      --lh-heading: 1.3;
      --lh-content: 1.6;
      --lh-body:    1.7;
      --lh-loose:   1.8;

      --z-below:  -2;
      --z-behind: -1;
      --z-base:    0;
      --z-raised:  1;
      --z-sticky: 10;
      --z-nav:   1000;
      --z-modal: 2000;
      --z-toast: 9999;

      --space-xs:    0.5rem;
      --space-sm:    0.9rem;
      --space-md:    1.5rem;
      --space-lg:    2rem;
      --btn-padding: 0.5rem 1.3rem;

      --speed-fast:    0.3s;
      --speed-normal:  0.6s;
      --transition:      all var(--speed-normal) cubic-bezier(0.4, 0, 0.2, 1);
      --transition-fast: all var(--speed-fast) ease;
    }

    /* =====================================================
       RESET & BASE
    ===================================================== */
    /* WCAG 2.4.7 — visible focus ring for all interactive elements */
    *:focus-visible {
      outline: 3px solid var(--green);
      outline-offset: 3px;
    }
    input:focus-visible, select:focus-visible, textarea:focus-visible { outline: none; }

    /* WCAG 2.4.1 — Skip navigation */
    .skip-nav {
      position: absolute; top: -9999px; left: 1rem;
      background: var(--blue); color: var(--white);
      padding: 0.6rem 1.2rem; border-radius: 0 0 6px 6px;
      font-weight: 700; font-size: var(--fs-body);
      text-decoration: none; z-index: 9999; transition: top 0.15s;
    }
    .skip-nav:focus { top: 0; outline: 3px solid var(--green); outline-offset: 2px; }

    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    html { scroll-behavior: smooth; scroll-padding-top: 65px; }
    body {
      font-family: var(--font-body);
      color: var(--gray-700);
      line-height: var(--lh-body);
      background-color: var(--off-white);
      -webkit-font-smoothing: antialiased;
      overflow-x: hidden;
    }
    h1, h2, h3, h4, h5, h6 {
      font-family: var(--font-heading);
      color: var(--blue);
      font-weight: 700;
      line-height: var(--lh-heading);
    }
    a {
      text-decoration: none;
      color: var(--green-aa);
      transition: var(--transition-fast);
    }
    a:hover { color: var(--green-dark); }
    img {
      max-width: 100%; height: auto; display: block;
      user-select: none; pointer-events: none;
    }

    /* =====================================================
       NAVBAR — White glassmorphism, mymaid.app spec
    ===================================================== */
    .navbar {
      position: fixed;
      top: 0; left: 0; width: 100%;
      background: rgba(255,255,255,0.92);
      backdrop-filter: blur(20px);
      -webkit-backdrop-filter: blur(20px);
      z-index: var(--z-nav);
      box-shadow: var(--shadow-xs);
      transition: var(--transition);
    }
    .navbar.scrolled { box-shadow: var(--shadow-md); }
    .nav-inner {
      max-width: 1200px;
      margin: 0 auto;
      padding: 0 1.5rem;
      display: flex;
      justify-content: space-between;
      align-items: center;
      height: 65px;
    }
    .nav-logo {
      display: flex;
      align-items: center;
      gap: 10px;
      font-family: var(--font-heading);
      font-size: var(--fs-nav);
      font-weight: 700;
      color: var(--blue);
      letter-spacing: -0.03em;
      text-decoration: none;
      pointer-events: auto;
    }
    @keyframes logoHeartbeat {
      0%   { transform: translateY(18px) scale(1); }
      10%  { transform: translateY(18px) scale(1.05); }
      20%  { transform: translateY(18px) scale(1); }
      30%  { transform: translateY(18px) scale(1.05); }
      40%  { transform: translateY(18px) scale(1); }
      100% { transform: translateY(18px) scale(1); }
    }
    .nav-logo img {
      width: 85px; height: 85px;
      filter: drop-shadow(0 4px 8px rgba(0,0,0,0.25));
      margin-right: 5px;
      transform: translateY(18px);
      animation: logoHeartbeat 5s ease-in-out infinite;
      animation-play-state: paused; /* Paused until post-LCP JS gate fires (PAGESPEED_DELAY_MS) -- render first, then bling */
      transition: var(--transition);
      pointer-events: auto;
    }
    .nav-logo:hover img { transform: translateY(18px) scale(1.1); animation: none; }

    /* Registered service mark — matches estimate-builder and mymaid.app exactly.
       Rendered via CSS content only, invisible to crawlers. */
    .nav-logo .brand-reg::after {
      content: '\AE';
      font-size: 0.65em;
      vertical-align: super;
      line-height: 0;
      font-weight: 400;
      opacity: 0.85;
    }

    /* Nav badge — spinning laser conic gradient, exact match to estimate-builder.
       Always spinning (permanent tool label). */
    .nav-badge {
      position: relative;
      background: var(--blue);
      color: var(--white);
      font-family: var(--font-heading);
      font-weight: 700;
      font-size: var(--fs-body);
      line-height: var(--lh-ui);
      padding: 0.5rem 0.85rem;
      border-radius: 50px;
      letter-spacing: 0.5px;
      box-shadow: 0 2px 8px rgba(0,39,118,0.25);
      border: 2px solid var(--blue);
      overflow: hidden;
      margin-left: 1.5rem;
      z-index: var(--z-raised);
    }
    /* Spinning laser conic gradient */
    .nav-badge::before {
      content: '';
      position: absolute;
      top: 50%; left: 50%;
      width: 300px; height: 300px;
      margin-top: -150px; margin-left: -150px;
      background: conic-gradient(from 0deg, transparent 0deg, transparent 180deg, rgba(255,255,255,0) 180deg, rgba(255,255,255,1) 360deg);
      z-index: var(--z-below);
      pointer-events: none;
      transform-origin: center center;
      animation: radarSpin 4s linear infinite;
      animation-play-state: paused; /* Paused until post-LCP JS gate fires (PAGESPEED_DELAY_MS) -- render first, then bling */
    }
    /* Inner blue mask — creates 2px laser channel */
    .nav-badge::after {
      content: '';
      position: absolute;
      top: 2px; right: 2px; bottom: 2px; left: 2px;
      background: var(--blue);
      z-index: var(--z-behind);
      border-radius: 50px;
      pointer-events: none;
    }
    @keyframes radarSpin {
      0%   { transform: rotate(0deg); }
      100% { transform: rotate(360deg); }
    }

    /* =====================================================
       PROTOTYPE NOTICE BANNER
    ===================================================== */
    .proto-banner {
      position: fixed;
      bottom: 0; left: 0; width: 100%;
      z-index: var(--z-toast);
      background: var(--blue);
      color: rgba(255,255,255,0.88);
      font-size: var(--fs-caption);
      text-align: center;
      padding: 8px 16px;
      font-family: var(--font-heading);
    }
    .proto-banner strong { color: var(--yellow); }

    /* =====================================================
       HERO / INTRO
    ===================================================== */
    .page-intro {
      padding-top: calc(65px + 52px);
      padding-bottom: 44px;
      background: linear-gradient(135deg, #001a5e 0%, #002776 55%, #004d1f 100%);
      text-align: center;
      position: relative;
      overflow: hidden;
    }
    .page-intro::before {
      content: '';
      position: absolute; inset: 0;
      background:
        radial-gradient(ellipse at 30% 70%, rgba(0,156,59,0.18) 0%, transparent 60%),
        radial-gradient(ellipse at 75% 25%, rgba(255,223,0,0.08) 0%, transparent 50%);
      pointer-events: none;
    }
    .page-intro-inner {
      position: relative;
      max-width: 760px;
      margin: 0 auto;
      padding: 0 1.5rem;
    }

    .page-title {
      font-family: var(--font-heading);
      font-weight: 700;
      font-size: clamp(1.9rem, 5vw, 2.8rem);
      color: var(--white);
      line-height: var(--lh-tight);
      margin-bottom: 8px;
      position: relative;
      display: inline-block;
    }
    /* Ported from mymaid.app (index.html) 2026-07-30 -- this page had no
       global reduced-motion guard at all. Covers every animation/transition
       on the page, not just the shimmer bar below. */
    @media (prefers-reduced-motion: reduce) {
      *, *::before, *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
      }
    }

    /* Animated gradient underline — ported from mymaid.app's current
       .section-header h2::before/::after 2026-07-30 (this page still had the
       older background-position-animated version, superseded on mymaid.app
       for PageSpeed reasons: transform is GPU-composited and never triggers
       paint, unlike animating background-position). Two-layer approach:
       ::before = static green base bar, never moves.
       ::after  = yellow hot-spot that sweeps left-right OVER the bar via
       transform, ping-ponging with animation-direction: alternate. */
    @keyframes shimmer {
      0%   { transform: translateX(0); }     /* hot-spot flush with bar left edge */
      100% { transform: translateX(84px); }  /* hot-spot flush with bar right edge */
    }
    .page-title::before {
      content: '';
      position: absolute;
      bottom: -10px;
      left: calc(50% - 60px);
      width: 120px; height: 5px;
      background: var(--green-dark);
      border-radius: 4px;
    }
    .page-title::after {
      content: '';
      position: absolute;
      bottom: -10px;
      left: calc(50% - 60px);
      width: 36px; height: 5px;
      background: linear-gradient(90deg,
        transparent 0%,
        rgba(255, 210, 50, 0.75) 25%,
        rgba(255, 255, 210, 1.0) 50%,
        rgba(255, 210, 50, 0.75) 75%,
        transparent 100%
      );
      border-radius: 4px;
      animation: shimmer 10s linear infinite alternate;
      animation-play-state: paused; /* Paused until post-LCP JS gate fires (PAGESPEED_DELAY_MS) -- render first, then bling */
      will-change: transform;
    }
    .page-subtitle {
      margin-top: 22px;
      color: rgba(255,255,255,0.72);
      font-size: var(--fs-sm);
    }

    /* =====================================================
       STEPPER
    ===================================================== */
    .stepper {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 0;
      margin-top: 36px;
    }
    .step {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 5px;
    }
    .step-dot {
      width: 36px; height: 36px;
      border-radius: 50%;
      background: rgba(255,255,255,0.1);
      border: 2px solid rgba(255,255,255,0.22);
      display: flex; align-items: center; justify-content: center;
      font-family: var(--font-heading);
      font-weight: 700; font-size: 0.9rem;
      color: rgba(255,255,255,0.35);
      transition: all var(--speed-fast) ease;
    }
    .step.active .step-dot {
      background: var(--yellow); border-color: var(--yellow); color: var(--blue);
      box-shadow: 0 0 0 5px rgba(255,223,0,0.22);
    }
    .step.done .step-dot { background: var(--green); border-color: var(--green); color: var(--white); }
    .step.done { cursor: pointer; }
    .step.done:hover .step-dot { transform: scale(1.12); box-shadow: 0 0 0 6px rgba(0, 156, 59, 0.28); }
    .step.done:hover .step-label { color: rgba(255,255,255,0.9); }

    /* ── Booking scope choice cards (step 4) ────────────────────────────────── */
    .bsc-row { display: flex; gap: 10px; margin-bottom: 20px; }
    .bsc-card {
      flex: 1; padding: 12px 14px;
      border: 2px solid var(--gray-200); border-radius: 10px;
      cursor: pointer;
      transition: border-color .18s ease, background .18s ease, box-shadow .18s ease;
      user-select: none;
    }
    .bsc-card:hover { border-color: var(--gray-400); }
    .bsc-card.selected {
      border-color: var(--green); background: rgba(0,156,59,.04);
      box-shadow: 0 0 0 3px rgba(0,156,59,.12);
    }
    .bsc-card.selected .bsc-title { color: var(--green-dark); }
    .bsc-title { font-weight: 700; font-size: var(--fs-sm); color: var(--blue); margin-bottom: 2px; }
    .bsc-desc { font-size: var(--fs-xs); color: var(--gray-600); line-height: 1.4; }
    .freq-select-wrap { margin-bottom: 20px; }
    .freq-select-label { font-size: var(--fs-xs); font-weight: 600; color: var(--gray-600); display: block; margin-bottom: 6px; letter-spacing: 0.03em; text-transform: uppercase; }
    .freq-select-field {
      width: 100%; padding: 10px 14px;
      border: 1.5px solid var(--gray-200); border-radius: 8px;
      font-family: var(--font-body); font-size: var(--fs-sm);
      color: var(--gray-800); background: var(--white);
      cursor: pointer; appearance: auto;
      transition: border-color .18s ease, box-shadow .18s ease;
    }
    .freq-select-field:hover { border-color: var(--gray-400); }
    .freq-select-field:focus {
      outline: none; border-color: var(--green);
      box-shadow: 0 0 0 3px rgba(0,156,59,.12);
    }
    .step-label {
      font-family: var(--font-heading);
      font-size: var(--fs-caption);
      font-weight: 600;
      color: rgba(255,255,255,0.38);
      letter-spacing: 0.05em;
    }
    .step.active .step-label { color: var(--yellow); }
    .step.done .step-label   { color: rgba(255,255,255,0.68); }
    .step-line {
      flex: 1; height: 2px;
      min-width: 36px; max-width: 80px;
      background: rgba(255,255,255,0.12);
      margin-bottom: 22px;
      transition: background var(--speed-fast) ease;
    }
    .step-line.done { background: var(--green); }

    /* =====================================================
       MAIN
    ===================================================== */
    main {
      max-width: 760px;
      margin: 0 auto;
      padding: 36px 20px 108px;
    }

    /* =====================================================
       CARDS
    ===================================================== */
    .card {
      background: var(--white);
      border-radius: var(--radius-lg);
      padding: 28px;
      box-shadow: var(--shadow-lg);
      margin-bottom: 20px;
      animation: fadeUp 0.35s ease;
    }
    @keyframes fadeUp {
      from { opacity: 0; transform: translateY(14px); }
      to   { opacity: 1; transform: translateY(0); }
    }
    .card-title {
      font-family: var(--font-heading);
      font-weight: 700;
      font-size: var(--fs-h5);
      color: var(--blue);
      margin-bottom: 6px;
      display: flex;
      align-items: center;
      gap: 10px;
    }
    .card-title .icon {
      width: 32px; height: 32px;
      background: linear-gradient(135deg, var(--green), var(--green-dark));
      border-radius: var(--radius-sm);
      display: flex; align-items: center; justify-content: center;
      font-size: 0.9rem; flex-shrink: 0;
      box-shadow: 0 3px 10px rgba(0,156,59,0.3);
    }
    .card-desc {
      font-size: var(--fs-xs);
      color: var(--gray-600);
      margin-bottom: 20px;
      line-height: var(--lh-content);
    }

    /* =====================================================
       FORM
    ===================================================== */
    .form-group { margin-bottom: 12px; }
    label {
      display: block;
      font-size: var(--fs-xs);
      font-weight: 600;
      color: var(--gray-800);
      margin-bottom: 6px;
    }
    /* Was var(--yellow) (#ffdf00), ~1.33:1 on white -- WCAG 1.4.3 needs 4.5:1.
       --yellow-aa computes to ~4.55:1. Fixed 2026-07-30 (parity with estimate-builder). */
    label .req  { color: var(--yellow-aa); font-weight: 700; }
    label .hint {
      font-weight: 400;
      color: var(--gray-500);
      font-size: var(--fs-caption);
      margin-left: 4px;
    }
    input[type="text"],
    input[type="email"],
    input[type="tel"],
    input[type="number"],
    select, textarea {
      width: 100%;
      padding: 11px 14px;
      border: 1.5px solid var(--gray-200);
      border-radius: var(--radius);
      font-family: var(--font-body);
      font-size: var(--fs-xs);
      color: var(--gray-800);
      background: var(--white);
      transition: var(--transition-fast);
      appearance: none; -webkit-appearance: none;
    }
    textarea {
      min-height: 80px;
      resize: vertical;
      line-height: var(--lh-content);
    }
    input:focus, select:focus, textarea:focus {
      outline: none;
      border-color: var(--green);
      box-shadow: 0 0 0 3px rgba(0,156,59,0.12);
    }

    input[type="text"]::placeholder,
    input[type="number"]::placeholder,
    input[type="email"]::placeholder,
    input[type="tel"]::placeholder {
      color: var(--gray-500);
      font-style: italic;
    }

    .input-row {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 14px;
    }
    .input-row-3 {
      display: grid;
      grid-template-columns: 2fr 1fr 1fr;
      gap: 14px;
    }
    .input-row > .form-group,
    .input-row-3 > .form-group {
      margin-bottom: 0;
    }
    @media (max-width: 580px) {
      .input-row, .input-row-3 { grid-template-columns: 1fr; }
    }

    /* Service type grid */
    .service-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
      gap: 10px;
    }
    .service-btn {
      border: 2px solid var(--gray-200);
      border-radius: var(--radius);
      padding: 14px 10px;
      background: var(--white);
      cursor: pointer;
      text-align: center;
      transition: var(--transition-fast);
      display: flex; flex-direction: column;
      align-items: center; gap: 6px;
    }
    .service-btn:hover {
      border-color: var(--green);
      background: var(--green-lighter);
      transform: translateY(-2px);
      box-shadow: var(--shadow-sm);
    }
    .service-btn.selected {
      border-color: var(--green);
      background: var(--green-light);
      box-shadow: 0 0 0 3px rgba(0,156,59,0.15);
    }
    .service-btn .s-icon { font-size: 1.4rem; }
    .service-btn .s-name {
      font-size: var(--fs-caption);
      font-weight: 600;
      color: var(--gray-800);
      line-height: var(--lh-heading);
    }
    .service-btn.selected .s-name { color: var(--green-dark); }

    /* Frequency tabs — pill */
    .freq-tabs { display: flex; flex-wrap: wrap; gap: 8px; }
    .freq-tab {
      border: 2px solid var(--gray-200);
      border-radius: 50px;
      padding: 7px 16px;
      background: var(--white);
      cursor: pointer;
      font-family: var(--font-heading);
      font-size: var(--fs-xs);
      font-weight: 600;
      color: var(--gray-600);
      transition: var(--transition-fast);
    }
    .freq-tab:hover { border-color: var(--blue); color: var(--blue); background: var(--blue-light); }
    .freq-tab.selected { border-color: var(--blue); background: var(--blue); color: var(--white); }

    /* Checkbox items */
    .checkbox-group { display: flex; flex-direction: column; gap: 10px; }
    .checkbox-item {
      display: flex;
      align-items: flex-start;
      gap: 10px;
      cursor: pointer;
      padding: 12px 14px;
      border: 1.5px solid var(--gray-200);
      border-radius: var(--radius);
      transition: var(--transition-fast);
    }
    .checkbox-item:hover { border-color: var(--green); background: var(--green-lighter); }
    .checkbox-item.checked { border-color: var(--green); background: var(--green-light); }
    .checkbox-item input[type="checkbox"] {
      width: 18px; height: 18px; flex-shrink: 0;
      margin-top: 1px;
      accent-color: var(--green);
      cursor: pointer;
    }
    .checkbox-label { font-size: var(--fs-xs); font-weight: 600; color: var(--gray-800); }
    .checkbox-desc  { font-size: var(--fs-caption); color: var(--gray-500); margin-top: 2px; line-height: var(--lh-content); }

    /* =====================================================
       VALIDATION GATE BANNERS
    ===================================================== */
    .gate-banner {
      border-radius: var(--radius);
      padding: 12px 16px;
      font-size: var(--fs-xs);
      display: flex;
      align-items: flex-start;
      gap: 10px;
      margin-bottom: 18px;
    }
    .gate-banner.pending {
      background: rgba(255,223,0,0.08);
      border: 1px solid rgba(255,223,0,0.3);
      color: var(--gray-700);
    }
    .gate-banner.success {
      background: var(--state-success-bg);
      border: 1px solid rgba(0,156,59,0.2);
      color: var(--gray-700);
    }
    .gate-banner.error {
      background: var(--state-error-bg);
      border: 1px solid rgba(220,38,38,0.2);
      color: var(--state-error-text);
    }
    .gate-icon { flex-shrink: 0; margin-top: 2px; line-height: 0; }
    .gate-banner.success .gate-icon { color: var(--green); }
    .gate-banner.pending .gate-icon { color: #b38a00; }
    .gate-text { line-height: var(--lh-content); }
    .gate-text strong { font-weight: 600; }
    @keyframes tos-pulse {
      0%,100% { border-color: var(--gray-200); background: var(--white); }
      30%,70%  { border-color: #dc2626; background: rgba(220,38,38,0.06); }
    }
    .tos-highlight { animation: tos-pulse 1.4s ease; }

    /* =====================================================
       SLOT SELECTION CARDS
    ===================================================== */
    .slot-grid {
      display: flex;
      flex-direction: column;
      gap: 12px;
    }
    .slot-card {
      border: 2px solid var(--gray-200);
      border-radius: var(--radius-lg);
      padding: 16px 20px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
      cursor: pointer;
      transition: var(--transition-fast);
    }
    .slot-card:hover {
      border-color: var(--green);
      box-shadow: var(--shadow-sm);
    }
    .slot-card.recommended {
      border-color: var(--green);
      background: var(--green-lighter);
    }
    .slot-card-main { flex: 1; }
    .slot-date {
      font-family: var(--font-heading);
      font-weight: 700;
      font-size: var(--fs-h5);
      color: var(--blue);
    }
    .slot-day { font-size: var(--fs-xs); color: var(--gray-500); margin-top: 1px; }
    .slot-time {
      font-size: var(--fs-sm);
      font-weight: 600;
      color: var(--gray-700);
    }
    .slot-badge {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      padding: 2px 8px;
      border-radius: 50px;
      font-size: var(--fs-caption);
      font-weight: 600;
      margin-top: 4px;
    }
    .slot-badge.best { background: var(--green-light); color: var(--green-dark); }
    .slot-badge.alt  { background: var(--gray-100); color: var(--gray-600); }
    .slot-distance {
      font-size: var(--fs-caption);
      color: var(--gray-500);
      margin-top: 2px;
    }
    .slot-select-btn {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 8px 18px;
      border-radius: 50px;
      font-family: var(--font-heading);
      font-weight: 700;
      font-size: var(--fs-xs);
      background: transparent;
      color: var(--green-dark);
      border: 2px solid var(--green);
      cursor: pointer;
      transition: var(--transition-fast);
      white-space: nowrap;
    }
    .slot-select-btn:hover {
      background: var(--green);
      color: var(--white);
    }
    .slot-card.recommended .slot-select-btn {
      background: linear-gradient(135deg, var(--green), var(--green-dark));
      color: var(--white);
      border-color: transparent;
    }

    /* =====================================================
       SCHEDULE PREVIEW
    ===================================================== */
    .schedule-preview {
      background: linear-gradient(135deg, var(--blue) 0%, var(--blue-dark) 100%);
      border-radius: var(--radius-lg);
      padding: 24px;
      color: var(--white);
      box-shadow: 0 12px 40px rgba(0,39,118,0.3);
      margin-bottom: 20px;
    }
    .sched-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 16px;
    }
    .sched-title {
      font-family: var(--font-heading);
      font-weight: 700;
      font-size: var(--fs-h5);
      color: var(--white);
    }
    .sched-subtitle {
      font-size: var(--fs-caption);
      color: rgba(255,255,255,0.55);
      margin-top: 2px;
    }
    .sched-badge {
      background: rgba(255,223,0,0.15);
      border: 1px solid rgba(255,223,0,0.3);
      color: var(--yellow);
      font-family: var(--font-heading);
      font-weight: 700;
      font-size: var(--fs-caption);
      padding: 4px 12px;
      border-radius: 50px;
    }
    .sched-list {
      display: flex;
      flex-direction: column;
      gap: 8px;
    }
    .sched-item {
      display: flex;
      align-items: center;
      gap: 14px;
      padding: 10px 14px;
      border-radius: var(--radius);
      background: rgba(255,255,255,0.06);
      font-size: var(--fs-xxs);
    }
    .sched-item.first-item {
      background: rgba(255,223,0,0.1);
      border: 1px solid rgba(255,223,0,0.2);
    }
    .sched-num {
      width: 24px; height: 24px;
      border-radius: 50%;
      background: rgba(255,255,255,0.12);
      display: flex; align-items: center; justify-content: center;
      font-family: var(--font-heading);
      font-weight: 700;
      font-size: 0.7rem;
      color: rgba(255,255,255,0.6);
      flex-shrink: 0;
    }
    .sched-item.first-item .sched-num {
      background: var(--yellow);
      color: var(--blue);
    }
    .sched-date { color: rgba(255,255,255,0.88); font-weight: 600; flex: 1; }
    .sched-svc  { color: rgba(255,255,255,0.5); font-size: var(--fs-caption); }
    .sched-more {
      font-size: var(--fs-caption);
      color: rgba(255,255,255,0.55);
      text-align: center;
      margin-top: 8px;
      background: none;
      border: none;
      width: 100%;
      cursor: pointer;
      padding: 6px 0;
      text-decoration: underline;
      text-underline-offset: 3px;
      letter-spacing: 0.3px;
      transition: color 0.2s;
    }
    .sched-more:hover { color: rgba(255,255,255,0.85); }
    .sched-print-btn {
      background: rgba(255,255,255,0.12);
      border: 1px solid rgba(255,255,255,0.2);
      border-radius: 50%;
      width: 32px; height: 32px;
      display: flex; align-items: center; justify-content: center;
      cursor: pointer;
      font-size: 1rem;
      color: rgba(255,255,255,0.75);
      flex-shrink: 0;
      transition: background 0.2s, color 0.2s;
    }
    .sched-print-btn:hover { background: rgba(255,255,255,0.25); color: #fff; }
    @keyframes schedFadeUp {
      from { opacity: 0; transform: translateY(6px); }
      to   { opacity: 1; transform: translateY(0); }
    }
    .sched-item.anim-in { animation: schedFadeUp 0.25s ease forwards; }

    /* === FOOTER (copied from estimate-builder) === */
    /* ==========================================================
       FOOTER — exact match to mymaid.app footer
    ========================================================== */
    @keyframes pulseChevron {

      0%,
      100% {
        transform: translateY(0) scale(1);
      }

      50% {
        transform: translateY(4px) scale(1.1);
        color: var(--yellow);
      }
    }

    .collapsible-body {
      max-height: 0;
      overflow: hidden;
      transition: max-height 0.4s ease;
    }

    .collapsible-body.open {
      max-height: 25000px;
    }

    .footer-bottom {
      text-align: center;
      padding: 1.1rem 0 1rem;
      background: var(--gray-900);
      color: var(--gray-500);
      font-size: var(--fs-xxs);
      border-top: 1px solid rgba(255, 255, 255, 0.06);
    }

    .footer-bottom a {
      color: var(--gray-400);
      transition: var(--transition-fast);
    }

    .footer-bottom a:hover {
      color: var(--green);
    }

    /* PILL BAR — desktop/tablet: single row, unchanged from the original
       design. Phone only (<=720px): the two .footer-links-break spans force the
       bar onto 3 fixed rows (phone+Contact Us / email / Privacy+TOS) instead of
       letting width-based wrapping put each link on its own line, which is what
       happened on narrow phones (e.g. Pixel 10 Pro) and turned the pill into a
       tall stadium shape. */
    .footer-links {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      align-items: center;
      background: rgba(255, 255, 255, 0.05);
      border: 1px solid rgba(255, 255, 255, 0.09);
      border-radius: 100px;
      padding: 0.5rem 1.25rem;
      margin-bottom: 0.7rem;
      gap: 0;
      /* Fixed width pre-bakes the widest hover state (cs@ email at fs-xs bold). */
      min-width: 690px;
    }
    /* Renders as an ordinary dot separator on desktop/tablet (no forced break).
       On phone, the max-width override below turns it into an invisible forced
       line-break instead. */
    .footer-links-break {
      display: inline-flex;
      align-items: center;
    }
    .footer-links-break::before {
      content: "\00B7";
      color: var(--gray-600);
      margin: 0 1.1rem;
      pointer-events: none;
      user-select: none;
    }

    @media (max-width: 720px) {
      .footer-links {
        min-width: 0;
      }
      /* Revert dot-separator spacing to pre-widening value on small screens -- the
         wider desktop spacing (1.1rem) pushes each link onto its own line on narrow
         phones (e.g. Pixel 9/10 Pro), turning the pill into a tall stack. */
      .footer-links a+a::before {
        margin: 0 0.55rem;
      }
      /* Force the 3-row grouping regardless of available width. */
      .footer-links-break {
        flex-basis: 100%;
        height: 0;
      }
      .footer-links-break::before {
        content: none;
      }
    }

    .footer-links a+a::before {
      content: "\00B7";
      color: var(--gray-600);
      margin: 0 1.1rem;
      pointer-events: none;
      user-select: none;
    }

    /* All pill links &mdash; uniform at rest, no hierarchy */
    /* Bold + larger + brighter than the line below it (WCAG badge + copyright),
       so the nav pill reads as the primary row. */
    .footer-links a {
      display: inline-flex;
      align-items: center;
      min-height: 48px;
      font-size: var(--fs-xxs);
      font-weight: 700;
      color: var(--gray-400);
      transition: font-size 0.15s ease, color var(--transition-fast);
    }

    /* Hover: bold + larger &mdash; all links treated equally */
    .footer-links a:hover {
      font-weight: 700;
      font-size: var(--fs-xs);
      color: var(--green);
    }

    /* .container was used in the footer markup (ported from index.html) but the
       rule itself was never ported -- left undefined, so .footer-links (which
       has no max-width of its own, only a min-width floor) stretched to fill
       whatever unconstrained width its ancestors gave it, making the pill bar
       visibly wider than mymaid.app's. Matches index.html's rule exactly. */
    .container {
      max-width: 1200px;
      margin: 0 auto;
      padding: 0 1.5rem;
    }

    .footer-nav {
      padding: 1.1rem 0 1rem;
    }

    .footer-nav p {
      margin: 0;
      display: flex;
      flex-wrap: wrap;
      justify-content: center; /* badge + copyright grouped and centered together */
      align-items: center;
      gap: 0.7rem 1rem;
      font-size: var(--fs-caption);
    }

    .footer-bottom-divider {
      border: none;
      border-top: 1px solid rgba(255, 255, 255, 0.08);
      margin: 0 0 1rem;
    }

    /* WCAG conformance badge -- official self-hosted W3C mark (downloaded from
       w3.org/policies/logos/, no hotlinking) + our own conformance-level cell.
       Only render this once the 3-page WCAG 2.1 AA audit actually confirms
       compliance -- see the surrounding HTML comment before flipping it live. */
    /* Sizing matched to mymaid.app's fixed version, 2026-08-01 -- this file never got
       the 2026-07-31 resize (was still 22px/0.6rem, smaller than every other trust
       mark and smaller than its own neighboring caption text). Same ratio-preserving
       scale off var(--fs-xxs), same reasoning as index.html's .wcag-badge comment. */
    .wcag-badge {
      display: inline-flex;
      align-items: stretch;
      border-radius: 6px;
      overflow: hidden;
      text-decoration: none;
      line-height: 1;
    }
    .wcag-badge-mark {
      display: flex;
      align-items: center;
      justify-content: center;
      background: #fff;
      padding: 4px 9px;
    }
    .wcag-badge-mark img { display: block; height: 32px; width: auto; }
    .wcag-badge-level {
      display: flex;
      flex-direction: column;
      justify-content: center;
      gap: 2px;
      background: var(--blue-dark);
      color: #fff;
      font-family: var(--font-heading);
      font-weight: 700;
      font-size: var(--fs-xxs);
      line-height: 1.2;
      letter-spacing: 0.02em;
      padding: 4px 10px;
    }

    .footer-legal {
      border-bottom: 1px solid rgba(255, 255, 255, 0.08);
      text-align: left;
    }

    .footer-accordion-item {
      border-top: 1px solid rgba(255, 255, 255, 0.08);
      max-width: 900px;
      margin: 0 auto;
    }

    .footer-accordion-heading {
      display: contents;
    }

    .footer-accordion-trigger {
      width: 100%;
      background: none;
      border: none;
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 1.1rem 0;
      cursor: pointer;
      font-family: var(--font-heading);
      font-size: var(--fs-body);
      font-weight: 700;
      color: var(--gray-300);
      transition: var(--transition-fast);
      text-align: left;
    }

    .footer-accordion-trigger:hover {
      color: var(--yellow);
    }

    .footer-accordion-trigger.active {
      color: var(--white);
    }

    .footer-accordion-trigger .chevron {
      color: var(--green);
      font-size: var(--fs-body);
      flex-shrink: 0;
      animation: pulseChevron 2.4s infinite ease-in-out;
      animation-play-state: paused; /* Paused until post-LCP JS gate fires (PAGESPEED_DELAY_MS) -- render first, then bling */
      transition: var(--transition-fast);
      display: inline-block;
    }

    /* Visible, indexable secondary label under the accordion heading -- real page
       text (not aria-label/hidden text) so it's actually readable by both users and
       search engines. Added August 6, 2026 for the Standards/ToS accordion. */
    .footer-accordion-title-group {
      display: flex;
      flex-direction: column;
    }

    .footer-accordion-subtitle {
      font-family: var(--font-body);
      font-size: var(--fs-caption);
      font-weight: 400;
      color: var(--gray-400);          /* 5.5:1 on --gray-900 -- AA, matches .footer-legal-content */
      margin-top: 2px;
    }

    .footer-accordion-trigger.active .chevron {
      transform: rotate(180deg);
      animation: none;
      color: var(--yellow);
    }

    .footer-accordion-body {
      background: rgba(0, 0, 0, 0.18);
      border-radius: var(--radius-sm);
      margin-bottom: 0.5rem;
    }

    .footer-legal-content {
      color: var(--gray-400);
      padding-bottom: 1.5rem;
      padding-top: 0.25rem;
      font-size: var(--fs-sm);
      line-height: 1.7;
      text-align: left;
    }

    .footer-legal-content p,
    .footer-legal-content ul {
      display: block;
      text-align: left;
    }

    .footer-legal-content li {
      display: list-item;
      text-align: left;
    }

    .footer-legal-content li::marker {
      color: var(--green);
      font-size: 1.1em;
    }

    .footer-legal-content h3 {
      color: var(--gray-200);
      font-size: var(--fs-h6);
      margin: 1.5rem 0 0.5rem;
      border-bottom: 2px solid var(--yellow);
      display: inline-block;
      padding-bottom: 0.2rem;
    }

    .footer-legal-content p {
      margin-bottom: 0.8rem;
    }

    .footer-legal-content ul {
      margin: 0.5rem 0 1rem 1.5rem;
      list-style: disc;
    }

    .footer-legal-content li {
      margin-bottom: 0.4rem;
    }

    .footer-legal-content a {
      color: var(--green);
    }

    .footer-legal-content a:hover {
      color: var(--yellow);
    }

    @media (max-width: 768px) {
      .footer-accordion-trigger {
        padding: 0.9rem 0;
        min-height: 44px;
      }
    }

        @media print {
      /* Hide everything in <body> except <main> */
      body > *:not(main) { display: none !important; }
      /* Inside main, hide every panel EXCEPT panel-4 */
      main > .step-panel:not(#panel-4) { display: none !important; }
      main { display: block !important; }
      #panel-4 { display: block !important; }
      /* Within panel-4, hide the booking summary card, buttons, banners */
      #panel-4 .card,
      #panel-4 .btn-row,
      #panel-4 .gate-banner,
      #panel-4 #conf-summary,
      #panel-4 .btn-cta,
      #panel-4 #step4-error { display: none !important; }
      /* Keep the schedule-preview visible and print in color */
      #panel-4 .schedule-preview { display: block !important; box-shadow: none; background: #002776 !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
      /* Hide print button and "more visits" button themselves */
      .sched-print-btn, .sched-more { display: none !important; }
      /* Show ALL schedule items when printing */
      .sched-item { display: flex !important; }
    }

    /* =====================================================
       BUTTONS
    ===================================================== */
    .btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: var(--space-xs);
      padding: var(--btn-padding);
      border-radius: 50px;
      font-family: var(--font-heading);
      font-weight: 700;
      font-size: var(--fs-body);
      line-height: var(--lh-ui);
      letter-spacing: 0.5px;
      cursor: pointer;
      transition: var(--transition);
      border: none;
      text-decoration: none;
      text-align: center;
    }
    .btn-primary {
      background: linear-gradient(135deg, var(--green), var(--green-dark));
      color: var(--white);
      box-shadow: 0 4px 15px rgba(0,156,59,0.3);
      width: 100%;
    }
    .btn-primary:hover { transform: translateY(-2px); box-shadow: 0 8px 25px rgba(0,156,59,0.4); color: var(--white); }
    .btn-secondary {
      background: var(--yellow);
      color: var(--blue);
      box-shadow: 0 4px 15px rgba(255,223,0,0.3);
      width: 100%;
    }
    .btn-secondary:hover { background: var(--yellow-hover); transform: translateY(-2px); color: var(--blue); }
    .btn-ghost {
      background: transparent;
      color: var(--gray-600);
      border: 1.5px solid var(--gray-200);
    }
    .btn-ghost:hover { border-color: var(--gray-400); color: var(--gray-800); }
    .btn-cta {
      background: linear-gradient(135deg, var(--yellow), var(--yellow-hover));
      color: var(--blue);
      box-shadow: 0 4px 15px rgba(255,223,0,0.4);
      width: 100%;
      font-size: var(--fs-h6);
    }
    .btn-cta:hover { transform: translateY(-2px); box-shadow: 0 8px 25px rgba(255,223,0,0.5); color: var(--blue); }
    .btn-row { display: flex; gap: 12px; margin-top: 24px; }
    .btn-row .btn-ghost { flex-shrink: 0; }

    /* =====================================================
       STEP PANELS
    ===================================================== */
    .step-panel { display: none; }
    .step-panel.active { display: block; }

    /* =====================================================
       SECTION DIVIDER
    ===================================================== */
    .section-divider {
      border: none;
      border-top: 1px solid var(--gray-100);
      margin: 20px 0;
    }
    .section-label {
      font-size: var(--fs-xs);
      color: var(--gray-600);
      line-height: var(--lh-content);
      margin-bottom: 20px;
    }

    /* --- Paw walk animation (Pet Details label) --- */
    .paw-walk-wrap {
      position: relative;
      display: inline-block;
      width: 52px;
      height: 16px;
      vertical-align: middle;
      margin-right: 7px;
    }
    .paw-step { position: absolute; opacity: 0; }
    /* Paused until post-LCP JS gate fires (PAGESPEED_DELAY_MS) -- render first, then bling */
    .paw-step:nth-child(1) { left: 0; top: 1px; transform: rotate(-22deg); animation: paw-fall 9s ease-in-out infinite; animation-delay: 0s; animation-play-state: paused; }
    .paw-step:nth-child(2) { left: 18px; top: 0; transform: rotate(14deg); animation: paw-fall 9s ease-in-out infinite; animation-delay: 0.85s; animation-play-state: paused; }
    .paw-step:nth-child(3) { left: 36px; top: 2px; transform: rotate(-10deg); animation: paw-fall 9s ease-in-out infinite; animation-delay: 1.7s; animation-play-state: paused; }
    @keyframes paw-fall {
      0%   { opacity: 0; scale: 0.7; }
      8%   { opacity: 0.85; scale: 1; }
      38%  { opacity: 0.85; }
      50%  { opacity: 0; }
      100% { opacity: 0; }
    }

    /* --- Key jingle animation (Lockbox label) --- */
    .key-jingle {
      display: inline-block;
      transform-origin: center;
      animation: key-jingle 8s ease-in-out infinite;
      animation-play-state: paused; /* Paused until post-LCP JS gate fires (PAGESPEED_DELAY_MS) -- render first, then bling */
      vertical-align: -2px;
      margin-right: 5px;
    }
    @keyframes key-jingle {
      0%, 78%   { transform: translate(0, 0) rotate(0deg); }
      80%       { transform: translate(-4px, -1px) rotate(-12deg); }
      82%       { transform: translate(4px,  1px) rotate(10deg); }
      84%       { transform: translate(-3px, -1px) rotate(-7deg); }
      86%       { transform: translate(3px,  0px) rotate(6deg); }
      88%       { transform: translate(-2px,  0px) rotate(-3deg); }
      90%       { transform: translate(1px,  0px) rotate(2deg); }
      92%, 100% { transform: translate(0, 0) rotate(0deg); }
    }


    /* =====================================================
       RESPONSIVE
    ===================================================== */
    .err-banner {
      background: var(--state-error-bg);
      color: var(--state-error-text);
      border: 1px solid rgba(220,38,38,0.2);
      border-radius: var(--radius-sm);
      padding: 12px 16px;
      font-size: var(--fs-xs);
      line-height: 1.5;
    }
    /* Per-field inline error message (WCAG 3.3.1) */
    .field-msg-err {
      font-size: 0.75rem;
      color: var(--state-error-text);
      margin-top: 4px;
      display: none;
    }
    /* Invalid field highlight (WCAG 1.3.1) */
    .form-group input.field-invalid,
    .form-group input.field-invalid:focus {
      border-color: var(--state-error-text);
      box-shadow: 0 0 0 2px rgba(220, 38, 38, 0.15);
    }
    .form-group input.field-valid,
    .form-group input.field-valid:focus {
      border-color: var(--green);
      box-shadow: 0 0 0 2px rgba(0, 156, 59, 0.15);
    }
    /* WCAG 1.4.1 non-color cue paired with .field-valid above -- asterisk-to-
       checkmark swap, same pattern already proven in estimate-builder/index.html. */
    label .req-check {
      color: var(--green);
      font-weight: 700;
      font-size: var(--fs-caption);
      margin-left: 1px;
      display: none;
    }
    .icon-12 { width:12px;height:12px;display:inline-block;vertical-align:-1px;fill:none;stroke:currentColor;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round; }
    .otp-section { margin-top: 8px; }
    @media (max-width: 768px) {
      .card { padding: 20px 18px; }
      .page-intro { padding-top: calc(65px + 36px); padding-bottom: 36px; }
    }

    /* XS phones (≤ 480px — iPhone SE, very narrow Android)
       Hide the "Booking Scheduler" badge so the full company name fits on one line.
       Mirrors the identical rule in estimate-builder/index.html. */
    @media (max-width: 480px) {
      .nav-badge { display: none; }
      .nav-logo  { gap: 6px; }
    }

    /* OS High Contrast mode — boost green and gray for WCAG contrast compliance.
       Mirrors the identical rule in mymaid.app index.html and estimate-builder. */
    @media (prefers-contrast: more) {
      :root {
        --green: var(--green-dark);
        --gray-600: var(--gray-800);
      }

      .footer-bottom a {
        opacity: 1 !important;
      }
    }

    /* ── Lucide inline SVG utilities ───────────────────────────────────────
       All icons: fill:none, stroke:currentColor, stroke-width:2, 24×24 viewBox.
       Sourced from lucide.dev — identical paths to mymaid.app index.html.
    ──────────────────────────────────────────────────────────────────────── */
    .lucide { display:inline-block; vertical-align:-3px; flex-shrink:0; }
    .lucide-spin { animation: spin 0.9s linear infinite; }
    @keyframes hgFlip {
      0%, 40% { transform: rotate(0deg); }
      50%, 90% { transform: rotate(180deg); }
      100% { transform: rotate(180deg); }
    }
    .lucide-hourglass { animation: hgFlip 2s infinite ease-in-out; }
    .lucide-star {
      color: #d97706;
      animation: star-bling 2.4s ease-in-out infinite;
      animation-play-state: paused; /* Paused until post-LCP JS gate fires (PAGESPEED_DELAY_MS) -- render first, then bling */
    }
    @keyframes spin { to { transform: rotate(360deg); } }
    @keyframes star-bling {
      0%,100% { transform: scale(1)    rotate(0deg);   filter: drop-shadow(0 0 2px rgba(217,119,6,0.45)); }
      40%     { transform: scale(1.28) rotate(18deg);  filter: drop-shadow(0 0 6px rgba(217,119,6,0.90)); }
      80%     { transform: scale(0.92) rotate(-8deg);  filter: drop-shadow(0 0 3px rgba(217,119,6,0.60)); }
    }

    /* -- CSP style-src-attr refactor: former inline style="" attributes -- */
    .u-hide { display:none; }
    .icon-inline-4ml { display:inline-block;vertical-align:-2px;margin-left:4px; }
    .icon-14 { width:14px;height:14px;display:inline-block;vertical-align:-2px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round; }
    .mb-4 { margin-bottom:4px; }
    .row-between { display:flex;justify-content:space-between; }
    .text-gray-600 { color:var(--gray-600); }
    .text-strong-800 { font-weight:600; color:var(--gray-800); }
    .link-inherit-plain { color:inherit;text-decoration:none;font-weight:700; }

    .visually-hidden-anchor { display:block;height:0;overflow:hidden; }
    /* display:none is load-bearing here, not decorative -- see estimate-builder/index.html's
       identical fix (2026-08-05) for the full explanation: off-screen absolute
       positioning alone is not reliably excluded from browser autofill, and real
       autofill was tripping this honeypot on genuine submissions. */
    .honeypot-hide { display:none; position:absolute;left:-9999px;top:-9999px;width:1px;height:1px;overflow:hidden; }
    .hr-thin { border-top:1px solid var(--gray-100);margin:4px 0; }
    .row-summary-sub { font-weight:500;color:var(--gray-600);font-size:var(--fs-caption); }
    .icon-inline-6ml { vertical-align:-3px;margin-right:6px; }
    .otp-code-input { letter-spacing:0.3em;font-size:1.25rem;text-align:center; }
    .mb-10 { margin-bottom:10px; }
    .otp-resend-p { font-size:var(--fs-caption);color:var(--gray-500);text-align:center; }
    .otp-resend-btn { background:none;border:none;color:var(--green-aa);cursor:pointer;font-size:inherit;text-decoration:underline; }
    .mb-16 { margin-bottom:16px; }
    .time-pref-row { display:flex;align-items:center;flex-wrap:wrap;gap:10px 14px; }
    .time-pref-note { font-size:var(--fs-caption);color:#595e64;font-style:italic; }
    .mt-12 { margin-top:12px; }
    .mb-20 { margin-bottom:20px; }
    .mt-28 { margin-top:28px; }
    .slot-loading { text-align:center;padding:40px;color:var(--gray-500); }
    .sched-badge-row { display:flex;align-items:center;gap:10px; }
    .conf-summary-col { display:flex; flex-direction:column; gap:8px; margin-bottom:20px; font-size:var(--fs-xs); }
    .tos-notes-list { margin:8px 0 0 0; padding-left:18px; font-size:0.75rem; color:#6c757d; line-height:1.6; }
    .terms-agree-sub { margin-top:2px; font-size:var(--fs-xs); font-weight:400; color:var(--gray-700); line-height:var(--lh-content); }
    .link-green-aa { color:var(--green-aa); }
    .mb-12 { margin-bottom:12px; }
    .bso-overlay {
      display: none;
      position: fixed;
      inset: 0;
      z-index: 9999;
      background: rgba(0, 0, 0, 0.65);
      align-items: center;
      justify-content: center;
      padding: 20px;
    }

    /* Retokenized 2026-07-30 -- was hardcoded #fff/16px/24px-80px-0.35 shadow,
       visibly heavier and darker than every other card/modal on the site
       (which use --shadow-xl/--radius-lg). Same for .bridge-box below. */
    .bso-box {
      background: var(--white);
      border-radius: var(--radius-lg);
      max-width: 480px;
      width: 100%;
      padding: 40px 32px;
      text-align: center;
      box-shadow: var(--shadow-xl);
      animation: bsoFadeIn 0.4s cubic-bezier(0.22, 1, 0.36, 1) both;
    }
    .bso-icon-circle {
      width: 72px;
      height: 72px;
      border-radius: 50%;
      background: var(--green);
      margin: 0 auto 20px;
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: 0 0 0 12px rgba(0, 156, 59, 0.12);
    }
    .bso-heading { font-family: var(--font-heading); color: var(--blue); font-size: 1.6rem; margin-bottom: 8px; }
    .bso-quote-accepted { color: var(--green-aa); font-size: 0.8rem; font-weight: 600; margin-bottom: 8px; }
    .bso-p { color: var(--gray-600); font-size: 0.875rem; line-height: 1.6; }
    .bso-p-mb4 { margin-bottom: 4px; }
    .bso-p-mb20 { margin-bottom: 20px; }
    .bso-slot { color: var(--blue); font-weight: 600; }
    .bso-email-link { color: var(--green-dark); font-weight: 600; }
    .bso-return-btn {
      display: inline-block;
      background: var(--green);
      color: var(--white);
      padding: 12px 28px;
      border-radius: 8px;
      text-decoration: none;
      font-weight: 600;
      font-size: 0.9375rem;
    }
    .bridge-overlay {
      display: none;
      position: fixed;
      inset: 0;
      z-index: 9998;
      background: rgba(2, 24, 72, 0.72);
      align-items: center;
      justify-content: center;
      padding: 20px;
    }
    .bridge-box {
      background: var(--white);
      border-radius: var(--radius-lg);
      max-width: 360px;
      width: 100%;
      padding: 40px 32px;
      text-align: center;
      box-shadow: var(--shadow-xl);
      animation: bsoFadeIn 0.3s cubic-bezier(0.22, 1, 0.36, 1) both;
    }
    .bridge-spinner-wrap { width: 64px; height: 64px; margin: 0 auto 20px; position: relative; }
    .bridge-spinner-arc { transform-origin: 50% 50%; animation: bridgeSpinArc 1s linear infinite; }
    .bridge-title { font-family: var(--font-heading); color: var(--blue); font-size: 1.15rem; font-weight: 700; margin: 0 0 6px; }
    .bridge-sub { color: var(--gray-600); font-size: 0.85rem; line-height: 1.6; margin: 0; }
    .mr-4 { margin-right:4px; }
    .err-list { margin:6px 0 0 0;padding-left:20px; }
    .err-link { color:inherit;font-weight:700;text-decoration:none !important; }
    .err-link-ul { color:inherit;font-weight:700;text-decoration:underline; }
    .row-val-strong { font-weight:600;color:var(--gray-800);text-align:right;max-width:60%; }

@keyframes bsoFadeIn {
  from { opacity:0; transform:scale(0.92) translateY(16px); }
  to   { opacity:1; transform:scale(1)    translateY(0); }
}

@keyframes bridgeSpinArc {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* Render first, then bling: every infinite decorative animation on this page
   starts paused (see animation-play-state: paused on each rule above) and is
   released here once body.anim-ready is added by a post-LCP JS gate
   (PAGESPEED_DELAY_MS in scheduler.js), matching mymaid.app's index.html.
   Pseudo-elements (.page-title::after, .nav-badge::before,
   .footer-accordion-trigger .chevron) can't be toggled via el.style, hence
   the body-class gate rather than per-element JS. Placed at the end of the
   file, not just given higher specificity, because .paw-step's own paused
   rule ties on specificity (class + :nth-child vs. two classes) -- last
   rule in the cascade must win that tie. */
body.anim-ready .nav-logo img,
body.anim-ready .page-title::after,
body.anim-ready .nav-badge::before,
body.anim-ready .footer-accordion-trigger .chevron,
body.anim-ready .paw-step,
body.anim-ready .key-jingle,
body.anim-ready .lucide-star {
  animation-play-state: running;
}