/* =============================================================================
   HOUSE OF CATRINA — AI CONCIERGE PLATFORM
   styles.css — built from claude.md spec only
   ============================================================================= */


/* =============================================================================
   1. CSS VARIABLES
   ============================================================================= */

:root {
  /* Primary Colours */
  --catrina-black: #1C1917;
  --amber-coat:    #C2772E;
  --ivory-paw:     #FAF7F2;

  /* Secondary Colours */
  --deep-amber:    #A65D1B;
  --catrinas-eye:  #4A5E4B;
  --blush-nose:    #D4A89A;
  --warm-cream:    #E8E0D4;

  /* Typography */
  --font-serif: 'Sentient', serif;
  --font-sans:  'Clash Display', sans-serif;

  /* Spacing */
  --spacing-xs:  8px;
  --spacing-sm:  16px;
  --spacing-md:  24px;
  --spacing-lg:  40px;
  --spacing-xl:  60px;
  --spacing-2xl: 80px;

  /* Shadows */
  --shadow-sm: 0 2px  8px rgba(28, 25, 23, 0.10);
  --shadow-md: 0 4px 16px rgba(28, 25, 23, 0.15);
}


/* =============================================================================
   2. RESET
   ============================================================================= */

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: 60px;
}

body {
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 1.6;
  color: var(--catrina-black);
  background-color: var(--ivory-paw);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

button {
  background: none;
  border: none;
  font-family: inherit;
  cursor: pointer;
}

a {
  color: inherit;
  text-decoration: none;
}

input {
  font-family: inherit;
  border-radius: 0;
}

img {
  display: block;
  max-width: 100%;
}

ul, ol {
  list-style: none;
}


/* =============================================================================
   3. ACCESSIBILITY
   ============================================================================= */

.skip-link {
  position: absolute;
  top: -100px;
  left: 16px;
  padding: 10px 20px;
  background: var(--amber-coat);
  color: var(--catrina-black);
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 600;
  z-index: 9999;
  transition: top 0.3s ease;
}

.skip-link:focus {
  top: 16px;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

:focus-visible {
  outline: 2px solid var(--amber-coat);
  outline-offset: 3px;
}


/* =============================================================================
   4. SCROLL REVEAL
   ============================================================================= */

.reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}


/* =============================================================================
   5. HEADER
   ============================================================================= */

.header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 60px;
  z-index: 1000;
  background-color: var(--ivory-paw);
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 40px;
  transition: box-shadow 0.3s ease;
}

.header.scrolled {
  box-shadow: var(--shadow-sm);
}

.header__brand-link {
  display: flex;
  align-items: center;
  gap: 10px;
}

.header__logo {
  height: 32px;
  width: auto;
  display: block;
}

.header__wordmark {
  font-family: var(--font-serif);
  font-size: 24px;
  font-weight: 400;
  color: var(--catrina-black);
  letter-spacing: -0.01em;
}


/* =============================================================================
   6. HERO
   ============================================================================= */

.hero {
  background-color: var(--catrina-black);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 60px 40px;
  padding-top: calc(60px + 60px);
  text-align: center;
}

.hero__container {
  max-width: 800px;
  width: 100%;
}

.hero__h1 {
  font-family: var(--font-serif);
  font-size: 52px;
  font-weight: 400;
  color: var(--ivory-paw);
  line-height: 1.2;
  margin-bottom: 20px;
}

.hero__h2 {
  font-family: var(--font-sans);
  font-size: 20px;
  font-weight: 400;
  color: var(--amber-coat);
  margin-bottom: 16px;
}

.hero__subtext {
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: 400;
  color: var(--ivory-paw);
}

.hero__spacer {
  height: 40px;
}

.hero__tag {
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 400;
  color: var(--warm-cream);
}


/* =============================================================================
   7. STORY
   ============================================================================= */

.story {
  background-color: var(--ivory-paw);
  padding: var(--spacing-2xl) var(--spacing-lg);
}

.story__container {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--spacing-xl);
}

.story__h2 {
  font-family: var(--font-serif);
  font-size: 36px;
  font-weight: 400;
  color: var(--catrina-black);
  margin-bottom: 32px;
  line-height: 1.2;
}

.story__body {
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: 400;
  color: var(--catrina-black);
  line-height: 1.8;
  margin-bottom: 16px;
}

.story__body:last-child {
  margin-bottom: 0;
}

/* Right column */
.story__column--right {
  background: var(--warm-cream);
  padding: 40px;
  border-left: 3px solid var(--amber-coat);
  display: flex;
  flex-direction: column;
}

.story__h3 {
  font-family: var(--font-sans);
  font-size: 20px;
  font-weight: 400;
  color: var(--catrina-black);
  margin-bottom: 28px;
}

.story__list {
  margin-bottom: 32px;
}

.story__list li {
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: 400;
  color: var(--catrina-black);
  line-height: 1.7;
  padding-bottom: 20px;
  padding-left: 20px;
  position: relative;
}

.story__list li:last-child {
  padding-bottom: 0;
}

.story__list li::before {
  content: '•';
  color: var(--amber-coat);
  position: absolute;
  left: 0;
  top: 0;
  line-height: 1.7;
}

.story__epilogue {
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 400;
  color: var(--catrina-black);
  line-height: 1.7;
  opacity: 0.65;
  border-top: 1px solid var(--warm-cream);
  padding-top: 20px;
}


/* =============================================================================
   8. CONCIERGE
   ============================================================================= */

.concierge {
  background-color: var(--catrina-black);
  min-height: 60vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: var(--spacing-2xl) var(--spacing-lg);
  text-align: center;
}

