/* Vendoo — marketing site.
 *
 * The tokens are the app's, copied from packages/vendoo_ui/lib/design/tokens
 * and typography, so the site and the product are recognisably one thing: the
 * same amber on the same cool graphite, the same face.
 *
 * The page is white, and everything on it sits in soft grey panels with large
 * radii. Amber is kept for the few things that should catch the eye: the
 * pings on the map, the best price, the second half of the tagline.
 *
 * Sizes keep to one scale (12 14 16 18 20 24 30 36 48 60 72, each with its
 * own line height) and spacing to one ladder (2 4 8 12 16 24 32 40 48 64 80
 * 96). Motion has one curve, `--ease`, heavy at the start and soft at the end.
 *
 * Everything here is direction-agnostic — inline-start/end rather than
 * left/right — because Arabic is one of the three languages and the whole page
 * mirrors, not just the text. The map does not: geography has no direction.
 */

:root {
  --ink: #12171c;
  --ink-2: #2c343d;
  --muted: #5b6672;
  --soft: #7a8591;
  --faint: #8b96a3;
  --line: #e6e9ed;
  --panel: #f4f6f8;
  --canvas: #f1f4f7;
  --surface: #ffffff;
  --accent: #d96600;
  --accent-deep: #a34d00;
  --accent-soft: #fff1e4;
  --green: #12805c;
  --green-soft: #e3f3ec;
  --green-deep: #0d6b4b;
  --dots: #cdd4db;

  --radius-card: 16px;
  --radius-tile: 12px;
  --radius-chip: 999px;
  --radius-panel: 32px;

  --shadow-card: 0 1px 2px rgba(18, 23, 28, 0.06), 0 12px 32px -12px rgba(18, 23, 28, 0.16);

  --ease: cubic-bezier(0.32, 0.72, 0, 1);
  --pad: 24px;
  --measure: 1200px;
}

@media (min-width: 768px) {
  :root { --pad: 40px; }
}

@font-face {
  font-family: 'UberMove';
  src: url('../assets/fonts/UberMoveMedium.otf') format('opentype');
  font-weight: 500;
  font-display: swap;
}

@font-face {
  font-family: 'UberMove';
  src: url('../assets/fonts/UberMoveBold.otf') format('opentype');
  font-weight: 700;
  font-display: swap;
}

/* ── base ───────────────────────────────────────────────────────────── */

*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: 96px;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--surface);
  color: var(--ink);
  /* The brand face carries no Arabic, so the Arabic page falls through to the
   * system's own — which is correct and legible, and far better than forcing
   * a Latin face to render script it does not have. */
  font-family: 'UberMove', -apple-system, BlinkMacSystemFont, 'Segoe UI',
    system-ui, 'Noto Sans Arabic', sans-serif;
  font-weight: 500;
  font-size: 16px;
  line-height: 24px;
  -webkit-font-smoothing: antialiased;
}

img, video { display: block; max-width: 100%; }

h1, h2, h3 {
  margin: 0;
  font-weight: 700;
  letter-spacing: -0.025em;
  text-wrap: balance;
}

p { margin: 0; text-wrap: pretty; }

a { color: inherit; }

/* Arabic joins its letters; tracking pulls them apart. */
:lang(ar) h1, :lang(ar) h2, :lang(ar) h3, :lang(ar) .tagline-text,
:lang(ar) .menu-links a { letter-spacing: 0; }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 4px;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.i {
  display: inline-block;
  flex: none;
  width: 1em;
  height: 1em;
  fill: currentColor;
  vertical-align: -0.125em;
}

/* Arrows point the way the text reads. */
[dir='rtl'] .i.flip { transform: scaleX(-1); }

.wrap {
  max-width: var(--measure);
  margin-inline: auto;
  padding-inline: var(--pad);
}

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

.skip:focus-visible { transform: none; }

/* A marker at the very top: once it scrolls out, the island firms up. */
.top-marker {
  position: absolute;
  top: 0;
  width: 1px;
  height: 24px;
  pointer-events: none;
}

/* ── the wordmark ───────────────────────────────────────────────────── */

/* One word, so nothing may break between the mark and the tail — and always
   left to right. The name is set in latin and the mark is its V, so on the
   Arabic pages the row would otherwise reverse and the logo would read
   ".endoo V": the initial after the word it begins. */
.brand,
.foot-brand {
  white-space: nowrap;
  direction: ltr;
}

.brand,
.foot-brand {
  display: inline-flex;
  align-items: baseline;
  font-weight: 700;
  letter-spacing: -0.03em;
  text-decoration: none;
  color: var(--ink);
}

.brand { font-size: 20px; line-height: 28px; }

/* The lockup: the artwork is the V, and .tail finishes the word.
   Sized from the type rather than fixed in pixels, so the mark tracks the
   font at every breakpoint. The V's foot has to land on the baseline the
   letters stand on: the artwork carries a 4% margin below it, so the nudge
   is the face's descent less that margin — the same two measurements the
   app's lockup uses. */
.brand .mark,
.foot-brand .mark {
  width: 1.28em;
  height: 1.28em;
  vertical-align: baseline;
  margin-bottom: -0.16em;
}

.brand .tail,
.foot-brand .tail { margin-inline-start: 0.04em; }

/* The mark comes as WebP where it can; the <picture> around it must not add
   a box of its own, or the V's baseline nudge measures against the wrong
   thing. */
.mark-pic { display: contents; }

/* ── buttons and badges ─────────────────────────────────────────────── */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 40px;
  padding: 8px 16px;
  border: 0;
  border-radius: var(--radius-chip);
  font: inherit;
  font-size: 16px;
  line-height: 24px;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.7s var(--ease), background-color 0.7s var(--ease);
}

