/* Savado Studios — Birthday Room shop. Mobile first; desktop rules at the end. */
:root {
  --cream: #fff3e0;
  --paper: #fffaf2;
  --ink: #3a1f0f;
  --muted: #8a6a55;
  --pink: #f26ba0;
  --pink-hover: #ff86b8;
  --hot: #d6006c;
  --blush: #f7a8c9;
  --blush-soft: #ffe0ee;
  --yellow: #ffd34d;
  --blue: #2f6fd6;
  --white: #ffffff;
  --shadow: 0 0 0 3px var(--ink), 0 6px 0 3px var(--ink);
  --shadow-lift: 0 0 0 3px var(--ink), 0 10px 0 3px var(--ink);
  --pixel: 'Press Start 2P', monospace;
  --body: 'Nunito', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --gutter: 16px;
  --header-h: 64px;
  --measure: 34rem;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--body);
  font-size: 18px;
  line-height: 1.55;
  overflow-x: hidden;
}
img { max-width: 100%; height: auto; display: block; }
.pixel { image-rendering: pixelated; }
a { color: var(--hot); }
h1, h2, h3 { line-height: 1.15; margin: 0 0 .5em; font-weight: 900; letter-spacing: -.01em; }
h1 { font-size: clamp(2rem, 7vw, 3.6rem); }
h2 { font-size: clamp(1.6rem, 5vw, 2.4rem); }
h3 { font-size: 1.2rem; }
p { margin: 0 0 1em; }
.lead { font-size: 1.15rem; max-width: var(--measure); }
.muted { color: var(--muted); }
.wrap { width: 100%; max-width: 1120px; margin: 0 auto; padding-left: var(--gutter); padding-right: var(--gutter); }
.eyebrow {
  font-family: var(--pixel);
  font-size: 10px;
  letter-spacing: .06em;
  color: var(--hot);
  text-transform: uppercase;
  margin: 0 0 18px;
  line-height: 1.8;
}
.skip { position: absolute; left: -999px; top: 8px; background: var(--white); padding: 8px 12px; box-shadow: var(--shadow); }
.skip:focus { left: 8px; z-index: 50; }
:focus-visible { outline: 3px solid var(--yellow); outline-offset: 3px; }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 56px; padding: 0 22px;
  font-family: var(--pixel); font-size: 11px; line-height: 1.4; text-transform: uppercase; text-decoration: none;
  border: 0; cursor: pointer; color: var(--ink); background: var(--white);
  box-shadow: var(--shadow);
  transition: transform .12s steps(2), background .12s;
}
.btn:hover { background: var(--blush-soft); transform: translateY(-2px); box-shadow: var(--shadow-lift); }
.btn:active { transform: translateY(4px); box-shadow: 0 0 0 3px var(--ink); }
.btn-primary { background: var(--pink); color: var(--white); }
.btn-primary:hover { background: var(--pink-hover); }
.btn-yellow { background: var(--yellow); }
.btn-yellow:hover { background: #ffe27a; }
.btn-block { width: 100%; }

/* Purchase buttons: a slow pulse to catch the eye, and they grow under the mouse */
@keyframes pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.05); } }
.buy { animation: pulse 2s ease-in-out infinite; transition: transform .15s ease, background .12s; }
.buy:hover { animation: none; transform: scale(1.08); }
.buy:active { transform: scale(.98); }

/* Header. The product is 8-bit; the brand is not. So the header is a modern frosted-glass
   bar: translucent, blurred, with a hairline edge and a soft shadow once the page scrolls.
   It lays over the top of the hero (the negative margin pulls the hero up under it) so
   the balloons drift up behind the glass; the hero pads its top to make room. */
