/* Direct Car Loans theme: layout, header, footer and editorial typography.
   Design tokens come from theme.json; component styles come from the Core plugin. */

@font-face { font-family: "Inter Display"; font-style: italic; font-weight: 800; font-display: swap; src: url(../fonts/InterDisplay-ExtraBoldItalic.woff) format("woff"); }
@font-face { font-family: "Inter Display"; font-style: normal; font-weight: 700; font-display: swap; src: url(../fonts/InterDisplay-Bold.woff) format("woff"); }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; text-rendering: optimizeLegibility; }
img, svg, iframe { max-width: 100%; }
:where(a) { text-underline-offset: .18em; text-decoration-thickness: .08em; }
:where(a, button, input, select, summary, [tabindex]):focus-visible { outline: 3px solid var(--wp--preset--color--electric); outline-offset: 3px; border-radius: 4px; }
.wp-site-blocks > * { margin-block-start: 0; }
.skip-link:focus { z-index: 100; }

/* Header */
.dclt-header { background: var(--wp--preset--color--surface); border-bottom: 1px solid var(--wp--preset--color--line); }
.dclt-header__inner { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.5rem; max-width: 76rem; margin: 0 auto; padding: .75rem clamp(1rem, 4vw, 2rem); }
.dclt-logo { display: inline-flex; flex: none; }
.dclt-logo img { display: block; width: auto; height: 40px; }
.dclt-nav { flex: 1; display: flex; justify-content: flex-end; }
.dclt-nav__list { display: flex; flex-wrap: wrap; gap: .25rem 1.25rem; margin: 0; padding: 0; list-style: none; }
.dclt-nav__list a { display: inline-flex; align-items: center; min-height: 44px; color: var(--wp--preset--color--navy); font-weight: 600; text-decoration: none; border-bottom: 2px solid transparent; }
.dclt-nav__list a:hover, .dclt-nav__list a[aria-current] { border-bottom-color: var(--wp--preset--color--electric); }
.dclt-nav__toggle { display: none; align-items: center; gap: .5rem; min-height: 44px; padding: 0 .9rem; border: 1.5px solid var(--wp--preset--color--navy); border-radius: 999px; background: none; color: var(--wp--preset--color--navy); font: inherit; font-weight: 650; cursor: pointer; }
.dclt-nav__bars, .dclt-nav__bars::before, .dclt-nav__bars::after { display: block; width: 16px; height: 2px; background: currentColor; border-radius: 2px; }
.dclt-nav__bars { position: relative; }
.dclt-nav__bars::before, .dclt-nav__bars::after { content: ""; position: absolute; left: 0; }
.dclt-nav__bars::before { top: -5px; } .dclt-nav__bars::after { top: 5px; }

@media (max-width: 960px) {
	.dclt-nav { order: 3; flex-basis: 100%; justify-content: flex-start; }
	.dclt-header__cta { margin-left: auto; }
	.dclt-nav.is-enhanced { order: 2; flex-basis: auto; flex: none; margin-left: auto; }
	.dclt-nav.is-enhanced + .dclt-header__cta { order: 1; }
	.dclt-nav.is-enhanced .dclt-nav__toggle { display: inline-flex; }
	.dclt-nav.is-enhanced .dclt-nav__list { display: none; }
	.dclt-nav.is-enhanced.is-open { flex-wrap: wrap; }
	.dclt-nav.is-enhanced.is-open .dclt-nav__list { display: flex; flex-direction: column; position: absolute; left: 0; right: 0; z-index: 40; margin-top: 3.4rem; padding: .5rem clamp(1rem, 4vw, 2rem) 1rem; background: var(--wp--preset--color--surface); border-bottom: 1px solid var(--wp--preset--color--line); box-shadow: 0 12px 24px rgba(11, 27, 58, .08); }
	.dclt-nav.is-enhanced.is-open .dclt-nav__list a { width: 100%; min-height: 48px; }
	.dclt-header { position: relative; }
}
@media (max-width: 420px) {
	.dclt-logo img { height: 32px; }
	.dclt-header__cta .dcl-button { padding-inline: .8rem; font-size: .9rem; }
}

