/* Squeeeks — design tokens and shared components.
   Every page imports this file unchanged. Contrast figures are WCAG ratios,
   measured against --cream unless stated. */

@font-face { font-family: "Fredoka"; font-weight: 600; font-display: swap; src: url("media/fonts/web/Fredoka-SemiBold.woff2") format("woff2"); }
@font-face { font-family: "Fredoka"; font-weight: 700; font-display: swap; src: url("media/fonts/web/Fredoka-Bold.woff2") format("woff2"); }
@font-face { font-family: "Nunito"; font-weight: 400; font-display: swap; src: url("media/fonts/web/Nunito-Regular.woff2") format("woff2"); }
@font-face { font-family: "Nunito"; font-weight: 600; font-display: swap; src: url("media/fonts/web/Nunito-SemiBold.woff2") format("woff2"); }
@font-face { font-family: "Nunito"; font-weight: 700; font-display: swap; src: url("media/fonts/web/Nunito-Bold.woff2") format("woff2"); }
@font-face { font-family: "Plus Jakarta Sans"; font-weight: 600; font-display: swap; src: url("media/fonts/web/PlusJakartaSans-SemiBold.woff2") format("woff2"); }
@font-face { font-family: "Plus Jakarta Sans"; font-weight: 700; font-display: swap; src: url("media/fonts/web/PlusJakartaSans-Bold.woff2") format("woff2"); }

:root {
  /* Surfaces — AppColors */
  --cream: #F9F6F0;        /* page */
  --oat: #F2E7CE;          /* cards */
  --oat-line: #E3D4B0;     /* card borders, hairlines on oat */
  --butter: #FCE7B0;       /* sampled from the app icon's rays */
  --coral: #E3937C;        /* sampled from the app icon's rays; never text */
  --sage: #A8CABA;
  --lawn: #86B571;         /* sampled from app--home--home--furnished.jpg */

  /* Ink — no black anywhere */
  --brown: #6E5230;        /* 6.68 on cream · 5.87 on oat */
  --brown-soft: #7C6243;   /* brown at 90%: 5.28 on cream · 4.71 on oat (80% fails at 4.17) */
  --brown-deep: #4A3520;   /* the only ink that passes on --lawn (4.87) */
  --contour: #6B4A2F;      /* sticker outlines */

  /* Accent — app teal is decoration only (2.89 on cream fails as text) */
  --teal: #1FA397;
  --teal-ink: #0B6B62;     /* button fill: cream on it is 5.91 */

  /* Type */
  --font-display: "Fredoka", ui-rounded, system-ui, sans-serif;
  --font-body: "Nunito", ui-rounded, system-ui, sans-serif;
  --font-label: "Plus Jakarta Sans", system-ui, sans-serif;
  --track-label: 0.08em;

  /* Shape */
  --radius-sticker: 22px;
  --radius-card: 18px;
  --radius-pill: 999px;
  --outline: 2px solid var(--contour);
  --shadow-sticker: 0 2px 0 var(--oat-line), 0 14px 30px -12px rgba(110, 82, 48, 0.35);

  /* Layout */
  --gutter: 16px;
  --header-h: 56px;
  --maxw: 1200px;

  /* Motion — content settles with a little weight */
  --ease-settle: cubic-bezier(0.22, 1.2, 0.36, 1);
  --settle-dur: 700ms;
  --settle-step: 90ms;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--cream);
  color: var(--brown);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Small uppercase label — uppercase through CSS so screen readers read words */
.label {
  font-family: var(--font-label);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  line-height: 1.3;
}

/* The die-cut sticker frame: rounded, 2px warm-brown outline, soft oat shadow. No bezels. */
.sticker {
  position: relative;
  border: var(--outline);
  border-radius: var(--radius-sticker);
  box-shadow: var(--shadow-sticker);
  overflow: hidden;
  background: var(--lawn);
}
.sticker > img { width: 100%; }

/* Quoted prop labels: hairline leader from a real prop to a small quoted tag */
.props { position: absolute; inset: 0; pointer-events: none; }
.props svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.props line { stroke: var(--contour); stroke-width: 1.25; vector-effect: non-scaling-stroke; }
.props circle { fill: var(--cream); stroke: var(--contour); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.prop-tag {
  position: absolute;
  transform: translate(-50%, -50%);
  background: var(--cream);
  color: var(--brown);
  border: 1.5px solid var(--contour);
  border-radius: 6px;
  padding: 3px 7px 2px;
  white-space: nowrap;
  font-size: 11px;
}
.prop-tag::before { content: "\201C"; }
.prop-tag::after { content: "\201D"; }

/* The one button — app teal deepened until cream passes */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; padding: 0 18px;
  border-radius: var(--radius-pill);
  background: var(--teal-ink); color: var(--cream);
  font-family: var(--font-display); font-weight: 600; font-size: 16px;
  text-decoration: none;
  box-shadow: 0 2px 0 var(--brown-deep);
}
.btn:focus-visible, a:focus-visible { outline: 3px solid var(--teal); outline-offset: 3px; }

