/* ─────────────────────────────────────────────────────────────
   kotsu marketing site · consumes web/tokens.css (never hardcode hex)
   layout + components per Design System v1.0 "Website patterns"
   ───────────────────────────────────────────────────────────── */

*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
@media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto;} }
body{
  background:var(--c-bg);
  color:var(--c-text-primary);
  font-family:var(--font-body);
  font-size:var(--fs-body); line-height:var(--lh-body);
  -webkit-font-smoothing:antialiased;
}
img,svg{display:block;}
a{color:var(--c-link); text-decoration:none;}
a:hover{text-decoration:underline;}
:focus-visible{outline:none; box-shadow:0 0 0 var(--focus-ring-width) var(--c-focus-ring); border-radius:var(--radius-sm);}

.wrap{max-width:var(--site-max, var(--layout-max)); margin:0 auto; padding-left:var(--layout-margin); padding-right:var(--layout-margin);}
/* width tweak: narrow keeps the page phone-shaped everywhere; auto = narrow on small screens, wide on desktop */
html[data-width="narrow"]{--site-max:600px;}
html[data-width="cozy"]{--site-max:780px;}
html[data-width="wide"]{--site-max:1200px;}
html[data-width="narrow"] .hero .wrap{grid-template-columns:1fr;}
html[data-width="narrow"] .friends-grid{grid-template-columns:1fr;}
html[data-width="narrow"] .steps{grid-template-columns:1fr;}
html[data-width="narrow"] .perks{grid-template-columns:1fr;}
@media (max-width:1023px){
  html[data-width="auto"]{--site-max:600px;}
  html[data-width="auto"] .hero .wrap{grid-template-columns:1fr;}
  html[data-width="auto"] .friends-grid{grid-template-columns:1fr;}
  html[data-width="auto"] .steps{grid-template-columns:1fr;}
  html[data-width="auto"] .perks{grid-template-columns:1fr;}
}
@media (min-width:1024px){
  html[data-width="auto"]{--site-max:1200px;}
}
@media (min-width:768px){ .wrap{padding-left:32px; padding-right:32px;} }

/* — wordmark lockup — */
.wordmark{display:inline-flex; align-items:center; gap:.09em; font-family:var(--font-display); font-weight:var(--fw-semibold); color:var(--c-text-primary); line-height:1;}
.wordmark .dot{width:.25em; height:.25em; border-radius:50%; background:var(--brand-dot-color); flex-shrink:0;}

/* — buttons — */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  min-height:var(--tap-target-min);
  background:var(--c-action); color:var(--c-action-on);
  font-family:var(--font-body); font-weight:var(--fw-bold); font-size:15px;
  padding:12px 24px; border:none; border-radius:14px; cursor:pointer;
  white-space:nowrap; flex-shrink:0;
  transition:background var(--dur-quick) var(--ease-standard), transform var(--dur-quick) var(--ease-standard);
}
.btn:hover{background:var(--c-action-hover); text-decoration:none;}
.btn:active{background:var(--c-action-pressed); transform:translateY(1px);}
.text-link{font-weight:var(--fw-bold); font-size:15px; color:var(--c-link);}

/* — nav — */
.site-nav{
  position:sticky; top:0; z-index:50;
  background:color-mix(in srgb, var(--c-bg) 85%, transparent);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  border-bottom:1px solid var(--c-border);
}
.site-nav .bar{display:flex; align-items:center; gap:22px; min-height:60px;}
.site-nav .wordmark{font-size:22px; line-height:1; position:relative; top:1px;}
.nav-links{display:flex; gap:4px; margin-left:auto; align-items:center;}
.nav-links a{
  display:inline-flex; align-items:center; min-height:var(--tap-target-min);
  padding:0 12px; border-radius:var(--radius-sm);
  font-size:14px; font-weight:var(--fw-bold); color:var(--c-text-secondary);
}
.nav-links a:hover{color:var(--c-link); text-decoration:none;}
.nav-cta{margin-left:8px; font-size:13.5px; padding:9px 16px; border-radius:11px; min-height:40px;}
.nav-burger{
  display:none; margin-left:auto; width:var(--tap-target-min); height:var(--tap-target-min);
  align-items:center; justify-content:center; background:none; border:none; cursor:pointer;
  color:var(--c-text-secondary); border-radius:var(--radius-sm);
}
.nav-sheet{display:none;}
@media (max-width:767px){
  .site-nav .bar{min-height:52px;}
  .nav-links{display:none;}
  .nav-burger{display:flex;}
  .nav-sheet{
    display:flex; flex-direction:column; gap:2px;
    background:var(--c-surface);
    padding:0 12px;              /* no vertical padding when closed, so it collapses to a true 0 height */
    overflow:hidden; max-height:0; opacity:0; visibility:hidden;
    transition:max-height var(--dur-base) var(--ease-standard), padding var(--dur-base) var(--ease-standard), opacity var(--dur-base) var(--ease-standard), visibility 0s linear var(--dur-base);
  }
  .nav-sheet.open{max-height:320px; padding:6px 12px 14px; border-bottom:1px solid var(--c-border); opacity:1; visibility:visible; transition:max-height var(--dur-base) var(--ease-standard), padding var(--dur-base) var(--ease-standard), opacity var(--dur-base) var(--ease-standard);}
  .nav-sheet a{display:flex; align-items:center; min-height:var(--tap-target-min); padding:0 12px; border-radius:10px; font-size:15px; font-weight:var(--fw-bold); color:var(--c-text-secondary);}
  .nav-sheet a:hover{text-decoration:none; background:var(--c-surface-sunken);}
  .nav-sheet .btn{margin:8px 8px 0; justify-content:center;}
}

