/* ============================================================
   Landing Page components for Smiles by Dr. C
   Loads AFTER main.css. Reuses main.css tokens (--c*, --k*, --s*, --hl, --hs, --sh1, --sh2, --cw).
   Scoped to LP-only classes (prefix lp) to avoid touching the main site.
   ============================================================ */

/* ---- LP nav: minimal, form-first (brand + phone only) ---- */
.lp-nav{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.9);backdrop-filter:saturate(180%) blur(12px);border-bottom:1px solid var(--hl)}
.lp-nav .ni{display:flex;align-items:center;justify-content:space-between;padding:14px 0}
.lp-nav .nl img{height:34px;width:auto;display:block}
.lp-nav .lp-navcta{display:flex;align-items:center;gap:14px}
.lp-nav .np{display:inline-flex;align-items:center;gap:8px;font-size:14px;font-weight:500;color:var(--k8)}
@media(max-width:640px){.lp-nav .np span{display:none}}

/* ---- HERO (form-first on mobile) ---- */
.lp-hero{background:linear-gradient(180deg,var(--c1) 0%,var(--s1) 100%);padding:56px 0 64px;border-bottom:1px solid var(--hl)}
.lp-hg{display:grid;grid-template-columns:1fr;gap:36px;align-items:start}
@media(min-width:1000px){.lp-hg{grid-template-columns:1.05fr .95fr;gap:56px}}
.lp-htext .eb{margin-bottom:18px}
.lp-htext h1{font-family:'Inter',sans-serif;font-weight:600;font-size:clamp(30px,4.2vw,50px);line-height:1.08;letter-spacing:-0.025em;color:var(--k9)}
.lp-htext h1 em{font-family:'Fraunces',Georgia,serif;font-style:italic;font-weight:500;color:var(--c7)}
.lp-htext p.lead{font-size:17px;line-height:1.65;color:var(--k6);margin-top:20px;max-width:560px}
.lp-trust{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px}
.lp-pill{display:inline-flex;align-items:center;gap:7px;padding:8px 14px;background:var(--s1);border:1px solid var(--hs);border-radius:999px;font-size:13px;font-weight:500;color:var(--k7)}
.lp-pill svg{width:15px;height:15px;color:var(--c7);flex-shrink:0}

/* form order: FIRST on mobile, SECOND (right) on desktop */
.lp-hform{order:-1}
@media(min-width:1000px){.lp-hform{order:2}}
.lp-card{background:var(--s1);border:1px solid var(--hl);border-radius:20px;padding:28px;box-shadow:var(--sh2)}
.lp-card h2{font-family:'Inter',sans-serif;font-weight:600;font-size:22px;letter-spacing:-0.02em;color:var(--k9);line-height:1.25}
.lp-card .lp-sub{font-size:14px;color:var(--k5);margin-top:8px;line-height:1.55}
.lp-form{display:flex;flex-direction:column;gap:14px;margin-top:22px}
.lp-form .ff label{display:block;font-size:12.5px;font-weight:500;color:var(--k7);margin-bottom:7px;letter-spacing:.02em}
.lp-form .ff input,.lp-form .ff select,.lp-form .ff textarea{width:100%;padding:12px 14px;font-size:15px;font-family:inherit;color:var(--k8);background:var(--s1);border:1px solid var(--hs);border-radius:10px;transition:border-color .2s,box-shadow .2s}
.lp-form .ff input:focus,.lp-form .ff select:focus,.lp-form .ff textarea:focus{outline:none;border-color:var(--c5);box-shadow:0 0 0 3px var(--c2)}
.lp-form button{width:100%;justify-content:center;margin-top:4px}
.lp-formnote{font-size:12px;color:var(--k5);text-align:center;line-height:1.5;margin-top:2px}

