/* Juno landing page — tokens + base styles
   Ported from project/tokens/*.css and project/components/forms/Button.jsx
   (Juno Design System). See /project for the full design-system bundle. */

@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@300;400;500;600;700;800;900&display=swap');

:root{
  /* colors.css */
  --cream-50:#FDFBF8;
  --cream-100:#FAF6F0;
  --cream-200:#F3EBDF;
  --cream-300:#E9DCC9;
  --cream-400:#DCC9AE;
  --ink-900:#1F2E2C;
  --ink-800:#283B37;
  --ink-700:#33473F;
  --ink-600:#475C54;
  --ink-500:#5C6E67;
  --ink-400:#7C8B85;
  --ink-300:#9FACA6;
  --ink-200:#C7D0CC;
  --ink-100:#E4E9E7;
  --teal-700:#1F4A43;
  --teal-600:#2B5C54;
  --teal-500:#3B7268;
  --terracotta-700:#8A4028;
  --terracotta-600:#A85536;
  --terracotta-500:#C56A45;
  --terracotta-400:#D7896A;
  --terracotta-100:#F3DCCB;
  --marigold-600:#B8862F;
  --marigold-500:#D9A441;
  --marigold-400:#E6BE6C;
  --marigold-100:#F5E6C3;
  --brick-600:#96393C;
  --brick-500:#B5484B;
  --brick-100:#F1D9D6;
  --white:#FFFFFF;

  --surface-page:var(--cream-100);
  --surface-card:var(--cream-50);
  --surface-card-alt:var(--cream-200);
  --surface-inverse:var(--ink-900);
  --surface-accent:var(--terracotta-500);
  --surface-accent-tint:var(--terracotta-100);
  --surface-celebratory:var(--marigold-100);

  --text-primary:var(--ink-900);
  --text-secondary:var(--ink-600);
  --text-muted:var(--ink-400);
  --text-on-accent:var(--cream-50);
  --text-on-inverse:var(--cream-100);
  --text-link:var(--teal-600);
  --text-link-hover:var(--teal-700);

  --border-subtle:var(--cream-400);
  --border-default:var(--ink-200);
  --border-strong:var(--ink-400);

  --accent-primary:var(--terracotta-500);
  --accent-primary-hover:var(--terracotta-600);
  --accent-primary-active:var(--terracotta-700);
  --accent-secondary:var(--marigold-500);
  --accent-secondary-hover:var(--marigold-600);

  --state-success:var(--teal-600);
  --state-success-bg:var(--cream-200);
  --state-warning:var(--marigold-600);
  --state-warning-bg:var(--marigold-100);
  --state-error:var(--brick-500);
  --state-error-bg:var(--brick-100);
  --focus-ring:var(--teal-500);

  /* typography.css */
  --font-brand:'Nunito',-apple-system,'Segoe UI',sans-serif;
  --font-display:var(--font-brand);
  --font-body:var(--font-brand);
  --fw-regular:400;
  --fw-medium:600;
  --fw-semibold:700;
  --fw-bold:800;
  --text-xs:12px;
  --text-sm:14px;
  --text-base:16px;
  --text-md:18px;
  --text-lg:22px;
  --text-xl:28px;
  --text-2xl:34px;
  --text-3xl:44px;
  --text-4xl:56px;
  --leading-tight:1.15;
  --leading-snug:1.3;
  --leading-normal:1.5;
  --leading-relaxed:1.65;
  --tracking-tight:-0.01em;
  --tracking-normal:0;
  --tracking-wide:0.04em;

  /* spacing.css */
  --space-1:4px;
  --space-2:8px;
  --space-3:12px;
  --space-4:16px;
  --space-5:20px;
  --space-6:24px;
  --space-8:32px;
  --space-10:40px;
  --space-12:48px;
  --space-16:64px;
  --space-20:80px;
  --space-24:96px;
  --space-32:128px;
  --container-max:1120px;
  --container-narrow:680px;

  /* radius-shadow.css */
  --radius-sm:8px;
  --radius-md:12px;
  --radius-lg:18px;
  --radius-xl:28px;
  --radius-full:999px;
  --shadow-sm:0 1px 2px rgba(31,46,44,0.06),0 1px 1px rgba(31,46,44,0.04);
  --shadow-md:0 4px 12px rgba(31,46,44,0.08),0 1px 3px rgba(31,46,44,0.05);
  --shadow-lg:0 12px 32px rgba(31,46,44,0.12),0 2px 6px rgba(31,46,44,0.06);
  --shadow-focus:0 0 0 3px rgba(59,114,104,0.35);
  --ease-standard:cubic-bezier(.4,0,.2,1);
  --ease-out:cubic-bezier(0,0,.2,1);
  --duration-fast:120ms;
  --duration-base:200ms;
  --duration-slow:320ms;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  font-family:var(--font-body);
  background:var(--surface-page);
  color:var(--text-primary);
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,p{margin:0}
a{color:inherit}
img{max-width:100%;display:block}

.container{max-width:var(--container-max);margin:0 auto;padding-inline:var(--space-6)}
.container-narrow{max-width:var(--container-narrow);margin:0 auto;padding-inline:var(--space-6)}

/* ---------- Button (ported from components/forms/Button.jsx) ---------- */
.btn{
  font-family:var(--font-body);
  font-weight:var(--fw-semibold);
  border-radius:var(--radius-full);
  border:1.5px solid transparent;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  gap:8px;
  justify-content:center;
  transition:background var(--duration-base) var(--ease-standard),
             color var(--duration-base) var(--ease-standard),
             border-color var(--duration-base) var(--ease-standard);
  text-decoration:none;
}
.btn-lg{padding:16px 28px;font-size:var(--text-md)}
.btn-md{padding:12px 22px;font-size:var(--text-base)}
.btn-sm{padding:8px 16px;font-size:var(--text-sm)}
.btn-primary{background:var(--accent-primary);color:var(--text-on-accent)}
.btn-primary:hover{background:var(--accent-primary-hover)}
.btn-primary:active{background:var(--accent-primary-active)}
.btn:disabled{opacity:.5;cursor:not-allowed}

/* ---------- Image placeholder (static stand-in for <image-slot>) ---------- */
.image-placeholder{
  width:100%;height:100%;
  display:flex;align-items:center;justify-content:center;
  text-align:center;
  background:color-mix(in srgb, var(--ink-900) 6%, transparent);
  border:1px dashed color-mix(in srgb, var(--ink-900) 30%, transparent);
  color:var(--ink-500);
  font-size:13px;
  line-height:1.4;
  padding:var(--space-4);
  box-sizing:border-box;
}
.image-placeholder.shape-rounded{border-radius:var(--radius-lg)}
.image-placeholder.shape-rect{border-radius:0}

/* ---------- Top bar ---------- */
.topbar{
  position:sticky;top:0;z-index:10;
  display:flex;justify-content:center;
  padding:20px var(--space-6);
  background:var(--surface-page);
}
.wordmark{
  font-family:var(--font-display);
  font-weight:var(--fw-bold);
  font-size:22px;
  color:var(--ink-900);
  letter-spacing:0.1em;
  text-transform:uppercase;
}

/* ---------- Hero ---------- */
.hero{
  padding:16px var(--space-6) var(--space-10);
  display:flex;flex-direction:column;align-items:center;text-align:center;gap:var(--space-4);
  max-width:820px;margin:0 auto;
}
.hero h1{
  font-family:var(--font-display);
  font-weight:var(--fw-bold);
  font-size:var(--text-3xl);
  line-height:var(--leading-tight);
  color:var(--ink-900);
  letter-spacing:var(--tracking-tight);
}
.hero p{
  font-size:var(--text-md);
  line-height:var(--leading-relaxed);
  color:var(--text-secondary);
  max-width:640px;
}
.trust-banner{
  display:flex;gap:10px;flex-wrap:wrap;justify-content:center;
  font-size:13px;color:var(--text-muted);font-weight:var(--fw-medium);
}
.hero-image{
  width:100%;max-width:900px;aspect-ratio:16/9;margin-top:var(--space-4);
  border-radius:var(--radius-lg);
  overflow:hidden;
}
.hero-photo{
  width:100%;height:100%;object-fit:cover;
}

/* ---------- One calm home visit ---------- */
.calm-visit{
  background:var(--cream-200);
  display:flex;flex-direction:column;
}
.calm-visit .copy{
  padding:var(--space-16) var(--space-8) var(--space-12);
  max-width:600px;
}
.calm-visit .eyebrow{
  font-family:var(--font-body);
  font-weight:var(--fw-bold);
  font-size:13px;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--ink-700);
}
.calm-visit h2{
  font-family:var(--font-display);
  font-weight:var(--fw-regular);
  font-size:var(--text-3xl);
  line-height:1.2;
  color:var(--ink-900);
  margin:20px 0 var(--space-8);
}
.calm-visit p{
  font-size:var(--text-md);
  line-height:1.6;
  color:var(--ink-700);
  margin:0 0 var(--space-5);
}
.calm-visit .link-cta{
  font-size:17px;
  color:var(--ink-900);
  text-decoration:none;
  border-bottom:1.5px solid var(--accent-secondary);
  padding-bottom:2px;
  display:inline-block;
}
.calm-visit-image{
  width:100%;aspect-ratio:16/9;
  overflow:hidden;
}
.calm-visit-photo{
  width:100%;height:100%;object-fit:cover;
}

