/* ==========================================================================
   Doqmah · دقمه — doqmah.com
   Design «أ الغرفة المضيئة» (the lit room).
   One stylesheet for / (ar, rtl) and /en/ (en, ltr).
   Logical properties throughout. Physical sides only where the physical
   world decides: the rocker (lamp on the left, as in the logo), the window
   light, and the game world (mirrored as a whole in RTL).
   Every light change is opacity or transform on static paint.
   States: html.js (script ran) · html.is-on (the دقمه is on) ·
   section.is-lit (a lower section has been reached while the light is on).
   ========================================================================== */

:root {
  /* brand (fixed) */
  --ink: #15130F;
  --paper: #F4F1EA;
  --lamp: #E23D14;            /* Nuqta Red: the lamp, LEDs, large type only */
  --red-text: #C4320C;        /* text-safe red on Paper (4.89:1) */
  --red-deep: #B22C0A;        /* small red text on plaster insets (5.3:1 on #EEE8DF) */

  /* the room */
  --porcelain: #FBF9F5;
  --plaster: #ECE6DC;
  --stone: #D6CFC3;           /* hairlines */
  --graphite: #4A453E;        /* secondary text: 8.4:1 on Paper, 4.9:1 on the dusk tiles */
  --sand: #ECCFAE;
  --haze: #C9D8E0;
  --tint: #F8D5C6;
  --sh: 46 36 24;             /* warm umber shadow */
  --dusk: 64 44 30;           /* evening shade */

  --font: "Readex Pro", system-ui, -apple-system, "Segoe UI", Tahoma, Arial, sans-serif;
  --gutter: clamp(16px, 4vw, 48px);
  --maxw: 1200px;
  --header-h: 72px;
  --stage-m: 10px;
  --stage-r: 30px;
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-snap: cubic-bezier(.3, 1.45, .55, 1);
  --toward-end: to left;      /* gradients that follow reading order (ltr overrides) */
  --from-start: 100%;         /* transform-origin on the inline-start side */
  color-scheme: light;
}
[dir="ltr"] { --toward-end: to right; --from-start: 0%; }

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font);
  font-size: 1.0625rem;
  line-height: 1.75;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
body:lang(en) { line-height: 1.6; }
img, svg { display: block; max-inline-size: 100%; }
a { color: inherit; }
h1, h2, h3, p, ul, ol { margin: 0; }
ul, ol { padding: 0; list-style: none; }
button { font: inherit; color: inherit; }
/* every scroll-into-view (anchor jumps and keyboard focus) stops below the fixed header */
html { scroll-padding-block-start: calc(var(--header-h) + var(--stage-m) + 12px); }

.wrap { inline-size: min(100% - 2 * var(--gutter), var(--maxw)); margin-inline: auto; }
.sr-only {
  position: absolute !important; inline-size: 1px; block-size: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}
.i { inline-size: 1.25em; block-size: 1.25em; flex: none; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
[dir="rtl"] .i--dir { transform: scaleX(-1); }
.nowrap { white-space: nowrap; }
.sprite { position: absolute; inline-size: 0; block-size: 0; overflow: hidden; }
/* stagger steps for the device scenes (no inline styles: the CSP forbids them) */
.s1 { --i: 1; } .s2 { --i: 2; } .s3 { --i: 3; } .s4 { --i: 4; } .s5 { --i: 5; } .s6 { --i: 6; }

:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; border-radius: 8px; }
.site-footer :focus-visible, .tile--night :focus-visible { outline-color: var(--paper); }

.skip {
  position: absolute; inset-inline-start: 12px; inset-block-start: -80px; z-index: 100;
  background: var(--ink); color: var(--paper); padding: 10px 16px; border-radius: 10px;
  text-decoration: none; font-weight: 600;
}
.skip:focus { inset-block-start: 12px; }