.btn:hover { transform: translateY(-1px); }
.btn:active { transform: scale(0.98); }
.btn-ink { background: var(--ink); color: #fff; }
.btn-ink:hover { background: #000; }
.btn-sm { font-size: 14px; line-height: 20px; }

.badges {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}

.badge {
  display: block;
  border-radius: 8px;
  transition: transform 0.7s var(--ease);
}

.badge img { width: auto; height: 48px; }
.badges-md .badge img { height: 44px; }
.badges-sm .badge img { height: 40px; }
.badge:hover { transform: translateY(-2px); }
.badge:active { transform: scale(0.98); }

/* The store this phone can use comes first. */
.ios .badge-apple,
.android .badge-play { order: -1; }

.app-icon { display: block; flex: none; }
.app-icon img { width: 100%; height: 100%; border-radius: 22%; }

/* ── the island ─────────────────────────────────────────────────────── */

.island {
  position: fixed;
  top: 16px;
  inset-inline: 16px;
  z-index: 50;
  display: flex;
  justify-content: center;
  pointer-events: none;
}

.island-bar {
  pointer-events: auto;
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 8px;
  padding-inline-start: 16px;
  border-radius: var(--radius-chip);
  background: rgba(255, 255, 255, 0.78);
  -webkit-backdrop-filter: saturate(1.8) blur(20px);
  backdrop-filter: saturate(1.8) blur(20px);
  box-shadow: 0 0 0 1px rgba(18, 23, 28, 0.06), 0 8px 24px -12px rgba(18, 23, 28, 0.16);
  transition: background-color 0.7s var(--ease), box-shadow 0.7s var(--ease);
}

.island.scrolled .island-bar {
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 0 0 1px rgba(18, 23, 28, 0.08), 0 12px 32px -12px rgba(18, 23, 28, 0.24);
}

/* Physical sides on purpose: the wordmark is pinned left to right, so a
   logical margin on it would resolve against its own direction, not the
   page's, and on the Arabic pages push it into the middle of the bar. */
.island .brand { margin-right: auto; }
[dir='rtl'] .island .brand { margin-right: 0; margin-left: auto; }

.island-links {
  display: none;
  gap: 2px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.island-links a {
  display: block;
  padding: 8px 12px;
  border-radius: var(--radius-chip);
  font-size: 14px;
  line-height: 20px;
  color: var(--muted);
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.7s var(--ease), background-color 0.7s var(--ease);
}

.island-links a:hover { color: var(--ink); background: rgba(18, 23, 28, 0.05); }
.island-links a[aria-current] { color: var(--ink); background: rgba(18, 23, 28, 0.06); }

.langs {
  display: none;
  gap: 2px;
  padding: 2px;
  border-radius: var(--radius-chip);
  background: rgba(18, 23, 28, 0.05);
}

.langs a {
  display: grid;
  place-items: center;
  min-width: 32px;
  height: 32px;
  padding-inline: 8px;
  border-radius: var(--radius-chip);
  font-size: 12px;
  line-height: 16px;
  font-weight: 700;
  color: var(--muted);
  text-decoration: none;
  transition: color 0.7s var(--ease), background-color 0.7s var(--ease);
}

.langs a:hover { color: var(--ink); }

.langs a[aria-current='true'] {
  background: var(--surface);
  color: var(--ink);
  box-shadow: 0 1px 2px rgba(18, 23, 28, 0.14);
}

/* Two lines that fold into a cross: they rotate about the centre, never
   vanish. */
.burger {
  position: relative;
  flex: none;
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: var(--radius-chip);
  background: rgba(18, 23, 28, 0.05);
  color: var(--ink);
  cursor: pointer;
  transition: background-color 0.7s var(--ease), transform 0.7s var(--ease);
}

.burger:hover { background: rgba(18, 23, 28, 0.09); }
.burger:active { transform: scale(0.96); }

.burger span {
  position: absolute;
  top: 19px;
  left: 12px;
  width: 16px;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  transition: transform 0.7s var(--ease);
}

.burger span:first-child { transform: translateY(-3px); }
.burger span:last-child { transform: translateY(3px); }
.menu-open .burger span:first-child { transform: rotate(45deg); }
.menu-open .burger span:last-child { transform: rotate(-45deg); }

/* Without the script there is no menu to open; the sections are all on the
   page anyway. */
html:not(.js) .burger { display: none; }

@media (min-width: 1024px) {
  .island { top: 24px; }
  .island-bar { width: max-content; }
  .island-links, .island .langs { display: flex; }
  .burger { display: none; }
}

/* The menu: a pane of frosted glass over the page, the links rising into
   place one after another. */
.menu {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: flex;
  flex-direction: column;
  padding: 96px var(--pad) 32px;
  overflow-y: auto;
  background: rgba(255, 255, 255, 0.8);
  -webkit-backdrop-filter: blur(64px) saturate(1.4);
  backdrop-filter: blur(64px) saturate(1.4);
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.7s var(--ease), visibility 0s linear 0.7s;
}

.menu-open { overflow: hidden; }

.menu-open .menu {
  visibility: visible;
  opacity: 1;
  transition: opacity 0.7s var(--ease), visibility 0s;
}

.menu-links { list-style: none; margin: 0; padding: 0; }
.menu-links li { overflow: hidden; }

.menu-links a {
  display: block;
  padding-block: 8px;
  font-size: 36px;
  line-height: 40px;
  font-weight: 700;
  letter-spacing: -0.025em;
  color: var(--ink);
  text-decoration: none;
  opacity: 0;
  transform: translateY(48px);
  transition: transform 0.8s var(--ease), opacity 0.8s var(--ease), color 0.7s var(--ease);
}

.menu-links a:hover { color: var(--accent-deep); }

.menu-open .menu-links a {
  opacity: 1;
  transform: none;
  transition-delay: calc(100ms + var(--i) * 50ms);
}

:lang(ar) .menu-links a { line-height: 48px; }

.menu-foot {
  display: grid;
  gap: 24px;
  margin-top: auto;
  padding-top: 40px;
  opacity: 0;
  transform: translateY(24px);
  transition: transform 0.8s var(--ease), opacity 0.8s var(--ease);
}

.menu-open .menu-foot { opacity: 1; transform: none; transition-delay: 400ms; }
.menu .langs { display: flex; justify-self: start; }
.langs-lg a { min-width: 48px; height: 40px; font-size: 14px; line-height: 20px; }

@media (min-width: 1024px) {
  .menu { display: none; }
}

/* ── shared parts ───────────────────────────────────────────────────── */

.section { padding-block: 64px; }

@media (min-width: 1024px) {
  .section { padding-block: 96px; }
}

.eyebrow {
  margin-bottom: 12px;
  font-size: 14px;
  line-height: 20px;
  font-weight: 700;
  color: var(--accent-deep);
}

h2 { font-size: 30px; line-height: 36px; }

.head { max-width: 680px; margin-bottom: 48px; }
.head.center { margin-inline: auto; text-align: center; }

.sub,
.lead {
  margin-top: 16px;
  font-size: 18px;
  line-height: 28px;
  color: var(--muted);
}

.soft { color: var(--soft); }
.accent { color: var(--accent); }

@media (min-width: 768px) {
  h2 { font-size: 36px; line-height: 40px; }
  .head { margin-bottom: 64px; }
}

@media (min-width: 1280px) {
  h2 { font-size: 48px; line-height: 48px; }
}

:lang(ar) h2 { line-height: 1.3; }

.rating {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  font-weight: 700;
  color: var(--ink-2);
}

.rating .i { width: 12px; height: 12px; color: #e8a200; }
.rating span { font-weight: 500; color: var(--muted); }

/* The phone: a thin bezel around one of the app's own screens. */
.phone {
  position: relative;
  padding: 8px;
  border-radius: 32px;
  background: #0a0d10;
  box-shadow: 0 32px 64px -24px rgba(18, 23, 28, 0.35);
}

.screen {
  position: relative;
  overflow: hidden;
  border-radius: 24px;
  background: var(--canvas);
}

.screen img { width: 100%; height: auto; }

/* The dotted map. One drawing, coloured here: it is a mask, so the page
   decides what colour the country is. */
.map {
  position: absolute;
  inset: 0;
  background: var(--dots);
  -webkit-mask: url('../assets/map/algeria.svg') center / contain no-repeat;
  mask: url('../assets/map/algeria.svg') center / contain no-repeat;
}

/* ── reveals ────────────────────────────────────────────────────────── */

/* Nothing is held back until the script is there to bring it in. */
.js [data-reveal] {
  transition: opacity 0.9s var(--ease), transform 0.9s var(--ease), filter 0.9s var(--ease);
  transition-delay: var(--d, 0ms);
}

.js [data-reveal]:not(.in) {
  opacity: 0;
  transform: translateY(64px);
  filter: blur(12px);
}

/* The hero is on screen from the start, so it rises in on load instead. */
.rise {
  animation: rise 1s var(--ease) both;
  animation-delay: var(--d, 0ms);
}

@keyframes rise {
  from { opacity: 0; transform: translateY(32px); filter: blur(8px); }
}

/* The headline and the demo are what the page is first judged by, and a
   browser does not count anything it painted fully transparent. They rise
   and sharpen instead of fading in from nothing. */
.rise-solid {
  animation: rise-solid 1.1s var(--ease) both;
  animation-delay: var(--d, 0ms);
}

@keyframes rise-solid {
  from { transform: translateY(32px); filter: blur(12px); }
}

/* ── hero ───────────────────────────────────────────────────────────── */

.hero { padding-block: 112px 64px; }

.hero-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 24px;
  padding: 4px 12px;
  padding-inline-start: 8px;
  border-radius: var(--radius-chip);
  background: var(--panel);
  font-size: 14px;
  line-height: 20px;
  font-weight: 700;
  color: var(--ink-2);
  text-decoration: none;
  transition: background-color 0.7s var(--ease);
}

.kicker:hover { background: #eaedf0; }
.kicker .i { width: 14px; height: 14px; color: var(--muted); }

/* A live light: the app is out, on both stores. */
.live {
  position: relative;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: rgba(18, 128, 92, 0.16);
}

.live::after {
  content: '';
  position: absolute;
  inset: 4px;
  border-radius: 50%;
  background: var(--green);
  animation: pulse 2.4s var(--ease) infinite;
}

@keyframes pulse {
  0% { box-shadow: 0 0 0 0 rgba(18, 128, 92, 0.5); }
  70%, 100% { box-shadow: 0 0 0 8px rgba(18, 128, 92, 0); }
}

.hero h1 {
  max-width: 680px;
  font-size: 36px;
  line-height: 40px;
}

.hero h1 span { display: block; }
:lang(ar) .hero h1 { line-height: 1.3; }

.hero .lead { max-width: 560px; margin-top: 24px; }
.hero .badges { justify-content: center; margin-top: 32px; }

.note {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 16px;
  font-size: 14px;
  line-height: 20px;
  color: var(--muted);
}

.note .i { width: 16px; height: 16px; color: var(--green); }

@media (min-width: 640px) {
  .hero h1 { font-size: 48px; line-height: 48px; }
}

@media (min-width: 1024px) {
  .hero { padding-block: 128px 96px; }
  .hero h1 { font-size: 60px; line-height: 60px; }
}

@media (min-width: 1280px) {
  .hero h1 { font-size: 72px; line-height: 72px; }
}

/* ── the demo: a request going out, offers coming back ──────────────── */

.stage {
  position: relative;
  display: grid;
  margin-top: 48px;
  overflow: hidden;
  border-radius: var(--radius-panel);
  background: var(--panel);
}

.stage-map {
  position: relative;
  width: min(100%, 520px);
  aspect-ratio: 1;
  justify-self: center;
  margin-top: 16px;
}

.map-layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.ripple {
  fill: none;
  stroke: var(--accent);
  stroke-width: 1.5;
  vector-effect: non-scaling-stroke;
  opacity: 0;
  transform: scale(0);
  transform-box: fill-box;
  transform-origin: center;
}

.sent .ripple { animation: ripple 1.6s cubic-bezier(0.2, 0.6, 0.2, 1) forwards; }

@keyframes ripple {
  0% { transform: scale(0.02); opacity: 0.8; }
  100% { transform: scale(1); opacity: 0; }
}

.ping-dot,
.ping-halo,
.home-halo {
  fill: var(--accent);
  transform-box: fill-box;
  transform-origin: center;
}

.ping-dot { transform: scale(0); transition: transform 0.5s var(--ease); }
.sent .ping-dot { transform: scale(1); transition-delay: var(--delay); }
.ping-halo { opacity: 0; }
.sent .ping-halo { animation: halo 1.6s ease-out var(--delay) forwards; }

@keyframes halo {
  0% { transform: scale(0.4); opacity: 0.3; }
  100% { transform: scale(2.2); opacity: 0; }
}

/* Where the request was posted. */
.home-dot { fill: var(--ink); stroke: #fff; stroke-width: 3; }
.home-halo { fill: var(--ink); opacity: 0.12; }

.stage-ui {
  position: relative;
  z-index: 1;
  margin-top: -120px;
  padding: 0 16px 16px;
}

.req {
  padding: 16px;
  border-radius: 24px;
  background: var(--surface);
  box-shadow: var(--shadow-card);
}

.req-top { display: flex; align-items: center; gap: 12px; }

.req-photo {
  flex: none;
  width: 56px;
  height: 56px;
  border-radius: 12px;
  object-fit: cover;
  box-shadow: 0 0 0 1px var(--line);
}

.req-main { display: grid; min-width: 0; }
.req-part { font-weight: 700; }

.req-car {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  font-size: 14px;
  line-height: 20px;
  color: var(--muted);
}

.req-car { column-gap: 8px; }
.req-place { display: inline-flex; align-items: center; gap: 2px; white-space: nowrap; }
.req-car .i { width: 14px; height: 14px; }

.req-live {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex: none;
  align-self: flex-start;
  margin-inline-start: auto;
  padding: 4px 8px;
  border-radius: var(--radius-chip);
  background: var(--green-soft);
  font-size: 12px;
  line-height: 16px;
  font-weight: 700;
  color: var(--green-deep);
}

.req-live span { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }

.req-chips { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 12px; }

.req-chips span,
.offer-tags span:not(.rating) {
  padding: 2px 8px;
  border-radius: var(--radius-chip);
  background: var(--panel);
  font-size: 12px;
  line-height: 16px;
  color: var(--ink-2);
}

.req-status {
  display: grid;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
  font-size: 14px;
  line-height: 20px;
  color: var(--muted);
}

.st {
  grid-area: 1 / 1;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: opacity 0.5s var(--ease);
}

.st .i { width: 16px; height: 16px; color: var(--green); }
.st-sent { opacity: 0; }
.sent .st-sending { opacity: 0; }
.sent .st-sent { opacity: 1; }

.spinner {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 2px solid var(--line);
  border-top-color: var(--accent);
  animation: spin 0.9s linear infinite;
}

@keyframes spin { to { transform: rotate(360deg); } }

.offers-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 24px 4px 12px;
  font-size: 14px;
  line-height: 20px;
  font-weight: 700;
}

.offers-count {
  display: grid;
  place-items: center;
  min-width: 24px;
  height: 24px;
  padding-inline: 8px;
  border-radius: var(--radius-chip);
  background: var(--ink);
  color: #fff;
  font-size: 12px;
  line-height: 16px;
}

.offers {
  display: grid;
  gap: 8px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.offer {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border-radius: 16px;
  background: var(--surface);
  box-shadow: 0 1px 2px rgba(18, 23, 28, 0.06);
  transition: opacity 0.6s var(--ease), transform 0.6s var(--ease), box-shadow 0.6s var(--ease);
}

/* With the script, the offers wait for the request to go out. */
.js .offer:not(.in) { opacity: 0; transform: translateY(16px) scale(0.98); }
.fade .offer { opacity: 0; transition-duration: 0.5s; }

.avatar {
  display: grid;
  place-items: center;
  flex: none;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--ink);
  color: #fff;
  font-size: 12px;
  line-height: 16px;
  font-weight: 700;
}

.offer-main { display: grid; gap: 4px; min-width: 0; }

.offer-name {
  overflow: hidden;
  font-size: 14px;
  line-height: 20px;
  font-weight: 700;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.offer-tags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  line-height: 16px;
}

.offer-tags .rating { margin-inline-end: 4px; }

.offer-price {
  display: grid;
  justify-items: end;
  margin-inline-start: auto;
  font-weight: 700;
  white-space: nowrap;
}

.offer-price small { font-size: 12px; color: var(--muted); }

.best-tag {
  font-size: 12px;
  line-height: 16px;
  color: var(--green);
  opacity: 0;
  transition: opacity 0.6s var(--ease);
}

.best .is-best { box-shadow: 0 0 0 2px var(--green), 0 12px 24px -12px rgba(18, 128, 92, 0.45); }
.best .is-best .best-tag { opacity: 1; }

/* No script: the demo is simply its last frame. */
html:not(.js) .ping-dot { transform: scale(1); }
html:not(.js) .st-sending { opacity: 0; }
html:not(.js) .st-sent { opacity: 1; }
html:not(.js) .is-best .best-tag { opacity: 1; }
html:not(.js) .is-best { box-shadow: 0 0 0 2px var(--green); }

@media (min-width: 900px) {
  .stage {
    grid-template-columns: 480px minmax(0, 1fr);
    align-items: center;
    min-height: 640px;
  }

  .stage-ui { order: -1; margin: 0; padding: 48px; }
  .stage-map { width: min(100%, 620px); margin: 8px 16px; }
}

/* ── the tagline ────────────────────────────────────────────────────── */

.tagline { padding-block: 96px; }

.tagline-text {
  max-width: 880px;
  margin-inline: auto;
  font-size: 30px;
  line-height: 36px;
  font-weight: 700;
  letter-spacing: -0.025em;
  text-align: center;
  text-wrap: balance;
}

.tagline-text .line { display: block; }

/* Each word waits in a faint grey and takes its colour as the line passes
   up the screen. */
.js .tagline .w {
  color: rgba(18, 23, 28, 0.25);
  transition: color 0.7s var(--ease);
}

.js .tagline .w.on { color: var(--ink); }
.js .tagline .accent .w.on { color: var(--accent); }

@media (min-width: 768px) {
  .tagline { padding-block: 128px; }
  .tagline-text { font-size: 48px; line-height: 48px; }
}

@media (min-width: 1280px) {
  .tagline-text { font-size: 60px; line-height: 60px; }
}

:lang(ar) .tagline-text { line-height: 1.35; }

/* ── how it works ───────────────────────────────────────────────────── */

.steps {
  display: grid;
  gap: 16px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.step {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 32px 32px 0;
  border-radius: var(--radius-panel);
  background: var(--panel);
}

.step-n {
  display: inline-grid;
  place-items: center;
  width: 32px;
  height: 32px;
  margin-bottom: 24px;
  border-radius: 50%;
  background: var(--surface);
  font-size: 12px;
  line-height: 16px;
  font-weight: 700;
  box-shadow: 0 1px 2px rgba(18, 23, 28, 0.08);
}

.step h3 { font-size: 24px; line-height: 32px; }
.step p { margin-top: 8px; color: var(--muted); }

/* The phone rises out of the bottom of the card; hovering lifts it more. */
.step-shot {
  display: flex;
  justify-content: center;
  height: 320px;
  margin-top: 40px;
}

.step-shot .phone {
  width: 248px;
  height: max-content;
  transform: translateY(8px);
  transition: transform 0.8s var(--ease);
}

.step:hover .step-shot .phone { transform: translateY(-8px); }

@media (min-width: 900px) {
  .steps { grid-template-columns: repeat(3, 1fr); }
  .step-shot { height: 360px; }
}

/* ── contrôle technique: four tiles ─────────────────────────────────── */

.bento { display: grid; gap: 16px; }

.tile {
  display: flex;
  flex-direction: column;
  gap: 32px;
  overflow: hidden;
  padding: 32px;
  border-radius: var(--radius-panel);
  background: var(--panel);
}

.tile h3 { font-size: 20px; line-height: 28px; }
.tile-copy p { margin-top: 4px; color: var(--muted); }
.tile > :last-child { margin-top: auto; }

@media (min-width: 900px) {
  .bento { grid-template-columns: repeat(3, 1fr); }
  .tile { min-height: 360px; }

  .tile-wide {
    grid-column: span 2;
    display: grid;
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1fr);
    align-items: center;
  }

  .tile-wide > :last-child { margin-top: 0; }
}

/* The countdown: the ring drains from a full year to the days that are
   left, and the number counts down with it. */
.count-card {
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 24px;
  border-radius: 24px;
  background: var(--surface);
  box-shadow: var(--shadow-card);
}

.ring-wrap { position: relative; flex: none; width: 112px; height: 112px; }
.ring { width: 100%; height: 100%; rotate: -90deg; }
.ring circle { fill: none; stroke-width: 10; }
.ring-track { stroke: var(--panel); }

.ring-bar {
  stroke: var(--accent);
  stroke-linecap: round;
  stroke-dasharray: 100;
  stroke-dashoffset: 89;
}

.js .tile-count .ring-bar { transition: stroke-dashoffset 1.8s var(--ease); }
.js .tile-count:not(.play) .ring-bar { stroke-dashoffset: 0; }

.ring-num {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  text-align: center;
}

.ring-num strong {
  font-size: 30px;
  line-height: 36px;
  letter-spacing: -0.025em;
  font-variant-numeric: tabular-nums;
}

.ring-num span { font-size: 12px; line-height: 16px; color: var(--muted); }

.count-info { display: grid; gap: 2px; min-width: 0; }
.count-label { font-size: 12px; line-height: 16px; font-weight: 700; color: var(--accent-deep); }
.count-car { font-size: 18px; line-height: 28px; font-weight: 700; }
.count-meta { font-size: 14px; line-height: 20px; color: var(--muted); }

/* An Algerian plate: three groups, each in its own box. */
.plate {
  display: inline-flex;
  justify-self: start;
  margin-top: 8px;
  border: 2px solid var(--ink);
  border-radius: 6px;
  font-size: 12px;
  line-height: 16px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.plate span { padding: 2px 8px; }
.plate span + span { box-shadow: inset 2px 0 0 var(--ink); }

/* The reminder: a lock screen, and the notification sliding onto it. */
.lock {
  display: grid;
  justify-items: center;
  gap: 16px;
  padding: 24px 16px;
  border-radius: 24px;
  background: var(--ink);
}

.lock-time {
  font-size: 48px;
  line-height: 48px;
  font-weight: 700;
  letter-spacing: -0.025em;
  color: rgba(255, 255, 255, 0.92);
}

.notif {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  width: 100%;
  padding: 12px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.94);
  text-align: start;
}

.notif .app-icon { width: 40px; height: 40px; }
.notif-body { display: grid; gap: 2px; min-width: 0; }
.notif-top { display: flex; justify-content: space-between; gap: 8px; font-size: 14px; line-height: 20px; }
.notif-top span { font-size: 12px; color: var(--muted); }
.notif-text { font-size: 14px; line-height: 20px; color: var(--ink-2); }

.js .tile-remind .notif {
  transition: opacity 0.8s var(--ease), transform 0.8s var(--ease);
  transition-delay: 300ms;
}

.js .tile-remind:not(.play) .notif { opacity: 0; transform: translateY(-24px) scale(0.96); }

/* The centres: a short list, each row with its posted price. */
.centres {
  display: grid;
  gap: 8px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.centres li {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-radius: 16px;
  background: var(--surface);
  box-shadow: 0 1px 2px rgba(18, 23, 28, 0.06);
}

.js .tile-centres li {
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
  transition-delay: calc(200ms + var(--i) * 120ms);
}

.js .tile-centres:not(.play) li { opacity: 0; transform: translateY(16px); }

.centre-name {
  display: grid;
  gap: 2px;
  min-width: 0;
  font-size: 14px;
  line-height: 20px;
  font-weight: 700;
}

.centre-name bdi { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.centre-name .rating { font-size: 12px; line-height: 16px; }

.centre-price {
  margin-inline-start: auto;
  font-weight: 700;
  color: var(--accent-deep);
  white-space: nowrap;
}

.centre-price small { font-size: 12px; }

/* Booking: a slot is picked, and the booking confirmed. */
.book-card {
  display: grid;
  gap: 16px;
  padding: 24px;
  border-radius: 24px;
  background: var(--surface);
  box-shadow: var(--shadow-card);
}

.book-where {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
}

.book-where .i { color: var(--muted); }

.slots {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

.slot {
  padding: 8px;
  border-radius: 12px;
  background: var(--panel);
  font-size: 14px;
  line-height: 20px;
  font-weight: 700;
  text-align: center;
  font-variant-numeric: tabular-nums;
  transition: background-color 0.6s var(--ease), color 0.6s var(--ease);
}

.slot.is-chosen { background: var(--ink); color: #fff; }

.js .tile-book .slot.is-chosen { transition-delay: 700ms; }
.js .tile-book:not(.play) .slot.is-chosen { background: var(--panel); color: var(--ink); }

.booked {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 12px;
  background: var(--green-soft);
  font-size: 14px;
  line-height: 20px;
  font-weight: 700;
  color: var(--green-deep);
}

.js .tile-book .booked {
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
  transition-delay: 1300ms;
}

.js .tile-book:not(.play) .booked { opacity: 0; transform: translateY(8px); }

/* ── the film ───────────────────────────────────────────────────────── */

.film {
  display: grid;
  gap: 48px;
  align-items: center;
  padding: 40px 24px;
  border-radius: var(--radius-panel);
  background: var(--ink);
  color: #fff;
}

.film h2 { color: #fff; }
.film .eyebrow { color: var(--accent); }
.film .lead { color: rgba(241, 244, 247, 0.66); }

.reel {
  position: relative;
  width: min(320px, 100%);
  margin: 0 auto;
  aspect-ratio: 9 / 16;
  overflow: hidden;
  border-radius: 24px;
  background: #0a0d10;
  box-shadow: 0 0 0 1px rgba(241, 244, 247, 0.12);
}

.reel video { width: 100%; height: 100%; object-fit: cover; }

.reel-play {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: none;
  place-items: center;
  width: 80px;
  height: 80px;
  margin: auto;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.94);
  color: var(--ink);
  box-shadow: 0 0 0 12px rgba(255, 255, 255, 0.16);
  cursor: pointer;
  transition: transform 0.7s var(--ease), box-shadow 0.7s var(--ease), opacity 0.7s var(--ease);
}

.js .reel-play { display: grid; }
.reel-play:hover { transform: scale(1.06); box-shadow: 0 0 0 16px rgba(255, 255, 255, 0.2); }
.reel-play:active { transform: scale(0.98); }

/* Media controls do not mirror; neither does the play mark. */
.reel-play .i { width: 32px; height: 32px; margin-left: 4px; }

.reel-len {
  position: absolute;
  top: 16px;
  inset-inline-end: 16px;
  z-index: 1;
  padding: 4px 8px;
  border-radius: var(--radius-chip);
  background: rgba(18, 23, 28, 0.72);
  color: #fff;
  font-size: 12px;
  line-height: 16px;
  font-weight: 700;
  transition: opacity 0.7s var(--ease);
}

.reel.playing .reel-play,
.reel.playing .reel-len { opacity: 0; pointer-events: none; }

@media (min-width: 900px) {
  .film { grid-template-columns: minmax(0, 1fr) auto; gap: 64px; padding: 64px; }
  .reel { width: 320px; }
}

/* ── for professionals ──────────────────────────────────────────────── */

.tabs {
  display: flex;
  width: max-content;
  max-width: 100%;
  margin: 0 auto 32px;
  padding: 4px;
  border-radius: var(--radius-chip);
  background: var(--panel);
}

html:not(.js) .tabs { display: none; }

.tabs button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border: 0;
  border-radius: var(--radius-chip);
  background: transparent;
  font: inherit;
  font-size: 14px;
  line-height: 20px;
  font-weight: 700;
  color: var(--muted);
  cursor: pointer;
  transition: background-color 0.7s var(--ease), color 0.7s var(--ease), box-shadow 0.7s var(--ease);
}

.tabs button:hover { color: var(--ink); }

.tabs button[aria-selected='true'] {
  background: var(--surface);
  color: var(--ink);
  box-shadow: 0 1px 2px rgba(18, 23, 28, 0.12);
}

.tabs .i { width: 16px; height: 16px; }

.panels { display: grid; gap: 16px; }

.panel {
  display: grid;
  gap: 40px;
  overflow: hidden;
  padding: 32px 24px 0;
  border-radius: var(--radius-panel);
  background: var(--panel);
}

.panel[hidden] { display: none; }
.panel.shown { animation: panel-in 0.7s var(--ease); }

@keyframes panel-in {
  from { opacity: 0; transform: translateY(16px); }
}

.panel h3 { font-size: 30px; line-height: 36px; }
:lang(ar) .panel h3 { line-height: 1.3; }
.panel-copy > p { margin-top: 12px; font-size: 18px; line-height: 28px; color: var(--muted); }

.ticks {
  display: grid;
  gap: 12px;
  list-style: none;
  margin: 24px 0 0;
  padding: 0;
}

.ticks li { display: flex; align-items: flex-start; gap: 12px; }
.ticks .i { width: 20px; height: 20px; margin-top: 2px; color: var(--accent); }

.panel-copy > .join {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-top: 24px;
  padding: 12px 16px;
  border-radius: 16px;
  background: var(--surface);
  font-size: 16px;
  line-height: 24px;
  font-weight: 700;
  color: var(--ink);
}

.join .i { width: 20px; height: 20px; margin-top: 2px; color: var(--accent); }

.panel-shot {
  display: flex;
  justify-content: center;
  height: 320px;
}

.panel-shot .phone { width: 264px; height: max-content; }

@media (min-width: 900px) {
  .panel {
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.8fr);
    align-items: center;
    gap: 64px;
    padding: 0 64px;
  }

  .panel-copy { padding-block: 64px; }
  .panel-shot { align-self: end; height: 440px; }
  .panel-shot .phone { width: 280px; }
}

/* ── questions ──────────────────────────────────────────────────────── */

.faq-grid { display: grid; gap: 40px; }
.faq-head > p:not(.eyebrow) { margin-top: 16px; color: var(--muted); }

.faq-list { border-top: 1px solid var(--line); }
.faq-list details { border-bottom: 1px solid var(--line); }

.faq-list summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding-block: 24px;
  list-style: none;
  font-size: 18px;
  line-height: 28px;
  font-weight: 700;
  cursor: pointer;
  transition: color 0.7s var(--ease);
}

.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary:hover { color: var(--accent-deep); }

.faq-list summary .i {
  width: 20px;
  height: 20px;
  color: var(--muted);
  transition: transform 0.7s var(--ease);
}

.faq-list details[open] summary .i { transform: rotate(45deg); }

.answer p {
  max-width: 640px;
  padding-bottom: 24px;
  color: var(--muted);
}

/* Where the browser can animate to `auto`, the answer opens rather than
   appearing. */
@supports (interpolate-size: allow-keywords) {
  .faq-list { interpolate-size: allow-keywords; }
  .faq-list details::details-content {
    height: 0;
    overflow: clip;
    transition: height 0.7s var(--ease), content-visibility 0.7s allow-discrete;
  }
  .faq-list details[open]::details-content { height: auto; }
}

@media (min-width: 1024px) {
  .faq-grid { grid-template-columns: 360px minmax(0, 1fr); gap: 96px; }
  .faq-head { position: sticky; top: 128px; align-self: start; }
}

/* ── get the app ────────────────────────────────────────────────────── */

.get { padding-top: 0; }

.cta {
  position: relative;
  display: grid;
  gap: 40px;
  align-items: center;
  overflow: hidden;
  padding: 48px 24px;
  border-radius: var(--radius-panel);
  background: var(--ink);
  color: #fff;
}

/* The map again, dark on dark, where the page began. */
.map-dark {
  inset: auto -160px -200px auto;
  width: 560px;
  height: 560px;
  background: #232b33;
}

[dir='rtl'] .map-dark { inset: auto auto -200px -160px; }

.cta-copy { position: relative; }
.cta .app-icon { width: 72px; height: 72px; margin-bottom: 32px; }
.cta .app-icon img { box-shadow: 0 0 0 1px rgba(241, 244, 247, 0.16); }
.cta h2 span { display: block; }
.cta h2 .soft { color: rgba(241, 244, 247, 0.5); }
:lang(ar) .cta h2 { line-height: 1.3; }

.cta-copy > p {
  margin-top: 16px;
  font-size: 18px;
  line-height: 28px;
  color: rgba(241, 244, 247, 0.66);
}

.cta .badges { margin-top: 32px; }

.qr { display: none; }

@media (min-width: 900px) {
  .cta { grid-template-columns: minmax(0, 1fr) auto; padding: 64px; }
  .map-dark { inset: 50% 8% auto auto; translate: 0 -50%; }
  [dir='rtl'] .map-dark { inset: 50% auto auto 8%; }

  .qr {
    position: relative;
    display: grid;
    justify-items: center;
    gap: 12px;
    margin: 0;
    padding: 16px;
    border-radius: 24px;
    background: #fff;
    color: var(--ink);
  }

  .qr img { width: 144px; height: 144px; }

  .qr figcaption {
    max-width: 144px;
    font-size: 12px;
    line-height: 16px;
    font-weight: 700;
    text-align: center;
  }
}

@media (min-width: 1280px) {
  .cta h2 { font-size: 60px; line-height: 60px; }
}

/* ── footer ─────────────────────────────────────────────────────────── */

.foot { padding-block: 32px; }

.foot-grid {
  display: grid;
  gap: 40px;
  padding-top: 48px;
  border-top: 1px solid var(--line);
}

.foot-brand { font-size: 24px; line-height: 32px; }

.foot-tagline {
  max-width: 280px;
  margin-top: 12px;
  font-size: 14px;
  line-height: 20px;
  color: var(--muted);
}

.foot .badges { margin-top: 24px; }

.foot-h {
  margin: 0 0 16px;
  font-size: 14px;
  line-height: 20px;
  font-weight: 700;
}

.foot ul {
  display: grid;
  gap: 8px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.foot ul a,
.foot-support {
  font-size: 14px;
  line-height: 20px;
  color: var(--muted);
  text-decoration: none;
  transition: color 0.7s var(--ease);
}

.foot ul a:hover { color: var(--ink); }

.foot-bottom {
  margin-top: 48px;
  font-size: 12px;
  line-height: 16px;
  color: var(--muted);
}

@media (min-width: 768px) {
  .foot-grid { grid-template-columns: 1.5fr 1fr 1fr 0.8fr; }
}

/* ── legal documents ────────────────────────────────────────────────── */

.doc-body {
  max-width: 720px;
  margin-inline: auto;
  padding: 128px var(--pad) 64px;
}

.doc-body h1 { margin-bottom: 8px; font-size: 30px; line-height: 36px; }

.doc-body h2 {
  margin-top: 48px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
  font-size: 24px;
  line-height: 32px;
}

.doc-body h3 { margin-top: 32px; font-size: 18px; line-height: 28px; }

.doc-body p,
.doc-body li {
  color: var(--ink-2);
  font-size: 16px;
  line-height: 28px;
}

.doc-body p,
.doc-body ul { margin-top: 16px; }

.doc-body ul { padding-inline-start: 24px; }
.doc-body li { margin-bottom: 8px; }
.doc-body strong { font-weight: 700; color: var(--ink); }
.doc-body em { color: var(--muted); }
.doc-body a { color: var(--accent-deep); text-underline-offset: 4px; }

@media (min-width: 768px) {
  .doc-body h1 { font-size: 36px; line-height: 40px; }
}

:lang(ar) .doc-body h1, :lang(ar) .doc-body h2 { line-height: 1.4; }

/* The privacy policy's purpose table. Scrolls in its own box rather than
 * making the page scroll sideways on a phone. */
.table-scroll { overflow-x: auto; margin-top: 16px; }

.doc-body table {
  width: 100%;
  min-width: 440px;
  border-collapse: collapse;
  font-size: 14px;
  line-height: 20px;
}

.doc-body th,
.doc-body td {
  padding: 12px 16px;
  border: 1px solid var(--line);
  text-align: start;
  vertical-align: top;
}

.doc-body th { background: var(--panel); font-weight: 700; }

.doc-back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 24px;
  padding: 8px 12px;
  padding-inline-start: 8px;
  border-radius: var(--radius-chip);
  background: var(--panel);
  font-size: 14px;
  line-height: 20px;
  font-weight: 700;
  color: var(--muted);
  text-decoration: none;
  transition: color 0.7s var(--ease), background-color 0.7s var(--ease);
}

.doc-back:hover { color: var(--ink); background: #eaedf0; }

/* The arrow points back: against the reading direction. */
.doc-back .i { width: 16px; height: 16px; transform: scaleX(-1); }
[dir='rtl'] .doc-back .i { transform: none; }

.notice {
  margin-top: 24px;
  padding: 16px;
  border-radius: var(--radius-tile);
  background: var(--accent-soft);
  box-shadow: inset 0 0 0 1px rgba(217, 102, 0, 0.24);
  font-size: 16px;
  line-height: 24px;
}

/* ── the pages that stand alone: /get, the 404 and the reset ────────── */

.reset { background: var(--canvas); }

.lone,
.lost {
  display: grid;
  place-items: center;
  min-height: 100vh;
  min-height: 100svh;
  padding: 24px;
}

.lone-card {
  display: grid;
  justify-items: center;
  gap: 24px;
  max-width: 420px;
  text-align: center;
}

.lone-card h1 {
  display: grid;
  gap: 4px;
  font-size: 20px;
  line-height: 28px;
}

.lost-main {
  display: grid;
  justify-items: center;
  gap: 24px;
  width: 100%;
  max-width: 960px;
  text-align: center;
}

.dead-end { width: min(560px, 100%); height: auto; }
.dead-end path { fill: none; }
.dead-end .road-kerb { stroke: var(--ink); stroke-width: 56; }
.dead-end .road-asphalt { stroke: #1b232b; stroke-width: 48; }
.dead-end .road-line { stroke: var(--accent); stroke-width: 4; stroke-dasharray: 24 20; }
.dead-end .barrier rect { fill: var(--ink); }
.dead-end .board { fill: #fff; stroke: var(--ink); stroke-width: 4; }
.dead-end .stripes { fill: var(--accent); }

.lost-code {
  font-size: 60px;
  line-height: 60px;
  letter-spacing: -0.04em;
  color: var(--faint);
}

.lost-grid {
  display: grid;
  gap: 16px;
  width: 100%;
  margin-top: 8px;
}

.lost-lang {
  display: grid;
  justify-items: center;
  gap: 12px;
  padding: 24px;
  border-radius: 24px;
  background: var(--panel);
}

.lost-lang h2 { font-size: 20px; line-height: 28px; }
.lost-lang p { color: var(--muted); }
.lost-lang .btn { margin-top: 8px; }
.lost-lang .i { width: 16px; height: 16px; }

@media (min-width: 900px) {
  .lost-grid { grid-template-columns: repeat(3, 1fr); }
}

/* ── less motion ────────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0ms !important;
  }

  .js [data-reveal]:not(.in) { opacity: 1; transform: none; filter: none; }
  .js .tagline .w { color: var(--ink); }
  .js .tagline .accent .w { color: var(--accent); }
}