/* =====================================================================
   יש לכם אתגר? — standalone landing page · LAB VARIANT D (experimental; a calmer refinement of C)
   STAGING DESIGN EXPERIMENT ONLY. Self-contained.
   World: Variant C's field of thought (canvas #field) behind the page with shorter pins, calmer pacing and
   clearer reading. The page stays light; one section (speed) is dark. TZUR brand kept: white, ink, orange as the anchor; ember and amber
   extend the orange, one cool tint gives depth. Rubik for Hebrew, Archivo for Latin and numbers.
   Motion: html.motion only when reduced motion is not requested; content is visible by default.
   ===================================================================== */

@property --rot { syntax: '<angle>'; inherits: true; initial-value: 0deg; }

:root {
  --ink: #121212;
  --ink-2: #3d3a37;
  --muted: #66615c;
  --ground: #ffffff;
  --mist: #f6f3ef;
  --orange: #f59a00;
  --amber: #ffbe3d;
  --ember: #e2621b;
  --hot: #d9640a;            /* orange for large type on white (≥3:1) */
  --hot-text: #9a4a00;       /* orange for small text on white (≥4.5:1) */
  --ice: #8fa6c4;
  --night: #14110f;
  --on-night: #f4f0ea;
  --on-night-2: #c7beb4;

  --he: 'Rubik', 'Segoe UI', Arial, sans-serif;
  --lat: 'Archivo', 'Rubik', 'Segoe UI', Arial, sans-serif;
  --ease: cubic-bezier(.23, 1, .32, 1);
  --ease-io: cubic-bezier(.77, 0, .175, 1);
  --pad: clamp(20px, 6vw, 104px);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scrollbar-color: var(--orange) transparent; overflow-x: clip; }