/* ---------- Buttons: physical keys ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-block-size: 50px; padding-inline: 24px; border: 0; border-radius: 999px;
  font: 600 1.0625rem/1.2 var(--font); text-decoration: none; cursor: pointer; white-space: nowrap;
  position: relative; isolation: isolate;
  transition: transform .16s var(--ease-out);
}
.btn .i { inline-size: 22px; block-size: 22px; }
.btn:active { transform: translateY(1px) scale(.985); }
.btn--lamp { /* the lamp in shade: white on #C4320C is 5.5:1, on #B22C0A 6.6:1 */
  color: #FFFFFF;
  background: linear-gradient(180deg, #CC3710 0%, var(--red-text) 50%, #B22C0A 100%);
  box-shadow:
    inset 0 1px 0 rgb(255 214 196 / .45),
    inset 0 -2px 0 rgb(70 14 0 / .25),
    0 1px 1px rgb(var(--sh) / .25),
    0 12px 20px -12px rgb(150 38 8 / .75);
}
.btn--lamp::after {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit;
  box-shadow: 0 0 0 5px rgb(226 61 20 / .16), 0 10px 30px -6px rgb(226 61 20 / .55);
  opacity: 0; transition: opacity .25s;
}
.btn--lamp:hover::after, .btn--lamp:focus-visible::after { opacity: 1; }
.btn--key {
  color: var(--ink);
  background: linear-gradient(180deg, #FFFFFF 0%, #F3EFE8 100%);
  box-shadow:
    inset 0 1px 0 #fff,
    0 0 0 1px rgb(var(--sh) / .16),
    0 1px 1px rgb(var(--sh) / .14),
    0 8px 16px -10px rgb(var(--sh) / .45);
}
.btn--key:hover { background: linear-gradient(180deg, #FFFFFF 0%, #F8F5F0 100%); }
.btn--sm { min-block-size: 44px; padding-inline: 18px; font-size: 1rem; }
.btn--sm .i { inline-size: 20px; block-size: 20px; }
.btn--lg { min-block-size: 56px; padding-inline: 30px; }

/* ==========================================================================
   Header
   ========================================================================== */
.site-header {
  position: absolute; inset-block-start: 0; inset-inline: 0; z-index: 50;
  padding-block-start: var(--stage-m);
}
.js .site-header { position: fixed; }
.site-header::before {
  content: ""; position: absolute; inset: 0;
  background: rgb(244 241 234 / .97);
  box-shadow: 0 1px 0 rgb(var(--sh) / .10), 0 10px 24px -18px rgb(var(--sh) / .45);
  opacity: 0; transition: opacity .3s;
}
.site-header.is-solid::before, .site-header.menu-open::before { opacity: 1; }
.header__inner { position: relative; display: flex; align-items: center; gap: 20px; block-size: var(--header-h); }

.brand { flex: none; display: inline-flex; align-items: center; padding: 6px; margin: -6px; border-radius: 10px; }
.brand img { block-size: 40px; inline-size: auto; max-inline-size: none; } /* never squeezed below its minimum size */

.nav { margin-inline-start: auto; display: flex; gap: 4px; }
.nav a { position: relative; padding: 8px 12px; font-size: 1rem; font-weight: 500; text-decoration: none; }
.nav a::after {
  content: ""; position: absolute; inset-inline: 12px; inset-block-end: 4px; block-size: 2px;
  border-radius: 2px; background: currentColor; transform: scaleX(0); transition: transform .25s var(--ease-out);
}
.nav a:hover::after { transform: scaleX(1); }
.header__tools { display: flex; align-items: center; gap: 10px; }
.lang {
  display: inline-flex; align-items: center; justify-content: center; min-block-size: 44px; min-inline-size: 48px;
  padding-inline: 12px; border-radius: 999px; font-weight: 600; font-size: .9375rem; text-decoration: none;
  box-shadow: inset 0 0 0 1.5px rgb(21 19 15 / .6);
}
.lang:hover { background: rgb(255 255 255 / .35); }
.menu-btn {
  display: none; align-items: center; justify-content: center; gap: 8px;
  min-block-size: 44px; min-inline-size: 44px; padding-inline: 14px; border: 0; border-radius: 999px; cursor: pointer;
  background: linear-gradient(180deg, #FFFFFF, #F1EDE6);
  box-shadow: inset 0 1px 0 #fff, 0 0 0 1px rgb(var(--sh) / .18), 0 4px 10px -6px rgb(var(--sh) / .5);
  font-weight: 600; font-size: .9375rem;
}
.menu-btn .i { inline-size: 20px; block-size: 20px; }
.menu-btn .i-close { display: none; }
.menu-btn[aria-expanded="true"] .i-open { display: none; }
.menu-btn[aria-expanded="true"] .i-close { display: block; }

/* the phone menu: a small bento of porcelain keys */
.mnav {
  position: absolute; inset-inline: 0; inset-block-start: 100%;
  background: var(--paper);
  box-shadow: 0 1px 0 rgb(var(--sh) / .1), 0 24px 40px -24px rgb(var(--sh) / .5);
  padding-block: 8px 20px;
}
.js .mnav { opacity: 0; transform: translateY(-8px); transition: opacity .22s, transform .3s var(--ease-out); }
.js .mnav[hidden] { display: none; }
.js .mnav.is-open { opacity: 1; transform: none; }
.mnav__tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.mnav__tiles a {
  display: flex; flex-direction: column; justify-content: space-between; gap: 12px; min-block-size: 92px;
  padding: 14px 16px; border-radius: 18px; text-decoration: none; font-size: 1.1875rem; font-weight: 600; line-height: 1.3;
  background: linear-gradient(176deg, #FFFFFF 0%, #F7F4EE 100%);
  box-shadow: inset 0 1px 0 #fff, 0 0 0 1px rgb(var(--sh) / .10), 0 10px 18px -14px rgb(var(--sh) / .55);
  overflow-wrap: break-word;
}
.mnav__n { display: inline-flex; align-items: center; gap: 8px; font-size: .875rem; font-weight: 500; color: var(--graphite); }
.mnav__n::before { /* a tiny rocker: its lamp half follows the دقمه */
  content: ""; inline-size: 18px; block-size: 9px; border-radius: 2px;
  background: linear-gradient(90deg, #6B2819 0 50%, var(--ink) 50% 100%);
}
.is-on .mnav__n::before { background: linear-gradient(90deg, var(--lamp) 0 50%, var(--ink) 50% 100%); }
.mnav__lang {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin-block-start: 10px; padding: 14px 16px; border-radius: 16px; text-decoration: none; font-weight: 600;
  box-shadow: inset 0 0 0 1.5px rgb(var(--sh) / .22);
}
.mnav__lang .i { opacity: .6; }
.mnav__wa { inline-size: 100%; margin-block-start: 12px; }

@media (max-width: 999px) {
  :root { --header-h: 64px; }
  .nav { display: none; }
  .js .menu-btn { display: inline-flex; }
  .header__tools { margin-inline-start: auto; gap: 8px; }
}
@media (min-width: 1000px) { .mnav { display: none !important; } }
@media (max-width: 599px) {
  :root { --header-h: 60px; --stage-m: 8px; --stage-r: 24px; }
  .brand img { block-size: 34px; }
  .js .lang { display: none; }  /* the language switch lives in the menu on phones */
  .header__wa { padding-inline: 14px; gap: 7px; }
}
@media (max-width: 359px) { /* keep the English lockup at >= 110 px: below 360 px the header key keeps only its icon */
  :lang(en) .header__wa { padding-inline: 0; min-inline-size: 48px; }
  :lang(en) .header__wa span { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}
@media (max-width: 400px) {
  .menu-btn { padding-inline: 0; }
  .menu-btn__txt { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}

/* ==========================================================================
   HERO — a room at dusk. One switch on the wall; the things we build are
   mounted around it and power on, one after another, when the light comes on.
   ========================================================================== */
.hero {
  position: relative; isolation: isolate; overflow: clip;
  margin: var(--stage-m); border-radius: var(--stage-r);
  display: flex; flex-direction: column; justify-content: center;
  min-block-size: 660px;
  min-block-size: clamp(660px, calc(100svh - 2 * var(--stage-m)), 960px);
  padding-block: calc(var(--header-h) + clamp(6px, 1.6vh, 20px)) clamp(26px, 4vh, 44px);
}

/* --- the room: static paint; the switch only fades and moves the layers --- */
.room { position: absolute; inset: 0; z-index: -1; pointer-events: none; overflow: clip; border-radius: inherit; }
.room > * { position: absolute; inset: 0; }
.room__dusk { /* evening: warm rose-taupe plaster, lit only by what is left of the day */
  background:
    radial-gradient(56% 48% at 50% 58%, rgb(196 168 146 / .55) 0%, rgb(196 168 146 / 0) 100%),
    radial-gradient(130% 115% at 50% 44%, rgb(38 24 14 / 0) 58%, rgb(38 24 14 / .30) 100%),
    linear-gradient(180deg, #AA9281 0%, #A38B7A 52%, #9C8473 100%);
}
.room__window { /* the last warm light of the day, cast through a window (physical: from the left) */
  inset: auto; top: -6%; left: 1%; width: 36%; height: 96%;
  display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1.2fr; gap: 12px 14px;
  transform: skewX(-18deg); transform-origin: 0 0;
  filter: blur(5px);
  -webkit-mask-image: linear-gradient(180deg, #000 34%, transparent 100%);
          mask-image: linear-gradient(180deg, #000 34%, transparent 100%);
  transition: opacity .35s ease-in;
}
.room__window span { border-radius: 3px; background: linear-gradient(180deg, rgb(255 206 160 / .42), rgb(255 206 160 / .16)); }
.room__lit { /* the light on: warm off-white, brightest under the ceiling */
  background:
    radial-gradient(64% 56% at 50% 0%, #FFFDF9 0%, rgb(255 253 249 / 0) 100%),
    radial-gradient(115% 100% at 50% 22%, #FAF6EF 0%, #F3EEE6 40%, #EAE3D8 74%, #E1D9CC 100%);
  opacity: 0;
  transition: opacity .3s ease-in;
}
.room__ceiling { /* the downlight's scallop over the headline */
  inset: 0 auto auto 50%; inline-size: min(1100px, 94%); block-size: 60%; translate: -50% 0;
  background:
    radial-gradient(50% 44% at 50% 0%, rgb(255 252 244 / 1) 0%, rgb(255 252 244 / 0) 100%),
    linear-gradient(180deg, rgb(255 246 228 / .9) 0%, rgb(255 244 224 / .45) 50%, rgb(255 244 224 / 0) 100%);
  -webkit-mask-image: radial-gradient(50% 100% at 50% 100%, #000 70%, transparent 100%);
          mask-image: radial-gradient(50% 100% at 50% 100%, #000 70%, transparent 100%);
  transform-origin: 50% 0; transform: scale(.3, .2);
  opacity: 0;
  transition: opacity .3s ease-in, transform 0s linear .3s;
}
.room__grain {
  opacity: .06; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}
.is-on .room__lit { opacity: 1; transition: opacity 1s cubic-bezier(.25, .7, .2, 1) .1s; }
.is-on .room__ceiling { opacity: 1; transform: none; transition: opacity .5s ease-out .15s, transform 1.5s var(--ease-out) .15s; }
.is-on .room__window { opacity: 0; transition-duration: .6s; }

.hero__inner { position: relative; }
.hero__head { text-align: center; }
.eyebrow {
  display: inline-flex; align-items: center; gap: 14px;
  font-size: .9375rem; font-weight: 500; line-height: 1.5;
}
.eyebrow::before, .eyebrow::after { content: ""; inline-size: 28px; block-size: 1px; background: currentColor; opacity: .55; }
:lang(en) .eyebrow { letter-spacing: .02em; }

.title { position: relative; margin-block-start: clamp(0px, .6vh, 8px); }
.title h1, .title__twin {
  font-size: clamp(52px, 7.3vw, 112px); font-weight: 600; line-height: 1.16; letter-spacing: 0;
  text-wrap: balance;
}
:lang(en) .title h1, :lang(en) .title__twin { font-size: clamp(40px, 6.4vw, 96px); line-height: 1.04; letter-spacing: -.03em; }
.title h1 { position: relative; }
.title__twin { /* the headline's cast shadow: it only exists once the light is on */
  position: absolute; inset: 0; color: transparent; user-select: none; pointer-events: none;
  text-shadow: 0 .045em .03em rgb(var(--sh) / .24), 0 .14em .14em rgb(var(--sh) / .08);
  opacity: 0; transition: opacity .25s;
}
.is-on .title__twin { opacity: 1; transition: opacity .8s ease-out .3s; }
.lit { position: relative; display: inline-block; z-index: 0; }
.title h1 .lit::before { /* a warm highlight under «فكرتك» once it is on */
  content: ""; position: absolute; z-index: -1; inset-inline: -.05em; inset-block-end: .16em; block-size: .26em;
  border-radius: .06em; background: var(--tint);
  transform: scaleX(0); transform-origin: 100% 50%; transition: transform .2s ease;
}
:lang(en) .title h1 .lit::before { transform-origin: 0 50%; inset-block-end: .08em; }
.is-on .title h1 .lit::before { transform: none; transition: transform .7s var(--ease-out) .45s; }

/* --- the wall: switch in the middle, objects around it --- */
.wall {
  --row: clamp(226px, calc((100svh - 404px) / 2), 280px);
  display: grid; margin-block-start: clamp(16px, 2.8vh, 34px);
  grid-template-columns: minmax(0, 290fr) minmax(0, 410fr) minmax(0, 450fr);
  grid-template-rows: repeat(2, minmax(var(--row), auto));
  grid-template-areas: "app sw web" "app act game";
  gap: 22px 26px;
}
.switch { grid-area: sw; }
.obj--app { grid-area: app; }
.obj--web { grid-area: web; }
.obj--game { grid-area: game; }
.hero__act { grid-area: act; }

/* ---------- The دقمه: a square wall plate with a rectangular, matte rocker ---------- */
.switch {
  --p: clamp(170px, 14.4vw, 212px);
  display: grid; justify-items: center; align-content: center; align-items: center; gap: 14px; text-align: center;
  align-self: end;
}
.plate {
  position: relative; inline-size: var(--p); block-size: var(--p); flex: none;
  border-radius: calc(var(--p) * .085);
  display: grid; place-items: center;
}
.plate > span { position: absolute; inset: 0; border-radius: inherit; pointer-events: none; }

/* the light, spreading from the switch across the wall */
.plate > .switch__pool {
  z-index: -1; inset: 50% auto auto 50%; inline-size: 620px; block-size: 620px; margin: -310px 0 0 -310px;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgb(255 251 243 / .96) 0%, rgb(255 248 236 / .72) 34%, rgb(255 246 230 / .26) 66%, rgb(255 246 230 / 0) 100%);
  transform: scale(.08); opacity: 0;
  transition: opacity .28s ease-in, transform 0s linear .3s;
}
.is-on .plate > .switch__pool { opacity: .85; transform: scale(3.3); transition: opacity .3s ease-out, transform 1.5s var(--ease-out); }

.plate__soft { /* light off: a diffuse, shapeless shadow */
  box-shadow: 0 16px 38px -6px rgb(var(--dusk) / .5), 0 3px 10px rgb(var(--dusk) / .22);
  transition: opacity .3s;
}
.plate__crisp { /* light on, from above: short, sharp, directional */
  box-shadow: 0 1px 1px rgb(var(--sh) / .22), 0 4px 5px -2px rgb(var(--sh) / .18), 0 18px 20px -10px rgb(var(--sh) / .3), 0 44px 46px -26px rgb(var(--sh) / .36);
  opacity: 0; transition: opacity .3s;
}
.is-on .plate__soft { opacity: 0; transition: opacity .7s ease-out .1s; }
.is-on .plate__crisp { opacity: 1; transition: opacity .7s ease-out .18s; }
.plate__edge { transform: translateY(calc(var(--p) * .02)); background: linear-gradient(180deg, #CDC4B6, #A69C8D); }
.plate__face { /* matte porcelain with a soft bevel */
  background: linear-gradient(172deg, #FFFFFF 0%, #FAF7F1 46%, #EFEAE1 100%);
  box-shadow:
    inset 0 1.5px 0 #fff,
    inset 0 -2px 2px rgb(var(--sh) / .10),
    inset 0 0 0 1px rgb(var(--sh) / .06),
    inset 0 0 0 calc(var(--p) * .03) rgb(255 255 255 / .35);
}
.plate > .plate__screw { /* two screw covers: it reads as a switch on a wall */
  inset: calc(var(--p) * .075) auto auto 50%; inline-size: calc(var(--p) * .052); block-size: calc(var(--p) * .052);
  translate: -50% 0; border-radius: 50%;
  background: radial-gradient(circle at 38% 32%, #FFFFFF 0%, #EEE9E0 55%, #D8D0C4 100%);
  box-shadow: inset 0 0 0 1px rgb(var(--sh) / .16), 0 1px 0 #fff;
}
.plate > .plate__screw::after { content: ""; position: absolute; inset: 44% 18%; border-radius: 1px; background: rgb(var(--sh) / .28); }
.plate > .plate__screw--b { inset-block: auto calc(var(--p) * .075); }
.plate > .plate__well { /* the rectangular recess the rocker sits in */
  inset: 0; margin: auto; inline-size: 64%; block-size: 42%;
  border-radius: calc(var(--p) * .04);
  background: linear-gradient(180deg, #D9D2C7 0%, #E8E3DA 100%);
  box-shadow: inset 0 2px 5px rgb(var(--sh) / .34), inset 0 -1px 0 rgb(255 255 255 / .9), inset 0 0 0 1px rgb(var(--sh) / .07), 0 1px 0 rgb(255 255 255 / .95);
}
.plate__spill { /* the lamp's light caught by the recess (the lamp is on the left) */
  position: absolute; inset: 0; border-radius: inherit;
  background: radial-gradient(40% 85% at 27% 50%, rgb(255 110 60 / .45) 0%, rgb(255 110 60 / 0) 100%);
  opacity: 0; transition: opacity .25s;
}
.plate > .plate__dusk { inset: 0 0 calc(var(--p) * -.02); background: rgb(var(--dusk) / .26); transition: opacity .6s ease-out .05s; }
.is-on .plate__dusk { opacity: 0; }
.is-on .plate__spill { opacity: 1; transition: opacity .3s ease-out; }
.plate__soft, .plate__crisp { z-index: 0; } .plate__edge { z-index: 1; } .plate__face { z-index: 2; }
.plate > .plate__screw, .plate > .plate__well { z-index: 3; } .plate > .plate__dusk { z-index: 4; }

/* the button is the whole recess (never smaller than 64 px), the visible rocker sits inside it */
.rocker {
  position: relative; z-index: 5; direction: ltr; /* a physical object: the lamp is on the left, as in the logo */
  display: grid; place-items: center;
  inline-size: max(64px, calc(var(--p) * .64)); block-size: max(64px, calc(var(--p) * .42));
  padding: 0; border: 0; border-radius: calc(var(--p) * .04); background: none; cursor: pointer;
  -webkit-tap-highlight-color: transparent; touch-action: manipulation;
}
.rocker:focus-visible { outline: 3px solid var(--ink); outline-offset: calc(var(--p) * .035); border-radius: calc(var(--p) * .06); }
.rocker:disabled { cursor: default; }  /* shipped disabled; script.js enables it, so it is never a dead control */
.rocker__cap {
  position: relative; display: block;
  inline-size: calc(var(--p) * .58); block-size: calc(var(--p) * .36); border-radius: calc(var(--p) * .026);
}
.rocker__bloom { /* the lamp lights the plate around it */
  position: absolute; inset-block: 8%; left: 4%; width: 44%; border-radius: 30%;
  box-shadow: 0 0 calc(var(--p) * .2) calc(var(--p) * .05) rgb(226 61 20 / .5);
  opacity: 0; transition: opacity .2s;
}
.is-on .rocker__bloom { opacity: 1; transition: opacity .45s ease-out; }
.rocker__body {
  position: relative; display: flex; inline-size: 100%; block-size: 100%;
  border-radius: inherit; overflow: hidden;
  transform: perspective(420px) rotateY(10deg);   /* off: the lamp half stands proud, ready to press */
  transition: transform .3s var(--ease-snap);
  box-shadow: 0 1px 1px rgb(var(--sh) / .45), 0 4px 7px rgb(var(--sh) / .3);
}
.is-on .rocker__body { transform: perspective(420px) rotateY(-10deg); }
.rocker:enabled:active .rocker__body { transform: perspective(420px) rotateY(10deg) scale(.97); }
.is-on .rocker:enabled:active .rocker__body { transform: perspective(420px) rotateY(-10deg) scale(.97); }
.rocker__lamp, .rocker__ink { position: relative; flex: 1; }
.rocker__lamp { /* frosted red lens, unlit: matte oxblood */
  background: linear-gradient(180deg, #6B2819 0%, #561E11 100%);
}
.rocker__lamp::before { /* the small locator glow that helps you find a switch in the dark */
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(38% 46% at 52% 50%, rgb(255 116 70 / .8) 0%, rgb(255 116 70 / 0) 100%);
  opacity: .5; transition: opacity .2s;
}
.rocker__glow { /* the lens, lit */
  position: absolute; inset: 0;
  background: radial-gradient(85% 105% at 50% 46%, #FF9A6E 0%, #F7632F 30%, var(--lamp) 62%, #C9350D 100%);
  box-shadow: inset 0 0 12px rgb(255 206 170 / .5);
  opacity: 0; transition: opacity .14s ease-in;
}
.is-on .rocker__glow { opacity: 1; transition: opacity .16s ease-out; }
.is-on .rocker__lamp::before { opacity: 0; }
.rocker__ink { background: linear-gradient(180deg, #2C2824 0%, #1B1815 100%); }
.rocker__tilt { position: absolute; inset: 0; pointer-events: none; transition: opacity .3s ease-out; }
.rocker__tilt--off { /* lamp half raised toward you, ink half pressed in */
  background: linear-gradient(90deg, rgb(255 255 255 / .12) 0%, rgb(255 255 255 / .02) 44%, rgb(0 0 0 / 0) 49.6%, rgb(0 0 0 / .34) 50.4%, rgb(0 0 0 / .1) 100%);
}
.rocker__tilt--on { /* lamp half pressed in, ink half raised */
  background: linear-gradient(90deg, rgb(0 0 0 / .06) 0%, rgb(0 0 0 / .16) 49.6%, rgb(255 255 255 / .14) 50.4%, rgb(255 255 255 / .03) 80%, rgb(255 255 255 / 0) 100%);
  opacity: 0;
}
.is-on .rocker__tilt--off { opacity: 0; }
.is-on .rocker__tilt--on { opacity: 1; }
.rocker__body::after { /* matte bevel and the pivot seam: no gloss, no capsule */
  content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit;
  background: linear-gradient(90deg, transparent calc(50% - 1px), rgb(0 0 0 / .5) calc(50% - 1px), rgb(0 0 0 / .5) 50%, rgb(255 255 255 / .1) 50%, rgb(255 255 255 / .1) calc(50% + 1px), transparent calc(50% + 1px));
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .16), inset 0 -2px 0 rgb(0 0 0 / .22), inset 0 0 0 1px rgb(0 0 0 / .2);
}
@keyframes locator { 0%, 100% { opacity: .5; } 50% { opacity: 1; } }
@media (prefers-reduced-motion: no-preference) {
  html.js:not(.is-on) .rocker__lamp::before { animation: locator 2.2s ease-in-out 1.1s 2; }
}

.switch__text { display: grid; gap: 2px; align-content: center; }
/* both labels share one cell, so the swap never moves anything */
.switch__hint { display: grid; font-weight: 600; font-size: 1.0625rem; line-height: 1.45; }
.switch__hint > span { grid-area: 1 / 1; }
.switch__hint .on-txt { visibility: hidden; }
.is-on .switch__hint .off-txt { visibility: hidden; }
.is-on .switch__hint .on-txt { visibility: visible; }
html:not(.js) .switch__hint { display: none; }  /* no script: no "press me" cue */
.switch__note { font-size: .9375rem; line-height: 1.55; }

/* ---------- Objects mounted on the wall (the bento) ---------- */
.obj {
  --d: .3s;
  position: relative; display: flex; flex-direction: column; min-inline-size: 0;
  padding: 18px 20px 20px; border-radius: 24px;
  background: linear-gradient(170deg, #D4C7BA 0%, #C8BAAC 100%);   /* porcelain in evening shade */
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / .32),
    0 0 0 1px rgb(var(--dusk) / .08),
    0 3px 8px rgb(var(--dusk) / .18),
    0 16px 36px -14px rgb(var(--dusk) / .5);
}
.obj--app { --d: .28s; }
.obj--web { --d: .46s; }
.obj--game { --d: .64s; }
.obj::before { /* the same porcelain, lit */
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: linear-gradient(172deg, #FFFFFF 0%, #FBF9F5 52%, #F2EEE7 100%);
  box-shadow: inset 0 1.5px 0 #fff, inset 0 0 0 1px rgb(var(--sh) / .05);
  opacity: 0; transition: opacity .25s;
}
.obj::after { /* crisp shadow from the ceiling light */
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none;
  box-shadow: 0 2px 2px rgb(var(--sh) / .14), 0 18px 26px -16px rgb(var(--sh) / .42), 0 44px 50px -34px rgb(var(--sh) / .36);
  opacity: 0; transition: opacity .25s;
}
.is-on .obj::before { opacity: 1; transition: opacity .6s ease var(--d); }
.is-on .obj::after { opacity: 1; transition: opacity .8s ease var(--d); }
.obj__head, .dev, .game { position: relative; }
.obj__light { /* a picture light's scallop on the wall above the object */
  position: absolute; z-index: -1; inset-inline: 6%; inset-block-start: -64px; block-size: 72%;
  background:
    radial-gradient(46% 42% at 50% 12%, rgb(255 250 238 / 1) 0%, rgb(255 250 238 / 0) 100%),
    radial-gradient(50% 100% at 50% 0%, rgb(255 244 222 / .9) 0%, rgb(255 244 222 / 0) 100%);
  opacity: 0; transition: opacity .25s; pointer-events: none;
}
.is-on .obj__light { opacity: 1; transition: opacity .7s ease var(--d); }
.obj__head::before { /* the picture light fixture, just above the object */
  content: ""; position: absolute; inset-block-start: -31px; inset-inline: 0; margin-inline: auto;
  inline-size: 64px; block-size: 7px; border-radius: 4px 4px 6px 6px;
  background: linear-gradient(180deg, #9A8466 0%, #6E5A42 55%, #4E3F2F 100%);
  box-shadow: 0 1px 0 rgb(255 255 255 / .18), 0 3px 5px -1px rgb(var(--dusk) / .45);
}
.obj__head::after { /* its lamp strip */
  content: ""; position: absolute; inset-block-start: -24px; inset-inline: 0; margin-inline: auto;
  inline-size: 52px; block-size: 2px; border-radius: 2px;
  background: #FFF4DC; box-shadow: 0 2px 10px 3px rgb(255 238 204 / .9);
  opacity: 0; transition: opacity .2s;
}
.is-on .obj__head::after { opacity: 1; transition: opacity .3s ease var(--d); }
.obj__ring { /* one pass of light as the power reaches the object */
  position: absolute; inset: 0; z-index: 3; border-radius: inherit; pointer-events: none;
  box-shadow: inset 0 0 0 2px rgb(226 61 20 / .55), inset 0 0 26px rgb(226 61 20 / .14);
  opacity: 0;
}
@keyframes power { 0% { opacity: 0; } 25% { opacity: 1; } 100% { opacity: 0; } }
.powering .obj__ring { animation: power 1.2s ease var(--d) 1; }

.obj__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.obj__title { font-size: 1.25rem; font-weight: 600; line-height: 1.35; }
.obj__title a { text-decoration: none; }
.obj__title a:hover { text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 2px; }
.obj__sub { margin-block-start: 2px; font-size: .9375rem; line-height: 1.5; color: var(--graphite); }
.obj__try { color: var(--ink); font-weight: 600; }
html:not(.js) .obj__try { display: none; }

.led { /* a tiny rocker indicator: lamp half lights when the object has power */
  position: relative; flex: none; inline-size: 26px; block-size: 12px; margin-block-start: 7px; border-radius: 3px; direction: ltr;
  background: linear-gradient(90deg, #8E7B6D 0 50%, var(--ink) 50% 100%);
  box-shadow: inset 0 1px 1px rgb(0 0 0 / .3);
}
.led::before, .led::after { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 50%; border-radius: 3px 0 0 3px; opacity: 0; transition: opacity .2s; }
.led::before { background: var(--lamp); }
.led::after { box-shadow: 0 0 10px 3px rgb(226 61 20 / .55); }
.is-on .led::before, .is-on .led::after { opacity: 1; transition: opacity .35s ease var(--d); }

/* ---------- devices: screens asleep in the evening, awake with the light ---------- */
.dev__screen { position: relative; block-size: 100%; overflow: hidden; background: #15120F; }
.dev__screen::after { /* glass: a static reflection over both states */
  content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: linear-gradient(118deg, rgb(255 255 255 / .09) 0%, rgb(255 255 255 / .03) 36%, rgb(255 255 255 / 0) 36.4%);
}
.scr { position: absolute; inset: 0; }
.scr--on { opacity: 0; transform: scale(1.03); transition: opacity .22s ease, transform 0s linear .25s; }
.is-on .scr--on { opacity: 1; transform: none; transition: opacity .5s ease var(--d), transform 1s var(--ease-out) var(--d); }
.u { opacity: 0; transform: translateY(.7em); transition: opacity .2s; }
.is-on .u {
  opacity: 1; transform: none;
  transition: opacity .45s ease calc(var(--d) + .14s + var(--i, 0) * 70ms), transform .7s var(--ease-out) calc(var(--d) + .14s + var(--i, 0) * 70ms);
}
.bar { display: block; block-size: .9em; border-radius: .45em; background: #2A2722; }
.bar.thin { block-size: .65em; }
.bar.thick { block-size: 1.35em; border-radius: .6em; }
.bar.big { block-size: 1.45em; border-radius: .6em; }
.bar.soft { background: #C4BFB5; }
.bar.lite { background: rgb(255 255 255 / .8); }
.bar.lite.thick { background: #FFFFFF; }
.bar.red { background: var(--lamp); }
.w20 { inline-size: 20%; } .w35 { inline-size: 35%; } .w40 { inline-size: 40%; } .w45 { inline-size: 45%; }
.w60 { inline-size: 60%; } .w70 { inline-size: 70%; } .w80 { inline-size: 80%; } .w90 { inline-size: 90%; }

/* phone (apps) */
.dev--phone {
  font-size: var(--ph, clamp(8.4px, calc((var(--row) * 2 - 82px) / 39), 11px));
  inline-size: 19em; block-size: 39em; margin: auto; flex: none; padding: .65em;
  border-radius: 3.2em;
  background: linear-gradient(150deg, #48423B 0%, #1F1C18 34%, #15130F 100%);
  box-shadow: inset 0 0 0 .14em #5A544C, 0 .25em .35em rgb(0 0 0 / .22), 0 2.4em 3em -1.4em rgb(var(--dusk) / .6);
}
.dev--phone .dev__screen { border-radius: 2.6em; }
.dev--phone .scr--off {
  display: flex; flex-direction: column; align-items: center; gap: .9em; padding: 6.4em 1.5em 1.6em;
  background: radial-gradient(90% 55% at 30% 6%, #3B3028 0%, rgb(59 48 40 / 0) 72%), linear-gradient(180deg, #1F1A16, #13110E);
}
.lock__time { font-size: 5em; font-weight: 300; line-height: 1; color: rgb(244 241 234 / .6); }
.lock__date { inline-size: 8em; block-size: .75em; border-radius: .4em; background: rgb(244 241 234 / .2); }
.lock__note { margin-block-start: auto; display: flex; align-items: center; gap: .8em; inline-size: 100%; padding: 1em; border-radius: 1.4em; background: rgb(244 241 234 / .08); }
.lock__note i { inline-size: 2.4em; block-size: 2.4em; border-radius: .7em; background: rgb(226 61 20 / .62); }
.lock__note b { flex: 1; block-size: .75em; border-radius: .4em; background: rgb(244 241 234 / .18); }
.dev--phone .scr--on {
  display: flex; flex-direction: column; gap: 1.2em; padding: 1em 1.4em;
  background: #FBFAF7;
}
.ph-bar { direction: ltr; display: flex; justify-content: space-between; align-items: center; block-size: 2.4em; }
.ph-time { font-size: 1.15em; font-weight: 600; line-height: 1; inline-size: 3em; }
.ph-island { inline-size: 7em; block-size: 2.1em; border-radius: 1.1em; background: var(--ink); }
.ph-batt { position: relative; inline-size: 2.5em; block-size: 1.2em; border-radius: .4em; border: .15em solid var(--ink); margin-inline-start: .6em; }
.ph-hello { display: flex; align-items: center; gap: 1em; }
.lines { flex: 1; display: flex; flex-direction: column; gap: .6em; min-inline-size: 0; }
.av { inline-size: 3.4em; block-size: 3.4em; border-radius: 50%; flex: none; background: var(--sand); }
.bell { inline-size: 3em; block-size: 3em; border-radius: 50%; flex: none; background: #E7E3DB; }
.ph-card {
  block-size: 11.5em; flex: none; border-radius: 1.8em; padding: 1.5em;
  display: flex; flex-direction: column; justify-content: flex-end; gap: .8em;
  background: radial-gradient(90% 80% at 20% 0%, #F2582A 0%, var(--lamp) 60%, #CF370F 100%);
}
.ph-prog { display: block; block-size: .8em; margin-block-start: .5em; border-radius: .4em; background: rgb(255 255 255 / .3); }
.ph-prog i { display: block; inline-size: 62%; block-size: 100%; border-radius: inherit; background: #FFFFFF; }
.ph-sec { display: flex; justify-content: space-between; align-items: center; }
.ph-row { display: flex; align-items: center; gap: 1em; }
.ico { inline-size: 3.6em; block-size: 3.6em; border-radius: 1.1em; flex: none; }
.ico.haze { background: var(--haze); } .ico.sand { background: var(--sand); } .ico.tint { background: var(--tint); }
.tag { inline-size: 4.2em; block-size: 2em; border-radius: 1em; flex: none; background: #ECE8E1; }
.tag.tint { background: var(--tint); }

/* screen (websites) */
.dev--screen {
  font-size: var(--br, 7.4px);
  flex: 1; min-block-size: 0; margin-block-start: 14px; padding: .8em;
  border-radius: 1.5em;
  background: linear-gradient(150deg, #423C36 0%, #1D1A16 36%, #15130F 100%);
  box-shadow: inset 0 0 0 .12em #57514A, 0 .2em .3em rgb(0 0 0 / .2), 0 2em 2.6em -1.4em rgb(var(--dusk) / .55);
}
.dev--screen .dev__screen { border-radius: .8em; }
.dev--screen .scr--off { background: radial-gradient(70% 90% at 25% 0%, #33291F 0%, rgb(51 41 31 / 0) 70%), linear-gradient(180deg, #1D1814, #12100D); }
.sleep { /* standby light */
  position: absolute; inset-block-end: 1em; inset-inline-start: 50%; inline-size: .8em; block-size: .8em; margin-inline-start: -.4em;
  border-radius: 50%; background: #E0A15E; box-shadow: 0 0 .8em .2em rgb(224 161 94 / .55); opacity: .75;
}
.dev--screen .scr--on { display: flex; flex-direction: column; background: #FFFFFF; }
.br-top { direction: ltr; display: flex; align-items: center; gap: 1.2em; padding: .85em 1.2em; background: #F4F1EC; border-block-end: 1px solid #E4DFD6; }
.br-dots { display: flex; gap: .55em; }
.br-dots i { inline-size: 1em; block-size: 1em; border-radius: 50%; background: #D6CFC3; }
.br-dots i:first-child { background: var(--lamp); }
.br-url {
  position: relative; flex: 1; block-size: 2.5em; border-radius: 1.25em; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  background: #FFFFFF; color: #5C564C; font-size: 1.15em; font-weight: 500; line-height: 1;
}
.br-load {
  position: absolute; left: 0; bottom: 0; width: 100%; height: 2px; background: var(--lamp);
  transform: scaleX(0); transform-origin: left center;
}
.is-on .br-load { transform: scaleX(1); opacity: 0; transition: transform .8s var(--ease-out) var(--d), opacity .3s ease calc(var(--d) + .85s); }
.br-page { padding: 1.4em 1.8em; display: flex; flex-direction: column; gap: 1.6em; }
.br-nav { display: flex; align-items: center; gap: 1.4em; }
.br-logo { inline-size: 2.4em; block-size: 2.4em; border-radius: .7em; flex: none; background: var(--ink); }
.br-links { display: flex; gap: 1.1em; flex: 1; }
.br-links .bar { inline-size: 4em; background: #D3CCC0; }
.br-btn { inline-size: 7em; block-size: 2.5em; border-radius: 1.25em; flex: none; background: var(--lamp); }
.br-hero { display: grid; grid-template-columns: 1.1fr 1fr; gap: 2em; align-items: center; }
.br-copy { display: flex; flex-direction: column; gap: .8em; }
.br-cta { display: block; inline-size: 9em; block-size: 3em; border-radius: 1.5em; margin-block-start: .6em; background: var(--ink); }
.br-art { position: relative; block-size: 13em; border-radius: 1.3em; overflow: hidden; background: linear-gradient(180deg, #F6D9C6 0%, #FBEFE6 70%); }
.br-sun { position: absolute; inline-size: 4.4em; block-size: 4.4em; inset-block-start: 2.4em; inset-inline-start: 38%; border-radius: 50%; background: var(--lamp); transform: translateY(2.4em); transition: transform .2s; }
.is-on .br-sun { transform: none; transition: transform 1.1s var(--ease-out) calc(var(--d) + .4s); }
.br-dune { position: absolute; inline-size: 20em; block-size: 8em; inset-block-end: -4em; border-radius: 50%; background: var(--sand); }
.br-dune.d1 { inset-inline-start: -5em; }
.br-dune.d2 { inset-inline-end: -8em; inset-block-end: -5em; background: #DDB48A; }
.br-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.1em; }
.br-tile { position: relative; block-size: 8em; border-radius: 1.2em; background: #EFEBE4; }
.br-tile.haze { background: var(--haze); } .br-tile.sand { background: var(--sand); }
.br-chart { position: absolute; inset: 1.3em 1.4em; display: flex; align-items: flex-end; gap: .55em; }
.br-chart i { flex: 1; block-size: var(--h); border-radius: .3em; background: #C9C2B6; transform-origin: 50% 100%; transform: scaleY(.4); transition: transform .2s; }
.br-chart i:nth-child(1) { --h: 40%; } .br-chart i:nth-child(2) { --h: 65%; } .br-chart i:nth-child(3) { --h: 50%; }
.br-chart i:nth-child(4) { --h: 85%; } .br-chart i:nth-child(5) { --h: 70%; }
.br-chart i:last-child { background: var(--ink); }
.is-on .br-chart i { transform: none; transition: transform .7s var(--ease-out) calc(var(--d) + .55s); }

/* game (games): night in the evening, a warm day with the light on; playable in both */
.game { flex: 1; min-block-size: 110px; margin-block-start: 14px; }
.gm-screen {
  position: absolute; inset: 0; inline-size: 100%; display: block; padding: 0; border: 0;
  border-radius: 16px; overflow: hidden; cursor: pointer; isolation: isolate; color: var(--paper);
  background: linear-gradient(180deg, #221C17 0%, #30271F 100%);
  box-shadow: inset 0 0 0 1px rgb(0 0 0 / .35), inset 0 8px 16px rgb(0 0 0 / .3), 0 0 0 5px #231F1B, 0 0 0 6px #4A443D, 0 16px 26px -16px rgb(var(--dusk) / .6);
  -webkit-tap-highlight-color: transparent; touch-action: manipulation;
}
.gm-screen:focus-visible { outline: 3px solid var(--ink); outline-offset: 8px; border-radius: 16px; }
.gm-screen:disabled { cursor: default; }  /* shipped disabled; script.js enables it */
.gm-day { position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, #F5C9A0 0%, #F9E2CB 55%, #FBEBDC 100%); opacity: 0; transition: opacity .25s; }
.gm-sun { position: absolute; inline-size: 30px; block-size: 30px; inset-block-start: 16%; inset-inline-start: 22%; border-radius: 50%; background: var(--lamp); box-shadow: 0 0 22px rgb(226 61 20 / .45); transform: translateY(22px); transition: transform .2s; }
.is-on .gm-day { opacity: 1; transition: opacity .7s ease var(--d); }
.is-on .gm-sun { transform: none; transition: transform 1.1s var(--ease-out) calc(var(--d) + .2s); }
.gm-sky { position: absolute; inset: 0; transition: opacity .25s; }
.gm-sky i { position: absolute; inline-size: 3px; block-size: 3px; border-radius: 50%; background: var(--paper); opacity: .7; }
.gm-sky i:nth-child(1) { top: 22%; left: 14%; }
.gm-sky i:nth-child(2) { top: 40%; left: 31%; width: 2px; height: 2px; }
.gm-sky i:nth-child(3) { top: 18%; left: 58%; }
.gm-sky i:nth-child(4) { top: 46%; left: 73%; width: 2px; height: 2px; }
.gm-sky i:nth-child(5) { top: 26%; left: 88%; }
.is-on .gm-sky { opacity: 0; transition: opacity .5s ease var(--d); }
.gm-world { position: absolute; inset: 0; }
[dir="rtl"] .gm-world { transform: scaleX(-1); }  /* the runner runs in reading direction */
.gm-ground { position: absolute; left: 0; right: 0; bottom: 0; height: 20px; background: #574838; }
.gm-ground::after { content: ""; position: absolute; inset: 0; background: linear-gradient(#DDB78D, #CFA170); opacity: 0; transition: opacity .25s; }
.is-on .gm-ground::after { opacity: 1; transition: opacity .6s ease calc(var(--d) + .1s); }
.gm-player {
  position: absolute; left: 36px; bottom: 20px; width: 24px; height: 24px; border-radius: 6px;
  background: var(--lamp); box-shadow: 0 0 14px rgb(226 61 20 / .55); will-change: transform;
}
.gm-player i { position: absolute; top: 6px; right: 5px; width: 6px; height: 6px; border-radius: 50%; background: var(--paper); }
.gm-ob { position: absolute; left: 56%; bottom: 20px; width: 16px; height: 26px; border-radius: 5px 5px 2px 2px; background: #A48B6C; will-change: transform; }
.gm-ob + .gm-ob { left: 82%; height: 20px; }
.gm-ob::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: var(--ink); opacity: 0; transition: opacity .25s; }
.is-on .gm-ob::after { opacity: 1; transition: opacity .5s ease calc(var(--d) + .2s); }
/* the score pill: Western digits in a fixed-width counter, so 0 never reads as a dot */
.gm-hud {
  position: absolute; inset-block-start: 8px; inset-inline-end: 10px; z-index: 2;
  display: flex; align-items: center; gap: 8px; block-size: 28px;
  padding-inline: 12px 4px; border-radius: 999px; background: rgb(21 19 15 / .82);
  font-size: .875rem; line-height: 1; color: #E4DED3;
}
.gm-score {
  display: inline-grid; place-items: center; min-inline-size: 2.4em; block-size: 20px; padding-inline: 6px;
  border-radius: 999px; background: var(--paper); color: var(--ink);
  font-size: .9375rem; font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: .02em;
  direction: ltr; unicode-bidi: isolate;
}
/* the message sits below the score pill, never on top of it */
.gm-msg {
  position: absolute; inset: 40px 8px 22px; z-index: 2;
  display: grid; place-items: center; transition: opacity .2s;
}
.gm-msg span {
  padding: 6px 16px; border-radius: 999px; background: rgb(21 19 15 / .82); color: var(--paper);
  font-size: 1rem; font-weight: 600; line-height: 1.35; text-align: center; max-inline-size: 100%;
}
.game.playing .gm-msg { opacity: 0; }
html:not(.js) .gm-msg, html:not(.js) .gm-hud { display: none; }  /* no script: no game cues */

/* --- the way in: lede and the WhatsApp key --- */
.hero__act { display: grid; justify-items: center; align-content: start; align-self: start; text-align: center; gap: 14px; padding-block-start: 10px; }
.hero__lede { font-size: 1.0625rem; line-height: 1.7; max-inline-size: 30ch; text-wrap: balance; }
:lang(en) .hero__lede { max-inline-size: 40ch; }
.assure { display: flex; flex-wrap: wrap; justify-content: center; gap: 2px 16px; font-size: .9375rem; line-height: 1.55; }
.assure li { display: flex; align-items: center; gap: 6px; }
.assure .i { inline-size: 17px; block-size: 17px; stroke-width: 2; }

/* ---------- Hero, tablet ---------- */
@media (max-width: 1099px) {
  .hero { min-block-size: 0; justify-content: flex-start; }
  .wall {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr);
    grid-template-rows: auto auto minmax(230px, auto) auto;
    grid-template-areas: "sw sw" "app web" "app game" "act act";
    gap: 16px 18px;
  }
  .switch { grid-template-columns: auto auto; justify-content: center; column-gap: 24px; text-align: start; --p: 150px; margin-block-end: 6px; }
  .switch__text { max-inline-size: 30ch; }
  .dev--phone { --ph: 9.6px; }
  /* the browser mock is sized to show its whole page, so it is never cut off at the bottom */
  .dev--screen { flex: none; block-size: 36em; }
  .hero__act { margin-block-start: 8px; }
}
@media (max-width: 1099px) and (min-width: 760px) {
  @supports (inline-size: 1cqi) {
    .obj--web { container-type: inline-size; }
    .dev--screen { --br: clamp(5.8px, calc(100cqi / 54), 7.4px); }
  }
}

/* ---------- Hero, phone: everything, including ON, inside 390 x 844 ---------- */
@media (max-width: 759px) {
  .hero { padding-block: calc(var(--header-h) + 2px) 18px; }
  .hero__inner { inline-size: min(100% - 24px, var(--maxw)); }
  .eyebrow { font-size: .875rem; gap: 10px; }
  .eyebrow::before, .eyebrow::after { inline-size: 16px; }
  .title { margin-block-start: 2px; }
  .title h1, .title__twin { font-size: clamp(40px, 13.2vw, 64px); line-height: 1.22; }
  :lang(en) .title h1, :lang(en) .title__twin { font-size: clamp(30px, 9.4vw, 46px); line-height: 1.08; }
  .wall {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: none;
    grid-template-areas: "sw sw" "app web" "game game" "act act";
    gap: 10px; margin-block-start: 10px;
  }
  /* the switch is the hero on a phone: a 150 px plate, a 96 x 64 px press target */
  .switch { --p: 150px; grid-template-columns: auto minmax(0, 1fr); column-gap: 16px; margin-block-end: 2px; }
  .plate > .switch__pool { inline-size: 440px; block-size: 440px; margin: -220px 0 0 -220px; }
  .is-on .plate > .switch__pool { transform: scale(3.1); }
  .switch__hint { font-size: 1.125rem; }
  .switch__note { font-size: .875rem; line-height: 1.5; }

  .obj { padding: 12px 12px 0; border-radius: 20px; overflow: clip; }
  .obj__light { display: none; }
  .obj__head::before, .obj__head::after, .led { display: none; }
  .obj__head { gap: 6px; }
  .obj__title { font-size: .9375rem; line-height: 1.35; letter-spacing: -.005em; }
  .obj__sub { display: none; }  /* titles only; the game says «اضغط للّعب» on its own screen */
  .obj--app, .obj--web { block-size: 164px; }
  .dev--phone { --ph: 5.4px; margin-block: 10px 0; margin-inline: auto; flex: none; }
  .dev--screen { --br: 4.9px; margin-block-start: 10px; flex: none; block-size: 118px; border-end-start-radius: 0; border-end-end-radius: 0; }
  .obj--game { padding-block-end: 12px; }
  .game { flex: none; block-size: 100px; min-block-size: 0; margin-block-start: 8px; }
  .gm-screen { border-radius: 12px; box-shadow: inset 0 0 0 1px rgb(0 0 0 / .35), inset 0 6px 12px rgb(0 0 0 / .3), 0 0 0 4px #231F1B; }
  .gm-hud { inset-block-start: 6px; inset-inline-end: 6px; block-size: 26px; padding-inline: 10px 3px; gap: 6px; }
  .gm-msg { inset: 36px 6px 22px; }
  .gm-msg span { font-size: .9375rem; padding: 4px 14px; }

  .hero__act { gap: 10px; margin-block-start: 4px; }
  .hero__lede { font-size: 1rem; line-height: 1.6; max-inline-size: 34ch; }
  :lang(en) .hero__lede { max-inline-size: 44ch; line-height: 1.5; }
  :lang(en) .switch__note { line-height: 1.4; }
  :lang(en) .switch__note .nowrap { white-space: normal; }
  .hero__act .btn { inline-size: 100%; }
  .assure { font-size: .875rem; gap: 0 12px; }
  .assure .i { inline-size: 15px; block-size: 15px; }
  .room__window { width: 70%; left: -14%; opacity: .7; }
}
@media (max-width: 420px) {
  .eyebrow { gap: 0; text-wrap: balance; }
  .eyebrow::before, .eyebrow::after { display: none; }
}
@media (max-width: 389px) { /* both languages: the note wraps beside the 150 px plate (it fits unbroken from 390 px) */
  .switch__note .nowrap { white-space: normal; }
}
@media (max-width: 374px) {
  .switch { column-gap: 12px; }
  .switch__hint { font-size: 1.0625rem; }
  .mnav__tiles a { font-size: 1rem; padding-inline: 12px; }  /* "Commitments" fits its key on 320-374 px phones */
}

/* ==========================================================================
   Below the hero: the rest of the house. Lit rooms, laid out as bento tiles.
   ========================================================================== */
/* Evening by default (calm, fully readable); .is-lit when the دقمه is on and the
   section has been reached. Light layers sit under the content (z-index -1) and
   only fade; turning the light off is quick, like a real switch. */
.section { position: relative; isolation: isolate; padding-block: clamp(72px, 9vw, 128px); }
.section::before, .section--lit::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
}
.section::before { /* the evening: a warm shade over the wall */
  background: linear-gradient(180deg, rgb(var(--dusk) / .07) 0%, rgb(var(--dusk) / .04) 100%);
  transition: opacity .3s ease;
}
.section.is-lit::before { opacity: 0; transition: opacity 1.1s cubic-bezier(.25, .7, .2, 1); }
.section--lit { background: var(--paper); }
.section--lit::after { /* the ceiling light over the section */
  background: radial-gradient(60% 360px at 50% 0%, #FFFCF6 0%, rgb(255 252 246 / 0) 100%);
  opacity: .2; transition: opacity .3s ease;
}
.section--lit.is-lit::after { opacity: 1; transition: opacity 1.2s ease-out .05s; }
.section--plaster {
  background: linear-gradient(180deg, #EBE5DA 0%, #E8E1D5 100%);
  box-shadow: inset 0 14px 20px -16px rgb(var(--sh) / .35), inset 0 -14px 20px -16px rgb(var(--sh) / .25);
}
.sec-head { text-align: center; max-inline-size: 780px; margin-inline: auto; margin-block-end: clamp(34px, 4.6vw, 60px); }
.label {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: .9375rem; font-weight: 600; color: var(--graphite);
}
.label { position: relative; }
.label::before { /* indicator LED, unlit: a dark red lens */
  content: ""; inline-size: 7px; block-size: 7px; border-radius: 50%;
  background: #8A3A26; box-shadow: 0 0 0 3px rgb(138 58 38 / .12);
}
.label::after { /* the same LED, lit */
  content: ""; position: absolute; inset-inline-start: 0; inset-block-start: 50%; margin-block-start: -3.5px;
  inline-size: 7px; block-size: 7px; border-radius: 50%;
  background: var(--lamp); box-shadow: 0 0 0 3px rgb(226 61 20 / .14), 0 0 10px rgb(226 61 20 / .6);
  opacity: 0; transition: opacity .25s;
}
.is-lit .label::after { opacity: 1; transition: opacity .5s ease .15s; }
:lang(en) .label { letter-spacing: .02em; }
.h2 { margin-block-start: 12px; font-size: clamp(30px, 4.2vw, 54px); font-weight: 600; line-height: 1.3; text-wrap: balance; }
:lang(en) .h2 { line-height: 1.1; letter-spacing: -.025em; }
.sec-lede { margin-block-start: 14px; font-size: 1.1875rem; color: var(--graphite); text-wrap: pretty; }

/* a tile: porcelain mounted on the wall, lit from above */
.tile {
  position: relative; border-radius: 28px;
  background:
    radial-gradient(70% 46% at 50% 0%, rgb(255 236 210 / .5) 0%, rgb(255 236 210 / 0) 100%),
    linear-gradient(176deg, #FFFDF9 0%, #F8F4ED 55%, #EFE9E0 100%);
  box-shadow:
    inset 0 1.5px 0 #fff,
    0 0 0 1px rgb(var(--sh) / .07),
    0 2px 0 rgb(var(--sh) / .07),
    0 3px 6px rgb(var(--sh) / .08),
    0 22px 36px -24px rgb(var(--sh) / .55);
}
.tile--recess {
  background: linear-gradient(180deg, #E7E0D5 0%, #EEE9E1 100%);
  box-shadow: inset 0 16px 24px -16px rgb(var(--sh) / .42), inset 0 -1px 0 rgb(255 255 255 / .9), inset 0 0 0 1px rgb(var(--sh) / .07), 0 1px 0 #fff;
}
.tile--night {
  color: var(--paper);
  background: radial-gradient(110% 80% at 50% 0%, #3B2F25 0%, #221C17 55%, #171411 100%);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .06), 0 0 0 1px rgb(0 0 0 / .3), 0 22px 36px -24px rgb(var(--sh) / .7);
}

/* ---------- Services: niches set in porcelain ---------- */
.svc-grid {
  display: grid; gap: 22px;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
  grid-template-areas: "apps web" "apps games" "help help";
}
.svc--apps { grid-area: apps; }
.svc--web { grid-area: web; }
.svc--games { grid-area: games; }
.help { grid-area: help; }
.svc { display: flex; flex-direction: column; padding: 14px; }
.svc--wide { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 0 28px; }
.niche { /* a recessed alcove with its own downlight */
  position: relative; overflow: hidden; isolation: isolate;
  min-block-size: 230px; border-radius: 20px;
  display: grid; place-items: end center; padding-block-end: 18px;
  background: linear-gradient(180deg, #D8D0C3 0%, #E4DDD2 45%, #EDE8DF 100%);
  box-shadow: inset 0 18px 24px -14px rgb(var(--sh) / .42), inset 0 -1px 0 rgb(255 255 255 / .85), inset 0 0 0 1px rgb(var(--sh) / .06);
}
.niche::before { /* the scallop */
  content: ""; position: absolute; inset-block: 0 4%; inset-inline: 0; margin-inline: auto; inline-size: 80%; z-index: -1;
  background: linear-gradient(180deg, rgb(255 250 240 / .95) 0%, rgb(255 247 234 / .55) 38%, rgb(255 247 234 / .1) 78%, rgb(255 247 234 / 0) 100%);
  -webkit-mask-image: radial-gradient(50% 100% at 50% 100%, #000 76%, transparent 100%);
          mask-image: radial-gradient(50% 100% at 50% 100%, #000 76%, transparent 100%);
  opacity: .28; transition: opacity .3s ease;   /* evening: the downlight is off, only the room light reaches in */
}
.niche::after { /* the fixture; its lamp strip glows when on */
  content: ""; position: absolute; inset-block-start: 0; inset-inline: 0; margin-inline: auto;
  inline-size: 46px; block-size: 5px; border-radius: 0 0 6px 6px;
  background: linear-gradient(180deg, #CFC8BC, #FFF8EA); box-shadow: 0 2px 10px 2px rgb(255 244 222 / .9);
  opacity: .45; transition: opacity .3s ease;
}
.svc--apps { --ld: .1s; } .svc--web { --ld: .35s; } .svc--games { --ld: .6s; }
.is-lit .niche::before { opacity: .88; transition: opacity .9s ease-out var(--ld, .1s); }
.is-lit .niche::after { opacity: 1; transition: opacity .3s ease-out var(--ld, .1s); }
.svc:hover .niche::before { opacity: 1; transition-delay: 0s; }
.thing { block-size: 76%; inline-size: auto; max-block-size: 230px; transition: transform .5s var(--ease-out); }
.svc--apps .thing { block-size: 82%; }
.svc--wide .thing { block-size: 64%; max-block-size: 300px; }
.svc--wide .niche { padding-block-end: 26px; }
.svc:hover .thing { transform: translateY(-4px); }
.svc--apps .niche { min-block-size: 280px; }
@media (min-width: 1100px) {
  .svc--apps .niche { flex: 1 1 auto; }   /* no empty band under the CTA */
  .svc--apps .thing { max-block-size: 340px; }
}
.svc__body { display: flex; flex-direction: column; padding: 22px 12px 10px; }
.svc--wide .svc__body { padding: 16px 4px 8px; }
.svc h3 { font-size: clamp(22px, 2vw, 27px); font-weight: 600; line-height: 1.35; }
:lang(en) .svc h3 { letter-spacing: -.01em; }
.svc__desc { margin-block-start: 6px; color: var(--graphite); }
.spec { margin-block-start: 14px; }
.spec li {
  display: flex; align-items: flex-start; gap: 10px;
  padding-block: 9px; border-block-start: 1px solid var(--stone); font-size: 1rem; line-height: 1.6;
}
.spec li:last-child { border-block-end: 1px solid var(--stone); }
.spec .i { inline-size: 18px; block-size: 18px; margin-block-start: .2em; stroke-width: 2.2; color: var(--red-text); }
.fit {
  margin-block-start: 16px; padding: 12px 16px; border-radius: 16px; font-size: .9375rem; line-height: 1.65;
  background: linear-gradient(180deg, #EEE8DF, #F2EEE7);
  box-shadow: inset 0 2px 5px rgb(var(--sh) / .14), inset 0 0 0 1px rgb(var(--sh) / .05);
}
.fit b { font-weight: 600; }
.svc__cta { align-self: flex-start; margin-block-start: 18px; }

/* «محتار بين تطبيق وموقع؟» — the helper, as a strip of porcelain keys */
.help {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2.5fr); gap: 20px 32px; align-items: center;
  padding: clamp(22px, 2.8vw, 34px);
  background:
    radial-gradient(70% 120% at 0% 0%, rgb(255 222 200 / .55) 0%, rgb(255 222 200 / 0) 70%),
    linear-gradient(176deg, #FBEFE7 0%, #F6E5DA 100%);
}
[dir="rtl"] .help { background: radial-gradient(70% 120% at 100% 0%, rgb(255 222 200 / .55) 0%, rgb(255 222 200 / 0) 70%), linear-gradient(176deg, #FBEFE7 0%, #F6E5DA 100%); }
.help h3 { font-size: clamp(22px, 2vw, 26px); font-weight: 600; line-height: 1.35; }
.help__intro p { margin-block-start: 6px; color: var(--graphite); font-size: 1rem; }
.help__cta { margin-block-start: 16px; }
.pick { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.pick li {
  display: flex; flex-direction: column; justify-content: space-between; align-items: flex-start; gap: 14px;
  padding: 16px 16px 14px; border-radius: 18px; font-size: 1rem; line-height: 1.6;
  background: linear-gradient(176deg, #FFFFFF 0%, #FBF8F4 100%);
  box-shadow: inset 0 1px 0 #fff, 0 0 0 1px rgb(var(--sh) / .07), 0 10px 18px -14px rgb(var(--sh) / .5);
}
.pick b {
  display: inline-flex; align-items: center; gap: 8px; padding: 4px 12px 4px 12px; border-radius: 999px;
  background: var(--ink); color: var(--paper); font-size: .875rem; font-weight: 600; line-height: 1.5;
}
.pick b { position: relative; }
.pick b::before { /* a small LED: dark until the light is on */
  content: ""; inline-size: 6px; block-size: 6px; border-radius: 50%; background: #6E2F20;
}
.pick b::after {
  content: ""; position: absolute; inset-inline-start: 12px; inset-block-start: 50%; margin-block-start: -3px;
  inline-size: 6px; block-size: 6px; border-radius: 50%; background: var(--lamp); box-shadow: 0 0 6px 1px rgb(226 61 20 / .7);
  opacity: 0; transition: opacity .25s;
}
.pick li:nth-child(1) { --ld: .9s; } .pick li:nth-child(2) { --ld: 1.05s; } .pick li:nth-child(3) { --ld: 1.2s; } .pick li:nth-child(4) { --ld: 1.35s; }
.is-lit .pick b::after { opacity: 1; transition: opacity .4s ease var(--ld); }

/* ---------- Process: a dimmer track; each step a little brighter ---------- */
.steps { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.steps::before, .steps::after { /* the dimmer: a groove behind the knobs, and its fill */
  content: ""; position: absolute; inset-block-start: 46px; inset-inline: 40px; block-size: 8px; border-radius: 99px; z-index: 0;
}
.steps::before { background: #D6CEC1; box-shadow: inset 0 2px 3px rgb(var(--sh) / .35), 0 1px 0 rgb(255 255 255 / .9); }
.steps::after {
  inset-block-start: 48px; block-size: 4px; margin-inline: 2px;
  background: linear-gradient(var(--toward-end), #E7DDCE 0%, #F4C7A5 45%, #F07A4E 80%, var(--lamp) 100%);
  box-shadow: 0 0 8px rgb(226 61 20 / .3);
  transform: scaleX(.06); transform-origin: var(--from-start) 50%; opacity: .5;
  transition: transform .35s ease, opacity .35s;
}
.is-lit .steps::after { transform: none; opacity: 1; transition: transform 1.8s var(--ease-out) .25s, opacity .5s .25s; }
.step { z-index: 1; display: flex; flex-direction: column; padding: 24px 22px 22px; overflow: hidden; isolation: isolate; } /* above the dimmer */
.step:nth-child(1) { --lvl: .3; --ld: .2s; } .step:nth-child(2) { --lvl: .55; --ld: .55s; }
.step:nth-child(3) { --lvl: .8; --ld: .9s; }  .step:nth-child(4) { --lvl: 1; --ld: 1.25s; }
.step::before { /* its own downlight; brighter at each step once the light is on */
  content: ""; position: absolute; z-index: -1; inset-block-start: 0; inset-inline: 0; margin-inline: auto; inline-size: 86%; block-size: 70%;
  background: radial-gradient(50% 100% at 50% 0%, rgb(255 234 206 / .95) 0%, rgb(255 240 220 / 0) 100%);
  opacity: calc(var(--lvl, .5) * .25); transition: opacity .3s ease;
}
.is-lit .step::before { opacity: var(--lvl, .5); transition: opacity .9s ease-out var(--ld); }
.step__top { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-block-end: 20px; }
.knob {
  position: relative; display: grid; place-items: center;
  inline-size: 52px; block-size: 52px; border-radius: 50%;
  font-weight: 600; font-size: 1.25rem; line-height: 1;
  background: radial-gradient(circle at 50% 30%, #FFFFFF 0%, #F4F0EA 60%, #E6E0D6 100%);
  box-shadow: inset 0 1px 0 #fff, 0 0 0 1px rgb(var(--sh) / .12), 0 2px 2px rgb(var(--sh) / .18), 0 10px 16px -8px rgb(var(--sh) / .45);
}
.level { display: flex; gap: 4px; direction: ltr; }
.level i { position: relative; inline-size: 14px; block-size: 7px; border-radius: 2px; background: #DCD5CA; box-shadow: inset 0 1px 1px rgb(var(--sh) / .2); }
/* the level pips: in the evening the step's pips are dark red lenses; lit, they glow one after another */
.step:nth-child(1) .level i:nth-child(-n+1),
.step:nth-child(2) .level i:nth-child(-n+2),
.step:nth-child(3) .level i:nth-child(-n+3),
.step:nth-child(4) .level i { background: #9C5A45; box-shadow: inset 0 1px 1px rgb(0 0 0 / .25); }
.level i::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  background: var(--lamp); box-shadow: 0 0 6px rgb(226 61 20 / .5);
  opacity: 0; transition: opacity .25s;
}
.level i:nth-child(2) { --pd: .1s; } .level i:nth-child(3) { --pd: .2s; } .level i:nth-child(4) { --pd: .3s; }
.is-lit .step:nth-child(1) .level i:nth-child(-n+1)::after,
.is-lit .step:nth-child(2) .level i:nth-child(-n+2)::after,
.is-lit .step:nth-child(3) .level i:nth-child(-n+3)::after,
.is-lit .step:nth-child(4) .level i::after { opacity: 1; transition: opacity .35s ease calc(var(--ld) + var(--pd, 0s)); }
[dir="rtl"] .level { direction: rtl; }
.step h3 { font-size: 1.3125rem; font-weight: 600; line-height: 1.4; }
.step > p { margin-block-start: 6px; color: var(--graphite); font-size: 1rem; line-height: 1.7; }
.step .get {
  margin-block-start: auto; padding: 13px 15px; border-radius: 16px; color: var(--ink); font-size: .9375rem; line-height: 1.65;
  background: linear-gradient(180deg, #EEE8DF, #F3EFE8);
  box-shadow: inset 0 2px 5px rgb(var(--sh) / .16), inset 0 0 0 1px rgb(var(--sh) / .05);
}
.step > p + .get { margin-block-start: 16px; }
@supports (grid-template-rows: subgrid) {
  @media (min-width: 1100px) {
    .steps { grid-template-rows: repeat(4, auto); }
    .step { display: grid; grid-row: span 4; grid-template-rows: subgrid; row-gap: 0; }
    .step .get { align-self: end; }
  }
}
.get b { display: block; font-size: .875rem; font-weight: 600; color: var(--red-deep); margin-block-end: 2px; }

/* ---------- Commitments: switch plates whose lamps light with the دقمه; FAQ recessed beside them ---------- */
.prom-grid { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 22px; align-items: start; }
.promises { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }
.promise { /* a switch plate: porcelain face with a soft inner rim, one small rocker */
  display: flex; flex-direction: column; gap: 6px; padding: 24px 24px 26px;
  box-shadow:
    inset 0 0 0 7px rgb(255 255 255 / .42),
    inset 0 0 0 8px rgb(var(--sh) / .06),
    inset 0 1.5px 0 #fff,
    0 0 0 1px rgb(var(--sh) / .07),
    0 2px 0 rgb(var(--sh) / .08),
    0 3px 6px rgb(var(--sh) / .08),
    0 22px 36px -24px rgb(var(--sh) / .55);
}
.mini { /* a small rectangular rocker (a physical object: lamp on the left) */
  position: relative; display: flex; direction: ltr; inline-size: 48px; block-size: 26px; padding: 4px; margin-block-end: 12px; border-radius: 7px;
  background: linear-gradient(180deg, #D9D2C7, #E8E3DA);
  box-shadow: inset 0 2px 3px rgb(var(--sh) / .34), 0 1px 0 #fff;
}
.mini::before, .mini::after { content: ""; flex: 1; }
.mini::before { border-radius: 3px 0 0 3px; background: linear-gradient(180deg, #6B2819, #561E11); box-shadow: inset 0 1px 0 rgb(255 255 255 / .1); } /* unlit lens */
.mini::after { border-radius: 0 3px 3px 0; background: linear-gradient(180deg, #34302B, var(--ink)); box-shadow: inset 1px 0 0 rgb(0 0 0 / .5); }
.mini > i { /* the lens, lit */
  position: absolute; inset-block: 4px; left: 4px; width: calc(50% - 4px); border-radius: 3px 0 0 3px;
  background: radial-gradient(90% 110% at 50% 45%, #FF8457, var(--lamp) 70%); box-shadow: 0 0 10px rgb(226 61 20 / .55);
  opacity: 0; transition: opacity .25s;
}
.promise:nth-child(1) { --ld: .25s; } .promise:nth-child(2) { --ld: .45s; } .promise:nth-child(3) { --ld: .65s; } .promise:nth-child(4) { --ld: .85s; }
.is-lit .mini > i { opacity: 1; transition: opacity .4s ease var(--ld, .3s); }
.promise h3 { font-size: 1.25rem; font-weight: 600; line-height: 1.45; }
.promise p { color: var(--graphite); font-size: 1rem; line-height: 1.7; }

.faq { padding: clamp(22px, 2.6vw, 32px); }
.faq__title { font-size: 1.375rem; font-weight: 600; margin-block-end: 8px; }
.faq details + details { border-block-start: 1px solid rgb(var(--sh) / .16); }
.faq summary {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding-block: 16px; font-size: 1.0625rem; font-weight: 500; line-height: 1.5; cursor: pointer; list-style: none; border-radius: 8px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq .key {
  flex: none; display: grid; place-items: center; inline-size: 38px; block-size: 38px; border-radius: 50%;
  background: linear-gradient(180deg, #FFFFFF, #EFEBE4);
  box-shadow: inset 0 1px 0 #fff, 0 0 0 1px rgb(var(--sh) / .14), 0 4px 8px -5px rgb(var(--sh) / .5);
}
.faq .key .i { inline-size: 18px; block-size: 18px; stroke-width: 2; transition: transform .25s var(--ease-out); }
.faq details[open] .key .i { transform: rotate(45deg); }
.faq details p { padding-block-end: 18px; padding-inline-end: 54px; color: var(--graphite); }

/* ---------- Contact: a small room with its own downlight + the night tile ---------- */
.contact { padding-block-start: 0; background: var(--paper); }
.contact__grid { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 22px; }
.contact__room {
  overflow: hidden; isolation: isolate; text-align: center;
  padding: clamp(34px, 5vw, 64px) clamp(20px, 4vw, 56px);
  background:
    radial-gradient(60% 60% at 50% 0%, #FFFDF9 0%, rgb(255 253 249 / 0) 100%),
    radial-gradient(115% 100% at 50% 20%, #FAF6EF 0%, #F2EDE5 50%, #E9E2D7 100%);
}
.contact__room::before { /* the downlight over the plate */
  content: ""; position: absolute; z-index: -1; inset-block-start: 0; inset-inline: 0; margin-inline: auto; inline-size: 70%; block-size: 70%;
  background: linear-gradient(180deg, rgb(255 246 228 / .9) 0%, rgb(255 244 224 / 0) 100%);
  -webkit-mask-image: radial-gradient(50% 100% at 50% 100%, #000 70%, transparent 100%);
          mask-image: radial-gradient(50% 100% at 50% 100%, #000 70%, transparent 100%);
  opacity: .25; transition: opacity .3s ease;
}
.contact__room::after { /* evening in the little room */
  content: ""; position: absolute; z-index: -1; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgb(var(--dusk) / .09) 0%, rgb(var(--dusk) / .05) 100%);
  transition: opacity .3s ease;
}
.contact.is-lit .contact__room::before { opacity: 1; transition: opacity 1s ease-out .2s; }
.contact.is-lit .contact__room::after { opacity: 0; transition: opacity 1s ease-out .1s; }
.contact__plate .mini { --ld: .15s; }
.contact__plate {
  margin-inline: auto; margin-block-end: 22px; display: grid; place-items: center;
  inline-size: 84px; block-size: 84px; border-radius: 12px;
  background: linear-gradient(172deg, #FFFFFF, #EEE9E1);
  box-shadow: inset 0 1px 0 #fff, 0 0 0 1px rgb(var(--sh) / .10), 0 2px 2px rgb(var(--sh) / .16), 0 16px 20px -10px rgb(var(--sh) / .4);
}
.contact__plate .mini { margin: 0; }
.mini--lg { inline-size: 54px; block-size: 34px; }
.contact .sec-lede { max-inline-size: 44ch; margin-inline: auto; }
.contact__actions { margin-block-start: 28px; display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.contact__night { /* the signature and the audience, one centred group (no empty band) */
  display: flex; flex-direction: column; justify-content: center; gap: 0;
  padding: clamp(28px, 3.6vw, 48px);
}
.contact__wm { inline-size: min(100%, 240px); block-size: auto; }
.aud { margin-block-start: 30px; padding-block-start: 26px; border-block-start: 1px solid rgb(244 241 234 / .14); }
:lang(en) .contact__wm { inline-size: min(100%, 290px); }
.aud__lbl { font-size: .9375rem; font-weight: 500; color: #CFC8BB; margin-block-end: 10px; }
.aud__list { display: flex; flex-wrap: wrap; gap: 8px; }
.aud__list li {
  padding: 6px 14px; border-radius: 999px; font-size: .9375rem; font-weight: 500; line-height: 1.5;
  background: rgb(244 241 234 / .07); box-shadow: inset 0 0 0 1px rgb(244 241 234 / .18);
}

/* ---------- Footer ---------- */
.site-footer { background: var(--ink); color: var(--paper); padding-block: clamp(48px, 6vw, 72px) 28px; }
.footer__top { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 28px 40px; }
.footer__brand img { inline-size: 160px; block-size: auto; }
.footer__line { margin-block-start: 14px; font-size: 1.0625rem; color: #CFC8BB; }
.footer__nav { display: flex; flex-wrap: wrap; gap: 6px 22px; }
.footer__nav a { text-decoration: none; font-weight: 500; padding-block: 6px; }
.footer__nav a:hover { text-decoration: underline; text-underline-offset: 5px; }
.footer__bottom {
  margin-block-start: 40px; padding-block-start: 22px; border-block-start: 1px solid rgb(244 241 234 / .16);
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; font-size: .9375rem; color: #B7B0A3;
}
.footer__bottom a { color: var(--paper); }

/* ---------- Tablet & phone, below the hero ---------- */
@media (max-width: 1099px) {
  .svc-grid { grid-template-columns: minmax(0, 1fr); grid-template-areas: "apps" "web" "games" "help"; }
  .svc--apps { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 0 28px; }
  .svc--apps .niche { min-block-size: 230px; }
  .svc--apps .svc__body { padding: 16px 4px 8px; }
  .help { grid-template-columns: minmax(0, 1fr); }
  .pick { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .steps::before, .steps::after { display: none; }
  .prom-grid { grid-template-columns: minmax(0, 1fr); }
  .contact__grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 759px) {
  .section { padding-block: 60px; }
  .contact { padding-block-start: 0; }
  .sec-head { margin-block-end: 28px; }
  .sec-lede { font-size: 1.0625rem; }
  .tile { border-radius: 22px; }
  .svc-grid { gap: 16px; }
  .svc, .svc--wide, .svc--apps { display: flex; flex-direction: column; padding: 10px; }
  .niche, .svc--apps .niche { min-block-size: 170px; border-radius: 16px; }
  .thing, .svc--wide .thing { max-block-size: 150px; }
  .svc--wide .niche { padding-block-end: 18px; }
  .svc__body, .svc--wide .svc__body, .svc--apps .svc__body { padding: 16px 8px 8px; }
  .svc__cta { align-self: stretch; }
  .help { padding: 20px 16px; }
  .help__cta { inline-size: 100%; }
  .pick { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  /* question and answer side by side; the answer pill takes its full width when it can, and wraps rather than run out of the key */
  .pick li { display: grid; grid-template-columns: minmax(min-content, 1fr) auto; align-items: center; gap: 12px; padding: 12px 14px; font-size: .9375rem; }
  .pick b { font-size: .875rem; padding: 3px 10px; }
  .steps { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .step { padding: 18px; display: grid; grid-template-columns: 52px minmax(0, 1fr); column-gap: 14px; }
  .step__top { grid-row: span 3; flex-direction: column; align-items: center; justify-content: flex-start; margin: 0; gap: 10px; }
  .level { flex-direction: column-reverse; gap: 3px; }
  .level i { inline-size: 12px; block-size: 5px; }
  .step h3 { font-size: 1.1875rem; margin-block-start: 10px; }
  .step .get { font-size: .9375rem; }
  .promises { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .promise { padding: 20px 18px; }
  .faq summary { font-size: 1rem; }
  .faq details p { padding-inline-end: 0; }
  .contact__room { padding-block: 36px; }
  .contact__actions .btn { inline-size: 100%; }
  .btn { white-space: normal; text-align: center; text-wrap: balance; padding-block: 10px; }
  .footer__top { flex-direction: column; align-items: flex-start; }
}

/* ---------- Windows contrast themes: the switch and the game are drawn with gradients, keep them ---------- */
@media (forced-colors: active) {
  .plate, .gm-screen { forced-color-adjust: none; }
  .plate > .switch__pool { forced-color-adjust: auto; }   /* the glow does not tint the page */
  .rocker:focus-visible, .gm-screen:focus-visible { outline-color: Highlight; }
}

/* ---------- Motion preferences ---------- */
.no-anim *, .no-anim *::before, .no-anim *::after { transition: none !important; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: .01ms !important; transition-delay: 0s !important;
    animation-duration: .01ms !important; animation-iteration-count: 1 !important; animation-delay: 0s !important;
  }
}