/* MileMate marketing site — "The Quiet Road" */
:root{
  --teal:#1F4E5F; --teal-dark:#0E3B4A; --teal-deep:#0B2F3B; --sky:#7DC4D9;
  --amber:#E08E2B; --amber-dark:#C97A1B;
  --cream:#FAF7F0; --paper:#FFFFFF; --on-dark:#FFFFFF; --ink:#1F2024; --ink-soft:#3B3F46; --gray:#6B7280; --line:#E5E2DA;
  --display:'Manrope',system-ui,sans-serif; --body:'Inter',system-ui,sans-serif;
  --r:16px; --r-sm:10px; --max:1120px;
  --on-amber:#0B2F3B; --amber-hover:#EDA34E; --amber-ink:#8A4F08; --amber-wash:#FFE0B5;
  --store-black:#000000; --store-outline:#A6A6A6;
}
@font-face{font-family:'Manrope';font-style:normal;font-weight:500;font-display:swap;src:url(assets/fonts/manrope-500-latin.woff2) format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:400 500;font-display:swap;src:url(assets/fonts/inter-latin.woff2) format('woff2')}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:84px}
body{font-family:var(--body);font-size:17px;line-height:1.6;color:var(--ink);background:var(--paper);-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:var(--teal);text-underline-offset:.18em;text-decoration-thickness:1px}
::selection{background:var(--amber-wash);color:var(--ink)}
strong,b{font-weight:500}
h1,h2,h3{font-family:var(--display);font-weight:500;line-height:1.1;letter-spacing:-.02em;text-wrap:balance}
.wrap{width:min(var(--max),100% - 40px);margin-inline:auto}
.skip{position:absolute;left:-999px;top:8px;background:var(--amber);color:var(--on-amber);padding:8px 14px;border-radius:10px;z-index:100}
.skip:focus{left:8px}
:focus-visible{outline:3px solid var(--sky);outline-offset:3px;border-radius:6px}

