@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,400;12..96,500;12..96,600;12..96,700;12..96,800&display=swap');

/* ===== INSTANT ESTIMATOR ===== */
/* ============================================================
     ROOT VARIABLES
     ============================================================ */
  :root {
    /* Surfaces */
    --rfe-cream:        #fbf3e3;
    --rfe-cream-soft:   #f5ebd3;
    --rfe-cream-deeper: #ede0c0;

    /* Brand accents */
    --rfe-tan:        #cbbb8d;
    --rfe-tan-light:  #ddc99c;
    --rfe-tan-deep:   #b09b6e;
    --rfe-olive:      #3d4a20;
    --rfe-olive-mid:  #5a6e30;

    /* CTAs */
    --rfe-green:        #4a8829;
    --rfe-green-bright: #5fa033;

    /* Text */
    --rfe-ink:      #2d3618;
    --rfe-ink-soft: #5a5642;
    --rfe-ink-mute: #8a8470;

    /* Shadows */
    --rfe-shadow-out-light: rgba(105, 130, 60, 0.34);
    --rfe-shadow-out-dark:  rgba(8, 12, 4, 0.62);
    --rfe-shadow-in-light:  rgba(255, 252, 240, 1);
    --rfe-shadow-in-dark:   rgba(140, 120, 75, 0.42);

    /* Typography */
    --rfe-font: 'Bricolage Grotesque', system-ui, sans-serif;
  }

  /* ============================================================
     SHARED KEYFRAMES
     ============================================================ */
  @keyframes rfeSpin { to { transform: rotate(360deg); } }
  @keyframes rfeCheckPop {
    0%   { transform: scale(0.6);  opacity: 0; }
    60%  { transform: scale(1.15); opacity: 1; }
    100% { transform: scale(1);    opacity: 1; }
  }
  @keyframes rfeCheckPopLg {
    0%   { transform: scale(0.6);  opacity: 0; }
    60%  { transform: scale(1.18); opacity: 1; }
    100% { transform: scale(1);    opacity: 1; }
  }
  @keyframes rfeSlide {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: translateY(0); }
  }
  @keyframes rfeMatIntro {
    0%   { opacity: 0; transform: translateY(10px) scale(0.95); }
    100% { opacity: 1; transform: translateY(0) scale(1); }
  }
  @keyframes rfeMapBadge {
    0%   { opacity: 0; transform: translateX(-50%) translateY(-10px); }
    15%  { opacity: 1; transform: translateX(-50%) translateY(0); }
    78%  { opacity: 1; transform: translateX(-50%) translateY(0); }
    100% { opacity: 0; transform: translateX(-50%) translateY(0); }
  }

  /* ============================================================
     SEARCH EMBED - bar + analyze button
     ============================================================ */
  #rfe-search {
    display: flex;
    gap: 12px;
    background: var(--rfe-cream);
    padding: 14px;
    border-radius: 24px;
    box-shadow:
      -10px -10px 30px var(--rfe-shadow-out-light),
      14px 14px 36px var(--rfe-shadow-out-dark);
    font-family: var(--rfe-font);
  }
  #rfe-input {
    flex: 1;
    padding: 18px 22px;
    font: 500 16px/1 var(--rfe-font);
    color: var(--rfe-ink);
    background: var(--rfe-cream);
    border: none;
    border-radius: 16px;
    outline: none;
    transition: box-shadow 0.2s ease;
    box-shadow:
      inset 4px 4px 10px var(--rfe-shadow-in-dark),
      inset -3px -3px 8px var(--rfe-shadow-in-light);
  }
  #rfe-input::placeholder { color: var(--rfe-ink-mute); font-weight: 400; }
  #rfe-input:focus {
    box-shadow:
      inset 4px 4px 10px var(--rfe-shadow-in-dark),
      inset -3px -3px 8px var(--rfe-shadow-in-light),
      0 0 0 3px rgba(203, 187, 141, 0.5);
  }
  #rfe-btn {
    position: relative;
    padding: 18px 28px;
    min-width: 170px;
    background: linear-gradient(135deg, var(--rfe-green-bright), var(--rfe-green));
    color: white;
    border: none;
    border-radius: 16px;
    font: 700 15px/1 var(--rfe-font);
    letter-spacing: -0.01em;
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.3s ease;
    box-shadow:
      -3px -3px 8px var(--rfe-shadow-in-light),
      6px 6px 16px var(--rfe-shadow-in-dark),
      inset 1px 1px 2px rgba(255, 255, 255, 0.25),
      inset -1px -1px 2px rgba(0, 0, 0, 0.15);
  }
  #rfe-btn:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow:
      -3px -3px 10px var(--rfe-shadow-in-light),
      8px 8px 22px var(--rfe-shadow-in-dark),
      inset 1px 1px 2px rgba(255, 255, 255, 0.3);
  }
  #rfe-btn:active:not(:disabled) {
    transform: translateY(1px);
    box-shadow:
      inset 4px 4px 10px rgba(0, 0, 0, 0.25),
      inset -2px -2px 6px rgba(255, 255, 255, 0.15);
  }
  #rfe-btn:disabled { opacity: 0.55; cursor: not-allowed; }

  #rfe-btn .rfe-btn-label,
  #rfe-btn .rfe-btn-spinner,
  #rfe-btn .rfe-btn-check {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: opacity 0.2s ease, transform 0.2s ease;
  }
  #rfe-btn .rfe-btn-spinner,
  #rfe-btn .rfe-btn-check {
    position: absolute;
    inset: 0;
    opacity: 0;
    transform: scale(0.85);
  }
  #rfe-btn[data-state="loading"] .rfe-btn-label,
  #rfe-btn[data-state="success"] .rfe-btn-label { opacity: 0; }
  #rfe-btn[data-state="loading"] .rfe-btn-spinner,
  #rfe-btn[data-state="success"] .rfe-btn-check { opacity: 1; transform: scale(1); }
  #rfe-btn[data-state="success"] {
    background: linear-gradient(135deg, #75ad4a, var(--rfe-green-bright));
  }
  #rfe-btn[data-state="success"] .rfe-btn-check { animation: rfeCheckPop 0.4s ease; }

  .rfe-spin {
    width: 18px; height: 18px;
    border-radius: 50%;
    border: 2.5px solid rgba(255, 255, 255, 0.35);
    border-top-color: white;
    animation: rfeSpin 0.7s linear infinite;
  }

  /* ============================================================
     AUTOCOMPLETE DROPDOWN (.pac-container)
     z-index 99999 to defeat any Webflow stacking contexts that
     would otherwise hide the dropdown behind page elements.
     ============================================================ */
  .pac-container {
    z-index: 99999 !important;
    background: var(--rfe-cream) !important;
    border: none !important;
    border-radius: 18px !important;
    margin-top: 10px !important;
    padding: 8px !important;
    font-family: var(--rfe-font) !important;
    box-shadow:
      0 0 0 1px rgba(203, 187, 141, 0.4),
      -8px -8px 24px var(--rfe-shadow-out-light),
      12px 12px 32px var(--rfe-shadow-out-dark) !important;
    overflow: hidden;
  }
  .pac-item {
    padding: 14px 16px !important;
    border: none !important;
    border-radius: 12px !important;
    cursor: pointer;
    color: var(--rfe-ink) !important;
    font-size: 14px !important;
    font-family: var(--rfe-font) !important;
    transition: background 0.15s ease, color 0.15s ease;
  }
  .pac-item:hover {
    background: var(--rfe-cream-soft) !important;
    color: var(--rfe-olive) !important;
  }
  .pac-item-selected,
  .pac-item-selected:hover {
    background: var(--rfe-tan-light) !important;
    color: var(--rfe-olive) !important;
  }
  .pac-item-query {
    color: var(--rfe-ink) !important;
    font-weight: 700 !important;
    font-size: 14px !important;
  }
  .pac-item:hover .pac-item-query,
  .pac-item-selected .pac-item-query { color: var(--rfe-olive) !important; }
  .pac-matched { color: var(--rfe-olive) !important; font-weight: 800 !important; }
  .pac-icon { display: none !important; }
  .pac-logo:after { display: none !important; }

  @media (max-width: 540px) {
    #rfe-search { flex-direction: column; padding: 12px; }
    #rfe-btn { padding: 16px 24px; }
  }

  /* ============================================================
     MAP - now lives INSIDE the result panel's map slot
     ============================================================ */
  #rfe-map-wrap {
    position: relative;
    width: 100%;
    height: 100%;
  }
  #rfe-map {
    width: 100%;
    height: 100%;
    min-height: 360px;
    border-radius: 24px;
    overflow: hidden;
    box-shadow:
      inset 4px 4px 10px rgba(0, 0, 0, 0.08),
      inset -2px -2px 6px rgba(255, 255, 255, 0.5);
  }
  #rfe-status {
    position: absolute;
    bottom: 60px;
    left: 0;
    right: 0;
    text-align: center;
    font-size: 13px;
    font-weight: 600;
    color: var(--rfe-tan-deep);
    pointer-events: none;
  }

  /* "ROOF DETECTED" badge over the map */
  .rfe-map-found-badge {
    position: absolute;
    top: 18px;
    left: 50%;
    transform: translateX(-50%) translateY(-10px);
    z-index: 10;
    padding: 10px 20px;
    background: rgba(61, 74, 32, 0.96);
    color: var(--rfe-cream);
    border-radius: 100px;
    font-family: var(--rfe-font);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.55);
    pointer-events: none;
    opacity: 0;
  }
  .rfe-map-found-badge.show { animation: rfeMapBadge 2.4s ease forwards; }

  /* Caption pill at the bottom of the map */
  #rfe-map-note {
    position: absolute;
    left: 22px;
    right: 22px;
    bottom: 18px;
    margin: 0;
    padding: 9px 14px;
    background: rgba(61, 74, 32, 0.92);
    color: var(--rfe-cream);
    border-radius: 100px;
    text-align: center;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.4px;
    z-index: 5;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
  }

  /* ============================================================
     RESULT PANEL - side by side map + stats grid
     ============================================================ */
  .rfe-result-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 77px;
    align-items: stretch;
    margin-bottom: 24px;
  }
  .rfe-map-slot {
    position: relative;
    background: var(--rfe-cream);
    border-radius: 24px;
    overflow: hidden;
    min-height: 360px;
  }
  .rfe-stats-stack {
    display: flex;
    flex-direction: column;
    gap: 12px;
  }
  .rfe-stats-stack .rfe-stat {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin: 0;
  }
  @media (max-width: 700px) {
    .rfe-result-grid {
      grid-template-columns: 1fr;
      gap: 33px;
    }
    .rfe-stats-stack {
      flex-direction: row;
      gap: 10px;
    }
    .rfe-map-slot, #rfe-map { min-height: 280px; }
    #rfe-map-note {
      left: 14px;
      right: 14px;
      bottom: 14px;
      font-size: 10px;
      padding: 7px 12px;
    }
  }

  /* ============================================================
     PANELS (raised cards on dark olive page)
     ============================================================ */
  .rfe-panel {
    position: relative;
    margin: 24px auto 0;
    max-width: 100%;
    padding: 36px 32px;
    background: var(--rfe-cream);
    color: var(--rfe-ink);
    border-radius: 32px;
    font-family: var(--rfe-font);
    animation: rfeSlide 0.4s ease;
    box-shadow:
      -10px -10px 30px var(--rfe-shadow-out-light),
      14px 14px 36px var(--rfe-shadow-out-dark);
  }
  @media (max-width: 540px) {
    .rfe-panel { padding: 24px 18px; border-radius: 24px; }
  }

  /* ----- Stepper ----- */
  .rfe-stepper {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 4px;
    margin-bottom: 32px;
  }
  .rfe-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
    position: relative;
    z-index: 1;
  }
  .rfe-step-num {
    width: 36px; height: 36px;
    display: grid;
    place-items: center;
    background: var(--rfe-cream);
    color: var(--rfe-ink-mute);
    border-radius: 50%;
    font-size: 14px;
    font-weight: 800;
    letter-spacing: -0.02em;
    transition: all 0.3s ease;
    box-shadow:
      inset 2px 2px 5px var(--rfe-shadow-in-dark),
      inset -2px -2px 4px var(--rfe-shadow-in-light);
  }
  .rfe-step.active .rfe-step-num {
    background: linear-gradient(135deg, var(--rfe-tan-light), var(--rfe-tan));
    color: var(--rfe-olive);
    transform: scale(1.08);
    box-shadow:
      -2px -2px 6px var(--rfe-shadow-in-light),
      3px 3px 8px var(--rfe-shadow-in-dark);
  }
  .rfe-step.done .rfe-step-num {
    background: var(--rfe-olive);
    color: var(--rfe-cream);
    box-shadow:
      -2px -2px 6px var(--rfe-shadow-in-light),
      3px 3px 8px var(--rfe-shadow-in-dark);
  }
  .rfe-step.done .rfe-step-num::before { content: '\2713'; font-size: 16px; }
  .rfe-step-lbl {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.7px;
    text-transform: uppercase;
    color: var(--rfe-ink-mute);
    transition: color 0.3s ease;
  }
  .rfe-step.active .rfe-step-lbl { color: var(--rfe-olive); }
  .rfe-step.done .rfe-step-lbl { color: var(--rfe-tan-deep); }
  .rfe-line {
    flex: 1;
    height: 3px;
    background: var(--rfe-cream-deeper);
    border-radius: 2px;
    margin: -19px -2px 0;
    box-shadow: inset 1px 1px 2px var(--rfe-shadow-in-dark);
    transition: background 0.4s ease;
  }
  .rfe-line.done { background: var(--rfe-olive); box-shadow: none; }
  @media (max-width: 540px) {
    .rfe-step-lbl { display: none; }
    .rfe-step-num { width: 30px; height: 30px; font-size: 12px; }
    .rfe-line { margin-top: 0; }
  }

  /* ----- Headings ----- */
  .rfe-eyebrow {
    margin-bottom: 10px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--rfe-tan-deep);
  }
  .rfe-h1 {
    margin: 0 0 14px;
    font-size: 34px;
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.02em;
    color: var(--rfe-ink);
  }
  .rfe-sub {
    margin: 0 0 28px;
    font-size: 17px;
    font-weight: 400;
    line-height: 1.55;
    color: var(--rfe-ink-soft);
  }
  @media (max-width: 540px) {
    .rfe-h1 { font-size: 26px; }
  }
  .rfe-back-btn {
    margin: 0 0 14px -8px;
    padding: 8px 14px;
    background: transparent;
    color: var(--rfe-ink-soft);
    border: none;
    border-radius: 12px;
    font: 600 13px var(--rfe-font);
    cursor: pointer;
  }
  .rfe-back-btn:hover {
    background: var(--rfe-cream-soft);
    color: var(--rfe-olive);
  }

  /* ----- Stat cards (used inside .rfe-stats-stack now) ----- */
  .rfe-stat {
    padding: 22px 14px;
    background: var(--rfe-cream);
    border-radius: 20px;
    text-align: center;
    box-shadow:
      -5px -5px 12px var(--rfe-shadow-in-light),
      6px 6px 14px var(--rfe-shadow-in-dark);
  }
  .rfe-stat-val {
    margin-bottom: 6px;
    font-size: 32px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.02em;
    color: var(--rfe-olive);
  }
  .rfe-stat-lbl {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--rfe-ink-mute);
  }
  @media (max-width: 540px) {
    .rfe-stat-val { font-size: 24px; }
    .rfe-stat-lbl { font-size: 10px; }
  }

  /* ----- Disclaimer ----- */
  .rfe-disclaimer {
    margin-bottom: 20px;
    padding: 16px 20px;
    background: var(--rfe-olive);
    color: var(--rfe-cream-soft);
    border-radius: 16px;
    font-size: 14px;
    line-height: 1.5;
    box-shadow:
      -3px -3px 8px var(--rfe-shadow-in-light),
      5px 5px 14px var(--rfe-shadow-in-dark);
  }
  .rfe-disclaimer strong { color: white; }

  /* ----- Toggle + sections list ----- */
  .rfe-toggle {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding: 16px 20px;
    background: var(--rfe-cream);
    color: var(--rfe-olive);
    border: none;
    border-radius: 16px;
    font: 700 14px var(--rfe-font);
    cursor: pointer;
    transition: all 0.18s ease;
    box-shadow:
      -3px -3px 8px var(--rfe-shadow-in-light),
      5px 5px 12px var(--rfe-shadow-in-dark);
  }
  .rfe-toggle:hover { transform: translateY(-1px); }
  .rfe-toggle-arrow {
    display: inline-block;
    font-size: 11px;
    transition: transform 0.3s ease;
  }
  .rfe-toggle-arrow.open { transform: rotate(180deg); }
  .rfe-planes-list {
    display: grid;
    gap: 8px;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.5s ease, margin 0.3s ease;
  }
  .rfe-planes-list.open { max-height: 1200px; margin-top: 14px; }
  .rfe-plane {
    display: flex;
    justify-content: space-between;
    padding: 14px 18px;
    background: var(--rfe-cream);
    border-radius: 14px;
    font-size: 14px;
    box-shadow:
      inset 2px 2px 6px var(--rfe-shadow-in-dark),
      inset -2px -2px 6px var(--rfe-shadow-in-light);
  }
  .rfe-plane-name { color: var(--rfe-ink); font-weight: 500; }
  .rfe-plane-sqft { color: var(--rfe-ink-soft); font-weight: 600; }

  /* ----- Question / material picker ----- */
  .rfe-question {
    margin-top: 30px;
    padding-top: 28px;
    border-top: 2px dashed var(--rfe-cream-deeper);
  }
  .rfe-question-h {
    margin: 0 0 8px;
    font-size: 22px;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--rfe-ink);
  }
  .rfe-question-sub {
    margin: 0 0 20px;
    font-size: 15px;
    line-height: 1.5;
    color: var(--rfe-ink-soft);
  }
  .rfe-mat-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    margin-bottom: 22px;
  }
  @media (max-width: 540px) {
    .rfe-mat-grid { grid-template-columns: repeat(2, 1fr); }
  }
  .rfe-mat {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 18px 10px;
    background: var(--rfe-cream);
    color: var(--rfe-ink);
    border: none;
    border-radius: 16px;
    font: 600 14px var(--rfe-font);
    cursor: pointer;
    transition: all 0.18s ease;
    animation: rfeMatIntro 0.5s ease-out backwards;
    box-shadow:
      -3px -3px 8px var(--rfe-shadow-in-light),
      4px 4px 10px var(--rfe-shadow-in-dark);
  }
  .rfe-mat::after {
    content: '\2192';
    font-size: 16px;
    font-weight: 800;
    line-height: 1;
    color: var(--rfe-tan-deep);
    transition: transform 0.2s ease, color 0.2s ease;
  }
  .rfe-mat:hover { transform: translateY(-4px); }
  .rfe-mat:hover::after {
    transform: translateX(4px);
    color: var(--rfe-olive);
  }
  .rfe-mat.active {
    background: var(--rfe-olive);
    color: var(--rfe-cream);
    transform: translateY(0);
    box-shadow:
      inset 3px 3px 8px rgba(0, 0, 0, 0.3),
      inset -2px -2px 6px rgba(255, 255, 255, 0.08);
  }
  .rfe-mat.active::after { content: '\2713'; color: var(--rfe-cream); }
  .rfe-mat:nth-child(1) { animation-delay: 0.05s; }
  .rfe-mat:nth-child(2) { animation-delay: 0.15s; }
  .rfe-mat:nth-child(3) { animation-delay: 0.25s; }
  .rfe-mat:nth-child(4) { animation-delay: 0.35s; }

  /* ----- Manual fallback input ----- */
  #rfe-manual { display: none; margin: 16px 0; }
  #rfe-manual p {
    margin-bottom: 8px;
    font-size: 14px;
    font-weight: 500;
    color: var(--rfe-ink-soft);
  }
  #rfe-manual input {
    width: 100%;
    max-width: 240px;
    padding: 14px 18px;
    background: var(--rfe-cream);
    border: none;
    border-radius: 14px;
    font: inherit;
    font-size: 15px;
    outline: none;
    box-shadow:
      inset 3px 3px 8px var(--rfe-shadow-in-dark),
      inset -2px -2px 6px var(--rfe-shadow-in-light);
  }

  /* ----- Primary CTA (green) ----- */
  .rfe-cta {
    position: relative;
    width: 100%;
    padding: 22px 28px;
    background: linear-gradient(135deg, var(--rfe-green-bright), var(--rfe-green));
    color: white;
    border: none;
    border-radius: 18px;
    font: 700 18px var(--rfe-font);
    letter-spacing: -0.01em;
    cursor: pointer;
    overflow: hidden;
    transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.3s ease;
    box-shadow:
      -4px -4px 10px var(--rfe-shadow-in-light),
      8px 8px 22px var(--rfe-shadow-in-dark),
      inset 1px 1px 2px rgba(255, 255, 255, 0.25);
  }
  .rfe-cta:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow:
      -4px -4px 12px var(--rfe-shadow-in-light),
      10px 10px 26px var(--rfe-shadow-in-dark),
      inset 1px 1px 2px rgba(255, 255, 255, 0.3);
  }
  .rfe-cta:active:not(:disabled) {
    transform: translateY(1px);
    box-shadow:
      inset 4px 4px 10px rgba(0, 0, 0, 0.25),
      inset -2px -2px 6px rgba(255, 255, 255, 0.15);
  }
  .rfe-cta:disabled { opacity: 0.5; cursor: not-allowed; }
  .rfe-cta .rfe-btn-label,
  .rfe-cta .rfe-btn-spinner,
  .rfe-cta .rfe-btn-check {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    transition: opacity 0.2s ease, transform 0.2s ease;
  }
  .rfe-cta .rfe-btn-spinner,
  .rfe-cta .rfe-btn-check {
    position: absolute;
    inset: 0;
    opacity: 0;
    transform: scale(0.85);
  }
  .rfe-cta[data-state='loading'] .rfe-btn-label,
  .rfe-cta[data-state='success'] .rfe-btn-label { opacity: 0; }
  .rfe-cta[data-state='loading'] .rfe-btn-spinner,
  .rfe-cta[data-state='success'] .rfe-btn-check { opacity: 1; transform: scale(1); }
  .rfe-cta[data-state='success'] {
    background: linear-gradient(135deg, #75ad4a, var(--rfe-green-bright));
  }
  .rfe-cta[data-state='success'] .rfe-btn-check { animation: rfeCheckPopLg 0.4s ease; }
  .rfe-spin-lg {
    width: 22px; height: 22px;
    border-radius: 50%;
    border: 3px solid rgba(255, 255, 255, 0.35);
    border-top-color: white;
    animation: rfeSpin 0.7s linear infinite;
  }

  /* ----- Secondary CTA (ghost) ----- */
  .rfe-cta-ghost {
    width: 100%;
    margin-top: 12px;
    padding: 18px 24px;
    background: var(--rfe-cream);
    color: var(--rfe-olive);
    border: none;
    border-radius: 18px;
    font: 700 16px var(--rfe-font);
    letter-spacing: -0.01em;
    cursor: pointer;
    transition: all 0.18s ease;
    box-shadow:
      -3px -3px 8px var(--rfe-shadow-in-light),
      5px 5px 14px var(--rfe-shadow-in-dark);
  }
  .rfe-cta-ghost:hover { transform: translateY(-1px); }
  .rfe-cta-ghost:active {
    box-shadow:
      inset 3px 3px 8px var(--rfe-shadow-in-dark),
      inset -2px -2px 6px var(--rfe-shadow-in-light);
  }

  /* ----- Test-mode skip button ----- */
  .rfe-skip-btn {
    display: none;
    align-items: center;
    gap: 6px;
    margin: 12px auto 0;
    padding: 10px 18px;
    background: transparent;
    color: var(--rfe-tan-deep);
    border: 1px dashed var(--rfe-tan-deep);
    border-radius: 10px;
    font: 600 11px var(--rfe-font);
    letter-spacing: 1px;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 0.18s ease;
  }
  .rfe-skip-btn:hover {
    background: var(--rfe-cream-soft);
    color: var(--rfe-olive);
    border-color: var(--rfe-olive);
  }

  /* ----- Lead form recap ----- */
  .rfe-recap {
    margin-bottom: 22px;
    padding: 16px 20px;
    background: var(--rfe-cream-soft);
    color: var(--rfe-ink-soft);
    border-radius: 18px;
    font-size: 13px;
    line-height: 1.6;
    box-shadow:
      inset 2px 2px 5px var(--rfe-shadow-in-dark),
      inset -1px -1px 3px var(--rfe-shadow-in-light);
  }
  .rfe-recap-row { display: flex; gap: 10px; align-items: baseline; }
  .rfe-recap-row + .rfe-recap-row { margin-top: 6px; }
  .rfe-recap-label {
    min-width: 90px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    color: var(--rfe-olive);
  }
  .rfe-recap-val { color: var(--rfe-ink); font-weight: 500; }

  /* ----- Form fields ----- */
  .rfe-form-grid { display: grid; gap: 12px; }
  .rfe-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
  @media (max-width: 540px) {
    .rfe-form-row { grid-template-columns: 1fr; }
  }
  .rfe-input-field,
  .rfe-select-field {
    width: 100%;
    padding: 18px 22px;
    background: var(--rfe-cream);
    color: var(--rfe-ink);
    border: none;
    border-radius: 16px;
    font: 500 16px var(--rfe-font);
    outline: none;
    transition: box-shadow 0.2s ease;
    box-shadow:
      inset 4px 4px 10px var(--rfe-shadow-in-dark),
      inset -3px -3px 8px var(--rfe-shadow-in-light);
  }
  .rfe-input-field::placeholder { color: var(--rfe-ink-mute); font-weight: 400; }
  .rfe-input-field:focus,
  .rfe-select-field:focus {
    box-shadow:
      inset 4px 4px 10px var(--rfe-shadow-in-dark),
      inset -3px -3px 8px var(--rfe-shadow-in-light),
      0 0 0 3px rgba(203, 187, 141, 0.5);
  }
  .rfe-select-field {
    padding-right: 50px;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23b09b6e' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 22px center;
  }
  .rfe-form-meta {
    margin-top: 14px;
    font-size: 12px;
    line-height: 1.5;
    text-align: center;
    color: var(--rfe-ink-mute);
  }

  /* ----- Pricing tier cards ----- */
  .rfe-pricing-grid {
    display: grid;
    gap: 14px;
    margin-bottom: 28px;
  }
  .rfe-price {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 18px;
    padding: 22px;
    background: var(--rfe-cream);
    border: none;
    border-radius: 22px;
    font: inherit;
    color: inherit;
    text-align: left;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow:
      -5px -5px 12px var(--rfe-shadow-in-light),
      6px 6px 14px var(--rfe-shadow-in-dark);
  }
  .rfe-price:hover { transform: translateY(-2px); }
  .rfe-price.active {
    background: var(--rfe-olive);
    transform: translateY(0);
    box-shadow:
      inset 4px 4px 10px rgba(0, 0, 0, 0.25),
      inset -2px -2px 6px rgba(255, 255, 255, 0.08),
      0 0 0 3px var(--rfe-tan);
  }
  .rfe-price.active .rfe-price-name,
  .rfe-price.active .rfe-price-desc { color: var(--rfe-cream); }
  .rfe-price.active .rfe-price-tag   { color: var(--rfe-tan); }
  .rfe-price.active .rfe-price-range { color: #a8d877; }
  .rfe-price-tag {
    margin-bottom: 6px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--rfe-tan-deep);
  }
  .rfe-price-name {
    margin-bottom: 6px;
    font-size: 17px;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--rfe-ink);
  }
  .rfe-price-desc {
    font-size: 13px;
    line-height: 1.4;
    color: var(--rfe-ink-soft);
  }
  .rfe-price-amount { min-width: 130px; text-align: right; }
  .rfe-price-range {
    font-size: 22px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.02em;
    color: var(--rfe-green);
  }
  .rfe-price-range .to {
    margin: 0 4px;
    opacity: 0.5;
    font-size: 14px;
    font-weight: 500;
  }
  .rfe-price-sub {
    margin-top: 4px;
    font-size: 11px;
    color: var(--rfe-ink-mute);
  }
  @media (max-width: 540px) {
    .rfe-price { grid-template-columns: 1fr; gap: 12px; padding: 18px; }
    .rfe-price-amount { text-align: left; }
  }

  /* ----- Street View preview ----- */
  .rfe-streetview-wrap {
    margin-bottom: 24px;
    text-align: center;
  }
  .rfe-streetview-img {
    display: block;
    width: 100%;
    max-width: 560px;
    aspect-ratio: 16 / 9;
    margin: 0 auto;
    background: var(--rfe-cream-deeper);
    border-radius: 20px;
    object-fit: cover;
    box-shadow:
      inset 5px 5px 12px var(--rfe-shadow-in-dark),
      inset -3px -3px 8px var(--rfe-shadow-in-light),
      0 0 0 8px var(--rfe-cream),
      -8px -8px 22px var(--rfe-shadow-in-light),
      10px 10px 24px var(--rfe-shadow-in-dark);
  }
  .rfe-streetview-caption {
    margin-top: 14px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: var(--rfe-tan-deep);
  }

  /* ----- Dual CTA paths + OR divider ----- */
  .rfe-paths-wrap { padding-top: 12px; }
  .rfe-paths-header {
    margin-bottom: 22px;
    text-align: center;
  }
  .rfe-paths-header .rfe-eyebrow { margin-bottom: 6px; }
  .rfe-paths-header h2 {
    margin: 0 0 8px;
    font-size: 22px;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--rfe-ink);
  }
  .rfe-paths-header p {
    margin: 0;
    font-size: 15px;
    line-height: 1.5;
    color: var(--rfe-ink-soft);
  }
  .rfe-paths {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: stretch;
    gap: 14px;
  }
  @media (max-width: 700px) {
    .rfe-paths { grid-template-columns: 1fr; }
    .rfe-or { justify-self: center; }
  }
  .rfe-or {
    align-self: center;
    padding: 10px 16px;
    background: linear-gradient(135deg, var(--rfe-tan-light), var(--rfe-tan));
    color: var(--rfe-olive);
    border-radius: 100px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 2px;
    text-transform: uppercase;
    box-shadow:
      -3px -3px 6px var(--rfe-shadow-in-light),
      4px 4px 10px var(--rfe-shadow-in-dark);
  }
  .rfe-path {
    display: flex;
    flex-direction: column;
    padding: 26px 22px;
    background: var(--rfe-cream);
    color: inherit;
    border: none;
    border-radius: 22px;
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: all 0.22s ease;
    box-shadow:
      -5px -5px 14px var(--rfe-shadow-in-light),
      8px 8px 22px var(--rfe-shadow-in-dark);
  }
  .rfe-path:hover { transform: translateY(-3px); }
  .rfe-path-icon {
    display: grid;
    place-items: center;
    width: 52px; height: 52px;
    margin-bottom: 14px;
    color: white;
    border-radius: 16px;
    font-size: 24px;
    box-shadow:
      -2px -2px 6px var(--rfe-shadow-in-light),
      3px 3px 8px var(--rfe-shadow-in-dark);
  }
  .rfe-path-icon-primary {
    background: linear-gradient(135deg, var(--rfe-green-bright), var(--rfe-green));
  }
  .rfe-path-icon-secondary {
    background: linear-gradient(135deg, var(--rfe-tan-light), var(--rfe-tan-deep));
    color: var(--rfe-olive);
  }
  .rfe-path-tag {
    margin-bottom: 6px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--rfe-tan-deep);
  }
  .rfe-path-h {
    margin: 0 0 10px;
    font-size: 19px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.01em;
    color: var(--rfe-ink);
  }
  .rfe-path-desc {
    flex: 1;
    font-size: 14px;
    line-height: 1.55;
    color: var(--rfe-ink-soft);
  }
  .rfe-path-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 16px;
    font-size: 12px;
    font-weight: 700;
    color: var(--rfe-olive);
  }
  .rfe-path-meta::after {
    content: '\2192';
    margin-left: auto;
    font-size: 16px;
    color: var(--rfe-tan-deep);
    transition: transform 0.2s ease;
  }
  .rfe-path:hover .rfe-path-meta::after { transform: translateX(4px); }

  /* ----- Confirmation interstitial ----- */
  .rfe-confirm-choice-card {
    margin-bottom: 18px;
    padding: 26px;
    background: var(--rfe-cream-soft);
    border-radius: 22px;
    box-shadow:
      inset 3px 3px 10px var(--rfe-shadow-in-dark),
      inset -2px -2px 6px var(--rfe-shadow-in-light);
  }
  .rfe-confirm-choice-row {
    display: flex;
    justify-content: space-between;
    padding: 12px 0;
    font-size: 14px;
    border-bottom: 1px dashed var(--rfe-cream-deeper);
  }
  .rfe-confirm-choice-row:last-child { border-bottom: none; }
  .rfe-confirm-choice-label {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    color: var(--rfe-ink-soft);
  }
  .rfe-confirm-choice-val {
    max-width: 70%;
    color: var(--rfe-ink);
    font-weight: 700;
    text-align: right;
  }

  /* ----- Final confirmation ----- */
  .rfe-confirm-wrap { text-align: center; }
  .rfe-confirm-icon {
    display: grid;
    place-items: center;
    width: 92px; height: 92px;
    margin: 0 auto 22px;
    background: linear-gradient(135deg, var(--rfe-green-bright), var(--rfe-green));
    color: white;
    border-radius: 28px;
    font-size: 44px;
    font-weight: 900;
    animation: rfeCheckPopLg 0.5s ease;
    box-shadow:
      -6px -6px 16px var(--rfe-shadow-in-light),
      10px 10px 24px var(--rfe-shadow-in-dark);
  }
  .rfe-confirm-card {
    margin: 22px 0;
    padding: 22px;
    background: var(--rfe-cream-soft);
    border-radius: 18px;
    text-align: left;
    box-shadow:
      inset 3px 3px 8px var(--rfe-shadow-in-dark),
      inset -2px -2px 6px var(--rfe-shadow-in-light);
  }
  .rfe-confirm-card-h {
    margin: 0 0 10px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--rfe-tan-deep);
  }
  .rfe-confirm-card-text {
    margin: 0;
    font-size: 15px;
    line-height: 1.55;
    color: var(--rfe-ink);
  }
  .rfe-phone-line {
    margin-bottom: 20px;
    font-size: 15px;
    color: var(--rfe-ink-soft);
  }
  .rfe-phone-line strong {
    color: var(--rfe-olive);
    font-weight: 700;
  }

  /* ============================================================
     ROOFLE-STYLE PRODUCT CATALOG
     ============================================================ */
  .rfe-catalog {
    display: flex;
    flex-direction: column;
    gap: 18px;
    margin-bottom: 28px;
  }
  .rfe-cat-card {
    position: relative;
    background: var(--rfe-cream);
    border-radius: 22px;
    overflow: hidden;
    box-shadow:
      -5px -5px 12px var(--rfe-shadow-in-light),
      6px 6px 14px var(--rfe-shadow-in-dark);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
  }
  .rfe-cat-card:hover {
    transform: translateY(-2px);
    box-shadow:
      -6px -6px 16px var(--rfe-shadow-in-light),
      9px 9px 20px var(--rfe-shadow-in-dark);
  }
  .rfe-cat-badge {
    position: absolute;
    top: 0;
    right: 0;
    padding: 8px 18px 8px 26px;
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: var(--rfe-cream);
    clip-path: polygon(16px 0, 100% 0, 100% 100%, 0 100%);
    z-index: 2;
  }
  .rfe-badge-good            { background: linear-gradient(135deg, var(--rfe-tan), var(--rfe-tan-deep)); color: var(--rfe-olive); }
  .rfe-badge-better          { background: linear-gradient(135deg, var(--rfe-olive-mid), var(--rfe-olive)); }
  .rfe-badge-thebest         { background: linear-gradient(135deg, var(--rfe-green-bright), var(--rfe-green)); }
  .rfe-badge-bestforlowslope { background: linear-gradient(135deg, var(--rfe-olive-mid), var(--rfe-olive)); }

  .rfe-cat-main {
    display: grid;
    grid-template-columns: 170px 1fr 180px;
    gap: 28px;
    padding: 28px;
    align-items: center;
  }

  /* Media column - thumbnail + swatches grouped & aligned */
  .rfe-cat-media {
    display: flex;
    flex-direction: column;
    gap: 12px;
    align-items: flex-start;
  }
  /* Recoloring shingle/metal texture tile. Color comes from --c. */
  .rfe-cat-tex,
  .rfe-detail-swatchprev {
    --c: #4a4a4a;
    background-color: var(--c);
    background-image:
      repeating-linear-gradient(to bottom,
        rgba(255,255,255,0.07) 0 2px,
        rgba(0,0,0,0.10) 2px 4px,
        transparent 4px 22px,
        rgba(0,0,0,0.22) 22px 25px),
      repeating-linear-gradient(to right,
        rgba(0,0,0,0.10) 0 1px,
        transparent 1px 44px),
      linear-gradient(135deg, rgba(255,255,255,0.14), rgba(0,0,0,0.20));
    box-shadow:
      inset 3px 3px 8px rgba(0,0,0,0.28),
      inset -2px -2px 6px rgba(255,255,255,0.12);
  }
  .rfe-cat-tex {
    width: 100%;
    height: 116px;
    border-radius: 16px;
    background-size: cover;
    background-position: center;
  }
  .rfe-cat-sws {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
  }
  .rfe-cat-sw {
    width: 26px;
    height: 26px;
    border-radius: 7px;
    cursor: pointer;
    background-size: cover;
    background-position: center;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
    box-shadow:
      inset 0 0 0 1.5px rgba(255,255,255,0.32),
      2px 2px 5px var(--rfe-shadow-in-dark);
  }
  .rfe-cat-sw:hover { transform: translateY(-2px); }
  .rfe-cat-sw.active {
    transform: translateY(-1px);
    box-shadow:
      inset 0 0 0 1.5px rgba(255,255,255,0.45),
      0 0 0 2.5px var(--rfe-olive),
      2px 2px 6px var(--rfe-shadow-in-dark);
  }

  /* Info column - left aligned, scannable spec rows */
  .rfe-cat-info {
    min-width: 0;
    text-align: left;
  }
  .rfe-cat-brand {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: var(--rfe-tan-deep);
    margin-bottom: 5px;
  }
  .rfe-cat-name {
    font-size: clamp(19px, 2.4vw, 22px);
    font-weight: 800;
    letter-spacing: -0.01em;
    color: var(--rfe-ink);
    margin-bottom: 14px;
    line-height: 1.12;
  }
  .rfe-cat-specs {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }
  .rfe-cat-spec {
    display: flex;
    align-items: baseline;
    gap: 12px;
  }
  .rfe-cat-spec-k {
    flex-shrink: 0;
    width: 92px;
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: 0.7px;
    text-transform: uppercase;
    color: var(--rfe-olive);
  }
  .rfe-cat-spec-v {
    flex: 1;
    min-width: 0;
    font-size: 13px;
    line-height: 1.5;
    color: var(--rfe-ink-soft);
  }

  /* Right rail - price + cta, right aligned */
  .rfe-cat-right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    text-align: right;
  }
  .rfe-cat-range {
    font-size: clamp(20px, 2.6vw, 24px);
    font-weight: 800;
    line-height: 1.05;
    letter-spacing: -0.02em;
    color: var(--rfe-green);
    white-space: nowrap;
  }
  .rfe-cat-range .to {
    margin: 0 5px;
    opacity: 0.5;
    font-size: 13px;
    font-weight: 500;
  }
  .rfe-cat-right .rfe-price-sub { margin-bottom: 16px; }
  .rfe-cat-btn {
    padding: 13px 26px;
    background: linear-gradient(135deg, var(--rfe-tan-light), var(--rfe-tan));
    color: var(--rfe-olive);
    border: none;
    border-radius: 100px;
    font: 800 13px 'Bricolage Grotesque', sans-serif;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    cursor: pointer;
    white-space: nowrap;
    transition: transform 0.18s ease, box-shadow 0.18s ease;
    box-shadow:
      -2px -2px 6px var(--rfe-shadow-in-light),
      4px 4px 10px var(--rfe-shadow-in-dark);
  }
  .rfe-cat-btn:hover {
    transform: translateY(-2px);
    box-shadow:
      -3px -3px 8px var(--rfe-shadow-in-light),
      6px 6px 14px var(--rfe-shadow-in-dark);
  }
  .rfe-cat-btn:active { transform: translateY(1px); }

  /* ============================================================
     PRODUCT DETAIL  (redesigned: one type scale, centered, 2-col)
     ============================================================ */
  #rfe-step-detail { text-align: left; }

  /* Prominent back button */
  .rfe-back-strong {
    display: flex;
    width: fit-content;
    align-items: center;
    gap: 8px;
    margin: 0 auto 26px;
    padding: 12px 22px;
    background: var(--rfe-cream);
    color: var(--rfe-olive);
    border: none;
    border-radius: 100px;
    font: 800 13px var(--rfe-font);
    letter-spacing: 0.5px;
    text-transform: uppercase;
    cursor: pointer;
    transition: transform 0.16s ease, box-shadow 0.16s ease;
    box-shadow:
      -3px -3px 8px var(--rfe-shadow-in-light),
      4px 4px 10px var(--rfe-shadow-in-dark);
  }
  .rfe-back-strong:hover {
    transform: translateY(-2px);
    box-shadow:
      -4px -4px 10px var(--rfe-shadow-in-light),
      6px 6px 14px var(--rfe-shadow-in-dark);
  }
  .rfe-back-strong:active { transform: translateY(1px); }

  /* Centered hero header - unified, consistent rhythm */
  .rfe-d-hero {
    max-width: 640px;
    margin: 0 auto 30px;
    text-align: center;
  }
  .rfe-d-eyebrow {
    margin-bottom: 12px;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 1.8px;
    text-transform: uppercase;
    color: var(--rfe-tan-deep);
  }
  .rfe-d-title {
    margin: 0 0 16px;
    font-size: clamp(26px, 4vw, 38px);
    font-weight: 800;
    line-height: 1.05;
    letter-spacing: -0.02em;
    color: var(--rfe-ink);
  }
  .rfe-d-price {
    font-size: clamp(22px, 3.4vw, 30px);
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.02em;
    color: var(--rfe-green);
  }
  .rfe-d-price-sub {
    margin-top: 7px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--rfe-ink-mute);
  }

  /* Hero preview - the color swap target */
  .rfe-detail-preview {
    position: relative;
    width: 100%;
    max-width: 760px;
    margin: 0 auto 26px;
    aspect-ratio: 16 / 9;
    border-radius: 24px;
    overflow: hidden;
    box-shadow:
      -8px -8px 22px var(--rfe-shadow-in-light),
      12px 12px 30px var(--rfe-shadow-in-dark);
  }
  .rfe-detail-img,
  .rfe-detail-swatchprev {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    box-shadow: none;
  }
  .rfe-detail-img { object-fit: cover; }
  .rfe-detail-colorname {
    position: absolute;
    left: 16px;
    bottom: 16px;
    padding: 9px 18px;
    background: rgba(45, 54, 24, 0.85);
    color: var(--rfe-cream);
    border-radius: 100px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.3px;
  }

  /* Color picker - big square photo-ready tiles */
  .rfe-d-colors-wrap {
    max-width: 760px;
    margin: 0 auto 28px;
    text-align: center;
  }
  .rfe-d-section-lbl {
    margin-bottom: 16px;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    color: var(--rfe-tan-deep);
  }
  .rfe-d-colors {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 14px;
  }
  .rfe-d-sw {
    width: 76px;
    height: 76px;
    border: none;
    border-radius: 16px;
    padding: 0;
    cursor: pointer;
    background-size: cover;
    background-position: center;
    transition: transform 0.16s ease, box-shadow 0.16s ease;
    box-shadow:
      inset 0 0 0 1.5px rgba(255, 255, 255, 0.28),
      3px 3px 9px var(--rfe-shadow-in-dark);
  }
  .rfe-d-sw:hover { transform: translateY(-3px); }
  .rfe-d-sw.active {
    transform: translateY(-2px);
    box-shadow:
      inset 0 0 0 2px rgba(255, 255, 255, 0.45),
      0 0 0 3px var(--rfe-olive),
      4px 4px 12px var(--rfe-shadow-in-dark);
  }

  /* Description - constrained, centered, single consistent style */
  .rfe-d-desc {
    max-width: 680px;
    margin: 0 auto 32px;
    text-align: center;
    font-size: 16px;
    line-height: 1.65;
    color: var(--rfe-ink-soft);
  }

  /* 2-col body: package (1.25fr) + spec sidebar (0.75fr) */
  .rfe-d-grid {
    display: grid;
    grid-template-columns: 1.25fr 0.75fr;
    gap: 20px;
    align-items: start;
    margin-bottom: 30px;
  }
  .rfe-d-main { display: flex; flex-direction: column; gap: 16px; }
  .rfe-d-card {
    background: var(--rfe-cream);
    border-radius: 20px;
    padding: 26px;
    box-shadow:
      -5px -5px 12px var(--rfe-shadow-in-light),
      6px 6px 14px var(--rfe-shadow-in-dark);
  }
  .rfe-d-card-h {
    margin: 0 0 6px;
    font-size: 17px;
    font-weight: 800;
    letter-spacing: -0.01em;
    color: var(--rfe-ink);
  }
  .rfe-d-card-note {
    margin: 0 0 14px;
    font-size: 13px;
    line-height: 1.5;
    color: var(--rfe-ink-mute);
  }
  .rfe-d-list { list-style: none; margin: 0; padding: 0; }
  .rfe-d-list li {
    position: relative;
    padding: 6px 0 6px 24px;
    font-size: 14px;
    line-height: 1.55;
    color: var(--rfe-ink-soft);
  }
  .rfe-d-list li::before {
    content: '';
    position: absolute;
    left: 3px;
    top: 13px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--rfe-olive-mid);
  }
  .rfe-d-list-warn li::before {
    border-radius: 2px;
    background: var(--rfe-tan-deep);
  }

  /* Spec sidebar */
  .rfe-d-aside { position: sticky; top: 24px; }
  .rfe-d-spec .rfe-d-card-h { margin-bottom: 18px; }
  .rfe-d-spec-row {
    padding: 15px 0;
    border-bottom: 1px dashed var(--rfe-cream-deeper);
  }
  .rfe-d-spec-row:first-of-type { padding-top: 0; }
  .rfe-d-spec-row:last-child { border-bottom: none; padding-bottom: 0; }
  .rfe-d-spec-k {
    display: block;
    margin-bottom: 5px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    color: var(--rfe-olive);
  }
  .rfe-d-spec-v {
    display: block;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.45;
    color: var(--rfe-ink);
  }

  /* Specifications card - green block, tan text */
  .rfe-d-spec {
    background: linear-gradient(155deg, var(--rfe-olive-mid), var(--rfe-olive));
    box-shadow:
      -5px -5px 12px var(--rfe-shadow-in-light),
      8px 8px 18px var(--rfe-shadow-in-dark);
  }
  .rfe-d-spec .rfe-d-card-h { color: var(--rfe-tan-light); }
  .rfe-d-spec .rfe-d-spec-row { border-bottom-color: rgba(203, 187, 141, 0.3); }
  .rfe-d-spec .rfe-d-spec-k { color: var(--rfe-tan); }
  .rfe-d-spec .rfe-d-spec-v { color: var(--rfe-cream); }

  /* Top proposal CTA spacing */
  .rfe-d-cta-top { margin: 0 auto 34px; }

  /* CTA - centered, constrained, prominent */
  .rfe-d-cta {
    display: block;
    max-width: 420px;
    margin: 0 auto;
  }

  @media (max-width: 760px) {
    .rfe-d-grid { grid-template-columns: 1fr; }
    .rfe-d-aside { position: static; }
  }

  @media (max-width: 640px) {
    /* catalog mobile */
    .rfe-cat-main { grid-template-columns: 1fr; gap: 18px; padding: 20px; }
    .rfe-cat-media { align-items: stretch; }
    .rfe-cat-tex { height: 150px; }
    .rfe-cat-right { align-items: flex-start; text-align: left; }
    .rfe-cat-range { white-space: normal; }
    .rfe-cat-btn { width: 100%; text-align: center; }
    .rfe-cat-spec-k { width: 84px; }
    /* detail mobile */
    .rfe-detail-preview { border-radius: 18px; }
    .rfe-d-sw { width: 60px; height: 60px; border-radius: 14px; }
    .rfe-d-card { padding: 20px; }
    .rfe-d-desc { font-size: 15px; }
    .rfe-d-cta { max-width: 100%; }
  }

