/* =========================================================
   I · Diorama — "The tiny factory"
   Soft pastel toy world: apricot sky, mint, butter, sky, lilac,
   with one deep berry accent for buttons.
   ========================================================= */

:root {
  --peach: #fde6d6;
  --peach-1: #fff3ea;
  --peach-2: #fbd8c3;
  --peach-3: #f3bf9f;
  --cream: #fffaf5;
  --mint: #cdeedd;
  --mint-2: #a6dfc4;
  --mint-3: #5cae8a;
  --butter: #fff0b8;
  --butter-2: #ffe17f;
  --butter-3: #e2ae2c;
  --sky: #d3e7f8;
  --sky-2: #a7cdee;
  --sky-3: #5f97cb;
  --lilac: #e6ddfa;
  --lilac-2: #cbbbf1;
  --lilac-3: #8d74d2;
  --berry: #c7365a;
  --berry-2: #9f2346;
  --berry-soft: #f8c9d4;
  --ink: #45304b;
  --ink-2: #6b5470;
  --line: rgba(69, 48, 75, 0.13);
  --sh: 92, 52, 84;

  --r-xl: 40px;
  --r-lg: 30px;
  --r-md: 22px;
  --r-sm: 14px;
  --gutter: 16px;
  --wrap: 1240px;
  --hdr-h: 76px;

  --font-display: "Fredoka", "Baloo Bhaijaan 2", ui-rounded, system-ui, sans-serif;
  --font-text: "Nunito", "Baloo Bhaijaan 2", ui-rounded, system-ui, sans-serif;
  --spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --soft: cubic-bezier(0.22, 1, 0.36, 1);

  /* Room-view theming (shared module) */
  --rv-bg: #fde6d6;
  --rv-surface: #fffaf5;
  --rv-text: #45304b;
  --rv-muted: #6b5470;
  --rv-line: rgba(69, 48, 75, 0.16);
  --rv-accent: #c7365a;
  --rv-accent-text: #ffffff;
  --rv-radius: 22px;
  --rv-font: var(--font-text);
  --rv-font-display: var(--font-display);
}

:root:lang(ar) {
  --font-display: "Baloo Bhaijaan 2", "Fredoka", system-ui, sans-serif;
  --font-text: "Baloo Bhaijaan 2", "Nunito", system-ui, sans-serif;
}

@media (min-width: 720px) {
  :root { --gutter: 32px; --hdr-h: 84px; }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--hdr-h) + 12px); }
body {
  margin: 0;
  background: var(--peach);
  color: var(--ink);
  font-family: var(--font-text);
  font-size: 1.0625rem;
  line-height: 1.6;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
}
:lang(ar) body { line-height: 1.8; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
button, input, select { font: inherit; color: inherit; }
button { cursor: pointer; }
h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 600; margin: 0; line-height: 1.05; letter-spacing: -0.01em; }
:lang(ar) h1, :lang(ar) h2, :lang(ar) h3, :lang(ar) h4 { line-height: 1.3; letter-spacing: 0; font-weight: 700; }
p { margin: 0; }
[hidden] { display: none !important; }

.sr-only {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip {
  position: fixed; inset-inline-start: 16px; top: -80px; z-index: 100;
  background: var(--ink); color: #fff; padding: 10px 18px; border-radius: 999px; text-decoration: none;
  font-weight: 700; transition: top 0.2s;
}
.skip:focus { top: 12px; }

:focus-visible {
  outline: 3px solid var(--berry);
  outline-offset: 3px;
  border-radius: 12px;
}

.wrap { width: 100%; max-width: calc(var(--wrap) + var(--gutter) * 2); margin-inline: auto; padding-inline: var(--gutter); }

/* ---------- Icons ---------- */
.ico { width: 1.25em; height: 1.25em; flex: none; }
[dir="rtl"] .flip-rtl { transform: scaleX(-1); }

/* =========================================================
   Buttons: chunky molded plastic that squashes when pressed
   ========================================================= */
.btn {
  --c: var(--berry);
  --c-hi: #e0607f;
  --lip: var(--berry-2);
  --fg: #fff;
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5em;
  min-height: 52px;
  padding: 0.7em 1.5em 0.75em;
  border: 0; border-radius: 999px;
  font-family: var(--font-display); font-weight: 600; font-size: 1.08rem; line-height: 1.1;
  color: var(--fg); text-decoration: none; white-space: nowrap;
  background: linear-gradient(180deg, var(--c-hi) 0%, var(--c) 55%);
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, 0.45),
    inset 0 -3px 0 rgba(0, 0, 0, 0.07),
    0 6px 0 var(--lip),
    0 16px 22px -8px rgba(var(--sh), 0.45);
  transform: translateY(0);
  transition: transform 0.22s var(--spring), box-shadow 0.22s var(--spring), filter 0.2s;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}
