/* Road Companion — night windshield. Palette from the Turkish showcase:
   asphalt #0D1117 · sodium #F2A33A · lane white #ECEEEA · sign green #0F6B3B
   · service blue #1C5FA8 · danger #FF6B4A. Logical properties for RTL. */
:root{
  --asphalt:#0D1117; --asphalt-2:#161C24; --line:#2A323D;
  --sodium:#F2A33A; --sodium-soft:#F7C27A;
  --paint:#ECEEEA; --dim:#A9B1BB; --body:#C9CFD6;
  --sign:#0F6B3B; --svc:#1C5FA8; --warn:#FF6B4A;
  --mono:"Overpass Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --sans:"Overpass", system-ui, -apple-system, "Segoe UI", "Noto Sans", sans-serif;
  color-scheme:dark;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--asphalt);color:var(--paint);font-family:var(--sans);font-size:18px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-wrap:anywhere}
img,svg{max-width:100%}
a{color:var(--sodium-soft);text-underline-offset:3px}
a:hover{color:var(--paint)}
:focus-visible{outline:3px solid var(--sodium);outline-offset:3px;border-radius:3px}
.wrap{max-width:1180px;margin:0 auto;padding-inline:24px}
.skip{position:absolute;inset-inline-start:-9999px;top:8px;background:var(--sodium);color:#121212;padding:8px 12px;z-index:20;font-weight:800}
.skip:focus{inset-inline-start:8px}

/* header */
header.top{border-bottom:1px solid var(--line);background:rgba(13,17,23,.96);position:relative;z-index:10}
.bar{display:flex;align-items:center;gap:20px;min-height:68px;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:10px;font-weight:900;font-size:19px;color:var(--paint);text-decoration:none;white-space:nowrap}
.brand svg{width:32px;height:32px;flex:none}
.topnav{display:flex;flex-wrap:wrap;gap:4px 20px;flex:1}
.topnav a{color:var(--dim);text-decoration:none;font-size:15px;padding:6px 0}
.topnav a:hover,.topnav a[aria-current]{color:var(--paint)}
.topnav a[aria-current]{box-shadow:inset 0 -2px 0 var(--sodium)}
.tools{display:flex;align-items:center;gap:12px;margin-inline-start:auto}
.langs{position:relative;border:0 !important;padding:0 !important}
.langs summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:6px;color:var(--dim);font-size:15px;padding:8px 10px;border:1px solid var(--line);border-radius:4px}
.langs summary::-webkit-details-marker{display:none}
.langs[open] summary,.langs summary:hover{color:var(--paint);border-color:#3B4552}
.langs ul{position:absolute;inset-inline-end:0;top:calc(100% + 6px);list-style:none;margin:0;padding:8px;background:var(--asphalt-2);border:1px solid #3B4552;border-radius:8px;display:grid;grid-template-columns:repeat(2,minmax(130px,1fr));gap:2px;width:max-content;max-width:calc(100vw - 32px);box-shadow:0 18px 50px rgba(0,0,0,.5)}
.langs li a{display:block;padding:7px 10px;color:var(--body);text-decoration:none;border-radius:4px;font-size:15px}
.langs li a:hover{background:#222a35;color:var(--paint)}
.langs li a[aria-current]{color:var(--sodium);font-weight:800}

.btn{display:inline-block;padding:14px 22px;border-radius:4px;font-weight:800;text-decoration:none;font-size:16px;line-height:1.2;text-align:center}
.btn.sm{padding:9px 14px;font-size:15px}
.btn.solid{background:var(--sodium);color:#121212}
.btn.solid:hover{background:var(--sodium-soft);color:#121212}
.btn.ghost{border:2px solid #3B4552;color:var(--paint)}
.btn.ghost:hover{border-color:var(--paint)}

/* hero */
.hero{position:relative;overflow:hidden;padding:0 0 56px;background:radial-gradient(120% 70% at 50% 100%, #1b2330 0%, var(--asphalt) 60%)}
.road{position:absolute;inset:0;pointer-events:none}
.road svg{width:100%;height:100%;display:block}
[dir=rtl] .road svg{transform:scaleX(-1)}
.dash-lines line{stroke-dasharray:38 46;animation:drive 1.2s linear infinite}
@keyframes drive{to{stroke-dashoffset:-84}}
.hero-inner{position:relative;z-index:2;padding-top:72px;padding-bottom:48px;display:grid;grid-template-columns:1.1fr .9fr;gap:40px;align-items:start}
.time{font-family:var(--mono);color:var(--sodium);font-size:15px;letter-spacing:.03em;margin:0}
h1{font-weight:900;font-size:clamp(36px,5.2vw,68px);line-height:1.02;margin:14px 0 20px;letter-spacing:-.015em}
.hero h1{max-width:14ch}
.lede{color:var(--body);max-width:38ch;font-size:20px;margin:0 0 28px}
.btns{display:flex;flex-wrap:wrap;gap:12px}
.small{font-size:14px;color:var(--dim);margin-top:14px;font-family:var(--mono)}
.signpost{justify-self:end;margin-top:18px;width:min(380px,100%)}
.sign{background:var(--sign);border:3px solid #fff;border-radius:8px;padding:14px 18px 12px;box-shadow:0 0 0 4px var(--sign),0 18px 50px rgba(0,0,0,.5)}
.sign .row{display:flex;justify-content:space-between;gap:16px;align-items:baseline;font-weight:800;font-size:22px;line-height:1.3}
.sign .row span:last-child{font-weight:900}
.sign.svc{background:var(--svc);box-shadow:0 0 0 4px var(--svc),0 18px 50px rgba(0,0,0,.5);margin-top:16px;display:flex;gap:14px;align-items:center}
.sign.svc .ico{width:44px;height:44px;flex:none;background:#fff;border-radius:4px;display:grid;place-items:center}
.sign.svc b{display:block;font-size:19px}
.sign.svc small{font-size:15px;line-height:1.4;display:block}
.pole{width:10px;height:60px;background:#59616b;margin:0 auto}
.hud{position:relative;z-index:3}
.hud-card{background:rgba(13,17,23,.9);border:1px solid #2E3744;border-radius:14px;padding:16px 18px;display:grid;grid-template-columns:auto 1fr auto;gap:18px;align-items:center;max-width:760px}
.eye{width:74px;height:74px;border-radius:50%;background:#0A0E13;border:2px solid #2E3744;display:grid;place-items:center}
.hud-card .label{font-family:var(--mono);font-size:13px;color:var(--dim)}
.hud-card .val{font-weight:800;font-size:19px}
.spark{width:100%;height:40px}
.pill{font-family:var(--mono);font-size:13px;padding:6px 10px;border-radius:99px;border:1px solid #3B4552;color:var(--body);white-space:nowrap}
.pill.ok::before{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;background:#46C37B;margin-inline-end:7px}

/* sections */
section{padding:96px 0}
h2{font-weight:900;font-size:clamp(28px,3.4vw,44px);line-height:1.1;margin:0 0 18px;letter-spacing:-.01em;max-width:22ch}
h3{font-size:21px;line-height:1.25;margin:0 0 6px}
.kicker{font-family:var(--mono);color:var(--sodium);font-size:14px;margin:0 0 10px;letter-spacing:.02em}
p.body{color:var(--body);max-width:60ch}
.more{margin-top:22px;font-weight:800}
.more a::after{content:" →"}
[dir=rtl] .more a::after{content:" ←"}
.night{background:var(--asphalt-2);border-block:1px solid var(--line)}

/* three stages as road signs */
.stages{list-style:none;padding:0;margin:40px 0 0;display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.stage{position:relative;border-radius:10px;padding:24px 22px 22px;border:3px solid #fff;color:#fff}
.stage p{margin:10px 0 0;font-size:17px}
.stage .when{font-family:var(--mono);font-size:14px;line-height:1.5;padding-bottom:10px;border-bottom:1px solid rgba(255,255,255,.35)}
.stage-n{display:inline-grid;place-items:center;width:46px;height:46px;border-radius:50%;font-weight:900;font-size:24px;margin-bottom:12px}
.s1{background:#241A08;border-color:var(--sodium)} .s1 .stage-n{background:var(--sodium);color:#121212}
.s1 .when{border-color:rgba(242,163,58,.4)}
.s2{background:var(--svc)} .s2 .stage-n{background:#fff;color:var(--svc)}
.s3{background:#3A120B;border-color:var(--warn)} .s3 .stage-n{background:var(--warn);color:#121212}
.s3 .when{border-color:rgba(255,107,74,.45)}

/* demo */
.demo-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:56px;align-items:center}
.cockpit{background:#06090D;border:1px solid var(--line);border-radius:18px;padding:22px;position:relative}
.cockpit .face{display:flex;gap:26px;justify-content:center;margin:8px 0 18px}
.lid{width:96px;height:52px;border-radius:50%;background:#1A2129;position:relative;overflow:hidden;border:2px solid #334050}
.lid .iris{position:absolute;left:50%;top:50%;width:30px;height:30px;margin:-15px 0 0 -15px;border-radius:50%;background:radial-gradient(circle at 40% 40%, #7FA6C9, #2A4766 70%)}
.lid .cover{position:absolute;left:0;right:0;top:0;height:0%;background:#3A4350;transition:height .08s ease-in}
.meter{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:16px}
.meter div{background:#0E141B;border:1px solid var(--line);border-radius:8px;padding:10px 12px;min-width:0}
.meter b{display:block;font-size:21px;font-weight:800;font-variant-numeric:tabular-nums}
.meter small{font-family:var(--mono);font-size:12px;color:var(--dim);line-height:1.35;display:block}
#ear{width:100%;height:90px;display:block;background:#0A0F15;border-radius:8px}
.alert{margin-top:16px;border-radius:10px;padding:14px 16px;background:#11171F;border:1px solid var(--line);min-height:108px;transition:background .3s,border-color .3s}
.alert.st1{background:#2E1E0A;border-color:var(--sodium)}
.alert.st2{background:#0F2A4C;border-color:#5D9BE0}
.alert.st3{background:#4A140C;border-color:var(--warn)}
.alert .t{font-weight:800;font-size:18px}
.alert .s{font-size:15px;color:#E6DCCD}
.alert .maps{display:inline-block;margin-top:10px;background:#fff;color:#0F3D6E;font-weight:800;font-size:14px;padding:7px 12px;border-radius:4px}
.alert .maps[hidden]{display:none}
.demo-ctrl{display:flex;gap:10px;margin-top:16px;flex-wrap:wrap}
.demo-ctrl button{font:inherit;font-weight:800;font-size:15px;padding:11px 16px;border-radius:4px;border:2px solid #3B4552;background:transparent;color:var(--paint);cursor:pointer}
.demo-ctrl button.primary{background:var(--sodium);border-color:var(--sodium);color:#121212}
.demo-ctrl button:disabled{opacity:.6;cursor:default}
.note{font-size:13px;color:var(--dim);font-family:var(--mono);margin:12px 0 0}

/* why + stat signs */
.why-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:56px;align-items:center}
.statsign{margin:0;background:var(--sign);border:3px solid #fff;border-radius:8px;padding:20px 22px;box-shadow:0 0 0 4px var(--sign);color:#fff}
.statsign .big{font-weight:900;font-size:clamp(38px,5vw,60px);line-height:1}
.statsign figcaption{margin-top:10px;font-size:16px;line-height:1.45}
.statsign a{color:#fff}
a.src{font-family:var(--mono);font-size:.78em;white-space:nowrap;color:var(--sodium-soft)}
a.src::before{content:"["}
a.src::after{content:"]"}
.statsign a.src{color:#fff}
.signs4{display:grid;grid-template-columns:repeat(2,1fr);gap:22px;margin:34px 0 10px}

/* privacy proof (lane-white panel) */
.proof{background:var(--paint);color:#11161C}
.proof h2{color:#0D1117}
.proof p.body,.proof .fact p{color:#2C3540}
.proof .kicker{color:#7A4300}
.proof a{color:#7A4300}
.proof-grid{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:start}
.frame-log{font-family:var(--mono);font-size:14px;background:#fff;border:1px solid #CBD0D6;border-radius:10px;padding:18px 20px;line-height:1.9;color:#11161C;direction:ltr;text-align:left}
.frame-log .k{color:#545E69}
.frame-log .g{color:#0F6B3B;font-weight:600}
.frame-log .x{color:#A3341C;font-weight:600}
.frame-log .cap{margin-top:8px;color:#545E69;font-size:12px;direction:auto}
.facts{margin-top:26px;display:grid;gap:14px}
.fact{display:grid;grid-template-columns:64px 1fr;gap:14px;align-items:baseline}
.fact .n{font-weight:900;font-size:30px;color:#0D1117}
.fact p{margin:0}

/* features, limits, price */
.features{list-style:none;padding:0;margin:36px 0 0;display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.features li{border:1px solid var(--line);border-radius:10px;padding:20px;background:var(--asphalt-2)}
.features li h3{color:var(--sodium-soft)}
.features p{margin:0;color:var(--body);font-size:17px}
.limits{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:28px}
.limit{border-inline-start:6px solid var(--sodium);padding:4px 0 4px 20px;padding-inline:20px 0}
.limit p{color:var(--body);margin:6px 0 0}
.plan{border:2px solid var(--sodium);border-radius:12px;padding:28px;background:var(--asphalt-2);max-width:520px;margin-top:30px}
.plan h3{margin:0;font-size:22px}
.plan .amt{font-size:48px;font-weight:900;margin:10px 0 4px}
.plan .amt small{font-size:16px;font-weight:600;color:var(--dim)}
.plan ul{padding-inline-start:20px;color:var(--body);margin:14px 0 22px}
.faq{max-width:820px}
details{border-top:1px solid var(--line);padding:16px 0}
.faq details:last-of-type,.doc details:last-of-type{border-bottom:1px solid var(--line)}
summary{cursor:pointer;font-weight:800;font-size:19px;list-style:none;display:flex;justify-content:space-between;gap:16px}
summary::-webkit-details-marker{display:none}
details > summary::after{content:"+";color:var(--sodium);font-weight:900}
details[open] > summary::after{content:"–"}
details p{color:var(--body);margin:10px 0 0;max-width:64ch}
.langs > summary::after{content:none !important}
.closing{text-align:center;padding:72px 0}
.bye{font-size:clamp(28px,3.4vw,42px);font-weight:900;margin:0 0 22px}

/* document pages */
.doc{max-width:820px;padding-block:56px 80px}
.doc h1{font-size:clamp(34px,4.6vw,56px)}
.doc h2{font-size:clamp(24px,2.6vw,32px);margin-top:52px;max-width:none}
.doc p,.doc li{color:var(--body)}
.doc ul,.doc ol{padding-inline-start:22px}
.doc .meta{font-family:var(--mono);color:var(--dim);font-size:14px}
.summary{background:var(--asphalt-2);border:1px solid var(--line);border-inline-start:6px solid var(--sign);border-radius:8px;padding:6px 20px;margin:26px 0}
.warnbox{background:#2A1C0A;border:1px solid #6B4A1C;border-inline-start:6px solid var(--sodium);border-radius:8px;padding:6px 20px;margin:20px 0}
.warnbox p{color:#EFE3D0}
.svc-list{list-style:none;padding:0 !important;display:grid;gap:14px;margin:22px 0}
.svcsign{background:var(--svc);border:2px solid #fff;border-radius:8px;padding:14px 18px;color:#fff}
.svcsign b{display:block;font-size:19px;color:#fff}
.svcsign span{color:#fff}
.doc .svc-list li{color:#fff}
.tips{list-style:none;padding:0 !important;counter-reset:t;margin:20px 0}
.tips li{counter-increment:t;position:relative;padding-inline-start:58px;margin-bottom:22px}
.tips li::before{content:counter(t);position:absolute;inset-inline-start:0;top:0;width:40px;height:40px;border-radius:50%;background:var(--sodium);color:#121212;font-weight:900;display:grid;place-items:center}
.tips h3{color:var(--paint)}
.tips p{margin:4px 0 0}
.signs-list{list-style:none;padding:0 !important;display:grid;grid-template-columns:1fr 1fr;gap:10px}
.signs-list li{border:1px solid var(--line);border-radius:6px;padding:10px 14px 10px;padding-inline-start:40px;position:relative;background:var(--asphalt-2)}
.signs-list li::before{content:"";position:absolute;inset-inline-start:14px;top:16px;width:0;height:0;border-inline:8px solid transparent;border-bottom:13px solid var(--sodium)}
.facts-list{list-style:none;padding:0 !important}
.facts-list b{color:var(--paint)}
.appbox{margin:56px 0 10px;border:2px solid var(--sodium);border-radius:12px;padding:6px 26px 24px;background:var(--asphalt-2)}
.appbox h2{margin-top:22px}
.refs{font-size:16px}
.refs li{margin-bottom:10px}
.refs cite{font-style:italic;color:var(--paint)}
.mailbox{margin:24px 0}
.langlist{line-height:2.2}
.dist{margin:26px 0 8px}
.dist svg{width:100%;height:auto;display:block}
.dist-labels{position:relative;height:24px;font-family:var(--mono);font-size:14px;color:var(--dim);direction:ltr}
.dist-labels span{position:absolute;top:0;white-space:nowrap}
.dist-labels .d0{left:0}.dist-labels .d5{left:50%;transform:translateX(-50%);color:var(--sodium)}.dist-labels .d10{right:0;color:var(--warn)}
.calc{border:1px solid var(--line);border-radius:12px;padding:20px 22px;background:var(--asphalt-2);margin:26px 0}
.calc h3{margin-bottom:14px}
.calc-row{display:grid;grid-template-columns:150px 1fr 100px;gap:14px;align-items:center;margin-bottom:12px}
.calc-row output{font-family:var(--mono);font-weight:600;text-align:end}
.calc input[type=range]{width:100%;accent-color:var(--sodium)}
.calc-res{font-size:20px;margin:16px 0 0}
.calc-res b{font-size:30px;color:var(--sodium);font-variant-numeric:tabular-nums}

/* footer */
footer{border-top:1px solid var(--line);padding:40px 0 34px;color:var(--dim);font-size:15px}
.frow{display:flex;justify-content:space-between;flex-wrap:wrap;gap:16px 28px}
.frow b{color:var(--paint)}
.footnav{display:flex;flex-wrap:wrap;gap:6px 18px}
.footnav a{color:var(--dim)}
.footnav a:hover{color:var(--paint)}
.fine{font-family:var(--mono);font-size:12px;margin-top:22px}
.fine a{color:var(--dim)}
.mtnote{font-size:13px;margin:8px 0 0}

/* scripts without Latin-style tight leading */
:lang(ja) h1,:lang(zh-Hans) h1,:lang(ko) h1,:lang(th) h1,:lang(hi) h1,:lang(ar) h1,
:lang(ja) h2,:lang(zh-Hans) h2,:lang(ko) h2,:lang(th) h2,:lang(hi) h2,:lang(ar) h2{line-height:1.3;letter-spacing:0}
:lang(ja) .hero h1,:lang(zh-Hans) .hero h1,:lang(ko) .hero h1{max-width:18ch}
:lang(th) body,:lang(hi) body{line-height:1.75}

@media (max-width:900px){
  .hero-inner,.demo-grid,.proof-grid,.why-grid{grid-template-columns:1fr}
  .stages,.features{grid-template-columns:1fr}
  .limits{grid-template-columns:1fr}
  .signpost{justify-self:start;max-width:360px}
  .hud-card{grid-template-columns:auto 1fr}
  .hud-card .pill{grid-column:1/-1;justify-self:start}
  section{padding:72px 0}
  .topnav{order:3;flex-basis:100%;gap:2px 16px;padding-bottom:10px}
}
@media (max-width:600px){
  body{font-size:17px}
  .wrap{padding-inline:16px}
  .bar{gap:10px;padding-top:10px}
  .brand span{font-size:17px}
  .langs summary span{display:none}
  .tools .btn.sm{padding:8px 11px;font-size:14px}
  .hero-inner{padding-top:40px}
  .lede{font-size:18px}
  .sign .row{font-size:19px}
  .signs4,.signs-list{grid-template-columns:1fr}
  .meter{grid-template-columns:1fr 1fr}
  .meter div:last-child{grid-column:1/-1}
  .meter b{font-size:18px}
  .cockpit{padding:16px}
  .lid{width:80px;height:44px}
  .calc-row{grid-template-columns:1fr auto}
  .calc-row input{grid-column:1/-1;grid-row:2}
  .langs ul{grid-template-columns:1fr 1fr;position:fixed;top:64px;inset-inline:16px;width:auto}
  .doc{padding-block:36px 60px}
}
@media (prefers-reduced-motion:reduce){
  .dash-lines line{animation:none}
  html{scroll-behavior:auto}
  .lid .cover,.alert{transition:none}
}

/* Overpass Mono has no Arabic, Devanagari, Thai or CJK glyphs; the fallback
   monospace spreads those scripts apart, so use the sans there. */
:lang(ar) :is(.time,.kicker,.small,.note,.pill,.label,.meter small,.fine,.when,.doc .meta),
:lang(hi) :is(.time,.kicker,.small,.note,.pill,.label,.meter small,.fine,.when,.doc .meta),
:lang(th) :is(.time,.kicker,.small,.note,.pill,.label,.meter small,.fine,.when,.doc .meta),
:lang(ja) :is(.time,.kicker,.small,.note,.pill,.label,.meter small,.fine,.when,.doc .meta),
:lang(ko) :is(.time,.kicker,.small,.note,.pill,.label,.meter small,.fine,.when,.doc .meta),
:lang(zh-Hans) :is(.time,.kicker,.small,.note,.pill,.label,.meter small,.fine,.when,.doc .meta){font-family:var(--sans)}