/* Janna 2 sets the Arabic blocks (licensed). Latin and digits fall through to IBM Plex Sans. */
@font-face { font-family: "Janna"; font-weight: 100; font-style: normal; font-display: swap; src: url(/fonts/Janna2-Thin.woff2) format("woff2"); unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF; }
@font-face { font-family: "Janna"; font-weight: 300; font-style: normal; font-display: swap; src: url(/fonts/Janna2-Light.woff2) format("woff2"); unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF; }
@font-face { font-family: "Janna"; font-weight: 400; font-style: normal; font-display: swap; src: url(/fonts/Janna2-Regular.woff2) format("woff2"); unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF; }
@font-face { font-family: "Janna"; font-weight: 500; font-style: normal; font-display: swap; src: url(/fonts/Janna2-Medium.woff2) format("woff2"); unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF; }
@font-face { font-family: "Janna"; font-weight: 700; font-style: normal; font-display: swap; src: url(/fonts/Janna2-Bold.woff2) format("woff2"); unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF; }
@font-face { font-family: "Janna"; font-weight: 900; font-style: normal; font-display: swap; src: url(/fonts/Janna2-Black.woff2) format("woff2"); unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF; }

/* Rethink website stylesheet. Every value comes from the Rethink design system tokens. */

:root {
  /* colour */
  --ink: #0C002B;
  --midnight: #350A5E;
  --dusk: #552B81;
  --lumen: #7019BD;
  --mist: #F1EDF5;
  --paper: #FFFFFF;
  --ember: #e35336;
  --sec: #806f9b;
  --halo: #614BF9;
  --line: rgba(128, 111, 155, .20);

  /* type scale, root 2, base 17px */
  --step--1: 12px;
  --step-0: 17px;
  --step-1: 24px;
  --step-2: 34px;
  --step-3: 48px;
  --step-4: 68px;
  --step-5: 96px;

  /* space scale, root 2, unit 8px */
  --s0: 8px;
  --s1: 11px;
  --s2: 16px;
  --s3: 23px;
  --s4: 32px;
  --s5: 45px;
  --s6: 64px;
  --s7: 91px;
  --s8: 128px;

  /* leading, Arabic lift of 0.2 on every value */
  --lead-body: 1.8;
  --lead-mid: 1.5;
  --lead-display: 1.25;

  --radius: 6px;
  --tap: 46px;

  --font: "Janna", "IBM Plex Sans", "IBM Plex Sans Arabic", system-ui, sans-serif;
  --font-latin: "IBM Plex Sans", "IBM Plex Sans Arabic", system-ui, sans-serif;

  /* grounds */
  --rise: radial-gradient(120% 105% at 50% 118%, #4E1487 0%, #3A0E66 30%, #1A0540 60%, #0C002B 88%);
  --edge-tr: radial-gradient(115% 90% at 94% -4%, #2E0B52 0%, #1B0538 40%, #0C002B 78%);
  --edge-tl: radial-gradient(115% 90% at 6% -4%, #2E0B52 0%, #1B0538 40%, #0C002B 78%);
  --edge-br: radial-gradient(115% 90% at 94% 104%, #2E0B52 0%, #1B0538 40%, #0C002B 78%);

  /* grid: mobile */
  --margin: var(--s2);
  --gutter: var(--s1);
  --section: var(--s5);
  --max: 420px;

  /* glass, dark recipe */
  --gl-bg: radial-gradient(farthest-side at 91% 79%, rgba(227, 83, 54, 0.024) 0%, rgba(227, 83, 54, 0) 72%), radial-gradient(farthest-side at 9% 21%, rgba(112, 25, 189, 0.030) 0%, rgba(112, 25, 189, 0) 72%), linear-gradient(135deg, rgba(255, 255, 255, 0.060), rgba(255, 255, 255, 0.036));
  --gl-rim: rgba(255, 255, 255, 0.050);
  --gl-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.057), inset 1px 0 0 rgba(255, 255, 255, 0.030), 0 11.4px 49.4px rgba(12, 0, 43, 0.253);
  --gl-blur: 20px;
}

@media (min-width: 834px) {
  :root { --margin: var(--s3); --gutter: var(--s2); --section: var(--s6); --max: 800px; }
}
@media (min-width: 1280px) {
  :root { --margin: var(--s5); --section: var(--s7); --max: 1200px; }
}
@media (min-width: 1680px) {
  :root { --max: 1480px; }
}

/* glass, light recipe */
[data-ground="light"] {
  --gl-bg: radial-gradient(farthest-side at 85% 85%, rgba(227, 83, 54, 0.060) 0%, rgba(227, 83, 54, 0) 72%), radial-gradient(farthest-side at 15% 15%, rgba(112, 25, 189, 0.048) 0%, rgba(112, 25, 189, 0) 72%), linear-gradient(135deg, rgba(255, 255, 255, 0.550), rgba(255, 255, 255, 0.330));
  --gl-rim: rgba(255, 255, 255, 0.810);
  --gl-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.931), inset 1px 0 0 rgba(255, 255, 255, 0.486), 0 9.0px 35.9px rgba(112, 25, 189, 0.106);
  --gl-blur: 30px;
}

/* base */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--ink);
  color: var(--mist);
  font: 300 var(--step-0) / var(--lead-body) var(--font);
  -webkit-font-smoothing: antialiased;
}
img, svg, video, iframe { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4, p, ul, ol, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
button, input, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 2px solid var(--halo); outline-offset: 3px; }
::selection { background: var(--lumen); color: var(--mist); }
.latin { font-family: var(--font-latin); direction: ltr; unicode-bidi: isolate; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* grounds */
.g-paper { background: var(--paper); color: var(--ink); }
.g-mist { background: var(--mist); color: var(--ink); }
.g-rise { background: var(--rise); color: var(--mist); }
.g-edge { background: var(--edge-tr); color: var(--mist); }
.g-edge-l { background: var(--edge-tl); color: var(--mist); }

/* layout */
.wrap { width: min(100% - 2 * var(--margin), var(--max)); margin-inline: auto; }
.sec { padding-block: var(--section); }
.sec-tight { padding-block: var(--s5); }
.stack { display: flex; flex-direction: column; gap: var(--s4); }
.split { display: grid; gap: var(--s5); align-items: center; }
.cols-2 { display: grid; gap: var(--gutter); }
.cols-3 { display: grid; gap: var(--gutter); }
@media (min-width: 834px) {
  .split { grid-template-columns: 7fr 5fr; }
  .split-even { grid-template-columns: 1fr 1fr; }
  .cols-2 { grid-template-columns: 1fr 1fr; }
  .cols-3 { grid-template-columns: 1fr 1fr 1fr; }
}
.narrow { max-width: 720px; margin-inline: auto; }
.center { text-align: center; align-items: center; }
.center .sub, .center .body { margin-inline: auto; }

/* type roles */
.eyebrow { font-size: var(--step--1); font-weight: 500; line-height: var(--lead-mid); color: var(--ember); }
.title { font-weight: 200; line-height: var(--lead-display); text-wrap: balance; letter-spacing: 0; }
/* The bold run is Lumen on light grounds. On dark grounds Lumen sinks into Ink, so the run turns Mist and carries the lit-word halo instead. */
.title b { display: block; font-weight: 600; color: var(--mist); text-shadow: 0 0 .24em rgba(97, 75, 249, 1), 0 0 .74em rgba(97, 75, 249, .63); }
[data-ground="light"] .title b { color: var(--lumen); text-shadow: none; }
.title em { display: block; font-style: normal; font-weight: 200; }
.title--xl { font-size: clamp(40px, 7vw, var(--step-4)); }
.title--lg { font-size: clamp(var(--step-2), 5vw, var(--step-3)); }
.title--md { font-size: clamp(var(--step-1), 3.5vw, var(--step-2)); }
.title--sm { font-size: var(--step-1); font-weight: 400; line-height: var(--lead-mid); }
.sub { font-size: var(--step-1); font-weight: 300; line-height: var(--lead-mid); color: var(--sec); max-width: 38ch; text-wrap: balance; }
.body { font-size: var(--step-0); font-weight: 300; line-height: var(--lead-body); max-width: 52ch; text-wrap: pretty; }
.body p + p { margin-top: var(--s2); }
.statement { font-size: clamp(var(--step-0), 2.4vw, var(--step-1)); font-weight: 300; line-height: var(--lead-mid); }
.head { display: flex; flex-direction: column; gap: var(--s1); align-items: flex-start; }
.head.center { align-items: center; }
.stack-lg { gap: var(--s6); }
.small { font-size: var(--step--1); line-height: var(--lead-body); }
.muted { color: var(--sec); }
.lumen { color: var(--lumen); }

/* buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s2);
  min-height: var(--tap); padding: var(--s1) var(--s3);
  border-radius: var(--radius); border: 1px solid transparent;
  font-size: var(--step-0); font-weight: 500; line-height: 1.2; text-align: center; cursor: pointer;
  transition: background-color 180ms, border-color 180ms, color 180ms;
}
.btn:disabled { opacity: .38; cursor: default; }
.btn-primary { background: var(--lumen); color: var(--mist); }
.btn-primary:hover:not(:disabled) { background: linear-gradient(rgba(255, 255, 255, .08), rgba(255, 255, 255, .08)), var(--lumen); }
.btn-secondary { background: transparent; border-color: var(--sec); color: var(--mist); }
[data-ground="light"] .btn-secondary { color: var(--ink); }
.btn-secondary:hover:not(:disabled) { border-color: var(--mist); }
[data-ground="light"] .btn-secondary:hover:not(:disabled) { border-color: var(--ink); }
.btn-quiet { background: transparent; padding-inline: 0; color: var(--mist); }
[data-ground="light"] .btn-quiet { color: var(--ink); }
.btn-quiet:hover:not(:disabled) { background: rgba(241, 237, 245, .06); }
[data-ground="light"] .btn-quiet:hover:not(:disabled) { background: rgba(12, 0, 43, .05); }
.btn-quiet .stems { width: 20px; height: auto; color: var(--ember); flex: none; }
.btn .ico { width: 18px; height: 18px; flex: none; }
.btn-block { width: 100%; }
.actions { display: flex; flex-wrap: wrap; gap: var(--s2); align-items: center; }
.stores { display: flex; flex-wrap: wrap; gap: var(--s2); }
.stores .btn { font-family: var(--font-latin); direction: ltr; font-weight: 500; }

/* glass card */
.card {
  display: flex; flex-direction: column; gap: var(--s2); padding: var(--s4);
  border: 1px solid var(--gl-rim); border-radius: calc(var(--radius) * 2) 0 0 0;
  background: var(--gl-bg); box-shadow: var(--gl-shadow);
  backdrop-filter: blur(var(--gl-blur)); -webkit-backdrop-filter: blur(var(--gl-blur));
}
.card > .eyebrow + .title--sm { margin-top: calc(var(--s1) - var(--s2)); }
.card .body { max-width: none; }

/* the mark */
.mark { display: block; height: 32px; width: auto; }
.mark--dark { filter: drop-shadow(0 0 9px rgba(97, 75, 249, .73)) drop-shadow(0 0 13px rgba(97, 75, 249, 1)); }
.mark--footer { height: 40px; }
.monogram { display: block; height: 28px; width: auto; }
.monogram--dark { filter: drop-shadow(0 0 8px rgba(97, 75, 249, .73)) drop-shadow(0 0 12px rgba(97, 75, 249, 1)); }

/* navigation */
.nav {
  position: sticky; top: 0; z-index: 40; color: var(--mist);
  background: rgba(12, 0, 43, .86); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(128, 111, 155, .25);
}
.nav .wrap { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); height: 72px; }
.nav-links { display: none; gap: var(--s3); font-size: 15px; font-weight: 400; }
.nav-links a { position: relative; padding: var(--s0) 0; white-space: nowrap; }
.nav-links a::after { content: ""; position: absolute; inset-inline: 0; bottom: 0; height: 1px; background: var(--mist); transform: scaleX(0); transition: transform 180ms; }
.nav-links a:hover::after { transform: scaleX(1); }
.nav-end { display: flex; align-items: center; gap: var(--s2); }
.nav .lang { font-size: var(--step--1); font-weight: 500; color: var(--sec); padding: var(--s0) var(--s1); border: 1px solid transparent; border-radius: var(--radius); transition: color 180ms, border-color 180ms; }
.nav .lang:hover { color: var(--mist); border-color: var(--sec); }
.nav-panel .lang { font-size: var(--step-0); padding: 0; }
.nav-cta { display: none; }
.nav-toggle { display: inline-grid; place-items: center; width: var(--tap); height: var(--tap); border: 1px solid var(--sec); border-radius: var(--radius); background: transparent; color: var(--mist); }
.nav-toggle svg { width: 22px; height: 22px; }
@media (min-width: 1280px) {
  .nav-links, .nav-cta { display: inline-flex; }
  .nav-toggle { display: none; }
}
.nav-panel { position: fixed; inset: 0; z-index: 60; display: none; flex-direction: column; padding: var(--s3) var(--margin) var(--s6); overflow: auto; }
.nav-panel.open { display: flex; }
.nav-panel-top { display: flex; align-items: center; justify-content: space-between; height: 48px; }
.nav-panel ul { display: flex; flex-direction: column; gap: var(--s2); margin-top: var(--s6); font-size: var(--step-1); font-weight: 300; }
.nav-panel .actions { margin-top: var(--s5); }

