/* ============================================================================
   Nasaq landing page — shared stylesheet for index.html and ar.html.
   Requires tokens.css to be linked first. No colour, radius, font or size
   literals: every value comes from a token.

   Directional CSS uses LOGICAL properties (margin-inline / padding-inline /
   inset-inline / text-align:start) so the LTR and RTL pages stay in sync.
   Arabic-only deltas live under [lang="ar"] at the end of each block.
   ============================================================================ */

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
html,body{ margin:0; padding:0; }
body{
  font-family:var(--font-sans);
  background:var(--surface-bg);
  color:var(--text-primary);
  font-size:var(--text-base);
  line-height:var(--leading-body);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
::selection{ background:var(--brand-wash); }

h1,h2,h3,h4{
  font-weight:600;
  line-height:var(--leading-tight);
  letter-spacing:var(--tracking-head);
  margin:0;
}
[lang="ar"] h1,[lang="ar"] h2,[lang="ar"] h3,[lang="ar"] h4{ font-weight:700; }
p{ margin:0; text-wrap:pretty; }
a{ color:inherit; }

/* Latin-only values stay LTR inside RTL prose. */
input[type="email"],input[type="url"]{ direction:ltr; unicode-bidi:isolate; text-align:start; }

.wrap{ max-width:1080px; margin-inline:auto; padding-inline:32px; }

/* ---------- surface card ---------- */
.panel{
  background:var(--surface-raised);
  border:1px solid var(--border-subtle);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-sm);
}

/* ---------- buttons & fields ---------- */
.btn{
  font-family:inherit; font-size:var(--text-base); font-weight:600;
  padding:12px 24px; border-radius:var(--radius-sm);
  border:2px solid var(--border-default);
  background:var(--surface-bg); color:var(--text-primary); cursor:pointer;
  display:inline-flex; align-items:center; gap:8px; text-decoration:none;
  transition:transform var(--duration-fast) var(--ease-out),
             background var(--duration-fast) var(--ease-out);
}
.btn:hover{ transform:translateY(-1px); }
.btn.primary{ background:var(--text-primary); color:var(--surface-bg); border-color:var(--text-primary); }
.btn.accent{ background:var(--action); color:var(--on-action); border-color:var(--action); }
.btn.accent:hover{ background:var(--action-hover); border-color:var(--action-hover); }
.btn.ghost{ background:transparent; border-color:transparent; padding-inline:8px; }
.btn.ghost:hover{ text-decoration:underline; text-underline-offset:3px; }
[lang="ar"] .btn{ font-weight:700; letter-spacing:0; }

.field{
  font-family:inherit; font-size:var(--text-base);
  padding:12px 16px; border-radius:var(--radius-sm);
  border:2px solid var(--border-default);
  background:var(--surface-bg); color:var(--text-primary); min-width:0;
}
.field::placeholder{ color:var(--text-muted); }
.field:focus{ border-color:var(--action); }
.field:focus-visible{ outline-offset:1px; }

.inline-form{ display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
.inline-form .field{ flex:1 1 260px; }
.form-note{ font-size:var(--text-xs); color:var(--text-secondary); }
.form-success{ padding-block:8px; font-weight:600; color:var(--success-ink); }
.form-error{ padding-block:8px; color:var(--block); }

/* ---------- eyebrow / badge ---------- */
.eyebrow{
  font-size:var(--text-xs); font-weight:700;
  letter-spacing:0.14em; text-transform:uppercase; color:var(--text-secondary);
  display:flex; align-items:center; gap:8px;
}
.eyebrow::before{ content:""; width:24px; height:0; border-top:2px solid var(--border-default); }
.eyebrow-center{ justify-content:center; }
.ai-badge{
  display:inline-flex; align-items:center; gap:8px;
  font-size:var(--text-xs); font-weight:700; letter-spacing:0.08em; text-transform:uppercase;
  color:var(--text-secondary); border:1px solid var(--border-subtle);
  border-radius:var(--radius-pill); padding:8px 16px; margin-bottom:16px; background:transparent;
}
.ai-badge .spark{ fill:var(--brand); flex:0 0 auto; }
/* Uppercasing and wide tracking are Latin display conventions. */
[lang="ar"] .eyebrow,[lang="ar"] .ai-badge{ text-transform:none; letter-spacing:0; }

/* ---------- section scaffolding ---------- */
section{ padding-block:64px; border-top:1px solid var(--border-faint); }
section:first-of-type{ border-top:0; }
.sec-head{ max-width:640px; margin-bottom:32px; }
.sec-head h2{ font-size:var(--text-2xl); margin-block:16px; text-wrap:balance; }
.sec-head p{ font-size:var(--text-lg); color:var(--text-secondary); }
.accent-line{ color:var(--brand); }

/* ---------- header ---------- */
header.site{
  position:sticky; top:0; z-index:50;
  background:color-mix(in oklab, var(--surface-bg) 86%, transparent);
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  border-bottom:1px solid var(--border-faint);
}
.site .wrap{ display:flex; align-items:center; gap:16px; padding-block:16px; }
.logo{ display:flex; align-items:center; }
.logo-img{ display:block; height:36px; width:auto; }
.logo-img-sm{ height:32px; }
.site .spacer{ flex:1; }
header.site .btn{ font-size:var(--text-sm); padding:8px 16px; border-radius:var(--radius-pill); border-width:1.5px; }

.lang-switch{
  font-size:var(--text-sm); font-weight:600; color:var(--text-secondary); text-decoration:none;
  border:1px solid var(--border-subtle); border-radius:var(--radius-pill); padding:4px 12px;
  transition:border-color var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out);
  white-space:nowrap;
}
.lang-switch:hover{ border-color:var(--action); color:var(--action); }
.lang-short{ display:none; }