main { overflow-x: clip; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  margin: 0; background: var(--ground); color: var(--ink);
  font-family: var(--he); font-size: 18px; line-height: 1.6;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: clip;
}
img { display: block; max-width: 100%; }
h1, h2, h3, p, ul, ol, figure { margin: 0; padding: 0; }
ul, ol { list-style: none; }
a { color: inherit; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
::selection { background: var(--orange); color: var(--ink); }
:focus-visible { outline: 3px solid var(--orange); outline-offset: 3px; border-radius: 4px; }
.x-skip { position: fixed; top: -80px; inset-inline-start: 16px; z-index: 300; background: var(--ink); color: #fff; padding: 10px 16px; border-radius: 8px; text-decoration: none; }
.x-skip:focus { top: 16px; }

/* the field sits behind everything; sections are transparent so it carries through the page */
.x-field { position: fixed; inset: 0; width: 100vw; height: 100vh; z-index: 0; pointer-events: none; }
main, .x-head, .x-foot { position: relative; z-index: 1; }

.x-hot { color: var(--hot); }
.x-h2 { font-size: clamp(36px, 4.4vw, 72px); line-height: 1.04; font-weight: 800; letter-spacing: -0.03em; text-wrap: balance; max-width: 18ch; }
.x-h2 > span { display: block; }
.x-sub { margin-top: 20px; font-size: clamp(18px, 1.5vw, 22px); line-height: 1.55; color: var(--ink-2); max-width: 44ch; }

/* one button: a pill of solid orange (as on product.tzur.com) */
.x-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: 60px; padding: 0 34px;
  border-radius: 999px; background: var(--orange); color: var(--ink); font-weight: 500; font-size: 18px; text-decoration: none; white-space: nowrap;
  box-shadow: 0 14px 34px -14px rgba(226, 98, 27, .55);
  transition: transform 160ms var(--ease), background-color 200ms ease, box-shadow 300ms var(--ease);
}
.x-btn:active { transform: scale(.97); }
@media (hover: hover) and (pointer: fine) { .x-btn:hover { background: var(--amber); box-shadow: 0 18px 40px -14px rgba(226, 98, 27, .7); } }
.x-btn--sm { height: 44px; padding: 0 22px; font-size: 16px; }
.x-link { font-weight: 500; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 6px; text-decoration-color: var(--orange); transition: color 200ms ease, text-underline-offset 200ms var(--ease); }
@media (hover: hover) and (pointer: fine) { .x-link:hover { color: var(--hot-text); text-underline-offset: 9px; } }

/* ===================================================================== HEADER */
.x-head { position: fixed; inset: 0 0 auto 0; z-index: 50; display: flex; align-items: center; gap: 40px; padding: 18px var(--pad); transition: background-color 400ms var(--ease), padding 400ms var(--ease); }
.x-head.is-solid { background: rgba(255, 255, 255, .72); -webkit-backdrop-filter: blur(16px) saturate(1.4); backdrop-filter: blur(16px) saturate(1.4); padding-block: 12px; }
.x-logo img { height: 36px; width: auto; transition: filter 400ms ease; }
.x-nav { margin-inline-start: auto; display: flex; gap: 30px; }
.x-nav a { text-decoration: none; font-size: 15px; color: var(--ink-2); transition: color 200ms ease; }
.x-nav a:hover { color: var(--hot-text); }

/* ===================================================================== HERO */
/* One screen, no pin. The Hero's only visual is the animated network (drawn on the fixed field canvas behind the page); it
   rests beside the copy and, as the page scrolls, rides over the boundary into the router ("the bridge", in the script). */
.x-hero-intro { display: none; }   /* mobile only (see MOBILE) */
.x-hero__stage { position: relative; height: 100svh; overflow: hidden; }
/* Desktop/tablet: each sticky stage gets its own compositor layer. Mobile does not use sticky for its animated stages at all
   (see "MOBILE PINS" below: fixed-on-scroll). */
@media (min-width: 701px) { html.motion .x-verbs__pin, html.motion .x-depth__pin { will-change: transform; } }
/* where the network rests: an invisible anchor that only gives the script a place and a size (nothing is drawn by it) */
.x-net { position: absolute; left: 24vw; top: 52%; width: clamp(200px, 22vw, 380px); aspect-ratio: 1; transform: translate(-50%, -50%); pointer-events: none; }
@keyframes x-breathe { to { box-shadow: 0 40px 90px -20px rgba(226, 98, 27, .65), 0 0 220px 70px rgba(245, 154, 0, .3); } }
@keyframes x-spin { to { transform: rotate(360deg); } }

.x-hero__copy { position: absolute; right: var(--pad); top: 50%; transform: translateY(-50%); width: min(58vw, 1000px); z-index: 2; }
.x-hero__title { font-size: clamp(40px, 4.6vw, 80px); line-height: 1.04; font-weight: 900; letter-spacing: -0.03em; }
.x-nw { white-space: nowrap; }
.x-l { display: block; }
.x-l--hot { color: var(--hot); }
html.motion .x-l { animation: x-rise 1100ms var(--ease) both; }
html.motion .x-l--hot { animation-delay: 160ms; }
@keyframes x-rise { from { opacity: 0; transform: translateY(32px); filter: blur(8px); } }
.x-hero__lead { margin-top: 30px; font-size: clamp(18px, 1.45vw, 22px); line-height: 1.6; color: var(--ink-2); max-width: 34em; }
.x-hero__acts { margin-top: 34px; display: flex; align-items: center; gap: 30px; flex-wrap: wrap; }
.x-hero__facts { position: absolute; right: var(--pad); bottom: 30px; font-size: 15px; color: var(--ink-2); }
.x-hero__facts b { font-family: var(--lat); font-weight: 800; font-size: 20px; color: var(--ink); }
.x-hero__facts span { color: var(--orange); margin: 0 .5em; }
.x-hero__facts bdi { font-family: var(--lat); font-weight: 600; color: var(--ink); }

/* ===================================================================== ROUTER */
.x-route { padding: 18vh var(--pad) 14vh; }
/* Seven situations that clearly read as choices (nothing selected at first). Each opens its own answer: on desktop in one calm
   panel below the options, on tablet/mobile directly below the tapped row (an accordion). No line, no dots, no sequence. */
.x-route__body { margin-top: clamp(36px, 5vh, 60px); }
.x-pick { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 12px; }
.x-pick button {
  display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 66px; padding: 15px 20px; text-align: start;
  border-radius: 14px; background: var(--ground); box-shadow: inset 0 0 0 1.5px rgba(18, 18, 18, .16);
  font-size: clamp(17px, 1.3vw, 19px); font-weight: 500; line-height: 1.35; color: var(--ink);
  transition: box-shadow 200ms ease, background-color 200ms ease, transform 160ms var(--ease);
}
.x-pick__ic { flex: none; position: relative; width: 30px; height: 30px; border-radius: 50%; background: var(--mist); transition: transform 320ms var(--ease), background-color 200ms ease; }
.x-pick__ic::before, .x-pick__ic::after { content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 2px; margin: -1px 0 0 -6px; border-radius: 1px; background: var(--ink); }
.x-pick__ic::after { transform: rotate(90deg); }   /* a plus; it turns into a close mark when open */
.x-pick button:active { transform: scale(.985); }
@media (hover: hover) and (pointer: fine) {
  .x-pick button:hover { box-shadow: inset 0 0 0 1.5px var(--orange); }
  .x-pick button:hover .x-pick__ic { background: #ffe7c2; }
}
.x-pick button[aria-expanded="true"] { background: #fff6e8; box-shadow: inset 0 0 0 2px var(--orange); font-weight: 700; }
.x-pick button[aria-expanded="true"] .x-pick__ic { transform: rotate(45deg); background: var(--orange); }
/* the seven options enter one by one as they scroll into view (set by the script; with motion only). Once in, they stay. */
html.motion .x-pick button.is-pre { opacity: 0; transform: translateY(16px); }
html.motion .x-pick button.is-rv { transition: opacity 380ms ease, transform 480ms var(--ease), box-shadow 200ms ease, background-color 200ms ease; }

/* the answer: height opens from 0 (grid rows 0fr -> 1fr), the content fades and lifts in */
.x-acc { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 380ms var(--ease); }
.x-acc.is-open { grid-template-rows: 1fr; }
.x-acc__clip { min-height: 0; overflow: hidden; }
.x-map__in { display: grid; gap: 14px; margin-top: 8px; padding: 22px 22px 24px; border-radius: 16px; background: var(--mist);
  opacity: 0; transform: translateY(-6px); transition: opacity 240ms ease, transform 380ms var(--ease); }
.x-acc.is-open .x-map__in { opacity: 1; transform: none; transition-delay: 60ms; }
.x-acc.is-swap .x-map__in { opacity: 0; transform: translateY(6px); transition-duration: 150ms; transition-delay: 0ms; }
.x-acc.is-instant, .x-acc.is-instant .x-map__in { transition: none; }
html:not(.motion) .x-acc, html:not(.motion) .x-map__in { transition: none; }
.x-map__verbs { display: flex; flex-wrap: wrap; gap: 6px; }
.x-map__verbs li { padding: 3px 12px; border-radius: 999px; background: var(--ground); font-size: 14px; font-weight: 600; color: var(--ink-2); }
.x-map__first { font-size: clamp(19px, 1.55vw, 24px); font-weight: 700; line-height: 1.45; letter-spacing: -0.01em; max-width: 46ch; }
.x-map__gets { padding-top: 14px; border-top: 1px solid rgba(18, 18, 18, .1); }
.x-map__k { display: block; margin-bottom: 4px; font-size: 14px; color: var(--muted); }
.x-map__list { font-size: 17px; line-height: 1.6; color: var(--ink); }
.x-pick .x-acc { display: none; }   /* desktop: the shared panel below the options */
.x-acc--desk .x-map__in { margin-top: 20px; padding: 30px 34px 32px; }
.x-route__more { margin-top: clamp(40px, 6vh, 72px); font-size: 19px; }

/* ===================================================================== FIVE VERBS (pinned) */
.x-verbs { height: 380vh; }   /* ~0.56 screen of scroll per verb */
.x-verbs__pin { position: sticky; top: 0; height: 100svh; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 30vw); grid-template-rows: auto 1fr auto; padding: 110px var(--pad) 48px; column-gap: 5vw; }
.x-verbs__title { grid-column: 2; grid-row: 1; font-size: 22px; font-weight: 700; }
.x-verbs__word { grid-column: 1; grid-row: 1 / 4; align-self: center; justify-self: start; font-size: clamp(110px, 16vw, 290px); font-weight: 900; letter-spacing: -0.04em; line-height: 1; height: 1.12em; overflow: hidden; direction: rtl; }
.x-verbs__word span { display: block; transition: opacity 480ms var(--ease); }   /* the word changes by a fade only */
.x-verbs__word span.is-out { opacity: 0; transition-duration: 200ms; }
.x-verbs__word span.is-in { opacity: 0; transition: none; }
.x-verbs__list { grid-column: 2; grid-row: 2; align-self: center; display: grid; gap: 2px; }
.x-verbs__list li { position: relative; padding: 9px 0; padding-inline-start: 22px; }
.x-verbs__list li::before { content: ""; position: absolute; inset-inline-start: 0; top: 22px; width: 9px; height: 9px; border-radius: 50%; background: var(--orange); transform: scale(0); transition: transform 400ms var(--ease); }
.x-verbs__list b { display: block; font-size: 22px; color: var(--muted); transition: color 300ms ease; }
.x-verbs__list p { margin-top: 3px; font-size: 16px; line-height: 1.5; color: var(--muted); opacity: .72; transition: color 300ms ease, opacity 300ms ease; }   /* all five visible; the active one emphasised */
.x-verbs__list li.is-on::before { transform: scale(1); }
.x-verbs__list li.is-on b { color: var(--ink); }
.x-verbs__list li.is-on p { color: var(--ink-2); opacity: 1; }
.x-verbs__steps { display: none; }
.x-verbs__aside { grid-column: 2; grid-row: 3; font-size: 16px; color: var(--muted); }
html:not(.motion) .x-verbs { height: auto; }
html:not(.motion) .x-verbs__pin { position: static; height: auto; }
html:not(.motion) .x-verbs__list p { color: var(--ink-2); opacity: 1; }
html:not(.motion) .x-verbs__list b { color: var(--ink); }

/* ===================================================================== LENS */
.x-lens { padding: 13vh var(--pad) 14vh; background: var(--mist); }
.x-lens__big { font-size: clamp(34px, 4.6vw, 78px); line-height: 1.07; font-weight: 800; letter-spacing: -0.03em; max-width: 20ch; text-wrap: balance; }
.x-lens__big span { display: block; }
.x-lens__big span:first-child { color: var(--muted); }
.x-lens__big em { font-style: normal; color: var(--hot); }
.x-lens__p { margin-top: 36px; margin-inline-start: auto; max-width: 52ch; font-size: 19px; color: var(--ink-2); }

/* ===================================================================== REELY AT THE CENTRE */
.x-orbit { padding: 14vh var(--pad); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 5vw; align-items: center; }
.x-orbit__text { grid-column: 1; grid-row: 1; display: grid; gap: 18px; }
.x-orbit__text .x-h2 { max-width: 14ch; margin-bottom: 8px; }
.x-orbit__text p { font-size: 18px; color: var(--ink-2); max-width: 44ch; }
.x-orbit__name { font-size: 16px !important; }
.x-orbit__name b { color: var(--ink); font-size: 19px; margin-inline-end: 8px; }
/* a personal line under Reely's text: his mobile, separated by a hairline, in the page's link style */
.x-orbit__text p.x-orbit__cta { margin-top: 10px; padding-top: 22px; border-top: 1px solid rgba(18, 18, 18, .1); font-size: 19px; font-weight: 600; color: var(--ink); }
.x-orbit__cta a { margin-inline-start: 4px; font-family: var(--lat); white-space: nowrap; text-decoration: underline; text-decoration-color: var(--orange); text-decoration-thickness: 2px; text-underline-offset: 6px; }
.x-orbit__sys { grid-column: 2; grid-row: 1; position: relative; width: min(100%, 600px); aspect-ratio: 1; justify-self: center; --R: 46%; }
.x-orbit__ring { position: absolute; left: 50%; top: 50%; border-radius: 50%; transform: translate(-50%, -50%) scaleY(.5); border: 1.5px solid rgba(226, 98, 27, .35); }
.x-orbit__ring--a { width: 92%; aspect-ratio: 1; }
.x-orbit__ring--b { width: 64%; aspect-ratio: 1; border-color: rgba(143, 166, 196, .5); }
.x-orbit__spin { position: absolute; inset: 0; }   /* the capabilities of צוות TZUR: a very slow orbit, only while on screen */
html.motion .x-orbit__spin { animation: x-orbit 140s linear infinite; animation-play-state: paused; }
html.motion .x-orbit.is-vis .x-orbit__spin { animation-play-state: running; }
@keyframes x-orbit { to { --rot: 360deg; } }
html.motion .x-orbit.is-vis .x-orbit__me { animation: x-glow 7s var(--ease-io) infinite alternate; }
@keyframes x-glow { to { box-shadow: 0 0 0 16px rgba(245, 154, 0, .14), 0 0 0 1px rgba(245, 154, 0, .5), 0 44px 90px -24px rgba(226, 98, 27, .62); } }
.x-orbit__spin span {
  --t: calc(var(--a) + var(--rot));
  position: absolute; left: calc(50% + cos(var(--t)) * var(--R)); top: calc(50% + sin(var(--t)) * var(--R) * .5);
  transform: translate(-50%, -50%) scale(calc(.82 + (sin(var(--t)) + 1) * .14));
  z-index: calc(2 + round(sin(var(--t)) * 2));
  font-family: var(--lat); font-weight: 700; font-size: clamp(15px, 1.3vw, 20px); white-space: nowrap;
  padding: 8px 16px; border-radius: 999px; background: rgba(255, 255, 255, .86); color: var(--ink);
  box-shadow: 0 10px 26px -14px rgba(18, 18, 18, .4);
  opacity: calc(.62 + (sin(var(--t)) + 1) * .19);
}
.x-orbit__me { position: absolute; left: 50%; top: 50%; width: 40%; aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%; overflow: hidden; z-index: 3;
  box-shadow: 0 0 0 10px rgba(245, 154, 0, .2), 0 0 0 1px rgba(245, 154, 0, .5), 0 40px 80px -24px rgba(226, 98, 27, .55); }
.x-orbit__me img { width: 100%; height: 100%; object-fit: cover; }
.x-orbit__label { position: absolute; left: 50%; top: 15%; transform: translate(-50%, -50%); z-index: 4; white-space: nowrap;
  font-size: clamp(14px, 1.1vw, 16px); font-weight: 700; color: var(--hot-text); background: var(--ground); padding: 2px 12px; border-radius: 999px; }
.x-orbit__cap { position: absolute; left: 50%; top: 80%; transform: translateX(-50%); z-index: 4; white-space: nowrap; font-size: clamp(15px, 1.15vw, 17px); font-weight: 500; color: var(--ink); }

/* ===================================================================== SPEED (one dark section) */
.x-speed { position: relative; overflow-x: clip; padding: 18vh 0 16vh; background: var(--night); color: var(--on-night); }
.x-speed__fx { position: absolute; left: 0; width: 100%; pointer-events: none; z-index: 0; }   /* streaks behind the three lines only */
.x-speed .x-hot { color: var(--amber); }
.x-speed__lines { position: relative; z-index: 1; display: flex; flex-direction: column; font-size: clamp(64px, 11vw, 210px); line-height: .98; font-weight: 900; letter-spacing: -0.04em; }
/* each line travels with the scroll (translate, set by JS within the room it has, so it never leaves the screen),
   after one staggered entrance (transform) */
.x-run { display: block; white-space: nowrap; padding-inline: var(--pad); translate: var(--tx, 0px) 0; will-change: translate; }
html.motion .x-speed.is-arm .x-run { opacity: 0; transform: translateY(28px); transition: opacity 900ms var(--ease), transform 1100ms var(--ease); }
html.motion .x-speed.is-arm.is-in .x-run { opacity: 1; transform: none; }
html.motion .x-speed.is-arm .x-run:nth-child(2) { transition-delay: 150ms; }
html.motion .x-speed.is-arm .x-run:nth-child(3) { transition-delay: 300ms; }
.x-run:nth-child(2) { padding-inline-start: calc(var(--pad) + 14vw); }
.x-speed__body { position: relative; z-index: 1; margin-top: 12vh; padding: 0 var(--pad); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: 4vw 6vw; align-items: start; }
.x-speed__lead { font-size: clamp(19px, 1.55vw, 23px); line-height: 1.6; color: var(--on-night-2); max-width: 34ch; }
.x-speed__ai { font-size: clamp(30px, 3.2vw, 52px); line-height: 1.1; font-weight: 800; letter-spacing: -0.025em; text-wrap: balance; }
.x-speed__ai span { display: block; }
.x-speed__uses { grid-column: 1 / -1; font-size: clamp(18px, 1.5vw, 22px); color: var(--on-night); line-height: 2; }
.x-speed__uses i { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--orange); margin: 0 .8em; vertical-align: middle; box-shadow: 0 0 12px 2px rgba(245, 154, 0, .6); }

/* ===================================================================== DEPTH OF INVOLVEMENT (pinned) */
.x-depth { height: 220vh; }
.x-depth__pin { position: sticky; top: 0; height: 100svh; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); grid-template-rows: auto 1fr; padding: 110px var(--pad) 40px; column-gap: 5vw; }
.x-depth__head { grid-column: 1; grid-row: 1; }
.x-depth__head .x-h2 { font-size: clamp(32px, 3.4vw, 56px); max-width: 16ch; }
.x-depth__steps { grid-column: 1; grid-row: 2; align-self: end; display: grid; gap: 4px; padding-bottom: 2vh; }
.x-depth__steps li { position: relative; padding: 9px 0; padding-inline-start: 22px; }
.x-depth__steps li::before { content: ""; position: absolute; inset-inline-start: 0; top: 22px; width: 9px; height: 9px; border-radius: 50%; background: var(--orange); transform: scale(0); transition: transform 400ms var(--ease); }
.x-depth__steps b { display: block; font-family: var(--lat); font-size: clamp(22px, 1.9vw, 28px); color: var(--muted); direction: ltr; text-align: right; transition: color 300ms ease; }
.x-depth__steps span { display: block; font-size: 17px; font-weight: 500; color: var(--muted); transition: color 300ms ease; }
.x-depth__steps p { margin-top: 2px; font-size: 16px; color: var(--muted); opacity: .75; transition: color 300ms ease, opacity 300ms ease; }   /* all three visible */
.x-depth__steps li.is-on::before { transform: scale(1); }
.x-depth__steps li.is-on b, .x-depth__steps li.is-on span { color: var(--ink); }
.x-depth__steps li.is-on p { color: var(--ink-2); opacity: 1; }
.x-depth__tabs { display: none; }
.x-depth__viz { grid-column: 2; grid-row: 1 / 3; align-self: center; justify-self: center; position: relative; width: min(100%, 72vh); aspect-ratio: 1; --r: .3; }
.x-depth__disc { position: absolute; left: 50%; top: 50%; width: calc(var(--r) * 100%); aspect-ratio: 1; border-radius: 50%; transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(245, 154, 0, .2) 0%, rgba(255, 190, 61, .1) 55%, rgba(255, 190, 61, 0) 72%);
  border: 1.5px solid rgba(226, 98, 27, .45); transition: width 1000ms var(--ease); }
