/* 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; }
}