/* Landing page tests: one shared stylesheet. Colour comes from the page's
   look (data-look on <html>): two main colours, a colour field and a light
   paper, plus one loud accent. build.py appends each look's colour tokens,
   light and dark, to the end of the published copy of this file; this file
   only uses them, plus the per-look glow, texture and headline treatment.

   Where the accent goes: buttons, one headline phrase, the lead benefit card,
   the glow in the hero and privacy panel, and small marks. Nowhere else.

   Fonts are self-hosted (SIL Open Font License): Geist for Latin text,
   IBM Plex Sans Arabic for Arabic. Icons are Phosphor Light (MIT), inlined
   by build.py. No external requests. */

@font-face {
  font-family: "Geist";
  src: url("fonts/geist-latin-wght.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face { font-family: "Plex Arabic"; src: url("fonts/plex-arabic-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Plex Arabic"; src: url("fonts/plex-arabic-500.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Plex Arabic"; src: url("fonts/plex-arabic-600.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Plex Arabic"; src: url("fonts/plex-arabic-700.woff2") format("woff2"); font-weight: 700; font-display: swap; }

/* ------------------------------------------------------------- tokens -- */

:root {
  color-scheme: light dark;
  interpolate-size: allow-keywords;

  /* Fallback colours until the look tokens load (they are appended below). */
  --field: #0b0b0c; --field-2: #1c2410; --on-field: #ffffff; --on-field-2: #b9bcb4;
  --paper: #ffffff; --paper-2: #f2f3ee; --surface: #ffffff;
  --ink: #0b0b0c; --ink-2: #45464a; --ink-3: #5f6066;
  --accent: #c6f432; --on-accent: #0b0b0c; --mark: #4f6b00; --danger: #b3261e;

  /* Derived from the look. */
  --hair: color-mix(in srgb, var(--ink) 10%, transparent);
  --hair-strong: color-mix(in srgb, var(--ink) 18%, transparent);
  --shell: color-mix(in srgb, var(--ink) 4%, transparent);
  --accent-soft: color-mix(in srgb, var(--accent) 28%, var(--surface));
  --field-hair: color-mix(in srgb, var(--on-field) 20%, transparent);
  --field-glass: color-mix(in srgb, var(--on-field) 10%, transparent);
  --shadow: color-mix(in srgb, var(--field) 40%, transparent);
  --chat-bg: var(--paper-2);
  --bubble-me: color-mix(in srgb, var(--accent) 34%, var(--surface));
  --bubble-them: var(--surface);
  --grain-opacity: 0.035;

  --font: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-ar: "Plex Arabic", "Geist", ui-sans-serif, system-ui, "Segoe UI", sans-serif;

  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);

  --max: 1200px;
  --r-xl: 32px;
  --r-lg: 24px;
  --r-md: 14px;
  --stage-r: 28px;
  --frame: 8px;
  --gutter: 16px;
}
@media (min-width: 768px) { :root { --gutter: 32px; --frame: 14px; } }
@media (min-width: 960px) { :root { --stage-r: 40px; } }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --grain-opacity: 0.05; } }
:root[data-theme="dark"] { --grain-opacity: 0.05; }

/* --------------------------------------------------------------- base -- */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 96px; background: var(--paper); }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.6;
  font-feature-settings: "ss01", "cv11";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
}
html[lang="ar"] body { font-family: var(--font-ar); line-height: 1.8; font-feature-settings: normal; }

/* Film grain: fixed and non-interactive so it never repaints on scroll. */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 50;
  pointer-events: none;
  opacity: var(--grain-opacity);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 3px; }
img, svg { display: block; }
p { margin: 0; text-wrap: pretty; }
h1, h2, h3 { margin: 0; font-weight: 600; text-wrap: balance; }
h1 { font-size: clamp(2.6rem, 5.6vw, 4.9rem); line-height: 1; letter-spacing: -0.045em; }
h2, .section-title { font-size: clamp(2rem, 3.6vw, 3rem); line-height: 1.06; letter-spacing: -0.035em; }
h3 { font-size: 1.2rem; line-height: 1.25; letter-spacing: -0.015em; }
html[lang="ar"] :is(h1, h2, h3, .section-title) { letter-spacing: 0; line-height: 1.3; }
.muted { color: var(--ink-2); }
.ic { width: 1em; height: 1em; flex: none; }
.nowrap { white-space: nowrap; }

:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; border-radius: 6px; }
.on-field :focus-visible { outline-color: var(--on-field); }

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

.block { padding-block: 80px; }
@media (min-width: 900px) { .block { padding-block: 128px; } }
.section-title { margin-block-end: 40px; max-width: 18ch; }
@media (min-width: 900px) { .section-title { margin-block-end: 56px; } }

/* ---------------------------------------------------------------- nav -- */

.nav {
  position: fixed;
  inset-block-start: calc(var(--frame) + 10px);
  inset-inline: 0;
  z-index: 40;
  display: flex;
  justify-content: center;
  padding-inline: 18px;
  pointer-events: none;
}
.nav-inner {
  pointer-events: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  width: min(100%, 720px);
  padding-block: 6px;
  padding-inline: 8px 6px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--surface) 78%, transparent);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  backdrop-filter: blur(18px) saturate(160%);
  box-shadow: inset 0 0 0 1px var(--hair), 0 12px 32px -18px var(--shadow);
}
.brand { display: inline-flex; align-items: center; gap: 10px; color: var(--ink); text-decoration: none; font-weight: 600; letter-spacing: -0.02em; font-size: 1.02rem; }
.brand-mark {
  width: 32px; height: 32px; border-radius: 999px;
  display: grid; place-items: center;
  background: var(--accent); color: var(--on-accent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--on-accent) 12%, transparent);
  font-size: 18px;
}
/* Over a colour-field panel the pill turns to tinted glass (site.js). */
.nav-inner, .nav .brand, .nav-links a { transition: background-color 300ms var(--ease-out), color 300ms var(--ease-out), box-shadow 300ms var(--ease-out); }
.nav.on-field .nav-inner {
  background: color-mix(in srgb, var(--field) 72%, transparent);
  box-shadow: inset 0 0 0 1px var(--field-hair), 0 12px 32px -18px rgba(0, 0, 0, 0.45);
}
.nav.on-field .brand { color: var(--on-field); }
.nav.on-field .nav-links a { color: var(--on-field-2); }
.nav.on-field .nav-links a:hover { background: var(--field-glass); color: var(--on-field); }
.nav-links { display: flex; align-items: center; gap: 2px; }
.nav-links a {
  color: var(--ink-2); text-decoration: none; font-size: 0.92rem; font-weight: 500;
  padding: 8px 14px; border-radius: 999px;
}
.nav-links a:hover { background: var(--hair); color: var(--ink); }

/* ------------------------------------------------------------ buttons -- */

.btn {
  display: inline-flex; align-items: center; justify-content: space-between; gap: 16px;
  min-height: 56px;
  padding-block: 8px;
  padding-inline: 26px 8px;
  border: 0; border-radius: 999px;
  background: var(--accent); color: var(--on-accent);
  font: inherit; font-weight: 600; font-size: 1rem; letter-spacing: -0.01em; white-space: nowrap;
  text-decoration: none; cursor: pointer;
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--on-accent) 12%, transparent),
    inset 0 1px 0 rgba(255, 255, 255, 0.35),
    0 16px 32px -16px color-mix(in srgb, var(--accent) 75%, transparent);
  transition: transform 160ms var(--ease-out), box-shadow 300ms var(--ease-out), filter 200ms var(--ease-out);
}
.btn-icon {
  width: 40px; height: 40px; border-radius: 999px;
  display: grid; place-items: center;
  background: var(--on-accent); color: var(--accent);
  font-size: 18px;
  transition: transform 350ms var(--ease-out);
}
[dir="rtl"] .btn-icon .ic { transform: scaleX(-1); }
.btn:active { transform: scale(0.98); }
.btn[disabled] { filter: saturate(0.6); cursor: progress; }
@media (hover: hover) and (pointer: fine) {
  .btn:hover {
    box-shadow:
      inset 0 0 0 1px color-mix(in srgb, var(--on-accent) 12%, transparent),
      inset 0 1px 0 rgba(255, 255, 255, 0.35),
      0 22px 40px -16px color-mix(in srgb, var(--accent) 90%, transparent);
  }
  .btn:hover .btn-icon { transform: translateX(3px) scale(1.05); }
  [dir="rtl"] .btn:hover .btn-icon { transform: translateX(-3px) scale(1.05); }
}
.btn-block { width: 100%; }

/* --------------------------------------------------------------- hero -- */
/* The hero is a framed colour-field "stage" with an atmosphere layer (glow
   plus texture) that each look styles at the end of this file. */

.hero { padding: var(--frame); padding-block-end: 0; }
.stage {
  position: relative;
  isolation: isolate;
  border-radius: var(--stage-r);
  background: var(--field);
  color: var(--on-field);
  padding-block: 112px 40px;
}
@media (min-width: 960px) { .stage { padding-block: 176px 104px; } }
.atmos { position: absolute; inset: 0; z-index: -1; overflow: hidden; border-radius: inherit; pointer-events: none; }
.atmos .glow { position: absolute; inset: -8%; }
.atmos::after { content: ""; position: absolute; inset: 0; }
[dir="rtl"] .atmos { transform: scaleX(-1); }  /* mirror every look's glow for Arabic */
.js .atmos .glow { animation: drift 28s var(--ease-in-out) infinite alternate; }
@keyframes drift {
  from { transform: translate3d(-1.5%, 1%, 0) scale(1); }
  to { transform: translate3d(1.5%, -1.5%, 0) scale(1.05); }
}

.hero-grid { display: grid; gap: 48px; align-items: end; }
@media (min-width: 960px) {
  .hero-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 64px; }
  .hero-grid .hero-visual { justify-items: end; }
  :root[data-hero="split"] .hero-copy h1 { font-size: clamp(2.6rem, 5vw, 4.5rem); }
}
.hero-copy { display: grid; gap: 26px; justify-items: start; }
.hero-copy h1 { max-width: 15ch; color: var(--on-field); }
.lede { font-size: clamp(1.08rem, 1.5vw, 1.24rem); color: var(--on-field-2); max-width: 34rem; line-height: 1.6; }
.hero-cta { padding-block-start: 6px; }
.accent-text { color: var(--accent); }
/* Marker looks: the accent sits behind the words as a highlighter band that
   stops short of the line above, so tight headline leading never collides. */
/* Italic looks: the accent words are set bold italic in the headline colour. */
:root[data-hl="italic"] .accent-text { color: var(--mark); font-style: italic; font-weight: 640; }
html[lang="ar"]:root[data-hl="italic"] .accent-text { font-style: normal; }
:root[data-hl="marker"] .accent-text {
  color: var(--on-accent);
  background: linear-gradient(transparent 18%, var(--accent) 18%, var(--accent) 94%, transparent 94%);
  padding-inline: 0.12em;
  margin-inline: -0.04em;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

.eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  padding-block: 5px; padding-inline: 5px 14px;
  border-radius: 999px;
  background: var(--field-glass);
  box-shadow: inset 0 0 0 1px var(--field-hair);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  font-size: 0.86rem; font-weight: 500; color: var(--on-field);
}
.eyebrow-icon {
  width: 26px; height: 26px; border-radius: 999px; display: grid; place-items: center;
  background: var(--accent); color: var(--on-accent); font-size: 15px;
}

