/* nabrief public page (nabrief.com). One stylesheet for /, /ar/ and 404.html.
 * Self-hosted, unmodified IBM Plex fonts (OFL, licences beside them), two
 * weights per script: 400 and 600.
 * No inline styles or scripts anywhere, so the page runs under a strict
 * Content Security Policy (style-src 'self', no script-src).
 * Colours: the brand's Shared Line tokens.
 * Brand rules: no lime text on light surfaces; no letter spacing in Arabic
 * (the :lang(ar) rule below); the symbol is never mirrored
 * (only .arrow flips in right-to-left); logical properties, so the Arabic
 * page needs no left/right overrides (one deliberate exception: the FAQ
 * chevron, whose rotation is physical). */

@font-face { font-family: "IBM Plex Sans"; src: url("/assets/fonts/IBMPlexSans-Regular.woff2") format("woff2"); font-style: normal; font-weight: 400; font-display: swap; }
@font-face { font-family: "IBM Plex Sans"; src: url("/assets/fonts/IBMPlexSans-SemiBold.woff2") format("woff2"); font-style: normal; font-weight: 600; font-display: swap; }
@font-face { font-family: "IBM Plex Sans Arabic"; src: url("/assets/fonts/IBMPlexSansArabic-Regular.woff2") format("woff2"); font-style: normal; font-weight: 400; font-display: swap; }
@font-face { font-family: "IBM Plex Sans Arabic"; src: url("/assets/fonts/IBMPlexSansArabic-SemiBold.woff2") format("woff2"); font-style: normal; font-weight: 600; font-display: swap; }

:root {
  color-scheme: light dark;
  --forest: #102E2A;
  --lime: #D8F36A;
  --ivory: #F7F8F2;

  --canvas: #F7F8F2;
  --surface: #FFFFFF;
  --raised: #EFF3E8;
  --text: #102E2A;
  --muted: #52655E;
  --link: #285F50;
  --border: #DDE5D8;
  --control: #657A70;
  --selected: #E5EDCC;
  --btn-bg: #102E2A;
  --btn-text: #F7F8F2;
  --btn-hover: #1D4A42;
  --mark: #D8F36A;
  --mark-text: #102E2A;
  --band: #102E2A;
  --band-text: #F7F8F2;
  --band-accent: #D8F36A;
  --note-bg: #FFF1D1;
  --note-text: #785214;
  --note-border: #E8D3A0;
  --ok: #2E5D3C;
  --focus-inner: #F7F8F2;
  --focus-outer: #102E2A;
  --header-bg: rgba(247, 248, 242, 0.92);
  --shadow-sm: 0 1px 2px rgba(16, 46, 42, 0.06);
  --shadow: 0 1px 2px rgba(16, 46, 42, 0.06), 0 18px 40px -18px rgba(16, 46, 42, 0.28);
  --ribbon-forest-1: #0B231F;
  --ribbon-forest-2: #24564C;
  --ribbon-lime-1: #BBD94A;
  --ribbon-lime-2: #ECFBA8;

  --font-latin: "IBM Plex Sans", "IBM Plex Sans Arabic", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-arabic: "IBM Plex Sans Arabic", "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Tahoma, sans-serif;
  --font: var(--font-latin);
  --lh: 1.6;
  --lh-head: 1.15;
  --track-head: -0.02em;
  --track-label: 0.12em;

  --radius: 14px;
  --radius-sm: 10px;
  --gutter: clamp(16px, 4vw, 40px);
  --section: clamp(64px, 9vw, 120px);
  --header-h: 68px;
  /* The sticky header's full height: two rows (logo and buttons, then the
   * section links) below 1080px, one row from 1080px. */
  --sticky-h: 104px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --canvas: #0B1D1A;
    --surface: #102E2A;
    --raised: #173D35;
    --text: #F7F8F2;
    --muted: #BCCFC4;
    --link: #D8F36A;
    --border: #34554A;
    --control: #718D84;
    --selected: #294B3B;
    --btn-bg: #D8F36A;
    --btn-text: #102E2A;
    --btn-hover: #E4FA94;
    --mark: #D8F36A;
    --mark-text: #102E2A;
    --band: #173D35;
    --band-text: #F7F8F2;
    --band-accent: #D8F36A;
    --note-bg: #403321;
    --note-text: #F4D38A;
    --note-border: #5C4A2C;
    --ok: #B8DDA4;
    --focus-inner: #102E2A;
    --focus-outer: #F7F8F2;
    --header-bg: rgba(11, 29, 26, 0.9);
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
    --shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 18px 40px -18px rgba(0, 0, 0, 0.6);
    --ribbon-forest-1: #0F2B26;
    --ribbon-forest-2: #2F6A5D;
  }
}