.x-dot { position: absolute; left: calc(50% + var(--dx) * 47%); top: calc(50% + var(--dy) * 47%); transform: translate(-50%, -50%) scale(.6); opacity: 0;
  display: flex; flex-direction: column; align-items: center; gap: 8px; font-size: 15px; font-weight: 500; color: var(--ink-2); white-space: nowrap;
  transition: opacity 500ms var(--ease), transform 700ms var(--ease); }
.x-dot::before { content: ""; width: 12px; height: 12px; border-radius: 50%; background: var(--ink); }
.x-dot--me { opacity: 1; transform: translate(-50%, -50%); font-weight: 700; color: var(--ink); }
.x-dot--me::before { width: 22px; height: 22px; background: var(--orange); box-shadow: 0 0 0 8px rgba(245, 154, 0, .22), 0 0 34px 8px rgba(245, 154, 0, .4); }
.x-dot--cap { font-family: var(--lat); font-weight: 700; color: var(--ink); }
.x-dot--cap::before { background: var(--ember); }
.x-dot.is-in { opacity: 1; transform: translate(-50%, -50%); }
html:not(.motion) .x-depth { height: auto; }
html:not(.motion) .x-depth__pin { position: static; height: auto; }
html:not(.motion) .x-depth__steps p { color: var(--ink-2); opacity: 1; }

