/* ═══════════════════════════════════════════════════════════════════════
   Kundly — base styles
   Layered on top of /css/style.css (inherits nav, fonts, tokens)
   Weave palette: cream #FAF7F2 · terracotta #C75B39 · sage · gold
   Fonts: Source Serif 4 (prose), Inter (UI)
   Mobile-first. 16px+ body. Large tap targets.
   ═══════════════════════════════════════════════════════════════════════ */

/* ─── Tokens (Kundly-specific) ──────────────────────────────────────── */
:root {
  --k-cream: #FAF7F2;
  --k-cream-dark: #F3EBE1;
  --k-terracotta: #C75B39;
  --k-terracotta-dark: #A84521;
  --k-gold: #C79A3A;
  --k-gold-soft: #E8D9B4;
  --k-sage: #7C8A6B;
  --k-ink: #3A2E26;
  --k-ink-soft: #5A4A3F;
  --k-muted: #8A7A6F;
  --k-border: #E8DED2;
  --k-shadow: 0 2px 8px rgba(58, 46, 38, 0.06);
  --k-shadow-lg: 0 8px 32px rgba(58, 46, 38, 0.08);
  --k-radius: 8px;
  --k-radius-lg: 12px;
  --k-max-width: 640px;
  --k-max-width-wide: 880px;
  --k-max-width-landing: 1100px;
}

/* ─── Layout ────────────────────────────────────────────────────────── */
.kundly-body {
  background: var(--k-cream);
  color: var(--k-ink);
  font-family: 'Source Serif 4', Georgia, serif;
  font-size: 17px;
  line-height: 1.65;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.kundly-wrap {
  max-width: var(--k-max-width);
  margin: 0 auto;
  padding: 2rem 1.25rem 5rem;
}

.kundly-wrap--wide {
  max-width: var(--k-max-width-wide);
}

/* ─── Hero (landing page) ───────────────────────────────────────────── */
.kundly-hero {
  padding: 4rem 1.25rem 4rem;
  text-align: center;
  max-width: 760px;
  margin: 0 auto;
}

.kundly-hero > * {
  text-align: center;
}

.kundly-hero__eyebrow {
  font-family: 'Inter', -apple-system, sans-serif;
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--k-gold);
  margin: 0 0 1rem;
  text-align: center;
}

.kundly-hero__title {
  font-family: 'Source Serif 4', Georgia, serif;
  font-size: clamp(2.75rem, 7vw, 4.5rem);
  font-weight: 500;
  line-height: 1.08;
  letter-spacing: -0.02em;
  color: var(--k-ink);
  margin: 0 0 0.5rem;
  text-align: center;
}

.kundly-hero__tagline {
  font-style: italic;
  font-size: clamp(1.125rem, 2vw, 1.5rem);
  color: var(--k-terracotta);
  margin: 0 auto 2rem;
  text-align: center;
  display: block;
  width: 100%;
}

.kundly-hero__sub {
  font-size: clamp(1rem, 1.2vw, 1.125rem);
  line-height: 1.7;
  color: var(--k-ink-soft);
  max-width: 34em;
  margin: 0 auto 2.5rem;
  text-align: center;
}

