/* Wish4Gift marketing site.
   Festive but professional: the brand-mark purple/pink/gold carried through
   the whole page, generous whitespace, motion that never carries meaning. */

.gift-preview { padding: 32px 0 48px; background: var(--purple-50); border-block: 1px solid var(--line); }
.gift-preview-heading { display: flex; align-items: end; justify-content: space-between; gap: 24px; margin-bottom: 24px; }
.gift-preview-heading h2 { font-size: clamp(1.5rem, 3vw, 2rem); margin: 0; max-width: 700px; }
.gift-preview-heading p:not(.eyebrow) { color: var(--muted); max-width: 310px; margin: 0; font-size: .95rem; }
.gift-preview-filters { display: flex; gap: 12px; overflow-x: auto; padding: 3px 3px 10px; }
.gift-preview-filters label { display: grid; gap: 7px; flex: 1; min-width: 170px; font-size: .85rem; font-weight: 650; }
.gift-preview-filters select { width: 100%; min-height: 46px; padding: 10px 32px 10px 12px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); color: var(--ink); font: inherit; font-size: 1rem; }
.gift-preview-status { margin: 8px 0 12px; min-height: 1.5em; color: var(--muted); font-size: .85rem; }
.gift-preview-row { display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 80px) / 6); gap: 16px; overflow-x: auto; list-style: none; padding: 3px 3px 16px; margin: 0 -3px; scroll-snap-type: x proximity; }
.gift-preview-row:empty { min-height: 190px; }
.gift-preview-row li { min-width: 0; scroll-snap-align: start; }
.gift-preview-card { height: 100%; display: flex; flex-direction: column; color: var(--ink); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; text-decoration: none; transition: border-color .15s, box-shadow .15s; }
.gift-preview-card:hover { border-color: var(--purple-500); box-shadow: 0 4px 16px rgb(104 71 245 / .12); }
.gift-preview-image { position: relative; height: 160px; flex: 0 0 160px; display: grid; place-items: center; font-size: 2.5rem; background: var(--surface); }
.gift-preview-image img { position: absolute; inset: 0; width: 100%; height: 100%; padding: 12px; object-fit: contain; background: var(--surface); }
.gift-preview-card h3 { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; font-size: .92rem; line-height: 1.4; min-height: 2.8em; margin: 12px 12px 8px; }
.gift-preview-price { color: var(--purple-700); font-size: 1rem; margin: auto 12px 12px; }
.gift-preview-action { font-size: .85rem; font-weight: 650; color: var(--purple-700); margin: 0 12px 5px; }
.gift-preview-card small { font-size: .7rem; color: var(--muted); margin: 0 12px 14px; overflow-wrap: anywhere; }
.gift-preview-footer { text-align: center; margin-top: 18px; }
.gift-preview-footer .disclosure { max-width: 650px; margin: 14px auto 0; }
@media (max-width: 1000px) { .gift-preview-row { grid-auto-columns: 210px; } }
@media (max-width: 600px) { .gift-preview-heading { display: block; } .gift-preview-heading p:not(.eyebrow) { margin-top: 12px; max-width: none; } .gift-preview-footer .btn { width: 100%; } .gift-preview-filters label { min-width: 165px; } }

