@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap');

  #turner-roi *{ box-sizing: border-box; margin: 0; padding: 0; }

  #turner-roi{
    --ink: #0a0a0a;
    --ink-soft: #4a4a4a;
    --ink-mute: #888;
    --line: #e4e4e4;
    --line-soft: #f0f0f0;
    --bg: #fafafa;
    --bg-card: #ffffff;
    --accent: #0a0a0a;
    --accent-text: #ffffff;
    --result-bg: #fcfbf6;
    --result-border: #0a0a0a;
    --profit: #0a0a0a;
    /* Turner Pro Wraps brand */
    --turner-yellow: #FFCE00;
    --turner-yellow-deep: #E6B800;
    --turner-yellow-soft: #FFF1A8;
    --highlight: var(--turner-yellow);
  }

  #turner-roi{
    background: var(--bg);
    color: var(--ink);
    font-family: 'Inter', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: clamp(17px, 1.15vw, 20px);
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
  }

  #turner-roi .stage{
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 28px clamp(20px, 4vw, 56px) 80px;
  }

  #turner-roi .brand{
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 22px;
  }

  #turner-roi .brand-left{ display: flex; align-items: center; gap: 12px; }

  #turner-roi .brand-logo{
    height: clamp(40px, 4vw, 56px);
    width: auto;
    display: block;
  }

  #turner-roi .progress{
    display: flex; gap: 6px;
  }

  #turner-roi .progress-dot{
    width: 26px; height: 4px;
    background: var(--line); border-radius: 2px;
    transition: background 0.25s;
  }

  #turner-roi .progress-dot.done{ background: var(--turner-yellow); border: 1px solid var(--ink); }

  #turner-roi .card{
    background: var(--bg-card);
    border: 1px solid var(--line);
    border-radius: 18px;
    padding: clamp(28px, 4vw, 56px) clamp(24px, 4vw, 56px);
    box-shadow: 0 1px 2px rgba(0,0,0,0.02), 0 12px 32px rgba(0,0,0,0.04);
  }

  #turner-roi .screen{ display: none; }
  #turner-roi .screen.active{ display: block; animation: fadeIn 0.35s ease; }

  @keyframes fadeIn {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
  }

  #turner-roi .eyebrow{
    font-size: clamp(12px, 1vw, 15px);
    font-weight: 800;
    letter-spacing: 1.8px; text-transform: uppercase;
    color: var(--ink-mute);
    margin-bottom: 12px;
  }

  #turner-roi h1{
    font-size: clamp(32px, 4.4vw, 56px);
    font-weight: 900;
    line-height: 1.05; color: var(--ink);
    margin-bottom: 14px; letter-spacing: -1.2px;
  }

  #turner-roi .sub{
    font-size: clamp(17px, 1.4vw, 22px);
    color: var(--ink-soft);
    margin-bottom: 28px; line-height: 1.45;
    max-width: 720px;
    font-weight: 500;
  }

  #turner-roi .section{
    margin-bottom: 26px;
  }

  #turner-roi .section-title{
    font-size: clamp(15px, 1.2vw, 18px);
    font-weight: 800;
    color: var(--ink); margin-bottom: 12px;
    text-transform: uppercase; letter-spacing: 1px;
  }

  #turner-roi .fleet-row{
    display: grid;
    grid-template-columns: 1.4fr 70px 1fr 30px;
    gap: 8px;
    align-items: center;
    margin-bottom: 8px;
  }

  /* Column labels above the fleet rows — clarifies that the price field is the
     wrap price per vehicle. Shares the .fleet-row grid (see grid-template-columns
     overrides below) so headers line up over their columns at every breakpoint. */
  #turner-roi .fleet-header{
    display: grid;
    grid-template-columns: 1.4fr 70px 1fr 30px;
    gap: 8px;
    align-items: end;
    margin-bottom: 6px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: var(--ink-mute);
  }

  #turner-roi .fleet-header > div{ line-height: 1.2; }

  /* Per-field labels inside each row — hidden on desktop (the column header does
     the labeling); shown on mobile where the row stacks (see mobile block). */
  #turner-roi .fleet-inline-label{
    display: none;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: var(--ink-mute);
    line-height: 1.2;
  }

  #turner-roi .fleet-row .label{
    font-size: clamp(14px, 1.1vw, 17px);
    font-weight: 700; color: var(--ink);
  }

  #turner-roi .fleet-row .label .micro{
    display: block;
    font-size: clamp(12px, 0.9vw, 14px);
    font-weight: 500;
    color: var(--ink-mute);
    margin-top: -2px;
  }

  #turner-roi .fleet-row input[type="number"], #turner-roi .fleet-row .price-input, #turner-roi .fleet-row select.fleet-type{
    width: 100%;
    border: 1.5px solid var(--line);
    border-radius: 6px;
    padding: 10px 12px;
    font-size: clamp(14px, 1.1vw, 17px);
    font-weight: 700;
    font-family: inherit;
    color: var(--ink);
    background: white;
    -webkit-appearance: none;
    appearance: none;
    cursor: pointer;
  }

  #turner-roi .fleet-row select.fleet-type{
    padding-right: 30px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23888' stroke-width='1.8' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
  }

  #turner-roi .fleet-row select.fleet-type:focus, #turner-roi .fleet-row input[type="number"]:focus, #turner-roi .fleet-row .price-input:focus{
    outline: none;
    border-color: var(--ink);
  }

  #turner-roi .fleet-row .price-wrap{
    position: relative;
  }

  #turner-roi .fleet-row .price-wrap input{
    padding-left: 20px;
  }

  #turner-roi .fleet-row .price-wrap::before{
    content: '$';
    position: absolute;
    left: 10px; top: 50%;
    transform: translateY(-50%);
    color: var(--ink-mute);
    font-size: 14px; font-weight: 600;
    pointer-events: none;
    z-index: 1;
  }

  #turner-roi .fleet-row .remove-btn{
    background: none; border: none;
    color: var(--ink-mute); font-size: 18px;
    cursor: pointer; padding: 4px;
    line-height: 1; font-family: inherit;
  }

  #turner-roi .fleet-row .remove-btn:hover{ color: var(--ink); }

  #turner-roi .add-vehicle{
    margin-top: 8px;
    background: none; border: 1.5px dashed var(--line);
    color: var(--ink-soft); border-radius: 6px;
    padding: 10px 12px; font-size: 13px; font-weight: 600;
    cursor: pointer; width: 100%;
    font-family: inherit;
    text-transform: uppercase; letter-spacing: 0.6px;
  }

  #turner-roi .add-vehicle:hover{
    border-color: var(--ink); color: var(--ink);
  }

  #turner-roi .fleet-total{
    margin-top: 12px;
    padding: 12px 14px;
    background: var(--line-soft);
    border-radius: 8px;
    display: flex; justify-content: space-between; align-items: center;
  }

  #turner-roi .fleet-total-label{
    font-size: clamp(13px, 1vw, 16px);
    color: var(--ink-soft);
    text-transform: uppercase; letter-spacing: 0.8px; font-weight: 700;
  }

  #turner-roi .fleet-total-value{
    font-size: clamp(22px, 2vw, 30px);
    font-weight: 900; color: var(--ink);
    letter-spacing: -0.5px;
  }

  #turner-roi .field{ margin-bottom: 16px; }

  #turner-roi .field label{
    display: block;
    font-size: clamp(13px, 1vw, 16px);
    font-weight: 800;
    color: var(--ink); margin-bottom: 8px;
    text-transform: uppercase; letter-spacing: 0.8px;
  }

  #turner-roi .field-input{ position: relative; }

  #turner-roi .field input, #turner-roi .field select{
    width: 100%;
    border: 1.5px solid var(--line);
    border-radius: 8px;
    padding: 14px 16px;
    font-size: clamp(16px, 1.2vw, 19px);
    font-weight: 600;
    font-family: inherit;
    color: var(--ink);
    background: white;
    transition: border-color 0.15s;
    -webkit-appearance: none;
    appearance: none;
  }

  #turner-roi .field input:focus, #turner-roi .field select:focus{ outline: none; border-color: var(--ink); }

  /* Chevron so the industry select reads as a dropdown (matches .fleet-type). */
  #turner-roi .field select{
    padding-right: 44px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23888' stroke-width='1.8' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 16px center;
  }

  #turner-roi .field .prefix{
    position: absolute; left: 14px; top: 50%;
    transform: translateY(-50%);
    color: var(--ink-mute); font-weight: 600;
    pointer-events: none;
  }

  #turner-roi .field input.with-prefix{ padding-left: 28px; }

  #turner-roi .field .hint{
    font-size: clamp(13px, 1vw, 16px);
    color: var(--ink-mute);
    margin-top: 6px;
    font-weight: 500;
  }

  #turner-roi .btn{
    width: 100%;
    background: var(--turner-yellow);
    color: var(--ink);
    border: 2px solid var(--ink);
    border-radius: 8px;
    padding: 18px 20px;
    font-size: clamp(15px, 1.15vw, 18px);
    font-weight: 900;
    letter-spacing: 0.8px; text-transform: uppercase;
    cursor: pointer; font-family: inherit;
    margin-top: 10px;
    box-shadow: 0 3px 0 0 var(--ink);
    transition: transform 0.06s, box-shadow 0.06s, background 0.15s;
  }

  #turner-roi .btn:hover{ background: var(--turner-yellow-deep); }
  #turner-roi .btn:active{
    transform: translateY(2px);
    box-shadow: 0 1px 0 0 var(--ink);
  }
  #turner-roi .btn:disabled{
    opacity: 0.4;
    cursor: not-allowed;
    box-shadow: 0 3px 0 0 var(--ink);
  }
  #turner-roi .btn:disabled:hover{ background: var(--turner-yellow); }

  #turner-roi .btn-secondary{
    background: white; color: var(--ink);
    border: 2px solid var(--ink);
    margin-top: 12px;
    box-shadow: 0 3px 0 0 var(--ink);
  }

  #turner-roi .btn-secondary:hover{ background: var(--line-soft); }

  #turner-roi .btn-back{
    background: transparent; color: var(--ink-soft);
    border: none; padding: 10px 0;
    font-size: clamp(14px, 1.05vw, 17px);
    font-weight: 700;
    cursor: pointer; text-transform: none;
    letter-spacing: normal;
    margin-top: 0; margin-bottom: 18px;
    width: auto; font-family: inherit;
  }

  #turner-roi .btn-back:hover{ color: var(--ink); }

  #turner-roi .sensitivity{
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 18px 20px 22px;
    margin-bottom: 16px;
    background: white;
  }

  #turner-roi .sensitivity-head{
    display: flex; align-items: baseline; justify-content: space-between;
    margin-bottom: 4px;
    gap: 12px;
    flex-wrap: wrap;
  }

  #turner-roi .sensitivity-title{
    font-size: clamp(15px, 1.2vw, 19px);
    font-weight: 800;
    color: var(--ink);
    text-transform: uppercase; letter-spacing: 1px;
  }

  #turner-roi .sensitivity-value{
    font-size: clamp(22px, 2vw, 32px);
    font-weight: 900;
    color: var(--ink);
    letter-spacing: -0.5px;
  }

  #turner-roi .sensitivity-value .vs{
    font-size: clamp(13px, 1vw, 16px);
    font-weight: 600;
    color: var(--ink-mute);
    margin-left: 6px;
    letter-spacing: 0;
  }

  #turner-roi .sensitivity-hint{
    font-size: clamp(14px, 1.1vw, 17px);
    color: var(--ink-soft);
    margin-bottom: 20px; line-height: 1.45;
    font-weight: 500;
  }

  #turner-roi .slider-wrap{
    position: relative;
    padding: 8px 0 22px;
  }

  #turner-roi .breakeven-marker{
    position: absolute;
    top: 4px;
    left: 0;
    transform: translateX(-50%);
    pointer-events: none;
    z-index: 0;
  }

  #turner-roi .breakeven-tick{
    width: 0;
    height: 16px;
    border-left: 2px dashed var(--ink-mute);
    margin: 0 auto;
    opacity: 0.55;
  }

  #turner-roi input[type="range"].sens-slider{
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 8px;
    background: transparent;
    margin: 0;
    padding: 0;
    cursor: pointer;
  }

  #turner-roi input[type="range"].sens-slider::-webkit-slider-runnable-track{
    height: 8px;
    background: linear-gradient(to right,
      var(--line-soft) 0%, var(--line-soft) 50%,
      var(--line) 50%, var(--line) 100%);
    border-radius: 4px;
    border: 1px solid var(--line);
  }

  #turner-roi input[type="range"].sens-slider::-webkit-slider-thumb{
    -webkit-appearance: none;
    appearance: none;
    width: 30px;
    height: 30px;
    background: var(--turner-yellow);
    border-radius: 50%;
    border: 3px solid var(--ink);
    box-shadow: 0 2px 8px rgba(0,0,0,0.25);
    margin-top: -12px;
    cursor: grab;
  }

  #turner-roi input[type="range"].sens-slider::-webkit-slider-thumb:active{ cursor: grabbing; }

  #turner-roi input[type="range"].sens-slider::-moz-range-track{
    height: 8px;
    background: var(--line-soft);
    border: 1px solid var(--line);
    border-radius: 4px;
  }

  #turner-roi input[type="range"].sens-slider::-moz-range-thumb{
    width: 26px;
    height: 26px;
    background: var(--turner-yellow);
    border-radius: 50%;
    border: 3px solid var(--ink);
    box-shadow: 0 2px 8px rgba(0,0,0,0.25);
    cursor: grab;
  }

  #turner-roi .slider-anchors{
    display: flex; justify-content: space-between;
    margin-top: 14px;
    font-size: clamp(12px, 0.95vw, 14px);
    font-weight: 700;
    color: var(--ink-mute);
    text-transform: uppercase; letter-spacing: 0.6px;
  }

  #turner-roi .slider-anchors .anchor-center{ color: var(--ink); }

  #turner-roi .sensitivity-readout{
    margin-top: 18px;
    padding: 16px 18px;
    background: var(--line-soft);
    border-radius: 10px;
    font-size: clamp(15px, 1.2vw, 19px);
    color: var(--ink-soft);
    line-height: 1.5;
    font-weight: 500;
  }

  #turner-roi .sensitivity-readout strong{ color: var(--ink); font-weight: 800; }

  #turner-roi .result{
    background: var(--result-bg);
    border: 1.5px solid var(--result-border);
    border-radius: 12px;
    padding: 24px 22px;
    margin-bottom: 20px;
  }

  #turner-roi .result-label{
    font-size: clamp(14px, 1.1vw, 17px);
    font-weight: 800;
    text-transform: uppercase; letter-spacing: 1.8px;
    color: var(--ink-soft); margin-bottom: 10px;
  }

  #turner-roi .result-headline{
    font-size: clamp(40px, 6vw, 84px);
    font-weight: 900;
    line-height: 0.95; color: var(--ink);
    margin-bottom: 10px;
    letter-spacing: -2px;
  }

  #turner-roi .result-context{
    font-size: clamp(16px, 1.3vw, 20px);
    color: var(--ink-soft);
    line-height: 1.45;
    font-weight: 500;
  }

  #turner-roi .recap{
    margin-bottom: 20px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
  }

  #turner-roi .recap-chip{
    background: var(--line-soft);
    border-radius: 999px;
    padding: 10px 18px;
    font-size: clamp(14px, 1.1vw, 17px);
    font-weight: 700;
    color: var(--ink);
    white-space: nowrap;
  }

  #turner-roi .recap-chip .chip-key{
    color: var(--ink-mute);
    font-weight: 600;
    margin-right: 6px;
  }

  #turner-roi .breakdown{
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px; margin-bottom: 28px;
  }

  #turner-roi .stat{
    background: var(--line-soft);
    border-radius: 10px;
    padding: 18px 18px;
    transition: background-color 500ms ease-out;
  }

  #turner-roi .stat.flash{
    background-color: var(--turner-yellow);
    transition-duration: 0ms;
  }

  #turner-roi .stat-label{
    font-size: clamp(13px, 1vw, 16px);
    font-weight: 700;
    color: var(--ink-mute);
    text-transform: uppercase; letter-spacing: 0.8px;
    margin-bottom: 8px;
  }

  #turner-roi .stat-value{
    font-size: clamp(20px, 2.2vw, 32px);
    font-weight: 800; color: var(--ink);
    line-height: 1.1;
    letter-spacing: -0.5px;
  }

  #turner-roi .res-section{
    margin: 28px 0 14px;
  }

  #turner-roi .res-section-title{
    font-size: clamp(16px, 1.4vw, 22px);
    font-weight: 900;
    color: var(--ink); margin-bottom: 6px;
    text-transform: uppercase; letter-spacing: 1.4px;
  }

  #turner-roi .res-section-sub{
    font-size: clamp(15px, 1.2vw, 18px);
    color: var(--ink-soft);
    margin-bottom: 16px;
    font-weight: 500;
  }

  #turner-roi .payback-grid{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
    margin-bottom: 26px;
  }

  #turner-roi .payback-card{
    position: relative;
    padding: clamp(22px, 2.4vw, 32px) clamp(20px, 2.2vw, 28px);
    border-radius: 14px;
    border: 1.5px solid var(--line);
    background: white;
    display: flex;
    flex-direction: column;
    min-height: 240px;
  }

  #turner-roi .payback-card.phase-1{
    background: var(--line-soft);
    border-color: transparent;
  }

  #turner-roi .payback-card.phase-2{
    background: var(--turner-yellow);
    border: 3px solid var(--ink);
  }

  #turner-roi .payback-card.phase-2 .payback-eyebrow, #turner-roi .payback-card.phase-2 .payback-sub{
    color: rgba(10, 10, 10, 0.65);
  }

  #turner-roi .payback-card.phase-2 .payback-desc{
    color: var(--ink);
    font-weight: 600;
  }

  #turner-roi .payback-card.phase-3{
    background: var(--ink);
    color: white;
    border-color: var(--ink);
  }

  #turner-roi .phase-3-burst{
    position: absolute;
    inset: -60%;
    z-index: -1;
    border-radius: 50%;
    pointer-events: none;
    opacity: 0;
    transform: scale(0.25);
    background: repeating-conic-gradient(
      var(--turner-yellow) 0deg 4deg,
      transparent 4deg 18deg
    );
    -webkit-mask-image: radial-gradient(circle, transparent 32%, black 48%, black 80%, transparent 100%);
            mask-image: radial-gradient(circle, transparent 32%, black 48%, black 80%, transparent 100%);
    will-change: transform, opacity;
  }

  @keyframes phase3-burst {
    0%   { opacity: 0;    transform: scale(0.25) rotate(0deg); }
    20%  { opacity: 1;    transform: scale(0.7)  rotate(12deg); }
    55%  { opacity: 0.85; transform: scale(1.05) rotate(28deg); }
    100% { opacity: 0;    transform: scale(1.4)  rotate(45deg); }
  }

  #turner-roi .phase-3-burst.fire{
    animation: phase3-burst 1.05s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  }

  @keyframes phase3-card-pop {
    0%   { transform: scale(1); }
    18%  { transform: scale(1.025); }
    100% { transform: scale(1); }
  }

  #turner-roi .payback-card.phase-3.fire{
    animation: phase3-card-pop 0.9s cubic-bezier(0.34, 1.4, 0.64, 1) both;
  }

  #turner-roi .phase-3-trigger{
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    pointer-events: none;
    opacity: 0;
  }

  #turner-roi .payback-arrow{ display: none; }

  #turner-roi .payback-eyebrow{
    font-size: clamp(11px, 0.9vw, 13px);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1.4px;
    color: var(--ink-mute);
    margin-bottom: 10px;
  }

  #turner-roi .payback-card.phase-3 .payback-eyebrow{
    color: rgba(255,255,255,0.6);
  }

  #turner-roi .payback-label{
    font-size: clamp(16px, 1.3vw, 20px);
    font-weight: 900;
    color: var(--ink);
    margin-bottom: 16px;
    letter-spacing: -0.3px;
    text-transform: uppercase;
  }

  #turner-roi .payback-card.phase-3 .payback-label{ color: white; }

  #turner-roi .payback-amount{
    font-size: clamp(32px, 4.5vw, 60px);
    font-weight: 900;
    line-height: 0.95;
    letter-spacing: -2px;
    color: var(--ink);
    margin-bottom: 6px;
  }

  #turner-roi .payback-card.phase-3 .payback-amount{
    color: var(--turner-yellow);
    text-shadow: 0 2px 0 rgba(0,0,0,0.15);
  }

  #turner-roi .payback-sub{
    font-size: clamp(11px, 0.9vw, 13px);
    font-weight: 800;
    color: var(--ink-mute);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 16px;
  }

  #turner-roi .payback-card.phase-3 .payback-sub{
    color: rgba(255,255,255,0.7);
  }

  #turner-roi .payback-desc{
    font-size: clamp(14px, 1.1vw, 16px);
    color: var(--ink-soft);
    line-height: 1.45;
    margin-top: auto;
    font-weight: 500;
  }

  #turner-roi .payback-card.phase-3 .payback-desc{
    color: rgba(255,255,255,0.82);
  }

  @media (max-width: 800px) {
    #turner-roi .payback-grid{ grid-template-columns: 1fr; }
    #turner-roi .payback-arrow{ display: none; }
    #turner-roi .payback-card{ min-height: 0; }
  }

  #turner-roi .roi-summary{
    background: var(--ink); color: white;
    border-radius: 16px;
    padding: clamp(28px, 4vw, 56px) clamp(24px, 4vw, 56px);
    margin: 28px 0;
    text-align: center;
  }

  #turner-roi .roi-summary-label{
    font-size: clamp(13px, 1.05vw, 16px);
    font-weight: 800;
    color: rgba(255,255,255,0.75);
    text-transform: uppercase; letter-spacing: 1.8px;
    margin-bottom: 8px;
  }

  #turner-roi .roi-multiplier{
    font-size: clamp(64px, 10vw, 144px);
    font-weight: 900;
    line-height: 0.95;
    letter-spacing: -4px;
    margin-bottom: 10px;
    color: var(--turner-yellow);
    text-shadow: 0 2px 0 rgba(0,0,0,0.1);
  }

  #turner-roi .roi-summary-context{
    font-size: clamp(16px, 1.3vw, 20px);
    color: rgba(255,255,255,0.88);
    line-height: 1.45;
    max-width: 640px;
    margin: 0 auto;
    font-weight: 500;
  }

  #turner-roi .roi-compare{
    display: grid; grid-template-columns: 1fr 1fr;
    gap: 14px; margin-top: 22px;
    max-width: 640px;
    margin-left: auto;
    margin-right: auto;
    text-align: left;
  }

  #turner-roi .roi-compare-item{
    padding: 14px 16px;
    background: rgba(255,255,255,0.08);
    border-radius: 8px;
  }

  #turner-roi .roi-compare-label{
    font-size: clamp(12px, 0.95vw, 15px);
    font-weight: 700;
    color: rgba(255,255,255,0.75);
    text-transform: uppercase; letter-spacing: 0.8px;
    margin-bottom: 6px;
  }

  #turner-roi .roi-compare-value{
    font-size: clamp(22px, 2vw, 30px);
    font-weight: 900;
    color: white;
    letter-spacing: -0.5px;
  }

  #turner-roi .proof-grid{
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: 18px;
    margin-bottom: 22px;
  }

  #turner-roi .story{
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 0;
    overflow: hidden;
    background: white;
    display: flex;
    flex-direction: column;
  }

  #turner-roi .story-photo{
    height: 220px;
    background-color: #1a1a1a;
    background-image: linear-gradient(135deg, #1a1a1a 0%, #4a4a4a 100%);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    color: rgba(255,255,255,0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    position: relative;
  }

  #turner-roi .story-photo::before{
    content: '';
    position: absolute;
    inset: 0;
    background-image:
      repeating-linear-gradient(45deg, transparent 0, transparent 10px, rgba(255,255,255,0.04) 10px, rgba(255,255,255,0.04) 11px);
    pointer-events: none;
  }

  #turner-roi .story-photo.has-photo::before{ display: none; }
  #turner-roi .story-photo.has-photo{ color: transparent; overflow: hidden; }

  #turner-roi .story-photo-img{
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    animation: ken-burns 24s ease-in-out infinite alternate;
    will-change: transform;
  }

  @keyframes ken-burns {
    0%   { transform: scale(1.02) translate(0%, 0%); }
    100% { transform: scale(1.10) translate(-2%, 2%); }
  }

  #turner-roi .story-body{ padding: 22px 24px; flex: 1; display: flex; flex-direction: column; }

  #turner-roi .story-eyebrow{
    font-size: clamp(12px, 0.95vw, 14px);
    font-weight: 800;
    text-transform: uppercase; letter-spacing: 1.4px;
    color: var(--ink-mute); margin-bottom: 12px;
  }

  #turner-roi .story-quote{
    font-size: clamp(16px, 1.4vw, 22px);
    font-style: italic;
    color: var(--ink); line-height: 1.45;
    margin-bottom: 12px;
    flex: 1;
  }

  #turner-roi .story-attr{
    font-size: clamp(14px, 1.1vw, 17px);
    color: var(--ink-soft);
    font-weight: 500;
  }

  #turner-roi .story-attr strong{ color: var(--ink); font-weight: 800; }

  #turner-roi .story-note{
    font-size: clamp(12px, 0.95vw, 14px);
    color: var(--ink-mute);
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px dashed var(--line);
    font-weight: 500;
  }

  #turner-roi .trust-strip{
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
    align-content: start;
  }

  #turner-roi .trust-item{
    padding: 14px 16px;
    background: var(--line-soft);
    border-radius: 8px;
    display: flex; align-items: center; gap: 12px;
  }

  #turner-roi .trust-icon{
    width: 32px; height: 32px;
    background: var(--turner-yellow);
    color: var(--ink);
    border: 1.5px solid var(--ink);
    border-radius: 7px;
    display: grid; place-items: center;
    font-size: 16px; font-weight: 900;
    flex-shrink: 0;
  }

  #turner-roi .trust-text{
    font-size: clamp(14px, 1.15vw, 18px);
    line-height: 1.35;
    color: var(--ink); font-weight: 700;
  }

  #turner-roi .lead-form{
    margin-top: 28px;
    padding: clamp(28px, 4vw, 48px) clamp(24px, 4vw, 48px);
    background: var(--line-soft);
    border-radius: 14px;
    text-align: center;
  }

  #turner-roi .cta-box-title{
    font-size: clamp(20px, 2.4vw, 32px);
    font-weight: 900;
    line-height: 1.15;
    color: var(--ink);
    margin-bottom: 8px;
    letter-spacing: -0.5px;
  }

  #turner-roi .cta-box-sub{
    font-size: clamp(16px, 1.3vw, 20px);
    color: var(--ink-soft);
    margin-bottom: 22px;
    line-height: 1.45;
    max-width: 560px;
    margin-left: auto;
    margin-right: auto;
    font-weight: 500;
  }

  /* Heading centered; form left-aligned and width-capped for readability. */
  #turner-roi .lead-form .troi-avada-form{ text-align: left; max-width: 560px; margin: 22px auto 0; }

  #turner-roi .form-row{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
  }

  #turner-roi .thanks-icon{
    width: 56px; height: 56px;
    background: var(--ink); border-radius: 50%;
    display: grid; place-items: center;
    margin: 8px 0 18px;
    color: white;
    font-size: 28px; font-weight: 900;
  }

  #turner-roi .sticky-cta{
    position: fixed;
    bottom: 0; left: 0; right: 0;
    z-index: 100;
    background: var(--ink);
    color: white;
    padding: 12px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    transform: translateY(110%);
    transition: transform 350ms cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 -6px 24px rgba(0,0,0,0.22);
    pointer-events: none;
  }

  #turner-roi .sticky-cta.show{
    transform: translateY(0);
    pointer-events: auto;
  }

  #turner-roi .sticky-cta-text{
    display: flex;
    flex-direction: column;
    line-height: 1.2;
  }

  #turner-roi .sticky-cta-text strong{
    font-weight: 800;
    font-size: clamp(13px, 1.1vw, 16px);
    color: var(--turner-yellow);
    letter-spacing: 0.3px;
  }

  #turner-roi .sticky-cta-text span{
    color: rgba(255,255,255,0.7);
    font-size: clamp(11px, 0.9vw, 13px);
    font-weight: 500;
  }

  #turner-roi .sticky-cta-btn{
    background: var(--turner-yellow);
    color: var(--ink);
    border: 2px solid var(--ink);
    padding: 12px 22px;
    border-radius: 7px;
    font-weight: 900;
    font-size: clamp(12px, 1vw, 14px);
    letter-spacing: 0.7px;
    text-transform: uppercase;
    cursor: pointer;
    white-space: nowrap;
    font-family: inherit;
    box-shadow: 0 2px 0 0 var(--ink);
    transition: background 150ms, transform 80ms, box-shadow 80ms;
  }

  #turner-roi .sticky-cta-btn:hover{ background: var(--turner-yellow-deep); }
  #turner-roi .sticky-cta-btn:active{
    transform: translateY(1px);
    box-shadow: 0 1px 0 0 var(--ink);
  }

  @media (max-width: 520px) {
    #turner-roi .sticky-cta{ padding: 10px 14px; gap: 10px; }
    #turner-roi .sticky-cta-btn{ padding: 10px 14px; }
  }

  #turner-roi .foot{
    margin-top: 28px; text-align: center;
    font-size: clamp(12px, 0.9vw, 14px);
    color: var(--ink-mute);
    letter-spacing: 0.4px;
    font-weight: 500;
  }

  #turner-roi .foot a{ color: var(--ink-soft); text-decoration: none; }
  #turner-roi .foot a:hover{ text-decoration: underline; }

  @media (max-width: 900px){
    #turner-roi .breakdown{ grid-template-columns: 1fr 1fr; }
    #turner-roi .proof-grid{ grid-template-columns: 1fr; }
  }

  @media (max-width: 520px){
    #turner-roi .stage{ padding: 22px 16px 60px; }
    #turner-roi .card{ padding: 26px 20px; }
    #turner-roi .form-row, #turner-roi .breakdown, #turner-roi .timeline-phases, #turner-roi .roi-compare{
      grid-template-columns: 1fr;
    }
    #turner-roi .fleet-row, #turner-roi .fleet-header{
      grid-template-columns: 1fr 60px 100px 28px;
      gap: 6px;
    }
    #turner-roi .fleet-row .label{ font-size: 12px; }
    #turner-roi .fleet-row .label .micro{ display: none; }
    #turner-roi .story-photo{ height: 160px; }
  }

  /* ════════════════════════════════════════════════
     Host-page integration overrides
     Blend the calculator into the Avada page (no boxed card,
     transparent app background) and keep the sunburst contained.
     ════════════════════════════════════════════════ */
  #turner-roi { background: transparent; }
  #turner-roi .stage { padding-top: 0; }
  #turner-roi .card {
    background: transparent;
    border: none;
    box-shadow: none;
    border-radius: 0;
    padding: 0;
  }
  #turner-roi .brand { justify-content: flex-end; }
  /* phase-3 card must own a stacking context so the burst's negative
     z-index stays behind the card content but in front of the page. */
  #turner-roi .phase-3-card { position: relative; isolation: isolate; }

  /* ════════════════════════════════════════════════
     Embedded Avada lead form — match the calculator's
     own field design and fix the focus border (Avada's
     dynamic CSS otherwise removes the border on focus).
     ════════════════════════════════════════════════ */
  /* Default all form text to dark; force field-title <p>s (e.g. "Optional Text
     Updates") off white — Avada colors them with a specific rule. */
  #turner-roi .lead-form { color: var(--ink); }
  #turner-roi .lead-form p { color: var(--ink) !important; }

  /* Field-title labels (Your Name, Email, etc.) — bold uppercase. */
  #turner-roi .lead-form label {
    display: block;
    font-size: clamp(15px, 1.25vw, 18px);
    font-weight: 800;
    color: var(--ink);
    margin-bottom: 8px;
    text-transform: uppercase;
    letter-spacing: 0.8px;
  }

  /* Text inputs + textarea ONLY — never checkbox/radio/file. */
  #turner-roi .lead-form input[type="text"],
  #turner-roi .lead-form input[type="email"],
  #turner-roi .lead-form input[type="tel"],
  #turner-roi .lead-form input[type="number"],
  #turner-roi .lead-form textarea {
    width: 100%;
    height: auto !important;
    border: 1.5px solid var(--line) !important;
    border-radius: 8px !important;
    padding: 14px 16px !important;
    font-size: clamp(15px, 1.1vw, 17px);
    font-weight: 600;
    font-family: inherit;
    color: var(--ink) !important;
    background: #fff !important;
    transition: border-color 0.15s;
    box-shadow: none !important;
  }
  #turner-roi .lead-form input[type="text"]:focus,
  #turner-roi .lead-form input[type="email"]:focus,
  #turner-roi .lead-form input[type="tel"]:focus,
  #turner-roi .lead-form input[type="number"]:focus,
  #turner-roi .lead-form textarea:focus {
    outline: none;
    border-color: var(--ink) !important;
    box-shadow: none !important;
  }
  /* Select (e.g. "area closest to you") — Avada's default leaves the text flush
     against the left border. Match the text inputs' padding, with extra room on
     the right for the dropdown arrow. background-color only, so Avada's arrow
     (a background-image) is preserved. */
  #turner-roi .lead-form select {
    width: 100%;
    height: auto !important;
    border: 1.5px solid var(--line) !important;
    border-radius: 8px !important;
    padding: 14px 44px 14px 16px !important;
    font-size: clamp(15px, 1.1vw, 17px);
    font-weight: 600;
    font-family: inherit;
    color: var(--ink) !important;
    background-color: #fff !important;
    transition: border-color 0.15s;
    box-shadow: none !important;
  }
  #turner-roi .lead-form select:focus {
    outline: none;
    border-color: var(--ink) !important;
    box-shadow: none !important;
  }
  /* Placeholder state ("Select An Area") reads grey like the other fields'
     placeholders; switches to dark ink once a real area is chosen. The field is
     required with a value="" placeholder option, so :invalid == not-yet-chosen. */
  #turner-roi .lead-form select:invalid { color: var(--ink-mute) !important; }

  #turner-roi .lead-form .fusion-form-field { margin-bottom: 18px; }

  /* Phone (icon'd input): pad the text so it clears the leading icon. */
  #turner-roi .lead-form .fusion-form-input-with-icon { position: relative; }
  #turner-roi .lead-form .fusion-form-input-with-icon .awb-form-icon {
    position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
    z-index: 2; color: var(--ink-mute); pointer-events: none;
  }
  #turner-roi .lead-form .fusion-form-input-with-icon input:not([type="file"]) { padding-left: 46px !important; }

  /* Consent checkbox: small box beside a normal-case, readable label. */
  #turner-roi .lead-form .fusion-form-checkbox { display: flex; align-items: flex-start; gap: 10px; }
  #turner-roi .lead-form input[type="checkbox"],
  #turner-roi .lead-form input[type="radio"] {
    position: static !important;                 /* Avada absolutely-positions it → overlaps the label */
    -webkit-appearance: auto !important;
    appearance: auto !important;                 /* restore native box so the checked state shows */
    accent-color: var(--ink) !important;         /* dark checked state — stays high-contrast on the light box */
    width: 18px !important; height: 18px !important; min-width: 18px;
    margin: 2px 0 0 !important; padding: 0 !important; flex-shrink: 0;
    background: #fff !important; opacity: 1 !important;
  }
  #turner-roi .lead-form .fusion-form-checkbox label {
    display: inline; margin: 0; font-weight: 500;
    text-transform: none; letter-spacing: 0;
    font-size: clamp(13px, 1vw, 15px); color: var(--ink-soft); line-height: 1.45;
  }
  /* Hide Avada's custom checkbox box (label::before) — we use the native input. */
  #turner-roi .lead-form .fusion-form-checkbox label::before,
  #turner-roi .lead-form .fusion-form-checkbox label::after { content: none !important; display: none !important; }

  /* Upload: keep label + help icon on one line; dropzone on its own line below. */
  #turner-roi .lead-form .fusion-form-upload-field > label { display: inline; }
  #turner-roi .lead-form .fusion-form-tooltip { display: inline-block; vertical-align: middle; margin-left: 6px; }
  #turner-roi .lead-form .fusion-form-upload-field .fusion-form-input-with-icon { display: block; margin-top: 12px; }

  /* Links readable on the light box (Terms / Privacy). */
  #turner-roi .lead-form a:not(.fusion-button) { color: var(--ink); text-decoration: underline; }
  #turner-roi .lead-form a:not(.fusion-button):hover { color: var(--ink-soft); }

  /* Submit: a real, prominent CTA button (Avada renders it with 0 padding). */
  #turner-roi .lead-form .form-form-submit {
    display: inline-flex; align-items: center; justify-content: center;
    width: 100%;
    margin-top: 8px;
    padding: 16px 28px !important;
    font-size: clamp(16px, 1.3vw, 19px) !important;
    font-weight: 800 !important;
    border-radius: 10px !important;
    background-color: var(--turner-yellow) !important;
    background-image: none !important;
    color: var(--ink) !important;
    border: none !important;
  }

  /* Button hover: high-contrast dark fill instead of Avada's washed-out hover. */
  #turner-roi .lead-form .fusion-button:hover {
    background-color: var(--ink) !important;
    background-image: none !important;
    color: #fff !important;
    border-color: var(--ink) !important;
  }

  /* ════════════════════════════════════════════════
     Touch-friendly quantity stepper (replaces the tiny
     native number-spinner arrows on the fleet rows).
     ════════════════════════════════════════════════ */
  #turner-roi .fleet-row, #turner-roi .fleet-header { grid-template-columns: 1.4fr 124px 1fr 34px; }
  #turner-roi .qty-stepper {
    display: flex;
    align-items: stretch;
    border: 1.5px solid var(--line);
    border-radius: 8px;
    overflow: hidden;
    background: #fff;
  }
  #turner-roi .qty-stepper input[type="number"] {
    width: 100%;
    min-width: 0;
    text-align: center;
    border: none !important;
    border-radius: 0 !important;
    padding: 14px 2px !important;
    -moz-appearance: textfield;
    appearance: textfield;
  }
  #turner-roi .qty-stepper input[type="number"]::-webkit-inner-spin-button,
  #turner-roi .qty-stepper input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
  }
  #turner-roi .qty-btn {
    flex: 0 0 40px;
    border: none;
    background: var(--bg);
    color: var(--ink);
    font-size: 24px;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
    touch-action: manipulation;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s;
  }
  #turner-roi .qty-btn:hover,
  #turner-roi .qty-btn:active { background: var(--turner-yellow); }

  @media (max-width: 520px) {
    #turner-roi .fleet-row, #turner-roi .fleet-header { grid-template-columns: 1fr 108px 84px 30px; }
    #turner-roi .qty-btn { flex: 0 0 34px; font-size: 21px; }
  }

  /* Mobile: stack each fleet row so the vehicle dropdown gets the full width and
     its name is readable. Qty + price + remove sit on a second line, each with a
     small inline label. The top column header is hidden in favor of these. */
  @media (max-width: 520px) {
    #turner-roi .fleet-header { display: none; }
    #turner-roi .fleet-inline-label { display: block; }
    #turner-roi .fleet-row {
      grid-template-columns: 1.4fr 1fr 34px;
      grid-template-areas:
        "vehL  vehL    vehL"
        "veh   veh     veh"
        "qtyL  priceL  ."
        "qty   price   rm";
      column-gap: 8px;
      row-gap: 4px;
      align-items: center;
      margin-bottom: 18px;
    }
    #turner-roi .fleet-row .fl-veh            { grid-area: vehL; }
    #turner-roi .fleet-row > select.fleet-type { grid-area: veh; }
    #turner-roi .fleet-row .fl-qty            { grid-area: qtyL; }
    #turner-roi .fleet-row .qty-stepper       { grid-area: qty; }
    #turner-roi .fleet-row .fl-price          { grid-area: priceL; }
    #turner-roi .fleet-row .price-wrap        { grid-area: price; }
    #turner-roi .fleet-row .remove-btn        { grid-area: rm; justify-self: center; }
  }

  /* ════════════════════════════════════════════════
     Proof — one full-width testimonial, or two side-by-side
     ════════════════════════════════════════════════ */
  #turner-roi .proof-grid { grid-template-columns: 1fr; }
  #turner-roi .proof-grid.two-up { grid-template-columns: 1fr 1fr; }
  /* Single full-width card reads as photo-left / quote-right so it isn't too tall. */
  #turner-roi .proof-grid:not(.two-up) .story { flex-direction: row; }
  #turner-roi .proof-grid:not(.two-up) .story-photo { flex: 0 0 46%; width: 46%; height: auto; min-height: 280px; }
  #turner-roi .proof-grid:not(.two-up) .story-body { justify-content: center; }
  @media (max-width: 640px) {
    #turner-roi .proof-grid.two-up { grid-template-columns: 1fr; }
    #turner-roi .proof-grid:not(.two-up) .story { flex-direction: column; }
    #turner-roi .proof-grid:not(.two-up) .story-photo { flex: none; width: auto; height: 200px; min-height: 0; }
  }
  /* Honest tag on representative (non-customer) wrap photos */
  #turner-roi .story-photo-tag {
    position: absolute; left: 10px; bottom: 10px; z-index: 2;
    background: rgba(10,10,10,0.78); color: #fff;
    font-size: 11px; font-weight: 700; letter-spacing: 0.5px;
    padding: 4px 9px; border-radius: 6px; text-transform: uppercase;
  }
  /* photo-only card uses a descriptive line, not an italic testimonial quote */
  #turner-roi .story--photo .story-quote { font-style: normal; font-weight: 600; }

  /* ════════════════════════════════════════════════
     Form submit notices — clean success / error banners
     (overrides Avada's default alert: no uppercase, spaced icon, soft box)
     ════════════════════════════════════════════════ */
  /* NOTE: never set `display` on .fusion-form-response — Avada toggles it
     none/block to show the right notice on submit. Forcing it shows both. */
  #turner-roi .fusion-form-response {
    position: relative;
    margin-top: 18px;
    padding: 15px 46px 15px 18px !important;
    border: none !important;
    border-radius: 12px !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    line-height: 1.45;
    font-size: clamp(15px, 1.1vw, 17px);
    box-shadow: 0 1px 3px rgba(10, 10, 10, 0.06);
  }
  #turner-roi .fusion-form-response .fusion-alert-content-wrapper {
    display: flex; align-items: center; gap: 12px; margin: 0;
  }
  #turner-roi .fusion-form-response .alert-icon {
    flex: 0 0 auto; margin: 0; font-size: 22px; line-height: 1;
  }
  #turner-roi .fusion-form-response .fusion-alert-content {
    text-transform: none !important; letter-spacing: 0 !important;
    font-weight: 600; color: inherit;
  }
  #turner-roi .fusion-form-response .close {
    position: absolute; top: 50%; right: 12px; transform: translateY(-50%);
    border: none !important; background: none !important; box-shadow: none !important;
    opacity: 0.45; font-size: 20px; line-height: 1; padding: 0; margin: 0;
    width: auto; height: auto; cursor: pointer; color: inherit;
    transition: opacity 0.15s ease;
  }
  #turner-roi .fusion-form-response .close:hover { opacity: 1; }

  #turner-roi .fusion-form-response-success {
    background: #edf7ed !important;
    border-left: 4px solid #2e7d32 !important;
    color: var(--ink) !important;
  }
  #turner-roi .fusion-form-response-success .alert-icon,
  #turner-roi .fusion-form-response-success .alert-icon i { color: #2e7d32 !important; }

  #turner-roi .fusion-form-response-error {
    background: #fdecec !important;
    border-left: 4px solid #c0392b !important;
    color: var(--ink) !important;
  }
  #turner-roi .fusion-form-response-error .alert-icon,
  #turner-roi .fusion-form-response-error .alert-icon i { color: #c0392b !important; }