.concierge__container {
  max-width: 700px;
  width: 100%;
}

.concierge__h2 {
  font-family: var(--font-serif);
  font-size: 2.9vw;
  white-space: nowrap;
  font-weight: 400;
  color: var(--ivory-paw);
  line-height: 1.1;
  margin-bottom: 16px;
}

.concierge__subhead {
  font-family: var(--font-sans);
  font-size: 18px;
  font-weight: 400;
  color: var(--amber-coat);
  margin-bottom: 40px;
}

.concierge__body {
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: 400;
  color: var(--ivory-paw);
  line-height: 1.8;
  margin-bottom: 16px;
  max-width: 700px;
  margin-left: auto;
  margin-right: auto;
}

.concierge__body:last-child {
  margin-bottom: 0;
}


/* =============================================================================
   9. MOAT — 3-Card Grid
   ============================================================================= */

.moat {
  background-color: var(--ivory-paw);
  padding: var(--spacing-2xl) var(--spacing-lg);
}

.moat__container {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: 30px;
}

.moat__card {
  background: var(--warm-cream);
  padding: 40px;
  border-radius: 0;
  border-top: 4px solid var(--amber-coat);
  transition: box-shadow 0.3s ease;
}

.moat__card:hover {
  box-shadow: var(--shadow-md);
}

.moat__card--knowledge { border-top-color: var(--amber-coat); }
.moat__card--memory    { border-top-color: var(--catrinas-eye); }
.moat__card--available { border-top-color: var(--deep-amber); }

.moat__h3 {
  font-family: var(--font-sans);
  font-size: 20px;
  font-weight: 400;
  color: var(--catrina-black);
  margin-bottom: 20px;
}

.moat__body {
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: 400;
  color: var(--catrina-black);
  line-height: 1.7;
  margin-bottom: 12px;
}

.moat__body:last-child {
  margin-bottom: 0;
}


/* =============================================================================
   10. VIC CIRCLE
   ============================================================================= */

.vic {
  background-color: var(--catrina-black);
  min-height: 20vh;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 40px;
  text-align: center;
}

.vic__container {
  max-width: 700px;
}

.vic__text {
  font-family: var(--font-sans);
  font-size: 18px;
  font-weight: 400;
  color: var(--warm-cream);
  line-height: 1.6;
}


/* =============================================================================
   11. PROMISE
   ============================================================================= */

.promise {
  background-color: var(--ivory-paw);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 48px var(--spacing-lg);
  text-align: center;
}

.promise__container {
  max-width: 800px;
  width: 100%;
}

.promise__h2 {
  font-family: var(--font-serif);
  font-size: 40px;
  font-weight: 400;
  color: var(--catrina-black);
  margin-bottom: 32px;
  line-height: 1.2;
}

.promise__body {
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: 400;
  color: var(--catrina-black);
  line-height: 1.8;
  margin-bottom: 16px;
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
}

.promise__body:last-child {
  margin-bottom: 0;
}


/* =============================================================================
   12. CTA
   ============================================================================= */

.cta {
  background-color: var(--amber-coat);
  min-height: 35vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: var(--spacing-xl) var(--spacing-lg);
  text-align: center;
}

.cta__container {
  max-width: 600px;
  width: 100%;
}

.cta__h2 {
  font-family: var(--font-serif);
  font-size: 40px;
  font-weight: 400;
  color: var(--catrina-black);
  margin-bottom: 20px;
  line-height: 1.2;
}

.cta__subtext {
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: 400;
  color: var(--catrina-black);
  line-height: 1.7;
}

/* Form */
.cta__form {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: 400px;
  margin: 30px auto 20px;
}

.cta__input {
  padding: 12px 16px;
  border: 1px solid var(--catrina-black);
  background: var(--ivory-paw);
  font-family: var(--font-sans);
  font-size: 15px;
  color: var(--catrina-black);
  width: 100%;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.cta__input::placeholder {
  color: var(--warm-cream);
}

.cta__input:focus {
  outline: none;
  border-color: var(--amber-coat);
  box-shadow: inset 0 0 0 2px var(--amber-coat);
}

.cta__input.error {
  border-color: #b94040;
}

.cta__button {
  padding: 12px 32px;
  background: var(--catrina-black);
  color: var(--ivory-paw);
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  width: 100%;
  transition: all 0.3s ease;
}

.cta__button:hover {
  background: var(--deep-amber);
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(28, 25, 23, 0.2);
}

.cta__button:active {
  transform: translateY(0);
  box-shadow: 0 2px 8px rgba(28, 25, 23, 0.1);
}

.cta__button:disabled {
  opacity: 0.65;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

.cta__disclaimer {
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 400;
  color: var(--catrina-black);
  opacity: 0.55;
}

.cta__success {
  text-align: center;
  padding: 20px 0;
}

.cta__success p {
  font-family: var(--font-sans);
  font-size: 16px;
  color: var(--catrina-black);
  font-weight: 500;
}

.form-error {
  font-family: var(--font-sans);
  font-size: 13px;
  color: var(--catrina-black);
  opacity: 0.7;
  text-align: center;
  margin-top: 6px;
}


/* =============================================================================
   13. FOOTER
   ============================================================================= */

.footer {
  background-color: var(--catrina-black);
  border-top: 2px solid var(--warm-cream);
  padding: var(--spacing-xl) var(--spacing-lg);
  min-height: 15vh;
}

.footer__container {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--spacing-lg);
}

.footer__brand,
.footer__tagline,
.footer__contact,
.footer__copyright,
.footer__strapline {
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 400;
  color: var(--ivory-paw);
  line-height: 1.8;
}

.footer__brand {
  font-family: var(--font-sans);
  font-size: 12px;
  margin-bottom: 4px;
}

.footer__contact a {
  color: var(--ivory-paw);
  transition: color 0.3s ease;
  position: relative;
}

.footer__contact a::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  height: 1px;
  background: var(--amber-coat);
  transition: width 0.3s ease;
}