:lang(ar) {
  --font: var(--font-arabic);
  --lh: 1.8;
  --lh-head: 1.45;
  --track-head: 0;
  --track-label: 0;
}
/* Brand rule: never add letter spacing to Arabic. Matches every element whose
 * language is Arabic, whatever class set a spacing on it. */
:lang(ar) { letter-spacing: 0 !important; }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: calc(var(--sticky-h) + 12px); }
body {
  margin: 0;
  background: var(--canvas);
  color: var(--text);
  font-family: var(--font);
  font-size: 1.0625rem;
  line-height: var(--lh);
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
[lang="ar"] { font-family: var(--font-arabic); }
[lang="en"] { font-family: var(--font-latin); }
:lang(ar) [lang="en"] { line-height: inherit; }

img, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: var(--link); text-underline-offset: 0.18em; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
p { margin: 0 0 1em; }
h1, h2, h3, h4 { margin: 0; line-height: var(--lh-head); letter-spacing: var(--track-head); font-weight: 600; }
ul, ol { margin: 0; padding: 0; }
strong { font-weight: 600; }
code, kbd { font-family: inherit; font-weight: 600; }
q { quotes: "\201C" "\201D"; }
:lang(ar) q { quotes: "\00AB" "\00BB"; }

:focus-visible {
  outline: 2px solid transparent;
  outline-offset: 4px;
  box-shadow: 0 0 0 2px var(--focus-inner), 0 0 0 4px var(--focus-outer);
  border-radius: 6px;
}
@media (forced-colors: active) {
  :focus-visible { outline: 2px solid Highlight; outline-offset: 3px; box-shadow: none; }
}

.visually-hidden {
  position: absolute !important;
  inline-size: 1px; block-size: 1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
  white-space: nowrap; margin: -1px; padding: 0; border: 0;
}
.skip {
  position: absolute;
  inset-inline-start: 12px;
  inset-block-start: -100px;
  z-index: 100;
  padding: 10px 16px;
  background: var(--btn-bg);
  color: var(--btn-text);
  border-radius: var(--radius-sm);
  font-weight: 600;
  text-decoration: none;
}
.skip:focus { inset-block-start: 12px; }

.sprite { position: absolute; inline-size: 0; block-size: 0; overflow: hidden; }

.wrap { inline-size: 100%; max-inline-size: 1200px; margin-inline: auto; padding-inline: var(--gutter); }

/* ---------- Buttons and small parts ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-block-size: 44px;
  padding: 10px 20px;
  border-radius: 12px;
  border: 1px solid transparent;
  font: inherit;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}
.btn-primary { background: var(--btn-bg); color: var(--btn-text); }
.btn-primary:hover { background: var(--btn-hover); }
.btn-quiet { color: var(--text); border-color: var(--control); background: transparent; }
.btn-quiet:hover { background: var(--raised); }
.btn-lime { background: var(--lime); color: var(--forest); border-color: var(--lime); }
.btn-lime:hover { background: #E4FA94; }
.btn-on-band { color: var(--band-text); border-color: rgba(247, 248, 242, 0.55); background: transparent; }
.btn-on-band:hover { background: rgba(247, 248, 242, 0.08); }
.btn-sm { min-block-size: 40px; padding: 8px 14px; font-size: 0.95rem; }
.arrow { display: inline-block; }
[dir="rtl"] .arrow { transform: scaleX(-1); }

.eyebrow {
  display: inline-block;
  margin-block-end: 14px;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--muted);
}
:lang(ar) .eyebrow { font-size: 0.95rem; letter-spacing: 0; text-transform: none; }
.tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 10px;
  border-radius: 999px;
  background: var(--selected);
  color: var(--text);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
}
:lang(ar) .tag { letter-spacing: 0; text-transform: none; font-size: 0.85rem; }
.tag-warn { background: var(--note-bg); color: var(--note-text); }

/* ---------- Header ---------- */
/* No menu button: below 1080px the section links are a second row that
 * scrolls sideways, so choosing one never leaves a panel open over the page
 * (a <details> menu cannot close itself without a script), and "Request
 * access" stays in the header on every screen width. */
.site-header {
  position: sticky;
  inset-block-start: 0;
  z-index: 50;
  background: var(--header-bg);
  border-block-end: 1px solid var(--border);
  backdrop-filter: saturate(1.4) blur(10px);
  -webkit-backdrop-filter: saturate(1.4) blur(10px);
}
.header-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 16px;
  padding-block-start: 8px;
  min-block-size: 56px; /* the 404 page's header has the logo only */
}
.brand { display: inline-flex; align-items: center; flex: none; border-radius: 8px; }
.brand img { block-size: 30px; inline-size: auto; }
.nav-sections {
  order: 3;
  flex: 1 0 100%;
  margin-inline: calc(-1 * var(--gutter));
  padding: 2px var(--gutter);
  overflow-x: auto;
  scrollbar-width: thin;
  border-block-start: 1px solid var(--border);
}
.nav-sections ul { display: flex; gap: 4px; list-style: none; white-space: nowrap; }
.nav-sections a, .nav-link {
  display: inline-flex;
  align-items: center;
  min-block-size: 40px;
  padding: 6px 10px;
  border-radius: 8px;
  color: var(--text);
  text-decoration: none;
  font-size: 0.97rem;
}
.nav-sections a:hover, .nav-link:hover { background: var(--raised); }
.header-actions { display: flex; align-items: center; gap: 8px; margin-inline-start: auto; }
.lang-switch { font-weight: 600; }
.header-actions .signin { display: none; }

