/* HASTAM — shared stylesheet.
   Only what cannot live inline: font stacks, keyframes, resets, and the
   print rules the PDF renderer needs. Component styling stays inline in the
   templates so a designer can change one card without hunting a selector. */

:root{
  --font-ui:'Inter','Noto Sans Devanagari','Noto Sans',system-ui,sans-serif;
  --font-display:'Poppins','Noto Sans Devanagari','Noto Sans',system-ui,sans-serif;
  --font-indic:'Noto Sans Devanagari','Noto Sans',system-ui,sans-serif;
  --cream:#FDF7ED; --white:#FFFFFF; --gold:#F4B942; --gold-700:#B8892C;
  --ink:#1F1B15; --muted:#7A6F5C; --sand:#F4E9D1;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--cream);color:var(--ink);
  font-family:var(--font-ui);line-height:1.5;
  -webkit-font-smoothing:antialiased;text-wrap:pretty;
  overflow-wrap:anywhere;word-break:break-word;
}
[lang="hi"]{font-family:var(--font-indic);line-height:1.6}
a{color:var(--gold-700);text-decoration:none}
a:hover{color:#8F6A1F}
img{max-width:100%;display:block}
button{font-family:inherit}

/* Single column, phone width, centred — the whole product is one funnel. */
.hastam-app{max-width:440px;margin:0 auto;background:var(--cream);overflow:hidden}

/* The one primary CTA. Full-width marigold pill, dark ink, warm glow. */
.hastam-cta{
  width:100%;min-height:52px;display:inline-flex;align-items:center;justify-content:center;gap:9px;
  border:0;border-radius:999px;cursor:pointer;
  background:linear-gradient(180deg,#F7C65B,#F4B942);
  box-shadow:0 4px 14px rgba(184,137,44,.28),0 0 24px rgba(244,185,66,.16);
  font:600 16px/1 var(--font-display);color:#1F1B15;
  transition:transform .12s cubic-bezier(.22,.61,.36,1),background .12s;
}
.hastam-cta:active{transform:scale(.98);background:var(--gold-700);color:#FFF}
.hastam-cta[data-pulse]{animation:hastam-pulse 2.2s ease-in-out infinite}
.hastam-cta[disabled]{opacity:.45;box-shadow:none;animation:none}

@keyframes hastam-pulse{
  0%,100%{box-shadow:0 4px 14px rgba(184,137,44,.28),0 0 20px rgba(244,185,66,.12)}
  50%{box-shadow:0 4px 18px rgba(184,137,44,.34),0 0 34px rgba(244,185,66,.30)}
}
@keyframes lpShimmer{to{background-position:220% center}}
@keyframes lpTwinkle{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.55;transform:scale(.86)}}
@keyframes lpDrift{0%{transform:translateY(0);opacity:0}30%{opacity:1}100%{transform:translateY(-46px);opacity:0}}
@keyframes lpRise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes lpScan{0%{transform:translateY(-100%)}100%{transform:translateY(320%)}}
@keyframes lpSpin{to{transform:rotate(360deg)}}

/* Referenced by name from the templates. Without these the ticker, both
   bottom sheets, the scan sweep, the spinner and every pulse are inert. */
@keyframes lpGlow{0%,100%{opacity:.5;transform:translateX(-50%) scale(1)}50%{opacity:.85;transform:translateX(-50%) scale(1.1)}}
@keyframes lpFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
@keyframes lpAura{0%,100%{opacity:.45;transform:scale(.94)}50%{opacity:1;transform:scale(1.06)}}
@keyframes lpTravel{0%{top:-8px;opacity:0}15%{opacity:1}85%{opacity:1}100%{top:100%;opacity:0}}
@keyframes lpDot{0%,100%{transform:scale(1);box-shadow:0 0 0 0 rgba(255,153,51,.5)}50%{transform:scale(1.22);box-shadow:0 0 0 7px rgba(255,153,51,0)}}
@keyframes lpRot{to{transform:rotate(360deg)}}
@keyframes lpBreath{0%,100%{opacity:.55;transform:scale(1)}50%{opacity:.9;transform:scale(1.08)}}
@keyframes lpDraw{to{stroke-dashoffset:0}}
@keyframes lpFade{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
@keyframes lpFlowX{0%{transform:translateX(-100%)}100%{transform:translateX(320%)}}
@keyframes lpFan{0%,100%{transform:rotate(-8deg) translateY(0)}50%{transform:rotate(-8deg) translateY(-6px)}}
@keyframes lpEmit{0%{transform:translate(0,6px) scale(.5);opacity:0;filter:blur(2px)}2%{opacity:1;filter:blur(0)}5%{transform:translate(calc(var(--dx)*.4),-30px) scale(1.04);opacity:1}8%{transform:translate(var(--dx),-62px) scale(1);opacity:1}11%{transform:translate(calc(var(--dx)*1.25),-94px) scale(.96);opacity:0}100%{transform:translate(calc(var(--dx)*1.25),-94px) scale(.96);opacity:0}}
@keyframes lpMenu{from{transform:translate(-50%,-100%)}to{transform:translate(-50%,0)}}
@keyframes lpSheet{from{transform:translate(-50%,100%)}to{transform:translate(-50%,0)}}
@keyframes lpTicker{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}
@keyframes fRise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes fSpin{to{transform:rotate(360deg)}}
@keyframes fTick{0%{transform:scale(.5);opacity:0}60%{transform:scale(1.15)}100%{transform:scale(1);opacity:1}}
@keyframes fFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
@keyframes fPulseRing{0%,100%{box-shadow:0 0 0 0 rgba(244,185,66,.45)}50%{box-shadow:0 0 0 7px rgba(244,185,66,0)}}
@keyframes lpSwapA{0%,42%{opacity:1}50%,92%{opacity:0}100%{opacity:1}}
@keyframes lpSwapB{0%,42%{opacity:0}50%,92%{opacity:1}100%{opacity:0}}
@keyframes stepSlide{0%{opacity:0;transform:translateY(8px)}100%{opacity:1;transform:translateY(0)}}
@keyframes checkScale{0%{transform:scale(.6);opacity:0}50%{transform:scale(1.1)}100%{transform:scale(1);opacity:1}}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 rgba(244,185,66,.7)}50%{box-shadow:0 0 0 8px rgba(244,185,66,0)}}

[data-state][hidden]{display:none!important}

/* Calm by instruction: a customer waiting on a reading should not be given a
   moving page they did not ask for. */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  html{scroll-behavior:auto!important}
}