@font-face {
  font-family: "Inter";
  src: url("/assets/fonts/InterVariable-4.1.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Shared Wish4Gift design tokens — keep in sync with docs/DESIGN_TOKENS.md.
     The same block lives in app/src/styles.css and web/src/styles.css; the
     surfaces deploy independently, so the block is duplicated on purpose. */

  /* Neutrals: lavender-tinted. */
  --ink: #241f33;
  --ink-soft: #453e59;
  --muted: #625c72;
  --line: #e6e2ef;
  --line-soft: #f0edf7;
  --page: #faf9fc;
  --page-alt: #f4f2fa;
  --surface: #ffffff;
  --surface-2: #faf9fd;
  --white: #fff;

  /* Brand purple, from the brand-mark gradient (#8063ff → #5635e5). */
  --purple-800: #3f22b8;
  --purple-700: #5635e5;
  --purple-600: #6847f5; /* primary action; white text 5.5:1 */
  --purple-500: #8063ff; /* decorative only */
  --purple-100: #efeafe;
  --purple-50: #f7f4ff;

  /* Festive pink, from the brand-mark dot (#ff5c8a). */
  --pink-700: #c2255c;
  --pink-600: #d6336c; /* actionable pink; white text 4.6:1 */
  --pink-500: #ff5c8a; /* decorative only — never text-bearing */
  --pink-100: #ffe4ec;

  /* Gold, from the brand-mark bow (#ffb547). */
  --gold-500: #ffb547; /* decorative fills; pair with --gold-ink for text */
  --gold-100: #fff3dd;
  --gold-ink: #7a5410;

  /* Semantic. */
  --success: #2e7d5b;
  --success-soft: #e3f2ea;
  --danger: #b0334f;
  --danger-soft: #fbe9ee;

  /* Festive gradient — white text stays ≥4.5:1 across the whole run. */
  --gradient-festive: linear-gradient(120deg, #6847f5, #d6336c);
  --gradient-festive-soft: linear-gradient(120deg, #efeafe, #ffe4ec);
  --shadow-festive: 0 6px 18px rgb(104 71 245 / .22);

  /* Legacy aliases still referenced by older rules on this surface. */
  --purple: var(--purple-600);
  --purple-dark: var(--purple-700);
  --purple-soft: var(--purple-100);
  --green: var(--success);

  --radius-xs: 8px;
  --radius-sm: 12px;
  --radius: 16px;
  --radius-lg: 24px;
  --radius-pill: 999px;
  --shell: 1160px;

  color: var(--ink);
  background: var(--page);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-optical-sizing: auto;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  :root { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}

* { box-sizing: border-box; }
html { scroll-padding-top: 92px; }
body { margin: 0; min-width: 320px; background: var(--page); }
body, button, select, input { font: inherit; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
h1, h2, h3 { margin: 0; letter-spacing: -.035em; line-height: 1.1; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }

:focus-visible {
  outline: 2px solid var(--purple);
  outline-offset: 3px;
  border-radius: 4px;
}

.shell { width: min(var(--shell), calc(100% - 40px)); margin-inline: auto; }
.center { text-align: center; }

.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;
}

/* The roulette toggles its card with the `hidden` attribute, and a component
   rule that sets `display` outranks the browser default for it. Without this
   guard the empty card and its blank image box render on every first paint. */
[hidden] { display: none !important; }

.skip-link {
  position: fixed; z-index: 200; top: 12px; left: 12px;
  border-radius: var(--radius-sm); background: var(--ink); color: var(--white);
  padding: 12px 18px; font-weight: 600; text-decoration: none;
  transform: translateY(-180%); transition: transform .18s ease;
}
.skip-link:focus { transform: translateY(0); }

/* ---------- buttons ---------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid transparent; border-radius: 999px;
  padding: 11px 20px; font-size: .93rem; font-weight: 600;
  text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: background-color .16s ease, border-color .16s ease, color .16s ease, transform .16s ease;
}
.btn-lg { padding: 15px 28px; font-size: 1rem; }
.btn-primary { background: var(--purple-600); color: var(--white); }
.btn-primary:hover { background: var(--purple-800); }
.btn-outline { border-color: var(--line); background: var(--white); color: var(--ink); }
.btn-outline:hover { border-color: var(--purple); color: var(--purple-dark); }
.btn-ghost { color: var(--ink-soft); }
.btn-ghost:hover { color: var(--purple-dark); background: var(--purple-soft); }

.link-arrow {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 22px;
  color: var(--purple-dark); font-weight: 600; font-size: .95rem; text-decoration: none;
}
.link-arrow::after { content: "→"; transition: transform .16s ease; }
.link-arrow:hover::after { transform: translateX(4px); }

/* ---------- header ---------- */

.site-header {
  position: sticky; z-index: 60; top: 0;
  border-bottom: 1px solid transparent;
  background: color-mix(in srgb, var(--page) 0%, transparent);
  transition: background-color .2s ease, border-color .2s ease;
}
.site-header.is-scrolled {
  border-color: var(--line);
  background: color-mix(in srgb, var(--page) 92%, transparent);
  backdrop-filter: blur(16px);
}
.header-inner {
  min-height: 76px; display: flex; align-items: center; gap: 28px;
}
.brand {
  display: inline-flex; align-items: center; gap: 10px; flex: none;
  font-size: 1.1rem; font-weight: 700; letter-spacing: -.03em; text-decoration: none;
}
.site-nav { display: flex; gap: 26px; margin-inline: auto; }
.site-nav a {
  position: relative; color: var(--ink-soft); font-size: .92rem; font-weight: 500; text-decoration: none;
}
.site-nav a::after {
  content: ""; position: absolute; inset: auto 0 -7px 0; height: 2px; border-radius: 2px;
  background: var(--purple); transform: scaleX(0); transition: transform .16s ease;
}
.site-nav a:hover::after, .site-nav a:focus-visible::after { transform: scaleX(1); }

.header-actions { display: flex; align-items: center; gap: 10px; flex: none; }

.lang-select { position: relative; display: inline-flex; }
.lang-select::after {
  content: ""; position: absolute; top: 50%; right: 12px; width: 7px; height: 7px;
  border-right: 1.5px solid var(--purple-dark); border-bottom: 1.5px solid var(--purple-dark);
  transform: translateY(-70%) rotate(45deg); pointer-events: none;
}
.lang-select select {
  appearance: none; min-width: 74px;
  border: 1px solid var(--line); border-radius: var(--radius-sm); background: rgb(255 255 255 / 80%);
  padding: 8px 30px 8px 12px; color: var(--purple-dark);
  font-size: .82rem; font-weight: 600; letter-spacing: .03em; cursor: pointer;
}
.lang-select select:hover { border-color: var(--purple); }
.lang-fallback { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.lang-fallback a { color: var(--purple-dark); font-size: .8rem; font-weight: 600; }

.nav-toggle {
  display: none; width: 42px; height: 42px; flex: none;
  border: 0; border-radius: var(--radius-sm); background: var(--purple-soft); padding: 11px; cursor: pointer;
}
.nav-toggle span { display: block; height: 2px; margin: 4px 0; border-radius: 2px; background: var(--purple-dark); }

.mobile-nav { border-top: 1px solid var(--line); background: var(--page); padding: 18px 0 24px; }
.mobile-nav .shell { display: grid; gap: 6px; }
.mobile-nav a:not(.btn) { padding: 12px 4px; color: var(--ink); font-weight: 500; text-decoration: none; }
.mobile-nav .btn { margin-top: 8px; }

/* ---------- hero ---------- */

.hero { padding: clamp(36px, 5vw, 64px) 0 clamp(40px, 6vw, 76px); background: var(--page-alt); }
/* The sample list moved to its own labelled section, so the hero is a single
   editorial column and the headline gets the full measure. */
.hero-grid {
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(300px, .95fr);
  align-items: center; gap: clamp(32px, 5vw, 72px);
}
.hero-copy h1 { max-width: 15ch; }
.hero-copy .lead { max-width: 54ch; }
.hero-visual { display: grid; place-items: center; }
.hero-visual img { width: min(100%, 480px); height: auto; }

@media (max-width: 900px) {
  .hero-grid { grid-template-columns: 1fr; gap: 28px; }
  /* The headline leads on a phone. The illustration sits under the buttons and
     stays small: full-width artwork above the copy pushed the actual message
     off the first screen. */
  .hero-visual { order: 2; }
  .hero-visual img { width: min(64%, 260px); }
}

@media (max-width: 560px) {
  .hero { padding-top: 36px; padding-bottom: 44px; }
  .hero-visual img { width: min(58%, 210px); }
}
.status-pill {
  display: inline-flex; align-items: center; gap: 8px;
  border: 1px solid var(--line); border-radius: 999px; background: rgb(255 255 255 / 60%);
  padding: 7px 14px; color: var(--ink-soft); font-size: .78rem; font-weight: 600;
}
.status-pill .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--green); }
.eyebrow {
  margin: 26px 0 12px; color: var(--purple);
  font-size: .74rem; font-weight: 700; letter-spacing: .13em; text-transform: uppercase;
}
.eyebrow.center { text-align: center; }
.hero-copy h1 { font-size: clamp(2.4rem, 4.5vw, 3.6rem); letter-spacing: -.045em; }
/* Gradient headline accent with a solid fallback for engines without
   background-clip: text support. */
.hero-copy h1 .accent { color: var(--purple-700); }
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .hero-copy h1 .accent {
    background: var(--gradient-festive);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
}
.lead {
  max-width: 60ch; margin-top: 24px; color: var(--muted);
  font-size: clamp(1.02rem, 1.3vw, 1.16rem); line-height: 1.68;
}
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.center-actions { justify-content: center; }
.hero-note { margin-top: 20px; color: var(--muted); font-size: .88rem; }

.hero-visual { display: grid; place-items: center; }
.card-stack { position: relative; width: min(100%, 400px); }
.card-stack::before {
  content: ""; position: absolute; inset: 18px -14px -18px 14px;
  border-radius: var(--radius-lg); background: color-mix(in srgb, var(--purple-700) 7%, transparent);
}
.mock-card {
  position: relative; border: 1px solid var(--line); border-radius: var(--radius-lg);
  background: var(--white); padding: 22px; box-shadow: 0 18px 46px rgb(38 36 43 / 7%);
}
.mock-card { margin: 0; }
.mock-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 14px;
  padding-bottom: 16px; margin-bottom: 6px; border-bottom: 1px solid var(--line-soft);
}
.mock-title { font-size: .98rem; font-weight: 600; letter-spacing: -.02em; }
.mock-meta { color: var(--muted); font-size: .78rem; white-space: nowrap; }
.mock-list { display: grid; }
.mock-row {
  display: grid; grid-template-columns: 64px minmax(0, 1fr) auto;
  align-items: center; gap: 13px; padding: 13px 0; border-bottom: 1px solid var(--line-soft);
}
.mock-row:last-child { border-bottom: 0; }
.mock-thumb {
  display: block; width: 64px; height: 64px; border-radius: 12px;
  object-fit: cover; background: var(--page-alt); border: 1px solid var(--line-soft);
}
.mock-text { display: grid; gap: 3px; min-width: 0; }
.mock-name {
  font-size: .88rem; font-weight: 500; letter-spacing: -.01em;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.mock-note { color: var(--muted); font-size: .76rem; }
.mock-right { display: grid; justify-items: end; gap: 5px; }
.mock-price { font-size: .84rem; font-weight: 600; }
.mock-state {
  border-radius: 999px; padding: 3px 9px; font-size: .68rem; font-weight: 600; letter-spacing: .02em;
}
.mock-state.free { background: var(--success-soft); color: var(--green); }
.mock-state.taken { background: var(--page-alt); color: var(--muted); }
.mock-row.is-taken .mock-name, .mock-row.is-taken .mock-price { color: var(--muted); }
.mock-foot {
  margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line-soft);
  color: var(--muted); font-size: .76rem; line-height: 1.55;
}

/* ---------- sections ---------- */

.section { padding: clamp(56px, 7vw, 96px) 0; }
.section h2 { font-size: clamp(1.75rem, 2.9vw, 2.7rem); }
.section-lead { max-width: 68ch; margin-top: 18px; color: var(--muted); font-size: 1.03rem; line-height: 1.7; }

.paths { background: var(--page); }
.paths h2 { margin-bottom: 44px; }
.path-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px; }
.path-card {
  border: 1px solid var(--line); border-radius: var(--radius-lg);
  background: var(--white); padding: clamp(28px, 3.4vw, 40px);
}
.path-card.accent-card { border-color: var(--line); background: linear-gradient(180deg, var(--purple-50), var(--white) 60%); }
.kicker { color: var(--purple); font-size: .82rem; font-weight: 600; }
.path-card h3 { margin: 12px 0 14px; font-size: clamp(1.35rem, 2vw, 1.75rem); }
.path-card p { color: var(--muted); line-height: 1.7; }

.steps-section { background: var(--page-alt); }
.steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 24px; margin-top: 44px; }
.step { border-top: 2px solid var(--purple-soft); padding-top: 22px; }
.step-num {
  display: grid; place-items: center; width: 34px; height: 34px; margin-bottom: 16px;
  border-radius: 50%; background: var(--gold-500); color: var(--gold-ink);
  font-size: .88rem; font-weight: 700;
}
.step h3 { font-size: 1.16rem; }
.step p { margin-top: 10px; color: var(--muted); line-height: 1.68; }

