/*
 * Modernised sell form styling with a cleaner palette. Colour variables are
 * scoped to the wrapper so navigation buttons can inherit them.
 */

/* Wrapper provides a soft gradient backdrop and breathing room */
.sf-form-wrap{
  --primary-color:#1a377b;
  --secondary-color:#3aa0ff;
  --brand-yellow:#ffb800;
  --text-color:#1f2937;
  --light-bg:#ffffff;
  --bg-color:#e2e8f0;
  --icon-color:#64748b;

  /* Reduce top padding to tighten space above the progress bar */
  padding:20px 20px 100px;
  background:#fafafa;
}

.sf-form {
  max-width:600px;
  margin:0 auto;
  font-family: var(--font-body);
}

/* Banner mode overrides */
.sf-form-wrap.sf-form-wrap--banner {
  padding: 0;
  background: none;
}
.sf-form.sf-form--banner {
  max-width: 1000px;
}

/* Function: gives the post-entry sell wizard the same calm canvas as the finance form. */
.sf-form-wrap.sf-form-wrap--flow{
  --flow-navy:var(--header-top,#1a377b);
  --flow-ink:#111827;
  --flow-muted:#6b7280;
  --flow-line:#d1d5db;
  --flow-line-soft:rgba(15,23,42,.055);
  --flow-soft:#f3f6fb;
  --flow-yellow:#FBB649;
  padding:0;
  background:none;
}

/* Function: centers the post-entry wizard at the same readable measure as the finance flow. */
.sf-flow-shell{
  width:min(100%,640px);
  margin:0 auto;
}

/* Function: lets the form inherit the flow shell width instead of the old sell-card width. */
.sf-form.sf-form--flow{
  max-width:none;
  width:100%;
}

/* Function: mirrors the finance selected-vehicle summary card after the sell entry step. */
.sf-flow-summary{
  width:100%;
  margin:0 auto 1.35rem;
  overflow:hidden;
  color:var(--flow-navy);
  background:#ffffff;
  border:1px solid #eef1f5;
  border-radius:16px;
  box-shadow:0 14px 36px -24px rgba(15,23,42,.28);
}

/* Function: aligns the summary icon, vehicle details, and edit action in one compact row. */
.sf-flow-summary__content{
  display:flex;
  align-items:center;
  gap:1.15rem;
  padding:1.25rem 1.55rem;
}

/* Function: frames the selected vehicle icon without adding decorative weight. */
.sf-flow-summary__icon{
  display:flex;
  align-items:center;
  justify-content:center;
  flex:0 0 56px;
  width:56px;
  height:56px;
  color:var(--flow-navy);
  background:#f8fafc;
  border:1px solid #edf1f6;
  border-radius:14px;
}

/* Function: keeps the summary icon visually balanced with the finance vehicle art. */
.sf-flow-summary__icon svg{
  width:30px;
  height:30px;
}

/* Function: stacks the selected vehicle title and trim/location metadata. */
.sf-flow-summary__details{
  display:flex;
  flex:1 1 0; /* Function: lets the vehicle copy shrink before the edit action wraps. */
  min-width:0;
  flex-direction:column;
  gap:.2rem;
}

/* Function: gives the selected vehicle title the same navy emphasis as finance summaries. */
.sf-flow-summary__details strong{
  overflow:hidden;
  color:var(--flow-navy);
  font-size:1.1rem;
  font-weight:800;
  line-height:1.2;
  text-overflow:ellipsis;
  white-space:nowrap;
}

/* Function: keeps trim and postal context compact below the vehicle title. */
.sf-flow-summary__details span{
  overflow:hidden;
  color:var(--flow-muted);
  font-size:.9rem;
  font-weight:500;
  line-height:1.25;
  text-overflow:ellipsis;
  white-space:nowrap;
}

/* Function: makes the summary edit action match the finance form's quiet text button. */
.sf-flow-summary__edit{
  flex:0 0 auto; /* Function: reserves a stable action slot so Edit stays beside the vehicle copy. */
  margin-left:auto;
  padding:.35rem .75rem;
  color:#4b5563;
  background:transparent;
  border:0;
  border-radius:6px;
  font:700 .9rem var(--font-body);
  white-space:nowrap; /* Function: prevents the edit label from splitting or dropping under the summary text. */
  cursor:pointer;
  transition:background .18s ease,color .18s ease;
}

/* Function: provides a subtle hover affordance for editing the selected vehicle. */
.sf-flow-summary__edit:hover{
  color:var(--flow-navy);
  background:#f3f4f6;
}

/* Function: separates progress from the summary details with finance-style spacing. */
.sf-flow-progress{
  padding:.9rem 1.55rem 1.1rem;
  border-top:1px solid #f0f2f5;
}

/* Function: aligns the section label and the progress label above the track. */
.sf-flow-progress__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: .65rem;
}

/* Function: labels the sell wizard progress in the same compact voice as finance. */
.sf-flow-progress__label{
  margin:0;
  color:var(--flow-muted);
  font-size:.85rem;
  font-weight:600;
  line-height:1.2;
}

/* Function: provides the accessible progressbar track. */
.sf-flow-progress__track{
  height:6px;
  overflow:hidden;
  background:#e5e7eb;
  border-radius:99px;
}

/* Function: fills the progress track with the shared DriveHaus navy. */
.sf-flow-progress__bar{
  display:block;
  height:100%;
  width:100%;
  background:var(--flow-navy);
  border-radius:inherit;
  transform:scaleX(var(--dh-progress-ratio, 0));
  transform-origin:left center;
  transition:transform .45s cubic-bezier(.4,0,.2,1);
}

/* Function: keeps the post-entry step unframed like the finance form shell. */
.sf-flow-card{
  width:100%;
  padding:0;
  background:transparent;
  border:0;
  border-radius:0;
  box-shadow:none;
}

/* Function: standardizes step titles, helper copy, and icons across sell steps. */
.sf-flow-step-header{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:.55rem;
  margin:0 auto 1.2rem;
  text-align:center;
}

/* Function: keeps post-widget headings polished without changing the entry widget typography. */
.sf-form-wrap--flow .sf-card-title{
  font-size:clamp(1.55rem,3.4vw,1.95rem);
  line-height:1.15;
}

/* Function: removes the empty helper gap from post-widget steps that intentionally have no helper copy. */
.sf-form-wrap--flow .sf-card-subtitle:empty{
  display:none;
}

/* Function: keeps helper copy tucked near post-widget titles instead of floating between sections. */
.sf-form-wrap--flow .sf-card-subtitle{
  max-width:34rem;
  font-size:.96rem;
  line-height:1.45;
}

/* Function: renders the small section label above each post-entry step. */
.sf-flow-eyebrow{
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  color:#1d4ed8;
  font-size:.74rem;
  font-weight:800;
  letter-spacing:var(--tracking-label);
  line-height:1;
  text-transform:uppercase;
}

/* Function: places the step icon in a soft navy chip. */
.sf-flow-eyebrow__icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:24px;
  height:24px;
  color:var(--flow-navy);
  background:#eef4ff;
  border-radius:999px;
}

/* Function: keeps the eyebrow icon from overpowering the label. */
.sf-flow-eyebrow__icon svg{
  width:15px;
  height:15px;
}

/* Function: lets the animated step body stack cleanly under the shared header. */
.sf-flow-step-body{
  display:grid;
  gap:1.45rem;
}

/* Function: replaces the old fixed navigation with in-card finance-style actions. */
.sf-flow-actions{
  display:grid;
  grid-template-columns:160px 1fr;
  gap:clamp(.9rem,3.2vw,1.7rem);
  margin-top:clamp(1.85rem,4.5vw,2.7rem);
}

/* Function: keeps the post-entry disclaimer near the card instead of the viewport edge. */
.sf-flow-disclaimer{
  margin-top:1rem;
}

/* Card container that holds a step of the form. Animated via Framer Motion */
.sf-card{
  background:var(--light-bg);
  padding:24px;
  border-radius:16px;
  box-shadow:0 12px 32px rgba(0,0,0,0.08);
}

.sf-card.sf-card-slider,
.sf-card.sf-field-slider,
.sf-card.sf-card-slider.sf-field-slider{
  background:transparent;
  padding:0;
  margin:0;
  box-shadow:none;
}

/* Keep the details card in a single column and prevent content overflow */
.sf-card.sf-card-details{
  display:grid;
  grid-template-columns:1fr;
  gap:clamp(24px,4vw,32px);
  padding:clamp(28px,5vw,40px);
  border-radius:28px;
  box-shadow:0 28px 64px rgba(15,23,42,0.16);
  overflow-wrap:break-word;
}

.sf-card-details-header{
  display:flex;
  flex-direction:column;
  gap:clamp(8px,1.6vw,14px);
  grid-column:1 / -1;
}

.sf-card-eyebrow{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-size:0.75rem;
  font-weight:600;
  letter-spacing:var(--tracking-label);
  text-transform:uppercase;
  color:#1d4ed8;
}

