/* Hallmark · genre: modern-minimal · macrostructure: Marquee Hero over Long Document
 * theme: custom (YOo steel blue) · nav: N1b · footer: Ft4 dense colophon
 * Every colour and font references a token — no inline values.
 * Layout is written in logical properties, so the Arabic pages mirror from dir="rtl" alone.
 * There is no JavaScript on any page.
 */
@import url("tokens.css");

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

html, body {
  margin: 0;
  padding: 0;
  overflow-x: clip;              /* clip, never hidden — hidden makes a scroll container */
}
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  background: var(--color-paper);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-body);
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
}

/* Arabic takes the Plex Arabic face throughout, at both weights, with more leading. */
:lang(ar) body, :lang(ar) h1, :lang(ar) h2, :lang(ar) h3,
:lang(ar) .masthead__word, :lang(ar) .btn { font-family: var(--font-arabic); }
:lang(ar) { line-height: 1.85; }

h1, h2, h3 {
  font-family: var(--font-display);
  font-style: normal;            /* headings are always roman */
  overflow-wrap: anywhere;
  min-width: 0;
  margin: 0;
}

a { color: inherit; text-underline-offset: 0.16em; }
a:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
  transition: none;              /* the ring must appear instantly */
}

.skip {
  position: absolute; inset-inline-start: -9999px; top: var(--space-xs); z-index: 20;
  background: var(--color-paper); color: var(--color-ink);
  padding: var(--space-xs) var(--space-md);
  border: var(--rule-hair) solid var(--color-ink); border-radius: var(--radius-sm);
}
.skip:focus { inset-inline-start: var(--space-md); }

.wrap { max-width: var(--measure-wide); margin-inline: auto; padding-inline: var(--space-lg); }

/* Masthead · N1b --------------------------------------------------------- */
.masthead { border-block-end: var(--rule-hair) solid var(--color-rule); background: var(--color-paper); }
.masthead__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-md); flex-wrap: wrap;
  padding-block: var(--space-md);
}
.masthead__word {
  display: inline-flex; align-items: center; gap: var(--space-xs);
  font-family: var(--font-display); font-weight: 800; font-size: var(--text-xl);
  letter-spacing: -0.03em; text-decoration: none; white-space: nowrap;
}
.masthead__word img { display: block; width: 30px; height: 30px; border-radius: 7px; }
.masthead__meta { display: flex; align-items: center; gap: var(--space-lg); font-size: var(--text-sm); }
.masthead__meta a { white-space: nowrap; text-decoration: none; color: var(--color-ink-2); }
.masthead__meta a:hover { color: var(--color-accent); }

/* Hero · the deep band --------------------------------------------------- */
.hero {
  position: relative;
  isolation: isolate;
  background:
    radial-gradient(90ch 60ch at 15% -10%, oklch(38% 0.085 250 / 0.55), transparent 65%),
    linear-gradient(168deg, var(--color-deep), var(--color-deep-2));
  color: var(--color-on-deep);
  overflow: clip;
}
/* A hairline of light along the top edge — the detail that reads as "made". */
.hero::before {
  content: ""; position: absolute; inset-block-start: 0; inset-inline: 0; height: 1px;
  background: linear-gradient(90deg, transparent, oklch(80% 0.06 250 / 0.35), transparent);
}
.hero__inner {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-2xl);
  align-items: center;
  padding-block: var(--space-4xl);
}
@media (min-width: 56rem) {
  .hero__inner { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); }
}

.hero h1 {
  font-weight: 800;
  font-size: clamp(var(--text-3xl), 6.4vw, var(--text-display));
  line-height: var(--leading-tight);
  letter-spacing: -0.035em;
  margin-block-end: var(--space-lg);
  text-wrap: balance;
}
:lang(ar) .hero h1 { letter-spacing: 0; line-height: 1.25; }
.hero__lede {
  font-size: var(--text-lg); line-height: 1.6; color: var(--color-on-deep-2);
  max-width: 46ch; margin-block: 0 var(--space-xl);
}
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-sm); }

