/* Hallmark · genre: modern-minimal · macrostructure: workbench · nav: N5 · footer: Ft2 · theme: custom (green anchor, hue 165)
   pre-emit critique: P4 H5 E4 S5 R4 V4 · knobs: tour=alternating device/caption, cta=sticky-after-3rd-step
   enrichment: E1-style real app footage inside an owner-requested device frame (gate 47 waived by the owner) · polish: voice rings behind the device
   contrast: pass (40-41) · nav: N5 · footer: Ft2 · slop: pass (42-45) · honest: pass (46) · chrome: owner-requested device frame (47 waived) · tokens: pass (48) · responsive: pass (49) · mobile: pass (34, 49, 50-57) · icons: pass (30)
   Tokens live in tokens.css. Shared by the homepage, the Arabic homepage, the download pages and 404. */

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

html {
  overflow-x: clip;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-block-start: var(--space-3xl);
}
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  margin: 0;
  min-block-size: 100vh;
  overflow-x: clip;
  background: var(--color-paper);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: 400;
  line-height: var(--lh-body);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}
:lang(ar) body,
body:lang(ar) { line-height: var(--lh-arabic); }

img, picture, svg { display: block; max-inline-size: 100%; }
img { block-size: auto; }

h1, h2, h3 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 600;
  line-height: var(--lh-tight);
  text-wrap: balance;
  overflow-wrap: anywhere;
  min-inline-size: 0;
}
:lang(en) h1, :lang(en) h2, :lang(en) h3 { letter-spacing: -0.015em; }
:lang(ar) h1, :lang(ar) h2, :lang(ar) h3 { line-height: var(--lh-snug); }
p { margin: 0; text-wrap: pretty; }
ul { margin: 0; padding: 0; list-style: none; }

a { color: var(--color-accent); text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
a:hover { color: var(--color-accent-hover); }

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

.skip-link {
  position: fixed;
  inset-block-start: var(--space-xs);
  inset-inline-start: var(--space-xs);
  z-index: var(--z-sticky-nav);
  padding: var(--space-sm) var(--space-md);
  background: var(--color-ink);
  color: var(--color-paper);
  border-radius: var(--radius-sm);
  font-weight: 600;
  text-decoration: none;
  transform: translateY(-200%);
}
.skip-link:focus { transform: none; }

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

/* Buttons ------------------------------------------------------------ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
  min-block-size: var(--target);
  padding-inline: var(--space-lg);
  border: var(--rule-hair) solid transparent;
  border-radius: var(--radius-pill);
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}
.btn--primary {
  background: var(--color-accent);
  color: var(--color-accent-ink);
}
.btn--primary:hover { background: var(--color-accent-hover); color: var(--color-accent-ink); }
.btn--quiet {
  background: transparent;
  color: var(--color-ink);
  border-color: var(--color-neutral);
}
.btn--quiet:hover { background: var(--color-paper-2); color: var(--color-ink); }
.btn:active { background: var(--color-accent-hover); color: var(--color-accent-ink); border-color: transparent; }
.btn--quiet:active { background: var(--color-paper-3); color: var(--color-ink); border-color: var(--color-neutral); }
.btn:disabled,
.btn[aria-disabled="true"] {
  opacity: 0.55;
  cursor: not-allowed;
  pointer-events: none;
}
@media (prefers-reduced-motion: no-preference) {
  .btn { transition: background-color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out); }
}

/* Nav: floating pill (N5) ------------------------------------------- */
.nav-pill {
  position: fixed;
  inset-block-start: var(--space-md);
  inset-inline: 0;
  inline-size: fit-content;
  max-inline-size: calc(100% - 2 * var(--page-gutter));
  margin-inline: auto;
  z-index: var(--z-sticky-nav);
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-xs);
  padding-inline-start: var(--space-md);
  background: color-mix(in oklch, var(--color-paper) 80%, transparent);
  -webkit-backdrop-filter: blur(14px) saturate(120%);
  backdrop-filter: blur(14px) saturate(120%);
  border: var(--rule-hair) solid var(--color-rule);
  border-radius: var(--radius-pill);
  box-shadow: 0 8px 24px -12px var(--color-shadow);
}
.wordmark {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  min-block-size: var(--target);
  color: var(--color-ink);
  font-family: var(--font-display);
  font-size: var(--text-md);
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
}
.wordmark:hover { color: var(--color-ink); }
.wordmark img { inline-size: 1.75rem; block-size: 1.75rem; border-radius: var(--radius-sm); }
.nav-pill__links { display: none; align-items: center; gap: var(--space-xs); }
.nav-pill__links a,
.nav-pill__lang {
  display: inline-flex;
  align-items: center;
  min-block-size: var(--target);
  padding-inline: var(--space-sm);
  border-radius: var(--radius-pill);
  color: var(--color-muted);
  font-size: var(--text-sm);
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
}
.nav-pill__links a:hover,
.nav-pill__lang:hover { color: var(--color-ink); background: var(--color-paper-2); }
.nav-pill__links a:active,
.nav-pill__lang:active { color: var(--color-ink); background: var(--color-paper-3); }
.nav-pill .btn { min-block-size: var(--target); padding-inline: var(--space-md); font-size: var(--text-sm); }
.nav-pill__theme {
  display: none;
  place-items: center;
  inline-size: var(--target);
  block-size: var(--target);
  padding: 0;
  border: 0;
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--color-muted);
  cursor: pointer;
}
.nav-pill__theme svg { inline-size: 1.125rem; block-size: 1.125rem; }
.nav-pill__theme:hover { color: var(--color-ink); background: var(--color-paper-2); }
.nav-pill__theme:active { background: var(--color-paper-3); }
.nav-pill__theme:disabled { opacity: 0.55; cursor: not-allowed; }
.nav-pill__theme .icon-sun { display: none; }
.nav-pill__theme[data-next="light"] .icon-sun { display: block; }
.nav-pill__theme[data-next="light"] .icon-moon { display: none; }
@media (min-width: 40rem) {
  .nav-pill__links { display: flex; }
  .nav-pill__theme:not([hidden]) { display: grid; }
}

