/* W · Wadi: "Every layer tells a story".
   Hajar mountain strata, wadi pools and contour lines. Phone-first; desktop from 1024px. */

:root {
  --rust: #a5492f;
  --rust-ink: #8a3a24;
  --rust-deep: #6e2e1d;
  --ochre: #d9a05b;
  --ochre-soft: #ecc89c;
  --sun: #e7b24f;
  --shale: #4a4644;
  --shale-deep: #2f2a28;
  --ink: #2a2523;
  --muted: #5e5552;
  --sand: #f3d9c0;
  --paper: #fbf3ea;
  --paper-2: #f6e7d6;
  --card: #fffaf4;
  --teal: #2e9e8f;
  --teal-ink: #1a6b60;
  --teal-soft: #d3ece7;
  --palm: #5f7f3e;
  --palm-ink: #4a6630;
  --line: rgba(74, 70, 68, .16);
  --line-strong: rgba(74, 70, 68, .34);
  --font-display: "Syne", "Public Sans", system-ui, sans-serif;
  --font-text: "Public Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --hdr: 56px;
  --secnav: 0px;
  --gutter: 16px;
  --wrap: 1240px;
  --radius: 16px;
  --shadow: 0 14px 30px -18px rgba(74, 40, 20, .45);
  --topo: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 440' preserveAspectRatio='xMidYMid slice'%3E%3Cpath d='M373 238l-2 2l-11 10l-2 3l-5 14l0 13l4 13l3 6l8 8l5 4l14 2l13 -6l0 -1l6 -13l3 -13l0 -13l-4 -14l-5 -10l-4 -3l-9 -5l-14 3M383 440l4 -5l4 -8l6 -14l3 -6l2 -7l2 -13l2 -14l4 -13l3 -5l3 -8l10 -14l1 0l6 -13l7 -12l1 -1l2 -14l0 -13l0 -13l-2 -14l-1 -4l-4 -9l-8 -13l-1 -1l-13 -13l-1 0l-13 -9l-7 -4l-6 -3l-14 -3l-13 4l-11 2l-2 0l-4 0l-10 -1l-3 1l-10 8l-4 5l-1 14l1 13l3 13l-1 14l-2 13l-3 13l-6 14l0 2l-1 11l-1 13l-2 14l-1 13l-2 13l-2 14l-5 12l0 1l-2 13l-7 14l-4 3l-7 10M208 0l-1 13l1 14l1 13l-1 13l0 14l-1 13l1 13l1 14l2 13l2 7l4 6l7 14l3 3l7 10l6 7l6 6l7 8l5 6l9 9l3 4l10 13l10 14l3 10l2 3l3 13l1 14l-2 13l-4 13l-3 14l-2 13l-2 13l-1 14l-1 13l0 13l-1 14l-3 13l-3 13l-8 14l-2 3l-8 10M396 440l4 -6l4 -7l7 -14l2 -7l2 -6l4 -13l4 -14l4 -8l1 -5l6 -13l6 -10l2 -4l7 -13l4 -8l3 -5l5 -14l3 -13l2 -13l-4 -14l-7 -13l-2 -2l-9 -11l-4 -4l-10 -10l-3 -2l-14 -11l-13 -8l-7 -5l-6 -4l-14 -9l0 -1l-13 -8l-6 -5l-7 -7l-7 -6l-7 -11l-2 -3l-6 -13l-1 -13l1 -14l4 -13l4 -10l1 -3l5 -14l6 -13l2 -5l1 -8l2 -14l0 -13M196 0l0 13l1 14l0 13l0 13l0 14l0 13l0 13l1 14l2 9l1 4l7 13l5 12l2 2l9 13l3 3l8 10l5 6l8 8l5 6l6 7l8 9l3 4l8 14l2 4l5 9l3 13l0 14l-1 13l-3 13l-4 14l-2 13l-2 13l-1 14l-1 13l0 13l-1 14l-1 13l-5 13l0 1l-7 13l-7 8l-3 5M405 440l8 -13l1 0l6 -14l5 -13l2 -6l2 -7l4 -14l6 -13l1 -3l5 -10l7 -14l1 -2l6 -11l7 -13l1 -1l5 -13l3 -13l1 -13l-3 -14l-6 -12l-1 -1l-11 -13l-2 -1l-13 -12l0 -1l-13 -9l-5 -4l-9 -6l-10 -7l-3 -3l-13 -8l-3 -3l-11 -7l-8 -6l-5 -5l-9 -8l-4 -7l-5 -7l-5 -13l-2 -13l2 -14l3 -13l6 -13l1 -1l4 -13l5 -13l4 -12l0 -1l2 -14l2 -13M188 0l0 13l1 14l1 13l0 13l0 14l0 13l1 13l1 14l3 13l5 13l8 14l5 8l4 5l10 13l12 14l1 1l11 12l2 3l9 10l5 9l3 5l6 13l3 13l0 14l-1 13l-3 13l-3 14l-2 13l-2 13l-1 12l0 2l-1 13l0 13l-1 14l-2 13l-4 13l-6 11l-1 3l-10 13M413 440l9 -13l5 -10l1 -4l5 -13l4 -13l3 -8l2 -6l5 -13l7 -13l6 -14l7 -11l1 -2l7 -13l5 -12l1 -2l4 -13l0 -13l-3 -14l-2 -3l-5 -10l-8 -9l-4 -4l-10 -8l-6 -6l-7 -5l-10 -8l-3 -2l-14 -10l-2 -1l-11 -8l-8 -6l-5 -3l-13 -10l-1 -1l-13 -12l-10 -14l-3 -8l-2 -5l-2 -13l2 -14l2 -6l2 -7l4 -13l6 -14l1 -1l4 -12l4 -13l3 -14l2 -13M182 0l1 13l0 14l1 13l0 13l0 14l0 13l1 13l1 14l1 2l3 11l5 13l5 10l2 4l9 13l2 4l8 9l6 8l5 6l8 9l4 4l9 12l1 1l8 14l5 9l1 4l3 13l1 14l-2 13l-3 13l0 3l-3 11l-2 13l-2 13l-1 14l-1 13l0 13l0 14l-2 13l-3 8l-1 5l-7 14l-5 6l-5 7M422 440l5 -8l3 -5l7 -14l3 -9l2 -4l4 -13l4 -14l3 -7l3 -6l6 -13l5 -10l2 -4l7 -13l4 -8l3 -5l6 -14l4 -13l0 -12l0 -1l0 -1l-3 -13l-8 -13l-2 -3l-10 -10l-3 -3l-12 -11l-2 -1l-13 -10l-3 -2l-10 -7l-9 -6l-5 -4l-13 -9l-1 -1l-12 -9l-6 -4l-8 -7l-7 -6l-6 -9l-4 -5l-5 -13l-1 -13l1 -14l4 -13l5 -13l5 -14l5 -13l3 -9l2 -4l2 -14l3 -13M177 0l0 13l1 14l1 13l1 13l0 14l0 13l0 13l2 14l3 13l2 6l3 7l7 14l3 5l5 8l8 12l2 1l10 14l2 2l9 11l4 5l6 8l7 11l2 3l5 13l4 13l0 14l-2 13l-3 13l-3 14l-2 13l-1 6l-1 7l-1 14l-1 13l0 13l-1 14l-1 13l-4 13l-4 8l-3 6l-9 13M431 440l8 -13l1 -2l7 -12l4 -13l2 -7l3 -6l5 -14l4 -13l2 -3l5 -10l6 -14l2 -4l6 -9l6 -13l1 -3l5 -11l4 -13l0 -13l-4 -14l-5 -7l-3 -6l-10 -11l-2 -2l-11 -9l-5 -5l-9 -6l-9 -7l-4 -3l-13 -9l-2 -1l-12 -8l-7 -6l-6 -4l-12 -9l-1 -1l-14 -12l-10 -14l-3 -7l-3 -6l-1 -13l1 -14l3 -9l1 -4l5 -13l5 -14l2 -6l3 -7l4 -13l3 -14l3 -13M171 0l1 13l1 14l1 13l1 13l0 14l0 13l1 13l1 14l3 13l5 13l2 4l5 10l8 13l0 1l8 12l5 8l5 6l9 11l1 2l10 13l2 3l6 11l6 13l1 6l2 7l0 14l-2 13l-4 13l-3 14l-2 13l-2 13l-1 14l0 13l0 13l0 14l-1 7l-1 6l-5 13l-6 14l-1 2l-9 11M590 440l10 -11l1 -2l5 -14l3 -13l2 -13l2 -8l2 -6l6 -13l0 -13l-7 -14l-1 0l-13 -11l-4 -2l-9 -4l-14 -6l-11 -3l-2 -1l-13 -3l-14 1l-4 3l-9 5l-9 8l-4 3l-2 -3l1 -13l1 -3l7 -11l1 -13l-1 -13l-6 -14l-1 -1l-8 -12l-6 -5l-7 -8l-6 -5l-11 -9l-2 -2l-14 -10l-1 -1l-12 -8l-8 -5l-5 -5l-14 -8l0 -1l-13 -9l-5 -4l-8 -7l-7 -6l-7 -8l-4 -6l-5 -13l-2 -13l1 -14l4 -13l4 -13l2 -5l4 -9l4 -13l5 -13l1 -4l2 -10l3 -13M445 440l8 -12l14 2l7 10M523 440l10 -7l14 -5l13 4l13 8M167 0l1 13l1 14l1 13l1 13l0 14l0 13l0 13l2 14l0 2l3 11l4 13l7 13l0 1l7 13l6 10l2 3l8 14l3 7l4 6l10 13l4 14l5 13l-9 6l-10 -6l-4 -3l-13 -5l-13 3l-14 2l-13 1l-13 -3l-14 -7l-2 -1l-11 -4l-13 -4l-14 -5l-4 -1l-9 -1l-13 0l-7 1l-7 2l-13 6l-7 6l-6 7l-5 6l3 13l2 2l10 12l3 4l3 9l-2 13l-1 10l-1 4l-12 13l-14 6l-4 7l-1 14l5 7l14 2l5 4l8 11l1 2l-1 14l-13 9l-7 -9l-7 -5l-10 -9l-3 -6M591 0l9 9l4 4l9 13l1 1l6 13l7 13l12 14l1 1M640 285l-5 -5l-8 -7l-9 -6l-5 -4l-13 -7l-4 -3l-9 -6l-14 -4l-13 0l-13 -1l-14 1l-13 0l-3 -3l-10 -6l-9 -7l-5 -3l-13 -9l-2 -2l-11 -9l-6 -4l-8 -6l-13 -7l-13 -10l-6 -4l-8 -5l-11 -8l-2 -2l-13 -11l0 -1l-11 -13l-3 -5l-3 -8l-2 -13l1 -14l3 -13l1 -4l4 -9l5 -14l5 -13l4 -13l4 -14l4 -13M152 307l8 -10l13 -1l12 11l2 2l5 11l2 13l-5 14l-2 3l-14 4l-13 1l-12 -8l-1 -14l1 -13l4 -13M30 427l10 -6l3 6l4 13M25 440l2 -10l3 -3M177 440l10 -9l3 9M162 0l1 13l1 14l2 13l0 13l1 14l0 13l0 13l2 14l2 13l2 6l3 7l6 14l5 9l2 4l6 13l5 13l0 1l0 1l-13 10l-4 2l-10 4l-13 1l-13 -2l-10 -3l-4 -1l-13 -3l-13 -4l-13 -5l-1 -1l-13 -2l-13 -1l-14 -3l-13 -3l-10 -4l-3 -1l-14 -1l-10 2l-3 2M499 0l8 3l13 3l13 0l14 1l13 6l13 9l7 5l7 6l5 7l8 11l2 2l10 14l1 2l11 11l3 3l13 10M640 192l-13 0l-14 4l-7 4l-6 3l-13 4l-14 0l-13 1l-13 0l-14 -1l-13 1l-13 0l-14 -3l-13 -5l-13 -9l-11 -4l-3 -1l-13 -10l-6 -3l-7 -5l-14 -7l-1 -1l-12 -10l-4 -3l-9 -11l-2 -3l-7 -13l-3 -13l1 -14l2 -13l5 -13l4 -12l0 -2l6 -13l4 -13l3 -10l2 -4l4 -13M156 0l2 13l2 14l0 1l1 12l1 13l1 14l0 13l0 13l1 14l3 13l4 13l2 6l3 8l6 13l4 13l-13 8l-13 4l-13 0l-14 -3l-13 -4l-13 -4l-1 -1l-13 -3l-13 -2l-13 -4l-8 -4l-6 -4l-10 -9l-3 -4l-12 -10l-1 -1l-14 -10l-2 -2l-9 -13l-2 -4M0 7l13 -1l14 -4l2 -2M448 0l5 3l14 10l13 12l3 2l10 5l14 1l13 1l13 -1l14 2l13 5l13 11l2 2l12 13l0 1l10 13l3 5l6 8l7 12l2 2l2 13l-4 9l-1 4l-8 14l-4 4l-8 9l-5 5l-12 8l-2 1l-13 5l-13 3l-14 1l-13 1l-13 -1l-14 -3l-13 -4l-6 -3l-7 -3l-14 -5l-9 -5l-4 -3l-13 -8l-4 -2l-10 -7l-9 -7l-4 -2l-10 -11l-3 -4l-3 -9l-1 -14l2 -13l2 -6l2 -7l5 -14l4 -13l2 -5l5 -8l5 -14l3 -9l6 -4M150 0l2 13l2 14l2 13l1 13l1 14l0 13l1 13l1 10l0 4l2 13l3 13l4 14l4 13l-13 6l-13 1l-14 -2l-13 -4l-3 -1l-10 -2l-14 -3l-13 -4l-10 -4l-3 -3l-10 -11l-4 -6l-6 -7l-7 -10l-3 -3l-6 -14l2 -13l6 -13l1 -2l4 -12l4 -13l5 -13l0 -2l5 -12l9 -10l3 -3M417 27l10 -4l7 4l6 3l11 10l2 3l12 10l2 1l13 5l13 1l14 -1l13 0l13 -1l14 1l12 8l1 1l10 12l3 8l3 5l2 14l-1 13l-4 7l-6 6l-7 5l-12 9l-1 1l-14 5l-13 4l-13 2l-14 -4l-13 -4l-13 -4l-1 0l-13 -8l-7 -6l-6 -8l-5 -5l-8 -8l-7 -5l-7 -4l-9 -10l-4 -5l-2 -8l1 -13l1 -8l3 -6l6 -13l4 -12l4 -1M139 0l7 13l1 3l1 11l2 13l2 13l1 14l0 13l1 13l1 14l1 13l3 13l-4 14l-8 2l-14 -1l-3 -1l-10 -3l-13 -3l-14 -4l-7 -4l-6 -5l-5 -8l-6 -13l-2 -7l-3 -7l2 -13l1 -4l2 -9l4 -14l5 -13l2 -8l2 -5l10 -14l1 -1l14 -9l4 -3M512 107l8 -8l13 -2l3 10l-3 4l-13 3l-8 -7M119 27l1 -1l13 -5l3 6l5 13l5 13l1 4l1 10l0 13l1 13l0 14l-1 13l-1 6l-14 2l-13 -4l-10 -4l-3 -2l-11 -11l-3 -5l-3 -9l-1 -13l4 -13l0 -1l8 -13l6 -10l2 -3l10 -13M124 80l9 -13l3 13l-1 13l-2 3l-4 -3l-5 -13' fill='none' stroke='%23000' stroke-width='1.2' stroke-linejoin='round'/%3E%3C/svg%3E"); /*TOPO*/

  /* Room view theme */
  --rv-bg: #2b2624;
  --rv-surface: #3a3330;
  --rv-text: #fbf3ea;
  --rv-muted: #d8c6b4;
  --rv-line: rgba(243, 217, 192, .22);
  --rv-accent: #d9a05b;
  --rv-accent-text: #2a2523;
  --rv-radius: 14px;
  --rv-font: "Public Sans", system-ui, sans-serif;
  --rv-font-display: "Syne", "Public Sans", sans-serif;
}
@media (min-width: 1024px) {
  :root { --hdr: 64px; --gutter: 32px; }
  .page-home, .page-sell { --secnav: 52px; }
}
html[lang="ar"] {
  --font-display: "Beiruti", system-ui, sans-serif;
  --font-text: "Beiruti", system-ui, sans-serif;
  --rv-font: "Beiruti", system-ui, sans-serif;
  --rv-font-display: "Beiruti", sans-serif;
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: calc(var(--hdr) + var(--secnav) + 12px);
}
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 1rem/1.6 var(--font-text);
  -webkit-tap-highlight-color: transparent;
  text-rendering: optimizeLegibility;
}
html[lang="ar"] { font-size: 112.5%; }
html[lang="ar"] body { font-size: 1rem; line-height: 1.75; }
html[lang="ar"] * { letter-spacing: 0 !important; }
@media (min-width: 1024px) { body { font-size: 1.0625rem; } html[lang="ar"] body { font-size: 1.0625rem; } }
img, svg, canvas { display: block; max-width: 100%; }
h1, h2, h3 { font-family: var(--font-display); color: var(--ink); margin: 0; text-wrap: balance; }
html[lang="ar"] :is(h1, h2, h3) { font-weight: 800; line-height: 1.3; }
p { margin: 0; }
a { color: var(--rust-ink); }
button, input, select { font: inherit; color: inherit; }
button { cursor: pointer; }
:where(ul[role="list"], ol[role="list"]) { list-style: none; margin: 0; padding: 0; }
:focus-visible { outline: 3px solid var(--teal-ink); outline-offset: 2px; border-radius: 6px; }
.on-dark :focus-visible, .band :focus-visible, .foot :focus-visible, .buybar :focus-visible { outline-color: var(--ochre); }
.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; }
.wrap { width: min(100% - 2 * var(--gutter), var(--wrap)); margin-inline: auto; }
.i { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; flex: none; }
[dir="rtl"] .i--dir { transform: scaleX(-1); }
bdi { unicode-bidi: isolate; }