.kundly-hero__disclaimer {
  background: linear-gradient(135deg, #FFFFFF 0%, #FFFBF5 100%);
  border: 1.5px solid #C9A96E;
  box-shadow: 0 0 0 1px #E0C992, 0 2px 16px rgba(201, 169, 110, 0.18);
  padding: 1.5rem 1.75rem;
  max-width: 36em;
  margin: 0 auto 2rem;
  text-align: left;
  font-size: 0.9375rem;
  line-height: 1.65;
  color: var(--k-ink-soft);
  border-radius: 12px;
}

.kundly-hero__disclaimer strong {
  color: var(--k-ink);
}

.kundly-hero__crisis {
  display: block;
  margin-top: 0.5rem;
  font-size: 0.875rem;
  color: var(--k-terracotta-dark);
}

.kundly-hero__trust {
  font-size: 0.875rem;
  color: var(--k-muted);
  margin: 1.25rem auto 0;
  font-family: 'Inter', sans-serif;
  text-align: center;
  display: block;
  width: 100%;
}

/* ─── Landing sections (below-the-fold desktop layout) ─────────────── */
.kundly-landing {
  max-width: var(--k-max-width-landing);
  margin: 0 auto;
  padding: 2rem 1.5rem 5rem;
}

.kundly-section-title {
  text-align: center;
  font-family: 'Source Serif 4', Georgia, serif;
  font-weight: 500;
  font-size: clamp(1.625rem, 2.5vw, 2.125rem);
  color: var(--k-ink);
  margin: 3.5rem 0 2rem;
}

.kundly-howitworks {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  margin: 0 0 5rem;
}

/* Kundly step cards use the site's standard .card + .lining--gold pattern.
   These classes override nothing — just add the step-specific internal
   typography. Apply to: <div class="card lining--gold kundly-step"> */
.kundly-step__label {
  font-family: 'Inter', sans-serif;
  color: var(--k-terracotta);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin: 0 0 0.875rem;
}

.kundly-step__title {
  font-family: 'Source Serif 4', Georgia, serif;
  font-size: 1.375rem;
  font-weight: 600;
  color: #5B4A3F;
  margin: 0 0 0.75rem;
  line-height: 1.25;
}

.kundly-step__text {
  font-size: 0.9375rem;
  line-height: 1.65;
  color: #7A6B5D;
  margin: 0;
}

/* Explainer block uses a full bordered card pattern, matching site convention */
.kundly-explainer {
  background: linear-gradient(135deg, #FFFFFF 0%, #FFFBF5 100%);
  border: 1.5px solid #C9A96E;
  box-shadow: 0 0 0 1px #E0C992, 0 2px 16px rgba(201, 169, 110, 0.18);
  border-radius: 12px;
  padding: 2.75rem 3rem;
  margin: 0 auto 4rem;
  max-width: 820px;
}

.kundly-explainer h3 {
  font-family: 'Source Serif 4', serif;
  font-weight: 500;
  font-size: clamp(1.375rem, 2vw, 1.75rem);
  color: var(--k-ink);
  margin: 0 0 1.25rem;
  line-height: 1.3;
}

.kundly-explainer p {
  font-size: 1rem;
  line-height: 1.75;
  color: var(--k-ink-soft);
  margin: 0 0 1.125rem;
}

.kundly-explainer p:last-child {
  margin-bottom: 0;
  font-style: italic;
}

.kundly-explainer strong {
  color: var(--k-ink);
}

.kundly-closing {
  text-align: center;
  margin: 4rem auto 2rem;
  max-width: 560px;
}

.kundly-closing h3 {
  font-family: 'Source Serif 4', serif;
  font-weight: 500;
  font-size: 1.5rem;
  color: var(--k-ink);
  margin: 0 0 0.75rem;
}

.kundly-closing p {
  font-size: 0.9375rem;
  color: var(--k-ink-soft);
  line-height: 1.65;
  margin: 0 auto 2rem;
}

.kundly-closing__micro {
  font-size: 0.8125rem;
  color: var(--k-muted);
  margin-top: 1rem;
}

/* ─── Kundly footer (consistent across all kundly/* pages) ─────────── */
.kundly-footer {
  background: var(--k-cream-dark);
  padding: 3rem 1.5rem;
  margin-top: 4rem;
  font-size: 0.875rem;
  color: var(--k-muted);
  text-align: center;
  border-top: 1px solid var(--k-border);
}

.kundly-footer__inner {
  max-width: 640px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.625rem;
  text-align: center;
}

.kundly-footer__inner p {
  margin: 0;
  text-align: center;
  line-height: 1.6;
}

.kundly-footer__inner a {
  color: var(--k-terracotta);
  text-decoration: none;
}

.kundly-footer__inner a:hover {
  text-decoration: underline;
}

.kundly-footer__sig {
  font-style: italic;
  color: var(--k-ink-soft);
}

.kundly-footer__reset {
  margin-top: 1rem;
  font-family: 'Inter', sans-serif;
  font-size: 0.75rem;
  color: var(--k-muted);
  background: none;
  border: 1px dashed var(--k-border);
  padding: 0.5rem 1rem;
  border-radius: 999px;
  cursor: pointer;
  letter-spacing: 0.02em;
  transition: border-color 150ms ease, color 150ms ease;
}

.kundly-footer__reset:hover {
  border-color: var(--k-terracotta);
  color: var(--k-terracotta);
}

/* ─── Reset confirmation modal (typed-confirm guard for thanks.html) ─ */
.k-reset-modal__overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(58, 46, 38, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 1rem;
}

.k-reset-modal {
  background: linear-gradient(135deg, #FFFFFF 0%, #FFFBF5 100%);
  border: 1.5px solid #C9A96E;
  box-shadow: 0 0 0 1px #E0C992, 0 8px 32px rgba(58, 46, 38, 0.18);
  border-radius: 12px;
  padding: 2rem 2.25rem;
  max-width: 480px;
  width: 100%;
  font-family: 'Source Serif 4', Georgia, serif;
}

.k-reset-modal h3 {
  font-family: 'Source Serif 4', serif;
  font-weight: 500;
  font-size: 1.25rem;
  color: var(--k-ink);
  margin: 0 0 0.875rem;
}

.k-reset-modal p {
  font-size: 0.9375rem;
  line-height: 1.65;
  color: var(--k-ink-soft);
  margin: 0 0 1rem;
}

.k-reset-modal__warning {
  background: #FFF4EE;
  border: 1px solid var(--k-terracotta);
  border-radius: 6px;
  padding: 0.875rem 1rem;
  font-size: 0.875rem;
  color: var(--k-terracotta-dark);
  margin: 1rem 0;
}

.k-reset-modal input[type="text"] {
  width: 100%;
  padding: 0.875rem 1rem;
  font-family: 'Inter', sans-serif;
  font-size: 0.9375rem;
  color: var(--k-ink);
  background: #ffffff;
  border: 1px solid var(--k-border);
  border-radius: 6px;
  margin: 0.75rem 0 0.5rem;
  box-sizing: border-box;
}

.k-reset-modal input[type="text"]:focus {
  outline: none;
  border-color: var(--k-terracotta);
  box-shadow: 0 0 0 3px rgba(199, 91, 57, 0.12);
}

.k-reset-modal__hint {
  font-size: 0.8125rem;
  color: var(--k-muted);
  font-style: italic;
  margin: 0 0 1.25rem;
}

.k-reset-modal__actions {
  display: flex;
  gap: 0.75rem;
  margin-top: 1rem;
}

.k-reset-modal__actions button {
  flex: 1;
  padding: 0.875rem 1rem;
  font-family: 'Inter', sans-serif;
  font-size: 0.9375rem;
  font-weight: 500;
  border-radius: 6px;
  cursor: pointer;
  border: none;
}

.k-reset-modal__actions .k-reset-cancel {
  background: var(--k-cream-dark);
  color: var(--k-ink-soft);
  border: 1px solid var(--k-border);
}

.k-reset-modal__actions .k-reset-confirm {
  background: var(--k-terracotta);
  color: #ffffff;
}

.k-reset-modal__actions .k-reset-confirm:disabled {
  background: var(--k-muted);
  cursor: not-allowed;
  opacity: 0.6;
}

/* Narrow desktop / tablet: 2 columns (600-900px range) */
@media (max-width: 900px) and (min-width: 600px) {
  .kundly-howitworks {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.25rem;
  }
  /* Third card centered under the pair */
  .kundly-howitworks > :nth-child(3) {
    grid-column: 1 / -1;
    max-width: calc(50% - 0.625rem);
    justify-self: center;
  }
}

/* Mobile: collapse to single column */
@media (max-width: 599px) {
  .kundly-howitworks {
    grid-template-columns: 1fr;
    gap: 1.25rem;
  }
  .kundly-howitworks > :nth-child(3) {
    max-width: none;
  }
  .kundly-explainer {
    padding: 2rem 1.5rem;
  }
  .kundly-landing {
    padding: 1.5rem 1rem 3.5rem;
  }
}

/* ─── CTAs ──────────────────────────────────────────────────────────── */
.k-btn {
  display: inline-block;
  padding: 1rem 2rem;
  font-family: 'Inter', -apple-system, sans-serif;
  font-size: 1rem;
  font-weight: 500;
  text-decoration: none;
  border-radius: var(--k-radius);
  border: none;
  cursor: pointer;
  transition: transform 120ms ease, box-shadow 120ms ease, background 120ms ease;
  min-height: 48px;   /* tap target */
}

.k-btn--primary {
  background: var(--k-terracotta);
  color: #ffffff;
  box-shadow: var(--k-shadow);
}

.k-btn--primary:hover {
  background: var(--k-terracotta-dark);
  transform: translateY(-1px);
  box-shadow: var(--k-shadow-lg);
}

.k-btn--primary:disabled,
.k-btn--primary[aria-disabled="true"] {
  background: var(--k-muted);
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
  opacity: 0.7;
}

.k-btn--ghost {
  background: transparent;
  color: var(--k-ink-soft);
  border: 1px solid var(--k-border);
}

.k-btn--ghost:hover {
  background: var(--k-cream-dark);
  color: var(--k-ink);
}

.k-btn--lg {
  padding: 1.125rem 2.5rem;
  font-size: 1.0625rem;
}

/* ─── Chapter player (form.html) ────────────────────────────────────── */
/* padding-top is intentionally larger than the other Kundly sections to
   clear the .k-skcode and .k-autosave fixed-position chips that float at
   top: calc(72px + 0.5rem) just below the sticky nav. Without this extra
   padding the chips sat ON TOP OF the first chapter progress label and
   chapter title on every viewport — the iter 9 nav-overlap fix only pushed
   the chips clear of the NAV, not clear of the chapter content. Verified
   in preview at 375px / 650px / desktop: chips sit above the content
   margin, not over the text. */
.k-chapter {
  max-width: var(--k-max-width);
  margin: 0 auto;
  padding: 4rem 1.25rem 2rem;
}

.k-chapter__progress {
  font-family: 'Inter', sans-serif;
  font-size: 0.8125rem;
  color: var(--k-muted);
  text-align: center;
  margin-bottom: 2rem;
  letter-spacing: 0.05em;
}

.k-chapter__title {
  font-size: 1.75rem;
  font-weight: 500;
  margin: 0 0 1rem;
  color: var(--k-ink);
}

.k-chapter__intro {
  background: var(--k-cream-dark);
  border-radius: var(--k-radius);
  padding: 1.25rem 1.5rem;
  font-size: 0.9375rem;
  line-height: 1.65;
  color: var(--k-ink-soft);
  margin: 0 0 2rem;
}

.k-question {
  margin-bottom: 2.5rem;
}

.k-question__prompt {
  font-size: 1.125rem;
  line-height: 1.55;
  color: var(--k-ink);
  margin: 0 0 1rem;
}

.k-question__helper {
  font-size: 0.875rem;
  font-style: italic;
  color: var(--k-muted);
  margin: 0 0 0.75rem;
}

.k-textarea {
  width: 100%;
  min-height: 200px;
  padding: 1rem 1.25rem;
  font-family: 'Source Serif 4', Georgia, serif;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--k-ink);
  background: #ffffff;
  border: 1px solid var(--k-border);
  border-radius: var(--k-radius);
  resize: vertical;
  transition: border-color 120ms ease, box-shadow 120ms ease;
}

.k-textarea:focus {
  outline: none;
  border-color: var(--k-terracotta);
  box-shadow: 0 0 0 3px rgba(199, 91, 57, 0.12);
}

.k-input {
  width: 100%;
  padding: 0.875rem 1rem;
  font-family: 'Inter', sans-serif;
  font-size: 1rem;
  color: var(--k-ink);
  background: #ffffff;
  border: 1px solid var(--k-border);
  border-radius: var(--k-radius);
  transition: border-color 120ms ease, box-shadow 120ms ease;
  min-height: 48px;
}

.k-input:focus {
  outline: none;
  border-color: var(--k-terracotta);
  box-shadow: 0 0 0 3px rgba(199, 91, 57, 0.12);
}

.k-wordcount {
  display: flex;
  justify-content: space-between;
  font-family: 'Inter', sans-serif;
  font-size: 0.8125rem;
  color: var(--k-muted);
  margin-top: 0.5rem;
}

.k-wordcount__target {
  font-style: italic;
}

/* ─── Chapter nav ───────────────────────────────────────────────────── */
.k-chapter-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 3rem;
  padding-top: 2rem;
  border-top: 1px solid var(--k-border);
  gap: 1rem;
  /* FIX 44: at mobile widths the row [Previous] [Skip + Continue] exceeds
     375px and `nowrap` causes the right-edge button to be clipped off the
     viewport. Allow the row to wrap so the right group drops to a new line
     instead of overflowing. Pair with row-gap so wrapped rows breathe. */
  flex-wrap: wrap;
  row-gap: 1rem;
}

.k-chapter-nav__skip {
  font-family: 'Inter', sans-serif;
  font-size: 0.9375rem;
  color: var(--k-muted);
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.75rem 0;
  text-decoration: underline;
  /* FIX 43: prevent the skip button from wrapping to 3 lines on mobile.
     The chapter nav row is `display: flex` with `gap: 16px`. At 375px the
     row crowds Previous + Skip + Continue against each other, and
     `flex: 0 1 auto` lets the middle Skip button shrink to its single
     longest word — rendering "Skip / for / now" as a 3-line stack. nowrap
     keeps the label one line; flex-shrink: 0 prevents the button from
     being squeezed below its intrinsic content width. */
  white-space: nowrap;
  flex-shrink: 0;
}

.k-chapter-nav__skip:hover {
  color: var(--k-ink-soft);
}

/* ─── Autosave indicator ────────────────────────────────────────────── */
/* The site nav (style.css line 114) is position: sticky; top: 0; height: 72px;
   z-index: 100. Without offsetting these chips below the nav, they sit at
   top: 1rem (16px) which is INSIDE the nav rectangle, occluding the brand
   logo (left chip) and the CTA button (right chip) on every form page.
   Push both chips clear of the 72px nav with a small breathing-room gap. */

/* FIX 42: scroll-collision masking strip.
   The two chips (.k-skcode left, .k-autosave right) sit at top:80px as
   small pills with opaque cream backgrounds. Each pill itself fully
   masks the content beneath it, but the GAP between the two pills (the
   middle of the viewport at the same vertical band) is uncovered. As the
   seeker scrolls through a long prompt, prompt text passes UP through
   that gap and reads as mid-line text cuts — a visually disorienting
   "where did the words go" moment. We add a full-width fixed strip
   behind both chips, scoped via :has(.k-skcode) so it only renders on
   the form page (consent/privacy/thanks/safety have no chips and stay
   untouched). The strip sits at z-index 99 — beneath the chips (100)
   but above scrolling content — and uses the page background colour. */
.kundly-body:has(.k-skcode)::before {
  content: '';
  position: fixed;
  top: 72px;
  left: 0;
  right: 0;
  /* Chip total height: ~28px desktop / ~24px mobile + 0.5rem top-offset
     + 0.5rem trailing breathing room. 3rem covers both with margin. */
  height: 3rem;
  background: var(--k-cream);
  z-index: 99;
  pointer-events: none;
}

.k-autosave {
  position: fixed;
  top: calc(72px + 0.5rem);
  right: 1rem;
  font-family: 'Inter', sans-serif;
  font-size: 0.75rem;
  color: var(--k-muted);
  background: var(--k-cream);
  padding: 0.375rem 0.75rem;
  border-radius: 999px;
  border: 1px solid var(--k-border);
  opacity: 0;
  transition: opacity 300ms ease;
  z-index: 100;
}

.k-autosave--visible {
  opacity: 1;
}

.k-autosave__dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  background: var(--k-sage);
  border-radius: 50%;
  margin-right: 0.375rem;
  vertical-align: middle;
}