/* Hero --------------------------------------------------------------- */
.hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-xl);
  padding-block: var(--space-lg) var(--space-3xl);
  align-items: center;
}
.hero__copy { display: grid; gap: var(--space-lg); align-content: center; max-inline-size: 36rem; }
.hero h1 { font-size: var(--text-display); }
.lede {
  max-inline-size: var(--measure);
  color: var(--color-muted);
  font-size: var(--text-md);
}
.hero__cta { display: flex; flex-wrap: wrap; gap: var(--space-sm); }
@media (min-width: 56rem) {
  .hero {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
    padding-block: var(--space-lg) var(--space-3xl);
    gap: var(--space-2xl);
  }
}

/* Device mockup ------------------------------------------------------
   Owner-requested phone frame (Hallmark gate 47 waived by the owner).
   Everything scales from --dev-w; the frame is physical, so it uses
   left/right rather than logical sides and never mirrors in RTL. */
.device {
  --dev-w: 17.5rem;
  position: relative;
  flex: none;
  inline-size: var(--dev-w);
  block-size: calc(var(--dev-w) * 2.06);
  margin: 0;
}
.device__body {
  position: absolute;
  inset: 0;
  padding: calc(var(--dev-w) * 0.036);
  border-radius: calc(var(--dev-w) * 0.18);
  background: linear-gradient(140deg, var(--device-hi) 0%, var(--device-body) 24%, var(--device-lo) 56%, var(--device-body) 80%, var(--device-hi) 100%);
  box-shadow:
    inset 0 0 0 calc(var(--dev-w) * 0.004) var(--device-rim),
    inset 0 0 0 calc(var(--dev-w) * 0.016) var(--device-lo),
    0 calc(var(--dev-w) * 0.12) calc(var(--dev-w) * 0.22) calc(var(--dev-w) * -0.08) var(--device-shadow),
    0 calc(var(--dev-w) * 0.02) calc(var(--dev-w) * 0.05) var(--device-shadow-near);
}
.device__screen {
  position: relative;
  inline-size: 100%;
  block-size: 100%;
  overflow: hidden;
  isolation: isolate;
  border-radius: calc(var(--dev-w) * 0.146);
  background: var(--device-glass);
  box-shadow: 0 0 0 calc(var(--dev-w) * 0.012) var(--device-bezel);
}
.device__screen img,
.device__screen video {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  object-position: top center;
}
.device__island {
  position: absolute;
  z-index: 3;
  top: calc(var(--dev-w) * 0.03);
  left: 50%;
  inline-size: calc(var(--dev-w) * 0.3);
  block-size: calc(var(--dev-w) * 0.088);
  border-radius: var(--radius-pill);
  background: var(--device-island);
  transform: translateX(-50%);
}
.device__glare {
  position: absolute;
  inset: 0;
  z-index: 4;
  border-radius: inherit;
  background: linear-gradient(115deg, var(--device-glare) 0%, transparent 38%);
  pointer-events: none;
}
.device__key {
  position: absolute;
  inline-size: calc(var(--dev-w) * 0.014);
  border-radius: calc(var(--dev-w) * 0.01);
  background: linear-gradient(90deg, var(--device-lo), var(--device-hi));
}
.device__key--action { left: calc(var(--dev-w) * -0.011); top: 17%; block-size: 5%; }
.device__key--up { left: calc(var(--dev-w) * -0.011); top: 25%; block-size: 9%; }
.device__key--down { left: calc(var(--dev-w) * -0.011); top: 36%; block-size: 9%; }
.device__key--power { right: calc(var(--dev-w) * -0.011); top: 29%; block-size: 14%; }

