/* Finessely. Every value comes from DESIGN.md tokens. Reference frame: 1366px wide. */

/* Self-hosted fonts (SIL Open Font License, see /fonts/). Latin subset; system fonts cover the rest. */
@font-face { font-family: "Inter Tight"; font-style: normal; font-weight: 400 600; font-display: swap; src: url(/fonts/inter-tight-latin.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url(/fonts/ibm-plex-mono-400-latin.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 500; font-display: swap; src: url(/fonts/ibm-plex-mono-500-latin.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }


:root {
  /* brand: purple */
  --c-deep: #2B1266;
  --c-royal: #3A1A85;
  --c-violet: #7C4DDB;
  --c-lilac: #C3ADF8;
  /* brand: blue */
  --c-night: #0F1030;
  --c-azure: #1E4FD8;
  --c-blue: #2F6BFF;
  --c-sky: #7FB0FF;
  --c-ice: #DCE8FF;
  /* bridge */
  --c-indigo: #4A3AE0;
  --c-white: #FFFFFF;
  --c-black: #14112A;

  /* semantic, light */
  --paper: #FAF9FC;
  --panel: #F1EFF6;
  --panel-2: #E6E3EE;
  --line: #E3E0EA;
  --ink: #14112A;
  --muted: #6B6784;
  --inv-bg: #14112A;
  --blue-text: #1E4FD8; /* blue for small text: passes 4.5:1 on paper */
  --violet-text: #5B2FC9; /* violet for small text on tinted panels */
  --inv-fg: #FFFFFF;
  --btn: #ECE9F3;
  --btn-h: #E1DDEB;
  --deploy: #121026;
  --shadow: 0 1px 2px rgb(20 17 42 / .06), 0 12px 32px -8px rgb(20 17 42 / .16);
  --shadow-lift: 0 30px 50px -18px rgb(20 17 42 / .35);

  /* type */
  --font: "Helvetica Neue", "Inter Tight", Helvetica, Arial, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --fs-hero: clamp(46px, 7.05vw, 96px);
  --fs-xl: clamp(34px, 4.4vw, 60px);
  --fs-deploy: clamp(28px, 3.5vw, 48px);
  --fs-lg: clamp(26px, 2.95vw, 40px);
  --fs-card: clamp(22px, 2.2vw, 30px);
  --fs-md: clamp(18px, 1.62vw, 22px);
  --fs-body: 17px;
  --fs-sm: 15px;
  --fs-xs: 13px;
  --fs-mono: 12px;
  --tr: -0.022em;
  --tr-mono: 0.02em;

  /* space */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 32px;
  --s-7: 40px;
  --s-8: 56px;
  --s-9: 80px;
  --s-10: 120px;
  --gut: clamp(16px, 2.93vw, 40px);
  --nav-h: 50px;

  /* shape and motion */
  --r-1: 3px;
  --r-2: 6px;
  --ease: cubic-bezier(.2, .7, .1, 1);
  --ease-io: cubic-bezier(.65, 0, .35, 1);
  --t-1: .15s;
  --t-2: .3s;
  --t-3: .6s;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #0E0C1A; --panel: #16132A; --panel-2: #1E1A36; --line: #2A2642; --ink: #ECEAF4; --muted: #9C97B5;
    --blue-text: #7FB0FF; --violet-text: #C3ADF8; --inv-bg: #ECEAF4; --inv-fg: #0E0C1A; --btn: #1E1A36; --btn-h: #2A2642; --deploy: #08071A;
    --shadow: 0 1px 2px rgb(0 0 0 / .3), 0 12px 32px -8px rgb(0 0 0 / .6); --shadow-lift: 0 30px 50px -18px rgb(0 0 0 / .8);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --paper: #0E0C1A; --panel: #16132A; --panel-2: #1E1A36; --line: #2A2642; --ink: #ECEAF4; --muted: #9C97B5;
  --inv-bg: #ECEAF4; --inv-fg: #0E0C1A; --btn: #1E1A36; --btn-h: #2A2642; --deploy: #08071A;
  --shadow: 0 1px 2px rgb(0 0 0 / .3), 0 12px 32px -8px rgb(0 0 0 / .6); --shadow-lift: 0 30px 50px -18px rgb(0 0 0 / .8);
  color-scheme: dark;
}

/* ================= base ================= */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--nav-h) + var(--s-5)); }
body { margin: 0; background: var(--paper); color: var(--ink); font: 400 var(--fs-body)/1.45 var(--font); letter-spacing: -0.005em; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: clip; transition: background var(--t-2) var(--ease), color var(--t-2) var(--ease); }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }
h1, h2, h3, p, ul, ol, pre { margin: 0; }
h1, h2, h3 { font-weight: 500; letter-spacing: var(--tr); }
ul, ol { list-style: none; padding: 0; }
svg { width: 16px; height: 16px; flex: none; }
::selection { background: var(--c-violet); color: var(--c-white); }
:focus-visible { outline: 2px solid var(--c-blue); outline-offset: 2px; }
.mono { font-family: var(--mono); font-size: var(--fs-mono); font-weight: 400; letter-spacing: var(--tr-mono); text-transform: uppercase; }
.center { text-align: center; }
.sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.nw { white-space: nowrap; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.skip { position: absolute; left: -999px; top: var(--s-2); z-index: 200; background: var(--inv-bg); color: var(--inv-fg); padding: var(--s-2) var(--s-3); }
.skip:focus { left: var(--s-2); }
.flip { transform: scaleX(-1); }
.mark { color: var(--ink); }

/* pixel icons (painted by main.js) */
.px { display: inline-block; width: 24px; height: 24px; flex: none; background: var(--px) center / 100% 100% no-repeat; image-rendering: pixelated; }
.px[data-white], .px[data-mono] { background: currentColor; -webkit-mask: var(--px) center / 100% 100% no-repeat; mask: var(--px) center / 100% 100% no-repeat; }
.px[data-white] { color: var(--c-white); }
.px-lg { width: 36px; height: 36px; }
.px-xl { width: 96px; height: 96px; }

/* reveal */
.reveal { opacity: 0; transform: translateY(16px); transition: opacity var(--t-3) var(--ease), transform var(--t-3) var(--ease); }
.reveal.in { opacity: 1; transform: none; }

/* ================= buttons ================= */
.btn-grey, .btn-light, .btn-dark, .btn-sm {
  display: inline-flex; align-items: center; gap: var(--s-3); white-space: nowrap; font-size: var(--fs-sm); font-weight: 500;
  border-radius: var(--r-2); transition: background var(--t-1) var(--ease), color var(--t-1) var(--ease);
}
.btn-grey svg, .btn-light svg, .btn-dark svg, .btn-sm svg { width: 12px; height: 12px; transition: transform var(--t-2) var(--ease); }
:is(.btn-grey, .btn-light, .btn-dark, .btn-sm):hover svg { transform: translateX(3px); }
.btn-grey { height: 48px; padding: 0 var(--s-4); background: var(--btn); }
.btn-grey:hover { background: var(--btn-h); }
.btn-light { height: 40px; padding: 0 var(--s-3); background: #EEEDF2; color: var(--c-black); border-radius: var(--r-1); }
.btn-light:hover { background: var(--c-white); }
.btn-dark { height: 40px; padding: 0 var(--s-3); background: var(--c-black); color: var(--c-white); border-radius: var(--r-1); }
.btn-dark:hover { background: #000; }
.btn-xs { height: 32px; font-size: var(--fs-xs); }
.btn-sm { height: 32px; padding: 0 var(--s-3); background: var(--c-white); color: var(--c-black); font-size: var(--fs-xs); border-radius: var(--r-1); }

/* ================= nav ================= */
.nav {
  position: sticky; top: 0; z-index: 100; display: flex; height: var(--nav-h);
  background: var(--paper); border-bottom: 1px solid var(--line);
}
.cell {
  display: flex; align-items: center; gap: var(--s-3); height: 100%; padding: 0 var(--s-4);
  font-size: 16px; font-weight: 500; white-space: nowrap; background: var(--paper); border: 0; border-right: 1px solid var(--line); cursor: pointer;
  transition: background var(--t-1) var(--ease);
}
.cell:hover, .nav-item.open > .cell { background: var(--panel); }
.nav-logo { padding: 0 var(--s-2) 0 10px; width: 48px; }
.nav-logo .mark { width: 28px; height: 22px; transition: transform var(--t-3) var(--ease); }
.nav-logo:hover .mark { transform: scale(1.08); }
.nav-main { display: flex; }
.nav-right { display: flex; margin-left: auto; }
.nav-right .cell { border-right: 0; border-left: 1px solid var(--line); }
.nav-right .chev-d { width: 12px; height: 12px; transition: transform var(--t-2) var(--ease); }
.nav-item.open .chev-d { transform: rotate(180deg); }
.cell-dark { background: var(--inv-bg); color: var(--inv-fg); border-left-color: var(--inv-bg) !important; min-width: 148px; justify-content: space-between; }
.cell-dark:hover { background: var(--c-violet); color: var(--c-white); }
.cell-dark svg { width: 12px; height: 12px; transition: transform var(--t-2) var(--ease); }
.cell-dark:hover svg { transform: translateX(3px); }
.burger { display: none; width: var(--nav-h); justify-content: center; padding: 0; }
.burger .i-close { display: none; }
.nav-item { position: relative; height: 100%; }

.menu {
  position: absolute; top: calc(100% + 1px); left: 0; z-index: 5; display: flex; min-width: 344px;
  background: var(--paper); border: 1px solid var(--line); border-top: 0; border-radius: 0 0 var(--r-2) var(--r-2); box-shadow: var(--shadow);
  opacity: 0; visibility: hidden; transform: translateY(-4px); transition: opacity var(--t-1) var(--ease), transform var(--t-2) var(--ease), visibility 0s linear var(--t-2);
}
.nav-item.open > .menu { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.menu-end { left: auto; right: 0; min-width: 300px; }
.menu-col { flex: 1; display: flex; flex-direction: column; }
.menu-label { padding: var(--s-4); color: var(--muted); border-bottom: 1px solid var(--line); }
.menu-row { display: flex; align-items: center; gap: var(--s-3); min-height: 57px; padding: 0 var(--s-4); border-bottom: 1px solid var(--line); font-size: 16px; font-weight: 500; transition: background var(--t-1) var(--ease); }
.menu-row span { flex: 1; }
.menu-row:last-child { border-bottom: 0; }
.menu-row:hover { background: var(--panel); }
.menu-row .chev { width: 14px; height: 14px; transition: transform var(--t-2) var(--ease); }
.menu-row:hover .chev { transform: translateX(3px); }
.menu-more { display: inline-flex; align-items: center; gap: var(--s-1); padding: var(--s-4); font-size: var(--fs-xs); font-weight: 500; }
.menu-more svg { width: 11px; height: 11px; }
.menu-more:hover { color: var(--c-violet); }
.menu-2 { min-width: 586px; }
.menu-2 .menu-col { flex: 0 0 344px; border-right: 1px solid var(--line); }
.menu-side { flex: 1; display: flex; flex-direction: column; }
.menu-side .menu-label { border-bottom: 0; }
.menu-side a { display: flex; align-items: center; gap: var(--s-1); padding: 5px var(--s-4); font-size: var(--fs-sm); font-weight: 500; }
.menu-side a svg { width: 12px; height: 12px; }
.menu-side a:hover { color: var(--c-violet); }

/* ================= hero ================= */
.hero { display: grid; grid-template-columns: 70% 30%; }
.hero-l { display: flex; flex-direction: column; min-width: 0; }
.hero-title {
  display: flex; flex-direction: column; justify-content: center; height: 315px; padding: 0 var(--s-7);
  font-size: var(--fs-hero); font-weight: 500; line-height: 1; letter-spacing: -0.03em;
}
.hero-title .ln { display: block; padding-bottom: .06em; animation: rise .9s var(--ease) both; }
.hero-title .ln:nth-child(2) { animation-delay: .08s; }
@keyframes rise { from { opacity: 0; transform: translateY(28px); } }

.mosaic { position: relative; height: 400px; overflow: hidden; background: var(--c-indigo); }
.hero-l .mosaic { flex: 1; min-height: 400px; }
.mcell { position: absolute; width: var(--cs); height: var(--cs); transition: background-color .9s var(--ease-io), transform .9s var(--ease-io); }
.mlabel { position: absolute; z-index: 2; color: rgb(255 255 255 / .82); font-size: 10px; }
.ml-a { left: 126px; top: 184px; }
.ml-b { left: 766px; top: 50px; }
.mdot { position: absolute; z-index: 2; width: 5px; height: 5px; background: var(--c-black); translate: -50% -50%; }
.mline { position: absolute; z-index: 2; background: rgb(20 17 42 / .28); }
.mh-1, .mh-2 { left: 0; right: 0; height: 1px; }
.mv-1, .mv-2 { top: 0; bottom: 0; width: 1px; }
.mh-1 { top: 40px; } .mh-2 { top: 200px; } .mv-1 { left: 200px; } .mv-2 { left: 760px; }
.md-1 { left: 200px; top: 40px; } .md-2 { left: 760px; top: 40px; } .md-3 { left: 200px; top: 200px; } .md-4 { left: 760px; top: 200px; }

.hero-r { display: grid; grid-template-rows: 220px auto; min-width: 0; }
.hero-tag { display: flex; align-items: flex-end; padding: 0 var(--s-7) 36px 36px; background: var(--panel); }
.hero-tag p { font-size: var(--fs-md); font-weight: 500; line-height: 1.22; letter-spacing: -0.012em; animation: rise .9s var(--ease) .15s both; }
.hero-news { display: flex; flex-direction: column; padding: 40px var(--s-7) 0 var(--s-7); }
.arrows { display: grid; gap: 6px; color: var(--muted); }
.arrows svg { width: 14px; height: 14px; animation: nudge 1.8s var(--ease-io) infinite; }
.arrows svg:nth-child(2) { animation-delay: .15s; }
.arrows svg:nth-child(3) { animation-delay: .3s; }
@keyframes nudge { 0%, 60%, 100% { transform: none; opacity: .45; } 30% { transform: translateY(3px); opacity: 1; } }
.news-label { display: flex; justify-content: space-between; margin-top: 56px; margin-bottom: var(--s-3); color: var(--muted); }
.news-label a { color: var(--ink); background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: background-size var(--t-2) var(--ease); }
.news-label a:hover { background-size: 100% 1px; }
.news-list { display: grid; gap: var(--s-2); padding-bottom: var(--s-7); }
.news { display: flex; align-items: stretch; min-height: 60px; border: 1px solid var(--line); border-radius: var(--r-2); background: var(--paper); overflow: hidden; transition: border-color var(--t-1) var(--ease); }
.news:hover { border-color: var(--muted); }
.news-thumb { display: grid; place-items: center; width: 60px; flex: none; background: var(--panel); }
.news-text { display: flex; align-items: center; padding: var(--s-2) var(--s-3); font-size: var(--fs-sm); font-weight: 500; line-height: 1.25; }
.news-go { display: grid; place-items: center; width: 40px; flex: none; margin-left: auto; border-left: 1px solid var(--line); }
.news-go svg { width: 13px; height: 13px; transition: transform var(--t-2) var(--ease); }
.news:hover .news-go svg { transform: translateX(3px); }

/* ================= statement ================= */
/* One full-width panel. main.js lights the sentence word by word as it scrolls into view. */
.statement { position: relative; }
.st-sticky { position: relative; }
.st-panel { display: grid; place-content: center; justify-items: center; gap: var(--s-6); padding: var(--s-9) var(--s-7); background: var(--panel); text-align: center; container-type: inline-size; }
.st-panel > * { min-width: 0; }
.st-icons { display: flex; gap: var(--s-5); justify-content: center; }
.st-text { text-wrap: balance; max-width: 820px; font-size: clamp(22px, 3.4cqi, 40px); font-weight: 500; line-height: 1.14; letter-spacing: -0.028em; }
.st-text .w { opacity: .14; transition: opacity .45s var(--ease); }
.st-text .w.on { opacity: 1; }

/* ================= tools strip ================= */
.strip { margin-top: var(--s-7); overflow: hidden; }
.strip-label { padding: 0 var(--gut) var(--s-3); color: var(--muted); }
.strip-row { display: flex; width: max-content; border-block: 1px solid var(--line); animation: drift 90s linear infinite; }
.strip:hover .strip-row { animation-play-state: paused; }
@keyframes drift { to { transform: translateX(-50%); } }
.strip-cell { position: relative; display: grid; place-items: center; width: 270px; height: 270px; border-right: 1px solid var(--line); transition: background var(--t-2) var(--ease); }
.strip-cat { position: absolute; left: var(--s-4); bottom: var(--s-4); color: var(--muted); }
.strip-cell:hover { background: var(--panel); }
.wm { font-size: 28px; font-weight: 700; letter-spacing: -0.03em; color: var(--ink); opacity: .82; transition: opacity var(--t-2) var(--ease); }
.strip-cell:hover .wm { opacity: 1; }
.wm-2 { font-weight: 500; font-style: italic; }
.wm-3 { font-weight: 800; letter-spacing: -0.04em; }
.wm-4 { font-weight: 600; letter-spacing: -0.02em; }
.wm-5 { font-weight: 500; letter-spacing: -0.01em; }

/* ================= carousel ================= */
.work { padding-top: var(--s-9); }
.carousel {
  display: flex; gap: var(--s-2); overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gut);
  padding: 0 var(--gut); scrollbar-width: none; overscroll-behavior-x: contain; cursor: grab;
}
.carousel::-webkit-scrollbar { display: none; }
.carousel.drag { cursor: grabbing; scroll-snap-type: none; }
.carousel.drag * { pointer-events: none; }
.slide { position: relative; flex: none; width: min(72.2vw, 986px); height: clamp(360px, 35.1vw, 480px); scroll-snap-align: start; border-radius: var(--r-2); overflow: hidden; background: var(--c-night); color: var(--c-white); isolation: isolate; }
.slide-art { position: absolute; inset: 0; z-index: -1; display: grid; place-items: center; transition: transform 1.2s var(--ease); }
.slide:hover .slide-art { transform: scale(1.035); }
.slide-art::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgb(10 8 30 / .72) 0%, rgb(10 8 30 / .25) 55%, transparent 80%), linear-gradient(0deg, rgb(10 8 30 / .5), transparent 40%); }
.slide-art .px-xl { position: relative; z-index: 1; margin-left: 38%; width: clamp(96px, 14vw, 192px); height: clamp(96px, 14vw, 192px); filter: drop-shadow(0 20px 30px rgb(0 0 0 / .35)); transition: transform 1.2s var(--ease); }
.slide:hover .slide-art .px-xl { transform: translateY(-6px); }
.slide-body { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: flex-start; padding: var(--s-5); }
.slide-brand { display: flex; align-items: center; gap: var(--s-2); font-size: var(--fs-md); font-weight: 600; letter-spacing: -0.01em; }
.slide-brand .mark { width: 30px; height: 24px; color: var(--c-white); }
.chip { margin-top: var(--s-6); padding: 3px 6px; background: var(--c-white); color: var(--c-black); border-radius: 2px; font-size: 11px; }
.slide h3 { margin-top: var(--s-3); max-width: 440px; font-size: var(--fs-card); line-height: 1.2; }
.slide .btn-sm { margin-top: auto; }
.carousel-ctl { display: flex; justify-content: space-between; align-items: center; padding: var(--s-6) var(--gut) 0; }
.dots { display: flex; margin-left: -9px; }
/* 24px tap target around a 6px dot */
.dot { width: 24px; height: 24px; padding: 9px; border: 0; border-radius: 12px; background: var(--line); background-clip: content-box; cursor: pointer; transition: width var(--t-2) var(--ease), background var(--t-2) var(--ease); }
.dot.on { width: 40px; background: var(--ink); background-clip: content-box; }
.arrows-ctl { display: flex; gap: var(--s-1); }
.ctl { display: grid; place-items: center; width: 28px; height: 28px; padding: 0; border: 0; border-radius: var(--r-1); background: transparent; cursor: pointer; transition: background var(--t-1) var(--ease), opacity var(--t-1); }
.ctl:hover { background: var(--panel); }
.ctl svg { width: 13px; height: 13px; }
.ctl:disabled { opacity: .3; cursor: default; background: transparent; }

/* ================= do it all ================= */
.doall { padding: var(--s-10) 0; overflow: hidden; }
.h-xl { font-size: var(--fs-xl); line-height: 1.05; letter-spacing: -0.03em; }
.puzzle { --k: 1; position: relative; width: 960px; height: 600px; margin: var(--s-9) auto 0; transform: scale(var(--k)); transform-origin: top center; margin-bottom: calc((var(--k) - 1) * 600px); }
.pz, .pz-blank, .pz-diamond, .pz-dot { position: absolute; }
.pz-blank { background: var(--panel-2); }
.b1 { left: 80px; top: 200px; width: 160px; height: 200px; }
.b2 { left: 760px; top: 400px; width: 200px; height: 200px; }
.b3 { left: 200px; top: 500px; width: 80px; height: 100px; }
.pz-diamond { width: 58px; height: 58px; background: var(--panel); border: 1px solid var(--line); rotate: 45deg; }
.d1 { left: 211px; top: 115px; }
.d2 { left: 985px; top: 430px; }
.pz-dot { width: 5px; height: 5px; background: var(--ink); translate: -50% -50%; z-index: 3; }
.t1 { left: 80px; top: 200px; } .t2 { left: 240px; top: 400px; } .t3 { left: 760px; top: 200px; } .t4 { left: 760px; top: 520px; } .t5 { left: 200px; top: 400px; }
.pz { --bar: var(--c-violet); --dir: 1; z-index: 2; background: var(--bar); }
.pz-card {
  position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-end; padding: var(--s-3);
  background: var(--paper); border: 1px solid var(--line); transition: transform .45s var(--ease), box-shadow .45s var(--ease);
}
.pz:hover .pz-card, .pz:focus-visible .pz-card { transform: translateX(calc(var(--dir) * 18px)); }
.pz .px { position: absolute; left: 18px; top: 18px; width: 28px; height: 28px; }
.pz b { font-size: 22px; font-weight: 500; letter-spacing: var(--tr); line-height: 1.1; }
.pz b.big { font-size: 24px; }
.pz-d { margin-top: 6px; font-size: var(--fs-xs); line-height: 1.35; max-width: 220px; }
.pz-1 { left: 280px; top: 0; width: 400px; height: 200px; }
.pz-2 { left: 240px; top: 200px; width: 200px; height: 200px; }
.pz-3 { left: 440px; top: 200px; width: 240px; height: 200px; }
.pz-4 { left: 760px; top: 200px; width: 200px; height: 200px; background: transparent; }
.pz-5 { left: 0; top: 400px; width: 200px; height: 200px; }
.pz-6 { left: 280px; top: 400px; width: 400px; height: 200px; }
.pz-4 .pz-card, .pz-5 .pz-card { padding: var(--s-3) var(--s-3) var(--s-4); }
.pz-tilt .pz-card { transform-origin: 60% 80%; transition: transform .5s var(--ease), box-shadow .5s var(--ease); }
.pz-tilt:hover .pz-card, .pz-tilt:focus-visible .pz-card { transform: translate(6px, -10px) rotate(9deg); box-shadow: var(--shadow-lift); }
.pz-tilt:hover { z-index: 4; }
.puzzle .pz, .puzzle .pz-blank, .puzzle .pz-diamond { opacity: 0; translate: 0 14px; transition: opacity .8s var(--ease), translate .8s var(--ease); transition-delay: calc(var(--i, 0) * 70ms); }
.puzzle.in .pz, .puzzle.in .pz-blank, .puzzle.in .pz-diamond { opacity: 1; translate: 0 0; }

/* ================= products ================= */
.products { display: grid; grid-template-columns: 298px minmax(0, 1fr) var(--s-7); border-top: 1px solid var(--line); }
.rail { position: relative; }
.rail-in { position: sticky; top: calc(50vh - 138px + var(--nav-h) / 2); display: grid; gap: var(--s-2); padding: var(--s-5) 0 var(--s-5) 56px; }
.rail-btn { display: grid; place-items: center; width: 36px; height: 36px; border-radius: var(--r-1); background: var(--panel); color: var(--muted); transition: background var(--t-2) var(--ease), color var(--t-2) var(--ease); }
.rail-btn { position: relative; }
.rail-btn .px { width: 24px; height: 24px; }
.rail-btn::after {
  content: attr(data-tip); position: absolute; left: calc(100% + 10px); top: 50%; translate: -4px -50%; z-index: 3;
  padding: 5px var(--s-2); border-radius: var(--r-1); background: var(--inv-bg); color: var(--inv-fg);
  font-size: var(--fs-mono); font-weight: 500; white-space: nowrap; opacity: 0; pointer-events: none;
  transition: opacity var(--t-1) var(--ease), translate var(--t-2) var(--ease);
}
.rail-btn:hover::after, .rail-btn:focus-visible::after { opacity: 1; translate: 0 -50%; }
.rail-btn:hover { background: var(--btn-h); color: var(--ink); }
.rail-btn.is-on { background: var(--inv-bg); color: var(--inv-fg); }
.p-col { border-inline: 1px solid var(--line); }
.p-sec { padding: var(--s-8) var(--s-5) var(--s-5); border-bottom: 1px solid var(--line); }
.p-sec:last-child { border-bottom: 0; }
.p-head { display: flex; justify-content: space-between; align-items: center; gap: var(--s-4); }
.h-lg { font-size: var(--fs-lg); line-height: 1.1; letter-spacing: -0.028em; }
.p-sub { margin: var(--s-6) 0; font-size: var(--fs-body); max-width: 760px; }
.tags { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-5); }
.tags li { padding: 5px var(--s-2); background: var(--panel); font-family: var(--mono); font-size: var(--fs-mono); letter-spacing: var(--tr-mono); text-transform: uppercase; }