/* ─── SK code chip ──────────────────────────────────────────────────── */
/* See .k-autosave comment above — same nav-overlap fix. */
.k-skcode {
  position: fixed;
  top: calc(72px + 0.5rem);
  left: 1rem;
  font-family: 'Inter', sans-serif;
  font-size: 0.75rem;
  color: var(--k-muted);
  background: var(--k-cream);
  padding: 0.375rem 0.75rem;
  border-radius: 999px;
  border: 1px solid var(--k-border);
  z-index: 100;
}

.k-skcode__label {
  color: var(--k-muted);
  margin-right: 0.25rem;
}

.k-skcode__value {
  color: var(--k-ink);
  font-weight: 500;
  letter-spacing: 0.03em;
}

/* ─── Grounding card ────────────────────────────────────────────────── */
.k-grounding {
  background: #fdf9f0;
  border: 1px solid var(--k-gold-soft);
  border-radius: var(--k-radius-lg);
  padding: 1.5rem 1.75rem;
  margin: 2rem 0;
  font-size: 0.9375rem;
  line-height: 1.65;
  color: var(--k-ink-soft);
}

.k-grounding__title {
  font-family: 'Inter', sans-serif;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--k-gold);
  margin: 0 0 0.75rem;
}

/* ─── Consent screen ────────────────────────────────────────────────── */
.k-consent {
  max-width: var(--k-max-width);
  margin: 0 auto;
  padding: 2rem 1.25rem;
}

