/* Torus - AI infrastructure template. All colours and fonts are the tokens in :root; the rest is mixed from them. */
:root {
  color-scheme: dark;
  --bg: #0f1116;
  --ink: #e8ebf2;
  --accent: #3d6bff;
  --on-accent: #ffffff;
  --f-display: "Sora", system-ui, sans-serif;
  --f-text: "Inter", system-ui, sans-serif;
  --radius: 8px;
  --card: color-mix(in oklab, var(--bg) 93%, var(--ink));
  --card-2: color-mix(in oklab, var(--bg) 86%, var(--ink));
  --line: color-mix(in oklab, var(--bg) 82%, var(--ink));
  --ink-2: color-mix(in oklab, var(--ink) 80%, var(--bg));
  --mute: color-mix(in oklab, var(--ink) 50%, var(--bg));
  --photo-ink: #f3f2ef;
  --pad: clamp(16px, 1.4vw, 28px);
  --gap: 6px;
  --ease: cubic-bezier(.2, .8, .2, 1);
  --glow: 0 0 1px rgba(0, 0, 0, .45), 0 0 14px rgba(0, 0, 0, .45);
}
/* light theme: the same tokens, swapped by the header button (data-theme on <html>) */
:root[data-theme="light"] {
  color-scheme: light;
  --bg: #eceef3;
  --ink: #0f1116;
  --accent: #2f5bff;
  --on-accent: #ffffff;
  --card: #ffffff;
  --card-2: color-mix(in oklab, var(--bg) 88%, var(--ink));
  --line: color-mix(in oklab, var(--bg) 80%, var(--ink));
  --ink-2: color-mix(in oklab, var(--ink) 84%, var(--bg));
  --mute: color-mix(in oklab, var(--ink) 56%, var(--bg));
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; overflow-x: clip; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 400 16px/1.45 var(--f-text); letter-spacing: -.01em; -webkit-font-smoothing: antialiased; overflow-x: clip; }
h1, h2, h3, p, ul, dl, dd, figure, blockquote { margin: 0; }
h1, h2, h3 { font-family: var(--f-display); font-weight: 500; }
ul { padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; height: auto; }
button, input, textarea { font: inherit; color: inherit; letter-spacing: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
::selection { background: var(--accent); color: var(--on-accent); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: fixed; left: 8px; top: -60px; z-index: 100; padding: 10px 14px; background: var(--accent); color: var(--on-accent); border-radius: var(--radius); }
.skip:focus { top: 8px; }
.muted { color: var(--mute); }
.small { font-size: 13px; }
.accent-txt { color: var(--accent); }
.on-photo { text-shadow: var(--glow); color: var(--photo-ink); }
.on-photo small, .on-photo.card-feat-txt, .on-photo.card-prod-txt, .post-title small { color: color-mix(in oklab, var(--photo-ink) 82%, transparent) !important; }
em { font-style: normal; color: var(--accent); }

/* ---------- arrows, buttons ---------- */
.arr { display: inline-block; width: 16px; height: 16px; background: currentColor; flex: none;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2 8h11M9 4l4 4-4 4' fill='none' stroke='black' stroke-width='1.6'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2 8h11M9 4l4 4-4 4' fill='none' stroke='black' stroke-width='1.6'/%3E%3C/svg%3E") center / contain no-repeat; }
.arr--l { transform: scaleX(-1); }
.btn { white-space: nowrap; display: inline-flex; align-items: center; gap: 10px; height: 46px; padding: 0 20px; border-radius: var(--radius); background: var(--accent); color: var(--on-accent); font-size: 15px; font-weight: 500; position: relative; overflow: hidden; isolation: isolate; }
.btn::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--ink); transform: scaleX(0); transform-origin: right; transition: transform .5s var(--ease); }
.btn:hover::before { transform: scaleX(1); transform-origin: left; }
.icon-btn { display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: var(--radius); background: var(--accent); color: var(--on-accent); flex: none; transition: transform .4s var(--ease); }
a:hover > .icon-btn, .icon-btn:hover { transform: translateX(4px); }

/* ---------- header, progress, menu ---------- */
.progress { position: fixed; left: 0; top: 0; right: 0; height: 2px; z-index: 60; pointer-events: none; }
.progress span { display: block; height: 100%; background: var(--accent); transform-origin: left; transform: scaleX(var(--p, 0)); }
.head { position: fixed; inset: 0 0 auto; z-index: 55; display: flex; justify-content: space-between; align-items: center; padding: 18px var(--pad); pointer-events: none; }
.head > * { pointer-events: auto; }
.logo { display: inline-flex; align-items: center; gap: 8px; font: 500 21px/1 var(--f-display); letter-spacing: -.04em; color: var(--accent); transition: color .4s; }
.logo-mark { width: 14px; height: 14px; border: 2px solid currentColor; border-radius: 50%; position: relative; }
.logo-mark::after { content: ""; position: absolute; inset: 3px; background: currentColor; border-radius: 50%; }
.menu-btn { display: inline-flex; align-items: center; gap: 12px; height: 40px; padding: 0 4px 0 14px; color: var(--accent); font-size: 14px; transition: color .4s; }
.menu-lines { display: grid; gap: 4px; width: 24px; }
.menu-lines i { display: block; height: 2px; background: currentColor; transition: transform .5s var(--ease), width .5s var(--ease); justify-self: end; width: 100%; }
.menu-lines i:nth-child(3) { width: 60%; }
.menu-open .head .logo, .menu-open .head .menu-btn { color: var(--on-accent); }
.menu-open .menu-lines i:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.menu-open .menu-lines i:nth-child(2) { transform: scaleX(0); }
.menu-open .menu-lines i:nth-child(3) { width: 100%; transform: translateY(-6px) rotate(-45deg); }

/* the menu: a horizontal band along the top edge that unrolls from right to left */
.menu { position: fixed; inset: 0 0 auto; z-index: 50; background: var(--accent); color: var(--on-accent); clip-path: inset(0 0 0 100%); visibility: hidden; transition: clip-path .8s var(--ease), visibility 0s .8s; }
.menu-open .menu { clip-path: inset(0); visibility: visible; transition: clip-path .8s var(--ease), visibility 0s; }
.menu-in { display: grid; grid-template-columns: 1fr auto; gap: 32px; padding: 84px var(--pad) 28px; }
.menu-big { display: grid; grid-auto-flow: column; grid-template-rows: repeat(3, auto); gap: 6px clamp(24px, 3vw, 56px); justify-content: start; }
.menu-big a { display: flex; align-items: baseline; gap: 10px; font: 500 clamp(34px, 4.2vw, 68px)/1 var(--f-display); letter-spacing: -.05em; transform: translateX(60px); transition: transform .9s var(--ease); }
.menu-big a small { font: 500 12px/1 var(--f-text); letter-spacing: 0; transform: translateY(-1.6em); }
.menu-big a span { background: linear-gradient(currentColor, currentColor) left 100% / 0 2px no-repeat; transition: background-size .5s var(--ease); }
.menu-big a:hover span { background-size: 100% 2px; }
.menu-open .menu-big a { transform: none; }
.menu-big a:nth-child(n+4) { transition-delay: .04s; } .menu-big a:nth-child(n+7) { transition-delay: .08s; } .menu-big a:nth-child(n+10) { transition-delay: .12s; }
.menu-side { display: flex; flex-direction: column; justify-content: space-between; gap: 24px; font-size: 14px; border-left: 1px solid color-mix(in oklab, var(--on-accent) 30%, transparent); padding-left: 24px; min-width: 200px; }
.menu-small { display: grid; gap: 6px; }
.menu-small a:hover, .menu-side p a:hover { text-decoration: underline; }

/* ---------- motion helpers: letters that align like iron filings; panels cut open from the left ---------- */
/* headings: every letter starts turned on its edge (90deg, so the angle alone hides it, no fade) and turns to face you,
   one after another. Before the start the heading is hidden with visibility. */
.w { display: inline-block; white-space: nowrap; }
.js [data-wipe] { visibility: hidden; }
.js [data-wipe].run { visibility: visible; animation: cut 1s var(--ease) var(--d, 0s) both; }
@keyframes cut { from { clip-path: inset(100% 0 0 0 round var(--radius)); } to { clip-path: inset(0 0 0 0 round var(--radius)); } }