/* The mark, lifted off a soft bloom of its own colour. */
.hero__art { position: relative; display: grid; place-items: center; min-height: 0; }
.hero__art::before {
  content: ""; position: absolute; inline-size: 118%; block-size: 118%;
  background: radial-gradient(circle, oklch(60% 0.11 248 / 0.42), transparent 62%);
  z-index: -1;
}
.hero__art img {
  inline-size: clamp(128px, 30vw, 232px); block-size: auto;
  border-radius: 26%;
  box-shadow: var(--shadow-lift);
}

/* Buttons ---------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0.7rem 1.35rem; border-radius: var(--radius-md);
  font-family: var(--font-display); font-weight: 700; font-size: var(--text-sm);
  letter-spacing: -0.005em; text-decoration: none; white-space: nowrap;
  border: var(--rule-hair) solid transparent; cursor: pointer;
  transition: transform var(--dur-fast) var(--ease-out),
              background-color var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out);
}
.btn--primary { background: var(--color-on-deep); color: var(--color-deep-2); }
.btn--primary:hover { background: #fff; transform: translateY(-1px); }
.btn--primary:active { transform: translateY(0); }
.btn--ghost { color: var(--color-on-deep); border-color: var(--color-deep-rule); background: oklch(60% 0.05 250 / 0.10); }
.btn--ghost:hover { border-color: var(--color-on-deep-2); background: oklch(60% 0.05 250 / 0.18); }
.btn--ghost:active { transform: translateY(1px); }
.btn--on-paper { background: var(--color-accent); color: var(--color-paper); }
.btn--on-paper:hover { background: var(--color-accent-hover); transform: translateY(-1px); }
.btn--on-paper:active { transform: translateY(0); }
.btn:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; transition: none; }
.btn[aria-disabled="true"] { opacity: 0.55; pointer-events: none; }
@media (prefers-reduced-motion: reduce) { .btn, a { transition: none; } .btn:hover { transform: none; } }

/* One quiet entrance, hero only. */
@media (prefers-reduced-motion: no-preference) {
  .hero__inner > * { animation: rise var(--dur-slow) var(--ease-out) both; }
  .hero__art { animation-delay: 90ms; }
}
@keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* Document --------------------------------------------------------------- */
.doc { max-width: var(--measure); margin-inline: auto; padding: var(--space-3xl) var(--space-lg) var(--space-4xl); }
.doc--wide { max-width: var(--measure-wide); }

.doc h1 {
  font-weight: 800; font-size: clamp(var(--text-3xl), 6vw, var(--text-display-s));
  line-height: 1.1; letter-spacing: -0.032em; margin-block-end: var(--space-lg);
}
.doc__dateline {
  font-size: var(--text-xs); letter-spacing: 0.09em; text-transform: uppercase;
  color: var(--color-ink-3); margin-block-end: var(--space-sm); font-weight: 600;
}
:lang(ar) .doc__dateline { letter-spacing: 0; text-transform: none; font-size: var(--text-sm); }
.lede { font-size: var(--text-lg); line-height: 1.6; color: var(--color-ink-2); margin-block: 0 var(--space-xl); }

h2 {
  font-weight: 700; font-size: var(--text-2xl); line-height: var(--leading-snug);
  letter-spacing: -0.025em; margin-block: var(--space-3xl) var(--space-md);
}
h3 {
  font-weight: 700; font-size: var(--text-lg); line-height: var(--leading-snug);
  letter-spacing: -0.015em; margin-block: var(--space-xl) var(--space-xs);
}
h2 + p, h3 + p, h2 + .table-scroll { margin-block-start: 0; }
p { margin-block: 0 var(--space-md); }
p:last-child { margin-block-end: 0; }
ul, ol { margin-block: 0 var(--space-md); padding-inline-start: var(--space-lg); }
li { margin-block-end: var(--space-xs); }
li::marker { color: var(--color-ink-3); }
strong { font-weight: 600; }
code, .mono { font-family: var(--font-mono); font-size: 0.9em; overflow-wrap: anywhere; }

a.inline, .doc p a, .doc li a { color: var(--color-accent); text-decoration-thickness: 1px; }
.doc p a:hover, .doc li a:hover { color: var(--color-accent-hover); }