/* Icons: Lucide (ISC), drawn as masks in the current text colour */
.ic{display:inline-block;flex:none;width:22px;height:22px;background:currentColor;-webkit-mask:var(--ic) center/contain no-repeat;mask:var(--ic) center/contain no-repeat}
.ic--car{--ic:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.75%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M19 17h2c.6 0 1-.4 1-1v-3c0-.9-.7-1.7-1.5-1.9C18.7 10.6 16 10 16 10s-1.3-1.4-2.2-2.3c-.5-.4-1.1-.7-1.8-.7H5c-.6 0-1.1.4-1.4.9l-1.4 2.9A3.7 3.7 0 0 0 2 12v4c0 .6.4 1 1 1h2%22/%3E%3Ccircle cx=%227%22 cy=%2217%22 r=%222%22/%3E%3Cpath d=%22M9 17h6%22/%3E%3Ccircle cx=%2217%22 cy=%2217%22 r=%222%22/%3E%3C/svg%3E")}
.ic--pin{--ic:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.75%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M20 10c0 4.993-5.539 10.193-7.399 11.799a1 1 0 0 1-1.202 0C9.539 20.193 4 14.993 4 10a8 8 0 0 1 16 0%22/%3E%3Ccircle cx=%2212%22 cy=%2210%22 r=%223%22/%3E%3C/svg%3E")}
.ic--lock{--ic:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.75%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Crect width=%2218%22 height=%2211%22 x=%223%22 y=%2211%22 rx=%222%22 ry=%222%22/%3E%3Cpath d=%22M7 11V7a5 5 0 0 1 10 0v4%22/%3E%3C/svg%3E")}
.ic--file{--ic:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.75%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z%22/%3E%3Cpath d=%22M14 2v4a2 2 0 0 0 2 2h4%22/%3E%3Cpath d=%22M10 9H8%22/%3E%3Cpath d=%22M16 13H8%22/%3E%3Cpath d=%22M16 17H8%22/%3E%3C/svg%3E")}
.ic--cloud{--ic:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.75%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M17.5 19H9a7 7 0 1 1 6.71-9h1.79a4.5 4.5 0 1 1 0 9Z%22/%3E%3C/svg%3E")}
.ic--shield{--ic:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.75%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z%22/%3E%3Cpath d=%22m9 12 2 2 4-4%22/%3E%3C/svg%3E")}

.ic--check{--ic:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M20 6 9 17l-5-5%22/%3E%3C/svg%3E")}
.ic--x{--ic:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M18 6 6 18%22/%3E%3Cpath d=%22m6 6 12 12%22/%3E%3C/svg%3E")}
.ic--minus{--ic:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M5 12h14%22/%3E%3C/svg%3E")}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font:500 16px/1 var(--display);padding:14px 22px;border-radius:12px;text-decoration:none;border:2px solid transparent;transition:background .2s,border-color .2s,color .2s,transform .2s;white-space:nowrap}
.btn--sm{padding:10px 16px;font-size:14px;border-radius:10px}
.btn--amber{background:var(--amber);color:var(--on-amber)}
.btn--amber:hover{background:var(--amber-hover)}
.btn--outline{border-color:rgba(255,255,255,.5);color:var(--on-dark)}
.btn--outline:hover{border-color:var(--on-dark);background:rgba(255,255,255,.08)}
.btn--outline-dark{border-color:var(--teal);color:var(--teal)}
.btn--outline-dark:hover{background:var(--teal);color:var(--on-dark)}
.btn:active{transform:translateY(1px)}
.play-badge{display:inline-flex;border-radius:7px;transition:transform .2s,filter .2s}
.play-badge img{display:block;height:56px;width:auto}
.play-badge:hover{filter:brightness(1.15)}
.play-badge:active{transform:translateY(1px)}

/* Nav */
.nav{position:sticky;top:0;z-index:50;background:var(--teal-dark);color:var(--on-dark);border-bottom:1px solid rgba(255,255,255,.08)}
.nav__inner{display:flex;align-items:center;gap:32px;height:68px}
.brand{display:inline-flex;align-items:center;gap:10px;color:var(--on-dark);text-decoration:none;font:500 20px var(--display);letter-spacing:-.02em}
.brand img{border-radius:9px}
.nav nav{margin-left:auto}
.nav__stores{display:flex;align-items:center;gap:8px}
.nav__stores>*{transform-origin:0 0}
.nav__stores .play-badge img{height:36px}
.js .nav__stores[data-hero-hide]:not(.is-shown){display:none}
.nav__links{display:flex;gap:28px;list-style:none}
.nav__links a{color:rgba(255,255,255,.78);text-decoration:none;font-size:15px;font-weight:500}
.nav__links a:hover{color:var(--on-dark)}

/* Hero */
.hero{background:var(--teal-dark);color:var(--on-dark);position:relative;overflow:hidden;padding:56px 0 0}
.hero__grid{position:relative;display:grid;grid-template-columns:1.1fr .9fr;gap:40px;align-items:end;min-height:min(820px,calc(100svh - 68px))}
.hero__copy{padding-bottom:96px;align-self:center;position:relative;z-index:1}
.hero h1{font-size:clamp(52px,8.4vw,96px);line-height:.98;letter-spacing:-.035em;margin-bottom:28px}
.lede{font-size:19px;color:rgba(255,255,255,.82);max-width:28em;margin-bottom:32px}
.hero__cta{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:20px}
.stores{display:flex;flex-wrap:wrap;align-items:center;gap:12px}
.appstore-soon{display:inline-flex;align-items:center;gap:10px;height:56px;padding:0 18px 0 14px;background:var(--store-black);border:1px solid var(--store-outline);border-radius:7px;color:var(--on-dark);cursor:default;user-select:none}
.appstore-soon__logo{flex:none;width:26px;height:26px;margin-top:-3px}
.appstore-soon__text{display:flex;flex-direction:column;font:500 24px/1 var(--display);letter-spacing:-.02em;white-space:nowrap}
.appstore-soon__text small{font:500 11px/1.1 var(--body);letter-spacing:.02em;margin-bottom:3px}
.appstore-soon--sm{height:36px;padding:0 12px 0 9px;gap:6px;border-radius:4px}
.appstore-soon--sm .appstore-soon__logo{width:17px;height:17px;margin-top:-2px}
.appstore-soon--sm .appstore-soon__text{font-size:14px}
.appstore-soon--sm .appstore-soon__text small{font-size:10px;letter-spacing:.02em;margin-bottom:1px}
.hero__shots{position:relative;height:660px}
.hero__disc{position:absolute;left:50%;top:28px;width:760px;aspect-ratio:1;border-radius:50%;background:var(--teal);transform:translateX(-46%)}
.hero__disc::after{content:"";position:absolute;top:14.6%;right:14.6%;width:34px;height:34px;border-radius:50%;background:var(--amber);transform:translate(50%,-50%);box-shadow:0 0 0 10px var(--teal-dark);transition:transform .5s cubic-bezier(.16,1,.3,1)}
.js .hero:not(.is-arrived) .hero__disc::after{transform:translate(50%,-50%) scale(0)}
.hero__route{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.js .hero__route path{stroke-dashoffset:.68}
.hero__route path{fill:none;stroke:var(--sky);stroke-width:4;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:0}
.shot{position:absolute;border-radius:28px 28px 0 0;box-shadow:0 24px 60px rgba(0,0,0,.35)}
.shot--front{width:340px;right:0;bottom:0}
.shot--back{width:280px;right:292px;bottom:0;opacity:.96}

/* Facts */
.facts{background:var(--teal-deep);color:var(--on-dark)}
.facts__list{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;list-style:none;padding:28px 0}
.facts li{display:grid;grid-template-columns:auto 1fr;column-gap:14px;row-gap:2px;align-items:start}
.facts .ic{grid-row:span 2;width:24px;height:24px;margin-top:1px;color:var(--sky)}
.facts strong{font:500 17px var(--display)}
.facts span{font-size:14px;color:rgba(255,255,255,.7)}

/* Sections */
.section{padding:104px 0}
.section--cream{background:var(--cream)}
.section--dark{background:var(--teal-dark);color:var(--on-dark)}
.section__head{max-width:640px;margin-bottom:64px}
.section h2{font-size:clamp(36px,5.2vw,64px);letter-spacing:-.03em;margin-bottom:18px}
.section__head--statement{max-width:none;margin-bottom:96px}
.section .section__head--statement h2{font-size:clamp(56px,10vw,96px);line-height:.95;letter-spacing:-.04em;margin-bottom:24px}
.section__head--statement .section__sub{font-size:20px}
.section__sub{font-size:18px;color:var(--gray);max-width:36em}
.section--dark .section__sub{color:rgba(255,255,255,.78)}

/* Trip route (How it works) */
#how .wrap{position:relative}
.route{position:absolute;left:0;top:0;overflow:visible;pointer-events:none}
.route__track,.route__line{fill:none;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}
.route__track{stroke:var(--line)}
.route__line{stroke:var(--teal);transition:stroke-dashoffset .35s cubic-bezier(.16,1,.3,1)}
.route__stop{fill:var(--paper);stroke:var(--line);stroke-width:2.5;transition:fill .35s,stroke .35s}
.route__stop.is-on{fill:var(--teal);stroke:var(--teal)}
.route__stop--end.is-on{fill:var(--amber);stroke:var(--amber)}

/* Feature rows */
.row{display:grid;grid-template-columns:1fr minmax(240px,340px);gap:72px;align-items:center;margin-bottom:96px}
.row--flip{grid-template-columns:minmax(240px,340px) 1fr}
.row--flip .row__img{order:-1}
.row__num{display:block;font:500 clamp(48px,6vw,72px)/1 var(--display);color:var(--amber-dark);letter-spacing:-.04em;font-variant-numeric:tabular-nums}
.row h3{font-size:clamp(28px,3.6vw,42px);margin:16px 0 18px}
.row p{color:var(--ink-soft);margin-bottom:14px;max-width:32em}
.row .note{font-size:14px;color:var(--gray)}
.row__img{width:100%;border-radius:26px;box-shadow:0 18px 50px rgba(14,59,74,.22)}
.also{border-top:1px solid var(--line);padding-top:56px;display:grid;grid-template-columns:1fr auto;gap:48px;align-items:start}
.also h3{font-size:22px}
.also__cards{display:grid;grid-template-columns:repeat(2,minmax(0,340px));gap:48px}
.also__card img{width:100%;border-radius:20px;box-shadow:0 10px 30px rgba(14,59,74,.16);margin-bottom:16px}
.also__card figcaption{font-size:15px;color:var(--ink-soft)}

/* Split */
.split{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:start}
.log{background:var(--paper);border:1px solid var(--line);border-radius:var(--r);padding:36px 40px;box-shadow:0 14px 40px rgba(14,59,74,.1)}
.log figcaption{font:500 13px var(--display);letter-spacing:.12em;text-transform:uppercase;color:var(--gray);margin-bottom:18px}
.log table{width:100%;border-collapse:collapse}
.log th,.log td{text-align:left;padding:17px 0;border-bottom:1px solid var(--line);font-size:18px;line-height:1.35}
.log th{font-weight:500;color:var(--gray);width:36%;padding-right:20px}
.log .num{font-variant-numeric:tabular-nums;font-weight:500}
.log .total th,.log .total td{border-bottom:0;padding-top:22px;color:var(--teal);font:500 22px var(--display)}
.log .total td{font-size:clamp(28px,3vw,36px);letter-spacing:-.02em;font-variant-numeric:tabular-nums}
/* Sample log writing itself (index.html script) */
.log.is-scrubbed tbody tr{opacity:0;transform:translateY(6px);transition:opacity .35s,transform .45s cubic-bezier(.16,1,.3,1)}
.log.is-scrubbed tbody tr.is-in{opacity:1;transform:none}
.log .pill{transition:box-shadow .5s,transform .3s}
.log.is-tapped .pill{box-shadow:0 0 0 6px rgba(224,142,43,.18)}
.pill{display:inline-block;background:var(--amber-wash);color:var(--amber-ink);font-size:15px;font-weight:500;padding:4px 14px;border-radius:99px}
.disclaimer{margin-top:48px;font-size:14px;color:var(--gray);max-width:46em}

/* Privacy */
.ticks{list-style:none;margin-top:12px;display:grid;gap:20px}
.ticks li{padding-left:36px;position:relative;color:rgba(255,255,255,.86)}
.ticks .ic{position:absolute;left:0;top:2px;color:var(--sky)}
.ticks strong{color:var(--on-dark)}
.ticks a{color:var(--sky)}

/* Pricing */
.plans{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px}
.plan{border:1px solid var(--line);border-radius:var(--r);padding:36px;display:flex;flex-direction:column;gap:20px;background:var(--paper)}
.plan--premium{background:var(--teal-dark);border-color:var(--teal-dark);color:var(--on-dark)}
.plan--premium .plan__price span{color:rgba(255,255,255,.7)}
.plan.plan--premium li::before{border-color:var(--sky)}
.plan--premium li{color:rgba(255,255,255,.9)}
.plan h3{font-size:24px}
.plan__price{font:500 48px var(--display);letter-spacing:-.03em}
.plan__price span{font:500 15px var(--body);color:var(--gray);letter-spacing:0}
.plan ul{list-style:none;display:grid;gap:10px;flex:1}
.plan li{padding-left:26px;position:relative;font-size:16px}
.plan li::before{content:"";position:absolute;left:2px;top:7px;width:12px;height:7px;border-left:2.5px solid var(--teal);border-bottom:2.5px solid var(--teal);transform:rotate(-45deg)}
.plan li.muted{color:var(--gray)}
.plan li.muted::before{border-color:var(--line)}
.plans__note{margin-top:28px;font-size:14px;color:var(--gray);max-width:52em}

/* FAQ */
.faq-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.7fr);gap:80px;align-items:start}
.faq-layout .section__head{margin-bottom:0;position:sticky;top:100px}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{cursor:pointer;list-style:none;padding:22px 40px 22px 0;font:500 19px/1.3 var(--display);position:relative;letter-spacing:-.01em}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";position:absolute;right:4px;top:50%;width:16px;height:16px;transform:translateY(-50%);background:linear-gradient(var(--amber-dark),var(--amber-dark)) center/16px 2px no-repeat,linear-gradient(var(--amber-dark),var(--amber-dark)) center/2px 16px no-repeat;transition:transform .25s cubic-bezier(.2,.8,.2,1)}
.faq details[open] summary::after{transform:translateY(-50%) rotate(45deg)}
.faq details p{padding:0 0 24px;color:var(--ink-soft);max-width:40em}
.faq details[open] p{animation:faq-in .3s cubic-bezier(.16,1,.3,1)}
@keyframes faq-in{from{opacity:0;transform:translateY(-4px)}}

/* CTA */
.cta{background:var(--teal-dark);color:var(--on-dark);text-align:center;padding:136px 0 144px}
.cta__inner{display:flex;flex-direction:column;align-items:center;gap:20px}
.notfound{min-height:calc(100svh - 68px);display:grid;align-items:center}
.notfound h1{font-size:clamp(40px,6.4vw,72px);line-height:1;letter-spacing:-.035em}
.cta__inner>img{border-radius:18px}
.cta h2{font-size:clamp(48px,8.4vw,96px);line-height:.98;letter-spacing:-.04em}
.cta p{color:rgba(255,255,255,.78);font-size:20px;max-width:30em;margin-bottom:12px}

/* Document (privacy policy) */
.doc-hero{background:var(--teal-dark);color:var(--on-dark);padding:80px 0 72px;position:relative;overflow:hidden}
.doc-hero .wrap{position:relative}
.doc-hero__route{position:absolute;right:0;top:0;width:min(46%,600px);height:100%;overflow:visible}
.js .doc-hero__route path{stroke-dashoffset:.68}
.doc-hero__route path{fill:none;stroke:var(--sky);stroke-width:4;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:0}
.doc-hero__dot{fill:var(--amber);stroke:var(--teal-dark);stroke-width:8;paint-order:stroke;transform-box:fill-box;transform-origin:center;transition:transform .5s cubic-bezier(.16,1,.3,1)}
.js .doc-hero:not(.is-arrived) .doc-hero__dot{transform:scale(0)}
.doc-hero h1{font-size:clamp(48px,7.6vw,88px);line-height:.98;letter-spacing:-.035em}
.doc-hero__meta{margin-top:20px;font-size:15px;color:rgba(255,255,255,.7)}
.doc{display:grid;grid-template-columns:232px minmax(0,68ch);gap:80px;padding:88px 0 120px}
.toc{position:sticky;top:100px;align-self:start;max-height:calc(100vh - 124px);overflow:auto}
.toc h2{font:500 12px var(--display);letter-spacing:.12em;text-transform:uppercase;color:var(--gray)}
.toc summary{list-style:none;cursor:default;margin-bottom:16px;border-radius:6px}
.toc summary::-webkit-details-marker{display:none}
.toc ol{list-style:none;counter-reset:toc;display:grid;gap:2px}
.toc li{counter-increment:toc}
.toc a{display:flex;gap:10px;padding:6px 0;font-size:14px;line-height:1.4;color:var(--ink-soft);text-decoration:none}
.toc a::before{content:counter(toc);min-width:1.4em;color:var(--gray);font-variant-numeric:tabular-nums}
.toc a:hover,.toc a[aria-current]{color:var(--teal)}
.toc ol{padding-left:16px}
.toc__marker{position:absolute;left:0;top:0;width:2px;border-radius:2px;background:var(--teal);opacity:0;transition:transform .45s cubic-bezier(.16,1,.3,1),height .45s cubic-bezier(.16,1,.3,1),opacity .2s}
.prose{color:var(--ink-soft);overflow-wrap:break-word}
.prose>p:first-child{font-size:19px;color:var(--ink)}
.prose p,.prose ul{margin-bottom:18px}
.prose h2{font-size:clamp(26px,3vw,32px);color:var(--ink);margin:64px 0 18px;padding-top:28px;border-top:1px solid var(--line);scroll-margin-top:92px}
.prose h3{font-size:20px;color:var(--ink);margin:36px 0 12px;letter-spacing:-.01em}
.prose ul{padding-left:1.25em;display:grid;gap:10px}
.prose li::marker{color:var(--amber-dark)}
.prose strong{color:var(--ink)}
.prose a{color:var(--teal);text-decoration:underline}
.prose em{color:var(--gray)}

/* Footer */
.footer{background:var(--teal-deep);color:rgba(255,255,255,.72);padding:56px 0 32px;font-size:15px}
.footer__grid{display:flex;justify-content:space-between;gap:40px;flex-wrap:wrap;margin-bottom:40px}
.brand--footer{font-size:18px}
.footer__text{margin-top:14px}
.footer ul{list-style:none;display:grid;gap:8px}
.footer__text,.footer__legal,.cta p,.lede{overflow-wrap:break-word}
.footer a{color:rgba(255,255,255,.8);text-decoration:none}
.footer a:hover,.footer a[aria-current]{color:var(--on-dark);text-decoration:underline}
.linkbtn{background:none;border:0;padding:0;font:inherit;color:rgba(255,255,255,.8);cursor:pointer;text-align:left}
.linkbtn:hover{color:var(--on-dark);text-decoration:underline}
.footer__legal{border-top:1px solid rgba(255,255,255,.1);padding-top:24px;font-size:13px}

/* Cookie choice */
.consent{animation:consent-in .4s cubic-bezier(.16,1,.3,1);transition:opacity .2s,transform .2s;position:fixed;left:16px;right:16px;bottom:16px;z-index:60;max-width:600px;margin-inline:auto;display:flex;flex-wrap:wrap;align-items:center;gap:14px 20px;padding:18px 20px;background:var(--teal-deep);color:rgba(255,255,255,.86);border:1px solid rgba(255,255,255,.12);border-radius:var(--r);box-shadow:0 18px 50px rgba(0,0,0,.35);font-size:15px;line-height:1.5}
.consent.is-leaving{opacity:0;transform:translateY(8px)}
@keyframes consent-in{from{opacity:0;transform:translateY(16px)}}
.consent p{flex:1 1 280px}
.consent a{color:var(--sky)}
.consent__actions{display:flex;gap:10px;flex:0 0 auto}
.consent .btn{min-height:44px;min-width:96px;background:transparent;cursor:pointer}
.consent .btn:hover{background:rgba(255,255,255,.08)}

/* Value calculator */
.calc__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,460px);gap:80px;align-items:center}
.calc__label{display:block;margin-top:32px;font:500 17px var(--display)}
.calc__label output{color:var(--teal);font-variant-numeric:tabular-nums}
.calc__range{display:block;width:100%;height:28px;margin-top:12px;accent-color:var(--teal);cursor:pointer}
.calc__check{display:flex;align-items:center;gap:10px;margin-top:14px;font-size:15px;color:var(--ink-soft);cursor:pointer}
.calc__check input{width:18px;height:18px;accent-color:var(--teal)}
.calc__result{background:var(--teal-dark);color:var(--on-dark);border-radius:var(--r);padding:40px}
.calc__value{font:500 clamp(56px,7vw,80px)/1 var(--display);letter-spacing:-.04em;font-variant-numeric:tabular-nums}
.calc__basis{margin-top:12px;color:var(--sky);font-variant-numeric:tabular-nums}
.calc__note{margin-top:20px;font-size:14px;color:rgba(255,255,255,.72)}

/* Before / after */
.pain__list{list-style:none;border-top:1px solid var(--line)}
.pain__list li{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:baseline;padding:26px 0;border-bottom:1px solid var(--line)}
.pain__before{color:var(--gray);text-decoration:line-through;text-decoration-color:rgba(107,114,128,.45);text-decoration-thickness:1px}
.pain__after{font:500 20px/1.35 var(--display);color:var(--ink);letter-spacing:-.01em}

/* Who it's for */
.built__list{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:32px}
.built__list div{border-top:2px solid var(--teal);padding-top:18px}
.built__list dt{font:500 20px/1.25 var(--display);margin-bottom:8px;text-wrap:balance}
.built__list dd{font-size:16px;color:var(--ink-soft)}

.hero__fine{margin-top:16px;font-size:13px;color:rgba(255,255,255,.62);max-width:36em}
.notify{font-size:15px;color:var(--sky);text-underline-offset:.2em}
.notify:hover{color:var(--on-dark)}

/* Test drive (scroll story) */
.drive{position:relative;height:320vh;background:var(--teal-dark);color:var(--on-dark)}
.drive__sticky{position:sticky;top:68px;height:calc(100svh - 68px);min-height:600px;overflow:hidden;display:grid;align-items:center}
.drive__bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.5;filter:saturate(.75)}
.drive__sticky::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,var(--teal-dark) 34%,rgba(14,59,74,.72))}
.drive h2{font-size:clamp(36px,5.2vw,64px);letter-spacing:-.03em;margin-bottom:18px}
.drive .section__sub{color:rgba(255,255,255,.78)}
.drive__grid{position:relative;z-index:2;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,440px);gap:80px;align-items:center}
.drive__steps{list-style:none;margin-top:32px;display:grid;gap:14px;counter-reset:step}
.drive__steps li{counter-increment:step;display:grid;grid-template-columns:34px 1fr;align-items:center;gap:14px;font:500 18px/1.3 var(--display);color:rgba(255,255,255,.62);transition:color .3s}
.drive__steps li::before{content:counter(step);display:grid;place-items:center;width:34px;height:34px;border-radius:50%;border:2px solid rgba(255,255,255,.25);font-size:14px;font-variant-numeric:tabular-nums;transition:background .3s,border-color .3s,color .3s}
.drive__steps li.is-on{color:var(--on-dark)}
.drive__steps li.is-on::before{border-color:var(--sky);color:var(--sky)}
.drive__steps li.is-done{color:rgba(255,255,255,.72)}
.drive__steps li.is-done::before{background:var(--sky);border-color:var(--sky);color:var(--teal-dark)}
.drive__steps li:last-child.is-on::before{background:var(--amber);border-color:var(--amber);color:var(--on-amber)}
.drive__status{margin-top:24px;font-size:15px;color:rgba(255,255,255,.78);min-height:1.6em}
.drive__device{position:relative;background:var(--teal-deep);border:1px solid rgba(255,255,255,.1);border-radius:28px;padding:20px;box-shadow:0 24px 60px rgba(0,0,0,.35)}
.drive__map{display:block;width:100%;height:auto;border-radius:16px;background:#0A2630}
.drive__streets path{stroke:rgba(255,255,255,.07);stroke-width:6;fill:none}
.drive__route{fill:none;stroke:var(--sky);stroke-width:4;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:0}
.js .drive__route{stroke-dashoffset:1}
.drive__from{fill:var(--sky)}
.drive__to{fill:var(--amber);stroke:#0A2630;stroke-width:4;paint-order:stroke;transform-box:fill-box;transform-origin:center;transition:opacity .3s,transform .5s cubic-bezier(.16,1,.3,1)}
.js .drive:not(.is-arrived) .drive__to{opacity:0;transform:scale(.4)}
.drive__places{display:flex;justify-content:space-between;gap:12px;margin-top:12px;font-size:13px;color:rgba(255,255,255,.7)}
.drive__places span:last-child{text-align:right}
.drive__stats{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:16px;padding-top:16px;border-top:1px solid rgba(255,255,255,.1)}
.drive__stats dt{font-size:12px;color:rgba(255,255,255,.62)}
.drive__stats dd{font:500 24px/1.2 var(--display);font-variant-numeric:tabular-nums;color:var(--on-dark);letter-spacing:-.02em}
.drive__notice{margin-top:16px;background:var(--paper);color:var(--ink);border-radius:var(--r);padding:16px 18px;transition:opacity .35s,transform .45s cubic-bezier(.16,1,.3,1)}
.js .drive:not(.is-asking) .drive__notice{display:none}
.drive__notice-title{font-size:15px}
.drive__choices{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.chip{position:relative;font:500 14px/1 var(--display);padding:12px 16px;border-radius:99px;border:1.5px solid var(--line);background:var(--paper);color:var(--ink)}
.chip--business{background:var(--amber-wash);border-color:var(--amber-wash);color:var(--amber-ink);transition:transform .2s,box-shadow .3s}
.drive.is-tapping .chip--business{transform:scale(.96);box-shadow:0 0 0 5px rgba(224,142,43,.3)}
.drive__tap{position:absolute;left:50%;top:50%;width:38px;height:38px;margin:-19px 0 0 -19px;border-radius:50%;background:rgba(138,79,8,.12);border:2px solid rgba(138,79,8,.45);opacity:0;transform:scale(1.6);transition:opacity .25s,transform .35s cubic-bezier(.16,1,.3,1);pointer-events:none}
.drive.is-tapping .drive__tap{opacity:1;transform:scale(1)}
.drive__log{list-style:none;margin-top:12px;display:grid}
.js .drive:not(.is-logged) .drive__log{display:none}
.drive__row{display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:center;padding:12px 14px;border-radius:12px;background:rgba(255,255,255,.08);font-size:14px;color:rgba(255,255,255,.86);animation:row-in .45s cubic-bezier(.16,1,.3,1)}
@keyframes row-in{from{opacity:0;transform:translateY(10px)}}
.drive__log .tag{font:500 12px/1 var(--display);padding:6px 10px;border-radius:99px;background:rgba(255,255,255,.1)}
.drive__log .tag--business{background:var(--amber-wash);color:var(--amber-ink)}
.drive__log .amt{font-variant-numeric:tabular-nums;font-weight:500;color:var(--on-dark)}
.hero__try{display:inline-block;margin-top:18px;font-size:15px;color:var(--sky);text-underline-offset:.2em}
.hero__try:hover{color:var(--on-dark)}

/* Canadian statement band */
.band{position:relative;overflow:hidden;background:var(--teal-deep);color:var(--on-dark);padding:clamp(120px,18vw,220px) 0}
.band__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:scale(1.14);will-change:transform}
.band::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(11,47,59,.35),rgba(11,47,59,.82))}
.band__inner{position:relative;z-index:2}
.band__title{font-size:clamp(40px,6.2vw,80px);line-height:1;letter-spacing:-.035em;max-width:12em}
.band__sub{margin-top:20px;font-size:clamp(18px,2vw,22px);color:rgba(255,255,255,.86)}

/* Photo tiles on "Made for anyone who drives for work" */
.built__img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:var(--r-sm);margin-bottom:18px;filter:saturate(.85)}

/* Closing CTA over the dusk highway */
.cta--photo{position:relative;overflow:hidden}
.cta__bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.42;transform:scale(1.14);will-change:transform}
.cta--photo::before{content:"";position:absolute;inset:0;z-index:1;background:radial-gradient(ellipse at center,rgba(14,59,74,.55),var(--teal-dark) 78%)}
.cta--photo .cta__inner{position:relative;z-index:2}

