/*
 * The Mawarid landing page.
 *
 * **This page is deliberately louder than the product it sells.** The design
 * brief asks for restraint — "precise and quiet, not lively" — and that is
 * right for a screen somebody stares at for six hours while handling other
 * people's pay. It is not right for the one page that has four seconds to say
 * the product exists and is serious. The divergence was decided on 2026-10-05
 * and written into the brief and specs/032, so neither document quietly
 * disagrees with the live page.
 *
 * **What did not move**: every claim rule (no payroll, no trial, no invented
 * customer), every contrast floor, and the rule that motion is entrance only
 * and the page is complete without it.
 *
 * The anchor is still `--seal`, the product's own indigo. The rest of the
 * palette is this page's alone and never appears in the product — a marketing
 * hue leaking into a status colour is how "green" stops meaning "present".
 */

/* ── Cairo, served from here ─────────────────────────────────────────── */
@font-face {
  font-family: "Cairo";
  font-style: normal;
  font-weight: 200 1000;
  font-display: swap;
  src: url("fonts/cairo-arabic.woff2") format("woff2");
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891,
    U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41,
    U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC;
}
@font-face {
  font-family: "Cairo";
  font-style: normal;
  font-weight: 200 1000;
  font-display: swap;
  src: url("fonts/cairo-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
    U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF,
    U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Cairo";
  font-style: normal;
  font-weight: 200 1000;
  font-display: swap;
  src: url("fonts/cairo-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ── Tokens ──────────────────────────────────────────────────────────── */
:root {
  /* The product's own, copied from packages/design-tokens/tokens.css */
  --paper: rgb(247 246 243);
  --surface: rgb(255 255 255);
  --sunk: rgb(239 238 233);
  --rule: rgb(227 226 220);
  --rule-firm: rgb(201 200 193);
  --ink: rgb(23 26 33);
  --ink-soft: rgb(90 96 112);
  --ink-faint: rgb(100 107 123);
  --seal: rgb(46 58 140);
  --seal-wash: rgb(232 234 246);
  --seal-bar: rgb(63 76 166);
  --on-seal: rgb(255 255 255);

  /* **This page's own palette.** Five further hues, each with a pale wash,
     used to tell one capability from another at a glance — never to tell a
     *state* apart, which is what the product's status colours are for. */
  --violet: rgb(104 88 230);
  --violet-wash: rgb(239 237 253);
  --sky: rgb(28 134 198);
  --sky-wash: rgb(226 241 250);
  --teal: rgb(16 140 130);
  --teal-wash: rgb(224 245 242);
  --amber: rgb(186 118 12);
  --amber-wash: rgb(251 240 221);
  --rose: rgb(196 62 114);
  --rose-wash: rgb(252 233 240);

  /* **A second, darker value of each hue, for text sitting on its own wash.**
     The hues above are chosen to read as colour on a white surface. On their
     own pale wash they are too close to it: measured, five of the six fell
     between 3.27:1 and 4.41:1 against a floor of 4.5. These clear it. Dark
     mode needs none — there the hue is light and the wash is dark, and the
     worst pair is 6.13:1 — so the dark block re-points them at the hue. */
  --violet-ink: rgb(100 84 221);
  --sky-ink: rgb(24 113 166);
  --teal-ink: rgb(14 120 112);
  --amber-ink: rgb(149 94 10);
  --rose-ink: rgb(184 58 107);
  --seal-ink: rgb(46 58 140);

  --glow-a: rgb(104 88 230 / 26%);
  --glow-b: rgb(28 134 198 / 22%);
  --glow-c: rgb(196 62 114 / 16%);
  --on-brand: rgb(255 255 255);

  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 14px;
  --radius-xl: 22px;
  --radius-pill: 999px;

  --shadow-raised: 0 1px 2px rgb(23 26 33 / 6%);
  --shadow-float: 0 8px 26px rgb(23 26 33 / 9%);
  --shadow-plate: 0 32px 80px rgb(23 26 33 / 20%);

  --duration-fast: 120ms;
  --duration: 220ms;
  --duration-slow: 560ms;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);

  --weight-regular: 450;
  --weight-medium: 520;
  --weight-semibold: 570;
  --weight-bold: 620;
  --weight-heavy: 660;

  --leading-tight: 1.2;
  --leading-normal: 1.55;
  --leading-relaxed: 1.75;

  --page: 1180px;
  --gutter: clamp(20px, 5vw, 48px);
  --section-gap: clamp(76px, 9vw, 132px);
}

html[lang="ar"] {
  --leading-tight: 1.35;
  --leading-normal: 1.75;
  --leading-relaxed: 1.9;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: rgb(16 19 25);
    --surface: rgb(27 31 39);
    --sunk: rgb(22 26 33);
    --rule: rgb(42 47 58);
    --rule-firm: rgb(58 64 78);
    --ink: rgb(233 232 228);
    --ink-soft: rgb(162 169 184);
    --ink-faint: rgb(129 137 153);
    --seal: rgb(154 166 245);
    --seal-wash: rgb(35 40 66);
    --seal-bar: rgb(110 123 224);
    --on-seal: rgb(16 19 25);
    --violet: rgb(166 155 250);
    --violet-wash: rgb(38 36 68);
    --sky: rgb(110 190 238);
    --sky-wash: rgb(22 42 58);
    --teal: rgb(90 206 194);
    --teal-wash: rgb(18 45 44);
    --amber: rgb(232 174 86);
    --amber-wash: rgb(52 40 20);
    --rose: rgb(244 141 180);
    --rose-wash: rgb(58 28 42);
    --violet-ink: var(--violet);
    --sky-ink: var(--sky);
    --teal-ink: var(--teal);
    --amber-ink: var(--amber);
    --rose-ink: var(--rose);
    --seal-ink: var(--seal);
    --glow-a: rgb(104 88 230 / 32%);
    --glow-b: rgb(28 134 198 / 26%);
    --glow-c: rgb(196 62 114 / 20%);
    --shadow-raised: 0 1px 2px rgb(0 0 0 / 40%);
    --shadow-float: 0 8px 26px rgb(0 0 0 / 46%);
    --shadow-plate: 0 32px 80px rgb(0 0 0 / 66%);
  }
}

:root[data-theme="dark"] {
  --paper: rgb(16 19 25);
  --surface: rgb(27 31 39);
  --sunk: rgb(22 26 33);
  --rule: rgb(42 47 58);
  --rule-firm: rgb(58 64 78);
  --ink: rgb(233 232 228);
  --ink-soft: rgb(162 169 184);
  --ink-faint: rgb(129 137 153);
  --seal: rgb(154 166 245);
  --seal-wash: rgb(35 40 66);
  --seal-bar: rgb(110 123 224);
  --on-seal: rgb(16 19 25);
  --violet: rgb(166 155 250);
  --violet-wash: rgb(38 36 68);
  --sky: rgb(110 190 238);
  --sky-wash: rgb(22 42 58);
  --teal: rgb(90 206 194);
  --teal-wash: rgb(18 45 44);
  --amber: rgb(232 174 86);
  --amber-wash: rgb(52 40 20);
  --rose: rgb(244 141 180);
  --rose-wash: rgb(58 28 42);
  --violet-ink: var(--violet);
  --sky-ink: var(--sky);
  --teal-ink: var(--teal);
  --amber-ink: var(--amber);
  --rose-ink: var(--rose);
  --seal-ink: var(--seal);
  --glow-a: rgb(104 88 230 / 32%);
  --glow-b: rgb(28 134 198 / 26%);
  --glow-c: rgb(196 62 114 / 20%);
  --shadow-raised: 0 1px 2px rgb(0 0 0 / 40%);
  --shadow-float: 0 8px 26px rgb(0 0 0 / 46%);
  --shadow-plate: 0 32px 80px rgb(0 0 0 / 66%);
}

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: "Cairo", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 16px;
  font-weight: var(--weight-regular);
  line-height: var(--leading-normal);
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

h1,
h2,
h3 {
  margin: 0;
  line-height: var(--leading-tight);
  font-weight: var(--weight-heavy);
  letter-spacing: -0.02em;
}
html[lang="ar"] h1,
html[lang="ar"] h2,
html[lang="ar"] h3 {
  letter-spacing: 0;
}

p {
  margin: 0;
}
a {
  color: var(--seal);
  text-underline-offset: 3px;
}
img,
svg {
  max-width: 100%;
}
:focus-visible {
  outline: 2px solid var(--violet);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

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

.skip {
  position: absolute;
  inset-inline-start: var(--gutter);
  top: -100px;
  z-index: 100;
  padding: 10px 16px;
  background: var(--seal);
  color: var(--on-brand);
  border-radius: var(--radius-md);
  font-weight: var(--weight-medium);
  text-decoration: none;
  transition: top var(--duration) var(--ease);
}
.skip:focus {
  top: 12px;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 15px;
  border-radius: var(--radius-pill);
  background: var(--violet-wash);
  color: var(--violet);
  font-size: 0.8125rem;
  font-weight: var(--weight-semibold);
}
.eyebrow .dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
}

/* ── Header ──────────────────────────────────────────────────────────── */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: color-mix(in srgb, var(--paper) 82%, transparent);
  backdrop-filter: blur(14px) saturate(150%);
  border-bottom: 1px solid transparent;
  transition: border-color var(--duration) var(--ease),
    background var(--duration) var(--ease);
}
.site-header[data-scrolled="true"] {
  border-bottom-color: var(--rule);
  background: color-mix(in srgb, var(--paper) 95%, transparent);
}
.site-header .wrap {
  display: flex;
  align-items: center;
  gap: 18px;
  min-height: 72px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--ink);
  text-decoration: none;
  font-weight: var(--weight-heavy);
  /* **The name, read before anything else on the page.** It was 1.125rem —
     the size of the links beside it — so the one word a stranger has to come
     away with weighed the same as "Questions". It grows with the viewport and
     stops: large enough to lead on a phone, never so large that it crowds the
     four links and the way in on a narrow header. */
  font-size: clamp(1.3rem, 1.1rem + 0.7vw, 1.6rem);
  letter-spacing: -0.012em;
  white-space: nowrap;
}
.brand .mark {
  color: var(--seal);
  flex: none;
  /* Tied to the name rather than to the markup's `width`, so the two keep
     their proportion at every viewport instead of drifting apart. */
  width: 1.55em;
  height: 1.55em;
}

