/*
 * Safe and Sound Protocol India — shared "storybook" design system.
 * Loaded on every page via: <link rel="stylesheet" href="/ssp.css"/>
 *
 * Plum-ink on cream, flat sticker-cards with hard offset shadows, four
 * Google fonts (Bowlby One SC / Fredoka / Atkinson Hyperlegible / Caveat).
 * Makes sspindia a visual sibling of hq / portal / sangparth.com.
 *
 * DISCIPLINE RULE (YMYL): the playful fonts are warmth GARNISH only —
 * page titles, brand, big numbers, personal notes, empty states. Everything
 * body-level and data-dense stays in Atkinson Hyperlegible at >=15px so the
 * purchase page reads warm but credible, never childish.
 *
 * Per page: override --accent / --accent-soft / --accent-deep in a tiny
 * inline <style> to keep each subpage's signature hue. Default = plum.
 */

:root{
  /* Ink + paper */
  --ink:#2a2622;            /* warm charcoal — ALL text + ALL outlines, never #000 */
  --ink-soft:#5c5148;
  --paper:#fbf6ee;          /* cream — primary page background */
  --paper-warm:#f5ebde;     /* warmer cream — canvas zones (rails, gate, safety) */
  --white:#ffffff;          /* reserved for writing/input zones */

  /* Storybook accents + soft washes + text-safe deeps */
  --teal:#255a62;        --teal-soft:#dcebec;        --teal-deep:#17434a;   /* sangparth brand teal — site anchor */
  --gold:#d4a72c;        --gold-soft:#f5e3a0;        --gold-deep:#b8901f;   /* sangparth gold (the sprout) */
  --coral:#e0917d;       --coral-soft:#fae6e0;       --coral-deep:#b85c47;  /* sangparth coral */
  --terracotta:#c47852;  --terracotta-soft:#f6e7dd;  --terracotta-deep:#9a5636;
  --sage:#6b8e6b;        --sage-soft:#e6eee4;        --sage-deep:#496b49;
  --plum:#6b4d7a;        --plum-soft:#ede4f1;        --plum-deep:#4a3a5e;   /* retired as the default anchor; still available per-page */

  --line:rgba(42,38,34,0.14);
  --radius:10px;
  --shadow:2px 2px 0 var(--ink);      /* hard offset, zero blur */

  /* Per-page accent (default plum) */
  --accent:var(--teal);
  --accent-soft:var(--teal-soft);
  --accent-deep:var(--teal-deep);

  /* Type roles */
  --font-display:'Bowlby One SC','Atkinson Hyperlegible',sans-serif;
  --font-head:'Fredoka','Atkinson Hyperlegible',sans-serif;
  --font-label:'Fredoka','Atkinson Hyperlegible',sans-serif;
  --font-body:'Atkinson Hyperlegible','Inter',-apple-system,BlinkMacSystemFont,sans-serif;
  --font-hand:'Caveat','Atkinson Hyperlegible',cursive;
}

/* Dark palette — OPT-IN ONLY (never auto-triggers on device dark mode).
   The warm cream light look is the signature and must render identically on
   mobile and desktop, so we do NOT use prefers-color-scheme. This block only
   applies if something explicitly stamps data-theme="dark" on <html> (nothing
   does today). Keeps the dark palette available for a future manual toggle. */
:root[data-theme="dark"]{
  --ink:#e8e0d0; --ink-soft:#b3a595;
  --paper:#14110f; --paper-warm:#1e1a16; --white:#1c1815;
  --teal:#6fb3ba;        --teal-soft:#123033;        --teal-deep:#8fccd2;
  --gold:#e0bd4a;        --gold-soft:#312607;        --gold-deep:#e6c85a;
  --coral:#e5a08e;       --coral-soft:#331f19;        --coral-deep:#eab3a4;
  --terracotta:#d99873;  --terracotta-soft:#31201a;  --terracotta-deep:#e2a985;
  --sage:#93b393;        --sage-soft:#1d2a1d;         --sage-deep:#a8c4a8;
  --plum:#b79ac8;        --plum-soft:#271f3a;        --plum-deep:#cbb6d9;
  --line:rgba(232,224,208,0.16);
}

*{box-sizing:border-box;}

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}

/* Faint paper-grain warmth behind everything */
body::before{
  content:"";
  position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(rgba(45,31,61,0.035) 1px, transparent 1.4px);
  background-size:22px 22px;
}

h1,h2,h3,h4{margin:0 0 0.6em;line-height:1.18;}
h1{font-family:var(--font-display);font-weight:400;letter-spacing:0.01em;}
h2{font-family:var(--font-display);font-weight:400;letter-spacing:0.01em;}
h3{font-family:var(--font-head);font-weight:600;}
p{margin:0 0 1em;}
a{color:inherit;}

