/* Landing site. Colours, type, spacing and radius come only from tokens.css (generated from
   replica/design/tokens.json). Logical properties only (inline-start/end), so Arabic and
   English share one stylesheet. Text/background pairs are the ones contrast.py checks. */

/* Changa (SIL OFL 1.1, web/fonts/OFL-1.1-LICENSE.txt): headings, the hero and the Arabic companion only. */
@font-face { font-family: 'Changa'; font-weight: 600; font-display: swap; src: url('/fonts/Changa_600SemiBold.ttf') format('truetype'); }
@font-face { font-family: 'Changa'; font-weight: 700; font-display: swap; src: url('/fonts/Changa_700Bold.ttf') format('truetype'); }
@font-face { font-family: 'Changa'; font-weight: 800; font-display: swap; src: url('/fonts/Changa_800ExtraBold.ttf') format('truetype'); }

* { box-sizing: border-box; }
html { background: rgb(var(--color-bg)); }
body {
  margin: 0;
  color: rgb(var(--color-text));
  background: rgb(var(--color-bg));
  font-family: var(--font-sans);
  font-size: var(--type-base-size);
  line-height: var(--type-base-line);
  -webkit-text-size-adjust: 100%;
}
a { color: rgb(var(--color-accent-text)); }
a:focus-visible, summary:focus-visible { outline: 2px solid rgb(var(--color-focus)); outline-offset: 2px; }
img { max-width: 100%; height: auto; display: block; }

.top, main, .foot { max-width: 1040px; margin-inline: auto; padding-inline: var(--layout-gutter); }
.top { display: flex; justify-content: space-between; align-items: center; padding-block: var(--space-6); }
.brand { display: inline-flex; align-items: center; gap: var(--space-3); color: rgb(var(--color-text)); text-decoration: none; }
.wm { display: block; width: 122px; height: 28px; }
.wm-letter { fill: rgb(var(--color-text)); }
.wm-seven { fill: rgb(var(--color-accent)); }
.companion { font-family: var(--font-display); font-weight: 800; font-size: 28px; line-height: 1; color: rgb(var(--color-accent-text)); }
.lang { font-size: var(--type-sm-size); }

h1, h2, h3 { font-family: var(--font-display); }
h1 { font-size: var(--type-display-size); line-height: calc(var(--type-display-line) * 1.12); font-weight: 800; margin: 0 0 var(--space-5); }
h2 { font-size: var(--type-xl-size); line-height: calc(var(--type-xl-line) * 1.12); font-weight: var(--type-xl-weight); margin: 0 0 var(--space-6); }
h3 { font-size: var(--type-lg-size); line-height: calc(var(--type-lg-line) * 1.12); font-weight: var(--type-lg-weight); margin: 0 0 var(--space-3); }
p { margin: 0 0 var(--space-5); }
section { padding-block: var(--space-10); }

.hero { display: grid; gap: var(--space-9); align-items: center; padding-block-start: var(--space-7); }
.lead { font-size: var(--type-lg-size); line-height: var(--type-lg-line); color: rgb(var(--color-text-secondary)); }
.note, .small { font-size: var(--type-sm-size); line-height: var(--type-sm-line); color: rgb(var(--color-text-muted)); }
.shot, .shots img { border-radius: var(--radius-xl); border: 1px solid rgb(var(--color-border)); margin-inline: auto; max-width: 330px; width: 100%; }
.hero-art { display: flex; align-items: flex-end; justify-content: center; gap: var(--space-5); }
.hero-art .shot { margin-inline: 0; max-width: 260px; min-width: 0; flex: 1 1 auto; }
/* beside the screenshot on a phone: small enough that the pair fits a 375 px screen */
.nimr { width: 112px; height: auto; flex: none; }

.button {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: var(--layout-button-lg); padding-inline: var(--space-8);
  border-radius: var(--radius-md);
  background: rgb(var(--color-accent)); color: rgb(var(--color-on-accent));
  font-weight: 600; text-decoration: none; margin-block-end: var(--space-4);
}
.button-soon { background: rgb(var(--color-surface-raised)); color: rgb(var(--color-text)); }

.band { border-block: 1px solid rgb(var(--color-border-subtle)); }
.problem { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--space-5); font-size: var(--type-lg-size); line-height: var(--type-lg-line); }