.features { display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); gap: 1px; margin-top: 44px; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; }
.feature { background: var(--white); padding: clamp(24px, 3vw, 34px); }
.feature h3 { font-size: 1.1rem; }
.feature p { margin-top: 10px; color: var(--muted); font-size: .96rem; line-height: 1.68; }

.ideas-section { background: var(--page-alt); }
.ideas-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(280px, .85fr); align-items: center; gap: clamp(36px, 6vw, 80px); }
.disclosure { margin-top: 22px; max-width: 56ch; color: var(--muted); font-size: .84rem; line-height: 1.6; }
.facet-demo {
  display: grid; gap: 16px; border: 1px solid var(--line); border-radius: var(--radius-lg);
  background: var(--white); padding: 28px;
}
.facet-row { display: grid; grid-template-columns: 1fr 96px; align-items: center; gap: 16px; color: var(--ink-soft); font-size: .9rem; font-weight: 500; }
.facet-bar { height: 8px; border-radius: 999px; background: var(--page-alt); overflow: hidden; }
.facet-bar i { display: block; height: 100%; border-radius: 999px; background: var(--purple); }
.facet-row:nth-child(1) .facet-bar i { width: 82%; }
.facet-row:nth-child(2) .facet-bar i { width: 61%; }
.facet-row:nth-child(3) .facet-bar i { width: 74%; }
.facet-row:nth-child(4) .facet-bar i { width: 45%; }