/* The smallest phones (320px): logo, language switch and Request access still share one row. */
@media (max-width: 359px) {
  .header-inner { column-gap: 8px; }
  .brand img { block-size: 26px; }
  .header-actions { gap: 4px; }
  .header-actions .nav-link { padding-inline: 6px; font-size: 0.92rem; }
  .header-actions .btn-sm { padding-inline: 10px; font-size: 0.9rem; }
}
@media (min-width: 640px) {
  .brand img { block-size: 34px; }
  .header-actions .signin { display: inline-flex; }
}
@media (min-width: 1080px) {
  :root { --sticky-h: var(--header-h); }
  .header-inner { flex-wrap: nowrap; padding-block-start: 0; min-block-size: var(--header-h); }
  .nav-sections { order: 0; flex: 0 1 auto; margin-inline: auto 0; padding: 0; overflow: visible; border-block-start: 0; }
  .nav-sections + .header-actions { margin-inline-start: 8px; }
  /* "Saw nabrief in a meeting?" is in the footer at this width. */
  .nav-extra { display: none; }
}

/* ---------- Hero ---------- */
.hero { padding-block: clamp(40px, 6vw, 80px) clamp(48px, 7vw, 96px); }
.hero-grid { display: grid; gap: clamp(32px, 5vw, 56px); align-items: center; }
.hero h1 { display: grid; gap: 10px; }
.h1-main { font-size: clamp(2.7rem, 1.4rem + 5vw, 5.2rem); line-height: 1.02; letter-spacing: -0.035em; }
/* The headline's second-language line sits at the page's start edge, under the first line,
 * while keeping its own direction inside. */
.h1-alt { justify-self: start; font-size: clamp(2.2rem, 1.2rem + 3.6vw, 4rem); line-height: 1.35; }
.h1-main:lang(ar) { font-size: clamp(2.5rem, 1.3rem + 4vw, 4.1rem); line-height: 1.3; }
.h1-alt:lang(en) { font-size: clamp(1.9rem, 1.1rem + 2.8vw, 3.2rem); line-height: 1.1; letter-spacing: -0.03em; }
/* "in brief." / «باختصار.» stays on one line, so the highlight is never split. */
.mark {
  white-space: nowrap;
  background-image: linear-gradient(to top, var(--mark) 0, var(--mark) 0.34em, transparent 0.34em);
  color: inherit;
  padding-inline: 0.04em;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
@media (prefers-color-scheme: dark) {
  .mark { background-image: linear-gradient(to top, var(--mark) 0, var(--mark) 0.12em, transparent 0.12em); }
}
.hero-sub { margin-block: 22px 0; max-inline-size: 36em; font-size: clamp(1.1rem, 1rem + 0.45vw, 1.3rem); color: var(--text); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-block: 20px 0; list-style: none; }
.chips li {
  padding: 5px 12px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  font-size: 0.92rem;
  color: var(--text);
}
.hero-ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-block-start: 28px; }
.hero-note { margin-block: 18px 0; font-size: 0.95rem; color: var(--muted); max-inline-size: 34em; }