.steps { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--space-5); counter-reset: step; }
.steps li { counter-increment: step; background: rgb(var(--color-surface)); border-radius: var(--radius-lg); padding: var(--space-6); }
.steps li::before { content: counter(step); display: inline-grid; place-items: center; width: var(--space-9); height: var(--space-9); border-radius: var(--radius-full); background: rgb(var(--color-accent)); color: rgb(var(--color-on-accent)); font-weight: 700; margin-block-end: var(--space-4); }
.steps p, .card p { color: rgb(var(--color-text-secondary)); margin: 0; }

.grid, .plans { display: grid; gap: var(--space-5); }
.card { background: rgb(var(--color-surface)); border: 1px solid rgb(var(--color-border)); border-radius: var(--radius-lg); padding: var(--space-6); }
.shots { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-5); margin-block: var(--space-8); }
.soon { color: rgb(var(--color-text-secondary)); }

.plan ul { padding-inline-start: var(--space-6); color: rgb(var(--color-text-secondary)); }
.plan-main { border-color: rgb(var(--color-accent)); }
.who { color: rgb(var(--color-text-muted)); margin-block-end: var(--space-3); }
.price { font-size: var(--type-xl-size); line-height: var(--type-xl-line); font-weight: 700; }

.faq details { border-block-end: 1px solid rgb(var(--color-border-subtle)); padding-block: var(--space-5); }
.faq summary { cursor: pointer; font-weight: 600; min-height: var(--layout-touch-min); display: flex; align-items: center; }
.faq details p { color: rgb(var(--color-text-secondary)); margin: var(--space-3) 0 0; }

.final { text-align: center; }
.doc { max-width: 720px; padding-block: var(--space-7) var(--space-10); }
.doc h2 { font-size: var(--type-lg-size); line-height: var(--type-lg-line); margin-block: var(--space-8) var(--space-3); }
.doc li, .doc p { color: rgb(var(--color-text-secondary)); }
.doc li { margin-block-end: var(--space-3); }
.doc pre { direction: ltr; text-align: left; overflow-x: auto; margin-block: var(--space-4) 0; padding: var(--space-5); border: 1px solid rgb(var(--color-border)); border-radius: var(--radius-md); background: rgb(var(--color-surface)); color: rgb(var(--color-text)); font: var(--type-sm-size)/var(--type-sm-line) var(--font-mono, ui-monospace, Menlo, monospace); }
.invite-code strong { display: inline-block; direction: ltr; font: 700 var(--type-xl-size)/var(--type-xl-line) var(--font-display); letter-spacing: 0.12em; color: rgb(var(--color-text)); }
.draft { background: rgb(var(--color-surface-raised)); color: rgb(var(--color-text)); border-radius: var(--radius-sm); padding: var(--space-4) var(--space-5); }

.foot { display: flex; flex-wrap: wrap; gap: var(--space-6); padding-block: var(--space-9); color: rgb(var(--color-text-muted)); font-size: var(--type-sm-size); border-block-start: 1px solid rgb(var(--color-border-subtle)); }

@media (min-width: 760px) {
  h1 { font-size: calc(var(--type-display-size) * 1.4); line-height: 1.2; }
  .hero { grid-template-columns: 1fr 1fr; }
  .nimr { width: 240px; }
  .grid { grid-template-columns: repeat(2, 1fr); }
  .steps, .plans { grid-template-columns: repeat(3, 1fr); }
  .plans { grid-template-columns: repeat(2, 1fr); }
}
@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto; } }