.site-nav{ display:flex; align-items:center; gap:4px; }
.site-nav a{
  font-size:var(--text-sm); font-weight:600; color:var(--text-secondary); text-decoration:none;
  padding:4px 12px; border-radius:var(--radius-pill); white-space:nowrap;
  transition:color var(--duration-fast) var(--ease-out), background var(--duration-fast) var(--ease-out);
}
.site-nav a:hover{ color:var(--action); background:var(--brand-wash); }

.nav-toggle{
  display:none; background:none; border:none; cursor:pointer;
  padding:8px; color:var(--text-secondary); line-height:0;
  border-radius:var(--radius-sm); transition:color var(--duration-fast) var(--ease-out);
}
.nav-toggle:hover{ color:var(--action); }
.nav-toggle .icon-close{ display:none; }

@media (max-width:640px){
  .lang-full{ display:none; }
  .lang-short{ display:inline; }
  .nav-toggle{ display:flex; align-items:center; }
  .site-nav{
    flex-direction:column; gap:4px; align-items:stretch;
    position:absolute; top:100%; inset-inline:0;
    background:color-mix(in oklab, var(--surface-bg) 96%, transparent);
    -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
    border-bottom:1px solid var(--border-faint);
    padding:16px;
    opacity:0; pointer-events:none; transform:translateY(-8px);
    transition:opacity var(--duration-base) var(--ease-out),
               transform var(--duration-base) var(--ease-out);
  }
  .site-nav a{ font-size:var(--text-base); padding:8px 12px; border-radius:var(--radius-md); }
  header.site.nav-open .site-nav{ opacity:1; pointer-events:auto; transform:translateY(0); }
  header.site.nav-open .nav-toggle .icon-menu{ display:none; }
  header.site.nav-open .nav-toggle .icon-close{ display:block; }
}

/* ---------- hero ---------- */
.hero{ padding-block:72px 56px; }
.hero-grid{ display:grid; grid-template-columns:1.05fr 0.95fr; column-gap:48px; align-items:start; }
.hero-copy{ grid-column:1; grid-row:1; }
.hero-visual{ grid-column:2; grid-row:1 / 3; align-self:center; }
.hero-cta{ grid-column:1; grid-row:2; }
.hero h1{ font-size:var(--text-3xl); margin-block:16px; text-wrap:balance; }
.hero .sub{ font-size:var(--text-lg); color:var(--text-secondary); max-width:46ch; }
.hero .support{ font-size:var(--text-sm); color:var(--text-secondary); margin-top:16px; max-width:42ch; }
.cta-stack{ margin-top:24px; display:flex; flex-direction:column; gap:12px; align-items:flex-start; }
.cta-stack .inline-form{ width:100%; }
.cta-sub{ display:flex; align-items:center; gap:8px; font-size:var(--text-sm); color:var(--text-secondary); }

/* ---------- tooltips ----------
   Shown on hover AND on keyboard focus; every trigger is focusable.
   display, not just opacity: an invisible tooltip still counts toward
   scrollWidth, which is what made the page scroll sideways on a phone. */
.tip,.pilot-tip{
  display:none;
  position:absolute; bottom:calc(100% + 12px); inset-inline-start:50%;
  transform:translateX(-50%);
  background:var(--text-primary); color:var(--surface-bg);
  padding:12px; border-radius:var(--radius-sm);
  font-size:var(--text-xs); font-weight:400; line-height:var(--leading-body);
  width:max-content; max-width:min(200px, calc(100vw - 32px)); text-align:start;
  opacity:0; pointer-events:none;
  transition:opacity var(--duration-fast) var(--ease-out),
             display var(--duration-fast) allow-discrete;
  z-index:20;
}
[dir="rtl"] .tip,[dir="rtl"] .pilot-tip{ transform:translateX(50%); }
.tip strong,.pilot-tip strong{
  display:block; color:var(--sage); font-size:var(--text-xs); font-weight:700; margin-bottom:4px;
}
.tip-arrow::before{
  content:''; position:absolute; bottom:calc(100% + 4px);
  inset-inline-start:50%; transform:translateX(-50%);
  border:5px solid transparent; border-top-color:var(--text-primary);
  opacity:0; pointer-events:none;
  transition:opacity var(--duration-fast) var(--ease-out); z-index:20;
}
[dir="rtl"] .tip-arrow::before{ transform:translateX(50%); }
.tip-arrow:hover .tip,.tip-arrow:hover .pilot-tip,.tip-arrow:hover::before,
.tip-arrow:focus-visible .tip,.tip-arrow:focus-visible .pilot-tip,.tip-arrow:focus-visible::before{ opacity:1; }
.tip-arrow:hover .tip,.tip-arrow:hover .pilot-tip,
.tip-arrow:focus-visible .tip,.tip-arrow:focus-visible .pilot-tip{ display:block; }
@starting-style{
  .tip-arrow:hover .tip,.tip-arrow:hover .pilot-tip,
  .tip-arrow:focus-visible .tip,.tip-arrow:focus-visible .pilot-tip{ opacity:0; }
}