/* Book-like centered column. Pages whose <div class="wrap"> is a direct body
   child (about / will-it-help / success-stories) get the vertical padding. */
.wrap{max-width:760px;margin:0 auto;padding:0 24px;}
body > .wrap{padding-top:40px;padding-bottom:100px;}

/* ---------- Top bar + nav ---------- */
/* Traditional solid plum header band on topbar pages. The utility pages
   (about / will-it-help / success-stories) carry a bare .topnav on cream, so
   the plum + cream-text overrides are scoped to .topbar only. */
.topbar{padding:16px 0;background:var(--teal);border-bottom:1.5px solid var(--ink);}
:root[data-theme="dark"] .topbar{background:var(--paper-warm);}
.topbar .wrap{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px 18px;}
/* Wordmark in Atkinson Hyperlegible bold — clean, credible, evidence-based register
   (Fredoka read childish; Bowlby is reserved for big hero titles only) */
.brand{font-family:var(--font-body);font-weight:700;font-size:clamp(1.12rem,2.7vw,1.4rem);letter-spacing:0.005em;}
.brand a{text-decoration:none;color:inherit;}
.topbar .brand{color:var(--paper);}
.topbar-note{font-family:var(--font-label);font-size:13px;color:var(--ink-soft);}
.topbar .topbar-note{color:var(--paper);opacity:0.85;}
.topnav{display:flex;flex-wrap:wrap;gap:6px 16px;}
.topnav a{font-family:var(--font-label);font-size:13.5px;font-weight:500;color:var(--ink-soft);text-decoration:none;}
.topnav a:hover{color:var(--ink);text-decoration:underline;}
.topnav a.active{color:var(--accent);font-weight:600;}
.topbar .topnav a{color:var(--paper);opacity:0.88;}
.topbar .topnav a:hover{color:var(--paper);opacity:1;text-decoration:underline;}
.topbar .topnav a.active{color:var(--gold-soft);opacity:1;font-weight:600;}

/* ---------- Hero ---------- */
.hero{padding:60px 0 40px;}
.eyebrow{
  display:inline-block;
  font-family:var(--font-label);font-size:0.68rem;font-weight:600;
  text-transform:uppercase;letter-spacing:1.3px;
  background:var(--accent-soft);color:var(--accent-deep);
  border:1.5px solid var(--ink);border-radius:6px;
  padding:5px 12px;margin-bottom:20px;
  box-shadow:1.5px 1.5px 0 var(--ink);
  transform:rotate(-1.2deg);
}
.hero h1{
  font-size:clamp(1.55rem,4.4vw,2.15rem);max-width:16ch;line-height:1.16;
  /* flat plum-ink — cleanest read on a YMYL page */
}
.hero .lede{font-size:clamp(1.02rem,2.4vw,1.2rem);color:var(--ink-soft);max-width:54ch;margin-bottom:24px;}
.founder-note,.doula-note{
  font-family:var(--font-hand);font-size:1.2rem;line-height:1.4;
  color:var(--accent-deep);max-width:52ch;margin:-4px 0 24px;
}
.price-note{font-size:0.9rem;color:var(--ink-soft);margin-top:12px;}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--font-head);font-weight:600;font-size:1.02rem;
  background:var(--accent);color:var(--paper);
  border:1.5px solid var(--ink);border-radius:8px;
  padding:14px 26px;text-decoration:none;cursor:pointer;
  box-shadow:3px 3px 0 var(--ink);
  transition:transform .12s ease, box-shadow .12s ease;
}
.btn:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--ink);}
.btn.dark{background:var(--ink);color:var(--paper);}
.btn.ghost{background:transparent;color:var(--ink);box-shadow:2px 2px 0 var(--ink);}
.btn.ghost:hover{background:var(--accent-soft);}

/* ---------- Brand logo (inherited from sangparth: the gold sprout mark) ---------- */
.brand a{display:inline-flex;align-items:center;gap:10px;}
.logo-mark{flex:0 0 auto;display:block;height:34px;width:34px;}
.logo-word{display:flex;flex-direction:column;line-height:1;}
.logo-word b{font-family:var(--font-body);font-weight:700;font-size:1.05rem;letter-spacing:.15px;}
.logo-word > span{font-family:var(--font-body);font-weight:700;font-size:0.58rem;letter-spacing:1.3px;text-transform:uppercase;color:currentColor;opacity:0.82;margin-top:3px;}