.footer__contact a:hover {
  color: var(--amber-coat);
}

.footer__contact a:hover::after {
  width: 100%;
}


/* =============================================================================
   14. RESPONSIVE — TABLET (768px+)
   ============================================================================= */

@media (min-width: 768px) {

  .hero__h1 {
    font-size: 48px;
  }

  .story__container {
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-xl);
    align-items: stretch;
  }

  .moat__container {
    grid-template-columns: repeat(2, 1fr);
  }

  .cta__form {
    flex-direction: row;
    max-width: 500px;
  }

  .cta__input {
    flex: 1;
    width: auto;
  }

  .cta__button {
    width: auto;
  }

  .footer__container {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--spacing-xl);
  }
}


/* =============================================================================
   15. RESPONSIVE — DESKTOP (1200px+)
   ============================================================================= */

@media (min-width: 1200px) {

  .hero__h1 {
    font-size: 52px;
  }

  .moat__container {
    grid-template-columns: repeat(3, 1fr);
  }

  .footer__container {
    gap: var(--spacing-xl);
  }
}


/* =============================================================================
   16. MOBILE (<768px)
   ============================================================================= */

@media (max-width: 767px) {

  .header {
    padding: 0 20px;
  }

  .hero {
    padding: 60px 24px;
    padding-top: calc(60px + 60px);
    min-height: 60vh;
  }

  .hero__h1 {
    font-size: 36px;
  }

  .hero__h2 {
    font-size: 16px;
  }

  .story {
    padding: 60px 24px;
  }

  .story__column--right {
    padding: 28px;
  }

  .concierge {
    padding: 60px 24px;
  }

  .concierge__h2 {
    font-size: 32px;
  }

  .moat {
    padding: 60px 24px;
  }

  .moat__card {
    padding: 28px;
  }

  .vic {
    padding: 40px 24px;
  }

  .promise {
    padding: 60px 24px;
  }

  .promise__h2 {
    font-size: 30px;
  }

  .cta {
    padding: 60px 24px;
  }

  .cta__h2 {
    font-size: 30px;
  }

  .footer {
    padding: 60px 24px;
  }
}


/* =============================================================================
   17. REDUCED MOTION
   ============================================================================= */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}


/* =============================================================================
   18. HEADER — NAVIGATION
   ============================================================================= */

.header__nav {
  display: flex;
  gap: 32px;
  align-items: center;
}

.header__nav-link {
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 500;
  color: var(--catrina-black);
  letter-spacing: 0.02em;
  transition: color 0.3s ease;
  position: relative;
}

.header__nav-link::after {
  content: '';
  position: absolute;
  bottom: -3px;
  left: 0;
  width: 0;
  height: 1px;
  background: var(--amber-coat);
  transition: width 0.3s ease;
}

.header__nav-link:hover,
.header__nav-link--active {
  color: var(--amber-coat);
}

.header__nav-link:hover::after {
  width: 100%;
}


/* =============================================================================
   19. ECOSYSTEM SECTION — Homepage two-service cards
   ============================================================================= */

.ecosystem {
  background-color: var(--ivory-paw);
  padding: var(--spacing-2xl) var(--spacing-lg);
  border-top: 1px solid var(--warm-cream);
}

.ecosystem__container {
  max-width: 1200px;
  margin: 0 auto;
}

.ecosystem__overline {
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 500;
  color: var(--amber-coat);
  letter-spacing: 4px;
  text-transform: uppercase;
  display: block;
  text-align: center;
  margin-bottom: 16px;
}

.ecosystem__h2 {
  font-family: var(--font-serif);
  font-size: 36px;
  font-weight: 400;
  color: var(--catrina-black);
  text-align: center;
  margin-bottom: 56px;
  line-height: 1.2;
}

.ecosystem__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 30px;
}

.ecosystem__card {
  background: var(--warm-cream);
  padding: 48px 40px;
  border-top: 4px solid var(--amber-coat);
  transition: box-shadow 0.3s ease;
  display: flex;
  flex-direction: column;
}

.ecosystem__card:hover {
  box-shadow: var(--shadow-md);
}

.ecosystem__card--raahat {
  border-top-color: var(--catrinas-eye);
}

.ecosystem__card-label {
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: var(--amber-coat);
  margin-bottom: 12px;
  display: block;
}

.ecosystem__card--raahat .ecosystem__card-label {
  color: var(--catrinas-eye);
}

.ecosystem__card-h3 {
  font-family: var(--font-serif);
  font-size: 28px;
  font-weight: 400;
  color: var(--catrina-black);
  margin-bottom: 16px;
  line-height: 1.2;
}

.ecosystem__card-body {
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: 400;
  color: var(--catrina-black);
  line-height: 1.75;
  margin-bottom: 32px;
  flex: 1;
}

.ecosystem__card-link {
  display: inline-block;
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 600;
  color: var(--amber-coat);
  letter-spacing: 0.04em;
  transition: color 0.3s ease;
  align-self: flex-start;
}

.ecosystem__card--raahat .ecosystem__card-link {
  color: var(--catrinas-eye);
}

