/* © Atia Hegazy — atiaeno.com */
/* SKROOZ public website.
   Desktop (>= 1200px) is one proportional design: the reference frame is 1672px wide and equals 104.5rem,
   so 1rem = 16px at 1672px and everything scales together at any laptop width.
   Below 1200px the same pieces stack in one column. Logical properties everywhere (LTR + RTL). */

@font-face { font-family: "Baloo Bhaijaan 2"; font-weight: 400 800; font-style: normal; font-display: swap; src: url("fonts/BalooBhaijaan2-arabic.woff2") format("woff2"); unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC; }
@font-face { font-family: "Baloo Bhaijaan 2"; font-weight: 400 800; font-style: normal; font-display: swap; src: url("fonts/BalooBhaijaan2-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Cairo"; font-weight: 400; font-style: normal; font-display: swap; src: url("fonts/Cairo_400Regular.woff2") format("woff2"); }
@font-face { font-family: "Cairo"; font-weight: 600; font-style: normal; font-display: swap; src: url("fonts/Cairo_600SemiBold.woff2") format("woff2"); }
@font-face { font-family: "Cairo"; font-weight: 700; font-style: normal; font-display: swap; src: url("fonts/Cairo_700Bold.woff2") format("woff2"); }
@font-face { font-family: "Lalezar"; font-weight: 400; font-style: normal; font-display: swap; src: url("fonts/Lalezar_400Regular.woff2") format("woff2"); }

:root {
  --sk-ink: #221b45;
  --sk-table: #2e2558;
  --sk-violet: #6b4fd8;
  --sk-violet-dark: #4a35a8;
  --sk-lavender: #a893f0;
  --sk-cream: #fcf1d8;
  --sk-cream-dark: #f2ddaf;
  --sk-paper: #fff9ec;
  --sk-white: #ffffff;
  --sk-gold: #ffc93c;
  --sk-gold-dark: #d08d10;
  --sk-green: #4cc06a;
  --sk-muted: #5a5078;
  --ring: var(--sk-gold);

  --font-ui: "Baloo Bhaijaan 2", "Cairo", system-ui, -apple-system, "Segoe UI", Tahoma, sans-serif;
  --font-text: "Cairo", system-ui, -apple-system, "Segoe UI", Tahoma, sans-serif;
  --font-tag: "Lalezar", "Baloo Bhaijaan 2", "Cairo", sans-serif;

  /* Desktop sizes measured on the 1672px reference frames (rem = px / 16). */
  --gutter: 4rem;
  --nav-h: 5.5rem;
  --frame-h: 53.3125rem;
  --fs-nav: 1.25rem;
  --fs-hero: 3.5rem;
  --fs-scene: 3.6rem;
  --fs-big: 4.4rem;
  --fs-sub: 1.45rem;
  --fs-btn: 1.75rem;
  --btn-h: 5.25rem;
  --fs-pill: 1.65rem;
  --fs-body: 1.45rem;
}
:root:lang(ar) {
  --fs-hero: 2.85rem;
  --fs-scene: 3rem;
  --fs-big: 3.8rem;
  --fs-sub: 1.4rem;
  --fs-btn: 1.7rem;
  --fs-pill: 1.6rem;
  --fs-body: 1.4rem;
}

@media (min-width: 1200px) {
  /* The whole frame (nav 88px + scene 853px = 58.8rem tall, 104.5rem wide) always fits the window. */
  html { font-size: clamp(11.5px, min(calc(100vw / 104.5), calc(100vh / 58.8)), 18.4px); }
  @supports (height: 100dvh) { html { font-size: clamp(11.5px, min(calc(100vw / 104.5), calc(100dvh / 58.8)), 18.4px); } }
}
@media (max-width: 1199px) {
  :root {
    --gutter: clamp(1.25rem, 4vw, 2.5rem);
    --nav-h: 4rem;
    --frame-h: auto;
    --fs-nav: 1.1rem;
    --fs-hero: 1.9rem;
    --fs-scene: 1.8rem;
    --fs-big: 1.8rem;
    --fs-sub: .95rem;
    --fs-btn: 1.05rem;
    --btn-h: 3.4rem;
    --fs-pill: 1.05rem;
    --fs-body: 1rem;
  }
  :root:lang(ar) { --fs-hero: 1.7rem; --fs-scene: 1.65rem; --fs-big: 1.65rem; --fs-sub: .95rem; --fs-btn: 1rem; --fs-pill: 1rem; --fs-body: .95rem; }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-block-start: calc(var(--nav-h) + 1rem); }
body { margin: 0; background: var(--sk-ink); color: var(--sk-ink); font-family: var(--font-text); font-size: 1rem; line-height: 1.7; text-align: start; overflow-x: clip; }
@media (min-width: 1200px) { body { font-size: max(1rem, 15px); } }
h1, h2, h3, p, ul, ol, dl, dd, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img, picture { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--ring); outline-offset: 3px; }
.visually-hidden { position: absolute; inline-size: 1px; block-size: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.wrap { inline-size: min(100% - 2 * var(--gutter), 100rem); margin-inline: auto; }
.icon { inline-size: 1.25em; block-size: 1.25em; flex: none; }
[dir="rtl"] .icon--dir { transform: scaleX(-1); }

.skip-link { position: absolute; inset-inline-start: .75rem; inset-block-start: -5rem; z-index: 100; padding: .75rem 1.25rem; border-radius: .9rem; background: var(--sk-gold); color: var(--sk-ink); font-weight: 800; text-decoration: none; }
.skip-link:focus { inset-block-start: .75rem; }

/* ---------- Buttons: one tactile component (lower edge = press feedback) ---------- */
.button {
  display: inline-flex; align-items: center; justify-content: center; gap: .9rem;
  min-block-size: var(--btn-h); padding-block: .4rem; padding-inline: 2.3rem;
  border: 3px solid var(--sk-ink); border-radius: 999px;
  font-family: var(--font-ui); font-size: var(--fs-btn); font-weight: 800; line-height: 1.1; text-decoration: none; cursor: pointer;
  margin-block-end: .45rem; box-shadow: 0 .45rem 0 var(--sk-gold-dark);
  white-space: nowrap; touch-action: manipulation; transition: transform 180ms ease, box-shadow 180ms ease, filter 180ms ease;
}
.button > span { padding-block-start: .15em; }
.button:hover { transform: translateY(-2px); filter: saturate(1.06) brightness(1.03); }
.button:active { transform: translateY(4px); box-shadow: 0 .2rem 0 var(--sk-gold-dark); }
.button:focus-visible { outline: 0; box-shadow: 0 0 0 4px rgb(255 201 60 / 55%), 0 .45rem 0 var(--sk-gold-dark); }
.button .icon { transition: transform 180ms ease; inline-size: 1.05em; block-size: 1.05em; }
.button:hover .icon--dir { transform: translateX(3px); }
[dir="rtl"] .button:hover .icon--dir { transform: translateX(-3px) scaleX(-1); }
.button--gold { background: linear-gradient(#ffdc6a, var(--sk-gold) 60%, #f4b21c); color: var(--sk-ink); }
.button--outline { background: rgb(34 27 69 / 82%); color: var(--sk-white); border-color: rgb(255 255 255 / 92%); box-shadow: 0 .45rem 0 rgb(0 0 0 / 35%); }
.button--outline:active { box-shadow: 0 .2rem 0 rgb(0 0 0 / 35%); }
.button--outline:focus-visible { box-shadow: 0 0 0 4px rgb(255 201 60 / 70%), 0 .45rem 0 rgb(0 0 0 / 35%); }
.button--ink { background: linear-gradient(#5a43bd, var(--sk-violet-dark)); color: var(--sk-white); box-shadow: 0 .45rem 0 var(--sk-ink); }
.button--ink:active { box-shadow: 0 .2rem 0 var(--sk-ink); }
.button--ink:focus-visible { box-shadow: 0 0 0 4px rgb(107 79 216 / 55%), 0 .45rem 0 var(--sk-ink); }
.button--block { inline-size: 100%; }
.button[aria-disabled="true"] { cursor: default; }
.button[aria-disabled="true"]:hover { transform: none; }
.actions { display: flex; flex-wrap: wrap; gap: 1rem 1.5rem; align-items: center; }
.text-link { color: var(--sk-violet-dark); font-weight: 700; text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 2px; }
.text-link:hover { color: var(--sk-ink); }

/* ---------- Display type ---------- */
.display { font-family: var(--font-ui); font-weight: 800; line-height: 1.08; letter-spacing: 0; text-wrap: balance; }
.display em { font-style: normal; color: var(--sk-gold); }
.display--hero { font-size: var(--fs-hero); color: var(--sk-white); text-shadow: 0 .2rem 0 rgb(22 16 48 / 45%); }
.display--hero span { display: block; }
.display--scene { font-size: var(--fs-scene); color: var(--sk-white); text-shadow: 0 .2rem 0 rgb(22 16 48 / 45%); }
.display--ink { font-size: var(--fs-big); color: var(--sk-ink); }
.display--ink em { color: var(--sk-violet-dark); }
.display--page { font-size: clamp(1.6rem, 3vw, 2rem); color: var(--sk-white); }
:lang(ar) .display { line-height: 1.25; }
.section-title { font-family: var(--font-ui); font-size: clamp(1.35rem, 2vw, 1.65rem); font-weight: 800; line-height: 1.3; margin-block-end: 1rem; color: var(--sk-ink); }
.section-title--icon { display: flex; align-items: center; gap: .7rem; }
.section-title--icon .icon { inline-size: 2.2rem; block-size: 2.2rem; padding: .38rem; border: 2px solid var(--sk-ink); border-radius: .7rem; background: var(--sk-violet-dark); color: var(--sk-white); box-shadow: 0 .18rem 0 var(--sk-gold); }
.tag {
  display: inline-flex; align-items: center; flex-wrap: wrap; gap: .6rem; max-inline-size: 100%; padding: .1rem 1.6rem; border: 3px solid var(--sk-ink); border-radius: 1.2rem;
  background: linear-gradient(#ffdc6a, var(--sk-gold)); color: var(--sk-ink); font-family: var(--font-tag); font-size: var(--fs-pill); line-height: 1.45; text-transform: uppercase; box-shadow: 0 .25rem 0 var(--sk-gold-dark);
}
:lang(ar) .tag { text-transform: none; }
.tag--cream { background: var(--sk-cream); box-shadow: 0 .25rem 0 var(--sk-cream-dark); font-size: calc(var(--fs-pill) * .85); }
.chip { display: inline-block; padding: 0 .7rem; border-radius: 999px; background: var(--sk-green); color: var(--sk-ink); font-family: var(--font-ui); font-size: .85rem; font-weight: 800; line-height: 1.8; text-transform: none; }
.chip--ink { background: var(--sk-ink); color: var(--sk-cream); }

/* ---------- Header ---------- */
.site-header { position: relative; z-index: 20; background: var(--sk-ink); }
.site-header__bar { display: flex; align-items: center; gap: 2rem; min-block-size: var(--nav-h); padding-inline: var(--gutter); }
.brand { display: block; flex: none; border-radius: .6rem; }
.brand img { block-size: calc(var(--nav-h) * 1.15); inline-size: auto; margin-block: calc(var(--nav-h) * -.075); }
.site-header__rule { inline-size: 2px; block-size: 2rem; background: rgb(255 255 255 / 55%); flex: none; }
.primary-nav { display: flex; align-items: center; flex: 1; gap: 2rem; min-inline-size: 0; }
.primary-nav ul { display: flex; align-items: center; gap: .9rem; }
.primary-nav ul a {
  display: inline-flex; align-items: center; min-block-size: 3.125rem; padding: .1rem 1.65rem 0; border-radius: .8rem;
  color: var(--sk-white); font-family: var(--font-ui); font-size: var(--fs-nav); font-weight: 700; line-height: 1; text-decoration: none; white-space: nowrap; transition: background-color 160ms ease;
}
.primary-nav ul a:hover { background: rgb(255 255 255 / 12%); }
.primary-nav ul a[aria-current="page"] { background: var(--sk-violet); }
.site-header__rule--end { margin-inline-start: auto; }
.lang-switch {
  display: inline-flex; align-items: center; gap: .6rem; min-block-size: 3.125rem; padding: .1rem 1.1rem 0; border: 2px solid rgb(255 255 255 / 88%); border-radius: .9rem;
  color: var(--sk-white); font-family: var(--font-ui); font-size: calc(var(--fs-nav) * .95); font-weight: 700; line-height: 1; text-decoration: none; white-space: nowrap; transition: background-color 160ms ease;
}
.lang-switch:hover { background: rgb(255 255 255 / 12%); }
.menu-toggle { display: none; }

@media (max-width: 1199px) {
  .site-header__bar { flex-wrap: wrap; gap: 0 1rem; }
  .site-header__rule { display: none; }
  .brand img { block-size: 3.4rem; margin-block: 0; }
  .menu-toggle {
    display: inline-flex; align-items: center; gap: .5rem; min-block-size: 3rem; min-inline-size: 3rem; margin-inline-start: auto; padding-inline: .9rem;
    border: 2px solid rgb(255 255 255 / 85%); border-radius: .9rem; background: transparent; color: var(--sk-white); font-weight: 700; cursor: pointer;
  }
  .menu-toggle [data-icon-close] { display: none; }
  .menu-toggle[aria-expanded="true"] [data-icon-open] { display: none; }
  .menu-toggle[aria-expanded="true"] [data-icon-close] { display: inline-block; }
  .primary-nav { flex: 1 0 100%; flex-direction: column; align-items: stretch; gap: .5rem; padding-block: .5rem 1.25rem; }
  .primary-nav ul { flex-direction: column; align-items: stretch; gap: .25rem; }
  .primary-nav ul a { min-block-size: 3.25rem; font-size: 1.25rem; }
  .lang-switch { align-self: flex-start; font-size: 1.1rem; }
  .js .primary-nav { display: none; }
  .js .primary-nav[data-open] { display: flex; }
}
@media (max-width: 767px) { .menu-toggle__label { display: none; } .menu-toggle { padding-inline: .75rem; } }

/* ---------- Home hero ---------- */
.hero { position: relative; isolation: isolate; display: flex; align-items: flex-end; min-block-size: var(--frame-h); overflow: hidden; background: var(--sk-table); }
.hero__art { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; object-fit: cover; object-position: 50% 30%; z-index: -2; }
.hero__shade {
  position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(to top, rgb(22 16 48 / 80%) 0%, rgb(22 16 48 / 42%) 26%, transparent 52%), linear-gradient(to right, rgb(22 16 48 / 78%) 0%, rgb(22 16 48 / 40%) 30%, transparent 52%);
}
[dir="rtl"] .hero__shade { background: linear-gradient(to top, rgb(22 16 48 / 80%) 0%, rgb(22 16 48 / 42%) 26%, transparent 52%), linear-gradient(to left, rgb(22 16 48 / 78%) 0%, rgb(22 16 48 / 40%) 30%, transparent 52%); }
.hero__wrap { padding-block: 2.5rem 2.6rem; padding-inline: 2rem; }
.hero__copy { max-inline-size: 48rem; display: grid; gap: .5rem; justify-items: start; }
:lang(ar) .hero__copy { max-inline-size: 52rem; }
.hero__sub { max-inline-size: 60ch; margin-block-end: .9rem; color: var(--sk-white); font-family: var(--font-ui); font-size: var(--fs-sub); font-weight: 600; line-height: 1.35; text-shadow: 0 2px 0 rgb(22 16 48 / 55%); }
.hero__copy .actions { gap: 1.5rem; }

@media (max-width: 767px) {
  .hero { flex-direction: column-reverse; align-items: stretch; min-block-size: 45rem; background: var(--sk-ink); }
  .hero__shade { display: none; }
  .hero__art { position: static; z-index: auto; block-size: 24rem; object-position: 38% 22%; -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 22%); mask-image: linear-gradient(to bottom, transparent 0, #000 22%); }
  [dir="rtl"] .hero__art { object-position: 62% 22%; }
  .hero__wrap { padding: 1.75rem 0 .25rem; }
  .hero__copy { max-inline-size: none; justify-items: stretch; margin-block: -133px 38px; position: relative; z-index: 1; }
  .hero__copy .actions .button { inline-size: 100%; }
}

/* ---------- Dark café scenes ---------- */
.scene { position: relative; isolation: isolate; display: flex; min-block-size: var(--frame-h); overflow: hidden; background: var(--sk-table); }
.scene > .wrap { position: relative; z-index: 1; }
.scene__bg { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; object-fit: cover; object-position: 50% 0; z-index: -3; filter: saturate(1.08) contrast(1.03); }
.scene__shade { position: absolute; inset: 0; z-index: -2; background: linear-gradient(to bottom, rgb(34 27 69 / 4%) 0%, rgb(46 37 88 / 18%) 48%, rgb(34 27 69 / 54%) 100%); }
.scene::after {
  content: ""; position: absolute; z-index: -1; inset-inline: -8%; inset-block-end: -26%; block-size: 46%;
  border-radius: 50% 50% 0 0 / 100% 100% 0 0; border-block-start: 4px solid rgb(255 201 60 / 55%);
  background: radial-gradient(ellipse at 50% 0, #4a35a8 0%, #3a2b82 55%, #2e2558 100%);
}
.scene__sub { color: var(--sk-white); font-family: var(--font-ui); font-size: var(--fs-sub); font-weight: 600; line-height: 1.3; text-shadow: 0 2px 0 rgb(22 16 48 / 55%); }

/* How to play: tabletop on the left, full-height cream rail on the right */
.how__grid { inline-size: 100%; max-inline-size: none; margin: 0; display: grid; grid-template-columns: minmax(0, 1fr) 29.4rem; gap: 1.5rem; align-items: stretch; padding: .5rem 1.4rem .5rem 0; }
[dir="rtl"] .how__grid { padding: .5rem 0 .5rem 1.4rem; }
.how__visual { display: flex; flex-direction: column; justify-content: space-between; gap: 1rem; min-inline-size: 0; padding-block-start: 1.6rem; }
.how__head { display: grid; gap: .4rem; padding-inline-start: 6.8rem; }
.how__table { position: relative; inline-size: 72rem; max-inline-size: 100%; margin-block-start: auto; }
.how__table img { inline-size: 100%; }
.how__marks { position: static; }
.how__mark, .how__pile { position: absolute; }
.how__mark {
  display: flex; align-items: center; gap: .6rem; padding: .2rem 1.1rem .2rem .2rem; border: 3px solid var(--sk-ink); border-radius: 999px; background: linear-gradient(#ffdc6a, var(--sk-gold));
  color: var(--sk-ink); font-family: var(--font-ui); font-size: 1.55rem; font-weight: 800; line-height: 1; white-space: nowrap; box-shadow: 0 .2rem 0 var(--sk-gold-dark);
}
[dir="rtl"] .how__mark { padding: .2rem .2rem .2rem 1.1rem; }
.how__mark b { display: grid; place-items: center; inline-size: 2.4rem; block-size: 2.4rem; border-radius: 50%; border: 3px solid var(--sk-ink); background: var(--sk-cream); font-size: 1.45rem; line-height: 1; padding-block-start: .15rem; }
.how__mark span { padding-block-start: .15em; }
.how__mark--1 { left: 2%; top: 40%; }
.how__mark--2 { left: 66%; top: 41%; }
.how__mark--3 { left: 72%; top: 52%; }
.how__pile { padding: .1rem .9rem 0; border-radius: 999px; background: var(--sk-cream); border: 2px solid var(--sk-ink); color: var(--sk-ink); font-family: var(--font-ui); font-size: 1.2rem; font-weight: 800; line-height: 1.5; white-space: nowrap; }
.how__pile--draw { left: 33.5%; top: 58.5%; }
.how__pile--discard { left: 52.5%; top: 58.5%; }
.how__rail { display: flex; flex-direction: column; justify-content: space-between; gap: 1.5rem; padding: 1.75rem 1.6rem 1.9rem; border-radius: 1.75rem; background: var(--sk-cream); box-shadow: 0 .9rem 2.1rem rgb(15 10 36 / 45%); --ring: var(--sk-violet-dark); }
.steps { position: relative; display: flex; flex-direction: column; justify-content: space-between; flex: 1; gap: 1.5rem; }
.steps::before { content: ""; position: absolute; inset-inline-start: 1.9rem; inset-block: 2rem; inline-size: 4px; border-radius: 4px; background: var(--sk-violet); }
.steps__item { position: relative; display: grid; grid-template-columns: 4rem 1fr; column-gap: .9rem; row-gap: .5rem; align-items: center; }
.steps__no { grid-row: 1; display: grid; place-items: center; inline-size: 3.9rem; block-size: 3.9rem; border: 4px solid var(--sk-ink); border-radius: 50%; background: var(--sk-cream); font-family: var(--font-ui); font-size: 2.2rem; font-weight: 800; line-height: 1; padding-block-start: .25rem; z-index: 1; }
.steps__title { grid-column: 2; justify-self: start; padding: .15rem 1.4rem 0; border-radius: .9rem; background: linear-gradient(#ffdc6a, var(--sk-gold)); font-family: var(--font-ui); font-size: var(--fs-pill); font-weight: 800; line-height: 1.5; }
.steps__row { grid-column: 2; display: flex; align-items: center; gap: 1.1rem; }
.steps__icon { inline-size: 5rem; block-size: 5rem; color: var(--sk-violet-dark); }
.steps__row p { font-family: var(--font-ui); font-size: calc(var(--fs-body) * .92); font-weight: 600; line-height: 1.2; }
.how__rail .button { min-block-size: 4.8rem; font-size: 1.7rem; white-space: nowrap; padding-inline: 1.4rem; }

/* Game modes: three columns, the deck overlaps both panels */
.modes { display: flex; flex-direction: column; justify-content: space-between; gap: 1rem; padding-block: 1rem; }
.modes__title { text-align: center; }
.modes__grid { display: grid; grid-template-columns: 28rem minmax(0, 1fr) 47rem; align-items: center; gap: 0; padding-block-start: 2.2rem; }
.panel { position: relative; z-index: 0; margin: 0; min-inline-size: 0; padding: 4.4rem 1.7rem 1.7rem; border: 0; border-radius: 1.75rem; display: grid; gap: 1.1rem; }
.panel > legend { position: absolute; inset-inline-start: 3rem; inset-block-start: -2rem; float: none; }
.panel > .tag { z-index: 1; }
.panel--cream { background: var(--sk-cream); box-shadow: 0 .9rem 2.1rem rgb(15 10 36 / 45%); }
.panel--felt { background: linear-gradient(rgb(74 53 168 / 95%), rgb(46 37 88 / 95%)); border: 3px solid rgb(168 147 240 / 55%); box-shadow: 0 .9rem 2.1rem rgb(15 10 36 / 45%); }
.choice {
  position: relative; display: grid; grid-template-columns: 4.3rem 1fr; align-items: center; gap: 1.1rem; min-block-size: 8.4rem; padding: 1rem 1.5rem;
  border: 4px solid var(--sk-violet-dark); border-radius: 1.75rem; background: var(--sk-paper); color: var(--sk-ink); cursor: pointer; transition: border-color 160ms ease, background-color 160ms ease, transform 160ms ease;
}
.choice:hover { transform: translateY(-2px); }
.choice input { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; margin: 0; opacity: 0; cursor: pointer; }
.choice__mark { display: grid; place-items: center; inline-size: 4.1rem; block-size: 4.1rem; border: 4px solid var(--sk-ink); border-radius: 50%; background: transparent; color: transparent; }
.choice__mark .icon { inline-size: 2.4rem; block-size: 2.4rem; stroke-width: 3; }
.choice__text { display: grid; line-height: 1.05; }
.choice__text strong { font-family: var(--font-ui); font-size: 2.75rem; font-weight: 800; line-height: 1.1; }
.choice__text small { font-family: var(--font-ui); font-size: 1.75rem; font-weight: 600; line-height: 1.15; }
:lang(ar) .choice__text strong { font-size: 2.4rem; }
:lang(ar) .choice__text small { font-size: 1.55rem; }
.choice:has(input:checked) { background: linear-gradient(#4a35a8, #2e2558); border-color: var(--sk-gold); color: var(--sk-white); box-shadow: 0 0 0 2px rgb(255 201 60 / 35%); }
.choice:has(input:checked) .choice__mark { background: var(--sk-gold); border-color: var(--sk-gold); color: var(--sk-ink); }
.choice:has(input:focus-visible) { outline: 3px solid var(--sk-gold); outline-offset: 3px; }
.panel--felt .choice { background: rgb(34 27 69 / 55%); border-color: rgb(255 255 255 / 55%); color: var(--sk-white); }
.panel--felt .choice__mark { border-color: var(--sk-white); }
.panel--felt .choice--thief { background: linear-gradient(#5b3215, #3b2010); border-color: #e0a23a; min-block-size: 11rem; }
.panel--felt .choice--thief .choice__text small { max-inline-size: 13ch; }
.panel--felt .choice:has(input:checked) { border-color: var(--sk-gold); box-shadow: 0 0 0 3px rgb(255 201 60 / 40%), 0 0 24px rgb(255 201 60 / 25%); }
.modes__deck { position: relative; z-index: 1; align-self: center; margin-inline: -3.2rem; }
.modes__deck img { inline-size: 100%; max-block-size: 36rem; object-fit: contain; filter: drop-shadow(0 18px 24px rgb(15 10 36 / 50%)); }
.modes__foot { display: grid; justify-items: center; gap: .3rem; text-align: center; }
.modes__pick { color: var(--sk-white); font-family: var(--font-ui); font-weight: 600; font-size: 1.45rem; line-height: 1.2; }
.modes__pick b { color: var(--sk-gold); }
.modes__foot .button { min-inline-size: 39rem; min-block-size: 6.4rem; font-size: 2.6rem; }

/* Community */
.community { display: grid; grid-template-columns: minmax(0, 30rem) minmax(0, 1fr) minmax(0, 30rem); grid-template-areas: "left trophy scroll" "actions actions actions"; align-items: stretch; column-gap: 1.5rem; row-gap: .5rem; padding-block: 1.5rem 1rem; }
.community__left { grid-area: left; z-index: 2; display: flex; flex-direction: column; gap: .8rem; min-inline-size: 0; padding-inline-start: 1.6rem; }
.community__left .display { max-inline-size: 10ch; }
.community__left .scene__sub { max-inline-size: 22ch; }
@media (min-width: 1200px) {
  .community__left .display { inline-size: 44rem; max-inline-size: none; }
}
.events { margin-block-start: auto; display: grid; gap: .3rem; min-inline-size: 0; margin-inline-start: -1.6rem; }
.events .tag { justify-self: start; position: relative; z-index: 1; margin-inline-start: 4.2rem; margin-block-end: -1.2rem; }
.events__art { position: relative; inline-size: 30rem; max-inline-size: 100%; }
.events__art img { inline-size: 100%; }
.events__list { position: absolute; inset: 0; margin: 0; }
.events__list li { position: absolute; left: 42%; inline-size: 40%; block-size: 20%; display: flex; align-items: center; color: var(--sk-ink); font-family: var(--font-ui); font-size: 1.55rem; font-weight: 800; line-height: 1; }
.events__list li:first-child { top: 38%; transform: rotate(-5deg); }
.events__list li:last-child { top: 66%; transform: rotate(-3deg); }
.community__trophy { grid-area: trophy; align-self: end; display: flex; justify-content: center; }
.community__trophy img { inline-size: 100%; max-block-size: 40rem; object-fit: contain; filter: drop-shadow(0 18px 24px rgb(15 10 36 / 45%)); }
.league-board { grid-area: scroll; align-self: start; position: relative; inline-size: 100%; aspect-ratio: 1111 / 1415; margin-block-start: .2rem; color: var(--sk-ink); min-inline-size: 0; filter: drop-shadow(0 1rem 1.4rem rgb(15 10 36 / 38%)); }
.league-board > picture { position: absolute; inset: 0; z-index: 0; }
.league-board__art { inline-size: 100%; block-size: 100%; object-fit: contain; }
.league-board__title { position: absolute; z-index: 1; inset-block-start: 18.3%; inset-inline: 17%; block-size: 11%; display: grid; place-items: center; color: var(--sk-white); font-family: var(--font-tag); font-size: 1.8rem; font-weight: 400; line-height: 1; text-align: center; text-transform: uppercase; text-shadow: 0 2px 0 rgb(34 27 69 / 55%); }
:lang(ar) .league-board__title { text-transform: none; }
.ranking { position: absolute; z-index: 1; inset-block-start: 34.5%; inset-inline: 13.8% 8.5%; block-size: 46.7%; display: grid; grid-template-rows: repeat(3, minmax(0, 1fr)); gap: 1.2%; direction: ltr; }
.ranking__row { display: grid; grid-template-columns: 20% 24% minmax(0, 1fr); align-items: center; min-block-size: 0; }
.ranking__medal { display: grid; place-items: center; inline-size: 100%; block-size: 100%; font-family: var(--font-ui); font-size: 1.9rem; font-weight: 800; line-height: 1; padding-block-start: .15rem; }
.ranking__medal b { translate: .16em -.2em; }
.ranking__face { justify-self: center; inline-size: 78%; aspect-ratio: 1; border-radius: 50%; object-fit: cover; }
.ranking__name { min-inline-size: 0; padding: .2rem .7rem 0; font-family: var(--font-ui); font-size: 1.8rem; font-weight: 800; line-height: 1.15; text-align: start; }
:lang(ar) .ranking__name { text-align: left; }
:lang(ar) .events__list li { direction: ltr; text-align: left; }
.community__actions { grid-area: actions; justify-content: center; padding-block-start: .5rem; }

/* ---------- Cream closing phase ---------- */
.custom, .download, .paper { --ring: var(--sk-violet-dark); }
.custom { position: relative; overflow: hidden; background: var(--sk-cream); }
.custom__grid { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 34rem) minmax(0, 1fr); align-items: start; gap: 1.5rem; padding-block: 2.5rem 0; inline-size: 100%; max-inline-size: none; margin: 0; }
.custom__phone { margin-inline-start: -1rem; align-self: end; }
.custom__phone img { inline-size: 34rem; max-inline-size: 100%; margin-inline: auto; filter: drop-shadow(0 18px 24px rgb(34 27 69 / 30%)); }
.custom__body { display: grid; gap: .8rem; min-inline-size: 0; padding-inline-end: 3rem; }
.custom__sub { font-family: var(--font-ui); font-size: var(--fs-body); font-weight: 600; line-height: 1.3; color: var(--sk-violet-dark); }
.collection img { inline-size: 100%; }
.collection__labels { direction: ltr; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .6rem; margin-block-start: -.6rem; }
[dir="rtl"] .collection__labels li { direction: rtl; }
.collection__labels li { justify-self: center; padding: .2rem 1.6rem 0; border-radius: 999px; background: var(--sk-white); border: 2px solid rgb(34 27 69 / 20%); box-shadow: 0 .2rem 0 rgb(34 27 69 / 15%); font-family: var(--font-ui); font-size: 1.6rem; font-weight: 800; line-height: 1.6; text-align: center; }
.custom__foot { display: flex; align-items: flex-end; justify-content: space-between; gap: 1.5rem; margin-block-start: .5rem; }
.custom__note { margin-block-start: .3rem; font-family: var(--font-ui); font-size: 1.75rem; font-weight: 500; line-height: 1.3; color: var(--sk-muted); }
.custom__vault { inline-size: 24rem; margin-block-start: -1.5rem; flex: none; filter: drop-shadow(0 12px 16px rgb(34 27 69 / 30%)); }
.custom__felt { position: absolute; z-index: 0; inset-inline: 0; inset-block-end: 0; block-size: 6rem; overflow: hidden; pointer-events: none; }
.custom__felt::before {
  content: ""; position: absolute; inset-inline-start: -10%; inset-block-start: -8rem; inline-size: 120%; block-size: 14rem; border: 4px solid var(--sk-gold); border-radius: 50%;
  background: radial-gradient(ellipse at 50% 100%, var(--sk-violet-dark), var(--sk-table) 72%); box-shadow: inset 0 -.8rem 2rem rgb(107 79 216 / 28%);
}

.download { background: var(--sk-cream); padding-block: 3.5rem 4rem; }
.download__grid { display: grid; grid-template-columns: minmax(0, 52fr) minmax(0, 48fr); align-items: center; gap: 2rem; }
.download__copy { display: grid; gap: 1.2rem; justify-items: start; padding-inline-start: 1.5rem; }
.download__copy .display { max-inline-size: 11ch; }
.download__sub { font-family: var(--font-ui); font-size: var(--fs-body); font-weight: 600; color: var(--sk-violet-dark); line-height: 1.3; }
.stores { display: flex; flex-wrap: wrap; gap: 1.1rem 1.4rem; margin-block-start: .4rem; }
.store {
  min-block-size: 7.4rem; padding: .45rem 2.2rem .45rem 1.35rem; gap: 1.2rem; text-align: start; justify-content: flex-start; min-inline-size: 22rem; border-radius: 1.55rem;
  box-shadow: inset 0 .16rem 0 rgb(255 255 255 / 45%), 0 .4rem 0 var(--sk-gold-dark);
}
.store.button--ink { box-shadow: inset 0 .16rem 0 rgb(255 255 255 / 22%), 0 .4rem 0 var(--sk-ink); }
.store:active { box-shadow: inset 0 .16rem 0 rgb(255 255 255 / 35%), 0 .15rem 0 var(--sk-gold-dark); }
.store.button--ink:active { box-shadow: inset 0 .16rem 0 rgb(255 255 255 / 22%), 0 .15rem 0 var(--sk-ink); }
.store[aria-disabled="true"] { cursor: default; }
.store[aria-disabled="true"]:active { transform: none; box-shadow: inset 0 .16rem 0 rgb(255 255 255 / 45%), 0 .4rem 0 var(--sk-gold-dark); }
.store.button--ink[aria-disabled="true"]:active { box-shadow: inset 0 .16rem 0 rgb(255 255 255 / 22%), 0 .4rem 0 var(--sk-ink); }
.store__glyph { display: grid; place-items: center; flex: none; inline-size: 4rem; block-size: 4rem; border-radius: 50%; background: rgb(34 27 69 / 14%); }
.button--ink .store__glyph { background: rgb(255 255 255 / 16%); }
.store__glyph .icon { inline-size: 2.5rem; block-size: 2.5rem; }
.store__text { display: grid; gap: .1rem; line-height: 1; padding-block-start: .15rem; }
.store__text small { font-size: 1.35rem; font-weight: 600; line-height: 1.1; opacity: .9; }
.store__text strong { font-size: 2.45rem; font-weight: 800; line-height: 1.05; }
:lang(ar) .store__text strong { font-size: 2.2rem; }
.store--apple .store__glyph { background: rgb(34 27 69 / 12%); }
.store--play .store__glyph { background: rgb(255 255 255 / 14%); }
.download .text-link { font-family: var(--font-ui); font-size: 1.6rem; font-weight: 700; }
.download__art img { inline-size: 100%; }

/* ---------- Readable documents ---------- */
.paper { background: var(--sk-paper); padding-block: clamp(2.5rem, 5vw, 4.5rem); }
.paper--flush { padding-block-start: clamp(1.5rem, 3vw, 2.5rem); }
.paper__wrap, .stack { max-inline-size: 54rem; }
@media (min-width: 1200px) { .paper__wrap, .stack, .page-head .wrap { max-inline-size: max(54rem, 860px); } }
.paper__lead { margin-block-end: 1.25rem; font-family: var(--font-ui); font-size: 1.2rem; font-weight: 600; color: var(--sk-violet-dark); line-height: 1.4; }
.prose { display: grid; gap: 1rem; font-size: max(1rem, 16px); }
.prose p, .prose li { max-inline-size: 70ch; }
.prose ul { display: grid; gap: .6rem; list-style: disc; padding-inline-start: 1.5rem; }
.prose a { color: var(--sk-violet-dark); }
.page-head { background: var(--sk-table); color: var(--sk-white); padding-block: clamp(1.75rem, 4vw, 3.25rem); }
.page-head .display { font-size: clamp(1.6rem, 2.6vw, 2rem); }
.page-head__lead { margin-block-start: .5rem; max-inline-size: 60ch; font-family: var(--font-ui); font-size: max(1.05rem, 16px); font-weight: 500; color: #d8d0f3; line-height: 1.4; }
.page-head--illustrated { position: relative; isolation: isolate; overflow: hidden; padding-block: 0; background: radial-gradient(circle at 76% 35%, rgb(107 79 216 / 55%), transparent 30%), var(--sk-table); }
[dir="rtl"] .page-head--illustrated { background: radial-gradient(circle at 24% 35%, rgb(107 79 216 / 55%), transparent 30%), var(--sk-table); }
.page-head--illustrated::after { content: ""; position: absolute; z-index: -1; inset-inline: -8%; inset-block-end: -8rem; block-size: 10rem; border-radius: 50% 50% 0 0 / 100% 100% 0 0; border-block-start: 3px solid rgb(255 201 60 / 55%); background: rgb(74 53 168 / 35%); }
.page-head__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(18rem, 28rem); align-items: center; gap: 2rem; min-block-size: 17rem; }
.page-head__copy { position: relative; z-index: 1; padding-block: 2rem; }
.page-head__copy .button { margin-block-start: 1.25rem; }
.page-head__visual { align-self: end; display: grid; place-items: end center; min-inline-size: 0; }
.page-head__art { inline-size: min(100%, 28rem); max-block-size: 16rem; object-fit: contain; object-position: center bottom; filter: drop-shadow(0 1rem 1.5rem rgb(15 10 36 / 35%)); }
.page-head--not-found .page-head__grid { grid-template-columns: minmax(18rem, .85fr) minmax(24rem, 1.15fr); min-block-size: 28rem; }
.page-head--not-found .page-head__art { inline-size: min(100%, 34rem); max-block-size: 25rem; }
.page-head--center { text-align: center; padding-block: clamp(3.5rem, 10vw, 7.5rem); }
.page-head--center .wrap { max-inline-size: 40rem; }
.page-head--center .page-head__lead { margin-inline: auto; margin-block-end: 1.5rem; }
.stack { display: grid; gap: 0; }
.doc { padding-block: 1.5rem; border-block-start: 2px solid rgb(34 27 69 / 14%); font-size: max(1rem, 16px); }
.doc:first-child { border-block-start: 0; padding-block-start: 0; }
.doc > p, .doc > ol { margin-block-end: .9rem; max-inline-size: 70ch; }
.doc > :last-child { margin-block-end: 0; }
.faq { display: grid; gap: 1rem; }
.faq dt { font-family: var(--font-ui); font-weight: 800; font-size: 1.2rem; line-height: 1.3; }
.faq dd { max-inline-size: 70ch; }
.defs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem 1.75rem; }
.defs > div { padding-block-start: .9rem; border-block-start: 3px solid var(--sk-violet); }
.defs dt { font-family: var(--font-ui); font-size: 1.3rem; font-weight: 800; line-height: 1.3; }
.defs dd { font-size: max(1rem, 15px); }
.checklist { display: grid; gap: .9rem; max-inline-size: 70ch; font-size: max(1rem, 16px); }
.checklist li { display: grid; grid-template-columns: 2rem 1fr; gap: .75rem; align-items: start; }
.checklist .icon { inline-size: 2rem; block-size: 2rem; padding: .3rem; border-radius: 50%; background: var(--sk-violet-dark); color: var(--sk-white); margin-block-start: .15rem; }
.numbered { counter-reset: n; display: grid; gap: .6rem; }
.numbered li { counter-increment: n; display: grid; grid-template-columns: 2.25rem 1fr; gap: .75rem; align-items: start; }
.numbered li::before { content: counter(n); display: grid; place-items: center; inline-size: 2.25rem; block-size: 2.25rem; border-radius: 50%; background: var(--sk-gold); border: 2px solid var(--sk-ink); font-family: var(--font-ui); font-weight: 800; line-height: 1; padding-block-start: .15rem; }

/* Arabic display lettering follows the playful reference art; Cairo remains the reading face. */
:lang(ar) .display,
:lang(ar) .button,
:lang(ar) .primary-nav ul a,
:lang(ar) .menu-toggle,
:lang(ar) .lang-switch,
:lang(ar) .tag,
:lang(ar) .section-title,
:lang(ar) .steps__title,
:lang(ar) .choice__text strong,
:lang(ar) .ranking__name,
:lang(ar) .store__text strong,
:lang(ar) .site-footer__cols h2 {
  font-family: "Lalezar", "Cairo", sans-serif;
  font-weight: 400;
}
:lang(ar) .display { line-height: 1.3; }
:lang(ar) .button { line-height: 1.25; padding-block: .2rem .45rem; }
:lang(ar) .primary-nav ul a, :lang(ar) .lang-switch { line-height: 1.25; padding-block-start: .15rem; }
:lang(ar) .store__text small { font-family: "Cairo", sans-serif; font-weight: 600; }
:lang(ar) .store__text strong { font-size: 1.8rem; line-height: 1.15; }

/* ---------- Footer ---------- */
.site-footer { background: var(--sk-ink); color: var(--sk-white); padding-block: 2.5rem; min-block-size: 15.6rem; display: flex; align-items: center; }
.site-footer__grid { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 2rem; }
.site-footer__logo { block-size: 6.4rem; inline-size: auto; }
.site-footer__cols { display: grid; grid-template-columns: repeat(3, auto); justify-content: center; gap: 4rem; padding-block: .8rem; padding-inline: 3rem; border-inline: 2px solid rgb(255 255 255 / 40%); }
.site-footer__cols h2 { margin-block-end: .5rem; font-family: var(--font-ui); font-size: 1.4rem; font-weight: 800; line-height: 1.2; color: var(--sk-white); }
.site-footer__cols ul { display: grid; gap: .15rem; }
.site-footer__cols a { display: inline-block; padding-block: .2rem; color: var(--sk-white); font-family: var(--font-ui); font-size: 1.25rem; font-weight: 500; line-height: 1.3; text-decoration: none; transition: color 160ms ease, transform 160ms ease; }
.site-footer__cols a:hover { color: var(--sk-gold); transform: translateX(3px); }
[dir="rtl"] .site-footer__cols a:hover { transform: translateX(-3px); }
.site-footer__end { display: grid; gap: 1rem; justify-items: start; }
.site-footer__end p { font-family: var(--font-ui); font-weight: 600; font-size: 1.2rem; color: var(--sk-white); }
.site-footer .lang-switch { font-size: 1.15rem; padding-inline: 1.6rem; }

/* ---------- Stacked layouts (below 1200px) ---------- */
@media (max-width: 1199px) {
  .scene { min-block-size: 0; }
  .scene::after { display: none; }
  .how__grid, .modes__grid, .custom__grid, .download__grid, .site-footer__grid { grid-template-columns: minmax(0, 1fr); }
  .how__grid, [dir="rtl"] .how__grid { inline-size: min(100% - 2 * var(--gutter), 60rem); margin-inline: auto; padding: 1.75rem 0 2rem; gap: 1.5rem; }
  .how__visual { padding: 0; gap: 1.25rem; }
  .how__head { padding: 0; }
  .how__table { inline-size: 100%; }
  .how__mark { font-size: .72rem; padding: .12rem .5rem .12rem .12rem; border-width: 2px; }
  [dir="rtl"] .how__mark { padding: .12rem .12rem .12rem .5rem; }
  .how__mark b { inline-size: 1.5rem; block-size: 1.5rem; font-size: .8rem; border-width: 2px; }
  .how__pile { display: none; }
  .how__rail { padding: 1.25rem; gap: 1.25rem; border-radius: 1.1rem; }
  .steps { gap: 1.5rem; }
  .steps::before { inset-inline-start: 1.4rem; inset-block: 1.5rem; }
  .steps__item { grid-template-columns: 2.9rem 1fr; column-gap: .75rem; }
  .steps__no { inline-size: 2.9rem; block-size: 2.9rem; font-size: 1.4rem; border-width: 3px; }
  .steps__title { font-size: 1.25rem; padding-inline: 1rem; }
  .steps__icon { inline-size: 3.6rem; block-size: 3.6rem; }
  .steps__row p { font-size: 1.1rem; }
  .how__rail .button { font-size: 1.3rem; min-block-size: 3.6rem; }
  .modes { inline-size: min(100% - 2 * var(--gutter), 60rem); margin-inline: auto; padding-block: 1.75rem 2rem; gap: 1.5rem; }
  .modes__title { text-align: start; }
  .modes__grid { gap: 2rem; padding-block-start: 1rem; }
  .panel { padding: 3.2rem 1rem 1rem; border-radius: 1.1rem; gap: .8rem; }
  .panel > legend { inset-inline-start: 1.25rem; inset-block-start: -1.3rem; }
  .tag { font-size: 1.25rem; }
  .choice { min-block-size: 5.5rem; padding: .7rem 1rem; gap: .8rem; grid-template-columns: 2.9rem 1fr; border-radius: 1.1rem; border-width: 3px; }
  .choice__mark { inline-size: 2.7rem; block-size: 2.7rem; border-width: 3px; }
  .choice__mark .icon { inline-size: 1.6rem; block-size: 1.6rem; }
  .choice__text strong, :lang(ar) .choice__text strong { font-size: 1.6rem; }
  .choice__text small, :lang(ar) .choice__text small { font-size: 1.1rem; }
  .panel--felt .choice--thief { min-block-size: 7rem; }
  .panel--felt .choice--thief .choice__text small { max-inline-size: none; }
  .modes__deck { margin-inline: 0; }
  .modes__deck img { max-block-size: 20rem; margin-inline: auto; }
  .modes__pick { font-size: 1.1rem; }
  .modes__foot .button { inline-size: 100%; min-inline-size: 0; min-block-size: 3.75rem; font-size: 1.4rem; }
  .community { inline-size: min(100% - 2 * var(--gutter), 60rem); margin-inline: auto; grid-template-columns: minmax(0, 1fr); grid-template-areas: none; gap: 1.25rem; padding-block: 1.75rem 2rem; }
  .community__left { display: contents; padding: 0; }
  .community__left, .community__trophy, .league-board, .community__actions { grid-area: auto; }
  .community__left .display { order: 1; inline-size: auto; max-inline-size: none; }
  .community__left .scene__sub { order: 2; max-inline-size: none; }
  .community__trophy { order: 3; align-self: auto; }
  .community__trophy img { max-block-size: 22rem; }
  .league-board { order: 4; inline-size: min(100%, 24rem); margin-block-start: .5rem; margin-inline: auto; }
  .league-board__title { font-size: 1.15rem; }
  .ranking__medal { font-size: 1.2rem; }
  .ranking__name { font-size: 1.15rem; padding-inline: .45rem; }
  .events { order: 5; margin: 0; }
  .events .tag { margin-inline-start: 0; margin-block-end: .5rem; font-size: 1.1rem; }
  .events__art { inline-size: min(100%, 24rem); }
  .events__list li { font-size: .95rem; }
  .community__actions { order: 6; }
  .community__actions .button { inline-size: 100%; }
  .custom__grid { inline-size: min(100% - 2 * var(--gutter), 60rem); margin-inline: auto; gap: 1.25rem; padding-block: 2rem 0; }
  .custom__phone, .custom__body { display: contents; padding: 0; }
  .custom__body > .display { order: 1; }
  .custom__sub { order: 2; font-size: 1.15rem; }
  .custom__phone { order: 3; margin: 0; }
  .custom__phone img { inline-size: min(70%, 18rem); }
  .collection { order: 4; }
  .collection__labels { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .35rem; padding-block-end: .5rem; }
  .collection__labels li { display: flex; align-items: center; justify-content: center; min-inline-size: 0; min-block-size: 2.5rem; padding: .2rem .3rem 0; font-size: clamp(.7rem, 2.5vw, .95rem); line-height: 1.05; }
  .custom__foot { order: 5; flex-direction: column; align-items: stretch; }
  .custom__note { font-size: 1.05rem; }
  .custom__vault { margin: .5rem auto 0; inline-size: min(60%, 14rem); }
  .custom__felt { block-size: 4rem; }
  .custom__felt::before { inset-inline-start: -15%; inset-block-start: -5rem; inline-size: 130%; block-size: 8rem; border-width: 3px; }
  .download { padding-block: 2.5rem 3rem; }
  .download__grid { inline-size: min(100% - 2 * var(--gutter), 60rem); }
  .download__copy { justify-items: stretch; padding: 0; gap: 1rem; }
  .download__copy .display { max-inline-size: none; }
  .store { min-block-size: 4.4rem; padding-inline: 1rem 1.4rem; inline-size: 100%; min-inline-size: 0; }
  .store__glyph { inline-size: 2.4rem; block-size: 2.4rem; }
  .store__text small { font-size: .85rem; }
  .store__text strong, :lang(ar) .store__text strong { font-size: 1.3rem; }
  .stores li { inline-size: 100%; }
  .download .text-link { font-size: 1.05rem; }
  .download__art { order: 2; }
  .defs { grid-template-columns: minmax(0, 1fr); }
  .site-footer { min-block-size: 0; }
  .site-footer__logo { block-size: 4rem; }
  .site-footer__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); padding-inline: 0; padding-block: 1.5rem; border-inline: 0; border-block: 2px solid rgb(255 255 255 / 30%); justify-content: stretch; gap: 1.5rem 1rem; }
  .site-footer__cols h2 { font-size: .95rem; }
  .site-footer__cols a { font-size: .9rem; padding-block: .3rem; }
  .site-footer__end p, .site-footer .lang-switch { font-size: .9rem; }
}

@media (max-width: 767px) {
  .page-head__grid, .page-head--not-found .page-head__grid { grid-template-columns: minmax(0, 1fr); gap: 0; min-block-size: 0; }
  .page-head__copy { padding-block: 1.75rem .5rem; }
  .page-head__visual { justify-items: center; }
  .page-head__art, .page-head--not-found .page-head__art { inline-size: min(88vw, 27rem); max-block-size: 15rem; }
  .page-head--not-found .page-head__copy { text-align: center; }
  .page-head--not-found .page-head__copy .page-head__lead { margin-inline: auto; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .button, .button .icon, .choice, .primary-nav ul a, .lang-switch { transition: none; }
  .button:hover, .button:active, .choice:hover { transform: none; }
  .button:hover .icon--dir { transform: none; }
  [dir="rtl"] .button:hover .icon--dir { transform: scaleX(-1); }
}