/* Corplift landing. Tokens from brand/CorpLift-Brand-Identity-2026.pdf, written out in brand/Brand-Rules-2026.md */

/* One typeface for Arabic, Latin and numerals: Thmanyah Sans, when it is installed locally
   (its licence forbids hosting the files). Visitors without it get IBM Plex Sans Arabic,
   and Manrope for the Latin letters and digits that file does not carry (a subset of exactly the range below,
   cut from tools/fonts/manrope-var.ttf: 16 KB instead of 161). */
@font-face { font-family: "CL Arabic"; font-weight: 400; font-display: swap;
  src: local("thmanyahsans-Regular"), local("thmanyah sans Regular"), url("fonts/plex-arabic-400.woff2?v=9f1801b4f3") format("woff2"); }
@font-face { font-family: "CL Arabic"; font-weight: 500; font-display: swap;
  src: local("thmanyahsans-Medium"), local("thmanyah sans Medium"), url("fonts/plex-arabic-500.woff2?v=cf5bfd34cf") format("woff2"); }
@font-face { font-family: "CL Arabic"; font-weight: 700; font-display: swap;
  src: local("thmanyahsans-Bold"), local("thmanyah sans Bold"), url("fonts/plex-arabic-700.woff2?v=d26040930e") format("woff2"); }
@font-face { font-family: "CL Arabic"; font-weight: 900; font-display: swap;
  src: local("thmanyahsans-Black"), local("thmanyah sans Black"), url("fonts/plex-arabic-700.woff2?v=d26040930e") format("woff2"); }
@font-face { font-family: "CL Latin Fallback"; font-weight: 400 800; font-display: swap; size-adjust: 92%;
  src: url("fonts/manrope-latin-var.woff2?v=dce2f61ac9") format("woff2");
  unicode-range: U+0021-007E, U+00AB, U+00B7, U+00BB; }