/* Centre layout: copy centred, the phone rises out of the stage and
   overlaps the section below it. */
@media (min-width: 960px) {
  :root[data-hero="centre"] .stage { padding-block: 150px 0; }
  :root[data-hero="centre"] .hero-grid { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; gap: 56px; }
  :root[data-hero="centre"] .hero-copy { justify-items: center; }
  :root[data-hero="centre"] .hero-copy h1 { max-width: 19ch; }
  :root[data-hero="centre"] .hero-visual { margin-block-end: -230px; z-index: 1; justify-items: center; }
  :root[data-hero="centre"] .device { transform: none; }
  :root[data-hero="centre"] .hero + .block { padding-block-start: 330px; }
}

/* The hero visual: a WhatsApp-style phone holding a readable sample
   conversation, plus a voice card (talking to the home with no phone in
   hand) or, on the operators page, example portfolio cards. The phone screen keeps
   WhatsApp's own colours in every look so it reads as WhatsApp at a glance;
   only the avatar picks up the look's accent. */
.hero-visual { position: relative; display: grid; place-items: center; }
.scene { position: relative; width: min(100%, 360px); }
.device {
  position: relative;
  z-index: 1;
  margin: 0;
  width: 100%;
  padding: 9px;
  border-radius: 54px;
  background: linear-gradient(160deg, #2c2e33, #0e0f11 60%);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    0 50px 90px -40px rgba(0, 0, 0, 0.55),
    0 24px 40px -28px rgba(0, 0, 0, 0.4);
}
@media (min-width: 960px) { .device { transform: rotate(-1.5deg); } [dir="rtl"] .device { transform: rotate(1.5deg); } }

.screen {
  --wa-bg: #efeae2; --wa-head: #f7f5f3; --wa-in: #ffffff; --wa-out: #d9fdd3;
  --wa-text: #111b21; --wa-meta: #667781; --wa-icon: #54656f; --wa-tick: #53bdeb;
  --wa-green: #25d366; --wa-field: #ffffff; --wa-line: rgba(11, 20, 26, 0.08); --wa-shadow: rgba(11, 20, 26, 0.13);
  position: relative;
  display: flex; flex-direction: column;
  min-height: 568px;
  border-radius: 45px;
  overflow: hidden;
  background-color: var(--wa-bg);
  background-image: radial-gradient(color-mix(in srgb, var(--wa-text) 6%, transparent) 1px, transparent 1.6px);
  background-size: 16px 16px;
  color: var(--wa-text);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .screen {
    --wa-bg: #0b141a; --wa-head: #202c33; --wa-in: #202c33; --wa-out: #005c4b;
    --wa-text: #e9edef; --wa-meta: #8696a0; --wa-icon: #aebac1; --wa-field: #2a3942;
    --wa-line: rgba(255, 255, 255, 0.06); --wa-shadow: rgba(0, 0, 0, 0.3);
  }
}
:root[data-theme="dark"] .screen {
  --wa-bg: #0b141a; --wa-head: #202c33; --wa-in: #202c33; --wa-out: #005c4b;
  --wa-text: #e9edef; --wa-meta: #8696a0; --wa-icon: #aebac1; --wa-field: #2a3942;
  --wa-line: rgba(255, 255, 255, 0.06); --wa-shadow: rgba(0, 0, 0, 0.3);
}
.screen::before {
  content: ""; position: absolute; z-index: 2;
  inset-block-start: 11px; inset-inline-start: 50%; translate: -50% 0;
  width: 96px; height: 27px; border-radius: 999px; background: #0b0c0d;
}
[dir="rtl"] .screen::before { translate: 50% 0; }

.wa-status {
  display: flex; justify-content: space-between; align-items: center;
  height: 48px; padding: 12px 30px 0 34px;
  background: var(--wa-head);
  font-size: 0.8rem; font-weight: 600; letter-spacing: 0;
  direction: ltr;
}
.wa-sys { display: inline-flex; align-items: flex-end; gap: 2px; }
.wa-sys i { width: 3px; border-radius: 1px; background: currentColor; }
.wa-sys i:nth-child(1) { height: 4px; }
.wa-sys i:nth-child(2) { height: 6px; }
.wa-sys i:nth-child(3) { height: 8px; }
.wa-sys i:nth-child(4) { height: 10px; }
.wa-sys b {
  width: 22px; height: 11px; margin-inline-start: 6px; padding: 2px; border-radius: 3.5px;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, currentColor 45%, transparent);
  background: linear-gradient(90deg, currentColor 72%, transparent 72%) content-box;
}

.chat-head {
  display: flex; align-items: center; gap: 8px;
  padding-block: 4px 10px; padding-inline: 8px 14px;
  background: var(--wa-head);
  box-shadow: 0 1px 0 var(--wa-line);
}
.wa-back { display: grid; font-size: 22px; color: var(--wa-text); }
[dir="rtl"] .wa-back .ic { transform: scaleX(-1); }
.chat-avatar {
  width: 36px; height: 36px; border-radius: 999px; display: grid; place-items: center; flex: none;
  background: var(--accent); color: var(--on-accent); font-size: 19px;
}
.chat-title { flex: 1; min-width: 0; display: grid; line-height: 1.2; text-align: start; }
.chat-title strong { font-size: 0.97rem; font-weight: 600; }
.chat-title small { font-size: 0.74rem; color: var(--wa-meta); }
.wa-actions { display: inline-flex; gap: 18px; font-size: 22px; color: var(--wa-text); }

.thread {
  position: relative; flex: 1;
  display: flex; flex-direction: column; justify-content: flex-end; gap: 6px;
  padding: 14px 14px 12px;
  text-align: start;
}
.wa-day {
  align-self: center; margin-block-end: 6px;
  padding: 4px 10px; border-radius: 8px;
  background: var(--wa-in); color: var(--wa-meta);
  font-size: 0.72rem; font-weight: 500;
  box-shadow: 0 1px 0.5px var(--wa-shadow);
}
.bubble {
  position: relative;
  max-width: 86%;
  padding-block: 6px 7px; padding-inline: 10px 8px;
  border-radius: 9px;
  font-size: 0.9rem; line-height: 1.38;
  box-shadow: 0 1px 0.5px var(--wa-shadow);
}
.bubble.me { align-self: flex-end; background: var(--wa-out); border-start-end-radius: 0; }
.bubble.them { align-self: flex-start; background: var(--wa-in); border-start-start-radius: 0; }
.bubble::before { content: ""; position: absolute; inset-block-start: 0; width: 8px; height: 12px; background: inherit; }
.bubble.me::before { inset-inline-end: -8px; clip-path: polygon(0 0, 100% 0, 0 100%); }
.bubble.them::before { inset-inline-start: -8px; clip-path: polygon(0 0, 100% 0, 100% 100%); }
[dir="rtl"] .bubble.me::before { clip-path: polygon(0 0, 100% 0, 100% 100%); }
[dir="rtl"] .bubble.them::before { clip-path: polygon(0 0, 100% 0, 0 100%); }
.wa-meta {
  float: inline-end;
  display: inline-flex; align-items: center; gap: 3px;
  margin-block: 7px -5px; margin-inline: 12px -2px;
  font-size: 0.68rem; line-height: 1; color: var(--wa-meta);
  direction: ltr;
}
/* The time reads left to right, so its margins are set physically for Arabic. */
[dir="rtl"] .wa-meta { margin-left: -2px; margin-right: 12px; }
.wa-ticks { display: inline-flex; color: var(--wa-tick); font-size: 16px; }

.typing {
  position: absolute; inset-inline-start: 14px; inset-block-start: 20px;
  display: inline-flex; gap: 5px; align-items: center;
  padding: 13px 15px; border-radius: 9px; border-start-start-radius: 0;
  background: var(--wa-in);
  box-shadow: 0 1px 0.5px var(--wa-shadow);
  opacity: 0; transform: translateY(6px);
  transition: opacity 220ms var(--ease-out), transform 300ms var(--ease-out);
}
.typing.on { opacity: 1; transform: none; }
.typing span { width: 7px; height: 7px; border-radius: 999px; background: var(--wa-meta); animation: dot 1.1s var(--ease-out) infinite; }
.typing span:nth-child(2) { animation-delay: 0.15s; }
.typing span:nth-child(3) { animation-delay: 0.3s; }
@keyframes dot { 0%, 60%, 100% { transform: translateY(0); opacity: 0.45; } 30% { transform: translateY(-4px); opacity: 1; } }

.composer { display: flex; align-items: center; gap: 10px; padding: 8px 10px 22px; background: var(--wa-head); }
.wa-icon { display: grid; font-size: 23px; color: var(--wa-icon); }
.composer-field {
  flex: 1; padding: 9px 14px; border-radius: 999px; text-align: start;
  background: var(--wa-field); color: var(--wa-meta); font-size: 0.88rem;
  box-shadow: inset 0 0 0 1px var(--wa-line);
}
.composer-mic {
  width: 42px; height: 42px; border-radius: 999px; display: grid; place-items: center; flex: none;
  background: var(--wa-green); color: #ffffff; font-size: 21px;
}

/* Chat playback: only hides messages once the script has taken over. */
.js .thread.is-playing .msg { opacity: 0; transform: translateY(10px) scale(0.98); }
.js .thread.is-playing .msg.on {
  opacity: 1; transform: none;
  transition: opacity 450ms var(--ease-out), transform 600ms var(--ease-out);
}
.bubble.me { transform-origin: top right; }
.bubble.them { transform-origin: top left; }
[dir="rtl"] .bubble.me { transform-origin: top left; }
[dir="rtl"] .bubble.them { transform-origin: top right; }