.ecosystem__card-link:hover {
  color: var(--deep-amber);
}


/* =============================================================================
   20. SUBPAGE HERO — Shared: Mannat and Raahat pages
   ============================================================================= */

.subpage-hero {
  background-color: var(--catrina-black);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 60px 40px;
  padding-top: calc(60px + 60px);
  text-align: center;
}

.subpage-hero__container {
  max-width: 900px;
  width: 100%;
}

.subpage-hero__overline {
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 500;
  color: var(--amber-coat);
  letter-spacing: 4px;
  text-transform: uppercase;
  display: block;
  margin-bottom: 20px;
}

.subpage-hero__h1 {
  font-family: var(--font-serif);
  font-size: 80px;
  font-weight: 400;
  color: var(--ivory-paw);
  line-height: 1.0;
  margin-bottom: 24px;
  letter-spacing: -0.02em;
}

.subpage-hero__sub {
  font-family: var(--font-sans);
  font-size: 20px;
  font-weight: 400;
  color: var(--warm-cream);
  line-height: 1.6;
  max-width: 600px;
  margin: 0 auto;
}

.subpage-hero__stat {
  display: inline-block;
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 500;
  color: var(--amber-coat);
  letter-spacing: 3px;
  text-transform: uppercase;
  margin-top: 32px;
}


/* =============================================================================
   21. INTRO — 2-col text + highlight (Mannat "Home Away From Home")
   ============================================================================= */

.intro {
  background-color: var(--ivory-paw);
  padding: var(--spacing-2xl) var(--spacing-lg);
}

.intro__container {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--spacing-xl);
}

.intro__h2 {
  font-family: var(--font-serif);
  font-size: 36px;
  font-weight: 400;
  color: var(--catrina-black);
  margin-bottom: 28px;
  line-height: 1.2;
}

.intro__body {
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: 400;
  color: var(--catrina-black);
  line-height: 1.8;
  margin-bottom: 16px;
}

.intro__body:last-child {
  margin-bottom: 0;
}

.intro__highlight {
  background: var(--warm-cream);
  padding: 40px;
  border-left: 3px solid var(--amber-coat);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.intro__highlight-label {
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--amber-coat);
  display: block;
  margin-bottom: 16px;
}

.intro__highlight-body {
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: 400;
  color: var(--catrina-black);
  line-height: 1.8;
}


/* =============================================================================
   22. FEATURES GRID — Mannat 4-feature safety section (dark bg)
   ============================================================================= */

.features {
  background-color: var(--catrina-black);
  padding: var(--spacing-2xl) var(--spacing-lg);
}

.features__container {
  max-width: 1200px;
  margin: 0 auto;
}

.features__h2 {
  font-family: var(--font-serif);
  font-size: 36px;
  font-weight: 400;
  color: var(--ivory-paw);
  text-align: center;
  margin-bottom: 56px;
  line-height: 1.2;
}

.features__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2px;
  margin-bottom: 48px;
}

.features__item {
  padding: 36px 32px;
  border-top: 3px solid var(--amber-coat);
  background: rgba(250, 247, 242, 0.04);
}

.features__item:nth-child(2) { border-top-color: var(--catrinas-eye); }
.features__item:nth-child(3) { border-top-color: var(--blush-nose); }
.features__item:nth-child(4) { border-top-color: var(--deep-amber); }

.features__item-title {
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 500;
  color: var(--amber-coat);
  letter-spacing: 3px;
  text-transform: uppercase;
  margin-bottom: 16px;
  display: block;
}

.features__item:nth-child(2) .features__item-title { color: var(--catrinas-eye); }
.features__item:nth-child(3) .features__item-title { color: var(--blush-nose); }
.features__item:nth-child(4) .features__item-title { color: var(--deep-amber); }

.features__item-body {
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: 400;
  color: var(--warm-cream);
  line-height: 1.75;
}

.features__note {
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: 500;
  color: var(--ivory-paw);
  text-align: center;
  line-height: 1.6;
  padding-top: 32px;
  border-top: 1px solid rgba(250, 247, 242, 0.12);
}


/* =============================================================================
   23. STAT SPLASH — Mannat "20,000+ Nights. Zero Escapes."
   ============================================================================= */

.stat-splash {
  background-color: var(--catrina-black);
  padding: var(--spacing-2xl) var(--spacing-lg);
  border-top: 1px solid rgba(250, 247, 242, 0.08);
  text-align: center;
}

.stat-splash__container {
  max-width: 800px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
}

.stat-splash__number {
  font-family: var(--font-serif);
  font-size: 72px;
  font-weight: 400;
  color: var(--ivory-paw);
  line-height: 1;
  margin-bottom: 8px;
}

.stat-splash__label {
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 500;
  color: var(--amber-coat);
  letter-spacing: 3px;
  text-transform: uppercase;
}


/* =============================================================================
   24. CARE — Mannat "Care That Understands Feline Nuance"
   ============================================================================= */

.care {
  background-color: var(--ivory-paw);
  padding: var(--spacing-2xl) var(--spacing-lg);
}

.care__container {
  max-width: 800px;
  margin: 0 auto;
  text-align: center;
}

.care__h2 {
  font-family: var(--font-serif);
  font-size: 36px;
  font-weight: 400;
  color: var(--catrina-black);
  margin-bottom: 32px;
  line-height: 1.2;
}

.care__body {
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: 400;
  color: var(--catrina-black);
  line-height: 1.8;
  margin-bottom: 20px;
}

.care__body:last-child {
  margin-bottom: 0;
}