.skip {
  position: fixed; inset-inline-start: 12px; top: 8px; z-index: 100;
  padding: 12px 16px; border-radius: 12px; background: var(--ink); color: var(--paper);
  font-weight: 700; text-decoration: none; transform: translateY(-160%); transition: transform .2s;
}
.skip:focus { transform: none; }

/* Contour-line texture (a top-down map of the hero wadi), used as a mask so any color works */
.topo::before, .hero::before, .foot::before, .card__plate::before, .band::before, .pstage::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: currentColor;
  -webkit-mask: var(--topo) center / cover no-repeat;
  mask: var(--topo) center / cover no-repeat;
}

/* ---------- Type helpers ---------- */
.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font: 700 .8125rem/1.3 var(--font-text); letter-spacing: .14em; text-transform: uppercase;
  color: var(--rust-ink); margin-bottom: 10px;
}
.eyebrow::before { content: ""; width: 0; height: 0; border-inline: 5px solid transparent; border-bottom: 8px solid currentColor; }
.eyebrow--pill::before, .eyebrow--light::before { display: none; }
.eyebrow--pill {
  padding: 7px 12px; border-radius: 999px; background: rgba(255, 250, 244, .82);
  border: 1px solid var(--line); color: var(--ink); letter-spacing: .08em;
}
.eyebrow--light { color: var(--ochre); }
.eyebrow--light::before { display: inline-block; }
html[lang="ar"] .eyebrow { text-transform: none; font-size: .9375rem; font-weight: 700; }
.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--teal); box-shadow: 0 0 0 3px rgba(46, 158, 143, .22); }