.hero-visual { position: relative; min-block-size: 360px; margin: 0; }
.ribbons {
  position: absolute; inset: 0; inline-size: 100%; block-size: 100%;
  /* Soft ends on both sides, whatever part of the drawing the box shows. */
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 22%, #000 84%, transparent 100%);
  mask-image: linear-gradient(to right, transparent 0, #000 22%, #000 84%, transparent 100%);
}
.brief-card {
  position: absolute;
  inset-inline-end: 5%;
  inset-block-start: 22%;
  inline-size: min(330px, 74%);
  padding: 22px 22px 18px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 18px;
  box-shadow: var(--shadow);
  transform: rotate(-1.5deg);
}
.brief-card .card-title { margin: 0; font-size: 1.45rem; font-weight: 600; letter-spacing: -0.02em; }
:lang(ar) .brief-card .card-title { letter-spacing: 0; }
.brief-card .card-label { margin: 4px 0 14px; padding-block-end: 12px; border-block-end: 1px solid var(--border); font-size: 0.74rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
:lang(ar) .brief-card .card-label { letter-spacing: 0; text-transform: none; font-size: 0.85rem; }
.brief-card ul { list-style: none; display: grid; gap: 12px; }
.brief-card li { display: grid; grid-template-columns: 18px 1fr; gap: 12px; align-items: start; font-size: 0.98rem; line-height: 1.4; }
.brief-card li::before { content: ""; inline-size: 18px; block-size: 18px; margin-block-start: 2px; border-radius: 4px; background: var(--lime); border: 1px solid #A9C640; }
.brief-card li span { display: block; }
.bubble {
  position: absolute;
  inset-inline-end: 30%;
  inset-block-start: 2%;
  padding: 12px 18px;
  border-radius: 16px;
  background: var(--selected);
  color: var(--text);
  font-size: 1.05rem;
  line-height: 1.35;
  text-align: center;
  box-shadow: var(--shadow-sm);
}
.bubble span { display: block; }

@media (min-width: 960px) {
  .hero-grid { grid-template-columns: 1.05fr 0.95fr; }
  .hero-visual { min-block-size: 500px; }
}
@media (max-width: 520px) {
  .hero-visual { min-block-size: 330px; }
  .brief-card { inset-inline-end: 0; inline-size: 86%; inset-block-start: 26%; padding: 18px; }
  .bubble { inset-inline-end: 12%; }
}

/* ---------- Why strip ---------- */
.why { padding-block: 0 clamp(48px, 6vw, 80px); }
.why-head { margin-block-end: 24px; }
.why-head h2 { font-size: clamp(1.4rem, 1.1rem + 1vw, 1.9rem); }
.why-grid { display: grid; gap: 16px; list-style: none; }
.why-grid li { padding: 22px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); }
.why-grid h3 { font-size: 1.1rem; margin-block-end: 8px; display: flex; align-items: center; gap: 10px; }
.why-grid p { margin: 0; color: var(--muted); font-size: 0.98rem; }
.icon { inline-size: 28px; block-size: 28px; flex: none; color: var(--text); }
@media (min-width: 720px) { .why-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1080px) { .why-grid { grid-template-columns: repeat(4, 1fr); } }

/* ---------- Band ---------- */
.band { background: var(--forest); color: var(--ivory); padding-block: clamp(36px, 5vw, 56px); text-align: center; }
.band p { margin: 0; font-weight: 600; letter-spacing: -0.02em; line-height: 1.25; font-size: clamp(1.6rem, 1rem + 2.6vw, 3rem); }
.band p + p { margin-block-start: 6px; color: var(--lime); letter-spacing: 0; line-height: 1.5; }

/* ---------- Sections ---------- */
.section { padding-block: var(--section); }
.section-alt { background: var(--raised); }
.section-head { max-inline-size: 760px; margin-block-end: clamp(32px, 4vw, 52px); }
.section-head h2 { font-size: clamp(1.9rem, 1.2rem + 2.4vw, 3.1rem); }
.lead { margin-block: 18px 0; font-size: clamp(1.05rem, 1rem + 0.3vw, 1.2rem); color: var(--muted); }
.sub-head { font-size: clamp(1.3rem, 1.1rem + 0.8vw, 1.7rem); margin-block: clamp(48px, 6vw, 72px) 20px; }
.sub-head:first-child { margin-block-start: 0; }

/* Steps */
.steps { display: grid; gap: 16px; list-style: none; counter-reset: step; }
.steps > li { counter-increment: step; }
.steps li { position: relative; padding: 24px 22px 22px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); }
.step-top { display: flex; align-items: center; gap: 12px; margin-block-end: 14px; }
.arch { inline-size: 36px; block-size: 36px; flex: none; color: var(--text); }
.step-num { font-size: 0.82rem; font-weight: 600; letter-spacing: var(--track-label); text-transform: uppercase; color: var(--muted); }
.step-num::before { content: counter(step, decimal-leading-zero) " / "; }
:lang(ar) .step-num { font-size: 0.95rem; text-transform: none; }
.steps h3 { font-size: 1.2rem; margin-block-end: 8px; }
.steps p { margin: 0; color: var(--muted); font-size: 0.98rem; }
@media (min-width: 720px) { .steps { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1080px) { .steps { grid-template-columns: repeat(4, 1fr); } }

/* Capture cards */
.capture { display: grid; gap: 18px; }
.capture article { display: flex; flex-direction: column; padding: 26px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); }
.capture header { display: flex; align-items: center; gap: 12px; margin-block-end: 16px; }
.capture h4 { font-size: 1.25rem; }
.capture .kicker { display: block; font-size: 0.85rem; color: var(--muted); font-weight: 400; }
.capture dl { margin: 0; display: grid; gap: 14px; }
.capture dt { font-size: 0.78rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
:lang(ar) .capture dt { letter-spacing: 0; text-transform: none; font-size: 0.92rem; }
.capture dd { margin: 4px 0 0; font-size: 0.98rem; }
.capture .limits dd { padding: 10px 12px; border-radius: var(--radius-sm); background: var(--raised); }
.icon-tile { display: grid; place-items: center; inline-size: 44px; block-size: 44px; border-radius: 12px; background: var(--selected); flex: none; }
.icon-tile .icon { inline-size: 24px; block-size: 24px; }
@media (min-width: 960px) { .capture { grid-template-columns: repeat(3, 1fr); } }

/* Numbers */
.numbers { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; list-style: none; background: var(--border); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.numbers li { padding: 22px 20px; background: var(--surface); }
.numbers .n { display: block; font-size: clamp(1.7rem, 1.2rem + 1.6vw, 2.4rem); font-weight: 600; letter-spacing: -0.02em; line-height: 1.1; }
:lang(ar) .numbers .n { letter-spacing: 0; }
.numbers .n small { font-size: 0.55em; font-weight: 600; }
.numbers .what { display: block; margin-block-start: 6px; font-size: 0.95rem; color: var(--muted); line-height: 1.4; }
/* Three columns at most, so no unit ("languages", ميغابايت) wraps under its number. On the
 * smallest phones the tiles get less padding for the same reason; this rule must come after
 * ".numbers li" above, which it overrides. */
@media (max-width: 359px) { .numbers li { padding-inline: 14px; } }
@media (min-width: 720px) { .numbers { grid-template-columns: repeat(3, 1fr); } }

/* Example (illustrative meeting page) */
.example { margin: 0 0 clamp(40px, 5vw, 64px); }
.example figcaption { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-block-end: 14px; color: var(--muted); font-size: 0.95rem; }
.mock { background: var(--surface); border: 1px solid var(--border); border-radius: 18px; box-shadow: var(--shadow); overflow: hidden; }
.mock-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; padding: 14px 20px; border-block-end: 1px solid var(--border); background: var(--raised); }
.mock-dots { display: inline-flex; gap: 6px; }
.mock-dots i { inline-size: 10px; block-size: 10px; border-radius: 50%; background: var(--border); }
.mock-title { font-weight: 600; }
.mock-meta { color: var(--muted); font-size: 0.92rem; }
.mock-cols { display: grid; }
.mock-col { padding: 22px; }
.mock-col + .mock-col { border-block-start: 1px solid var(--border); }
.mock-head { margin: 0 0 14px; font-size: 0.82rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.mock-head:lang(ar) { text-transform: none; font-size: 0.95rem; }
.tx { list-style: none; display: grid; gap: 14px; }
.tx li { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; }
.tx .time { grid-row: span 2; font-variant-numeric: tabular-nums; font-size: 0.85rem; color: var(--muted); padding-block-start: 3px; direction: ltr; }
.tx .spk { font-size: 0.85rem; font-weight: 600; }
.tx p { margin: 0; padding: 10px 14px; border-radius: 12px; background: var(--raised); }
.tx p[dir="rtl"] { text-align: right; }
.tx p[dir="ltr"] { text-align: left; }
.brief-head { margin: 16px 0 8px; font-size: 1rem; font-weight: 600; }
.mock-head + .brief-head { margin-block-start: 0; }
.brief ul { list-style: none; display: grid; gap: 10px; }
.brief li { padding: 12px 14px; border: 1px solid var(--border); border-radius: 12px; }
.brief .item { display: block; font-weight: 600; }
.pill { display: inline-flex; padding: 3px 10px; border-radius: 999px; border: 1px solid var(--border); font-size: 0.88rem; color: var(--text); }
.pill-on { background: var(--btn-bg); border-color: var(--btn-bg); color: var(--btn-text); font-weight: 600; }
.alt-summary { margin-block-start: 16px; padding-block-start: 14px; border-block-start: 1px dashed var(--border); }
.alt-summary p { margin: 0 0 8px; font-size: 0.9rem; color: var(--muted); }
.alt-summary ul { list-style: disc; padding-inline-start: 1.2em; display: grid; gap: 4px; text-align: start; }
.alt-summary li { padding: 0; border: 0; }
@media (min-width: 900px) {
  .mock-cols { grid-template-columns: 1fr 1fr; }
  .mock-col + .mock-col { border-block-start: 0; border-inline-start: 1px solid var(--border); }
}

/* Feature grid */
.features { display: grid; gap: 16px; list-style: none; }
.features li { padding: 22px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); }
.features h3 { display: flex; align-items: center; gap: 10px; font-size: 1.1rem; margin-block-end: 8px; }
.features p { margin: 0; color: var(--muted); font-size: 0.98rem; }
@media (min-width: 720px) { .features { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1080px) { .features { grid-template-columns: repeat(3, 1fr); } }
.inline-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-block-start: clamp(28px, 4vw, 40px); }

/* Languages */
.lang-grid { display: grid; gap: clamp(28px, 4vw, 56px); align-items: start; }
.lang-list { list-style: none; display: grid; gap: 22px; }
.lang-list h3 { font-size: 1.15rem; margin-block-end: 6px; }
.lang-list p { margin: 0; color: var(--muted); }
.flow { margin: 0; padding: 24px; background: var(--surface); border: 1px solid var(--border); border-radius: 18px; box-shadow: var(--shadow-sm); }
.flow figcaption { margin-block-end: 16px; }
.flow-step { font-size: 0.82rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); margin: 0 0 10px; }
:lang(ar) .flow-step { letter-spacing: 0; text-transform: none; font-size: 0.95rem; }
.flow-lines { list-style: none; display: grid; gap: 8px; margin-block-end: 18px; }
.flow-lines li { padding: 10px 14px; border-radius: 12px; background: var(--raised); }
.flow-lines li[dir="rtl"] { text-align: right; }
.flow-lines li[dir="ltr"] { text-align: left; }
.flow-arrow { display: block; inline-size: 28px; block-size: 28px; margin: 0 auto 14px; color: var(--muted); }
.flow-langs { display: flex; flex-wrap: wrap; gap: 8px; margin-block-end: 0; list-style: none; }
.callout { margin-block-start: 28px; padding: 18px 20px; border-radius: var(--radius); background: var(--note-bg); color: var(--note-text); border: 1px solid var(--note-border); }
.callout strong { display: block; margin-block-end: 4px; }
.callout p { margin: 0; }
@media (min-width: 960px) { .lang-grid { grid-template-columns: 1.1fr 0.9fr; } }

/* Privacy */
.privacy-grid { display: grid; gap: clamp(28px, 4vw, 56px); align-items: start; }
@media (min-width: 960px) { .privacy-grid { grid-template-columns: 1fr 1fr; } }
.chat { margin: 0; background: var(--surface); border: 1px solid var(--border); border-radius: 18px; box-shadow: var(--shadow); overflow: hidden; }
.chat-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 18px; background: var(--raised); border-block-end: 1px solid var(--border); font-weight: 600; }
.chat-body { display: grid; gap: 14px; padding: 18px; }
.msg { max-inline-size: 100%; }
.msg-from { font-size: 0.85rem; font-weight: 600; margin-block-end: 4px; }
.msg-from span { font-weight: 400; color: var(--muted); }
.msg-text { padding: 12px 14px; border-radius: 14px; background: var(--raised); border: 1px solid var(--border); font-size: 0.96rem; line-height: 1.55; }
.msg-text p { margin: 0; }
.msg-text p + p { margin-block-start: 10px; padding-block-start: 10px; border-block-start: 1px solid var(--border); }
.msg-text p[dir="rtl"] { text-align: right; line-height: 1.8; }
.msg-text p[dir="ltr"] { text-align: left; }
.msg-user { justify-self: end; }
.msg-user .msg-text { background: var(--btn-bg); color: var(--btn-text); border-color: var(--btn-bg); font-weight: 600; }
.chat-foot { margin: 0; padding: 12px 18px; border-block-start: 1px solid var(--border); font-size: 0.85rem; color: var(--muted); }
.prose-block h3 { font-size: 1.25rem; margin-block-end: 10px; }
.prose-block p { color: var(--muted); }
.prose-block p strong { color: var(--text); }
.stop-words { display: flex; flex-wrap: wrap; gap: 6px; margin-block: 4px 14px; list-style: none; }
.stop-words li { padding: 3px 10px; border-radius: 8px; background: var(--surface); border: 1px solid var(--border); font-weight: 600; font-size: 0.95rem; }