:root {
  /* black, white and blue carry equal weight */
  --black: #000000;
  --white: #FFFFFF;
  --blue: #2765ED;          /* Lift blue: buttons, accents on white and light */
  --blue-start: #3B82F6;    /* gradient start, and the accent on black */
  --blue-end: #1447E5;      /* gradient end */
  --blue-soft: #8FB8FF;     /* highlight on black */
  --on-blue: #E6EEFF;       /* text on blue */
  --tint: #F3F6FC;          /* the light surface */
  --ink: #0B0B0E;           /* dark card */
  --ink-start: #14161C;
  --grey: #5C5C5C;          /* text on white and light */
  --muted: #8A8D98;         /* muted text */
  --on-black: #C4C6CE;      /* text on black */
  --line: #E6E8EE;          /* dividers on white */
  --line-tint: #D9DFEC;     /* dividers on the light surface */
  --badge: #ECEFF5;

  --grad-blue: linear-gradient(135deg, #3B82F6, #1447E5);
  --grad-ink: linear-gradient(180deg, #14161C, #0B0B0E);
  --glow: rgba(39, 101, 237, .42);              /* the blue glow of the black surface */
  --halo: rgba(143, 184, 255, .38);             /* the blue halo of the white and light surfaces */
  /* glass: the card material of the black and the blue surfaces. Fill and edge are measured from the guide's own pages:
     on black a white of about 7.5% under a 15% edge; on blue it reads lighter, about 18% under a 32% edge. */
  --glass: linear-gradient(180deg, rgba(255, 255, 255, .09), rgba(255, 255, 255, .065));
  --glass-line: rgba(255, 255, 255, .15);
  --glass-blue: linear-gradient(180deg, rgba(255, 255, 255, .19), rgba(255, 255, 255, .11));
  --glass-blue-line: rgba(255, 255, 255, .32);
  --glass-blur: blur(18px) saturate(1.35);
  /* on the white surface glass is frosted: a milky white over whatever colour lies behind it */
  --glass-light: linear-gradient(180deg, rgba(255, 255, 255, .7), rgba(255, 255, 255, .38));
  --glass-light-line: rgba(255, 255, 255, .95);
  --shadow-card: 0 16px 44px rgba(39, 101, 237, .13);
  --shadow-blue: 0 24px 60px -14px rgba(39, 101, 237, .38);
  --radius: 28px;           /* every card */

  --font: "CL Arabic", "CL Latin Fallback", "IBM Plex Sans Arabic", system-ui, sans-serif;

  --margin: clamp(20px, 5.5vw, 80px);
  --maxw: 1280px;
  --nav-h: 72px;
  --vh: 1vh;
  --vw: 1vw;
  --tan22: 0.40403;
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-snap: cubic-bezier(.22, .9, .24, 1);
  --ease-kash: cubic-bezier(.62, 0, .18, 1);
  --ease-kash-back: cubic-bezier(.82, 0, .38, 1);   /* the same curve, played backwards */
  --scene-len: 1.7;          /* viewport-heights the chapter stays pinned; read by site.js */
  /* the Ant mark: a parallelogram on the 22° axis, ends cut at 67° */
  --ant: polygon(10.5% 100%, 80% 44.2%, 89.5% 0, 20% 55.8%);
}
@media (max-width: 760px) { :root { --nav-h: 64px; } }
@media (max-width: 640px) { :root { --radius: 22px; } }
@media (max-width: 899px), (max-aspect-ratio: 9/10) { :root { --scene-len: 1.5; } }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: calc(var(--nav-h) + 24px); scrollbar-color: var(--muted) transparent; }
body {
  overflow-x: clip;
  margin: 0; background: var(--black); color: var(--black);
  font-family: var(--font); font-weight: 400; font-size: 18px; line-height: 1.7;
  font-kerning: normal; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4, p, ul, ol, dl, dd, figure, blockquote { margin: 0; padding: 0; }
ul, ol { list-style: none; }
img, svg, canvas, video { display: block; }
a { color: inherit; }
bdi, .en { unicode-bidi: isolate; direction: ltr; }
strong { font-weight: 700; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
::selection { background: var(--blue); color: var(--white); }
[data-theme="blue"] ::selection { background: var(--white); color: var(--blue); }
.wrap { width: min(100% - 2 * var(--margin), var(--maxw)); margin-inline: auto; }

.skip { position: fixed; top: 12px; right: 12px; z-index: 100; padding: 12px 20px; border-radius: 999px; background: var(--blue); color: var(--white); text-decoration: none; font-weight: 700; transform: translateY(-160%); }
.skip:focus { transform: none; }

:focus-visible { outline: 2px solid var(--blue); outline-offset: 4px; }
[data-theme="dark"] :focus-visible, [data-theme="hero"] :focus-visible, .nav[data-mode="hero"] :focus-visible, .nav[data-mode="dark"] :focus-visible { outline-color: var(--blue-soft); }
[data-theme="blue"] :focus-visible, .nav[data-mode="blue"] :focus-visible { outline-color: var(--white); }

/* ---------- The kashida: the heading's one expressive gesture, set in motion ----------
   A word is split at the joint. Zero-width joiners keep both letters in their joined forms,
   and a clipped strip of tatweel strokes between them opens and closes. At rest the word reads normally.
   It closes the way it opened, in reverse: the same curve mirrored, over nearly the same time. */
.kw { white-space: nowrap; }
.kx { --k: 0; display: inline-block; width: calc(var(--k) * 1em); margin-inline: -0.012em; vertical-align: baseline;
      white-space: nowrap; overflow-x: clip; overflow-y: visible; transition: width 1.1s var(--ease-kash-back); }
.kx > span { display: inline-block; }
.k-on .kx { --k: var(--kt); transition: width 1.25s var(--ease-kash); }
/* Lines are measured at full stretch and then held, so a stretching word never pushes itself onto the next line. */
.k-measure .kx, .k-still .kx { transition: none !important; }
.k-measure .kx { --k: var(--kt) !important; }
.k-measure .kword, .k-measure .kw { transform: none !important; }
.k-lock { white-space: nowrap; text-wrap: nowrap; }
/* Until common.js holds an inner page's heading, the stretch is kept as space after the word, so the first paint
   already breaks the lines where the open kashida will, and nothing moves when they are held. */
.js [data-kash] > span:not(.k-lock):not(.k-measure) .kw { margin-inline-end: calc(var(--kt) * 1em); }
html:not(.js) .kx { --k: var(--kt); }

/* ---------- Buttons & links: pills ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 12px; min-height: 56px; padding: 0 28px;
  font: 700 17px/1 var(--font); text-decoration: none; border: 1.5px solid transparent; border-radius: 999px;
  transition: background-color .25s var(--ease-out), color .25s var(--ease-out), border-color .25s var(--ease-out), transform .2s var(--ease-out);
}
.btn--primary { background: var(--blue); color: var(--white); }
.btn--primary:hover, .btn--primary:focus-visible { background: var(--blue-end); }
.btn__ant { width: 26px; height: 13px; fill: currentColor; transform: rotate(64deg); transition: transform .42s var(--ease-snap); }
.btn--primary:hover .btn__ant, .btn--primary:focus-visible .btn__ant { transform: rotate(0deg); }
.btn:active { transform: translateY(1px); }
/* the secondary button on black is a glass pill */
.btn--ghost { color: var(--white); border-width: 1px; border-color: var(--glass-line); background: rgba(255, 255, 255, .1);
  -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); }
.btn--ghost:hover, .btn--ghost:focus-visible { border-color: rgba(255, 255, 255, .34); background: rgba(255, 255, 255, .17); }

/* on blue: a glass pill; on white: an outlined pill */
.btn--glass { color: var(--white); border-width: 1px; border-color: var(--glass-blue-line); background: rgba(255, 255, 255, .14);
  -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); }
.btn--glass:hover, .btn--glass:focus-visible { background: rgba(255, 255, 255, .24); border-color: rgba(255, 255, 255, .6); }
.btn--line { color: var(--black); border-color: rgba(0, 0, 0, .16); background: transparent; }
.btn--line:hover, .btn--line:focus-visible { border-color: var(--black); }

.link { font-weight: 500; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 6px; }
.link__arrow { display: inline-block; transition: transform .3s var(--ease-out); }
a:hover > .link__arrow, a:focus-visible > .link__arrow { transform: translateX(-6px); }

/* ---------- Navigation ---------- */
.nav { position: fixed; inset: 0 0 auto 0; z-index: 50; height: var(--nav-h); color: var(--white); transition: background-color .3s, color .3s, box-shadow .3s; }
.nav__inner { height: 100%; width: min(100% - 2 * var(--margin), var(--maxw)); margin-inline: auto; display: flex; align-items: center; gap: 40px; }
.nav__brand { display: block; padding: 10px 0; margin-inline-end: auto; }
.logo { width: 132px; height: auto; aspect-ratio: 1002 / 244.21; fill: currentColor; }
/* When the mouse arrives on the bar's logo, the symbol's three arrows lift once along its own 22° line, the lowest first,
   and settle back into the lockup. Only the symbol moves, and only along that line: nothing turns, stretches or changes
   colour. common.js adds .is-lift and takes it off when the last arrow lands, so a passing mouse never cuts it short. */
@keyframes logo-lift {
  0% { transform: none; animation-timing-function: cubic-bezier(.2, .8, .3, 1); }
  42% { transform: translate(9px, -22px); animation-timing-function: cubic-bezier(.45, 0, .3, 1); }
  78% { transform: translate(-.6px, 1.5px); animation-timing-function: cubic-bezier(.3, 0, .3, 1); }
  100% { transform: none; }
}
.nav__brand .logo { overflow: visible; }           /* the highest arrow rises past the logo's own box */
.nav__brand.is-lift .logo__sym use { animation: logo-lift .62s both; }
.nav__brand.is-lift .logo__sym use + use { animation-delay: .07s; }
.nav__brand.is-lift .logo__sym use + use + use { animation-delay: .14s; }
@media (prefers-reduced-motion: reduce) { .nav__brand.is-lift .logo__sym use { animation: none; } }
.nav__links { display: flex; gap: 32px; }
.nav__links a { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; font-size: 16px; font-weight: 500; text-decoration: none; opacity: .78; transition: opacity .2s; }
.nav__links a:hover, .nav__links a.is-current { opacity: 1; }
/* the section pointer: one blue mark beside the section you are in */
.nav__ant { width: 16px; height: 8px; fill: var(--blue-start); opacity: 0; transform: translateX(6px) rotate(64deg); transition: transform .6s var(--ease-snap), opacity .3s; }
.nav__links a.is-current .nav__ant { opacity: 1; transform: none; }
.btn--nav { min-height: 44px; padding: 0 20px; font-size: 15px; background: var(--blue); color: var(--white);
  transition: background-color .25s var(--ease-out), color .25s var(--ease-out), opacity .35s var(--ease-out), visibility .35s, transform .2s var(--ease-out); }
.btn--nav:hover, .btn--nav:focus-visible { background: var(--blue-end); }
.nav[data-mode="dark"] { background: var(--black); }
.nav[data-mode="light"] { background: var(--white); color: var(--black); box-shadow: inset 0 -1px 0 var(--line); }
.nav[data-mode="light"] .nav__ant { fill: var(--blue); }
.nav[data-mode="blue"] { background: var(--blue); }
.nav[data-mode="blue"] .nav__ant { fill: var(--white); }
.nav[data-mode="blue"] .btn--nav { background: var(--white); color: var(--blue); }
.nav[data-mode="blue"] .btn--nav:hover { background: var(--on-blue); }
.js .nav[data-mode="hero"] .btn--nav { opacity: 0; visibility: hidden; }
.nav__brand { transition: opacity .4s var(--ease-out), visibility .4s; }
.js .nav[data-mode="hero"] .nav__brand { opacity: 0; visibility: hidden; }
.js .nav { opacity: 0; animation: fade-in .8s .15s var(--ease-out) forwards; }
/* While a section arrives on the 22° line the bar does not switch colour all at once: a twin of the bar, in the arriving
   section's colours, is cut on that same line and shows only where the section is already under it (site.js moves the cut). */
.nav--cut { z-index: 51; pointer-events: none; visibility: hidden; }
.nav--cut.is-on { visibility: visible; }
.js .nav--cut { opacity: 1; animation: none; }
.nav.is-cutting, .nav.is-cutting *, .nav--cut, .nav--cut * { transition: none; }
@media (max-width: 960px) { .nav__links { display: none; } }
@media (max-width: 760px) { .logo { width: 112px; } .nav__inner { gap: 16px; } .btn--nav { font-size: 14px; padding: 0 16px; white-space: nowrap; } }
@media (max-width: 380px) { .logo { width: 104px; } .btn--nav { font-size: 13px; padding: 0 13px; } }

/* ---------- The 22° sheet: sections that arrive on the brand axis ---------- */
/* A glow never meets an edge. Every halo is a pool inside its own section that fades out at least 40px before any
   boundary: below the 22° line of a sheet, above the wedge the next sheet lays over the bottom of a section, and clear of
   the straight edges too. So a divider always cuts across plain surface, never through light. */
/* Only the section's surface (--surface, on a layer of its own) is cut on the line. The section itself is never
   clipped, so what lives inside it (the pinned stage, the canvases, the glass) is composited the ordinary way. */
.sheet { position: relative; z-index: 2; --wedge: calc(var(--vw) * 100 * var(--tan22)); }
.sheet::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: var(--surface);
  clip-path: polygon(0 var(--wedge), 100% 0, 100% 100%, 0 100%); }

/* ---------- The seams: each boundary is a row of Ant marks, drawn on one thin canvas (site.js, Seams) ----------
   The box is exactly as wide as the page and clips the strip, so a seam can never widen the page; the canvas is its own
   layer, so drawing it never repaints the section behind. */
.seam { position: absolute; left: 0; right: 0; z-index: 3; overflow: hidden; pointer-events: none; }
.seam canvas { position: absolute; left: 0; will-change: transform; }

.sec-head { display: grid; gap: 20px; max-width: 900px; margin-bottom: clamp(48px, 6vw, 88px); }
.sec-title { font-weight: 900; font-size: clamp(32px, 4.2vw, 60px); line-height: 1.3; text-wrap: balance; }
.sec-title--display { font-size: clamp(50px, 6.4vw, 92px); line-height: 1.3; }
.sec-lede { font-size: clamp(18px, 1.56vw, 22.5px); line-height: 1.7; color: var(--grey); max-width: 36em; }
.btn--light { background: var(--white); color: var(--blue); }
.btn--light:hover, .btn--light:focus-visible { background: var(--on-blue); }

@keyframes rise { from { opacity: 0; transform: translateY(18px); filter: blur(6px); } to { opacity: 1; transform: none; filter: blur(0); } }
@keyframes fade-in { to { opacity: 1; } }