/* ---------- hero ---------- */
.hero { position: relative; height: 100svh; min-height: 680px; overflow: hidden; }
.field { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.hero-in { position: relative; height: 100%; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-template-rows: auto 1fr auto; column-gap: var(--gap); padding: 92px var(--pad) 24px; pointer-events: none; }
.hero-in a, .hero-in button { pointer-events: auto; }
.hero-kicker { grid-column: 1 / 4; grid-row: 1; display: grid; font-size: 15px; line-height: 1.3; border-left: 1px solid var(--accent); padding-left: 12px; align-self: start; }
.hero-kicker span { color: var(--ink-2); }
.hero-title { grid-column: 1 / -1; grid-row: 2; align-self: end; font-size: clamp(52px, 9vw, 156px); line-height: .9; letter-spacing: -.055em; padding-bottom: clamp(20px, 3vw, 44px); }
.hero-title > span { display: block; }
.hero-title .l2 { text-align: right; }
.hero-title .l3 { padding-left: 9vw; }
.hero-card { grid-column: 9 / -1; grid-row: 1; justify-self: end; width: 300px; display: grid; gap: var(--gap); }
.hero-card-img { display: block; height: 150px; border-radius: var(--radius); overflow: hidden; background: var(--card); }
.hero-card-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.hero-card:hover .hero-card-img img { transform: scale(1.06); }
.hero-card-txt { display: grid; grid-template-columns: 1fr auto; align-items: center; padding: 12px 14px; border-radius: var(--radius); background: color-mix(in oklab, var(--card) 80%, transparent); backdrop-filter: blur(10px); font-size: 14px; }
.hero-card-txt small { grid-column: 1; color: var(--accent); font-size: 12px; }
.hero-card-txt .arr { grid-column: 2; grid-row: 1 / 3; color: var(--accent); width: 20px; height: 20px; }
.hero-foot { grid-column: 1 / -1; grid-row: 3; display: flex; justify-content: space-between; align-items: end; gap: 24px; border-top: 1px solid var(--line); padding-top: 20px; }
.hero-lead { max-width: 34ch; font-size: 17px; color: var(--ink-2); margin-bottom: 16px; }
.hero-cta-row { display: flex; align-items: center; gap: 16px; }
.hero-cta-row small { color: var(--mute); font-size: 13px; max-width: 22ch; }
.hero-stats { display: flex; gap: clamp(24px, 4vw, 64px); }
.stat { display: flex; gap: 12px; align-items: start; }
.stat dt { font: 500 clamp(30px, 3vw, 44px)/1 var(--f-display); letter-spacing: -.05em; color: var(--accent); }
.stat sup { font-size: .4em; vertical-align: top; margin-left: 2px; }
.stat dd { display: grid; font-size: 13px; color: var(--mute); line-height: 1.3; padding-top: 2px; }
.stat dd strong { color: var(--ink); font-weight: 500; font-size: 15px; }

/* ---------- statement with rising 3D prisms ---------- */
.statement { position: relative; height: 300vh; }
.statement-pin { position: sticky; top: 0; height: 100svh; display: grid; place-items: center; overflow: hidden; }
.prisms { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.prisms--front { z-index: 2; }
.statement-text { position: relative; z-index: 1; width: min(100% - 2 * var(--pad), 1300px); font: 500 clamp(38px, 7vw, 120px)/1.02 var(--f-display); letter-spacing: -.05em; }

/* ---------- section frame ---------- */
.sec { padding: clamp(96px, 12vw, 180px) var(--pad) 0; }
.sec-title { font-size: clamp(56px, 7.2vw, 108px); line-height: .92; letter-spacing: -.055em; color: var(--mute); margin-bottom: clamp(36px, 5vw, 72px); }
.sec-row { display: grid; grid-template-columns: 1.4fr 5fr 2fr; gap: var(--gap); align-items: start; margin-bottom: clamp(48px, 7vw, 110px); }
.sec-n { display: grid; border-left: 1px solid var(--accent); padding-left: 12px; }
.sec-n span { font: 500 28px/1.1 var(--f-display); letter-spacing: -.04em; color: var(--ink-2); }
.sec-n small { font-size: 12px; color: var(--mute); }
.sec-lead { font: 500 clamp(26px, 3.3vw, 48px)/1.1 var(--f-display); letter-spacing: -.05em; color: var(--ink-2); max-width: 20ch; }
.sec-side { font-size: 13px; color: var(--mute); max-width: 24ch; justify-self: end; }
.sec-foot { display: flex; justify-content: space-between; align-items: center; padding: 28px 0 0; }
.ticks { display: inline-flex; gap: 3px; height: 12px; }
.ticks::before { content: ""; width: 54px; height: 12px; background: repeating-linear-gradient(90deg, var(--line) 0 3px, transparent 3px 6px); }
.ticks::after { content: ""; position: absolute; width: 3px; height: 12px; background: var(--accent); transform: translateX(calc((var(--n) - 1) * 6px)); }
.more { display: inline-flex; align-items: center; gap: 14px; font-size: 14px; }

/* ---------- cards ---------- */
.card { position: relative; overflow: hidden; background: var(--card); border-radius: var(--radius); padding: 20px; }
.card > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.4s var(--ease); }
a.card:hover > img { transform: scale(1.04); }
.card-top { position: relative; display: flex; justify-content: space-between; align-items: start; gap: 12px; }
.card-top small { display: block; font-size: 13px; color: var(--ink-2); }
.card-top strong { display: block; font: 500 clamp(24px, 2.4vw, 35px)/1.1 var(--f-display); letter-spacing: -.04em; }
.card > .icon-btn { position: absolute; left: 20px; bottom: 20px; }
.card-bar { display: flex; align-items: center; gap: 12px; font-size: 12px; }
.card-bar .rule { flex: 1; height: 1px; background: currentColor; opacity: .5; }
.card-foot { display: flex; align-items: center; gap: 8px; font-size: 13px; margin-top: auto; }
.tag { display: inline-block; font-size: 11px; padding: 3px 7px; border-radius: 4px; background: var(--card-2); color: var(--ink-2); }
.grip { width: 14px; height: 14px; flex: none; background: radial-gradient(circle, currentColor 1.2px, transparent 1.6px) 0 0 / 5px 5px; opacity: .6; }
.dots { display: grid; grid-template-columns: repeat(6, 1fr); gap: 22px 0; margin: auto 0; padding: 24px 6px; justify-items: center; }
.dots i { width: 4px; height: 4px; border-radius: 50%; background: currentColor; opacity: .55; }
.dots i.hot { background: var(--ink); opacity: 1; animation: blink 2.4s infinite var(--d, 0s); }
.svc-card .dots i { color: var(--mute); } .svc-card .dots i.hot { background: var(--accent); }
@keyframes blink { 50% { transform: scale(2.2); } }

.work-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap); }
.card-feat { grid-column: span 2; min-height: clamp(380px, 40vw, 580px); }
.card-feat-txt { position: absolute; left: 20px; right: 40%; bottom: 72px; font-size: 15px; color: var(--ink-2); }
.card-accent { display: flex; flex-direction: column; gap: 18px; background: var(--accent); color: var(--on-accent); }
.card-accent h3 { font-size: clamp(28px, 2.6vw, 44px); line-height: 1.05; letter-spacing: -.05em; }
.card-accent > p:not(.card-bar):not(.card-foot) { font-size: 15px; max-width: 32ch; }
.card-accent .dots i.hot { background: var(--on-accent); }
.card-prod { min-height: 320px; }
.card-prod-txt { position: absolute; left: 20px; right: 20px; bottom: 70px; font-size: 14px; color: var(--ink-2); max-width: 28ch; }
.card-beta { grid-column: span 2; display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.beta-img { position: relative; border-radius: calc(var(--radius) - 2px); overflow: hidden; min-height: 260px; }
.beta-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.beta-txt { display: flex; flex-direction: column; gap: 8px; }
.beta-txt h3 { font-size: clamp(24px, 2.4vw, 35px); letter-spacing: -.04em; }
.beta-txt h3 span { color: var(--mute); }
.beta-num { font: 500 clamp(44px, 4vw, 64px)/1 var(--f-display); letter-spacing: -.05em; color: var(--ink-2); margin-top: auto; }
.beta-num sup, .big-num sup { font-size: .4em; vertical-align: top; }
.meter { display: block; height: 4px; background: var(--card-2); border-radius: 2px; overflow: hidden; }
.meter i { display: block; height: 100%; width: calc(var(--v) * 1%); background: var(--accent); transform-origin: left; transform: scaleX(0); transition: transform 1.6s var(--ease) .3s; }
.run .meter i { transform: none; }
.beta-cta { display: flex; justify-content: space-between; align-items: center; margin-top: 10px; font-size: 15px; }

/* services: horizontal accordion */
.svc { display: grid; grid-template-columns: minmax(0, 1fr) clamp(260px, 24vw, 360px); gap: var(--gap); }
.svc-panels { display: flex; gap: var(--gap); height: clamp(460px, 40vw, 560px); }
.svc-p { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: start; gap: 16px; padding: 20px; border-radius: var(--radius); background: var(--card); color: var(--mute); text-align: left; overflow: hidden; transition: flex-grow .8s var(--ease), background-color .5s, color .5s; }
.svc-p:hover { color: var(--ink); }
.svc-p[aria-expanded="true"] { flex-grow: 4.2; background: var(--accent); color: var(--on-accent); }
.svc-n { display: flex; align-items: center; gap: 10px; font: 500 clamp(26px, 2.4vw, 36px)/1 var(--f-display); letter-spacing: -.04em; }
.svc-arrow { transition: transform .6s var(--ease); }
.svc-p[aria-expanded="true"] .svc-arrow { transform: rotate(-135deg); }
.svc-body { display: grid; gap: 10px; width: min(340px, 64vw); visibility: hidden; }
.svc-p[aria-expanded="true"] .svc-body { visibility: visible; animation: cut .9s var(--ease) .25s both; }
.svc-body strong { font: 500 22px/1.1 var(--f-display); letter-spacing: -.03em; }
.svc-body span { font-size: 14px; }
.svc-body img { width: 100%; height: clamp(110px, 10vw, 150px); object-fit: cover; border-radius: calc(var(--radius) - 2px); margin-top: 6px; }
.svc-word { margin-top: auto; display: flex; align-items: center; gap: 8px; font-size: 14px; }
.svc-card { display: flex; flex-direction: column; gap: 16px; }
.svc-card h3 { font-size: clamp(28px, 2.6vw, 42px); line-height: 1.05; letter-spacing: -.05em; color: var(--ink-2); }
.svc-card p.muted { font-size: 14px; }
.svc-card .card-bar { color: var(--mute); }

/* process: slider in a grid of cards */
.proc { display: grid; grid-template-columns: 1fr 1.6fr .9fr; grid-template-rows: auto 1fr auto; gap: var(--gap); }
.proc-img { grid-row: 1 / 4; min-height: 520px; padding: 0; }
.proc-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.proc-bar, .team-bar { display: flex; justify-content: space-between; align-items: center; font: 500 20px/1 var(--f-display); letter-spacing: -.03em; color: var(--mute); min-height: 96px; }
.proc-nav, .quote-nav, .proc-nav-in { display: flex; justify-content: center; align-items: center; gap: 14px; color: var(--accent); }
.proc-nav button, .quote-nav button, .proc-nav-in button { width: 40px; height: 40px; display: grid; place-items: center; border-radius: var(--radius); transition: background-color .3s; }
.proc-nav button:hover, .quote-nav button:hover, .proc-nav-in button:hover { background: var(--card-2); }
.proc-nav .arr, .quote-nav .arr, .proc-nav-in .arr { width: 20px; height: 20px; }
.proc-txt { min-height: 240px; }
.proc-txt h3, .team-txt h3 { font-size: clamp(24px, 2.2vw, 32px); letter-spacing: -.04em; margin-bottom: 18px; }
.proc-txt p { color: var(--mute); max-width: 46ch; }
.proc-num .big-num { font: 500 clamp(44px, 4vw, 64px)/1 var(--f-display); letter-spacing: -.05em; color: var(--ink-2); }
.proc-num .big-num sup { font-size: .3em; }
.proc-side { display: flex; align-items: end; }
.proc-demo { display: flex; justify-content: space-between; align-items: center; font-size: 15px; }
.pips { display: inline-flex; gap: 4px; }
.pips i { width: 8px; height: 8px; border-radius: 4px; background: var(--card-2); transition: width .5s var(--ease), background-color .5s; }
.pips i.on { width: 26px; background: var(--accent); }
[data-slider] .slide { display: none; }
[data-slider] .slide.on { display: block; animation: cut .8s var(--ease) both; }
[data-slider] img[data-slide] { visibility: hidden; }
[data-slider] img[data-slide].on { visibility: visible; animation: cut 1s var(--ease) both; z-index: 1; }
[data-slider] img[data-slide].was { visibility: visible; }

/* analytics bento */
.bento { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gap); }
.b-photo { grid-column: 1 / 5; min-height: 380px; display: flex; flex-direction: column; justify-content: space-between; }
.b-photo p { position: relative; font-size: 17px; }
.b-logo { color: var(--accent); font: 500 22px/1 var(--f-display) !important; letter-spacing: -.04em; }
.b-health { grid-column: 5 / 8; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.b-health h3, .b-score p, .b-perf strong, .b-bars strong { font-weight: 500; }
.b-health h3 { font-size: 20px; letter-spacing: -.03em; }
.donut { width: min(170px, 80%); margin: 18px 0; transform: rotate(-90deg); }
.donut circle { fill: none; stroke-width: 22; transition: stroke-dashoffset 1.6s var(--ease); }
.b-legend { display: flex; gap: 18px; justify-content: center; }
.b-legend div { display: grid; justify-items: center; }
.b-legend dt { font: 500 22px/1.1 var(--f-display); letter-spacing: -.04em; }
.b-legend dd { font-size: 12px; color: var(--mute); display: flex; align-items: center; gap: 5px; }
.lg { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
.lg1 { background: var(--ink); } .lg2 { background: var(--mute); }
.b-cities { grid-column: 8 / -1; display: flex; flex-direction: column; justify-content: space-between; gap: 18px; }
.cities { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; text-align: center; }
.city { display: grid; justify-items: center; gap: 12px; }
.city p { display: grid; font-size: 15px; }
.city small { font-size: 11px; color: var(--mute); }
.clock { position: relative; width: clamp(64px, 6vw, 92px); aspect-ratio: 1; border-radius: 50%; background: var(--card-2); }
.clock i { position: absolute; left: 50%; bottom: 50%; width: 1.5px; transform-origin: 50% 100%; background: var(--ink); transform: rotate(var(--a, 0deg)); }
.clock .h { height: 26%; } .clock .m { height: 38%; } .clock .s { height: 42%; background: var(--accent); width: 1px; }
.b-cap { display: grid; justify-items: end; gap: 6px; text-align: right; }
.b-cap strong { font: 500 20px/1.1 var(--f-display); letter-spacing: -.03em; }
.pill { font-size: 11px; padding: 3px 9px; border: 1px solid var(--line); border-radius: 20px; color: var(--mute); }
.b-uptime { grid-column: 1 / 4; display: flex; flex-direction: column; justify-content: space-between; min-height: 280px; }
.big-num { font: 500 clamp(48px, 4.6vw, 72px)/1 var(--f-display); letter-spacing: -.05em; color: var(--ink-2); }
.big-num small { font-size: .4em; color: var(--mute); }
.b-perf { grid-column: 4 / 7; display: flex; flex-direction: column; gap: 10px; }
.chart { width: 100%; height: auto; }
.chart .grid path { stroke: var(--line); stroke-width: 1; fill: none; }
.chart text { fill: var(--mute); font-size: 9px; font-family: var(--f-text); }
.chart .line { fill: none; stroke-width: 2.4; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 2s var(--ease) .2s; }
.chart .line-a { stroke: var(--accent); } .chart .line-b { stroke: var(--ink); transition-delay: .5s; }
.run .chart .line { stroke-dashoffset: 0; }
.b-bars { grid-column: 7 / 11; display: flex; flex-direction: column; gap: 14px; }
.bars-v { flex: 1; display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; min-height: 200px; }
.bar { display: grid; grid-template-rows: 1fr auto; gap: 8px; text-align: center; }
.bar > span { position: relative; background: var(--card-2); border-radius: calc(var(--radius) - 3px); overflow: hidden; }
.bar > span::before { content: ""; position: absolute; inset: auto 0 0; height: calc(var(--v) * 1%); background: var(--accent); transform-origin: bottom; transform: scaleY(0); transition: transform 1.4s var(--ease); }
.bar:nth-child(2) > span::before { transition-delay: .08s; } .bar:nth-child(3) > span::before { transition-delay: .16s; } .bar:nth-child(4) > span::before { transition-delay: .24s; } .bar:nth-child(5) > span::before { transition-delay: .32s; }
.run .bar > span::before { transform: none; }
.bar b { position: absolute; left: 0; right: 0; bottom: 10px; font: 500 clamp(13px, 1.3vw, 19px)/1 var(--f-display); color: var(--on-accent); z-index: 1; }
.bar small { font-size: 11px; color: var(--mute); }
.b-score { grid-column: 11 / -1; display: flex; flex-direction: column; justify-content: space-between; }
.b-cap2 { grid-column: 11 / -1; display: flex; flex-direction: column; justify-content: center; }
.b-cap2 .big-num { font-size: clamp(30px, 2.6vw, 40px); }
.b-news { grid-column: 1 / 11; display: flex; align-items: center; gap: 20px; padding: 16px 20px; }
.b-news-label { font-size: 14px; color: var(--mute); flex: none; }
.marquee { overflow: hidden; flex: 1; -webkit-mask: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.marquee-in { display: flex; width: max-content; animation: slide 40s linear infinite; }
.marquee-in span { padding: 0 32px; font-size: 17px; letter-spacing: -.02em; white-space: nowrap; }
@keyframes slide { to { transform: translateX(-50%); } }

/* pricing */
.plans { display: grid; gap: var(--gap); }
.plan { display: grid; grid-template-columns: clamp(140px, 14vw, 200px) 1.1fr .9fr 1.5fr 1fr; gap: var(--gap); }
.plan .card { min-height: 0; }
.plan-img { padding: 16px; min-height: 230px; }
.plan-img h3 { position: relative; z-index: 1; font-size: 18px; letter-spacing: -.02em; text-shadow: var(--glow); }
.plan-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.plan-price { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; }
.price { font: 500 clamp(40px, 3.4vw, 52px)/1 var(--f-display); letter-spacing: -.05em; color: var(--ink-2); }
.switch { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; color: var(--mute); }
.switch i { position: relative; width: 34px; height: 18px; border-radius: 9px; background: var(--card-2); }
.switch i::after { content: ""; position: absolute; left: 2px; top: 2px; width: 14px; height: 14px; border-radius: 50%; background: var(--accent); transition: transform .4s var(--ease); }
.switch[aria-checked="true"] i::after { transform: translateX(16px); }
.switch span:first-child { color: var(--ink); } .switch[aria-checked="true"] span:first-child { color: var(--mute); } .switch[aria-checked="true"] span:last-child { color: var(--ink); }
.save { font-size: 11px; color: var(--accent); visibility: hidden; }
.yearly .save { visibility: visible; }
.plan-meta { display: grid; gap: var(--gap); }
.plan-meta .card { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; text-align: center; }
.plan-meta p { font: 500 20px/1.1 var(--f-display); letter-spacing: -.03em; color: var(--ink-2); }
.plan-list { display: grid; align-content: center; gap: 10px; }
.plan-list ul { display: grid; gap: 3px; font-size: 13px; color: var(--ink-2); }
.plan-list li::before { content: ""; display: inline-block; width: 4px; height: 4px; border-radius: 50%; background: var(--mute); margin: 0 10px 2px 0; }
.plan-cta { display: grid; place-items: center; }

/* faq */
.faq { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap); align-items: start; }
.faq-list { display: grid; gap: var(--gap); }
.qa { padding: 0; }
.qa h3 { font: 400 17px/1.3 var(--f-text); }
.qa button { width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 20px; text-align: left; }
.qa-ico { display: grid; gap: 5px; width: 26px; flex: none; color: var(--accent); }
.qa-ico i { height: 1.5px; background: currentColor; transition: transform .5s var(--ease); }
.qa button[aria-expanded="true"] .qa-ico i:nth-child(1) { transform: translateY(6.5px) rotate(45deg) scaleX(.7); }
.qa button[aria-expanded="true"] .qa-ico i:nth-child(2) { transform: scaleX(0); }
.qa button[aria-expanded="true"] .qa-ico i:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg) scaleX(.7); }
.qa-a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .6s var(--ease); }
.qa-a p { overflow: hidden; padding: 0 20px; color: var(--mute); font-size: 15px; max-width: 60ch; }
.qa.open .qa-a { grid-template-rows: 1fr; }
.qa.open .qa-a p { padding-bottom: 20px; }
.faq-card { display: flex; flex-direction: column; gap: 14px; position: sticky; top: 90px; }
.faq-img { position: relative; height: clamp(220px, 22vw, 320px); border-radius: calc(var(--radius) - 2px); overflow: hidden; margin-bottom: 8px; }
.faq-img img { width: 100%; height: 100%; object-fit: cover; }
.faq-card h3 { font-size: clamp(26px, 2.4vw, 36px); letter-spacing: -.04em; }
.ring { width: 110px; height: 110px; font-size: 9.6px; letter-spacing: .14em; text-transform: uppercase; fill: currentColor; animation: spin 18s linear infinite; }
.ring--faq { position: absolute; right: 16px; top: 16px; color: var(--ink); }
@keyframes spin { to { transform: rotate(360deg); } }