/* Main column */
.dclt-main { max-width: 74rem; margin: 0 auto; padding: clamp(1.5rem, 4vw, 3rem) clamp(1rem, 4vw, 2rem) clamp(3rem, 7vw, 5rem); }
.dclt-main > * { margin-block: 0; }
.dclt-title { max-width: 22ch; margin: 0 0 1.5rem; text-wrap: balance; }
.dclt-prose > * { margin-block: 0 1.25rem; }
.dclt-prose > :where(p, ul, ol, h2, h3, h4, blockquote, .wp-block-heading, .wp-block-list) { max-width: 46rem; }
.dclt-prose > :where(h2, .wp-block-heading) { margin-top: 2.5rem; }
.dclt-prose > h3 { margin-top: 1.75rem; }
.dclt-prose li { margin-bottom: .4rem; }
.dclt-prose table { width: 100%; max-width: 54rem; border-collapse: collapse; background: var(--wp--preset--color--surface); border: 1px solid var(--wp--preset--color--line); border-radius: 12px; overflow: hidden; display: block; overflow-x: auto; }
.dclt-prose table :where(th, td) { padding: .75rem 1rem; border-bottom: 1px solid var(--wp--preset--color--line); text-align: left; vertical-align: top; }
.dclt-prose table thead th { background: var(--wp--preset--color--navy); color: #fff; }
.dclt-prose table tbody th { color: var(--wp--preset--color--navy); }
.dclt-prose table caption { padding: .75rem 1rem; text-align: left; font-weight: 650; color: var(--wp--preset--color--slate); }
.dclt-prose .dcl-table-scroll table { display: table; border: 0; border-radius: 0; max-width: none; }

/* Home page */
.dclt-main--home { max-width: none; padding: 0; }
.dclt-home > * { margin: 0; }
.dcl-band { padding: clamp(3rem, 8vw, 6rem) clamp(1rem, 4vw, 2rem); }
.dcl-hero { padding: clamp(2.25rem, 5vw, 4rem) clamp(1rem, 4vw, 2rem); }
.dcl-band > * { max-width: 70rem; margin-inline: auto; }
.dcl-band h2 { max-width: 22ch; margin: 0 auto 1rem 0; font-size: clamp(1.8rem, 4.2vw, 2.9rem); line-height: 1.05; text-wrap: balance; }
.dcl-band > h2 { margin-inline: auto; max-width: 70rem; }
.dcl-band > h2 > span { display: block; max-width: 20ch; }
.dcl-band__intro { margin-block: 0 2.5rem; font-size: var(--wp--preset--font-size--large); color: var(--wp--preset--color--slate); }
.dcl-band > p > span, .dcl-finish > p > span { display: block; max-width: 38rem; }
.dcl-band__more { margin-block: 2rem 0; }
.dcl-band--tint { background: var(--wp--preset--color--surface); border-block: 1px solid var(--wp--preset--color--line); }

/* Hero: a night drive. Sky and northern lights are CSS; the road and car are built by drive.js. */
.dcl-hero { position: relative; isolation: isolate; overflow: hidden; padding-bottom: 0; color: #d7e0f4; background: linear-gradient(180deg, #050d20 0%, var(--wp--preset--color--navy) 55%, #102a5c 100%); }
.dcl-hero::before, .dcl-hero::after { content: ""; position: absolute; z-index: -1; pointer-events: none; }
.dcl-hero::before { inset: -30% -10% 35% -10%; background: radial-gradient(42% 60% at 72% 30%, rgba(40, 220, 160, .34), transparent 70%), radial-gradient(38% 55% at 38% 20%, rgba(31, 91, 255, .5), transparent 72%), radial-gradient(30% 45% at 92% 55%, rgba(120, 90, 255, .28), transparent 70%); filter: blur(28px); transform-origin: 50% 0; animation: dclt-aurora 16s ease-in-out infinite alternate; }
.dcl-hero::after { inset: 0 0 40% 0; opacity: .7; background-image: radial-gradient(1.2px 1.2px at 12% 22%, #fff 50%, transparent 51%), radial-gradient(1px 1px at 27% 61%, #fff 50%, transparent 51%), radial-gradient(1.4px 1.4px at 44% 14%, #fff 50%, transparent 51%), radial-gradient(1px 1px at 58% 47%, #fff 50%, transparent 51%), radial-gradient(1.2px 1.2px at 69% 9%, #fff 50%, transparent 51%), radial-gradient(1px 1px at 81% 36%, #fff 50%, transparent 51%), radial-gradient(1.3px 1.3px at 93% 18%, #fff 50%, transparent 51%), radial-gradient(1px 1px at 6% 72%, #fff 50%, transparent 51%); }
.dcl-hero__text { max-width: 70rem; margin: 0 auto; }
.dcl-hero h1 { margin: 0 0 1.25rem; color: #fff; font-size: clamp(2.5rem, 7.2vw, 5.25rem); line-height: .98; letter-spacing: -.04em; }
.dcl-hero h1 span { display: block; }
.dcl-lede { max-width: 36rem; margin: 0 0 2rem; font-size: var(--wp--preset--font-size--large); }
.dcl-hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.5rem; margin: 0 0 2rem; }
.dcl-hero .dcl-button, .dcl-finish .dcl-button { background: var(--wp--preset--color--amber); border-color: var(--wp--preset--color--amber); color: var(--wp--preset--color--navy); font-weight: 750; }
.dcl-hero .dcl-button:hover, .dcl-finish .dcl-button:hover { background: #fff; border-color: #fff; color: var(--wp--preset--color--navy); }
.dcl-hero .dcl-link-button, .dcl-finish .dcl-link-button { color: #fff; }
.dcl-hero :where(a, button):focus-visible, .dcl-finish :where(a, button):focus-visible { outline-color: var(--wp--preset--color--amber); }

.dcl-ride { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin: 0; padding: 0; list-style: none; }
.dcl-ride__ask { margin-right: .5rem; color: #fff; font-weight: 600; }
.dcl-ride a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 1.1rem; background: rgba(8, 18, 40, .72); border: 1.5px solid rgba(255, 255, 255, .45); border-radius: 999px; color: #fff; font-weight: 650; text-decoration: none; transition: background-color .15s ease, color .15s ease, border-color .15s ease; }
.dcl-ride a:hover, .dcl-ride a:focus-visible, .dcl-ride a.is-picked { background: #fff; border-color: #fff; color: var(--wp--preset--color--navy); }

.dcl-hero__art { position: relative; height: clamp(170px, 27vw, 330px); margin: clamp(1rem, 3vw, 2rem) calc(-1 * clamp(1rem, 4vw, 2rem)) 0; --dclt-road: clamp(44px, 6.5vw, 76px); --dclt-peaks: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='800' height='160'%3E%3Cpath fill='%23163066' d='M0 160V120L60 80l50 25 80-65 60 50 50-20 80-50 70 65 70-30 80 55 80-50 60 40 60 20v40z'/%3E%3Cpath fill='%23dfe6f5' fill-opacity='.5' d='M190 40l-22 18 14-4 9 8 9-9 12 5zM380 20l-24 15 15-3 10 9 9-10 13 4zM520 55l-19 8 12-1 8 7 7-8 10 3z'/%3E%3C/svg%3E"); --dclt-pines: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='70'%3E%3Cpath fill='%2306122b' d='M8 70l12-40 12 40zM38 70l13-56 13 56zM74 70l11-34 11 34zM102 70l14-62 14 62zM140 70l12-45 12 45zM168 70l13-53 13 53zM204 70l11-38 11 38zM0 66h240v4H0z'/%3E%3C/svg%3E"); --dclt-lane: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='4'%3E%3Crect width='62' height='4' rx='2' fill='%23FFC53D'/%3E%3C/svg%3E");
	/* Static scene for visitors without JavaScript. */
	background: url(../images/car-sedan.svg) 70% calc(100% - var(--dclt-road) * .12) / clamp(210px, 31vw, 430px) auto no-repeat, var(--dclt-lane) 0 calc(100% - var(--dclt-road) * .62) repeat-x, linear-gradient(#060d1d, #060d1d) 0 100% / 100% var(--dclt-road) no-repeat, var(--dclt-pines) 0 calc(100% - var(--dclt-road)) repeat-x, var(--dclt-peaks) 0 calc(100% - var(--dclt-road) - 20px) repeat-x; }
.dcl-hero__art.has-drive { background: none; }
.dcl-hero__art > div { position: absolute; left: 0; }
.dclt-drive__peaks { bottom: calc(var(--dclt-road) + 20px); width: calc(100% + 800px); height: 160px; background: var(--dclt-peaks) repeat-x; animation: dclt-roll-800 90s linear infinite; }
.dclt-drive__pines { bottom: var(--dclt-road); width: calc(100% + 240px); height: 70px; background: var(--dclt-pines) repeat-x; animation: dclt-roll-240 9s linear infinite; }
.dclt-drive__road { bottom: 0; width: 100%; height: var(--dclt-road); background: linear-gradient(#0d1933, #060d1d 22%); border-top: 2px solid #22345c; }
.dclt-drive__lane { bottom: calc(var(--dclt-road) * .62); width: calc(100% + 140px); height: 4px; background: var(--dclt-lane) repeat-x; animation: dclt-roll-140 .55s linear infinite; }
.dclt-drive__stage { bottom: calc(var(--dclt-road) * .12); left: 62% !important; width: clamp(210px, 31vw, 430px); aspect-ratio: 400 / 140; transform: translateX(-50%); }
.dclt-drive__car { position: absolute; inset: 0; }
.dclt-car { display: block; width: 100%; height: 100%; overflow: visible; }
.dclt-car__body { animation: dclt-bob 2.2s ease-in-out infinite; }
.dclt-car__beam { animation: dclt-beam 3.6s ease-in-out infinite; }
.dclt-wheel { transform-box: fill-box; transform-origin: center; animation: dclt-spin .55s linear infinite; }
.dclt-drive__car.is-arriving { animation: dclt-arrive 1.5s cubic-bezier(.16, .84, .3, 1) both; }
.dclt-drive__car.is-entering { animation: dclt-enter .5s cubic-bezier(.16, .84, .3, 1) both; }
.dclt-drive__car.is-leaving { animation: dclt-leave .45s cubic-bezier(.6, 0, .9, .4) both; }
@media (min-width: 1000px) {
	/* Wide screens: the road runs along the bottom of the hero, behind the text column. */
	.dcl-hero { padding-bottom: calc(clamp(44px, 6.5vw, 76px) + 7.5rem); }
	.dcl-hero__text { position: relative; z-index: 1; }
	.dcl-hero__art { position: absolute; left: 0; right: 0; bottom: 0; margin: 0; }
	.dclt-drive__stage { left: 72% !important; }
}
@keyframes dclt-roll-800 { to { transform: translateX(-800px); } }
@keyframes dclt-roll-240 { to { transform: translateX(-240px); } }
@keyframes dclt-roll-140 { to { transform: translateX(-140px); } }
@keyframes dclt-spin { to { transform: rotate(360deg); } }
@keyframes dclt-bob { 50% { transform: translateY(1.6px); } }
@keyframes dclt-beam { 50% { opacity: .78; } }
@keyframes dclt-aurora { from { transform: translateX(-3%) scaleY(.92); opacity: .75; } to { transform: translateX(4%) scaleY(1.08); opacity: 1; } }
@keyframes dclt-arrive { from { transform: translateX(-90vw); } }
@keyframes dclt-enter { from { transform: translateX(-45vw); opacity: 0; } }
@keyframes dclt-leave { to { transform: translateX(60vw); opacity: 0; } }

/* Spec sheet: three tools set as rows, not a card grid. */
.dcl-spec { margin-block: 0; padding: 0; list-style: none; border-top: 3px solid var(--wp--preset--color--navy); }
.dcl-spec li { display: grid; gap: .5rem 3rem; padding-block: clamp(1.5rem, 3vw, 2.25rem); border-bottom: 1px solid var(--wp--preset--color--line); }
.dcl-spec h3 { margin: 0; font-family: var(--wp--preset--font-family--display); font-size: clamp(1.4rem, 2.6vw, 2rem); font-style: italic; font-weight: 800; letter-spacing: -.025em; line-height: 1.1; }
.dcl-spec h3 a { color: var(--wp--preset--color--navy); text-decoration: none; background: linear-gradient(var(--wp--preset--color--amber), var(--wp--preset--color--amber)) 0 100% / 0 .22em no-repeat; transition: background-size .25s ease; }
.dcl-spec h3 a:hover, .dcl-spec h3 a:focus-visible { background-size: 100% .22em; }
.dcl-spec p { max-width: 38rem; margin: 0; }
@media (min-width: 760px) { .dcl-spec li { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: baseline; } }

/* Route: the three stops of an application, strung along a road. */
.dcl-route { position: relative; display: grid; gap: 2rem; margin-block: 0 2.5rem; padding: 0; list-style: none; counter-reset: dcl-stop; }
.dcl-route::before { content: ""; position: absolute; left: 17px; top: 0; bottom: 0; width: 14px; border-radius: 7px; background: linear-gradient(var(--wp--preset--color--amber) 55%, transparent 0) 50% 0 / 2px 22px repeat-y, var(--wp--preset--color--navy); }
.dcl-route li { position: relative; counter-increment: dcl-stop; padding-left: 4.5rem; }
.dcl-route li::before { content: counter(dcl-stop); position: absolute; left: 0; top: 0; display: grid; place-items: center; width: 48px; height: 48px; border: 3px solid var(--wp--preset--color--navy); border-radius: 50%; background: var(--wp--preset--color--amber); color: var(--wp--preset--color--navy); font-family: var(--wp--preset--font-family--display); font-size: 1.4rem; font-style: italic; font-weight: 800; }
.dcl-route h3 { margin: .55rem 0 .5rem; }
.dcl-route p { max-width: 24rem; margin: 0; }
@media (min-width: 760px) {
	.dcl-route { grid-template-columns: repeat(3, 1fr); gap: 3rem; }
	.dcl-route::before { left: 0; right: 0; top: 17px; bottom: auto; width: auto; height: 14px; background: linear-gradient(90deg, var(--wp--preset--color--amber) 55%, transparent 0) 0 50% / 22px 2px repeat-x, var(--wp--preset--color--navy); }
	.dcl-route li { padding: 4.25rem 0 0; }
}

/* Straight talk: what the site is and is not. */
.dcl-straight { display: grid; gap: 2rem clamp(2rem, 6vw, 5rem); margin-block: 1.5rem 2rem; }
@media (min-width: 760px) { .dcl-straight { grid-template-columns: 1fr 1fr; } }
.dcl-straight h3 { margin: 0 0 1rem; padding-bottom: .75rem; border-bottom: 3px solid var(--wp--preset--color--navy); }
.dcl-straight ul { margin: 0; padding: 0; list-style: none; }
.dcl-straight li { position: relative; margin-bottom: .9rem; padding-left: 2rem; }
.dcl-straight li::before { position: absolute; left: 0; top: 0; font-weight: 800; }
.dcl-straight__yes li::before { content: "\2713"; color: var(--wp--preset--color--emerald); }
.dcl-straight__no li::before { content: "\2715"; color: var(--wp--preset--color--slate); }

/* Closing band. */
.dcl-finish { position: relative; padding: clamp(3.5rem, 9vw, 6.5rem) clamp(1rem, 4vw, 2rem) calc(clamp(3.5rem, 9vw, 6.5rem) + 30px); color: #d7e0f4; background: linear-gradient(180deg, #102a5c, var(--wp--preset--color--navy)); }
.dcl-finish::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 30px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='4'%3E%3Crect width='62' height='4' rx='2' fill='%23FFC53D'/%3E%3C/svg%3E") 0 50% repeat-x, #060d1d; }
.dcl-finish > * { max-width: 70rem; margin-inline: auto; }
.dcl-finish h2 { margin-block: 0 1rem; color: #fff; font-size: clamp(2.2rem, 6vw, 4.25rem); line-height: 1; letter-spacing: -.035em; }
.dcl-finish > p { margin-block: 0 2rem; font-size: var(--wp--preset--font-size--large); }
.dcl-finish > p:last-child { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.5rem; margin-bottom: 0; }

@media (prefers-reduced-motion: reduce) {
	.dcl-hero::before, .dclt-drive__peaks, .dclt-drive__pines, .dclt-drive__lane, .dclt-car__body, .dclt-car__beam, .dclt-wheel, .dclt-drive__car { animation: none !important; }
	.dclt-drive__car.is-leaving { display: none; }
}

/* Footer */
.dclt-footer { background: var(--wp--preset--color--navy); color: #dfe6f5; }
.dclt-footer a { color: #fff; }
.dclt-footer__inner { display: grid; gap: 2rem; max-width: 76rem; margin: 0 auto; padding: clamp(2.5rem, 6vw, 4rem) clamp(1rem, 4vw, 2rem) 2rem; }
@media (min-width: 800px) { .dclt-footer__inner { grid-template-columns: 1.6fr 1fr 1fr 1fr; } }
.dclt-footer__brand img { display: block; width: auto; height: 40px; margin-bottom: 1rem; }
.dclt-footer__brand p { max-width: 28rem; margin: 0 0 1rem; }
.dclt-footer .dcl-button:hover { background: #fff; border-color: #fff; color: var(--wp--preset--color--navy); }
.dclt-footer__nav h2 { margin: 0 0 .75rem; color: #fff; font-size: 1.1rem; font-style: normal; font-weight: 700; letter-spacing: -.01em; }
.dclt-footer__nav ul { margin: 0; padding: 0; list-style: none; }
.dclt-footer__nav a { display: inline-flex; align-items: center; min-height: 40px; text-decoration: none; }
.dclt-footer__nav a:hover { text-decoration: underline; }
.dclt-footer__legal { max-width: 76rem; margin: 0 auto; padding: 1.5rem clamp(1rem, 4vw, 2rem) 2rem; border-top: 1px solid rgba(255, 255, 255, .16); font-size: .9rem; }
.dclt-footer__legal p { max-width: 60rem; margin: 0 0 .75rem; }
.dclt-footer :where(a, button):focus-visible { outline-color: #fff; }

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}
@media print {
	.dclt-header, .dclt-footer, .dcl-sticky-cta, .dcl-compare-bar { display: none !important; }
}