/* Voice at home: a glass card that floats over the field next to the phone. */
.voice {
  position: absolute; z-index: 2;
  inset-inline-end: calc(100% - 14px); inset-block-end: 72px;
  width: 262px;
  display: grid; gap: 12px;
  padding: 16px 16px 18px;
  border-radius: 26px;
  color: var(--on-field);
  text-align: start;
  background: color-mix(in srgb, var(--field) 80%, transparent);
  -webkit-backdrop-filter: blur(22px) saturate(160%);
  backdrop-filter: blur(22px) saturate(160%);
  box-shadow:
    inset 0 0 0 1px var(--field-hair),
    inset 0 1px 0 color-mix(in srgb, var(--on-field) 16%, transparent),
    0 34px 70px -30px rgba(0, 0, 0, 0.6);
}
@media (min-width: 960px) { .voice { transform: rotate(2deg); } [dir="rtl"] .voice { transform: rotate(-2deg); } }
.voice-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: 0.74rem; font-weight: 500; white-space: nowrap; }
.voice-room { display: inline-flex; align-items: center; gap: 5px; color: var(--on-field-2); }
.voice-room .ic { font-size: 15px; }
.voice-tag {
  display: inline-flex; align-items: center; gap: 4px;
  padding-block: 3px; padding-inline: 7px 9px; border-radius: 999px;
  background: var(--accent); color: var(--on-accent); font-weight: 600;
}
.voice-tag .ic { font-size: 12px; }
.voice-orb { display: flex; align-items: center; justify-content: center; gap: 12px; height: 78px; }
.orb {
  width: 62px; height: 62px; border-radius: 50%; flex: none;
  background: radial-gradient(circle at 34% 30%, #ffffff 0, color-mix(in srgb, var(--accent) 60%, #ffffff) 16%, var(--accent) 48%, color-mix(in srgb, var(--accent) 55%, var(--field)) 100%);
  box-shadow: 0 0 36px 8px color-mix(in srgb, var(--accent) 55%, transparent), inset 0 -6px 14px color-mix(in srgb, var(--field) 30%, transparent);
}
.wave { display: inline-flex; align-items: center; gap: 4px; height: 44px; }
.wave:last-child { flex-direction: row-reverse; }
.wave i { width: 3px; border-radius: 3px; background: var(--accent); height: 10px; transform-origin: center; }
.wave i:nth-child(1) { height: 8px; }
.wave i:nth-child(2) { height: 14px; }
.wave i:nth-child(3) { height: 24px; }
.wave i:nth-child(4) { height: 16px; }
.wave i:nth-child(5) { height: 34px; }
.wave i:nth-child(6) { height: 22px; }
.wave i:nth-child(7) { height: 40px; }
.wave i:nth-child(8) { height: 28px; }
.wave i:nth-child(9) { height: 18px; }
.js .hero-visual.in .wave i { animation: talk 900ms var(--ease-in-out) infinite alternate; animation-delay: calc(var(--b) * -110ms); }
@keyframes talk { from { transform: scaleY(0.35); } to { transform: scaleY(1); } }
.voice-said { font-size: 1.04rem; font-weight: 500; line-height: 1.35; letter-spacing: -0.01em; }
html[lang="ar"] .voice-said { letter-spacing: 0; }
.voice-reply { display: flex; gap: 8px; align-items: flex-start; font-size: 0.88rem; line-height: 1.45; color: var(--on-field-2); }
.voice-icon { display: grid; color: var(--accent); font-size: 18px; margin-block-start: 1px; }

/* Operators: example portfolio cards either side of the phone. */
.ops {
  position: absolute; z-index: 0;
  width: 270px; padding: 16px 16px 18px;
  border-radius: 22px;
  background: var(--surface); color: var(--ink);
  text-align: start; font-size: 0.82rem;
  box-shadow: inset 0 0 0 1px var(--hair), 0 34px 70px -30px rgba(0, 0, 0, 0.5);
}
.ops-a { inset-inline-end: calc(100% - 40px); inset-block-start: 190px; transform: rotate(-4deg); }
.ops-b { inset-inline-start: calc(100% - 40px); inset-block-start: 230px; transform: rotate(4deg); }
[dir="rtl"] .ops-a { transform: rotate(4deg); }
[dir="rtl"] .ops-b { transform: rotate(-4deg); }
.ops-title { display: flex; align-items: center; gap: 7px; font-weight: 600; color: var(--ink-2); }
.ops-title .ic { font-size: 17px; color: var(--ink); }
.ops ul { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 6px; }
.ops li { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 12px; background: var(--paper-2); }
.ops li b { font-weight: 600; }
.pill { padding: 3px 8px; border-radius: 999px; font-size: 0.7rem; font-weight: 600; white-space: nowrap; color: var(--ink); }
.pill.occ { background: color-mix(in srgb, var(--field) 14%, var(--surface)); }
.pill.save { background: var(--accent-soft); }
.pill.ready { background: var(--hair); }
.ops-bars { display: flex; align-items: flex-end; gap: 8px; height: 96px; margin-block-start: 14px; }
.ops-bars i { flex: 1; height: var(--h); border-radius: 6px 6px 3px 3px; background: var(--hair-strong); }
.ops-bars i:nth-child(n+4) { background: var(--accent); }
.ops-days { display: flex; gap: 8px; margin-block-start: 6px; }
.ops-days span { flex: 1; text-align: center; font-size: 0.68rem; color: var(--ink-3); }
.ops-note { margin-block-start: 10px; font-size: 0.74rem; color: var(--ink-2); }

/* Split layout: the second operators card would leave the stage. */
.ops-b { display: none; }
:root[data-hero="centre"] .ops-b { display: block; }
@media (min-width: 960px) {
  :root[data-hero="centre"] .voice { inset-block-start: 110px; inset-block-end: auto; transform: rotate(-3deg); }
  [dir="rtl"]:root[data-hero="centre"] .voice { transform: rotate(3deg); }
}
@media (max-width: 959px) {
  .scene { width: min(100%, 360px); }
  .voice, .ops-a { position: relative; inset: auto; width: calc(100% - 24px); margin: -30px auto 0; transform: none; }
  .ops-a { margin-block-start: 14px; }
  :root[data-hero="centre"] .ops-b { display: none; }
}

/* Split layout: the voice card (or the operators card) reaches 248px left of
   the phone, so the copy stops 32px short of it: phone 360 + card 248 - grid
   gap 64 + 32 = 576. Below 1200px there is no room for copy, card and phone
   side by side, so the card drops under the phone as it does on mobile. */
@media (min-width: 1200px) {
  :root[data-hero="split"] .hero-copy { max-width: calc(200% - 576px); }
}
@media (min-width: 960px) and (max-width: 1199px) {
  :root[data-hero="split"] .hero-grid { align-items: center; }
  :root[data-hero="split"] :is(.voice, .ops-a) {
    position: relative; inset: auto; width: calc(100% - 24px); margin: -30px auto 0; transform: none;
  }
  :root[data-hero="split"] .ops-a { margin-block-start: 14px; }
}

/* Hero decorations used by some looks only. */
.figure, .speaker, .sun, .badge { display: none; }
.h1-wrap { position: relative; }

/* ----------------------------------------------------------- benefits -- */

.bento { display: grid; gap: 16px; }
@media (min-width: 880px) {
  .bento { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .benefit { grid-column: span 5; }
  .benefit.lead { grid-column: span 7; grid-row: span 2; }
  .bento.four .benefit:nth-child(4) { grid-column: 1 / -1; }
  .bento.four .benefit:nth-child(4) .tile-core { grid-template-columns: auto 1fr; align-items: center; }
}

/* Double bezel: a quiet tray (shell) holding the card (core). */
.tile {
  padding: 6px;
  border-radius: var(--r-xl);
  background: var(--shell);
  box-shadow: inset 0 0 0 1px var(--hair);
}
.tile-core {
  height: 100%;
  display: grid; gap: 20px; align-content: start;
  padding: 28px;
  border-radius: calc(var(--r-xl) - 6px);
  background: var(--surface);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.5),
    0 1px 2px color-mix(in srgb, var(--ink) 5%, transparent),
    0 18px 40px -26px var(--shadow);
}
.tile-text { display: grid; gap: 8px; }
.tile-core p { color: var(--ink-2); }
.icon-chip {
  width: 46px; height: 46px; border-radius: 14px;
  display: grid; place-items: center;
  background: var(--accent-soft); color: var(--ink);
  font-size: 24px;
}

/* The one loud card: the lead benefit in the accent colour. */
.benefit.lead .tile-core {
  align-content: space-between;
  min-height: 320px;
  padding: 36px;
  background:
    radial-gradient(90% 70% at 100% 0%, rgba(255, 255, 255, 0.4), transparent 60%),
    var(--accent);
  color: var(--on-accent);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.4),
    inset 0 0 0 1px color-mix(in srgb, var(--on-accent) 10%, transparent),
    0 30px 60px -34px color-mix(in srgb, var(--accent) 80%, transparent);
}
[dir="rtl"] .benefit.lead .tile-core {
  background: radial-gradient(90% 70% at 0% 0%, rgba(255, 255, 255, 0.4), transparent 60%), var(--accent);
}
.benefit.lead h3 { font-size: clamp(1.6rem, 2.6vw, 2.2rem); letter-spacing: -0.03em; line-height: 1.1; max-width: 16ch; }
html[lang="ar"] .benefit.lead h3 { letter-spacing: 0; line-height: 1.35; }
.benefit.lead p { color: var(--on-accent); font-size: 1.08rem; max-width: 32rem; }
.benefit.lead .icon-chip {
  width: 60px; height: 60px; border-radius: 18px; font-size: 30px;
  background: color-mix(in srgb, var(--on-accent) 8%, transparent); color: var(--on-accent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--on-accent) 14%, transparent);
}

.notes { display: grid; gap: 12px; margin-block-start: 16px; }
@media (min-width: 880px) { .notes { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); } }
.note {
  display: flex; align-items: flex-start; gap: 14px;
  padding: 20px 22px;
  border-radius: var(--r-lg);
  background: var(--paper-2);
  color: var(--ink-2);
}
.note-icon { color: var(--mark); font-size: 22px; margin-block-start: 2px; }

/* Home page: one card per audience page, families as the loud card. The
   whole card is the link; the Arabic link sits above it. */
@media (min-width: 880px) {
  .bento.uses .use:nth-child(n+4) { grid-column: span 6; }
}
.use-links { display: flex; align-items: center; gap: 20px; font-weight: 600; }
.use-link { display: inline-flex; align-items: center; gap: 8px; color: var(--ink); text-decoration: none; }
.use-link::after { content: ""; position: absolute; inset: 0; border-radius: calc(var(--r-xl) - 6px); }
.use-link .ic { transition: transform 300ms var(--ease-out); }
.use-alt { position: relative; z-index: 1; color: var(--ink-2); font-family: var(--font-ar); font-weight: 500; }
.use.lead :is(.use-link, .use-alt) { color: var(--on-accent); }
.use .tile-core { position: relative; transition: transform 300ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
  .use:hover .tile-core { transform: translateY(-3px); }
  .use:hover .use-link .ic { transform: translateX(4px); }
}

/* --------------------------------------------------------------- steps -- */

.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 40px; }
@media (min-width: 880px) { .steps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; } }
.steps li { position: relative; display: grid; gap: 18px; align-content: start; padding-block-start: 32px; }
.steps li::before,
.steps li::after {
  content: ""; position: absolute; inset-block-start: 0; inset-inline: 0; height: 3px; border-radius: 3px;
}
.steps li::before { background: var(--hair-strong); }
.steps li::after { background: var(--mark); transform-origin: left center; }
[dir="rtl"] .steps li::after { transform-origin: right center; }
.js .steps li[data-reveal]::after { transform: scaleX(0); transition: transform 1100ms var(--ease-out); transition-delay: calc(var(--i, 0) * 180ms + 200ms); }
.js .steps li[data-reveal].in::after { transform: scaleX(1); }
.step-num {
  font-size: 3.4rem; font-weight: 500; line-height: 1; letter-spacing: -0.05em;
  color: var(--mark); font-variant-numeric: tabular-nums;
}
.steps p { font-size: 1.22rem; line-height: 1.45; letter-spacing: -0.01em; max-width: 22rem; font-weight: 500; }
html[lang="ar"] .steps p { letter-spacing: 0; line-height: 1.7; }

/* ------------------------------------------------------------- privacy -- */

