/* ==========================================================================
   Jusr — marketing site
   Palette is lifted straight from the app's design tokens (theme/index.ts):
   gold #FACC15 / #EAB308 / #FDE047 on a black canvas, amber #F59E0B accents.
   ========================================================================== */

/* ---------------------------------------------------------------- tokens */
:root {
  /* brand */
  --gold:        #FACC15;
  --gold-deep:   #EAB308;
  --gold-soft:   #FDE047;
  --gold-ink:    #A16207;
  --amber:       #FBBF24;
  --amber-deep:  #F59E0B;
  --on-brand:    #0A0A0A;

  /* canvas + surfaces (app dark palette) */
  --black:       #000000;
  --canvas:      #050505;
  --surface:     #111111;
  --surface-2:   #161616;
  --surface-3:   #1D1D1D;
  --line:        #232323;
  --line-soft:   #1A1A1A;
  --hairline:    rgba(250, 204, 21, 0.16);

  /* ink */
  --ink:         #FFFFFF;
  --ink-soft:    #C7C7C7;
  --muted:       #9A9A9A;
  --faint:       #5E5E5E;

  --success:     #34D399;
  --danger:      #F87171;

  /* radii — app tokens */
  --r-xs: 10px;
  --r-sm: 14px;
  --r-md: 20px;
  --r-lg: 26px;
  --r-xl: 34px;
  --r-2xl: 44px;
  --r-pill: 999px;

  /* rhythm */
  --gap: clamp(1rem, 2.2vw, 1.5rem);
  --pad-x: clamp(1.15rem, 4vw, 2.5rem);
  --sec-y: clamp(4rem, 8vw, 7rem);
  --max: 1200px;

  /* motion */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-soft: cubic-bezier(0.4, 0, 0.2, 1);

  --shadow-card: 0 18px 44px -18px rgba(0, 0, 0, 0.85);
  --shadow-lift: 0 30px 70px -24px rgba(0, 0, 0, 0.92);
  --shadow-glow: 0 16px 40px -14px rgba(250, 204, 21, 0.42);

  --font: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text",
          "Segoe UI", Inter, Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-ar: "SF Arabic", "Geeza Pro", "Noto Naskh Arabic", "Segoe UI",
             Tahoma, var(--font);
}

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

* { margin: 0; }

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

body {
  font-family: var(--font);
  background: var(--black);
  color: var(--ink);
  font-size: 16px;
  line-height: 1.6;
  letter-spacing: -0.011em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  /* the whole page sits on one dark canvas; sections paint their own tints */
  background-image:
    radial-gradient(900px 620px at 78% -6%, rgba(250, 204, 21, 0.08), transparent 62%),
    radial-gradient(700px 560px at 6% 8%, rgba(245, 158, 11, 0.05), transparent 60%);
  background-repeat: no-repeat;
}

img, svg { display: block; max-width: 100%; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; padding: 0; }

:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
  border-radius: 6px;
}

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

.skip-link {
  position: fixed;
  top: 10px;
  inset-inline-start: 10px;
  z-index: 200;
  padding: 10px 16px;
  border-radius: var(--r-pill);
  background: var(--gold);
  color: var(--on-brand);
  font-weight: 700;
  transform: translateY(-160%);
  transition: transform 0.2s var(--ease);
}
.skip-link:focus { transform: none; }

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

.ic { width: 1em; height: 1em; flex: none; }

/* ---------------------------------------------------------------- type */
.h2 {
  font-size: clamp(2rem, 4.6vw, 3.35rem);
  line-height: 1.06;
  font-weight: 800;
  letter-spacing: -0.035em;
}

.h3 {
  font-size: clamp(1.42rem, 3vw, 1.8rem);
  line-height: 1.16;
  font-weight: 800;
  letter-spacing: -0.028em;
}

.kicker {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.19em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 0.9rem;
}

.grad {
  background: linear-gradient(100deg, var(--gold-soft) 8%, var(--gold) 42%, var(--amber-deep) 96%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.lede {
  font-size: clamp(1.02rem, 1.5vw, 1.2rem);
  color: var(--ink-soft);
  line-height: 1.65;
}

.body { color: var(--muted); line-height: 1.72; }

.section-sub {
  color: var(--muted);
  font-size: clamp(0.98rem, 1.3vw, 1.1rem);
  line-height: 1.68;
  max-width: 62ch;
}

.ar-inline, [dir="rtl"] { font-family: var(--font-ar); }
.ar-inline { color: var(--gold); font-weight: 600; white-space: nowrap; }

/* ---------------------------------------------------------------- buttons */
.btn {
  --btn-py: 0.85rem;
  --btn-px: 1.5rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  padding: var(--btn-py) var(--btn-px);
  border-radius: var(--r-pill);
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: -0.01em;
  white-space: nowrap;
  transition: transform 0.22s var(--ease), box-shadow 0.22s var(--ease),
              background-color 0.22s var(--ease), border-color 0.22s var(--ease),
              color 0.22s var(--ease);
  /* deliberately no `will-change` — these only move on hover, and promoting
     every button to its own compositing layer for the whole session costs more
     than it saves. Only the always-running marquee gets a standing hint. */
}
.btn .ic { font-size: 1.05em; }

.btn-primary {
  background-image: linear-gradient(112deg, var(--gold-soft), var(--gold) 46%, var(--gold-deep));
  color: var(--on-brand);
  box-shadow: var(--shadow-glow);
}
.btn-ghost {
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.03);
  color: var(--ink);
}
.btn-sm { --btn-py: 0.62rem; --btn-px: 1.15rem; font-size: 0.875rem; }
.btn-lg { --btn-py: 1.02rem; --btn-px: 1.9rem; font-size: 1rem; }

@media (hover: hover) {
  .btn-primary:hover { transform: translateY(-2px); box-shadow: 0 22px 50px -14px rgba(250, 204, 21, 0.55); }
  .btn-ghost:hover { border-color: var(--hairline); background: rgba(250, 204, 21, 0.07); }
}
.btn:active { transform: translateY(0) scale(0.985); }

.pill {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.3rem 0.7rem;
  border-radius: var(--r-pill);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.04em;
}
.pill-brand { background: var(--gold); color: var(--on-brand); }
.pill-ghost {
  border: 1px solid var(--hairline);
  background: rgba(250, 204, 21, 0.08);
  color: var(--gold);
  text-transform: uppercase;
  letter-spacing: 0.13em;
}
.pill-xs { padding: 0.16rem 0.44rem; font-size: 0.52rem; }

/* ---------------------------------------------------------------- nav */
#top-sentinel { position: absolute; top: 0; height: 1px; width: 1px; }

.nav {
  position: fixed;
  inset: 0 0 auto;
  z-index: 100;
  transition: background-color 0.3s var(--ease-soft), border-color 0.3s var(--ease-soft),
              backdrop-filter 0.3s var(--ease-soft);
  border-bottom: 1px solid transparent;
}
.nav.is-stuck {
  background: rgba(5, 5, 5, 0.78);
  border-bottom-color: var(--line-soft);
  -webkit-backdrop-filter: saturate(150%) blur(16px);
  backdrop-filter: saturate(150%) blur(16px);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .nav.is-stuck { background: rgba(5, 5, 5, 0.96); }
}

.nav-inner {
  max-width: var(--max);
  margin-inline: auto;
  padding: 0.85rem var(--pad-x);
  display: flex;
  align-items: center;
  gap: 1rem;
}

.brand { display: inline-flex; align-items: center; gap: 0.6rem; flex: none; }
.brand-mark { width: 34px; height: 34px; object-fit: contain; }
.brand-word {
  font-size: 1.22rem;
  font-weight: 800;
  letter-spacing: -0.03em;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: clamp(0.5rem, 1.6vw, 1.35rem);
  margin-inline: auto;
}
.nav-links a {
  position: relative;
  padding: 0.45rem 0.15rem;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--muted);
  transition: color 0.2s var(--ease-soft);
}
.nav-links a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  border-radius: 2px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 0.28s var(--ease);
}
.nav-links a:hover { color: var(--ink); }
.nav-links a.is-active { color: var(--ink); }
.nav-links a.is-active::after { transform: scaleX(1); }

.nav-actions { display: flex; align-items: center; gap: 0.6rem; flex: none; }

.nav-toggle {
  display: none;
  width: 42px;
  height: 42px;
  border-radius: var(--r-sm);
  border: 1px solid var(--line);
  align-items: center;
  justify-content: center;
  font-size: 1.35rem;
  color: var(--ink);
}
.nav-toggle .ic-shut { display: none; }
.nav.is-open .nav-toggle .ic-open { display: none; }
.nav.is-open .nav-toggle .ic-shut { display: block; }

.nav-mobile {
  display: none;
  flex-direction: column;
  gap: 0.15rem;
  padding: 0.5rem var(--pad-x) 1.35rem;
  background: rgba(5, 5, 5, 0.97);
  border-bottom: 1px solid var(--line-soft);
}
.nav-mobile a {
  padding: 0.85rem 0.25rem;
  font-size: 1.02rem;
  font-weight: 600;
  color: var(--ink-soft);
  border-bottom: 1px solid var(--line-soft);
}
.nav-mobile a:last-child {
  border-bottom: 0;
  margin-top: 0.9rem;
  justify-content: center;
  color: var(--on-brand);
}

/* ---------------------------------------------------------------- hero */
.hero {
  position: relative;
  padding-top: clamp(7.5rem, 13vw, 10.5rem);
  padding-bottom: clamp(2rem, 4vw, 3.5rem);
  overflow: hidden;
  isolation: isolate;
}

