/* Page layout on top of the QBS Labs Design System (design-system/).
   Load after fonts.css, tokens.css and components/bundle.css. Tokens only: no raw hex or px sizes. */

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg-page); color: var(--text-primary);
  font-family: var(--font-arabic); text-wrap: pretty;
}
h1, h2, h3 { margin: 0; text-wrap: balance; }
p { margin: 0; }
a { color: var(--text-link); }
:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.wrap { max-width: var(--container-prose); margin-inline: auto; padding-inline: var(--gutter-mobile); }
@media (min-width: 768px) { .wrap { padding-inline: var(--gutter-desktop); } }
.secondary { color: var(--text-secondary); }

/* Hero: ink band with the one allowed gradient, a single radial brand light. */
.hero {
  background:
    radial-gradient(70% 90% at 100% 0%, color-mix(in oklab, var(--brand) 38%, transparent), transparent 70%),
    var(--ink);
  /* The hero is always ink, so it takes the dark theme's text roles (values from tokens.css). */
  --text-primary: var(--ash-50); --text-secondary: var(--ash-300); --text-accent: var(--ember-300);
  color: var(--text-primary);
  padding-block: var(--space-8) var(--space-12);
  border-block-end: 1px solid var(--border-subtle);
}
.hero .logo { display: block; height: var(--space-8); width: auto; margin-block-end: var(--space-12); }
.hero .kicker { color: var(--text-accent); margin-block-end: var(--space-3); }
.hero h1 { margin-block-end: var(--space-2); }
.hero .lede { color: var(--text-secondary); }

main.wrap { display: grid; gap: var(--space-12); padding-block: var(--space-10) var(--space-16); }
section { display: grid; gap: var(--space-4); }
.actions { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.actions .qbs-btn { flex: 1 1 auto; }

/* Numbered steps (proposed addition: built from tokens, no DS component covers it). */
.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); counter-reset: step; }
.steps li { counter-increment: step; display: grid; grid-template-columns: var(--space-8) 1fr; gap: var(--space-3); align-items: start; }
.steps li::before {
  content: counter(step); display: grid; place-items: center;
  width: var(--space-8); height: var(--space-8); border-radius: var(--radius-full);
  background: var(--accent-subtle); color: var(--text-accent);
  font: 500 13px/20px var(--font-mono); font-variant-numeric: tabular-nums;
}
.steps .note { display: block; color: var(--text-tertiary); }

footer.wrap {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-4);
  padding-block: var(--space-8); border-block-start: 1px solid var(--border-subtle); color: var(--text-tertiary);
}
footer .symbol { height: var(--space-6); width: auto; }

@media (prefers-reduced-motion: reduce) { * { transition-duration: 0ms !important; } }