/* hero */
.hero { position: relative; overflow: hidden; padding-block: var(--s6) var(--s7); }
.hero .head { gap: var(--s2); }
.hero .sub { color: var(--mist); font-size: clamp(var(--step-0), 2vw, var(--step-1)); max-width: 44ch; }
.hero .actions { margin-top: var(--s2); }
.hero .stores { margin-top: var(--s2); }
.hero .tag { display: block; font-size: .55em; font-weight: 500; margin-top: .5em; }
.hero .tag .free { color: var(--ember); font-weight: 600; white-space: nowrap; text-shadow: 0 0 .4em rgba(227, 83, 54, .35); }
.video { aspect-ratio: 16 / 9; overflow: hidden; border-radius: calc(var(--radius) * 2) 0 0 0; border: 1px solid var(--gl-rim); box-shadow: var(--gl-shadow); background: var(--ink); }
.video iframe { width: 100%; height: 100%; border: 0; }

/* access notice (existing buyers) */
.notice { display: grid; gap: var(--s4); }
@media (min-width: 834px) { .notice { grid-template-columns: 5fr 7fr; align-items: center; } }
.notice .card .body { max-width: 52ch; }

/* testimonials: natural proportions at one width, never upscaled, two rows moving in opposite directions */
.marquee { display: flex; flex-direction: column; gap: var(--s2); overflow: hidden; direction: ltr; -webkit-mask-image: linear-gradient(to right, transparent, #000 10%, #000 90%, transparent); mask-image: linear-gradient(to right, transparent, #000 10%, #000 90%, transparent); }
.marquee-track { display: flex; align-items: center; gap: var(--s2); width: max-content; animation: marquee 80s linear infinite; }
.marquee-track.reverse { animation-direction: reverse; animation-duration: 95s; }
.marquee-track:hover { animation-play-state: paused; }
.marquee img { width: 260px; height: auto; border-radius: var(--radius); border: 1px solid var(--line); background: var(--paper); }
@media (max-width: 833px) { .marquee img { width: 200px; } }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .marquee-track { animation: none; } }

/* feature cards */
.features { display: grid; gap: var(--gutter); }
@media (min-width: 834px) { .features { grid-template-columns: 1fr 1fr; } }
.feature .icon { width: 96px; height: 80px; margin-bottom: var(--s1); }
.feature .icon img { width: 100%; height: 100%; }
.ticks { display: flex; flex-direction: column; gap: var(--s1); }
.ticks li { position: relative; padding-inline-start: var(--s3); font-weight: 300; line-height: var(--lead-body); }
.ticks li::before { content: ""; position: absolute; inset-inline-start: 0; top: .9em; width: 10px; height: 2px; background: var(--lumen); }

/* image with copy */
.figure { overflow: hidden; border-radius: calc(var(--radius) * 2) 0 0 0; border: 1px solid var(--gl-rim); box-shadow: var(--gl-shadow); background: var(--mist); }
.figure img { width: 100%; height: 100%; object-fit: cover; }
.figure--tall { aspect-ratio: 4 / 5; }
.figure--wide { aspect-ratio: 4 / 3; }
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gutter); margin-top: var(--gutter); }
.stat { padding: var(--s2); gap: 4px; }
.stat b { font-size: var(--step-1); font-weight: 400; line-height: 1.2; }
.stat span { font-size: var(--step--1); color: var(--sec); }