.k-consent__header {
  margin-bottom: 2rem;
}

.k-consent__title {
  font-size: 1.875rem;
  font-weight: 500;
  margin: 0 0 0.75rem;
  color: var(--k-ink);
}

.k-consent__intro {
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--k-ink-soft);
}

.k-safety-banner {
  background: #FFF4EE;
  border: 1px solid var(--k-terracotta);
  border-radius: var(--k-radius);
  padding: 1.25rem 1.5rem;
  margin: 2rem 0;
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--k-terracotta-dark);
}

.k-safety-banner strong {
  color: var(--k-terracotta-dark);
}

.k-checkbox-group {
  margin: 2.5rem 0;
}

.k-checkbox {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: 1.25rem;
  background: #ffffff;
  border: 1px solid var(--k-border);
  border-radius: var(--k-radius);
  margin-bottom: 1rem;
  cursor: pointer;
  transition: border-color 120ms ease, background 120ms ease;
}

.k-checkbox:hover {
  border-color: var(--k-terracotta);
}

.k-checkbox input[type="checkbox"] {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  margin-top: 2px;
  accent-color: var(--k-terracotta);
  cursor: pointer;
}

.k-checkbox__label {
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--k-ink-soft);
  cursor: pointer;
}

.k-checkbox input[type="checkbox"]:checked ~ .k-checkbox__label {
  color: var(--k-ink);
}

