/* ============================================================
   Bear Ping — the box, unfolded.
   Single stylesheet. No gradients, no pure white/black,
   hard offset shadows only. See artifacts/website-design-doc.md
   ============================================================ */

/* ---------- @font-face (self-hosted woff2 subsets) ---------- */
@font-face {
  font-family: 'Patua One';
  font-style: normal; font-weight: 400; font-display: swap;
  src: url('fonts/patua-one-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Chewy';
  font-style: normal; font-weight: 400; font-display: swap;
  src: url('fonts/chewy-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Podkova';
  font-style: normal; font-weight: 800; font-display: swap;
  src: url('fonts/podkova-800-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Podkova';
  font-style: normal; font-weight: 800; font-display: swap;
  src: url('fonts/podkova-800-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Caveat';
  font-style: normal; font-weight: 700; font-display: swap;
  src: url('fonts/caveat-700-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Caveat';
  font-style: normal; font-weight: 700; font-display: swap;
  src: url('fonts/caveat-700-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Alegreya Sans';
  font-style: normal; font-weight: 400; font-display: swap;
  src: url('fonts/alegreya-sans-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Alegreya Sans';
  font-style: normal; font-weight: 400; font-display: swap;
  src: url('fonts/alegreya-sans-400-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Alegreya Sans';
  font-style: normal; font-weight: 500; font-display: swap;
  src: url('fonts/alegreya-sans-500-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Alegreya Sans';
  font-style: normal; font-weight: 500; font-display: swap;
  src: url('fonts/alegreya-sans-500-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Alegreya Sans';
  font-style: normal; font-weight: 700; font-display: swap;
  src: url('fonts/alegreya-sans-700-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Alegreya Sans';
  font-style: normal; font-weight: 700; font-display: swap;
  src: url('fonts/alegreya-sans-700-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Alegreya';
  font-style: normal; font-weight: 500; font-display: swap;
  src: url('fonts/alegreya-500-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Alegreya';
  font-style: normal; font-weight: 500; font-display: swap;
  src: url('fonts/alegreya-500-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Alegreya';
  font-style: italic; font-weight: 500; font-display: swap;
  src: url('fonts/alegreya-500i-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Alegreya';
  font-style: italic; font-weight: 500; font-display: swap;
  src: url('fonts/alegreya-500i-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

/* ---------- Tokens ---------- */
:root {
  --teal:        #8DCECE;
  --teal-doodle: #A9DBDA;
  --teal-pale:   #C8E6E5;
  --red:         #942C3C;
  --red-deep:    #7A2331;
  --orange:      #D76737;
  --cream:       #EDF1F2;
  --paper:       #FBF6EC;
  --ink:         #542A30;

  --font-display-latin: 'Patua One', 'Podkova', serif;
  --font-display:       'Patua One', 'Podkova', serif; /* Latin brand words fall through to Patua */
  /* Chewy has no Cyrillic — Russian glyphs fall through to Caveat, not the system cursive */
  --font-sticker:       'Chewy', 'Caveat', cursive;
  --font-hand:          'Caveat', cursive;
  --font-body:          'Alegreya Sans', sans-serif;
  --font-quote:         'Alegreya', serif;

  --text-hero:  clamp(3.2rem, 9vw, 7rem);
  --text-h2:    clamp(2rem, 4.5vw, 3.25rem);
  --text-h3:    clamp(1.25rem, 2.2vw, 1.5rem);
  --text-body:  clamp(1.0625rem, 1.4vw, 1.1875rem);
  --text-small: 0.875rem;

  --space-section: clamp(5rem, 12vw, 9rem);
  --space-card:    clamp(1.5rem, 3vw, 2.5rem);
  --radius-panel:  28px;
  --radius-card:   18px;
  --radius-pill:   999px;

  --shadow-card:  0 6px 0 rgba(122, 35, 49, 0.18);
  --shadow-press: 0 2px 0 rgba(122, 35, 49, 0.25);

  --pattern: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20440%20440%22%20width%3D%22440%22%20height%3D%22440%22%3E%3Crect%20width%3D%22440%22%20height%3D%22440%22%20fill%3D%22%238DCECE%22%2F%3E%3Cdefs%3E%3Cg%20id%3D%22paw%22%20fill%3D%22none%22%20stroke-width%3D%2211%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M0%2014%20C-16%2015%20-24%204%20-21%20-6%20C-18%20-15%20-8%20-17%200%20-12%20C8%20-17%2018%20-15%2021%20-6%20C24%204%2016%2015%200%2014%20Z%22%2F%3E%3Cpath%20d%3D%22M-28%20-27%20C-33%20-35%20-28%20-43%20-21%20-42%20C-14%20-41%20-12%20-32%20-17%20-26%20C-21%20-21%20-26%20-22%20-28%20-27%20Z%22%2F%3E%3Cpath%20d%3D%22M-7%20-37%20C-10%20-46%20-4%20-53%203%20-51%20C10%20-49%2011%20-40%205%20-34%20C1%20-30%20-5%20-31%20-7%20-37%20Z%22%2F%3E%3Cpath%20d%3D%22M16%20-29%20C15%20-38%2022%20-44%2029%20-41%20C35%20-38%2035%20-29%2028%20-24%20C23%20-21%2017%20-23%2016%20-29%20Z%22%2F%3E%3C%2Fg%3E%3Cg%20id%3D%22bone%22%20fill%3D%22none%22%20stroke-width%3D%2211%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M-14%20-6%20C-16%20-15%20-28%20-19%20-35%20-13%20C-40%20-8%20-40%20-3%20-36%200%20C-40%203%20-40%208%20-35%2013%20C-28%2019%20-16%2015%20-14%206%20L14%206%20C16%2015%2028%2019%2035%2013%20C40%208%2040%203%2036%200%20C40%20-3%2040%20-8%2035%20-13%20C28%20-19%2016%20-15%2014%20-6%20Z%22%20transform%3D%22rotate%28-2%29%22%2F%3E%3C%2Fg%3E%3Cg%20id%3D%22fish%22%20fill%3D%22none%22%20stroke-width%3D%2210%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%22-46%22%20cy%3D%220%22%20r%3D%2213%22%2F%3E%3Cpath%20d%3D%22M-31%200%20L38%201%22%2F%3E%3Cpath%20d%3D%22M-18%20-16%20L-14%2012%22%2F%3E%3Cpath%20d%3D%22M-2%20-18%20L2%2014%22%2F%3E%3Cpath%20d%3D%22M14%20-16%20L18%2012%22%2F%3E%3Cpath%20d%3D%22M52%20-16%20C42%20-8%2042%208%2052%2016%20C44%2012%2036%2012%2030%2016%20C34%206%2034%20-6%2030%20-16%20C36%20-12%2044%20-12%2052%20-16%20Z%22%2F%3E%3C%2Fg%3E%3Cg%20id%3D%22ball%22%20fill%3D%22none%22%20stroke-width%3D%2211%22%20stroke-linecap%3D%22round%22%3E%3Ccircle%20cx%3D%220%22%20cy%3D%220%22%20r%3D%2227%22%2F%3E%3Cpath%20d%3D%22M-14%20-23%20C-4%20-12%20-4%2012%20-14%2023%22%2F%3E%3Cpath%20d%3D%22M14%20-23%20C4%20-12%204%2012%2014%2023%22%2F%3E%3C%2Fg%3E%3Cpath%20id%3D%22heart%22%20fill%3D%22none%22%20stroke-width%3D%2211%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%0A%20%20%20%20%20%20d%3D%22M0%2018%20C-8%208%20-26%202%20-24%20-12%20C-22%20-23%20-10%20-25%20-1%20-16%20C7%20-26%2020%20-23%2022%20-12%20C25%201%208%209%200%2018%20Z%22%2F%3E%3Cpath%20id%3D%22heartfill%22%20stroke%3D%22none%22%0A%20%20%20%20%20%20d%3D%22M0%2014%20C-7%206%20-20%201%20-18%20-9%20C-16%20-18%20-7%20-19%20-1%20-12%20C5%20-20%2015%20-18%2017%20-9%20C19%201%206%207%200%2014%20Z%22%2F%3E%3Cpath%20id%3D%22star%22%20fill%3D%22none%22%20stroke-width%3D%2210%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%0A%20%20%20%20%20%20d%3D%22M0%20-26%20L8%20-8%20L27%20-7%20L12%206%20L17%2025%20L0%2014%20L-17%2025%20L-12%206%20L-27%20-7%20L-8%20-8%20Z%22%2F%3E%3Cpath%20id%3D%22chev%22%20fill%3D%22none%22%20stroke-width%3D%2211%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%0A%20%20%20%20%20%20d%3D%22M-21%20-11%20C-8%204%208%204%2021%20-13%22%2F%3E%3Cpath%20id%3D%22squig%22%20fill%3D%22none%22%20stroke-width%3D%2210%22%20stroke-linecap%3D%22round%22%0A%20%20%20%20%20%20d%3D%22M-36%206%20C-28%20-8%20-20%20-8%20-12%204%20C-4%2016%204%2016%2012%204%20C20%20-8%2028%20-8%2036%206%22%2F%3E%3Ccircle%20id%3D%22dot%22%20r%3D%226%22%20stroke%3D%22none%22%2F%3E%3C%2Fdefs%3E%3Cg%20stroke%3D%22%23A9DBDA%22%20fill%3D%22%23A9DBDA%22%3E%3Cuse%20href%3D%22%23paw%22%20%20%20transform%3D%22translate%2864%2078%29%20rotate%28-18%29%22%20fill%3D%22none%22%2F%3E%3Cuse%20href%3D%22%23bone%22%20%20transform%3D%22translate%28238%2052%29%20rotate%2824%29%22%20fill%3D%22none%22%2F%3E%3Cuse%20href%3D%22%23fish%22%20%20transform%3D%22translate%28362%20128%29%20rotate%28-12%29%20scale%280.92%29%22%20fill%3D%22none%22%2F%3E%3Cuse%20href%3D%22%23ball%22%20%20transform%3D%22translate%28118%20208%29%20rotate%288%29%22%20fill%3D%22none%22%2F%3E%3Cuse%20href%3D%22%23star%22%20%20transform%3D%22translate%28316%20250%29%20rotate%28-22%29%22%20fill%3D%22none%22%2F%3E%3Cuse%20href%3D%22%23chev%22%20%20transform%3D%22translate%2852%20320%29%20rotate%2830%29%22%20fill%3D%22none%22%2F%3E%3Cuse%20href%3D%22%23squig%22%20transform%3D%22translate%28196%20330%29%20rotate%28-6%29%22%20fill%3D%22none%22%2F%3E%3Cuse%20href%3D%22%23paw%22%20%20%20transform%3D%22translate%28312%20382%29%20rotate%2838%29%20scale%280.72%29%22%20fill%3D%22none%22%2F%3E%3Cuse%20href%3D%22%23heartfill%22%20transform%3D%22translate%28222%20168%29%20rotate%2814%29%22%2F%3E%3Cuse%20href%3D%22%23ball%22%20%20transform%3D%22translate%28430%20300%29%20rotate%28-30%29%20scale%280.8%29%22%20fill%3D%22none%22%2F%3E%3Cuse%20href%3D%22%23ball%22%20%20transform%3D%22translate%28-10%20300%29%20rotate%28-30%29%20scale%280.8%29%22%20fill%3D%22none%22%2F%3E%3Cuse%20href%3D%22%23bone%22%20%20transform%3D%22translate%2896%20432%29%20rotate%28-18%29%20scale%280.8%29%22%20fill%3D%22none%22%2F%3E%3Cuse%20href%3D%22%23bone%22%20%20transform%3D%22translate%2896%20-8%29%20rotate%28-18%29%20scale%280.8%29%22%20fill%3D%22none%22%2F%3E%3Cuse%20href%3D%22%23dot%22%20transform%3D%22translate%28160%20120%29%22%2F%3E%3Cuse%20href%3D%22%23dot%22%20transform%3D%22translate%28268%20292%29%22%2F%3E%3Cuse%20href%3D%22%23dot%22%20transform%3D%22translate%2836%20216%29%22%2F%3E%3C%2Fg%3E%3Cg%20stroke%3D%22%23C8E6E5%22%20fill%3D%22%23C8E6E5%22%3E%3Cuse%20href%3D%22%23heart%22%20transform%3D%22translate%28150%20396%29%20rotate%28-14%29%20scale%280.85%29%22%20fill%3D%22none%22%2F%3E%3Cuse%20href%3D%22%23chev%22%20%20transform%3D%22translate%28390%20208%29%20rotate%28-100%29%20scale%280.85%29%22%20fill%3D%22none%22%2F%3E%3Cuse%20href%3D%22%23star%22%20%20transform%3D%22translate%28196%20262%29%20rotate%2812%29%20scale%280.6%29%22%20fill%3D%22none%22%2F%3E%3Cuse%20href%3D%22%23heartfill%22%20transform%3D%22translate%28352%2044%29%20rotate%28-10%29%20scale%280.8%29%22%2F%3E%3Cuse%20href%3D%22%23dot%22%20transform%3D%22translate%28408%20396%29%22%2F%3E%3Cuse%20href%3D%22%23dot%22%20transform%3D%22translate%2884%20152%29%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
}

/* ---------- Reset / base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--text-body);
  line-height: 1.6;
  color: var(--ink);
  font-synthesis: none; /* Patua is 400-only; never faux-bold */
  background-color: var(--teal);
  background-image: var(--pattern);
  background-size: 440px 440px;
  -webkit-text-size-adjust: 100%;
}
@media (max-width: 640px) {
  body { background-size: 330px 330px; } /* ~25% smaller tile on mobile */
}
img, svg { max-width: 100%; }
h1, h2, h3 { line-height: 1.05; margin: 0; }
p { margin: 0; }
a { color: inherit; }
sub { font-size: 0.62em; }

/* ---------- Display heading stack ---------- */
h2, h3 {
  font-family: var(--font-display);
  font-weight: 800;
  color: var(--red);
}
h2 { font-size: var(--text-h2); letter-spacing: -0.01em; }
h3 { font-size: var(--text-h3); }
[lang="en"] { font-family: inherit; }

/* ---------- Accessibility helpers ---------- */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: 8px; top: -60px; z-index: 200;
  background: var(--red); color: var(--cream); padding: 10px 16px;
  border-radius: var(--radius-pill); text-decoration: none; font-weight: 700;
  transition: top .18s ease;
}
.skip-link:focus { top: 8px; }
:focus-visible {
  outline: 3px solid var(--red);
  outline-offset: 3px;
  border-radius: 4px;
}
.hero :focus-visible, .footer :focus-visible, .bento-card--red :focus-visible {
  outline-color: var(--cream);
}

.container { width: min(1200px, 100% - 2.5rem); margin-inline: auto; }

/* ---------- Sticky packing-slip nav ---------- */
.site-nav {
  position: fixed; inset-block-start: 0; inset-inline: 0; z-index: 100;
  transform: translateY(-120%);
  transition: transform .32s cubic-bezier(.34,1.56,.64,1);
  padding: 10px 0;
}
.site-nav.is-visible { transform: translateY(0); }
.nav-inner {
  width: min(1200px, 100% - 1.5rem); margin-inline: auto;
  display: flex; align-items: center; gap: 1.2rem;
  background: var(--cream);
  border: 2px dashed rgba(148,44,60,0.5);
  border-radius: var(--radius-pill);
  padding: 8px 8px 8px 18px;
  box-shadow: var(--shadow-card);
}
.nav-brand { display: flex; align-items: center; gap: .55rem; text-decoration: none; }
.nav-brand-name { font-family: var(--font-display-latin); font-size: 1.3rem; color: var(--red); }
.nav-links { display: flex; gap: 1.3rem; margin-inline-start: auto; }
.nav-links a {
  text-decoration: none; font-weight: 700; color: var(--ink);
  padding: 4px 2px; border-bottom: 3px solid transparent;
}
.nav-links a:hover { border-bottom-color: var(--orange); }
.nav-cta {
  background: var(--red); color: var(--cream); text-decoration: none;
  font-weight: 700; padding: 10px 20px; border-radius: var(--radius-pill);
  box-shadow: var(--shadow-press); white-space: nowrap;
}
.nav-cta:hover { background: var(--red-deep); }
@media (max-width: 720px) {
  .nav-links { display: none; }
  .nav-cta { margin-inline-start: auto; }
}

/* ---------- Sections ---------- */
.section { padding-block: var(--space-section); }
.section-head { max-width: 760px; margin-bottom: clamp(2rem, 4vw, 3.2rem); }
.section-head h2 { margin-top: .5rem; }
/* subtitles sit straight on the patterned teal — give them a paper chip for contrast */
.section-sub {
  display: inline-block;
  margin-top: 1rem; color: var(--ink); max-width: 52ch;
  background: var(--paper);
  padding: .55rem .95rem;
  border-radius: 12px;
  box-shadow: var(--shadow-press);
}

/* ---------- Stickers ---------- */
.sticker {
  display: inline-block;
  font-family: var(--font-sticker);
  background: var(--cream); color: var(--red);
  padding: 7px 16px; border-radius: 12px;
  box-shadow: var(--shadow-card);
  transform: rotate(-3deg);
  border: 2px solid rgba(122,35,49,0.12);
}
.sticker sub { font-size: .7em; }
.sticker--cream { background: var(--cream); color: var(--red); }
.sticker--red   { background: var(--red); color: var(--cream); border-color: rgba(237,241,242,0.2); }
.sticker--outline {
  background: transparent; color: var(--cream); box-shadow: none;
  border: 2px dashed rgba(237,241,242,0.65); transform: rotate(1.5deg);
  font-family: var(--font-sticker);
}
.sticker--eyebrow {
  font-family: var(--font-display); font-weight: 800;
  background: var(--red); color: var(--cream);
  transform: rotate(-2deg); border-radius: 10px; font-size: 1rem;
  padding: 5px 15px; border-color: transparent;
}

/* ---------- Dielines ---------- */
.dieline {
  position: relative; height: 0;
  border-top: 3px dashed rgba(148,44,60,0.4);
  width: min(1200px, 100% - 2.5rem); margin: 0 auto;
}
.dieline-tab {
  position: absolute; top: -14px; left: 12%;
  width: 66px; height: 26px; background: var(--teal-pale);
  border: 3px dashed rgba(148,44,60,0.4); border-bottom: none;
  border-radius: 10px 10px 0 0;
  clip-path: polygon(14% 100%, 0 0, 100% 0, 86% 100%);
}
.dieline--flip .dieline-tab { left: auto; right: 12%; top: -12px; transform: rotate(180deg); }
.dieline-note {
  position: absolute; top: 6px; right: 4%;
  font-family: var(--font-body); font-size: var(--text-small);
  color: rgba(84,42,48,0.85); background: var(--teal);
  padding: 0 10px;
}
.dieline--flip .dieline-note { right: auto; left: 4%; }

/* ============================================================
   1. HERO — THE LID
   ============================================================ */
.hero { padding: clamp(0.6rem, 2vw, 1.4rem); padding-top: clamp(1rem, 3vw, 2rem); }
.hero-panel {
  position: relative;
  background: var(--red);
  border-radius: var(--radius-panel);
  padding: clamp(3rem, 8vw, 6.5rem) clamp(1.5rem, 6vw, 5rem) clamp(3.5rem, 8vw, 6rem);
  box-shadow: 0 12px 0 rgba(122,35,49,0.35);
  overflow: hidden;
}
.hero-inner { position: relative; z-index: 2; max-width: 940px; margin-inline: auto; text-align: center; }
.flap {
  position: absolute; background: var(--red); z-index: 1;
}
.flap--top {
  top: -30px; left: 16%; width: 34%; height: 60px;
  border-radius: 30px 30px 0 0;
}
.flap--bottom {
  bottom: -30px; right: 14%; width: 30%; height: 60px;
  border-radius: 0 0 30px 30px;
}

/* title + anniversary stamp share one centered box so the stamp can overlap the corner */
.hero-title-wrap { position: relative; width: fit-content; margin: 0 auto clamp(1.4rem, 3vw, 2rem); }
.hero-title { position: relative; display: block; }
.egg--hero {
  position: absolute; top: -2.4rem; right: -5.6rem; z-index: 5;
  text-align: center;
}
@media (max-width: 900px) {
  .egg--hero { right: -4rem; top: -2.4rem; }
}
@media (max-width: 560px) {
  .egg--hero { right: -1.6rem; top: -2.8rem; }
}
.hero-lockup {
  display: block;
  font-family: var(--font-display-latin);
  font-size: var(--text-hero);
  color: var(--cream);
  line-height: 0.9;
  letter-spacing: 0.01em;
}
/* stack "Bear" over "Ping" on two tight lines, like the box lid */
.hero-word { display: block; }
.bl {
  display: inline-block;
  transform: rotate(var(--rot, 0deg)) translateY(var(--dy, 0));
}
/* hand-picked bouncy pattern, −5°..+5° with ±0.05em offsets */
.hero-word:nth-child(1) .bl:nth-child(1) { --rot: -4deg; --dy: 0.04em; }
.hero-word:nth-child(1) .bl:nth-child(2) { --rot: 3deg;  --dy: -0.03em; }
.hero-word:nth-child(1) .bl:nth-child(3) { --rot: -2deg; --dy: 0.05em; }
.hero-word:nth-child(1) .bl:nth-child(4) { --rot: 5deg;  --dy: -0.02em; }
.hero-word:nth-child(2) .bl:nth-child(1) { --rot: -5deg; --dy: -0.04em; }
.hero-word:nth-child(2) .bl:nth-child(2) { --rot: 2deg;  --dy: 0.05em; }
.hero-word:nth-child(2) .bl:nth-child(3) { --rot: -3deg; --dy: -0.02em; }
.hero-word:nth-child(2) .bl:nth-child(4) { --rot: 4deg;  --dy: 0.03em; }

.hero-lead {
  font-size: clamp(1.1rem, 2.2vw, 1.5rem); color: var(--cream);
  max-width: 40ch; margin: 0 auto clamp(1.6rem, 3vw, 2.2rem);
  line-height: 1.45; opacity: 0.96;
}
.hero-ctas { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; margin-bottom: 1.6rem; }
.btn {
  display: inline-block; text-decoration: none; font-weight: 700;
  /* Alegreya Sans sits high in its line box — extra top padding optically centers it */
  padding: 16px 30px 12px; border-radius: var(--radius-pill);
  font-size: 1.05rem; transition: transform .12s ease, background .15s ease;
}
.btn--cream { background: var(--cream); color: var(--red); box-shadow: var(--shadow-card); }
.btn--cream:hover { transform: translateY(-2px); }
.btn--outline { color: var(--cream); border: 2px solid var(--cream); }
.btn--outline:hover { background: rgba(237,241,242,0.14); }
.btn:active { transform: translateY(2px); }

.hero-trust { color: var(--cream); font-size: var(--text-small); opacity: 0.85; }
.hero-trust b { color: var(--cream); }

/* ============================================================
   2. WHY — printed memo
   ============================================================ */
.memo {
  position: relative;
  background: var(--paper);
  border-radius: var(--radius-card);
  padding: clamp(1.8rem, 4vw, 3rem);
  box-shadow: var(--shadow-card);
  transform: rotate(-0.6deg);
  max-width: 820px;
  margin-inline: auto; /* balance the void on both sides at desktop */
}
.memo-stamp {
  font-family: var(--font-sticker); color: var(--orange);
  font-size: .9rem; letter-spacing: .08em; margin-bottom: 1rem;
}
.memo-text { font-size: 1.15rem; }
.memo-text code, .memo-text span[lang="en"] { font-family: inherit; }
.memo-note {
  font-family: var(--font-hand); font-size: 1.7rem; color: var(--red);
  position: absolute; line-height: 1;
}
.memo-note--1 { top: -18px; right: 6%; transform: rotate(-8deg); }
.memo-note--2 { bottom: -26px; right: 9%; transform: rotate(6deg); }
.memo-note--3 { bottom: -22px; left: 12%; transform: rotate(-5deg); }
.memo-squiggle { position: absolute; width: 120px; bottom: 14%; left: -30px; opacity: .9; }
@media (max-width: 900px) {
  /* narrow memo card: the squiggle would sit on the text */
  .memo-squiggle { display: none; }
}
@media (max-width: 720px) {
  .memo-note--2 { right: 2%; bottom: -20px; }
}

/* ============================================================
   3. FEATURES BENTO
   ============================================================ */
.bento {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1rem, 2vw, 1.5rem);
}
.bento-card {
  display: flex; flex-direction: column;
  background: var(--cream);
  border-radius: var(--radius-card);
  padding: var(--space-card);
  box-shadow: var(--shadow-card);
}
.bento-card:nth-child(odd)  { transform: rotate(-1deg); }
.bento-card:nth-child(even) { transform: rotate(1deg); }
.bento-card h3 { margin: .3rem 0 .5rem; }
/* feature tile: span 2 cols x 2 rows so the 6 cards tile a full 3x3 desktop grid */
.bento-card--wide { grid-column: span 2; grid-row: span 2; }
.bento-note { margin-top: .8rem; color: var(--ink); }
.bento-underline {
  margin-top: auto; padding-top: 1.1rem;
  font-family: var(--font-hand); font-size: 1.5rem; color: var(--red);
  text-decoration: underline wavy var(--orange);
  text-decoration-thickness: 2px; text-underline-offset: 5px;
  align-self: flex-start;
}
.bento-card--slim { flex-direction: row; gap: 1rem; align-items: center; }
.bento-card--red {
  background: var(--red); color: var(--cream);
  box-shadow: 0 6px 0 rgba(122,35,49,0.4);
}
.bento-card--red h3 { color: var(--cream); }
.bento-card--pattern {
  background-color: var(--teal);
  background-image: var(--pattern);
  background-size: 300px 300px;
  border: 3px solid var(--cream);
  /* cream wash over the pattern so the copy stays readable */
  box-shadow: var(--shadow-card), inset 0 0 0 999px rgba(237,241,242,0.68);
}
.card-icon { width: 48px; height: 48px; flex: 0 0 auto; }
@media (max-width: 900px) {
  .bento { grid-template-columns: repeat(2, 1fr); }
  /* uniform on tablet: 6 equal cards fill 3 rows with no holes */
  .bento-card--wide { grid-column: auto; grid-row: auto; }
  .bento-underline { margin-top: 1rem; }
}
@media (max-width: 560px) {
  .bento { grid-template-columns: 1fr; }
}

/* ============================================================
   4. MODES + THE BUTTON
   ============================================================ */
.button-stage {
  position: relative; text-align: center;
  margin: clamp(1rem, 3vw, 2rem) auto clamp(2.5rem, 5vw, 4rem);
  max-width: 520px;
}
.sticker--tryme {
  position: absolute; top: -8px; right: 12%; z-index: 3;
  transform: rotate(8deg); font-size: 1.1rem;
}
.button-base {
  position: relative;
  width: clamp(220px, 42vw, 300px);
  aspect-ratio: 1;
  margin: 0 auto;
  border-radius: 50%;
  background: var(--cream);
  box-shadow: var(--shadow-card);
  display: grid; place-items: center;
}
.big-button {
  position: relative; z-index: 4;
  /* the 10px bottom shadow pulls the visual weight down — lift to compensate */
  top: -5px;
  width: 74%; aspect-ratio: 1; border: none; padding: 0;
  border-radius: 50%;
  background: var(--red);
  box-shadow: 0 10px 0 var(--red-deep);
  cursor: pointer;
  transition: transform .12s cubic-bezier(.34,1.56,.64,1), box-shadow .12s ease, background .1s ease;
}
.big-button-face {
  position: absolute; inset: 16%;
  border-radius: 50%;
  border: 3px solid rgba(237,241,242,0.28);
}
.big-button:hover { background: #9c3243; }
.big-button.is-pressed,
.big-button:active {
  background: var(--red-deep);
  transform: translateY(6px);
  box-shadow: 0 4px 0 var(--red-deep);
}
.ring-host { position: absolute; inset: 0; pointer-events: none; z-index: 2; }
.ping-ring {
  position: absolute; inset: 12%;
  border-radius: 50%;
  border: 4px solid var(--red);
  animation: ping-out .9s cubic-bezier(.2,.7,.3,1) forwards;
}
.ping-ring.ring-cream { border-color: var(--cream); }
@keyframes ping-out {
  0%   { transform: scale(0.55); opacity: 0.9; }
  100% { transform: scale(1.7); opacity: 0; }
}
.button-caption {
  display: inline-block;
  margin-top: 1.4rem; color: var(--ink); font-size: var(--text-small);
  background: var(--paper);
  padding: .5rem .9rem;
  border-radius: 12px;
  box-shadow: var(--shadow-press);
}

.modes-grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(1.2rem, 3vw, 2rem);
}
.mode-card {
  background: var(--paper);
  border-radius: var(--radius-card);
  padding: var(--space-card);
  box-shadow: var(--shadow-card);
}
.mode-card:nth-child(1) { transform: rotate(-0.8deg); }
.mode-card:nth-child(2) { transform: rotate(0.8deg); }
.mode-label { font-family: var(--font-sticker); color: var(--orange); margin-bottom: .3rem; }
.mode-card h3 { margin-bottom: .7rem; }
.notif-mock {
  display: flex; gap: .7rem; align-items: flex-start;
  margin-top: 1.2rem; padding: 12px 14px;
  background: var(--cream); border-radius: 12px;
  box-shadow: var(--shadow-press);
}
.notif-dot { width: 12px; height: 12px; border-radius: 50%; background: var(--red); margin-top: 6px; flex: 0 0 auto; }
.notif-dot--hot { background: var(--orange); }
.notif-body { display: flex; flex-direction: column; font-size: var(--text-small); }
.notif-body b { color: var(--red); }
@media (max-width: 680px) { .modes-grid { grid-template-columns: 1fr; } }

/* ============================================================
   6. LEGACY / DEPRECATED spec sheet
   ============================================================ */
.spec-sheet {
  background: var(--paper); border-radius: var(--radius-card);
  padding: clamp(1.6rem, 4vw, 2.8rem);
  box-shadow: var(--shadow-card);
  border: 2px dashed rgba(148,44,60,0.3);
  max-width: 880px;
}
.spec-header {
  font-family: var(--font-sticker); color: var(--orange);
  font-size: 1.25rem; letter-spacing: .06em; margin-bottom: 1.4rem;
}
.legacy-list { list-style: none; margin: 0; padding: 0; }
.legacy-list li {
  display: flex; align-items: center; gap: .7rem; flex-wrap: wrap;
  padding: .9rem 0; border-bottom: 2px dashed rgba(84,42,48,0.16);
  position: relative;
}
.legacy-old { text-decoration: line-through; text-decoration-color: var(--red); color: rgba(84,42,48,0.7); }
.legacy-arrow { color: var(--orange); font-weight: 700; }
.legacy-new { font-weight: 700; color: var(--ink); }
.stamp {
  font-family: var(--font-sticker); font-size: .72rem; letter-spacing: .05em;
  color: var(--red); border: 2px solid var(--red); border-radius: 6px;
  padding: 2px 8px; transform: rotate(-6deg); margin-left: auto;
  text-transform: uppercase;
}
.stamp--reserve { color: var(--orange); border-color: var(--orange); text-transform: none; }
.legacy-rollingpin { position: relative; }
.rollingpin { width: 74px; margin-left: .4rem; }
.legacy-note { margin-top: 1.4rem; font-family: var(--font-quote); font-style: italic; color: var(--ink); }
@media (max-width: 560px) {
  .stamp { margin-left: 0; }
}

/* ============================================================
   7. USE CASES carousel
   ============================================================ */
.cases-wrap { position: relative; width: min(1200px, 100%); margin-inline: auto; }
.cases-track {
  display: flex; gap: clamp(1rem, 2.5vw, 1.6rem);
  overflow-x: auto; scroll-snap-type: x mandatory;
  padding: 1rem clamp(1.25rem, 4vw, 4rem) 1.6rem;
  scrollbar-width: none;
}
.cases-track::-webkit-scrollbar { display: none; }
.case-card {
  scroll-snap-align: center; flex: 0 0 min(74%, 400px);
  background: var(--paper); border-radius: var(--radius-card);
  box-shadow: var(--shadow-card); overflow: hidden;
  display: flex; flex-direction: column;
}
.case-card:nth-child(even) { transform: rotate(-0.8deg); }
.case-card:nth-child(odd)  { transform: rotate(0.8deg); }
.case-art { line-height: 0; border-bottom: 2px dashed rgba(148,44,60,0.18); }
.case-art svg { width: 100%; height: auto; display: block; }
.case-card h3 { margin: .2rem 0 .5rem; padding: 0 clamp(1.2rem,3vw,1.8rem); }
.case-card > p:not(.case-note) { padding: 0 clamp(1.2rem,3vw,1.8rem) 1.6rem; }
.case-note {
  font-family: var(--font-hand); font-size: 1.5rem; color: var(--red);
  padding: 1rem clamp(1.2rem,3vw,1.8rem) 0; transform: rotate(-2deg);
}
.cases-controls {
  display: flex; gap: .8rem; justify-content: flex-end;
  width: min(1200px, 100% - 2.5rem); margin: .4rem auto 0;
}
.case-arrow {
  width: 58px; height: 58px; border-radius: 50%;
  background: var(--red); color: var(--cream);
  border: 3px solid var(--cream); cursor: pointer;
  box-shadow: var(--shadow-card);
  display: grid; place-items: center;
  transition: transform .12s ease, background .15s ease;
}
.case-arrow svg { width: 26px; height: 26px; }
.case-arrow:hover { background: var(--red-deep); transform: translateY(-2px); }
.case-arrow:active { transform: translateY(2px); }
.case-arrow:disabled { opacity: .35; cursor: default; }
.case-arrow:disabled:hover { transform: none; background: var(--red); }

/* ============================================================
   8. TESTIMONIALS
   ============================================================ */
.quotes-grid {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: clamp(1.2rem, 3vw, 2rem);
}
.quote-card {
  position: relative; background: var(--paper);
  border-radius: var(--radius-card); padding: clamp(1.5rem, 3vw, 2.2rem);
  box-shadow: var(--shadow-card);
}
.quote-card:nth-child(odd)  { transform: rotate(-0.8deg); }
.quote-card:nth-child(even) { transform: rotate(0.9deg); }
.quote-card::after { /* speech-bubble tail */
  content: ""; position: absolute; left: 34px; bottom: -16px;
  width: 30px; height: 20px; background: var(--paper);
  clip-path: polygon(0 0, 100% 0, 20% 100%);
}
.quote-card blockquote {
  margin: 0 0 1rem; font-family: var(--font-quote); font-style: italic;
  font-size: 1.2rem; color: var(--ink);
}
.quote-card figcaption { font-weight: 700; color: var(--red); }
.quote-card figcaption span { display: block; font-weight: 400; color: var(--ink); font-size: var(--text-small); }
@media (max-width: 680px) { .quotes-grid { grid-template-columns: 1fr; } }

/* ============================================================
   9. MANUAL sheet
   ============================================================ */
.manual-sheet {
  position: relative;
  background: var(--paper); border-radius: var(--radius-card);
  padding: clamp(1.6rem, 4vw, 3rem); box-shadow: var(--shadow-card);
  max-width: 820px;
}
/* "Requires one compatible bear" — slapped on the corner of the quick-start sheet */
.manual-compat {
  position: absolute; top: -16px; right: 20px;
  transform: rotate(3deg); font-size: .9rem;
}
.manual-header {
  font-family: var(--font-sticker); color: var(--orange);
  margin-bottom: 1.6rem; font-size: 1.1rem;
}
.manual-steps { list-style: none; margin: 0; padding: 0; }
.manual-steps li {
  display: flex; gap: 1.2rem; align-items: flex-start;
  padding: 1.2rem 0;
  border-bottom: 3px dashed rgba(148,44,60,0.28);
}
.manual-steps li:last-child { border-bottom: none; }
.step-num {
  font-family: var(--font-display-latin); font-size: 2.4rem;
  color: var(--red); line-height: 1; flex: 0 0 auto; min-width: 2.4ch;
}
.manual-done {
  margin-top: 1.4rem; padding-top: 1.2rem;
  border-top: 3px dashed rgba(148,44,60,0.28);
  font-family: var(--font-quote); font-style: italic; color: var(--ink);
}
.manual-done span[lang="en"] {
  font-family: var(--font-sticker); font-style: normal; color: var(--orange);
  margin-right: .3rem;
}

/* ============================================================
   10. SAFETY sheet
   ============================================================ */
.safety-sheet {
  position: relative; background: var(--paper); border-radius: var(--radius-card);
  padding: clamp(1.8rem, 4vw, 3rem); box-shadow: var(--shadow-card);
}
.warn-triangle { width: 72px; margin-bottom: 1rem; }
.safety-cols { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.4rem, 3vw, 2.5rem); }
.safety-cols h3 { margin-bottom: .6rem; }
.safety-cols ul { margin: .6rem 0; padding-left: 1.2rem; }
.safety-cols li { margin-bottom: .3rem; }
.safety-cols p + p { margin-top: .8rem; }
@media (max-width: 680px) { .safety-cols { grid-template-columns: 1fr; } }

/* ============================================================
   11. ABOUT + FOOTER — inside of the lid
   ============================================================ */
.footer {
  position: relative; margin-top: var(--space-section);
  background: var(--red-deep); color: var(--cream);
  padding-block: clamp(3.5rem, 8vw, 6rem) clamp(2rem, 4vw, 3rem);
}
.flap--footer {
  position: absolute; top: -30px; left: 20%;
  width: 32%; height: 60px; background: var(--red-deep);
  border-radius: 30px 30px 0 0;
}
.footer-grid {
  display: grid; grid-template-columns: 1.4fr 1fr;
  gap: clamp(2rem, 5vw, 4rem); align-items: start;
}
.footer h2 { color: var(--cream); margin: .8rem 0 .8rem; font-size: clamp(2rem, 4vw, 2.6rem); }
.footer-about p { color: rgba(237,241,242,0.9); max-width: 52ch; }
.footer-logo { width: 130px; height: auto; }
.egg--footer { margin-top: 1.8rem; position: relative; display: inline-block; }

.qr-block { text-align: center; }
.visit-us {
  font-family: var(--font-display-latin); font-size: 1.8rem;
  color: var(--cream); margin-bottom: 1rem; letter-spacing: .04em;
}
.qr-card {
  display: inline-flex; flex-direction: column; align-items: center; gap: .8rem;
  background: var(--paper); color: var(--ink);
  padding: 1.2rem; border-radius: var(--radius-card);
  box-shadow: var(--shadow-card); transform: rotate(-1.5deg);
}
.qr-card img { width: 168px; height: 168px; }
.qr-quickstart { display: flex; flex-direction: column; }
.qr-quickstart b { font-family: var(--font-sticker); color: var(--red); font-size: 1.1rem; }
.qr-quickstart span { font-size: .78rem; color: var(--ink); }
.qr-caption { margin-top: 1rem; font-family: var(--font-hand); font-size: 1.4rem; color: var(--cream); transform: rotate(-2deg); }
.qr-mfg { margin-top: .6rem; font-size: var(--text-small); color: rgba(237,241,242,0.7); }
@media (max-width: 780px) {
  .footer-grid { grid-template-columns: 1fr; }
  .qr-block { justify-self: start; text-align: left; }
}
.footer-fine {
  margin-top: clamp(2.5rem, 5vw, 4rem);
  padding-top: 1.6rem; border-top: 2px dashed rgba(237,241,242,0.3);
  font-size: var(--text-small); color: rgba(237,241,242,0.75);
}
.footer-fine p + p { margin-top: .5rem; }

/* ============================================================
   Easter-egg badge flip panels
   ============================================================ */
.egg { perspective: 900px; }
/* reset only what's needed; keep the sticker's Chewy face (do NOT use the
   `font` shorthand here — it would wipe font-family back to Alegreya) */
.egg-badge {
  --badge-rot: -3deg;
  cursor: pointer;
  font-family: var(--font-sticker);
  font-size: 1rem;
  line-height: 1.2;
  color: var(--red);
  /* persistent tap affordance for the easter egg trigger */
  text-decoration: underline wavy var(--orange);
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}
.egg-badge.sticker { border: 2px solid rgba(122,35,49,0.12); }

/* hero anniversary stamp — a "sale"-style seal over the title corner */
.stamp-seal {
  --badge-rot: 8deg;
  position: relative;
  display: inline-flex; flex-direction: column; align-items: center; gap: 1px;
  background: var(--orange); color: var(--cream);
  border: none; border-radius: 14px;
  padding: 12px 18px 10px;
  transform: rotate(var(--badge-rot));
  box-shadow: 0 6px 0 rgba(122,35,49,0.35);
  text-decoration: none;
}
.stamp-seal::before {
  content: ""; position: absolute; inset: 5px;
  border: 2px dashed rgba(237,241,242,0.75); border-radius: 9px;
  pointer-events: none;
}
.seal-num { font-size: 1.55rem; line-height: 1; }
.seal-num sub { font-size: .55em; }
.seal-sub { font-size: .78rem; letter-spacing: .05em; }
.stamp-hint {
  /* hangs off the stamp's lower-right so it never sits on the title letters */
  position: absolute; top: calc(100% + 4px); right: -1.4rem;
  font-family: var(--font-hand); font-size: 1.25rem; line-height: 1;
  color: var(--cream); transform: rotate(-6deg);
}
.egg-panel {
  position: absolute; left: 50%; top: 0;
  transform: translate(-50%, 8px);
  z-index: 40; width: min(340px, 82vw);
  background: var(--cream); color: var(--ink);
  border-radius: var(--radius-card); padding: 1.3rem 1.4rem 1.5rem;
  box-shadow: 0 10px 0 rgba(122,35,49,0.3);
  text-align: left;
}
.egg-panel[hidden] { display: none; }
.egg-panel.is-flipping { animation: egg-flip .5s ease; }
@keyframes egg-flip {
  0%   { transform: translate(-50%, 8px) rotateY(-90deg); opacity: 0; }
  100% { transform: translate(-50%, 8px) rotateY(0); opacity: 1; }
}
/* .egg-panel prefix keeps these winning over `.footer-about p` inside the footer */
.egg-panel .egg-head {
  font-family: 'Alegreya Sans', monospace; font-weight: 700;
  letter-spacing: .06em; font-size: .78rem; color: var(--red);
  border-bottom: 2px dashed rgba(148,44,60,0.4); padding-bottom: .5rem; margin-bottom: .8rem;
}
.egg-panel .egg-note { font-family: var(--font-quote); font-style: italic; font-size: 1.15rem; color: var(--ink); }
.egg-close {
  position: absolute; top: 8px; right: 10px;
  border: none; background: transparent; color: var(--red);
  font-size: 1.1rem; cursor: pointer; line-height: 1; padding: 4px;
}
.egg-badge.wobble { animation: egg-wobble .6s ease; }
@keyframes egg-wobble {
  0%,100% { transform: rotate(var(--badge-rot, -3deg)); }
  25% { transform: rotate(calc(var(--badge-rot, -3deg) - 5deg)) scale(1.04); }
  60% { transform: rotate(calc(var(--badge-rot, -3deg) + 4deg)); }
}

/* ============================================================
   Toasts (fake Telegram notifications)
   ============================================================ */
.toast-host {
  position: fixed; inset-block-end: 18px; inset-inline-end: 18px;
  z-index: 150; display: flex; flex-direction: column-reverse; gap: 10px;
  width: min(360px, calc(100vw - 36px)); pointer-events: none;
}
.toast {
  display: flex; gap: .8rem; align-items: flex-start;
  background: var(--cream); color: var(--ink);
  border-radius: var(--radius-card); padding: 14px 16px;
  box-shadow: var(--shadow-card);
  border-left: 6px solid var(--red);
  transform: translateX(120%);
  transition: transform .38s cubic-bezier(.34,1.56,.64,1), opacity .3s ease;
}
.toast.is-in { transform: translateX(0); }
.toast.is-out { opacity: 0; transform: translateX(120%); }
.toast--escalation { border-left-color: var(--orange); }
.toast-emoji { font-size: 1.4rem; line-height: 1.2; flex: 0 0 auto; }
.toast-body { font-size: .92rem; }
.toast-head {
  display: block; font-weight: 700; color: var(--red);
  font-size: .74rem; letter-spacing: .04em; text-transform: uppercase; margin-bottom: 2px;
}
.toast--escalation .toast-head { color: var(--orange); }

/* ============================================================
   Motion — scroll reveals + hero settle
   ============================================================ */
.reveal { opacity: 0; transform: translateY(12px); }
.reveal.is-in {
  opacity: 1; transform: translateY(0);
  transition: opacity .5s ease, transform .5s cubic-bezier(.34,1.56,.64,1);
}
/* per-card resting tilt is preserved: reveal only animates entry, resting transform set by nth-child */
.bento-card.reveal.is-in,
.mode-card.reveal.is-in,
.chip.reveal.is-in,
.quote-card.reveal.is-in { transition: opacity .5s ease, transform .5s cubic-bezier(.34,1.56,.64,1); }

/* hero letters settle in on load */
.hero-settle .bl {
  animation: bl-settle .5s cubic-bezier(.34,1.56,.64,1) backwards;
}
.hero-settle .hero-word:nth-child(1) .bl:nth-child(1) { animation-delay: .00s; }
.hero-settle .hero-word:nth-child(1) .bl:nth-child(2) { animation-delay: .03s; }
.hero-settle .hero-word:nth-child(1) .bl:nth-child(3) { animation-delay: .06s; }
.hero-settle .hero-word:nth-child(1) .bl:nth-child(4) { animation-delay: .09s; }
.hero-settle .hero-word:nth-child(2) .bl:nth-child(1) { animation-delay: .12s; }
.hero-settle .hero-word:nth-child(2) .bl:nth-child(2) { animation-delay: .15s; }
.hero-settle .hero-word:nth-child(2) .bl:nth-child(3) { animation-delay: .18s; }
.hero-settle .hero-word:nth-child(2) .bl:nth-child(4) { animation-delay: .21s; }
@keyframes bl-settle {
  from { opacity: 0; transform: translateY(-0.4em) rotate(0deg); }
  to   { opacity: 1; transform: rotate(var(--rot, 0deg)) translateY(var(--dy, 0)); }
}

/* ============================================================
   Reduced motion — opacity-only or none
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation-duration: .001ms !important; animation-iteration-count: 1 !important;
      transition-duration: .001ms !important; }
  .reveal { opacity: 1; transform: none; }
  .ping-ring { display: none; }
  .site-nav { transition: none; }
  .egg-panel.is-flipping { animation: none; }
  .hero-settle .bl { animation: none; }
  .toast { transform: none; transition: opacity .2s ease; }
  .toast.is-out { transform: none; }
}