/* ═══════════════════════════════════════════════════════════════════════════
   Aii Profit Leak Intelligence — homepage.

   The same design system the product itself runs on: the PayFlow glassmorphism
   template, recoloured to the AII gold. Tokens, glass values, tile borders,
   entrance timing and the ambient field are all carried over deliberately, so
   that arriving at the command centre from this page does not feel like
   arriving at a different product.

   Hand-written rather than Tailwind-via-CDN, because this package promises it
   opens with a double-click and no build step. A CDN that ships a compiler to
   the browser would keep that promise only in the narrowest sense.

   WHAT IS DECORATION AND WHAT IS INFORMATION. The accent family (--a1…--a6)
   is decoration: it varies along the gold axis so six tiles read as a set.
   Red and green are information — risk and profit — and they are never drawn
   from the gold family, because a reader must be able to tell at a glance
   which colour is telling them something.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  color-scheme: dark;

  /* The template's near-black, so glass has something to be lighter than. */
  --bg: #030303;
  --panel: #070707;

  --fg: #ffffff;
  --fg-rgb: 255, 255, 255;
  --muted: rgba(255, 255, 255, 0.66);
  /* 0.48, not lower. This carries captions, citations and provenance — the
     lines a sceptical reader checks — and below this it stops clearing 4.5:1
     against the page at the sizes used here. */
  --dim: rgba(255, 255, 255, 0.48);

  /* The brand, matching the product exactly. `--gold` is the fill and is the
     same in every context; `--gold-ink` is gold used as text, lifted so it
     stays comfortable on glass that is itself slightly lit. */
  --gold: #d4af37;
  --gold-ink: #e3c04f;
  --gold-light: #f2d98b;
  --gold-deep: #b8912a;
  --gold-rgb: 212, 175, 55;
  --on-gold: #140f00;
  --gold-fill: linear-gradient(135deg, #f2d98b 0%, #d4af37 55%, #b8912a 100%);

  /* Information colours. Not in the accent family, and never used for
     decoration. */
  --red: #ff8179;
  --red-rgb: 255, 129, 121;
  --green: #73ddb0;
  --green-rgb: 115, 221, 176;

  --line: rgba(255, 255, 255, 0.10);
  --line-strong: rgba(255, 255, 255, 0.20);
  --shadow-rgb: 0, 0, 0;
  --shadow-strength: 0.45;

  /* ── glass ──────────────────────────────────────────────────────────────
     The template's own numbers: backdrop-blur-xl is 24px over bg-white/10.
     Four parts are needed before a pane reads as glass rather than as a
     tinted box — a heavy blur with saturation so what is behind bleeds
     through coloured; a fill thin enough to see through; a lit top edge and a
     dark bottom one, which is what gives the eye thickness; and a soft drop
     beneath. The fill is a flat wash and not a gradient, because the one
     thing glass must not cost is the legibility of a figure sitting on it. */
  --glass-blur: 24px;
  --glass-saturate: 180%;
  --glass-fill: rgba(255, 255, 255, 0.10);
  --glass-fill-strong: rgba(255, 255, 255, 0.14);
  --glass-edge: rgba(255, 255, 255, 0.30);
  --glass-rim: rgba(0, 0, 0, 0.55);
  --glass-sheen: linear-gradient(135deg,
                   rgba(255, 255, 255, 0.07) 0%,
                   rgba(255, 255, 255, 0.02) 28%,
                   rgba(255, 255, 255, 0) 55%);

  /* The accent family. The template themes each bento tile a different hue;
     a gold brand cannot, because six hues stop being one brand. The variation
     runs from champagne to deep brass instead. */
  --a1: 242, 217, 139;
  --a2: 212, 175, 55;
  --a3: 217, 142, 4;
  --a4: 184, 118, 42;
  --a5: 232, 199, 102;
  --a6: 160, 124, 36;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  min-width: 320px;
  background: var(--bg);
  color: var(--fg);
  font-family: Inter, ui-sans-serif, system-ui, "Segoe UI", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; }

button:focus-visible,
a:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 4px;
}