/* Panel — for the honest-summary blocks. A surface with an accent edge, not a card in a card. */
.panel {
  background: var(--color-paper-2);
  border: var(--rule-hair) solid var(--color-rule);
  border-inline-start: 3px solid var(--color-brand);
  border-radius: var(--radius-md);
  padding: var(--space-lg);
  margin-block: var(--space-xl);
  box-shadow: var(--shadow-sm);
}
.panel > :last-child { margin-block-end: 0; }
.panel h2, .panel h3 { margin-block: 0 var(--space-sm); font-size: var(--text-lg); }

/* Numbered points — genuinely ordinal, so the numerals earn their place. */
.points { list-style: none; padding-inline-start: 0; counter-reset: pt; margin-block: var(--space-lg) 0; }
.points > li {
  counter-increment: pt; position: relative;
  padding-inline-start: 2.6rem; padding-block: var(--space-sm) var(--space-md);
  border-block-start: var(--rule-hair) solid var(--color-rule);
}
.points > li:first-child { border-block-start: none; }
.points > li::before {
  content: counter(pt);
  position: absolute; inset-inline-start: 0; inset-block-start: var(--space-sm);
  inline-size: 1.75rem; block-size: 1.75rem; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--color-brand); color: oklch(99% 0 0);
  font-family: var(--font-display); font-weight: 700; font-size: var(--text-xs);
  line-height: 1;
}

/* Tables — scroll inside their own container, never the page. */
.table-scroll { overflow-x: auto; margin-block: var(--space-lg); }
table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); min-width: 34ch; }
th, td {
  text-align: start; vertical-align: top;
  padding: var(--space-sm) var(--space-md) var(--space-sm) 0;
  border-block-end: var(--rule-hair) solid var(--color-rule);
}
:lang(ar) th, :lang(ar) td { padding: var(--space-sm) 0 var(--space-sm) var(--space-md); }
thead th {
  font-weight: 700; font-size: var(--text-xs); letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--color-ink-3); border-block-end: var(--rule-hair) solid var(--color-rule-strong);
}
:lang(ar) thead th { letter-spacing: 0; text-transform: none; font-size: var(--text-sm); }

/* Store rows on /install — hairline-separated, not icon tiles. */
.get { display: grid; grid-template-columns: minmax(0, 1fr); margin-block: var(--space-lg); }
.get__row {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: var(--space-sm); padding-block: var(--space-md);
  border-block-start: var(--rule-hair) solid var(--color-rule);
}
.get__row:last-child { border-block-end: var(--rule-hair) solid var(--color-rule); }
.get__what { font-weight: 600; }
.get__note { font-size: var(--text-sm); color: var(--color-ink-2); }

/* Colophon · Ft4 — deep, bookending the hero. --------------------------- */
.colophon { background: var(--color-deep-2); color: var(--color-on-deep-2); }
.colophon__inner {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-xl);
  padding-block: var(--space-2xl) var(--space-xl);
}
@media (min-width: 40rem) { .colophon__inner { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.colophon h2 {
  font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--color-on-deep); margin-block: 0 var(--space-sm);
}
:lang(ar) .colophon h2 { letter-spacing: 0; text-transform: none; font-size: var(--text-sm); }
.colophon ul { list-style: none; padding-inline-start: 0; margin: 0; }
.colophon li { margin-block-end: var(--space-xs); }
.colophon a { white-space: nowrap; text-decoration: none; }
.colophon a:hover { color: var(--color-on-deep); text-decoration: underline; }
.colophon address { font-style: normal; font-size: var(--text-sm); line-height: 1.65; }
.colophon__legal {
  padding-block: var(--space-lg) var(--space-2xl);
  border-block-start: var(--rule-hair) solid var(--color-deep-rule);
  font-size: var(--text-xs); line-height: 1.6;
}
.colophon__legal p { margin-block-end: var(--space-xs); }

@media print {
  .masthead__meta, .skip, .hero__art, .hero__actions { display: none; }
  .hero { background: none; color: #000; }
  body { background: #fff; color: #000; font-size: 11pt; }
  .doc { padding: 0; max-width: none; }
  .colophon { background: none; color: #000; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; color: #444; }
}