/* Nebula, light edition.
   Paper and ink, the Nebula blue as the only accent, and the hexagon from the Nebula mark as the pixel of every illustration. */

@font-face { font-family: 'Familjen Grotesk'; font-style: normal; font-display: swap; font-weight: 400 700; src: url(fonts/familjen-grotesk-latin-wght-normal.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Familjen Grotesk'; font-style: normal; font-display: swap; font-weight: 400 700; src: url(fonts/familjen-grotesk-latin-ext-wght-normal.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Montserrat'; font-style: normal; font-display: swap; font-weight: 400; src: url(fonts/montserrat-latin-400-normal.woff2) format('woff2'); }
@font-face { font-family: 'Montserrat'; font-style: normal; font-display: swap; font-weight: 600; src: url(fonts/montserrat-latin-600-normal.woff2) format('woff2'); }
@font-face { font-family: 'JetBrains Mono'; font-style: normal; font-display: swap; font-weight: 400; src: url(fonts/jetbrains-mono-latin-400-normal.woff2) format('woff2'); }
@font-face { font-family: 'JetBrains Mono'; font-style: normal; font-display: swap; font-weight: 500; src: url(fonts/jetbrains-mono-latin-500-normal.woff2) format('woff2'); }

:root {
  --paper: #F3F4F7;     /* page */
  --paper-2: #E9ECF1;   /* bands and tiles */
  --sheet: #FAFBFC;     /* raised cards */
  --rule: #DDE1E8;      /* hairlines */
  --ink: #0B1322;       /* text, taken from the Nebula logo */
  --ink-2: #5C6472;     /* body copy */
  --ink-3: #8B93A1;     /* meta */
  --signal: #0991DB;    /* the blue of the Nebula mark */
  --ok: #1F9D62;

  --display: 'Familjen Grotesk', 'Helvetica Neue', Arial, sans-serif;
  --text: 'Montserrat', 'Helvetica Neue', Arial, sans-serif;
  --mono: 'Montserrat', 'Helvetica Neue', Arial, sans-serif;   /* labels and figures: Montserrat, like the body text */
  --code: 'JetBrains Mono', ui-monospace, Menlo, monospace;     /* only for real code inside the mockups */
  --ease: cubic-bezier(.2, .7, .1, 1);

  --card: #FFFFFF;                       /* surfaces that sit on a sheet */
  --fill: rgba(11, 19, 34, 0.05);        /* quiet fills */
  --fill-2: rgba(11, 19, 34, 0.08);
  --dots: rgba(11, 19, 34, 0.12);        /* canvas dot grids */
  --hair: #CAD0D9;                       /* dashed outlines */
  --mute: #D5DAE2;                       /* inactive marks */
  --glass-l: rgba(255, 255, 255, 0.6);
  --nav-bg: rgba(243, 244, 247, 0.82);
  --widget-bg: rgba(255, 255, 255, 0.58);
  --widget-line: rgba(255, 255, 255, 0.75);
  --win-hi: rgba(255, 255, 255, 0.85);
  --veil: rgba(250, 251, 252, 0.86);
  --sheen: rgba(255, 255, 255, 0.9);
  --accent: #0991DB; --accent-bg: rgba(9, 145, 219, 0.12); --accent-ink: #0A6FA8;   /* Nebula blue: the brand accent for anything in progress */
  --amber: var(--accent); --amber-bg: var(--accent-bg); --amber-ink: var(--accent-ink);
  --warn: #E09B1A;
  --ok-bg: rgba(31, 157, 98, 0.12); --ok-ink: #17784A;
  --red: #D94F3D;
  --ink-hover: #1B2740;
  --ink-inv-2: #A9AEB8;                  /* quiet text on an ink surface */
  color-scheme: light;
}

/* Dark mode: the same system at night. Set on <html> before paint, from the saved choice or the system setting. */
:root[data-theme="dark"] {
  --paper: #0A0E16; --paper-2: #0E141F; --sheet: #121A27; --rule: #212A39;
  --ink: #EDF0F5; --ink-2: #A3ABBA; --ink-3: #6E7788;
  --signal: #2EA7EE; --ok: #34C27F;
  --card: #172131; --fill: rgba(255, 255, 255, 0.05); --fill-2: rgba(255, 255, 255, 0.09); --dots: rgba(255, 255, 255, 0.07);
  --hair: #2D3748; --mute: #283243; --glass-l: rgba(255, 255, 255, 0.04); --nav-bg: rgba(10, 14, 22, 0.8);
  --widget-bg: rgba(13, 19, 30, 0.62); --widget-line: rgba(255, 255, 255, 0.12); --win-hi: rgba(255, 255, 255, 0.05);
  --veil: rgba(18, 26, 39, 0.84); --sheen: rgba(255, 255, 255, 0.12);
  --accent: #2EA7EE; --accent-bg: rgba(46, 167, 238, 0.16); --accent-ink: #6CC3F5; --ok-bg: rgba(52, 194, 127, 0.15); --ok-ink: #5BD69C;
  --ink-hover: #FFFFFF; --ink-inv-2: #4B5566;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--paper); color: var(--ink); transition: background-color .35s ease, color .35s ease; font-family: var(--display); font-size: 16px; line-height: 1.5; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; height: auto; }
h1, h2, h3, p, dl, dd, ol, ul, figure { margin: 0; }
ol, ul { padding: 0; list-style: none; }
:focus-visible { outline: 2px solid var(--signal); outline-offset: 3px; border-radius: 6px; }
.skip { position: absolute; left: -9999px; top: 10px; z-index: 100; padding: 8px 14px; border-radius: 60px; background: var(--ink); color: var(--paper); }
.skip:focus { left: 16px; }

.wrap { max-width: 1104px; margin: 0 auto; padding: 0 32px; }
.sec { padding: 120px 0; }
.sec h2 { font-size: clamp(32px, 3.4vw, 46px); font-weight: 600; letter-spacing: -0.03em; line-height: 1.04; max-width: 20ch; text-wrap: balance; }
.lede { margin-top: 14px; max-width: 58ch; font-family: var(--text); font-size: 17px; line-height: 1.6; color: var(--ink-2); }
.tag { display: inline-block; margin-bottom: 18px; padding: 4px 12px; background: var(--fill); font-size: 14px; color: var(--ink-2); }
.band { background: var(--paper-2); border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }

/* Pills */
.pill { display: inline-flex; align-items: center; gap: 6px; padding: 9px 14px 9px 20px; border-radius: 60px; border: 1px solid transparent; font: 500 15px/1.2 var(--display); white-space: nowrap; transition: background .2s ease, border-color .2s ease, color .2s ease, transform .2s var(--ease); }
.pill svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; transition: transform .25s var(--ease); }
.pill:hover svg { transform: translateX(2px); }
.pill-dark { background: var(--ink); color: var(--paper); }
.pill-dark:hover { background: var(--ink-hover); }
.pill-ghost { background: var(--glass-l); border-color: var(--rule); color: var(--ink); }
.pill-ghost:hover { background: var(--card); border-color: var(--hair); }
.pill-light { background: #fff; color: #0B1322; }
.pill-light:hover { background: #EEF1F6; }
.pill-outline { border-color: rgba(255, 255, 255, 0.45); color: #fff; justify-content: center; }
.pill-outline:hover { background: rgba(255, 255, 255, 0.12); }

/* Nav */
.nav { position: fixed; inset: 0 0 auto; z-index: 50; display: flex; align-items: center; gap: 28px; height: 68px; padding: 0 28px; background: var(--nav-bg); -webkit-backdrop-filter: blur(14px) saturate(1.4); backdrop-filter: blur(14px) saturate(1.4); border-bottom: 1px solid transparent; transition: border-color .3s ease; }
.nav.scrolled { border-bottom-color: var(--rule); }
.nav-logo img { height: 26px; width: auto; }
.nav-links { display: flex; gap: 26px; margin-left: auto; font-size: 15px; }
.nav-links a { color: var(--ink); opacity: .78; transition: opacity .2s; }
.nav-links a:hover { opacity: 1; }
.nav-toggle { display: none; width: 40px; height: 40px; border: 0; border-radius: 50%; background: var(--fill); cursor: pointer; flex-direction: column; align-items: center; justify-content: center; gap: 5px; }
.nav-toggle span { width: 16px; height: 1.6px; background: var(--ink); transition: transform .3s var(--ease); }
.nav.open .nav-toggle span:first-child { transform: translateY(3.3px) rotate(45deg); }
.nav.open .nav-toggle span:last-child { transform: translateY(-3.3px) rotate(-45deg); }

/* Hero */
.hero { padding: 156px 0 24px; }
.hero .wrap { max-width: 1376px; }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr); gap: 56px; align-items: start; }
.hero h1 { font-size: clamp(42px, 5.3vw, 78px); font-weight: 500; letter-spacing: -0.038em; line-height: 0.98; text-wrap: balance; }
.ink-in { animation: ink 1.4s var(--ease) both; }
@keyframes ink { from { color: var(--mute); transform: translateY(8px); } to { color: var(--ink); transform: none; } }
.hero-side { padding-top: 8px; }
.hero-side p { font-family: var(--text); font-size: 17px; line-height: 1.6; color: var(--ink-2); max-width: 44ch; }
.hero-cta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }

.rail-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; }
.rail-hint { display: inline-flex; align-items: center; gap: 10px; flex: none; padding-bottom: 4px; font: 400 12px var(--mono); color: var(--ink-3); }
.rail-hint svg { width: 28px; height: 12px; fill: none; stroke: currentColor; stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; }
.rail { margin-top: 48px; overflow: hidden; padding: 6px 0 10px; cursor: grab; touch-action: pan-y; -webkit-user-select: none; user-select: none; -webkit-mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent); mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent); }
.rail.dragging { cursor: grabbing; }
.rail.dragging .mcard { transition: none; }
.rail-track { display: flex; gap: 14px; width: max-content; will-change: transform; }
.rail + .wrap .work { margin-top: 56px; }

.mcard { position: relative; flex: none; width: 340px; display: flex; flex-direction: column; border-radius: 12px; overflow: hidden; background: var(--tint, var(--paper-2)); box-shadow: inset 0 0 0 1px var(--fill); transition: transform .4s var(--ease); }
.mcard:hover { transform: translateY(-4px); }
.mcard-art { position: relative; height: 330px; }
.mcard-art canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.widget { position: absolute; left: 50%; top: 52%; transform: translate(-50%, -50%); width: 76%; padding: 14px 16px 15px; border-radius: 11px;
  background: var(--widget-bg); -webkit-backdrop-filter: blur(16px) saturate(1.5); backdrop-filter: blur(16px) saturate(1.5);
  border: 1px solid var(--widget-line); box-shadow: 0 1px 0 var(--win-hi) inset, 0 18px 40px -16px rgba(11, 19, 34, 0.35); }
.w-label { display: block; font: 400 11px/1.3 var(--mono); color: var(--ink-2); }
.w-value { display: block; margin-top: 6px; font-size: 38px; font-weight: 500; letter-spacing: -0.03em; line-height: 1; font-variant-numeric: tabular-nums; }
.w-sub { display: block; margin-top: 6px; font-family: var(--text); font-size: 12px; color: var(--ink-2); }
.w-rows { margin-top: 8px; display: grid; gap: 7px; }
.w-rows li { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 9px; font: 400 12px/1.2 var(--mono); }
.w-rows b { font-weight: 500; }
.w-rows i { width: 7px; height: 7px; border-radius: 50%; background: var(--ok); }
.w-rows li.run i { background: var(--signal); animation: pulse 1.2s ease-in-out infinite; }
.w-rows li.run b { color: var(--ink-2); font-weight: 400; }
@keyframes pulse { 50% { opacity: .3; } }
.mcard-cap { padding: 16px 20px 20px; }
.mcard-cap strong { display: block; font-size: 17px; font-weight: 600; letter-spacing: -0.01em; }
.mcard-cap span { display: block; margin-top: 2px; font-family: var(--text); font-size: 13px; color: var(--ink-2); }

/* Steps */
.steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 36px; margin-top: 56px; counter-reset: s; }
.num { display: inline-block; font: 400 13px/1 var(--mono); color: var(--ink-3); }
.steps h3 { margin-top: 14px; font-size: 22px; font-weight: 600; letter-spacing: -0.02em; }
.steps p { margin-top: 8px; font-family: var(--text); font-size: 14.5px; line-height: 1.6; color: var(--ink-2); }

/* Service tiles */
.tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 48px; }
.tile { display: flex; flex-direction: column; gap: 10px; min-height: 290px; padding: 22px 22px 18px; border-radius: 8px; background: var(--paper-2); border: 1px solid var(--rule); }
.tile h3 { font-size: 20px; font-weight: 600; letter-spacing: -0.02em; line-height: 1.15; }
.tile p { font-family: var(--text); font-size: 14px; line-height: 1.6; color: var(--ink-2); }
.proof { display: flex; gap: 9px; align-items: baseline; margin-top: 4px; font-family: var(--text); font-size: 13px; line-height: 1.5; color: var(--ink); }
.proof::before { content: ""; flex: none; width: 9px; height: 10px; background: var(--ink); clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); transform: translateY(1px); }
.tile .pill { margin-top: auto; align-self: flex-start; }
.tile-cta { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.tile-cta p { color: var(--ink-inv-2); }
.tile-cta .pill-dark { background: var(--paper); color: var(--ink); }

/* Plans */
.plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 48px; }
.plan { display: flex; flex-direction: column; padding: 24px; border-radius: 8px; background: var(--sheet); border: 1px solid var(--rule); scroll-margin-top: 90px; }
.plan h3 { font-size: 15px; font-weight: 500; color: var(--ink-2); }
.plan-price { margin-top: 8px; font-size: 36px; font-weight: 600; letter-spacing: -0.03em; line-height: 1.05; }
.plan-price small { display: block; margin-top: 4px; font: 400 13px var(--text); letter-spacing: 0; color: var(--ink-3); }
.plan > p:not(.plan-price) { margin-top: 14px; font-family: var(--text); font-size: 14px; line-height: 1.6; color: var(--ink-2); }
.plan dl { margin: 18px 0 22px; border-top: 1px solid var(--rule); }
.plan dl div { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--rule); font-size: 14px; }
.plan dt { color: var(--ink-3); }
.plan dd { text-align: right; }
.plan .pill { margin-top: auto; align-self: flex-start; }

/* Why */
.whys { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 48px; }
.why { padding: 18px 22px 24px; border-radius: 8px; background: var(--sheet); border: 1px solid var(--rule); }
.why .num { padding: 5px 7px; background: var(--fill); }
.why-art { height: 118px; margin: 18px 0 18px; }
.why h3 { font-size: 19px; font-weight: 600; letter-spacing: -0.015em; }
.why p { margin-top: 8px; font-family: var(--text); font-size: 14px; line-height: 1.6; color: var(--ink-2); }
.art-bars { display: flex; align-items: flex-end; gap: 6px; }
.art-bars i { flex: 1; height: var(--h); border-radius: 3px 3px 0 0; background: linear-gradient(180deg, var(--signal), rgba(9, 145, 219, 0.25)); transform-origin: bottom; animation: breathe 4.8s ease-in-out infinite alternate; animation-delay: calc(var(--k) * -0.4s); }
@keyframes breathe { from { transform: scaleY(0.8); } to { transform: scaleY(1); } }
.art-weeks { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; align-content: center; }
.art-weeks i { display: grid; place-items: center; height: 40px; border-radius: 6px; font: 400 11px var(--mono); font-style: normal; color: var(--ink-3); background: var(--fill); border: 1px dashed var(--hair); transition: background .6s ease, color .6s ease, border-color .6s ease, transform .6s var(--ease); }
.art-weeks i.now { transform: translateY(-3px); box-shadow: 0 8px 18px -10px rgba(11, 19, 34, 0.6); }
.art-weeks i.on { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.art-own { display: flex; flex-direction: column; justify-content: center; gap: 8px; font: 400 12px var(--code); color: var(--ink-2); }
.art-own span { position: relative; overflow: hidden; display: flex; align-items: center; gap: 9px; padding: 8px 10px; border-radius: 6px; background: var(--fill); }
.art-own span::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 30%, var(--sheen) 50%, transparent 70%); transform: translateX(-100%); animation: sheen 7.5s ease-in-out infinite; }
.art-own span:nth-child(2)::after { animation-delay: .5s; } .art-own span:nth-child(3)::after { animation-delay: 1s; }
@keyframes sheen { 0%, 55% { transform: translateX(-100%); } 85%, 100% { transform: translateX(100%); } }
.art-own i { width: 7px; height: 7px; border-radius: 50%; background: var(--ok); animation: glow 3s ease-in-out infinite; }
.art-own span:nth-child(2) i { animation-delay: 1s; } .art-own span:nth-child(3) i { animation-delay: 2s; }
@keyframes glow { 0%, 100% { box-shadow: 0 0 0 0 rgba(31, 157, 98, 0.45); } 50% { box-shadow: 0 0 0 5px rgba(31, 157, 98, 0); } }
.art-own code { font: inherit; }
.art-own b { color: var(--ink); font-weight: 500; }
.eic { display: flex; align-items: center; gap: 22px; margin-top: 40px; padding-top: 28px; border-top: 1px solid var(--rule); }
.eic p { max-width: 74ch; font-family: var(--text); font-size: 14.5px; line-height: 1.6; color: var(--ink-2); }
.eic strong { color: var(--ink); font-weight: 600; }
.eic-badge { position: relative; flex: none; width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; background: #0F3EA8; color: #fff; font-size: 14px; }
.eu { position: absolute; inset: 0; }
.eu i { position: absolute; left: 50%; top: 50%; width: 5px; height: 5px; margin: -2.5px; border-radius: 50%; background: #FFD617; transform: rotate(var(--a)) translateY(-23px); }

/* Work list */
.work { margin-top: 44px; border-top: 1px solid var(--rule); }
.work-row { display: grid; grid-template-columns: minmax(0, 200px) minmax(0, 1fr) minmax(0, 190px) 28px; gap: 24px; align-items: center; padding: 20px 12px; margin: 0 -12px; border-bottom: 1px solid var(--rule); border-radius: 6px; transition: background .2s ease; }
.work-row:hover { background: var(--sheet); }
.work-name { font-size: 18px; font-weight: 600; letter-spacing: -0.015em; }
.work-what { font-family: var(--text); font-size: 14px; color: var(--ink-2); }
.work-fig strong { display: block; font-size: 24px; font-weight: 600; letter-spacing: -0.02em; line-height: 1.1; font-variant-numeric: tabular-nums; }
.work-fig small { display: block; font-family: var(--text); font-size: 12.5px; color: var(--ink-3); }
.work-go svg { width: 18px; height: 18px; fill: none; stroke: var(--ink); stroke-width: 1.6; stroke-linecap: round; transition: transform .25s var(--ease); }
.work-row:hover .work-go svg { transform: translate(2px, -2px); stroke: var(--signal); }

/* Team */
.facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; margin-top: 40px; }
.facts dt { font-size: 36px; font-weight: 600; letter-spacing: -0.03em; line-height: 1; }
.facts dd { margin-top: 6px; font-family: var(--text); font-size: 13.5px; color: var(--ink-2); }
.people { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px 14px; margin-top: 48px; }
.person img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: top; border-radius: 8px; filter: grayscale(1) contrast(1.04); background: var(--mute); transition: filter .6s ease; }
.person:hover img { filter: grayscale(0) contrast(1.02); }
.person figcaption { margin-top: 12px; }
.person strong { display: block; font-size: 16px; font-weight: 600; letter-spacing: -0.01em; }
.person span { display: block; margin-top: 1px; font-family: var(--text); font-size: 13px; color: var(--ink-2); }

/* Community tools: big product photos that stack as you scroll */
.stack { margin-top: 44px; }
.stack-card { position: sticky; top: calc(92px + var(--i) * 18px); display: block; height: min(600px, 74vh); margin-bottom: 48px; border-radius: 16px; overflow: hidden; background: #0B1322; box-shadow: 0 -1px 0 rgba(255, 255, 255, 0.6) inset, 0 30px 60px -36px rgba(11, 19, 34, 0.55); transform-origin: 50% 0; transform: scale(var(--s, 1)); transition: transform .12s linear; will-change: transform; }
.stack-card:last-child { margin-bottom: 0; }
.stack-img { position: absolute; inset: 0; overflow: hidden; }
.stack-img img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.06) translateY(var(--py, 0px)); filter: brightness(var(--b, 1)); transition: filter .3s ease; animation: drift-img 18s ease-in-out infinite alternate; }
@keyframes drift-img { from { transform: scale(1.06) translateY(var(--py, 0px)); } to { transform: scale(1.14) translate(-1.5%, calc(var(--py, 0px) - 1%)); } }
.stack-copy { position: absolute; left: 24px; bottom: 24px; width: min(420px, calc(100% - 48px)); padding: 22px 24px 24px; border-radius: 14px; color: #fff;
  background: rgba(11, 19, 34, 0.38); border: 1px solid rgba(255, 255, 255, 0.22); -webkit-backdrop-filter: blur(18px) saturate(1.4); backdrop-filter: blur(18px) saturate(1.4); }
.stack-k { display: block; font: 400 12px var(--mono); color: rgba(255, 255, 255, 0.72); }
.stack-copy h3 { margin-top: 8px; font-size: clamp(30px, 3.2vw, 44px); font-weight: 600; letter-spacing: -0.03em; line-height: 1; }
.stack-copy p { margin-top: 12px; font-family: var(--text); font-size: 14.5px; line-height: 1.6; color: rgba(255, 255, 255, 0.82); }
.stack-copy .pill { margin-top: 20px; }
.stack-card:hover .stack-copy .pill svg { transform: translateX(2px); }

/* Finale: Nebula's night sky behind glass */
.finale { position: relative; display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr); gap: 18px; align-items: stretch; min-height: 440px; padding: 40px; border-radius: 16px; overflow: hidden; isolation: isolate;
  background: radial-gradient(60% 80% at 20% 30%, #1B4FB8, transparent 70%), radial-gradient(50% 70% at 85% 70%, #4B2FA8, transparent 70%), radial-gradient(40% 60% at 60% 10%, #0991DB, transparent 70%), #0B1322; }
.finale-sky { position: absolute; inset: -10%; z-index: -1; filter: blur(30px) saturate(1.2); }
.finale-sky img { position: absolute; width: 46%; opacity: .55; animation: drift 26s ease-in-out infinite alternate; }
.finale-sky img:first-child { left: 8%; top: 4%; }
.finale-sky img:last-child { right: 4%; bottom: -6%; width: 38%; opacity: .35; animation-duration: 34s; animation-direction: alternate-reverse; }
@keyframes drift { from { transform: translate(0, 0) rotate(0deg) scale(1); } to { transform: translate(6%, 8%) rotate(18deg) scale(1.08); } }
.glass { padding: 26px; border-radius: 14px; color: #fff; background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.24); -webkit-backdrop-filter: blur(18px) saturate(1.3); backdrop-filter: blur(18px) saturate(1.3); }
.g-main .g-lead { font-size: clamp(20px, 2vw, 26px); line-height: 1.25; letter-spacing: -0.015em; color: rgba(255, 255, 255, 0.82); max-width: 28ch; }
.g-main strong { color: #fff; font-weight: 600; }
.g-main .g-lead + .pill { margin-top: 28px; }
.g-side { display: grid; gap: 10px; }
.g-side p { font-size: 17px; color: rgba(255, 255, 255, 0.82); margin-bottom: 8px; }

/* Footer */
.foot { padding: 40px 0 36px; }
.foot-top { display: grid; grid-template-columns: minmax(0, 0.7fr) minmax(0, 1.6fr); gap: 56px; padding-top: 48px; border-top: 1px solid var(--rule); }
.foot-brand img { width: min(100%, 360px); height: auto; }
.foot-brand p { margin-top: 22px; max-width: 40ch; font-family: var(--text); font-size: 14px; line-height: 1.6; color: var(--ink-2); }
.foot-cols { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 24px; font-size: 14px; }
.foot-cols h3 { margin-bottom: 14px; font-size: 15px; font-weight: 600; }
.foot-cols a { display: block; margin-bottom: 9px; color: var(--ink-2); }
.foot-cols a:hover { color: var(--ink); }
.foot-bottom { display: flex; justify-content: space-between; gap: 16px; margin-top: 56px; font-family: var(--text); font-size: 13px; color: var(--ink-3); }

/* Shared bits for the inner pages */
.crosslink strong span { color: var(--ink-inv-2); }
.pcard-body .pcard-k { order: 1; margin-top: -6px; font: 500 14px var(--text); color: var(--ink-2); }
.pcard-body > :not(h2):not(h3):not(.pcard-k) { order: 2; }
.stack-copy { display: flex; flex-direction: column; }
.stack-copy .stack-k { order: 1; margin-top: 6px; font: 500 14px var(--text); color: rgba(255, 255, 255, 0.78); }
.stack-copy p, .stack-copy .pill { order: 2; }
.stack-copy .pill { align-self: flex-start; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.wrap-wide { max-width: 1376px; }
.nav-links a[aria-current="page"] { opacity: 1; display: inline-flex; align-items: center; gap: 7px; }
.nav-links a[aria-current="page"]::before { content: ""; width: 8px; height: 9px; background: var(--ink); clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); }
.sec-link { margin-top: 40px; }
.crosslink { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto auto; column-gap: 24px; align-items: center; margin-top: 28px; padding: 22px 26px; border-radius: 10px; background: var(--ink); color: var(--paper); transition: background .25s ease; }
.crosslink:hover { background: var(--ink-hover); }
.crosslink-k { font: 400 12px var(--mono); color: var(--ink-inv-2); }
.crosslink strong { grid-column: 1; margin-top: 0; font-size: clamp(18px, 1.7vw, 22px); font-weight: 500; letter-spacing: -0.015em; line-height: 1.25; }
.crosslink-go { grid-column: 2; grid-row: 1 / span 2; }
.crosslink-go svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; transition: transform .25s var(--ease); }
.crosslink:hover .crosslink-go svg { transform: translate(3px, -3px); }

/* Landing: the typed line */
.typed-wrap { margin-top: 72px; }
.typed { min-height: 1.25em; padding-top: 22px; border-top: 1px solid var(--rule); font-size: clamp(24px, 2.6vw, 38px); font-weight: 500; letter-spacing: -0.025em; line-height: 1.2; }
.typed-lead { color: var(--ink-3); }
.typed-caret { display: inline-block; width: 3px; height: .92em; margin-left: 3px; vertical-align: -0.1em; border-radius: 2px; background: var(--ink); animation: caret 1.05s steps(1) infinite; }
@keyframes caret { 50% { opacity: 0; } }

/* Inner page hero */
.phero h1 { font-size: clamp(40px, 4.9vw, 72px); }
.phero .wrap-wide { margin-top: 64px; }

/* Mockup windows */
.win { position: relative; border-radius: 12px; background: var(--sheet); border: 1px solid var(--rule); box-shadow: 0 1px 0 var(--win-hi) inset, 0 40px 80px -50px rgba(11, 19, 34, 0.45); overflow: hidden; }
.win-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 16px; border-bottom: 1px solid var(--rule); font: 400 11.5px var(--mono); color: var(--ink-3); }
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px; border-radius: 30px; background: var(--fill); font: 400 11px var(--mono); color: var(--ink-2); white-space: nowrap; transition: background .4s ease, color .4s ease; }
.chip em { font-style: normal; display: inline-flex; align-items: center; gap: 6px; }
.chip-swap .b { display: none; }
.complete .chip-swap { background: var(--ok-bg); color: var(--ok-ink); }
.complete .chip-swap .a { display: none; }
.complete .chip-swap .b { display: inline-flex; }
.dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--ink-3); }
.dot.ok { background: var(--ok); }
.dot.run { background: var(--accent); animation: pulse 1.4s ease-in-out infinite; }
.dot.merged { background: #6E40C9; }
.hexdot { display: inline-block; width: 9px; height: 10px; background: var(--ink); clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); }