/* The display face, used light. The weight is what makes a headline read as
   architectural rather than loud. Body copy and every figure stay Inter: a
   display face at 10px in a column of citations is harder to read, and
   Bricolage's wider forms would cost a money column its alignment. */
.display {
  font-family: "Bricolage Grotesque", Inter, system-ui, sans-serif;
  font-weight: 200;
  letter-spacing: -0.035em;
}

.gold { color: var(--gold-ink); }
.muted { color: var(--muted); }
.dim { color: var(--dim); }
.risk-ink { color: var(--red); }
.green { color: var(--green); }

.gold-ink {
  background: linear-gradient(110deg, #fff0ba, #b58132);
  color: transparent;
  background-clip: text;
  -webkit-background-clip: text;
}

.shell {
  max-width: 1210px;
  margin-inline: auto;
  padding-inline: 24px;
}

/* ── the brand backdrop ─────────────────────────────────────────────────────
   A gold circuit field, dark on one side and dense on the other. Two things
   follow from that asymmetry.

   First, the dense side has to be muted or text laid over it stops being
   readable, so a scrim runs across it weighted towards the busy end rather
   than the empty one.

   Second, the empty side is where the reading starts — and which side that is
   depends on the language. In Arabic the whole layer is mirrored, scrim
   included, so the gold stays out from under the first word either way.

   WebP first at 111 KB, with a JPEG beside it for anything that cannot read
   it, and the page's own near-black underneath if neither arrives. */
.backdrop {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image: image-set(url("assets/backdrop.webp") type("image/webp"),
                              url("assets/backdrop.jpg") type("image/jpeg"));
  background-image: -webkit-image-set(url("assets/backdrop.webp") type("image/webp"),
                                      url("assets/backdrop.jpg") type("image/jpeg"));
  background-size: cover;
  background-position: center right;
  background-repeat: no-repeat;
  opacity: 0.5;
}

.backdrop::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to right,
                rgba(3, 3, 3, 0.30) 0%,
                rgba(3, 3, 3, 0.58) 55%,
                rgba(3, 3, 3, 0.74) 100%);
}

:root[dir="rtl"] .backdrop { transform: scaleX(-1); }

/* ── the ambient field ───────────────────────────────────────────────────────
   Standing in for the template's hosted 3D wave. Four soft gold bodies on very
   long, offset drifts, so the field never visibly repeats and never resolves
   into a shape you could name.

   Built locally on purpose. The template loads its background from a
   third-party embed; this page is the front door of a system that reads a
   company's accounts, and a page that reaches out to another origin to draw
   its wallpaper is a page that can leak who is reading it — and one that
   breaks the day that origin does. The look is worth having. The dependency
   is not.

   Transform-only animation under `filter: blur()` stays on the compositor, so
   this costs no layout and no paint per frame. */
.ambient-field {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  contain: strict;
}

.ambient-field > span {
  position: absolute;
  display: block;
  border-radius: 50%;
  filter: blur(80px);
  /* 0.5 before the backdrop existed. Two light sources competing made the
     glass read as muddy rather than lit. */
  opacity: 0.2;
  will-change: transform;
}

.ambient-field .w1 {
  width: 46rem; height: 34rem; top: -12rem; left: 48%;
  background: radial-gradient(circle, rgba(var(--a2), 0.42), transparent 68%);
  animation: wave-a 34s ease-in-out infinite;
}
.ambient-field .w2 {
  width: 38rem; height: 30rem; top: 18%; right: -10rem;
  background: radial-gradient(circle, rgba(var(--a3), 0.30), transparent 68%);
  animation: wave-b 42s ease-in-out infinite;
}
.ambient-field .w3 {
  width: 34rem; height: 28rem; bottom: -8rem; left: -8rem;
  background: radial-gradient(circle, rgba(var(--a5), 0.26), transparent 68%);
  animation: wave-c 38s ease-in-out infinite;
}
.ambient-field .w4 {
  width: 30rem; height: 24rem; bottom: 6%; right: 22%;
  background: radial-gradient(circle, rgba(var(--a6), 0.22), transparent 68%);
  animation: wave-b 46s ease-in-out infinite reverse;
}

