/* ===================================================================
   NIRVAAN — design tokens
   Direction: a quiet consultation room, not a clinic and not a bedroom.
   Crimson red + rose-gold on blush-tinted paper. Nothing shouts.
   =================================================================== */

:root{
  --ink:      #241016;
  --ink-70:   #6E3540;
  /* Secondary text, kept well above the 4.5:1 WCAG AA floor for body text
     against --paper (contrast ~6.7:1 at this shade). */
  --ink-45:   #7C4550;
  --paper:    #FBF1F0;
  --paper-2:  #F3E0DF;
  --card:     #FFFFFF;
  --moss:     #C41E3A;
  --moss-dk:  #8C1029;
  --sage:     #B8607A;
  --brass:    #D46A82;
  --brass-lt: #F5D9DF;
  --line:     rgba(36,16,22,.12);

  --f-display: "Fraunces", Georgia, serif;
  --f-body:    "Karla", system-ui, sans-serif;

  --r-sm: 6px;
  --r-md: 14px;
  --r-lg: 24px;

  --w: 1140px;
  --step: clamp(3.5rem, 7vw, 6.5rem);
}

*,*::before,*::after{ box-sizing:border-box }
html{ -webkit-text-size-adjust:100% }
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--f-body);
  font-size:17px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block }
a{ color:var(--moss); text-decoration:none }
a:hover{ text-decoration:none }
:focus-visible{ outline:3px solid var(--brass); outline-offset:3px; border-radius:2px }

h1,h2,h3{ font-family:var(--f-display); font-weight:600; line-height:1.12; margin:0;
          font-variation-settings:"SOFT" 30,"WONK" 1 }
h1{ font-size:clamp(2.4rem,5.4vw,4.1rem); letter-spacing:-.02em }
h2{ font-size:clamp(1.8rem,3.4vw,2.7rem); letter-spacing:-.015em }
h3{ font-size:1.18rem }
p{ margin:0 0 1rem }