.care__emphasis {
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: 500;
  color: var(--amber-coat);
  line-height: 1.8;
  margin-bottom: 20px;
}


/* =============================================================================
   25. DINING — Mannat boarding rates + meal plans
   ============================================================================= */

.dining {
  background-color: var(--ivory-paw);
  padding: var(--spacing-2xl) var(--spacing-lg);
  border-top: 1px solid var(--warm-cream);
}

.dining__container {
  max-width: 1200px;
  margin: 0 auto;
}

.dining__h2 {
  font-family: var(--font-serif);
  font-size: 36px;
  font-weight: 400;
  color: var(--catrina-black);
  text-align: center;
  margin-bottom: 12px;
  line-height: 1.2;
}

.dining__intro {
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: 400;
  color: var(--catrina-black);
  text-align: center;
  margin-bottom: 48px;
  opacity: 0.65;
}

.dining__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}

.dining__card {
  background: var(--warm-cream);
  padding: 36px 32px;
  border-top: 4px solid var(--amber-coat);
}

.dining__card:nth-child(2) { border-top-color: var(--catrinas-eye); }
.dining__card:nth-child(3) { border-top-color: var(--deep-amber); }
.dining__card:nth-child(4) { border-top-color: var(--blush-nose); }

.dining__card-name {
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 500;
  color: var(--amber-coat);
  letter-spacing: 3px;
  text-transform: uppercase;
  margin-bottom: 16px;
  display: block;
}

.dining__card:nth-child(2) .dining__card-name { color: var(--catrinas-eye); }
.dining__card:nth-child(3) .dining__card-name { color: var(--deep-amber); }
.dining__card:nth-child(4) .dining__card-name { color: var(--blush-nose); }

.dining__card-desc {
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: 400;
  color: var(--catrina-black);
  line-height: 1.75;
  margin-bottom: 20px;
}

.dining__card-price {
  font-family: var(--font-serif);
  font-size: 28px;
  font-weight: 400;
  color: var(--catrina-black);
  display: block;
}

.dining__card-note {
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 400;
  color: var(--catrina-black);
  opacity: 0.5;
  margin-top: 4px;
}


/* =============================================================================
   26. VIC DETAIL — Mannat full VIC Circle section
   ============================================================================= */

.vic-detail {
  background-color: var(--catrina-black);
  padding: var(--spacing-2xl) var(--spacing-lg);
}

.vic-detail__container {
  max-width: 800px;
  margin: 0 auto;
}

.vic-detail__h2 {
  font-family: var(--font-serif);
  font-size: 36px;
  font-weight: 400;
  color: var(--ivory-paw);
  margin-bottom: 20px;
  line-height: 1.2;
}

.vic-detail__intro {
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: 400;
  color: var(--warm-cream);
  line-height: 1.75;
  margin-bottom: 36px;
}

.vic-detail__list {
  margin-bottom: 36px;
}

.vic-detail__list li {
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: 400;
  color: var(--ivory-paw);
  line-height: 1.7;
  padding-bottom: 16px;
  padding-left: 24px;
  position: relative;
}

.vic-detail__list li:last-child {
  padding-bottom: 0;
}

.vic-detail__list li::before {
  content: '—';
  color: var(--amber-coat);
  position: absolute;
  left: 0;
  top: 0;
  line-height: 1.7;
}

.vic-detail__note {
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 400;
  color: var(--warm-cream);
  opacity: 0.55;
  font-style: italic;
  border-top: 1px solid rgba(250, 247, 242, 0.12);
  padding-top: 24px;
}


/* =============================================================================
   27. ENTRY STANDARDS — Mannat admission requirements
   ============================================================================= */

.entry {
  background-color: var(--ivory-paw);
  padding: var(--spacing-2xl) var(--spacing-lg);
}

.entry__container {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--spacing-xl);
}

.entry__h2 {
  font-family: var(--font-serif);
  font-size: 36px;
  font-weight: 400;
  color: var(--catrina-black);
  margin-bottom: 20px;
  line-height: 1.2;
}

.entry__intro {
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: 400;
  color: var(--catrina-black);
  line-height: 1.75;
  margin-bottom: 24px;
}

.entry__list li {
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: 400;
  color: var(--catrina-black);
  line-height: 1.75;
  padding-bottom: 12px;
  padding-left: 20px;
  position: relative;
}

.entry__list li:last-child {
  padding-bottom: 0;
}

.entry__list li::before {
  content: '•';
  color: var(--amber-coat);
  position: absolute;
  left: 0;
  top: 0;
  line-height: 1.75;
}

.entry__note {
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: 400;
  color: var(--catrina-black);
  line-height: 1.75;
  margin-top: 20px;
}

.entry__foundation {
  background: var(--warm-cream);
  padding: 40px;
  border-left: 3px solid var(--catrinas-eye);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-self: stretch;
}

.entry__foundation-body {
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: 400;
  color: var(--catrina-black);
  line-height: 1.9;
}

.entry__foundation-body strong {
  font-weight: 500;
}


/* =============================================================================
   28. RESERVE — Mannat contact / booking CTA
   ============================================================================= */

.reserve {
  background-color: var(--catrina-black);
  padding: var(--spacing-2xl) var(--spacing-lg);
  text-align: center;
}

.reserve__container {
  max-width: 560px;
  margin: 0 auto;
}

.reserve__h2 {
  font-family: var(--font-serif);
  font-size: 40px;
  font-weight: 400;
  color: var(--ivory-paw);
  margin-bottom: 48px;
  line-height: 1.2;
}

.reserve__item {
  display: block;
  margin-bottom: 24px;
}

