/* =============================================================
3alaGamb — Landing site styles
-------------------------------------------------------------
Structure of this file:
1. Design tokens (colors, fonts, radius, shadows) <-- tweak here
2. Base / reset
3. Layout helpers
4. Buttons & store badges
5. Doodles (decorative squiggles)
6. Header
7. Hero
8. Manifesto strip
9. Features
10. How it works
11. Showcase
12. Final CTA
13. Footer
14. Phone frame + app-screen mockups
15. Legal / placeholder pages
17. Responsive breakpoints
============================================================= */
/* ---------- 1. DESIGN TOKENS (edit colors & spacing here) ---------- */
:root{
/* Brand orange gradient */
--orange-1:#E5321B;
--orange-2:#FC6030;
--grad:linear-gradient(135deg,#E5321B 0%,#FC6030 100%);
--grad-soft:linear-gradient(135deg,#fff3ef 0%,#fff8f5 100%);
/* Neutrals */
--ink:#20242e; /* main text */
--muted:#6b7280; /* secondary text */
--line:#eceae6; /* hairlines / borders */
--bg:#ffffff; /* page background */
--bg-soft:#fff7f4; /* warm off-white sections */
--grey:#2a2d34; /* footer background */
/* Accents used inside app mockups */
--price:#159d5b; /* green price */
--metro:#E23B2E; /* transit chip: metro (red) */
--bus:#F5B301; /* transit chip: bus (yellow) */
--minibus:#12235C; /* transit chip: minibus (navy) */
/* Shape */
--r-sm:12px;
--r-md:18px;
--r-lg:26px;
--r-xl:34px;
/* Shadows (warm-tinted) */
--shadow-sm:0 4px 14px rgba(229,50,27,.08);
--shadow-md:0 14px 34px rgba(31,36,46,.10);
--shadow-lg:0 30px 70px rgba(31,36,46,.18);
/* Layout */
--maxw:1160px;
--gutter:22px;
--header-h:74px;
}
/* ---------- 2. BASE / RESET ---------- */
*{box-sizing:border-box;}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;}
body{
margin:0;
font-family:"Cairo",system-ui,sans-serif;
color:var(--ink);
background:var(--bg);
line-height:1.55;
-webkit-font-smoothing:antialiased;
overflow-x:hidden;
}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
h1,h2,h3,h4,p{margin:0;}
button{font-family:inherit;cursor:pointer;border:none;background:none;}
:focus-visible{outline:3px solid rgba(252,96,48,.55);outline-offset:3px;border-radius:6px;}
/* ---------- 3. LAYOUT HELPERS ---------- */
.container{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter);}
.section{padding:88px 0;position:relative;}
.eyebrow{
display:inline-flex;align-items:center;gap:8px;
font-weight:800;font-size:.82rem;letter-spacing:.14em;text-transform:uppercase;
color:var(--orange-1);
}
.section-title{font-weight:900;font-size:clamp(1.9rem,4.4vw,3rem);line-height:1.1;letter-spacing:-.01em;}
.lead{font-size:1.12rem;color:var(--muted);max-width:58ch;}
.center{text-align:center;}
.center .lead{margin-inline:auto;}
/* Arabic (Egyptian) headings — keep the cursive letters joined:
no letter-spacing, no uppercase transform. Cairo renders Arabic natively.
Edit the heading phrases directly in the HTML. */
[lang="ar"]{letter-spacing:0;}
.eyebrow[lang="ar"]{text-transform:none;}
/* ---------- 4. BUTTONS & STORE BADGES ---------- */
.btn{
display:inline-flex;align-items:center;justify-content:center;gap:9px;
font-weight:800;font-size:1rem;padding:13px 26px;border-radius:999px;
transition:transform .15s ease, box-shadow .15s ease, filter .15s ease;
white-space:nowrap;
}
.btn svg{width:1.15em;height:1.15em;flex:none;}
.btn-primary{background:var(--grad);color:#fff;box-shadow:0 10px 24px rgba(229,50,27,.32);}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 16px 32px rgba(229,50,27,.4);}
.btn-ghost{background:#fff;color:var(--orange-1);box-shadow:var(--shadow-sm);}
.btn-ghost:hover{transform:translateY(-2px);}
.btn-white{background:#fff;color:var(--orange-1);box-shadow:0 12px 28px rgba(0,0,0,.16);}
.btn-white:hover{transform:translateY(-2px);}
/* App-store badges (dark pill). Swap the to the real store URL later. */
.badges{display:flex;flex-wrap:wrap;gap:14px;}
.badge{
display:inline-flex;align-items:center;gap:11px;
background:#111418;color:#fff;border:1px solid rgba(255,255,255,.14);
padding:10px 18px;border-radius:14px;min-width:180px;
transition:transform .15s ease, box-shadow .15s ease;
}
.badge:hover{transform:translateY(-2px);box-shadow:0 14px 28px rgba(0,0,0,.28);}
.badge svg{width:26px;height:26px;flex:none;}
.badge .b-top{font-size:.66rem;font-weight:600;opacity:.82;line-height:1;letter-spacing:.02em;white-space:nowrap;}
.badge .b-main{font-size:1.16rem;font-weight:800;line-height:1.15;letter-spacing:.01em;white-space:nowrap;}
.badge span{display:flex;flex-direction:column;}
/* On light sections, badges get a subtle lift */
.badge--onlight{box-shadow:var(--shadow-md);}
/* Official store badge image (e.g. Apple "Download on the App Store").
Height is matched to the Google Play pill above. Swap the for the real store URL.
White pill so a transparent/orange badge stays visible on orange sections. */
.store-badge{display:inline-flex;align-items:center;background:#fff;border-radius:14px;padding:8px 16px;box-shadow:var(--shadow-md);transition:transform .15s ease, box-shadow .15s ease;}
.store-badge img{height:40px;width:auto;display:block;}
.store-badge:hover{transform:translateY(-2px);box-shadow:0 14px 28px rgba(0,0,0,.28);}
/* ---------- 5. TRANSIT MOTIFS (decorative route lines) ---------- */
/* Purely decorative dotted route lines with station-node dots.
Positioned absolutely in the corners of orange sections. */
.doodle{position:absolute;pointer-events:none;color:#fff;z-index:1;}
.doodle svg{display:block;width:100%;height:100%;}
.d-tl{top:10px;left:10px;width:150px;height:150px;opacity:.28;}
.d-tr{top:22px;right:26px;width:132px;height:132px;opacity:.3;}
.d-bl{bottom:22px;left:24px;width:126px;height:126px;opacity:.26;}
.d-br{bottom:8px;right:10px;width:160px;height:160px;opacity:.24;}
/* ---------- 6. HEADER ---------- */
.site-header{
position:sticky;top:0;z-index:60;
height:var(--header-h);
display:flex;align-items:center;
background:rgba(255,255,255,.86);
backdrop-filter:saturate(160%) blur(12px);
border-bottom:1px solid var(--line);
}
.site-header .container{display:flex;align-items:center;justify-content:space-between;}
.brand{display:flex;align-items:center;gap:10px;}
.brand img{height:40px;width:auto;}
.header-cta{padding:11px 26px;font-size:.98rem;}
/* ---------- 7. HERO ---------- */
.hero{
position:relative;overflow:hidden;
background:var(--grad);color:#fff;
padding:76px 0 90px;
}
.hero-grid{
display:grid;grid-template-columns:1.05fr .95fr;gap:44px;align-items:center;
position:relative;z-index:2;
}
.hero h1{
font-weight:900;font-size:clamp(2.2rem,5.2vw,3.9rem);line-height:1.05;letter-spacing:-.015em;
text-wrap:balance;
}
.hero .sub{margin-top:20px;font-size:1.2rem;max-width:46ch;color:rgba(255,255,255,.94);}
.hero .badges{margin-top:32px;}
.hero-note{margin-top:18px;font-size:.95rem;font-weight:600;color:rgba(255,255,255,.9);display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
.hero-note .dot{width:6px;height:6px;border-radius:50%;background:#fff;opacity:.7;}
/* Phone sits centered in the hero visual area */
.hero-visual{position:relative;display:flex;justify-content:center;}
.hero-visual .phone{position:relative;z-index:2;transform:scale(1.12);transform-origin:center;}
/* ---------- 8. MANIFESTO STRIP ---------- */
.manifesto{
position:relative;overflow:hidden;
background:#fff;color:var(--ink);text-align:center;
padding:70px 0;
}
.manifesto .doodle{color:var(--orange-2);}
.manifesto .quote{
font-weight:900;font-size:clamp(1.8rem,4.6vw,3.1rem);line-height:1.12;letter-spacing:-.01em;
position:relative;z-index:2;text-wrap:balance;
}
.manifesto .quote .mark{color:var(--orange-1);opacity:.55;}
.manifesto .support{
position:relative;z-index:2;margin-top:16px;font-size:1.12rem;font-weight:600;
color:var(--orange-1);max-width:60ch;margin-inline:auto;
}
/* ---------- 9. FEATURES ---------- */
.features{background:var(--bg);}
.feature-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;margin-top:48px;}
.card{
background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);
padding:32px 28px;box-shadow:var(--shadow-sm);
transition:transform .18s ease, box-shadow .18s ease;
}
.card:hover{transform:translateY(-4px);box-shadow:var(--shadow-md);}
.card .ficon{
width:60px;height:60px;border-radius:18px;display:grid;place-items:center;
background:var(--grad);color:#fff;margin-bottom:20px;box-shadow:0 8px 18px rgba(229,50,27,.28);
}
.card .ficon svg{width:32px;height:32px;}
.card h3{font-size:1.32rem;font-weight:800;margin-bottom:10px;letter-spacing:-.01em;}
.card p{color:var(--muted);font-size:1.02rem;}
.card .note{
margin-top:16px;display:inline-flex;align-items:center;gap:8px;
font-size:.86rem;font-weight:700;color:var(--orange-1);
background:#fff2ee;padding:7px 13px;border-radius:999px;
}
/* transport chips inside feature (a) */
.mode-row{display:flex;flex-wrap:wrap;gap:7px;margin-top:18px;}
.mode-tag{
font-size:.78rem;font-weight:700;padding:5px 12px;border-radius:999px;
background:#f4f3f0;color:#3b3f48;display:inline-flex;align-items:center;gap:6px;
}
.mode-tag svg{width:15px;height:15px;}
/* ---------- 10. HOW IT WORKS ---------- */
.how{background:var(--bg-soft);}
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;margin-top:48px;}
.step{position:relative;background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:34px 26px 30px;box-shadow:var(--shadow-sm);}
.step .num{
position:absolute;top:-22px;left:26px;
width:48px;height:48px;border-radius:14px;display:grid;place-items:center;
background:var(--grad);color:#fff;font-weight:900;font-size:1.35rem;
box-shadow:0 10px 20px rgba(229,50,27,.3);
}
.step h3{font-size:1.22rem;font-weight:800;margin:18px 0 8px;}
.step p{color:var(--muted);}
.step .sicon{width:44px;height:44px;color:var(--orange-1);margin-top:8px;}
.step .sicon svg{width:44px;height:44px;}
/* connecting arrow between steps (desktop) */
.step .connect{position:absolute;top:50%;right:-30px;width:34px;height:34px;color:var(--orange-2);z-index:3;}
.step:last-child .connect{display:none;}
/* ---------- 11. SHOWCASE ---------- */
.showcase{position:relative;overflow:hidden;background:linear-gradient(180deg,#E5321B 0%,#FC6030 100%);color:#fff;}
.showcase .phones{
display:flex;justify-content:center;align-items:flex-end;gap:30px;margin-top:52px;
position:relative;z-index:2;flex-wrap:wrap;
}
.showcase .phone{flex:none;}
.showcase .phone--mid{transform:translateY(-24px);}
.showcase-cap{position:relative;z-index:2;text-align:center;}
.showcase-cap .lead{color:rgba(255,255,255,.94);margin-inline:auto;}
.showcase .eyebrow{color:#fff;}
/* ---------- 12. FINAL CTA ---------- */
.final{position:relative;overflow:hidden;background:linear-gradient(180deg,#FC6030 0%,#E5321B 100%);color:#fff;text-align:center;padding:96px 0;}
.final h2{font-weight:900;font-size:clamp(2rem,5vw,3.3rem);line-height:1.08;letter-spacing:-.015em;position:relative;z-index:2;text-wrap:balance;}
.final p{position:relative;z-index:2;margin:18px auto 0;font-size:1.15rem;max-width:48ch;color:rgba(255,255,255,.94);}
.final .badges{position:relative;z-index:2;justify-content:center;margin-top:34px;}
/* ---------- 13. FOOTER ---------- */
.site-footer{background:var(--grey);color:#cfd2d8;padding:64px 0 28px;}
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:40px;}
.footer-brand img{height:44px;margin-bottom:16px;}
.footer-brand p{color:#a7abb4;max-width:34ch;}
.footer-col h4{color:#fff;font-size:.9rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;margin-bottom:16px;}
.footer-col ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:11px;}
.footer-col a{color:#c3c7ce;transition:color .15s ease;}
.footer-col a:hover{color:#fff;}
.footer-col .ig{display:inline-flex;align-items:center;gap:8px;}
.footer-col .ig svg{width:18px;height:18px;}
.footer-bottom{border-top:1px solid rgba(255,255,255,.1);margin-top:44px;padding-top:22px;display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;font-size:.86rem;color:#8f939c;}
/* =============================================================
15. PHONE FRAME + APP-SCREEN MOCKUPS (editable elements)
These recreate the app UI in HTML/CSS so text & data are easy
to edit. Screens: .home, .result, .filters, .directions
============================================================= */
.phone{
width:290px;
background:#0f1115;border-radius:44px;padding:10px;
box-shadow:var(--shadow-lg);
}
.phone--lg{width:320px;}
.screen{
position:relative;background:#eef1f4;border-radius:36px;overflow:hidden;
height:600px;display:flex;flex-direction:column;
font-size:13px;color:var(--ink);text-align:left;line-height:1.4;
}
.phone--lg .screen{height:660px;}
/* status bar (cleaned up) */
.statusbar{
display:flex;align-items:center;justify-content:space-between;
padding:12px 18px 6px;font-size:12px;font-weight:700;color:#20242e;
position:relative;z-index:5;
}
.statusbar .sb-icons{display:flex;align-items:center;gap:5px;}
.statusbar .sb-icons svg{width:15px;height:15px;}
.statusbar--onmap{position:absolute;top:0;left:0;right:0;}
/* --- Map backdrop (stylized, not a real map) --- */
.map{position:absolute;inset:0;background:#e9edf0;overflow:hidden;}
.map svg{position:absolute;inset:0;width:100%;height:100%;}
/* Real cropped app screenshot used as the home map */
.map-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center top;z-index:0;}
.home .sheet{position:relative;z-index:2;}
.sheet-title{font-size:18px;font-weight:800;margin:2px 4px 14px;color:var(--ink);letter-spacing:-.01em;}
.sheet-title span{font-size:16px;}
.map-label{
position:absolute;font-weight:700;color:#8a9099;pointer-events:none;
text-shadow:0 1px 2px rgba(255,255,255,.9);
}
.map-label small{display:block;font-weight:600;font-size:.82em;opacity:.85;}
/* floating round controls on the map */
.map-fab{
position:absolute;width:44px;height:44px;border-radius:50%;background:#fff;
box-shadow:0 4px 12px rgba(0,0,0,.18);display:grid;place-items:center;
}
.map-fab svg{width:22px;height:22px;color:#20242e;}
.map-fab img{width:30px;height:30px;}
.map-fab--mascot{left:14px;top:58px;padding:6px;}
.map-fab--compass{right:14px;top:58px;}
.map-fab--back{left:14px;top:56px;}
/* map pins */
.pin{position:absolute;transform:translate(-50%,-100%);z-index:4;}
.pin svg{width:34px;height:44px;filter:drop-shadow(0 3px 4px rgba(0,0,0,.25));}
.pin--start svg{color:var(--orange-1);}
.pin--dest svg{color:#1f5fe0;}
/* --- Bottom sheet --- */
.sheet{
margin-top:auto;background:#fff;border-radius:26px 26px 0 0;
box-shadow:0 -10px 30px rgba(0,0,0,.10);padding:16px 16px 20px;position:relative;z-index:6;
}
.sheet .grabber{width:44px;height:5px;border-radius:3px;background:#dfe2e6;margin:0 auto 14px;}
/* search input */
.search-row{display:flex;align-items:center;gap:10px;}
.searchbar{
flex:1;min-width:0;
display:flex;align-items:center;gap:10px;
background:#f6f7f9;border:1px solid #edeef1;border-radius:16px;padding:14px 16px;
}
.searchbar svg{width:20px;height:20px;color:#9aa0a8;flex:none;}
.searchbar .ph{color:#9aa0a8;font-size:14px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
/* blue map toggle button beside the search field */
.map-btn{width:50px;height:50px;border-radius:15px;background:#1f5fe0;display:grid;place-items:center;flex:none;box-shadow:0 6px 14px rgba(31,95,224,.35);}
.map-btn svg{width:26px;height:26px;color:#fff;}
/* recent / empty-state */
.recent{margin-top:16px;}
.recent-head{display:flex;align-items:center;justify-content:space-between;padding:0 4px 10px;}
.recent-head .t{font-weight:800;font-size:15px;}
.empty-row{
display:flex;align-items:center;gap:12px;padding:16px 14px;
background:#f6f7f9;border-radius:16px;color:#9aa0a8;font-weight:600;font-size:12.5px;
}
.empty-row .ric{width:34px;height:34px;border-radius:50%;background:#eceef1;display:grid;place-items:center;flex:none;}
.empty-row .ric svg{width:16px;height:16px;color:#9aa0a8;}
/* map POI markers + city labels */
.map-label--city{font-size:16px;font-weight:800;color:#2a2d34;text-shadow:0 1px 3px rgba(255,255,255,.95);}
.map-label--city small{font-size:12px;font-weight:700;}
.poi{position:absolute;transform:translate(-50%,-50%);width:26px;height:26px;border-radius:50% 50% 50% 0;rotate:45deg;display:grid;place-items:center;color:#fff;box-shadow:0 2px 5px rgba(0,0,0,.28);border:2px solid #fff;z-index:3;}
.poi > *{rotate:-45deg;}
.poi svg{width:13px;height:13px;}
.poi.h{background:#e23b2e;font-weight:800;font-size:13px;}
.poi.h b{font-weight:800;line-height:1;}
.poi.food{background:#f5921e;}
.poi.museum{background:#8a4fd0;}
.poi.shop{background:#2f7de0;}
.poi.transit{background:#3a3f48;border-radius:50%;rotate:0deg;}
.poi.transit > *{rotate:0deg;}
/* old recent list rows (kept for other mockups) */
.recent-head .a{color:var(--orange-1);font-weight:700;font-size:12px;display:flex;align-items:center;gap:4px;}
.recent-item{display:flex;align-items:center;gap:12px;padding:12px;border-top:1px solid #f1f2f4;}
.recent-item .ric{width:34px;height:34px;border-radius:50%;background:#f3f4f6;display:grid;place-items:center;flex:none;}
.recent-item .ric svg{width:16px;height:16px;color:#8b909a;}
.recent-item .rt{font-weight:600;flex:1;}
.recent-item .chev{color:#c4c8ce;width:16px;height:16px;}
/* --- Duration / price header --- */
.dp{display:flex;justify-content:space-between;align-items:flex-start;padding:6px 6px 14px;}
.dp .lbl{font-size:11px;font-weight:700;letter-spacing:.09em;color:#9aa0a8;text-transform:uppercase;}
.dp .val{font-size:24px;font-weight:800;margin-top:2px;}
.dp .val.price{color:var(--price);}
.dp .right{text-align:right;}
/* --- Transit strip (walk > bus > ...) --- */
.strip{
background:#f6f7f9;border-radius:18px;padding:14px 12px;
display:flex;align-items:flex-start;gap:2px;overflow:hidden;
}
.strip .leg{display:flex;flex-direction:column;align-items:center;gap:7px;flex:none;width:52px;}
.strip .node{width:46px;height:46px;border-radius:50%;background:#fff;display:grid;place-items:center;box-shadow:0 1px 3px rgba(0,0,0,.06);}
.strip .node svg{width:22px;height:22px;color:#7c828c;}
.strip .node.micro{background:#ffe7df;}
.strip .node.micro svg{color:var(--orange-1);}
.strip .node.mini{background:#dce4f5;}
.strip .node.mini svg{color:var(--minibus);}
.strip .dur{font-size:11px;font-weight:700;color:#6b7280;}
.strip .rline{font-size:9px;font-weight:800;color:var(--minibus);background:#eaf0fb;border:1px solid #cfdcf3;border-radius:6px;padding:1px 6px;margin-top:-2px;}
.strip .arrow{width:22px;height:46px;display:grid;place-items:center;flex:none;color:#fff;}
.strip .arrow span{width:22px;height:22px;border-radius:50%;background:var(--orange-2);display:grid;place-items:center;}
.strip .arrow svg{width:12px;height:12px;}
/* --- From / To card (filters screen) --- */
.fromto{position:relative;background:#fff;border:1px solid #eef0f2;border-radius:20px;padding:6px 60px 6px 6px;box-shadow:var(--shadow-sm);}
.ft-row{display:flex;align-items:center;gap:12px;padding:12px 10px;}
.ft-row + .ft-row{border-top:1px solid #f1f2f4;}
.ft-dot{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;flex:none;}
.ft-dot.from{background:#ffe7df;}
.ft-dot.from i{width:11px;height:11px;border-radius:50%;background:var(--orange-1);}
.ft-dot.to svg{width:22px;height:22px;color:var(--orange-1);}
.ft-txt .k{font-size:10px;font-weight:800;letter-spacing:.1em;color:#9aa0a8;text-transform:uppercase;}
.ft-txt .v{font-weight:700;font-size:14px;}
.swap{
position:absolute;right:12px;top:50%;transform:translateY(-50%);
width:44px;height:44px;border-radius:50%;background:var(--grad);color:#fff;
display:grid;place-items:center;box-shadow:0 8px 16px rgba(229,50,27,.34);
}
.swap svg{width:20px;height:20px;}
/* --- transit filter chips --- */
.chips{display:flex;gap:8px;margin-top:14px;overflow:hidden;}
.chip{
display:inline-flex;align-items:center;gap:6px;flex:none;
padding:8px 13px;border-radius:999px;color:#fff;font-weight:800;font-size:12px;
}
.chip svg{width:15px;height:15px;}
.chip .tick{width:14px;height:14px;opacity:.9;}
.chip.metro{background:var(--metro);}
.chip.bus{background:var(--bus);color:#4a3800;}
.chip.mini{background:var(--minibus);}
.chip.micro{background:var(--orange-2);}
/* filter pills */
.fpills{display:flex;gap:8px;margin-top:12px;overflow:hidden;}
.fpill{
flex:none;padding:9px 15px;border-radius:999px;border:1px solid #e6e8eb;
font-weight:700;font-size:12px;color:#5b616b;background:#fff;display:flex;align-items:center;gap:7px;
}
.fpill svg{width:15px;height:15px;color:#9aa0a8;}
.fpill .fp-k{font-size:9px;color:#9aa0a8;font-weight:700;letter-spacing:.06em;display:block;line-height:1;}
.fpill .fp-v{font-size:12px;color:#3b3f48;font-weight:700;}
.fpill.active{background:var(--grad);color:#fff;border-color:transparent;}
/* best routes cards */
.best-h{font-weight:900;font-size:20px;margin:18px 4px 12px;}
.route-card{position:relative;background:#fff;border:1px solid #eef0f2;border-radius:20px;padding:18px 16px 16px;box-shadow:var(--shadow-sm);overflow:hidden;}
.route-card + .route-card{margin-top:12px;}
.route-tab{position:absolute;top:0;left:0;font-size:11px;font-weight:800;letter-spacing:.05em;color:#fff;padding:6px 16px 6px 16px;border-radius:0 0 14px 0;}
.route-tab.cheapest{background:#159d5b;}
.route-tab.fastest{background:var(--orange-2);}
.route-card .dp{padding:22px 2px 12px;}
/* --- step-by-step directions timeline --- */
.timeline{padding:8px 4px 4px;}
.tl-item{position:relative;padding-left:52px;padding-bottom:22px;}
.tl-item:last-child{padding-bottom:6px;}
.tl-ic{position:absolute;left:0;top:0;width:38px;height:38px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.08);display:grid;place-items:center;z-index:2;}
.tl-ic svg{width:19px;height:19px;color:#8b909a;}
.tl-ic.start svg{color:var(--orange-1);}
.tl-ic.micro{}.tl-ic.micro svg{color:var(--orange-1);}
.tl-ic.mini svg{color:var(--minibus);}
/* vertical connector */
.tl-item::before{content:"";position:absolute;left:18px;top:38px;bottom:0;width:2px;background:repeating-linear-gradient(#d7dbe0 0 5px,transparent 5px 10px);}
.tl-item.solid-orange::before{background:var(--orange-1);}
.tl-item.solid-navy::before{background:var(--minibus);}
.tl-item:last-child::before{display:none;}
.tl-k{font-size:12px;color:#9aa0a8;font-weight:600;}
.tl-t{font-size:16px;font-weight:800;margin-top:1px;}
.tl-sub{font-size:12px;color:#9aa0a8;margin-top:3px;}
.tl-badge{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:800;letter-spacing:.04em;padding:4px 11px;border-radius:999px;}
.tl-badge.micro{background:#ffe7df;color:var(--orange-1);}
.tl-badge.mini{background:#eaf0fb;color:var(--minibus);}
.tl-price{float:right;font-weight:800;font-size:14px;color:var(--ink);}
.tl-detail{margin-top:10px;border:1px solid #eef0f2;border-radius:14px;padding:12px 14px;}
.tl-detail .d-row{display:flex;align-items:center;gap:10px;font-size:12.5px;font-weight:600;}
.tl-detail .d-row + .d-row{margin-top:8px;}
.tl-detail .d-row b{font-weight:800;}
.tl-detail .d-dot{width:11px;height:11px;border-radius:50%;flex:none;}
.tl-detail .d-dot.fill{background:var(--orange-1);}
.tl-detail .d-dot.ring{border:2px solid var(--orange-1);}
.tl-detail.navy .d-dot.fill{background:var(--minibus);}
.tl-detail.navy .d-dot.ring{border-color:var(--minibus);}
/* --- Transit-mode colors: bus (yellow) & metro (teal) --- */
.strip .node.bus{background:#fbf1cf;}
.strip .node.bus svg{color:#d69e12;}
.strip .node.metro{background:#d3f0e2;}
.strip .node.metro svg{color:#12996b;}
.strip .rline.y{color:#a87f14;background:#fbf1cf;border-color:#eed89a;}
.strip .rline.t{color:#12996b;background:#d3f0e2;border-color:#a9dcc6;}
/* timeline mode colors */
.tl-ic.start{background:#ffe7df;}
.tl-ic.bus svg{color:#d69e12;}
.tl-ic.metro svg{color:#12996b;}
.tl-ic.end{background:var(--orange-1);}
.tl-ic.end svg{color:#fff;}
.tl-item.solid-yellow::before{background:#f2b90c;}
.tl-item.solid-teal::before{background:#12996b;}
.tl-badge.bus{background:#fbf1cf;color:#a87f14;}
.tl-badge.metro{background:#d3f0e2;color:#12996b;}
.tl-detail.yellow .d-dot.fill{background:#f2b90c;}
.tl-detail.yellow .d-dot.ring{border-color:#f2b90c;}
.tl-detail.teal .d-dot.fill{background:#12996b;}
.tl-detail.teal .d-dot.ring{border-color:#12996b;}
.tl-time{float:right;font-size:11px;color:#9aa0a8;font-weight:600;margin-left:8px;}
.tl-right{float:right;text-align:right;margin-left:10px;}
.tl-right .tl-time{float:none;display:block;margin:0;}
.tl-right .tl-price{float:none;display:block;margin-top:2px;}
.tl-stops{display:inline-flex;align-items:center;gap:6px;background:#d3f0e2;color:#12996b;font-weight:800;font-size:12px;padding:6px 12px;border-radius:10px;margin-top:10px;}
.tl-stops svg{width:13px;height:13px;}
/* --- Filters screen: "Add a missing transit" + Best Routes header --- */
.best-row{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:16px 2px 12px;}
.best-row .best-h{margin:0;font-size:16px;line-height:1.15;}
.add-transit{display:inline-flex;align-items:center;gap:7px;background:var(--grad);color:#fff;font-weight:800;font-size:10px;line-height:1.15;padding:8px 10px;border-radius:13px;box-shadow:0 6px 14px rgba(229,50,27,.3);flex:none;text-align:left;}
.add-transit .plus{width:18px;height:18px;border-radius:50%;background:rgba(255,255,255,.28);display:grid;place-items:center;flex:none;}
.add-transit .plus svg{width:11px;height:11px;}
/* =============================================================
16. LEGAL / PLACEHOLDER PAGES
============================================================= */
.legal-header{background:var(--grad);color:#fff;padding:64px 0 56px;position:relative;overflow:hidden;}
.legal-header .container{position:relative;z-index:2;}
.legal-header .back{display:inline-flex;align-items:center;gap:7px;font-weight:700;color:rgba(255,255,255,.92);margin-bottom:18px;}
.legal-header .back svg{width:16px;height:16px;}
.legal-header h1{font-weight:900;font-size:clamp(2rem,5vw,3rem);}
.legal-body{padding:70px 0 90px;}
.legal-body .container{max-width:760px;}
.legal-placeholder{
border:2px dashed #e3ded9;border-radius:var(--r-lg);padding:56px 32px;text-align:center;
background:var(--bg-soft);
}
.legal-placeholder img{width:96px;margin:0 auto 22px;}
.legal-placeholder h2{font-size:1.5rem;font-weight:800;margin-bottom:10px;}
.legal-placeholder p{color:var(--muted);max-width:46ch;margin-inline:auto;}
.legal-placeholder .btn{margin-top:26px;}
/* --- Legal document (filled content) --- */
.legal-header .subtitle{margin-top:12px;font-size:1.05rem;font-weight:600;color:rgba(255,255,255,.92);}
.legal-header .dates{margin-top:14px;display:flex;flex-wrap:wrap;gap:10px;}
.legal-header .dates span{background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.28);border-radius:999px;padding:6px 15px;font-size:.85rem;font-weight:700;}
.legal-doc{color:#33383f;font-size:1.02rem;line-height:1.72;}
.legal-doc .intro{font-size:1.1rem;color:var(--muted);margin-bottom:8px;}
/* jump-to-section box */
.legal-toc{background:var(--bg-soft);border:1px solid var(--line);border-radius:var(--r-md);padding:24px 26px;margin-bottom:44px;}
.legal-toc h2{font-size:1.05rem;font-weight:800;letter-spacing:.02em;margin-bottom:14px;color:var(--ink);}
.legal-toc ol{margin:0;padding-left:0;list-style:none;counter-reset:toc;columns:2;column-gap:32px;}
.legal-toc li{counter-increment:toc;margin-bottom:9px;break-inside:avoid;font-size:.95rem;}
.legal-toc li::before{content:counter(toc) ".";color:var(--orange-1);font-weight:800;margin-right:8px;}
.legal-toc a{font-weight:600;}
.legal-toc a:hover{color:var(--orange-1);}
/* section blocks */
.legal-doc section{scroll-margin-top:90px;margin-bottom:38px;}
.legal-doc h2{font-size:1.5rem;font-weight:900;letter-spacing:-.01em;line-height:1.2;margin:0 0 16px;padding-top:10px;border-top:3px solid #f0ede9;}
.legal-doc h2 .n{color:var(--orange-1);margin-right:10px;}
.legal-doc h3{font-size:1.14rem;font-weight:800;margin:26px 0 8px;color:var(--ink);}
.legal-doc p{margin:0 0 14px;}
.legal-doc ul{margin:0 0 16px;padding-left:22px;}
.legal-doc li{margin-bottom:8px;}
.legal-doc strong{font-weight:800;color:var(--ink);}
.legal-doc .caps{font-size:.94rem;}
/* tables */
.legal-doc .table-wrap{overflow-x:auto;margin:6px 0 20px;-webkit-overflow-scrolling:touch;}
.legal-doc table{width:100%;border-collapse:collapse;font-size:.94rem;min-width:520px;}
.legal-doc th,.legal-doc td{text-align:left;vertical-align:top;padding:12px 14px;border:1px solid var(--line);}
.legal-doc th{background:var(--bg-soft);font-weight:800;color:var(--ink);}
.legal-doc td:first-child{font-weight:700;white-space:nowrap;}
.legal-doc td:first-child.wrap{white-space:normal;}
/* highlighted note (e.g. "we do not sell your data") */
.legal-doc .callout{background:#fff2ee;border:1px solid #ffd9cd;border-left:4px solid var(--orange-1);border-radius:var(--r-sm);padding:16px 20px;margin:6px 0 20px;font-weight:600;color:#8a2a15;}
.legal-doc .back-top{display:inline-flex;align-items:center;gap:6px;font-size:.85rem;font-weight:700;color:var(--orange-1);margin-top:4px;}
.legal-doc a{font-weight:600;}
.legal-doc a[href^="http"],.legal-doc a[href^="mailto"]{color:var(--orange-1);}
@media (max-width:560px){
.legal-toc ol{columns:1;}
}
/* =============================================================
17. RESPONSIVE
============================================================= */
@media (max-width:940px){
.hero-grid{grid-template-columns:1fr;gap:40px;text-align:center;}
.hero .sub{margin-inline:auto;}
.hero .badges,.hero-note{justify-content:center;}
.feature-grid,.steps{grid-template-columns:1fr;}
.step .connect{display:none;}
.step .num{left:50%;transform:translateX(-50%);}
.step{text-align:center;padding-top:40px;}
.step .sicon{margin-inline:auto;}
.footer-grid{grid-template-columns:1fr;gap:34px;}
.showcase .phone--mid{transform:none;}
}
@media (max-width:560px){
:root{--gutter:18px;}
.section{padding:64px 0;}
.hero{padding:52px 0 66px;}
.badge{min-width:0;flex:1;}
.btn .btn-label-long{display:none;}
.d-tl,.d-tr,.d-bl,.d-br{transform:scale(.7);}
}
/* Respect reduced motion */
@media (prefers-reduced-motion:reduce){
html{scroll-behavior:auto;}
*{transition:none !important;animation:none !important;}
}