.nav {
  display: none;
  margin-inline-start: auto;
  align-items: center;
  gap: 26px;
}
.nav a {
  position: relative;
  color: var(--ink-soft);
  text-decoration: none;
  font-size: 0.9375rem;
  font-weight: var(--weight-medium);
  transition: color var(--duration-fast) var(--ease);
}
.nav a::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  bottom: -6px;
  height: 2px;
  border-radius: 2px;
  background: var(--violet);
  scale: 0 1;
  transition: scale var(--duration) var(--ease);
}
.nav a:hover {
  color: var(--ink);
}
.nav a:hover::after {
  scale: 1 1;
}

.header-actions {
  margin-inline-start: auto;
  display: flex;
  align-items: center;
  gap: 8px;
}
.nav ~ .header-actions {
  margin-inline-start: 0;
}
@media (min-width: 960px) {
  .nav {
    display: flex;
  }
}

/* ── Buttons ─────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 12px 22px;
  border-radius: var(--radius-pill);
  border: 1px solid transparent;
  font: inherit;
  font-size: 0.9375rem;
  font-weight: var(--weight-semibold);
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--duration-fast) var(--ease),
    border-color var(--duration-fast) var(--ease),
    color var(--duration-fast) var(--ease),
    translate var(--duration-fast) var(--ease),
    box-shadow var(--duration) var(--ease);
}

.btn-primary {
  background: linear-gradient(135deg, var(--seal), var(--violet));
  color: var(--on-brand);
  box-shadow: 0 6px 18px var(--glow-a);
}
.btn-primary:hover {
  translate: 0 -2px;
  box-shadow: 0 12px 30px var(--glow-a);
}
.btn-primary:active {
  translate: 0 0;
}

.btn-quiet {
  background: var(--surface);
  color: var(--ink);
  border-color: var(--rule-firm);
}
.btn-quiet:hover {
  border-color: var(--violet);
  color: var(--violet);
  translate: 0 -2px;
}

.btn-lg {
  padding: 15px 30px;
  font-size: 1.0625rem;
}

.btn-icon {
  padding: 9px;
  border-radius: var(--radius-pill);
  background: transparent;
  border: 1px solid transparent;
  color: var(--ink-soft);
  cursor: pointer;
  display: inline-flex;
  transition: background var(--duration-fast) var(--ease),
    color var(--duration-fast) var(--ease);
}
.btn-icon:hover {
  background: var(--sunk);
  color: var(--ink);
}

.lang-switch {
  font-size: 0.875rem;
  font-weight: var(--weight-semibold);
  color: var(--ink-soft);
  text-decoration: none;
  padding: 8px 13px;
  border-radius: var(--radius-pill);
  transition: background var(--duration-fast) var(--ease),
    color var(--duration-fast) var(--ease);
}
.lang-switch:hover {
  background: var(--sunk);
  color: var(--ink);
}

/* ── Hero ────────────────────────────────────────────────────────────── */
.hero {
  position: relative;
  padding-block: clamp(52px, 8vw, 104px) clamp(40px, 6vw, 72px);
  text-align: center;
  overflow: hidden;
}

