/* ============================================================================
   Green Country Front Desk — design system
   Deep forest green, warm brass, dark confident hero, serif display.
   Mobile-first. Every color painted explicitly; nothing inherited.

   FONTS: Display is Georgia — a real serif with character that is already on
   every device, so it costs zero milliseconds and zero render-blocking. Body
   is the system UI stack, which at 17px is the most readable option there is.
   The "generic AI look" comes from color, layout and spacing, not from body
   text — and those are handled deliberately below. If you later want a
   self-hosted display face (Fraunces and Playfair Display both suit this),
   drop the @font-face block into the marked slot and change --font-display.
   That is the whole change.
   ========================================================================= */

/* --- SELF-HOSTED FONT SLOT ------------------------------------------------
@font-face {
  font-family: 'Fraunces';
  src: url('/assets/fonts/fraunces-subset.woff2') format('woff2');
  font-weight: 400 700; font-display: swap;
}
--------------------------------------------------------------------------- */

:root {
  /* Greens */
  --ink:          #0B1410;
  --forest-900:   #0F2318;
  --forest-800:   #143024;
  --forest-700:   #1B4332;
  --forest-600:   #2D6A4F;
  --forest-500:   #40916C;
  --forest-300:   #74C69D;

  /* Brass */
  --brass-700:    #8C6222;
  --brass-600:    #A8762B;
  --brass-500:    #C8963E;
  --brass-400:    #DFB463;
  --brass-200:    #F0DDB4;

  /* Paper */
  --paper:        #FAF7F0;
  --paper-alt:    #F3EEE3;
  --paper-edge:   #E5DDCC;

  /* Text */
  --text:         #16211B;
  --text-muted:   #55635B;
  --text-on-dark: #EDE7DA;
  --text-on-dark-muted: #A9B5AC;

  /* Feedback */
  --warn:         #A33A2A;

  /* Type */
  --font-display: Georgia, 'Iowan Old Style', 'Palatino Linotype', 'Times New Roman', serif;
  --font-body:    system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-mono:    ui-monospace, 'Cascadia Mono', 'SF Mono', Menlo, Consolas, monospace;

  /* Type scale — fluid, mobile-first */
  --fs-xs:   0.8125rem;
  --fs-sm:   0.9375rem;
  --fs-base: 1.0625rem;
  --fs-md:   clamp(1.125rem, 1.05rem + 0.4vw, 1.3125rem);
  --fs-lg:   clamp(1.375rem, 1.2rem + 0.8vw, 1.75rem);
  --fs-xl:   clamp(1.75rem, 1.4rem + 1.6vw, 2.5rem);
  --fs-2xl:  clamp(2.125rem, 1.6rem + 2.4vw, 3.5rem);
  --fs-3xl:  clamp(2.5rem, 1.7rem + 3.6vw, 4.5rem);

  /* Space */
  --sp-1: 0.25rem;  --sp-2: 0.5rem;   --sp-3: 0.75rem;  --sp-4: 1rem;
  --sp-5: 1.5rem;   --sp-6: 2rem;     --sp-7: 3rem;     --sp-8: 4rem;
  --sp-9: 6rem;     --sp-10: 8rem;

  --radius:    10px;
  --radius-lg: 18px;
  --measure:   34rem;

  --shadow-sm: 0 1px 2px rgba(11,20,16,.06), 0 2px 8px rgba(11,20,16,.05);
  --shadow-md: 0 2px 6px rgba(11,20,16,.07), 0 12px 32px rgba(11,20,16,.09);
  --shadow-lg: 0 8px 20px rgba(11,20,16,.10), 0 30px 70px rgba(11,20,16,.14);
}

/* ---------- Reset-ish ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}
body {
  margin: 0;
  background: var(--paper);
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--fs-base);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
img, svg, video { max-width: 100%; height: auto; display: block; }
a { color: var(--forest-600); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--brass-700); }
:focus-visible { outline: 3px solid var(--brass-500); outline-offset: 2px; border-radius: 3px; }
button { font: inherit; }

/* ---------- Layout ---------- */
.container { width: 100%; max-width: 68rem; margin-inline: auto; padding-inline: var(--sp-5); }
.container--narrow { max-width: 46rem; }
.section { padding-block: var(--sp-8); }
@media (min-width: 48rem) { .section { padding-block: var(--sp-9); } }
.section--paper { background: var(--paper); }
.section--alt   { background: var(--paper-alt); }
.section--dark  { background: var(--forest-900); color: var(--text-on-dark); }
.section--dark h2, .section--dark h3 { color: var(--paper); }
.section--dark a { color: var(--brass-400); }
.section--ink   { background: var(--ink); color: var(--text-on-dark); }