/* ===== TFR CONTACT FORM ===== */
/* ==========================================================
   TFR CONTACT FORM — scoped under .tfr-form-root
   ========================================================== */

  .tfr-form-root .tfr-card {
  scroll-margin-top: 140px;
}
@media (max-width: 640px) {
  .tfr-form-root .tfr-card { scroll-margin-top: 90px; }
}
.tfr-form-root {
  --tfr-cream: #fbf3e3;
  --tfr-cream-soft: #f5ebd3;
  --tfr-cream-deeper: #ede0c0;
  --tfr-tan: #cbbb8d;
  --tfr-tan-light: #ddc99c;
  --tfr-tan-deep: #b09b6e;
  --tfr-olive: #3d4a20;
  --tfr-olive-mid: #5a6e30;
  --tfr-green: #4a8829;
  --tfr-green-bright: #5fa033;
  --tfr-ink: #2d3618;
  --tfr-ink-soft: #5a5642;
  --tfr-ink-mute: #8a8470;
  --tfr-emergency: #DC2626;
  --tfr-emergency-dark: #B91C1C;
  --tfr-emergency-soft: #FEE7EA;
  --tfr-amber: #B8893C;
  --tfr-amber-soft: #F7E8C6;
  --tfr-shadow-out-light: rgba(105, 130, 60, 0.34);
  --tfr-shadow-out-dark: rgba(8, 12, 4, 0.62);
  --tfr-shadow-in-light: rgba(255, 252, 240, 1);
  --tfr-shadow-in-dark: rgba(140, 120, 75, 0.42);
  --tfr-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --tfr-radius-lg: 32px;
  --tfr-radius-md: 22px;
  --tfr-radius-sm: 16px;
  --tfr-radius-xs: 12px;
  font-family: 'Bricolage Grotesque', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  color: var(--tfr-ink);
  line-height: 1.5;
  display: block;
  width: 100%;
  box-sizing: border-box;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.tfr-form-root *, .tfr-form-root *::before, .tfr-form-root *::after { box-sizing: border-box; }
@keyframes tfr-slide-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
@keyframes tfr-pulse-ring { 0%, 100% { box-shadow: 0 0 0 0 rgba(220, 38, 38, 0.45); } 50% { box-shadow: 0 0 0 20px rgba(220, 38, 38, 0); } }
@keyframes tfr-check-pop { 0% { transform: scale(0.6); opacity: 0; } 60% { transform: scale(1.15); opacity: 1; } 100% { transform: scale(1); opacity: 1; } }
@keyframes tfr-check-pop-rotated { 0% { transform: rotate(45deg) translate(-1px, -1px) scale(0.6); opacity: 0; } 60% { transform: rotate(45deg) translate(-1px, -1px) scale(1.15); opacity: 1; } 100% { transform: rotate(45deg) translate(-1px, -1px) scale(1); opacity: 1; } }
@keyframes tfr-blink { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } }
.tfr-form-root .tfr-shell { max-width: 720px; margin: 0 auto; padding: 32px 16px; position: relative; }
.tfr-form-root .tfr-card { position: relative; background: var(--tfr-cream); border-radius: var(--tfr-radius-lg); overflow: hidden; box-shadow: -10px -10px 30px var(--tfr-shadow-out-light), 14px 14px 36px var(--tfr-shadow-out-dark); }
.tfr-form-root .tfr-test-banner { background: linear-gradient(135deg, var(--tfr-tan-light), var(--tfr-tan)); color: var(--tfr-olive); padding: 10px 16px; font-size: 11px; font-weight: 800; letter-spacing: 1.2px; text-transform: uppercase; text-align: center; }
.tfr-form-root .tfr-stepper { display: flex; align-items: center; justify-content: space-between; padding: 28px 32px 0; margin-bottom: 4px; }
.tfr-form-root .tfr-step { display: flex; flex-direction: column; align-items: center; gap: 8px; flex-shrink: 0; position: relative; z-index: 1; }
.tfr-form-root .tfr-step-num { width: 36px; height: 36px; display: grid; place-items: center; background: var(--tfr-cream); color: var(--tfr-ink-mute); border-radius: 50%; font-size: 14px; font-weight: 800; letter-spacing: -0.02em; transition: all 0.35s var(--tfr-ease); box-shadow: inset 2px 2px 5px var(--tfr-shadow-in-dark), inset -2px -2px 4px var(--tfr-shadow-in-light); }
.tfr-form-root .tfr-step.active .tfr-step-num { background: linear-gradient(135deg, var(--tfr-tan-light), var(--tfr-tan)); color: var(--tfr-olive); transform: scale(1.08); box-shadow: -2px -2px 6px var(--tfr-shadow-in-light), 3px 3px 8px var(--tfr-shadow-in-dark); }
.tfr-form-root .tfr-step.done .tfr-step-num { background: var(--tfr-olive); color: var(--tfr-cream); box-shadow: -2px -2px 6px var(--tfr-shadow-in-light), 3px 3px 8px var(--tfr-shadow-in-dark); }
.tfr-form-root .tfr-step.done .tfr-step-num-text { display: none; }
.tfr-form-root .tfr-step.done .tfr-step-num::before { content: '\2713'; font-size: 17px; font-weight: 900; }
.tfr-form-root .tfr-step-lbl { font-size: 10.5px; font-weight: 800; letter-spacing: 0.8px; text-transform: uppercase; color: var(--tfr-ink-mute); transition: color 0.35s var(--tfr-ease); }
.tfr-form-root .tfr-step.active .tfr-step-lbl { color: var(--tfr-olive); }
.tfr-form-root .tfr-step.done .tfr-step-lbl { color: var(--tfr-tan-deep); }
.tfr-form-root .tfr-line { flex: 1; height: 3px; background: var(--tfr-cream-deeper); border-radius: 2px; margin: -22px 2px 0; box-shadow: inset 1px 1px 2px var(--tfr-shadow-in-dark); transition: background 0.45s var(--tfr-ease); }
.tfr-form-root .tfr-line.done { background: var(--tfr-olive); box-shadow: none; }
.tfr-form-root .tfr-body { padding: 24px 32px 22px; min-height: 420px; display: flex; flex-direction: column; }
.tfr-form-root .tfr-step-content { animation: tfr-slide-in 0.4s var(--tfr-ease); flex: 1; display: flex; flex-direction: column; }
.tfr-form-root .tfr-back-btn { margin: 0 0 14px -10px; padding: 8px 14px; background: transparent; color: var(--tfr-ink-soft); border: none; border-radius: var(--tfr-radius-xs); font: 700 13px 'Bricolage Grotesque', sans-serif; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; transition: all 0.18s var(--tfr-ease); }
.tfr-form-root .tfr-back-btn:hover { background: var(--tfr-cream-soft); color: var(--tfr-olive); }
.tfr-form-root .tfr-back-btn[hidden] { display: none; }
.tfr-form-root .tfr-eyebrow { margin-bottom: 10px; font-size: 12px; font-weight: 800; letter-spacing: 1.5px; text-transform: uppercase; color: var(--tfr-tan-deep); }
.tfr-form-root .tfr-question { margin: 0 0 12px; font-size: 30px; font-weight: 700; line-height: 1.1; letter-spacing: -0.02em; color: var(--tfr-ink); font-family: inherit; }
.tfr-form-root .tfr-question-hint { margin: 0 0 22px; font-size: 15.5px; line-height: 1.5; color: var(--tfr-ink-soft); font-weight: 400; }
.tfr-form-root .tfr-tiles { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.tfr-form-root .tfr-tiles-single-col { grid-template-columns: 1fr; }
.tfr-form-root .tfr-tile { position: relative; display: flex; align-items: flex-start; gap: 14px; padding: 16px 18px; background: var(--tfr-cream); color: var(--tfr-ink); border: none; border-radius: var(--tfr-radius-sm); font: inherit; font-size: 14px; text-align: left; cursor: pointer; transition: background 0.22s var(--tfr-ease), box-shadow 0.22s var(--tfr-ease), color 0.22s var(--tfr-ease); min-height: 68px; box-shadow: -4px -4px 10px var(--tfr-shadow-in-light), 5px 5px 12px var(--tfr-shadow-in-dark); }
.tfr-form-root .tfr-tile:hover { background: var(--tfr-cream-soft); box-shadow: -5px -5px 14px var(--tfr-shadow-in-light), 7px 7px 18px var(--tfr-shadow-in-dark); }
.tfr-form-root .tfr-tile.selected { background: var(--tfr-olive); color: var(--tfr-cream); box-shadow: inset 4px 4px 10px rgba(0, 0, 0, 0.35), inset -2px -2px 6px rgba(255, 255, 255, 0.08); }
.tfr-form-root .tfr-tile.selected .tfr-tile-title { color: var(--tfr-cream); }
.tfr-form-root .tfr-tile.selected .tfr-tile-desc { color: rgba(251, 243, 227, 0.78); }
.tfr-form-root .tfr-tile-content { flex: 1; min-width: 0; }
.tfr-form-root .tfr-tile-title { font-weight: 700; font-size: 15.5px; line-height: 1.25; color: var(--tfr-ink); margin-bottom: 4px; letter-spacing: -0.005em; }
.tfr-form-root .tfr-tile-desc { font-size: 13px; line-height: 1.45; color: var(--tfr-ink-soft); font-weight: 500; }
.tfr-form-root .tfr-tile-check { width: 26px; height: 26px; border-radius: 50%; background: var(--tfr-cream); flex-shrink: 0; margin-top: 1px; display: flex; align-items: center; justify-content: center; transition: all 0.22s var(--tfr-ease); box-shadow: inset 2px 2px 5px var(--tfr-shadow-in-dark), inset -1px -1px 3px var(--tfr-shadow-in-light); }
.tfr-form-root .tfr-tile.selected .tfr-tile-check { background: var(--tfr-cream); box-shadow: 3px 3px 8px rgba(0, 0, 0, 0.25), -1px -1px 3px rgba(255, 255, 255, 0.15); }
.tfr-form-root .tfr-tile.selected .tfr-tile-check::after { content: ''; width: 7px; height: 11px; border: solid var(--tfr-olive); border-width: 0 2.8px 2.8px 0; transform: rotate(45deg) translate(-1px, -1px); animation: tfr-check-pop-rotated 0.32s var(--tfr-ease); }
.tfr-form-root .tfr-tile-emergency { background: linear-gradient(135deg, #FFF5F6 0%, #FEE7EA 100%); grid-column: 1 / -1; box-shadow: -4px -4px 10px rgba(255, 220, 220, 0.6), 6px 6px 16px rgba(220, 38, 38, 0.22); }
.tfr-form-root .tfr-tile-emergency .tfr-tile-title { color: var(--tfr-emergency); }
.tfr-form-root .tfr-tile-emergency .tfr-tile-desc { color: #8B2C2C; }
.tfr-form-root .tfr-tile-emergency:hover { background: linear-gradient(135deg, #FEE7EA 0%, #FECDD3 100%); box-shadow: -5px -5px 14px rgba(255, 220, 220, 0.7), 8px 8px 20px rgba(220, 38, 38, 0.32); }
.tfr-form-root .tfr-tile-arrow { width: 36px; height: 36px; border-radius: 50%; background: linear-gradient(145deg, #E03434 0%, var(--tfr-emergency-dark) 100%); color: white; display: flex; align-items: center; justify-content: center; flex-shrink: 0; margin-top: 1px; transition: transform 0.22s var(--tfr-ease); box-shadow: 3px 3px 8px rgba(220, 38, 38, 0.35), -2px -2px 6px rgba(255, 252, 240, 0.5), inset 1px 1px 1px rgba(255, 255, 255, 0.25); }
.tfr-form-root .tfr-tile-arrow svg { width: 16px; height: 16px; }
.tfr-form-root .tfr-tile-emergency:hover .tfr-tile-arrow { transform: translateX(4px); }
.tfr-form-root .tfr-tiles-compact { grid-template-columns: repeat(2, 1fr); gap: 10px; }
.tfr-form-root .tfr-tiles-compact .tfr-tile { min-height: 54px; padding: 12px 16px; align-items: center; gap: 12px; }
.tfr-form-root .tfr-tiles-compact .tfr-tile-title { font-size: 14px; margin-bottom: 0; line-height: 1.3; }
.tfr-form-root .tfr-tiles-compact .tfr-tile-check { width: 22px; height: 22px; margin-top: 0; }
.tfr-form-root .tfr-tiles-compact .tfr-tile.selected .tfr-tile-check::after { width: 6px; height: 9px; border-width: 0 2.5px 2.5px 0; }
.tfr-form-root .tfr-input, .tfr-form-root .tfr-textarea { width: 100%; padding: 18px 22px; font: 500 16px 'Bricolage Grotesque', sans-serif; color: var(--tfr-ink); background: var(--tfr-cream); border: none; border-radius: var(--tfr-radius-sm); outline: none; transition: box-shadow 0.2s var(--tfr-ease); box-shadow: inset 4px 4px 10px var(--tfr-shadow-in-dark), inset -3px -3px 8px var(--tfr-shadow-in-light); }
.tfr-form-root .tfr-input::placeholder, .tfr-form-root .tfr-textarea::placeholder { color: var(--tfr-ink-mute); font-weight: 400; }
.tfr-form-root .tfr-input:focus, .tfr-form-root .tfr-textarea:focus { box-shadow: inset 4px 4px 10px var(--tfr-shadow-in-dark), inset -3px -3px 8px var(--tfr-shadow-in-light), 0 0 0 3px rgba(203, 187, 141, 0.55); }
.tfr-form-root .tfr-textarea { min-height: 130px; resize: vertical; line-height: 1.55; }
.tfr-form-root .tfr-error-msg { color: var(--tfr-emergency); font-size: 13px; margin-top: 8px; font-weight: 700; }
.tfr-form-root .tfr-address-group { display: flex; flex-direction: column; gap: 10px; }
.tfr-form-root .tfr-address-row { display: grid; grid-template-columns: 1.7fr 0.7fr 1fr; gap: 10px; }
.tfr-form-root .tfr-address-field-wrap { position: relative; }
.tfr-form-root .tfr-address-label { position: absolute; top: 8px; left: 22px; font-size: 10px; font-weight: 800; letter-spacing: 0.8px; text-transform: uppercase; color: var(--tfr-tan-deep); pointer-events: none; z-index: 1; }
.tfr-form-root .tfr-address-field-wrap .tfr-input { padding-top: 26px; padding-bottom: 12px; }
@media (max-width: 480px) {
  .tfr-form-root .tfr-address-row { grid-template-columns: 1fr 1fr; }
  .tfr-form-root .tfr-address-row > :first-child { grid-column: 1 / -1; }
}
.tfr-form-root .tfr-area-notice { margin-top: 14px; padding: 16px 20px; background: var(--tfr-amber-soft); border-radius: var(--tfr-radius-sm); font-size: 13.5px; line-height: 1.5; color: var(--tfr-ink); display: flex; align-items: flex-start; gap: 10px; box-shadow: inset 2px 2px 5px rgba(140, 110, 60, 0.18), inset -1px -1px 3px var(--tfr-shadow-in-light); }
.tfr-form-root .tfr-area-notice svg { width: 18px; height: 18px; color: var(--tfr-amber); flex-shrink: 0; margin-top: 1px; }
.tfr-form-root .tfr-area-notice strong { color: var(--tfr-ink); }
.tfr-form-root .tfr-area-notice a { color: var(--tfr-olive); font-weight: 800; text-decoration: none; }
.tfr-form-root .tfr-review-list { margin-bottom: 18px; padding: 6px 18px; background: var(--tfr-cream-soft); border-radius: var(--tfr-radius-md); box-shadow: inset 3px 3px 8px var(--tfr-shadow-in-dark), inset -2px -2px 6px var(--tfr-shadow-in-light); }
.tfr-form-root .tfr-review-item { display: flex; justify-content: space-between; gap: 16px; padding: 13px 4px; font-size: 14px; border-bottom: 1px dashed var(--tfr-cream-deeper); }
.tfr-form-root .tfr-review-item:last-child { border-bottom: none; }
.tfr-form-root .tfr-review-label { min-width: 110px; flex-shrink: 0; font-size: 11px; font-weight: 800; letter-spacing: 0.6px; text-transform: uppercase; color: var(--tfr-olive); }
.tfr-form-root .tfr-review-value { text-align: right; color: var(--tfr-ink); font-weight: 600; word-break: break-word; }
.tfr-form-root .tfr-review-trust { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 18px; padding: 18px 20px; background: var(--tfr-cream); border-radius: var(--tfr-radius-md); font-size: 12px; color: var(--tfr-ink-soft); box-shadow: -3px -3px 8px var(--tfr-shadow-in-light), 4px 4px 10px var(--tfr-shadow-in-dark); }
.tfr-form-root .tfr-review-trust-item { display: flex; align-items: center; gap: 6px; font-weight: 800; letter-spacing: 0.3px; }
.tfr-form-root .tfr-review-trust-item svg { width: 15px; height: 15px; color: var(--tfr-olive); }
.tfr-form-root .tfr-footer { padding: 0 32px 26px; }
.tfr-form-root .tfr-cta-row { display: grid; grid-template-columns: 22% 1fr; gap: 10px; align-items: stretch; }
.tfr-form-root .tfr-cta-row.no-back { grid-template-columns: 1fr; }
.tfr-form-root .tfr-cta-back { display: flex; align-items: center; justify-content: center; gap: 6px; padding: 22px 12px; background: linear-gradient(135deg, #FEF1F3, #FBDBE0); color: #8B2C2C; border: none; border-radius: 18px; font: 700 14px 'Bricolage Grotesque', sans-serif; letter-spacing: -0.01em; cursor: pointer; transition: transform 0.18s var(--tfr-ease), box-shadow 0.18s var(--tfr-ease); box-shadow: -3px -3px 8px rgba(255, 240, 240, 0.8), 5px 5px 14px rgba(180, 60, 70, 0.18), inset 1px 1px 1px rgba(255, 255, 255, 0.4); }
.tfr-form-root .tfr-cta-back svg { width: 13px; height: 13px; flex-shrink: 0; }
.tfr-form-root .tfr-cta-back:hover { transform: translateY(-2px); background: linear-gradient(135deg, #FEE7EA, #F9C9D0); box-shadow: -4px -4px 10px rgba(255, 240, 240, 0.9), 7px 7px 18px rgba(180, 60, 70, 0.25), inset 1px 1px 1px rgba(255, 255, 255, 0.5); }
.tfr-form-root .tfr-cta-back:active { transform: translateY(1px); box-shadow: inset 3px 3px 8px rgba(180, 60, 70, 0.22), inset -1px -1px 3px rgba(255, 255, 255, 0.3); }
.tfr-form-root .tfr-cta-back[hidden] { display: none; }
.tfr-form-root .tfr-cta { position: relative; display: block; width: 100%; padding: 22px 28px; background: linear-gradient(135deg, var(--tfr-green-bright), var(--tfr-green)); color: white; border: none; border-radius: 18px; font: 700 18px 'Bricolage Grotesque', sans-serif; letter-spacing: -0.01em; cursor: pointer; overflow: hidden; transition: transform 0.18s var(--tfr-ease), box-shadow 0.18s var(--tfr-ease); box-shadow: -4px -4px 10px var(--tfr-shadow-in-light), 8px 8px 22px var(--tfr-shadow-in-dark), inset 1px 1px 2px rgba(255, 255, 255, 0.25); }
.tfr-form-root .tfr-cta:hover:not(:disabled) { transform: translateY(-2px); box-shadow: -4px -4px 12px var(--tfr-shadow-in-light), 10px 10px 26px var(--tfr-shadow-in-dark), inset 1px 1px 2px rgba(255, 255, 255, 0.3); }
.tfr-form-root .tfr-cta:active:not(:disabled) { transform: translateY(1px); box-shadow: inset 4px 4px 10px rgba(0, 0, 0, 0.28), inset -2px -2px 6px rgba(255, 255, 255, 0.12); }
.tfr-form-root .tfr-cta:disabled { opacity: 0.5; cursor: not-allowed; }
.tfr-form-root .tfr-cta-content { display: inline-flex; align-items: center; justify-content: center; gap: 10px; }
.tfr-form-root .tfr-footer-note { margin-top: 14px; text-align: center; font-size: 12.5px; color: var(--tfr-ink-mute); line-height: 1.5; }
.tfr-form-root .tfr-trust-badges { display: flex; gap: 18px; align-items: center; justify-content: center; flex-wrap: wrap; margin-top: 14px; font-size: 10.5px; color: var(--tfr-ink-mute); letter-spacing: 0.06em; }
.tfr-form-root .tfr-trust-badge { display: flex; align-items: center; gap: 5px; font-weight: 800; }
.tfr-form-root .tfr-trust-badge svg { width: 13px; height: 13px; color: var(--tfr-olive); }
.tfr-form-root .tfr-emergency-screen { text-align: center; padding: 16px 0 12px; position: relative; animation: tfr-slide-in 0.4s var(--tfr-ease); }
.tfr-form-root .tfr-emergency-back { position: absolute; top: 0; left: 0; background: var(--tfr-cream); border: none; cursor: pointer; font: 700 13px 'Bricolage Grotesque', sans-serif; color: var(--tfr-ink-soft); padding: 10px 16px; border-radius: var(--tfr-radius-sm); display: inline-flex; align-items: center; gap: 6px; transition: all 0.18s var(--tfr-ease); box-shadow: -3px -3px 8px var(--tfr-shadow-in-light), 4px 4px 10px var(--tfr-shadow-in-dark); }
.tfr-form-root .tfr-emergency-back:hover { color: var(--tfr-olive); transform: translateY(-1px); box-shadow: -4px -4px 10px var(--tfr-shadow-in-light), 6px 6px 14px var(--tfr-shadow-in-dark); }
.tfr-form-root .tfr-emergency-icon { width: 80px; height: 80px; background: linear-gradient(145deg, #E03434 0%, var(--tfr-emergency-dark) 100%); border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; margin: 24px 0 22px; animation: tfr-pulse-ring 1.7s infinite; box-shadow: 8px 8px 20px rgba(220, 38, 38, 0.4), -4px -4px 12px var(--tfr-shadow-in-light), inset 2px 2px 4px rgba(255, 255, 255, 0.18); }
.tfr-form-root .tfr-emergency-icon svg { width: 38px; height: 38px; color: white; }
.tfr-form-root .tfr-emergency-title { margin: 0 0 10px; font-size: 30px; font-weight: 700; line-height: 1.15; letter-spacing: -0.02em; color: var(--tfr-ink); font-family: inherit; }
.tfr-form-root .tfr-emergency-subtitle { margin: 0 0 26px; font-size: 16.5px; line-height: 1.5; color: var(--tfr-ink-soft); font-weight: 500; }
.tfr-form-root .tfr-call-btn { display: inline-flex; align-items: center; gap: 12px; padding: 20px 36px; background: linear-gradient(135deg, #E03434, var(--tfr-emergency-dark)); color: white; font: 800 21px 'Bricolage Grotesque', sans-serif; letter-spacing: -0.01em; text-decoration: none; border-radius: var(--tfr-radius-md); transition: transform 0.18s var(--tfr-ease), box-shadow 0.18s var(--tfr-ease); box-shadow: 8px 8px 22px rgba(220, 38, 38, 0.38), -5px -5px 14px var(--tfr-shadow-in-light), inset 1px 1px 1px rgba(255, 255, 255, 0.25); }
.tfr-form-root .tfr-call-btn:hover { transform: translateY(-3px); box-shadow: 10px 12px 28px rgba(220, 38, 38, 0.48), -6px -6px 16px var(--tfr-shadow-in-light), inset 1px 1px 1px rgba(255, 255, 255, 0.3); }
.tfr-form-root .tfr-call-btn svg { width: 24px; height: 24px; }
.tfr-form-root .tfr-247-badge { display: inline-flex; align-items: center; gap: 7px; margin-top: 22px; padding: 9px 16px; background: linear-gradient(135deg, var(--tfr-tan-light), var(--tfr-tan)); color: var(--tfr-olive); border-radius: 100px; font-size: 12px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; box-shadow: -2px -2px 6px var(--tfr-shadow-in-light), 4px 4px 10px var(--tfr-shadow-in-dark); }
.tfr-form-root .tfr-247-badge::before { content: ''; width: 8px; height: 8px; background: var(--tfr-green-bright); border-radius: 50%; animation: tfr-blink 1.5s infinite; }
.tfr-form-root .tfr-emergency-alt { margin-top: 26px; font-size: 13px; color: var(--tfr-ink-mute); }
.tfr-form-root .tfr-emergency-alt button { background: none; border: none; color: var(--tfr-olive); text-decoration: underline; cursor: pointer; font: inherit; font-weight: 700; padding: 0; }
.tfr-form-root .tfr-success-screen { text-align: center; padding: 20px 0; animation: tfr-slide-in 0.4s var(--tfr-ease); }
.tfr-form-root .tfr-success-icon { width: 92px; height: 92px; margin: 0 auto 22px; background: linear-gradient(135deg, var(--tfr-green-bright), var(--tfr-green)); border-radius: 28px; display: grid; place-items: center; animation: tfr-check-pop 0.5s var(--tfr-ease); box-shadow: -6px -6px 16px var(--tfr-shadow-in-light), 10px 10px 24px var(--tfr-shadow-in-dark), inset 1px 1px 1px rgba(255, 255, 255, 0.25); }
.tfr-form-root .tfr-success-icon svg { width: 44px; height: 44px; color: white; }
.tfr-form-root .tfr-success-title { margin: 0 0 10px; font-size: 32px; font-weight: 700; line-height: 1.1; letter-spacing: -0.02em; color: var(--tfr-ink); font-family: inherit; }
.tfr-form-root .tfr-success-text { max-width: 480px; margin: 0 auto 22px; font-size: 16.5px; line-height: 1.55; color: var(--tfr-ink-soft); font-weight: 500; }
.tfr-form-root .tfr-success-info { max-width: 480px; margin: 22px auto 0; padding: 22px 24px; background: var(--tfr-cream-soft); border-radius: var(--tfr-radius-md); text-align: left; box-shadow: inset 3px 3px 8px var(--tfr-shadow-in-dark), inset -2px -2px 6px var(--tfr-shadow-in-light); }
.tfr-form-root .tfr-success-info-row { display: flex; align-items: center; gap: 12px; padding: 7px 0; font-size: 14.5px; color: var(--tfr-ink-soft); }
.tfr-form-root .tfr-success-info-row svg { width: 19px; height: 19px; color: var(--tfr-olive); flex-shrink: 0; }
.tfr-form-root .tfr-success-info-row strong { color: var(--tfr-ink); font-weight: 700; }
.tfr-form-root .tfr-honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
@media (max-width: 640px) {
  .tfr-form-root .tfr-shell { padding: 12px 8px; }
  .tfr-form-root .tfr-card { border-radius: 24px; }
  .tfr-form-root .tfr-stepper { padding: 22px 18px 0; }
  .tfr-form-root .tfr-step-num { width: 30px; height: 30px; font-size: 12px; }
  .tfr-form-root .tfr-step.done .tfr-step-num::before { font-size: 14px; }
  .tfr-form-root .tfr-step-lbl { display: none; }
  .tfr-form-root .tfr-line { margin: 0 2px; }
  .tfr-form-root .tfr-body { padding: 20px 20px 18px; min-height: 360px; }
  .tfr-form-root .tfr-footer { padding: 0 20px 22px; }
  .tfr-form-root .tfr-question { font-size: 23px; }
  .tfr-form-root .tfr-question-hint { font-size: 14.5px; }
  .tfr-form-root .tfr-tiles { grid-template-columns: 1fr; }
  .tfr-form-root .tfr-tiles-compact { grid-template-columns: 1fr 1fr; gap: 8px; }
  .tfr-form-root .tfr-tiles-compact .tfr-tile { padding: 11px 12px; min-height: 50px; gap: 9px; }
  .tfr-form-root .tfr-tiles-compact .tfr-tile-title { font-size: 13px; }
  .tfr-form-root .tfr-emergency-title, .tfr-form-root .tfr-success-title { font-size: 25px; }
  .tfr-form-root .tfr-call-btn { font-size: 18px; padding: 18px 24px; width: 100%; justify-content: center; }
  .tfr-form-root .tfr-cta { font-size: 16px; padding: 20px 24px; }
  .tfr-form-root .tfr-trust-badges { gap: 12px; font-size: 10px; }
  .tfr-form-root .tfr-review-item { flex-direction: column; gap: 4px; }
  .tfr-form-root .tfr-review-value { text-align: left; }
  .tfr-form-root .tfr-review-label { min-width: 0; }
}