/* Three soft fields of colour behind the hero. Static — a painted backdrop,
   not a lava lamp: nothing on this page moves once it has settled. */
.hero .glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  pointer-events: none;
  z-index: -1;
}
.hero .glow-a {
  width: min(620px, 80vw);
  aspect-ratio: 1;
  background: var(--glow-a);
  top: -18%;
  inset-inline-start: 46%;
  translate: -50% 0;
}
.hero .glow-b {
  width: min(460px, 62vw);
  aspect-ratio: 1;
  background: var(--glow-b);
  top: 6%;
  inset-inline-start: 4%;
}
.hero .glow-c {
  width: min(420px, 58vw);
  aspect-ratio: 1;
  background: var(--glow-c);
  top: 2%;
  inset-inline-end: 3%;
}

.hero h1 {
  font-size: clamp(2.2rem, 1.2rem + 4.2vw, 4.1rem);
  margin-block: 22px 0;
  max-width: 19ch;
  margin-inline: auto;
  text-wrap: balance;
}
html[lang="ar"] .hero h1 {
  max-width: 17ch;
}

/* The phrase the eye should land on, marked the way somebody marks a line in
   a ledger: a band behind the words, not a different colour of ink. */
.hero h1 .mark-line {
  position: relative;
  white-space: nowrap;
  z-index: 0;
}
.hero h1 .mark-line::before {
  content: "";
  position: absolute;
  inset-inline: -0.12em;
  /* **Behind the words, not under them.** The band is positioned from the
     bottom of the line box, which in Arabic sits well below the glyphs —
     Arabic carries marks under the baseline and the line is set looser to
     make room for them. At the Latin value the band floated clear of the
     text and read as a separate rule. Each script gets its own offset. */
  bottom: 0.1em;
  height: 0.34em;
  background: linear-gradient(
    90deg,
    color-mix(in srgb, var(--violet) 38%, transparent),
    color-mix(in srgb, var(--sky) 34%, transparent)
  );
  border-radius: 3px;
  z-index: -1;
  transform-origin: center;
}

