/* Namaz First site. Layl, the app's default theme: deep indigo night, cream text, one gold accent.
   Tokens copied from android/.../ui/theme/Palettes.kt (object L). Fraunces 500 + gold italic em
   (as the store assets), Manrope for everything else. Tamil: Noto Serif Tamil + Anek Tamil. */
:root{
  --night:#0A1034;      /* L.Night: page */
  --card:#141C4E;       /* L.Card: one raised surface */
  --indigo:#1E2A6B;     /* L.Indigo: sky glow */
  --deepest:#05081E;    /* L.Deepest: footer */
  --cream:#F7EEDC;      /* L.Cream: text */
  --gold:#F2C46A;       /* L.Gold: accent + CTA */
  --ink:#1A1640;        /* L.InkCta: text on gold */
  --t1:rgba(247,238,220,.94);
  --t2:rgba(247,238,220,.72);
  --t3:rgba(247,238,220,.52);
  --line:rgba(247,238,220,.14);
  --display:Fraunces,Georgia,"Times New Roman",serif;
  --sans:Manrope,system-ui,-apple-system,"Segoe UI",sans-serif;
  /* type scale: 4 sizes */
  --fs-hero:clamp(44px,8.2vw,72px);
  --fs-h2:clamp(30px,4.6vw,44px);
  --fs-body:clamp(16px,1.3vw,18px);
  --fs-small:14px;
  --ease:cubic-bezier(.22,1,.36,1);
  color-scheme:dark;
}
:lang(ta){
  --display:"Noto Serif Tamil",Fraunces,serif;
  --sans:"Anek Tamil",Manrope,system-ui,sans-serif;
  --t2:rgba(247,238,220,.8); /* Tamil strokes are thinner: muted lifted, as forTamil() in the app */
  --fs-hero:clamp(30px,5.6vw,52px);
  --fs-h2:clamp(24px,3.4vw,36px);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;min-height:100vh;min-height:100dvh;display:flex;flex-direction:column;background:var(--night);color:var(--t1);font:400 var(--fs-body)/1.55 var(--sans);-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit}
p,li,summary{text-wrap:pretty}
:focus-visible{outline:2px solid var(--gold);outline-offset:4px;border-radius:8px}
img{display:block;max-width:100%;height:auto}
.wrap{width:100%;max-width:1120px;margin:0 auto;padding:0 max(16px,env(safe-area-inset-left,0px))}
@media (min-width:390px){.wrap{padding:0 max(24px,env(safe-area-inset-left,0px))}}
.skip{position:absolute;left:16px;top:-48px;z-index:10;padding:8px 12px;border-radius:8px;background:var(--gold);color:var(--ink);font-weight:600;text-decoration:none}
.skip:focus{top:12px}
main{flex:1}
em{font-style:italic;color:var(--gold)}
:lang(ta) em{font-style:normal}

/* header */
.site-head{padding:24px 0}
.site-head .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px}
.brand{display:inline-flex;align-items:center;gap:12px;text-decoration:none;font:500 var(--fs-body)/1 Fraunces,Georgia,serif;font-variation-settings:"opsz" 72;color:var(--cream)}
.brand svg,.brand img{width:32px;height:32px;flex:none;border-radius:8px}
.brand em{font-style:normal;color:inherit}
.lang{display:inline-flex;align-items:center;min-height:48px;padding:0 4px;font:500 var(--fs-small)/1 var(--sans);color:var(--t2);text-decoration:none}
.lang:hover{color:var(--cream)}
.lang[lang=ta]{font-family:"Anek Tamil",var(--sans)}
.lang[lang=en]{font-family:Manrope,var(--sans)}

/* shared type */
.h1,.h2,.big{margin:0;font-family:var(--display);font-weight:500;font-variation-settings:"opsz" 72;color:var(--cream);text-wrap:balance}
.h1{font-size:var(--fs-hero);line-height:1.04;letter-spacing:-.025em}
.h2{font-size:var(--fs-h2);line-height:1.12;letter-spacing:-.018em}
.lead{margin:16px 0 0;color:var(--t2);text-wrap:pretty}
:lang(ta) .h1,:lang(ta) .h2,:lang(ta) .big{font-weight:600;font-stretch:87.5%;letter-spacing:0;line-height:1.45}

/* Play badge (Google's official artwork, clear space kept by margins) */
.play{display:inline-block;margin-top:32px;border-radius:12px;transition:transform .3s var(--ease),opacity .3s var(--ease)}
.play img{width:188px;height:56px}
.play:hover{transform:translateY(-2px)}
.play:active{transform:scale(.98)}