.reserve__item:last-child {
  margin-bottom: 0;
}

.reserve__item-label {
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 500;
  color: var(--warm-cream);
  opacity: 0.45;
  letter-spacing: 3px;
  text-transform: uppercase;
  display: block;
  margin-bottom: 6px;
}

.reserve__item-value {
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: 400;
  color: var(--warm-cream);
  line-height: 1.6;
}

.reserve__item-value a {
  color: var(--amber-coat);
  transition: opacity 0.3s ease;
}

.reserve__item-value a:hover {
  opacity: 0.75;
}


/* =============================================================================
   29. HOW IT WORKS — Raahat WhatsApp interaction section
   ============================================================================= */

.how {
  background-color: var(--ivory-paw);
  padding: var(--spacing-2xl) var(--spacing-lg);
}

.how__container {
  max-width: 900px;
  margin: 0 auto;
  text-align: center;
}

.how__overline {
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 500;
  color: var(--amber-coat);
  letter-spacing: 4px;
  text-transform: uppercase;
  display: block;
  margin-bottom: 16px;
}

.how__h2 {
  font-family: var(--font-serif);
  font-size: 36px;
  font-weight: 400;
  color: var(--catrina-black);
  margin-bottom: 16px;
  line-height: 1.2;
}

.how__body {
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: 400;
  color: var(--catrina-black);
  line-height: 1.75;
  margin-bottom: 40px;
}

.how__examples {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: 480px;
  margin: 0 auto;
  text-align: left;
}

.how__bubble {
  background: var(--warm-cream);
  padding: 14px 20px;
  font-family: var(--font-sans);
  font-size: 15px;
  color: var(--catrina-black);
  line-height: 1.5;
  border-left: 3px solid var(--amber-coat);
  font-style: italic;
}


/* =============================================================================
   30. MEMORY — Raahat "It Knows Your Cat" section
   ============================================================================= */

.memory {
  background-color: var(--catrina-black);
  padding: var(--spacing-2xl) var(--spacing-lg);
}

.memory__container {
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--spacing-xl);
}

.memory__h2 {
  font-family: var(--font-serif);
  font-size: 36px;
  font-weight: 400;
  color: var(--ivory-paw);
  margin-bottom: 20px;
  line-height: 1.2;
}

.memory__body {
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: 400;
  color: var(--warm-cream);
  line-height: 1.8;
  margin-bottom: 16px;
}

.memory__body:last-child {
  margin-bottom: 0;
}

.memory__panel {
  background: rgba(250, 247, 242, 0.05);
  padding: 36px 32px;
  border-top: 3px solid var(--catrinas-eye);
}

.memory__panel-title {
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 500;
  color: var(--catrinas-eye);
  letter-spacing: 3px;
  text-transform: uppercase;
  display: block;
  margin-bottom: 20px;
}

.memory__list li {
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: 400;
  color: var(--ivory-paw);
  line-height: 1.75;
  padding-bottom: 14px;
  padding-left: 20px;
  position: relative;
}

.memory__list li:last-child {
  padding-bottom: 0;
}

.memory__list li::before {
  content: '—';
  color: var(--catrinas-eye);
  position: absolute;
  left: 0;
  top: 0;
  line-height: 1.75;
}


/* =============================================================================
   31. RESPONSIVE ADDITIONS — New sections
   ============================================================================= */

@media (min-width: 768px) {
  .ecosystem__grid        { grid-template-columns: 1fr 1fr; }
  .intro__container       { grid-template-columns: 1fr 1fr; align-items: start; }
  .features__grid         { grid-template-columns: repeat(2, 1fr); }
  .dining__grid           { grid-template-columns: repeat(2, 1fr); }
  .entry__container       { grid-template-columns: 1fr 1fr; }
  .memory__container      { grid-template-columns: 1fr 1fr; align-items: start; }
}

@media (min-width: 1200px) {
  .dining__grid { grid-template-columns: repeat(4, 1fr); }
}

@media (max-width: 767px) {
  .header__nav            { gap: 20px; }
  .subpage-hero           { padding: 48px 24px; padding-top: calc(48px + 60px); }
  .subpage-hero__h1       { font-size: 52px; }
  .image-strip--hero      { padding-top: 60px; }
  .stat-splash__number    { font-size: 48px; }
  .stat-splash__container { gap: 20px; }

  .intro,
  .features,
  .care,
  .dining,
  .vic-detail,
  .entry,
  .reserve,
  .how,
  .memory { padding: 60px 24px; }
}


/* =============================================================================
   32. IMAGE PLACEHOLDERS
   ============================================================================= */

.img-placeholder {
  background: var(--warm-cream);
  border: 2px dashed var(--amber-coat);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 320px;
  width: 100%;
  gap: 12px;
}

.img-placeholder--dark {
  background: rgba(250, 247, 242, 0.05);
  border-color: rgba(194, 119, 46, 0.35);
}

.img-placeholder__number {
  font-family: var(--font-serif);
  font-size: 48px;
  font-weight: 400;
  color: var(--amber-coat);
  opacity: 0.3;
  line-height: 1;
}

.img-placeholder__label {
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 500;
  color: var(--catrina-black);
  opacity: 0.35;
  letter-spacing: 3px;
  text-transform: uppercase;
  text-align: center;
  padding: 0 24px;
}

.img-placeholder--dark .img-placeholder__label {
  color: var(--ivory-paw);
}

/* Full-width image strip between sections */
.image-strip .img-placeholder {
  min-height: 440px;
  border-left: none;
  border-right: none;
  border-radius: 0;
}