html[lang="ar"] .hero h1 .mark-line::before {
  bottom: 0.3em;
  height: 0.3em;
}

.hero-sub {
  margin: 22px auto 0;
  max-width: 60ch;
  font-size: clamp(1.0625rem, 0.98rem + 0.42vw, 1.25rem);
  line-height: var(--leading-relaxed);
  color: var(--ink-soft);
}

.hero-actions {
  margin-top: 34px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
}

.ticks {
  margin: 30px auto 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 12px 30px;
  justify-content: center;
}
.ticks li {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 0.9375rem;
  font-weight: var(--weight-medium);
  color: var(--ink-soft);
}
.ticks .tick {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--teal-wash);
  color: var(--teal);
  flex: none;
}

.hero-note {
  margin-top: 22px;
  font-size: 0.875rem;
  color: var(--ink-faint);
}

/* ── The product, shown ──────────────────────────────────────────────── */
.showcase {
  position: relative;
  padding-bottom: var(--section-gap);
}
.frame {
  position: relative;
  margin: 0;
  border-radius: var(--radius-xl);
  background: var(--surface);
  border: 1px solid var(--rule);
  box-shadow: var(--shadow-plate);
  overflow: hidden;
}
.frame .chrome {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 12px 16px;
  background: var(--sunk);
  border-bottom: 1px solid var(--rule);
}
.frame .chrome i {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--rule-firm);
}
.frame img {
  display: block;
  width: 100%;
  height: auto;
}
.frame figcaption {
  padding: 13px 18px;
  font-size: 0.8125rem;
  color: var(--ink-faint);
  background: var(--surface);
  border-top: 1px solid var(--rule);
}