/* Feature rows */
.feat { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 72px; align-items: center; }
.feat.flip .feat-copy { order: 2; }
.feat-vis { min-width: 0; }
.nlist { margin-top: 32px; border-top: 1px solid var(--rule); }
.nlist li { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 8px; padding: 16px 0; border-bottom: 1px solid var(--rule); }
.nlist .num { padding-top: 4px; }
.nlist h3 { font-size: 17px; font-weight: 600; letter-spacing: -0.01em; }
.nlist p { margin-top: 4px; font-family: var(--text); font-size: 14px; line-height: 1.6; color: var(--ink-2); }
.nlist-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 32px; margin-top: 40px; border-top: 0; }
.nlist-row li { border-top: 1px solid var(--rule); border-bottom: 0; }

/* How we build: the pipeline in the hero */
.pipe { position: relative; }
.pipe-track { position: relative; height: 3px; margin: 0 4px 18px; border-radius: 3px; background: var(--rule); }
.pipe-fill { position: absolute; left: 0; top: 0; bottom: 0; width: min(100%, calc((var(--at, 0) + 0.5) / var(--n, 5) * 100%)); border-radius: 3px; background: var(--ink); transition: width 1.4s var(--ease); }
.pipe-fill::after { content: ""; position: absolute; right: -7px; top: 50%; width: 14px; height: 16px; margin-top: -8px; background: var(--ink); clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); }
.pipe-row { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; padding-top: 8px; }
.stage { display: flex; flex-direction: column; min-height: 300px; border-radius: 12px; background: var(--sheet); border: 1px solid var(--rule); transition: transform .7s var(--ease), box-shadow .7s ease, border-color .7s ease; }
.stage.run { transform: translateY(-8px); border-color: var(--ink); box-shadow: 0 34px 50px -32px rgba(11, 19, 34, 0.5); }
.stage-bar { display: flex; align-items: center; gap: 8px; padding: 12px 14px; border-bottom: 1px solid var(--rule); }
.stage-bar b { font-size: 17px; font-weight: 600; letter-spacing: -0.015em; }
.stage-bar .chip { margin-left: auto; }
.stage-body { flex: 1; padding: 14px; font-family: var(--text); font-size: 12.5px; opacity: .5; transition: opacity .7s ease; }
.stage.run .stage-body, .stage.done .stage-body { opacity: 1; }
.stage-foot { padding: 11px 14px; border-top: 1px solid var(--rule); }
.state { display: inline-flex; align-items: center; gap: 7px; font: 400 11.5px var(--mono); color: var(--ink-3); }
.state i { width: 7px; height: 7px; border-radius: 50%; background: var(--mute); }
.state em { display: none; font-style: normal; }
.state .q { display: inline; }
.run .state .q, .done .state .q { display: none; }
.run .state .r { display: inline; color: var(--ink); }
.run .state i { background: var(--accent); animation: pulse 1.2s ease-in-out infinite; }
.done .state .f { display: inline; color: var(--ink); }
.done .state i { background: var(--ok); }
.kv li { display: flex; justify-content: space-between; gap: 8px; padding: 8px 0; border-bottom: 1px dashed var(--rule); }
.kv span { color: var(--ink-3); }
.kv b { font-weight: 600; }
.pals { display: grid; gap: 8px; }
.pal { display: flex; align-items: center; gap: 4px; }
.pal i { width: 18px; height: 18px; border-radius: 5px; }
.pal em { margin-left: 6px; font: 400 11.5px var(--mono); font-style: normal; color: var(--ink-2); }
.aa-row { display: flex; align-items: center; gap: 12px; margin-top: 14px; padding-top: 12px; border-top: 1px dashed var(--rule); }
.aa { font-family: var(--display); font-size: 32px; font-weight: 500; letter-spacing: -0.03em; line-height: 1; }
.comp { display: flex; flex-direction: column; font-size: 12.5px; font-weight: 600; }
.comp small { font-weight: 400; color: var(--ink-3); }
.wk li { position: relative; padding: 8px 0 8px 20px; border-bottom: 1px dashed var(--rule); }
.wk li::before { content: ""; position: absolute; left: 0; top: 50%; width: 10px; height: 11px; margin-top: -5.5px; background: var(--mute); clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); }
.wk li.d::before { background: var(--ink); }
.wk li.b::before { background: var(--accent); animation: pulse 1.2s ease-in-out infinite; }
.run-fig strong { display: block; font-size: 36px; font-weight: 600; letter-spacing: -0.03em; line-height: 1; }
.run-fig span { color: var(--ink-3); }
.spark { display: block; width: 100%; height: 48px; margin-top: 14px; overflow: visible; }
.spark path { fill: none; stroke: var(--ink); stroke-width: 1.7; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; stroke-dasharray: 100; stroke-dashoffset: 100; animation: draw 7s var(--ease) infinite; }
.spark-down path { stroke: var(--ok); }
@keyframes draw { 0% { stroke-dashoffset: 100; opacity: 1; } 45%, 86% { stroke-dashoffset: 0; opacity: 1; } 100% { stroke-dashoffset: 0; opacity: 0; } }

/* How we build: scope document */
.doc-body { padding: 22px 22px 24px; }
.doc-h { font-size: 20px; font-weight: 600; letter-spacing: -0.02em; }
.doc-lines { margin-top: 14px; }
.doc-lines li { position: relative; display: flex; justify-content: space-between; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--rule); font-family: var(--text); font-size: 13.5px; }
.doc-lines li::after { content: ""; position: absolute; left: 0; top: 50%; width: 58%; height: 8px; margin-top: -4px; border-radius: 4px; background: var(--fill); transition: opacity .3s ease; }
.doc-lines li:nth-child(2n)::after { width: 44%; }
.doc-lines li span, .doc-lines li b { clip-path: inset(0 100% 0 0); transition: clip-path .85s steps(26, end); }
.doc-lines li b { font: 400 12px var(--mono); color: var(--ink-3); white-space: nowrap; transition-delay: .5s; transition-duration: .4s; }
.doc-lines li.run::after, .doc-lines li.done::after { opacity: 0; }
.doc-lines li.run span, .doc-lines li.done span, .doc-lines li.run b, .doc-lines li.done b { clip-path: inset(0 0 0 0); }
.doc-total { display: flex; justify-content: space-between; gap: 12px; margin-top: 16px; padding: 14px 16px; border-radius: 8px; background: var(--ink); color: var(--paper); font-size: 15px; opacity: .08; transform: translateY(6px); transition: opacity .6s ease, transform .6s var(--ease); }
.doc-total b { font-weight: 600; }
.doc-total.run, .doc-total.done { opacity: 1; transform: none; }