/* ---------- Hero price + dual CTA ---------- */
.hero-price{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 14px;margin:4px 0 18px;}
.hero-amount{font-family:var(--font-display);font-weight:400;font-size:clamp(1.5rem,4.6vw,2rem);line-height:1;}
.hero-amount span{font-family:var(--font-body);font-size:0.9rem;font-weight:400;color:var(--ink-soft);}
.hero-price .approx-price{font-family:var(--font-body);font-size:0.92rem;font-weight:600;color:var(--accent-deep);}
.hero-cta{display:flex;flex-wrap:wrap;gap:12px;align-items:center;}

/* ---------- Homepage interactive word cloud (eye-magnet, expanded) ---------- */
.cloud-block{background:var(--accent-soft);border-top:1.5px solid var(--ink);border-bottom:1.5px solid var(--ink);}
.cloud-block h2{text-align:center;}
.cloud-block .lede-sm{text-align:center;max-width:52ch;margin:8px auto 20px;}
.cloud-block input[type=text]{max-width:420px;margin:0 auto 24px;display:block;background:var(--white);}
.cloud-block .cloud{border-bottom:none;margin-bottom:6px;padding:6px 4px 14px;}
.cloud-note{text-align:center;font-size:0.9rem;color:var(--ink-soft);margin:2px 0 0;}

/* ---------- Source badges (trust: own clients vs external) ---------- */
.tag{display:inline-block;font-family:var(--font-label);font-weight:600;font-size:0.64rem;letter-spacing:.5px;text-transform:uppercase;padding:3px 9px;border:1.5px solid var(--ink);border-radius:6px;box-shadow:1.5px 1.5px 0 var(--ink);margin-bottom:10px;}
.tag-own{background:var(--gold);color:var(--ink);}      /* Sangheetha's own clients — the house mark */
.tag-pub{background:var(--teal);color:var(--paper);}    /* external, published SSP cases */
.attrib{font-size:0.78rem;color:var(--ink-soft);margin:12px 0 0;font-style:italic;}

/* ---------- Screening modal (Get access -> straight to Q1, no extra click) ---------- */
.screen-modal[hidden]{display:none;}
.screen-modal{position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center;padding:20px;}
.screen-modal-backdrop{position:absolute;inset:0;background:rgba(42,38,34,0.58);}
.screen-modal-card{position:relative;background:var(--paper);border:1.5px solid var(--ink);border-radius:14px;box-shadow:4px 4px 0 var(--ink);width:100%;max-width:440px;padding:30px 24px 24px;max-height:90vh;overflow-y:auto;}
.screen-modal-x{position:absolute;top:8px;right:12px;background:none;border:none;font-size:26px;line-height:1;cursor:pointer;color:var(--ink-soft);padding:4px 8px;}
.screen-modal-x:hover{color:var(--ink);}
.screen-kicker{font-family:var(--font-head);font-weight:700;font-size:1.12rem;margin:0 0 4px;color:var(--ink);}
.screen-sub{font-size:0.9rem;color:var(--ink-soft);margin:0 0 18px;}

/* ---------- Consent tick on the screening outcome (SSP + Naadham) ---------- */
.gate-consent{display:flex;gap:10px;align-items:flex-start;font-size:0.84rem;color:var(--ink-soft);line-height:1.45;margin:14px 0 16px;text-align:left;}
.gate-consent input{margin-top:3px;flex:0 0 auto;width:16px;height:16px;accent-color:var(--accent);}
.gate-consent a{color:var(--ink);font-weight:600;text-decoration:underline;}
/* Screening lead capture. Sits between the outcome copy and the consent tick on
   the CLEAR and COMPLEX cards only - never on the acute/crisis card. */
.gate-fields{text-align:left;margin:16px 0 4px;}
.gate-label{display:block;font-family:var(--font-label);font-size:0.74rem;font-weight:600;text-transform:uppercase;letter-spacing:0.8px;color:var(--ink-soft);margin:10px 0 5px;}
/* Scoped to .gate-fields on purpose: the generic `input[type=text]` rule above
   is specificity 0,1,1 and would otherwise win, dragging in its 28px bottom
   margin. That margin made the phone row 78px tall and stretched the tel input
   to twice the height of the dial box beside it. */
.gate-fields .gate-input{width:100%;padding:11px 13px;margin:0;border:1.5px solid var(--ink);border-radius:8px;background:var(--white);color:var(--ink);font-size:16px;font-family:var(--font-body);box-shadow:none;}
.gate-fields .gate-input:focus{outline:2px solid var(--accent);outline-offset:1px;border-color:var(--ink);}
.gate-phone-row{display:flex;gap:8px;align-items:center;}
.gate-phone-row .gate-dial{flex:0 0 72px;width:72px;text-align:center;}
.gate-phone-row input[type=tel]{flex:1 1 auto;min-width:0;}
.gate-why{font-size:0.78rem;color:var(--ink-soft);line-height:1.45;margin:9px 0 0;}
/* Honeypot: off-screen rather than display:none, which some bots skip. */
.gate-hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0;}
.gate-outcome .btn[disabled]{opacity:0.45;cursor:not-allowed;box-shadow:2px 2px 0 var(--ink);}