/* ── Sections ────────────────────────────────────────────────────────── */
.section {
  padding-block: var(--section-gap);
}
.section-sunk {
  background: var(--sunk);
  border-block: 1px solid var(--rule);
}

.section-head {
  max-width: 64ch;
  margin-bottom: clamp(38px, 5vw, 60px);
}
.section-head.centred {
  margin-inline: auto;
  text-align: center;
}
.section-head h2 {
  margin-top: 18px;
  font-size: clamp(1.8rem, 1.25rem + 2.3vw, 3rem);
  text-wrap: balance;
}
.section-head p {
  margin-top: 16px;
  font-size: 1.0625rem;
  line-height: var(--leading-relaxed);
  color: var(--ink-soft);
}

/* ── Capability cards ────────────────────────────────────────────────── */
.cards {
  display: grid;
  gap: 18px;
}
@media (min-width: 680px) {
  .cards {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 1000px) {
  .cards {
    grid-template-columns: repeat(3, 1fr);
  }
}

.card {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  padding: 30px 26px 32px;
  box-shadow: var(--shadow-raised);
  transition: translate var(--duration) var(--ease),
    box-shadow var(--duration) var(--ease),
    border-color var(--duration) var(--ease);
}
.card:hover {
  translate: 0 -4px;
  box-shadow: var(--shadow-float);
  border-color: color-mix(in srgb, var(--tint, var(--seal)) 40%, var(--rule));
}
.card .glyph {
  display: inline-flex;
  padding: 13px;
  border-radius: var(--radius-md);
  background: var(--tint-wash, var(--seal-wash));
  color: var(--tint, var(--seal));
}
.card h3 {
  margin-top: 20px;
  font-size: 1.125rem;
  font-weight: var(--weight-bold);
}
.card p {
  margin-top: 10px;
  font-size: 0.9375rem;
  line-height: var(--leading-relaxed);
  color: var(--ink-soft);
}

.t-seal {
  --tint: var(--seal);
  --tint-wash: var(--seal-wash);
  --tint-ink: var(--seal-ink);
}
.t-violet {
  --tint: var(--violet);
  --tint-wash: var(--violet-wash);
  --tint-ink: var(--violet-ink);
}
.t-sky {
  --tint: var(--sky);
  --tint-wash: var(--sky-wash);
  --tint-ink: var(--sky-ink);
}
.t-teal {
  --tint: var(--teal);
  --tint-wash: var(--teal-wash);
  --tint-ink: var(--teal-ink);
}
.t-amber {
  --tint: var(--amber);
  --tint-wash: var(--amber-wash);
  --tint-ink: var(--amber-ink);
}
.t-rose {
  --tint: var(--rose);
  --tint-wash: var(--rose-wash);
  --tint-ink: var(--rose-ink);
}

/* ── Alternating feature rows ────────────────────────────────────────── */
.feature {
  display: grid;
  gap: clamp(32px, 5vw, 64px);
  align-items: center;
}
@media (min-width: 940px) {
  .feature {
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  }
  .feature.flip > :first-child {
    order: 2;
  }
}
.feature + .feature {
  margin-top: var(--section-gap);
}
.feature h3 {
  margin-top: 18px;
  font-size: clamp(1.5rem, 1.15rem + 1.5vw, 2.2rem);
  text-wrap: balance;
}
.feature p {
  margin-top: 16px;
  font-size: 1.0625rem;
  line-height: var(--leading-relaxed);
  color: var(--ink-soft);
}
.feature .pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px;
  border-radius: var(--radius-pill);
  background: var(--tint-wash, var(--seal-wash));
  color: var(--tint-ink, var(--seal-ink));
  font-size: 0.8125rem;
  font-weight: var(--weight-semibold);
}

