/* ============================================================
   Clingy Baby — design system & site styles
   Tokens first; components second; sections third.
   ============================================================ */

/* ---------- Design tokens ---------- */
:root{
  /* surfaces */
  --bg:#FFF9F5;
  --surface:#FFFFFF;
  --surface-blush:#FFF1EA;
  --surface-warm:#F7F1EC;

  /* text */
  --text:#2C2725;
  --text-2:#665E5A;
  --text-3:#827874;
  --text-inverse:#FFFFFF;

  /* brand */
  --brand:#B84F45;
  --brand-hover:#9E4139;
  --brand-active:#87362F;

  /* supporting accents (backgrounds & badges only) */
  --coral:#F4B5AC;
  --sage:#AFC9B8;
  --blue:#AFCDE8;
  --gold:#E8C97A;

  /* product colorways (factual swatches) */
  --swatch-lilac:#C9B6E8;
  --swatch-sage:#A8D8C3;

  /* borders & focus */
  --border:#E8DED8;
  --border-strong:#D8C9C1;
  --focus:#2F6FED;

  /* type */
  --font-display:"Fraunces",Georgia,serif;
  --font-body:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;

  /* spacing (8pt system) */
  --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-6:24px; --s-8:32px;
  --s-12:48px; --s-16:64px; --s-20:80px; --s-24:96px; --s-30:120px;

  /* radius */
  --r-s:8px; --r-btn:12px; --r-card:16px; --r-img:22px; --r-pill:999px;

  /* shadow */
  --shadow:0 12px 30px rgba(56,42,35,.10);

  /* layout */
  --container:1200px;
  --gutter:36px;
  --nav-h:72px;
  --measure:680px; /* shared max text width: titles match their paragraphs */
}
@media(max-width:1023px){ :root{ --gutter:28px; } }
@media(max-width:767px){ :root{ --gutter:20px; --nav-h:64px; } }

/* ---------- Reset & base ---------- */
*,*::before,*::after{ margin:0; padding:0; box-sizing:border-box; }
html{ scroll-behavior:smooth; scroll-padding-top:calc(var(--nav-h) + 12px); }
body{
  font-family:var(--font-body);
  font-size:17px; line-height:1.6;
  color:var(--text); background:var(--bg);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img,svg{ display:block; max-width:100%; height:auto; }
/* Layout rule: titles run the same width as the paragraphs they belong to —
   no text-wrap:balance (it wraps early and narrows headings). */
h1,h2,h3{ font-family:var(--font-display); font-weight:600; line-height:1.12; text-wrap:pretty; }
p{ max-width:var(--measure); }
a{ color:var(--brand); }
:focus-visible{ outline:3px solid var(--focus); outline-offset:2px; border-radius:4px; }
::selection{ background:var(--coral); color:var(--text); }

@media(prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
}

/* ---------- Utilities ---------- */
.container{ max-width:var(--container); margin:0 auto; padding-inline:var(--gutter); }
.skip-link{
  position:absolute; left:12px; top:-60px; z-index:1000;
  background:var(--text); color:var(--text-inverse);
  padding:10px 18px; border-radius:var(--r-btn);
  font-weight:600; text-decoration:none; transition:top .18s ease-out;
}
.skip-link:focus{ top:12px; }
.eyebrow{
  display:inline-block; font-size:13px; font-weight:600;
  letter-spacing:1.6px; text-transform:uppercase; color:var(--brand);
  margin-bottom:var(--s-4);
}
.section{ padding-block:clamp(64px, 9vw, 104px); }
.section-head{ max-width:640px; margin-bottom:clamp(32px, 5vw, 56px); }
.section-head h2{ font-size:clamp(31px, 4vw, 42px); margin-bottom:var(--s-3); }
.section-head p{ color:var(--text-2); font-size:18px; }

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-family:var(--font-body); font-weight:600; font-size:16px;
  min-height:48px; padding:12px 26px; border-radius:var(--r-btn);
  border:1.5px solid transparent; cursor:pointer; text-decoration:none;
  transition:background-color .18s ease-out, border-color .18s ease-out, color .18s ease-out;
}
.btn-primary{ background:var(--brand); color:var(--text-inverse); }
.btn-primary:hover{ background:var(--brand-hover); }
.btn-primary:active{ background:var(--brand-active); }
.btn-secondary{ background:transparent; color:var(--brand); border-color:var(--border-strong); }
.btn-secondary:hover{ border-color:var(--brand); background:var(--surface-blush); }
.btn[disabled]{ opacity:.6; cursor:default; }