/* radial-gradient glow — cheaper than an animated blur filter */
.hero-glow {
  position: absolute;
  z-index: -2;
  top: -22%;
  right: -12%;
  width: min(1100px, 118vw);
  aspect-ratio: 1;
  pointer-events: none;
  background:
    radial-gradient(circle at 50% 50%, rgba(250, 204, 21, 0.17), rgba(250, 204, 21, 0.05) 42%, transparent 66%);
}
.hero-grid-lines {
  position: absolute;
  z-index: -3;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(to right, rgba(255, 255, 255, 0.035) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 255, 255, 0.035) 1px, transparent 1px);
  background-size: 78px 78px;
  -webkit-mask-image: radial-gradient(ellipse 80% 62% at 50% 26%, #000 12%, transparent 72%);
  mask-image: radial-gradient(ellipse 80% 62% at 50% 26%, #000 12%, transparent 72%);
}

.hero-inner {
  display: grid;
  grid-template-columns: minmax(0, 1.06fr) minmax(0, 0.94fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.44rem 0.95rem 0.44rem 0.72rem;
  border-radius: var(--r-pill);
  border: 1px solid var(--hairline);
  background: rgba(250, 204, 21, 0.07);
  color: var(--gold);
  font-size: 0.775rem;
  font-weight: 700;
  letter-spacing: 0.01em;
}
/* the "+" joining the two pillars in the eyebrow — dimmed so the words lead */
.eyebrow-amp {
  opacity: 0.55;
  font-weight: 800;
  padding-inline: 0.1em;
}
.eyebrow-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 0 4px rgba(250, 204, 21, 0.18);
}

.hero-title {
  margin-top: 1.35rem;
  font-size: clamp(2.65rem, 6.2vw, 4.6rem);
  line-height: 1.02;
  font-weight: 800;
  letter-spacing: -0.043em;
}
.hero-title em {
  font-style: normal;
  background: linear-gradient(100deg, var(--gold-soft), var(--gold) 45%, var(--amber-deep));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.hero-sub {
  margin-top: 1.35rem;
  max-width: 54ch;
  font-size: clamp(1rem, 1.35vw, 1.13rem);
  color: var(--muted);
  line-height: 1.68;
}

.hero-cta {
  margin-top: 2rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
}

/* ------------------------------------------------------ waitlist, in the hero
   One button and one line. The fields live in a dialog now, so the hero asks
   for a decision rather than for data. */
.hero-join {
  margin-top: 2rem;
  display: flex;
  align-items: center;
  gap: 1.1rem;
  flex-wrap: wrap;
  /* No text-align here: the hero owns that, so this row follows it left on
     desktop and centred on narrow screens without a second rule fighting it. */
}
.hero-join-note {
  /* One line, always. It reads as an aside to the button, and an aside that
     wraps to two ragged lines under a centred button looks like a mistake.
     `nowrap` alone would risk an overflow on a 320px phone, so the size scales
     with the viewport until it reaches its natural 0.9rem; `flex-wrap` on the
     parent moves the whole note to its own row rather than letting it spill. */
  font-size: clamp(0.62rem, 3.2vw, 0.9rem);
  line-height: 1.5;
  color: var(--muted);
  white-space: nowrap;
}
.hero-join.is-joined .hero-join-note { color: var(--gold-soft); }

/* ------------------------------------------------------------ waitlist dialog
   Fixed overlay rather than a <dialog>: Safari only shipped showModal() late,
   and this has to work in the in-app browsers people arrive from. */
.wl-backdrop {
  position: fixed;
  inset: 0;
  z-index: 300;                     /* above the sticky nav (200) */
  display: grid;
  place-items: center;
  padding: 1.25rem;
  background: rgba(0, 0, 0, 0.72);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  animation: wl-fade 0.18s ease-out;
}
.wl-backdrop[hidden] { display: none; }

.wl-card {
  position: relative;
  width: min(460px, 100%);
  padding: clamp(1.5rem, 3.4vw, 2.1rem);
  border-radius: var(--r-lg);
  border: 1px solid var(--line);
  background:
    radial-gradient(420px 220px at 50% 0%, rgba(250, 204, 21, 0.10), transparent 65%),
    linear-gradient(165deg, var(--surface-2), var(--surface) 76%);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6);
  animation: wl-rise 0.22s cubic-bezier(0.22, 1, 0.36, 1);
}
.wl-close {
  position: absolute;
  top: 0.9rem;
  inset-inline-end: 0.9rem;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: var(--surface-3);
  color: var(--muted);
  cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease;
}
.wl-close:hover { color: var(--ink); border-color: var(--gold-deep); }

.wl-title {
  font-size: clamp(1.35rem, 3vw, 1.6rem);
  font-weight: 800;
  color: var(--ink);
  letter-spacing: -0.01em;
}
.wl-sub {
  margin-top: 0.45rem;
  font-size: 0.94rem;
  line-height: 1.55;
  color: var(--muted);
}

.wl-form { margin-top: 1.35rem; display: grid; gap: 0.7rem; }

/* Icon sits inside the control, so the three rows read as one stack. */
.wl-field {
  position: relative;
  display: block;
}
.wl-ic {
  position: absolute;
  inset-inline-start: 1rem;
  top: 50%;
  translate: 0 -50%;
  width: 18px;
  height: 18px;
  fill: none;
  stroke: var(--muted);
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
  pointer-events: none;
  transition: stroke 0.15s ease;
}
.wl-input {
  width: 100%;
  padding: 0.95rem 1.1rem 0.95rem 2.9rem;
  border-radius: var(--r-md);
  border: 1px solid var(--line);
  background: var(--surface-3);
  color: var(--ink);
  font: inherit;
  font-size: 0.98rem;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.wl-input::placeholder { color: var(--muted); }
.wl-input:focus {
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(250, 204, 21, 0.16);
}
.wl-field:focus-within .wl-ic { stroke: var(--gold); }
.wl-input.is-invalid { border-color: #F87171; }

.wl-submit { width: 100%; justify-content: center; margin-top: 0.35rem; }
.wl-fine {
  margin-top: 1rem;
  text-align: center;
  font-size: 0.82rem;
  color: var(--muted);
}

.wl-done { text-align: center; padding: 0.5rem 0 0.25rem; }
.wl-done b { display: block; margin-top: 0.9rem; font-size: 1.1rem; color: var(--ink); }
.wl-done p { margin-top: 0.4rem; font-size: 0.92rem; line-height: 1.55; color: var(--muted); }

@keyframes wl-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes wl-rise {
  from { opacity: 0; transform: translateY(14px) scale(0.97); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .wl-backdrop, .wl-card { animation: none; }
}

/* Stops the page scrolling behind the dialog on iOS. */
body.wl-open { overflow: hidden; }
/* The tick used by the dialog's success state. */
.done-check {
  display: grid;
  place-items: center;
  flex: none;
  width: 44px;
  height: 44px;
  margin: 0 auto;
  border-radius: 50%;
  background: var(--gold);
  color: var(--on-brand);
  font-size: 1.3rem;
}

.hero-stats {
  margin-top: 2.75rem;
  padding-top: 1.85rem;
  border-top: 1px solid var(--line-soft);
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem 0.75rem;
}
.stat dd { margin: 0.2rem 0 0; font-size: 0.775rem; color: var(--faint); line-height: 1.35; }
.stat-num {
  font-size: clamp(1.5rem, 2.6vw, 2rem);
  font-weight: 800;
  letter-spacing: -0.04em;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.stat-text {
  background: linear-gradient(100deg, var(--gold-soft), var(--gold-deep));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ------------------------------------------------------- hero device stage */
.hero-stage {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 560px;
}
.stage-orb {
  position: absolute;
  z-index: -1;
  width: min(560px, 105%);
  aspect-ratio: 1;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 45%, rgba(250, 204, 21, 0.2), rgba(234, 179, 8, 0.07) 45%, transparent 68%);
  animation: orbBreathe 9s var(--ease-soft) infinite;
}
@keyframes orbBreathe {
  0%, 100% { transform: scale(1); opacity: 0.85; }
  50%      { transform: scale(1.07); opacity: 1; }
}

.float-chip {
  position: absolute;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 0.42rem;
  padding: 0.55rem 0.9rem;
  border-radius: var(--r-pill);
  border: 1px solid var(--line);
  /* near-opaque over a dark backdrop, so a blur behind it would cost a repaint
     per scroll frame and show nothing — the nav is the only blurred surface */
  background: rgb(20, 20, 20);
  font-size: 0.775rem;
  font-weight: 700;
  color: var(--ink-soft);
  box-shadow: var(--shadow-card);
  white-space: nowrap;
  animation: floaty 7s var(--ease-soft) infinite;
}
.float-chip .ic { color: var(--gold); font-size: 1.05em; }
/* Parked over the device's bezel, never over its screen content. */
.float-chip-a { top: 9%;    left: -8%;  animation-delay: 0s; }
.float-chip-b { top: 45%;   right: -10%; animation-delay: 1.4s; }
.float-chip-c { bottom: 7%; left: -9%;  animation-delay: 2.8s; }
@keyframes floaty {
  0%, 100% { transform: translate3d(0, 0, 0); }
  50%      { transform: translate3d(0, -11px, 0); }
}

/* ---------------------------------------------------------------- device */
.device {
  position: relative;
  width: 300px;
  max-width: 100%;
  aspect-ratio: 300 / 620;
  border-radius: 46px;
  padding: 9px;
  background: linear-gradient(160deg, #3a3a3a, #101010 34%, #050505 72%, #2a2a2a);
  box-shadow:
    var(--shadow-lift),
    0 0 0 1px rgba(255, 255, 255, 0.07) inset;
  flex: none;
}
.device::before { /* dynamic island */
  content: "";
  position: absolute;
  z-index: 4;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  width: 82px;
  height: 22px;
  border-radius: var(--r-pill);
  background: #000;
}
.device-screen {
  position: relative;
  height: 100%;
  border-radius: 38px;
  overflow: hidden;
  background: #000;
  display: flex;
  flex-direction: column;
  padding: 0 14px 14px;
  font-size: 11px;
  line-height: 1.4;
  /* isolate the screen's repaints from the rest of the page */
  contain: paint;
}
.device-hero { width: 320px; }

.dev-status {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 4px 12px;
  font-size: 10px;
  font-weight: 700;
  color: var(--ink);
}
.dev-status-r { display: inline-flex; align-items: center; gap: 4px; }
.sig, .bat {
  display: inline-block;
  height: 8px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.75);
}
.sig { width: 14px; }
.bat { width: 20px; border-radius: 3px; }

.dev-langbar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 7px;
  border-radius: var(--r-pill);
  background: var(--surface-2);
  border: 1px solid var(--line);
}
.dev-langbar .lang {
  flex: 1;
  text-align: center;
  font-size: 10.5px;
  font-weight: 700;
  color: var(--ink-soft);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.lang-swap {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: linear-gradient(140deg, var(--gold-soft), var(--gold-deep));
  color: var(--on-brand);
  font-size: 13px;
  flex: none;
}

.dev-source { margin-top: 16px; text-align: center; min-height: 52px; }
.dev-label {
  font-size: 8.5px;
  font-weight: 800;
  letter-spacing: 0.16em;
  color: var(--faint);
  text-transform: uppercase;
}
.dev-en {
  margin-top: 5px;
  font-size: 16px;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -0.02em;
  transition: opacity 0.34s var(--ease), transform 0.34s var(--ease);
}

.dev-mic {
  position: relative;
  display: grid;
  place-items: center;
  height: 132px;
  margin: 2px 0 6px;
}
.bloom {
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(250, 204, 21, 0.34), transparent 68%);
  animation: bloomPulse 3.4s var(--ease-soft) infinite;
}
.bloom-1 { width: 92px;  height: 92px;  animation-delay: 0s; }
.bloom-2 { width: 124px; height: 124px; animation-delay: 0.55s; }
.bloom-3 { width: 158px; height: 158px; animation-delay: 1.1s; }
@keyframes bloomPulse {
  0%   { transform: scale(0.86); opacity: 0.85; }
  70%  { transform: scale(1.14); opacity: 0.06; }
  100% { transform: scale(1.14); opacity: 0; }
}
.mic-btn {
  position: relative;
  display: grid;
  place-items: center;
  width: 68px;
  height: 68px;
  border-radius: 50%;
  background: linear-gradient(150deg, var(--gold-soft), var(--gold) 45%, var(--gold-deep));
  color: var(--on-brand);
  font-size: 27px;
  box-shadow: 0 12px 30px -8px rgba(250, 204, 21, 0.6);
}
.wave {
  position: absolute;
  bottom: 4px;
  display: flex;
  align-items: flex-end;
  gap: 3px;
  height: 16px;
}
.wave i {
  width: 3px;
  border-radius: 2px;
  background: rgba(250, 204, 21, 0.75);
  animation: waveBar 1.1s var(--ease-soft) infinite;
  height: 5px;
}
.wave i:nth-child(1) { animation-delay: 0s;    }
.wave i:nth-child(2) { animation-delay: 0.1s;  }
.wave i:nth-child(3) { animation-delay: 0.2s;  }
.wave i:nth-child(4) { animation-delay: 0.3s;  }
.wave i:nth-child(5) { animation-delay: 0.22s; }
.wave i:nth-child(6) { animation-delay: 0.13s; }
.wave i:nth-child(7) { animation-delay: 0.05s; }
@keyframes waveBar {
  0%, 100% { transform: scaleY(0.4); }
  50%      { transform: scaleY(2.7); }
}

.dev-result {
  margin-top: auto;
  padding: 13px;
  border-radius: var(--r-md);
  background: var(--surface-2);
  border: 1px solid var(--hairline);
}
.dev-result-top { display: flex; align-items: center; justify-content: space-between; }
.dev-speak {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: rgba(250, 204, 21, 0.13);
  color: var(--gold);
  font-size: 12px;
}
.dev-ar {
  margin-top: 9px;
  font-family: var(--font-ar);
  font-size: 22px;
  font-weight: 700;
  color: var(--gold);
  line-height: 1.5;
  transition: opacity 0.34s var(--ease), transform 0.34s var(--ease);
}
.dev-roman {
  font-size: 11px;
  color: var(--muted);
  font-style: italic;
  transition: opacity 0.34s var(--ease), transform 0.34s var(--ease);
}
.dev-msa {
  margin-top: 10px;
  padding-top: 9px;
  border-top: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.dev-msa span {
  font-size: 8.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--faint);
  text-transform: uppercase;
  flex: none;
}
.dev-msa b {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: var(--font-ar);
  font-size: 13px;
  font-weight: 600;
  color: var(--faint);
  text-decoration: line-through;
  text-decoration-color: rgba(248, 113, 113, 0.55);
}

.dev-hint {
  margin: -2px 0 14px;
  text-align: center;
  font-size: 9px;
  font-weight: 600;
  color: var(--faint);
  letter-spacing: 0.01em;
}

.dev-recent { display: grid; gap: 5px; }
.dev-recent .dev-label { margin-bottom: 2px; }
.dev-recent .rec {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 7px 9px;
  border-radius: var(--r-xs);
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid var(--line-soft);
}
.dev-recent b {
  font-size: 9.5px;
  font-weight: 600;
  color: var(--ink-soft);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dev-recent i {
  font-family: var(--font-ar);
  font-size: 11px;
  font-style: normal;
  font-weight: 600;
  color: rgba(250, 204, 21, 0.72);
  white-space: nowrap;
  flex: none;
}

/* swap-out animation state driven by JS */
.is-swapping .dev-en,
.is-swapping .dev-ar,
.is-swapping .dev-roman { opacity: 0; transform: translate3d(0, -7px, 0); }

/* ---------------------------------------------------------------- marquee */
.marquee {
  margin-top: clamp(2.5rem, 5vw, 4rem);
  padding: 1.05rem 0;
  border-top: 1px solid var(--line-soft);
  border-bottom: 1px solid var(--line-soft);
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 12%, #000 88%, transparent);
  mask-image: linear-gradient(to right, transparent, #000 12%, #000 88%, transparent);
}
.marquee-track {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  width: max-content;
  animation: marquee 46s linear infinite;
  will-change: transform;
}
.marquee-track span {
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--faint);
  white-space: nowrap;
  transition: color 0.25s var(--ease-soft);
}
.marquee-track i { color: rgba(250, 204, 21, 0.45); font-style: normal; }
.marquee:hover .marquee-track { animation-play-state: paused; }
.marquee:hover .marquee-track span { color: var(--ink-soft); }
@keyframes marquee {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}

/* ---------------------------------------------------------------- sections */
.section { position: relative; padding-block: var(--sec-y); }
.section-alt { background: linear-gradient(180deg, transparent, rgba(255, 255, 255, 0.022) 24%, rgba(255, 255, 255, 0.022) 76%, transparent); }

.section-head { max-width: 720px; margin-bottom: clamp(2.5rem, 5vw, 3.75rem); }
.section-head .section-sub { margin-top: 1.05rem; }

/* ---------------------------------------------------------------- about */
.about-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.88fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
}
.about-copy .lede { margin-top: 1.35rem; }
.about-copy .body { margin-top: 1.1rem; }

.about-points { margin-top: 1.9rem; display: grid; gap: 0.8rem; }
.about-points li {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  font-size: 0.95rem;
  color: var(--ink-soft);
  font-weight: 500;
}
.about-points .ic { color: var(--gold); font-size: 1.15em; margin-top: 0.22em; }
.about-points em { font-style: italic; color: var(--gold); }

.about-panel {
  position: relative;
  padding: clamp(1.25rem, 2.5vw, 1.75rem);
  border-radius: var(--r-xl);
  background: linear-gradient(165deg, var(--surface-2), var(--surface) 60%);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-card);
}
.panel-head { margin-bottom: 1.1rem; }
.compare { display: grid; gap: 0.85rem; }
.compare li {
  padding: 0.95rem 1.05rem;
  border-radius: var(--r-md);
  background: rgba(255, 255, 255, 0.028);
  border: 1px solid var(--line-soft);
}
/* The header is a <button> at every width so the mobile accordion needs no
   markup swap — above 640px it is styled back down to plain, inert text. */
.compare-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
  width: 100%;
  padding: 0;
  margin-bottom: 0.6rem;
  background: none;
  border: 0;
  text-align: start;
  color: inherit;
  font: inherit;
  cursor: default;
  pointer-events: none;
}
.compare-en {
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--muted);
}
.compare-chevron { display: none; }
.compare-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
  padding: 0.28rem 0;
}
/* Script above, how-to-say-it underneath. Without the second line the panel
   showed a reader two Arabic spellings and no way to pronounce either — which
   is the opposite of the claim the copy beside it makes. */
