.driver-landing { --orange: #b35d21; }
.driver-landing .container { width: min(100% - 64px, 1180px); }
.driver-landing main { padding: 0; }
.driver-landing .site-header { background: var(--paper); }
.driver-landing .header-inner { padding-block: 23px; }
.driver-landing .site-nav { align-items: center; gap: 30px; }
.driver-landing .nav-contact { border: 1px solid var(--border); border-radius: 6px; padding: 9px 15px; }
.driver-landing .nav-contact span { margin-left: 10px; }
.hero { overflow: hidden; padding: 68px 0 62px; }
.hero-grid { display: grid; grid-template-columns: 1.1fr 1fr; align-items: center; gap: 36px; }
.hero-copy { padding-bottom: 12px; }
.hero .eyebrow { display: flex; align-items: center; gap: 9px; margin-bottom: 25px; }
.status-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--forest); flex: 0 0 auto; }
.hero h1 { font-size: clamp(3.5rem, 6.1vw, 5.25rem); line-height: 1.04; letter-spacing: -0.06em; margin-bottom: 28px; font-weight: 800; }
.hero h1 span { color: var(--forest); }
.hero-description { max-width: 470px; font-size: 1.125rem; line-height: 1.75; color: var(--muted); }
.hero-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 23px; margin: 30px 0 23px; }
.button { display: inline-flex; justify-content: center; align-items: center; gap: 24px; padding: 15px 22px; border-radius: 7px; text-decoration: none; font-size: 0.9rem; font-weight: 650; transition: background 150ms; }
.button-primary { background: var(--forest); color: white; }
.button-primary:hover { background: #354d2b; }
.text-link { font-weight: 600; font-size: 0.88rem; }
.text-link span { margin-left: 5px; }
.hero-footnote { font-size: 0.77rem; color: var(--muted); }
.hero-visual { position: relative; margin: 0; height: 570px; display: flex; justify-content: center; align-items: center; }
.route-art { position: absolute; inset: 20px -20px 45px; border-radius: 50% 44% 48% 40%; background: #edf0e5; overflow: hidden; transform: rotate(-7deg); }
.route-art svg { height: 100%; width: 100%; }
.phone { width: 280px; background: #f9faf7; border: 7px solid #292e26; border-radius: 39px; transform: rotate(5deg); box-shadow: 0 28px 45px -20px #26312066, inset 0 0 0 1px #757c70; position: relative; z-index: 1; }
.phone-top { display: flex; justify-content: space-between; align-items: center; height: 34px; padding: 0 20px; font-size: 10px; font-weight: 700; }
.phone-speaker { width: 65px; height: 15px; background: #292e26; border-radius: 0 0 12px 12px; align-self: flex-start; }
.phone-appbar { display: flex; justify-content: space-between; align-items: center; padding: 15px 14px 19px; font-size: 16px; border-bottom: 1px solid #e4e8df; }
.profile-symbol { display: grid; place-items: center; width: 26px; height: 26px; background: #e8eddf; color: #4d6940; border-radius: 50%; font-size: 9px; }
.help-symbol { display: grid; place-items: center; width: 19px; height: 19px; border: 1px solid #6b7561; border-radius: 50%; font-size: 11px; }
.phone-body { padding: 16px 13px; }
.availability { display: flex; justify-content: space-between; align-items: center; padding: 0 4px 17px; font-size: 13px; }
.availability small { display: block; color: #6b7561; font-size: 9px; }
.toggle, .mini-toggle { width: 36px; height: 21px; border-radius: 20px; background: #4d6940; padding: 3px; display: flex; justify-content: flex-end; }
.toggle::after, .mini-toggle::after { content: ""; width: 15px; height: 15px; background: white; border-radius: 50%; }
.phone-section-label { display: flex; justify-content: space-between; font-size: 11px; font-weight: 700; margin: 0 3px 10px; }
.phone-section-label span { font-weight: 400; color: #6b7561; font-size: 10px; }
.task-card { padding: 13px; border-radius: 12px; }
.task-active { background: #e6ecdc; border: 1px solid #c2ceb1; }
.task-tag { font-size: 8px; letter-spacing: 0.1em; color: #4d6940; font-weight: 750; }
.task-heading { display: flex; align-items: center; gap: 7px; font-size: 11px; margin: 10px 0 4px; }
.task-icon { display: grid; place-items: center; border-radius: 50%; width: 21px; height: 21px; background: #4d6940; color: white; font-size: 13px; }
.task-card p { font-size: 9px; color: #626b5a; margin: 0 0 12px 28px; }
.material { display: flex; justify-content: space-between; font-size: 10px; padding-top: 11px; border-top: 1px solid #c9d2bc; }
.illustrated-action { display: flex; justify-content: space-between; border-radius: 5px; background: #4d6940; color: white; padding: 8px 10px; margin-top: 12px; font-size: 10px; font-weight: 650; }
.task-next { border: 1px solid #e0e4d9; background: white; margin-top: 10px; }
.task-next .task-icon { color: #9c5828; background: #f6e9da; }
.task-next .task-tag { color: #706b61; }
.task-next p { margin-bottom: 0; }
.phone-bottom-note { font-size: 9px; color: #65725b; text-align: center; padding-top: 16px; }
.phone-bottom-note span { margin-right: 5px; }
.home-indicator { width: 80px; height: 4px; margin: 2px auto 9px; border-radius: 4px; background: #292e26; }
.floating-ticket { position: absolute; bottom: 68px; left: 0; z-index: 2; padding: 15px 21px 15px 15px; display: flex; align-items: center; gap: 12px; background: white; box-shadow: 0 12px 30px #29302017; border: 1px solid #e4e8dc; border-radius: 12px; transform: rotate(-4deg); }
.ticket-check { display: grid; place-items: center; background: #edf1e5; color: #4d6940; width: 37px; height: 37px; border-radius: 50%; font-size: 20px; }
.floating-ticket strong { display: block; font-size: 12px; }
.floating-ticket small { font-size: 10px; color: #6b7561; }
.hero-visual figcaption { position: absolute; bottom: 0; font-size: 10px; color: var(--muted); text-align: center; }
.workflow-strip { background: #f1ede5; border-block: 1px solid #e6e0d5; }
.workflow-strip .container { display: flex; justify-content: space-between; align-items: center; gap: 30px; padding-block: 25px; }
.workflow-strip p { margin: 0; color: #736a5c; font-size: 10px; letter-spacing: 0.1em; font-weight: 650; }
.workflow-strip ol { display: flex; list-style: none; gap: 36px; padding: 0; margin: 0; }
.workflow-strip li { margin: 0; font-size: 13px; font-weight: 550; }
.workflow-strip li:not(:last-child)::after { content: "→"; margin-left: 36px; color: #927f62; }
.section-space { padding-block: 95px; }
.driver-landing h2 { font-size: clamp(2rem, 3.2vw, 2.8rem); line-height: 1.14; letter-spacing: -0.045em; margin: 12px 0 22px; }
.section-intro { max-width: 570px; margin-bottom: 42px; }
.section-intro > p:last-child { color: var(--muted); max-width: 450px; }
.feature-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 30px; }
.feature h3 { font-size: 1.15rem; margin: 0 0 14px; letter-spacing: -0.025em; }
.feature > p:last-child { color: var(--muted); font-size: 0.91rem; line-height: 1.85; }
.step-label { font-size: 10px; letter-spacing: 0.09em; color: var(--forest); font-weight: 700; margin: 24px 0 11px; }
.mini-scene { height: 224px; border-radius: 12px; position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: center; padding: 24px; }
.scene-tasks { background: #e9eddf; gap: 9px; }
.mini-status { display: flex; align-items: center; gap: 7px; font-size: 11px; font-weight: 600; padding: 0 4px 7px; }
.mini-toggle { margin-left: auto; width: 30px; height: 18px; padding: 3px; }
.mini-toggle::after { width: 12px; height: 12px; }
.mini-stop { display: flex; align-items: center; gap: 10px; padding: 13px 10px; background: #fff; border-radius: 7px; }
.mini-stop strong { display: block; font-size: 10px; }
.mini-stop small { display: block; font-size: 8px; color: #6b7561; }
.mini-stop > span:last-child { margin-left: auto; font-size: 13px; color: var(--forest); }
.stop-number { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: #f1f3ea; font-size: 10px; color: var(--forest); }
.scene-navigate { background: #f0e9df; }
.mini-route { position: absolute; inset: 0; width: 100%; height: 100%; }
.navigation-chip { position: relative; background: white; border-radius: 8px; padding: 15px; display: flex; align-items: center; gap: 12px; box-shadow: 0 4px 10px #69522a0a; }
.navigation-chip > span { font-size: 28px; color: var(--forest); }
.navigation-chip strong { display: block; font-size: 12px; }
.navigation-chip small { display: block; font-size: 9px; color: var(--muted); }
.scene-complete { background: #e7ece8; }
.ticket-preview { border-radius: 8px; padding: 14px; background: white; }
.ticket-preview > div { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding-block: 6px; font-size: 10px; }
.ticket-preview > div > span:first-child { color: var(--muted); }
.ticket-preview .photo-line { font-size: 8px; justify-content: flex-start; margin: 2px 0 5px; }
.photo-icon { font-size: 22px; }
.small-check { margin-left: auto; color: var(--forest); }
.ticket-preview .completed-bar { justify-content: center; color: white; background: #4d6940; border-radius: 4px; font-size: 9px; font-weight: 600; }
.connected-section { background: #eef0e8; }
.connected-grid { display: grid; grid-template-columns: 1.15fr 1fr; gap: 110px; align-items: center; }
.connected-grid > div > p:not(.eyebrow) { color: #5c6755; font-size: 0.95rem; }
.hauler-panel { padding: 35px; background: #fafbf7; border: 1px solid #dce2d3; border-radius: 15px; }
.panel-label { color: #697558; letter-spacing: 0.1em; font-weight: 650; font-size: 10px; }
.hauler-panel h3 { font-size: 2rem; line-height: 1.15; margin: 16px 0 20px; }
.hauler-panel > p { font-size: 0.9rem; color: var(--muted); }
.hauler-note { border-top: 1px solid #dce2d3; padding-top: 18px; display: flex; align-items: flex-start; gap: 10px; color: var(--forest); }
.hauler-note p { font-size: 0.8rem; font-weight: 550; margin: 0; }
.start-grid { display: grid; grid-template-columns: 1fr 1.2fr; gap: 110px; }
.start-heading > p:not(.eyebrow) { max-width: 340px; color: var(--muted); }
.start-heading .button { margin-top: 12px; }
.join-steps { list-style: none; padding: 0; margin: 0; }
.join-steps li { display: flex; align-items: baseline; gap: 23px; border-bottom: 1px solid var(--border); padding: 0 0 23px; margin: 0 0 23px; }
.join-steps li:last-child { margin: 0; border: 0; padding: 0; }
.join-number { color: var(--orange); font-size: 12px; font-weight: 650; font-variant-numeric: tabular-nums; }
.join-steps h3 { font-size: 1.13rem; margin: 0 0 10px; }
.join-steps p { font-size: 0.91rem; color: var(--muted); margin: 0; }
.help-banner { padding-block: 58px; background: #293d24; color: #e4ebdf; }
.help-banner-inner { display: flex; align-items: center; justify-content: space-between; gap: 60px; }
.help-banner .eyebrow { color: #c4d4ac; }
.help-banner h2 { font-size: clamp(1.7rem, 3vw, 2.2rem); color: white; }
.help-banner p:last-child { font-size: 0.9rem; max-width: 540px; margin: 0; }
.button-light { background: #faf8f5; color: #293d24; flex-shrink: 0; }
.button-light:hover { background: #e3eadc; }
.driver-landing .site-footer { padding-block: 35px; }
.driver-landing .footer-inner { align-items: center; }
.footer-logo { font-size: 1rem; margin-bottom: 15px; }
.footer-logo img { width: 24px; height: 27px; }
.driver-landing .site-footer p { font-size: 0.73rem; }
@media (max-width: 1000px) {
    .hero { padding-top: 45px; }
    .hero-grid { gap: 12px; }
    .hero h1 { font-size: 4rem; }
    .hero-visual { height: 560px; }
    .floating-ticket { left: -12px; bottom: 48px; }
    .feature-grid { gap: 20px; }
    .mini-scene { padding: 15px; }
    .connected-grid, .start-grid { gap: 55px; }
    .workflow-strip ol { gap: 20px; }
    .workflow-strip li:not(:last-child)::after { margin-left: 20px; }
}
@media (max-width: 760px) {
    .driver-landing .container { width: min(100% - 40px, 560px); }
    .driver-landing .header-inner { flex-direction: row; align-items: center; }
    .driver-landing .site-nav { gap: 16px; }
    .driver-landing .site-nav a { font-size: 0.8rem; }
    .driver-landing .site-nav > a:first-child, .driver-landing .nav-contact { display: none; }
    .hero { padding-top: 42px; padding-bottom: 35px; }
    .hero-grid { grid-template-columns: 1fr; gap: 0; }
    .hero h1 { font-size: clamp(3.6rem, 12vw, 4.8rem); }
    .hero .eyebrow { font-size: 0.68rem; }
    .hero-description { font-size: 1rem; }
    .hero-actions { gap: 20px; }
    .hero-visual { height: 575px; margin-top: 10px; }
    .route-art { inset: 32px 0 35px; }
    .floating-ticket { left: 0; bottom: 52px; }
    .workflow-strip .container { display: block; padding-block: 23px; }
    .workflow-strip p { margin-bottom: 13px; }
    .workflow-strip ol { gap: 12px; flex-wrap: wrap; }
    .workflow-strip li { font-size: 11px; }
    .workflow-strip li:not(:last-child)::after { margin-left: 12px; }
    .section-space { padding-block: 58px; }
    .feature-grid { grid-template-columns: 1fr; gap: 27px; }
    .mini-scene { padding: 25px; }
    .mini-status { font-size: 12px; }
    .mini-stop strong { font-size: 12px; }
    .mini-stop small { font-size: 10px; }
    .ticket-preview { width: 100%; max-width: 300px; margin-inline: auto; }
    .connected-grid, .start-grid { grid-template-columns: 1fr; gap: 35px; }
    .hauler-panel { padding: 27px; }
    .help-banner-inner { flex-direction: column; align-items: flex-start; gap: 28px; }
    .driver-landing .footer-inner { align-items: flex-start; gap: 25px; }
    .driver-landing .site-footer nav { font-size: 0.75rem; gap: 18px; }
}
@media (max-width: 360px) {
    .phone { width: 250px; transform: rotate(3deg); }
    .hero-visual { height: 555px; }
    .floating-ticket { padding: 12px; }
}
@media (prefers-reduced-motion: reduce) { .button { transition: none; } }