.checks { display: grid; gap: 14px; list-style: none; }
.checks li { display: grid; grid-template-columns: 24px 1fr; gap: 12px; align-items: start; }
.checks li::before {
  content: "";
  inline-size: 22px; block-size: 22px; margin-block-start: 2px;
  border-radius: 50%;
  background: var(--lime) center / 12px 12px no-repeat url("/assets/check.svg");
  border: 1px solid #A9C640;
}
.controls { display: grid; gap: 14px 32px; list-style: none; }
@media (min-width: 820px) { .controls { grid-template-columns: 1fr 1fr; } }
.controls li { padding: 18px 20px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); }
.controls h4 { font-size: 1.02rem; margin-block-end: 6px; }
.controls p { margin: 0; color: var(--muted); font-size: 0.97rem; }

.list-card { padding: 24px; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--border); }
.list-card h3 { font-size: 1.15rem; margin-block-end: 14px; }
@media (min-width: 820px) { .list-card .checks { grid-template-columns: 1fr 1fr; gap: 14px 32px; } }
.legal-links { margin-block: 24px 0; }
.spaced { margin-block-start: clamp(48px, 6vw, 72px); }
.dots { display: grid; gap: 14px; list-style: none; }
.dots li { display: grid; grid-template-columns: 24px 1fr; gap: 12px; align-items: start; }
.dots li::before { content: ""; inline-size: 10px; block-size: 10px; margin: 9px 6px 0; border-radius: 50%; background: var(--text); }