/* team */
.team { display: grid; grid-template-columns: 1.5fr 1.1fr .5fr; grid-template-rows: auto 1fr; gap: var(--gap); }
.team-bar { grid-column: 1; }
.team-txt { grid-column: 1; min-height: 380px; }
.team-txt .slide.on { display: flex; flex-direction: column; height: 100%; }
.team-bio { margin-top: auto; color: var(--ink-2); max-width: 54ch; padding-top: 40px; }
.team-img { grid-column: 2; grid-row: 1 / 3; padding: 0; min-height: 520px; }
.team-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.team-nav { grid-column: 3; grid-row: 1 / 3; display: flex; flex-direction: column; justify-content: space-between; align-items: center; }
.in-ico, .socials a, .foot-social a { display: inline-grid; place-items: center; width: 30px; height: 30px; border: 1px solid var(--line); border-radius: 6px; font-size: 12px; color: var(--ink-2); transition: border-color .3s, color .3s; }
.in-ico:hover, .socials a:hover, .foot-social a:hover { border-color: var(--accent); color: var(--accent); }

/* clients */
.quotes { display: grid; grid-template-columns: 1fr clamp(96px, 9vw, 140px); gap: var(--gap); }
.quote { min-height: 300px; }
.quote figure.on { display: grid; grid-template-columns: clamp(150px, 15vw, 210px) 1fr; gap: clamp(20px, 3vw, 48px); height: 100%; }
.quote img { width: 100%; height: 100%; min-height: 240px; object-fit: cover; border-radius: calc(var(--radius) - 2px); grid-row: 1 / 3; }
.quote blockquote { color: var(--mute); }
.quote blockquote svg { color: var(--line); margin-bottom: 14px; }
.quote blockquote p { font-size: clamp(17px, 1.5vw, 22px); line-height: 1.4; font-style: italic; max-width: 40ch; }
.quote figcaption { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 0 20px; align-self: end; }
.quote figcaption strong { font: 500 clamp(24px, 2.2vw, 32px)/1.1 var(--f-display); letter-spacing: -.04em; }
.quote figcaption small { font-size: 13px; color: var(--mute); }
.quote .q-co { grid-column: 2; grid-row: 1 / 3; }
.quote-nav { flex-direction: row; }
.quote-strip { grid-column: 1 / -1; display: grid; grid-template-columns: clamp(140px, 14vw, 200px) repeat(8, minmax(0, 1fr)); gap: var(--gap); }
.quote-bar { display: flex; flex-direction: column; justify-content: space-between; gap: 12px; font-size: 13px; color: var(--mute); }
.face { padding: 0; aspect-ratio: 1 / 1.05; }
.face img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: brightness(.82); transition: filter .5s, transform 1s var(--ease); }
.face:hover img { filter: none; transform: scale(1.05); }

