/* Contained heading and controls; the gallery runs from the container to the screen edge. */
.feature-highlights { --feature-gutter: clamp(24px, 5vw, 72px); --feature-card-width: min(940px, 82vw); background: #000; color: #f5f5f7; padding: clamp(72px, 8vw, 130px) 0 clamp(80px, 8vw, 140px); overflow: hidden; }
.features-heading { width: calc(100% - var(--feature-gutter) * 2); max-width: 1440px; margin: 0 auto 56px; }
.features-eyebrow { font-size: 11px; line-height: 1.5; letter-spacing: .12em; color: var(--lime); margin-bottom: 24px; }
.features-heading h2 { font-size: clamp(46px, 5vw, 76px); line-height: 1.08; letter-spacing: -.055em; }
.features-heading h2 span { color: #929296; }
.features-intro { font-size: 18px; line-height: 1.65; color: #a1a1a6; margin-top: 27px; }
.feature-gallery { width: 100%; }
.feature-track { --gallery-inset: max(var(--feature-gutter), calc((100% - 1440px) / 2)); display: grid; position: relative; grid-auto-flow: column; grid-auto-columns: var(--feature-card-width); gap: 24px; overflow-x: auto; overscroll-behavior-inline: contain; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gallery-inset); padding: 0 var(--gallery-inset) 12px; scrollbar-width: none; }
.feature-track::-webkit-scrollbar { display: none; }
.feature-card { position: relative; display: grid; grid-template-columns: .9fr 1.15fr; grid-template-rows: 1fr auto; min-height: 600px; padding: 46px 24px 38px 46px; overflow: hidden; scroll-snap-align: start; border-radius: 28px; background: #151816; border: 1px solid #ffffff0c; }
.feature-card:last-child { scroll-snap-align: end; }
.feature-import { background: linear-gradient(135deg, #171d18, #101411 70%); }
.feature-tickets { background: linear-gradient(135deg, #17191b, #111314 70%); }
.feature-autofill { background: linear-gradient(135deg, #111613, #19221a); }
.feature-reminders { background: linear-gradient(135deg, #172015, #10160f); }
.feature-card-copy { position: relative; z-index: 2; grid-area: 1 / 1; align-self: start; padding-top: 10px; padding-right: 20px; }
.highlight-kicker { display: block; color: #adbd9e; font-size: 10px; line-height: 1.5; letter-spacing: .12em; margin-bottom: 36px; }
.feature-card h3 { font-size: 43px; line-height: 1.1; letter-spacing: -.055em; }
.feature-card h3 em { color: #c4ef7c; }
.feature-card-copy > p { color: #a9b0a8; font-size: 16px; line-height: 1.7; max-width: 34ch; margin-top: 25px; }
.highlight-detail { position: relative; z-index: 2; grid-area: 2 / 1; display: block; padding-right: 20px; font-size: 11px; line-height: 1.65; color: #919b8e; max-width: 33ch; }
.highlight-detail > span { display: block; color: #b8c3b1; font-size: 8px; letter-spacing: .13em; margin-bottom: 7px; }
.highlight-visual { position: relative; grid-area: 1 / 2 / 3 / 3; align-self: center; min-width: 0; height: 500px; font-family: var(--body-font); }
.feature-scene { position: absolute; width: 100%; aspect-ratio: 1; top: 50%; transform: translateY(-50%); container-type: inline-size; }
.art-status-dot { width: 5px; height: 5px; flex-shrink: 0; border-radius: 50%; background: #c4ef7c; box-shadow: 0 0 0 4px #c4ef7c0d; }

/* Imports: structured certificates tucked into a vehicle's glovebox. */
.import-origin { position: absolute; display: flex; align-items: center; gap: 3cqw; left: 6%; top: 2%; color: #e2e9dc; font-size: 3.4cqw; font-weight: 600; }
.origin-subtitle { display: block; color: #8e9b85; font-size: 2.1cqw; font-weight: 400; margin-top: .3cqw; }
.import-origin .icon { width: 4.5cqw; height: 4.5cqw; margin-left: 7cqw; color: #c4ef7c; }
.import-route { position: absolute; top: 15%; left: 10%; width: 35%; height: 11%; border: 1px solid #9ab17d55; border-width: 0 0 1px 1px; border-bottom-left-radius: 15px; }
.import-route::after { content: ''; position: absolute; right: -3px; bottom: -3px; width: 5px; height: 5px; border-radius: 50%; background: #c4ef7c; }
.import-paper { position: absolute; width: 53%; height: 63%; border-radius: 2cqw; padding: 5cqw; box-shadow: 0 1cqw 2cqw #0004, 0 4cqw 6cqw #0004; }
.paper-registration { left: 10%; top: 22%; transform: rotate(-12deg); color: #253021; background: linear-gradient(135deg, #9cae8d, #798c6d); border: 1px solid #e8f4dc38; }
.paper-eyebrow { display: block; font-size: 1.9cqw; letter-spacing: .12em; margin-bottom: 3cqw; }
.import-paper > strong { display: block; font-size: 6.3cqw; line-height: 1.02; letter-spacing: -.06em; font-weight: 500; }
.paper-rule { height: 1px; background: currentColor; opacity: .28; margin-block: 4cqw; }
.paper-field { display: block; font-size: 1.7cqw; letter-spacing: .06em; }
.paper-registration > b { display: block; font-weight: 500; font-size: 3.5cqw; }
.paper-lines { width: 80%; height: 9cqw; margin-top: 5cqw; opacity: .18; background: repeating-linear-gradient(to bottom, currentColor 0 1px, transparent 1px 2.7cqw); }
.paper-fitness { left: 38%; top: 16%; transform: rotate(7deg); background: linear-gradient(120deg, #f0f1e6, #d8deca); color: #273323; border: 1px solid #fffff033; }
.paper-masthead { display: flex; justify-content: space-between; align-items: center; font-size: 1.6cqw; letter-spacing: .09em; margin-bottom: 5cqw; }
.paper-masthead > span:last-child { font-size: 3cqw; letter-spacing: -.04em; }
.paper-period { color: #54793b; }
.paper-data { display: flex; justify-content: space-between; gap: 2cqw; }
.paper-data > span { display: block; font-size: 1.6cqw; letter-spacing: .05em; }
.paper-data b { display: block; font-size: 2.5cqw; letter-spacing: 0; font-weight: 600; margin-top: .8cqw; }
.paper-barcode, .ticket-barcode { height: 5cqw; width: 61%; margin-top: 5cqw; opacity: .55; background: repeating-linear-gradient(90deg, currentColor 0 1px, transparent 1px 3px, currentColor 3px 5px, transparent 5px 7px, currentColor 7px 8px, transparent 8px 11px); }
.paper-sample { display: block; font-size: 1.3cqw; letter-spacing: .1em; margin-top: 1cqw; opacity: .6; }
.glovebox-folder { position: absolute; left: 4%; right: 3%; top: 65%; height: 26%; transform: rotate(-3deg); filter: drop-shadow(0 3cqw 3cqw #0005); }
.folder-tab { position: absolute; left: 0; bottom: calc(100% - 1px); padding: 2.3cqw 4cqw 1.5cqw; border: 1px solid #ffffff20; border-bottom: 0; background: #36432c; color: #c4d1b6; border-radius: 2cqw 3cqw 0 0; font-size: 1.7cqw; letter-spacing: .1em; }
.folder-face { display: flex; align-items: center; gap: 3cqw; height: 100%; padding: 4.5cqw; border: 1px solid #afc39242; border-radius: 0 2.5cqw 2.5cqw 2.5cqw; background: linear-gradient(135deg, #3c4b31, #1d2b17); box-shadow: inset 0 1px #ffffff0c; }
.folder-face img { width: 8cqw; height: 8cqw; border-radius: 1.8cqw; }
.folder-face > div { flex: 1; }
.folder-face > div > span { display: block; font-size: 1.6cqw; letter-spacing: .1em; color: #9fab91; }
.folder-face strong { display: block; font-size: 5.5cqw; line-height: 1.4; font-weight: 500; letter-spacing: -.04em; color: #e7eddf; }
.folder-count { color: #c1cfb3; font-size: 6cqw; line-height: 1; letter-spacing: -.05em; }
.folder-count > span { display: block; font-size: 1.6cqw; margin-top: 1cqw; letter-spacing: 0; }
.import-receipt { position: absolute; top: 95%; right: 4%; display: flex; align-items: center; gap: 1.8cqw; font-size: 2.5cqw; color: #bdcfab; }
.import-receipt .icon { width: 3.5cqw; height: 3.5cqw; }

/* Tickets: an oversized, perforated record on a route from the saved driver. */
.ticket-route, .extraction-route { position: absolute; inset: 0; width: 100%; height: 100%; }
.licence-slip { position: absolute; top: 5%; left: 3%; width: 80%; padding: 3.5cqw; display: flex; gap: 3cqw; align-items: center; color: #d3dace; background: linear-gradient(120deg, #292e2b, #1b201c); border: 1px solid #ffffff20; border-radius: 2cqw; transform: rotate(-5deg); box-shadow: 0 2cqw 5cqw #0004; }
.licence-monogram { font-family: var(--heading-font); font-size: 7cqw; letter-spacing: -.08em; color: #8a9b7a; padding-right: 2cqw; border-right: 1px solid #ffffff1c; }
.licence-slip > div { flex: 1; }
.licence-slip > div > span { display: block; font-size: 1.8cqw; letter-spacing: .12em; color: #8a9784; }
.licence-slip strong { display: block; font-size: 3.4cqw; font-weight: 500; margin-top: .7cqw; }
.licence-slip > .icon { width: 4cqw; height: 4cqw; color: #c4ef7c; }
.retrieved-ticket { position: absolute; top: 24%; left: 24%; width: 62%; height: 61%; padding: 4.5cqw 5cqw; color: #28351f; background: linear-gradient(120deg, #d9e6c6, #acbf91); border-radius: 2cqw; transform: rotate(6deg); box-shadow: 0 1cqw 2cqw #0004, 0 5cqw 6cqw #0005; }
.ticket-slip-top { display: flex; justify-content: space-between; align-items: center; font-size: 1.9cqw; letter-spacing: .13em; }
.ticket-slip-top .icon { width: 4cqw; height: 4cqw; }
.retrieved-ticket > strong { display: block; margin-top: 3.5cqw; font-size: 11cqw; line-height: .96; font-weight: 500; letter-spacing: -.07em; }
.ticket-tear { position: relative; height: 0; border-top: 1px dashed #53683d77; margin: 4cqw -5cqw 3.5cqw; }
.ticket-tear::before, .ticket-tear::after { content: ''; position: absolute; top: -1.5cqw; width: 3cqw; height: 3cqw; background: #111415; border-radius: 50%; }
.ticket-tear::before { left: -1.5cqw; }
.ticket-tear::after { right: -1.5cqw; }
.ticket-slip-data { display: flex; gap: 6cqw; font-size: 1.6cqw; letter-spacing: .08em; }
.ticket-slip-data b { display: block; font-size: 2.6cqw; letter-spacing: 0; margin-top: .8cqw; font-weight: 500; }
.ticket-barcode { width: 83%; height: 4cqw; margin-top: 3cqw; }
.ticket-sample { display: block; font-size: 1.3cqw; letter-spacing: .12em; margin-top: 1cqw; opacity: .6; }
.ticket-auto-label { position: absolute; top: 94%; left: 24%; display: flex; align-items: center; gap: 2cqw; color: #aebf9e; font-size: 2.5cqw; }

/* Autofill: detected values connect to the fields they populate. */
.scan-source-label { position: absolute; top: 6%; left: 7%; display: flex; align-items: center; gap: 2cqw; color: #9eaf93; font-size: 1.9cqw; letter-spacing: .1em; }
.scan-source-label .icon { width: 4cqw; height: 4cqw; color: #c4ef7c; }
.ocr-paper { position: absolute; top: 21%; left: 5%; width: 48%; height: 69%; padding: 4cqw; color: #4d5947; border: 1px solid #becbad44; background: linear-gradient(125deg, #bbc6ad, #8fa17d); border-radius: 1cqw; transform: rotate(-5deg); box-shadow: 0 3cqw 5cqw #0004; }
.ocr-paper-label { display: block; font-size: 1.5cqw; letter-spacing: .1em; }
.ocr-paper > strong { display: block; font-size: 4.7cqw; line-height: 1.08; letter-spacing: -.045em; margin-top: 2.5cqw; color: #2b3823; font-weight: 500; }
.ocr-rule { height: 1px; background: #3e503c44; margin: 3cqw 0; }
.ocr-field { display: block; margin-top: 2.2cqw; font-size: 1.4cqw; letter-spacing: .06em; }
.ocr-field b { display: block; font-size: 2.8cqw; font-weight: 500; letter-spacing: .03em; color: #2c3b25; width: max-content; padding: .5cqw 1cqw; margin: .5cqw -1cqw 0; }
.ocr-selected { outline: 1px solid #4c703a; background: #d7f6b363; border-radius: .4cqw; }
.ocr-lines { height: 7cqw; margin-top: 3cqw; width: 85%; opacity: .25; background: repeating-linear-gradient(to bottom, currentColor 0 1px, transparent 1px 2cqw); }
.ocr-sample { display: block; font-size: 1.2cqw; letter-spacing: .06em; margin-top: 3cqw; }
.scan-beam { position: absolute; left: -3%; right: -3%; top: 42%; height: 1px; background: #dbffab; box-shadow: 0 0 9px #c4ef7c88; }
.scan-beam::before { content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 7cqw; background: linear-gradient(0deg, #e0ffac33, transparent); }
.scan-bracket { position: absolute; inset: -1.8cqw; border: solid #c4ef7c; }
.bracket-top { border-width: 2px 0 0 2px; width: 5cqw; height: 5cqw; border-radius: .8cqw 0 0 0; }
.bracket-bottom { left: auto; top: auto; border-width: 0 2px 2px 0; width: 5cqw; height: 5cqw; border-radius: 0 0 .8cqw 0; }
.extracted-fields { position: absolute; left: 56%; right: 2%; top: 34%; }
.extracted-field { margin-bottom: 5.5cqw; padding: 0 0 2.5cqw 2cqw; border-bottom: 1px solid #b3d79535; background: linear-gradient(90deg, #19221a, #19221aee); }
.extracted-field > span { display: block; font-size: 1.7cqw; letter-spacing: .1em; color: #8fa481; }
.extracted-field strong { display: flex; justify-content: space-between; align-items: center; gap: 1cqw; margin-top: 1cqw; font-size: 4.2cqw; letter-spacing: -.025em; font-weight: 500; color: #e0ecd5; white-space: nowrap; }
.extracted-field .icon { width: 3cqw; height: 3cqw; color: #c4ef7c; }
.extraction-caption { display: block; color: #b2c69f; font-size: 2cqw; line-height: 1.5; padding-left: 2cqw; }

/* Reminders: the chosen interval takes center stage, with a branded notification. */
.countdown-label { position: absolute; left: 18%; top: 2%; color: #91a27f; font-size: 1.9cqw; letter-spacing: .15em; }
.countdown-number { position: absolute; left: 11%; right: 5%; top: 6%; font-family: var(--heading-font); font-size: 43cqw; line-height: 1; font-weight: 500; letter-spacing: -.095em; color: #c4ef7c; }
.countdown-number > span { display: block; font-family: var(--body-font); font-size: 2.2cqw; line-height: 1.5; letter-spacing: .15em; margin: 0 0 0 6cqw; color: #bdd3a7; }
.renewal-notification { position: absolute; left: 6%; right: 4%; top: 56%; padding: 3.5cqw 4cqw 4cqw; border-radius: 3cqw; border: 1px solid #a7bc893b; background: linear-gradient(120deg, #35412ce6, #25321de6); box-shadow: 0 2cqw 7cqw #0005, inset 0 1px #ffffff08; transform: rotate(-3deg); }
.renewal-notification-top { display: flex; align-items: center; gap: 1.8cqw; margin-bottom: 2.3cqw; }
.renewal-notification-top img { width: 4.5cqw; height: 4.5cqw; border-radius: 1cqw; }
.renewal-notification-top > span { font-size: 1.7cqw; letter-spacing: .06em; color: #b6c6a7; }
.renewal-notification-top > span:last-child { margin-left: auto; font-size: 1.8cqw; letter-spacing: 0; }
.renewal-notification > strong { display: block; font-size: 3.8cqw; letter-spacing: -.025em; font-weight: 500; color: #edf3e5; }
.renewal-notification > p { font-size: 2.6cqw; color: #b8c7ac; margin-top: .8cqw; }
.reminder-scale { position: absolute; left: 10%; right: 5%; top: 85%; display: flex; justify-content: space-between; border-top: 1px solid #8d9e7766; }
.reminder-scale > span { position: relative; display: flex; flex-direction: column; align-items: center; padding-top: 3cqw; width: 12%; color: #859477; font-size: 1.8cqw; line-height: 1.5; }
.reminder-scale i { position: absolute; top: -1cqw; width: 1.6cqw; height: 1.6cqw; background: #637254; border-radius: 50%; }
.reminder-scale b { font-size: 5cqw; line-height: 1.2; font-weight: 500; letter-spacing: -.05em; }
.reminder-scale .icon { width: 5cqw; height: 5cqw; margin-bottom: 1cqw; }
.reminder-scale .scale-selected { color: #c4ef7c; }
.scale-selected i { background: #c4ef7c; box-shadow: 0 0 0 1.2cqw #c4ef7c13; }

.feature-gallery-footer { display: flex; justify-content: space-between; align-items: center; gap: 24px; width: calc(100% - var(--feature-gutter) * 2); max-width: 1440px; margin: 23px auto 0; }
.feature-pagination { display: flex; align-items: center; gap: 9px; }
.feature-pagination button { display: grid; place-items: center; width: 30px; height: 32px; border: 0; padding: 0; background: transparent; }
.feature-pagination button::before { content: ''; width: 8px; height: 8px; border-radius: 100px; background: #4d4d51; transition: width .2s, background .2s; }
.feature-pagination button[aria-current='true']::before { width: 26px; background: #c4ef7c; }
.feature-pagination button:hover::before { background: #f5f5f7; }
.feature-navigation { display: flex; align-items: center; gap: 10px; }
.feature-counter { color: #949499; font-size: 11px; letter-spacing: .08em; margin-right: 10px; }
.feature-navigation .round-button { width: 42px; height: 42px; background: #1d1d20; border: 0; font-size: 23px; color: #dedee1; }
.feature-navigation .round-button:hover:not(:disabled) { background: #c4ef7c; color: #000; }
.feature-navigation .round-button:disabled { opacity: .3; }
@media (max-width: 900px) {
  .feature-card { display: flex; flex-direction: column; min-height: 720px; padding: 36px 32px 28px; }
  .feature-card-copy { padding: 0; }
  .highlight-kicker { margin-bottom: 22px; }
  .feature-card h3 { font-size: 40px; }
  .feature-card-copy > p { max-width: 44ch; font-size: 15px; margin-top: 20px; }
  .highlight-visual { width: 100%; max-width: 440px; height: auto; aspect-ratio: 1; flex: none; align-self: center; margin: 24px 0; }
  .highlight-detail { max-width: 50ch; padding: 0; margin-top: auto; }
}
@media (max-width: 700px) {
  .feature-highlights { --feature-card-width: calc(100vw - 64px); padding-top: 60px; padding-bottom: 72px; }
  .features-heading { margin-bottom: 32px; }
  .features-eyebrow { font-size: 8px; margin-bottom: 20px; }
  .features-heading h2 { font-size: clamp(36px, 9vw, 52px); }
  .features-intro { font-size: 14px; margin-top: 21px; }
  .feature-track { gap: 16px; }
  .feature-card { min-height: 620px; padding: 30px 24px 24px; border-radius: 20px; }
  .highlight-kicker { font-size: 8px; letter-spacing: .1em; margin-bottom: 24px; }
  .feature-card h3 { font-size: clamp(28px, 7.5vw, 40px); }
  .feature-card-copy > p { font-size: 13px; line-height: 1.7; margin-top: 20px; }
  .highlight-visual { width: calc(100% + 24px); margin: 22px 0; }
  .highlight-detail { font-size: 9px; }
  .highlight-detail > span { font-size: 7px; }
  .feature-counter { font-size: 9px; margin-right: 3px; }
  .feature-navigation { gap: 7px; }
  .feature-navigation .round-button { width: 36px; height: 36px; font-size: 20px; }
}
@media (prefers-reduced-motion: reduce) {
  .feature-track { scroll-behavior: auto; }
  .feature-pagination button::before { transition: none; }
}