/* — hero — */
.hero{
  position:relative; overflow:hidden;
  background:linear-gradient(180deg, var(--sky-300) 0%, var(--sky-100) 48%, var(--sky-50) 72%, var(--c-bg) 100%);
  padding:72px 0 0;
}
.hero .wrap{position:relative; display:grid; grid-template-columns:1fr; gap:32px;}
@media (min-width:1024px){ .hero .wrap{grid-template-columns:7fr 5fr; align-items:end;} }
.hero-copy{max-width:620px; padding-bottom:72px; position:relative; z-index:2;}
.eyebrow{font-family:var(--font-accent); font-style:italic; font-size:18px; color:var(--lake-700);}
[data-theme="dusk"] .eyebrow{color:var(--lake-300);}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .eyebrow{color:var(--lake-300);} }
.hero h1{
  font-family:var(--font-display); font-weight:var(--fw-semibold);
  font-size:var(--fs-mkt-xl); line-height:var(--lh-display);
  letter-spacing:-1px; margin-top:10px; white-space:pre-line; text-wrap:balance;
}
.hero-sub{font-size:var(--fs-body-lg); line-height:var(--lh-body-lg); color:var(--c-text-secondary); max-width:460px; margin-top:16px;}
.hero-actions{display:flex; align-items:center; gap:20px; margin-top:28px; flex-wrap:wrap;}

.sun{
  position:absolute; top:48px; right:8%;
  width:84px; height:84px; border-radius:50%;
  background:var(--honey-500);
  box-shadow:0 0 26px 10px color-mix(in srgb, var(--honey-500) 40%, transparent);
}
.cloud{
  position:absolute; top:120px; left:44%;
  width:72px; height:22px; border-radius:var(--radius-pill);
  background:var(--warm-0); opacity:.65;
}
.cloud::before{content:""; position:absolute; top:-10px; left:16px; width:30px; height:30px; border-radius:50%; background:inherit;}
.cloud.small{width:46px; height:15px; top:80px; left:14%; opacity:.45;}
.cloud.small::before{top:-7px; left:10px; width:20px; height:20px;}

.hero-scene{position:relative; min-height:220px; z-index:1;}
.hill{
  position:absolute; bottom:-40px; left:50%; transform:translateX(-50%);
  width:560px; height:220px; border-radius:50% 50% 0 0;
  background:linear-gradient(180deg, var(--meadow-100), color-mix(in srgb, var(--meadow-100) 30%, var(--c-bg)));
}
[data-theme="dusk"] .hill{background:linear-gradient(180deg, color-mix(in srgb, var(--meadow-900) 55%, var(--c-bg)), var(--c-bg));}
[data-theme="dusk"] .hero{background:linear-gradient(180deg, var(--sky-900) 0%, var(--sky-950) 52%, var(--c-bg) 100%);}
[data-theme="dusk"] .cloud{background:var(--sky-800); opacity:.55;}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .hill{background:linear-gradient(180deg, color-mix(in srgb, var(--meadow-900) 55%, var(--c-bg)), var(--c-bg));}
  :root:not([data-theme="light"]) .hero{background:linear-gradient(180deg, var(--sky-900) 0%, var(--sky-950) 52%, var(--c-bg) 100%);}
  :root:not([data-theme="light"]) .cloud{background:var(--sky-800); opacity:.55;}
}