/* accordion */
.acc { border-bottom: 1px solid var(--line); }
.acc:first-child { border-top: 1px solid var(--line); }
.acc summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: flex-start; gap: var(--s3); padding: var(--s3) 0; font-size: clamp(var(--step-0), 2vw, var(--step-1)); font-weight: 400; line-height: var(--lead-mid); }
.acc summary::-webkit-details-marker { display: none; }
.acc summary::after { content: "+"; color: var(--ember); font-weight: 200; font-size: var(--step-1); line-height: 1.2; flex: none; width: var(--s3); text-align: center; }
.acc[open] summary::after { content: "−"; }
.acc .acc-body { padding-bottom: var(--s3); max-width: 62ch; }

/* pricing */
.period { color: var(--sec); margin-top: calc(var(--s2) * -1); }
.included { counter-reset: n; }
.included li { counter-increment: n; display: flex; gap: var(--s2); padding: var(--s2) 0; border-bottom: 1px solid var(--line); font-weight: 300; }
.included li::before { content: "0" counter(n); font-family: var(--font-latin); font-size: var(--step--1); color: var(--sec); padding-top: 7px; flex: none; }

/* image statement */
.image-band { position: relative; isolation: isolate; color: var(--mist); background: var(--ink); min-height: 560px; display: flex; align-items: center; }
.image-band .bgwrap { position: absolute; inset: 0; z-index: -2; overflow: hidden; }
.image-band .bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: left center; }
.image-band::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(270deg, rgba(12, 0, 43, .82) 0%, rgba(12, 0, 43, .45) 50%, rgba(12, 0, 43, 0) 100%); }
.image-band .copy { max-width: 48ch; margin-inline-start: 0; }
@media (min-width: 834px) { .image-band .copy { width: 55%; } }