/* ---------- Announcement bar ---------- */
.announce{
  display:block; background:var(--text); color:var(--text-inverse);
  text-align:center; font-size:14px; font-weight:500;
  padding:10px var(--gutter); min-height:38px;
  text-decoration:none;
}
.announce:hover span{ text-decoration:underline; }
.announce:focus-visible{ outline-offset:-3px; }

/* ---------- Header / navigation ---------- */
.site-header{
  position:sticky; top:0; z-index:100;
  background:rgba(255,249,245,.94);
  backdrop-filter:blur(8px);
  border-bottom:1px solid transparent;
  transition:border-color .18s ease-out;
}
.site-header.scrolled{ border-bottom-color:var(--border); }
.site-header nav{
  max-width:var(--container); margin:0 auto;
  height:var(--nav-h); padding-inline:var(--gutter);
  display:flex; align-items:center; justify-content:flex-end; gap:var(--s-6);
}
.nav-links{ display:flex; align-items:center; gap:var(--s-8); list-style:none; }
.nav-links a:not(.btn){
  color:var(--text-2); font-weight:500; font-size:16px; text-decoration:none;
  padding:8px 2px;
}
.nav-links a:not(.btn):hover{ color:var(--brand); }
.nav-links .btn{ min-height:44px; padding:10px 22px; }
.menu-toggle{
  display:none; width:44px; height:44px;
  background:none; border:none; cursor:pointer; border-radius:var(--r-s);
  color:var(--text);
}
.mobile-menu{
  display:none; position:fixed; inset:var(--nav-h) 0 auto 0; z-index:99;
  background:var(--surface); border-bottom:1px solid var(--border);
  box-shadow:var(--shadow); padding:var(--s-4) var(--gutter) var(--s-6);
}
.mobile-menu.open{ display:block; }
.mobile-menu ul{ list-style:none; display:grid; gap:2px; }
.mobile-menu a:not(.btn){
  display:block; padding:14px 8px; font-size:18px; font-weight:500;
  color:var(--text); text-decoration:none; border-radius:var(--r-s);
}
.mobile-menu a:not(.btn):hover{ background:var(--surface-blush); }
.mobile-menu .btn{ width:100%; margin-top:var(--s-3); }
@media(max-width:860px){
  .nav-links{ display:none; }
  .menu-toggle{ display:inline-flex; align-items:center; justify-content:center; }
}

/* ---------- Hero ---------- */
.hero{ background:linear-gradient(180deg, var(--surface-blush) 0%, var(--bg) 88%); }
.hero .container{
  display:grid; grid-template-columns:minmax(0,600px) minmax(0,520px);
  justify-content:space-between; align-items:center; gap:clamp(40px,6vw,72px);
  min-height:640px; padding-block:clamp(56px,8vw,88px) clamp(48px,7vw,80px);
}
.hero-brand{
  display:inline-flex; flex-direction:column; align-items:center;
  gap:var(--s-3); margin-bottom:var(--s-8);
}
.hero-brand img{ width:min(300px, 76vw); height:auto; }
/* Animated brand mark — alpha WebM, cropped to the same bounds as the still
   logo so swapping between them doesn't shift the layout. Both are
   transparent, so no plate or blend mode is needed. */
.brand-motion video{ width:min(300px, 76vw); height:auto; display:block; }
.eyebrow-line{
  font-size:13px; font-weight:600; letter-spacing:1.6px;
  text-transform:uppercase; color:var(--brand);
}
@media(max-width:1023px){
  .hero-brand{ display:flex; width:100%; }
}
.hero h1{ font-size:clamp(42px, 5.4vw, 64px); margin-bottom:var(--s-4); max-width:var(--measure); }
.hero .lead{ font-size:clamp(18px, 1.6vw, 20px); color:var(--text-2); margin-bottom:var(--s-6); }
/* Buy is the hero's primary action; the signup below it is the fallback for blankets. */
.hero-cta{ display:flex; flex-wrap:wrap; gap:var(--s-3); margin-bottom:var(--s-8); }
.hero-cta .btn{ min-height:52px; }
@media(max-width:560px){
  .hero-cta{ flex-direction:column; align-items:stretch; }
}
@media(max-width:1023px){
  .hero .container{ grid-template-columns:1fr; min-height:0; }
}