.k-checkbox--active {
  border-color: var(--k-terracotta);
  background: #FFFBF8;
}

/* ─── Thank-you / Spark screen ──────────────────────────────────────── */
.k-thanks {
  max-width: var(--k-max-width);
  margin: 0 auto;
  padding: 3rem 1.25rem 5rem;
}

.k-thanks__header {
  text-align: center;
  margin-bottom: 2rem;
}

.k-thanks__title {
  font-size: 2rem;
  font-weight: 500;
  color: var(--k-ink);
  margin: 0 0 1rem;
}

.k-thanks__sub {
  font-size: 1.0625rem;
  color: var(--k-ink-soft);
  line-height: 1.65;
}

.k-spark-loading {
  text-align: center;
  padding: 3rem 1rem;
  color: var(--k-muted);
  font-style: italic;
}

.k-spark-loading__dots {
  /* No margin-left: the dots are punctuation, not a separate token. With a
     left margin, the single-dot animation frame reads as "carefully ." with
     a visible space gap. FIX 41. */
  display: inline-block;
}

.k-spark-loading__dots::after {
  content: '...';
  animation: dots 1.5s steps(4) infinite;
}

@keyframes dots {
  0%, 100% { content: ''; }
  25% { content: '.'; }
  50% { content: '..'; }
  75% { content: '...'; }
}