@keyframes wave-a {
  0%, 100% { transform: translate3d(-6%, 0, 0) scale(1); }
  50%      { transform: translate3d(6%, 4%, 0) scale(1.12); }
}
@keyframes wave-b {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1.05); }
  50%      { transform: translate3d(-8%, -5%, 0) scale(0.95); }
}
@keyframes wave-c {
  0%, 100% { transform: translate3d(0, 2%, 0) scale(0.98); }
  50%      { transform: translate3d(7%, -4%, 0) scale(1.1); }
}

/* Everything the reader actually reads sits above the field. */
.page { position: relative; z-index: 1; }

/* ── entrance ───────────────────────────────────────────────────────────────
   20px up over 0.7s, staggered in 50ms steps. The stagger is the point:
   everything arriving at once reads as a page load; arriving in sequence
   reads as a page being built. */
@keyframes fade-slide {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: none; }
}

.fade-slide { animation: fade-slide 0.7s cubic-bezier(0.22, 1, 0.36, 1) both; }

.d1 { animation-delay: 0.10s; }
.d2 { animation-delay: 0.15s; }
.d3 { animation-delay: 0.20s; }
.d4 { animation-delay: 0.25s; }
.d5 { animation-delay: 0.30s; }
.d6 { animation-delay: 0.35s; }
.d7 { animation-delay: 0.40s; }
.d8 { animation-delay: 0.45s; }

/* ── glass surfaces and the bento tile ──────────────────────────────────────
   `.tile` is a pane whose border carries its accent and brightens on hover,
   with a glow that exists only while hovered. `--a` defaults to the brand
   gold, so a tile with no accent class still belongs to the set. */
.surface,
.tile {
  --a: var(--a2);
  position: relative;
  isolation: isolate;
  border-radius: 1rem;
  background: var(--glass-fill);
  border: 1px solid rgba(var(--a), 0.20);
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
  box-shadow:
    inset 0 1px 0 0 var(--glass-edge),
    inset 0 -1px 0 0 var(--glass-rim),
    0 10px 30px -18px rgba(var(--shadow-rgb), var(--shadow-strength));
  transition: border-color 320ms ease, box-shadow 320ms ease, transform 320ms ease;
}

.surface::before,
.tile::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background:
    radial-gradient(120% 90% at 0% 0%, rgba(var(--a), 0.12), transparent 60%),
    var(--glass-sheen);
  pointer-events: none;
}

.tile:hover {
  border-color: rgba(var(--a), 0.42);
  box-shadow:
    inset 0 1px 0 0 var(--glass-edge),
    inset 0 -1px 0 0 var(--glass-rim),
    0 18px 44px -22px rgba(var(--a), 0.40);
}

.surface-strong { background: var(--glass-fill-strong); }

.a1 { --a: var(--a1); }
.a2 { --a: var(--a2); }
.a3 { --a: var(--a3); }
.a4 { --a: var(--a4); }
.a5 { --a: var(--a5); }
.a6 { --a: var(--a6); }

/* A browser without backdrop-filter would show a thin white wash over the
   page with the text still on it, which is unreadable. These get an opaque
   panel instead — it loses the effect and keeps the content. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .surface, .tile { background: var(--panel); }
  .surface-strong { background: #0c0c0c; }
}

/* ── the chrome ─────────────────────────────────────────────────────────────
   The template's signature: it floats free of the page, pinned to the
   viewport, centred, and inset by a margin that widens with the breakpoint.
   The width calculation is the template's own. */
.chrome {
  position: fixed;
  top: 1rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 50;
  width: calc(100% - 2rem);
  max-width: 1210px;
}

@media (min-width: 640px) { .chrome { width: calc(100% - 3rem); } }
@media (min-width: 1024px) { .chrome { width: calc(100% - 4rem); } }

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 10px 14px;
}

.brand { display: flex; align-items: center; gap: 12px; }
.brand img { height: 42px; width: 42px; object-fit: contain; }
.brand b { font-size: 17px; letter-spacing: 0.5px; }
.brand small {
  display: block;
  font-size: 8px;
  letter-spacing: 2px;
  color: var(--dim);
}

.nav nav { display: flex; gap: 6px; }

