/* R · Radiant: "Liquid light". Glossy candy jelly on lilac-white. Phone-first. */

:root {
  --bg: #f7f3ff;
  --ink: #1f1433;
  --ink-2: #463a5e;
  --ink-3: #5f5477;
  --cherry: #ff3d68;
  --tangerine: #ff9f1c;
  --blue: #2ec4ff;
  --grape: #7b5cff;
  --lime: #9be15d;
  --cherry-ink: #c4123f;
  --grape-ink: #5332e6;
  --blue-ink: #075f86;
  --lime-ink: #2f650b;
  --tangerine-ink: #924a00;
  --line: rgba(123, 92, 255, .16);
  --r-xl: 32px;
  --r-lg: 26px;
  --r-md: 18px;
  --gut: 16px;
  --max: 1280px;
  --hdr: 60px;
  --spring: cubic-bezier(.34, 1.56, .64, 1);
  --ease: cubic-bezier(.22, 1, .36, 1);
  --f-d: 'Gabarito', ui-sans-serif, system-ui, sans-serif;
  --f-b: 'DM Sans', ui-sans-serif, system-ui, sans-serif;
  --f-latin-d: 'Gabarito', ui-sans-serif, system-ui, sans-serif;
  --glow: rgba(123, 92, 255, .5);

  /* shared room view theming (see shared/room-view/API.md) */
  --rv-bg: #f7f3ff;
  --rv-surface: #ffffff;
  --rv-text: #1f1433;
  --rv-muted: #5f5477;
  --rv-line: #e2d9ff;
  --rv-accent: #6240f5;
  --rv-accent-text: #ffffff;
  --rv-radius: 22px;
  --rv-font: var(--f-b);
  --rv-font-display: var(--f-d);
  color-scheme: light;
}
[lang="ar"] {
  --f-d: 'Lemonada', 'Noto Sans Arabic', ui-sans-serif, sans-serif;
  --f-b: 'Noto Sans Arabic', 'DM Sans', ui-sans-serif, sans-serif;
}
@media (min-width: 600px) { :root { --gut: 24px; } }
@media (min-width: 1100px) { :root { --gut: 40px; --hdr: 72px; } }

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--hdr) + 16px); scroll-behavior: smooth; }
html.is-locked { overflow: hidden; }
body {
  margin: 0;
  min-height: 100svh;
  background: var(--bg);
  color: var(--ink);
  font: 400 1rem/1.6 var(--f-b);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}
[lang="ar"] body { font-size: 1.09375rem; line-height: 1.75; }
[lang="ar"] * { letter-spacing: 0 !important; }
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(48rem 34rem at 92% -6%, rgba(255, 159, 28, .14), transparent 62%),
    radial-gradient(40rem 32rem at -8% 18%, rgba(46, 196, 255, .13), transparent 60%),
    radial-gradient(46rem 36rem at 60% 108%, rgba(255, 61, 104, .10), transparent 62%),
    radial-gradient(36rem 30rem at 20% 90%, rgba(155, 225, 93, .10), transparent 60%);
}
img, svg { display: block; }
.ico { width: 24px; height: 24px; flex: none; }
[dir="rtl"] .ico.flip { transform: scaleX(-1); }
[data-ico] { display: inline-grid; place-items: center; width: 24px; height: 24px; flex: none; }
a { color: var(--grape-ink); }
p { margin: 0; }
h1, h2, h3 { margin: 0; font-family: var(--f-d); color: var(--ink); text-wrap: balance; }
button { font: inherit; color: inherit; }
input, select, textarea { font: inherit; }
.sr-only {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}
.wrap { width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: var(--gut); }
.defs { position: absolute; width: 0; height: 0; overflow: hidden; }
:focus-visible { outline: 3px solid var(--grape-ink); outline-offset: 3px; }
::selection { background: rgba(123, 92, 255, .25); }