/* ---------- Section blocks ---------- */
.block{padding:34px 0;border-top:1.5px solid var(--line);}
.block h2{font-size:clamp(1.3rem,3.6vw,1.7rem);}
.block .lede-sm{font-size:1.05rem;color:var(--ink-soft);max-width:56ch;}
.scene{font-size:1.05rem;}
.explain p{font-size:1.05rem;}

/* ---------- Callout ---------- */
.callout{
  background:var(--accent-soft);
  border:1.5px solid var(--ink);border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:22px 26px;margin:20px 0;
}
.callout p{color:var(--accent-deep);font-size:1.05rem;font-weight:500;margin:0;}

/* ---------- Testimonial ---------- */
.testimonial{
  background:var(--paper);
  border:1.5px solid var(--ink);border-left:6px solid var(--accent);
  border-radius:var(--radius);box-shadow:var(--shadow);
  padding:24px 26px;margin:22px 0;
}
.testimonial p{font-size:1.08rem;font-style:italic;line-height:1.6;margin:0 0 12px;}
.testimonial cite{
  font-family:var(--font-label);font-style:normal;font-weight:600;
  font-size:0.85rem;letter-spacing:0.3px;color:var(--ink-soft);display:block;
}
.testimonial .caveat{font-family:var(--font-hand);font-style:normal;font-size:1.05rem;color:var(--ink-soft);margin-top:12px;}

/* ---------- Steps ---------- */
.steps{list-style:none;padding:0;margin:0;counter-reset:step;}
.steps li{
  counter-increment:step;display:flex;gap:16px;align-items:flex-start;
  padding:16px 0;border-bottom:1.5px solid var(--line);font-size:1rem;
}
.steps li:last-child{border-bottom:none;}
.steps li::before{
  content:counter(step);flex-shrink:0;width:32px;height:32px;
  background:var(--accent);color:var(--paper);
  border:1.5px solid var(--ink);border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--font-head);font-weight:700;font-size:0.9rem;
}

/* ---------- Price card (hero sticker) ---------- */
.price-card{
  background:var(--paper);
  border:1.5px solid var(--ink);border-radius:12px;
  box-shadow:4px 4px 0 var(--ink);
  padding:30px 28px;text-align:center;margin:24px 0;
}
.price-card .badge{
  display:inline-block;font-family:var(--font-label);
  font-size:0.68rem;font-weight:600;text-transform:uppercase;letter-spacing:1.1px;
  background:var(--accent-soft);color:var(--accent-deep);
  border:1.5px solid var(--ink);border-radius:6px;
  box-shadow:1.5px 1.5px 0 var(--ink);
  padding:5px 12px;margin-bottom:16px;transform:rotate(-1deg);
}
.price-card .amount{font-family:var(--font-display);font-weight:400;font-size:clamp(2.2rem,7vw,2.9rem);line-height:1.1;}
.price-card .amount span{font-family:var(--font-body);font-size:1rem;font-weight:400;color:var(--ink-soft);}
.price-card .sub{font-size:0.9rem;color:var(--ink-soft);margin:8px 0 22px;}

/* ---------- Included checklist ---------- */
.included{list-style:none;padding:0;margin:24px auto;text-align:left;max-width:420px;}
.included li{padding:8px 0;font-size:0.95rem;display:flex;gap:10px;}
.included li::before{content:"\2713";color:var(--accent-deep);font-weight:700;}

/* ---------- Safety / not-for ---------- */
.safety{
  background:var(--paper-warm);
  border:1.5px solid var(--ink);border-left:5px solid var(--accent);
  border-radius:var(--radius);box-shadow:var(--shadow);
  padding:22px 26px;font-size:0.95rem;color:var(--ink-soft);
}
.safety strong{color:var(--ink);}
.not-for{list-style:none;padding:0;margin:14px 0 0;}
.not-for li{padding:6px 0 6px 20px;position:relative;font-size:0.95rem;color:var(--ink-soft);}
.not-for li::before{content:"\2014";position:absolute;left:0;color:var(--accent-deep);}
.future-note{
  background:var(--accent-soft);
  border:1.5px solid var(--ink);border-radius:var(--radius);box-shadow:var(--shadow);
  padding:20px 24px;margin-top:20px;font-size:0.95rem;color:var(--accent-deep);
}