/* ---------- The bar's tools: the other language, light or dark, and the menu on narrow screens ---------- */
.nav__tools { display: flex; align-items: center; gap: 6px; }
.nav__lang, .nav__scheme { display: inline-grid; place-items: center; min-width: 44px; height: 44px; padding: 0 10px; border: 0; border-radius: 999px; background: none; color: inherit;
  font: 700 14px/1 var(--font); text-decoration: none; cursor: pointer; opacity: .82; transition: opacity .2s, background-color .2s; }
.nav__lang:hover, .nav__lang:focus-visible, .nav__scheme:hover, .nav__scheme:focus-visible { opacity: 1; background: rgba(127, 127, 127, .16); }
.nav__scheme { padding: 0; width: 44px; }
.nav__scheme svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.nav__scheme .nav__moon { fill: currentColor; stroke: none; }
/* the button shows where it would take you */
[data-scheme="dark"] .nav__moon, [data-scheme="light"] .nav__sun, html:not([data-scheme]) .nav__sun { display: none; }
.btn--nav { margin-inline-start: 6px; }
.nav__menu { display: none; position: relative; width: 44px; height: 44px; border: 0; border-radius: 999px; background: none; color: inherit; cursor: pointer; }
.nav__menu span { position: absolute; left: 12px; right: 12px; height: 2px; border-radius: 2px; background: currentColor; transition: transform .35s var(--ease-snap); }
.nav__menu span:first-child { top: 17px; } .nav__menu span:last-child { top: 25px; }
.nav.is-open .nav__menu span:first-child { transform: translateY(4px) rotate(45deg); }
.nav.is-open .nav__menu span:last-child { transform: translateY(-4px) rotate(-45deg); }
@media (max-width: 960px) {
  .nav__menu { display: inline-block; }
  /* narrow: the links open as a panel under the bar */
  .nav__links { position: fixed; top: var(--nav-h); inset-inline: 0; display: grid; gap: 0; padding: 8px var(--margin) 22px; background: var(--black); color: var(--white);
    box-shadow: 0 24px 40px -20px rgba(0, 0, 0, .5); visibility: hidden; opacity: 0; transform: translateY(-8px); transition: opacity .25s var(--ease-out), transform .3s var(--ease-out), visibility .3s; }
  .nav.is-open .nav__links { visibility: visible; opacity: 1; transform: none; }
  .nav__links a { min-height: 54px; font-size: 18px; opacity: .9; border-bottom: 1px solid rgba(255, 255, 255, .1); }
  .nav__links .nav__ant { opacity: 1; transform: none; }
  .js .nav[data-mode="hero"] .btn--nav { display: none; }
}
@media (max-width: 760px) { .btn--nav { display: none; } .nav__tools { gap: 2px; } .nav__inner { gap: 10px; } }

/* ---------- The footer: the brand, every page, and how to reach us ---------- */
.foot { position: relative; z-index: 2; background: var(--black); color: var(--on-black); font-size: 15px; }
.foot a { text-decoration: none; transition: color .2s; }
.foot a:hover, .foot a:focus-visible { color: var(--white); }
.foot__top { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(36px, 5vw, 80px); padding: clamp(56px, 6vw, 88px) 0 clamp(36px, 4vw, 52px); border-top: 1px solid rgba(255, 255, 255, .08); }
.foot__logo { width: 150px; fill: var(--white); color: var(--white); }
.foot__tag { margin-top: 18px; max-width: 26em; line-height: 1.75; }
.foot__reach { margin-top: 18px; display: grid; }
.foot__reach a, .foot__reach span { display: inline-flex; align-items: center; min-height: 40px; }
.foot__cols { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
.foot__h { margin-bottom: 8px; font-weight: 700; font-size: 15px; color: var(--white); }
.foot__col a { display: inline-flex; align-items: center; min-height: 40px; }
.foot__inner { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 32px; padding: 18px 0 30px; border-top: 1px solid rgba(255, 255, 255, .08); color: var(--muted); font-size: 14px; }
.foot__social { display: flex; gap: 18px; margin-inline-start: auto; }
.foot__social a { display: inline-flex; align-items: center; min-height: 44px; }
@media (max-width: 899px) { .foot__top { grid-template-columns: 1fr; } .foot__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .foot__social { margin-inline-start: 0; } }

/* ---------- Dark: the light surfaces turn to the brand's black, the dark ones stay as they are ----------
   The site follows the visitor's choice (the moon in the bar), else the system's (an inline script sets data-scheme
   before the first paint). Only what sits on white or on the light surface changes; black, blue and the cards keep. */
:root[data-scheme="dark"] { color-scheme: dark;
  --paper: #050608; --paper-2: #0A0D14; --card: #10131B; --text: #F3F5FA; --text-2: #A3A9B8;
  --line: rgba(255, 255, 255, .1); --line-tint: rgba(255, 255, 255, .12); --badge: rgba(255, 255, 255, .08);
  --tint: #0A0D14; --halo: rgba(39, 101, 237, .12); --shadow-card: 0 18px 48px rgba(0, 0, 0, .5);
  /* a blue card on black: a deep shadow with a breath of blue under it, not a neon spill */
  --shadow-blue: 0 26px 56px -24px rgba(39, 101, 237, .34), 0 18px 40px -14px rgba(0, 0, 0, .6);
  --glass-light: linear-gradient(180deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, .035)); --glass-light-line: rgba(255, 255, 255, .12); }
[data-scheme="dark"] .nav[data-mode="light"] { background: #07080B; color: var(--white); box-shadow: inset 0 -1px 0 rgba(255, 255, 255, .08); }
[data-scheme="dark"] .nav[data-mode="light"] .nav__ant { fill: var(--blue-start); }
[data-scheme="dark"] .sec-lede { color: var(--text-2); }
[data-scheme="dark"] .btn--line { color: var(--white); border-color: rgba(255, 255, 255, .22); }
[data-scheme="dark"] .btn--line:hover, [data-scheme="dark"] .btn--line:focus-visible { border-color: var(--white); }
[data-scheme="dark"] :focus-visible { outline-color: var(--blue-soft); }
@media (prefers-reduced-motion: reduce) { .nav__links, .nav__menu span { transition: none; } }

/* Corplift: the inner pages. Each opens on a black head (where it sits, its title, one line), carries its content on
   white, and ends on the brand blue arriving on the 22° line. The tokens and the bar are in base.css. */

/* ---------- The eyebrow: a small label led by one Ant mark ---------- */
.eyebrow { display: inline-flex; align-items: center; gap: 12px; font-size: 15px; font-weight: 700; line-height: 1.4; color: var(--blue-soft); }
.eyebrow::before { content: ""; flex: none; width: 22px; height: 11px; background: currentColor; clip-path: var(--ant); }
[data-theme="light"] .eyebrow { color: var(--blue); }

/* ---------- A row of Ant marks: it arrives scattered and falls into order, the way the page reads (common.js) ---------- */
.antrow { display: flex; gap: clamp(7px, .8vw, 11px); }
.antrow svg { width: clamp(16px, 1.6vw, 22px); height: auto; aspect-ratio: 2; fill: currentColor; opacity: .9; }
.antrow svg:last-child { fill: var(--blue-start); opacity: 1; }
.js .antrow svg { opacity: 0; transform: translate(var(--dx, 0), var(--dy, 0)) rotate(var(--dr, 0deg));
  transition: transform 1.1s var(--ease-snap), opacity .6s var(--ease-out); transition-delay: var(--delay, 0s); }
.js .antrow.is-in svg { opacity: .9; transform: none; }
.js .antrow.is-in svg:last-child { opacity: 1; }

/* ---------- The head of an inner page ---------- */
.phead { position: relative; overflow: hidden; background: var(--black); color: var(--white);
  padding: calc(var(--nav-h) + clamp(44px, 6.5vw, 96px)) 0 clamp(104px, 11vw, 152px); }
/* one blue pool behind the empty side of the head. Its size is fixed in pixels and its centre kept far enough in that the
   light has faded 48px before any edge, at every width (the gradient ends at 70% of its radius). */
.phead, .lost { --pool-w: clamp(150px, 28vw, 440px); --pool-h: clamp(140px, 19vw, 290px);
  --pool-x: max(24%, calc(var(--pool-w) * .7 + 48px)); --pool-y: 44%; }
[dir="ltr"] .phead, [dir="ltr"] .lost { --pool-x: min(76%, calc(100% - var(--pool-w) * .7 - 48px)); }
.phead::before, .lost::before { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse var(--pool-w) var(--pool-h) at var(--pool-x) var(--pool-y), rgba(39, 101, 237, .30), rgba(39, 101, 237, 0) 70%); }
.phead__inner { position: relative; display: grid; align-items: center; gap: clamp(32px, 4vw, 64px); }
.phead__text { display: grid; justify-items: start; gap: 22px; min-width: 0; }
/* a project's head: the words on one side, the work on the other */
.phead--split .phead__inner { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); }
.phead--split { --pool-x: calc(100% - max(24%, calc(var(--pool-w) * .7 + 48px))); }
[dir="ltr"] .phead--split { --pool-x: max(24%, calc(var(--pool-w) * .7 + 48px)); }
.phead__art { position: relative; margin: 0; }
.phead__art img { width: 100%; height: auto; }
@media (max-width: 999px) { .phead--split .phead__inner { grid-template-columns: minmax(0, 1fr); } .phead__art { max-width: 560px; justify-self: center; } }
.phead__facts { display: flex; flex-wrap: wrap; gap: 14px 0; margin-top: 4px; }
.phead__facts > div { display: grid; gap: 2px; padding-inline-end: clamp(18px, 2.4vw, 32px); margin-inline-end: clamp(18px, 2.4vw, 32px); border-inline-end: 1px solid var(--glass-line); }
.phead__facts > div:last-child { border: 0; margin: 0; padding: 0; }
.phead__facts dt { font-size: 14px; color: var(--muted); }
.phead__facts dd { margin: 0; font-size: clamp(18px, 1.5vw, 21px); font-weight: 700; color: var(--white); }
.phead__acts { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 8px; }
.phead__acts .btn--primary .btn__ant { fill: currentColor; }
.phead__title { font-weight: 900; font-size: clamp(44px, 6.2vw, 88px); line-height: 1.25; text-wrap: balance; max-width: 15em; }
.phead__lede { font-size: clamp(18px, 1.56vw, 22.5px); line-height: 1.75; color: var(--on-black); max-width: 38em; }
.phead__meta { font-size: 15px; color: var(--muted); }
.phead__meta time { color: var(--on-black); }
.phead__ants { position: absolute; bottom: clamp(36px, 4.4vw, 60px); inset-inline-start: var(--margin); color: var(--white); }