.compare-say {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.1rem;
  min-width: 0;
}
.compare-row b {
  font-family: var(--font-ar);
  font-size: 1.12rem;
  font-weight: 600;
  color: var(--faint);
  line-height: 1.5;
}
.compare-win b { color: var(--gold); font-size: 1.28rem; font-weight: 700; }

.compare-roman {
  font-size: 0.76rem;
  font-style: italic;
  font-weight: 500;
  color: var(--faint);
  letter-spacing: 0.005em;
  text-align: end;
}
.compare-win .compare-roman { color: var(--muted); }
.tag {
  font-size: 0.6rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 0.22rem 0.5rem;
  border-radius: var(--r-pill);
  flex: none;
}
.tag-msa { background: rgba(255, 255, 255, 0.06); color: var(--faint); }
.tag-gulf { background: var(--gold); color: var(--on-brand); }

/* ---------------------------------------------------------------- cards */
.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(285px, 1fr));
  gap: var(--gap);
}
.card {
  position: relative;
  padding: clamp(1.4rem, 2.4vw, 1.8rem);
  border-radius: var(--r-lg);
  background: linear-gradient(165deg, var(--surface-2), var(--surface) 72%);
  border: 1px solid var(--line);
  overflow: hidden;
  transition: transform 0.35s var(--ease), border-color 0.35s var(--ease), box-shadow 0.35s var(--ease);
  contain: layout paint;
}
.card::after { /* soft top-corner brand wash on hover */
  content: "";
  position: absolute;
  inset: -1px;
  pointer-events: none;
  background: radial-gradient(420px 200px at 0% 0%, rgba(250, 204, 21, 0.13), transparent 65%);
  opacity: 0;
  transition: opacity 0.35s var(--ease);
}
@media (hover: hover) {
  .card:hover { transform: translateY(-5px); border-color: var(--hairline); box-shadow: var(--shadow-card); }
  .card:hover::after { opacity: 1; }
}
.card h3 {
  margin-top: 1.15rem;
  font-size: 1.16rem;
  font-weight: 700;
  letter-spacing: -0.025em;
}
.card p { margin-top: 0.6rem; color: var(--muted); font-size: 0.925rem; line-height: 1.65; }

