/* ============================
   Kindroot UI — Final System
   Tokens → Utilities → Components → Pages
   ============================ */

/* ---------- Tokens ---------- */
:root{
  /* Colors */
  --bg:#f7f6f4;
  --card:#ffffff;
  --text:#1f2a2e;
  --muted:#5a6a72;            /* AA on white (~4.9:1) */
  --muted-bg:#f3eee8;
  --primary:#5cb8a6;          /* brand accent (light) */
  --primary-strong:#2f8f7d;   /* AA with white text for buttons */
  --accent:#f3a892;
  --ring:rgba(92,184,166,.35);

  /* Radii */
  --radius:18px;
  --radius-lg:24px;

  /* Layout */
  --maxw:1120px;
  --container-pad:22px;        /* mobile gutters */
  --measure:65ch;              /* readable width */

  /* Rhythm (8pt-ish) */
  --space-1:6px;
  --space-2:10px;
  --space-3:16px;
  --space-4:24px;
  --space-5:36px;
  --space-6:56px;

  color-scheme: light;
}

/* ---------- Base ---------- */
*{ box-sizing:border-box }
html{ scroll-behavior:smooth }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto } }

body{
  margin:0;
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,'Helvetica Neue',Arial,sans-serif;
  background:var(--bg);
  color:var(--text);
  line-height:1.6; letter-spacing:.01em;
}

img,svg,video{ max-width:100%; height:auto; display:block }

a{ color:inherit; text-decoration:none }
a:focus-visible{ outline:3px solid var(--primary); outline-offset:2px; border-radius:8px }

/* Headings */
h1,h2,h3{ font-family:Raleway,Inter,sans-serif; letter-spacing:.2px; margin-top:0 }
h1{ font-size:clamp(30px,4.5vw,48px); line-height:1.12; margin-bottom:var(--space-3) }
h2{ font-size:clamp(24px,3vw,36px);   margin-bottom:var(--space-3) }
h3{ font-size:clamp(18px,2.2vw,22px); margin-bottom:var(--space-2) }

/* Text blocks */
p,ul,ol{ margin:0; max-width:var(--measure) }
ul{ padding-left:22px }
ul li + li{ margin-top:8px }
.muted{ color:var(--muted) }

/* ---------- Utilities ---------- */
.container{ max-width:var(--maxw); margin:0 auto; padding-inline:var(--container-pad) }
.section{ padding-block:var(--space-6) }    /* no additive margins between sections */
.section + .section{ margin-top:0 }
.section--tight-top{ padding-top:var(--space-3) }  /* used on booking page */

.grid{ display:grid; gap:var(--space-4) }
.cols-2,.cols-3,.cols-4{ grid-template-columns:1fr } /* mobile-first */
@media (min-width:820px){
  .cols-2{ grid-template-columns:1fr 1fr }
  .cols-3{ grid-template-columns:repeat(3,1fr) }
  .cols-4{ grid-template-columns:repeat(4,1fr) }
}

.flow > * + *{ margin-top:var(--space-3) }    /* consistent inner rhythm */
.stack-sm > * + *{ margin-top:var(--space-2) }
.stack-md > * + *{ margin-top:var(--space-3) }
.stack-lg > * + *{ margin-top:var(--space-4) }

.visually-hidden{
  position:absolute !important; width:1px; height:1px; margin:-1px; padding:0;
  border:0; clip:rect(0 0 0 0); clip-path:inset(50%); overflow:hidden; white-space:nowrap;
}

/* two-up cards grid (booking page) */
.cards-2{
  display:grid;
  grid-template-columns:1fr;
  gap:var(--space-4);
  align-items:stretch;
  margin-top:var(--space-4);
}
@media (min-width:840px){
  .cards-2{ grid-template-columns:1fr 1fr }
}

/* ---------- Components ---------- */

/* Cards: ONE recipe */
.card{
  background:var(--card);
  border:1px solid rgba(0,0,0,.06);
  border-radius:var(--radius);
  padding:var(--space-4);
}
.card > * + *{ margin-top:var(--space-3) }

/* Legacy compatibility (harmless if present in HTML) */
.card.pad{ padding:var(--space-4) }
.card.tight{ padding:0; overflow:hidden }

.divider{ height:1px; background:rgba(0,0,0,.06); margin:var(--space-3) 0 }

/* Buttons */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:12px 18px; border-radius:999px; font-weight:600;
  border:1px solid transparent; cursor:pointer;
  transition:background .15s ease, color .15s ease, border-color .15s ease, filter .15s ease;
}
.btn:focus-visible{ outline:3px solid var(--primary); outline-offset:2px }
.btn:active{ transform:none } /* zero motion */

/* Primary button: keep white text, ensure AA via darker background */
.btn-primary{
  background:var(--primary-strong);  /* darker than --primary */
  color:#fff;                        /* AA contrast retained */
  border-color:transparent;
}
.btn-primary:hover{ filter:brightness(0.98) }
.btn-primary:disabled{ opacity:.6; cursor:not-allowed }

.btn-outline{
  background:#fff; border-color:rgba(0,0,0,.12); color:var(--text)
}
.btn-outline:hover{ background:rgba(0,0,0,.03) }

.badge{
  display:inline-flex; align-items:center; gap:6px;
  padding:4px 8px; border-radius:999px;
  background:var(--muted-bg); color:var(--text); font-weight:600; font-size:.8rem;
}
.pill{
  display:inline-flex; align-items:center; gap:8px;
  padding:6px 10px; border-radius:999px; background:#f0f3f2; font-size:.9rem;
}