.crumbs ol { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; font-size: 14.5px; color: var(--on-black); }
.crumbs li { display: inline-flex; align-items: center; gap: 10px; }
.crumbs li + li::before { content: ""; width: 12px; height: 6px; background: currentColor; opacity: .45; clip-path: var(--ant); }
.crumbs a { display: inline-flex; align-items: center; min-height: 32px; text-decoration: none; opacity: .78; transition: opacity .2s; }
.crumbs a:hover, .crumbs a:focus-visible { opacity: 1; }
.crumbs [aria-current] { color: var(--white); }

/* ---------- A document: a contents list beside it, sections numbered ---------- */
.doc { position: relative; z-index: 1; background: var(--white); color: var(--black);
  padding: clamp(64px, 8vw, 116px) 0 calc(var(--vw) * 100 * var(--tan22) + clamp(56px, 6vw, 88px)); }
.doc__grid { display: grid; grid-template-columns: minmax(200px, 3fr) minmax(0, 8fr); gap: clamp(40px, 6vw, 104px); align-items: start; }
.toc { position: sticky; top: calc(var(--nav-h) + 32px); }
.toc__h { margin-bottom: 14px; font-size: 14.5px; font-weight: 700; color: var(--grey); }
.toc ol { display: grid; border-inline-start: 1px solid var(--line); }
.toc a { display: flex; align-items: center; gap: 12px; min-height: 42px; padding-inline-start: 18px; margin-inline-start: -1px;
  border-inline-start: 2px solid transparent; font-size: 15.5px; line-height: 1.4; color: var(--grey); text-decoration: none;
  transition: color .2s, border-color .25s var(--ease-out); }
.toc a:hover, .toc a:focus-visible { color: var(--black); }
.toc a.is-current { color: var(--black); font-weight: 500; border-color: var(--blue); }
.toc__n { flex: none; min-width: 2ch; font-size: 12px; font-weight: 700; color: var(--muted); direction: ltr; font-variant-numeric: tabular-nums; }
.toc a.is-current .toc__n { color: var(--blue); }