/* Hero stage: device, voice rings, caption, controls */
.stage {
  display: grid;
  justify-items: center;
  justify-self: center;
  gap: var(--space-md);
  inline-size: 100%;
}
.stage .device { --dev-w: min(17rem, 72vw); }
.stage__device { position: relative; display: grid; place-items: center; isolation: isolate; }
.stage__ring {
  position: absolute;
  z-index: -1;
  top: 50%;
  left: 50%;
  aspect-ratio: 1;
  border-radius: 50%;
  border: var(--rule-hair) solid var(--color-rule);
  transform: translate(-50%, -50%);
}
.stage__ring--inner { inline-size: calc(var(--dev-w) * 1.45); background: radial-gradient(closest-side, var(--color-accent-soft), transparent); }
.stage__ring--outer { inline-size: calc(var(--dev-w) * 2); }
.stage__device .stage__ring { --dev-w: min(17rem, 72vw); }
@media (prefers-reduced-motion: no-preference) {
  .stage[data-scene="recording"] .stage__ring--inner { animation: voice-ring 2.4s var(--ease-out) infinite; }
}
@keyframes voice-ring {
  0%, 100% { transform: translate(-50%, -50%) scale(1); }
  50% { transform: translate(-50%, -50%) scale(1.04); }
}
.slide {
  position: absolute;
  inset: 0;
  margin: 0;
  opacity: 0;
}
.slide.is-active { opacity: 1; z-index: 1; }
@media (prefers-reduced-motion: no-preference) {
  .slide { transition: opacity 600ms var(--ease-out); }
}
.stage__caption {
  display: grid;
  gap: var(--space-3xs);
  justify-items: center;
  min-block-size: 3.5rem;
  max-inline-size: 20rem;
  text-align: center;
}
.stage__index { color: var(--color-neutral); font-size: var(--text-sm); font-weight: 600; font-variant-numeric: tabular-nums; }
.stage__title { font-family: var(--font-display); font-size: var(--text-md); font-weight: 600; line-height: var(--lh-snug); }
.stage__controls { display: flex; align-items: center; gap: var(--space-2xs); }
.dot {
  display: grid;
  place-items: center;
  inline-size: 2rem;
  block-size: 2rem;
  padding: 0;
  border: 0;
  border-radius: var(--radius-pill);
  background: none;
  cursor: pointer;
}
.dot::before {
  content: "";
  inline-size: 0.5rem;
  block-size: 0.5rem;
  border-radius: var(--radius-pill);
  background: var(--color-rule);
}
.dot:hover::before { background: var(--color-neutral); }
.dot:active::before { background: var(--color-muted); }
.dot[aria-current="true"]::before { inline-size: 1.25rem; background: var(--color-accent); }
.dot:disabled { cursor: not-allowed; opacity: 0.55; }
.stage__toggle {
  display: grid;
  place-items: center;
  inline-size: var(--target);
  block-size: var(--target);
  margin-inline-start: var(--space-xs);
  padding: 0;
  border: var(--rule-hair) solid var(--color-rule);
  border-radius: var(--radius-pill);
  background: var(--color-paper);
  color: var(--color-ink);
  cursor: pointer;
}
.stage__toggle:hover { background: var(--color-paper-2); }
.stage__toggle:active { background: var(--color-paper-3); }
.stage__toggle:disabled { opacity: 0.55; cursor: not-allowed; }
.stage__toggle svg { inline-size: 1rem; block-size: 1rem; }
.stage__toggle[hidden] { display: none; }
.stage__toggle .icon-play { display: none; }
.stage__toggle[aria-pressed="true"] .icon-play { display: block; }
.stage__toggle[aria-pressed="true"] .icon-pause { display: none; }