@media (max-width: 767px) {
  .img-placeholder         { min-height: 220px; }
  .image-strip .img-placeholder { min-height: 260px; }
}


/* =============================================================================
   34. SITE IMAGES — replacing placeholders
   ============================================================================= */

/* Story section — Catrina photo (right col, grows to fill remaining space) */
.story__photo {
  width: calc(100% + 80px);
  margin-left: -40px;
  margin-right: -40px;
  margin-bottom: -40px;
  margin-top: 32px;
  flex: 1;
  min-height: 200px;
  object-fit: cover;
  object-position: center 30%;
  display: block;
}

/* Ecosystem cards — image at top of card */
.ecosystem__card-image {
  height: 240px;
  margin: -48px -40px 36px;
  overflow: hidden;
}

.ecosystem__card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Philosophy / concierge section — right col image */
.concierge__image {
  width: 100%;
  height: auto;
  display: block;
}

/* Image strip — full-width, no cropping */
.image-strip {
  width: 100%;
  overflow: hidden;
}

/* When the strip IS the hero — push down past the fixed 60px header */
.image-strip--hero {
  padding-top: 60px;
  background-color: var(--catrina-black);
}

.image-strip__img {
  width: 100%;
  height: auto;
  display: block;
}

/* Care section — right col image */
.care__image {
  width: 100%;
  height: auto;
  display: block;
}

/* VIC detail section — right col image */
.vic-detail__image {
  width: 100%;
  height: auto;
  display: block;
}

/* Raahat how section — right col image */
.how__image {
  width: 100%;
  height: auto;
  display: block;
}

/* Promise section — revert to single column (no image) */
.promise {
  text-align: center;
  align-items: center;
}

.promise__container {
  display: block;
  max-width: 800px;
}

.promise__text .promise__body {
  margin-left: auto;
  margin-right: auto;
  max-width: 800px;
}

@media (min-width: 768px) {
  .promise__container {
    display: block;
    grid-template-columns: unset;
  }
}

@media (max-width: 767px) {
  .ecosystem__card-image {
    height: 180px;
    margin: -28px -28px 28px;
  }
}


/* =============================================================================
   33. LAYOUT IMPROVEMENTS — 2-col text sections
   ============================================================================= */

/* Override centered/narrow-width concierge section */
.concierge {
  min-height: unset;
  text-align: left;
  align-items: stretch;
}

.concierge__container {
  max-width: 1200px;
  margin: 0 auto;
}

.concierge__body {
  margin-left: 0;
  margin-right: 0;
  max-width: none;
}

/* Override centered promise section */
.promise {
  min-height: unset;
  text-align: left;
  align-items: stretch;
}

.promise__container {
  max-width: 1200px;
  margin: 0 auto;
}

.promise__text .promise__body {
  margin-left: 0;
  margin-right: 0;
  max-width: none;
}

/* Override centered care section */
.care__container {
  max-width: 1200px;
  text-align: left;
}

/* Widen VIC detail section */
.vic-detail__container {
  max-width: 1200px;
}

/* Override centered how section */
.how__container {
  max-width: 1200px;
  text-align: left;
}

.how__examples {
  margin-left: 0;
}

/* 2-col desktop layouts */
@media (min-width: 768px) {
  .concierge__container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr auto;
    grid-template-areas:
      "header header"
      "body   photo";
    gap: 0 80px;
    min-height: 60vh;
  }

  .concierge__header {
    grid-area: header;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding-bottom: 20px;
  }

  .concierge__body-text {
    grid-area: body;
  }

  .concierge__image {
    grid-area: photo;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  .promise__container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: center;
  }

  .care__container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: center;
  }

  .vic-detail__container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: start;
  }

  .how__container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: start;
  }

  .how__examples {
    max-width: none;
  }
}


/* =============================================================================
   35. PROMISE SECTION — single-column centred (no image on raahat.html)
   This overrides the grid set in section 33 above.
   ============================================================================= */

.promise {
  text-align: center;
  align-items: center;
  justify-content: center;
}

.promise__container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  max-width: 800px;
  margin: 0 auto;
}

.promise__h2 {
  text-align: center;
}

.promise__body {
  text-align: center;
  max-width: 700px;
  margin-bottom: 16px;
  margin-left: 0;
  margin-right: 0;
}

.promise__body:last-child {
  margin-bottom: 0;
}

@media (min-width: 768px) {
  .promise__container {
    display: flex;
    flex-direction: column;
    gap: 0;
    grid-template-columns: unset;
  }
}


/* =============================================================================
   36. DEMO — Try Raahat interactive flowchart page
   WhatsApp-style chat simulation. Single-column. No side panels.
   ============================================================================= */

.demo {
  background-color: var(--ivory-paw);
  padding: var(--spacing-2xl) var(--spacing-lg);
  border-top: 1px solid var(--warm-cream);
}

.demo__container {
  max-width: 720px;
  margin: 0 auto;
}

/* Demo intro note */
.demo__note {
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: 400;
  color: var(--catrina-black);
  line-height: 1.7;
  opacity: 0.65;
  margin-bottom: var(--spacing-xl);
  max-width: 560px;
}

/* Step label */
.demo__step-label {
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 500;
  color: var(--catrina-black);
  text-transform: uppercase;
  letter-spacing: 4px;
  display: block;
  margin-bottom: var(--spacing-md);
  opacity: 0.5;
}

/* Cat cards row */
.demo__cat-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--spacing-sm);
  margin-bottom: var(--spacing-xl);
}

