/* ==========================================================================
   khakta.com — the multi-page layer.
   Extends base.css and site.css; never redefines what they already own.
   Everything here is built on the shared custom properties, so a single
   palette change in base.css re-skins all of it.
   ========================================================================== */

/* A manual "stop animations" switch, separate from the phone-level setting,
   because plenty of people want it on one site and not another. */
html.stillness *,
html.stillness *::before,
html.stillness *::after {
  animation: none !important;
  transition: none !important;
  scroll-behavior: auto !important;
}

/* ---------- page furniture ---------- */

.section--tint { background: var(--surface-2); }

.section--head {
  padding-block: clamp(2.75rem, 7vw, 5rem) clamp(1.5rem, 4vw, 2.5rem);
  background:
    radial-gradient(60rem 24rem at 12% -20%, color-mix(in srgb, var(--brand) 11%, transparent), transparent 70%),
    var(--bg);
}

.page-h1 {
  font-size: var(--step-5);
  margin-top: var(--sp-3);
  max-width: 18ch;
}
.page-h1 .accent { color: var(--brand); }

.wrap--prose { max-width: 44rem; }

.crumb { font-size: var(--step--1); color: var(--ink-3); margin-bottom: var(--sp-4); }
.crumb a { color: var(--ink-2); }
.crumb span { margin-inline: 0.4em; }

.prose > * + * { margin-top: var(--sp-5); }
.prose h2 {
  font-size: var(--step-2);
  margin-top: var(--sp-7);
  padding-top: var(--sp-5);
  border-top: 1px solid var(--line);
}
.prose p { color: var(--ink-2); }
.prose p b { color: var(--ink); }

.card--deep { background: var(--surface-2); border-color: var(--line-strong); }

.cta-row {
  display: flex;
  gap: var(--sp-3);
  flex-wrap: wrap;
  justify-content: center;
  margin-top: var(--sp-5);
}
.cta-row__note {
  text-align: center;
  margin-top: var(--sp-4);
  max-width: 56ch;
  margin-inline: auto;
}

.feature--link { text-decoration: none; display: block; }
.feature--link:hover { border-color: color-mix(in srgb, var(--brand) 45%, transparent); }

.checklist--warn li::before { content: "!"; background: color-mix(in srgb, #C9781E 18%, transparent); color: #C9781E; }

/* ---------- the loop (home) ---------- */

.loop {
  display: grid;
  gap: var(--sp-4);
  margin-top: var(--sp-6);
  grid-template-columns: 1fr;
}
@media (min-width: 44rem) { .loop { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 68rem) { .loop { grid-template-columns: repeat(4, 1fr); } }

.loop__step {
  position: relative;
  display: block;
  padding: var(--sp-5);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  text-decoration: none;
  transition: transform 0.2s var(--ease), border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.loop__step:hover {
  transform: translateY(-3px);
  border-color: color-mix(in srgb, var(--brand) 45%, transparent);
  box-shadow: var(--shadow-2);
}
.loop__e { font-size: 1.9rem; display: block; }
.loop__step h3 { font-size: var(--step-1); margin-top: var(--sp-3); }
.loop__step p { color: var(--ink-2); font-size: var(--step--1); margin-top: var(--sp-2); }
.loop__go { display: inline-block; margin-top: var(--sp-3); font-size: var(--step--1); font-weight: 640; color: var(--brand); }

/* ---------- the shared demo frame ---------- */

.demo {
  margin-top: var(--sp-6);
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-lg);
  padding: clamp(1rem, 3vw, 1.75rem);
  box-shadow: var(--shadow-2);
}

.demo__bar { display: flex; align-items: baseline; gap: var(--sp-3); flex-wrap: wrap; }

.demo__live {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--jade);
  background: var(--jade-soft);
  border-radius: var(--radius-pill);
  padding: 0.25em 0.7em;
  white-space: nowrap;
}
.demo__live::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--jade);
  animation: pulseDot 1.8s ease-in-out infinite;
}
@keyframes pulseDot { 0%, 100% { opacity: 0.35; } 50% { opacity: 1; } }

