/* SAARVO Engage — WhatsApp Automation Audit pages
   Shared by register.html, checkout.html and confirmed.html -- index.html
   never loads it, since that page only redirects to /audit/register */

/* Accent and type stack are Grow's and Engage's (--accent, --font in their
   checkout.css), so the three paid funnels read as one brand. System fonts,
   not a webfont: this is paid traffic on 4G, and a font request is a round
   trip before the headline settles. */
:root{--ink:#071638;--muted:#5b6882;--blue:#0d72ea;--blue-hover:#0a5cc0;--green:#21c063;--line:#dce8f8;
  --font:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif}
*{box-sizing:border-box}
/* prices.js hides the struck-through price and the saving with `hidden`, and
   `.price .was{display:inline-block}` would otherwise outrank it. */
[hidden]{display:none!important}
html{scroll-behavior:smooth}
body{margin:0;font-family:var(--font);color:var(--ink);line-height:1.58;background:#fff}
img{max-width:100%}
.wrap{width:min(1180px,92%);margin:auto}

/* Header / footer */
.top{padding:18px 0;background:#fff;border-bottom:1px solid #eaf0f8}
.topin{display:flex;align-items:center;justify-content:center;gap:20px}
.logo{width:220px;height:auto}
.foot{padding:28px 0;text-align:center;color:#5c6981;border-top:1px solid var(--line);background:#fff}
.footin{display:flex;flex-wrap:wrap;justify-content:center;gap:6px 22px}
.foot a{color:#0a5cc0;text-decoration:none;font-weight:750}

/* Shared elements */
.tag{display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border:1px solid #bce6ff;border-radius:999px;background:#eaf8ff;color:#0566cb;font-size:.78rem;font-weight:900;letter-spacing:.06em;text-transform:uppercase}
.withwa{display:flex;align-items:flex-start;gap:13px}
/* Centred headings put the icon INLINE with the text rather than beside it as
   a flex item: once a centred heading wraps, a flex icon stays pinned to the
   far left of the box, a column away from the words it belongs to. */
.withwa.centered{display:block;text-align:center}
.withwa.centered>.wa{display:inline-flex;vertical-align:-.08em;margin-right:.28em}
.wa{display:inline-flex;flex:0 0 auto;width:.78em;height:.78em;margin-top:.1em;border-radius:50%;background:var(--green);padding:.12em;box-shadow:0 8px 22px #21c06340}
.wa svg{width:100%;height:100%;fill:#fff}
.lead{font-size:1.16rem;color:var(--muted);max-width:680px}
h2{font-size:clamp(2rem,3.5vw,3.15rem);line-height:1.13;letter-spacing:-.035em;margin:0 0 16px}
.center{text-align:center}
.center .lead{margin-inline:auto}
.card{background:#ffffffdd;border:1px solid var(--line);border-radius:24px;padding:30px;box-shadow:0 24px 70px #123b7517}
.list{display:grid;gap:13px;margin-top:22px}
.item{display:flex;gap:11px}
.tick{color:#0aa27e;font-weight:900}
/* gap, because an inline-flex box turns "for ", <span>₹99</span> and " →" into
   three flex items and drops the spaces between them: "for₹99→". Solid accent,
   because white on the old cyan end of the gradient was 2.6:1. */
.cta{display:inline-flex;align-items:center;justify-content:center;gap:.3em;margin-top:24px;padding:16px 26px;border-radius:13px;background:var(--blue);color:#fff;text-decoration:none;font-weight:900;box-shadow:0 14px 32px #0d72ea35;transition:.2s;border:0;cursor:pointer;font:inherit;font-weight:900}
.cta:hover{background:var(--blue-hover);transform:translateY(-2px);box-shadow:0 18px 38px #0d72ea45}
.cta:focus-visible{outline:3px solid #0d72ea66;outline-offset:3px}
.amount{padding:16px;border-radius:13px;background:#eaf6ff;color:#164d83}

/* confirmed.html's hero (and .title, shared with register.html's own) */
.hero{padding:88px 0;background:radial-gradient(circle at 88% 18%,#c9fff1 0,transparent 28%),radial-gradient(circle at 7% 5%,#dcecff 0,transparent 27%),linear-gradient(135deg,#f7fbff,#fff)}
.grid{display:grid;grid-template-columns:1.12fr .88fr;gap:52px;align-items:center}
.title{font-size:clamp(2.6rem,5vw,4.5rem);line-height:1.1;letter-spacing:-.03em;margin:20px 0}
.price{font-size:3.2rem;font-weight:900;color:var(--blue);line-height:1;margin-top:24px}
.price small{font-size:.95rem;color:var(--muted);font-weight:700}
.price .was{display:inline-block;font-size:1.6rem;font-weight:800;color:#6b7a94;text-decoration:line-through;margin-right:10px;vertical-align:middle}
.price .savetag{display:inline-block;margin-left:10px;padding:4px 10px;border-radius:999px;background:#e4fff0;color:#067a3f;font-size:.8rem;font-weight:900;vertical-align:middle;letter-spacing:.02em}
.hero .card{backdrop-filter:blur(10px)}
.trust{display:flex;flex-wrap:wrap;gap:16px;margin-top:18px;color:#40506e;font-size:.9rem;font-weight:750}
.section{padding:84px 0}
.soft{background:linear-gradient(180deg,#f5f9ff,#fff)}
.benefits{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:36px}
.benefit{padding:27px;border:1px solid var(--line);border-radius:19px;background:white;box-shadow:0 14px 40px #163b700c}
.benefit b{display:block;font-size:1.1rem;margin-bottom:7px}
.offer{padding:42px;border-radius:28px;color:white;background:linear-gradient(130deg,#06163f,#0a5cc0);box-shadow:0 25px 70px #072c7738}
.offer .lead{color:#dbeafe}
.offer .lead .was{text-decoration:line-through;color:#a9c4ee;font-weight:800;margin-right:6px}
.offer .lead .now{font-weight:900;color:#fff}
.offer .cta{background:#fff;color:#0a5cc0}
.offer .cta:hover{background:#eef5ff}
.faq{max-width:850px;margin:32px auto}
.faq details{padding:9px 0;border-bottom:1px solid var(--line)}
.faq summary{font-weight:850;cursor:pointer;padding:10px 0}

/* Register page (register.html) */
.hero.register{padding:64px 0 80px;min-height:78vh}
.hero.register .grid{grid-template-columns:1fr .95fr}
.hero.register .title{font-size:clamp(2.3rem,4.4vw,3.9rem)}
.hero.register .price{font-size:2.6rem}
.hero.register .price .was{font-size:1.35rem}
.hero.register .formbox h2{margin:0 0 6px;font-size:1.5rem;letter-spacing:-.02em;text-align:center}
.note{margin:14px 0 0;font-size:.8rem;color:#5b6882;text-align:center}

/* Checkout page (checkout.html) */
.checkout{padding:22px 0 54px;background:radial-gradient(circle at 85% 15%,#d5fff2,transparent 25%),#f6f9fe}
.checkout-center{max-width:820px;margin:0 auto}
.checkout-intro{text-align:center;margin:0 auto 20px}
.checkout-intro .tag{margin-bottom:10px}
.compact-title{display:block;text-align:center;margin:0 auto 10px;color:#071638;font-size:clamp(2rem,4vw,3.15rem);line-height:1.08;letter-spacing:-.04em}
.compact-title>.wa{display:inline-flex;vertical-align:-.12em;margin:0 6px 0 0}
.checkout-intro>p{max-width:680px;margin:0 auto;color:#5b6882;font-size:1rem}
.compact-benefits{display:flex;justify-content:center;flex-wrap:wrap;gap:8px 18px;margin-top:14px;color:#245176;font-size:.88rem;font-weight:750}
.formbox{max-width:760px;margin:0 auto;background:white;border:1px solid var(--line);border-radius:24px;padding:25px;box-shadow:0 24px 70px #123b7519}
.audit-customer{margin:0 0 16px;padding:0 0 16px;border-bottom:1px solid #dce8f8}
.audit-customer h2{margin:0 0 5px;font-size:1.45rem;color:#071638;text-align:center;letter-spacing:-.02em}
.audit-sub{margin:0 0 16px;color:#5b6882;font-size:.92rem;text-align:center}
.audit-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.audit-field{margin-bottom:14px;text-align:left}
.audit-field label{display:block;margin-bottom:6px;color:#142342;font-size:.82rem;font-weight:750}
.audit-field input,.audit-field select{width:100%;height:48px;padding:11px 13px;border:1px solid #ccd9eb;border-radius:10px;background:#fff;color:#102044;font:500 15px/1.3 var(--font);outline:none;transition:border-color .15s,box-shadow .15s}
.audit-field input:focus,.audit-field select:focus{border-color:var(--blue);box-shadow:0 0 0 3px rgba(13,114,234,.14)}
.audit-error{display:none;margin:2px 0 12px;padding:10px 12px;border-radius:9px;background:#fff0f0;color:#b42318;font-size:.85rem;font-weight:700;text-align:left}
.checkout .amount{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;padding:16px 18px;margin:2px 0 18px}
.amount .lbl{font-size:.82rem;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:#3a5a80}
.amount .was{font-size:1.05rem;font-weight:800;color:#6b7a94;text-decoration:line-through;margin-right:8px}
.amount .now{font-size:1.9rem;font-weight:900;color:var(--blue);line-height:1}
.amount .save{display:inline-block;padding:6px 12px;border-radius:999px;background:#e4fff0;color:#067a3f;font-size:.85rem;font-weight:900;letter-spacing:.02em;white-space:nowrap}
.amount small{display:block;width:100%;color:#3a5a80;font-size:.85rem}
.paybtn{width:100%;margin-top:6px;font-size:1.1rem;padding:16px 26px}

/* Offer page, design C (register.html): a navy hero, with the claim form
   overlapping its lower edge onto the "Includes" band below. */
.oc-hero{position:relative;padding:64px 0 120px;color:#fff;background:radial-gradient(circle at 96% 0,#21e3b040 0,transparent 32%),linear-gradient(130deg,#06163f 0,#0a3f8f 58%,#0a5cc0 100%)}
.oc-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:52px;align-items:center}
/* Grid children default to min-width:auto, which lets the form's inputs push
   the page wider than a phone. */
.oc-grid>*{min-width:0}
.oc-hero .tag{background:#ffffff14;border-color:#ffffff33;color:#bfe7ff}
.oc-hero .title{color:#fff}
.oc-hero .lead{color:#cfe1ff}
.oc-form{position:relative;z-index:2;margin-bottom:-170px}
/* A deeper, navy-tinted shadow than .formbox's, so the card reads as lifted
   off the pale band it overhangs. */
.claimbox{max-width:none;margin:0;color:var(--ink);box-shadow:0 34px 70px -22px #0a2a6b66,0 14px 30px -12px #0a2a6b33}
.claimbox h2{margin:0 0 4px;font-size:1.45rem;text-align:center;letter-spacing:-.02em}
.claim-price{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 10px;margin:4px 0 14px;padding:13px 15px;border:1px solid #cfe3fb;border-radius:12px;background:#f2f8ff}
.claim-price .was{font-size:1.1rem;font-weight:800;color:#6b7a94;text-decoration:line-through}
.claim-price .now{font-size:2.2rem;font-weight:900;color:var(--blue);line-height:1}
.claim-price small{font-size:.84rem;color:var(--muted);font-weight:700}
.claim-price .savetag{display:inline-block;padding:4px 10px;border-radius:999px;background:#e4fff0;color:#067a3f;font-size:.78rem;font-weight:900;letter-spacing:.02em}
.claimbox .paybtn{margin-top:0}
.claim-trust{justify-content:center;gap:4px 12px;margin-top:13px;font-size:.76rem}
.oc-includes{padding:200px 0 40px;background:#f5f9ff}
.oc-chips{display:grid;grid-template-columns:repeat(5,1fr);gap:14px;margin:26px 0 0;padding:0;list-style:none}
.oc-chips li{display:flex;flex-direction:column;gap:10px;padding:18px 16px;border:1px solid var(--line);border-radius:16px;background:#fff;font-size:.93rem;font-weight:700}
.oc-chips .tick{display:inline-grid;place-items:center;width:30px;height:30px;border-radius:50%;background:#e4fff0}

/* Payment page (checkout.html) */
.pay-trust{justify-content:center;gap:4px 12px;margin-top:13px;font-size:.78rem}

/* Confirmation page (confirmed.html) */
.success{max-width:820px;margin:auto;text-align:center}
.success .title{font-size:clamp(2.4rem,5vw,4.2rem)}
.success .lead{margin-inline:auto}
.successmark{width:78px;height:78px;margin:0 auto 18px;display:grid;place-items:center;border-radius:50%;background:#e4fff0;color:#0b9e55;font-size:2.3rem;font-weight:900}
.paid{display:inline-grid;grid-template-columns:auto auto;gap:6px 28px;align-items:center;margin:26px auto 0;padding:20px 30px;border-radius:18px;background:#fff;border:1px solid var(--line);box-shadow:0 18px 50px #123b7514;text-align:left}
.paid .k{font-size:.8rem;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:#5b6882}
.paid .v{font-size:1.05rem;font-weight:800;color:var(--ink)}
.paid .amt{font-size:2rem;font-weight:900;color:var(--blue);line-height:1}
.paid .ok{color:#067a3f}
.steps{text-align:left;max-width:650px;margin:30px auto 0}
.steps .amount{margin-top:22px}

/* Responsive */
@media(max-width:900px){
  .grid{grid-template-columns:1fr;gap:34px}
  /* `.hero.register .grid` above is more specific than `.grid`, and a media
     query adds no specificity of its own — so the one-column rule never
     reached the register page and its form ran off the side of the phone. */
  .hero.register .grid{grid-template-columns:1fr}
  .oc-grid{grid-template-columns:1fr;gap:34px}
  .oc-form{margin-bottom:-120px}
  .oc-includes{padding-top:150px}
  .oc-chips{grid-template-columns:repeat(2,1fr)}
  .hero{padding:66px 0}
  .benefits{grid-template-columns:1fr 1fr}
  .logo{width:200px}
  .title{font-size:clamp(2.5rem,7vw,4rem)}
}
@media(max-width:620px){
  .wrap{width:min(92%,520px)}
  .topin{justify-content:center}
  .logo{width:180px}
  .hero,.section{padding:52px 0}
  .title{font-size:2.55rem}
  .hero.register{padding:34px 0 48px}
  .hero.register .title{font-size:2.2rem}
  .hero.register .price{font-size:2.3rem}
  .success .title{font-size:2.4rem}
  .benefits{grid-template-columns:1fr}
  .cta{width:100%;padding:16px}
  .withwa.centered>.wa{margin-right:.22em}
  .card,.formbox{padding:21px;border-radius:18px}
  .offer{padding:28px 21px}
  .withwa{gap:9px}
  .price{font-size:2.8rem}
  .price .was{font-size:1.3rem;margin-right:6px}
  .price .savetag{display:block;width:max-content;margin:8px 0 0}
  .top{padding:10px 0}
  .checkout{padding:12px 0 36px}
  .checkout-intro{margin-bottom:14px}
  .compact-title{font-size:2rem}
  .compact-title>.wa{margin-right:5px}
  .checkout-intro>p{font-size:.92rem}
  .compact-benefits{gap:6px 12px;font-size:.8rem}
  .formbox{padding:18px}
  .audit-row{grid-template-columns:1fr;gap:0}
  .oc-hero{padding:40px 0 110px}
  .oc-chips{grid-template-columns:1fr}
  .claim-price .now{font-size:2rem}
  .audit-customer h2{font-size:1.3rem;text-align:left}
  .audit-sub{text-align:left}
  .checkout .amount{padding:14px}
  .amount .now{font-size:1.7rem}
  .paid{grid-template-columns:1fr;gap:4px;padding:18px 20px;width:100%;text-align:center}
  .paid .k{margin-top:8px}
  .paid .k:first-child{margin-top:0}
  .foot{font-size:.92rem}
}