/* wkhtmltopdf renders report_*.php through this same sheet, so print rules
   belong here rather than in a second file that could drift. */
@media print{
  body{background:#FFF}
  .hastam-app{max-width:none}
  [data-noprint]{display:none!important}
}
/* Mobile is the only surface, so sideways scroll is never acceptable — and it is
   the one fault a phone user feels instantly, before reading a word. This is the
   backstop, not the fix: the widths themselves are fluid. min-width:0 lets flex
   and grid children shrink below their content, which is what actually prevents
   a long unbroken string from pushing a row wide. */
html, body { max-width: 100%; overflow-x: hidden; }
.hastam-app { max-width: 100%; }
.hastam-app * { min-width: 0; }
/* ---- type quality ----
   Sizes live in the templates; this is about how the glyphs render. */
:root{
  --font-hindi:'Tiro Devanagari Hindi','Noto Serif Devanagari','Noto Sans Devanagari',serif;
}

html{
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
}

body{
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
  font-kerning:normal;
  font-feature-settings:"kern" 1,"liga" 1,"calt" 1;
  font-variant-ligatures:common-ligatures contextual;
}

/* Devanagari headline copy in the display serif the system names, with the UI
   sans kept for labels and numerals where a serif reads as decoration. */
[lang="hi"]{
  font-family:var(--font-hindi);
  line-height:1.7;
  font-feature-settings:"kern" 1,"liga" 1,"calt" 1,"akhn" 1,"rphf" 1,"blwf" 1,"half" 1,"vatu" 1,"pres" 1,"abvs" 1,"blws" 1,"psts" 1,"haln" 1;
}

/* One stack per script, so no edition depends on the device picking well.
   The Indic OpenType features are what bind conjuncts; without them a phone
   without a good default renders a conjunct as its separate letters. */
html[lang="bn"] [lang="hi"], html[lang="bn"] body{font-family:'Noto Serif Bengali','Noto Sans Bengali',serif}
html[lang="gu"] [lang="hi"], html[lang="gu"] body{font-family:'Noto Serif Gujarati','Noto Sans Gujarati',serif}
html[lang="kn"] [lang="hi"], html[lang="kn"] body{font-family:'Noto Serif Kannada','Noto Sans Kannada',serif}
html[lang="ml"] [lang="hi"], html[lang="ml"] body{font-family:'Noto Sans Malayalam',sans-serif}
html[lang="or"] [lang="hi"], html[lang="or"] body{font-family:'Noto Serif Oriya','Noto Sans Oriya',serif}
html[lang="pa"] [lang="hi"], html[lang="pa"] body{font-family:'Noto Serif Gurmukhi','Noto Sans Gurmukhi',serif}
html[lang="ta"] [lang="hi"], html[lang="ta"] body{font-family:'Noto Serif Tamil','Noto Sans Tamil',serif}
html[lang="te"] [lang="hi"], html[lang="te"] body{font-family:'Gurajada','Noto Sans Telugu',serif}
html[lang="mr"] [lang="hi"]{font-family:var(--font-hindi)}
html[lang="en"] [lang="hi"]{font-family:var(--font-display)}

/* Long Devanagari and Tamil words break badly in a 360px column; this hyphenates
   rather than leaving a ragged hole or pushing the row wide. */
p,span,h1,h2,h3{overflow-wrap:break-word;text-wrap:pretty}

/* Numerals in prices, timers and page numbers must not jitter as they change. */
[data-offer-countdown],[data-scan-bar],.hastam-app [style*="tabular-nums"]{font-variant-numeric:tabular-nums}

@keyframes hlDraw{0%{stroke-dashoffset:200}22%{stroke-dashoffset:0}72%{stroke-dashoffset:0;opacity:1}88%{opacity:0}100%{stroke-dashoffset:0;opacity:0}}
@keyframes hlDot{0%,18%{opacity:0;r:2}26%{opacity:1;r:3.6}72%{opacity:1}88%,100%{opacity:0}}
@keyframes hlTag{0%,20%{opacity:0;transform:translate(2px,-50%)}30%{opacity:1;transform:translate(6px,-50%)}72%{opacity:1;transform:translate(6px,-50%)}88%,100%{opacity:0;transform:translate(6px,-50%)}}