.pilot-info-btn{
  position:relative; display:inline-flex; align-items:center;
  background:none; border:none; padding:0; cursor:pointer;
  color:var(--text-muted); flex:0 0 auto;
  transition:color var(--duration-fast) var(--ease-out);
}
.pilot-info-btn:hover{ color:var(--action); }
.pilot-tip{ width:260px; max-width:min(260px, calc(100vw - 32px)); }

/* ---------- lifecycle diagram ---------- */
.diagram{ padding:24px; position:relative; overflow:hidden; }
.diagram .dia-h{ position:relative; z-index:1; }
.dia-h{ display:flex; align-items:stretch; gap:8px; margin-block:32px 40px; }
.stage{ flex:1; min-width:0; padding:16px; display:flex; flex-direction:column; gap:8px; }
.stage .s-what{ font-size:var(--text-base); color:var(--text-primary); font-weight:500; }
.stage .s-what strong{ font-size:var(--text-lg); font-weight:700; display:block; line-height:var(--leading-tight); }
.flow-arrow{ flex:0 0 auto; align-self:center; color:var(--text-muted); display:grid; place-items:center; }
.flow-arrow svg{ width:24px; height:24px; }
[dir="rtl"] .dia-h .flow-arrow svg{ transform:rotate(180deg); }
.dia-tagline{
  font-size:var(--text-base); color:var(--text-secondary); font-weight:500;
  margin-block:16px 8px; display:flex; align-items:center; gap:8px;
}
.dia-tagline::before{ content:''; width:24px; height:2px; background:var(--border-default); flex:0 0 auto; }

/* AI + human agent mesh, woven behind the lifecycle */
.agent-net{ position:absolute; inset:8px; z-index:0; pointer-events:none; }
.agent-net .net-lines{ position:absolute; inset:0; width:100%; height:100%; overflow:visible; }
.agent-net .net-lines .edge{ fill:none; stroke:var(--text-muted); stroke-width:0.22; opacity:.26; }
.agent-net .ag{
  position:absolute; transform:translate(-50%,-50%);
  width:24px; height:24px; border-radius:var(--radius-pill);
  display:grid; place-items:center;
  background:var(--surface-bg); border:1.5px solid var(--border-default);
}
.agent-net .ag svg{ width:12px; height:12px; }
.agent-net .ag.ai svg{ width:16px; height:16px; fill:var(--brand); stroke:none; }
.agent-net .ag.human svg{
  fill:none; stroke:var(--text-secondary); stroke-width:1.7;
  stroke-linecap:round; stroke-linejoin:round;
}

/* ---------- generic grids & cards ---------- */
.grid-2{ display:grid; grid-template-columns:repeat(2,1fr); gap:24px; }
.grid-3{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.grid-spaced{ margin-top:32px; }
.card{ padding:24px; display:flex; flex-direction:column; gap:8px; }
.card h3,.card h4{ font-size:var(--text-lg); }
.card p{ font-size:var(--text-sm); color:var(--text-secondary); }
.card img{
  width:100%; height:auto; margin-top:auto; padding-top:8px;
  aspect-ratio:2/1; object-fit:cover; object-position:top left;
  border-radius:var(--radius-sm); display:block; cursor:zoom-in;
  transition:opacity var(--duration-fast) var(--ease-out);
}
.card img:hover{ opacity:.88; }

.benefit-card{ padding:24px; display:flex; flex-direction:column; gap:8px; }
.benefit-card .b-icon{ color:var(--text-secondary); }
.benefit-card strong{ font-size:var(--text-lg); font-weight:600; }
[lang="ar"] .benefit-card strong{ font-weight:700; }
.benefit-card p{ font-size:var(--text-sm); color:var(--text-secondary); }

/* ---------- lightbox ---------- */
#lightbox{
  display:none; position:fixed; inset:0; z-index:1000; background:var(--scrim);
  align-items:center; justify-content:center; padding:24px;
}
#lightbox.open{ display:flex; }
#lightbox img{ max-width:100%; max-height:100%; border-radius:var(--radius-sm); box-shadow:var(--shadow-lg); }
#lightbox-close{
  position:absolute; top:16px; inset-inline-end:24px; background:none; border:none;
  color:var(--surface-raised); font-size:var(--text-2xl); line-height:1; cursor:pointer; opacity:.8;
}
#lightbox-close:hover{ opacity:1; }