/* Tour (Workbench) --------------------------------------------------- */
.tour { padding-block: var(--space-2xl) 0; }
.section-head { display: grid; gap: var(--space-sm); max-inline-size: var(--measure); margin-block-end: var(--space-xl); }
.section-head h2 { font-size: var(--text-2xl); }
.section-head p { color: var(--color-muted); }
.steps { counter-reset: step; }
.step {
  counter-increment: step;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "text" "shot";
  gap: var(--space-lg);
  padding-block: var(--space-xl);
  border-block-start: var(--rule-hair) solid var(--color-rule);
  align-items: center;
}
.step__text { grid-area: text; display: grid; gap: var(--space-sm); max-inline-size: 34rem; }
.step__text::before {
  content: counter(step, decimal-leading-zero);
  color: var(--color-neutral);
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.step h3 { font-size: var(--text-xl); }
.step p { color: var(--color-muted); }
.facts { display: grid; gap: var(--space-2xs); margin-block-start: var(--space-xs); color: var(--color-ink); font-size: var(--text-sm); }
.facts li { display: flex; gap: var(--space-xs); align-items: baseline; }
.facts li::before {
  content: "";
  flex: none;
  inline-size: var(--space-xs);
  block-size: var(--rule-hair);
  background: var(--color-accent);
  transform: translateY(-0.3em);
}
:root { --step-dev-w: 15rem; }
.step__media { grid-area: shot; justify-self: center; margin: 0; }
.step__media .device { --dev-w: min(var(--step-dev-w), 68vw); }
@media (min-width: 48rem) {
  .step { grid-template-columns: var(--step-dev-w) minmax(0, 1fr); grid-template-areas: "shot text"; gap: var(--space-2xl); padding-block: var(--space-2xl); }
  .step:nth-child(even) { grid-template-columns: minmax(0, 1fr) var(--step-dev-w); grid-template-areas: "text shot"; }
}

/* Notes (languages, data) ------------------------------------------- */
.notes {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-xl);
  padding-block: var(--space-2xl);
  border-block-start: var(--rule-hair) solid var(--color-rule);
}
.note { display: grid; gap: var(--space-sm); align-content: start; max-inline-size: var(--measure); }
.note h2 { font-size: var(--text-lg); }
.note p { color: var(--color-muted); }
.note__links { display: flex; flex-wrap: wrap; gap: var(--space-xs) var(--space-lg); }
.note__links a { display: inline-flex; align-items: center; min-block-size: var(--target); font-weight: 600; }
@media (min-width: 56rem) {
  .notes { grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: var(--space-2xl); }
}