/* Header / Nav */
.header{
  position:sticky; top:0; z-index:40;
  background:rgba(247,246,244,.88);
  backdrop-filter:saturate(120%) blur(8px);
  border-bottom:1px solid #eae7e3;
}
.nav{ display:flex; align-items:center; justify-content:space-between; padding-block:12px }
.brand{ display:flex; align-items:center; gap:10px; font-weight:800 }
.brand-mark{
  width:32px; height:32px; border-radius:10px;
  background:conic-gradient(from 180deg at 50% 50%, var(--primary), var(--muted-bg), var(--accent), var(--primary));
}
.nav-links{ display:flex; gap:18px; align-items:center }
.nav-links a{ padding:8px 10px; border-radius:10px; opacity:.9 }
.nav-links a:hover,
.nav-links a:focus-visible{ background:rgba(0,0,0,.04) }
.nav-links a[aria-current="page"]{ box-shadow:0 0 0 2px var(--ring) inset }

.hamburger{ display:none; border:0; background:transparent; padding:8px }
#mobileMenu{ display:none }
@media (max-width:860px){
  .nav-links{ display:none }
  .hamburger{ display:block }
  #mobileMenu{
    display:none; position:absolute; left:0; right:0; top:64px;
    background:var(--card); border-bottom:1px solid #eee;
    box-shadow:0 2px 0 rgba(0,0,0,.03); /* subtle edge for neatness */
  }
  #mobileMenu a{ display:block; padding:14px 20px; border-top:1px solid #f1ede8 }
}

/* Hero */
.hero{
  display:grid; grid-template-columns:1.05fr .95fr;
  gap:var(--space-4); align-items:center; padding-block:var(--space-6);
}
@media (max-width:980px){ .hero{ grid-template-columns:1fr } }
.hero-bullets{ display:flex; flex-wrap:wrap; gap:8px; margin:var(--space-3) 0 var(--space-2) }
/* Keep CTA rows tidy on narrow screens */
.hero .flow{ max-width:var(--measure) }

/* Illustration panel uses the SAME card surface */
.illustration{
  background:var(--card);
  border:1px solid rgba(0,0,0,.06);
  border-radius:var(--radius-lg);
  padding:var(--space-4);
}

/* Steps */
.step{
  padding:var(--space-3);
  border:1px solid #ece7e1;
  border-radius:16px; background:#faf9f7;
}
.step .num{
  width:28px; height:28px; border-radius:999px;
  background:#eaf3f1; color:#1f2a2e; font-weight:800;
  display:inline-grid; place-items:center; margin-bottom:8px;
}

/* Pricing */
.pricing{ display:grid; gap:var(--space-4); grid-template-columns:1fr; align-items:stretch }
@media (min-width:900px){ .pricing{ grid-template-columns:1fr 1fr } }

.price-card{
  background:var(--card);
  border:1px solid rgba(0,0,0,.06);
  border-radius:var(--radius-lg);
  padding:var(--space-5);
  display:flex; flex-direction:column;  /* equal heights */
}
.price-card .badge{ display:none }                 /* reduce noise except highlight */
.price-card.highlight .badge{ display:inline-flex }
.price-card.highlight{
  border-color:#cfe7df;
  background:linear-gradient(#fbfefd, #ffffff);
}
.price{ font-size:2.4rem; font-weight:800; line-height:1; margin:var(--space-2) 0 var(--space-3) }
.price-card .divider{ margin-block:var(--space-3) }
.price-card .btn{ margin-top:auto }                /* CTA sticks to bottom for parity */

/* FAQ (bigger tap targets + clear focus) */
details{
  background:var(--card); border:1px solid #ece7e1; border-radius:16px;
}
summary{
  cursor:pointer; font-weight:600; list-style:none;
  padding:14px 16px; border-radius:16px;
}
summary::-webkit-details-marker{ display:none }
summary:hover{ background:rgba(0,0,0,.02) }        /* subtle affordance */
details[open] summary{ border-bottom:1px solid rgba(0,0,0,.06); border-bottom-left-radius:0; border-bottom-right-radius:0 }
details > *:not(summary){ padding:12px 16px }

/* Tighter lists following a note paragraph inside cards */
.card p + ul{ margin-top:var(--space-3) }

/* Footer */
.footer-flex{ display:flex; flex-wrap:wrap; gap:10px; justify-content:space-between; align-items:center }
footer{ padding-block:var(--space-5); border-top:1px solid #eae7e3; color:var(--muted); margin-top:64px }
footer p{ margin:0 }

/* Calendly inline */
.calendly-inline-widget{ min-width:320px; height:760px; width:100% }

/* Global focus (safety) */
:focus-visible{ outline:3px solid var(--primary); outline-offset:2px }

/* Skip link */
.skip-link{
  position:absolute; left:-999px; top:auto; width:1px; height:1px; overflow:hidden;
}
.skip-link:focus{
  left:10px; top:10px; width:auto; height:auto; background:var(--card);
  padding:8px 12px; border-radius:8px; border:1px solid rgba(0,0,0,.06);
}

/* Print */
@media print{
  .header,#mobileMenu,.hamburger{ display:none !important }
  .section{ padding-block:24px }
  .card{ border:1px solid #ddd }
}

/* Mobile readability */
@media (max-width:600px){
  body{ font-size:16px; line-height:1.65 }
  .container{ padding-inline:24px } /* slightly wider gutters */
  p,li{ margin-bottom:16px }
  h1{ font-size:28px } h2{ font-size:22px } h3{ font-size:18px }
}

/* Motion sensitivity */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{ transition:none !important }
}