/* ---------- problem: split brain ---------- */
.split-brain{
  display:grid; grid-template-columns:1fr 72px 1fr;
  min-height:300px; align-items:stretch; margin-block:8px;
  max-width:700px; margin-inline:auto;
}
.brain-half{ display:flex; flex-direction:column; padding:24px; gap:16px; overflow:hidden; }
.left-brain{
  background:var(--surface-base);
  border-start-start-radius:var(--radius-lg); border-end-start-radius:var(--radius-lg);
}
.right-brain{
  background:var(--sage-wash);
  border-start-end-radius:var(--radius-lg); border-end-end-radius:var(--radius-lg);
}
.brain-title{ font-size:var(--text-lg); font-weight:700; letter-spacing:var(--tracking-head); }
.left-brain .brain-title{ color:var(--text-primary); }
.right-brain .brain-title{ color:var(--brand); }
.brain-sub{
  font-size:var(--text-xs); color:var(--text-secondary); letter-spacing:0.03em;
  text-transform:uppercase; font-weight:600; margin-top:-8px;
}
[lang="ar"] .brain-sub{ text-transform:none; letter-spacing:0; }
.brain-concepts{ display:flex; flex-direction:column; gap:8px; margin-top:auto; }
.brain-concept{
  display:flex; align-items:flex-start; gap:8px;
  font-size:var(--text-sm); color:var(--text-secondary);
}
.brain-concept::before{
  content:''; flex:0 0 6px; height:6px; border-radius:var(--radius-pill); margin-top:8px;
}
.left-brain .brain-concept::before{ background:var(--text-muted); }
.right-brain .brain-concept::before{ background:var(--brand); }

.fracture{
  position:relative; display:flex; flex-direction:column;
  justify-content:space-evenly; align-items:center; z-index:1;
}
.frac-line{ position:absolute; inset:0; width:100%; height:100%; overflow:visible; }
.frac-line-h{ display:none; position:absolute; inset:0; width:100%; height:100%; overflow:visible; }
.pain-node{
  position:relative; width:40px; height:40px; border-radius:var(--radius-pill);
  background:var(--surface-raised); border:1.5px solid var(--brand-border);
  display:grid; place-items:center; cursor:help;
  z-index:2; color:var(--text-secondary); flex:0 0 auto;
  transition:transform var(--duration-fast) var(--ease-out),
             box-shadow var(--duration-fast) var(--ease-out),
             border-color var(--duration-fast) var(--ease-out),
             color var(--duration-fast) var(--ease-out);
}
.pain-node svg{ width:20px; height:20px; }
.pain-node:hover,.pain-node:focus-visible{
  transform:scale(1.08); box-shadow:var(--shadow-md);
  border-color:var(--action); color:var(--action);
}
.pain-node .tip{ max-width:185px; }

.result-strip{
  margin-top:24px; padding:16px 24px; display:flex; gap:16px;
  align-items:center; font-size:var(--text-base); max-width:700px; margin-inline:auto;
}
.result-strip .k{ font-size:var(--text-lg); color:var(--text-muted); line-height:var(--leading-tight); }

/* ---------- why a system ---------- */
.why-system-grid{
  display:grid; grid-template-columns:1fr minmax(320px,400px);
  column-gap:48px; align-items:start;
}
.why-system-grid > .sec-head{ grid-column:1; grid-row:1; max-width:none; margin-bottom:24px; }
.why-system-grid > .ai-honeycomb-wrap{ grid-column:2; grid-row:1 / 5; margin-block:0; }
.why-system-grid > .ai-gaps{ grid-column:1; grid-row:2; margin-top:0; grid-template-columns:1fr; }
.why-system-grid > .handoff{ grid-column:1; grid-row:3; text-align:start; margin-inline:0; }

.ai-honeycomb-wrap{ display:flex; flex-direction:column; align-items:center; justify-content:center; margin-block:24px 8px; }
.ai-honeycomb{ width:100%; max-width:460px; height:auto; }
/* SVG type is in user units so it scales with the drawing; the CSS scale
   does not apply inside the viewBox. */
.ai-honeycomb text{ font-family:var(--font-sans); }
.ai-gaps{ display:grid; grid-template-columns:repeat(2,1fr); gap:16px; margin-top:32px; }
.gap{ display:flex; gap:16px; padding:24px; align-items:flex-start; }
.gap .x{
  flex:0 0 24px; height:24px; border:2px solid var(--text-secondary); border-radius:var(--radius-sm);
  display:grid; place-items:center; color:var(--text-secondary); font-weight:700; font-size:var(--text-sm);
}
.gap h4{ font-size:var(--text-base); margin-bottom:4px; }
.gap p{ font-size:var(--text-sm); color:var(--text-secondary); }
.handoff{ text-align:center; margin-top:32px; font-size:var(--text-lg); color:var(--text-primary); text-wrap:balance; }