/* journal */
.posts { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap); }
.post { min-height: clamp(360px, 32vw, 500px); display: flex; flex-direction: column; gap: 16px; }
.post-meta { position: relative; display: flex; justify-content: space-between; gap: 12px; font-size: 12px; }
.post-title { position: relative; display: grid; gap: 6px; max-width: 26ch; }
.post-title strong { font: 500 clamp(22px, 2vw, 30px)/1.12 var(--f-display); letter-spacing: -.04em; }
.post-title small { font-size: 14px; color: var(--ink-2); }
.post::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(to bottom, rgba(0, 0, 0, .45), transparent 45%); pointer-events: none; }
.post > span { z-index: 2; }

/* tickers */
.tickers { margin-top: clamp(96px, 12vw, 180px); background: var(--accent); color: var(--on-accent); padding: clamp(16px, 2vw, 28px) 0; overflow: hidden; }
.tk { overflow: hidden; }
.tk-in { display: flex; width: max-content; animation: slide 46s linear infinite; }
.tk1 .tk-in { animation-direction: reverse; animation-duration: 60s; }
.tk-in > span { display: grid; padding: 0 clamp(20px, 3vw, 48px); }
.tk-in b { font: 500 clamp(56px, 7.6vw, 120px)/1 var(--f-display); letter-spacing: -.06em; white-space: nowrap; }
.tk-in sup { font-size: .22em; vertical-align: top; letter-spacing: 0; margin-left: 4px; }
.tk1 b { font-size: clamp(90px, 12vw, 200px); }
.tk-in small { font-size: 14px; white-space: nowrap; padding-left: .3em; }

/* contact */
.contact { padding: clamp(40px, 6vw, 80px) var(--pad) 0; }
.talk { text-align: center; font-size: clamp(76px, 17.5vw, 300px); line-height: .9; letter-spacing: -.065em; color: var(--accent); margin-bottom: clamp(20px, 3vw, 40px); }
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap); }
.contact-info { display: grid; gap: var(--gap); }
.contact h3 { font-size: 20px; letter-spacing: -.03em; margin-bottom: 14px; }
.c-follow { display: flex; justify-content: space-between; align-items: center; }
.c-follow h3 { margin: 0; }
.socials { display: flex; gap: 8px; }
.c-offer li { font-size: 14px; color: var(--ink-2); }
.c-offer li::before, .plan-list li::before { content: ""; }
.c-offer li::before { display: inline-block; width: 4px; height: 4px; border-radius: 50%; background: var(--accent); margin: 0 10px 2px 0; }
.c-two { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap); }
.c-two p { font-size: 14px; }
.c-form { display: grid; gap: var(--gap); align-content: start; }
.c-form h3 { margin: 0; }
.c-form .small { margin-bottom: 12px; }
input, textarea { width: 100%; padding: 14px 16px; border: 1px solid transparent; border-radius: var(--radius); background: var(--card-2); outline: 0; transition: border-color .3s; resize: vertical; }
input::placeholder, textarea::placeholder { color: var(--mute); }
input:focus, textarea:focus { border-color: var(--accent); }
.c-form .btn { justify-self: start; margin-top: 8px; }
.form-ok { color: var(--accent); font-size: 14px; }

/* footer */
.foot { padding: clamp(80px, 10vw, 140px) var(--pad) var(--pad); display: grid; gap: var(--gap); }
.foot .cell { background: var(--card); border-radius: var(--radius); padding: 20px; position: relative; overflow: hidden; }
.foot-top { display: grid; grid-template-columns: 1fr 2.6fr; gap: var(--gap); }
.foot-ring { display: flex; flex-direction: column; justify-content: space-between; gap: 24px; }
.foot-ring .ring { width: 96px; height: 96px; color: var(--ink-2); }
.ring-dot { position: absolute; left: 20px; top: 20px; width: 96px; height: 96px; display: grid; place-items: center; pointer-events: none; }
.ring-dot::after { content: ""; width: 22px; height: 22px; border-radius: 50%; background: var(--accent); }
.foot-line { font: 500 22px/1.15 var(--f-display); letter-spacing: -.03em; border-left: 1px solid var(--accent); padding-left: 12px; max-width: 16ch; }
.foot-brand { min-height: clamp(220px, 20vw, 320px); display: flex; flex-direction: column; justify-content: space-between; }
.foot-word { position: relative; font: 500 clamp(72px, 14.5vw, 250px)/.85 var(--f-display); letter-spacing: -.065em; color: var(--accent); text-align: right; }
.foot-word sup { font-size: .14em; vertical-align: top; letter-spacing: 0; }
.foot-addr { position: relative; font-size: 13px; color: var(--ink-2); }
.field--foot { opacity: 1; }
.foot-mid { display: grid; grid-template-columns: 1.5fr 1fr; gap: var(--gap); }
.foot-nav { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.foot-nav div { display: grid; align-content: start; gap: 6px; font-size: 15px; }
.foot-nav a { color: var(--ink-2); width: fit-content; } .foot-nav a:hover { color: var(--accent); }
.bars { display: flex; gap: 4px; margin-bottom: 10px; } .bars i { width: 16px; height: 3px; border-radius: 2px; background: var(--accent); } .bars i + i { width: 6px; background: var(--mute); }
.foot-news { display: grid; gap: var(--gap); align-content: start; }
.foot-news h2 { font-size: 22px; letter-spacing: -.03em; }
.foot-news > .muted { font-size: 14px; margin-bottom: 10px; }
.news-row { display: flex; gap: var(--gap); }
.news-row .icon-btn { width: 48px; height: auto; }
.foot-bot { display: grid; grid-template-columns: 1fr 2fr 1fr; gap: var(--gap); font-size: 12px; color: var(--mute); }
.foot-bot .cell { display: flex; align-items: center; padding: 14px 20px; }
.foot-social { gap: 8px; justify-content: end; }

.to-top { position: fixed; right: 16px; bottom: 16px; z-index: 40; width: 44px; height: 44px; display: grid; place-items: center; border-radius: var(--radius); background: var(--accent); color: var(--on-accent); transform: scale(0); transition: transform .5s var(--ease); }
.to-top.show { transform: none; }

/* ---------- responsive ---------- */
@media (max-width: 1100px) {
  .hero-card { width: 240px; }
  .hero-card-img { height: 120px; }
  .work-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .card-accent { grid-column: span 2; }
  .card-beta { grid-column: span 2; }
  .svc { grid-template-columns: minmax(0, 1fr); }
  .bento { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .b-photo { grid-column: 1 / 4; } .b-health { grid-column: 4 / -1; } .b-cities { grid-column: 1 / -1; }
  .b-uptime { grid-column: 1 / 3; } .b-perf { grid-column: 3 / -1; } .b-bars { grid-column: 1 / 5; } .b-score { grid-column: 5 / -1; }
  .b-news { grid-column: 1 / 5; } .b-cap2 { grid-column: 5 / -1; }
  .plan { grid-template-columns: 160px 1fr 1fr; }
  .plan-list { grid-column: 1 / 3; } .plan-cta { grid-column: 3; }
  .team { grid-template-columns: 1.3fr 1fr; }
  .team-nav { grid-column: 1 / -1; grid-row: auto; flex-direction: row; }
  .quote-strip { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .quote-bar { grid-column: 1 / -1; flex-direction: row; align-items: center; }
  .face:nth-of-type(n+6) { display: none; }
}
@media (max-width: 760px) {
  .menu-in { grid-template-columns: 1fr; padding-top: 76px; }
  .menu-big { grid-template-rows: repeat(5, auto); gap: 4px 24px; }
  .menu-big a { font-size: clamp(28px, 8vw, 40px); }
  .menu-side { border-left: 0; padding-left: 0; border-top: 1px solid color-mix(in oklab, var(--on-accent) 30%, transparent); padding-top: 16px; flex-direction: row; flex-wrap: wrap; }
  .menu-small { grid-template-columns: repeat(2, auto); gap: 4px 24px; }
  .hero { min-height: 640px; }
  .hero-in { padding-top: 76px; }
  .hero-kicker { grid-column: 1 / 8; font-size: 14px; }
  .hero-card { display: none; }
  .hero-title { font-size: clamp(44px, 13.4vw, 80px); }
  .hero-title .l2 { text-align: left; padding-left: 10vw; }
  .hero-title .l3 { padding-left: 0; }
  .hero-foot { flex-direction: column; align-items: start; gap: 20px; }
  .hero-lead { font-size: 15px; margin-bottom: 12px; }
  .hero-stats { gap: 20px; }
  .stat { flex-direction: column; gap: 6px; }
  .sec-row { grid-template-columns: 1fr; gap: 20px; }
  .sec-side { justify-self: start; }
  .work-grid { grid-template-columns: 1fr; }
  .card-feat, .card-accent, .card-beta { grid-column: auto; }
  .card-feat-txt { right: 20px; }
  .card-beta { grid-template-columns: 1fr; }
  .svc-panels { flex-direction: column; height: auto; }
  .svc-p { flex: none; }
  .svc-p .svc-body { display: none; }
  .svc-p[aria-expanded="true"] .svc-body { display: grid; width: 100%; }
  .svc-word { margin-top: 0; }
  .proc { grid-template-columns: 1fr auto; }
  .proc-img { grid-column: 1 / -1; grid-row: auto; min-height: 280px; }
  .proc-bar { min-height: 0; } .proc-txt, .proc-num { grid-column: 1 / -1; }
  .proc-side { grid-column: 1 / -1; }
  .proc-demo { grid-column: 1 / -1; }
  .bento { grid-template-columns: 1fr 1fr; }
  .bento > .card { grid-column: 1 / -1; }
  .b-uptime, .b-score { grid-column: auto !important; }
  .b-uptime { min-height: 200px; }
  .b-cities .cities { gap: 4px; }
  .b-news { flex-direction: column; align-items: start; }
  .marquee { width: 100%; }
  .plan { grid-template-columns: 1fr 1fr; }
  .plan-img { grid-column: 1 / -1; min-height: 160px; }
  .plan-list { grid-column: 1 / -1; }
  .plan-cta { grid-column: 1 / -1; }
  .faq { grid-template-columns: 1fr; }
  .faq-card { position: relative; top: 0; }
  .team { grid-template-columns: 1fr; }
  .team-img { grid-column: auto; grid-row: auto; min-height: 420px; }
  .team-txt { min-height: 0; }
  .quotes { grid-template-columns: 1fr; }
  .quote figure.on { grid-template-columns: 1fr; }
  .quote img { min-height: 0; height: 300px; grid-row: auto; }
  .quote-nav { justify-content: start; padding: 10px 20px; }
  .quote-strip { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .face:nth-of-type(n+5) { display: none; }
  .posts { grid-template-columns: 1fr; }
  .contact-grid, .c-two { grid-template-columns: 1fr; }
  .foot-top, .foot-mid, .foot-bot { grid-template-columns: 1fr; }
  .foot-social { justify-content: start; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .statement { height: auto; } .statement-pin { position: relative; height: auto; padding: 120px 0; }
}
.proc-demo .icon-btn, .beta-cta .icon-btn { position: static; }
.quote { height: clamp(320px, 28vw, 400px); }
.quote figure.on { grid-template-rows: 1fr auto; }
.quote img { height: 100%; min-height: 0; }
@media (max-width: 760px) { .quote { height: auto; } .quote figure.on { grid-template-rows: auto; } .quote img { height: 300px; } }
.head::before { content: ""; position: absolute; inset: 0; z-index: -1; background: color-mix(in oklab, var(--bg) 78%, transparent); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); transform: translateY(-101%); transition: transform .6s var(--ease); }
.head.scrolled::before { transform: none; }
.menu-open .head::before { transform: translateY(-101%); }
@media (max-width: 760px) { .proc-bar, .team-bar { font-size: 16px; gap: 10px; } }

/* ---------- inner pages ---------- */
.sec--top { padding-top: clamp(110px, 12vw, 170px); }
.back { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--accent); margin-bottom: 24px; }
.back .arr { width: 14px; height: 14px; }
.p-title { font-size: clamp(40px, 5.6vw, 88px); line-height: .98; letter-spacing: -.05em; color: var(--ink-2); max-width: 18ch; margin-bottom: clamp(36px, 5vw, 64px); }
.p-by { font-size: 13px; color: var(--mute); margin-top: 14px; } .p-by strong { color: var(--ink-2); font-weight: 500; }

/* services page */
.s-intro { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap); margin-bottom: var(--gap); }
.s-intro-txt { display: flex; flex-direction: column; gap: 18px; min-height: clamp(380px, 34vw, 500px); }
.s-intro-txt h2 { font-size: clamp(34px, 3.6vw, 56px); line-height: 1.02; letter-spacing: -.05em; color: var(--ink-2); max-width: 14ch; }
.s-intro-txt p.muted { max-width: 46ch; }
.s-intro-txt .dots i { color: var(--mute); } .s-intro-txt .dots i.hot { background: var(--accent); }
.s-intro-img { padding: 0; }
.s-rows { display: grid; gap: var(--gap); }
.s-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: var(--gap); }
.s-img { padding: 0; min-height: clamp(300px, 28vw, 420px); }
.s-txt { display: flex; flex-direction: column; gap: 14px; }
.s-txt h2 { font-size: clamp(28px, 2.8vw, 42px); letter-spacing: -.05em; }
.s-lead { font: 500 clamp(18px, 1.5vw, 22px)/1.3 var(--f-display); letter-spacing: -.02em; color: var(--ink-2); max-width: 40ch; }
.s-txt p.muted { font-size: 14px; max-width: 58ch; }
.s-num { position: absolute; right: 20px; top: 20px; display: flex; align-items: center; gap: 6px; font: 500 clamp(26px, 2.4vw, 36px)/1 var(--f-display); letter-spacing: -.04em; color: var(--accent); }
.s-word { color: var(--mute); justify-content: end; }

/* journal page */
.j-feat { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: var(--gap); margin-bottom: var(--gap); }
.j-feat-img { padding: 0; min-height: clamp(360px, 34vw, 520px); }
.j-feat-txt { display: flex; flex-direction: column; justify-content: space-between; gap: 24px; }
.j-feat-txt h2 { font-size: clamp(26px, 2.4vw, 38px); line-height: 1.08; letter-spacing: -.04em; color: var(--ink-2); }
.j-feat-txt p { font-size: 14px; }
.j-first { min-height: clamp(300px, 26vw, 400px); }
.j-welcome { display: flex; flex-direction: column; gap: 12px; }
.j-welcome h2 { font-size: clamp(30px, 3vw, 46px); line-height: 1; letter-spacing: -.05em; }

/* article */
.p-hero { padding: 0; height: clamp(280px, 42vw, 640px); margin-bottom: var(--gap); }
.p-grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: var(--gap); }
.p-intro p { font: 500 clamp(20px, 1.9vw, 28px)/1.3 var(--f-display); letter-spacing: -.03em; color: var(--ink-2); max-width: 36ch; }
.p-intro { min-height: 280px; display: flex; align-items: end; }
.p-side-img { padding: 0; min-height: 280px; }
.p-body h2 { font-size: 22px; letter-spacing: -.03em; margin: 28px 0 10px; }
.p-body h2:first-child { margin-top: 0; }
.p-body p, .p-body li { color: var(--mute); max-width: 62ch; }
.p-body ul { display: grid; gap: 4px; }
.p-body li::before { content: ""; display: inline-block; width: 4px; height: 4px; border-radius: 50%; background: var(--accent); margin: 0 10px 3px 0; }
.p-quote { display: flex; flex-direction: column; justify-content: space-between; gap: 20px; }
.p-quote p { font: 500 clamp(22px, 2vw, 30px)/1.15 var(--f-display); letter-spacing: -.04em; color: var(--ink-2); }
.p-quote .dots i { color: var(--mute); } .p-quote .dots i.hot { background: var(--accent); }
.p-nav { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap); margin: var(--gap) 0 clamp(80px, 10vw, 140px); }
.p-nav a { display: grid; gap: 10px; transition: background-color .4s; }
.p-nav a:hover { background: var(--card-2); }
.p-nav small { display: flex; align-items: center; gap: 8px; font-size: 12px; }
.p-nav .arr { width: 14px; height: 14px; color: var(--accent); }
.p-nav span { font: 500 clamp(18px, 1.6vw, 24px)/1.15 var(--f-display); letter-spacing: -.03em; }
.p-next { text-align: right; } .p-next small { justify-content: end; }