/* ---------- Type ---------- */
h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 700; line-height: 1.12; letter-spacing: -0.015em; margin: 0 0 var(--sp-4); color: var(--text); }
h1 { font-size: var(--fs-3xl); }
h2 { font-size: var(--fs-2xl); }
h3 { font-size: var(--fs-lg); }
h4 { font-size: var(--fs-md); }
p  { margin: 0 0 var(--sp-4); max-width: var(--measure); }
.section--dark p { color: var(--text-on-dark); }

.eyebrow {
  font-family: var(--font-body); font-size: var(--fs-xs); font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; color: var(--brass-600);
  margin: 0 0 var(--sp-3);
}
.section--dark .eyebrow { color: var(--brass-400); }
.lede { font-size: var(--fs-md); color: var(--text-muted); max-width: 40rem; }
.section--dark .lede { color: var(--text-on-dark-muted); }
.small { font-size: var(--fs-sm); color: var(--text-muted); }
.section--dark .small { color: var(--text-on-dark-muted); }
.center { text-align: center; margin-inline: auto; }
.center p { margin-inline: auto; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
  padding: 0.875rem 1.5rem; border-radius: var(--radius); border: 2px solid transparent;
  font-weight: 650; font-size: var(--fs-base); line-height: 1.2;
  text-decoration: none; cursor: pointer;
  transition: transform .12s ease, background-color .16s ease, border-color .16s ease, color .16s ease;
}
.btn:active { transform: translateY(1px); }
.btn--primary { background: var(--brass-500); color: var(--ink); border-color: var(--brass-500); }
.btn--primary:hover { background: var(--brass-400); border-color: var(--brass-400); color: var(--ink); }
.btn--ghost { background: transparent; color: var(--paper); border-color: rgba(237,231,218,.38); }
.btn--ghost:hover { border-color: var(--paper); color: var(--paper); background: rgba(237,231,218,.07); }
.btn--dark { background: var(--forest-700); color: var(--paper); border-color: var(--forest-700); }
.btn--dark:hover { background: var(--forest-600); border-color: var(--forest-600); color: var(--paper); }
.btn[disabled], .btn--disabled { opacity: .5; cursor: not-allowed; pointer-events: none; }
.btn-row { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-top: var(--sp-5); }

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 60;
  background: var(--forest-900);
  border-bottom: 1px solid rgba(237,231,218,.10);
}
.site-header__inner { display: flex; align-items: center; gap: var(--sp-4); min-height: 4.25rem; }
.brand { display: flex; align-items: center; gap: var(--sp-3); text-decoration: none; margin-right: auto; }
.brand svg { width: 2.25rem; height: 2.25rem; flex: none; }

/* The mark has three colour hooks. `color` paints the robot's head,
   --logo-accent the headset, --logo-screen the eyes and mouth. The last one
   must contrast with the head or the face disappears, so it is set per
   context rather than left to the SVG's own fallback. */
.brand svg, .chat-mark {
  color: var(--paper);
  --logo-accent: var(--brass-500);
  --logo-screen: var(--forest-900);
}
.site-footer .brand svg { --logo-screen: var(--ink); }
.brand__name {
  font-family: var(--font-display); font-weight: 700; font-size: 1.0625rem; line-height: 1.15;
  color: var(--paper); letter-spacing: -0.01em;
}
.brand__name span { display: block; font-family: var(--font-body); font-size: .6875rem; font-weight: 600;
  letter-spacing: .13em; text-transform: uppercase; color: var(--brass-400); }