/* ---------- Handoff (dark card) ---------- */
.handoff{
  background:var(--ink);color:var(--paper);
  border:1.5px solid var(--ink);border-radius:var(--radius);
  box-shadow:4px 4px 0 var(--accent);
  padding:30px 28px;
}
.handoff h3{color:var(--paper);font-size:1.25rem;}
.handoff p{color:var(--paper);opacity:0.88;font-size:1rem;}
.handoff a{color:var(--paper);text-decoration:underline;font-weight:700;}

/* ---------- Footer ---------- */
footer{padding:32px 0 120px;font-size:0.82rem;color:var(--ink-soft);border-top:1.5px solid var(--line);}
footer a{font-weight:600;}

/* ---------- Sticky buy bar ---------- */
.sticky-cta{
  position:sticky;bottom:0;z-index:10;
  background:color-mix(in srgb, var(--paper-warm) 94%, transparent);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  border-top:1.5px solid var(--ink);
  padding:12px 0 calc(12px + env(safe-area-inset-bottom));
}
.sticky-cta .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;}
.sticky-cta .amount{font-family:var(--font-head);font-weight:600;font-size:1rem;}
.sticky-cta .amount span{font-family:var(--font-body);font-weight:400;color:var(--ink-soft);font-size:0.8rem;display:block;}
.sticky-cta .btn{box-shadow:2px 2px 0 var(--ink);}