.privacy { padding-inline: var(--frame); }
.privacy-panel {
  position: relative;
  overflow: hidden;
  border-radius: var(--stage-r);
  padding-block: 72px;
  color: var(--on-field);
  background:
    radial-gradient(38% 60% at 82% 50%, color-mix(in srgb, var(--accent) 42%, transparent), transparent 70%),
    radial-gradient(60% 80% at 10% 100%, color-mix(in srgb, var(--field-2) 70%, transparent), transparent 70%),
    var(--field);
}
@media (min-width: 900px) { .privacy-panel { padding-block: 120px; } }
[dir="rtl"] .privacy-panel {
  background:
    radial-gradient(38% 60% at 18% 50%, color-mix(in srgb, var(--accent) 42%, transparent), transparent 70%),
    radial-gradient(60% 80% at 90% 100%, color-mix(in srgb, var(--field-2) 70%, transparent), transparent 70%),
    var(--field);
}
.privacy-grid { display: grid; gap: 48px; align-items: center; }
@media (min-width: 900px) { .privacy-grid { grid-template-columns: 1.3fr 0.7fr; } }
.privacy-copy { display: grid; gap: 22px; }
.privacy-copy h2 { font-size: clamp(2.4rem, 5vw, 4rem); letter-spacing: -0.04em; color: var(--on-field); }
html[lang="ar"] .privacy-copy h2 { letter-spacing: 0; }
.privacy-copy p { font-size: clamp(1.1rem, 1.7vw, 1.35rem); line-height: 1.55; color: var(--on-field-2); max-width: 36rem; }

.vault { position: relative; width: min(100%, 300px); aspect-ratio: 1; justify-self: center; display: grid; place-items: center; }
.ring { position: absolute; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--field-hair); }
.ring.r1 { inset: 0; }
.ring.r2 { inset: 15%; }
.ring.r3 { inset: 30%; background: var(--field-glass); }
.vault-core {
  position: relative;
  width: 84px; height: 84px; border-radius: 28px;
  display: grid; place-items: center;
  background: var(--accent);
  color: var(--on-accent); font-size: 40px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 24px 50px -14px color-mix(in srgb, var(--accent) 70%, transparent);
}
.js .vault .ring { opacity: 0; transform: scale(0.86); transition: opacity 900ms var(--ease-out), transform 1200ms var(--ease-out); }
.js .vault.in .ring { opacity: 1; transform: none; }
.js .vault .ring.r2 { transition-delay: 120ms; }
.js .vault .ring.r1 { transition-delay: 240ms; }

/* ---------------------------------------------------------------- form -- */

.signup-grid { display: grid; gap: 40px; align-items: start; }
@media (min-width: 960px) { .signup-grid { grid-template-columns: 5fr 7fr; gap: 80px; } }
.signup-intro { display: grid; gap: 20px; }
@media (min-width: 960px) { .signup-intro { position: sticky; inset-block-start: 120px; } }
.signup-intro .section-title { margin-block-end: 0; }
.signup-intro .muted { font-size: 1.1rem; max-width: 30rem; }
.signup-note { display: flex; gap: 12px; align-items: flex-start; color: var(--ink-3); font-size: 0.95rem; max-width: 30rem; }
.signup-note .ic { color: var(--mark); font-size: 20px; margin-block-start: 2px; }

.form-shell { padding: 8px; border-radius: 36px; background: var(--shell); box-shadow: inset 0 0 0 1px var(--hair); }
.form-core {
  display: grid; gap: 24px;
  padding: 24px 20px;
  border-radius: 28px;
  background: var(--surface);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), 0 30px 60px -40px var(--shadow);
}
@media (min-width: 640px) { .form-core { padding: 36px; } }
.row-2 { display: grid; gap: 24px; }
@media (min-width: 640px) { .row-2 { grid-template-columns: 1fr 1fr; gap: 16px; } }

.field { display: grid; gap: 8px; }
label, legend { font-weight: 550; font-size: 0.95rem; color: var(--ink); }
.hint { font-size: 0.86rem; color: var(--ink-3); font-weight: 400; }
input[type="text"], input[type="email"], input[type="tel"], .select select {
  width: 100%; min-height: 52px;
  padding: 12px 16px;
  font: inherit; color: var(--ink);
  border: 0; border-radius: var(--r-md);
  background: var(--paper);
  box-shadow: inset 0 0 0 1px var(--hair-strong);
  transition: box-shadow 200ms var(--ease-out), background-color 200ms var(--ease-out);
}
input::placeholder { color: var(--ink-3); }
input[type="text"]:focus, input[type="email"]:focus, input[type="tel"]:focus, .select select:focus {
  outline: none;
  background: var(--surface);
  box-shadow: inset 0 0 0 1.5px var(--ink), 0 0 0 4px var(--accent-soft);
}
/* Questions that appear on an earlier answer keep the form's spacing. */
.followup { display: grid; gap: 24px; }
.followup[hidden] { display: none; }

/* Dropdown: the native control, restyled like the text fields. */
.select { position: relative; }
.select select { appearance: none; -webkit-appearance: none; padding-inline-end: 44px; cursor: pointer; }
.select select:invalid { color: var(--ink-3); }   /* still on "Choose one" */
.select option { color: var(--ink); }
.select .ic { position: absolute; inset-inline-end: 16px; top: 50%; transform: translateY(-50%) rotate(-90deg); color: var(--ink-2); font-size: 18px; pointer-events: none; }
fieldset { border: 0; padding: 0; margin: 0; display: grid; gap: 12px; min-width: 0; }
legend { padding: 0; margin-block-end: 12px; line-height: 1.45; }
.choices { display: flex; flex-wrap: wrap; gap: 8px; }
.choice { position: relative; display: inline-flex; }
.choice input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.choice span {
  display: inline-flex; align-items: center; min-height: 44px;
  padding: 10px 18px; border-radius: 999px;
  background: var(--paper); box-shadow: inset 0 0 0 1px var(--hair-strong);
  font-weight: 500; font-size: 0.95rem; color: var(--ink);
  transition: background-color 200ms var(--ease-out), color 200ms var(--ease-out), box-shadow 200ms var(--ease-out), transform 160ms var(--ease-out);
}
.choice input:checked + span { background: var(--ink); color: var(--paper); box-shadow: inset 0 0 0 1px var(--ink); }
.choice input:active + span { transform: scale(0.97); }
.choice input:focus-visible + span { outline: 2px solid var(--ink); outline-offset: 3px; }
@media (hover: hover) and (pointer: fine) { .choice input:not(:checked):hover + span { box-shadow: inset 0 0 0 1px var(--ink-3); } }

.consent { display: grid; grid-template-columns: 22px 1fr; gap: 12px; align-items: start; font-weight: 400; font-size: 0.95rem; color: var(--ink-2); }
.consent input { width: 20px; height: 20px; margin: 3px 0 0; accent-color: var(--ink); cursor: pointer; }
.consent a { color: var(--ink); text-decoration-color: var(--mark); text-decoration-thickness: 2px; }
.form-actions { padding-block-start: 4px; }
@media (max-width: 639px) { .form-actions .btn { width: 100%; } }

.field-error { color: var(--danger); font-size: 0.88rem; display: none; }
.field.invalid .field-error { display: block; }
.field.invalid input[type="text"], .field.invalid input[type="email"], .field.invalid input[type="tel"], .field.invalid .select select { box-shadow: inset 0 0 0 1.5px var(--danger); }
fieldset.invalid legend { color: var(--danger); }
fieldset.invalid .choice span { box-shadow: inset 0 0 0 1px var(--danger); }

.form-status { display: none; }
.form-status.ok, .form-status.err {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 16px 18px; border-radius: 18px; font-weight: 500;
  animation: status-in 450ms var(--ease-out);
}
.form-status.ok { background: var(--accent-soft); color: var(--ink); }
.form-status.err { background: color-mix(in srgb, var(--danger) 10%, transparent); color: var(--danger); }
.form-status .ic { font-size: 22px; color: var(--ink); flex: none; }
@keyframes status-in { from { opacity: 0; transform: translateY(6px) scale(0.98); } to { opacity: 1; transform: none; } }

/* Honeypot, hidden without pushing the page sideways in RTL. */
.hp { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* ----------------------------------------------------------------- faq -- */

.faq-grid { display: grid; gap: 24px; }
@media (min-width: 960px) { .faq-grid { grid-template-columns: 5fr 7fr; gap: 80px; } .faq-grid .section-title { margin-block-end: 0; } }
.faq details { border-block-end: 1px solid var(--hair-strong); }
.faq details:first-child { border-block-start: 1px solid var(--hair-strong); }
.faq summary {
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding-block: 24px;
  cursor: pointer; list-style: none;
  font-weight: 550; font-size: 1.12rem; letter-spacing: -0.01em;
}
html[lang="ar"] .faq summary { letter-spacing: 0; }
.faq summary::-webkit-details-marker { display: none; }
.faq-icon {
  width: 34px; height: 34px; border-radius: 999px; flex: none;
  display: grid; place-items: center;
  background: var(--shell); box-shadow: inset 0 0 0 1px var(--hair-strong);
  color: var(--ink-2); font-size: 16px;
  transition: transform 350ms var(--ease-out), background-color 200ms var(--ease-out), color 200ms var(--ease-out);
}
.faq details[open] .faq-icon { transform: rotate(45deg); background: var(--accent); color: var(--on-accent); box-shadow: none; }
.faq-a p { padding-block-end: 24px; color: var(--ink-2); max-width: 40rem; }
.faq details::details-content {
  block-size: 0;
  overflow: clip;
  transition: block-size 400ms var(--ease-out), content-visibility 400ms allow-discrete;
}
.faq details[open]::details-content { block-size: auto; }

/* --------------------------------------------------------------- footer -- */
/* The footer is a second colour-field panel, so each page opens and closes
   on its field colour. */

footer { padding: var(--frame); padding-block-start: 0; }
.foot-band {
  border-radius: var(--stage-r);
  background:
    radial-gradient(50% 120% at 100% 100%, color-mix(in srgb, var(--accent) 22%, transparent), transparent 70%),
    var(--field);
  color: var(--on-field-2);
  padding-block: 48px 116px;
}
[dir="rtl"] .foot-band { background: radial-gradient(50% 120% at 0% 100%, color-mix(in srgb, var(--accent) 22%, transparent), transparent 70%), var(--field); }
@media (min-width: 768px) { .foot-band { padding-block: 56px; } }
.foot { display: grid; gap: 20px; font-size: 0.92rem; }
@media (min-width: 768px) { .foot { grid-template-columns: auto 1fr auto; align-items: center; gap: 32px; } }
.foot .brand { color: var(--on-field); }
.foot nav { display: flex; flex-wrap: wrap; gap: 20px; }
.foot nav a { color: var(--on-field); text-decoration: none; }
.foot nav a:hover { text-decoration: underline; }

/* Mobile action dock: same button as the hero, shown once the hero CTA scrolls away. */
.dock { display: none; }
@media (max-width: 767px) {
  .dock {
    display: block;
    position: fixed; z-index: 30;
    inset-inline: 10px; inset-block-end: calc(10px + env(safe-area-inset-bottom));
    padding: 6px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--surface) 78%, transparent);
    -webkit-backdrop-filter: blur(18px) saturate(160%);
    backdrop-filter: blur(18px) saturate(160%);
    box-shadow: inset 0 0 0 1px var(--hair), 0 18px 40px -18px var(--shadow);
    transform: translateY(calc(100% + 24px));
    transition: transform 500ms var(--ease-drawer);
  }
  .dock.show { transform: none; }
  .dock .btn { width: 100%; }
}

/* Cookie question for the Meta Pixel: shown only when a pixel ID is set and
   the visitor has not chosen yet. Allow and No thanks carry equal weight.
   The mobile dock steps aside while it is open. */