.card-ic {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: var(--r-sm);
  background: linear-gradient(150deg, #262626, #171717);
  border: 1px solid var(--hairline);
  color: var(--gold);
  font-size: 1.35rem;
}
.card-ic-lg { width: 54px; height: 54px; border-radius: var(--r-md); font-size: 1.6rem; }

.card-tag {
  display: inline-block;
  margin-top: 1.15rem;
  padding: 0.28rem 0.66rem;
  border-radius: var(--r-pill);
  background: rgba(250, 204, 21, 0.09);
  border: 1px solid var(--hairline);
  color: var(--gold);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.mini-features {
  margin-top: var(--gap);
  padding: 1.35rem 1.5rem;
  border-radius: var(--r-lg);
  border: 1px dashed var(--line);
  /* fixed 3 columns so the six items form two even rows, never an orphan */
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.85rem 1.5rem;
}
.mini-features li {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--muted);
}
.mini-features .ic { color: var(--gold); font-size: 1.1em; }

/* ---------------------------------------------------------------- steps */
.steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(255px, 1fr));
  gap: var(--gap);
  counter-reset: step;
}
.step {
  position: relative;
  padding: clamp(1.4rem, 2.4vw, 1.8rem);
  border-radius: var(--r-lg);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.012));
  border: 1px solid var(--line);
  transition: border-color 0.35s var(--ease), transform 0.35s var(--ease);
  contain: layout paint;
}
@media (hover: hover) {
  .step:hover { border-color: var(--hairline); transform: translateY(-4px); }
}
.step-num {
  display: inline-block;
  font-size: 2.4rem;
  font-weight: 800;
  letter-spacing: -0.05em;
  line-height: 1;
  background: linear-gradient(160deg, rgba(250, 204, 21, 0.95), rgba(250, 204, 21, 0.18));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.step h3 { margin-top: 0.85rem; font-size: 1.12rem; font-weight: 700; letter-spacing: -0.022em; }
.step p { margin-top: 0.55rem; color: var(--muted); font-size: 0.905rem; line-height: 1.65; }

.step-visual {
  margin-top: 1.25rem;
  padding-top: 1.15rem;
  border-top: 1px solid var(--line-soft);
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.45rem;
  color: var(--faint);
}
.mini-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.34rem 0.66rem;
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--line);
  font-size: 0.755rem;
  font-weight: 700;
  color: var(--ink-soft);
}
.mini-chip .ic { font-size: 1em; color: var(--gold); }
.mini-chip-on {
  background: rgba(250, 204, 21, 0.13);
  border-color: var(--hairline);
  color: var(--gold);
}
.mini-chip[dir="rtl"] { font-family: var(--font-ar); font-size: 0.88rem; }

/* ---------------------------------------------------------------- categories */
.cat-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1.6rem;
}
.chip-filter {
  display: inline-flex;
  align-items: center;
  gap: 0.42rem;
  padding: 0.52rem 0.95rem;
  border-radius: var(--r-pill);
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.03);
  font-size: 0.83rem;
  font-weight: 700;
  color: var(--muted);
  transition: color 0.2s var(--ease-soft), background-color 0.2s var(--ease-soft),
              border-color 0.2s var(--ease-soft);
}
.chip-filter b {
  font-size: 0.68rem;
  font-weight: 800;
  color: var(--faint);
  transition: color 0.2s var(--ease-soft);
}
@media (hover: hover) {
  .chip-filter:hover { color: var(--ink); border-color: var(--hairline); }
}
.chip-filter.is-active {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--on-brand);
  box-shadow: 0 10px 26px -12px rgba(250, 204, 21, 0.7);
}
.chip-filter.is-active b { color: rgba(10, 10, 10, 0.6); }

.cat-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.cat {
  padding: 0.52rem 0.9rem;
  border-radius: var(--r-pill);
  border: 1px solid var(--line);
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.015));
  font-size: 0.83rem;
  font-weight: 600;
  color: var(--ink-soft);
  transition: color 0.2s var(--ease-soft), border-color 0.2s var(--ease-soft),
              background-color 0.2s var(--ease-soft), transform 0.2s var(--ease-soft);
}
@media (hover: hover) {
  .cat:hover {
    color: var(--gold);
    border-color: var(--hairline);
    background: rgba(250, 204, 21, 0.09);
    transform: translateY(-2px);
  }
}
.cat.is-hidden { display: none; }

.cat-note {
  margin-top: 1.9rem;
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.85rem 1.15rem;
  border-radius: var(--r-md);
  border: 1px solid var(--hairline);
  background: rgba(250, 204, 21, 0.06);
  color: var(--ink-soft);
  font-size: 0.885rem;
  font-weight: 500;
}
.cat-note .ic { color: var(--gold); font-size: 1.15em; flex: none; }

/* ---------------------------------------------------------------- learn
   The ordered path reads as one connected rail: the joining line is drawn on
   each node's ::before rather than as a separate element, so it survives the
   flip to a vertical rail on phones with no extra markup. */
.path {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0.9rem;
  margin-bottom: calc(var(--gap) * 1.6);
  counter-reset: path;
}
.path-step {
  position: relative;
  padding: 1.4rem 1.15rem 1.3rem;
  border-radius: var(--r-lg);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.012));
  border: 1px solid var(--line);
  transition: transform 0.35s var(--ease), border-color 0.35s var(--ease);
  contain: layout paint;
}
@media (hover: hover) {
  .path-step:hover { transform: translateY(-4px); border-color: var(--hairline); }
}
.path-node {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: linear-gradient(150deg, #262626, #171717);
  border: 1px solid var(--hairline);
  color: var(--gold);
  font-size: 1.25rem;
}
/* the rail linking one node to the next */
.path-step::before {
  content: "";
  position: absolute;
  top: calc(1.4rem + 23px);
  left: calc(1.15rem + 46px);
  right: -0.9rem;
  height: 1px;
  background: linear-gradient(90deg, var(--hairline), rgba(250, 204, 21, 0.06));
}
.path-step:last-child::before { display: none; }

.path-i {
  display: block;
  margin-top: 1.05rem;
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold);
}
.path-step h3 { margin-top: 0.3rem; font-size: 1.04rem; font-weight: 700; letter-spacing: -0.02em; }
.path-step p { margin-top: 0.4rem; font-size: 0.87rem; color: var(--muted); line-height: 1.6; }

.study-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--gap);
}
.study-card {
  display: flex;
  flex-direction: column;
  padding: clamp(1.4rem, 2.4vw, 1.85rem);
  border-radius: var(--r-lg);
  background: linear-gradient(165deg, var(--surface-2), var(--surface) 72%);
  border: 1px solid var(--line);
  transition: transform 0.35s var(--ease), border-color 0.35s var(--ease);
  contain: layout paint;
}
@media (hover: hover) {
  .study-card:hover { transform: translateY(-4px); border-color: var(--hairline); }
}
.study-card h3 { margin-top: 1.1rem; font-size: 1.14rem; font-weight: 700; letter-spacing: -0.022em; }
.study-card p { margin-top: 0.55rem; color: var(--muted); font-size: 0.92rem; line-height: 1.65; }

.study-lead {
  grid-column: span 1;
  background:
    radial-gradient(520px 260px at 0% 0%, rgba(250, 204, 21, 0.09), transparent 62%),
    linear-gradient(165deg, var(--surface-3), var(--surface) 70%);
  border-color: var(--hairline);
}

/* coach mock */
.coach {
  margin-top: auto;
  padding: 1rem;
  border-radius: var(--r-md);
  background: rgba(0, 0, 0, 0.45);
  border: 1px solid var(--line);
  text-align: center;
}
.coach-en { margin: 0; font-size: 0.8rem; font-weight: 600; color: var(--muted); }
.coach-ar {
  margin-top: 0.3rem;
  font-family: var(--font-ar);
  font-size: 1.7rem;
  font-weight: 700;
  color: var(--gold);
  line-height: 1.5;
}
.coach-roman { font-size: 0.78rem; font-style: italic; color: var(--muted); }
.coach-row {
  margin-top: 0.9rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.45rem;
}
.coach-mic, .coach-ok {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.36rem 0.72rem;
  border-radius: var(--r-pill);
  font-size: 0.72rem;
  font-weight: 700;
  white-space: nowrap;
}
.coach-mic { background: linear-gradient(140deg, var(--gold-soft), var(--gold-deep)); color: var(--on-brand); }
.coach-ok {
  background: rgba(52, 211, 153, 0.12);
  border: 1px solid rgba(52, 211, 153, 0.3);
  color: var(--success);
}

/* streak */
.streak-strip {
  margin-top: auto;
  padding-top: 1.35rem;
  display: flex;
  align-items: center;
  gap: 0.3rem;
}
.streak-strip i {
  width: 100%;
  height: 26px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.06);
}
.streak-strip i.on {
  background: linear-gradient(180deg, var(--gold), var(--gold-deep));
  box-shadow: 0 4px 14px -6px rgba(250, 204, 21, 0.8);
}
.streak-strip b {
  margin-left: 0.55rem;
  font-size: 0.76rem;
  font-weight: 800;
  color: var(--gold);
  white-space: nowrap;
}

/* exam */
.exam-list { margin-top: auto; padding-top: 1.35rem; display: grid; gap: 0.4rem; }
.exam-list li {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.5rem 0.7rem;
  border-radius: var(--r-xs);
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid var(--line-soft);
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--ink-soft);
}
.exam-list b {
  margin-left: auto;
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--faint);
  white-space: nowrap;
}
.exam-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex: none;
  background: rgba(255, 255, 255, 0.16);
}
.exam-dot.done { background: var(--gold); box-shadow: 0 0 8px rgba(250, 204, 21, 0.6); }
.exam-dot.now { background: var(--amber-deep); box-shadow: 0 0 8px rgba(245, 158, 11, 0.6); }
.exam-list li:has(.exam-dot.done) b { color: var(--gold); }