/* ---------- type ---------- */
.h-hero {
  font-weight: 800;
  font-size: clamp(2.55rem, 1.6rem + 4.3vw, 5.35rem);
  line-height: .97;
  letter-spacing: -.028em;
}
.h2 {
  font-weight: 800;
  font-size: clamp(2rem, 1.45rem + 2.2vw, 3.2rem);
  line-height: 1.02;
  letter-spacing: -.022em;
}
[lang="ar"] .h-hero { font-weight: 600; font-size: clamp(1.95rem, 1.35rem + 2.6vw, 3.6rem); line-height: 1.5; }
[lang="ar"] .h2 { font-weight: 600; font-size: clamp(1.55rem, 1.25rem + 1.4vw, 2.35rem); line-height: 1.55; }
.h-hero em, .h2 em {
  font-style: normal;
  background: linear-gradient(100deg, #5332e6 0%, #b5179e 52%, #d0103f 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  font: 700 .875rem/1.3 var(--f-b);
  letter-spacing: .02em;
  color: var(--grape-ink);
}
.eyebrow::before {
  content: "";
  width: 12px;
  height: 12px;
  border-radius: 50%;
  flex: none;
  background: radial-gradient(circle at 35% 30%, #fff 0 18%, transparent 20%), linear-gradient(160deg, #ff9f1c, #ff3d68 60%, #7b5cff);
  box-shadow: 0 3px 8px -2px rgba(255, 61, 104, .7);
}
.lede { font-size: 1.0625rem; color: var(--ink-2); max-width: 34rem; }
@media (min-width: 900px) { .lede { font-size: 1.1875rem; } }
.sub { color: var(--ink-2); max-width: 38rem; margin-top: 10px; }

/* ---------- buttons: glossy pills ---------- */
.btn {
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  min-height: 52px;
  padding: 0 1.4rem;
  border: 0;
  border-radius: 999px;
  font: 700 1rem/1.15 var(--f-b);
  text-decoration: none;
  text-align: center;
  cursor: pointer;
  color: #fff;
  background: linear-gradient(180deg, #8f75ff 0%, #6a4af5 50%, #5232e3 100%);
  box-shadow:
    inset 0 -4px 8px rgba(40, 10, 140, .35),
    inset 0 1px 1px rgba(255, 255, 255, .6),
    0 14px 26px -12px rgba(98, 64, 245, .75);
  transition: transform .45s var(--spring), box-shadow .3s var(--ease), filter .2s;
  user-select: none;
  -webkit-user-select: none;
}
.btn::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 2px 6% auto;
  height: 52%;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .46), rgba(255, 255, 255, 0));
  pointer-events: none;
}
.btn:hover { transform: translateY(-2px); filter: saturate(1.08) brightness(1.04); box-shadow: inset 0 -4px 8px rgba(40, 10, 140, .35), inset 0 1px 1px rgba(255, 255, 255, .6), 0 18px 32px -12px rgba(98, 64, 245, .85); }
.btn:active { transform: scale(.95, .9); transition-duration: .08s; }
.btn--lg { min-height: 56px; padding: 0 1.6rem; font-size: 1.0625rem; }
.btn--ghost {
  color: var(--grape-ink);
  background: linear-gradient(180deg, #ffffff, #efe9ff);
  box-shadow: inset 0 0 0 1.5px rgba(123, 92, 255, .38), inset 0 -3px 6px rgba(123, 92, 255, .12), 0 10px 22px -14px rgba(123, 92, 255, .6);
}
.btn--ghost::before { background: linear-gradient(180deg, rgba(255, 255, 255, .95), rgba(255, 255, 255, 0)); }
.btn--ghost:hover { box-shadow: inset 0 0 0 1.5px rgba(123, 92, 255, .55), inset 0 -3px 6px rgba(123, 92, 255, .12), 0 14px 26px -14px rgba(123, 92, 255, .7); }
.btn--cherry {
  background: linear-gradient(180deg, #ff5d84 0%, #d81b50 52%, #b30d40 100%);
  box-shadow: inset 0 -4px 8px rgba(120, 0, 40, .35), inset 0 1px 1px rgba(255, 255, 255, .55), 0 14px 26px -12px rgba(216, 27, 80, .75);
}
.btn--cherry:hover { box-shadow: inset 0 -4px 8px rgba(120, 0, 40, .35), inset 0 1px 1px rgba(255, 255, 255, .55), 0 18px 32px -12px rgba(216, 27, 80, .85); }
.btn.is-loading { pointer-events: none; }
.btn.is-loading .btn__ico { animation: spin .8s linear infinite; }
.btn.is-done { background: linear-gradient(180deg, #4fb02a, #2f7d12 55%, #24660b); box-shadow: inset 0 -4px 8px rgba(10, 60, 0, .3), inset 0 1px 1px rgba(255, 255, 255, .5), 0 14px 26px -12px rgba(47, 125, 18, .75); }
@keyframes spin { to { rotate: 360deg; } }
.is-jiggle { animation: jiggle .6s var(--ease); }
@keyframes jiggle {
  0% { transform: scale(1); }
  18% { transform: scale(1.1, .86); }
  38% { transform: scale(.92, 1.08); }
  58% { transform: scale(1.04, .96); }
  78% { transform: scale(.99, 1.01); }
  100% { transform: none; }
}

.ibtn {
  position: relative;
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  flex: none;
  border: 0;
  border-radius: 999px;
  cursor: pointer;
  color: var(--ink);
  background: linear-gradient(180deg, #fff, #f3eeff);
  box-shadow: inset 0 0 0 1px rgba(123, 92, 255, .2), inset 0 -2px 4px rgba(123, 92, 255, .1), 0 6px 14px -10px rgba(123, 92, 255, .7);
  transition: transform .4s var(--spring), box-shadow .2s;
}
.ibtn:hover { box-shadow: inset 0 0 0 1px rgba(123, 92, 255, .4), inset 0 -2px 4px rgba(123, 92, 255, .1), 0 10px 18px -10px rgba(123, 92, 255, .8); }
.ibtn:active { transform: scale(.88); transition-duration: .08s; }
.ibtn:disabled { opacity: .4; cursor: default; box-shadow: inset 0 0 0 1px rgba(123, 92, 255, .2); }
.ibtn:disabled:active { transform: none; }

/* ---------- skip link ---------- */
.skip {
  position: fixed;
  z-index: 100;
  top: 8px;
  inset-inline-start: 8px;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 1.1rem;
  border-radius: 999px;
  background: var(--ink);
  color: #fff;
  font-weight: 700;
  text-decoration: none;
  transform: translateY(-160%);
  transition: transform .25s var(--ease);
}
.skip:focus { transform: none; }

/* ---------- header ---------- */
.hdr {
  position: sticky;
  top: 0;
  z-index: 40;
  background: rgba(247, 243, 255, .8);
  -webkit-backdrop-filter: blur(14px) saturate(1.5);
  backdrop-filter: blur(14px) saturate(1.5);
  border-bottom: 1px solid transparent;
  transition: border-color .2s, box-shadow .2s;
}
.hdr.is-scrolled { border-color: rgba(123, 92, 255, .14); box-shadow: 0 12px 30px -26px rgba(83, 50, 230, .7); }
.hdr__bar { height: var(--hdr); display: flex; align-items: center; gap: 12px; }
.logo {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: 44px;
  margin-inline-end: auto;
  color: var(--ink);
  text-decoration: none;
  border-radius: 14px;
}
.logo__egg { width: 28px; height: 34px; transition: transform .5s var(--spring); }
.logo:hover .logo__egg { transform: rotate(-8deg) scale(1.06); }
.logo:active .logo__egg { transform: scale(1.12, .86); }
.logo__word { font: 800 1.25rem/1 var(--f-latin-d); letter-spacing: -.02em; white-space: nowrap; }
.nav { display: none; }
.nav ul { display: flex; gap: 2px; list-style: none; margin: 0; padding: 0; }
.nav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 14px;
  border-radius: 999px;
  color: var(--ink);
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  transition: background .2s, transform .4s var(--spring);
}
.nav a:hover { background: rgba(123, 92, 255, .1); }
.nav a:active { transform: scale(.94); }
.nav a[aria-current="page"] { background: #fff; box-shadow: inset 0 0 0 1px rgba(123, 92, 255, .25); font-weight: 700; }
.hdr__tools { display: flex; align-items: center; gap: 8px; }
.cart__n {
  position: absolute;
  top: -4px;
  inset-inline-end: -4px;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  border-radius: 999px;
  font: 700 12px/22px var(--f-latin-d);
  text-align: center;
  color: #fff;
  background: linear-gradient(180deg, #ff6f8f, #d81b50 60%, #b30d40);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55), 0 4px 10px -3px rgba(216, 27, 80, .8);
  transition: transform .45s var(--spring);
}
.cart.is-empty .cart__n { transform: scale(0); }
.cart__n.is-bump { animation: bump .75s var(--spring); }
@keyframes bump {
  0% { transform: scale(1); }
  22% { transform: translateY(-7px) scale(1.45, .72); }
  44% { transform: translateY(-2px) scale(.8, 1.25); }
  64% { transform: scale(1.12, .9); }
  84% { transform: scale(.97, 1.03); }
  100% { transform: scale(1); }
}
.lang {
  display: inline-flex;
  padding: 3px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .8);
  box-shadow: inset 0 0 0 1px rgba(123, 92, 255, .22);
}
.lang button {
  min-width: 52px;
  min-height: 44px;
  padding: 0 12px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--ink-2);
  font: 600 .9375rem/1 var(--f-b);
  cursor: pointer;
  transition: transform .4s var(--spring), background .2s;
}
.lang button[lang="ar"] { font-family: 'Noto Sans Arabic', sans-serif; font-size: 1rem; }
.lang button:active { transform: scale(.9); }
.lang button[aria-pressed="true"] {
  color: #fff;
  background: linear-gradient(180deg, #8f75ff, #5232e3);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5), 0 6px 14px -6px rgba(83, 50, 230, .8);
}
.lang--hdr, .hsearch { display: none; }
@media (min-width: 1100px) {
  .nav { display: block; }
  .nav { margin-inline: auto; }
  .logo { margin-inline-end: 0; }
  .lang--hdr { display: inline-flex; }
  .hsearch { display: block; }
  .search-btn, .menu-btn { display: none; }
}

/* desktop search + results */
.hsearch { position: relative; width: clamp(200px, 18vw, 270px); margin: 0; }
.hsearch input, .ssearch input {
  width: 100%;
  height: 44px;
  padding-inline: 44px 14px;
  border: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, .9);
  box-shadow: inset 0 0 0 1.5px rgba(123, 92, 255, .24);
  color: var(--ink);
  font-size: 1rem;
  transition: box-shadow .2s;
}
.hsearch input::placeholder, .ssearch input::placeholder { color: #6f6588; }
.hsearch input:focus, .ssearch input:focus { outline: none; box-shadow: inset 0 0 0 2px var(--grape-ink), 0 0 0 5px rgba(123, 92, 255, .18); }
.hsearch__ico, .ssearch__ico { position: absolute; top: 10px; inset-inline-start: 13px; color: var(--ink-3); pointer-events: none; }
.hsearch .sres {
  position: absolute;
  top: calc(100% + 10px);
  inset-inline-end: 0;
  width: 400px;
  max-height: min(70vh, 560px);
  overflow: auto;
  padding: 10px;
  border-radius: 24px;
  background: rgba(255, 255, 255, .97);
  box-shadow: inset 0 0 0 1px rgba(123, 92, 255, .14), 0 30px 60px -24px rgba(31, 20, 51, .45);
  animation: pop .35s var(--spring);
}
@keyframes pop { from { opacity: 0; transform: translateY(-6px) scale(.97); } }
.sres__head { padding: 6px 10px 8px; font-size: .9375rem; color: var(--ink-3); }
.sres__none { display: flex; gap: 10px; align-items: flex-start; padding: 10px; color: var(--ink-2); }
.sres__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.sres__item {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 64px;
  padding: 6px 10px 6px 6px;
  border-radius: 18px;
  color: var(--ink);
  text-decoration: none;
  transition: background .15s, transform .4s var(--spring);
}
.sres__item:hover, .sres__item:focus-visible { background: #f3eeff; }
.sres__item:active { transform: scale(.98); }
.sres__art { width: 52px; height: 52px; flex: none; border-radius: 14px; background: #f6f2ff; overflow: hidden; }
.sres__art svg { width: 100%; height: 100%; }
.sres__txt { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.sres__name { font-weight: 700; line-height: 1.3; }
.sres__meta { font-size: .875rem; color: var(--ink-3); }
.sres__price { font: 800 1rem/1 var(--f-d); white-space: nowrap; }

/* ---------- sheets (menu, phone search) ---------- */
.sheet {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  justify-content: flex-end;
  background: rgba(31, 20, 51, .38);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  animation: fade .25s var(--ease);
}
.sheet[hidden] { display: none; }
@keyframes fade { from { opacity: 0; } }
.sheet__panel {
  --dx: 40px;
  width: min(420px, 100%);
  height: 100%;
  overflow: auto;
  overscroll-behavior: contain;
  padding: 0 var(--gut) calc(24px + env(safe-area-inset-bottom));
  background: linear-gradient(180deg, #ffffff, #f4efff);
  box-shadow: -30px 0 60px -30px rgba(31, 20, 51, .5);
  animation: sheetIn .5s var(--spring);
  display: flex;
  flex-direction: column;
}
[dir="rtl"] .sheet__panel { --dx: -40px; }
@keyframes sheetIn { from { transform: translateX(var(--dx)); opacity: 0; } }
.sheet__top { display: flex; align-items: center; justify-content: space-between; gap: 12px; height: var(--hdr); flex: none; }
.sheet__nav { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 6px; }
.sheet__nav a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 60px;
  padding: 0 18px;
  border-radius: 20px;
  background: rgba(255, 255, 255, .8);
  box-shadow: inset 0 0 0 1px rgba(123, 92, 255, .12);
  color: var(--ink);
  font: 700 1.25rem/1.2 var(--f-d);
  text-decoration: none;
  transition: transform .4s var(--spring), background .2s;
}
.sheet__nav a:hover { background: #fff; }
.sheet__nav a:active { transform: scale(.97, .94); }
.sheet__nav a .ico { color: var(--grape-ink); }
.sheet__lang { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 22px; padding: 10px 10px 10px 18px; border-radius: 20px; background: rgba(123, 92, 255, .08); font-weight: 600; }
[dir="rtl"] .sheet__lang { padding: 10px 18px 10px 10px; }
.sheet__cta { margin-top: 18px; }
.sheet--search { justify-content: stretch; align-items: flex-start; }
.sheet--search .sheet__panel {
  --dx: 0px;
  width: 100%;
  height: auto;
  max-height: 100%;
  border-radius: 0 0 28px 28px;
  padding-top: 10px;
  animation: drop .45s var(--spring);
}
@keyframes drop { from { transform: translateY(-24px); opacity: 0; } }
.ssearch { position: relative; display: flex; align-items: center; gap: 10px; margin: 0; }
.ssearch > div, .ssearch input { flex: 1; }
.ssearch input { height: 52px; font-size: 1.0625rem; }
.ssearch__ico { top: 14px; }
.sheet--search .sres { margin-top: 10px; }

/* ---------- sections ---------- */
.sec { padding-block: clamp(48px, 7vw, 104px) 0; }
.shead { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 22px; }
.shead .h2 { margin-top: 8px; }
.row__nav { display: none; gap: 10px; }
@media (min-width: 900px) { .row__nav { display: flex; } .shead { margin-bottom: 30px; } }

/* reveal: a soft settle (translate/scale only; content is never invisible) */
[data-reveal].pre { translate: 0 24px; scale: .97; }
[data-reveal].in { animation: settle .85s var(--spring) both; }
@keyframes settle { from { translate: 0 24px; scale: .97; } to { translate: 0 0; scale: 1; } }

/* ---------- hero ---------- */
.hero { padding-block: 14px 8px; }
.hero__grid, .pdp, .calc, .shero__grid, .pinfo, .rules, .band, .foot__grid { grid-template-columns: minmax(0, 1fr); }
.hero__grid { display: grid; gap: 22px; }
.hero__copy { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.hero__ctas { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 6px; }
@media (min-width: 900px) {
  .hero { padding-block: clamp(20px, 3vh, 44px) 24px; }
  .hero__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: center; gap: clamp(28px, 4vw, 64px); }
  .hero__copy { gap: 18px; }
}

.stage { position: relative; min-width: 0; }
.stage__view {
  position: relative;
  aspect-ratio: 1 / 1;
  border-radius: var(--r-xl);
  overflow: hidden;
  touch-action: pan-y;
  background:
    radial-gradient(90% 60% at 50% 88%, rgba(255, 255, 255, .95) 0%, rgba(255, 255, 255, 0) 70%),
    radial-gradient(110% 90% at 50% 18%, #ffffff 0%, #f3edff 52%, #e6dcff 100%);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, .95),
    inset 0 -50px 90px -50px rgba(123, 92, 255, .32),
    0 40px 80px -44px rgba(123, 92, 255, .6),
    0 20px 40px -30px rgba(255, 61, 104, .35);
}
@media (min-width: 600px) { .stage__view { aspect-ratio: 6 / 5; } }
.stage__poster, .stage__canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.stage__poster { transition: opacity .6s var(--ease); }
.stage__canvas { opacity: 0; transition: opacity .6s var(--ease); touch-action: pan-y; cursor: grab; }
.stage__canvas:active { cursor: grabbing; }
.stage__view.is-live .stage__canvas { opacity: 1; }
.stage__view.is-live .stage__poster { opacity: 0; }
@media (max-width: 599px) { .poster-side { display: none; } }
.stage__hint {
  position: absolute;
  z-index: 2;
  top: 12px;
  inset-inline-start: 12px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px 6px 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .82);
  box-shadow: inset 0 0 0 1px rgba(123, 92, 255, .14);
  color: var(--ink-2);
  font: 500 .875rem/1.2 var(--f-b);
  pointer-events: none;
}
[dir="rtl"] .stage__hint { padding: 6px 8px 6px 12px; }
.stage__hint .ico, .viewer__hint .ico { width: 18px; height: 18px; color: var(--grape-ink); }
.stage__hint [data-ico], .viewer__hint [data-ico] { width: 18px; height: 18px; }
.stage__nav { position: absolute; z-index: 2; top: 50%; translate: 0 -50%; width: 48px; height: 48px; }
.stage__nav--prev { inset-inline-start: 10px; }
.stage__nav--next { inset-inline-end: 10px; }
.stage__nav:active { transform: scale(.86); }
.stage__bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 16px; margin-top: 14px; }
.stage__cap {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 52px;
  max-width: 100%;
  padding: 4px 6px 4px 6px;
  border-radius: 999px;
  background: linear-gradient(180deg, #fff, #f6f2ff);
  box-shadow: inset 0 0 0 1px rgba(123, 92, 255, .18), 0 12px 24px -18px rgba(83, 50, 230, .7);
  color: var(--ink);
  text-decoration: none;
  transition: transform .45s var(--spring);
}
.stage__cap:hover { transform: translateY(-2px); }
.stage__cap:active { transform: scale(.97, .93); }
.stage__count {
  display: grid;
  place-items: center;
  min-width: 44px;
  height: 44px;
  padding: 0 8px;
  border-radius: 999px;
  background: var(--ink);
  color: #fff;
  font: 700 .875rem/1 var(--f-latin-d);
  white-space: nowrap;
}
.stage__name { font-weight: 700; line-height: 1.25; min-width: 0; }
.stage__price { font: 800 1rem/1 var(--f-d); color: var(--grape-ink); white-space: nowrap; }
.stage__go { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: #efe9ff; color: var(--grape-ink); }
.chips { display: flex; gap: 8px; margin: 0; padding: 0; border: 0; min-inline-size: 0; }
.chip {
  --c: #7b5cff;
  position: relative;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  cursor: pointer;
  background:
    radial-gradient(circle at 34% 28%, rgba(255, 255, 255, .95) 0 9%, rgba(255, 255, 255, 0) 24%),
    radial-gradient(circle at 50% 65%, var(--c) 0%, color-mix(in srgb, var(--c) 72%, #2a1650) 100%);
  box-shadow: inset 0 -4px 8px rgba(42, 22, 80, .18), inset 0 0 0 1px rgba(255, 255, 255, .6), 0 8px 16px -8px var(--c);
  transition: transform .45s var(--spring), box-shadow .2s;
}
.chip:hover { transform: translateY(-2px) scale(1.06); }
.chip:active { transform: scale(1.15, .8); transition-duration: .08s; }
.chip:has(input:checked) { box-shadow: inset 0 -4px 8px rgba(42, 22, 80, .18), 0 0 0 3px #fff, 0 0 0 5.5px var(--ink), 0 10px 18px -8px var(--c); }
.chip:has(input:focus-visible) { outline: 3px solid var(--grape-ink); outline-offset: 7px; }
.stage__note { width: 100%; font-size: .875rem; color: var(--ink-3); }
.stage.no-3d .chips, .stage.no-3d .stage__hint, .stage.no-3d .stage__note { display: none; }
@media (min-width: 600px) {
  .stage__nav { top: auto; bottom: 14px; translate: none; }
  .stage__nav--prev { inset-inline-start: auto; inset-inline-end: 70px; }
  .stage__nav--next { inset-inline-end: 14px; }
}

/* ---------- how it works ---------- */
.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.step {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 2px 14px;
  align-items: start;
  padding: 16px;
  border-radius: var(--r-lg);
  background: linear-gradient(165deg, rgba(255, 255, 255, .96), rgba(255, 255, 255, .7));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .9), 0 20px 40px -30px var(--glow);
  align-content: start;
}
.step__blob { grid-row: span 3; width: 56px; height: 56px; }
.step__blob svg { width: 100%; height: 100%; }
.step__n { font: 800 .875rem/1.2 var(--f-latin-d); color: var(--grape-ink); letter-spacing: .06em; }
.step h3 { font: 700 1.1875rem/1.25 var(--f-b); }
[lang="ar"] .step h3 { font-weight: 600; }
.step p { color: var(--ink-2); }
@media (min-width: 600px) { .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) {
  .steps { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
  .step { grid-template-columns: 1fr; padding: 24px; gap: 6px; }
  .step__blob { grid-row: auto; width: 76px; height: 76px; margin-bottom: 8px; }
}

/* ---------- product cards: glossy glass tiles with a colored glow ---------- */
.grid4 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
@media (min-width: 900px) { .grid4 { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; } }
.card {
  --hue: #7b5cff;
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  border-radius: var(--r-lg);
  background: linear-gradient(170deg, rgba(255, 255, 255, .97), rgba(255, 255, 255, .74));
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, .95),
    inset 0 -2px 0 color-mix(in srgb, var(--hue) 22%, transparent),
    0 22px 40px -28px color-mix(in srgb, var(--hue) 85%, transparent);
  transition: transform .5s var(--spring), box-shadow .3s var(--ease);
}
.card:hover {
  transform: translateY(-5px);
  box-shadow: inset 0 0 0 1px #fff, inset 0 -2px 0 color-mix(in srgb, var(--hue) 30%, transparent), 0 30px 50px -26px color-mix(in srgb, var(--hue) 95%, transparent);
}
.card:active:not(:has(.card__add:active)) { transform: scale(.97, .95); transition-duration: .1s; }
.card__art {
  position: relative;
  aspect-ratio: 1 / 1;
  margin: 8px 8px 0;
  border-radius: calc(var(--r-lg) - 8px);
  overflow: hidden;
  background:
    radial-gradient(80% 60% at 50% 30%, #ffffff 0%, color-mix(in srgb, var(--hue) 10%, #fbf9ff) 60%, color-mix(in srgb, var(--hue) 22%, #f2ecff) 100%);
}
.card__art svg { width: 100%; height: 100%; transition: transform .7s var(--spring); }
.card:hover .card__art svg { transform: scale(1.05) rotate(-1.5deg); }
.card .mat {
  position: absolute;
  top: 16px;
  inset-inline-start: 16px;
}
.mat {
  display: inline-flex;
  align-items: center;
  height: 26px;
  padding: 0 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .92);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--hue, #7b5cff) 35%, transparent);
  color: var(--ink);
  font: 700 .75rem/1 var(--f-latin-d);
  letter-spacing: .05em;
}
.card__body { display: flex; flex-direction: column; gap: 4px; flex: 1; padding: 12px 14px 14px; }
.card__name { font: 700 1rem/1.3 var(--f-b); letter-spacing: -.005em; }
.card__link { display: flex; flex-direction: column; flex: 1; color: inherit; text-decoration: none; border-radius: var(--r-lg); }
.card__link:focus-visible { outline: 3px solid var(--grape-ink); outline-offset: 3px; }
.card__desc { display: none; color: var(--ink-2); }
.card__by { font-size: .875rem; line-height: 1.35; color: var(--ink-3); }
.card__foot { display: flex; align-items: center; gap: 8px; margin-top: auto; padding-top: 8px; min-height: 50px; padding-inline-end: 54px; }
.card__price { font: 800 1.125rem/1 var(--f-d); white-space: nowrap; }
[lang="ar"] .card__price { font-size: 1rem; }
.card__add {
  position: absolute;
  z-index: 2;
  inset-block-end: 10px;
  inset-inline-end: 10px;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  color: var(--ink);
  background:
    radial-gradient(circle at 36% 26%, rgba(255, 255, 255, .95) 0 10%, rgba(255, 255, 255, 0) 26%),
    radial-gradient(circle at 50% 70%, var(--hue) 0%, color-mix(in srgb, var(--hue) 70%, #2a1650) 115%);
  box-shadow: inset 0 -3px 6px rgba(42, 22, 80, .2), inset 0 0 0 1px rgba(255, 255, 255, .5), 0 10px 18px -8px var(--hue);
  transition: transform .45s var(--spring);
}
.card__add:hover { transform: scale(1.08); }
.card__add:active { transform: scale(1.15, .8); transition-duration: .08s; }
.card__add.is-done { background: radial-gradient(circle at 36% 26%, rgba(255, 255, 255, .95) 0 10%, rgba(255, 255, 255, 0) 26%), radial-gradient(circle at 50% 70%, #b7f07f, #5fae2c 115%); }
.card__add .ico { width: 22px; height: 22px; stroke-width: 2.6; }
@media (min-width: 600px) {
  .card--big .card__desc { display: block; margin-top: 4px; }
  .card__body { padding: 14px 18px 16px; }
  .card__name { font-size: 1.0625rem; }
}

/* horizontal rows: native scroll-snap, the next card peeks */
.row__track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 64%;
  gap: 12px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--gut);
  padding: 6px var(--gut) 30px;
  margin: -6px calc(-1 * var(--gut)) -30px;
  scrollbar-width: none;
}
.row__track::-webkit-scrollbar { display: none; }
.row__track > * { scroll-snap-align: start; }
@media (min-width: 600px) { .row__track { grid-auto-columns: 42%; gap: 16px; } }
@media (min-width: 900px) { .row__track { grid-auto-columns: calc((100% - 3 * 20px) / 4.25); gap: 20px; margin-inline: 0; padding-inline: 0; scroll-padding-inline: 0; } }

/* ---------- categories: gummy blobs ---------- */
.gums { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
@media (min-width: 900px) { .gums { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 16px; } }
.gum {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  padding: 6px 4px 12px;
  border-radius: 24px;
  color: var(--ink);
  text-align: center;
  text-decoration: none;
  transition: background .2s;
}
.gum:hover { background: rgba(255, 255, 255, .6); }
.gum .gummy { width: 100%; max-width: 116px; aspect-ratio: 1; transition: transform .55s var(--spring); }
.gum:hover .gummy { transform: translateY(-5px) rotate(-4deg) scale(1.05); }
.gum:active .gummy { transform: scale(1.14, .82); transition-duration: .1s; }
.gum__label { font: 700 .9375rem/1.3 var(--f-b); }

/* ---------- seller band ---------- */
.band {
  position: relative;
  display: grid;
  gap: 8px;
  padding: 28px 20px 30px;
  border-radius: 36px;
  overflow: hidden;
  background:
    radial-gradient(60% 80% at 100% 0%, rgba(255, 61, 104, .16), transparent 60%),
    radial-gradient(60% 80% at 0% 100%, rgba(123, 92, 255, .14), transparent 60%),
    linear-gradient(150deg, #ffffff 0%, #f5f0ff 55%, #fff0f4 100%);
  box-shadow: inset 0 0 0 1px #fff, 0 40px 70px -46px rgba(216, 27, 80, .6);
}
.band__copy { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.band__text { font-size: 1.0625rem; color: var(--ink-2); max-width: 32rem; }
.band__ctas { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 8px; }
.band__num { order: -1; display: flex; flex-direction: column; align-items: center; text-align: center; }
.j90 {
  position: relative;
  display: inline-block;
  font: 800 clamp(6.6rem, 30vw, 14.5rem)/.86 var(--f-latin-d);
  letter-spacing: -.045em;
  padding: .04em .06em .02em;
  transform-origin: 50% 100%;
  background: linear-gradient(180deg, #ffd3de 0%, #ff6489 30%, #e41b52 64%, #a10a39 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 16px 18px rgba(255, 61, 104, .35)) drop-shadow(0 2px 0 rgba(255, 255, 255, .6));
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
}
.j90::after {
  content: attr(data-t);
  position: absolute;
  inset: 0;
  padding: inherit;
  background: linear-gradient(180deg, rgba(255, 255, 255, .95) 0%, rgba(255, 255, 255, .2) 30%, rgba(255, 255, 255, 0) 42%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  clip-path: inset(4% 10% 50% 6%);
}
.band__of { margin-top: 2px; font: 700 1.0625rem/1.3 var(--f-b); color: var(--cherry-ink); }
@media (min-width: 900px) {
  .band { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); align-items: center; padding: 56px 64px; gap: 32px; }
  .band__num { order: 0; }
  .band__text { font-size: 1.1875rem; }
}

/* ---------- trust ---------- */
.trust { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.trust li {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 18px;
  border-radius: 22px;
  background: linear-gradient(165deg, rgba(255, 255, 255, .95), rgba(255, 255, 255, .7));
  box-shadow: inset 0 0 0 1px #fff, 0 18px 34px -28px color-mix(in srgb, var(--hue) 90%, transparent);
}
.trust__ico {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  flex: none;
  border-radius: 16px;
  color: var(--ink);
  background:
    radial-gradient(circle at 32% 24%, rgba(255, 255, 255, .9) 0 8%, rgba(255, 255, 255, 0) 30%),
    linear-gradient(160deg, color-mix(in srgb, var(--hue) 55%, #fff), var(--hue));
  box-shadow: inset 0 -3px 6px rgba(42, 22, 80, .15), 0 8px 16px -10px var(--hue);
}
.trust strong { display: block; font-weight: 700; line-height: 1.3; }
.trust__d { display: block; color: var(--ink-2); font-size: .9375rem; }
@media (min-width: 600px) { .trust { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; } }
@media (min-width: 1100px) { .trust { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* ---------- footer ---------- */
.foot {
  margin-top: clamp(64px, 9vw, 120px);
  padding: 44px 0 calc(28px + env(safe-area-inset-bottom));
  background: linear-gradient(180deg, rgba(255, 255, 255, .55), rgba(123, 92, 255, .09));
  border-top: 1px solid var(--line);
}
.foot__grid { display: grid; gap: 24px 16px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.foot__brand { grid-column: 1 / -1; }
@media (min-width: 600px) { .foot__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 900px) { .foot__brand { grid-column: auto; } }
@media (min-width: 900px) { .foot__grid { grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 28px; } }
.foot__brand p { color: var(--ink-2); margin-top: 8px; }
.foot__brand .foot__domain { font: 700 1rem/1.4 var(--f-latin-d); color: var(--grape-ink); }
.foot h2 { font: 700 1rem/1.3 var(--f-b); margin-bottom: 4px; color: var(--ink); }
.foot ul { list-style: none; margin: 0; padding: 0; }
.foot li a {
  display: flex;
  align-items: center;
  min-height: 44px;
  color: var(--ink-2);
  text-decoration: none;
  transition: color .15s, translate .3s var(--spring);
}
.foot li a:hover { color: var(--grape-ink); text-decoration: underline; text-underline-offset: 4px; }
.foot__base {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 24px;
  margin-top: 28px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
  color: var(--ink-3);
  font-size: .9375rem;
}
.foot__lang { display: flex; align-items: center; gap: 12px; }

/* ---------- toast ---------- */
.toast {
  position: fixed;
  z-index: 90;
  inset-inline: 0;
  bottom: calc(20px + env(safe-area-inset-bottom));
  width: max-content;
  max-width: calc(100% - 32px);
  margin-inline: auto;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 18px 10px 10px;
  border-radius: 999px;
  background: rgba(31, 20, 51, .94);
  color: #fff;
  font-weight: 600;
  line-height: 1.35;
  box-shadow: 0 18px 40px -16px rgba(31, 20, 51, .6), 0 0 0 1px rgba(255, 255, 255, .08);
  opacity: 0;
  transform: translateY(140%) scale(.9);
  transition: transform .55s var(--spring), opacity .25s;
  pointer-events: none;
}
[dir="rtl"] .toast { padding: 10px 10px 10px 18px; }
.toast.is-on { opacity: 1; transform: none; }
body.bar-on .toast { bottom: calc(88px + env(safe-area-inset-bottom)); }
.toast__ico { display: grid; place-items: center; width: 34px; height: 34px; flex: none; border-radius: 50%; color: var(--ink); background: linear-gradient(180deg, #c6f598, #86d64a); }
.toast__ico .ico { width: 20px; height: 20px; }

/* ---------- product page ---------- */
.crumbs ol { display: flex; flex-wrap: wrap; align-items: center; list-style: none; margin: 0; padding: 4px 0; }
.crumbs li { display: inline-flex; align-items: center; }
.crumbs li + li::before { content: "/"; margin-inline: 2px; color: var(--ink-3); }
.crumbs a, .crumbs [aria-current] { display: inline-flex; align-items: center; min-height: 44px; padding: 0 8px; border-radius: 12px; }
.crumbs a { color: var(--ink-2); text-decoration: none; }
.crumbs a:hover { color: var(--grape-ink); text-decoration: underline; text-underline-offset: 4px; }
.crumbs [aria-current] { color: var(--ink); font-weight: 600; }
.crumbs li:first-child a { padding-inline-start: 0; }
@media (max-width: 599px) { .crumbs li:last-child { display: none; } }

.pdp { display: grid; gap: 22px; padding-top: 4px; }
@media (min-width: 900px) {
  .pdp { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(28px, 4vw, 56px); align-items: start; }
  .pdp__media { position: sticky; top: calc(var(--hdr) + 16px); }
}
.viewer {
  position: relative;
  aspect-ratio: 1 / 1;
  border-radius: var(--r-xl);
  overflow: hidden;
  touch-action: pan-y;
  background:
    radial-gradient(70% 45% at 50% 92%, rgba(123, 92, 255, .22) 0%, rgba(123, 92, 255, 0) 70%),
    radial-gradient(100% 80% at 50% 20%, #ffffff 0%, #f2ecff 55%, #e5dbff 100%);
  box-shadow: inset 0 0 0 1px #fff, 0 40px 80px -46px rgba(123, 92, 255, .7);
}
@media (min-width: 900px) { .viewer { aspect-ratio: auto; height: min(calc(100svh - var(--hdr) - 48px), 760px); min-height: 480px; } }
.viewer__host { position: absolute; inset: 0; }
.viewer__poster, .viewer__canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.viewer__poster { padding: 8%; transition: opacity .6s var(--ease); }
.viewer__canvas { opacity: 0; transition: opacity .6s var(--ease); touch-action: pan-y; cursor: grab; }
.viewer__canvas:active { cursor: grabbing; }
.viewer__host.is-live .viewer__canvas { opacity: 1; }
.viewer__host.is-live .viewer__poster { opacity: 0; }
.viewer__hint {
  position: absolute;
  z-index: 2;
  top: 12px;
  inset-inline-start: 12px;
  inset-inline-end: 12px;
  width: max-content;
  max-width: calc(100% - 24px);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px 6px 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .85);
  box-shadow: inset 0 0 0 1px rgba(123, 92, 255, .14);
  color: var(--ink-2);
  font: 500 .875rem/1.25 var(--f-b);
  pointer-events: none;
  transition: opacity .4s;
}
.viewer.is-touched .viewer__hint { opacity: 0; }
.viewer__zoom { position: absolute; z-index: 2; inset-inline-end: 10px; top: 50%; translate: 0 -50%; display: flex; flex-direction: column; gap: 8px; }
.viewer__toggles { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
@media (min-width: 900px) {
  .viewer__zoom { top: auto; bottom: 14px; inset-inline-end: 14px; translate: none; }
  .viewer__toggles { position: absolute; z-index: 2; inset-inline-start: 14px; bottom: 14px; margin: 0; flex-direction: column; align-items: flex-start; }
}
.tog {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 14px 0 10px;
  border: 0;
  border-radius: 999px;
  cursor: pointer;
  color: var(--ink);
  font: 600 .9375rem/1 var(--f-b);
  background: linear-gradient(180deg, #fff, #f3eeff);
  box-shadow: inset 0 0 0 1px rgba(123, 92, 255, .22), 0 6px 14px -10px rgba(123, 92, 255, .7);
  transition: transform .45s var(--spring), background .2s;
}
[dir="rtl"] .tog { padding: 0 10px 0 14px; }
.tog:active { transform: scale(.94, .88); }
.tog[aria-pressed="true"] { color: #fff; background: linear-gradient(180deg, #8f75ff, #5232e3); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5), 0 8px 18px -8px rgba(83, 50, 230, .9); }
#lightBtn[aria-pressed="true"] { color: var(--ink); background: linear-gradient(180deg, #ffe7a8, #ffb547); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6), 0 8px 22px -6px rgba(255, 159, 28, .9); }
.viewer__note { margin-top: 10px; font-size: .9375rem; color: var(--ink-3); display: flex; gap: 8px; align-items: center; }
.viewer__note[hidden] { display: none; }
.no-3d .viewer__zoom, .no-3d .viewer__toggles, .no-3d .viewer__hint { display: none; }

.buy { display: flex; flex-direction: column; gap: 16px; }
.h-prod { font-weight: 800; font-size: clamp(2.1rem, 1.6rem + 1.9vw, 3.1rem); line-height: 1; letter-spacing: -.025em; }
[lang="ar"] .h-prod { font-family: var(--f-latin-d); }
.buy__maker { color: var(--ink-2); margin-top: -6px; }
.buy__price { font: 800 2rem/1 var(--f-d); color: var(--ink); }
.matinfo {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 14px 16px;
  border-radius: 20px;
  background: linear-gradient(165deg, #fff, rgba(255, 255, 255, .75));
  box-shadow: inset 0 0 0 1px rgba(46, 196, 255, .35), 0 14px 30px -24px rgba(46, 196, 255, .9);
}
.matinfo__chip {
  display: grid;
  place-items: center;
  min-width: 64px;
  height: 40px;
  padding: 0 10px;
  border-radius: 14px;
  font: 800 .9375rem/1 var(--f-latin-d);
  letter-spacing: .04em;
  color: var(--ink);
  background: radial-gradient(circle at 30% 20%, rgba(255, 255, 255, .9) 0 8%, rgba(255, 255, 255, 0) 30%), linear-gradient(160deg, #a6e6ff, #2ec4ff);
  box-shadow: inset 0 -3px 6px rgba(7, 95, 134, .2), 0 6px 14px -8px rgba(46, 196, 255, .9);
}
.matinfo__k { display: block; font-weight: 700; }
.matinfo p { color: var(--ink-2); }
.swatches { margin: 0; padding: 0; border: 0; min-inline-size: 0; }
.swatches legend { padding: 0; margin-bottom: 10px; font-weight: 500; color: var(--ink-2); }
.swatches legend strong { color: var(--ink); }
.swatches__row { display: flex; flex-wrap: wrap; gap: 12px; }
.sw {
  --c: #d8bf94;
  position: relative;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  cursor: pointer;
  background:
    radial-gradient(circle at 34% 26%, rgba(255, 255, 255, .7) 0 8%, rgba(255, 255, 255, 0) 26%),
    radial-gradient(circle at 50% 60%, var(--c), color-mix(in srgb, var(--c) 78%, #1f1433));
  box-shadow: inset 0 -3px 6px rgba(31, 20, 51, .18), inset 0 0 0 1px rgba(31, 20, 51, .12), 0 8px 16px -10px rgba(31, 20, 51, .6);
  transition: transform .45s var(--spring), box-shadow .2s;
}
.sw:hover { transform: translateY(-2px); }
.sw:active { transform: scale(1.12, .84); transition-duration: .08s; }
.sw:has(input:checked) { box-shadow: inset 0 -3px 6px rgba(31, 20, 51, .18), 0 0 0 3px #fff, 0 0 0 5.5px var(--grape-ink), 0 10px 20px -8px rgba(83, 50, 230, .6); }
.sw:has(input:focus-visible) { outline: 3px solid var(--grape-ink); outline-offset: 7px; }
.pod {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  align-self: flex-start;
  padding: 10px 16px 10px 10px;
  border-radius: 999px;
  background: #e5f7d5;
  box-shadow: inset 0 0 0 1px rgba(155, 225, 93, .7);
  color: var(--ink);
  font-weight: 600;
  line-height: 1.35;
}
[dir="rtl"] .pod { padding: 10px 10px 10px 16px; }
.pod [data-ico] { color: var(--lime-ink); }
.buy__actions { display: flex; gap: 10px; align-items: stretch; }
.qty {
  display: inline-flex;
  align-items: center;
  flex: none;
  padding: 4px;
  border-radius: 999px;
  background: #fff;
  box-shadow: inset 0 0 0 1.5px rgba(123, 92, 255, .22);
}
.qty__b { width: 44px; height: 44px; border: 0; border-radius: 50%; background: #f3eeff; color: var(--ink); cursor: pointer; display: grid; place-items: center; transition: transform .4s var(--spring); }
.qty__b:hover { background: #e9e1ff; }
.qty__b:active { transform: scale(.85); }
.qty output { min-width: 34px; text-align: center; font: 800 1.125rem/1 var(--f-latin-d); }
.buy__add { flex: 1; min-width: 0; }
.roomcta { display: flex; flex-direction: column; gap: 8px; }
.roomcta__btn { width: 100%; }
.roomcta__note { text-align: center; font-size: .9375rem; color: var(--ink-3); }

.pinfo { display: grid; gap: 16px; padding-top: clamp(40px, 6vw, 80px); }
@media (min-width: 900px) { .pinfo { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(28px, 4vw, 56px); } }
.panel {
  padding: 22px;
  border-radius: var(--r-lg);
  background: linear-gradient(165deg, rgba(255, 255, 255, .96), rgba(255, 255, 255, .72));
  box-shadow: inset 0 0 0 1px #fff, 0 22px 40px -32px var(--glow);
}
.panel h2 { font: 700 1.375rem/1.25 var(--f-d); margin-bottom: 10px; }
[lang="ar"] .panel h2 { font-weight: 600; font-size: 1.25rem; line-height: 1.6; }
.panel p + p { margin-top: 10px; }
.panel p { color: var(--ink-2); max-width: 62ch; }
.specs { margin: 0; display: grid; }
.specs div { display: flex; justify-content: space-between; gap: 16px; padding: 12px 0; border-top: 1px solid var(--line); }
.specs div:first-child { border-top: 0; padding-top: 0; }
.specs dt { color: var(--ink-3); }
.specs dd { margin: 0; font-weight: 700; text-align: end; }

.buybar {
  position: fixed;
  z-index: 45;
  inset-inline: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px var(--gut) calc(10px + env(safe-area-inset-bottom));
  background: rgba(255, 255, 255, .9);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  backdrop-filter: blur(14px) saturate(1.4);
  border-top: 1px solid var(--line);
  box-shadow: 0 -14px 30px -22px rgba(31, 20, 51, .5);
  transform: translateY(110%);
  visibility: hidden;
  transition: transform .4s var(--ease), visibility 0s linear .4s;
}
.buybar.is-on { transform: none; visibility: visible; transition: transform .5s var(--spring), visibility 0s; }
.buybar__info { display: flex; align-items: center; gap: 8px; margin-inline-end: auto; min-width: 0; }
.buybar__dot { width: 22px; height: 22px; flex: none; border-radius: 50%; background: #d8bf94; box-shadow: inset 0 -2px 4px rgba(31, 20, 51, .2), 0 0 0 2px #fff, 0 0 0 3px rgba(31, 20, 51, .15); }
.buybar__price { font: 800 1.25rem/1 var(--f-d); white-space: nowrap; }
.buybar__rv { width: 52px; height: 52px; }
.buybar__add { min-height: 52px; padding: 0 1.15rem; }
@media (max-width: 899px) { body.has-buybar { padding-bottom: calc(76px + env(safe-area-inset-bottom)); } }
@media (min-width: 900px) { .buybar { display: none; } }

/* ---------- sell page ---------- */
.shero { padding-block: 14px 8px; }
.shero__grid { display: grid; gap: 24px; align-items: center; }
.shero__copy { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
.nopes { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.nopes li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  padding: 0 14px 0 8px;
  border-radius: 999px;
  background: #fff;
  box-shadow: inset 0 0 0 1px rgba(123, 92, 255, .2), 0 8px 18px -14px rgba(123, 92, 255, .8);
  font-weight: 600;
}
[dir="rtl"] .nopes li { padding: 0 8px 0 14px; }
.nopes [data-ico] { width: 28px; height: 28px; border-radius: 50%; background: linear-gradient(160deg, #c6f598, #86d64a); color: var(--ink); }
.nopes .ico { width: 18px; height: 18px; stroke-width: 2.6; }
.shero__art { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 18px; max-width: 520px; width: 100%; justify-self: center; padding-bottom: 28px; }
.shero__art .g { display: flex; flex-direction: column; align-items: center; gap: 2px; transform-origin: 50% 100%; }
.shero__art .g:nth-child(even) { translate: 0 28px; }
.shero__art .g svg { width: min(100%, 190px); height: auto; }
.shero__art .g1 svg { rotate: -6deg; }
.shero__art .g2 svg { rotate: 5deg; }
.shero__art .g3 svg { rotate: 4deg; }
.shero__art .g4 svg { rotate: -5deg; }
.shero__art .g span {
  padding: 4px 12px;
  border-radius: 999px;
  background: #fff;
  color: var(--ink);
  font: 700 .875rem/1.3 var(--f-latin-d);
  letter-spacing: .02em;
  box-shadow: 0 6px 14px -8px rgba(31, 20, 51, .5);
}
@media (max-width: 599px) {
  .shero__art { grid-template-columns: repeat(4, minmax(0, 1fr)); max-width: none; gap: 8px; padding-bottom: 0; }
  .shero__art .g:nth-child(even) { translate: 0 12px; }
  .shero__art .g span { font-size: .75rem; padding: 3px 8px; text-align: center; }
  .hero__ctas .btn--lg { min-height: 52px; padding: 0 1.1rem; font-size: 1rem; }
}
@media (min-width: 900px) { .shero__grid { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 48px; } .shero { padding-block: clamp(24px, 4vh, 56px) 8px; } }

.steps6 { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; counter-reset: s6; }
.steps6 li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 2px 14px;
  align-items: start;
  padding: 18px;
  border-radius: var(--r-lg);
  background: linear-gradient(165deg, rgba(255, 255, 255, .96), rgba(255, 255, 255, .72));
  box-shadow: inset 0 0 0 1px #fff, 0 18px 34px -28px color-mix(in srgb, var(--hue) 90%, transparent);
}
.steps6 .n {
  grid-row: span 2;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 16px;
  font: 800 1.25rem/1 var(--f-latin-d);
  color: var(--ink);
  background: radial-gradient(circle at 32% 24%, rgba(255, 255, 255, .9) 0 8%, rgba(255, 255, 255, 0) 30%), linear-gradient(160deg, color-mix(in srgb, var(--hue) 50%, #fff), var(--hue));
  box-shadow: inset 0 -3px 6px rgba(42, 22, 80, .15), 0 8px 16px -10px var(--hue);
}
.steps6 h3 { font: 700 1.125rem/1.3 var(--f-b); }
[lang="ar"] .steps6 h3 { font-weight: 600; }
.steps6 p { color: var(--ink-2); }
@media (min-width: 600px) { .steps6 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .steps6 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; } .steps6 li { padding: 22px; } }

/* calculator */
.calc { display: grid; gap: 16px; }
@media (min-width: 900px) { .calc { grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr); gap: 28px; align-items: start; } }
.calc__in, .res {
  padding: 20px;
  border-radius: var(--r-xl);
  background: linear-gradient(165deg, rgba(255, 255, 255, .97), rgba(255, 255, 255, .78));
  box-shadow: inset 0 0 0 1px #fff, 0 30px 60px -42px var(--glow);
}
@media (min-width: 600px) { .calc__in, .res { padding: 28px; } }
.calc__in { display: flex; flex-direction: column; gap: 22px; }
.fgroup { margin: 0; padding: 0; border: 0; min-inline-size: 0; }
.fgroup > legend, .flabel { display: block; padding: 0; margin-bottom: 10px; font: 700 1.0625rem/1.3 var(--f-b); color: var(--ink); }
.drop {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
  padding: 14px 16px;
  border-radius: 20px;
  border: 2px dashed rgba(123, 92, 255, .38);
  background: rgba(255, 255, 255, .6);
}
.drop [data-ico] { width: 44px; height: 44px; flex: none; border-radius: 14px; background: #efe9ff; color: var(--grape-ink); }
.drop strong { display: block; font-weight: 700; }
.drop span.dim { display: block; font-size: .9375rem; color: var(--ink-3); }
.files { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
@media (min-width: 1100px) { .files { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.file {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  min-height: 44px;
  padding: 8px 8px 12px;
  border-radius: 20px;
  background: #fff;
  box-shadow: inset 0 0 0 1.5px rgba(123, 92, 255, .18);
  text-align: center;
  cursor: pointer;
  transition: transform .45s var(--spring), box-shadow .2s, background .2s;
}
.file:hover { box-shadow: inset 0 0 0 1.5px rgba(123, 92, 255, .4); }
.file:active { transform: scale(.95, .92); transition-duration: .08s; }
.file .art { width: 64px; height: 64px; }
@media (min-width: 600px) { .file .art { width: 76px; height: 76px; } }
.file__name { font-weight: 700; line-height: 1.25; font-size: .9375rem; }
.file__meta { font-size: .8125rem; color: var(--ink-3); direction: ltr; unicode-bidi: isolate; overflow-wrap: anywhere; }
.file:has(input:checked) { background: #f6f2ff; box-shadow: inset 0 0 0 2.5px var(--grape-ink), 0 14px 26px -16px rgba(83, 50, 230, .7); }
.file:has(input:focus-visible) { outline: 3px solid var(--grape-ink); outline-offset: 3px; }
.file__tick { position: absolute; top: 8px; inset-inline-end: 8px; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; color: #fff; background: var(--grape-ink); transform: scale(0); transition: transform .45s var(--spring); }
.file__tick .ico { width: 16px; height: 16px; stroke-width: 3; }
.file:has(input:checked) .file__tick { transform: scale(1); }
.est {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 12px 14px;
  border-radius: 16px;
  background: #e6f8ff;
  box-shadow: inset 0 0 0 1px rgba(46, 196, 255, .45);
  color: var(--ink);
}
.est [data-ico] { color: var(--blue-ink); }
.est.is-reading [data-ico] { animation: spin 1s linear infinite; }
.seg { display: inline-flex; padding: 4px; border-radius: 999px; background: #fff; box-shadow: inset 0 0 0 1.5px rgba(123, 92, 255, .22); }
.seg label {
  position: relative;
  display: grid;
  place-items: center;
  min-width: 104px;
  min-height: 48px;
  padding: 0 18px;
  border-radius: 999px;
  font: 800 1.0625rem/1 var(--f-latin-d);
  letter-spacing: .03em;
  cursor: pointer;
  transition: transform .45s var(--spring), background .2s, color .2s;
}
.seg label:active { transform: scale(.94, .88); }
.seg label:has(input:checked) { color: #fff; background: linear-gradient(180deg, #8f75ff, #5232e3); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5), 0 8px 16px -8px rgba(83, 50, 230, .9); }
.seg label:has(input:focus-visible) { outline: 3px solid var(--grape-ink); outline-offset: 3px; }
.matrow { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; }
.link { display: inline-flex; align-items: center; min-height: 44px; color: var(--grape-ink); font-weight: 600; text-underline-offset: 4px; }
.money {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 64px;
  padding-inline: 18px;
  border-radius: 20px;
  background: #fff;
  box-shadow: inset 0 0 0 2px rgba(123, 92, 255, .28);
  transition: box-shadow .2s;
}
.money:focus-within { box-shadow: inset 0 0 0 2.5px var(--grape-ink), 0 0 0 5px rgba(123, 92, 255, .18); }
.money.is-err { box-shadow: inset 0 0 0 2.5px var(--cherry-ink), 0 0 0 5px rgba(196, 18, 63, .12); }
.money__cur { font: 700 1.125rem/1 var(--f-b); color: var(--ink-3); }
.money input {
  flex: 1;
  min-width: 0;
  height: 100%;
  border: 0;
  background: transparent;
  color: var(--ink);
  font: 800 1.75rem/1 var(--f-latin-d);
  outline: none;
}
.hint { margin-top: 8px; font-size: .9375rem; color: var(--ink-3); }
.msg { display: flex; gap: 8px; align-items: flex-start; margin-top: 10px; padding: 10px 12px; border-radius: 14px; background: #fff0f3; color: var(--cherry-ink); font-weight: 600; }
.msg:empty { display: none; }
.msg .ico { width: 20px; height: 20px; margin-top: 2px; }
.res { display: flex; flex-direction: column; gap: 16px; }
@media (min-width: 900px) { .res { position: sticky; top: calc(var(--hdr) + 16px); } }
.res__top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.res__top h3 { font: 700 1.25rem/1.3 var(--f-d); }
[lang="ar"] .res__top h3 { font-weight: 600; font-size: 1.125rem; line-height: 1.6; }
.rates { display: inline-flex; align-items: center; height: 30px; padding: 0 12px; border-radius: 999px; background: #ffeacd; box-shadow: inset 0 0 0 1px rgba(255, 159, 28, .6); color: var(--ink); font: 700 .8125rem/1 var(--f-b); white-space: nowrap; }
.rlist { margin: 0; display: grid; }
.rlist div { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 10px 0; border-top: 1px solid var(--line); }
.rlist div:first-child { border-top: 0; }
.rlist dt { color: var(--ink-2); }
.rlist dd { margin: 0; font: 800 1.125rem/1 var(--f-d); white-space: nowrap; }
.earn {
  position: relative;
  padding: 18px;
  border-radius: 24px;
  background: radial-gradient(90% 120% at 100% 0%, rgba(155, 225, 93, .32), transparent 60%), linear-gradient(160deg, #f6ffef, #eafbdc);
  box-shadow: inset 0 0 0 1px rgba(155, 225, 93, .6), 0 18px 34px -24px rgba(95, 174, 44, .9);
}
.earn__l { font-weight: 700; color: var(--ink); }
.earn__v {
  display: inline-block;
  margin-top: 6px;
  font: 800 clamp(2.4rem, 2rem + 2vw, 3.3rem)/1 var(--f-latin-d);
  letter-spacing: -.02em;
  transform-origin: 50% 100%;
  background: linear-gradient(180deg, #4d9a1e 0%, #2f6b0b 60%, #22530a 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 6px 8px rgba(95, 174, 44, .35));
}
[lang="ar"] .earn__v { font-size: clamp(2rem, 1.7rem + 1.6vw, 2.8rem); }
.earn__s { display: block; margin-top: 4px; font-size: .9375rem; color: var(--ink-2); }
.earn.is-off .earn__v { background: none; color: var(--ink-3); filter: none; }
.keep { display: flex; justify-content: space-between; gap: 12px; color: var(--ink-2); }
.keep b { color: var(--ink); white-space: nowrap; }
.split { display: flex; height: 26px; border-radius: 999px; overflow: hidden; background: #efe9ff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .8); }
.split i { display: block; height: 100%; transition: flex-grow .6s var(--spring); position: relative; }
.split i::after { content: ""; position: absolute; inset: 3px 6px auto; height: 35%; border-radius: 999px; background: rgba(255, 255, 255, .55); }
.split .s-min { background: linear-gradient(180deg, #a993ff, #6a4af5); }
.split .s-you { background: linear-gradient(180deg, #c6f598, #6fc43a); }
.split .s-us { background: linear-gradient(180deg, #ffd08a, #ff9f1c); }
.legend { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 8px 0 0; padding: 0; list-style: none; font-size: .9375rem; color: var(--ink-2); }
.legend li { display: inline-flex; align-items: center; gap: 6px; }
.legend i { width: 12px; height: 12px; border-radius: 4px; }
.bd { border-radius: 18px; background: rgba(123, 92, 255, .06); }
.bd summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 48px; padding: 0 16px; cursor: pointer; font-weight: 700; list-style: none; border-radius: 18px; }
.bd summary::-webkit-details-marker { display: none; }
.bd summary::after { content: "+"; font: 800 1.25rem/1 var(--f-latin-d); color: var(--grape-ink); transition: rotate .3s var(--spring); }
.bd[open] summary::after { rotate: 45deg; }
.bd dl { margin: 0; padding: 0 16px 14px; display: grid; }
.bd dl div { display: flex; justify-content: space-between; gap: 12px; padding: 7px 0; border-top: 1px dashed rgba(123, 92, 255, .2); }
.bd dt small { display: block; font-size: .875rem; color: var(--ink-3); }
.bd dd { margin: 0; font-weight: 700; white-space: nowrap; }
.bd .total dt, .bd .total dd { font-weight: 800; color: var(--grape-ink); }
.calc-strip {
  position: sticky;
  bottom: calc(10px + env(safe-area-inset-bottom));
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 18px;
  border-radius: 20px;
  background: rgba(31, 20, 51, .94);
  color: #fff;
  box-shadow: 0 18px 36px -16px rgba(31, 20, 51, .7);
  margin-top: -92px; /* takes no room in the layout: it only ever shows while stuck to the bottom */
  transition: opacity .25s, translate .35s var(--spring);
}
.calc-strip.is-hidden { opacity: 0; translate: 0 14px; pointer-events: none; }
.calc-strip span { display: block; font-size: .875rem; color: #d9d0f0; }
.calc-strip b { font: 800 1.125rem/1.2 var(--f-d); white-space: nowrap; }
.calc-strip .you b { color: #c6f598; }
.calc-strip.is-err .you b { color: #ffb3c3; }
@media (min-width: 900px) { .calc-strip { display: none; } }
.estnote { display: flex; gap: 14px; align-items: flex-start; }
.estnote [data-ico] { width: 48px; height: 48px; flex: none; border-radius: 16px; color: var(--ink); background: linear-gradient(160deg, #b8ecff, #2ec4ff); }
.estnote h3 { font: 700 1.125rem/1.3 var(--f-b); margin-bottom: 6px; }
.estnote p { color: var(--ink-2); max-width: 62ch; }

/* material guide */
.guide { border-radius: var(--r-xl); overflow: hidden; background: #fff; box-shadow: inset 0 0 0 1px rgba(123, 92, 255, .12), 0 30px 60px -44px var(--glow); }
.mg { width: 100%; border-collapse: collapse; table-layout: fixed; }
.mg .corner { width: 22%; }
.mg th, .mg td { padding: 14px 16px; text-align: start; vertical-align: top; border-top: 1px solid var(--line); }
.mg thead th { border-top: 0; padding-top: 20px; padding-bottom: 16px; }
.mg tbody th { font-weight: 700; color: var(--ink); }
.mg td { color: var(--ink-2); }
.mg .col-pla { background: #fff8ef; }
.mg .col-petg { background: #eefaff; }
.mg tr:nth-child(1) td { color: var(--ink); font-weight: 600; }
.mhead { display: flex; align-items: center; gap: 12px; }
.mhead b { font: 800 1.5rem/1 var(--f-latin-d); letter-spacing: .02em; color: var(--ink); }
.mbadge { width: 44px; height: 44px; flex: none; border-radius: 14px; box-shadow: inset 0 -3px 6px rgba(42, 22, 80, .15); }
.mbadge--pla { background: radial-gradient(circle at 32% 24%, rgba(255, 255, 255, .9) 0 8%, rgba(255, 255, 255, 0) 30%), linear-gradient(160deg, #ffd08a, #ff9f1c); }
.mbadge--petg { background: radial-gradient(circle at 32% 24%, rgba(255, 255, 255, .9) 0 8%, rgba(255, 255, 255, 0) 30%), linear-gradient(160deg, #b8ecff, #2ec4ff); }
@media (max-width: 699px) {
  .mg thead tr, .mg tbody tr { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .mg .corner { display: none; }
  .mg tbody th { grid-column: 1 / -1; width: auto; padding-bottom: 6px; background: #faf8ff; }
  .mg td { border-top: 0; padding-top: 10px; }
  .mg th, .mg td { padding-inline: 14px; }
  .mhead b { font-size: 1.25rem; }
  .mbadge { width: 36px; height: 36px; }
}
.notes { display: grid; gap: 12px; margin-top: 16px; }
@media (min-width: 900px) { .notes { grid-template-columns: 1fr 1fr; } }
.note {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 18px;
  border-radius: 22px;
  background: linear-gradient(165deg, rgba(255, 255, 255, .96), rgba(255, 255, 255, .74));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--hue) 45%, transparent), 0 16px 30px -24px var(--hue);
}
.note [data-ico] { width: 44px; height: 44px; flex: none; border-radius: 14px; color: var(--ink); background: linear-gradient(160deg, color-mix(in srgb, var(--hue) 45%, #fff), var(--hue)); }
.note h3 { font: 700 1.0625rem/1.3 var(--f-b); margin-bottom: 4px; }
.note p { color: var(--ink-2); }

/* rules */
.rules { display: grid; gap: 14px; }
@media (min-width: 900px) { .rules { grid-template-columns: 1.1fr .9fr; gap: 24px; align-items: start; } }
.rules .panel p { margin-top: 10px; }
.banned { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 8px; }
.banned li { display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 8px 14px 8px 8px; border-radius: 16px; background: #fff3f5; box-shadow: inset 0 0 0 1px rgba(196, 18, 63, .18); font-weight: 600; }
[dir="rtl"] .banned li { padding: 8px 8px 8px 14px; }
.banned [data-ico] { width: 34px; height: 34px; flex: none; border-radius: 50%; background: #ffd9e1; color: var(--cherry-ink); }

/* sell CTA */
.cta {
  display: grid;
  gap: 16px;
  justify-items: center;
  text-align: center;
  padding: 40px 20px;
  border-radius: 36px;
  background:
    radial-gradient(60% 80% at 0% 0%, rgba(155, 225, 93, .22), transparent 60%),
    radial-gradient(60% 80% at 100% 100%, rgba(46, 196, 255, .2), transparent 60%),
    linear-gradient(160deg, #fff, #f3eeff);
  box-shadow: inset 0 0 0 1px #fff, 0 40px 70px -46px var(--glow);
}
.cta p { color: var(--ink-2); max-width: 36rem; }
.cta .small { font-size: .9375rem; color: var(--ink-3); }

/* ---------- reduced motion: a well-composed still state ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}
.rm, .rm * { scroll-behavior: auto !important; }
.rm *, .rm *::before, .rm *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }