/* ServiceKing's site: white, tight type, soft grey surfaces, one spectrum of colour. */
@font-face { font-family: "Geist"; src: url("/serviceking/kit/fonts/geist.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Geist Mono"; src: url("/serviceking/kit/fonts/geist-mono.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }

:root {
  --bg: #fff;
  --surface: #f5f5f5;
  --surface-2: #ebebeb;
  --card: #fff;
  --ink: #141414;
  --ink-2: #5a5a5a;
  --ink-3: #6e6e6e;
  --line: rgba(0, 0, 0, .08);
  --line-2: rgba(0, 0, 0, .14);
  --pill: #141414;
  --pill-ink: #fff;
  --pill-2: #efefef;
  --pill-2-hover: #e6e6e6;
  --save: #0b7a4b;
  --red: #e5342b;
  --spectrum: linear-gradient(95deg, #0066ff 0%, #5b3df5 26%, #a821e8 50%, #e8175d 74%, #f0650e 100%);
  --shadow-1: 0 1px 2px rgba(0, 0, 0, .05), 0 2px 8px rgba(0, 0, 0, .04);
  --shadow-2: 0 1px 2px rgba(0, 0, 0, .05), 0 12px 32px -8px rgba(0, 0, 0, .12);
  --shadow-3: 0 2px 4px rgba(0, 0, 0, .05), 0 32px 64px -16px rgba(0, 0, 0, .22);
  --ease: cubic-bezier(.22, 1, .36, 1);
  --pop: cubic-bezier(.34, 1.56, .64, 1);
  --gutter: clamp(20px, 3.4vw, 40px);
  --max: 1216px;
  color-scheme: light;
}
:root[data-theme="dark"] {
  --bg: #0a0a0a;
  --surface: #141414;
  --surface-2: #1e1e1e;
  --card: #111;
  --ink: #f6f6f6;
  --ink-2: #ababab;
  --ink-3: #979797;
  --line: rgba(255, 255, 255, .1);
  --line-2: rgba(255, 255, 255, .18);
  --pill: #f6f6f6;
  --pill-ink: #141414;
  --pill-2: #1f1f1f;
  --pill-2-hover: #2a2a2a;
  --save: #3fd68f;
  --red: #ff5a50;
  --spectrum: linear-gradient(95deg, #4d94ff 0%, #8c7bff 26%, #cf6bff 50%, #ff5c8d 74%, #ff9a4d 100%);
  --shadow-1: 0 1px 2px rgba(0, 0, 0, .5);
  --shadow-2: 0 1px 2px rgba(0, 0, 0, .5), 0 12px 32px -8px rgba(0, 0, 0, .6);
  --shadow-3: 0 2px 4px rgba(0, 0, 0, .5), 0 32px 64px -16px rgba(0, 0, 0, .8);
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 84px; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 400 16px/1.55 "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; overflow-x: clip; }
h1, h2, h3, p, ul, ol, dl, dd, figure { margin: 0; padding: 0; }
ul, ol { list-style: none; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
img, svg { display: block; }
b, strong { font-weight: 600; }
:focus-visible { outline: 2px solid #0066ff; outline-offset: 3px; border-radius: 6px; }
::selection { background: #0066ff; color: #fff; }
.defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 100; padding: 10px 16px; border-radius: 99px; background: var(--pill); color: var(--pill-ink); font-weight: 600; transition: top .2s; }
.skip:focus { top: 12px; }
.ic { width: 16px; height: 16px; flex: none; }
.wrap { width: 100%; max-width: calc(var(--max) + var(--gutter) * 2); margin-inline: auto; padding-inline: var(--gutter); }

/* ---- type ---- */
h1 { font-weight: 640; font-size: clamp(44px, 6.3vw, 82px); line-height: 1.04; letter-spacing: -.042em; }
h2 { font-weight: 640; font-size: clamp(34px, 4.2vw, 56px); line-height: 1.06; letter-spacing: -.036em; text-wrap: balance; }
h2 .dim { color: var(--ink-3); }
h3 { font-weight: 600; font-size: 19px; line-height: 1.3; letter-spacing: -.016em; }
.sub { font-size: clamp(17px, 1.5vw, 19px); line-height: 1.5; color: var(--ink-2); letter-spacing: -.008em; text-wrap: pretty; }
.head { max-width: 760px; margin: 0 auto clamp(40px, 5vw, 64px); text-align: center; display: grid; gap: 16px; justify-items: center; }
.grad { background: var(--spectrum); background-size: 220% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: shift 12s ease-in-out infinite alternate; padding-bottom: .1em; margin-bottom: -.1em; }
@keyframes shift { to { background-position: 100% 0; } }
section { position: relative; }
.band { padding-block: clamp(72px, 10vw, 136px); }
.own.band { padding-top: 0; }

/* ---- reveal: words come out of a soft blur ---- */
.js .reveal { opacity: 0; transform: translateY(14px); filter: blur(6px); transition: opacity .9s var(--ease), transform .9s var(--ease), filter .9s var(--ease); }
.js .reveal.in { opacity: 1; transform: none; filter: none; }

/* ---- buttons ---- */
.btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 22px; border-radius: 99px; font-weight: 600; font-size: 15.5px; letter-spacing: -.012em; white-space: nowrap; transition: transform .25s var(--ease), background-color .2s, box-shadow .25s; }
.btn .ic { transition: transform .3s var(--ease); }
.btn:hover .ic { transform: translateX(3px); }
.btn:active { transform: scale(.98); }
.btn-dark { background: var(--pill); color: var(--pill-ink); }
.btn-soft { background: var(--pill-2); color: var(--ink); }
.btn-soft:hover { background: var(--pill-2-hover); }
.btn-sm { min-height: 38px; padding: 0 16px; font-size: 14px; }
.btn-glow { isolation: isolate; }
.btn-glow::before { content: ""; position: absolute; z-index: -1; left: 14%; right: 14%; bottom: -7px; height: 22px; border-radius: 50%; background: var(--spectrum); background-size: 220% 100%; filter: blur(13px); opacity: .85; animation: shift 6s ease-in-out infinite alternate; transition: opacity .3s, bottom .3s; }
.btn-glow:hover::before { opacity: 1; bottom: -10px; }
.btn-glow::after { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: var(--pill); }
.btn-white { background: #fff; color: #141414; }
.btn-line { color: #fff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .24); }
.btn-line:hover { background: rgba(255, 255, 255, .08); }
.actions { display: flex; flex-wrap: wrap; gap: 10px; }

/* ---- nav ---- */
.nav { position: sticky; top: 0; z-index: 50; display: flex; align-items: center; gap: 28px; height: 68px; padding-inline: max(var(--gutter), calc((100% - var(--max)) / 2)); transition: background-color .25s, box-shadow .25s, height .25s; }
.nav.scrolled { height: 60px; background: color-mix(in srgb, var(--bg) 78%, transparent); -webkit-backdrop-filter: saturate(180%) blur(16px); backdrop-filter: saturate(180%) blur(16px); box-shadow: 0 1px 0 var(--line); }
/* The logo: an open orbit, drawn in as the page opens. It turns once when you point at it. */
.brand { display: inline-flex; align-items: center; gap: 9px; font-size: 18.5px; line-height: 1; letter-spacing: -.034em; }
.word { color: var(--ink-2); font-weight: 400; }
.word b { color: var(--ink); font-weight: 640; }
.mark { width: 25px; height: 25px; flex: none; overflow: visible; transition: rotate 1.3s var(--ease); }
.brand:hover .mark { rotate: 360deg; }
.mark-ring { fill: none; stroke-width: 3.4; stroke-linecap: round; stroke-dasharray: 1; animation: ring-in 1.3s var(--ease) both; }
.mark-dot { fill: currentColor; color: var(--ink); transform-box: fill-box; transform-origin: center; animation: dot-in .55s var(--pop) .85s both; }
@keyframes ring-in { from { stroke-dashoffset: 1; opacity: 0; } 12% { opacity: 1; } to { stroke-dashoffset: 0; opacity: 1; } }
@keyframes dot-in { from { transform: scale(0); } to { transform: scale(1); } }
.nav-links { display: flex; gap: 2px; }
.nav-links a { padding: 7px 12px; border-radius: 99px; font-size: 14.5px; font-weight: 500; letter-spacing: -.008em; color: var(--ink-2); transition: color .15s, background-color .15s; }
.nav-links a:hover { color: var(--ink); background: var(--pill-2); }
.nav-end { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.round { width: 38px; height: 38px; display: inline-grid; place-items: center; border-radius: 50%; color: var(--ink-2); transition: background-color .15s, color .15s; }
.round:hover { background: var(--pill-2); color: var(--ink); }
.round .ic { width: 18px; height: 18px; }
.moon { display: none; }
[data-theme="dark"] .moon { display: block; }
[data-theme="dark"] .sun { display: none; }
.menu-btn { display: none; }
.sheet { display: none; }
.nav-cta { display: inline-flex; align-items: center; gap: 6px; min-height: 38px; padding: 0 16px; border-radius: 99px; background: var(--pill); color: var(--pill-ink); font-size: 14px; font-weight: 600; letter-spacing: -.01em; }

/* ---- hero ---- */
.hero { padding-top: clamp(20px, 3vw, 44px); isolation: isolate; }
.hero-bg { position: absolute; inset: -68px 0 0; z-index: -1; overflow: hidden; pointer-events: none; }
.hero-bg::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px); background-size: 72px 72px; background-position: center top; -webkit-mask-image: radial-gradient(ellipse 72% 62% at 72% 34%, #000 0%, transparent 72%); mask-image: radial-gradient(ellipse 72% 62% at 72% 34%, #000 0%, transparent 72%); opacity: .55; }
.hero-bg::after { content: ""; position: absolute; left: 50%; top: -300px; width: 1100px; height: 560px; margin-left: -300px; border-radius: 50%; background: conic-gradient(from 200deg, #0066ff, #a821e8, #e8175d, #f0650e, #0066ff); filter: blur(120px); opacity: .1; }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: clamp(16px, 2.4vw, 40px); align-items: center; }
.hero-copy { display: grid; justify-items: start; gap: 24px; }
.badge { display: inline-flex; align-items: center; gap: 8px; min-height: 32px; padding: 0 12px 0 10px; border-radius: 99px; background: var(--card); box-shadow: inset 0 0 0 1px var(--line-2), var(--shadow-1); font-size: 13.5px; font-weight: 500; letter-spacing: -.008em; transition: box-shadow .2s; }
.badge:hover { box-shadow: inset 0 0 0 1px var(--ink-3), var(--shadow-1); }
.badge-spark { width: 16px; height: 16px; color: #a821e8; }
.shiny { background: linear-gradient(90deg, var(--ink-2) 0%, var(--ink-2) 40%, var(--ink) 50%, var(--ink-2) 60%, var(--ink-2) 100%); background-size: 240% 100%; background-position: 100% 0; -webkit-background-clip: text; background-clip: text; color: transparent; animation: shiny 4.5s linear infinite; }
@keyframes shiny { to { background-position: -40% 0; } }
.badge .ic { width: 13px; height: 13px; color: var(--ink-3); transition: transform .25s var(--ease); }
.badge:hover .ic { transform: translateX(2px); }
h1 .line { display: block; white-space: nowrap; }
.lede { max-width: 33em; font-size: clamp(17px, 1.55vw, 20px); line-height: 1.45; letter-spacing: -.012em; color: var(--ink-2); text-wrap: pretty; }
.lede b { display: block; color: var(--ink); font-weight: 560; margin-bottom: 4px; }
.ticks { display: flex; flex-wrap: wrap; gap: 6px 20px; font-size: 14px; color: var(--ink-2); }
.ticks li { display: inline-flex; align-items: center; gap: 6px; }
.ticks .ic { width: 15px; height: 15px; color: var(--save); }
.hero .actions { margin-top: 4px; }
.js .load { opacity: 0; transform: translateY(12px); filter: blur(8px); animation: load 1s var(--ease) forwards; }
.load-2 { animation-delay: .08s !important; }
.load-3 { animation-delay: .16s !important; }
.load-4 { animation-delay: .24s !important; }
.load-5 { animation-delay: .32s !important; }
@keyframes load { to { opacity: 1; transform: none; filter: none; } }

/* the ecosystem */
.orbit { display: grid; justify-items: center; gap: 4px; }
.stage { position: relative; width: min(100%, 580px); aspect-ratio: 1; container-type: inline-size; }
.lines { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.circle { fill: none; stroke: var(--line-2); stroke-width: 1; }
.circle-out { stroke-dasharray: 3 6; }
.hub { position: absolute; left: 50%; top: 50%; width: 19cqw; height: 19cqw; margin: -9.5cqw; display: grid; place-items: center; border-radius: 26%; background: #141414; color: #fff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1), var(--shadow-3); transition: transform .4s var(--ease); z-index: 4; }
.hub:hover { transform: scale(1.05); }
.hub-mark { width: 60%; height: 60%; overflow: visible; }
.hub-mark .mark-dot { color: #fff; }
.halo { position: absolute; left: 50%; top: 50%; width: 34cqw; height: 34cqw; margin: -17cqw; border-radius: 50%; background: conic-gradient(#0066ff, #5b3df5, #a821e8, #e8175d, #f0650e, #ffb938, #0fa35a, #0066ff); filter: blur(4.4cqw); opacity: .34; animation: spin 18s linear infinite; }
.ring-in { position: absolute; inset: 0; animation: spin 180s linear infinite; z-index: 3; }
.ring-in ul, .ring-out { position: absolute; inset: 0; }
.ring-in li, .ring-out li { position: absolute; left: 50%; top: 50%; width: var(--s); height: var(--s); margin: calc(var(--s) / -2); transform: rotate(var(--a)) translateY(calc(var(--r) * -1)) rotate(calc(var(--a) * -1)); }
.ring-in li { --s: 11.4cqw; --r: 27cqw; }
.ring-in a { position: absolute; inset: 0; display: block; animation: spin 180s linear infinite reverse; }
.stage:hover .ring-in, .stage:hover .ring-in a { animation-play-state: paused; }
.app { display: grid; place-items: center; width: 100%; height: 100%; border-radius: 23%; color: #fff; background: linear-gradient(150deg, var(--a), var(--b)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .38), inset 0 0 0 1px rgba(255, 255, 255, .1), 0 1px 2px rgba(0, 0, 0, .14), 0 8px 18px -8px var(--b); }
.app svg { width: 62%; height: 62%; }
.p-thermo { --a: #ff7a66; --b: #e22f27; }
.p-king { --a: #ffc145; --b: #ee8400; }
.p-desk { --a: #3edb85; --b: #0d9f57; }
.p-defender { --a: #2ed3bc; --b: #0a8a80; }
.p-afluence { --a: #3cc0fa; --b: #027fc2; }
.p-kira { --a: #5a94ff; --b: #1d58e8; }
.p-stack { --a: #9182ff; --b: #5736ef; }
.p-mage { --a: #dc75ff; --b: #a31ee3; }
.p-prism { --a: #ff74ae; --b: #dc1f6a; }
.ring-in .app { transition: transform .35s var(--pop); }
.ring-in a:hover .app { transform: scale(1.14); }
.app-name { position: absolute; left: 50%; top: 100%; margin-top: .9cqw; transform: translateX(-50%); font-size: 1.95cqw; font-weight: 500; letter-spacing: -.008em; color: var(--ink-2); white-space: nowrap; }
.js .ring-in .app, .js .ring-in .app-name { opacity: 0; transform: scale(.3); }
.js .ring-in .app-name { transform: translateX(-50%); }
.js .orbit.go .ring-in .app { opacity: 1; transform: none; transition: transform .7s var(--pop) var(--d), opacity .4s linear var(--d); }
.js .orbit.go .ring-in .app-name { opacity: 1; transition: opacity .5s linear calc(var(--d) + .2s); }
.js .orbit.settled .ring-in .app { transition: transform .35s var(--pop); }
.js .orbit.settled .ring-in a:hover .app { transform: scale(1.14); }
.spoke { fill: none; stroke: var(--line); stroke-width: 1; }
.beam { fill: none; stroke: var(--b); stroke-width: 1.6; stroke-linecap: round; stroke-dasharray: .14 1; stroke-dashoffset: .14; opacity: 0; }
.orbit.go .beam { opacity: .9; animation: beam 4.4s cubic-bezier(.4, 0, .6, 1) infinite; animation-delay: calc(var(--d) + .4s); }
@keyframes beam { from { stroke-dashoffset: .14; } 62%, to { stroke-dashoffset: -1; } }
.ring-out li { --s: 8.6cqw; --r: 44cqw; }
.old { position: absolute; inset: 0; display: grid; place-items: center; border-radius: 50%; background: var(--card); box-shadow: inset 0 0 0 1px var(--line), var(--shadow-1); color: var(--ink); }
.old-mark { width: 52%; height: 52%; transition: opacity .9s linear, filter .9s linear; }
/* Each company's name sits on the outer side of its logo, so the names frame the ring. A fine red line draws under it as the X lands, and the name stays easy to read. */
.old-name { position: absolute; left: 50%; top: 100%; margin-top: .75cqw; transform: translateX(-50%); padding: 0 .1em 1px; font-size: max(9.5px, 2.1cqw); line-height: 1.25; font-weight: 500; letter-spacing: -.008em; white-space: nowrap; color: var(--ink-2); background: linear-gradient(var(--red), var(--red)) no-repeat 50% 100% / 0% 1px; transition: background-size .6s var(--ease) .25s; }
.ring-out li.up .old-name { top: auto; bottom: 100%; margin: 0 0 .75cqw; }
.ring-out li.gone .old-name { background-size: 100% 1px; }
.x { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.x path { fill: none; stroke: var(--red); stroke-width: 1.5; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; opacity: 0; }
.ring-out li.gone .x path { transition: stroke-dashoffset .5s var(--ease), opacity .01s linear; stroke-dashoffset: 0; opacity: 1; }
.ring-out li.gone .x path + path { transition-delay: .2s; }
.ring-out li.gone .old-mark { opacity: .5; }
.inflow { fill: none; stroke: #5b3df5; stroke-width: 1.6; stroke-linecap: round; stroke-dasharray: .4 1; stroke-dashoffset: .4; opacity: 0; }
.inflow.fire { animation: inflow 1.1s cubic-bezier(.4, 0, .4, 1) forwards; }
@keyframes inflow { 0% { opacity: 0; } 15% { opacity: .9; } 100% { stroke-dashoffset: -1; opacity: 0; } }
@keyframes spin { to { rotate: 360deg; } }
.bill { margin-top: clamp(12px, 1.6vw, 21px); display: inline-flex; align-items: center; gap: 10px; min-height: 40px; padding: 0 8px 0 16px; border-radius: 99px; background: var(--card); box-shadow: inset 0 0 0 1px var(--line), var(--shadow-2); font-size: 14px; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.bill b { min-width: 7.6ch; color: var(--ink); font-weight: 640; font-size: 16px; letter-spacing: -.02em; text-align: right; }
.bill small { font-size: 12.5px; font-weight: 600; padding: 3px 9px; border-radius: 99px; background: var(--surface); color: var(--ink-3); transition: background-color .5s, color .5s; }
.bill.done small { background: var(--save); color: var(--bg); }

/* Where each thing sits on the ring. */
/* ring:start */
.ring-in li:nth-child(1) { --a: 0deg; --d: 0.35s; }
.beam.n0 { --d: 0.35s; }
.ring-in li:nth-child(2) { --a: 40deg; --d: 0.51s; }
.beam.n1 { --d: 0.84s; }
.ring-in li:nth-child(3) { --a: 80deg; --d: 0.67s; }
.beam.n2 { --d: 1.33s; }
.ring-in li:nth-child(4) { --a: 120deg; --d: 0.83s; }
.beam.n3 { --d: 1.82s; }
.ring-in li:nth-child(5) { --a: 160deg; --d: 0.99s; }
.beam.n4 { --d: 2.31s; }
.ring-in li:nth-child(6) { --a: 200deg; --d: 1.15s; }
.beam.n5 { --d: 2.80s; }
.ring-in li:nth-child(7) { --a: 240deg; --d: 1.31s; }
.beam.n6 { --d: 3.29s; }
.ring-in li:nth-child(8) { --a: 280deg; --d: 1.47s; }
.beam.n7 { --d: 3.78s; }
.ring-in li:nth-child(9) { --a: 320deg; --d: 1.63s; }
.beam.n8 { --d: 4.27s; }
.ring-out li:nth-child(1) { --a: 18deg; }
.ring-out li:nth-child(2) { --a: 54deg; }
.ring-out li:nth-child(3) { --a: 90deg; }
.ring-out li:nth-child(4) { --a: 126deg; }
.ring-out li:nth-child(5) { --a: 162deg; }
.ring-out li:nth-child(6) { --a: 198deg; }
.ring-out li:nth-child(7) { --a: 234deg; }
.ring-out li:nth-child(8) { --a: 270deg; }
.ring-out li:nth-child(9) { --a: 306deg; }
.ring-out li:nth-child(10) { --a: 342deg; }
/* ring:end */

/* the four facts */
.stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: clamp(20px, 1.8vw, 27px); border-top: 1px solid var(--line); }
.stat { padding: 26px 0 30px clamp(16px, 2.4vw, 32px); border-left: 1px solid var(--line); }
.stat:first-child { padding-left: 0; border-left: 0; }
.stat b { display: block; font-size: clamp(32px, 3.6vw, 48px); line-height: 1.08; font-weight: 640; letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.stat span { display: block; margin-top: 4px; font-size: 14.5px; color: var(--ink-2); letter-spacing: -.006em; }

/* ---- calculator ---- */
.calc { padding-block: clamp(20px, 3vw, 32px) 0; }
.panel { background: var(--surface); border-radius: clamp(24px, 3vw, 40px); padding: clamp(40px, 6vw, 88px) clamp(14px, 3vw, 48px); }
.calc-grid { display: grid; grid-template-columns: minmax(0, 1.42fr) minmax(0, 1fr); gap: clamp(14px, 1.6vw, 20px); align-items: start; }
.calc-list { background: var(--card); border-radius: 24px; box-shadow: var(--shadow-1); padding: 6px clamp(14px, 1.8vw, 22px); }
.calc-row { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(70px, .8fr) 100px; align-items: center; gap: 8px 18px; padding: 14px 0; border-top: 1px solid var(--line); transition: opacity .25s; }
.calc-row:first-child { border-top: 0; }
.calc-row.is-off .calc-who, .calc-row.is-off .calc-money, .calc-row.is-off .calc-range { opacity: .42; }
.calc-tick { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 12px; align-items: center; cursor: pointer; }
.calc-tick input { appearance: none; -webkit-appearance: none; margin: 0; width: 22px; height: 22px; border-radius: 7px; background: var(--card); box-shadow: inset 0 0 0 1.5px var(--line-2); display: grid; place-items: center; cursor: pointer; transition: background-color .15s, box-shadow .15s; }
.calc-tick input::after { content: ""; width: 11px; height: 6px; margin-top: -2px; border-left: 2px solid var(--pill-ink); border-bottom: 2px solid var(--pill-ink); transform: rotate(-45deg) scale(0); transition: transform .25s var(--pop); }
.calc-tick input:checked { background: var(--pill); box-shadow: none; }
.calc-tick input:checked::after { transform: rotate(-45deg) scale(1); }
.calc-who { display: grid; gap: 1px; min-width: 0; transition: opacity .25s; }
.calc-swap { display: flex; align-items: center; gap: 7px; font-weight: 600; font-size: 15px; letter-spacing: -.016em; white-space: nowrap; }
.calc-swap .logo { width: 15px; height: 15px; flex: none; color: var(--ink-3); }
.calc-swap .ic { width: 13px; height: 13px; color: var(--ink-3); }
.calc-swap .app { width: 18px; height: 18px; flex: none; box-shadow: none; border-radius: 5px; }
.calc-note { font-size: 12.5px; color: var(--ink-3); letter-spacing: -.004em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-variant-numeric: tabular-nums; }
.calc-note b { color: var(--save); font-weight: 600; }
.calc-range { appearance: none; -webkit-appearance: none; width: 100%; height: 24px; margin: 0; background: transparent; cursor: pointer; transition: opacity .25s; }
.calc-range::-webkit-slider-runnable-track { height: 4px; border-radius: 4px; background: linear-gradient(90deg, var(--ink) var(--fill, 50%), var(--surface-2) var(--fill, 50%)); }
.calc-range::-moz-range-track { height: 4px; border-radius: 4px; background: var(--surface-2); }
.calc-range::-moz-range-progress { height: 4px; border-radius: 4px; background: var(--ink); }
.calc-range::-webkit-slider-thumb { -webkit-appearance: none; width: 20px; height: 20px; margin-top: -8px; border-radius: 50%; background: #fff; border: 0; box-shadow: 0 0 0 1px rgba(0, 0, 0, .14), 0 2px 6px rgba(0, 0, 0, .22); transition: transform .2s var(--ease); }
.calc-range::-moz-range-thumb { width: 20px; height: 20px; border-radius: 50%; background: #fff; border: 0; box-shadow: 0 0 0 1px rgba(0, 0, 0, .14), 0 2px 6px rgba(0, 0, 0, .22); }
.calc-range:hover::-webkit-slider-thumb { transform: scale(1.12); }
.calc-money { display: flex; align-items: center; justify-content: flex-end; gap: 1px; height: 38px; padding: 0 11px; border-radius: 11px; background: var(--surface); font-variant-numeric: tabular-nums; font-weight: 560; font-size: 15px; letter-spacing: -.014em; transition: opacity .25s, box-shadow .15s; }
.calc-money:focus-within { box-shadow: inset 0 0 0 1.5px var(--ink); }
.calc-money input { width: 100%; min-width: 0; border: 0; padding: 0; background: none; color: inherit; font: inherit; letter-spacing: inherit; text-align: right; outline: 0; }
.calc-live { display: none; }

.result { position: sticky; top: 76px; padding: clamp(22px, 2.4vw, 30px); border-radius: 24px; background: #111; color: #f4f4f4; box-shadow: var(--shadow-3); isolation: isolate; overflow: hidden; --ink-3: #9a9a9a; }
.beamed::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; padding: 1.5px; background: conic-gradient(from var(--spin, 0deg), transparent 0 70%, #0066ff 78%, #a821e8 85%, #e8175d 91%, #f0650e 96%, transparent 100%); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude; animation: beamspin 7s linear infinite; }
@property --spin { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
@keyframes beamspin { to { --spin: 360deg; } }
.beamed::after { content: ""; position: absolute; left: -20%; right: -20%; top: -140px; height: 240px; z-index: -1; border-radius: 50%; background: var(--spectrum); filter: blur(70px); opacity: .22; }
.result-label { font-size: 14px; color: #bdbdbd; letter-spacing: -.004em; }
.result-big { margin-top: 2px; font-weight: 640; font-size: clamp(42px, 4.6vw, 60px); line-height: 1.04; letter-spacing: -.045em; font-variant-numeric: tabular-nums; display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 10px; }
.result-big small { font-size: 15px; font-weight: 500; letter-spacing: -.01em; color: #bdbdbd; }
.result-big.is-long { font-size: clamp(34px, 3.6vw, 46px); }
.split { display: grid; grid-template-columns: 9fr 1fr; gap: 3px; margin: 20px 0 8px; }
.split i { height: 8px; border-radius: 4px; background: rgba(255, 255, 255, .22); }
.split i:first-child { background: linear-gradient(90deg, #3edb85, #0d9f57); }
.split-key { display: flex; justify-content: space-between; font-size: 12.5px; color: #a8a8a8; }
.lines-list { margin-top: 18px; border-top: 1px solid rgba(255, 255, 255, .12); }
.lines-list div { display: flex; justify-content: space-between; gap: 12px; padding: 9px 0; font-size: 14.5px; border-bottom: 1px solid rgba(255, 255, 255, .08); }
.lines-list dt { color: #bdbdbd; }
.lines-list dd { font-weight: 560; font-variant-numeric: tabular-nums; }
.lines-list .free dd { color: #5fe6a2; }
.ten { margin-top: 18px; }
.ten-title { font-size: 13.5px; color: #bdbdbd; margin-bottom: 8px; }
.ten-row { display: grid; grid-template-columns: minmax(0, 1fr) 78px; gap: 2px 10px; align-items: center; font-size: 13.5px; margin-top: 8px; }
.ten-row b { font-weight: 560; text-align: right; font-variant-numeric: tabular-nums; }
.ten-track { grid-column: 1 / -1; display: block; height: 4px; border-radius: 4px; background: rgba(255, 255, 255, .1); overflow: hidden; }
.ten-track i { display: block; height: 100%; border-radius: 4px; background: #8a8a8a; transform-origin: left; transition: transform 1.4s var(--ease) .2s; }
.ten-row.warm .ten-track i, .ten-row.best .ten-track i { background: #5fe6a2; }
.w100 { width: 100%; } .w10 { width: 10%; } .w7 { width: 7%; }
.js .result:not(.in) .ten-track i { transform: scaleX(0); }
.result-note { margin-top: 14px; font-size: 13px; line-height: 1.45; color: #a8a8a8; }
.result-note b { color: #e6e6e6; font-weight: 560; }
.result .btn { width: 100%; margin-top: 16px; }
.is-empty .result-big, .is-empty .split { opacity: .4; }

/* ---- the one big sentence ---- */
.statement { padding-block: clamp(96px, 14vw, 200px); }
.statement p { max-width: 1040px; margin-inline: auto; font-weight: 600; font-size: clamp(30px, 4.6vw, 62px); line-height: 1.12; letter-spacing: -.034em; text-wrap: pretty; }
.js .statement .w { color: var(--surface-2); transition: color .5s linear; }
.js .statement .w.on { color: var(--ink); }

/* ---- the table ---- */
.compare { padding-block: 0 clamp(72px, 10vw, 128px); }
.bills-wrap { background: var(--card); border-radius: 24px; box-shadow: inset 0 0 0 1px var(--line), var(--shadow-2); overflow: hidden; }
.bills { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.bills thead th { padding: 18px 20px; text-align: right; font-size: 13px; font-weight: 500; color: var(--ink-3); letter-spacing: -.004em; border-bottom: 1px solid var(--line); background: var(--bg); }
.bills thead th:first-child { text-align: left; padding-left: clamp(16px, 2.2vw, 28px); }
.bills thead th:last-child, .bills td:last-child { padding-right: clamp(16px, 2.2vw, 28px); }
.bills tbody tr { transition: background-color .15s; }
.bills tbody tr:hover { background: var(--surface); }
.bills tbody th, .bills tbody td { border-top: 1px solid var(--line); }
.bills tbody tr:first-child th, .bills tbody tr:first-child td { border-top: 0; }
.bills th[scope="row"] { padding: 13px 20px 13px clamp(16px, 2.2vw, 28px); text-align: left; font-weight: 400; }
.bills td { padding: 13px 20px; text-align: right; font-size: 15.5px; letter-spacing: -.012em; }
.who { display: flex; align-items: center; gap: 12px; }
.who .app { width: 36px; height: 36px; flex: none; border-radius: 10px; }
.who-text { display: grid; }
.who-old { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; font-size: 15.5px; letter-spacing: -.016em; }
.who-mark { width: 14px; height: 14px; color: var(--ink-3); }
.who-new { font-size: 13px; color: var(--ink-3); }
.who-new:hover { color: var(--ink); }
.old-price { color: var(--ink-3); text-decoration: line-through; text-decoration-thickness: 1px; text-decoration-color: var(--red); }
.new-price { font-weight: 560; }
.yours { display: inline-block; font-weight: 640; color: var(--save); }
.save-bar { display: block; height: 3px; margin-top: 5px; margin-left: auto; border-radius: 3px; background: var(--save); transform-origin: right; transition: transform 1.2s var(--ease) .15s; }
.js tr:not(.in) .save-bar { transform: scaleX(0); }
.own-cell { color: var(--ink-2); }
.bills tfoot th, .bills tfoot td { padding-block: 20px; background: var(--surface); border-top: 1px solid var(--line-2); font-size: 17px; font-weight: 640; letter-spacing: -.02em; }
.bills tfoot .who-old { font-size: 17px; }
.bills-note { max-width: 860px; margin: 18px auto 0; font-size: 13px; line-height: 1.5; color: var(--ink-3); text-align: center; text-wrap: pretty; }
.bills-note a { text-decoration: underline; text-underline-offset: 2px; }

/* ---- products ---- */
.bento { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: clamp(12px, 1.4vw, 18px); }
.tile { --tile-pad: clamp(18px, 2vw, 26px); position: relative; display: flex; flex-direction: column; background: var(--card); border-radius: 24px; overflow: hidden; box-shadow: var(--shadow-1); transition: transform .5s var(--ease), box-shadow .5s var(--ease); }
.tile:hover { transform: translateY(-3px); box-shadow: var(--shadow-3); }
.c-7 { grid-column: span 7; } .c-6 { grid-column: span 6; } .c-5 { grid-column: span 5; } .c-4 { grid-column: span 4; }
.viz { position: relative; height: 256px; padding: var(--tile-pad) var(--tile-pad) 0; overflow: hidden; background: linear-gradient(180deg, color-mix(in srgb, var(--b) 7%, var(--surface)), var(--card) 88%); }
.viz-fade::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 56px; background: linear-gradient(transparent, var(--card)); pointer-events: none; z-index: 3; }
.tile-text { display: grid; gap: 7px; padding: 14px var(--tile-pad) var(--tile-pad); margin-top: auto; }
.tile-top { display: flex; align-items: center; gap: 11px; }
.tile-top .app { width: 38px; height: 38px; flex: none; border-radius: 11px; }
.tile-name { font-weight: 640; font-size: 19px; line-height: 1.15; letter-spacing: -.024em; }
.tile-instead { display: block; font-size: 13.5px; font-weight: 400; letter-spacing: -.004em; color: var(--ink-3); margin-top: 1px; }
.tile-go { margin-left: auto; display: inline-flex; align-items: center; gap: 5px; height: 32px; padding: 0 12px; border-radius: 99px; background: var(--pill-2); font-size: 13px; font-weight: 600; letter-spacing: -.008em; transition: background-color .2s, color .2s; white-space: nowrap; }
.tile-go .ic { width: 13px; height: 13px; transition: transform .3s var(--ease); }
.tile:hover .tile-go { background: var(--pill); color: var(--pill-ink); }
.tile:hover .tile-go .ic { transform: translateX(2px); }
.tile-what { font-size: 15px; line-height: 1.45; color: var(--ink-2); letter-spacing: -.008em; text-wrap: pretty; }
.tile-comes { font-size: 13.5px; line-height: 1.42; color: var(--ink-3); text-wrap: pretty; }
.tile-comes b { color: var(--ink-2); font-weight: 560; }

/* the small working pictures: each one is plain HTML, drawn with made-up data */
.m-card { background: var(--card); border-radius: 12px; box-shadow: inset 0 0 0 1px var(--line), var(--shadow-1); }
.tiny { font-size: 12px; color: var(--ink-3); }
.av { display: inline-grid; place-items: center; width: 22px; height: 22px; flex: none; border-radius: 50%; color: #fff; font-size: 9.5px; font-weight: 600; letter-spacing: .02em; }
.av-a { background: #5736ef; } .av-b { background: #0d9f57; } .av-c { background: #dc1f6a; } .av-d { background: #ee8400; } .av-e { background: #027fc2; }
.cycle { display: flex; flex-direction: column; gap: 8px; }
.cycle > * { flex: none; }
.cycle > .enter { animation: enter .7s var(--ease) both; }
@keyframes enter { from { margin-top: -60px; opacity: 0; transform: scale(.94); } to { margin-top: 0; opacity: 1; transform: none; } }
.note-row { display: flex; align-items: center; gap: 11px; padding: 10px 12px; font-size: 13.5px; letter-spacing: -.008em; }
.note-ic { display: grid; place-items: center; width: 30px; height: 30px; flex: none; border-radius: 9px; color: #fff; background: var(--c); }
.note-ic .ic { width: 15px; height: 15px; }
.note-row b { font-weight: 560; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.note-row > span:nth-child(2) { min-width: 0; flex: 1; }
.note-num { flex: none; font-weight: 600; color: var(--save); font-size: 13px; font-variant-numeric: tabular-nums; }
.c1 { --c: #5736ef; } .c2 { --c: #dc1f6a; } .c3 { --c: #0d9f57; } .c4 { --c: #ee8400; }
.chip { display: inline-flex; align-items: center; gap: 5px; flex: none; height: 22px; padding: 0 8px; border-radius: 99px; font-size: 11.5px; font-weight: 600; letter-spacing: -.004em; }
.chip i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.chip-ok { background: color-mix(in srgb, #0d9f57 13%, transparent); color: var(--save); }
.chip-no { background: color-mix(in srgb, #e22f27 12%, transparent); color: var(--red); }
.chip-run { background: color-mix(in srgb, #027fc2 13%, transparent); color: #0272ad; }
[data-theme="dark"] .chip-run { color: #5cc4f5; }
.chip-run i { animation: blink 1.6s ease-in-out infinite; }
@keyframes blink { 50% { opacity: .25; } }
/* Kira */
.board { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.col { display: flex; flex-direction: column; gap: 7px; padding: 8px; border-radius: 12px; background: color-mix(in srgb, var(--ink) 4%, transparent); min-height: 300px; }
.col-head { display: flex; justify-content: space-between; font-size: 11.5px; font-weight: 600; color: var(--ink-2); padding: 1px 3px 2px; }
.kc { padding: 8px 9px; font-size: 12.5px; line-height: 1.28; letter-spacing: -.008em; display: grid; gap: 6px; }
.kc-foot { display: flex; align-items: center; justify-content: space-between; font-size: 11px; color: var(--ink-3); font-family: "Geist Mono", monospace; }
.kc-foot .av { width: 17px; height: 17px; font-size: 8px; font-family: "Geist", sans-serif; }
.mover-lane { position: absolute; inset: 31px 8px auto 8px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 26px; pointer-events: none; }
.mover { box-shadow: inset 0 0 0 1px var(--line-2), var(--shadow-3); animation: mover 11s var(--ease) infinite; z-index: 2; }
@keyframes mover { 0%, 22% { transform: translateX(0) rotate(0); } 28% { transform: translateX(calc(50% + 13px)) rotate(1.5deg); } 34%, 60% { transform: translateX(calc(100% + 26px)) rotate(0); } 66% { transform: translateX(calc(150% + 39px)) rotate(1.5deg); } 72%, 100% { transform: translateX(calc(200% + 52px)) rotate(0); } }
.ghost { visibility: hidden; }
/* Thermostat */
.tst { padding: 14px 16px 18px; display: grid; gap: 10px; }
.tst-top { display: flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 560; }
.verdict { font-weight: 560; font-size: 15.5px; line-height: 1.32; letter-spacing: -.016em; }
.verdict em { font-style: normal; color: var(--save); }
.scale { display: grid; grid-template-columns: 110px minmax(0, 1fr) 42px; gap: 7px 8px; align-items: center; font-size: 12px; color: var(--ink-2); }
.scale-track { position: relative; height: 6px; border-radius: 6px; background: var(--surface); }
.scale-track i { position: absolute; left: 40%; top: 0; height: 100%; border-radius: 6px; background: #0d9f57; transform-origin: left; animation: grow 1.6s var(--ease) both; }
.scale-track i.b1 { width: 56%; } .scale-track i.b2 { width: 40%; animation-delay: .15s; } .scale-track i.b3 { left: 36%; width: 4%; background: var(--ink-3); animation-delay: .3s; }
@keyframes grow { from { transform: scaleX(0); } }
.scale b { text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--save); }
.scale b.flat { color: var(--ink-3); }
/* Prism */
.ask { display: flex; align-items: center; gap: 8px; padding: 9px 12px; border-radius: 99px; font-size: 13px; letter-spacing: -.008em; }
.ask .ic { width: 14px; height: 14px; color: var(--ink-3); }
.bars { display: flex; align-items: flex-end; gap: 9px; height: 124px; margin-top: 12px; padding: 0 2px; border-bottom: 1px solid var(--line-2); }
.bars i { flex: 1; border-radius: 4px 4px 0 0; background: color-mix(in srgb, #dc1f6a 22%, var(--surface)); transform-origin: bottom; animation: rise 1.4s var(--ease) both; }
.bars i.hit { background: #dc1f6a; }
.b-a { height: 34%; animation-delay: .05s !important; } .b-b { height: 48%; animation-delay: .12s !important; } .b-c { height: 41%; animation-delay: .19s !important; } .b-d { height: 92%; animation-delay: .26s !important; } .b-e { height: 57%; animation-delay: .33s !important; } .b-f { height: 66%; animation-delay: .4s !important; }
@keyframes rise { from { transform: scaleY(0); } }
.bars-say { margin-top: 9px; font-size: 13px; font-weight: 560; letter-spacing: -.01em; }
/* Stack */
.st-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 9px; font-size: 13px; font-weight: 600; }
.st-clear { display: inline-flex; align-items: center; gap: 4px; height: 24px; padding: 0 9px; border-radius: 99px; background: var(--pill); color: var(--pill-ink); font-size: 11.5px; font-weight: 600; }
.st-clear .ic { width: 12px; height: 12px; }
.msg { display: flex; gap: 9px; padding: 9px 11px; font-size: 13px; line-height: 1.32; letter-spacing: -.008em; }
.msg-where { display: block; font-size: 11.5px; color: var(--ink-3); }
/* SupportDesk */
.chat { display: grid; gap: 8px; align-content: start; }
.bub { max-width: 88%; padding: 8px 12px; border-radius: 14px; font-size: 13px; line-height: 1.34; letter-spacing: -.008em; }
.bub-them { justify-self: start; background: var(--card); box-shadow: inset 0 0 0 1px var(--line), var(--shadow-1); border-bottom-left-radius: 4px; }
.bub-us { justify-self: end; background: #0d9f57; color: #fff; border-bottom-right-radius: 4px; }
.bub-src { display: block; margin-top: 3px; font-size: 11px; opacity: .85; }
.dots { display: inline-flex; gap: 4px; justify-self: end; padding: 11px 13px; border-radius: 14px; background: color-mix(in srgb, #0d9f57 16%, transparent); }
.dots i { width: 6px; height: 6px; border-radius: 50%; background: #0d9f57; animation: dot 1.1s ease-in-out infinite; }
.dots i:nth-child(2) { animation-delay: .15s; } .dots i:nth-child(3) { animation-delay: .3s; }
@keyframes dot { 30% { transform: translateY(-3px); } 60% { transform: none; } }
.chat-a, .chat-b, .chat-c, .chat-d { animation: 10s var(--ease) infinite both; }
.chat-a { animation-name: ca; } .chat-b { animation-name: cb; } .chat-c { animation-name: cc; } .chat-d { animation-name: cd; }
@keyframes ca { 0% { opacity: 0; transform: translateY(8px); } 6%, 92% { opacity: 1; transform: none; } 100% { opacity: 0; } }
@keyframes cb { 0%, 12% { opacity: 0; max-height: 0; padding-block: 0; margin-top: -8px; } 16%, 34% { opacity: 1; max-height: 40px; padding-block: 11px; margin-top: 0; } 38%, 100% { opacity: 0; max-height: 0; padding-block: 0; margin-top: -8px; } }
@keyframes cc { 0%, 36% { opacity: 0; transform: translateY(8px); } 42%, 92% { opacity: 1; transform: none; } 100% { opacity: 0; } }
@keyframes cd { 0%, 52% { opacity: 0; transform: translateY(8px); } 58%, 92% { opacity: 1; transform: none; } 100% { opacity: 0; } }
.next-ticket { display: flex; align-items: center; gap: 8px; padding: 8px 11px; font-size: 12.5px; letter-spacing: -.008em; }
.next-ticket span:nth-child(2) { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--ink-2); }
/* Afluence */
.doc { position: relative; padding: 16px 18px 22px; display: grid; gap: 8px; }
.doc-title { font-weight: 640; font-size: 19px; letter-spacing: -.024em; }
.doc-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; font-size: 12px; color: var(--ink-3); }
.doc-meta .av { width: 18px; height: 18px; font-size: 8px; }
.doc p { font-size: 13px; line-height: 1.5; color: var(--ink-2); letter-spacing: -.006em; }
.doc mark { background: color-mix(in srgb, #027fc2 20%, transparent); color: inherit; border-radius: 3px; padding: 0 2px; }
.cursor { position: absolute; left: 0; top: 0; display: flex; align-items: flex-start; animation: cursor 9s ease-in-out infinite; }
.cursor i { width: 2px; height: 17px; background: #dc1f6a; border-radius: 2px; }
.cursor span { margin-left: -1px; margin-top: -12px; padding: 0 5px; height: 15px; line-height: 15px; border-radius: 4px 4px 4px 0; background: #dc1f6a; color: #fff; font-size: 10px; font-weight: 600; }
@keyframes cursor { 0%, 100% { transform: translate(190px, 92px); } 30% { transform: translate(300px, 112px); } 55% { transform: translate(90px, 132px); } 80% { transform: translate(250px, 132px); } }
/* DataKing */
.term { background: #111; color: #e8e8e8; border-radius: 14px; padding: 12px 16px 14px; font: 400 12.5px/1.5 "Geist Mono", ui-monospace, Consolas, monospace; box-shadow: var(--shadow-3); overflow: hidden; --kw: #ffc145; }
.term-bar { display: flex; align-items: center; gap: 6px; margin-bottom: 10px; color: #8d8d8d; font-size: 11.5px; }
.term-bar i { width: 9px; height: 9px; border-radius: 50%; background: #2e2e2e; }
.term-bar span { margin-left: 6px; }
.sql { display: block; white-space: pre; overflow: hidden; width: 0; animation: typed 14s steps(40) infinite; }
.sql-2 { animation-name: typed2; } .sql-3 { animation-name: typed3; }
@keyframes typed { 0% { width: 0; } 10%, 96% { width: 42ch; } 100% { width: 0; } }
@keyframes typed2 { 0%, 10% { width: 0; } 20%, 96% { width: 42ch; } 100% { width: 0; } }
@keyframes typed3 { 0%, 20% { width: 0; } 28%, 96% { width: 42ch; } 100% { width: 0; } }
.kw { color: var(--kw); }
.out { display: grid; grid-template-columns: 11ch 12ch 1fr; margin-top: 8px; padding-top: 7px; border-top: 1px dashed #333; color: #cfcfcf; animation: outp 14s linear infinite; }
.out b { font-weight: 400; color: #8d8d8d; }
.out-ok { grid-column: 1 / -1; margin-top: 6px; color: #5fe6a2; }
@keyframes outp { 0%, 30% { opacity: 0; } 34%, 96% { opacity: 1; } 100% { opacity: 0; } }
.viz:not(.on) * { animation-play-state: paused !important; }

/* ---- real screens ---- */
.screens { background: #0a0a0a; color: #f4f4f4; overflow: hidden; padding-block: clamp(72px, 9vw, 120px); isolation: isolate; --line: rgba(255, 255, 255, .1); --ink-3: #9a9a9a; }
.screens::before { content: ""; position: absolute; left: 50%; top: -240px; width: 1200px; height: 520px; margin-left: -600px; border-radius: 50%; background: var(--spectrum); filter: blur(130px); opacity: .22; z-index: -1; }
.screens .sub { color: #b4b4b4; }
.wall { display: grid; gap: 16px; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.wall-row { display: flex; gap: 16px; width: max-content; animation: slide 80s linear infinite; }
.wall-row.back { animation-direction: reverse; }
.wall:hover .wall-row { animation-play-state: paused; }
@keyframes slide { to { transform: translateX(calc(-50% - 8px)); } }
.shot { display: block; width: clamp(300px, 34vw, 480px); flex: none; }
.frame { display: block; border-radius: 12px; overflow: hidden; background: #171717; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12), 0 20px 40px -20px rgba(0, 0, 0, .9); transition: transform .5s var(--ease); }
.shot:hover .frame { transform: translateY(-4px); }
.frame-bar { display: flex; align-items: center; gap: 5px; height: 26px; padding-inline: 10px; }
.frame-bar i { width: 7px; height: 7px; border-radius: 50%; background: #3a3a3a; }
.frame-bar span { margin-left: 8px; font-size: 11px; color: #8d8d8d; }
.frame img { width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; object-position: top left; background: #101010; }
.shot-cap { display: flex; align-items: center; gap: 8px; margin-top: 10px; font-size: 14px; font-weight: 560; letter-spacing: -.012em; }
.shot-cap .app { width: 22px; height: 22px; border-radius: 6px; box-shadow: none; }
.shot-cap small { font-size: 13px; font-weight: 400; color: #9a9a9a; }

/* ---- moving ---- */
.move-grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: clamp(12px, 1.4vw, 18px); }
.steps-card { background: var(--surface); border-radius: 24px; padding: clamp(22px, 3vw, 40px); }
.steps { position: relative; display: grid; gap: 28px; counter-reset: s; }
.steps::before { content: ""; position: absolute; left: 17px; top: 18px; bottom: 44px; width: 2px; border-radius: 2px; background: var(--line-2); }
.steps::after { content: ""; position: absolute; left: 17px; top: 18px; bottom: 44px; width: 2px; border-radius: 2px; background: linear-gradient(180deg, #0066ff, #a821e8, #e8175d, #0d9f57); transform-origin: top; transform: scaleY(var(--done, 0)); }
.steps li { position: relative; display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 16px; z-index: 1; counter-increment: s; font-size: 16px; line-height: 1.45; color: var(--ink-2); letter-spacing: -.008em; }
.steps li::before { content: counter(s); display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--card); box-shadow: inset 0 0 0 1px var(--line-2), var(--shadow-1); font-size: 14px; font-weight: 640; color: var(--ink); }
.steps b { display: block; color: var(--ink); font-size: 18px; letter-spacing: -.018em; font-weight: 600; margin-bottom: 2px; }
.steps-card .btn { margin-top: 30px; }
.receipt { position: relative; display: flex; align-items: center; justify-content: center; padding: clamp(24px, 3vw, 40px); border-radius: 24px; background: var(--surface); overflow: hidden; }
.paper { position: relative; width: 100%; max-width: 340px; padding: 24px 22px 22px; background: #fff; color: #141414; border-radius: 6px 6px 0 0; box-shadow: var(--shadow-3); transform: rotate(-1.4deg); transition: transform .6s var(--ease); font-variant-numeric: tabular-nums; }
.receipt:hover .paper { transform: rotate(0); }
.paper::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 10px; background: linear-gradient(-45deg, transparent 5px, #fff 0) 0 0 / 10px 10px, linear-gradient(45deg, transparent 5px, #fff 0) 0 0 / 10px 10px; }
.paper-head { font-weight: 640; font-size: 19px; letter-spacing: -.024em; padding-bottom: 12px; margin-bottom: 8px; border-bottom: 1px dashed rgba(0, 0, 0, .24); }
.paper-line { display: flex; justify-content: space-between; padding: 7px 0; font-size: 14.5px; color: #4f4f4f; letter-spacing: -.008em; }
.paper-line span:last-child { color: #141414; font-weight: 560; }
.paper-total { display: flex; justify-content: space-between; align-items: baseline; margin-top: 8px; padding-top: 12px; border-top: 1px dashed rgba(0, 0, 0, .24); font-weight: 640; font-size: 20px; letter-spacing: -.024em; }
.paper-total span:last-child { font-size: 36px; letter-spacing: -.04em; color: #0b7a4b; }
.stamp { position: absolute; right: 14px; top: 16px; padding: 3px 10px; border-radius: 7px; box-shadow: inset 0 0 0 2px #0b7a4b; color: #0b7a4b; font-weight: 700; font-size: 13px; letter-spacing: .04em; text-transform: uppercase; transform: rotate(9deg); }
.js .receipt:not(.in) .stamp { transform: rotate(9deg) scale(1.8); opacity: 0; }
.stamp { transition: transform .5s var(--pop) .55s, opacity .25s linear .55s; }
.comes { margin-top: clamp(28px, 3vw, 40px); display: grid; gap: 10px; -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); overflow: hidden; }
.comes-title { margin-top: clamp(28px, 3vw, 40px); text-align: center; font-size: 14.5px; color: var(--ink-3); letter-spacing: -.006em; }
.comes-title + .comes { margin-top: 14px; }
.drift { display: flex; gap: 10px; width: max-content; animation: drift 70s linear infinite; }
.drift.back { animation-direction: reverse; }
.comes:hover .drift { animation-play-state: paused; }
@keyframes drift { to { transform: translateX(calc(-50% - 5px)); } }
.carry { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 14px 0 9px; border-radius: 99px; background: var(--card); box-shadow: inset 0 0 0 1px var(--line); font-size: 14px; font-weight: 500; letter-spacing: -.01em; white-space: nowrap; }
.carry .app { width: 24px; height: 24px; border-radius: 7px; box-shadow: none; }
.carry .ic { width: 13px; height: 13px; color: var(--ink-3); }
.carry small { font-size: 14px; color: var(--ink-3); font-weight: 400; }

/* ---- owning it ---- */
.path-title { text-align: center; margin-bottom: 16px; font-size: 14.5px; color: var(--ink-3); }
.path { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(10px, 1.2vw, 14px); }
.stop { position: relative; display: grid; gap: 6px; padding: clamp(18px, 2vw, 26px); background: var(--card); border-radius: 22px; box-shadow: inset 0 0 0 1px var(--line); }
.stop-when { font-size: 14px; color: var(--ink-3); letter-spacing: -.006em; }
.stop-num { font-weight: 640; font-size: clamp(30px, 3.2vw, 44px); line-height: 1.08; letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.stop-how { font-size: 14.5px; color: var(--ink-2); }
.stop-first .stop-num { color: var(--ink-3); text-decoration: line-through; text-decoration-thickness: 2px; text-decoration-color: var(--red); }
.stop-end { background: #111; color: #f4f4f4; box-shadow: var(--shadow-3); --ink-3: #a8a8a8; --ink-2: #c4c4c4; overflow: hidden; isolation: isolate; }
.stop-end .stop-num { color: #5fe6a2; }
.upkeep { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(10px, 1.2vw, 14px); margin-top: clamp(10px, 1.2vw, 14px); }
.upkeep article { padding: clamp(20px, 2.4vw, 30px); background: var(--card); border-radius: 22px; box-shadow: inset 0 0 0 1px var(--line); display: grid; gap: 6px; }
.upkeep p { font-size: 15.5px; color: var(--ink-2); letter-spacing: -.008em; line-height: 1.5; text-wrap: pretty; }

/* ---- questions ---- */
.faq-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.55fr); gap: clamp(28px, 5vw, 72px); align-items: start; }
.faq-head { position: sticky; top: 92px; display: grid; gap: 14px; }
.q { border-top: 1px solid var(--line-2); }
.q:last-child { border-bottom: 1px solid var(--line-2); }
.q summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 19px 2px; list-style: none; cursor: pointer; font-weight: 560; font-size: 17.5px; letter-spacing: -.018em; transition: color .15s; }
.q summary::-webkit-details-marker { display: none; }
.q summary:hover { color: var(--ink-2); }
.plus { position: relative; width: 16px; height: 16px; flex: none; color: var(--ink-3); transition: transform .4s var(--ease); }
.plus::before, .plus::after { content: ""; position: absolute; left: 0; right: 0; top: 7px; height: 2px; border-radius: 2px; background: currentColor; }
.plus::after { transform: rotate(90deg); }
.q[open] .plus { transform: rotate(135deg); }
.q p { padding: 0 34px 22px 2px; font-size: 16px; line-height: 1.55; color: var(--ink-2); letter-spacing: -.008em; text-wrap: pretty; }
.q::details-content { block-size: 0; overflow: hidden; transition: block-size .4s var(--ease), content-visibility .4s allow-discrete; }
.q[open]::details-content { block-size: auto; }
@supports (interpolate-size: allow-keywords) { .qs { interpolate-size: allow-keywords; } }

/* ---- the end ---- */
.final-band { padding-block: 0 clamp(24px, 3vw, 40px); }
.final { position: relative; border-radius: clamp(24px, 3vw, 40px); padding: clamp(64px, 10vw, 136px) clamp(20px, 4vw, 64px); background: #0c0c0c; color: #f6f6f6; text-align: center; overflow: hidden; isolation: isolate; }
.final::before { content: ""; position: absolute; inset: 0; z-index: -1; background-image: radial-gradient(rgba(255, 255, 255, .17) 1px, transparent 1.2px); background-size: 24px 24px; -webkit-mask-image: radial-gradient(ellipse 72% 80% at 50% 50%, #000, transparent); mask-image: radial-gradient(ellipse 72% 80% at 50% 50%, #000, transparent); }
.final::after { content: ""; position: absolute; left: 10%; right: 10%; bottom: -220px; height: 380px; z-index: -1; border-radius: 50%; background: linear-gradient(95deg, #0066ff, #5b3df5, #a821e8, #e8175d, #f0650e); filter: blur(90px); opacity: .5; }
.final h2 { font-size: clamp(40px, 6.4vw, 84px); line-height: 1.02; letter-spacing: -.044em; --spectrum: linear-gradient(95deg, #4d94ff 0%, #8c7bff 26%, #cf6bff 50%, #ff5c8d 74%, #ff9a4d 100%); }
.final .sub { max-width: 600px; margin: 20px auto 30px; color: #bdbdbd; }
.final .actions { justify-content: center; }

.foot { padding-block: clamp(36px, 5vw, 64px) 0; overflow: hidden; }
.foot-grid { display: grid; grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr)); gap: 32px 24px; }
.foot-about { display: grid; gap: 12px; justify-items: start; align-content: start; font-size: 14.5px; color: var(--ink-2); max-width: 300px; letter-spacing: -.008em; }
.foot h3 { font-size: 13.5px; font-weight: 500; color: var(--ink-3); margin-bottom: 10px; letter-spacing: -.004em; }
.foot li a { display: inline-block; padding: 4px 0; font-size: 14.5px; color: var(--ink); letter-spacing: -.01em; transition: color .15s; }
.foot li a:hover { color: var(--ink-3); }
.fine { margin-top: 36px; padding-top: 18px; border-top: 1px solid var(--line); font-size: 13px; color: var(--ink-3); }
.giant { margin: 22px 0 -.2em; text-align: center; font-weight: 700; font-size: min(17.2vw, 250px); line-height: 1; letter-spacing: -.06em; white-space: nowrap; background: linear-gradient(180deg, color-mix(in srgb, var(--ink) 13%, transparent), transparent 92%); -webkit-background-clip: text; background-clip: text; color: transparent; user-select: none; pointer-events: none; }

/* ---- side pages ---- */
.page { max-width: 720px; margin: 0 auto; padding: clamp(40px, 7vw, 88px) 20px 96px; font-size: 16.5px; line-height: 1.62; color: var(--ink-2); }
.page h1 { font-size: clamp(38px, 5vw, 56px); color: var(--ink); margin-bottom: 12px; }
.page h2 { font-size: 23px; letter-spacing: -.02em; color: var(--ink); margin: 2em 0 .5em; }
.page p { margin-bottom: 1em; }
.page a { color: var(--ink); text-decoration: underline; text-underline-offset: 2px; }
.page .note { font-size: 14px; color: var(--ink-3); }
.page ul { list-style: disc; padding-left: 1.3em; margin-bottom: 1em; }

/* ---- smaller screens ---- */
@media (max-width: 1180px) {
  .calc-grid { grid-template-columns: minmax(0, 1fr); }
  .result { position: relative; top: 0; }
  .calc-live { position: sticky; bottom: 14px; z-index: 6; display: flex; align-items: baseline; justify-content: center; gap: 7px; width: fit-content; margin: 12px auto 0; padding: 10px 20px; border-radius: 99px; background: #111; color: #d8d8d8; font-size: 14px; box-shadow: var(--shadow-3); font-variant-numeric: tabular-nums; }
  .calc-live b { color: #fff; font-size: 18px; font-weight: 640; letter-spacing: -.02em; }
}
@media (max-width: 1080px) {
  .hero-grid { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .hero-copy { justify-items: center; text-align: center; }
  .hero-copy .actions, .ticks { justify-content: center; }
  .hero-bg::before { -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 40%, #000, transparent 74%); mask-image: radial-gradient(ellipse 80% 60% at 50% 40%, #000, transparent 74%); }
  h1 { font-size: clamp(36px, 12vw, 92px); }
  .c-7, .c-5, .c-4 { grid-column: span 12; }
  .move-grid { grid-template-columns: minmax(0, 1fr); }
  .faq-grid { grid-template-columns: minmax(0, 1fr); }
  .faq-head { position: static; }
  .foot-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .foot-about { grid-column: 1 / -1; max-width: none; }
}
@media (max-width: 900px) {
  .nav-links { display: none; }
  .menu-btn { display: inline-grid; }
  .sheet { position: absolute; left: 12px; right: 12px; top: calc(100% + 4px); display: grid; gap: 2px; padding: 8px; border-radius: 20px; background: var(--card); box-shadow: inset 0 0 0 1px var(--line), var(--shadow-3); transition: opacity .2s, transform .3s var(--ease), visibility .2s; }
  .sheet a { padding: 11px 14px; border-radius: 12px; font-size: 16px; font-weight: 500; }
  .sheet a:hover { background: var(--surface); }
  .sheet[hidden] { display: grid; opacity: 0; transform: translateY(-6px); visibility: hidden; pointer-events: none; }
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stat:nth-child(odd) { padding-left: 0; border-left: 0; }
  .stat:nth-child(n + 3) { border-top: 1px solid var(--line); }
  .stat { padding: 20px 0 22px 18px; }
  .path, .upkeep { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .upkeep { grid-template-columns: minmax(0, 1fr); }

  /* The table turns into a stack of small cards. */
  .bills-wrap { background: none; box-shadow: none; border-radius: 0; overflow: visible; }
  .bills, .bills tbody, .bills tfoot, .bills tr, .bills th[scope="row"], .bills td { display: block; }
  .bills thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .bills tbody tr, .bills tfoot tr { margin-bottom: 10px; padding: 14px 16px 10px; background: var(--card); border-radius: 18px; box-shadow: inset 0 0 0 1px var(--line); }
  .bills tbody tr:hover { background: var(--card); }
  .bills tfoot tr { background: #111; color: #f4f4f4; --ink-3: #a8a8a8; --ink-2: #c4c4c4; --save: #5fe6a2; }
  .bills th[scope="row"], .bills tbody th, .bills tfoot th { padding: 0 0 8px; border: 0; background: none; }
  .bills td, .bills tbody td, .bills tfoot td { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 6px 0 !important; border: 0; border-top: 1px solid var(--line); background: none; font-size: 15.5px; }
  .bills tbody tr:first-child td { border-top: 1px solid var(--line); }
  .bills td::before { content: attr(data-label); font-size: 13.5px; font-weight: 400; color: var(--ink-3); letter-spacing: -.004em; }
  .save-bar { display: none; }
}
@media (max-width: 640px) {
  .nav-cta { display: none; }
  .hero-copy { gap: 20px; }
  .calc-row { grid-template-columns: minmax(0, 1fr) 102px; gap: 6px 12px; padding: 12px 0 10px; }
  .calc-tick { grid-column: 1 / -1; }
  .calc-range { grid-column: 1; }
  .calc-money { grid-column: 2; height: 34px; }
  .calc-note { white-space: normal; }
  .panel { padding-inline: 10px; }
  .calc-list { padding-inline: 12px; }
  .head { text-align: center; }
  .viz { height: 232px; }
  .tile-go { padding: 0 10px; }
  .path { grid-template-columns: minmax(0, 1fr); }
  .stop { grid-template-columns: minmax(0, 1fr) auto; gap: 0 12px; align-items: baseline; }
  .stop-when { grid-column: 1; }
  .stop-how { grid-column: 1; }
  .stop-num { grid-column: 2; grid-row: 1 / span 2; }
  .foot-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .shot { width: 78vw; }
  .btn { padding: 0 20px; }
  .actions { width: 100%; justify-content: center; }
  .board { gap: 6px; }
  .note-row b { white-space: normal; }
}
@container (max-width: 430px) {
  .app-name { display: none; }
}

/* ---- calm mode ---- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001s !important; animation-iteration-count: 1 !important; animation-delay: 0s !important; transition-duration: .001s !important; transition-delay: 0s !important; }
  .js .reveal, .js .load { opacity: 1; transform: none; filter: none; }
  .ring-in, .ring-in a, .halo, .wall-row, .drift, .mover { animation: none !important; }
  .js .statement .w { color: var(--ink); }
  .sql { width: 42ch; animation: none !important; }
  .out, .chat-a, .chat-b, .chat-c, .chat-d { animation: none !important; }
  .chat-b { display: none; }
}
@media print {
  .nav, .hero-bg, .giant, .orbit { display: none; }
  .js .reveal, .js .load { opacity: 1; transform: none; filter: none; }
}

/* wave2:start */
.p-optimally { --a: #ff8f6b; --b: #e8481c; }
.p-fragment { --a: #7ee0c0; --b: #0f9d78; }
.p-eloquent { --a: #ffa07a; --b: #d9435f; }
.p-bloomfield { --a: #ff9ccf; --b: #d6339b; }
.p-magnolia { --a: #b79bff; --b: #6a3de8; }
.p-truestory { --a: #ffd166; --b: #e88a00; }
.p-incentive { --a: #ff8fa3; --b: #e01e5a; }
.p-dodecagon { --a: #66d9ef; --b: #0a7fb5; }
.p-clarion { --a: #8fb8ff; --b: #2b5de0; }
.p-ascend { --a: #7be08a; --b: #1f9d4d; }
.p-friday { --a: #ffb86b; --b: #f0651a; }
.p-altitude { --a: #7fd1ff; --b: #3268e8; }
.p-chime { --a: #c9a0ff; --b: #8034e0; }
.p-greenroom { --a: #8ce99a; --b: #16924f; }
.p-trellis { --a: #b5e48c; --b: #4c9a2a; }
.p-fairtable { --a: #ffd97d; --b: #f08c00; }
.p-dottedline { --a: #a5b4fc; --b: #4338ca; }
.p-inform { --a: #f9a8d4; --b: #be2d84; }
.p-calmly { --a: #99e9f2; --b: #1098ad; }
.p-zippier { --a: #ffc078; --b: #f76707; }
.p-serviceking { --a: #ffd43b; --b: #e67700; }

.stage .ring-in ul, .stage .ring-in .lines, .stage .ring-out, .stage > .lines .inflow { transition: opacity .42s linear; }
.stage.swap .ring-in ul, .stage.swap .ring-in .lines, .stage.swap .ring-out { opacity: 0; }

.calc-list:not(.show-all) .calc-more, .bills:not(.show-all) .more-row { display: none; }
.show-all-btn { display: block; margin: 14px auto 0; min-height: 40px; padding: 0 18px; border-radius: 99px; background: var(--pill-2); color: var(--ink); font-size: 14px; font-weight: 500; letter-spacing: -.008em; transition: background-color .15s, color .15s; }
.show-all-btn:hover { background: var(--pill); color: var(--pill-ink); }
.calc .show-all-btn { margin-bottom: 4px; }

.more { margin-top: clamp(40px, 6vw, 72px); }
.more-title { font-size: clamp(22px, 2.8vw, 32px); font-weight: 600; letter-spacing: -.028em; line-height: 1.15; margin-bottom: 20px; }
.more-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); gap: 12px; }
.more-tile { display: grid; align-content: start; gap: 10px; padding: 18px; border-radius: 18px; background: var(--card); box-shadow: inset 0 0 0 1px var(--line), var(--shadow-1); transition: transform .3s var(--ease), box-shadow .3s; }
.more-tile:hover { transform: translateY(-2px); box-shadow: inset 0 0 0 1px var(--line-2, var(--line)), var(--shadow-2); }
.more-top { display: flex; align-items: center; gap: 12px; min-width: 0; }
.more-top .app { width: 40px; height: 40px; flex: none; }
.more-name { display: grid; min-width: 0; line-height: 1.2; }
.more-name b { font-size: 16px; font-weight: 620; letter-spacing: -.018em; }
.more-name small { font-size: 12.5px; color: var(--ink-3); }
.more-go { margin-left: auto; flex: none; padding: 4px 9px; border-radius: 99px; background: var(--surface); color: var(--ink-3); font-size: 12px; font-weight: 500; white-space: nowrap; }
.more-go.live { background: var(--pill); color: var(--pill-ink); }
.more-what { font-size: 14.5px; line-height: 1.42; letter-spacing: -.008em; color: var(--ink); }
.more-comes { font-size: 13px; line-height: 1.4; color: var(--ink-3); }
.more-comes b { font-weight: 550; color: var(--ink-2); }

.foot-grid { grid-template-columns: minmax(0, 1.4fr) repeat(4, minmax(0, 1fr)); }
.soon-page { min-height: 100vh; display: grid; align-content: center; justify-items: center; gap: 10px; padding: 40px 20px; text-align: center; }
.soon-page h1 { font-size: clamp(40px, 7vw, 72px); font-weight: 640; letter-spacing: -.04em; line-height: 1; }
.soon-icon { width: 76px; height: 76px; margin-bottom: 8px; }
.soon-pill { padding: 5px 12px; border-radius: 99px; background: var(--surface); color: var(--ink-2); font-size: 13px; font-weight: 500; }
.soon-instead { font-size: 15px; color: var(--ink-3); }
.soon-what { max-width: 30em; margin-top: 8px; font-size: clamp(18px, 2.2vw, 22px); line-height: 1.35; letter-spacing: -.016em; text-wrap: balance; }
.soon-comes { max-width: 34em; font-size: 14.5px; line-height: 1.45; color: var(--ink-3); text-wrap: pretty; }
.soon-comes b { font-weight: 550; color: var(--ink-2); }
.soon-back { margin-top: 14px; display: inline-flex; align-items: center; min-height: 44px; padding: 0 20px; border-radius: 99px; background: var(--pill); color: var(--pill-ink); font-weight: 550; font-size: 15px; }
@media (max-width: 1080px) { .foot-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* wave2:end */

/* ---- ServiceKing's own pieces ---- */
.sk-brand { width: 26px; height: 26px; flex: none; border-radius: 8px; box-shadow: none; }
.sk-signin { font-size: 14.5px; font-weight: 500; letter-spacing: -.012em; color: var(--ink-2); padding: 0 6px; white-space: nowrap; }
.sk-signin:hover { color: var(--ink); }
@media (max-width: 860px) { .sk-signin { display: none; } }
.sk-hub { color: #ffc145; }
.foot-grid.sk-foot { grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr)); }
@media (max-width: 1080px) { .foot-grid.sk-foot { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.sk-why { margin-top: clamp(28px, 4vw, 48px); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(12px, 1.4vw, 18px); }
.sk-why article { padding: clamp(18px, 2vw, 24px); border-radius: 20px; background: var(--surface); }
.sk-why h3, .sk-from h3 { font-size: 17.5px; font-weight: 640; letter-spacing: -.022em; color: var(--ink); margin-bottom: 6px; }
.sk-why p, .sk-from p { font-size: 15px; line-height: 1.45; color: var(--ink-2); letter-spacing: -.008em; text-wrap: pretty; }
@media (max-width: 860px) { .sk-why { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .sk-why { grid-template-columns: minmax(0, 1fr); } }

.sk-from { margin-top: clamp(28px, 4vw, 48px); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(12px, 1.4vw, 18px); scroll-margin-top: 90px; }
.sk-from article { padding: clamp(20px, 2.2vw, 28px); border-radius: 24px; background: var(--card); box-shadow: inset 0 0 0 1px var(--line), var(--shadow-1); display: grid; gap: 8px; align-content: start; }
.sk-from h3 { display: flex; align-items: center; gap: 8px; }
.sk-from .who-mark { width: 24px; height: 24px; flex: none; color: var(--ink-2); }
.sk-comes { font-size: 14px !important; color: var(--ink-3) !important; }
.sk-comes b { color: var(--ink-2); font-weight: 560; }
@media (max-width: 860px) { .sk-from { grid-template-columns: minmax(0, 1fr); } }

.sk-lanes { display: grid; gap: 7px; }
.sk-lane { display: grid; grid-template-columns: 40px minmax(0, 1fr); align-items: center; gap: 8px; font-size: 12.5px; font-weight: 560; color: var(--ink-2); }
.sk-track { position: relative; display: block; height: 30px; border-radius: 9px; background: color-mix(in srgb, var(--ink) 5%, transparent); overflow: hidden; }
.sk-job { position: absolute; top: 3px; bottom: 3px; left: var(--x); width: var(--w); padding: 0 7px; border-radius: 6px; display: flex; align-items: center; font-size: 11.5px; font-weight: 500; letter-spacing: -.008em; color: var(--ink); white-space: nowrap; overflow: hidden; background: color-mix(in srgb, var(--c) 22%, var(--card)); box-shadow: inset 3px 0 0 var(--c); }
.c-amber { --c: #ee8400; } .c-blue { --c: #1d58e8; } .c-green { --c: #0d9f57; } .c-pink { --c: #dc1f6a; }
.a1 { --x: 2%; --w: 24%; } .a2 { --x: 28%; --w: 22%; } .a3 { --x: 54%; --w: 40%; }
.b1 { --x: 8%; --w: 40%; } .b2 { --x: 52%; --w: 26%; }
.d1 { --x: 2%; --w: 18%; } .d2 { --x: 34%; --w: 22%; } .d3 { --x: 60%; --w: 26%; }
.e1 { --x: 20%; --w: 56%; }
.f1 { --x: 4%; --w: 34%; } .f2 { --x: 62%; --w: 26%; }
.sk-tip { margin-top: 2px; display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--ink-2); }

.sk-options { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; align-items: start; }
.sk-options .m-card { padding: 11px 10px; display: grid; gap: 5px; font-size: 12.5px; line-height: 1.25; letter-spacing: -.008em; color: var(--ink-2); }
.sk-options b { font-weight: 640; color: var(--ink); }
.sk-options strong { font-weight: 640; font-size: 15.5px; letter-spacing: -.02em; color: var(--ink); font-variant-numeric: tabular-nums; }
.sk-picked { box-shadow: inset 0 0 0 2px #0d9f57, var(--shadow-2) !important; }
.sk-picked .chip { justify-self: start; }

.sk-invoice { padding: 12px 14px; display: grid; gap: 6px; font-size: 13px; letter-spacing: -.008em; color: var(--ink-2); }
.sk-line { display: flex; justify-content: space-between; gap: 12px; font-variant-numeric: tabular-nums; }
.sk-save { color: var(--save); }
.sk-total { padding-top: 6px; border-top: 1px solid var(--line); font-weight: 640; color: var(--ink); font-size: 14.5px; }
.sk-paid { margin-top: 4px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.sk-paid .tiny, .sk-book .tiny { font-size: 12px; color: var(--ink-3); }

.sk-chat { display: flex; flex-direction: column; gap: 7px; }
.sk-bubble { max-width: 84%; padding: 7px 11px; border-radius: 14px; font-size: 12.5px; line-height: 1.3; letter-spacing: -.008em; box-shadow: inset 0 0 0 1px var(--line); background: var(--card); }
.sk-bubble.out { align-self: flex-end; background: var(--pill); color: var(--pill-ink); box-shadow: none; }
.sk-bubble.in { align-self: flex-start; }

.sk-book { padding: 14px; display: grid; gap: 10px; font-size: 14px; letter-spacing: -.012em; }
.sk-book b { font-weight: 640; }
.sk-slots { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.sk-slots span { padding: 8px 4px; border-radius: 9px; text-align: center; font-size: 12px; box-shadow: inset 0 0 0 1px var(--line); color: var(--ink-2); white-space: nowrap; }
.sk-slots .on { background: var(--pill); color: var(--pill-ink); box-shadow: none; font-weight: 560; }
.sk-c1 { --c: #e22f27; } .sk-c2 { --c: #ee8400; } .sk-c3 { --c: #1d58e8; }
.screens .head .btn { margin-top: 4px; }
.sk-old { color: var(--ink-2); background: var(--surface-2); box-shadow: none; }
.sk-old svg { width: 78%; height: 78%; }
.note-row .note-num { margin-left: auto; }
.note-row > span:first-child:not(.chip):not(.note-ic) { min-width: 0; flex: 1; }
.calc-swap .logo { width: 20px; height: 20px; flex: none; }
/* The ring's own box is a little wider than a phone, and nothing in it is there to be scrolled to. */
.hero { overflow-x: clip; }
@media (max-width: 420px) {
  .calc-swap { flex-wrap: wrap; white-space: normal; }
  .calc-note { white-space: normal; }
}
html, body { overflow-x: clip; }