/* Sitewide v2 restyle (2026-10-21): the inner-page kit on top of v2.css. Every page that is not the homepage reads these
   classes: the page hero (.ph), section bands (.sx), cards, rows, steps, prices, device mockups, closing band, prose,
   cookie banner and the mobile call bar. Tokens, header, footer, buttons and the pixel system come from v2.css.
   Spec: DESIGN.md "Sitewide v2 restyle". Per-kind files: company.css, tools.css, proof.css, portfolio.css. */

@font-face { font-family: "Exo 2 Fallback"; src: local("Arial"); size-adjust: 106.6%; ascent-override: 93.8%; descent-override: 18.9%; line-gap-override: 0%; }
@font-face { font-family: "Montserrat Fallback"; src: local("Arial"); size-adjust: 112.2%; ascent-override: 86.2%; descent-override: 22.4%; line-gap-override: 0%; }

:root {
  --ok: #0B8F63; --warn: #A56A0A; --bad: #C93A33;
  --stage: linear-gradient(160deg, var(--surface), var(--tint));
}
[data-theme="dark"] { --ok: #5ED6A8; --warn: #F2B766; --bad: #FF8F80; --stage: linear-gradient(160deg, #0F1D3A, #0A1630); }
.sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }

/* ---------- shell additions: footer columns, cookie banner, mobile call bar ---------- */
.ftr-cols { grid-template-columns: repeat(3, minmax(0, auto)); gap: 8px 28px; justify-content: start; }
.ftr-cols .plus-list a { font-size: 13px; letter-spacing: .04em; }
.ftr-lang { width: auto !important; padding: 0 14px; font: 700 13px/1 var(--f-head); text-decoration: none; }
.ck-open { background: none; border: 0; padding: 0; font: inherit; color: inherit; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.ck-open:hover { color: #fff; }
.no-js .ck-open { display: none; }
.ck { position: fixed; z-index: 70; left: 16px; right: 16px; bottom: 16px; max-width: 540px; margin-inline: auto 0; padding: 20px 22px; background: var(--navy); color: var(--navy-ink); font-size: 15px; line-height: 1.5; box-shadow: 0 24px 60px -14px rgba(0, 0, 0, .6), inset 0 0 0 1px var(--navy-line);
  clip-path: polygon(14px 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%, 0 14px); }
.ck[hidden] { display: none; }
.ck a { color: var(--cyan); }
.ck-btns { display: flex; gap: 10px; margin-top: 16px; }
.ck-btns .btn { flex: 1; min-height: 44px; padding: 0 16px; font-size: 14px; --c: 9px; }
.ck .btn-cut { background: #fff; color: #fff; }  /* both choices share one look: equal weight */
.ck .btn-cut::before { background: var(--navy); }
.ck .btn-cut:hover { color: var(--navy); }
.ck .btn-cut:hover::before { background: #fff; }
.mbar { display: none; }
@media (max-width: 820px) {
  .ck { bottom: calc(76px + env(safe-area-inset-bottom)); margin-inline: auto; }
  .mbar { position: fixed; z-index: 55; left: 0; right: 0; bottom: 0; display: grid; grid-template-columns: 1fr 1.5fr; gap: 10px; padding: 10px 14px calc(10px + env(safe-area-inset-bottom)); background: color-mix(in srgb, var(--navy) 96%, transparent); border-top: 1px solid var(--navy-line); }
  .mbar a { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; font: 700 15px/1 var(--f-head); text-decoration: none; clip-path: polygon(9px 0, 100% 0, 100% calc(100% - 9px), calc(100% - 9px) 100%, 0 100%, 0 9px); }
  .mbar .call { background: #fff; color: var(--navy); }
  .mbar .book { background: var(--accent); color: #0A1428; }
  .mbar svg { width: 16px; height: 16px; }
  body { padding-bottom: 0; }
  .ftr-legal { padding-bottom: 70px; }
}

/* ---------- reveal (inner pages): blocks rise in 22 px, 70 ms apart ---------- */
@media (prefers-reduced-motion: no-preference) {
  .js .reveal { opacity: 0; transform: translateY(22px); }
  .js .reveal.in { opacity: 1; transform: none; transition: transform var(--t-slow) var(--ease) calc(var(--i, 0) * 70ms), opacity var(--t-std) var(--ease) calc(var(--i, 0) * 70ms); }
}

/* ---------- breadcrumbs ---------- */
.crumbs { display: flex; flex-wrap: wrap; gap: 4px 8px; margin: 0 0 30px; padding: 0; list-style: none; font: 600 12.5px/1.4 var(--f-head); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.crumbs li + li::before { content: ""; display: inline-block; width: 5px; height: 5px; margin-right: 8px; vertical-align: 2px; background: var(--accent); }
.crumbs a { color: var(--muted); text-decoration: none; transition: color 90ms; }
.crumbs a:hover { color: var(--accent-ink); }
.crumbs [aria-current] { color: var(--ink); }

/* ---------- page hero (.ph): light, grid paper, a pixel field, the visual on the right ---------- */
.ph { position: relative; isolation: isolate; padding: 156px 0 120px; overflow-x: clip; background: var(--bg); transition: background-color var(--t-std) var(--ease); }
.ph::before { content: ""; position: absolute; inset: 0; z-index: -2; background-image: linear-gradient(var(--grid) 1px, transparent 1px), linear-gradient(90deg, var(--grid) 1px, transparent 1px); background-size: 56px 56px; -webkit-mask-image: radial-gradient(75% 90% at 78% 18%, #000, transparent 78%); mask-image: radial-gradient(75% 90% at 78% 18%, #000, transparent 78%); }
.ph::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(44% 60% at 86% 8%, color-mix(in srgb, var(--accent) 17%, transparent), transparent 70%), radial-gradient(36% 50% at 4% 96%, color-mix(in srgb, #7A5CFF 8%, transparent), transparent 70%); }
.ph-in { display: grid; grid-template-columns: minmax(0, 1.04fr) minmax(0, .96fr); gap: clamp(32px, 5vw, 76px); align-items: center; }
.ph.no-vis .ph-in { grid-template-columns: minmax(0, 860px); }
.ph h1 { font-size: clamp(36px, 5vw, 72px); line-height: 1.02; letter-spacing: -.035em; }
.ph h1 .ln-i { display: inline; }
.ph-lead { margin-top: 24px; max-width: 58ch; font-size: clamp(17px, 1.4vw, 20px); line-height: 1.6; color: var(--ink-2); }
.ph-lead p + p { margin-top: 12px; }
.ph-lead a, .xprose a, .qa-a a, .xnote a, .sx-head-p a, .xcta .lead a { color: var(--accent-ink); text-underline-offset: 3px; text-decoration-thickness: 1.5px; }
.ph-price { display: inline-flex; align-items: center; gap: 12px; margin-top: 26px; padding: 11px 18px; font: 700 15px/1.3 var(--f-head); color: var(--ink); background: color-mix(in srgb, var(--accent) 12%, var(--surface)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 38%, transparent);
  clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px); }
.ph-price::before { content: ""; width: 8px; height: 8px; background: var(--accent); flex: none; }
.ph-cta, .cta-row { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
.ph-cta { margin-top: 34px; }
.ph-meta { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 28px; }
.xchips { display: flex; flex-wrap: wrap; gap: 8px; }
.xchips li, .ph-meta li { padding: 7px 13px; font: 600 13px/1.2 var(--f-head); letter-spacing: .02em; color: var(--ink-2); background: var(--surface); box-shadow: inset 0 0 0 1px var(--line-2); clip-path: polygon(6px 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%, 0 6px); }
.ph-px { position: absolute; z-index: -1; right: 0; top: 0; width: min(52%, 700px); height: 100%; display: grid; grid-template-columns: repeat(24, 1fr); align-content: start; gap: 4px; padding: 140px 0 70px; pointer-events: none; -webkit-mask-image: linear-gradient(90deg, transparent, #000 45%); mask-image: linear-gradient(90deg, transparent, #000 45%); }
.ph-px i, .ph-px b { aspect-ratio: 1; }
.ph-px i { display: block; background: var(--accent); opacity: var(--o, .2); }
.ph-px i.t { animation: tw 6s cubic-bezier(.4, 0, .2, 1) infinite; animation-delay: calc(var(--tw, 0ms) * -1); }
[data-theme="dark"] .ph-px i { background: var(--cyan); }
.ph.edge-bg .pxedge.down { --pxc: var(--bg); }
.ph.edge-surface .pxedge.down { --pxc: var(--surface); }
.ph.edge-tint .pxedge.down { --pxc: var(--bg-2); }
.ph.edge-grid .pxedge.down { --pxc: var(--bg); }

/* the visual stage: a chamfered glass panel with a dotted floor and the animated icon (or a device) in the middle */
.stage { --c: 46px; position: relative; isolation: isolate; display: grid; place-items: center; min-height: 380px; padding: 36px; background: radial-gradient(60% 60% at 50% 46%, color-mix(in srgb, var(--accent) 22%, transparent), transparent 72%), var(--stage); box-shadow: inset 0 0 0 1px var(--line);
  clip-path: polygon(var(--c) 0, 100% 0, 100% calc(100% - var(--c)), calc(100% - var(--c)) 100%, 0 100%, 0 var(--c)); }
.stage::before { content: ""; position: absolute; inset: 0; z-index: -1; background-image: radial-gradient(var(--line-2) 1.2px, transparent 1.5px); background-size: 24px 24px; -webkit-mask-image: radial-gradient(70% 70% at 50% 50%, #000, transparent 85%); mask-image: radial-gradient(70% 70% at 50% 50%, #000, transparent 85%); }
.stage::after { content: ""; position: absolute; right: 22px; top: 22px; width: 12px; height: 12px; background: var(--accent); box-shadow: -20px 0 0 -3px color-mix(in srgb, var(--accent) 50%, transparent), 0 20px 0 -3px color-mix(in srgb, var(--accent) 28%, transparent); }
.stage-obj { display: block; width: 100%; }
.stage-obj .ani { width: 100%; max-width: 440px; margin-inline: auto; height: auto; overflow: visible; filter: drop-shadow(0 14px 22px rgba(0, 140, 230, .26)); }
.stage-cap { position: absolute; left: 24px; bottom: 18px; font: 700 11.5px/1 var(--f-head); letter-spacing: .2em; text-transform: uppercase; color: var(--muted); }
.stage .mascot-spot { margin-inline: auto; }
.stage-obj.has-mascot { position: relative; display: grid; place-items: center; }
.stage-obj.has-mascot .ani { position: absolute; inset: 0; max-width: none; height: 100%; pointer-events: none; filter: none; }

/* device mockups (laptop + phone) in a stage */
.stage-dev { padding: 40px 36px 44px; }
.media-dev { position: relative; width: 100%; padding: 0 7% 26px 0; }
.dev { position: relative; padding-bottom: 6px; }
.laptop { position: relative; }
.laptop .screen { aspect-ratio: 960 / 467; border: 6px solid #0b0f19; border-bottom-width: 8px; border-radius: 10px 10px 0 0; overflow: hidden; background: #0b0f19; box-shadow: 0 30px 56px -28px rgba(10, 20, 40, .55); }
.laptop .screen img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.laptop::after { content: ""; display: block; height: 11px; margin: 0 -3%; background: linear-gradient(#d4dae5, #8d95a3); border-radius: 0 0 16px 16px; box-shadow: 0 14px 22px -12px rgba(10, 20, 40, .45); }
.xphone { position: relative; width: 100%; aspect-ratio: 390 / 560; border: 5px solid #0b0f19; border-radius: 24px; overflow: hidden; background: #0b0f19; box-shadow: 0 24px 44px -22px rgba(10, 20, 40, .6); }
.xphone img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.xphone::before { content: ""; position: absolute; top: 5px; left: 50%; width: 30%; height: 7px; transform: translateX(-50%); background: #0b0f19; border-radius: 6px; z-index: 2; }
.dev .xphone { position: absolute; right: -2%; bottom: -18px; width: 20%; transition: transform var(--t-slow) var(--ease); }
.media-dev .xphone { position: absolute; right: 0; bottom: 0; width: 24%; transition: transform var(--t-slow) var(--ease); }
.xdev:hover .dev .xphone, .media-dev:hover .xphone { transform: translateY(-10px); }
.linkcard { display: grid; gap: 6px; align-content: end; min-height: 100%; padding: 26px; text-decoration: none; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); transition: background-color 100ms var(--ease); }
.linkcard:hover { background: var(--tint); }
.linkcard b { font: 700 20px var(--f-head); }
.linkcard span { color: var(--muted); font-size: 14px; }

/* a portrait in a chamfered frame */
.photo-frame { --c: 44px; position: relative; isolation: isolate; width: 100%; max-width: 480px; margin-inline: auto; background: var(--surface);
  clip-path: polygon(var(--c) 0, 100% 0, 100% calc(100% - var(--c)), calc(100% - var(--c)) 100%, 0 100%, 0 var(--c)); box-shadow: inset 0 0 0 1px var(--line); }
.photo-frame img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 18%; }

/* ---------- section bands (.sx): every band has its own layout; the colour alternates ---------- */
.sx { position: relative; padding: var(--sec-y) 0; background: var(--bg); transition: background-color var(--t-std) var(--ease); }
.sx-tint { background: var(--bg-2); }
.sx-white { background: var(--surface); }
.sx-grid { background-color: var(--bg); background-image: linear-gradient(var(--grid) 1px, transparent 1px), linear-gradient(90deg, var(--grid) 1px, transparent 1px); background-size: 52px 52px; }
.sx-dusk { background: var(--dusk); }
.sx-tight { padding: var(--sec-y-tight) 0; }
.sx-head { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-5) var(--sp-8); margin-bottom: var(--head-gap); max-width: 800px; }
.sx-head.split { grid-template-columns: minmax(0, 1fr) minmax(0, .9fr); max-width: none; align-items: end; }
.sx-head.center { margin-inline: auto; text-align: center; justify-items: center; }
.sx-head.center .kicker { justify-content: center; }
.sx-head .kicker { margin-bottom: 16px; }
.sx-head-p { max-width: 60ch; font-size: 17px; line-height: 1.65; color: var(--ink-2); }
.sx-head .h2 { font-size: clamp(30px, 3.8vw, 52px); }
.xnote { margin-top: var(--sp-7); max-width: 78ch; padding: 16px 20px; font-size: 15px; color: var(--ink-2); background: color-mix(in srgb, var(--accent) 7%, var(--surface)); box-shadow: inset 3px 0 0 var(--accent); }
.more-link { margin-top: var(--sp-7); }

/* cards (3-up): chamfered, cursor glow, a pixel number */
.xcards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--grid-gap); }
.xcards.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.xcard { --c: 26px; position: relative; isolation: isolate; padding: 30px 28px 32px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); color: var(--ink); text-decoration: none; display: flex; flex-direction: column;
  clip-path: polygon(0 0, calc(100% - var(--c)) 0, 100% var(--c), 100% 100%, var(--c) 100%, 0 calc(100% - var(--c))); transition: transform 240ms var(--ease); }
.xcard::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: 0; transition: opacity 100ms var(--ease); background: radial-gradient(340px circle at var(--mx, 50%) var(--my, 30%), rgba(0, 187, 255, .16), transparent 62%); }
.xcard:hover::after { opacity: 1; }
a.xcard:hover { transform: translateY(-4px); }
.xcard .n { display: block; margin-bottom: 18px; font: 700 12px/1 var(--f-head); letter-spacing: .2em; color: var(--muted); }
.xcard h3 { font-size: 22px; line-height: 1.15; letter-spacing: -.015em; }
.xcard p { margin-top: 12px; font-size: 15.5px; line-height: 1.6; color: var(--ink-2); }
.xcard ul, .xlist { margin-top: 14px; display: grid; gap: 8px; }
.xcard li, .xlist li { position: relative; padding-left: 20px; font-size: 15px; line-height: 1.5; color: var(--ink-2); }
.xcard li::before, .xlist li::before { content: ""; position: absolute; left: 0; top: .55em; width: 7px; height: 7px; background: var(--accent); }
.xcard .go { margin-top: auto; padding-top: 20px; display: inline-flex; align-items: center; gap: 8px; font: 700 14px/1 var(--f-head); color: var(--accent-ink); }
.xcard .go .arr, .tlink .arr { width: 16px; height: 16px; transition: transform 240ms var(--ease); }
a.xcard:hover .go .arr { transform: translateX(5px); }

/* fit: who it is for / not for */
.xfit { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 0; align-items: stretch; }
.xfit > div { padding: 40px clamp(26px, 4vw, 52px); }
.xfit .yes { --c: 36px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); clip-path: polygon(var(--c) 0, 100% 0, 100% 100%, 0 100%, 0 var(--c)); }
.xfit .no { background: repeating-linear-gradient(135deg, transparent 0 9px, color-mix(in srgb, var(--line-2) 60%, transparent) 9px 10px), var(--bg-2); box-shadow: inset 0 0 0 1px var(--line); }
.xfit h3 { margin-bottom: 22px; font-size: 14px; letter-spacing: .18em; text-transform: uppercase; color: var(--muted); }
.xfit .yes h3 { color: var(--accent-ink); }
.xfit ul { display: grid; gap: 16px; }
.xfit li { display: flex; gap: 14px; align-items: flex-start; font-size: 17px; line-height: 1.45; }
.xfit .no li { color: var(--ink-2); }
.ck-ico { flex: none; width: 22px; height: 22px; padding: 4px; margin-top: 1px; }
.xfit .yes .ck-ico, .xchecks .ck-ico { color: #0A1428; background: var(--accent); }
.xfit .no .ck-ico { color: var(--bad); background: color-mix(in srgb, var(--bad) 13%, transparent); }

/* checklist: two columns in one panel */
.xchecks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 56px; padding: 18px clamp(24px, 4vw, 54px); background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); --c: 40px; clip-path: polygon(0 0, calc(100% - var(--c)) 0, 100% var(--c), 100% 100%, var(--c) 100%, 0 calc(100% - var(--c))); }
.xchecks li { display: flex; gap: 14px; align-items: flex-start; padding: 17px 0; font-size: 17px; line-height: 1.45; border-bottom: 1px dashed var(--line-2); }
.xchecks li:nth-last-child(-n+2) { border-bottom: 0; }

/* numbered rows: big outlined numerals that fill on hover */
.xrows { display: grid; border-top: 1px solid var(--line-2); }
.xrow { display: grid; grid-template-columns: 110px minmax(0, .8fr) minmax(0, 1.2fr); gap: 8px 36px; align-items: start; padding: 34px 0; border-bottom: 1px solid var(--line-2); }
.xrow .n { font: 800 clamp(44px, 4.4vw, 64px)/.9 var(--f-head); letter-spacing: -.03em; color: transparent; -webkit-text-stroke: 1.4px color-mix(in srgb, var(--ink) 24%, transparent); transition: color 120ms, -webkit-text-stroke-color 120ms; }
.xrow:hover .n { color: var(--accent); -webkit-text-stroke-color: var(--accent); }
.xrow h3 { font-size: clamp(21px, 1.8vw, 26px); line-height: 1.15; letter-spacing: -.015em; }
.xrow .body > * + * { margin-top: 12px; }
.xrow .body, .xrow > p { color: var(--ink-2); font-size: 16.5px; line-height: 1.65; }
.xrow small { display: block; color: var(--muted); font-size: 13px; }
.xrows.compact .xrow { grid-template-columns: 90px minmax(0, 1fr); padding: 28px 0; }
.xrows.compact .xrow .body { grid-column: 2; }
.xrows .xchips { margin-top: 14px; }

/* process steps: a drawn line with pixel nodes, each step lights as it arrives */
.xsteps { position: relative; display: grid; grid-template-columns: repeat(var(--cols, 4), minmax(0, 1fr)); gap: 28px; padding-top: 44px; counter-reset: st; }
.xsteps.three { --cols: 3; }
.xsteps::before { content: ""; position: absolute; left: 7px; right: 0; top: 7px; height: 2px; background: repeating-linear-gradient(90deg, var(--line-2) 0 8px, transparent 8px 14px); }
.xsteps li { position: relative; padding-right: 8px; }
.xsteps li::before { content: ""; position: absolute; left: 0; top: -44px; width: 16px; height: 16px; background: var(--bg); box-shadow: inset 0 0 0 2px var(--accent); transition: background-color 160ms var(--ease) calc(var(--i, 0) * 120ms + 300ms); }
.js .xsteps li.in::before, .no-js .xsteps li::before { background: var(--accent); }
.xsteps .pill { display: inline-block; margin-bottom: 14px; font: 700 12px/1 var(--f-head); letter-spacing: .16em; text-transform: uppercase; color: var(--accent-ink); }
.xsteps h3 { font-size: 22px; line-height: 1.15; letter-spacing: -.015em; }
.xsteps p { margin-top: 10px; font-size: 15.5px; line-height: 1.6; color: var(--ink-2); }

/* price cards */
.xprices { display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); gap: var(--grid-gap); align-items: stretch; }
.xprice { --c: 28px; position: relative; isolation: isolate; display: flex; flex-direction: column; padding: 32px 28px 30px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line);
  clip-path: polygon(0 0, calc(100% - var(--c)) 0, 100% var(--c), 100% 100%, var(--c) 100%, 0 calc(100% - var(--c))); transition: transform 240ms var(--ease); }
.xprice::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: 0; transition: opacity 100ms var(--ease); background: radial-gradient(340px circle at var(--mx, 50%) var(--my, 30%), rgba(0, 187, 255, .16), transparent 62%); }
.xprice:hover::after { opacity: 1; }
.xprice:hover { transform: translateY(-4px); }
.xprice .pill { align-self: flex-start; margin-bottom: 18px; padding: 6px 11px; font: 700 11.5px/1 var(--f-head); letter-spacing: .14em; text-transform: uppercase; color: var(--accent-ink); background: color-mix(in srgb, var(--accent) 12%, transparent); }
.xprice h3 { font-size: 22px; line-height: 1.15; }
.xprice .amount { margin-top: 12px; font: 800 clamp(34px, 3.2vw, 46px)/1 var(--f-head); letter-spacing: -.03em; background: var(--acc-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.xprice .amount small { font: 600 14px var(--f-body); letter-spacing: 0; color: var(--muted); -webkit-text-fill-color: var(--muted); }
.xprice p { margin-top: 12px; font-size: 15.5px; line-height: 1.55; color: var(--ink-2); }
.xprice ul { margin-top: 18px; padding-top: 18px; border-top: 1px dashed var(--line-2); display: grid; gap: 9px; }
.xprice li { position: relative; padding-left: 20px; font-size: 15px; line-height: 1.45; }
.xprice li::before { content: ""; position: absolute; left: 0; top: .5em; width: 7px; height: 7px; background: var(--accent); }

/* work: device mockups on glass stages */
.xwork { display: grid; grid-template-columns: repeat(var(--cols, 2), minmax(0, 1fr)); gap: var(--head-gap) var(--sp-7); }
.xwork.two { --cols: 2; }
.xdev { margin: 0; }
.xdev .dev { padding: 36px 32px 40px; background: var(--stage); box-shadow: inset 0 0 0 1px var(--line); position: relative; isolation: isolate; --c: 30px; clip-path: polygon(var(--c) 0, 100% 0, 100% calc(100% - var(--c)), calc(100% - var(--c)) 100%, 0 100%, 0 var(--c)); }
.xdev .dev::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: 0; transition: opacity 100ms; background: radial-gradient(360px circle at var(--mx, 50%) var(--my, 30%), rgba(0, 187, 255, .18), transparent 62%); }
.xdev .dev:hover::after { opacity: 1; }
.xdev .dev .xphone { right: 22px; bottom: 14px; width: 17%; }
.xdev figcaption { margin-top: 24px; display: flex; justify-content: space-between; gap: 12px; align-items: baseline; font-size: 14px; color: var(--muted); }
.xdev figcaption b { display: block; font: 700 19px var(--f-head); color: var(--ink); }
.xdev figcaption .tlink { margin-top: 0; white-space: nowrap; font-size: 14px; }

/* industry cards: the animated icon on top */
.xind-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--grid-gap); }
.xind-grid.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.xind { --c: 26px; position: relative; isolation: isolate; display: flex; flex-direction: column; padding: 26px 26px 30px; text-decoration: none; color: var(--ink); background: var(--surface); box-shadow: inset 0 0 0 1px var(--line);
  clip-path: polygon(0 0, calc(100% - var(--c)) 0, 100% var(--c), 100% 100%, var(--c) 100%, 0 calc(100% - var(--c))); transition: transform 240ms var(--ease); }
.xind::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: 0; transition: opacity 100ms var(--ease); background: radial-gradient(340px circle at var(--mx, 50%) var(--my, 30%), rgba(0, 187, 255, .16), transparent 62%); }
.xind:hover::after { opacity: 1; }
.xind:hover { transform: translateY(-4px); }
.xind-ic { display: grid; place-items: center; height: 168px; margin: -4px -4px 14px; border-radius: 0; background: radial-gradient(70% 70% at 50% 45%, color-mix(in srgb, var(--accent) 14%, transparent), transparent 72%); }
.xind-ic .ani { width: 100%; max-width: 210px; height: auto; overflow: visible; filter: drop-shadow(0 8px 12px rgba(0, 140, 230, .22)); }
.xind h3 { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 21px; line-height: 1.2; letter-spacing: -.015em; }
.xind h3 .arr { flex: none; width: 17px; height: 17px; color: var(--accent-ink); transition: transform 240ms var(--ease); }
.xind:hover h3 .arr { transform: translateX(5px); }
.xind p { margin-top: 10px; font-size: 15px; line-height: 1.55; color: var(--ink-2); }

/* hub cards: icon, name, one-sentence summary */
.xhub-ic { display: grid; place-items: center; height: 150px; margin: -6px -6px 12px; background: radial-gradient(70% 70% at 50% 45%, color-mix(in srgb, var(--accent) 14%, transparent), transparent 72%); }
.xhub-ic .ani { width: 100%; max-width: 190px; height: auto; overflow: visible; filter: drop-shadow(0 8px 12px rgba(0, 140, 230, .22)); }

/* service link cards (related services, hub lists): icon-free rows with an arrow */
.xsvc-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; border-top: 1px solid var(--line-2); border-left: 1px solid var(--line-2); }
.xsvc { position: relative; display: flex; flex-direction: column; gap: 8px; padding: 28px 28px 30px; text-decoration: none; color: var(--ink); border-right: 1px solid var(--line-2); border-bottom: 1px solid var(--line-2); transition: background-color 100ms var(--ease); }
.xsvc:hover { background: color-mix(in srgb, var(--accent) 7%, var(--surface)); }
.xsvc h3 { font-size: 20px; line-height: 1.2; letter-spacing: -.015em; }
.xsvc p { font-size: 15px; line-height: 1.55; color: var(--ink-2); }
.xsvc .arr { width: 18px; height: 18px; margin-top: auto; padding-top: 6px; box-sizing: content-box; color: var(--accent-ink); transition: transform 240ms var(--ease); }
.xsvc:hover .arr { transform: translateX(6px); }

/* the bilingual chat (demo): two threads next to a short pitch, the mascot beside it on the AI pages */
.xdemo { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 56px; align-items: center; }
.xdemo .lead { margin-top: 20px; font-size: 17px; color: var(--ink-2); max-width: 48ch; }
.xdemo .cta-row { margin-top: 28px; }
.threads { display: grid; gap: 18px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.thread { --c: 22px; display: flex; flex-direction: column; gap: 10px; padding: 22px 20px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); clip-path: polygon(var(--c) 0, 100% 0, 100% calc(100% - var(--c)), calc(100% - var(--c)) 100%, 0 100%, 0 var(--c)); }
.thread .lbl { font: 700 11px/1 var(--f-head); letter-spacing: .2em; text-transform: uppercase; color: var(--muted); }
.bub { max-width: 90%; padding: 10px 14px; font-size: 14.5px; line-height: 1.45; }
.bub.in { align-self: flex-start; color: var(--ink); background: var(--bg-2); border-radius: 14px 14px 14px 3px; }
.bub.out { align-self: flex-end; color: #0A1428; font-weight: 600; background: var(--accent); border-radius: 14px 14px 3px 14px; }
.demo-cap { grid-column: 1 / -1; font-size: 13px; color: var(--muted); }
.xdemo .mascot-spot { position: absolute; right: -10px; top: -92px; width: 130px; }

/* mascot spot: one pose per placement */
.mascot-spot { position: relative; display: block; width: var(--ms, 180px); }
.mascot-spot .m-stage { width: 100%; }
.mascot-spot .mascot-bub { position: absolute; z-index: 2; left: auto; right: 78%; top: 6%; width: max-content; max-width: 190px; margin: 0; text-align: left; }
.mascot-spot .mascot-bub::after { left: auto; right: -6px; bottom: 14px; margin: 0; }

/* prose (markdown from the content drafts) */
.xprose > * + * { margin-top: 16px; }
.xprose p, .xprose li { font-size: 17px; line-height: 1.7; color: var(--ink-2); }
.xprose strong { color: var(--ink); }
.xprose ul, .xprose ol { display: grid; gap: 8px; padding-left: 0; }
.xprose ul li { position: relative; padding-left: 22px; }
.xprose ul li::before { content: ""; position: absolute; left: 0; top: .62em; width: 7px; height: 7px; background: var(--accent); }
.xprose ol { counter-reset: o; }
.xprose ol li { position: relative; padding-left: 34px; counter-increment: o; }
.xprose ol li::before { content: counter(o); position: absolute; left: 0; top: 0; font: 800 15px/1.7 var(--f-head); color: var(--accent-ink); }
.xprose h3, .xprose h4 { margin-top: 28px; font-size: 21px; letter-spacing: -.015em; }
.xprose blockquote { margin-left: 0; padding: 14px 20px; box-shadow: inset 3px 0 0 var(--accent); background: color-mix(in srgb, var(--accent) 6%, transparent); }
.xprose table { width: 100%; border-collapse: collapse; font-size: 15px; }
.xprose th, .xprose td { padding: 10px 12px; text-align: left; border-bottom: 1px solid var(--line-2); }
.xprose code { padding: 1px 6px; background: var(--bg-2); font-size: .92em; }

/* prose sections of the industry and area pages: three alternating layouts */
.pp { position: relative; padding: var(--sec-y) 0; background: var(--bg); }
.pp-tint { background: var(--bg-2); }
.pp-a .wrap { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 64px; align-items: start; }
.pp-a .pp-h { position: sticky; top: 118px; }
.pp-h .kicker { margin-bottom: 14px; }
.pp-h .h2 { font-size: clamp(28px, 3.2vw, 44px); }
.pp-b .pp-h { max-width: 760px; margin-bottom: var(--head-gap); }
.pp-b .xprose { max-width: 70ch; margin-bottom: var(--sp-6); }
.pp-c .wrap { max-width: 980px; }
.pp-c .pp-h { text-align: center; margin: 0 auto var(--head-gap); }
.pp-c .pp-h .kicker { justify-content: center; }
.pp-c .xprose { text-align: left; }
.pp-c .xrows { margin-top: var(--sp-6); }
.pp-after { margin-top: var(--sp-6); }
.sources { margin-top: var(--sp-6); font-size: 13.5px; color: var(--muted); }
.sources a { color: var(--accent-ink); }

/* closing band: soft glows, a big line, the two buttons, optionally the mascot */
.xcta { position: relative; padding: 160px 0 120px; overflow-x: clip; background: radial-gradient(48% 60% at 12% 30%, color-mix(in srgb, var(--accent) 16%, transparent), transparent 70%), radial-gradient(40% 55% at 92% 80%, color-mix(in srgb, #7A5CFF 10%, transparent), transparent 70%), var(--bg); }
.xcta .cta-edge { --pxc: var(--bg); }
.xcta-in { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 48px; align-items: center; }
.xcta-copy .display-2 { font-size: clamp(34px, 4.4vw, 62px); max-width: 16ch; }
.xcta-copy .lead { max-width: 52ch; }
.xcta-copy .cta-row { margin-top: 34px; }
.xcta .areas { margin-top: 26px; font-size: 14px; color: var(--muted); max-width: 70ch; }
.xcta-mascot { --ms: 230px; }
.xcta-mascot .m-stage { filter: drop-shadow(0 18px 30px rgba(0, 140, 230, .3)); }
.phone-link .px { width: 9px; height: 9px; background: var(--accent); transform: rotate(45deg); }

/* 404 and stub pages */
.stub-in { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 56px; align-items: center; }
.stub-links { margin-top: 36px; display: grid; gap: 28px; }
.stub-links h2 { font-size: 14px; letter-spacing: .18em; text-transform: uppercase; color: var(--muted); font-family: var(--f-head); margin-bottom: 14px; }
.stub-big { font: 800 clamp(90px, 14vw, 200px)/.8 var(--f-head); letter-spacing: -.05em; color: transparent; -webkit-text-stroke: 2px color-mix(in srgb, var(--accent) 50%, transparent); }

/* ---------- tablet / phone ---------- */
@media (max-width: 980px) {
  .ph { padding: 128px 0 84px; }
  .ph-in, .xdemo, .xcta-in, .stub-in { grid-template-columns: minmax(0, 1fr); }
  .ph-px { width: 100%; opacity: .6; }
  .stage { min-height: 300px; }
  .sx-head.split { grid-template-columns: minmax(0, 1fr); }
  .xcards, .xind-grid, .xsvc-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .xfit { grid-template-columns: minmax(0, 1fr); }
  .xfit .yes { clip-path: polygon(var(--c) 0, 100% 0, 100% 100%, 0 100%, 0 var(--c)); }
  .xsteps, .xsteps.three { --cols: 2; row-gap: 48px; }
  .xrow { grid-template-columns: 76px minmax(0, 1fr); }
  .xrow .body, .xrow > p { grid-column: 2; }
  .pp-a .wrap { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .pp-a .pp-h { position: static; }
  .xcta { padding: 120px 0 90px; }
  .xcta-mascot { --ms: 170px; margin-inline: auto; }
  .xdemo .mascot-spot { display: none; }
}
@media (max-width: 640px) {
  .ph { padding: 116px 0 68px; }
  .ph h1 { font-size: clamp(33px, 9.2vw, 44px); }
  .xcards, .xcards.two, .xind-grid, .xind-grid.two, .xsvc-list, .xwork, .xwork.two, .threads { grid-template-columns: minmax(0, 1fr); }
  .xchecks { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .xchecks li:nth-last-child(-n+2) { border-bottom: 1px dashed var(--line-2); }
  .xchecks li:last-child { border-bottom: 0; }
  .xsteps, .xsteps.three { --cols: 1; padding-top: 0; padding-left: 32px; row-gap: 34px; }
  .xsteps::before { left: 7px; right: auto; top: 6px; bottom: 6px; width: 2px; height: auto; background: repeating-linear-gradient(180deg, var(--line-2) 0 8px, transparent 8px 14px); }
  .xsteps li::before { left: -32px; top: 3px; }
  .xrow { grid-template-columns: minmax(0, 1fr); padding: 26px 0; }
  .xrow .body, .xrow > p { grid-column: 1; }
  .xrow .n { font-size: 44px; }
  .xrows.compact .xrow { grid-template-columns: minmax(0, 1fr); }
  .xrows.compact .xrow .body { grid-column: 1; }
  .xdev .dev { padding: 22px 18px 28px; }
  .stage { padding: 22px; min-height: 260px; }
  .stage-dev { padding: 24px 16px 30px; }
  .xdev figcaption { flex-direction: column; gap: 6px; }
  .ftr-cols { grid-template-columns: repeat(2, minmax(0, auto)); }
  .xfit > div { padding: 30px 22px; }
  .mascot-spot .mascot-bub { right: 70%; max-width: 150px; }
  .xsvc { padding: 22px 20px 24px; }
}
@media (prefers-reduced-motion: reduce) {
  .ph-px i.t { animation: none; }
}

/* ---------- industry icons (resting frame = the composed final state; v2.js icons() animates them) ---------- */
.ani .draw { stroke-dasharray: 1; stroke-dashoffset: 0; }
.ani .tooth, .ani .roofg, .ani .hammer, .ani .bd { transform-origin: 50% 100%; }
.ani .wv { opacity: 1; }
.ani .ecg { stroke-dasharray: 1; }
.ani .sig { opacity: .9; }

/* ---------- footer reveal on short pages, stub and 404 ---------- */
.ftr-fixed #main { min-height: 100svh; }
.ph.stub { min-height: calc(100svh - 40px); display: flex; align-items: center; }
.ph.stub .ph-in { width: var(--wrap); }
.stub-mascot { --ms: 250px; justify-self: center; }
.stub-mascot .m-stage { filter: drop-shadow(0 18px 30px rgba(0, 140, 230, .3)); }
.stub-links .xchips a { color: inherit; text-decoration: none; }
.stub-links .xchips li:hover { background: color-mix(in srgb, var(--accent) 12%, var(--surface)); }
.ph-note { margin-top: 18px; }
.ph-note .tlink { margin-top: 0; }
.ph.thanks { min-height: 86svh; display: flex; align-items: center; }
.ph.thanks .ph-in { width: var(--wrap); }
@media (max-width: 980px) { .ph.stub, .ph.thanks { min-height: 0; display: block; } .stub-mascot { --ms: 190px; } }

.ph.no-vis .stub-in, .ph.no-vis .thanks-in { grid-template-columns: minmax(0, 1fr) auto; }
@media (max-width: 980px) { .ph.no-vis .stub-in, .ph.no-vis .thanks-in { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Spanish runs about 20% longer than English: a notch smaller on the big display lines ---------- */
html[lang="es"] .display { font-size: clamp(36px, 5.3vw, 80px); }
html[lang="es"] .display-2 { font-size: clamp(34px, 4.8vw, 72px); }
html[lang="es"] .ph h1 { font-size: clamp(34px, 4.4vw, 64px); }
html[lang="es"] .xcta-copy .display-2 { font-size: clamp(32px, 3.9vw, 54px); max-width: 18ch; }
@media (max-width: 640px) { html[lang="es"] .ph h1 { font-size: clamp(30px, 8.2vw, 40px); } }

/* the footer carries three link columns now: a smaller closing line keeps it under one screen so it stays fixed and uncovered */
.ftr .ftr-h { font-size: clamp(30px, 3.5vw, 50px); }
.ftr-copy { padding-top: 84px; }
.ftr-logo { width: 170px; }
.ftr-cols .plus-list a { font-size: 12.5px; letter-spacing: .03em; line-height: 1.6; }

.no-js .theme-btn { display: none; }

/* ---------- page hero: reveal with CSS only, so the first screen never waits for the scripts (slow-4G LCP) ---------- */
@keyframes phFlip { from { opacity: 0; transform: translateY(24px) rotateX(-80deg) rotateY(3deg); } to { opacity: 1; transform: none; } }
@keyframes phRise { from { opacity: 0; transform: translate(-5px, 22px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: no-preference) {
  .js .ph [data-flip] .ln-i { opacity: 1; transform: none; transition: none; animation: phFlip 640ms var(--ease) calc(120ms + var(--i, 0) * 90ms) both; }
  .js .ph [data-rise], .js .ph [data-words] { opacity: 1; transform: none; transition: none; animation: phRise 560ms var(--ease) 260ms both; }
  .js .ph [data-words] .w { opacity: 1; transform: none; transition: none; }
  .js .reveal.now { opacity: 1; transform: none; transition: none; animation: phLift 520ms var(--ease) calc(var(--i, 0) * 70ms) both; }
  .js .ph .ph-cta[data-rise] { animation-delay: 380ms; }
  .js .ph .ph-meta[data-rise], .js .ph .stub-links { animation-delay: 460ms; }
}

/* the lead paragraph is usually the largest text on the screen: it only lifts (transform), never fades, so it is painted at once */
@keyframes phLift { from { transform: translateY(16px); } to { transform: none; } }
@media (prefers-reduced-motion: no-preference) {
  .js .ph .ph-lead[data-rise], .js .ph .ph-lead[data-words] { opacity: 1; animation: phLift 520ms var(--ease) 80ms both; }
}