/* — pet placeholder blobs (art slots; final art + tints come from the artist) — */
.pet-art-slot{position:relative;}
.blob{position:relative; background:var(--blob-tint, #CDBFA6); border-radius:48% 52% 55% 45% / 60% 62% 38% 40%;}
.blob .eyes{position:absolute; top:42%; left:50%; transform:translateX(-50%); display:flex; gap:26%; width:46%;}
.blob .eyes i{width:9%; min-width:5px; aspect-ratio:1; border-radius:50%; background:var(--warm-800); flex-shrink:0;}
.blob .mouth{position:absolute; top:56%; left:50%; transform:translateX(-50%); width:12%; height:6%; border:2px solid var(--warm-800); border-top:none; border-radius:0 0 999px 999px;}
.blob .blush{position:absolute; top:52%; width:12%; aspect-ratio:1.6; border-radius:50%; background:color-mix(in srgb, var(--honey-300) 55%, transparent);}
.blob .blush.l{left:16%;} .blob .blush.r{right:16%;}
.blob.tall{border-radius:46% 54% 52% 48% / 72% 70% 30% 28%;}
.blob.round{border-radius:50% 50% 48% 52% / 55% 55% 45% 45%;}
.hero-pet{position:absolute; bottom:24px; left:50%; transform:translateX(-50%); width:120px; height:104px; cursor:pointer;}

/* pet poke — a little hop when you tap the hero pet (honors reduced-motion via the global rule) */
@keyframes k-poke{
  0%,100%{transform:translateY(0) rotate(0deg);}
  22%{transform:translateY(-15px) rotate(-5deg);}
  45%{transform:translateY(0) rotate(4deg);}
  66%{transform:translateY(-7px) rotate(-2deg);}
  85%{transform:translateY(0) rotate(1deg);}
}
#hero-blob.poke{animation:k-poke var(--dur-burst) var(--ease-standard);}

/* breathing idle — decorative only */
@keyframes k-breathe{ 0%,100%{transform:scale(1);} 50%{transform:scale(1.035);} }
@keyframes k-breathe-pet{ 0%,100%{transform:translateX(-50%) scale(1);} 50%{transform:translateX(-50%) scale(1.03,.97);} }
@keyframes k-drift{ from{transform:translateX(0);} to{transform:translateX(46px);} }
[data-motion="on"] .sun{animation:k-breathe calc(var(--dur-breathe) * 2) var(--ease-idle) infinite;}
[data-motion="on"] .cloud{animation:k-drift 18s var(--ease-idle) infinite alternate;}
[data-motion="on"] .hero-pet .blob{animation:k-breathe var(--dur-breathe) var(--ease-idle) infinite;}
[data-motion="on"] .picker .blob{animation:k-breathe var(--dur-breathe) var(--ease-idle) infinite;}

/* hero entry settle */
@media (prefers-reduced-motion: no-preference){
  [data-motion="on"] .settle{animation:k-rise var(--dur-calm) var(--ease-standard) backwards;}
  [data-motion="on"] .settle.s2{animation-delay:90ms;} [data-motion="on"] .settle.s3{animation-delay:180ms;} [data-motion="on"] .settle.s4{animation-delay:270ms;}
}
@keyframes k-rise{ from{opacity:0; transform:translateY(14px);} to{opacity:1; transform:none;} }

/* — sections — */
section{padding:72px 0;}
.kicker{font-family:var(--font-accent); font-style:italic; font-size:17px; color:var(--honey-700);}
[data-theme="dusk"] .kicker{color:var(--honey-300);}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .kicker{color:var(--honey-300);} }
.sec-h{font-family:var(--font-display); font-weight:var(--fw-semibold); font-size:var(--fs-mkt-md); line-height:var(--lh-h1); margin-top:6px; text-wrap:balance;}
.sec-sub{font-size:var(--fs-body-lg); line-height:var(--lh-body-lg); color:var(--c-text-secondary); max-width:560px; margin-top:12px;}
.center{text-align:center;}
.center .sec-sub{margin-left:auto; margin-right:auto;}

/* how it works */
.steps{display:grid; grid-template-columns:1fr; gap:16px; margin-top:40px;}
@media (min-width:768px){ .steps{grid-template-columns:repeat(3,1fr); gap:24px;} }
.step{background:var(--c-surface); border:1px solid var(--c-border); border-radius:var(--radius-xl); padding:28px 24px; box-shadow:var(--shadow-sm);}
.step .glyph{height:56px; display:flex; align-items:center; margin-bottom:16px;}
.step h3{font-family:var(--font-display); font-weight:var(--fw-semibold); font-size:var(--fs-h3); line-height:var(--lh-h3);}
.step p{color:var(--c-text-secondary); margin-top:8px; font-size:15px; line-height:1.55;}
.step .n{font-size:var(--fs-caption); font-weight:var(--fw-extrabold); color:var(--c-text-muted); letter-spacing:.12em; text-transform:uppercase;}

/* glyphs — simple, flat */
.g-ring{width:44px; height:44px; border-radius:50%; border:4px solid var(--lake-300); position:relative;}
.g-ring::after{content:""; position:absolute; inset:-4px; border-radius:50%; border:4px solid transparent; border-top-color:var(--c-action); transform:rotate(40deg);}
.g-phone{width:52px; height:26px; border-radius:8px; border:3px solid var(--warm-300); position:relative; align-self:flex-end; margin-bottom:6px;}
.g-phone::after{content:""; position:absolute; right:4px; top:50%; transform:translateY(-50%); width:4px; height:10px; border-radius:2px; background:var(--warm-300);}
.g-sprout{width:4px; height:22px; background:var(--meadow-500); border-radius:2px; position:relative; margin-left:14px; align-self:flex-end; margin-bottom:6px;}
.g-sprout::before,.g-sprout::after{content:""; position:absolute; top:0; width:14px; height:10px; background:var(--meadow-300); border-radius:100% 0;}
.g-sprout::before{left:3px; transform:rotate(-18deg);}
.g-sprout::after{right:3px; transform:scaleX(-1) rotate(-18deg); background:var(--meadow-400);}
.g-dot{width:22px; height:22px; border-radius:50%; background:var(--c-reward); box-shadow:0 0 14px 4px color-mix(in srgb, var(--c-reward) 35%, transparent);}
.g-paw{width:34px; height:26px; border-radius:50% 50% 45% 45%; background:var(--warm-300); position:relative; margin-right:12px;}

/* steps: stacked scroll mode (cards pile up as you scroll, à la deck of cards) — narrow widths only */
html[data-steps="stack"][data-width="narrow"] .steps,
html[data-steps="stack"][data-width="cozy"] .steps{display:flex; flex-direction:column; gap:0;}
html[data-steps="stack"][data-width="narrow"] .step,
html[data-steps="stack"][data-width="cozy"] .step{
  position:sticky; box-shadow:var(--shadow-md);
  margin-bottom:20px; min-height:225px; background:var(--c-surface);
}
html[data-steps="stack"][data-width="narrow"] .step:nth-child(1),
html[data-steps="stack"][data-width="cozy"] .step:nth-child(1){top:88px;}
html[data-steps="stack"][data-width="narrow"] .step:nth-child(2),
html[data-steps="stack"][data-width="cozy"] .step:nth-child(2){top:100px;}
html[data-steps="stack"][data-width="narrow"] .step:nth-child(3),
html[data-steps="stack"][data-width="cozy"] .step:nth-child(3){top:112px; margin-bottom:0;}
@media (max-width:1023px){
  html[data-steps="stack"][data-width="auto"] .steps{display:flex; flex-direction:column; gap:0;}
  html[data-steps="stack"][data-width="auto"] .step{
    position:sticky; box-shadow:var(--shadow-md);
    margin-bottom:20px; min-height:225px; background:var(--c-surface);
  }
  html[data-steps="stack"][data-width="auto"] .step:nth-child(1){top:88px;}
  html[data-steps="stack"][data-width="auto"] .step:nth-child(2){top:100px;}
  html[data-steps="stack"][data-width="auto"] .step:nth-child(3){top:112px; margin-bottom:0;}
}
/* auto width on desktop ≥ 1024px: steps stay grid regardless of stack setting */

/* friends */
.friends-grid{display:grid; grid-template-columns:1fr; gap:32px; margin-top:40px; align-items:center;}
@media (min-width:900px){ .friends-grid{grid-template-columns:1fr 1fr; gap:48px;} }
.friend-card{background:var(--c-surface); border:1px solid var(--c-border); border-radius:var(--radius-xl); padding:20px; box-shadow:var(--shadow-md); max-width:440px;}
.friend-card .fc-head{font-size:var(--fs-label); font-weight:var(--fw-extrabold); color:var(--c-text-muted); letter-spacing:.1em; text-transform:uppercase; padding:4px 6px 12px;}
.friend-row{display:flex; align-items:center; gap:14px; padding:12px 6px; border-top:1px solid var(--c-border);}
.friend-row .blob{width:38px; height:34px; flex-shrink:0;}
.friend-row .fname{font-weight:var(--fw-bold); font-size:15px;}
.friend-row .fdays{font-size:var(--fs-caption); color:var(--c-text-muted);}
.friend-row .badge{
  margin-left:auto; font-size:12.5px; font-weight:var(--fw-extrabold);
  background:var(--c-social-tint); color:var(--c-social-text);
  padding:5px 10px; border-radius:var(--radius-pill); white-space:nowrap;
}
.friend-row .badge.showed{background:var(--c-success-tint); color:var(--c-success-text);}
.friends-points{display:flex; flex-direction:column; gap:14px; margin-top:24px;}
.friends-points li{display:flex; gap:10px; font-size:15px; line-height:1.55; color:var(--c-text-secondary); list-style:none;}
.friends-points li::before{content:"·"; color:var(--c-social); font-weight:var(--fw-extrabold);}

/* founding explorer perks */
.perks{display:grid; grid-template-columns:1fr; gap:16px; margin-top:40px;}
@media (min-width:768px){ .perks{grid-template-columns:repeat(3,1fr); gap:24px;} }
.perk{background:var(--c-reward-tint); border-radius:var(--radius-xl); padding:26px 24px;}
.perk h3{font-family:var(--font-display); font-weight:var(--fw-semibold); font-size:var(--fs-h3); color:var(--c-reward-text);}
.perk p{color:var(--c-text-secondary); margin-top:8px; font-size:15px; line-height:1.55;}
.perk .pk-dot{width:14px; height:14px; border-radius:50%; background:var(--c-reward); margin-bottom:14px;}

/* — save-your-pet (naming + waitlist) — */
.save{background:var(--c-surface); border-top:1px solid var(--c-border); border-bottom:1px solid var(--c-border);}
.save-box{max-width:560px; margin:40px auto 0;}
.picker{display:flex; justify-content:center; gap:20px;}
.pick{
  background:var(--c-bg); border:2px solid var(--c-border); border-radius:var(--radius-lg);
  width:120px; padding:18px 10px 12px; cursor:pointer; text-align:center;
  transition:border-color var(--dur-quick) var(--ease-standard), transform var(--dur-quick) var(--ease-standard);
}
.pick .blob{width:64px; height:56px; margin:0 auto;}
.pick .plabel{font-size:var(--fs-caption); font-weight:var(--fw-bold); color:var(--c-text-muted); margin-top:10px;}
.pick:hover{transform:translateY(-2px);}
.pick[aria-pressed="true"]{border-color:var(--c-action); background:var(--c-surface);}
.pick[aria-pressed="true"] .plabel{color:var(--c-action);}
@media (max-width:479px){ .picker{gap:10px;} .pick{width:31%;} }

.field-label{display:block; font-size:var(--fs-label); font-weight:var(--fw-extrabold); color:var(--c-text-secondary); margin:26px 0 8px;}
.input{
  width:100%; height:48px; padding:0 16px;
  background:var(--c-surface); border:1.5px solid var(--c-border); border-radius:var(--radius-md);
  font-family:var(--font-body); font-size:15px; color:var(--c-text-primary);
}
.input::placeholder{color:var(--c-text-muted);}
.input:focus{outline:none; border-color:var(--c-action); box-shadow:0 0 0 var(--focus-ring-width) var(--c-focus-ring);}
/* email + submit stack, so the email box is a full-width input identical to the name box */
.form-line{display:flex; flex-direction:column; gap:12px;}
.form-line .btn{width:100%;}

.msg{display:none; align-items:center; gap:9px; border-radius:var(--radius-md); padding:11px 14px; margin-top:12px; font-size:13.5px; font-weight:var(--fw-bold);}
.msg svg{flex-shrink:0;}
.msg.show{display:flex;}
.msg.error{background:var(--c-error-tint); border:1px solid var(--coral-200); color:var(--c-error-text);}
.msg.success{background:var(--c-success-tint); color:var(--c-success-text);}
.count-line{display:none; font-size:var(--fs-caption); color:var(--c-text-muted); margin-top:10px;}
.count-line.show{display:block;}
.fine{font-size:var(--fs-caption); color:var(--c-text-muted); margin-top:14px;}
.founder-line{margin-top:18px; display:flex; align-items:flex-start; gap:10px; background:var(--c-reward-tint); border-radius:var(--radius-md); padding:12px 14px; font-size:13.5px; color:var(--c-text-secondary); line-height:1.5;}
.founder-line .pk-dot{width:10px; height:10px; border-radius:50%; background:var(--c-reward); flex-shrink:0; margin-top:4px;}
.founder-line strong{color:var(--c-reward-text);}

/* saved state */
.saved-view{display:none; text-align:center;}
.saved-view.show{display:block;}
.saved-view .blob{width:96px; height:84px; margin:0 auto 18px;}
.save-form.done{display:none;}

/* — FAQ — */
.faq-list{max-width:720px; margin:40px auto 0; display:flex; flex-direction:column; gap:10px;}
.faq-list details{background:var(--c-surface); border:1px solid var(--c-border); border-radius:var(--radius-lg); overflow:hidden;}
.faq-list summary{
  list-style:none; cursor:pointer; display:flex; align-items:center; gap:12px;
  min-height:var(--tap-target-min); padding:14px 20px;
  font-family:var(--font-display); font-weight:var(--fw-semibold); font-size:17px;
}
.faq-list summary::-webkit-details-marker{display:none;}
.faq-list summary::after{content:"+"; margin-left:auto; font-family:var(--font-body); font-weight:var(--fw-regular); font-size:22px; color:var(--c-text-muted); transition:transform var(--dur-quick) var(--ease-standard);}
.faq-list details[open] summary::after{transform:rotate(45deg);}
.faq-list .fa{padding:0 20px 18px; color:var(--c-text-secondary); font-size:15px; line-height:1.6; max-width:60ch;}

/* — CTA band — */
.cta-band{
  background:linear-gradient(180deg, var(--sky-200), var(--sky-100) 62%, var(--sky-50));
  text-align:center; position:relative; overflow:hidden; padding:88px 0;
}
.cta-band .sun{top:26px; right:10%; width:44px; height:44px; box-shadow:0 0 18px 7px color-mix(in srgb, var(--honey-500) 40%, transparent);}
.cta-band h2{font-family:var(--font-display); font-weight:var(--fw-semibold); font-size:var(--fs-mkt-md); line-height:var(--lh-h1); color:var(--warm-800); text-wrap:balance;}
.cta-band p{font-size:15px; color:var(--warm-700); margin-top:10px;}
.cta-band .btn{margin-top:24px;}
[data-theme="dusk"] .cta-band{background:linear-gradient(180deg, var(--sky-900), var(--sky-950));}
[data-theme="dusk"] .cta-band h2{color:var(--warm-0);}
[data-theme="dusk"] .cta-band p{color:var(--sky-200);}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .cta-band{background:linear-gradient(180deg, var(--sky-900), var(--sky-950));}
  :root:not([data-theme="light"]) .cta-band h2{color:var(--warm-0);}
  :root:not([data-theme="light"]) .cta-band p{color:var(--sky-200);}
}