/* ── Why ─────────────────────────────────────────────────────────────── */
.why {
  display: grid;
  gap: 18px;
}
@media (min-width: 700px) {
  .why {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 1020px) {
  .why {
    grid-template-columns: repeat(3, 1fr);
  }
}
.why-card {
  border-radius: var(--radius-lg);
  padding: 28px 26px 30px;
  background: var(--tint-wash, var(--seal-wash));
  border: 1px solid color-mix(in srgb, var(--tint, var(--seal)) 18%, transparent);
  transition: translate var(--duration) var(--ease);
}
.why-card:hover {
  translate: 0 -4px;
}
.why-card h3 {
  font-size: 1.0625rem;
  font-weight: var(--weight-bold);
}
.why-card p {
  margin-top: 10px;
  font-size: 0.9375rem;
  line-height: var(--leading-relaxed);
  color: var(--ink-soft);
}
.why-card .glyph {
  display: inline-flex;
  padding: 11px;
  border-radius: var(--radius-md);
  background: var(--surface);
  color: var(--tint, var(--seal));
  margin-bottom: 16px;
  box-shadow: var(--shadow-raised);
}

/* ── Steps ───────────────────────────────────────────────────────────── */
.steps {
  display: grid;
  gap: 18px;
}
@media (min-width: 760px) {
  .steps {
    grid-template-columns: repeat(4, 1fr);
  }
}
.step {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  padding: 28px 24px 30px;
  transition: translate var(--duration) var(--ease),
    box-shadow var(--duration) var(--ease);
}
.step:hover {
  translate: 0 -4px;
  box-shadow: var(--shadow-float);
}
.step .n {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--seal), var(--violet));
  color: var(--on-brand);
  font-size: 0.9375rem;
  font-weight: var(--weight-bold);
  font-variant-numeric: tabular-nums;
  box-shadow: 0 5px 14px var(--glow-a);
}
.step h3 {
  margin-top: 18px;
  font-size: 1.0625rem;
  font-weight: var(--weight-bold);
}
.step p {
  margin-top: 8px;
  font-size: 0.9375rem;
  line-height: var(--leading-relaxed);
  color: var(--ink-soft);
}