/* ---------- Signup form ---------- */
.signup-form{ max-width:540px; }
.signup-row{ display:flex; gap:var(--s-3); }
.signup-form input[type=email]{
  flex:1; min-width:0; height:52px; padding:0 18px;
  font-family:var(--font-body); font-size:16px; color:var(--text);
  background:var(--surface); border:1.5px solid var(--border-strong);
  border-radius:var(--r-btn);
}
.signup-form input[type=email]:focus-visible{ outline:3px solid var(--focus); outline-offset:1px; }
.signup-form input[type=email][aria-invalid="true"]{ border-color:var(--brand); }
.signup-form .btn{ height:52px; flex-shrink:0; }
.form-label{ display:block; font-weight:600; font-size:15px; margin-bottom:var(--s-2); }
.form-micro{ font-size:13px; color:var(--text-3); margin-top:var(--s-3); }
.form-status{ font-size:15px; font-weight:500; margin-top:var(--s-3); min-height:1.4em; }
.form-status.error{ color:var(--brand-active); }
.form-success{
  background:var(--surface); border:1.5px solid var(--sage);
  border-radius:var(--r-card); padding:var(--s-6);
  font-size:17px; font-weight:500;
}
@media(max-width:560px){
  .signup-row{ flex-direction:column; }
  .signup-form input[type=email]{ flex:none; width:100%; }
  .signup-form .btn{ width:100%; }
}

/* ---------- Placeholders (future imagery) ---------- */
.ph{
  position:relative; width:100%; border-radius:var(--r-img);
  border:1.5px solid var(--border);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:var(--s-3); overflow:hidden; text-align:center; padding:var(--s-6);
}
.ph svg{ opacity:.9; }
.ph-caption{ font-size:13px; color:var(--text-3); max-width:24ch; }
.ph-dev{
  display:none; position:absolute; bottom:10px; left:10px;
  font-size:11px; font-weight:600; letter-spacing:.5px;
  background:rgba(44,39,37,.85); color:#fff; padding:4px 10px; border-radius:var(--r-pill);
}
.dev-mode .ph-dev{ display:block; }
.ph-4x5{ aspect-ratio:4/5; }
.ph-4x3{ aspect-ratio:4/3; }
.ph-hero{ max-width:540px; background:var(--surface); }
@media(max-width:1023px){ .ph-hero{ max-width:440px; margin-inline:auto; } }

/* ---------- Brand illustration cards (interim art; photography swaps in later) ---------- */
.art-card{
  margin:0; background:var(--surface); border:1.5px solid var(--border);
  border-radius:var(--r-img); overflow:hidden;
}
.art-card img{ width:100%; height:auto; }
.hero-art{ width:min(520px, 100%); justify-self:end; }
.story-art{ width:min(480px, 100%); }
@media(max-width:1023px){
  .hero-art{ width:min(440px, 100%); justify-self:center; margin-inline:auto; }
  .story-art{ margin-inline:auto; }
}
.cta-art{
  width:104px; height:104px; border-radius:50%; object-fit:cover;
  border:4px solid var(--surface); box-shadow:var(--shadow);
  background:var(--surface); margin-bottom:var(--s-4);
}

/* ---------- Trust strip ---------- */
.trust{ border-block:1px solid var(--border); background:var(--surface); }
.trust ul{
  list-style:none; display:grid; grid-template-columns:repeat(4,1fr);
  gap:var(--s-6); padding-block:var(--s-6);
}
.trust li{ display:flex; align-items:center; gap:var(--s-3); font-size:15px; font-weight:500; color:var(--text-2); }
.trust svg{ flex-shrink:0; color:var(--brand); }
@media(max-width:900px){ .trust ul{ grid-template-columns:repeat(2,1fr); } }
@media(max-width:420px){ .trust ul{ grid-template-columns:1fr; gap:var(--s-4); } }