/* --- form controls ------------------------------------------------ */
input[type=text],input[type=tel],input[type=email],input[type=password],
input[type=number],input[type=search],input[type=url],select,textarea{
  width:100%;
  min-height:48px;
  font:inherit;
  font-size:.98rem;
  line-height:1.4;
  padding:.72rem .9rem;
  border:1.5px solid var(--line);
  border-radius:var(--r-sm);
  background:var(--card);
  color:var(--ink);
  box-shadow:0 1px 2px rgba(36,16,22,.03);
  transition:border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
input::placeholder,textarea::placeholder{ color:var(--ink-45); opacity:.72 }
input:focus,select:focus,textarea:focus{
  border-color:var(--sage);
  outline:none;
  box-shadow:0 0 0 3px rgba(184,96,122,.18);
}
textarea{ min-height:110px; resize:vertical }
select{ cursor:pointer }
input:disabled,select:disabled,textarea:disabled{
  background:var(--paper-2); cursor:not-allowed; opacity:.7;
}
button:disabled{ cursor:not-allowed; opacity:.58; transform:none !important }

.wrap{ max-width:var(--w); margin-inline:auto; padding-inline:24px }
.eyebrow{
  font-size:.74rem; letter-spacing:.16em; text-transform:uppercase;
  font-weight:700; color:var(--sage); margin-bottom:1rem
}

/* --- buttons ------------------------------------------------------ */
.btn{
  display:inline-flex; align-items:center; gap:.5rem;
  font-family:var(--f-body); font-weight:700; font-size:1rem;
  padding:.85rem 1.6rem; border-radius:999px; border:1.5px solid transparent;
  cursor:pointer; transition:transform .15s ease, background .15s ease;
}
.btn:hover{ text-decoration:none; transform:translateY(-1px) }
.btn--primary{ background:var(--moss); color:#fff }
.btn--primary:hover{ background:var(--moss-dk) }
.btn--ghost{ border-color:var(--line); color:#b79595 }
.btn--ghost:hover{ background:var(--paper-2) }

/* --- header ------------------------------------------------------- */
.hdr {
    position: sticky;
    top: 0;
    z-index: 50;
    background: rgb(239 225 225 / 90%);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--line);
}
.hdr__in{ display:flex; align-items:center; gap:1rem; height:70px }
.logo{ font-family:var(--f-display); font-size:1.5rem; font-weight:600; color:var(--ink) }
.logo:hover{ text-decoration:none }
.logo span{ color:var(--moss) }
.nav{ display:flex; gap:1rem; margin-left:auto; font-size:.95rem }
.nav a{ color:var(--ink-70) }
.hdr .btn{ padding:.6rem 1.2rem; font-size:.9rem }

/* --- hero --------------------------------------------------------- */
.hero{ padding:var(--step) 0 calc(var(--step) * .8) }
.hero__grid{ display:grid; grid-template-columns:1.05fr .95fr; gap:4rem; align-items:center }
.hero__lead{ font-size:1.16rem; color:var(--ink-70); max-width:34ch; margin-top:1.4rem }
.hero__cta{ display:flex; gap:.8rem; flex-wrap:wrap; margin-top:2rem }
.hero__note{ font-size:.85rem; color:var(--ink-45); margin-top:1.2rem }

/* --- SIGNATURE: the masking card --------------------------------- */
/* This is the product promise, shown rather than claimed. */
.mask{
  background:var(--card); border:1px solid var(--line); border-radius:var(--r-lg);
  padding:1.8rem; box-shadow:0 24px 60px -30px rgba(36,16,22,.5);
}
.mask__tab{
  display:flex; gap:.4rem; margin-bottom:1.4rem;
  background:var(--paper-2); padding:.3rem; border-radius:999px
}
.mask__tab button{
  flex:1; border:0; background:transparent; cursor:pointer;
  font:inherit; font-size:.82rem; font-weight:700; color:var(--ink-45);
  padding:.5rem; border-radius:999px; transition:.2s
}
.mask__tab button[aria-pressed="true"]{ background:var(--card); color:var(--ink); box-shadow:0 1px 3px rgba(0,0,0,.08) }
.mask__row{ display:flex; justify-content:space-between; align-items:baseline;
  padding:.75rem 0; border-bottom:1px dashed var(--line); gap:1rem }
.mask__row:last-of-type{ border-bottom:0 }
.mask__k{ font-size:.78rem; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-45); font-weight:700 }
.mask__v{ font-family:var(--f-display); font-size:1.05rem; font-variant-numeric:tabular-nums;
  transition:color .3s ease }
.mask__v.is-hidden{ color:var(--moss); letter-spacing:.04em }
.mask__foot{
  margin-top:1.4rem; padding-top:1.1rem; border-top:1px solid var(--line);
  font-size:.84rem; color:var(--ink-70); display:flex; gap:.6rem; align-items:flex-start
}
.mask__dot{ width:8px; height:8px; border-radius:50%; background:var(--brass); flex:none; margin-top:.45rem }

/* --- AEO answer block --------------------------------------------- */
.answer {
    background: #873d4a;
    color: #FBE1E6;
    padding: 2.4rem 0;
}
.answer__inner{ max-width:var(--w); margin-inline:auto; padding-inline:24px }
.answer__lead{ font-family:var(--f-display); font-size:1.3rem; line-height:1.45; margin:0; max-width:62ch }
.answer__list{ margin:1.1rem 0 0; padding-left:1.1rem; font-size:.96rem; opacity:.9 }
.answer__list li{ margin-bottom:.35rem }

/* --- sections ----------------------------------------------------- */
.sec{ padding:var(--step) 0 }
.sec--tint{ background:var(--paper-2) }
.sec__head{ max-width:56ch; margin-bottom:3rem }
.sec__head p{ color:var(--ink-70); margin-top:1rem }

/* steps — a real sequence, so numbering carries meaning */
.steps{ display:grid; grid-template-columns:repeat(3,1fr); gap:2.5rem; counter-reset:s }
.step{ counter-increment:s; padding-top:1.6rem; border-top:2px solid var(--moss) }
.step::before{
  content:counter(s,decimal-leading-zero);
  font-family:var(--f-display); font-size:.9rem; font-weight:700;
  color:var(--brass); display:block; margin-bottom:.7rem
}
.step p{ font-size:.95rem; color:var(--ink-70); margin-top:.5rem }

/* speciality cards */
.cards{ display:grid; grid-template-columns:repeat(4,1fr); gap:1.2rem }
.card{
  background:var(--card); border:1px solid var(--line); border-radius:var(--r-md);
  padding:1.5rem; transition:.2s
}
.card:hover{ border-color:var(--sage); transform:translateY(-2px) }
.card h3{ font-size:1.02rem; margin-bottom:.4rem }
.card p{ font-size:.88rem; color:var(--ink-70); margin:0 }

/* pricing split */
.split{ display:grid; grid-template-columns:1fr 1fr; gap:1.5rem }
.tier{ border:1px solid var(--line); border-radius:var(--r-lg); padding:2.2rem; background:var(--card) }
.tier--paid{ background:var(--ink); color:var(--paper); border-color:var(--ink) }
.tier--paid .tier__list li::marker{ color:var(--brass) }
.tier h3{ font-size:1.4rem; margin-bottom:.3rem }
.tier__price{ font-family:var(--f-display); font-size:2.2rem; margin:.6rem 0 1.4rem }
.tier__list{ margin:0; padding-left:1.15rem; font-size:.95rem }
.tier__list li{ margin-bottom:.55rem }

/* doctors */
.docs{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.4rem }
.doc{ background:var(--card); border:1px solid var(--line); border-radius:var(--r-md); padding:1.5rem }
.doc__top{ display:flex; gap:1rem; align-items:center; margin-bottom:1rem }
.doc__av{ width:54px; height:54px; border-radius:50%; background:var(--sage); flex:none;
  display:grid; place-items:center; color:#fff; font-family:var(--f-display); font-size:1.2rem }
.doc__meta{ font-size:.82rem; color:var(--ink-45) }
.doc__rate{ font-weight:700; font-size:.95rem }
.badge{ display:inline-block; font-size:.7rem; font-weight:700; letter-spacing:.06em;
  text-transform:uppercase; padding:.22rem .55rem; border-radius:4px;
  background:var(--brass-lt); color:#6B1B33 }

/* faq */
.faq details{ border-bottom:1px solid var(--line); padding:1.15rem 0 }
.faq summary{ cursor:pointer; font-family:var(--f-display); font-size:1.1rem; list-style:none;
  display:flex; justify-content:space-between; gap:2rem }
.faq summary::-webkit-details-marker{ display:none }
.faq summary::after{ content:"+"; color:var(--brass); font-size:1.4rem; line-height:1 }
.faq details[open] summary::after{ content:"–" }
.faq p{ color:var(--ink-70); font-size:.96rem; margin:.9rem 0 0; max-width:70ch }

/* cities */
.cities{ display:flex; flex-wrap:wrap; gap:.6rem }
.cities a {
    border: 1px solid var(--line);
    border-radius: 999px;
    padding: .45rem 1rem;
    font-size: .9rem;
    color: var(--ink-70);
    background: white;
}
.cities a:hover{ background:var(--card); text-decoration:none; border-color:var(--sage) }

/* footer */
.ftr {
    background: var(--ink);
    color: #fff;
    padding: var(--step) 0 2.5rem;
    font-size: .9rem;
}
.ftr a {
    color: #fff;
}
.ftr__grid{ display:grid; grid-template-columns:1.6fr repeat(3,1fr); gap:2.5rem; margin-bottom:3rem }
.ftr__h{ color:var(--paper); font-size:.76rem; letter-spacing:.14em; text-transform:uppercase; margin:0 0 1rem }
.ftr ul{ list-style:none; margin:0; padding:0 }
.ftr li{ margin-bottom:.55rem }
.ftr__legal {
    border-top: 1px solid rgba(255, 255, 255, .12);
    padding-top: 1.8rem;
    font-size: .8rem;
    line-height: 1.7;
    color: #fff;
}

/* --- responsive --------------------------------------------------- */
@media (max-width:900px){
  .hero__grid,.split{ grid-template-columns:1fr; gap:2.5rem }
  .steps,.docs{ grid-template-columns:1fr }
  .cards{ grid-template-columns:1fr 1fr }
  .ftr__grid{ grid-template-columns:1fr 1fr }
  .nav{ display:none }
  .hdr__in{ flex-wrap:wrap; height:auto; padding:.6rem 0; gap:.7rem }
  .hdr .btn{ padding:.5rem .9rem; font-size:.85rem }
}
@media (max-width:520px){
  .cards{ grid-template-columns:1fr }
  body{ font-size:16px }
}
@media (prefers-reduced-motion:reduce){
  *{ animation:none !important; transition:none !important }
}

/* --- language switcher ------------------------------------------- */
.langsw{ display:flex; gap:.5rem; align-items:center; margin-left:auto }
.langsw a{
  font-size:16px; font-weight:500; color:var(--moss); text-decoration:none;
  padding:.3rem 0; line-height:1.4;
}
.langsw a:hover{ color:var(--ink); text-decoration:none }
.langsw a[aria-current]{ color:var(--moss) }
.langsw__sep{ color:var(--ink-45); font-size:14px; line-height:1 }
.langsw--bar{ margin-left:0 }
.hdr .langsw{ margin-left:0; margin-right:.6rem }

/* Devanagari and Tamil need a little more line height than Latin at the
   same size, or the matras and headline stroke collide. */
html[lang^="hi"] body, html[lang^="mr"] body, html[lang^="ta"] body{ line-height:1.75 }
html[lang^="hi"] h1, html[lang^="mr"] h1, html[lang^="ta"] h1,
html[lang^="hi"] h2, html[lang^="mr"] h2, html[lang^="ta"] h2{ line-height:1.35 }
html[lang^="hi"] .mask__v, html[lang^="mr"] .mask__v{ font-family:var(--f-body) }

/* --- accessibility ------------------------------------------------
   Visually hidden but read aloud. Used for speaker labels in the chat
   and anywhere else meaning is carried by layout or colour alone.
   Not display:none — that would remove it from the accessibility tree
   too, which is the opposite of what is wanted. */
.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

/* Lets a keyboard user jump past the header instead of tabbing through
   it on every page. Hidden until focused. */
.skip{
  position:absolute; left:.5rem; top:-3rem; z-index:100;
  background:var(--moss); color:#fff; padding:.6rem 1rem;
  border-radius:0 0 8px 8px; font-weight:700; text-decoration:none;
  transition:top .15s ease;
}
.skip:focus{ top:0 }

/* The chat log is focusable so it can be scrolled from the keyboard;
   make that focus visible without a permanent border. */
.chat__log:focus-visible{ outline:2px solid var(--moss); outline-offset:2px }

/* A panel's own title is now an h1 for document structure (a page needs
   exactly one, and these pages had none). It should still look like the
   panel heading it always was, not like a hero. */
.panel h1{ font-size:1.35rem; line-height:1.3; margin:0 0 .4rem }
.tool h1 { font-size:1.5rem;  line-height:1.25 }