.btn:hover { transform: translateY(-2px); filter: saturate(1.08) brightness(1.03); }
.btn:active, .btn.is-pressed {
  transform: translateY(5px) scale(1.04, 0.93);
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, 0.35),
    inset 0 -2px 0 rgba(0, 0, 0, 0.06),
    0 1px 0 var(--lip),
    0 6px 10px -6px rgba(var(--sh), 0.5);
  transition-duration: 0.08s;
}
.btn--soft { --c: var(--cream); --c-hi: #ffffff; --lip: var(--peach-3); --fg: var(--ink); }
.btn--butter { --c: var(--butter-2); --c-hi: #fff2b8; --lip: #e7b94a; --fg: var(--ink); }
.btn--mint { --c: var(--mint-2); --c-hi: #d8f5e7; --lip: #7cc4a3; --fg: var(--ink); }
.btn--sm { min-height: 42px; padding: 0.5em 1.1em 0.55em; font-size: 0.98rem; }
.btn--block { width: 100%; }
.btn .ico { width: 1.15em; height: 1.15em; }

.iconbtn {
  display: inline-grid; place-items: center;
  width: 46px; height: 46px; border-radius: 50%; border: 0;
  background: linear-gradient(180deg, #fff, var(--cream));
  color: var(--ink);
  box-shadow: inset 0 2px 0 #fff, 0 4px 0 var(--peach-3), 0 10px 14px -8px rgba(var(--sh), 0.4);
  transition: transform 0.2s var(--spring), box-shadow 0.2s var(--spring);
}
.iconbtn:hover { transform: translateY(-1px); }
.iconbtn:active { transform: translateY(3px) scale(1.05, 0.92); box-shadow: inset 0 2px 0 #fff, 0 1px 0 var(--peach-3), 0 4px 8px -6px rgba(var(--sh), 0.4); }

.chip {
  display: inline-flex; align-items: center; gap: 0.45em;
  padding: 0.35em 0.9em 0.4em;
  border-radius: 999px;
  font-family: var(--font-display); font-weight: 600; font-size: 0.86rem; letter-spacing: 0.02em;
  background: var(--cream); color: var(--ink);
  box-shadow: inset 0 1px 0 #fff, 0 3px 0 var(--peach-2), 0 8px 14px -10px rgba(var(--sh), 0.5);
}
.chip--mint { background: var(--mint); box-shadow: inset 0 1px 0 #effcf5, 0 3px 0 var(--mint-2), 0 8px 14px -10px rgba(var(--sh), 0.5); }
.chip--butter { background: var(--butter); box-shadow: inset 0 1px 0 #fffbe6, 0 3px 0 var(--butter-2), 0 8px 14px -10px rgba(var(--sh), 0.5); }
.chip--lilac { background: var(--lilac); box-shadow: inset 0 1px 0 #f7f3ff, 0 3px 0 var(--lilac-2), 0 8px 14px -10px rgba(var(--sh), 0.5); }
.chip--sky { background: var(--sky); box-shadow: inset 0 1px 0 #f2f9ff, 0 3px 0 var(--sky-2), 0 8px 14px -10px rgba(var(--sh), 0.5); }
.chip .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--berry); box-shadow: 0 0 0 3px rgba(199, 54, 90, 0.18); }

.eyebrow { margin-bottom: 14px; }

/* =========================================================
   Header
   ========================================================= */
.hdr {
  position: fixed; inset-inline: 0; top: 0; z-index: 50;
  padding: 10px var(--gutter) 0;
  pointer-events: none;
}
.hdr__bar {
  pointer-events: auto;
  max-width: var(--wrap); margin-inline: auto;
  display: flex; align-items: center; gap: 14px;
  height: 58px; padding-inline: 10px 8px;
  border-radius: 999px;
  background: rgba(255, 250, 245, 0.8);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  backdrop-filter: blur(14px) saturate(1.2);
  box-shadow: inset 0 1px 0 #fff, 0 3px 0 rgba(243, 191, 159, 0.55), 0 14px 30px -18px rgba(var(--sh), 0.55);
}
@media (min-width: 720px) { .hdr { padding-top: 14px; } .hdr__bar { height: 64px; padding-inline: 12px 10px; } }

.logo { display: inline-flex; align-items: center; gap: 9px; text-decoration: none; flex: none; border-radius: 999px; padding-inline-end: 4px; }
.logo svg { width: 40px; height: 40px; transition: transform 0.35s var(--spring); }
.logo:hover svg { transform: translateY(-2px) rotate(-6deg); }
.logo__word { font-family: "Fredoka", var(--font-display); font-weight: 600; font-size: 1.12rem; line-height: 1; letter-spacing: -0.01em; white-space: nowrap; }
.logo__word small { display: block; font-size: 0.62rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-2); font-weight: 500; margin-top: 3px; }
@media (max-width: 380px) { .logo__word small { display: none; } }

.nav { display: none; }
.nav ul { display: flex; gap: 2px; list-style: none; margin: 0; padding: 0; }
.nav a {
  display: block; padding: 8px 13px; border-radius: 999px; text-decoration: none;
  font-family: var(--font-display); font-weight: 500; font-size: 0.98rem; white-space: nowrap;
  transition: background 0.2s, transform 0.25s var(--spring);
}
.nav a:hover { background: var(--butter); transform: translateY(-1px); }
.nav a[aria-current="page"] { background: var(--mint); }

.search { display: none; position: relative; flex: 1 1 200px; max-width: 280px; margin-inline-start: auto; }
.search input {
  width: 100%; height: 42px; border: 0; border-radius: 999px;
  padding-inline: 40px 14px;
  background: var(--peach-1);
  box-shadow: inset 0 2px 5px rgba(var(--sh), 0.16), inset 0 -1px 0 #fff;
  font-size: 0.95rem;
}
.search input::placeholder { color: var(--ink-2); opacity: 0.9; }
.search .ico { position: absolute; inset-inline-start: 13px; top: 50%; translate: 0 -50%; width: 18px; height: 18px; color: var(--ink-2); pointer-events: none; }
.search input:focus-visible { outline: 3px solid var(--berry); outline-offset: 2px; }

.hdr__tools { display: flex; align-items: center; gap: 8px; margin-inline-start: auto; }

.lang {
  position: relative; display: inline-flex; padding: 3px; border-radius: 999px;
  background: var(--peach-1);
  box-shadow: inset 0 2px 5px rgba(var(--sh), 0.16), inset 0 -1px 0 #fff;
}
.lang button {
  position: relative; z-index: 1; border: 0; background: none;
  min-width: 42px; height: 36px; padding: 0 10px; border-radius: 999px;
  font-family: var(--font-display); font-weight: 600; font-size: 0.9rem;
  transition: color 0.2s;
}
.lang button[lang="ar"] { font-family: "Baloo Bhaijaan 2", var(--font-display); font-size: 0.98rem; }
.lang button[aria-pressed="true"] { color: #fff; }
.lang__knob {
  position: absolute; top: 3px; bottom: 3px; inset-inline-start: 3px; width: calc(50% - 3px);
  border-radius: 999px; background: linear-gradient(180deg, var(--lilac-3), #7a61c2);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.35), 0 3px 0 #5f4aa3;
  transition: transform 0.38s var(--spring);
}
/* EN is the first button (inline-start). In Arabic the page is RTL, so AR sits to the left of EN. */
html[lang="ar"] .lang__knob { transform: translateX(-100%); }
.lang button { width: 54px; min-width: 0; padding: 0; }

.cart {
  position: relative; display: inline-grid; place-items: center;
  width: 46px; height: 46px; border-radius: 50%; text-decoration: none;
  background: linear-gradient(180deg, var(--butter), var(--butter-2));
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.7), 0 4px 0 #e7b94a, 0 10px 14px -8px rgba(var(--sh), 0.45);
  transition: transform 0.25s var(--spring);
}
.cart:hover { transform: translateY(-2px) rotate(-4deg); }
.cart .ico { width: 22px; height: 22px; }
.cart__count {
  position: absolute; top: -5px; inset-inline-end: -6px;
  min-width: 22px; height: 22px; padding: 0 6px; border-radius: 999px;
  display: grid; place-items: center;
  font-family: "Fredoka", var(--font-display); font-weight: 600; font-size: 0.78rem; line-height: 1;
  background: var(--berry); color: #fff;
  box-shadow: 0 2px 0 var(--berry-2), 0 0 0 2px var(--cream);
}
.cart.is-bump { animation: cartBump 0.6s var(--spring); }
@keyframes cartBump {
  0% { transform: scale(1); }
  25% { transform: scale(1.22, 0.82); }
  50% { transform: scale(0.9, 1.14) translateY(-4px); }
  75% { transform: scale(1.05, 0.96); }
  100% { transform: scale(1); }
}

.menu-btn { display: inline-grid; }

@media (min-width: 1100px) {
  .nav { display: block; }
  .search { display: block; }
  .menu-btn { display: none; }
  .hdr__tools { margin-inline-start: 0; }
}
@media (min-width: 720px) and (max-width: 1099px) {
  .search { display: block; }
  .hdr__tools { margin-inline-start: 0; }
}

@media (max-width: 719px) {
  .hdr__bar { gap: 8px; padding-inline: 8px 6px; height: 56px; }
  .logo { gap: 7px; }
  .logo svg { width: 36px; height: 36px; }
  .hdr .logo__word { font-size: 1rem; }
  .hdr .logo__word small { display: none; }
  .hdr__tools { gap: 6px; }
  /* compact language switch: show only the language you can switch to */
  .hdr .lang { padding: 0; background: none; box-shadow: none; }
  .hdr .lang__knob { display: none; }
  .hdr .lang button[aria-pressed="true"] { display: none; }
  .hdr .lang button {
    width: auto; min-width: 48px; height: 42px; padding: 0 12px; color: var(--ink);
    background: linear-gradient(180deg, #fff, var(--cream));
    box-shadow: inset 0 2px 0 #fff, 0 4px 0 var(--peach-3), 0 10px 14px -8px rgba(var(--sh), 0.4);
  }
  .hdr .cart, .hdr .iconbtn { width: 42px; height: 42px; }
}

/* Mobile sheet */
.sheet {
  position: fixed; inset: 0; z-index: 80;
  background: rgba(69, 48, 75, 0.28);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  display: flex; justify-content: flex-end; flex-direction: column;
}
.sheet__panel {
  background: var(--cream); border-radius: 32px 32px 0 0; padding: 22px var(--gutter) 30px;
  box-shadow: 0 -20px 40px -20px rgba(var(--sh), 0.5);
  animation: sheetUp 0.45s var(--soft);
}
@keyframes sheetUp { from { transform: translateY(100%); } to { transform: none; } }
.sheet__top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.sheet nav ul { list-style: none; margin: 0 0 16px; padding: 0; display: grid; gap: 8px; }
.sheet nav a {
  display: flex; align-items: center; justify-content: space-between; text-decoration: none;
  padding: 14px 18px; border-radius: 20px; font-family: var(--font-display); font-weight: 600; font-size: 1.2rem;
  background: var(--peach-1); box-shadow: inset 0 1px 0 #fff, 0 3px 0 var(--peach-2);
}
.sheet nav li:nth-child(2) a { background: var(--mint); box-shadow: inset 0 1px 0 #fff, 0 3px 0 var(--mint-2); }
.sheet nav li:nth-child(3) a { background: var(--butter); box-shadow: inset 0 1px 0 #fff, 0 3px 0 var(--butter-2); }
.sheet nav li:nth-child(4) a { background: var(--lilac); box-shadow: inset 0 1px 0 #fff, 0 3px 0 var(--lilac-2); }
.sheet .search { display: block; max-width: none; margin: 0; }

/* =========================================================
   Stage: hero + "How it works" share one pinned diorama
   ========================================================= */
.stage { position: relative; }
.stage__pin {
  position: sticky; top: 0;
  height: 100vh; height: 100svh;
  overflow: hidden;
  background:
    radial-gradient(60% 55% at 72% 22%, rgba(255, 255, 255, 0.75), rgba(255, 255, 255, 0) 70%),
    radial-gradient(70% 60% at 15% 100%, rgba(203, 187, 241, 0.45), rgba(203, 187, 241, 0) 70%),
    radial-gradient(60% 50% at 100% 90%, rgba(167, 205, 238, 0.45), rgba(167, 205, 238, 0) 70%),
    linear-gradient(180deg, #fff1e6 0%, var(--peach) 55%, #fadac6 100%);
}
.stage__canvas { position: absolute; inset: 0; }
.stage__canvas canvas { display: block; width: 100% !important; height: 100% !important; touch-action: pan-y; }
.stage__canvas.is-hot canvas { cursor: pointer; }

/* Tilt-shift: soft blur at the top and bottom edges */
.tilt { position: absolute; inset-inline: 0; height: 17%; pointer-events: none; z-index: 1;
  -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px); }
.tilt--top { top: 0; -webkit-mask-image: linear-gradient(180deg, #000 10%, transparent); mask-image: linear-gradient(180deg, #000 10%, transparent); }
.tilt--bottom { bottom: 0; -webkit-mask-image: linear-gradient(0deg, #000 10%, transparent); mask-image: linear-gradient(0deg, #000 10%, transparent); }
.vignette { position: absolute; inset: 0; pointer-events: none; z-index: 1;
  background: radial-gradient(120% 90% at 55% 50%, transparent 60%, rgba(214, 150, 130, 0.22) 100%); }

.stage__fallback {
  position: absolute; inset: 0; display: none; place-items: center; z-index: 0;
}
.stage.no-3d .stage__fallback { display: grid; }

.stage__flow { position: relative; z-index: 2; margin-top: -100vh; margin-top: -100svh; pointer-events: none; }
.stage__flow a, .stage__flow button, .stage__flow .stepcard, .stage__flow .hero__copy { pointer-events: auto; }

.panel {
  min-height: 100vh; min-height: 100svh;
  display: flex; flex-direction: column;
  padding: calc(var(--hdr-h) + 18px) var(--gutter) 28px;
  max-width: calc(var(--wrap) + var(--gutter) * 2); margin-inline: auto;
}

/* Hero copy */
.panel--hero { justify-content: flex-start; }
.hero__copy { max-width: 560px; }
.hero__copy h1 {
  font-size: clamp(2.35rem, 9.6vw, 5rem);
  line-height: 0.98; letter-spacing: -0.02em;
  margin: 12px 0 12px;
  text-wrap: balance;
}
:lang(ar) .hero__copy h1 { line-height: 1.25; letter-spacing: 0; font-size: clamp(2.2rem, 9vw, 4.4rem); }
.hero__copy h1 .soft { color: var(--berry); display: inline-block; }
.hero__where { font-family: var(--font-display); font-weight: 500; font-size: clamp(1.05rem, 2.4vw, 1.3rem); color: var(--ink); }
.hero__lede { margin-top: 10px; color: var(--ink-2); max-width: 46ch; font-size: 1.02rem; }
.hero__ctas { display: flex; flex-wrap: wrap; gap: 14px 12px; margin-top: 22px; }
.hero__poke { display: inline-flex; align-items: center; gap: 8px; margin-top: 18px; font-size: 0.9rem; color: var(--ink-2); font-weight: 700; }
.hero__poke .tapdot { width: 10px; height: 10px; border-radius: 50%; background: var(--berry); box-shadow: 0 0 0 0 rgba(199, 54, 90, 0.5); animation: tapPulse 2.2s infinite; }
@keyframes tapPulse { 0% { box-shadow: 0 0 0 0 rgba(199, 54, 90, 0.45); } 70% { box-shadow: 0 0 0 12px rgba(199, 54, 90, 0); } 100% { box-shadow: 0 0 0 0 rgba(199, 54, 90, 0); } }
.hero__scroll {
  margin-top: auto; align-self: center;
  display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px 8px 10px;
  border-radius: 999px; background: rgba(255, 250, 245, 0.75); text-decoration: none;
  font-family: var(--font-display); font-weight: 500; font-size: 0.92rem;
  box-shadow: 0 3px 0 rgba(243, 191, 159, 0.6);
}
.hero__scroll .ico { animation: nudge 1.8s var(--soft) infinite; }
@keyframes nudge { 0%, 100% { transform: translateY(-2px); } 50% { transform: translateY(3px); } }

@media (max-width: 899px) {
  .hero__copy { text-align: center; margin-inline: auto; }
  .hero__ctas { justify-content: center; }
  .hero__lede { margin-inline: auto; }
  .hero__poke { display: none; }
  .hero__lede { display: none; }
}
@media (max-width: 899px) and (min-height: 760px) {
  .hero__lede { display: block; font-size: 0.98rem; }
}
@media (min-width: 900px) {
  .panel--hero { justify-content: center; }
  .hero__scroll { position: absolute; bottom: 26px; inset-inline-start: 50%; translate: -50% 0; }
  [dir="rtl"] .hero__scroll { translate: 50% 0; }
  .panel--hero { position: relative; }
}

/* 3D markers that float over the island (hero only) */
.tags { position: absolute; inset: 0; z-index: 2; pointer-events: none; transition: opacity 0.4s; }
.tags.is-off { opacity: 0; }
.tags.is-off .tag { pointer-events: none; }
.tag {
  position: absolute; left: 0; top: 0;
  pointer-events: auto;
  display: inline-flex; align-items: center; gap: 6px;
  height: 34px; padding: 0 12px 0 5px;
  border: 0; border-radius: 999px;
  background: rgba(255, 250, 245, 0.92);
  font-family: var(--font-display); font-weight: 600; font-size: 0.82rem; white-space: nowrap;
  box-shadow: inset 0 1px 0 #fff, 0 3px 0 rgba(var(--sh), 0.16), 0 10px 16px -10px rgba(var(--sh), 0.6);
  transform: translate(-50%, -100%);
  will-change: transform;
  transition: background 0.2s;
}
.tag::after {
  content: ""; position: absolute; left: 50%; bottom: -6px; width: 12px; height: 12px; translate: -50% 0;
  background: inherit; clip-path: polygon(0 0, 100% 0, 50% 70%);
}
.tag__n {
  display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%;
  background: var(--berry); color: #fff; font-size: 0.8rem;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4);
}
.tag:hover { background: #fff; }
@media (max-width: 899px) {
  .tag { height: 28px; padding: 0 5px; }
  .tag__t { display: none; }
  .tag__n { width: 20px; height: 20px; font-size: 0.72rem; }
}

/* How it works */
.how { position: relative; }
.how__head.is-off { opacity: 0; pointer-events: none; }
.how__head > div { transition: opacity 0.3s; }
.how__head {
  transition: opacity 0.3s;
  position: sticky; top: calc(var(--hdr-h) + 12px); z-index: 3; height: 0;
  max-width: calc(var(--wrap) + var(--gutter) * 2); margin-inline: auto; padding-inline: var(--gutter);
}
.how__head > div {
  pointer-events: auto; display: inline-flex; flex-direction: column; align-items: flex-start; gap: 8px;
  padding: 12px 20px 14px 14px; border-radius: 26px;
  background: rgba(255, 248, 242, 0.8); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  box-shadow: inset 0 1px 0 #fff, 0 3px 0 rgba(243, 191, 159, 0.5), 0 14px 26px -18px rgba(var(--sh), 0.5);
}
@media (max-width: 899px) { .how__head { text-align: center; } .how__head > div { align-items: center; padding: 10px 16px 12px; } }
.how__head h2 { font-size: clamp(1.45rem, 3vw, 2.3rem); text-shadow: 0 2px 0 rgba(255, 255, 255, 0.7); }
.how__steps { list-style: none; margin: 0; padding: 0; }
.panel--step { justify-content: flex-end; }
@media (min-width: 900px) {
  .panel--step { justify-content: center; }
}

.stepcard {
  --c: var(--mint);
  --cd: var(--mint-2);
  position: relative;
  width: 100%; max-width: 430px;
  padding: 22px 22px 22px;
  border-radius: var(--r-lg);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0) 40%),
    var(--c);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.8), 0 8px 0 var(--cd), 0 30px 40px -22px rgba(var(--sh), 0.55);
}
.stepcard[data-tone="butter"] { --c: var(--butter); --cd: var(--butter-2); }
.stepcard[data-tone="sky"] { --c: var(--sky); --cd: var(--sky-2); }
.stepcard[data-tone="lilac"] { --c: var(--lilac); --cd: var(--lilac-2); }
.stepcard__top { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.stepcard__n {
  display: grid; place-items: center; width: 52px; height: 52px; border-radius: 18px; flex: none;
  background: var(--cream); font-family: "Fredoka", var(--font-display); font-weight: 600; font-size: 1.6rem;
  box-shadow: inset 0 -3px 0 rgba(var(--sh), 0.08), 0 4px 0 rgba(var(--sh), 0.14);
}
.stepcard__ico { width: 34px; height: 34px; color: var(--ink); opacity: 0.85; }
.stepcard__of { font-size: 0.8rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-2); }
:lang(ar) .stepcard__of { letter-spacing: 0; }
.stepcard h3 { font-size: clamp(1.45rem, 2.6vw, 1.95rem); margin-bottom: 6px; }
.stepcard p { color: var(--ink-2); font-size: 1rem; }
@media (max-width: 899px) {
  .stepcard { margin-inline: auto; padding: 18px; }
  .stepcard__n { width: 44px; height: 44px; font-size: 1.35rem; border-radius: 15px; }
}

.dots {
  position: absolute; z-index: 3; top: 50%; inset-inline-end: 22px; translate: 0 -50%;
  list-style: none; margin: 0; padding: 10px 8px; display: none; flex-direction: column; gap: 10px;
  background: rgba(255, 250, 245, 0.7); border-radius: 999px;
  box-shadow: 0 3px 0 rgba(243, 191, 159, 0.55);
  transition: opacity 0.35s, transform 0.35s var(--soft);
}
.dots.is-off { opacity: 0; transform: translateX(16px); pointer-events: none; }
[dir="rtl"] .dots.is-off { transform: translateX(-16px); }
.dots button {
  width: 30px; height: 30px; border-radius: 50%; border: 0; display: grid; place-items: center;
  font-family: "Fredoka", var(--font-display); font-weight: 600; font-size: 0.82rem;
  background: var(--peach-1); color: var(--ink-2);
  box-shadow: inset 0 2px 4px rgba(var(--sh), 0.15);
  transition: transform 0.3s var(--spring), background 0.2s, color 0.2s;
}
.dots button[aria-current="step"] { background: var(--berry); color: #fff; transform: scale(1.15); box-shadow: 0 3px 0 var(--berry-2); }
@media (min-width: 900px) { .dots { display: flex; } }

/* =========================================================
   Sections
   ========================================================= */
.sec { padding-block: clamp(64px, 9vw, 120px); position: relative; }
.sec__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px 32px; margin-bottom: clamp(28px, 4vw, 48px); }
.sec__head h2 { font-size: clamp(2rem, 4.6vw, 3.4rem); text-wrap: balance; }
.sec__head p { color: var(--ink-2); max-width: 44ch; }
.sec__title { max-width: 700px; }

/* Soft floating clay blobs behind sections */
.blobs { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: -1; }
.blobs span { position: absolute; border-radius: 50%; filter: blur(2px); opacity: 0.8; }

/* ---------- Collection: toy boxes ---------- */
.toys { display: grid; gap: 30px 22px; grid-template-columns: 1fr; }
@media (min-width: 620px) { .toys { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1080px) { .toys { grid-template-columns: repeat(4, 1fr); } }

.toybox {
  --box: var(--sky);
  --box-d: var(--sky-2);
  position: relative;
  display: flex; flex-direction: column;
  padding: 12px 12px 18px;
  border-radius: var(--r-lg);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.45), rgba(255, 255, 255, 0) 30%), var(--box);
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, 0.85),
    inset 0 -5px 0 rgba(var(--sh), 0.05),
    0 10px 0 var(--box-d),
    0 34px 40px -22px rgba(var(--sh), 0.5);
  transition: transform 0.4s var(--spring);
}
.toybox[data-tone="butter"] { --box: var(--butter); --box-d: var(--butter-2); }
.toybox[data-tone="mint"] { --box: var(--mint); --box-d: var(--mint-2); }
.toybox[data-tone="lilac"] { --box: var(--lilac); --box-d: var(--lilac-2); }
.toybox:hover { transform: translateY(-6px) rotate(-0.6deg); }
.toybox__brand {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 2px 6px 10px;
  font-family: "Fredoka", var(--font-display); font-weight: 600; font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-2);
}
:lang(ar) .toybox__brand { letter-spacing: 0; font-size: 0.78rem; }
.toybox__brand .mat { letter-spacing: 0.04em; }
.toybox__window {
  position: relative; overflow: hidden;
  aspect-ratio: 1 / 0.92;
  border-radius: 24px;
  background:
    radial-gradient(70% 28% at 50% 86%, rgba(var(--sh), 0.12), transparent 70%),
    linear-gradient(180deg, #fffdfb 0%, #fff6ef 58%, color-mix(in srgb, var(--box) 55%, #fff) 58.5%, color-mix(in srgb, var(--box) 70%, #fff) 100%);
  box-shadow: inset 0 7px 16px rgba(var(--sh), 0.2), inset 0 0 0 4px rgba(255, 255, 255, 0.85);
}
.toybox__window::after {
  content: ""; position: absolute; inset: -20%;
  background: linear-gradient(112deg, transparent 38%, rgba(255, 255, 255, 0.55) 45%, rgba(255, 255, 255, 0) 52%);
  transform: translateX(-40%);
  transition: transform 0.9s var(--soft);
  pointer-events: none;
}
.toybox:hover .toybox__window::after { transform: translateX(40%); }
.toybox__name { font-size: 1.3rem; margin: 16px 6px 6px; }
.toybox__name a { text-decoration: none; }
.toybox__name a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.toybox__desc { margin: 0 6px 14px; color: var(--ink-2); font-size: 0.95rem; line-height: 1.5; }
.toybox__row { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-inline: 6px; position: relative; z-index: 1; }

.thumb { position: absolute; inset: 0; display: grid; place-items: center; }
.thumb img { width: 92%; height: 92%; object-fit: contain; transition: transform 0.5s var(--spring); }
.thumb--wait::before {
  content: ""; width: 46%; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff, rgba(255, 255, 255, 0.2) 60%), color-mix(in srgb, var(--box, var(--card, var(--lilac))) 80%, #fff);
  box-shadow: inset 0 -10px 18px rgba(var(--sh), 0.12);
  animation: breathe 1.8s ease-in-out infinite;
}
@keyframes breathe { 0%, 100% { transform: scale(0.94); opacity: 0.7; } 50% { transform: scale(1); opacity: 1; } }
.toybox:hover .thumb img, .blister:hover .thumb img, .cat:hover .thumb img { transform: translateY(-6px) scale(1.04); }

/* material chip */
.mat {
  display: inline-flex; align-items: center; height: 24px; padding: 0 9px; border-radius: 999px;
  font-family: "Fredoka", var(--font-display); font-weight: 600; font-size: 0.74rem; letter-spacing: 0.06em;
  background: var(--butter); color: var(--ink); box-shadow: inset 0 -2px 0 rgba(var(--sh), 0.08);
}
.mat--petg { background: var(--sky); }

/* price sticker */
.price {
  font-family: "Fredoka", var(--font-display); font-weight: 600; font-size: 1.25rem; white-space: nowrap;
}
.sticker {
  position: absolute; z-index: 2;
  display: grid; place-items: center; text-align: center;
  width: 70px; height: 70px; border-radius: 50%;
  background: radial-gradient(circle at 35% 28%, #e86a88, var(--berry) 62%);
  color: #fff; line-height: 1;
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.35), 0 4px 0 var(--berry-2), 0 12px 16px -8px rgba(var(--sh), 0.5);
  transform: rotate(-10deg);
  transition: transform 0.4s var(--spring);
}
.sticker::before { content: ""; position: absolute; inset: 5px; border-radius: 50%; border: 1.5px dashed rgba(255, 255, 255, 0.55); }
.sticker small { display: block; font-size: 0.62rem; letter-spacing: 0.12em; font-weight: 600; opacity: 0.9; }
.sticker b { display: block; font-family: "Fredoka", var(--font-display); font-size: 1.32rem; font-weight: 600; margin-top: 2px; }
:lang(ar) .sticker small { letter-spacing: 0; font-size: 0.7rem; }
.toybox .sticker { top: 46px; inset-inline-end: 4px; }
.toybox:hover .sticker, .blister:hover .sticker { transform: rotate(6deg) scale(1.06); }

/* round add button */
.add {
  display: inline-grid; place-items: center; flex: none;
  width: 46px; height: 46px; border-radius: 50%; border: 0;
  background: linear-gradient(180deg, #e0607f, var(--berry) 60%); color: #fff;
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.4), 0 4px 0 var(--berry-2), 0 10px 14px -8px rgba(var(--sh), 0.55);
  transition: transform 0.22s var(--spring), box-shadow 0.22s var(--spring);
  position: relative; z-index: 2;
}
.add:hover { transform: translateY(-2px) rotate(90deg); }
.add:active { transform: translateY(3px) scale(1.08, 0.9); box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.4), 0 1px 0 var(--berry-2); }
.add .ico { width: 22px; height: 22px; }
.add.is-done { background: linear-gradient(180deg, #7fd4ad, var(--mint-3)); box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.4), 0 4px 0 #3f8f6c; }

.view-link {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-display); font-weight: 600; font-size: 0.95rem; text-decoration: none;
  padding: 6px 4px; border-radius: 10px;
}
.view-link .ico { width: 18px; height: 18px; transition: transform 0.3s var(--spring); }
.view-link:hover .ico { transform: translateX(4px); }
[dir="rtl"] .view-link:hover .ico { transform: scaleX(-1) translateX(4px); }

/* ---------- Trending: blister packs ---------- */
.packs { display: grid; gap: 34px 14px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 900px) { .packs { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 40px 22px; } }

.blister {
  --card: var(--mint);
  --card-d: var(--mint-2);
  position: relative;
  display: flex; flex-direction: column;
  padding: 30px 10px 14px;
  border-radius: 26px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0) 26%), var(--card);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.85), 0 6px 0 var(--card-d), 0 26px 30px -20px rgba(var(--sh), 0.5);
  transition: transform 0.45s var(--spring);
}
.blister[data-tone="sky"] { --card: var(--sky); --card-d: var(--sky-2); }
.blister[data-tone="butter"] { --card: var(--butter); --card-d: var(--butter-2); }
.blister[data-tone="lilac"] { --card: var(--lilac); --card-d: var(--lilac-2); }
.blister[data-tone="peach"] { --card: #ffe2d3; --card-d: var(--peach-3); }
.blister:hover { transform: translateY(-6px) rotate(0.6deg); }
/* euro hang slot */
.blister::before {
  content: ""; position: absolute; top: 11px; left: 50%; translate: -50% 0;
  width: 46px; height: 11px; border-radius: 99px;
  background: var(--peach);
  box-shadow: inset 0 2px 3px rgba(var(--sh), 0.28), 0 1px 0 rgba(255, 255, 255, 0.8);
}
.blister__flange {
  position: relative;
  padding: 6px; border-radius: 24px;
  background: rgba(255, 255, 255, 0.38);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.75);
}
.blister__bubble {
  position: relative; aspect-ratio: 1; overflow: hidden;
  border-radius: 20px 20px 24px 24px;
  background:
    radial-gradient(60% 20% at 50% 88%, rgba(var(--sh), 0.13), transparent 70%),
    radial-gradient(circle at 50% 38%, rgba(255, 255, 255, 0.85), rgba(255, 255, 255, 0.25) 72%),
    color-mix(in srgb, var(--card) 55%, #fff);
  box-shadow:
    inset 0 0 0 2px rgba(255, 255, 255, 0.85),
    inset 0 -16px 22px -12px rgba(255, 255, 255, 0.95),
    inset 0 12px 18px -12px rgba(var(--sh), 0.28),
    0 12px 16px -10px rgba(var(--sh), 0.35);
}
.blister__bubble::after {
  content: ""; position: absolute; top: 7%; inset-inline-start: 9%; width: 16%; height: 54%;
  border-radius: 99px; pointer-events: none;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0));
  transform: rotate(10deg); opacity: 0.75;
  transition: transform 0.6s var(--soft), opacity 0.4s;
}
.blister:hover .blister__bubble::after { transform: rotate(10deg) translateY(10%); opacity: 1; }
.blister .sticker { top: 18px; inset-inline-end: -6px; width: 60px; height: 60px; }
.blister .sticker b { font-size: 1.12rem; }
.blister__name { font-size: 1.08rem; margin: 14px 6px 3px; line-height: 1.15; }
.blister__name a { text-decoration: none; }
.blister__name a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.blister__seller { margin: 0 6px; color: var(--ink-2); font-size: 0.86rem; line-height: 1.35; }
.blister__row { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: auto; padding: 12px 6px 0; }
.blister .add { width: 40px; height: 40px; }
.blister .add .ico { width: 19px; height: 19px; }
@media (max-width: 899px) {
  .blister { padding: 28px 8px 12px; border-radius: 22px; }
  .blister .sticker { width: 52px; height: 52px; top: 14px; inset-inline-end: -8px; }
  .blister .sticker b { font-size: 0.98rem; }
  .blister .sticker small { font-size: 0.55rem; }
  .blister__name { font-size: 0.98rem; }
  .blister__seller { font-size: 0.8rem; }
}

/* ---------- Categories: chunky tiles ---------- */
.cats { display: grid; gap: 26px 14px; grid-template-columns: repeat(2, minmax(0, 1fr)); list-style: none; margin: 0; padding: 0; }
@media (min-width: 700px) { .cats { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .cats { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 22px; } }
.cat {
  --c: var(--mint); --cd: var(--mint-2);
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: flex-end;
  aspect-ratio: 1 / 1.05; padding: 12px 10px 16px; border-radius: 34px;
  text-decoration: none; text-align: center;
  background: radial-gradient(circle at 50% 30%, rgba(255, 255, 255, 0.75), rgba(255, 255, 255, 0) 60%), var(--c);
  box-shadow: inset 0 3px 0 rgba(255, 255, 255, 0.8), inset 0 -6px 0 rgba(var(--sh), 0.05), 0 8px 0 var(--cd), 0 24px 28px -16px rgba(var(--sh), 0.5);
  transition: transform 0.3s var(--spring), box-shadow 0.3s var(--spring);
}
.cat:hover { transform: translateY(-4px); }
.cat:active { transform: translateY(6px) scale(1.04, 0.94); box-shadow: inset 0 3px 0 rgba(255, 255, 255, 0.8), 0 2px 0 var(--cd), 0 8px 12px -10px rgba(var(--sh), 0.5); transition-duration: 0.08s; }
.cat[data-tone="sky"] { --c: var(--sky); --cd: var(--sky-2); }
.cat[data-tone="butter"] { --c: var(--butter); --cd: var(--butter-2); }
.cat[data-tone="lilac"] { --c: var(--lilac); --cd: var(--lilac-2); }
.cat[data-tone="peach"] { --c: #ffe0cf; --cd: var(--peach-3); }
.cat[data-tone="berry"] { --c: #fcd9e1; --cd: #eeaabb; }
.cat .thumb { position: absolute; inset: -6% 6% 26%; }
.cat .thumb img { width: 100%; height: 100%; }
.cat__label { position: relative; font-family: var(--font-display); font-weight: 600; font-size: 1.04rem; line-height: 1.15; }

/* ---------- Seller band ---------- */
.band {
  position: relative; overflow: hidden;
  display: grid; gap: 28px; align-items: center;
  padding: clamp(26px, 5vw, 64px);
  border-radius: var(--r-xl);
  background:
    radial-gradient(70% 90% at 100% 0%, rgba(167, 205, 238, 0.85), transparent 70%),
    radial-gradient(60% 80% at 0% 100%, rgba(255, 225, 127, 0.55), transparent 70%),
    var(--lilac);
  box-shadow: inset 0 3px 0 rgba(255, 255, 255, 0.8), 0 12px 0 var(--lilac-2), 0 40px 50px -30px rgba(var(--sh), 0.55);
}
@media (min-width: 900px) { .band { grid-template-columns: 1.05fr 1fr; } }
.band h2 { font-size: clamp(2.2rem, 5vw, 3.8rem); margin: 10px 0 14px; }
.band p { font-size: 1.12rem; max-width: 40ch; }
.band__ctas { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 24px; }
.band__art { position: relative; min-height: 260px; display: grid; place-items: center; }
.band__art svg { width: min(420px, 100%); height: auto; overflow: visible; }
.band__ninety {
  position: absolute; inset-inline-start: 2%; top: 4%;
  width: 104px; height: 104px; border-radius: 50%; display: grid; place-items: center; text-align: center;
  background: radial-gradient(circle at 35% 28%, #fff7d1, var(--butter-2) 70%);
  box-shadow: inset 0 2px 0 #fff, 0 5px 0 #e7b94a, 0 16px 20px -10px rgba(var(--sh), 0.45);
  font-family: "Fredoka", var(--font-display); line-height: 1; transform: rotate(-12deg);
}
.band__ninety b { display: block; font-size: 2rem; font-weight: 600; }
.band__ninety small { display: block; font-size: 0.68rem; font-weight: 600; max-width: 80px; margin-top: 3px; line-height: 1.1; }
:lang(ar) .band__ninety small { font-family: "Baloo Bhaijaan 2"; font-size: 0.74rem; }

/* tiny printer svg animation */
.tp-head { animation: tpHead 1.6s ease-in-out infinite alternate; }
.tp-layer { opacity: 0; } /* per-layer keyframes live inside the SVG */
.tp-card { animation: tpCard 3.2s var(--soft) infinite; opacity: 0; transform-box: fill-box; transform-origin: center; }
.tp-card:nth-of-type(2) { animation-delay: 1.07s; }
.tp-card:nth-of-type(3) { animation-delay: 2.14s; }
.tp-eye { animation: tpBlink 4s infinite; transform-box: fill-box; transform-origin: center; }
@keyframes tpHead { from { transform: translate(-22px, -12.7px); } to { transform: translate(22px, 12.7px); } }
@keyframes tpCard {
  0% { opacity: 0; transform: translate(-170px, 30px) rotate(-14deg) scale(0.6); }
  15% { opacity: 1; }
  60% { opacity: 1; transform: translate(-70px, -70px) rotate(6deg) scale(1); }
  92% { opacity: 1; }
  100% { opacity: 0; transform: translate(0, -4px) rotate(14deg) scale(0.35); }
}
@keyframes tpBlink { 0%, 92%, 100% { transform: scaleY(1); } 95% { transform: scaleY(0.1); } }

/* ---------- Trust badges ---------- */
.trust { list-style: none; margin: 0; padding: 0; display: grid; gap: 18px; grid-template-columns: 1fr; }
@media (min-width: 640px) { .trust { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .trust { grid-template-columns: repeat(4, 1fr); } }
.trust li {
  display: flex; gap: 16px; align-items: flex-start;
  padding: 20px; border-radius: var(--r-md);
  background: rgba(255, 250, 245, 0.7);
  box-shadow: inset 0 1px 0 #fff, 0 4px 0 rgba(243, 191, 159, 0.45);
}
.seal { position: relative; width: 64px; height: 64px; flex: none; display: grid; place-items: center; transition: transform 0.6s var(--spring); }
.seal svg.seal__bg { position: absolute; inset: 0; width: 100%; height: 100%; }
.seal .ico { position: relative; width: 28px; height: 28px; }
.trust li:hover .seal { transform: rotate(-18deg) scale(1.06); }
.trust h3 { font-size: 1.12rem; margin: 4px 0 4px; line-height: 1.2; }
.trust p { font-size: 0.93rem; color: var(--ink-2); line-height: 1.5; }

/* ---------- Footer ---------- */
.foot { margin-top: 8px; position: relative; }
.foot__wave { display: block; width: 100%; height: 40px; color: var(--lilac); }
.foot__body { background: var(--lilac); padding: 28px 0 34px; }
.foot__grid { display: grid; gap: 30px; grid-template-columns: 1fr; }
@media (min-width: 720px) { .foot__grid { grid-template-columns: 1.4fr repeat(3, 1fr); } }
.foot__brand p { color: var(--ink-2); margin-top: 12px; max-width: 30ch; }
.foot h2 { font-size: 1.05rem; margin-bottom: 10px; }
.foot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.foot ul a { text-decoration: none; color: var(--ink); padding: 3px 0; display: inline-block; border-radius: 6px; }
.foot ul a:hover { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 2px; text-decoration-color: var(--berry); }
.foot__base { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px; margin-top: 30px; padding-top: 22px; border-top: 2px dashed rgba(69, 48, 75, 0.14); font-size: 0.9rem; color: var(--ink-2); }
.foot__lang { display: flex; align-items: center; gap: 10px; }

/* ---------- Toast + flying parcel ---------- */
.toast {
  position: fixed; z-index: 90; bottom: 22px; left: 50%;
  display: flex; align-items: center; gap: 10px;
  max-width: calc(100vw - 32px);
  padding: 12px 18px 12px 12px; border-radius: 999px;
  background: var(--ink); color: #fff; font-weight: 700; font-size: 0.95rem;
  box-shadow: 0 16px 30px -12px rgba(var(--sh), 0.7);
  transform: translate(-50%, 140%); transition: transform 0.5s var(--spring);
}
.toast.is-on { transform: translate(-50%, 0); }
.toast .ico { width: 26px; height: 26px; padding: 4px; border-radius: 50%; background: var(--butter-2); color: var(--ink); }
.parcel-fly {
  position: fixed; z-index: 95; left: 0; top: 0; width: 28px; height: 24px; pointer-events: none;
}
.parcel-fly svg { width: 100%; height: 100%; }

/* =========================================================
   Product page
   ========================================================= */
.page { padding-top: calc(var(--hdr-h) + 18px); }
.crumbs { margin-bottom: 18px; font-size: 0.92rem; color: var(--ink-2); }
.crumbs ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.crumbs li + li::before { content: "›"; margin-inline-end: 6px; color: var(--ink-2); }
[dir="rtl"] .crumbs li + li::before { content: "‹"; }
.crumbs a { text-decoration: none; font-weight: 700; }
.crumbs a:hover { text-decoration: underline; }

.pdp { display: grid; gap: 28px; align-items: start; }
@media (min-width: 960px) { .pdp { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 44px; } .pdp > .viewer { position: sticky; top: calc(var(--hdr-h) + 16px); } }

.viewer {
  position: relative; overflow: hidden;
  aspect-ratio: 1 / 1.02; width: 100%;
  border-radius: var(--r-xl);
  background: linear-gradient(180deg, #efe6ff 0%, #f6e9f6 55%, #fde3d2 100%);
  box-shadow: inset 0 3px 0 rgba(255, 255, 255, 0.8), 0 10px 0 var(--lilac-2), 0 40px 50px -30px rgba(var(--sh), 0.55);
}
@media (min-width: 960px) { .viewer { aspect-ratio: 1 / 1.05; max-height: calc(100svh - var(--hdr-h) - 40px); } }
.viewer__canvas { position: absolute; inset: 0; }
.viewer__canvas canvas { display: block; width: 100% !important; height: 100% !important; touch-action: none; cursor: grab; }
.viewer__canvas canvas:active { cursor: grabbing; }
.viewer__ui { position: absolute; z-index: 2; inset-inline-end: 14px; top: 14px; display: flex; flex-direction: column; gap: 10px; }
.viewer__hint {
  position: absolute; z-index: 2; bottom: 14px; left: 50%; translate: -50% 0;
  padding: 7px 14px; border-radius: 999px; white-space: nowrap;
  background: rgba(255, 250, 245, 0.85); font-size: 0.85rem; font-weight: 700; color: var(--ink-2);
  box-shadow: 0 3px 0 rgba(var(--sh), 0.1);
  transition: opacity 0.4s;
}
[dir="rtl"] .viewer__hint { translate: 50% 0; }
.viewer.is-touched .viewer__hint { opacity: 0; }
.viewer__light[aria-pressed="true"] { background: linear-gradient(180deg, #fff6c9, var(--butter-2)); box-shadow: inset 0 2px 0 #fff, 0 4px 0 #e7b94a, 0 0 20px rgba(255, 210, 120, 0.8); }
.viewer__fallback { position: absolute; inset: 0; display: none; place-items: center; text-align: center; padding: 30px; }
.viewer.no-3d .viewer__fallback { display: grid; }

.buy {
  position: relative;
  padding: clamp(20px, 3vw, 32px);
  border-radius: var(--r-xl);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.65), rgba(255, 255, 255, 0) 30%), var(--cream);
  box-shadow: inset 0 3px 0 #fff, 0 8px 0 var(--peach-2), 0 34px 44px -28px rgba(var(--sh), 0.45);
}
.buy h1 { font-size: clamp(2.1rem, 4vw, 3.1rem); margin: 12px 0 6px; }
.buy__by { color: var(--ink-2); }
.buy__by strong { color: var(--ink); }
.buy__price { display: flex; align-items: center; gap: 14px; margin: 18px 0 20px; }
.buy__price .price { font-size: 2.1rem; }
.buy__price .sticker { position: static; width: 64px; height: 64px; }
.buy__block { padding-block: 16px; border-top: 2px dashed var(--line); }
.buy__label { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; font-family: var(--font-display); font-weight: 600; font-size: 1.02rem; margin-bottom: 10px; }
.buy__label span:last-child { font-family: var(--font-text); font-weight: 700; font-size: 0.92rem; color: var(--ink-2); }
.matinfo { display: flex; gap: 14px; align-items: flex-start; padding: 14px; border-radius: 20px; background: var(--sky); box-shadow: inset 0 1px 0 #fff, 0 3px 0 var(--sky-2); }
.matinfo .mat { height: 30px; font-size: 0.9rem; padding: 0 12px; background: #fff; flex: none; }
.matinfo p { font-size: 0.95rem; line-height: 1.5; }
.matinfo a { font-weight: 800; text-decoration-thickness: 2px; text-underline-offset: 3px; }

.swatches { display: flex; flex-wrap: wrap; gap: 12px; }
.swatch {
  --sw: #d9c4a0;
  position: relative; width: 52px; height: 52px; border-radius: 50%; border: 0; padding: 0;
  background: radial-gradient(circle at 34% 28%, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0) 45%), var(--sw);
  box-shadow: inset 0 -4px 6px rgba(0, 0, 0, 0.14), 0 4px 0 rgba(var(--sh), 0.18), 0 0 0 4px #fff;
  transition: transform 0.3s var(--spring), box-shadow 0.2s;
}
.swatch:hover { transform: translateY(-3px); }
.swatch[aria-checked="true"] { transform: translateY(-3px) scale(1.06); box-shadow: inset 0 -4px 6px rgba(0, 0, 0, 0.14), 0 4px 0 rgba(var(--sh), 0.18), 0 0 0 4px #fff, 0 0 0 7px var(--berry); }
.swatch[aria-checked="true"]::after {
  content: ""; position: absolute; inset: 0; margin: auto; width: 16px; height: 9px;
  border-left: 3px solid currentColor; border-bottom: 3px solid currentColor;
  transform: translateY(-2px) rotate(-45deg);
  color: #fff; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.3));
}
.swatch[data-light]::after { color: var(--ink); filter: none; }

.pod {
  display: flex; gap: 12px; align-items: center; padding: 12px 14px; border-radius: 18px;
  background: var(--mint); font-weight: 800; font-size: 0.96rem;
  box-shadow: inset 0 1px 0 #fff, 0 3px 0 var(--mint-2);
}
.pod .ico { width: 30px; height: 30px; padding: 5px; border-radius: 50%; background: #fff; color: var(--mint-3); }

.buy__actions { display: grid; gap: 14px; grid-template-columns: auto 1fr; align-items: center; margin-top: 4px; }
.qty { display: inline-flex; align-items: center; gap: 4px; padding: 4px; border-radius: 999px; background: var(--peach-1); box-shadow: inset 0 2px 5px rgba(var(--sh), 0.16); }
.qty button { width: 40px; height: 40px; border-radius: 50%; border: 0; background: #fff; box-shadow: 0 3px 0 var(--peach-2); display: grid; place-items: center; transition: transform 0.2s var(--spring); }
.qty button:active { transform: translateY(2px) scale(1.06, 0.9); box-shadow: 0 1px 0 var(--peach-2); }
.qty button .ico { width: 18px; height: 18px; }
.qty output { min-width: 32px; text-align: center; font-family: "Fredoka", var(--font-display); font-weight: 600; font-size: 1.2rem; }
.roomv { grid-column: 1 / -1; display: grid; gap: 8px; justify-items: stretch; }
.roomv .btn { width: 100%; }
.roomv__note { text-align: center; font-size: 0.88rem; font-weight: 700; color: var(--ink-2); }
@media (max-width: 420px) { .buy__actions .btn { padding-inline: 1em; } }

.about { margin-top: 34px; display: grid; gap: 22px; }
@media (min-width: 900px) { .about { grid-template-columns: 1.2fr 1fr; gap: 44px; } }
.about h2 { font-size: 1.45rem; margin-bottom: 8px; }
.about p + p { margin-top: 10px; }
.about p { color: var(--ink-2); }
.specs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 0; }
.specs div { padding: 12px 14px; border-radius: 18px; background: rgba(255, 250, 245, 0.75); box-shadow: inset 0 1px 0 #fff, 0 3px 0 var(--peach-2); }
.specs dt { font-size: 0.8rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-2); }
:lang(ar) .specs dt { letter-spacing: 0; font-size: 0.9rem; }
.specs dd { margin: 2px 0 0; font-family: var(--font-display); font-weight: 600; font-size: 1.1rem; }

/* =========================================================
   Sell page
   ========================================================= */
.shero { display: grid; gap: 28px; align-items: center; padding-block: 18px 30px; }
@media (min-width: 960px) { .shero { grid-template-columns: 1.05fr 1fr; gap: 40px; padding-block: 34px 50px; } }
.shero h1 { font-size: clamp(2.4rem, 6vw, 4.6rem); margin: 14px 0 16px; line-height: 1; text-wrap: balance; }
:lang(ar) .shero h1 { line-height: 1.25; }
.shero p { font-size: 1.12rem; color: var(--ink-2); max-width: 46ch; }
.nolist { list-style: none; margin: 22px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.nolist li { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px 8px 8px; border-radius: 999px; background: var(--cream); font-weight: 800; font-size: 0.95rem; box-shadow: inset 0 1px 0 #fff, 0 3px 0 var(--peach-2); }
.nolist .x { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--berry-soft); color: var(--berry-2); }
.nolist .x .ico { width: 15px; height: 15px; }
.shero__art {
  position: relative; border-radius: var(--r-xl); min-height: 320px; display: grid; place-items: center; overflow: hidden;
  background:
    radial-gradient(60% 60% at 30% 30%, rgba(255, 255, 255, 0.8), transparent 70%),
    linear-gradient(160deg, var(--sky) 0%, var(--lilac) 100%);
  box-shadow: inset 0 3px 0 rgba(255, 255, 255, 0.8), 0 10px 0 var(--sky-2), 0 36px 46px -28px rgba(var(--sh), 0.5);
}
.shero__art svg { width: min(520px, 100%); height: auto; overflow: visible; }
.shero__ctas { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 26px; }

.ssteps { list-style: none; margin: 0; padding: 0; display: grid; gap: 22px 16px; grid-template-columns: 1fr; counter-reset: s; }
@media (min-width: 640px) { .ssteps { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) { .ssteps { grid-template-columns: repeat(3, 1fr); } }
.sstep {
  --c: var(--mint); --cd: var(--mint-2);
  position: relative; padding: 20px 20px 22px; border-radius: var(--r-lg);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0) 40%), var(--c);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.85), 0 7px 0 var(--cd), 0 26px 30px -20px rgba(var(--sh), 0.45);
  transition: transform 0.35s var(--spring);
}
.sstep:hover { transform: translateY(-4px) rotate(-0.5deg); }
.sstep:nth-child(6n+2) { --c: var(--butter); --cd: var(--butter-2); }
.sstep:nth-child(6n+3) { --c: var(--sky); --cd: var(--sky-2); }
.sstep:nth-child(6n+4) { --c: var(--lilac); --cd: var(--lilac-2); }
.sstep:nth-child(6n+5) { --c: #ffe0cf; --cd: var(--peach-3); }
.sstep:nth-child(6n+6) { --c: #fcd9e1; --cd: #eeaabb; }
.sstep__top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.sstep__n { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 16px; background: var(--cream); font-family: "Fredoka", var(--font-display); font-weight: 600; font-size: 1.45rem; box-shadow: inset 0 -3px 0 rgba(var(--sh), 0.08), 0 4px 0 rgba(var(--sh), 0.14); }
.sstep__ico { width: 40px; height: 40px; color: var(--ink); opacity: 0.85; }
.sstep h3 { font-size: 1.32rem; margin-bottom: 6px; }
.sstep p { color: var(--ink-2); font-size: 0.97rem; }

/* Calculator */
.calcwrap { display: grid; gap: 26px; align-items: start; }
@media (min-width: 1000px) { .calcwrap { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 30px; } }
.panelbox {
  position: relative; padding: clamp(18px, 3vw, 30px); border-radius: var(--r-xl);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0) 30%), var(--cream);
  box-shadow: inset 0 3px 0 #fff, 0 8px 0 var(--peach-2), 0 34px 44px -28px rgba(var(--sh), 0.45);
}
.calc fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.calc legend, .calc__lbl { display: block; padding: 0; font-family: var(--font-display); font-weight: 600; font-size: 1.15rem; margin-bottom: 12px; }
.calc__group + .calc__group { margin-top: 24px; padding-top: 22px; border-top: 2px dashed var(--line); }
.drop {
  display: flex; align-items: center; gap: 14px; padding: 14px 16px; margin-bottom: 14px;
  border-radius: 20px; border: 2px dashed var(--lilac-2); background: rgba(230, 221, 250, 0.45);
  transition: background 0.2s, border-color 0.2s, transform 0.3s var(--spring);
}
.drop.is-over { background: var(--lilac); border-color: var(--lilac-3); transform: scale(1.01); }
.drop .ico { width: 36px; height: 36px; padding: 7px; border-radius: 12px; background: #fff; color: var(--lilac-3); box-shadow: 0 3px 0 var(--lilac-2); }
.drop b { display: block; font-family: var(--font-display); font-weight: 600; }
.drop small { font-size: 0.88rem; color: var(--ink-2); font-weight: 700; }

.samples { display: grid; gap: 10px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 640px) { .samples { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.sample { position: relative; display: block; cursor: pointer; }
.sample input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.sample__card {
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: 4px;
  height: 100%; padding: 8px 8px 12px; border-radius: 20px;
  background: var(--peach-1); box-shadow: inset 0 1px 0 #fff, 0 4px 0 var(--peach-2);
  transition: transform 0.3s var(--spring), background 0.2s, box-shadow 0.2s;
}
.sample__art { position: relative; flex: none; width: 100%; aspect-ratio: 1.25; margin-bottom: 4px; }
.sample__art .thumb { inset: 4% 8%; }
.sample__art .thumb img { width: 100%; height: 100%; }
.sample__name { font-family: var(--font-display); font-weight: 600; font-size: 0.95rem; line-height: 1.15; }
.sample__file { max-width: 100%; font-size: 0.72rem; color: var(--ink-2); font-weight: 700; overflow-wrap: anywhere; direction: ltr; }
.sample:hover .sample__card { transform: translateY(-3px); }
.sample input:checked + .sample__card { background: var(--butter); box-shadow: inset 0 1px 0 #fff, 0 4px 0 var(--butter-2), 0 0 0 3px var(--berry); transform: translateY(-3px); }
.sample input:focus-visible + .sample__card { outline: 3px solid var(--berry); outline-offset: 4px; }
.est {
  display: flex; gap: 10px; align-items: flex-start; margin-top: 14px; padding: 12px 14px; border-radius: 16px;
  background: var(--mint); font-weight: 700; font-size: 0.95rem; line-height: 1.5;
  box-shadow: inset 0 1px 0 #fff, 0 3px 0 var(--mint-2);
}
.est .ico { width: 22px; height: 22px; margin-top: 1px; color: var(--mint-3); flex: none; }
.est.is-reading { background: var(--butter); box-shadow: inset 0 1px 0 #fff, 0 3px 0 var(--butter-2); }
.est.is-reading .ico { animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

.seg { display: inline-flex; padding: 4px; gap: 4px; border-radius: 999px; background: var(--peach-1); box-shadow: inset 0 2px 5px rgba(var(--sh), 0.16); }
.seg label { position: relative; cursor: pointer; }
.seg input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.seg span {
  display: inline-flex; align-items: center; gap: 6px; min-width: 104px; justify-content: center;
  height: 44px; padding: 0 18px; border-radius: 999px; font-family: var(--font-display); font-weight: 600; font-size: 1.05rem;
  transition: background 0.2s, color 0.2s, transform 0.3s var(--spring), box-shadow 0.2s;
}
.seg input:checked + span { background: linear-gradient(180deg, #fff, var(--cream)); box-shadow: inset 0 2px 0 #fff, 0 3px 0 var(--peach-3); transform: translateY(-1px); }
.seg input[value="PLA"]:checked + span { background: linear-gradient(180deg, #fff6c9, var(--butter-2)); box-shadow: inset 0 2px 0 #fff, 0 3px 0 #e7b94a; }
.seg input[value="PETG"]:checked + span { background: linear-gradient(180deg, #eaf4fd, var(--sky-2)); box-shadow: inset 0 2px 0 #fff, 0 3px 0 #7fb0dd; }
.seg input:focus-visible + span { outline: 3px solid var(--berry); outline-offset: 2px; }
.seg small { font-family: var(--font-text); font-weight: 700; font-size: 0.78rem; opacity: 0.75; }
.matrow { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; }
.matrow a { font-weight: 800; font-size: 0.95rem; text-decoration-thickness: 2px; text-underline-offset: 3px; }

.pricebox {
  display: flex; align-items: center; max-width: 280px; height: 60px; padding-inline: 18px; gap: 10px; border-radius: 20px;
  background: #fff; box-shadow: inset 0 2px 6px rgba(var(--sh), 0.16), 0 0 0 3px transparent;
  transition: box-shadow 0.2s;
}
.pricebox span { font-family: "Fredoka", var(--font-display); font-weight: 600; color: var(--ink-2); }
.pricebox input { flex: 1; min-width: 0; border: 0; background: none; height: 100%; font-family: "Fredoka", var(--font-display); font-weight: 600; font-size: 1.6rem; direction: ltr; }
:lang(ar) .pricebox input { text-align: end; }
.pricebox input:focus { outline: none; }
.pricebox:focus-within { box-shadow: inset 0 2px 6px rgba(var(--sh), 0.16), 0 0 0 3px var(--berry); }
.pricebox.is-bad { box-shadow: inset 0 2px 6px rgba(var(--sh), 0.16), 0 0 0 3px #e2734f; animation: wobble 0.5s; }
@keyframes wobble { 20% { transform: translateX(-5px); } 40% { transform: translateX(5px); } 60% { transform: translateX(-3px); } 80% { transform: translateX(2px); } }
.suggest { margin-top: 12px; border: 0; background: none; padding: 4px 0; font-weight: 800; color: var(--berry-2); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; border-radius: 6px; }
.msg { margin-top: 12px; display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: 16px; font-weight: 800; font-size: 0.97rem; background: var(--mint); box-shadow: inset 0 1px 0 #fff, 0 3px 0 var(--mint-2); }
.msg .ico { width: 22px; height: 22px; flex: none; margin-top: 1px; }
.msg.is-bad { background: #ffe0d6; color: #8a2c17; box-shadow: inset 0 1px 0 #fff, 0 3px 0 #f2b3a0; }

.result { position: relative; }
.result__top { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 16px; }
.result__top h3 { font-size: 1.3rem; }
.rates { display: inline-flex; align-items: center; gap: 6px; padding: 4px 11px; border-radius: 999px; background: var(--butter); font-weight: 800; font-size: 0.8rem; box-shadow: 0 2px 0 var(--butter-2); }
.result dl { margin: 0; display: grid; gap: 10px; }
.result dl > div { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 14px; border-radius: 16px; background: var(--peach-1); }
.result dt { font-weight: 700; }
.result dd { margin: 0; font-family: "Fredoka", var(--font-display); font-weight: 600; font-size: 1.3rem; white-space: nowrap; }
.result .r-min { background: var(--lilac); }
.result .r-earn { background: var(--mint); box-shadow: inset 0 1px 0 #fff, 0 4px 0 var(--mint-2); padding-block: 16px; }
.result .r-earn dd { font-size: 1.8rem; }
.bar { display: flex; height: 22px; border-radius: 999px; overflow: hidden; margin: 18px 0 8px; background: var(--peach-1); box-shadow: inset 0 2px 4px rgba(var(--sh), 0.15); }
.bar span { flex: 0 0 0%; transition: flex-basis 0.6s var(--soft); }
.bar .b-min { background: var(--lilac-2); }
.bar .b-you { background: var(--mint-3); }
.bar .b-us { background: var(--berry); }
.legend { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 0.82rem; font-weight: 700; color: var(--ink-2); list-style: none; margin: 0; padding: 0; }
.legend i { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-inline-end: 6px; vertical-align: 0; }
.breakdown { margin-top: 16px; }
.breakdown summary { cursor: pointer; font-weight: 800; padding: 6px 0; border-radius: 8px; }
.breakdown dl { margin: 8px 0 0; display: grid; gap: 4px; }
.breakdown dl div { display: flex; justify-content: space-between; gap: 10px; padding: 6px 2px; border-bottom: 1px dashed var(--line); font-size: 0.93rem; }
.breakdown dt small { color: var(--ink-2); font-weight: 600; margin-inline-start: 6px; }
.breakdown dd { margin: 0; font-weight: 800; white-space: nowrap; }
.breakdown .total { border-bottom: 0; font-weight: 800; }
.breakdown .total dd, .breakdown .total dt { font-size: 1.02rem; }

.note {
  margin-top: 18px; padding: 18px; border-radius: 22px; background: var(--sky);
  box-shadow: inset 0 1px 0 #fff, 0 4px 0 var(--sky-2);
}
.note h3 { display: flex; align-items: center; gap: 10px; font-size: 1.12rem; margin-bottom: 8px; }
.note h3 .ico { width: 28px; height: 28px; padding: 5px; border-radius: 10px; background: #fff; color: var(--sky-3); }
.note p { font-size: 0.95rem; line-height: 1.55; }

/* Material guide: side-by-side */
.guide { border-radius: var(--r-xl); overflow: hidden; background: var(--cream); box-shadow: inset 0 3px 0 #fff, 0 8px 0 var(--peach-2), 0 34px 44px -28px rgba(var(--sh), 0.45); }
.guide table { width: 100%; border-collapse: collapse; }
.guide thead th { padding: 22px 18px 18px; text-align: center; vertical-align: bottom; font-weight: inherit; }
.guide thead th.pla { background: var(--butter); }
.guide thead th.petg { background: var(--sky); }
.guide thead th b { display: block; font-family: 'Fredoka', var(--font-display); font-weight: 600; font-size: clamp(1.6rem, 4vw, 2.2rem); line-height: 1; }
.guide thead th span { display: block; margin-top: 6px; font-size: 0.92rem; font-weight: 700; color: var(--ink-2); line-height: 1.35; }
.guide .spool { width: 54px; height: 54px; margin: 0 auto 10px; }
.guide tbody th { text-align: start; vertical-align: top; width: 22%; padding: 16px 18px; font-family: var(--font-display); font-weight: 600; font-size: 1rem; border-top: 2px dashed var(--line); }
.guide tbody td { vertical-align: top; padding: 16px 18px; font-size: 0.95rem; line-height: 1.5; border-top: 2px dashed var(--line); }
.guide td.pla { background: rgba(255, 240, 184, 0.35); border-inline: 2px dashed var(--line); }
.guide td.petg { background: rgba(211, 231, 248, 0.4); }
.guide tbody tr:first-child { display: none; }
@media (max-width: 819px) {
  .guide table, .guide thead, .guide tbody { display: block; }
  .guide tr { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .guide thead .corner { display: none; }
  .guide thead th { padding: 18px 12px 14px; }
  .guide tbody th { grid-column: 1 / -1; width: auto; padding: 12px 14px 4px; }
  .guide tbody td { border-top: 0; padding: 6px 14px 14px; font-size: 0.9rem; }
  .guide td.pla { border-inline-start: 0; }
}
.guide__tips { display: grid; gap: 14px; margin-top: 22px; }
@media (min-width: 820px) { .guide__tips { grid-template-columns: 1.3fr 1fr; } }
.tip { display: flex; gap: 14px; align-items: flex-start; padding: 18px; border-radius: 22px; background: var(--mint); box-shadow: inset 0 1px 0 #fff, 0 4px 0 var(--mint-2); }
.tip--warn { background: #ffe5d8; box-shadow: inset 0 1px 0 #fff, 0 4px 0 #f5bea6; }
.tip .ico { width: 36px; height: 36px; padding: 7px; border-radius: 12px; background: #fff; flex: none; }
.tip b { font-family: var(--font-display); font-weight: 600; font-size: 1.08rem; }

/* Rules */
.rules { display: grid; gap: 22px; align-items: start; }
@media (min-width: 900px) { .rules { grid-template-columns: 1fr 1fr; gap: 36px; } }
.rules h2 { font-size: clamp(1.9rem, 4vw, 2.9rem); margin: 10px 0 14px; }
.rules p { color: var(--ink-2); max-width: 46ch; }
.banned { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.banned li { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-radius: 20px; background: var(--cream); font-weight: 800; box-shadow: inset 0 1px 0 #fff, 0 4px 0 var(--peach-2); }
.banned .ban { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: #ffe0d6; color: #a23a1c; flex: none; }
.banned .ban .ico { width: 22px; height: 22px; }
.banned__title { font-family: var(--font-display); font-weight: 600; font-size: 1.1rem; margin-bottom: 10px; }

.scta { text-align: center; padding: clamp(30px, 6vw, 70px) var(--gutter); border-radius: var(--r-xl); background: radial-gradient(80% 100% at 50% 0%, rgba(255, 255, 255, 0.7), transparent 70%), var(--mint); box-shadow: inset 0 3px 0 #fff, 0 10px 0 var(--mint-2), 0 36px 46px -28px rgba(var(--sh), 0.5); }
.scta h2 { font-size: clamp(2rem, 5vw, 3.4rem); margin-bottom: 12px; }
.scta p { color: var(--ink-2); max-width: 44ch; margin: 0 auto 24px; }
.scta small { display: block; margin-top: 16px; color: var(--ink-2); font-weight: 700; font-size: 0.86rem; }

/* Reveal helpers (JS adds .is-in) */
[data-reveal] { will-change: transform; }

/* =========================================================
   Reduced motion
   ========================================================= */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
  .tp-layer { opacity: 1; }
  .tp-card { opacity: 0; }
  .thumb--wait::before { animation: none; }
}