/* ---------- Product cards ---------- */
.product-grid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s-8);
}
@media(max-width:1023px){ .product-grid{ grid-template-columns:repeat(2,1fr); gap:var(--s-6); } }
@media(max-width:680px){ .product-grid{ grid-template-columns:1fr; max-width:460px; } }
.product-card{
  background:var(--surface); border:1.5px solid var(--border);
  border-radius:var(--r-card); overflow:hidden;
  display:flex; flex-direction:column;
  transition:border-color .18s ease-out, transform .18s ease-out;
}
.product-card:hover{ border-color:var(--border-strong); transform:translateY(-3px); }
.product-media{
  position:relative; aspect-ratio:4/5;
  display:flex; align-items:center; justify-content:center; overflow:hidden;
}
.product-media svg{ width:58%; height:auto; }
.product-media img{ width:100%; height:100%; object-fit:cover; }
.price{ font-weight:600; font-size:18px; color:var(--text); }
.badge{
  position:absolute; top:14px; left:14px;
  background:var(--surface); border:1px solid var(--border-strong);
  color:var(--text); font-size:12px; font-weight:600; letter-spacing:.6px;
  text-transform:uppercase; padding:5px 12px; border-radius:var(--r-pill);
}
.product-body{ padding:var(--s-6); display:flex; flex-direction:column; gap:var(--s-3); flex:1; }
.product-body h3{ font-size:24px; }
.product-body .desc{ color:var(--text-2); font-size:16px; flex:1; }
.product-size{ font-size:14px; color:var(--text-3); }
.swatch-row{ display:flex; align-items:center; gap:var(--s-2); font-size:14px; color:var(--text-2); }
.swatch{
  width:20px; height:20px; border-radius:50%;
  border:1.5px solid rgba(44,39,37,.2);
}
.product-body .btn{ margin-top:var(--s-2); }
.marketplace-row{ font-size:14px; color:var(--text-3); }
.marketplace-row a{ color:var(--text-2); font-weight:500; }

/* ---------- Play Sash feature ---------- */
.feature{ background:var(--surface-blush); }
.feature .container{
  display:grid; grid-template-columns:minmax(0,500px) minmax(0,580px);
  justify-content:space-between; align-items:center; gap:clamp(40px,6vw,72px);
}
.feature h2{ font-size:clamp(31px,4vw,42px); margin-bottom:var(--s-4); max-width:var(--measure); }
.feature .desc{ color:var(--text-2); font-size:18px; margin-bottom:var(--s-6); }
.benefits{ list-style:none; display:grid; gap:var(--s-4); margin-bottom:var(--s-8); }
.benefits li{ display:flex; gap:var(--s-3); align-items:flex-start; }
.benefits svg{ flex-shrink:0; margin-top:3px; color:var(--brand); }
.benefits strong{ display:block; font-size:17px; }
.benefits span{ color:var(--text-2); font-size:15px; }
.patent-note{ margin-top:var(--s-3); font-size:13px; color:var(--text-3); }
.halo-art{ width:min(480px, 100%); }
@media(max-width:1023px){
  .feature .container{ grid-template-columns:1fr; }
  .feature .ph, .halo-art{ width:min(440px, 100%); order:-1; margin-inline:auto; }
}

/* ---------- How it works ---------- */
.steps{ list-style:none; display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s-8); counter-reset:step; }
.step{ position:relative; }
.step-num{
  width:44px; height:44px; border-radius:50%;
  border:2px solid var(--brand); color:var(--brand);
  font-family:var(--font-display); font-size:20px; font-weight:600;
  display:flex; align-items:center; justify-content:center; margin-bottom:var(--s-4);
}
.step h3{ font-size:22px; margin-bottom:var(--s-2); }
.step p{ color:var(--text-2); font-size:16px; }
@media(max-width:860px){
  .steps{ grid-template-columns:1fr; gap:var(--s-6); max-width:520px; }
  .step{ display:grid; grid-template-columns:44px 1fr; gap:var(--s-4); }
  .step-num{ margin-bottom:0; }
}

/* ---------- Materials & care ---------- */
.materials{ background:var(--surface-warm); }
.materials-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:var(--s-4); max-width:900px; }
@media(max-width:767px){ .materials-grid{ grid-template-columns:1fr; } }
details.panel{
  background:var(--surface); border:1.5px solid var(--border);
  border-radius:var(--r-card); overflow:hidden;
}
details.panel summary{
  list-style:none; cursor:pointer; padding:18px 22px;
  font-weight:600; font-size:17px;
  display:flex; align-items:center; justify-content:space-between; gap:var(--s-3);
  min-height:56px;
}
details.panel summary::-webkit-details-marker{ display:none; }
details.panel summary::after{
  content:"+"; font-family:var(--font-display); font-size:22px; color:var(--brand);
  transition:transform .18s ease-out;
}
details.panel[open] summary::after{ transform:rotate(45deg); }
details.panel .panel-body{ padding:0 22px 20px; color:var(--text-2); font-size:15px; }
details.panel .panel-body ul{ padding-left:20px; display:grid; gap:6px; }

/* ---------- Story ---------- */
.story .container{
  display:grid; grid-template-columns:minmax(0,560px) minmax(0,480px);
  justify-content:space-between; align-items:center; gap:clamp(40px,6vw,72px);
}
.story h2{ font-size:clamp(31px,4vw,42px); margin-bottom:var(--s-4); max-width:var(--measure); }
.story p{ color:var(--text-2); margin-bottom:var(--s-4); font-size:17px; }
@media(max-width:1023px){
  .story .container{ grid-template-columns:1fr; }
  .story .ph{ max-width:440px; }
}

