:root{--bg: #f5f7f7;--bg-2: #eaeeef;--surface: #ffffff;--ink: #12181c;--ink-2: #3a464d;--muted: #5b676e;--line: #d8dfe1;--line-2: #c4cdd0;--teal: #2cc4b0;--teal-ink: #0a7a6f;--teal-soft: rgba(44,196,176,0.14);--on-teal: #04211d;--cyan: #2b8fd0;--warn: #9a5b00;--warn-soft: rgba(214,140,20,0.12);--grid: rgba(18,24,28,0.055);--grid-major: rgba(18,24,28,0.09);--shadow: 0 1px 2px rgba(18,24,28,0.05),0 12px 32px -12px rgba(18,24,28,0.16);--grad-text: linear-gradient(100deg,#0b8a7d 0%,#16a99a 38%,#2b8fd0 100%);--t0: #0c4743;--t1: #0d625b;--t2: #0f7d73;--t3: #16998b;--t4: #2db3a1;--t5: #62ccbc;--t6: #a3e6db;--nurbs: rgba(18,24,28,0.5);--nurbs-edge: #12181c;--nurbs-fill: rgba(18,24,28,0.025);--f-display: "Archivo","Arial Black",system-ui,sans-serif;--f-body: "Geist",system-ui,-apple-system,"Segoe UI",sans-serif;--f-mono: "Geist Mono",ui-monospace,"Cascadia Mono",Consolas,monospace;--wrap: 1240px;--gutter: clamp(16px,4vw,40px);--section: clamp(88px,12vw,168px);--radius: 14px;--radius-sm: 9px;color-scheme: light}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){--bg: #0c1113;--bg-2: #11181b;--surface: #151d21;--ink: #ecf1f1;--ink-2: #bcc6ca;--muted: #8f9ca2;--line: #233036;--line-2: #2e3d44;--teal-ink: #45d8c4;--teal-soft: rgba(44,196,176,0.16);--warn: #f0b45a;--warn-soft: rgba(240,180,90,0.12);--grid: rgba(236,241,241,0.045);--grid-major: rgba(236,241,241,0.075);--shadow: 0 1px 2px rgba(0,0,0,0.3),0 16px 40px -16px rgba(0,0,0,0.6);--grad-text: linear-gradient(100deg,#2cc4b0 0%,#7fe3d6 45%,#63b9f2 100%);--nurbs: rgba(236,241,241,0.5);--nurbs-edge: #ecf1f1;--nurbs-fill: rgba(236,241,241,0.03);color-scheme: dark}
}
:root[data-theme="dark"]{--bg: #0c1113;--bg-2: #11181b;--surface: #151d21;--ink: #ecf1f1;--ink-2: #bcc6ca;--muted: #8f9ca2;--line: #233036;--line-2: #2e3d44;--teal-ink: #45d8c4;--teal-soft: rgba(44,196,176,0.16);--warn: #f0b45a;--warn-soft: rgba(240,180,90,0.12);--grid: rgba(236,241,241,0.045);--grid-major: rgba(236,241,241,0.075);--shadow: 0 1px 2px rgba(0,0,0,0.3),0 16px 40px -16px rgba(0,0,0,0.6);--grad-text: linear-gradient(100deg,#2cc4b0 0%,#7fe3d6 45%,#63b9f2 100%);--nurbs: rgba(236,241,241,0.5);--nurbs-edge: #ecf1f1;--nurbs-fill: rgba(236,241,241,0.03);color-scheme: dark}
*,*::before,*::after{box-sizing: border-box}
html{-webkit-text-size-adjust: 100%;scroll-behavior: smooth;scroll-padding-top: 84px}
body{margin: 0;background: var(--bg);color: var(--ink);font: 400 1.0625rem/1.58 var(--f-body);-webkit-font-smoothing: antialiased;text-rendering: optimizeLegibility;overflow-x: hidden}
img,svg{display: block;max-width: 100%}
a{color: var(--teal-ink);text-underline-offset: 3px;text-decoration-thickness: 1px}
a:hover{text-decoration-thickness: 2px}
p{margin: 0 0 1em}
h1,h2,h3,h4{margin: 0;font-weight: 600}
b,strong{font-weight: 600}
code,kbd,.mono{font-family: var(--f-mono);font-size: 0.9em}
::selection{background: var(--teal);color: var(--on-teal)}
:focus-visible{outline: 2px solid var(--teal);outline-offset: 3px;border-radius: 4px}
[hidden]{display: none !important}
.sr-only{position: absolute;width: 1px;height: 1px;padding: 0;margin: -1px;overflow: hidden;clip: rect(0 0 0 0);white-space: nowrap;border: 0}
.skip{position: absolute;left: 12px;top: -60px;z-index: 100;background: var(--ink);color: var(--bg);padding: 10px 14px;border-radius: 8px}
.skip:focus{top: 12px}
.wrap{width: 100%;max-width: calc(var(--wrap) + 2 * var(--gutter));margin: 0 auto;padding: 0 var(--gutter)}
.display,.h2{font-family: var(--f-display);font-stretch: 125%;font-weight: 800;letter-spacing: -0.035em;line-height: 0.94;text-wrap: balance}
.h2{font-size: clamp(2.1rem,4.9vw,4.3rem);font-weight: 780;letter-spacing: -0.032em;line-height: 0.98}
.label{font: 500 0.78rem/1.2 var(--f-mono);letter-spacing: 0.08em;text-transform: uppercase;color: var(--muted)}
.lede{font-size: clamp(1.12rem,1.55vw,1.32rem);line-height: 1.5;color: var(--ink-2);max-width: 40em;text-wrap: pretty}
.muted{color: var(--muted)}
.small{font-size: 0.875rem}
.grad{background: var(--grad-text);-webkit-background-clip: text;background-clip: text;color: transparent}
.btn{--h: 48px;display: inline-flex;align-items: center;justify-content: center;gap: 10px;height: var(--h);padding: 0 22px;border-radius: 999px;border: 1px solid transparent;font: 600 1rem/1 var(--f-body);letter-spacing: -0.005em;text-decoration: none;white-space: nowrap;cursor: pointer;transition: transform .15s ease,background-color .15s ease,border-color .15s ease,box-shadow .15s ease;color: var(--ink);background: transparent}
.btn svg{width: 18px;height: 18px;flex: none}
.btn:active{transform: translateY(1px)}
.btn-primary{background: var(--teal);color: var(--on-teal);box-shadow: 0 8px 24px -10px rgba(44,196,176,0.75)}
.btn-primary:hover{background: #3fd3bf}
.btn-ink{background: var(--ink);color: var(--bg)}
.btn-ink:hover{background: var(--ink-2)}
.btn-line{border-color: var(--line-2)}
.btn-line:hover{border-color: var(--ink)}
.btn-lg{--h: 58px;padding: 0 30px;font-size: 1.0625rem}
.btn-sm{--h: 38px;padding: 0 16px;font-size: 0.9rem}
.btn-block{width: 100%}
.btn[disabled],.btn[aria-disabled="true"]{opacity: .55;cursor: not-allowed}
.nav{position: sticky;top: 0;z-index: 50;background: color-mix(in srgb,var(--bg) 82%,transparent);backdrop-filter: saturate(1.4) blur(14px);-webkit-backdrop-filter: saturate(1.4) blur(14px);border-bottom: 1px solid transparent;transition: border-color .2s ease}
.nav.scrolled{border-bottom-color: var(--line)}
.nav-in{display: flex;align-items: center;gap: 28px;height: 68px}
.brand{display: inline-flex;align-items: center;gap: 10px;color: var(--ink);text-decoration: none;font: 800 1.2rem/1 var(--f-display);font-stretch: 125%;letter-spacing: -0.02em}
.brand svg{width: 30px;height: 30px}
.nav-links{display: flex;gap: 26px;margin-left: 12px}
.nav-links a{color: var(--ink-2);text-decoration: none;font-size: 0.95rem;font-weight: 500}
.nav-links a:hover{color: var(--ink)}
.nav-end{margin-left: auto;display: flex;align-items: center;gap: 14px}
.nav-account{color: var(--ink-2);text-decoration: none;font-size: 0.95rem;font-weight: 500}
.nav-account:hover{color: var(--ink)}
@media (max-width: 900px){.nav-links{display: none}
}
@media (max-width: 420px){.nav-account{display: none}
.nav-in{gap: 12px}
}
.hero{position: relative;padding: clamp(48px,8vw,104px) 0 0;isolation: isolate;overflow-x: clip}
.hero::before{content: "";position: absolute;inset: 0;z-index: -1;background-image: linear-gradient(var(--grid-major) 1px,transparent 1px),linear-gradient(90deg,var(--grid-major) 1px,transparent 1px),linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px);background-size: 160px 160px,160px 160px,32px 32px,32px 32px;background-position: center top;-webkit-mask-image: radial-gradient(120% 80% at 50% 38%,#000 30%,transparent 78%);mask-image: radial-gradient(120% 80% at 50% 38%,#000 30%,transparent 78%)}
.hero::after{content: "";position: absolute;z-index: -1;right: -10%;top: 6%;width: 70%;height: 70%;background: radial-gradient(closest-side,rgba(44,196,176,0.22),rgba(43,143,208,0.08) 55%,transparent);filter: blur(20px);pointer-events: none}
.hero-eyebrow{display: inline-flex;align-items: center;gap: 10px;margin-bottom: 26px}
.dot{width: 8px;height: 8px;border-radius: 50%;background: var(--teal);box-shadow: 0 0 0 4px var(--teal-soft)}
.hero h1{font-size: clamp(2.55rem,7.1vw,6.6rem);max-width: 12.5em}
.hero h1 .line{display: block}
.hero-lede{margin-top: clamp(22px,3vw,34px)}
.hero-lede b{color: var(--ink)}
.hero-cta{display: flex;flex-wrap: wrap;align-items: center;gap: 14px;margin-top: 34px}
.hero-meta{margin-top: 16px;display: flex;flex-wrap: wrap;gap: 6px 18px;color: var(--muted);font: 400 0.82rem/1.4 var(--f-mono)}
.hero-meta span{white-space: nowrap}
.stage-wrap{margin-top: clamp(40px,6vw,72px)}
.stage{--seam: 50%;position: relative;aspect-ratio: 1200 / 620;width: 100%;touch-action: pan-y;user-select: none;-webkit-user-select: none;cursor: ew-resize}
.stage-layer{position: absolute;inset: 0}
.stage-svg{width: 100%;height: 100%;overflow: visible;pointer-events: none;-webkit-user-drag: none}
.stage-mesh{clip-path: inset(-2% -2% -2% var(--seam))}
.nurbs-fill{fill: var(--nurbs-fill)}
.nurbs-iso{fill: none;stroke: var(--nurbs);stroke-width: 0.9;vector-effect: non-scaling-stroke}
.nurbs-edge{fill: none;stroke: var(--nurbs-edge);stroke-width: 1.8;stroke-linejoin: round;vector-effect: non-scaling-stroke}
.tone{stroke: rgba(255,255,255,0.34);stroke-width: 0.6;stroke-linejoin: round;vector-effect: non-scaling-stroke}
.t0{fill: var(--t0)}
.t1{fill: var(--t1)}
.t2{fill: var(--t2)}
.t3{fill: var(--t3)}
.t4{fill: var(--t4)}
.t5{fill: var(--t5)}
.t6{fill: var(--t6)}
.mesh-edge{fill: none;stroke: var(--t0);stroke-width: 1.4;vector-effect: non-scaling-stroke}
.seam{position: absolute;top: -3%;bottom: -3%;left: var(--seam);width: 0;z-index: 2}
.seam::before{content: "";position: absolute;top: 0;bottom: 0;left: -1px;width: 2px;background: linear-gradient(transparent,var(--teal) 12%,var(--teal) 88%,transparent);box-shadow: 0 0 18px rgba(44,196,176,0.6)}
.seam-handle{position: absolute;top: 50%;left: 0;transform: translate(-50%,-50%);width: 56px;height: 56px;border-radius: 50%;display: grid;place-items: center;background: var(--surface);border: 2px solid var(--teal);box-shadow: var(--shadow);cursor: grab}
.seam-handle svg{width: 34px;height: 34px}
.stage:active .seam-handle{cursor: grabbing}
.stage:focus-visible{outline: none}
.stage:focus-visible .seam-handle{outline: 3px solid var(--teal);outline-offset: 4px}
.stage-tag{position: absolute;top: 0;z-index: 1;display: flex;flex-direction: column;gap: 4px}
.stage-tag b{font: 600 0.95rem/1.2 var(--f-body);color: var(--ink)}
.stage-tag.left{left: 0}
.stage-tag.right{right: 0;text-align: right}
.stage-caption{margin-top: 18px;display: flex;justify-content: center;gap: 10px;color: var(--muted);font-size: 0.875rem;text-align: center}
.stage-caption svg{width: 18px;height: 18px;flex: none}
@media (max-width: 640px){.stage-wrap{margin-left: calc(-1 * var(--gutter) + 4px);margin-right: calc(-1 * var(--gutter) + 4px)}
.stage{margin-top: 52px}
.stage-tag{top: -48px}
.stage-tag.left{left: 12px}
.stage-tag.right{right: 12px}
.stage-caption{padding: 0 var(--gutter)}
.stage-tag b{font-size: 0.82rem}
.stage-tag .label{font-size: 0.68rem}
.seam-handle{width: 46px;height: 46px}
.seam-handle svg{width: 28px;height: 28px}
}
.facts{display: grid;grid-template-columns: repeat(4,1fr);gap: 0;margin-top: clamp(56px,8vw,96px);border-top: 1px solid var(--line)}
.fact{padding: 26px 26px 0 0}
.fact + .fact{padding-left: 26px;border-left: 1px solid var(--line)}
.fact h2{font: 600 1.06rem/1.3 var(--f-body);margin-bottom: 8px}
.fact p{color: var(--muted);font-size: 0.95rem;margin: 0}
@media (max-width: 900px){.facts{grid-template-columns: 1fr 1fr}
.fact:nth-child(3){padding-left: 0;border-left: 0}
.fact:nth-child(n+3){border-top: 1px solid var(--line);margin-top: 26px}
}
@media (max-width: 520px){.facts{grid-template-columns: 1fr}
.fact,.fact + .fact{padding: 22px 0 0;border-left: 0}
.fact + .fact{border-top: 1px solid var(--line);margin-top: 22px}
}
.section{padding: var(--section) 0}
.section-alt{background: var(--bg-2)}
.section-head{display: grid;gap: 22px;margin-bottom: clamp(44px,6vw,80px);max-width: 980px}
.section-head .lede{margin: 0}
.band-dark{--ink: #ecf1f1;--ink-2: #bcc6ca;--muted: #8f9ca2;--line: rgba(236,241,241,0.12);--line-2: rgba(236,241,241,0.22);--teal-ink: #45d8c4;--surface: #141c20;background: radial-gradient(60% 70% at 85% 0%,rgba(44,196,176,0.20),transparent 70%),radial-gradient(50% 60% at 0% 100%,rgba(43,143,208,0.14),transparent 70%),#0b1012;color: var(--ink)}
.speed-top{display: grid;grid-template-columns: 1.1fr 1fr;gap: clamp(32px,6vw,96px);align-items: end;margin-bottom: clamp(56px,7vw,96px)}
.big-stat{display: grid;gap: 10px}
.big-num{font-family: var(--f-display);font-stretch: 125%;font-weight: 800;font-size: clamp(5rem,15vw,12.5rem);line-height: 0.82;letter-spacing: -0.05em}
.big-num small{font-size: 0.32em;letter-spacing: -0.02em;margin-left: 0.08em;color: var(--teal)}
.big-cap{color: var(--ink-2);max-width: 26em}
.stat-row{display: grid;grid-template-columns: repeat(3,1fr);gap: 1px;background: var(--line);border: 1px solid var(--line);border-radius: var(--radius);overflow: hidden;margin-bottom: clamp(56px,7vw,88px)}
.stat{background: #0e1416;padding: 26px 24px}
.stat-n{font: 800 clamp(1.8rem,3.4vw,2.6rem)/1 var(--f-display);font-stretch: 125%;letter-spacing: -0.03em}
.stat-n .arrow{color: var(--teal)}
.stat p{margin: 10px 0 0;color: var(--muted);font-size: 0.92rem}
.charts{display: grid;grid-template-columns: 1fr 1fr;gap: clamp(40px,6vw,88px)}
.chart h3{font: 600 1.06rem/1.35 var(--f-body);margin-bottom: 6px}
.chart .sub{color: var(--muted);font-size: 0.88rem;margin-bottom: 22px}
.bar{display: grid;grid-template-columns: minmax(0,1fr) auto;gap: 6px 14px;align-items: baseline;margin-bottom: 18px}
.bar-name{font-size: 0.92rem;color: var(--ink-2)}
.bar-val{font: 500 0.92rem/1 var(--f-mono);color: var(--ink)}
.bar-track{grid-column: 1 / -1;height: 14px;border-radius: 4px;background: rgba(236,241,241,0.06);overflow: hidden}
.bar-fill{height: 100%;width: var(--w);border-radius: 4px;background: rgba(236,241,241,0.32);transform-origin: left}
.bar.r2m .bar-name{color: var(--ink);font-weight: 600}
.bar.r2m .bar-val{color: var(--teal-ink)}
.bar.r2m .bar-fill{background: linear-gradient(90deg,var(--t2) 0 20%,var(--t3) 20% 40%,var(--t4) 40% 60%,var(--t5) 60% 80%,var(--t6) 80% 100%)}
.js .reveal-bars .bar-fill{transform: scaleX(0);transition: transform 1.1s cubic-bezier(.2,.7,.1,1)}
.js .reveal-bars.in .bar-fill{transform: scaleX(1)}
.js .reveal-bars.in .bar:nth-child(2) .bar-fill{transition-delay: .12s}
.js .reveal-bars.in .bar:nth-child(3) .bar-fill{transition-delay: .24s}
.footnote{margin-top: clamp(40px,5vw,64px);color: var(--muted);font-size: 0.85rem;max-width: 60em}
@media (max-width: 860px){.speed-top,.charts{grid-template-columns: 1fr}
.stat-row{grid-template-columns: 1fr}
}
.placeholder{position: relative;display: grid;place-items: center;align-content: center;text-align: center;gap: 10px;border: 1.5px dashed var(--line-2);border-radius: var(--radius);padding: 28px;background: repeating-linear-gradient(135deg,transparent 0 14px,var(--grid) 14px 15px);color: var(--muted)}
.placeholder b{color: var(--ink);font-weight: 600}
.placeholder .label{color: var(--warn)}
.video-ph{aspect-ratio: 16 / 9}
.play{width: 72px;height: 72px;border-radius: 50%;display: grid;place-items: center;background: var(--surface);border: 1px solid var(--line);box-shadow: var(--shadow)}
.play svg{width: 26px;height: 26px;margin-left: 4px;color: var(--teal-ink)}
.pipe{display: grid;grid-template-columns: minmax(0,0.8fr) minmax(0,1.4fr) minmax(0,0.8fr);gap: 0;align-items: center}
.node{position: relative;background: var(--surface);border: 1px solid var(--line);border-radius: var(--radius);padding: 22px;box-shadow: var(--shadow)}
.node h3{font: 600 1.08rem/1.3 var(--f-body);margin: 8px 0 8px}
.node p{color: var(--muted);font-size: 0.93rem;margin: 0}
.node .tags{display: flex;flex-wrap: wrap;gap: 6px;margin-top: 14px}
.tag{font: 500 0.74rem/1 var(--f-mono);padding: 6px 8px;border-radius: 6px;background: var(--bg-2);color: var(--ink-2);border: 1px solid var(--line)}
.tag.on{background: var(--teal-soft);color: var(--teal-ink);border-color: transparent}
.file-icon{width: 46px;height: 56px}
.sources{display: grid;gap: 14px;padding: 0 clamp(28px,4vw,56px);position: relative}
.sources::before,.sources::after{content: "";position: absolute;top: 12%;bottom: 12%;width: clamp(28px,4vw,56px);border: 1.5px solid var(--line-2);border-left: 0;border-right: 0}
.sources::before{left: 0;border-left: 1.5px solid var(--line-2);border-radius: 0;left: calc(clamp(28px,4vw,56px) / 2);width: calc(clamp(28px,4vw,56px) / 2)}
.sources::after{right: 0;border-right: 1.5px solid var(--line-2);width: calc(clamp(28px,4vw,56px) / 2);right: calc(clamp(28px,4vw,56px) / 2)}
.source{display: grid;grid-template-columns: auto minmax(0,1fr);gap: 16px;align-items: start;padding: 18px 20px;position: relative;z-index: 1}
.source .ico{width: 40px;height: 40px;border-radius: 10px;display: grid;place-items: center;background: var(--bg-2);color: var(--ink)}
.source .ico svg{width: 22px;height: 22px}
.source.primary .ico{background: var(--teal);color: var(--on-teal)}
.source h3{margin: 0 0 4px;font-size: 1rem}
.source .kicker{font: 500 0.72rem/1 var(--f-mono);letter-spacing: .06em;text-transform: uppercase;color: var(--teal-ink)}
.max-node{background: var(--ink);color: var(--bg);border-color: transparent}
.max-node p{color: color-mix(in srgb,var(--bg) 70%,transparent)}
.max-node .label{color: var(--teal)}
.max-node .tag{background: rgba(127,127,127,0.18);color: var(--bg);border-color: transparent}
.mesher-setting{margin-top: clamp(32px,4vw,48px);display: flex;flex-wrap: wrap;align-items: center;gap: 10px 14px;color: var(--muted);font-size: 0.92rem}
.seg{display: inline-flex;padding: 3px;border-radius: 10px;background: var(--surface);border: 1px solid var(--line)}
.seg span{font: 500 0.82rem/1 var(--f-mono);padding: 8px 12px;border-radius: 7px;color: var(--muted)}
.seg span.on{background: var(--ink);color: var(--bg)}
@media (max-width: 980px){.pipe{grid-template-columns: 1fr;gap: 0}
.sources{padding: 34px 0}
.sources::before,.sources::after{display: none}
.pipe>.node{justify-self: stretch}
.pipe-arrow{display: flex !important}
}
.pipe-arrow{display: none;justify-content: center;color: var(--line-2)}
.bento{display: grid;grid-template-columns: repeat(6,1fr);gap: 18px}
.card{background: var(--surface);border: 1px solid var(--line);border-radius: var(--radius);padding: clamp(22px,2.6vw,32px);display: flex;flex-direction: column;gap: 10px;min-width: 0}
.card h3{font: 700 clamp(1.3rem,2vw,1.6rem)/1.1 var(--f-display);font-stretch: 112%;letter-spacing: -0.02em}
.card p{color: var(--muted);margin: 0;font-size: 0.97rem}
.card .viz{margin-top: auto;padding-top: 22px}
.span-3{grid-column: span 3}
.span-2{grid-column: span 2}
.span-4{grid-column: span 4}
.span-6{grid-column: span 6}
@media (max-width: 980px){.span-2,.span-3,.span-4{grid-column: span 6}
}
.trees{display: grid;grid-template-columns: 1fr auto 1fr;gap: 14px;align-items: center}
.tree{border: 1px solid var(--line);border-radius: 10px;background: var(--bg);padding: 10px 6px;font: 400 0.8rem/1 var(--f-mono);min-width: 0}
.tree-title{font: 600 0.72rem/1 var(--f-mono);letter-spacing: .06em;text-transform: uppercase;color: var(--muted);padding: 2px 8px 10px;border-bottom: 1px solid var(--line);margin-bottom: 6px}
.tree ul{list-style: none;margin: 0;padding: 0}
.tree li{display: flex;align-items: center;gap: 7px;padding: 5px 8px;white-space: nowrap;overflow: hidden;text-overflow: ellipsis}
.tree .d1{padding-left: 24px}
.tree .d2{padding-left: 40px}
.sw{width: 10px;height: 10px;border-radius: 2px;flex: none}
.eye{width: 13px;height: 13px;margin-left: auto;color: var(--muted);flex: none}
.eye.off{opacity: .35}
.trees-arrow{color: var(--teal-ink)}
.trees-arrow svg{width: 26px;height: 26px}
@media (max-width: 560px){.trees{grid-template-columns: 1fr}
.trees-arrow{transform: rotate(90deg);justify-self: center}
}
.chairs{display: grid;grid-template-columns: repeat(8,1fr);gap: 8px 10px;max-width: 360px}
.chairs svg{width: 100%;height: auto;color: var(--line-2)}
.chairs svg.src{color: var(--teal)}
.viz-note{margin-top: 14px;font: 400 0.8rem/1.4 var(--f-mono);color: var(--muted)}
.viz-note b{color: var(--teal-ink);font-weight: 500}
.map-rows{display: grid;gap: 8px;font: 400 0.8rem/1.3 var(--f-mono)}
.map-row{display: grid;grid-template-columns: minmax(0,1fr) 18px minmax(0,1fr);gap: 10px;align-items: center;padding: 10px 12px;border-radius: 9px;background: var(--bg);border: 1px solid var(--line)}
.map-row span{overflow: hidden;text-overflow: ellipsis;white-space: nowrap}
@media (max-width: 520px){.map-row span{white-space: normal}
}
.map-row .to{color: var(--teal-ink)}
.map-row svg{width: 16px;height: 16px;color: var(--muted)}
.ball{display: inline-block;width: 12px;height: 12px;border-radius: 50%;vertical-align: -1px;margin-right: 8px}
.num-big{font: 800 clamp(2.6rem,5vw,3.6rem)/1 var(--f-display);font-stretch: 125%;letter-spacing: -0.04em}
.num-big .arrow{color: var(--teal);font-weight: 600}
.resync{display: grid;grid-template-columns: 1.15fr 1fr;gap: clamp(32px,6vw,88px);align-items: center}
.console{background: #0b1012;color: #dfe7e8;border-radius: var(--radius);padding: 0;box-shadow: var(--shadow);overflow: hidden;border: 1px solid rgba(236,241,241,0.08)}
.console-bar{display: flex;align-items: center;gap: 8px;padding: 12px 16px;border-bottom: 1px solid rgba(236,241,241,0.08);font: 500 0.78rem/1 var(--f-mono);color: #8f9ca2}
.console-bar i{width: 10px;height: 10px;border-radius: 50%;background: rgba(236,241,241,0.14)}
.console-bar span{margin-left: 8px}
.diff{list-style: none;margin: 0;padding: 10px 0;font: 400 0.84rem/1.45 var(--f-mono)}
.diff li{display: grid;grid-template-columns: 22px minmax(0,1fr) auto;gap: 4px 10px;padding: 10px 18px;align-items: baseline}
.diff li + li{border-top: 1px solid rgba(236,241,241,0.06)}
.diff .sym{font-weight: 600}
.diff .what{color: #8f9ca2;grid-column: 2 / -1;font-size: 0.78rem}
.diff .st{font-size: 0.72rem;padding: 4px 7px;border-radius: 5px;text-transform: uppercase;letter-spacing: .05em}
.diff .chg .sym,.diff .chg .st{color: #63b9f2}
.diff .chg .st{background: rgba(99,185,242,0.12)}
.diff .new .sym,.diff .new .st{color: #45d8c4}
.diff .new .st{background: rgba(69,216,196,0.12)}
.diff .del .sym,.diff .del .st{color: #f0b45a}
.diff .del .st{background: rgba(240,180,90,0.12)}
.diff .same{color: #8f9ca2}
.console-foot{padding: 12px 18px;border-top: 1px solid rgba(236,241,241,0.08);font: 400 0.78rem/1.4 var(--f-mono);color: #8f9ca2}
.console-foot b{color: #45d8c4;font-weight: 500}
.checks{list-style: none;padding: 0;margin: 28px 0 0;display: grid;gap: 16px}
.checks li{display: grid;grid-template-columns: 24px 1fr;gap: 12px;color: var(--ink-2)}
.checks svg{width: 22px;height: 22px;color: var(--teal-ink);margin-top: 2px}
.checks b{color: var(--ink)}
@media (max-width: 900px){.resync{grid-template-columns: 1fr}
.resync>.console{order: 2}
}
.merge{display: grid;gap: 16px}
.merge-row{display: grid;grid-template-columns: minmax(0,1fr) auto;gap: 8px 14px;align-items: baseline}
.merge-row .bar-track{background: var(--bg-2);height: 12px}
.merge-row .bar-fill{background: var(--line-2);min-width: 6px}
.merge-row.best .bar-fill{background: linear-gradient(90deg,var(--t3) 0 50%,var(--t5) 50% 100%)}
.merge-row .bar-name{color: var(--ink-2);font-size: 0.9rem}
.merge-row .bar-val{font: 600 0.95rem/1 var(--f-mono)}
.dialog-mock{border: 1px solid var(--line);border-radius: 10px;background: var(--bg);padding: 16px;font-size: 0.88rem;display: grid;gap: 12px}
.dialog-mock .row{display: flex;align-items: center;gap: 10px}
.spin{width: 14px;height: 14px;border-radius: 50%;border: 2px solid var(--line-2);border-top-color: var(--teal)}
.js .spin{animation: spin 1s linear infinite}
@keyframes spin{to{transform: rotate(360deg)}
}
.rec{border-left: 3px solid var(--teal);padding: 6px 0 6px 12px;color: var(--ink-2)}
.rec b{color: var(--ink)}
.fake-btn{align-self: start;font: 600 0.82rem/1 var(--f-body);padding: 9px 14px;border-radius: 8px;background: var(--teal);color: var(--on-teal)}
.mesh-pair{display: grid;grid-template-columns: 1fr auto 1fr;align-items: center;gap: 12px}
.mesh-pair svg{width: 100%;height: auto}
.mesh-pair .cap{text-align: center;font: 400 0.76rem/1.3 var(--f-mono);color: var(--muted);margin-top: 8px}
.mp-a line,.mp-a path,.mp-b path{stroke: var(--ink-2)}
.extras{display: flex;flex-wrap: wrap;gap: 10px;margin-top: clamp(40px,5vw,64px)}
.extras span{font-size: 0.92rem;padding: 10px 14px;border-radius: 999px;border: 1px solid var(--line);background: var(--surface);color: var(--ink-2)}
.warn-note{display: flex;gap: 10px;align-items: start;color: var(--warn);background: var(--warn-soft);border-radius: 9px;padding: 10px 12px;font-size: 0.86rem}
.warn-note svg{width: 18px;height: 18px;flex: none;margin-top: 1px}
.pricing-head{display: flex;flex-wrap: wrap;align-items: end;justify-content: space-between;gap: 28px;margin-bottom: 36px}
.seats{display: inline-flex;align-items: center;gap: 14px}
.stepper{display: inline-flex;align-items: center;border: 1px solid var(--line-2);border-radius: 999px;background: var(--surface)}
.stepper button{width: 44px;height: 44px;border: 0;background: none;color: var(--ink);font-size: 1.3rem;cursor: pointer;border-radius: 50%}
.stepper button:hover{background: var(--bg-2)}
.stepper input{width: 52px;text-align: center;border: 0;background: none;color: var(--ink);font: 600 1.05rem/1 var(--f-mono);-moz-appearance: textfield;appearance: textfield}
.stepper input::-webkit-outer-spin-button,.stepper input::-webkit-inner-spin-button{-webkit-appearance: none;margin: 0}
.plans{display: grid;grid-template-columns: repeat(3,1fr);gap: 18px;align-items: stretch}
.plan{position: relative;background: var(--surface);border: 1px solid var(--line);border-radius: 18px;padding: 30px;display: flex;flex-direction: column;gap: 6px}
.plan h3{font: 600 1.05rem/1.2 var(--f-body)}
.plan .price{display: flex;align-items: baseline;gap: 8px;margin: 14px 0 2px}
.plan .amt{font: 800 clamp(3rem,5vw,4.2rem)/0.9 var(--f-display);font-stretch: 125%;letter-spacing: -0.045em}
.plan .per{color: var(--muted);font-size: 0.95rem}
.plan .note{color: var(--muted);font-size: 0.92rem;margin: 0 0 18px}
.plan .total{font: 400 0.84rem/1.3 var(--f-mono);color: var(--teal-ink);margin: -8px 0 18px}
.plan .total:empty{display: none}
.plan ul{list-style: none;padding: 0;margin: 0 0 26px;display: grid;gap: 10px;font-size: 0.94rem;color: var(--ink-2)}
.plan li{display: flex;gap: 10px}
.plan li svg{width: 18px;height: 18px;color: var(--teal-ink);flex: none;margin-top: 3px}
.plan .btn{margin-top: auto}
.plan.featured{border: 0;background: linear-gradient(var(--surface),var(--surface)) padding-box,linear-gradient(135deg,var(--teal),var(--cyan)) border-box;border: 2px solid transparent;box-shadow: 0 30px 60px -30px rgba(44,196,176,0.55)}
.badge{position: absolute;top: -13px;left: 28px;font: 600 0.74rem/1 var(--f-mono);letter-spacing: .06em;text-transform: uppercase;padding: 7px 10px;border-radius: 999px;background: var(--ink);color: var(--bg)}
.plans-foot{margin-top: 26px;display: flex;flex-wrap: wrap;gap: 10px 28px;color: var(--muted);font-size: 0.9rem}
.test-mode{margin: 22px 0 0;padding: 12px 16px;border-radius: 10px;background: var(--warn-soft);color: var(--warn);font-size: 0.9rem}
.trial-strip{margin-top: 44px;display: flex;flex-wrap: wrap;align-items: center;justify-content: space-between;gap: 18px;padding: 26px 30px;border-radius: 18px;background: var(--bg-2);border: 1px solid var(--line)}
.trial-strip p{margin: 0;color: var(--ink-2)}
.trial-strip b{color: var(--ink)}
@media (max-width: 900px){.plans{grid-template-columns: 1fr}
}
.faq{display: grid;grid-template-columns: 0.8fr 1.2fr;gap: clamp(32px,6vw,96px);align-items: start}
.faq-side{position: sticky;top: 100px}
.faq-item{border-bottom: 1px solid var(--line)}
.faq-item:first-child{border-top: 1px solid var(--line)}
.faq-item summary{list-style: none;cursor: pointer;display: flex;align-items: center;justify-content: space-between;gap: 18px;padding: 22px 0}
.faq-item summary::-webkit-details-marker{display: none}
.faq-item h3{font: 600 1.08rem/1.35 var(--f-body)}
.faq-icon{position: relative;width: 16px;height: 16px;flex: none}
.faq-icon::before,.faq-icon::after{content: "";position: absolute;left: 0;right: 0;top: 7px;height: 2px;border-radius: 2px;background: var(--ink-2);transition: transform .2s ease}
.faq-icon::after{transform: rotate(90deg)}
.faq-item[open] .faq-icon::after{transform: rotate(0deg)}
.faq-a{padding: 0 32px 22px 0;color: var(--ink-2)}
.faq-a p{margin: 0}
@media (max-width: 900px){.faq{grid-template-columns: 1fr}
.faq-side{position: static}
}
.final{text-align: center;padding: clamp(96px,14vw,180px) 0;position: relative;overflow: hidden;isolation: isolate}
.final::before{content: "";position: absolute;inset: 0;z-index: -1;background: radial-gradient(50% 60% at 50% 100%,rgba(44,196,176,0.22),transparent 70%)}
.final .display{font-size: clamp(2.4rem,6.2vw,5.6rem);max-width: 14em;margin: 0 auto}
.final .hero-cta{justify-content: center}
.footer{border-top: 1px solid var(--line);padding: 56px 0 40px;color: var(--muted);font-size: 0.9rem}
.footer-grid{display: grid;grid-template-columns: 1.4fr repeat(3,1fr);gap: 32px}
.footer h2{font: 600 0.78rem/1 var(--f-mono);letter-spacing: .08em;text-transform: uppercase;color: var(--ink-2);margin-bottom: 14px}
.footer ul{list-style: none;padding: 0;margin: 0;display: grid;gap: 9px}
.footer a{color: var(--muted);text-decoration: none}
.footer a:hover{color: var(--ink)}
.footer .fine{margin-top: 44px;padding-top: 22px;border-top: 1px solid var(--line);font-size: 0.8rem;display: grid;gap: 8px}
@media (max-width: 760px){.footer-grid{grid-template-columns: 1fr 1fr}
.footer-grid>:first-child{grid-column: 1 / -1}
}
.modal{border: 0;padding: 0;border-radius: 18px;max-width: min(480px,calc(100vw - 32px));background: var(--surface);color: var(--ink);box-shadow: 0 40px 80px -20px rgba(0,0,0,0.45)}
.modal::backdrop{background: rgba(8,12,14,0.55);backdrop-filter: blur(3px)}
.modal-in{padding: 30px;display: grid;gap: 14px}
.modal h2{font: 800 1.7rem/1.05 var(--f-display);font-stretch: 112%;letter-spacing: -0.02em}
.modal p{margin: 0;color: var(--ink-2)}
.modal .row{display: flex;flex-wrap: wrap;gap: 10px;margin-top: 8px}
.page{padding: clamp(48px,7vw,96px) 0 var(--section);min-height: calc(100vh - 68px - 220px)}
.page-narrow{max-width: 720px}
.page h1{font-size: clamp(2.2rem,5vw,3.8rem);margin-bottom: 18px}
.panel{background: var(--surface);border: 1px solid var(--line);border-radius: 18px;padding: clamp(22px,3vw,34px);box-shadow: var(--shadow)}
.stack{display: grid;gap: 14px}
.field{display: grid;gap: 7px}
.field label{font-size: 0.88rem;font-weight: 600;color: var(--ink-2)}
.input,.textarea{width: 100%;border: 1px solid var(--line-2);background: var(--bg);color: var(--ink);border-radius: 10px;padding: 12px 14px;font: 400 1rem/1.4 var(--f-body)}
.textarea{font: 400 0.85rem/1.45 var(--f-mono);resize: vertical}
.input:focus,.textarea:focus{outline: 2px solid var(--teal);outline-offset: 0;border-color: transparent}
.callout{display: flex;gap: 12px;align-items: start;padding: 12px 14px;border-radius: 10px;background: var(--teal-soft);color: var(--ink);font-size: 0.93rem}
.callout.warn{background: var(--warn-soft);color: var(--warn)}
.callout svg{width: 18px;height: 18px;flex: none;margin-top: 2px}
.steps{margin: 0;padding-left: 20px;color: var(--ink-2);display: grid;gap: 6px;font-size: 0.94rem}
.licences{display: grid;gap: 14px}
.lic{border: 1px solid var(--line);border-radius: 14px;padding: 20px;display: grid;gap: 10px;background: var(--bg)}
.lic-top{display: flex;flex-wrap: wrap;align-items: center;gap: 10px;justify-content: space-between}
.lic-top h3{font: 600 1.1rem/1.2 var(--f-body)}
.pill{font: 600 0.74rem/1 var(--f-mono);letter-spacing: .04em;text-transform: uppercase;padding: 6px 9px;border-radius: 999px;background: var(--bg-2);color: var(--muted)}
.pill.ok{background: var(--teal-soft);color: var(--teal-ink)}
.pill.warn{background: var(--warn-soft);color: var(--warn)}
.kv{display: grid;grid-template-columns: repeat(auto-fit,minmax(140px,1fr));gap: 10px 18px;font-size: 0.9rem}
.kv div span{display: block;color: var(--muted);font-size: 0.78rem;margin-bottom: 3px}
.machines{font: 400 0.82rem/1.5 var(--f-mono);color: var(--ink-2);border-top: 1px solid var(--line);padding-top: 10px}
.acct-grid{display: grid;grid-template-columns: 1.4fr 1fr;gap: 22px;align-items: start}
@media (max-width: 860px){.acct-grid{grid-template-columns: 1fr}
}
.spinner{width: 18px;height: 18px;border-radius: 50%;border: 2px solid currentColor;border-right-color: transparent;display: inline-block;animation: spin .8s linear infinite;vertical-align: -3px}
.center{text-align: center}
.prose{color: var(--ink-2);max-width: 46em}
.prose h2{font: 600 1.35rem/1.25 var(--f-body);color: var(--ink);margin: 2.2em 0 0.6em}
.prose h3{font: 600 1.08rem/1.3 var(--f-body);color: var(--ink);margin: 1.6em 0 0.5em}
.prose ul,.prose ol{padding-left: 22px;display: grid;gap: 6px;margin: 0 0 1em}
.draft{display: flex;gap: 12px;align-items: start;padding: 16px 18px;border-radius: 12px;background: var(--warn-soft);color: var(--warn);margin: 0 0 32px;font-size: 0.95rem}
.draft svg{width: 20px;height: 20px;flex: none;margin-top: 2px}
.crumbs{font-size: 0.88rem;color: var(--muted);margin-bottom: 22px}
.crumbs a{color: var(--muted)}
.js .rise{opacity: 0;transform: translateY(18px);transition: opacity .7s ease,transform .7s cubic-bezier(.2,.7,.1,1)}
.js .rise.in{opacity: 1;transform: none}
@media (prefers-reduced-motion: reduce){html{scroll-behavior: auto}
*,*::before,*::after{animation-duration: 0.001ms !important;animation-iteration-count: 1 !important;transition-duration: 0.001ms !important;transition-delay: 0s !important}
.js .rise{opacity: 1;transform: none}
.js .reveal-bars .bar-fill{transform: none}
}