/* tool card */
.card.tool { display: grid; gap: var(--s3); }
@media (min-width: 834px) { .card.tool { grid-template-columns: 220px 1fr; align-items: start; } }
.tool-logo-box { display: grid; place-items: center; min-height: 150px; padding: var(--s3); background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); }
.tool .logo { height: 40px; width: auto; }
.tool-body { display: flex; flex-direction: column; gap: var(--s2); align-items: flex-start; }
.tool-body .body { max-width: none; }

/* forms */
.form { display: flex; flex-direction: column; gap: var(--s3); }
.field { display: flex; flex-direction: column; gap: 6px; }
.field label { font-size: var(--step--1); font-weight: 500; color: var(--sec); }
.input { height: var(--tap); width: 100%; padding: 0 var(--s2); border-radius: var(--radius); border: 1px solid var(--sec); background: transparent; color: var(--mist); font-size: var(--step-0); transition: border-color 180ms; }
[data-ground="light"] .input { color: var(--ink); }
.input::placeholder { color: var(--sec); opacity: 1; }
.input:focus { border-color: var(--mist); outline: 2px solid var(--halo); outline-offset: 2px; }
[data-ground="light"] .input:focus { border-color: var(--ink); }
textarea.input { height: auto; min-height: 160px; padding-block: var(--s1); resize: vertical; }
/* Browser autofill paints its own light field, so pin it to the ground the form sits on. */
.input:-webkit-autofill, .input:-webkit-autofill:hover, .input:-webkit-autofill:focus { -webkit-text-fill-color: var(--mist); caret-color: var(--mist); -webkit-box-shadow: 0 0 0 1000px var(--ink) inset; box-shadow: 0 0 0 1000px var(--ink) inset; transition: background-color 9999s ease-in-out 0s; }
[data-ground="light"] .input:-webkit-autofill, [data-ground="light"] .input:-webkit-autofill:hover, [data-ground="light"] .input:-webkit-autofill:focus { -webkit-text-fill-color: var(--ink); caret-color: var(--ink); -webkit-box-shadow: 0 0 0 1000px var(--paper) inset; box-shadow: 0 0 0 1000px var(--paper) inset; }
.input.ltr { direction: ltr; text-align: left; }
.form-note { font-size: var(--step--1); color: var(--sec); line-height: var(--lead-body); }
.form-note a { text-decoration: underline; text-underline-offset: 3px; }
.form-error { display: none; font-size: var(--step--1); color: var(--ember); }
.form-error.show, .form-error[style*="block"] { display: block; }
.form-row { display: flex; flex-direction: column; gap: var(--s2); }
@media (min-width: 834px) { .form-row { flex-direction: row; align-items: flex-end; } .form-row .field { flex: 1; } }