.sf-card-eyebrow-icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:24px;
  height:24px;
  border-radius:999px;
  background:rgba(37,99,235,0.14);
  color:#1d4ed8;
}

.sf-card-eyebrow-icon svg{
  width:16px;
  height:16px;
}

.sf-card-title{
  margin:0;
  font-family:var(--font-display);
  font-size:clamp(1.6rem,4vw,2.1rem);
  line-height:var(--leading-heading);
  font-weight:700;
  letter-spacing:var(--tracking-heading);
  color:#0f172a;
}

.sf-card-subtitle{
  margin:0;
  font-size:1rem;
  line-height:1.5;
  color:#475569;
}


.sf-card-details-stack{
  display:flex;
  flex-direction:column;
  gap:clamp(18px,2.7vw,24px);
}

.sf-card-details-stack > .sf-field{
  margin-bottom:0;
}

.sf-visually-hidden{
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0 0 0 0);
  white-space:nowrap;
  border:0;
}

.sf-field{
  position:relative;
  margin-bottom:20px;
  transition:background .25s,box-shadow .25s;
  border-radius:12px;
}
.sf-field.has-error{
  background:rgba(254,226,226,.55);
  box-shadow:0 0 0 1px rgba(220,38,38,.25),0 12px 22px rgba(220,38,38,.08);
}
.sf-field.has-error .sf-label,
.sf-field.has-error .sf-label-icon{ color:#b91c1c; }

.sf-card.sf-card-slider.has-error{
  background:rgba(254,226,226,.55);
  border-color:rgba(220,38,38,.35);
  box-shadow:0 0 0 1px rgba(220,38,38,.25),0 12px 22px rgba(220,38,38,.08);
}

.sf-card.sf-card-slider.has-error .sf-label,
.sf-card.sf-card-slider.has-error .sf-label-icon{
  color:#b91c1c;
}

.sf-error-text{
  margin-top:6px;
  font-size:0.85rem;
  font-weight:600;
  color:#b91c1c;
}

.sf-field-note{
  margin-top:8px;
  font-size:0.85rem;
  color:#475569;
}

/* simple toggle between VIN and vehicle details */
.sf-tab-toggle{
  display:flex;
  background:var(--light-bg);
  border:1px solid #cbd5e1;
  border-radius:9999px;
  overflow:hidden;
  margin-bottom:20px;
}
.sf-tab-toggle button{
  flex:1;
  padding:8px 12px;
  border:none;
  background:none;
  cursor:pointer;
  font-weight:600;
  color:#64748b;
}
.sf-tab-toggle button.active{
  background:var(--secondary-color);
  color:#fff;
}

/* vehicle preview illustration that mirrors the form styling */
.sf-illustration{
  position:relative;
  margin-bottom:20px;
  border-radius:16px;
  border:1px solid rgba(148,163,184,.35);
  background:transparent;
  overflow:hidden;
  min-height:180px;
  display:flex;
  align-items:center;
  justify-content:center;
}

.sf-illustration img{
  position:absolute;
  inset:-10px;
  width:calc(100% + 20px);
  height:calc(100% + 20px);
  object-fit:cover;
  display:block;
}

.sf-illustration-status{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  font-weight:600;
  color:#475569;
  padding:16px;
  text-align:center;
}

.sf-illustration-status.sf-error{
  color:#b91c1c;
}

.sf-illustration-spinner{
  display:inline-block;
  width:24px;
  height:24px;
  border-radius:50%;
  border:3px solid rgba(148,163,184,.4);
  border-top-color:#3b82f6;
  animation:sf-spin .7s linear infinite;
}

/* mileage slider styling */
.sf-field-header{
  display:flex;
  flex-direction:column;
  gap:6px;
  margin-bottom:18px;
}

.sf-field-header .sf-label{
  margin-bottom:0;
}

.sf-field-subhead{
  font-size:0.85rem;
  color:#475569;
  font-weight:500;
}

@media (min-width:640px){
  .sf-field-header{ flex-direction:row; align-items:center; justify-content:space-between; }
}

.sf-field-slider{
  display:flex;
  flex-direction:column;
  gap:16px;
  background:transparent;
  padding:0;
  margin:0;
  box-shadow:none;
}

.sf-field-slider .sf-mileage-input-wrap{
  margin:0;
}

.sf-field-slider .sf-range{
  width:100%;
}

.sf-range{
  flex:1;
  appearance:none;
  height:12px;
  border-radius:999px;
  background:linear-gradient(90deg,#1a377b 0%,#e2e8f0 0%);
  transition:box-shadow .25s ease, background .25s ease;
}

.sf-range:focus-visible{
  outline:none;
  box-shadow:0 0 0 4px rgba(26,55,123,.24);
}

.sf-range::-webkit-slider-runnable-track,
.sf-range::-moz-range-track{
  height:10px;
  border-radius:999px;
  background:transparent;
}

.sf-range::-webkit-slider-thumb{
  appearance:none;
  width:26px;
  height:26px;
  border-radius:50%;
  background:#fff;
  border:2px solid #1a377b;
  box-shadow:0 4px 10px rgba(26,55,123,.2);
  cursor:pointer;
  transition:transform .2s cubic-bezier(0.16, 1, 0.3, 1), box-shadow .2s ease, border-color .2s ease;
  margin-top:-7px;
}

.sf-range:active::-webkit-slider-thumb{
  transform:scale(1.15);
  box-shadow:0 8px 20px rgba(26,55,123,.3);
}

.sf-range:hover::-webkit-slider-thumb{
  transform:scale(1.05);
}

.sf-range::-moz-range-thumb{
  width:26px;
  height:26px;
  border-radius:50%;
  border:2px solid #1a377b;
  background:#fff;
  box-shadow:0 4px 10px rgba(26,55,123,.2);
  cursor:pointer;
  transition:transform .2s cubic-bezier(0.16, 1, 0.3, 1), box-shadow .2s ease, border-color .2s ease;
}

.sf-range:active::-moz-range-thumb{
  transform:scale(1.15);
  box-shadow:0 8px 20px rgba(26,55,123,.3);
}

.sf-range:hover::-moz-range-thumb{
  transform:scale(1.05);
}

.sf-range-scale{
  display:flex;
  justify-content:space-between;
  padding:0 4px;
  font-size:12px;
  font-weight:600;
  color:#475569;
  letter-spacing:.02em;
  text-transform:uppercase;
}

.sf-range-scale span:nth-child(2){
  letter-spacing:0.06em;
}

.sf-mileage-input-wrap{
  display:flex;
  align-items:center;
  gap:12px;
  padding:12px 8px; /* Reduced from 16px */
  border-radius:14px;
  background:#f8fbff;
  border:1px solid rgba(31,59,117,.18);
  box-shadow:none;
  width:100%;
  transition:border-color .2s ease, box-shadow .2s ease, background .2s ease;
}

.sf-mileage-input{
  max-width:none;
  flex:1;
  width:100%;
  padding:0;
  margin:0;
  border:none;
  background:transparent;
  font-size:1.5rem;
  font-weight:700;
  color:#0f172a;
  letter-spacing:-0.01em;
  font-variant-numeric:tabular-nums;
}

.sf-mileage-input:focus{
  border:none;
  box-shadow:none;
  outline:none;
}

.sf-mileage-input-wrap:focus-within{
  border-color:rgba(37,99,235,.65);
  background:#fff;
  box-shadow:0 0 0 4px rgba(37,99,235,.12);
}

.sf-mileage-input::placeholder{
  color:#94a3b8;
  font-weight:500;
}

.sf-mileage-suffix{
  font-weight:700;
  color:#1e293b;
  letter-spacing:0.04em;
}

.sf-mileage-hint{
  font-size:0.82rem;
  color:#475569;
}

.sf-field-slider .sf-range-scale{
  margin-top:0;
}

.sf-field-slider.has-error .sf-mileage-input-wrap{
  border-color:rgba(220,38,38,.75);
  box-shadow:0 0 0 4px rgba(220,38,38,.12);
}

/* segmented condition radios */
.sf-field-pill .sf-label{
  margin-bottom:10px;
}

.sf-pill-group{
  display:flex;
  gap:8px;
  background:rgba(226,232,240,.45);
  border-radius:999px;
  border:1px solid rgba(148,163,184,.45);
  padding:6px;
  transition:box-shadow .25s ease, border-color .25s ease;
}

.sf-pill-group:focus-within{
  box-shadow:0 0 0 4px rgba(37,99,235,.18);
  border-color:rgba(37,99,235,.35);
}

.sf-pill-option{
  flex:1;
  position:relative;
  cursor:pointer;
  display:flex;
}

.sf-pill-option input{
  position:absolute;
  inset:0;
  opacity:0;
  pointer-events:none;
}

.sf-pill-option .sf-pill-text{
  flex:1;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:999px;
  padding:10px 0;
  font-weight:600;
  color:#475569;
  transition:background .25s ease, color .25s ease, box-shadow .25s ease, transform .25s ease;
}

.sf-pill-option:hover .sf-pill-text{
  background:rgba(59,130,246,.14);
}

.sf-pill-option.active .sf-pill-text{
  background:linear-gradient(180deg,#60a5fa,#2563eb);
  color:#fff;
  box-shadow:0 10px 22px rgba(59,130,246,.28);
  transform:translateY(-1px);
}

.sf-pill-option input:focus-visible + .sf-pill-text{
  box-shadow:0 0 0 3px rgba(59,130,246,.4);
}

/* subtle hover and focus styles to lift active inputs */
.sf-field:hover{background:rgba(226,232,240,.35);}
.sf-field:focus-within{background:rgba(255,255,255,.9);box-shadow:0 4px 14px rgba(58,160,255,.15);}

.sf-label{
  display:flex;
  align-items:center;
  gap:8px;
  font-weight:600;
  text-transform:uppercase;
  font-size:14px;
  letter-spacing:0.01em;
  margin-bottom:6px;
  color:var(--text-color);
}

.sf-label-icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:24px;
  height:24px;
  border-radius:6px;
  background:transparent;
  color:var(--icon-color);
  box-shadow:none;
  transition:color .3s;
}

.sf-label-icon svg{
  width:18px;
  height:18px;
}

.sf-field:focus-within .sf-label-icon{
  color:var(--primary-color);
}

.sf-input,
.sf-select,
.sf-textarea{
  width:100%;
  padding:14px 16px;
  border:1px solid #cbd5e1;
  border-radius:12px;
  font-size:16px;
  box-sizing:border-box;
  transition:border-color .2s,box-shadow .2s,transform .1s;
}

.sf-input:focus,
.sf-select:focus,
.sf-textarea:focus{
  outline:none;
  border-color:var(--secondary-color);
  box-shadow:0 0 0 4px rgba(58,160,255,.25);
  transform:translateY(-1px);
}

.sf-suggestions{
  position:absolute;
  z-index:10;
  width:100%;
  background:var(--light-bg);
  border:1px solid #cbd5e1;
  border-radius:12px;
  box-shadow:0 4px 14px rgba(58,160,255,.15);
  max-height:200px;
  overflow-y:auto;
  scrollbar-color:#94a3b8 transparent; /* Function: keeps the sell dropdown scrollbar subtle instead of the browser default slab. */
  scrollbar-width:thin; /* Function: narrows Firefox scrollbars so they stay inside the dropdown edge. */
  top:100%;
  left:0;
}

/* Function: gives Chromium and Safari sell dropdowns a slim in-panel scrollbar. */
.sf-suggestions::-webkit-scrollbar{
  width:10px; /* Function: keeps the scrollbar thumb narrow enough to avoid jutting out visually. */
}

/* Function: removes the bright default scrollbar gutter from sell dropdowns. */
.sf-suggestions::-webkit-scrollbar-track{
  background:transparent; /* Function: lets the dropdown surface own the scrollbar track color. */
}

/* Function: rounds and insets the sell dropdown scrollbar thumb. */
.sf-suggestions::-webkit-scrollbar-thumb{
  background:#94a3b8; /* Function: uses a muted slate thumb that stays visible on the light menu. */
  border:3px solid #ffffff; /* Function: creates an inset thumb without a separate protruding rail. */
  border-radius:999px; /* Function: matches the rounded dropdown language. */
}

/* Function: slightly darkens the sell dropdown thumb while scrolling or hovering. */
.sf-suggestions::-webkit-scrollbar-thumb:hover{
  background:#64748b; /* Function: gives the custom scrollbar a clear hover affordance. */
}

.sf-suggestion-note{
  padding:10px 14px;
  font-size:14px;
  color:#475569;
}

.sf-suggestion-note.sf-error{
  color:#b91c1c;
}

.sf-suggestion-option{
  padding:10px 14px;
  cursor:pointer;
  display:flex;
  flex-direction:column;
  gap:2px;
  align-items:flex-start;
}

.sf-suggestion-option:hover,
.sf-suggestion-option.active{
  background:rgba(226,232,240,.35);
}

.sf-suggestion-title{
  font-weight:600;
  color:var(--text-color);
}

.sf-suggestion-subtitle{
  font-size:13px;
  color:#64748b;
}

.sf-spinner{
  position:absolute;
  right:12px;
  top:50%;
  width:16px;
  height:16px;
  margin-top:-8px;
  border:2px solid #cbd5e1;
  border-top-color:#334155;
  border-radius:50%;
  animation:sf-spin .6s linear infinite;
}

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

.sf-progress{
  position:relative;
  height:12px;
  background:var(--bg-color);
  border-radius:9999px;
  overflow:hidden;
  margin-bottom:16px;
}

.sf-progress-bar{
  position:relative;
  height:100%;
  background:linear-gradient(90deg,var(--brand-yellow),#f7a600);
  width:100%;
  transform:scaleX(var(--dh-progress-ratio,0));
  transform-origin:left center;
  transition:transform .5s cubic-bezier(.4,0,.2,1);
  box-shadow:0 0 8px rgba(255,184,0,.5);
}

.sf-progress-bar::after{
  content:none;
  display:none;
}

.sf-big-icon{
  display:flex;
  justify-content:space-between;
  margin:16px auto 16px;
  padding:8px 16px;
  border-radius:9999px;
  background:var(--light-bg);
  border:2px solid #cbd5e1;
}

.sf-big-icon-part{
  display:flex;
  flex:1;
  flex-direction:column;
  align-items:center;
  color:#94a3b8;
  cursor:pointer;
  transition:color .3s;
}

.sf-big-icon-part svg{
  width:24px;
  height:24px;
}

.sf-big-icon-part.active{
  color:var(--primary-color);
}


.sf-nav{
  display:flex;
  justify-content:space-between;
  margin-top:32px;
}

.sf-nav-panel{
  position:fixed;
  left:0;
  right:0;
  bottom:0;
  display:flex;
  justify-content:center;
  gap:16px;
  padding:16px;
  background:rgba(255,255,255,.3);
  backdrop-filter:blur(6px);
  border-top:1px solid #cbd5e1;
  box-shadow:0 -2px 10px rgba(0,0,0,0.05);
  z-index:1000;
}

.sf-nav-panel .sf-btn{
  flex:1;
  width:100%;
  max-width:320px;
}

.sf-offer-disclaimer{
  max-width:600px;
  margin:16px auto 0;
  font-size:0.82rem;
  line-height:1.5;
  color:#475569;
  text-align:center;
}

.sf-message-wrap .sf-offer-disclaimer{
  margin-top:12px;
}

@media (max-width:480px){
  .sf-nav-panel{
    justify-content:center;
  }

  .sf-nav-panel .sf-btn{
    max-width:none;
  }

  .sf-nav-panel .sf-btn:only-child{
    flex:0 0 auto;
    width:65vw;
    max-width:260px;
    min-width:160px;
  }
}

.sf-btn{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:16px 32px;
  border-radius:999px;
  font-weight:600;
  font-size:1rem;
  cursor:pointer;
  overflow:hidden;
  background-size:200% 100%;
  transition:transform .25s cubic-bezier(.34,1.56,.64,1),
             box-shadow .25s,
             background-position .45s;
}

.sf-btn::after{ /* Function: creates a compositor-friendly tap ripple. */
  content:""; /* Function: renders the pseudo-element. */
  position:absolute; /* Function: positions the ripple inside the button. */
  top:50%; /* Function: anchors the ripple vertically at center. */
  left:50%; /* Function: anchors the ripple horizontally at center. */
  width:100%; /* Function: keeps ripple geometry stable before scaling. */
  height:100%; /* Function: keeps ripple geometry stable before scaling. */
  background:rgba(255,255,255,.4); /* Function: gives the ripple visible feedback. */
  border-radius:50%; /* Function: keeps the ripple circular. */
  transform:translate(-50%,-50%) scale(0); /* Function: hides the ripple without animating layout dimensions. */
  opacity:0; /* Function: starts the ripple transparent. */
  transition:transform .5s,opacity .8s; /* Function: animates compositor-friendly properties only. */
} /* Function: ends the button ripple base state. */

.sf-btn:active::after{ /* Function: expands the tap ripple on press. */
  transform:translate(-50%,-50%) scale(2.2); /* Function: grows the ripple with transform instead of width or height. */
  opacity:1; /* Function: makes the press feedback visible. */
  transition:0s; /* Function: makes the active press feel immediate. */
} /* Function: ends the button ripple pressed state. */

.sf-btn:active{
  transform:scale(.95);
}

.sf-btn-primary{
  color:#fff;
  border:none;
  background-color:var(--brand-yellow,#ffb800);
  background-image:linear-gradient(90deg,var(--brand-yellow,#ffb800),#f7a600);
  background-size:100% 100%;
  box-shadow:0 4px 12px rgba(0,0,0,.15);
}

.sf-btn-primary:hover{
  transform:translateY(-2px);
  box-shadow:0 6px 16px rgba(0,0,0,.2);
}

.sf-btn-secondary{
  color:#1f2937;
  border:none;
  background-image:linear-gradient(90deg,#3aa0ff,#1a377b);
  box-shadow:0 4px 12px rgba(0,0,0,.08);
}

.sf-btn-secondary:hover{
  background-position:100% 0;
  box-shadow:0 8px 20px rgba(0,0,0,.15);
}

/* Function: removes the old hover wash from fields inside the finance-style sell flow. */
.sf-form-wrap--flow .sf-field:hover,
.sf-form-wrap--flow .sf-field:focus-within{
  background:transparent;
  box-shadow:none;
}

/* Function: stacks post-entry labels above controls for a calmer finance-like rhythm. */
.sf-form-wrap--flow .sf-field{
  display:grid;
  grid-template-columns:1fr;
  gap:.72rem;
  margin-bottom:1.35rem;
  border-radius:8px;
  background:transparent;
  padding:0;
  box-shadow:none;
  border:none;
  border-bottom:1px solid var(--flow-line-soft);
  padding-bottom:1.35rem;
}

.sf-form-wrap--flow .sf-field:last-child {
  border-bottom: none;
  padding-bottom: 0;
  margin-bottom: 0;
}

.sf-form-wrap--flow .sf-field.sf-field-pill {
  margin-bottom: 0;
}

.sf-form-wrap--flow .sf-field:hover{
  box-shadow:none;
}

/* Function: tones down validation surfaces while preserving clear error feedback. */
.sf-form-wrap--flow .sf-field.has-error,
.sf-form-wrap--flow .sf-card.sf-card-slider.has-error{
  background:#fff5f5;
  border-radius:12px;
  box-shadow:0 0 0 1px rgba(220,38,38,.22);
}

/* Function: aligns post-entry labels with the finance form's understated text style. */
.sf-form-wrap--flow .sf-label{
  margin:0 0 .18rem 0;
  font-family:var(--font-display, 'Sora', sans-serif);
  color:var(--flow-navy, #1a377b);
  font-size:clamp(1.08rem,2.25vw,1.28rem);
  font-weight:800;
  letter-spacing:normal;
  text-transform:none;
}

/* Function: softens label icons so form controls, not decoration, carry attention. */
.sf-form-wrap--flow .sf-label-icon{
  width:22px;
  height:22px;
  color:#64748b;
}

/* Function: gives post-entry text inputs the same white surface and navy focus as finance. */
.sf-form-wrap--flow .sf-input,
.sf-form-wrap--flow .sf-select,
.sf-form-wrap--flow .sf-textarea{
  min-height:52px;
  padding:0 1.5rem;
  color:var(--flow-navy);
  background:#ffffff;
  border:1px solid var(--flow-line);
  border-radius:8px;
  font:600 .96rem/1.25 var(--font-body);
  box-shadow:none;
  transition:border-color .18s ease,box-shadow .18s ease,background .18s ease;
}

/* Function: keeps textareas spacious without making the flow feel oversized. */
.sf-form-wrap--flow .sf-textarea{
  min-height:118px;
  padding:1rem 1.5rem;
  resize:vertical;
}

/* Function: matches the finance form's restrained navy focus ring. */
.sf-form-wrap--flow .sf-input:focus,
.sf-form-wrap--flow .sf-select:focus,
.sf-form-wrap--flow .sf-textarea:focus{
  border-color:var(--flow-navy);
  box-shadow:0 0 0 4px rgba(26,55,123,.12);
  transform:none;
}

/* Function: turns the final contact step into an icon-plus-input row instead of a stacked label field. */
.sf-form-wrap--flow .sf-field.sf-contact-field{
  display:grid; /* Function: places the contact icon beside the input field. */
  grid-template-columns:40px minmax(0,1fr); /* Function: keeps a fixed icon lane and a fluid input lane. */
  align-items:center; /* Function: vertically centers the icon against the input box. */
  column-gap:14px; /* Function: separates the icon from the input border. */
  row-gap:.45rem; /* Function: leaves room for validation text below the input. */
  border-bottom:none; /* Function: removes the divider line between final contact fields. */
  margin-bottom:.9rem;
  padding-bottom:0;
}

/* Function: draws the contact icon outside and to the left of the input border. */
.sf-form-wrap--flow .sf-contact-field__icon{
  display:inline-flex; /* Function: centers the SVG in the dedicated icon lane. */
  align-items:center; /* Function: vertically centers the icon artwork. */
  justify-content:center; /* Function: horizontally centers the icon artwork. */
  width:40px; /* Function: makes the icon lane stable across all contact rows. */
  height:52px; /* Function: matches the input height so the icon reads as beside the field. */
  color:#64748b; /* Function: matches the current muted contact icon tone. */
  background:#f8fafc;
  border:none;
  border-radius:12px;
}

/* Function: keeps contact SVGs aligned with the input text. */
.sf-form-wrap--flow .sf-contact-field__icon svg{
  width:22px; /* Function: matches the previous label icon size. */
  height:22px; /* Function: keeps contact icons square and crisp. */
}

/* Function: lets the contact input and its error message occupy the right-side field column. */
.sf-form-wrap--flow .sf-contact-field__control{
  min-width:0; /* Function: prevents long input values from widening the form. */
}

/* Function: uses the placeholder position as the visible field label for contact inputs. */
.sf-form-wrap--flow .sf-contact-field__input::placeholder{
  color:rgba(15,24,36,.46); /* Function: keeps the inside label in the same soft grey position as the prior examples. */
  opacity:1; /* Function: normalizes placeholder visibility across browsers. */
}

/* Function: aligns contact validation text under the input rather than under the icon. */
.sf-form-wrap--flow .sf-contact-field .sf-error-text{
  grid-column:2; /* Function: keeps error text aligned to the input column. */
}

/* Function: keeps helper copy and error text aligned with the narrowed controls. */
.sf-form-wrap--flow .sf-field-note,
.sf-form-wrap--flow .sf-mileage-hint{
  margin:0;
  color:#6b7280;
  font-size:.82rem;
  line-height:1.42;
}

/* Function: resets the mileage card so it reads as part of the main white form card. */
.sf-form-wrap--flow .sf-field-slider{
  gap:.9rem;
  padding:0;
}

/* Function: puts the mileage label/helper and entry box on the same row. */
.sf-form-wrap--flow .sf-field-header{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(8.75rem,42%);
  gap:.75rem 1rem;
  align-items:center;
  margin-bottom:0;
}

/* Function: keeps mileage helper copy tucked under the label when the entry box is beside it. */
.sf-form-wrap--flow .sf-field-header .sf-field-subhead{
  grid-column:1;
}

/* Function: gives the exact mileage input one finance-like bordered control. */
.sf-form-wrap--flow .sf-mileage-input-wrap{
  min-height:52px;
  gap:1rem;
  padding:0 0.75rem; /* Reduced from 1.5rem */
  background:#ffffff;
  border:1px solid var(--flow-line);
  border-radius:8px;
  box-shadow:none;
  grid-column:2;
  grid-row:1 / span 2;
  width:100%;
}

/* Function: uses the finance calculator slider rail and handle treatment for the sell mileage control. */
.sf-form-wrap--flow .sf-range{
  -webkit-appearance:none;
  appearance:none;
  flex:0 0 44px;
  width:100%;
  height:44px;
  margin-top:.15rem;
  background:transparent;
  border:0;
  border-radius:0;
  outline:none;
  -webkit-tap-highlight-color:transparent;
  transition:none;
}

/* Function: removes browser focus chrome so the finance-style thumb focus ring is the only slider focus state. */
.sf-form-wrap--flow .sf-range:focus{
  outline:none;
  background:transparent;
  box-shadow:none;
}

/* Function: paints the sell mileage rail with the finance calculator filled-progress style. */
.sf-form-wrap--flow .sf-range::-webkit-slider-runnable-track{
  height:6px;
  background:linear-gradient(90deg,var(--flow-navy) 0%,var(--flow-navy) var(--finance-slider-progress,0%),#e5e7eb var(--finance-slider-progress,0%),#e5e7eb 100%);
  border:0;
  border-radius:999px;
}

/* Function: matches the sell mileage WebKit slider handle to the finance calculator handle. */
.sf-form-wrap--flow .sf-range::-webkit-slider-thumb{
  -webkit-appearance:none;
  appearance:none;
  width:20px;
  height:20px;
  margin-top:-7px;
  border-radius:50%;
  background:#ffffff;
  border:3px solid var(--flow-navy);
  box-shadow:0 2px 8px rgba(26,55,123,.25);
  cursor:pointer;
  transition:transform .1s ease, box-shadow .16s ease;
}

/* Function: mirrors the finance calculator focus ring on the sell mileage slider handle. */
.sf-form-wrap--flow .sf-range:focus-visible::-webkit-slider-thumb{
  box-shadow:0 0 0 4px rgba(26,55,123,.18),0 2px 8px rgba(26,55,123,.25);
}

/* Function: gives the sell mileage WebKit slider handle the finance calculator pressed feedback. */
.sf-form-wrap--flow .sf-range::-webkit-slider-thumb:active{
  transform:scale(1.15);
}

/* Function: paints the Firefox sell mileage slider rail with the finance calculator neutral track. */
.sf-form-wrap--flow .sf-range::-moz-range-track{
  height:6px;
  background:#e5e7eb;
  border:0;
  border-radius:999px;
}

/* Function: fills the Firefox sell mileage slider rail from the minimum to the handle. */
.sf-form-wrap--flow .sf-range::-moz-range-progress{
  height:6px;
  background:var(--flow-navy);
  border-radius:999px;
}

/* Function: matches the sell mileage Firefox slider handle to the finance calculator handle. */
.sf-form-wrap--flow .sf-range::-moz-range-thumb{
  width:20px;
  height:20px;
  border-radius:50%;
  background:#ffffff;
  border:3px solid var(--flow-navy);
  box-shadow:0 2px 8px rgba(26,55,123,.25);
  cursor:pointer;
  transition:transform .1s ease, box-shadow .16s ease;
}

/* Function: mirrors the finance calculator Firefox focus ring on the sell mileage slider handle. */
.sf-form-wrap--flow .sf-range:focus-visible::-moz-range-thumb{
  box-shadow:0 0 0 4px rgba(26,55,123,.18),0 2px 8px rgba(26,55,123,.25);
}

/* Function: gives the sell mileage Firefox slider handle the finance calculator pressed feedback. */
.sf-form-wrap--flow .sf-range::-moz-range-thumb:active{
  transform:scale(1.15);
}

/* Function: keeps the mileage value inside the single finance-style input layer. */
.sf-form-wrap--flow .sf-mileage-input{
  height:auto;
  color:var(--flow-navy);
  background:transparent;
  border:0;
  border-radius:0;
  box-shadow:none;
  font-size:1rem;
  font-weight:700;
  line-height:1.2;
}

/* Function: applies a navy focus ring to the mileage input wrapper. */
.sf-form-wrap--flow .sf-mileage-input-wrap:focus-within{
  border-color:var(--flow-navy);
  box-shadow:0 0 0 4px rgba(26,55,123,.12);
}

/* Function: turns condition options into standalone finance-style choices. */
.sf-form-wrap--flow .sf-pill-group{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:.65rem;
  padding:0;
  background:transparent;
  border:0;
  border-radius:0;
  box-shadow:none;
}

/* Function: lets existing pill groups handle longer condition choices in one column. */
.sf-form-wrap--flow .sf-pill-group.sf-pill-group--stack{
  grid-template-columns:1fr;
  gap:0;
  overflow:visible;
  background:transparent;
  border:0;
  border-radius:0;
}

/* Function: reuses the existing pill group for yes/no and key-count pairs. */
.sf-form-wrap--flow .sf-pill-group.sf-pill-group--split{
  grid-template-columns:repeat(2,minmax(0,1fr));
}

/* Function: reuses the pill grid for three equal running-condition choices. */
.sf-form-wrap--flow .sf-pill-group.sf-pill-group--thirds{
  grid-template-columns:repeat(3,minmax(0,1fr));
}

/* Function: gives each condition choice the same simple bordered surface as finance options. */
.sf-form-wrap--flow .sf-pill-option .sf-pill-text{
  min-height:56px; /* Function: matches the finance option control height. */
  padding:0 .85rem; /* Function: keeps compact split choices aligned with the finance pill rhythm. */
  color:#374151; /* Function: reuses the finance unselected option text colour. */
  background:#ffffff; /* Function: matches finance form controls before selection. */
  border:1px solid var(--flow-line); /* Function: keeps the finance input border contrast. */
  border-radius:8px; /* Function: preserves the sell flow's slightly larger condition corners. */
  box-shadow:none; /* Function: keeps unselected controls flat like finance inputs. */
  transform:none; /* Function: prevents the legacy segmented-control lift from changing layout. */
}

/* Function: stacks optional helper text inside reused pill options. */
.sf-form-wrap--flow .sf-pill-option .sf-pill-text--stack{
  gap:.28rem;
}

/* Function: turns stacked condition options into rows inside one grouped control. */
.sf-form-wrap--flow .sf-pill-group--stack .sf-pill-option .sf-pill-text{
  position: relative; /* Function: anchors the custom round checkbox indicator inside each row. */
  align-items:flex-start; /* Function: aligns stacked option copy with finance list labels. */
  border:1px solid var(--flow-line); /* Function: gives every row the same finance-style edge. */
  border-radius:0; /* Function: lets only the first and last rows round the grouped control. */
  background:#ffffff; /* Function: matches finance option rows before selection. */
  flex-direction:column; /* Function: stacks option title and helper copy. */
  justify-content:center; /* Function: vertically centers short and long option copy. */
  min-height:68px; /* Function: preserves the larger touch target for multi-line rows. */
  padding:0 1.5rem 0 3.5rem; /* Function: reserves room for the custom checkbox indicator. */
  text-align:left; /* Function: keeps long damage descriptions easy to scan. */
  margin-bottom: -1px; /* Function: collapses adjacent borders into one grouped line. */
  transition:background .18s ease,border-color .18s ease,box-shadow .18s ease,color .18s ease; /* Function: matches the finance option feedback timing. */
}

.sf-form-wrap--flow .sf-pill-group--stack .sf-pill-option:first-child .sf-pill-text{
  border-top-left-radius:8px;
  border-top-right-radius:8px;
}

.sf-form-wrap--flow .sf-pill-group--stack .sf-pill-option:last-child .sf-pill-text{
  border-bottom-left-radius:8px;
  border-bottom-right-radius:8px;
}

/* Function: keeps pill titles consistent with the existing bold option text. */
.sf-pill-title{
  font-weight:800;
}

/* Function: keeps secondary copy inside pill options visually aligned with form notes. */
.sf-pill-description{
  color:#6b7280;
  font-size:.84rem;
  font-weight:500;
  line-height:1.35;
}

/* Function: keeps required marks consistent without adding a new field style. */
.sf-required-mark{
  margin-left:.25rem;
  color:#ff0a46;
}

/* Function: removes the older segmented-control hover treatment from unselected condition choices. */
.sf-form-wrap--flow .sf-pill-option:hover .sf-pill-text{
  background:#f9fafb; /* Function: uses the finance option hover surface. */
}

/* Function: matches finance selected states without adding another outer container. */
.sf-form-wrap--flow .sf-pill-option.active .sf-pill-text{
  color:var(--flow-navy);
  background:#f6f9ff;
  border-color:var(--flow-navy);
  box-shadow:0 0 0 1px var(--flow-navy) inset,0 3px 10px rgba(26,55,123,.07);
  transform:none;
  z-index: 2;
}

/* Function: shows selected stacked rows with full border highlight and pop-in checkmark */
.sf-form-wrap--flow .sf-pill-group--stack .sf-pill-option.active .sf-pill-text{
  border-color:var(--flow-line);
  background:#f8fbff;
  box-shadow:none;
  transform: none;
  z-index: 1;
}

.sf-form-wrap--flow .sf-pill-group--stack .sf-pill-option .sf-pill-text::after {
  content: "";
  position: absolute;
  left: 1.25rem;
  top: 50%;
  transform: translateY(-50%);
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1px solid #cbd5e1;
  background: #ffffff;
  transition:background .18s ease,border-color .18s ease,box-shadow .18s ease,transform .18s ease;
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.02);
}

@keyframes checkmarkPopIn {
  0% { transform: translateY(-50%) scale(0.8); opacity: 0; }
  50% { transform: translateY(-50%) scale(1.15); opacity: 1; }
  100% { transform: translateY(-50%) scale(1); opacity: 1; }
}

.sf-form-wrap--flow .sf-pill-group--stack .sf-pill-option.active .sf-pill-text::after {
  background-color: var(--brand-yellow, #ffb800);
  border-color: var(--brand-yellow, #ffb800);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
  background-size: 12px;
  background-position: center;
  background-repeat: no-repeat;
  box-shadow:0 1px 2px rgba(15,23,42,.12);
  animation: checkmarkPopIn 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* Function: nests the claim amount entry under the selected insurance-claim row without adding another card. */
.sf-form-wrap--flow .sf-condition-nested-field{
  display:grid;
  gap:.8rem;
  margin:.75rem 1.25rem 1rem;
  padding:1rem 1.1rem;
  background:#f8fafc;
  border:1px solid #e8edf5;
  border-radius:10px;
}

/* Function: keeps nested conditional labels aligned with the existing question labels. */
.sf-form-wrap--flow .sf-nested-label{
  color:var(--flow-ink);
  font-weight:800;
  line-height:1.25;
}

/* Function: gives the claim amount field the same compact bordered input feel as the finance calculator. */
.sf-form-wrap--flow .sf-money-input-wrap{
  display:flex;
  align-items:center;
  min-height:52px;
  gap:.75rem;
  padding:0 1rem;
  background:#ffffff;
  border:1px solid var(--flow-line);
  border-radius:8px;
  box-shadow:none;
}

/* Function: keeps the currency symbol visually separate from the amount entry. */
.sf-form-wrap--flow .sf-money-prefix{
  color:#6b7280;
  font-weight:800;
}

/* Function: lets the nested claim amount value fill the finance-style input surface. */
.sf-form-wrap--flow .sf-money-input{
  flex:1;
  min-width:0;
  height:auto;
  padding:0;
  color:var(--flow-navy);
  background:transparent;
  border:0;
  border-radius:0;
  box-shadow:none;
  font-size:1rem;
  font-weight:700;
  line-height:1.2;
}

/* Function: removes native focus chrome from the nested claim amount field. */
.sf-form-wrap--flow .sf-money-input:focus{
  outline:none;
  box-shadow:none;
}

/* Function: applies the shared navy focus ring to the nested claim amount wrapper. */
.sf-form-wrap--flow .sf-money-input-wrap:focus-within{
  border-color:var(--flow-navy);
  box-shadow:0 0 0 4px rgba(26,55,123,.12);
}

/* Function: makes the shared buttons match the finance form's rounded actions. */
.sf-form-wrap--flow .sf-btn{
  min-height:52px;
  padding:.85rem 1.35rem;
  border-radius:99px;
  font:800 1rem/1.2 var(--font-body);
  box-shadow:none;
  transition:transform .16s ease,box-shadow .16s ease,background-color .16s ease,border-color .16s ease,color .16s ease;
}

/* Function: removes the older ripple overlay from finance-style sell buttons. */
.sf-form-wrap--flow .sf-btn::after{
  display:none;
}

/* Function: makes the primary post-entry action match the finance navy CTA. */
.sf-form-wrap--flow .sf-btn-primary{
  color:#ffffff;
  background:var(--flow-navy);
  border:0;
  box-shadow:0 8px 18px rgba(26,55,123,.12);
}

/* Function: keeps primary button hover feedback polished but restrained. */
.sf-form-wrap--flow .sf-btn-primary:hover{
  background-color:#244a91;
  box-shadow:0 10px 20px rgba(26,55,123,.18);
  transform:translateY(-1px);
}

/* Function: makes the back action a white outlined finance-style button. */
.sf-form-wrap--flow .sf-btn-secondary{
  color:#4b5563;
  background:#ffffff;
  background-image:none;
  border:1px solid #d9dee7;
}

/* Function: adds a quiet hover state to the back action. */
.sf-form-wrap--flow .sf-btn-secondary:hover{
  color:var(--flow-navy);
  background:#fbfcfe;
  border-color:#cbd5e1;
  box-shadow:none;
  transform:translateY(-1px);
}

/* Function: prevents the old side-by-side label layout from returning on desktop. */
@media (min-width:768px){
  .sf-form-wrap--flow .sf-field{
    display:grid;
    grid-template-columns:1fr;
    align-items:stretch;
  }
}

/* Function: stacks the summary and action controls cleanly on narrow screens. */
@media (max-width:640px){
  .sf-flow-summary__content{
    display:grid;
    grid-template-columns:52px minmax(0,1fr) auto; /* Function: keeps icon, text, and Edit on one row even on narrow screens. */
    align-items:center; /* Function: vertically aligns the fixed edit column with the vehicle summary. */
    gap:1rem;
    padding:1.25rem;
  }

  .sf-flow-summary__details{
    min-width:0; /* Function: allows long vehicle text to truncate before pushing Edit down. */
  }

  .sf-flow-summary__edit{
    grid-column:3; /* Function: pins Edit to the right-side action column. */
    grid-row:1; /* Function: keeps Edit aligned with the vehicle row instead of the next line. */
    justify-self:end;
    margin-left:0;
  }

  .sf-flow-progress{
    padding:1rem 1.25rem 1.2rem;
  }

  .sf-flow-actions{
    grid-template-columns:1fr;
    gap:.85rem;
  }

  .sf-form-wrap--flow .sf-pill-group{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  /* Function: stacks the three running choices on mobile so long labels do not collide. */
  .sf-form-wrap--flow .sf-pill-group.sf-pill-group--thirds{
    grid-template-columns:1fr;
  }

  /* Function: keeps the mobile mileage label and exact entry field on the same row like the finance calculator. */
  .sf-form-wrap--flow .sf-field-header{
    grid-template-columns:minmax(0,1fr) minmax(8.75rem,42%);
    column-gap:.75rem;
    row-gap:.65rem;
  }

  /* Function: lets the mobile mileage helper span under the label-and-field row. */
  .sf-form-wrap--flow .sf-field-header .sf-field-subhead{
    grid-column:1 / -1;
    grid-row:auto;
  }

  /* Function: right-aligns the compact mobile exact mileage field in the finance-style right column. */
  .sf-form-wrap--flow .sf-mileage-input-wrap{
    grid-column:2;
    grid-row:1;
    justify-self:end;
    max-width:100%;
  }
}

.sf-message{
  max-width:600px;
  margin:0 auto;
  background:var(--light-bg);
  padding:40px;
  border-radius:16px;
  box-shadow:0 8px 24px rgba(0,0,0,0.06);
  text-align:center;
  font-weight:600;
}

.sf-message-wrap{
  position:relative;
  min-height:60vh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:0; /* Function: removes the extra final-step inset so only the completion message owns spacing. */
  background:transparent; /* Function: removes the pale blue final-step canvas behind the completion card. */
}

.sf-message-card{
  background:rgba(255,255,255,0.92);
  border-radius:24px;
  padding:48px 36px;
  max-width:520px;
  width:100%;
  box-shadow:0 32px 72px rgba(15,23,42,0.15);
  backdrop-filter:blur(8px);
  text-align:center;
}

.sf-message-title{
  font-size:32px;
  font-weight:700;
  color:#0f172a;
  margin-bottom:12px;
}

.sf-message-lead{
  font-size:20px;
  font-weight:500;
  color:#1e293b;
  margin-bottom:10px;
}

.sf-message-subtext{
  font-size:16px;
  color:#475569;
  margin:0;
}

.sf-modal-backdrop{
  position:fixed;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(15,23,42,0.55);
  backdrop-filter:blur(12px);
  padding:24px;
  z-index:1200;
}

.sf-modal-card{
  position:relative;
  width:min(720px,100%);
  background:#fff;
  border-radius:28px;
  box-shadow:0 40px 120px rgba(15,23,42,0.35);
  overflow:hidden;
  display:grid;
  grid-template-columns:1fr;
  gap:0;
}

.sf-modal-dismiss{
  position:absolute;
  top:16px;
  right:16px;
  width:40px;
  height:40px;
  border:none;
  border-radius:999px;
  background:rgba(15,23,42,0.08);
  color:#0f172a;
  font-size:24px;
  font-weight:600;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:background .2s ease, transform .2s ease;
}

.sf-modal-dismiss:hover{
  background:rgba(15,23,42,0.15);
  transform:scale(1.05);
}

.sf-modal-hero{
  position:relative;
  min-height:220px;
  background:linear-gradient(135deg,#1a377b,#3aa0ff);
  display:flex;
  align-items:center;
  justify-content:center;
}

.sf-modal-hero img{
  width:100%;
  height:100%;
  object-fit:cover;
}

.sf-modal-hero-placeholder{
  color:#e2e8f0;
  font-weight:600;
  letter-spacing:0.08em;
  text-transform:uppercase;
}

.sf-modal-content{
  padding:40px 36px 44px;
  display:flex;
  flex-direction:column;
  gap:12px;
}

.sf-modal-eyebrow{
  font-size:13px;
  letter-spacing: var(--tracking-label);
  text-transform:uppercase;
  color:#3aa0ff;
  font-weight:700;
}

.sf-animate-in {
  animation: slideDownFadeIn 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes slideDownFadeIn {
  from { opacity: 0; transform: translateY(-10px); }
  to { opacity: 1; transform: translateY(0); }
}

.sf-modal-title{
  font-size:34px;
  font-weight:700;
  color:#0f172a;
  margin:0;
}

.sf-modal-copy{
  font-size:18px;
  color:#1f2937;
  margin:0;
}

.sf-modal-copy-secondary{
  font-size:16px;
  color:#475569;
  margin:0 0 12px;
}

.sf-modal-button{
  margin-top:12px;
  align-self:center;
  padding:12px 32px;
}

@media (min-width:768px){
  .sf-modal-card{grid-template-columns:1fr 1fr;}
  .sf-modal-hero{min-height:100%;}
  .sf-modal-content{padding:48px 48px 52px;}
}

/* arrange labels and inputs side-by-side on wider screens */
@media (min-width:768px){
  .sf-field{display:grid;grid-template-columns:180px 1fr;align-items:center;}
  .sf-label{margin-bottom:0;}
}

/* Styled datalist for vehicle input to match brand */
.sf-input[list] {
  appearance:none;
  background-color:#f7faff;
  background-image:linear-gradient(45deg,transparent 50%,#64748b 50%),
                   linear-gradient(135deg,#64748b 50%,transparent 50%),
                   linear-gradient(to right,#f7faff,#f7faff);
  background-position:calc(100% - 24px) calc(1em + 2px),
                     calc(100% - 18px) calc(1em + 2px),
                     0 0;
  background-size:6px 6px,6px 6px,100% 100%;
  background-repeat:no-repeat;
}

#sf-vehicle-options option {
  background-color:#fff;
  color:#0f172a;
}

.sf-vehicle-summary{
  margin-top:18px;
  display:grid;
  gap:12px;
  padding:16px;
  border-radius:18px;
  background:linear-gradient(135deg, rgba(62,160,255,.12), rgba(255,184,0,.16));
  border:1px solid rgba(148,163,184,.35);
}

@media (min-width:600px){
  .sf-vehicle-summary{ grid-template-columns:repeat(4,minmax(0,1fr)); }
}

.sf-vehicle-summary-item{
  display:flex;
  flex-direction:column;
  gap:6px;
}

.sf-vehicle-summary-label{
  font-size:0.75rem;
  font-weight:600;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:#475569;
}

.sf-vehicle-summary-value{
  font-size:1.1rem;
  font-weight:700;
  color:#0f172a;
}

.sf-condition-panel{
  background:#fff;
  border-radius:28px;
  border:1px solid rgba(15,23,42,.08);
  box-shadow:0 26px 52px rgba(15,23,42,.12);
  padding:clamp(24px,4vw,36px);
}

/* --- Horizontal Banner Trade-In Form --- */
.sf-banner-card {
  background: #ffffff;
  border-radius: 24px;
  box-shadow: 0 10px 25px rgba(0,0,0,0.08);
  margin-bottom: 24px;
}

.sf-banner-img {
  position: relative;
  height: 250px;
  background-image: url('assets/drivehaus_flatbed_tow.png'); /* Function: keeps the original tow artwork as the fallback banner image. */
  background-image: image-set(url('assets/drivehaus_flatbed_tow-1024.avif') type('image/avif'), url('assets/drivehaus_flatbed_tow-1024.webp') type('image/webp'), url('assets/drivehaus_flatbed_tow.png') type('image/png')); /* Function: lets modern browsers download a smaller sell banner image. */
  background-size: cover;
  background-position: center;
  border-top-left-radius: 24px;
  border-top-right-radius: 24px;
  isolation: isolate; /* Function: keeps the heading scrim and text layered inside the banner image only. */
  overflow: hidden; /* Function: clips the overlay heading to the rounded image corners. */
}

.sf-banner-img::before {
  background: linear-gradient(90deg, rgba(5, 22, 58, 0.72) 0%, rgba(5, 22, 58, 0.44) 48%, rgba(5, 22, 58, 0.06) 100%); /* Function: adds a broad contrast field behind the overlaid heading. */
  content: ""; /* Function: creates the readability layer without extra markup. */
  inset: 0; /* Function: stretches the scrim across the entire banner image. */
  pointer-events: none; /* Function: prevents the decorative layer from affecting interaction. */
  position: absolute; /* Function: anchors the scrim to the image container. */
  z-index: 0; /* Function: keeps the scrim below the heading text. */
}

.sf-banner-heading {
  color: #ffffff; /* Function: makes the editable heading readable on top of the photo. */
  display: grid; /* Function: stacks the main and accent heading lines as one overlay field. */
  font-family: var(--font-display, 'Sora', 'Inter', system-ui, sans-serif); /* Function: matches the rest of the sell-page headline typography. */
  font-size: clamp(2.6rem, 6vw, 5.75rem); /* Function: scales the heading large enough to cover the banner image area. */
  font-weight: 800; /* Function: gives the heading strong presence over the busy truck image. */
  gap: 0.06em; /* Function: keeps the two lines tight like a single heading block. */
  inset: 50% clamp(1.2rem, 5vw, 4rem) auto; /* Function: centers the heading across the image instead of pinning it to a corner. */
  letter-spacing: 0; /* Function: preserves readable heading shapes at large sizes. */
  line-height: 0.92; /* Function: keeps the overlay compact while covering the image band. */
  margin: 0; /* Function: removes default h1 spacing from the overlay layer. */
  max-width: none; /* Function: lets the two-line heading use the full inset-safe width of the image card. */
  pointer-events: none; /* Function: lets the image area remain passive and avoids click interception. */
  position: absolute; /* Function: overlays the heading on the banner image. */
  text-align: left; /* Function: keeps the large text readable while still covering the image area. */
  text-shadow: 0 16px 34px rgba(5, 22, 58, 0.42); /* Function: improves contrast against the vehicle photo. */
  transform: translateY(-50%); /* Function: centers the heading vertically in the banner image. */
  z-index: 1; /* Function: places the heading above the photo scrim. */
}

.sf-banner-heading span {
  display: block; /* Function: keeps each editable phrase on its own heading line. */
}

/* Function: resets browser H1 defaults so the semantic heading retains the existing overlay typography exactly. */
.sf-banner-heading__main {
  color: inherit; /* Function: preserves the existing white overlay color. */
  display: block; /* Function: keeps the primary phrase on its own visual line group. */
  font: inherit; /* Function: inherits the established display family, weight, size, and line height from the overlay. */
  font-size: var(--sf-banner-main-size, 1em); /* Function: accepts a measured smaller size only when the primary line would exceed the card. */
  letter-spacing: inherit; /* Function: preserves the established headline tracking. */
  margin: 0; /* Function: removes browser H1 spacing without changing the visual design. */
  white-space: nowrap; /* Function: reserves the first visual row for the full white heading instead of allowing a third line. */
}

/* Function: gives localized headings enough width and balanced wrapping to fit long GTA municipality names inside the image card. */
.sf-banner-heading--localized {
  font-size: clamp(2.35rem, 4.75vw, 5rem); /* Function: keeps ordinary town headings close to the original hero scale on spacious screens. */
  max-width: none; /* Function: allows location-specific text to extend across the card's full inset-safe width. */
  text-wrap: nowrap; /* Function: leaves line fitting to the measured primary heading instead of creating a third row. */
}

/* Function: applies the compact fit only when a long municipality would crowd the standard localized hero treatment. */
.sf-banner-heading--localized.sf-banner-heading--long {
  font-size: clamp(2rem, 3.7vw, 3.75rem); /* Function: caps long-location headlines so the name and gold accent fit inside the 250px banner. */
  gap: 0.04em; /* Function: reduces interline spacing only for long municipality names. */
  line-height: 0.98; /* Function: keeps wrapped long municipality names vertically contained within the fixed banner height. */
}

.sf-banner-heading__accent {
  color: #FBB649; /* Function: reuses the DriveHaus gold accent for the second heading line. */
  white-space: nowrap; /* Function: keeps the gold supporting phrase dedicated to the second visual row. */
}

.sf-banner-badge {
  position: absolute;
  top: 24px;
  right: 24px;
  background: #ffffff;
  color: #333333;
  padding: 8px 16px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 14px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.sf-banner-form {
  padding: 16px;
}

.sf-banner-row {
  display: flex;
  gap: 12px;
  align-items: center;
}

@media (max-width: 768px) {
  .sf-banner-heading {
    font-size: clamp(2.15rem, 11vw, 3.4rem); /* Function: keeps the banner overlay readable without overflowing on phones. */
    inset: 50% 1.2rem auto; /* Function: lets the mobile heading cover the image width with balanced side padding. */
    max-width: none; /* Function: lets the inset values define the full mobile-safe text width. */
  }

  /* Function: scales long location headings independently so the generic mobile heading keeps its current appearance. */
  .sf-banner-heading--localized.sf-banner-heading--long {
    font-size: clamp(1.6rem, 7vw, 2.35rem); /* Function: keeps Whitchurch-Stouffville readable without vertical or horizontal clipping. */
    line-height: 1; /* Function: gives multi-line mobile municipality names compact but readable leading. */
    max-width: none; /* Function: keeps long mobile locations inside the same inset-safe card width. */
  }

  .sf-banner-row {
    flex-direction: column;
    align-items: stretch;
  }

  .sf-banner-toggle,
  .sf-banner-identifier,
  .sf-postal-input {
    width: 100%;
    flex: none;
  }
}

@media (min-width: 769px) {
  .sf-banner-row .sf-postal-input {
    flex: 0 0 calc(7ch + 48px); /* Function: limits the postal-code pill to seven visible characters plus input padding. */
    max-width: calc(7ch + 48px); /* Function: prevents the postal-code pill from growing wider than the seven-character size. */
  }
}

.sf-banner-toggle {
  display: flex;
  background: #f1f5f9;
  padding: 4px;
  border-radius: 20px;
  flex: 0 0 auto;
}

.sf-form-wrap--banner .sf-banner-toggle {
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  min-width: 248px;
  overflow: hidden;
  isolation: isolate;
  box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.08);
}

/* Function: moves the white selected-state pill under the active toggle option. */
.sf-form-wrap--banner .sf-banner-toggle::before {
  content: "";
  position: absolute;
  top: 4px;
  bottom: 4px;
  left: 4px;
  z-index: 0;
  width: calc((100% - 8px) / 2);
  border-radius: 16px;
  background: #ffffff;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.1);
  transform: translateX(0);
  transition: transform 0.36s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.24s ease;
}

.sf-form-wrap--banner .sf-banner-toggle--vin::before {
  transform: translateX(100%);
}

.sf-banner-toggle button {
  background: transparent;
  border: none;
  height: 36px;
  padding: 0 22px;
  border-radius: 16px;
  font-weight: 600;
  font-size: 15px;
  color: #64748b;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.sf-form-wrap--banner .sf-banner-toggle button {
  position: relative;
  z-index: 1;
  padding: 0 18px;
  white-space: nowrap;
  transition: color 0.24s ease, transform 0.24s ease;
}

.sf-form-wrap--banner .sf-banner-toggle button:hover {
  transform: translateY(-1px);
}

.sf-banner-toggle button.active {
  background: #ffffff;
  color: #0f172a;
  box-shadow: 0 2px 6px rgba(0,0,0,0.06);
}

.sf-form-wrap--banner .sf-banner-toggle button.active {
  background: transparent;
  box-shadow: none;
}

.sf-banner-identifier {
  position: relative;
  z-index: 25;
  display: flex;
  flex: 1;
  align-items: center;
  min-width: 0;
  transform-origin: 50% 50%;
}

/* Function: gives the replacement input a lightweight entrance without remounting the autocomplete layer through Framer Motion. */
.sf-banner-identifier--details,
.sf-banner-identifier--vin {
  animation: sf-banner-identifier-in 0.24s ease both;
}

@keyframes sf-banner-identifier-in {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.sf-banner-identifier .sf-suggestions {
  position: absolute; /* Function: keeps the autocomplete menu from increasing the banner row height. */
  inset: calc(100% + 8px) 0 auto; /* Function: anchors the menu directly under the active identifier input. */
  z-index: 80; /* Function: places autocomplete options above the postal field and banner card. */
  max-height: min(360px, calc(100svh - 220px)); /* Function: lets long result sets scroll without stretching the form area. */
  overflow-y: auto; /* Function: confines extra vehicle matches inside the floating menu. */
  background: #ffffff; /* Function: preserves the readable light dropdown surface. */
  box-shadow: 0 16px 34px rgba(15, 23, 42, 0.16); /* Function: separates the floating menu from the fields beneath it. */
}

/* Function: keeps the sell-page banner autocomplete readable on its light dropdown surface. */
.sf-form-wrap--banner .sf-banner-identifier .sf-suggestions {
  color: #0f172a;
  border-color: #cbd5e1;
}

.sf-form-wrap--banner .sf-banner-identifier .sf-suggestion-option {
  width: 100%;
  border: 0;
  background: transparent;
  cursor: pointer;
  font: inherit;
  text-align: left;
}

.sf-form-wrap--banner .sf-banner-identifier .sf-suggestion-option:hover,
.sf-form-wrap--banner .sf-banner-identifier .sf-suggestion-option.active {
  background: rgba(255, 184, 0, 0.12);
}

.sf-form-wrap--banner .sf-banner-identifier .sf-suggestion-title {
  color: #0f172a;
}

.sf-form-wrap--banner .sf-banner-identifier .sf-suggestion-note {
  color: #475569;
}

.sf-form-wrap--banner .sf-banner-identifier .sf-suggestion-subtitle {
  color: #64748b;
}

.sf-form-wrap--banner .sf-banner-identifier .sf-suggestion-note.sf-error {
  color: #b91c1c;
}

@media (prefers-reduced-motion: reduce) {
  .sf-form-wrap--banner .sf-banner-toggle::before,
  .sf-form-wrap--banner .sf-banner-toggle button,
  .sf-form-wrap--banner .sf-banner-identifier {
    transition: none;
    animation: none;
  }
}

.sf-banner-input {
  flex: 1;
  height: 44px;
  padding: 0 22px;
  border: 1px solid #e5e7eb;
  border-radius: 20px !important;
  font-size: 15px;
  color: #0f172a;
  background: #ffffff;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.sf-banner-input:focus {
  outline: none;
  border-color: #FBB649;
  box-shadow: 0 0 0 4px rgba(251, 182, 73, 0.2);
}

.sf-btn-banner {
  flex: 0 0 auto;
  background: #FBB649;
  color: #1a1a1a;
  border: none;
  height: 44px;
  padding: 0 30px;
  border-radius: 20px;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
  position: relative;
  overflow: hidden;
}

.sf-btn-banner::after {
  content: none;
  display: none;
}

.sf-btn-banner:hover {
  background: #f0a32f;
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(251, 182, 73, 0.35);
}

.sf-btn-banner:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

.sf-banner-disclaimer {
  text-align: center;
  font-size: 13px;
  color: #64748b;
  margin-top: 24px;
}

.sf-banner-disclaimer strong {
  color: #475569;
}

.sf-form-divider {
  border: 0;
  border-top: 1px solid #e2e8f0;
  margin: 0;
  width: 100%;
}

/* Completion state copied from finance.css */
.finance-complete {
  width: min(100%, 760px);
  margin: 0 auto;
  padding: clamp(2.5rem, 6vw, 4.5rem);
  text-align: center;
  border: 1px solid #dde1e6;
  border-radius: 16px;
  background: #ffffff;
  box-shadow: 0 18px 40px rgba(15, 23, 42, 0.08);
  animation: completeReveal 0.5s cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes completeReveal {
  from { opacity: 0; transform: translateY(24px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

.finance-complete h1 {
  margin: 0 0 1rem;
  color: #263238;
  font-size: clamp(2rem, 4vw, 3rem);
}

.finance-complete p {
  margin: 0 auto 1.8rem;
  max-width: 560px;
  color: #58616b;
  font-size: clamp(1.05rem, 2vw, 1.3rem);
}

.finance-complete p strong {
  color: #263238;
}

.finance-complete__check {
  display: flex;
  justify-content: center;
  margin-bottom: 1.5rem;
}

.finance-complete__check svg {
  width: 80px;
  height: 80px;
}

.finance-complete__check .check-circle {
  fill: none;
  stroke: #22c55e;
  stroke-width: 3;
  stroke-dasharray: 200;
  stroke-dashoffset: 200;
  animation: drawCircle 0.6s 0.2s cubic-bezier(0.65, 0, 0.35, 1) forwards;
}

.finance-complete__check .check-mark {
  fill: none;
  stroke: #22c55e;
  stroke-width: 3.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 40;
  stroke-dashoffset: 40;
  animation: drawCheck 0.35s 0.7s cubic-bezier(0.65, 0, 0.35, 1) forwards;
}

@keyframes drawCircle {
  to { stroke-dashoffset: 0; }
}

@keyframes drawCheck {
  to { stroke-dashoffset: 0; }
}

.finance-complete__links {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: center;
}

.finance-complete__links a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 54px;
  padding: 0.75rem 1.3rem;
  border-radius: 7px;
  font-weight: 800;
  transition: transform 0.16s ease, box-shadow 0.16s ease;
  text-decoration: none;
}

.finance-complete__links a:hover {
  transform: translateY(-2px);
}

.finance-complete__links a:first-child {
  color: #1a1a1a;
  background: #FBB649;
  box-shadow: 0 4px 12px rgba(251, 182, 73, 0.25);
}

.finance-complete__links a:first-child:hover {
  background: #f0a32f;
  box-shadow: 0 6px 16px rgba(251, 182, 73, 0.35);
}

.finance-complete__links a:last-child {
  color: #1a377b;
  background: transparent;
  border: 2px solid #d9dce0;
}

.finance-complete__links a:last-child:hover {
  border-color: #b0b6bd;
  background: #f8fafc;
}

.finance-complete__check .review-circle {
  fill: none;
  stroke: #f97316;
  stroke-width: 3;
  stroke-dasharray: 200;
  stroke-dashoffset: 200;
  animation: drawCircle 0.6s 0.2s cubic-bezier(0.65, 0, 0.35, 1) forwards;
}

.finance-complete__check .review-mark {
  fill: none;
  stroke: #f97316;
  stroke-width: 3.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 60;
  stroke-dashoffset: 60;
  animation: drawCheck 0.4s 0.7s cubic-bezier(0.65, 0, 0.35, 1) forwards;
}