.site-header {
  position: sticky; top: 0; z-index: 20;
  margin-bottom: calc(-1 * var(--header-h));
  background: rgba(255, 250, 242, .3);
  -webkit-backdrop-filter: blur(18px) saturate(1.6);
  backdrop-filter: blur(18px) saturate(1.6);
  border-bottom: 1px solid rgba(58, 31, 15, .08);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6);
  transition: box-shadow .25s;
}
.site-header.is-scrolled {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6), 0 8px 30px rgba(58, 31, 15, .08);
}
@supports not (backdrop-filter: blur(1px)) { .site-header { background: rgba(255, 250, 242, .96); } }
.site-header .wrap { display: flex; align-items: center; justify-content: space-between; min-height: var(--header-h); gap: 12px; }
.brand { display: inline-flex; align-items: center; text-decoration: none; }
.brand img { display: block; height: 30px; width: auto; }
.header-cta { margin: 0; }
/* The button reads "Get started" on phones and "Plan the surprise" from tablet up. */
.header-btn-long { display: none; }
.header-btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 36px; padding: 0 16px; border: 0; border-radius: 999px; cursor: pointer;
  font: 800 .85rem/1 var(--body); letter-spacing: .01em; color: var(--white);
  background: linear-gradient(180deg, var(--pink-hover), var(--pink));
  box-shadow: 0 1px 0 rgba(255, 255, 255, .35) inset, 0 6px 16px rgba(242, 107, 160, .35);
  transition: transform .15s ease, box-shadow .15s ease;
}
.header-btn:hover { transform: translateY(-1px); box-shadow: 0 1px 0 rgba(255, 255, 255, .35) inset, 0 10px 22px rgba(242, 107, 160, .42); }
.header-btn:active { transform: translateY(0); box-shadow: 0 3px 10px rgba(242, 107, 160, .3); }

/* Hero */
.hero { position: relative; padding: calc(var(--header-h) + 40px) 0 64px; }   /* room at the bottom for the cat to walk past */
.hero .wrap { position: relative; z-index: 1; }
/* Balloons behind everything in the hero. Each one rises from below the section and is
   clipped once it drifts out of the top; the negative delays spread them out from the
   first frame. Sizes, timings and sway are the gift link's greeting screen. */
.hero-balloons { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; opacity: .5; }   /* faded so the text stays easy to read */
.hero-balloons > div { position: absolute; bottom: -38%; animation: rise 20s linear infinite; }
.hero-balloons img { display: block; width: 100%; height: auto; animation: sway 5s ease-in-out infinite; }
@keyframes rise { from { transform: translateY(0); } to { transform: translateY(-200vh); } }
@keyframes sway { 0%, 100% { transform: translateX(-9px) rotate(-5deg); } 50% { transform: translateX(9px) rotate(5deg); } }
.hero .wrap { display: flex; flex-direction: column; }
.hero .frame { order: 10; margin-top: 30px; }
/* On phones the picture comes right after the headline, then the lead and the buy button,
   both centred, and the trust line is hidden; desktop puts them back in DOM order. */
.hero .lead { order: 15; text-align: center; margin-left: auto; margin-right: auto; }
.hero-actions { display: flex; flex-direction: column; align-items: center; gap: 14px; margin: 0 0 8px; order: 20; }
.hero-actions form { margin: 0; }
.hero-secondary { display: none; }
.trust { display: none; font-family: var(--pixel); font-size: 8px; line-height: 2.2; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; margin: 0; }
.frame {
  background: var(--white); padding: 8px;
  box-shadow: 0 0 0 4px var(--ink), 0 0 0 10px var(--blush), 0 0 0 14px var(--ink), 0 14px 0 14px var(--ink);
  margin: 14px 14px 32px;
}
.frame img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.frame figcaption { font-family: var(--pixel); font-size: 8px; color: var(--hot); text-align: center; padding: 12px 8px 4px; letter-spacing: .05em; }

/* The cat. It paces the seam between the hero and the next section, turning round
   at each end, and says meow when petted. Same animation as in the room itself. */