.nav nav a {
  border-radius: 0.625rem;
  padding: 8px 12px;
  font-size: 12px;
  color: var(--muted);
  border: 1px solid transparent;
  transition: color 240ms ease, background-color 240ms ease, border-color 240ms ease;
}

.nav nav a:hover {
  color: var(--gold-light);
  background: rgba(var(--gold-rgb), 0.12);
  border-color: rgba(var(--gold-rgb), 0.30);
}

.nav-actions { display: flex; align-items: center; gap: 10px; }

.lang {
  background: rgba(var(--fg-rgb), 0.04);
  border: 1px solid var(--line);
  color: var(--muted);
  padding: 9px 12px;
  border-radius: 0.625rem;
  font-size: 11px;
  transition: border-color 240ms ease, color 240ms ease;
}
.lang:hover { border-color: rgba(var(--gold-rgb), 0.45); color: var(--gold-light); }

.btn {
  border-radius: 0.625rem;
  padding: 11px 18px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  font-size: 12px;
  border: 1px solid transparent;
  transition: filter 240ms ease, border-color 240ms ease, background-color 240ms ease;
}

.btn-primary {
  background-image: var(--gold-fill);
  color: var(--on-gold);
  box-shadow: 0 8px 24px -6px rgba(var(--gold-rgb), 0.38);
}
.btn-primary:hover { filter: brightness(1.08); }

.btn-outline {
  background: rgba(var(--fg-rgb), 0.04);
  border-color: var(--line-strong);
  color: var(--gold-light);
}
.btn-outline:hover { border-color: rgba(var(--gold-rgb), 0.45); }

/* The narrow-screen navigation. The button appears only where the inline
   links are hidden, so the two are never both on screen. */
.nav-toggle {
  display: none;
  background: rgba(var(--fg-rgb), 0.04);
  border: 1px solid var(--line);
  color: var(--gold-ink);
  border-radius: 0.625rem;
  padding: 9px 12px;
  font-size: 14px;
  line-height: 1;
}
.nav-toggle:hover { border-color: rgba(var(--gold-rgb), 0.45); }

.nav-panel {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  margin-top: 8px;
  padding: 10px;
}

.nav-panel[hidden] { display: none; }

.nav-panel a {
  border-radius: 0.625rem;
  padding: 11px 12px;
  font-size: 12px;
  color: var(--muted);
  border: 1px solid transparent;
}

/* It spans the row under the links, and only appears once the one in the bar
   has gone. */
.nav-panel-lang { display: none; grid-column: 1 / -1; width: 100%; }

@media (max-width: 550px) {
  .nav-panel-lang { display: block; }
}

.nav-panel a:hover {
  color: var(--gold-light);
  background: rgba(var(--gold-rgb), 0.12);
  border-color: rgba(var(--gold-rgb), 0.30);
}

/* Clears the fixed chrome. Set here as one value because the bar is a single
   row at every width — the nav collapses rather than wrapping. */
.page { padding-top: 7rem; }

/* The chrome floats over the page, so an anchor jump would otherwise drop its
   target underneath it. Every linked section reserves the bar's height plus a
   little air, which is what makes "How it works" in the nav land on the
   heading rather than just below it. */
main [id] { scroll-margin-top: 7rem; }

/* ── hero ───────────────────────────────────────────────────────────────── */
.hero { text-align: center; padding-top: 24px; }

.tag, .eyebrow {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.16em;
  color: var(--gold-ink);
}

.tag {
  display: inline-flex;
  align-items: center;
  border: 1px solid rgba(var(--gold-rgb), 0.28);
  border-radius: 30px;
  padding: 9px 15px;
  background: rgba(var(--gold-rgb), 0.10);
}

.live-dot {
  width: 7px;
  height: 7px;
  background: var(--green);
  border-radius: 50%;
  display: inline-block;
  margin-inline-end: 7px;
  box-shadow: 0 0 10px var(--green);
  animation: pulse 2s infinite;
}

h1 {
  font-family: "Bricolage Grotesque", Inter, system-ui, sans-serif;
  font-weight: 200;
  font-size: clamp(43px, 7vw, 84px);
  line-height: 1.02;
  letter-spacing: -0.04em;
  margin: 21px 0;
}
h1 em { font-style: normal; }

