/* shanticoach.in
   ─────────────────────────────────────────────────────────────
   Concept: the moment after the breath.
   Anger work is not mystical and it is not clinical, so the page is
   neither. Warm paper, steady ink, one calm green — the feeling of
   sitting across from someone unhurried who has seen this before.
   Motion is deliberately slow and small: a page about regulating
   arousal should not be busy.
   No build step. Fonts are the only external request.
   ───────────────────────────────────────────────────────────── */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,300;9..144,400;9..144,500&family=Inter:wght@300;400;500;600&family=Tiro+Devanagari+Hindi&display=swap');

:root {
  --paper:      #f7f4ee;   /* warm off-white, never pure */
  --paper-lift: #fffdf9;
  --ink:        #1f2a2b;   /* deep slate-green, softer than black */
  --ink-dim:    #5f6d6b;
  --calm:       #2f6b5b;   /* the one accent — steady, not medical */
  --calm-lit:   #3d8a74;
  --clay:       #b8562f;   /* warmth, used sparingly */
  --wa:         #25D366;   /* official WhatsApp brand green */
  --rule:       rgba(47, 107, 91, 0.20);
  --measure:    34rem;
}

*, *::before, *::after { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  font-weight: 400;
  font-size: 17px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* ── Atmosphere ───────────────────────────────────────────────
   Two layers only: a soft warmth at the top of the page, and
   concentric rings behind the hero that read as a ripple settling.
   Nothing moves unless the visitor has not asked for reduced motion. */

.sky { position: fixed; inset: 0; z-index: 0; pointer-events: none; }
.sky::before {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(72% 44% at 50% -10%, rgba(47,107,91,.10), transparent 72%),
    radial-gradient(46% 30% at 88% 8%,  rgba(184,86,47,.06), transparent 72%),
    radial-gradient(60% 40% at 6% 92%,  rgba(47,107,91,.05), transparent 72%);
}

.grain {
  position: fixed; inset: 0; z-index: 0; pointer-events: none; opacity: .035;
  background-image: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'>\
<filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/></filter>\
<rect width='140' height='140' filter='url(%23n)'/></svg>");
}

.wrap {
  position: relative; z-index: 1;
  width: 100%; max-width: 60rem;
  margin: 0 auto; padding: 0 1.4rem 5rem;
}

/* ── Type ─────────────────────────────────────────────────── */

h1, h2, h3 {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 400; font-optical-sizing: auto;
  margin: 0 0 .5em; letter-spacing: -0.01em;
}

.devanagari { font-family: 'Tiro Devanagari Hindi', serif; color: var(--calm); }

h1 { font-size: clamp(2.1rem, 6.2vw, 3.3rem); line-height: 1.14; margin-bottom: .34em; }
h1 .devanagari { display: block; font-size: .42em; margin-bottom: .3em; letter-spacing: 0; }
h2 { font-size: clamp(1.5rem, 3.4vw, 2rem); line-height: 1.24; }
h3 { font-size: 1.14rem; font-weight: 500; margin-bottom: .3em; }

p { margin: 0 0 1.05em; max-width: var(--measure); }
.hero p, .cta-center p { margin-left: auto; margin-right: auto; }
a { color: var(--calm); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--calm-lit); }
strong { font-weight: 600; }

.eyebrow {
  font-size: .78rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--calm); font-weight: 500; margin-bottom: .9rem;
}
.lede  { font-size: 1.12rem; color: var(--ink-dim); }
.muted { color: var(--ink-dim); }
.small { font-size: .88rem; line-height: 1.62; }

/* ── Sections ─────────────────────────────────────────────── */

section { padding: 4.2rem 0 0; }

.divider { display: flex; align-items: center; gap: 14px; margin: 0 0 2.2rem; }
.divider::before, .divider::after {
  content: ""; height: 1px; background: var(--rule); flex: 1;
}
.divider i {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--calm); opacity: .55; flex: none;
}

/* ── Hero ─────────────────────────────────────────────────── */

.hero { padding: 3.2rem 0 0; text-align: center; }

.portrait-ring { position: relative; width: 168px; margin: 0 auto 1.9rem; }
.portrait-ring::before {
  content: ""; position: absolute; inset: -26px; border-radius: 50%;
  background: radial-gradient(circle, rgba(47,107,91,.13), transparent 68%);
}
/* Concentric rings — a ripple that has almost finished settling. */
.portrait-ring::after {
  content: ""; position: absolute; inset: -14px; border-radius: 50%;
  border: 1px solid var(--rule);
}
.portrait-ring img {
  position: relative; display: block;
  width: 168px; height: 168px; border-radius: 50%;
  object-fit: cover;
  border: 1px solid var(--rule);
  box-shadow: 0 2px 18px rgba(31,42,43,.08);
}

/* Kept: the monogram is still the favicon and the fallback if the
   portrait is ever missing. A face is illegible at 32px; शां is not. */
.portrait-ring .mark {
  position: relative; display: grid; place-items: center;
  width: 168px; height: 168px; border-radius: 50%;
  background: var(--paper-lift); border: 1px solid var(--rule);
  font-family: 'Tiro Devanagari Hindi', serif; font-size: 3.4rem;
  color: var(--calm); line-height: 1; padding-bottom: .1em;
}

.cta {
  display: inline-flex; align-items: center; gap: .6rem;
  background: var(--wa); color: #06281a;
  font-family: 'Inter', sans-serif; font-weight: 600; font-size: 1.02rem;
  padding: .92rem 1.7rem; border-radius: 999px; text-decoration: none;
  box-shadow: 0 2px 14px rgba(37,211,102,.28);
  transition: transform .18s ease, box-shadow .18s ease;
}
.cta:hover, .cta:focus-visible {
  color: #06281a; transform: translateY(-1px);
  box-shadow: 0 5px 20px rgba(37,211,102,.36);
}
.cta svg { width: 20px; height: 20px; fill: currentColor; }
.cta-center { text-align: center; margin-top: 2.2rem; }

