:root {
      --font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
      --bg: #f3f4f6;
      --card-bg: #ffffff;
      --accent: #111827;
      --accent-dark: #111827;
      --accent-soft: #e5e7eb;
      --text-main: #111827;
      --text-muted: #6b7280;
      --border: #d1d5db;
      --error: #b91c1c;
      --success: #047857;
      --pest-id-media-frame-max-width: 360px;
      --pest-id-media-frame-aspect-ratio: 16 / 9;
      --pest-id-media-frame-radius: 20px;
      --pest-id-result-column-max-width: 360px;
      --pest-id-surface-radius: 30px;
      --pest-id-card-radius: 26px;
      --pest-id-surface-border: rgba(15, 23, 42, 0.08);
      --pest-id-surface-border-strong: rgba(15, 23, 42, 0.12);
      --pest-id-surface-shadow: none;
      --pest-id-highlight: none;
    }

    body:is(.demo-page, .quote-page),
    body.plan-page {
      --bg: #f4f6f9;
      --card-bg: #ffffff;
      --accent: #205493;
      --accent-dark: #112e51;
      --accent-soft: #e6ecf2;
      --text-main: #212121;
      --text-muted: #5b616b;
      --border: #aeb0b5;
      --error: #b91c1c;
      --success: #2e8540;
    }

    * {
      box-sizing: border-box;
    }

    html {
      height: 100%;
      scrollbar-width: none;
    }

    html::-webkit-scrollbar,
    body::-webkit-scrollbar {
      width: 0;
      height: 0;
    }

    body {
      margin: 0;
      min-height: 100vh;
      min-height: 100dvh;
      background: var(--bg);
      font-family: var(--font-sans);
      color: var(--text-main);
      display: flex;
      align-items: stretch;
      justify-content: center;
      padding: 16px;
      overscroll-behavior-y: none;
      scrollbar-width: none;
    }

    .shell {
      width: 100%;
      max-width: 520px;
      margin: auto;
      background: var(--card-bg);
      border-radius: 14px;
      box-shadow: 0 18px 40px rgba(15, 23, 42, 0.12);
      padding: 26px 22px 22px;
    }

    @media (min-width: 640px) {
      .shell {
        padding: 28px 24px 24px;
      }
    }

    .logo {
      height: 42px;
      width: auto;
      margin-right: 8px;
      display: block;
    }

    @media (min-width: 640px) {
      .logo {
        height: 48px;
      }
    }

    .top-row {
      display: flex;
      align-items: center;
      justify-content: flex-start;
      gap: 10px;
      margin-bottom: 12px;
    }

    .brand {
      font-size: 13px;
      color: var(--text-muted);
    }

    h1 {
      margin: 8px 0 14px 0;
      font-size: 22px;
      letter-spacing: -0.015em;
      text-align: center;
      text-wrap: balance;
    }

    .field-label {
      font-weight: 600;
      font-size: 14px;
      margin-bottom: 6px;
    }

    .field-row {
      margin-top: 4px;
      margin-bottom: 4px;
    }

    input[type='text'],
    input[type='tel'],
    input[type='email'] {
      width: 100%;
      font-size: 15px;
      padding: 10px 11px;
      border-radius: 10px;
      border: 1px solid var(--border);
      outline: none;
      transition: border-color 0.15s ease, box-shadow 0.15s ease,
        background-color 0.15s ease;
      background-color: #ffffff;
    }

    input[type='text']:focus,
    input[type='tel']:focus,
    input[type='email']:focus {
      border-color: var(--accent);
      box-shadow: 0 0 0 1px var(--accent-soft);
    }

    #getSqftBtn {
      margin-top: 10px;
      width: 100%;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: 11px 18px;
      border-radius: 999px;
      border: none;
      background: var(--accent);
      color: #ffffff;
      font-size: 15px;
      font-weight: 600;
      cursor: pointer;
      transition: background-color 0.15s ease, transform 0.05s ease;
    }

    #getSqftBtn:disabled {
      opacity: 0.55;
      cursor: not-allowed;
    }

    #getSqftBtn:hover:not(:disabled) {
      background: #000000;
    }

    #getSqftBtn:active:not(:disabled) {
      transform: translateY(1px);
    }

    .helper {
      font-size: 12px;
      color: #4b5563;
      margin-top: 6px;
      text-align: center;
      max-width: 90%;
      margin-left: auto;
      margin-right: auto;
    }

    #status {
      margin-top: 16px;
      font-size: 14px;
      white-space: normal;
      text-align: center;
    }

    #status.error {
      color: var(--error);
    }

    #status.success {
      color: var(--success);
    }

    .quote-block {
      display: block;
      width: 100%;
      text-align: left;
      padding: 14px 16px;
      border-radius: 12px;
      background: #ecfdf5;
      border: 1px solid #d1fae5;
      margin-top: 8px;
    }

    .quote-block.warning {
      background: #fff7ed;
      border: 1px solid #fbbf24;
      color: #92400e;
    }

    .quote-main {
      font-weight: 700;
      margin-bottom: 6px;
    }

    .quote-sub {
      margin-bottom: 6px;
    }

    .quote-note {
      margin-top: 6px;
      font-size: 13px;
    }

    .apt-actions {
      display: grid;
      grid-template-columns: 1fr;
      gap: 10px;
      margin-top: 12px;
    }

    .apt-actions .secondary-btn {
      margin-top: 0;
    }

    @media (min-width: 520px) {
      .apt-actions {
        grid-template-columns: 1fr 1fr;
      }
    }

    .section-divider {
      border-top: 1px solid var(--accent-soft);
      margin: 18px 0 12px;
    }

    .section-caption {
      font-size: 12px;
      color: var(--text-muted);
      margin-bottom: 8px;
    }

    #quizStepAddress .helper.address-helper {
      text-align: left;
      max-width: 100%;
      margin-left: 0;
      margin-right: 0;
    }

    .manual-fallback {
      margin-top: 10px;
      padding: 12px;
      border: 1px solid var(--accent-soft);
      border-radius: 12px;
      background: #f9fafb;
    }

    .manual-fallback-title {
      font-weight: 600;
      font-size: 13px;
      margin-bottom: 4px;
    }

    .manual-fallback-note {
      font-size: 12px;
      color: var(--text-muted);
    }

    .manual-fallback-actions {
      margin-top: 10px;
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 10px;
    }

    @media (max-width: 520px) {
      .manual-fallback-actions {
        grid-template-columns: 1fr;
      }
    }

    :is(.demo-step4, .quote-step4) .field-row {
      margin: 0;
    }

    :is(.demo-step4, .quote-step4) .address-card {
      background: #f8fafc;
      border: 1px solid var(--accent-soft);
      border-radius: 16px;
      padding: 14px 14px 12px;
      box-shadow: 0 10px 20px rgba(15, 23, 42, 0.08);
    }

    :is(.demo-step4, .quote-step4) .address-title-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
    }

    :is(.demo-step4, .quote-step4) .address-chip {
      font-size: 11px;
      text-transform: uppercase;
      letter-spacing: 0.08em;
      color: var(--accent-dark);
      background: var(--accent-soft);
      border-radius: 999px;
      padding: 4px 8px;
      font-weight: 600;
      white-space: nowrap;
    }

    :is(.demo-step4, .quote-step4) .address-note {
      margin-top: 2px;
      margin-bottom: 4px;
      color: var(--text-muted);
    }

    :is(.demo-step4, .quote-step4) .address-instruction {
      margin-top: 4px;
      color: var(--text-muted);
    }

    :is(.demo-step4, .quote-step4) .address-instruction:empty {
      display: none;
    }

    :is(.demo-step4, .quote-step4) .address-edit {
      display: none;
      margin-top: 6px;
      font-size: 12px;
      font-weight: 600;
      color: var(--accent-dark);
      background: none;
      border: none;
      padding: 0;
      text-decoration: underline;
      cursor: pointer;
    }

    :is(.demo-step4, .quote-step4) #getSqftBtn {
      margin-top: 12px;
    }

    :is(.demo-step4, .quote-step4) .address-card.collapsed {
      opacity: 0.55;
      transform: scale(0.98);
      background: rgba(248, 250, 252, 0.75);
    }

    :is(.demo-step4, .quote-step4) .address-card.collapsed .field-row,
    :is(.demo-step4, .quote-step4) .address-card.collapsed #getSqftBtn,
    :is(.demo-step4, .quote-step4) .address-card.collapsed #manualFallback,
    :is(.demo-step4, .quote-step4) .address-card.collapsed #address {
      pointer-events: none;
      opacity: 0.45;
    }

    :is(.demo-step4, .quote-step4) .address-card.collapsed .address-edit {
      display: inline-flex;
      pointer-events: auto;
      opacity: 1;
    }

    :is(.demo-step4, .quote-step4) .address-card.collapsed::after {
      content: 'Address locked for pricing';
      display: block;
      margin-top: 10px;
      font-size: 12px;
      color: var(--text-muted);
    }

    :is(.demo-step4, .quote-step4) #status {
      text-align: left;
      margin-left: 0;
      margin-right: 0;
      max-width: none;
    }

    .demo-step4 .lead-card,
    .quote-step4 .lead-card {
      --demo-flip-duration: 420ms;
      --demo-flip-ease: cubic-bezier(0.16, 1, 0.3, 1);
      --demo-flip-angle-x: 8deg;
      --demo-flip-angle-y: 12deg;
      border-radius: 12px;
      border: 1px solid var(--accent-soft);
      background: #ffffff;
      padding: 12px;
      box-shadow: 0 18px 45px rgba(15, 23, 42, 0.12);
      max-height: 800px;
      overflow: hidden;
    }

    .demo-step4 .lead-header,
    .quote-step4 .lead-header {
      margin-bottom: 8px;
    }

    .demo-step4 .lead-title,
    .quote-step4 .lead-title {
      font-weight: 700;
      font-size: 15px;
      margin-bottom: 2px;
    }

    .demo-step4 .lead-sub,
    .quote-step4 .lead-sub {
      font-size: 12px;
      color: var(--text-muted);
    }

    .demo-step4 .lead-instructions,
    .quote-step4 .lead-instructions {
      font-size: 12px;
      color: var(--text-muted);
      margin-bottom: 6px;
    }

    .contact-grid {
      display: grid;
      grid-template-columns: 1fr;
      gap: 8px;
    }

    @media (min-width: 600px) {
      .contact-grid {
        grid-template-columns: 1.2fr 1fr;
      }
    }

    .demo-step4 .lead-email,
    .quote-step4 .lead-email {
      margin-top: 6px;
    }

    .lead-time {
      margin-top: 8px;
      border: 0;
      padding: 0;
      min-inline-size: 0;
    }

    .time-options {
      display: grid;
      gap: 8px;
    }

    .time-option {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 10px 12px;
      border-radius: 10px;
      border: 1px solid var(--accent-soft);
      background: #ffffff;
      font-size: 13px;
      cursor: pointer;
    }

    .time-option input {
      accent-color: var(--accent);
      width: 16px;
      height: 16px;
    }

    .time-option input:checked + span {
      font-weight: 600;
      color: var(--accent);
    }

    .field-tag {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: 2px 6px;
      border-radius: 999px;
      font-size: 10px;
      font-weight: 600;
      letter-spacing: 0.04em;
      text-transform: uppercase;
      margin-left: 6px;
      border: 1px solid transparent;
    }

    .field-tag.required {
      color: var(--accent-dark);
      background: #eff6ff;
      border-color: #bfdbfe;
    }

    .field-tag.optional {
      color: #475569;
      background: #f1f5f9;
      border-color: #e2e8f0;
    }

    .demo-step4 .lead-fineprint,
    .quote-step4 .lead-fineprint {
      margin-top: 6px;
      font-size: 12px;
      color: var(--text-muted);
    }

    .demo-step4 .lead-success,
    .quote-step4 .lead-success {
      display: flex;
      gap: 10px;
      align-items: flex-start;
      margin-top: 10px;
      padding: 12px;
      border-radius: 12px;
      border: 1px solid rgba(16, 185, 129, 0.3);
      background: #ecfdf5;
      color: #065f46;
    }

    .demo-step4 .lead-success[hidden],
    .quote-step4 .lead-success[hidden] {
      display: none !important;
    }

    .demo-step4 .lead-card[hidden],
    .quote-step4 .lead-card[hidden] {
      display: none !important;
    }

    .demo-step4 #contactSection,
    .quote-step4 #contactSection {
      perspective: 1200px;
      perspective-origin: top center;
      transform-style: preserve-3d;
    }

    .demo-step4 .lead-card,
    .quote-step4 .lead-card {
      transform-origin: top center;
      transition:
        transform var(--demo-flip-duration) var(--demo-flip-ease),
        opacity 240ms ease,
        max-height var(--demo-flip-duration) var(--demo-flip-ease),
        padding var(--demo-flip-duration) var(--demo-flip-ease),
        margin var(--demo-flip-duration) var(--demo-flip-ease);
      backface-visibility: hidden;
      transform-style: preserve-3d;
      will-change: transform, opacity;
    }

    .demo-step4 #contactSection.is-scheduling .lead-card,
    .quote-step4 #contactSection.is-scheduling .lead-card {
      max-height: 0;
      padding: 0;
      margin: 0;
      border: 0;
      box-shadow: none;
      opacity: 0;
      transform: rotateX(calc(var(--demo-flip-angle-x) * -1)) rotateY(var(--demo-flip-angle-y)) translateY(-10px) scale(0.975);
      overflow: hidden;
      pointer-events: none;
    }

    .demo-step4 #calendlySection,
    .quote-step4 #calendlySection {
      display: block;
      max-height: 0;
      padding: 0;
      margin: 0;
      opacity: 0;
      transform-origin: top center;
      transform: rotateX(var(--demo-flip-angle-x)) rotateY(calc(var(--demo-flip-angle-y) * -1)) translateY(14px) scale(0.985);
      backface-visibility: hidden;
      overflow: hidden;
      pointer-events: none;
      will-change: transform, opacity;
      transition:
        max-height var(--demo-flip-duration) var(--demo-flip-ease),
        padding var(--demo-flip-duration) var(--demo-flip-ease),
        margin var(--demo-flip-duration) var(--demo-flip-ease),
        opacity var(--demo-flip-duration) var(--demo-flip-ease),
        transform var(--demo-flip-duration) var(--demo-flip-ease),
        box-shadow var(--demo-flip-duration) var(--demo-flip-ease);
    }

    .demo-step4 #contactSection.is-scheduling #calendlySection,
    .demo-step4 #calendlySection.visible,
    .quote-step4 #contactSection.is-scheduling #calendlySection,
    .quote-step4 #calendlySection.visible {
      max-height: 1200px;
      padding: 12px;
      margin-top: 12px;
      margin-bottom: 12px;
      opacity: 1;
      border-radius: 14px;
      border: 1px solid var(--accent-soft);
      background: #ffffff;
      box-shadow: 0 20px 55px rgba(15, 23, 42, 0.14);
      transform: rotateX(0) rotateY(0) translateY(0) scale(1);
      pointer-events: auto;
    }

    .calendly-fallback {
      padding: 12px;
      border-radius: 10px;
      border: 1px solid var(--accent-soft);
      background: #f8fafc;
      color: var(--text-muted);
      font-size: 13px;
    }

    @media (max-width: 540px) {
      .demo-step4 .lead-card,
      .quote-step4 .lead-card {
        --demo-flip-duration: 320ms;
        --demo-flip-angle-x: 5deg;
        --demo-flip-angle-y: 8deg;
      }
    }

    @media (prefers-reduced-motion: reduce) {
      .demo-step4 .lead-card,
      .quote-step4 .lead-card,
      .demo-step4 #contactSection.is-scheduling #calendlySection,
      .quote-step4 #contactSection.is-scheduling #calendlySection,
      .demo-step4 #calendlySection,
      .quote-step4 #calendlySection {
        animation: none !important;
        transition: none !important;
        transform: none !important;
      }
    }

    .demo-step4 .lead-success-icon,
    .quote-step4 .lead-success-icon {
      width: 20px;
      height: 20px;
      border-radius: 50%;
      background: #10b981;
      color: #ffffff;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 12px;
      font-weight: 700;
      flex: 0 0 20px;
      margin-top: 2px;
    }

    .demo-step4 .lead-success-title,
    .quote-step4 .lead-success-title {
      font-weight: 600;
      font-size: 13px;
      margin-bottom: 2px;
    }

    .demo-step4 .lead-success-note,
    .quote-step4 .lead-success-note {
      font-size: 12px;
      color: #047857;
    }

    .faq {
      margin-top: 16px;
      font-size: 12px;
      color: var(--text-muted);
    }

    .faq-item {
      margin-bottom: 8px;
    }

    .faq-q {
      font-weight: 600;
    }

    .info-section {
      margin-top: 16px;
      font-size: 13px;
      color: var(--text-main);
    }

    .info-title {
      font-weight: 700;
      margin-bottom: 4px;
    }

    .info-list {
      margin: 4px 0 12px 18px;
      padding-left: 18px;
    }

    .info-list li {
      margin-bottom: 4px;
    }

    .plan-shell {
      padding: 22px 20px 20px;
    }

    .plan-shell h1 {
      text-align: left;
      margin: 6px 0 6px;
    }

    .plan-hero {
      background: var(--plan-accent-soft);
      border: 1px solid var(--plan-accent-border);
      border-radius: 14px;
      padding: 12px 12px 10px;
      margin-bottom: 8px;
    }

    .plan-eyebrow,
    .plan-chip {
      font-size: 11px;
      text-transform: uppercase;
      letter-spacing: 0.08em;
      color: var(--plan-accent-dark);
      font-weight: 600;
    }

    .plan-chip {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 4px 10px;
      border-radius: 999px;
      background: var(--plan-accent-chip);
    }

    .plan-title {
      font-size: 22px;
      margin: 6px 0 4px;
      letter-spacing: -0.02em;
    }

    .plan-sub {
      margin: 0;
      font-size: 13px;
      color: var(--text-muted);
    }

    .plan-progress-cue {
      margin-top: 6px;
      font-size: 11px;
      color: var(--text-muted);
      text-transform: uppercase;
      letter-spacing: 0.06em;
    }

    .plan-cta {
      margin-top: 12px;
      display: grid;
      gap: 6px;
    }

    .plan-cta-inline {
      margin-top: 12px;
      margin-bottom: 6px;
    }

    .plan-continue {
      width: 100%;
      padding: 14px 18px;
      font-size: 15px;
      font-weight: 700;
      border-radius: 999px;
    }

    .plan-cta-note {
      font-size: 12px;
      color: var(--text-muted);
    }

    .plan-cta-hint {
      font-size: 11px;
      color: var(--text-muted);
      text-transform: uppercase;
      letter-spacing: 0.08em;
    }

    .plan-snapshot {
      display: grid;
      gap: 8px;
      margin-top: 10px;
    }

    .plan-snap {
      border: 1px solid var(--border);
      border-radius: 12px;
      padding: 10px 12px;
      background: #ffffff;
    }

    .plan-snap-label {
      font-size: 10px;
      text-transform: uppercase;
      letter-spacing: 0.08em;
      color: var(--text-muted);
    }

    .plan-snap-value {
      margin-top: 4px;
      font-size: 14px;
      font-weight: 600;
      color: var(--text-main);
    }

    .plan-grid {
      display: grid;
      gap: 12px;
      margin-top: 14px;
    }

    .plan-card {
      border: 1px solid var(--border);
      border-radius: 14px;
      padding: 14px;
      background: #ffffff;
    }

    .plan-card-title {
      font-weight: 700;
      font-size: 14px;
      margin-bottom: 8px;
    }

    .plan-subtitle {
      font-size: 11px;
      text-transform: uppercase;
      letter-spacing: 0.08em;
      color: var(--text-muted);
      margin: 10px 0 6px;
      font-weight: 600;
    }

    .plan-list {
      margin: 0 0 0 18px;
      padding: 0;
      font-size: 13px;
      color: var(--text-main);
    }

    .plan-list li {
      margin-bottom: 6px;
    }

    .plan-faq {
      margin-top: 10px;
      font-size: 12px;
      color: var(--text-muted);
    }

    .plan-faq-item {
      margin-bottom: 8px;
    }

    .plan-faq-q {
      font-weight: 600;
      color: var(--text-main);
    }

    .plan-card-wide {
      grid-column: 1 / -1;
    }

    .plan-footer {
      margin-top: 16px;
      padding-top: 12px;
      border-top: 1px solid var(--border);
      font-size: 12px;
      color: var(--text-muted);
      line-height: 1.5;
    }

    .plan-footer a {
      color: inherit;
      text-decoration: underline;
    }

    .plan-actions {
      display: grid;
      gap: 8px;
      margin-top: 16px;
    }

    .plan-link {
      text-decoration: none;
      text-align: center;
    }

    @media (min-width: 640px) {
      .plan-snapshot {
        grid-template-columns: repeat(3, minmax(0, 1fr));
      }
      .plan-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }
      .plan-actions {
        grid-template-columns: 1fr 1fr;
      }
    }

    body.plan-page {
      --plan-accent: var(--accent);
      --plan-accent-dark: var(--accent-dark);
      --plan-accent-soft: var(--accent-soft);
      --plan-accent-border: rgba(32, 84, 147, 0.22);
      --plan-accent-border-soft: rgba(32, 84, 147, 0.16);
      --plan-accent-chip: rgba(32, 84, 147, 0.12);
      background: var(--bg);
      padding-bottom: 88px;
    }

    .plan-glance {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 5px;
      margin-bottom: 6px;
    }

    .plan-glance-card {
      border: 1px solid var(--plan-accent-border-soft);
      border-radius: 10px;
      padding: 6px 6px;
      background: #ffffff;
      text-align: center;
    }

    .plan-glance-label {
      font-size: 9px;
      text-transform: uppercase;
      letter-spacing: 0.08em;
      color: var(--plan-accent-dark);
    }

    .plan-glance-value {
      margin-top: 2px;
      font-size: 12px;
      font-weight: 600;
      color: var(--text-main);
    }

    .plan-sections,
    .plan-trust {
      display: grid;
      gap: 7px;
      margin-top: 8px;
    }

    .plan-next {
      border: 1px solid var(--plan-accent-border-soft);
      border-radius: 12px;
      padding: 10px 12px;
      background: #ffffff;
      margin-bottom: 10px;
    }

    .plan-steps {
      border: 1px solid var(--plan-accent-border-soft);
      border-radius: 12px;
      padding: 10px 12px;
      background: #ffffff;
      margin-bottom: 8px;
    }

    .plan-steps-title {
      font-weight: 600;
      font-size: 13px;
      color: var(--plan-accent-dark);
      margin-bottom: 6px;
    }

    .plan-steps-list {
      list-style: none;
      margin: 0;
      padding: 0;
      display: grid;
      gap: 6px;
    }

    .plan-steps-list li {
      display: flex;
      align-items: flex-start;
      gap: 8px;
    }

    .plan-step-num {
      width: 20px;
      height: 20px;
      border-radius: 999px;
      background: var(--plan-accent-chip);
      color: var(--plan-accent-dark);
      font-weight: 700;
      font-size: 11px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
    }

    .plan-step-title {
      font-size: 13px;
      font-weight: 600;
      color: var(--text-main);
    }

    .plan-step-sub {
      font-size: 12px;
      color: var(--text-muted);
    }

    .plan-next-title {
      font-weight: 600;
      font-size: 13px;
      color: var(--plan-accent-dark);
      margin-bottom: 4px;
    }

    .plan-next-body {
      font-size: 12px;
      color: var(--text-muted);
    }

    .plan-section {
      border: 1px solid var(--border);
      border-left: 3px solid var(--plan-accent);
      border-radius: 14px;
      padding: 8px 10px;
      background: #ffffff;
    }

    .plan-section-wide {
      grid-column: 1 / -1;
    }

    .plan-section-title {
      font-weight: 700;
      font-size: 14px;
      margin-bottom: 5px;
      color: var(--plan-accent-dark);
    }

    .plan-list {
      margin: 0 0 0 16px;
      padding: 0;
      font-size: 13px;
      color: var(--text-main);
    }

    .plan-list li {
      margin-bottom: 4px;
    }

    .plan-bullet-key {
      font-weight: 600;
      color: var(--text-main);
    }

    .plan-trust-chips {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
      margin-bottom: 10px;
    }

    .plan-trust-chip {
      display: inline-flex;
      align-items: center;
      padding: 4px 10px;
      border-radius: 999px;
      background: var(--plan-accent-chip);
      color: var(--plan-accent-dark);
      font-size: 11px;
      font-weight: 600;
    }

    .plan-page .plan-trust-list {
      margin: 0 0 10px 18px;
      padding: 0;
      font-size: 13px;
      color: var(--text-main);
    }

    .plan-page .plan-trust-list li {
      margin-bottom: 4px;
    }

    .plan-trust-note {
      font-size: 12px;
      color: var(--text-muted);
    }

    .plan-contact-line {
      margin-bottom: 2px;
    }

    .plan-contact-line a {
      color: inherit;
      text-decoration: underline;
    }

    .plan-questions {
      margin-top: 8px;
      font-size: 12px;
      color: var(--text-muted);
      text-align: center;
    }

    .plan-questions a {
      color: inherit;
      text-decoration: underline;
    }

    :is(.demo-page, .quote-page) .confirmation-sub {
      margin-top: 6px;
    }

    :is(.demo-page, .quote-page) .confirm-meta {
      margin-top: 8px;
      font-size: 12px;
      color: var(--text-muted);
    }

    .demo-debug-panel {
      position: fixed;
      right: 12px;
      bottom: 12px;
      width: min(380px, calc(100vw - 24px));
      max-height: 55vh;
      background: #0f172a;
      color: #e2e8f0;
      border: 1px solid rgba(148, 163, 184, 0.35);
      border-radius: 12px;
      box-shadow: 0 16px 40px rgba(15, 23, 42, 0.4);
      font-family: var(--font-sans);
      font-size: 11px;
      z-index: 9999;
      display: grid;
      grid-template-rows: auto auto 1fr;
      overflow: hidden;
    }

    @media (max-width: 720px) {
      .demo-debug-panel {
        pointer-events: none;
      }
    }

    .demo-debug-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 8px 10px;
      background: rgba(148, 163, 184, 0.15);
      border-bottom: 1px solid rgba(148, 163, 184, 0.25);
      font-weight: 600;
    }

    .demo-debug-actions {
      display: flex;
      gap: 6px;
    }

    .demo-debug-actions button {
      background: transparent;
      border: 1px solid rgba(148, 163, 184, 0.5);
      color: inherit;
      font-size: 10px;
      padding: 2px 6px;
      border-radius: 6px;
      cursor: pointer;
    }

    .demo-debug-actions button:hover {
      border-color: #e2e8f0;
    }

    .demo-debug-summary,
    .demo-debug-log {
      margin: 0;
      padding: 8px 10px;
      white-space: pre-wrap;
      word-break: break-word;
      overflow: auto;
    }

    .demo-debug-summary {
      max-height: 140px;
      border-bottom: 1px solid rgba(148, 163, 184, 0.25);
    }

    .demo-debug-log {
      max-height: calc(55vh - 180px);
    }

    :is(.demo-page, .quote-page) .confirm-panel {
      margin-top: 14px;
      padding: 14px 16px;
      border-radius: 12px;
      background: #ecfdf5;
      border: 1px solid #d1fae5;
      color: #065f46;
      text-align: left;
    }

    :is(.demo-page, .quote-page) .confirm-title {
      font-weight: 700;
      margin-bottom: 4px;
    }

    :is(.demo-page, .quote-page) .confirm-body {
      font-size: 13px;
      color: #065f46;
    }

    :is(.demo-page, .quote-page) .next-steps {
      margin-top: 14px;
      padding: 12px 14px;
      border-radius: 12px;
      border: 1px solid var(--border);
      background: #ffffff;
    }

    :is(.demo-page, .quote-page) .next-steps-title {
      font-weight: 700;
      font-size: 13px;
      color: var(--text-main);
      margin-bottom: 6px;
    }

    :is(.demo-page, .quote-page) .next-steps-list {
      margin: 0 0 0 18px;
      padding: 0;
      font-size: 13px;
      color: var(--text-main);
    }

    :is(.demo-page, .quote-page) .next-steps-list li {
      margin-bottom: 6px;
    }

    :is(.demo-page, .quote-page) .contact-card {
      margin-top: 12px;
      padding: 12px 14px;
      border-radius: 12px;
      border: 1px dashed var(--border);
      background: #ffffff;
      text-align: left;
      font-size: 13px;
      color: var(--text-main);
    }

    :is(.demo-page, .quote-page) .contact-title {
      font-weight: 700;
      margin-bottom: 4px;
    }

    :is(.demo-page, .quote-page) .contact-card a {
      color: inherit;
      text-decoration: underline;
    }

    .plan-list li::marker {
      color: var(--plan-accent);
    }

    .plan-faq {
      font-size: 12px;
      color: var(--text-muted);
    }

    .plan-faq-item {
      margin-bottom: 8px;
    }

    .plan-faq-q {
      font-weight: 600;
      color: var(--plan-accent-dark);
    }

    .plan-footer {
      margin-top: 12px;
      padding-top: 10px;
      border-top: 1px solid var(--border);
      font-size: 11px;
      color: var(--text-muted);
      line-height: 1.5;
    }

    .plan-footer a {
      color: inherit;
      text-decoration: underline;
    }

    .plan-sticky {
      position: fixed;
      left: 0;
      right: 0;
      bottom: 0;
      background: rgba(255, 255, 255, 0.98);
      border-top: 1px solid var(--plan-accent-border);
      box-shadow: 0 -8px 24px rgba(15, 23, 42, 0.12);
      padding: 10px 16px 14px;
      z-index: 999;
    }

    .plan-sticky-inner {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      max-width: 520px;
      margin: 0 auto;
    }

    .plan-sticky-title {
      font-size: 13px;
      font-weight: 700;
      color: var(--text-main);
    }

    .plan-sticky-sub {
      font-size: 11px;
      color: var(--text-muted);
    }

    .plan-sticky-btn {
      border: 0;
      border-radius: 999px;
      padding: 16px 26px;
      font-size: 15px;
      font-weight: 700;
      background: var(--plan-accent);
      color: #ffffff;
      cursor: pointer;
      white-space: nowrap;
    }

    .plan-sticky-btn:hover {
      background: var(--plan-accent-dark);
    }

    @media (max-width: 520px) {
      .plan-sticky-btn {
        padding: 18px 28px;
        font-size: 16px;
      }
      .plan-sticky-inner {
        align-items: flex-start;
      }
      .plan-sticky-copy {
        max-width: 60%;
      }
    }

    @media (min-width: 720px) {
      .plan-shell {
        padding: 24px 26px 22px;
      }
      .plan-sections {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }
      .plan-trust {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }
    }

    .post-quiz {
      display: none;
      margin-top: 12px;
    }

    .post-quiz.active {
      display: block;
    }

    .pre-address-info {
      display: none;
      margin-top: 16px;
    }

    .intro-page .shell {
      max-width: 520px;
    }

    .intro-hero {
      background: var(--accent-soft);
      border: 1px solid var(--border);
      border-radius: 14px;
      padding: 16px 16px 14px;
      margin-bottom: 12px;
      text-align: left;
    }

    .intro-chip {
      display: inline-flex;
      align-items: center;
      padding: 4px 10px;
      border-radius: 999px;
      background: rgba(32, 84, 147, 0.12);
      color: var(--accent-dark);
      font-size: 11px;
      text-transform: uppercase;
      letter-spacing: 0.08em;
      font-weight: 600;
    }

    .intro-sub {
      margin: 8px 0 0;
      font-size: 14px;
      color: var(--text-muted);
    }

    .intro-checklist {
      border: 1px solid var(--border);
      border-radius: 12px;
      padding: 12px 14px;
      background: #ffffff;
      margin-bottom: 12px;
    }

    .intro-checklist-title {
      font-weight: 600;
      font-size: 13px;
      color: var(--text-main);
      margin-bottom: 6px;
    }

    .intro-checklist-list {
      margin: 0 0 0 18px;
      padding: 0;
      font-size: 12px;
      color: var(--text-muted);
    }

    .intro-checklist-list li {
      margin-bottom: 4px;
    }

    .intro-next {
      font-size: 12px;
      color: var(--text-muted);
      margin-bottom: 12px;
    }

    .intro-cta {
      display: inline-flex;
      justify-content: center;
      align-items: center;
      width: 100%;
      text-decoration: none;
    }

    .intro-foot {
      margin-top: 10px;
      font-size: 11px;
      color: var(--text-muted);
      text-align: center;
    }

    @media (min-width: 720px) {
      .intro-checklist {
        padding: 14px 16px;
      }
    }

    .pre-address-info.active {
      display: block;
    }

    .pre-address-header {
      font-weight: 600;
      font-size: 14px;
      margin-bottom: 8px;
      color: var(--text-main);
    }

    .pre-address-grid {
      display: grid;
      gap: 10px;
    }

    .pre-address-card {
      border: 1px solid var(--border);
      border-radius: 12px;
      padding: 10px 12px;
      background: #ffffff;
    }

    .pre-address-title {
      font-weight: 600;
      font-size: 13px;
      margin-bottom: 6px;
      color: var(--text-main);
    }

    .pre-address-list {
      margin: 0 0 0 16px;
      padding: 0;
      font-size: 12px;
      color: var(--text-muted);
    }

    .pre-address-list li {
      margin-bottom: 4px;
    }

    @media (min-width: 720px) {
      .pre-address-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
      }
    }

    .step4-back {
      margin-bottom: 10px;
      font-size: 12px;
    }

    .step4-back a {
      color: var(--text-muted);
      text-decoration: none;
    }

    .step4-back a:hover {
      text-decoration: underline;
    }

    .accordion-toggle {
      width: 100%;
      text-align: left;
      padding: 10px 14px;
      border-radius: 12px;
      border: 1px solid var(--border);
      background: #ffffff;
      color: var(--text-main);
      font-size: 14px;
      font-weight: 600;
      cursor: pointer;
      margin-top: 10px;
    }

    .accordion-preview {
      margin: 6px 14px 0;
      font-size: 12px;
      color: var(--text-muted);
    }

    .accordion-toggle[aria-expanded='true'] + .accordion-preview {
      display: none;
    }

    .accordion-panel {
      margin-top: 8px;
    }

    .footer {
      border-top: 1px solid var(--accent-soft);
      margin-top: 16px;
      padding-top: 10px;
      font-size: 11px;
      color: var(--text-muted);
    }

    .footer a {
      color: inherit;
      text-decoration: underline;
    }

    .loading-overlay {
      position: fixed;
      inset: 0;
      background: rgba(17, 24, 39, 0.45);
      display: none;
      align-items: center;
      justify-content: center;
      z-index: 999;
      backdrop-filter: blur(2px);
    }

    .loading-overlay.visible {
      display: flex;
    }

    .loading-card {
      background: #ffffff;
      border-radius: 14px;
      padding: 18px 20px;
      width: min(360px, 90vw);
      box-shadow: 0 16px 40px rgba(15, 23, 42, 0.18);
      text-align: center;
      color: var(--text-main);
    }

    .spinner {
      width: 32px;
      height: 32px;
      border: 3px solid var(--accent-soft);
      border-top-color: var(--accent);
      border-radius: 50%;
      margin: 0 auto 12px;
      animation: spin 0.8s linear infinite;
    }

    .loading-text {
      font-size: 14px;
      color: var(--text-muted);
    }

    .loading-actions {
      display: none;
      gap: 10px;
      justify-content: center;
      margin-top: 14px;
      flex-wrap: wrap;
    }

    .loading-actions .secondary-btn {
      margin-top: 0;
      min-width: 120px;
    }

    .loading-overlay.is-timeout .loading-actions,
    .loading-overlay.is-soft-timeout .loading-actions {
      display: flex;
    }

    .loading-overlay.is-timeout .loading-text {
      color: var(--text-main);
    }

    .lookup-progress {
      margin-top: 14px;
      text-align: left;
    }

    .lookup-progress-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-size: 11px;
      font-weight: 600;
      color: var(--text-muted);
    }

    .lookup-progress-value {
      font-size: 12px;
      font-weight: 700;
      color: var(--accent);
    }

    .lookup-progress-track {
      width: 100%;
      height: 8px;
      background: var(--accent-soft);
      border-radius: 999px;
      overflow: hidden;
      margin-top: 6px;
    }

    .lookup-progress-bar {
      height: 100%;
      width: 0%;
      background: linear-gradient(90deg, var(--accent), #0f172a);
      transition: width 0.4s ease;
    }

    .lookup-progress-caption {
      margin-top: 6px;
      font-size: 12px;
      color: var(--text-muted);
    }

    @keyframes spin {
      to {
        transform: rotate(360deg);
      }
    }

    .field-error {
      color: #b91c1c;
      font-size: 12px;
      margin-top: 4px;
      min-height: 14px;
    }

    .field-success {
      color: #047857;
      font-size: 12px;
      margin-top: 4px;
      min-height: 14px;
    }

    /* Submit button spinner + states */
    #sendQuoteBtn {
      position: relative;
    }

    #sendQuoteBtn.is-sending {
      padding-right: 36px;
    }

    #sendQuoteBtn.is-sending::after {
      content: '';
      position: absolute;
      top: 50%;
      right: 14px;
      width: 14px;
      height: 14px;
      margin-top: -7px;
      border-radius: 50%;
      border: 2px solid rgba(255, 255, 255, 0.4);
      border-top-color: #ffffff;
      animation: spin 0.8s linear infinite;
    }

    .success-btn {
      background: #047857;
      color: #ffffff;
      border: 1px solid #047857;
      font-weight: 600;
    }

    /* Success banner */
    .success-banner {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 10px 12px;
      border-radius: 10px;
      background: #ecfdf3;
      border: 1px solid #86efac;
      color: #047857;
      font-size: 13px;
      margin-top: 8px;
      opacity: 0;
      transform: translateY(-4px);
      transition: opacity 0.35s ease, transform 0.35s ease;
      min-height: 20px;
    }

    .success-banner.visible {
      opacity: 1;
      transform: translateY(0);
    }

    .success-banner.fade {
      opacity: 0;
      transform: translateY(-4px);
    }

    .success-check {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 20px;
      height: 20px;
      border-radius: 50%;
      background: #16a34a;
      color: #ffffff;
      font-size: 12px;
      flex: 0 0 20px;
    }

    #contactSection {
      display: none;
      opacity: 0;
      transition: opacity 0.3s ease;
    }

    #contactSection.visible {
      display: block;
      opacity: 1;
    }

    #calendlySection {
      display: none;
      margin-top: 12px;
      margin-bottom: 12px;
      padding: 12px;
      border-radius: 12px;
      background: #f8fafc;
      border: 1px solid var(--accent-soft);
      text-align: left;
    }

    #calendlySection.visible {
      display: block;
    }

    .calendly-title {
      font-weight: 600;
      font-size: 14px;
      margin-bottom: 4px;
    }

    .calendly-note {
      font-size: 12px;
      color: var(--text-muted);
      margin-bottom: 6px;
    }

    .calendly-inline {
      width: 100%;
      min-width: 280px;
      height: 700px;
      margin-top: 10px;
      border-radius: 10px;
      overflow: hidden;
      background: #ffffff;
      border: 1px solid rgba(15, 23, 42, 0.08);
    }

    @media (max-width: 540px) {
      .calendly-inline {
        height: 760px;
      }
    }

    .routing-form-header {
      margin-bottom: 4px;
    }

    .routing-form-title {
      font-weight: 600;
      font-size: 14px;
      margin-bottom: 2px;
    }

    .routing-form-note {
      font-size: 12px;
      color: var(--text-muted);
    }

    .routing-form-wrap {
      width: 100%;
      margin-top: 6px;
      border: 0;
      border-radius: 0;
      overflow: visible;
      background: transparent;
      display: block;
    }

    .routing-form-wrap .routing-form-widget {
      width: 100%;
      height: 640px;
    }

    .routing-form-placeholder {
      padding: 14px 8px;
      font-size: 12px;
      color: var(--text-muted);
      text-align: center;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 4px;
    }

    .routing-placeholder-spinner {
      width: 24px;
      height: 24px;
      border: 3px solid var(--accent-soft);
      border-top-color: var(--accent);
      border-radius: 50%;
      animation: spin 0.8s linear infinite;
    }

    .routing-placeholder-title {
      font-weight: 600;
      color: var(--text-main);
      font-size: 13px;
    }

    .routing-placeholder-note {
      font-size: 12px;
      color: var(--text-muted);
    }

    .routing-fallback {
      border: 1px solid var(--accent-soft);
      border-radius: 12px;
      padding: 12px;
      background: #ffffff;
      text-align: left;
    }

    .routing-fallback-title {
      font-weight: 600;
      font-size: 14px;
      margin-bottom: 4px;
    }

    .routing-fallback-note {
      font-size: 12px;
      color: var(--text-muted);
      margin-bottom: 10px;
    }

    .routing-fallback-foot {
      margin-top: 8px;
      font-size: 12px;
      color: var(--text-muted);
    }

    .routing-fallback-foot a {
      color: inherit;
      text-decoration: underline;
    }

    @media (max-width: 540px) {
      .routing-form-wrap .routing-form-widget {
        height: 720px !important;
      }
      .routing-form-note {
        display: none;
      }
    }

    .secondary-btn {
      margin-top: 10px;
      width: 100%;
      padding: 10px 16px;
      border-radius: 999px;
      border: 1px solid var(--accent);
      background: #ffffff;
      color: var(--accent);
      font-size: 14px;
      font-weight: 500;
      cursor: pointer;
      transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
    }

    .secondary-btn:hover {
      background: #f9fafb;
      border-color: var(--accent);
    }

    .primary-btn {
      background: var(--accent);
      color: #ffffff;
      border: 1px solid var(--accent);
      font-weight: 600;
    }

    .primary-btn:hover {
      background: #000000;
      border-color: #000000;
    }

    body:is(.demo-page, .quote-page) .primary-btn:hover,
    body.plan-page .primary-btn:hover {
      background: var(--accent-dark);
      border-color: var(--accent-dark);
    }

    @media (max-width: 540px) {
      body {
        padding: 12px;
        align-items: flex-start;
      }

      .shell {
        padding: 20px 16px 18px;
        margin-top: 8px;
      }

      .top-row {
        align-items: center;
        gap: 8px;
      }

      .brand {
        font-size: 12px;
        line-height: 1.3;
      }

      h1 {
        font-size: 20px;
        margin-bottom: 10px;
      }

      input[type='text'],
      input[type='tel'],
      input[type='email'] {
        font-size: 16px;
      }

      .quiz-grid {
        gap: 8px;
      }

      .quiz-card {
        padding: 10px 8px;
      }

      .quiz-card-media {
        height: 96px;
      }

      #quizStepPest .quiz-card {
        min-height: 170px;
      }

      #quizStepDwelling .quiz-card {
        min-height: 170px;
      }

      #quizStepPest .quiz-card-footer,
      #quizStepDwelling .quiz-card-footer {
        padding: 8px 8px;
      }

      .quiz-actions {
        margin-top: 10px;
      }
    }

    @media (max-width: 540px) {
      :is(.demo-page, .quote-page) .quiz-card {
        padding: 9px 8px;
      }

      :is(.demo-page, .quote-page) .quiz-card-media {
        height: 84px;
      }

      :is(.demo-page, .quote-page) #quizStepPest .quiz-card,
      :is(.demo-page, .quote-page) #quizStepDwelling .quiz-card {
        min-height: 150px;
      }
    }

    .quiz-step {
      display: none;
    }

    .quiz-step.active {
      display: block;
    }

    .quiz-progress {
      font-size: 12px;
      color: var(--text-muted);
      text-align: center;
      margin-bottom: 10px;
    }

    :is(.demo-page, .quote-page) .quiz-progress {
      display: flex;
      flex-direction: column;
      gap: 4px;
      align-items: center;
    }


    .quiz-progress.is-hidden {
      display: none;
    }

    .sr-only {
      position: absolute !important;
      width: 1px;
      height: 1px;
      padding: 0;
      margin: -1px;
      overflow: hidden;
      clip: rect(0, 0, 0, 0);
      white-space: nowrap;
      border: 0;
    }

    #quizFlow {
      overflow-anchor: none;
    }

    #quizFlow.is-locked {
      cursor: progress;
    }

    .shell:has(#quizStepPest.active) .brand,
    .shell:has(#quizStepPestManual.active) .brand,
    .shell:has(#quizStepDwelling.active) .brand {
      font-size: 13px;
      opacity: 1;
    }

    .shell:has(#quizStepPest.active) h1,
    .shell:has(#quizStepPestManual.active) h1,
    .shell:has(#quizStepDwelling.active) h1 {
      margin-bottom: 14px;
    }

    .shell:has(#quizStepPest.active) .quiz-progress,
    .shell:has(#quizStepPestManual.active) .quiz-progress,
    .shell:has(#quizStepDwelling.active) .quiz-progress {
      font-size: 12px;
      margin-top: 0;
      margin-bottom: 10px;
      opacity: 1;
    }

    .shell:has(#quizStepPest.active) #quizStepPest .field-label {
      font-size: 16px;
      margin-bottom: 4px;
      text-align: center;
    }

    .shell:has(#quizStepPest.active) #quizStepPest .section-caption {
      font-size: 11px;
      margin-bottom: 6px;
      opacity: 0.8;
      text-align: center;
    }

    .shell:has(#quizStepDwelling.active) #quizStepDwelling .section-caption {
      font-size: 11px;
      margin-bottom: 6px;
      opacity: 0.8;
      text-align: center;
    }

    .shell:has(#quizStepDwelling.active) #quizStepDwelling .field-label {
      font-size: 16px;
      margin-bottom: 4px;
      text-align: center;
    }

    :is(.demo-page, .quote-page) .quiz-helper {
      margin-top: 2px;
      margin-bottom: 7px;
      font-size: 12px;
      color: var(--text-muted);
      text-wrap: balance;
    }

    :is(.demo-page, .quote-page) .quote-start-lead-in {
      margin-top: 2px;
      margin-bottom: 12px;
      font-size: 12px;
      text-align: center;
      color: var(--text-muted);
    }

    :is(.demo-page, .quote-page) .quote-start-service {
      margin: 0 0 14px;
    }

    :is(.demo-page, .quote-page) .quote-start-hero {
      margin-bottom: 8px;
      padding: 12px 14px;
    }

    :is(.demo-page, .quote-page) .quote-start-checklist {
      margin-bottom: 8px;
      padding: 10px 12px;
    }

    :is(.demo-page, .quote-page) .quote-start-next {
      margin-bottom: 0;
    }

    #quizStepPest .quiz-card,
    #quizStepPestManual .quiz-card,
    #quizStepDwelling .quiz-card {
      transition: transform 0.16s ease, box-shadow 0.16s ease, border-color 0.16s ease;
    }

    #quizStepPest .quiz-card:hover,
    #quizStepPest .quiz-card:focus-visible,
    #quizStepPestManual .quiz-card:hover,
    #quizStepPestManual .quiz-card:focus-visible,
    #quizStepDwelling .quiz-card:hover,
    #quizStepDwelling .quiz-card:focus-visible {
      border-color: var(--accent);
      box-shadow:
        0 14px 28px rgba(15, 23, 42, 0.16),
        0 0 0 3px rgba(17, 24, 39, 0.18);
      transform: translateY(-3px);
    }

    #quizStepPest .quiz-card:active,
    #quizStepPestManual .quiz-card:active,
    #quizStepDwelling .quiz-card:active {
      box-shadow:
        0 8px 18px rgba(15, 23, 42, 0.16),
        0 0 0 3px rgba(17, 24, 39, 0.22);
      transform: translateY(-2px);
    }

    .quiz-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 10px;
    }

    .quiz-card {
      border: 1px solid var(--border);
      border-radius: 12px;
      padding: 12px 10px;
      background: #ffffff;
      display: flex;
      flex-direction: column;
      align-items: stretch;
      text-align: center;
      cursor: pointer;
      font-size: 14px;
      color: var(--text-main);
      appearance: none;
      -webkit-appearance: none;
      touch-action: manipulation;
    }

    :is(.demo-page, .quote-page) .quiz-fieldset {
      border: 0;
      padding: 0;
      margin: 0;
      min-inline-size: 0;
    }

    :is(.demo-page, .quote-page) .quiz-question {
      display: block;
      padding: 0;
      margin: 0 0 2px;
      font-size: 16px;
      font-weight: 600;
      text-align: center;
    }

    :is(.demo-page, .quote-page) .quiz-error {
      display: none;
      font-size: 12px;
      color: var(--error);
      margin-bottom: 8px;
      text-align: center;
    }

    :is(.demo-page, .quote-page) .quiz-error.is-visible {
      display: block;
    }

    :is(.demo-page, .quote-page) .quiz-fieldset.has-error .quiz-question {
      color: var(--error);
    }

    :is(.demo-page, .quote-page) .quiz-fieldset.has-error .quiz-helper {
      display: none;
    }

    .quiz-card.selected {
      border-color: var(--accent);
    }

    .quiz-card-media {
      height: 110px;
      display: flex;
      align-items: center;
      justify-content: center;
      width: 100%;
      pointer-events: none;
    }

    .quiz-card-media img {
      width: 85%;
      height: 85%;
      object-fit: contain;
      display: block;
      pointer-events: none;
    }

    .quiz-card-footer {
      margin-top: 8px;
      padding: 8px 10px;
      border-radius: 10px;
      background: var(--accent-soft);
      color: var(--accent);
      -webkit-text-fill-color: var(--accent);
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 2px;
    }

    .quiz-card.selected .quiz-card-footer {
      background: var(--accent);
      color: #ffffff;
      -webkit-text-fill-color: #ffffff;
    }

    #quizStepPest .quiz-card,
    #quizStepPestManual .quiz-card,
    #quizStepPest .quiz-card-footer,
    #quizStepPestManual .quiz-card-footer,
    #quizStepDwelling .quiz-card-footer {
      padding: 10px 10px;
    }

    #quizStepPest .quiz-card.selected,
    #quizStepPestManual .quiz-card.selected {
      background: var(--accent-soft);
      box-shadow:
        0 10px 22px rgba(15, 23, 42, 0.12),
        0 0 0 2px rgba(17, 24, 39, 0.14);
    }

    #quizStepDwelling .quiz-card.selected {
      background: var(--accent-soft);
      box-shadow:
        0 10px 22px rgba(15, 23, 42, 0.12),
        0 0 0 2px rgba(17, 24, 39, 0.14);
    }

    #quizStepDwelling .quiz-card {
      min-height: 170px;
    }

    #quizStepDwelling .quiz-card-code {
      font-size: 15px;
    }

    #quizStepDwelling .quiz-card-icon {
      font-size: 28px;
      font-weight: 700;
      letter-spacing: 0.12em;
      color: var(--accent);
      margin-bottom: 0;
    }

    #quizStepDwelling .quiz-card.selected .quiz-card-icon {
      color: #ffffff;
    }

    .quiz-card-code {
      font-weight: 800;
      font-size: 16px;
      letter-spacing: 0.02em;
      color: var(--accent);
      -webkit-text-fill-color: var(--accent);
    }

    :is(.demo-page, .quote-page) .quiz-card-code {
      font-size: 15px;
      letter-spacing: 0;
    }

    :is(.demo-page, .quote-page) .quiz-selected-tag {
      display: none;
      font-size: 11px;
      font-weight: 600;
      letter-spacing: 0.02em;
      text-transform: uppercase;
    }

    :is(.demo-page, .quote-page) .quiz-card.selected .quiz-selected-tag {
      display: inline-flex;
      align-items: center;
      gap: 4px;
    }

    .quiz-card.selected .quiz-card-code {
      color: #ffffff;
      -webkit-text-fill-color: #ffffff;
    }

    .quiz-card-name {
      font-size: 13px;
    }

    .quiz-card-icon {
      font-size: 20px;
      margin-bottom: 6px;
    }


    .quiz-actions {
      display: flex;
      gap: 8px;
      margin-top: 12px;
    }

    :is(.demo-page, .quote-page) .quiz-actions .secondary-btn,
    :is(.demo-page, .quote-page) .quiz-actions .primary-btn {
      flex: 0 0 auto;
      min-height: 48px;
      min-width: 220px;
    }

    :is(.demo-page, .quote-page) .quiz-actions .secondary-btn:disabled,
    :is(.demo-page, .quote-page) .quiz-actions .primary-btn:disabled {
      cursor: not-allowed;
      opacity: 0.52;
      box-shadow: none;
      transform: none;
      filter: grayscale(0.12);
    }

    :is(.demo-page, .quote-page) .quiz-actions {
      justify-content: flex-start;
    }

    :is(.demo-page, .quote-page) .quiz-next-hint {
      margin-top: 6px;
      margin-bottom: 0;
      font-size: 12px;
      color: var(--text-muted);
      text-align: left;
    }

    #quizStepDwelling .quiz-actions .primary-btn {
      font-size: 13px;
      padding: 9px 16px;
      opacity: 0.9;
    }

    #quizStepDwelling .quiz-actions .secondary-btn {
      font-size: 13px;
      padding: 9px 16px;
      opacity: 0.85;
    }

    #quizStepPestManual .quiz-actions {
      justify-content: stretch;
    }

    #quizStepPestManual .quiz-actions .secondary-btn,
    #quizStepPestManual .quiz-actions .primary-btn {
      flex: 1 1 0;
      min-width: 0;
      min-height: 44px;
      font-size: 14px;
      padding: 10px 12px;
    }

    #quizStepPest .pest-skip-actions {
      margin-top: 10px;
      margin-bottom: 2px;
      justify-content: stretch;
      position: sticky;
      bottom: max(10px, env(safe-area-inset-bottom));
      z-index: 6;
      pointer-events: auto;
      padding-top: 10px;
      padding-bottom: 2px;
      background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.96) 30%, rgba(255, 255, 255, 0.98) 100%);
      width: min(100%, var(--pest-id-result-column-max-width));
      margin-left: auto;
      margin-right: auto;
    }

    #quizStepPest .pest-skip-btn {
      min-width: 220px;
      width: auto;
      justify-content: center;
    }

    #quizStepPest .quiz-question {
      margin-bottom: 6px;
      font-size: clamp(20px, 3.2vw, 24px);
      line-height: 1.18;
      letter-spacing: -0.015em;
    }

    #quizStepPest .quiz-helper {
      width: min(100%, var(--pest-id-result-column-max-width));
      max-width: var(--pest-id-result-column-max-width);
      margin-left: auto;
      margin-right: auto;
      margin-bottom: 12px;
      color: #526476;
      text-align: center;
    }

    #quizStepPest .pest-continue-actions {
      margin-top: 10px;
      margin-bottom: 2px;
      justify-content: stretch;
      position: sticky;
      bottom: max(10px, env(safe-area-inset-bottom));
      z-index: 6;
      pointer-events: auto;
      padding-top: 10px;
      padding-bottom: 2px;
      background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.96) 30%, rgba(255, 255, 255, 0.98) 100%);
      width: min(100%, var(--pest-id-result-column-max-width));
      margin-left: auto;
      margin-right: auto;
    }

    #quizStepPest .pest-skip-btn,
    #quizStepPest .pest-continue-btn {
      min-height: 44px;
      font-size: 14px;
      font-weight: 600;
      line-height: 1.2;
      white-space: normal;
      pointer-events: auto;
      touch-action: manipulation;
    }

    #quizStepPest .pest-skip-btn {
      width: auto;
      min-width: 0;
      padding: 11px 18px;
      border: 1px solid var(--accent);
      border-radius: 999px;
      background: var(--accent);
      color: #ffffff;
      text-decoration: none;
      box-shadow: none;
    }

    #quizStepPest .pest-skip-btn:hover:not(:disabled),
    #quizStepPest .pest-skip-btn:focus-visible {
      border-color: var(--accent-dark);
      background: var(--accent-dark);
      color: #ffffff;
      box-shadow: none;
    }

    #quizStepPest .pest-continue-btn {
      width: 100%;
      min-width: 100%;
      padding: 12px 16px;
    }

    /* Keep both Step 1 CTAs visually aligned with the primary action style. */
    #quizStepPest #quizSkipPest,
    #quizStepPest #quizContinuePest {
      background: var(--accent);
      color: #ffffff;
      border-color: var(--accent);
      width: 100%;
      min-width: 100%;
      padding: 12px 16px;
    }

    #quizStepPest #quizSkipPest:hover:not(:disabled),
    #quizStepPest #quizSkipPest:focus-visible,
    #quizStepPest #quizContinuePest:hover:not(:disabled) {
      background: var(--accent-dark);
      border-color: var(--accent-dark);
      color: #ffffff;
    }

    @media (max-width: 540px) {
      :is(.demo-page, .quote-page) .quiz-actions .secondary-btn,
      :is(.demo-page, .quote-page) .quiz-actions .primary-btn {
        min-width: 100%;
      }

      #quizStepPest .quiz-helper {
        margin-bottom: 10px;
      }

      #quizStepPest .pest-skip-actions {
        margin-top: 6px;
        padding-top: 6px;
        padding-bottom: calc(env(safe-area-inset-bottom) + 8px);
        bottom: max(18px, calc(env(safe-area-inset-bottom) + 54px));
        background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.95) 44%, rgba(255, 255, 255, 0.98) 100%);
      }

      #quizStepPest .pest-continue-actions {
        margin-top: 6px;
        padding-top: 6px;
        padding-bottom: calc(env(safe-area-inset-bottom) + 8px);
        bottom: max(18px, calc(env(safe-area-inset-bottom) + 54px));
        background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.95) 44%, rgba(255, 255, 255, 0.98) 100%);
      }

      .pest-id-notes {
        margin-top: 2px;
      }
    }

    .quiz-skip {
      margin-top: 8px;
      font-size: 12px;
      color: var(--text-muted);
      text-decoration: underline;
      background: none;
      border: none;
      padding: 0;
      cursor: pointer;
    }

    #quizStepPest .quiz-skip {
      display: inline-flex;
    }

    .pest-id-shell {
      margin-bottom: 10px;
      border: none;
      border-radius: 0;
      padding: 0;
      background: transparent;
      box-shadow: none;
      display: grid;
      gap: 10px;
    }

    .pest-id-panel {
      border: none;
      border-radius: 0;
      padding: 0;
      margin-bottom: 0;
      background: transparent;
      display: flex;
      flex-direction: column;
      min-height: 0;
      gap: 2px;
    }

    .pest-id-panel.is-busy {
      opacity: 1;
    }

    .pest-id-panel.is-busy .pest-id-result-media {
      pointer-events: none;
    }

    #pestManualChooser.is-revealed {
      animation: pest-manual-reveal 0.18s ease-out;
      transform-origin: top center;
    }

    @keyframes pest-manual-reveal {
      from {
        opacity: 0;
        transform: translateY(4px);
      }
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    .pest-id-manual-btn {
      margin-top: 7px;
      min-width: 220px;
      width: auto;
      align-self: center;
      justify-content: center;
      min-height: 44px;
      font-size: 14px;
      font-weight: 600;
      border-radius: 10px;
      border-color: #e2e8f0;
      color: #475569;
      background: #ffffff;
      touch-action: manipulation;
    }

    .pest-id-manual-btn:hover {
      border-color: #cbd5e1;
      color: #334155;
    }

    .pest-id-status {
      display: none;
      margin-top: 8px;
      margin-bottom: 0;
      font-size: 12px;
      color: var(--text-muted);
      min-height: 0;
      visibility: visible;
      opacity: 1;
    }

    .pest-id-status:not(:empty) {
      display: block;
    }

    .pest-id-status.is-loading {
      display: inline-flex;
      align-items: center;
      gap: 8px;
    }

    .pest-id-status.is-loading::before {
      content: '';
      width: 12px;
      height: 12px;
      border: 2px solid #cbd5e1;
      border-top-color: var(--accent);
      border-radius: 50%;
      animation: pest-id-spin 0.8s linear infinite;
      flex: 0 0 auto;
    }

    @keyframes pest-id-spin {
      to {
        transform: rotate(360deg);
      }
    }

    .pest-id-result {
      margin-top: 0;
      border: 1px solid var(--pest-id-surface-border);
      border-radius: var(--pest-id-card-radius);
      background: rgba(255, 255, 255, 0.98);
      padding: 18px;
      box-shadow: none;
      transition: border-color 0.16s ease, background-color 0.16s ease;
      min-height: 0;
      display: flex;
      flex-direction: column;
    }

    .pest-id-result:hover {
      border-color: var(--pest-id-surface-border-strong);
      box-shadow: none;
    }

    .pest-id-result.is-empty {
      border-color: rgba(15, 23, 42, 0.07);
      background: rgba(252, 253, 255, 0.98);
      box-shadow: none;
      min-height: 0;
    }

    .pest-id-result.has-result {
      min-height: 0;
    }

    .pest-id-loading {
      margin-bottom: 8px;
      border: 1px solid rgba(15, 23, 42, 0.08);
      border-radius: 18px;
      background: linear-gradient(180deg, rgba(250, 251, 253, 0.98) 0%, rgba(243, 246, 249, 0.96) 100%);
      padding: 12px 13px 13px;
      min-height: 110px;
      contain: layout paint;
      animation: pest-id-loading-fade 0.14s ease-out;
      width: min(100%, var(--pest-id-result-column-max-width));
      margin-left: auto;
      margin-right: auto;
      box-shadow: none;
    }

    .pest-id-loading-meta {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      margin-bottom: 8px;
    }

    .pest-id-loading-phase {
      font-size: 11px;
      font-weight: 800;
      line-height: 1.1;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: #526273;
    }

    .pest-id-loading-percent {
      font-size: 12px;
      font-weight: 800;
      line-height: 1;
      color: #0f172a;
      font-variant-numeric: tabular-nums;
    }

    .pest-id-loading-bar {
      width: 100%;
      height: 8px;
      border-radius: 999px;
      overflow: hidden;
      background: #d9e0e7;
      margin-bottom: 10px;
      border: 1px solid rgba(15, 23, 42, 0.07);
      box-shadow: inset 0 1px 1px rgba(15, 23, 42, 0.06);
    }

    .pest-id-loading-fill {
      width: 0%;
      height: 100%;
      position: relative;
      background: linear-gradient(90deg, #5c6f83 0%, #7f93a7 42%, #a6b6c8 100%);
      background-size: 180% 100%;
      transition: width 0.28s ease-out;
      animation: pest-id-loading-bar-pan 1.3s linear infinite;
    }

    .pest-id-loading-fill::after {
      content: '';
      position: absolute;
      inset: 0;
      background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.28) 48%, transparent 100%);
      transform: translateX(-100%);
      animation: pest-id-loading-bar-sheen 1.4s linear infinite;
    }

    .pest-id-loading-tip {
      display: block;
      width: 100%;
      font-size: 13px;
      color: #4b5d70;
      line-height: 1.6;
      min-height: 3.4em;
      max-height: none;
      white-space: pre-wrap;
      overflow-wrap: anywhere;
      word-break: break-word;
      overflow: visible;
      text-rendering: auto;
      -webkit-font-smoothing: antialiased;
    }

    .pest-id-loading-tip.is-live {
      font-weight: 600;
      color: #162333;
      background: transparent;
      border: none;
      border-radius: 0;
      padding: 2px 0 0;
      animation: none;
      position: relative;
      white-space: pre-wrap;
      overflow-wrap: anywhere;
      word-break: break-word;
      hyphens: none;
      max-width: 100%;
      max-height: none;
      min-height: 3.6em;
      line-height: 1.6;
      font-feature-settings: normal;
      font-kerning: none;
      font-variant-ligatures: none;
      overflow: visible;
    }

    .pest-id-loading-tip.is-live::after {
      content: '▍';
      margin-left: 2px;
      color: #64748b;
      animation: pest-id-caret-blink 1s steps(1, end) infinite;
    }

    @keyframes pest-id-caret-blink {
      0%, 48% {
        opacity: 1;
      }
      49%, 100% {
        opacity: 0;
      }
    }

    @keyframes pest-id-loading-bar-pan {
      from {
        background-position: 0% 0;
      }
      to {
        background-position: 180% 0;
      }
    }

    @keyframes pest-id-loading-bar-sheen {
      from {
        transform: translateX(-100%);
      }
      to {
        transform: translateX(130%);
      }
    }

    @keyframes pest-id-loading-fade {
      from {
        opacity: 0;
        transform: translateY(3px);
      }
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    @media (prefers-reduced-motion: reduce) {
      .pest-id-loading-fill,
      .pest-id-loading-fill::after,
      .pest-id-loading-tip.is-live {
        animation: none;
      }
    }

    .pest-id-model {
      font-size: 11px;
      color: #475569;
      margin-bottom: 6px;
    }

    .pest-id-result-media {
      margin-bottom: 10px;
      border-radius: var(--pest-id-media-frame-radius);
      overflow: hidden;
      border: 1px solid var(--pest-id-surface-border);
      background: rgba(245, 247, 250, 0.96);
      width: min(100%, var(--pest-id-result-column-max-width));
      max-width: var(--pest-id-result-column-max-width);
      aspect-ratio: var(--pest-id-media-frame-aspect-ratio);
      min-height: 0;
      display: grid;
      place-items: stretch;
      cursor: pointer;
      position: relative;
      transition: border-color 0.16s ease, background-color 0.16s ease, box-shadow 0.16s ease;
      touch-action: manipulation;
      margin-left: auto;
      margin-right: auto;
      box-shadow: none;
    }

    .pest-id-result-media:hover {
      border-color: var(--pest-id-surface-border-strong);
      box-shadow: none;
    }

    .pest-id-result-media:focus-visible {
      outline: 2px solid var(--accent);
      outline-offset: 2px;
    }

    .pest-id-result-media[aria-disabled='true'] {
      opacity: 0.7;
      cursor: not-allowed;
      pointer-events: none;
    }

    .pest-id-result-media.is-empty {
      border-style: solid;
      border-color: rgba(15, 23, 42, 0.08);
      background: linear-gradient(180deg, rgba(252, 253, 255, 0.99) 0%, rgba(246, 248, 251, 0.98) 100%);
      box-shadow: none;
    }

    .pest-id-preview-image,
    .pest-id-preview-placeholder {
      grid-area: 1 / 1;
    }

    .pest-id-preview-image {
      display: block;
      width: 100%;
      height: 100%;
      max-height: none;
      object-fit: cover;
      object-position: center center;
      background: #eef2f6;
    }

    .pest-id-preview-image[hidden] {
      display: none;
    }

    .pest-id-preview-placeholder {
      width: 100%;
      height: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 12px;
      padding: 20px 22px;
      text-align: center;
      font-size: 15px;
      font-weight: 620;
      color: #314253;
      line-height: 1.4;
      max-width: none;
    }

    .pest-id-preview-placeholder[hidden] {
      display: none !important;
    }

    .pest-id-result-media:not(.is-empty) .pest-id-preview-placeholder {
      display: none !important;
    }

    .pest-id-preview-placeholder::before {
      content: '+';
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 42px;
      height: 42px;
      margin-right: 0;
      border-radius: 999px;
      border: 1px solid rgba(15, 23, 42, 0.08);
      color: #405264;
      font-weight: 650;
      font-size: 19px;
      background: rgba(255, 255, 255, 0.92);
      box-shadow: none;
    }

    .pest-id-panel.is-busy .pest-id-preview-placeholder {
      opacity: 0.86;
    }

    .pest-id-panel.is-busy .pest-id-preview-placeholder::before {
      content: '…';
      animation: pest-id-pulse 0.9s ease-in-out infinite;
    }

    @keyframes pest-id-pulse {
      0%, 100% {
        transform: scale(1);
        opacity: 0.55;
      }
      50% {
        transform: scale(1.06);
        opacity: 1;
      }
    }

    .pest-id-result.is-empty .pest-id-result-main,
    .pest-id-result.is-empty .pest-id-notes {
      display: none;
    }

    .pest-id-result-main {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      align-items: baseline;
      margin-bottom: 8px;
      transition: opacity 0.18s ease, transform 0.18s ease;
      width: min(100%, var(--pest-id-result-column-max-width));
      margin-left: auto;
      margin-right: auto;
    }

    .pest-id-result.is-demo .pest-id-result-main {
      margin-bottom: 6px;
    }

    .pest-id-result.is-demo .pest-id-guess {
      color: #14202d;
      font-size: 15px;
    }

    .pest-id-result.is-demo .pest-id-notes {
      color: #2d3a47;
    }

    .pest-id-guess {
      font-size: 19px;
      font-weight: 760;
      line-height: 1.2;
      letter-spacing: -0.02em;
      color: #101a26;
    }

    .pest-id-notes {
      font-size: 13px;
      line-height: 1.48;
      color: #25313d;
      margin-top: 4px;
      transition: opacity 0.18s ease, transform 0.18s ease;
      width: min(100%, var(--pest-id-result-column-max-width));
      margin-left: auto;
      margin-right: auto;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 4;
      overflow: hidden;
      max-height: calc(4 * 1.44em);
      white-space: pre-line;
      text-wrap: pretty;
    }

    .pest-id-cta {
      font-size: 12.75px;
      line-height: 1.5;
      color: #4c5b68;
      margin-top: 10px;
      width: min(100%, var(--pest-id-result-column-max-width));
      margin-left: auto;
      margin-right: auto;
      text-wrap: pretty;
    }

    .pest-id-notes.is-compact {
      font-size: 12px;
      line-height: 1.38;
      max-height: calc(4 * 1.38em);
    }

    .pest-id-result.is-holding-result .pest-id-result-main,
    .pest-id-result.is-holding-result .pest-id-notes {
      opacity: 0;
      transform: translateY(3px);
      pointer-events: none;
    }

    .pest-id-manual-toggle {
      margin-top: 6px;
      font-size: 12px;
      width: auto;
      min-width: 0;
      padding: 7px 11px;
      background: transparent;
      border-color: var(--border);
      color: var(--text-main);
    }

    .pest-id-manual-toggle:hover {
      border-color: var(--accent);
      color: var(--accent);
    }

    .pest-id-manual-note {
      margin-top: 6px;
      font-size: 12px;
      color: var(--text-muted);
    }

    @media (prefers-reduced-motion: reduce) {
      .pest-id-result,
      .pest-id-result-media {
        transition: none;
      }

      .pest-id-result:hover,
      .pest-id-result-media:hover {
        box-shadow: none;
      }
    }

    .pest-manual-help {
      margin-top: 2px;
      margin-bottom: 8px;
      font-size: 12px;
      color: var(--text-muted);
    }

    @media (max-width: 540px) {
      #quizStepPest .pest-skip-actions {
        justify-content: stretch;
      }

      #quizStepPest .pest-skip-btn {
        width: 100%;
      }

      .pest-id-shell {
        padding: 12px;
        border-radius: 24px;
      }

      .pest-id-panel {
        min-height: 0;
      }

      .pest-id-result {
        min-height: 0;
      }

      .pest-id-result.is-empty {
        min-height: 0;
      }
    }
    :is(.demo-page, .quote-page) .quiz-top-row {
      display: flex;
      align-items: center;
      justify-content: flex-start;
      margin-bottom: 8px;
    }

    :is(.demo-page, .quote-page) .quiz-back-link {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-height: 44px;
      min-width: 44px;
      padding: 6px 8px;
      background: none;
      border: none;
      font-size: 12px;
      color: var(--text-muted);
      text-decoration: underline;
      cursor: pointer;
    }