.k-spark {
  background: linear-gradient(135deg, #FFFFFF 0%, #FFFBF5 100%);
  border: 1.5px solid #C9A96E;
  box-shadow: 0 0 0 1px #E0C992, 0 2px 16px rgba(201, 169, 110, 0.18);
  border-radius: 12px;
  padding: 2.25rem 2.25rem;
  margin: 2rem 0;
  font-family: 'Source Serif 4', Georgia, serif;
  font-size: 1rem;
  line-height: 1.75;
  color: var(--k-ink);
}

.k-spark__disclaimer {
  font-size: 0.875rem;
  color: var(--k-muted);
  font-style: italic;
  margin: 0 0 1.5rem;
  text-align: center;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid var(--k-border);
}

.k-spark__body {
  font-size: 1rem;
}

.k-spark__body p {
  margin: 0 0 1.25rem;
}

.k-spark__actions {
  display: flex;
  gap: 0.75rem;
  margin-top: 1.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--k-border);
}

.k-contact-card {
  background: var(--k-cream-dark);
  border-radius: var(--k-radius-lg);
  padding: 1.75rem 2rem;
  margin: 2rem 0;
}

.k-contact-card__title {
  font-family: 'Inter', sans-serif;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--k-gold);
  margin: 0 0 1rem;
}