/* — footer — */
.site-footer{background:var(--c-surface-sunken); padding:48px 0 36px;}
.site-footer .top{display:flex; align-items:center; gap:16px; flex-wrap:wrap;}
.site-footer .wordmark{font-size:24px;}
.site-footer .tag{font-family:var(--font-accent); font-style:italic; font-size:14px; color:var(--c-text-muted);}
.site-footer nav{display:flex; gap:8px; margin:0 auto; flex-wrap:wrap; justify-content:center;}
.site-footer nav a{display:inline-flex; align-items:center; min-height:var(--tap-target-min); padding:0 10px; font-size:13.5px; font-weight:var(--fw-bold); color:var(--c-text-secondary); border-radius:var(--radius-sm);}
.site-footer nav a:hover{color:var(--c-link); text-decoration:none;}
.site-footer .legal{
  border-top:1px solid var(--c-border); margin-top:22px; padding-top:16px;
  display:flex; align-items:center; gap:16px; flex-wrap:wrap;
  font-size:12.5px; color:var(--c-text-muted);
}
.theme-pill{
  margin-left:auto; display:inline-flex; align-items:center; gap:7px;
  min-height:36px; padding:6px 14px; border-radius:var(--radius-pill);
  background:var(--c-surface); border:1px solid var(--c-border);
  font-family:var(--font-body); font-size:12.5px; font-weight:var(--fw-bold); color:var(--c-text-secondary);
  cursor:pointer;
}
.theme-pill:hover{color:var(--c-link);}
/* floating dusk toggle — near the top, clear of the nav */
.theme-float{
  position:fixed; top:76px; right:16px; z-index:51;
  margin:0; box-shadow:var(--shadow-sm);
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  background:color-mix(in srgb, var(--c-surface) 88%, transparent);
}
@media (max-width:767px){ .theme-float{top:68px; right:12px;} }
/* tweak: the pill can scroll away with the hero instead of staying fixed */
html[data-duskpill="scroll"] .theme-float{position:absolute;}