/* hero */
.hero{position:relative;isolation:isolate;overflow-x:clip}
.hero::before{content:"";position:absolute;inset:-120px 0 0;z-index:-1;background:radial-gradient(120% 70% at 70% 0%,rgba(30,42,107,.9),rgba(10,16,52,0) 70%)}
.hero .wrap{display:grid;grid-template-columns:1.05fr .95fr;gap:48px;align-items:center;padding-top:32px;padding-bottom:96px}
.hero .lead{max-width:28ch;margin-top:24px}
:lang(ta) .hero .lead{max-width:none}
.phone{justify-self:center;position:relative;width:min(340px,100%)}
.phone::before{content:"";position:absolute;inset:-12% -24%;z-index:-1;background:radial-gradient(closest-side,rgba(242,196,106,.2),rgba(242,196,106,0))}
.shot{border-radius:32px;box-shadow:0 0 0 1px var(--line),0 1px 0 0 rgba(247,238,220,.08) inset;overflow:hidden;background:var(--deepest);aspect-ratio:1078/1995}
.shot img{width:100%;height:100%;object-fit:cover}

/* how it works */
.how{padding:0 0 96px}
.how ol{list-style:none;margin:40px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:32px;counter-reset:s}
.how li{counter-increment:s;padding-top:24px;border-top:1px solid var(--line);color:var(--t1)}
.how li::before{content:counter(s);display:block;margin-bottom:12px;font:500 var(--fs-h2)/1 Fraunces,Georgia,serif;font-variation-settings:"opsz" 72;color:var(--gold)}

/* features: one screen per idea */
.feature{padding:48px 0}
.feature .wrap{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center}
.feature .shot{justify-self:start}
.feature:nth-of-type(even) .shot{justify-self:end}
.feature .shot{width:min(300px,100%);box-shadow:0 0 0 1px var(--line)}
.feature:nth-of-type(even) .copy{order:2}
.feature .lead{max-width:30ch}

/* tagline */
.tagline{padding:96px 0}
.tagline .big{font-size:var(--fs-hero);line-height:1.08;letter-spacing:-.025em}
:lang(ta) .tagline .big{font-size:var(--fs-h2);line-height:1.45;letter-spacing:0}
.tagline .w{transition:opacity .5s var(--ease);opacity:var(--o,1)}
.js .tagline .w{--o:.3}
.js .tagline .w.on{--o:1}

/* pricing */
.price{padding:48px 0 96px}
.price .wrap{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:start}
.price .num{margin:0;font:500 var(--fs-hero)/1 Fraunces,Georgia,serif;font-variation-settings:"opsz" 72;letter-spacing:-.025em;color:var(--gold);font-variant-numeric:lining-nums tabular-nums}
.price .num span{font:400 var(--fs-body)/1 var(--sans);letter-spacing:0;color:var(--t2);margin-left:8px}
.price .then{margin:16px 0 0;color:var(--t1)}
.price .fine{margin:8px 0 0;color:var(--t3);font-size:var(--fs-small)}