/* result pages */
.result { max-width: 560px; margin-inline: auto; text-align: center; align-items: center; }
.result .glyph { width: 64px; height: 64px; color: var(--lumen); margin-bottom: var(--s2); }
.download { max-width: 560px; margin-inline: auto; align-items: center; text-align: center; }
.download .glyph { width: 72px; height: 72px; color: var(--lumen); }

/* reading pages */
.prose { max-width: 62ch; font-weight: 300; }
[dir="rtl"] .prose { max-width: 56ch; }
.prose h2 { font-size: var(--step-1); font-weight: 400; line-height: var(--lead-mid); margin: var(--s5) 0 var(--s2); }
.prose h3 { font-size: var(--step-0); font-weight: 500; margin: var(--s4) 0 var(--s1); }
.prose p { margin-bottom: var(--s2); }
.prose ul { list-style: disc; padding-inline-start: var(--s4); margin-bottom: var(--s2); }
.prose li { margin-bottom: var(--s0); }
.prose a { text-decoration: underline; text-underline-offset: 3px; }
.prose strong { font-weight: 500; }

/* footer */
.footer { color: var(--mist); }
.footer-grid { display: grid; gap: var(--s5); padding-block: var(--s6); }
@media (min-width: 834px) { .footer-grid { grid-template-columns: 1.6fr 1fr 1fr 1.2fr; } }
.footer h4 { font-size: var(--step--1); font-weight: 500; color: var(--sec); margin-bottom: var(--s2); }
.footer-grid ul { display: flex; flex-direction: column; gap: var(--s1); font-weight: 300; }
.footer-grid ul a:hover { text-decoration: underline; text-underline-offset: 3px; }
.social { display: flex; gap: var(--s1); margin-top: var(--s3); }
.social a { width: var(--tap); height: var(--tap); display: grid; place-items: center; border: 1px solid var(--sec); border-radius: var(--radius); transition: border-color 180ms; }
.social a:hover { border-color: var(--mist); }
.social img { width: 24px; height: 24px; }
.footer .stores { flex-direction: column; align-items: stretch; }
.legal { padding-block: var(--s4); border-top: 1px solid rgba(128, 111, 155, .3); display: flex; flex-direction: column; gap: var(--s2); }
.legal .disclosure { font-size: var(--step--1); line-height: var(--lead-body); max-width: 90ch; }
.legal .copyright { font-size: var(--step--1); color: var(--sec); }