.cookie-bar {
  position: fixed; z-index: 45;
  inset-inline: 10px; inset-block-end: calc(10px + env(safe-area-inset-bottom));
  max-width: 640px; margin-inline: auto;
  display: grid; gap: 14px;
  padding: 16px 16px 16px 22px;
  border-radius: 24px;
  background: color-mix(in srgb, var(--surface) 90%, transparent);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  backdrop-filter: blur(18px) saturate(160%);
  box-shadow: inset 0 0 0 1px var(--hair), 0 24px 60px -24px var(--shadow);
  color: var(--ink); font-size: 0.92rem; line-height: 1.5;
}
[dir="rtl"] .cookie-bar { padding: 16px 22px 16px 16px; }
.cookie-bar[hidden] { display: none; }
.cookie-bar a { color: var(--ink); }
@media (min-width: 640px) { .cookie-bar { grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 20px; } }
.cookie-actions { display: flex; gap: 8px; }
.cookie-actions button {
  flex: 1; min-height: 44px; padding-inline: 20px;
  border: 0; border-radius: 999px;
  font: inherit; font-weight: 600; white-space: nowrap; cursor: pointer;
  transition: transform 160ms var(--ease-out);
}
.cookie-actions button:active { transform: scale(0.97); }
.cookie-allow { background: var(--accent); color: var(--on-accent); }
.cookie-decline { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1px var(--hair-strong); }
:root.cookie-open .dock { display: none; }
.foot nav button { padding: 0; border: 0; background: none; font: inherit; color: var(--on-field); cursor: pointer; }
.foot nav button[hidden] { display: none; }
.foot nav button:hover { text-decoration: underline; }

/* ------------------------------------------------- legal, index, looks -- */

.prose { max-width: 44rem; padding-block: 132px 96px; display: grid; gap: 20px; }
.prose h1 { font-size: clamp(2.2rem, 4.6vw, 3.4rem); }
.prose h2 { font-size: 1.4rem; letter-spacing: -0.02em; margin-block-start: 16px; }
.prose ul { padding-inline-start: 1.2rem; margin: 0; display: grid; gap: 8px; }
.prose li::marker { color: var(--mark); }
.prose a { color: var(--ink); text-decoration-color: var(--mark); text-decoration-thickness: 2px; }
.pages { list-style: none; padding: 0; margin: 8px 0 0; display: grid; gap: 12px; }
.pages a {
  display: grid; gap: 4px; padding: 22px 24px; border-radius: var(--r-lg);
  background: var(--surface); box-shadow: inset 0 0 0 1px var(--hair);
  color: var(--ink); text-decoration: none;
  transition: transform 200ms var(--ease-out), box-shadow 200ms var(--ease-out);
}
.pages a:hover { box-shadow: inset 0 0 0 1px var(--ink); }
.pages a:active { transform: scale(0.99); }
.pages span { color: var(--ink-2); font-size: 0.95rem; }

