/* =========================================================
   FLYP - marketing site

   Structure follows the WhatsApp download site: flat tinted
   section bands, big rounded photo cards, white cards at 25px,
   pill buttons, one dark footer. No gradients, no glow.

   One accent: #1e56d6, the brand purple carried from the app.
   Radius: containers 25px, media 24px, inner tiles 14px,
   anything interactive is a full pill.
   ========================================================= */

:root {
  --accent: #1e56d6;
  --accent-press: #1745ae;
  --accent-ink: #143a94;

  --bg: #ffffff;
  --tint-brand: #eaf1fd;
  --tint-warm: #fcf5eb;
  --card: #ffffff;
  --line: #e8e6ef;

  --ink: #16161c;
  --ink-2: #5a5a66;
  --ink-3: #8a8a95;

  --foot: #101018;
  --foot-ink: #f2f1f6;
  --foot-ink-2: #9c9baa;

  color-scheme: light;

  --r-card: 25px;
  --r-media: 24px;
  --r-tile: 14px;
  --wrap: 1160px;
}

/* The site commits to one light look, matching the reference it was designed
   against. Dark mode was removed rather than left as a second, less considered
   palette; restore it by adding a prefers-color-scheme block that overrides
   the tokens above. */

* { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: Tajawal, Outfit, system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
html[lang="en"] body { font-family: Outfit, system-ui, -apple-system, "Segoe UI", sans-serif; }

img { max-width: 100%; display: block; }
/* A language block is hidden with the hidden attribute, and grid display
   would otherwise win over the browser default. */
[hidden] { display: none !important; }
a { color: inherit; text-decoration: none; }

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

.skip {
  position: absolute; inset-inline-start: -9999px; top: 0; z-index: 100;
  background: var(--accent); color: #fff; padding: 10px 16px;
}
.skip:focus { inset-inline-start: 12px; top: 12px; border-radius: 0 0 12px 12px; }

:where(a, button):focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 10px; }

/* ---------------- Navigation ---------------- */
.nav {
  position: sticky; top: 0; z-index: 50; height: 70px;
  background: var(--bg);
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s ease;
}
.nav.stuck { border-bottom-color: var(--line); }
.nav-in { height: 100%; display: flex; align-items: center; gap: 26px; }

.brand { display: inline-flex; align-items: center; gap: 10px; font-size: 19px; font-weight: 700; }
.brand img { border-radius: 10px; }

.nav-links { display: flex; gap: 26px; font-size: 15px; color: var(--ink-2); }
.nav-links a { transition: color 0.18s ease; white-space: nowrap; }
.nav-links a:hover, .nav-links a.here { color: var(--ink); }

.nav-right { margin-inline-start: auto; display: flex; align-items: center; gap: 12px; }

