/* Drive-to-Own: same system as the landing page. Warm paper, warm black, Route orange, wallet teal. No gradients. */
body{margin:0;background:#F7F5F0}
html{scroll-behavior:smooth}
a{color:#181714}a:hover{color:#514E48}
.rt{--ease:cubic-bezier(.23,1,.32,1);font-family:'Geist',ui-sans-serif,system-ui,-apple-system,'Segoe UI',sans-serif;color:#181714;background:#F7F5F0;-webkit-font-smoothing:antialiased;font-size:16px;line-height:1.5;overflow-x:clip}
.rt *{box-sizing:border-box}
.rt ::selection{background:#FF6B35;color:#181714}
.wrap{max-width:1200px;margin:0 auto;padding-left:max(20px,env(safe-area-inset-left,0px));padding-right:max(20px,env(safe-area-inset-right,0px))}
.mono{font-family:'Geist Mono',ui-monospace,'SF Mono',Menlo,monospace;font-variant-numeric:tabular-nums}
.num{font-variant-numeric:tabular-nums}
.disp{font-family:'Instrument Sans','Geist',ui-sans-serif,system-ui,sans-serif;font-weight:700;letter-spacing:-.03em}
.eyebrow{font-family:'Geist Mono',ui-monospace,monospace;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:#5E5B54}
.h1{font-family:'Instrument Sans','Geist',ui-sans-serif,system-ui,sans-serif;font-size:clamp(42px,6vw,78px);line-height:.98;letter-spacing:-.04em;font-weight:700;margin:0;text-wrap:balance}
.h2{font-family:'Instrument Sans','Geist',ui-sans-serif,system-ui,sans-serif;font-size:clamp(30px,4vw,50px);line-height:1.04;letter-spacing:-.035em;font-weight:700;margin:0;text-wrap:balance}
.h3{font-family:'Instrument Sans','Geist',ui-sans-serif,system-ui,sans-serif;font-size:19px;line-height:1.25;letter-spacing:-.015em;font-weight:600;margin:0}
.lead{font-size:clamp(17px,1.6vw,19px);line-height:1.55;color:#514E48;margin:0;max-width:56ch;text-wrap:pretty}
.body{color:#514E48;margin:0;text-wrap:pretty}
.section{padding-block:clamp(72px,10vw,120px)}
:focus-visible{outline:2px solid #181714;outline-offset:3px;border-radius:8px}

.btn{appearance:none;border:0;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:8px;height:48px;padding:0 20px;border-radius:999px;font:inherit;font-size:15px;font-weight:500;text-decoration:none;white-space:nowrap;transition:transform 160ms var(--ease),background-color 200ms var(--ease),color 200ms var(--ease),opacity 200ms var(--ease);-webkit-tap-highlight-color:transparent;user-select:none}
.btn:active{transform:scale(.97)}
.btn:disabled{opacity:.4;cursor:not-allowed;transform:none}
.btn-ink{background:#181714;color:#fff}
.btn-accent{background:#FF6B35;color:#181714;font-weight:600}
.btn-ghost{background:transparent;color:#181714;box-shadow:inset 0 0 0 1px #D7D3CB}
.btn-sm{height:38px;padding:0 14px;font-size:14px}
.btn .arr{transition:transform 200ms var(--ease)}
@media (hover:hover) and (pointer:fine){
  .btn-ink:hover{background:#2E2A26;color:#fff}
  .btn-accent:hover{background:#F25A22;color:#181714}
  .btn-ghost:hover{background:#fff;color:#181714}
  .btn:hover .arr{transform:translateX(3px)}
  .navlink:hover{color:#181714;background:#F0EBE3}
  .veh:hover{border-color:#B9B4AA}
  .faq-q:hover{color:#514E48}
}

.nav{position:sticky;top:env(safe-area-inset-top,0px);z-index:40;background:rgba(247,245,240,.86);backdrop-filter:saturate(1.4) blur(12px);-webkit-backdrop-filter:saturate(1.4) blur(12px);border-bottom:1px solid #E5E2DB}
.navlink{font-size:14px;color:#514E48;text-decoration:none;padding:8px 12px;border-radius:999px;transition:color 160ms var(--ease),background-color 160ms var(--ease)}
@media (max-width:760px){.navlinks{display:none!important}}

.swap{animation:swap 460ms var(--ease) both}
@keyframes swap{from{opacity:0;transform:translateY(8px);filter:blur(6px)}to{opacity:1;transform:none;filter:blur(0)}}
@supports (animation-timeline: view()){
  .reveal{animation:reveal linear both;animation-timeline:view();animation-range:entry 0% cover 28%}
}
@keyframes reveal{from{opacity:.3;transform:translateY(28px)}to{opacity:1;transform:none}}

/* Hero */
.hero-grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(40px,6vw,88px);align-items:center}
@media (max-width:960px){.hero-grid{grid-template-columns:minmax(0,1fr)}}
.own-card{width:100%;max-width:420px;background:#1E1B18;color:#F5F4F0;border-radius:32px;padding:26px;display:flex;flex-direction:column;gap:20px;box-shadow:0 40px 80px -40px rgba(24,23,20,.55)}
.ring-arc{animation:ring 1400ms var(--ease) 250ms both}
@keyframes ring{from{stroke-dashoffset:100}}
.orow{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:12px 0;border-top:1px solid #2E2A26;font-size:14px}
.ok{display:inline-flex;align-items:center;gap:6px;color:#86CDBE}
.live-dot{width:8px;height:8px;border-radius:50%;background:#1A6B61;animation:pulse 2s var(--ease) infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(26,107,97,.45)}70%{box-shadow:0 0 0 8px rgba(26,107,97,0)}100%{box-shadow:0 0 0 0 rgba(26,107,97,0)}}

/* Timeline: the line fills as you scroll past it */
.tl{position:relative;display:flex;flex-direction:column;gap:0;padding-left:56px}
.tl::before{content:"";position:absolute;left:19px;top:20px;bottom:20px;width:2px;background:#E5E2DB}
.tl-fill{position:absolute;left:19px;top:20px;bottom:20px;width:2px;background:#181714;transform-origin:top}
@supports (animation-timeline: view()){
  .tl-fill{animation:fillY linear both;animation-timeline:view();animation-range:entry 30% exit 60%}
}
@keyframes fillY{from{transform:scaleY(0)}to{transform:scaleY(1)}}
.tl-item{position:relative;padding:18px 0 26px;display:flex;flex-direction:column;gap:6px}
.tl-n{position:absolute;left:-56px;top:12px;width:40px;height:40px;border-radius:50%;background:#fff;border:1px solid #D7D3CB;display:grid;place-items:center;font-family:'Geist Mono',ui-monospace,monospace;font-size:13px}
.tl-item.key .tl-n{background:#FF6B35;border-color:#FF6B35;color:#181714;font-weight:600}
.tl-item.end .tl-n{background:#181714;border-color:#181714;color:#fff}
.two{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(32px,6vw,88px)}
@media (max-width:900px){.two{grid-template-columns:minmax(0,1fr)}}

/* Pay */
.pay{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
@media (max-width:900px){.pay{grid-template-columns:minmax(0,1fr)}}
.pcard{background:#fff;border:1px solid #E5E2DB;border-radius:24px;padding:26px;display:flex;flex-direction:column;gap:12px}
.pcard.dark{background:#181714;border-color:#181714;color:#F5F4F0}
.pcard.dark .body{color:#BBB7AF}
.big{font-family:'Instrument Sans','Geist',sans-serif;font-size:42px;font-weight:700;letter-spacing:-.04em;line-height:1;font-variant-numeric:tabular-nums}
.ph-val{font-family:'Geist Mono',ui-monospace,monospace;font-size:15px;background:#F0EBE3;border-radius:8px;padding:6px 10px;align-self:flex-start;color:#514E48}
.cmp{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);border:1px solid #E5E2DB;border-radius:24px;overflow:hidden;background:#fff}
@media (max-width:700px){.cmp{grid-template-columns:minmax(0,1fr)}}
.cmp-col{padding:26px;display:flex;flex-direction:column;gap:4px}
.cmp-col+.cmp-col{border-left:1px solid #E5E2DB;background:#FFF4EE}
@media (max-width:700px){.cmp-col+.cmp-col{border-left:0;border-top:1px solid #E5E2DB}}
.line{display:flex;justify-content:space-between;gap:16px;padding:10px 0;border-top:1px solid #ECE8E1;font-size:15px}
.line .v{font-family:'Geist Mono',ui-monospace,monospace;font-variant-numeric:tabular-nums}
.range{-webkit-appearance:none;appearance:none;width:100%;height:28px;background:transparent;cursor:pointer;margin:0}
.range::-webkit-slider-runnable-track{height:4px;border-radius:999px;background:#E5E2DB}
.range::-moz-range-track{height:4px;border-radius:999px;background:#E5E2DB}
.range::-moz-range-progress{height:4px;border-radius:999px;background:#181714}
.range::-webkit-slider-thumb{-webkit-appearance:none;width:22px;height:22px;border-radius:50%;background:#181714;margin-top:-9px;transition:transform 160ms var(--ease)}
.range::-moz-range-thumb{width:22px;height:22px;border:0;border-radius:50%;background:#181714}
.range:active::-webkit-slider-thumb{transform:scale(1.12)}

/* Segmented control */
.seg{position:relative;display:inline-grid;grid-auto-flow:column;grid-auto-columns:1fr;padding:4px;border-radius:999px;background:#F0EBE3;isolation:isolate}
.seg-pill{position:absolute;top:4px;bottom:4px;left:4px;border-radius:999px;background:#fff;box-shadow:0 1px 2px rgba(24,23,20,.08),0 2px 8px rgba(24,23,20,.06);transition:transform 380ms var(--ease);z-index:-1}
.seg-btn{appearance:none;border:0;background:transparent;font:inherit;font-size:14px;font-weight:500;color:#5E5B54;height:42px;padding:0 14px;border-radius:999px;cursor:pointer;transition:color 200ms var(--ease);white-space:nowrap}
.seg-btn.is-on{color:#181714}
@media (max-width:420px){.seg-btn{font-size:13px;padding:0 8px}}

/* Loan calculator */
.loan{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);border:1px solid #E5E2DB;border-radius:28px;overflow:hidden;background:#fff}
@media (max-width:900px){.loan{grid-template-columns:minmax(0,1fr)}}
.loan-in{padding:clamp(22px,4vw,36px);display:flex;flex-direction:column;gap:24px}
.loan-out{padding:clamp(22px,4vw,36px);display:flex;flex-direction:column;gap:20px;background:#1E1B18;color:#F5F4F0}
.scheds{display:flex;flex-direction:column;gap:8px}
.sched{appearance:none;font:inherit;color:#181714;text-align:left;cursor:pointer;display:flex;align-items:center;gap:14px;padding:14px 16px;border-radius:16px;background:#fff;border:1px solid #E5E2DB;transition:border-color 200ms var(--ease),background-color 200ms var(--ease),transform 160ms var(--ease)}
.sched:active{transform:scale(.985)}
.sched.on{border-color:#181714;background:#F7F5F0;box-shadow:0 0 0 1px #181714}
.sched-dot{width:18px;height:18px;border-radius:50%;border:2px solid #CCC8C0;flex:none;position:relative;transition:border-color 200ms var(--ease)}
.sched-dot::after{content:"";position:absolute;inset:3px;border-radius:50%;background:#181714;transform:scale(0);transition:transform 260ms var(--ease)}
.sched.on .sched-dot{border-color:#181714}
.sched.on .sched-dot::after{transform:scale(1)}
@media (hover:hover) and (pointer:fine){.sched:hover{border-color:#B9B4AA}}
.dline{display:flex;justify-content:space-between;gap:16px;padding:11px 0;border-top:1px solid #2E2A26;font-size:14px;color:#BBB7AF}
.bars{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:4px;height:110px;align-items:end}
.bar-col{height:100%;display:flex;align-items:flex-end;border-radius:4px;background:#26231F}
.bar-fill{display:block;width:100%;border-radius:4px;background:#FF6B35;transition:height 600ms var(--ease)}

/* Upfront payments */
.upfront{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:24px 40px;align-items:center;background:#fff;border:1px solid #E5E2DB;border-radius:24px;padding:clamp(22px,4vw,32px)}
@media (max-width:900px){.upfront{grid-template-columns:minmax(0,1fr)}}
.up-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
@media (max-width:560px){.up-grid{grid-template-columns:minmax(0,1fr)}}
.up-grid>div{display:flex;flex-direction:column;gap:6px;padding:16px;border-radius:16px;background:#F7F5F0}
.up-grid>div.up-total{background:#181714}
.up-v{font-family:'Instrument Sans','Geist',sans-serif;font-size:24px;font-weight:700;letter-spacing:-.02em;font-variant-numeric:tabular-nums}

/* Watch list */
.g3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 32px}
@media (max-width:900px){.g3{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.g3{grid-template-columns:minmax(0,1fr)}}
.w-item{padding:22px 0;border-top:1px solid #E5E2DB;display:flex;flex-direction:column;gap:6px}
.ico{flex:none;width:36px;height:36px;border-radius:10px;display:grid;place-items:center;background:#F0EBE3;color:#181714}

/* Form */
.apply{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(32px,6vw,80px);align-items:start}
@media (max-width:900px){.apply{grid-template-columns:minmax(0,1fr)}}
.fcard{background:#fff;border:1px solid #E5E2DB;border-radius:28px;padding:clamp(22px,4vw,36px);display:flex;flex-direction:column;gap:24px;min-height:560px}
.prog{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}
.prog span{height:4px;border-radius:999px;background:#ECE8E1;overflow:hidden;position:relative}
.prog span::after{content:"";position:absolute;inset:0;background:#181714;transform:scaleX(0);transform-origin:left;transition:transform 480ms var(--ease)}
.prog span.done::after{transform:scaleX(1)}
.pane{display:flex;flex-direction:column;gap:18px;flex:1}
.pane.fwd{animation:inF 420ms var(--ease) both}
.pane.back{animation:inB 420ms var(--ease) both}
@keyframes inF{from{opacity:0;transform:translateX(24px);filter:blur(4px)}to{opacity:1;transform:none;filter:blur(0)}}
@keyframes inB{from{opacity:0;transform:translateX(-24px);filter:blur(4px)}to{opacity:1;transform:none;filter:blur(0)}}
.fld{display:flex;flex-direction:column;gap:8px}
.fld label,.lbl{font-size:14px;font-weight:500}
.inp{appearance:none;width:100%;height:50px;border:1px solid #D7D3CB;border-radius:14px;background:#fff;padding:0 14px;font:inherit;font-size:16px;color:#181714;transition:border-color 200ms var(--ease),box-shadow 200ms var(--ease)}
.inp:focus{outline:0;border-color:#181714;box-shadow:0 0 0 4px rgba(24,23,20,.06)}
.inp.bad{border-color:#B4231B;box-shadow:0 0 0 4px rgba(180,35,27,.08);animation:shake 380ms var(--ease)}
select.inp{background-image:none;cursor:pointer}
.hint{font-size:13px;color:#5E5B54;margin:0}
.err{font-size:13px;color:#B4231B;margin:0}
@keyframes shake{0%,100%{transform:none}20%{transform:translateX(-6px)}40%{transform:translateX(5px)}60%{transform:translateX(-3px)}80%{transform:translateX(2px)}}
.row3{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr) minmax(0,1fr);gap:10px}
@media (max-width:640px){.row3{grid-template-columns:minmax(0,1fr)}}
.gblock{display:flex;flex-direction:column;gap:8px;padding:14px;border-radius:16px;background:#F7F5F0}
.gblock .inp{height:46px}
.row2{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px}
@media (max-width:520px){.row2{grid-template-columns:minmax(0,1fr)}}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{appearance:none;border:1px solid #D7D3CB;background:#fff;border-radius:999px;height:42px;padding:0 16px;font:inherit;font-size:14px;font-weight:500;color:#181714;cursor:pointer;transition:transform 160ms var(--ease),background-color 200ms var(--ease),border-color 200ms var(--ease),color 200ms var(--ease)}
.chip:active{transform:scale(.96)}
.chip.on{background:#181714;border-color:#181714;color:#fff}
.notice{display:flex;gap:12px;align-items:flex-start;background:#FFF1E9;border:1px solid #FFD2BD;border-radius:16px;padding:14px 16px;font-size:14px;color:#5A2A12}
.vehs{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px}
@media (max-width:520px){.vehs{grid-template-columns:minmax(0,1fr)}}
.veh{appearance:none;text-align:left;font:inherit;color:inherit;cursor:pointer;background:#fff;border:1px solid #D7D3CB;border-radius:20px;padding:18px;display:flex;flex-direction:column;gap:10px;transition:border-color 200ms var(--ease),box-shadow 200ms var(--ease),transform 160ms var(--ease)}
.veh:active{transform:scale(.98)}
.veh.on{border-color:#181714;box-shadow:0 0 0 1px #181714}
.veh svg{width:100%;height:auto;max-height:84px}
.check{display:flex;gap:12px;align-items:flex-start;font-size:14px;color:#514E48;cursor:pointer}
.check input{width:20px;height:20px;margin:1px 0 0;accent-color:#181714;flex:none}
.foot{display:flex;justify-content:space-between;align-items:center;gap:12px;padding-top:6px;border-top:1px solid #ECE8E1}
.done-ic{width:56px;height:56px;border-radius:50%;background:#1A6B61;display:grid;place-items:center}
.done-ic path{stroke-dasharray:24;stroke-dashoffset:24;animation:tick 600ms var(--ease) 200ms forwards}
@keyframes tick{to{stroke-dashoffset:0}}

/* FAQ */
.faq{display:flex;flex-direction:column;border-top:1px solid #E5E2DB}
.faq-item{border-bottom:1px solid #E5E2DB}
.faq-q{appearance:none;border:0;background:transparent;width:100%;text-align:left;font:inherit;font-size:clamp(17px,1.8vw,19px);font-weight:500;color:#181714;padding:20px 0;display:flex;justify-content:space-between;align-items:center;gap:24px;cursor:pointer;transition:color 160ms var(--ease)}
.faq-ic{flex:none;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:#F0EBE3;transition:transform 360ms var(--ease),background-color 200ms var(--ease)}
.faq-item.is-open .faq-ic{transform:rotate(45deg);background:#181714;color:#fff}
.faq-a{display:grid;grid-template-rows:0fr;transition:grid-template-rows 380ms var(--ease)}
.faq-item.is-open .faq-a{grid-template-rows:1fr}
.faq-a>div{overflow:hidden}
.faq-a p{margin:0;padding:0 48px 22px 0;color:#514E48;max-width:70ch;opacity:0;transition:opacity 240ms var(--ease)}
.faq-item.is-open .faq-a p{opacity:1;transition-delay:80ms}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .rt *,.rt *::before,.rt *::after{animation-duration:1ms!important;animation-iteration-count:1!important;transition-duration:1ms!important}
  .reveal{animation:none!important}
  .tl-fill{animation:none!important;transform:scaleY(1)}
}
/* Site additions */
[hidden]{display:none!important}
.btn[aria-busy="true"]{cursor:progress}