.doc__body { max-width: 780px; }
.doc__sec { scroll-margin-top: calc(var(--nav-h) + 28px); }
.doc__sec + .doc__sec { margin-top: clamp(40px, 4.6vw, 56px); padding-top: clamp(40px, 4.6vw, 56px); border-top: 1px solid var(--line); }
.doc__sec h2 { display: flex; align-items: baseline; gap: 16px; margin-bottom: 18px; font-weight: 900; font-size: clamp(25px, 2.5vw, 34px); line-height: 1.4; }
.doc__n { flex: none; font-size: 15px; font-weight: 700; color: var(--blue); direction: ltr; font-variant-numeric: tabular-nums; }
.doc__sec h3 { margin: 28px 0 10px; font-weight: 700; font-size: 21px; line-height: 1.5; }
.doc__sec p, .doc__sec li { font-size: 18px; line-height: 1.95; color: #2B2D33; }
.doc__sec p + p, .doc__sec p + ul, .doc__sec ul + p { margin-top: 16px; }
.doc__sec ul { display: grid; gap: 12px; }
.doc__sec li { position: relative; padding-inline-start: 34px; }
.doc__sec li::before { content: ""; position: absolute; inset-inline-start: 2px; top: .8em; width: 18px; height: 9px; background: var(--blue); clip-path: var(--ant); }
.doc__sec a { color: var(--blue); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 5px; }
.doc__sec strong { color: var(--black); }
.doc__note { margin-top: clamp(40px, 4.6vw, 56px); padding: 22px 26px; border-radius: 20px; background: var(--tint); font-size: 16px; line-height: 1.85; color: var(--grey); }
.doc__note strong { color: var(--black); }
.nw { white-space: nowrap; }
/* Latin text sits tighter than Arabic */
[lang="en"] .doc__sec p, [lang="en"] .doc__sec li { line-height: 1.75; }
[lang="en"] .phead__lede, [lang="en"] .close__lede, [lang="en"] .lost__lede { line-height: 1.6; }

@media (max-width: 899px) {
  .doc { padding-top: 0; }
  .doc__grid { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  /* narrow: the contents ride under the bar as one line of chips, and the current one keeps in view */
  .toc { top: var(--nav-h); z-index: 5; margin-inline: calc(var(--margin) * -1); padding: 12px var(--margin); background: var(--white);
    box-shadow: 0 1px 0 var(--line); overflow-x: auto; scrollbar-width: none; overscroll-behavior-x: contain; }
  .toc::-webkit-scrollbar { display: none; }
  .toc__h { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .toc ol { display: flex; gap: 8px; border: 0; width: max-content; }
  .toc a { min-height: 40px; padding: 0 16px; margin: 0; border: 1px solid var(--line); border-radius: 999px; font-size: 15px; white-space: nowrap; }
  .toc a.is-current { border-color: var(--blue); background: var(--blue); color: var(--white); }
  .toc a.is-current .toc__n { color: var(--on-blue); }
  .doc__sec { scroll-margin-top: calc(var(--nav-h) + 88px); }
  .doc__sec p, .doc__sec li { font-size: 17px; }
}

/* ---------- The sections of a service or project page ---------- */
.blk { position: relative; background: var(--white); color: var(--black); padding: clamp(80px, 9vw, 136px) 0; }
.blk--tint { background: var(--tint); }
.blk__head { display: grid; justify-items: start; gap: 18px; max-width: 880px; margin-bottom: clamp(40px, 5vw, 72px); }
.blk__head .sec-title { font-size: clamp(30px, 3.6vw, 52px); }
/* the last section before the blue close leaves room for the 22° line to arrive over plain surface */
.blk--next { padding-bottom: calc(var(--vw) * 100 * var(--tan22) + clamp(56px, 6vw, 88px)); }

/* ---------- The Ant icons (tools/build_icons.py): ink marks with a blue result, white on the dark surfaces ---------- */
.aicon { display: block; flex: none; width: 60px; height: 60px; color: var(--black); --ai-blue: var(--blue); }
[data-theme="dark"] .aicon, .blk--flow .aicon, .figs .aicon { color: var(--white); --ai-blue: var(--blue-soft); }

/* numbered points under one rule */
.feats { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 40px clamp(28px, 3vw, 48px); }
.feats--5 { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.feats li { position: relative; display: grid; align-content: start; gap: 12px; padding-top: 22px; border-top: 1px solid var(--black); }
.feats__i { width: 76px; height: 76px; margin-bottom: 4px; }
/* with an icon, the number moves to the far corner of the rule */
.feats li:has(.feats__i) .feats__n { position: absolute; top: 22px; left: 0; }       /* the number is set ltr, so a physical side */
[dir="ltr"] .feats li:has(.feats__i) .feats__n { left: auto; right: 0; }
.feats__n { font-size: 15px; font-weight: 700; color: var(--blue); direction: ltr; justify-self: start; font-variant-numeric: tabular-nums; }
.feats h3 { font-weight: 900; font-size: clamp(21px, 1.8vw, 26px); line-height: 1.4; }
.feats p { font-size: 17px; line-height: 1.85; color: var(--grey); }

/* what a project includes */
.incl-wrap { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(28px, 4vw, 72px); margin-top: clamp(64px, 7vw, 104px);
  padding-top: clamp(40px, 4vw, 56px); border-top: 1px solid var(--line); }
.incl__h { font-weight: 900; font-size: clamp(24px, 2.4vw, 34px); line-height: 1.35; }
.incl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px clamp(24px, 3vw, 48px); }
.incl li { position: relative; padding-inline-start: 34px; font-size: 17.5px; line-height: 1.75; }
.incl li::before { content: ""; position: absolute; inset-inline-start: 2px; top: .62em; width: 18px; height: 9px; background: var(--blue); clip-path: var(--ant); }
@media (max-width: 899px) { .incl-wrap { grid-template-columns: minmax(0, 1fr); } .incl { grid-template-columns: minmax(0, 1fr); } }

/* the dark band of figures */
.figs { position: relative; background: var(--black); color: var(--white); padding: clamp(64px, 7vw, 104px) 0; }
.figs__list { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 32px 0; }
.figs__list li { min-width: 0; display: grid; align-content: start; gap: 10px; padding-inline: clamp(20px, 3vw, 44px); border-inline-start: 1px solid var(--glass-line); }
.figs__v { overflow-wrap: anywhere; }
.figs__list li:first-child { padding-inline-start: 0; border: 0; }
.figs__v { font-weight: 900; font-size: clamp(44px, 5vw, 72px); line-height: 1.15; color: var(--blue-soft); }
.figs__t { font-size: 16.5px; line-height: 1.7; color: var(--on-black); max-width: 22em; }
@media (max-width: 720px) { .figs__list li { padding-inline: 0; padding-top: 24px; border: 0; border-top: 1px solid var(--glass-line); } .figs__list li:first-child { padding-top: 0; border: 0; } }

/* the stages, each with what it hands over; on a wide screen the heading stays beside them */
.steps { display: grid; max-width: 980px; }
@media (min-width: 1000px) {
  .blk--steps > .wrap { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: clamp(40px, 5vw, 96px); align-items: start; }
  .blk--steps .blk__head { position: sticky; top: calc(var(--nav-h) + 32px); margin-bottom: 0; }
}
.steps__item { position: relative; display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 0 clamp(16px, 2vw, 28px); padding-bottom: 36px; }
.steps__item::before { content: ""; position: absolute; inset-inline-start: 23px; top: 50px; bottom: 6px; width: 1px; background: var(--line); }
.steps__item:last-child::before { display: none; }
.steps__n { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: var(--black); color: var(--white);
  font-size: 15px; font-weight: 700; direction: ltr; font-variant-numeric: tabular-nums; }
.steps__item:last-child .steps__n { background: var(--blue); }
/* a stage with an icon: the icon stands on the rail, its number sits over the title */
.steps__n:has(.aicon) { width: 56px; height: 56px; border-radius: 0; background: var(--white); }
.steps__n .aicon { width: 56px; height: 56px; }
.steps__item:last-child .steps__n:has(.aicon) { background: var(--white); }
.steps__item:has(.aicon)::before { inset-inline-start: 27px; top: 64px; }
.steps__no { font-size: 13px; font-weight: 700; color: var(--blue); direction: ltr; justify-self: start; font-variant-numeric: tabular-nums; }
.steps__n:not(:has(.aicon)) + .steps__body .steps__no { display: none; }
.steps__body { display: grid; gap: 8px; padding-top: 8px; }
.steps__body h3 { font-weight: 900; font-size: clamp(21px, 1.9vw, 26px); line-height: 1.4; }
.steps__body p { font-size: 17px; line-height: 1.8; color: var(--grey); }
.steps__out { display: inline-flex !important; align-items: center; gap: 10px; justify-self: start; margin-top: 4px; padding: 8px 16px; border-radius: 999px;
  background: var(--tint); color: var(--black) !important; font-size: 15.5px !important; line-height: 1.5 !important; }
.steps__out svg { flex: none; width: 18px; height: 9px; fill: var(--blue); }
.steps__out strong { font-weight: 700; color: var(--blue); }
@media (max-width: 640px) { .steps__item { grid-template-columns: 48px minmax(0, 1fr); } .steps__out { border-radius: 16px; } }

/* what a business uses today, and what takes its place */
.pairs { display: grid; gap: 14px; }
.pairs li { display: grid; grid-template-columns: minmax(0, 1fr) 40px minmax(0, 1fr); align-items: center; gap: 16px; padding: 18px 24px;
  border-radius: 20px; background: var(--white); box-shadow: 0 0 0 1px var(--line-tint); }
.pairs p { display: grid; gap: 2px; font-size: 17.5px; line-height: 1.6; }
.pairs__k { font-size: 13px; font-weight: 700; color: var(--muted); }
.pairs__was { color: var(--grey); }
.pairs__is { font-weight: 700; }
.pairs__is .pairs__k { color: var(--blue); }
.pairs__to { width: 32px; height: 16px; fill: var(--blue); justify-self: center; }
@media (max-width: 720px) { .pairs li { grid-template-columns: minmax(0, 1fr); gap: 8px; } .pairs__to { justify-self: start; transform: rotate(64deg); } }

/* one order through the system, on black */
.blk--flow { background: var(--black); color: var(--white); }
.blk--flow .sec-lede { color: var(--on-black); }
.flow2 { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; }
.flow2 li { position: relative; display: grid; align-content: start; gap: 10px; padding: 22px 20px 24px; border-radius: 22px;
  background: var(--glass); box-shadow: inset 0 0 0 1px var(--glass-line); }
.flow2 li:last-child { background: var(--grad-blue); box-shadow: none; }
.flow2__n { font-size: 14px; font-weight: 700; color: var(--blue-soft); direction: ltr; justify-self: start; }
.flow2__i { width: 64px; height: 64px; margin-bottom: 2px; }
.flow2 li:last-child .flow2__i { --ai-blue: var(--white); color: var(--on-blue); }
.flow2 li:last-child .flow2__n { color: var(--on-blue); }
.flow2 h3 { font-weight: 900; font-size: 20px; line-height: 1.4; }
.flow2 p { font-size: 15.5px; line-height: 1.7; color: var(--on-black); }
.flow2 li:last-child p { color: var(--on-blue); }
@media (max-width: 999px) { .flow2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .flow2 li:last-child { grid-column: 1 / -1; } }
@media (max-width: 560px) { .flow2 { grid-template-columns: minmax(0, 1fr); } }

/* the stages a business is at */
.tiers { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; }
.tiers__item { display: grid; align-content: start; gap: 10px; padding: clamp(24px, 2.6vw, 36px); border-radius: var(--radius); background: var(--white); box-shadow: 0 0 0 1px var(--line-tint); }
.tiers__item:last-child { background: var(--black); color: var(--white); box-shadow: none; }
.tiers h3 { font-weight: 900; font-size: clamp(28px, 2.8vw, 40px); line-height: 1.3; }
.tiers__who { font-size: 16px; color: var(--grey); }
.tiers__item:last-child .tiers__who { color: var(--on-black); }
.tiers ul { display: grid; gap: 10px; margin-top: 12px; }
.tiers ul li { display: flex; gap: 12px; align-items: flex-start; font-size: 17px; font-weight: 500; line-height: 1.6; }
.tiers ul svg { flex: none; width: 18px; height: 9px; margin-top: .55em; fill: var(--blue); }
.tiers__item:last-child ul svg { fill: var(--blue-start); }

/* cards that lead to the project pages */
.works { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px; }
.work-card a { display: grid; gap: 8px; height: 100%; padding: 18px 18px 26px; border-radius: var(--radius); background: var(--ink); color: var(--white);
  text-decoration: none; transition: transform .35s var(--ease-out), box-shadow .35s var(--ease-out); }
.work-card a:hover, .work-card a:focus-visible { transform: translateY(-4px); box-shadow: var(--shadow-blue); }
.work-card__art { display: grid; place-items: center; aspect-ratio: 4 / 3; margin-bottom: 10px; border-radius: calc(var(--radius) - 8px);
  background: radial-gradient(ellipse 60% 55% at 50% 55%, rgba(39, 101, 237, .28), rgba(39, 101, 237, 0) 70%), var(--grad-ink); overflow: hidden; }
.work-card__art img { width: 86%; height: 86%; object-fit: contain; }
.work-card__kind { padding-inline: 8px; font-size: 14px; color: var(--blue-soft); }
.work-card__name { padding-inline: 8px; font-weight: 900; font-size: clamp(26px, 2.4vw, 34px); line-height: 1.3; }
.work-card__line { padding-inline: 8px; font-size: 16px; line-height: 1.7; color: var(--on-black); }
.work-card__more { display: inline-flex; gap: 10px; align-items: center; margin-top: 8px; padding-inline: 8px; font-weight: 700; font-size: 15.5px; }
a:hover .link__arrow, a:focus-visible .link__arrow { transform: translateX(-6px); }

/* the questions */
.faq2__grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: clamp(36px, 5vw, 96px); align-items: start; }
.faq2__head { display: grid; justify-items: start; gap: 18px; position: sticky; top: calc(var(--nav-h) + 32px); }
.faq2__head .sec-title { font-size: clamp(30px, 3.6vw, 52px); }
.faq2 { border-top: 1px solid var(--black); }
.qa { border-bottom: 1px solid var(--line); }
.qa__q { display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 76px; padding: 18px 0; cursor: pointer; list-style: none;
  font-weight: 700; font-size: clamp(17.5px, 1.4vw, 20px); line-height: 1.5; }
.qa__q::-webkit-details-marker { display: none; }
.qa__mark { position: relative; flex: none; width: 36px; height: 36px; border-radius: 50%; background: var(--white); box-shadow: 0 0 0 1px var(--line); transition: background-color .25s; }
.qa__mark::before, .qa__mark::after { content: ""; position: absolute; left: 50%; top: 50%; width: 14px; height: 2px; margin: -1px 0 0 -7px; border-radius: 2px; background: var(--black); transition: transform .3s var(--ease-out), background-color .25s; }
.qa__mark::after { transform: rotate(90deg); }
.qa[open] .qa__mark { background: var(--blue); box-shadow: none; }
.qa[open] .qa__mark::before, .qa[open] .qa__mark::after { background: var(--white); }
.qa[open] .qa__mark::after { transform: rotate(0deg); }
.qa__a { padding: 0 0 24px; max-width: 46em; }
.qa__a p { font-size: 17px; line-height: 1.85; color: var(--grey); }
@media (max-width: 899px) { .faq2__grid { grid-template-columns: minmax(0, 1fr); } .faq2__head { position: static; } }

/* chips */
.chips2 { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.chips2 li { padding: 7px 15px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--line-tint); font-size: 15px; font-weight: 500; line-height: 1.5; }

/* a project's chapters */
.slogan { margin: -24px 0 clamp(40px, 5vw, 64px); font-weight: 900; font-size: clamp(26px, 2.8vw, 40px); line-height: 1.4; color: var(--blue); }
.chaps { display: grid; }
.chap { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: 12px clamp(28px, 4vw, 72px); padding: clamp(28px, 3vw, 40px) 0; border-top: 1px solid var(--line); }
.chap:first-child { border-top-color: var(--black); }
.chap__h { display: flex; align-items: baseline; gap: 16px; }
.chap__h:has(.chap__i) { align-items: center; }
.chap__i { width: 64px; height: 64px; }
.chap__n { flex: none; font-size: 15px; font-weight: 700; color: var(--blue); direction: ltr; font-variant-numeric: tabular-nums; }
.chap h3 { font-weight: 900; font-size: clamp(22px, 2vw, 28px); line-height: 1.4; }
.chap__t p { font-size: 17.5px; line-height: 1.9; color: var(--grey); max-width: 40em; }
/* a short Latin name (Apple Wallet, App Store) stays on one line inside Arabic text */
.chap__t bdi, .feats p bdi, .steps__body bdi, .qa__a bdi { white-space: nowrap; }
@media (max-width: 799px) { .chap { grid-template-columns: minmax(0, 1fr); } }
.types { margin-top: clamp(48px, 5vw, 72px); padding: clamp(24px, 3vw, 36px); border-radius: var(--radius); background: var(--tint); }
/* what a project is built with: one line of chips under the chapters */
.stack { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 18px; margin-top: clamp(40px, 4vw, 56px); padding-top: 28px; border-top: 1px solid var(--line); }
.stack__h { font-size: 15px; font-weight: 700; color: var(--grey); }
.stack .chips2 { margin-top: 0; }
[data-scheme="dark"] .stack__h { color: var(--text-2); }
.types__h { font-weight: 900; font-size: clamp(22px, 2vw, 28px); }
.types .chips2 li { background: var(--white); box-shadow: none; font-size: 16.5px; font-weight: 700; padding: 10px 20px; }

/* screenshots */
.gallery { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: clamp(14px, 1.6vw, 24px); align-items: start; }
.shot { margin: 0; overflow: hidden; background: var(--white); box-shadow: 0 0 0 1px var(--line-tint), var(--shadow-card); }
.shot img { width: 100%; height: auto; }
.shot--wide { grid-column: span 12; border-radius: 18px; }
.shot--tall { grid-column: span 4; border-radius: 28px; }
.shot--card { grid-column: span 4; border-radius: 22px; }
.gallery:has(.shot--wide + .shot--tall:last-child) .shot--wide { grid-column: span 8; }
.gallery:has(.shot--wide + .shot--tall:last-child) .shot--tall { grid-column: span 4; }
/* the phone screens arrive in their own frames; they sit on the surface without a box */
.shot--tall:has(img[src*="mq-"]), .shot--tall:has(img[src*="jp-home"]) { background: none; box-shadow: none; border-radius: 0; }
@media (max-width: 760px) { .shot--wide, .gallery:has(.shot--wide + .shot--tall:last-child) .shot--wide { grid-column: span 12; } .shot--tall, .shot--card, .gallery:has(.shot--wide + .shot--tall:last-child) .shot--tall { grid-column: span 6; } }

/* a client's words, on black */
.say { position: relative; background: var(--black); color: var(--white); padding: clamp(80px, 9vw, 128px) 0; }
.say__fig { display: grid; gap: 28px; max-width: 980px; margin: 0; }
.say__mark { width: 48px; height: 24px; fill: var(--blue-start); }
.say__q p { font-weight: 700; font-size: clamp(22px, 2.3vw, 32px); line-height: 1.7; }
.say__who { display: grid; gap: 2px; font-size: 16px; color: var(--on-black); }
.say__who strong { font-size: 18px; color: var(--white); }

/* the next pages to read */
.next2 ul { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 0 clamp(24px, 3vw, 40px); }
.next2__i { grid-area: i; width: 48px; height: 48px; }
.next2 a:has(.next2__i) { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "i t a" "i s a"; }
.next2 a { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "t a" "s a"; gap: 4px 16px; align-items: center; height: 100%;
  padding: 22px 0 24px; border-top: 1px solid var(--black); text-decoration: none; }
.next2 strong { grid-area: t; font-weight: 900; font-size: clamp(20px, 1.7vw, 24px); line-height: 1.4; }
.next2 a > span:not(.link__arrow) { grid-area: s; font-size: 16px; color: var(--grey); }
.next2 .link__arrow { grid-area: a; font-size: 22px; color: var(--blue); }

/* ---------- The close: the brand blue arriving on the 22° line, one sentence and one action ---------- */
.close { --surface: var(--grad-blue); color: var(--white); margin-top: calc(var(--vw) * -100 * var(--tan22));
  padding: calc(var(--wedge) + clamp(32px, 4vw, 64px)) 0 clamp(80px, 9vw, 128px); }
.close__inner { display: grid; justify-items: start; gap: 20px; }
.close__title { font-weight: 900; font-size: clamp(36px, 4.6vw, 64px); line-height: 1.3; max-width: 16em; text-wrap: balance; }
.close__lede { font-size: clamp(18px, 1.56vw, 22.5px); line-height: 1.75; color: var(--on-blue); max-width: 34em; }
.close__acts { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 12px; }
.close .btn--light .btn__ant { fill: var(--blue); transform: rotate(64deg); transition: transform .42s var(--ease-snap); }
.close .btn--light:hover .btn__ant, .close .btn--light:focus-visible .btn__ant { transform: rotate(0deg); }

/* ---------- The missing page ---------- */
.lost { position: relative; overflow: hidden; display: grid; align-items: center; min-height: 100vh; min-height: 100dvh;
  background: var(--black); color: var(--white); padding: calc(var(--nav-h) + 48px) 0 clamp(120px, 14vw, 180px); }
.lost__inner { position: relative; display: grid; justify-items: start; gap: 22px; }
.lost__title { font-weight: 900; font-size: clamp(44px, 6.8vw, 100px); line-height: 1.25; max-width: 12em; text-wrap: balance; }
.lost__lede { font-size: clamp(18px, 1.56vw, 22.5px); line-height: 1.75; color: var(--on-black); max-width: 34em; }
.lost__acts { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 10px; }
.lost__ants { position: absolute; bottom: clamp(40px, 5vw, 64px); inset-inline-start: var(--margin); color: var(--white); }

/* ---------- The footer's register line ---------- */
.foot__cr { display: inline-flex; align-items: center; gap: 10px; }
.foot__cr img { width: 26px; height: 26px; border-radius: 5px; }

/* ---------- Dark ---------- */
[data-scheme="dark"] .doc { background: var(--paper); color: var(--text); }
[data-scheme="dark"] .doc .toc a:hover, [data-scheme="dark"] .doc .toc a.is-current { color: var(--white); }
[data-scheme="dark"] .toc__h, [data-scheme="dark"] .toc a { color: var(--text-2); }
[data-scheme="dark"] .doc__sec p, [data-scheme="dark"] .doc__sec li { color: #C9CEDA; }
[data-scheme="dark"] .doc__sec strong, [data-scheme="dark"] .doc__note strong { color: var(--white); }
[data-scheme="dark"] .doc__sec a { color: var(--blue-soft); }
[data-scheme="dark"] .doc__sec li::before, [data-scheme="dark"] .toc a.is-current { border-color: var(--blue-start); }
[data-scheme="dark"] .doc__sec li::before { background: var(--blue-start); }
[data-scheme="dark"] .doc__n, [data-scheme="dark"] .toc a.is-current .toc__n { color: var(--blue-soft); }
[data-scheme="dark"] .doc__note { background: var(--paper-2); color: var(--text-2); }
@media (max-width: 899px) {
  [data-scheme="dark"] .toc { background: var(--paper); }
  [data-scheme="dark"] .toc a.is-current { background: var(--blue); color: var(--white); }
  [data-scheme="dark"] .toc a.is-current .toc__n { color: var(--on-blue); }
}

[data-scheme="dark"] .blk { background: var(--paper); color: var(--text); }
[data-scheme="dark"] .blk--tint { background: var(--paper-2); }
[data-scheme="dark"] .blk--flow { background: var(--black); }
[data-scheme="dark"] .feats li, [data-scheme="dark"] .faq2, [data-scheme="dark"] .chap:first-child, [data-scheme="dark"] .next2 a { border-color: rgba(255, 255, 255, .7); }
[data-scheme="dark"] .feats p, [data-scheme="dark"] .steps__body p, [data-scheme="dark"] .chap__t p, [data-scheme="dark"] .qa__a p,
[data-scheme="dark"] .tiers__who, [data-scheme="dark"] .next2 a > span:not(.link__arrow), [data-scheme="dark"] .pairs__was { color: var(--text-2); }
[data-scheme="dark"] .feats__n, [data-scheme="dark"] .chap__n, [data-scheme="dark"] .slogan, [data-scheme="dark"] .steps__out strong,
[data-scheme="dark"] .pairs__is .pairs__k, [data-scheme="dark"] .next2 .link__arrow { color: var(--blue-soft); }
[data-scheme="dark"] .incl li::before, [data-scheme="dark"] .tiers ul svg, [data-scheme="dark"] .steps__out svg, [data-scheme="dark"] .pairs__to { background-color: var(--blue-start); fill: var(--blue-start); }
[data-scheme="dark"] .steps__n { background: var(--white); color: var(--black); }
[data-scheme="dark"] .aicon { color: var(--white); --ai-blue: var(--blue-soft); }
[data-scheme="dark"] .steps__n:has(.aicon), [data-scheme="dark"] .steps__item:last-child .steps__n:has(.aicon) { background: var(--paper); }
[data-scheme="dark"] .steps__item:last-child .steps__n { background: var(--blue); color: var(--white); }
[data-scheme="dark"] .steps__out, [data-scheme="dark"] .types { background: var(--card); color: var(--text) !important; }
[data-scheme="dark"] .types .chips2 li { background: var(--paper-2); }
[data-scheme="dark"] .pairs li, [data-scheme="dark"] .tiers__item:not(:last-child) { background: var(--card); box-shadow: 0 0 0 1px rgba(255, 255, 255, .06); }
[data-scheme="dark"] .tiers__item:last-child { background: var(--grad-blue); }
[data-scheme="dark"] .tiers__item:last-child .tiers__who { color: var(--on-blue); }
[data-scheme="dark"] .tiers__item:last-child ul svg { fill: var(--white); }
[data-scheme="dark"] .chips2 li { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14); }
[data-scheme="dark"] .qa__mark { background: var(--card); }
[data-scheme="dark"] .qa__mark::before, [data-scheme="dark"] .qa__mark::after { background: var(--white); }
[data-scheme="dark"] .qa[open] .qa__mark { background: var(--blue); }
[data-scheme="dark"] .shot { background: var(--card); box-shadow: 0 0 0 1px rgba(255, 255, 255, .08), var(--shadow-card); }
[data-scheme="dark"] .work-card a { background: var(--card); box-shadow: 0 0 0 1px rgba(255, 255, 255, .06); }
[data-scheme="dark"] .incl-wrap { border-color: var(--line); }

/* ---------- The English pages: the arrows point the way the page reads ---------- */
[dir="ltr"] a:hover > .link__arrow, [dir="ltr"] a:focus-visible > .link__arrow,
[dir="ltr"] a:hover .link__arrow, [dir="ltr"] a:focus-visible .link__arrow { transform: translateX(6px); }
[lang="en"] .feats p, [lang="en"] .chap__t p, [lang="en"] .qa__a p, [lang="en"] .steps__body p { line-height: 1.7; }
[lang="en"] .say__q p { line-height: 1.55; }

@media (prefers-reduced-motion: reduce) {
  .js .antrow svg { opacity: .9; transform: none; transition: none; }
  .toc a { transition: none; }
}

/* Corplift: the blog (Laravel views in resources/views/corplift). Built into assets/style-*.css after base.css and
   pages.css, so it opens on the same black head and ends on the same blue band as every other page. */

/* ---------- The list of posts ---------- */
.blog { padding-top: clamp(64px, 7vw, 104px); }
.posts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(18px, 2vw, 28px); }
@media (max-width: 1099px) { .posts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 680px) { .posts { grid-template-columns: minmax(0, 1fr); } }

.post-card { position: relative; display: grid; grid-template-rows: auto 1fr; border-radius: var(--radius); overflow: hidden; background: var(--white);
  box-shadow: 0 0 0 1px var(--line); transition: transform .35s var(--ease-out), box-shadow .35s var(--ease-out); }
.post-card:hover, .post-card:focus-within { transform: translateY(-4px); box-shadow: 0 0 0 1px var(--line-tint), var(--shadow-card); }
.post-card__media { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: var(--grad-ink); }
.post-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease-out); }
.post-card:hover .post-card__media img { transform: scale(1.03); }
.post-card__ph { position: absolute; inset: 0; display: grid; place-items: center;
  background: radial-gradient(ellipse 50% 50% at 50% 50%, rgba(39, 101, 237, .3), rgba(39, 101, 237, 0) 70%), var(--grad-ink); }