.nav { display: none; gap: var(--sp-5); align-items: center; }
.nav a { color: var(--text-on-dark); text-decoration: none; font-size: var(--fs-sm); font-weight: 550; }
.nav a:hover { color: var(--brass-400); }
.nav-toggle { display: inline-flex; background: none; border: 1px solid rgba(237,231,218,.3); color: var(--paper);
  border-radius: 8px; padding: .5rem .75rem; cursor: pointer; font-size: var(--fs-sm); }
.mobile-nav { display: none; flex-direction: column; gap: var(--sp-1); padding: var(--sp-4) 0 var(--sp-5); border-top: 1px solid rgba(237,231,218,.1); }
.mobile-nav.is-open { display: flex; }
.mobile-nav a { color: var(--text-on-dark); text-decoration: none; padding: .6rem 0; font-size: var(--fs-md); }
@media (min-width: 60rem) {
  .nav { display: flex; }
  .nav-toggle { display: none; }
  .mobile-nav { display: none !important; }
}

/* ---------- Hero ---------- */
.hero {
  background:
    radial-gradient(120% 90% at 82% 8%, rgba(45,106,79,.42) 0%, rgba(11,20,16,0) 62%),
    linear-gradient(174deg, var(--forest-900) 0%, var(--ink) 100%);
  color: var(--text-on-dark);
  padding-block: var(--sp-8) var(--sp-9);
  position: relative; overflow: hidden;
}
.hero::after {
  content: ""; position: absolute; inset: auto 0 0 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(200,150,62,.5), transparent);
}
.hero h1 { color: var(--paper); max-width: 18ch; }
.hero__lede { font-size: var(--fs-md); color: var(--text-on-dark-muted); max-width: 42ch; }
.hero__grid { display: grid; gap: var(--sp-7); }
@media (min-width: 62rem) {
  .hero { padding-block: var(--sp-9) var(--sp-10); }
  .hero__grid { grid-template-columns: 1.05fr .95fr; align-items: center; gap: var(--sp-8); }
}
.hero__note { margin-top: var(--sp-5); font-size: var(--fs-sm); color: var(--text-on-dark-muted); }

/* ---------- Phone mock / sample call ---------- */
.phone {
  --phone-bg: #0E1B14;
  width: 100%; max-width: 21rem; margin-inline: auto;
  background: var(--phone-bg);
  border: 1px solid rgba(237,231,218,.16);
  border-radius: 26px; padding: var(--sp-4);
  box-shadow: var(--shadow-lg);
}
.phone__bar { display: flex; align-items: center; gap: var(--sp-2); padding-bottom: var(--sp-3);
  border-bottom: 1px solid rgba(237,231,218,.12); margin-bottom: var(--sp-4); }
.phone__dot { width: .5rem; height: .5rem; border-radius: 50%; background: var(--forest-300); flex: none;
  animation: pulse 2s ease-in-out infinite; }
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: .35; } }
.phone__label { font-size: var(--fs-xs); letter-spacing: .1em; text-transform: uppercase;
  color: var(--text-on-dark-muted); font-weight: 700; }