.catwalk { position: relative; height: 0; z-index: 2; }
.cat-track {
  position: absolute; bottom: 0; left: 0;
  width: clamp(56px, 6vw, 96px);
  animation: catWalk 36s linear infinite;
}
.cat { display: block; width: 100%; padding: 0; border: 0; background: transparent; cursor: pointer; transform-origin: 50% 100%; transition: transform .12s steps(2); }
.cat img { display: block; width: 100%; height: auto; animation: catFace 36s step-end infinite; }
.cat:hover { transform: scale(1.01); }
.cat:hover img { filter: drop-shadow(2px 0 0 #fff) drop-shadow(-2px 0 0 #fff) drop-shadow(0 2px 0 #fff) drop-shadow(0 -2px 0 #fff); }
.cat.is-petted { animation: catPop .3s ease-out; }
.cat-note {
  position: absolute; left: 50%; bottom: 108%; transform: translateX(-50%);
  font-family: var(--pixel); font-size: 9px; color: var(--ink); background: var(--cream);
  padding: 8px 10px; white-space: nowrap; pointer-events: none;
  box-shadow: 0 0 0 3px var(--ink), 0 4px 0 3px var(--ink);
  animation: noteIn 1.4s ease-in-out forwards;
}
@keyframes catWalk { 0% { left: 88%; } 50% { left: 6%; } 100% { left: 88%; } }
@keyframes catFace { 0%, 49.99% { transform: scaleX(1); } 50%, 100% { transform: scaleX(-1); } }
@keyframes catPop { 0% { transform: scale(1); } 40% { transform: scale(1.1); } 100% { transform: scale(1); } }
@keyframes noteIn { 0% { opacity: 0; transform: translate(-50%, 10px) scale(.6); } 12% { opacity: 1; transform: translate(-50%, 0) scale(1); } 85% { opacity: 1; transform: translate(-50%, 0); } 100% { opacity: 0; transform: translate(-50%, -14px); } }
@media (hover: none) {
  .cat:hover { transform: none; }
  .cat:hover img { filter: none; }
}

/* Sections */
section { padding: 56px 0; }
section.alt { background: var(--blush); }
section.dark { background: var(--ink); color: var(--cream); }
section.dark .eyebrow { color: var(--yellow); }
section.dark .muted { color: #d9c3b2; }
.section-head { max-width: var(--measure); margin-bottom: 32px; }

/* Steps */
.steps { display: grid; gap: 18px; counter-reset: step; list-style: none; padding: 0; margin: 0; }
.step { background: var(--white); padding: 26px 22px 22px; box-shadow: var(--shadow); position: relative; }
.step::before {
  counter-increment: step; content: counter(step);
  position: absolute; top: -18px; left: 18px;
  width: 40px; height: 40px; display: grid; place-items: center;
  background: var(--yellow); font-family: var(--pixel); font-size: 12px; box-shadow: 0 0 0 3px var(--ink);
}
.step h3 { margin-top: 6px; }
.step p { margin: 0; color: var(--muted); }

/* Pricing */
.price-card { background: var(--white); color: var(--ink); padding: 30px 24px; box-shadow: 0 0 0 4px var(--ink), 0 0 0 10px var(--yellow), 0 0 0 14px var(--ink), 0 14px 0 14px var(--ink); margin: 16px 14px 34px; }
.price { font-family: var(--pixel); font-size: 2.2rem; line-height: 1; margin: 6px 0 4px; color: var(--hot); }
.price small { font-size: 10px; color: var(--muted); display: block; margin-top: 12px; }
.checks { list-style: none; padding: 0; margin: 22px 0 26px; display: grid; gap: 10px; }
.checks li { padding-left: 32px; position: relative; }
.checks li::before { content: ''; position: absolute; left: 0; top: 6px; width: 16px; height: 16px; background: var(--pink); box-shadow: 0 0 0 3px var(--ink); }
.recipient-note { font-size: .95rem; color: var(--muted); margin: 14px 0 0; }

/* Lost link form */
.lost { max-width: 34rem; }
.field { display: grid; gap: 10px; margin: 0 0 16px; }
.field span { font-family: var(--pixel); font-size: 9px; text-transform: uppercase; }
.field input {
  width: 100%; min-height: 56px; padding: 0 16px; border: 0;
  /* Never under 16px: iOS Safari zooms the page when a smaller input is focused. */
  font: inherit; font-size: max(16px, 1.1rem); color: var(--ink); background: var(--white);
  box-shadow: 0 0 0 3px var(--ink);
}

/* Footer */
footer { padding: 36px 0 48px; font-size: .95rem; color: var(--muted); }
footer .wrap { display: grid; gap: 12px; }
footer a { color: var(--ink); }

/* Floating balloon */
@keyframes bob { 0%, 100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-12px) rotate(2deg); } }
.balloon { width: 72px; animation: bob 4.5s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) {
  .balloon { animation: none; }
  html { scroll-behavior: auto; }
  .btn { transition: none; }
  .buy { animation: none; }
  .hero-balloons { display: none; }
  .cat-track { animation: none; left: 8%; }
  .cat img { animation: none; }
}

/* Phones: the hero text runs a size smaller so the headline and lead fit comfortably. */
@media (max-width: 719px) {
  .hero .eyebrow { font-size: 8px; text-align: center; margin-bottom: 8px; }
  .hero h1 { font-size: clamp(1.7rem, 7vw, 2.2rem); text-align: center; }
  .hero .lead { font-size: .85rem; padding: 0 20px; }
  /* The three step cards run smaller too; the section heading keeps its size. */
  .steps { gap: 16px; }
  .step { padding: 20px 16px 16px; }
  .step::before { top: -14px; left: 14px; width: 32px; height: 32px; font-size: 10px; }
  .step h3 { font-size: 1.05rem; margin-top: 4px; }
  .step p { font-size: .9rem; line-height: 1.5; }
}

/* Desktop */
@media (min-width: 720px) {
  :root { --gutter: 28px; }
  .brand img { height: 42px; }
  .header-btn { min-height: 42px; padding: 0 20px; font-size: .95rem; }
  .header-btn-long { display: inline; }
  .header-btn-short { display: none; }
  .hero { padding: calc(var(--header-h) + 64px) 0 104px; }
  .hero .wrap { align-items: center; text-align: center; }
  .hero h1 { max-width: 22ch; }
  .hero .frame { order: 0; width: min(100%, 880px); margin: 22px auto 40px; }
  .hero .lead { order: 0; }
  .hero-actions { flex-direction: row; flex-wrap: wrap; justify-content: center; margin: 26px 0 18px; order: 0; }
  .trust { display: block; }
  .hero-secondary { display: inline-flex; }
  section { padding: 80px 0; }
  .steps { grid-template-columns: repeat(3, 1fr); gap: 26px; }
  .pricing .wrap { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; }
  .price-card { margin: 14px; }
  footer .wrap { grid-template-columns: 1fr auto; align-items: center; }
}

/* Checkout dialog (index.html #checkout, app.js). The page is 8-bit on purpose; the
   checkout deliberately is not. A clean card, with a small pixel band on top to tie it in. */
.checkout { border: 0; padding: 0; margin: auto; width: min(100% - 2 * var(--gutter), 440px); max-height: calc(100% - 32px); overflow: auto; background: var(--white); color: var(--ink); border-radius: 16px; box-shadow: 0 24px 60px rgba(26, 15, 10, .35), 0 0 0 1px rgba(58, 31, 15, .08); font-family: var(--body); }
.checkout::backdrop { background: rgba(26, 15, 10, .6); backdrop-filter: blur(2px); }
.checkout form { position: relative; }
.checkout-head { position: relative; height: 84px; overflow: hidden; display: grid; place-items: center; background-color: var(--blush); background-image: linear-gradient(45deg, rgba(255,255,255,.22) 25%, transparent 25%, transparent 75%, rgba(255,255,255,.22) 75%), linear-gradient(45deg, rgba(255,255,255,.22) 25%, transparent 25%, transparent 75%, rgba(255,255,255,.22) 75%); background-size: 16px 16px; background-position: 0 0, 8px 8px; border-bottom: 3px solid var(--ink); }
.checkout-head img { position: absolute; top: 10px; animation: bob 4.5s ease-in-out infinite; }
.checkout-brand { position: relative; font-family: var(--pixel); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink); background: var(--cream); padding: 10px 14px; box-shadow: 0 0 0 3px var(--ink); }
.checkout-close { position: absolute; top: 12px; right: 12px; width: 32px; height: 32px; border: 0; border-radius: 50%; background: rgba(255,255,255,.85); color: var(--ink); font: 700 22px/32px var(--body); cursor: pointer; box-shadow: 0 1px 3px rgba(26,15,10,.25); }
.checkout-close:hover { background: var(--white); }
.checkout-body { padding: 22px 24px 24px; display: grid; gap: 14px; }
.checkout-body h2 { font-size: 1.25rem; margin: 0; letter-spacing: 0; }
.checkout-summary { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 14px 16px; background: var(--paper); border: 1px solid #efe4d8; border-radius: 10px; }
.checkout-summary div { display: grid; gap: 2px; }
.checkout-summary div strong { font-size: 1rem; }
.checkout-summary div span { font-size: .85rem; color: var(--muted); }
.checkout-amount { font-size: 1.25rem; font-weight: 900; white-space: nowrap; }
.checkout-field { display: grid; gap: 6px; margin-top: 4px; }
.checkout-field span { font-size: .9rem; font-weight: 700; color: #4a3428; }
.checkout-field input { width: 100%; min-height: 46px; padding: 0 14px; border: 1px solid #d9cfc4; border-radius: 8px; font: inherit; font-size: max(16px, 1rem); color: var(--ink); background: var(--white); box-shadow: 0 1px 2px rgba(26,15,10,.05); transition: border-color .12s, box-shadow .12s; }   /* 16px floor: iOS zooms on smaller inputs */
.checkout-field input:focus { outline: none; border-color: var(--pink); box-shadow: 0 0 0 3px rgba(242,107,160,.25); }
.checkout-hint { margin: -6px 0 0; font-size: .85rem; color: var(--muted); }
.payment-element { min-height: 120px; }
.checkout-error { margin: 0; padding: 10px 14px; background: #fff0f5; color: var(--hot); font-size: .9rem; font-weight: 700; border: 1px solid #f7c6da; border-radius: 8px; }
.checkout-pay { width: 100%; min-height: 50px; border: 0; border-radius: 10px; background: var(--pink); color: var(--white); font: 800 1.05rem var(--body); cursor: pointer; box-shadow: 0 6px 16px rgba(242,107,160,.35); transition: transform .12s, background .12s, box-shadow .12s; }
.checkout-pay:hover { background: var(--pink-hover); transform: translateY(-1px); }
.checkout-pay:active { transform: translateY(0); }
.checkout-pay[disabled] { background: #e9c3d3; box-shadow: none; cursor: default; transform: none; }
.checkout-note { margin: 0; display: flex; align-items: center; justify-content: center; gap: 6px; font-size: .8rem; color: var(--muted); text-align: center; }
.checkout-note svg { flex: none; }
@media (prefers-reduced-motion: reduce) { .checkout-head img { animation: none; } }

/* ---- checkout agreement box. Same size and colour as the dialog's other text on purpose:
   a consent line has to be as easy to read as everything around it. */
.checkout-agree { display: flex; align-items: flex-start; gap: 10px; margin: 0; font-size: .9rem; line-height: 1.45; color: var(--ink); cursor: pointer; }
.checkout-agree input { flex: none; width: 20px; height: 20px; margin: 1px 0 0; font-size: 16px; accent-color: var(--pink); cursor: pointer; }
.checkout-agree a { color: var(--ink); font-weight: 700; }

/* ---- terms modal: a frame around /terms, over the checkout dialog. */
.terms-modal { border: 0; padding: 0; margin: auto; width: min(100% - 2 * var(--gutter), 720px); height: min(100% - 32px, 860px); background: var(--white); border-radius: 16px; box-shadow: 0 24px 60px rgba(26, 15, 10, .35), 0 0 0 1px rgba(58, 31, 15, .08); overflow: hidden; }
.terms-modal::backdrop { background: rgba(26, 15, 10, .6); backdrop-filter: blur(2px); }
.terms-modal iframe { display: block; width: 100%; height: 100%; border: 0; }
.terms-modal .checkout-close { background: rgba(255,255,255,.95); box-shadow: 0 0 0 1px rgba(0,0,0,.12), 0 1px 3px rgba(26,15,10,.25); }