/* ---------- Generic section ---------- */
.section{padding:var(--space-16) var(--space-6);max-width:var(--container-max);margin:0 auto}
.section h2{
  font-family:var(--font-display);
  font-weight:var(--fw-bold);
  font-size:var(--text-xl);
  color:var(--ink-900);
  text-align:center;
  margin:0 0 var(--space-10);
}

/* ---------- Card grid (problem / USP) ---------- */
.card-grid{display:grid;gap:var(--space-6)}
.card-grid.cols-3{grid-template-columns:repeat(3,1fr)}
.card-grid.cols-2{grid-template-columns:repeat(2,1fr)}
.card{
  background:var(--surface-card);
  border:1.5px solid var(--border-subtle);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-sm);
  padding:var(--space-7,28px);
}
.card h3{
  font-family:var(--font-display);
  font-size:17px;
  color:var(--ink-900);
  margin:0 0 10px;
}
.card p{
  font-size:15px;
  color:var(--text-secondary);
  line-height:1.6;
}

/* ---------- How it works (inverse) ---------- */
.how-it-works{
  padding:var(--space-16) var(--space-6);
  background:var(--surface-inverse);
  color:var(--text-on-inverse);
}
.how-it-works .container{max-width:var(--container-max)}
.how-it-works h2{color:var(--cream-50)}
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--space-6)}
.steps .step-num{
  font-family:var(--font-display);
  font-weight:var(--fw-bold);
  font-size:var(--text-xl);
  color:var(--accent-primary);
  margin-bottom:12px;
}
.steps h3{font-size:17px;color:var(--cream-50);margin:0 0 8px}
.steps p{font-size:14px;color:var(--ink-200);margin:0;line-height:1.6}