/* ---------- how it works: system map ---------- */
.sysmap{ position:relative; width:100%; max-width:720px; aspect-ratio:1/1; margin-inline:auto; }
.sysmap svg{ position:absolute; inset:0; width:100%; height:100%; overflow:visible; z-index:0; }
.sysmap .ring{ fill:none; stroke:var(--text-muted); stroke-width:0.35; opacity:.5; }
.sysmap .spoke{ fill:none; stroke:var(--brand); stroke-width:0.3; stroke-dasharray:1.5 1.7; opacity:.6; }
.sysmap .node{
  position:absolute; transform:translate(-50%,-50%); z-index:1;
  width:128px; padding:12px; text-align:center;
  background:var(--surface-raised); border:1.5px solid var(--brand-border);
  border-radius:var(--radius-md);
  font-weight:600; font-size:var(--text-xs); line-height:var(--leading-tight);
  color:var(--text-primary); cursor:help;
  transition:transform var(--duration-fast) var(--ease-out),
             box-shadow var(--duration-fast) var(--ease-out),
             border-color var(--duration-fast) var(--ease-out);
}
[lang="ar"] .sysmap .node{ font-weight:700; }
.sysmap .node.node-wide{ width:152px; }
.sysmap .node:hover,.sysmap .node:focus-visible{
  transform:translate(-50%,-50%) scale(1.06);
  box-shadow:var(--shadow-md); border-color:var(--action);
}
.sysmap .node.node-bottom .tip{ bottom:auto; top:calc(100% + 12px); }
.sysmap .node.node-bottom.tip-arrow::before{
  bottom:auto; top:calc(100% + 4px);
  border-top-color:transparent; border-bottom-color:var(--text-primary);
}
.sysmap .hub{
  position:absolute; inset-inline-start:50%; top:50%; transform:translate(-50%,-50%);
  z-index:2; width:176px; display:flex; flex-direction:column; gap:8px;
}
[dir="rtl"] .sysmap .hub{ transform:translate(50%,-50%); }
.sysmap .hub-item{
  text-align:center; padding:8px; font-weight:600;
  font-size:var(--text-xs); line-height:var(--leading-tight); color:var(--brand);
  border:1.5px solid var(--brand); border-radius:var(--radius-md); background:var(--brand-wash);
}
[lang="ar"] .sysmap .hub-item{ font-weight:700; }
.map-cap{ max-width:620px; margin:24px auto 0; text-align:center; font-size:var(--text-base); color:var(--text-secondary); }

/* ---------- benefits checklist ---------- */
.checklist{ display:grid; grid-template-columns:repeat(2,1fr); gap:16px 32px; }
.check{ display:flex; gap:12px; align-items:flex-start; font-size:var(--text-base); color:var(--text-primary); }
.check .bx{
  flex:0 0 24px; height:24px; border:2px solid var(--border-default); border-radius:var(--radius-sm);
  display:grid; place-items:center; color:var(--brand); margin-top:2px;
}
.check .bx svg{ width:12px; height:12px; }

/* ---------- pilot partners ---------- */
.partners{ text-align:center; }
.partners .eyebrow{ justify-content:center; }
.partners .partners-sub{ font-size:var(--text-base); color:var(--text-secondary); margin-top:8px; }
.partners-logos{
  display:flex; flex-wrap:wrap; align-items:stretch; justify-content:center;
  gap:16px; margin-top:32px;
}
/* Each logo sits on a white chip so baked-in backgrounds normalise, and every
   logo is scaled to the same optical height regardless of its file size. */
.partner-logo{
  display:flex; align-items:center; justify-content:center;
  flex:1 1 230px; max-width:320px; height:96px; padding:24px;
  background:var(--surface-raised); border:1px solid var(--border-subtle);
  border-radius:var(--radius-lg); box-shadow:var(--shadow-sm); text-decoration:none;
  transition:box-shadow var(--duration-fast) var(--ease-out),
             transform var(--duration-fast) var(--ease-out),
             border-color var(--duration-fast) var(--ease-out);
}
.partner-logo:hover{ box-shadow:var(--shadow-md); transform:translateY(-2px); border-color:var(--brand-border); }
.partner-logo img{ max-height:56px; max-width:100%; width:auto; height:auto; object-fit:contain; display:block; }

/* ---------- founders ---------- */
.founder-card{ padding:24px; display:flex; flex-direction:column; gap:16px; }
.founder-head{ display:flex; align-items:flex-start; gap:16px; }
.founder-photo{ width:80px; height:80px; border-radius:var(--radius-pill); flex:0 0 80px; object-fit:cover; }
.founder-name{ font-size:var(--text-lg); font-weight:600; margin-bottom:4px; }
[lang="ar"] .founder-name{ font-weight:700; }
.founder-title{ font-size:var(--text-sm); color:var(--text-secondary); font-weight:500; text-align:start; }
.founder-bio{ font-size:var(--text-base); color:var(--text-secondary); margin-top:4px; }
.founder-li{
  display:inline-flex; align-items:center; gap:4px; font-size:var(--text-sm); font-weight:600;
  color:var(--action); text-decoration:none; margin-top:8px;
}
.founder-li:hover{ text-decoration:underline; text-underline-offset:3px; }

/* ---------- FAQ ---------- */
.faq{ display:flex; flex-direction:column; gap:12px; max-width:780px; }
details.qa{ padding-inline:24px; overflow:hidden; }
details.qa summary{
  list-style:none; cursor:pointer; padding-block:16px;
  display:flex; align-items:center; gap:16px;
  font-weight:600; font-size:var(--text-lg);
}
[lang="ar"] details.qa summary{ font-weight:700; }
details.qa summary::-webkit-details-marker{ display:none; }
details.qa summary .ico{
  margin-inline-start:auto; flex:0 0 auto; color:var(--text-muted);
  font-size:var(--text-xl); line-height:1;
  transition:transform var(--duration-base) var(--ease-out);
}
details.qa[open] summary .ico{ transform:rotate(45deg); }
details.qa summary:focus-visible{ outline-offset:-2px; }
details.qa .ans{ padding-block:0 16px; font-size:var(--text-base); color:var(--text-secondary); max-width:62ch; }