.privacy-list { display: grid; gap: 2px; margin-top: 40px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--line); overflow: hidden; }
.privacy-list li { position: relative; background: var(--white); padding: 22px 26px 22px 56px; color: var(--ink-soft); line-height: 1.65; }
.privacy-list li::before {
  content: ""; position: absolute; top: 27px; left: 26px; width: 9px; height: 9px;
  border-radius: 50%; border: 2px solid var(--purple);
}

.markets-section { background: var(--page-alt); scroll-margin-top: 84px; }
.market-groups { margin-top: 36px; }
.country-cloud { display: flex; flex-wrap: wrap; gap: 10px; }
.country {
  border: 1px solid var(--line); border-radius: 999px; background: var(--white);
  padding: 9px 17px; color: var(--ink-soft); font-size: .9rem; font-weight: 500;
}
.country.live { border-color: color-mix(in srgb, var(--success) 25%, var(--white)); background: var(--success-soft); color: var(--green); }

.faq-shell { max-width: 860px; }
.faq-list { margin-top: 36px; border-top: 1px solid var(--line); }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-item summary {
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: 22px 4px; font-size: 1.04rem; font-weight: 600; cursor: pointer; list-style: none;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: "+"; color: var(--purple); font-size: 1.4rem; font-weight: 400; line-height: 1; }
.faq-item[open] summary::after { content: "–"; }
.faq-answer { padding: 0 4px 24px; }
.faq-answer p { max-width: 70ch; color: var(--muted); line-height: 1.72; }