.demo__title { font-size: var(--step-1); }

.demo__note {
  margin-top: var(--sp-5);
  padding-top: var(--sp-4);
  border-top: 1px dashed var(--line);
  font-size: var(--step--1);
  color: var(--ink-3);
  max-width: 74ch;
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  padding: 0.32em 0.8em;
  border-radius: var(--radius-pill);
  border: 1px solid var(--line-strong);
  background: var(--surface);
  color: var(--ink-2);
  font-size: var(--step--1);
  font-weight: 560;
  cursor: pointer;
  transition: background 0.15s var(--ease), border-color 0.15s var(--ease), color 0.15s var(--ease);
}
.chip:hover { background: var(--surface-2); color: var(--ink); }
.chip.is-on { background: var(--brand); border-color: var(--brand); color: #fff; }

.field--sm { padding: 0.5em 0.75em; font-size: var(--step--1); }

/* ---------- 1 · brain demo ---------- */

.brain { display: grid; gap: var(--sp-5); margin-top: var(--sp-5); }
@media (min-width: 52rem) { .brain { grid-template-columns: 1fr 1fr; gap: var(--sp-6); } }

.brain__label {
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: var(--sp-3);
}

.brain__pane--out {
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: var(--sp-5);
}

.facts { list-style: none; padding: 0; display: grid; gap: 0.45rem; }

.fact {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 0.35rem 0.5rem 0.35rem 0.7rem;
  animation: factIn 0.24s var(--ease) both;
}
@keyframes factIn { from { opacity: 0; transform: translateX(-6px); } }
.fact.is-going { opacity: 0; transform: translateX(10px); transition: all 0.18s var(--ease); }

.fact__e { font-size: 1rem; flex: none; }
.fact__in {
  flex: 1;
  min-width: 0;
  border: none;
  background: transparent;
  font-size: var(--step--1);
  padding: 0.25rem 0;
}
.fact__in:focus { outline: none; box-shadow: 0 1px 0 var(--brand); }
.fact__x {
  flex: none;
  border: none;
  background: transparent;
  color: var(--ink-3);
  cursor: pointer;
  padding: 0.25rem 0.4rem;
  border-radius: 6px;
  font-size: 0.8rem;
}
.fact__x:hover { background: var(--brand-soft); color: var(--brand-ink); }

.brain__add { display: flex; gap: 0.4rem; margin-top: var(--sp-4); }
.brain__presets { display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; margin-top: var(--sp-4); }

.ai-out { font-size: var(--step-0); }
.ai-out > * + * { margin-top: var(--sp-3); }
.ai-out p { color: var(--ink-2); }
.ai-out b { color: var(--ink); }
.ai-out__cost { font-family: var(--mono); font-size: var(--step--1); color: var(--jade) !important; }
.ai-out.is-new { animation: aiIn 0.36s var(--ease) both; }
@keyframes aiIn { from { opacity: 0; transform: translateY(6px); } }

.ai-out__why {
  margin-top: var(--sp-4);
  padding-top: var(--sp-3);
  border-top: 1px dashed var(--line-strong);
  font-size: var(--step--1);
  color: var(--ink-3);
  font-style: italic;
}

/* ---------- 2 · freedom calculator ---------- */

.calc { display: grid; gap: var(--sp-6); margin-top: var(--sp-5); }
@media (min-width: 52rem) { .calc { grid-template-columns: 1fr 1fr; align-items: start; } }

.calc__controls { display: grid; gap: var(--sp-5); }
.calc__row { display: grid; grid-template-columns: 1fr auto; gap: 0.3rem 1rem; align-items: baseline; }
.calc__row input[type="range"] { grid-column: 1 / -1; width: 100%; accent-color: var(--brand); }
.calc__lbl { font-size: var(--step--1); color: var(--ink-2); font-weight: 560; }
.calc__val { font-family: var(--mono); font-weight: 700; color: var(--ink); }

.calc__result {
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: var(--sp-5);
  display: grid;
  gap: var(--sp-4);
}
.calc__big { display: grid; gap: 0.1rem; }
.calc__biglbl { font-size: var(--step--1); color: var(--ink-3); }
.calc__bignum {
  font-size: var(--step-3);
  font-weight: 720;
  letter-spacing: -0.035em;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
.calc__big--accent .calc__bignum { color: var(--brand); }
.calc__curve { width: 100%; height: auto; color: var(--brand); opacity: 0.8; }

/* ---------- 3 · dream → plan ---------- */

.dream__in { display: flex; gap: 0.5rem; margin-top: var(--sp-5); flex-wrap: wrap; }
.dream__in .field { flex: 1 1 15rem; min-width: 0; }
.dream__chips { display: flex; gap: 0.4rem; flex-wrap: wrap; margin-top: var(--sp-3); }
.dream__out { margin-top: var(--sp-5); }
.dream__out.is-new { animation: aiIn 0.36s var(--ease) both; }

.plan-card {
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-left: 3px solid var(--brand);
  border-radius: var(--radius);
  padding: var(--sp-5);
}
.plan-card__top { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; }
.plan-card__top b { font-size: var(--step-1); }
.plan-card__when { font-family: var(--mono); font-size: var(--step--1); color: var(--ink-2); margin-top: var(--sp-3); }
.plan-card__why { font-size: var(--step--1); color: var(--ink-3); font-style: italic; margin-top: var(--sp-2); }
.plan-card__foot { font-size: var(--step--1); color: var(--ink-3); margin-top: var(--sp-4); }

.prio {
  font-size: 0.7rem;
  font-weight: 700;
  border-radius: var(--radius-pill);
  padding: 0.2em 0.65em;
  white-space: nowrap;
}
.prio--1 { background: color-mix(in srgb, #C0392B 15%, transparent); color: #C0392B; }
.prio--2 { background: color-mix(in srgb, #C9781E 16%, transparent); color: #A9631A; }
.prio--3 { background: var(--jade-soft); color: var(--jade); }

.steps { margin-top: var(--sp-4); padding-left: 1.15rem; display: grid; gap: 0.6rem; }
.steps li { font-size: var(--step--1); color: var(--ink-2); }
.steps li b { color: var(--ink); }
.steps li span {
  display: inline-block;
  font-family: var(--mono);
  font-size: 0.68rem;
  color: var(--jade);
  background: var(--jade-soft);
  border-radius: var(--radius-pill);
  padding: 0.1em 0.55em;
  margin-left: 0.2em;
  white-space: nowrap;
}

/* ---------- 4 · joy per rupee ---------- */

.joy { list-style: none; padding: 0; margin-top: var(--sp-5); display: flex; flex-direction: column; gap: 0.45rem; }
.joy__row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 0.5rem 0.75rem;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 0.6rem 0.85rem;
  transition: border-color 0.2s var(--ease), background 0.2s var(--ease);
}
.joy__row.is-top { border-color: color-mix(in srgb, var(--jade) 55%, transparent); background: var(--jade-soft); }
.joy__e { font-size: 1.2rem; }
.joy__t { font-size: var(--step--1); font-weight: 560; min-width: 0; }
.joy__c { display: block; font-family: var(--mono); font-size: 0.7rem; color: var(--ink-3); }
.joy__row input[type="range"] { grid-column: 1 / -1; width: 100%; accent-color: var(--jade); }
.joy__score {
  font-family: var(--mono);
  font-weight: 700;
  font-size: var(--step-0);
  color: var(--jade);
  font-variant-numeric: tabular-nums;
}
@media (min-width: 40rem) {
  .joy__row { grid-template-columns: auto 12rem 1fr auto; }
  .joy__row input[type="range"] { grid-column: auto; }
}
.joy__legend { margin-top: var(--sp-4); font-size: var(--step--1); color: var(--ink-3); }

/* ---------- 5 · firsts ---------- */

.firsts { margin-top: var(--sp-5); }
.firsts__meter { height: 8px; background: var(--surface-3); border-radius: var(--radius-pill); overflow: hidden; }
.firsts__fill {
  height: 100%;
  background: linear-gradient(90deg, var(--jade), var(--brand));
  border-radius: var(--radius-pill);
  transition: width 0.35s var(--ease);
}
.firsts__count { margin-top: var(--sp-3); font-size: var(--step--1); color: var(--ink-2); }
.firsts__count b { font-size: var(--step-2); color: var(--ink); font-variant-numeric: tabular-nums; }

.firsts__list { list-style: none; padding: 0; margin-top: var(--sp-4); display: grid; gap: 0.3rem; }
@media (min-width: 44rem) { .firsts__list { grid-template-columns: 1fr 1fr; gap: 0.3rem 1.25rem; } }
.firsts__list label {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  padding: 0.4rem 0.5rem;
  border-radius: 10px;
  cursor: pointer;
  font-size: var(--step--1);
  color: var(--ink-2);
  transition: background 0.15s var(--ease);
}
.firsts__list label:hover { background: var(--surface-2); }
.firsts__list input { margin-top: 0.28em; accent-color: var(--jade); flex: none; }
.firsts__list input:checked + span { color: var(--ink); font-weight: 560; }
.firsts__end { margin-top: var(--sp-4); font-size: var(--step-0); color: var(--ink); }

/* ---------- 6 · fulfilment story ---------- */

.story { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--sp-4); counter-reset: s; }
.story__step {
  display: flex;
  gap: var(--sp-4);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: clamp(1rem, 3vw, 1.6rem);
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.5s var(--ease), transform 0.5s var(--ease), border-color 0.3s var(--ease);
}
.story__step.is-in { opacity: 1; transform: none; }
html.stillness .story__step { opacity: 1; transform: none; }
.story__n {
  font-size: var(--step-3);
  line-height: 1;
  color: var(--brand);
  flex: none;
  font-weight: 700;
}
.story__step h3 { font-size: var(--step-1); }
.story__step p { color: var(--ink-2); margin-top: var(--sp-2); font-size: var(--step-0); }
.story__step[data-k="done"] { border-color: color-mix(in srgb, var(--jade) 45%, transparent); background: var(--jade-soft); }

/* ---------- 7 · cost table ---------- */

.cost { margin-top: var(--sp-5); }
.cost__ctl { display: grid; grid-template-columns: 1fr auto; gap: 0.3rem 1rem; align-items: baseline; max-width: 34rem; }
.cost__ctl input[type="range"] { grid-column: 1 / -1; width: 100%; accent-color: var(--brand); }

.cost__tbl { width: 100%; border-collapse: collapse; margin-top: var(--sp-5); font-size: var(--step--1); }
.cost__tbl th, .cost__tbl td { text-align: left; padding: 0.7rem 0.6rem; border-bottom: 1px solid var(--line); }
.cost__tbl thead th {
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink-3);
  font-weight: 620;
}
.cost__tbl tbody th { font-weight: 620; }
.cost__tbl td { font-variant-numeric: tabular-nums; }
.cost__tbl .ok { color: var(--jade); font-weight: 620; }
.cost__tbl .warn { color: #A9631A; font-weight: 620; }
.cost__tbl .bad { color: #C0392B; font-weight: 700; }
.cost__verdict { margin-top: var(--sp-4); font-size: var(--step--1); color: var(--ink-2); max-width: 68ch; }

/* ---------- 8 · reshape phone ---------- */

.reshape { margin-top: var(--sp-2); }
.phone {
  margin: var(--sp-5) auto 0;
  max-width: 20rem;
  border: 1px solid var(--line-strong);
  border-radius: 26px;
  overflow: hidden;
  background: var(--surface);
  box-shadow: var(--shadow-3);
}
.phone.is-new { animation: aiIn 0.4s var(--ease) both; }
.phone[data-theme-mock="dark"] { background: #1C1815; color: #F6F1EB; border-color: #443A31; }
.phone__top {
  padding: 0.9rem 1rem 0.7rem;
  background: color-mix(in srgb, var(--brand) 90%, #000);
  color: #fff;
  font-weight: 700;
  font-size: var(--step-0);
}
.phone__body { padding: 0.85rem; min-height: 9rem; }
.phone__cards { list-style: none; padding: 0; display: grid; gap: 0.45rem; }
.phone__cards li {
  background: color-mix(in srgb, currentColor 6%, transparent);
  border: 1px solid color-mix(in srgb, currentColor 12%, transparent);
  border-radius: 12px;
  padding: 0.65rem 0.8rem;
  font-size: var(--step--1);
  animation: factIn 0.3s var(--ease) both;
}
.phone__tabs {
  display: flex;
  border-top: 1px solid color-mix(in srgb, currentColor 12%, transparent);
  font-size: 0.62rem;
  text-align: center;
}
.phone__tabs span { flex: 1; padding: 0.6rem 0.15rem; opacity: 0.75; }
.reshape__said {
  text-align: center;
  margin-top: var(--sp-3);
  font-size: var(--step--1);
  color: var(--jade);
  font-weight: 560;
}

/* ---------- 9 · comfort bar ---------- */

.comfort {
  display: flex;
  gap: 0.4rem;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: var(--sp-6);
  padding-top: var(--sp-5);
  border-top: 1px solid var(--line);
}

/* ---------- faq + journal ---------- */

.faq { display: grid; gap: 0.5rem; max-width: 48rem; margin-inline: auto; }
.faq__item {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 0.9rem 1.1rem;
}
.faq__item summary {
  cursor: pointer;
  font-weight: 620;
  font-size: var(--step-0);
  list-style: none;
  display: flex;
  justify-content: space-between;
  gap: 1rem;
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after { content: "+"; color: var(--brand); font-weight: 700; flex: none; }
.faq__item[open] summary::after { content: "–"; }
.faq__item p { margin-top: var(--sp-3); color: var(--ink-2); font-size: var(--step--1); }

.journal { list-style: none; padding: 0; display: grid; gap: var(--sp-5); }
.journal__item {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: clamp(1.1rem, 3vw, 1.6rem);
}
.journal__item time {
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.journal__item h2 { font-size: var(--step-2); margin-top: var(--sp-2); }
.journal__item p { color: var(--ink-2); margin-top: var(--sp-3); }

/* ---------- nothing may scroll the page sideways ---------- */
.cost__tbl { display: table; }
@media (max-width: 26rem) {
  .cost__tbl th, .cost__tbl td { padding: 0.55rem 0.3rem; font-size: 0.8rem; }
  .demo { padding: 0.9rem; }
}

/* ---------- the Hindi switch ----------------------------------------
   Both languages ship in the HTML as sibling spans and CSS shows one.
   Nothing is rewritten by script, so it cannot mangle the markup and the
   page still reads (in English) with JavaScript switched off. The
   translation is deliberately partial and the button says so. */
.lang-hi { display: none; }
html[data-lang="hi"] .lang-en { display: none; }
html[data-lang="hi"] .lang-hi { display: inline; }
html[data-lang="hi"] .lang-hi.lang-block { display: block; }

/* ---------- nothing may push the page sideways ----------------------
   A wide table scrolls inside its own box rather than dragging the whole
   page with it — on a 360px phone that difference is the whole layout. */
.cost__scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; margin-inline: -0.4rem; padding-inline: 0.4rem; }
.cost__tbl { min-width: 21rem; }

/* Long unbroken strings (a pasted URL, a long Hindi compound) must wrap
   rather than force a scrollbar. */
.prose, .lede, .ai-out, .plan-card, .journal__item p, .demo__note { overflow-wrap: anywhere; }

/* Belt and braces: the page itself never scrolls sideways. Individual
   scrollers above keep their own overflow. */
html, body { max-width: 100%; overflow-x: clip; }