.demo__cat-card {
  border: 1px solid var(--warm-cream);
  background: var(--ivory-paw);
  padding: var(--spacing-md);
  text-align: left;
  cursor: pointer;
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
  width: 100%;
  display: block;
}

.demo__cat-card:hover {
  border-color: var(--amber-coat);
}

.demo__cat-card--selected {
  border-color: var(--catrina-black);
  box-shadow: var(--shadow-sm);
}

.demo__cat-initial {
  width: 40px;
  height: 40px;
  background: var(--catrina-black);
  color: var(--ivory-paw);
  font-family: var(--font-serif);
  font-size: 20px;
  font-weight: 400;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--spacing-sm);
}

.demo__cat-initial[data-cat=bella]  { background: var(--amber-coat); }
.demo__cat-initial[data-cat=oliver] { background: var(--catrinas-eye); }
.demo__cat-initial[data-cat=miso]   { background: var(--blush-nose); color: var(--catrina-black); }

.demo__cat-card-name {
  font-family: var(--font-serif);
  font-size: 20px;
  font-weight: 400;
  color: var(--catrina-black);
  display: block;
  margin-bottom: 4px;
}

.demo__cat-card-age {
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 500;
  color: var(--amber-coat);
  text-transform: uppercase;
  letter-spacing: 2px;
  display: block;
  margin-bottom: 6px;
}

.demo__cat-card-trait {
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 400;
  color: var(--catrina-black);
  line-height: 1.5;
  opacity: 0.6;
}

/* Cat confirmed strip */
.demo__cat-confirmed-tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--catrinas-eye);
  color: var(--ivory-paw);
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 500;
  padding: 8px 16px;
  margin-bottom: var(--spacing-lg);
}

/* Situation buttons */
.demo__sit-row {
  display: grid;
  gap: 6px;
  margin-bottom: var(--spacing-xl);
}

.demo__sit-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-md);
  border: 1px solid var(--warm-cream);
  background: var(--ivory-paw);
  padding: var(--spacing-md) var(--spacing-lg);
  text-align: left;
  cursor: pointer;
  transition: border-color 0.25s ease, background 0.25s ease;
  width: 100%;
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: 400;
  color: var(--catrina-black);
  line-height: 1.5;
}

.demo__sit-btn:hover {
  border-color: var(--catrina-black);
  background: var(--warm-cream);
}

.demo__sit-arrow {
  color: var(--amber-coat);
  font-size: 16px;
  flex-shrink: 0;
}

/* Chat screen */
.demo__chat {
  max-width: 480px;
  margin: 0 auto;
  background: var(--ivory-paw);
  border: 1px solid var(--warm-cream);
  box-shadow: var(--shadow-md);
  overflow: hidden;
}

.demo__chat-bar {
  background: var(--catrina-black);
  padding: 14px var(--spacing-lg);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-sm);
}

.demo__chat-back {
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 400;
  color: var(--warm-cream);
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  opacity: 0.65;
  transition: opacity 0.2s;
  flex-shrink: 0;
  white-space: nowrap;
}

.demo__chat-back:hover { opacity: 1; }

.demo__chat-name {
  font-family: var(--font-serif);
  font-size: 18px;
  font-weight: 400;
  color: var(--ivory-paw);
  text-align: center;
  flex: 1;
}

.demo__chat-restart {
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 400;
  color: var(--warm-cream);
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  opacity: 0.65;
  transition: opacity 0.2s;
  flex-shrink: 0;
}

.demo__chat-restart:hover { opacity: 1; }

.demo__chat-feed {
  min-height: 360px;
  max-height: 460px;
  overflow-y: auto;
  padding: var(--spacing-lg);
  display: flex;
  flex-direction: column;
  gap: 10px;
  scroll-behavior: smooth;
}

/* Message bubbles */
.demo__bubble {
  max-width: 82%;
  padding: 10px 14px;
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.65;
  color: var(--catrina-black);
}

.demo__bubble--assistant {
  background: var(--warm-cream);
  align-self: flex-start;
  border-radius: 2px 16px 16px 16px;
}

.demo__bubble--user {
  background: var(--blush-nose);
  align-self: flex-end;
  border-radius: 16px 2px 16px 16px;
}

/* Options footer */
.demo__chat-options {
  border-top: 1px solid var(--warm-cream);
  padding: 10px var(--spacing-md);
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 200px;
  overflow-y: auto;
}

.demo__option {
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 400;
  color: var(--catrina-black);
  border: 1px solid var(--warm-cream);
  background: var(--ivory-paw);
  padding: 10px 14px;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s;
  width: 100%;
  line-height: 1.5;
}

.demo__option:hover {
  border-color: var(--amber-coat);
  background: var(--warm-cream);
}

/* End state */
.demo__end-note {
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 400;
  color: var(--catrina-black);
  line-height: 1.6;
  opacity: 0.6;
  font-style: italic;
  margin-bottom: var(--spacing-sm);
}

.demo__end-btn {
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 500;
  color: var(--ivory-paw);
  background: var(--catrina-black);
  border: none;
  padding: 11px var(--spacing-lg);
  cursor: pointer;
  transition: background 0.25s ease;
  width: 100%;
}

.demo__end-btn:hover {
  background: var(--deep-amber);
}

/* Mobile */
@media (max-width: 767px) {
  .demo {
    padding: 60px 24px;
  }

  .demo__cat-row {
    grid-template-columns: 1fr;
  }

  .demo__chat {
    max-width: 100%;
  }

  .demo__chat-feed {
    min-height: 300px;
    max-height: 380px;
  }
}