.cta-section { position: relative; isolation: isolate; overflow: hidden; background: var(--purple-dark); color: var(--white); text-align: center; }
/* Festive confetti, drawn in CSS so the strict img-src policy stays untouched. */
.cta-confetti {
  position: absolute; z-index: -1; inset: 0; opacity: .5;
  background-image:
    radial-gradient(circle at 12% 24%, var(--gold-500) 0 5px, transparent 6px),
    radial-gradient(circle at 88% 18%, var(--pink-500) 0 4px, transparent 5px),
    radial-gradient(circle at 24% 78%, var(--purple-500) 0 4px, transparent 5px),
    radial-gradient(circle at 74% 84%, var(--gold-500) 0 3px, transparent 4px),
    radial-gradient(circle at 46% 12%, var(--pink-500) 0 3px, transparent 4px),
    radial-gradient(circle at 62% 92%, var(--purple-500) 0 4px, transparent 5px),
    radial-gradient(circle at 6% 58%, var(--pink-500) 0 3px, transparent 4px),
    radial-gradient(circle at 94% 62%, var(--gold-500) 0 3px, transparent 4px);
}
.cta-inner { max-width: 640px; }
.cta-section h2 { font-size: clamp(1.9rem, 3.2vw, 2.9rem); }
.cta-section p { margin-top: 18px; color: rgb(255 255 255 / 76%); font-size: 1.04rem; line-height: 1.68; }
.cta-section .btn-primary { background: var(--white); color: var(--purple-dark); }
.cta-section .btn-primary:hover { background: var(--purple-50); }
.cta-section .btn-outline { border-color: rgb(255 255 255 / 34%); background: transparent; color: var(--white); }
.cta-section .btn-outline:hover { border-color: var(--white); color: var(--white); }

/* ---------- footer ---------- */