/* ---------- Kit teaser ---------- */
.kit-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-6)}
.kit-item{display:flex;flex-direction:column;gap:var(--space-4)}
.kit-item .kit-image{aspect-ratio:4/3;overflow:hidden;border-radius:var(--radius-lg)}
.kit-photo{width:100%;height:100%;object-fit:cover}
.kit-item h3{font-family:var(--font-display);font-size:16px;color:var(--ink-900);margin:0}

/* ---------- Testimonial ---------- */
.testimonial{
  padding:var(--space-16) var(--space-6);
  max-width:var(--container-narrow);
  margin:0 auto;
  text-align:center;
}
.testimonial p{
  font-family:var(--font-display);
  font-weight:var(--fw-medium);
  font-size:var(--text-lg);
  line-height:1.5;
  color:var(--ink-900);
  margin:0 0 var(--space-5);
}
.testimonial span{font-size:14px;color:var(--text-muted)}

/* ---------- FAQ ---------- */
.faq{padding:var(--space-16) var(--space-6);max-width:var(--container-narrow);margin:0 auto}
.faq h2{
  font-family:var(--font-display);
  font-weight:var(--fw-bold);
  font-size:var(--text-xl);
  color:var(--ink-900);
  text-align:center;
  margin:0 0 var(--space-8);
}
.faq-list{display:flex;flex-direction:column;gap:var(--space-3)}
.faq-item{
  border:1.5px solid var(--border-subtle);
  border-radius:var(--radius-md);
  background:var(--surface-card);
  padding:18px 20px;
}
.faq-item summary{
  font-weight:var(--fw-semibold);
  font-size:16px;
  color:var(--ink-900);
  cursor:pointer;
}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item p{
  font-size:15px;
  color:var(--text-secondary);
  line-height:var(--leading-relaxed);
  margin:10px 0 0;
}
.faq-item p strong{color:var(--ink-900)}

/* ---------- Final CTA ---------- */
.final-cta{
  padding:var(--space-20) var(--space-6);
  display:flex;flex-direction:column;align-items:center;text-align:center;gap:var(--space-4);
  background:var(--cream-200);
}
.final-cta h2{
  font-family:var(--font-display);
  font-weight:var(--fw-bold);
  font-size:var(--text-xl);
  color:var(--ink-900);
}
.final-cta p{font-size:16px;color:var(--text-secondary)}

/* ---------- Footer ---------- */
footer{
  padding:var(--space-12) var(--space-6);
  background:var(--cream-200);
  display:flex;justify-content:space-between;align-items:center;
  max-width:var(--container-max);margin:0 auto;flex-wrap:wrap;gap:var(--space-4);
}
footer .wordmark{font-size:16px}
footer .tagline{font-size:14px;color:var(--text-muted)}

/* ---------- Responsive ---------- */
@media (max-width:860px){
  .card-grid.cols-3,.card-grid.cols-2{grid-template-columns:1fr}
  .steps{grid-template-columns:repeat(2,1fr)}
  .kit-grid{grid-template-columns:1fr}
  .hero h1{font-size:var(--text-2xl)}
  .calm-visit h2{font-size:var(--text-2xl)}
}
@media (max-width:520px){
  .steps{grid-template-columns:1fr}
  .hero{padding:12px var(--space-4) var(--space-8)}
  .section{padding:var(--space-12) var(--space-4)}
}