/* legal */
.l-grid { display: grid; grid-template-columns: minmax(200px, 1fr) minmax(0, 3fr); gap: var(--gap); align-items: start; }
.l-quick { display: grid; gap: 6px; position: sticky; top: 90px; }
.l-quick a { font-size: 15px; color: var(--ink-2); width: fit-content; }
.l-quick a:hover, .l-quick a[aria-current] { color: var(--accent); }
.l-sections { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap); }
.l-sections .card { min-height: 180px; display: flex; flex-direction: column; gap: 12px; }
.l-sections h2 { font-size: 20px; letter-spacing: -.03em; display: flex; gap: 10px; }
.l-sections h2 span { color: var(--accent); }
.l-sections p { font-size: 14px; }

/* auth */
.auth { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--gap); padding: 84px var(--pad) 0; }
.a-field { padding: 0; min-height: clamp(460px, 46vw, 640px); display: flex; align-items: end; }
.a-tag { position: relative; padding: 24px; font: 500 clamp(26px, 2.6vw, 40px)/1.05 var(--f-display); letter-spacing: -.04em; max-width: 14ch; }
.a-form { display: grid; align-content: center; justify-items: center; }
.a-form form { width: min(420px, 100%); display: grid; gap: var(--gap); }
.a-form h1 { font-size: clamp(28px, 2.6vw, 38px); letter-spacing: -.04em; }
.a-form h1 + p { margin-bottom: 16px; }
.a-sso { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap); }
.a-btn { height: 44px; border-radius: var(--radius); background: var(--card-2); font-size: 14px; transition: background-color .3s, color .3s; }
.a-btn:hover { background: var(--ink); color: var(--bg); }
.a-or { display: flex; align-items: center; gap: 12px; font-size: 12px; color: var(--mute); margin: 8px 0; }
.a-or::before, .a-or::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.a-submit { justify-content: center; margin-top: 6px; }
.a-alt { text-align: center; margin-top: 8px; } .a-alt a { color: var(--accent); }
.a-secure { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 18px; }
.a-secure .logo-mark { color: var(--accent); width: 12px; height: 12px; }
.a-code { font: 500 28px/1 var(--f-display); letter-spacing: .4em; text-align: center; }
.a-me { align-items: center; justify-content: center; }
.a-avatar { position: relative; width: 120px; height: 120px; border-radius: 50%; display: grid; place-items: center; background: var(--accent); color: var(--on-accent); font: 500 40px/1 var(--f-display); letter-spacing: -.04em; }
.a-logos { grid-column: 1 / -1; display: flex; align-items: center; gap: 24px; }
.a-logos ul { flex: 1; display: flex; justify-content: space-around; flex-wrap: wrap; gap: 12px 28px; }
.a-logos li { display: flex; align-items: center; gap: 8px; font: 500 17px/1 var(--f-display); letter-spacing: -.03em; color: var(--mute); }
.a-logos .logo-mark { width: 12px; height: 12px; }

/* 404 */
.nf-hero { position: relative; height: 100svh; min-height: 600px; overflow: hidden; display: grid; place-items: center; text-align: center; }
.nf-in { position: relative; display: grid; justify-items: center; gap: 18px; padding: 0 var(--pad); pointer-events: none; }
.nf-in a { pointer-events: auto; }
.nf-label { font-size: 15px; color: var(--accent); }
.nf-num { font-size: clamp(140px, 30vw, 420px); line-height: .8; letter-spacing: -.07em; color: var(--accent); }
.nf-text { max-width: 36ch; color: var(--ink-2); }

@media (max-width: 760px) {
  .s-intro, .s-row, .j-feat, .p-grid, .p-nav, .l-grid, .l-sections, .auth { grid-template-columns: minmax(0, 1fr); }
  .s-intro-txt { min-height: 0; } .s-intro-img { min-height: 260px; }
  .s-txt { padding-top: 60px; }
  .l-quick { position: relative; top: 0; }
  .p-next { text-align: left; } .p-next small { justify-content: start; }
  .a-field { min-height: 220px; }
  .a-logos { flex-direction: column; align-items: start; } .a-logos ul { justify-content: start; }
}

/* theme button + the switch: the new theme opens as a circle from the button (no fade) */
.head-r { display: flex; align-items: center; gap: 6px; }
.theme-btn { width: 40px; height: 40px; display: grid; place-items: center; color: var(--accent); border-radius: var(--radius); transition: color .4s; }
.theme-btn svg { transition: transform .8s var(--ease); }
:root[data-theme="light"] .theme-btn svg { transform: rotate(180deg); }
.menu-open .head .theme-btn { color: var(--on-accent); }
::view-transition-old(root), ::view-transition-new(root) { animation: none; mix-blend-mode: normal; }
::view-transition-new(root) { z-index: 2; }

/* even-spaced headings: the margins come from main.js 2b, so the letters carry no extra letter-spacing */
.evened { letter-spacing: 0 !important; word-spacing: -.08em; }