/* ===================================================================== OUTPUTS (a still, layered composition) */
.x-out { padding: 14vh var(--pad) 12vh; }
.x-out__head { margin-bottom: clamp(30px, 5vh, 56px); }
.x-streams { display: grid; gap: clamp(14px, 2.4vh, 26px); }
/* each output is a list item; its separator dot sits before it. The list starts one separator-width before the
   stream's edge and the stream clips that strip, so the dot of whichever item opens a line is never shown:
   dots appear only between two items on the same line, never alone at the start or end of a wrapped line. */
.x-stream { --gap: 1.36em; translate: var(--tx, 0px) 0; font-size: var(--sz); font-weight: 800; letter-spacing: -0.025em; line-height: 1.25; overflow-x: clip; }
.x-stream ul { display: flex; flex-wrap: wrap; row-gap: .2em; margin-inline-start: calc(-1 * var(--gap)); }
.x-stream li { display: flex; align-items: center; }
.x-stream li::before { content: ""; flex: none; width: .26em; height: .26em; border-radius: 50%; background: var(--orange); margin: 0 .55em; }
.x-stream--far { font-weight: 500; color: var(--ink-2); margin-inline-start: clamp(0px, 7vw, 120px); }
.x-stream--far li::before { background: var(--ice); }

/* ===================================================================== START SMALL (resolution dial) */
.x-dial { padding: 16vh var(--pad); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .9fr); gap: 6vw; align-items: center; }
.x-dial__set { margin-top: 44px; display: flex; gap: clamp(24px, 3vw, 52px); }
.x-dial__set button { position: relative; display: flex; align-items: baseline; gap: 10px; padding-bottom: 12px; font-size: 18px; color: var(--muted); transition: color 250ms ease; }
.x-dial__set b { font-family: var(--lat); font-size: clamp(46px, 4.6vw, 80px); font-weight: 800; letter-spacing: -0.04em; line-height: 1; }
.x-dial__set button::after { content: ""; position: absolute; inset-inline: 0; bottom: 0; height: 5px; border-radius: 3px; background: var(--orange); transform: scaleX(0); transform-origin: right; transition: transform 450ms var(--ease); }
.x-dial__set button[aria-checked="true"] { color: var(--ink); }
.x-dial__set button[aria-checked="true"]::after { transform: scaleX(1); }
@media (hover: hover) and (pointer: fine) { .x-dial__set button:hover { color: var(--ink); } }
.x-dial__desc { margin-top: 34px; min-height: 7.4em; }
.x-dial__desc h3 { font-size: clamp(24px, 2vw, 32px); font-weight: 800; letter-spacing: -0.02em; }
.x-dial__desc p { margin-top: 8px; font-size: 19px; color: var(--ink-2); max-width: 40ch; }
.x-dial__note { margin-top: 18px; font-size: 16px; color: var(--muted); max-width: 46ch; }
.x-dial__ask { margin-top: 30px; font-size: 19px; }
.x-dial__lens { position: relative; justify-self: center; width: min(100%, 520px); aspect-ratio: 1; border-radius: 50%; overflow: hidden;
  box-shadow: 0 0 0 1px rgba(226, 98, 27, .35), 0 0 0 14px rgba(245, 154, 0, .08), 0 50px 100px -40px rgba(226, 98, 27, .55); background: #fff; }
.x-dial__lens canvas { width: 100%; height: 100%; display: block; }
.x-dial__res { position: absolute; left: 50%; bottom: 9%; transform: translateX(-50%); font-family: var(--lat); font-size: 14px; font-weight: 700; letter-spacing: .02em; color: var(--ink); background: rgba(255, 255, 255, .85); padding: 4px 12px; border-radius: 999px; }

/* ===================================================================== CLIENTS */
/* one running strip, edge to edge, soft fade at both ends. The marks (imgs/clients-d) are cropped to the logo and already in one
   ink colour; --t is the strip's mark height, each mark multiplies it by its optical factor --k and never exceeds its --cap.
   Static (wrapped) without motion. */
.x-cli { padding: 6vh var(--pad) 12vh; }
.x-cli__k { font-size: 18px; font-weight: 700; }
.x-cli__run { --gap: 104px; --t: 64px; margin-top: 44px; }
.x-cli__track, .x-cli__set { display: flex; align-items: center; }
.x-cli__set { flex-wrap: wrap; justify-content: center; gap: 36px var(--gap); min-height: calc(var(--t) * 1.25); }
.x-cli__set img { display: block; flex: none; width: auto; height: min(calc(var(--t) * var(--k, 1)), var(--cap, 999px)); }
.x-cli.is-run .x-cli__run { direction: ltr; margin-inline: calc(-1 * var(--pad)); overflow: hidden;   /* the strip starts at the left edge and runs left */
 
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent); mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent); }
.x-cli.is-run .x-cli__track { direction: ltr; width: max-content; animation: x-cli-run var(--dur, 60s) linear infinite; animation-play-state: paused; }
.x-cli.is-run.is-vis .x-cli__track { animation-play-state: running; }
.x-cli.is-run .x-cli__set { flex-wrap: nowrap; gap: var(--gap); padding-inline-end: calc(var(--gap) + var(--seam, 0px)); }   /* the end padding keeps the gap across the seam */
@keyframes x-cli-run { to { transform: translateX(-50%); } }