.phone__log { display: flex; flex-direction: column; gap: var(--sp-3); min-height: 20rem; }
.bubble { max-width: 88%; padding: .6rem .875rem; border-radius: 14px; font-size: var(--fs-sm); line-height: 1.5; }
.bubble--them { align-self: flex-start; background: rgba(237,231,218,.10); color: var(--text-on-dark); border-bottom-left-radius: 5px; }
.bubble--ai { align-self: flex-end; background: var(--forest-600); color: #fff; border-bottom-right-radius: 5px; }
.bubble--sms { align-self: center; max-width: 96%; background: rgba(200,150,62,.14);
  border: 1px dashed rgba(200,150,62,.45); color: var(--brass-200); font-size: var(--fs-xs); text-align: center; }
.bubble__who { display: block; font-size: .625rem; letter-spacing: .1em; text-transform: uppercase;
  opacity: .72; margin-bottom: .15rem; font-weight: 700; }
.typing { display: inline-flex; gap: 3px; }
.typing i { width: 5px; height: 5px; border-radius: 50%; background: currentColor; opacity: .5;
  animation: blink 1.2s infinite; }
.typing i:nth-child(2) { animation-delay: .2s; } .typing i:nth-child(3) { animation-delay: .4s; }
@keyframes blink { 0%,60%,100% { opacity: .25; } 30% { opacity: .9; } }
.phone__replay { margin-top: var(--sp-4); width: 100%; background: transparent; color: var(--brass-400);
  border: 1px solid rgba(200,150,62,.4); border-radius: 8px; padding: .55rem; cursor: pointer; font-size: var(--fs-sm); }
.phone__replay:hover { background: rgba(200,150,62,.1); }

/* ---------- Cards & grids ---------- */
.grid { display: grid; gap: var(--sp-5); }
@media (min-width: 40rem) { .grid--2 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 56rem) { .grid--3 { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 40rem) { .grid--3 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 56rem) { .grid--3 { grid-template-columns: repeat(3, 1fr); } }
.card {
  background: #fff; border: 1px solid var(--paper-edge); border-radius: var(--radius-lg);
  padding: var(--sp-5); box-shadow: var(--shadow-sm);
}
.card h3 { margin-bottom: var(--sp-2); }
.card p:last-child { margin-bottom: 0; }
.card--dark { background: var(--forest-800); border-color: rgba(237,231,218,.14); color: var(--text-on-dark); }
.card--dark h3 { color: var(--paper); }
.card--link { text-decoration: none; color: inherit; display: block; transition: transform .14s ease, box-shadow .14s ease; }
.card--link:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); color: inherit; }
.card__tag { font-size: var(--fs-xs); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--brass-600); }

/* Module cards */
.module__name { font-family: var(--font-body); font-size: var(--fs-xs); font-weight: 800;
  letter-spacing: .18em; text-transform: uppercase; color: var(--brass-500); margin-bottom: var(--sp-2); }
.module ul { margin: var(--sp-3) 0 0; padding-left: 1.1rem; }
.module li { margin-bottom: .4rem; font-size: var(--fs-sm); }

/* ---------- Calculator ---------- */
.calc { background: var(--forest-900); color: var(--text-on-dark); border-radius: var(--radius-lg);
  padding: var(--sp-5); box-shadow: var(--shadow-lg); }
@media (min-width: 48rem) { .calc { padding: var(--sp-7); } }
.calc__grid { display: grid; gap: var(--sp-6); }
@media (min-width: 54rem) { .calc__grid { grid-template-columns: 1fr 1fr; gap: var(--sp-8); } }
.field { margin-bottom: var(--sp-5); }
.field label { display: block; font-size: var(--fs-sm); font-weight: 650; margin-bottom: var(--sp-2); color: var(--paper); }
.field__hint { font-size: var(--fs-xs); color: var(--text-on-dark-muted); margin-top: var(--sp-2); }
.input-money { position: relative; display: flex; align-items: center; }
.input-money span { position: absolute; left: .875rem; color: var(--text-on-dark-muted); font-size: var(--fs-md); }
.calc input[type="number"] {
  width: 100%; background: rgba(11,20,16,.55); border: 1px solid rgba(237,231,218,.22);
  color: var(--paper); border-radius: var(--radius); padding: .75rem .875rem; font-size: var(--fs-md);
  font-family: var(--font-body);
}
.input-money input { padding-left: 1.9rem !important; }
.calc input[type="range"] { width: 100%; accent-color: var(--brass-500); }
.calc__rangeval { font-weight: 700; color: var(--brass-400); }
.calc__result { background: rgba(11,20,16,.5); border: 1px solid rgba(200,150,62,.3);
  border-radius: var(--radius); padding: var(--sp-5); }
.calc__big { font-family: var(--font-display); font-size: var(--fs-2xl); font-weight: 700;
  color: var(--brass-400); line-height: 1.05; margin: var(--sp-2) 0; }
.calc__working { list-style: none; margin: var(--sp-4) 0 0; padding: var(--sp-4) 0 0;
  border-top: 1px solid rgba(237,231,218,.14); font-size: var(--fs-sm); }
.calc__working li { display: flex; justify-content: space-between; gap: var(--sp-4); padding: .3rem 0;
  color: var(--text-on-dark-muted); }
.calc__working li b { color: var(--paper); font-weight: 650; white-space: nowrap; }
.calc__working li.is-total { border-top: 1px solid rgba(237,231,218,.14); margin-top: .4rem; padding-top: .6rem; color: var(--paper); }