/* faq */
.faq{padding:0 0 96px}
.faq .list{margin-top:32px;border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:64px;padding:16px 0;font-weight:600;color:var(--cream)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";flex:none;width:10px;height:10px;margin-right:4px;border-right:2px solid var(--t2);border-bottom:2px solid var(--t2);transform:translateY(-3px) rotate(45deg);transition:transform .3s var(--ease)}
.faq details[open] summary::after{transform:translateY(2px) rotate(-135deg)}
.faq summary:hover{color:var(--gold)}
.faq details p{margin:0;padding:0 0 24px;max-width:62ch;color:var(--t2)}
.faq details a{color:var(--cream);text-decoration-color:var(--gold);text-underline-offset:3px}

/* final call */
.final{padding:0 0 96px;text-align:center}
.final .h2{max-width:18ch;margin:0 auto}

/* reveal on scroll */
.js .rise{opacity:0;transform:translateY(32px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.js .rise.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .js .rise{transform:none;transition:opacity .4s linear}
  .play,.faq summary::after{transition:none}
}

/* footer */
.site-foot{background:var(--deepest);border-top:1px solid var(--line);padding:32px 0 calc(32px + env(safe-area-inset-bottom,0px));font-size:var(--fs-small);color:var(--t3)}
.site-foot .wrap{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px 24px}
.site-foot nav{display:flex;flex-wrap:wrap;gap:4px 24px}
.site-foot nav a{display:inline-flex;align-items:center;min-height:40px;text-decoration:none;color:var(--t2)}
.site-foot a:hover{color:var(--cream)}
.site-foot a[aria-current]{color:var(--cream)}

/* legal / prose pages (text unchanged; style only) */
.doc{max-width:720px;padding-top:24px;padding-bottom:96px;font-size:16px}
.doc .kicker{margin:0 0 12px;font:600 12px/1 var(--sans);letter-spacing:.1em;text-transform:uppercase;color:var(--gold)}
.doc h1{margin:0;font:500 clamp(36px,6vw,56px)/1.06 var(--display);font-variation-settings:"opsz" 72;letter-spacing:-.022em;color:var(--cream);text-wrap:balance}
.doc .meta{margin:16px 0 0;color:var(--t2)}
.doc .lede{margin:32px 0 0;padding:24px;border-radius:16px;background:var(--card);box-shadow:0 0 0 1px var(--line)}
.doc .lede strong{color:var(--gold);font-weight:600}
.doc h2{margin:48px 0 0;font:500 clamp(24px,3vw,30px)/1.2 var(--display);font-variation-settings:"opsz" 72;letter-spacing:-.012em;color:var(--cream)}
.doc h3{margin:32px 0 0;font:600 16px/1.4 var(--sans);color:var(--cream)}
.doc p,.doc ul,.doc ol{margin:12px 0 0;color:var(--t1)}
.doc ul,.doc ol{padding-left:24px}
.doc li{margin-top:8px}
.doc li::marker{color:var(--gold)}
.doc strong{font-weight:600;color:var(--cream)}
.doc a{color:var(--cream);text-decoration-color:var(--gold);text-underline-offset:3px}
.doc .card{margin-top:16px;padding:16px 24px 24px;border-radius:16px;box-shadow:0 0 0 1px var(--line)}
.doc .card p:first-child,.doc .card h3:first-child{margin-top:8px}
.doc .table{margin-top:16px;overflow-x:auto;border-radius:16px;box-shadow:0 0 0 1px var(--line)}
.doc table{width:100%;border-collapse:collapse;font-size:14px}
.doc th,.doc td{text-align:left;vertical-align:top;padding:12px 16px;border-bottom:1px solid var(--line)}
.doc tr:last-child td{border-bottom:0}
.doc th{font:600 12px/1.3 var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--t3)}
.doc td:first-child{font-weight:600;color:var(--cream);min-width:128px}
.doc .steps{counter-reset:s;list-style:none;padding:0}
.doc .steps li{counter-increment:s;position:relative;padding-left:48px;margin-top:16px}
.doc .steps li::before{content:counter(s);position:absolute;left:0;top:-2px;width:32px;height:32px;border-radius:50%;display:grid;place-items:center;box-shadow:0 0 0 1px var(--line);color:var(--gold);font:500 16px/1 var(--display)}

/* 404 */
.lost{display:grid;place-items:center;text-align:center;padding:64px 0 96px}
.lost h1{margin:0;font:500 clamp(40px,7vw,64px)/1.06 var(--display);font-variation-settings:"opsz" 72;letter-spacing:-.025em;color:var(--cream)}
.lost h1 em{display:block}
.lost p{margin:16px 0 0;color:var(--t2)}
.lost a.home{display:inline-flex;align-items:center;min-height:56px;margin-top:32px;padding:0 32px;border-radius:999px;background:var(--gold);color:var(--ink);text-decoration:none;font-weight:600}

/* responsive */
@media (max-width:860px){
  .hero .wrap{grid-template-columns:1fr;gap:48px;padding-top:16px;padding-bottom:80px;text-align:center}
  .hero .lead{margin-left:auto;margin-right:auto}
  .phone{width:min(280px,76%)}
  .how{padding-bottom:64px}
  .how ol{grid-template-columns:1fr;gap:0;margin-top:24px}
  .how li{display:grid;grid-template-columns:40px 1fr;align-items:baseline;padding:16px 0}
  .how li::before{margin:0}
  .feature{padding:40px 0}
  .feature .wrap{grid-template-columns:1fr;gap:32px;text-align:center}
  .feature:nth-of-type(even) .copy{order:0}
  .feature .lead{margin-left:auto;margin-right:auto}
  .feature .shot,.feature:nth-of-type(even) .shot{width:min(260px,72%);justify-self:center}
  .tagline{padding:64px 0}
  .price{padding:40px 0 80px}
  .price .wrap{grid-template-columns:1fr;gap:24px}
  .faq,.final{padding-bottom:80px}
}
@media (max-width:520px){
  .site-head{padding:16px 0}
  .site-foot .wrap{flex-direction:column;align-items:flex-start}
}