/* ===================================================================== CLOSE */
.x-close { position: relative; min-height: 100svh; padding: 16vh var(--pad) 12vh; }
.x-close__core { position: absolute; left: 22vw; top: 50%; width: clamp(280px, 34vw, 600px); aspect-ratio: 1; border-radius: 50%; transform: translate(-50%, -50%);
  background: radial-gradient(circle at 36% 32%, #fff1cf 0%, #ffc04a 20%, var(--orange) 45%, var(--ember) 80%, #b9430f 100%);
  box-shadow: 0 0 200px 60px rgba(245, 154, 0, .25); }
.x-close__core i { position: absolute; inset: 7%; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .5); border-top-color: transparent; }
html.motion .x-close__core { animation: x-breathe 10s var(--ease-io) infinite alternate; }
.x-close__grid { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 560px); gap: 6vw; align-items: center; }
.x-close__title { font-size: clamp(48px, 6.4vw, 112px); line-height: .98; font-weight: 900; letter-spacing: -0.035em; }
.x-close__title span { display: block; }
.x-close__lead { margin-top: 26px; font-size: clamp(19px, 1.6vw, 24px); color: var(--ink-2); max-width: 30ch; }
.x-close__who { margin-top: 40px; display: flex; align-items: center; gap: 16px; }
.x-close__who img { width: 76px; height: 76px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 5px rgba(245, 154, 0, .25); }
.x-close__who p { display: flex; flex-direction: column; font-size: 15px; color: var(--ink-2); line-height: 1.45; }
.x-close__who b { font-size: 19px; color: var(--ink); }
.x-close__who a { align-self: flex-start; margin-top: 2px; text-decoration: none; color: var(--ink); font-family: var(--lat); font-weight: 600; }   /* RTL: the number starts under the name */
.x-close__opts { margin-top: 26px; display: flex; flex-wrap: wrap; gap: 10px 28px; font-size: 18px; font-weight: 600; }
.x-close__opts a { text-decoration: underline; text-decoration-color: var(--orange); text-decoration-thickness: 2px; text-underline-offset: 6px; }