/* ---------- Reception report ---------- */
.report { background: #fff; border: 1px solid var(--paper-edge); border-radius: var(--radius-lg);
  overflow: hidden; box-shadow: var(--shadow-md); max-width: 34rem; }
.report__head { background: var(--forest-800); color: var(--paper); padding: var(--sp-5); }
.report__head h3 { color: var(--paper); margin: 0 0 var(--sp-1); font-size: var(--fs-md); }
.report__head p { margin: 0; font-size: var(--fs-sm); color: var(--text-on-dark-muted); }
.report__rows { list-style: none; margin: 0; padding: var(--sp-3) var(--sp-5); }
.report__rows li { display: flex; justify-content: space-between; align-items: baseline; gap: var(--sp-4);
  padding: .65rem 0; border-bottom: 1px solid var(--paper-edge); font-size: var(--fs-sm); }
.report__rows li:last-child { border-bottom: 0; }
.report__rows b { font-size: var(--fs-md); font-weight: 700; }
.report__foot { background: var(--brass-500); color: var(--ink); padding: var(--sp-4) var(--sp-5);
  display: flex; justify-content: space-between; align-items: baseline; }
.report__foot span { font-weight: 650; }
.report__foot b { font-family: var(--font-display); font-size: var(--fs-xl); }

/* ---------- Founder ---------- */
.founder__grid { display: grid; gap: var(--sp-6); align-items: start; }
@media (min-width: 54rem) { .founder__grid { grid-template-columns: 15rem 1fr; gap: var(--sp-8); } }
.founder__photo {
  width: 100%; max-width: 15rem; aspect-ratio: 4/5; border-radius: var(--radius-lg);
  background: linear-gradient(160deg, var(--forest-700), var(--forest-900));
  display: grid; place-items: center; color: var(--brass-400);
  font-family: var(--font-display); font-size: 3rem; border: 1px solid var(--paper-edge);
  box-shadow: var(--shadow-md); overflow: hidden;
}
.founder__photo img { width: 100%; height: 100%; object-fit: cover; }
.founder__caption { font-size: var(--fs-xs); color: var(--text-muted); margin-top: var(--sp-3); max-width: 15rem; }
.founder blockquote { margin: 0; padding: 0; border: 0; }
.founder blockquote p { font-size: var(--fs-md); max-width: 38rem; }
.founder__sign { font-family: var(--font-display); font-size: var(--fs-lg); color: var(--forest-700); margin-top: var(--sp-5); }

/* ---------- Pricing ---------- */
.tiers { display: grid; gap: var(--sp-5); align-items: start; }
@media (min-width: 56rem) { .tiers { grid-template-columns: repeat(3, 1fr); } }
.tier { background: #fff; border: 1px solid var(--paper-edge); border-radius: var(--radius-lg);
  padding: var(--sp-5); display: flex; flex-direction: column; box-shadow: var(--shadow-sm); }
.tier--featured { border: 2px solid var(--brass-500); box-shadow: var(--shadow-md); position: relative; }
@media (min-width: 56rem) { .tier--featured { transform: translateY(-.75rem); } }
.tier__flag { position: absolute; top: -.85rem; left: 50%; transform: translateX(-50%);
  background: var(--brass-500); color: var(--ink); font-size: var(--fs-xs); font-weight: 800;
  letter-spacing: .1em; text-transform: uppercase; padding: .3rem .8rem; border-radius: 999px; white-space: nowrap; }
.tier__name { font-family: var(--font-body); font-size: var(--fs-xs); font-weight: 800; letter-spacing: .16em;
  text-transform: uppercase; color: var(--brass-600); margin-bottom: var(--sp-3); }
.tier__price { font-family: var(--font-display); font-size: var(--fs-2xl); font-weight: 700; line-height: 1; }
.tier__price span { font-family: var(--font-body); font-size: var(--fs-sm); font-weight: 500; color: var(--text-muted); }
.tier__minutes { margin: var(--sp-3) 0 var(--sp-4); font-size: var(--fs-sm); color: var(--text-muted); }
.tier__best { font-size: var(--fs-sm); color: var(--text-muted); border-top: 1px solid var(--paper-edge);
  padding-top: var(--sp-4); margin-top: auto; }