/* ── Questions ───────────────────────────────────────────────────────── */
.faq {
  max-width: 80ch;
  margin-inline: auto;
  display: grid;
  gap: 12px;
}
.faq details {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  transition: border-color var(--duration) var(--ease),
    box-shadow var(--duration) var(--ease);
}
.faq details[open] {
  border-color: color-mix(in srgb, var(--violet) 36%, var(--rule));
  box-shadow: var(--shadow-float);
}
.faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 20px 22px;
  cursor: pointer;
  font-size: 1.0625rem;
  font-weight: var(--weight-semibold);
  list-style: none;
}
.faq summary::-webkit-details-marker {
  display: none;
}
.faq summary:hover {
  color: var(--violet);
}
.faq summary .chev {
  flex: none;
  color: var(--violet);
  transition: rotate var(--duration) var(--ease);
}
.faq details[open] summary .chev {
  rotate: 180deg;
}
.faq .answer {
  padding: 0 22px 22px;
  font-size: 0.9375rem;
  line-height: var(--leading-relaxed);
  color: var(--ink-soft);
}

/* ── Closing ─────────────────────────────────────────────────────────── */
.closing {
  position: relative;
  border-radius: var(--radius-xl);
  padding: clamp(44px, 6vw, 76px) clamp(26px, 5vw, 64px);
  text-align: center;
  background: linear-gradient(135deg, var(--seal), var(--violet) 62%, var(--sky));
  color: var(--on-brand);
  overflow: hidden;
  box-shadow: 0 24px 60px var(--glow-a);
}
.closing h2 {
  font-size: clamp(1.6rem, 1.2rem + 1.8vw, 2.5rem);
  text-wrap: balance;
}
.closing p {
  margin: 16px auto 0;
  max-width: 54ch;
  line-height: var(--leading-relaxed);
  color: rgb(255 255 255 / 86%);
}
.closing .hero-actions {
  margin-top: 30px;
}
.closing .btn-primary {
  background: rgb(255 255 255);
  color: var(--seal);
  box-shadow: 0 8px 24px rgb(0 0 0 / 18%);
}
.closing .btn-quiet {
  background: transparent;
  color: var(--on-brand);
  border-color: rgb(255 255 255 / 48%);
}
.closing .btn-quiet:hover {
  background: rgb(255 255 255 / 14%);
  border-color: rgb(255 255 255);
  color: var(--on-brand);
}

/* ── Footer ──────────────────────────────────────────────────────────── */
.site-footer {
  border-top: 1px solid var(--rule);
  padding-block: 52px 56px;
  margin-top: var(--section-gap);
}
.footer-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 28px 48px;
  align-items: flex-start;
  justify-content: space-between;
}
.footer-grid p {
  margin-top: 12px;
  max-width: 44ch;
  font-size: 0.9375rem;
  line-height: var(--leading-relaxed);
  color: var(--ink-soft);
}
.footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 28px;
}
.footer-links a {
  color: var(--ink-soft);
  text-decoration: none;
  font-size: 0.9375rem;
  transition: color var(--duration-fast) var(--ease);
}
.footer-links a:hover {
  color: var(--violet);
}
.footer-base {
  margin-top: 40px;
  padding-top: 24px;
  border-top: 1px solid var(--rule);
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
  justify-content: space-between;
  font-size: 0.875rem;
  color: var(--ink-faint);
}

/* ── Entrance ────────────────────────────────────────────────────────────
 * **Everything above is the finished page.** The rules below are the only
 * ones that hide anything; they apply only to elements the script has marked,
 * and only where the reader has not asked for less motion. Switch either off
 * and the page is complete and still.
 */
