/* Readyo · base: reset, type, buttons, floating cards, CSS phone shape.
 * Other concerns: chrome.css (dock, tour dialog, footer), hero.css, sections.css, legal.css, motion.css.
 * Hidden start states live only in motion.css and only apply under html.js. */

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html {
  overflow-x: clip;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  background: var(--color-page);
}
body {
  overflow-x: clip;
  margin: 0;
  min-height: 100vh;
  background:
    radial-gradient(90rem 40rem at 20% -10%, var(--color-page-2), transparent 70%),
    var(--color-page);
  color: var(--color-text);
  font-family: var(--font-body);
  font-weight: 500;
  font-size: var(--text-base);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, video, svg, picture { display: block; max-width: 100%; }
img, video { height: auto; }
h1, h2, h3, p, ul, ol, dl, dd, figure { margin: 0; }
ul[class], ol[class] { list-style: none; padding: 0; }
b, strong { font-weight: 700; }
a { color: var(--color-link-dark); text-underline-offset: 0.18em; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; border-radius: var(--radius-sm); }
.card--light :focus-visible, .doc :focus-visible { outline-color: var(--color-focus-light); }
.card--light a, .doc a { color: var(--color-ink); text-decoration-color: var(--color-purple); text-decoration-thickness: 2px; }
[lang="ar"], [dir="rtl"] { font-family: var(--font-arabic); }
::selection { background: var(--color-lime); color: var(--color-ink); }

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.skip {
  position: absolute; left: var(--space-md); top: var(--space-md); z-index: var(--z-sticky);
  padding: var(--space-xs) var(--space-md); border-radius: var(--radius-pill);
  background: var(--color-lime); color: var(--color-ink); font-weight: 700; text-decoration: none;
  transform: translateY(-200%);
}
.skip:focus-visible { transform: none; }

.wrap { width: min(100% - 2 * var(--page-gutter), var(--page-max)); margin-inline: auto; }
.page { width: min(100% - 2 * var(--page-gutter), var(--page-max)); margin: var(--page-gutter) auto 0; }
main { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--card-gap); }

/* ---------- Type ---------- */
.display, .title, .subtitle {
  font-weight: 500;
  font-style: normal;
  min-width: 0;
  overflow-wrap: break-word;
}
.display {
  font-size: var(--text-display);
  line-height: 0.92;
  letter-spacing: -0.055em;
}
.title {
  font-size: var(--text-xl);
  line-height: 1.08;
  letter-spacing: -0.035em;
  text-wrap: balance;
}
.title b, .display b { font-weight: 500; }
.card--dark .title b, .display b, .doc-head .title b, .cta .title b { color: var(--color-lime); }
.card--light .title b { color: var(--color-ink); background: linear-gradient(transparent 62%, var(--color-lime) 62% 94%, transparent 94%); }
.eyebrow {
  font-size: var(--text-sm);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-bottom: var(--space-md);
}
.lede { font-size: var(--text-md); line-height: 1.55; color: var(--color-text-muted); max-width: 36ch; }
.body { max-width: 56ch; color: var(--color-text-muted); }
.small { font-size: var(--text-sm); line-height: 1.55; color: var(--color-text-muted); }
.fineprint { font-size: var(--text-sm); line-height: 1.55; color: var(--color-text-muted); max-width: 70ch; }
.card--light .eyebrow, .card--light .body, .card--light .small, .card--light .fineprint, .card--light .lede { color: var(--color-ink-muted); }
.card--light .title { color: var(--color-ink); }

/* ---------- Brand, buttons, badge ---------- */
.brand {
  display: inline-flex; align-items: center; gap: var(--space-xs);
  color: var(--color-text); text-decoration: none;
  font-weight: 800; font-size: var(--text-lg); letter-spacing: -0.03em;
  white-space: nowrap; min-height: 44px;
}
.brand__mark { width: 1.75rem; height: auto; overflow: visible; }
.brand__mark rect { fill: currentColor; }
.brand__mark circle { fill: var(--color-lavender); }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-xs);
  min-height: 48px; padding: 0 1.5rem;
  border-radius: 0.875rem;
  border: 1px solid transparent;
  font: inherit; font-weight: 700; font-size: 0.95rem; line-height: 1;
  text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: transform var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.btn:hover { transform: translateY(-2px); text-decoration: none; }
.btn--sm { min-height: 44px; padding: 0 1.25rem; font-size: 0.9rem; }
.btn--lime { background: var(--color-lime); color: var(--color-ink); }
.btn--light { background: #fff; color: var(--color-ink); }
.btn--lavender { background: var(--color-lime); color: var(--color-ink); }
.btn--outline { border-color: var(--color-line-strong); color: var(--color-text); }
.btn--outline:hover { border-color: rgb(255 255 255 / 0.5); }
a.btn--lime, a.btn--light, a.btn--lavender { color: var(--color-ink); }

.store-badge { display: inline-block; border-radius: 0.75rem; transition: transform var(--dur-fast) var(--ease); }
.store-badge:hover { transform: translateY(-2px); }
.store-badge img { width: 156px; height: 52px; }
.store-badge--sm img { width: 132px; height: 44px; }

/* ---------- Cards ---------- */
.card {
  position: relative;
  isolation: isolate;
  overflow: clip;
  border-radius: var(--radius-card);
}
.card--dark { background: var(--color-card); color: var(--color-text); }
.card--light { background: var(--color-sheet); color: var(--color-ink); padding: clamp(2rem, 5vw, 4.5rem) var(--card-pad); }
.card:not(.card--top).card--dark { padding: clamp(2rem, 5vw, 4.5rem) var(--card-pad); }

.lines {
  position: absolute; inset: 0; z-index: -1;
  width: 100%; height: 100%;
  fill: none; stroke: var(--color-line); stroke-width: 1;
  pointer-events: none;
}
.lines--ink { stroke: rgb(6 3 79 / 0.22); z-index: 0; }
.card--top > .lines { top: 52%; height: 48%; }

.burst { fill: #fff; pointer-events: none; height: auto; aspect-ratio: 1; }

/* ---------- Phone shape (CSS frame around a real screenshot) ---------- */
.phone {
  --pw: 16rem;
  position: relative;
  width: var(--pw);
  aspect-ratio: 800 / 1738;
  padding: calc(var(--pw) * 0.03);
  border-radius: calc(var(--pw) * 0.155);
  background: #0c0c0f;
  box-shadow:
    0 0 0 1.5px #55535f,
    inset 0 0 0 1px #2c2b33,
    0 2.5rem 4.5rem -2rem rgb(18 12 60 / 0.55);
  flex: none;
}
.phone::before, .phone::after {
  content: ""; position: absolute; width: 2px; border-radius: 2px; background: #55535f;
}
.phone::before { left: -3px; top: 22%; height: 9%; }
.phone::after { right: -3px; top: 28%; height: 14%; }
.phone picture, .phone img {
  width: 100%; height: 100%;
  border-radius: calc(var(--pw) * 0.125);
}
.phone img { object-fit: cover; object-position: top; background: #f6f4ff; }


@media (max-width: 40rem) {
  :root { --radius-card: 1.5rem; }
  .display { letter-spacing: -0.045em; }
  .store-badge img { width: 144px; height: 48px; }
}