.post-card__ph svg { width: 64px; height: 32px; fill: var(--blue-start); }
.post-card__body { display: grid; align-content: start; gap: 12px; padding: 22px 24px 26px; }
.post-card__meta { display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: 14px; color: var(--muted); }
.post-card__meta span + span::before { content: ""; display: inline-block; width: 12px; height: 6px; margin-inline-end: 12px; vertical-align: middle;
  background: currentColor; opacity: .6; clip-path: var(--ant); }
.post-card__title { font-weight: 900; font-size: clamp(20px, 1.7vw, 24px); line-height: 1.45; }
.post-card__title a { text-decoration: none; }
/* the title's link covers the whole card */
.post-card__title a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.post-card__title a:focus-visible { outline: none; }
.post-card:has(.post-card__title a:focus-visible) { outline: 2px solid var(--blue); outline-offset: 4px; }
.post-card__excerpt { font-size: 16px; line-height: 1.8; color: var(--grey); }
.post-card__more { display: inline-flex; align-items: center; gap: 10px; margin-top: 4px; font-weight: 700; font-size: 15.5px; color: var(--blue); }
.post-card:hover .link__arrow { transform: translateX(-6px); }
[dir="ltr"] .post-card:hover .link__arrow { transform: translateX(6px); }

/* the newest post leads, across the row */
.post-card--lead { grid-column: 1 / -1; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); grid-template-rows: auto; }
.post-card--lead .post-card__media { aspect-ratio: auto; min-height: 340px; }
.post-card--lead .post-card__body { align-content: center; gap: 16px; padding: clamp(28px, 3.4vw, 52px); }
.post-card--lead .post-card__title { font-size: clamp(26px, 2.8vw, 40px); line-height: 1.35; }
.post-card--lead .post-card__excerpt { font-size: 17.5px; }
@media (max-width: 860px) {
  .post-card--lead { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr; }
  .post-card--lead .post-card__media { aspect-ratio: 16 / 10; min-height: 0; }
}