.langs {
  font-size: .84rem; color: var(--ink-dim); margin-top: 1.5rem;
  letter-spacing: .02em;
}

/* ── Steps ────────────────────────────────────────────────── */

.steps { display: grid; gap: 1.6rem; grid-template-columns: 1fr; }
@media (min-width: 720px) { .steps { grid-template-columns: repeat(3, 1fr); gap: 2rem; } }
.step { position: relative; padding-top: 1.9rem; }
.step .n {
  position: absolute; top: 0; left: 0;
  font-family: 'Fraunces', serif; font-size: .82rem; letter-spacing: .12em;
  color: var(--calm); opacity: .85;
}
.step p { margin-bottom: 0; }

/* ── Pricing ──────────────────────────────────────────────── */

.rates { display: grid; gap: 0; border-top: 1px solid var(--rule); }
.rate {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 1.2rem; padding: 1.1rem 0; border-bottom: 1px solid var(--rule);
}
.rate .what { font-weight: 500; }
.rate .amt {
  font-family: 'Fraunces', serif; font-size: 1.5rem;
  color: var(--ink); white-space: nowrap;
}
.rate .amt.is-free { color: var(--calm); }

/* ── Voices ───────────────────────────────────────────────── */

.voices { display: grid; gap: 1.5rem; grid-template-columns: 1fr; }
@media (min-width: 760px) { .voices { grid-template-columns: repeat(3, 1fr); } }
.voice {
  background: var(--paper-lift); border: 1px solid var(--rule);
  border-radius: 12px; padding: 1.3rem 1.35rem;
}
.voice p { margin: 0 0 .8rem; font-size: .96rem; }
.voice .who { font-size: .84rem; color: var(--ink-dim); margin: 0; }

/* A visible, deliberately plain banner. It is here so that if this page
   ships before real quotes exist, no visitor is misled into reading these
   as genuine reviews. Delete it in the same edit that replaces them. */
.placeholder-note {
  background: #fff4e2; border: 1px dashed var(--clay); color: #7a3a18;
  border-radius: 10px; padding: .7rem 1rem; margin: 0 0 1.6rem;
  font-size: .86rem; line-height: 1.55;
}

/* ── Safety callout ───────────────────────────────────────── */

.callout {
  border-left: 3px solid var(--clay); background: rgba(184,86,47,.05);
  padding: 1rem 1.2rem; border-radius: 0 10px 10px 0; margin: 1.6rem 0 0;
}
.callout p { margin: 0; font-size: .94rem; max-width: none; }

/* ── Footer ───────────────────────────────────────────────── */

footer { margin-top: 4.6rem; padding-top: 2rem; border-top: 1px solid var(--rule); }
footer nav { display: flex; flex-wrap: wrap; gap: 1.1rem; margin-bottom: 1.3rem; }
footer nav a { font-size: .9rem; }
.entity { color: var(--ink-dim); }

/* ── Motion ───────────────────────────────────────────────── */

.rise { opacity: 0; transform: translateY(10px); animation: rise .8s ease forwards; }
.d1 { animation-delay: .05s; } .d2 { animation-delay: .16s; }
.d3 { animation-delay: .27s; } .d4 { animation-delay: .38s; }
.d5 { animation-delay: .49s; }
@keyframes rise { to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  .rise { animation: none; opacity: 1; transform: none; }
  * { transition: none !important; }
}

/* ── Long-form legal pages ────────────────────────────────────
   These markup classes come from the pages themselves (.legal, .back,
   .updated, .card, .price) and they had NO rules at all when this
   stylesheet replaced tara-astro's — so privacy/terms/refund/pay were
   rendering half-styled and hard against the left of a 60rem column,
   which is what the reported screenshot shows. Styled and centred here.
   `.doc` is kept as an alias in case a future page uses that name. */

.legal, .doc {
  max-width: 44rem;
  margin-left: auto; margin-right: auto;   /* the centring that was missing */
}
.legal h1, .doc h1 { font-size: clamp(1.8rem, 4.6vw, 2.5rem); }
.legal h2, .doc h2 { margin-top: 2.6rem; font-size: 1.32rem; }
.legal p, .legal li, .doc p, .doc li { max-width: none; }
.legal ul, .doc ul { padding-left: 1.2rem; }
.legal li, .doc li { margin-bottom: .5rem; }

/* "← Back", top of every legal page. */
.back {
  display: inline-block; margin: 2.2rem 0 1.6rem;
  font-size: .9rem; text-decoration: none; color: var(--ink-dim);
}
.back:hover { color: var(--calm); }

/* "Last updated …" */
.updated {
  font-size: .86rem; color: var(--ink-dim);
  margin: -0.4em 0 2rem;
}

/* The boxed price table on /pay. */
.card {
  background: var(--paper-lift); border: 1px solid var(--rule);
  border-radius: 12px; padding: .4rem 1.3rem; margin: 0 0 1.2rem;
}
table.price { width: 100%; border-collapse: collapse; }
table.price td { padding: .85rem 0; border-bottom: 1px solid var(--rule); }
table.price tr:last-child td { border-bottom: 0; }
table.price td:last-child {
  text-align: right; white-space: nowrap;
  font-family: 'Fraunces', serif; font-size: 1.25rem;
}
table.price td.free { color: var(--calm); }

/* The original-language line under each translated testimonial. */
.voice .original {
  color: var(--ink-dim); font-size: .9rem; font-style: italic;
  margin: 0 0 .85rem;
}