/* JioTransit website: one stylesheet for every page.
   Colours are the app's own (lib/core/theme/app_colors.dart); type is the app's font.
   The fonts are small and preloaded: "block" waits for them rather than drawing a
   fallback font first and re-wrapping every line when they arrive (a visible jump). */
@font-face{font-family:"Jakarta";src:url("fonts/jakarta-500.woff2") format("woff2");font-weight:500;font-display:block}
@font-face{font-family:"Jakarta";src:url("fonts/jakarta-700.woff2") format("woff2");font-weight:700;font-display:block}
@font-face{font-family:"Jakarta";src:url("fonts/jakarta-800.woff2") format("woff2");font-weight:800;font-display:block}

:root{
  --bg:#F5F5F7;--surface:#FFFFFF;--muted:#EAEBEE;--divider:#E1E3E8;
  --text:#1A2033;--text-2:#6D717D;
  --accent:#E0604A;--accent-hover:#CC5440;--accent-text:#B9432E;--on-accent:#FFFFFF;
  --plate:#1C2A4D;--on-plate:#FFFFFF;--plate-text-2:#C2C9DC;
  --shot-border:rgba(26,32,51,.10);
  --gutter:20px;--max:1120px;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){
  :root{
    --bg:#0F1320;--surface:#181D2C;--muted:#212738;--divider:#293043;
    --text:#EEF0F6;--text-2:#A3A9BA;
    --accent:#FF7E66;--accent-hover:#FF937E;--accent-text:#FF7E66;--on-accent:#2A0F0A;
    --plate:#1A2340;--on-plate:#EEF0F6;--plate-text-2:#A3A9BA;
    --shot-border:rgba(255,255,255,.08);
    color-scheme:dark;
  }
}

*{box-sizing:border-box}
html{background:var(--bg);-webkit-text-size-adjust:100%;overflow-y:scroll;scrollbar-gutter:stable}
body{margin:0;background:var(--bg);color:var(--text);
  font:500 17px/1.6 "Jakarta",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  -webkit-font-smoothing:antialiased;min-height:100vh;display:flex;flex-direction:column}
main{flex:1;width:100%}
img{max-width:100%;height:auto;display:block}
a{color:var(--accent-text)}
:focus-visible{outline:3px solid var(--accent);outline-offset:3px;border-radius:8px}
/* <main> takes focus after an instant page switch (for screen readers); never draw a ring on it */
main:focus,main:focus-visible,[tabindex="-1"]:focus{outline:none}
h1,h2,h3{text-wrap:balance}
p{text-wrap:pretty}
.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--gutter)}

/* ---------- page switches: header stays put, content crossfades ---------- */
@view-transition{navigation:auto}
.site-header{view-transition-name:site-header}
::view-transition-old(root),::view-transition-new(root){animation-duration:.16s}
@media (prefers-reduced-motion:reduce){ ::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none} }

/* ---------- header: identical on every page ---------- */
.site-header .wrap{display:flex;align-items:center;gap:16px;height:68px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--text);margin-right:auto}
.brand img{width:34px;height:34px;border-radius:9px}
.brand span{font-weight:800;font-size:18px;letter-spacing:-.01em}
.site-nav{display:flex;gap:4px}
.site-nav a{color:var(--text-2);text-decoration:none;font-weight:700;font-size:15px;padding:8px 10px;border-radius:10px}
.site-nav a:hover{color:var(--text);background:var(--muted)}
.site-nav a[aria-current="page"]{color:var(--text);background:var(--muted)}
.brand{min-width:0;flex:none}
.site-nav{flex:none}
/* phones: the four links need the room, so the logo stands alone */
@media (max-width:519px){ .brand span{display:none} .site-header .wrap{gap:8px} }
@media (max-width:359px){ .site-nav{gap:0} .site-nav a{padding:8px 7px;font-size:14px} }

