/* ═══════════════════════════════════════════════════════════════════════════
   site.css — the consulthedge.ai marketing pages (MKTSITE).

   ⛔ THIS IS THE APPROVED v5 DESIGN SYSTEM, built from
      docs/ux/playroom/2026-08-05_investor-site-hifi-v5.html (Ahmed, 2026-08-05).
      v1–v4 are dead. Do not reintroduce their card-grid layout.

   PALETTE IS NOT A CHOICE. Copied variable-for-variable from the LIVE home page
   (public/playroom.html) so a visitor crossing from the galaxy home into a page
   sees one site. Canonical values also in lib/artifacts/brand.ts:
   charcoal #1C1C2E · electric blue #2563EB · light blue #93C5FD · Inter.

   ⛔ FLAT. No neon, no glow, no gradient text (feedback_brand_flat_no_neon). The
   soft radial behind a hero is the same one the live home already ships.

   ⛔ RTL IS A MIRROR, NOT A TEXT-ALIGN. Logical properties throughout
   (margin-inline, padding-inline, inset-inline-start) so dir="rtl" flips the
   whole layout without one duplicated rule.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  --charcoal: #1C1C2E;
  --ink: #15151f;
  --blue: #2563EB;
  --blue-2: #1D4ED8;
  --lblue: #93C5FD;
  --off: #F1F5F9;
  --muted: #9aa1bd;
  --dim: #5f668a;
  --ghost: rgba(147, 197, 253, .14);
  --panel: #22223a;
  --panel-2: #1b1b2c;
  --ok: #34D399;
  --warn: #FBBF24;
  --font: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-ar: 'IBM Plex Sans Arabic', 'Inter', ui-sans-serif, system-ui, sans-serif;
  --maxw: 1160px;
  --r: 16px;
  --r-sm: 10px;
}

* { margin: 0; padding: 0; box-sizing: border-box }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100% }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto } }

body {
  min-height: 100%;
  background: var(--charcoal);
  color: var(--off);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  /* FR-MKTSITE-19 forbids horizontal scroll on a phone. */
  overflow-x: hidden;
}
html[lang="ar"] body { font-family: var(--font-ar) }
html[lang="ar"] h1, html[lang="ar"] h2, html[lang="ar"] h3 { letter-spacing: 0 }

a { color: var(--lblue); text-decoration: none }
a:hover { text-decoration: underline }
img, svg { max-width: 100%; height: auto }
.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: 26px }

/* ── skip link ────────────────────────────────────────────────────────────── */
.skip {
  position: absolute; inset-inline-start: -9999px; top: 0; z-index: 99;
  background: var(--blue); color: #fff; padding: 10px 18px; border-radius: 0 0 var(--r-sm) 0;
}
.skip:focus { inset-inline-start: 0 }

/* ── type scale ───────────────────────────────────────────────────────────── */
.d1 { font-size: clamp(38px, 5.6vw, 62px); line-height: 1.02; letter-spacing: -.038em; font-weight: 800 }
.d2 { font-size: clamp(26px, 3.4vw, 40px); line-height: 1.1; letter-spacing: -.03em; font-weight: 800 }
.d3 { font-size: clamp(19px, 2.2vw, 24px); line-height: 1.2; letter-spacing: -.02em; font-weight: 700 }
.lede { color: var(--muted); font-size: clamp(16px, 1.5vw, 19px); line-height: 1.55; max-width: 50ch }
.eyebrow {
  display: inline-flex; align-items: center; gap: 8px; color: var(--lblue);
  font-size: 11.5px; font-weight: 800; letter-spacing: .18em; text-transform: uppercase;
}
.eyebrow::before { content: ""; width: 22px; height: 1.5px; background: var(--blue); border-radius: 2px }

/* ── header ───────────────────────────────────────────────────────────────── */
.hd {
  position: sticky; top: 0; z-index: 44;
  background: rgba(21, 21, 31, .86);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--ghost);
}
.hd .wrap { display: flex; align-items: center; gap: 12px; min-height: 68px; flex-wrap: wrap }
/* direction:ltr — the wordmark is a NAME, not a sentence. Without it, RTL bidi
   reorders it on screen and the brand reads "AI Hedge". */