/* ---------- final CTA ---------- */
.final{
  padding:48px; text-align:center; display:flex; flex-direction:column;
  align-items:center; gap:16px; background:var(--surface-base);
}
.final h2{ font-size:var(--text-2xl); max-width:22ch; }
.final p{ font-size:var(--text-lg); color:var(--text-secondary); max-width:52ch; }
.final .cta-cols{ display:flex; gap:24px; flex-wrap:wrap; justify-content:center; align-items:flex-start; margin-top:8px; }
.final .col{ display:flex; flex-direction:column; gap:8px; align-items:center; }
.final .col small{ font-size:var(--text-xs); color:var(--text-secondary); }
.final .inline-form{ justify-content:center; }

/* ---------- footer ---------- */
footer.site{ padding-block:40px; border-top:1px solid var(--border-faint); }
footer .wrap{
  display:flex; gap:16px; align-items:center; flex-wrap:wrap;
  font-size:var(--text-sm); color:var(--text-secondary);
}
footer .spacer{ flex:1; }
footer nav{ display:flex; gap:16px; flex-wrap:wrap; }
.footer-break{ flex-basis:100%; height:0; }

/* ---------- back to top ---------- */
.go-top{
  position:fixed; bottom:24px; inset-inline-end:24px; z-index:900;
  width:40px; height:40px; border-radius:var(--radius-pill);
  background:var(--text-primary); color:var(--surface-bg);
  display:grid; place-items:center;
  opacity:0; pointer-events:none; transform:translateY(8px);
  transition:opacity var(--duration-slow) var(--ease-out),
             transform var(--duration-slow) var(--ease-out);
  box-shadow:var(--shadow-md); text-decoration:none;
}
.go-top svg{ width:20px; height:20px; }
.go-top.visible{ opacity:.7; pointer-events:auto; transform:translateY(0); }
.go-top:hover{ opacity:1; }

/* ---------- keyboard focus (WCAG 2.4.7 / 2.4.11) ---------- */
:where(a, button, summary, input, select, textarea, [tabindex]):focus-visible{
  outline:2px solid var(--action);
  outline-offset:3px;
}

/* ---------- responsive: tablet ---------- */
@media (max-width:860px){
  .wrap{ padding-inline:24px; }
  .hero h1{ font-size:var(--text-2xl); }
  .hero-grid{ grid-template-columns:1fr; gap:32px; }
  /* reset placement so items stack in source order: title → diagram → CTA */
  .hero-copy,.hero-visual,.hero-cta{ grid-column:1; grid-row:auto; }
  .hero-visual{ align-self:unset; }
  .grid-2,.grid-3,.checklist,.ai-gaps{ grid-template-columns:1fr; }

  .why-system-grid{ grid-template-columns:1fr; }
  .why-system-grid > .sec-head,
  .why-system-grid > .ai-honeycomb-wrap,
  .why-system-grid > .ai-gaps,
  .why-system-grid > .handoff{ grid-column:1; grid-row:auto; }

  /* split-brain: stack the two halves vertically */
  .split-brain{ grid-template-columns:1fr; min-height:unset; max-width:none; }
  .left-brain{
    border-radius:var(--radius-lg) var(--radius-lg) 0 0;
  }
  .right-brain{
    border-radius:0 0 var(--radius-lg) var(--radius-lg);
  }
  /* the fracture column becomes a horizontal icon strip */
  .fracture{ flex-direction:row; min-height:64px; justify-content:space-evenly; gap:0; padding-block:8px; }
  .frac-line{ display:none; }
  .frac-line-h{ display:block; }

  .sysmap{ max-width:440px; }
  .sysmap .node{ width:104px; padding:8px; }
  .sysmap .node.node-wide{ width:120px; }
  .sysmap .hub{ width:128px; gap:4px; }
  .sysmap .hub-item{ padding:8px 4px; }
}

/* ---------- responsive: phone ---------- */
@media (max-width:480px){
  section{ padding-block:40px; }
  .hero{ padding-block:40px 32px; }
  .final{ padding:24px 16px; }
  .wrap{ padding-inline:16px; }
  .sec-head h2{ font-size:var(--text-xl); }
  .final h2{ font-size:var(--text-xl); }

  /* lifecycle diagram: stays in 3 columns, just tighter */
  .diagram{ padding:8px; }
  .stage{ padding:8px 4px; }
  .stage .s-what{ font-size:var(--text-sm); }
  .stage .s-what strong{ font-size:var(--text-base); }
  .dia-h .flow-arrow svg{ width:16px; height:16px; }

  .cta-sub{ flex-wrap:wrap; }
  .inline-form .btn{ width:100%; justify-content:center; }

  .sysmap{ max-width:100%; }
  .sysmap .node{ width:88px; padding:8px 4px; }
  .sysmap .node.node-wide{ width:96px; }
  .sysmap .hub{ width:112px; }

  details.qa .ans{ max-width:none; }

  .final .col{ width:100%; }
  .final .inline-form{ flex-direction:column; }
  .final .inline-form .field{ flex:none; width:100%; }
}