.tier ul { list-style: none; margin: 0 0 var(--sp-5); padding: 0; }
.tier li { position: relative; padding-left: 1.5rem; margin-bottom: .55rem; font-size: var(--fs-sm); }
.tier li::before { content: ""; position: absolute; left: 0; top: .52em; width: .5rem; height: .5rem;
  border-radius: 50%; background: var(--forest-500); }

/* Features marked coming in site.config.json: on the roadmap, not live (2026-09-07). */
.tier li.coming { color: var(--text-muted); }
.tier li.coming::before { background: transparent; border: 1.5px solid var(--forest-500); }
.badge-coming { display: inline-block; margin-left: .3rem; padding: .05em .45em; border-radius: 999px; font-size: .7rem; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase; color: var(--brass-500); border: 1px solid var(--brass-500); vertical-align: middle; }

/* ---------- Guarantees ---------- */
.guarantees { display: grid; gap: var(--sp-5); }
@media (min-width: 48rem) { .guarantees { grid-template-columns: repeat(3, 1fr); } }
.guarantee { border-left: 3px solid var(--brass-500); padding-left: var(--sp-4); }
.guarantee h3 { font-size: var(--fs-md); margin-bottom: var(--sp-1); }
.guarantee p { font-size: var(--fs-sm); margin: 0; }

/* ---------- Forms ---------- */
.form { display: grid; gap: var(--sp-4); max-width: 34rem; }
.form label { display: block; font-size: var(--fs-sm); font-weight: 650; margin-bottom: var(--sp-2); }
.form input, .form select, .form textarea {
  width: 100%; padding: .75rem .875rem; font-size: var(--fs-base); font-family: var(--font-body);
  color: var(--text); background: #fff; border: 1px solid var(--paper-edge); border-radius: var(--radius);
}
.form textarea { min-height: 6.5rem; resize: vertical; }
.form input:focus, .form select:focus, .form textarea:focus { border-color: var(--forest-500); }
.form .hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form__row { display: grid; gap: var(--sp-4); }
@media (min-width: 36rem) { .form__row { grid-template-columns: 1fr 1fr; } }
.form__status { font-size: var(--fs-sm); padding: var(--sp-3) var(--sp-4); border-radius: var(--radius); display: none; }
.form__status.is-ok   { display: block; background: rgba(64,145,108,.13); border: 1px solid var(--forest-500); color: var(--forest-700); }
.form__status.is-err  { display: block; background: rgba(163,58,42,.10); border: 1px solid var(--warn); color: var(--warn); }
.section--dark .form input, .section--dark .form select, .section--dark .form textarea {
  background: rgba(11,20,16,.5); border-color: rgba(237,231,218,.22); color: var(--paper);
}
.section--dark .form label { color: var(--paper); }

/* ---------- Footer ---------- */
.site-footer { background: var(--ink); color: var(--text-on-dark-muted); padding-block: var(--sp-7) var(--sp-6); font-size: var(--fs-sm); }
.site-footer h4 { color: var(--paper); font-family: var(--font-body); font-size: var(--fs-xs);
  letter-spacing: .14em; text-transform: uppercase; margin-bottom: var(--sp-3); }
.site-footer a { color: var(--text-on-dark-muted); text-decoration: none; }
.site-footer a:hover { color: var(--brass-400); }
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li { margin-bottom: .45rem; }
.footer__grid { display: grid; gap: var(--sp-6); }
@media (min-width: 46rem) { .footer__grid { grid-template-columns: 1.4fr 1fr 1fr; gap: var(--sp-7); } }
.footer__legal { margin-top: var(--sp-6); padding-top: var(--sp-5); border-top: 1px solid rgba(237,231,218,.12);
  display: flex; flex-wrap: wrap; gap: var(--sp-4); justify-content: space-between; font-size: var(--fs-xs); }