/* Apple's badge, used as supplied */
.store-badge { display: inline-block; line-height: 0; }
.store-badge img { height: 48px; width: auto; }

/* Speech bubble */
.bubble {
  position: relative;
  background: var(--cream);
  border: var(--outline);
  border-radius: 16px;
  padding: 6px 12px;
  font-family: var(--font-body); font-weight: 600; font-size: 15px;
  color: var(--brown);
}

/* Settle-in: everything with [data-settle] drops into place, staggered by --i */
@keyframes settle {
  from { opacity: 0; transform: translateY(14px) scale(0.985); }
  to   { opacity: 1; transform: none; }
}
[data-settle] {
  animation: settle var(--settle-dur) var(--ease-settle) both;
  animation-delay: calc(var(--i, 0) * var(--settle-step));
}
@media (prefers-reduced-motion: reduce) {
  [data-settle] { animation: none; }
}

/* ---------- Type scale ---------- */
:root {
  --h1-mobile: 38px;
  --h1-desktop: 56px;
  --h2-mobile: 30px;
  --h2-desktop: 44px;
  --body-lg: 17px;
  --body-lg-desktop: 19px;
  --small: 14px;
}

/* ---------- Storybook paper: the page is an oat desk, content sits on rounded cream sheets ---------- */
.desk { background: var(--oat); min-height: 100vh; }
.paper {
  background: var(--cream);
  border: var(--outline);
  border-radius: 28px;
  margin: 0 8px 12px;
}
@media (min-width: 900px) {
  .paper { max-width: 1400px; margin: 4px auto 24px; }
}

/* ---------- Site header (sticky, sits on the desk) ---------- */
.site-head {
  position: sticky; top: 0; z-index: 5;
  height: var(--header-h);
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 0 var(--gutter);
  background: var(--oat);
}
.wordmark { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; font-family: var(--font-display); font-weight: 700; font-size: 22px; color: var(--brown); }
.wordmark img { width: 28px; height: 28px; border-radius: 8px; border: 1.5px solid var(--contour); }
.head-right { display: flex; align-items: center; gap: 28px; }
.nav { display: none; gap: 24px; }
.nav a { text-decoration: none; color: var(--brown); }
.nav a:hover { text-decoration: underline; text-underline-offset: 4px; }
.btn-head { min-height: 40px; font-size: 15px; padding: 0 16px; }
@media (min-width: 900px) {
  :root { --gutter: 40px; --header-h: 64px; }
  .nav { display: flex; }
}

/* ---------- The duck speaks ---------- */
.speaker { display: flex; align-items: center; gap: 10px; }
.speaker img { width: 52px; height: auto; flex: none; }
.speaker .bubble { margin: 0; border-radius: 999px; padding: 6px 14px; }
.speaker .bubble::before {
  content: ""; position: absolute; left: -7px; top: 50%; width: 12px; height: 12px;
  background: var(--cream); border-left: var(--outline); border-bottom: var(--outline);
  transform: translateY(-50%) rotate(45deg);
}
@media (min-width: 900px) {
  .speaker img { width: 64px; }
  .speaker .bubble { font-size: 17px; }
}

/* ---------- A sticker standing on a soft lawn hill ---------- */
.on-hill { position: relative; }
.on-hill::before { content: ""; position: absolute; left: 3%; right: 3%; bottom: -12px; height: 42%; background: var(--lawn); border-radius: 50%; opacity: 0.4; }
.on-hill .sticker { transform: rotate(-1.2deg); }
@media (min-width: 900px) { .on-hill::before { bottom: -28px; } }
.prop-tag { border-radius: 999px; padding: 3px 9px 2px; }
@media (min-width: 900px) { .prop-tag { font-size: 12px; padding: 4px 10px 3px; } }

/* ---------- Fine print ---------- */
.terms { font-size: var(--small); line-height: 1.4; color: var(--brown-soft); }
.terms span { white-space: nowrap; }
.proof { font-size: var(--small); font-weight: 700; color: var(--brown); }
.proof .star { color: var(--teal-ink); }

/* ---------- QR (desktop only) ---------- */
.qr { display: none; }
@media (min-width: 900px) {
  .qr { display: flex; align-items: center; gap: 12px; }
  .qr img { width: 112px; height: 112px; padding: 8px; background: var(--cream); border: 1.5px solid var(--oat-line); border-radius: 12px; }
  .qr span { font-size: var(--small); max-width: 6.5em; line-height: 1.3; color: var(--brown-soft); }
  .store-badge img { height: 56px; }
}