/* homesteadsbox.com: tokens and components from the Claude Design website handoff
   (site/design/README.md). Solid ink shadows, inset outlines, fluid type, no fixed widths. */

@font-face { font-family: "Fredoka"; src: url("/assets/fonts/fredoka-variable.99d6c78e04.woff2") format("woff2-variations"), url("/assets/fonts/fredoka-variable.99d6c78e04.woff2") format("woff2"); font-weight: 300 700; font-display: swap; }
@font-face { font-family: "Figtree"; src: url("/assets/fonts/figtree-variable.4ba7d3d096.woff2") format("woff2-variations"), url("/assets/fonts/figtree-variable.4ba7d3d096.woff2") format("woff2"); font-weight: 300 900; font-display: swap; }

:root {
  --ink: #2B3138; --muted: #5F666D; --body-sky: #454C53; --faint: #8A9096;
  --paper: #FFFDF6; --paper-2: #F6F1E4; --sky: #E3F2F7; --night: #2E3A5C;
  --line-soft: #D9D4C7; --rule: #E4DFD2; --disabled: #B9B4A8;
  --green: #3D7C4A; --green-soft: #DCEFD9; --green-dark: #2B5A36; --green-foot: #E7F3E4;
  --sun: #FFCB57; --sun-soft: #FFF1C7; --sun-disc: #FFD35C; --moon: #F6E7B4; --night-body: #E6E1D3;
  --tomato: #E8634A; --tomato-soft: #FBE1DA; --blue: #5AA9E6; --blue-soft: #DDEEFB;
  --grape: #9B7BD8; --grape-soft: #ECE4F8; --blush: #F59A8B; --blush-soft: #FDE6E1;
  --hill: #A9D892; --hill-dark: #6DB463; --nhill: #3E6A57; --nhill-dark: #2F5646;
  --fd: "Fredoka", ui-rounded, system-ui, sans-serif;
  --ff: "Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;
  --ring3: inset 0 0 0 3px var(--ink);
  --focus: 0 0 0 4px var(--green-soft), 0 0 0 7px var(--green);
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--ff); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
img { max-width: 100%; }
a { color: var(--green); }
a:hover { color: var(--ink); }
:focus-visible { outline: none; box-shadow: var(--focus); border-radius: 8px; }
h1, h2, h3, p { margin: 0; }
.vh { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: absolute; left: 12px; top: -80px; z-index: 50; background: var(--ink); color: var(--paper); padding: 12px 18px; border-radius: 12px; font: 700 16px var(--ff); text-decoration: none; }
.skip:focus { top: 12px; color: var(--paper); }
.ic { width: 1em; height: 1em; display: inline-block; vertical-align: -0.125em; flex: none; }

/* ---------- layout ---------- */
.page { width: 100%; overflow-x: clip; }
.s { position: relative; padding: 104px 20px; }
.s-scene { position: relative; overflow: hidden; }
.wrap { position: relative; max-width: 1200px; margin: 0 auto; }
.stack { display: flex; flex-direction: column; }
.row2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 400px), 1fr)); gap: 48px 64px; align-items: center; }
.row2-420 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: 48px 64px; align-items: center; }
.cards { display: grid; gap: 24px; grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--min, 300px)), 1fr)); }
.text-col { display: flex; flex-direction: column; gap: 20px; max-width: 520px; }
.head { display: flex; flex-direction: column; gap: 14px; max-width: 760px; }
.bg-paper { background: var(--paper); }
.bg-paper2 { background: var(--paper-2); }
.bg-sky { background: var(--sky); }
.bg-night { background: var(--night); color: var(--paper); }