/* — tweak-driven section visibility — */
html[data-show-friends="off"] #friends{display:none;}
html[data-show-perks="off"] #founding{display:none;}
html[data-show-faq="off"] #faq{display:none;}

/* ═══ v2 · time-of-day hero + socials (scoped: body.v2 / html[data-daypart]) ═══ */

body.v2 .hero-scene{min-height:280px;}
body.v2 .hero-pet{width:150px; height:130px; bottom:20px;}
/* v2 ground: two-layer meadow — defined crests, bottom dissolves into the cream canvas */
body.v2 .hill{
  width:165vw; max-width:2300px; height:200px; bottom:0;
  border-radius:50% 50% 0 0 / 100% 100% 0 0;
  background:linear-gradient(180deg,
    color-mix(in srgb, var(--meadow-200) 52%, var(--c-bg)) 0%,
    color-mix(in srgb, var(--meadow-100) 34%, var(--c-bg)) 46%,
    var(--c-bg) 96%);
  filter:none;
}
body.v2 .hill::before{
  content:""; position:absolute; bottom:0; left:-14%;
  width:80%; height:150%;
  border-radius:50% 50% 0 0 / 100% 100% 0 0;
  background:linear-gradient(180deg,
    color-mix(in srgb, var(--meadow-100) 38%, var(--c-bg)) 0%,
    var(--c-bg) 90%);
  z-index:-1;
}