/* ---------- Chat widget ---------- */
.chat-launch {
  position: fixed; right: 1rem; bottom: 1rem; z-index: 80;
  display: inline-flex; align-items: center; gap: .55rem;
  background: var(--forest-700); color: var(--paper); border: 1px solid rgba(237,231,218,.2);
  border-radius: 999px; padding: .7rem 1.1rem; cursor: pointer; box-shadow: var(--shadow-md);
  font-size: var(--fs-sm); font-weight: 600;
}
.chat-launch:hover { background: var(--forest-600); }
.chat-panel {
  position: fixed; right: 1rem; bottom: 1rem; z-index: 81;
  width: min(23rem, calc(100vw - 2rem)); height: min(32rem, calc(100vh - 2rem));
  background: var(--paper); border: 1px solid var(--paper-edge); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg); display: none; flex-direction: column; overflow: hidden;
}
.chat-panel.is-open { display: flex; }
.chat-panel__head { background: var(--forest-800); color: var(--paper); padding: var(--sp-4);
  display: flex; align-items: center; gap: var(--sp-3); }
.chat-panel__head strong { font-family: var(--font-display); font-size: var(--fs-base); }
.chat-panel__head button { margin-left: auto; background: none; border: 0; color: var(--text-on-dark-muted);
  cursor: pointer; font-size: 1.25rem; line-height: 1; padding: .25rem .4rem; }
.chat-panel__head button:hover { color: var(--paper); }
.chat-log { flex: 1; overflow-y: auto; padding: var(--sp-4); display: flex; flex-direction: column; gap: var(--sp-3); }
.chat-msg { max-width: 90%; padding: .6rem .85rem; border-radius: 13px; font-size: var(--fs-sm); line-height: 1.5; }
.chat-msg--bot  { align-self: flex-start; background: #fff; border: 1px solid var(--paper-edge); border-bottom-left-radius: 4px; }
.chat-msg--user { align-self: flex-end; background: var(--forest-600); color: #fff; border-bottom-right-radius: 4px; }
.chat-msg--sys  { align-self: center; font-size: var(--fs-xs); color: var(--text-muted); text-align: center; background: none; }
.chat-form { display: flex; gap: var(--sp-2); padding: var(--sp-3); border-top: 1px solid var(--paper-edge); background: #fff; }
.chat-form input { flex: 1; min-width: 0; padding: .6rem .75rem; border: 1px solid var(--paper-edge);
  border-radius: var(--radius); font-size: var(--fs-sm); font-family: var(--font-body); }
.chat-form button { background: var(--brass-500); border: 0; color: var(--ink); border-radius: var(--radius);
  padding: .6rem .9rem; cursor: pointer; font-weight: 650; }
.chat-form button[disabled] { opacity: .5; cursor: not-allowed; }

/* ---------- Demo page ---------- */
.demo-picker { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-bottom: var(--sp-5); }
.demo-picker button {
  background: #fff; border: 1px solid var(--paper-edge); border-radius: 999px;
  padding: .5rem 1rem; cursor: pointer; font-size: var(--fs-sm); font-weight: 600; color: var(--text);
}
.demo-picker button[aria-pressed="true"] { background: var(--forest-700); border-color: var(--forest-700); color: var(--paper); }
.demo-stage { background: var(--forest-900); border-radius: var(--radius-lg); padding: var(--sp-4);
  box-shadow: var(--shadow-lg); display: flex; flex-direction: column; height: min(34rem, 76vh); }
.demo-stage .chat-log { background: transparent; }
.demo-stage .chat-msg--bot { background: rgba(237,231,218,.1); border-color: transparent; color: var(--text-on-dark); }
.demo-stage .chat-msg--sys { color: var(--text-on-dark-muted); }
.demo-banner { background: rgba(200,150,62,.14); border: 1px dashed rgba(200,150,62,.45);
  color: var(--brass-200); border-radius: var(--radius); padding: var(--sp-3) var(--sp-4);
  font-size: var(--fs-sm); margin-bottom: var(--sp-4); }

/* ---------- Utility ---------- */
.stack > * + * { margin-top: var(--sp-4); }
.mt-0 { margin-top: 0; } .mb-0 { margin-bottom: 0; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip-link { position: absolute; left: -9999px; }
.skip-link:focus { left: var(--sp-4); top: var(--sp-4); z-index: 100; background: var(--brass-500);
  color: var(--ink); padding: .6rem 1rem; border-radius: var(--radius); }