/* products grid: on a desktop with a mouse the hovered card grows, the others in its row and column give way (no fade) */
@media (min-width: 1101px) and (hover: hover) and (pointer: fine) {
  .work-grid { height: clamp(1080px, 86vw, 1500px); grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: minmax(0, 1.8fr) minmax(0, 1fr) minmax(0, 1fr);
    transition: grid-template-columns .9s var(--ease), grid-template-rows .9s var(--ease); }
  .work-grid > .card { min-height: 0; }
  .work-grid:has(> :nth-child(1):hover) { grid-template-columns: minmax(0, 1.22fr) minmax(0, 1.22fr) minmax(0, .56fr); grid-template-rows: minmax(0, 2.3fr) minmax(0, .85fr) minmax(0, .85fr); }
  .work-grid:has(> :nth-child(2):hover) { grid-template-columns: minmax(0, .8fr) minmax(0, .8fr) minmax(0, 1.4fr); grid-template-rows: minmax(0, 2.3fr) minmax(0, .85fr) minmax(0, .85fr); }
  .work-grid:has(> :nth-child(3):hover) { grid-template-columns: minmax(0, 1.6fr) minmax(0, .7fr) minmax(0, .7fr); grid-template-rows: minmax(0, 1.45fr) minmax(0, 1.5fr) minmax(0, .85fr); }
  .work-grid:has(> :nth-child(4):hover) { grid-template-columns: minmax(0, .7fr) minmax(0, 1.6fr) minmax(0, .7fr); grid-template-rows: minmax(0, 1.45fr) minmax(0, 1.5fr) minmax(0, .85fr); }
  .work-grid:has(> :nth-child(5):hover) { grid-template-columns: minmax(0, .7fr) minmax(0, .7fr) minmax(0, 1.6fr); grid-template-rows: minmax(0, 1.45fr) minmax(0, 1.5fr) minmax(0, .85fr); }
  .work-grid:has(> :nth-child(6):hover) { grid-template-columns: minmax(0, 1.6fr) minmax(0, .7fr) minmax(0, .7fr); grid-template-rows: minmax(0, 1.45fr) minmax(0, .85fr) minmax(0, 1.5fr); }
  .work-grid:has(> :nth-child(7):hover) { grid-template-columns: minmax(0, .6fr) minmax(0, 1.2fr) minmax(0, 1.2fr); grid-template-rows: minmax(0, 1.45fr) minmax(0, .85fr) minmax(0, 1.5fr); }
  .card-beta .beta-img { min-height: 0; }
}

/* text over photos: a soft dark floor under the words, so they read on bright metal too */
.card-feat::after, .card-prod::after, .b-photo::after, .j-feat-img::after, .plan-img::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to top, rgba(6, 8, 12, .78), rgba(6, 8, 12, .2) 46%, transparent 62%), linear-gradient(to bottom, rgba(6, 8, 12, .55), transparent 30%); }
.card-feat > span, .card-prod > span, .b-photo > p, .plan-img h3, .j-feat-img .icon-btn { z-index: 1; }
.card-top, .card-feat-txt, .card-prod-txt { z-index: 1; }
.card > .icon-btn { z-index: 2; }
.on-photo { text-shadow: 0 0 1px rgba(0, 0, 0, .6), 0 1px 3px rgba(0, 0, 0, .55), 0 0 18px rgba(0, 0, 0, .5); }

/* services: each panel's photo is its background - blurred and dark while closed, sharp when open (no text fade) */
.svc-p { position: relative; isolation: isolate; color: color-mix(in oklab, var(--photo-ink) 78%, transparent); }
.svc-p:hover { color: var(--photo-ink); }
.svc-p[aria-expanded="true"] { background: var(--card); color: var(--photo-ink); }
.svc-bg { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; transform: scale(1.12);
  filter: blur(10px) grayscale(1) brightness(.85); transition: filter 1s var(--ease), transform 1.2s var(--ease); }
.svc-p[aria-expanded="true"] .svc-bg { filter: blur(0) grayscale(1) brightness(1); transform: scale(1); }
.svc-p::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(to bottom, rgba(6, 8, 12, .7), rgba(6, 8, 12, .25) 45%, rgba(6, 8, 12, .7)), rgba(6, 8, 12, .3); transition: background-color 1s var(--ease); }
.svc-p[aria-expanded="true"]::after { background-color: rgba(6, 8, 12, .05); }
.svc-p > span { text-shadow: 0 0 1px rgba(0, 0, 0, .6), 0 1px 3px rgba(0, 0, 0, .55), 0 0 18px rgba(0, 0, 0, .5); }
.svc-p[aria-expanded="true"] .svc-n { color: var(--accent); }
.svc-p[aria-expanded="true"] .svc-body span { color: color-mix(in oklab, var(--photo-ink) 88%, transparent); max-width: 40ch; }

/* one shape: the ring (a torus core). Logo, dots, bullets and small marks are all rings. */
.hero-ring { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.hero-title { text-shadow: 0 0 1px color-mix(in oklab, var(--bg) 60%, transparent), 0 0 24px color-mix(in oklab, var(--bg) 55%, transparent); }
.logo-mark { border-width: 3px; }
.logo-mark::after { content: none; }
.dots i, .dots i.hot { width: 7px; height: 7px; background: none !important; border: 1.4px solid currentColor; }
.card-accent .dots i.hot { border-color: var(--on-accent); }
.svc-card .dots i.hot, .s-intro-txt .dots i.hot, .p-quote .dots i.hot { border-color: var(--accent); }
.dots i.hot { opacity: 1; }
.grip { background: none; border: 1.6px solid currentColor; border-radius: 50%; width: 11px; height: 11px; }
.lg { background: none !important; border: 1.6px solid var(--accent); width: 8px; height: 8px; } .lg1 { border-color: var(--ink); } .lg2 { border-color: var(--mute); }
.plan-list li::before, .c-offer li::before, .p-body li::before { width: 7px !important; height: 7px !important; background: none !important; border: 1.4px solid var(--accent); vertical-align: 1px; }
.plan-list li::before { border-color: var(--mute); }
.ring-dot::after { background: none; border: 5px solid var(--accent); width: 26px; height: 26px; }
.a-avatar { background: none; border: 3px solid var(--accent); color: var(--ink); }

/* one dust layer behind the hero AND the rings section: it sticks to the screen while both scroll by, so there is no edge between them */
/* hero -> rings: the hero stays pinned and the rings section slides over it from below.
   Every hero text moves up and is cut on a horizontal line at its own top edge (a hard mask, no fade). */
.sky { position: relative; }
.sky > .hero { position: sticky; top: 0; z-index: 0; }
.sky > .statement { position: relative; z-index: 1; }
/* the rings section is see-through: the pinned hero dust and the big ring stay visible behind it */
.statement-pin > .field { z-index: 0; }
.statement-pin > .prisms--back { z-index: 0; }
.statement-text { z-index: 1; }
/* hero rows: every line of hero text sits in its own clipped row. It rises out of the line under itself on load
   and slides out over the line on top of itself on scroll (main.js 2c + 5). No fade. */
.hero-card.row, .stat.row { overflow: clip; }
.js .hero-in { visibility: hidden; }
.js .hero-in.rows-ready { visibility: visible; }
.acc .ch, .acc { color: var(--accent); }
@media (prefers-reduced-motion: reduce) { .sky > .hero { position: relative; } }

/* the big statement keeps its distance from the rings and the dust: a soft glow in the page colour around the letters */
.statement-text { text-shadow: 0 0 2px var(--bg), 0 0 14px color-mix(in oklab, var(--bg) 85%, transparent), 0 0 36px color-mix(in oklab, var(--bg) 70%, transparent); }

/* no wide first frame: a heading is drawn only after its even spacing is written (main.js 2b) */
.js [data-align]:not(.evened), .js [data-scrub]:not(.evened) { visibility: hidden !important; }

/* the hero's two hairlines draw back on scroll too (the hero stays behind the see-through rings section) */
.hero-foot { border-top: 0; position: relative; }
.hero-foot::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--line); transform-origin: right; transform: scaleX(calc(1 - min(1, var(--hp, 0) * 2))); }
.hero-kicker { border-left: 0; position: relative; }
.hero-kicker::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 1px; background: var(--accent); transform-origin: top; transform: scaleY(calc(1 - min(1, var(--hp, 0) * 2.5))); }

/* the pinned hero always fits one screen: the title is sized by width AND height, the card no longer pushes the title down */
.hero { min-height: 520px; }
.hero-in { padding-top: clamp(70px, 10vh, 92px); padding-bottom: clamp(14px, 2.6vh, 24px); }
.hero-title { font-size: clamp(42px, min(9vw, 14.2vh), 156px); padding-bottom: clamp(12px, 2.6vh, 44px); }
.hero-card { grid-row: 1 / 3; align-self: start; }
.hero-card-img { height: clamp(80px, 14vh, 150px); }
.hero-foot { padding-top: clamp(12px, 2vh, 20px); }
.hero-lead { margin-bottom: clamp(8px, 1.6vh, 16px); }
@media (max-width: 760px) { .hero-title { font-size: clamp(38px, min(13.4vw, 8.4vh), 80px); } }
@media (max-width: 760px) and (max-height: 620px) { .hero-cta-row small { display: none; } .hero-lead { font-size: 14px; } .hero-kicker { font-size: 13px; } }