/* occasional blink — idle life, breathing pace */
@keyframes k-blink{ 0%, 91%, 100%{transform:scaleY(1);} 94%, 96%{transform:scaleY(.1);} }
html[data-motion="on"] .v2 .blob .eyes i{animation:k-blink 5.5s linear infinite;}
html[data-motion="on"] .v2 .pick[data-pick="1"] .eyes i{animation-delay:1.4s;}
html[data-motion="on"] .v2 .pick[data-pick="2"] .eyes i{animation-delay:2.9s;}

/* speech bubble gentle bob */
@keyframes k-bob{ 0%,100%{transform:translate(-50%,0);} 50%{transform:translate(-50%,-4px);} }
html[data-motion="on"] .v2 .hero-bubble{animation:k-bob var(--dur-rest) var(--ease-idle) infinite;}

.hero-bubble{
  position:absolute; bottom:170px; left:50%; transform:translateX(-50%);
  background:var(--c-surface); border:1px solid var(--c-border); border-radius:var(--radius-pill);
  padding:6px 14px; font-size:var(--fs-caption); font-weight:var(--fw-bold); color:var(--c-text-secondary);
  white-space:nowrap; box-shadow:var(--shadow-sm); z-index:2;
}
.hero-bubble::after{
  content:""; position:absolute; bottom:-5px; left:50%; transform:translateX(-50%) rotate(45deg);
  width:9px; height:9px; background:var(--c-surface);
  border-right:1px solid var(--c-border); border-bottom:1px solid var(--c-border);
}