.brandlink {
  display: inline-flex; align-items: center; font-weight: 800; font-size: 19px;
  letter-spacing: -.02em; color: var(--off); direction: ltr;
}
.brandlink:hover { text-decoration: none }
.brandlink .ai { color: var(--lblue) }
.hdnav { display: flex; align-items: center; gap: 1px; flex: 1; flex-wrap: wrap; margin-inline-start: 18px }
.hdnav a { color: var(--muted); font-size: 13.5px; font-weight: 600; padding: 9px 12px; border-radius: 9px; white-space: nowrap }
.hdnav a:hover { color: var(--off); background: rgba(147, 197, 253, .07); text-decoration: none }
.hdnav a[aria-current="page"] { color: var(--off) }
.hdside { display: flex; align-items: center; gap: 9px; position: relative }

/* ── language selector — six mandatory languages (NFR-LANG) ───────────────── */
.langsel { position: relative }
.langbtn {
  display: inline-flex; align-items: center; gap: 6px;
  border: 1px solid var(--ghost); background: transparent; color: var(--muted);
  font: 600 13px/1 var(--font); padding: 10px 12px; border-radius: 9px; cursor: pointer;
}
.langbtn:hover { background: rgba(147, 197, 253, .07); color: var(--off) }
.langbtn svg { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 1.8 }
.langmenu {
  display: none; position: absolute; inset-inline-end: 0; top: calc(100% + 10px);
  min-width: 212px; background: var(--panel); border: 1px solid var(--ghost);
  border-radius: var(--r); padding: 6px; z-index: 60; box-shadow: 0 24px 50px rgba(0, 0, 0, .55);
}
.langmenu.open { display: block }
.langmenu button {
  display: flex; width: 100%; align-items: center; justify-content: space-between; gap: 10px;
  border: 0; background: transparent; color: var(--off); font: 600 13.5px/1.3 var(--font);
  padding: 10px; border-radius: 8px; cursor: pointer; text-align: start;
}
.langmenu button:hover { background: rgba(147, 197, 253, .09) }
.langmenu button[disabled] { color: var(--dim); cursor: default }
.langmenu button[disabled]:hover { background: transparent }
.langmenu button[aria-selected="true"] { background: rgba(37, 99, 235, .24) }
.langmenu .native { color: var(--muted); font-weight: 500; font-size: 12.5px }
.langmenu .sephdr { color: var(--dim); font: 700 10px/1 var(--font); letter-spacing: .14em; text-transform: uppercase; padding: 12px 10px 6px }
.langmenu .soonpill { font: 700 9.5px/1 var(--font); letter-spacing: .09em; text-transform: uppercase; color: var(--dim); border: 1px solid var(--ghost); border-radius: 5px; padding: 4px 6px }

/* ── buttons ──────────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  background: var(--blue); color: #fff; border: 0; border-radius: 12px;
  padding: 15px 28px; font: 700 15.5px/1 var(--font); cursor: pointer;
  box-shadow: 0 8px 24px -8px rgba(37, 99, 235, .9); text-align: center;
}
.btn:hover { background: var(--blue-2); text-decoration: none; color: #fff }
.btn.sm { padding: 10px 17px; font-size: 13.5px; border-radius: 10px; box-shadow: none }
.btn.ghost { background: transparent; color: var(--off); box-shadow: inset 0 0 0 1px var(--ghost) }
.btn.ghost:hover { background: rgba(147, 197, 253, .07) }
/* ⛔ The CTA never carries the word "free" — Ahmed 2026-08-05: "Stop using
   Signup free and make it Start now and highlight the signup it is free
   somewhere else not on the CTA". This line is that somewhere else. */
.freehint { color: var(--dim); font-size: 13px; margin-top: 14px }
.freehint b { color: var(--muted) }

/* ── sections ─────────────────────────────────────────────────────────────── */
section { padding: 96px 0; position: relative }
.shead { max-width: 56ch }
.shead .d2 { margin-top: 16px }
.shead .lede { margin-top: 16px }

