/*
  BeeZeeBee brand tokens — mirrors the Figma "BZB Colors" variables and the
  type rules in docs/design/figma-handoff.md (Instrument Sans for everything).
  Every other stylesheet reads from these; nothing else hard-codes a colour.
*/
:root {
  --cream: #f7f9f2;
  --white: #ffffff;
  --mint: #cfebd3;
  --leaf: #5db075;
  --honey: #f6c143;
  --stone: #e4e8dc;
  --ink: #0f3b2c;
  --forest: #1e6b48;
  --muted: #55695f;
  --line: #e1e8dc;

  --instock-bg: #e6f3e8;
  --instock-fg: #1e6b48;
  --low-bg: #fdf1d3;
  --low-fg: #8a5a00;

  --font: "Instrument Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* Reset + page chrome. The page background is cream on every layout. */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body { background: var(--cream); color: var(--ink); font-family: var(--font); -webkit-font-smoothing: antialiased; }
body { min-height: 100vh; overflow-x: hidden; }
a { color: inherit; text-decoration: none; }
button, input { font-family: inherit; }
svg { display: block; }

/* Visually hidden labels for the email inputs. */
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/*
  Stage scaling. Each layout is drawn in fixed design units (1440×900 desktop,
  390×1307 mobile); scripts/stage.js sets --scale and --stage-w so the stage
  fills the viewport. Without JS the stages render at 1:1, which still works.
*/
.viewport { position: relative; margin: 0 auto; }
.stage { position: absolute; top: 0; left: 0; transform-origin: 0 0; transform: scale(var(--scale, 1)); overflow: hidden; }
.stage--desktop { width: var(--stage-w, 1440px); height: 900px; }
.stage--mobile { width: 390px; height: 1307px; }

body[data-layout="desktop"] .stage--mobile { display: none; }
body[data-layout="mobile"] .stage--desktop { display: none; }

/* Shared pieces used by both layouts. */
.brand { display: flex; align-items: center; gap: 10px; }
.brand__zee { width: 44px; height: 44px; }
.brand__word { font-size: 28px; font-weight: 500; letter-spacing: -0.42px; line-height: 34px; color: var(--ink); }

.chip {
  display: inline-block; padding: 6px 12px; border-radius: 10px;
  font-size: 13px; font-weight: 600; letter-spacing: 0.26px; line-height: 16px;
  background: var(--white); color: var(--ink); white-space: nowrap;
}
.chip--ink { background: var(--ink); color: var(--cream); }
.chip--honey { background: var(--honey); color: var(--ink); }

/* Email capture row — mindmarket.com button anatomy (r10, 58px, white chevron dot). */
.notify { display: flex; align-items: center; gap: 12px; }
.notify__input {
  width: 360px; height: 58px; border: 0; border-radius: 10px; padding: 0 20px;
  font-size: 17px; font-weight: 500; line-height: 1; color: var(--ink); background: var(--white); outline: none;
}
.notify__input::placeholder { color: var(--muted); }
.notify__input:focus-visible { box-shadow: 0 0 0 3px var(--honey); }
.notify__btn {
  display: flex; align-items: center; gap: 10px; height: 58px; padding: 10px 10px 10px 20px;
  border: 0; border-radius: 10px; background: var(--honey); color: var(--ink);
  font-size: 17px; font-weight: 500; line-height: 1; cursor: pointer; white-space: nowrap;
  transition: transform 0.2s var(--ease), filter 0.2s var(--ease);
}
.notify__btn:hover { filter: brightness(1.04); }
.notify__btn:active { transform: scale(0.98); }
.notify__btn:focus-visible { box-shadow: 0 0 0 3px var(--white); outline: none; }
.notify__dot { width: 38px; height: 38px; border-radius: 50%; background: var(--white); display: grid; place-items: center; }
.notify.is-sent .notify__btn { pointer-events: none; opacity: 0.85; }
.note { font-size: 15px; line-height: 1.5; color: var(--mint); }