/* Download ----------------------------------------------------------- */
.download {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-xl);
  padding-block: var(--space-2xl) var(--space-3xl);
  border-block-start: var(--rule-hair) solid var(--color-rule);
  align-items: start;
}
.download__copy { display: grid; gap: var(--space-md); max-inline-size: var(--measure); }
.download__copy h2,
.download__copy h1 { font-size: var(--text-2xl); }
.download__copy p { color: var(--color-muted); }
.download__cta { display: flex; flex-wrap: wrap; gap: var(--space-sm); margin-block-start: var(--space-xs); }
.platforms { display: grid; gap: var(--space-lg); }
.platform { display: grid; gap: var(--space-sm); justify-items: start; }
.platform h3 { font-size: var(--text-md); }
.platform p { color: var(--color-muted); font-size: var(--text-sm); }
.qr-set { display: none; }
.qr {
  inline-size: 9rem;
  block-size: 9rem;
  border-radius: var(--radius-sm);
  background: var(--color-plate);
  box-shadow: 0 0 0 var(--rule-hair) var(--color-rule);
}
@media (min-width: 48rem) {
  .qr-set { display: grid; gap: var(--space-xs); justify-items: start; }
  .platforms { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-xl); }
}
@media (min-width: 56rem) {
  .download { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: var(--space-2xl); }
}

.page-intro { padding-block: var(--space-4xl) 0; }
.download--page { grid-template-columns: minmax(0, 1fr); border-block-start: 0; padding-block-start: var(--space-xl); gap: var(--space-2xl); }

/* Sticky download bar (after the third step) ------------------------- */
.sticky-cta {
  position: fixed;
  inset-block-end: var(--space-md);
  inset-inline: 0;
  inline-size: fit-content;
  max-inline-size: calc(100% - 2 * var(--page-gutter));
  margin-inline: auto;
  z-index: var(--z-sticky);
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-xs);
  padding-inline-start: var(--space-lg);
  background: var(--color-paper-2);
  border: var(--rule-hair) solid var(--color-rule);
  border-radius: var(--radius-pill);
  box-shadow: 0 12px 32px -16px var(--color-shadow);
  visibility: hidden;
  opacity: 0;
  transform: translateY(var(--space-md));
}
.sticky-cta.is-visible { visibility: visible; opacity: 1; transform: none; }
.sticky-cta p { color: var(--color-ink); font-size: var(--text-sm); font-weight: 600; }
.sticky-cta .btn { min-block-size: var(--target); }
@media (prefers-reduced-motion: no-preference) {
  .sticky-cta { transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out), visibility var(--dur-base); }
}
@media (max-width: 30rem) {
  .sticky-cta p { display: none; }
  .sticky-cta { padding-inline: var(--space-xs); inline-size: calc(100% - 2 * var(--page-gutter)); }
  .sticky-cta .btn { inline-size: 100%; }
}

/* Footer: inline rule, single line (Ft2) ----------------------------- */
.foot { margin-block-start: auto; border-block-start: var(--rule-hair) solid var(--color-rule); }
.foot__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-xs) var(--space-lg);
  padding-block: var(--space-md);
  color: var(--color-muted);
  font-size: var(--text-sm);
}
.foot__links, .foot__tools { display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--space-md); }
.foot a,
.foot button {
  display: inline-flex;
  align-items: center;
  min-block-size: var(--target);
  color: var(--color-muted);
  font: inherit;
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}
.foot a:hover,
.foot button:hover { color: var(--color-ink); text-decoration: underline; }
.foot a:active,
.foot button:active { color: var(--color-ink); }
.foot button:disabled { opacity: 0.55; cursor: not-allowed; }
.foot__credit { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 0 var(--space-xs); }
.theme-toggle[hidden] { display: none; }

/* 404 ---------------------------------------------------------------- */
.lost { display: grid; gap: var(--space-md); padding-block: var(--space-4xl) var(--space-3xl); max-inline-size: 32rem; }
.lost img { inline-size: 4.5rem; block-size: 4.5rem; border-radius: var(--radius-md); }
.lost h1 { font-size: var(--text-2xl); }
.lost p { color: var(--color-muted); }
.lost nav { display: flex; flex-wrap: wrap; gap: 0 var(--space-lg); }
.lost nav a { display: inline-flex; align-items: center; min-block-size: var(--target); font-weight: 600; }

main:focus { outline: none; }

body.page { display: flex; flex-direction: column; }
body.page > main { flex: 1 0 auto; }
.hero-main { padding-block-start: var(--space-3xl); }