/* ---------------------------------------------------------------- bento */
.bento {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--gap);
}
.bento-card {
  padding: clamp(1.4rem, 2.4vw, 1.9rem);
  border-radius: var(--r-lg);
  background: linear-gradient(165deg, var(--surface-2), var(--surface) 72%);
  border: 1px solid var(--line);
  transition: transform 0.35s var(--ease), border-color 0.35s var(--ease);
  contain: layout paint;
}
@media (hover: hover) {
  .bento-card:hover { transform: translateY(-4px); border-color: var(--hairline); }
}
.bento-card h3 { margin-top: 1.1rem; font-size: 1.12rem; font-weight: 700; letter-spacing: -0.022em; }
.bento-card p { margin-top: 0.55rem; color: var(--muted); font-size: 0.915rem; line-height: 1.65; }

/* The lead occupies a 2×2 block, so the remaining five cards tile the rest of
   the 3×3 grid exactly — no orphan card on a half-empty final row. */
.bento-lead {
  grid-column: 1 / 3;
  grid-row: 1 / 3;
  display: flex;
  flex-direction: column;
  background:
    radial-gradient(600px 300px at 100% 0%, rgba(250, 204, 21, 0.1), transparent 62%),
    linear-gradient(165deg, var(--surface-3), var(--surface) 70%);
  border-color: var(--hairline);
}
.bento-lead h3 { font-size: clamp(1.3rem, 2.1vw, 1.6rem); }
.bento-lead p { font-size: 0.97rem; max-width: 62ch; }

.bento-proof {
  margin-block: auto;    /* centred in the tall lead card's leftover space */
  padding-top: 1.75rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
}
.proof {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  padding: 0.7rem 1rem;
  border-radius: var(--r-sm);
  background: rgba(0, 0, 0, 0.45);
  border: 1px solid var(--line);
}
.proof b { font-family: var(--font-ar); font-size: 1.2rem; color: var(--gold); font-weight: 700; }
.proof i { font-size: 0.78rem; color: var(--ink-soft); font-style: italic; }
.proof span { font-size: 0.68rem; color: var(--faint); text-transform: uppercase; letter-spacing: 0.09em; font-weight: 700; }

/* ---------------------------------------------------------------- showcase */
.showcase { overflow: hidden; isolation: isolate; }
.showcase-glow {
  position: absolute;
  z-index: -1;
  bottom: -30%;
  left: 50%;
  transform: translateX(-50%);
  width: min(1000px, 130vw);
  aspect-ratio: 1;
  pointer-events: none;
  background: radial-gradient(circle, rgba(250, 204, 21, 0.11), transparent 62%);
}

.phones {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: clamp(1rem, 3vw, 2.75rem);
  flex-wrap: wrap;
}
.phone-slot { display: flex; flex-direction: column; align-items: center; gap: 1.25rem; }
.phone-side .device { width: 268px; }
.phone-center .device {
  width: 292px;
  box-shadow: var(--shadow-lift), 0 0 0 1px rgba(250, 204, 21, 0.16) inset, 0 30px 90px -30px rgba(250, 204, 21, 0.35);
}
.phone-cap { text-align: center; font-size: 0.83rem; color: var(--faint); line-height: 1.45; }
.phone-cap b { display: block; font-size: 0.95rem; color: var(--ink); font-weight: 700; margin-bottom: 0.15rem; }

/* Carousel dots — the row only scrolls below 900px, so they stay hidden until
   the media query below turns them on. */
.phone-dots { display: none; justify-content: center; align-items: center; gap: 0.35rem; margin-top: 1.6rem; }
.phone-dot {
  width: 28px;
  height: 28px;
  padding: 0;
  border: 0;
  background: none;
  display: grid;
  place-items: center;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: width 0.3s var(--ease);
}
.phone-dot::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, 0.22);
  transition: width 0.3s var(--ease), background-color 0.3s var(--ease);
}
.phone-dot.is-on { width: 40px; }
.phone-dot.is-on::before { width: 24px; background: var(--gold); }
.phone-dot:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; border-radius: var(--r-pill); }

/* home screen */
.home-top { display: flex; align-items: center; gap: 6px; padding-top: 2px; }
.avatar {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: linear-gradient(150deg, var(--gold-soft), var(--gold-deep));
  color: var(--on-brand);
  font-size: 11px;
  font-weight: 800;
}
.home-greet { margin-top: 14px; font-size: 15px; color: var(--muted); line-height: 1.3; }
.home-greet b { display: block; font-size: 22px; color: var(--ink); font-weight: 800; letter-spacing: -0.03em; }

.home-ring {
  margin-top: 14px;
  padding: 12px;
  border-radius: var(--r-md);
  background: var(--surface-2);
  border: 1px solid var(--line);
  display: flex;
  align-items: center;
  gap: 12px;
}
.ring {
  position: relative;
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  flex: none;
  background: conic-gradient(var(--gold) calc(var(--p) * 1%), rgba(255, 255, 255, 0.08) 0);
}
.ring::after {
  content: "";
  position: absolute;
  inset: 6px;
  border-radius: 50%;
  background: var(--surface-2);
}
.ring b { position: relative; z-index: 1; font-size: 15px; font-weight: 800; color: var(--ink); }
.ring b i { font-size: 9px; font-style: normal; color: var(--muted); }
.home-ring-meta span { font-size: 11px; font-weight: 700; color: var(--ink); }
.home-ring-meta p { font-size: 9px; color: var(--faint); margin-top: 2px; }