/* 404 */
.big-number { font-family: var(--font-latin); font-size: clamp(var(--step-5), 20vw, 136px); font-weight: 200; line-height: 1; color: var(--lumen); letter-spacing: -.04em; }

/* English pages: Latin face, Latin leading, tracked uppercase eyebrows, and the brand image mirrored so the quiet field meets the copy. */
html[lang="en"] { --font: var(--font-latin); --lead-body: 1.6; --lead-mid: 1.3; --lead-display: 1.05; }
html[lang="en"] .eyebrow { letter-spacing: .18em; text-transform: uppercase; }
html[lang="en"] .title { letter-spacing: -.02em; }
html[lang="en"] .body, html[lang="en"] .prose { max-width: 62ch; }
html[lang="en"] .btn { letter-spacing: .02em; }
html[lang="en"] .image-band .bgwrap { transform: scaleX(-1); }
html[lang="en"] .image-band::before { background: linear-gradient(90deg, rgba(12, 0, 43, .82) 0%, rgba(12, 0, 43, .45) 50%, rgba(12, 0, 43, 0) 100%); }

/* reading progress line */
.progress { position: fixed; top: 0; inset-inline: 0; height: 2px; background: var(--ember); transform: scaleX(0); transform-origin: left; z-index: 70; pointer-events: none; }
[dir="rtl"] .progress { transform-origin: right; }