/* Participants */
.participants { display: grid; gap: clamp(24px, 4vw, 48px); align-items: start; }
@media (min-width: 960px) { .participants { grid-template-columns: 0.8fr 1.2fr; } }
.facts { margin: 0; display: grid; gap: 0; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); overflow: hidden; }
.facts div { padding: 16px 20px; border-block-end: 1px solid var(--border); }
.facts div:last-child { border-block-end: 0; }
.facts dt { font-weight: 600; margin-block-end: 4px; }
.facts dd { margin: 0; color: var(--muted); }

/* Who */
.who { display: grid; gap: 16px; list-style: none; }
.who li { padding: 24px; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--border); }
.who h3 { font-size: 1.15rem; margin-block-end: 8px; }
.who p { margin: 0; color: var(--muted); font-size: 0.98rem; }
@media (min-width: 720px) { .who { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1080px) { .who { grid-template-columns: repeat(4, 1fr); } }

/* Pilot */
.pilot { display: grid; gap: clamp(24px, 4vw, 48px); align-items: start; padding: clamp(28px, 4vw, 48px); border-radius: 22px; background: var(--surface); border: 1px solid var(--border); }
.pilot h2 { font-size: clamp(1.7rem, 1.2rem + 1.8vw, 2.5rem); }
@media (min-width: 960px) { .pilot { grid-template-columns: 0.8fr 1.2fr; } }

/* FAQ */
.faq { display: grid; gap: 10px; max-inline-size: 880px; }
.faq details { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); }
.faq summary {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  min-block-size: 56px; padding: 14px 20px;
  cursor: pointer; list-style: none;
  font-weight: 600; font-size: 1.05rem;
}
.faq summary::-webkit-details-marker { display: none; }
/* The chevron points down when closed and up when open, in both directions.
 * Its borders are physical (right and bottom), not logical: the rotation is
 * physical too, and logical borders would make it point sideways on /ar/. */