/* the theme's one shape (content/site.json "shape", on <html data-shape>): marks follow it.
   torus and knot = outlined rings, sphere = filled dot, rounded-cube = filled rounded square, capsule = filled pill */
svg.logo-mark { border: 0; border-radius: 0; width: 16px; height: 16px; flex: none; overflow: visible; }
.a-secure svg.logo-mark, .a-logos svg.logo-mark { width: 13px; height: 13px; }
html:is([data-shape="sphere"], [data-shape="rounded-cube"], [data-shape="capsule"]) :is(.dots i, .grip, .lg, .plan-list li::before, .c-offer li::before, .p-body li::before) { background: currentColor !important; border-color: transparent !important; }
html:is([data-shape="sphere"], [data-shape="rounded-cube"], [data-shape="capsule"]) .lg0 { background: var(--accent) !important; }
html:is([data-shape="sphere"], [data-shape="rounded-cube"], [data-shape="capsule"]) .lg1 { background: var(--ink) !important; }
html:is([data-shape="sphere"], [data-shape="rounded-cube"], [data-shape="capsule"]) .lg2 { background: var(--mute) !important; }
html:is([data-shape="sphere"], [data-shape="rounded-cube"], [data-shape="capsule"]) .dots i.hot { color: var(--accent); }
html:is([data-shape="sphere"], [data-shape="rounded-cube"], [data-shape="capsule"]) .card-accent .dots i.hot { color: var(--on-accent); }
html:is([data-shape="sphere"], [data-shape="rounded-cube"], [data-shape="capsule"]) :is(.plan-list, .c-offer, .p-body) li::before { color: var(--accent); }
html[data-shape="rounded-cube"] :is(.dots i, .grip, .lg, .plan-list li::before, .c-offer li::before, .p-body li::before, .ring-dot::after) { border-radius: 28% !important; }
html[data-shape="capsule"] :is(.dots i, .lg, .plan-list li::before, .c-offer li::before, .p-body li::before) { width: 5px !important; height: 9px !important; border-radius: 3px !important; }
html[data-shape="capsule"] .grip { width: 8px; height: 13px; border-radius: 4px; }
html[data-shape="capsule"] .ring-dot::after { width: 16px; height: 28px; border-radius: 8px; }
html:is([data-shape="sphere"], [data-shape="rounded-cube"], [data-shape="capsule"]) .ring-dot::after { background: var(--accent); border: 0; }

/* hero layout (Davor 9.11.): the title is one left-aligned column (~60 %), the shape lives free on the right;
   the release is a small link next to the numbers */
.hero-title { grid-column: 1 / 8; font-size: clamp(40px, min(7.3vw, 13vh), 138px); }
.hero-title .l2 { text-align: left; }
.hero-title .l3 { padding-left: 0; }
.hero-foot { align-items: end; justify-content: flex-start; }
.hero-stats { margin-left: auto; }
.hero-rel { display: inline-grid; grid-template-columns: auto auto; align-items: center; gap: 2px 10px; font-size: 13px; color: var(--ink-2); padding: 8px 0; }
.hero-rel strong { font-weight: 500; color: var(--ink); grid-row: 1; }
.hero-rel span { grid-column: 1; color: var(--accent); font-size: 12px; }
.hero-rel span::before { content: "// "; }
.hero-rel .arr { grid-column: 2; grid-row: 1 / 3; color: var(--accent); width: 18px; height: 18px; transition: transform .4s var(--ease); }
.hero-rel:hover .arr { transform: translateX(4px); }
.hero .btn-row:has(.hero-rel) { margin-left: clamp(16px, 3vw, 48px); }
@media (max-width: 1100px) { .hero-title { grid-column: 1 / -1; } }
@media (max-width: 760px) {
  .hero-title { align-self: start; padding-top: clamp(16px, 4vh, 40px); font-size: clamp(38px, min(12.6vw, 7.6vh), 72px); }
  .hero .btn-row:has(.hero-rel) { display: none; }
}
@media (max-width: 760px) and (max-height: 620px) { .hero-title { padding-top: 6px; font-size: clamp(34px, 7vh, 60px); } }
.hero-title { font-size: clamp(40px, min(6.5vw, 12.4vh), 124px); }
@media (max-width: 760px) { .hero-title .l2 { padding-left: 0; } .hero-stats { margin-left: 0; } .hero-foot { align-items: start; } }
@media (max-width: 760px) { .hero-title { font-size: clamp(38px, min(12.4vw, 7.4vh), 72px); } }
@media (max-width: 760px) and (max-height: 620px) { .hero-title { font-size: clamp(34px, 7vh, 60px); } }

/* products grid: texts keep one width in every state (no re-wrapping while the grid moves), photos always cover the card */
@media (min-width: 1101px) {
  .card-prod-txt { right: auto; width: 240px; max-width: none; }
  .card-feat-txt { right: auto; width: min(440px, 60vw); }
}
.work-grid .card > img { width: 100%; height: 100%; object-fit: cover; }
/* the Flux Router photo has an empty dark right half: crop to the server */
.work-grid img[src*="prod-1"] { object-position: 0% 50%; transform-origin: 0% 40%; scale: 2.2; }

/* ONE ENTRANCE (all pages): each line of text rises out of the line under itself; one duration, easing and step */
:root { --line-dur: 1.1s; --line-ease: cubic-bezier(.16, 1, .3, 1); --line-step: .07s; }
.ch { display: inline-block; }
span.row { display: block; overflow: clip; padding: .12em 0 .16em; margin: -.12em 0 -.16em; }
span.row > .row-in { display: block; }
.btn-row { display: inline-block; overflow: visible clip; padding: 6px; margin: -6px; vertical-align: middle; }
.row-box { overflow: clip; }
html.js:not(.lines-ready) :is(main, .foot) { visibility: hidden; }
.js [data-lines-el] .row-in, .js .btn-row > .row-in { translate: 0 calc(var(--rh, 1.2em) + 4px); }
.js [data-lines-el].lines-in .row-in, .js .lines-in.row-in { translate: 0 0; transition: translate var(--line-dur) var(--line-ease) calc(var(--d0, 0s) + var(--d, 0s)); }
@media (prefers-reduced-motion: reduce) { .js [data-lines-el] .row-in, .js .btn-row > .row-in { translate: 0 0 !important; } }
[data-mode='one'] span.row > .row-in { white-space: nowrap; }
:is(.plan-list, .c-offer, .p-body) li { position: relative; padding-left: 17px; } :is(.plan-list, .c-offer, .p-body) li::before { position: absolute; left: 0; top: .5em; margin: 0 !important; }

/* pages split from the Home: about facts, pricing comparison */
.facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gap); margin: 0; }
.fact { display: grid; gap: 40px; align-content: space-between; min-height: 200px; margin: 0; }
.fact dd { margin: 0; }
.cmp { padding: 0; overflow-x: auto; }
.cmp-t { width: 100%; min-width: 560px; border-collapse: collapse; font-size: 15px; }
.cmp-t :is(th, td) { padding: 16px 20px; text-align: left; border-top: 1px solid var(--line); font-weight: 400; }
.cmp-t thead th { border-top: 0; font: 500 18px/1.2 var(--f-display); color: var(--ink-2); }
.cmp-t tbody th { color: var(--mute); }
.cmp-price td { font: 500 26px/1 var(--f-display); color: var(--ink-2); }
.cmp-t td[data-v="yes"], .cmp-t td[data-v="no"] { font-size: 0; }
.cmp-t td[data-v="yes"]::before { content: ""; display: inline-block; width: 12px; height: 12px; border: 3px solid var(--accent); border-radius: 50%; }
.cmp-t td[data-v="no"]::before { content: ""; display: inline-block; width: 14px; height: 1.5px; background: var(--mute); vertical-align: middle; }
#compare .sec-side { display: flex; justify-content: flex-end; }
.contact.sec--top { padding-top: clamp(110px, 12vw, 170px); }
@media (max-width: 900px) { .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); } .fact { min-height: 150px; } }

/* 10.11. review at 320-1440: balanced leads, roomier small screens */
.sec-lead { text-wrap: balance; }
@media (max-width: 760px) {
  .bento > .b-uptime, .bento > .b-score { grid-column: 1 / -1 !important; }
  .b-uptime { min-height: 160px; }
  .cmp-t { min-width: 500px; font-size: 14px; }
  .cmp-t :is(th, td) { padding: 12px 14px; }
}
@media (max-width: 520px) {
  .facts { grid-template-columns: 1fr; }
  .fact { min-height: 0; gap: 14px; }
}
@media (max-width: 420px) {
  .proc-bar { white-space: nowrap; padding-inline: 16px; }
  .proc-bar .pips { display: none; }
  .foot-addr { font-size: 12px; }
}