/* How we build: one design system, three products */
.themer { --t1: #081A44; --t2: #173FA0; --t3: #3F78F0; --t4: #E3EBFD; --r: 8px; }
.themer[data-at="1"] { --t1: #06365C; --t2: #0B66AE; --t3: #2E9BE6; --t4: #E6F4FD; --r: 14px; }
.themer[data-at="2"] { --t1: #5A2113; --t2: #A9452A; --t3: #E0795A; --t4: #FCEDE6; --r: 20px; }
.themer-body { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 18px; padding: 20px; align-items: stretch; }
.themes { display: grid; gap: 8px; align-content: center; }
.theme { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 12px; align-items: center; padding: 12px; border-radius: 8px; border: 1px solid var(--rule); background: var(--card); opacity: .5; transition: opacity .5s ease, border-color .5s ease, box-shadow .5s ease; }
.theme .sw { grid-row: span 2; display: grid; grid-template-columns: repeat(2, 12px); gap: 3px; }
.theme .sw i { width: 12px; height: 12px; border-radius: 3px; }
.theme b { font-size: 15px; font-weight: 600; }
.theme em { font: 400 11px var(--mono); font-style: normal; color: var(--ink-3); }
.theme.run { opacity: 1; border-color: var(--ink); box-shadow: 0 14px 26px -18px rgba(11, 19, 34, 0.55); }
.tstage { position: relative; min-height: 310px; display: grid; place-items: center; border-radius: 10px; background: var(--t4); transition: background-color .9s ease; overflow: hidden; }
.tstage::before { content: ""; position: absolute; width: 70%; aspect-ratio: 1; border-radius: 50%; background: var(--t3); opacity: .22; filter: blur(40px); transform: translate(-30%, -35%); transition: background-color .9s ease; }
.tcard { --ink: #0B1322; --ink-2: #5C6472; --ink-3: #8B93A1; color: var(--ink); position: absolute; width: min(240px, 80%); padding: 18px; border-radius: var(--r); background: #fff; box-shadow: 0 26px 44px -26px var(--t1); opacity: 0; transform: translateY(14px) scale(.97); transition: opacity .6s ease, transform .7s var(--ease), border-radius .6s ease; }
.themer[data-at="0"] .tcard[data-k="0"], .themer[data-at="1"] .tcard[data-k="1"], .themer[data-at="2"] .tcard[data-k="2"] { opacity: 1; transform: none; transition-delay: .15s; }
.tc-k { font: 400 11px var(--mono); color: var(--t2); transition: color .8s ease; }
.tc-t { margin-top: 4px; font-size: 18px; font-weight: 600; letter-spacing: -0.015em; }
.tc-big { font-size: 32px; letter-spacing: -0.03em; }
.tc-rows { margin-top: 8px; }
.tc-rows li { display: flex; justify-content: space-between; gap: 10px; padding: 7px 0; border-bottom: 1px solid #E7EAEF; font-family: var(--text); font-size: 12.5px; }
.tc-rows span { color: var(--ink-2); }
.tc-btn { display: block; margin-top: 14px; padding: 11px; text-align: center; border-radius: calc(var(--r) * 0.7); background: var(--t2); color: #fff; font-size: 14px; font-weight: 600; transition: background-color .8s ease, border-radius .6s ease; }

/* How we build: commit log and weeks */
.weeks6 { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; padding: 14px 16px 6px; }
.weeks6 i { display: grid; place-items: center; height: 30px; border-radius: 6px; font: 400 11px var(--mono); font-style: normal; color: var(--ink-3); border: 1px dashed var(--hair); }
.weeks6 i.d { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.weeks6 i.b { border: 1px solid var(--accent); color: var(--amber-ink); background: var(--amber-bg); }
.log { position: relative; height: 312px; overflow: hidden; padding: 4px 16px 0; -webkit-mask-image: linear-gradient(180deg, #000 72%, transparent); mask-image: linear-gradient(180deg, #000 72%, transparent); }
.log li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 11px 6px; margin: 0 -6px; border-bottom: 1px solid var(--rule); border-radius: 6px; font-family: var(--text); font-size: 13px; }
.log li span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.log code { font: 400 11.5px var(--code); color: var(--ink-3); }
.log b { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--c); color: #fff; font: 600 10px var(--display); }
.log li.new { animation: logIn .8s var(--ease) both, logFlash 2.6s ease both; }
@keyframes logIn { from { opacity: 0; transform: translateY(-14px); } }
@keyframes logFlash { 0% { background: var(--fill-2); } 100% { background: transparent; } }

/* How we build: release checklist, also used by the pull request */
.checks { padding: 6px 18px; }
.checks li { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--rule); font-family: var(--text); font-size: 13.5px; }
.checks li:last-child { border-bottom: 0; }
.ring { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; border: 1.5px dashed var(--hair); transition: background .4s ease, border-color .4s ease; }
.ring svg { width: 12px; height: 12px; fill: none; stroke: #fff; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; opacity: 0; transform: scale(.5); transition: opacity .4s ease, transform .5s var(--ease); }
.checks li.run .ring { border: 2px solid var(--accent); border-right-color: transparent; animation: spin .9s linear infinite; }
.checks li.done .ring { border: 0; background: var(--ok); }
.checks li.done .ring svg { opacity: 1; transform: none; }
@keyframes spin { to { transform: rotate(360deg); } }
.checks b { font: 400 11.5px var(--mono); }
.checks b.r, .checks b.f { display: none; }
.checks b.q { color: var(--ink-3); }
.checks li.run b.q, .checks li.done b.q { display: none; }
.checks li.run b.r { display: inline; color: var(--amber-ink); }
.checks li.done b.f { display: inline; color: var(--ok-ink); }
.rel-bar { height: 4px; margin: 6px 18px 18px; border-radius: 4px; background: var(--rule); overflow: hidden; }
.rel-bar i { display: block; height: 100%; width: calc(min(var(--at, 0), var(--n, 1)) / var(--n, 1) * 100%); background: var(--ok); transition: width .9s var(--ease); }

/* How we build: the run dashboard */
.run-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; align-items: end; }
.run-head .lede { margin-top: 0; }
.dash { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 44px; }
.dt { position: relative; display: flex; flex-direction: column; min-height: 220px; padding: 18px 20px 20px; border-radius: 10px; background: var(--sheet); border: 1px solid var(--rule); overflow: hidden; }
.dt-k { font: 400 11.5px var(--mono); color: var(--ink-3); }
.dt strong { margin-top: 14px; font-size: 36px; font-weight: 600; letter-spacing: -0.03em; line-height: 1; }
.dt-s { margin-top: 6px; font-family: var(--text); font-size: 12.5px; color: var(--ink-2); }
.dt .spark { margin-top: auto; }
.cpu { position: relative; margin-top: auto; height: 26px; border-radius: 6px; background: repeating-linear-gradient(90deg, var(--fill-2) 0 2px, transparent 2px 7px); }
.cpu i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 6px; animation: cpu 8s var(--ease) infinite; }
.cpu span { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); font: 400 11px var(--mono); color: var(--ink-3); mix-blend-mode: multiply; }
@keyframes cpu { 0%, 12% { width: 100%; background: #B5462F; } 50%, 100% { width: 24%; background: var(--ink); } }
.stream { margin-top: auto; display: flex; align-items: flex-end; gap: 3px; height: 42px; width: max-content; animation: stream 14s linear infinite; }
.stream i { flex: none; width: 6px; height: var(--h); border-radius: 2px; background: var(--accent); opacity: .85; }
@keyframes stream { to { transform: translateX(-50%); } }
.p95 { margin-top: auto; display: grid; gap: 8px; }
.p95 span { display: grid; grid-template-columns: minmax(0, 1fr) 48px; align-items: center; gap: 10px; }
.p95 i { display: block; height: 10px; width: var(--w); border-radius: 5px; background: var(--ink); }
.p95 span:first-child i { background: var(--mute); }
.p95 span:last-child i { animation: shrink 6s var(--ease) infinite; }
@keyframes shrink { 0%, 10% { width: 100%; } 50%, 100% { width: var(--w); } }
.p95 em { font: 400 11px var(--mono); font-style: normal; color: var(--ink-3); }
.up { margin-top: auto; display: grid; grid-template-columns: repeat(30, minmax(0, 1fr)); gap: 3px; height: 30px; }
.up i { border-radius: 2px; background: var(--ok); opacity: .82; }
.up i:nth-child(6n + 1) { animation: pulse 3.2s ease-in-out infinite; }
.up i:nth-child(6n + 4) { animation: pulse 3.2s ease-in-out 1.6s infinite; }

/* How we build: ways to start */
.ways { margin-top: 40px; border-top: 1px solid var(--rule); }
.way { display: grid; grid-template-columns: 40px minmax(0, 220px) minmax(0, 1fr) auto 24px; gap: 20px; align-items: center; padding: 20px 12px; margin: 0 -12px; border-bottom: 1px solid var(--rule); border-radius: 6px; transition: background .2s ease; }
.way:hover { background: var(--sheet); }
.way b { font-size: 19px; font-weight: 600; letter-spacing: -0.015em; }
.way > span:not(.num) { font-family: var(--text); font-size: 14px; color: var(--ink-2); }
.way em { font-style: normal; font-weight: 600; white-space: nowrap; }
.way svg { width: 18px; height: 18px; fill: none; stroke: var(--ink); stroke-width: 1.6; stroke-linecap: round; transition: transform .25s var(--ease); }
.way:hover svg { transform: translate(2px, -2px); }

/* Designers and engineers: design file against production */
.seam { --x: 50%; position: relative; height: 540px; border-radius: 16px; overflow: hidden; border: 1px solid var(--rule); cursor: ew-resize; touch-action: pan-y; -webkit-user-select: none; user-select: none; box-shadow: 0 40px 80px -50px rgba(11, 19, 34, 0.45); }
.seam-layer { position: absolute; inset: 0; display: grid; grid-template-columns: 230px minmax(0, 1fr) 360px; }
.seam-design { background: var(--paper-2) radial-gradient(var(--dots) 1px, transparent 1.2px) 0 0 / 18px 18px; }
.seam-code { background: #0B1322; clip-path: inset(0 0 0 var(--x)); }
.sd-side { padding: 18px; background: var(--veil); border-right: 1px solid var(--rule); }
.sd-insp { border-right: 0; border-left: 1px solid var(--rule); }
.seam-code .sd-side { background: #0E182B; border-color: rgba(255, 255, 255, 0.08); }
.sd-h { display: block; margin-bottom: 10px; font: 500 11px var(--mono); letter-spacing: .04em; color: var(--ink-3); }
.sd-list li { padding: 6px 8px; border-radius: 5px; font: 400 12px var(--mono); color: var(--ink-2); }
.sd-list li.in { padding-left: 22px; }
.sd-list li.on { background: rgba(9, 145, 219, 0.12); color: var(--ink); }
.seam-code .sd-list li { color: #8D97AB; font-family: var(--code); }
.seam-code .sd-list li.on { background: rgba(255, 255, 255, 0.08); color: #fff; }
.sd-insp dl div { display: flex; justify-content: space-between; gap: 8px; padding: 10px 0; border-bottom: 1px solid var(--rule); font: 400 12px var(--mono); }
.sd-insp dt { color: var(--ink-3); }
.sd-insp dd { display: inline-flex; align-items: center; gap: 6px; }
.swatch { width: 11px; height: 11px; border-radius: 3px; background: var(--ink); }
.sd-canvas { position: relative; display: grid; place-items: center; min-width: 0; }
.phone { width: 262px; height: 476px; padding: 9px; border-radius: 40px; background: #0B1322; box-shadow: 0 30px 60px -30px rgba(11, 19, 34, 0.6); }
.seam-code .phone { box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.1), 0 30px 60px -30px #000; }
.screen { --ink: #0B1322; --ink-2: #5C6472; --ink-3: #8B93A1; --rule: #DDE1E8; display: flex; flex-direction: column; height: 100%; padding: 14px 16px; border-radius: 32px; background: #FAFBFC; color: var(--ink); font-family: var(--text); }
.sc-status { display: flex; justify-content: space-between; align-items: center; font: 600 11px var(--display); }
.sc-status i { width: 20px; height: 9px; border-radius: 3px; border: 1.3px solid var(--ink); }
.sc-title { margin-top: 16px; font: 600 23px var(--display); letter-spacing: -0.02em; }
.sc-trip { display: flex; align-items: center; gap: 10px; margin-top: 14px; padding: 10px; border-radius: 12px; background: #fff; border: 1px solid var(--rule); }
.sc-img { flex: none; width: 52px; height: 52px; border-radius: 9px; background: linear-gradient(135deg, #E0795A, #F5BFA9 58%, #9ED3F7); }
.sc-trip b { display: block; font: 600 14px var(--display); }
.sc-trip span { font-size: 11px; color: var(--ink-2); }
.sc-rows { margin-top: 12px; }
.sc-rows li { display: flex; justify-content: space-between; padding: 9px 0; border-bottom: 1px solid var(--rule); font-size: 12px; }
.sc-rows .tot { border-bottom: 0; font-size: 13px; font-weight: 600; }
.sc-btn { position: relative; display: block; height: 52px; margin-top: 24px; border-radius: 12px; background: var(--ink); color: #fff; font: 600 15px/52px var(--display); text-align: center; }
.sc-note { margin-top: 10px; text-align: center; font-size: 10.5px; color: var(--ink-3); }
.sel { position: absolute; inset: -4px; border: 1.5px solid #0991DB; border-radius: 14px; pointer-events: none; }
.sel i { position: absolute; width: 7px; height: 7px; background: #fff; border: 1.5px solid #0991DB; }
.sel i:nth-child(1) { left: -4px; top: -4px; } .sel i:nth-child(2) { right: -4px; top: -4px; } .sel i:nth-child(3) { left: -4px; bottom: -4px; } .sel i:nth-child(4) { right: -4px; bottom: -4px; }
.sel em { position: absolute; padding: 1px 5px; border-radius: 3px; background: #0991DB; color: #fff; font: 500 10px/1.4 var(--mono); font-style: normal; }
.sel .m-h { right: -34px; top: 50%; transform: translateY(-50%); }
.sel .m-p { left: -30px; top: 50%; transform: translateY(-50%); }
.sel .m-g { left: 50%; top: -30px; transform: translateX(-50%); background: #E0795A; }
.code { margin: 0; font: 400 12.5px/1.75 var(--code); color: #C9D1E0; white-space: pre; overflow: hidden; }
.code .k { color: #C792EA; } .code .f { color: #82AAFF; } .code .t { color: #F78C6C; } .code .a { color: #FFCB6B; } .code .s { color: #C3E88D; } .code .n { color: #F78C6C; } .code .c { color: #5C6B85; }
.sc-ed { padding: 22px 22px; }
.seam-handle { position: absolute; top: 0; bottom: 0; left: var(--x); z-index: 3; width: 0; pointer-events: none; }
.seam-handle i { position: absolute; top: 0; bottom: 0; left: -1px; width: 2px; background: #fff; box-shadow: 0 0 0 1px var(--dots); }
.seam-handle b { position: absolute; top: 50%; left: 50%; display: grid; place-items: center; width: 36px; height: 36px; margin: -18px; border-radius: 50%; background: #fff; box-shadow: 0 8px 18px rgba(11, 19, 34, 0.3); }
.seam-handle b::before { content: "\2039\00a0\203A"; font: 600 15px/1 var(--display); color: var(--ink); }
.sh-l, .sh-r { position: absolute; top: 14px; padding: 4px 10px; border-radius: 30px; font: 400 11px var(--mono); white-space: nowrap; }
.sh-l { right: 12px; background: #fff; color: var(--ink); box-shadow: 0 4px 12px -6px rgba(11, 19, 34, 0.4); }
.sh-r { left: 12px; background: #1B2740; color: #fff; }
.seam-hint { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 14px; font: 400 12px var(--mono); color: var(--ink-3); }
.seam-hint svg { width: 28px; height: 12px; fill: none; stroke: currentColor; stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; }
.jump { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 40px; }
.jump a { padding: 7px 14px; border-radius: 30px; border: 1px solid var(--rule); background: var(--glass-l); font-size: 14px; transition: background .2s ease; }
.jump a:hover { background: var(--card); }

/* Designers: visual diff */
.vd-panes { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--rule); border-bottom: 1px solid var(--rule); }
.vd-pane { position: relative; display: grid; place-items: center; padding: 40px 18px 30px; background: var(--paper-2); }
.vd-l { position: absolute; left: 12px; top: 10px; font: 400 11px var(--mono); color: var(--ink-3); }
.vd-card { --ink: #0B1322; --ink-2: #5C6472; --ink-3: #8B93A1; color: var(--ink); position: relative; width: 196px; padding: 12px; border-radius: 10px; background: #fff; box-shadow: 0 14px 30px -20px rgba(11, 19, 34, 0.45); font-family: var(--text); transition: outline-color .4s ease; outline: 1.5px dashed transparent; outline-offset: 5px; }
.vd-card.after { padding: 16px; }
.vd-img { height: 72px; border-radius: 6px; background: linear-gradient(135deg, #E0795A, #F5BFA9 58%, #9ED3F7); }
.vd-t { margin-top: 10px; font: 600 14px var(--display); }
.vd-s { font-size: 11px; color: var(--ink-2); }
.vd-p { margin-top: 8px; font: 500 19px var(--display); letter-spacing: -0.02em; }
.after .vd-p { font-weight: 700; }
.vd-btn { display: block; margin-top: 10px; padding: 8px; border-radius: 4px; background: var(--ink); color: #fff; text-align: center; font: 600 12px var(--display); }
.after .vd-btn { border-radius: 10px; }
.vdiff [data-n] { position: relative; outline: 1.5px solid transparent; outline-offset: 4px; transition: outline-color .4s ease; }
.vdiff [data-n]::after { content: attr(data-n); position: absolute; right: -12px; top: -12px; display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: #E0795A; color: #fff; font: 500 11px var(--mono); opacity: 0; transform: scale(.6); transition: opacity .35s ease, transform .45s var(--ease); }
.vdiff .vd-card[data-n].run, .vdiff .vd-card[data-n].done { outline-color: #E0795A; outline-style: dashed; }
.vdiff .run[data-n]:not(.vd-card), .vdiff .done[data-n]:not(.vd-card) { outline-color: #E0795A; border-radius: 6px; }
.vdiff .run[data-n]::after, .vdiff .done[data-n]::after { opacity: 1; transform: none; }
.vd-list { display: grid; gap: 8px; padding: 14px 18px 18px; }
.vd-list li { display: flex; align-items: center; gap: 10px; font-family: var(--text); font-size: 13px; color: var(--ink-3); transition: color .4s ease; }
.vd-list b { margin-left: auto; font: 500 12px var(--mono); }
.vd-n { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--fill); font: 500 11px var(--mono); transition: background .4s ease, color .4s ease; }
.vdiff[data-at="0"] .vd-list li:nth-child(-n+1), .vdiff[data-at="1"] .vd-list li:nth-child(-n+2), .vdiff[data-at="2"] .vd-list li:nth-child(-n+3), .vdiff[data-at="3"] .vd-list li { color: var(--ink); }
.vdiff[data-at="0"] .vd-list li:nth-child(-n+1) .vd-n, .vdiff[data-at="1"] .vd-list li:nth-child(-n+2) .vd-n, .vdiff[data-at="2"] .vd-list li:nth-child(-n+3) .vd-n, .vdiff[data-at="3"] .vd-list li .vd-n { background: #E0795A; color: #fff; }
.vdiff:not([data-at]) .vd-list li { color: var(--ink-3); }

/* Engineers: pull request */
.pr-body { padding: 18px 20px 20px; }
.pr-t { font-size: 19px; font-weight: 600; letter-spacing: -0.015em; }
.pr-br { margin-top: 4px; font-family: var(--text); font-size: 12.5px; color: var(--ink-2); }
.pr-br code { padding: 2px 6px; border-radius: 4px; background: var(--fill); font: 400 11.5px var(--code); color: var(--ink); }
.pr-files { margin-top: 14px; border: 1px solid var(--rule); border-radius: 8px; overflow: hidden; }
.pr-files li { display: grid; grid-template-columns: minmax(0, 1fr) 34px 30px auto; gap: 8px; align-items: center; padding: 8px 12px; border-bottom: 1px solid var(--rule); background: var(--card); font: 400 11.5px var(--code); }
.pr-files li:last-child { border-bottom: 0; }
.pr-files span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pr-files .add { color: var(--ok-ink); font-weight: 500; text-align: right; }
.pr-files .del { display: inline-flex; align-items: center; gap: 3px; color: #B5462F; font-weight: 500; }
.pr-files .del::before { content: ""; width: 7px; height: 2px; background: currentColor; }
.pr-files .del.zero::before { display: none; }
.bars { display: flex; gap: 2px; }
.bars u { width: 8px; height: 8px; border-radius: 2px; background: var(--mute); }
.bars u.g { background: #2DA160; }
.pr-steps { margin-top: 6px; padding: 0; }
.pr-steps li { padding: 9px 0; font-size: 13px; }
.pr-merge { margin-top: 12px; }
.merge { display: inline-flex; padding: 10px 16px; border-radius: 8px; background: var(--mute); color: var(--ink-3); font: 600 14px var(--display); transition: background .5s ease, color .5s ease; }
.merge em { font-style: normal; }
.merge .b { display: none; }
.pr.complete .merge { background: #6E40C9; color: #fff; }
.pr.complete .merge .a { display: none; }
.pr.complete .merge .b { display: inline; }
.pr[data-at="5"]:not(.complete) .merge { background: var(--ok); color: #fff; }

/* Proven layers */
.layers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 48px; }
.layer { display: flex; flex-direction: column; gap: 10px; padding-bottom: 20px; border-radius: 10px; background: var(--sheet); border: 1px solid var(--rule); overflow: hidden; }
.layer-art { position: relative; height: 128px; }
.layer-art canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.layer-art .num { position: absolute; left: 12px; top: 12px; padding: 5px 7px; border-radius: 4px; background: var(--veil); color: var(--ink); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.layer h3, .layer p, .layer .proof { margin-left: 20px; margin-right: 20px; }
.layer h3 { margin-top: 8px; font-size: 18px; font-weight: 600; letter-spacing: -0.015em; }
.layer p { font-family: var(--text); font-size: 13.5px; line-height: 1.6; color: var(--ink-2); }
.layer .proof { margin-top: auto; padding-top: 6px; }

/* Working together: flow of hexagons */
.flow { --at: 0; --cols: 6; position: relative; display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); gap: 12px; margin-top: 56px; }
.flow::before, .flow::after { content: ""; position: absolute; left: calc(100% / var(--cols) / 2); top: 22px; height: 2px; }
.flow::before { right: calc(100% / var(--cols) / 2); background: var(--rule); }
.flow::after { width: calc(min(var(--at), var(--cols) - 1) / (var(--cols) - 1) * (100% - 100% / var(--cols))); background: var(--ink); transition: width 1.2s var(--ease); }
.flow li { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; }
.flow-dot { display: grid; place-items: center; width: 56px; height: 46px; background: var(--paper); }
.flow-dot i { display: grid; place-items: center; width: 40px; height: 46px; background: var(--mute); color: var(--ink); font: 500 13px var(--mono); font-style: normal; clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); transition: background .5s ease, color .5s ease, transform .6s var(--ease); }
.flow li.run .flow-dot i { background: var(--accent); color: #fff; transform: scale(1.1); }
.flow li.done .flow-dot i { background: var(--ink); color: var(--paper); }
.flow b { margin-top: 10px; font-size: 16px; font-weight: 600; letter-spacing: -0.01em; }
.flow li > span:last-child { font-family: var(--text); font-size: 12.5px; color: var(--ink-2); }
.plans-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* Projects: the shared board */
.board { position: relative; height: 600px; border-radius: 16px; overflow: hidden; border: 1px solid var(--rule); background: var(--paper-2) radial-gradient(var(--dots) 1px, transparent 1.2px) 0 0 / 20px 20px; cursor: grab; touch-action: pan-y; -webkit-user-select: none; user-select: none; box-shadow: 0 40px 80px -55px rgba(11, 19, 34, 0.45); }
.board.dragging { cursor: grabbing; }
.board-layer { position: absolute; left: 0; top: 0; width: 1900px; height: 760px; will-change: transform; }
.bcard { position: absolute; width: 250px; border-radius: 12px; overflow: hidden; background: var(--tint); box-shadow: inset 0 0 0 1px var(--fill), 0 18px 36px -26px rgba(11, 19, 34, 0.5); transition: transform .5s var(--ease), box-shadow .5s ease; }
.bcard:hover, .bcard.touched { transform: translateY(-4px); }
.bcard.touched { box-shadow: 0 0 0 2px var(--tc, var(--ink)), 0 26px 40px -24px rgba(11, 19, 34, 0.55); }
.bcard-art { position: relative; height: 140px; overflow: hidden; }
.bcard-art canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.bcard-art > img { width: 100%; height: 100%; object-fit: cover; }
.bcard-cap { padding: 10px 14px 12px; background: var(--veil); }
.bcard-cap b { display: block; font-size: 15px; font-weight: 600; letter-spacing: -0.01em; }
.bcard-cap span { font: 400 11.5px var(--mono); color: var(--ink-2); }
.cursor { position: absolute; left: 0; top: 0; z-index: 5; pointer-events: none; will-change: transform; }
.cursor svg { display: block; width: 17px; height: 21px; fill: var(--c); stroke: #fff; stroke-width: 1.3; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.25)); }
.cur-name { position: absolute; left: 13px; top: 17px; display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px 3px 3px; border-radius: 20px; background: var(--c); color: #fff; font: 500 12px var(--display); white-space: nowrap; }
.cur-name img { width: 18px; height: 18px; border-radius: 50%; object-fit: cover; object-position: top; }
.cur-say { position: absolute; left: 13px; top: 44px; padding: 8px 12px; border-radius: 4px 14px 14px 14px; background: var(--card); color: var(--ink); font: 400 12.5px var(--text); white-space: nowrap; box-shadow: 0 12px 24px -12px rgba(11, 19, 34, 0.45); opacity: 0; transform: translateY(-4px) scale(.96); transform-origin: 0 0; transition: opacity .35s ease, transform .4s var(--ease); }
.cursor.saying .cur-say { opacity: 1; transform: none; }
.board-top { position: absolute; left: 14px; right: 14px; top: 14px; z-index: 6; display: flex; justify-content: space-between; align-items: center; gap: 12px; pointer-events: none; }
.board-title, .presence, .board-hint { padding: 6px 12px; border-radius: 30px; background: var(--veil); border: 1px solid var(--rule); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); font: 400 12px var(--mono); color: var(--ink-2); }
.presence { display: inline-flex; align-items: center; gap: 8px; padding: 4px 12px 4px 6px; }
.faces { display: flex; }
.faces img { width: 24px; height: 24px; margin-left: -6px; border-radius: 50%; object-fit: cover; object-position: top; border: 2px solid var(--c); background: var(--mute); }
.faces img:first-child { margin-left: 0; }
.presence b { font-weight: 500; color: var(--ink); }
.board-hint { position: absolute; left: 14px; bottom: 14px; z-index: 6; display: inline-flex; align-items: center; gap: 10px; pointer-events: none; }
.board-hint svg { width: 28px; height: 12px; fill: none; stroke: currentColor; stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; }
.pok-cards { position: absolute; inset: 0; display: grid; place-items: center; }
.pok-cards img { position: absolute; width: 58%; border-radius: 7%; box-shadow: 0 20px 34px -16px rgba(6, 54, 92, 0.65); animation: pokA 10s ease-in-out infinite; }
.pok-cards img:last-child { animation-name: pokB; }
@keyframes pokA { 0%, 100% { transform: translate(-15%, -12%) rotate(-12deg); } 50% { transform: translate(-11%, -6%) rotate(-7deg); } }
@keyframes pokB { 0%, 100% { transform: translate(14%, 10%) rotate(6deg); } 50% { transform: translate(10%, 5%) rotate(2deg); } }

/* Projects: list with filters */
.all-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px 40px; flex-wrap: wrap; }
.filters { display: flex; flex-wrap: wrap; gap: 6px; }
.fchip { padding: 7px 12px 7px 14px; border-radius: 30px; border: 1px solid var(--rule); background: var(--glass-l); color: var(--ink); font: 500 14px var(--display); cursor: pointer; transition: background .2s ease, color .2s ease, border-color .2s ease; }
.fchip sup { margin-left: 5px; font: 400 10.5px var(--mono); color: var(--ink-3); vertical-align: 2px; }
.fchip:hover { background: var(--card); }
.fchip.on { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.fchip.on sup { color: var(--ink-inv-2); }
.pgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-top: 40px; }
.pgrid[hidden] { display: none; }
.pcard { display: flex; flex-direction: column; border-radius: 14px; overflow: hidden; background: var(--sheet); border: 1px solid var(--rule); scroll-margin-top: 90px; }
.pcard[hidden] { display: none; }
.pcard.show { animation: cardIn .7s var(--ease) both; }
@keyframes cardIn { from { opacity: 0; transform: translateY(16px); } }
.pcard-art { position: relative; height: 300px; background: var(--tint, var(--paper-2)); overflow: hidden; }
.pcard-art canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.pcard-art > img { width: 100%; height: 100%; object-fit: cover; animation: drift-img 20s ease-in-out infinite alternate; }
.pcard-art .pok-cards img { width: 46%; }
.pcard-body { display: flex; flex: 1; flex-direction: column; gap: 12px; padding: 22px 24px 24px; }
.pcard-k { font: 400 12px var(--mono); color: var(--ink-3); }
.pcard h3 { margin-top: -4px; font-size: 30px; font-weight: 600; letter-spacing: -0.03em; line-height: 1; }
.pcard-d { font-family: var(--text); font-size: 14.5px; line-height: 1.6; color: var(--ink-2); }
.pcard-m { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; padding: 14px 0; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.pcard-m dt { font-size: 22px; font-weight: 600; letter-spacing: -0.02em; line-height: 1.1; }
.pcard-m dd { margin-top: 4px; font-family: var(--text); font-size: 12px; line-height: 1.4; color: var(--ink-3); }
.pcard-stack { display: flex; flex-wrap: wrap; gap: 6px; }
.pcard-stack li { padding: 3px 8px; border-radius: 4px; background: var(--fill); font: 400 11.5px var(--mono); color: var(--ink-2); }
.pcard .pill { margin-top: auto; align-self: flex-start; }
.pcard-wide { grid-column: 1 / -1; flex-direction: row; }
.pcard-wide .pcard-art { flex: 1.15; height: auto; min-height: 460px; }
.pcard-wide .pcard-body { flex: .85; padding: 34px 32px 32px; gap: 16px; }
.pcard-wide h3 { font-size: 46px; }
.pcard-wide .widget { width: 56%; }
.status { position: absolute; left: 14px; top: 14px; display: inline-flex; align-items: center; gap: 7px; padding: 5px 11px; border-radius: 30px; background: var(--veil); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); font: 400 11.5px var(--mono); color: var(--ink); }
.status i { width: 7px; height: 7px; border-radius: 50%; background: var(--ok); }
.status.dev i { background: var(--accent); animation: pulse 1.6s ease-in-out infinite; }
.tools-head { margin-top: 110px; scroll-margin-top: 90px; }
.tools-head[hidden] { display: none; }
.none { margin-top: 40px; font-family: var(--text); color: var(--ink-2); }
.counts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; margin-top: 36px; }
.counts dt { font-size: 36px; font-weight: 600; letter-spacing: -0.03em; line-height: 1; font-variant-numeric: tabular-nums; }
.counts dd { margin-top: 6px; font-family: var(--text); font-size: 13px; color: var(--ink-2); }
.evwin .log { height: 380px; padding-top: 6px; }
.evlog li { grid-template-columns: 124px minmax(0, 1fr); }
.evlog code { display: inline-flex; align-items: center; gap: 8px; color: var(--ink); }
.evlog code::before { content: ""; flex: none; width: 9px; height: 10px; background: var(--c); clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); }
.fine { margin-top: 10px; font-family: var(--text); font-size: 12px; color: var(--ink-3); }

/* ================= Shared shell additions ================= */
.logo-d { display: none; }
[data-theme="dark"] .logo-l { display: none; }
[data-theme="dark"] .logo-d { display: block; }
.theme-toggle { display: inline-grid; place-items: center; flex: none; width: 38px; height: 38px; margin-right: -14px; border-radius: 50%; border: 1px solid var(--rule); background: var(--glass-l); color: var(--ink); cursor: pointer; transition: background .2s ease, transform .4s var(--ease); }
.theme-toggle:hover { background: var(--card); }
.theme-toggle:active { transform: rotate(-20deg) scale(.94); }
.theme-toggle svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.theme-toggle .i-sun { display: none; }
[data-theme="dark"] .theme-toggle .i-sun { display: block; }
[data-theme="dark"] .theme-toggle .i-moon { display: none; }
[data-theme="dark"] :is(.mcard, .bcard, .pcard-art, .chero-art, .rcard-art, .lrow-art, .layer-art) { background: var(--sheet); }
.tag-line { background: none; border: 1px solid var(--hair); border-radius: 6px; padding: 5px 10px; font: 400 12px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink); }
.h2-duo span { display: block; color: var(--ink-3); }
.sec-links { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 40px; }
.sec-top0 { padding-top: 16px; }
[data-reveal] { opacity: .3; transform: translateY(12px); transition: opacity .8s ease, transform .8s var(--ease); }
[data-reveal].in { opacity: 1; transform: none; }

/* Closing section: listed details, and a message form that opens on request */
.contact-sec { border-top: 1px solid var(--rule); }
.ct-item { display: flex; align-items: flex-start; gap: 14px; padding: 24px 24px 22px; font: 400 16px/1.5 var(--display); color: var(--ink); }
.ct-item:hover .get-mk i { transform: rotate(90deg); }
a.ct-item svg { flex: none; align-self: center; width: 16px; height: 16px; margin-left: auto; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; transition: transform .25s var(--ease); }
a.ct-item:hover svg { transform: translate(2px, -2px); }
.get-copy .hero-cta { margin-top: 28px; }
.get-copy button.pill { cursor: pointer; font-family: var(--display); }
.cform { display: grid; gap: 14px; margin-top: 20px; padding: 28px; border-radius: 16px; background: var(--sheet); border: 1px solid var(--rule); scroll-margin-top: 100px; animation: panelIn .5s var(--ease) both; }
.cform[hidden] { display: none; }
.cf-head strong { display: block; font-size: 20px; font-weight: 600; letter-spacing: -0.015em; }
.cf-head span { display: block; margin-top: 2px; font-family: var(--text); font-size: 13.5px; color: var(--ink-3); }
.cf-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.cform label { display: grid; gap: 6px; font: 400 12px var(--mono); color: var(--ink-3); }
.cform label em { font-style: normal; opacity: .7; }
.cform input, .cform select, .cform textarea { width: 100%; padding: 11px 13px; border-radius: 10px; border: 1px solid var(--rule); background: var(--card); color: var(--ink); font: 400 15px var(--text); outline: none; transition: border-color .2s ease; }
.cform textarea { min-height: 96px; resize: vertical; }
.cform select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--ink-3) 50%), linear-gradient(135deg, var(--ink-3) 50%, transparent 50%); background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%; background-size: 5px 5px; background-repeat: no-repeat; }
.cform input:focus, .cform select:focus, .cform textarea:focus { border-color: var(--ink); }
.cform [aria-invalid="true"] { border-color: var(--red); }
.cf-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }
.cf-foot .pill { border: 0; cursor: pointer; }
.cf-done { padding: 12px 14px; border-radius: 10px; background: var(--ok-bg); border: 1px solid var(--ok); font: 400 14px/1.5 var(--text); color: var(--ink); }
.cf-done a { text-decoration: underline; text-underline-offset: 3px; }

/* ================= Landing additions ================= */
.readout { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; margin-top: 28px; padding-top: 22px; border-top: 1px solid var(--rule); }
.readout dt { font-size: clamp(28px, 2.6vw, 38px); font-weight: 600; letter-spacing: -0.03em; line-height: 1; font-variant-numeric: tabular-nums; }
.readout dd { margin-top: 8px; font-family: var(--text); font-size: 13.5px; color: var(--ink-2); }

/* Services: list drives the live panel */
.svc { display: grid; grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr); gap: 16px; margin-top: 44px; align-items: start; }
.svc-list { border-top: 1px solid var(--rule); }
.svc-item { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 6px; padding: 20px 14px; border-bottom: 1px solid var(--rule); border-radius: 8px; cursor: pointer; outline-offset: -2px; transition: background .3s ease, box-shadow .3s ease; }
.svc-item .num { padding-top: 5px; transition: color .3s ease; }
.svc-item h3 { font-size: 19px; font-weight: 600; letter-spacing: -0.015em; line-height: 1.25; color: var(--ink-2); transition: color .3s ease; }
.svc-item:hover h3, .svc-item.on h3 { color: var(--ink); }
.svc-item.on { background: var(--sheet); box-shadow: inset 2px 0 0 var(--ink); }
.svc-item.on .num { color: var(--ink); }
.svc-item p, .svc-item .proof { max-height: 0; margin-top: 0; opacity: 0; overflow: hidden; visibility: hidden; transition: max-height .55s var(--ease), opacity .4s ease, margin .4s ease, visibility 0s .4s; }
.svc-item p { font-family: var(--text); font-size: 14px; line-height: 1.65; color: var(--ink-2); }
.svc-item.on p { max-height: 160px; margin-top: 8px; opacity: 1; visibility: visible; transition: max-height .6s var(--ease), opacity .5s ease .1s, margin .4s ease; }
.svc-item.on .proof { max-height: 70px; margin-top: 12px; opacity: 1; visibility: visible; transition: max-height .6s var(--ease), opacity .5s ease .15s, margin .4s ease; }
.proof svg { flex: none; width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; transition: transform .25s var(--ease); align-self: center; }
a.proof:hover svg { transform: translate(2px, -2px); }
.svc-stage { position: sticky; top: 90px; min-height: 560px; border-radius: 14px; background: var(--sheet); border: 1px solid var(--rule); overflow: hidden; box-shadow: 0 1px 0 var(--win-hi) inset, 0 40px 80px -55px rgba(11, 19, 34, 0.45); }
.svc-view { position: absolute; inset: 0; display: flex; flex-direction: column; gap: 20px; padding: 26px; opacity: 0; visibility: hidden; transform: translateY(10px); transition: opacity .45s ease, transform .6s var(--ease), visibility 0s .45s; }
.svc-view.on { opacity: 1; visibility: visible; transform: none; transition: opacity .45s ease, transform .6s var(--ease), visibility 0s; }
.svc-view *, .svc-view *::before, .svc-view *::after { animation-play-state: paused; }
.svc-view.on.run *, .svc-view.on.run *::before, .svc-view.on.run *::after { animation-play-state: running; }
.sv-head strong { display: block; font-size: 18px; font-weight: 600; letter-spacing: -0.01em; }
.sv-head span { display: block; margin-top: 3px; font-family: var(--text); font-size: 13px; color: var(--ink-3); }
.sv-row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font-family: var(--text); font-size: 12.5px; color: var(--ink-3); }
.sv-row b { font: 600 15px var(--display); color: var(--ink); font-variant-numeric: tabular-nums; }
.sv-foot { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: auto; padding-top: 16px; border-top: 1px solid var(--rule); }
.sv-foot b { display: block; font-size: 22px; font-weight: 600; letter-spacing: -0.02em; }
.sv-foot span { display: block; margin-top: 2px; font-family: var(--text); font-size: 12px; color: var(--ink-3); }
/* Product engineering: one set of components builds on web and phone */
.sv-build { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 14px; min-height: 300px; }
.sv-dev { position: relative; padding: 22px 0 26px; }
.sv-web { position: relative; width: 80%; border-radius: 12px; overflow: hidden; background: var(--card); border: 1px solid var(--rule); box-shadow: 0 30px 50px -36px rgba(11, 19, 34, 0.5); }
.sv-bar { display: flex; align-items: center; gap: 5px; height: 26px; padding: 0 10px; background: var(--fill); border-bottom: 1px solid var(--rule); }
.sv-bar i { width: 7px; height: 7px; border-radius: 50%; background: var(--mute); }
.sv-bar span { margin-left: 10px; padding: 2px 10px; border-radius: 6px; font: 400 10px var(--code); color: var(--ink-3); background: var(--fill); }
.sv-web .sv-scr { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; padding: 14px; }
.sv-web .sl-nav, .sv-web .sl-hero, .sv-web .sl-list { grid-column: 1 / -1; }
.sv-web .sl-cards { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.sv-web .sl-btn { grid-column: 3; }
.sv-phone { position: absolute; right: 0; bottom: 0; width: 32%; padding: 18px 7px 10px; border-radius: 24px; background: var(--card); border: 1px solid var(--rule); box-shadow: 0 30px 50px -26px rgba(11, 19, 34, 0.55); }
.sv-notch { position: absolute; left: 50%; top: 7px; width: 34%; height: 6px; margin-left: -17%; border-radius: 4px; background: var(--mute); }
.sv-phone .sv-scr { display: flex; flex-direction: column; gap: 6px; padding: 4px; }
.sv-phone .sl-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.sl { position: relative; border-radius: 7px; border: 1px dashed var(--hair); transition: background .6s ease, border-color .6s ease, box-shadow .6s ease, transform .6s var(--ease); }
.sl i { display: block; border-radius: 3px; background: var(--fill-2); transition: background .6s ease; }
.sl-nav { display: flex; align-items: center; gap: 6px; height: 22px; padding: 0 8px; }
.sl-nav i { width: 18px; height: 5px; } .sl-nav i:first-child { width: 30px; margin-right: auto; }
.sl-hero { height: 86px; padding: 12px; display: flex; flex-direction: column; justify-content: flex-end; gap: 5px; }
.sv-phone .sl-hero { height: 64px; padding: 9px; }
.sl-hero i { height: 6px; width: 60%; } .sl-hero i + i { width: 38%; height: 5px; }
.sl-cards { border: 0; }
.sl-cards i { height: 56px; border-radius: 7px; border: 1px dashed var(--hair); background: transparent; }
.sv-phone .sl-cards i { height: 40px; }
.sl-list { display: flex; flex-direction: column; gap: 8px; padding: 10px; }
.sl-list i { height: 8px; }
.sl-btn { height: 24px; display: flex; align-items: center; justify-content: center; border-radius: 999px; }
.sl-btn i { width: 46%; height: 5px; }
.sl.built { border-color: transparent; }
.sl-nav.built { background: var(--fill); } .sl-nav.built i { background: var(--ink-3); }
.sl-hero.built { background: linear-gradient(120deg, #A9452A, #E0795A 60%, #F5BFA9); box-shadow: 0 14px 24px -16px rgba(169, 69, 42, 0.8); }
.sl-hero.built i { background: rgba(255, 255, 255, 0.9); }
.sl-cards.built i { border-color: transparent; }
.sl-cards.built .cb { background: #F5BFA9; } .sl-cards.built .cg { background: #9ED3F7; } .sl-cards.built .ca { background: #F6D48C; }
.sl-list.built { background: var(--fill); } .sl-list.built i { background: var(--mute); }
.sl-btn.built { background: var(--ink); } .sl-btn.built i { background: var(--paper); }
.sl.pop { transform: scale(1.04); }
.sv-live { position: absolute; right: 10px; bottom: 10px; padding: 3px 9px; border-radius: 999px; font: 500 10.5px var(--mono); color: #fff; background: var(--ok); opacity: 0; transform: translateY(6px); transition: opacity .4s ease, transform .4s var(--ease); }
.sv-phone .sv-live { right: 50%; margin-right: -20px; bottom: -10px; }
.sv-build.shipped .sv-live { opacity: 1; transform: none; }
.sv-chip { position: absolute; left: 60%; top: 0; z-index: 3; padding: 7px 12px; border-radius: 9px; font: 400 12px var(--code); white-space: nowrap; background: var(--ink); color: var(--paper); transform: translateX(-50%); transition: opacity .35s ease; box-shadow: 0 12px 24px -12px rgba(11, 19, 34, 0.6); }
.sv-chip .k { opacity: .55; }
.sv-chip.swap { opacity: 0; }
.sv-tags { display: flex; justify-content: space-between; font: 400 11.5px var(--mono); color: var(--ink-3); }
.sv-weeks { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; margin-top: 10px; }
.sv-weeks i { position: relative; height: 26px; border-radius: 6px; background: var(--fill); overflow: hidden; }
.sv-weeks i::before { content: ""; position: absolute; inset: 0; background: var(--ink); transform-origin: left; transform: scaleX(0); transition: transform .9s var(--ease); }
.sv-weeks i.done::before { transform: scaleX(1); }
.sv-weeks i:last-child.done::before { background: var(--ok); }
.sv-weeks em { position: relative; z-index: 1; display: grid; place-items: center; height: 100%; font: 500 11px var(--mono); font-style: normal; color: var(--ink-3); transition: color .6s ease; }
.sv-weeks i.done em { color: var(--paper); }
/* Applied AI: a lab report being read */
.sv-scan { flex: 1; display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 18px; align-items: center; }
.sv-doc { position: relative; padding: 18px 16px; border-radius: 10px; background: var(--card); border: 1px solid var(--rule); overflow: hidden; box-shadow: 0 24px 40px -30px rgba(11, 19, 34, 0.5); }
.sv-doc-head { display: flex; justify-content: space-between; margin-bottom: 14px; }
.sv-doc-head i { height: 8px; width: 44%; border-radius: 4px; background: var(--mute); }
.sv-doc-head i + i { width: 22%; background: #2DB79D; }
.sv-doc p { display: flex; gap: 8px; width: var(--l); margin-bottom: 10px; }
.sv-doc p i { flex: 1; height: 5px; border-radius: 3px; background: var(--fill-2); }
.sv-doc p i + i { flex: 0 0 26%; background: var(--mute); }
.sv-scanline { position: absolute; left: 0; right: 0; top: 0; height: 46px; background: linear-gradient(180deg, transparent, rgba(45, 183, 157, 0.2) 85%, rgba(45, 183, 157, 0.55)); border-bottom: 1.5px solid #0F7A6B; animation: scan 5s ease-in-out infinite; }
@keyframes scan { 0% { transform: translateY(-50px); } 70% { transform: translateY(290px); } 100% { transform: translateY(290px); opacity: 0; } }
.sv-fields { display: grid; gap: 8px; }
.sv-fields li { display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; padding: 10px 12px 12px; border-radius: 9px; background: var(--card); border: 1px solid var(--rule); font-size: 13px; animation: fieldin 5s var(--ease) infinite; animation-delay: calc(var(--k) * 0.62s); }
.sv-fields span { font-family: var(--text); font-size: 12px; color: var(--ink-2); }
.sv-fields b { font-weight: 600; font-variant-numeric: tabular-nums; }
.sv-fields em { grid-column: 1 / -1; height: 3px; border-radius: 2px; background: var(--fill); overflow: hidden; }
.sv-fields em::after { content: ""; display: block; height: 100%; width: var(--c); background: #2DB79D; }
@keyframes fieldin { 0%, 6% { opacity: 0; transform: translateX(10px); } 14%, 88% { opacity: 1; transform: none; } 96%, 100% { opacity: 0; } }
/* Cloud and DevOps: response time, live */
.sv-chart { flex: 1; display: flex; flex-direction: column; min-height: 180px; padding: 12px 14px 10px; border-radius: 10px; background: var(--card); border: 1px solid var(--rule); }
.sv-chart-top { display: flex; justify-content: space-between; gap: 10px; font-family: var(--text); font-size: 12px; color: var(--ink-3); }
.sv-chart-top span:last-child { color: var(--ink-2); }
.sv-chart-body { position: relative; flex: 1; min-height: 130px; margin: 10px 0 0 44px; }
.sv-chart-body svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: hidden; }
.sv-chart .ax { position: absolute; left: -44px; transform: translateY(-50%); font: 400 10px var(--mono); color: var(--ink-3); }
.sv-chart .grid { stroke: var(--rule); stroke-dasharray: 2 6; vector-effect: non-scaling-stroke; }
.tr-line { fill: none; stroke: var(--ink); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.tr-guide { stroke: var(--hair); stroke-dasharray: 2 4; vector-effect: non-scaling-stroke; }
.tr-dot { position: absolute; left: 88%; top: 50%; width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%; background: var(--ink); box-shadow: 0 0 0 4px var(--fill-2); }
.tr-dot::after { content: ""; position: absolute; inset: -8px; border-radius: 50%; border: 1px solid var(--ink-3); animation: ripple 2s ease-out infinite; }
@keyframes ripple { 0% { transform: scale(.4); opacity: .9; } 100% { transform: scale(1.6); opacity: 0; } }
.tr-tip { position: absolute; left: 88%; top: 50%; transform: translate(-50%, calc(-100% - 14px)); padding: 4px 9px; border-radius: 6px; font: 500 12px var(--mono); white-space: nowrap; background: var(--ink); color: var(--paper); }
.sv-gauges { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.sv-gauge { padding: 12px 10px; border-radius: 10px; text-align: center; background: var(--card); border: 1px solid var(--rule); }
.sv-gauge svg { display: block; width: 100%; max-width: 110px; margin: 0 auto; }
.g-track, .g-val { fill: none; stroke-width: 7; stroke-linecap: round; }
.g-track { stroke: var(--fill-2); }
.g-val { stroke: var(--ink); transition: stroke-dasharray 1.1s var(--ease); }
.sv-gauge b { display: block; margin-top: -6px; font-size: 18px; font-weight: 600; font-variant-numeric: tabular-nums; }
.sv-gauge span { display: block; font-family: var(--text); font-size: 11.5px; color: var(--ink-3); }
.g-stat { display: flex; flex-direction: column; align-items: center; justify-content: center; }
.g-stat strong { font-size: 30px; font-weight: 600; line-height: 1; color: var(--ok); }
.g-stat b { margin-top: 6px; font-size: 13px; }
.sv-pipe { display: flex; align-items: center; gap: 6px; font: 400 11.5px var(--mono); overflow: hidden; }
.sv-pipe span { flex: none; padding: 7px 9px; border-radius: 7px; background: var(--card); border: 1px solid var(--rule); white-space: nowrap; }
.sv-pipe i { position: relative; flex: 1; min-width: 8px; height: 1px; background: var(--hair); overflow: hidden; }
.sv-pipe i::after { content: ""; position: absolute; top: -1px; left: -30%; width: 30%; height: 3px; border-radius: 2px; background: var(--ink); animation: packet 1.4s linear infinite; }
.sv-pipe i:nth-of-type(2)::after { animation-delay: .35s; } .sv-pipe i:nth-of-type(3)::after { animation-delay: .7s; } .sv-pipe i:nth-of-type(4)::after { animation-delay: 1.05s; }
@keyframes packet { to { left: 100%; } }
/* Payments: one money core */
.sv-pay { flex: 1; display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: 18px; align-items: center; }
.sv-ring { position: relative; }
.sv-ring > svg { display: block; width: 100%; height: auto; overflow: visible; }
.ring-spin { transform-origin: 0 0; animation: spin 48s linear infinite; }
.rs-track { fill: none; stroke: var(--fill-2); stroke-width: 6; }
.rs { fill: none; stroke-width: 6; }
.rs.s1 { stroke: #0B66AE; stroke-dasharray: 29 71; }
.rs.s2 { stroke: var(--ok); stroke-dasharray: 21 79; stroke-dashoffset: -31; }
.rs.s3 { stroke: #7D8696; stroke-dasharray: 17 83; stroke-dashoffset: -54; }
.rs.s4 { stroke: #5B3FD9; stroke-dasharray: 25 75; stroke-dashoffset: -73; }
.ring-c { position: absolute; left: 0; right: 0; top: 0; aspect-ratio: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; }
.ring-c svg { width: 26px; height: 26px; fill: none; stroke: var(--ok); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 24; animation: tick 1.8s ease-in-out infinite; }
.ring-c span { font-family: var(--text); font-size: 11.5px; color: var(--ink-2); }
@keyframes tick { 0% { stroke-dashoffset: 24; } 40%, 100% { stroke-dashoffset: 0; } }
.ring-key { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 12px; margin-top: 14px; font-family: var(--text); font-size: 11.5px; color: var(--ink-3); }
.ring-key li::before { content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 6px; border-radius: 50%; background: currentColor; }
.ring-key .k1::before { background: #0B66AE; } .ring-key .k2::before { background: var(--ok); } .ring-key .k3::before { background: #7D8696; } .ring-key .k4::before { background: #5B3FD9; }
.sv-feed { display: grid; gap: 8px; min-height: 290px; align-content: start; overflow: hidden; }
.sv-feed li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 9px; background: var(--card); border: 1px solid var(--rule); animation: feedin .6s var(--ease) both; animation-play-state: running !important; }
.sv-feed .ic { --m: #0B66AE; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 7px; background: color-mix(in srgb, var(--m) 14%, transparent); }
.sv-feed .ic.m-wallet { --m: #1F9D62; } .sv-feed .ic.m-qr { --m: #7D8696; } .sv-feed .ic.m-online { --m: #5B3FD9; }
.sv-feed .ic svg { width: 15px; height: 15px; fill: none; stroke: var(--m); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.sv-feed strong { display: block; font-size: 13.5px; font-weight: 600; line-height: 1.2; }
.sv-feed small { display: block; font-family: var(--text); font-size: 11px; color: var(--ink-3); }
.sv-feed .amt { text-align: right; font-size: 13.5px; font-variant-numeric: tabular-nums; }
.sv-feed .amt em { display: block; font: 400 10.5px var(--mono); font-style: normal; color: var(--ok-ink); }
@keyframes feedin { from { opacity: 0; transform: translateY(-12px) scale(.98); } to { opacity: 1; transform: none; } }
/* Maintenance: radar and event stream */
.sv-radar { flex: 1; display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 22px; align-items: center; }
.sv-scope { position: relative; aspect-ratio: 1; border-radius: 50%; background-color: var(--card);
  background-image: radial-gradient(circle, transparent 0 21%, var(--rule) 21.3% 21.8%, transparent 22% 43%, var(--rule) 43.3% 43.8%, transparent 44% 65%, var(--rule) 65.3% 65.8%, transparent 66% 99%, var(--hair) 99.2%),
    linear-gradient(transparent calc(50% - .5px), var(--rule) calc(50% - .5px) calc(50% + .5px), transparent calc(50% + .5px)),
    linear-gradient(90deg, transparent calc(50% - .5px), var(--rule) calc(50% - .5px) calc(50% + .5px), transparent calc(50% + .5px)); }
.sv-scope .sweep { position: absolute; inset: 0; border-radius: 50%; background: conic-gradient(from 0deg, transparent 0deg, rgba(31, 157, 98, 0.2) 58deg, rgba(31, 157, 98, 0.7) 60deg, transparent 60.6deg); animation: spin 5s linear infinite; }
.sv-blip { position: absolute; width: 0; height: 0; }
.sv-blip i { position: absolute; left: -4px; top: -4px; width: 8px; height: 8px; border-radius: 50%; background: var(--ok); opacity: .3; animation: blip 5s linear infinite; animation-delay: var(--d); }
.sv-blip em { position: absolute; left: 9px; top: -8px; font: 400 10.5px var(--mono); font-style: normal; color: var(--ink-2); white-space: nowrap; opacity: .55; animation: blipt 5s linear infinite; animation-delay: var(--d); }
@keyframes blip { 0% { opacity: 1; transform: scale(1.5); } 30% { opacity: .55; transform: scale(1); } 100% { opacity: .3; } }
@keyframes blipt { 0% { opacity: 1; } 35%, 100% { opacity: .55; } }
.sv-events { display: flex; flex-direction: column; gap: 12px; }
.ev-bars { display: flex; align-items: flex-end; gap: 3px; height: 92px; }
.ev-bars i { flex: 1; height: 40%; border-radius: 2px 2px 0 0; background: var(--accent); opacity: .85; transition: height .5s var(--ease); }
.sv-uptime { display: grid; gap: 10px; padding-top: 16px; border-top: 1px solid var(--rule); }
.up-bars { display: grid; grid-template-columns: repeat(40, 1fr); gap: 3px; height: 22px; }
.up-bars i { border-radius: 2px; background: var(--ok); opacity: .85; animation: upbar 4s ease-in-out infinite; }
.up-bars i:nth-child(7n) { animation-delay: .6s; } .up-bars i:nth-child(5n) { animation-delay: 1.4s; } .up-bars i:nth-child(3n) { animation-delay: 2.2s; }
@keyframes upbar { 0%, 100% { opacity: .85; } 50% { opacity: .45; } }
.startup { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-top: 16px; padding: 12px 12px 12px 26px; border-radius: 999px; background: var(--sheet); border: 1px solid var(--rule); }
.startup p { font-family: var(--text); font-size: 14.5px; line-height: 1.6; color: var(--ink-2); }
.startup strong { color: var(--ink); font-weight: 600; }

/* One team: three blocks, each alive in turn */
.trio { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 44px; }
.tv { padding: 14px 14px 22px; border-radius: 10px; background: var(--sheet); border: 1px solid var(--rule); transition: border-color .5s ease, box-shadow .5s ease, transform .5s var(--ease); }
.tv.on { border-color: var(--ink); box-shadow: 0 26px 40px -30px rgba(11, 19, 34, 0.5); transform: translateY(-4px); }
.tv h3 { margin: 18px 6px 0; font-size: 19px; font-weight: 600; letter-spacing: -0.015em; }
.tv p { margin: 6px 6px 0; font-family: var(--text); font-size: 14px; line-height: 1.6; color: var(--ink-2); }
.tv-viz { position: relative; height: 184px; padding: 16px; border-radius: 8px; background: var(--paper); overflow: hidden; }
.tv-design { display: grid; grid-template-columns: 1fr 1fr 1fr; grid-template-rows: 22px 1fr 1fr; gap: 8px; }
.tv-design i { border-radius: 6px; background: var(--fill); border: 1px dashed var(--hair); transition: background .4s ease, border-color .4s ease, transform .6s var(--ease); }
.tv-design .w1 { grid-column: 1 / 4; } .tv-design .w2 { grid-row: 2 / 4; } .tv-design .w3 { grid-column: 2 / 4; animation: nudge-x 6s var(--ease) infinite; } .tv-design .w5 { animation: nudge-y 7s var(--ease) infinite 1s; }
.tv-design i.picked { background: rgba(9, 145, 219, 0.12); border-style: solid; border-color: #0991DB; }
@keyframes nudge-x { 50% { transform: translateX(6px); } }
@keyframes nudge-y { 50% { transform: translateY(-5px); } }
.tv-sel { position: absolute; left: 0; top: 0; width: 40px; height: 20px; border: 1.5px solid #0991DB; border-radius: 6px; pointer-events: none; transition: transform .7s var(--ease), width .7s var(--ease), height .7s var(--ease); }
.tv-sel s { position: absolute; width: 7px; height: 7px; background: var(--card); border: 1.5px solid #0991DB; border-radius: 2px; }
.tv-sel s:nth-of-type(1) { left: -4px; top: -4px; } .tv-sel s:nth-of-type(2) { right: -4px; top: -4px; } .tv-sel s:nth-of-type(3) { left: -4px; bottom: -4px; } .tv-sel s:nth-of-type(4) { right: -4px; bottom: -4px; }
.tv-sel b { position: absolute; left: -1px; top: -22px; padding: 2px 6px; border-radius: 4px; background: #0991DB; color: #fff; font: 500 10px var(--mono); white-space: nowrap; }
.tv-cur { position: absolute; left: 0; top: 0; width: 14px; height: 14px; pointer-events: none; transition: transform .7s var(--ease); }
.tv-cur::before { content: ""; position: absolute; inset: 0; background: var(--ink); clip-path: polygon(0 0, 100% 62%, 52% 64%, 34% 100%); }
.tv-code { display: flex; flex-direction: column; justify-content: center; gap: 10px; background: #0B1322; font: 400 13px var(--code); color: #C9D1E0; }
.tv-code .ln { position: relative; z-index: 1; display: block; min-height: 18px; padding: 0 8px; line-height: 18px; white-space: nowrap; }
.tv-code b { color: #C792EA; font-weight: 400; } .tv-code em { font-style: normal; color: #82AAFF; } .tv-code .c { color: #5C6B85; }
.tv-code .hl { position: absolute; left: 10px; right: 10px; top: 0; height: 26px; border-radius: 6px; background: rgba(255, 255, 255, 0.07); box-shadow: inset 2px 0 0 #82AAFF; transition: transform .5s var(--ease); }
.tv-code .ln.cur::after { content: ""; display: inline-block; width: 7px; height: 15px; margin-left: 3px; vertical-align: -2px; background: #82AAFF; animation: caret 1s steps(1) infinite; }
.tv-qa { display: flex; flex-direction: column; justify-content: flex-end; font-family: var(--text); font-size: 13.5px; }
.qa-stack { display: flex; flex-direction: column; gap: 7px; }
.tv-qa span { display: flex; align-items: center; gap: 10px; height: 31px; padding: 0 12px; border-radius: 8px; background: var(--card); border: 1px solid var(--rule); transition: border-color .35s ease, margin .45s var(--ease), opacity .4s ease, transform .45s var(--ease); }
.tv-qa span.enter { animation: qa-in .5s var(--ease) both; }
.tv-qa span.leave { margin-top: -38px; opacity: 0; transform: scale(.94); }
@keyframes qa-in { from { opacity: 0; transform: translateY(18px) scale(.96); } to { opacity: 1; transform: none; } }
.tv-qa em { margin-left: auto; font: 400 11px var(--mono); font-style: normal; color: var(--ink-3); opacity: 0; transition: opacity .3s ease; }
.tv-qa i { position: relative; flex: none; width: 16px; height: 16px; border-radius: 50%; border: 1.5px solid var(--hair); transition: background .3s ease, border-color .3s ease; }
.tv-qa span.run { border-color: var(--accent); }
.tv-qa span.run i { border-color: var(--hair); border-top-color: var(--accent); animation: spin .8s linear infinite; }
.tv-qa span.ok i { background: var(--ok); border-color: var(--ok); }
.tv-qa span.ok i::after { content: ""; position: absolute; left: 4px; top: 1px; width: 4px; height: 8px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.tv-qa span.ok em { opacity: 1; color: var(--ok-ink); }

/* How to start: tabs with a sliding thumb */
.seg { position: relative; display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); margin-top: 40px; padding: 5px; border-radius: 999px; background: var(--paper-2); border: 1px solid var(--rule); }
.seg-thumb { position: absolute; z-index: 1; top: 5px; bottom: 5px; left: 5px; width: calc((100% - 10px) / var(--n)); border-radius: 999px; transform: translateX(calc(var(--i) * 100%)); transition: transform .55s cubic-bezier(.3, 1.25, .5, 1); background: var(--card); box-shadow: 0 1px 0 var(--win-hi) inset, 0 10px 22px -12px rgba(11, 19, 34, 0.45); }
.seg .tab { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: 56px; padding: 8px 12px; border: 0; border-radius: 999px; background: none; cursor: pointer; font: 600 15.5px/1.15 var(--display); color: var(--ink-3); transition: color .25s ease; }
.seg .tab small { font: 400 12px var(--text); color: var(--ink-3); }
.seg .tab:hover, .seg .tab[aria-selected="true"] { color: var(--ink); }
.seg .tab[aria-selected="true"] small { color: var(--ink-2); }
.plan-panels { margin-top: 16px; }
.plan-panel { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px; padding: 32px; border-radius: 14px; background: var(--sheet); border: 1px solid var(--rule); scroll-margin-top: 100px; animation: panelIn .55s var(--ease) both; }
.plan-panel[hidden] { display: none; }
@keyframes panelIn { from { opacity: 0; transform: translateY(10px); } }
.pl-copy { display: flex; flex-direction: column; }
.pl-copy h3 { font-size: clamp(28px, 3vw, 38px); font-weight: 600; letter-spacing: -0.025em; line-height: 1.05; }
.pl-copy > p:not(.plan-price) { margin-top: 12px; max-width: 54ch; font-family: var(--text); font-size: 15px; line-height: 1.65; color: var(--ink-2); }
.terms { margin-top: 22px; border-top: 1px solid var(--rule); }
.terms div { display: flex; justify-content: space-between; gap: 16px; padding: 11px 0; border-bottom: 1px solid var(--rule); font-size: 14.5px; }
.terms dt { color: var(--ink-3); }
.terms dd { text-align: right; }
.pl-copy .plan-price { margin-top: 22px; }
.pl-copy .pill { align-self: flex-start; margin-top: 20px; }
.pl-art { position: relative; min-height: 400px; border-radius: 12px; overflow: hidden; background: var(--paper-2); border: 1px solid var(--rule); }
.pl-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; animation: drift-img 20s ease-in-out infinite alternate; }
.squad { background: radial-gradient(60% 50% at 50% 58%, rgba(9, 145, 219, 0.08), transparent 70%), var(--paper-2); }
.sq-edges { position: absolute; inset: 0; width: 100%; height: 100%; }
.sq-e { fill: none; stroke: var(--hair); stroke-width: 1.3; stroke-dasharray: 3 5; vector-effect: non-scaling-stroke; animation: flowdash 1.6s linear infinite; }
@keyframes flowdash { to { stroke-dashoffset: -16; } }
.sq-e.hot { stroke: var(--ink); stroke-width: 2; stroke-dasharray: none; }
.sq-dot { position: absolute; left: 50%; top: 10%; z-index: 3; width: 13px; height: 14px; margin: -7px 0 0 -6.5px; background: var(--ink); clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); opacity: 0; transition: opacity .2s; }
.sq-dot.on { opacity: 1; }
.sq-node { position: absolute; z-index: 2; display: flex; align-items: center; gap: 8px; padding: 7px 12px 7px 8px; border-radius: 12px; white-space: nowrap; transform: translate(-50%, -50%); background: var(--card); border: 1px solid var(--rule); box-shadow: 0 12px 22px -16px rgba(11, 19, 34, 0.45); transition: transform .35s var(--ease), border-color .35s ease; }
.sq-node svg { flex: none; width: 26px; height: 26px; padding: 5px; border-radius: 7px; fill: none; stroke: var(--ink); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; background: var(--fill); transition: background .35s ease, stroke .35s ease; }
.sq-node img { width: 26px; height: 26px; padding: 3px; }
.sq-node b { display: block; font-size: 13px; font-weight: 600; line-height: 1.2; }
.sq-node em { display: block; max-height: 0; overflow: hidden; font: 400 10.5px var(--mono); font-style: normal; color: var(--ok-ink); transition: max-height .35s ease; }
.sq-hub { border-color: var(--ink); }
.sq-leaf.hit { transform: translate(-50%, -50%) scale(1.06); border-color: var(--ink); }
.sq-leaf.hit em { max-height: 16px; }
.sq-leaf.hit svg { background: var(--ink); stroke: var(--paper); }
.audit { display: flex; flex-direction: column; justify-content: center; gap: 14px; padding: 24px; font-size: 14.5px; }
.au-head { display: flex; justify-content: space-between; align-items: center; font-weight: 600; }
.au-state { display: inline-flex; align-items: center; gap: 8px; font: 400 12px var(--mono); color: var(--ink-3); }
.au-state em { font-style: normal; }
.au-state i { width: 7px; height: 7px; border-radius: 50%; background: var(--ok); }
.audit.scanning .au-state i { background: var(--accent); animation: pulse .9s ease-in-out infinite; }
.au-map { position: relative; display: grid; grid-template-columns: repeat(12, 1fr); gap: 4px; padding: 10px; border-radius: 10px; background: var(--card); border: 1px solid var(--rule); }
.au-map i { aspect-ratio: 1.6; border-radius: 3px; background: var(--fill-2); transition: background .35s ease, transform .35s var(--ease); }
.au-map i.c-ok { background: rgba(31, 157, 98, 0.35); }
.au-map i.c-warn { background: #E09B1A; }
.au-map i.c-crit { background: var(--red); animation: critpulse 1.6s ease-in-out infinite; }
.audit.scanning .au-map i { background: var(--fill-2); animation: none; }
.audit.scanning .au-map i.seen.c-ok { background: rgba(31, 157, 98, 0.35); }
.audit.scanning .au-map i.seen.c-warn { background: #E09B1A; transform: scale(1.15); }
.audit.scanning .au-map i.seen.c-crit { background: var(--red); transform: scale(1.2); }
.au-map::after { content: ""; position: absolute; top: 4px; bottom: 4px; left: 0; width: 2px; border-radius: 2px; background: var(--ink); opacity: 0; transform: translateX(var(--sx, 0px)); transition: transform .14s linear; }
.audit.scanning .au-map::after { opacity: 1; }
@keyframes critpulse { 50% { opacity: .55; } }
.au-rows { display: grid; gap: 8px; }
.audit .r-row { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-radius: 10px; background: var(--card); border: 1px solid var(--rule); }
.audit .r-row b { font-weight: 600; font-variant-numeric: tabular-nums; }
.audit .dot { position: relative; width: 9px; height: 9px; flex: none; }
.audit .dot::after { content: ""; position: absolute; inset: -5px; border-radius: 50%; border: 1.5px solid currentColor; opacity: 0; animation: ripple 2s ease-out infinite; }
.audit .crit { background: var(--red); color: var(--red); }
.audit .warn { background: #E09B1A; color: #E09B1A; } .audit .warn::after { animation-delay: .6s; }
.audit .ok { background: var(--ok); color: var(--ok); } .audit .ok::after { animation-delay: 1.2s; }
.au-cost svg { width: 16px; height: 16px; margin-left: auto; fill: none; stroke: var(--ok); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; animation: drop 1.6s ease-in-out infinite; }
@keyframes drop { 0%, 100% { transform: translateY(-2px); opacity: .6; } 50% { transform: translateY(3px); opacity: 1; } }
.r-cap { display: flex; justify-content: space-between; margin-bottom: 8px; font-size: 13px; color: var(--ink-3); }
.r-cap b { color: var(--ink); font-weight: 600; }
.au-bar { position: relative; height: 6px; border-radius: 3px; background: var(--fill-2); }
.au-bar i { display: block; width: 41%; height: 100%; border-radius: 3px; background: var(--ink); transition: width 1.4s var(--ease); }
.audit.scanning .au-bar i { width: 0; }
.au-bar s { position: absolute; left: 75%; top: -4px; bottom: -4px; width: 2px; border-radius: 1px; background: var(--ink-2); }

/* What you get: a bordered grid of terms that open on click */
.get { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: 72px; align-items: center; }
.get-copy .lede { margin-top: 18px; }
.get-copy .pill { margin-top: 28px; }
.get-grid { display: grid; grid-template-columns: 1fr 1fr; border: 1px solid var(--hair); border-radius: 16px; overflow: hidden; background: var(--sheet); }
.get-item { border-bottom: 1px solid var(--hair); transition: background .25s ease; }
.get-item:nth-child(odd) { border-right: 1px solid var(--hair); }
.get-item:nth-last-child(-n+2) { border-bottom: 0; }
.get-item:hover, .get-item.open { background: var(--card); }
.get-item button { display: flex; gap: 14px; align-items: flex-start; width: 100%; padding: 24px 24px 22px; border: 0; background: none; color: var(--ink); text-align: left; font: 400 16px/1.5 var(--display); cursor: pointer; }
.get-mk { flex: none; font: 400 13px/1.9 var(--mono); color: var(--ink-3); transition: color .25s ease; }
.get-mk i { display: inline-block; font-style: normal; transition: transform .35s var(--ease); }
.get-item:hover .get-mk, .get-item.open .get-mk { color: var(--ink); }
.get-item.open .get-mk i { transform: rotate(45deg); }
.get-d { display: grid; grid-template-rows: 0fr; padding: 0 24px 0 57px; font-family: var(--text); font-size: 13.5px; line-height: 1.6; color: var(--ink-2); transition: grid-template-rows .45s var(--ease), padding .45s var(--ease); }
.get-d span { overflow: hidden; }
.get-item.open .get-d { grid-template-rows: 1fr; padding-bottom: 22px; }

/* EIC */
.eic-card { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 44px; padding: 44px; border-radius: 16px; background: var(--sheet); border: 1px solid var(--rule); }
.eic-card .eic-badge { width: 130px; height: 130px; font-size: 24px; }
.eic-card .eu { animation: spin 80s linear infinite; }
.eic-card .eu i { width: 8px; height: 8px; margin: -4px; transform: rotate(var(--a)) translateY(-48px); }
.eic-copy h2 { max-width: 24ch; }
.eic-points { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin: 30px 0; padding-top: 22px; border-top: 1px solid var(--rule); }
.eic-points dt { font-size: 16px; font-weight: 600; }
.eic-points dd { margin-top: 6px; font-family: var(--text); font-size: 13.5px; line-height: 1.6; color: var(--ink-2); }

/* Stack and help */
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 64px; }
.st { margin-top: 30px; border-top: 1px solid var(--rule); }
.st-row { display: grid; grid-template-columns: 140px minmax(0, 1fr); gap: 16px; align-items: center; padding: 16px 0; border-bottom: 1px solid var(--rule); }
.st-row h3 { font-size: 15px; font-weight: 600; }
.st-row ul { display: flex; flex-wrap: wrap; gap: 6px; }
.st-row li { padding: 4px 9px; border-radius: 5px; background: var(--card); border: 1px solid var(--rule); font: 400 12px var(--mono); color: var(--ink-2); transition: border-color .2s ease, color .2s ease; }
.st-row li:hover { border-color: var(--ink); color: var(--ink); }
.help { display: grid; gap: 8px; margin-top: 30px; }
.help-row { display: grid; grid-template-columns: 40px minmax(0, 1fr) 20px; gap: 14px; align-items: center; padding: 14px 16px; border-radius: 10px; background: var(--card); border: 1px solid var(--rule); transition: border-color .2s ease, transform .35s var(--ease); }
.help-row:hover { border-color: var(--ink); transform: translateX(4px); }
.help-row > svg:first-child { width: 40px; height: 40px; padding: 9px; border-radius: 9px; background: var(--fill); fill: none; stroke: var(--ink); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.help-row strong { display: block; font-size: 16px; font-weight: 600; }
.help-row small { display: block; margin-top: 2px; font-family: var(--text); font-size: 13px; color: var(--ink-2); }
.help-row > svg:last-child { width: 18px; height: 18px; fill: none; stroke: var(--ink); stroke-width: 1.6; stroke-linecap: round; }

/* Twenty three products, on two moving lines */
.built-head { margin-top: 80px; margin-bottom: 22px; }
.built-head h3 { font-size: 24px; font-weight: 600; letter-spacing: -0.02em; }
.built-head p { margin-top: 4px; font-family: var(--text); font-size: 14.5px; color: var(--ink-2); }
.marquee { overflow: hidden; padding: 5px 0; -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent); mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent); }
.marquee + .marquee { margin-top: 8px; }
.mq-track { display: flex; gap: 10px; width: max-content; animation: mq var(--dur, 70s) linear infinite; }
.marquee.rev .mq-track { animation-direction: reverse; }
.marquee:hover .mq-track { animation-play-state: paused; }
@keyframes mq { to { transform: translateX(calc(-50% - 5px)); } }
.proj { display: inline-flex; align-items: center; gap: 10px; padding: 12px 18px; border-radius: 999px; background: var(--sheet); border: 1px solid var(--rule); white-space: nowrap; transition: border-color .2s ease; }
.proj strong { font-size: 15px; font-weight: 600; }
.proj span { font-family: var(--text); font-size: 13px; color: var(--ink-3); }
.proj svg { width: 14px; height: 14px; fill: none; stroke: var(--ink); stroke-width: 1.6; stroke-linecap: round; }
a.proj { border-color: var(--hair); }
a.proj:hover { border-color: var(--ink); }

/* ================= Case study pages ================= */
.crumbs ol { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 28px; font: 400 12.5px var(--mono); color: var(--ink-3); }
.crumbs li + li::before { content: "/"; margin-right: 6px; opacity: .6; }
.crumbs a:hover { color: var(--ink); }
.crumbs [aria-current] { color: var(--ink-2); }
.chero { padding-bottom: 48px; }
.chero h1 { font-size: clamp(34px, 3.9vw, 58px); }
.chero-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: 48px; align-items: start; }
.ctags { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 16px; }
.ctags .tag { margin: 0; }
.chero-lead { margin-top: 18px; max-width: 60ch; font-family: var(--text); font-size: 17px; line-height: 1.65; color: var(--ink-2); }
.chero .hero-cta { margin-top: 26px; }
.chero-art { position: relative; min-height: 400px; border-radius: 14px; overflow: hidden; background: var(--tint); box-shadow: inset 0 0 0 1px var(--fill); }
.chero-art canvas, .rcard-art canvas, .lrow-art canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.chero-art .widget { width: 70%; }
.cfacts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; margin-top: 48px; padding-top: 22px; border-top: 1px solid var(--rule); }
.cfacts dt { font: 400 12px var(--mono); color: var(--ink-3); }
.cfacts dd { margin-top: 6px; font-size: 16px; font-weight: 500; line-height: 1.35; }
.cm-band { padding: 44px 0; }
.cms { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 28px; }
.cm dt { font-size: clamp(24px, 2.4vw, 32px); font-weight: 600; letter-spacing: -0.03em; line-height: 1.05; font-variant-numeric: tabular-nums; }
.cm dd { margin-top: 8px; font-family: var(--text); font-size: 13px; line-height: 1.45; color: var(--ink-2); }
.clayout { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 72px; align-items: start; }
.toc { position: sticky; top: 100px; display: flex; flex-direction: column; font-size: 14.5px; }
.toc strong { margin-bottom: 10px; font: 400 12px var(--mono); color: var(--ink-3); }
.toc a { display: flex; align-items: center; gap: 10px; padding: 7px 0; color: var(--ink-3); transition: color .2s ease; }
.toc a i { flex: none; width: 8px; height: 9px; background: var(--mute); clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); transition: background .3s ease, transform .3s var(--ease); }
.toc a:hover, .toc a.on { color: var(--ink); }
.toc a.on i { background: var(--ink); transform: scale(1.3); }
.toc-bar { display: block; height: 3px; margin-top: 18px; border-radius: 3px; background: var(--fill-2); overflow: hidden; }
.toc-bar i { display: block; height: 100%; width: calc(var(--p, 0) * 100%); background: var(--ink); }
.carticle { min-width: 0; max-width: 780px; }
.cs-sec { scroll-margin-top: 100px; }
.cs-sec + .cs-sec { margin-top: 72px; }
.cs-sec > h2 { margin-bottom: 20px; font-size: 30px; font-weight: 600; letter-spacing: -0.025em; }
.cs-sec > p { font-family: var(--text); font-size: 16px; line-height: 1.75; color: var(--ink-2); }
.cs-sec > p + p { margin-top: 14px; }
.cs-sec .nlist { margin-top: 0; }
.tline { position: relative; }
.tline::before { content: ""; position: absolute; left: 19px; top: 12px; bottom: 24px; width: 2px; background: var(--rule); }
.tline li { position: relative; display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 18px; padding-bottom: 28px; }
.tl-hex i { display: grid; place-items: center; width: 40px; height: 46px; background: var(--mute); color: var(--ink); font: 500 13px var(--mono); font-style: normal; clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); transition: background .6s ease, color .6s ease; }
.tline li.in .tl-hex i { background: var(--ink); color: var(--paper); }
.tline h3 { margin-top: 10px; font-size: 18px; font-weight: 600; letter-spacing: -0.01em; }
.tline p { margin-top: 6px; font-family: var(--text); font-size: 15px; line-height: 1.7; color: var(--ink-2); }
.arch { display: flex; align-items: stretch; padding: 18px; border-radius: 12px; background: var(--paper-2); border: 1px solid var(--rule); overflow-x: auto; }
.arch-col { flex: 1; min-width: 132px; display: flex; flex-direction: column; gap: 8px; }
.arch-col em { margin-bottom: 2px; font: 400 11px var(--mono); font-style: normal; color: var(--ink-3); }
.arch-node { padding: 10px 12px; border-radius: 8px; background: var(--card); border: 1px solid var(--rule); transition: border-color .25s ease, transform .3s var(--ease), box-shadow .3s ease; }
.arch-node b { display: block; font-size: 14px; font-weight: 600; }
.arch-node small { display: block; margin-top: 2px; font-family: var(--text); font-size: 12px; color: var(--ink-3); }
.arch-node.hl { border-color: var(--ink); box-shadow: inset 3px 0 0 var(--ink); }
.arch-node:hover, .arch-node:focus { border-color: var(--ink); transform: translateY(-2px); box-shadow: 0 12px 22px -16px rgba(11, 19, 34, 0.5); outline: none; }
.arch-link { position: relative; flex: 0 0 34px; align-self: center; height: 6px; overflow: hidden; }
.arch-link::before { content: ""; position: absolute; left: 0; right: 0; top: 2px; height: 2px; background: var(--hair); }
.arch-link i { position: absolute; top: 0; left: -8px; width: 6px; height: 6px; border-radius: 50%; background: var(--ink); animation: packetx 1.8s linear infinite; }
.arch-link i:nth-child(2) { animation-delay: .6s; } .arch-link i:nth-child(3) { animation-delay: 1.2s; }
@keyframes packetx { to { left: 100%; } }
.arch-note { display: flex; align-items: baseline; gap: 10px; margin-top: 14px; font-family: var(--text); font-size: 13.5px; line-height: 1.6; color: var(--ink-2); }
.arch-note .hexdot { flex: none; transform: translateY(1px); }
.ctable-wrap { overflow-x: auto; border-radius: 12px; border: 1px solid var(--rule); background: var(--sheet); }
.ctable { width: 100%; border-collapse: collapse; font-family: var(--text); font-size: 14px; line-height: 1.5; }
.ctable th { padding: 12px 16px; text-align: left; font: 400 12px var(--mono); color: var(--ink-3); background: var(--paper-2); border-bottom: 1px solid var(--rule); }
.ctable td { padding: 14px 16px; vertical-align: top; color: var(--ink-2); border-bottom: 1px solid var(--rule); transition: background .2s ease; }
.ctable td:first-child { color: var(--ink); font-weight: 600; }
.ctable tr:last-child td { border-bottom: 0; }
.ctable tbody tr:hover td { background: var(--fill); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chips li { padding: 6px 12px; border-radius: 30px; background: var(--sheet); border: 1px solid var(--rule); font: 400 13px var(--mono); color: var(--ink-2); }
.chips-lg li { padding: 8px 14px; font-size: 14px; background: var(--card); }
.proves { display: grid; gap: 14px; }
.proves li { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 12px; align-items: start; font-family: var(--text); font-size: 15.5px; line-height: 1.65; color: var(--ink-2); }
.proves .ring, .feat-card .ring { border: 0; background: var(--ok); margin-top: 2px; }
.proves .ring svg, .feat-card .ring svg { opacity: 1; transform: none; }
.callout { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-top: 30px; padding: 22px 24px; border-radius: 12px; background: var(--sheet); border: 1px solid var(--rule); }
.callout p { max-width: 52ch; font-family: var(--text); font-size: 15px; line-height: 1.6; color: var(--ink-2); }
.callout .pill { flex: none; }
.rel { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 36px; }
.rcard { display: flex; flex-direction: column; border-radius: 12px; overflow: hidden; background: var(--sheet); border: 1px solid var(--rule); transition: transform .4s var(--ease); }
.rcard:hover { transform: translateY(-4px); }
.rcard-art { position: relative; display: block; height: 210px; background: var(--tint); }
.rcard .widget { width: 80%; }
.rcard .w-value { font-size: 30px; }
.rcard-body { display: flex; flex-direction: column; gap: 8px; padding: 16px 18px 20px; }
.rcard-body strong { font-size: 16px; font-weight: 600; line-height: 1.3; }
.rcard-body em { font: 400 12px var(--mono); font-style: normal; color: var(--ink-3); }
.filters + .ledger, .ledger { margin-top: 28px; }
.ledger { border-top: 1px solid var(--rule); }
.lrow { display: grid; grid-template-columns: 88px minmax(0, 190px) minmax(0, 1fr) 28px; gap: 24px; align-items: center; padding: 22px 12px; margin: 0 -12px; border-bottom: 1px solid var(--rule); border-radius: 8px; transition: background .2s ease; }
.lrow:hover { background: var(--sheet); }
.lrow[hidden] { display: none; }
.lrow.show { animation: cardIn .6s var(--ease) both; }
.lrow-art { position: relative; width: 88px; height: 88px; border-radius: 10px; overflow: hidden; background: var(--tint); }
.lrow-metric strong { display: block; font-size: 26px; font-weight: 600; letter-spacing: -0.02em; line-height: 1.1; }
.lrow-metric small { display: block; margin-top: 4px; font-family: var(--text); font-size: 12.5px; color: var(--ink-3); }
.lrow-body h2, .lrow-body h3 { font-size: 19px; font-weight: 600; letter-spacing: -0.015em; line-height: 1.3; }
.lrow-body p { margin-top: 6px; font-family: var(--text); font-size: 14px; line-height: 1.6; color: var(--ink-2); }
.lrow-body em { display: block; margin-top: 8px; font: 400 12px var(--mono); font-style: normal; color: var(--ink-3); }
.lrow:hover .work-go svg { transform: translate(2px, -2px); }

/* ================= Tool pages ================= */
.thero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; align-items: center; }
.thero h1 { font-size: clamp(34px, 3.9vw, 56px); }
.thero-shot { aspect-ratio: 3 / 2; border-radius: 16px; overflow: hidden; box-shadow: 0 40px 80px -45px rgba(11, 19, 34, 0.55); }
.thero-shot img { width: 100%; height: 100%; object-fit: cover; animation: drift-img 22s ease-in-out infinite alternate; }
.status-line { margin-top: 20px; }
.status-line .status { position: static; background: var(--sheet); border: 1px solid var(--rule); }
.feat-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 40px; }
.feat-card { padding: 22px; border-radius: 10px; background: var(--sheet); border: 1px solid var(--rule); }
.feat-card .num { padding: 5px 7px; background: var(--fill); }
.feat-card h3 { margin-top: 16px; font-size: 19px; font-weight: 600; letter-spacing: -0.015em; }
.feat-card > p { margin-top: 6px; font-family: var(--text); font-size: 14px; line-height: 1.6; color: var(--ink-2); }
.feat-card ul { display: grid; gap: 10px; margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--rule); }
.feat-card li { display: flex; align-items: center; gap: 10px; font-family: var(--text); font-size: 13.5px; }
.feat-card li .ring { flex: none; width: 18px; height: 18px; }
.feat-card li .ring svg { width: 11px; height: 11px; }
.how-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 40px; }
.how-card { padding: 22px; border-radius: 10px; background: var(--sheet); border: 1px solid var(--rule); }
.how-card h3 { margin-top: 12px; font-size: 18px; font-weight: 600; }
.how-card p { margin-top: 6px; font-family: var(--text); font-size: 14.5px; line-height: 1.65; color: var(--ink-2); }
.pgrid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.tcard-link { transition: transform .4s var(--ease); }
.tcard-link:hover { transform: translateY(-4px); }
.tcard-link .pcard-art { height: 240px; }

/* Responsive */
@media (max-width: 1000px) {
  .hero-grid { grid-template-columns: 1fr; gap: 24px; }
  .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tiles, .plans, .whys { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .people { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .foot-top { grid-template-columns: 1fr; }
  .finale { grid-template-columns: 1fr; }
  .feat { grid-template-columns: 1fr; gap: 44px; }
  .feat.flip .feat-copy { order: 0; }
  .pipe-row { grid-template-columns: repeat(5, 250px); overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 10px; scrollbar-width: none; }
  .pipe-row::-webkit-scrollbar { display: none; }
  .stage { scroll-snap-align: start; }
  .pipe-track { display: none; }
  .dash, .layers { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .run-head { grid-template-columns: 1fr; gap: 0; }
  .run-head .lede { margin-top: 14px; }
  .nlist-row { grid-template-columns: 1fr; }
  .flow { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 36px; }
  .flow::before, .flow::after { display: none; }
  .seam-layer { grid-template-columns: 180px minmax(0, 1fr) 300px; }
  .code { font-size: 11px; }
  .way { grid-template-columns: 40px minmax(0, 1fr) auto 24px; }
  .way > span:not(.num) { display: none; }
  .svc { grid-template-columns: 1fr; }
  .svc-stage { position: relative; top: auto; order: -1; min-height: 520px; }
  .trio, .feat-cards, .rel, .pgrid-3 { grid-template-columns: 1fr; }
  .plan-panel { grid-template-columns: 1fr; gap: 28px; }
  .split, .get { grid-template-columns: 1fr; gap: 56px; }
  .cf-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .eic-card { grid-template-columns: 1fr; gap: 24px; padding: 32px; }
  .eic-points { grid-template-columns: 1fr; }
  .chero-grid, .thero { grid-template-columns: 1fr; gap: 36px; }
  .chero-art { min-height: 300px; }
  .clayout { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .toc { display: none; }
  .readout, .cfacts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lrow { grid-template-columns: 72px minmax(0, 1fr) 24px; }
  .lrow-art { width: 72px; height: 72px; }
  .lrow-body { grid-column: 1 / -1; }
}
@media (max-width: 760px) {
  .seam { height: 520px; }
  .seam-layer { grid-template-columns: 1fr; }
  .seam-layer .sd-side { display: none; }
  .seam-code .sd-canvas { display: none; }
  .seam-code .sc-ed { display: grid; align-content: center; padding: 24px 22px 24px 26px; background: #0B1322; }
  .code { font-size: 11.5px; }
  .pcard-wide { flex-direction: column; }
  .pcard-wide .pcard-art { flex: none; min-height: 320px; }
  .pcard-wide .pcard-body { padding: 22px 24px 24px; }
  .pcard-wide h3 { font-size: 34px; }
}
@media (max-width: 820px) {
  .nav { gap: 12px; padding: 0 16px; }
  .nav-links { display: none; position: absolute; left: 12px; right: 12px; top: 64px; flex-direction: column; gap: 0; padding: 8px; border-radius: 14px; background: var(--sheet); border: 1px solid var(--rule); box-shadow: 0 20px 50px -20px rgba(11, 19, 34, 0.35); }
  .nav.open .nav-links { display: flex; }
  .nav-links a { padding: 12px 14px; font-size: 17px; opacity: 1; }
  .nav-cta { margin-left: 0; }
  .theme-toggle { margin: 0 0 0 auto; }
  .nav-toggle { display: inline-flex; }
}
@media (max-width: 640px) {
  .wrap { padding: 0 16px; }
  .sec { padding: 80px 0; }
  .hero { padding-top: 112px; }
  .rail { margin-top: 32px; }
  .rail-hint { display: none; }
  .mcard { width: 280px; }
  .mcard-art { height: 290px; }
  .widget { width: 88%; padding: 12px 13px 13px; }
  .w-value { font-size: 32px; }
  .w-rows li { font-size: 11px; gap: 7px; }
  .steps, .tiles, .plans, .whys { grid-template-columns: 1fr; }
  .tile { min-height: 0; }
  .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .people { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 10px; }
  .work-row { grid-template-columns: 1fr auto; gap: 6px 16px; padding: 18px 8px; margin: 0 -8px; }
  .work-what { grid-column: 1 / -1; grid-row: 2; }
  .work-go { display: none; }
  .work-fig { text-align: right; }
  .finale { padding: 16px; min-height: 0; }
  .stack-card { height: 70vh; top: calc(80px + var(--i) * 12px); margin-bottom: 28px; }
  .stack-copy { left: 12px; right: 12px; bottom: 12px; width: auto; padding: 18px; }
  .stack-copy p { font-size: 13.5px; }
  .eic { align-items: flex-start; }
  .foot-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .foot-bottom { flex-direction: column; }
  .nav-cta { padding: 8px 12px 8px 16px; font-size: 14px; }
  .typed-wrap { margin-top: 44px; }
  .typed { font-size: 23px; min-height: 2.5em; }
  .phero .wrap-wide { margin-top: 40px; }
  .pipe-row { grid-template-columns: repeat(5, 82%); }
  .dash, .layers, .pgrid { grid-template-columns: 1fr; }
  .themer-body { grid-template-columns: 1fr; }
  .themes { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .theme { grid-template-columns: 1fr; padding: 10px; }
  .theme .sw { grid-row: auto; margin-bottom: 6px; }
  .theme em { display: none; }
  .vd-panes { grid-template-columns: 1fr; }
  .flow { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .plans-2 { grid-template-columns: 1fr; }
  .crosslink { grid-template-columns: 1fr; padding: 20px; }
  .crosslink-go { display: none; }
  .board { height: 470px; }
  .pcard-art { height: 240px; }
  .pcard h3 { font-size: 26px; }
  .pcard-m dt { font-size: 18px; }
  .counts dt { font-size: 28px; }
  .evlog li { grid-template-columns: 1fr; gap: 2px; }
  .log { height: 340px; }
  .way b { font-size: 17px; }
  .way { grid-template-columns: 32px minmax(0, 1fr) 20px; row-gap: 2px; }
  .way em { grid-column: 2; grid-row: 2; font-weight: 400; font-family: var(--text); font-size: 13.5px; color: var(--ink-2); }
  .way svg { grid-column: 3; grid-row: 1 / span 2; }
  .way .num { grid-row: 1 / span 2; }
  .theme-toggle { width: 36px; height: 36px; }
  .cf-row { grid-template-columns: 1fr; }
  .startup { flex-direction: column; align-items: flex-start; border-radius: 16px; padding: 18px; }
  .svc-stage { min-height: 600px; }
  .svc-view { padding: 18px; gap: 16px; }
  .svc-item { padding: 18px 8px; }
  .sv-scan, .sv-pay, .sv-radar { grid-template-columns: 1fr; }
  .sv-doc, .ring-key, .sv-tags { display: none; }
  .sv-ring { width: 150px; margin: 0 auto; }
  .sv-feed { min-height: 0; }
  .sv-feed li:nth-child(n+4) { display: none; }
  .sv-scope { width: 170px; margin: 0 auto; }
  .ev-bars { height: 60px; }
  .sv-pipe span { padding: 6px 7px; font-size: 10.5px; }
  .sv-pipe span:nth-of-type(2), .sv-pipe i:nth-of-type(2) { display: none; }
  .seg { border-radius: 18px; }
  .seg-thumb { border-radius: 14px; }
  .seg .tab { min-height: 62px; padding: 8px 6px; border-radius: 14px; font-size: 14px; }
  .seg .tab small { font-size: 11px; }
  .plan-panel { padding: 18px; }
  .pl-art { min-height: 330px; }
  .sq-node { gap: 5px; padding: 5px 8px 5px 5px; }
  .sq-node svg, .sq-node img { width: 22px; height: 22px; padding: 4px; }
  .sq-node b { font-size: 11.5px; }
  .get-grid { grid-template-columns: 1fr; }
  .get-item:nth-child(odd) { border-right: 0; }
  .get-item:nth-last-child(2) { border-bottom: 1px solid var(--hair); }
  .get-item button { padding: 18px 18px 16px; font-size: 15px; }
  .ct-item { padding: 18px 18px 16px; font-size: 15px; }
  .cform { padding: 18px; }
  .get-d { padding-left: 51px; }
  .eic-card { padding: 22px; }
  .eic-card .eic-badge { width: 96px; height: 96px; font-size: 19px; }
  .eic-card .eu i { transform: rotate(var(--a)) translateY(-35px); }
  .st-row { grid-template-columns: 1fr; gap: 8px; }
  .help-row { grid-template-columns: 34px minmax(0, 1fr) 16px; }
  .help-row > svg:first-child { width: 34px; height: 34px; padding: 7px; }
  .readout dt { font-size: 28px; }
  .cms { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .callout { flex-direction: column; align-items: flex-start; }
  .how-grid { grid-template-columns: 1fr; }
  .chero-art { min-height: 260px; }
  .lrow { gap: 14px; padding: 18px 8px; margin: 0 -8px; }
  .built-head { margin-top: 56px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .ink-in, .finale-sky img, .w-rows li.run i, .stack-img img, .art-bars i, .art-own i, .art-own span::after { animation: none; }
  .stack-card { position: relative; top: auto; transform: none; }
  .typed-caret, .spark path, .cpu i, .stream, .p95 span:last-child i, .up i, .pok-cards img, .pcard-art > img, .status.dev i, .dot.run, .wk li.b::before, .stage.run .state i, .checks li.run .ring { animation: none; }
  .spark path { stroke-dashoffset: 0; }
  .cpu i { width: 24%; background: var(--ink); }
  .mq-track, .pl-photo img, .thero-shot img, .arch-link i, .eic-card .eu, .sq-e, .sv-scanline, .tv-design i, .au-map i, .audit .dot::after, .au-cost svg { animation: none; }
  [data-reveal] { opacity: 1; transform: none; }
  body { transition: none; }
}


/* How we build, Ship: release window drawn in the same ink and hexagon language as the pipeline above */
.rl-body { padding: 22px 22px 24px; }
.rl-h { font-size: 20px; font-weight: 600; letter-spacing: -0.02em; }
.rl-h span { margin-left: 6px; font: 400 12px var(--mono); letter-spacing: 0; color: var(--ink-3); }
.rl-steps { margin-top: 16px; }
.rl-steps li { position: relative; display: grid; grid-template-columns: 14px minmax(0, 1fr) auto; gap: 16px; align-items: start; padding: 0 0 18px; }
.rl-steps li:last-child { padding-bottom: 0; }
.rl-steps li::before, .rl-steps li::after { content: ""; position: absolute; left: 6px; top: 20px; bottom: 2px; width: 2px; border-radius: 2px; background: var(--rule); }
.rl-steps li::after { background: var(--ink); transform: scaleY(0); transform-origin: top; transition: transform .9s var(--ease); }
.rl-steps li.done::after { transform: none; }
.rl-steps li:last-child::before, .rl-steps li:last-child::after { display: none; }
.rl-steps .hx { width: 14px; height: 16px; margin-top: 2px; background: var(--mute); clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); transition: background .4s ease, transform .4s var(--ease); }
.rl-steps li.run .hx { background: var(--amber); animation: pulse 1.2s ease-in-out infinite; }
.rl-steps li.done .hx { background: var(--ink); }
.rl-steps b { display: block; font-size: 15px; font-weight: 600; letter-spacing: -0.01em; line-height: 1.3; color: var(--ink-3); transition: color .4s ease; }
.rl-steps li.run b, .rl-steps li.done b { color: var(--ink); }
.rl-steps small { display: block; margin-top: 2px; font-family: var(--text); font-size: 12.5px; line-height: 1.45; color: var(--ink-3); }
.rl-steps .rl-st { font: 400 11.5px var(--mono); font-style: normal; white-space: nowrap; padding-top: 2px; color: var(--ink-3); }
.rl-steps .rl-st span { display: none; }
.rl-steps .rl-st .q { display: inline; }
.rl-steps li.run .rl-st .q, .rl-steps li.done .rl-st .q { display: none; }
.rl-steps li.run .rl-st .r { display: inline; color: var(--amber-ink); }
.rl-steps li.done .rl-st .f { display: inline; color: var(--ink); }
.shift { position: relative; display: block; width: min(100%, 180px); height: 4px; margin-top: 9px; border-radius: 4px; background: var(--fill-2); overflow: hidden; }
.shift i { position: absolute; left: 0; top: 0; bottom: 0; width: 0; border-radius: 4px; background: var(--ink); transition: width 1.2s linear; }
.rl-steps li.run .shift i, .rl-steps li.done .shift i { width: 100%; }
.rl-total { display: grid; grid-template-columns: 1fr 1fr; margin-top: 20px; border-radius: 8px; background: var(--ink); color: var(--paper); opacity: .08; transform: translateY(6px); transition: opacity .6s ease, transform .6s var(--ease); }
.rl-total > div { padding: 13px 16px; }
.rl-total > div + div { border-left: 1px solid color-mix(in srgb, var(--paper) 16%, transparent); }
.rl-total span { display: block; font: 400 11px var(--mono); color: var(--ink-inv-2); }
.rl-total b { display: block; margin-top: 2px; font-size: 15px; font-weight: 600; }
.release.complete .rl-total { opacity: 1; transform: none; }
.release.complete .chip-swap { background: var(--ink); color: var(--paper); }
@media (max-width: 560px) { .rl-steps li { grid-template-columns: 14px minmax(0, 1fr); gap: 3px 16px; } .rl-steps .rl-st { grid-column: 2; padding-top: 0; } .rl-body { padding: 18px 16px 20px; } }
@media (prefers-reduced-motion: reduce) { .rl-steps li.run .hx { animation: none; } }

/* Pick the way in that fits: tabs and panel drawn as one bordered table, in the hairline grid style of the contact details */
.seg { counter-reset: way; margin-top: 40px; padding: 0; border: 1px solid var(--hair); border-bottom: 0; border-radius: 8px 8px 0 0; background: var(--paper-2); overflow: hidden; }
.seg-thumb { display: none; }
.seg .tab { align-items: flex-start; justify-content: flex-start; text-align: left; gap: 4px; min-height: 0; padding: 20px 24px 18px; border-radius: 0; font-size: 17px; letter-spacing: -0.015em; box-shadow: inset 0 -1px 0 var(--hair); transition: color .25s ease, background .25s ease; }
.seg .tab + .tab { border-left: 1px solid var(--hair); }
.seg .tab::before { content: ""; position: absolute; left: -1px; right: 0; top: 0; height: 2px; background: var(--ink); transform: scaleX(0); transform-origin: left; transition: transform .45s var(--ease); }
.seg .tab::after { counter-increment: way; content: "0" counter(way); position: absolute; right: 22px; top: 21px; font: 400 12px var(--mono); letter-spacing: 0; color: var(--ink-3); }
.seg .tab:hover { background: color-mix(in srgb, var(--sheet) 55%, transparent); }
.seg .tab[aria-selected="true"] { background: var(--sheet); box-shadow: none; }
.seg .tab[aria-selected="true"]::before { transform: none; }
.seg .tab small { font-size: 12.5px; letter-spacing: 0; }
.plan-panels { margin-top: 0; }
.plan-panel { gap: 0; padding: 0; border: 1px solid var(--hair); border-top: 0; border-radius: 0 0 8px 8px; overflow: hidden; }
.pl-copy { padding: 36px 32px 32px; }
.pl-art { min-height: 460px; border: 0; border-left: 1px solid var(--hair); border-radius: 0; }
.terms { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 26px; border-top: 1px solid var(--hair); border-bottom: 1px solid var(--hair); }
.terms div { flex-direction: column; justify-content: flex-start; gap: 4px; padding: 14px 16px 14px 0; border-bottom: 0; }
.terms div + div { padding-left: 16px; border-left: 1px solid var(--hair); }
.terms dt { font: 400 11.5px var(--mono); }
.terms dd { text-align: left; font-size: 14.5px; line-height: 1.4; }
.pl-copy .plan-price { margin-top: auto; padding-top: 26px; }
.audit .r-row { border-radius: 6px; }
@media (max-width: 1000px) { .plan-panel { gap: 0; } .pl-art { border-left: 0; border-top: 1px solid var(--hair); min-height: 360px; } }
@media (max-width: 640px) {
  .seg { border-radius: 8px 8px 0 0; }
  .seg .tab { padding: 14px 12px 12px; border-radius: 0; font-size: 14px; }
  .seg .tab::after { display: none; }
  .seg .tab small { font-size: 11px; }
  .plan-panel { padding: 0; }
  .pl-copy { padding: 22px 18px; }
  .terms { grid-template-columns: 1fr; }
  .terms div { flex-direction: row; justify-content: space-between; align-items: baseline; padding: 11px 0; }
  .terms div + div { padding-left: 0; border-left: 0; border-top: 1px solid var(--hair); }
  .terms dd { text-align: right; }
}

/* One team, one invoice: square highlight, no side stroke */
.svc-item { border-radius: 0; }
.svc-item.on { box-shadow: none; }

/* Hover rows (case list, ways in, project list, commit log): square highlight that stays inside the divider lines */
.work-row, .way, .lrow, .log li { margin: 0; border-radius: 0; }
@media (max-width: 640px) { .work-row, .lrow { margin: 0; } }


/* Team presence: people shown by photo, name and a live status instead of arrow cursors */
.cursor.person { display: flex; align-items: center; gap: 9px; padding: 6px 12px 6px 6px; border-radius: 8px; background: var(--card); border: 1px solid var(--rule); box-shadow: 0 16px 30px -18px rgba(11, 19, 34, 0.55); }
.cursor.person > img { flex: none; width: 30px; height: 30px; border-radius: 50%; object-fit: cover; object-position: top; box-shadow: 0 0 0 2px var(--card), 0 0 0 3.5px var(--c); }
.person .p-txt { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.person .p-txt b { display: flex; align-items: baseline; gap: 6px; font: 600 12.5px/1.2 var(--display); color: var(--ink); white-space: nowrap; }
.person .p-txt em { font: 400 10.5px var(--mono); font-style: normal; color: var(--ink-3); }
.person .cur-say { position: static; padding: 0; border-radius: 0; background: none; box-shadow: none; font: 400 12px/1.35 var(--text); color: var(--ink-2); white-space: nowrap; opacity: 1; transform: none; transition: none; }
.person .p-time { align-self: flex-start; margin-left: 4px; font: 400 10.5px var(--mono); color: var(--ink-3); }
.person.fresh .cur-say { animation: status-in .5s var(--ease) both; }
.person.fresh .p-time { color: var(--ink); }
@keyframes status-in { from { opacity: 0; transform: translateY(4px); } }
.tv-cur { display: inline-flex; align-items: center; gap: 5px; width: auto; height: auto; padding: 2px 7px 2px 2px; border-radius: 6px; background: var(--card); border: 1px solid var(--rule); box-shadow: 0 8px 16px -10px rgba(11, 19, 34, 0.5); white-space: nowrap; }
.tv-cur::before { display: none; }
.tv-cur img { width: 18px; height: 18px; border-radius: 50%; object-fit: cover; object-position: top; }
.tv-cur b { font: 600 10.5px var(--display); color: var(--ink); }
.tv-cur em { font: 400 10px var(--mono); font-style: normal; color: var(--ink-3); }
@media (prefers-reduced-motion: reduce) { .person.fresh .cur-say { animation: none; } }

/* Contact sheet: one squared table in the page's ink, hairline and hexagon language */
.ct-sheet { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); border: 1px solid var(--hair); border-radius: 8px; overflow: hidden; background: var(--sheet); }
.ct-top { grid-column: 1 / -1; display: flex; align-items: center; gap: 14px; padding: 16px 20px; background: var(--ink); color: var(--paper); }
.ct-faces { display: flex; flex: none; }
.ct-faces img { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; object-position: top; border: 2px solid var(--ink); }
.ct-faces img + img { margin-left: -10px; }
.ct-who { display: flex; flex-direction: column; min-width: 0; }
.ct-who b { font-size: 15px; font-weight: 600; letter-spacing: -0.01em; }
.ct-who small { font: 400 11.5px var(--mono); color: var(--ink-inv-2); }
.ct-clock { display: grid; grid-template-columns: auto auto; column-gap: 8px; align-items: baseline; margin-left: auto; padding-left: 16px; border-left: 1px solid color-mix(in srgb, var(--paper) 16%, transparent); text-align: right; }
.ct-clock b { grid-column: 1 / -1; font: 400 11px var(--mono); color: var(--ink-inv-2); font-weight: 400; }
.ct-clock time { font-size: 22px; font-weight: 600; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.ct-clock em { font: 400 11px var(--mono); font-style: normal; color: var(--ink-inv-2); }
.ct-clock.open em::before { content: ""; display: inline-block; width: 8px; height: 9px; margin-right: 5px; background: var(--amber); clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); animation: pulse 1.6s ease-in-out infinite; }
.ct-cell { position: relative; display: flex; flex-direction: column; gap: 4px; min-width: 0; padding: 18px 20px 20px; border-top: 1px solid var(--hair); color: var(--ink); transition: background .25s ease; }
.ct-cell.w3 { grid-column: span 3; }
.ct-cell.w2 { grid-column: span 2; }
.ct-cell.w3:nth-child(3), .ct-cell.w2:nth-child(5), .ct-cell.w2:nth-child(6), .ct-cell.w2:nth-child(8), .ct-cell.w2:nth-child(9) { border-left: 1px solid var(--hair); }
.ct-k { display: flex; align-items: center; gap: 7px; margin-bottom: 4px; font: 400 11.5px var(--mono); color: var(--ink-3); }
.ct-k i { width: 9px; height: 10px; background: var(--mute); clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); transition: background .25s ease; }
.ct-cell b { font-size: 16px; font-weight: 600; letter-spacing: -0.01em; line-height: 1.3; overflow-wrap: anywhere; }
.ct-cell small { font-family: var(--text); font-size: 12.5px; line-height: 1.45; color: var(--ink-3); }
.ct-cell.price b { font-size: 28px; letter-spacing: -0.03em; line-height: 1.05; font-variant-numeric: tabular-nums; }
.ct-cell:hover { background: var(--card); }
.ct-cell:hover .ct-k i { background: var(--ink); }
.ct-go { position: absolute; right: 16px; top: 18px; width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; transition: transform .25s var(--ease); }
a.ct-cell:hover .ct-go { transform: translate(2px, -2px); }
@media (max-width: 640px) {
  .ct-sheet { grid-template-columns: 1fr 1fr; }
  .ct-top { flex-wrap: wrap; padding: 14px 16px; }
  .ct-clock { margin-left: 0; padding-left: 0; border-left: 0; text-align: left; width: 100%; }
  .ct-cell, .ct-cell.w2, .ct-cell.w3 { grid-column: span 2; border-left: 0 !important; padding: 14px 16px 16px; }
  .ct-cell.price { grid-column: span 1; }
  .ct-cell.price:nth-child(5) { border-left: 1px solid var(--hair) !important; }
  .ct-cell.price:nth-child(6) { grid-column: span 2; }
  .ct-cell.price b { font-size: 24px; }
}
@media (prefers-reduced-motion: reduce) { .ct-clock.open em::before { animation: none; } }
.ct-clock em { white-space: nowrap; }
@media (max-width: 640px) {
  .ct-who { flex: 1; }
  .ct-clock { display: flex; align-items: baseline; gap: 10px; padding-top: 10px; border-top: 1px solid color-mix(in srgb, var(--paper) 16%, transparent); }
  .ct-clock b { font-size: 11px; }
  .ct-clock time { font-size: 18px; }
}

/* Projects board: process views that appear on a card while someone works on it */
.bcard-art .proc { position: absolute; inset: 10px 10px 10px 10px; z-index: 2; display: flex; flex-direction: column; gap: 6px; padding: 8px 10px 10px; border-radius: 6px; background: var(--card); border: 1px solid var(--rule); box-shadow: 0 14px 26px -18px rgba(11, 19, 34, 0.55); font: 400 10.5px/1.35 var(--text); color: var(--ink-2); opacity: 0; transform: translateY(8px) scale(.98); transition: opacity .6s ease, transform .7s var(--ease); overflow: hidden; }
.bcard-art .proc.in { opacity: 1; transform: none; }
.bcard-art .proc.out { opacity: 0; transform: translateY(-6px) scale(.98); }
.pr-bar { display: flex; align-items: center; gap: 6px; font: 400 10px var(--mono); color: var(--ink-3); white-space: nowrap; }
.pr-bar i { width: 7px; height: 8px; flex: none; background: var(--b, var(--ink)); clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); }
.proc-design .pd-frame { position: relative; flex: 1; display: grid; grid-template-columns: 1fr 2fr; grid-template-rows: 10px 1fr 1fr; gap: 4px; }
.pd-frame i { border-radius: 3px; background: var(--fill-2); }
.pd-frame .a { grid-column: 1 / 3; }
.pd-frame .b { grid-row: 2 / 4; }
.pd-frame .c { background: color-mix(in srgb, var(--b, var(--ink)) 22%, transparent); }
.pd-sel { position: absolute; right: -2px; top: 12px; width: calc(66% + 2px); height: calc(50% - 6px); border: 1.5px solid var(--b, var(--ink)); border-radius: 3px; animation: pd-hop 4s var(--ease) infinite; }
.pd-sel em { position: absolute; left: -1px; top: -15px; padding: 1px 5px; border-radius: 2px; background: var(--b, var(--ink)); color: #fff; font: 500 9px var(--mono); font-style: normal; white-space: nowrap; }
@keyframes pd-hop { 0%, 40% { transform: none; } 50%, 90% { transform: translateY(calc(100% + 4px)); } }
.pd-sw { display: flex; gap: 4px; }
.pd-sw i { width: 14px; height: 8px; border-radius: 2px; background: var(--b, var(--ink)); }
.pd-sw i:nth-child(2) { opacity: .6; } .pd-sw i:nth-child(3) { opacity: .3; } .pd-sw i:nth-child(4) { background: var(--ink); opacity: .85; }
.proc-code, .proc-term { background: #0B1322; border-color: #0B1322; color: #C9D1E0; }
.proc-code .pr-bar, .proc-term .pr-bar { color: #6E7B93; }
.proc code { display: block; font: 400 10.5px/1.55 var(--code); white-space: nowrap; overflow: hidden; }
.proc-code b { font-weight: 400; color: #82AAFF; } .proc-code em { font-style: normal; color: #C792EA; } .proc-code s { text-decoration: none; color: #C3E88D; }
.proc-term s { text-decoration: none; color: #6E7B93; } .proc-term em { font-style: normal; color: var(--b, #34C27F); filter: brightness(1.35); }
.proc u { display: inline-block; width: 6px; height: 11px; margin-left: 3px; vertical-align: -2px; background: #82AAFF; text-decoration: none; animation: caret 1s steps(1) infinite; }
.proc-qa .pq { display: flex; align-items: center; gap: 7px; padding: 4px 0; border-top: 1px solid var(--rule); color: var(--ink); white-space: nowrap; }
.proc-qa .pq i { width: 10px; height: 11px; flex: none; background: var(--ink); clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); }
.proc-qa .pq em { margin-left: auto; font: 400 9.5px var(--mono); font-style: normal; color: var(--ink-3); }
.proc-qa .pq.run i { background: var(--amber); animation: pulse 1.2s ease-in-out infinite; }
.proc-qa .pq.run em { color: var(--amber-ink); }
.bcard-art .proc-mobile { flex-direction: row; align-items: center; gap: 12px; }
.pm-phone { display: flex; flex-direction: column; gap: 4px; flex: none; width: 46px; height: 92px; padding: 10px 6px; border: 2px solid var(--ink); border-radius: 9px; }
.pm-phone i { height: 9px; border-radius: 2px; background: var(--fill-2); }
.pm-phone i:first-child { height: 22px; background: var(--b, var(--ink)); }
.pm-txt { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.pm-txt b { font: 600 12px var(--display); color: var(--ink); white-space: nowrap; }
.pm-txt span { font: 400 10px var(--mono); color: var(--ink-3); }
.pm-bar { display: block; width: 100px; height: 4px; margin-top: 4px; border-radius: 4px; background: var(--fill-2); overflow: hidden; }
.pm-bar i { display: block; height: 100%; width: 30%; background: var(--b, var(--ink)); animation: pm-up 5s var(--ease) infinite; }
@keyframes pm-up { 0% { width: 8%; } 70%, 100% { width: 100%; } }
.bcard.has-proc .pok-cards { opacity: .25; transition: opacity .6s ease; }

/* Activity: fewer, calmer rows in each product's own colour */
.ev2 .log { height: auto; padding: 4px 18px 8px; -webkit-mask-image: none; mask-image: none; }
.ev2 .evlog li { grid-template-columns: 14px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 14px 0; }
.ev2 .evlog li:last-child { border-bottom: 0; }
.ev2 .ev-hx { width: 12px; height: 14px; background: var(--c); clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); }
[data-theme="dark"] .ev2 .ev-hx { filter: brightness(1.3); }
[data-theme="dark"] .ev2 li[style*="#000000"] .ev-hx { background: var(--ink); }
.ev2 .evlog li > span { display: flex; flex-direction: column; gap: 1px; white-space: normal; }
.ev2 .evlog li b { display: block; width: auto; height: auto; border-radius: 0; background: none; color: var(--ink); font: 600 14.5px var(--display); letter-spacing: -0.01em; place-items: initial; }
.ev2 .evlog li > span > span { font-family: var(--text); font-size: 13px; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ev2 .evlog li::after { font: 400 11px var(--mono); color: var(--ink-3); }
.ev2 .evlog li:nth-child(1)::after { content: "now"; color: var(--ink); }
.ev2 .evlog li:nth-child(2)::after { content: "14s"; }
.ev2 .evlog li:nth-child(3)::after { content: "48s"; }
.ev2 .evlog li:nth-child(4)::after { content: "2m"; }
.ev2 .evlog li:nth-child(5)::after { content: "4m"; }
.ev2 .evlog li:nth-child(6)::after { content: "7m"; }
@media (max-width: 640px) { .ev2 .evlog li { grid-template-columns: 14px minmax(0, 1fr) auto; } }

/* Contact without the details table: headline and buttons centred */
.get.get-center { grid-template-columns: 1fr; justify-items: center; text-align: center; }
.get-center .get-copy { max-width: 760px; }
.get-center .h2-duo { margin: 0 auto; max-width: none; }
.get-center .lede { margin-left: auto; margin-right: auto; }
.get-center .hero-cta { justify-content: center; }
@media (prefers-reduced-motion: reduce) { .pd-sel, .pm-bar i, .proc u, .proc-qa .pq.run i { animation: none; } }

/* Projects: an index of the work, with a preview of whichever product is in focus */
.phero .pidx { margin-top: 64px; }
.pidx { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); border: 1px solid var(--hair); border-radius: 8px; overflow: hidden; background: var(--sheet); }
.pidx-list { counter-reset: none; border-right: 1px solid var(--hair); }
.pidx-list li + li { border-top: 1px solid var(--hair); }
.pidx-list a { position: relative; display: grid; grid-template-columns: 28px minmax(0, auto) minmax(0, 1fr) auto; gap: 14px; align-items: baseline; padding: 13px 22px; color: var(--ink-3); transition: background .25s ease, color .25s ease; }
.pidx-list a::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: var(--b); transition: width .35s var(--ease); }
.pidx-list .num { font: 400 11px var(--mono); }
.pidx-list b { font-size: 19px; font-weight: 600; letter-spacing: -0.02em; color: var(--ink-2); transition: color .25s ease; white-space: nowrap; }
.pidx-list em { font: 400 12.5px var(--text); font-style: normal; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pidx-k { font: 400 11px var(--mono); color: var(--ink-3); white-space: nowrap; }
.pidx-list a.on { background: var(--card); }
.pidx-list a.on::before { width: 3px; }
.pidx-list a.on b { color: var(--ink); }
.pidx-list a.on .num { color: var(--ink); }
.pidx-stage { position: relative; min-height: 100%; }
.pv { position: absolute; inset: 0; display: flex; flex-direction: column; opacity: 0; visibility: hidden; transition: opacity .5s ease, visibility 0s .5s; color: var(--ink); }
.pv.on { opacity: 1; visibility: visible; transition: opacity .5s ease, visibility 0s; }
.pv-art { position: relative; flex: 1; min-height: 300px; background: var(--tint); overflow: hidden; }
.pv-art canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.pv-art > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scale(1.04); transition: transform 6s ease; }
.pv.on .pv-art > img { transform: scale(1); }
.pv-art .pok-cards img { width: 40%; }
.pv-body { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto auto auto; column-gap: 20px; padding: 22px 26px 24px; border-top: 1px solid var(--hair); background: var(--sheet); }
.pv-k { grid-column: 1 / -1; display: flex; align-items: center; gap: 7px; font: 400 11.5px var(--mono); color: var(--ink-3); }
.pv-k i { width: 9px; height: 10px; background: var(--b); clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); }
[data-theme="dark"] .pv[style*="--b:#000000"] .pv-k i, [data-theme="dark"] .pidx-list a[style*="--b:#000000"]::before { background: var(--ink); }
.pv-body strong { margin-top: 8px; font-size: clamp(34px, 3.6vw, 48px); font-weight: 600; letter-spacing: -0.035em; line-height: 1; }
.pv-d { grid-column: 1; margin-top: 8px; font-family: var(--text); font-size: 14px; color: var(--ink-2); }
.pv-go { grid-column: 2; grid-row: 2 / 4; align-self: end; display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 500; white-space: nowrap; }
.pv-go svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; transition: transform .25s var(--ease); }
.pv:hover .pv-go svg { transform: translate(2px, -2px); }
.pidx-bar { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: transparent; z-index: 2; }
.pidx-bar i { display: block; height: 100%; width: 0; background: var(--ink); }
@media (max-width: 1000px) { .pidx-list em { display: none; } .pidx-list a { grid-template-columns: 28px minmax(0, 1fr) auto; } }
@media (max-width: 760px) {
  .phero .pidx { margin-top: 40px; }
  .pidx { grid-template-columns: 1fr; }
  .pidx-list { border-right: 0; border-bottom: 1px solid var(--hair); order: 2; }
  .pidx-stage { min-height: 420px; }
  .pidx-list a { padding: 12px 16px; }
  .pidx-list b { font-size: 17px; }
  .pv-body { padding: 18px; }
}
.pv-name { position: absolute; left: 26px; bottom: 18px; font-size: clamp(44px, 5.4vw, 76px); font-weight: 600; letter-spacing: -0.045em; line-height: .95; color: var(--b); opacity: .9; }
[data-theme="dark"] .pv-name { color: color-mix(in srgb, var(--b) 55%, #fff); }
.pv-art .pok-cards { left: 30%; }
@media (max-width: 760px) {
  .pidx-stage { min-height: 460px; }
  .pv-art { min-height: 240px; }
  .pv-body { grid-template-columns: 1fr; }
  .pv-go { grid-column: 1; grid-row: auto; margin-top: 12px; }
  .pv-name { left: 18px; bottom: 14px; }
}

/* Proven layers: clean cards, no mosaic */
.layer { padding-top: 22px; border-radius: 8px; }
.layer > .num { margin: 0 20px; }
.layer h3 { margin-top: 2px; }

/* Activity rows run edge to edge, so the grey highlight sits exactly between the divider lines */
.ev2 .log { padding: 0; }
.ev2 .evlog li { padding: 14px 20px; }
.ev2 .evlog li.new { animation: logFade .6s ease both, logFlash 2.6s ease both; }
@keyframes logFade { from { opacity: 0; } }

/* Landing hero: centred, with the typed line as the headline */
.hero-c { padding: 150px 0 40px; }
.hero-center { display: flex; flex-direction: column; align-items: center; text-align: center; max-width: 1104px; }
.hero-c h1.typed { max-width: 20ch; min-height: 2.06em; padding-top: 0; border-top: 0; font-size: clamp(38px, 5vw, 72px); font-weight: 500; letter-spacing: -0.038em; line-height: 1.03; text-wrap: balance; }
.hero-c .typed-lead { color: var(--ink-3); }
.hero-lede { max-width: 60ch; margin-top: 26px; font-family: var(--text); font-size: 17px; line-height: 1.65; color: var(--ink-2); }
.hero-lede strong { color: var(--ink); font-weight: 600; }
.hero-c .hero-cta { justify-content: center; margin-top: 30px; }
.hero-c .readout { width: 100%; margin-top: 72px; text-align: left; }
@media (max-width: 640px) {
  .hero-c { padding: 112px 0 24px; }
  .hero-c h1.typed { font-size: 34px; min-height: 3.1em; }
  .hero-lede { font-size: 15.5px; }
  .hero-c .readout { margin-top: 48px; }
}
.hero-c .hero-center { max-width: 1104px; }
.hero-c .readout { text-align: center; }

/* From idea to running product: four phases as one table, each with a small live view of that phase */
.journey { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 56px; border: 1px solid var(--hair); border-radius: 8px; overflow: hidden; background: var(--sheet); }
.journey li { position: relative; display: flex; flex-direction: column; padding: 24px 22px 26px; transition: background .5s ease; }
.journey li + li { border-left: 1px solid var(--hair); }
.journey li.run { background: var(--card); }
.jy-bar { position: absolute; left: 0; right: 0; top: 0; height: 2px; background: transparent; }
.jy-bar i { display: block; height: 100%; width: 0; background: var(--ink); transition: width .8s var(--ease); }
.journey li.done .jy-bar i { width: 100%; }
.journey li.run .jy-bar i { width: 100%; background: var(--accent); transition: width 2.4s linear; }
.jy-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.jy-hx i { display: grid; place-items: center; width: 34px; height: 39px; background: var(--mute); color: var(--ink); font: 500 11.5px var(--mono); font-style: normal; clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); transition: background .5s ease, color .5s ease; }
.journey li.done .jy-hx i { background: var(--ink); color: var(--paper); }
.journey li.run .jy-hx i { background: var(--accent); color: #fff; }
.jy-meta { font: 400 11.5px var(--mono); color: var(--ink-3); }
.jv { display: flex; flex-direction: column; gap: 8px; height: 112px; margin: 20px 0 22px; padding: 14px; border-radius: 6px; background: var(--paper); border: 1px solid var(--rule); font: 400 11px var(--mono); color: var(--ink-3); overflow: hidden; }
.jv em { margin-top: auto; font-style: normal; color: var(--ink-2); }
.jv-scope span { display: flex; align-items: center; gap: 10px; }
.jv-scope span i { flex: none; width: 0; height: 7px; border-radius: 4px; background: var(--fill-2); transition: width .9s var(--ease); }
.jv-scope span b { margin-left: auto; font-weight: 400; white-space: nowrap; }
.journey li.run .jv-scope span i, .journey li.done .jv-scope span i { width: var(--w); background: var(--ink); opacity: .75; }
.jv-scope span:nth-child(2) i { transition-delay: .3s; } .jv-scope span:nth-child(3) i { transition-delay: .6s; }
.wk6 { display: grid; grid-template-columns: repeat(6, 1fr); gap: 5px; }
.wk6 i { display: grid; place-items: center; height: 30px; border-radius: 4px; background: var(--fill); font-style: normal; transition: background .4s ease, color .4s ease; }
.journey li.done .wk6 i { background: var(--ink); color: var(--paper); }
.journey li.run .wk6 i { animation: wkfill 2.4s steps(1) both; }
.journey li.run .wk6 i:nth-child(2) { animation-delay: .35s; } .journey li.run .wk6 i:nth-child(3) { animation-delay: .7s; } .journey li.run .wk6 i:nth-child(4) { animation-delay: 1.05s; } .journey li.run .wk6 i:nth-child(5) { animation-delay: 1.4s; } .journey li.run .wk6 i:nth-child(6) { animation-delay: 1.75s; }
@keyframes wkfill { from { background: var(--fill); color: var(--ink-3); } to { background: var(--ink); color: var(--paper); } }
.jv-ship span { display: flex; align-items: center; gap: 8px; color: var(--ink-2); }
.jv-ship span i { width: 8px; height: 9px; background: var(--mute); clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); transition: background .4s ease; }
.jv-ship span b { margin-left: auto; font-weight: 400; color: var(--ink-3); opacity: 0; transition: opacity .4s ease; }
.journey li.done .jv-ship i, .journey li.run .jv-ship i { background: var(--ink); }
.journey li.done .jv-ship b, .journey li.run .jv-ship b { opacity: 1; }
.journey li.run .jv-ship span:nth-child(2) i, .journey li.run .jv-ship span:nth-child(2) b { transition-delay: .6s; }
.journey li.run .jv-ship span:nth-child(3) i, .journey li.run .jv-ship span:nth-child(3) b { transition-delay: 1.2s; }
.upb { display: grid; grid-template-columns: repeat(28, 1fr); gap: 2px; height: 40px; align-items: end; }
.upb i { height: 100%; border-radius: 1px; background: var(--fill-2); transition: background .3s ease; }
.journey li.done .upb i, .journey li.run .upb i { background: var(--ink); opacity: .8; }
.upb i:nth-child(11) { height: 82%; }
.jv-run em b { color: var(--ink); font-weight: 600; }
.journey h3 { font-size: 22px; font-weight: 600; letter-spacing: -0.02em; }
.journey p { margin-top: 8px; font-family: var(--text); font-size: 14px; line-height: 1.6; color: var(--ink-2); }
@media (max-width: 1000px) { .journey { grid-template-columns: repeat(2, minmax(0, 1fr)); } .journey li:nth-child(3) { border-left: 0; } .journey li:nth-child(n+3) { border-top: 1px solid var(--hair); } }
@media (max-width: 640px) { .journey { grid-template-columns: 1fr; } .journey li + li { border-left: 0; border-top: 1px solid var(--hair); } }
@media (prefers-reduced-motion: reduce) { .journey li.run .wk6 i { animation: none; background: var(--ink); color: var(--paper); } }

/* Headline phrase: a soft letter by letter fade instead of typing */
.hero-c .typed-lead { display: inline-block; will-change: transform; }
.typed-text .ch { opacity: 1; transition: opacity .3s ease, color .7s ease; }
.typed-text.is-out .ch { opacity: 0; color: var(--accent); }
.typed-text .ch.pre { opacity: 0; color: var(--accent); }

/* Practices now live under the team trio */
.trio + .svc { margin-top: 64px; }

/* From idea to running product: separate cards with space between, no progress line, no blue */
.journey { gap: 16px; border: 0; border-radius: 0; overflow: visible; background: none; }
.journey li { border: 1px solid var(--hair) !important; border-radius: 8px; background: var(--sheet); }
.journey li.run { background: var(--sheet); }
.jy-bar { display: none; }
.journey li.run .jy-hx i, .journey li.done .jy-hx i { background: var(--ink); color: var(--paper); }

/* Practices without previews: an open list, every practice readable at once */
.svc { display: block; }
.svc-list { border-top: 1px solid var(--rule); }
.svc-item, .svc-item.on { grid-template-columns: 48px minmax(0, 1fr); padding: 24px 0; background: none; cursor: default; }
.svc-item > div { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); column-gap: 40px; align-items: start; }
.svc-item h3, .svc-item.on h3 { grid-row: 1 / span 2; color: var(--ink); }
.svc-item .num { color: var(--ink-3); }
.svc-item p, .svc-item.on p { grid-column: 2; max-height: none; margin-top: 0; opacity: 1; visibility: visible; overflow: visible; transition: none; }
.svc-item .proof, .svc-item.on .proof { grid-column: 2; max-height: none; margin-top: 12px; opacity: 1; visibility: visible; overflow: visible; transition: none; }
@media (max-width: 760px) { .svc-item > div { grid-template-columns: 1fr; } .svc-item h3 { grid-row: auto; } .svc-item p, .svc-item .proof { grid-column: 1; } .svc-item p { margin-top: 8px; } }

/* Footer: four columns now that the section shortcuts are gone */
@media (min-width: 641px) { .foot-cols { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* ================= One team: the three small animations drawn like a quick digital sketch, ink on paper only ================= */
.trio { --hatch: repeating-linear-gradient(45deg, var(--ink) 0 1px, transparent 1px 6px); --sk-r: 12px 9px 13px 10px / 10px 13px 9px 12px; }
.tv-viz { background: var(--paper) radial-gradient(var(--dots) 1px, transparent 1.2px) 0 0 / 14px 14px; border: 1px solid var(--rule); }
.tv-design i { background: none; border: 1px dashed var(--ink-3); border-radius: 8px 6px 9px 7px / 7px 9px 6px 8px; }
.tv-design i.picked { background: var(--hatch); border: 1.2px solid var(--ink); }
.tv-sel { border-color: var(--ink); }
.tv-sel s { background: var(--sheet); border-color: var(--ink); }
.tv-sel b { background: var(--ink); color: var(--paper); }
.tv-code { color: var(--ink); }
.tv-code b { color: var(--ink); font-weight: 600; }
.tv-code em { color: var(--ink-2); text-decoration: underline dotted 1px; text-underline-offset: 3px; }
.tv-code .c { color: var(--ink-3); }
.tv-code .hl { background: none; border: 1px dashed var(--ink-3); box-shadow: inset 2px 0 0 var(--ink); }
.tv-code .ln.cur::after { background: var(--ink); }
.tv-qa span { background: none; border: 1.2px solid var(--ink); border-radius: var(--sk-r); }
.tv-qa span.run { border-style: dashed; border-color: var(--ink); }
.tv-qa span.run i { border-top-color: var(--ink); }
.tv-qa span.ok i { background: var(--ink); border-color: var(--ink); }
.tv-qa span.ok i::after { border-color: var(--paper); }
.tv-qa span.ok em { color: var(--ink); }
.tv-cur { background: var(--sheet); border: 1.2px solid var(--ink); box-shadow: none; }
.tv-cur img { filter: grayscale(1) contrast(1.1); }
.tv-sel b { background: var(--ink); color: var(--paper); }

/* ================= October round: dark first, seamless sections, centred heroes ================= */

/* Seamless: one background from top to bottom, whitespace does the separating */
.band, .cm-band { background: none; border-top: 0; border-bottom: 0; }
.sec { padding: 104px 0; }
.cm-band { padding: 8px 0 24px; }

/* Every hero: the sentence, then a clear pause, then the CTAs, all on the centre line */
.hero-grid { display: flex; flex-direction: column; align-items: center; gap: 0; text-align: center; }
.hero-grid > div:first-child { display: flex; flex-direction: column; align-items: center; }
.hero-grid h1 { max-width: 24ch; margin-inline: auto; }
.hero-side { display: flex; flex-direction: column; align-items: center; margin-top: 30px; padding-top: 0; }
.hero-side p { max-width: 58ch; margin-inline: auto; }
.hero-side .hero-cta { justify-content: center; margin-top: 44px; }
.crumbs ol { justify-content: center; }
.chero-grid, .thero { display: flex; flex-direction: column; align-items: stretch; gap: 64px; }
.chero-grid > div:first-child, .thero > div:first-child { display: flex; flex-direction: column; align-items: center; text-align: center; }
.chero-grid h1, .thero h1 { max-width: 24ch; margin-inline: auto; text-wrap: balance; }
.chero-lead { margin-inline: auto; }
.chero .hero-cta { justify-content: center; margin-top: 44px; }
.chero-art { min-height: 380px; }
.chero-art .widget { width: min(420px, 70%); }
.thero-shot { width: 100%; max-width: 980px; margin: 0 auto; }
.cfacts { text-align: center; }
.hero-c .hero-lede { margin-top: 34px; }
.hero-c .hero-cta { margin-top: 48px; }
.hero-c .readout { margin-top: 112px; }
.phero { padding-bottom: 8px; }

/* Pick the way in: three floating choices with a sliding underline, no box around anything */
#start .seg { --g: 40px; position: relative; display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); gap: 0 var(--g); margin-top: 56px; padding: 0; border: 0; border-radius: 0; background: none; overflow: visible; }
#start .seg::before { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--rule); }
#start .seg-thumb { display: block; z-index: 1; top: auto; bottom: 0; left: 0; height: 2px; width: calc((100% - (var(--n) - 1) * var(--g)) / var(--n)); border-radius: 2px; background: var(--ink); box-shadow: none; transform: translateX(calc(var(--i) * (100% + var(--g)))); transition: transform .55s var(--ease); }
#start .seg .tab { display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: 6px; min-height: 0; padding: 0 0 24px; border: 0; border-radius: 0; background: none; box-shadow: none; text-align: left; font-size: clamp(22px, 2.3vw, 31px); font-weight: 600; letter-spacing: -0.025em; line-height: 1.1; color: var(--ink-3); cursor: pointer; transition: color .3s ease; }
#start .seg .tab + .tab { border-left: 0; }
#start .seg .tab::before { display: none; }
#start .seg .tab::after { position: static; order: -1; margin-bottom: 6px; font: 400 12px var(--mono); letter-spacing: 0; color: var(--ink-3); }
#start .seg .tab small { font: 400 14px var(--text); letter-spacing: 0; color: var(--ink-3); transition: color .3s ease; }
#start .seg .tab:hover { color: var(--ink-2); background: none; }
#start .seg .tab[aria-selected="true"] { color: var(--ink); background: none; }
#start .seg .tab[aria-selected="true"] small, #start .seg .tab[aria-selected="true"]::after { color: var(--ink-2); }
#start .seg .tab:focus-visible { outline: 2px solid var(--ink); outline-offset: 6px; border-radius: 4px; }
#start .plan-panels { margin-top: 64px; }
#start .plan-panel { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: 72px; align-items: center; padding: 0; border: 0; border-radius: 0; background: none; overflow: visible; }
#start .plan-panel:not([hidden]) { animation: way-in .55s var(--ease) both; }
@keyframes way-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
#start .pl-copy h3 { display: none; }
#start .pl-copy > p:not(.plan-price) { margin-top: 0; font-size: 19px; line-height: 1.55; color: var(--ink); max-width: 34ch; }
#start .terms { grid-template-columns: 1fr; gap: 18px; margin-top: 34px; border: 0; }
#start .terms div { flex-direction: column; gap: 3px; padding: 0; border: 0; }
#start .terms div + div { padding-left: 0; border-left: 0; border-top: 0; }
#start .terms dd { text-align: left; font-size: 16px; }
#start .pl-copy .plan-price { margin-top: 34px; }
#start .pl-art { min-height: 460px; border: 0; border-radius: 16px; background: var(--paper-2); }
#start .crosslink { margin-top: 72px; }
@media (max-width: 1000px) { #start .plan-panel { grid-template-columns: 1fr; gap: 40px; } #start .pl-art { border-top: 0; } }
@media (max-width: 640px) {
  #start .seg { --g: 14px; margin-top: 40px; }
  #start .seg .tab { font-size: 16px; padding-bottom: 16px; gap: 4px; }
  #start .seg .tab::after { display: block; margin-bottom: 2px; font-size: 11px; }
  #start .seg .tab small { font-size: 11.5px; line-height: 1.35; }
  #start .plan-panels { margin-top: 40px; }
  #start .pl-copy > p:not(.plan-price) { font-size: 17px; }
  #start .terms div { flex-direction: column; align-items: flex-start; padding: 0; }
  #start .terms dd { text-align: left; }
  #start .pl-art { min-height: 340px; }
}
@media (prefers-reduced-motion: reduce) { #start .plan-panel:not([hidden]) { animation: none; } }

/* European Innovation Council: no card, no table, only the content on the centre line */
.eic { display: flex; flex-direction: column; align-items: center; gap: 0; margin-top: 0; padding-top: 0; border-top: 0; text-align: center; }
.contact-sec { border-top: 0; }
.eic .eic-badge { width: 112px; height: 112px; font-size: 21px; }
.eic .eu { animation: spin 80s linear infinite; }
.eic .eu i { width: 7px; height: 7px; margin: -3.5px; transform: rotate(var(--a)) translateY(-42px); }
.eic h2 { max-width: 22ch; margin: 36px auto 0; }
.eic .lede { margin-left: auto; margin-right: auto; }
.eic-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; max-width: 1000px; margin: 56px auto 52px; }
.eic-list li { display: flex; flex-direction: column; gap: 8px; }
.eic-list b { font-size: 17px; font-weight: 600; letter-spacing: -0.01em; }
.eic-list span { font-family: var(--text); font-size: 14.5px; line-height: 1.6; color: var(--ink-2); }
@media (max-width: 800px) { .eic-list { grid-template-columns: 1fr; gap: 28px; margin: 40px auto; } }
@media (prefers-reduced-motion: reduce) { .eic .eu { animation: none; } }

/* Team: the photo opens that person's LinkedIn, and the logo appears on hover to say so */
.person-ph { position: relative; display: block; border-radius: 8px; overflow: hidden; }
.person-ph img { display: block; }
.person-ph::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 55%, rgba(5, 10, 20, 0.42)); opacity: 0; transition: opacity .35s ease; pointer-events: none; }
.li-badge { position: absolute; z-index: 1; right: 12px; bottom: 12px; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 9px; background: #0A66C2; color: #fff; opacity: 0; transform: translateY(8px) scale(.9); transition: opacity .3s ease, transform .4s var(--ease); box-shadow: 0 10px 22px -10px rgba(0, 0, 0, 0.6); }
.li-badge svg { width: 19px; height: 19px; fill: currentColor; }
.person-ph:hover::after, .person-ph:focus-visible::after { opacity: 1; }
.person-ph:hover .li-badge, .person-ph:focus-visible .li-badge { opacity: 1; transform: none; }
.person-ph:hover img, .person-ph:focus-visible img { filter: grayscale(0) contrast(1.02); }
.person-ph:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
@media (hover: none) { .li-badge { opacity: 1; transform: none; width: 30px; height: 30px; right: 8px; bottom: 8px; border-radius: 7px; } .li-badge svg { width: 15px; height: 15px; } }

/* Tools: a carousel in depth instead of the stacked scroll */
.tcar { position: relative; margin-top: 56px; }
.tcar-stage { position: relative; display: grid; perspective: 1700px; perspective-origin: 50% 40%; touch-action: pan-y; user-select: none; -webkit-user-select: none; }
.tcar-card { --x: 0%; --z: 0px; --ry: 0deg; --o: 1; --dim: 1; grid-area: 1 / 1; justify-self: center; position: relative; display: block; width: min(820px, 66%); aspect-ratio: 16 / 10; border-radius: 18px; overflow: hidden; background: #0B1322; color: #fff; opacity: var(--o); transform: translateX(var(--x)) translateZ(var(--z)) rotateY(var(--ry)); transition: transform .9s var(--ease), opacity .7s ease, box-shadow .6s ease; box-shadow: none; cursor: pointer; }
.tcar-card.on { box-shadow: 0 50px 90px -50px rgba(5, 10, 20, 0.7); }
.tcar-img { position: absolute; inset: 0; }
.tcar-img img { width: 100%; height: 100%; object-fit: cover; filter: brightness(var(--dim)); transform: scale(1.04); transition: filter .7s ease, transform 1.2s var(--ease); pointer-events: none; }
.tcar-card.on .tcar-img img { transform: scale(1); }
.tcar-copy { position: absolute; left: 22px; bottom: 22px; width: min(400px, calc(100% - 44px)); display: flex; flex-direction: column; padding: 20px 22px 22px; border-radius: 14px; background: rgba(8, 14, 26, 0.6); backdrop-filter: blur(18px) saturate(1.3); -webkit-backdrop-filter: blur(18px) saturate(1.3); border: 1px solid rgba(255, 255, 255, 0.12); opacity: 0; transform: translateY(14px); transition: opacity .45s ease, transform .6s var(--ease); pointer-events: none; }
.tcar-card.on .tcar-copy { opacity: 1; transform: none; transition-delay: .35s; pointer-events: auto; }
.tcar-k { font: 500 13px var(--text); color: rgba(255, 255, 255, 0.72); }
.tcar-copy strong { margin-top: 4px; font-size: clamp(28px, 3vw, 40px); font-weight: 600; letter-spacing: -0.03em; line-height: 1; }
.tcar-d { margin-top: 10px; font-family: var(--text); font-size: 14px; line-height: 1.6; color: rgba(255, 255, 255, 0.82); }
.tcar-copy .pill { align-self: flex-start; margin-top: 18px; }
.tcar-card.on:hover .pill svg { transform: translateX(2px); }
.tcar-nav { display: flex; align-items: center; justify-content: center; gap: 18px; margin-top: 36px; }
.tcar-btn { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--rule); background: none; color: var(--ink); cursor: pointer; transition: background .25s ease, border-color .25s ease; }
.tcar-btn:hover { background: var(--sheet); border-color: var(--hair); }
.tcar-btn svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.tcar-dots { display: flex; align-items: center; gap: 8px; }
.tcar-dots button { position: relative; width: 8px; height: 8px; padding: 0; border: 0; border-radius: 8px; background: var(--hair); overflow: hidden; cursor: pointer; transition: width .45s var(--ease), background .3s ease; }
.tcar-dots button.on { width: 40px; background: var(--rule); }
.tcar-dots button::after { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 0; border-radius: 8px; background: var(--ink); }
.tcar-dots button.on::after { width: 100%; }
.tcar.ticking .tcar-dots button.on::after { width: 0; animation: tcar-fill var(--step, 5200ms) linear forwards; }
@keyframes tcar-fill { to { width: 100%; } }
.tcar + .sec-link { display: table; margin: 40px auto 0; }
#tools > .wrap > h2, #tools > .wrap > .lede { margin-left: auto; margin-right: auto; text-align: center; }
@media (max-width: 640px) {
  .tcar { margin-top: 40px; }
  .tcar-card { width: 84%; aspect-ratio: 4 / 5; border-radius: 14px; }
  .tcar-copy { left: 10px; right: 10px; bottom: 10px; width: auto; padding: 16px; }
  .tcar-d { font-size: 13px; }
  .tcar-nav { margin-top: 28px; }
}
@media (prefers-reduced-motion: reduce) { .tcar-card, .tcar-img img, .tcar-copy { transition-duration: .01s; } .tcar.ticking .tcar-dots button.on::after { animation: none; width: 100%; } }

/* How we build: the pipeline gets its own introduction, and its cards lose the status pills */
.pipe-intro { margin-bottom: 56px; text-align: center; }
.pipe-intro h2 { margin: 0 auto; }
.pipe-intro .lede { margin-left: auto; margin-right: auto; }
.stage-meta { margin-left: auto; font: 400 11.5px var(--mono); font-style: normal; color: var(--ink-3); white-space: nowrap; }
.stage { min-height: 260px; }

/* Designers and engineers: one section, six points in two rows */
.nlist-6 { row-gap: 8px; }

/* Footer: a quieter logo */
.foot-brand img { width: min(100%, 190px); }
.eic .lede { max-width: 58ch; font-size: 17px; }
#start .pl-copy { padding: 0; }
#tools { overflow-x: clip; }
@media (max-width: 760px) {
  .svc-item > div, .svc-item.on > div { grid-template-columns: 1fr; }
  .svc-item h3, .svc-item.on h3 { grid-row: auto; }
  .svc-item p, .svc-item.on p, .svc-item .proof, .svc-item.on .proof { grid-column: 1; }
  .svc-item p, .svc-item.on p { margin-top: 8px; }
}
.chero-lead { margin-top: 28px; }
.feat-card li .hexdot { flex: none; }
.feat-card li:has(.hexdot) { align-items: flex-start; line-height: 1.5; } .feat-card li .hexdot { margin-top: 5px; }
/* Tool pages on phones: stacked hero buttons share one width, set by the longer one */
@media (max-width: 640px) {
  .thero .hero-cta { display: grid; grid-template-columns: max-content; justify-content: center; }
  .thero .hero-cta .pill { justify-content: center; }
}
/* How we build: the phases intro sits on the left, on the same edge as the phase cards under it */
.pipe-intro { max-width: 1376px; text-align: left; }
.pipe-intro h2 { margin: 0; }
.pipe-intro .lede { margin-left: 0; margin-right: 0; }

/* ================= Spacing system =================
   One 8 point scale for the whole site, with 4 point steps only inside small components.
   Rhythm: 128 between sections on desktop, 96 on tablets, 64 on phones.
   Inside a section: heading to intro 16, intro to content 48 (40 tablet, 32 phone), parts of a block 32 (24 on smaller screens),
   card grids 24 (16 on phones). Space outside a card is never smaller than the padding inside it. */
:root {
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px; --sp-7: 40px; --sp-8: 48px; --sp-9: 64px; --sp-10: 96px; --sp-11: 128px;
  --section: 64px; --block: 48px; --stack: 32px; --grid: 24px; --head: 16px; --gutter: 32px; --card-pad: 24px; --hero-top: 160px; --hero-gap: 32px;
}
@media (max-width: 1000px) { :root { --section: 48px; --block: 40px; --stack: 24px; --gutter: 24px; --hero-top: 136px; } }
@media (max-width: 640px) { :root { --section: 32px; --block: 32px; --stack: 24px; --grid: 16px; --gutter: 16px; --card-pad: 16px; --hero-top: 124px; --hero-gap: 24px; } }

/* Page edges */
.wrap { padding-left: var(--gutter); padding-right: var(--gutter); }
.nav { padding-left: var(--gutter); padding-right: var(--gutter); }

/* Sections: the same rhythm everywhere */
.sec { padding-top: var(--section); padding-bottom: var(--section); }
.sec-top0 { padding-top: var(--sp-6); }
.sec-top0 > .wrap > :first-child { margin-top: 0; }
.hero, .hero.hero-c, .hero.phero, .hero.chero { padding-top: var(--hero-top); padding-bottom: var(--section); }
.cm-band { padding: 0 0 var(--sp-4); }
.tools-head { margin-top: calc(var(--section) * 2); }

/* Heroes: sentence, a clear pause, then the actions */
.crumbs ol { margin-bottom: var(--sp-5); }
.hero-c .hero-lede { margin-top: var(--hero-gap); }
.hero-side { margin-top: var(--sp-5); }
.chero-lead { margin-top: var(--sp-5); }
.hero-c .hero-cta, .hero-side .hero-cta, .chero .hero-cta { margin-top: var(--sp-7); }
.hero-c .readout { margin-top: var(--sp-10); padding-top: var(--sp-5); gap: var(--sp-5); }
.chero-grid, .thero { gap: var(--sp-9); }
.cfacts { margin-top: var(--block); padding-top: var(--sp-5); gap: var(--sp-5); }
@media (max-width: 640px) { .hero-c .hero-cta, .hero-side .hero-cta, .chero .hero-cta { margin-top: var(--sp-6); } .hero-c .readout { margin-top: var(--sp-9); } .chero-grid, .thero { gap: var(--sp-7); } }

/* Heading groups: an intro sits close to its heading */
.lede, .get-copy .lede, .get-center .lede, .eic .lede { margin-top: var(--head); }
.run-head .lede { margin-top: 0; }
@media (max-width: 1000px) { .run-head .lede { margin-top: var(--head); } }
.rail-head { margin-top: var(--head); }
.rail-head .lede { margin-top: 0; }
.cs-sec > h2 { margin-bottom: var(--head); }

/* Content after a heading group, and actions after content */
.journey, .trio, .people, .tcar, .layers, .plans, .dash, .ways, .pgrid, .feat-cards, .how-grid, .rel, .work, .nlist-row, .rail, #start .seg { margin-top: var(--block); }
.feat-copy .nlist { margin-top: var(--stack); }
.sec-link, .sec-links, .crosslink, #start .crosslink, .rail + .wrap .work { margin-top: var(--block); }
.tcar + .sec-link { margin-top: var(--stack); }
.tcar-nav { margin-top: var(--stack); }
.trio + .svc { margin-top: calc(var(--block) + var(--sp-4)); }
#start .plan-panels { margin-top: var(--block); }
.pipe-intro { margin-bottom: var(--block); }
.filters + .ledger, .ledger { margin-top: var(--stack); }
.get-copy .hero-cta, .get-copy .pill { margin-top: var(--sp-7); }
.get-copy .hero-cta .pill { margin-top: 0; }
.cform { margin-top: var(--stack); padding: var(--stack); gap: var(--sp-4); }

/* Home: Pick the way in, and the EU partnership */
#start .plan-panel { gap: var(--sp-9); }
#start .terms { margin-top: var(--stack); gap: var(--sp-4); }
#start .pl-copy .plan-price { margin-top: var(--stack); }
#start .pl-copy .pill { margin-top: var(--sp-5); }
.eic h2 { margin-top: var(--stack); }
.eic-list { gap: var(--sp-7); margin: var(--block) auto; }
@media (max-width: 1000px) { #start .plan-panel { gap: var(--sp-7); } }

/* Grids: one gap for every set of cards */
.trio, .pgrid, .layers, .plans, .dash, .rel, .how-grid, .feat-cards, .journey { gap: var(--grid); }
.people { gap: var(--stack) var(--sp-4); }
.nlist-row { column-gap: var(--stack); }
.feat { gap: var(--sp-9); }
.clayout { gap: var(--sp-9); }
.cs-sec + .cs-sec { margin-top: var(--sp-9); }
.cs-sec > p + p { margin-top: var(--sp-4); }
@media (max-width: 1000px) { .feat { gap: var(--block); } }
@media (max-width: 640px) { .people { gap: var(--sp-5) var(--sp-3); } .cs-sec + .cs-sec { margin-top: var(--block); } }

/* Cards: one inner padding */
.feat-card, .how-card, .plan { padding: var(--card-pad); }
.pcard-body { padding: var(--card-pad); }
.tv { padding: var(--sp-4) var(--sp-4) var(--card-pad); }
.layer { padding-top: var(--card-pad); padding-bottom: var(--card-pad); }
.layer > .num, .layer h3, .layer p, .layer .proof { margin-left: var(--card-pad); margin-right: var(--card-pad); }
.journey li { padding: var(--card-pad); }
.jv { margin: var(--sp-5) 0; }

/* Footer */
.foot { padding: var(--section) 0 var(--sp-6); }
.foot-top { gap: var(--sp-9); padding-top: var(--block); }
.foot-brand p { margin-top: var(--sp-5); }
.foot-cols { gap: var(--sp-5); }
.foot-cols h3 { margin-bottom: var(--sp-3); }
.foot-cols a { margin-bottom: 0; padding: var(--sp-1) 0; }
.foot-bottom { margin-top: var(--sp-9); }
@media (max-width: 1000px) { .foot-top { gap: var(--block); } }

/* Touch targets: 44 by 44 for every button (WCAG 2.5.5, Apple HIG) */
.pill { min-height: 44px; }
.theme-toggle, .nav-toggle { width: 44px; height: 44px; }
.fchip { min-height: 40px; }
.tcar-dots { gap: 0; }
.tcar-dots button { width: 24px; height: 24px; background: none; overflow: visible; border-radius: 0; }
.tcar-dots button.on { width: 56px; background: none; }
.tcar-dots button::before { content: ""; position: absolute; left: 8px; right: 8px; top: 8px; height: 8px; border-radius: 8px; background: var(--hair); transition: background .3s ease; }
.tcar-dots button.on::before { background: var(--rule); }
.tcar-dots button::after { left: 8px; top: 8px; bottom: auto; height: 8px; width: 0; }
.tcar-dots button.on::after { width: calc(100% - 16px); }
.tcar.ticking .tcar-dots button.on::after { width: 0; animation: tcar-fill2 var(--step, 5200ms) linear forwards; }
@keyframes tcar-fill2 { to { width: calc(100% - 16px); } }
@media (prefers-reduced-motion: reduce) { .tcar.ticking .tcar-dots button.on::after { animation: none; width: calc(100% - 16px); } }

/* Reading: body copy at 1.5 line height or more, lines kept under about 75 characters */
.rl-steps small { line-height: 1.5; }
.hero-side p, .chero-lead { max-width: 62ch; }
.cm-band { padding: 0; }
/* Case studies: the key results come after the article, as their own section */
.cm-sec .cms { margin-top: var(--block); gap: var(--sp-5) var(--stack); }

/* Technical audit: a printed page of code marked up in ink, finding by finding, ending in a circled verdict */
#start .pl-art.redline { display: grid; place-items: center; padding: var(--stack); background: var(--paper-2) radial-gradient(var(--dots) 1px, transparent 1.2px) 0 0 / 16px 16px; }
.rl-sheet { position: relative; width: min(100%, 540px); padding: 20px 24px 24px; border: 1px solid var(--rule); border-radius: 3px; background: var(--sheet); color: var(--ink); transform: rotate(-1.2deg); box-shadow: 0 1px 0 var(--rule), 0 34px 60px -36px rgba(5, 10, 20, 0.45); }
.rl-top { display: flex; justify-content: space-between; gap: 12px; padding-bottom: 12px; border-bottom: 1px dashed var(--hair); font: 400 11px var(--code); color: var(--ink-3); }
.rl-top b { font-weight: 500; color: var(--ink); }
.rl-code { margin-top: 12px; font: 400 12px/2 var(--code); }
.rl-code li { display: flex; align-items: center; gap: 10px; white-space: pre; }
.rl-code i { flex: none; width: 18px; text-align: right; font-style: normal; color: var(--ink-3); }
.rl-code code { font: inherit; color: var(--ink-2); }
.rl-code li.hit code { color: var(--ink); }
.rl-code mark { position: relative; background: none; color: inherit; }
.rl-code .mk { position: absolute; left: -5px; right: -5px; top: -3px; bottom: -3px; width: calc(100% + 10px); height: calc(100% + 6px); overflow: visible; pointer-events: none; }
.rl-code .mk-u { top: auto; bottom: -5px; height: 7px; }
.rl-sheet .mk path { fill: none; stroke: var(--ink); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; stroke-dasharray: var(--len, 4000px); stroke-dashoffset: 0; transition: stroke-dashoffset .8s cubic-bezier(.6, 0, .3, 1); }
.lead { flex: 1; min-width: 14px; border-top: 1px dotted var(--ink-3); transition: opacity .4s ease .5s; }
.redline .bal { display: inline-grid; place-items: center; flex: none; width: 20px; height: 20px; border-radius: 50%; border: 1.3px solid var(--ink); background: var(--sheet); color: var(--ink); font: 600 10.5px/1 var(--display); transition: opacity .35s ease .7s, transform .45s var(--ease) .7s; }
.redline .bal.crit { background: var(--ink); color: var(--sheet); }
.rl-key { display: grid; gap: 10px; margin-top: 16px; padding-top: 14px; border-top: 1px dashed var(--hair); }
.rl-key li { display: flex; align-items: flex-start; gap: 10px; font: 500 13px/1.4 var(--display); transition: opacity .5s ease .4s; }
.rl-key li .bal { transition: none; margin-top: -1px; }
.rl-key em { display: block; margin-top: 2px; font: 400 11px var(--code); font-style: normal; color: var(--ink-3); }
.rl-sum { margin-top: 14px; font: 400 11.5px var(--code); color: var(--ink-3); transition: opacity .5s ease; }
.rl-sum b { font-weight: 500; color: var(--ink); }
.rl-verdict { display: flex; align-items: center; gap: 28px; margin-top: 16px; padding-top: 14px; border-top: 1px dashed var(--hair); font: 600 16px var(--display); letter-spacing: -0.01em; color: var(--ink-3); }
.rl-verdict em { font: 400 11px var(--code); font-style: normal; }
.rl-verdict .pick { position: relative; color: var(--ink); transition: color .4s ease; }
.rl-verdict .mk-loop { position: absolute; left: -16px; right: -16px; top: -11px; bottom: -11px; width: calc(100% + 32px); height: calc(100% + 22px); overflow: visible; }
.rl-verdict .mk-loop path { transition-duration: 1.1s; }
/* Hidden until each finding is marked, only when the script is running the sequence */
.redline.js [data-rl]:not(.on) .mk path, .redline.js .rl-verdict:not(.on) path { stroke-dashoffset: var(--len, 4000px); transition-duration: .2s; }
.redline.js .rl-code li:not(.on) .lead { opacity: 0; transition-delay: 0s; }
.redline.js .rl-code li:not(.on) .bal { opacity: 0; transform: scale(.5); transition-delay: 0s; }
.redline.js .rl-key li:not(.on), .redline.js .rl-sum:not(.on) { opacity: .18; transition-delay: 0s; }
.redline.js .rl-verdict:not(.on) .pick { color: var(--ink-3); }
@media (max-width: 640px) {
  #start .pl-art.redline { padding: var(--sp-4) var(--sp-2); }
  .rl-sheet { padding: 12px 12px 16px; transform: rotate(-.8deg); }
  .rl-code { font-size: 9px; }
  .rl-code li { gap: 6px; }
  .rl-code i, .rl-code .lead { display: none; }
  .rl-key li { font-size: 12px; }
  .rl-verdict { gap: 24px; font-size: 14px; }
}
.rl-code .bal { margin-left: auto; }
/* One team: only the highlighted card moves; the others hold still */
.tv:not(.on) .tv-design i { animation-play-state: paused; }
.tv:not(.on) .tv-code .ln.cur::after { animation: none; opacity: 0; }
.tv-sel, .tv-cur { transition-duration: .8s; }
/* Tool pages: the running step takes the product's own colour where one is set (TokiToki orange, OpenHand.al green, PopSign teal) */
.flow li.run .flow-dot i { background: var(--run, var(--accent)); }
[data-theme="dark"] .flow li.run .flow-dot i { background: var(--run-d, var(--run, var(--accent))); }

/* Everything in one team: the design card's blocks only drift while that card is highlighted */
.tv-design .w3, .tv-design .w5 { animation-play-state: paused; }
.tv.on .tv-design .w3, .tv.on .tv-design .w5 { animation-play-state: running; }
/* Nav: five pages now, so the menu folds into the button a little earlier, before the links run into the actions */
@media (max-width: 1080px) {
  .nav-links { display: none; position: absolute; left: 12px; right: 12px; top: 64px; flex-direction: column; gap: 0; padding: 8px; border-radius: 14px; background: var(--sheet); border: 1px solid var(--rule); box-shadow: 0 24px 40px -24px rgba(5, 10, 20, 0.45); }
  .nav.open .nav-links { display: flex; }
  .nav-links a { padding: 12px 14px; font-size: 17px; opacity: 1; }
  .nav-cta { margin-left: 0; }
  .theme-toggle { margin: 0 0 0 auto; }
  .nav-toggle { display: inline-flex; }
}
/* Tool cards: the product pictures sit still */
.pcard-art > img { animation: none; transform: none; }

/* ================= October 20 round ================= */

/* Product pictures sit still everywhere: tool cards, tool page heroes and the MVP panel */
.pcard-art > img, .thero-shot img, .pl-photo img, .stack-img img { animation: none; transform: none; }

/* European Innovation Council: the ring of stars on its own, as on the flag */
.eic .eu-stars { display: block; width: 116px; height: 116px; fill: #FFCC00; }
@media (max-width: 640px) { .eic .eu-stars { width: 92px; height: 92px; } }

/* Product and design: two designers on the cursor, Dea and Rajla */
.tv-av { display: inline-flex; flex: none; }
.tv-cur .tv-av img { width: 18px; height: 18px; border-radius: 50%; object-fit: cover; object-position: top; box-shadow: 0 0 0 1.5px var(--sheet); }
.tv-cur .tv-av img + img { margin-left: -6px; }

/* Cross links: a quiet row between hairlines with an arrow in a circle, instead of a filled block */
.crosslink, .crosslink:hover { grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto; column-gap: var(--sp-5); align-items: center; padding: var(--sp-5) 0; border-radius: 0; background: none; color: var(--ink); border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.crosslink strong { font-size: clamp(17px, 1.5vw, 20px); font-weight: 400; line-height: 1.4; color: var(--ink-2); text-wrap: pretty; }
.crosslink strong span { color: var(--ink); font-weight: 600; }
.crosslink-go { display: grid; place-items: center; grid-row: auto; width: 48px; height: 48px; border-radius: 50%; border: 1px solid var(--rule); color: var(--ink); transition: background .3s ease, border-color .3s ease, color .3s ease; }
.crosslink-go svg { width: 18px; height: 18px; }
.crosslink:hover .crosslink-go { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.crosslink:hover strong { color: var(--ink); }
@media (max-width: 640px) { .crosslink, .crosslink:hover { grid-template-columns: minmax(0, 1fr) auto; padding: var(--sp-5) 0; } .crosslink-go { display: grid; width: 44px; height: 44px; } }

/* Explore the tools: a proper pill, centred, with its arrow in line */
.tcar + .sec-link { display: flex; width: max-content; margin-left: auto; margin-right: auto; }

/* LinkedIn on team photos: the full white logo, a little see through */
.li-badge { right: 14px; bottom: 14px; width: 30px; height: 30px; border-radius: 0; background: none; color: #fff; box-shadow: none; filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.35)); }
.li-badge svg { width: 100%; height: 100%; }
.person-ph:hover .li-badge, .person-ph:focus-visible .li-badge { opacity: .78; }
@media (hover: none) { .li-badge { opacity: .78; width: 24px; height: 24px; right: 10px; bottom: 10px; border-radius: 0; } .li-badge svg { width: 100%; height: 100%; } }

/* How we build, tokens and themes: each card in its own product's colours, with room for the button text */
.themer { --t1: #003F42; --t2: #008F95; --t3: #4DB8BC; --t4: #E3F5F5; --r: 8px; }
.themer[data-at="1"] { --t1: #06365C; --t2: #0B66AE; --t3: #2E9BE6; --t4: #E6F4FD; --r: 14px; }
.themer[data-at="2"] { --t1: #000000; --t2: #111111; --t3: #7A7A7A; --t4: #F2F2F2; --r: 20px; }
.themer-body { grid-template-columns: minmax(0, 0.72fr) minmax(0, 1.28fr); }
.tcard { width: min(280px, 88%); }
.tc-btn { white-space: nowrap; }
#design .feat { grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr); }
#design .feat.flip { grid-template-columns: minmax(0, 1.18fr) minmax(0, 0.82fr); }
@media (max-width: 1000px) { #design .feat, #design .feat.flip { grid-template-columns: 1fr; } }

/* We stay on after launch: the live events bars in ink, and the trend lines drawn as one connected line */
.stream i { background: var(--ink); opacity: .78; }
.spark path { stroke-dasharray: none; stroke-dashoffset: 0; animation: none; }
.spark { animation: spark-wipe 7s var(--ease) infinite; }
@keyframes spark-wipe { 0% { clip-path: inset(-6px 100% -6px -6px); opacity: 1; } 45%, 86% { clip-path: inset(-6px -6px -6px -6px); opacity: 1; } 100% { clip-path: inset(-6px -6px -6px -6px); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .spark { animation: none; } }

/* ================= Real project imagery: logos, photos and small animations instead of the hexagons ================= */

/* Logo tiles (case study list squares, related cards, case study heroes) */
.logo-tile { position: absolute; inset: 0; display: grid; place-items: center; background: var(--lt); overflow: hidden; }
.logo-tile img { width: var(--lw, 60%); max-height: 72%; object-fit: contain; }
.logo-tile svg { width: 40%; max-width: 76px; aspect-ratio: 1; fill: none; stroke: #fff; stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; opacity: .92; }
.lrow-art { background: none; }
.lrow-art .logo-tile img { width: 76%; }
.lrow-art .lt-pok img { width: 60%; }
.lrow-art .logo-tile svg { width: 46%; }
.rcard-art { overflow: hidden; }
.rcard-art .logo-tile img { width: calc(var(--lw, 60%) * .7); }
.chero-logo { background: none; box-shadow: none; }
.chero-logo .logo-tile { place-items: center start; padding-left: 9%; }
.chero-logo .logo-tile img { width: auto; height: 48%; max-width: 42%; max-height: none; }
.chero-logo .lt-pok img { height: 30%; }
.chero-logo .logo-tile svg { width: auto; height: 42%; max-width: none; }
.chero-logo .widget { left: auto; right: 7%; top: 50%; transform: translateY(-50%); width: min(380px, 40%); }
@media (max-width: 760px) {
  .chero-logo .logo-tile { place-items: start center; padding: 40px 0 0; }
  .chero-logo .logo-tile img { height: 30%; max-width: 64%; }
  .chero-logo .logo-tile svg { height: 26%; }
  .chero-logo .widget { right: auto; left: 50%; top: auto; bottom: 18px; transform: translateX(-50%); width: 86%; }
}

/* Work we can show you: the project's own picture, or its colours, under the small table */
.mc-bg { position: absolute; inset: 0; width: 100%; height: 100%; }
img.mc-bg { object-fit: cover; }
.mc-grad { background: radial-gradient(rgba(255, 255, 255, 0.09) 1px, transparent 1.3px) 0 0 / 14px 14px, var(--g); }
.mc-photo .widget { left: 16px; right: auto; top: auto; bottom: 16px; transform: none; width: min(76%, 250px); }
.mc-photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 45%, rgba(0, 0, 0, 0.35)); pointer-events: none; }
.mc-photo .widget { z-index: 1; }

/* Projects: photos fill the card */
.pa-photo > img { width: 100%; height: 100%; object-fit: cover; }
.pa-pok > img { object-position: 50% 30%; }
.pa-popsign-ai > img { object-position: 50% 0; }

/* Projects: small animations for the products we cannot show in screenshots */
.pa { position: absolute; inset: 0; display: flex; flex-direction: column; padding: 22px 24px; color: #fff; font-family: var(--text); }
.pa-top { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font: 400 12px var(--mono); color: rgba(255, 255, 255, 0.72); }
.pa-top b { position: relative; font: 600 26px/1 var(--display); letter-spacing: -0.02em; color: #fff; }
.pa-foot { display: flex; justify-content: space-between; gap: 12px; margin-top: 12px; font: 400 11.5px var(--mono); color: rgba(255, 255, 255, 0.6); }
/* National platform: the load comes down under live traffic */
.pa-load { background: radial-gradient(rgba(255, 255, 255, 0.07) 1px, transparent 1.3px) 0 0 / 14px 14px, linear-gradient(150deg, #14171D, #3A414F); }
.pa-load .pa-top b { display: grid; justify-items: end; }
.pa-load .pa-top em { grid-area: 1 / 1; font-style: normal; animation: plv1 8s var(--ease) infinite; }
.pa-load .pa-top em.v2 { animation-name: plv2; }
@keyframes plv1 { 0%, 22% { opacity: 1; } 32%, 92% { opacity: 0; } 100% { opacity: 1; } }
@keyframes plv2 { 0%, 22% { opacity: 0; } 32%, 92% { opacity: 1; } 100% { opacity: 0; } }
.pl-bars { position: relative; flex: 1; display: flex; align-items: flex-end; gap: 4px; margin-top: 18px; }
.pl-bars::after { content: ""; position: absolute; left: 0; right: 0; bottom: 30%; border-top: 1px dashed rgba(255, 255, 255, 0.45); }
.pl-bars i { flex: 1; height: var(--a); border-radius: 2px 2px 0 0; background: rgba(255, 255, 255, 0.9); animation: plb 8s var(--ease) infinite; animation-delay: var(--d); }
@keyframes plb { 0%, 14% { height: var(--a); background: rgba(255, 255, 255, 0.9); } 40%, 88% { height: var(--b); background: rgba(255, 255, 255, 0.55); } 100% { height: var(--a); background: rgba(255, 255, 255, 0.9); } }
/* MedicAl Wallet: a lab report read line by line, values land on the right */
.pa-scan { flex-direction: row; align-items: center; gap: 20px; background: linear-gradient(150deg, #0B4A66, #1F8FC4); }
.ps-doc { position: relative; flex: none; width: 42%; height: 82%; padding: 14px 14px 0; border-radius: 6px; background: #fff; color: #0B1322; transform: rotate(-3deg); box-shadow: 0 24px 40px -20px rgba(0, 0, 0, 0.5); overflow: hidden; }
.ps-doc b { display: block; font: 600 13px var(--display); }
.ps-doc small { display: block; margin-bottom: 10px; font: 400 10px var(--mono); color: #8B93A1; }
.ps-doc i { display: block; width: var(--w); height: 5px; margin-top: 9px; border-radius: 3px; background: #D5DAE2; }
.ps-beam { position: absolute; left: 0; right: 0; top: 10%; height: 2px; background: #29AAE3; box-shadow: 0 0 14px 4px rgba(41, 170, 227, 0.45); animation: psb 7s linear infinite; }
@keyframes psb { 0% { top: 12%; opacity: 0; } 4% { opacity: 1; } 55% { top: 92%; opacity: 1; } 60%, 100% { top: 92%; opacity: 0; } }
.ps-out { flex: 1; display: grid; gap: 8px; }
.ps-out li { display: flex; justify-content: space-between; gap: 10px; padding: 9px 12px; border-radius: 8px; background: rgba(255, 255, 255, 0.14); border: 1px solid rgba(255, 255, 255, 0.2); font-size: 13px; animation: psr 7s var(--ease) infinite both; animation-delay: calc(var(--k) * .75s + .6s); }
.ps-out li span { color: rgba(255, 255, 255, 0.78); }
.ps-out li b { font: 600 13px var(--display); white-space: nowrap; }
.ps-out .ps-cost { background: #fff; color: #0B4A66; }
.ps-out .ps-cost span { color: #0B4A66; }
@keyframes psr { 0% { opacity: 0; transform: translateX(10px); } 7%, 72% { opacity: 1; transform: none; } 84%, 100% { opacity: 0; transform: none; } }
/* Real time platform: events stream into separate lanes, one per operator */
.pa-stream { background: radial-gradient(rgba(255, 255, 255, 0.07) 1px, transparent 1.3px) 0 0 / 14px 14px, linear-gradient(150deg, #2B1A02, #8A5800); }
.st-lanes { flex: 1; display: grid; align-content: center; gap: 14px; margin-top: 10px; }
.st-lane { display: grid; grid-template-columns: 78px minmax(0, 1fr); align-items: center; gap: 12px; font: 400 11.5px var(--mono); color: rgba(255, 255, 255, 0.72); }
.st-track { position: relative; height: 22px; border-radius: 22px; background: rgba(0, 0, 0, 0.22); border: 1px solid rgba(255, 255, 255, 0.14); overflow: hidden; }
.st-track::after { content: ""; position: absolute; right: 6px; top: 50%; width: 10px; height: 10px; margin-top: -5px; border-radius: 50%; border: 1.5px solid #F6D48C; }
.st-track i { position: absolute; top: 50%; left: -4%; width: 8px; height: 8px; margin-top: -4px; border-radius: 50%; background: #F6D48C; box-shadow: 0 0 10px rgba(246, 212, 140, 0.8); animation: std 3.2s linear infinite; animation-delay: var(--d); }
@keyframes std { 0% { left: -4%; opacity: 0; } 8% { opacity: 1; } 88% { opacity: 1; } 100% { left: 96%; opacity: 0; } }
/* Holiwise: flight, hotel and chat land in one checkout */
.pa-book { align-items: center; justify-content: center; background: radial-gradient(rgba(255, 255, 255, 0.06) 1px, transparent 1.3px) 0 0 / 14px 14px, linear-gradient(150deg, #000000, #3A3A3A); }
.hb-card { position: relative; width: min(300px, 84%); padding: 16px; border-radius: 16px; background: #fff; color: #0B1322; box-shadow: 0 30px 50px -26px rgba(0, 0, 0, 0.8); }
.hb-head { display: flex; justify-content: space-between; align-items: baseline; }
.hb-head b { font: 600 16px var(--display); }
.hb-head span { font: 400 11px var(--mono); color: #8B93A1; }
.hb-steps { margin-top: 10px; }
.hb-steps li { display: grid; grid-template-columns: 16px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 7px 0; border-top: 1px solid #E7EAEF; font-size: 12.5px; }
.hb-steps i { width: 14px; height: 14px; border-radius: 50%; border: 1.5px solid #C5CAD3; animation: hbi 7s var(--ease) infinite both; animation-delay: calc(var(--k) * .7s + .4s); }
@keyframes hbi { 0% { background: transparent; border-color: #C5CAD3; } 8%, 84% { background: #0B1322; border-color: #0B1322; box-shadow: inset 0 0 0 3px #fff; } 92%, 100% { background: transparent; border-color: #C5CAD3; box-shadow: none; } }
.hb-steps em { font: 600 12.5px var(--display); font-style: normal; }
.hb-pay { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-top: 10px; padding: 9px 10px 9px 12px; border-radius: 10px; background: #0B1322; color: #fff; font-size: 12px; }
.hb-pay b { font: 600 12px var(--display); }
.hb-done { position: absolute; right: -10px; top: -12px; padding: 5px 10px; border-radius: 30px; background: #fff; color: #0B1322; border: 1.5px solid #0B1322; font: 600 12px var(--display); transform: rotate(6deg) scale(.6); opacity: 0; animation: hbd 7s var(--ease) infinite; }
@keyframes hbd { 0%, 40% { opacity: 0; transform: rotate(6deg) scale(.6); } 46%, 86% { opacity: 1; transform: rotate(6deg) scale(1); } 92%, 100% { opacity: 0; transform: rotate(6deg) scale(1); } }
@media (max-width: 640px) {
  .pa { padding: 16px; }
  .pa-scan { gap: 12px; }
  .ps-doc { width: 40%; }
  .ps-out li { padding: 7px 9px; font-size: 11.5px; }
  .ps-out li b { font-size: 11.5px; }
  .st-lane { grid-template-columns: 64px minmax(0, 1fr); font-size: 10.5px; }
}
@media (prefers-reduced-motion: reduce) {
  .pl-bars i, .pa-load .pa-top em, .ps-beam, .ps-out li, .st-track i, .hb-steps i, .hb-done { animation: none; }
  .pl-bars i { height: var(--b); }
  .pa-load .pa-top em.v1 { opacity: 0; }
  .hb-done { opacity: 1; transform: rotate(6deg); }
}
@media (max-width: 760px) { .chero-logo .logo-tile img { height: 24%; max-width: 54%; } .chero-logo .lt-pok img { height: 15%; } }

/* Work rail: every card keeps its figure in the bottom corner, photo or not */
.mcard-art .widget { left: 16px; right: auto; top: auto; bottom: 16px; transform: none; width: min(76%, 250px); z-index: 1; }
/* POK phone sits lower so its top edge is fully in view */
img.mc-bg.mc-top { object-position: 50% 0; }

/* Projects, POK: the card shown at its natural size on the brand tint */
.pa-card { display: grid; place-items: center; }
.pcard-art.pa-card > img { width: min(48%, 320px); height: auto; border-radius: 7%; object-fit: contain; box-shadow: 0 26px 40px -20px rgba(6, 54, 92, 0.55); }

/* MedicAl Wallet and Holiwise: their own logos and pictures */
.chero-logo .lt-wide img { height: auto; width: 30%; max-width: 360px; }
@media (max-width: 760px) { .chero-logo .lt-wide img { width: 52%; height: auto; } }
/* On the light logo tiles the result box is a solid ink card, so it reads in both themes */
.chero-logo:has(.lt-medical-wallet, .lt-holiwise, .lt-popsign-ai, .lt-smip, .lt-pok-banner) .widget { --ink: #FFFFFF; --ink-2: rgba(255, 255, 255, 0.72); background: #0B1322; color: #fff; border-color: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: 0 24px 40px -24px rgba(11, 19, 34, 0.55); }

/* Projects, POK: the two Visa cards on POK's own gradient: lime, green, teal and sky */
.pa-cards { display: grid; place-items: center; padding: 6%; }
.pcard-art.pa-cards > img { position: relative; width: 100%; max-width: 620px; height: auto; max-height: 100%; object-fit: contain; }
.pcard-art.pa-cards-pok { background:
    radial-gradient(60% 70% at 0% 0%, rgba(140, 204, 20, 0.95), transparent 70%),
    linear-gradient(118deg, #74C612 0%, #2DB80B 20%, #07AE18 42%, #10B05A 60%, #24B1A2 78%, #38B5F0 100%); }

/* POK case study: its own banner, the cards and coins on POK navy */
.chero-logo .lt-pok-banner { padding-left: 3%; grid-template-rows: 100%; }
.chero-logo .lt-pok-banner img { width: auto; height: 82%; max-width: 54%; max-height: none; object-fit: contain; }
@media (max-width: 760px) {
  .chero-logo .lt-pok-banner { padding: 18px 0 0; }
  .chero-logo .lt-pok-banner img { width: 72%; height: auto; max-width: 300px; max-height: 58%; }
}

/* Case study heroes: the dark result card gets a hairline edge and a soft top light so it stays separate from dark banners */
.chero-logo:has(.lt-medical-wallet, .lt-holiwise, .lt-popsign-ai, .lt-smip, .lt-pok-banner) .widget {
  background: linear-gradient(160deg, #1A2740 0%, #0E1729 55%, #0B1322 100%);
  border: 1px solid rgba(255, 255, 255, 0.16);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.10), 0 0 0 1px rgba(0, 0, 0, 0.35), 0 28px 56px -22px rgba(0, 0, 0, 0.75);
}

/* ================= Round 10: phone fixes ================= */

/* POK logo tiles: a deep navy gradient from #010B13, with a hairline edge and a soft POK blue light so it stays apart from the dark page */
.logo-tile.lt-pok {
  background: radial-gradient(90% 75% at 18% 0%, rgba(11, 102, 174, 0.42), rgba(11, 102, 174, 0) 62%), linear-gradient(160deg, #0B2236 0%, #04111D 48%, #010B13 100%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.18);
}
.lrow-art:has(.lt-pok) { box-shadow: 0 10px 22px -14px rgba(1, 11, 19, 0.6); }

/* Case study heroes: logo sizes resolve against the tile, not the image */
.chero-logo .logo-tile { grid-template-rows: 100%; }
@media (max-width: 760px) {
  .chero-logo .logo-tile:not(.lt-pok-banner) { place-items: center; padding: 28px 24px 158px; }
  .chero-logo .logo-tile:not(.lt-pok-banner) img { width: auto; height: auto; max-width: 56%; max-height: 124px; }
  .chero-logo .lt-wide img, .chero-logo .lt-wide.logo-tile img { width: 74%; max-width: 300px; height: auto; max-height: none; }
  .chero-logo .widget { left: 16px; right: 16px; bottom: 16px; width: auto; transform: none; }
}

/* Architecture: every layer is a panel, so the moving dots always meet a box; on phones the layers stack */
.arch { align-items: stretch; }
.arch-col { justify-content: flex-start; min-width: 0; padding: 10px; border-radius: 10px; background: var(--paper); border: 1px solid var(--rule); }
.arch-col .arch-node { padding: 9px 10px; }
.arch-col .arch-node small { overflow-wrap: anywhere; }
.arch-col em { margin-bottom: auto; }
.arch-col > .arch-node:last-child { margin-bottom: auto; }
.arch-link { flex: 0 0 26px; align-self: center; }
@keyframes packety { to { top: 100%; } }
@media (max-width: 640px) {
  .arch { flex-direction: column; overflow: visible; padding: 12px; }
  .arch-col { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; min-width: 0; flex: none; }
  .arch-col em { grid-column: 1 / -1; margin: 0; }
  .arch-col > .arch-node:last-child { margin-bottom: 0; }
  .arch-col > .arch-node:last-child:nth-child(even) { grid-column: 1 / -1; }
  .arch-node:hover, .arch-node:focus { transform: none; }
  .arch-link { flex: 0 0 28px; width: 6px; height: 28px; overflow: hidden; }
  .arch-link::before { left: 2px; right: auto; top: 0; bottom: 0; width: 2px; height: auto; }
  .arch-link i { left: 0; top: -8px; animation-name: packety; }
}

/* Tokens and themes on phones: the three products stack above the preview, which keeps changing on its own */
@media (max-width: 760px) {
  .themer-body { grid-template-columns: 1fr; gap: 14px; padding: 16px; }
  .themes { grid-template-columns: 1fr; gap: 8px; }
  .theme { grid-template-columns: auto minmax(0, 1fr) auto; column-gap: 12px; padding: 10px 12px; }
  .theme .sw { grid-row: auto; margin: 0; grid-template-columns: repeat(4, 10px); }
  .theme .sw i { width: 10px; height: 10px; }
  .theme em { display: block; }
  .tstage { min-height: 280px; }
}

/* Status chips settle in grey, like every other status on the site */
.complete .chip-swap { background: var(--fill-2); color: var(--ink); }

/* Release 1.4: the running step is drawn in ink, not blue */
.rl-steps li.run .hx { background: var(--ink); }
.rl-steps li.run .rl-st .r { color: var(--ink-2); }

/* tools carousel: floating copy box, wide and short so the logo stays clear */
.tcar-copy { left: 18px; right: 18px; bottom: 18px; width: auto; display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 24px; align-items: center; padding: 14px 18px 15px 20px; border-radius: 12px; }
.tcar-copy > * { grid-column: 1; }
.tcar-copy strong { font-size: clamp(22px, 2.2vw, 28px); }
.tcar-d { margin-top: 6px; font-size: 13.5px; line-height: 1.5; max-width: 60ch; }
.tcar-img img { object-fit: contain; object-position: 50% 0; transform: translateY(-9%) scale(1.04); }
.tcar-card.on .tcar-img img { transform: translateY(-9%); }
.tcar-card[data-k="0"] .tcar-img { background: #0E0E0E; } .tcar-card[data-k="1"] .tcar-img { background: #DE5E33; } .tcar-card[data-k="2"] .tcar-img { background: #F5F5F5; } .tcar-card[data-k="3"] .tcar-img { background: #E7F0ED; }
.tcar-copy .pill { grid-column: 2; grid-row: 1 / span 3; align-self: center; margin-top: 0; }
@media (max-width: 640px) {
  .tcar-card { aspect-ratio: 4 / 5; }
  .tcar-copy { left: 10px; right: 10px; bottom: 10px; display: flex; flex-direction: column; align-items: flex-start; text-align: left; padding: 14px 14px 15px; }
  .tcar-img img { object-fit: contain; object-position: 50% 4%; transform: none; }
  .tcar-card.on .tcar-img img { transform: none; }
  .tcar-copy .pill { align-self: flex-start; margin-top: 12px; }
}

/* Tools carousel: the picture, its ground and the card dim together, so no dark band or edge shows while cards move */
.tcar-card { -webkit-backface-visibility: hidden; backface-visibility: hidden; isolation: isolate; outline: 1px solid transparent; }
.tcar-card[data-k="0"] { background: #0E0E0E; } .tcar-card[data-k="1"] { background: #DE5E33; } .tcar-card[data-k="2"] { background: #F5F5F5; } .tcar-card[data-k="3"] { background: #E7F0ED; }
.tcar-img { overflow: hidden; border-radius: inherit; filter: brightness(var(--dim)); transition: filter .7s ease; -webkit-backface-visibility: hidden; backface-visibility: hidden; }
.tcar-img img, .tcar-card.on .tcar-img img { filter: none; transform: translateY(-9%); transition: none; will-change: auto; }
@media (max-width: 640px) { .tcar-img img, .tcar-card.on .tcar-img img { transform: none; } }