/* art: a fixed 980 x 430 stage scaled to fit its column */
.art { --k: 1; position: relative; height: calc(430px * var(--k)); overflow: hidden; }
.art::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background-image: linear-gradient(var(--gl) 1px, transparent 1px), linear-gradient(90deg, var(--gl) 1px, transparent 1px); background-size: calc(55px * var(--k)) calc(55px * var(--k)); background-position: calc(50% - 490px * var(--k)) 0; }
.art-stage { position: absolute; left: 50%; top: 0; z-index: 2; width: 980px; height: 430px; margin-left: -490px; transform: scale(var(--k)); transform-origin: top center; }
.art-stage .mlayer { position: absolute; inset: 0; z-index: -1; }
.art-blue { background: radial-gradient(60% 80% at 60% 40%, #4A82FF, var(--c-blue) 55%, var(--c-azure)); --gl: rgb(255 255 255 / .16); }
.art-night { background: radial-gradient(60% 90% at 45% 30%, #1B1C4A, var(--c-night)); --gl: rgb(127 176 255 / .1); }
.art-purple { background: var(--c-violet); --gl: rgb(255 255 255 / .1); }
.art-sky { background: radial-gradient(70% 80% at 50% 20%, #9CC2FF, var(--c-sky) 50%, #5A8FFF); --gl: rgb(255 255 255 / .22); }
.art-lilac { background: radial-gradient(70% 90% at 50% 30%, #D8CAFB, var(--c-lilac) 60%, #AE93F2); --gl: rgb(255 255 255 / .35); }
.art-paper { background: var(--panel); --gl: var(--line); }
.tile { position: absolute; left: calc(var(--x) * 55px + 1px); top: calc(var(--y) * 55px + 1px); display: grid; place-items: center; width: 54px; height: 54px; background: rgb(255 255 255 / .14); transition: background var(--t-2) var(--ease); }
.tile:hover { background: rgb(255 255 255 / .26); }
.tile-2 { width: 109px; height: 109px; }
.tile-l { background: rgb(255 255 255 / .4); }
.tile .px { width: 24px; height: 24px; }
.node { position: absolute; left: calc(var(--x) * 55px); top: calc(var(--y) * 55px); display: grid; place-items: center; width: 110px; height: 110px; }
.wire { position: absolute; inset: 0; width: 100%; height: 100%; fill: none; stroke: rgb(255 255 255 / .7); stroke-width: 1.5; stroke-linejoin: round; }
.wire-d { stroke: rgb(20 17 42 / .3); }
.wire path { stroke-dasharray: 1400; stroke-dashoffset: 1400; transition: stroke-dashoffset 2.4s var(--ease); }
.art.in .wire path { stroke-dashoffset: 0; }
.wdot { position: absolute; z-index: 3; width: 7px; height: 7px; border-radius: 50%; background: var(--c-white); translate: -50% -50%; box-shadow: 0 0 0 3px rgb(255 255 255 / .22); }
.warr { position: absolute; z-index: 3; width: 0; height: 0; margin: -5px 0 0 -9px; border-block: 5px solid transparent; border-left: 9px solid var(--c-white); transform-origin: 100% 50%; opacity: 0; transition: opacity .4s var(--ease) 1.6s; }
.art.in .warr { opacity: 1; }
.wdot.is-d { background: var(--c-black); box-shadow: 0 0 0 3px rgb(20 17 42 / .1); }
.warr.is-d { border-left-color: var(--c-black); }

.ui { position: absolute; background: var(--c-white); color: var(--c-black); border-radius: var(--r-2); box-shadow: 0 1px 2px rgb(0 0 0 / .08), 0 16px 40px -12px rgb(10 8 40 / .35); }
.ui-prompt { left: 50%; top: 90px; width: 424px; translate: -50% 0; background: transparent; box-shadow: none; display: grid; gap: var(--s-2); }
.ui-input { display: flex; align-items: center; gap: var(--s-3); height: 46px; padding: 0 var(--s-2); background: var(--c-white); border-radius: var(--r-2); box-shadow: 0 16px 40px -12px rgb(10 8 40 / .35); }
.ui-plus, .ui-send { display: grid; place-items: center; width: 30px; height: 30px; flex: none; border-radius: var(--r-1); }
.ui-plus { border: 1px solid #E3E0EA; }
.ui-plus svg { width: 12px; height: 12px; }
.ui-send { margin-left: auto; background: var(--c-black); color: var(--c-white); }
.ui-send svg { width: 13px; height: 13px; }
.ui-ph { font-size: var(--fs-sm); color: #8D89A3; white-space: nowrap; overflow: hidden; }
.ui-ph::after { content: ""; display: inline-block; width: 1px; height: 1em; margin-left: 1px; vertical-align: -2px; background: var(--c-blue); animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.ui-list { padding: var(--s-2); background: var(--c-white); border-radius: var(--r-2); box-shadow: 0 16px 40px -12px rgb(10 8 40 / .35); }
.ui-list li { display: flex; align-items: center; gap: var(--s-3); height: 38px; padding: 0 var(--s-3); border-radius: var(--r-1); font-size: 13px; transition: background var(--t-1) var(--ease); }
.ui-list li:hover { background: #F1EFF6; }
.ui-list svg { width: 14px; height: 14px; color: #4F4A6B; }

.ui-code { left: 50%; top: 0; width: 400px; translate: -40% 0; padding: var(--s-4); background: rgb(22 20 58 / .92); color: #E6E3F5; border: 1px solid rgb(127 176 255 / .18); border-top: 0; border-radius: 0 0 var(--r-2) var(--r-2); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.ui-code p { display: flex; align-items: center; gap: var(--s-2); font-family: var(--mono); font-size: 11px; color: #A8A3C7; margin-bottom: var(--s-3); }
.ui-code .ok span { width: 8px; height: 8px; border-radius: 50%; background: #45D483; box-shadow: 0 0 0 3px rgb(69 212 131 / .2); animation: pulse-ok 2s var(--ease-io) infinite; }
@keyframes pulse-ok { 50% { box-shadow: 0 0 0 5px rgb(69 212 131 / .08); } }
.ui-code pre { font-family: var(--mono); font-size: 11.5px; line-height: 1.65; color: #D9D5F0; white-space: pre; }
.ui-code pre b { display: inline-block; margin-top: var(--s-2); font-weight: 500; color: var(--c-sky); }
.ui-code-r { left: auto; right: 90px; top: 30px; translate: 0 0; width: 380px; border-top: 1px solid rgb(127 176 255 / .18); border-radius: var(--r-2); }
.ui-code-r .dim::before { content: ""; width: 8px; height: 8px; border-radius: 50%; border: 1.5px solid var(--c-sky); border-right-color: transparent; animation: spin 1s linear infinite; }
@keyframes spin { to { rotate: 360deg; } }
.ui-doc { left: 170px; top: 70px; width: 290px; height: 290px; padding: var(--s-5); background-color: #FBFAFE; background-image: linear-gradient(#EFEDF5 1px, transparent 1px), linear-gradient(90deg, #EFEDF5 1px, transparent 1px); background-size: 12px 12px; }
.doc-page { position: relative; display: grid; gap: 10px; align-content: start; justify-items: start; height: 100%; padding: var(--s-4); background: var(--c-white); border: 1px solid #E3E0EA; overflow: hidden; }
.doc-page .px-xl { width: 64px; height: 64px; margin-bottom: var(--s-2); }
.doc-page span { width: 100%; height: 8px; background: #ECE9F3; }
.doc-page span.s { width: 60%; }
.doc-page .scan { position: absolute; left: 0; right: 0; top: 0; height: 2px; width: auto; background: var(--c-blue); box-shadow: 0 0 12px 2px rgb(47 107 255 / .5); animation: scan 2.6s var(--ease-io) infinite alternate; }
@keyframes scan { to { top: calc(100% - 2px); } }

.ui-cards { position: absolute; left: 50%; top: 0; translate: -50% 0; display: flex; gap: var(--s-4); padding: 0 var(--s-5) var(--s-5); background: rgb(47 107 255 / .35); border-radius: 0 0 var(--r-2) var(--r-2); }
.ui-menu { position: relative; width: 196px; padding: var(--s-3); border-radius: 0 0 var(--r-2) var(--r-2); transition: transform var(--t-2) var(--ease); }
.ui-menu:hover { transform: translateY(4px); }
@media (max-width: 560px) { .ui-cards { scale: .52; transform-origin: 50% 0; } }
@media (max-width: 360px) { .ui-cards { scale: .44; } }
.ui-mh { font-size: 13px; font-weight: 600; }
.ui-md { margin: var(--s-1) 0 var(--s-3); font-size: 11px; line-height: 1.35; color: #6B6784; }
.ui-mi { display: flex; justify-content: space-between; align-items: center; padding: 7px 0; border-top: 1px solid #EFEDF5; font-size: 12px; }
.ui-mi svg { width: 10px; height: 10px; color: #8D89A3; }

.ui-racks { left: 50%; top: 56px; width: 520px; translate: -50% 0; padding: var(--s-4); }
.ui-rh { display: flex; align-items: center; gap: var(--s-2); justify-content: center; font-size: 13px; font-weight: 600; margin-bottom: var(--s-4); }
.pill { padding: 1px 6px; border-radius: 3px; font-size: 11px; font-weight: 600; }
.pill-a { background: var(--c-violet); color: var(--c-white); }
.pill-b { background: var(--c-sky); color: var(--c-black); }
.racks { display: grid; grid-template-columns: repeat(6, 1fr); gap: var(--s-3); }
.rack { display: grid; gap: 4px; }
.rack p { font-size: 10px; color: #6B6784; text-align: center; margin-bottom: 2px; }
.rack i { height: 10px; border-radius: 1px; background: var(--c-sky); transition: background-color .5s var(--ease); }

.ui-stack { position: absolute; left: 50%; top: 50%; translate: -50% -50%; display: grid; gap: var(--s-3); }
.ui-pill { display: flex; align-items: center; gap: var(--s-3); height: 44px; padding: 0 var(--s-4) 0 var(--s-3); background: var(--c-white); color: var(--c-black); border: 1px solid #E3E0EA; border-radius: var(--r-2); font-size: 14px; font-weight: 500; box-shadow: 0 8px 20px -10px rgb(10 8 40 / .25); transition: transform var(--t-2) var(--ease); }
.ui-pill:hover { transform: translateX(4px); }
.ui-pill .px { width: 24px; height: 24px; }

/* ================= partnership ================= */
.partner { padding: var(--s-9) var(--gut) var(--s-10); border-top: 1px solid var(--line); }
.partner-row { display: flex; justify-content: space-between; align-items: center; gap: var(--s-5); margin: var(--s-6) 0 var(--s-7); }
.partner-row p { font-size: var(--fs-md); max-width: 780px; line-height: 1.3; }
.pcells { display: grid; grid-template-columns: repeat(4, 1fr); border: 1px solid var(--line); }
.pcell {
  position: relative; display: flex; flex-direction: column; justify-content: space-between; align-items: flex-start; gap: var(--s-5);
  min-height: 400px; padding: var(--s-6); text-align: left; background: var(--panel); border: 0; border-right: 1px solid var(--line); cursor: pointer;
  transition: background var(--t-2) var(--ease);
}
.pcell:last-child { border-right: 0; }
.pcell:hover, .pcell.is-on { background: var(--paper); }
.pcell .px { transition: transform var(--t-3) var(--ease); }
.pcell:hover .px { transform: translateY(-3px); }
.pbar { position: absolute; left: 0; top: -1px; height: 4px; width: 0; background: linear-gradient(90deg, var(--c-violet), var(--c-blue)); }
.pcell.is-on .pbar { animation: fill 6s linear forwards; }
.pcells.paused .pcell.is-on .pbar { animation-play-state: paused; }
@keyframes fill { to { width: 100%; } }
.pc-b { display: grid; gap: var(--s-3); }
.pcell b { font-size: var(--fs-md); font-weight: 500; letter-spacing: var(--tr); }
.pcell .pc-b > span { font-size: var(--fs-sm); line-height: 1.4; color: var(--muted); max-height: 0; opacity: 0; overflow: hidden; transition: max-height .5s var(--ease), opacity .4s var(--ease); }
.pcell.is-on .pc-b > span { max-height: 120px; opacity: 1; }

/* ================= deploy ================= */
.deploy { padding: var(--s-9) var(--gut) var(--s-8); background: var(--deploy); color: #ECEAF4; text-align: center; }
.deploy-eye { color: #A8A3C7; }
.deploy .st-icons { margin: var(--s-5) 0 var(--s-6); }
.deploy-title { max-width: 1000px; margin: 0 auto; font-size: var(--fs-deploy); line-height: 1.18; letter-spacing: -0.025em; }
.dcols { display: grid; grid-template-columns: repeat(3, 1fr); margin: var(--s-8) calc(var(--gut) * -1) 0; padding: 0 var(--gut); border-top: 1px solid #2A2642; border-bottom: 1px solid #2A2642; text-align: left; }
.dcol { display: flex; flex-direction: column; min-height: 390px; padding: var(--s-7); border-left: 1px solid #2A2642; transition: background var(--t-2) var(--ease); }
.dcol:last-child { border-right: 1px solid #2A2642; }
.dcol:hover { background: rgb(127 176 255 / .05); }
.dcol .px { width: 24px; height: 24px; }
.dcol h3 { margin-top: var(--s-6); font-size: clamp(24px, 2.35vw, 32px); }
.dcol p { margin-top: auto; font-size: var(--fs-body); line-height: 1.45; color: #CFCBE3; max-width: 360px; }

/* ================= band ================= */
.band { padding: var(--s-8) var(--gut); background: var(--c-indigo); color: var(--c-white); }
.band-eye { color: rgb(255 255 255 / .75); }
.band-row { display: flex; justify-content: space-between; align-items: center; gap: var(--s-6); margin-top: var(--s-4); }
.band h2 { max-width: 680px; font-size: clamp(26px, 2.64vw, 36px); line-height: 1.2; letter-spacing: -0.02em; }
.band-btns { display: flex; gap: var(--s-2); }

/* ================= footer ================= */
.footer { background: var(--paper); }
.fcols { display: grid; grid-template-columns: repeat(4, 1fr); }
.fcol { display: flex; flex-direction: column; align-items: flex-start; padding: var(--s-5) var(--s-3) var(--s-6); border-right: 1px solid var(--line); }
.fcol:last-child { border-right: 0; }
.fh { margin-bottom: var(--s-5); font-size: var(--fs-sm); color: var(--muted); }
.fcol a { min-width: 24px; padding: 3px 0; font-size: 14px; font-weight: 500; background: linear-gradient(currentColor, currentColor) 0 calc(100% - 2px) / 0 1px no-repeat; transition: background-size var(--t-2) var(--ease); }
.fcol a:hover { background-size: 100% 1px; }
.fsocial { display: flex; justify-content: space-between; align-items: flex-end; padding: var(--s-7) var(--gut) 0; border-top: 1px solid var(--line); }
.socials { display: flex; gap: var(--s-4); }
.socials a { display: grid; place-items: center; width: 24px; height: 24px; transition: color var(--t-1) var(--ease); }
.socials a:hover { color: var(--c-violet); }
.socials svg { width: 20px; height: 20px; }
.fget { display: grid; justify-items: end; gap: var(--s-2); }
.fget p { font-size: var(--fs-xs); font-weight: 500; }
.fbottom { position: relative; display: flex; justify-content: space-between; align-items: flex-end; padding: var(--s-5) var(--gut) 0; min-height: 190px; }
.fcopy { padding-bottom: var(--s-6); font-size: var(--fs-xs); color: var(--muted); }
.bigmark { position: absolute; left: 50%; bottom: 0; width: 240px; height: 190px; translate: -50% 0; image-rendering: pixelated; }
.fprefs { display: flex; align-items: center; gap: var(--s-3); padding-bottom: var(--s-6); }
.themes { display: flex; gap: 2px; padding: 2px; border: 1px solid var(--line); border-radius: var(--r-2); }
.themes button { display: grid; place-items: center; width: 26px; height: 26px; padding: 0; border: 0; border-radius: var(--r-1); background: transparent; color: var(--muted); cursor: pointer; transition: background var(--t-1), color var(--t-1); }
.themes button:hover { color: var(--ink); }
.themes button[aria-checked="true"] { background: var(--panel-2); color: var(--ink); }
.themes svg { width: 14px; height: 14px; }
.stripes { position: relative; display: grid; }
.stripes i { height: 32px; }
.stripes i:nth-child(1) { background: linear-gradient(90deg, #8AB8FF, var(--c-sky) 40%, #92BDFF); }
.stripes i:nth-child(2) { background: linear-gradient(90deg, #4B80FF, var(--c-blue) 50%, #3E76FF); }
.stripes i:nth-child(3) { background: linear-gradient(90deg, #8A5FE3, var(--c-violet) 50%, #7247D6); }
.stripes i:nth-child(4) { background: linear-gradient(90deg, #45229A, var(--c-royal) 50%, #33167A); }
.walker { position: absolute; left: 4%; top: 64px; width: 33px; height: 33px; translate: 0 -100%; image-rendering: pixelated; animation: walk 26s linear infinite, bob .5s steps(2) infinite; }
@keyframes walk { 0% { left: 4%; transform: scaleX(1); } 49.9% { left: 92%; transform: scaleX(1); } 50% { left: 92%; transform: scaleX(-1); } 99.9% { left: 4%; transform: scaleX(-1); } 100% { left: 4%; transform: scaleX(1); } }
@keyframes bob { 50% { margin-top: -2px; } }

/* ================= inner pages ================= */
/* page hero: title on paper, lede on a panel, mosaic strip underneath */
.ph { display: grid; grid-template-columns: 70% 30%; }
.ph-l { display: flex; flex-direction: column; justify-content: space-between; gap: var(--s-8); padding: var(--s-7) var(--s-7) var(--s-8); }
.crumbs { display: flex; flex-wrap: wrap; gap: var(--s-2); color: var(--muted); }
.crumbs a { transition: color var(--t-1) var(--ease); }
.crumbs a:hover { color: var(--ink); }
.crumbs span[aria-hidden] { opacity: .5; }
.ph-title { max-width: 15ch; font-size: clamp(40px, 5.6vw, 80px); font-weight: 500; line-height: 1; letter-spacing: -0.03em; animation: rise .9s var(--ease) both; }
.ph-r { display: flex; flex-direction: column; justify-content: flex-end; gap: var(--s-5); padding: var(--s-7) var(--s-7) var(--s-7) 36px; background: var(--panel); }
.ph-r p { font-size: var(--fs-md); font-weight: 500; line-height: 1.25; letter-spacing: -0.012em; animation: rise .9s var(--ease) .15s both; }
.ph-r p.mono { font-size: var(--fs-mono); font-weight: 400; letter-spacing: var(--tr-mono); color: var(--muted); }
.ph-btns { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.mosaic.ph-band { height: 160px; }
.ph-icon { display: grid; place-items: center; width: 64px; height: 64px; background: var(--paper); border: 1px solid var(--line); }
.ph-icon .px { width: 36px; height: 36px; }

/* sections */
.sec { padding: var(--s-9) var(--gut); border-top: 1px solid var(--line); }
.sec-head { display: flex; justify-content: space-between; align-items: flex-end; gap: var(--s-6); margin-bottom: var(--s-7); }
.sec-head > div { max-width: 760px; }
.eyebrow { margin-bottom: var(--s-3); color: var(--muted); }
.sec-head p:not(.eyebrow) { max-width: 520px; font-size: var(--fs-body); color: var(--muted); }
.lede { max-width: 860px; font-size: var(--fs-lg); font-weight: 500; line-height: 1.22; letter-spacing: var(--tr); }
.lede-sm { max-width: 760px; font-size: var(--fs-md); line-height: 1.4; }

/* cells: the hairline grid used for features, services and values */
.cells { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.cells-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cells-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.c { position: relative; display: flex; flex-direction: column; justify-content: space-between; gap: var(--s-6); min-height: 260px; padding: var(--s-6); border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--paper); transition: background var(--t-2) var(--ease); }
.c::before { content: ""; position: absolute; left: -1px; right: -1px; top: -1px; height: 3px; background: var(--bar, var(--c-violet)); transform: scaleX(0); transform-origin: left; transition: transform var(--t-3) var(--ease); }
a.c:hover { background: var(--panel); }
a.c:hover::before, a.c:focus-visible::before { transform: none; }
.c .px { width: 32px; height: 32px; transition: transform var(--t-3) var(--ease); }
a.c:hover .px { transform: translateY(-3px); }
.c-b { display: grid; gap: var(--s-2); }
.c h3 { font-size: var(--fs-md); line-height: 1.2; }
.c p { font-size: var(--fs-sm); line-height: 1.45; color: var(--muted); }
.c .go { display: inline-flex; align-items: center; gap: var(--s-1); margin-top: var(--s-2); font-size: var(--fs-xs); font-weight: 500; }
.c .go svg { width: 11px; height: 11px; transition: transform var(--t-2) var(--ease); }
a.c:hover .go svg { transform: translateX(3px); }
.c-top { justify-content: flex-start; }
.c-lg { min-height: 340px; }
.c-lg h3 { font-size: var(--fs-card); }

/* steps: numbered phases */
.steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border: 1px solid var(--line); }
.step { display: flex; flex-direction: column; gap: var(--s-3); min-height: 300px; padding: var(--s-6); border-right: 1px solid var(--line); background: var(--panel); }
.step:last-child { border-right: 0; }
.step .n { color: var(--c-violet); }
.step h3 { margin-top: auto; font-size: var(--fs-md); }
.step p { font-size: var(--fs-sm); line-height: 1.45; color: var(--muted); }

/* split: sticky heading on the left, content on the right */
.split { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--s-8); }
.split-l { position: sticky; top: calc(var(--nav-h) + var(--s-6)); align-self: start; display: grid; justify-items: start; gap: var(--s-4); }
.split-l .px { width: 36px; height: 36px; }
.split-l p:not(.eyebrow) { font-size: var(--fs-body); color: var(--muted); max-width: 440px; }
.split + .split { margin-top: var(--s-9); padding-top: var(--s-9); border-top: 1px solid var(--line); }
.split-r { display: grid; gap: var(--s-6); align-content: start; }
.split-r h3 { font-size: var(--fs-md); }
.split-r .eyebrow { margin-bottom: 0; }
.split-r .eyebrow + .tags { margin-top: calc(var(--s-3) - var(--s-6)); }

/* ticks: a hairline list with square markers */
.ticks { display: grid; }
.ticks li { position: relative; padding: var(--s-4) 0 var(--s-4) 22px; border-top: 1px solid var(--line); font-size: var(--fs-body); line-height: 1.45; }
.ticks li:last-child { border-bottom: 1px solid var(--line); }
.ticks li::before { content: ""; position: absolute; left: 0; top: calc(var(--s-4) + .5em); width: 8px; height: 8px; background: var(--c-violet); translate: 0 -50%; }
.ticks b { font-weight: 500; }

/* key facts */
.facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.fact { display: grid; align-content: start; gap: var(--s-2); padding: var(--s-5) var(--s-6) var(--s-6); border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.fact b { font-size: var(--fs-lg); font-weight: 500; letter-spacing: -0.028em; line-height: 1.05; }
.fact span { color: var(--muted); font-size: var(--fs-sm); }

/* faq */
.faq { border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { display: flex; justify-content: space-between; align-items: center; gap: var(--s-5); padding: var(--s-5) 0; font-size: var(--fs-md); font-weight: 500; letter-spacing: -0.012em; cursor: pointer; list-style: none; transition: color var(--t-1) var(--ease); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary svg { width: 14px; height: 14px; flex: none; transition: transform var(--t-2) var(--ease); }
.faq details[open] summary svg { transform: rotate(45deg); }
.faq summary:hover { color: var(--c-violet); }
.faq details p { max-width: 760px; padding-bottom: var(--s-5); color: var(--muted); line-height: 1.55; }

/* cards: blog and work, a mosaic thumb over a panel */
.cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-2); }
.card { display: flex; flex-direction: column; overflow: hidden; border-radius: var(--r-2); background: var(--panel); transition: background var(--t-2) var(--ease); }
.card:hover { background: var(--panel-2); }
.card-art { position: relative; display: grid; place-items: center; height: 240px; overflow: hidden; isolation: isolate; }
.card-art .mosaic { position: absolute; inset: 0; z-index: -1; height: auto; }
.card-art .px-xl { width: 88px; height: 88px; filter: drop-shadow(0 16px 24px rgb(0 0 0 / .3)); transition: transform 1.2s var(--ease); }
.card:hover .card-art .px-xl { transform: translateY(-6px); }
.card-b { display: flex; flex-direction: column; gap: var(--s-3); flex: 1; padding: var(--s-5); }
.card-b .mono { color: var(--muted); }
.card-b h3 { font-size: var(--fs-md); line-height: 1.2; }
.card-b p { font-size: var(--fs-sm); line-height: 1.45; color: var(--muted); }
.card-b .go { display: inline-flex; align-items: center; gap: var(--s-1); margin-top: auto; padding-top: var(--s-3); font-size: var(--fs-xs); font-weight: 500; }
.card-b .go svg { width: 11px; height: 11px; transition: transform var(--t-2) var(--ease); }
.card:hover .go svg { transform: translateX(3px); }
.card-wide { grid-column: span 3; flex-direction: row; }
.card-wide .card-art { flex: 0 0 58%; height: 420px; }
.card-wide .card-b { justify-content: flex-end; padding: var(--s-7); }
.card-wide h3 { font-size: var(--fs-lg); line-height: 1.1; }

/* table */
.tbl { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.tbl th, .tbl td { padding: var(--s-3) var(--s-4) var(--s-3) 0; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.tbl th { color: var(--muted); font-family: var(--mono); font-size: var(--fs-mono); font-weight: 400; letter-spacing: var(--tr-mono); text-transform: uppercase; }
.tbl td:first-child { font-weight: 500; white-space: nowrap; }

/* article */
.post-head { display: grid; justify-items: start; gap: var(--s-5); max-width: 880px; margin: 0 auto; padding: var(--s-9) var(--gut) var(--s-7); }
.post-head h1 { font-size: var(--fs-xl); line-height: 1.05; letter-spacing: -0.03em; animation: rise .9s var(--ease) both; }
.post-meta { display: flex; flex-wrap: wrap; gap: var(--s-3); color: var(--muted); }
.post-meta span + span::before { content: "·"; margin-right: var(--s-3); }
.post-art { position: relative; display: grid; place-items: center; height: 300px; margin: 0 var(--gut); overflow: hidden; border-radius: var(--r-2); isolation: isolate; }
.post-art .mosaic { position: absolute; inset: 0; z-index: -1; height: auto; }
.post-art .px-xl { filter: drop-shadow(0 16px 24px rgb(0 0 0 / .3)); }
.prose { max-width: 720px; margin: 0 auto; padding: var(--s-8) var(--gut) var(--s-9); font-size: 18px; line-height: 1.65; }
.prose > * + * { margin-top: var(--s-4); }
.prose h2 { margin-top: var(--s-8); font-size: clamp(24px, 2.2vw, 30px); line-height: 1.2; letter-spacing: -0.022em; }
.prose h3 { margin-top: var(--s-6); font-size: var(--fs-md); }
.prose a { color: var(--c-violet); text-decoration: underline; text-underline-offset: 3px; }
.prose ul, .prose ol { display: grid; gap: var(--s-2); padding-left: 0; list-style: none; }
.prose ul li { display: flex; gap: var(--s-3); }
.prose ul li::before { content: ""; flex: none; width: 6px; height: 6px; margin-top: .72em; background: var(--c-violet); }
.prose ol { counter-reset: n; }
.prose ol li { display: flex; gap: var(--s-3); counter-increment: n; }
.prose ol li::before { content: counter(n, decimal-leading-zero); flex: none; font-family: var(--mono); font-size: var(--fs-mono); line-height: 2.5; color: var(--c-violet); }
.prose blockquote { margin-inline: 0; padding: var(--s-2) 0 var(--s-2) var(--s-5); border-left: 3px solid var(--c-lilac); font-size: var(--fs-md); font-weight: 500; line-height: 1.35; }
.prose .lead { font-size: var(--fs-md); line-height: 1.45; font-weight: 500; letter-spacing: -0.012em; }
.prose .tbl { margin-top: var(--s-5); font-size: 15px; }
.prose code { padding: 1px 5px; background: var(--panel); border-radius: var(--r-1); font: 14px var(--mono); }
.post-end { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: var(--s-4); max-width: 720px; margin: 0 auto; padding: var(--s-6) var(--gut) var(--s-9); border-top: 1px solid var(--line); }

/* contact */
.ways { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-2); }
.way { display: flex; flex-direction: column; gap: var(--s-4); min-height: 300px; padding: var(--s-6); border-radius: var(--r-2); background: var(--panel); transition: background var(--t-2) var(--ease); }
.way:hover { background: var(--panel-2); }
.way .px { width: 36px; height: 36px; }
.way h3 { margin-top: auto; font-size: var(--fs-card); }
.way p { color: var(--muted); font-size: var(--fs-sm); }
.way .go { display: inline-flex; align-items: center; gap: var(--s-1); font-weight: 500; font-size: var(--fs-sm); }
.way .go svg { width: 12px; height: 12px; transition: transform var(--t-2) var(--ease); }
.way:hover .go svg { transform: translateX(3px); }
.way-dark { background: var(--c-indigo); color: var(--c-white); }
.way-dark:hover { background: var(--c-violet); }
.way-dark p { color: rgb(255 255 255 / .78); }

/* next: related links at the bottom of a page */
.next { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); border-top: 1px solid var(--line); }
.next a { display: flex; align-items: center; gap: var(--s-4); min-height: 104px; padding: var(--s-5) var(--gut); border-right: 1px solid var(--line); font-size: var(--fs-md); font-weight: 500; letter-spacing: -0.012em; transition: background var(--t-2) var(--ease); }
.next a:last-child { border-right: 0; }
.next a:hover { background: var(--panel); }
.next .px { width: 28px; height: 28px; }
.next span { flex: 1; }
.next small { display: block; margin-bottom: 2px; color: var(--muted); font: var(--fs-mono) var(--mono); letter-spacing: var(--tr-mono); text-transform: uppercase; }
.next svg { width: 12px; height: 12px; transition: transform var(--t-2) var(--ease); }
.next a:hover svg { transform: translateX(3px); }

/* ================= page components (components.js) ================= */
/* timeline: a sticky stage the walker crosses as you scroll */
.tl { --p: 0; height: 260vh; padding: 0; }
.tl-sticky { position: sticky; top: var(--nav-h); display: flex; flex-direction: column; justify-content: center; height: calc(100vh - var(--nav-h)); min-height: 560px; padding: var(--s-7) var(--gut); }
.tl-track { position: relative; height: 2px; margin-top: var(--s-8); background: var(--line); }
.tl-fill { position: absolute; left: 0; top: 0; bottom: 0; width: calc(var(--p) * 100%); background: linear-gradient(90deg, var(--c-violet), var(--c-blue)); }
.tl-walker { position: absolute; left: calc(var(--p) * 100%); bottom: 4px; width: 33px; height: 33px; translate: -50% 0; image-rendering: pixelated; animation: bob .5s steps(2) infinite; }
.tl-steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-5); counter-reset: none; }
.tl-step { position: relative; display: flex; flex-direction: column; gap: var(--s-3); padding-top: var(--s-6); opacity: .32; transform: translateY(10px); transition: opacity .5s var(--ease), transform .5s var(--ease); }
.tl-step::before { content: ""; position: absolute; left: 0; top: -6px; width: 10px; height: 10px; background: var(--paper); border: 2px solid var(--line); transition: background var(--t-2) var(--ease), border-color var(--t-2) var(--ease); }
.tl-step.is-on { opacity: 1; transform: none; }
.tl-step.is-on::before { background: var(--c-violet); border-color: var(--c-violet); }
.tl-step .n { color: var(--c-violet); }
.tl-step .px { width: 36px; height: 36px; margin-top: var(--s-2); transition: transform .5s var(--ease); }
.tl-step.is-now .px { transform: translateY(-4px); }
.tl-step h3 { font-size: var(--fs-card); line-height: 1.1; }
.tl-step p:not(.n) { max-width: 300px; font-size: var(--fs-sm); line-height: 1.45; color: var(--muted); }

/* switcher: six services on one repainting mosaic */
.sw { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); border: 1px solid var(--line); }
.sw-list { display: flex; flex-direction: column; border-right: 1px solid var(--line); }
.sw-tab { position: relative; display: flex; align-items: center; gap: var(--s-3); flex: 1; min-height: 76px; padding: 0 var(--s-5); border: 0; border-bottom: 1px solid var(--line); background: var(--paper); color: var(--muted); font: 500 var(--fs-md)/1.2 var(--font); letter-spacing: -0.012em; text-align: left; cursor: pointer; transition: background var(--t-2) var(--ease), color var(--t-2) var(--ease); }
.sw-tab:last-child { border-bottom: 0; }
.sw-tab:hover { color: var(--ink); }
.sw-tab .px { width: 28px; height: 28px; filter: grayscale(1); opacity: .55; transition: filter var(--t-2) var(--ease), opacity var(--t-2) var(--ease); }
.sw-tab[aria-selected="true"] { background: var(--panel); color: var(--ink); }
.sw-tab[aria-selected="true"] .px { filter: none; opacity: 1; }
.sw-tab::after { content: ""; position: absolute; left: 0; bottom: -1px; height: 2px; width: 0; background: var(--c-violet); }
.sw-tab[aria-selected="true"]::after { animation: fill 5s linear forwards; }
.sw.paused .sw-tab::after { animation-play-state: paused; }
.sw-view { position: relative; display: grid; place-items: center; min-height: 480px; overflow: hidden; isolation: isolate; }
.sw-mosaic { position: absolute; inset: 0; z-index: -1; height: auto; }
.sw-icon.px { position: absolute; right: 12%; top: 50%; width: 168px; height: 168px; translate: 0 -50%; filter: drop-shadow(0 20px 30px rgb(0 0 0 / .35)); }
.sw-view.swap .sw-icon { animation: pop .7s var(--ease); }
@keyframes pop { from { opacity: 0; transform: scale(.6) rotate(-10deg); } }
.sw-card { position: absolute; left: var(--s-5); right: var(--s-5); bottom: var(--s-5); display: grid; justify-items: start; gap: var(--s-2); max-width: 440px; padding: var(--s-5); background: var(--paper); border-radius: var(--r-2); box-shadow: var(--shadow); }
.sw-view.swap .sw-card { animation: rise .6s var(--ease); }
.sw-n { color: var(--muted); }
.sw-title { font-size: var(--fs-card); line-height: 1.1; }
.sw-desc { font-size: var(--fs-sm); line-height: 1.45; color: var(--muted); }
.sw-card .btn-dark { margin-top: var(--s-2); }

/* flow explorer: one playbook, four beats, packets on the wires */
.fx { border: 1px solid var(--line); }
.fx-tabs { display: flex; flex-wrap: wrap; border-bottom: 1px solid var(--line); }
.fx-tabs button { padding: var(--s-4) var(--s-5); border: 0; border-right: 1px solid var(--line); background: var(--paper); color: var(--muted); font: 500 var(--fs-sm) var(--font); cursor: pointer; transition: background var(--t-1) var(--ease), color var(--t-1) var(--ease); }
.fx-tabs button:hover { background: var(--panel); color: var(--ink); }
.fx-tabs button[aria-selected="true"] { background: var(--inv-bg); color: var(--inv-fg); }
.fx-stage { display: grid; grid-template-columns: 1fr 56px 1fr 56px 1fr 56px 1fr; align-items: center; padding: var(--s-8) var(--s-6); background-color: var(--panel); background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px); background-size: 28px 28px; }
.fx-node { display: grid; align-content: start; justify-items: start; gap: var(--s-3); min-height: 210px; padding: var(--s-5); background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-2); box-shadow: 0 8px 20px -14px rgb(10 8 40 / .3); transition: opacity .3s var(--ease), transform .3s var(--ease); transition-delay: calc(var(--i, 0) * 60ms); }
.fx.swap .fx-node { opacity: 0; transform: translateY(10px); }
.fx-ico { display: grid; place-items: center; width: 52px; height: 52px; background: var(--panel); }
.fx-ico .px { width: 32px; height: 32px; }
.fx-node .mono { color: var(--violet-text); }
.fx-node:last-child .mono { color: var(--blue-text); }
.fx-t { font-size: var(--fs-md); font-weight: 500; line-height: 1.25; letter-spacing: -0.012em; }
.fx-wire { position: relative; height: 2px; background: var(--muted); opacity: .45; }
.fx-wire::after { content: ""; position: absolute; right: -2px; top: -5px; border-block: 6px solid transparent; border-left: 8px solid var(--muted); }
.fx-wire i { position: absolute; top: -3px; left: 0; width: 8px; height: 8px; background: var(--c-violet); animation: packet 1.8s linear infinite; }
.fx-wire i + i { background: var(--c-blue); animation-delay: .9s; }
@keyframes packet { 0% { left: 0; opacity: 0; } 15%, 80% { opacity: 1; } 100% { left: calc(100% - 10px); opacity: 0; } }
@keyframes packet-v { 0% { top: 0; opacity: 0; } 15%, 80% { opacity: 1; } 100% { top: calc(100% - 10px); opacity: 0; } }

/* before and after */
.ba { --x: 50%; position: relative; height: 500px; overflow: hidden; border-radius: var(--r-2); user-select: none; touch-action: pan-y; }
.ba-pane { position: absolute; inset: 0; display: grid; align-content: center; gap: var(--s-5); padding: var(--s-7) max(var(--s-6), 9%); }
.ba-before { background: var(--panel); justify-items: start; }
.ba-after { justify-items: end; }
.ba-pane .ba-tag, .ba-pane .ba-list { width: min(42%, 480px); }
.ba-after { color: var(--c-white); clip-path: inset(0 0 0 var(--x)); isolation: isolate; }
.ba-after .mosaic { position: absolute; inset: 0; z-index: -1; height: auto; }
.ba-tag { color: var(--muted); }
.ba-after .ba-tag { color: rgb(255 255 255 / .8); }
.ba-list { display: grid; gap: var(--s-2); counter-reset: n; }
.ba-list li { display: flex; align-items: center; gap: var(--s-3); min-height: 46px; padding: 0 var(--s-4); background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-1); font-size: var(--fs-sm); font-weight: 500; counter-increment: n; }
.ba-list li::before { content: counter(n, decimal-leading-zero); font: var(--fs-mono) var(--mono); color: var(--muted); }
.ba-after .ba-list li { background: rgb(255 255 255 / .1); border-color: rgb(255 255 255 / .22); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.ba-after .ba-list li::before { color: rgb(255 255 255 / .7); }
.ba-after li::after { content: "Auto"; margin-left: auto; padding: 2px 6px; background: rgb(255 255 255 / .18); border-radius: 2px; font: 500 10px var(--mono); letter-spacing: var(--tr-mono); text-transform: uppercase; }
.ba-after li.you { background: var(--c-white); color: var(--c-black); }
.ba-after li.you::before { color: var(--muted); }
.ba-after li.you::after { content: "You"; background: var(--c-violet); color: var(--c-white); }
.ba-handle { position: absolute; top: 0; bottom: 0; left: var(--x); width: 2px; translate: -50% 0; background: var(--c-white); box-shadow: 0 0 0 1px rgb(20 17 42 / .12); pointer-events: none; }
.ba-handle span { position: absolute; top: 50%; left: 50%; translate: -50% -50%; display: flex; gap: 2px; padding: 12px 8px; background: var(--c-white); color: var(--c-black); border-radius: var(--r-2); box-shadow: var(--shadow); }
.ba-handle svg { width: 12px; height: 12px; }
.ba-range { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; }
.ba-range:focus-visible + .ba-handle span, .ba:has(.ba-range:focus-visible) .ba-handle span { outline: 2px solid var(--c-blue); outline-offset: 2px; }

/* crew: ten agents and a log */
.crew { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--s-2); }
.crew-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.bot { display: grid; justify-items: center; align-content: center; gap: var(--s-3); min-height: 150px; padding: var(--s-4) var(--s-2); border: 0; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--paper); color: var(--ink); cursor: pointer; transition: background var(--t-2) var(--ease); }
.bot:hover, .bot:focus-visible { background: var(--panel); }
.bot canvas { width: 55px; height: 55px; image-rendering: pixelated; }
.bot .mono { font-size: 10.5px; line-height: 1.3; text-align: center; color: var(--muted); transition: color var(--t-2) var(--ease); }
.bot.is-busy { background: var(--panel); }
.bot.is-busy canvas { animation: bob .3s steps(2) infinite; }
.bot.is-busy .mono, .bot.is-done .mono { color: var(--ink); }
.bot.is-done .mono::after { content: " \2713"; color: var(--c-violet); }
.crew-side { display: grid; grid-template-rows: 1fr auto; gap: var(--s-2); }
.term { min-height: 280px; padding: var(--s-5); background: var(--c-night); color: #D9D5F0; border-radius: var(--r-2); font: 13px/1.65 var(--mono); overflow: hidden; }
.term-h { margin-bottom: var(--s-3); color: #A8A3C7; }
.term-h::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: var(--s-2); border-radius: 50%; background: #45D483; box-shadow: 0 0 0 3px rgb(69 212 131 / .2); }
.term-lines li { animation: rise .35s var(--ease) both; }
.term-lines b { color: var(--c-sky); font-weight: 500; }
.term-lines span { color: #7E79A3; }
.queue { display: grid; grid-template-columns: auto 1fr; align-items: end; gap: 0 var(--s-4); padding: var(--s-5); background: var(--c-indigo); color: var(--c-white); border-radius: var(--r-2); }
.queue .mono { grid-column: 1 / -1; margin-bottom: var(--s-2); color: rgb(255 255 255 / .75); }
.queue b { font-size: var(--fs-xl); font-weight: 500; line-height: 1; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.queue span:last-child { padding-bottom: 6px; font-size: var(--fs-sm); color: rgb(255 255 255 / .8); }
[data-run]:disabled { opacity: .5; cursor: progress; }

/* where it runs: pieces move between zones */
.where { border: 1px solid var(--line); }
.where-tabs { display: flex; flex-wrap: wrap; border-bottom: 1px solid var(--line); }
.where-tabs button { padding: var(--s-4) var(--s-5); border: 0; border-right: 1px solid var(--line); background: var(--paper); color: var(--muted); font: 500 var(--fs-sm) var(--font); cursor: pointer; transition: background var(--t-1) var(--ease), color var(--t-1) var(--ease); }
.where-tabs button:hover { background: var(--panel); color: var(--ink); }
.where-tabs button[aria-selected="true"] { background: var(--inv-bg); color: var(--inv-fg); }
.where-stage { position: relative; height: 420px; background: var(--panel); overflow: hidden; }
.zone { position: absolute; top: 8%; height: 84%; border: 1.5px dashed; border-radius: var(--r-2); }
.zone > .mono { position: absolute; left: var(--s-3); top: var(--s-3); }
.zone-you { left: 2%; width: 60%; border-color: var(--c-violet); background: rgb(124 77 219 / .05); }
.zone-you > .mono { color: var(--violet-text); }
.zone-us { left: 66%; width: 32%; border-color: var(--c-blue); background: rgb(47 107 255 / .05); }
.zone-us > .mono { color: var(--blue-text); }
.zone-tools { position: absolute; left: 60%; top: 17%; width: 37%; height: 76%; border: 1px solid var(--line); border-radius: var(--r-2); background: var(--paper); opacity: 0; transform: scale(.96); transition: opacity .5s var(--ease), transform .5s var(--ease); }
.zone-tools .mono { position: absolute; left: var(--s-3); top: var(--s-3); color: var(--muted); }
.where[data-mode="tools"] .zone-tools { opacity: 1; transform: none; }
.item { position: absolute; left: var(--l); top: var(--t); translate: -50% -50%; z-index: 2; display: grid; justify-items: center; gap: 6px; min-width: 88px; padding: var(--s-3); background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-2); box-shadow: 0 8px 20px -14px rgb(10 8 40 / .35); transition: left .8s var(--ease), top .8s var(--ease); }
.item .px { width: 36px; height: 36px; }
.item .mono { font-size: 10px; color: var(--muted); }
.where .it-data { --l: 12%; --t: 42%; }
.where .it-keys { --l: 12%; --t: 72%; }
.where[data-mode="cloud"] .it-agent { --l: 30%; --t: 42%; }
.where[data-mode="cloud"] .it-run { --l: 48%; --t: 42%; }
.where[data-mode="cloud"] .it-ops { --l: 82%; --t: 50%; }
.where[data-mode="managed"] .it-agent { --l: 75%; --t: 40%; }
.where[data-mode="managed"] .it-run { --l: 89%; --t: 40%; }
.where[data-mode="managed"] .it-ops { --l: 82%; --t: 70%; }
.where[data-mode="tools"] .it-agent { --l: 49%; --t: 50%; }
.where[data-mode="tools"] .it-run { --l: 76%; --t: 40%; }
.where[data-mode="tools"] .it-ops { --l: 89%; --t: 68%; }
.where-cap { padding: var(--s-5); border-top: 1px solid var(--line); font-size: var(--fs-md); font-weight: 500; letter-spacing: -0.012em; }

/* assemble: the mark gathers from scattered pixels */
.asm-stage { display: grid; place-items: center; padding: var(--s-6); background: var(--panel); border-radius: var(--r-2); }
.asm-stage canvas { width: 100%; max-width: 560px; image-rendering: pixelated; }

/* brief builder */
.bb { display: grid; gap: var(--s-6); }
.bb-f { display: grid; gap: var(--s-3); min-width: 0; margin: 0; padding: 0; border: 0; }
.bb-f legend, .bb-f > .mono { margin-bottom: var(--s-3); padding: 0; color: var(--muted); }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip-in { position: relative; }
.chip-in input { position: absolute; opacity: 0; pointer-events: none; }
.chip-in span { display: inline-flex; align-items: center; min-height: 40px; padding: 0 var(--s-3); border: 1px solid var(--line); border-radius: var(--r-1); background: var(--paper); font-size: var(--fs-sm); font-weight: 500; cursor: pointer; transition: background var(--t-1) var(--ease), color var(--t-1) var(--ease), border-color var(--t-1) var(--ease); }
.chip-in span:hover { border-color: var(--muted); }
.chip-in input:checked + span { background: var(--inv-bg); border-color: var(--inv-bg); color: var(--inv-fg); }
.chip-in input:focus-visible + span { outline: 2px solid var(--c-blue); outline-offset: 2px; }
.bb-range { display: flex; align-items: center; gap: var(--s-4); }
.bb-range input { flex: 1; min-height: 32px; accent-color: var(--c-violet); }
.bb-range output { min-width: 190px; font-weight: 500; }
.bb textarea { width: 100%; padding: var(--s-3); border: 1px solid var(--line); border-radius: var(--r-1); background: var(--paper); color: var(--ink); font: inherit; font-size: var(--fs-sm); resize: vertical; }
.bb textarea:focus { outline: 2px solid var(--c-blue); outline-offset: 1px; }
.bb-out { display: grid; gap: var(--s-4); justify-items: start; padding: var(--s-5); background: var(--c-night); color: #D9D5F0; border-radius: var(--r-2); }
.bb-out .mono { color: #A8A3C7; }
.bb-out pre { width: 100%; font: 13px/1.65 var(--mono); white-space: pre-wrap; }
.bb-out pre.flash { animation: flash .5s var(--ease); }
@keyframes flash { from { color: var(--c-sky); } }
.bb-out .btn-light { border-radius: var(--r-1); }

/* blog filter */
.filter { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: var(--s-5); }
.filter button { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 var(--s-3); border: 1px solid var(--line); border-radius: var(--r-1); background: var(--paper); color: var(--ink); font: 500 var(--fs-sm) var(--font); cursor: pointer; transition: background var(--t-1) var(--ease), color var(--t-1) var(--ease); }
.filter button:hover { background: var(--panel); }
.filter button[aria-pressed="true"] { background: var(--inv-bg); border-color: var(--inv-bg); color: var(--inv-fg); }
.filter .n { font: var(--fs-mono) var(--mono); opacity: .6; }
.card[hidden] { display: none; }

/* reading bar */
.readbar { position: sticky; top: var(--nav-h); z-index: 50; display: grid; grid-template-columns: repeat(40, 1fr); gap: 2px; height: 6px; padding: 0 var(--gut); background: var(--paper); }
.readbar i { background: var(--line); transition: background .25s var(--ease); }
.readbar i.on { background: var(--c-violet); }
.readbar i.on:nth-child(n+21) { background: var(--c-blue); }
.readbar.is-done i.on { background: var(--c-sky); }

/* scorer */
.scorer { display: grid; gap: var(--s-3); margin-block: var(--s-6); font-size: var(--fs-sm); line-height: 1.4; }
.sc-rows { display: grid; gap: var(--s-2); }
.sc-row { display: grid; gap: var(--s-3); padding: var(--s-4); background: var(--panel); border: 1px solid transparent; border-radius: var(--r-2); animation: rise .4s var(--ease) both; }
.sc-row.is-top { background: var(--paper); border-color: var(--c-violet); box-shadow: 0 10px 24px -16px rgb(124 77 219 / .6); }
.sc-name { width: 100%; padding: 6px 8px; border: 1px solid transparent; border-radius: var(--r-1); background: transparent; color: var(--ink); font: 500 var(--fs-md)/1.2 var(--font); letter-spacing: -0.012em; }
.sc-name:hover { border-color: var(--line); }
.sc-name:focus { outline: none; border-color: var(--c-blue); background: var(--paper); }
.sc-name::placeholder { color: var(--muted); }
.sc-axes { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-3); }
.sc-ax { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 2px var(--s-2); }
.sc-ax .mono { grid-column: 1 / -1; color: var(--muted); font-size: 10.5px; }
.sc-ax input { width: 100%; accent-color: var(--c-violet); }
.sc-ax b { font: 500 var(--fs-sm) var(--mono); }
.sc-total { display: flex; align-items: center; gap: var(--s-3); }
.sc-bar { flex: 1; height: 8px; background: linear-gradient(90deg, var(--c-violet), var(--c-blue)) 0 0 / calc(var(--v) * 100%) 100% no-repeat, var(--line); transition: background-size .3s var(--ease); }
.sc-total b { min-width: 24px; font: 500 var(--fs-md) var(--mono); text-align: right; }
.sc-pick { padding: 3px 6px; background: var(--c-violet); color: var(--c-white); border-radius: 2px; font-size: 11px; }
.scorer .btn-grey { justify-self: start; height: 40px; }
.prose .scorer + p { margin-top: 0; }

/* fit check on service pages */
.ticks-check li { padding: 0; }
.ticks-check li::before { display: none; }
.ticks-check button { all: unset; box-sizing: border-box; display: flex; align-items: baseline; gap: var(--s-3); width: 100%; padding: var(--s-4) 0; cursor: pointer; transition: color var(--t-1) var(--ease); }
.ticks-check button::before { content: ""; flex: none; width: 14px; height: 14px; border: 1.5px solid var(--muted); border-radius: 2px; translate: 0 2px; transition: background var(--t-1) var(--ease), border-color var(--t-1) var(--ease), box-shadow var(--t-1) var(--ease); }
.ticks-check button:hover::before { border-color: var(--ink); }
.ticks-check button[aria-pressed="true"]::before { background: var(--c-violet); border-color: var(--c-violet); box-shadow: inset 0 0 0 3px var(--paper); }
.ticks-check button:focus-visible { outline: 2px solid var(--c-blue); outline-offset: 2px; }
.fit { display: grid; gap: var(--s-3); justify-items: start; }
.fit-meter { width: 100%; height: 8px; background: linear-gradient(90deg, var(--c-violet), var(--c-blue)) 0 0 / calc(var(--v, 0) * 100%) 100% no-repeat, var(--line); transition: background-size .4s var(--ease); }
.fit-out { font-size: var(--fs-md); font-weight: 500; letter-spacing: -0.012em; }

/* 404 */
.lost canvas { max-width: 100%; height: auto; touch-action: none; }

@media (max-width: 900px) {
  .tl { height: auto; }
  .tl-sticky { position: static; height: auto; min-height: 0; padding-block: var(--s-8); }
  .tl-track { display: none; }
  .tl-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-6) var(--s-5); }
  .tl-step { opacity: 1; transform: none; padding-top: var(--s-4); border-top: 2px solid var(--c-violet); }
  .tl-step::before { display: none; }
  .sw { grid-template-columns: minmax(0, 1fr); }
  .sw-list { flex-direction: row; overflow-x: auto; border-right: 0; border-bottom: 1px solid var(--line); scrollbar-width: none; }
  .sw-tab { flex: none; min-height: 56px; border-bottom: 0; border-right: 1px solid var(--line); font-size: var(--fs-sm); }
  .sw-view { min-height: 460px; }
  .fx-stage { grid-template-columns: minmax(0, 1fr); padding: var(--s-6) var(--s-4); }
  .fx-node { min-height: 0; }
  .fx-wire { justify-self: center; width: 2px; height: 36px; }
  .fx-wire::after { right: auto; left: -5px; top: auto; bottom: -2px; border-block: 0; border-inline: 6px solid transparent; border-top: 8px solid var(--muted); }
  .fx-wire i { left: -3px; animation-name: packet-v; }
  .crew { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px) {
  .tl-steps { grid-template-columns: minmax(0, 1fr); }
  .sw-icon.px { top: 30%; right: 50%; width: 112px; height: 112px; translate: 50% -50%; }
  .crew-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bot { min-height: 120px; }
  .ba { height: 560px; }
  .ba-pane { padding: var(--s-5); }
  .ba-pane .ba-tag, .ba-pane .ba-list { width: 46%; }
  .ba-list li { min-height: 44px; padding: 0 var(--s-2); font-size: 12px; line-height: 1.2; }
  .ba-list li::before, .ba-after li::after { display: none; }
  .sc-axes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .where-stage { height: 380px; }
  .item { min-width: 0; padding: var(--s-2); }
  .item .mono { display: none; }
  .item .px { width: 28px; height: 28px; }
  .bb-range { flex-direction: column; align-items: stretch; }
  .bb-range output { min-width: 0; }
}

/* starter projects */
.finder { display: flex; flex-wrap: wrap; gap: 6px; }
.finder button { display: inline-flex; align-items: center; min-height: 40px; padding: 0 var(--s-4); border: 1px solid var(--line); border-radius: var(--r-1); background: var(--paper); color: var(--ink); font: 500 var(--fs-sm) var(--font); cursor: pointer; transition: background var(--t-1) var(--ease), color var(--t-1) var(--ease), border-color var(--t-1) var(--ease); }
.finder button:hover { border-color: var(--muted); }
.finder button[aria-pressed="true"] { background: var(--inv-bg); border-color: var(--inv-bg); color: var(--inv-fg); }
.finder .finder-clear { border-color: transparent; color: var(--muted); }
.finder-out { margin: var(--s-4) 0 var(--s-5); color: var(--muted); }
.projs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-2); }
.proj { position: relative; display: flex; flex-direction: column; gap: var(--s-3); padding: var(--s-6); border-radius: var(--r-2); background: var(--panel); transition: opacity .4s var(--ease), transform .4s var(--ease), background var(--t-2) var(--ease), box-shadow .4s var(--ease); }
.proj:hover { background: var(--panel-2); }
.proj-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--s-4); }
.proj-top .px { width: 36px; height: 36px; }
.proj-top .mono { padding: 3px 7px; background: var(--paper); border-radius: 2px; color: var(--muted); }
.proj h3 { font-size: var(--fs-card); line-height: 1.1; }
.proj-out { font-size: var(--fs-sm); line-height: 1.45; color: var(--muted); }
.proj-inc { display: grid; gap: 6px; margin: var(--s-2) 0; padding-top: var(--s-4); border-top: 1px solid var(--line); }
.proj-inc li { position: relative; padding-left: 18px; font-size: var(--fs-sm); line-height: 1.4; }
.proj-inc li::before { content: ""; position: absolute; left: 0; top: .5em; width: 7px; height: 7px; background: var(--c-violet); }
.proj-tools { margin-top: auto; padding-top: var(--s-3); color: var(--muted); }
.proj-go { align-self: flex-start; height: 40px; background: var(--paper); }
.proj-go:hover { background: var(--c-white); }
.projs.is-filtered .proj { opacity: .32; transform: scale(.98); }
.projs.is-filtered .proj.is-match { opacity: 1; transform: none; background: var(--paper); box-shadow: 0 0 0 1.5px var(--c-violet), 0 16px 32px -20px rgb(124 77 219 / .6); }
.starter { border-top: 1px solid var(--line); }

/* brand kit */
.bk-logos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-2); }
.bk-tile { margin: 0; overflow: hidden; border-radius: var(--r-2); border: 1px solid var(--line); }
.bk-art { display: grid; place-items: center; height: 260px; padding: var(--s-7); }
.bk-art img { max-width: 70%; max-height: 110px; }
.bk-paper .bk-art { background: #FAF9FC; }
.bk-night .bk-art { background: var(--c-black); }
.bk-panel .bk-art { background: #F1EFF6; }
.bk-indigo .bk-art { background: var(--c-indigo); }
.bk-tile figcaption { display: flex; justify-content: space-between; align-items: center; gap: var(--s-3); padding: var(--s-3) var(--s-4); background: var(--paper); border-top: 1px solid var(--line); font-size: var(--fs-sm); font-weight: 500; }
.bk-dls { display: flex; flex-wrap: wrap; gap: 6px; }
.bk-dl { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 10px; border-radius: var(--r-1); background: var(--btn); font: 500 var(--fs-xs) var(--font); transition: background var(--t-1) var(--ease); }
.bk-dl:hover { background: var(--btn-h); }
.bk-dl svg { width: 11px; height: 11px; }
.bk-more { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: var(--s-4); }
.bk-more .mono { margin-right: var(--s-2); color: var(--muted); }
.bk-socials { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-2); }
.bk-social { display: flex; flex-direction: column; overflow: hidden; border-radius: var(--r-2); background: var(--panel); transition: background var(--t-2) var(--ease); }
.bk-social:hover { background: var(--panel-2); }
.bk-social img { width: 100%; aspect-ratio: 16 / 7; object-fit: cover; background: var(--c-black); transition: transform .8s var(--ease); }
.bk-social:hover img { transform: scale(1.02); }
.bk-social.bk-square img { object-fit: contain; }
.bk-cap { display: flex; align-items: center; gap: var(--s-3); padding: var(--s-4); font-size: var(--fs-sm); }
.bk-cap b { font-weight: 500; }
.bk-cap .mono { color: var(--muted); }
.bk-cap svg { width: 13px; height: 13px; margin-left: auto; }
.swatches { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--s-2); }
.sw-c { position: relative; display: flex; flex-direction: column; padding: 0; border: 1px solid var(--line); border-radius: var(--r-2); background: var(--paper); color: var(--ink); font: inherit; text-align: left; cursor: copy; overflow: hidden; transition: transform var(--t-2) var(--ease), box-shadow var(--t-2) var(--ease); }
.sw-c:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.sw-chip { height: 120px; background: var(--c); }
.sw-meta { display: grid; gap: 2px; padding: var(--s-3); font-size: var(--fs-sm); }
.sw-meta b { font-weight: 500; }
.sw-meta .mono { color: var(--muted); }
.sw-copy { position: absolute; top: var(--s-3); right: var(--s-3); padding: 3px 6px; border-radius: 2px; background: rgb(255 255 255 / .9); color: var(--c-black); opacity: 0; transition: opacity var(--t-1) var(--ease); }
.sw-c:hover .sw-copy, .sw-c:focus-visible .sw-copy, .sw-c.is-copied .sw-copy { opacity: 1; }
.sw-c.is-copied .sw-copy { background: var(--c-violet); color: var(--c-white); }
.bk-copied { min-height: 1.5em; margin-top: var(--s-3); color: var(--muted); }
.bk-type { min-height: 300px; }
.c .bk-aa { font-size: 120px; font-weight: 500; line-height: 1; letter-spacing: -0.04em; }
.bk-aa.bk-mono { font-family: var(--mono); font-weight: 400; letter-spacing: 0; }
.bk-icons { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.bk-icon { display: grid; justify-items: center; gap: var(--s-2); padding: var(--s-5) var(--s-2) var(--s-4); border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.bk-icon img { width: 48px; height: 48px; image-rendering: pixelated; }
.bk-icon .mono { color: var(--muted); }
.bk-icon .bk-dls { justify-content: center; opacity: 0; transition: opacity var(--t-1) var(--ease); }
.bk-icon:hover .bk-dls, .bk-icon:focus-within .bk-dls { opacity: 1; }
.bk-icon .bk-dl { height: 24px; padding: 0 6px; font-size: 11px; }
.fcopy a { color: var(--ink); background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: background-size var(--t-2) var(--ease); }
.fcopy a:hover { background-size: 100% 1px; }

/* ================= 404 ================= */
.lost { min-height: calc(100svh - var(--nav-h)); display: grid; place-content: center; justify-items: center; gap: var(--s-5); padding: var(--gut); text-align: center; }
.lost .mark { width: 96px; height: 76px; }

/* ================= responsive ================= */
@media (max-width: 1180px) {
  .nav-opt { display: none; }
  .products { grid-template-columns: 120px minmax(0, 1fr) var(--gut); }
  .rail-in { padding-left: 42px; }
}
@media (max-width: 1024px) {
  .hero { grid-template-columns: 1fr; }
  .hero-r { grid-template-rows: auto auto; }
  .hero-tag { padding: var(--s-6) var(--gut); }
  .hero-news { padding: var(--s-6) var(--gut) var(--s-7); }
  .news-label { margin-top: 0; }
  .arrows { display: none; }
  .hero-title { height: auto; padding: var(--s-9) var(--gut) var(--s-7); }
  .mosaic { height: 320px; }
  .st-panel { min-height: 0; padding: var(--s-9) var(--gut); }
  .hero-l .mosaic { flex: none; min-height: 0; }
  .pcells { grid-template-columns: repeat(2, 1fr); }
  .pcell:nth-child(2) { border-right: 0; }
  .pcell:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
  .pcell { min-height: 300px; }
  .ph { grid-template-columns: 1fr; }
  .ph-l { padding: var(--s-8) var(--gut) var(--s-7); gap: var(--s-7); }
  .ph-r { padding: var(--s-6) var(--gut); }
  .cells, .cells-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .step:nth-child(2) { border-right: 0; }
  .step:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
  .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .card-wide { grid-column: span 2; flex-direction: column; }
  .card-wide .card-art { flex: none; height: 300px; }
  .split { grid-template-columns: 1fr; gap: var(--s-6); }
  .split-l { position: static; }
  .ways { grid-template-columns: 1fr; }
  .projs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bk-socials { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .swatches { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .bk-icons { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .bk-icon .bk-dls { opacity: 1; }
  .way { min-height: 0; }
  .way h3 { margin-top: var(--s-5); }
}
@media (max-width: 900px) {
  .nav-main, .nav-start { display: none; }
  .burger { display: flex; }
  .nav.open .burger .i-open { display: none; }
  .nav.open .burger .i-close { display: block; }
  .nav.open .nav-main {
    display: flex; flex-direction: column; position: fixed; inset: var(--nav-h) 0 0 0; overflow-y: auto; background: var(--paper);
    animation: sheet .35s var(--ease) both;
  }
  .nav.open .nav-main .cell { width: 100%; height: 60px; padding: 0 var(--gut); font-size: 20px; border-right: 0; border-bottom: 1px solid var(--line); display: flex; }
  .nav.open .nav-item { height: auto; }
  .nav.open .menu { position: static; display: none; min-width: 0; opacity: 1; visibility: visible; transform: none; border: 0; box-shadow: none; border-radius: 0; background: var(--panel); }
  .nav.open .nav-item.open > .menu { display: flex; flex-direction: column; }
  .nav.open .menu-2 .menu-col { flex: none; border-right: 0; }
  .nav.open .menu-row { padding: 0 var(--gut); }
  .cell-dark { min-width: 0; }

  .slide-art { place-items: end; padding: var(--s-5); }
  .slide-art .px-xl { margin: 0; width: 88px; height: 88px; }
  .slide h3 { max-width: calc(100% - 24px); }
  .doall { padding: var(--s-9) var(--gut); }
  .puzzle { width: auto; height: auto; transform: none; margin: var(--s-7) 0 0; display: grid; grid-template-columns: 1fr 1fr; }
  .puzzle .pz-blank, .puzzle .pz-diamond, .puzzle .pz-dot { display: none; }
  .puzzle .pz { position: relative; left: auto; top: auto; width: auto; height: 180px; }
  .pz-1, .pz-6 { grid-column: span 2; }
  .products { grid-template-columns: minmax(0, 1fr); }
  .rail { display: none; }
  .p-col { border-inline: 0; }
  .p-sec { padding: var(--s-8) var(--gut) var(--s-6); }
  .p-head { flex-direction: column; align-items: flex-start; }
  .p-sub { margin: var(--s-4) 0 var(--s-5); }
  .partner-row, .band-row { flex-direction: column; align-items: flex-start; }
  .dcols { grid-template-columns: 1fr; }
  .dcol { min-height: 0; border-right: 1px solid #2A2642; border-bottom: 1px solid #2A2642; }
  .dcol:last-child { border-bottom: 0; }
  .dcol p { margin-top: var(--s-6); }
  .fcols { grid-template-columns: 1fr 1fr; }
  .fcol:nth-child(2) { border-right: 0; }
  .fcol:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
  .fbottom { flex-direction: column; align-items: flex-start; gap: var(--s-4); min-height: 0; }
  .fcopy, .fprefs { padding-bottom: 0; }
  .bigmark { position: relative; left: auto; translate: none; align-self: center; margin-top: var(--s-5); width: 180px; height: 142px; }
}
@keyframes sheet { from { opacity: 0; transform: translateY(-8px); } }
@media (max-width: 560px) {
  .cell-dark { padding: 0 var(--s-3); }
  .cell-dark svg { display: none; }
  .mosaic { height: 240px; }
  .ml-b, .md-2, .md-4, .mv-2 { display: none; }
  .strip-cell { width: 180px; height: 150px; }
  .wm { font-size: 22px; }
  .slide { width: 86vw; height: 440px; }
  .puzzle { grid-template-columns: 1fr; }
  .pz-1, .pz-6 { grid-column: auto; }
  .puzzle .pz { height: 150px; }
  .pcells { grid-template-columns: 1fr; }
  .pcell { border-right: 0; border-bottom: 1px solid var(--line); min-height: 220px; }
  .pcell:last-child { border-bottom: 0; }
  .pcell .pc-b > span { max-height: 120px; opacity: 1; }
  .band-btns { flex-wrap: wrap; }
  .fsocial { flex-direction: column; align-items: flex-start; gap: var(--s-5); }
  .fget { justify-items: start; }
  .news-label { margin-top: 0; }
  .sec { padding-block: var(--s-8); }
  .sec-head { flex-direction: column; align-items: flex-start; }
  .cells, .cells-2, .cells-4, .facts { grid-template-columns: 1fr; }
  .c { min-height: 0; }
  .steps { grid-template-columns: 1fr; }
  .step { min-height: 0; border-right: 0; border-bottom: 1px solid var(--line); }
  .step:last-child { border-bottom: 0; }
  .step h3 { margin-top: var(--s-5); }
  .cards { grid-template-columns: 1fr; }
  .projs { grid-template-columns: minmax(0, 1fr); }
  .bk-logos, .bk-socials { grid-template-columns: minmax(0, 1fr); }
  .swatches { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .c .bk-aa { font-size: 88px; }
  .card-wide { grid-column: auto; }
  .card-art { height: 200px; }
  .mosaic.ph-band { height: 96px; }
  .post-art { height: 180px; }
  .tbl td:first-child { white-space: normal; }
  .next a { border-right: 0; border-bottom: 1px solid var(--line); }
}
/* ================= how we work: Friday by Friday ================= */
.demo-tag { padding: 3px 6px; border: 1px solid var(--line); border-radius: 2px; color: var(--muted); font-size: 11px; background: var(--paper); }
.ff { display: grid; gap: var(--s-4); }
.ff-rail { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto auto; gap: 0 var(--s-3); align-items: end; }
.ff-tabs { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); border: 1px solid var(--line); border-bottom: 0; }
.ff-tabs button { display: grid; gap: 2px; padding: var(--s-3) var(--s-4); text-align: left; background: var(--paper); border: 0; border-right: 1px solid var(--line); cursor: pointer; transition: background var(--t-2) var(--ease), color var(--t-2) var(--ease); }
.ff-tabs button:last-child { border-right: 0; }
.ff-tabs button b { font-size: var(--fs-sm); font-weight: 500; }
.ff-tabs button small { font-family: var(--mono); font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.ff-tabs button:hover { background: var(--panel); }
.ff-tabs button[aria-selected="true"] { background: var(--inv-bg); color: var(--inv-fg); }
.ff-tabs button[aria-selected="true"] small { color: inherit; opacity: .7; }
.ff-bar { grid-column: 1; height: 4px; background: var(--line); }
.ff-bar i { display: block; height: 100%; width: calc(var(--p, 0) * 100%); background: linear-gradient(90deg, var(--c-violet), var(--c-blue)); transition: width .5s var(--ease); }
.ff-play { grid-column: 2; grid-row: 1 / span 2; display: grid; place-items: center; width: 48px; height: 48px; padding: 0; border: 1px solid var(--line); border-radius: var(--r-2); background: var(--paper); cursor: pointer; transition: background var(--t-2) var(--ease); }
.ff-play:hover { background: var(--panel); }
.ff-play svg { width: 14px; height: 14px; }
.ff-play .i-play, .ff.paused .ff-play .i-pause { display: none; }
.ff.paused .ff-play .i-play { display: block; }

.ff-stage { position: relative; height: 470px; overflow: hidden; border: 1px solid var(--line); background: var(--panel); background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px); background-size: 40px 40px; }
.ff-stage > .demo-tag { position: absolute; right: var(--s-3); top: var(--s-3); z-index: 4; }
.ff-note { min-height: 3em; max-width: 760px; font-size: var(--fs-md); line-height: 1.35; }

/* week 1: sticky-note workflow map */
.ff-map { position: absolute; inset: 0; z-index: 3; display: grid; align-content: center; justify-items: center; gap: var(--s-5); padding: var(--s-6); transition: opacity .5s var(--ease), transform .6s var(--ease); }
.ff-map-t { color: var(--muted); }
.ff-notes { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: var(--s-2); }
.ff-notes span { display: grid; gap: 4px; width: 148px; padding: var(--s-3); background: #FFF6C9; color: #3B3313; font-size: 13px; line-height: 1.3; rotate: var(--r); box-shadow: 0 8px 18px -10px rgb(20 17 42 / .4); }
.ff-notes span b { font-size: 15px; font-weight: 600; }
.ff-notes i { width: 18px; height: 2px; background: var(--muted); }
.ff-map-cost { font-size: var(--fs-md); }
.ff-map-cost b { color: var(--c-violet); font-weight: 600; }
.ff-stage:not([data-stage="0"]) .ff-map { opacity: 0; transform: translateY(-16px) scale(.98); pointer-events: none; }

/* the app mock */
.ff-app { position: absolute; inset: 28px; display: grid; grid-template-rows: 44px 1fr; background: #FFFFFF; color: #14112A; border: 1px solid #E3E0EA; border-radius: var(--r-2); box-shadow: var(--shadow); overflow: hidden; font-size: 13px; transition: opacity .5s var(--ease), transform .6s var(--ease); }
.ff-stage[data-stage="0"] .ff-app { opacity: 0; transform: translateY(20px); }
.ff-top { display: flex; align-items: center; gap: var(--s-3); padding: 0 var(--s-4); border-bottom: 1px solid #E3E0EA; }
.ff-logo { display: flex; align-items: center; gap: 8px; font-weight: 600; }
.ff-logo svg { width: 22px; height: 18px; color: #14112A; }
.ff-live { display: none; align-items: center; gap: 6px; margin-left: auto; padding: 3px 8px; border-radius: 99px; background: #E9FBF0; color: #137A3C; font-size: 12px; font-weight: 600; }
.ff-live i { width: 7px; height: 7px; border-radius: 50%; background: #1FB35A; animation: ff-pulse 1.6s infinite; }
@keyframes ff-pulse { 50% { box-shadow: 0 0 0 5px rgb(31 179 90 / .18); } }
.ff-user { margin-left: auto; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: #ECE9F3; font-size: 11px; font-weight: 600; }
.ff-live ~ .ff-user { margin-left: 0; }
.ff-body { display: grid; grid-template-columns: 140px minmax(0, 1fr) 220px; min-height: 0; }
.ff-nav { display: grid; align-content: start; gap: 2px; padding: var(--s-3); border-right: 1px solid #E3E0EA; }
.ff-nav span { padding: 7px 10px; border-radius: 4px; color: #6B6784; }
.ff-nav span.on { background: #F1EFF6; color: #14112A; font-weight: 500; }
.ff-main { display: grid; align-content: start; gap: var(--s-3); padding: var(--s-4); min-width: 0; }
.ff-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-2); }
.ff-kpis div { display: grid; gap: 4px; padding: var(--s-3); border: 1px solid #E3E0EA; border-radius: 4px; }
.ff-kpis small, .ff-saved small { color: #6B6784; font-size: 12px; }
.ff-kpis b { font-size: 26px; font-weight: 500; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.ff-table { border: 1px solid #E3E0EA; border-radius: 4px; overflow: hidden; }
.ff-row { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: var(--s-2); padding: 9px var(--s-3); border-top: 1px solid #F1EFF6; white-space: nowrap; }
.ff-row span { overflow: hidden; text-overflow: ellipsis; }
.ff-head { border-top: 0; background: #FAF9FC; color: #6B6784; font-size: 12px; }
.st { font-style: normal; padding: 2px 8px; border-radius: 99px; font-size: 11px; font-weight: 600; }
.st-ok { background: #E9FBF0; color: #137A3C; }
.st-rev { background: #F3EEFF; color: #5B2FC9; }
.st-run { background: #EEF3FF; color: #1E4FD8; }
.ff-side { display: grid; align-content: start; gap: var(--s-3); padding: var(--s-4); border-left: 1px solid #E3E0EA; background: #FAF9FC; }
.ff-side-t { font-weight: 600; }
.ff-card { display: grid; gap: 6px; padding: var(--s-3); background: #FFFFFF; border: 1px solid #E3E0EA; border-radius: 4px; }
.ff-card span { color: #6B6784; font-size: 12px; }
.ff-btns { display: flex; gap: 6px; margin-top: 4px; }
.ff-btn { padding: 5px 10px; border: 1px solid #E3E0EA; border-radius: 3px; font-size: 12px; font-weight: 500; }
.ff-btn-main { background: #14112A; border-color: #14112A; color: #FFFFFF; }
.ff-saved { display: grid; gap: 2px; margin-top: auto; }
.ff-saved b { font-size: 30px; font-weight: 500; color: #7C4DDB; font-variant-numeric: tabular-nums; }

/* week 2: wireframe. Everything becomes grey blocks and dashed boxes. */
.ff-stage[data-stage="1"] .ff-app { border-style: dashed; box-shadow: none; }
.ff-stage[data-stage="1"] .ff-app :is(span, b, small, em, p) { color: transparent !important; background: #E6E3EE !important; border-radius: 2px; }
.ff-stage[data-stage="1"] .ff-app :is(.ff-kpis div, .ff-table, .ff-card, .ff-top, .ff-nav, .ff-side, .ff-row) { border-style: dashed; }
.ff-stage[data-stage="1"] .ff-app svg { opacity: .2; }
.ff-stage[data-stage="1"] .ff-side { background: #FFFFFF; }
/* week 3: real layout, sample rows only */
.ff-stage[data-stage="2"] .ff-row:not(.ff-head) span:first-child::after { content: " (sample)"; color: #9C97B5; }
.ff-stage[data-stage="2"] .ff-flag, .ff-stage[data-stage="2"] .ff-new, .ff-stage[data-stage="2"] .ff-card, .ff-stage[data-stage="3"] .ff-card { opacity: .25; filter: grayscale(1); }
/* weeks 4 to 6 */
.ff-new { opacity: 0; transform: translateY(-6px); transition: opacity .4s var(--ease), transform .4s var(--ease); }
.ff-stage[data-stage="5"] .ff-new { opacity: 1; transform: none; }
.ff-stage[data-stage="5"] .ff-live { display: flex; }
.ff-stage:is([data-stage="4"], [data-stage="5"]) .ff-card { animation: ff-glow 2s var(--ease) 1; }
@keyframes ff-glow { 0% { box-shadow: 0 0 0 0 rgb(124 77 219 / .5); } 100% { box-shadow: 0 0 0 10px rgb(124 77 219 / 0); } }
.ff-stage:not([data-stage="4"]):not([data-stage="5"]) .ff-flag .st-rev { background: #E9FBF0; color: #137A3C; }

/* ================= how we work: shared channel ================= */
.ch-ticks { display: grid; gap: var(--s-2); margin: var(--s-2) 0; padding: 0; list-style: none; }
.ch-ticks li { display: flex; align-items: center; gap: var(--s-3); font-size: var(--fs-sm); color: var(--muted); transition: color var(--t-2) var(--ease); }
.ch-ticks li::before { content: ""; flex: none; width: 18px; height: 18px; border: 1px solid var(--line); border-radius: 3px; background: var(--paper) center / 12px no-repeat; transition: background-color var(--t-2) var(--ease), border-color var(--t-2) var(--ease); }
.ch-ticks li.on { color: var(--ink); }
.ch-ticks li.on::before { background-color: var(--c-violet); border-color: var(--c-violet); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 6.2l2.3 2.3 4.7-5' fill='none' stroke='white' stroke-width='1.8'/%3E%3C/svg%3E"); }
.chan { display: grid; grid-template-rows: auto 1fr auto auto; height: 600px; border: 1px solid var(--line); border-radius: var(--r-2); background: var(--paper); overflow: hidden; }
.chan-top { display: flex; align-items: center; gap: var(--s-2); padding: var(--s-3) var(--s-4); border-bottom: 1px solid var(--line); }
.chan-hash { color: var(--muted); font-size: 20px; }
.chan-meta { margin-left: var(--s-2); color: var(--muted); }
.chan-top .demo-tag { margin-left: auto; }
.chan-list { display: flex; flex-direction: column; justify-content: flex-end; gap: var(--s-4); padding: var(--s-4); overflow: hidden; }
.msg { display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: var(--s-3); font-size: var(--fs-sm); line-height: 1.45; }
.chan .msg { display: none; animation: msg-in .45s var(--ease) both; }
.chan .msg.on { display: grid; }
@keyframes msg-in { from { opacity: 0; transform: translateY(10px); } }
.av { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 6px; background: var(--panel); font-weight: 600; font-size: 14px; }
.av svg { width: 20px; height: 16px; }
.av .px { width: 20px; height: 20px; }
.msg.fin .av { background: var(--inv-bg); color: var(--inv-fg); }
.msg.bot .av { background: var(--c-violet); }
.msg.you .av { background: var(--c-sky); color: #14112A; }
.who { font-weight: 600; }
.who small { margin-left: 6px; font-weight: 400; color: var(--muted); font-size: 12px; }
.att { display: inline-flex; align-items: center; gap: 8px; margin-top: 6px; padding: 6px 10px; border: 1px solid var(--line); border-radius: 4px; font-size: 13px; }
.att .px { width: 18px; height: 18px; }
.demo-card { display: grid; gap: 4px; margin-top: 6px; padding: var(--s-3); border: 1px solid var(--line); border-left: 4px solid var(--c-violet); border-radius: 4px; background: var(--panel); }
.demo-card span { color: var(--muted); font-size: 13px; }
.demo-link { display: inline-flex; align-items: center; gap: 4px; color: var(--c-violet) !important; font-weight: 500; }
.demo-link svg { width: 11px; height: 11px; }
.chan-typing { display: flex; gap: 4px; height: 22px; padding: 0 var(--s-4) var(--s-2) 64px; opacity: 0; transition: opacity var(--t-2); }
.chan.typing .chan-typing { opacity: 1; }
.chan-typing i { width: 6px; height: 6px; border-radius: 50%; background: var(--muted); animation: dot 1s infinite; }
.chan-typing i:nth-child(2) { animation-delay: .15s; }
.chan-typing i:nth-child(3) { animation-delay: .3s; }
@keyframes dot { 50% { transform: translateY(-4px); opacity: .4; } }
.chan-box { margin: 0 var(--s-4) var(--s-4); padding: var(--s-3) var(--s-4); border: 1px solid var(--line); border-radius: var(--r-2); color: var(--muted); font-size: var(--fs-sm); }

/* ================= how we work: starter project demos ================= */
.demo { display: grid; grid-template-columns: 300px minmax(0, 1fr); border: 1px solid var(--line); }
.demo-list { display: grid; align-content: start; border-right: 1px solid var(--line); }
.demo-list button { position: relative; display: flex; align-items: center; gap: var(--s-3); padding: var(--s-4); text-align: left; background: var(--paper); border: 0; border-bottom: 1px solid var(--line); cursor: pointer; transition: background var(--t-2) var(--ease); }
.demo-list button::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: linear-gradient(var(--c-violet), var(--c-blue)); transform: scaleY(0); transform-origin: top; transition: transform var(--t-2) var(--ease); }
.demo-list button:hover { background: var(--panel); }
.demo-list button[aria-selected="true"] { background: var(--panel); }
.demo-list button[aria-selected="true"]::before { transform: scaleY(1); }
.demo-list span { display: grid; gap: 2px; }
.demo-list b { font-size: var(--fs-sm); font-weight: 500; }
.demo-list small { font-family: var(--mono); font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.demo-win { display: grid; grid-template-rows: auto 440px auto; min-width: 0; background: var(--panel); }
.demo-bar { display: flex; align-items: center; gap: var(--s-3); padding: var(--s-2) var(--s-4); border-bottom: 1px solid var(--line); background: var(--paper); }
.demo-bar .dots { display: flex; gap: 6px; }
.demo-bar .dots i { width: 10px; height: 10px; border-radius: 50%; background: var(--line); }
.demo-url { flex: 1; padding: 5px 12px; border-radius: 99px; background: var(--panel); color: var(--muted); font-size: 13px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.demo-replay { display: grid; place-items: center; width: 30px; height: 30px; padding: 0; border: 1px solid var(--line); border-radius: var(--r-1); background: var(--paper); cursor: pointer; }
.demo-replay:hover { background: var(--panel); }
.demo-replay svg { width: 14px; height: 14px; }
.dp { position: relative; display: grid; gap: var(--s-4); padding: var(--s-5); overflow: hidden; color: #14112A; font-size: 14px; }
.dp[hidden] { display: none; }
.demo-foot { display: flex; justify-content: space-between; align-items: center; gap: var(--s-4); padding: var(--s-4) var(--s-5); border-top: 1px solid var(--line); background: var(--paper); }
.demo-foot p { max-width: 560px; color: var(--muted); }

/* step engine: anything with data-at waits until its moment */
.dp [data-at] { opacity: 0; transform: translateY(8px); transition: opacity .4s var(--ease), transform .4s var(--ease); }
.dp [data-at].on { opacity: 1; transform: none; }
.dp .w { background: #FFFFFF; border: 1px solid #E3E0EA; border-radius: var(--r-2); }

/* 1. inbox */
.dp-inbox { grid-template-columns: 280px minmax(0, 1fr); }
.ib-list, .ib-read { background: #FFFFFF; border: 1px solid #E3E0EA; border-radius: var(--r-2); }
.ib-list { display: grid; align-content: start; overflow: hidden; }
.ib-mail { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 8px; padding: 10px var(--s-3); border-bottom: 1px solid #F1EFF6; }
.ib-mail b { font-weight: 600; font-size: 13px; }
.ib-mail span { grid-column: 1; color: #6B6784; font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ib-mail .tag { grid-column: 2; grid-row: 1 / span 2; align-self: center; }
.ib-mail.is-sel { background: #F6F3FD; box-shadow: inset 3px 0 0 #7C4DDB; }
.tag { font-style: normal; padding: 2px 8px; border-radius: 99px; font-size: 11px; font-weight: 600; }
.t-billing { background: #F3EEFF; color: #5B2FC9; }
.t-sales { background: #EEF3FF; color: #1E4FD8; }
.t-support { background: #FFF4E5; color: #9A5B00; }
.t-skip { background: #F1EFF6; color: #6B6784; }
.ib-count { padding: 10px var(--s-3); color: #6B6784; font-size: 12px; }
.ib-count b { color: #14112A; }
.ib-read { position: relative; display: grid; align-content: start; gap: 6px; padding: var(--s-4); }
.ib-subj { font-size: 17px; font-weight: 600; }
.ib-from { color: #6B6784; font-size: 12px; }
.ib-text { padding: var(--s-3) 0; border-bottom: 1px solid #F1EFF6; }
.ib-draft { display: grid; gap: 8px; margin-top: 6px; padding: var(--s-3); border: 1px solid #DCD2F7; border-radius: var(--r-2); background: #FBF9FF; }
.ib-lbl { display: flex; align-items: center; gap: 6px; color: #7C4DDB; font-size: 11px; }
.ib-lbl .px { width: 14px; height: 14px; }
.ib-typed, .kn-typed { min-height: 4.5em; }
.is-typing::after { content: ""; display: inline-block; width: 2px; height: 1em; margin-left: 2px; vertical-align: -2px; background: #7C4DDB; animation: blink 1s steps(1) infinite; }
.ib-actions { display: flex; gap: 6px; }
.d-btn { padding: 6px 12px; border: 1px solid #E3E0EA; border-radius: 4px; font-size: 12px; font-weight: 500; background: #FFFFFF; transition: transform .15s var(--ease), background .2s; }
.d-main { background: #14112A; border-color: #14112A; color: #FFFFFF; }
.d-btn.pressed { transform: scale(.94); background: #7C4DDB; border-color: #7C4DDB; }
.d-toast { position: absolute; right: var(--s-4); bottom: var(--s-4); padding: 8px 14px; border-radius: 4px; background: #14112A; color: #FFFFFF; font-size: 12px; }

/* 2. booking */
.dp-booking { grid-template-columns: 300px minmax(0, 1fr); align-items: start; }
.phone { display: grid; grid-template-rows: auto 1fr; height: 390px; border: 8px solid #14112A; border-radius: 28px; background: #ECE5DD; overflow: hidden; }
.ph-head { display: flex; align-items: center; gap: 10px; padding: 10px 12px; background: #2B1266; color: #FFFFFF; }
.ph-head span:last-child { display: grid; font-size: 12px; }
.ph-head small { opacity: .7; }
.ph-av { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: #7FB0FF; color: #14112A; font-weight: 700; }
.ph-chat { display: flex; flex-direction: column; gap: 8px; padding: 12px; font-size: 12.5px; line-height: 1.35; }
.ph-sys { align-self: center; padding: 3px 10px; border-radius: 99px; background: rgb(255 255 255 / .8); color: #6B6784; font-size: 11px; }
.bub { max-width: 82%; padding: 7px 10px; border-radius: 8px; box-shadow: 0 1px 1px rgb(0 0 0 / .08); }
.bub.them { align-self: flex-start; background: #FFFFFF; }
.bub.us { align-self: flex-end; background: #E4DAFB; }
.cal { display: grid; gap: var(--s-3); padding: var(--s-4); background: #FFFFFF; border: 1px solid #E3E0EA; border-radius: var(--r-2); }
.cal-t { font-weight: 600; }
.cal-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.cal-h { color: #6B6784; font-size: 12px; text-align: center; }
.slot { min-height: 44px; border: 1px dashed #E3E0EA; border-radius: 4px; }
.slot.busy { border-style: solid; background: #F1EFF6; }
.slot.pick { display: grid; place-items: center; padding: 4px; background: #7C4DDB; border: 0; color: #FFFFFF; font-size: 11px; font-weight: 600; text-align: center; }
.cal-note { display: flex; align-items: center; gap: 8px; color: #6B6784; font-size: 13px; }
.cal-note .px { width: 18px; height: 18px; }

/* 3. invoice */
.dp-invoice { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; }
.inv-doc { position: relative; display: grid; gap: 10px; padding: var(--s-5); background: #FFFFFF; border: 1px solid #E3E0EA; box-shadow: var(--shadow); overflow: hidden; }
.inv-v { font-weight: 700; letter-spacing: .04em; }
.inv-n { color: #6B6784; font-size: 12px; }
.inv-lines { display: grid; grid-template-columns: 1fr auto; gap: 8px 16px; padding: var(--s-3) 0; border-block: 1px solid #F1EFF6; font-size: 13px; }
.inv-tot { display: flex; justify-content: space-between; font-size: 15px; }
.inv-scan { position: absolute; left: 0; right: 0; top: 0; height: 3px; background: #2F6BFF; box-shadow: 0 0 14px 3px rgb(47 107 255 / .45); }
.inv-scan.on { animation: scan-doc 2.6s var(--ease-io) forwards; }
@keyframes scan-doc { 0% { top: 0; opacity: 1; } 90% { opacity: 1; } 100% { top: 100%; opacity: 0; } }
.inv-fields { display: grid; gap: 6px; }
.inv-lbl { color: #6B6784; }
.fld { display: grid; grid-template-columns: 96px minmax(0, 1fr) 18px; align-items: center; gap: 8px; padding: 9px 12px; background: #FFFFFF; border: 1px solid #E3E0EA; border-radius: 4px; }
.fld span { color: #6B6784; font-size: 12px; }
.fld b { font-weight: 500; }
.fld .ok { width: 16px; height: 16px; border-radius: 50%; background: #1FB35A url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 6.2l2.3 2.3 4.7-5' fill='none' stroke='white' stroke-width='1.8'/%3E%3C/svg%3E") center / 10px no-repeat; }
.inv-post { display: flex; align-items: center; gap: 10px; margin-top: 6px; padding: 12px; border-radius: 4px; background: #14112A; color: #FFFFFF; }
.inv-post span { display: grid; }
.inv-post small { opacity: .7; }

/* 4. knowledge */
.kn { display: grid; align-content: start; gap: var(--s-4); padding: var(--s-4); background: #FFFFFF; border: 1px solid #E3E0EA; border-radius: var(--r-2); }
.kn .msg.you .av { background: #7FB0FF; }
.kn .msg.bot .av { background: #7C4DDB; }
.kn-src { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.kn-src span { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border: 1px solid #E3E0EA; border-radius: 99px; font-size: 12px; }
.kn-src .px, .kn-perm .px { width: 14px; height: 14px; }
.kn-perm { display: flex; align-items: center; gap: 6px; margin-top: 8px; color: #137A3C; font-size: 12px; }

/* 5. report */
.rp { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s-3); }
.rp-kpis { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-2); }
.rp-kpis div { display: grid; gap: 2px; padding: var(--s-3); background: #FFFFFF; border: 1px solid #E3E0EA; border-radius: 4px; }
.rp-kpis small { color: #6B6784; font-size: 12px; }
.rp-kpis b { font-size: 26px; font-weight: 500; font-variant-numeric: tabular-nums; }
.rp-kpis em { font-style: normal; font-size: 12px; font-weight: 600; }
.up { color: #137A3C; }
.dn { color: #B3261E; }
.rp-chart { display: flex; align-items: flex-end; gap: 10px; height: 200px; padding: var(--s-4); background: #FFFFFF; border: 1px solid #E3E0EA; border-radius: 4px; }
.rp-chart i { flex: 1; height: calc(var(--h) * 100%); background: linear-gradient(#7FB0FF, #2F6BFF); border-radius: 2px 2px 0 0; transform-origin: bottom; }
.dp .rp-chart i[data-at] { opacity: 1; transform: scaleY(0); transition: transform .7s var(--ease); }
.dp .rp-chart i[data-at].on { transform: scaleY(1); }
.rp-chart i:last-child { background: linear-gradient(#C3ADF8, #7C4DDB); }
.rp-post { display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: var(--s-3); align-content: start; padding: var(--s-4); background: #FFFFFF; border: 1px solid #E3E0EA; border-radius: 4px; font-size: 13px; line-height: 1.45; }
.rp-post .av { background: #7C4DDB; }

@media (max-width: 1100px) {
  .demo { grid-template-columns: minmax(0, 1fr); }
  .demo-list { grid-template-columns: repeat(5, minmax(180px, 1fr)); overflow-x: auto; border-right: 0; border-bottom: 1px solid var(--line); }
  .demo-list button { border-bottom: 0; border-right: 1px solid var(--line); }
  .ff-body { grid-template-columns: 110px minmax(0, 1fr); }
  .ff-side { display: none; }
}
@media (max-width: 760px) {
  .ff-rail { grid-template-columns: minmax(0, 1fr); }
  .ff-tabs { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ff-play { grid-column: 1; grid-row: auto; width: 100%; height: 44px; margin-top: var(--s-2); }
  .demo-bar { padding: var(--s-2) var(--s-3); gap: var(--s-2); }
  .demo-bar .dots { display: none; }
  .demo-url { min-width: 0; }
  .ff-tabs button:nth-child(3) { border-right: 0; }
  .ff-tabs button:nth-child(-n+3) { border-bottom: 1px solid var(--line); }
  .ff-stage { height: 520px; }
  .ff-stage > .demo-tag { top: auto; bottom: var(--s-2); }
  .ff-app { inset: 12px; }
  .ff-nav { display: none; }
  .ff-body { grid-template-columns: minmax(0, 1fr); }
  .ff-row { grid-template-columns: 1.3fr 1fr; }
  .ff-row span:nth-child(2), .ff-row span:nth-child(3) { display: none; }
  .ff-notes span { width: 128px; }
  .ff-notes i { display: none; }
  .chan { height: 560px; }
  .demo-win { grid-template-rows: auto auto auto; }
  .dp { padding: var(--s-3); min-height: 440px; }
  .dp-inbox, .dp-booking, .dp-invoice, .rp { grid-template-columns: minmax(0, 1fr); }
  .ib-list { display: none; }
  .rp-kpis { grid-template-columns: repeat(2, 1fr); }
  .rp-chart { display: none; }
  .phone { height: 360px; }
  .demo-foot { flex-direction: column; align-items: flex-start; }
}

@media (prefers-reduced-motion: reduce) {
  .dp [data-at] { opacity: 1 !important; transform: none !important; }
  .chan .msg { display: grid; }
  .dp .rp-chart i[data-at] { transform: none !important; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  html { scroll-behavior: auto; }
  .reveal, .puzzle .pz, .puzzle .pz-blank, .puzzle .pz-diamond { opacity: 1 !important; transform: none !important; translate: none !important; }
  .wire path { stroke-dashoffset: 0; }
  .warr { opacity: 1; }
}

/* markets and pricing: country lists */
.mks { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-6) var(--s-5); }
.mk-h { margin-bottom: var(--s-2); padding-bottom: var(--s-2); border-bottom: 2px solid var(--c-violet); font-size: var(--fs-sm); font-weight: 500; }
.mk-l { display: grid; margin: 0; padding: 0; list-style: none; }
.mk-l a { display: flex; justify-content: space-between; align-items: center; gap: var(--s-3); min-height: 44px; border-bottom: 1px solid var(--line); }
.mk-l a:hover { color: var(--c-violet); }
.mk-l .mono { color: var(--muted); font-size: 11px; }
@media (max-width: 1024px) { .mks { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .mks { grid-template-columns: minmax(0, 1fr); } }

/* hero: headline and two buttons on the left with pixel blocks filling the rest of the column; tagline and latest posts on the right. */
.hero-title { height: auto; padding: var(--s-9) var(--s-7) var(--s-6); }
.hero-cta { display: flex; flex-wrap: wrap; align-items: stretch; gap: var(--s-2); padding: 0 var(--s-7) var(--s-8); }
.hero-cta .btn-dark, .hero-cta .btn-grey { height: 52px; padding: 0 var(--s-6); border-radius: var(--r-1); font-size: 16px; }
.hero-cta .btn-dark { background: var(--inv-bg); color: var(--inv-fg); }
.hero-cta .btn-dark:hover { background: var(--inv-bg); opacity: .88; }
.hero-l .mosaic { flex: 1; min-height: 240px; }
@media (max-width: 1024px) {
  .hero-title { padding: var(--s-9) var(--gut) var(--s-6); }
  .hero-cta { padding: 0 var(--gut) var(--s-7); }
  .hero-l .mosaic { flex: none; height: 240px; min-height: 0; }
}
@media (max-width: 700px) {
  .hero-title { padding: var(--s-9) var(--gut) var(--s-5); font-size: clamp(50px, 15vw, 80px); }
  .hero-cta { padding-bottom: var(--s-6); }
  .hero-cta > a { flex: 1 1 0; justify-content: center; padding: 0 var(--s-3); }
  .hero-l .mosaic { height: 200px; }
}

@media (max-width: 560px) { .st-panel { padding-inline: var(--gut); } }

.who .c-b p a { display: inline-block; margin-top: var(--s-2); color: var(--ink); font-weight: 500; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.who .c-b p a:hover { color: var(--c-violet); }