/* The explanation pages and the tour (plan-1.2 phase 13). */
.pages { max-width: 1040px; margin-inline: auto; padding-inline: var(--layout-gutter); display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-6); font-size: var(--type-sm-size); line-height: var(--type-sm-line); }
.pages a { color: rgb(var(--color-text-secondary)); text-decoration: none; min-height: var(--layout-touch-min); display: inline-flex; align-items: center; }
.pages a[aria-current="page"] { color: rgb(var(--color-text)); font-weight: 600; text-decoration: underline; text-decoration-color: rgb(var(--color-accent)); text-underline-offset: 6px; }
.page { padding-block: var(--space-7) var(--space-10); }
.page > .lead { max-width: 720px; }
.tag { display: inline-block; vertical-align: middle; font-family: var(--font-sans); font-size: var(--type-caption-size); line-height: var(--type-caption-line); font-weight: 600; padding: var(--space-1) var(--space-3); border-radius: var(--radius-sm); background: rgb(var(--color-surface-raised)); color: rgb(var(--color-text)); }
.feature { display: grid; gap: var(--space-7); padding-block: var(--space-9); border-block-start: 1px solid rgb(var(--color-border-subtle)); }
.feature-text p { color: rgb(var(--color-text-secondary)); }
.feature-art { display: grid; gap: var(--space-5); justify-items: center; }
.pair { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); width: 100%; max-width: 520px; }
.pair img, .clip { width: 100%; height: auto; border-radius: var(--radius-lg); border: 1px solid rgb(var(--color-border)); }
.pair-inline { margin-block: var(--space-6); }
.clip { max-width: 260px; background: rgb(var(--color-surface)); }
.program h2 { font-size: var(--type-lg-size); line-height: var(--type-lg-line); margin-block-end: var(--space-2); }
.program p { color: rgb(var(--color-text-secondary)); margin: 0; }
.program .who { margin-block-end: var(--space-3); }
.tour-list { padding-inline-start: var(--space-6); color: rgb(var(--color-text-secondary)); }
.tour-list li { margin-block-end: var(--space-2); }
.tour-step { display: grid; gap: var(--space-2); justify-items: start; }
.tour-step .shot { margin-inline: 0; max-width: 300px; margin-block: var(--space-4); }
.tour-nav { display: flex; align-items: center; gap: var(--space-6); width: 100%; max-width: 300px; justify-content: space-between; }
.tour-nav .button { margin: 0; }
.tour-nav a:not(.button) { min-height: var(--layout-touch-min); display: inline-flex; align-items: center; }

@media (min-width: 760px) {
  .feature { grid-template-columns: 1fr 1fr; align-items: start; }
  .feature:nth-of-type(even) .feature-art { order: -1; }
}

/* The landing page's sections (2026-10-14): promises, the tour strip, linked cards, the Q&A preview. */
.promises { list-style: none; padding: 0; margin: 0 0 var(--space-7); display: flex; flex-wrap: wrap; gap: var(--space-3); }
.promises li { font-size: var(--type-sm-size); line-height: var(--type-sm-line); font-weight: 600; padding: var(--space-2) var(--space-4); border-radius: var(--radius-full); border: 1px solid rgb(var(--color-border)); color: rgb(var(--color-text)); }
.promises li::before { content: '✓'; color: rgb(var(--color-accent-text)); margin-inline-end: var(--space-2); }
.band > .lead, section > .lead { max-width: 720px; }
.card-link { display: block; color: rgb(var(--color-text)); text-decoration: none; }
.card-link:hover { border-color: rgb(var(--color-accent)); }
.card-link:focus-visible { outline: 2px solid rgb(var(--color-focus)); outline-offset: 2px; }
.card .card-tag { margin-block-start: var(--space-4); }
.more { margin-block-start: var(--space-7); font-weight: 600; }
.strip { list-style: none; padding: 0; margin: 0 0 var(--space-8); display: grid; grid-auto-flow: column; grid-auto-columns: minmax(200px, 1fr); gap: var(--space-5); overflow-x: auto; scroll-snap-type: x mandatory; padding-block-end: var(--space-3); }
.strip li { scroll-snap-align: start; }
.strip a { display: grid; gap: var(--space-2); color: rgb(var(--color-text)); text-decoration: none; }
.strip img { border-radius: var(--radius-lg); border: 1px solid rgb(var(--color-border)); margin-block-end: var(--space-3); }
.strip a:hover img { border-color: rgb(var(--color-accent)); }
.strip-h { font-family: var(--font-display); font-weight: 700; font-size: var(--type-lg-size); line-height: var(--type-lg-line); }
.strip-p { color: rgb(var(--color-text-secondary)); font-size: var(--type-sm-size); line-height: var(--type-sm-line); }
.faq-group { padding-block: var(--space-7) 0; }
.faq-group h2 { font-size: var(--type-lg-size); line-height: var(--type-lg-line); margin-block-end: var(--space-2); }
.page .button { margin-block-start: var(--space-8); }

@media (min-width: 760px) {
  .grid-3 { grid-template-columns: repeat(3, 1fr); }
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1000px) {
  .grid-4 { grid-template-columns: repeat(4, 1fr); }
}