/* CRA checklist */
.checklist__title{font-size:20px;margin:36px 0 14px}
.checklist{list-style:none;display:grid;gap:14px}
.checklist li{display:grid;grid-template-columns:22px 1fr;gap:12px;align-items:start;font-size:16px;color:var(--ink-soft)}
.checklist strong{color:var(--ink)}
.checklist .ic{width:20px;height:20px;margin-top:3px}
.checklist .is-yes .ic{color:var(--teal)}
.checklist .is-part .ic{color:var(--amber-dark)}
.checklist__note{margin-top:22px;font-size:14px;color:var(--gray);max-width:36em}

/* Comparison */
.compare__scroll{overflow-x:auto}
.compare__table{width:100%;border-collapse:collapse;min-width:620px}
.compare__table th,.compare__table td{padding:16px 18px;text-align:left;border-bottom:1px solid var(--line);font-size:15px;vertical-align:middle}
.compare__table thead th{font:500 15px var(--display);color:var(--gray)}
.compare__table tbody th{font-weight:500;color:var(--ink);width:34%}
.compare__table td{color:var(--ink-soft)}
.compare__table .is-us{background:var(--cream);color:var(--ink);font-weight:500}
.compare__table thead .is-us{color:var(--teal);border-radius:var(--r) var(--r) 0 0}
.compare__table .ic{width:20px;height:20px}
.compare__table .ic--check{color:var(--teal)}
.compare__table .ic--x{color:var(--gray)}
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* Countdown */
.countdown{font-size:16px;color:rgba(255,255,255,.78)}
.countdown strong{color:var(--on-dark);font-weight:500}