.k-contact-card__sub {
  font-size: 0.9375rem;
  color: var(--k-ink-soft);
  margin: 0 0 1.25rem;
  line-height: 1.6;
}

.k-contact-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.k-contact-list li {
  font-family: 'Inter', sans-serif;
  font-size: 0.9375rem;
}

.k-contact-list .k-contact-label {
  color: var(--k-muted);
  margin-right: 0.5rem;
}

.k-contact-list .k-contact-number {
  color: var(--k-terracotta);
  font-weight: 500;
  letter-spacing: 0.02em;
}

/* ─── Mobile ────────────────────────────────────────────────────────── */
@media (max-width: 640px) {
  .kundly-hero {
    padding: 2rem 1rem 3rem;
  }

  .k-consent, .k-thanks {
    padding: 1.5rem 1rem 4rem;
  }
  /* .k-chapter splits out from the joined mobile rule so it can carry the
     larger top padding needed to clear the .k-skcode + .k-autosave fixed
     chips. The desktop rule sets padding: 4rem 1.25rem 2rem; the mobile
     override uses padding-top: 3rem (matches the chip-bottom + breathing
     room) and the same horizontal/bottom values the joined rule had. */
  .k-chapter {
    padding: 3rem 1rem 4rem;
  }

  .k-spark {
    padding: 1.5rem 1.25rem;
  }

  .k-contact-card {
    padding: 1.5rem 1.25rem;
  }

  .k-autosave,
  .k-skcode {
    font-size: 0.6875rem;
    padding: 0.25rem 0.625rem;
  }
}

/* ─── Accessibility ─────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  * {
    transition: none !important;
    animation: none !important;
  }
}

:focus-visible {
  outline: 3px solid var(--k-gold);
  outline-offset: 2px;
  border-radius: var(--k-radius);
}

/* Suppress the visible focus ring on programmatically-focused headings.
   FIX 25 (iter 16) sets tabindex='-1' on chapter title h1 elements and
   focuses them after each render so screen readers announce the chapter
   transition. The focus mechanic is correct for SR users, but sighted
   users see a 3px gold ring around the chapter title — making the title
   look like an interactive control. The canonical SPA accessibility
   pattern is to suppress the visible ring on tabindex=-1 headings while
   keeping the focus capability for assistive tech. */
h1[tabindex="-1"]:focus,
h2[tabindex="-1"]:focus,
h1[tabindex="-1"]:focus-visible,
h2[tabindex="-1"]:focus-visible {
  outline: none;
}