/* the form floats over the core: the one translucent panel on the page, so the field shows through */
.x-panel { position: relative; padding: clamp(24px, 3vw, 40px); border-radius: 26px; background: rgba(255, 255, 255, .74);
  -webkit-backdrop-filter: blur(22px) saturate(1.4); backdrop-filter: blur(22px) saturate(1.4);
  box-shadow: 0 40px 90px -40px rgba(120, 55, 10, .45), inset 0 0 0 1px rgba(255, 255, 255, .8); scroll-margin-top: 90px; }
.x-panel__title { font-size: clamp(28px, 2.4vw, 36px); font-weight: 800; letter-spacing: -0.02em; }
.x-panel__title:focus { outline: none; }
.x-panel__sub { margin-top: 6px; font-size: 16px; color: var(--ink-2); }
.d-form { margin-top: 22px; }
.d-hp { position: absolute; inset-inline-start: -9999px; width: 1px; height: 1px; overflow: hidden; }
.d-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.d-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 14px; }
.d-field { display: grid; gap: 6px; }
.d-field--full { grid-column: 1 / -1; }
.d-field label { font-size: 15px; font-weight: 500; }
.d-req { color: var(--hot-text); }
.d-field input, .d-field textarea { width: 100%; font: 400 17px/1.4 var(--he); color: var(--ink); background: rgba(255, 255, 255, .9); border: 1px solid #e2dbd2; border-radius: 12px; padding: 13px 14px; transition: border-color 200ms ease, box-shadow 200ms ease; }
.d-field textarea { resize: vertical; min-height: 92px; }
.d-field input:focus, .d-field textarea:focus { outline: none; border-color: var(--orange); box-shadow: 0 0 0 4px rgba(245, 154, 0, .2); }
.d-field.is-invalid input, .d-field.is-invalid textarea { border-color: #b3261e; }
.d-err { font-size: 14px; color: #b3261e; }
.d-err:empty { display: none; }
.d-hint { font-size: 14px; color: var(--muted); margin-top: -4px; }
.d-check { margin-top: 16px; display: flex; gap: 10px; align-items: flex-start; font-size: 14px; color: var(--ink-2); cursor: pointer; }
.d-check__input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.d-check__box { flex: none; width: 22px; height: 22px; border-radius: 6px; border: 1.5px solid #cfc7bd; background: #fff; display: grid; place-items: center; transition: background-color 200ms ease, border-color 200ms ease; }
.d-check__box svg { width: 14px; height: 14px; fill: none; stroke: var(--ink); stroke-width: 2.4; opacity: 0; transition: opacity 150ms ease; }
.d-check__input:checked + .d-check__box { background: var(--orange); border-color: var(--orange); }
.d-check__input:checked + .d-check__box svg { opacity: 1; }
.d-check__input:focus-visible + .d-check__box { outline: 3px solid var(--orange); outline-offset: 2px; }
.d-form__foot { margin-top: 20px; display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.d-form__note { font-size: 14px; color: var(--muted); }
.d-alert[hidden] { display: none; }
.d-alert { margin-bottom: 14px; padding: 14px 16px; border-radius: 12px; background: #fff1e0; font-size: 15px; display: grid; gap: 2px; }
.d-spin { display: none; width: 18px; height: 18px; border-radius: 50%; border: 2px solid rgba(18, 18, 18, .25); border-top-color: var(--ink); }
.d-form.is-busy .d-spin { display: inline-block; animation: x-spin 800ms linear infinite; }
.d-submit[disabled] { opacity: .7; cursor: progress; }
.x-ok { margin-top: 22px; padding: 18px 20px; border-radius: 14px; background: #fff7ea; font-size: 17px; }
.x-ok:focus { outline: none; }

.x-foot { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; padding: 40px var(--pad) 48px; font-size: 14px; color: var(--muted); }
.x-foot img { height: 30px; width: auto; }

/* ===================================================================== TABLET AND MOBILE (≤ 1024px)
   Only the Hero keeps its (short) pin; every other section is in normal document flow. */
@media (max-width: 1024px) {
  .x-nav { display: none; }
  .x-head .x-btn { margin-inline-start: auto; }
  .x-net { left: 50%; top: 27%; width: 40vw; }
  .x-hero__copy { right: var(--pad); }
  .x-hero__copy { top: auto; bottom: 64px; transform: none; width: auto; left: var(--pad); }
  .x-hero__title { font-size: min(7.6vw, 66px); }
  .x-hero__facts { display: none; }
  .x-route__body, .x-orbit, .x-speed__body, .x-dial, .x-close__grid { grid-template-columns: 1fr; }

  /* section rhythm: a stable start and end, separation that follows the content */
  .x-route { padding: 120px var(--pad) 104px; }
  /* router: an accordion; each situation opens its answer directly below itself */
  .x-pick { grid-template-columns: minmax(0, 1fr); gap: 10px; max-width: 720px; }
  .x-pick .x-acc { display: grid; }
  .x-acc--desk { display: none; }
  .x-verbs, .x-out, .x-dial, .x-cli, .x-close { position: relative; }
  .x-verbs::before, .x-out::before, .x-dial::before, .x-cli::before, .x-close::before {
    content: ""; position: absolute; top: 0; inset-inline: var(--pad); height: 1px; background: rgba(18, 18, 18, .1); }

  /* five verbs. Without motion: five blocks. With motion (below): a shorter pinned sequence, one verb at a time */
  .x-verbs { height: auto; padding: 104px var(--pad) 112px; }
  .x-verbs__pin { position: static; height: auto; overflow: visible; display: block; padding: 0; }
  .x-verbs__title { font-size: clamp(32px, 5vw, 46px); line-height: 1.08; font-weight: 800; letter-spacing: -0.03em; max-width: 18ch; }
  .x-verbs__word { display: none; }
  .x-verbs__list { margin-top: 36px; gap: 0; }
  .x-verbs__list li { display: block; padding: 26px 0; border-top: 1px solid rgba(18, 18, 18, .1); }
  .x-verbs__list li::before { display: none; }
  .x-verbs__list b { grid-column: 1; font-size: clamp(40px, 6.4vw, 60px); line-height: 1.05; font-weight: 900; letter-spacing: -0.035em; color: var(--ink); }
  .x-verbs__list p { grid-column: 1; margin-top: 8px; font-size: 17px; color: var(--ink-2); opacity: 1; max-width: 40ch; }
  .x-verbs__aside { margin-top: 28px; }
  html.motion .x-verbs { height: 360vh; padding: 0; }   /* ~0.52 screen per verb */
  html.motion .x-verbs::before { display: none; }
  html.motion .x-verbs__pin { position: sticky; top: 0; height: 100svh; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto minmax(0, 1fr) auto auto; row-gap: 14px; padding: 92px var(--pad) 26px; }
  html.motion .x-verbs__pin > * { grid-column: 1; grid-row: auto; }
  html.motion .x-verbs__title { font-size: clamp(22px, 3.6vw, 32px); max-width: none; }
  html.motion .x-verbs__steps { display: flex; justify-content: space-between; gap: 6px; padding-top: 10px; border-top: 1px solid rgba(18, 18, 18, .12); font-size: clamp(13px, 2vw, 16px); font-weight: 500; color: var(--muted); }
  html.motion .x-verbs__steps li { position: relative; transition: color 300ms ease; }
  html.motion .x-verbs__steps li::before { content: ""; position: absolute; top: -12px; inset-inline: 0; height: 3px; border-radius: 2px; background: var(--orange); transform: scaleX(0); transform-origin: right; transition: transform 500ms var(--ease); }
  html.motion .x-verbs__steps li.is-past { color: var(--ink-2); }
  html.motion .x-verbs__steps li.is-on { color: var(--ink); font-weight: 700; }
  html.motion .x-verbs__steps li.is-on::before { transform: scaleX(1); }
  html.motion .x-verbs__word { display: block; align-self: center; justify-self: center; font-size: min(22vw, 19vh); }
  html.motion .x-verbs__list { margin-top: 0; display: grid; }
  html.motion .x-verbs__list li { grid-area: 1 / 1; padding: 0; border: 0; opacity: 0; transition: opacity 420ms var(--ease); }
  html.motion .x-verbs__list li.is-on { opacity: 1; }
  html.motion .x-verbs__list b { display: none; }
  html.motion .x-verbs__list p { margin: 0; font-size: clamp(18px, 2.6vw, 22px); line-height: 1.5; color: var(--ink-2); max-width: 36ch; }
  html.motion .x-verbs__aside { margin-top: 0; font-size: 14px; }

  .x-lens { padding: 96px var(--pad); }

  .x-orbit { padding: 112px var(--pad) 104px; gap: 48px; }
  .x-orbit__sys { grid-column: 1; grid-row: 1; width: min(100%, 520px); }
  .x-orbit__text { grid-row: 2; }

  .x-speed { padding: 112px 0 104px; }
  .x-speed__body { margin-top: 64px; }

  /* depth without motion, and on mobile: no pin, one diagram, a tap switch, all three descriptions below
     (on mobile the radius also grows as the diagram passes; on tablet with motion it is a short pin, below) */
  .x-depth { height: auto; padding: 104px var(--pad) 112px; }
  .x-depth__pin { position: static; height: auto; overflow: visible; display: grid; grid-template-columns: 1fr; grid-template-rows: none; padding: 0; }
  .x-depth__head, .x-depth__tabs, .x-depth__viz, .x-depth__steps { grid-column: 1; grid-row: auto; }
  .x-depth__tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 32px; }
  .x-depth__tabs button { font-family: var(--lat); font-weight: 600; font-size: 16px; height: 44px; padding: 0 18px; border-radius: 999px; box-shadow: inset 0 0 0 1.5px rgba(18, 18, 18, .18); color: var(--ink-2); transition: background-color 200ms ease, box-shadow 200ms ease, color 200ms ease; }
  .x-depth__tabs button[aria-pressed="true"] { background: var(--orange); box-shadow: none; color: var(--ink); }
  .x-depth__viz { margin-top: 20px; width: min(100%, 460px); }
  .x-depth__steps { align-self: auto; padding-bottom: 0; margin-top: 12px; }

  .x-out { padding: 104px var(--pad) 96px; }

  /* start small: the dial and its result directly below the 20/50/100 choice */
  .x-dial { padding: 112px var(--pad) 104px; row-gap: 0; }
  .x-dial__text { display: contents; }
  .x-dial h2 { order: 1; } .x-dial .x-sub { order: 2; } .x-dial__set { order: 3; }
  .x-dial__lens { order: 4; margin-top: 30px; width: min(100%, 300px); justify-self: start; }
  .x-dial__desc { order: 5; margin-top: 22px; min-height: 0; }
  .x-dial__note { order: 6; } .x-dial__ask { order: 7; }
  .x-dial__set { gap: 18px; }
  .x-dial__set b { font-size: 44px; }
  .x-dial__set button { font-size: 16px; gap: 6px; }

  .x-cli { padding: 88px var(--pad) 96px; }
  .x-close { padding: 112px var(--pad) 96px; }
  .x-close__core { left: 50%; top: 74%; width: 90vw; opacity: .9; }
  .d-fields { grid-template-columns: 1fr; }
}

/* ===================================================================== TABLET (701–1024px) with motion: involvement is a short pin */
@media (min-width: 701px) and (max-width: 1024px) {
  .x-cli__run { --gap: 84px; --t: 56px; }
  html.motion .x-depth { height: 190vh; padding: 0; }
  html.motion .x-depth__pin { position: sticky; top: 0; height: 100svh; overflow: hidden; align-content: start; padding: 92px var(--pad) 24px; }
  html.motion .x-depth__tabs { display: none; }
  html.motion .x-depth__viz { margin-top: 10px; width: min(100%, 34vh); justify-self: center; }
  html.motion .x-depth__steps { margin-top: 4px; }
  html.motion .x-depth__steps li { padding-block: 6px; }
}

/* ===================================================================== MOBILE (≤ 700px)
   Shorter, simpler sequences, one primary movement at a time: the Hero converges as the page starts to scroll
   (no pin), the five verbs are a short pin, the radius grows as it passes. */
@media (max-width: 700px) {
  /* hero: 1. the positioning first, in the normal flow under the header: H1, lead, buttons */
  .x-hero-intro { display: block; padding: 92px var(--pad) 8px; }
  /* 2. then a short band for the network (no pin, no text): it rides on into the router's top */
  .x-hero__stage { height: 30svh; min-height: 180px; overflow: visible; }
  .x-net { left: 50%; top: 50%; width: 60vw; }
  .x-hero__copy { position: static; inset: auto; transform: none; width: auto; padding-top: 0; }
  .x-hero__title { font-size: 9vw; line-height: 1.08; }
  .x-hero__lead { margin-top: 22px; font-size: 18px; }
  .x-hero__acts { margin-top: 28px; gap: 22px; }

  .x-route { padding: 96px var(--pad) 88px; }
  .x-route__body { margin-top: 28px; }
  .x-pick button { min-height: 62px; padding: 14px 16px; font-size: 17.5px; }
  .x-map__in { padding: 20px 18px 22px; }
  .x-map__first { font-size: 18.5px; }
  .x-map__list { font-size: 16.5px; }
  .x-route__more { margin-top: 28px; font-size: 18px; }

  .x-verbs { padding: 88px var(--pad) 96px; }
  .x-verbs__list { margin-top: 24px; }
  .x-verbs__list li { display: block; padding: 24px 0 22px; }
  .x-verbs__list b { font-size: 44px; }
  .x-verbs__list p { font-size: 17px; }
  html.motion .x-verbs { height: 360vh; padding: 0; }
  html.motion .x-verbs__pin { position: absolute; top: 0; left: 0; right: 0; padding: 84px var(--pad) 22px; row-gap: 12px; }

  /* MOBILE PIN (five verbs): fixed-on-scroll instead of position: sticky, which shakes in iOS Safari.
     The section stays in the document flow and gives the scroll distance (its height is captured in px by the script).
     Before the sequence the stage sits at the top of the section, during it the stage is fixed to the viewport, after it the
     stage sits at the bottom of the section: the three positions meet exactly at the switch points. The stage keeps 100svh
     (the smallest viewport height), so the toolbar showing or hiding never resizes or moves it. */
  html.motion .x-pinfx { position: relative; }
  html.motion .x-pinfx.is-fixed > .x-verbs__pin { position: fixed; top: 0; }
  html.motion .x-pinfx.is-after > .x-verbs__pin { top: auto; bottom: 0; }
  html.motion .x-verbs__list li { padding: 0; }
  html.motion .x-verbs__list p { font-size: 19px; }

  .x-lens { padding: 80px var(--pad); }
  .x-lens__big { font-size: 32px; }

  .x-orbit { padding: 96px var(--pad); gap: 36px; }
  .x-orbit__sys { width: min(100%, 400px); --R: 40%; }
  .x-orbit__spin span { font-size: 13px; padding: 6px 11px; }
  .x-orbit__label { font-size: 13.5px; }
  .x-orbit__cap { font-size: 15px; }
  .x-orbit__name { font-size: 15px !important; line-height: 1.45; }
  .x-orbit__name b { display: block; margin: 0 0 2px; }   /* the name on its own line, the title below it */
  .x-close__who p { font-size: 14.5px; }
  /* the three ways to reach us: one aligned column under Reely (no ragged 2 + 1 wrap) */
  .x-close__who { margin-top: 32px; }
  .x-close__opts { flex-direction: column; align-items: flex-start; gap: 14px; margin-top: 24px; padding-top: 22px; border-top: 1px solid rgba(18, 18, 18, .1); font-size: 17px; }
  html.motion .x-orbit__spin { animation-duration: 220s; }

  .x-speed { padding: 96px 0; }
  .x-speed__lines { font-size: 11.6vw; }
  .x-run:nth-child(2) { padding-inline-start: calc(var(--pad) + 6vw); }
  .x-speed__body { margin-top: 44px; gap: 28px; }
  .x-speed__uses { line-height: 1.9; }

  .x-depth { padding: 88px var(--pad) 96px; }
  .x-depth__viz { width: min(100%, 360px); justify-self: center; }
  .x-dot { font-size: 13px; }
  .x-depth__steps b { font-size: 22px; }

  .x-out { padding: 88px var(--pad) 80px; }
  .x-stream--far { margin-inline-start: 0; }

  .x-dial { padding: 96px var(--pad) 88px; }
  .x-dial__lens { width: min(100%, 220px); margin-top: 26px; }

  .x-cli { padding: 80px var(--pad) 88px; }
  .x-cli__run { --gap: 44px; --t: 48px; margin-top: 36px; }
  .x-cli:not(.is-run) .x-cli__run { --gap: 32px; --t: 30px; }   /* the static arrangement (reduced motion) stays compact */
  .x-cli:not(.is-run) .x-cli__set { row-gap: 22px; }

  .x-close { padding: 104px var(--pad) 88px; }
}

/* ---------- start small on very narrow phones (about 320-420px): the 20/50/100 row scales with the screen and never widens the section */
@media (max-width: 420px) {
  .x-dial { grid-template-columns: minmax(0, 1fr); }
  .x-dial__set { gap: 8px clamp(10px, 3.4vw, 18px); flex-wrap: wrap; }
  .x-dial__set b { font-size: clamp(32px, 10.4vw, 44px); }
  .x-dial__set button { font-size: clamp(14px, 4.1vw, 16px); gap: 5px; min-height: 48px; }
}