/* scenery: sun, clouds, moon, stars and hills are decorative shapes */
.deco { position: absolute; pointer-events: none; }
.sun { position: absolute; border-radius: 50%; background: var(--sun-disc); }
.cloud { position: absolute; background: #fff; border-radius: 999px; }
.star-dot { position: absolute; border-radius: 50%; background: var(--moon); }
.hill { position: absolute; border-radius: 50%; }
.hill-a { background: var(--hill); } .hill-b { background: var(--hill-dark); }
.bg-night .hill-a { background: var(--nhill); } .bg-night .hill-b { background: var(--nhill-dark); }
.perch { position: absolute; z-index: 2; }

/* ---------- type ---------- */
.eyebrow { font: 700 15px var(--ff); letter-spacing: .08em; text-transform: uppercase; color: var(--green); }
.bg-sky .eyebrow { color: var(--green-dark); }
.bg-night .eyebrow { color: var(--moon); }
.h1 { font: 700 clamp(44px, 6.4vw, 80px)/1.02 var(--fd); letter-spacing: -.01em; text-wrap: balance; max-width: 880px; }
.h1-hero { font: 700 clamp(46px, 7vw, 88px)/1 var(--fd); letter-spacing: -.01em; text-wrap: balance; }
.h2 { font: 700 clamp(34px, 4.2vw, 52px)/1.05 var(--fd); text-wrap: balance; }
.h2-big { font: 700 clamp(36px, 4.6vw, 58px)/1.04 var(--fd); text-wrap: balance; }
.h2-mid { font: 700 clamp(32px, 3.8vw, 46px)/1.06 var(--fd); text-wrap: balance; }
.h3 { font: 700 clamp(30px, 3.4vw, 42px)/1.08 var(--fd); }
.lead { font: 500 clamp(18px, 2vw, 21px)/1.55 var(--ff); color: var(--muted); text-wrap: pretty; max-width: 680px; }
.bg-sky .lead, .bg-sky .body { color: var(--body-sky); }
.body { font: 500 19px/1.6 var(--ff); color: var(--muted); text-wrap: pretty; }
.bg-night .body { color: var(--night-body); }
.card-title { font: 600 22px/1.2 var(--fd); }
.card-body { font: 500 16px/1.55 var(--ff); color: var(--muted); }
.fine { font: 500 15px/1.5 var(--ff); color: var(--muted); }
.bg-sky .fine { color: var(--body-sky); }
.tlink { font: 700 17px var(--ff); text-decoration: none; color: var(--green); }
.tlink:hover { color: var(--ink); }

/* ---------- stickers ---------- */
.card { position: relative; background: var(--paper); border-radius: 26px; padding: 24px; box-shadow: inset 0 0 0 3px var(--ink), 0 5px 0 var(--ink); display: flex; flex-direction: column; gap: 12px; }
.card-lg { border-radius: 32px; padding: 32px; box-shadow: inset 0 0 0 4px var(--ink), 0 6px 0 var(--ink); gap: 14px; }
.card-row { flex-direction: row; gap: 18px; align-items: flex-start; }
.badge { width: var(--b, 56px); height: var(--b, 56px); flex: none; border-radius: 50%; box-shadow: var(--ring3); display: flex; align-items: center; justify-content: center; font-size: calc(var(--b, 56px) / 2); color: var(--ink); }
.chip { align-self: flex-start; height: 40px; padding: 0 16px; border-radius: 999px; background: var(--paper); display: inline-flex; align-items: center; gap: 8px; font: 700 16px var(--ff); color: var(--ink); box-shadow: inset 0 0 0 2.5px var(--ink); white-space: nowrap; text-decoration: none; }
.chip-sm { height: 36px; padding: 0 14px; font-size: 15px; }
.dot { width: 10px; height: 10px; border-radius: 50%; background: var(--green); }
.bullets { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.bullets li { display: flex; gap: 12px; align-items: flex-start; font: 600 17px/1.55 var(--ff); }
.mark { width: 28px; height: 28px; flex: none; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 15px; box-shadow: inset 0 0 0 2.5px var(--ink); background: var(--green); color: #fff; }
.mark-sun { background: var(--sun); color: var(--ink); }
.mark-moon { background: var(--moon); color: var(--ink); box-shadow: none; }

/* ---------- buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: 58px; padding: 0 26px; border: none; border-radius: 18px; cursor: pointer; text-decoration: none; white-space: nowrap; font: 600 21px var(--fd); background: var(--green); color: #fff; box-shadow: inset 0 0 0 3px var(--ink), 0 5px 0 var(--ink); transition: transform .06s, box-shadow .06s; }
.btn:hover { color: #fff; }
.btn:active { transform: translateY(4px); box-shadow: inset 0 0 0 3px var(--ink), 0 1px 0 var(--ink); }
.btn:focus-visible { box-shadow: inset 0 0 0 3px var(--ink), 0 5px 0 var(--ink), 0 0 0 4px var(--green-soft), 0 0 0 7px var(--green); border-radius: 18px; }
.btn-2 { background: var(--paper); color: var(--ink); height: 56px; padding: 0 24px; border-radius: 16px; font-size: 20px; }
.btn-2:hover { color: var(--ink); }
.btn[disabled] { opacity: .7; cursor: progress; }
.self-start { align-self: flex-start; }

/* ---------- nav ---------- */
.nav-shell { position: relative; z-index: 5; width: 100%; display: flex; justify-content: center; padding: 20px 20px 0; }
.nav { width: 100%; max-width: 1200px; display: flex; flex-direction: column; gap: 8px; background: var(--paper); border-radius: 24px; padding: 10px 10px 10px 14px; box-shadow: inset 0 0 0 3px var(--ink), 0 5px 0 var(--ink); }
.nav-bar { display: flex; align-items: center; gap: 12px; }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); }
.brand:hover { color: var(--ink); }
.wordmark { font: 700 28px/1 var(--fd); }
.nav-links { display: flex; gap: 4px; margin: 0 0 0 auto; padding: 0; list-style: none; }
.nav-link { height: 46px; padding: 0 14px; border-radius: 14px; display: flex; align-items: center; gap: 8px; font: 600 18px var(--fd); color: var(--ink); text-decoration: none; white-space: nowrap; }
.nav-link:hover { color: var(--ink); background: var(--paper-2); }
.nav-link[aria-current="page"] { background: var(--sun); box-shadow: var(--ring3); }
.soon { height: 22px; padding: 0 8px; border-radius: 999px; background: var(--sun-soft); display: inline-flex; align-items: center; font: 700 12px var(--ff); box-shadow: inset 0 0 0 2px var(--ink); }
.nav-cta { height: 48px; padding: 0 18px; border-radius: 14px; font-size: 19px; box-shadow: inset 0 0 0 3px var(--ink), 0 4px 0 var(--ink); }
.nav-cta:active { transform: translateY(3px); }
.nav-cta .short { display: none; }
.nav-toggle { display: none; width: 48px; height: 48px; flex: none; border: none; cursor: pointer; border-radius: 14px; background: var(--paper); color: var(--ink); font-size: 24px; align-items: center; justify-content: center; box-shadow: var(--ring3); }
.nav-toggle .i-close { display: none; }
.nav-menu { display: none; }
@media (max-width: 999px) {
  .nav-links { display: none; }
  .nav-cta { margin-left: auto; }
  .nav-toggle { display: flex; }
  .nav.open .nav-menu { display: flex; flex-direction: column; gap: 4px; padding: 4px 0 6px; margin: 0; list-style: none; }
  .nav-menu .nav-link { height: 52px; padding: 0 16px; font-size: 20px; }
  .nav.open .nav-toggle .i-open { display: none; }
  .nav.open .nav-toggle .i-close { display: block; }
}
@media (max-width: 499px) {
  .nav-cta .long { display: none; }
  .nav-cta .short { display: inline; }
  .wordmark { font-size: 24px; }
}

/* ---------- hero ---------- */
.hero { padding: 0 0 120px; }
.hero-copy { position: relative; max-width: 980px; margin: 0 auto; padding: 72px 20px 0; display: flex; flex-direction: column; align-items: center; gap: 24px; text-align: center; }
.hero-copy .lead { max-width: 720px; color: var(--body-sky); }
.hero-stage { position: relative; max-width: 1120px; margin: 64px auto 0; padding: 0 20px; }
.hero-board { width: 80%; }
.hero-phone { position: absolute; right: 20px; bottom: -64px; width: 22%; }
@media (max-width: 640px) {
  .hero-stage { margin-top: 48px; }
  .hero-board { width: 92%; }
  .hero-phone { width: 32%; right: 12px; bottom: -48px; }
}
.page-hero { padding: 0 0 150px; }
.page-hero-copy { position: relative; max-width: 1200px; margin: 0 auto; padding: 80px 20px 0; display: flex; flex-direction: column; gap: 22px; }
.page-hero-copy .lead { color: var(--body-sky); }
.hero-homey { position: absolute; right: max(20px, calc(50% - 560px)); bottom: 70px; }
@media (max-width: 760px) { .hero-homey { display: none; } }

/* mocks */
.mock { display: block; width: 100%; height: auto; }
.mock-phone { max-width: 330px; }

/* ---------- waitlist forms ---------- */
.wl { display: flex; flex-direction: column; align-items: center; gap: 12px; width: 100%; }
.wl-row { display: flex; gap: 12px; flex-wrap: wrap; width: 100%; max-width: 560px; justify-content: center; }
.wl-input { flex: 1 1 240px; min-width: 0; height: 60px; border: none; outline: none; border-radius: 16px; background: #fff; padding: 0 20px; font: 600 19px var(--ff); color: var(--ink); box-shadow: var(--ring3); }
.wl-hero .wl-input { height: 62px; border-radius: 18px; padding: 0 22px; box-shadow: inset 0 0 0 3px var(--ink), 0 4px 0 var(--ink); }
.wl-hero .btn { height: 62px; padding: 0 28px; font-size: 22px; }
.wl-input:focus-visible { box-shadow: inset 0 0 0 3px var(--ink), 0 0 0 4px var(--green-soft), 0 0 0 7px var(--green); }
.wl.bad .wl-input { box-shadow: inset 0 0 0 3px var(--tomato); }
.wl-hero.bad .wl-input { box-shadow: inset 0 0 0 3px var(--tomato), 0 4px 0 var(--tomato); }
.wl-hint { font: 600 15px/1.5 var(--ff); color: var(--muted); max-width: 560px; }
.wl-hint a { color: inherit; }
.bg-sky .wl-hint { color: var(--body-sky); }
.wl.bad .wl-hint { color: #B8412B; }
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.wl-done { display: none; }
.toast { display: flex; align-items: center; gap: 14px; background: var(--ink); color: var(--paper); border-radius: 22px; padding: 10px 24px 10px 10px; box-shadow: 0 6px 0 #11151A; text-align: left; }
.toast-title { font: 600 24px var(--fd); }
.toast-sub { font: 600 15px var(--ff); color: #CBD0D4; overflow-wrap: anywhere; }

.waitlist { padding: 120px 20px 200px; display: flex; justify-content: center; }
.wl-card { position: relative; width: 100%; max-width: 720px; background: var(--paper); border-radius: 32px; padding: 44px clamp(22px, 5vw, 48px) 40px; box-shadow: inset 0 0 0 4px var(--ink), 0 8px 0 var(--ink); display: flex; flex-direction: column; align-items: center; gap: 18px; text-align: center; }
.wl-card .perch { right: 36px; top: -104px; }
.wl-title { font: 700 clamp(32px, 4.4vw, 50px)/1.05 var(--fd); text-wrap: balance; }
.wl-sub { font: 500 19px/1.55 var(--ff); color: var(--muted); max-width: 520px; text-wrap: pretty; }
.wl-card .done-view { display: none; flex-direction: column; align-items: center; gap: 18px; }
.wl-card.is-done .open-view { display: none; }
.wl-card.is-done .done-view { display: flex; }
.wl-card .pose-cheer { display: none; }
.wl-card.is-done .pose-wave { display: none; }
.wl-card.is-done .pose-cheer { display: block; }
.linkbtn { height: 48px; padding: 0 18px; border: none; cursor: pointer; border-radius: 14px; background: transparent; color: var(--green); font: 700 17px var(--ff); }
.linkbtn:hover { color: var(--ink); }

/* ---------- footer ---------- */
.foot { background: var(--green); color: var(--paper); padding: 44px 20px 40px; display: flex; justify-content: center; box-shadow: inset 0 4px 0 var(--ink); }
.foot-in { width: 100%; max-width: 1200px; display: flex; flex-wrap: wrap; gap: 24px 40px; align-items: center; }
.foot a { color: var(--paper); text-decoration: none; }
.foot a:hover { color: var(--paper); text-decoration: underline; }
.foot-brand { display: flex; align-items: center; gap: 10px; }
.foot-brand .wordmark { font-size: 26px; }
.foot-links { display: flex; flex-wrap: wrap; gap: 8px 28px; font: 600 17px var(--ff); margin: 0 0 0 auto; padding: 0; list-style: none; }
.foot-legal { width: 100%; display: flex; flex-direction: column; gap: 10px; font: 500 15px/1.5 var(--ff); color: var(--green-foot); }
.foot-legal .foot-links { margin: 0; font: 600 15px var(--ff); gap: 6px 20px; }
.foot-legal .foot-links a { color: var(--green-foot); }
.foot-tm { font-size: 13px; opacity: .92; }

/* ---------- comparison table ---------- */
.cmp-scroll { overflow-x: auto; padding: 4px; border-radius: 32px; background: var(--paper); box-shadow: inset 0 0 0 4px var(--ink), 0 6px 0 var(--ink); }
.cmp { min-width: 720px; width: 100%; border-collapse: separate; border-spacing: 0; }
.cmp th, .cmp td { padding: 20px 16px; text-align: center; vertical-align: middle; }
.cmp thead th { padding: 28px 16px 20px; font-weight: normal; }
.cmp tbody th { text-align: left; padding: 20px 28px; font: 600 18px/1.4 var(--ff); box-shadow: inset 0 2px 0 var(--rule); width: 38%; }
.cmp tbody td { box-shadow: inset 0 2px 0 var(--rule); }
.cmp .hs { background: var(--green-soft); box-shadow: inset 3px 0 0 var(--green), inset -3px 0 0 var(--green), inset 0 2px 0 #BFDDB9; }
.cmp thead .hs { box-shadow: inset 3px 0 0 var(--green), inset -3px 0 0 var(--green), inset 0 3px 0 var(--green); }
.cmp tfoot td { padding: 0; height: 24px; }
.cmp tfoot .hs { box-shadow: inset 3px 0 0 var(--green), inset -3px 0 0 var(--green), inset 0 -3px 0 var(--green); }
.cmp-col { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.cmp-name { font: 700 22px var(--fd); }
.cmp-cat { font: 600 20px var(--fd); }
.cmp-sub { font: 600 14px var(--ff); color: var(--muted); }
.yes, .no { width: 36px; height: 36px; margin: 0 auto; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 19px; }
.yes { background: var(--green); color: #fff; box-shadow: var(--ring3); }
.no { background: var(--paper); color: var(--faint); box-shadow: inset 0 0 0 3px var(--line-soft); }
.hs .yes { background: var(--green); }

/* ---------- how it works diagram ---------- */
.diagram { display: flex; flex-direction: column; align-items: center; max-width: 560px; width: 100%; justify-self: center; }
.pipe { width: 4px; height: 28px; background: var(--ink); }
.node { width: 100%; background: var(--paper); border-radius: 26px; padding: 18px 22px; box-shadow: inset 0 0 0 3px var(--ink), 0 5px 0 var(--ink); display: flex; align-items: center; gap: 16px; }
.node-ic { width: 52px; height: 52px; flex: none; border-radius: 14px; background: var(--paper-2); box-shadow: var(--ring3); display: flex; align-items: center; justify-content: center; font-size: 26px; }
.node-t { font: 600 21px var(--fd); }
.node-s { font: 500 15px/1.4 var(--ff); color: var(--muted); }
.node-green { background: var(--green); color: #fff; }
.node-green .node-s { color: var(--green-foot); }
.node-green .node-ic { background: var(--paper); color: var(--ink); }
.dchip { height: 40px; padding: 0 14px; border-radius: 999px; display: inline-flex; align-items: center; gap: 8px; font: 700 14px var(--ff); box-shadow: inset 0 0 0 2px var(--ink); }

/* ---------- device capability list ---------- */
.devlist { padding: 4px; background: var(--paper); border-radius: 32px; box-shadow: inset 0 0 0 4px var(--ink), 0 6px 0 var(--ink); overflow: hidden; display: flex; flex-direction: column; }
.dev { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 14px 32px; padding: 24px 28px; box-shadow: inset 0 -2px 0 var(--rule); }
.dev:last-child { box-shadow: none; }
.dev-name { font: 600 21px/1.2 var(--fd); }
.level { align-self: flex-start; height: 26px; padding: 0 10px; border-radius: 999px; display: inline-flex; align-items: center; font: 700 12px var(--ff); box-shadow: inset 0 0 0 2px var(--ink); }
.dev-can { display: flex; gap: 10px; align-items: flex-start; font: 600 16px/1.5 var(--ff); }
.dev-note { display: flex; gap: 10px; align-items: flex-start; font: 500 16px/1.5 var(--ff); color: var(--muted); }
.dev-can .ic, .dev-note .ic { font-size: 22px; margin-top: 1px; }
.dev-can .ic { color: var(--green); }

/* ---------- misc ---------- */
.step-n { width: 52px; height: 52px; border-radius: 50%; background: var(--sun); box-shadow: var(--ring3); display: flex; align-items: center; justify-content: center; font: 700 26px var(--fd); }
.flow { height: 56px; padding: 0 18px; border-radius: 18px; background: var(--paper); display: flex; align-items: center; gap: 12px; font: 600 17px var(--ff); box-shadow: var(--ring3); }
.flow .ic { font-size: 22px; }
.flow-muted { box-shadow: inset 0 0 0 2px var(--disabled); }
.arrow { display: flex; justify-content: center; font-size: 24px; color: var(--green); }
.arrow-muted { color: var(--faint); }
.toggle { width: 60px; height: 34px; flex: none; border-radius: 17px; background: var(--line-soft); box-shadow: inset 0 0 0 2.5px var(--ink); position: relative; }
.toggle::after { content: ""; position: absolute; left: 5px; top: 5px; width: 24px; height: 24px; border-radius: 50%; background: var(--paper); box-shadow: inset 0 0 0 2.5px var(--ink); }
.vignette { background: var(--paper); border-radius: 18px; padding: 14px; box-shadow: inset 0 0 0 2.5px var(--ink); display: flex; flex-direction: column; gap: 10px; }
.note { background: var(--paper); border-radius: 26px; padding: 22px 24px; box-shadow: inset 0 0 0 3px var(--ink), 0 5px 0 var(--ink); display: flex; gap: 16px; align-items: flex-start; }
.anchor-chips { display: flex; flex-wrap: wrap; gap: 10px; padding-top: 8px; }
.anchor-chips .chip { height: 44px; }
.anchor-chips .chip:hover { background: var(--sun-soft); color: var(--ink); }
[id] { scroll-margin-top: 24px; }

/* ---------- legal / plain pages ---------- */
.prose { max-width: 760px; font: 500 18px/1.65 var(--ff); color: var(--ink); }
.prose h2 { font: 700 30px/1.15 var(--fd); margin: 44px 0 12px; }
.prose h3 { font: 600 22px/1.25 var(--fd); margin: 28px 0 8px; }
.prose p, .prose ul { margin: 0 0 16px; }
.prose ul { padding-left: 24px; }
.prose li { margin: 6px 0; }
.prose .meta { font: 600 15px var(--ff); color: var(--muted); }

/* ---------- tints (last, so they win over component backgrounds) ---------- */
.t-blue { background: var(--blue-soft); } .t-green { background: var(--green-soft); } .t-sun { background: var(--sun-soft); }
.t-grape { background: var(--grape-soft); } .t-tomato { background: var(--tomato-soft); } .t-blush { background: var(--blush-soft); }
.t-paper { background: var(--paper); } .t-paper2 { background: var(--paper-2); } .t-sunny { background: var(--sun); }

/* ---------- Homey ---------- */
.homey { position: relative; flex: none; }
@keyframes hs-bob { 0%, 100% { transform: translateY(0) } 50% { transform: translateY(-6px) } }
@keyframes hs-breathe { 0%, 100% { transform: scale(1, 1) } 50% { transform: scale(1.02, .97) translateY(3px) } }
@keyframes hs-waddle { 0%, 100% { transform: translateY(0) rotate(-3deg) } 50% { transform: translateY(-5px) rotate(3deg) } }
@keyframes hs-jump { 0%, 100% { transform: translateY(0) scale(1, 1) } 15% { transform: translateY(2px) scale(1.05, .94) } 50% { transform: translateY(-24px) scale(.98, 1.03) } }
@keyframes hs-hop { 0%, 100% { transform: translateY(0) } 50% { transform: translateY(-12px) } }
@keyframes hs-sway { 0%, 100% { transform: rotate(-3deg) } 50% { transform: rotate(3deg) } }
@keyframes hs-blink { 0%, 92%, 100% { transform: scaleY(1) } 95% { transform: scaleY(.1) } }
@keyframes hs-look { 0%, 100% { transform: translateX(-5px) } 50% { transform: translateX(5px) } }
@keyframes hs-smoke { 0% { transform: translate(0, 0) scale(.5); opacity: 0 } 20% { opacity: 1 } 100% { transform: translate(12px, -36px) scale(1.25); opacity: 0 } }
@keyframes hs-zzz { 0% { transform: translate(0, 0) scale(.6); opacity: 0 } 25% { opacity: 1 } 100% { transform: translate(22px, -44px) scale(1.1); opacity: 0 } }
@keyframes hs-waveR { 0% { transform: rotate(-158deg) } 100% { transform: rotate(-105deg) } }
@keyframes hs-hammer { 0%, 100% { transform: rotate(-165deg) } 55% { transform: rotate(-62deg) } }
@keyframes hs-point { 0%, 100% { transform: rotate(-92deg) } 50% { transform: rotate(-80deg) } }
@keyframes hs-cheerL { 0% { transform: rotate(132deg) } 100% { transform: rotate(168deg) } }
@keyframes hs-cheerR { 0% { transform: rotate(-132deg) } 100% { transform: rotate(-168deg) } }
@keyframes hs-confetti { 0% { transform: translate(0, 0) rotate(0) scale(.4); opacity: 0 } 15% { opacity: 1 } 100% { transform: translate(var(--dx), var(--dy)) rotate(var(--r)) scale(1); opacity: 0 } }
@keyframes hs-drip { 0%, 100% { transform: translateY(0); opacity: 1 } 70% { transform: translateY(12px); opacity: 0 } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .homey *, .btn { animation: none !important; transition: none !important; }
}