.blog-pagination { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: clamp(40px, 5vw, 64px); }
.blog-pagination a, .blog-pagination > span > span, .blog-pagination .active > span { display: inline-grid; place-items: center; min-width: 46px; height: 46px; padding: 0 12px;
  border-radius: 999px; font-weight: 700; font-size: 16px; text-decoration: none; box-shadow: inset 0 0 0 1px var(--line-tint); }
.blog-pagination a:hover, .blog-pagination a:focus-visible { box-shadow: inset 0 0 0 1.5px var(--blue); color: var(--blue); }
.blog-pagination .active > span { background: var(--blue); color: var(--white); box-shadow: none; }
.blog-pagination .disabled { opacity: .35; }

.blog-empty { display: grid; justify-items: start; gap: 18px; max-width: 640px; padding: clamp(24px, 4vw, 48px) 0; }
.blog-empty__mark { width: 56px; height: 28px; fill: var(--blue); }

/* ---------- One post ---------- */
.phead--post { padding-bottom: clamp(120px, 13vw, 190px); }
.phead__title--post { font-size: clamp(34px, 4.4vw, 60px); line-height: 1.35; max-width: 20em; }
.post { position: relative; z-index: 1; background: var(--white); color: var(--black); padding: 0 0 clamp(72px, 8vw, 112px); }
.post__wrap { display: grid; justify-items: center; }
.post__cover { width: 100%; max-width: 1100px; margin: calc(clamp(64px, 8vw, 120px) * -1) 0 0; border-radius: var(--radius); overflow: hidden;
  background: var(--grad-ink); box-shadow: var(--shadow-card); }