.section { padding-block: 56px; position: relative; }
@media (min-width: 1024px) { .section { padding-block: 88px; } }
.shead { max-width: 640px; margin-bottom: 28px; }
.shead h2 { font-weight: 700; font-size: clamp(1.875rem, 1.25rem + 2.4vw, 2.875rem); line-height: 1.04; letter-spacing: -.028em; }
.shead__sub { margin-top: 10px; color: var(--muted); font-size: 1rem; max-width: 52ch; }
@media (min-width: 1024px) { .shead__sub { font-size: 1.125rem; } }
.shead--row { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; max-width: none; }
.shead--center { margin-inline: auto; text-align: center; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 50px; padding: 0 22px; border-radius: 12px; border: 2px solid transparent;
  font: 700 1rem/1.15 var(--font-text); text-decoration: none; text-align: center;
  transition: transform .12s ease, box-shadow .12s ease, background-color .15s ease, color .15s ease;
  -webkit-user-select: none; user-select: none; touch-action: manipulation;
}
html[lang="ar"] .btn { font-size: 1.0625rem; }
.btn .i { width: 20px; height: 20px; }
.btn--primary { background: var(--rust); color: #fff8f0; box-shadow: 0 3px 0 var(--rust-deep); }
.btn--primary:hover { background: #b4512f; }
.btn--sun { background: var(--ochre); color: var(--ink); box-shadow: 0 3px 0 #9d6a31; }
.btn--sun:hover { background: #e4ad69; }
.btn--ghost { background: transparent; color: var(--ink); border-color: var(--ink); }
.btn--ghost:hover { background: rgba(42, 37, 35, .07); }
.btn--ghost-light { background: transparent; color: var(--sand); border-color: rgba(243, 217, 192, .55); }
.btn--ghost-light:hover { background: rgba(243, 217, 192, .1); border-color: var(--sand); }
.btn:active, .btn.is-pressed { transform: translateY(2px); box-shadow: 0 1px 0 var(--rust-deep); }
.btn--sun:active { box-shadow: 0 1px 0 #9d6a31; }
.btn--ghost:active, .btn--ghost-light:active { box-shadow: none; }
.btn--block { width: 100%; }
.btn[aria-busy="true"] { pointer-events: none; }
.btn[aria-busy="true"] .btn__label { opacity: .55; }
.btn[aria-busy="true"]::after {
  content: ""; width: 16px; height: 16px; border-radius: 50%;
  border: 2.5px solid currentColor; border-inline-end-color: transparent; animation: spin .7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.iconbtn {
  position: relative; display: inline-grid; place-items: center; flex: none;
  width: 44px; height: 44px; border-radius: 12px; border: 0; background: transparent; color: var(--ink);
  transition: background-color .15s, transform .12s;
}
.iconbtn:hover { background: rgba(42, 37, 35, .07); }
.iconbtn:active { transform: scale(.94); }
.iconbtn--line { border: 1.5px solid var(--line-strong); background: var(--card); }
.iconbtn--line:disabled { opacity: .4; cursor: default; }

.chip {
  display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px; border-radius: 999px;
  font: 700 .75rem/1.5 var(--font-text); letter-spacing: .06em;
}
.chip--pla { background: #f6e1c3; color: #6e3f15; }
.chip--petg { background: var(--teal-soft); color: #145a51; }

/* Language toggle */
.lang { display: inline-flex; gap: 2px; padding: 2px; border-radius: 12px; border: 1.5px solid var(--line-strong); background: var(--card); }
.lang button {
  min-width: 44px; min-height: 44px; padding: 0 10px; border: 0; border-radius: 9px; background: transparent;
  font: 700 .875rem/1 var(--font-text); color: var(--ink);
}
.lang button[lang="ar"] { font-family: "Beiruti", system-ui, sans-serif; font-size: 1.0625rem; }
.lang button[aria-pressed="true"] { background: var(--ink); color: var(--paper); }
.lang button:not([aria-pressed="true"]):hover { background: var(--paper-2); }
.lang--wide { display: flex; width: 100%; }
.lang--wide button { flex: 1; min-height: 48px; font-size: 1rem; }
.lang--dark { background: transparent; border-color: rgba(243, 217, 192, .35); }
.lang--dark button { color: #f3e6d8; }
.lang--dark button[aria-pressed="true"] { background: var(--sand); color: var(--ink); }
.lang--dark button:not([aria-pressed="true"]):hover { background: rgba(243, 217, 192, .12); }

/* ---------- Header ---------- */
.hdr { position: sticky; top: 0; z-index: 50; background: var(--paper); border-bottom: 1px solid var(--line); }
.hdr__bar { display: flex; align-items: center; gap: 8px; height: var(--hdr); }
.logo { display: inline-flex; align-items: center; gap: 9px; min-height: 44px; color: var(--ink); text-decoration: none; flex: none; border-radius: 10px; }
.logo__mark { width: 23px; height: 29px; }
.logo__word { font: 800 clamp(14px, 3.9vw, 18px)/1 "Syne", sans-serif; letter-spacing: -.025em; white-space: nowrap; }
.logo--light { color: var(--sand); }
.hdr__nav { display: none; }
.hdr__tools { display: flex; align-items: center; gap: 0; margin-inline-start: auto; margin-inline-end: -6px; }
.hdr__lang { display: none; }
.cart__count {
  position: absolute; top: 3px; inset-inline-end: 1px; min-width: 20px; height: 20px; padding: 0 5px;
  display: grid; place-items: center; border-radius: 999px; background: var(--rust); color: #fff8f0;
  font: 700 .75rem/1 var(--font-text); border: 2px solid var(--paper);
}
.cart__count.is-zero { background: var(--shale); }
.cart.is-bump .cart__count { animation: bump .45s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes bump { 0% { transform: scale(1); } 40% { transform: scale(1.45); } 100% { transform: scale(1); } }

/* Reading progress: a trail along the header's bottom edge */
.progress {
  position: absolute; inset-inline: 0; bottom: -1px; height: 3px; pointer-events: none;
  background: radial-gradient(circle, rgba(74, 70, 68, .28) 1px, transparent 1.5px) 0 50% / 7px 3px repeat-x;
}
.progress__fill {
  display: block; height: 100%; background: linear-gradient(90deg, var(--rust), var(--ochre));
  transform-origin: left center; transform: scaleX(var(--p, 0)); border-radius: 0 3px 3px 0;
}
[dir="rtl"] .progress__fill { transform-origin: right center; background: linear-gradient(270deg, var(--rust), var(--ochre)); }

@media (min-width: 1024px) {
  .hdr__bar { gap: 12px; }
  .logo__mark { width: 26px; height: 33px; }
  .logo__word { font-size: 20px; }
  .hdr__nav { display: block; margin-inline-start: 16px; }
  .hdr__nav ul { display: flex; gap: 2px; }
  .hdr__nav a {
    display: inline-flex; align-items: center; min-height: 44px; padding-inline: 12px; border-radius: 10px;
    color: var(--ink); text-decoration: none; font-weight: 600; font-size: .9375rem; white-space: nowrap;
  }
  html[lang="ar"] .hdr__nav a { font-size: 1.0625rem; }
  .hdr__nav a:hover { background: rgba(42, 37, 35, .06); }
  .hdr__nav a[aria-current="page"] { color: var(--rust-ink); box-shadow: inset 0 -3px 0 var(--rust); border-radius: 10px 10px 0 0; }
  .hdr__searchbtn, .hdr__menubtn { display: none; }
  .hdr__lang { display: inline-flex; }
  .hdr__tools { margin-inline-start: 4px; gap: 8px; }
}

/* Search: inline field + results panel on desktop, a full-screen sheet on phones */
.search { display: none; }
.search__form { position: relative; }
.search__icon { position: absolute; inset-inline-start: 12px; top: 50%; width: 20px; height: 20px; transform: translateY(-50%); color: var(--muted); pointer-events: none; }
.search input {
  width: 100%; min-height: 48px; padding: 0 14px; padding-inline-start: 42px; border-radius: 12px;
  border: 1.5px solid var(--line-strong); background: var(--card); color: var(--ink); font-size: 1rem;
  -webkit-appearance: none; appearance: none;
}
html[lang="ar"] .search input { font-size: 1.0625rem; }
.search input::placeholder { color: #776c67; opacity: 1; }
.search input:focus-visible { outline: 3px solid var(--teal-ink); outline-offset: 1px; border-color: transparent; }
.search__status { font-size: .9375rem; color: var(--muted); padding: 6px 8px 8px; }
.search__status:empty { display: none; }
.search__list { display: grid; gap: 2px; }
.sres { display: flex; align-items: center; gap: 12px; min-height: 60px; padding: 6px 8px; border-radius: 12px; color: var(--ink); text-decoration: none; }
.sres:hover { background: var(--paper-2); }
.sres__art { width: 56px; height: 44px; flex: none; border-radius: 8px; background: var(--sand); padding: 3px; }
.sres__art svg { width: 100%; height: 100%; }
.sres__txt { min-width: 0; display: grid; }
.sres__name { font-weight: 700; line-height: 1.25; }
.sres__meta { font-size: .875rem; color: var(--muted); }
.sres__price { margin-inline-start: auto; font-weight: 700; white-space: nowrap; }
.search__hint { display: flex; flex-wrap: wrap; gap: 8px; padding: 4px 8px 10px; }
.search__hint button {
  min-height: 44px; padding: 0 14px; border-radius: 999px; border: 1.5px solid var(--line-strong);
  background: var(--card); font-weight: 600;
}
.search__hint button:hover { background: var(--paper-2); }

@media (max-width: 1023.98px) {
  .search.is-open {
    display: flex; flex-direction: column; position: fixed; inset: 0; z-index: 75; background: var(--paper);
    padding: 0 var(--gutter) calc(16px + env(safe-area-inset-bottom));
  }
  .search__top { display: flex; align-items: center; justify-content: space-between; height: 56px; }
  .search__title { font: 700 1.125rem/1 var(--font-display); }
  .search__panel { flex: 1; overflow-y: auto; overscroll-behavior: contain; margin-top: 12px; }
}
@media (min-width: 1024px) {
  .search { display: block; position: relative; flex: 1 1 200px; max-width: 320px; margin-inline-start: auto; }
  .search__top { display: none; }
  .search input { min-height: 44px; background: var(--card); }
  .search__panel {
    display: none; position: absolute; top: calc(100% + 10px); inset-inline-end: 0; width: max(100%, 440px);
    max-height: min(70vh, 540px); overflow-y: auto; padding: 8px; border-radius: 16px;
    background: var(--card); border: 1px solid var(--line-strong); box-shadow: 0 24px 50px -24px rgba(42, 37, 35, .5);
  }
  .search.is-open .search__panel { display: block; }
}

/* Menu sheet (phones and tablets) */
.menu { position: fixed; inset: 0; z-index: 70; background: rgba(42, 37, 35, .5); }
.menu[hidden] { display: none; }
.menu__panel {
  position: absolute; inset-block: 0; inset-inline-end: 0; width: min(100%, 420px); background: var(--paper);
  display: flex; flex-direction: column; gap: 18px; overflow-y: auto; overscroll-behavior: contain;
  padding: 0 var(--gutter) calc(24px + env(safe-area-inset-bottom));
}
@media (prefers-reduced-motion: no-preference) {
  .menu.is-open .menu__panel { animation: slideIn .28s cubic-bezier(.2, .8, .2, 1); }
  [dir="rtl"] .menu.is-open .menu__panel { animation-name: slideInRtl; }
}
@keyframes slideIn { from { transform: translateX(40px); opacity: 0; } }
@keyframes slideInRtl { from { transform: translateX(-40px); opacity: 0; } }
.menu__top { display: flex; align-items: center; justify-content: space-between; min-height: 56px; }
.menu__label { font-size: .875rem; font-weight: 700; color: var(--muted); margin-bottom: 8px; }
.menu__list { border-top: 1px solid var(--line); }
.menu__list a {
  display: flex; align-items: center; gap: 14px; min-height: 62px; border-bottom: 1px solid var(--line);
  color: var(--ink); text-decoration: none; font: 700 1.375rem/1.1 var(--font-display); letter-spacing: -.02em;
}
html[lang="ar"] .menu__list a { font-weight: 800; font-size: 1.375rem; }
.menu__alt { font: 700 .8125rem/1 var(--font-text); color: var(--rust-ink); min-width: 26px; letter-spacing: .06em; }
.menu__note { color: var(--muted); font-size: .9375rem; }
html.no-scroll, html.no-scroll body { overflow: hidden; }

/* Sticky section nav (desktop): waypoints on a trail */
.secnav { display: none; }
@media (min-width: 1024px) {
  .secnav {
    display: block; position: sticky; top: var(--hdr); z-index: 40; height: var(--secnav);
    background: rgba(251, 243, 234, .97); border-bottom: 1px solid var(--line);
  }
  .secnav__list {
    position: relative; display: flex; align-items: center; justify-content: space-between; height: 100%;
    list-style: none; margin-block: 0; padding: 0;
  }
  .secnav__list::before {
    content: ""; position: absolute; inset-inline: 12px; top: 50%; height: 2px; transform: translateY(-50%);
    background: repeating-linear-gradient(90deg, var(--line-strong) 0 6px, transparent 6px 12px);
  }
  .secnav__list::after {
    content: ""; position: absolute; inset-inline-start: 12px; top: 50%; height: 2px; transform: translateY(-50%);
    width: var(--trail, 0%); background: var(--rust); transition: width .3s ease;
  }
  .secnav a {
    position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 9px; min-height: 44px;
    padding-inline: 12px; border-radius: 10px; background: var(--paper);
    color: var(--muted); font-weight: 600; font-size: .9375rem; text-decoration: none; white-space: nowrap;
  }
  html[lang="ar"] .secnav a { font-size: 1.0625rem; }
  .secnav a::before {
    content: ""; width: 11px; height: 11px; border-radius: 50%; border: 2px solid var(--shale); background: var(--paper);
    transition: background-color .2s, border-color .2s, transform .2s;
  }
  .secnav a:hover { color: var(--ink); background: var(--paper-2); }
  .secnav a.is-passed::before { background: var(--ochre); border-color: var(--rust); }
  .secnav a[aria-current="true"] { color: var(--rust-ink); }
  .secnav a[aria-current="true"]::before { background: var(--rust); border-color: var(--rust); transform: scale(1.25); }
}

/* ---------- Hero: the canyon ---------- */
.hero {
  position: relative; display: grid; overflow: clip; color: rgba(74, 70, 68, .07);
  background:
    radial-gradient(60% 50% at 72% 30%, rgba(255, 214, 160, .65), transparent 70%),
    linear-gradient(180deg, #fbf3ea 0%, #f8e6d1 48%, #f1cda7 100%);
}
[dir="rtl"] .hero { background: radial-gradient(60% 50% at 28% 30%, rgba(255, 214, 160, .65), transparent 70%), linear-gradient(180deg, #fbf3ea 0%, #f8e6d1 48%, #f1cda7 100%); }
.hero__copy { position: relative; z-index: 2; padding: 22px var(--gutter) 6px; color: var(--ink); }
.hero__title {
  font-weight: 800; font-size: clamp(2.5rem, 1.55rem + 4.4vw, 5.2rem); line-height: .96; letter-spacing: -.04em;
  margin: 12px 0 14px;
}
.hero__title span { display: inline; }
.hero__title span + span { color: var(--rust); }
html[lang="ar"] .hero__title { font-size: clamp(2.5rem, 1.45rem + 3.6vw, 4.4rem); line-height: 1.2; }
.hero__lede { font-size: 1.0625rem; line-height: 1.55; max-width: 36ch; color: #3b3431; }
html[lang="ar"] .hero__lede { font-size: 1.0625rem; line-height: 1.75; }
.hero__ctas { display: flex; gap: 10px; margin-top: 20px; }
.hero__ctas .btn { flex: 1 1 0; padding-inline: 14px; }
.hero__stage { position: relative; width: 100%; aspect-ratio: 390 / 290; }
.canyon__poster, .canyon__canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.canyon__poster { transition: opacity .5s ease; }
.canyon__canvas { opacity: 0; transition: opacity .5s ease; pointer-events: none; touch-action: pan-y; }
.hero.is-live .canyon__canvas { opacity: 1; }
.hero.is-live .canyon__poster { opacity: 0; }
.canyon__counter {
  position: absolute; inset-inline-end: var(--gutter); bottom: 10px; display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px; border-radius: 999px; background: rgba(42, 37, 35, .86); color: #fbf3ea;
  font: 600 .8125rem/1.2 var(--font-text); letter-spacing: .04em; font-variant-numeric: tabular-nums;
  opacity: 0; transition: opacity .3s;
}
.hero.is-live .canyon__counter { opacity: 1; }
.canyon__counter b { font-weight: 700; min-width: 2ch; text-align: end; }
.canyon__of { color: #d8c6b4; }
.canyon__dot { width: 7px; height: 7px; border-radius: 50%; background: #ff9a5a; box-shadow: 0 0 0 3px rgba(255, 154, 90, .3); }
.hero.is-built .canyon__dot { background: var(--teal); box-shadow: 0 0 0 3px rgba(46, 158, 143, .3); }

@media (min-width: 720px) {
  .hero__copy { padding-top: 40px; }
  .hero__ctas .btn { flex: 0 0 auto; padding-inline: 24px; }
  .hero__stage { aspect-ratio: 16 / 10; }
}
@media (min-width: 1024px) {
  .hero { align-items: center; min-height: clamp(600px, calc(100svh - var(--hdr)), 860px); }
  .hero__copy { width: min(100% - 2 * var(--gutter), var(--wrap)); margin-inline: auto; padding: 56px 0; pointer-events: none; }
  .hero__copy > * { max-width: 34%; pointer-events: auto; }
  .hero__copy > .hero__title { max-width: 40%; }
  .hero__copy > .eyebrow { max-width: none; }
  .hero__lede { font-size: 1.25rem; }
  html[lang="ar"] .hero__lede { font-size: 1.1875rem; }
  .hero__ctas { margin-top: 30px; gap: 12px; }
  .hero__ctas .btn { min-height: 54px; font-size: 1.0625rem; }
  .hero__stage { position: absolute; inset-block: 0; inset-inline-end: 0; width: 64%; aspect-ratio: auto; }
  .canyon__counter { bottom: 28px; inset-inline-end: 32px; }
}

/* ---------- How it works: a trail with altitude markers ---------- */
.how { background: var(--paper); }
.trailmap__profile { display: none; }
.steps { list-style: none; margin: 0; padding: 0; display: grid; }
.step { position: relative; padding-inline-start: 62px; padding-bottom: 26px; min-height: 92px; }
.step::before {
  content: ""; position: absolute; inset-inline-start: 21px; top: 50px; bottom: 4px; width: 2px;
  background: repeating-linear-gradient(180deg, var(--rust) 0 6px, transparent 6px 12px);
}
.step:last-child::before { display: none; }
.step__marker {
  position: absolute; inset-inline-start: 0; top: 0; width: 44px; height: 44px; border-radius: 50%;
  display: grid; place-items: center; background: var(--card); border: 2px solid var(--rust); color: var(--rust);
}
.step__marker svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.step__marker--summit { background: var(--rust); color: #fff8f0; }
.step__num { display: block; font: 700 .8125rem/1.3 var(--font-text); letter-spacing: .12em; text-transform: uppercase; color: var(--rust-ink); padding-top: 2px; }
html[lang="ar"] .step__num { text-transform: none; font-size: .9375rem; }
.step h3 { font-size: 1.25rem; font-weight: 700; letter-spacing: -.015em; margin: 2px 0 4px; }
.step p { color: var(--muted); max-width: 40ch; }
@media (min-width: 1024px) {
  .trailmap { position: relative; }
  .trailmap__profile { display: block; width: 100%; height: 170px; }
  [dir="rtl"] .trailmap__profile { transform: scaleX(-1); }
  .trailmap__ground.g3 { fill: #f3dcc3; }
  .trailmap__ground.g2 { fill: #ebc9a3; }
  .trailmap__ground.g1 { fill: #e0b07f; }
  .trailmap__path { fill: none; stroke: var(--rust); stroke-width: 3; stroke-dasharray: .012 .01; vector-effect: non-scaling-stroke; stroke-linecap: round; }
  .steps { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; border-top: 2px solid #c98d5c; }
  .step { padding: 22px 8px 0; text-align: center; min-height: 0; }
  .step::before { inset-inline-start: calc(50% - 1px); top: calc(var(--alt) * -1.7px - 2px); bottom: auto; height: calc(var(--alt) * 1.7px); background: repeating-linear-gradient(180deg, rgba(110, 46, 29, .5) 0 3px, transparent 3px 6px); }
  .step:last-child::before { display: block; }
  .step__marker { inset-inline-start: calc(50% - 22px); top: calc(var(--alt) * -1.7px - 22px); box-shadow: 0 0 0 5px var(--paper); }
  .step p { margin-inline: auto; }
}
.step { --alt: 0; }
.step:nth-child(1) { --alt: 17; }
.step:nth-child(2) { --alt: 39; }
.step:nth-child(3) { --alt: 62; }
.step:nth-child(4) { --alt: 89; }

/* ---------- Field-guide cards ---------- */
.grid { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.card {
  position: relative; display: flex; flex-direction: column; height: 100%;
  background: var(--card); border: 1px solid var(--line-strong); border-radius: var(--radius); overflow: hidden;
  color: var(--ink); text-decoration: none;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s;
}
.card:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: rgba(165, 73, 47, .55); }
.card:active { transform: translateY(-1px); }
.card__plate { position: relative; aspect-ratio: 4 / 3; background: var(--sand); color: rgba(165, 73, 47, .2); overflow: hidden; }
.card__plate::before { transition: transform .5s ease; }
.card:hover .card__plate::before { transform: scale(1.06); }
.card__art { position: absolute; inset: 9% 12% 6%; width: 76%; height: 85%; }
.card__no {
  position: absolute; top: 10px; inset-inline-start: 10px; padding: 3px 8px; border-radius: 7px;
  background: rgba(255, 250, 244, .92); font: 700 .75rem/1.4 var(--font-text); letter-spacing: .08em; color: var(--ink);
}
.card .chip { position: absolute; top: 10px; inset-inline-end: 10px; }
.card__body { display: flex; flex-direction: column; gap: 3px; padding: 14px 14px 14px; flex: 1; }
.card__name { font-size: 1.0625rem; font-weight: 700; line-height: 1.2; letter-spacing: -.01em; }
html[lang="ar"] .card__name { font-family: "Syne", var(--font-text); font-weight: 700; }
html[lang="ar"] .buybox__title { font-weight: 800; line-height: 1; font-size: clamp(1.75rem, 1.25rem + 2.2vw, 2.75rem); }
.card__by { font-size: .9375rem; color: var(--muted); }
.card__desc { font-size: 1rem; color: var(--muted); }
.card__foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: auto; padding-top: 10px; border-top: 1px dashed var(--line-strong); }
.card__body > :last-child { margin-top: auto; }
.card__price { font-weight: 700; font-size: 1.125rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
.card__go { display: inline-flex; align-items: center; gap: 4px; font-weight: 700; font-size: .875rem; color: var(--rust-ink); }
.card__go .i { width: 18px; height: 18px; }
.card__desc + .card__foot, .card__by + .card__foot { margin-top: auto; }

/* Collection: a field-guide list on phones, a grid from tablets */
.collection { background: linear-gradient(180deg, var(--paper), var(--paper-2)); }
.grid--4 .card { flex-direction: row; }
.grid--4 .card__plate { width: 40%; aspect-ratio: auto; min-height: 150px; flex: none; }
.grid--4 .card__name { font-size: 1.125rem; }
.grid--4 .card__art { inset: 24% 5% 6%; width: 90%; height: 70%; }
@media (min-width: 720px) {
  .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
  .grid--4 .card { flex-direction: column; }
  .grid--4 .card__plate { width: auto; aspect-ratio: 4 / 3; min-height: 0; }
}
@media (min-width: 1024px) {
  .grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
  .card__body { padding: 16px 18px 18px; }
}

/* Horizontal rows: native scroll-snap, the next card peeks */
.trending { background: var(--paper-2); }
.row-wrap { position: relative; }
.row {
  list-style: none; margin: 0; display: grid; grid-auto-flow: column; grid-auto-columns: min(70vw, 290px); gap: 12px;
  overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory;
  padding: 6px var(--gutter) 22px; scroll-padding-inline: var(--gutter);
  scrollbar-width: thin; scrollbar-color: rgba(74, 70, 68, .35) transparent;
}
.row > li { scroll-snap-align: start; }
.row:focus-visible { outline-offset: -3px; }
.rowarrows { display: none; gap: 8px; }
.trending .shead { margin-bottom: 20px; }
@media (min-width: 1024px) {
  .rowarrows { display: flex; }
  .row {
    gap: 24px; grid-auto-columns: calc((min(100vw - 2 * var(--gutter), var(--wrap)) - 3 * 24px) / 4.3);
    padding-inline: max(var(--gutter), calc((100% - var(--wrap)) / 2)); scroll-padding-inline: max(var(--gutter), calc((100% - var(--wrap)) / 2));
  }
}
@media (min-width: 1024px) {
  .row--4 { grid-auto-flow: row; grid-template-columns: repeat(4, minmax(0, 1fr)); overflow: visible; }
  [data-row-arrows="more-row"] { display: none; }
}
.empty { padding: 18px; border-radius: 14px; border: 1.5px dashed var(--line-strong); color: var(--muted); }

/* ---------- Categories: trail signs ---------- */
.cats { background: var(--paper); overflow: clip; }
.cats__grid { display: grid; gap: 8px; }
.signpost { position: relative; padding: 4px 0 28px; }
.signpost__pole {
  position: absolute; top: -6px; bottom: 0; inset-inline-start: 18px; width: 14px; border-radius: 5px 5px 2px 2px;
  background: linear-gradient(90deg, #5b4636, #7a5c45 60%, #5b4636);
}
.signpost::after {
  content: ""; position: absolute; bottom: 0; inset-inline-start: 4px; width: 42px; height: 12px; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(74, 70, 68, .35), transparent);
}
.signpost__list { position: relative; display: grid; gap: 10px; }
.sign {
  --pt: 22px;
  position: relative; display: flex; align-items: center; gap: 12px; min-height: 58px;
  margin-inline-start: 6px; margin-inline-end: var(--pt); padding: 8px 12px; padding-inline-start: 46px;
  background: var(--shale); color: #fbf3ea; text-decoration: none; border-radius: 6px 0 0 6px;
  font: 700 1.0625rem/1.2 var(--font-display); letter-spacing: -.01em;
  transform-origin: 0 50%; transition: transform .2s ease, background-color .2s;
  box-shadow: 0 3px 0 #2f2a28;
}
[dir="rtl"] .sign { border-radius: 0 6px 6px 0; transform-origin: 100% 50%; }
html[lang="ar"] .sign { font-weight: 700; font-size: 1.125rem; }
.sign::before {
  content: ""; position: absolute; inset-block: 0; inset-inline-start: 0; width: 34px;
  background: linear-gradient(90deg, transparent 0 10px, var(--blaze) 10px 22px, transparent 22px);
}
.sign::after {
  content: ""; position: absolute; top: 0; bottom: 0; inset-inline-end: calc(var(--pt) * -1 + 1px); width: var(--pt);
  background: inherit; clip-path: polygon(0 0, 100% 50%, 0 100%);
}
[dir="rtl"] .sign::after { clip-path: polygon(100% 0, 0 50%, 100% 100%); }
.sign__icon { width: 24px; height: 24px; fill: none; stroke: var(--ochre-soft); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.sign__arrow { width: 20px; height: 20px; margin-inline-start: auto; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; opacity: .7; flex: none; }
.sign:hover { background: #3c3836; transform: rotate(-1.2deg); }
[dir="rtl"] .sign:hover { transform: rotate(1.2deg); }
.sign:active { transform: translateY(2px); box-shadow: 0 1px 0 #2f2a28; }
.cats__note { margin-top: 4px; color: var(--muted); }
@media (min-width: 720px) and (max-width: 1023.98px) { .signpost { max-width: 560px; } }
@media (min-width: 1024px) {
  .cats__grid { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); align-items: center; gap: 48px; }
  .signpost__pole { inset-inline-start: calc(50% - 8px); width: 16px; }
  .signpost::after { inset-inline-start: calc(50% - 30px); width: 60px; }
  .signpost__list { gap: 12px; }
  .signpost__list li { width: 50%; }
  .signpost__list li:nth-child(odd) { margin-inline-start: calc(50% + 4px); }
  .signpost__list li:nth-child(even) { margin-inline-start: 0; }
  .signpost__list li:nth-child(even) .sign {
    margin-inline: var(--pt) 4px; padding-inline: 14px 46px; border-radius: 0 6px 6px 0; transform-origin: 100% 50%;
    flex-direction: row-reverse; text-align: end;
  }
  .signpost__list li:nth-child(even) .sign__arrow { margin-inline: 0 auto; transform: scaleX(-1); }
  [dir="rtl"] .signpost__list li:nth-child(even) .sign__arrow { transform: none; }
  .signpost__list li:nth-child(even) .sign::before { inset-inline: auto 0; background: linear-gradient(270deg, transparent 0 10px, var(--blaze) 10px 22px, transparent 22px); }
  .signpost__list li:nth-child(even) .sign::after { inset-inline: calc(var(--pt) * -1 + 1px) auto; clip-path: polygon(100% 0, 0 50%, 100% 100%); }
  [dir="rtl"] .signpost__list li:nth-child(even) .sign { border-radius: 6px 0 0 6px; transform-origin: 0 50%; }
  [dir="rtl"] .signpost__list li:nth-child(even) .sign::before { background: linear-gradient(90deg, transparent 0 10px, var(--blaze) 10px 22px, transparent 22px); }
  [dir="rtl"] .signpost__list li:nth-child(even) .sign::after { clip-path: polygon(0 0, 100% 50%, 0 100%); }
  .signpost__list li:nth-child(even) .sign:hover { transform: rotate(1.2deg); }
  [dir="rtl"] .signpost__list li:nth-child(even) .sign:hover { transform: rotate(-1.2deg); }
}

/* ---------- Seller band: leave your mark ---------- */
.band { position: relative; overflow: clip; background: var(--shale-deep); color: rgba(217, 160, 91, .07); padding-block: 56px 0; }
.band__strata { position: absolute; inset-inline: 0; bottom: 0; height: 300px; }
.band__strata svg { width: 100%; height: 100%; }
.band__grid { position: relative; display: grid; gap: 8px; }
.band__copy { color: var(--sand); }
.band h2 { color: var(--sand); font-weight: 800; font-size: clamp(2.375rem, 1.5rem + 3.8vw, 4.5rem); line-height: .98; letter-spacing: -.035em; }
html[lang="ar"] .band h2 { line-height: 1.2; }
.band__text { margin-top: 14px; font-size: 1.0625rem; color: #efe0cf; max-width: 46ch; }
.band__facts { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 16px; color: #efe0cf; font-weight: 600; font-size: .9375rem; }
.band__facts li { display: inline-flex; align-items: center; gap: 8px; }
.band__facts li::before { content: ""; border-inline: 5px solid transparent; border-bottom: 8px solid var(--ochre); }
.band__ctas { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }
.band__mark { position: relative; color: var(--ochre); width: min(78%, 330px); justify-self: center; margin-top: 8px; }
.band__mark svg { width: 100%; height: auto; filter: drop-shadow(0 2px 0 rgba(0, 0, 0, .25)); }
.band__mark::after {
  content: ""; position: absolute; inset: 30% -10% -6%; z-index: -1;
  background: radial-gradient(closest-side, rgba(243, 217, 192, .14), transparent);
}
@media (min-width: 1024px) {
  .band { padding-block: 88px 0; }
  .band__strata { height: 52%; }
  .band__grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: end; }
  .band__copy { padding-bottom: 150px; }
  .band__text { font-size: 1.1875rem; }
  .band__mark { width: min(100%, 380px); margin-top: 0; }
}

/* ---------- Trust: cairns ---------- */
.trust { background: var(--paper); }
.cairns { display: grid; gap: 4px; }
.cairn { display: grid; grid-template-columns: 64px 1fr; gap: 0 16px; align-items: start; padding-block: 10px; }
.cairn__art { width: 64px; height: 77px; grid-row: span 2; margin-top: -8px; }
.cairn h3 { font-size: 1.125rem; font-weight: 700; line-height: 1.25; margin-top: 8px; }
.cairn p { color: var(--muted); }
@media (min-width: 720px) {
  .cairns { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
}
@media (min-width: 1024px) {
  .cairns { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; margin-top: 12px; }
  .cairn { display: block; text-align: center; padding: 0; }
  .cairn__art { width: 104px; height: 125px; margin: 0 auto 6px; }
  .cairn p { max-width: 28ch; margin-inline: auto; margin-top: 6px; }
}

/* ---------- Footer ---------- */
.foot { position: relative; overflow: clip; background: #2b2624; color: rgba(217, 160, 91, .08); padding-block: 52px 24px; }
.foot > .wrap { position: relative; color: #efe0cf; }
.foot__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 16px; }
.foot__brand { grid-column: 1 / -1; }
.foot__tag { margin-top: 12px; color: #efe0cf; max-width: 30ch; }
.foot__domain { margin-top: 4px; color: var(--ochre); font-weight: 700; }
.foot h2 { font: 700 .8125rem/1.3 var(--font-text); letter-spacing: .14em; text-transform: uppercase; color: var(--ochre); margin-bottom: 6px; }
html[lang="ar"] .foot h2 { font-size: 1rem; text-transform: none; }
.foot ul a { display: flex; align-items: center; min-height: 44px; padding-block: 6px; line-height: 1.35; color: #f6eadd; text-decoration: none; }
.foot ul a:hover { color: #fff; 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: 36px; padding-top: 20px; border-top: 1px solid rgba(243, 217, 192, .18); font-size: .9375rem; color: #e3d2c0;
}
.foot__lang { display: inline-flex; align-items: center; gap: 12px; }
@media (min-width: 1024px) {
  .foot { padding-top: 72px; }
  .foot__grid { grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 32px; }
  .foot__brand { grid-column: auto; }
}

/* ---------- Toast ---------- */
.toast {
  position: fixed; z-index: 90; inset-inline: var(--gutter); margin-inline: auto; max-width: 440px;
  bottom: calc(16px + env(safe-area-inset-bottom) + var(--toast-lift, 0px));
  display: flex; align-items: center; gap: 10px; padding: 13px 16px; border-radius: 14px;
  background: var(--ink); color: var(--paper); box-shadow: 0 18px 40px -18px rgba(0, 0, 0, .6);
  transform: translateY(16px); opacity: 0; visibility: hidden; transition: transform .25s ease, opacity .25s ease, visibility 0s .25s;
}
.toast.is-on { transform: none; opacity: 1; visibility: visible; transition: transform .25s ease, opacity .25s ease; }
.toast .i { color: var(--ochre); }
body.has-buybar .toast, body.has-strip .toast { --toast-lift: 84px; }

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* =====================================================================
   Product page
   ===================================================================== */
.muted { color: var(--muted); }
.crumbs ol { display: flex; flex-wrap: wrap; align-items: center; }
.crumbs li { display: inline-flex; align-items: center; }
.crumbs li + li::before {
  content: ""; width: 7px; height: 7px; margin-inline: 2px 6px; flex: none;
  border-top: 2px solid var(--muted); border-inline-end: 2px solid var(--muted); transform: rotate(45deg);
}
[dir="rtl"] .crumbs li + li::before { transform: rotate(-45deg); }
.crumbs a, .crumbs [aria-current] { display: inline-flex; align-items: center; min-height: 44px; padding-inline: 8px; font-size: .9375rem; }
.crumbs li:first-child a { padding-inline-start: 0; }
.crumbs a { color: var(--rust-ink); text-underline-offset: 3px; }
.crumbs [aria-current] { color: var(--ink); font-weight: 600; }

.pd { display: grid; gap: 22px; padding-bottom: 12px; }
.pd > * { min-width: 0; }
.pstage {
  position: relative; width: 100%; aspect-ratio: 10 / 9; border-radius: 20px; overflow: hidden;
  color: rgba(255, 238, 214, .13);
  background: linear-gradient(180deg, #f6d2ab 0%, #eeb185 34%, #d48a68 62%, #a76259 84%, #7e4b55 100%);
}
.pstage__ridge, .pstage__poster, .pstage__canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.pstage__poster { transition: opacity .45s ease; }
.pstage__canvas { opacity: 0; transition: opacity .45s ease; touch-action: pan-y; cursor: grab; border-radius: 20px; }
.pstage__canvas:focus-visible { outline-offset: -4px; }
.pstage.is-live .pstage__canvas { opacity: 1; }
.pstage.is-live .pstage__poster { opacity: 0; }
.pstage.is-grabbing .pstage__canvas { cursor: grabbing; }
.pstage__ui {
  position: absolute; inset-inline: 12px; bottom: 12px; display: flex; align-items: flex-end; justify-content: space-between;
  gap: 8px; pointer-events: none;
}
.pstage__ui > * { pointer-events: auto; }
.pstage__hint {
  padding: 7px 12px; border-radius: 999px; background: rgba(42, 37, 35, .74); color: #fff8f0;
  font-size: .875rem; font-weight: 600; line-height: 1.3; max-width: 62%;
}
.pstage__hint [hidden] { display: none; }
.pstage__btns { display: flex; gap: 6px; }
.iconbtn--glass { background: rgba(255, 250, 244, .92); color: var(--ink); box-shadow: 0 2px 10px rgba(42, 37, 35, .2); }
.iconbtn--glass:hover { background: #fff; }

.buybox { display: grid; gap: 16px; }
.buybox__maker { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; font-size: .9375rem; font-weight: 600; color: var(--muted); }
.chip--studio { background: var(--ink); color: var(--paper); letter-spacing: .04em; }
html[lang="ar"] .chip { letter-spacing: 0; font-size: .875rem; }
.buybox__title { font: 800 clamp(2rem, 1.45rem + 2.4vw, 3.1rem)/1 "Syne", var(--font-text); letter-spacing: -.03em; }
.buybox__price { font: 700 1.75rem/1 var(--font-text); color: var(--rust-ink); font-variant-numeric: tabular-nums; }
.buybox__mat { display: flex; gap: 12px; align-items: flex-start; padding: 14px; border-radius: 14px; background: #e6f2ef; }
.buybox__mat .chip { margin-top: 2px; background: #fff; }
.buybox__matline { margin-bottom: 2px; }
.swatches { border: 0; margin: 0; padding: 0; min-width: 0; }
.swatches legend { padding: 0; margin-bottom: 8px; font-weight: 600; }
.swatches__list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.swatch { position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 8px 2px; border-radius: 12px; cursor: pointer; text-align: center; }
.swatch:hover { background: var(--paper-2); }
.swatch input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.swatch__dot {
  width: 42px; height: 42px; border-radius: 50%; background: var(--c);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .2), 0 0 0 3px var(--paper), 0 0 0 4px rgba(74, 70, 68, .25);
  transition: box-shadow .15s, transform .15s;
}
.swatch input:checked ~ .swatch__dot { box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .2), 0 0 0 3px var(--paper), 0 0 0 6px var(--ink); }
.swatch input:checked ~ .swatch__name { font-weight: 700; color: var(--ink); }
.swatch input:focus-visible ~ .swatch__dot { outline: 3px solid var(--teal-ink); outline-offset: 7px; }
.swatch__name { font-size: .875rem; font-weight: 600; color: var(--muted); line-height: 1.2; }
.pod { display: flex; align-items: center; gap: 8px; margin-top: -8px; font-weight: 600; font-size: .9375rem; color: var(--palm-ink); }
.pod .i { color: var(--palm); }
.buybox__row { display: flex; gap: 10px; }
.qty { display: flex; align-items: center; border: 1.5px solid var(--line-strong); border-radius: 12px; background: var(--card); flex: none; }
.qty__btn { width: 44px; height: 48px; border: 0; background: transparent; border-radius: 10px; display: grid; place-items: center; }
.qty__btn:hover { background: var(--paper-2); }
.qty__btn .i { width: 20px; height: 20px; }
.qty__input { width: 44px; height: 48px; border: 0; background: transparent; text-align: center; font: 700 1rem var(--font-text); color: var(--ink); }
.buybox__add { flex: 1; }
.btn.is-done { background: var(--palm-ink); box-shadow: 0 3px 0 #33471f; color: #fff8f0; }
.buybox__size { margin-top: -8px; text-align: center; font-size: .9375rem; color: var(--muted); }

.pdetail { background: var(--paper-2); margin-top: 32px; }
.pdetail__grid { display: grid; gap: 28px; }
.pdetail__text h2 { font-size: clamp(1.75rem, 1.3rem + 1.8vw, 2.5rem); letter-spacing: -.025em; margin-bottom: 4px; }
.pdetail__text p:not(.eyebrow) { margin-top: 12px; max-width: 60ch; }
.specs { position: relative; background: var(--card); border: 1px solid var(--line-strong); border-radius: 18px; padding: 18px 20px 8px; }
.specs__title { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font-size: 1.1875rem; padding-bottom: 10px; border-bottom: 2px solid var(--ink); }
.specs__no { font: 700 .8125rem/1 var(--font-text); letter-spacing: .1em; color: var(--rust-ink); }
.specs dl { margin: 0; }
.specs dl > div { display: flex; justify-content: space-between; gap: 16px; padding-block: 12px; border-bottom: 1px dashed var(--line-strong); }
.specs dl > div:last-child { border-bottom: 0; }
.specs dt { color: var(--muted); }
.specs dd { margin: 0; font-weight: 700; text-align: end; }
.more { background: var(--paper); }

.buybar {
  position: fixed; inset-inline: 0; bottom: 0; z-index: 45; background: var(--shale-deep); color: var(--sand);
  padding: 10px 0 calc(10px + env(safe-area-inset-bottom)); box-shadow: 0 -12px 30px -14px rgba(0, 0, 0, .45);
  transform: translateY(110%); visibility: hidden; transition: transform .25s ease, visibility 0s .25s;
}
.buybar.is-on { transform: none; visibility: visible; transition: transform .25s ease; }
.buybar__in { display: flex; align-items: center; gap: 10px; }
.buybar__info { display: grid; min-width: 0; flex: 1; line-height: 1.3; }
.buybar__name { font-weight: 700; font-size: .9375rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.buybar__meta { font-size: .875rem; color: #e6d6c4; }
.buybar__meta b { color: #fbf3ea; }
.buybar__room { width: 48px; height: 48px; color: var(--sand); border: 1.5px solid rgba(243, 217, 192, .4); }
.buybar__room:hover { background: rgba(243, 217, 192, .12); }
.buybar__add { min-height: 48px; padding-inline: 18px; }
@media (max-width: 1023.98px) {
  .page-product .foot { padding-bottom: calc(24px + 72px + env(safe-area-inset-bottom)); }
}
@media (min-width: 720px) {
  .pstage { aspect-ratio: 4 / 3; }
}
@media (min-width: 1024px) {
  .pd { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 48px; align-items: start; }
  .pstage { aspect-ratio: 1 / 1; max-height: calc(100svh - var(--hdr) - 76px); min-height: 520px; }
  .buybox { position: sticky; top: calc(var(--hdr) + 20px); }
  .pdetail { margin-top: 56px; }
  .pdetail__grid { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 64px; align-items: start; }
  .buybar { display: none; }
}

/* =====================================================================
   Sell page
   ===================================================================== */
.shero { position: relative; overflow: clip; padding-block: 28px 44px; background: linear-gradient(180deg, var(--paper), var(--paper-2)); }
.shero__grid { display: grid; gap: 24px; align-items: center; }
.shero h1 { font-weight: 800; font-size: clamp(2.375rem, 1.45rem + 3.8vw, 4.6rem); line-height: .98; letter-spacing: -.038em; }
html[lang="ar"] .shero h1 { line-height: 1.2; }
.shero__lede { margin-top: 14px; font-size: 1.0625rem; max-width: 44ch; color: #3b3431; }
.shero__points { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.shero__points li {
  display: inline-flex; align-items: center; gap: 8px; padding: 7px 12px 7px 10px; border-radius: 999px;
  background: var(--card); border: 1px solid var(--line-strong); font-weight: 600; font-size: .9375rem;
}
.shero__points .i { width: 20px; height: 20px; color: var(--rust); }
.shero__ctas { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.shero__ctas .btn { flex: 1 1 auto; }
.shero__art { display: none; }
.shero__art svg { width: 100%; max-width: 440px; margin-inline: auto; }
@media (min-width: 720px) {
  .shero__art { display: block; }
  .shero__ctas .btn { flex: 0 0 auto; }
}
@media (min-width: 1024px) {
  .shero { padding-block: 64px 72px; }
  .shero__grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 48px; }
  .shero__lede { font-size: 1.25rem; }
}

.ssteps { background: var(--paper); }
.route { position: relative; display: grid; }
.route li { position: relative; padding-inline-start: 60px; padding-bottom: 22px; min-height: 80px; }
.route li::before {
  content: ""; position: absolute; inset-inline-start: 21px; top: 50px; bottom: 4px; width: 2px;
  background: repeating-linear-gradient(180deg, var(--shale) 0 6px, transparent 6px 12px);
}
.route li:last-child::before { display: none; }
.route__no {
  position: absolute; inset-inline-start: 0; top: 0; width: 44px; height: 44px; border-radius: 12px;
  display: grid; place-items: center; background: var(--ink); color: var(--paper); font: 700 .9375rem/1 var(--font-text);
  box-shadow: 0 3px 0 var(--rust);
}
.route li:last-child .route__no { background: var(--rust); box-shadow: 0 3px 0 var(--rust-deep); }
.route h3 { font-size: 1.1875rem; font-weight: 700; letter-spacing: -.012em; padding-top: 1px; }
.route p { color: var(--muted); margin-top: 2px; }
@media (min-width: 1024px) {
  .route { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 36px 40px; }
  .route li { padding: 62px 0 0; min-height: 0; }
  .route li::before { top: 21px; bottom: auto; inset-inline: 56px -36px; width: auto; height: 2px; background: repeating-linear-gradient(90deg, var(--shale) 0 6px, transparent 6px 12px); }
  .route li:nth-child(3n)::before { display: none; }
  .route p { max-width: 32ch; }
}

.calcsec { background: var(--paper-2); }
.calc { position: relative; display: grid; gap: 16px; }
.calc__in { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; padding: 18px; border-radius: 18px; background: var(--card); border: 1px solid var(--line-strong); }
.calc__group { border: 0; margin: 0; padding: 0; min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
.calc__legend { display: flex; align-items: center; gap: 10px; padding: 0; font: 700 1.1875rem/1.2 var(--font-display); color: var(--ink); }
html[lang="ar"] .calc__legend { font-weight: 800; font-size: 1.1875rem; }
label.calc__legend { min-height: 44px; }
.calc__n { width: 28px; height: 28px; border-radius: 8px; flex: none; display: grid; place-items: center; background: var(--rust); color: #fff8f0; font: 700 .875rem/1 var(--font-text); }
.drop { display: flex; align-items: center; gap: 12px; padding: 14px; border-radius: 14px; border: 2px dashed var(--line-strong); background: var(--paper); }
.drop .i { color: var(--rust); width: 28px; height: 28px; }
.drop p { display: grid; }
.drop__note { font-size: .875rem; color: var(--muted); }
.files { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.file { position: relative; display: block; cursor: pointer; }
.file input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.file__box {
  display: grid; justify-items: center; align-content: center; gap: 4px; min-height: 104px; padding: 12px 8px; text-align: center;
  border-radius: 12px; border: 1.5px solid var(--line-strong); background: var(--paper); transition: border-color .15s, background-color .15s;
}
.file:hover .file__box { border-color: var(--shale); }
.file__art { width: 48px; height: 36px; color: var(--shale); }
.file__name { font-weight: 700; font-size: .9375rem; line-height: 1.2; }
.file__meta { font-size: .8125rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.file input:checked + .file__box { border-color: var(--rust); background: #fbe9dc; box-shadow: inset 0 0 0 1px var(--rust); }
.file input:checked + .file__box .file__art { color: var(--rust); }
.file input:focus-visible + .file__box, .seg__opt input:focus-visible + span { outline: 3px solid var(--teal-ink); outline-offset: 2px; }
.calc__est { display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; border-radius: 12px; background: var(--teal-soft); color: #134d46; font-size: .9375rem; font-weight: 600; }
.calc__est .i { width: 20px; height: 20px; margin-top: 1px; }
.seg { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.seg__opt { position: relative; display: block; cursor: pointer; }
.seg__opt input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.seg__opt span {
  position: relative; display: grid; gap: 2px; min-height: 64px; padding: 12px 14px; border-radius: 12px;
  border: 1.5px solid var(--line-strong); background: var(--paper);
}
.seg__opt b { font: 700 1.25rem/1.1 "Syne", var(--font-text); }
.seg__opt small { font-size: .875rem; color: var(--muted); }
.seg__opt input:checked + span { border-color: var(--rust); background: #fbe9dc; box-shadow: inset 0 0 0 1px var(--rust); }
.seg__opt input:checked + span::after {
  content: ""; position: absolute; top: 12px; inset-inline-end: 12px; width: 18px; height: 18px; border-radius: 50%;
  background: var(--rust) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.5l4 4 8-9' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 14px no-repeat;
}
.calc__link { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; font-weight: 600; justify-self: start; }
.calc__link .i { width: 18px; height: 18px; }
.pricefield { min-width: 0; display: flex; align-items: center; border: 2px solid var(--line-strong); border-radius: 14px; background: var(--paper); }
.pricefield:focus-within { border-color: var(--teal-ink); box-shadow: 0 0 0 3px rgba(26, 107, 96, .18); }
.pricefield__cur { padding-inline: 14px 4px; font-weight: 700; color: var(--muted); }
.pricefield input {
  flex: 1; min-width: 0; width: 100%; height: 56px; padding: 0 8px; border: 0; background: transparent;
  font: 700 1.375rem/1 var(--font-text); color: var(--ink); font-variant-numeric: tabular-nums;
}
.pricefield input:focus-visible { outline: none; }
.pricefield__min { flex: none; min-height: 44px; margin-inline-end: 6px; padding: 0 12px; border: 0; border-radius: 10px; background: var(--paper-2); font-weight: 700; font-size: .875rem; color: var(--ink); }
.pricefield__min:hover { background: var(--sand); }
.calc.is-invalid .pricefield { border-color: #b3261e; }
.calc__help { font-size: .9375rem; color: var(--muted); }
.calc__err { display: flex; align-items: flex-start; gap: 8px; padding: 10px 12px; border-radius: 10px; background: #fbe4e0; color: #8c1d14; font-weight: 600; font-size: .9375rem; }
.calc__err[hidden] { display: none; }
.calc__err .i { width: 20px; height: 20px; flex: none; margin-top: 1px; }

.calc__out { display: grid; gap: 16px; padding: 20px; border-radius: 18px; background: var(--shale-deep); color: var(--sand); }
.calc__outhead { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.calc__out h3 { color: var(--sand); font-size: 1.1875rem; }
.tag { padding: 4px 10px; border-radius: 999px; background: var(--ochre); color: var(--ink); font: 700 .8125rem/1.4 var(--font-text); white-space: nowrap; }
.nums { margin: 0; }
.nums__row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding-block: 10px; border-bottom: 1px dashed rgba(243, 217, 192, .22); }
.nums dt { color: #ecdfd1; }
.nums dt small { display: block; font-size: .8125rem; color: #cdbaa7; }
.nums dd { margin: 0; font: 700 1.25rem/1.1 var(--font-text); color: #fbf3ea; font-variant-numeric: tabular-nums; white-space: nowrap; }
.nums__row--earn dd { font-size: 2rem; color: var(--ochre); }
.calc.is-invalid .nums dd { color: #cdbaa7; }
.strata { display: flex; height: 14px; border-radius: 999px; overflow: hidden; background: rgba(255, 255, 255, .08); }
.strata span { flex: 0 1 0; min-width: 0; transition: flex-grow .35s ease; }
.strata [data-bar="cost"], .k--cost { background: #8f4430; }
.strata [data-bar="margin"], .k--margin { background: #c7773f; }
.strata [data-bar="you"], .k--you { background: var(--ochre); }
.strata [data-bar="us"], .k--us { background: var(--teal); }
.strata__key { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: .8125rem; color: #ecdfd1; }
.strata__key li { display: inline-flex; align-items: center; gap: 6px; }
.k { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
.breakdown summary { display: flex; align-items: center; gap: 10px; min-height: 44px; cursor: pointer; font-weight: 700; color: var(--ochre); list-style: none; }
.breakdown summary::-webkit-details-marker { display: none; }
.breakdown summary::before { content: ""; width: 8px; height: 8px; border-inline-end: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(-45deg); transition: transform .2s; }
[dir="rtl"] .breakdown summary::before { transform: rotate(45deg); }
.breakdown[open] summary::before, [dir="rtl"] .breakdown[open] summary::before { transform: rotate(45deg) translate(-2px, -2px); }
.breakdown__list { margin: 0; }
.breakdown__list > div { display: flex; justify-content: space-between; gap: 12px; padding-block: 6px; font-size: .9375rem; color: #ecdfd1; }
.breakdown__list dd { margin: 0; font-variant-numeric: tabular-nums; white-space: nowrap; }
.breakdown__list .breakdown__total { border-top: 1px solid rgba(243, 217, 192, .3); margin-top: 4px; padding-top: 10px; font-weight: 700; color: #fbf3ea; }
.estnote { padding: 18px 20px; border-radius: 16px; border: 1.5px dashed var(--line-strong); background: var(--paper); }
.estnote h3 { font-size: 1.125rem; margin-bottom: 6px; }
.estnote p { color: var(--muted); }
@media (min-width: 720px) { .files { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 1024px) {
  .calc { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); grid-template-areas: "in out" "in note"; gap: 24px; align-items: start; }
  .calc__in { grid-area: in; padding: 24px; }
  .calc__out { grid-area: out; padding: 24px; }
  .estnote { grid-area: note; }
}

.strip {
  position: fixed; inset-inline: 0; bottom: 0; z-index: 45; background: var(--shale-deep); color: var(--sand);
  padding: 8px 0 calc(8px + env(safe-area-inset-bottom)); box-shadow: 0 -12px 30px -14px rgba(0, 0, 0, .45);
  transform: translateY(110%); visibility: hidden; transition: transform .25s ease, visibility 0s .25s;
}
.strip.is-on { transform: none; visibility: visible; transition: transform .25s ease; }
.strip__in { display: flex; align-items: center; gap: 20px; }
.strip__in > span { display: grid; line-height: 1.25; }
.strip small { font-size: .8125rem; color: #d8c6b4; }
.strip b { font-size: 1.125rem; color: #fbf3ea; font-variant-numeric: tabular-nums; }
.strip [data-strip="earn"] { color: var(--ochre); }
.strip__link { margin-inline-start: auto; display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px; border-radius: 10px; border: 1.5px solid rgba(243, 217, 192, .4); color: var(--sand); text-decoration: none; font-weight: 700; }
@media (max-width: 1023.98px) { .calcsec { padding-bottom: 96px; } }
@media (min-width: 1024px) { .strip { display: none; } }

.guide { background: var(--paper); }
.mtable { border-radius: 18px; border: 1px solid var(--line-strong); overflow: clip; background: var(--card); }
.mtable__head, .mtable__row { display: grid; grid-template-columns: 1fr 1fr; }
.mtable__head { position: sticky; top: var(--hdr); z-index: 2; }
.mtable__corner { display: none; }
.mtable__col { padding: 12px 14px; font: 700 1.375rem/1 "Syne", var(--font-text); }
.mtable__col--pla { background: #f6e1c3; color: #6e3f15; }
.mtable__col--petg { background: var(--teal-soft); color: #145a51; }
.mtable__rh { grid-column: 1 / -1; padding: 14px 14px 4px; border-top: 1px solid var(--line); font: 700 .8125rem/1.3 var(--font-text); letter-spacing: .1em; text-transform: uppercase; color: var(--rust-ink); }
html[lang="ar"] .mtable__rh { text-transform: none; font-size: 1rem; }
.mtable__row--lead .mtable__rh { border-top: 0; }
.mtable__cell { padding: 4px 14px 14px; }
.mtable__cell + .mtable__cell { border-inline-start: 1px dashed var(--line-strong); }
.mtable__row--lead .mtable__cell { font-weight: 700; }
.guide__notes { display: grid; gap: 12px; margin-top: 16px; }
.gnote { padding: 16px 18px; border-radius: 16px; background: var(--paper-2); border-inline-start: 5px solid var(--ochre); }
.gnote--tip { border-inline-start-color: var(--teal); }
.gnote h3 { font-size: 1.125rem; margin-bottom: 4px; }
@media (min-width: 1024px) {
  .mtable__head, .mtable__row { grid-template-columns: 230px 1fr 1fr; }
  .mtable__head { top: calc(var(--hdr) + var(--secnav)); }
  .mtable__corner { display: block; background: var(--card); }
  .mtable__col { padding: 16px 22px; font-size: 1.625rem; }
  .mtable__rh { grid-column: auto; padding: 16px 22px; }
  .mtable__cell { padding: 16px 22px; border-top: 1px solid var(--line); }
  .mtable__row--lead .mtable__cell { border-top: 0; }
  .guide__notes { grid-template-columns: 1fr 1fr; gap: 16px; }
}

.rules { background: var(--paper-2); }
.rules__grid { display: grid; gap: 8px; }
.banned { padding: 18px 20px; border-radius: 18px; background: var(--card); border: 1px solid var(--line-strong); }
.banned h3 { font-size: 1.125rem; }
.banned li { display: flex; align-items: center; gap: 12px; padding-block: 12px; border-bottom: 1px dashed var(--line-strong); font-weight: 600; }
.banned li:last-child { border-bottom: 0; }
.banned .i { color: #b3261e; }
@media (min-width: 1024px) { .rules__grid { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 56px; align-items: center; } }

.scta { position: relative; overflow: clip; padding-block: 56px 72px; background: var(--shale-deep); color: var(--sand); text-align: center; }
.scta::after {
  content: ""; position: absolute; inset-inline: 0; bottom: 0; height: 30px; pointer-events: none;
  background: linear-gradient(to top, #6e3a29 0 9px, #a5492f 9px 17px, #c7773f 17px 23px, #d9a05b 23px 27px, #ecc89c 27px 30px);
}
.scta__in { display: grid; justify-items: center; gap: 10px; }
.scta h2 { color: var(--sand); font-weight: 800; font-size: clamp(2rem, 1.4rem + 2.6vw, 3.25rem); letter-spacing: -.03em; line-height: 1.02; }
.scta p { color: #efe0cf; }
.scta .btn { margin-top: 10px; }
.scta .scta__note { font-size: .875rem; color: #cdbaa7; }