/* ---------- Video cards ---------- */
.vgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;}
.vcard-sm{
  background:var(--paper);
  border:1.5px solid var(--ink);border-left:4px solid var(--accent);
  border-radius:var(--radius);box-shadow:var(--shadow);
  padding:14px 14px 16px;
}
.vcard-sm h4{font-family:var(--font-body);font-weight:700;font-size:0.86rem;margin:0 0 10px;line-height:1.35;}
.vwrap-sm{position:relative;width:100%;padding-bottom:56.25%;border-radius:8px;overflow:hidden;background:#000;}
.vwrap-sm iframe{position:absolute;top:0;left:0;width:100%;height:100%;border:none;}

/* ---------- Screening gate ---------- */
.gate{margin-top:18px;}
.gate-intro-btn{width:100%;text-align:center;justify-content:center;}
.gate-back{background:none;border:none;text-decoration:underline;color:var(--ink-soft);font-size:0.8rem;cursor:pointer;padding:0;margin-top:14px;}
.gate-card{
  background:var(--paper-warm);
  border:1.5px solid var(--ink);border-radius:var(--radius);
  box-shadow:var(--shadow);padding:22px 22px 20px;margin-top:4px;
}
.gate-progress{
  font-family:var(--font-label);font-size:0.68rem;font-weight:600;
  text-transform:uppercase;letter-spacing:1.2px;color:var(--ink-soft);margin-bottom:10px;
}
.gate-q{font-size:1.05rem;font-weight:700;margin:0 0 16px;line-height:1.4;}
.gate-btns{display:flex;gap:10px;}
.gate-btn{
  flex:1;padding:13px;border-radius:8px;border:1.5px solid var(--ink);
  background:var(--white);color:var(--ink);
  font-family:var(--font-head);font-weight:600;font-size:0.95rem;cursor:pointer;
  box-shadow:2px 2px 0 var(--ink);transition:transform .12s ease, box-shadow .12s ease;
}
.gate-btn:hover{background:var(--ink);color:var(--paper);}
.gate-btn:active{transform:translate(2px,2px);box-shadow:0 0 0 var(--ink);}
.gate-outcome h4{font-family:var(--font-head);font-weight:700;font-size:1.15rem;margin:0 0 10px;}
.gate-outcome p{font-size:0.95rem;color:var(--ink-soft);margin:0 0 12px;line-height:1.6;}
.gate-outcome .btn{margin-top:6px;}
.gate-acute{border-left:5px solid #b23a3a;padding-left:16px;}

/* ---------- FAQ ---------- */
.faq-item{border-bottom:1.5px solid var(--line);padding:16px 0;}
.faq-item:last-child{border-bottom:none;}
.faq-item h4{font-family:var(--font-body);font-weight:700;font-size:1rem;margin:0 0 8px;}
.faq-item p{font-size:0.95rem;color:var(--ink-soft);margin:0;}

/* ---------- Homepage: doors / trust / third-way ---------- */
.doors{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:6px;}
.door{
  display:block;background:var(--paper);
  border:1.5px solid var(--ink);border-radius:var(--radius);box-shadow:var(--shadow);
  padding:20px 22px;text-decoration:none;
  transition:transform .12s ease, box-shadow .12s ease;
}
.door:hover{transform:translate(-1px,-1px);box-shadow:3px 3px 0 var(--ink);}
.door h3{font-family:var(--font-head);font-weight:700;font-size:1.1rem;margin:0 0 6px;}
.door p{font-size:0.92rem;color:var(--ink-soft);margin:0;}
.door .go{display:inline-block;margin-top:12px;font-family:var(--font-label);font-weight:600;font-size:0.85rem;color:var(--accent-deep);}

.trust .lede-sm{margin-bottom:20px;}
.trust-head{display:flex;gap:22px;align-items:center;margin-bottom:22px;}
.trust-photo{
  width:112px;height:112px;border-radius:50%;object-fit:cover;object-position:center top;
  flex-shrink:0;border:1.5px solid var(--ink);box-shadow:3px 3px 0 var(--accent);
}
.trust-head h2{margin:0 0 6px;}
.trust-head .lede-sm{margin:0;}
.trust-row{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(3,1fr);gap:12px;}
.trust-row li{
  background:var(--paper);border:1.5px solid var(--ink);border-radius:var(--radius);
  box-shadow:1.5px 1.5px 0 var(--ink);padding:14px 16px;display:flex;flex-direction:column;gap:3px;
}
.trust-row .t-k{font-family:var(--font-body);font-weight:700;font-size:0.98rem;line-height:1.25;}
.trust-row .t-v{font-family:var(--font-label);font-size:0.78rem;color:var(--ink-soft);letter-spacing:0.2px;}
.trust-note{margin-top:16px;font-size:0.9rem;}
.trust-note a{font-weight:700;text-decoration:underline;}

.third{
  background:var(--plum-soft);
  border:1.5px solid var(--ink);border-radius:var(--radius);box-shadow:var(--shadow);
  padding:26px 30px;
}
.third h2{color:var(--plum-deep);}
.third p{font-size:1.05rem;margin:0;}

/* ---------- About page ---------- */
.avatar-photo{
  width:200px;border-radius:var(--radius);margin-bottom:24px;display:block;object-fit:cover;
  border:1.5px solid var(--ink);box-shadow:4px 4px 0 var(--accent);
}
.credentials{list-style:none;padding:0;margin:24px 0 32px;display:flex;flex-direction:column;gap:8px;}
.credentials li{font-size:0.95rem;color:var(--ink-soft);padding-left:20px;position:relative;}
.credentials li::before{content:"\2014";position:absolute;left:0;color:var(--accent-deep);}
.links{display:flex;flex-direction:column;gap:10px;margin-top:8px;}
.links a{font-weight:700;text-decoration:underline;font-size:0.95rem;}
.contact-note{margin-top:48px;padding-top:20px;border-top:1.5px solid var(--line);font-size:0.86rem;color:var(--ink-soft);}
.contact-note a{font-weight:600;color:var(--ink);}

/* ---------- ND-families boundary card ---------- */
.boundary{
  background:var(--paper);
  border:1.5px solid var(--ink);border-radius:var(--radius);box-shadow:3px 3px 0 var(--accent);
  padding:24px 28px;margin:20px 0;
}
.boundary h3{font-family:var(--font-head);font-weight:700;font-size:1.2rem;margin-bottom:8px;}
.boundary p{font-size:1rem;color:var(--ink-soft);margin-bottom:0;}

/* ---------- Naadham features ---------- */
.feature-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:8px;}
.feature{
  background:var(--paper);
  border:1.5px solid var(--ink);border-left:4px solid var(--accent);
  border-radius:var(--radius);box-shadow:var(--shadow);
  padding:18px 20px;font-size:0.92rem;color:var(--ink-soft);
}

/* ---------- Birth drivers ---------- */
.driver-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
.driver-card{
  background:var(--paper);
  border:1.5px solid var(--ink);border-left:4px solid var(--accent);
  border-radius:var(--radius);box-shadow:var(--shadow);
  padding:22px 22px 20px;
}
.driver-card h3{font-family:var(--font-body);font-weight:700;font-size:0.98rem;margin:0 0 8px;line-height:1.4;}
/* An odd trailing tile spans both columns instead of stranding in a half row.
   No-op on even grids, which is every money page today. */
.driver-card:last-child:nth-child(odd){grid-column:1 / -1;}
.driver-card p{font-size:0.92rem;color:var(--ink-soft);margin:0;}

/* ---------- Talk-to-us form (white writing zone) ---------- */
.form-card{
  background:var(--paper);
  border:1.5px solid var(--ink);border-radius:var(--radius);box-shadow:4px 4px 0 var(--ink);
  padding:28px 26px;
}
.form-card label{
  display:block;font-family:var(--font-label);font-size:0.72rem;font-weight:600;
  text-transform:uppercase;letter-spacing:0.8px;color:var(--ink-soft);margin:16px 0 6px;
}
.form-card input,.form-card textarea{
  width:100%;padding:13px 15px;border:1.5px solid var(--ink);border-radius:8px;
  background:var(--white);color:var(--ink);font-size:16px;font-family:var(--font-body);
}
.form-card input:focus,.form-card textarea:focus{outline:2px solid var(--accent);outline-offset:1px;}
.form-card textarea{min-height:140px;resize:vertical;}
.form-card .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;}
.form-card button{
  margin-top:22px;width:100%;background:var(--accent);color:var(--paper);
  font-family:var(--font-head);font-weight:600;font-size:1.05rem;
  padding:15px 28px;border-radius:8px;border:1.5px solid var(--ink);cursor:pointer;
  box-shadow:3px 3px 0 var(--ink);
}
.form-card button:disabled{opacity:.55;cursor:default;box-shadow:none;}
.form-note{margin-top:16px;font-size:0.84rem;color:var(--ink-soft);}
.form-msg{margin-top:16px;padding:13px 15px;border-radius:8px;font-size:0.95rem;display:none;border:1.5px solid var(--ink);}
.form-msg.ok{display:block;background:var(--sage-soft);color:var(--sage-deep);}
.form-msg.bad{display:block;background:var(--terracotta-soft);color:var(--terracotta-deep);}
/* Shown in place of the form once a question has been sent. `hidden` is
   asserted here because .form-card would otherwise still paint its border and
   shadow, and a stray display rule elsewhere must not resurrect either node. */