.home-quick {
  margin-top: 12px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.home-quick .q {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 11px 10px;
  border-radius: var(--r-sm);
  background: linear-gradient(160deg, #242424, #171717);
  border: 1px solid var(--line);
}
.home-quick .ic { font-size: 17px; color: var(--gold); margin-bottom: 6px; }
.home-quick b { font-size: 11px; font-weight: 700; color: var(--ink); }
.home-quick i { font-size: 8.5px; font-style: normal; color: var(--faint); }
/* mirrors `tileTints.emergency` in the app — red ink on a deep red tile */
.home-quick .q-alert { background: linear-gradient(160deg, #2A1414, #1F0E0E); }
.home-quick .q-alert .ic { color: var(--danger); }

.tabbar {
  margin-top: auto;
  display: flex;
  justify-content: space-around;
  align-items: center;
  padding: 12px 10px 6px;
  border-top: 1px solid var(--line-soft);
}
.tabbar i { width: 20px; height: 4px; border-radius: 2px; background: rgba(255, 255, 255, 0.14); }
.tabbar i.on { background: var(--gold); box-shadow: 0 0 12px rgba(250, 204, 21, 0.55); }

/* camera screen */
.device-screen-cam { padding: 0 0 12px; }
.device-screen-cam .dev-status { padding-inline: 18px; }
.cam-view {
  position: relative;
  flex: 1;
  margin: 4px 10px 10px;
  border-radius: var(--r-md);
  overflow: hidden;
  background:
    radial-gradient(120% 80% at 50% 0%, #2a2418, #141210 55%, #0a0a0a);
}
.cam-frame {
  position: absolute;
  inset: 26px 18px;
  border-radius: var(--r-sm);
  /* four corner brackets */
  background:
    linear-gradient(var(--gold), var(--gold)) left  top    / 18px 2px no-repeat,
    linear-gradient(var(--gold), var(--gold)) left  top    / 2px 18px no-repeat,
    linear-gradient(var(--gold), var(--gold)) right top    / 18px 2px no-repeat,
    linear-gradient(var(--gold), var(--gold)) right top    / 2px 18px no-repeat,
    linear-gradient(var(--gold), var(--gold)) left  bottom / 18px 2px no-repeat,
    linear-gradient(var(--gold), var(--gold)) left  bottom / 2px 18px no-repeat,
    linear-gradient(var(--gold), var(--gold)) right bottom / 18px 2px no-repeat,
    linear-gradient(var(--gold), var(--gold)) right bottom / 2px 18px no-repeat;
  opacity: 0.85;
}
.ocr {
  position: absolute;
  left: 30px;
  right: 30px;
  padding: 7px 9px;
  border-radius: 9px;
  background: rgba(6, 6, 6, 0.88);
  border: 1px solid var(--hairline);
  /* Stacked, not side by side: with the price on both lines there is no room
     for two columns, and detected-text-above-translation is what the camera
     screen actually shows. */
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.ocr b {
  font-family: var(--font-ar);
  font-size: 13px;
  color: var(--gold);
  font-weight: 700;
  text-align: right;
  line-height: 1.35;
}
.ocr i { font-size: 9.5px; font-style: normal; color: var(--ink-soft); line-height: 1.35; }
.ocr-1 { top: 60px; }
.ocr-2 { top: 122px; }
.ocr-3 { top: 184px; }
.ocr-4 { top: 246px; }

/* Full-height band travelling on a percentage transform, so the sweep covers
   the viewfinder at any device size without a hard-coded pixel distance. */
.scanline {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 100%;
  background: linear-gradient(180deg, transparent 0, rgba(250, 204, 21, 0.18) 22px, transparent 46px);
  animation: scan 4.6s var(--ease-soft) infinite;
}
@keyframes scan {
  0%   { transform: translate3d(0, -46px, 0); opacity: 0; }
  10%  { opacity: 1; }
  85%  { opacity: 1; }
  100% { transform: translate3d(0, 100%, 0); opacity: 0; }
}
.cam-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 0 14px;
}
.cam-pill {
  padding: 5px 9px;
  border-radius: var(--r-pill);
  background: rgba(250, 204, 21, 0.14);
  border: 1px solid var(--hairline);
  color: var(--gold);
  font-size: 8.5px;
  font-weight: 800;
  letter-spacing: 0.05em;
  white-space: nowrap;
}
.cam-pill-ghost { background: rgba(255, 255, 255, 0.06); border-color: var(--line); color: var(--ink-soft); }
.shutter {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  flex: none;
  background: linear-gradient(150deg, var(--gold-soft), var(--gold-deep));
  box-shadow: 0 0 0 3px rgba(250, 204, 21, 0.22), 0 10px 24px -8px rgba(250, 204, 21, 0.6);
}

/* learn screen */
.learn-streak {
  margin-top: 6px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px;
  border-radius: var(--r-md);
  background: linear-gradient(140deg, rgba(250, 204, 21, 0.16), rgba(245, 158, 11, 0.05));
  border: 1px solid var(--hairline);
}
.flame {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: linear-gradient(150deg, var(--gold), var(--amber-deep));
  color: var(--on-brand);
  font-size: 17px;
  flex: none;
}
.learn-streak b { font-size: 12px; font-weight: 800; color: var(--ink); display: block; }
.learn-streak i { font-size: 9px; font-style: normal; color: var(--muted); }

.learn-label {
  margin-top: 14px;
  margin-bottom: 7px;
  font-size: 8.5px;
  font-weight: 800;
  letter-spacing: 0.16em;
  color: var(--faint);
}
.learn-card {
  padding: 13px;
  border-radius: var(--r-md);
  background: var(--surface-2);
  border: 1px solid var(--line);
  text-align: center;
}
.learn-en { font-size: 11px; color: var(--muted); font-weight: 600; }
.learn-ar { font-family: var(--font-ar); font-size: 24px; font-weight: 700; color: var(--gold); margin-top: 4px; line-height: 1.5; }
.learn-roman { font-size: 10px; color: var(--muted); font-style: italic; }
.learn-play {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: 10px;
  padding: 6px 14px;
  border-radius: var(--r-pill);
  background: linear-gradient(140deg, var(--gold-soft), var(--gold-deep));
  color: var(--on-brand);
  font-size: 10px;
  font-weight: 800;
}
.learn-list { display: grid; gap: 6px; }
.learn-list li {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 11px;
  border-radius: var(--r-sm);
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid var(--line-soft);
  font-size: 11px;
  font-weight: 600;
  color: var(--ink-soft);
}
.learn-list b { margin-left: auto; font-size: 9.5px; color: var(--faint); font-weight: 700; }
.learn-list .dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.16);
  flex: none;
}
.learn-list .dot.done { background: var(--gold); box-shadow: 0 0 8px rgba(250, 204, 21, 0.6); }
.learn-list .dot.half { background: linear-gradient(90deg, var(--gold) 50%, rgba(255, 255, 255, 0.16) 50%); }

/* ---------------------------------------------------------------- cta */
.cta { padding-block: clamp(3rem, 6vw, 5rem) var(--sec-y); }
.cta-panel {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  text-align: center;
  padding: clamp(2.5rem, 6vw, 4.5rem) clamp(1.35rem, 5vw, 3.5rem);
  border-radius: var(--r-2xl);
  background: linear-gradient(165deg, var(--surface-3), #0C0C0C 62%);
  border: 1px solid var(--hairline);
  box-shadow: var(--shadow-lift);
}
.cta-glow {
  position: absolute;
  z-index: -1;
  top: -55%;
  left: 50%;
  transform: translateX(-50%);
  width: min(780px, 118%);
  aspect-ratio: 1;
  pointer-events: none;
  background: radial-gradient(circle, rgba(250, 204, 21, 0.22), transparent 60%);
}
.cta-mark { width: 66px; height: 66px; margin-inline: auto; object-fit: contain; }
.cta-panel .h2 { margin-top: 1.35rem; }
.cta-panel > p {
  margin: 1.1rem auto 0;
  max-width: 54ch;
  color: var(--muted);
  font-size: clamp(0.98rem, 1.3vw, 1.08rem);
  line-height: 1.68;
}

.store-row {
  margin-top: 2.1rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.85rem;
}
.store-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 1.5rem 0.75rem 1.2rem;
  border-radius: var(--r-md);
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.045);
  transition: transform 0.22s var(--ease), border-color 0.22s var(--ease), background-color 0.22s var(--ease);
}
@media (hover: hover) {
  .store-btn:hover { transform: translateY(-2px); border-color: var(--hairline); background: rgba(250, 204, 21, 0.08); }
}
.store-btn:active { transform: scale(0.985); }
.store-ic {
  width: 26px;
  height: 30px;
  flex: none;
  background: var(--gold);
  /* Apple mark, drawn as a mask so it inherits the brand gold */
  -webkit-mask: center / contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M16.36 12.72c-.02-2.3 1.88-3.4 1.96-3.46-1.07-1.56-2.73-1.78-3.32-1.8-1.41-.14-2.76.83-3.48.83-.72 0-1.83-.81-3-.79-1.54.02-2.96.9-3.75 2.28-1.6 2.78-.41 6.9 1.15 9.16.76 1.11 1.67 2.35 2.86 2.3 1.15-.05 1.58-.74 2.97-.74s1.78.74 3 .72c1.24-.02 2.02-1.13 2.78-2.24.87-1.28 1.23-2.52 1.25-2.58-.03-.01-2.4-.92-2.42-3.68zM14.1 5.9c.63-.77 1.06-1.83.94-2.9-.91.04-2.01.61-2.67 1.37-.59.68-1.1 1.76-.96 2.8 1.01.08 2.05-.51 2.69-1.27z'/%3E%3C/svg%3E");
  mask: center / contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M16.36 12.72c-.02-2.3 1.88-3.4 1.96-3.46-1.07-1.56-2.73-1.78-3.32-1.8-1.41-.14-2.76.83-3.48.83-.72 0-1.83-.81-3-.79-1.54.02-2.96.9-3.75 2.28-1.6 2.78-.41 6.9 1.15 9.16.76 1.11 1.67 2.35 2.86 2.3 1.15-.05 1.58-.74 2.97-.74s1.78.74 3 .72c1.24-.02 2.02-1.13 2.78-2.24.87-1.28 1.23-2.52 1.25-2.58-.03-.01-2.4-.92-2.42-3.68zM14.1 5.9c.63-.77 1.06-1.83.94-2.9-.91.04-2.01.61-2.67 1.37-.59.68-1.1 1.76-.96 2.8 1.01.08 2.05-.51 2.69-1.27z'/%3E%3C/svg%3E");
}
.store-ic-play {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M3.6 2.3c-.3.3-.5.8-.5 1.4v16.6c0 .6.2 1.1.5 1.4l.1.1 9.3-9.3v-.2L3.6 2.3zM16.4 15.3l-3.1-3.1v-.2l3.1-3.1.1.1 3.7 2.1c1.1.6 1.1 1.6 0 2.2l-3.8 2zM15.9 15.8 12.7 12.6l-9.1 9.1c.4.4 1 .4 1.7 0l10.6-5.9M15.9 8.2 5.3 2.3c-.7-.4-1.3-.4-1.7 0l9.1 9.1 3.2-3.2z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M3.6 2.3c-.3.3-.5.8-.5 1.4v16.6c0 .6.2 1.1.5 1.4l.1.1 9.3-9.3v-.2L3.6 2.3zM16.4 15.3l-3.1-3.1v-.2l3.1-3.1.1.1 3.7 2.1c1.1.6 1.1 1.6 0 2.2l-3.8 2zM15.9 15.8 12.7 12.6l-9.1 9.1c.4.4 1 .4 1.7 0l10.6-5.9M15.9 8.2 5.3 2.3c-.7-.4-1.3-.4-1.7 0l9.1 9.1 3.2-3.2z'/%3E%3C/svg%3E");
}
.store-txt { text-align: start; line-height: 1.2; }
.store-txt i { display: block; font-style: normal; font-size: 0.66rem; color: var(--muted); font-weight: 600; }
.store-txt b { font-size: 1.02rem; font-weight: 700; letter-spacing: -0.02em; }

.store-note {
  min-height: 1.4rem;
  margin-top: 1rem;
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--gold);
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity 0.28s var(--ease), transform 0.28s var(--ease);
}
.store-note.is-on { opacity: 1; transform: none; }

.cta-points {
  margin-top: 1.5rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.65rem 1.6rem;
}
.cta-points li {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--muted);
}
.cta-points .ic { color: var(--gold); font-size: 1.05em; }

/* ---------------------------------------------------------------- footer */
.footer {
  padding-block: clamp(3rem, 6vw, 4.5rem) 2.25rem;
  border-top: 1px solid var(--line-soft);
  background: rgba(255, 255, 255, 0.015);
}
.footer-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr));
  gap: clamp(1.75rem, 4vw, 3rem);
}
.footer-brand p {
  margin-top: 1.05rem;
  max-width: 38ch;
  color: var(--faint);
  font-size: 0.885rem;
  line-height: 1.65;
}
.footer-col { display: flex; flex-direction: column; gap: 0.7rem; align-items: flex-start; }
.footer-col h4 {
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink);
  margin-bottom: 0.3rem;
}
.footer-col a {
  font-size: 0.885rem;
  color: var(--muted);
  transition: color 0.2s var(--ease-soft);
}
.footer-col a:hover { color: var(--gold); }

.footer-bottom {
  margin-top: clamp(2.25rem, 5vw, 3.25rem);
  padding-top: 1.5rem;
  border-top: 1px solid var(--line-soft);
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.5rem;
  /* Centred: the copyright is the only thing left on this row, and a lone
     line pinned to the left edge reads as a leftover. */
  justify-content: center;
  align-items: center;
  text-align: center;
  font-size: 0.82rem;
  color: var(--faint);
}
.dot-live {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 0 0 rgba(250, 204, 21, 0.55);
  animation: livePulse 2.6s var(--ease-soft) infinite;
}
@keyframes livePulse {
  0%   { box-shadow: 0 0 0 0 rgba(250, 204, 21, 0.5); }
  70%  { box-shadow: 0 0 0 8px rgba(250, 204, 21, 0); }
  100% { box-shadow: 0 0 0 0 rgba(250, 204, 21, 0); }
}

/* ------------------------------------------------------------ the form
   Field primitives, shared by the hero waitlist panel (.hero-join). */
.field { display: grid; gap: 0.4rem; }
.field-label {
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--muted);
}
.input {
  width: 100%;
  padding: 0.82rem 1rem;
  border-radius: var(--r-md);
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.035);
  color: var(--ink);
  font: inherit;
  font-size: 0.95rem;
  transition: border-color 0.22s var(--ease), background-color 0.22s var(--ease);
}
.input::placeholder { color: var(--faint); }
.input:focus {
  outline: none;
  border-color: var(--gold);
  background: rgba(255, 255, 255, 0.055);
}
.input.is-invalid { border-color: var(--danger); }