.site-footer { border-top: 1px solid var(--line); background: var(--page); padding: clamp(46px, 5vw, 68px) 0 30px; }
.footer-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(4, minmax(130px, 1fr)); gap: 32px; }
.footer-brand p { margin-top: 14px; max-width: 34ch; color: var(--muted); font-size: .93rem; line-height: 1.65; }
.footer-col h2 { font-size: .78rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.footer-col ul { display: grid; gap: 10px; margin-top: 16px; }
.footer-col a { color: var(--ink-soft); font-size: .93rem; text-decoration: none; }
.footer-col a:hover { color: var(--purple-dark); text-decoration: underline; }
.footer-lang .lang { margin-top: 14px; }
.footer-lang .lang ul { flex-wrap: wrap; }
.footer-lang .lang a { border: 1px solid var(--line); background: var(--white); }
.lang-disclaimer { margin-top: 14px; max-width: 32ch; color: var(--muted); font-size: .78rem; line-height: 1.6; }
.footer-base { margin-top: 44px; padding-top: 24px; border-top: 1px solid var(--line-soft); }
.footer-base p { color: var(--muted); font-size: .84rem; }

/* ---------- responsive ---------- */

@media (max-width: 1000px) {
  .hero-grid, .ideas-grid { grid-template-columns: 1fr; }
  .card-stack { width: min(100%, 420px); }
  .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* The full row -- brand, section links, language, the gift-ideas pill, sign
   in and the primary call to action -- needs up to 1106px in the longest
   language. Collapsing only at 820px left 821-1160px overflowing sideways: by
   93px in English and 320px in Ukrainian at 821px. The section links and sign
   in step into the menu first, because the page repeats them elsewhere. */
@media (max-width: 1180px) {
  .site-nav { display: none; }
  .header-actions .btn-ghost { display: none; }
  .nav-toggle { display: block; }
  .header-inner { justify-content: space-between; }
}

@media (max-width: 820px) {
  .header-actions .btn-primary { display: none; }
  /* The editorial gap is spare width the row no longer has: at 360px it was
     enough on its own to push the menu button past the right edge. */
  .header-inner { gap: 12px; }
  .header-actions { gap: 8px; }
  .lang { margin-left: auto; }
}

@media (max-width: 560px) {
  .footer-grid { grid-template-columns: 1fr; }
  .hero-actions .btn { width: 100%; }
  .btn-lg { padding: 14px 22px; }
  /* Four controls no longer fit on one line, and the overflow carried the
     menu button off the screen entirely. The pill steps aside because it is
     the only one of the four the menu already repeats; the language picker
     and the menu button exist nowhere else up here. */
  .header-actions .btn-ideas { display: none; }
}

/* The menu lists only what the header is not already showing at that width,
   so the same button never appears twice on one screen. */
@media (min-width: 561px) { .mobile-nav .btn-ideas { display: none; } }
@media (min-width: 821px) { .mobile-nav .btn-primary { display: none; } }
@media (min-width: 1181px) { .mobile-nav { display: none; } }

/* ---------- labelled example ---------- */

.example-section { background: var(--page); }
.example-layout {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(320px, 440px);
  align-items: center; gap: clamp(36px, 6vw, 80px);
}
.example-copy h2 { font-size: clamp(1.6rem, 2.6vw, 2.3rem); }
.mock-badge {
  border-radius: 999px; background: var(--purple-soft); color: var(--purple-dark);
  padding: 3px 10px; font-size: .68rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
}
.mock-meta-row { margin: 10px 0 2px; color: var(--muted); font-size: .8rem; }

/* Let visitors understand a list before asking them to create an account. */
#example { scroll-margin-top: 90px; }
.demo-hint { margin: 18px 0 24px; color: var(--muted); line-height: 1.6; }
.demo-reserve, .demo-reset {
  font: inherit; font-size: .78rem; min-height: 44px; padding: 8px 12px;
  border: 1px solid var(--line); border-radius: 10px; cursor: pointer;
  background: var(--purple-soft); color: var(--purple-700);
}
.demo-reserve:disabled { cursor: default; opacity: .6; }
.demo-status { color: var(--green); font-size: .85rem; line-height: 1.5; margin-top: 14px; }
.demo-status:empty { display: none; }
.demo-reset { margin-top: 12px; background: var(--white); }
.mock-name { white-space: normal; overflow: visible; overflow-wrap: anywhere; }
.mock-right { max-width: 160px; }
.ideas-section .hero-celebrations { margin-bottom: 24px; }
@media (max-width: 560px) {
  .hero-visual { display: none; }
  .hero-copy h1 { font-size: clamp(2rem, 8.5vw, 2.8rem); max-width: 18ch; }
  .mock-card { padding: 16px; }
  .mock-row { grid-template-columns: 56px minmax(0, 1fr); gap: 10px; }
  .mock-thumb { width: 56px; height: 56px; }
  .mock-right { grid-column: 2; max-width: none; justify-items: start; }
}

@media (max-width: 1000px) {
  .example-layout { grid-template-columns: 1fr; }
}

/* ---------- festive accents ---------- */

.paths .path-card.accent-card {
  background: linear-gradient(180deg, color-mix(in srgb, var(--pink-100) 55%, var(--white)), var(--white) 62%);
  border-color: var(--line);
}
.example-section .mock-card { box-shadow: 0 20px 50px color-mix(in srgb, var(--purple-700) 10%, transparent); }
.ideas-section { background: linear-gradient(180deg, var(--page-alt), var(--gold-100)); }

.step { border-top: 0; padding-top: 0; }
.step h3 { font-size: 1.16rem; }

/* A soft ribbon of confetti separating the celebratory sections. */
.ribbon-divider {
  height: 46px; margin-top: -46px; pointer-events: none;
  background-repeat: repeat-x; background-position: center;
  background-image:
    radial-gradient(circle at 10px 22px, color-mix(in srgb, var(--gold-500) 70%, transparent) 0 3px, transparent 4px),
    radial-gradient(circle at 46px 12px, color-mix(in srgb, var(--pink-500) 60%, transparent) 0 3px, transparent 4px),
    radial-gradient(circle at 82px 28px, color-mix(in srgb, var(--purple-500) 55%, transparent) 0 3px, transparent 4px),
    radial-gradient(circle at 118px 16px, color-mix(in srgb, var(--gold-500) 45%, transparent) 0 2px, transparent 3px);
  background-size: 150px 46px;
}

.path-card { position: relative; overflow: hidden; }
.path-card::after {
  content: ""; position: absolute; top: -40px; right: -40px; width: 130px; height: 130px;
  border-radius: 50%; background: color-mix(in srgb, var(--gold-500) 12%, transparent);
}
.path-card.accent-card::after { background: color-mix(in srgb, var(--pink-500) 10%, transparent); }

.feature { position: relative; }
/* Feature markers rotate pink / gold / purple. */
.feature h3::before {
  content: ""; display: block; width: 26px; height: 3px; margin-bottom: 12px;
  border-radius: 999px; background: var(--pink-500);
}
.feature:nth-child(3n+2) h3::before { background: var(--gold-500); }
.feature:nth-child(3n) h3::before { background: var(--purple-500); }

/* Gift roulette: the playful, interactive way into the catalogue. */
.roulette { text-align: center; }
.roulette-shell { max-width: 720px; }
.btn-fun {
  background: var(--gradient-festive);
  color: var(--white); border: 0; border-radius: 999px;
  box-shadow: var(--shadow-festive);
  transition: transform .15s ease, box-shadow .15s ease;
}
.btn-fun:hover { transform: translateY(-2px) scale(1.03); box-shadow: 0 10px 24px color-mix(in srgb, var(--purple-600) 35%, transparent); color: var(--white); }
.btn-fun.is-spinning { animation: roulette-wobble .5s ease infinite; }
@keyframes roulette-wobble {
  0%, 100% { transform: rotate(0); }
  25% { transform: rotate(-2.5deg); }
  75% { transform: rotate(2.5deg); }
}
.roulette-stage { margin-top: 22px; display: flex; flex-direction: column; align-items: center; gap: 18px; }
.roulette-market { display: grid; gap: 7px; color: var(--muted); font-size: .82rem; font-weight: 600; }
.roulette-market select {
  border: 1px solid var(--line); border-radius: 999px; background: var(--white);
  padding: 9px 14px; color: var(--ink-soft); font: inherit; cursor: pointer;
}
.roulette-card {
  display: flex; align-items: center; gap: 18px; text-align: left;
  max-width: 560px; width: 100%; padding: 16px; border-radius: 18px;
  border: 1px solid var(--line); background: var(--white);
  text-decoration: none; color: inherit;
  box-shadow: 0 8px 22px rgba(38, 36, 43, .08);
  transition: transform .16s ease, box-shadow .16s ease;
}
.roulette-card:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(38, 36, 43, .13); }
.roulette-card.is-fresh { animation: roulette-pop .3s ease; }
@keyframes roulette-pop {
  0% { opacity: 0; transform: translateY(8px) scale(.97); }
  100% { opacity: 1; transform: none; }
}
.roulette-media { flex: 0 0 auto; width: 120px; height: 120px; border-radius: 12px; overflow: hidden; background: var(--page-alt); }
.roulette-media img { width: 100%; height: 100%; object-fit: cover; }
.roulette-body { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.roulette-title { font-weight: 600; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.roulette-price { font-size: 1.15rem; font-weight: 700; color: var(--ink-soft); }
.roulette-shop { color: var(--muted); font-size: .92rem; }
.roulette-error { color: var(--danger); }
.roulette-note { margin-top: 18px; }
@media (max-width: 560px) {
  .roulette-card { flex-direction: column; text-align: center; }
  .roulette-body { align-items: center; }
}


/* The header's gift-ideas pill: same shape and gradient as the app's nav CTA,
   so both surfaces read as one product. */
.btn-ideas {
  background: var(--gradient-festive);
  color: var(--white); border: 0; border-radius: 999px;
  box-shadow: var(--shadow-festive);
  transition: transform .15s ease, box-shadow .15s ease;
  white-space: nowrap;
}
.btn-ideas:hover { transform: translateY(-1px) scale(1.03); box-shadow: 0 8px 20px color-mix(in srgb, var(--purple-600) 33%, transparent); color: var(--white); }
.mobile-nav .btn-ideas { text-align: center; }


/* Celebration chips: the hero answers "for which celebration?" directly and
   each chip lands in the app with that occasion already selected. */
.hero-celebrations { margin-top: 26px; }
.celebrations-label { font-weight: 600; margin: 0 0 10px; color: var(--ink-soft); }
.celebration-chips { display: flex; flex-wrap: wrap; gap: 10px; }
.celebration-chip {
  display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px;
  border-radius: 999px; border: 1px solid var(--line);
  background: var(--purple-50); color: var(--ink); text-decoration: none; font-weight: 500;
  transition: transform .14s ease, box-shadow .14s ease, border-color .14s ease;
}
/* Small decorative dot, alternating pink and gold along the row. */
.celebration-chip::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: var(--pink-500);
}
.celebration-chip:nth-child(even)::before { background: var(--gold-500); }
.celebration-chip:hover {
  transform: translateY(-2px);
  border-color: var(--purple-500);
  box-shadow: 0 6px 16px color-mix(in srgb, var(--purple-500) 20%, transparent);
}

/* A soft festive wash behind the hero. */
.hero {
  background:
    radial-gradient(560px 340px at 12% 8%, color-mix(in srgb, var(--purple-500) 12%, transparent), transparent 65%),
    radial-gradient(520px 320px at 88% 18%, color-mix(in srgb, var(--pink-500) 10%, transparent), transparent 65%);
}

/* Gently floating party emoji around the illustration. */
.hero-visual { position: relative; }
.float-emoji {
  position: absolute; font-size: 1.9rem; line-height: 1;
  animation: hero-float 5.5s ease-in-out infinite;
  filter: drop-shadow(0 3px 6px rgba(38, 36, 43, .12));
}
.fe-1 { top: 2%; left: 4%; animation-delay: 0s; }
.fe-2 { top: 12%; right: 2%; animation-delay: 1.3s; }
.fe-3 { bottom: 16%; left: 0; animation-delay: 2.4s; font-size: 1.5rem; }
.fe-4 { bottom: 4%; right: 8%; animation-delay: 3.2s; }
@keyframes hero-float {
  0%, 100% { transform: translateY(0) rotate(-2deg); }
  50% { transform: translateY(-12px) rotate(3deg); }
}
@media (prefers-reduced-motion: reduce) {
  .float-emoji { animation: none; }
}
@media (max-width: 720px) {
  .float-emoji { display: none; }
  .celebration-chips { gap: 8px; }
  .celebration-chip { padding: 8px 13px; font-size: .95rem; }
}

/* Original store artwork: preserve colours, proportions and clear space. */
.stores-section { padding: 48px 0 44px; background: var(--white); text-align: center; }
.stores-section h2 { font-size: clamp(1.25rem, 2.5vw, 1.65rem); }
.stores-note { max-width: 640px; margin: 12px auto 0; color: var(--muted); font-size: .9rem; }
.store-logos { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 16px; margin-top: 28px; padding: 0; list-style: none; }
.store-logos li { display: flex; align-items: center; justify-content: center; min-height: 88px; padding: 20px 12px; }
.store-logos img { display: block; width: 140px; height: 44px; max-width: 100%; object-fit: contain; }
@media (max-width: 900px) {
  .store-logos { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 480px) {
  .stores-section { padding: 36px 0; }
  .store-logos { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 20px; margin-top: 20px; }
}

/* ---------- 404 ---------- */
/* The site CSP is style-src 'self', so the error page uses classes, never
   style attributes. */

.error-main { min-height: 70vh; display: grid; place-items: center; text-align: center; }
.error-shell { max-width: 520px; }
.error-title { font-size: clamp(2rem, 4vw, 3rem); }
.error-lead { margin-inline: auto; }

/* ---------- legal document pages ---------- */
/* Privacy Policy and Terms of Service: one readable column, ~70ch measure,
   quiet h2 tiers. Tokens only — no colors of their own. */

.doc-main { padding: clamp(40px, 6vw, 72px) 0 clamp(56px, 7vw, 96px); }
.doc-page { max-width: 70ch; }
.doc-page h1 { font-size: clamp(2rem, 4vw, 2.9rem); }
.doc-effective {
  margin-top: 14px; color: var(--muted); font-size: .9rem; font-weight: 600;
  letter-spacing: .02em;
}
.doc-intro { margin-top: 18px; color: var(--ink-soft); font-size: 1.08rem; line-height: 1.75; }
.doc-section { margin-top: clamp(30px, 4vw, 44px); }
.doc-section h2 { font-size: 1.3rem; letter-spacing: -.015em; }
.doc-section p { margin-top: 12px; color: var(--ink-soft); line-height: 1.75; }
.doc-section p a, .doc-intro a { color: var(--purple-dark); text-decoration: underline; }
.doc-bullets { margin-top: 12px; display: grid; gap: 10px; list-style: disc; padding-left: 1.3em; }
.doc-bullets li { color: var(--ink-soft); line-height: 1.7; }
.doc-bullets li::marker { color: var(--purple-500); }
.doc-bullets li a { color: var(--purple-dark); text-decoration: underline; }