/* Responsive */
@media (max-width:1299px){
  .hero__disc{width:min(760px,58vw);transform:translateX(-52%)}
}
@media (max-width:1099px){
  .hero__disc{width:50vw;transform:translateX(-50%)}
  .lede{max-width:24em}
}
@media (max-width:1199px){
  .shot--back{display:none}
  .shot--front{right:50%;transform:translateX(50%)}
}
@media (max-width:900px){
  .nav__links{display:none}
  .nav__stores{margin-left:auto}
  .nav__stores .play-badge{padding-block:4px}
  .hero{padding-top:48px}
  .hero__grid{grid-template-columns:1fr;gap:32px;min-height:0}
  .hero__copy{padding-bottom:0}
  .hero__shots{height:460px;max-width:420px;margin-inline:auto;width:100%}
  .hero__disc{width:440px;top:24px;transform:translateX(-50%)}
  .hero__disc::after{width:24px;height:24px;box-shadow:0 0 0 8px var(--teal-dark)}
  .shot--front{right:50%;transform:translateX(50%);width:240px}
  .facts__list{grid-template-columns:1fr 1fr}
  .section{padding:72px 0}
  .row,.row--flip,.split{grid-template-columns:1fr;gap:32px}
  .row{margin-bottom:64px}
  .row--flip .row__img{order:0}
  .row__img{max-width:240px}
  #how .row,#how .also{padding-left:30px}
  .log{padding:24px 22px}
  .log th{width:34%;padding-right:12px}
  .log th,.log td{font-size:16px;padding:14px 0}
  .log .total th,.log .total td{display:block;width:auto;padding:0}
  .log .total th{font-size:15px;padding-top:18px}
  .log .total td{font-size:32px;padding-top:4px}
  .footer ul{grid-template-columns:1fr 1fr;column-gap:32px;row-gap:0}
  .footer ul a{display:block;padding:11px 0}
  .toc a{padding:11px 0}
  .footer ul .linkbtn{display:block;padding:11px 0}
  .consent__actions{flex:1 1 100%}
  .consent .btn{flex:1}
  .plans{grid-template-columns:1fr}
  .drive{height:300vh}
  .drive__sticky{min-height:0}
  .drive__grid{grid-template-columns:1fr;gap:18px}
  .drive__copy .section__sub,.drive__steps{display:none}
  .drive__copy h2{font-size:30px}
  .drive__status{margin-top:8px;min-height:3em}
  .drive__device{padding:14px;border-radius:20px}
  .drive__stats dd{font-size:20px}
  .drive__sticky::before{background:rgba(14,59,74,.78)}
  .calc__grid{grid-template-columns:1fr;gap:40px}
  .calc__result{padding:28px}
  .pain__list li{grid-template-columns:1fr;gap:6px;padding:20px 0}
  .pain__after{font-size:18px}
  .built__list{grid-template-columns:1fr 1fr;gap:28px 20px}
    .doc-hero__route{display:none}
  .also{grid-template-columns:1fr;gap:28px}
  .faq-layout{grid-template-columns:1fr;gap:8px}
  .faq-layout .section__head{position:static;margin-bottom:24px}
  .section__head--statement{margin-bottom:64px}
  .cta{padding:96px 0 104px}
  .doc{grid-template-columns:1fr;gap:48px;padding:56px 0 88px}
  .toc{position:static;max-height:none;background:var(--cream);border-radius:var(--r);padding:0}
  .toc summary{cursor:pointer;margin:0;padding:18px 24px;min-height:44px;display:flex;align-items:center;justify-content:space-between}
  .toc summary::after{content:"";width:14px;height:14px;background:linear-gradient(var(--amber-dark),var(--amber-dark)) center/14px 2px no-repeat,linear-gradient(var(--amber-dark),var(--amber-dark)) center/2px 14px no-repeat;transition:transform .25s cubic-bezier(.2,.8,.2,1)}
  .toc details[open] summary::after{transform:rotate(45deg)}
  .toc ol{padding:0 24px 16px}
}
@media (max-width:480px){
  body{font-size:16px}
  .facts__list{grid-template-columns:1fr}
  .built__list{grid-template-columns:1fr}
  .also__cards{grid-template-columns:1fr 1fr;gap:16px}
  .nav__stores .appstore-soon{display:none}
  .stores{gap:10px}
  .stores .play-badge img{height:48px}
  .stores .appstore-soon{height:48px;padding:0 14px 0 12px;gap:8px;border-radius:6px}
  .stores .appstore-soon__logo{width:22px;height:22px}
  .stores .appstore-soon__text{font-size:20px}
  .stores .appstore-soon__text small{font-size:10px}
  .also__card img{border-radius:var(--r-sm);margin-bottom:10px}
  .also__card figcaption{font-size:14px}
  .drive__copy h2{font-size:26px}
  .drive__device{padding:12px}
  .drive__places{font-size:12px;margin-top:8px}
  .drive__stats{margin-top:10px;padding-top:10px}
  .drive__notice{margin-top:10px;padding:12px 14px}
  .drive__purpose{display:none}
  .brand span{font-size:18px}
}
@media (max-height:640px){.drive{height:auto}.drive__sticky{position:relative;top:0;height:auto;padding:64px 0}}
@media (prefers-reduced-motion:reduce){.drive__row{animation:none}.drive{height:auto}.drive__sticky{position:relative;top:0;height:auto;padding:96px 0}.band__img,.cta__bg{transform:none!important}html{scroll-behavior:auto}*{transition:none!important}.hero__route path,.hero__disc::after,.doc-hero__route path,.doc-hero__dot{animation:none;stroke-dashoffset:0}
  .consent{animation:fade-in .2s ease-out}.consent.is-leaving{transform:none}.consent{transition:opacity .2s!important}
  .faq details[open] p{animation:fade-in .2s ease-out}
  @keyframes fade-in{from{opacity:0}}
}

/* Print: the policy reads as a plain document */
@media print{
  .nav,.toc,.footer,.consent,.skip,.doc-hero__route{display:none!important}
  body{background:#fff;color:#000;font-size:11pt}
  .doc-hero{background:none;color:#000;padding:0 0 12pt}
  .doc-hero__meta{color:#000}
  .doc{display:block;padding:0}
  .prose,.prose strong,.prose h2,.prose h3{color:#000}
  .prose h2{break-after:avoid;margin-top:18pt}
  .prose a[href^="http"]::after{content:" (" attr(href) ")";font-size:9pt}
}