/* OrdersToRoute landing page.
   Shared by every language build under /landing/, /landing/lat/, /landing/cir/.
   Generated pages come from tools/build-landing.js — edit copy there, not in HTML. */

/* ---------- tokens ---------- */
:root{
  --indigo:#4F46E5; --indigo-dark:#4338CA; --indigo-soft:#EEF2FF;
  --navy:#0B1120; --navy-2:#151E33;
  --ink:#0F172A; --body:#475569; --muted:#8FA0BC; --line:#E2E8F0;
  --bg:#FFFFFF; --bg-soft:#F8FAFC;
  --green:#16A34A;
  --shell:min(1160px,100% - 3rem);
  --r:16px;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0; background:var(--bg); color:var(--body);
  font-family:'Inter var',Inter,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  font-size:17px; line-height:1.65; -webkit-font-smoothing:antialiased;
}
img{max-width:100%; display:block}
a{color:inherit; text-decoration:none}
h1,h2,h3{color:var(--ink); line-height:1.15; letter-spacing:-.022em; margin:0; font-weight:700}
h1{font-size:clamp(2.3rem,5.2vw,3.9rem); letter-spacing:-.032em}
h2{font-size:clamp(1.85rem,3.6vw,2.7rem)}
h3{font-size:1.16rem; letter-spacing:-.012em}
p{margin:0}
.shell{width:var(--shell); margin-inline:auto}
.section{padding:clamp(4.5rem,9vw,7.5rem) 0}
/* Anchor targets clear the sticky nav instead of hiding under it. */
section[id]{scroll-margin-top:92px}
.eyebrow{
  font-size:.79rem; font-weight:650; letter-spacing:.12em; text-transform:uppercase;
  color:var(--indigo); margin-bottom:1rem;
}
.lede{font-size:clamp(1.05rem,1.7vw,1.2rem); color:var(--body); max-width:60ch}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  font-weight:600; font-size:1rem; padding:.86rem 1.6rem; border-radius:999px;
  border:1px solid transparent; cursor:pointer; white-space:nowrap;
  transition:background .18s ease, border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.btn-primary{background:var(--indigo); color:#fff; box-shadow:0 8px 22px -8px rgba(79,70,229,.75)}
.btn-primary:hover{background:var(--indigo-dark); transform:translateY(-1px)}
.btn-ghost-dark{background:rgba(255,255,255,.06); color:#fff; border-color:rgba(255,255,255,.22)}
.btn-ghost-dark:hover{background:rgba(255,255,255,.13)}
.btn-sm{padding:.58rem 1.15rem; font-size:.94rem}

/* ---------- nav ---------- */
.nav{position:sticky; top:0; z-index:50; transition:background .25s ease, box-shadow .25s ease, backdrop-filter .25s}
.nav.solid{background:rgba(11,17,32,.88); backdrop-filter:blur(14px); box-shadow:0 1px 0 rgba(255,255,255,.08)}
.nav-in{display:flex; align-items:center; gap:2.2rem; height:76px}
.brand{display:flex; align-items:center; gap:.62rem; font-weight:700; color:#fff; font-size:1.09rem; letter-spacing:-.02em}
.brand svg{width:32px; height:32px; flex:none}
.nav-links{display:flex; gap:1.9rem; margin-left:auto; font-size:.95rem; font-weight:500; color:#C7D2E4}
.nav-links a:hover{color:#fff}
.nav-cta{display:flex; align-items:center; gap:.85rem}
.nav-cta .signin{font-size:.95rem; font-weight:600; color:#C7D2E4}
.nav-cta .signin:hover{color:#fff}

/* language switcher */
.langs{
  display:flex; align-items:center; gap:.1rem; padding:.18rem;
  border:1px solid rgba(255,255,255,.18); border-radius:999px;
}
.langs a{
  font-size:.76rem; font-weight:650; letter-spacing:.03em; color:#93A6C4;
  padding:.28rem .58rem; border-radius:999px; line-height:1;
  transition:background .15s ease, color .15s ease;
}
.langs a:hover{color:#fff}
.langs a[aria-current="true"]{background:rgba(255,255,255,.14); color:#fff}

@media (max-width:980px){.nav-links{display:none} .nav-cta{margin-left:auto}}
@media (max-width:560px){
  /* On a phone the row is logo + languages + one button. The wordmark is the
     first thing to go — the mark alone still reads as the brand, and losing it
     is what keeps the call to action from being pushed off-screen. */
  .nav-cta .signin{display:none}
  .brand-name{display:none}
  .nav-in{gap:.75rem}
  .langs a{padding:.26rem .45rem; font-size:.72rem}
  .nav-cta .btn-sm{padding:.52rem 1rem; font-size:.9rem}
  /* The footer is not cramped, so the name stays there. */
  .foot-in .brand-name{display:inline}
}

/* ---------- hero ---------- */
.hero{position:relative; background:var(--navy); overflow:hidden; margin-top:-76px; padding-top:76px}
.hero::before{
  content:''; position:absolute; inset:0;
  background:
    radial-gradient(900px 460px at 78% -8%, rgba(79,70,229,.42), transparent 62%),
    radial-gradient(720px 420px at 8% 8%, rgba(33,150,243,.24), transparent 60%);
}
.hero::after{
  content:''; position:absolute; inset:0; opacity:.5;
  background-image:linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);
  background-size:64px 64px;
  -webkit-mask-image:radial-gradient(ellipse 82% 62% at 50% 32%,#000,transparent);
  mask-image:radial-gradient(ellipse 82% 62% at 50% 32%,#000,transparent);
}
.hero-in{position:relative; z-index:1; padding:clamp(3.5rem,7vw,5.5rem) 0 0; text-align:center}
.hero h1{color:#fff; max-width:17ch; margin-inline:auto}
.hero h1 em{font-style:normal; background:linear-gradient(94deg,#818CF8,#38BDF8); -webkit-background-clip:text; background-clip:text; color:transparent}
.hero p.lede{color:#B8C6DE; margin:1.5rem auto 0; max-width:59ch}
.hero-cta{display:flex; gap:.85rem; justify-content:center; flex-wrap:wrap; margin-top:2.4rem}
.hero-proof{
  display:flex; align-items:flex-start; justify-content:center; gap:.65rem;
  margin:1.6rem auto 0; max-width:44ch; font-size:.93rem; color:var(--muted);
}
.hero-proof .dot{
  flex:none; width:7px; height:7px; margin-top:.55em; border-radius:50%;
  background:#22C55E; box-shadow:0 0 0 4px rgba(34,197,94,.18);
}
.hero-shot{margin-top:clamp(3rem,5vw,4.2rem); padding-bottom:clamp(3rem,5vw,4.5rem)}

/* ---------- browser frame ---------- */
.frame{
  border-radius:var(--r); overflow:hidden; background:#fff;
  border:1px solid rgba(255,255,255,.13);
  box-shadow:0 40px 80px -28px rgba(2,6,23,.72), 0 0 0 1px rgba(255,255,255,.05);
}
.frame.on-light{border-color:var(--line); box-shadow:0 28px 60px -30px rgba(15,23,42,.4)}
.frame-bar{display:flex; align-items:center; gap:.42rem; padding:.72rem .95rem; background:#F1F5F9; border-bottom:1px solid var(--line)}
.frame-bar i{width:11px; height:11px; border-radius:50%; background:#CBD5E1}
.frame-bar .url{
  margin-left:.7rem; font-size:.76rem; color:#94A3B8; background:#fff;
  border:1px solid var(--line); border-radius:999px; padding:.16rem .8rem;
}

/* ---------- quote band ---------- */
.band{background:var(--navy-2); color:#fff; text-align:center}
.band .q{
  font-size:clamp(1.5rem,3.1vw,2.15rem); font-weight:700; color:#fff;
  letter-spacing:-.022em; line-height:1.3; max-width:22ch; margin:0 auto;
}
.band .q span{color:#818CF8}
.band p{color:#9FB0CB; max-width:58ch; margin:1.4rem auto 0}

/* ---------- steps ---------- */
.steps{display:grid; grid-template-columns:repeat(3,1fr); gap:2.6rem; margin-top:3.6rem}
.step .n{
  width:38px; height:38px; border-radius:11px; background:var(--indigo-soft); color:var(--indigo);
  display:grid; place-items:center; font-weight:700; font-size:.95rem; margin-bottom:1.1rem;
}
.step h3{margin-bottom:.5rem}
.step p{font-size:.99rem}
@media (max-width:820px){.steps{grid-template-columns:1fr; gap:2.1rem}}

/* ---------- alternating showcase ---------- */
.show{display:grid; grid-template-columns:1fr 1.22fr; gap:clamp(2.5rem,5vw,4.5rem); align-items:center}
.show + .show{margin-top:clamp(4.5rem,8vw,7rem)}
.show.rev .show-copy{order:2}
.show h2{margin-bottom:1.15rem}
.show .lede{font-size:1.05rem}
.tick{list-style:none; padding:0; margin:1.9rem 0 0; display:grid; gap:.85rem}
.tick li{display:flex; gap:.7rem; align-items:flex-start; font-size:.99rem}
.tick svg{flex:none; width:20px; height:20px; margin-top:3px; color:var(--indigo)}
@media (max-width:900px){
  .show{grid-template-columns:1fr; gap:2.4rem}
  .show.rev .show-copy{order:0}
}

/* driver block */
.driver{background:var(--bg-soft); border-top:1px solid var(--line); border-bottom:1px solid var(--line)}
.phone{
  max-width:300px; margin-inline:auto; border-radius:34px; overflow:hidden;
  border:9px solid #0F172A; background:#0F172A;
  box-shadow:0 34px 70px -26px rgba(15,23,42,.55);
}

/* ---------- features ---------- */
.grid{display:grid; grid-template-columns:repeat(3,1fr); gap:1.15rem; margin-top:3.4rem}
.card{
  background:var(--bg); border:1px solid var(--line); border-radius:var(--r);
  padding:1.7rem 1.6rem; transition:border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.card:hover{border-color:#C7D2FE; transform:translateY(-3px); box-shadow:0 18px 38px -24px rgba(15,23,42,.34)}
.card .ic{
  width:42px; height:42px; border-radius:12px; background:var(--indigo-soft); color:var(--indigo);
  display:grid; place-items:center; margin-bottom:1.05rem;
}
.card .ic svg{width:21px; height:21px}
.card h3{font-size:1.03rem; margin-bottom:.42rem}
.card p{font-size:.95rem; line-height:1.6}
@media (max-width:900px){.grid{grid-template-columns:1fr 1fr}}
@media (max-width:620px){.grid{grid-template-columns:1fr}}

/* ---------- pricing ---------- */
.pricing{background:var(--bg-soft); border-top:1px solid var(--line)}
.price-card{
  max-width:520px; margin:3rem auto 0; background:#fff; border:1px solid var(--line);
  border-radius:22px; padding:2.6rem 2.4rem; text-align:center;
  box-shadow:0 26px 56px -34px rgba(15,23,42,.35);
}
.price-tag{font-size:2.9rem; font-weight:700; color:var(--ink); letter-spacing:-.03em; line-height:1.1}
.price-card .sub{margin-top:.55rem; font-size:1rem}
.price-list{list-style:none; padding:0; margin:2rem 0; display:grid; gap:.8rem; text-align:left; font-size:.98rem}
.price-list li{display:flex; gap:.65rem; align-items:flex-start}
.price-list svg{flex:none; width:19px; height:19px; margin-top:3px; color:var(--green)}
.price-note{margin-top:1.4rem; font-size:.86rem; color:#94A3B8}

/* ---------- final cta + footer ---------- */
.final{background:var(--navy); color:#fff; text-align:center}
.final h2{color:#fff; max-width:20ch; margin-inline:auto}
.final p{color:#A8B8D2; margin:1.3rem auto 0; max-width:52ch}
.final .hero-cta{margin-top:2.2rem}
footer{background:var(--navy); border-top:1px solid rgba(255,255,255,.09); padding:2.4rem 0; color:#7D8FAC; font-size:.9rem}
.foot-in{display:flex; align-items:center; gap:1.4rem; flex-wrap:wrap}
.foot-in .brand{font-size:1rem}
.foot-in .right{margin-left:auto; display:flex; gap:1.5rem}
.foot-in a:hover{color:#fff}
@media (max-width:620px){.foot-in .right{margin-left:0}}

/* ---------- phones ----------
   Below 700px the <picture> elements swap in screenshots taken from the app's
   own mobile layout, so the fake browser chrome would be a lie — and a phone
   UI needs the full width it can get. */
@media (max-width:700px){
  :root{--shell:min(1160px,100% - 2rem)}
  .frame-bar{display:none}
  .frame{border-radius:14px}
  .hero-shot .frame{box-shadow:0 26px 54px -22px rgba(2,6,23,.8)}
  .price-card{padding:2.1rem 1.5rem}
}

/* ---------- reveal ----------
   Hidden only once JS has confirmed it can reveal it again. Without the
   .js class the page renders fully visible, so a blocked script or a dead
   IntersectionObserver can never leave a blank marketing page. */
.js .rv{opacity:0; transform:translateY(22px); transition:opacity .7s ease, transform .7s ease}
.js .rv.in{opacity:1; transform:none}
@media (prefers-reduced-motion:reduce){.js .rv{opacity:1; transform:none; transition:none}}