.lead {
  font-size: 15px;
  line-height: 1.8;
  color: var(--muted);
  max-width: 690px;
  margin: 0 auto 25px;
}

.cta { display: flex; justify-content: center; gap: 11px; flex-wrap: wrap; }

/* ── the engine demonstration ───────────────────────────────────────────────
   Kept from the original package. It is the clearest thing on the page: it
   shows files going in and a risk and an opportunity coming out, and it says
   on its face that it is a demonstration. */
.engine-wrap {
  margin-top: 45px;
  border-radius: 1rem;
  overflow: hidden;
  text-align: start;
}

.engine-top,
.engine-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding: 13px 18px;
  color: var(--gold-ink);
  font: 10px ui-monospace, SFMono-Regular, monospace;
  letter-spacing: 0.04em;
}

.engine-top { border-bottom: 1px solid rgba(var(--a), 0.18); }
.engine-bottom { border-top: 1px solid rgba(var(--a), 0.18); }

.engine-stage {
  height: 420px;
  position: relative;
  overflow: hidden;
  background-image:
    linear-gradient(rgba(var(--gold-rgb), 0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(var(--gold-rgb), 0.06) 1px, transparent 1px);
  background-size: 30px 30px;
}

.wires { position: absolute; inset: 0; width: 100%; height: 100%; }

.wire {
  fill: none;
  stroke: rgba(var(--gold-rgb), 0.40);
  stroke-width: 2;
  stroke-dasharray: 8 6;
  animation: flow 6s linear infinite;
}
.risk-wire { stroke: rgba(var(--red-rgb), 0.38); }
.profit-wire { stroke: rgba(var(--green-rgb), 0.40); }

.packet { fill: var(--gold-light); filter: drop-shadow(0 0 7px var(--gold)); }
.risk-packet { fill: #ff8a8a; filter: drop-shadow(0 0 8px #ef6262); }
.profit-packet { fill: #92f6c3; filter: drop-shadow(0 0 8px #75d9ac); }

.node { position: absolute; }

.files {
  left: 3%;
  top: 29%;
  width: 22%;
  padding: 18px;
}

.kicker {
  font: 9px ui-monospace, SFMono-Regular, monospace;
  letter-spacing: 0.1em;
  color: var(--gold-ink);
}

.files-icons { display: flex; gap: 7px; margin: 16px 0; }

.files-icons span {
  padding: 9px 6px;
  border-radius: 0.5rem;
  font-size: 11px;
  background: rgba(var(--fg-rgb), 0.06);
  border: 1px solid var(--line-strong);
  color: var(--gold-light);
  font-weight: 600;
}

.files h3 { font-size: 13px; margin: 9px 0; }
.files p, .output p { font-size: 11px; color: var(--muted); line-height: 1.7; }
.mini { font-size: 9px; color: var(--dim); }

.core {
  position: absolute;
  left: 40.2%;
  top: 25%;
  width: 19.5%;
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.core img {
  width: 75%;
  position: relative;
  z-index: 1;
  filter: drop-shadow(0 0 29px rgba(var(--gold-rgb), 0.45));
}

.core span {
  position: absolute;
  top: 105%;
  font: 9px ui-monospace, SFMono-Regular, monospace;
  color: var(--gold-ink);
  text-align: center;
  letter-spacing: 0.1em;
}

.orbit {
  position: absolute;
  inset: -10%;
  border: 1px dashed rgba(var(--gold-rgb), 0.55);
  border-radius: 50%;
  animation: rotate 24s linear infinite;
}

.orbit-two {
  inset: -22%;
  border-color: rgba(var(--gold-rgb), 0.3);
  animation-direction: reverse;
  animation-duration: 33s;
}

.outcomes {
  position: absolute;
  right: 2.4%;
  top: 8%;
  width: 23%;
  height: 84%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 10px;
}

/* Risk and opportunity keep their own colours. These two panes are the one
   place on the page where the colour is the message. */
.output { padding: 14px 16px; flex: 1; }
.output-risk { --a: var(--red-rgb); }
.output-profit { --a: var(--green-rgb); }

.output h3 { font-size: 17px; margin: 8px 0; color: var(--red); }
.output-profit h3 { color: var(--green); }

.output strong {
  display: block;
  font-size: 20px;
  color: #ffd1c9;
  white-space: nowrap;
}
.output-profit strong { color: #8cecb7; }
.output strong small { font-size: 11px; }

.tiny-bars { display: flex; gap: 5px; align-items: end; height: 28px; }

.tiny-bars b {
  display: block;
  flex: 1;
  background: var(--red);
  border-radius: 2px;
  animation: bars 1.7s alternate infinite ease-in-out;
  height: 30%;
}
.tiny-bars b:nth-child(2) { height: 50%; animation-delay: .2s; }
.tiny-bars b:nth-child(3) { height: 90%; animation-delay: .4s; }
.tiny-bars b:nth-child(4) { height: 45%; animation-delay: .6s; }
.tiny-bars b:nth-child(5) { height: 80%; animation-delay: .8s; }
.tiny-bars b:nth-child(6) { height: 100%; animation-delay: 1s; }
.profit-bars b { background: var(--green); }

.mini-button {
  padding: 7px 11px;
  border: 1px solid var(--line-strong);
  border-radius: 0.5rem;
  background: rgba(var(--fg-rgb), 0.05);
  color: var(--gold-ink);
  font: 10px ui-monospace, SFMono-Regular, monospace;
  transition: border-color 240ms ease;
}
.mini-button:hover { border-color: rgba(var(--gold-rgb), 0.45); }

.engine-wrap.paused * { animation-play-state: paused !important; }

.disclaimer { font-size: 10px; color: var(--dim); padding: 13px 0 0; }

/* ── sections ───────────────────────────────────────────────────────────── */
.section-head { margin: 70px 0 25px; }

.section-head h2 {
  font-family: "Bricolage Grotesque", Inter, system-ui, sans-serif;
  font-weight: 200;
  font-size: clamp(25px, 3.4vw, 39px);
  letter-spacing: -0.035em;
  margin: 13px 0;
}

.section-head p {
  color: var(--muted);
  font-size: 13px;
  max-width: 720px;
  line-height: 1.8;
}

.metrics { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }

.metric, .panel, .steps article, .safety-grid article { padding: 22px; }

.metric span {
  font-size: 10px;
  color: var(--dim);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.metric strong {
  display: block;
  font-family: "Bricolage Grotesque", Inter, system-ui, sans-serif;
  font-weight: 200;
  font-size: clamp(24px, 3vw, 35px);
  margin: 12px 0;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}

.metric small { color: var(--muted); }

.details { display: grid; grid-template-columns: 1fr 1fr; gap: 13px; margin-top: 13px; }

.panel h3 {
  font-family: "Bricolage Grotesque", Inter, system-ui, sans-serif;
  font-weight: 200;
  font-size: 21px;
  letter-spacing: -0.03em;
}

.panel p { font-size: 12px; line-height: 1.9; color: var(--muted); }

.panel h4 {
  color: var(--gold-ink);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* The citations. These are the lines a sceptical reader checks, so they are
   set in mono and given room rather than being squeezed into the margin. */
.panel code {
  display: block;
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid var(--line);
  border-radius: 0.5rem;
  padding: 10px;
  margin: 7px 0;
  color: var(--muted);
  font: 10px ui-monospace, SFMono-Regular, monospace;
  overflow-wrap: anywhere;
}

.confidence {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
  margin: 17px 0;
  font-size: 12px;
  color: var(--muted);
}

.confidence b { color: var(--fg); font-variant-numeric: tabular-nums; }

.confidence i {
  grid-column: 1 / -1;
  height: 5px;
  border-radius: 5px;
  background:
    linear-gradient(90deg, var(--gold-deep), var(--gold-light))
      left / var(--value) 100% no-repeat,
    rgba(var(--fg-rgb), 0.10);
}

.steps, .safety-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 11px; }

.steps article span {
  font-size: 10px;
  color: var(--gold-ink);
  letter-spacing: 0.14em;
}

.steps h3, .safety-grid h3 { font-size: 15px; font-weight: 600; }
.steps p, .safety-grid p { font-size: 12px; color: var(--muted); line-height: 1.8; }

.stats {
  display: flex;
  justify-content: space-around;
  gap: 15px;
  text-align: center;
  margin: 25px 0;
  padding: 22px;
}

.stats b {
  display: block;
  font-family: "Bricolage Grotesque", Inter, system-ui, sans-serif;
  font-weight: 200;
  color: var(--gold-ink);
  font-size: 38px;
  letter-spacing: -0.03em;
}

.stats span { font-size: 12px; color: var(--muted); }

.safety-grid { grid-template-columns: repeat(3, 1fr); }
.safety-grid b { font-size: 28px; color: var(--gold-ink); }

.limitations { margin-top: 18px; }

.bottom-cta {
  text-align: center;
  margin-top: 65px;
  margin-bottom: 35px;
  padding: 40px 24px 45px;
}

.bottom-cta img { width: 96px; }

.bottom-cta h2 {
  font-family: "Bricolage Grotesque", Inter, system-ui, sans-serif;
  font-weight: 200;
  font-size: clamp(27px, 4vw, 45px);
  letter-spacing: -0.035em;
}

footer {
  font-size: 11px;
  color: var(--dim);
  padding-top: 20px !important;
  padding-bottom: 30px !important;
  border-top: 1px solid var(--line);
  display: flex;
  justify-content: space-between;
  gap: 14px;
}

dialog {
  max-width: 430px;
  border: 1px solid rgba(var(--gold-rgb), 0.30);
  background: #0c0c0c;
  color: var(--fg);
  border-radius: 1rem;
  padding: 24px;
  box-shadow: 0 25px 100px rgba(0, 0, 0, 0.8);
}

dialog::backdrop { background: rgba(0, 0, 0, 0.72); }

.dialog-head { display: flex; justify-content: space-between; align-items: center; }

.dialog-head h3 {
  font-family: "Bricolage Grotesque", Inter, system-ui, sans-serif;
  font-weight: 200;
  letter-spacing: -0.03em;
}

.dialog-head button {
  background: transparent;
  color: var(--gold-ink);
  border: 0;
  font-size: 19px;
}

dialog p { font-size: 13px; line-height: 1.7; color: var(--muted); }

@keyframes rotate { to { transform: rotate(360deg); } }
@keyframes pulse { 50% { opacity: .3; } }
@keyframes flow { to { stroke-dashoffset: -150; } }
@keyframes bars { to { transform: scaleY(.55); } }

/* ── narrow ─────────────────────────────────────────────────────────────── */
@media (max-width: 850px) {
  .nav nav { display: none; }
  .nav-toggle { display: block; }
  .engine-stage { height: 375px; }
  .files { padding: 10px; }
  .files h3 { font-size: 11px; }
  .files p, .output p { font-size: 9px; }
  .output { padding: 11px; }
  .output strong { font-size: 15px; }
  .output h3 { font-size: 14px; }
  .steps { grid-template-columns: repeat(2, 1fr); }
  .safety-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 851px) {
  .nav-panel { display: none; }
}

@media (max-width: 550px) {
  .shell { padding-inline: 15px; }
  .page { padding-top: 6rem; }
  .nav { padding: 8px 10px; }
  .brand img { height: 34px; width: 34px; }
  .brand b { font-size: 14px; }
  .brand small { font-size: 7px; }
  /* Scoped to the bar: the copy inside the nav panel is the one that has
     to survive here, and both carry the `lang` class. */
  .nav-actions .lang { display: none; }
  .nav-actions .btn { font-size: 10px; padding: 10px 12px; }
  .hero { padding-top: 18px; }
  h1 { letter-spacing: -0.03em; }
  .engine-stage { height: 470px; }
  .wires { display: none; }
  .files { top: 4%; left: 5%; width: 90%; height: 24%; }
  .files-icons { margin: 6px 0; }
  .files-icons span { padding: 5px; }
  .files h3 { display: none; }
  .files p { margin: 5px 0; }
  .core { top: 33%; left: 34%; width: 32%; }
  .core span { font-size: 7px; }
  .outcomes { top: 66%; left: 3%; right: 3%; width: 94%; height: 31%; flex-direction: row; }
  .output { min-width: 0; padding: 9px; }
  .output h3 { font-size: 12px; }
  .output strong { font-size: 12px; white-space: normal; }
  .output p { font-size: 8px; }
  .tiny-bars { display: none; }
  .engine-top, .engine-bottom { font-size: 8px; padding: 12px; }
  .engine-bottom #trace { max-width: 42%; line-height: 1.5; }
  .metrics, .details, .safety-grid { grid-template-columns: 1fr; }
  .stats { flex-wrap: wrap; }
  .stats b { font-size: 28px; }
  .stats span { font-size: 10px; }
  footer { flex-direction: column; }
}

/* A figure that is sliding into place is a figure you cannot read, and a
   background that drifts is one more thing to track. Anyone who has asked not
   to be moved gets the page already assembled and still. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    scroll-behavior: auto !important;
    transition: none !important;
  }
}


/* ═══════════════════════════════════════════════════════════════════════════
   ARABIC

   The page runs right-to-left and changes face. Most of the layout needed
   nothing — it was written with logical properties and flex, both of which
   already follow the document direction. What did need saying is here.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Bricolage has no Arabic. IBM Plex Sans Arabic carries both the display and
   the body in this direction, which is also what the product itself uses, so
   the two read as one family. */
:root[lang="ar"] body,
:root[lang="ar"] .display,
:root[lang="ar"] h1,
:root[lang="ar"] .section-head h2,
:root[lang="ar"] .panel h3,
:root[lang="ar"] .metric strong,
:root[lang="ar"] .stats b,
:root[lang="ar"] .bottom-cta h2,
:root[lang="ar"] .dialog-head h3 {
  font-family: "IBM Plex Sans Arabic", Inter, system-ui, sans-serif;
}

/* Arabic needs its weight back. The display face is set at 200 because
   Bricolage is wide and open at that weight; Plex Arabic at 200 is thin to
   the point of breaking up on a dark background, and the tight negative
   tracking closes up letter joins that have to stay open. */
:root[lang="ar"] h1,
:root[lang="ar"] .section-head h2,
:root[lang="ar"] .panel h3,
:root[lang="ar"] .metric strong,
:root[lang="ar"] .stats b,
:root[lang="ar"] .bottom-cta h2,
:root[lang="ar"] .dialog-head h3 {
  font-weight: 400;
  letter-spacing: 0;
}

:root[lang="ar"] h1 { line-height: 1.25; }
:root[lang="ar"] .section-head h2 { line-height: 1.45; }

/* Wide tracking is a Latin device. On Arabic it pulls apart words that are
   joined, so the eyebrows and kickers lose it. */
:root[lang="ar"] .tag,
:root[lang="ar"] .eyebrow,
:root[lang="ar"] .kicker,
:root[lang="ar"] .metric span,
:root[lang="ar"] .panel h4,
:root[lang="ar"] .steps article span,
:root[lang="ar"] .brand small {
  letter-spacing: 0;
}

/* The engine reads left to right: files in on one side, findings out on the
   other. In Arabic that has to run the other way, or the diagram argues with
   the page around it. The wires are mirrored as a whole and the three nodes
   swap sides to match. */
:root[dir="rtl"] .wires { transform: scaleX(-1); }
:root[dir="rtl"] .files { left: auto; right: 3%; }
:root[dir="rtl"] .outcomes { right: auto; left: 2.4%; }
:root[dir="rtl"] .core { left: auto; right: 40.2%; }

/* Identifiers stay in Latin and stay left-to-right, whichever way the page
   runs. A citation reads as a path, and a path reversed is a different path.
   The elements also carry dir="ltr" in the markup; this keeps the block
   itself aligned with the column it sits in. */
:root[dir="rtl"] .panel code { text-align: left; }

/* The confidence rows put the label at the start and the figure at the end,
   which flex already handles — but the bar fills from the start of the line,
   and "start" has moved. */
:root[dir="rtl"] .confidence i {
  background:
    linear-gradient(270deg, var(--gold-deep), var(--gold-light))
      right / var(--value) 100% no-repeat,
    rgba(var(--fg-rgb), 0.10);
}