.lang { display: inline-flex; background: var(--tint-brand); border-radius: 999px; padding: 3px; }
.lang button {
  border: 0; background: none; cursor: pointer;
  font: 600 12.5px/1 Outfit, system-ui, sans-serif;
  color: var(--ink-2); padding: 8px 12px; border-radius: 999px;
  transition: background 0.18s ease, color 0.18s ease;
}
.lang button:hover { color: var(--ink); }
.lang button.on { background: var(--accent); color: #fff; }

/* ---------------- Buttons ---------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  background: var(--accent); color: #fff;
  padding: 16px 28px; border-radius: 50px;
  font-weight: 600; font-size: 16px; white-space: nowrap;
  transition: background 0.18s ease, transform 0.14s ease;
}
.btn:hover { background: var(--accent-press); }
.btn:active { transform: translateY(1px) scale(0.99); }
.btn .ico { width: 19px; height: 19px; }
.btn-sm { padding: 11px 20px; font-size: 14.5px; }
.btn-ghost { background: transparent; color: var(--ink); border: 1.5px solid var(--line); }
.btn-ghost:hover { background: var(--tint-brand); border-color: transparent; }
.btn.is-soon {
  background: transparent; color: var(--ink-3);
  border: 1.5px dashed var(--line); cursor: default;
}
.btn.is-soon:hover { background: transparent; }

/* ---------------- Type ---------------- */
h1 {
  margin: 0; font-weight: 600;
  font-size: clamp(30px, 5.4vw, 58px);
  line-height: 1.06; letter-spacing: -0.6px; text-wrap: balance;
}
.h2 {
  margin: 0 0 14px; font-weight: 600;
  font-size: clamp(27px, 3.6vw, 42px);
  line-height: 1.1; letter-spacing: -0.5px; text-wrap: balance;
}
.lede { margin: 16px 0 0; font-size: 18px; color: var(--ink-2); max-width: 48ch; text-wrap: pretty; }
.lede.sm { font-size: 16.5px; }
.fineprint { margin: 16px 0 0; font-size: 13.5px; color: var(--ink-3); }
.fineprint a { text-decoration: underline; text-underline-offset: 3px; }

/* ---------------- Bands ---------------- */
.band { padding: clamp(46px, 6.5vw, 84px) 0; }
.band-warm { background: var(--tint-warm); }
.band-brand { background: var(--tint-brand); }

/* ---------------- Hero ---------------- */
.hero { background: var(--tint-warm); padding: 22px 0 clamp(40px, 5vw, 64px); }
.hero-card {
  position: relative; overflow: hidden;
  border-radius: var(--r-media);
  min-height: clamp(400px, 52vw, 560px);
  display: flex; align-items: flex-end;
  background: #1a1420;
}
.hero-card > img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: 62% 28%;
}
.hero-card::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(100deg, rgba(10, 6, 20, 0.88) 0%, rgba(10, 6, 20, 0.62) 44%, rgba(10, 6, 20, 0.1) 78%);
}
[dir="rtl"] .hero-card::after {
  background: linear-gradient(260deg, rgba(10, 6, 20, 0.88) 0%, rgba(10, 6, 20, 0.62) 44%, rgba(10, 6, 20, 0.1) 78%);
}
.hero-copy { position: relative; z-index: 1; color: #fff; padding: clamp(28px, 4vw, 56px); max-width: 620px; }
.hero-copy h1 { color: #fff; }
.hero-copy .lede { color: rgba(255, 255, 255, 0.9); max-width: 40ch; }
.hero-copy .btn { margin-top: 26px; }
.hero-note { margin: 14px 0 0; font-size: 13.5px; color: var(--ink-3); text-align: center; }
.hero-note a { text-decoration: underline; text-underline-offset: 3px; }

/* ---------------- Platform cards ---------------- */
.dl-head { text-align: center; max-width: 640px; margin: 0 auto 34px; }
.dl-head .lede { margin-inline: auto; }
.dl-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.dl { background: var(--card); border-radius: var(--r-card); padding: 26px 26px 28px; display: flex; flex-direction: column; }
.dl-ico {
  width: 46px; height: 46px; border-radius: var(--r-tile);
  display: grid; place-items: center; margin-bottom: 16px;
  background: var(--tint-brand); color: var(--accent-ink);
}
/* The store marks are solid glyphs; the globe is a stroked outline. */
.dl-ico svg { width: 24px; height: 24px; fill: currentColor; }
.dl-ico svg.ico { fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; }
.dl .kicker { font-size: 13px; font-weight: 600; color: var(--ink-3); }
.dl h3 { margin: 2px 0 8px; font-size: 25px; font-weight: 600; letter-spacing: -0.4px; }
.dl p { margin: 0; font-size: 15px; color: var(--ink-2); }
.dl .req { margin-top: 12px; font-size: 13px; color: var(--ink-3); }
.dl .spacer { flex: 1; min-height: 18px; }
.dl .btn { align-self: flex-start; }

/* ---------------- Feature rows ---------------- */
.row { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(26px, 5vw, 70px); align-items: center; }
.row + .row { margin-top: clamp(46px, 6vw, 84px); }
.row.flip .row-art { order: -1; }
.row-copy h2 { margin: 0 0 14px; font-size: clamp(28px, 3.6vw, 43px); font-weight: 600; line-height: 1.06; letter-spacing: -0.5px; }
.row-copy p { margin: 0; font-size: 17.5px; color: var(--ink-2); max-width: 44ch; }
.row-art { display: flex; justify-content: center; }

.ticks { margin: 22px 0 0; padding: 0; list-style: none; display: grid; gap: 11px; }
.ticks li { position: relative; padding-inline-start: 30px; font-size: 16px; color: var(--ink-2); }
.ticks li::before {
  content: ""; position: absolute; inset-inline-start: 2px; top: 8px;
  width: 15px; height: 8px;
  /* Physical sides on purpose. Logical sides would mirror the tick into
     a chevron once the page flips to right to left. */
  border-left: 2.4px solid var(--accent);
  border-bottom: 2.4px solid var(--accent);
  rotate: -45deg;
}

/* ---------------- Safety cards ---------------- */
/* auto-fit with a real minimum, so a column can never squeeze down to
   three words per line no matter how many cards are in the grid. */
.s-grid {
  display: grid; gap: 16px; margin-top: 34px;
  grid-template-columns: repeat(auto-fit, minmax(248px, 1fr));
}
.scard {
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--r-card); padding: 24px;
}
/* Where to find the setting in the app. A quiet path, not body copy. */
.scard .where {
  display: block; margin-top: 14px; padding-top: 12px;
  border-top: 1px solid var(--line);
  font-size: 12.5px; line-height: 1.5; color: var(--ink-3);
}
.s-ico {
  width: 42px; height: 42px; border-radius: var(--r-tile); margin-bottom: 15px;
  display: grid; place-items: center; background: var(--tint-brand); color: var(--accent-ink);
}
.s-ico .ico { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.scard h3 { margin: 0 0 7px; font-size: 17.5px; font-weight: 600; }
.scard p { margin: 0; font-size: 14.5px; color: var(--ink-2); }

/* ---------------- FAQ ---------------- */
.qa { margin: 30px 0 0; display: grid; grid-template-columns: 1fr 1fr; gap: 0 clamp(26px, 5vw, 60px); }
.qa > div { padding: 24px 0; border-top: 1px solid var(--line); }
.qa dt { font-size: 17.5px; font-weight: 600; letter-spacing: -0.2px; }
.qa dd { margin: 8px 0 0; font-size: 15.5px; color: var(--ink-2); }

/* ---------------- Final call ---------------- */
.last { text-align: center; }
.last h2 { margin: 0; font-size: clamp(28px, 4.2vw, 46px); font-weight: 600; line-height: 1.1; letter-spacing: -0.6px; text-wrap: balance; }
.last .lede { margin: 12px auto 0; max-width: 40ch; }
.last .row-cta { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-top: 28px; }
.last .lede { max-width: 46ch; }
/* The last thing before the tap answers the last objections, rather than
   offering a second button that competes with Download. */
.last .assure {
  margin: 26px 0 0; padding: 0; list-style: none;
  display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 26px;
}
.last .assure li { position: relative; padding-inline-start: 24px; font-size: 14.5px; color: var(--ink-2); }
.last .assure li::before {
  content: ""; position: absolute; inset-inline-start: 2px; top: 7px;
  width: 13px; height: 7px;
  border-left: 2.2px solid var(--accent);
  border-bottom: 2.2px solid var(--accent);
  rotate: -45deg;
}

/* ---------------- Footer ---------------- */
.foot { background: var(--foot); color: var(--foot-ink); padding: 54px 0 30px; }
.foot .brand { color: var(--foot-ink); }
.foot-cols { display: grid; grid-template-columns: 1.5fr repeat(3, 1fr); gap: 30px; }
.foot-cols h4 { margin: 0 0 14px; font-size: 12.5px; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; color: var(--foot-ink-2); }
.foot-cols ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.foot-cols a { font-size: 14.5px; color: var(--foot-ink-2); transition: color 0.18s ease; }
.foot-cols a:hover { color: var(--foot-ink); }
.foot-about { margin: 14px 0 0; font-size: 14.5px; color: var(--foot-ink-2); max-width: 34ch; }
.foot-bottom {
  margin-top: 44px; padding-top: 22px; border-top: 1px solid rgba(255, 255, 255, 0.1);
  display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
  font-size: 13.5px; color: var(--foot-ink-2);
}
.foot-bottom .spacer { flex: 1; }
.foot .lang { background: rgba(255, 255, 255, 0.09); }
.foot .lang button { color: var(--foot-ink-2); }
.foot .lang button:hover { color: #fff; }

/* =========================================================
   Device mockups
   One component, resized through --phw. Everything inside the
   screen is sized in em against the screen font-size, so a
   phone scales as a single piece.
   ========================================================= */
.ph {
  --phw: 292px;
  position: relative; width: var(--phw); aspect-ratio: 9 / 19.2;
  padding: 7px; border-radius: 40px;
  background: linear-gradient(155deg, #34333f, #101017 62%);
  box-shadow: 0 26px 48px -22px rgba(24, 14, 48, 0.5);
}
.ph-scr {
  position: relative; width: 100%; height: 100%; overflow: hidden;
  border-radius: 33px; background: #07070c; color: #fff;
  font-size: calc(var(--phw) / 25); line-height: 1.4;
}
.ph-clip { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ph-shade {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(4, 3, 12, 0.5) 0%, rgba(4, 3, 12, 0) 20%,
              rgba(4, 3, 12, 0) 42%, rgba(4, 3, 12, 0.82) 100%);
}
.ph .ico { width: 1.55em; height: 1.55em; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.ph .ico.fill { fill: currentColor; stroke: none; }

.ph-top {
  position: absolute; top: 2em; inset-inline: 0;
  display: flex; justify-content: center; gap: 1.3em;
  font-size: 0.86em; font-weight: 700; color: rgba(255, 255, 255, 0.62);
}
.ph-top .on { color: #fff; position: relative; }
.ph-top .on::after {
  content: ""; position: absolute; inset-inline: 20%; bottom: -0.45em;
  height: 0.14em; border-radius: 999px; background: #fff;
}
.ph-rail {
  position: absolute; inset-inline-end: 0.65em; bottom: 5em;
  display: flex; flex-direction: column; align-items: center; gap: 1em;
}
.rail { display: flex; flex-direction: column; align-items: center; gap: 0.2em; font-size: 0.6em; font-weight: 700; }
.rail .ico { width: 2.2em; height: 2.2em; }
.rail-av { position: relative; width: 2.5em; height: 2.5em; margin-bottom: 0.5em; border-radius: 50%; border: 0.11em solid #fff; }
.rail-av img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.rail-av i {
  position: absolute; inset-inline-start: 50%; bottom: -0.42em; translate: -50% 0;
  width: 1.05em; height: 1.05em; border-radius: 50%; background: var(--accent);
  color: #fff; font-style: normal; font-size: 0.86em; font-weight: 700;
  display: grid; place-items: center; line-height: 1;
}
.ph-cap { position: absolute; inset-inline-start: 0.9em; inset-inline-end: 4.4em; bottom: 4.2em; }
.ph-cap b { display: block; font-size: 0.8em; font-weight: 700; }
.ph-cap p { margin: 0.25em 0 0; font-size: 0.72em; color: rgba(255, 255, 255, 0.9); }
.ph-cap .tags { display: flex; gap: 0.5em; margin-top: 0.2em; color: #cbb4ff; font-weight: 700; }
.ph-sound { display: inline-flex; align-items: center; gap: 0.4em; margin-top: 0.55em; font-size: 0.64em; color: rgba(255, 255, 255, 0.82); }
.ph-sound .ico { width: 1.5em; height: 1.5em; }
.ph-bar {
  position: absolute; inset-inline: 0; bottom: 0; height: 3.4em;
  display: flex; align-items: center; justify-content: space-around; padding-bottom: 0.5em;
  background: linear-gradient(transparent, rgba(4, 3, 12, 0.94) 42%);
  color: rgba(255, 255, 255, 0.55);
}
.ph-bar .ico { width: 1.35em; height: 1.35em; }
.ph-bar .ico.on { color: #fff; }
.ph-add {
  width: 2.2em; height: 1.45em; border-radius: 0.42em; background: var(--accent); color: #fff;
  display: grid; place-items: center; font-size: 0.95em; font-weight: 700; line-height: 1;
}

.ph-live { position: absolute; top: 1.5em; inset-inline: 0.8em; display: flex; align-items: center; gap: 0.5em; }
.live-tag {
  display: inline-flex; align-items: center; gap: 0.35em;
  background: var(--accent); color: #fff; border-radius: 999px;
  padding: 0.2em 0.6em; font-size: 0.62em; font-weight: 800; letter-spacing: 0.04em;
}
.live-tag i { width: 0.5em; height: 0.5em; border-radius: 50%; background: #fff; }
.live-count {
  display: inline-flex; align-items: center; gap: 0.3em;
  background: rgba(8, 6, 18, 0.55); border-radius: 999px;
  padding: 0.2em 0.6em; font-size: 0.62em; font-weight: 700;
}
.live-count .ico { width: 1.25em; height: 1.25em; }
.ph-chat { position: absolute; inset-inline-start: 0.9em; bottom: 1.4em; width: 78%; }
.ph-chat p { margin: 0.35em 0 0; font-size: 0.6em; color: rgba(255, 255, 255, 0.88); }
.ph-chat b { color: #cbb4ff; font-weight: 700; }

.ph-scr.light { background: #fff; color: #16161d; }
.pf-top { padding: 2.2em 1em 1em; text-align: center; }
.pf-av { width: 4.2em; height: 4.2em; border-radius: 50%; margin: 0 auto 0.55em; object-fit: cover; }
.pf-top > b { display: block; font-size: 0.78em; font-weight: 700; }
.pf-stats { display: flex; justify-content: center; gap: 1.5em; margin: 0.85em 0; }
.pf-stats span { display: flex; flex-direction: column; }
.pf-stats b { font-size: 0.82em; font-weight: 800; }
.pf-stats small { font-size: 0.56em; color: #7c7c88; }
.pf-btn { display: inline-block; background: var(--accent); color: #fff; padding: 0.42em 2.4em; border-radius: 999px; font-size: 0.72em; font-weight: 700; }
.pf-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.14em; padding: 0 0.14em; }
.pf-grid span { position: relative; aspect-ratio: 9 / 13.5; background-size: cover; background-position: center; background-color: #ddd; }
.pf-grid i {
  position: absolute; inset-inline-start: 0.35em; bottom: 0.3em; font-style: normal;
  font-size: 0.52em; font-weight: 700; color: #fff; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
}

/* Paired phones inside a feature row */
.duo {
  position: relative; width: 100%; max-width: 462px;
  display: flex; align-items: center; justify-content: center; padding-block: 20px;
}
.duo .ph-front { --phw: 252px; position: relative; z-index: 2; margin-inline-end: 126px; }
.duo .ph-back { --phw: 196px; position: absolute; z-index: 1; inset-inline-end: 0; bottom: 28px; }
.duo.solo .ph-front { margin-inline-end: 0; }
/* The second phone is partly covered on its leading edge, so its own
   overlays move to the trailing edge where they stay readable. */
.duo .ph-back .ph-live { justify-content: flex-end; }
.duo .ph-back .ph-chat { inset-inline-start: auto; inset-inline-end: 0.9em; width: 72%; text-align: end; }

/* Photo card inside a feature row */
.shot { border-radius: var(--r-media); overflow: hidden; width: 100%; }
.shot img { width: 100%; height: auto; aspect-ratio: 5 / 4; object-fit: cover; object-position: center 42%; }

/* =========================================================
   Document pages (privacy, terms, guidelines, help ...)
   ========================================================= */
.doc-head { background: var(--tint-brand); padding: clamp(40px, 5vw, 62px) 0; }
.doc-head h1 { max-width: 20ch; }
.doc-head .lede { max-width: 60ch; }
.doc-head .updated { margin: 14px 0 0; font-size: 13.5px; color: var(--ink-3); }

.doc-body { padding: clamp(36px, 5vw, 60px) 0 clamp(48px, 6vw, 84px); }
.doc-in { display: grid; grid-template-columns: 250px 1fr; gap: clamp(26px, 4vw, 56px); align-items: start; }
.toc { position: sticky; top: 88px; }
.toc h4 { margin: 0 0 12px; font-size: 12.5px; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; color: var(--ink-3); }
.toc ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 9px; }
.toc a { font-size: 14.5px; color: var(--ink-2); transition: color 0.18s ease; }
.toc a:hover { color: var(--accent); }

.prose { max-width: 72ch; }
.prose h2 {
  margin: 40px 0 12px; font-size: 24px; font-weight: 600; letter-spacing: -0.3px;
  scroll-margin-top: 90px;
}
.prose h2:first-child { margin-top: 0; }
.prose h3 { margin: 26px 0 8px; font-size: 17.5px; font-weight: 600; }
.prose p { margin: 0 0 14px; font-size: 16px; color: var(--ink-2); }
.prose ul, .prose ol { margin: 0 0 16px; padding-inline-start: 22px; color: var(--ink-2); font-size: 16px; }
.prose li { margin-bottom: 8px; }
.prose strong { color: var(--ink); font-weight: 600; }
.prose a { color: var(--accent-ink); text-decoration: underline; text-underline-offset: 3px; }
/* A detail the site owner still has to fill in before publishing.
   Highlighted on purpose so it cannot ship unnoticed. Global, not scoped
   to .prose, because placeholders also appear in contact cards. */
.fill {
  background: #ffe8a3; color: #4a3800;
  padding: 1px 6px; border-radius: 5px; font-weight: 600;
  white-space: nowrap;
}
.prose .note {
  background: var(--tint-warm); border-radius: var(--r-tile);
  padding: 18px 20px; margin: 0 0 18px; font-size: 15px; color: var(--ink-2);
}
.prose table { width: 100%; border-collapse: collapse; margin: 0 0 18px; font-size: 15px; }
.prose th, .prose td { text-align: start; padding: 11px 12px; border-bottom: 1px solid var(--line); vertical-align: top; }
.prose th { font-weight: 600; color: var(--ink); }
.prose td { color: var(--ink-2); }
.table-wrap { overflow-x: auto; }

/* Help / contact cards */
.hcards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 30px; }
.hcard { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-card); padding: 24px; }
.hcard h3 { margin: 0 0 8px; font-size: 18px; font-weight: 600; }
.hcard p { margin: 0; font-size: 15px; color: var(--ink-2); }
.hcard .btn { margin-top: 18px; }

/* 404 */
.oops { text-align: center; padding: clamp(60px, 10vw, 130px) 0; }
.oops .lede { margin-inline: auto; }
.oops .row-cta { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-top: 28px; }

/* ---------------- Scroll reveal ---------------- */
.reveal { opacity: 0; transform: translateY(14px); }
.reveal.in { opacity: 1; transform: none; transition: opacity 0.55s ease, transform 0.6s cubic-bezier(0.16, 1, 0.3, 1); }
@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal.in { opacity: 1; transform: none; transition: none; }
}

/* ---------------- Responsive ---------------- */
@media (max-width: 1000px) {
  .dl-grid, .hcards { grid-template-columns: 1fr 1fr; }
  .foot-cols { grid-template-columns: 1fr 1fr; gap: 26px 30px; }
  .doc-in { grid-template-columns: 1fr; }
  .toc { position: static; padding-bottom: 8px; border-bottom: 1px solid var(--line); }
  .toc ul { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 820px) {
  .nav-links { display: none; }
  .row, .qa { grid-template-columns: 1fr; }
  .row.flip .row-art, .row-art { order: -1; }
  .row-copy p { max-width: none; }
  .qa > div:nth-child(2) { border-top: 1px solid var(--line); }
  .hero-card { min-height: 0; }
  .hero-copy { max-width: none; padding-block: 130px 30px; }
  .hero-card::after,
  [dir="rtl"] .hero-card::after {
    background: linear-gradient(180deg, rgba(10, 6, 20, 0.26) 0%, rgba(10, 6, 20, 0.56) 44%, rgba(10, 6, 20, 0.9) 100%);
  }
}

@media (max-width: 620px) {
  .wrap { padding-inline: 16px; }
  .dl-grid, .hcards { grid-template-columns: 1fr; }
  .duo .ph-back { display: none; }
  .duo .ph-front { --phw: min(280px, 74vw); margin-inline-end: 0; }
  .foot-cols { grid-template-columns: 1fr; }
  /* Two compact columns beats a thirteen item stack above the text. */
  .toc ul { grid-template-columns: 1fr 1fr; gap: 8px 16px; }
  .toc a { font-size: 13.5px; }

  /* Hero on a phone: the card is short, so the headline, the line under it
     and the button all come down a step. A full width button was too heavy. */
  .hero-copy { padding: 92px 20px 24px; }
  .hero-copy h1 { font-size: 27px; letter-spacing: -0.3px; line-height: 1.12; }
  .hero-copy .lede { font-size: 15.5px; margin-top: 10px; max-width: 34ch; }
  .hero-copy .btn { width: auto; padding: 13px 26px; font-size: 15px; margin-top: 20px; }
  .hero-note { font-size: 12.5px; }
  .lede { font-size: 16px; }
}

@media (max-width: 400px) {
  .hero-copy { padding: 78px 18px 22px; }
  .hero-copy h1 { font-size: 24px; }
  .hero-copy .lede { font-size: 14.5px; }
  .hero-copy .btn { padding: 12px 24px; font-size: 14.5px; }
}

/* ---------------- Scrollbars ----------------
   The platform default is a wide bar with stepper arrows that belongs to the
   operating system rather than the page. Same behaviour, quieter form, and it
   follows the theme. Firefox uses the two standard properties; Chrome and
   Edge need the pseudo-elements. */
* { scrollbar-width: thin; scrollbar-color: var(--line) transparent; }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--ink-3) 45%, transparent);
  border: 3px solid transparent;
  background-clip: content-box;
  border-radius: 999px;
}
::-webkit-scrollbar-thumb:hover {
  background: color-mix(in srgb, var(--ink-3) 75%, transparent);
  border: 3px solid transparent;
  background-clip: content-box;
}
::-webkit-scrollbar-corner { background: transparent; }