.form-card[hidden],.thanks-card[hidden]{display:none;}
.thanks-card{background:var(--sage-soft);}
.thanks-card h2{margin:0 0 10px;font-size:1.45rem;line-height:1.25;color:var(--sage-deep);}
.thanks-card p{margin:0;color:var(--ink);}
.thanks-card:focus{outline:2px solid var(--accent);outline-offset:3px;}
.thanks-card:focus:not(:focus-visible){outline:none;}
.alt{margin-top:26px;font-size:0.95rem;color:var(--ink-soft);}
.alt a{font-weight:700;text-decoration:underline;}

/* ---------- will-it-help: search + word cloud + result cards ---------- */
input[type=text]{
  width:100%;font-family:var(--font-body);font-size:16px;padding:14px 18px;
  border:1.5px solid var(--ink);border-radius:8px;outline:none;margin-bottom:28px;
  background:var(--white);color:var(--ink);box-shadow:2px 2px 0 var(--ink);
}
input[type=text]:focus{border-color:var(--ink);outline:2px solid var(--accent);outline-offset:1px;}
.lede{font-size:1.05rem;color:var(--ink-soft);max-width:56ch;margin-bottom:8px;}
.lede-sub{font-size:0.9rem;color:var(--ink-soft);opacity:0.85;max-width:56ch;margin-bottom:24px;}
.lede-sub2{font-size:0.86rem;color:var(--ink-soft);opacity:0.8;max-width:56ch;margin:-14px 0 24px;}
.cloud{display:flex;flex-wrap:wrap;gap:10px 14px;align-items:center;justify-content:center;padding:12px 8px 34px;border-bottom:1.5px solid var(--line);margin-bottom:26px;}
.word{
  cursor:pointer;background:var(--paper);color:var(--ink);
  border:1.5px solid var(--ink);border-radius:8px;
  font-family:var(--font-head);font-weight:500;padding:5px 10px;line-height:1.3;
  box-shadow:1.5px 1.5px 0 var(--ink);
  transition:transform .15s ease, background .15s ease;
}
.word:hover{transform:scale(1.06);}
.word.active{background:var(--ink) !important;color:var(--paper) !important;}
.word.w1{font-size:0.92rem;}
.word.w2{font-size:1.15rem;}
.word.w3{font-size:1.5rem;}
.word:nth-child(odd){transform:rotate(-1.5deg);}
.word:nth-child(even){transform:rotate(1.5deg);}
.word.active:nth-child(odd){transform:rotate(-1.5deg) scale(1.06);}
.word.active:nth-child(even){transform:rotate(1.5deg) scale(1.06);}
.section-label{
  font-family:var(--font-label);font-size:0.72rem;font-weight:600;
  text-transform:uppercase;letter-spacing:1.1px;color:var(--ink-soft);margin:28px 0 12px;
}
.section-label:first-child{margin-top:0;}
.results{display:flex;flex-direction:column;gap:16px;}
/* "Is this for me?" - our own /blog/ explainers, rendered last in the results
   panel so owned content sits in front of the Unyte citation (PRD 29 leak set). */