.directions { padding-block: 132px 96px; display: grid; gap: 20px; }
.directions-head { display: grid; gap: 16px; max-width: 46rem; margin-block-end: 20px; }
.directions-head h1 { font-size: clamp(2.4rem, 5vw, 3.8rem); }
.look-card { padding: 6px; border-radius: var(--r-xl); background: var(--shell); box-shadow: inset 0 0 0 1px var(--hair); scroll-margin-top: 96px; }
.look-core {
  display: grid; gap: 28px; align-items: center;
  padding: 22px;
  border-radius: calc(var(--r-xl) - 6px);
  background: var(--surface);
}
@media (min-width: 960px) { .look-core { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 40px; padding: 32px; } }
.look-info { display: grid; gap: 16px; align-content: start; }
.look-num { font-size: 0.85rem; font-weight: 600; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.look-info h2 { font-size: clamp(1.6rem, 2.6vw, 2.1rem); letter-spacing: -0.03em; }
.swatches { display: grid; grid-template-columns: 1.6fr 1.15fr 1fr; gap: 8px; height: 136px; }
.swatch {
  display: flex; flex-direction: column; justify-content: flex-end; gap: 2px;
  padding: 12px 14px; border-radius: 18px;
  font-size: 0.78rem; line-height: 1.3;
  box-shadow: inset 0 0 0 1px var(--hair);
}
.swatch b { font-size: 0.9rem; font-weight: 600; }
.swatch span { opacity: 0.8; font-variant-numeric: tabular-nums; }
.look-meta { display: grid; gap: 6px; margin: 0; font-size: 0.95rem; }
.look-meta div { display: grid; grid-template-columns: 7.5rem 1fr; gap: 12px; }
.look-meta dt { color: var(--ink-3); }
.look-meta dd { margin: 0; }
.look-links-label { font-size: 0.85rem; font-weight: 600; color: var(--ink-3); margin-block-start: 4px; }
.look-links { display: flex; flex-wrap: wrap; gap: 8px; }
.look-links a {
  padding: 8px 14px; border-radius: 999px; font-size: 0.9rem; font-weight: 500; text-decoration: none;
  background: var(--paper-2); box-shadow: inset 0 0 0 1px var(--hair);
  transition: background-color 200ms var(--ease-out), color 200ms var(--ease-out);
}
.look-links a:hover { background: var(--ink); color: var(--paper); }
.preview {
  position: relative;
  aspect-ratio: 1440 / 900;
  overflow: hidden;
  border-radius: 18px;
  background: var(--paper-2);
  box-shadow: inset 0 0 0 1px var(--hair), 0 30px 60px -40px var(--shadow);
}
.preview iframe { position: absolute; inset-block-start: 0; inset-inline-start: 0; width: 1440px; height: 900px; border: 0; transform-origin: top left; pointer-events: none; }
.preview-link { position: absolute; inset: 0; border-radius: inherit; }
.preview-link:hover { box-shadow: inset 0 0 0 2px var(--ink); }

/* ----------------------------------------------------- entrance motion -- */

.js [data-reveal] {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 800ms var(--ease-out), transform 1000ms var(--ease-out);
  transition-delay: calc(var(--i, 0) * 80ms);
}
.js [data-reveal].in { opacity: 1; transform: none; }
.js .hero-visual[data-reveal] { transform: translateY(32px) scale(0.98); }
.js .hero-visual[data-reveal].in { transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js [data-reveal], .js .hero-visual[data-reveal] { transform: none; transition: opacity 400ms linear; }
  .js .steps li[data-reveal]::after, .js .vault .ring { transform: none; transition: none; }
  .js .vault .ring { opacity: 1; }
  .js .atmos .glow { animation: none; }
  .typing span { animation: none; }
  .btn, .btn-icon, .faq-icon, .choice span, .cookie-actions button, .use .tile-core, .use-link .ic { transition: none; }
  .faq details::details-content { transition: none; }
  .dock { transition: none; }
  .form-status.ok, .form-status.err { animation: none; }
}

/* ------------------------------------------------------- small screens -- */

@media (max-width: 639px) {
  .screen { min-height: 470px; }
  .benefit.lead .tile-core { min-height: 0; padding: 28px; gap: 48px; }
}

/* ============================================================== looks == */
/* Per-look atmosphere and headline treatment, each after its reference in
   site/examples. Wherever the field text is light, glows and figures stay
   clear of the headline so it keeps its contrast. The whole atmosphere is
   mirrored for Arabic, so shapes inside it are placed with physical "left":
   a logical inset would be flipped twice and land on the wrong side. */

/* Shared blurred figure (purple-gold and tangerine-lime): a person in motion,
   smeared sideways by an SVG blur so only colour and movement remain. */
.figure { position: absolute; inset-block: -4% 0; height: 104%; width: 46%; overflow: visible; }
/* The blurred looks hold still: a filter on a moving layer would repaint every frame. */
:root:is([data-look="purple-gold"], [data-look="tangerine-lime"], [data-look="plum-sunset"], [data-look="sapphire-jade"], [data-look="seal-crimson"]) .atmos .glow { animation: none; }

/* Midnight black, white and lime (after Northline): a lime-to-green glow
   rising under the phone, fine vertical light streaks, green gradients. */
:root[data-look="midnight-lime"] .stage {
  background: linear-gradient(180deg, var(--field) 0%, var(--field) 28%, #0d1806 62%, #16290a 100%);
}
:root[data-look="midnight-lime"] .stage .glow {
  background:
    radial-gradient(30% 26% at 50% 100%, var(--accent), color-mix(in srgb, var(--accent) 70%, transparent) 40%, transparent 78%),
    radial-gradient(58% 52% at 50% 100%, color-mix(in srgb, var(--accent) 52%, transparent), transparent 76%),
    radial-gradient(95% 78% at 50% 100%, color-mix(in srgb, #2f9b3c 62%, transparent), transparent 80%),
    radial-gradient(60% 40% at 50% 0%, color-mix(in srgb, #1d3a0c 80%, transparent), transparent 80%);
}
:root[data-look="midnight-lime"] .stage .atmos::after {
  background: repeating-linear-gradient(90deg, color-mix(in srgb, var(--accent) 42%, transparent) 0 1px, transparent 1px 7px);
  -webkit-mask-image: radial-gradient(58% 72% at 50% 100%, #000, transparent 80%);
  mask-image: radial-gradient(58% 72% at 50% 100%, #000, transparent 80%);
}
:root[data-look="midnight-lime"] .hero-copy h1 { font-weight: 500; }
:root[data-look="midnight-lime"] .accent-text {
  background: linear-gradient(90deg, var(--accent), #5ee38a);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
:root[data-look="midnight-lime"] :is(.btn, .eyebrow-icon, .brand-mark, .voice-tag, .vault-core) {
  background: linear-gradient(135deg, var(--accent), #79e05a);
}
:root[data-look="midnight-lime"] .benefit.lead .tile-core {
  background:
    radial-gradient(90% 70% at 100% 0%, rgba(255, 255, 255, 0.4), transparent 60%),
    linear-gradient(140deg, var(--accent) 0%, #8fe34a 55%, #3fcf6f 100%);
}
:root[data-look="midnight-lime"] .privacy-panel {
  background:
    radial-gradient(50% 70% at 82% 100%, color-mix(in srgb, var(--accent) 55%, transparent), transparent 72%),
    radial-gradient(70% 90% at 70% 100%, color-mix(in srgb, #2f9b3c 55%, transparent), transparent 75%),
    linear-gradient(180deg, var(--field), #0d1806);
}
:root[data-look="midnight-lime"] .foot-band {
  background:
    radial-gradient(60% 160% at 100% 100%, color-mix(in srgb, var(--accent) 38%, transparent), transparent 70%),
    linear-gradient(90deg, var(--field), #0d1806);
}

/* Plum, blush and sunset orange (after Crest): the plum sky reddens down to
   a sea horizon that runs the full width just above the foot of the phone.
   The sun sinks into it inside a thin dark ring, its light breaks up on the
   water, and the phone has a sunset frame like the Crest card. --horizon is
   the horizon's height above the bottom of the stage. */
:root[data-look="plum-sunset"] .stage {
  --horizon: 180px;
  background: linear-gradient(180deg,
    #14040f 0%, var(--field) 28%,
    #3c0b2b calc(100% - var(--horizon) - 300px),
    #64123a calc(100% - var(--horizon) - 120px),
    #b8303c calc(100% - var(--horizon) - 45px),
    #e2463c calc(100% - var(--horizon) - 16px),
    #ff9a5c calc(100% - var(--horizon) - 4px),
    #ffd0a0 calc(100% - var(--horizon)),
    #b42a33 calc(100% - var(--horizon) + 3px),
    #6b1428 calc(100% - var(--horizon) + 60px),
    #2a0719 100%);
}
:root[data-look="plum-sunset"] .stage .glow {
  inset: 0;
  background:
    radial-gradient(9% 7% at 72% calc(100% - var(--horizon)), #fff0dc, #ffb27a 30%, color-mix(in srgb, var(--accent) 80%, transparent) 55%, transparent 80%),
    radial-gradient(62% 1.2% at 68% calc(100% - var(--horizon)), #ffd2a8, transparent 85%),
    radial-gradient(40% 26% at 72% calc(100% - var(--horizon)), color-mix(in srgb, var(--accent) 85%, transparent), transparent 72%),
    radial-gradient(80% 34% at 66% calc(100% - var(--horizon)), color-mix(in srgb, #d0303f 70%, transparent), transparent 75%),
    radial-gradient(70% 46% at 74% 40%, color-mix(in srgb, #8a1846 55%, transparent), transparent 74%),
    radial-gradient(10% 16% at 72% calc(100% - var(--horizon) + 70px), color-mix(in srgb, #ff9a62 65%, transparent), transparent 80%);
}
:root[data-look="plum-sunset"] .stage .sun {
  display: block; position: absolute;
  left: 72%; top: calc(100% - var(--horizon));
  width: 560px; aspect-ratio: 1; translate: -50% -50%;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1.5px color-mix(in srgb, #1a0410 75%, transparent), 0 0 70px -20px color-mix(in srgb, var(--accent) 60%, transparent);
  -webkit-mask-image: linear-gradient(180deg, #000 0 49.6%, rgba(0, 0, 0, 0.35) 50.4%, transparent 68%);
  mask-image: linear-gradient(180deg, #000 0 49.6%, rgba(0, 0, 0, 0.35) 50.4%, transparent 68%);
}
/* Light breaking up on the water below the horizon. */
:root[data-look="plum-sunset"] .stage .atmos::after {
  background: repeating-linear-gradient(180deg, color-mix(in srgb, #ffb38f 34%, transparent) 0 1px, transparent 1px 7px);
  -webkit-mask-image:
    linear-gradient(180deg, transparent calc(100% - var(--horizon) + 4px), #000 calc(100% - var(--horizon) + 10px)),
    radial-gradient(46% 24% at 70% 100%, #000, transparent 85%);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(180deg, transparent calc(100% - var(--horizon) + 4px), #000 calc(100% - var(--horizon) + 10px)),
    radial-gradient(46% 24% at 70% 100%, #000, transparent 85%);
  mask-composite: intersect;
}
:root[data-look="plum-sunset"] .hero-copy h1 { font-weight: 400; letter-spacing: -0.045em; }
:root[data-look="plum-sunset"] .section-title { font-weight: 500; }
:root[data-look="plum-sunset"] .device {
  background: linear-gradient(168deg, #2a0a1c 0%, #4a0c24 34%, #a01d30 64%, #f0603a 86%, #ffc49c 100%);
  box-shadow:
    inset 0 0 0 1px rgba(255, 200, 170, 0.35),
    inset 0 1px 0 rgba(255, 220, 200, 0.45),
    0 50px 90px -34px color-mix(in srgb, var(--accent) 70%, transparent),
    0 24px 40px -28px rgba(0, 0, 0, 0.5);
}
/* The buttons are the setting sun: a bright gradient with a warm glow, so
   they still stand out against the red sky. */
:root[data-look="plum-sunset"] .btn {
  background: linear-gradient(135deg, #ffd0a0 0%, #ff8a4c 38%, var(--accent) 62%, #ff4a2a 100%);
  box-shadow:
    inset 0 0 0 1px rgba(255, 230, 210, 0.55),
    inset 0 1px 0 rgba(255, 255, 255, 0.6),
    0 0 0 5px color-mix(in srgb, var(--accent) 18%, transparent),
    0 18px 44px -10px color-mix(in srgb, #ff6a3d 85%, transparent);
}
@media (hover: hover) and (pointer: fine) {
  :root[data-look="plum-sunset"] .btn:hover {
    box-shadow:
      inset 0 0 0 1px rgba(255, 230, 210, 0.55),
      inset 0 1px 0 rgba(255, 255, 255, 0.6),
      0 0 0 7px color-mix(in srgb, var(--accent) 24%, transparent),
      0 22px 54px -10px color-mix(in srgb, #ff6a3d 95%, transparent);
  }
}
/* Wide screens: a shorter stage so the phone sits high and whole on screen,
   the horizon just above its foot, and the copy lifted into the darker sky. */
@media (min-width: 1200px) {
  :root[data-look="plum-sunset"] .stage { --horizon: 140px; padding-block-start: 136px; }
  :root[data-look="plum-sunset"] .hero-copy { padding-block-end: 120px; }
  :root[data-look="plum-sunset"] .hero-copy h1 { font-size: clamp(2.6rem, 4.4vw, 4rem); }
  /* A long headline would push the phone down into the sea. */
  :root[data-look="plum-sunset"] .hero-copy h1.long { font-size: clamp(2.4rem, 3.9vw, 3.5rem); }
}
/* Narrow desktops stack the voice card under the phone, so the horizon
   rises with the phone and the copy moves to the top of the sky. */
@media (min-width: 960px) and (max-width: 1199px) {
  :root[data-look="plum-sunset"] .stage { --horizon: 340px; }
  :root[data-look="plum-sunset"] .hero-copy { align-self: start; padding-block-start: 32px; }
}

/* Royal purple, white and gold (after Pelmatech): one big blurred figure,
   lit gold on one side and deep violet on the other, behind strong reeded
   glass, light type and a gold phone. */
:root[data-look="purple-gold"] .stage {
  background: linear-gradient(135deg, #8b57ef 0%, var(--field) 42%, #5a27c2 100%);
  --fig-a: #fff1bf; --fig-b: #f0a43c; --fig-c: #2a0c84;
}
:root[data-look="purple-gold"] .stage .glow {
  background:
    radial-gradient(18% 44% at 64% 40%, color-mix(in srgb, #2a0c84 72%, transparent), transparent 72%),
    radial-gradient(26% 36% at 50% 46%, color-mix(in srgb, var(--accent) 38%, transparent), transparent 72%),
    radial-gradient(40% 50% at 10% 100%, color-mix(in srgb, var(--field-2) 80%, transparent), transparent 72%);
}
:root[data-look="purple-gold"] .stage .figure { display: block; left: 31%; }
:root[dir="rtl"][data-look="purple-gold"] .stage .figure { left: 37%; }
:root[data-look="purple-gold"] .figure .fig-body { fill: url(#fig-side); }
:root[data-look="purple-gold"] .figure .fig-head { fill: #2a0c84; }
/* The reeds sit over the figure; a soft purple wash under the copy keeps the
   gold blur from running under the words (Arabic lines reach the middle). */
:root[data-look="purple-gold"] .stage .atmos::after {
  background:
    radial-gradient(42% 62% at 10% 58%, color-mix(in srgb, var(--field) 88%, transparent), transparent 100%),
    repeating-linear-gradient(90deg,
    rgba(255, 255, 255, 0.11) 0, rgba(255, 255, 255, 0) 6px,
    rgba(40, 0, 90, 0.16) 13px, rgba(255, 255, 255, 0.11) 14px);
}
:root[data-look="purple-gold"] .hero-copy h1 { font-weight: 400; letter-spacing: -0.045em; text-shadow: 0 2px 30px rgba(50, 10, 120, 0.35); }
:root[data-look="purple-gold"] .section-title { font-weight: 500; }
:root[data-look="purple-gold"] .device {
  transform: none;
  background: linear-gradient(160deg, #fff4d6, var(--accent) 42%, #c4862a);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.6),
    inset 0 2px 0 rgba(255, 255, 255, 0.75),
    0 50px 90px -34px color-mix(in srgb, #2a0c84 85%, transparent),
    0 24px 40px -28px rgba(0, 0, 0, 0.35);
}

/* Deep blue, white and pink (after Solix): blue fading to white, dense
   dot-matrix hemispheres either side, gradient headline with floating
   badges, and a pink phone between white cards. */
:root[data-look="blue-pink"] .stage {
  background: linear-gradient(180deg, var(--field) 0%, #0c3aa6 34%, var(--field-2) 66%, color-mix(in srgb, var(--field-2) 18%, var(--paper)) 100%);
}
:root[data-look="blue-pink"] .stage .glow {
  background:
    radial-gradient(34% 26% at 50% 30%, color-mix(in srgb, #6f9bff 45%, transparent), transparent 72%),
    radial-gradient(30% 22% at 50% 82%, color-mix(in srgb, var(--accent) 55%, transparent), transparent 72%);
}
:root[data-look="blue-pink"] .stage .atmos::after {
  background-image: radial-gradient(circle, rgba(255, 255, 255, 0.8) 0 1.1px, transparent 1.7px);
  background-size: 9px 9px;
  -webkit-mask-image: radial-gradient(30% 46% at 2% 36%, #000 35%, transparent 100%), radial-gradient(30% 46% at 98% 36%, #000 35%, transparent 100%);
  -webkit-mask-composite: source-over;
  mask-image: radial-gradient(30% 46% at 2% 36%, #000 35%, transparent 100%), radial-gradient(30% 46% at 98% 36%, #000 35%, transparent 100%);
  mask-composite: add;
}
:root[data-look="blue-pink"] .hero-copy h1 {
  font-weight: 500;
  background: linear-gradient(180deg, #ffffff 40%, #c7d7ff 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
:root[data-look="blue-pink"] .badge {
  display: grid; place-items: center;
  position: absolute;
  width: 48px; height: 48px; border-radius: 16px; font-size: 23px;
}
:root[data-look="blue-pink"] .badge-lock {
  inset-inline-end: -26px; inset-block-start: -16px; rotate: 12deg;
  background: var(--accent); color: var(--on-accent);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55), 0 14px 30px -8px color-mix(in srgb, var(--accent) 80%, transparent);
}
:root[data-look="blue-pink"] .badge-spark {
  inset-inline-start: -30px; inset-block-end: 4px; rotate: -10deg; border-radius: 999px;
  background: rgba(255, 255, 255, 0.16); color: #ffffff;
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.35);
}
:root[data-look="blue-pink"] .device {
  background: linear-gradient(160deg, #ffd3ea, var(--accent) 42%, #e5559c);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.55),
    inset 0 2px 0 rgba(255, 255, 255, 0.7),
    0 50px 90px -34px color-mix(in srgb, var(--accent) 75%, transparent),
    0 24px 40px -28px rgba(0, 0, 0, 0.35);
}

/* Lagoon blue, cloud white and pink (after Upfluence): a clear sky fading to
   white, soft clouds, heavy capitals with a pink marker. */
:root:is([data-look="lagoon-pink"], [data-look="lagoon-split"]) .stage {
  background: linear-gradient(180deg, var(--field) 0%, var(--field) 36%, var(--field-2) 72%, var(--paper) 100%);
}
:root:is([data-look="lagoon-pink"], [data-look="lagoon-split"]) .stage .glow {
  background:
    radial-gradient(30% 20% at 50% 86%, color-mix(in srgb, var(--accent) 60%, transparent), transparent 72%),
    radial-gradient(24% 16% at 12% 22%, rgba(255, 255, 255, 0.5), transparent 72%),
    radial-gradient(20% 14% at 88% 30%, rgba(255, 255, 255, 0.42), transparent 72%);
}
:root:is([data-look="lagoon-pink"], [data-look="lagoon-split"]) .hero-copy h1 { font-weight: 800; text-transform: uppercase; letter-spacing: -0.035em; line-height: 0.94; }
:root:is([data-look="lagoon-pink"], [data-look="lagoon-split"]) .section-title { font-weight: 700; }
/* 05b, the lagoon look side by side: the capitals step down a size so the
   headline keeps to three lines beside the phone, and the pink glow sits
   under the phone instead of the centre. */
:root[data-look="lagoon-split"] .stage .glow {
  background:
    radial-gradient(28% 22% at 74% 88%, color-mix(in srgb, var(--accent) 62%, transparent), transparent 72%),
    radial-gradient(24% 16% at 12% 22%, rgba(255, 255, 255, 0.5), transparent 72%),
    radial-gradient(20% 14% at 88% 18%, rgba(255, 255, 255, 0.42), transparent 72%);
}
@media (min-width: 960px) {
  :root[data-look="lagoon-split"] .hero-copy h1 { font-size: clamp(2.4rem, 4.2vw, 3.8rem); max-width: none; }
}

/* Tangerine, white and acid lime (after Kinetic): a motion-blurred figure
   with thick, soft acid-lime streaks, and heavy white type. The orange is
   deepest behind the words, so the white keeps its contrast, and brightest
   behind the phone. */
:root[data-look="tangerine-lime"] .stage {
  background: linear-gradient(115deg, #b83a00 0%, var(--field) 34%, #e24c00 52%, #ff6413 74%, #ee5001 100%);
  --fig-a: #2a0c00; --fig-b: #5a1c00; --fig-c: #c43f00;
}
:root[data-look="tangerine-lime"] .stage .figure { display: block; left: 40%; width: 40%; }
:root[data-look="tangerine-lime"] .stage .glow { filter: blur(9px); }
:root[data-look="tangerine-lime"] .stage .glow {
  background:
    radial-gradient(34% 6% at 62% 34%, var(--accent), color-mix(in srgb, var(--accent) 60%, transparent) 40%, transparent 80%),
    radial-gradient(44% 5% at 70% 43%, color-mix(in srgb, var(--accent) 90%, transparent), transparent 80%),
    radial-gradient(30% 4.5% at 56% 51%, color-mix(in srgb, var(--accent) 85%, transparent), transparent 80%),
    radial-gradient(48% 7% at 74% 60%, color-mix(in srgb, var(--accent) 70%, transparent), transparent 80%),
    radial-gradient(36% 5% at 64% 69%, color-mix(in srgb, var(--accent) 55%, transparent), transparent 80%),
    radial-gradient(50% 60% at 96% 0%, color-mix(in srgb, #ff8a3d 60%, transparent), transparent 70%);
}
:root[data-look="tangerine-lime"] .stage .atmos::after {
  background: repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.08) 0 1px, transparent 1px 5px);
  -webkit-mask-image: linear-gradient(90deg, transparent 30%, #000 55%, #000 85%, transparent), linear-gradient(180deg, transparent 22%, #000 40%, #000 70%, transparent 82%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(90deg, transparent 30%, #000 55%, #000 85%, transparent), linear-gradient(180deg, transparent 22%, #000 40%, #000 70%, transparent 82%);
  mask-composite: intersect;
}
:root[data-look="tangerine-lime"] .hero-copy h1 { font-weight: 750; letter-spacing: -0.055em; line-height: 0.96; font-size: clamp(2.8rem, 5.1vw, 4.6rem); }
:root[data-look="tangerine-lime"] .section-title { font-weight: 700; letter-spacing: -0.045em; }

/* Sapphire, white and neon jade (after Transform9): sapphire brightening to
   ocean blue, a soft silhouette of someone talking, facing the headline,
   with neon-jade sound waves leaving their mouth. */
:root[data-look="sapphire-jade"] .stage {
  background: linear-gradient(100deg, #00318a 0%, var(--field) 36%, #0a6fd6 62%, #00b8f0 84%, #00d3fb 100%);
}
:root[data-look="sapphire-jade"] .stage .glow {
  background:
    radial-gradient(14% 26% at 59% 36%, color-mix(in srgb, #8cf2ff 50%, transparent), transparent 72%),
    radial-gradient(36% 56% at 84% 26%, color-mix(in srgb, #7ff0ff 45%, transparent), transparent 72%),
    radial-gradient(18% 22% at 56% 34%, color-mix(in srgb, var(--accent) 22%, transparent), transparent 72%);
}
:root[data-look="sapphire-jade"] .stage .speaker {
  display: block; position: absolute;
  left: 49%; top: -15%;
  height: 120%; aspect-ratio: 600 / 1000;
  background: url("speaker.svg") center / 100% 100% no-repeat;   /* built by build.py */
}
:root[data-look="sapphire-jade"] .stage .atmos::after {
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.06) 1px, transparent 1px);
  background-size: 72px 72px;
  -webkit-mask-image: linear-gradient(90deg, #000, transparent 70%);
  mask-image: linear-gradient(90deg, #000, transparent 70%);
}
:root[data-look="sapphire-jade"] .hero-copy h1 { font-weight: 500; letter-spacing: -0.045em; }
:root[data-look="sapphire-jade"] .section-title { font-weight: 600; }

/* Seal blue, navy and crimson pink (after Visionary): a pale sky deepening
   to navy, a glowing orb behind the phone seen through reeded glass, light
   type with the accent words in bold italic. */
:root[data-look="seal-crimson"] .stage {
  background: linear-gradient(180deg, #eef9fe 0%, var(--field) 44%, #b9dcf2 70%, #6f9ccc 88%, #1b4a80 100%);
}
:root[data-look="seal-crimson"] .stage .glow {
  background: radial-gradient(34% 44% at 74% 48%, color-mix(in srgb, var(--accent) 30%, transparent), transparent 72%);
}
:root[data-look="seal-crimson"] .stage .sun {
  display: block; position: absolute;
  left: 76%; top: 50%;
  width: min(48vw, 640px); aspect-ratio: 1; translate: -50% -50%;
  border-radius: 50%;
  background:
    radial-gradient(circle at 28% 24%, #ffe1e7 0%, var(--accent) 14%, color-mix(in srgb, var(--accent) 0%, transparent) 40%),
    radial-gradient(circle at 74% 80%, #8cc0ee 0%, transparent 34%),
    radial-gradient(circle at 46% 44%, #2565ad 0%, #0b3a75 46%, #072d59 74%, #04182f 100%);
  box-shadow: 0 0 120px -10px color-mix(in srgb, var(--accent) 45%, transparent), 0 40px 120px -40px rgba(7, 45, 89, 0.6);
}
/* Reeded glass over the near side of the orb. */
:root[data-look="seal-crimson"] .stage .atmos::after {
  left: 50%; right: auto; width: 21%;
  background: repeating-linear-gradient(90deg,
    rgba(255, 255, 255, 0.34) 0 1px, rgba(255, 255, 255, 0.08) 1px 20px,
    rgba(7, 45, 89, 0.12) 20px 38px, rgba(255, 255, 255, 0.2) 38px 39px, transparent 39px 54px);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
  -webkit-mask-image: linear-gradient(180deg, transparent 6%, #000 22%, #000 80%, transparent 96%);
  mask-image: linear-gradient(180deg, transparent 6%, #000 22%, #000 80%, transparent 96%);
}
:root[data-look="seal-crimson"] .hero-copy h1 { font-weight: 300; letter-spacing: -0.05em; }
/* Both ends of the gradient keep 3:1 on the pale field. The gradient only
   paints inside each line's box and the slanted letters lean past its right
   edge, so every line gets padding for the lean, taken back by the margin. */
:root[data-look="seal-crimson"] .accent-text {
  background: linear-gradient(90deg, var(--mark), #e04a6e);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  padding-inline: 0.04em 0.3em; margin-inline: -0.04em -0.3em;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
:root[data-look="seal-crimson"] .section-title { font-weight: 500; }

/* On narrow screens the copy sits above the phone, so glows and figures move
   down behind the phone and stay off the text. */
@media (max-width: 959px) {
  :root[data-look="plum-sunset"] .stage { --horizon: 330px; }
  :root[data-look="plum-sunset"] .stage .glow {
    background:
      radial-gradient(22% 4% at 60% calc(100% - var(--horizon)), #fff0dc, #ffb27a 30%, color-mix(in srgb, var(--accent) 80%, transparent) 55%, transparent 80%),
      radial-gradient(80% 0.8% at 50% calc(100% - var(--horizon)), #ffd2a8, transparent 85%),
      radial-gradient(70% 16% at 60% calc(100% - var(--horizon)), color-mix(in srgb, var(--accent) 80%, transparent), transparent 72%),
      radial-gradient(22% 8% at 60% calc(100% - var(--horizon) + 60px), color-mix(in srgb, #ff9a62 60%, transparent), transparent 80%);
  }
  :root[data-look="plum-sunset"] .stage .sun { left: 60%; width: 420px; }
  :root[data-look="plum-sunset"] .stage .atmos::after {
    -webkit-mask-image:
      linear-gradient(180deg, transparent calc(100% - var(--horizon) + 4px), #000 calc(100% - var(--horizon) + 10px)),
      radial-gradient(60% 18% at 60% calc(100% - var(--horizon) + 80px), #000, transparent 85%);
    mask-image:
      linear-gradient(180deg, transparent calc(100% - var(--horizon) + 4px), #000 calc(100% - var(--horizon) + 10px)),
      radial-gradient(60% 18% at 60% calc(100% - var(--horizon) + 80px), #000, transparent 85%);
  }
  :root:is([data-look="purple-gold"], [data-look="tangerine-lime"]) .stage .figure {
    left: 20%; width: 80%; inset-block-start: 38%; height: 62%;
  }
  :root[data-look="purple-gold"] .stage .glow {
    background:
      radial-gradient(30% 20% at 60% 64%, color-mix(in srgb, #2a0c84 60%, transparent), transparent 72%),
      radial-gradient(50% 24% at 50% 62%, color-mix(in srgb, var(--accent) 45%, transparent), transparent 72%);
  }
  :root[data-look="tangerine-lime"] .stage .glow {
    background:
      radial-gradient(60% 3% at 50% 58%, var(--accent), transparent 80%),
      radial-gradient(70% 3% at 56% 66%, color-mix(in srgb, var(--accent) 80%, transparent), transparent 80%),
      radial-gradient(56% 2.6% at 44% 74%, color-mix(in srgb, var(--accent) 70%, transparent), transparent 80%);
  }
  :root[data-look="blue-pink"] .badge { display: none; }
  :root[data-look="sapphire-jade"] .stage .speaker { left: 18%; top: 34%; height: 70%; }
  :root[data-look="seal-crimson"] .stage .sun { left: 50%; top: 70%; width: 130vw; }
  :root[data-look="seal-crimson"] .stage .atmos::after { left: 0; width: 46%; top: 50%; }
}

/* Arabic headlines keep their own spacing and case in every look. */
html[lang="ar"] .hero-copy h1 { letter-spacing: 0; text-transform: none; line-height: 1.25; }
html[lang="ar"]:root:is([data-look="plum-sunset"], [data-look="purple-gold"], [data-look="seal-crimson"]) .hero-copy h1 { font-weight: 500; }

/* ---------------------------------------- look tokens, from build.py -- */
:root[data-look="midnight-lime"] {
  --field: #0B0B0C;
  --field-2: #1C2410;
  --on-field: #FFFFFF;
  --on-field-2: #B9BCB4;
  --paper: #FFFFFF;
  --paper-2: #F2F3EE;
  --surface: #FFFFFF;
  --ink: #0B0B0C;
  --ink-2: #45464A;
  --ink-3: #5F6066;
  --accent: #C6F432;
  --on-accent: #0B0B0C;
  --mark: #4F6B00;
  --danger: #B3261E;
}
@media (prefers-color-scheme: dark) {
:root[data-look="midnight-lime"]:not([data-theme="light"]) {
  --field: #121313;
  --paper: #070708;
  --paper-2: #121314;
  --surface: #151517;
  --ink: #F4F5F0;
  --ink-2: #B4B6AE;
  --ink-3: #8F918A;
  --mark: #C6F432;
  --danger: #FF8A7A;
}
}
:root[data-look="midnight-lime"][data-theme="dark"] {
  --field: #121313;
  --paper: #070708;
  --paper-2: #121314;
  --surface: #151517;
  --ink: #F4F5F0;
  --ink-2: #B4B6AE;
  --ink-3: #8F918A;
  --mark: #C6F432;
  --danger: #FF8A7A;
}
:root[data-look="plum-sunset"] {
  --field: #22081C;
  --field-2: #7A1340;
  --on-field: #FFF1EC;
  --on-field-2: #E5C3CB;
  --paper: #FFF6F3;
  --paper-2: #FBE6E2;
  --surface: #FFFFFF;
  --ink: #2A0B22;
  --ink-2: #5C3A50;
  --ink-3: #74556A;
  --accent: #FF6A3D;
  --on-accent: #2A0B22;
  --mark: #D2381F;
  --danger: #B3261E;
}
@media (prefers-color-scheme: dark) {
:root[data-look="plum-sunset"]:not([data-theme="light"]) {
  --field: #2E0B26;
  --paper: #12040F;
  --paper-2: #1E0A1A;
  --surface: #230C1F;
  --ink: #FFF1EC;
  --ink-2: #DDBFC8;
  --ink-3: #B897A3;
  --mark: #FF6A3D;
  --danger: #FF8A7A;
}
}
:root[data-look="plum-sunset"][data-theme="dark"] {
  --field: #2E0B26;
  --paper: #12040F;
  --paper-2: #1E0A1A;
  --surface: #230C1F;
  --ink: #FFF1EC;
  --ink-2: #DDBFC8;
  --ink-3: #B897A3;
  --mark: #FF6A3D;
  --danger: #FF8A7A;
}
:root[data-look="purple-gold"] {
  --field: #723CD6;
  --field-2: #4A1FA3;
  --on-field: #FFFFFF;
  --on-field-2: #EDE5FF;
  --paper: #FCFFFF;
  --paper-2: #F2EEFB;
  --surface: #FFFFFF;
  --ink: #1E1240;
  --ink-2: #4B4366;
  --ink-3: #625B7C;
  --accent: #EDB158;
  --on-accent: #1E1240;
  --mark: #946013;
  --danger: #B3261E;
}
@media (prefers-color-scheme: dark) {
:root[data-look="purple-gold"]:not([data-theme="light"]) {
  --field: #6334C4;
  --paper: #110A22;
  --paper-2: #1B1233;
  --surface: #1E1538;
  --ink: #F3F0FA;
  --ink-2: #C5BEDA;
  --ink-3: #A39CB8;
  --mark: #EDB158;
  --danger: #FF8A7A;
}
}
:root[data-look="purple-gold"][data-theme="dark"] {
  --field: #6334C4;
  --paper: #110A22;
  --paper-2: #1B1233;
  --surface: #1E1538;
  --ink: #F3F0FA;
  --ink-2: #C5BEDA;
  --ink-3: #A39CB8;
  --mark: #EDB158;
  --danger: #FF8A7A;
}
:root[data-look="blue-pink"] {
  --field: #09318D;
  --field-2: #2C6BF0;
  --on-field: #FFFFFF;
  --on-field-2: #DCE6FF;
  --paper: #FFFFFF;
  --paper-2: #EEF3FD;
  --surface: #FFFFFF;
  --ink: #0A1E52;
  --ink-2: #44507A;
  --ink-3: #5B678C;
  --accent: #FD91CC;
  --on-accent: #09318D;
  --mark: #D13A8A;
  --danger: #B3261E;
}
@media (prefers-color-scheme: dark) {
:root[data-look="blue-pink"]:not([data-theme="light"]) {
  --field: #0A3399;
  --paper: #050D24;
  --paper-2: #0C1838;
  --surface: #0E1B40;
  --ink: #EEF3FD;
  --ink-2: #B9C3E0;
  --ink-3: #95A0C0;
  --mark: #FD91CC;
  --danger: #FF8A7A;
}
}
:root[data-look="blue-pink"][data-theme="dark"] {
  --field: #0A3399;
  --paper: #050D24;
  --paper-2: #0C1838;
  --surface: #0E1B40;
  --ink: #EEF3FD;
  --ink-2: #B9C3E0;
  --ink-3: #95A0C0;
  --mark: #FD91CC;
  --danger: #FF8A7A;
}
:root[data-look="lagoon-pink"] {
  --field: #7BDFF2;
  --field-2: #C4F1F9;
  --on-field: #08243A;
  --on-field-2: #1D3F55;
  --paper: #FCFFFF;
  --paper-2: #EAF8FB;
  --surface: #FFFFFF;
  --ink: #08243A;
  --ink-2: #3C5466;
  --ink-3: #526775;
  --accent: #F2B5D4;
  --on-accent: #08243A;
  --mark: #C7417F;
  --danger: #B3261E;
}
@media (prefers-color-scheme: dark) {
:root[data-look="lagoon-pink"]:not([data-theme="light"]) {
  --paper: #04161F;
  --paper-2: #0A2230;
  --surface: #0C2636;
  --ink: #EAF8FB;
  --ink-2: #B5CCD6;
  --ink-3: #8FA9B5;
  --mark: #F2B5D4;
  --danger: #FF8A7A;
}
}
:root[data-look="lagoon-pink"][data-theme="dark"] {
  --paper: #04161F;
  --paper-2: #0A2230;
  --surface: #0C2636;
  --ink: #EAF8FB;
  --ink-2: #B5CCD6;
  --ink-3: #8FA9B5;
  --mark: #F2B5D4;
  --danger: #FF8A7A;
}
:root[data-look="lagoon-split"] {
  --field: #7BDFF2;
  --field-2: #C4F1F9;
  --on-field: #08243A;
  --on-field-2: #1D3F55;
  --paper: #FCFFFF;
  --paper-2: #EAF8FB;
  --surface: #FFFFFF;
  --ink: #08243A;
  --ink-2: #3C5466;
  --ink-3: #526775;
  --accent: #F2B5D4;
  --on-accent: #08243A;
  --mark: #C7417F;
  --danger: #B3261E;
}
@media (prefers-color-scheme: dark) {
:root[data-look="lagoon-split"]:not([data-theme="light"]) {
  --paper: #04161F;
  --paper-2: #0A2230;
  --surface: #0C2636;
  --ink: #EAF8FB;
  --ink-2: #B5CCD6;
  --ink-3: #8FA9B5;
  --mark: #F2B5D4;
  --danger: #FF8A7A;
}
}
:root[data-look="lagoon-split"][data-theme="dark"] {
  --paper: #04161F;
  --paper-2: #0A2230;
  --surface: #0C2636;
  --ink: #EAF8FB;
  --ink-2: #B5CCD6;
  --ink-3: #8FA9B5;
  --mark: #F2B5D4;
  --danger: #FF8A7A;
}
:root[data-look="tangerine-lime"] {
  --field: #D04400;
  --field-2: #B83A00;
  --on-field: #FFFFFF;
  --on-field-2: #FFFFFF;
  --paper: #FCFFFF;
  --paper-2: #FFF0E6;
  --surface: #FFFFFF;
  --ink: #1A0D06;
  --ink-2: #55402F;
  --ink-3: #6B5646;
  --accent: #C8FD03;
  --on-accent: #140A05;
  --mark: #E04B00;
  --danger: #B3261E;
}
@media (prefers-color-scheme: dark) {
:root[data-look="tangerine-lime"]:not([data-theme="light"]) {
  --paper: #120804;
  --paper-2: #1E1009;
  --surface: #22130A;
  --ink: #FFF0E6;
  --ink-2: #D9C2B2;
  --ink-3: #B39C8C;
  --mark: #FF7A2E;
  --danger: #FF8A7A;
}
}
:root[data-look="tangerine-lime"][data-theme="dark"] {
  --paper: #120804;
  --paper-2: #1E1009;
  --surface: #22130A;
  --ink: #FFF0E6;
  --ink-2: #D9C2B2;
  --ink-3: #B39C8C;
  --mark: #FF7A2E;
  --danger: #FF8A7A;
}
:root[data-look="sapphire-jade"] {
  --field: #0042AC;
  --field-2: #00266B;
  --on-field: #FFFFFF;
  --on-field-2: #D6E4FF;
  --paper: #F6FAFF;
  --paper-2: #E6EFFB;
  --surface: #FFFFFF;
  --ink: #06142E;
  --ink-2: #3A4A68;
  --ink-3: #53627F;
  --accent: #83FD80;
  --on-accent: #06142E;
  --mark: #1D7F36;
  --danger: #B3261E;
}
@media (prefers-color-scheme: dark) {
:root[data-look="sapphire-jade"]:not([data-theme="light"]) {
  --paper: #030A1A;
  --paper-2: #0A1630;
  --surface: #0C1A38;
  --ink: #EEF4FF;
  --ink-2: #B6C3DC;
  --ink-3: #92A0BC;
  --mark: #83FD80;
  --danger: #FF8A7A;
}
}
:root[data-look="sapphire-jade"][data-theme="dark"] {
  --paper: #030A1A;
  --paper-2: #0A1630;
  --surface: #0C1A38;
  --ink: #EEF4FF;
  --ink-2: #B6C3DC;
  --ink-3: #92A0BC;
  --mark: #83FD80;
  --danger: #FF8A7A;
}
:root[data-look="seal-crimson"] {
  --field: #DBF2FC;
  --field-2: #C2E5F7;
  --on-field: #072D59;
  --on-field-2: #2F4E72;
  --paper: #FFFFFF;
  --paper-2: #EEF8FD;
  --surface: #FFFFFF;
  --ink: #072D59;
  --ink-2: #3B5677;
  --ink-3: #506A89;
  --accent: #FD6E88;
  --on-accent: #072D59;
  --mark: #C93558;
  --danger: #B3261E;
}
@media (prefers-color-scheme: dark) {
:root[data-look="seal-crimson"]:not([data-theme="light"]) {
  --paper: #03101F;
  --paper-2: #0A1C33;
  --surface: #0C2038;
  --ink: #EAF6FD;
  --ink-2: #B4C9DC;
  --ink-3: #8FA6BC;
  --mark: #E04A6E;
  --danger: #FF8A7A;
}
}
:root[data-look="seal-crimson"][data-theme="dark"] {
  --paper: #03101F;
  --paper-2: #0A1C33;
  --surface: #0C2038;
  --ink: #EAF6FD;
  --ink-2: #B4C9DC;
  --ink-3: #8FA6BC;
  --mark: #E04A6E;
  --danger: #FF8A7A;
}