/* ── hero ─────────────────────────────────────────────────────────────────── */
.hero { padding: 104px 0 84px; position: relative; overflow: hidden }
.hero::before {
  content: ""; position: absolute; top: -320px; inset-inline-start: 50%;
  transform: translateX(-50%); width: 1100px; height: 620px;
  background: radial-gradient(ellipse, rgba(37, 99, 235, .2) 0%, transparent 66%);
  pointer-events: none;
}
.herogrid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 56px; align-items: center; position: relative }
.hero .d1 { margin-top: 22px }
.hero .lede { margin-top: 22px }
.heroacts { margin-top: 34px; display: flex; gap: 13px; flex-wrap: wrap; align-items: center }

/* ── the product window — the app, drawn ──────────────────────────────────── */
.window {
  background: linear-gradient(168deg, #232340 0%, #1b1b2c 100%);
  border: 1px solid rgba(147, 197, 253, .2); border-radius: var(--r);
  overflow: hidden; box-shadow: 0 40px 90px -30px rgba(0, 0, 0, .85);
}
.wbar { display: flex; align-items: center; gap: 7px; padding: 12px 15px; background: rgba(0, 0, 0, .28); border-bottom: 1px solid var(--ghost) }
.wdot { width: 10px; height: 10px; border-radius: 50%; background: #3a3a55 }
.wurl { margin-inline-start: 12px; flex: 1; background: rgba(0, 0, 0, .3); border: 1px solid var(--ghost); border-radius: 7px; color: var(--dim); font-size: 11px; padding: 5px 11px; text-align: center; direction: ltr }
.wbody { display: flex; min-height: 290px }
.wside { width: 158px; flex: 0 0 auto; background: rgba(0, 0, 0, .22); border-inline-end: 1px solid var(--ghost); padding: 14px 10px }
.wnav { display: flex; align-items: center; gap: 9px; padding: 8px 9px; border-radius: 8px; color: var(--dim); font-size: 11.5px; font-weight: 600 }
.wnav.on { background: rgba(37, 99, 235, .22); color: var(--off) }
.wnav svg { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 1.9; flex: 0 0 auto }
.wmain { flex: 1; padding: 18px; min-width: 0 }
.wtitle { font-size: 12.5px; font-weight: 700; color: var(--muted) }
.bub { max-width: 86%; border-radius: 12px; padding: 11px 13px; font-size: 12.5px; line-height: 1.45; margin-top: 11px }
.bub.me { background: var(--blue); color: #fff; margin-inline-start: auto; border-end-end-radius: 4px }
.bub.them { background: rgba(147, 197, 253, .09); border: 1px solid var(--ghost); border-end-start-radius: 4px }

/* the deliverable — a finished file with a score */
.deliv {
  display: flex; align-items: center; gap: 13px;
  background: linear-gradient(150deg, #26264a 0%, #1e1e33 100%);
  border: 1px solid rgba(147, 197, 253, .26); border-radius: 12px; padding: 14px; margin-top: 13px;
}
.ftype {
  width: 42px; height: 52px; border-radius: 7px; background: var(--blue);
  display: flex; align-items: flex-end; justify-content: center; padding-bottom: 7px;
  font: 800 10px/1 var(--font); color: #fff; flex: 0 0 auto; position: relative; direction: ltr;
}
.ftype::before { content: ""; position: absolute; top: 0; inset-inline-end: 0; border-width: 0 11px 11px 0; border-style: solid; border-color: rgba(0, 0, 0, .32) transparent }
.ftype.x { background: #0f7b4f }
.ftype.p { background: #b7472a }
.ftype.n { background: #3d3d66 }
.deliv .meta { flex: 1; min-width: 0 }
.deliv .meta b { display: block; font-size: 13px; font-weight: 700 }
.deliv .meta span { display: block; color: var(--dim); font-size: 11px; margin-top: 3px }
.ring { width: 46px; height: 46px; flex: 0 0 auto; position: relative }
.ring svg { transform: rotate(-90deg) }
.ring b { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font: 800 13px/1 var(--font); color: var(--ok) }

/* ── stat band ────────────────────────────────────────────────────────────── */
.band { background: linear-gradient(180deg, rgba(37, 99, 235, .09) 0%, transparent 100%); border-block: 1px solid var(--ghost); padding: 52px 0 }
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 18px }
.stat { text-align: center }
.stat b { display: block; font-size: clamp(32px, 4vw, 46px); font-weight: 800; letter-spacing: -.04em; line-height: 1 }
.stat span { display: block; color: var(--muted); font-size: 13px; margin-top: 10px; line-height: 1.4 }

/* ── split rows ───────────────────────────────────────────────────────────── */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center }
.pts { display: grid; gap: 16px; margin-top: 26px }
.pt { display: flex; gap: 13px; align-items: flex-start }
.pt .tick { width: 22px; height: 22px; border-radius: 7px; background: rgba(37, 99, 235, .2); border: 1px solid rgba(147, 197, 253, .24); display: flex; align-items: center; justify-content: center; flex: 0 0 auto; margin-top: 1px }
.pt .tick svg { width: 12px; height: 12px; stroke: var(--lblue); fill: none; stroke-width: 2.6 }
.pt b { font-size: 14.5px; font-weight: 700 }
.pt p { color: var(--muted); font-size: 13.5px; margin-top: 3px }

/* ── the founder card — the identity proof ────────────────────────────────── */
/* Ahmed, 2026-08-16: "add some verification in this section so … google startup
   people can verify that i am a real person". This AMENDS the approved v5 hi-fi
   (docs/ux/playroom/2026-08-05_investor-site-hifi-v5.html), which showed initials
   in a gradient tile and no outbound profile. A diligence reviewer cannot verify
   a monogram. Do not "restore" the initials-only card — they are the FALLBACK
   now, not the design. */
.fcard { padding: 30px }
/* Fixed box, so the initials tile underneath and the photo on top occupy exactly
   the same square — the card never reflows depending on whether the photo loads.
   92px is not arbitrary: the crop below feeds it 181.5 source pixels, i.e. 1.97×,
   so the face is still sharp on a 2× phone screen. Enlarging this box WITHOUT a
   bigger source file trades the sharpness that makes a face readable for size
   that does not. */
.fphoto { position: relative; width: 92px; height: 92px; overflow: hidden; border-radius: 22px }
.fphoto .finit {
  position: absolute; inset: 0; direction: ltr;
  background: linear-gradient(150deg, #2563EB, #7c3aed);
  display: flex; align-items: center; justify-content: center;
  font: 800 31px/1 var(--font); color: #fff;
}
/* THE CROP. founder.jpg is a 363×363 half-body shot on a staircase — at 92px the
   uncropped frame renders a distant figure, not a recognisable person, which
   defeats the whole point of putting a face here. Measured off the source: the
   head spans y 11%→37% and sits at x 45%, LEFT of centre, so a plain centred
   object-position would cut it wrong. This shows source x 20%→70%, y 3%→53% —
   a 50% square on the head, ~16% headroom, cutting at mid-chest.
   The arithmetic, so it can be re-derived rather than re-guessed:
     window = 92px ÷ (50% of 363px) → the full image must render at 200%
     left   = -(20% × 363 × 92/181.5) = -37px = -40% of the box
     top    = -( 3% × 363 × 92/181.5) = -5.6px = -6%  of the box
   ⛔ PHYSICAL left/top, NOT the logical properties this file uses everywhere
   else. RTL mirrors the LAYOUT; it must not re-crop a man's face. With
   inset-inline-start the Arabic page would show source x 30%→80% and slice his
   head. This is the one place in site.css where the mirror is wrong.
   ⛔ max-width:none is load-bearing — the global `img { max-width:100% }` would
   otherwise clamp the 200% straight back to 100% and silently undo the crop. */
.fphoto img {
  position: absolute; display: block;
  width: 200%; height: 200%; max-width: none;
  left: -40%; top: -6%;
  object-fit: cover;
}
/* The hairline ring, moved off the <img> and onto an overlay: the image is now
   twice the size of its window, so a border on it would be clipped away with
   the rest of the overflow. ::after paints above both the photo and the
   initials fallback, so the card looks identical either way. */
.fphoto::after {
  content: ""; position: absolute; inset: 0; border-radius: 22px;
  box-shadow: inset 0 0 0 1px rgba(147, 197, 253, .3);
  pointer-events: none;
}
.fname { font-size: 18px; font-weight: 800; letter-spacing: -.015em; margin-top: 20px }
.frole { color: var(--lblue); font-size: 13px; font-weight: 600; margin-top: 3px }

/* ⛔ QUIET, AND DELIBERATELY SO. This was first built as a full-width panel
   under a "Verify the founder" heading, showing the profile URL in full with a
   ↗ — and Ahmed killed it on sight (2026-08-16). He was right, and the reason
   is worth keeping: a founder card that captions itself with proof is a card
   that looks like it is arguing. Every credible company does exactly this much
   — a small LinkedIn link under the name — and lets the reader draw the
   conclusion. The proof is that the link EXISTS, not that the page says so.
   ⛔ Do not grow this back: no heading, no badge, no "verified", no tick, no
   printed-out URL, no second network. */
.flink {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 16px;
  padding: 8px 14px; border-radius: 9px; color: var(--off);
  background: rgba(37, 99, 235, .14); border: 1px solid rgba(147, 197, 253, .2);
  font-size: 13px; font-weight: 600;
}
.flink:hover { background: rgba(37, 99, 235, .24); color: var(--off); text-decoration: none }
/* Inverted against every other icon rule in this file: i-linkedin is a solid
   shape, so it needs fill and no stroke. */
.flink svg { width: 14px; height: 14px; fill: var(--lblue); stroke: none; flex: 0 0 auto }

/* ── the numbered problem panel ───────────────────────────────────────────── */
.probs {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1px;
  margin-top: 44px; background: var(--ghost); border: 1px solid var(--ghost);
  border-radius: var(--r); overflow: hidden;
}
.prob { background: var(--ink); padding: 30px 26px; transition: background .2s }
.prob:hover { background: var(--panel-2) }
.prob .n { font: 800 12px/1 var(--font); color: var(--blue); letter-spacing: .1em; direction: ltr }
.prob b { display: block; font-size: 16px; font-weight: 700; margin-top: 16px; letter-spacing: -.01em }
.prob p { color: var(--muted); font-size: 13.5px; margin-top: 9px }

/* ── the pipeline — replaces "how it works" as a list ─────────────────────── */
.pipe { position: relative; margin-top: 52px; display: grid; grid-template-columns: repeat(5, 1fr) }
.pipe::before { content: ""; position: absolute; top: 31px; inset-inline: 8%; height: 2px; background: linear-gradient(90deg, var(--blue), var(--lblue)); opacity: .35 }
.pstep { position: relative; text-align: center; padding: 0 10px }
.pdot {
  width: 64px; height: 64px; margin: 0 auto 18px; border-radius: 19px;
  background: linear-gradient(155deg, #2a2a4d, #1d1d31); border: 1px solid rgba(147, 197, 253, .28);
  display: flex; align-items: center; justify-content: center; position: relative; z-index: 2;
  box-shadow: 0 12px 30px -12px rgba(0, 0, 0, .9);
}
.pdot svg { width: 26px; height: 26px; stroke: var(--lblue); fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round }
.pstep .k { font: 800 10.5px/1 var(--font); color: var(--blue); letter-spacing: .16em; text-transform: uppercase }
.pstep b { display: block; font-size: 15px; font-weight: 700; margin-top: 9px }
.pstep p { color: var(--dim); font-size: 12.5px; margin-top: 6px; line-height: 1.45 }

/* ── the specialist wall ──────────────────────────────────────────────────── */
/* ⛔ SAME HOLE, SAME FIX AS .appstrip — see the long note there. This was
   `repeat(auto-fill, minmax(214px, 1fr))`, four across, and it was only ever
   safe because every specialist grid happened to hold twelve. The roles are
   priced in docs/requirements/hedge-ai/20260718_06_Hedge-Pricing-Master-v22.html
   and that list changes; the moment a page carries a count four does not divide
   — thirteen does not — grid leaves empty cells and the section reads broken.
   Flex + centre has no cells to leave empty. Basis keeps the tiles equal. */
.wall { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 44px }
.wall > * { flex: 0 0 calc((100% - 36px) / 4) }
/* ⛔ THE COLUMN COUNT IS CHOSEN PER PAGE SO NO ROW ENDS WITH ONE TILE. Ahmed,
   2026-08-16, on the business and coding grids: "adjust the shapes or change it
   to look so ugly!!!"
   Centring a short last row (above) fixed the HOLE, but not the ORPHAN: business
   carries 13 specialists and coding 9, and at four across those end 4+4+4+1 and
   4+4+1 — a single tile marooned under a full row. A centred row of two or three
   reads as a deliberate short row; a centred row of ONE reads as a bug.
   There is no column count that suits every page, because the counts come from
   the priced roles and are what they are:
       12 (individual) → 4 across → 4+4+4    perfect
       13 (business)   → 5 across → 5+5+3    no orphan
        9 (coding)     → 3 across → 3+3+3    perfect
        4 (about)      → 4 across → one row
   So each page declares its own, and the tile width differs between pages by
   design — a visitor reads one page at a time, and each one is square.
   ⛔ IF A PAGE'S SPECIALIST COUNT CHANGES, RE-PICK ITS CLASS. Divide the count
   by the columns; if the remainder is 1, choose another. Nothing automated can
   catch this — the markup is valid and the build is green with an orphan. */
.wall.three > * { flex: 0 0 calc((100% - 24px) / 3) }
.wall.five  > * { flex: 0 0 calc((100% - 48px) / 5) }
@media (max-width: 939px) { .wall > *, .wall.three > *, .wall.five > * { flex: 0 0 calc((100% - 12px) / 2) } }
@media (max-width: 560px) { .wall > *, .wall.three > *, .wall.five > * { flex: 0 0 100% } }
.sp {
  background: linear-gradient(160deg, var(--panel) 0%, #1c1c2e 100%);
  border: 1px solid var(--ghost); border-radius: 13px; padding: 18px;
  position: relative; overflow: hidden; transition: border-color .18s, transform .18s;
}
.sp::after { content: ""; position: absolute; top: 0; inset-inline-start: 0; width: 100%; height: 2px; background: var(--blue); opacity: .5; transform: scaleX(0); transform-origin: left; transition: transform .25s }
.sp:hover { border-color: rgba(147, 197, 253, .4); transform: translateY(-3px) }
.sp:hover::after { transform: scaleX(1) }
.sp .si { width: 34px; height: 34px; border-radius: 10px; background: rgba(37, 99, 235, .16); border: 1px solid rgba(147, 197, 253, .18); display: flex; align-items: center; justify-content: center }
.sp .si svg { width: 17px; height: 17px; stroke: var(--lblue); fill: none; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round }
.sp b { display: block; font-size: 14px; font-weight: 700; margin-top: 13px }
.sp .cl { display: block; color: var(--dim); font-size: 12px; margin-top: 7px; line-height: 1.5 }
a.sp:hover { text-decoration: none }

/* ── the application strip ────────────────────────────────────────────────── */
/* ⛔ FLEX, NOT GRID, AND THE REASON MATTERS. Ahmed, 2026-08-16, on the rendered
   For-you page: "not looking good".
   This was `grid-template-columns: repeat(auto-fill, minmax(158px, 1fr))`, which
   packs six columns at full width. That was invisible for as long as every page
   carried exactly twelve tiles — 6 + 6, a clean block. The moment a page carried
   a count that six does not divide, grid left EMPTY CELLS at the end of the last
   row: ten tiles rendered 6 + 4 with a ~470px hole down the right, which reads
   as a broken page, not a shorter list.
   Flex with `justify-content: center` has no cells to leave empty — a short last
   row centres itself and looks deliberate at ANY count. The explicit flex-basis
   keeps every tile the same width, which is the one thing grid was doing right;
   content-sized tiles would have made the rows ragged instead.
   ⛔ So counts are now safe to change. This is deliberate: five pages carry this
   strip, the counts have already changed three times in one afternoon, and no
   test can see a hole — the markup is valid and the build is green either way.
   Only a person looking at the page can catch it, which is exactly how it
   shipped. Do not "simplify" this back to auto-fill. */
.appstrip { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 40px }
.ap { flex: 0 0 calc((100% - 50px) / 6); display: flex; align-items: center; gap: 10px; background: var(--panel-2); border: 1px solid var(--ghost); border-radius: 11px; padding: 12px 13px }
/* Ten tiles want five across, not six — 5 + 5 beats 6 + 4 even when centred. */
@media (min-width: 940px) { .appstrip.ten .ap { flex: 0 0 calc((100% - 40px) / 5) } }
/* Narrow screens: three across, then two. Six 158px tiles cannot fit a phone. */
@media (max-width: 939px) { .appstrip .ap, .appstrip.ten .ap { flex: 0 0 calc((100% - 20px) / 3) } }
@media (max-width: 560px) { .appstrip .ap, .appstrip.ten .ap { flex: 0 0 calc((100% - 10px) / 2) } }
.ap:hover { border-color: rgba(147, 197, 253, .3) }
.ap svg { width: 17px; height: 17px; stroke: var(--lblue); fill: none; stroke-width: 1.9; flex: 0 0 auto }
.ap b { font-size: 12.5px; font-weight: 700; line-height: 1.25 }

/* ── pricing ──────────────────────────────────────────────────────────────── */
.plans { display: grid; gap: 16px; margin-top: 44px; grid-template-columns: repeat(auto-fit, minmax(258px, 1fr)) }
.plan { background: linear-gradient(165deg, var(--panel) 0%, #1c1c2e 100%); border: 1px solid var(--ghost); border-radius: var(--r); padding: 30px 26px; position: relative }
.plan.feat { border-color: rgba(37, 99, 235, .75); box-shadow: 0 26px 60px -30px rgba(37, 99, 235, .9) }
.plan .rib { position: absolute; top: -1px; inset-inline-end: 22px; background: var(--blue); color: #fff; font: 800 9.5px/1 var(--font); letter-spacing: .13em; text-transform: uppercase; padding: 6px 10px; border-radius: 0 0 7px 7px }
/* direction:ltr — a price is written left-to-right in BOTH languages. Without
   it, RTL bidi moves a leading sign to the far side. */
.plan .amt { font-size: 42px; font-weight: 800; letter-spacing: -.045em; margin-top: 14px; line-height: 1; direction: ltr; text-align: start }
html[dir="rtl"] .plan .amt { text-align: right }
.plan .amt small { font-size: 14px; font-weight: 600; color: var(--muted); letter-spacing: 0 }
.plan ul { list-style: none; margin-top: 22px; display: grid; gap: 11px }
.plan ul li { position: relative; padding-inline-start: 25px; color: var(--muted); font-size: 13.5px }
.plan ul li::before { content: ""; position: absolute; inset-inline-start: 0; top: 6px; width: 14px; height: 8px; border-inline-start: 2px solid var(--lblue); border-bottom: 2px solid var(--lblue); transform: rotate(-45deg) }
.plan ul li b { color: var(--off) }

/* ── tables ───────────────────────────────────────────────────────────────── */
/* FR-MKTSITE-19: a table is the one thing that reliably forces a phone to
   scroll sideways. It scrolls INSIDE this box; the page body never does. */
.tablewrap { margin-top: 30px; overflow-x: auto; border: 1px solid var(--ghost); border-radius: var(--r) }
table { border-collapse: collapse; width: 100%; min-width: 420px; font-size: 14px }
th, td { text-align: start; padding: 13px 18px; border-bottom: 1px solid rgba(147, 197, 253, .06); vertical-align: top }
thead th { background: var(--panel-2); color: var(--off); font-size: 11px; letter-spacing: .1em; text-transform: uppercase }
tbody tr:last-child td { border-bottom: 0 }
tbody tr:hover td { background: rgba(147, 197, 253, .03) }
td.num, th.num { text-align: end; font-variant-numeric: tabular-nums; white-space: nowrap; direction: ltr }
html[dir="rtl"] td.num, html[dir="rtl"] th.num { text-align: left }
td b { color: var(--off) }
tbody td { color: var(--muted) }
td .sub { display: block; color: var(--dim); font-size: 12.5px; margin-top: 4px }

/* ── notes ────────────────────────────────────────────────────────────────── */
.note { margin-top: 26px; padding: 16px 20px; border-radius: var(--r-sm); background: rgba(147, 197, 253, .05); border-inline-start: 3px solid var(--blue); color: var(--muted); font-size: 13.5px }
.note b { color: var(--off) }

/* ── closing band ─────────────────────────────────────────────────────────── */
.endcta { text-align: center; padding: 110px 0; position: relative; overflow: hidden }
.endcta::before { content: ""; position: absolute; bottom: -260px; inset-inline-start: 50%; transform: translateX(-50%); width: 900px; height: 520px; background: radial-gradient(ellipse, rgba(37, 99, 235, .24) 0%, transparent 66%); pointer-events: none }
.endcta > * { position: relative }
.endcta .d2 { margin-inline: auto; max-width: 19ch }
.endcta .heroacts { justify-content: center }
.endcta .freehint { margin-inline: auto }
.endcta .lede { margin: 18px auto 0; text-align: center }

/* ── footer ───────────────────────────────────────────────────────────────── */
.ft { border-top: 1px solid var(--ghost); padding: 52px 0 40px; background: var(--ink) }
.ftgrid { display: flex; justify-content: space-between; gap: 30px; flex-wrap: wrap; margin-bottom: 34px }
.ftcol b { display: block; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--dim); margin-bottom: 13px }
.ftcol a { display: block; color: var(--muted); font-size: 13.5px; font-weight: 500; padding: 4px 0 }
.ftcol a:hover { color: var(--off) }
.ftline { color: var(--dim); font-size: 12.5px; display: flex; gap: 14px; flex-wrap: wrap; border-top: 1px solid var(--ghost); padding-top: 24px }
.ftline a { color: var(--dim) }

/* ── legal documents ──────────────────────────────────────────────────────── */
.legal { max-width: 76ch }
.legal h3 { margin-top: 34px; font-size: 18px; color: var(--off); letter-spacing: -.01em }
.legal p, .legal li { color: var(--muted); font-size: 14.5px }
.legal p { margin-top: 11px }
/* ol carries the numbered clauses in the legal v4 documents (AI Policy §2). The
   global reset zeroes list padding, so without this the decimal markers have no
   room and hang outside the text column. Same geometry as the bullet lists. */
.legal ul, .legal ol { margin: 11px 0 0 20px; display: grid; gap: 7px }
html[dir="rtl"] .legal ul, html[dir="rtl"] .legal ol { margin: 11px 20px 0 0 }
.legal .updated { color: var(--dim); font-size: 13px; margin-top: 10px }

/* ── responsive ───────────────────────────────────────────────────────────── */
@media (max-width: 940px) { .herogrid { grid-template-columns: 1fr; gap: 40px } }
@media (max-width: 900px) { .split { grid-template-columns: 1fr; gap: 34px } }
@media (max-width: 820px) { .pipe { grid-template-columns: 1fr; gap: 16px } .pipe::before { display: none } }
@media (max-width: 620px) {
  .hd .wrap { min-height: 58px; padding-block: 10px }
  .hdnav { order: 3; width: 100%; margin: 0; gap: 0 }
  .hdnav a { padding: 7px 9px; font-size: 13px }
  .hdside { margin-inline-start: auto }
  .hero { padding: 56px 0 50px }
  section { padding: 64px 0 }
  .endcta { padding: 72px 0 }
  .wbody { min-height: 0 }
  .wside { display: none }
}