.post__cover img { width: 100%; height: auto; max-height: 620px; object-fit: cover; }
.post__content, .post__acts { width: 100%; max-width: 760px; }
.post__content { padding-top: clamp(40px, 5vw, 64px); }
.post__acts { display: flex; flex-wrap: wrap; gap: 12px; margin-top: clamp(40px, 5vw, 56px); padding-top: 32px; border-top: 1px solid var(--line); }
:not(.phead) + .post { padding-top: clamp(56px, 6vw, 88px); }

/* the text of a post, as the editor writes it */
.prose { font-size: 18.5px; line-height: 2; color: #26282E; overflow-wrap: break-word; }
.prose > * + * { margin-top: 1.1em; }
.prose h2 { margin-top: 1.9em; font-weight: 900; font-size: clamp(26px, 2.4vw, 32px); line-height: 1.45; color: var(--black); }
.prose h3 { margin-top: 1.6em; font-weight: 900; font-size: clamp(21px, 1.9vw, 25px); line-height: 1.5; color: var(--black); }
.prose h4 { margin-top: 1.4em; font-weight: 700; font-size: 20px; color: var(--black); }
.prose h2 + *, .prose h3 + *, .prose h4 + * { margin-top: .55em; }
.prose a { color: var(--blue); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 5px; }
.prose strong { color: var(--black); }
.prose ul, .prose ol { display: grid; gap: .5em; padding: 0; }
.prose ul > li { position: relative; padding-inline-start: 32px; }
.prose ul > li::before { content: ""; position: absolute; inset-inline-start: 2px; top: .85em; width: 18px; height: 9px; background: var(--blue); clip-path: var(--ant); }
.prose ol { counter-reset: n; }
.prose ol > li { position: relative; padding-inline-start: 40px; counter-increment: n; }
.prose ol > li::before { content: counter(n, decimal-leading-zero); position: absolute; inset-inline-start: 0; top: .1em; font-size: 15px; font-weight: 700; color: var(--blue); }
.prose blockquote { margin-inline: 0; padding: 6px 24px; border-inline-start: 3px solid var(--blue); font-weight: 700; font-size: 1.08em; color: var(--black); }
.prose img, .prose video, .prose iframe { max-width: 100%; height: auto; border-radius: 18px; }
.prose figure { margin-inline: 0; }
.prose figcaption { margin-top: 10px; font-size: 14.5px; color: var(--muted); }
.prose hr { height: 1px; border: 0; background: var(--line); margin-block: 2.4em; }
.prose table { width: 100%; border-collapse: collapse; font-size: 16px; display: block; overflow-x: auto; }
.prose th, .prose td { padding: 10px 14px; border-bottom: 1px solid var(--line); text-align: start; }
.prose th { font-weight: 700; color: var(--black); }
.prose code { padding: 2px 6px; border-radius: 6px; background: var(--tint); font-size: .9em; direction: ltr; unicode-bidi: isolate; }
.prose pre { padding: 18px 20px; border-radius: 16px; background: var(--ink); color: var(--white); overflow-x: auto; direction: ltr; font-size: 15px; line-height: 1.7; }
.prose pre code { padding: 0; background: none; }
[lang="en"] .prose { line-height: 1.8; }

/* ---------- Dark ---------- */
[data-scheme="dark"] .post-card { background: var(--card); box-shadow: 0 0 0 1px rgba(255, 255, 255, .06); }
[data-scheme="dark"] .post-card:hover, [data-scheme="dark"] .post-card:focus-within { box-shadow: 0 0 0 1px rgba(255, 255, 255, .12), 0 24px 60px rgba(0, 0, 0, .6); }
[data-scheme="dark"] .post-card__excerpt { color: var(--text-2); }
[data-scheme="dark"] .post-card__more { color: var(--blue-soft); }
[data-scheme="dark"] .blog-pagination a, [data-scheme="dark"] .blog-pagination > span > span { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14); }
[data-scheme="dark"] .post { background: var(--paper); color: var(--text); }
[data-scheme="dark"] .prose { color: #C9CEDA; }
[data-scheme="dark"] .prose h2, [data-scheme="dark"] .prose h3, [data-scheme="dark"] .prose h4, [data-scheme="dark"] .prose strong,
[data-scheme="dark"] .prose blockquote, [data-scheme="dark"] .prose th { color: var(--white); }
[data-scheme="dark"] .prose a { color: var(--blue-soft); }
[data-scheme="dark"] .prose ul > li::before { background: var(--blue-start); }
[data-scheme="dark"] .prose ol > li::before { color: var(--blue-soft); }
[data-scheme="dark"] .prose code { background: var(--card); }
[data-scheme="dark"] .blog-empty__mark { fill: var(--blue-start); }