/* --- tailwind --- utilitaires compiles, fusionnes ici pour eviter
   une seconde requete bloquante au rendu. Source : tailwind.input.css */
*,:after,:before{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }::backdrop{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }/*! tailwindcss v3.4.17 | MIT License | https://tailwindcss.com*/*,:after,:before{box-sizing:border-box;border:0 solid #e5e7eb}:after,:before{--tw-content:""}:host,html{line-height:1.5;-webkit-text-size-adjust:100%;-moz-tab-size:4;-o-tab-size:4;tab-size:4;font-family:ui-sans-serif,system-ui,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;font-feature-settings:normal;font-variation-settings:normal;-webkit-tap-highlight-color:transparent}body{margin:0;line-height:inherit}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,pre,samp{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-feature-settings:normal;font-variation-settings:normal;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}button,input,optgroup,select,textarea{font-family:inherit;font-feature-settings:inherit;font-variation-settings:inherit;font-size:100%;font-weight:inherit;line-height:inherit;letter-spacing:inherit;color:inherit;margin:0;padding:0}button,select{text-transform:none}button,input:where([type=button]),input:where([type=reset]),input:where([type=submit]){-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dd,dl,figure,h1,h2,h3,h4,h5,h6,hr,p,pre{margin:0}fieldset{margin:0}fieldset,legend{padding:0}menu,ol,ul{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::-moz-placeholder,textarea::-moz-placeholder{opacity:1;color:#9ca3af}input::placeholder,textarea::placeholder{opacity:1;color:#9ca3af}[role=button],button{cursor:pointer}:disabled{cursor:default}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}[hidden]:where(:not([hidden=until-found])){display:none}.visible{visibility:visible}.flex{display:flex}.w-full{width:100%}.transform{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.flex-wrap{flex-wrap:wrap}.items-center{align-items:center}.justify-between{justify-content:space-between}.gap-4{gap:1rem}.gap-6{gap:1.5rem}.gap-x-5{-moz-column-gap:1.25rem;column-gap:1.25rem}.gap-y-2{row-gap:.5rem}.scroll-smooth{scroll-behavior:smooth}

@font-face{font-family:Montserrat;font-style:normal;font-weight:400;font-display:swap;src:url('assets/montserrat-400.woff') format('woff')}
@font-face{font-family:Montserrat;font-style:normal;font-weight:500;font-display:swap;src:url('assets/montserrat-500.woff') format('woff')}
@font-face{font-family:Montserrat;font-style:normal;font-weight:600;font-display:swap;src:url('assets/montserrat-600.woff') format('woff')}
@font-face{font-family:Montserrat;font-style:normal;font-weight:700;font-display:swap;src:url('assets/montserrat-700.woff') format('woff')}
@font-face{font-family:Montserrat;font-style:normal;font-weight:800;font-display:swap;src:url('assets/montserrat-800.woff') format('woff')}
@font-face{font-family:Caveat;font-style:normal;font-weight:500;font-display:swap;src:url('assets/caveat-500.woff') format('woff')}
:root{--green:#1bab81;--green-accessible:#087b5b;--ink:#152e28;--muted:#65746e;--mint:#e8f6f2;--paper:#f7f9f6;--line:#dce5df;--yellow:#ffe08a}
*{box-sizing:border-box}html{scroll-padding-top:105px}body{margin:0;color:var(--ink);font-family:Montserrat,Arial,sans-serif;font-size:15px;line-height:1.7;-webkit-font-smoothing:antialiased;background:#fff}button,a,input,summary{-webkit-tap-highlight-color:transparent}button{font:inherit}a{color:inherit;text-decoration:none}button,a,summary{touch-action:manipulation}button{cursor:pointer}img{max-width:100%;height:auto}button:focus-visible,a:focus-visible,summary:focus-visible,[tabindex]:focus-visible{outline:3px solid var(--green-accessible);outline-offset:5px}::selection{background:var(--yellow);color:var(--ink)}[x-cloak]{display:none!important}.icon-library{position:absolute;width:0;height:0;overflow:hidden}.icon{width:22px;height:22px;flex-shrink:0;display:inline-block;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;vertical-align:middle}.icon.small{width:18px;height:18px}.icon.tiny{width:15px;height:15px}.shell{max-width:1320px;width:calc(100% - 112px);margin-inline:auto}.section-space{padding-block:108px}.eyebrow{font-size:10px;font-weight:700;letter-spacing:1.7px;line-height:1.7;margin:0 0 23px;display:flex;align-items:center;gap:10px}.status-dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--green);flex-shrink:0}.btn{display:inline-flex;justify-content:center;align-items:center;gap:18px;padding:17px 23px;border:1px solid transparent;border-radius:7px;font-size:12px;font-weight:600;line-height:1.5;transition:background .2s,transform .2s,box-shadow .2s;min-height:52px}.btn:hover{transform:translateY(-2px);box-shadow:0 6px 16px #112d2410}.btn-green{background:var(--green);color:#052d23}.btn-green:hover{background:#23bf91}.btn-dark{background:var(--ink);color:#fff}.btn-dark:hover{background:#245143}.btn-outline-light{border-color:#637f73;color:#fff}.btn-outline-light:hover{background:#ffffff0a}.text-link{display:inline-flex;align-items:center;gap:13px;font-size:12px;font-weight:600;line-height:1.6}.text-link>.icon{transition:transform .2s}.text-link:hover>.icon{transform:translateX(4px)}.text-link:hover{text-decoration:underline;text-underline-offset:6px}.skip-link{position:fixed;top:10px;left:15px;padding:10px 20px;background:var(--ink);color:white;z-index:100;transform:translateY(-160%)}.skip-link:focus{transform:none}.announcement{background:var(--mint);text-align:center;padding:8px 18px;font-size:10px;font-weight:500;letter-spacing:.1px}.announcement a:hover{text-decoration:underline}.announcement span{margin-left:15px;font-size:16px;line-height:10px}.site-header{background:#fff;position:sticky;top:0;z-index:40;border-bottom:1px solid #edf0ec}.site-header>.shell{height:86px}.brand{display:block;flex-shrink:0}.brand img{width:156px;height:auto}.desktop-nav{display:flex;gap:30px;margin-left:auto;margin-right:26px;align-items:center;font-size:11px;font-weight:500}.desktop-nav a{position:relative;padding-block:12px}.desktop-nav a:after{content:'';position:absolute;bottom:4px;left:0;width:0;height:2px;background:var(--green);transition:width .2s}.desktop-nav a:hover:after{width:100%}.header-actions .btn{font-size:11px;min-height:43px;padding:11px 18px;gap:15px}.login-link{display:flex;gap:6px;font-size:11px;font-weight:500;align-items:center}.login-link .icon{width:13px;height:13px}.menu-toggle{display:none}.mobile-nav{display:none}
/* An editorial opening and a composed illustration of the actual use cases. */
.hero{background:var(--paper);overflow:hidden}.hero-grid{display:grid;grid-template-columns:1.04fr 1fr;gap:24px;min-height:656px;align-items:center;padding-block:64px 48px}.hero-copy{position:relative;z-index:2;padding-block:20px}.hero h1{font-size:clamp(48px,4.3vw,66px);font-weight:600;letter-spacing:-3.3px;line-height:1.09;margin:0 0 27px;max-width:640px}.hero h1 span{color:var(--green-accessible);position:relative}.hero h1 span:after{content:'';height:3px;background:var(--green);position:absolute;bottom:-10px;left:0;right:4px;transform:rotate(-2deg);opacity:.65}.hero-description{font-size:15px;line-height:1.9;max-width:475px;color:#596a62;margin-bottom:30px}.hero-buttons{margin-bottom:18px}.hero-buttons .btn{font-size:12px}.hero-buttons .text-link{font-size:11px;gap:8px}.play-circle{border:1px solid #bccac1;border-radius:50%;height:30px;width:30px;display:grid;place-items:center}.play-circle .icon{width:13px;height:13px;transform:translateX(-1px)}.hero-reassurance{font-size:10px;color:#63726a}.hero-reassurance>span{display:flex;gap:5px;align-items:center}.hero-reassurance>span+span{border-left:1px solid #c4cfc7;padding-left:18px}.hero-reassurance .icon{color:var(--green-accessible)}.hero-reassurance strong{font-weight:600;color:var(--ink)}.hero-discover{display:inline-flex;align-items:center;gap:10px;font-size:10px;margin-top:42px;color:#64766c}.down-arrow{width:24px;height:30px;display:grid;place-items:center;border:1px solid #d4ded6;border-radius:20px;color:var(--ink)}.hero-stage{height:500px;position:relative;min-width:0;margin-left:10px}.brand-orbit{position:absolute;border:1px solid #d2e6da;border-radius:50%;pointer-events:none}.orbit-one{width:620px;height:620px;left:48px;top:-65px}.orbit-two{width:484px;height:484px;left:116px;top:3px;background:#e5eee51a}.stage-caption{position:absolute;top:9px;right:15px;font-size:10px;letter-spacing:3px;color:#6b8778}.dashboard-card{position:absolute;top:77px;left:2px;width:100%;border:1px solid #dae4dd;border-radius:12px;background:white;box-shadow:0 28px 60px -25px #213e3a35;transform:rotate(-1.5deg);overflow:hidden}.dashboard-top{height:46px;padding:0 16px;display:flex;align-items:center;gap:12px;border-bottom:1px solid #edf1ec}.dashboard-top img{width:91px;height:auto}.dashboard-top>span:nth-child(2){font-size:8px;border-left:1px solid var(--line);padding-left:12px;color:#708176}.mini-avatar{margin-left:auto;background:#e1eee6;border:3px solid #fff;border-radius:50%;height:27px;width:27px;display:grid;place-items:center;font-size:8px;font-weight:600;color:#31654c}.dashboard-layout{display:grid;grid-template-columns:51px 1fr}.dashboard-sidebar{padding-top:18px;display:flex;align-items:center;flex-direction:column;gap:12px;border-right:1px solid #edf1ec;background:#fbfcfa}.dashboard-sidebar>span{display:grid;place-items:center;width:31px;height:32px;border-radius:5px;color:#8c9c90}.dashboard-sidebar>.active{background:#def2e6;color:#188660}.dashboard-sidebar .icon{width:17px;height:17px}.dashboard-content{padding:23px 23px 15px}.dash-greeting{display:flex;justify-content:space-between;align-items:center;margin-bottom:21px}.dash-greeting p{font-size:7px;letter-spacing:1px;color:#8a978e;margin:0 0 4px}.dash-greeting h2{font-size:18px;line-height:1.4;letter-spacing:-.65px;font-weight:600}.dash-greeting>.icon{width:16px;color:#889b90}.dash-metrics{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:20px}.dash-metrics>div{background:#f5f8f2;border:1px solid #e8ede5;padding:12px;border-radius:5px}.dash-metrics>div+div{background:#fffcf3;border-color:#f1ead7}.dash-metrics>div>span{font-size:8px;display:block;color:#677365;margin-bottom:3px}.dash-metrics strong{display:block;font-size:26px;line-height:1.3;font-weight:600;letter-spacing:-1px}.dash-metrics small{font-size:9px;font-weight:400;letter-spacing:0;margin-left:4px}.dash-section-label{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px;font-size:8px}.dash-section-label strong{font-weight:600;font-size:9px}.dash-section-label>span{color:#7c8a80}.dash-task{display:flex;align-items:center;gap:10px;padding:11px 0;border-bottom:1px solid #eef1ec}.task-icon{width:29px;height:29px;border-radius:6px;display:grid;place-items:center;flex-shrink:0}.amber{background:#fff2ce;color:#a4791a}.mint{background:#e1f2e9;color:#3b8265}.sky{background:#e9eef8;color:#6a809b}.dash-task>div{display:flex;flex-direction:column;gap:2px;flex:1}.dash-task strong{font-size:9px;font-weight:600}.dash-task>div>span{font-size:7px;color:#859086}.task-pill{font-size:7px;white-space:nowrap;background:#fff2ce;color:#826626;padding:3px 6px;border-radius:3px}.task-date{font-size:7px;color:#7a897e}.dash-task>.icon{width:12px;height:12px;color:#6d7c72}.dash-complete{display:flex;align-items:center;gap:6px;margin-top:13px;font-size:7px;color:#75917e}.dash-complete .status-dot{width:4px;height:4px}.floating-mileage{position:absolute;left:-28px;bottom:20px;display:flex;align-items:center;gap:11px;padding:14px 19px;background:white;border:1px solid #e0e9df;border-radius:9px;box-shadow:0 10px 30px #284b3921;transform:rotate(1.5deg)}.round-icon{display:grid;place-items:center;width:35px;height:35px;background:#e6f5ec;border-radius:50%;color:#138461}.floating-mileage>div>span{font-size:8px;color:#859086;display:block;margin-bottom:3px}.floating-mileage strong{font-size:10px;display:flex;align-items:center;gap:10px;font-weight:600}.floating-mileage strong .icon{color:var(--green-accessible);width:12px}.floating-cost{position:absolute;width:196px;padding:17px 19px;background:#e0f0ce;border:1px solid #cadfb3;border-radius:9px;right:-20px;top:11px;transform:rotate(4deg);box-shadow:0 8px 20px #29472310}.floating-cost>.flex>span{font-size:6px;font-weight:600;letter-spacing:.7px}.floating-cost .icon{width:15px;height:15px;color:#4a6d37}.floating-cost>strong{display:block;font-size:31px;letter-spacing:-1.5px;line-height:1.3;margin-top:10px;font-weight:600}.floating-cost small{font-size:8px;letter-spacing:0;font-weight:500}.floating-cost p{font-size:7px;color:#68785e;margin-top:3px}.mini-bars{display:flex;align-items:end;gap:5px;height:38px;margin-top:9px}.mini-bars i{background:#71a952;flex:1;border-radius:2px 2px 0 0;height:65%}.mini-bars i:nth-child(2n){height:85%}.mini-bars i:nth-child(3n){height:55%}.mini-bars i:nth-child(5n){height:100%}.mini-bars i:nth-child(n+8){background:#91bb74}.example-label{font-size:8px;color:#748777;letter-spacing:.25px;text-align:center;margin-top:18px}.hero-stage>.example-label{position:absolute;bottom:-20px;right:0;text-align:right}
/* Personas are the main navigation into the value of the product. */
.trust-strip{border-block:1px solid var(--line);padding-block:33px;background:white}.trust-layout{display:flex;gap:35px;align-items:center}.trust-layout>p{flex-shrink:0;font-size:10px;color:#667369;line-height:1.8;padding-right:28px;border-right:1px solid var(--line)}.trust-layout strong{font-weight:600;color:var(--ink)}.client-logos{display:flex;justify-content:space-between;align-items:center;gap:30px;flex:1}.client-logos img{max-width:112px;width:12%;height:35px;object-fit:contain;filter:grayscale(1);opacity:.66;transition:filter .2s,opacity .2s}.client-logos img:hover{filter:none;opacity:1}.section-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:45px;margin-bottom:42px}.section-heading h2,h2{font-weight:500;font-size:42px;letter-spacing:-1.7px;line-height:1.2;margin:0}.muted-heading{color:#849287}.section-heading>p{font-size:13px;line-height:1.9;color:#6c7b70;margin-bottom:6px;max-width:360px}.section-heading>p>strong{display:block;margin-top:8px;font-weight:500;color:var(--ink)}.personas .eyebrow{margin-bottom:18px}.persona-tabs{display:grid;grid-template-columns:repeat(4,1fr);border-bottom:1px solid var(--line);margin-bottom:35px;gap:20px}.persona-tabs button{border:0;border-bottom:2px solid transparent;background:transparent;padding:19px 2px;color:#7b897e;display:flex;align-items:center;gap:12px;font-size:11px;font-weight:500;white-space:nowrap;text-align:left;margin-bottom:-1px}.persona-tabs button .icon{width:18px;height:18px}.persona-tabs button[aria-selected=true]{border-color:var(--green);color:var(--ink);font-weight:600}.persona-tabs button[aria-selected=true]>.icon{color:var(--green-accessible)}.persona-tabs button:hover{color:var(--green-accessible)}.persona-panel{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center}.persona-copy{padding:23px 0 20px}.persona-pain{color:var(--green-accessible);font-weight:500;font-size:12px;margin-bottom:15px}.persona-copy h3{font-size:30px;font-weight:500;line-height:1.25;letter-spacing:-1px;margin-bottom:17px;max-width:450px;min-height:76px}.persona-description{font-size:12px;color:#6b7a70;line-height:1.9;min-height:72px;max-width:450px}.benefit-list{margin:24px 0 28px;padding:0;list-style:none;display:flex;flex-direction:column;gap:12px}.benefit-list li{display:flex;align-items:flex-start;gap:9px;font-size:11px}.benefit-list li>span:first-child{display:grid;place-items:center;width:17px;height:17px;background:var(--mint);border-radius:50%;flex-shrink:0;color:var(--green-accessible);margin-top:1px}.benefit-list .icon{width:10px;height:10px}.persona-visual{background:#f2f6f0;border-radius:10px;padding:26px 28px 17px;position:relative;overflow:hidden;min-height:389px;transition:background .3s}.persona-visual:before{content:'';position:absolute;right:-95px;top:-100px;width:320px;height:320px;border:1px solid #dce7d8;border-radius:50%;pointer-events:none}.persona-visual-1{background:#f6f4eb}.persona-visual-2{background:#edf5f1}.persona-visual-3{background:#eff3f7}.persona-visual-label{display:flex;align-items:center;gap:7px;font-size:8px;font-weight:600;letter-spacing:1px;margin-bottom:17px;color:#536d59}.persona-visual-label .status-dot{width:5px;height:5px}.scenario-card{border:1px solid #e1e7df;background:white;border-radius:8px;box-shadow:0 9px 20px #31492b08;position:relative}.scenario-header{display:flex;align-items:center;gap:9px;padding:15px 16px;border-bottom:1px solid #edf0eb;font-size:8px;font-weight:600}.scenario-icon{color:var(--green-accessible)}.scenario-icon .icon{width:16px;height:16px}.scenario-dots{margin-left:auto;font-size:18px;line-height:12px;color:#99a696}.scenario-summary{padding:20px 19px;display:flex;align-items:center;gap:16px}.scenario-summary>strong{font-size:37px;letter-spacing:-1.5px;line-height:1;font-weight:500;white-space:nowrap}.scenario-summary>div{display:flex;flex-direction:column;gap:5px}.scenario-summary b{font-size:9px;font-weight:600}.scenario-summary>div>span{font-size:7px;color:#8c998c}.scenario-rows{padding:0 18px}.scenario-row{display:flex;gap:9px;align-items:center;padding:12px 0;border-bottom:1px solid #edf0eb}.row-dot{width:5px;height:5px;flex-shrink:0;border-radius:50%;background:currentColor}.scenario-row>div{display:flex;flex-direction:column;gap:4px;flex:1}.scenario-row strong{font-size:8px;font-weight:500}.scenario-row>div>span{font-size:7px;color:#81907e}.scenario-row>b{font-size:7px;font-weight:500;white-space:nowrap;border-radius:3px;background:#f5f7f1;padding:3px 6px}.tone-amber{color:#906613}.tone-green{color:#247254}.scenario-outcome{display:flex;align-items:center;gap:7px;padding:15px 18px;color:#447458;font-size:7px}.scenario-outcome .icon{width:12px;height:12px}.persona-visual>.example-label{margin-top:13px}.noscript-note{padding:24px;background:var(--mint)}
/* A short causal story, from scattered information to a useful action. */
.connected-section{background:#143d30;color:#fff;position:relative;overflow:hidden}.connected-section:before{content:'';width:640px;height:640px;border:1px solid #ffffff0a;border-radius:50%;position:absolute;right:-320px;top:-250px;pointer-events:none}.connected-section .eyebrow{color:#89c2a4}.connected-section h2{font-size:38px;letter-spacing:-1.4px}.connected-section .section-heading>p{color:#a1b7a9;font-size:12px;max-width:315px}.connected-section .section-heading{margin-bottom:50px}.connection-line{display:flex;align-items:center;gap:22px;color:#618776;margin-bottom:30px}.connection-line>span{height:1px;flex:1;background:#416553}.connection-line .icon{height:17px;width:17px}.mechanism-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:40px}.mechanism{position:relative}.mechanism-number{display:flex;align-items:center;gap:13px;font-size:11px;color:#7ca38d}.mechanism-number>span{font-size:9px;letter-spacing:1.5px;color:#b8d2c2}.mechanism-art{height:140px;display:flex;align-items:center}.source-art{display:flex;flex-wrap:wrap;gap:8px;align-content:center;padding-right:20px;max-width:310px}.source-art>span{display:inline-flex;align-items:center;gap:7px;font-size:8px;border:1px solid #40634e;padding:7px 10px;border-radius:5px;background:#1b4435;color:#c8dbcb}.source-art .icon{width:13px;height:13px;color:#74b590}.insight-art{flex-direction:column;justify-content:center;align-items:start;gap:9px}.insight-line{display:flex;width:80%;gap:5px;align-items:end;height:53px;border-bottom:1px solid #467558;padding-bottom:5px}.insight-line i{background:#447e59;flex:1;height:32%;border-radius:2px 2px 0 0}.insight-line i:nth-child(2){height:46%}.insight-line i:nth-child(3){height:65%;background:#629970}.insight-line i:nth-child(4){height:82%;background:#9eb66e}.insight-line i:nth-child(5){height:100%;background:var(--yellow)}.insight-tag{font-size:8px;color:#e3deb1;display:flex;gap:6px;align-items:center}.insight-tag .icon{width:12px;height:12px}.action-art{gap:12px}.action-check{width:42px;height:42px;display:grid;place-items:center;background:#28553b;color:#abd393;border-radius:50%}.action-art>div{font-size:10px;color:#9fbba6}.action-art strong{font-weight:500;color:#d7e8d9}.action-art>.icon{color:#80b78d;width:20px;margin-left:13px}.mechanism h3{font-size:18px;font-weight:500;line-height:1.5;letter-spacing:-.4px;margin-bottom:13px}.mechanism>p{font-size:11px;color:#a4bba9;line-height:1.95;max-width:315px}.connections-footer{margin-top:42px;border-top:1px solid #365b46;padding-top:30px;display:flex;align-items:center;justify-content:space-between;gap:20px}.connections-footer>div>span{font-size:7px;letter-spacing:1.2px;color:#93ae9b}.connections-footer p{font-size:14px;font-weight:500;letter-spacing:.2px;margin-top:7px}.connections-footer i{font-style:normal;color:#6a8d75;margin-inline:10px}.connections-footer small{display:block;color:#9eb7a6;font-size:8px;margin-top:7px}.connections-footer .btn{font-size:11px;min-height:49px;padding:13px 20px}
/* Photography and a single, attributable customer statement. */
.driver-grid{display:grid;grid-template-columns:1fr .94fr;gap:90px;align-items:center}.driver-photo{height:550px;position:relative;background:var(--ink);border-radius:9px;isolation:isolate}.driver-photo>img{height:100%;width:100%;object-fit:cover;object-position:64% center;border-radius:9px}.driver-photo:after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,#0922195c 0,transparent 25%,transparent 70%,#09221940);border-radius:9px;pointer-events:none}.photo-caption{position:absolute;left:24px;top:25px;font-size:8px;letter-spacing:1.3px;color:white;z-index:1;display:flex;align-items:center;gap:8px;text-shadow:0 1px 8px #000}.photo-caption .status-dot{background:#b7e0bd}.driver-photo-note{position:absolute;bottom:28px;right:-24px;background:#f5f6e8;padding:18px 24px;z-index:1;display:flex;align-items:center;gap:18px;border-radius:6px;box-shadow:0 10px 30px #12291d15}.driver-photo-note>.icon{color:#638151;width:26px;height:26px}.driver-photo-note>span{font-size:10px;line-height:1.9;color:#698061}.driver-photo-note strong{font-weight:500;color:var(--ink)}.driver-copy .eyebrow{margin-bottom:19px}.driver-copy h2{font-size:36px;letter-spacing:-1.5px;line-height:1.25}.section-description{font-size:13px;color:#718074;line-height:1.9;margin-top:23px;max-width:450px}.driver-benefit{display:flex;gap:18px;align-items:flex-start;margin-top:23px}.driver-benefit>span{font-size:10px;color:var(--green-accessible);margin-top:3px}.driver-benefit h3{font-size:12px;font-weight:600;margin-bottom:5px}.driver-benefit p{font-size:11px;color:#718074;line-height:1.9;max-width:360px}.driver-copy>.text-link{margin-top:29px}.testimonial-section{background:#f6f7f1;padding-block:76px}.testimonial-grid{display:grid;grid-template-columns:.82fr 1.35fr;gap:88px;align-items:center}.testimonial-intro .eyebrow{font-size:9px}.testimonial-intro h2{font-size:36px;letter-spacing:-1.4px}.testimonial-intro .text-link{margin-top:28px;font-size:11px}.testimonial{margin:0;position:relative;padding-left:32px;border-left:1px solid #dce3d6}.quote-mark{font-size:70px;line-height:.85;display:block;color:var(--green);font-weight:500;margin-bottom:7px}.testimonial blockquote{font-size:24px;line-height:1.5;letter-spacing:-.65px;font-weight:500;margin:0 0 24px;max-width:700px}.testimonial figcaption{display:flex;justify-content:space-between;align-items:center;gap:20px}.testimonial-person{display:flex;align-items:center;gap:11px}.person-initial{width:35px;height:35px;border-radius:50%;display:grid;place-items:center;font-size:12px;background:#dfe8d8;color:#64834d}.testimonial-person>div{display:flex;flex-direction:column;gap:3px}.testimonial-person strong{font-size:11px;font-weight:600}.testimonial-person>div>span{font-size:9px;color:#7f8c7a}.testimonial figcaption>img{object-fit:contain;width:109px;height:37px;mix-blend-mode:multiply}.testimonial-source{display:inline-block;font-size:8px;color:#727e6c;margin-top:18px;text-decoration:underline;text-underline-offset:3px}
/* Commercial clarity, without an invented tariff grid. */
.pricing-grid{display:grid;grid-template-columns:1fr .84fr;align-items:center;gap:100px}.pricing-copy h2{font-size:40px;letter-spacing:-1.6px}.pricing-copy .eyebrow{font-size:9px}.trial-duration{display:flex;align-items:center;gap:29px;margin-block:33px}.trial-duration>strong{font-weight:500;font-size:84px;color:var(--green-accessible);line-height:1;letter-spacing:-5px;white-space:nowrap}.trial-duration>strong>span{font-size:18px;letter-spacing:-.7px;margin-left:7px}.trial-duration p{border-left:1px solid var(--line);padding-left:23px;font-size:10px;line-height:1.9;color:#718074}.pricing-copy>.text-link{font-size:11px;margin-top:12px}.pricing-card{background:#ecf4e9;border:1px solid #dae5d5;border-radius:10px;padding:32px 34px 25px;position:relative}.pricing-card-top{display:flex;align-items:center;gap:10px;justify-content:space-between;border-bottom:1px solid #cfddc8;padding-bottom:21px;margin-bottom:28px}.pricing-card-top .eyebrow{font-size:8px;letter-spacing:1px;margin:0}.price-tag{padding:5px 8px;border-radius:4px;border:1px solid #c6d4bc;color:#546f48;font-size:7px;white-space:nowrap}.price-from{font-size:10px;color:#637b5a}.price{display:flex;align-items:center;gap:15px;font-size:76px;letter-spacing:-4.5px;line-height:1.25;margin-top:5px;font-weight:500}.price>span{font-size:22px;letter-spacing:-.7px;line-height:1.7}.price small{display:block;font-size:8px;color:#657b5d;letter-spacing:0;font-weight:400}.pricing-explainer{font-size:11px;color:#63775b;line-height:1.9;margin:17px 0 23px;max-width:300px}.pricing-card>.btn{font-size:11px;justify-content:space-between}.pricing-options{border-top:1px solid #cfddc8;padding-top:20px;margin-top:23px}.pricing-options>span{font-size:7px;font-weight:600;letter-spacing:.7px}.pricing-options>p{font-size:10px;margin-top:6px;font-weight:500}.pricing-options i{font-style:normal;margin-inline:4px;color:#8a9b7f}.pricing-options small{display:block;font-size:8px;line-height:1.8;color:#6d7c63;margin-top:11px}.faq-section{padding-top:15px}.faq-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:100px}.faq-grid h2{font-size:29px;line-height:1.35;letter-spacing:-1px}.faq-grid .eyebrow{font-size:9px}.faq-grid .text-link{margin-top:29px;font-size:10px}.faq-list{border-top:1px solid var(--line)}.faq-list details{border-bottom:1px solid var(--line)}.faq-list summary{display:flex;gap:20px;align-items:center;justify-content:space-between;padding:22px 0;list-style:none;cursor:pointer;font-size:11px;font-weight:500;line-height:1.8}.faq-list summary::-webkit-details-marker{display:none}.faq-list summary .icon{width:17px;height:17px;transition:transform .25s;stroke-width:1.4;color:#567e62}.faq-list details[open] summary .icon{transform:rotate(45deg)}.faq-list details[open] summary{color:var(--green-accessible)}.faq-list details>div{padding:0 27px 22px 0}.faq-list p{font-size:11px;line-height:1.9;color:#6b7b6e}.final-cta{background:var(--ink);color:#fff;padding-block:65px}.final-cta>.shell{display:flex;align-items:center;justify-content:space-between;gap:40px}.final-cta h2{font-size:30px;letter-spacing:-1px;line-height:1.4}.final-cta .eyebrow{color:#9abbaa;font-size:8px;margin-bottom:15px}.final-cta .btn{font-size:11px;flex-shrink:0;gap:26px}.footer{background:#f9faf7;padding-block:53px 22px}.footer-top{display:flex;justify-content:space-between;gap:60px;margin-bottom:48px}.footer-top>.brand,.footer .brand img{width:148px}.footer-top>div:first-child>p{font-size:11px;color:#7d887a;margin-top:18px;line-height:1.9}.footer-links{display:grid;grid-template-columns:1fr 1fr;align-content:start;gap:15px 60px;font-size:10px;margin-top:3px}.footer a:hover{color:var(--green-accessible)}.footer-contact{display:flex;flex-direction:column;gap:8px}.footer-contact>span{font-size:8px;letter-spacing:1px;margin-bottom:2px;color:#7a8b77}.footer-contact>a{font-size:12px;font-weight:500}.footer-contact .linkedin-link{font-size:9px;font-weight:400;margin-top:6px;color:#6c7d65}.footer-bottom{border-top:1px solid var(--line);padding-top:20px;display:flex;align-items:center;gap:30px;font-size:8px;color:#83917d}.footer-bottom>div{display:flex;gap:21px;margin-left:35px}.prototype-label{margin-left:auto;font-size:7px;letter-spacing:.7px}.dialog-open{overflow:hidden}.product-dialog{border:1px solid var(--line);border-radius:12px;padding:28px;width:min(1000px,calc(100% - 32px));max-height:90vh;overflow:auto;color:var(--ink);background:#f9fbf7}.product-dialog::backdrop{background:#102b22b8;backdrop-filter:blur(7px)}.dialog-heading{display:flex;justify-content:space-between;gap:20px}.dialog-heading h2{font-size:26px;letter-spacing:-.7px}.dialog-heading .eyebrow{margin-bottom:8px;font-size:8px}.dialog-close{background:#e7efe2;border:0;display:grid;place-items:center;width:36px;height:36px;font-size:25px;border-radius:50%;color:var(--ink);flex-shrink:0}.dialog-intro{font-size:11px;color:#6e7b67;max-width:700px;margin-block:17px}.product-capture{min-height:160px;background:#fff;border:1px solid var(--line);border-radius:6px;overflow:hidden}.product-capture img{display:block;width:100%;height:auto}.dialog-footer{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-top:22px}.dialog-footer p{font-size:11px}.dialog-footer .btn{font-size:10px;min-height:44px;padding:11px 17px}
/* The source client logos include white margins: crop them with CSS, preserve the files. */
.client-logos img{object-fit:cover;height:45px;opacity:.78}.testimonial figcaption>img{object-fit:cover}
.desktop-nav,.login-link{font-size:12px}.section-heading>p{font-size:14px}.persona-pain{font-size:13px}.persona-description{font-size:14px;min-height:96px}.benefit-list li{font-size:12px}.mechanism>p{font-size:13px}.connected-section .section-heading>p{font-size:13px}.section-description{font-size:14px}.driver-benefit h3{font-size:13px}.driver-benefit p{font-size:13px}.pricing-explainer{font-size:13px}.faq-list summary{font-size:13px}.faq-list p{font-size:13px}
@media(min-width:1500px){.hero-grid{min-height:730px;gap:60px}.hero-stage{height:525px}.dashboard-card{top:83px}.hero h1{font-size:71px}.hero-description{font-size:16px}.floating-mileage{bottom:11px}.floating-cost{right:-10px;top:10px}}
@media(max-width:1200px){.shell{width:calc(100% - 72px)}.desktop-nav{gap:22px;margin-right:12px}.header-actions{gap:17px}.brand img{width:136px}.header-demo.btn{padding-inline:13px;font-size:10px}.hero h1{font-size:54px;letter-spacing:-2.8px}.hero-grid{gap:25px}.hero-stage{height:470px}.dashboard-card{top:70px}.dashboard-content{padding:20px 16px 13px}.floating-cost{width:175px;right:-10px;top:10px;padding:14px 16px}.floating-mileage{left:-12px;bottom:0}.hero-buttons{gap:16px}.hero-buttons .text-link{font-size:10px}.hero-buttons .btn{padding-inline:17px}.persona-tabs{gap:12px}.persona-tabs button{font-size:10px;gap:8px}.persona-panel{gap:40px}.persona-visual{padding-inline:20px}.scenario-summary{gap:12px}.scenario-summary>strong{font-size:32px}.driver-grid{gap:65px}.driver-copy h2{font-size:32px}.pricing-grid{gap:65px}.pricing-card{padding-inline:26px}.pricing-card-top{flex-wrap:wrap;gap:12px}.faq-grid{gap:60px}.client-logos{gap:25px}.trust-layout{gap:25px}.trust-layout>p{padding-right:20px}.testimonial-grid{gap:55px}.testimonial blockquote{font-size:22px}.mechanism-grid{gap:30px}.hero-description{font-size:14px}}
@media(max-width:1023px){.shell{width:calc(100% - 48px)}.desktop-nav{gap:18px;margin-right:0}.header-actions .login-link{display:none}.site-header>.shell{height:75px}.header-actions .btn{font-size:9px}.hero h1{font-size:46px;letter-spacing:-2.4px}.hero .eyebrow{font-size:8px;letter-spacing:1.1px}.hero-grid{min-height:620px;gap:24px;padding-block:55px}.hero-description{font-size:12px;max-width:365px}.hero-stage{height:437px;margin-left:0}.dashboard-layout{grid-template-columns:38px 1fr}.dashboard-content{padding:18px 13px 12px}.dashboard-top{gap:8px;padding-inline:12px}.dashboard-top>span:nth-child(2){font-size:7px}.dashboard-sidebar>span{width:26px;height:26px}.dashboard-sidebar .icon{width:15px;height:15px}.dash-greeting h2{font-size:16px}.dash-greeting p{font-size:6px}.dash-metrics{margin-bottom:14px}.dash-metrics>div{padding:10px}.dash-metrics strong{font-size:24px}.dash-metrics small{font-size:7px}.dash-task{gap:7px;padding:10px 0}.dash-task strong{font-size:8px}.dash-task>div>span{font-size:6px}.task-icon{width:24px;height:24px}.task-pill{font-size:6px}.floating-cost{width:165px;padding:13px 14px;top:1px;right:-8px}.floating-cost>strong{font-size:26px}.mini-bars{height:31px}.floating-mileage{bottom:-10px;padding:12px 14px}.floating-mileage strong{font-size:9px}.hero-stage>.example-label{bottom:-37px;font-size:7px}.stage-caption{font-size:8px;right:20px;top:-30px}.hero-discover{margin-top:25px}.hero-reassurance{gap:9px}.hero-reassurance>span+span{padding-left:9px;font-size:8px}.hero-reassurance>span{font-size:8px}.hero-buttons{gap:14px}.hero-buttons .btn{font-size:11px}.hero-buttons .text-link{font-size:10px}.hero-discover{font-size:9px}.trust-layout{gap:22px}.client-logos{gap:20px}.client-logos img{width:12.5%;height:27px}.trust-layout>p{font-size:9px;padding-right:20px}.section-space{padding-block:80px}.section-heading h2{font-size:36px}.section-heading>p{font-size:11px}.persona-panel{gap:30px}.persona-tabs button{font-size:9px;gap:7px}.persona-tabs button .icon{width:15px}.persona-copy h3{font-size:25px;min-height:63px}.persona-description{font-size:11px;min-height:84px}.benefit-list li{font-size:10px}.persona-copy>.text-link{font-size:10px}.persona-visual{padding:24px 17px 14px}.scenario-summary{padding:20px 13px}.scenario-rows{padding-inline:13px}.scenario-summary>strong{font-size:29px}.scenario-summary b{font-size:8px}.scenario-summary>div>span{font-size:6px}.scenario-header{padding-inline:13px;font-size:7px;gap:6px}.scenario-row strong{font-size:7px}.scenario-row>b{font-size:6px}.scenario-row>div>span{font-size:6px}.scenario-outcome{font-size:6px;padding-inline:13px}.mechanism-grid{gap:23px}.connected-section h2{font-size:32px}.connected-section .section-heading>p{font-size:10px}.mechanism h3{font-size:15px}.mechanism>p{font-size:10px}.source-art{gap:6px;padding-right:0}.source-art>span{font-size:7px;padding:6px 8px}.mechanism-art{height:130px}.action-art{gap:9px}.action-art>div{font-size:9px}.action-art>.icon{margin-left:0}.driver-grid{gap:45px}.driver-photo{height:510px}.driver-copy h2{font-size:29px}.driver-copy .eyebrow{font-size:8px}.section-description{font-size:11px}.driver-benefit{gap:13px;margin-top:19px}.driver-benefit h3{font-size:10px}.driver-benefit p{font-size:10px}.driver-copy>.text-link{font-size:10px}.driver-photo-note{right:-20px;padding:15px 17px;gap:10px}.driver-photo-note>span{font-size:9px}.photo-caption{font-size:7px;left:18px}.testimonial-intro h2{font-size:32px}.testimonial-intro .eyebrow{font-size:8px}.testimonial blockquote{font-size:20px}.testimonial-grid{gap:35px}.testimonial-intro .text-link{font-size:9px}.pricing-grid{gap:40px;grid-template-columns:1fr 1fr}.pricing-copy h2{font-size:33px}.pricing-copy .eyebrow{font-size:7px}.pricing-copy>.text-link{font-size:9px}.trial-duration{gap:20px}.trial-duration>strong{font-size:70px}.trial-duration p{padding-left:15px;font-size:9px}.pricing-card{padding-inline:23px}.price{font-size:67px}.pricing-options>p{font-size:9px}.faq-section{padding-top:0}.faq-grid{gap:35px}.faq-grid h2{font-size:25px}.faq-list summary{font-size:10px}.final-cta h2{font-size:25px}.final-cta .btn{font-size:9px;padding-inline:17px;gap:15px}.footer-top{gap:35px}.footer-links{gap:15px 30px}.footer-bottom>div{margin-left:0}.footer-bottom{gap:20px}}
@media(max-width:767px){html{scroll-padding-top:90px}.shell{width:calc(100% - 40px)}.announcement{font-size:8px;padding:8px 12px;line-height:1.6}.announcement span{margin-left:6px;font-size:12px}.site-header>.shell{height:70px;gap:15px}.brand img{width:145px}.desktop-nav,.header-actions .header-demo{display:none}.menu-toggle{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:6px;width:42px;height:42px;border:1px solid #dce5dc;border-radius:7px;background:transparent}.menu-toggle>span{display:block;width:17px;height:1.5px;background:var(--ink);transition:transform .2s}.menu-toggle .menu-line-open{transform:translateY(3.75px) rotate(45deg)}.menu-toggle .menu-line-open+span{transform:translateY(-3.75px) rotate(-45deg)}.mobile-nav{position:absolute;display:flex;flex-direction:column;gap:0;background:#fff;left:0;right:0;border-bottom:1px solid var(--line);padding:12px 25px 22px;box-shadow:0 15px 20px #152e2809}.mobile-nav>a{font-size:13px;padding:13px 0}.mobile-nav>.btn{margin-top:12px;padding:15px}.hero-grid{display:flex;flex-direction:column;padding-block:44px 55px;gap:30px;min-height:0;align-items:stretch}.hero-copy{padding:0}.hero .eyebrow{font-size:8px;letter-spacing:1.2px;margin-bottom:22px}.hero h1{font-size:clamp(40px,8.7vw,62px);letter-spacing:-2.5px;line-height:1.13;margin-bottom:24px}.hero h1 span:after{height:2px;bottom:-7px}.hero-description{font-size:12px;line-height:1.9;max-width:470px;margin-bottom:24px}.hero-buttons{gap:16px;margin-bottom:18px}.hero-buttons .btn{font-size:11px;padding:15px 18px;gap:14px;min-height:50px}.hero-buttons .text-link{font-size:9px;gap:7px}.play-circle{width:26px;height:26px}.hero-reassurance{gap:14px}.hero-reassurance>span{font-size:8px}.hero-reassurance>span+span{font-size:8px;padding-left:13px}.hero-discover{display:none}.hero-stage{margin-top:28px;width:min(100%,480px);align-self:center;height:443px}.dashboard-card{top:42px;left:0}.dashboard-top{height:42px}.dashboard-layout{grid-template-columns:42px 1fr}.dashboard-content{padding:21px 16px 13px}.dashboard-sidebar{gap:10px}.dash-greeting{margin-bottom:18px}.dash-greeting h2{font-size:18px}.dash-greeting p{font-size:7px}.dash-metrics{gap:10px}.dash-metrics strong{font-size:28px}.dash-metrics small{font-size:8px}.dash-metrics>div>span{font-size:8px}.dash-task{padding:12px 0}.dash-task strong{font-size:8px}.dash-task>div>span{font-size:6px}.floating-cost{top:-18px;right:0;width:156px;padding:11px 14px}.floating-cost>strong{font-size:25px;margin-top:6px}.floating-cost p{font-size:6px}.floating-cost>.flex>span{font-size:5px}.floating-cost .mini-bars{height:24px;margin-top:6px;gap:4px}.stage-caption{top:-15px;left:9px;right:auto;font-size:7px;letter-spacing:2px}.floating-mileage{bottom:-4px;left:-4px;padding:12px 15px}.hero-stage>.example-label{bottom:-30px;font-size:6px}.orbit-one{width:450px;height:450px;left:30px;top:-25px}.orbit-two{width:340px;height:340px;left:85px;top:30px}.trust-strip{padding-block:27px}.trust-layout{display:block}.trust-layout>p{text-align:center;border:0;padding:0;font-size:9px;margin-bottom:22px;line-height:1.6}.trust-layout>p>br{display:none}.trust-layout>p>strong{margin-left:3px}.client-logos{display:grid;grid-template-columns:repeat(3,1fr);gap:25px 30px;justify-items:center}.client-logos img{width:100%;max-width:90px;height:27px}.section-space{padding-block:65px}.section-heading{display:block;margin-bottom:25px}.section-heading .eyebrow{font-size:8px;letter-spacing:1.3px;margin-bottom:16px}.section-heading h2,h2{font-size:33px;letter-spacing:-1.3px}.section-heading>p{font-size:11px;margin-top:20px;margin-bottom:0;max-width:100%}.section-heading>p>br{display:none}.section-heading>p>strong{margin-top:5px}.persona-tabs{grid-template-columns:1fr 1fr;gap:0 13px;margin-bottom:22px;border-bottom:0}.persona-tabs button{font-size:9px;padding-block:16px;border-bottom:1px solid var(--line);gap:7px;white-space:normal;line-height:1.7}.persona-tabs button[aria-selected=true]{border-bottom:2px solid var(--green)}.persona-tabs button .icon{width:16px;height:16px}.persona-panel{display:flex;flex-direction:column;align-items:stretch;gap:22px}.persona-copy{padding:8px 0 0;min-height:310px}.persona-pain{font-size:10px;margin-bottom:13px}.persona-copy h3{font-size:28px;letter-spacing:-1px;max-width:470px;margin-bottom:13px;min-height:0}.persona-description{font-size:11px;min-height:0;max-width:550px}.benefit-list{gap:10px;margin-block:20px}.benefit-list li{font-size:10px}.persona-copy>.text-link{font-size:10px}.persona-visual{padding:25px 21px 15px;min-height:0}.persona-visual-label{font-size:7px;margin-bottom:18px}.scenario-header{padding:15px;font-size:8px}.scenario-summary{padding:23px 17px;gap:17px}.scenario-summary>strong{font-size:38px}.scenario-summary b{font-size:9px}.scenario-summary>div>span{font-size:7px}.scenario-rows{padding-inline:17px}.scenario-row{padding-block:13px}.scenario-row strong{font-size:8px}.scenario-row>div>span{font-size:7px}.scenario-row>b{font-size:7px}.scenario-outcome{padding:17px;font-size:7px}.example-label{font-size:7px}.connected-section h2{font-size:30px;line-height:1.25}.connected-section .section-heading{margin-bottom:30px}.connected-section .section-heading>p{font-size:11px;max-width:100%}.connected-section .section-heading>p>br{display:block}.connection-line{display:none}.mechanism-grid{grid-template-columns:1fr;gap:26px}.mechanism{border-top:1px solid #365b46;padding-top:25px;display:grid;grid-template-columns:1fr 100px;gap:10px 20px}.mechanism-number{font-size:11px;gap:12px;grid-column:1/-1}.mechanism-number>span{font-size:8px}.mechanism-art{height:100px;grid-column:2;grid-row:2/4;align-self:center;justify-self:stretch;overflow:hidden}.mechanism h3{font-size:17px;letter-spacing:-.5px;margin:7px 0 0;line-height:1.45;grid-column:1;grid-row:2}.mechanism>p{font-size:10px;line-height:1.9;grid-column:1;grid-row:3;max-width:100%}.source-art{gap:6px;align-content:center}.source-art>span{font-size:6px;padding:5px 6px;gap:5px;line-height:1.5;width:100%}.source-art .icon{width:11px;height:11px}.insight-line{width:100%;height:50px}.insight-tag{font-size:6px;gap:5px;line-height:1.6}.action-art{flex-direction:column;justify-content:center;align-items:center;gap:10px;text-align:center}.action-art>div{font-size:8px}.action-art>.icon{display:none}.action-check{height:31px;width:31px}.action-check .icon{width:18px;height:18px}.connections-footer{margin-top:30px;padding-top:26px;align-items:flex-start;flex-direction:column;gap:22px}.connections-footer p{font-size:14px}.connections-footer small{font-size:7px;line-height:1.8}.connections-footer i{margin-inline:6px}.connections-footer .btn{font-size:10px;padding:13px 18px;min-height:46px}.driver-grid{display:flex;flex-direction:column-reverse;gap:37px;align-items:stretch}.driver-copy h2{font-size:33px}.driver-copy .eyebrow{font-size:8px}.driver-copy .section-description{font-size:12px;line-height:1.8;max-width:520px;margin-top:20px}.driver-benefit{gap:16px;margin-top:22px}.driver-benefit h3{font-size:12px}.driver-benefit p{font-size:11px;max-width:500px}.driver-copy>.text-link{font-size:11px;margin-top:24px}.driver-photo{height:435px;width:100%}.photo-caption{font-size:7px;top:20px;left:20px;letter-spacing:1px}.driver-photo>img{object-position:62% center}.driver-photo-note{right:-7px;bottom:22px;padding:16px 19px;gap:13px}.driver-photo-note>span{font-size:10px}.testimonial-section{padding-block:55px}.testimonial-grid{grid-template-columns:1fr;gap:32px}.testimonial-intro h2{font-size:33px}.testimonial-intro h2>br{display:none}.testimonial-intro .eyebrow{font-size:8px;margin-bottom:16px}.testimonial-intro .text-link{font-size:10px;margin-top:17px}.testimonial{padding-left:0;border-left:0;border-top:1px solid #dce3d6;padding-top:30px}.quote-mark{font-size:60px;margin-bottom:8px}.testimonial blockquote{font-size:23px;letter-spacing:-.7px;line-height:1.55;margin-bottom:23px}.testimonial-source{font-size:7px}.testimonial-person strong{font-size:10px}.testimonial-person>div>span{font-size:8px}.testimonial figcaption>img{width:99px}.pricing-grid{display:flex;flex-direction:column;gap:32px;align-items:stretch}.pricing-copy h2{font-size:33px}.pricing-copy .eyebrow{font-size:7px;margin-bottom:17px}.pricing-copy .section-description{font-size:12px;max-width:520px;margin-top:18px}.trial-duration{margin-block:25px;gap:27px}.trial-duration>strong{font-size:83px}.trial-duration>strong>span{font-size:19px}.trial-duration p{font-size:10px;line-height:1.9;padding-left:25px}.pricing-copy>.text-link{font-size:10px;margin-top:5px}.pricing-card{padding:27px 24px}.pricing-card-top{margin-bottom:22px;flex-wrap:nowrap}.pricing-card-top .eyebrow{font-size:7px}.price-tag{font-size:6px;padding:5px 6px}.price{font-size:80px;gap:18px;line-height:1.15;margin-top:12px}.price>span{font-size:21px}.price small{font-size:8px}.pricing-explainer{font-size:11px;margin-block:18px 23px}.pricing-card>.btn{min-height:51px;font-size:11px}.pricing-options>p{font-size:10px}.pricing-options small{font-size:8px}.faq-section{padding-top:0}.faq-grid{grid-template-columns:1fr;gap:26px}.faq-grid h2{font-size:28px}.faq-grid .eyebrow{font-size:8px;margin-bottom:15px}.faq-grid .text-link{margin-top:20px;font-size:10px}.faq-list summary{font-size:11px;padding-block:20px}.faq-list p{font-size:11px}.final-cta{padding-block:49px}.final-cta>.shell{display:flex;flex-direction:column;align-items:flex-start;gap:25px}.final-cta h2{font-size:28px;letter-spacing:-1px;line-height:1.3}.final-cta h2>br{display:none}.final-cta .eyebrow{font-size:7px;letter-spacing:1px}.final-cta .btn{font-size:10px;gap:25px;min-height:51px;padding-inline:20px}.footer{padding-top:40px}.footer-top{display:grid;grid-template-columns:1fr 1fr;gap:30px 20px;margin-bottom:35px}.footer .brand img{width:141px}.footer-links{display:flex;flex-direction:column;gap:13px;font-size:10px;padding-top:3px;align-items:flex-start;justify-self:end}.footer-contact{grid-column:1/-1;border-top:1px solid var(--line);padding-top:25px;gap:7px}.footer-contact>span{font-size:7px}.footer-contact>a{font-size:13px}.footer-contact .linkedin-link{font-size:9px}.footer-bottom{flex-wrap:wrap;font-size:8px;gap:17px}.footer-bottom>div{gap:17px;order:3;flex-wrap:wrap}.prototype-label{font-size:7px;margin-left:auto}.dialog-heading h2{font-size:22px}.product-dialog{padding:20px}.dialog-heading .eyebrow{font-size:7px}.dialog-intro{font-size:10px}.dialog-footer{align-items:flex-start;flex-direction:column;gap:14px}.dialog-footer p{font-size:10px}.product-capture{min-height:100px}}
@media(max-width:370px){.shell{width:calc(100% - 32px)}.hero h1{font-size:37px;letter-spacing:-2px}.hero .eyebrow{font-size:7px;letter-spacing:.8px}.hero-buttons{gap:12px}.hero-buttons .btn{font-size:10px;padding-inline:13px;gap:10px}.hero-buttons .text-link{font-size:8px}.hero-reassurance{gap:7px}.hero-reassurance>span{font-size:7px}.hero-reassurance>span+span{font-size:7px;padding-left:8px}.hero-stage{height:426px}.dashboard-content{padding:16px 11px 12px}.dashboard-layout{grid-template-columns:34px 1fr}.dashboard-top>span:nth-child(2){font-size:6px}.dash-greeting h2{font-size:16px}.dash-metrics>div{padding:9px}.dash-task strong{font-size:7px}.dash-task>div>span{font-size:5px}.dash-complete{font-size:6px}.floating-cost{width:144px}.floating-mileage{bottom:2px}.hero-stage>.example-label{font-size:6px}.persona-tabs button{font-size:8px;gap:6px}.persona-tabs button .icon{width:14px;height:14px}.scenario-summary{gap:11px}.scenario-summary>strong{font-size:31px}.scenario-summary b{font-size:8px}.scenario-summary>div>span{font-size:6px}.scenario-row strong{font-size:7px}.scenario-row>b{font-size:6px}.scenario-outcome{font-size:6px}.mechanism{grid-template-columns:1fr 82px;gap:10px 15px}.mechanism h3{font-size:15px}.mechanism>p{font-size:9px}.pricing-card-top{flex-wrap:wrap}.price{font-size:70px}.trial-duration{gap:19px}.trial-duration>strong{font-size:75px}.trial-duration p{padding-left:19px;font-size:9px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto!important}*,*:before,*:after{animation:none!important;transition:none!important}.btn:hover{transform:none}}
@media print{.announcement,.site-header,.hero-stage,.hero-buttons,.hero-discover,.connections-footer button,.final-cta,.footer-bottom,.product-dialog{display:none!important}.shell{width:100%}.section-space{padding-block:30px}.connected-section{background:white;color:#152e28}.connected-section p,.connected-section .eyebrow{color:#526556!important}.persona-panel{break-inside:avoid}.hero-grid{display:block;min-height:0}.hero h1{font-size:42px}.driver-photo{height:280px}body{font-size:11px}.btn{border:1px solid #152e28}.footer{padding:25px 0}}

/* Brand details complement the original hero and the four persona journeys. */
.hero-visual-caption {
  position: absolute;
  right: 0;
  bottom: -42px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 5px;
}
.hero-visual-caption .example-label { margin: 0; }
.real-product-link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 0;
  background: transparent;
  border: 0;
  font-size: 9px;
  font-weight: 500;
  color: var(--green-accessible);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.real-product-link .icon { width: 11px; height: 11px; }
.handwritten {
  font-family: Caveat, cursive;
  font-weight: 500;
  letter-spacing: -.4px;
  line-height: 1.15;
}
.handwritten svg {
  display: block;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.driver-annotation {
  position: absolute;
  z-index: 1;
  left: 25px;
  bottom: 103px;
  font-size: 27px;
  color: var(--yellow);
  transform: rotate(-8deg);
  text-shadow: 0 2px 12px #0b281c;
}
.driver-annotation svg { width: 136px; height: 57px; margin: 0 0 -9px 60px; }

/* An authentic team photograph gives the vision a human presence. */
.vision-section { background: #faf7ea; }
.vision-grid {
  display: grid;
  grid-template-columns: 1.03fr .97fr;
  align-items: center;
  gap: 80px;
}
.vision-copy .eyebrow { color: #82703f; }
.vision-copy h2 { font-size: 37px; letter-spacing: -1.5px; line-height: 1.25; }
.vision-copy h2 span {
  text-decoration: underline;
  text-decoration-color: var(--yellow);
  text-decoration-thickness: 7px;
  text-underline-offset: 3px;
  text-decoration-skip-ink: none;
}
.vision-copy > p:not(.eyebrow) { color: #6d7261; font-size: 13px; line-height: 1.95; margin-top: 25px; max-width: 465px; }
.vision-principles { margin: 27px 0; display: flex; flex-direction: column; gap: 18px; }
.vision-principles > div { display: flex; align-items: baseline; gap: 14px; }
.vision-principles > div > span { font-size: 9px; color: #8c7a43; }
.vision-principles p { max-width: 430px; font-size: 12px; color: #6d7261; line-height: 1.9; }
.vision-principles strong { color: var(--ink); font-weight: 600; }
.vision-photo { margin: 0; position: relative; padding: 0 0 30px; }
.vision-photo > img { width: 100%; height: 348px; object-fit: cover; object-position: 62% center; border-radius: 7px; }
.vision-photo figcaption {
  display: flex;
  align-items: center;
  gap: 12px;
  position: absolute;
  right: 15px;
  bottom: 0;
  font-size: 30px;
  color: #756224;
  transform: rotate(-5deg);
}
.vision-photo figcaption svg { width: 85px; height: 40px; transform: rotate(-32deg) translateY(-4px); }

/* Three short, attributed statements remain visible without a carousel. */
.customer-stories { background: #fff; padding-bottom: 80px; }
.customer-stories .section-heading { align-items: center; }
.customer-quotes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 47px; }
.customer-quote { display: flex; flex-direction: column; margin: 0; padding: 5px 32px 0; border-left: 1px solid var(--line); }
.customer-quote:first-child { border: 0; padding-left: 0; }
.customer-quote:last-child { padding-right: 0; }
.quote-topic { font-size: 8px; letter-spacing: 1px; color: var(--green-accessible); font-weight: 600; }
.customer-quote blockquote { font-size: 23px; line-height: 1.5; font-weight: 500; letter-spacing: -.65px; margin: 25px 0 30px; min-height: 106px; }
.customer-quote figcaption { display: flex; align-items: center; justify-content: space-between; gap: 15px; margin-top: auto; }
.customer-quote figcaption > div { display: flex; flex-direction: column; gap: 3px; }
.customer-quote figcaption strong { font-size: 11px; font-weight: 600; }
.customer-quote figcaption span { font-size: 9px; color: #70806f; }
.customer-quote figcaption img { width: 102px; height: 38px; object-fit: cover; }
.customer-source { margin: 28px 0 0; font-size: 8px; color: #70806f; }
.customer-source a { text-decoration: underline; text-underline-offset: 3px; }

/* The optional reports are priced separately from the fleet subscription. */
.pricing-section { padding-top: 70px; }
.reports-offer {
  margin-top: 65px;
  padding: 34px 0 0;
  border-top: 1px solid var(--line);
  display: grid;
  grid-template-columns: 1fr .84fr;
  gap: 100px;
  align-items: start;
}
.reports-copy .eyebrow { font-size: 8px; letter-spacing: 1.1px; margin-bottom: 14px; }
.reports-copy h3 { font-size: 27px; font-weight: 500; line-height: 1.3; letter-spacing: -.9px; }
.reports-copy > p:last-child { max-width: 365px; font-size: 12px; line-height: 1.9; color: #687867; margin-top: 15px; }
.reports-rates { display: grid; grid-template-columns: 1fr 1fr; gap: 0 22px; }
.report-rate { padding: 8px 0 0; }
.report-rate + .report-rate { padding-left: 24px; border-left: 1px solid var(--line); }
.report-rate > span { font-size: 9px; color: #687867; }
.report-rate > strong { display: block; font-weight: 500; font-size: 43px; line-height: 1.3; letter-spacing: -1.5px; margin-top: 13px; white-space: nowrap; }
.report-rate small { font-size: 14px; letter-spacing: -.3px; }
.report-rate p { font-size: 10px; color: #687867; line-height: 1.9; margin-top: 7px; }
.report-rate b { font-size: 9px; font-weight: 500; color: var(--green-accessible); }
.reports-note { grid-column: 1 / -1; font-size: 8px; color: #71806b; margin-top: 25px; }

/* The original PNG wave joins the dark call to action to the brand green footer. */
.footer-wave { background: var(--ink); line-height: 0; overflow: hidden; }
.footer-wave img { display: block; width: 100%; height: auto; }
.footer { background: #3f987b; color: #08271d; padding-top: 35px; }
.footer-top > div:first-child > p,
.footer-contact > span,
.footer-contact .linkedin-link,
.footer-bottom { color: #092d21; }
.footer-bottom { border-color: #155d493b; }
.footer a:hover { color: #031b13; text-decoration: underline; text-underline-offset: 4px; }

@media (min-width: 768px) and (max-width: 1100px) {
  .desktop-nav { gap: 15px; }
  .desktop-nav a { font-size: 10px; }
  .header-actions .btn { font-size: 9px; gap: 8px; padding-inline: 12px; }
  .site-header .brand img { width: 126px; }
}
@media (max-width: 1023px) {
  .hero-visual-caption { bottom: -55px; }
  .vision-grid { gap: 42px; }
  .vision-copy h2 { font-size: 30px; }
  .vision-copy > p:not(.eyebrow) { font-size: 12px; }
  .vision-principles p { font-size: 11px; }
  .vision-photo > img { height: 310px; }
  .vision-photo figcaption { font-size: 25px; right: 0; gap: 5px; }
  .customer-quote { padding-inline: 21px; }
  .customer-quote blockquote { font-size: 19px; min-height: 115px; }
  .quote-topic { font-size: 6px; }
  .customer-quote figcaption { gap: 8px; }
  .customer-quote figcaption img { width: 77px; height: 32px; }
  .customer-quote figcaption strong { font-size: 9px; }
  .customer-quote figcaption span { font-size: 8px; }
  .reports-offer { gap: 40px; grid-template-columns: 1fr 1fr; }
  .report-rate > strong { font-size: 37px; }
  .report-rate small { font-size: 11px; }
  .reports-rates { column-gap: 15px; }
  .report-rate + .report-rate { padding-left: 16px; }
}
@media (max-width: 767px) {
  .hero-visual-caption { bottom: -43px; gap: 3px; }
  .hero-visual-caption .example-label { font-size: 6px; }
  .real-product-link { font-size: 8px; }
  .driver-annotation { font-size: 26px; left: 21px; bottom: 95px; }
  .driver-annotation svg { width: 110px; height: 43px; margin-left: 55px; }
  .vision-grid { grid-template-columns: 1fr; gap: 34px; }
  .vision-copy .eyebrow { font-size: 8px; margin-bottom: 17px; }
  .vision-copy h2 { font-size: 31px; }
  .vision-copy h2 span { text-decoration-thickness: 5px; }
  .vision-copy > p:not(.eyebrow) { margin-top: 22px; font-size: 12px; }
  .vision-principles { margin-block: 23px; gap: 15px; }
  .vision-principles p { font-size: 11px; max-width: none; }
  .vision-copy .text-link { font-size: 11px; }
  .vision-photo > img { height: auto; aspect-ratio: 1.45; }
  .vision-photo figcaption { right: 7px; font-size: 27px; }
  .customer-stories { padding-bottom: 55px; }
  .customer-stories .section-heading > .text-link { font-size: 10px; margin-top: 21px; }
  .customer-quotes { grid-template-columns: 1fr; gap: 28px; margin-top: 33px; }
  .customer-quote, .customer-quote:first-child, .customer-quote:last-child { padding: 25px 0 0; border: 0; border-top: 1px solid var(--line); }
  .quote-topic { font-size: 7px; }
  .customer-quote blockquote { font-size: 24px; min-height: 0; margin: 18px 0 21px; }
  .customer-quote figcaption img { width: 109px; height: 37px; }
  .customer-quote figcaption strong { font-size: 10px; }
  .customer-quote figcaption span { font-size: 9px; }
  .customer-source { font-size: 7px; line-height: 1.8; }
  .pricing-section { padding-top: 40px; }
  .reports-offer { grid-template-columns: 1fr; gap: 26px; margin-top: 36px; padding-top: 28px; }
  .reports-copy .eyebrow { font-size: 7px; letter-spacing: 1px; }
  .reports-copy h3 { font-size: 27px; }
  .reports-copy > p:last-child { font-size: 11px; }
  .reports-rates { column-gap: 21px; }
  .report-rate { padding-top: 0; }
  .report-rate + .report-rate { padding-left: 21px; }
  .report-rate > span { font-size: 8px; }
  .report-rate > strong { font-size: 42px; margin-top: 10px; }
  .report-rate small { font-size: 13px; }
  .reports-note { font-size: 7px; margin-top: 20px; }
  .footer { padding-top: 28px; }
  .footer-contact { border-color: #155d493b; }
}
@media (max-width: 370px) {
  .vision-copy h2 { font-size: 28px; }
  .report-rate > span { font-size: 7px; }
  .report-rate > strong { font-size: 37px; }
  .report-rate small { font-size: 11px; }
}
@media print {
  .hero-visual-caption, .footer-wave { display: none; }
  .footer { background: white; color: var(--ink); }
  .vision-section { background: #faf7ea; }
  .vision-photo > img { height: 230px; }
  .customer-quote, .reports-offer { break-inside: avoid; }
}

/* Reading scale and brand palette — 26 September 2026.
   Marketing copy stays readable on phones. The composed product illustrations
   keep their own compact scale, independent of the page's reading typography. */
:root {
  --paper: #e8f6f2;
  --muted: #52665e;
  --line: #d4e5df;
}
body { font-size: 16px; }
.announcement { font-size: 12px; padding-block: 10px; }
.eyebrow,
.section-heading .eyebrow,
.driver-copy .eyebrow,
.vision-copy .eyebrow,
.pricing-copy .eyebrow,
.faq-grid .eyebrow,
.reports-copy .eyebrow,
.final-cta .eyebrow,
.dialog-heading .eyebrow { font-size: 11px; letter-spacing: 1.25px; }
.btn,
.hero-buttons .btn,
.connections-footer .btn,
.pricing-card > .btn,
.final-cta .btn,
.dialog-footer .btn { font-size: 15px; }
.text-link,
.hero-buttons .text-link,
.persona-copy > .text-link,
.driver-copy > .text-link,
.vision-copy .text-link,
.customer-stories .section-heading > .text-link,
.pricing-copy > .text-link,
.faq-grid .text-link { font-size: 14px; }
.desktop-nav { gap: 22px; margin-right: 12px; font-size: 14px; }
.desktop-nav a { font-size: 14px; }
.header-actions { gap: 20px; }
.header-actions .btn { font-size: 14px; min-height: 46px; }
.login-link { font-size: 13px; }
.site-header .brand img { width: 156px; }
.hero-grid { padding-bottom: 140px; }
.hero-description { font-size: 18px; line-height: 1.75; max-width: 535px; color: var(--muted); }
.hero-buttons { column-gap: 22px; row-gap: 18px; }
.hero-reassurance,
.hero-reassurance > span,
.hero-reassurance > span + span { font-size: 12px; }
.hero-discover { font-size: 13px; }
.hero h1 span:after { opacity: 1; }
.floating-cost { background: #c9f3e5; }
.mini-bars i { background: var(--green); }
.mini-bars i:nth-child(n+8) { background: #63c9a9; }
.hero-visual-caption { gap: 5px; bottom: -116px; }
.hero-visual-caption .example-label { font-size: 10px; }
.real-product-link { font-size: 12px; min-height: 28px; }
.trust-layout > p { font-size: 13px; }
.section-heading > p,
.connected-section .section-heading > p { font-size: 16px; line-height: 1.75; max-width: 390px; }
.section-heading > p { color: var(--muted); }
.muted-heading { color: #617b70; }
.persona-tabs button { font-size: 14px; white-space: normal; line-height: 1.5; color: var(--muted); }
.persona-panel { align-items: start; }
.persona-pain { font-size: 16px; line-height: 1.65; }
.persona-copy h3 { min-height: 0; font-size: 32px; }
.persona-description { font-size: 16px; line-height: 1.75; min-height: 0; max-width: 510px; color: var(--muted); }
.benefit-list { gap: 14px; }
.benefit-list li { font-size: 15px; line-height: 1.65; }
.benefit-list li > span:first-child { width: 21px; height: 21px; margin-top: 2px; }
.persona-visual { align-self: center; background: var(--mint); }
.persona-visual-1 { background: #fff4d8; }
.persona-visual-2 { background: var(--mint); }
.persona-visual-3 { background: #e7f4fa; }
.persona-visual-label { font-size: 10px; }
.persona-visual > .example-label { font-size: 11px; color: var(--muted); }
.connected-section { background: #07513e; }
.connected-section .eyebrow { color: #8fe9ca; }
.connected-section .section-heading > p,
.mechanism > p { color: #d1e9e0; }
.connection-line { color: var(--green); }
.connection-line > span { background: #388e71; }
.mechanism-number { color: #8fe9ca; font-size: 13px; }
.mechanism-number > span { color: #d1e9e0; font-size: 11px; }
.mechanism h3 { font-size: 21px; line-height: 1.45; }
.mechanism > p { font-size: 16px; line-height: 1.75; max-width: none; }
.source-art > span { color: #e8f6f2; background: #12654e; border-color: #348c70; font-size: 11px; }
.source-art .icon { color: #8fe9ca; }
.insight-line i { background: var(--green); }
.insight-line i:nth-child(2) { background: #32bf95; }
.insight-line i:nth-child(3) { background: #65d5b3; }
.insight-line i:nth-child(4) { background: #a0e9d2; }
.insight-tag { font-size: 11px; }
.action-check { background: var(--green); color: #052d23; }
.action-art > div { font-size: 13px; color: #d1e9e0; }
.action-art strong { color: white; }
.action-art > .icon { color: #8fe9ca; }
.connections-footer { border-color: #388e71; }
.connections-footer > div > span { font-size: 11px; color: #d1e9e0; }
.connections-footer p { font-size: 18px; }
.connections-footer small { font-size: 12px; color: #d1e9e0; }
.btn-outline-light { border-color: #8edbbf; }
.section-description,
.driver-copy .section-description,
.pricing-copy .section-description { font-size: 17px; line-height: 1.75; max-width: 520px; color: var(--muted); }
.driver-benefit > span { font-size: 12px; }
.driver-benefit h3 { font-size: 16px; line-height: 1.6; }
.driver-benefit p { font-size: 16px; line-height: 1.75; max-width: 460px; color: var(--muted); }
.driver-photo { height: 610px; }
.photo-caption { font-size: 10px; letter-spacing: 1px; }
.driver-photo-note { background: var(--mint); }
.driver-photo-note > .icon { color: var(--green-accessible); }
.driver-photo-note > span { font-size: 13px; color: var(--muted); }
.booking-cta { margin-top: 30px; }
.booking-cta .btn { gap: 12px; text-align: left; }
.booking-cta p { margin-top: 10px; font-size: 13px; color: var(--muted); }
.vision-section { background: var(--green); }
.vision-copy .eyebrow,
.vision-copy > p:not(.eyebrow),
.vision-principles p,
.vision-principles > div > span,
.vision-photo figcaption { color: #103b2e; }
.vision-copy h2 { font-size: 40px; }
.vision-copy > p:not(.eyebrow) { font-size: 17px; line-height: 1.75; max-width: 530px; }
.vision-principles p { font-size: 16px; line-height: 1.75; max-width: 510px; }
.vision-principles > div > span { font-size: 12px; }
.vision-photo { padding-bottom: 44px; }
.vision-photo > img { height: 390px; }
.vision-photo figcaption { font-size: 34px; }
.quote-topic { font-size: 11px; line-height: 1.6; letter-spacing: .7px; }
.customer-quote blockquote { font-size: 24px; min-height: 0; }
.customer-quote figcaption strong { font-size: 14px; }
.customer-quote figcaption span { font-size: 12px; color: var(--muted); }
.customer-source { font-size: 12px; color: var(--muted); }
.trial-duration p { font-size: 14px; color: var(--muted); }
.pricing-card { background: var(--mint); border-color: var(--line); }
.pricing-card-top { flex-wrap: wrap; border-color: #bfddd1; }
.pricing-card-top .eyebrow { font-size: 11px; }
.price-tag { font-size: 11px; color: #235b47; border-color: #b3d6c8; }
.price-from { font-size: 14px; color: var(--muted); }
.price small { font-size: 12px; color: var(--muted); }
.pricing-explainer { font-size: 16px; line-height: 1.75; max-width: 380px; color: var(--muted); }
.pricing-options { border-color: #bfddd1; }
.pricing-options > span { font-size: 10px; }
.pricing-options > p { font-size: 14px; }
.pricing-options small { font-size: 13px; color: var(--muted); }
.reports-copy > p:last-child { font-size: 16px; line-height: 1.75; color: var(--muted); max-width: 440px; }
.report-rate > span { font-size: 13px; color: var(--muted); }
.report-rate p { font-size: 14px; color: var(--muted); }
.report-rate b { font-size: 13px; }
.reports-note { font-size: 12px; color: var(--muted); }
.faq-list summary { font-size: 16px; line-height: 1.65; }
.faq-list p { font-size: 16px; line-height: 1.75; color: var(--muted); }
.final-cta > .shell { gap: 32px; }
.footer-top { gap: 40px; }
.footer-top > div:first-child > p { font-size: 14px; }
.footer-links { font-size: 14px; column-gap: 32px; }
.footer-contact > span { font-size: 11px; }
.footer-contact > a { font-size: 15px; }
.footer-contact .linkedin-link { font-size: 13px; }
.footer-bottom { font-size: 12px; flex-wrap: wrap; }
.footer-bottom > div { margin-left: 0; }
.prototype-label { font-size: 11px; }
.dialog-intro,
.dialog-footer p { font-size: 15px; line-height: 1.75; }
.dialog-close { width: 44px; height: 44px; }

@media (max-width: 1199px) {
  .desktop-nav { display: none; }
  .menu-toggle { display: flex; width: 44px; height: 44px; padding: 12px 8px; border: 0; background: transparent; flex-direction: column; justify-content: center; gap: 6px; }
  .menu-toggle span { display: block; width: 26px; height: 2px; background: var(--ink); transition: transform .2s; }
  .menu-toggle .menu-line-open { transform: translateY(4px) rotate(45deg); }
  .menu-toggle .menu-line-open + span { transform: translateY(-4px) rotate(-45deg); }
  .mobile-nav { display: flex; position: absolute; inset: 100% 0 auto; flex-direction: column; align-items: stretch; gap: 0; background: white; padding: 16px 6% 24px; border-bottom: 1px solid var(--line); box-shadow: 0 15px 20px #152e2810; }
  .mobile-nav > a { padding: 12px 0; font-size: 16px; }
  .mobile-nav > .btn { margin-top: 12px; }
  .hero-buttons .btn { padding-inline: 20px; }
  .hero-buttons .text-link { font-size: 14px; }
  .driver-grid { gap: 48px; }
  .persona-tabs { gap: 15px; }
  .persona-tabs button { gap: 8px; font-size: 13px; }
  .vision-grid { gap: 45px; }
  .vision-copy h2 { font-size: 34px; }
  .customer-quote figcaption { align-items: flex-start; flex-direction: column; }
  .pricing-grid, .reports-offer, .faq-grid { gap: 48px; }
  .final-cta > .shell { flex-wrap: wrap; }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .hero-grid { padding-bottom: 140px; }
  .hero h1 { font-size: 44px; }
  .hero-reassurance > span + span { border-left: 0; padding-left: 0; }
  .hero-reassurance { flex-direction: column; align-items: flex-start; }
  .persona-panel { grid-template-columns: 1fr; gap: 20px; }
  .persona-copy { max-width: 620px; }
  .persona-visual { max-width: 620px; width: 100%; justify-self: center; }
  .mechanism-grid { gap: 26px; }
  .mechanism h3 { font-size: 19px; }
  .source-art { padding-right: 0; }
  .source-art > span { font-size: 10px; }
  .action-art { gap: 8px; }
  .action-art > .icon { display: none; }
  .driver-grid { grid-template-columns: .85fr 1fr; gap: 32px; }
  .vision-grid { grid-template-columns: 1fr; }
  .vision-photo { max-width: 640px; }
  .pricing-grid, .reports-offer, .faq-grid { grid-template-columns: 1fr; }
  .pricing-card { max-width: 600px; }
  .footer-top { flex-wrap: wrap; }
}
@media (max-width: 767px) {
  .announcement { font-size: 11px; line-height: 1.65; }
  .announcement span { margin-left: 3px; }
  .site-header .brand img { width: 142px; }
  .header-actions .header-demo { display: none; }
  .hero-grid { padding-top: 36px; padding-bottom: 124px; }
  .hero .eyebrow { font-size: 10px; letter-spacing: .8px; align-items: baseline; }
  .hero-description { font-size: 17px; line-height: 1.75; }
  .hero-buttons { flex-direction: column; align-items: flex-start; gap: 20px; }
  .hero-buttons .btn { font-size: 15px; padding-inline: 23px; }
  .hero-buttons .text-link { font-size: 14px; }
  .hero-reassurance { gap: 8px; margin-top: 25px; }
  .hero-reassurance > span + span { padding-left: 0; border-left: 0; }
  .hero-discover { font-size: 12px; margin-top: 28px; }
  .hero-visual-caption { bottom: -100px; }
  .hero-visual-caption .example-label { font-size: 9px; }
  .real-product-link { font-size: 12px; }
  .trust-layout > p { font-size: 12px; }
  .section-heading > p { margin-top: 23px; }
  .persona-tabs { gap: 0 16px; }
  .persona-tabs button { font-size: 13px; padding-block: 17px; align-items: flex-start; }
  .persona-tabs button .icon { margin-top: 2px; }
  .persona-panel { gap: 30px; }
  .persona-copy { min-height: 0; }
  .persona-pain { font-size: 16px; }
  .persona-copy h3 { font-size: 30px; }
  .persona-visual { padding-inline: 20px; }
  .persona-visual-label { font-size: 9px; letter-spacing: .7px; }
  .connected-section .section-heading > p > br { display: none; }
  .mechanism-grid { gap: 28px; }
  .mechanism { display: flex; flex-direction: column; border-color: #388e71; padding-top: 24px; gap: 0; }
  .mechanism-art { height: 106px; width: 100%; align-self: stretch; margin-top: 12px; }
  .source-art { max-width: 300px; padding: 0; gap: 8px; }
  .source-art > span { width: auto; font-size: 11px; padding: 7px 10px; }
  .source-art .icon { width: 14px; height: 14px; }
  .insight-art { max-width: 240px; }
  .insight-line { width: 90%; }
  .insight-tag { font-size: 11px; }
  .action-art { flex-direction: row; justify-content: flex-start; text-align: left; gap: 15px; }
  .action-check { width: 42px; height: 42px; }
  .action-art > div { font-size: 14px; }
  .action-art > .icon { display: block; }
  .mechanism h3 { font-size: 23px; margin: 12px 0; }
  .mechanism > p { font-size: 16px; }
  .connections-footer p { font-size: 16px; }
  .connections-footer small { font-size: 12px; }
  .connections-footer .btn { font-size: 14px; }
  .driver-grid { gap: 40px; }
  .driver-photo { height: 460px; }
  .photo-caption { font-size: 9px; left: 18px; right: 18px; }
  .driver-photo-note { padding: 15px 17px; gap: 12px; right: -5px; }
  .driver-photo-note > span { font-size: 12px; }
  .booking-cta .btn { padding: 16px 18px; }
  .vision-copy h2 { font-size: 32px; }
  .vision-photo > img { height: auto; }
  .vision-photo figcaption { font-size: 30px; }
  .customer-quote figcaption { align-items: center; flex-direction: row; }
  .customer-source { font-size: 12px; line-height: 1.8; }
  .pricing-card { padding: 27px 23px; }
  .price { font-size: 74px; gap: 15px; }
  .pricing-card > .btn { font-size: 14px; gap: 12px; padding-inline: 16px; }
  .trial-duration { gap: 22px; }
  .trial-duration > strong { font-size: 72px; }
  .trial-duration p { font-size: 13px; padding-left: 22px; }
  .trial-duration p br { display: none; }
  .report-rate > span { display: block; font-size: 13px; min-height: 44px; }
  .report-rate > strong { font-size: 38px; }
  .report-rate small { font-size: 13px; }
  .reports-offer, .faq-grid { gap: 28px; }
  .final-cta .btn { font-size: 14px; gap: 15px; }
  .footer-top { grid-template-columns: 1fr; gap: 28px; }
  .footer-links { display: grid; grid-template-columns: 1fr 1fr; justify-self: stretch; gap: 12px 22px; }
  .footer-contact { padding-top: 24px; }
  .footer-bottom { align-items: flex-start; flex-direction: column; gap: 16px; }
  .footer-bottom > div { order: initial; gap: 12px 20px; }
  .prototype-label { margin-left: 0; }
}
@media (max-width: 370px) {
  .hero .eyebrow { font-size: 9px; }
  .hero-reassurance { flex-direction: column; align-items: flex-start; }
  .persona-tabs button { font-size: 12px; }
  .vision-copy h2 { font-size: 29px; }
  .trial-duration > strong { font-size: 64px; }
  .trial-duration > strong > span { font-size: 17px; }
  .trial-duration { gap: 16px; }
  .trial-duration p { padding-left: 16px; }
  .price { font-size: 66px; }
  .price > span { font-size: 19px; }
}
@media print {
  .vision-section { background: var(--mint); }
  .connected-section { background: white; color: var(--ink); }
  .mechanism-number > span { color: var(--ink); }
}

/* September 27: public product screens and a journey from needs to evidence. */
.hero .hero-grid { grid-template-columns: .86fr 1.14fr; gap: 38px; padding-block: 64px 76px; min-height: 650px; }
.hero-product, .persona-product { margin: 0; min-width: 0; }
.hero-product { padding: 24px; background: #e8f6f2; border-radius: 18px; border: 1px solid #cce7dd; }
.product-label { display: flex; align-items: center; gap: 9px; font-size: 11px; letter-spacing: 1.1px; font-weight: 700; margin-bottom: 18px; }
.capture-button { display: block; position: relative; width: 100%; padding: 0; border: 1px solid #cbded6; border-radius: 9px; background: white; overflow: hidden; box-shadow: 0 18px 40px #153b2815; }
.capture-button img { display: block; width: 100%; height: auto; }
.capture-action { display: flex; justify-content: center; align-items: center; gap: 10px; background: #fff; color: #087b5b; padding: 13px 16px; border-top: 1px solid #dce5df; font-size: 13px; font-weight: 600; }
.capture-button:hover .capture-action { background: #e8f6f2; }
.hero-product figcaption, .persona-product figcaption { font-size: 12px; line-height: 1.7; color: #65746e; margin-top: 16px; }
.personas .persona-tabs { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; }
.personas .persona-tabs button { flex-wrap: wrap; align-content: center; gap: 7px; font-size: 13px; padding-block: 19px; }
.persona-tabs button .icon { width: 19px; height: 19px; }
.soon-badge { background: #fff0c2; color: #694c00; font-size: 10px; font-weight: 700; padding: 2px 7px; border-radius: 4px; letter-spacing: .2px; }
.availability { font-size: 11px; font-weight: 700; letter-spacing: 1px; color: #735507; margin: 0 0 18px; }
.personas .persona-panel { grid-template-columns: .9fr 1.1fr; gap: 42px; align-items: center; }
.persona-product { padding: 25px; border-radius: 14px; background: #e8f6f2; }
.day-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 42px; margin-top: 55px; }
.day-step { min-width: 0; border-top: 1px solid #ffffff40; padding-top: 25px; }
.day-number { display: block; font-size: 11px; color: #b7dfce; letter-spacing: 1px; font-weight: 600; margin-bottom: 26px; }
.day-step > .icon { width: 32px; height: 32px; color: #a9e4cd; }
.day-step h3 { font-size: 23px; line-height: 1.45; letter-spacing: -.5px; margin: 20px 0 16px; font-weight: 600; }
.day-step p { color: #d3e4dc; font-size: 16px; line-height: 1.8; margin: 0 0 22px; }
.day-step > strong { display: block; color: #c0efd9; font-size: 14px; line-height: 1.7; font-weight: 600; }
.customer-quote h3 { font-size: 23px; font-weight: 600; line-height: 1.45; letter-spacing: -.5px; margin: 20px 0; }
.customer-quote > p:not(.quote-topic) { font-size: 16px; color: #65746e; line-height: 1.8; }
.customer-quotes { align-items: stretch; }
.customer-quote { display: flex; flex-direction: column; }
.customer-quote figcaption { margin-top: auto; padding-top: 22px; }
.proof-invitation { display: flex; align-items: center; justify-content: space-between; gap: 40px; background: #e8f6f2; padding: 30px 34px; border-radius: 12px; margin-top: 35px; }
.proof-invitation > div { max-width: 690px; }
.proof-invitation strong { font-size: 20px; }
.proof-invitation p { font-size: 16px; line-height: 1.8; margin: 7px 0 0; color: #506a60; }
.proof-invitation .btn { flex-shrink: 0; }
.vision-copy h2 { font-size: clamp(32px, 3.3vw, 48px); }
.driver-benefit .text-link { margin-top: 12px; font-size: 14px; }
.product-dialog .product-capture img { display: block; width: 100%; height: auto; }
#options { scroll-margin-top: 105px; }
@media (max-width: 1199px) {
  .hero .hero-grid { gap: 24px; }
  .hero-product { padding: 16px; }
  .personas .persona-tabs { gap: 10px; }
  .personas .persona-tabs button { font-size: 12px; }
  .personas .persona-panel { gap: 26px; }
  .persona-product { padding: 18px; }
  .proof-invitation { align-items: flex-start; flex-direction: column; gap: 22px; }
}
@media (max-width: 900px) {
  .hero .hero-grid { grid-template-columns: 1fr; gap: 32px; padding-block: 38px 55px; }
  .hero-product { max-width: 750px; width: 100%; }
  .personas .persona-panel { grid-template-columns: 1fr; gap: 32px; }
  .personas .persona-tabs { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .personas .persona-tabs button { justify-content: flex-start; }
  .day-grid { grid-template-columns: 1fr; gap: 30px; }
  .day-number { margin-bottom: 16px; }
  .day-step h3 { margin-top: 14px; }
}
@media (max-width: 600px) {
  .hero .hero-grid { padding-block: 30px 45px; gap: 26px; }
  .hero-product, .persona-product { padding: 13px; }
  .product-label { font-size: 10px; letter-spacing: .6px; margin-bottom: 12px; }
  .personas .persona-tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 16px; }
  .personas .persona-tabs button { min-height: 73px; font-size: 12px; padding-block: 14px; }
  .personas .persona-tabs button:last-child { grid-column: 1 / -1; }
  .hero-product figcaption, .persona-product figcaption { font-size: 11px; }
  .capture-action { font-size: 12px; padding: 11px; }
  .day-grid { margin-top: 30px; }
  .day-step h3 { font-size: 22px; }
  .proof-invitation { padding: 24px 20px; }
  .proof-invitation .btn { width: 100%; flex-shrink: 1; }
  .customer-quote h3 { font-size: 23px; }
}

/* ────────────────────────────────────────────────────────────────────────────
   Ajustements v4 — 27 septembre 2026
   Boutons verts en texte blanc, aperçus produit sans cadre ni légende,
   animation immédiate, annotations recalées, pied de page sur un seul fond.
   ──────────────────────────────────────────────────────────────────────────── */

/* 1. Un bouton vert porte du texte blanc. Le vert de remplissage passe donc au
   vert accessible de la palette : blanc sur #087b5b donne 5,26:1, là où le
   même blanc sur #1bab81 tombait à 2,92:1. #1bab81 reste réservé aux aplats,
   aux traits et aux pastilles, jamais sous un texte. */
.btn-green { background: var(--green-accessible); color: #fff; }
.btn-green:hover { background: #0a6a4e; }
.btn-green .icon { color: #fff; }

/* 2. L'aperçu produit n'est plus encadré : ni fond, ni bordure, ni sur-titre,
   ni légende de provenance. L'image porte seule. */
.hero-product,
.persona-product { margin: 0; min-width: 0; padding: 0; background: none; border: 0; border-radius: 0; }
.hero-product .product-label,
.persona-product .product-label,
.hero-product figcaption,
.persona-product figcaption { display: none; }
.product-media {
  display: block;
  width: 100%;
  height: auto;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 24px 60px -20px #153b2833;
}
/* Le format fixe ne vaut que pour les vidéos, toutes en 1128 × 804 : il réserve
   leur place avant chargement. L'appliquer à tous les aperçus rognait l'image
   AEN sur les côtés, elle est en 1440 × 900. Chaque image garde son format. */
video.product-media { aspect-ratio: 1128 / 804; object-fit: cover; }
.product-zoom {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 16px;
  padding: 0;
  border: 0;
  background: none;
  font-size: 14px;
  font-weight: 600;
  color: #075e45;
}
.product-zoom:hover { text-decoration: underline; text-underline-offset: 5px; }
.product-capture { border: 0; }
.product-capture video,
.product-capture img { display: block; width: 100%; height: auto; }

/* 3. Contraste du bloc « Notre vision » : #103b2e sur #1bab81 plafonnait à
   4,26:1, sous le minimum AA de 4,5:1. #0c2e23 donne 5,03:1. */
.vision-copy .eyebrow,
.vision-copy > p:not(.eyebrow),
.vision-principles p,
.vision-principles > div > span,
.vision-photo figcaption { color: #0c2e23; }
.hero-discover { color: var(--muted); }

/* 4. Annotations manuscrites : elles restent, recalées à l'intérieur de leur
   image, et la flèche de la section vision pointe désormais vers la photo au
   lieu de s'en éloigner. */
.vision-photo { padding-bottom: 76px; }
/* La légende est inclinée de -5°. `bottom: 0` alignait sa boîte de mise en page,
   pas sa boîte visuelle, qui dépassait donc de 12 px sous la photo à toutes les
   largeurs. Le décalage compense la rotation. */
.vision-photo figcaption { right: 10px; bottom: 15px; }
.vision-photo figcaption svg { transform: scaleX(-1) rotate(-26deg) translateY(-2px); }
.driver-annotation { left: 30px; bottom: 188px; }
.driver-annotation svg { transform: rotate(-20deg); margin: 0 0 -6px 52px; }
.driver-photo-note { right: 18px; bottom: 26px; }

/* 5. Le pied de page tient sur un seul fond : l'encre du bloc d'appel à
   l'action se prolonge jusqu'en bas. La vague et le vert intermédiaire
   disparaissent, le logo redevient lisible sans plaque blanche, et les
   quatorze textes du pied qui plafonnaient à 4,25:1 passent entre 6,5 et 14:1. */
.footer { background: var(--ink); color: #dce9e3; padding-block: 58px 24px; border-top: 1px solid #2d4a40; }
.footer-top > div:first-child > p,
.footer-contact > span,
.footer-contact .linkedin-link,
.footer-bottom { color: #9db3a9; }
.footer-links a,
.footer-contact > a { color: #fff; }
.footer-bottom,
.footer-contact { border-color: #2d4a40; }
.footer a:hover { color: #fff; text-decoration: underline; text-underline-offset: 4px; }

@media (max-width: 767px) {
  .product-zoom { font-size: 13px; margin-top: 13px; }
  .vision-photo { padding-bottom: 66px; }
  .driver-annotation { left: 20px; bottom: 150px; }
  .driver-photo-note { right: 12px; bottom: 20px; }
}

/* Impression : le pied de page repasse en blanc, après les règles ci-dessus. */
@media print {
  .footer { background: white; color: var(--ink); border-top: 1px solid var(--line); }
  .footer-top > div:first-child > p,
  .footer-contact > span,
  .footer-contact .linkedin-link,
  .footer-bottom { color: #52665e; }
  .footer-links a, .footer-contact > a { color: var(--ink); }
  .product-media { box-shadow: none; border: 1px solid var(--line); }
  .product-zoom { display: none; }
}

/* ────────────────────────────────────────────────────────────────────────────
   Hero v4.1 — 27 septembre 2026
   L'animation du tableau de bord défile : à mi-course le panneau visé est déjà
   sorti du cadre. Un recadrage fixe sur la vidéo était donc impossible. Le hero
   montre un panneau réel figé, à sa taille d'origine — donc lisible — et
   l'animation complète passe derrière le bouton, à un clic.
   ──────────────────────────────────────────────────────────────────────────── */
.hero-panel { margin: 0; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; }
.hero-panel picture { display: block; width: 100%; }
/* 512 px est la largeur native du recadrage : au-delà on ré-agrandirait une
   source déjà molle, et le gain de lisibilité serait perdu. */
.hero-panel img {
  display: block;
  width: 100%;
  max-width: 512px;
  height: auto;
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 20px 50px -18px #153b2833;
}
.hero-panel figcaption {
  margin-top: 20px;
  max-width: 470px;
  font-size: 16px;
  line-height: 1.7;
  color: var(--muted);
}
.hero-panel figcaption strong { display: block; color: var(--ink); font-weight: 600; }
.hero-panel .product-zoom { margin-top: 14px; }

@media (max-width: 767px) {
  .hero-panel { align-items: stretch; }
  .hero-panel figcaption { margin-top: 16px; font-size: 15px; max-width: none; }
  .hero-panel .product-zoom { font-size: 13px; }
}



/* Le visuel du hero est passé d'une vidéo haute à un panneau court : la marge
   basse réservée à l'ancienne composition laissait un vide. */
.hero-grid { padding-block: 64px 84px; min-height: 0; }

/* ────────────────────────────────────────────────────────────────────────────
   Inclusions tarifaires — ce que comprend le prix affiché.
   Le visiteur connaissait le prix d'entrée sans savoir ce qu'il achète.
   ──────────────────────────────────────────────────────────────────────────── */
.includes-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 40px;
  margin-top: 64px;
  padding-top: 38px;
  border-top: 1px solid var(--line);
}
.includes-label {
  display: block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.25px;
  color: #235b47;
  margin-bottom: 18px;
}
.includes-col ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 10px; }
.includes-col li {
  position: relative;
  padding-left: 26px;
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink);
}
.includes-col li:before {
  content: '';
  position: absolute;
  left: 0;
  top: 8px;
  width: 13px;
  height: 7px;
  border-left: 2px solid var(--green-accessible);
  border-bottom: 2px solid var(--green-accessible);
  transform: rotate(-45deg);
}
/* Les options se distinguent des inclusions au premier coup d'œil : un signe
   « plus » plutôt qu'une coche, pour qu'on ne les confonde pas avec le compris. */
.includes-optional li:before {
  border: 0;
  transform: none;
  top: 7px;
  width: 13px;
  height: 13px;
  background:
    linear-gradient(to right, transparent 45%, #8a6d1f 45%, #8a6d1f 55%, transparent 55%),
    linear-gradient(to bottom, transparent 45%, #8a6d1f 45%, #8a6d1f 55%, transparent 55%);
}
.includes-optional li { color: #4a4636; }
.includes-note { font-size: 14px; line-height: 1.7; color: var(--muted); margin-top: 16px; }
.includes-trial { font-size: 15px; line-height: 1.6; margin: 0; }
.includes-trial strong { font-weight: 600; }
.includes-validate { grid-column: 1 / -1; margin: 6px 0 0; font-size: 13px; line-height: 1.7; }

@media (max-width: 1023px) {
  .includes-grid { grid-template-columns: 1fr 1fr; gap: 32px; margin-top: 48px; }
  .includes-col:first-child { grid-column: 1 / -1; }
}
@media (max-width: 767px) {
  .includes-grid { grid-template-columns: 1fr; gap: 30px; margin-top: 40px; padding-top: 30px; }
  .includes-col:first-child { grid-column: auto; }
  .includes-col li { font-size: 14px; }
}

/* ────────────────────────────────────────────────────────────────────────────
   Hero v4.3 — retour à l'animation, la phrase est conservée.
   Le recadrage sur « État du parc » était lisible mais donnait l'image d'un
   tableur, sur une page qui propose justement de sortir d'Excel. L'animation
   redonne la vie ; c'est la phrase qui porte la compréhension.
   ──────────────────────────────────────────────────────────────────────────── */
.hero-panel .product-media { max-width: none; }
.hero-panel figcaption { margin-top: 22px; max-width: 520px; }


/* ────────────────────────────────────────────────────────────────────────────
   v5 — la colonne « essai et engagement » porte des faits, plus une attente.
   Le panel v4 décrochait quatre fois sur quatre faute de réponse ici.
   ──────────────────────────────────────────────────────────────────────────── */
.includes-facts { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 13px; }
.includes-facts li {
  position: relative;
  padding-left: 26px;
  font-size: 15px;
  line-height: 1.65;
  color: var(--ink);
}
.includes-facts li:before {
  content: '';
  position: absolute;
  left: 0;
  top: 8px;
  width: 13px;
  height: 7px;
  border-left: 2px solid var(--green-accessible);
  border-bottom: 2px solid var(--green-accessible);
  transform: rotate(-45deg);
}
.includes-facts strong { font-weight: 600; }

/* L'essai s'interrompt si une option payante est activée : un client qui le
   découvre sur sa facture l'aura mal vécu. Ça se dit avant, et ça se voit. */
.includes-warn {
  display: flex;
  gap: 11px;
  margin-top: 20px;
  padding: 14px 16px;
  border-radius: 7px;
  background: #fff6e0;
  border: 1px solid #f0dcab;
  font-size: 14px;
  line-height: 1.65;
  color: #574413;
}
.includes-warn .icon { flex-shrink: 0; color: #8a6d1f; margin-top: 2px; }

.pricing-explainer strong { color: var(--ink); font-weight: 600; }

@media (max-width: 767px) {
  .includes-facts li { font-size: 14px; }
  .includes-warn { font-size: 13px; padding: 12px 13px; }
}

/* v6 — la reprise de données remonte au moment de la décision.
   Elle était au 11e écran, après trois appels à prendre rendez-vous : bonne
   réponse, trouvée trop tard. Elle offre ici une alternative au rendez-vous. */
.includes-migration {
  grid-column: 1 / -1;
  margin: 8px 0 0;
  padding: 20px 24px;
  border-radius: 9px;
  background: var(--mint);
  font-size: 15px;
  line-height: 1.75;
  color: var(--muted);
  max-width: none;
}
.includes-migration strong { color: var(--ink); font-weight: 600; }
.includes-migration .text-link { display: inline-flex; margin-left: 6px; color: #075e45; vertical-align: baseline; }

@media (max-width: 767px) {
  .includes-migration { padding: 16px 16px; font-size: 14px; }
  .includes-migration .text-link { margin-left: 0; margin-top: 8px; }
}

/* v6 — deux personas sur quatre ont failli ne pas voir leur onglet : c'est
   « Gestionnaire de flotte » qui s'ouvre, et la barre passe pour une liste.
   Une invitation explicite transforme la barre en choix. */
.persona-prompt {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 6px 14px;
  margin: 0 0 22px;
  font-size: 15px;
  line-height: 1.7;
  color: var(--muted);
}
.persona-prompt-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.25px;
  color: var(--green-accessible);
}
/* Les onglets non sélectionnés doivent se lire comme des boutons cliquables,
   pas comme du texte gris décoratif. */
.persona-tabs button[aria-selected="false"] { color: var(--ink); opacity: .72; }
.persona-tabs button[aria-selected="false"]:hover { opacity: 1; }

@media (max-width: 767px) {
  .persona-prompt { font-size: 13px; margin-bottom: 16px; }
}

/* ────────────────────────────────────────────────────────────────────────────
   v7 — 38 frictions sur 73 et 25 blocages sur 36 portaient sur une seule
   question : « quel est mon prix ». Sans la grille, on ne peut pas y répondre
   sur la page. On fait donc en sorte qu'elle cesse de bloquer l'action : le
   tarif s'affiche à la création du compte, sans appel et sans risque.
   ──────────────────────────────────────────────────────────────────────────── */
.hero-promise {
  display: flex;
  gap: 11px;
  margin: 22px 0 18px;
  padding: 14px 16px;
  max-width: 520px;
  border-radius: 8px;
  background: #ffffffb3;
  border: 1px solid #c7ddd4;
  font-size: 14px;
  line-height: 1.65;
  color: var(--muted);
}
.hero-promise .icon { flex-shrink: 0; color: var(--green-accessible); margin-top: 2px; }
.hero-promise strong { color: var(--ink); font-weight: 600; }

.pricing-steps { margin: 20px 0 24px; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 14px; }
.pricing-steps li { display: flex; gap: 13px; align-items: flex-start; font-size: 14px; line-height: 1.6; color: var(--muted); }
.pricing-steps li > span {
  flex-shrink: 0;
  width: 23px; height: 23px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--green-accessible); color: #fff;
  font-size: 12px; font-weight: 700;
}
.pricing-steps strong { color: var(--ink); font-weight: 600; }

/* La grille de comparaison que le prospect aurait dû construire seul.
   Sylvie remplit un tableur, Thomas compare des périmètres : on leur donne
   l'outil, avec nos réponses déjà écrites. Les cases resteront vides ailleurs. */
.checklist { margin-top: 64px; padding-top: 44px; border-top: 1px solid var(--line); }
.checklist-head { max-width: 620px; margin-bottom: 34px; }
.checklist-head h3 { font-size: 30px; letter-spacing: -1.1px; line-height: 1.25; margin: 0 0 14px; }
.checklist-head > p:last-child { font-size: 16px; line-height: 1.75; color: var(--muted); margin: 0; }
.checklist-list { margin: 0; padding: 0; list-style: none; counter-reset: q; display: grid; grid-template-columns: 1fr 1fr; gap: 24px 48px; }
.checklist-list li { counter-increment: q; position: relative; padding-left: 38px; min-width: 0; }
.checklist-list li:before {
  content: counter(q, decimal-leading-zero);
  position: absolute; left: 0; top: 1px;
  font-size: 12px; font-weight: 700; letter-spacing: .5px;
  color: var(--green-accessible);
}
.checklist-q { margin: 0 0 7px; font-size: 16px; font-weight: 600; line-height: 1.5; color: var(--ink); }
.checklist-a { margin: 0; font-size: 15px; line-height: 1.7; color: var(--muted); }

@media (max-width: 1023px) {
  .checklist-list { gap: 22px 32px; }
}
@media (max-width: 767px) {
  .hero-promise { font-size: 13px; padding: 12px 13px; margin: 18px 0 16px; }
  .checklist { margin-top: 44px; padding-top: 32px; }
  .checklist-head h3 { font-size: 24px; }
  .checklist-head > p:last-child { font-size: 15px; }
  .checklist-list { grid-template-columns: 1fr; gap: 20px; }
  .checklist-q { font-size: 15px; }
  .checklist-a { font-size: 14px; }
  .pricing-steps li { font-size: 13px; }
}

/* ────────────────────────────────────────────────────────────────────────────
   La section « Pourquoi choisir VivoFleet » reprend le vert pâle du hero.
   L'aplat #1bab81 était le seul endroit de la page à imposer un compromis de
   contraste : il fallait assombrir l'encre à #0c2e23 pour atteindre 5,03:1.
   Sur #e8f6f2, l'encre standard de la page passe à 12:1 et la section se relie
   visuellement à l'ouverture au lieu de trancher au milieu du parcours.
   ──────────────────────────────────────────────────────────────────────────── */
.vision-section { background: var(--paper); }
.vision-copy .eyebrow { color: var(--green-accessible); }
.vision-copy > p:not(.eyebrow),
.vision-principles p { color: var(--muted); }
.vision-principles > div > span { color: #35604f; }
.vision-copy h2 { color: var(--ink); }
.vision-principles strong { color: var(--ink); }
.vision-photo figcaption { color: #6b5a1f; }

/* ==================================================================
   v8 — Simulateur d'abonnement
   Ajouté en fin de feuille : les règles gagnent par ordre de cascade
   sur la base minifiée. Tailles de texte ≥ 14 px, comme le reste des
   ajustements de lisibilité — le simulateur est le cœur de la page,
   il ne suit pas l'échelle réduite de l'ancienne carte tarifaire.
   ================================================================== */

.sim { margin-bottom: 26px; }

.sim-question {
    display: block;
    font-size: 15px;
    font-weight: 600;
    color: var(--ink);
    margin-bottom: 14px;
    line-height: 1.5;
}

.sim-count {
    display: flex;
    align-items: stretch;
    gap: 10px;
    max-width: 260px;
}

.sim-count input {
    flex: 1 1 auto;
    min-width: 0;
    font: 600 26px/1.2 Montserrat, Arial, sans-serif;
    color: var(--ink);
    text-align: center;
    padding: 12px 8px;
    border: 1px solid #c6d4bc;
    border-radius: 8px;
    background: #fff;
    -moz-appearance: textfield;
}

.sim-count input::-webkit-outer-spin-button,
.sim-count input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.sim-step {
    width: 48px;
    flex: 0 0 48px;
    border: 1px solid #c6d4bc;
    border-radius: 8px;
    background: #fff;
    color: var(--green-accessible);
    font-size: 22px;
    line-height: 1;
    font-weight: 600;
}

.sim-step:hover { background: var(--mint); }

.sim-range {
    display: block;
    width: 100%;
    max-width: 340px;
    margin: 16px 0 24px;
    accent-color: var(--green);
}

.sim-engagement {
    border: 0;
    padding: 0;
    margin: 0 0 22px;
}

.sim-engagement legend {
    padding: 0;
    font-size: 15px;
    font-weight: 600;
    color: var(--ink);
    margin-bottom: 12px;
}

.sim-choices { display: flex; gap: 8px; flex-wrap: wrap; }

.sim-choices label {
    flex: 1 1 90px;
    text-align: center;
    padding: 12px 6px;
    border: 1px solid #c6d4bc;
    border-radius: 8px;
    background: #fff;
    font-size: 14px;
    font-weight: 500;
    color: var(--muted);
    cursor: pointer;
    transition: border-color .15s, color .15s, background .15s;
}

.sim-choices label.is-on {
    border-color: var(--green);
    background: var(--mint);
    color: var(--green-accessible);
    font-weight: 600;
}

.sim-choices input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.sim-choices label:focus-within { outline: 3px solid var(--green-accessible); outline-offset: 3px; }

.sim-palier {
    font-size: 14px;
    color: var(--muted);
    margin: 0 0 6px;
    line-height: 1.7;
}

.sim-palier strong { color: var(--ink); font-weight: 600; }

.sim-total {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 6px 12px;
    padding-bottom: 14px;
    border-bottom: 1px solid #cfddc8;
}

.sim-total > strong {
    font: 500 56px/1.1 Montserrat, Arial, sans-serif;
    letter-spacing: -2.5px;
    color: var(--ink);
}

.sim-total > span { font-size: 16px; font-weight: 500; color: #546f48; }

.sim-total > em {
    flex: 1 0 100%;
    font-style: normal;
    font-size: 15px;
    color: var(--muted);
}

.sim-saving,
.sim-hint,
.sim-ceiling {
    font-size: 14px;
    line-height: 1.75;
    margin: 14px 0 0;
}

.sim-saving { color: var(--green-accessible); font-weight: 600; }
.sim-hint, .sim-ceiling { color: var(--muted); }

.sim-source {
    font-size: 13px;
    line-height: 1.75;
    color: #6d7c63;
    margin: 18px 0 0;
    padding-top: 14px;
    border-top: 1px dashed #cfddc8;
}

.sim-options {
    border-top: 1px solid #cfddc8;
    padding-top: 22px;
    margin-bottom: 24px;
}

.sim-options > .includes-label {
    display: block;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 1px;
    color: #546f48;
    margin-bottom: 14px;
}

.sim-options ul { list-style: none; margin: 0; padding: 0; }

.sim-options li {
    font-size: 14px;
    line-height: 1.75;
    color: var(--muted);
    padding: 0 0 12px 18px;
    position: relative;
}

.sim-options li:before {
    content: "";
    position: absolute;
    left: 0;
    top: 11px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--green);
}

.sim-options li strong { color: var(--ink); font-weight: 600; }

.sim-options-note {
    font-size: 14px;
    line-height: 1.8;
    color: var(--muted);
    margin: 6px 0 0;
    padding: 14px 16px;
    background: #fff;
    border: 1px solid #dae5d5;
    border-radius: 8px;
}

.sim-options-note strong { color: var(--ink); }

.sim-cta-note {
    font-size: 13px;
    line-height: 1.75;
    color: #6d7c63;
    margin: 12px 0 0;
    text-align: center;
}

.sim-cta-note strong { color: var(--green-accessible); }

.pricing-card > .btn { font-size: 14px; min-height: 52px; }

@media (max-width: 1023px) {
    .sim-total > strong { font-size: 46px; letter-spacing: -2px; }
    .sim-count { max-width: 100%; }
}

@media (max-width: 767px) {
    .sim-question, .sim-engagement legend { font-size: 15px; }
    .sim-total > strong { font-size: 48px; }
    .sim-range { max-width: 100%; }
    .sim-choices label { flex: 1 1 80px; font-size: 14px; }
}

@media (max-width: 370px) {
    .sim-total > strong { font-size: 40px; letter-spacing: -1.5px; }
    .sim-count input { font-size: 22px; }
    .sim-step { width: 42px; flex-basis: 42px; }
}

/* Carte tarifaire allegee : le detail des options part dans #detail-offre, la
   carte ne garde qu'une ligne, pour que le simulateur tienne dans un ecran. */
.sim-options-line {
    font-size: 14px;
    line-height: 1.75;
    color: var(--muted);
    margin: 18px 0 22px;
    padding-top: 18px;
    border-top: 1px solid #cfddc8;
}
.sim-options-line strong { color: var(--ink); }
.sim-options-line a { color: var(--green-accessible); text-decoration: underline; text-underline-offset: 3px; }
.includes-optional li { margin-bottom: 10px; line-height: 1.7; }
.includes-note.options-prix { margin-top: 14px; }
.sim { margin-bottom: 0; }

/* --- Corrections d'accessibilite et de contraste ------------------------- */

/* #11 contraste : #6d7c63 donnait 3,96:1 sur le fond de la carte et
   var(--muted) 4,37:1 - tous deux sous le seuil WCAG AA de 4,5:1.
   #5e6c55 mesure 4,98:1 sur la carte et 5,04:1 sur le fond menthe. */
.sim-source,
.sim-cta-note { color: #5e6c55; }
.sim-palier,
.sim-hint,
.sim-ceiling,
.sim-total > em,
.sim-options-line,
.pricing-card .includes-note,
.pricing-card .includes-optional li { color: #5e6c55; }

/* #6 le perimetre du produit, avant la saisie du nombre de vehicules */
.sim-scope {
    font-size: 14px;
    line-height: 1.7;
    color: #5e6c55;
    background: #fff;
    border: 1px solid #dae5d5;
    border-radius: 8px;
    padding: 12px 14px;
    margin: 0 0 20px;
}
.sim-scope strong { color: var(--ink); }

/* #5 la borne a exactement 200 vehicules est litigieuse dans la source */
.sim-edge {
    font-size: 14px;
    line-height: 1.75;
    color: #8a5a10;
    background: #fff8e8;
    border: 1px solid #f0dcae;
    border-radius: 8px;
    padding: 10px 13px;
    margin: 14px 0 0;
}

/* #11 repli sans JavaScript : le simulateur ne calcule rien, on le remplace */
.sim-nojs {
    font-size: 15px;
    line-height: 1.8;
    color: var(--ink);
    background: #fff;
    border: 1px solid #dae5d5;
    border-radius: 8px;
    padding: 16px 18px;
    margin: 0 0 22px;
}

/* --- Carte compacte : saisie et duree cote a cote, mentions resserrees ---- */
.pricing-card { padding: 26px 26px 22px; }
.pricing-card-top { padding-bottom: 16px; margin-bottom: 18px; }

.sim-scope {
    font-size: 13px; line-height: 1.6; color: #5e6c55;
    background: #fff; border: 1px solid #dae5d5; border-radius: 7px;
    padding: 9px 12px; margin: 0 0 16px;
}
.sim-row { display: flex; flex-wrap: wrap; gap: 18px 24px; margin-bottom: 18px; }
.sim-field { flex: 1 1 190px; min-width: 0; border: 0; padding: 0; margin: 0; }
.sim-question, .sim-engagement legend { font-size: 14px; margin-bottom: 8px; padding: 0; }
.sim-engagement { margin: 0; }
.sim-count { max-width: none; }
.sim-count input { font-size: 22px; padding: 9px 6px; }
.sim-step { width: 42px; flex-basis: 42px; font-size: 20px; }
.sim-choices { gap: 6px; }
.sim-choices label { flex: 1 1 60px; padding: 10px 4px; font-size: 13px; }

.sim-palier { font-size: 13px; margin: 0 0 4px; }
.sim-total { padding-bottom: 12px; }
.sim-total > strong { font-size: 46px; letter-spacing: -2px; }
.sim-total > span { font-size: 15px; }
.sim-total > em { font-size: 14px; }
.sim-saving, .sim-ceiling, .sim-edge { font-size: 13px; margin-top: 10px; }
.sim-edge { padding: 8px 11px; }
.sim-source { font-size: 12px; margin-top: 12px; padding-top: 10px; }
.sim-options-line { font-size: 13px; margin: 16px 0 16px; padding-top: 14px; }
.sim-cta-note { font-size: 12px; margin-top: 9px; }
.pricing-card > .btn { min-height: 48px; font-size: 13px; }

@media (max-width: 767px) {
    .sim-row { gap: 16px; }
    .sim-field { flex: 1 1 100%; }
    .sim-total > strong { font-size: 42px; }
}

/* --- #detail-offre : aerer -------------------------------------------- */
.includes-optional li {
    display: block;
    margin-bottom: 14px;
    padding-left: 0;
    line-height: 1.7;
}
.includes-optional li strong {
    display: block;
    color: var(--ink);
    font-size: 14px;
    margin-bottom: 3px;
}
.includes-optional li span {
    display: block;
    font-size: 13px;
    color: #5e6c55;
    line-height: 1.75;
}
.includes-facts li { margin-bottom: 11px; line-height: 1.7; }

.includes-geotab {
    font-size: 13px;
    line-height: 1.75;
    color: #5e6c55;
    background: #fff;
    border: 1px solid #dae5d5;
    border-left: 3px solid var(--green);
    border-radius: 7px;
    padding: 12px 14px;
    margin: 18px 0 14px;
}
.includes-geotab strong { color: var(--green-accessible); }
.includes-note.options-prix { font-size: 13px; line-height: 1.75; }

/* bloc migration : trois points au lieu d un paragraphe */
.includes-migration > strong { display: block; color: var(--ink); font-size: 15px; margin-bottom: 10px; }
.includes-migration ul { list-style: none; margin: 0 0 12px; padding: 0; }
.includes-migration li { position: relative; padding-left: 18px; margin-bottom: 8px; font-size: 14px; line-height: 1.7; color: #5e6c55; }
.includes-migration li:before { content: ""; position: absolute; left: 0; top: 10px; width: 6px; height: 6px; border-radius: 50%; background: var(--green); }

/* La vague relie une section claire a un bloc sombre. Son vert d origine
   coulait vers un pied de page vert (style.css:162) que la charte actuelle
   a repasse en --ink : elle formait donc une bande verte entre deux zones
   sombres. Recoloree a l encre et remontee avant le bloc final, elle
   retrouve son role de transition. */
.footer-wave { background: #fff; }

/* --- Visuels produit publies par VivoFleet ---------------------------- */
/* L application conducteur remplace la photo d illustration : meme cadre,
   mais le contenu est le produit reel. Fond clair et contain, car ce sont
   des ecrans de telephone et non une photo a recadrer. */
.driver-photo { background: var(--mint); }
.driver-photo > .driver-media {
    height: 100%; width: 100%;
    object-fit: contain; object-position: center;
    border-radius: 9px; display: block;
}
.driver-photo:has(.driver-media):after { background: none; }

/* La geolocalisation, avec sa zone d alerte */
/* La capture vit maintenant dans une reponse de FAQ : une colonne, plus
   etroite, sans cadre puisque la reponse en fait deja office. */
.geoloc-figure { margin: 16px 0 0; max-width: 520px; }
.geoloc-figure img { width: 100%; height: auto; border-radius: 7px; border: 1px solid var(--line); }
.geoloc-figure figcaption { font-size: 13px; line-height: 1.7; color: #5e6c55; margin-top: 8px; font-style: italic; }

.geoloc-figure figcaption strong { color: var(--ink); }


/* Les surimpressions etaient calibrees pour une photo sombre : blanc avec
   ombre portee, et une annotation creme. Sur le fond menthe de l animation
   produit, elles devenaient illisibles. */
.driver-photo:has(.driver-media) .photo-caption {
    color: #2c4a3d;
    text-shadow: none;
    font-size: 9px;
    font-weight: 600;
}
.driver-photo:has(.driver-media) .photo-caption .status-dot { background: var(--green-accessible); }
.driver-photo:has(.driver-media) .driver-annotation { color: #7a5600; }
.driver-photo:has(.driver-media) .driver-annotation svg { stroke: #7a5600; }

/* L animation du conducteur porte un fond #e8f6f2 cuit dans l image, soit
   --mint. Sur une section blanche elle formait un pave vert. On teinte la
   section et on efface le cadre : le produit flotte dans la bande. */
.driver-section:has(.driver-media) { background: var(--mint); }
.driver-photo:has(.driver-media) {
    background: transparent;
    height: auto;
    aspect-ratio: 720 / 604;
    border-radius: 0;
}
.driver-photo > .driver-media { border-radius: 0; }
.driver-section:has(.driver-media) .driver-photo-note { background: #fff; }

/* L annotation manuscrite visait une zone vide de la photo. Sur les ecrans
   de l application elle tombe en travers des telephones : on la retire,
   la legende en haut a gauche dit deja la meme chose. */
.driver-photo:has(.driver-media) .driver-annotation { display: none; }

/* Aucune valeur de depart ne convient aux differentes tailles de parc : le
   poids visuel va sur l invitation a saisir son propre chiffre. */
.sim-invite { font-size: 13px; line-height: 1.6; color: #5e6c55; margin: -4px 0 10px; }

/* --- Accroche du hero : la seconde moitie se reecrit ------------------- */
.accroche-rot { display: inline-block; max-width: 100%; }
.accroche-curseur {
    display: inline-block;
    width: 1px;
    height: 1em;
    margin-left: 3px;
    vertical-align: -0.12em;
    background: currentColor;
    animation: accroche-clignote 1.05s steps(1) infinite;
}
@keyframes accroche-clignote { 0%, 45% { opacity: 1; } 50%, 100% { opacity: 0; } }

/* Texte reserve aux lecteurs d ecran : present dans l arbre, invisible. */
.sr-only {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Quelqu un qui demande moins d animations garde la phrase fixe. */
@media (prefers-reduced-motion: reduce) {
    .accroche-curseur { display: none; }
}

/* --- Barre d appel, mobile uniquement --------------------------------- */
.barre-appel {
    display: none;
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 60;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 11px 16px;
    padding-bottom: calc(11px + env(safe-area-inset-bottom, 0px));
    background: #fff;
    border-top: 1px solid var(--line);
    box-shadow: 0 -8px 24px #12291d1a;
    transform: translateY(110%);
    visibility: hidden;
    transition: transform .28s ease, visibility .28s;
}
.barre-appel.est-visible { transform: translateY(0); visibility: visible; }
.barre-appel-texte { font-size: 13px; line-height: 1.4; color: #5e6c55; }
.barre-appel-lien { flex: 0 0 auto; gap: 8px; padding: 11px 15px; font-size: 14px; min-height: 0; }

@media (max-width: 767px) { .barre-appel { display: flex; } }
@media (max-width: 370px) {
    .barre-appel { padding-inline: 12px; gap: 10px; }
    .barre-appel-texte { font-size: 12px; }
    .barre-appel-lien { padding: 10px 12px; font-size: 13px; }
}
@media (prefers-reduced-motion: reduce) { .barre-appel { transition: none; } }
@media print { .barre-appel { display: none !important; } }

/* --- Pastilles du hero : une seule a la fois --------------------------
   Le conseil veut voir les differenciateurs des l arrivee (flyer FLOTAUTO
   Lyon 2026). Les six sont dans la page, mais une seule est montree a la
   fois : affichees ensemble elles couvrent le visuel. Elles montent sur
   le bord droit de la video, jaune et proportions du flyer.
   Les six sont empilees au meme endroit (grid-area commune) : le bloc
   garde la hauteur de la plus haute, rien ne bouge au changement. */
.hero-tags {
    position: absolute;
    top: 6%;
    right: 2.5%;
    z-index: 3;
    display: grid;
    margin: 0;
    padding: 0;
    list-style: none;
    justify-items: end;
    pointer-events: none;
}
.hero-tag {
    --incline: 0deg;
    grid-area: 1 / 1;
    /* Chacune garde sa hauteur propre : empilees dans la meme cellule,
       elles s etiraient toutes a la hauteur de la plus grande et le texte
       laissait un vide sous lui, a la place reservee par la mention. */
    align-self: start;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 11px 22px;
    border-radius: 999px;
    /* Le jaune du flyer, legerement transparent : le tableau de bord
       reste devine dessous, la pastille se pose sur l image au lieu de
       la trouer. Le flou garde le texte lisible sur les zones chargees. */
    background: rgba(252, 217, 103, .92);
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
    box-shadow: 0 12px 30px -10px #1a2b1f73;
    text-align: center;
    line-height: 1.25;
    opacity: 0;
    transform: translateY(14px) rotate(var(--incline));
    transition: opacity .55s ease, transform .55s cubic-bezier(.2,.7,.3,1);
}
.hero-tag.est-en-avant { opacity: 1; transform: rotate(var(--incline)); }
.hero-tag > strong {
    font-size: 15px;
    font-weight: 800;
    letter-spacing: .2px;
    color: #152e28;
    white-space: nowrap;
}
.hero-tag > span {
    font-size: 12px;
    color: #4a4326;
    white-space: nowrap;
}

/* Sur ordinateur la pastille deborde du cadre et s incline : elle se pose
   sur l image plutot que de s y ranger. Elle reste dans la colonne, le
   debordement ne depasse jamais la gouttiere de la page. */
@media (min-width: 1024px) {
    .hero-tags { top: 3%; right: -2.4%; }
    .hero-tag { --incline: -2.4deg; }
}
/* Ce qui n est pas encore livre le dit, avec les memes mots que l onglet
   « Avantages en nature » plus bas dans la page. Deux mentions parce que
   deux etats : le module AEN a une date, l assistant n en a pas. */
.hero-tag > em {
    margin-top: 3px;
    padding: 1px 8px;
    border-radius: 4px;
    background: #152e28;
    font-style: normal;
    font-weight: 700;
    font-size: 9.5px;
    letter-spacing: .4px;
    text-transform: uppercase;
    color: #fcd967;
}

/* --- L application conducteur entre dans le visuel ---------------------
   On ne remplace pas la video du tableau de bord : elle est en 1128 × 804
   et celle du conducteur en 720 × 604. Echanger l une pour l autre
   changerait la forme du panneau en pleine lecture. On fait donc la
   composition du flyer lui-meme — l ordinateur et le telephone ensemble —
   en recadrant le telephone du milieu (262 × 538 a partir de 229, 24). */
.hero-media { position: relative; width: 100%; }
.hero-cadre { position: relative; }
.hero-driver {
    position: absolute;
    right: 3.5%;
    bottom: 4%;
    width: 20%;
    min-width: 96px;
    z-index: 2;
    opacity: 0;
    transform: translateY(16px);
    transition: opacity .75s ease, transform .75s cubic-bezier(.2,.7,.3,1);
}
.hero-driver.est-la { opacity: 1; transform: none; }
.hero-driver-cadre {
    position: relative;
    aspect-ratio: 262 / 538;
    overflow: hidden;
    border-radius: 13px;
    background: var(--mint);
    box-shadow: 0 16px 34px -8px #12291d4d;
}
.hero-driver-media {
    position: absolute;
    top: -4.46%;
    left: -87.4%;
    width: 274.81%;
    height: 112.27%;
    max-width: none;
}
/* Le vert pale du flyer pour la mention « inclus ». */
.hero-driver-badge {
    margin: 9px 0 0;
    padding: 6px 12px;
    border-radius: 999px;
    background: #c2dfb8;
    box-shadow: 0 6px 16px -6px #12291d33;
    text-align: center;
    font-size: 11px;
    line-height: 1.3;
    color: #2d4432;
}
.hero-driver-badge > strong { display: block; color: #152e28; font-weight: 800; }

/* Entre 1024 et 1280 le cadre video descend a environ 330 px de haut : la
   pastille garde sa taille courante et le telephone se resserre, faute de
   quoi les deux se recouvrent. */
@media (min-width: 1024px) and (max-width: 1279px) {
    .hero-tags { top: 1%; }
    .hero-driver { width: 15%; }
    .hero-driver-badge { font-size: 8.5px; padding: 4px 8px; margin-top: 6px; }
}
@media (min-width: 1280px) {
    .hero-tag { padding: 14px 28px; gap: 3px; }
    .hero-tag > strong { font-size: 18px; letter-spacing: .1px; }
    .hero-tag > span { font-size: 13.5px; }
    .hero-tag > em { font-size: 10.5px; padding: 2px 9px; }
}

@media (max-width: 1023px) {
    .hero-tag { padding: 9px 17px; }
    .hero-tag > strong { font-size: 12.5px; }
    .hero-tag > span { font-size: 10px; }
    .hero-tag > em { font-size: 8.5px; }
    .hero-driver { width: 25%; }
    .hero-driver-badge { font-size: 9px; padding: 5px 9px; margin-top: 7px; }
}
/* Sur telephone la pastille passe au pied de la video, a gauche du
   telephone conducteur qui occupe le coin droit. */
@media (max-width: 767px) {
    .hero-tags { top: auto; bottom: 5%; left: 4%; right: auto; justify-items: start; }
    .hero-tag { padding: 9px 15px; max-width: 62vw; }
    .hero-tag > strong { font-size: 12px; white-space: normal; }
    .hero-tag > span { font-size: 10px; white-space: normal; }
    .hero-driver { width: 28%; right: 3%; bottom: 4%; }
    .hero-driver-badge { font-size: 9px; }
}

/* Mouvement reduit : plus de rotation, donc les six reprennent leur place
   sous la video, toutes lisibles, sans rien recouvrir. Repond aussi au
   critere « pause, arret, masquage » pour un contenu qui se renouvelle. */
@media (prefers-reduced-motion: reduce) {
    .hero-tags {
        position: static;
        display: flex;
        flex-wrap: wrap;
        gap: 7px;
        margin-top: 16px;
        pointer-events: auto;
    }
    .hero-tag { opacity: 1; transform: none; align-items: flex-start; text-align: left; padding: 8px 15px; }
    .hero-tag > strong { font-size: 12px; white-space: nowrap; }
    .hero-tag > span { font-size: 10px; white-space: nowrap; }
    .hero-tag > em { margin-top: 2px; }
}
@media print { .hero-driver, .hero-tags { display: none !important; } }

/* --- Navigation : des cibles qui se voient ----------------------------
   Les entrees du menu etaient du texte nu, soulignees au survol sur
   2 px : rien ne disait qu on pouvait cliquer avant d y passer. Elles
   deviennent des pastilles, avec la meme forme que les boutons de la
   page. L espacement passe dans le rembourrage, sinon la barre deborde. */
/* Les entrees du menu restent du texte : la version en pastilles alourdit
   l en-tete. Seul le soulignement s affirme, et la couleur suit. */
.desktop-nav a { transition: color .18s ease; }
.desktop-nav a:hover,
.desktop-nav a:focus-visible { color: #0b5f47; }
.desktop-nav a:after { height: 2px; bottom: 2px; }

/* « Se connecter » mene a l application : c est une action, pas un lien
   de lecture. Contour discret au repos, plein au survol. */
.login-link {
    padding: 9px 15px;
    border: 1px solid var(--line);
    border-radius: 999px;
    color: var(--ink);
    transition: background-color .18s ease, border-color .18s ease, color .18s ease;
}
.login-link:hover,
.login-link:focus-visible { background: var(--mint); border-color: #9ed4bf; color: #0b5f47; }

.desktop-nav a:focus-visible,
.login-link:focus-visible,
.mobile-nav > a:focus-visible {
    outline: 2px solid var(--green-accessible);
    outline-offset: 2px;
}


/* Menu mobile : chaque ligne est une cible pleine largeur, pas un mot. */
@media (max-width: 767px) {
    .mobile-nav > a {
        padding: 13px 14px;
        border-radius: 10px;
        transition: background-color .18s ease;
    }
    .mobile-nav > a:hover,
    .mobile-nav > a:active { background: var(--mint); }
}

/* --- Ce qui arrive ----------------------------------------------------
   « Prochaine mise a jour » n existait que sous la forme d une etiquette
   sur un onglet : invisible pour qui ne cliquait pas dessus. Les
   evolutions ont desormais leur section, nommee dans le menu, juste
   apres « Notre vision » qui promet que les retours orientent la suite.
   Le jaune garde le meme sens que sur les pastilles du hero : a venir. */
.roadmap-section { background: var(--paper); }
.roadmap {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.roadmap-step {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    padding: 26px 28px;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: #fff;
}
/* La seule a porter une date tient la largeur de deux cartes. */
.roadmap-step.est-datee {
    grid-column: span 2;
    border-color: #f0d282;
    background: linear-gradient(180deg, #fffaec, #fff 60%);
}
.roadmap-quand {
    margin: 0;
    padding: 4px 11px;
    border-radius: 999px;
    background: #eef3f0;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .6px;
    text-transform: uppercase;
    color: #4f6058;
}
.roadmap-step.est-datee .roadmap-quand { background: #fcd967; color: #4a3a05; }
.roadmap-step h3 {
    margin: 0;
    font-size: 19px;
    font-weight: 700;
    letter-spacing: -.2px;
    color: var(--ink);
    line-height: 1.3;
}
.roadmap-step.est-datee h3 { font-size: 24px; }
.roadmap-step > p {
    margin: 0;
    font-size: 14px;
    line-height: 1.75;
    color: var(--muted);
}
.roadmap-step .text-link { margin-top: auto; padding-top: 6px; font-size: 13px; }

@media (max-width: 1023px) {
    .roadmap { grid-template-columns: repeat(2, 1fr); gap: 14px; }
    .roadmap-step { padding: 22px 22px; }
    .roadmap-step h3 { font-size: 16px; }
    .roadmap-step.est-datee h3 { font-size: 20px; }
    .roadmap-step > p { font-size: 12px; }
}
@media (max-width: 767px) {
    .roadmap { grid-template-columns: 1fr; gap: 12px; }
    .roadmap-step.est-datee { grid-column: auto; }
    .roadmap-step { padding: 22px 20px; }
    .roadmap-step h3, .roadmap-step.est-datee h3 { font-size: 18px; }
    .roadmap-step > p { font-size: 12.5px; }
}

/* --- Le menu suit la lecture ------------------------------------------
   L entree de la section traversee garde son soulignement, celui-la
   meme qui apparait au survol : un seul langage pour « c est ici ». */
/* Pas de changement de graisse ici : il elargit le mot et decale ses
   voisins a chaque section traversee. La couleur et le trait suffisent. */
.desktop-nav a.est-active { color: #0b5f47; }
.desktop-nav a.est-active:after { width: 100%; }
@media (max-width: 767px) {
    .mobile-nav > a.est-active { background: var(--mint); color: #0b5f47; font-weight: 600; }
}

/* --- « Vos vehicules » en inverse -------------------------------------
   Le point de depart de la phrase prend le contraste inverse du reste :
   fond encre, texte clair. Rembourrage vertical nul et interligne force
   a 0 : un inline-block rembourre dans un paragraphe en interligne 1,75
   grandit la ligne et decale tout le bloc sous lui. */
.hero-description .mot-inverse {
    display: inline-block;
    padding: 0 9px;
    border-radius: 7px;
    background: var(--ink);
    color: #fff;
    font-weight: 600;
    line-height: inherit;
}