.blist{display:flex;flex-direction:column;gap:10px;}
.bcard{
  display:block;background:var(--paper);
  border:1.5px solid var(--line);border-left:6px solid var(--ink);
  border-radius:var(--radius);box-shadow:1.5px 1.5px 0 var(--line);
  padding:14px 18px;text-decoration:none;color:var(--ink);
  transition:box-shadow .15s ease;
}
.bcard:hover{box-shadow:2.5px 2.5px 0 var(--ink);}
.bcard h3{font-family:var(--font-body);font-weight:700;font-size:0.98rem;margin:0 0 4px;}
.bcard span{font-size:0.85rem;color:var(--ink-soft);line-height:1.45;display:block;}
.vcard{
  background:var(--paper);
  border:1.5px solid var(--ink);border-left:6px solid var(--accent);
  border-radius:var(--radius);box-shadow:var(--shadow);padding:20px 20px 22px;
}
.vcard h3{font-family:var(--font-body);font-weight:700;font-size:1rem;margin:0 0 12px;}
.vwrap{position:relative;width:100%;padding-bottom:56.25%;border-radius:8px;overflow:hidden;background:#000;}
.vwrap iframe{position:absolute;top:0;left:0;width:100%;height:100%;border:none;}
.card{
  background:var(--paper);
  border:1.5px solid var(--line);border-radius:var(--radius);box-shadow:1.5px 1.5px 0 var(--line);
  padding:20px 22px;
}
.level{
  display:inline-block;font-family:var(--font-label);font-size:0.68rem;font-weight:600;
  text-transform:uppercase;letter-spacing:0.8px;padding:4px 10px;border-radius:6px;margin-bottom:10px;
  background:var(--paper-warm);color:var(--ink-soft);border:1.5px solid var(--ink);
}
.card h3{font-family:var(--font-body);font-weight:700;font-size:1rem;margin:0 0 12px;}
.detail-grid{display:flex;flex-direction:column;gap:8px;margin-bottom:14px;}
.detail-row{font-size:0.9rem;color:var(--ink);}
.detail-row b{font-weight:700;margin-right:4px;}
.detail-row span{color:var(--ink-soft);}
.card a,.vcard a{font-size:0.86rem;font-weight:700;color:var(--ink);text-decoration:underline;}
/* Teal-card CTA: the payoff of a published-case card is our own screening, not an
   outbound link to Unyte. The case citation is demoted to .attrib below. */
.card a.card-cta{display:inline-block;margin:14px 0 0;font-family:var(--font-head);font-weight:700;font-size:0.92rem;color:var(--paper);background:var(--accent);border:1.5px solid var(--ink);border-radius:8px;padding:10px 16px;text-decoration:none;box-shadow:2px 2px 0 var(--ink);}
.card a.card-cta:hover{background:var(--accent-deep);}
/* Citation link stays small and muted — attribution, not a call to action. */
.attrib a{font-size:inherit;font-weight:600;color:var(--ink-soft);text-decoration:underline;}
.empty{font-family:var(--font-hand);color:var(--ink-soft);font-size:1.25rem;padding:30px 0;text-align:center;}
.faq-nudge{font-size:0.86rem;color:var(--ink-soft);text-align:center;margin-top:30px;padding-top:20px;border-top:1.5px solid var(--line);}
.faq-nudge a{color:var(--ink);font-weight:600;}

/* ---------- success-stories grid + cta ---------- */
.grid{display:flex;flex-direction:column;gap:22px;}
.cta-block{margin-top:44px;padding-top:28px;border-top:1.5px solid var(--line);text-align:center;}
.cta-block a{
  display:inline-block;background:var(--ink);color:var(--paper);
  font-family:var(--font-head);font-weight:600;font-size:0.95rem;
  padding:14px 26px;border-radius:8px;text-decoration:none;margin-top:6px;
  border:1.5px solid var(--ink);box-shadow:3px 3px 0 var(--accent);
}

/* ---------- Responsive ---------- */
@media (max-width:700px){
  .vgrid{grid-template-columns:1fr;}
}
@media (max-width:600px){
  .doors{grid-template-columns:1fr;}
  .trust-row{grid-template-columns:1fr 1fr;}
  .feature-grid,.driver-grid{grid-template-columns:1fr;}
  .trust-head{gap:16px;}
  .trust-photo{width:84px;height:84px;}
  .sticky-cta .btn{padding:12px 18px;font-size:0.95rem;}
}