@media (prefers-reduced-motion: no-preference) {
  .js [data-rise] {
    opacity: 0;
    translate: 0 22px;
  }
  .js [data-rise="left"] {
    translate: -26px 0;
  }
  .js [data-rise="right"] {
    translate: 26px 0;
  }
  .js [data-rise="zoom"] {
    translate: 0 0;
    scale: 0.965;
  }
  .js [data-rise].is-in {
    opacity: 1;
    translate: 0 0;
    scale: 1;
    transition: opacity var(--duration-slow) var(--ease),
      translate var(--duration-slow) var(--ease),
      scale var(--duration-slow) var(--ease);
    transition-delay: var(--rise-delay, 0ms);
  }

  /* The marked phrase is drawn under the words once they have arrived. */
  .js .hero h1 .mark-line::before {
    scale: 0 1;
  }
  .js .hero h1.is-in .mark-line::before {
    scale: 1 1;
    transition: scale 620ms var(--ease) 420ms;
  }

  /* **The mark is filled now, so a dash has nothing to shorten.** It was four
     strokes and a ring until 2026-10-20 and drew itself in along its own
     lines; it is six closed contours under the even-odd rule, where the gaps
     between the ridges are holes rather than background, and a dash offset
     applied to that does nothing at all — the mark simply appeared, whole,
     while the rest of the page still animated.

     So the ridges arrive instead of drawing, outermost first, which is the
     order they are written in and the order the eye follows them. `--i` is
     written onto each child by the page's script in document order, so the
     queue needs nothing added to it. The rail does the same thing through
     `motion-settle`. */
  .js .mark-draw path {
    opacity: 0;
    scale: 0.86;
    transform-box: fill-box;
    transform-origin: center;
  }
  .js .mark-draw.is-in path {
    opacity: 1;
    scale: 1;
    transition: opacity 420ms var(--ease), scale 420ms var(--ease);
    transition-delay: calc(var(--i, 0) * 80ms + 120ms);
  }
}

/* **Printing, and anything else that does not scroll.** A printer, a PDF
 * export, a reader mode and a full-page screenshot never scroll, so without
 * this they capture a hero above a column of empty rectangles. */
@media print {
  .js [data-rise],
  .js .mark-draw path,
  /* **The marked phrase, which was missing from every printed copy.** It is
     held at `scale: 0 1` until the script reveals it, and this list did not
     name it — so the heading's band simply was not there on paper, in a PDF
     or in a reader mode, and nothing said so. Found while building the card
     that gets shared into WhatsApp, which has the same problem for the same
     reason: no script runs, so nothing is ever revealed. */
  .js .hero h1 .mark-line::before {
    opacity: 1 !important;
    translate: 0 !important;
    scale: 1 !important;
    stroke-dashoffset: 0 !important;
  }
}

/* --- A page of text, which this site otherwise has none of ---------------
   The landing page is sections and cards; a policy is prose somebody reads
   top to bottom. Narrow enough to read, and two markers that exist so a
   draft cannot be mistaken for a finished document: one for the page, one
   for each unanswered paragraph inside it. Both go when a lawyer has
   answered, and the page is styled exactly like the rest of the site
   otherwise — a policy that looks like an afterthought reads like one. */
.legal {
  max-width: 44rem;
  padding-block: 1rem 2rem;
}
.legal h1 {
  font-size: clamp(1.9rem, 1.4rem + 1.8vw, 2.6rem);
  line-height: 1.25;
  margin-block: 0 0.75rem;
}
.legal h2 {
  font-size: 1.25rem;
  line-height: 1.4;
  margin-block: 2.25rem 0.6rem;
}
.legal p,
.legal li {
  line-height: 1.9;
  color: var(--ink-soft, inherit);
}
.legal ul {
  margin-block: 0.5rem 1rem;
  padding-inline-start: 1.25rem;
}
.legal li {
  margin-block-end: 0.5rem;
}
.legal-lede {
  font-size: 1.08rem;
  margin-block-end: 1.5rem;
}
.legal-draft {
  border: 1px solid #b45309;
  background: #fffbeb;
  color: #7c2d12;
  border-radius: 0.5rem;
  padding: 0.9rem 1rem;
  margin-block-end: 2rem;
  line-height: 1.8;
}
.legal-gap {
  border-inline-start: 3px solid #b45309;
  padding-inline-start: 0.9rem;
  margin-block: 1rem;
}
@media (prefers-color-scheme: dark) {
  .legal-draft {
    background: #2a1a05;
    border-color: #a16207;
    color: #fde68a;
  }
}