.form-error {
  margin: 0.1rem 0 0;
  font-size: 0.83rem;
  font-weight: 600;
  color: var(--danger);
}
.form-error[hidden] { display: none; }

.btn-block { width: 100%; margin-top: 0.35rem; }
.btn[disabled] { opacity: 0.6; pointer-events: none; }

/* ---------------------------------------------------------------- reveal
   Scoped to `html.js` so that with JavaScript off nothing is ever left
   stuck at opacity 0 — the page just renders fully, un-animated. */
.js .reveal {
  opacity: 0;
  transform: translate3d(0, 20px, 0);
  transition: opacity 0.68s var(--ease), transform 0.68s var(--ease);
  transition-delay: calc(var(--d, 0) * 90ms);
}
.js .reveal.is-in { opacity: 1; transform: none; }

/* ==========================================================================
   Responsive
   ========================================================================== */

/* --- large tablet / small laptop --- */
@media (max-width: 1080px) {
  .hero-inner { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); }
  .float-chip-a { left: -2%; }
  .float-chip-b { right: -2%; }
  /* Two columns: lead and the closing card each span the full width, so the
     remaining four tile as two clean rows. */
  /* Five path steps no longer fit across; 3 + 2 keeps the rail readable. */
  .path { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .path-step:nth-child(3)::before { display: none; }

  .bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bento-lead { grid-column: 1 / 3; grid-row: auto; }
  .bento-card:last-child { grid-column: 1 / 3; }
  .footer-grid { grid-template-columns: minmax(0, 1.3fr) repeat(3, minmax(0, 1fr)); }
}

/* --- tablet --- */
@media (max-width: 900px) {
  html { scroll-padding-top: 84px; }

  .nav-links { display: none; }
  .nav-toggle { display: inline-flex; }
  .nav-inner { justify-content: space-between; }
  .nav-actions .btn-primary { display: none; }
  .nav.is-open { background: rgba(5, 5, 5, 0.97); border-bottom-color: var(--line-soft); }
  .nav-mobile { display: flex; }
  .nav-mobile[hidden] { display: none; }

  .hero { padding-top: clamp(6rem, 16vw, 8rem); }
  .hero-inner { grid-template-columns: minmax(0, 1fr); gap: 3rem; }
  .hero-copy { text-align: center; }
  .hero-sub { margin-inline: auto; }
  .hero-cta { justify-content: center; }
  /* The hero centres below 900px; the panel centres with it but its own
     contents stay left-aligned, since centred form labels read badly. */
  .hero-join { margin-inline: auto; justify-content: center; }
  .hero-stats { max-width: 620px; margin-inline: auto; }
  .stat { text-align: center; }
  .hero-stage { min-height: auto; order: -1; }
  .float-chip-a { top: 6%; left: 0; }
  .float-chip-b { top: auto; bottom: 24%; right: 0; }
  .float-chip-c { display: none; }

  .about-grid { grid-template-columns: minmax(0, 1fr); }
  .cat-note { display: flex; }

  .study-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .study-lead { grid-column: 1 / 3; }
  .mini-features { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  /* Three phones no longer fit in a row, so instead of stacking into a very
     tall column they become a snap carousel: one screen at a time, swipeable,
     with the dots below mirroring (and driving) the position. */
  .phones {
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 2rem;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    /* Bleed to the screen edges and pad by half the leftover width so the
       first and last phone can still come to rest dead centre. The 50% is a
       percentage of .wrap's content box, so the bleed is added back on. */
    margin-inline: calc(var(--pad-x) * -1);
    padding: 1rem max(var(--pad-x), calc(50% + var(--pad-x) - 135px)) 1.25rem;
  }
  .phones::-webkit-scrollbar { display: none; }
  .phone-slot { flex: 0 0 auto; scroll-snap-align: center; max-width: 100%; }
  /* The caption is a static child sitting next to a positioned one, so it would
     otherwise paint underneath the phone frame wherever the two meet. */
  .phone-cap { position: relative; z-index: 1; }

  /* Slots parked off the right edge never intersect the viewport, so their
     reveal observer would not fire until they were swiped in — and a phone
     that fades in mid-swipe reads as a loading glitch. Show them outright. */
  .js .phones .reveal { opacity: 1; transform: none; }

  /* Height stated outright instead of left to `aspect-ratio`: Safari resolves
     the ratio after sizing the scroll container, so the strip came out only as
     tall as the phone itself and clipped the caption below it. 620/300 is the
     frame's ratio. */
  .phone-side .device, .phone-center .device { width: 270px; height: 558px; }

  .phone-dots { display: flex; }

  .footer-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem 1.25rem; }
  .footer-brand { grid-column: 1 / -1; }
}

/* --- phone --- */
@media (max-width: 640px) {
  body { font-size: 15.5px; }

  .hero-title { font-size: clamp(2.2rem, 10vw, 3rem); }
  .hero-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.35rem 0.75rem; }
  .hero-cta .btn { flex: 1 1 100%; }
  /* Two inputs side by side at phone width leaves neither readable. */

  .device, .device-hero, .phone-side .device, .phone-center .device {
    width: min(300px, 82vw);
  }
  /* keep the snap padding matched to the phone-sized device */
  .phones {
    gap: 1.5rem;
    padding-inline: max(var(--pad-x), calc(50% + var(--pad-x) - min(150px, 41vw)));
  }
  .phone-side .device, .phone-center .device {
    height: calc(min(300px, 82vw) * 620 / 300);
  }

  .marquee { margin-top: 2.5rem; }
  .marquee-track { animation-duration: 34s; }

  .about-panel { padding: 1.15rem; }
  .compare li { padding: 0.85rem 0.9rem; }
  .compare-row b { font-size: 1.05rem; }
  .compare-win b { font-size: 1.18rem; }

  /* --- phones: each card collapses to its English phrase ---
     Scoped to `.js` so with scripting off every answer stays visible —
     there would otherwise be nothing able to open them. */
  .js .compare li { padding-bottom: 0; transition: border-color 0.3s var(--ease); }
  .js .compare li.is-open { border-color: var(--line); }

  .js .compare-head {
    cursor: pointer;
    pointer-events: auto;
    padding-bottom: 0.85rem;
    margin-bottom: 0;
    -webkit-tap-highlight-color: transparent;
  }
  .js .compare-head:focus-visible {
    outline: 2px solid var(--gold);
    outline-offset: 3px;
    border-radius: var(--r-sm);
  }
  .js .compare-head .compare-en { font-size: 0.92rem; color: var(--ink-soft); }
  .js li.is-open .compare-head .compare-en { color: var(--ink); }

  .js .compare-chevron {
    display: block;
    font-size: 1.05rem;
    color: var(--muted);
    transition: transform 0.32s var(--ease), color 0.32s var(--ease);
  }
  .js li.is-open .compare-chevron { transform: rotate(180deg); color: var(--gold); }

  /* 0fr → 1fr animates to the row's natural height without measuring it. */
  .js .compare-body {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.34s var(--ease);
  }
  .js li.is-open .compare-body { grid-template-rows: 1fr; }
  .js .compare-rows {
    overflow: hidden;
    min-height: 0;
    opacity: 0;
    transition: opacity 0.24s var(--ease);
  }
  .js li.is-open .compare-rows { opacity: 1; }
  .js .compare-rows > :last-child { margin-bottom: 0.85rem; }

  /* why-Jusr bento: 2-up, with the text-heavy lead and the odd last card
     spanning both columns so no card is orphaned on a half-empty row. */
  .bento { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.7rem; }
  .bento-lead { grid-column: 1 / 3; grid-row: auto; }
  .bento-card:last-child { grid-column: 1 / 3; }
  .bento-card { padding: 1.05rem 0.9rem; }
  .bento-card h3 { margin-top: 0.85rem; font-size: 1rem; }
  .bento-card p { margin-top: 0.45rem; font-size: 0.84rem; line-height: 1.55; }
  .bento-lead h3 { font-size: 1.18rem; }
  .bento-lead p { font-size: 0.88rem; }
  .card-ic-lg { width: 44px; height: 44px; font-size: 1.3rem; }
  .bento-proof { padding-top: 1.15rem; gap: 0.45rem; }
  .proof { padding: 0.55rem 0.7rem; }
  .proof b { font-size: 1.05rem; }
  .proof i { font-size: 0.72rem; }
  .proof span { font-size: 0.62rem; letter-spacing: 0.07em; }

  /* The device fills the column at this width, so a floating chip could only
     ever land on top of the screen content. */
  .float-chip { display: none; }

  /* Two up at phone width, matching the feature and step grids. The fifth
     card spans the full row so the path finishes on the goal rather than on a
     half-empty gap. The connecting rail is dropped here — it cannot join two
     columns without dangling, and the STEP labels already carry the order. */
  .path { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.7rem; }
  .path-step { padding: 1.05rem 0.95rem; }
  .path-step:last-child { grid-column: 1 / -1; }
  .path-step::before { display: none; }

  .path-node { width: 40px; height: 40px; font-size: 1.1rem; }
  .path-i { margin-top: 0.85rem; font-size: 0.62rem; letter-spacing: 0.14em; }
  .path-step h3 { margin-top: 0.25rem; font-size: 0.98rem; }
  .path-step p { margin-top: 0.3rem; font-size: 0.83rem; line-height: 1.55; }

  .study-grid { grid-template-columns: minmax(0, 1fr); gap: 0.7rem; }
  .study-lead { grid-column: auto; }


  /* Feature cards stay 2-up on larger phones instead of collapsing to one tall
     stack. Below 520px the columns get too narrow to read (see the 480px block
     at the end of this file, which drops them back to a single column). */
  .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.7rem; }
  .card { padding: 1.05rem 0.9rem; }
  .card-ic { width: 38px; height: 38px; border-radius: 10px; font-size: 1.1rem; }
  .card h3 { margin-top: 0.85rem; font-size: 1rem; }
  .card p { margin-top: 0.45rem; font-size: 0.84rem; line-height: 1.55; }
  .card-tag { margin-top: 0.9rem; padding: 0.24rem 0.55rem; font-size: 0.63rem; }

  /* how-it-works steps: same 2-up treatment */
  .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.7rem; }
  .step { padding: 1.05rem 0.9rem; }
  .step-num { font-size: 1.9rem; }
  .step h3 { margin-top: 0.6rem; font-size: 1rem; }
  .step p { margin-top: 0.4rem; font-size: 0.84rem; line-height: 1.55; }
  .step-visual { margin-top: 0.9rem; padding-top: 0.85rem; gap: 0.35rem; }
  .mini-chip { padding: 0.28rem 0.5rem; font-size: 0.7rem; }
  .mini-chip[dir="rtl"] { font-size: 0.8rem; }

  /* categories: even 3-up grid instead of ragged wrapped pills */
  .cat-filters {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.45rem;
    margin-bottom: 1.4rem;
  }
  .chip-filter {
    justify-content: center;
    gap: 0.3rem;
    padding: 0.5rem 0.4rem;
    font-size: 0.73rem;
    text-align: center;
    line-height: 1.25;
  }
  .chip-filter b { font-size: 0.62rem; }

  .cat-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.45rem;
  }
  .cat {
    display: grid;
    place-items: center;
    padding: 0.5rem 0.4rem;
    font-size: 0.73rem;
    text-align: center;
    line-height: 1.3;
  }

  .mini-features { grid-template-columns: minmax(0, 1fr); gap: 0.8rem; padding: 1.15rem 1.2rem; }

  .cta-panel { border-radius: var(--r-xl); }
  .store-row { flex-direction: column; }
  .store-btn { justify-content: center; }

  /* Three link columns side by side, with the brand block on its own full
     row above them. Type and gaps step down so the longest labels still fit a
     ~90px column at 320px. */
  .footer-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.9rem 0.7rem; }
  .footer-brand { grid-column: 1 / -1; }
  .footer-col { gap: 0.5rem; }
  .footer-col h4 { font-size: 0.63rem; letter-spacing: 0.1em; margin-bottom: 0.15rem; }
  .footer-col a { font-size: 0.79rem; line-height: 1.35; }
}