/* ============================================================================
   OPPORTUNITY SCREENER  (index.html + ar.html, after #solution)

   A visual for the claim #solution already makes: "Every go/no-go, recorded
   where the next proposal can find it." Cards drop in from above, are scored
   on two axes, and are flicked out in the direction of the decision.

   To remove entirely, delete this block, <section id="screener"> on both
   pages, and the <script> immediately after each of those sections.

   TWO AXES IS A SIMPLIFICATION, AND THE COPY SAYS SO
   Real screening weighs more than two factors. Two are drawn because two fit
   on a card and read in a glance, so the copy calls them "two of the factors"
   and the note repeats it. Do not tighten that wording into a claim that the
   system checks exactly these two. Adding a third axis later is a copy change
   plus one more .scr-axis, not a rebuild.

   The two shown are not the same product, either: eligibility is capacity
   based and comes from the readiness diagnostic that /assessment sells, while
   strategic fit is this system's own judgement. The copy says so and links
   across, so the two surfaces reinforce each other rather than overlap.

   ON THE LOOP
   DESIGN.md rule 6 bans a permanent loop used to signal that something is
   clickable. This is not an affordance: it demonstrates the judgement itself,
   arrival through to verdict, which is informational motion. Two guards cost
   the effect nothing: it pauses off screen and in a hidden tab, and reduced
   motion never animates at all.

   ON THE SWIPE DIRECTION IN RTL
   The flick is driven by --slide, so it mirrors with the page rather than
   hard-coding left and right (DESIGN.md rule 4). Whether approve should stay
   physically rightward in Arabic, the way the swipe-to-approve convention
   does, is an open question. It is safe either way because direction never
   carries the verdict alone: icon, wording and border style all repeat it.

   NO-JS AND REDUCED-MOTION PATH
   The markup ships fully revealed: every score and every verdict. Everything
   that hides content is scoped under .is-animated, which only JavaScript adds,
   and only when the visitor has not asked for reduced motion. The static state
   is the complete state, not an empty shell.
   ============================================================================ */

/* Half the width, and it takes the end column so the copy leads. This sits
   inside #solution rather than in a section of its own: the go/no-go argument
   is made once, by that section's heading, and this is the evidence for it. */
.scr-layout{
  display:grid; grid-template-columns:1fr 1fr;
  gap:48px; align-items:center;
}
/* h3 because #solution's h2 already owns the argument. site.css sets weight and
   tracking on h3 but no size, so the scale is applied here rather than left to
   the browser default, which is off the seven-step ramp. */
.scr-copy h3{ font-size:var(--text-lg); margin-bottom:16px; }

.scr-tests{ margin:24px 0 0; padding:0; display:flex; flex-direction:column; gap:16px; }
.scr-tests dt{
  font-size:var(--text-sm); font-weight:700; color:var(--text-primary);
  letter-spacing:var(--tracking-head);
}
.scr-tests dd{ margin:4px 0 0; font-size:var(--text-sm); color:var(--text-secondary); }
[lang="ar"] .scr-tests dt{ letter-spacing:0; }

.scr-link{
  color:var(--brand); font-weight:600; text-decoration:underline;
  text-underline-offset:3px; text-decoration-thickness:1px;
}
.scr-link:hover{ color:var(--brand-deep); }
.scr-note{ font-size:var(--text-xs); color:var(--text-muted); margin-top:24px; }

/* min-width:0 so a long donor name cannot push the grid column wider. */
.scr-col{ min-width:0; }

.screener{
  --slide:1;
  /* The exit runs longer than --duration-slow so the flick reads as a drift
     rather than a snap. Derived from the token by multiplication rather than
     written as a bare 600ms, and scoped to this component, so the global
     motion scale stays at 150 / 200 / 300 as DESIGN.md specifies. */
  --scr-exit:calc(var(--duration-slow) * 2);
  padding:24px;
}
[dir="rtl"] .screener{ --slide:-1; }

.scr-track{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:1fr; gap:16px;
}

.scr-card{
  display:flex; flex-direction:column; gap:12px;
  background:var(--surface-raised);
  border:1px solid var(--border-subtle);
  border-radius:var(--radius-md);
  padding:16px;
  box-shadow:var(--shadow-sm);
}
.scr-donor{ display:block; font-size:var(--text-lg); font-weight:600; letter-spacing:var(--tracking-head); }
[lang="ar"] .scr-donor{ font-weight:700; letter-spacing:0; }
.scr-type{ display:block; font-size:var(--text-xs); font-weight:600; color:var(--text-muted); margin-top:4px; }
.scr-facts{
  display:flex; flex-wrap:wrap; gap:8px 16px;
  font-size:var(--text-sm); color:var(--text-secondary);
  padding-block:12px; border-block:1px solid var(--border-faint);
}
/* Latin-only values stay LTR inside RTL prose. */
.scr-amount{ font-weight:600; color:var(--text-primary); direction:ltr; unicode-bidi:isolate; }