/* moon, stars, zzz — night only */
.moon{display:none; position:absolute; top:52px; right:9%; width:64px; height:64px; border-radius:50%; background:var(--warm-100); box-shadow:0 0 22px 8px color-mix(in srgb, var(--warm-100) 30%, transparent);
  -webkit-mask:radial-gradient(circle at 74% 26%, transparent 46%, #000 47%); mask:radial-gradient(circle at 74% 26%, transparent 46%, #000 47%);}
.stars{display:none;}
.stars i{position:absolute; width:4px; height:4px; border-radius:50%; background:var(--warm-50); opacity:.8;}
.stars i:nth-child(1){top:70px; left:16%;}
.stars i:nth-child(2){top:130px; left:38%; width:3px; height:3px; opacity:.6;}
.stars i:nth-child(3){top:56px; left:60%; width:3px; height:3px; opacity:.7;}
@keyframes k-twinkle{ 0%,100%{opacity:.35;} 50%{opacity:.85;} }
[data-motion="on"] .stars i{animation:k-twinkle var(--dur-rest) var(--ease-idle) infinite;}
[data-motion="on"] .stars i:nth-child(2){animation-delay:1.2s;}
[data-motion="on"] .stars i:nth-child(3){animation-delay:2.4s;}
.zzz{display:none; position:absolute; top:-14px; right:-6px; font-family:var(--font-display); font-weight:var(--fw-bold); color:var(--sky-200);}
.zzz span{display:inline-block; font-size:14px;}
.zzz span:last-child{font-size:11px; transform:translateY(-6px);}
@keyframes k-zzz{ 0%,100%{transform:translateY(0);} 50%{transform:translateY(-3px);} }
[data-motion="on"] .zzz span{animation:k-zzz var(--dur-breathe) var(--ease-idle) infinite;}
[data-motion="on"] .zzz span:last-child{animation-delay:.6s;}

/* — morning · 5–11am — */
html[data-daypart="morning"] .hero{background:linear-gradient(180deg, var(--sky-200) 0%, var(--sky-50) 46%, var(--honey-50) 70%, var(--c-bg) 100%);}
html[data-daypart="morning"] .hero .sun{top:36px; right:16%; width:64px; height:64px; background:var(--honey-300); box-shadow:0 0 22px 8px color-mix(in srgb, var(--honey-300) 35%, transparent);}
html[data-daypart="morning"] .hero .cloud{opacity:.5;}

/* — golden hour · 5–8pm — */
html[data-daypart="golden"] .hero{background:linear-gradient(180deg, var(--sky-400) 0%, var(--sky-200) 40%, var(--honey-200) 68%, var(--c-bg) 100%);}
html[data-daypart="golden"] .hero .sun{top:170px; right:6%; width:96px; height:96px; background:var(--honey-400); box-shadow:0 0 34px 14px color-mix(in srgb, var(--honey-400) 45%, transparent);}
html[data-daypart="golden"] .hero .cloud{background:var(--honey-50); opacity:.75;}

/* — night · 8pm–5am · pet asleep: dormant & content, never sad — */
html[data-daypart="night"] .hero{background:linear-gradient(180deg, var(--sky-950) 0%, var(--sky-900) 48%, var(--sky-800) 74%, var(--c-bg) 100%);}
html[data-daypart="night"] .hero .sun{display:none;}
html[data-daypart="night"] .hero .moon{display:block;}
html[data-daypart="night"] .hero .stars{display:block;}
html[data-daypart="night"] .hero .cloud{background:var(--sky-800); opacity:.4;}
html[data-daypart="night"] .hero h1{color:var(--warm-0);}
html[data-daypart="night"] .hero .hero-sub{color:var(--sky-200);}
html[data-daypart="night"] .hero .eyebrow{color:var(--lake-300);}
html[data-daypart="night"] .hero .text-link{color:var(--lake-300);}
html[data-daypart="night"] .hill{background:linear-gradient(180deg, color-mix(in srgb, var(--meadow-900) 40%, var(--sky-900)) 0%, color-mix(in srgb, var(--meadow-900) 14%, var(--c-bg)) 55%, var(--c-bg) 96%);}
html[data-daypart="night"] .hill::before{background:linear-gradient(180deg, color-mix(in srgb, var(--meadow-900) 22%, var(--sky-900)) 0%, var(--c-bg) 90%);}
html[data-daypart="night"] .hero-pet .eyes i{aspect-ratio:auto; height:3px; border-radius:2px; align-self:center; animation:none;}
html[data-daypart="night"] .hero-pet .mouth{display:none;}
html[data-daypart="night"] .hero-pet .zzz{display:block;}
html[data-daypart="night"] .hero-pet .blob{animation-duration:var(--dur-rest);}

/* smooth accordion (JS-driven height) */
.faq-list .fa-wrap{overflow:hidden; transition:height var(--dur-base) var(--ease-standard);}
.faq-list details.closing summary::after{transform:rotate(0);}

/* — mobile polish (primary viewing context) — */
@media (max-width:767px){
  body.v2 section{padding:56px 0;}
  body.v2 .hero{padding-top:56px;}
  body.v2 .hero-copy{padding-bottom:36px;}
  body.v2 .hero-scene{min-height:225px;}
  body.v2 .hero-pet{width:118px; height:102px;}
  body.v2 .hero-bubble{bottom:138px;}
  body.v2 .hero .sun{width:56px; height:56px; top:20px; right:6%;}
  body.v2 .hero .moon{width:52px; height:52px; top:20px; right:6%;}
  body.v2 .hero .cloud{top:96px;}
  body.v2 .hero .cloud.small{top:60px;}
  body.v2 .stars i:nth-child(1){top:54px; left:10%;}
  body.v2 .stars i:nth-child(2){top:104px; left:34%;}
  body.v2 .friend-card{max-width:none;}
  body.v2 .hill{height:160px;}
}

/* — footer socials — */
.socials{display:flex; gap:8px; margin-top:20px; flex-wrap:wrap;}
html[data-width="narrow"] .site-footer .top,
html[data-width="auto"] .site-footer .top{flex-direction:column; align-items:center; text-align:center;}
html[data-width="narrow"] .site-footer .socials,
html[data-width="auto"] .site-footer .socials{justify-content:center;}
html[data-width="narrow"] .site-footer .legal,
html[data-width="auto"] .site-footer .legal{justify-content:center; text-align:center;}
.socials a{
  display:inline-flex; align-items:center; gap:8px;
  min-height:var(--tap-target-min); padding:0 14px;
  border:1px solid var(--c-border); border-radius:var(--radius-pill);
  background:var(--c-surface); font-size:13.5px; font-weight:var(--fw-bold); color:var(--c-text-secondary);
}
.socials a:hover{color:var(--c-link); border-color:var(--c-action); text-decoration:none;}
.socials svg{flex-shrink:0;}

/* — post-signup social CTA — */
.saved-social{margin-top:24px;}
.saved-social .fine{margin-top:10px;}

/* — doc pages (privacy / terms) — */
.doc{max-width:720px; margin:0 auto; padding:56px var(--layout-margin) 88px;}
.doc h1{font-family:var(--font-display); font-weight:var(--fw-semibold); font-size:var(--fs-h1); line-height:var(--lh-h1); margin-top:8px;}
.doc h2{font-family:var(--font-display); font-weight:var(--fw-semibold); font-size:var(--fs-h3); line-height:var(--lh-h3); margin:36px 0 10px;}
.doc p, .doc li{color:var(--c-text-secondary); font-size:15px; line-height:1.65; margin-bottom:10px;}
.doc ul{padding-left:22px;}
.doc .updated{font-size:var(--fs-caption); color:var(--c-text-muted);}
.doc .draft{display:inline-flex; align-items:center; gap:8px; background:var(--c-reward-tint); color:var(--c-reward-text); font-size:12.5px; font-weight:var(--fw-extrabold); padding:6px 12px; border-radius:var(--radius-pill); margin-bottom:18px;}