/* ---------- footer: identical on every page ---------- */
.site-footer{margin-top:72px;border-top:1px solid var(--divider);padding:28px 0 40px;color:var(--text-2);font-size:15px}
.site-footer .wrap{display:grid;gap:10px}
.site-footer .links{display:flex;flex-wrap:wrap;gap:6px 20px}
.site-footer .links a{color:var(--text);text-decoration:none;font-weight:700}
.site-footer .links a:hover{text-decoration:underline}
.site-footer p{margin:0;max-width:60ch}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:12px 24px;border-radius:12px;
  font-weight:700;font-size:17px;text-decoration:none;text-align:center}
.btn-accent{background:var(--accent);color:var(--on-accent)}
.btn-accent:hover{background:var(--accent-hover)}
.btn-plate{background:var(--plate);color:var(--on-plate)}
@media (prefers-color-scheme:dark){ .btn-plate{background:#D7DEEF;color:#1C2A4D} }
.btn:active{transform:translateY(1px)}

/* ---------- official store badges ----------
   Apple's SVG and Google's PNG (its clear space trimmed) are both exactly the badge,
   so one height lines them up. */
.badges{--bh:64px;display:flex;flex-wrap:nowrap;align-items:center;gap:12px}
.badge{display:block;flex:none}
.badge img{display:block;height:var(--bh);width:auto}
/* Phones: the two badges fill the column's width. Columns sized by each badge's
   width:height ratio (119.66:40 and 564:168) keep both exactly the same height. */
@media (max-width:519px){
  .badges{display:grid;grid-template-columns:2.9916fr 3.3571fr;gap:10px;max-width:400px}
  .badge img{width:100%;height:auto}
  .cta{padding:32px 20px}
}

/* ---------- app screenshots ---------- */
.shot{border-radius:28px;border:1px solid var(--shot-border);box-shadow:0 18px 40px -18px rgba(26,32,51,.35);background:var(--surface)}
.widget{filter:drop-shadow(0 16px 30px rgba(15,19,32,.35))}

/* =========================================================
   HOME
   ========================================================= */
.hero{padding:28px 0 8px}
.hero h1{font-weight:800;font-size:clamp(38px,9.5vw,68px);line-height:1.02;letter-spacing:-.035em;margin:0 0 16px;max-width:12ch}
.hero .lede{font-size:clamp(17px,2.2vw,20px);color:var(--text-2);margin:0 0 28px;max-width:30em}
.hero .actions{display:flex;flex-wrap:wrap;align-items:center;gap:12px 20px}
.hero-visual{position:relative;margin:40px auto 0;max-width:420px;padding-bottom:56px}
.hero-visual .shot{width:76%;margin:0 auto}
.hero-visual .widget{position:absolute;left:0;bottom:0;width:100%}

.feature{display:grid;gap:28px;padding:64px 0 0;align-items:center}
.feature h2{font-weight:800;font-size:clamp(28px,4.4vw,40px);line-height:1.1;letter-spacing:-.025em;margin:0 0 12px}
.feature p{color:var(--text-2);margin:0;max-width:34em}
.feature .facts{list-style:none;padding:0;margin:18px 0 0;display:grid;gap:8px}
.feature .facts li{padding-left:22px;position:relative}
.feature .facts li::before{content:"";position:absolute;left:2px;top:.62em;width:9px;height:9px;border-radius:50%;border:2.5px solid var(--accent)}
.feature figure{margin:0;background:var(--muted);border-radius:28px;padding:32px 24px 0;overflow:hidden;display:flex;justify-content:center}
.feature figure .shot{width:min(300px,100%);border-bottom-left-radius:0;border-bottom-right-radius:0;box-shadow:none}

.extras{padding:72px 0 0}
.extras h2{font-weight:800;font-size:clamp(24px,3.4vw,32px);letter-spacing:-.02em;margin:0 0 20px}
.extras ul{list-style:none;margin:0;padding:24px 20px;display:grid;gap:22px;background:var(--surface);border-radius:28px}
.extras li{display:flex;gap:14px;align-items:flex-start}
.extras .ic{flex:none;width:44px;height:44px;border-radius:12px;display:grid;place-items:center;
  background:color-mix(in srgb,var(--accent) 13%,transparent);color:var(--accent-text)}
.extras .ic svg{width:24px;height:24px;fill:currentColor}
.extras b{display:block;font-weight:700;font-size:17px;line-height:1.3;margin:1px 0 2px}
.extras li span:not(.ic){display:block;color:var(--text-2);font-size:15px;line-height:1.5}

.cta{margin-top:72px;background:var(--plate);color:var(--on-plate);border-radius:28px;padding:36px 24px;display:grid;gap:20px}
.cta h2{font-weight:800;font-size:clamp(26px,4vw,40px);line-height:1.1;letter-spacing:-.025em;margin:0}
.cta p{margin:6px 0 0;color:var(--plate-text-2)}
.cta .badges{justify-self:start}

/* tablet */
@media (min-width:720px){
  :root{--gutter:32px}
  .hero{padding-top:48px}
  .hero-visual{max-width:460px}
  .feature{grid-template-columns:1fr 1fr;gap:40px}
  .feature.flip figure{order:-1}
  .extras ul{grid-template-columns:1fr 1fr;gap:28px 40px;padding:32px}
  .cta{grid-template-columns:1fr auto;align-items:center;padding:40px}
  .cta .badges{justify-self:end}
}
/* desktop */
@media (min-width:1024px){
  :root{--gutter:40px}
  .hero{display:grid;grid-template-columns:1.1fr .9fr;gap:56px;align-items:start;padding:48px 0 0}
  /* Full width up front: sized by its images, it started narrow and jumped when they loaded. */
  .hero-visual{margin:0 0 0 auto;width:100%;max-width:480px;padding-bottom:72px}
  .hero-visual .shot{width:72%;margin:0 0 0 auto}
  .hero-visual .widget{width:94%}
  .feature{gap:80px;padding-top:112px}
  .feature figure{padding:48px 48px 0}
  .extras{padding-top:112px}
  .extras ul{grid-template-columns:repeat(3,1fr);gap:36px 48px;padding:44px 48px}
  .cta{margin-top:112px;padding:56px 64px}
}

/* =========================================================
   DOWNLOAD (beta/ keeps its address: old links and QR codes point here)
   ========================================================= */
.get{text-align:center;padding:28px 0 0}
.get h1{font-weight:800;font-size:clamp(36px,8vw,60px);line-height:1.04;letter-spacing:-.03em;margin:0 0 12px}
.get .lede{font-size:clamp(17px,2.2vw,20px);color:var(--text-2);margin:0 auto 28px;max-width:30em}
/* The badges are the point of this page: bigger than elsewhere. */
.get .badges{justify-content:center;--bh:76px;gap:16px}
@media (max-width:519px){ .get .badges{margin:0 auto} }
.get .hero-visual{margin:44px auto 0}
.qr-card{display:none;align-items:center;gap:16px;margin:28px auto 0;max-width:26em;text-align:left;color:var(--text-2);font-size:15px}
.qr-card p{margin:0}
.qr-card b{color:var(--text);font-weight:700}
.qr-img{flex:none;width:112px;height:112px;background:#fff;padding:8px;border-radius:12px;border:1px solid var(--divider)}
@media (min-width:720px){ .get{padding-top:56px} .get .hero-visual{max-width:440px} }
@media (min-width:720px) and (hover:hover) and (pointer:fine){ .qr-card{display:flex} }

/* =========================================================
   TEXT PAGES (support, privacy)
   ========================================================= */
/* Text runs the full 1120px row, like every other page. */
.doc{padding-top:28px}
.doc-head h1{font-weight:800;font-size:clamp(32px,6vw,48px);line-height:1.08;letter-spacing:-.03em;margin:0 0 8px}
.doc .updated{color:var(--text-2);margin:0 0 28px;font-size:15px}
.doc-body{max-width:none}
.doc h2{font-weight:800;font-size:22px;letter-spacing:-.01em;margin:40px 0 8px;scroll-margin-top:24px}
.doc p{margin:0 0 14px}
.doc strong{font-weight:700}
@media (min-width:720px){ .doc{padding-top:48px} .doc .updated{margin-bottom:36px} }