/* --- narrow phones (incl. 390px iPhones) ---
   The columns stay 2-up; only the padding and type step down so the body copy
   keeps a usable line length in a half-width card. */
@media (max-width: 520px) {
  .cards, .steps { gap: 0.6rem; }
  .card, .step { padding: 0.95rem 0.8rem; }
  .card h3, .step h3 { font-size: 0.95rem; }
  .card p, .step p { font-size: 0.81rem; line-height: 1.5; }
  .card-ic { width: 36px; height: 36px; border-radius: 10px; font-size: 1.05rem; }
  .card-tag { font-size: 0.61rem; }
  .step-num { font-size: 1.75rem; }
}

@media (max-width: 400px) {
  .cards, .steps { gap: 0.5rem; }
  .card, .step { padding: 0.85rem 0.7rem; }
  .card p, .step p { font-size: 0.78rem; }
  .mini-chip { padding: 0.26rem 0.45rem; font-size: 0.66rem; }

  .bento { gap: 0.55rem; }
  .bento-card { padding: 0.9rem 0.75rem; }
  .bento-card p { font-size: 0.8rem; }

  .cat-filters, .cat-grid { gap: 0.35rem; }
  .chip-filter { padding: 0.45rem 0.3rem; font-size: 0.68rem; }
  .chip-filter b { font-size: 0.58rem; }
  .cat { padding: 0.45rem 0.28rem; font-size: 0.68rem; }
}

/* --- short landscape phones: don't let the hero device dominate --- */
@media (max-height: 560px) and (orientation: landscape) and (max-width: 900px) {
  .hero-stage .device { width: 240px; }
}

/* ---------------------------------------------------------------- a11y */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .js .reveal { opacity: 1; transform: none; }
  .stage-orb, .float-chip, .bloom, .wave i, .scanline, .marquee-track, .dot-live {
    animation: none !important;
  }
  .bloom { opacity: 0.35; }
  .wave i { height: 9px; }
}

@media print {
  .nav, .marquee, .float-chip, .hero-glow, .stage-orb { display: none !important; }
  body { background: #fff; color: #000; }
  .js .reveal { opacity: 1 !important; transform: none !important; }
}


/* ==========================================================================
   Language
   ========================================================================== */

/* A link to the other edition, not a toggle: each language is a real URL. */
.lang-switch {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.55rem 0.9rem;
  border-radius: var(--r-pill, 999px);
  border: 1px solid var(--line);
  background: var(--surface-2);
  color: var(--ink-soft);
  font-size: 0.85rem;
  font-weight: 600;
  white-space: nowrap;
  transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}
.lang-switch .ic { width: 16px; height: 16px; }
@media (hover: hover) {
  .lang-switch:hover { color: var(--ink); border-color: var(--gold-deep); background: var(--surface-3); }
}
.lang-switch-block {
  display: flex;
  justify-content: center;
  width: 100%;
  padding-block: 0.85rem;
  font-size: 0.95rem;
}

/* ==========================================================================
   Arabic edition
   ========================================================================== */

/* System Arabic faces first: they are already on the device, so the page has
   no webfont to wait for and no fallback flash on the copy that matters most. */
[dir="rtl"] body,
[lang="ar"] body {
  font-family: "SF Arabic", "Geeza Pro", "Noto Naskh Arabic", "Segoe UI",
               "Tajawal", system-ui, -apple-system, sans-serif;
}

/* Arabic script sits taller than Latin; a little extra leading stops the
   diacritics colliding with the line above. */
[dir="rtl"] p,
[dir="rtl"] li { line-height: 1.85; }

/* Latin-only display type (the wordmark) must not flip or re-space. */
[dir="rtl"] .brand,
[dir="rtl"] .logo,
[dir="rtl"] .store-name { direction: ltr; unicode-bidi: isolate; }

/* The phone mockups are a picture OF the app, in English. Mirroring them would
   claim the product looks like something it does not, so they stay LTR while
   the page around them flips. */
[dir="rtl"] .device,
[dir="rtl"] .device-hero,
[dir="rtl"] .phone-side,
[dir="rtl"] .phone-center,
[dir="rtl"] .float-chip,
[dir="rtl"] .ocr {
  direction: ltr;
}

/* Arrows point at the reader's "forward", which is the other way round here. */
[dir="rtl"] .btn .ic-arrow,
[dir="rtl"] .btn svg use[href="#i-arrow"],
[dir="rtl"] .hero-join .ic,
[dir="rtl"] .wl-submit .ic { transform: scaleX(-1); }

/* Latin fragments inside Arabic sentences (ar-AE, EN, Jusr) keep their own
   direction so the punctuation around them lands on the correct side. */
[dir="rtl"] .lat,
[dir="rtl"] code,
[dir="rtl"] .compare-roman { direction: ltr; unicode-bidi: isolate; }


/* ───────────────────────────── jusr ai ───────────────────────────── */
.companion-grid { display: grid; gap: 1.5rem; }
.companion-cards { grid-template-columns: 1fr; }
.chat-demo {
  display: grid;
  gap: 0.9rem;
  padding: 1.5rem;
  border-radius: var(--r-lg, 22px);
  background: var(--surface);
  border: 1px solid var(--line);
  align-content: start;
}
.chat-you {
  justify-self: end;
  max-width: 85%;
  padding: 0.7rem 1rem;
  border-radius: 18px 18px 4px 18px;
  background: var(--gold);
  color: #111;
  font-weight: 600;
  font-size: 0.95rem;
  line-height: 1.5;
}
.chat-jusr {
  max-width: 92%;
  padding: 0.9rem 1.05rem;
  border-radius: 18px 18px 18px 4px;
  background: var(--surface-3);
  border: 1px solid var(--line);
  color: var(--ink-soft);
  font-size: 0.93rem;
  line-height: 1.6;
}
.chat-jusr p + p { margin-top: 0.35rem; }
.chat-jusr i { color: var(--gold); font-style: normal; font-weight: 600; }
.chat-ar { font-size: 1.5rem; font-weight: 700; color: var(--ink); line-height: 1.4; }
.chat-roman { color: var(--muted); font-size: 0.9rem; letter-spacing: 0.01em; }
[dir="rtl"] .chat-you { justify-self: start; border-radius: 18px 18px 18px 4px; }
[dir="rtl"] .chat-jusr { border-radius: 18px 18px 4px 18px; }
@media (min-width: 900px) {
  .companion-grid { grid-template-columns: 1.15fr 0.85fr; align-items: start; }
  .companion-cards { grid-template-columns: 1fr; }
}

/* ───────────────────────────── pricing ───────────────────────────── */
.price-grid { display: grid; gap: 1.25rem; }
.price-card {
  position: relative;
  padding: 1.75rem;
  border-radius: var(--r-lg, 22px);
  background: var(--surface);
  border: 1px solid var(--line);
}
.price-card-pro { border-color: rgba(250, 204, 21, 0.45); background: linear-gradient(160deg, rgba(250, 204, 21, 0.08), var(--surface) 55%); }
.price-name { font-size: 0.78rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold); }
.price-amount { margin-top: 0.5rem; font-size: 2.1rem; font-weight: 800; letter-spacing: -0.03em; color: var(--ink); }
.price-amount span { font-size: 0.95rem; font-weight: 600; color: var(--muted); letter-spacing: 0; }
.price-alt { margin-top: 0.2rem; color: var(--muted); font-size: 0.88rem; }
.price-list { list-style: none; margin: 1.35rem 0 0; padding: 0; display: grid; gap: 0.7rem; }
.price-list li { display: flex; gap: 0.6rem; align-items: flex-start; color: var(--ink-soft); font-size: 0.93rem; line-height: 1.5; }
.price-list .ic { flex: none; width: 18px; height: 18px; margin-top: 0.15rem; color: var(--gold); }
.price-note { margin-top: 1.35rem; padding-top: 1.1rem; border-top: 1px solid var(--line); color: var(--muted); font-size: 0.86rem; line-height: 1.55; }
@media (min-width: 760px) {
  .price-grid { grid-template-columns: 1fr 1fr; align-items: start; }
}