/* ---------- FAQ ---------- */
.faq-list{ max-width:760px; display:grid; gap:var(--s-3); }
.faq-item{
  background:var(--surface); border:1.5px solid var(--border); border-radius:var(--r-card);
}
.faq-q{
  width:100%; text-align:left; background:none; border:none; cursor:pointer;
  font-family:var(--font-body); font-size:17px; font-weight:600; color:var(--text);
  padding:18px 22px; min-height:56px;
  display:flex; justify-content:space-between; align-items:center; gap:var(--s-4);
  border-radius:var(--r-card);
}
.faq-q .faq-icon{
  flex-shrink:0; font-family:var(--font-display); font-size:22px; color:var(--brand);
  transition:transform .18s ease-out;
}
.faq-q[aria-expanded="true"] .faq-icon{ transform:rotate(45deg); }
.faq-a{ display:grid; grid-template-rows:0fr; transition:grid-template-rows .2s ease-out; }
.faq-a > div{ overflow:hidden; }
.faq-a p{ padding:0 22px 20px; color:var(--text-2); font-size:16px; }
.faq-item.open .faq-a{ grid-template-rows:1fr; }

/* ---------- Final CTA ---------- */
.final-cta{ padding-block:clamp(48px,6vw,72px); }
.final-cta .panel-cta{
  background:var(--surface-blush); border:1.5px solid var(--border);
  border-radius:24px; padding:clamp(28px,4vw,44px);
  display:grid; justify-items:center; text-align:center;
}
.final-cta h2{ font-size:clamp(30px,3.6vw,40px); margin-bottom:var(--s-2); }
.final-cta p{ color:var(--text-2); font-size:17px; max-width:52ch; margin-bottom:var(--s-6); }
.final-cta .signup-form{ width:100%; max-width:540px; }
.final-cta .form-micro{ text-align:center; }

/* snuggling g's — brand signature moment */
.snuggle-g{ display:inline-flex; position:relative; }
.snuggle-g i{ font-style:normal; display:inline-block; }
.snuggle-g i:first-child{ transform:rotate(7deg); transform-origin:50% 85%; animation:nuzzleL 3.2s ease-in-out infinite; }
.snuggle-g i:last-child{ transform:rotate(-7deg); transform-origin:50% 85%; margin-left:-.015em; animation:nuzzleR 3.2s ease-in-out infinite; }
.snuggle-g::before{
  content:"\2665"; position:absolute; top:-.55em; left:50%; transform:translateX(-50%);
  font-size:.32em; color:var(--brand); animation:heartPulse 3.2s ease-in-out infinite;
}
@keyframes nuzzleL{ 0%,100%{ transform:rotate(7deg); } 50%{ transform:rotate(10deg); } }
@keyframes nuzzleR{ 0%,100%{ transform:rotate(-7deg); } 50%{ transform:rotate(-10deg); } }
@keyframes heartPulse{ 0%,100%{ opacity:.75; } 50%{ opacity:1; } }

/* ---------- Footer ---------- */
.site-footer{
  background:var(--surface-warm); border-top:1px solid var(--border);
  padding-block:var(--s-8) var(--s-6); font-size:15px; color:var(--text-2);
}
.footer-grid{
  display:grid; grid-template-columns:minmax(0,1.4fr) repeat(2,minmax(0,1fr));
  gap:var(--s-6); margin-bottom:var(--s-6);
}
.footer-brand img{ display:block; width:min(210px, 100%); height:auto; margin:0 0 var(--s-3); }
.footer-brand p{ max-width:36ch; font-size:14px; color:var(--text-3); }
.site-footer h2{ font-family:var(--font-body); font-size:14px; font-weight:600; letter-spacing:1px; text-transform:uppercase; color:var(--text); margin-bottom:var(--s-3); }
.site-footer ul{ list-style:none; display:grid; gap:var(--s-2); }
.site-footer a{ color:var(--text-2); text-decoration:none; display:inline-block; padding:3px 0; }
.site-footer a:hover{ color:var(--brand); text-decoration:underline; }
.footer-fine{
  border-top:1px solid var(--border); padding-top:var(--s-4);
  font-size:13px; color:var(--text-3);
  display:flex; flex-wrap:wrap; gap:var(--s-3) var(--s-6); justify-content:space-between;
}
@media(max-width:767px){ .footer-grid{ grid-template-columns:1fr; gap:var(--s-6); } }