/* ---- OFFER RIBBON (dark) ---- */
.lp-offer{background:var(--k9);color:#fff;padding:52px 0}
.lp-offer .lp-ow{max-width:760px;margin:0 auto;text-align:center}
.lp-offer .eb{color:var(--c4);justify-content:center;display:inline-flex;margin-bottom:16px}
.lp-offer h2{font-family:'Inter',sans-serif;font-weight:300;font-size:clamp(26px,3.4vw,38px);line-height:1.2;letter-spacing:-0.02em;color:#fff}
.lp-offer h2 em{font-family:'Fraunces',Georgia,serif;font-style:italic;font-weight:500;color:#fff}
.lp-offer p{font-size:15.5px;line-height:1.7;color:rgba(255,255,255,.72);margin-top:16px}
.lp-offer .lp-obtn{margin-top:26px}
.lp-offer .lp-ofine{font-size:12px;color:rgba(255,255,255,.5);margin-top:14px}

/* ---- GENERIC SECTION ---- */
.lp-sec{padding:72px 0}
.lp-sec.alt{background:var(--s2);border-top:1px solid var(--hl);border-bottom:1px solid var(--hl)}
.lp-sh{max-width:720px;margin:0 auto 44px;text-align:center}
.lp-sh .eb{justify-content:center;display:inline-flex;margin-bottom:14px}
.lp-sh h2{font-family:'Inter',sans-serif;font-weight:600;font-size:clamp(26px,3.4vw,40px);line-height:1.18;letter-spacing:-0.025em;color:var(--k9)}
.lp-sh h2 em{font-family:'Fraunces',Georgia,serif;font-style:italic;font-weight:500;color:var(--c7)}
.lp-sh p{font-size:16px;line-height:1.65;color:var(--k6);margin-top:16px}

/* ---- CHECKLIST (what you get) ---- */
.lp-checks{max-width:640px;margin:0 auto;display:flex;flex-direction:column;gap:18px}
.lp-check{display:flex;gap:16px;align-items:flex-start}
.lp-check .lp-ci{flex-shrink:0;width:28px;height:28px;border-radius:50%;background:var(--c2);display:flex;align-items:center;justify-content:center;margin-top:2px}
.lp-check .lp-ci svg{width:15px;height:15px;color:var(--c7)}
.lp-check .lp-ct strong{display:block;font-size:16px;font-weight:600;color:var(--k9);margin-bottom:4px}
.lp-check .lp-ct span{font-size:14.5px;color:var(--k6);line-height:1.6}

/* ---- PILLAR / FEATURE GRID ---- */
.lp-grid{display:grid;grid-template-columns:1fr;gap:20px}
@media(min-width:640px){.lp-grid.g2{grid-template-columns:1fr 1fr}.lp-grid.g3{grid-template-columns:1fr 1fr}}
@media(min-width:960px){.lp-grid.g3{grid-template-columns:repeat(3,1fr)}.lp-grid.g4{grid-template-columns:repeat(4,1fr)}}
.lp-tile{background:var(--s1);border:1px solid var(--hl);border-radius:16px;padding:26px 24px;box-shadow:var(--sh1)}
.lp-tile h3{font-family:'Inter',sans-serif;font-weight:600;font-size:17px;color:var(--k9);letter-spacing:-0.01em}
.lp-tile p{font-size:14.5px;color:var(--k6);line-height:1.6;margin-top:10px}
.lp-tile .lp-meta{font-size:13px;color:var(--k5);margin-top:12px;line-height:1.55}
.lp-tile .lp-meta b{color:var(--k7);font-weight:600}

/* ---- PAIN LIST ---- */
.lp-pains{max-width:680px;margin:0 auto;display:grid;grid-template-columns:1fr;gap:14px}
@media(min-width:640px){.lp-pains{grid-template-columns:1fr 1fr}}
.lp-pain{display:flex;gap:12px;align-items:flex-start;padding:16px 18px;background:var(--s1);border:1px solid var(--hl);border-radius:12px}
.lp-pain svg{width:18px;height:18px;color:var(--c6);flex-shrink:0;margin-top:1px}
.lp-pain span{font-size:14.5px;color:var(--k6);line-height:1.55}

/* ---- PROCESS STEPS ---- */
.lp-steps{max-width:760px;margin:0 auto;display:flex;flex-direction:column;gap:20px}
.lp-step{display:flex;gap:20px;align-items:flex-start;background:var(--s1);border:1px solid var(--hl);border-radius:16px;padding:24px 26px;box-shadow:var(--sh1)}
.lp-step .lp-snum{flex-shrink:0;width:44px;height:44px;border-radius:50%;background:var(--k9);color:#fff;display:flex;align-items:center;justify-content:center;font-family:'Fraunces',serif;font-size:19px;font-weight:500}
.lp-step h3{font-family:'Inter',sans-serif;font-weight:600;font-size:17px;color:var(--k9)}
.lp-step h3 span{font-weight:400;color:var(--k5);font-size:14px;margin-left:8px}
.lp-step p{font-size:14.5px;color:var(--k6);line-height:1.6;margin-top:8px}

/* ---- COMPARISON (2 col) ---- */
.lp-comp{display:grid;grid-template-columns:1fr;gap:20px;max-width:840px;margin:0 auto}
@media(min-width:720px){.lp-comp{grid-template-columns:1fr 1fr}}
.lp-comp .lp-tile h3{font-size:18px;margin-bottom:6px}
.lp-comp ul{margin:14px 0 0;padding:0;list-style:none;display:flex;flex-direction:column;gap:10px}
.lp-comp li{display:flex;gap:10px;font-size:14px;color:var(--k6);line-height:1.55}
.lp-comp li svg{width:15px;height:15px;color:var(--c7);flex-shrink:0;margin-top:3px}

/* ---- gallery strip on LP ---- */
.lp-gal{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;max-width:900px;margin:0 auto}
@media(min-width:640px){.lp-gal{grid-template-columns:repeat(3,1fr);gap:16px}}
.lp-gal .gi{aspect-ratio:1/1;border-radius:14px;overflow:hidden;background:var(--c2);cursor:pointer}
.lp-gal .gi img{width:100%;height:100%;object-fit:cover}

/* ---- doctor block ---- */
.lp-doc{display:grid;grid-template-columns:1fr;gap:32px;align-items:center;max-width:900px;margin:0 auto}
@media(min-width:768px){.lp-doc{grid-template-columns:300px 1fr;gap:44px}}
.lp-doc .lp-docimg{aspect-ratio:4/5;border-radius:20px;overflow:hidden;background:var(--c2);box-shadow:var(--sh2)}
.lp-doc .lp-docimg img{width:100%;height:100%;object-fit:cover}
.lp-doc h3{font-family:'Inter',sans-serif;font-weight:600;font-size:24px;letter-spacing:-0.02em;color:var(--k9)}
.lp-doc .lp-docrole{font-size:14px;color:var(--c7);font-weight:500;margin-top:6px}
.lp-doc p{font-size:15px;color:var(--k6);line-height:1.7;margin-top:16px}
.lp-doc ul{margin:18px 0 0;padding:0;list-style:none;display:flex;flex-direction:column;gap:9px}
.lp-doc li{display:flex;gap:10px;font-size:14px;color:var(--k7);line-height:1.5}
.lp-doc li svg{width:15px;height:15px;color:var(--c7);flex-shrink:0;margin-top:3px}

/* ---- FINAL CTA ---- */
.lp-final{background:var(--k9);color:#fff;padding:80px 0;text-align:center}
.lp-final .lp-fw{max-width:680px;margin:0 auto}
.lp-final .eb{color:var(--c4);justify-content:center;display:inline-flex;margin-bottom:18px}
.lp-final h2{font-family:'Inter',sans-serif;font-weight:300;font-size:clamp(28px,3.6vw,42px);line-height:1.18;letter-spacing:-0.02em;color:#fff}
.lp-final h2 em{font-family:'Fraunces',Georgia,serif;font-style:italic;font-weight:500;color:#fff}
.lp-final p{font-size:16px;line-height:1.7;color:rgba(255,255,255,.72);margin-top:18px}
.lp-final .lp-fbtns{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-top:30px}
.lp-final .bo{color:#fff;border-color:rgba(255,255,255,.3)}
.lp-final .bo:hover{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.5)}
.lp-final .lp-ftrust{font-size:13px;color:rgba(255,255,255,.5);margin-top:26px;letter-spacing:.02em}

/* ---- success state ---- */
.lp-success{background:var(--c1);border:1px solid var(--hs);border-radius:16px;padding:34px 28px;text-align:center}
.lp-success h3{font-family:'Inter',sans-serif;font-weight:600;font-size:22px;color:var(--k9)}
.lp-success p{font-size:15px;color:var(--k6);line-height:1.65;margin-top:12px}

/* Phone field: +91 prefix + validation states */
.ff .phonewrap{display:flex;align-items:stretch}
.ff .phonewrap .cc{display:flex;align-items:center;padding:12px 12px;font-size:15px;color:var(--k6);background:var(--c2);border:1px solid var(--hs);border-right:none;border-radius:10px 0 0 10px;white-space:nowrap;font-family:inherit}
.ff .phonewrap input{border-radius:0 10px 10px 0!important}
.ff.err input,.ff.err .phonewrap input{border-color:#dc2626!important;box-shadow:0 0 0 3px rgba(220,38,38,.12)!important}
.ff.err .phonewrap .cc{border-color:#dc2626}
.ff .errmsg{display:none;color:#dc2626;font-size:12.5px;font-weight:500;margin-top:6px}
.ff.err .errmsg{display:block}