.scr-axis{ display:flex; align-items:center; gap:8px; font-size:var(--text-xs); }
.scr-axis + .scr-axis{ margin-top:8px; }
.scr-axis-name{ color:var(--text-secondary); font-weight:600; }
.stars{ display:inline-flex; gap:4px; margin-inline-start:auto; flex:0 0 auto; }
.stars span{ display:block; line-height:0; }
/* Deliberately ink, not the brand emerald. --action resolves to --brand which
   is also --maturity-5, so an emerald 3-star score sitting in the same view as
   an emerald button is exactly the D3 collision. Ink sidesteps it, and filled
   against outline carries the score by shape regardless. */
.stars svg{
  width:16px; height:16px;
  fill:none; stroke:var(--border-default); stroke-width:1.5; stroke-linejoin:round;
}
.stars[data-score="1"] span:nth-child(-n+1) svg,
.stars[data-score="2"] span:nth-child(-n+2) svg,
.stars[data-score="3"] span:nth-child(-n+3) svg{ fill:var(--text-primary); stroke:var(--text-primary); }

/* Verdict: icon plus wording, never colour on its own. */
.scr-verdict{
  display:flex; align-items:center; gap:8px; margin-top:auto;
  font-size:var(--text-xs); font-weight:600; line-height:var(--leading-tight);
}
.scr-verdict svg{ width:16px; height:16px; flex:0 0 auto; }
.scr-card[data-verdict="pursue"] .scr-verdict{ color:var(--success-ink); }
.scr-card[data-verdict="capacity"] .scr-verdict{ color:var(--warn); }
.scr-card[data-verdict="strategy"] .scr-verdict{ color:var(--text-muted); }
.scr-card[data-verdict="capacity"],
.scr-card[data-verdict="strategy"]{ border-style:dashed; }

/* ---- the two destinations, labelled so the first flick already reads ---- */
.scr-rails{
  display:none;
  justify-content:space-between; gap:16px; margin-top:16px;
  font-size:var(--text-xs); font-weight:600; color:var(--text-muted);
}
.rail{ display:inline-flex; align-items:center; gap:4px; }
.rail-reject::before{ content:"\2190"; }
.rail-accept::after{ content:"\2192"; }
[dir="rtl"] .rail-reject::before{ content:"\2192"; }
[dir="rtl"] .rail-accept::after{ content:"\2190"; }
.rail-accept{ color:var(--success-ink); }

/* ---- animated mode. Only JavaScript adds .is-animated, and only when the
        visitor has not asked for reduced motion. ---- */
.screener.is-animated .scr-track{
  display:block; position:relative; min-height:258px;
  overflow:hidden;              /* so the flick leaves the frame cleanly */
}
.screener.is-animated .scr-rails{ display:flex; }

/* The resting state is above the frame, never beside it: a card always enters
   downward. The script snaps a departed card back to this state with its
   transition suppressed, so it never animates in from where the flick left it. */
.screener.is-animated .scr-card{
  position:absolute; inset-inline:0; top:0;
  opacity:0; pointer-events:none;
  transform:translateY(-20px) scale(0.98);   /* waiting above the frame */
  transition:opacity var(--duration-slow) var(--ease-out),
             transform var(--duration-slow) var(--ease-out);
}
/* drops into place */
.screener.is-animated .scr-card.is-current{
  opacity:1; transform:none;
}
/* and is flicked out toward its verdict, gently */
.screener.is-animated .scr-card.is-out{
  opacity:0;
  transition:opacity var(--scr-exit) var(--ease-out),
             transform var(--scr-exit) var(--ease-out);
}
.screener.is-animated .scr-card.is-out[data-verdict="pursue"]{
  transform:translateX(calc(var(--slide) * 115%)) rotate(calc(var(--slide) * 3deg));
}
.screener.is-animated .scr-card.is-out[data-verdict="capacity"],
.screener.is-animated .scr-card.is-out[data-verdict="strategy"]{
  transform:translateX(calc(var(--slide) * -115%)) rotate(calc(var(--slide) * -3deg));
}

/* scores and verdict arrive in sequence, so the reader sees the judgement
   being made rather than a card that was already stamped */
.screener.is-animated .stars span,
.screener.is-animated .scr-verdict{
  opacity:0; transition:opacity var(--duration-fast) var(--ease-out);
}
.screener.is-animated .stars span:nth-child(2){ transition-delay:60ms; }
.screener.is-animated .stars span:nth-child(3){ transition-delay:120ms; }
.screener.is-animated .scr-card[data-stage="1"] .scr-axis-eligibility .stars span,
.screener.is-animated .scr-card[data-stage="2"] .stars span,
.screener.is-animated .scr-card[data-stage="3"] .stars span{ opacity:1; }
.screener.is-animated .scr-card[data-stage="3"] .scr-verdict{ opacity:1; }

@media (max-width:860px){
  .scr-layout{ grid-template-columns:1fr; gap:32px; }
}
@media (max-width:480px){
  .screener{ padding:16px; }
  /* Taller than the base frame: a long donor name can wrap to two lines once
     the card narrows this much, in either language. */
  .screener.is-animated .scr-track{ min-height:304px; }
}
/* ------------------------- END OPPORTUNITY SCREENER ---------------------- */