/* motion: arrival in the hero, reveal on scroll, ambient light, floating icons, a slow drift on brand images */
@media (prefers-reduced-motion: no-preference) {
  .js .pre { opacity: 0; transform: translateY(24px); transition: opacity .9s cubic-bezier(.2, .7, .2, 1), transform 1s cubic-bezier(.2, .7, .2, 1); }
  .js .pre.in { opacity: 1; transform: none; }
  .hero .head > * { animation: arrive 1.1s cubic-bezier(.2, .7, .2, 1) both; }
  .hero .head > :nth-child(2) { animation-delay: .1s; }
  .hero .head > :nth-child(3) { animation-delay: .2s; }
  .hero .head > :nth-child(4) { animation-delay: .3s; }
  .hero .head > :nth-child(5) { animation-delay: .4s; }
  .hero .video { animation: fadein 1.4s .5s both; }
  .hero::before { content: ""; position: absolute; inset: -30% -20%; z-index: 0; pointer-events: none; background: radial-gradient(35% 45% at 72% 70%, rgba(97, 75, 249, .28), rgba(97, 75, 249, 0) 70%); animation: drift 16s ease-in-out infinite alternate; }
  .hero .wrap { position: relative; z-index: 1; }
  .feature .icon img { animation: float 6s ease-in-out infinite; }
  .features > :nth-child(2) .icon img { animation-delay: -1.5s; }
  .features > :nth-child(3) .icon img { animation-delay: -3s; }
  .features > :nth-child(4) .icon img { animation-delay: -4.5s; }
  .image-band .bg { animation: kenburns 26s ease-in-out infinite alternate; }
  .acc[open] .acc-body { animation: fadeup .4s cubic-bezier(.2, .7, .2, 1) both; }
}
@keyframes arrive { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: none; } }
@keyframes fadein { from { opacity: 0; } to { opacity: 1; } }
@keyframes fadeup { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
@keyframes drift { from { transform: translate(0, 0); } to { transform: translate(-8%, 6%); } }
@keyframes kenburns { from { transform: scale(1); } to { transform: scale(1.07); } }

/* app screenshots */
.phones { display: grid; grid-auto-flow: column; grid-auto-columns: 68%; gap: var(--s2); overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: var(--s2); scrollbar-width: none; }
.phones::-webkit-scrollbar { display: none; }
@media (min-width: 834px) { .phones { grid-auto-flow: row; grid-template-columns: repeat(4, 1fr); overflow: visible; padding-bottom: 0; } }
.phone { scroll-snap-align: start; display: flex; flex-direction: column; gap: var(--s1); }
.phone .screen { border-radius: calc(var(--radius) * 3); overflow: hidden; border: 1px solid var(--line); box-shadow: 0 11.4px 49.4px rgba(12, 0, 43, .25); background: var(--ink); }
.phone img { width: 100%; height: auto; display: block; }
.phone figcaption { font-size: var(--step--1); font-weight: 500; color: var(--sec); }
.app-grid { display: grid; gap: var(--s5); align-items: start; }
@media (min-width: 834px) { .app-grid { grid-template-columns: 5fr 7fr; } }