.faq summary::after {
  content: "";
  flex: none;
  inline-size: 12px; block-size: 12px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translate(-2px, -2px);
}
.faq details[open] summary::after { transform: rotate(-135deg) translate(-2px, -2px); }
.faq details[open] summary { border-block-end: 1px solid var(--border); }
.faq .answer { padding: 14px 20px 18px; color: var(--muted); }
.faq .answer p { margin: 0; }

/* CTA band */
.cta { background: var(--forest); color: var(--ivory); padding-block: clamp(56px, 7vw, 96px); }
.cta-inner { display: grid; gap: 24px; align-items: center; }
.cta h2 { font-size: clamp(1.9rem, 1.2rem + 2.4vw, 3rem); color: var(--ivory); }
.cta h2 .accent { color: var(--lime); }
.cta p { margin: 12px 0 0; color: #D5E2DA; max-inline-size: 36em; }
.cta a:not(.btn) { color: var(--lime); }
.cta-buttons { display: flex; flex-wrap: wrap; gap: 12px; }
.cta :focus-visible { box-shadow: 0 0 0 2px var(--forest), 0 0 0 4px var(--ivory); }
@media (min-width: 900px) { .cta-inner { grid-template-columns: 1.4fr auto; } }

/* Footer */
.site-footer { padding-block: 48px 36px; border-block-start: 1px solid var(--border); }
.footer-grid { display: grid; gap: 28px; }
.footer-brand img { inline-size: 220px; }
.footer-brand p { margin: 12px 0 0; color: var(--muted); }
.footer-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.footer-cols h2 { font-size: 0.85rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); margin-block-end: 10px; }
:lang(ar) .footer-cols h2 { letter-spacing: 0; text-transform: none; font-size: 0.95rem; }
.footer-cols ul { list-style: none; display: grid; gap: 6px; }
.footer-cols a { color: var(--text); text-decoration: none; }
.footer-cols a:hover { text-decoration: underline; }
.footer-base { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; margin-block-start: 32px; padding-block-start: 20px; border-block-start: 1px solid var(--border); color: var(--muted); font-size: 0.9rem; }
.footer-base p { margin: 0; }
@media (min-width: 900px) {
  .footer-grid { grid-template-columns: 1fr 1.6fr; }
  .footer-cols { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* 404 */
.notfound { min-block-size: 60vh; display: grid; place-items: center; text-align: center; padding-block: 64px; }
.notfound h1 { font-size: clamp(2rem, 1.4rem + 2vw, 3rem); margin-block-end: 12px; }
.notfound p { color: var(--muted); }
.notfound .hero-ctas { justify-content: center; }

/* Motion: only for people who have not asked for less. */
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
  .btn, .nav-sections a, .nav-link, .faq summary::after { transition: background-color 0.15s ease, transform 0.2s ease; }
}

@media print {
  .site-header, .skip, .cta-buttons, .hero-ctas, .inline-cta { display: none !important; }
  body { background: #fff; color: #000; }
  .faq details { break-inside: avoid; }
}

/* Hero ribbons (decorative SVG, coloured here so dark mode can follow). The step marks use
 * the #arch symbol: currentColor (forest, ivory in dark) and lime, like the logo. */
.rib { fill: none; stroke-linecap: butt; }
.rib-f { stroke: url(#rib-forest); stroke-width: 58; }
.rib-l { stroke: url(#rib-lime); stroke-width: 52; }
.rib-shadow { fill: none; stroke: rgba(16, 46, 42, 0.06); stroke-width: 60; }
.rf-a { stop-color: var(--ribbon-forest-1); }
.rf-b { stop-color: var(--ribbon-forest-2); }
.rl-a { stop-color: var(--ribbon-lime-1); }
.rl-b { stop-color: var(--ribbon-lime-2); }
@media (prefers-color-scheme: dark) {
  .rib-shadow { stroke: rgba(0, 0, 0, 0.25); }
}