@font-face { font-family: "Geist"; src: url("../fonts/Geist-Variable.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Mona Sans"; src: url("../fonts/MonaSans-Variable.woff2") format("woff2"); font-weight: 200 900; font-stretch: 75% 125%; font-display: swap; }
@font-face { font-family: "Geist Mono"; src: url("../fonts/GeistMono-Variable.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
:root {
	--ink: #111118;
	--ink-2: #4a4a56;
	--mute: #7d7d8a;
	--line: #e3e3e0;
	--line-2: #c9c9c5;
	--bg: #ffffff;
	--stone: #f6f4fd;
	--stone-line: #e6e1f5;
	--plum: #4a0cba;
	--violet: #6011ee;
	--violet-ink: #4a0cba;
	--violet-soft: #efe8ff;
	--green: #0f8a5f;
	--display: "Mona Sans", "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	--sans: "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	--mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
	--wrap: 1200px;
	--gut: 24px;
	--r: 6px;
	--ease: cubic-bezier(.2, .7, .2, 1);
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 88px; }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--sans); font-size: 16.5px; line-height: 1.55; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden; }
img { max-width: 100%; height: auto; display: block; }
main { overflow-x: clip; }
a { color: inherit; }
button, input { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--violet); outline-offset: 3px; border-radius: 4px; }
.skip { position: absolute; left: -9999px; top: 12px; z-index: 100; background: var(--ink); color: #fff; padding: 10px 16px; border-radius: var(--r); text-decoration: none; }
.skip:focus { left: 12px; }
.wrap { position: relative; width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gut); }

h1, h2, h3, h4 { margin: 0; font-weight: 650; letter-spacing: -0.025em; line-height: 1.1; }
.display { font-size: clamp(48px, 7.4vw, 108px); font-weight: 650; letter-spacing: -0.045em; line-height: .96; text-wrap: balance; }
.display-md { font-size: clamp(40px, 5vw, 72px); font-weight: 650; letter-spacing: -0.042em; line-height: 1; text-wrap: balance; }
.display-sm { font-size: clamp(28px, 3.6vw, 44px); font-weight: 650; letter-spacing: -0.03em; line-height: 1.06; text-wrap: balance; }
.h2 { font-size: clamp(36px, 4.6vw, 64px); font-weight: 650; letter-spacing: -0.032em; line-height: 1.04; text-wrap: balance; }
.h3 { font-size: 18.5px; font-weight: 650; letter-spacing: -0.02em; line-height: 1.25; }
.eyebrow, .menu-label, .foot-label { margin: 0 0 14px; font-size: 11.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--mute); }
.eyebrow a { color: var(--ink); text-decoration: none; }
.eyebrow a:hover { color: var(--violet); }
.eyebrow span { margin: 0 8px; }
.num { font-weight: 700; letter-spacing: -0.03em; line-height: 1; font-variant-numeric: tabular-nums; }
.lead, .sec-lead, .sec-sub { margin: 20px 0 0; font-size: 18px; line-height: 1.5; color: var(--ink-2); max-width: 58ch; text-wrap: pretty; }
.sec-lead a, .sec-sub a { color: var(--violet); text-decoration: none; font-weight: 550; }
.lead-h2 { font-weight: 450; letter-spacing: -0.01em; line-height: 1.5; }
.lines .ln { display: block; }
.lines .mute { color: inherit; }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 44px; padding: 0 20px; border-radius: var(--r); border: 1px solid transparent; font-size: 15px; font-weight: 600; letter-spacing: -0.005em; text-decoration: none; white-space: nowrap; cursor: pointer; transition: background-color .18s, border-color .18s, color .18s; }
.btn-sm { height: 36px; padding: 0 14px; font-size: 14px; }
.btn-lg { height: 50px; padding: 0 24px; font-size: 16px; }
.btn-primary { background: var(--violet); color: #fff; }
.btn-primary:hover { background: var(--violet-ink); }
.btn-ghost { background: #fff; border-color: var(--line-2); color: var(--ink); }
.btn-ghost:hover { border-color: var(--ink); }
.btn-dark { background: var(--ink); color: #fff; }
.btn-dark:hover { background: #26262f; }
.btn-white { background: #fff; color: var(--plum); }
.btn-white:hover { background: #efe9ff; }
.btn-outline-white { border-color: rgba(255, 255, 255, .4); color: #fff; }
.btn-outline-white:hover { border-color: #fff; }
.link-arrow { font-weight: 600; text-decoration: none; color: var(--ink); border-bottom: 1px solid var(--line-2); padding-bottom: 2px; transition: border-color .15s, color .15s; }
.link-arrow::after { content: " \2192"; }
.link-arrow:hover { color: var(--violet); border-color: var(--violet); }

/* ---------- nav ---------- */
.nav-wrap { position: sticky; top: 0; z-index: 50; background: rgba(255, 255, 255, .92); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border-bottom: 1px solid var(--line); }
.nav { position: relative; display: flex; align-items: center; gap: 8px; max-width: var(--wrap); height: 64px; margin: 0 auto; padding: 0 var(--gut); }
.nav-logo { flex: none; display: flex; align-items: center; margin-right: 20px; }
.nav-logo img { width: 134px; height: auto; }
.nav-links { display: flex; align-items: center; gap: 2px; margin: 0; padding: 0; list-style: none; }
.nav-link { display: inline-flex; align-items: center; height: 36px; padding: 0 11px; border: 0; border-radius: var(--r); background: none; font-size: 14.5px; font-weight: 500; color: var(--ink-2); text-decoration: none; cursor: pointer; transition: color .15s, background-color .15s; }
.nav-link:hover, .nav-link[aria-expanded="true"] { color: var(--ink); background: var(--stone); }
button.nav-link::after { content: ""; width: 6px; height: 6px; margin-left: 7px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-2px) rotate(45deg); opacity: .6; transition: transform .2s var(--ease); }
button.nav-link[aria-expanded="true"]::after { transform: translateY(1px) rotate(225deg); }
.nav-actions { flex: none; display: flex; align-items: center; gap: 8px; margin-left: auto; }
.nav-signin { padding: 0 12px; font-size: 14.5px; font-weight: 500; color: var(--ink-2); text-decoration: none; }
.nav-signin:hover { color: var(--ink); }
.nav-burger { display: none; position: relative; width: 36px; height: 36px; border: 1px solid var(--line); border-radius: var(--r); background: #fff; cursor: pointer; padding: 0; }
.nav-burger span { position: absolute; left: 10px; width: 16px; height: 1.5px; background: var(--ink); transition: transform .25s var(--ease), top .25s var(--ease); }
.nav-burger span:first-child { top: 14px; }
.nav-burger span:last-child { top: 20.5px; }
.nav-burger[aria-expanded="true"] span:first-child { top: 17.25px; transform: rotate(45deg); }
.nav-burger[aria-expanded="true"] span:last-child { top: 17.25px; transform: rotate(-45deg); }
.has-menu { position: static; }
.has-menu.is-small { position: relative; }
.menu { position: absolute; top: calc(100% + 8px); left: var(--gut); right: var(--gut); border: 1px solid var(--stone-line); border-radius: 22px; background: #fff; box-shadow: 0 32px 70px -28px rgba(74, 12, 186, .38), 0 10px 24px -16px rgba(74, 12, 186, .16); opacity: 0; visibility: hidden; transform: translateY(-6px); transform-origin: 50% 0; transition: opacity .12s var(--ease), transform .14s var(--ease), visibility 0s linear .14s; will-change: opacity, transform; }
.menu.open { opacity: 1; visibility: visible; transform: none; transition: opacity .14s var(--ease), transform .18s var(--ease), visibility 0s; }
.menu::before { content: ""; position: absolute; left: 0; right: 0; top: -12px; height: 12px; }
.menu-products { display: grid; grid-template-columns: minmax(0, 1fr) 236px; gap: 10px; padding: 12px; }
.menu-small { left: 0; right: auto; top: calc(100% + 22px); width: 324px; padding: 8px; transform-origin: 20% 0; }
.menu-small::before { top: -24px; height: 24px; }
.menu-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 4px; padding: 14px 2px 8px 4px; }
.menu-col { min-width: 0; }
.menu-col .menu-label { margin: 0 0 10px; padding: 0 8px; font-size: 11px; }
.menu-col ul, .menu-small ul { list-style: none; margin: 0; padding: 0; }
.nv-item { display: grid; grid-template-columns: 30px minmax(0, 1fr); column-gap: 10px; align-items: center; min-height: 42px; padding: 6px 8px; border-radius: 12px; color: var(--ink); text-decoration: none; transition: background-color .16s var(--ease); }
.nv-ic { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 9px; background-color: var(--violet-soft); box-shadow: inset 0 0 0 1px rgba(96, 17, 238, .09); color: var(--violet); transition: background-color .16s var(--ease), color .16s var(--ease), transform .22s var(--ease); }
.nv-svg { display: block; width: 17px; height: 17px; }
.nv-name { font-size: 14px; font-weight: 550; letter-spacing: -0.012em; line-height: 1.22; }
.nv-item[data-desc]::after { content: attr(data-desc); grid-column: 2; margin-top: 1px; font-size: 12.5px; line-height: 1.32; color: var(--mute); }
.nv-item[data-desc] .nv-ic { grid-row: span 2; }
.menu-col .nv-item::after { content: none; }
.menu-col .nv-item .nv-ic { grid-row: auto; }
.menu-col .nv-item { column-gap: 9px; padding: 6px 6px; }
.menu-col .nv-name { font-size: 13.5px; letter-spacing: -0.014em; white-space: nowrap; }
.nv-item:hover, .nv-item:focus-visible { background-color: #f6f2ff; }
.nv-item:hover .nv-ic, .nv-item:focus-visible .nv-ic { background-color: var(--violet); color: #fff; transform: scale(1.05); }
.nv-item:focus-visible, .nv-pv:focus-visible { outline: 2px solid var(--violet); outline-offset: 1px; }
.nv-pv { position: relative; display: flex; flex-direction: column; min-width: 0; overflow: hidden; padding: 20px 20px 16px; border-radius: 14px; color: #fff; text-decoration: none; background-color: var(--plum); background-image: radial-gradient(95% 65% at 100% 0%, rgba(124, 58, 237, .72), transparent 72%), radial-gradient(80% 60% at 0% 100%, rgba(96, 17, 238, .5), transparent 72%); }
.nv-pv-big { position: absolute; right: -36px; bottom: 36px; width: 176px; height: 176px; color: #c4b5fd; opacity: .17; pointer-events: none; transition: opacity .2s var(--ease), transform .4s var(--ease); }
.nv-pv-big .nv-svg { width: 100%; height: 100%; stroke-width: .9; }
.nv-pv-in { position: relative; display: block; margin-bottom: 16px; transition: opacity .11s linear, transform .22s var(--ease); }
.nv-pv-ic { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border: 1px solid rgba(255, 255, 255, .22); border-radius: 13px; background: rgba(255, 255, 255, .12); }
.nv-pv-ic .nv-svg { width: 22px; height: 22px; }
.nv-pv-t { display: block; margin-top: 16px; font-family: var(--display); font-stretch: 116%; font-size: 21px; font-weight: 520; letter-spacing: -0.026em; line-height: 1.14; }
.nv-pv-d { display: block; margin-top: 8px; font-size: 14px; line-height: 1.42; color: rgba(255, 255, 255, .78); }
.nv-pv-go { position: relative; display: flex; align-items: center; justify-content: space-between; margin-top: auto; padding-top: 13px; border-top: 1px solid rgba(255, 255, 255, .16); font-size: 13.5px; font-weight: 600; }
.nv-pv-go i { font-style: normal; transition: transform .2s var(--ease); }
.nv-pv:hover .nv-pv-go i { transform: translateX(3px); }
.nv-pv.swap .nv-pv-in { opacity: 0; transform: translateY(6px); }
.nv-pv.swap .nv-pv-big { opacity: 0; transform: translateY(10px) scale(.96); }
@keyframes nvrise { from { opacity: 0; translate: 0 8px; } }
.menu-small.open li { animation: nvrise .3s var(--ease) backwards; }
.menu-small.open li:nth-child(2) { animation-delay: .03s; }
.menu-small.open li:nth-child(3) { animation-delay: .06s; }
.menu-small.open li:nth-child(4) { animation-delay: .09s; }
.menu-small.open li:nth-child(5) { animation-delay: .12s; }
body::after { content: ""; position: fixed; inset: 0; z-index: 40; background: rgba(22, 8, 56, .34); opacity: 0; pointer-events: none; transition: opacity .22s var(--ease); }
.menu-open body::after { opacity: 1; }
@media (max-width: 1240px) {
	.menu-products { grid-template-columns: minmax(0, 1fr); }
	.nv-pv { flex-direction: row; padding: 12px 16px; }
	.nv-pv-big, .nv-pv-in { display: none; }
	.nv-pv-go { flex: 1; margin: 0; padding: 0; border: 0; }
}
.sheet { position: absolute; top: 100%; left: 0; right: 0; max-height: calc(100dvh - 64px); overflow-y: auto; border-bottom: 1px solid var(--line); background: #fff; padding: 8px var(--gut) 20px; opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity .2s var(--ease), transform .25s var(--ease), visibility 0s linear .25s; }
.sheet.open { opacity: 1; visibility: visible; transform: none; transition: opacity .2s var(--ease), transform .25s var(--ease), visibility 0s; }
.sheet-group { border-bottom: 1px solid var(--line); }
.sheet-group summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; padding: 15px 0; font-weight: 600; }
.sheet-group summary::-webkit-details-marker { display: none; }
.sheet-group summary::after { content: ""; width: 8px; height: 8px; margin-right: 4px; border-right: 2px solid var(--mute); border-bottom: 2px solid var(--mute); transform: translateY(-2px) rotate(45deg); transition: transform .3s var(--ease); }
.sheet-group[open]:not(.shut) summary::after { transform: translateY(2px) rotate(225deg); }
.sheet-group ul, .sheet-links { list-style: none; margin: 0; padding: 0; }
.sheet-group li:last-child { padding-bottom: 10px; }
.sheet .nv-item { margin: 0 -8px; }
.sheet-links { padding: 10px 0 12px; }
.sheet.open .sheet-group, .sheet.open .sheet-links, .sheet.open .sheet-actions { animation: nvrise .32s var(--ease) backwards; }
.sheet.open .sheet-group:nth-child(2) { animation-delay: .03s; }
.sheet.open .sheet-group:nth-child(3) { animation-delay: .06s; }
.sheet.open .sheet-group:nth-child(4) { animation-delay: .09s; }
.sheet.open .sheet-links { animation-delay: .12s; }
.sheet.open .sheet-actions { animation-delay: .15s; }
.sheet-group[open]:not(.shut) li { animation: nvrise .3s var(--ease) backwards; }
.sheet-group[open]:not(.shut) li:nth-child(2) { animation-delay: .03s; }
.sheet-group[open]:not(.shut) li:nth-child(3) { animation-delay: .06s; }
.sheet-group[open]:not(.shut) li:nth-child(4) { animation-delay: .09s; }
.sheet-group[open]:not(.shut) li:nth-child(n + 5) { animation-delay: .12s; }
.sheet-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding-top: 14px; border-top: 1px solid var(--line); }

/* ---------- sections ---------- */
.sec { padding: 104px 0; }
.sec:not(.band):not(.sec-tint) + .sec:not(.band):not(.sec-tint) { border-top: 1px solid var(--line); }
.band { margin: 0; border: 0; border-radius: clamp(22px, 2.6vw, 34px); background: var(--stone); }
.band .cells, .band .cells > div, .band .facts, .band .facts li, .band .tour-nav, .band .faq, .band .faq details { border-color: var(--stone-line); }
.band + .band, .sec-tint + .sec-tint { margin-top: clamp(10px, 1.4vw, 22px); }
.sec-head { max-width: 720px; }
.sec-head-wide { max-width: 820px; }
.sec-more { margin: 40px 0 0; }
.split { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 64px; align-items: center; }
.split-rev .sec-head { order: 2; }
.split-faq { align-items: start; }
.ticks { list-style: none; margin: 26px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 22px; }
.ticks li { position: relative; padding-left: 20px; font-size: 15px; font-weight: 550; }
.ticks li::before { content: ""; position: absolute; left: 0; top: 7px; width: 10px; height: 5px; border-left: 1.75px solid var(--green); border-bottom: 1.75px solid var(--green); transform: rotate(-45deg); }
.facts { list-style: none; margin: 28px 0 0; padding: 0; border-top: 1px solid var(--line); }
.facts li { padding: 13px 0; border-bottom: 1px solid var(--line); font-size: 15.5px; color: var(--ink-2); text-wrap: pretty; }
.cells { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 56px; border-top: 1px solid var(--line); }
.cells > div { min-width: 0; padding: 28px 28px 8px 0; }
.cells > div + div { border-left: 1px solid var(--line); padding-left: 28px; }
.cells h3 { font-size: 18px; font-weight: 650; letter-spacing: -0.02em; }
.cells p { margin: 10px 0 0; font-size: 15.5px; color: var(--ink-2); text-wrap: pretty; }
.strip { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.strip > li, .strip > div { min-width: 0; padding: 22px 24px 22px 0; }
.strip > li + li, .strip > div + div { border-left: 1px solid var(--line); padding-left: 24px; }
.strip strong { display: block; font-size: clamp(26px, 2.6vw, 34px); font-weight: 700; letter-spacing: -0.03em; line-height: 1; color: var(--ink); font-variant-numeric: tabular-nums; }
.strip span { display: block; margin-top: 8px; font-size: 14px; color: var(--mute); }
ul.strip { list-style: none; margin: 0; padding: 0; }

/* ---------- frames ---------- */
.browser { border: 1px solid var(--line-2); border-radius: 10px; overflow: hidden; background: #fff; }
.browser-bar { display: flex; align-items: center; gap: 12px; height: 40px; padding: 0 14px; border-bottom: 1px solid var(--line); background: #fbfafe; }
.dots { display: flex; gap: 6px; }
.dots i { width: 10px; height: 10px; border-radius: 50%; border: 1px solid var(--line-2); background: #fff; }
.addr { display: inline-flex; align-items: center; gap: 7px; margin: 0 auto; min-width: 220px; height: 26px; padding: 0 12px; border: 1px solid var(--line); border-radius: 5px; background: #fff; font-family: var(--mono); font-size: 12px; color: var(--ink-2); }
.addr svg { width: 11px; height: 11px; fill: none; stroke: var(--green); stroke-width: 1.5; flex: none; }
.browser-screen { position: relative; overflow: hidden; aspect-ratio: 16 / 10; background: #fff; }
.browser-screen img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; }
.laptop { position: relative; margin: 0 auto; }
/* MacBook Pro proportions: bezels near 1% of the width, a camera notch, rounded screen corners at the top only. Everything is in % so it holds at every size. */
.laptop-lid { position: relative; padding: .85% .85% 1.25%; border: 1px solid #000; border-radius: 1.5% 1.5% .35% .35% / 2.3% 2.3% .55% .55%; background: #0b0b0f; box-shadow: 0 0 0 1px #8e8e98; }
.laptop-lid::before { content: ""; position: absolute; z-index: 2; top: 0; left: 50%; width: 9.6%; aspect-ratio: 3.6; transform: translateX(-50%); border-radius: 0 0 8% 8% / 0 0 30% 30%; background: radial-gradient(circle at 50% 46%, #232a3a 0, #232a3a 3%, transparent 3.6%), #0b0b0f; }
.laptop-screen { position: relative; overflow: hidden; border-radius: .75% .75% 0 0 / 1.2% 1.2% 0 0; background: #fff; aspect-ratio: 16 / 10; }
.laptop-screen img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; }
.laptop-base { position: relative; height: 0; padding-bottom: 1.7%; margin: 0 -5%; border: 1px solid #c3c3cc; border-top: 0; border-radius: 2px 2px 12px 12px; background: linear-gradient(#ececf1, #d4d4db 55%, #bcbcc6); }
.laptop-base::before { content: ""; position: absolute; top: 0; left: 50%; width: 14%; height: 40%; transform: translateX(-50%); border-radius: 0 0 8px 8px; background: linear-gradient(#c2c2cb, #d8d8df); }
.split .laptop { padding: 0 5%; }
.phero-media .laptop { padding: 0 5%; }

/* ---------- home hero ---------- */
.hero { padding: 64px 0 56px; }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1.18fr) minmax(0, 1fr); gap: 48px; align-items: center; }
.hero-title { font-size: clamp(50px, 5.5vw, 84px); font-weight: 650; letter-spacing: -0.048em; line-height: .96; text-wrap: balance; }
.hero-kw { display: block; margin: 26px 0 0; font-size: clamp(19px, 1.7vw, 22px); font-weight: 500; letter-spacing: -0.015em; line-height: 1.35; color: var(--ink); max-width: 34ch; text-wrap: pretty; }
.hero-lead { margin: 14px 0 0; font-size: 17px; color: var(--ink-2); max-width: 52ch; text-wrap: pretty; }
.hero-cta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 30px; }
.hero-note { margin: 18px 0 0; font-size: 13.5px; color: var(--mute); }
.hero-note b { color: var(--ink); font-weight: 600; }
.hero-facts { margin-top: 64px; }

/* ---------- the rebrandable store ---------- */
.sm-wrap { position: relative; }
.sm { --b: #6011ee; --bt: #fff; position: relative; border: 1px solid var(--line-2); border-radius: 10px; overflow: hidden; background: #fff; font-size: 12px; line-height: 1.3; color: #16161c; }
.sm-url { display: flex; align-items: center; gap: 10px; height: 36px; padding: 0 12px; border-bottom: 1px solid var(--line); background: #fbfafe; }
.sm-url .dots i { width: 9px; height: 9px; }
.sm-url .addr { height: 24px; font-size: 11.5px; min-width: 0; }
.sm-url .addr b { font-weight: 500; color: var(--ink); }
.sm-top { display: flex; align-items: center; gap: 14px; height: 46px; padding: 0 18px; border-bottom: 1px solid var(--line); }
.sm-logo { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 13.5px; letter-spacing: -0.02em; white-space: nowrap; }
.sm-mark { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 5px; background: var(--b); color: var(--bt); font-size: 12px; font-weight: 700; transition: background-color .5s var(--ease); }
.sm-nav { display: flex; gap: 14px; margin-left: 12px; color: #5b5b66; font-size: 12px; }
.sm-cta { margin-left: auto; height: 26px; padding: 0 10px; display: inline-flex; align-items: center; border-radius: 4px; background: var(--b); color: var(--bt); font-weight: 600; font-size: 11.5px; transition: background-color .5s var(--ease); }
.sm-hero { padding: 26px 22px 24px; background: var(--b); color: var(--bt); transition: background-color .5s var(--ease); }
.sm-hero h3 { font-size: 22px; font-weight: 700; letter-spacing: -0.03em; line-height: 1.05; max-width: 18ch; color: inherit; }
.sm-hero p { margin: 8px 0 0; font-size: 12.5px; opacity: .85; max-width: 40ch; }
.sm-hero span { display: inline-flex; align-items: center; height: 28px; margin-top: 14px; padding: 0 12px; border-radius: 4px; background: var(--bt); color: var(--b); font-weight: 600; font-size: 11.5px; transition: color .5s var(--ease); }
.sm-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; padding: 16px 18px 18px; }
.sm-card { border: 1px solid var(--line); border-radius: 7px; padding: 12px 12px 12px; }
.sm-card i { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 6px; background: color-mix(in srgb, var(--b) 12%, #fff); transition: background-color .5s var(--ease); }
.sm-card i svg { width: 14px; height: 14px; fill: none; stroke: var(--b); stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; transition: stroke .5s var(--ease); }
.sm-card b { display: block; margin-top: 10px; font-size: 12.5px; font-weight: 650; letter-spacing: -0.01em; }
.sm-card em { display: block; margin-top: 3px; font-style: normal; font-size: 12px; color: #5b5b66; font-variant-numeric: tabular-nums; }
.sm-card em strong { color: #16161c; font-weight: 700; }
.sm-card span { display: inline-flex; align-items: center; justify-content: center; width: 100%; height: 26px; margin-top: 10px; border-radius: 4px; border: 1px solid var(--b); color: var(--b); font-weight: 600; font-size: 11.5px; transition: color .5s var(--ease), border-color .5s var(--ease); }
.sm-foot { display: flex; justify-content: space-between; padding: 10px 18px; border-top: 1px solid var(--line); color: #7d7d8a; font-size: 11px; }
.sm-ctl { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-top: 14px; }
.sm-ctl label { font-size: 13px; font-weight: 600; color: var(--ink-2); }
.sm-ctl input { width: 190px; height: 36px; padding: 0 12px; border: 1px solid var(--line-2); border-radius: var(--r); background: #fff; color: var(--ink); font-size: 14px; -webkit-appearance: none; appearance: none; }
.sm-ctl input:focus { outline: 2px solid var(--violet); outline-offset: 1px; border-color: transparent; }
.sm-swatches { display: flex; gap: 6px; }
.sm-swatches button { width: 24px; height: 24px; padding: 0; border: 2px solid #fff; border-radius: 50%; background: var(--c); cursor: pointer; outline: 1px solid var(--line-2); }
.sm-swatches button[aria-pressed="true"] { outline: 2px solid var(--ink); }
.sm-note { margin: 0; font-size: 12.5px; color: var(--mute); }

/* ---------- panel tour ---------- */
.tour-nav { display: flex; flex-wrap: wrap; gap: 0 4px; margin: 0 0 22px; border-bottom: 1px solid var(--line); }
.tour-nav button { position: relative; display: inline-flex; flex-direction: column; align-items: stretch; gap: 0; padding: 0 12px 14px; border: 0; background: none; font-size: 14.5px; font-weight: 500; color: var(--mute); cursor: pointer; transition: color .2s; }
.tour-nav button:first-child { padding-left: 0; }
.tour-nav button:hover, .tour-nav button[aria-selected="true"] { color: var(--ink); }
.tour-bar { position: absolute; left: 0; right: 0; bottom: -2px; height: 3px; background: transparent; overflow: hidden; }
.tour-nav button:first-child .tour-bar { left: 0; }
.tour-bar i { display: block; height: 100%; width: 0; background: var(--violet); }
.tour-nav button[aria-selected="true"] .tour-bar { background: var(--line-2); }
.tour-nav button[aria-selected="true"] .tour-bar i { width: calc(var(--p, 1) * 100%); }
.tour-view { position: absolute; inset: 0; }
.tour-page { position: absolute; inset: 0; overflow: hidden; pointer-events: none; opacity: 0; visibility: hidden; transition: opacity .5s var(--ease), visibility 0s linear .5s; }
.tour-page.on { opacity: 1; visibility: visible; transition: opacity .5s var(--ease), visibility 0s; }
.tour .laptop-screen .tour-page img { width: 100%; height: auto; max-width: none; object-fit: initial; }
.tour .laptop-screen .tour-page .tour-side { position: sticky; top: 0; z-index: 2; width: 19.4444%; }
.tour .laptop-screen .tour-page .tour-full.has-side { margin-top: -62.5%; }
.tour-cap { margin: 18px 0 0; font-size: 15.5px; color: var(--ink-2); min-height: 1.5em; }

/* ---------- app showcase ---------- */
.show { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 64px; align-items: start; margin-top: 56px; }
.show-tabs { display: flex; flex-direction: column; border-top: 1px solid var(--line); }
.show-tabs button { display: flex; align-items: center; gap: 12px; width: 100%; height: 44px; padding: 0 10px 0 0; border: 0; border-bottom: 1px solid var(--line); background: none; text-align: left; font-size: 14.5px; font-weight: 500; color: var(--ink-2); cursor: pointer; transition: color .2s; }
.show-tabs button:hover { color: var(--ink); }
.show-tabs button[aria-selected="true"] { color: var(--ink); font-weight: 650; }
.app-ico { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 6px; background: color-mix(in srgb, var(--c) 12%, #fff); }
.show-tabs button[aria-selected="true"] .app-ico { background: var(--c); }
.app-ico svg { width: 15px; height: 15px; fill: none; stroke: var(--c); stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.show-tabs button[aria-selected="true"] .app-ico svg { stroke: #fff; }
.show-stage { position: sticky; top: 88px; padding: 0 4%; }
.show-cap { margin: 18px 0 0; font-size: 15.5px; color: var(--ink-2); min-height: 3em; }
.show-cap b { color: var(--ink); font-weight: 650; }
.c-receptionist { --c: #6011ee; }
.c-content { --c: #db2777; }
.c-seo { --c: #059669; }
.c-visibility { --c: #2563eb; }
.c-crm { --c: #c026d3; }
.c-invoicing { --c: #0284c7; }
.c-reputation { --c: #ea580c; }
.c-appointments { --c: #0d9488; }
.c-email { --c: #e11d48; }
.c-website { --c: #4f46e5; }
.c-phone { --c: #16a34a; }
.c-linkbio { --c: #9333ea; }
.c-esign { --c: #334155; }
.c-giftcards { --c: #dc2626; }
.c-storage { --c: #0891b2; }
.show-shot { position: absolute; inset: 0; opacity: 0; transition: opacity .5s var(--ease); }
.show-shot.on { opacity: 1; }

.catalog { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; margin-top: 88px; border-top: 1px solid var(--line); }
.cat-col { min-width: 0; padding: 26px 24px 0 0; }
.cat-col + .cat-col { border-left: 1px solid var(--line); padding-left: 24px; }
.catalog ul { list-style: none; margin: 0; padding: 0; }
.catalog li a { display: block; padding: 11px 0; border-top: 1px solid var(--line); text-decoration: none; }
.catalog li:first-child a { border-top: 0; }
.cat-n { display: block; font-weight: 600; font-size: 15.5px; letter-spacing: -0.012em; transition: color .15s; }
.cat-d { display: block; margin-top: 2px; font-size: 13.5px; color: var(--mute); text-wrap: pretty; }
.catalog li a:hover .cat-n { color: var(--violet); }

/* ---------- ledger ---------- */
.margin { border: 1px solid var(--line-2); border-radius: 10px; background: #fff; overflow: hidden; }
.margin-tabs { display: flex; flex-wrap: wrap; gap: 6px; padding: 16px 20px; border-bottom: 1px solid var(--line); background: #fbfafe; }
.margin-tabs button { height: 32px; padding: 0 12px; border: 1px solid var(--line-2); border-radius: var(--r); background: #fff; font-size: 13px; font-weight: 500; color: var(--ink-2); cursor: pointer; transition: border-color .15s, color .15s, background-color .15s; }
.margin-tabs button:hover { color: var(--ink); }
.margin-tabs button[aria-selected="true"] { border-color: var(--ink); background: var(--ink); color: #fff; }
.margin-nums { display: grid; grid-template-columns: repeat(3, 1fr); margin: 0; padding: 26px 20px 0; }
.margin-nums div { padding-right: 16px; }
.margin-nums div + div { border-left: 1px solid var(--line); padding-left: 20px; }
.margin-nums dt { font-size: 11.5px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--mute); }
.margin-nums dd { margin: 10px 0 0; font-size: clamp(32px, 3.6vw, 46px); font-weight: 700; letter-spacing: -0.035em; line-height: 1; font-variant-numeric: tabular-nums; }
.margin-nums small { font-size: 14px; font-weight: 500; letter-spacing: 0; color: var(--mute); }
.margin-nums .keep dd { color: var(--green); }
.margin-bar { display: flex; height: 10px; margin: 26px 20px 0; border-radius: 3px; overflow: hidden; background: var(--stone); }
.mb-cost { background: repeating-linear-gradient(-45deg, #e6e6e2 0 4px, #cfcfca 4px 5px); transition: flex-basis .5s var(--ease); }
.mb-keep { background: var(--green); transition: flex-basis .5s var(--ease); }
.margin-note { margin: 0; padding: 14px 20px 18px; font-size: 13px; color: var(--mute); }

/* ---------- faq ---------- */
.faq { border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { list-style: none; display: flex; justify-content: space-between; gap: 20px; padding: 18px 0; font-size: 17px; font-weight: 600; letter-spacing: -0.012em; cursor: pointer; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; flex: none; font-weight: 300; font-size: 24px; line-height: 1; color: var(--mute); transition: transform .25s var(--ease); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq-a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .3s var(--ease); }
.faq details[open] .faq-a { grid-template-rows: 1fr; }
.faq-a > p { overflow: hidden; margin: 0; padding: 0 40px 0 0; color: var(--ink-2); font-size: 16px; text-wrap: pretty; }
.faq details[open] .faq-a > p { padding-bottom: 20px; }
.faq-page { margin-top: 44px; max-width: 820px; }
.faq-page summary { font-size: 17.5px; }

/* ---------- cta band ---------- */
.cta-band { margin: 0; border-radius: clamp(22px, 2.6vw, 34px); background: var(--plum); color: #fff; padding: 104px 0; }
.band + .cta-band, .sec-tint + .cta-band { margin-top: clamp(10px, 1.4vw, 22px); }
.cta-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 48px; align-items: center; }
.cta-band .h2, .cta-band .display { color: #fff; }
.cta-band .sec-lead { color: rgba(255, 255, 255, .78); margin-top: 0; }
.cta-band .hero-cta { margin-top: 26px; }
.cta-band .mute { color: inherit; }
.page-404 .cta-end { padding: 160px 0 120px; }

/* ---------- footer ---------- */
.foot { padding: 64px 0 32px; font-size: 14.5px; background: #fff; }
.foot-top { display: grid; grid-template-columns: 1.6fr repeat(4, 1fr); gap: 32px; }
.foot-brand img { width: 134px; }
.foot-brand p { margin: 16px 0 0; max-width: 260px; color: var(--ink-2); }
.foot ul { list-style: none; margin: 0; padding: 0; }
.foot-col li, .foot-products li { margin: 0 0 8px; }
.foot a { color: var(--ink-2); text-decoration: none; transition: color .15s; }
.foot a:hover { color: var(--ink); }
.foot-social { display: flex; gap: 10px; margin-top: 20px !important; }
.foot-social a { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border: 1px solid var(--line); border-radius: 50%; color: var(--ink-2); transition: border-color .15s, color .15s; }
.foot-social a:hover { border-color: rgba(96, 17, 238, .35); color: var(--violet); }
.foot-soc { width: 16px; height: 16px; }
.foot-products { margin-top: 48px; padding-top: 26px; border-top: 1px solid var(--line); }
.foot-products ul { columns: 5 160px; column-gap: 32px; }
.foot-bottom { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; margin-top: 40px; padding-top: 20px; border-top: 1px solid var(--line); color: var(--mute); font-size: 13px; }
.foot-bottom p { margin: 0; }
.foot-bottom a { color: var(--mute); }

/* ---------- motion ---------- */
.js .reveal, .js .fade, .js .lines { opacity: 0; transform: translateY(14px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.js .reveal.in, .js .fade.in, .js .lines.in, .js .lines.in ~ .fade, .js .in .fade { opacity: 1; transform: none; }
.js .hero-head .hero-kw { transition-delay: .1s; }
.js .hero-head .hero-lead { transition-delay: .18s; }
.js .hero-head .hero-cta { transition-delay: .26s; }
.js .hero-head .hero-note { transition-delay: .32s; }
.js .stagger .reveal:nth-child(2) { transition-delay: .07s; }
.js .stagger .reveal:nth-child(3) { transition-delay: .14s; }
.js .stagger .reveal:nth-child(4) { transition-delay: .21s; }
.js .catalog .reveal:nth-child(2) { transition-delay: .06s; }
.js .catalog .reveal:nth-child(3) { transition-delay: .12s; }
.js .catalog .reveal:nth-child(4) { transition-delay: .18s; }

/* ---------- inner pages ---------- */
.phero { padding: 64px 0 0; }
.phero-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 56px; align-items: center; }
.phero.has-img .phero-text { max-width: 600px; }
.phero-text.center { text-align: center; margin: 0 auto; max-width: 760px; }
.phero-text.center .lead { margin-left: auto; margin-right: auto; }
.phero-cta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 30px; }
.phero-text.center .phero-cta { justify-content: center; }
.phero-media { min-width: 0; }
.phero-shot, .sec-shot { width: 100%; height: auto; display: block; }
.phero-media.is-portrait { display: flex; justify-content: center; }
.phero-media.is-portrait img { width: auto; max-height: 520px; border-radius: 16px; }
.stats { margin: 64px 0 0; }
.phero-end { padding-bottom: 72px; }
.page-sections .sec { padding: 96px 0; }
.sec-tint { margin: 0; border: 0; border-radius: clamp(22px, 2.6vw, 34px); background: var(--stone); }
.sec-tint .cards, .sec-tint .card, .sec-tint .faq, .sec-tint .faq details { border-color: var(--stone-line); }
.sec-head h2 { font-size: clamp(34px, 4.2vw, 58px); font-weight: 650; letter-spacing: -0.03em; line-height: 1.06; text-wrap: balance; }
.cards { display: grid; gap: 0; margin-top: 52px; border-top: 1px solid var(--line); }
.cols2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cols3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cards.cols4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.card { position: relative; min-width: 0; padding: 26px 28px 30px 0; border-bottom: 1px solid var(--line); }
.cols2 .card:nth-child(2n) { border-left: 1px solid var(--line); padding-left: 28px; }
.cols3 .card:not(:nth-child(3n + 1)) { border-left: 1px solid var(--line); padding-left: 28px; }
.cards.cols4 .card:not(:nth-child(4n + 1)) { border-left: 1px solid var(--line); padding-left: 28px; }
.card-dot { display: none; }
.card-num { display: block; margin-bottom: 16px; font-size: 30px; font-weight: 700; letter-spacing: -0.03em; line-height: 1; color: var(--violet); font-variant-numeric: tabular-nums; }
.card h3 { font-size: 18.5px; font-weight: 650; letter-spacing: -0.02em; line-height: 1.25; text-wrap: balance; }
.card p { margin: 10px 0 0; font-size: 15.5px; line-height: 1.55; color: var(--ink-2); text-wrap: pretty; }
.cards-h2 h2 { font-size: 21px; font-weight: 650; letter-spacing: -0.022em; line-height: 1.25; }
.cards-h2 p { margin: 10px 0 0; font-size: 15.5px; line-height: 1.55; color: var(--ink-2); }
.card-link { text-decoration: none; color: inherit; }
.card-link::after { content: " \2192"; color: var(--violet); }
.card-link:hover { color: var(--violet); }
.checks { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 8px; }
.checks li { position: relative; padding-left: 24px; font-size: 15.5px; line-height: 1.5; color: var(--ink-2); }
.checks li::before { content: ""; position: absolute; left: 1px; top: 7px; width: 12px; height: 7px; border-left: 2px solid var(--green); border-bottom: 2px solid var(--green); transform: rotate(-45deg); }
.checks-wide { margin-top: 36px; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 40px; max-width: 920px; }
.checks-wide li { font-size: 16.5px; color: var(--ink); }
.sec-prose { max-width: 68ch; margin-top: 26px; }
.sec-prose p { margin: 0 0 16px; font-size: 17px; line-height: 1.6; color: var(--ink-2); text-wrap: pretty; }
.sec-media { margin-top: 52px; display: flex; justify-content: center; border: 1px solid var(--line-2); border-radius: 10px; overflow: hidden; background: #fff; }
.sec-media img { max-height: 640px; width: auto; max-width: 100%; }
.sec-media.is-portrait { border: 0; background: transparent; }
.sec-media.is-portrait img { max-height: 560px; border-radius: 16px; }
.sec-cta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 40px; }
.gallery { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; margin-top: 44px; }
.gallery-item { margin: 0; min-width: 0; }
.gallery-item .browser-bar { height: 32px; padding: 0 10px; }
.gallery-item figcaption { margin-top: 12px; font-size: 14px; line-height: 1.45; color: var(--ink-2); }

/* ---------- articles, blog ---------- */
.article-head { max-width: 780px; padding-top: 64px; }
.article-head h1 { font-size: clamp(38px, 5.2vw, 72px); font-weight: 700; letter-spacing: -0.036em; line-height: 1.02; text-wrap: balance; }
.article-lead { margin: 26px 0 0; padding: 20px 24px; border-left: 3px solid var(--violet); background: var(--stone); font-size: 18px; line-height: 1.55; color: var(--ink); text-wrap: pretty; }
.article-meta { margin: 18px 0 0; font-size: 14px; color: var(--mute); }
.prose { max-width: 760px; margin-top: 44px; padding-bottom: 104px; font-size: 17.5px; line-height: 1.7; color: var(--ink-2); }
.prose > :first-child { margin-top: 0; }
.prose h2 { margin: 52px 0 16px; font-size: clamp(24px, 2.8vw, 32px); font-weight: 650; line-height: 1.12; letter-spacing: -0.03em; color: var(--ink); text-wrap: balance; }
.prose h3 { margin: 36px 0 12px; font-size: 21px; font-weight: 650; letter-spacing: -0.02em; color: var(--ink); }
.prose h4 { margin: 28px 0 10px; font-size: 17.5px; font-weight: 650; color: var(--ink); }
.prose p, .prose li { margin: 0 0 18px; text-wrap: pretty; }
.prose ul, .prose ol { padding-left: 24px; }
.prose li { margin-bottom: 10px; }
.prose a { color: var(--violet); text-decoration: underline; text-underline-offset: 3px; }
.prose a:hover { color: var(--violet-ink); }
.prose strong { color: var(--ink); font-weight: 600; }
.prose img { border-radius: 10px; border: 1px solid var(--line); margin: 28px 0; }
.prose table { width: 100%; border-collapse: collapse; margin: 28px 0; font-size: 15px; display: block; overflow-x: auto; }
.prose th, .prose td { padding: 11px 14px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.prose th { color: var(--ink); font-weight: 600; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; }
.prose blockquote { margin: 28px 0; padding: 4px 0 4px 22px; border-left: 3px solid var(--violet); color: var(--ink); font-size: 19px; }
.prose code { font-family: var(--mono); font-size: .9em; background: var(--stone); padding: 2px 6px; border-radius: 4px; }
.prose pre { background: #0f0f14; color: #e9e9f0; padding: 20px 22px; border-radius: 8px; overflow-x: auto; font-size: 14px; line-height: 1.55; }
.prose pre code { background: none; padding: 0; color: inherit; }
.prose hr { border: 0; border-top: 1px solid var(--line); margin: 40px 0; }
.post-media { max-width: 860px; margin-top: 40px; }
.post-media img { width: 100%; height: auto; border-radius: 10px; border: 1px solid var(--line); }
.page-post .prose { margin-top: 40px; }
.blog-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px 32px; margin-top: 52px; }
.page-blog .blog-grid { margin-top: 0; }
.post-card { display: block; min-width: 0; text-decoration: none; color: inherit; }
.post-card img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 8px; border: 1px solid var(--line); background: var(--stone); }
.post-card h2, .post-card h3 { margin: 16px 0 0; font-size: 18.5px; font-weight: 650; line-height: 1.3; letter-spacing: -0.02em; }
.post-card:hover h2, .post-card:hover h3 { color: var(--violet); }
.post-card p { margin: 8px 0 0; font-size: 15px; line-height: 1.55; color: var(--ink-2); }
.post-card .post-date { color: var(--mute); font-size: 13px; }
.pager { display: flex; align-items: center; justify-content: center; gap: 20px; margin-top: 64px; color: var(--mute); font-size: 15px; }
.contact-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: 64px; align-items: start; }
.form { display: grid; gap: 18px; }
.form-row { display: grid; gap: 8px; }
.form-row label { font-size: 14px; font-weight: 600; }
.form-row label span { color: var(--mute); font-weight: 400; }
.form-row input, .form-row textarea { width: 100%; font: inherit; font-size: 16px; padding: 12px 14px; border: 1px solid var(--line-2); border-radius: var(--r); background: #fff; color: var(--ink); -webkit-appearance: none; appearance: none; }
.form-row input:focus, .form-row textarea:focus { outline: 2px solid var(--violet); outline-offset: 1px; border-color: transparent; }
.form .hp { position: absolute; left: -9999px; }
.form-ok { padding: 14px 16px; border-radius: var(--r); background: #e6f5ee; color: var(--green); font-weight: 600; margin: 0; }
.form-err { padding: 14px 16px; border-radius: var(--r); background: #fdecec; color: #a3242d; font-weight: 600; margin: 0; }
.contact-side { padding-left: 32px; border-left: 1px solid var(--line); }
.contact-side h2 { margin: 0 0 18px; font-size: 20px; font-weight: 650; letter-spacing: -0.02em; }
.contact-side p { margin: 0 0 18px; font-size: 15.5px; line-height: 1.55; color: var(--ink-2); }
.contact-side a { color: var(--violet); }
.api-docs { max-width: 980px; }
.status-dot { display: inline-block; width: 10px; height: 10px; border-radius: 999px; margin-bottom: 14px; background: var(--green); }
.status-dot.bad { background: #c0392b; }

/* ---------- account dropdown + register modal ---------- */
.acct-trigger { display: inline-flex; align-items: center; gap: 7px; }
.acct-trigger svg { width: 12px; height: 12px; transition: transform .2s var(--ease); }
.acct-trigger.open svg { transform: rotate(180deg); }
.acct-menu { position: fixed; z-index: 90; width: 280px; padding: 8px; border: 1px solid var(--line); border-radius: 10px; background: #fff; opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity .14s var(--ease), transform .14s var(--ease), visibility .14s; }
.acct-menu.open { opacity: 1; visibility: visible; transform: none; }
.acct-head { display: flex; align-items: center; gap: 11px; padding: 10px 12px 12px; }
.acct-ava { width: 38px; height: 38px; border-radius: 50%; background: var(--violet); color: #fff; font-weight: 650; display: grid; place-items: center; flex: none; }
.acct-hi { font-size: 15px; font-weight: 650; line-height: 1.2; }
.acct-sub { font-size: 12.5px; color: var(--mute); }
.acct-bal { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 2px 6px 8px; padding: 12px 14px; border-radius: var(--r); background: var(--stone); }
.acct-bal-l { font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--mute); }
.acct-bal-v { font-size: 20px; font-weight: 700; letter-spacing: -0.02em; margin-top: 2px; font-variant-numeric: tabular-nums; }
.acct-links { display: grid; padding: 4px; }
.acct-link { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: var(--r); font-size: 14.5px; font-weight: 500; text-decoration: none; color: var(--ink); }
.acct-link:hover { background: var(--stone); }
.acct-sep { height: 1px; background: var(--line); margin: 5px 10px; }
.acct-out { color: #a3242d; }
.reg-modal { position: fixed; inset: 0; z-index: 100; display: none; align-items: center; justify-content: center; padding: 16px; background: rgba(8, 5, 16, .72); }
.reg-modal.open { display: flex; animation: regFade .16s var(--ease) both; }
.reg-modal.open .reg-box { animation: regPop .18s var(--ease) both; }
@keyframes regFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes regPop { from { opacity: 0; transform: translateY(6px) scale(.985); } to { opacity: 1; transform: none; } }
.reg-box { position: relative; width: 100%; max-width: 440px; height: 560px; max-height: calc(100vh - 32px); background: #fff; border-radius: 12px; overflow: hidden; transition: height .18s var(--ease); }
.reg-close { position: absolute; top: 6px; right: 8px; z-index: 5; width: 38px; height: 38px; border: 0; border-radius: var(--r); background: transparent; color: var(--mute); font-size: 28px; line-height: 1; cursor: pointer; }
.reg-close:hover { color: var(--ink); }
.reg-load { position: absolute; inset: 0; display: grid; place-items: center; color: var(--violet); font-weight: 600; font-size: 14px; }
.reg-frame { position: relative; z-index: 2; width: 100%; height: 100%; border: 0; background: transparent; }

/* ---------- responsive ---------- */
@media (max-width: 1040px) {
	.nav-links, .nav-signin { display: none; }
	.nav-burger { display: inline-block; }
	.hero-grid { grid-template-columns: 1fr; gap: 40px; }
	.hero-title { font-size: clamp(48px, 9vw, 88px); }
	.show { grid-template-columns: 240px minmax(0, 1fr); gap: 40px; }
	.catalog { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.cat-col:nth-child(3) { border-left: 0; padding-left: 0; }
	.cat-col:nth-child(n + 3) { border-top: 1px solid var(--line); margin-top: 20px; }
	.cells, .cards.cols4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.cells > div:nth-child(2n + 1) { border-left: 0; padding-left: 0; }
	.cells > div:nth-child(n + 3) { border-top: 1px solid var(--line); }
	.cards.cols4 .card:nth-child(2n + 1) { border-left: 0; padding-left: 0; }
	.cards.cols4 .card:nth-child(2n) { border-left: 1px solid var(--line); padding-left: 28px; }
	.cols3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.cols3 .card:not(:nth-child(3n + 1)) { border-left: 0; padding-left: 0; }
	.cols3 .card:nth-child(2n) { border-left: 1px solid var(--line); padding-left: 28px; }
	.strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.strip > li:nth-child(2n + 1), .strip > div:nth-child(2n + 1) { border-left: 0; padding-left: 0; }
	.strip > li:nth-child(n + 3), .strip > div:nth-child(n + 3) { border-top: 1px solid var(--line); }
	.foot-top { grid-template-columns: repeat(2, 1fr); }
	.foot-brand { grid-column: 1 / -1; }
	.blog-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.cta-grid { grid-template-columns: 1fr; align-items: start; }
}
@media (max-width: 860px) {
	.show { grid-template-columns: 1fr; gap: 24px; margin-top: 40px; }
	.show-tabs { flex-direction: row; overflow-x: auto; margin: 0 calc(var(--gut) * -1); padding: 0 var(--gut); border-top: 0; border-bottom: 1px solid var(--line); scrollbar-width: none; }
	.show-tabs::-webkit-scrollbar { display: none; }
	.show-tabs button { flex: none; width: auto; height: 44px; padding-right: 14px; border-bottom: 0; font-size: 14px; }
	.show-stage { position: static; }
	.split { grid-template-columns: 1fr; gap: 40px; }
	.split-rev .sec-head { order: 0; }
	.sec, .page-sections .sec { padding: 80px 0; }
	.cta-band { padding: 80px 0; }
	.phero-grid { grid-template-columns: 1fr; gap: 36px; }
	.phero.has-img .phero-text { max-width: none; }
	.article-head { padding-top: 48px; }
	.contact-grid { grid-template-columns: 1fr; gap: 40px; }
	.contact-side { padding-left: 0; border-left: 0; padding-top: 32px; border-top: 1px solid var(--line); }
	.checks-wide { grid-template-columns: 1fr; }
	.stats { margin-top: 48px; }
	.sm-grid { grid-template-columns: repeat(2, 1fr); }
	.sm-nav { display: none; }
}
@media (max-width: 600px) {
	:root { --gut: 16px; }
	body { font-size: 16px; }
	.nav { height: 58px; }
	.nav-logo img { width: 120px; }
	.hero { padding: 40px 0 48px; }
	.hero-title { font-size: clamp(44px, 12.5vw, 64px); }
	.hero-kw { margin-top: 20px; font-size: 18px; }
	.hero-lead { font-size: 16px; }
	.hero-cta .btn, .phero-cta .btn, .sec-cta .btn { flex: 1 1 100%; }
	.hero-facts { margin-top: 44px; }
	.strip { grid-template-columns: 1fr; }
	.strip > li, .strip > div { border-left: 0 !important; padding: 16px 0 !important; }
	.strip > li + li, .strip > div + div { border-top: 1px solid var(--line); }
	.sm-ctl input { width: 100%; }
	.sm-grid { padding: 12px 12px 12px; gap: 8px; }
	.sm-hero { padding: 20px 16px; }
	.sm-hero h3 { font-size: 19px; }
	.sm-top { padding: 0 12px; }
	.tour-nav { flex-wrap: nowrap; overflow-x: auto; margin: 0 calc(var(--gut) * -1) 18px; padding: 0 var(--gut); scrollbar-width: none; }
	.tour-nav::-webkit-scrollbar { display: none; }
	.tour-nav button { flex: none; font-size: 13.5px; }
	.sec, .page-sections .sec { padding: 64px 0; }
	.catalog { grid-template-columns: 1fr; margin-top: 56px; }
	.cat-col { border-left: 0 !important; padding-left: 0 !important; }
	.cat-col + .cat-col { border-top: 1px solid var(--line); margin-top: 16px; }
	.cells, .cards, .cards.cols4, .cols2, .cols3, .blog-grid, .gallery { grid-template-columns: 1fr; }
	.cells > div, .card { border-left: 0 !important; padding-left: 0 !important; padding-right: 0; }
	.cells > div + div { border-top: 1px solid var(--line); }
	.margin-nums { grid-template-columns: 1fr 1fr; gap: 20px 0; }
	.margin-nums .keep { grid-column: 1 / -1; border-left: 0; padding-left: 0; padding-top: 20px; border-top: 1px solid var(--line); }
	.faq-a > p { padding-right: 0; }
	.foot-products ul { columns: 2; }
	.browser-bar { height: 34px; padding: 0 10px; }
	.dots { display: none; }
	.addr { min-width: 0; width: 100%; }
	.lead, .sec-lead, .sec-sub { font-size: 17px; }
	.prose { font-size: 16.5px; padding-bottom: 72px; }
	.article-lead { padding: 16px 18px; font-size: 17px; }
	.reg-modal { padding: 10px; }
	.reg-box { max-height: calc(100vh - 20px); }
	.cta-band { padding: 64px 0; }
}
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { transition-duration: .01ms !important; transition-delay: 0s !important; animation: none !important; }
}

/* ---------- landing pages (resell-*) ---------- */
.lp-glass { background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .16); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border-radius: 16px; }
.lp-hero { position: relative; overflow: hidden; margin: 0; padding: 72px 0 80px; border-radius: 0 0 clamp(22px, 2.6vw, 34px) clamp(22px, 2.6vw, 34px); color: #fff; background: var(--violet-ink); background-image: radial-gradient(60% 70% at 85% 10%, rgba(96, 17, 238, .55), transparent 70%), radial-gradient(40% 50% at 10% 90%, rgba(167, 139, 250, .25), transparent 70%), linear-gradient(180deg, #3a0a9c, #4a0cba 60%, #3f0aa6); }
.lp-hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 56px; align-items: center; }
.lp-hero-text .display-md { color: #fff; }
.lp-eyebrow { color: rgba(255, 255, 255, .6); }
.lp-lead { color: rgba(255, 255, 255, .78); }
.lp-note { color: rgba(255, 255, 255, .55); }
.lp-hero .btn-ghost { background: transparent; border-color: rgba(255, 255, 255, .4); color: #fff; }
.lp-hero .btn-ghost:hover { border-color: #fff; }
.lp-stats { list-style: none; margin: 40px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.lp-stats li { padding: 18px 18px 16px; transition: border-color .15s; }
.lp-stats li:hover { border-color: rgba(255, 255, 255, .34); }
.lp-stats strong { display: block; font-size: clamp(26px, 2.4vw, 32px); font-weight: 700; letter-spacing: -0.03em; line-height: 1; font-variant-numeric: tabular-nums; }
.lp-stats span { display: block; margin-top: 8px; font-size: 13.5px; color: rgba(255, 255, 255, .62); }
.lp-hero-media { position: relative; min-width: 0; padding: 0 4% 0 0; }
.lp-hero-media .laptop { padding: 0 8% 0 0; }
.lp-phone { position: relative; width: 100%; max-width: 300px; padding: 10px; border-radius: 40px; background: #15151b; border: 1px solid #3a3a46; }
.lp-phone::before { content: ""; position: absolute; top: 18px; left: 50%; width: 34%; height: 22px; transform: translateX(-50%); border-radius: 12px; background: #0b0b0f; z-index: 2; }
.lp-phone-screen { position: relative; overflow: hidden; border-radius: 30px; background: #fff; aspect-ratio: 720 / 1560; }
.lp-phone-screen img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; display: block; }
.lp-hero-phone { position: absolute; right: 0; bottom: -8%; width: 30%; max-width: 230px; }
.lp-proof { padding: 0; }
.lp-proof-list { list-style: none; margin: 0; padding: 22px 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px 28px; border-bottom: 1px solid var(--line); }
.lp-proof-list li { position: relative; padding-left: 24px; font-size: 15px; font-weight: 550; color: var(--ink); }
.lp-proof-list li::before { content: ""; position: absolute; left: 1px; top: 7px; width: 12px; height: 7px; border-left: 2px solid var(--green); border-bottom: 2px solid var(--green); transform: rotate(-45deg); }
.lp-screens { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, .7fr) minmax(0, .7fr); gap: 22px; margin-top: 44px; align-items: start; }
.lp-screen { margin: 0; min-width: 0; }
.lp-screen.is-phone { display: flex; flex-direction: column; align-items: center; }
.lp-screen.is-phone .lp-phone { max-width: 260px; }
.lp-screen.is-laptop { padding: 0 4% 0 0; }
.lp-gallery-laptop { padding: 0 5%; }
.lp-screen figcaption { margin-top: 12px; font-size: 13.5px; color: var(--mute); text-align: center; }
.lp-plans { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-top: 44px; }
.lp-plan { padding: 26px 24px 24px; border: 1px solid var(--line); border-radius: 16px; background: #fff; }
.lp-plan.is-hi { border-color: var(--violet); background: var(--violet-soft); }
.lp-plan-name { display: block; font-size: 13px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--mute); }
.lp-plan strong { display: block; margin-top: 14px; font-size: clamp(34px, 3.4vw, 44px); font-weight: 700; letter-spacing: -0.035em; line-height: 1; font-variant-numeric: tabular-nums; }
.lp-plan-per { display: block; margin-top: 6px; font-size: 14px; color: var(--ink-2); }
.lp-plan-retail { display: block; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); font-size: 14px; font-weight: 550; color: var(--violet); }
.lp-plan.is-hi .lp-plan-retail { border-color: #d9ccff; }
.lp-plans-foot { margin: 22px 0 0; font-size: 14.5px; color: var(--mute); }
.lp-devices { position: relative; overflow: hidden; margin: 0; padding: 104px 0; border-radius: clamp(22px, 2.6vw, 34px); color: #fff; background: var(--plum); background-image: radial-gradient(50% 60% at 15% 15%, rgba(96, 17, 238, .5), transparent 70%), radial-gradient(40% 60% at 90% 90%, rgba(167, 139, 250, .22), transparent 70%); }
.lp-devices .sec-head h2 { color: #fff; }
.lp-devices .sec-sub { color: rgba(255, 255, 255, .72); }
.lp-device-grid { list-style: none; margin: 44px 0 0; padding: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; }
.lp-device-grid li { padding: 24px 18px 20px; transition: border-color .15s; }
.lp-device-grid li:hover { border-color: rgba(255, 255, 255, .34); }
.lp-device-grid strong { display: block; font-size: 19px; font-weight: 650; letter-spacing: -0.02em; }
.lp-device-grid span { display: block; margin-top: 8px; font-size: 13px; color: rgba(255, 255, 255, .6); }
.lp-compare { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 44px; }
.lp-compare-col { padding: 28px 28px 30px; border: 1px solid var(--line); border-radius: 16px; background: #fff; }
.lp-compare-col.is-us { border-color: var(--violet); background: var(--violet-soft); }
.lp-compare-col h3 { font-size: 20px; font-weight: 650; letter-spacing: -0.02em; }
.lp-compare-col .checks { margin-top: 18px; }
.lp-crosses { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 8px; }
.lp-crosses li { position: relative; padding-left: 24px; font-size: 15.5px; line-height: 1.5; color: var(--ink-2); }
.lp-crosses li::before, .lp-crosses li::after { content: ""; position: absolute; left: 6px; top: 11px; width: 12px; height: 2px; background: #c0392b; transform: rotate(45deg); }
.lp-crosses li::after { transform: rotate(-45deg); }
.lp-hero + .lp-proof, .lp-devices + .sec { margin-top: 0; }
@media (max-width: 1100px) { .lp-device-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .lp-plans { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 860px) {
	.lp-hero { padding: 48px 0 56px; }
	.lp-hero-grid { grid-template-columns: 1fr; gap: 36px; }
	.lp-hero-media { padding: 0; }
	.lp-hero-media .laptop { padding: 0; }
	.lp-hero-phone { display: none; }
	.lp-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 32px; }
	.lp-proof-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.lp-screens { grid-template-columns: 1fr 1fr; }
	.lp-screen.is-laptop { grid-column: 1 / -1; }
	.lp-screen.is-phone .lp-phone { max-width: 100%; }
	.lp-compare { grid-template-columns: 1fr; }
	.lp-device-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.lp-devices { padding: 72px 0; }
}
@media (max-width: 480px) { .lp-plans { grid-template-columns: 1fr; } .lp-proof-list { grid-template-columns: 1fr; } }

/* landing: offer bento */
.lp-bento { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-top: 48px; }
.lp-tile { position: relative; min-width: 0; display: flex; flex-direction: column; padding: 0 0 24px; border: 1px solid var(--stone-line); border-radius: 20px; background: #fff; overflow: hidden; }
.lp-tile.is-wide { grid-column: span 2; }
.lp-tile h3 { margin: 18px 24px 0; font-size: 18.5px; font-weight: 650; letter-spacing: -0.02em; line-height: 1.25; text-wrap: balance; }
.lp-tile p { margin: 8px 24px 0; font-size: 15px; line-height: 1.5; color: var(--ink-2); text-wrap: pretty; }
.lp-art { position: relative; height: 150px; display: flex; align-items: center; justify-content: center; overflow: hidden; background: var(--stone); background-image: radial-gradient(70% 90% at 20% 0%, rgba(96, 17, 238, .16), transparent 60%), radial-gradient(60% 80% at 100% 100%, rgba(167, 139, 250, .22), transparent 60%); }
.lp-art::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(96, 17, 238, .07) 1px, transparent 1px), linear-gradient(90deg, rgba(96, 17, 238, .07) 1px, transparent 1px); background-size: 22px 22px; mask-image: radial-gradient(80% 80% at 50% 50%, #000 30%, transparent 100%); -webkit-mask-image: radial-gradient(80% 80% at 50% 50%, #000 30%, transparent 100%); }
.lp-tile.is-wide .lp-art { height: 210px; }
.lp-ico { position: relative; width: 56px; height: 56px; color: var(--violet); }
.lp-art-portal, .lp-art-support { background-image: radial-gradient(60% 80% at 50% 110%, rgba(96, 17, 238, .22), transparent 65%); }
.lp-art-panel { background-image: radial-gradient(70% 90% at 0% 100%, rgba(15, 138, 95, .16), transparent 60%), radial-gradient(60% 80% at 100% 0%, rgba(96, 17, 238, .16), transparent 60%); }
.lp-brand { width: 28px; height: 28px; fill: currentColor; }
.lp-brand-row { position: relative; display: flex; gap: 22px; color: var(--ink); }
.lp-brand.lg { width: 40px; height: 40px; }
.lp-pay { position: relative; display: flex; align-items: center; gap: 26px; color: var(--ink); }
.lp-brand.pay { width: 74px; height: 40px; }
.lp-mock { position: absolute; left: 7%; right: 7%; top: 26px; bottom: -40px; border-radius: 10px 10px 0 0; background: #fff; border: 1px solid var(--line-2); border-bottom: 0; overflow: hidden; text-align: left; }
.lp-mock-bar { display: flex; align-items: center; gap: 5px; height: 22px; padding: 0 10px; border-bottom: 1px solid var(--line); background: #fbfafe; }
.lp-mock-bar i { width: 7px; height: 7px; border-radius: 50%; background: #e1e1e6; }
.lp-mock-bar b { margin-left: 10px; padding: 2px 8px; border-radius: 4px; background: #f1f0f6; font: 500 9px/1 var(--mono, monospace); color: var(--mute); }
.lp-mock-body { position: relative; padding: 10px 14px; }
.lp-mock-nav { display: flex; align-items: center; gap: 10px; }
.lp-mock-nav span { width: 22px; height: 5px; border-radius: 3px; background: #dcdce3; }
.lp-mock-nav .lp-mock-logo { width: 34px; height: 9px; border-radius: 3px; background: var(--violet); }
.lp-mock-nav em { margin-left: auto; width: 34px; height: 11px; border-radius: 4px; background: var(--violet); font-size: 0; }
.lp-mock-hero { margin-top: 18px; width: 52%; }
.lp-mock-h { height: 10px; border-radius: 4px; background: var(--ink); margin-bottom: 6px; }
.lp-mock-h.short { width: 70%; }
.lp-mock-p { height: 5px; width: 85%; border-radius: 3px; background: #dcdce3; margin: 10px 0 12px; }
.lp-mock-btn { width: 44px; height: 12px; border-radius: 4px; background: var(--violet); }
.lp-mock-card { position: absolute; right: 14px; top: 46px; width: 36%; height: 56px; border-radius: 8px; background: linear-gradient(135deg, var(--violet), #a78bfa); padding: 10px; display: flex; flex-direction: column; gap: 6px; }
.lp-mock-card span { display: block; height: 5px; width: 60%; border-radius: 3px; background: rgba(255, 255, 255, .7); }
.lp-mock-card span.w { width: 85%; }
.lp-code { position: relative; margin: 0; padding: 0 18px; font: 500 12.5px/1.55 var(--mono, ui-monospace, SFMono-Regular, Menlo, monospace); color: var(--ink); text-align: left; white-space: pre; }
.lp-code .k { color: var(--violet); font-weight: 700; }
.lp-code .s { color: #0f6e8a; }
.lp-code .c { color: var(--green); }
.lp-globe { position: relative; width: 78%; height: auto; fill: rgba(96, 17, 238, .28); }
.lp-globe .hot { fill: var(--violet); }
.lp-device-grid .lp-brand { width: 30px; height: 30px; margin-bottom: 14px; fill: #fff; }
@media (max-width: 1100px) { .lp-bento { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .lp-bento { grid-template-columns: 1fr; } .lp-tile.is-wide { grid-column: auto; } .lp-tile.is-wide .lp-art { height: 170px; } }
.lp-art-api { justify-content: flex-start; align-items: flex-start; padding: 26px 0 0 22px; }
.lp-code { padding: 0; max-width: 100%; overflow: hidden; }
.lp-globe { width: 62%; }
.lp-tile.is-wide .lp-art-network, .lp-tile.is-wide .lp-art-support { height: 170px; }

/* landing: inline icons, mocks, world map */
.lp-tico { width: 20px; height: 20px; margin: 0 10px -4px 0; color: var(--violet); flex: 0 0 auto; }
.lp-device-grid strong { display: flex; align-items: center; gap: 12px; }
.lp-device-grid .lp-brand { width: 22px; height: 22px; margin: 0; fill: #fff; }
.lp-acct { position: relative; width: 64%; padding: 14px; border-radius: 12px; background: #fff; border: 1px solid var(--line-2); }
.lp-acct-top { display: flex; align-items: center; gap: 10px; }
.lp-acct-top i { width: 26px; height: 26px; border-radius: 50%; background: linear-gradient(135deg, var(--violet), #a78bfa); }
.lp-acct-top b { display: block; width: 70px; height: 7px; border-radius: 3px; background: var(--ink); }
.lp-acct-top s { display: block; width: 46px; height: 5px; margin-top: 5px; border-radius: 3px; background: #dcdce3; }
.lp-acct-top em, .lp-tr em { margin-left: auto; padding: 3px 7px; border-radius: 99px; background: #e4f5ed; color: var(--green); font: 600 9px/1 var(--sans); font-style: normal; }
.lp-acct-row { display: flex; gap: 8px; margin-top: 10px; }
.lp-acct-row span { height: 5px; width: 30%; border-radius: 3px; background: #dcdce3; }
.lp-acct-row span.w { width: 55%; }
.lp-acct-btn { width: 56px; height: 14px; margin-top: 12px; border-radius: 4px; background: var(--violet); }
.lp-table { position: relative; width: 72%; border-radius: 12px; background: #fff; border: 1px solid var(--line-2); overflow: hidden; }
.lp-tr { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-top: 1px solid var(--line); }
.lp-tr.lp-th { border-top: 0; background: #fbfafe; }
.lp-tr.lp-th span { height: 5px; width: 22%; border-radius: 3px; background: #dcdce3; }
.lp-tr .n { height: 6px; width: 34%; border-radius: 3px; background: var(--ink); }
.lp-tr .m { height: 5px; width: 20%; border-radius: 3px; background: #dcdce3; }
.lp-tr em.warn { background: #fff3dc; color: #b45309; }
.lp-rings { position: relative; width: 120px; height: 120px; }
.lp-rings i { position: absolute; inset: 0; border-radius: 50%; border: 1.5px solid rgba(96, 17, 238, .35); }
.lp-rings i:nth-child(2) { inset: 18px; border-color: rgba(96, 17, 238, .5); }
.lp-rings i:nth-child(3) { inset: 36px; border-color: rgba(96, 17, 238, .7); }
.lp-rings b { position: absolute; inset: 50px; border-radius: 50%; background: var(--violet); }
/* landing: darker tile art + bigger titles */
.lp-art { background: #4a0cba; background-image: radial-gradient(70% 90% at 15% 0%, rgba(124, 58, 237, .75), transparent 60%), radial-gradient(60% 80% at 100% 100%, rgba(167, 139, 250, .45), transparent 60%), linear-gradient(135deg, #3a0a9c, #5410d8); }
.lp-art::before { background-image: linear-gradient(rgba(255, 255, 255, .07) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .07) 1px, transparent 1px); }
.lp-art-portal, .lp-art-support { background-image: radial-gradient(60% 80% at 50% 110%, rgba(124, 58, 237, .8), transparent 65%), linear-gradient(135deg, #3a0a9c, #5410d8); }
.lp-art-panel { background-image: radial-gradient(70% 90% at 0% 100%, rgba(15, 138, 95, .45), transparent 60%), radial-gradient(60% 80% at 100% 0%, rgba(124, 58, 237, .7), transparent 60%), linear-gradient(135deg, #3a0a9c, #5410d8); }
.lp-ico { color: #fff; }
.lp-brand-row, .lp-pay { color: #fff; }
.lp-code { color: #fff; }
.lp-code .k { color: #c4b5fd; }
.lp-code .s { color: #9ad8ff; }
.lp-code .c { color: #86efac; }
.lp-globe { fill: rgba(255, 255, 255, .32); }
.lp-globe .hot { fill: #c4b5fd; }
.lp-rings i { border-color: rgba(255, 255, 255, .28); }
.lp-rings i:nth-child(2) { border-color: rgba(255, 255, 255, .45); }
.lp-rings i:nth-child(3) { border-color: rgba(255, 255, 255, .7); }
.lp-rings b { background: #fff; }
.lp-mock, .lp-acct, .lp-table { border-color: rgba(255, 255, 255, .5); }
.lp-tile { border-color: var(--line); }
.lp-tile h3 { font-size: 23px; letter-spacing: -0.025em; margin-top: 20px; }
.lp-tile p { font-size: 15.5px; margin-top: 10px; }
.lp-tico { width: 24px; height: 24px; margin: 0 10px -5px 0; }
.lp-proof-list li { white-space: nowrap; font-size: 14.5px; }
.lp-proof-list { gap: 12px 20px; }

/* landing: world map in the hero, rings on the CTA band */
.lp-hero > .wrap { position: relative; }
.lp-hero::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: url(/assets/img/world-dots.webp) 78% 40% / 1180px auto no-repeat; opacity: .24; mask-image: linear-gradient(90deg, transparent 8%, rgba(0, 0, 0, .35) 32%, #000 55%, #000 100%); -webkit-mask-image: linear-gradient(90deg, transparent 8%, rgba(0, 0, 0, .35) 32%, #000 55%, #000 100%); }
@media (max-width: 860px) { .lp-hero::before { opacity: .14; background-position: center 78%; background-size: 760px auto; mask-image: radial-gradient(90% 55% at 50% 72%, #000 40%, transparent 100%); -webkit-mask-image: radial-gradient(90% 55% at 50% 72%, #000 40%, transparent 100%); } }
.page-landing .cta-band, .cta-band.cta-img-home, .cta-band.cta-img-products { position: relative; overflow: hidden; background-color: var(--plum); background-image: url(/assets/img/cta-globe-1536.webp); background-size: cover; background-position: center 40%; }
.cta-band.cta-img-smm { background-image: url(/assets/img/cta-smm-1536.webp); }
.cta-band.cta-img-home { background-image: url(/assets/img/cta-home-1536.webp); background-position: center 55%; }
.cta-band.cta-img-products { background-image: url(/assets/img/cta-products-1536.webp); }
.page-landing .cta-band::before, .cta-band.cta-img-home::before, .cta-band.cta-img-products::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(90deg, rgba(74, 12, 186, .88) 0%, rgba(74, 12, 186, .55) 45%, rgba(74, 12, 186, .15) 100%); }
.page-landing .cta-band > .wrap, .cta-band.cta-img-home > .wrap, .cta-band.cta-img-products > .wrap { position: relative; z-index: 1; }
.lp-cta-logo { display: block; width: 150px; height: auto; margin: 0 0 22px; }
@media (max-width: 860px) { .page-landing .cta-band, .cta-band.cta-img-home, .cta-band.cta-img-products { background-position: 70% 40%; } .page-landing .cta-band::before, .cta-band.cta-img-home::before, .cta-band.cta-img-products::before { background: linear-gradient(180deg, rgba(74, 12, 186, .82), rgba(74, 12, 186, .6)); } }

/* landing: SMM art + many-platform grid */
.lp-table-prices em.price { background: rgba(96, 17, 238, .12); color: var(--violet); font-weight: 700; font-size: 10px; }
.lp-slider { position: relative; width: 66%; padding: 14px 16px; border-radius: 12px; background: #fff; border: 1px solid rgba(255, 255, 255, .5); font: 500 11px/1.3 var(--sans); color: var(--mute); }
.lp-slider-top, .lp-slider-foot { display: flex; justify-content: space-between; align-items: center; }
.lp-slider-top b { font-size: 15px; color: var(--violet); }
.lp-slider-bar { position: relative; height: 6px; margin: 12px 0; border-radius: 3px; background: #e9e5f5; }
.lp-slider-bar i { position: absolute; left: 0; top: 0; bottom: 0; width: 60%; border-radius: 3px; background: var(--violet); }
.lp-slider-bar u { position: absolute; left: 60%; top: 50%; width: 16px; height: 16px; margin: -8px 0 0 -8px; border-radius: 50%; background: #fff; border: 2px solid var(--violet); }
.lp-slider-foot span + span { color: var(--ink); font-weight: 600; }
.lp-brand-row .lp-brand.lg { width: 34px; height: 34px; }
.lp-device-grid.is-many { grid-template-columns: repeat(5, minmax(0, 1fr)); }
@media (max-width: 1100px) { .lp-device-grid.is-many { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 860px) { .lp-device-grid.is-many { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.lp-screens.all-laptops { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 34px 40px; align-items: start; }
.lp-screens.all-laptops .lp-screen:first-child { grid-column: 1 / -1; padding: 0 8%; }
.lp-screens.all-laptops .lp-screen.is-laptop { padding: 0; }
@media (max-width: 860px) { .lp-screens.all-laptops { grid-template-columns: 1fr; } .lp-screens.all-laptops .lp-screen:first-child { padding: 0; } }

/* landing: per-page hero texture */
.lp-hero.hero-bg-smm::before { background-image: url(/assets/img/hero-smm.svg); background-size: 1240px auto; background-position: 72% 46%; opacity: .2; }
@media (max-width: 860px) { .lp-hero.hero-bg-smm::before { background-size: 900px auto; background-position: center 80%; opacity: .14; } }

/* landing: related links + product hero link */
.lp-related { padding-top: 28px; }
.lp-related p { display: flex; flex-wrap: wrap; gap: 10px 28px; margin: 0; font-weight: 600; }
.lp-related a { color: var(--brand, #5b21b6); text-decoration: none; }
.lp-related a:hover { text-decoration: underline; }
.phero-more { margin: 18px 0 0; font-size: 15px; opacity: .9; }
.phero-more a { font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }

/* landing steps: product tiles */
.lp-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin-top: 56px; }
.lp-tl { position: relative; min-width: 0; height: 560px; overflow: hidden; border-radius: 28px; background: #fff; }
.lp-tl.is-tint { background: #ece7fb; }
.lp-tl.is-dark { background: var(--plum); color: #fff; }
.lp-tl-text { position: relative; z-index: 1; padding: 44px 44px 0; }
.lp-tl-step { display: block; margin-bottom: 14px; font-size: 13px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--violet); }
.lp-tl.is-dark .lp-tl-step { color: #c4b5fd; }
.lp-tl h3 { margin: 0; font-size: clamp(28px, 2.6vw, 36px); font-weight: 650; letter-spacing: -0.03em; line-height: 1.08; text-wrap: balance; }
.lp-tl p { margin: 12px 0 0; max-width: 34ch; font-size: 16.5px; line-height: 1.5; color: var(--ink-2); text-wrap: pretty; }
.lp-tl.is-dark p { color: rgba(255, 255, 255, .72); }
.lp-tl-shot { position: absolute; left: 44px; right: -40px; top: 230px; bottom: -8px; }
.lp-tl-shot img { display: block; width: 100%; height: auto; border: 1px solid rgba(17, 17, 24, .1); border-radius: 14px 0 0 0; border-right: 0; border-bottom: 0; background: #fff; }
.lp-tl-shot-1 { left: 50%; right: auto; width: 334px; transform: translateX(-50%); top: 222px; }
.lp-tl-shot-1 img { border-radius: 16px 16px 0 0; border-right: 1px solid rgba(17, 17, 24, .1); }
.lp-tl-shot-3 { top: 268px; }
.lp-tl.is-dark .lp-tl-shot img { border-color: rgba(255, 255, 255, .16); }
@media (max-width: 960px) {
	.lp-tiles { grid-template-columns: 1fr; gap: 14px; margin-top: 40px; }
	.lp-tl { height: 480px; border-radius: 22px; }
	.lp-tl-text { padding: 32px 28px 0; }
	.lp-tl h3 { font-size: 27px; }
	.lp-tl p { font-size: 15.5px; }
	.lp-tl-shot { left: 28px; right: -24px; top: 206px; }
	.lp-tl-shot-1 { left: 50%; right: auto; width: 300px; top: 196px; }
	.lp-tl-shot-3 { top: 236px; }
}

/* landing compare: two quiet tiles */
.lp-vs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin-top: 56px; }
.lp-vs-tile { position: relative; min-width: 0; overflow: hidden; padding: 44px 44px 48px; border-radius: 28px; background: #fff; border: 1px solid var(--stone-line); }
.lp-vs-tile > * { position: relative; z-index: 1; }
.lp-vs-tile.is-us { background: var(--plum); color: #fff; border-color: var(--plum); }
.lp-vs-tile::after { content: ""; position: absolute; z-index: 0; right: -40px; bottom: -40px; width: 62%; height: 68%; pointer-events: none; background-repeat: no-repeat; background-position: right bottom; -webkit-mask-image: radial-gradient(85% 85% at 100% 100%, #000 30%, transparent 100%); mask-image: radial-gradient(85% 85% at 100% 100%, #000 30%, transparent 100%); }
.lp-vs-tile.is-us.bg-map::after { background-image: url(/assets/img/world-dots.webp); background-size: 560px auto; opacity: .22; }
.lp-vs-tile.is-us.bg-smm::after { background-image: url(/assets/img/hero-smm.svg); background-size: 760px auto; opacity: .16; }
.lp-vs-tile.is-alt::after { background-image: linear-gradient(var(--line-2) 1px, transparent 1px), linear-gradient(90deg, var(--line-2) 1px, transparent 1px); background-size: 28px 28px; opacity: .55; }
.lp-vs-logo { display: block; width: 132px; height: auto; margin-bottom: 22px; }
.lp-vs-kicker { display: block; margin: 7px 0 22px; font-size: 13px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); }
.lp-vs-tile h3 { margin: 0; font-size: clamp(24px, 2.2vw, 30px); font-weight: 650; letter-spacing: -0.03em; line-height: 1.1; text-wrap: balance; }
.lp-vs-list { list-style: none; margin: 26px 0 0; padding: 0; display: grid; gap: 11px; max-width: 420px; }
.lp-vs-list li { position: relative; padding-left: 28px; font-size: 15.5px; line-height: 1.45; }
.lp-vs-list li::before { content: ""; position: absolute; left: 0; top: 3px; width: 17px; height: 17px; border-radius: 50%; background: var(--violet) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4L18 8'/%3E%3C/svg%3E") center / 10px no-repeat; }
.lp-vs-tile.is-us .lp-vs-list li { color: rgba(255, 255, 255, .88); }
.lp-vs-list.is-no li { color: var(--ink-2); }
.lp-vs-list.is-no li::before { background: #efe9e8 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239b3b32' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M7 7l10 10M17 7L7 17'/%3E%3C/svg%3E") center / 9px no-repeat; }
@media (max-width: 960px) {
	.lp-vs { grid-template-columns: 1fr; gap: 14px; margin-top: 40px; }
	.lp-vs-tile { padding: 32px 28px 36px; border-radius: 22px; }
	.lp-vs-tile::after { width: 70%; height: 60%; }
}

/* landing pricing: one wide panel */
.lp-price { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 56px; border-radius: 28px; background: #ece7fb; overflow: hidden; }
.lp-price-col { position: relative; min-width: 0; display: flex; flex-direction: column; padding: 40px 36px 40px; }
.lp-price-col + .lp-price-col { border-left: 1px solid rgba(96, 17, 238, .14); }
.lp-price-name { font-size: 13px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--violet); }
.lp-price-num { display: block; margin-top: 22px; font-size: clamp(40px, 3.6vw, 56px); font-weight: 650; letter-spacing: -0.04em; line-height: 1; font-variant-numeric: tabular-nums; color: var(--ink); }
.lp-price-per { display: block; margin-top: 10px; font-size: 14.5px; line-height: 1.4; color: var(--ink-2); }
.lp-price-note { display: block; margin-top: 26px; padding-top: 18px; border-top: 1px solid rgba(96, 17, 238, .14); font-size: 15px; font-weight: 600; line-height: 1.4; color: var(--ink); text-wrap: balance; }
.lp-price-bar { display: block; height: 6px; margin-top: 16px; border-radius: 999px; background: #fff; overflow: hidden; }
.lp-price-bar i { display: block; height: 100%; border-radius: 999px; background: var(--violet); }
.lp-price-margin { display: block; margin-top: 8px; font-size: 13px; letter-spacing: .02em; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.lp-plans-foot { margin: 22px 4px 0; font-size: 14.5px; color: var(--mute); }
@media (max-width: 960px) {
	.lp-price { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 40px; border-radius: 22px; }
	.lp-price-col { padding: 28px 24px 30px; }
	.lp-price-col:nth-child(2n + 1) { border-left: 0; }
	.lp-price-col:nth-child(n + 3) { border-top: 1px solid rgba(96, 17, 238, .14); }
	.lp-price-num { font-size: 36px; }
}
@media (max-width: 520px) {
	.lp-price { grid-template-columns: 1fr; }
	.lp-price-col { border-left: 0; }
	.lp-price-col + .lp-price-col { border-left: 0; border-top: 1px solid rgba(96, 17, 238, .14); }
}
.lp-price-num small { display: block; margin-bottom: 6px; font-size: 14px; font-weight: 600; letter-spacing: .02em; color: var(--ink-2); }

/* landing faq: side column + white panel */
.lp-faq { display: grid; grid-template-columns: 5fr 7fr; gap: 40px 72px; align-items: start; }
.lp-faq-side { padding-top: 6px; }
.lp-faq-side h2 { font-size: clamp(34px, 3.6vw, 48px); font-weight: 650; letter-spacing: -0.03em; line-height: 1.06; text-wrap: balance; }
.lp-faq-side .sec-sub { margin-top: 16px; max-width: 36ch; }
.lp-faq-links { list-style: none; margin: 28px 0 0; padding: 0; display: grid; gap: 10px; }
.lp-faq-links a { font-size: 15px; font-weight: 600; color: var(--violet); text-decoration: none; }
.lp-faq-links a::after { content: " \2192"; }
.lp-faq-links a:hover { text-decoration: underline; }
.lp-faq-list { border-radius: 28px; background: #fff; border: 1px solid var(--stone-line); padding: 8px 36px; }
.lp-faq-list details { border-bottom: 1px solid var(--stone-line); }
.lp-faq-list details:last-child { border-bottom: 0; }
.lp-faq-list summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 22px 0; font-size: 18px; font-weight: 600; letter-spacing: -0.015em; line-height: 1.3; cursor: pointer; }
.lp-faq-list summary::-webkit-details-marker { display: none; }
.lp-faq-list summary::after { content: none; }
.lp-faq-list summary i { flex: none; width: 32px; height: 32px; border-radius: 50%; background: var(--violet-soft); position: relative; transition: transform .25s var(--ease), background .2s; }
.lp-faq-list summary i::before, .lp-faq-list summary i::after { content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 2px; background: var(--violet); transform: translate(-50%, -50%); border-radius: 2px; }
.lp-faq-list summary i::after { transform: translate(-50%, -50%) rotate(90deg); }
.lp-faq-list details[open] summary i { transform: rotate(45deg); background: var(--violet); }
.lp-faq-list details[open] summary i::before, .lp-faq-list details[open] summary i::after { background: #fff; }
.lp-faq-list .faq-a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .3s var(--ease); }
.lp-faq-list details[open] .faq-a { grid-template-rows: 1fr; }
.lp-faq-list .faq-a > p { overflow: hidden; margin: 0; max-width: 60ch; padding: 0 56px 0 0; font-size: 16px; line-height: 1.55; color: var(--ink-2); text-wrap: pretty; }
.lp-faq-list details[open] .faq-a > p { padding-bottom: 24px; margin-top: -6px; }
@media (max-width: 960px) {
	.lp-faq { grid-template-columns: 1fr; gap: 28px; }
	.lp-faq-list { border-radius: 22px; padding: 4px 22px; }
	.lp-faq-list summary { font-size: 16.5px; padding: 18px 0; gap: 16px; }
	.lp-faq-list .faq-a > p { padding-right: 0; }
}

/* landing screens: tiles with devices bleeding out */
.lp-sc { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin-top: 56px; }
.lp-sc-tile { position: relative; min-width: 0; height: 520px; overflow: hidden; border-radius: 28px; background: #fff; border: 1px solid var(--stone-line); }
.lp-sc-tile:first-child { grid-column: 1 / -1; height: 560px; }
.lp-sc-tile.is-dark { background: var(--plum); color: #fff; border-color: var(--plum); }
.lp-sc-tile.is-tint { background: #ece7fb; border-color: #ece7fb; }
.lp-sc-text { position: relative; z-index: 1; padding: 44px 44px 0; max-width: 520px; }
.lp-sc-tile h3 { margin: 0; font-size: clamp(26px, 2.4vw, 34px); font-weight: 650; letter-spacing: -0.03em; line-height: 1.08; text-wrap: balance; }
.lp-sc-tile p { margin: 12px 0 0; max-width: 34ch; font-size: 16px; line-height: 1.5; color: var(--ink-2); text-wrap: pretty; }
.lp-sc-tile.is-dark p { color: rgba(255, 255, 255, .72); }
.lp-sc-tile:first-child .lp-sc-text { max-width: 36%; padding-top: 0; position: absolute; top: 50%; transform: translateY(-50%); }
.lp-sc-media { position: absolute; }
.lp-sc-tile:first-child.is-laptop .lp-sc-media { right: -40px; bottom: -44px; width: 60%; }
.lp-sc-tile:not(:first-child).is-laptop .lp-sc-media { left: 44px; right: 44px; bottom: -36px; }
.lp-sc-tile.is-phone .lp-sc-media { left: 50%; bottom: -200px; width: 260px; transform: translateX(-50%); }
.lp-sc-tile.is-phone .lp-phone { max-width: 260px; }
.lp-sc-media .laptop { margin: 0; }
@media (max-width: 960px) {
	.lp-sc { grid-template-columns: 1fr; gap: 14px; margin-top: 40px; }
	.lp-sc-tile, .lp-sc-tile:first-child { height: 460px; border-radius: 22px; }
	.lp-sc-text, .lp-sc-tile:first-child .lp-sc-text { max-width: none; padding: 32px 28px 0; position: static; transform: none; }
	.lp-sc-tile h3 { font-size: 26px; }
	.lp-sc-tile:first-child.is-laptop .lp-sc-media, .lp-sc-tile:not(:first-child).is-laptop .lp-sc-media { left: 28px; right: -36px; width: auto; bottom: -30px; }
	.lp-sc-tile.is-phone .lp-sc-media { width: 230px; bottom: -130px; }
}

/* mobile: media flows under the text instead of absolute positioning */
@media (max-width: 960px) {
	.lp-tl { height: auto; padding-bottom: 0; }
	.lp-tl-shot, .lp-tl-shot-1, .lp-tl-shot-3 { position: relative; inset: auto; top: auto; bottom: auto; width: auto; transform: none; margin: 26px -24px 0 28px; max-height: 320px; overflow: hidden; }
	.lp-tl-shot-1 { width: 300px; margin: 26px auto 0; }
	.lp-tl-shot img { border-right: 1px solid rgba(17, 17, 24, .1); }
	.lp-tl-shot-1 img { border-radius: 16px 16px 0 0; }
	.lp-sc-tile, .lp-sc-tile:first-child { height: auto; }
	.lp-sc-media, .lp-sc-tile:first-child.is-laptop .lp-sc-media, .lp-sc-tile:not(:first-child).is-laptop .lp-sc-media { position: relative; inset: auto; width: auto; transform: none; margin: 28px -36px -26px 28px; }
	.lp-sc-tile.is-phone .lp-sc-media { position: relative; left: auto; right: auto; top: auto; bottom: auto; transform: none; width: 230px; margin: 30px auto -150px; }
}

/* product showcase: loader under the active tab */
.show-tabs button { position: relative; }
.show-bar { position: absolute; left: 0; right: 0; bottom: -2px; height: 3px; background: transparent; overflow: hidden; pointer-events: none; }
.show-tabs button[aria-selected="true"] .show-bar { background: var(--line-2); }
.show-bar i { display: block; width: 100%; height: 100%; background: var(--violet); transform: scaleX(0); transform-origin: 0 50%; }
.show.playing .show-tabs button[aria-selected="true"] .show-bar i { animation: showbar 5.5s linear forwards; }
.show:not(.playing) .show-tabs button[aria-selected="true"] .show-bar i { transform: scaleX(1); }
@keyframes showbar { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@media (max-width: 860px) {
	.sm-wrap { display: none; }
	.hero-grid { gap: 0; }
}
/* landing pricing: compact rows on phones */
@media (max-width: 520px) {
	.lp-price { border-radius: 20px; margin-top: 28px; }
	.lp-price-col { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "name name" "num note" "per note"; column-gap: 16px; row-gap: 0; align-items: center; padding: 16px 20px 18px; }
	.lp-price-col + .lp-price-col { border-top: 1px solid rgba(96, 17, 238, .14); }
	.lp-price-name { grid-area: name; font-size: 11.5px; }
	.lp-price-num { grid-area: num; margin-top: 8px; font-size: 30px; }
	.lp-price-num small { display: inline; margin: 0 4px 0 0; font-size: 12px; }
	.lp-price-per { grid-area: per; margin-top: 2px; font-size: 13px; }
	.lp-price-note { grid-area: note; margin: 8px 0 0; padding: 0; border: 0; max-width: 150px; text-align: right; font-size: 13px; }
	.lp-price-bar, .lp-price-margin { display: none; }
	.lp-plans-foot { margin-top: 14px; font-size: 13px; }
}

.lp-hero.hero-bg-platform::before { background-image: url(/assets/img/hero-platform.svg); background-size: 1240px auto; background-position: 72% 46%; opacity: .2; }
@media (max-width: 860px) { .lp-hero.hero-bg-platform::before { background-size: 900px auto; background-position: center 80%; opacity: .14; } }
@media (max-width: 860px) { .tour-bar, .show-bar { bottom: 0; height: 3px; } }

/* homepage hero: real image background */
.lp-hero.hero-bg-home { background-image: linear-gradient(90deg, var(--violet-ink) 0%, rgba(74, 12, 186, .92) 30%, rgba(74, 12, 186, .45) 58%, rgba(74, 12, 186, .05) 100%), url(/assets/img/hero-home-1536.webp); background-size: cover, cover; background-position: center, right center; }
.lp-hero.hero-bg-home::before { display: none; }
@media (max-width: 860px) { .lp-hero.hero-bg-home { background-image: linear-gradient(180deg, var(--violet-ink) 0%, rgba(74, 12, 186, .9) 45%, rgba(74, 12, 186, .35) 100%), url(/assets/img/hero-home-1024.webp); background-position: center, center bottom; } }
/* devices band: compact on phones */
@media (max-width: 600px) {
	.lp-devices { padding: 56px 0 60px; }
	.lp-device-grid, .lp-device-grid.is-many { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 28px; }
	.lp-device-grid li { padding: 13px 14px; }
	.lp-device-grid strong { font-size: 15.5px; gap: 10px; }
	.lp-device-grid .lp-brand { width: 18px; height: 18px; }
	.lp-device-grid span { display: none; }
}

/* homepage: provisioning + portal as tiles */
.hm-sc .lp-sc-tile:first-child { height: 600px; }
.hm-sc .lp-sc-tile .eyebrow { margin-bottom: 14px; color: var(--violet); }
.hm-sc .lp-sc-tile.is-dark .eyebrow { color: #c4b5fd; }
.hm-sc .lp-sc-tile h2 { margin: 0; font-size: clamp(28px, 2.6vw, 38px); font-weight: 650; letter-spacing: -0.03em; line-height: 1.06; text-wrap: balance; }
.hm-sc .lp-sc-tile:first-child .lp-sc-text { max-width: 40%; }
.hm-facts { list-style: none; margin: 22px 0 0; padding: 0; display: grid; gap: 9px; }
.hm-facts li { position: relative; padding-left: 22px; font-size: 14.5px; line-height: 1.45; color: var(--ink-2); }
.hm-facts li::before { content: ""; position: absolute; left: 0; top: 7px; width: 7px; height: 7px; border-radius: 50%; background: var(--violet); }
.hm-sc .lp-sc-tile:first-child.is-laptop .lp-sc-media { width: 56%; right: -30px; bottom: -40px; }
/* homepage: panel tour inside a dark tile */
/* homepage: product showcase stage inside a tint tile */
@media (max-width: 860px) {
	.hm-sc .lp-sc-tile:first-child { height: auto; }
	.hm-sc .lp-sc-tile:first-child .lp-sc-text { max-width: none; }
	.hm-facts li { font-size: 14px; }
	/* catalog list: names only, two columns */
	.catalog .cat-d { display: none; }
	.cat-col ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 14px; }
	.cat-col li a { padding: 9px 0; font-size: 14px; }
}
@media (max-width: 860px) { .catalog li a, .catalog li:first-child a { border-top: 0; } .cat-col ul { border-top: 1px solid var(--line); padding-top: 6px; } }
/* homepage tiles: text top-left, tighter heights; tour tile spacing */
.hm-sc .lp-sc-tile:first-child { height: 540px; }
.hm-sc .lp-sc-tile:first-child .lp-sc-text { position: static; transform: none; padding: 44px 0 0 44px; max-width: 42%; }
.hm-sc .lp-sc-tile:first-child.is-laptop .lp-sc-media { width: 58%; right: -40px; bottom: -48px; }
.tour { margin-top: 40px; }
@media (max-width: 860px) {
	.hm-sc .lp-sc-tile:first-child { height: auto; }
	.hm-sc .lp-sc-tile:first-child .lp-sc-text { max-width: none; padding: 32px 28px 0; }
	.hm-sc .lp-sc-tile:first-child.is-laptop .lp-sc-media { position: relative; width: auto; left: auto; right: auto; bottom: auto; margin: 28px -36px -26px 28px; }
	.tour { margin-top: 28px; }
}
@media (max-width: 860px) { .sec { padding: 64px 0; } .sec.band { padding: 60px 0; } }

/* homepage: who-it-is-for tiles */
.hm-bento .lp-tile h3 { font-size: 19px; white-space: nowrap; }
.hm-bento .lp-tile p { min-height: calc(1.5em * 2); }
.hm-who { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin-top: 52px; }
.hm-who-tile { min-width: 0; padding: 36px 36px 34px; border-radius: 28px; background: #fff; border: 1px solid var(--stone-line); }
.hm-who-tile.is-tint { background: #ece7fb; border-color: #ece7fb; }
.hm-who-tile h3 { display: flex; align-items: center; gap: 12px; margin: 0; font-size: 24px; font-weight: 650; letter-spacing: -0.025em; line-height: 1.15; }
.hm-who-tile h3 .lp-ico { flex: none; width: 24px; height: 24px; color: var(--violet); }
.hm-who-tile p { margin: 12px 0 0; max-width: 46ch; font-size: 16px; line-height: 1.5; color: var(--ink-2); text-wrap: pretty; }
.hm-chips { list-style: none; margin: 20px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.hm-chips li { padding: 7px 12px; border-radius: 999px; border: 1px solid var(--line-2); background: #fff; font-size: 13px; font-weight: 600; color: var(--ink); }
.hm-who-tile.is-tint .hm-chips li { border-color: rgba(96, 17, 238, .22); }
@media (max-width: 860px) {
	.hm-who { grid-template-columns: 1fr; gap: 12px; margin-top: 36px; }
	.hm-who-tile { padding: 26px 24px 26px; border-radius: 22px; }
	.hm-who-tile h3 { font-size: 21px; }
	.hm-chips li { padding: 6px 10px; font-size: 12.5px; }
}
/* homepage tiles: text vertically centered on desktop */
.hm-sc .lp-sc-tile:first-child .lp-sc-text { position: absolute; top: 50%; transform: translateY(-50%); padding: 0 0 0 44px; }
@media (max-width: 860px) { .hm-sc .lp-sc-tile:first-child .lp-sc-text { position: static; transform: none; padding: 32px 28px 0; } }
/* margin calculator: tint panel, violet keep */
.margin { border: 0; border-radius: 28px; background: #ece7fb; }
.margin-tabs { gap: 8px; padding: 24px 28px 0; border-bottom: 0; background: transparent; }
.margin-tabs button { height: 34px; padding: 0 14px; border: 1px solid rgba(96, 17, 238, .22); border-radius: 999px; background: #fff; font-size: 13.5px; font-weight: 600; color: var(--ink); }
.margin-tabs button[aria-selected="true"] { border-color: var(--violet); background: var(--violet); color: #fff; }
.margin-nums { padding: 30px 28px 0; }
.margin-nums div + div { border-left-color: rgba(96, 17, 238, .14); }
.margin-nums dt { color: var(--violet); }
.margin-nums dd { font-weight: 650; }
.margin-nums small { color: var(--ink-2); }
.margin-nums .keep dd { color: var(--violet); }
.margin-bar { height: 8px; margin: 28px 28px 0; border-radius: 999px; background: #fff; }
.mb-cost { background: rgba(96, 17, 238, .18); }
.mb-keep { background: var(--violet); }
.margin-note { padding: 14px 28px 26px; color: var(--ink-2); }
@media (max-width: 860px) { .margin { border-radius: 22px; } .margin-tabs { padding: 18px 20px 0; } .margin-nums { padding: 22px 20px 0; } .margin-bar { margin: 22px 20px 0; } .margin-note { padding: 12px 20px 20px; } }

/* faq page */
.fq-hero { padding: 64px 0 60px; }
.fq-hero-text { max-width: 720px; }
.fq-chips { list-style: none; margin: 32px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.fq-chips a { display: inline-flex; align-items: center; gap: 10px; padding: 11px 16px; border-radius: 999px; color: #fff; font-size: 14.5px; font-weight: 600; text-decoration: none; transition: border-color .15s; }
.fq-chips a:hover { border-color: rgba(255, 255, 255, .4); }
.fq-chips a span { display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 22px; padding: 0 7px; border-radius: 999px; background: rgba(255, 255, 255, .14); font-size: 12px; }
.fq-cat { scroll-margin-top: 90px; }
.fq-cat.sec-tint { margin: 0; }
.fq-cat .lp-faq-side .eyebrow { color: var(--violet); }
.fq-cat .lp-faq-side h2 { font-size: clamp(30px, 3.2vw, 42px); }
.fq-answer { overflow: hidden; }
.fq-answer > p { margin: 0 0 10px; max-width: 60ch; font-size: 16px; line-height: 1.55; color: var(--ink-2); }
.fq-list { list-style: none; margin: -4px 0 0; padding: 0 56px 0 0; display: grid; gap: 8px; }
.fq-list li { position: relative; padding-left: 26px; font-size: 15.5px; line-height: 1.5; color: var(--ink-2); }
.fq-list li::before { content: ""; position: absolute; left: 0; top: 4px; width: 16px; height: 16px; border-radius: 50%; background: var(--violet) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4L18 8'/%3E%3C/svg%3E") center / 10px no-repeat; }
.lp-faq-list details[open] .faq-a > .fq-answer { padding-bottom: 24px; }
.lp-faq-list .faq-a > .fq-answer { margin-top: -6px; }
@media (max-width: 860px) { .fq-hero { padding: 48px 0 44px; } .fq-chips { gap: 8px; } .fq-chips a { padding: 9px 13px; font-size: 13.5px; } .fq-list { padding-right: 0; } }
/* product pages: landing-style vocabulary */
.pr-hero .lp-eyebrow a { color: rgba(255, 255, 255, .7); text-decoration: none; }
.pr-hero .lp-eyebrow span { margin: 0 8px; }
.pr-hero .lp-note a { color: #fff; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.pr-hero .lp-hero-grid.is-text { grid-template-columns: minmax(0, 760px); }
.pr-hero .lp-stats.is-many { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.pr-hero .lp-hero-media.is-portrait { display: flex; justify-content: center; }
.pr-hero-phone { max-width: 280px; }
.pr-grid { display: grid; gap: 16px; margin-top: 48px; }
.pr-grid.cols2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pr-grid.cols3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pr-grid.cols4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.pr-tile { min-width: 0; padding: 30px 30px 32px; border-radius: 24px; background: #fff; border: 1px solid var(--stone-line); }
.pr-tile.is-tint { background: #ece7fb; border-color: #ece7fb; }
.sec-tint .pr-tile { border-color: var(--stone-line); }
.sec-tint .pr-tile.is-tint { background: #e4dcfa; border-color: #e4dcfa; }
.pr-tile h3 { margin: 0; font-size: 20px; font-weight: 650; letter-spacing: -0.022em; line-height: 1.2; text-wrap: balance; }
.pr-tile .pr-tile-h2 { margin: 0; font-size: 26px; font-weight: 650; letter-spacing: -0.028em; line-height: 1.12; text-wrap: balance; }
.pr-tile p { margin: 10px 0 0; font-size: 15.5px; line-height: 1.5; color: var(--ink-2); text-wrap: pretty; }
.pr-tile .card-link { color: inherit; text-decoration: none; }
.pr-tile .card-link::after { content: " \2192"; color: var(--violet); }
.pr-step { display: block; margin-bottom: 12px; font-size: 12.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--violet); }
.pr-list { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 8px; }
.pr-list li { position: relative; padding-left: 26px; font-size: 15px; line-height: 1.45; color: var(--ink-2); }
.pr-list li::before { content: ""; position: absolute; left: 0; top: 3px; width: 16px; height: 16px; border-radius: 50%; background: var(--violet) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4L18 8'/%3E%3C/svg%3E") center / 10px no-repeat; }
.pr-panel { margin-top: 44px; padding: 32px 36px 34px; border-radius: 24px; background: #ece7fb; }
.pr-panel.is-after { margin-top: 20px; }
.sec-tint .pr-panel { background: #fff; border: 1px solid var(--stone-line); }
.pr-list-wide { margin: 0; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 36px; }
.pr-list-wide li { font-size: 16px; color: var(--ink); }
.pr-prose { max-width: 68ch; margin-top: 28px; }
.pr-prose.is-after { margin-top: 26px; }
.pr-prose p { margin: 0 0 14px; font-size: 17px; line-height: 1.6; color: var(--ink-2); text-wrap: pretty; }
.pr-sc { margin-top: 48px; }
.pr-sc .lp-sc-tile:not(:first-child) { height: 420px; }
.pr-sc .lp-sc-tile:first-child { height: 520px; }
.pr-sc .lp-sc-tile .lp-sc-text { max-width: 44%; position: absolute; top: 50%; transform: translateY(-50%); padding: 0 0 0 40px; }
.pr-sc .lp-sc-tile:not(:first-child) .lp-sc-text { position: static; transform: none; max-width: none; padding: 36px 36px 0; }
.pr-sc .lp-sc-tile h3 { font-size: clamp(22px, 2vw, 28px); }
.pr-sc .lp-sc-tile:first-child.is-laptop .lp-sc-media { width: 54%; right: -30px; bottom: -40px; }
.pr-sc .lp-sc-tile:not(:first-child).is-laptop .lp-sc-media { left: 36px; right: 36px; bottom: -34px; }
.pr-sc-one .lp-sc-tile:first-child { grid-column: 1 / -1; height: auto; padding: 40px 40px 0; }
.pr-sc-one .lp-sc-tile .lp-sc-media { position: relative; inset: auto; width: auto; transform: none; margin: 0 auto -8px; max-width: 980px; }
.pr-sc-one .lp-sc-tile .lp-sc-text { display: none; }
.pr-sc-one.is-after { margin-top: 24px; }
.pr-phone { max-width: 280px; margin: 0 auto 32px; }
.sec-tint .lp-sc-tile.is-white, .sec-tint .pr-sc .lp-sc-tile.is-tint { border-color: var(--stone-line); }
@media (max-width: 1100px) { .pr-grid.cols4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .pr-grid.cols3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 860px) {
	.pr-grid, .pr-grid.cols2, .pr-grid.cols3, .pr-grid.cols4 { grid-template-columns: 1fr; gap: 12px; margin-top: 32px; }
	.pr-tile { padding: 22px 22px 24px; border-radius: 20px; }
	.pr-tile h3 { font-size: 18px; }
	.pr-tile .pr-tile-h2 { font-size: 22px; }
	.pr-panel { margin-top: 28px; padding: 22px 22px 24px; border-radius: 20px; }
	.pr-list-wide { grid-template-columns: 1fr; gap: 10px; }
	.pr-sc { margin-top: 32px; }
	.pr-sc .lp-sc-tile, .pr-sc .lp-sc-tile:first-child, .pr-sc .lp-sc-tile:not(:first-child) { height: auto; }
	.pr-sc .lp-sc-tile .lp-sc-text, .pr-sc .lp-sc-tile:not(:first-child) .lp-sc-text { position: static; transform: none; max-width: none; padding: 28px 28px 0; }
	.pr-sc .lp-sc-tile:first-child.is-laptop .lp-sc-media, .pr-sc .lp-sc-tile:not(:first-child).is-laptop .lp-sc-media { position: relative; inset: auto; width: auto; margin: 24px -36px -26px 28px; }
	.pr-sc-one .lp-sc-tile:first-child { padding: 20px 20px 0; }
	.pr-sc-one .lp-sc-tile .lp-sc-media { margin: 0 0 -6px; }
	.pr-hero .lp-stats.is-many { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.pr-hero .lp-hero-media.is-portrait .pr-hero-phone { display: block; max-width: 220px; }
}
/* product bento */
.pr-bento { margin-top: 48px; }
.pr-bento.is-three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pr-bento .lp-tile .pr-list { margin: 12px 24px 0; }
.pr-bento .lp-tile .pr-list li { font-size: 14.5px; }
.sec-tint .pr-bento .lp-tile { border-color: var(--stone-line); }
.pr-sc-one .lp-sc-media.pr-plain { margin: 0 auto; padding: 0 0 36px; max-width: 900px; }
.pr-sc-one .lp-sc-media.pr-plain img { display: block; width: 100%; height: auto; border-radius: 16px; }
@media (max-width: 1100px) { .pr-bento.is-three { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .pr-bento.is-three { grid-template-columns: 1fr; } .pr-sc-one .lp-sc-media.pr-plain { padding-bottom: 20px; } }
/* product bento: uniform tile heights */
.pr-bento .lp-tile .lp-art, .pr-bento .lp-tile.is-wide .lp-art, .pr-bento .lp-tile.is-wide .lp-art-network, .pr-bento .lp-tile.is-wide .lp-art-support { height: 170px; }
@media (max-width: 560px) { .pr-bento .lp-tile h3, .pr-bento .lp-tile p, .pr-bento .lp-tile .pr-list { min-height: 0; -webkit-line-clamp: unset; display: block; } }
/* product: heading + check list as one split tile; trailing image as a visual band */
.pr-split { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 40px 64px; align-items: center; padding: 44px 48px; border-radius: 28px; background: #ece7fb; }
.sec-tint .pr-split { background: #fff; border: 1px solid var(--stone-line); }
.pr-split-text h2 { margin: 0; font-size: clamp(28px, 2.8vw, 38px); font-weight: 650; letter-spacing: -0.03em; line-height: 1.08; text-wrap: balance; }
.pr-split-text .sec-sub { margin-top: 14px; }
.pr-list-big { gap: 12px; }
.pr-list-big li { font-size: 16.5px; color: var(--ink); padding-left: 30px; }
.pr-list-big li::before { width: 18px; height: 18px; top: 2px; background-size: 11px; }
.pr-visual { margin-top: 20px; padding: 36px 40px; border-radius: 24px; background: #ece7fb; }
.sec-tint .pr-visual { background: #fff; border: 1px solid var(--stone-line); }
.pr-visual img { display: block; width: 100%; max-width: 980px; height: auto; margin: 0 auto; }
@media (max-width: 860px) { .pr-split { grid-template-columns: 1fr; gap: 22px; padding: 26px 24px; border-radius: 22px; } .pr-visual { padding: 18px; border-radius: 20px; } }
/* site-wide tile text rhythm (desktop): one-line titles (JS-fitted), fixed description line counts */
@media (min-width: 861px) {
	.pr-bento .lp-tile h3, .pr-tile h3, .hm-who-tile h3, .hm-bento .lp-tile h3 { min-height: 0; white-space: nowrap; overflow: hidden; display: flex; }
	.pr-bento .lp-tile p { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 5; overflow: hidden; }
	.pr-tile p { min-height: calc(1.5em * 4); display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; overflow: hidden; }
	.pr-grid.cols2 .pr-tile p, .pr-grid.is-steps .pr-tile p { min-height: calc(1.5em * 3); -webkit-line-clamp: 3; }
	.hm-who-tile p { min-height: calc(1.5em * 2); display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
	.hm-bento .lp-tile p { min-height: calc(1.5em * 2); display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
}
}

/* product bento: uniform columns, one-line titles (fitted by JS) */
.pr-bento.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pr-bento.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pr-bento.cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 1100px) { .pr-bento.cols-3, .pr-bento.cols-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .pr-bento.cols-2, .pr-bento.cols-3, .pr-bento.cols-4 { grid-template-columns: 1fr; } }

/* ==========================================================================
   /products template (app/pages/product.php). Scoped to .pt-*, nothing shared.
   ========================================================================== */
.pt-hero .lp-eyebrow { display: flex; align-items: center; gap: 0; }
.pt-app { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; margin: 0 12px 0 0 !important; border-radius: 9px; background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .22); color: #fff; }
.pt-app .lp-ico { width: 17px; height: 17px; }
.pt-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 48px; }
.pt-tile { display: grid; grid-row: span 3; grid-template-rows: subgrid; row-gap: 0; min-width: 0; overflow: hidden; border: 1px solid var(--stone-line); border-radius: 24px; background: #fff; }
.pt-box { position: relative; display: flex; align-items: flex-start; justify-content: center; height: 232px; padding: 24px 22px 0; overflow: hidden; }
.pt-box.is-light { background: #ece7fb; }
.pt-box img { position: relative; z-index: 1; display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; border: 1px solid rgba(255, 255, 255, .22); border-bottom: 0; border-radius: 14px 14px 0 0; background: #fff; }
.pt-box.is-light img { border-color: var(--stone-line); }
.pt-tile h3 { display: flex; align-items: center; gap: 10px; margin: 20px 24px 0; font-size: 19px; font-weight: 650; letter-spacing: -0.02em; line-height: 1.25; }
.pt-tile h3 .lp-ico { flex: none; width: 20px; height: 20px; color: var(--violet); }
.pt-tile-h { margin: 20px 24px 0; }
.pt-tile-h h3 { margin: 0; }
.pt-step { display: block; margin-bottom: 8px; font-size: 12.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--violet); }
.pt-tile p { margin: 8px 24px 26px; font-size: 15px; line-height: 1.5; color: var(--ink-2); text-wrap: pretty; }
/* real screens: tabs with the violet loader beside one laptop */
.pt-sc { margin-top: 44px; }
.pt-sc-tabs { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 20px; margin-bottom: 28px; }
.pt-sc-tabs button { position: relative; display: flex; flex-direction: column; justify-content: flex-start; width: 100%; padding: 0 0 16px; border: 0; background: none; font: inherit; text-align: left; cursor: pointer; }
.pt-sc-name { display: block; font-size: 16.5px; font-weight: 550; letter-spacing: -0.012em; color: var(--ink-2); }
.pt-sc-tabs button:hover .pt-sc-name, .pt-sc-tabs button[aria-selected="true"] .pt-sc-name { color: var(--ink); }
.pt-sc-tabs button[aria-selected="true"] .pt-sc-name { font-weight: 650; }
.pt-sc-cap { display: block; margin-top: 3px; font-size: 14px; line-height: 1.4; color: var(--mute); }
.pt-bar { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; overflow: hidden; border-radius: 3px; background: var(--stone-line); pointer-events: none; }
.pt-bar i { display: block; width: 100%; height: 100%; background: var(--violet); transform: scaleX(0); transform-origin: 0 50%; }
.pt-sc.playing .pt-sc-tabs button[aria-selected="true"] .pt-bar i { animation: ptbar 4.5s linear forwards; }
.pt-sc.held.playing .pt-sc-tabs button[aria-selected="true"] .pt-bar i { animation-play-state: paused; }
@keyframes ptbar { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.pt-sc-stage { min-width: 0; }
.pt-sc-track { position: relative; display: grid; }
.pt-sc-slide { grid-area: 1 / 1; min-width: 0; opacity: 0; pointer-events: none; transition: opacity .5s var(--ease); }
.pt-sc-slide.on { opacity: 1; pointer-events: auto; }
.pt-sc .laptop { padding: 0 4.545%; } /* base = content width, lid sits inside it, so it stays a laptop */
.pt-sc-foot { display: none; }
.pt-sc-now { min-width: 0; margin: 0; font-size: 15px; line-height: 1.45; color: var(--ink-2); }
/* arrows for anything that swipes on phones */
.pt-nav { display: none; gap: 8px; flex: none; }
.pt-nav button { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; padding: 0; border: 1px solid var(--stone-line); border-radius: 50%; background: #fff; color: var(--violet); cursor: pointer; transition: opacity .15s; }
.pt-nav button:disabled { opacity: .4; cursor: default; }
.pt-nav .lp-ico { width: 18px; height: 18px; color: inherit; stroke-width: 2; }
/* big split box: copy on the left, real phones bleeding off the bottom right */
.pt-split { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 548px; gap: 28px; min-height: 620px; overflow: hidden; border-radius: 28px; color: #fff; background: var(--plum); background-image: radial-gradient(55% 70% at 88% 12%, rgba(124, 58, 237, .62), transparent 70%), radial-gradient(45% 60% at 0% 100%, rgba(96, 17, 238, .42), transparent 70%); }
.pt-split-text { align-self: center; padding: 56px 0 56px 56px; }
.pt-split .eyebrow { margin-bottom: 14px; color: #c4b5fd; }
.pt-split h2 { margin: 0; color: #fff; font-size: clamp(30px, 3.2vw, 44px); font-weight: 650; letter-spacing: -0.03em; line-height: 1.08; text-wrap: balance; }
.pt-split-sub { margin: 16px 0 0; max-width: 46ch; font-size: 17px; line-height: 1.55; color: rgba(255, 255, 255, .76); text-wrap: pretty; }
.pt-points { list-style: none; margin: 30px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 28px; }
.pt-points h3 { display: flex; align-items: center; gap: 9px; margin: 0; font-size: 16px; font-weight: 650; letter-spacing: -0.015em; line-height: 1.25; color: #fff; white-space: nowrap; }
.pt-points h3 .lp-ico { flex: none; width: 18px; height: 18px; color: #c4b5fd; }
.pt-points p { margin: 6px 0 0; font-size: 14.5px; line-height: 1.45; color: rgba(255, 255, 255, .7); text-wrap: pretty; }
.pt-split-media { position: relative; min-width: 0; }
.pt-split-media .lp-phone { position: absolute; width: 254px; max-width: none; border-color: #4b4b5a; }
.pt-split-media .lp-phone:nth-child(1) { top: 48px; left: 0; z-index: 2; }
.pt-split-media .lp-phone:nth-child(2) { top: 112px; right: 26px; z-index: 1; }
/* phone status bar sits either side of the notch on any screen */
.pt-status { position: absolute; z-index: 3; top: 0; left: 0; right: 0; display: flex; align-items: center; justify-content: space-between; height: 38px; padding: 0 19px 0 25px; color: #fff; font-size: 12px; font-weight: 600; letter-spacing: -0.01em; }
.pt-status svg { width: 42px; height: 11px; }
.pt-status.is-dark { color: #111827; }
/* hero: laptop behind, the live call in front */
.pt-hero .lp-hero-media.has-call { display: flex; align-items: center; justify-content: center; padding: 0; }
.pt-hero .has-call .lp-phone { z-index: 2; width: 270px; max-width: none; border-color: #4b4b5a; }
/* animated live call, plays the demo call script (site.js) */
.pt-call { display: flex; flex-direction: column; align-items: center; padding: 54px 14px 18px; color: #fff; text-align: center; background: #3a0a9c; background-image: radial-gradient(90% 46% at 50% 0%, rgba(124, 58, 237, .6), transparent 100%); }
.pt-call-av { position: relative; display: inline-flex; align-items: center; justify-content: center; flex: none; width: 66px; height: 66px; border-radius: 50%; background: var(--violet); color: #fff; }
.pt-call-av .lp-ico { width: 30px; height: 30px; }
.pt-call-av::after { content: ""; position: absolute; inset: -1px; border: 1px solid rgba(196, 181, 253, .75); border-radius: 50%; animation: ptring 2.2s ease-out infinite; }
.pt-call-name { margin-top: 12px; font-size: 16.5px; font-weight: 650; letter-spacing: -0.02em; line-height: 1.2; }
.pt-call-time { margin-top: 4px; font-size: 13px; color: rgba(255, 255, 255, .68); font-variant-numeric: tabular-nums; }
.pt-wave { display: flex; align-items: center; justify-content: center; gap: 3px; flex: none; height: 44px; margin-top: 14px; }
.pt-wave i { display: block; width: 3px; height: 38px; border-radius: 3px; background: #c4b5fd; transform: scaleY(.18); animation: ptwave 1s ease-in-out infinite alternate; transition: background .25s; }
.pt-wave i:nth-child(3n) { animation-duration: .72s; }
.pt-wave i:nth-child(3n+1) { animation-duration: 1.18s; animation-delay: -.3s; }
.pt-wave i:nth-child(4n) { animation-duration: .86s; animation-delay: -.55s; }
.pt-wave i:nth-child(5n) { animation-duration: 1.32s; animation-delay: -.8s; }
.pt-call[data-who="caller"] .pt-wave i { background: #fff; }
.pt-call-cap { display: block; width: 100%; flex: none; min-height: 146px; margin-top: 16px; padding: 11px 13px; border: 1px solid rgba(255, 255, 255, .13); border-radius: 14px; background: rgba(255, 255, 255, .07); text-align: left; transition: opacity .24s; }
.pt-call-cap.swap { opacity: 0; }
.pt-call-who { display: block; margin-bottom: 4px; font-size: 10.5px; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; color: #c4b5fd; }
.pt-call[data-who="caller"] .pt-call-who { color: rgba(255, 255, 255, .7); }
.pt-call-text { display: block; font-size: 13px; line-height: 1.42; }
.pt-call-btns { display: flex; align-items: center; justify-content: center; gap: 16px; flex: none; margin-top: auto; }
.pt-call-btns > span { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 50%; background: rgba(255, 255, 255, .13); color: #fff; }
.pt-call-btns .lp-ico { width: 19px; height: 19px; }
.pt-call-btns > .is-end { background: #e5352b; }
.pt-call-btns > .is-end .lp-ico { fill: currentColor; stroke: none; }
.pt-call.is-off .pt-wave i, .pt-call.is-off .pt-call-av::after, .pt-call.is-held .pt-wave i, .pt-call.is-held .pt-call-av::after { animation-play-state: paused; }
@keyframes ptwave { from { transform: scaleY(.18); } to { transform: scaleY(1); } }
@keyframes ptring { from { transform: scale(1); opacity: .9; } to { transform: scale(1.45); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .pt-wave i, .pt-call-av::after { animation: none; } .pt-wave i { transform: scaleY(.5); } }
/* plans reuse the landing price panel at three columns, with a feature list */
.lp-price.pt-plans { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pt-plans .pr-list { margin-top: 22px; }
.pt-more { display: none; align-items: center; justify-content: space-between; width: 100%; margin-top: 12px; padding: 10px 0 0; border: 0; border-top: 1px solid rgba(96, 17, 238, .14); background: none; font: inherit; font-size: 13.5px; font-weight: 600; color: var(--violet); cursor: pointer; }
.pt-more i { width: 8px; height: 8px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-2px) rotate(45deg); transition: transform .34s var(--ease); }
.lp-price-col.open .pt-more i { transform: translateY(2px) rotate(225deg); }
.pt-plans .pr-list li { font-size: 14.5px; }
.pt-plans .lp-price-num { font-size: clamp(40px, 3.8vw, 56px); }
h3.lp-price-name { margin: 0; line-height: inherit; }
.pt-plans + .lp-plans-foot { margin-left: 0; }
.pt-hero h1 { font-size: clamp(40px, 4.5vw, 62px); }
@media (max-width: 1100px) {
	.pt-hero .lp-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.pt-hero .has-call .lp-phone { width: 244px; }
}
@media (max-width: 1180px) { .pt-split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .pt-points { grid-template-columns: minmax(0, 1fr); gap: 14px; } .pt-split-text { padding: 44px 0 44px 44px; } .pt-split-media .lp-phone { width: 232px; } .pt-split-media .lp-phone:nth-child(2) { display: none; } .pt-split-media .lp-phone:nth-child(1) { left: 50%; transform: translateX(-50%); } }
@media (max-width: 1000px) { .pt-grid:not(.is-steps) { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 960px) {
	.lp-price.pt-plans { grid-template-columns: 1fr; }
	.pt-plans .lp-price-col:nth-child(n) { border-left: 0; }
	.pt-plans .lp-price-col + .lp-price-col { border-top: 1px solid rgba(96, 17, 238, .14); }
}
@media (max-width: 860px) {
	.pt-hero .lp-hero-media:not(.has-call) { display: none; }
	.lp-hero.pt-hero { padding-bottom: 0; }
	.pt-hero .lp-hero-grid { gap: 30px; }
	.pt-hero .lp-hero-media.has-call { align-items: flex-start; height: auto; overflow: visible; padding-bottom: 28px; }
	.pt-hero .has-call .lp-phone { width: 100%; max-width: 420px; }
	.pt-hero .has-call .pt-status { height: 42px; padding: 0 26px 0 32px; }
	.pt-call { padding: 62px 18px 18px; }
	.pt-call-av { width: 76px; height: 76px; }
	.pt-call-av .lp-ico { width: 34px; height: 34px; }
	.pt-call-name { font-size: 19px; }
	.pt-call-time { font-size: 14px; }
	.pt-wave { gap: 7px; height: 52px; margin-top: 16px; }
	.pt-wave i { width: 4px; height: 46px; }
	.pt-wave i:nth-child(2n) { display: none; }
	.pt-call-cap { padding: 13px 16px; }
	.pt-call-text { font-size: 15px; }
	/* long tile lists swipe sideways on phones instead of stacking */
	.pt-grid.pt-swipe, .pt-sc-track { position: relative; display: flex; gap: 12px; margin: 32px calc(var(--gut) * -1) 0; padding: 0 var(--gut); overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding: 0 var(--gut); scrollbar-width: none; -webkit-overflow-scrolling: touch; }
	.pt-grid.pt-swipe::-webkit-scrollbar, .pt-sc-track::-webkit-scrollbar { display: none; }
	.pt-sc-track { margin-top: 0; }
	.pt-sc-slide { flex: 0 0 calc(100% - 40px); scroll-snap-align: start; opacity: 1; pointer-events: auto; }
	.js .pt-swipe .pt-tile, .js .pt-sc-slide { transition: filter .2s linear, opacity .2s linear; }
	.js .pt-swipe .pt-tile:not(.on), .js .pt-sc-slide:not(.on) { opacity: .6; }
	.js .pt-swipe .pt-tile.on + .pt-tile, .js .pt-sc-slide.on + .pt-sc-slide { filter: blur(2px); } /* only the one peeking item, blurring all of them is costly on phones */
	.pt-hero .lp-glass { -webkit-backdrop-filter: none; backdrop-filter: none; background: rgba(255, 255, 255, .1); }
	.page-product .nav-wrap { -webkit-backdrop-filter: none; backdrop-filter: none; background: #fff; }
	.pt-swipe .pt-tile { display: flex; flex-direction: column; flex: 0 0 calc(100% - 40px); scroll-snap-align: start; border-radius: 20px; }
	.pt-box { height: auto; aspect-ratio: 1.68; padding: 18px 18px 0; }
	.pt-box img { height: auto; }
	.pt-nav { display: flex; }
	.pt-swipe + .pt-nav { justify-content: flex-end; margin-top: 14px; }
	.pt-sc-foot { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-top: 16px; }
	.pt-hero .lp-stats { gap: 8px; margin-top: 24px; }
	.pt-hero .lp-stats li { display: flex; align-items: center; gap: 10px; padding: 10px 12px; }
	.pt-hero .lp-stats strong { flex: none; font-size: 20px; white-space: nowrap; }
	.pt-hero .lp-stats span { margin: 0; font-size: 12px; line-height: 1.25; }
	.pt-tile h3 { margin: 16px 18px 0; font-size: 18px; }
	.pt-tile-h { margin: 16px 18px 0; }
	.pt-tile-h h3 { margin: 0; }
	.pt-tile p { margin: 6px 18px 20px; font-size: 14.5px; }
	.pt-split { grid-template-columns: minmax(0, 1fr); gap: 0; min-height: 0; border-radius: 22px; }
	.pt-split-text { padding: 30px 24px 26px; }
	.pt-split h2 { font-size: 28px; }
	.pt-split-sub { font-size: 15.5px; }
	.pt-points { grid-template-columns: minmax(0, 1fr); gap: 14px; margin-top: 20px; }
	.pt-points h3 { font-size: 15.5px; }
	.pt-points p { margin-top: 3px; font-size: 14px; }
	.pt-split-media { display: flex; align-items: flex-start; justify-content: center; height: 436px; padding: 0 24px; overflow: hidden; }
	.pt-split-media .lp-phone:nth-child(1) { position: relative; top: auto; left: auto; width: 100%; max-width: 420px; transform: none; }
	.pt-split-media .pt-status { height: 42px; padding: 0 26px 0 32px; }
	.pt-split-media .lp-phone:nth-child(2) { display: none; }
	.pt-sc { margin-top: 28px; }
	.pt-sc-tabs { display: flex; gap: 0; margin: 0 calc(var(--gut) * -1) 18px; padding: 0 var(--gut); overflow-x: auto; border-bottom: 1px solid var(--stone-line); scrollbar-width: none; }
	.pt-sc-tabs::-webkit-scrollbar { display: none; }
	.pt-sc-tabs button { flex: none; width: auto; padding: 0 14px 12px 0; }
	.pt-sc-tabs button + button { padding-left: 14px; }
	.pt-sc-name { font-size: 15px; }
	.pt-sc-cap { display: none; }
	.pt-bar { background: transparent; }
	.pt-sc-tabs button[aria-selected="true"] .pt-bar { background: var(--line-2); }
}
@media (max-width: 520px) {
	.pt-plans .lp-price-col { grid-template-areas: "name name" "num note" "per note" "more more" "list list"; }
	.pt-more { display: flex; grid-area: more; margin-top: 8px; padding-top: 8px; }
	.pt-plans .lp-price-col { padding: 13px 18px 12px; }
	.pt-plans .lp-price-num { margin-top: 5px; font-size: 26px; }
	.js .pt-plans .lp-price-col:not(.open):not(.closing) .pr-list { display: none; }
	.pt-plans .lp-price-num { font-size: 30px; }
	.pt-plans .pr-list { grid-area: list; margin-top: 12px; gap: 6px; }
	.pt-plans .pr-list li { font-size: 14px; }
}
/* per-product hero and footer images: same overlays as the shared ones, set here because the CSP blocks inline styles */
.lp-hero.hero-bg-home.pt-bg-air { background-image: linear-gradient(90deg, var(--violet-ink) 0%, rgba(74, 12, 186, .92) 30%, rgba(74, 12, 186, .45) 58%, rgba(74, 12, 186, .05) 100%), url(/assets/img/products/air-hero.webp); }
.cta-band.cta-img-products.pt-bg-air { background-image: url(/assets/img/products/air-cta.webp); }
@media (max-width: 860px) { .lp-hero.hero-bg-home.pt-bg-air { background-image: linear-gradient(180deg, var(--violet-ink) 0%, rgba(74, 12, 186, .9) 45%, rgba(74, 12, 186, .35) 100%), url(/assets/img/products/air-hero-1024.webp); } }

/* ---------- product template motion ----------
   Only opacity, translate and scale, so phones stay smooth. translate instead of transform leaves the
   existing centring transforms alone. The reduced-motion rule above switches all of this off. */
@keyframes ptrise { from { opacity: 0; translate: 0 18px; } }
@keyframes ptlift { from { opacity: 0; translate: 0 44px; } }
.pt-hero .lp-eyebrow, .pt-hero h1, .pt-hero .lp-lead, .pt-hero .phero-cta, .pt-hero .lp-stats li { animation: ptrise .75s var(--ease) backwards; }
.pt-hero h1 { animation-delay: .06s; }
.pt-hero .lp-lead { animation-delay: .12s; }
.pt-hero .phero-cta { animation-delay: .18s; }
.pt-hero .lp-stats li:nth-child(1) { animation-delay: .24s; }
.pt-hero .lp-stats li:nth-child(2) { animation-delay: .29s; }
.pt-hero .lp-stats li:nth-child(3) { animation-delay: .34s; }
.pt-hero .lp-stats li:nth-child(4) { animation-delay: .39s; }
.pt-hero .lp-hero-media > * { animation: ptlift 1s var(--ease) .14s backwards; }

.pt-tile { transition: border-color .25s var(--ease), transform .3s var(--ease); }
.pt-box img { transform-origin: 50% 0; transition: transform .45s var(--ease); }
.pt-box img[src*="/doc-tpl."] { height: 100%; object-position: 50% 100%; }
@media (min-width: 861px) {
	.js .pt-grid.reveal { opacity: 1; transform: none; }
	.js .pt-rv { opacity: 0; translate: 0 22px; transition: opacity .7s var(--ease) var(--d, 0s), translate .7s var(--ease) var(--d, 0s), border-color .25s var(--ease), transform .3s var(--ease); }
	.js .pt-rv.in { opacity: 1; translate: none; }
	.pt-rv:nth-child(3n + 2) { --d: .08s; }
	.pt-rv:nth-child(3n) { --d: .16s; }
	.pt-sc-slide { transform: scale(.985); transition: opacity .5s var(--ease), transform .7s var(--ease); }
	.pt-sc-slide.on { transform: none; }
}
@media (hover: hover) and (min-width: 861px) {
	.pt-tile:hover { border-color: rgba(96, 17, 238, .32); transform: translateY(-3px); }
	.pt-tile:hover .pt-box img { transform: scale(1.025); }
}

.js .pt-sc-stage { translate: 0 34px; transition: translate .9s var(--ease) .1s; }
.js .pt-sc.in .pt-sc-stage { translate: none; }
.pt-sc-name { transition: color .2s var(--ease); }
.pt-sc-now { transition: opacity .16s linear; }
.pt-sc-now.swap { opacity: 0; }

.js .pt-points li { opacity: .22; translate: 0 10px; transition: opacity .45s var(--ease), translate .45s var(--ease); }
.js .pt-points li.lit { opacity: 1; translate: none; }
@media (prefers-reduced-motion: reduce) { .js .pt-points li { opacity: 1; translate: none; } }
.js .pt-split-media .lp-phone { opacity: 0; translate: 0 56px; transition: opacity .8s var(--ease) .1s, translate 1s var(--ease) .1s; }
.js .pt-split.in .pt-split-media .lp-phone { opacity: 1; translate: none; }
.js .pt-split-media .lp-phone:nth-child(2) { transition-delay: .26s; }

.js .pt-plans .lp-price-col { opacity: 0; translate: 0 16px; transition: opacity .6s var(--ease), translate .6s var(--ease); }
.js .pt-plans.in .lp-price-col { opacity: 1; translate: none; }
.js .pt-plans .lp-price-col:nth-child(2) { transition-delay: .08s; }
.js .pt-plans .lp-price-col:nth-child(3) { transition-delay: .16s; }
.pt-plans .lp-price-bar i { transition: width 1s var(--ease) .3s; }
.js .pt-plans:not(.in) .lp-price-bar i { width: 0 !important; }
.pt-plans .lp-price-col:nth-child(2) .lp-price-bar i { transition-delay: .38s; }
.pt-plans .lp-price-col:nth-child(3) .lp-price-bar i { transition-delay: .46s; }

/* dropdowns: the height is driven by ptSlide in site.js so closing animates too */
.pt-sliding { overflow: hidden; }
.pt-plans .lp-price-col.open .pr-list li { animation: ptrise .42s var(--ease) backwards; }
.pt-plans .lp-price-col.open .pr-list li:nth-child(2) { animation-delay: .04s; }
.pt-plans .lp-price-col.open .pr-list li:nth-child(3) { animation-delay: .08s; }
.pt-plans .lp-price-col.open .pr-list li:nth-child(4) { animation-delay: .12s; }
.pt-plans .lp-price-col.open .pr-list li:nth-child(5) { animation-delay: .16s; }
.pt-plans .lp-price-col.open .pr-list li:nth-child(n + 6) { animation-delay: .2s; }
.pt-more { transition: color .2s var(--ease); -webkit-tap-highlight-color: transparent; }
.pt-more:active { color: var(--violet-ink); }

.js .faq-a { display: block; overflow: hidden; transition: none; }
.js .lp-faq-list .faq-a { margin-top: -6px; }
.js .lp-faq-list .faq-a > p, .js .lp-faq-list details[open] .faq-a > p, .js .lp-faq-list .faq-a > .fq-answer { margin-top: 0; }
.lp-faq-list summary i::before, .lp-faq-list summary i::after { transition: background .2s var(--ease); }
.faq details.shut summary::after { transform: none; }
.lp-faq-list details.shut summary i { transform: none; background: var(--violet-soft); }
.lp-faq-list details.shut summary i::before, .lp-faq-list details.shut summary i::after { background: var(--violet); }
.js .page-product .lp-faq-list details:nth-child(2) { transition-delay: .05s; }
.js .page-product .lp-faq-list details:nth-child(3) { transition-delay: .1s; }
.js .page-product .lp-faq-list details:nth-child(4) { transition-delay: .15s; }
.js .page-product .lp-faq-list details:nth-child(5) { transition-delay: .2s; }
.js .page-product .lp-faq-list details:nth-child(n + 6) { transition-delay: .25s; }
.page-product .lp-faq-list summary span { transition: color .2s var(--ease); }
.page-product .lp-faq-links a::after { content: "\2192"; display: inline-block; margin-left: .3em; transition: transform .2s var(--ease); }

.js .cta-grid .reveal + .reveal { transition-delay: .1s; }
.page-product .btn { transition: background-color .18s, border-color .18s, color .18s, transform .15s var(--ease); }
.page-product .btn:active { transform: scale(.97); }
.pt-nav button { transition: opacity .2s var(--ease), background-color .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease), transform .15s var(--ease); }
.pt-nav button:active:not(:disabled) { transform: scale(.92); }
@media (hover: hover) {
	.pt-nav button:hover:not(:disabled) { border-color: var(--violet); background: var(--violet); color: #fff; }
	.page-product .lp-faq-list summary:hover span { color: var(--violet); }
	.page-product .lp-faq-links a:hover::after { transform: translateX(3px); }
}

/* ---------- display type ----------
   Mona Sans in its wide cut at a lighter weight on hero and section titles. It runs wider than Geist,
   so sizes step down about 12% to keep the same line breaks. Change the font in --display and here. */
h1, h2, .display, .display-md, .display-sm, .h2, .hero-title, .sec-head h2, .article-head h1, .lp-faq-side h2, .hm-sc .lp-sc-tile h2, .pr-split-text h2, .pr-tile .pr-tile-h2, .pt-split h2, .lp-tl h3, .lp-vs-tile h3, .lp-sc-tile h3 { font-family: var(--display); font-stretch: 116%; font-weight: 520; letter-spacing: -0.03em; }
.lp-stats strong, .lp-price-num, .strip strong, .lp-plan strong, .margin-nums dd { font-family: var(--display); font-stretch: 112%; font-weight: 560; letter-spacing: -0.03em; font-variant-numeric: lining-nums proportional-nums; } /* tabular figures in this font bring a slashed zero */
.prose h2, .post-card h2, .cards-h2 h2, .contact-side h2 { font-family: var(--sans); font-stretch: 100%; font-weight: 650; letter-spacing: -0.024em; }
.display { font-size: clamp(44px, 6.4vw, 92px); }
.display-md { font-size: clamp(36px, 4.4vw, 62px); line-height: 1.04; }
.display-sm { font-size: clamp(26px, 3.2vw, 40px); }
.h2 { font-size: clamp(32px, 4vw, 54px); line-height: 1.06; }
.sec-head h2 { font-size: clamp(30px, 3.7vw, 50px); line-height: 1.08; }
.article-head h1 { font-size: clamp(34px, 4.6vw, 62px); line-height: 1.05; }
.lp-faq-side h2 { font-size: clamp(30px, 3.2vw, 42px); line-height: 1.08; }
.fq-cat .lp-faq-side h2 { font-size: clamp(27px, 2.8vw, 36px); }
.pt-hero h1 { font-size: clamp(36px, 4vw, 54px); }
.pt-split h2 { font-size: clamp(27px, 2.8vw, 38px); line-height: 1.1; }
.hm-sc .lp-sc-tile h2 { font-size: clamp(25px, 2.3vw, 33px); line-height: 1.1; }
.pr-split-text h2 { font-size: clamp(25px, 2.5vw, 34px); line-height: 1.1; }
.pr-tile .pr-tile-h2 { font-size: 23px; line-height: 1.14; }
.lp-tl h3 { font-size: clamp(25px, 2.3vw, 31px); line-height: 1.1; }
.lp-vs-tile h3 { font-size: clamp(22px, 1.95vw, 26px); line-height: 1.12; }
.lp-sc-tile h3 { font-size: clamp(23px, 2.1vw, 30px); line-height: 1.1; }
.pr-sc .lp-sc-tile h3 { font-size: clamp(18px, 1.6vw, 21px); }
@media (max-width: 1100px) { .pr-tile .pr-tile-h2 { font-size: 20px; } }

/* ---------- homepage hero: real stores turning on phones ----------
   Slots: 0 front, 1 right back, 2 left back. --hp scales the whole stage. */
.hp-hero { --hp: 1; }
.page-home .lp-hero.hp-hero { padding-bottom: 0; }
.hp-hero .lp-hero-text { padding-bottom: 76px; }
.hp-hero .lp-hero-media.hp-media { align-self: end; padding: 0; }
.hp-stage { position: relative; height: calc(668px * var(--hp)); perspective: 1500px; perspective-origin: 50% 40%; }
.hp-ring { position: absolute; inset: 0; transform-style: preserve-3d; }
.lp-phone.hp-phone { position: absolute; top: 4px; left: 50%; width: calc(300px * var(--hp)); max-width: none; margin-left: calc(-150px * var(--hp)); border-color: #4b4b5a; transition: transform 1.1s var(--ease); }
.hp-phone[data-slot="0"] { transform: none; }
.hp-phone[data-slot="1"] { transform: translate3d(calc(196px * var(--hp)), calc(34px * var(--hp)), -200px) rotateY(-26deg); }
.hp-phone[data-slot="2"] { transform: translate3d(calc(-196px * var(--hp)), calc(34px * var(--hp)), -200px) rotateY(26deg); }
.hp-phone .pt-status { background: #fff; }
.lp-phone.hp-phone::before { z-index: 6; } /* the status bar and dim layer would otherwise cover the notch */
.hp-scroll { position: absolute; inset: 38px 0 0; overflow: hidden; background: #fff; }
.lp-phone-screen .hp-scroll img { height: auto; object-fit: initial; transition: transform 1.1s var(--ease); }
.lp-phone.hp-phone.is-run .hp-scroll > img { transform: translateY(-46%); transition: transform 5.2s cubic-bezier(.45, .05, .55, .95) 1.1s; }
.hp-phone .lp-phone-screen::after { content: ""; position: absolute; inset: 0; z-index: 4; background: rgba(23, 8, 58, .56); pointer-events: none; transition: opacity 1.1s var(--ease); }
.hp-phone.is-front .lp-phone-screen::after { opacity: 0; }
.hp-tabs { position: absolute; z-index: 5; left: 50%; bottom: 26px; display: flex; gap: 2px; padding: 5px; border: 1px solid rgba(255, 255, 255, .18); border-radius: 14px; background: rgba(20, 8, 52, .62); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); transform: translateX(-50%); }
.hp-tabs button { position: relative; padding: 9px 14px 12px; border: 0; border-radius: 10px; background: transparent; color: rgba(255, 255, 255, .72); font: inherit; font-size: 13.5px; font-weight: 600; letter-spacing: -0.01em; white-space: nowrap; cursor: pointer; transition: background-color .2s var(--ease), color .2s var(--ease); }
.hp-tabs button:hover { color: #fff; }
.hp-tabs button[aria-selected="true"] { background: rgba(255, 255, 255, .13); color: #fff; }
.hp-bar { position: absolute; left: 14px; right: 14px; bottom: 5px; height: 2px; overflow: hidden; border-radius: 2px; pointer-events: none; }
.hp-tabs button[aria-selected="true"] .hp-bar { background: rgba(255, 255, 255, .2); }
.hp-bar i { display: block; width: 100%; height: 100%; background: #c4b5fd; transform: scaleX(0); transform-origin: 0 50%; }
.hp-stage.playing [aria-selected="true"] .hp-bar i { animation: ptbar var(--hp-t, 7s) linear forwards; }
.hp-hero .lp-eyebrow, .hp-hero h1, .hp-hero .lp-lead, .hp-hero .phero-cta, .hp-hero .lp-stats li { animation: ptrise .75s var(--ease) backwards; }
.hp-hero h1 { animation-delay: .06s; }
.hp-hero .lp-lead { animation-delay: .12s; }
.hp-hero .phero-cta { animation-delay: .18s; }
.hp-hero .lp-stats li:nth-child(1) { animation-delay: .24s; }
.hp-hero .lp-stats li:nth-child(2) { animation-delay: .29s; }
.hp-hero .lp-stats li:nth-child(3) { animation-delay: .34s; }
.hp-hero .lp-stats li:nth-child(4) { animation-delay: .39s; }
.hp-stage { animation: ptlift 1.1s var(--ease) .14s backwards; }
@media (max-width: 1240px) { .hp-hero { --hp: .86; } }
@media (max-width: 1060px) { .hp-hero { --hp: .74; } }
@media (max-width: 860px) {
	.hp-hero { --hp: .8; }
	.hp-hero .lp-hero-text { padding-bottom: 0; }
	.hp-stage { height: 452px; }
	.hp-tabs { bottom: 16px; -webkit-backdrop-filter: none; backdrop-filter: none; background: rgba(20, 8, 52, .9); }
	.hp-tabs button { padding: 8px 11px 11px; font-size: 13px; }
	.hp-bar { left: 11px; right: 11px; }
	.hp-hero .lp-glass { -webkit-backdrop-filter: none; backdrop-filter: none; background: rgba(255, 255, 255, .1); }
}

/* ---------- homepage scroll motion ---------- */
.js .page-home .lines { opacity: 1; transform: none; transition: none; }
.js .page-home .lines .ln { clip-path: inset(0 -.1em 100% -.1em); transform: translateY(100%); transition: clip-path .9s var(--ease), transform .9s var(--ease); }
.js .page-home .lines.in .ln { clip-path: inset(-.1em -.1em -.25em -.1em); transform: none; }
.js .page-home .lines .ln:nth-child(2) { transition-delay: .09s; }
.js .page-home .lines .ln:nth-child(3) { transition-delay: .18s; }
.js .hm-in { opacity: 0; translate: 0 28px; transition: opacity .8s var(--ease), translate .8s var(--ease); }
.js .hm-in.in { opacity: 1; translate: none; }
.page-home #panel, .page-home #pricing, .cta-band.cta-img-home { transform-origin: 50% 0; }
.tour .laptop { transform-origin: 50% 100%; }
.js .hm-bento .reveal:nth-child(2) { transition-delay: .07s; }
.js .hm-bento .reveal:nth-child(3) { transition-delay: .14s; }
.js .hm-bento .reveal:nth-child(4) { transition-delay: .21s; }

/* every product, three drifting rows instead of a 25-line list */
.hm-rows { position: relative; display: grid; gap: 12px; margin-top: 72px; overflow: hidden; }
.hm-rows::before, .hm-rows::after { content: ""; position: absolute; z-index: 2; top: 0; bottom: 0; width: 8vw; pointer-events: none; }
.hm-rows::before { left: 0; background: linear-gradient(90deg, #fff, rgba(255, 255, 255, 0)); }
.hm-rows::after { right: 0; background: linear-gradient(270deg, #fff, rgba(255, 255, 255, 0)); }
.hm-row { will-change: transform; }
.hm-row-in { display: flex; flex-wrap: wrap; justify-content: center; margin: 0; padding: 0; list-style: none; }
.js .hm-row-in { flex-wrap: nowrap; justify-content: flex-start; width: max-content; animation: hmrow 96s linear infinite; }
.js .hm-row:nth-child(2) .hm-row-in { animation-duration: 118s; animation-direction: reverse; }
.js .hm-row:nth-child(3) .hm-row-in { animation-duration: 84s; }
.js .hm-rows.is-still .hm-row-in { flex-wrap: wrap; justify-content: center; width: auto; animation: none; }
.hm-rows.is-off .hm-row-in, .hm-rows:hover .hm-row-in { animation-play-state: paused; }
.hm-row-in li { flex: none; padding: 0 12px 0 0; }
@keyframes hmrow { to { transform: translate3d(-33.3333%, 0, 0); } }
.hm-pill { display: inline-flex; align-items: center; gap: 12px; height: 62px; padding: 0 22px 0 14px; border: 1px solid var(--stone-line); border-radius: 18px; background: #fff; color: var(--ink); font-size: 15.5px; font-weight: 600; letter-spacing: -0.012em; white-space: nowrap; text-decoration: none; transition: border-color .2s var(--ease), background-color .2s var(--ease); }
.hm-pill .nv-ic { grid-row: auto; width: 34px; height: 34px; border-radius: 10px; }
.hm-pill:hover { border-color: rgba(96, 17, 238, .4); background: #faf8ff; }
.hm-pill:hover .nv-ic { background-color: var(--violet); color: #fff; }
.hm-rows + .wrap .sec-more { text-align: center; }

/* Paid. Live. Renewed. pins while the three words light up */
.hm-steps.sec { padding: 72px 0 56px; }
.hm-sc .lp-sc-tile h2.hm-words { font-size: clamp(38px, 4vw, 56px); line-height: 1.05; }
.hm-words span { display: block; opacity: .22; transition: opacity .4s var(--ease); }
.hm-words span.on { opacity: 1; }
.hm-steps .lp-sc-text > p:not(.eyebrow) { margin-top: 14px; font-size: 16px; line-height: 1.5; }
.hm-st { position: relative; display: grid; margin: 14px 0 0; }
.hm-st li { grid-area: 1 / 1; padding: 0; font-size: 15.5px; font-weight: 550; line-height: 1.42; color: var(--ink); opacity: 0; translate: 0 8px; transition: opacity .35s var(--ease), translate .35s var(--ease); }
.hm-st li::before { display: none; }
.hm-st li.on { opacity: 1; translate: none; }
.hm-st-bar { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin-top: 16px; }
.hm-st-bar span { height: 3px; overflow: hidden; border-radius: 3px; background: rgba(96, 17, 238, .16); }
.hm-st-bar i { display: block; height: 100%; background: var(--violet); transform: scaleX(0); transform-origin: 0 50%; }
@media (min-width: 861px) {
	.hm-steps-track { height: 215vh; }
	.hm-steps-pin { position: sticky; top: max(84px, calc(50vh - 238px)); }
}
@media (max-width: 860px) {
	.hm-steps.sec { padding: 64px 0; }
	.hm-words span { display: inline; opacity: 1; }
	.hm-st { gap: 9px; }
	.hm-st li { grid-area: auto; padding-left: 22px; font-size: 14.5px; font-weight: 450; color: var(--ink-2); opacity: 1; translate: none; }
	.hm-st li::before { display: block; }
	.hm-st-bar { display: none; }
	.hm-rows { gap: 8px; margin-top: 44px; }
	.hm-row-in li { padding-right: 8px; }
	.hm-pill { gap: 9px; height: 50px; padding: 0 16px 0 9px; border-radius: 14px; font-size: 14px; }
	.hm-pill .nv-ic { width: 30px; height: 30px; border-radius: 9px; }
}

/* who it is for: the cards stack as you scroll */
.hm-who { grid-template-columns: minmax(0, 1fr); gap: 16px; }
.hm-who-tile { position: sticky; top: calc(88px + var(--i, 0) * 14px); display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: 48px; padding: 42px 44px; transform-origin: 50% 0; }
.hm-who-tile:nth-child(2) { --i: 1; }
.hm-who-tile:nth-child(3) { --i: 2; }
.hm-who-tile:nth-child(4) { --i: 3; }
.hm-who-tile h3 { grid-row: span 2; align-self: start; min-height: 0; overflow: visible; white-space: normal; font-family: var(--display); font-stretch: 116%; font-size: clamp(24px, 2.5vw, 32px); font-weight: 520; letter-spacing: -0.03em; line-height: 1.1; }
.hm-who-tile h3 .lp-ico { width: 26px; height: 26px; }
.hm-who-tile p { display: block; min-height: 0; margin: 2px 0 0; max-width: 60ch; overflow: visible; -webkit-line-clamp: unset; }
@media (max-width: 860px) {
	.hm-who-tile { top: calc(76px + var(--i, 0) * 9px); grid-template-columns: minmax(0, 1fr); padding: 26px 24px; }
	.hm-who-tile h3 { grid-row: auto; font-size: 23px; }
	.hm-who-tile p { margin-top: 10px; }
}

.js .faq-more:not(.open):not(.closing) { display: none; }
.hm-more { display: inline-flex; align-items: center; gap: 10px; margin-top: 18px; padding: 0; border: 0; background: none; font: inherit; font-size: 15px; font-weight: 600; color: var(--violet); cursor: pointer; }
.hm-more i { width: 7px; height: 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-2px) rotate(45deg); }
html:not(.js) .hm-more { display: none; }

/* each hero phone scrolls its real screen. The marketplace runs in three steps: the page moves down a little
   so the whole product list is in view, the list scrolls in its own window, then the page carries on.
   The two page moves are nested so each has its own timing, and data-t on the phone gives it the time it needs. */
.hp-page, .hp-page-in { position: relative; transition: transform 1.1s var(--ease); }
.hp-win { position: absolute; left: 0; right: 0; top: 25.17%; height: 26.11%; overflow: hidden; background: #fff; }
.lp-phone-screen .hp-page img { display: block; width: 100%; height: auto; object-fit: initial; }
.hp-win img { transition: transform 1.1s var(--ease); }
.lp-phone.hp-phone.is-run .hp-page-in { transform: translateY(-11.4%); transition: transform 1s cubic-bezier(.45, .05, .55, .95) 1s; }
.lp-phone.hp-phone.is-run .hp-win img { transform: translateY(-76.7%); transition: transform 7s cubic-bezier(.37, 0, .63, 1) 2.3s; }
.lp-phone.hp-phone.is-run .hp-page { transform: translateY(-38.6%); transition: transform 1.6s cubic-bezier(.45, .05, .55, .95) 9.6s; }
.lp-phone.hp-phone.is-run:nth-child(3) .hp-scroll > img { transform: translateY(-56.5%); }
@media (max-width: 860px) { .hp-tabs button { padding: 8px 9px 11px; font-size: 12.5px; } .hp-bar { left: 9px; right: 9px; } }

/* product template: skip rendering sections until they are near the screen, this is most of the load time */
.page-product main > section:not(:first-child) { content-visibility: auto; contain-intrinsic-size: auto 900px; }

/* product template scroll motion. site.js drives the scrubbed parts, these are the triggered ones. */
.js .page-product .sec-head.reveal, .js .page-product .lp-faq-side.reveal { opacity: 1; transform: none; transition: none; }
.js .page-product .sec-head.reveal h2, .js .page-product .lp-faq-side.reveal h2 { clip-path: inset(0 -.1em 100% -.1em); transform: translateY(100%); transition: clip-path .9s var(--ease), transform .9s var(--ease); }
.js .page-product .sec-head.reveal.in h2, .js .page-product .lp-faq-side.reveal.in h2 { clip-path: inset(-.1em -.1em -.25em -.1em); transform: none; }
.js .page-product .sec-head.reveal .sec-sub, .js .page-product .lp-faq-side.reveal .sec-sub, .js .page-product .lp-faq-side.reveal .lp-faq-links { opacity: 0; translate: 0 14px; transition: opacity .7s var(--ease) .18s, translate .7s var(--ease) .18s; }
.js .page-product .sec-head.reveal.in .sec-sub, .js .page-product .lp-faq-side.reveal.in .sec-sub, .js .page-product .lp-faq-side.reveal.in .lp-faq-links { opacity: 1; translate: none; }
.pt-sc-stage { transform-origin: 50% 100%; }
.page-product .sec-tint, .cta-band.cta-img-products { transform-origin: 50% 0; }

/* live blur behind moving content is redrawn every frame while scrolling, so these use a flat tint instead */
.pt-hero .lp-glass, .hp-hero .lp-glass { -webkit-backdrop-filter: none; backdrop-filter: none; background: rgba(255, 255, 255, .1); }
.page-product .nav-wrap, .page-home .nav-wrap { -webkit-backdrop-filter: none; backdrop-filter: none; background: #fff; }
.hp-tabs { -webkit-backdrop-filter: none; backdrop-filter: none; background: rgba(20, 8, 52, .9); }

/* AI Content Engine product page */
.lp-hero.hero-bg-home.pt-bg-ace { background-image: linear-gradient(90deg, var(--violet-ink) 0%, rgba(74, 12, 186, .92) 30%, rgba(74, 12, 186, .45) 58%, rgba(74, 12, 186, .05) 100%), url(/assets/img/products/ace-hero.webp); }
.cta-band.cta-img-products.pt-bg-ace { background-image: url(/assets/img/products/ace-cta.webp); }
@media (max-width: 860px) { .lp-hero.hero-bg-home.pt-bg-ace { background-image: linear-gradient(180deg, var(--violet-ink) 0%, rgba(74, 12, 186, .9) 45%, rgba(74, 12, 186, .35) 100%), url(/assets/img/products/ace-hero-1024.webp); } }
.pt-reel { background: #0f172a; }
.pt-reel::after { content: ""; position: absolute; z-index: 1; inset: 0 0 auto; height: 72px; background: linear-gradient(rgba(12, 6, 36, .6), rgba(12, 6, 36, 0)); pointer-events: none; }
.pt-reel video { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; object-position: 18% 50%; }
.pt-reel .pt-status { z-index: 2; }
.pt-reel .pt-status.is-dark, .pt-scroll .pt-status.is-dark { background: #fff; }
.pt-reel-snd { position: absolute; z-index: 3; right: 12px; bottom: 16px; display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; padding: 0; border: 1px solid rgba(255, 255, 255, .28); border-radius: 50%; background: rgba(12, 6, 36, .6); color: #fff; cursor: pointer; transition: background-color .2s ease, transform .2s ease; }
.pt-reel-snd:hover { background: rgba(12, 6, 36, .82); }
.pt-reel-snd:active { transform: scale(.94); }
.pt-reel-snd:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.pt-reel-snd span { display: inline-flex; }
.pt-reel-snd .lp-ico { width: 18px; height: 18px; }
.pt-reel-snd .is-on { display: none; }
.pt-reel-snd[aria-pressed="true"] .is-on { display: inline-flex; }
.pt-reel-snd[aria-pressed="true"] .is-off { display: none; }
@media (max-width: 860px) {
	/* full content width, cropped so about three quarters of the phone shows */
	.pt-hero .lp-hero-media.has-call.has-reel { height: auto; max-height: none; margin-bottom: 0; overflow: visible; padding-bottom: 28px; }
	.pt-hero.pt-bg-ace .lp-hero-media.has-call.has-reel { height: min(145vw, 660px); padding-bottom: 0; }
	.pt-reel-snd { top: 60px; right: 16px; bottom: auto; width: 42px; height: 42px; }
}

/* two plans fill the row, no empty third column */
@media (min-width: 961px) {
	.lp-price.pt-plans.is-two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.pt-plans.is-two .lp-price-col { padding-left: clamp(32px, 4vw, 56px); padding-right: clamp(32px, 4vw, 56px); }
}

/* AI SEO Autopilot product page */
.lp-hero.hero-bg-home.pt-bg-sap { background-image: linear-gradient(90deg, var(--violet-ink) 0%, rgba(74, 12, 186, .92) 30%, rgba(74, 12, 186, .45) 58%, rgba(74, 12, 186, .05) 100%), url(/assets/img/products/sap-hero.webp); }
.cta-band.cta-img-products.pt-bg-sap { background-image: url(/assets/img/products/sap-cta.webp); }
@media (max-width: 860px) { .lp-hero.hero-bg-home.pt-bg-sap { background-image: linear-gradient(180deg, var(--violet-ink) 0%, rgba(74, 12, 186, .9) 45%, rgba(74, 12, 186, .35) 100%), url(/assets/img/products/sap-hero-1024.webp); } }
.pt-scroll { background: #f8fafc; }
.lp-phone-screen .pt-scroll-bar { position: relative; z-index: 2; display: block; width: 100%; height: auto; }
.pt-scroll-win { position: absolute; top: 14.77%; right: 0; bottom: 0; left: 0; overflow: hidden; }
.lp-phone-screen .pt-scroll-page { position: static; display: block; width: 100%; height: auto; object-fit: fill; }
.pt-scroll.is-run .pt-scroll-page { animation: ptflick 16s infinite; }
.pt-scroll.is-off .pt-scroll-page { animation-play-state: paused; }
@keyframes ptflick {
	0%, 7.5% { transform: translateY(0); animation-timing-function: cubic-bezier(.16, .84, .3, 1); }
	12.5%, 20.63% { transform: translateY(calc(var(--pt-to, -66%) * 0.17)); animation-timing-function: cubic-bezier(.16, .84, .3, 1); }
	25.63%, 33.75% { transform: translateY(calc(var(--pt-to, -66%) * 0.41)); animation-timing-function: cubic-bezier(.16, .84, .3, 1); }
	38.75%, 46.88% { transform: translateY(calc(var(--pt-to, -66%) * 0.58)); animation-timing-function: cubic-bezier(.16, .84, .3, 1); }
	51.88%, 60% { transform: translateY(calc(var(--pt-to, -66%) * 0.82)); animation-timing-function: cubic-bezier(.16, .84, .3, 1); }
	65%, 73.75% { transform: translateY(var(--pt-to, -66%)); animation-timing-function: cubic-bezier(.45, .05, .55, .95); }
	91.25%, 100% { transform: translateY(0); }
}
.pt-stat-logo img { display: block; width: clamp(26px, 2.4vw, 32px); height: auto; }

/* AI Visibility product page */
.lp-hero.hero-bg-home.pt-bg-ais { background-image: linear-gradient(90deg, var(--violet-ink) 0%, rgba(74, 12, 186, .92) 30%, rgba(74, 12, 186, .45) 58%, rgba(74, 12, 186, .05) 100%), url(/assets/img/products/ais-hero.webp); }
.cta-band.cta-img-products.pt-bg-ais { background-image: url(/assets/img/products/ais-cta.webp); }
@media (max-width: 860px) { .lp-hero.hero-bg-home.pt-bg-ais { background-image: linear-gradient(180deg, var(--violet-ink) 0%, rgba(74, 12, 186, .9) 45%, rgba(74, 12, 186, .35) 100%), url(/assets/img/products/ais-hero-1024.webp); } }
.pt-bg-ais .pt-scroll-page { --pt-to: -67.8%; }

/* CRM product page */
.lp-hero.hero-bg-home.pt-bg-crm { background-image: linear-gradient(90deg, var(--violet-ink) 0%, rgba(74, 12, 186, .92) 30%, rgba(74, 12, 186, .45) 58%, rgba(74, 12, 186, .05) 100%), url(/assets/img/products/crm-hero.webp); }
.cta-band.cta-img-products.pt-bg-crm { background-image: url(/assets/img/products/crm-cta.webp); }
@media (max-width: 860px) { .lp-hero.hero-bg-home.pt-bg-crm { background-image: linear-gradient(180deg, var(--violet-ink) 0%, rgba(74, 12, 186, .9) 45%, rgba(74, 12, 186, .35) 100%), url(/assets/img/products/crm-hero-1024.webp); } }
.pt-bg-crm .pt-scroll-page { --pt-to: -49.7%; }
@media (min-width: 961px) { .lp-price.pt-plans.is-four { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.pt-nb { white-space: nowrap; }

/* Integrations map: the app in the middle, its real connections around it */
.pt-int { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 60px); align-items: center; margin-top: 48px; padding: clamp(28px, 3.6vw, 52px); border-radius: 28px; color: #fff; background-color: var(--plum); background-image: radial-gradient(58% 70% at 25% 50%, rgba(124, 58, 237, .5), rgba(124, 58, 237, 0) 100%); }
.pt-int-map svg { display: block; width: 100%; height: auto; overflow: visible; }
.pt-int-core { fill: var(--violet); }
.pt-int-ring { fill: none; stroke: rgba(196, 181, 253, .7); stroke-width: 1.5; transform-box: fill-box; transform-origin: center; animation: ptring 2.6s ease-out infinite; }
.pt-int.is-off .pt-int-ring { animation-play-state: paused; }
.pt-int-line { fill: none; stroke: rgba(255, 255, 255, .16); stroke-width: 1.5; transition: stroke .3s ease; }
.pt-int-n.on .pt-int-line { stroke: rgba(255, 255, 255, .62); }
.pt-int-dot { fill: #fff; opacity: 0; transition: opacity .2s ease; }
.pt-int-n.on .pt-int-dot { opacity: 1; }
.pt-int-tile { opacity: .6; cursor: pointer; transform-box: fill-box; transform-origin: center; transition: opacity .3s ease, transform .45s var(--ease); }
.pt-int-n.on .pt-int-tile { opacity: 1; transform: scale(1.12); }
.pt-int-label { fill: rgba(255, 255, 255, .6); font-family: inherit; font-size: 13.5px; font-weight: 500; text-anchor: middle; transition: fill .3s ease; }
.pt-int-n.on .pt-int-label { fill: #fff; }
.pt-int-side { min-width: 0; }
.pt-int-row { position: relative; display: block; padding: 13px 0 15px; color: #fff; text-decoration: none; opacity: .55; transition: opacity .25s ease; }
.pt-int-row.on { opacity: 1; }
.pt-int-name { display: block; font-size: 16px; font-weight: 600; letter-spacing: -0.01em; line-height: 1.3; }
.pt-int-text { display: block; margin-top: 3px; font-size: 14px; line-height: 1.45; color: rgba(255, 255, 255, .74); }
.pt-int .pt-bar { height: 2px; border-radius: 0; background: rgba(255, 255, 255, .13); }
.pt-int .pt-bar i { background: #fff; }
.pt-int.playing .pt-int-row.on .pt-bar i { animation: ptbar 5s linear forwards; }
.pt-int.held .pt-int-row.on .pt-bar i { animation-play-state: paused; }
.pt-int .pt-nav { display: none; }
.pt-int .pt-nav button { border-color: rgba(255, 255, 255, .3); background: none; color: #fff; }
@media (prefers-reduced-motion: reduce) { .pt-int-ring { animation: none; opacity: 0; } }
@media (max-width: 960px) {
	.pt-int { display: block; }
	.pt-int-map { max-width: 460px; margin: 0 auto; }
	.pt-int-side { margin-top: 18px; }
}
@media (max-width: 860px) {
	.pt-int { margin-top: 28px; padding: 18px 16px 16px; border-radius: 22px; }
	.pt-int-label { display: none; }
	.pt-int-list { min-height: 118px; }
	.pt-int-row { padding-top: 0; opacity: 1; }
	.pt-int-row:not(.on) { display: none; }
	.pt-int .pt-nav { display: flex; justify-content: flex-end; margin-top: 12px; }
}

/* AI Invoicing product page */
.lp-hero.hero-bg-home.pt-bg-inv { background-image: linear-gradient(90deg, var(--violet-ink) 0%, rgba(74, 12, 186, .92) 30%, rgba(74, 12, 186, .45) 58%, rgba(74, 12, 186, .05) 100%), url(/assets/img/products/inv-hero.webp); }
.cta-band.cta-img-products.pt-bg-inv { background-image: url(/assets/img/products/inv-cta.webp); }
@media (max-width: 860px) { .lp-hero.hero-bg-home.pt-bg-inv { background-image: linear-gradient(180deg, var(--violet-ink) 0%, rgba(74, 12, 186, .9) 45%, rgba(74, 12, 186, .35) 100%), url(/assets/img/products/inv-hero-1024.webp); } }
.pt-bg-inv .pt-scroll-page { --pt-to: -60.7%; }

/* E-Signature product page */
.lp-hero.hero-bg-home.pt-bg-doc { background-image: linear-gradient(90deg, var(--violet-ink) 0%, rgba(74, 12, 186, .92) 30%, rgba(74, 12, 186, .45) 58%, rgba(74, 12, 186, .05) 100%), url(/assets/img/products/doc-hero.webp); }
.cta-band.cta-img-products.pt-bg-doc { background-image: url(/assets/img/products/doc-cta.webp); }
@media (max-width: 860px) { .lp-hero.hero-bg-home.pt-bg-doc { background-image: linear-gradient(180deg, var(--violet-ink) 0%, rgba(74, 12, 186, .9) 45%, rgba(74, 12, 186, .35) 100%), url(/assets/img/products/doc-hero-1024.webp); } }
.pt-bg-doc .pt-reel { background: #fff; }
.pt-bg-doc .pt-reel::after { display: none; }
.pt-bg-doc .pt-reel video { object-position: 50% 0; }
.lp-hero.hero-bg-home.pt-bg-apt { background-image: linear-gradient(90deg, var(--violet-ink) 0%, rgba(74, 12, 186, .92) 30%, rgba(74, 12, 186, .45) 58%, rgba(74, 12, 186, .05) 100%), url(/assets/img/products/apt-hero.webp); }
.cta-band.cta-img-products.pt-bg-apt { background-image: url(/assets/img/products/apt-cta.webp); }
@media (max-width: 860px) { .lp-hero.hero-bg-home.pt-bg-apt { background-image: linear-gradient(180deg, var(--violet-ink) 0%, rgba(74, 12, 186, .9) 45%, rgba(74, 12, 186, .35) 100%), url(/assets/img/products/apt-hero-1024.webp); } }
.pt-bg-apt .pt-reel { background: #fff; }
.pt-bg-apt .pt-reel::after { display: none; }
.pt-bg-apt .pt-reel video { object-position: 50% 0; }
.pt-bg-apt .pt-reel .pt-status { background: #fff; }
@media (min-width: 1281px) { .lp-hero.pt-bg-apt h1 { font-size: 47px; } }
.lp-hero.hero-bg-home.pt-bg-rep { background-image: linear-gradient(90deg, var(--violet-ink) 0%, rgba(74, 12, 186, .92) 30%, rgba(74, 12, 186, .45) 58%, rgba(74, 12, 186, .05) 100%), url(/assets/img/products/rep-hero.webp); }
.cta-band.cta-img-products.pt-bg-rep { background-image: url(/assets/img/products/rep-cta.webp); }
@media (max-width: 860px) { .lp-hero.hero-bg-home.pt-bg-rep { background-image: linear-gradient(180deg, var(--violet-ink) 0%, rgba(74, 12, 186, .9) 45%, rgba(74, 12, 186, .35) 100%), url(/assets/img/products/rep-hero-1024.webp); } }
.pt-bg-rep .pt-scroll-page { --pt-to: -78.6%; }
.lp-hero.hero-bg-home.pt-bg-em { background-image: linear-gradient(90deg, var(--violet-ink) 0%, rgba(74, 12, 186, .92) 30%, rgba(74, 12, 186, .45) 58%, rgba(74, 12, 186, .05) 100%), url(/assets/img/products/em-hero.webp); }
.cta-band.cta-img-products.pt-bg-em { background-image: url(/assets/img/products/em-cta.webp); }
@media (max-width: 860px) { .lp-hero.hero-bg-home.pt-bg-em { background-image: linear-gradient(180deg, var(--violet-ink) 0%, rgba(74, 12, 186, .9) 45%, rgba(74, 12, 186, .35) 100%), url(/assets/img/products/em-hero-1024.webp); } }
.pt-bg-em .pt-reel { background: #fff; }
.pt-bg-em .pt-reel::after { display: none; }
.pt-bg-em .pt-reel video { object-position: 50% 0; }
.pt-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(28px, 4vw, 60px); margin-top: 48px; padding: clamp(28px, 3.6vw, 52px); border-radius: 28px; color: #fff; background-color: var(--plum); background-image: radial-gradient(70% 90% at 50% 40%, rgba(124, 58, 237, .5), rgba(124, 58, 237, 0) 100%); }
.pt-pair-card { position: relative; display: block; color: #fff; text-decoration: none; }
.pt-pair-card + .pt-pair-card::before { content: ""; position: absolute; top: 0; bottom: 0; left: calc(clamp(28px, 4vw, 60px) / -2); width: 1px; background: rgba(255, 255, 255, .14); }
.pt-pair-card svg { display: block; width: 100%; max-width: 300px; height: auto; margin: 0 0 22px; overflow: visible; }
.pt-pair .pt-int-line { stroke: rgba(255, 255, 255, .45); }
.pt-pair .pt-int-dot { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .pt-pair .pt-int-dot { display: none; } }
@media (max-width: 760px) { .pt-pair { grid-template-columns: minmax(0, 1fr); gap: 28px; margin-top: 28px; padding: 24px 20px; border-radius: 22px; } .pt-pair-card + .pt-pair-card { padding-top: 28px; } .pt-pair-card + .pt-pair-card::before { top: 0; right: 0; bottom: auto; left: 0; width: auto; height: 1px; } }
.lp-hero.hero-bg-home.pt-bg-gc { background-image: linear-gradient(90deg, var(--violet-ink) 0%, rgba(74, 12, 186, .92) 30%, rgba(74, 12, 186, .45) 58%, rgba(74, 12, 186, .05) 100%), url(/assets/img/products/gc-hero.webp); }
.cta-band.cta-img-products.pt-bg-gc { background-image: url(/assets/img/products/gc-cta.webp); }
@media (max-width: 860px) { .lp-hero.hero-bg-home.pt-bg-gc { background-image: linear-gradient(180deg, var(--violet-ink) 0%, rgba(74, 12, 186, .9) 45%, rgba(74, 12, 186, .35) 100%), url(/assets/img/products/gc-hero-1024.webp); } }
.pt-bg-gc .pt-reel { background: #fff; }
.pt-bg-gc .pt-reel::after { display: none; }
.pt-bg-gc .pt-reel video { object-position: 50% 0; }
.pt-bg-gc .pt-reel .pt-status { background: #fff; }
.lp-hero.hero-bg-home.pt-bg-lb { background-image: linear-gradient(90deg, var(--violet-ink) 0%, rgba(74, 12, 186, .92) 30%, rgba(74, 12, 186, .45) 58%, rgba(74, 12, 186, .05) 100%), url(/assets/img/products/lb-hero.webp); }
.cta-band.cta-img-products.pt-bg-lb { background-image: url(/assets/img/products/lb-cta.webp); }
@media (max-width: 860px) { .lp-hero.hero-bg-home.pt-bg-lb { background-image: linear-gradient(180deg, var(--violet-ink) 0%, rgba(74, 12, 186, .9) 45%, rgba(74, 12, 186, .35) 100%), url(/assets/img/products/lb-hero-1024.webp); } }
.pt-bg-lb .pt-reel { background: #fff; }
.pt-bg-lb .pt-reel::after { display: none; }
.pt-bg-lb .pt-reel video { object-position: 50% 0; }
.pt-bg-lb .pt-reel .pt-status { background: #fff; }
.pt-pair:has(> .pt-pair-card:only-child) { grid-template-columns: minmax(0, 1fr); }
.lp-hero.hero-bg-home.pt-bg-wb { background-image: linear-gradient(90deg, var(--violet-ink) 0%, rgba(74, 12, 186, .92) 30%, rgba(74, 12, 186, .45) 58%, rgba(74, 12, 186, .05) 100%), url(/assets/img/products/wb-hero.webp); }
.cta-band.cta-img-products.pt-bg-wb { background-image: url(/assets/img/products/wb-cta.webp); }
@media (max-width: 860px) { .lp-hero.hero-bg-home.pt-bg-wb { background-image: linear-gradient(180deg, var(--violet-ink) 0%, rgba(74, 12, 186, .9) 45%, rgba(74, 12, 186, .35) 100%), url(/assets/img/products/wb-hero-1024.webp); } }
.pt-bg-wb .pt-reel { background: #fff; }
.pt-bg-wb .pt-reel::after { display: none; }
.pt-bg-wb .pt-reel video { object-position: 50% 0; }
.lp-hero.hero-bg-home.pt-bg-bw { background-image: linear-gradient(90deg, var(--violet-ink) 0%, rgba(74, 12, 186, .92) 30%, rgba(74, 12, 186, .45) 58%, rgba(74, 12, 186, .05) 100%), url(/assets/img/products/bw-hero.webp); }
.cta-band.cta-img-products.pt-bg-bw { background-image: url(/assets/img/products/bw-cta.webp); }
@media (max-width: 860px) { .lp-hero.hero-bg-home.pt-bg-bw { background-image: linear-gradient(180deg, var(--violet-ink) 0%, rgba(74, 12, 186, .9) 45%, rgba(74, 12, 186, .35) 100%), url(/assets/img/products/bw-hero-1024.webp); } }
.pt-bg-bw .pt-reel { background: #fff; }
.pt-bg-bw .pt-reel::after { display: none; }
.pt-bg-bw .pt-reel video { object-position: 50% 0; }
.lp-hero.hero-bg-home.pt-bg-seo { background-image: linear-gradient(90deg, var(--violet-ink) 0%, rgba(74, 12, 186, .92) 30%, rgba(74, 12, 186, .45) 58%, rgba(74, 12, 186, .05) 100%), url(/assets/img/products/seo-hero.webp); }
.cta-band.cta-img-products.pt-bg-seo { background-image: url(/assets/img/products/seo-cta.webp); }
@media (max-width: 860px) { .lp-hero.hero-bg-home.pt-bg-seo { background-image: linear-gradient(180deg, var(--violet-ink) 0%, rgba(74, 12, 186, .9) 45%, rgba(74, 12, 186, .35) 100%), url(/assets/img/products/seo-hero-1024.webp); } }
.pt-bg-seo .pt-reel { background: #fff; }
.pt-bg-seo .pt-reel::after { display: none; }
.pt-bg-seo .pt-reel video { object-position: 50% 0; }
.lp-hero.hero-bg-home.pt-bg-sma { background-image: linear-gradient(90deg, var(--violet-ink) 0%, rgba(74, 12, 186, .92) 30%, rgba(74, 12, 186, .45) 58%, rgba(74, 12, 186, .05) 100%), url(/assets/img/products/sma-hero.webp); }
.cta-band.cta-img-products.pt-bg-sma { background-image: url(/assets/img/products/sma-cta.webp); }
@media (max-width: 860px) { .lp-hero.hero-bg-home.pt-bg-sma { background-image: linear-gradient(180deg, var(--violet-ink) 0%, rgba(74, 12, 186, .9) 45%, rgba(74, 12, 186, .35) 100%), url(/assets/img/products/sma-hero-1024.webp); } }
.pt-bg-sma .pt-reel { background: #fff; }
.pt-bg-sma .pt-reel::after { display: none; }
.pt-bg-sma .pt-reel video { object-position: 50% 0; }
.lp-hero.hero-bg-home.pt-bg-smm { background-image: linear-gradient(90deg, var(--violet-ink) 0%, rgba(74, 12, 186, .92) 30%, rgba(74, 12, 186, .45) 58%, rgba(74, 12, 186, .05) 100%), url(/assets/img/products/smm-hero.webp); }
.cta-band.cta-img-products.pt-bg-smm { background-image: url(/assets/img/products/smm-cta.webp); }
@media (max-width: 860px) { .lp-hero.hero-bg-home.pt-bg-smm { background-image: linear-gradient(180deg, var(--violet-ink) 0%, rgba(74, 12, 186, .9) 45%, rgba(74, 12, 186, .35) 100%), url(/assets/img/products/smm-hero-1024.webp); } }
.pt-bg-smm .pt-reel { background: #0f172a; }
.pt-bg-smm .pt-reel::after { display: none; }
.pt-bg-smm .pt-reel video { object-position: 50% 0; }
.lp-hero.hero-bg-home.pt-bg-smf { background-image: linear-gradient(90deg, var(--violet-ink) 0%, rgba(74, 12, 186, .92) 30%, rgba(74, 12, 186, .45) 58%, rgba(74, 12, 186, .05) 100%), url(/assets/img/products/smf-hero.webp); }
.cta-band.cta-img-products.pt-bg-smf { background-image: url(/assets/img/products/smf-cta.webp); }
@media (max-width: 860px) { .lp-hero.hero-bg-home.pt-bg-smf { background-image: linear-gradient(180deg, var(--violet-ink) 0%, rgba(74, 12, 186, .9) 45%, rgba(74, 12, 186, .35) 100%), url(/assets/img/products/smf-hero-1024.webp); } }
.pt-bg-smf .pt-reel { background: #0369a1; }
.pt-bg-smf .pt-reel::after { display: none; }
.pt-bg-smf .pt-reel video { object-position: 50% 0; }
@media (min-width: 961px) { .lp-price.pt-plans.is-long .lp-price-note { min-height: 2.8em; } }

/* Web Hosting: real sites in a desktop and phone split, stepping past each other in opposite directions */
.lp-hero.hero-bg-home.pt-bg-wh { background-image: linear-gradient(90deg, var(--violet-ink) 0%, rgba(74, 12, 186, .92) 30%, rgba(74, 12, 186, .45) 58%, rgba(74, 12, 186, .05) 100%), url(/assets/img/products/wh-hero.webp); }
.cta-band.cta-img-products.pt-bg-wh { background-image: url(/assets/img/products/wh-cta.webp); }
@media (max-width: 860px) { .lp-hero.hero-bg-home.pt-bg-wh { background-image: linear-gradient(180deg, var(--violet-ink) 0%, rgba(74, 12, 186, .9) 45%, rgba(74, 12, 186, .35) 100%), url(/assets/img/products/wh-hero-1024.webp); } }
.pt-sites { display: grid; grid-template-columns: minmax(0, 1.72fr) minmax(0, 1fr); gap: 14px; width: 100%; max-width: 600px; height: 640px; overflow: hidden; -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 7%, #000 93%, transparent 100%); mask-image: linear-gradient(180deg, transparent 0, #000 7%, #000 93%, transparent 100%); }
.pt-sites-col { min-width: 0; }
.pt-sites-track { display: flow-root; animation: ptsites 16s cubic-bezier(.65, 0, .35, 1) infinite; animation-play-state: paused; will-change: transform; }
.pt-sites-col:not(.is-phone) .pt-sites-track { margin-top: -92px; }
.pt-sites-col.is-phone .pt-sites-track { margin-top: -168px; animation-direction: reverse; animation-delay: -2s; }
.pt-sites.is-run:not(.is-off) .pt-sites-track { animation-play-state: running; }
.pt-site { margin: 0 0 14px; overflow: hidden; border: 1px solid rgba(255, 255, 255, .2); border-radius: 12px; background: #fff; }
.pt-site-bar { display: flex; align-items: center; gap: 5px; height: 28px; padding: 0 10px; border-bottom: 1px solid #ece9f5; background: #fff; }
.pt-site-bar i { flex: none; width: 7px; height: 7px; border-radius: 50%; background: #dcd8e8; }
.pt-site-bar b { flex: 1; min-width: 0; margin-left: 6px; overflow: hidden; border-radius: 8px; background: #f3f1f9; color: #5c5972; font-size: 10.5px; font-weight: 500; line-height: 17px; text-align: center; text-overflow: ellipsis; white-space: nowrap; }
.pt-site img, .pt-site-ph img { display: block; width: 100%; height: auto; }
.pt-site-ph { margin: 0 0 14px; overflow: hidden; border: 4px solid #160637; border-radius: 26px; background: #fff; outline: 1px solid rgba(255, 255, 255, .22); outline-offset: 0; }
@keyframes ptsites { 0%, 19% { transform: translate3d(0, 0, 0); } 25%, 44% { transform: translate3d(0, -12.5%, 0); } 50%, 69% { transform: translate3d(0, -25%, 0); } 75%, 94% { transform: translate3d(0, -37.5%, 0); } 100% { transform: translate3d(0, -50%, 0); } }
@media (max-width: 960px) {
	.pt-sites { max-width: none; height: min(112vw, 620px); gap: 10px; }
	.pt-sites-col:not(.is-phone) .pt-sites-track { margin-top: -14vw; }
	.pt-sites-col.is-phone .pt-sites-track { margin-top: -22vw; }
	.pt-site, .pt-site-ph { margin-bottom: 10px; }
	.pt-site { border-radius: 9px; }
	.pt-site-ph { border-width: 3px; border-radius: 18px; }
	.pt-site-bar { height: 21px; padding: 0 7px; gap: 4px; }
	.pt-site-bar i { width: 5px; height: 5px; }
	.pt-site-bar b { margin-left: 4px; font-size: 9px; line-height: 13px; }
}

/* tile graphics */
.pt-box.has-art { display: block; padding: 0; }
.pt-art { position: relative; z-index: 1; display: block; width: 100%; height: 100%; }
.pt-art text { fill: #fff; font-size: 13px; font-weight: 600; }
.pt-art text.is-dim { fill: rgba(255, 255, 255, .72); font-size: 12px; font-weight: 500; }
.pt-art text.is-big { font-size: 42px; font-weight: 700; letter-spacing: -.02em; }
.pt-art text.is-big2 { font-size: 24px; font-weight: 700; letter-spacing: -.01em; }
.pt-art text.is-p { fill: #4c1d95; }
.pa-g { fill: rgba(255, 255, 255, .08); stroke: rgba(255, 255, 255, .26); }
.pa-disk { fill: #3b1a8f; stroke: rgba(255, 255, 255, .34); }
.pa-s { fill: none; stroke: #fff; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.pa-s.is-p { stroke: #5b21b6; }
.pa-l { fill: none; stroke: rgba(255, 255, 255, .32); }
.pa-v { fill: #c4b5fd; }
.pa-row { fill: rgba(255, 255, 255, .2); }
.pa-rail { stroke: rgba(255, 255, 255, .34); stroke-width: 2; }
.pa-ticks { fill: none; stroke: rgba(255, 255, 255, .55); stroke-width: 7; stroke-dasharray: 2 30.46; }
.pa-hand { stroke: #fff; stroke-width: 3; stroke-linecap: round; transform-box: view-box; transform-origin: 118px 116px; animation: pa-spin 6s linear infinite; }
.pa-spin { transform-box: fill-box; transform-origin: center; animation: pa-spin 40s linear infinite; }
.pa-orbit { transform-box: view-box; transform-origin: 200px 116px; animation: pa-spin 6s linear infinite; }
.pa-arc { fill: none; stroke: #c4b5fd; stroke-width: 3.5; stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 100; animation: pa-draw 6s ease-in-out infinite; }
.pa-pulse { fill: none; stroke: rgba(196, 181, 253, .7); transform-box: fill-box; transform-origin: center; opacity: 0; animation: pa-pulse 3s ease-out infinite; }
.pa-pulse.d3 { animation-delay: 1.5s; }
.pa-new { animation: pa-new 6s var(--ease) infinite; }
.pa-grow { transform-box: fill-box; transform-origin: 50% 100%; animation: pa-grow 6s var(--ease) infinite; }
.pa-knob { animation: pa-knob 10s infinite; animation-timing-function: cubic-bezier(.65, 0, .35, 1); }
.pa-lit3, .pa-lit5, .pa-lit6 { opacity: 0; }
.pa-lit3 { animation: pa-lit3 6s infinite; }
.pa-lit5 { animation: pa-lit5 10s infinite; }
.pa-lit6 { animation: pa-lit6 9s infinite; }
.pa-lit3.d2 { animation-delay: 2s; } .pa-lit3.d4 { animation-delay: 4s; }
.pa-lit5.d1 { animation-delay: 2s; } .pa-lit5.d2 { animation-delay: 4s; } .pa-lit5.d3 { animation-delay: 6s; } .pa-lit5.d4 { animation-delay: 8s; }
.pa-lit6.d1 { animation-delay: 1.5s; } .pa-lit6.d2 { animation-delay: 3s; } .pa-lit6.d3 { animation-delay: 4.5s; } .pa-lit6.d4 { animation-delay: 6s; } .pa-lit6.d5 { animation-delay: 7.5s; }
@keyframes pa-spin { to { transform: rotate(360deg); } }
@keyframes pa-draw { 0% { stroke-dashoffset: 100; } 55%, 85% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: -100; } }
@keyframes pa-pulse { 0% { opacity: .9; transform: scale(1); } 100% { opacity: 0; transform: scale(1.75); } }
@keyframes pa-new { 0%, 8% { opacity: 0; transform: translateY(14px); } 20%, 88% { opacity: 1; transform: translateY(0); } 100% { opacity: 0; transform: translateY(0); } }
@keyframes pa-grow { 0%, 8% { transform: scaleY(0); } 26%, 88% { transform: scaleY(1); } 100% { transform: scaleY(0); } }
@keyframes pa-knob { 0%, 16% { transform: translateX(0); } 20%, 36% { transform: translateX(70px); } 40%, 56% { transform: translateX(140px); } 60%, 76% { transform: translateX(210px); } 80%, 96% { transform: translateX(280px); } 100% { transform: translateX(0); } }
@keyframes pa-lit3 { 0%, 100% { opacity: 0; } 4%, 30% { opacity: 1; } 34% { opacity: 0; } }
@keyframes pa-lit5 { 0%, 100% { opacity: 0; } 2%, 18% { opacity: 1; } 20% { opacity: 0; } }
@keyframes pa-lit6 { 0%, 100% { opacity: 0; } 2%, 14% { opacity: 1; } 17% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .pt-art * { animation: none !important; } .pa-lit3, .pa-lit5, .pa-lit6 { opacity: 0; } .pa-lit5.d4, .pa-lit6.d0, .pa-lit3.d0 { opacity: 1; } .pa-arc { stroke-dashoffset: 0; } }

/* Domains */
.lp-hero.hero-bg-home.pt-bg-dm { background-image: linear-gradient(90deg, var(--violet-ink) 0%, rgba(74, 12, 186, .92) 30%, rgba(74, 12, 186, .45) 58%, rgba(74, 12, 186, .05) 100%), url(/assets/img/products/dm-hero.webp); }
.cta-band.cta-img-products.pt-bg-dm { background-image: url(/assets/img/products/dm-cta.webp); }
@media (max-width: 860px) { .lp-hero.hero-bg-home.pt-bg-dm { background-image: linear-gradient(180deg, var(--violet-ink) 0%, rgba(74, 12, 186, .9) 45%, rgba(74, 12, 186, .35) 100%), url(/assets/img/products/dm-hero-1024.webp); } }
.pt-bg-dm .pt-reel { background: #fff; }
.pt-bg-dm .pt-reel::after { display: none; }
.pt-bg-dm .pt-reel video { object-position: 50% 0; }

/* API section: plain English flow, when this happens > our API does this > the result */
.pt-api { position: relative; display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(24px, 4vw, 64px); align-items: center; margin-top: 48px; padding: clamp(30px, 4vw, 60px); overflow: hidden; border-radius: 32px; background: linear-gradient(135deg, #4310c9 0%, #6d28d9 55%, #9b6bf7 100%); color: #fff; }
.pt-api::before, .pt-api::after { content: ""; position: absolute; border-radius: 50%; pointer-events: none; }
.pt-api::before { top: -22%; right: -8%; width: 58%; aspect-ratio: 1; background: rgba(255, 255, 255, .09); }
.pt-api::after { bottom: -34%; right: 26%; width: 34%; aspect-ratio: 1; background: rgba(255, 255, 255, .07); }
.pt-api-side, .pt-api-stage { position: relative; z-index: 1; min-width: 0; }
.pt-api-tag { display: inline-block; margin: 0 0 12px; padding: 6px 13px; border-radius: 99px; background: rgba(255, 255, 255, .16); font-size: 13px; font-weight: 600; }
.pt-api-row { position: relative; display: block; width: 100%; padding: 13px 0 15px; border: 0; background: none; color: #fff; font: inherit; text-align: left; opacity: .62; cursor: pointer; transition: opacity .25s ease; }
.pt-api-row.on, .pt-api-row:hover { opacity: 1; }
.pt-api-name { display: block; font-size: 17px; font-weight: 600; letter-spacing: -0.01em; line-height: 1.3; }
.pt-api-text { display: block; margin-top: 3px; font-size: 14.5px; line-height: 1.45; color: rgba(255, 255, 255, .82); }
.pt-api .pt-bar { height: 2px; border-radius: 0; background: rgba(255, 255, 255, .2); }
.pt-api .pt-bar i { background: #fff; }
.pt-api.playing .pt-api-row.on .pt-bar i { animation: ptbar 6s linear forwards; }
.pt-api.held .pt-api-row.on .pt-bar i { animation-play-state: paused; }
.pt-api-foot { margin: 16px 0 0; font-size: 14px; color: rgba(255, 255, 255, .82); }
.pt-api-foot a { color: #fff; font-weight: 600; }
.pt-api-stage { display: grid; }
.pt-api-pane { grid-area: 1 / 1; display: flex; flex-direction: column; gap: 30px; min-width: 0; opacity: 0; visibility: hidden; transition: opacity .25s ease, visibility .25s; }
.pt-api-pane.on { opacity: 1; visibility: visible; }
.pt-api-card { position: relative; display: flex; align-items: center; gap: 15px; width: 84%; padding: 17px 20px; border-radius: 22px; background: #fff; color: var(--ink, #14102b); }
.pt-api-card:nth-child(2) { align-self: flex-end; }
.pt-api-card + .pt-api-card::before { content: ""; position: absolute; left: 50%; top: -30px; height: 30px; border-left: 2px dashed rgba(255, 255, 255, .55); }
.pt-api-card + .pt-api-card::after { content: ""; position: absolute; left: calc(50% - 3px); top: -30px; width: 8px; height: 8px; border-radius: 50%; background: #fff; animation: ptapidot 1.6s ease-in-out infinite; }
.pt-api-ic { display: flex; flex: none; align-items: center; justify-content: center; width: 46px; height: 46px; border-radius: 15px; background: #efe9ff; color: #6011ee; }
.pt-api-ic svg { width: 23px; height: 23px; }
.pt-api-card.is-mid .pt-api-ic { background: #6011ee; color: #fff; }
.pt-api-card.is-end .pt-api-ic { border-radius: 50%; background: #16a34a; color: #fff; }
.pt-api-t { min-width: 0; }
.pt-api-t small { display: block; color: #6b6880; font-size: 12.5px; font-weight: 500; }
.pt-api-t strong { display: block; margin-top: 1px; font-size: 16.5px; font-weight: 600; letter-spacing: -0.01em; line-height: 1.3; }
.pt-api-pane.on .pt-api-card { animation: ptapipop .6s cubic-bezier(.2, 1.25, .4, 1) both; }
.pt-api-pane.on .pt-api-card:nth-child(2) { animation-delay: .2s; }
.pt-api-pane.on .pt-api-card:nth-child(3) { animation-delay: .4s; }
@keyframes ptapipop { from { opacity: 0; scale: .9; translate: 0 14px; } to { opacity: 1; scale: 1; translate: 0 0; } }
@keyframes ptapidot { from { translate: 0 0; opacity: 0; } 20% { opacity: 1; } 80% { opacity: 1; } to { translate: 0 22px; opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .pt-api-pane.on .pt-api-card { animation: none; } .pt-api-card + .pt-api-card::after { display: none; } }
@media (max-width: 960px) {
	.pt-api { display: block; }
	.pt-api-stage { margin-top: 26px; }
}
@media (max-width: 640px) {
	.pt-api { margin-top: 28px; padding: 22px 16px 20px; border-radius: 24px; }
	.pt-api-card { width: 94%; padding: 13px 14px; border-radius: 18px; gap: 12px; }
	.pt-api-ic { width: 40px; height: 40px; border-radius: 13px; }
	.pt-api-t strong { font-size: 15px; }
	.pt-api-pane { gap: 24px; }
	.pt-api-card + .pt-api-card::before, .pt-api-card + .pt-api-card::after { top: -24px; }
	.pt-api-card + .pt-api-card::before { height: 24px; }
}

/* Cloud Storage */
.lp-hero.hero-bg-home.pt-bg-cs { background-image: linear-gradient(90deg, var(--violet-ink) 0%, rgba(74, 12, 186, .92) 30%, rgba(74, 12, 186, .45) 58%, rgba(74, 12, 186, .05) 100%), url(/assets/img/products/cs-hero.webp); }
.cta-band.cta-img-products.pt-bg-cs { background-image: url(/assets/img/products/cs-cta.webp); }
@media (max-width: 860px) { .lp-hero.hero-bg-home.pt-bg-cs { background-image: linear-gradient(180deg, var(--violet-ink) 0%, rgba(74, 12, 186, .9) 45%, rgba(74, 12, 186, .35) 100%), url(/assets/img/products/cs-hero-1024.webp); } }
.pt-bg-cs .pt-reel { background: #fff; }
.pt-bg-cs .pt-reel::after { display: none; }
.pt-bg-cs .pt-reel video { object-position: 50% 0; }
.lp-hero.hero-bg-home.pt-bg-wpp { background-image: linear-gradient(90deg, var(--violet-ink) 0%, rgba(74, 12, 186, .92) 30%, rgba(74, 12, 186, .45) 58%, rgba(74, 12, 186, .05) 100%), url(/assets/img/products/wpp-hero.webp); }
.cta-band.cta-img-products.pt-bg-wpp { background-image: url(/assets/img/products/wpp-cta.webp); }
@media (max-width: 860px) { .lp-hero.hero-bg-home.pt-bg-wpp { background-image: linear-gradient(180deg, var(--violet-ink) 0%, rgba(74, 12, 186, .9) 45%, rgba(74, 12, 186, .35) 100%), url(/assets/img/products/wpp-hero-1024.webp); } }
.pt-bg-wpp .pt-reel { background: #1e1e1e; }
.pt-bg-wpp .pt-reel video { object-position: 50% 0; }
.lp-hero.hero-bg-home.pt-bg-esim { background-image: linear-gradient(90deg, var(--violet-ink) 0%, rgba(74, 12, 186, .92) 30%, rgba(74, 12, 186, .45) 58%, rgba(74, 12, 186, .05) 100%), url(/assets/img/products/esim-hero.webp); }
.cta-band.cta-img-products.pt-bg-esim { background-image: url(/assets/img/products/esim-cta.webp); }
@media (max-width: 860px) { .lp-hero.hero-bg-home.pt-bg-esim { background-image: linear-gradient(180deg, var(--violet-ink) 0%, rgba(74, 12, 186, .9) 45%, rgba(74, 12, 186, .35) 100%), url(/assets/img/products/esim-hero-1024.webp); } }
.pt-bg-esim .pt-reel video { object-position: 50% 0; }
.lp-hero.hero-bg-home.pt-bg-vpn { background-image: linear-gradient(90deg, var(--violet-ink) 0%, rgba(74, 12, 186, .92) 30%, rgba(74, 12, 186, .45) 58%, rgba(74, 12, 186, .05) 100%), url(/assets/img/products/vpn-hero.webp); }
.cta-band.cta-img-products.pt-bg-vpn { background-image: url(/assets/img/products/vpn-cta.webp); }
@media (max-width: 860px) { .lp-hero.hero-bg-home.pt-bg-vpn { background-image: linear-gradient(180deg, var(--violet-ink) 0%, rgba(74, 12, 186, .9) 45%, rgba(74, 12, 186, .35) 100%), url(/assets/img/products/vpn-hero-1024.webp); } }
.pt-bg-vpn .pt-reel { background: #fff; }
.pt-bg-vpn .pt-reel::after { display: none; }
.pt-bg-vpn .pt-reel video { object-position: 50% 0; }
.lp-hero.hero-bg-home.pt-bg-bp { background-image: linear-gradient(90deg, var(--violet-ink) 0%, rgba(74, 12, 186, .92) 30%, rgba(74, 12, 186, .45) 58%, rgba(74, 12, 186, .05) 100%), url(/assets/img/products/bp-hero.webp); }
.cta-band.cta-img-products.pt-bg-bp { background-image: url(/assets/img/products/bp-cta.webp); }
@media (max-width: 860px) { .lp-hero.hero-bg-home.pt-bg-bp { background-image: linear-gradient(180deg, var(--violet-ink) 0%, rgba(74, 12, 186, .9) 45%, rgba(74, 12, 186, .35) 100%), url(/assets/img/products/bp-hero-1024.webp); } }
.pt-bg-bp .pt-reel { background: #fff; }
.pt-bg-bp .pt-reel::after { display: none; }
.pt-bg-bp .pt-reel video { object-position: 50% 0; }

/* Physical products (11/8): product photo in the split section, stacked menu groups, page art */
.menu-col .menu-label.is-sub { margin-top: 14px; }
.menu-products { grid-template-rows: auto 1fr; }
.menu-head { grid-column: 1; display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 12px; row-gap: 2px; margin: 0 6px; padding: 10px 6px 12px; border-bottom: 1px solid var(--line); }
.menu-head strong { font-family: var(--display); font-size: 17px; font-weight: 600; letter-spacing: -0.02em; color: var(--ink); }
.menu-head span { font-size: 13.5px; color: var(--mute); }
.menu-products .menu-grid { grid-column: 1; padding-top: 12px; }
.menu-products .nv-pv { grid-column: 2; grid-row: 1 / span 2; }
@media (max-width: 1240px) { .menu-products .nv-pv { grid-column: 1; grid-row: auto; } }
.pt-split-media.is-photo { display: flex; align-items: center; justify-content: center; padding: 48px 52px 48px 0; }
.pt-split-photo { display: block; width: 100%; max-width: 500px; height: auto; filter: drop-shadow(0 28px 34px rgba(8, 0, 30, .5)); }
.js .pt-split-photo { opacity: 0; translate: 0 40px; transition: opacity .8s var(--ease) .1s, translate 1s var(--ease) .1s; }
.js .pt-split.in .pt-split-photo { opacity: 1; translate: none; }
@media (max-width: 860px) { .pt-split-media.is-photo { height: auto; padding: 4px 28px 34px; } .pt-split-photo { max-width: 400px; } }
.lp-hero.hero-bg-home.pt-bg-box { background-image: linear-gradient(90deg, var(--violet-ink) 0%, rgba(74, 12, 186, .92) 30%, rgba(74, 12, 186, .45) 58%, rgba(74, 12, 186, .05) 100%), url(/assets/img/products/box-hero.webp); }
.cta-band.cta-img-products.pt-bg-box { background-image: url(/assets/img/products/box-cta.webp); }
@media (max-width: 860px) { .lp-hero.hero-bg-home.pt-bg-box { background-image: linear-gradient(180deg, var(--violet-ink) 0%, rgba(74, 12, 186, .9) 45%, rgba(74, 12, 186, .35) 100%), url(/assets/img/products/box-hero-1024.webp); } }
.pt-bg-box .pt-site-ph { background: #0e1117; }
.pt-photos { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); max-width: 540px; }
.pt-photo { margin: 0 0 14px; padding: 16px 16px 13px; border: 1px solid rgba(255, 255, 255, .2); border-radius: 20px; background: #fff; }
.pt-photo img { display: block; width: 100%; height: auto; }
.pt-photo figcaption { margin-top: 2px; color: #3b3355; font-size: 13px; font-weight: 600; letter-spacing: -0.01em; text-align: center; }
@media (max-width: 960px) { .pt-photo { margin-bottom: 10px; padding: 10px 10px 9px; border-radius: 14px; } .pt-photo figcaption { font-size: 11.5px; } }
.lp-hero.hero-bg-home.pt-bg-tap { background-image: linear-gradient(90deg, var(--violet-ink) 0%, rgba(74, 12, 186, .92) 30%, rgba(74, 12, 186, .45) 58%, rgba(74, 12, 186, .05) 100%), url(/assets/img/products/tap-hero.webp); }
.cta-band.cta-img-products.pt-bg-tap { background-image: url(/assets/img/products/tap-cta.webp); }
@media (max-width: 860px) { .lp-hero.hero-bg-home.pt-bg-tap { background-image: linear-gradient(180deg, var(--violet-ink) 0%, rgba(74, 12, 186, .9) 45%, rgba(74, 12, 186, .35) 100%), url(/assets/img/products/tap-hero-1024.webp); } }
/* Site template (11/8): Features, How it works, Enterprise. Jump bar + category grids of real screens */
html:has(.page-site) { scroll-behavior: smooth; }
.pt-jump { position: sticky; top: 64px; z-index: 40; background: rgba(255, 255, 255, .95); border-bottom: 1px solid var(--line); }
.pt-jump-in { display: flex; justify-content: center; gap: 4px; overflow-x: auto; padding: 9px 0; scrollbar-width: none; }
.pt-jump-in::-webkit-scrollbar { display: none; }
.pt-jump a { flex: none; padding: 7px 15px; border-radius: 999px; color: var(--ink); font-size: 14px; font-weight: 550; letter-spacing: -0.01em; text-decoration: none; transition: background-color .16s var(--ease), color .16s var(--ease); }
.pt-jump a:hover { background-color: #f6f2ff; }
.pt-jump a.on { background-color: var(--violet); color: #fff; }
.page-site .pt-cat { scroll-margin-top: 120px; }
.pt-split-photo.is-shot { max-width: 340px; border: 1px solid rgba(255, 255, 255, .22); border-radius: 18px; }
@media (max-width: 860px) { .pt-jump-in { justify-content: flex-start; } .pt-jump a { padding: 6px 12px; font-size: 13.5px; } .pt-split-photo.is-shot { max-width: 300px; } }
.lp-hero.hero-bg-home.pt-bg-ft { background-image: linear-gradient(90deg, var(--violet-ink) 0%, rgba(74, 12, 186, .92) 30%, rgba(74, 12, 186, .45) 58%, rgba(74, 12, 186, .05) 100%), url(/assets/img/products/ft-hero.webp); }
.cta-band.cta-img-products.pt-bg-ft { background-image: url(/assets/img/products/ft-cta.webp); }
@media (max-width: 860px) { .lp-hero.hero-bg-home.pt-bg-ft { background-image: linear-gradient(180deg, var(--violet-ink) 0%, rgba(74, 12, 186, .9) 45%, rgba(74, 12, 186, .35) 100%), url(/assets/img/products/ft-hero-1024.webp); } }
.pt-bg-ft .pt-site-ph { background: #f5f3fb; }
/* Site template: a featured card leads each section (big real screen + short pitch) */
.pt-feat { position: relative; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: center; gap: 44px; overflow: hidden; margin: 40px 0 28px; padding: 52px 0 52px 52px; border: 1px solid rgba(96, 17, 238, .1); border-radius: 28px; background: linear-gradient(140deg, #f8f5ff 0%, #ece5fc 100%); }
.sec-tint .pt-feat { background: #fff; }
.pt-feat .eyebrow { margin: 0; color: var(--violet); }
.pt-feat-text { min-width: 0; }
.pt-feat-text h3 { margin: 12px 0 0; font-family: var(--display); font-stretch: 116%; font-size: clamp(26px, 2.5vw, 36px); font-weight: 520; letter-spacing: -0.03em; line-height: 1.1; color: var(--ink); text-wrap: balance; }
.pt-feat-text > p:not(.eyebrow) { margin: 14px 0 0; max-width: 46ch; font-size: 16.5px; line-height: 1.55; color: var(--ink-2); text-wrap: pretty; }
.pt-feat-pts { display: grid; gap: 10px; margin: 22px 0 0; padding: 0; list-style: none; }
.pt-feat-pts li { position: relative; padding-left: 29px; font-size: 15px; font-weight: 550; line-height: 1.4; color: var(--ink); }
.pt-feat-pts li::before { content: ""; position: absolute; left: 0; top: 1px; width: 19px; height: 19px; border-radius: 50%; background: var(--violet); }
.pt-feat-pts li::after { content: ""; position: absolute; left: 7px; top: 5px; width: 4px; height: 8px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.pt-feat-media { min-width: 0; }
.pt-feat-win { overflow: hidden; border: 1px solid rgba(74, 12, 186, .12); border-right: 0; border-radius: 14px 0 0 14px; background: #fff; box-shadow: 0 34px 60px -34px rgba(74, 12, 186, .4); }
.pt-feat-win img { display: block; width: 100%; height: auto; }
.js .pt-feat .pt-feat-win { opacity: 0; translate: 48px 0; transition: opacity .8s var(--ease) .1s, translate 1s var(--ease) .1s; }
.js .pt-feat.in .pt-feat-win { opacity: 1; translate: none; }
@media (max-width: 960px) { .pt-feat { grid-template-columns: minmax(0, 1fr); gap: 26px; margin-top: 30px; padding: 30px 0 0 24px; border-radius: 22px; } .pt-feat-text { padding-right: 24px; } .pt-feat-win { border-bottom: 0; border-radius: 12px 0 0 0; } }
/* Site template: dark showcase for the panel tour, browser window + phone, pill tabs */
.pt-show { position: relative; overflow: hidden; padding: 60px 60px 0; border-radius: 28px; color: #fff; background: var(--plum); background-image: radial-gradient(60% 55% at 92% 0%, rgba(139, 92, 246, .55), transparent 70%), radial-gradient(45% 50% at 0% 100%, rgba(109, 40, 217, .42), transparent 70%); }
.pt-show-head { max-width: 680px; }
.pt-show .eyebrow { margin: 0 0 14px; color: #c4b5fd; }
.pt-show h2 { margin: 0; color: #fff; font-family: var(--display); font-stretch: 116%; font-size: clamp(30px, 3.2vw, 46px); font-weight: 520; letter-spacing: -0.03em; line-height: 1.06; text-wrap: balance; }
.pt-show-sub { margin: 16px 0 0; max-width: 56ch; font-size: 17px; line-height: 1.55; color: rgba(255, 255, 255, .76); }
.pt-show .pt-sc { margin-top: 30px; }
.pt-show .pt-sc-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; border: 0; }
.pt-show .pt-sc-tabs button { flex: none; width: auto; overflow: hidden; padding: 10px 18px 12px; border: 1px solid rgba(255, 255, 255, .18); border-radius: 999px; background: rgba(255, 255, 255, .07); transition: background-color .2s var(--ease), border-color .2s var(--ease); }
.pt-show .pt-sc-tabs button + button { padding-left: 18px; }
.pt-show .pt-sc-tabs button:hover { background: rgba(255, 255, 255, .13); }
.pt-show .pt-sc-tabs button[aria-selected="true"] { border-color: #fff; background: #fff; }
.pt-show .pt-sc-name { font-size: 15px; color: rgba(255, 255, 255, .84); }
.pt-show .pt-sc-tabs button:hover .pt-sc-name { color: #fff; }
.pt-show .pt-sc-tabs button[aria-selected="true"] .pt-sc-name { color: var(--plum); }
.pt-show .pt-sc-cap { display: none; }
.pt-show .pt-bar, .pt-show .pt-sc-tabs button[aria-selected="true"] .pt-bar { left: 18px; right: 18px; bottom: 5px; height: 2px; background: transparent; }
.pt-show .pt-bar i { background: var(--violet); }
.pt-show-now { margin: 16px 0 26px; min-height: 1.5em; font-size: 15.5px; color: rgba(255, 255, 255, .74); }
.pt-show .pt-sc-stage { position: relative; }
.pt-show .pt-sc-slide { position: relative; padding-right: 150px; }
.pt-show-win { overflow: hidden; border: 1px solid rgba(255, 255, 255, .2); border-bottom: 0; border-radius: 14px 14px 0 0; background: #fff; }
.pt-show-win img { display: block; width: 100%; height: auto; }
@media (max-width: 1180px) { .pt-show { padding: 48px 40px 0; } .pt-show .pt-sc-slide { padding-right: 110px; } }
@media (max-width: 860px) {
	.pt-show { padding: 32px 22px 0; border-radius: 22px; }
	.pt-show-sub { font-size: 15.5px; }
	.pt-show .pt-sc-tabs { flex-wrap: nowrap; overflow-x: auto; margin: 0 -22px; padding: 0 22px; scrollbar-width: none; }
	.pt-show .pt-sc-tabs button, .pt-show .pt-sc-tabs button + button { padding: 8px 14px 10px; }
	.pt-show-now { margin: 12px 0 18px; font-size: 14.5px; }
	.pt-show .pt-sc-track { margin: 0 -22px; padding: 0 22px; }
	.pt-show .pt-sc-slide { padding-right: 64px; }
	.pt-show .pt-sc-foot { margin: 14px 0 20px; }
}
@media (max-width: 860px) { .pt-show .pt-sc-slide { padding-right: 0; } .pt-show-win { display: none; } }
.pt-feat-logos { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 18px; }
.pt-feat-logo { display: inline-flex; align-items: center; gap: 7px; height: 42px; padding: 0 14px; border: 1px solid rgba(96, 17, 238, .12); border-radius: 12px; background: #fff; font-size: 15px; font-weight: 650; letter-spacing: -0.01em; }
.pt-feat-logo b { font-weight: 650; }
.pt-feat-svg { display: block; fill: currentColor; }
.pt-feat-logo.is-stripe { color: #635bff; }
.pt-feat-logo.is-stripe .pt-feat-svg { width: 50px; height: 40px; }
.pt-feat-logo.is-paypal { color: #003087; }
.pt-feat-logo.is-paypal .pt-feat-svg { width: 15px; height: 20px; }
.pt-feat-logo.is-manual { color: var(--ink); }
.pt-feat-logo .lp-ico { width: 19px; height: 19px; color: var(--violet); }
.pt-art text.is-big3 { font-size: 18px; font-weight: 700; letter-spacing: -.01em; }
.pt-art text.is-up { fill: #a7f3d0; }
.pa-chip { fill: rgba(255, 255, 255, .14); }
.pa-logo { fill: #fff; }
.pa-logo.is-p { fill: #5b21b6; }
.pa-growx { transform-box: fill-box; transform-origin: 0 50%; animation: pa-growx 6s var(--ease) infinite; }
@keyframes pa-growx { 0%, 8% { transform: scaleX(.15); } 30%, 88% { transform: scaleX(1); } 100% { transform: scaleX(.15); } }
.pa-grow.d1 { animation-delay: .15s; } .pa-grow.d2 { animation-delay: .3s; } .pa-grow.d3 { animation-delay: .45s; } .pa-grow.d4 { animation-delay: .6s; }
/* Features page: every small card is a graphic, and the cards do not move on hover */
.page-site .pt-tile:hover { border-color: var(--stone-line); transform: none; }
.pa-ring, .pa-ring2 { fill: none; stroke: #fff; stroke-width: 2.5; }
.pa-focus { fill: none; stroke: #c4b5fd; stroke-width: 2; }
.pa-dim { fill: rgba(255, 255, 255, .05); stroke: rgba(255, 255, 255, .14); }
.pa-dash { stroke: rgba(255, 255, 255, .38); stroke-width: 2; stroke-dasharray: 5 6; }
.pt-art text.pa-mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12px; font-weight: 500; fill: #ede9fe; }
.pt-art text.pa-mono.is-dim { fill: rgba(255, 255, 255, .55); }
.pt-art text.is-ok { fill: #a7f3d0; }
.pa-hue { fill: #0e5f9e; animation: pa-hue 10s steps(1, end) infinite; }
@keyframes pa-hue { 0% { fill: #0e5f9e; } 20% { fill: #0d9488; } 40% { fill: #7c3aed; } 60% { fill: #e11d48; } 80%, 100% { fill: #ea580c; } }
.pa-heroimg { fill: #efe7ff; animation: pa-heroimg 6s steps(1, end) infinite; }
@keyframes pa-heroimg { 0% { fill: #efe7ff; } 33.333% { fill: #1e1b4b; } 66.666%, 100% { fill: #1d4ed8; } }
.pa-tick { opacity: 0; animation: pa-tick 8s infinite; }
.pa-tick.d1 { animation-delay: .8s; } .pa-tick.d2 { animation-delay: 1.6s; } .pa-tick.d3 { animation-delay: 2.4s; } .pa-tick.d4 { animation-delay: 3.2s; }
@keyframes pa-tick { 0%, 6% { opacity: 0; } 10%, 90% { opacity: 1; } 94%, 100% { opacity: 0; } }
.pa-blink { opacity: 0; animation: pa-blink 4s infinite; }
@keyframes pa-blink { 0%, 40% { opacity: 0; } 50%, 90% { opacity: 1; } 100% { opacity: 0; } }
.pa-caret { fill: #fff; animation: pa-caret 1s steps(1, end) infinite; }
@keyframes pa-caret { 0% { opacity: 1; } 50% { opacity: 0; } }
.pa-beat { transform-box: fill-box; transform-origin: center; animation: pa-beat 2.4s ease-in-out infinite; }
@keyframes pa-beat { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.08); } }
.pa-twink { animation: pa-twink 3s ease-in-out infinite; }
.pa-twink.d1 { animation-delay: .7s; } .pa-twink.d2 { animation-delay: 1.4s; } .pa-twink.d3 { animation-delay: 2.1s; }
@keyframes pa-twink { 0%, 100% { opacity: .2; } 50% { opacity: 1; } }
.pa-fill { transform-box: fill-box; transform-origin: 0 50%; animation: pa-fill 6s var(--ease) infinite; }
@keyframes pa-fill { 0% { transform: scaleX(.9); } 55%, 62% { transform: scaleX(.18); } 75%, 100% { transform: scaleX(.9); } }
.pa-press { opacity: .6; animation: pa-press 6s infinite; }
.pa-press.d1 { animation-delay: 2s; } .pa-press.d2 { animation-delay: 4s; }
@keyframes pa-press { 0%, 100% { opacity: .6; } 5%, 25% { opacity: 1; } 32% { opacity: .6; } }
.pa-type { transform-box: fill-box; transform-origin: 0 50%; transform: scaleX(0); animation: pa-type 7s var(--ease) infinite; }
.pa-type.d1 { animation-delay: .3s; } .pa-type.d2 { animation-delay: .6s; } .pa-type.d3 { animation-delay: .9s; } .pa-type.d4 { animation-delay: 1.2s; } .pa-type.d5 { animation-delay: 1.5s; }
@keyframes pa-type { 0%, 4% { transform: scaleX(0); } 22%, 88% { transform: scaleX(1); } 100% { transform: scaleX(0); } }
@media (prefers-reduced-motion: reduce) { .pa-tick, .pa-blink, .pa-press { opacity: 1; } .pa-type { transform: none; } }
.js .pt-show.in .pt-sc-stage { translate: none; }
@media (max-width: 600px) { .pt-jump { top: 58px; } .page-site .pt-cat { scroll-margin-top: 108px; } }
/* Shared footer call to action for every page that is not a single product page: the resellportal.com footer background */
body .cta-band.cta-img-site { position: relative; overflow: hidden; background: linear-gradient(180deg, rgba(5, 0, 8, .85) 0%, rgba(8, 1, 15, .55) 50%, rgba(5, 0, 8, 0) 100%), url(/assets/img/cta-site-1920.webp) bottom center / cover no-repeat, #050008; }
body .cta-band.cta-img-site::before { content: none; }
body .cta-band.cta-img-site > .wrap { position: relative; z-index: 1; }
@media (max-width: 768px) { body .cta-band.cta-img-site { background: linear-gradient(180deg, rgba(5, 0, 8, .85) 0%, rgba(8, 1, 15, .55) 50%, rgba(5, 0, 8, 0) 100%), url(/assets/img/cta-site-mobile.webp) bottom center / cover no-repeat, #050008; } }
/* Site template: Every way to sell, inside the dark showcase card (pill tabs, numbered steps, real phone screen) */
.pt-ways-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 30px; }
.pt-ways-tabs button { display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px 9px 12px; border: 1px solid rgba(255, 255, 255, .18); border-radius: 999px; background: rgba(255, 255, 255, .07); color: rgba(255, 255, 255, .86); font: inherit; font-size: 15px; font-weight: 550; cursor: pointer; transition: background-color .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease); }
.pt-ways-tabs button:hover { background: rgba(255, 255, 255, .13); color: #fff; }
.pt-ways-tabs button[aria-selected="true"] { border-color: #fff; background: #fff; color: var(--plum); }
.pt-ways-tabs .lp-ico { width: 18px; height: 18px; color: inherit; }
.pt-ways-panes { margin-top: 36px; }
.pt-way { display: none; grid-template-columns: minmax(0, 1fr) 300px; gap: 56px; align-items: start; }
.pt-way.on { display: grid; animation: ptway .5s var(--ease); }
@keyframes ptway { from { opacity: 0; translate: 0 12px; } }
.pt-way-text { min-width: 0; max-width: 620px; }
.pt-way-best { margin: 0; font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: #c4b5fd; }
.pt-way-text h3 { margin: 10px 0 0; color: #fff; font-family: var(--display); font-stretch: 116%; font-size: clamp(28px, 2.6vw, 38px); font-weight: 520; letter-spacing: -0.03em; line-height: 1.08; }
.pt-way-sum { margin: 12px 0 0; font-size: 17px; line-height: 1.55; color: rgba(255, 255, 255, .76); }
.pt-way-steps { margin: 28px 0 0; padding: 0; list-style: none; }
.pt-way-steps li { display: flex; gap: 16px; padding: 18px 0; border-top: 1px solid rgba(255, 255, 255, .13); }
.pt-way-steps li:last-child { border-bottom: 1px solid rgba(255, 255, 255, .13); }
.pt-way-n { display: inline-flex; flex: none; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%; background: rgba(255, 255, 255, .12); color: #fff; font-size: 14px; font-weight: 650; }
.pt-way-steps h4 { margin: 4px 0 0; color: #fff; font-size: 17px; font-weight: 650; letter-spacing: -0.012em; line-height: 1.3; }
.pt-way-steps p { margin: 5px 0 0; font-size: 15.5px; line-height: 1.5; color: rgba(255, 255, 255, .72); }
.pt-way.on .pt-way-steps li { animation: ptwayli .5s var(--ease) backwards; }
.pt-way.on .pt-way-steps li:nth-child(2) { animation-delay: .06s; } .pt-way.on .pt-way-steps li:nth-child(3) { animation-delay: .12s; } .pt-way.on .pt-way-steps li:nth-child(4) { animation-delay: .18s; }
@keyframes ptwayli { from { opacity: 0; translate: 0 10px; } }
.pt-way-money { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }
.pt-way-money > div { flex: 1 1 220px; padding: 14px 18px; border: 1px solid rgba(255, 255, 255, .16); border-radius: 16px; background: rgba(255, 255, 255, .06); }
.pt-way-money > div:first-child { border-color: #fff; background: #fff; }
.pt-way-money small { display: block; font-size: 11.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: #c4b5fd; }
.pt-way-money > div:first-child small { color: var(--violet); }
.pt-way-money strong { display: block; margin-top: 4px; font-size: 15.5px; font-weight: 600; color: #fff; }
.pt-way-money > div:first-child strong { color: var(--ink); }
.pt-way-media { position: sticky; top: 140px; }
.pt-ways { padding-bottom: 60px; }
@media (max-width: 1180px) { .pt-way { grid-template-columns: minmax(0, 1fr) 250px; gap: 40px; } }
@media (max-width: 860px) {
	.pt-ways { padding-bottom: 32px; }
	.pt-ways-tabs { flex-wrap: nowrap; overflow-x: auto; margin: 24px -22px 0; padding: 0 22px; scrollbar-width: none; }
	.pt-ways-tabs::-webkit-scrollbar { display: none; }
	.pt-ways-tabs button { flex: none; padding: 8px 14px 8px 11px; font-size: 14.5px; }
	.pt-ways-panes { margin-top: 26px; }
	.pt-way { grid-template-columns: minmax(0, 1fr); gap: 28px; }
	.pt-way-sum { font-size: 16px; }
	.pt-way-media { position: static; display: flex; justify-content: center; }
}
/* Site template: where the money goes (light card on the tint band, big numbers) */
.pt-money { padding: 60px; border: 1px solid rgba(96, 17, 238, .1); border-radius: 28px; background: #fff; color: var(--ink); }
.pt-money .eyebrow { margin: 0 0 14px; color: var(--violet); }
.pt-money h2 { margin: 0; color: var(--ink); font-family: var(--display); font-stretch: 116%; font-size: clamp(30px, 3.2vw, 46px); font-weight: 520; letter-spacing: -0.03em; line-height: 1.06; text-wrap: balance; }
.pt-money .pt-show-sub { color: var(--ink-2); }
.pt-money-flow { display: flex; align-items: stretch; gap: 14px; margin-top: 38px; }
.pt-money-card { flex: 1 1 0; min-width: 0; padding: 30px 28px 28px; border-radius: 24px; background: linear-gradient(140deg, #f8f5ff 0%, #efe8fd 100%); }
.pt-money-card strong { display: block; font-family: var(--display); font-stretch: 116%; font-size: clamp(48px, 5vw, 72px); font-weight: 560; letter-spacing: -0.035em; line-height: .95; color: var(--ink); }
.pt-money-card b { display: block; margin-top: 18px; font-size: 17px; font-weight: 650; }
.pt-money-card span { display: block; margin-top: 4px; font-size: 15px; line-height: 1.5; color: var(--ink-2); }
.pt-money-card.is-keep { background: var(--violet); color: #fff; background-image: radial-gradient(80% 90% at 100% 0%, rgba(167, 139, 250, .55), transparent 70%); }
.pt-money-card.is-keep strong { color: #fff; }
.pt-money-card.is-keep span { color: rgba(255, 255, 255, .82); }
.pt-money-arrow { display: inline-flex; flex: none; align-self: center; color: rgba(96, 17, 238, .4); }
.pt-money-arrow .lp-ico { width: 26px; height: 26px; color: inherit; }
.pt-money-note { margin: 16px 0 0; font-size: 14.5px; color: var(--mute); }
.pt-money-pts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px 44px; margin: 36px 0 0; padding: 32px 0 0; border-top: 1px solid var(--stone-line); list-style: none; }
.pt-money-pts li { display: flex; gap: 16px; }
.pt-money-pts h3 { margin: 2px 0 0; font-size: 17px; font-weight: 650; letter-spacing: -0.012em; color: var(--ink); }
.pt-money-pts p { margin: 5px 0 0; font-size: 15px; line-height: 1.55; color: var(--ink-2); }
.js .pt-money .pt-money-card { opacity: 0; translate: 0 18px; transition: opacity .6s var(--ease), translate .7s var(--ease); }
.js .pt-money.in .pt-money-card { opacity: 1; translate: none; }
.js .pt-money .pt-money-card:nth-of-type(2) { transition-delay: .12s; } .js .pt-money .pt-money-card:nth-of-type(3) { transition-delay: .24s; }
@media (max-width: 860px) { .pt-money { padding: 30px 22px; border-radius: 22px; } .pt-money-flow { flex-direction: column; gap: 8px; margin-top: 26px; } .pt-money-arrow { transform: rotate(90deg); } .pt-money-card { padding: 22px; } .pt-money-pts { grid-template-columns: minmax(0, 1fr); gap: 22px; } }
/* Site template: facts as an editorial list (sticky heading left, hairline rows right) */
.pt-facts { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 64px; align-items: start; }
.pt-facts-head { position: sticky; top: 140px; }
.pt-facts-head h2 { margin: 0; font-family: var(--display); font-stretch: 116%; font-size: clamp(32px, 3.4vw, 48px); font-weight: 520; letter-spacing: -0.03em; line-height: 1.05; color: var(--ink); text-wrap: balance; }
.pt-facts-head .sec-sub { margin-top: 16px; max-width: 40ch; }
.pt-facts-list { margin: 0; padding: 0; list-style: none; }
.pt-facts-list li { display: flex; gap: 20px; padding: 26px 0; border-top: 1px solid var(--stone-line); }
.pt-facts-list li:last-child { border-bottom: 1px solid var(--stone-line); }
.pt-fact-ic { display: inline-flex; flex: none; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 13px; background: var(--violet-soft); color: var(--violet); }
.pt-fact-ic .lp-ico { width: 21px; height: 21px; color: inherit; }
.pt-facts-list h3 { margin: 2px 0 0; font-size: 18px; font-weight: 650; letter-spacing: -0.014em; line-height: 1.3; color: var(--ink); }
.pt-facts-list p { margin: 6px 0 0; max-width: 58ch; font-size: 15.5px; line-height: 1.6; color: var(--ink-2); }
@media (max-width: 960px) { .pt-facts { grid-template-columns: minmax(0, 1fr); gap: 26px; } .pt-facts-head { position: static; } .pt-facts-list li { gap: 16px; padding: 20px 0; } }
@media (prefers-reduced-motion: reduce) { .pt-way.on, .pt-way.on .pt-way-steps li { animation: none; } }
@media (min-width: 1101px) { .page-site .pt-grid.is-steps { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 861px) and (max-width: 1100px) { .page-site .pt-grid.is-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* Big phones on site pages: real phone frame (notch + status bar over a band in the screen's top colour) */
.lp-phone.pt-ph { max-width: none; }
.pt-ph-screen { position: relative; overflow: hidden; padding-top: 38px; border-radius: 30px; background: #fff; }
.pt-ph-screen.is-navy { background: #0f172b; }
.pt-ph-screen img { display: block; width: 100%; height: auto; }
.pt-ph-screen .pt-status { height: 38px; }
.pt-art .pa-arrowp { fill: none; stroke: #7c3aed; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.pt-way-ph { width: 100%; }
.lp-phone.pt-show-ph { position: absolute; right: 0; bottom: 0; width: 250px; height: 470px; padding: 9px 9px 0; border-bottom: 0; border-radius: 40px 40px 0 0; overflow: hidden; }
.pt-show-ph .pt-ph-screen { border-radius: 31px 31px 0 0; height: 100%; }
@media (max-width: 1180px) { .lp-phone.pt-show-ph { width: 200px; height: 380px; } }
@media (max-width: 860px) {
	.lp-phone.pt-show-ph { position: relative; right: auto; bottom: auto; width: min(250px, 70vw); height: auto; margin: 0 auto; padding: 8px; border-bottom: 1px solid #3a3a46; border-radius: 38px; }
	.pt-show-ph .pt-ph-screen { height: auto; border-radius: 30px; }
	.pt-way-ph { width: min(260px, 72vw); }
}
.pa-spin2 { transform-box: fill-box; transform-origin: center; animation: pa-spin 6s linear infinite; }
/* Light hero for utility pages: API, Blog, FAQ, Downloads, Contact */
.lh { position: relative; overflow: hidden; padding: 76px 0 80px; border-radius: 0 0 clamp(22px, 2.6vw, 34px) clamp(22px, 2.6vw, 34px); background-color: #f4effe; background-image: radial-gradient(50% 85% at 90% 0%, rgba(124, 58, 237, .2), transparent 70%), radial-gradient(40% 70% at 0% 100%, rgba(96, 17, 238, .1), transparent 70%), linear-gradient(180deg, #faf8ff 0%, #f1ebfe 100%); }
.lh::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(rgba(96, 17, 238, .06) 1px, transparent 1px) 0 0 / 44px 44px, linear-gradient(90deg, rgba(96, 17, 238, .06) 1px, transparent 1px) 0 0 / 44px 44px; -webkit-mask-image: radial-gradient(70% 100% at 85% 20%, #000, transparent 75%); mask-image: radial-gradient(70% 100% at 85% 20%, #000, transparent 75%); }
.lh-in { position: relative; z-index: 1; }
.lh-mark { position: absolute; right: max(4vw, calc(50% - 640px)); top: 50%; width: 300px; height: 300px; translate: 0 -50%; color: rgba(96, 17, 238, .09); pointer-events: none; }
.lh-mark-svg { width: 100%; height: 100%; stroke-width: .9; }
.lh-eyebrow { display: flex; align-items: center; margin: 0 0 22px; font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-2); }
.lh-eyebrow a { color: inherit; text-decoration: none; }
.lh-eyebrow a:hover { color: var(--violet); }
.lh-eyebrow > span:not(.lh-ic) { margin: 0 9px; color: var(--mute); }
.lh-ic { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; margin-right: 12px; border: 1px solid rgba(96, 17, 238, .16); border-radius: 9px; background: #fff; color: var(--violet); }
.lh-ic-svg { width: 17px; height: 17px; }
.lh h1 { max-width: 15ch; margin: 0; color: var(--ink); text-wrap: balance; }
.lh-lead { max-width: 56ch; margin: 18px 0 0; color: var(--ink-2); }
.lh .phero-cta { margin-top: 28px; }
.lh .fq-chips { margin-top: 30px; }
.lh .fq-chips a { border: 1px solid rgba(96, 17, 238, .14); background: #fff; color: var(--ink); }
.lh .fq-chips a:hover { border-color: rgba(96, 17, 238, .4); }
.lh .fq-chips a span { background: var(--violet-soft); color: var(--violet); }
.js .lh-in > * { animation: lhrise .7s var(--ease) backwards; }
.js .lh-in > *:nth-child(2) { animation-delay: .06s; } .js .lh-in > *:nth-child(3) { animation-delay: .12s; } .js .lh-in > *:nth-child(4) { animation-delay: .18s; } .js .lh-in > *:nth-child(5) { animation-delay: .24s; }
@keyframes lhrise { from { opacity: 0; translate: 0 14px; } }
@media (max-width: 960px) { .lh-mark { width: 200px; height: 200px; right: -30px; top: 30%; } }
@media (max-width: 600px) { .lh { padding: 48px 0 52px; } .lh-mark { display: none; } .lh-eyebrow { margin-bottom: 16px; } }
@media (prefers-reduced-motion: reduce) { .js .lh-in > * { animation: none; } }
/* API page: restyle the panel's docs fragment to the site (its own <style> uses !important, so these do too, scoped to .page-api) */
.page-api .api-docs { max-width: 1040px; margin: 0 auto; }
.page-api .rp-api-docs { font-family: inherit !important; font-size: 15px !important; color: var(--ink-2) !important; }
.page-api .rp-api-base, .page-api .api-docs-container { padding: 30px 32px !important; border: 1px solid var(--stone-line) !important; border-radius: 24px !important; background: #fff !important; }
.page-api .api-docs-container { margin-top: 18px !important; }
.page-api .rp-api-docs h3, .page-api .rp-api-docs h2 { margin: 0 0 12px !important; font-family: var(--display) !important; font-stretch: 116%; font-size: 24px !important; font-weight: 520 !important; letter-spacing: -0.025em !important; color: var(--ink) !important; }
.page-api .rp-api-docs h4 { font-size: 16px !important; font-weight: 650 !important; color: var(--ink) !important; }
.page-api .rp-api-docs a { color: var(--violet) !important; }
.page-api .rp-api-docs pre, .page-api .rp-api-base > code { display: block; overflow-x: auto; margin: 10px 0 !important; padding: 16px 18px !important; border: 0 !important; border-radius: 14px !important; background: #1b1433 !important; color: #ede9fe !important; font-size: 13px !important; line-height: 1.6 !important; }
.page-api .rp-api-docs pre code { background: none !important; color: inherit !important; padding: 0 !important; }
.page-api .rp-api-docs :not(pre) > code { padding: 2px 6px !important; border-radius: 6px !important; background: #f3eeff !important; color: #5b21b6 !important; font-size: .9em !important; }
.page-api .rp-api-base > code { background: #1b1433 !important; color: #ede9fe !important; padding: 14px 18px !important; font-size: 14px !important; }
.page-api .rp-api-endpoints > div { border-color: var(--stone-line) !important; border-radius: 14px !important; }
.page-api [data-api-toggle] { transition: background-color .15s var(--ease); }
.page-api [data-api-toggle]:hover { background: #faf8ff !important; }
.page-api [data-api-toggle]:focus-visible { outline: 2px solid var(--violet); outline-offset: -2px; }
.page-api .order-doc-tab { padding: 7px 14px !important; border: 1px solid var(--stone-line) !important; border-radius: 999px !important; background: #fff !important; color: var(--ink) !important; font-size: 13px !important; font-weight: 550 !important; transition: background-color .15s var(--ease), border-color .15s var(--ease); }
.page-api .order-doc-tab:hover { border-color: rgba(96, 17, 238, .4) !important; }
.page-api .order-doc-tab.active { border-color: var(--violet) !important; background: var(--violet) !important; color: #fff !important; }
.page-api .rp-flag-box, .page-api .rp-api-fold { border-radius: 16px !important; }
@media (max-width: 768px) { .page-api .rp-api-base, .page-api .api-docs-container { padding: 22px 18px !important; border-radius: 20px !important; } .page-api .rp-api-docs pre, .page-api .rp-api-base > code { font-size: 12px !important; padding: 14px !important; } .page-api .order-doc-tab { padding: 6px 12px !important; font-size: 12.5px !important; } }
/* Homepage H1: the keyword line sits in the H1 as the small eyebrow, the three big lines stay the display text */
.hp-h1 { margin: 0; font-family: var(--sans); font-stretch: normal; font-weight: inherit; letter-spacing: normal; }
.hp-h1-k { display: block; }
.hp-h1-d { display: block; font-family: var(--display); font-stretch: 116%; color: #fff; }
/* /products catalog: category header + compact product cards */
.page-catalog .ct-sec { padding-top: 72px; padding-bottom: 72px; }
.ct-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; }
.ct-head h2 { margin: 0; font-family: var(--display); font-stretch: 116%; font-size: clamp(28px, 2.8vw, 40px); font-weight: 520; letter-spacing: -0.03em; line-height: 1.08; color: var(--ink); }
.ct-head .sec-sub { margin: 10px 0 0; max-width: 60ch; }
.ct-count { flex: none; padding: 6px 13px; border: 1px solid var(--stone-line); border-radius: 999px; background: #fff; color: var(--ink-2); font-size: 13.5px; font-weight: 550; }
.ct-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 30px; }
.ct-card { position: relative; display: flex; flex-direction: column; min-width: 0; padding: 22px 22px 20px; border: 1px solid var(--stone-line); border-radius: 22px; background: #fff; color: var(--ink); text-decoration: none; transition: border-color .2s var(--ease), background-color .2s var(--ease); }
.ct-card:hover { border-color: rgba(96, 17, 238, .38); background-color: #fdfcff; }
.ct-card:focus-visible { outline: 2px solid var(--violet); outline-offset: 2px; }
.ct-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.ct-ic { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 13px; background: var(--violet-soft); color: var(--violet); transition: background-color .2s var(--ease), color .2s var(--ease); }
.ct-ic .nv-svg { width: 22px; height: 22px; }
.ct-card:hover .ct-ic { background: var(--violet); color: #fff; }
.ct-price { padding: 5px 11px; border-radius: 999px; background: #f6f2ff; color: var(--violet); font-size: 13px; font-weight: 650; white-space: nowrap; }
.ct-name { margin: 18px 0 0; font-family: var(--sans); font-size: 18px; font-weight: 650; letter-spacing: -0.015em; line-height: 1.25; color: var(--ink); }
.ct-card p { margin: 6px 0 0; font-size: 14.5px; line-height: 1.5; color: var(--ink-2); }
.ct-go { display: inline-flex; align-items: center; gap: 6px; margin-top: auto; padding-top: 16px; color: var(--violet); font-size: 14px; font-weight: 600; }
.ct-go i { font-style: normal; transition: transform .2s var(--ease); }
.ct-card:hover .ct-go i { transform: translateX(3px); }
.sec-tint .ct-card { border-color: rgba(96, 17, 238, .1); }
@media (max-width: 1000px) { .ct-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) {
	.page-catalog .ct-sec { padding-top: 48px; padding-bottom: 48px; }
	.ct-head { flex-direction: column; align-items: flex-start; gap: 12px; }
	.ct-grid { grid-template-columns: minmax(0, 1fr); gap: 10px; margin-top: 22px; }
	.ct-card { display: grid; grid-template-columns: 44px minmax(0, 1fr); column-gap: 14px; padding: 16px; border-radius: 18px; }
	.ct-top { display: contents; }
	.ct-ic { grid-row: 1 / span 3; }
	.ct-price { grid-column: 2; justify-self: start; order: 3; margin-top: 10px; }
	.ct-name { grid-column: 2; margin: 0; font-size: 16.5px; }
	.ct-card p { grid-column: 2; font-size: 14px; }
	.ct-go { display: none; }
}
/* Site template: hero graphic (instead of real screens) and 3-step rows */
.pt-hero-art { display: flex; align-items: center; justify-content: center; }
.pt-art-hero { width: 100%; max-width: 460px; height: auto; }
.pt-art-hero text { font-family: var(--sans); }
.pa-drawv { stroke-dasharray: 320; stroke-dashoffset: 320; animation: pa-drawv 6s ease-in-out infinite; }
@keyframes pa-drawv { 0%, 8% { stroke-dashoffset: 320; } 70%, 92% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: 320; } }
@media (min-width: 861px) { .page-site .pt-grid.is-steps.is-three { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 860px) { .pt-hero-art { margin-top: 8px; } .pt-art-hero { max-width: 360px; } }
@media (prefers-reduced-motion: reduce) { .pa-drawv { animation: none; stroke-dashoffset: 0; } }
/* /downloads: one card per platform with its own button, numbered steps, app switch animation */
.dl-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-top: 40px; }
.dl-card { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; padding: 28px 24px 22px; border: 1px solid var(--stone-line); border-radius: 24px; background: #fff; }
.dl-logo { display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: 16px; background: var(--plum); color: #fff; }
.dl-logo-svg { width: 26px; height: 26px; fill: currentColor; }
.dl-card h3 { margin: 20px 0 0; font-size: 21px; font-weight: 650; letter-spacing: -0.02em; color: var(--ink); }
.dl-card p { margin: 6px 0 0; font-size: 15px; line-height: 1.5; color: var(--ink-2); }
.dl-btn { width: 100%; margin-top: 22px; justify-content: center; }
.dl-meta { margin-top: 10px; font-size: 12.5px; color: var(--mute); }
.dl-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin: 40px 0 0; padding: 0; list-style: none; }
.dl-steps li { padding: 28px; border: 1px solid var(--stone-line); border-radius: 24px; background: #fff; }
.dl-n { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; background: var(--violet); color: #fff; font-size: 16px; font-weight: 700; }
.dl-steps h3 { margin: 18px 0 0; font-size: 19px; font-weight: 650; letter-spacing: -0.015em; color: var(--ink); }
.dl-steps p { margin: 6px 0 0; font-size: 15px; line-height: 1.55; color: var(--ink-2); }
.pa-sw { opacity: 0; animation: pa-sw 4s infinite; }
.pa-sw.d1 { animation-delay: 2s; }
@keyframes pa-sw { 0%, 15% { opacity: 0; } 25%, 85% { opacity: 1; } 95%, 100% { opacity: 0; } }
.pa-knob2 { animation: pa-knob2 4s infinite; }
.pa-knob2.d1 { animation-delay: 2s; }
@keyframes pa-knob2 { 0%, 15% { transform: translateX(0); } 25%, 85% { transform: translateX(20px); } 95%, 100% { transform: translateX(0); } }
@media (max-width: 1000px) { .dl-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .dl-grid, .dl-steps { grid-template-columns: minmax(0, 1fr); gap: 12px; margin-top: 26px; } .dl-card { padding: 22px 20px 18px; } .dl-steps li { padding: 22px; } }
@media (prefers-reduced-motion: reduce) { .pa-sw { opacity: 1; animation: none; } .pa-knob2 { animation: none; transform: translateX(20px); } }
@media (max-width: 860px) { .pt-hero .lp-hero-media.pt-hero-art { padding-bottom: 8px; } .pt-art-hero { max-width: min(400px, 100%); } }
/* Downloads: platform logo sits beside the card title */
.dl-title { display: flex; align-items: center; gap: 14px; margin: 0 !important; }
.dl-title .dl-logo { flex: none; width: 46px; height: 46px; border-radius: 13px; }
.dl-title .dl-logo-svg { width: 22px; height: 22px; }
.dl-card .dl-title + p { margin-top: 14px; }
/* Site template hero: a real screen in a browser window with the phone version in front */
.pt-hwin { position: relative; display: block !important; padding: 0 0 40px 0 !important; }
.pt-hwin-browser { overflow: hidden; border: 1px solid rgba(255, 255, 255, .22); border-radius: 14px; background: #fff; }
.pt-hwin-browser img { display: block; width: 100%; height: auto; }
.lp-phone.pt-hwin-phone { position: absolute; right: -14px; bottom: 0; width: 34%; max-width: 200px; padding: 7px; border-radius: 30px; }
.pt-hwin-phone .pt-ph-screen { border-radius: 24px; padding-top: 30px; max-height: 330px; }
.pt-hwin-phone .pt-status { height: 30px; font-size: 10px; padding: 0 14px 0 18px; }
.pt-hwin-phone .pt-status svg { width: 34px; height: 9px; }
@media (max-width: 860px) { .pt-hwin { padding-bottom: 34px !important; } .lp-phone.pt-hwin-phone { right: -4px; width: 36%; } }
@media (max-width: 860px) {
	.pt-hero .pt-hwin { display: flex !important; justify-content: center; padding: 6px 0 30px !important; }
	.pt-hwin-browser { display: none; }
	.pt-hero .lp-phone.pt-hwin-phone { position: relative; right: auto; bottom: auto; width: min(270px, 74vw); max-width: none; margin: 0 auto; padding: 8px; border-radius: 38px; }
	.pt-hwin-phone .pt-ph-screen { max-height: none; border-radius: 30px; padding-top: 38px; }
	.pt-hwin-phone .pt-status { height: 38px; font-size: 12px; padding: 0 19px 0 25px; }
}
/* Affiliates hero on phones: phone at full content width, cropped by the bottom of the hero like the product pages */
@media (max-width: 860px) {
	.pt-hero .pt-hwin { display: block !important; height: min(128vw, 560px); overflow: hidden; padding: 4px 0 0 !important; }
	.pt-hero .lp-phone.pt-hwin-phone { width: 100%; max-width: 420px; margin: 0 auto; border-bottom: 0; border-radius: 42px 42px 0 0; padding: 9px 9px 0; }
	.pt-hwin-phone .pt-ph-screen { border-radius: 33px 33px 0 0; padding-top: 42px; }
	.pt-hwin-phone .pt-status { height: 42px; font-size: 13px; padding: 0 26px 0 32px; }
	.pt-hwin-phone .pt-status svg { width: 42px; height: 11px; }
}
@media (max-width: 860px) { .pt-hero .pt-hwin { height: min(86vw, 380px); } }
@media (max-width: 860px) { .pt-hero .lp-hero-media.has-call.pt-hwin { height: min(86vw, 380px); overflow: hidden; padding: 4px 0 0 !important; } }
.pt-money-card.is-word strong { font-size: clamp(36px, 3.4vw, 52px); line-height: 1.06; }
/* API landing pages */
.ap-code { position: relative; min-width: 0; overflow: hidden; border: 1px solid rgba(255, 255, 255, .16); border-radius: 20px; background: rgba(13, 6, 32, .72); text-align: left; }
.ap-code.is-solid { border-color: #2b1d47; background: #160b2c; }
.ap-hero-code { display: block !important; width: 100%; }
.ap-bar { display: flex; align-items: center; gap: 2px; min-height: 50px; padding: 0 12px 0 10px; border-bottom: 1px solid rgba(255, 255, 255, .09); }
.ap-tab { padding: 15px 11px 13px; border: 0; border-bottom: 2px solid transparent; background: none; color: rgba(255, 255, 255, .5); font: 600 13px/1 var(--sans); cursor: pointer; }
.ap-tab:hover { color: rgba(255, 255, 255, .85); }
.ap-tab.on { border-bottom-color: #a78bfa; color: #fff; cursor: default; }
.ap-meta { margin-left: auto; margin-right: 10px; color: rgba(255, 255, 255, .45); font: 12px/1 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; white-space: nowrap; }
.ap-copy { margin-left: auto; padding: 6px 11px; border: 1px solid rgba(255, 255, 255, .16); border-radius: 8px; background: transparent; color: rgba(255, 255, 255, .7); font: 600 12px/1.2 var(--sans); cursor: pointer; }
.ap-meta + .ap-copy { margin-left: 0; }
.ap-copy:hover { border-color: rgba(255, 255, 255, .36); color: #fff; }
.ap-copy.done { border-color: rgba(126, 231, 135, .45); color: #7ee787; }
.ap-copy.is-light { margin-left: 12px; border-color: var(--stone-line); color: var(--ink-2); }
.ap-copy.is-light:hover { border-color: var(--violet); color: var(--violet); }
.ap-copy.is-light.done { border-color: #16a34a; color: #16a34a; }
.ap-panes { display: grid; }
.ap-pane { grid-area: 1 / 1; min-width: 0; visibility: hidden; }
.ap-pane.on { visibility: visible; }
.ap-code pre { margin: 0; padding: 18px 22px 20px 0; overflow-x: auto; color: #e6edf3; font: 13px/1.75 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; white-space: pre; counter-reset: ln; scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, .2) transparent; }
.ap-code pre .l::before { counter-increment: ln; content: counter(ln); display: inline-block; width: 3.2em; padding-right: 1.2em; color: rgba(255, 255, 255, .22); text-align: right; user-select: none; }
.ap-code .tc { color: #8b949e; } .ap-code .tk { color: #79c0ff; } .ap-code .ts { color: #a5d6ff; } .ap-code .tn { color: #ffa657; } .ap-code .tw { color: #ff7b72; } .ap-code .tf { color: #d2a8ff; } .ap-code .tv { color: #ffa657; }
.ap-eps { overflow: hidden; margin-top: 40px; border: 1px solid var(--stone-line); border-radius: 24px; background: #fff; }
.ap-base { display: flex; align-items: center; gap: 14px; padding: 16px 22px; border-bottom: 1px solid var(--stone-line); background: #faf8ff; }
.ap-base > span { flex: none; color: var(--mute); font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; }
.ap-base code { min-width: 0; overflow: hidden; color: var(--ink); font: 14px ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; text-overflow: ellipsis; white-space: nowrap; }
.ap-ep { display: grid; grid-template-columns: 72px minmax(0, 300px) minmax(0, 1fr); gap: 18px; align-items: center; padding: 18px 22px; border-top: 1px solid var(--stone-line); }
.ap-base + .ap-ep { border-top: 0; }
.ap-m { justify-self: start; padding: 4px 9px; border-radius: 7px; font: 700 11.5px/1.2 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; letter-spacing: .04em; }
.ap-m.is-get { background: #dcfce7; color: #15803d; } .ap-m.is-post { background: #ede9fe; color: #6d28d9; } .ap-m.is-delete { background: #fee2e2; color: #b91c1c; } .ap-m.is-put, .ap-m.is-patch { background: #fef3c7; color: #b45309; }
.ap-path { min-width: 0; overflow-wrap: anywhere; color: var(--ink); font: 600 14.5px ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.ap-ep p { margin: 0; color: var(--ink-2); font-size: 15px; line-height: 1.5; }
.ap-split { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 56px; align-items: start; }
.ap-split h2 { margin: 0; font-family: var(--display); font-stretch: 116%; font-size: clamp(28px, 2.8vw, 40px); font-weight: 520; letter-spacing: -0.03em; line-height: 1.08; color: var(--ink); }
.ap-split .eyebrow { margin: 0 0 12px; color: var(--violet); }
.ap-resp .sec-sub { margin: 12px 0 22px; }
.ap-checks { display: grid; gap: 14px; margin: 26px 0 0; padding: 0; list-style: none; }
.ap-checks li { position: relative; padding: 18px 20px 18px 54px; border: 1px solid var(--stone-line); border-radius: 18px; background: #fff; }
.ap-checks li::before { content: ""; position: absolute; left: 20px; top: 20px; width: 20px; height: 20px; border-radius: 50%; background: var(--violet); }
.ap-checks li::after { content: ""; position: absolute; left: 27px; top: 24px; width: 5px; height: 9px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.ap-checks strong { display: block; color: var(--ink); font-size: 16px; font-weight: 650; }
.ap-checks span { display: block; margin-top: 4px; color: var(--ink-2); font-size: 15px; line-height: 1.5; }
.ap-feats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 40px; }
.ap-feat { padding: 28px; border: 1px solid var(--stone-line); border-radius: 24px; background: #fff; }
.ap-feat-ic { display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px; border-radius: 14px; background: var(--violet-soft); color: var(--violet); }
.ap-feat-ic .lp-ico { width: 22px; height: 22px; color: inherit; }
.ap-feat h3 { margin: 18px 0 0; color: var(--ink); font-size: 18px; font-weight: 650; letter-spacing: -0.015em; }
.ap-feat p { margin: 8px 0 0; color: var(--ink-2); font-size: 15px; line-height: 1.55; }
.ap-more-in { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: 40px; align-items: center; }
.ap-more-in h2 { margin: 0; font-family: var(--display); font-stretch: 116%; font-size: clamp(26px, 2.4vw, 34px); font-weight: 520; letter-spacing: -0.03em; color: var(--ink); }
.ap-more-in .sec-sub { margin-top: 10px; }
.ap-more-in .sec-sub a { color: var(--violet); font-weight: 600; }
.ap-more-list { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; padding: 0; list-style: none; }
.ap-more-list a { display: inline-flex; align-items: center; gap: 9px; padding: 10px 16px 10px 10px; border: 1px solid var(--stone-line); border-radius: 999px; background: #fff; color: var(--ink); font-size: 14.5px; font-weight: 600; text-decoration: none; transition: border-color .2s var(--ease); }
.ap-more-list a:hover { border-color: rgba(96, 17, 238, .4); }
.ap-more-ic { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; background: var(--violet-soft); color: var(--violet); }
.ap-more-ic .lp-ico { width: 15px; height: 15px; color: inherit; }
.page-apilp .sec-head .eyebrow { color: var(--violet); }
@media (max-width: 1100px) { .ap-ep { grid-template-columns: 64px minmax(0, 1fr); } .ap-ep p { grid-column: 2; } .ap-split, .ap-more-in { grid-template-columns: minmax(0, 1fr); gap: 32px; } .ap-feats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 860px) { .ap-hero .lp-hero-media.has-call.ap-hero-code { height: auto; padding-bottom: 30px; overflow: visible; } .ap-code pre { font-size: 12px; padding: 14px 16px 16px 0; } .ap-code pre .l::before { width: 2.6em; padding-right: 1em; } }
@media (max-width: 640px) { .ap-ep { grid-template-columns: minmax(0, 1fr); gap: 8px; padding: 16px 18px; } .ap-ep p { grid-column: 1; } .ap-base { flex-wrap: wrap; gap: 8px; padding: 14px 18px; } .ap-base code { flex: 1 1 100%; white-space: normal; overflow-wrap: anywhere; } .ap-copy.is-light { margin-left: 0; } .ap-feats { grid-template-columns: minmax(0, 1fr); gap: 12px; } .ap-feat { padding: 22px; } .ap-tab { padding: 15px 8px 13px; } .ap-meta { display: none; } }
.ap-code pre code { display: block; }
.ap-hero .ap-code { background: rgba(14, 6, 34, .9); }
/* Icons and step numbers sit beside their titles */
.ap-feat-t, .dl-t { display: flex; align-items: center; gap: 12px; margin-top: 0 !important; }
.ap-feat-t .ap-feat-ic { flex: none; width: 40px; height: 40px; border-radius: 12px; }
.ap-feat-t .ap-feat-ic .lp-ico { width: 20px; height: 20px; }
.ap-feat-t + p { margin-top: 12px; }
.dl-t .dl-n { flex: none; width: 34px; height: 34px; font-size: 15px; }
.dl-t + p { margin-top: 10px; }

/* ---------- contact page ---------- */
.cx-facts { list-style: none; display: flex; flex-wrap: wrap; gap: 10px; margin: 30px 0 0; padding: 0; }
.cx-facts li { display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 15px; border: 1px solid rgba(96, 17, 238, .14); border-radius: 999px; background: #fff; color: var(--ink); font-size: 14px; font-weight: 550; }
.cx-facts .lp-ico { width: 17px; height: 17px; color: var(--violet); }
.cx-facts li:last-child { padding: 0; border: 0; background: none; }
.cx-live { display: inline-flex; align-items: center; gap: 9px; height: 38px; padding: 0 15px; border: 1px solid rgba(96, 17, 238, .14); border-radius: 999px; background: #fff; color: var(--ink); font-size: 14px; font-weight: 550; text-decoration: none; transition: border-color .15s; }
.cx-live:hover { border-color: rgba(96, 17, 238, .4); }
.cx-live i { position: relative; width: 8px; height: 8px; border-radius: 50%; background: var(--line-2); }
.cx-live.is-ok i { background: #12b76a; }
.cx-live.is-ok i::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; background: rgba(18, 183, 106, .28); animation: cxPulse 2.4s var(--ease) infinite; }
.cx-live.is-bad i { background: #f79009; }
@keyframes cxPulse { 0% { transform: scale(.6); opacity: 1; } 100% { transform: scale(1.6); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .cx-live.is-ok i::after { animation: none; opacity: 0; } }

.cx-sec { padding: 72px 0 104px; }
.cx-sec .lp-ico { color: inherit; }
.cx-grid { display: grid; grid-template-columns: minmax(0, 1fr) 372px; gap: 36px; align-items: start; }
.cx-card { min-width: 0; padding: 40px; border: 1px solid var(--stone-line); border-radius: 28px; background: #fff; }
.cx-form { display: grid; gap: 22px; }
.cx-form[hidden], .cx-done[hidden] { display: none; }
.cx-head h2 { margin: 0; font-family: var(--display); font-size: clamp(28px, 2.6vw, 34px); font-weight: 650; letter-spacing: -0.03em; line-height: 1.1; }
.cx-head p { margin: 10px 0 0; color: var(--ink-2); font-size: 16px; }
.cx-alert { margin: 0; padding: 14px 16px; border: 1px solid #fecdca; border-radius: 12px; background: #fef3f2; color: #b42318; font-size: 14.5px; font-weight: 500; }

.cx-topics { min-width: 0; margin: 4px 0 0; padding: 0; border: 0; }
.cx-topics legend { margin: 0 0 12px; padding: 0; font-size: 14px; font-weight: 600; }
.cx-topic-grid { display: flex; flex-wrap: wrap; gap: 6px; }
.cx-topic { position: relative; display: inline-flex; align-items: center; gap: 7px; height: 44px; padding: 0 15px 0 12px; border: 1px solid var(--line-2); border-radius: 999px; background: #fff; color: var(--ink); font-size: 14.5px; font-weight: 550; white-space: nowrap; cursor: pointer; transition: border-color .15s, background .15s, color .15s; }
.cx-topic input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; border-radius: 999px; opacity: 0; cursor: pointer; }
.cx-topic .lp-ico { flex: none; width: 17px; height: 17px; color: var(--violet); transition: color .15s; }
.cx-topic:hover { border-color: var(--ink-2); }
.cx-topic.is-on, .cx-topic:has(input:checked) { border-color: var(--violet); background: var(--violet); color: #fff; }
.cx-topic.is-on .lp-ico, .cx-topic:has(input:checked) .lp-ico { color: #fff; }
.cx-topic:has(input:focus-visible) { outline: 2px solid var(--violet); outline-offset: 2px; }
.cx-topics.is-bad .cx-topic:not(.is-on) { border-color: #fda29b; }

.cx-tip { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; margin-top: -6px; padding: 16px 18px; border: 1px solid var(--stone-line); border-radius: 16px; background: var(--stone); }
.cx-tip[hidden] { display: none; }
.cx-tip p { flex: 1 1 280px; margin: 0; color: var(--ink-2); font-size: 14.5px; line-height: 1.5; }
.cx-tip-link { display: inline-flex; align-items: center; gap: 6px; color: var(--violet); font-size: 14.5px; font-weight: 600; text-decoration: none; white-space: nowrap; }
.cx-tip-link:hover { color: var(--violet-ink); }
.cx-tip-link .lp-ico { width: 16px; height: 16px; }

.cx-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.cx-field { display: grid; gap: 8px; min-width: 0; }
.cx-field[hidden] { display: none; }
.cx-field label { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; font-size: 14px; font-weight: 600; }
.cx-field label span { color: var(--mute); font-size: 12.5px; font-weight: 500; }
.cx-field input, .cx-field textarea, .cx-select select { width: 100%; padding: 13px 15px; border: 1px solid var(--line-2); border-radius: 12px; background: #fff; color: var(--ink); font: inherit; font-size: 16px; -webkit-appearance: none; appearance: none; transition: border-color .15s; }
.cx-field textarea { min-height: 156px; line-height: 1.55; resize: vertical; }
.cx-field input::placeholder, .cx-field textarea::placeholder { color: #9d9da8; }
.cx-field input:hover, .cx-field textarea:hover, .cx-select select:hover { border-color: #a5a5a0; }
.cx-field input:focus, .cx-field textarea:focus, .cx-select select:focus { border-color: var(--violet); outline: 3px solid rgba(96, 17, 238, .14); outline-offset: 0; }
.cx-field [aria-invalid="true"] { border-color: #f04438; }
.cx-select { position: relative; }
.cx-select::after { content: ""; position: absolute; top: 50%; right: 17px; width: 8px; height: 8px; border-right: 1.6px solid var(--ink-2); border-bottom: 1.6px solid var(--ink-2); transform: translateY(-70%) rotate(45deg); pointer-events: none; }
.cx-select select { padding-right: 42px; cursor: pointer; }
.cx-err { margin: 0; color: #b42318; font-size: 13.5px; font-weight: 500; }
.cx-err[hidden] { display: none; }
.cx-under { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.cx-count { margin-left: auto; color: var(--mute); font-size: 12.5px; font-variant-numeric: tabular-nums; }
.cx-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.cx-submit { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 20px; padding-top: 4px; }
.cx-submit p { margin: 0; color: var(--mute); font-size: 13.5px; }
.cx-submit p a { color: var(--ink-2); }
.cx-submit .btn.is-busy { opacity: .72; pointer-events: none; }

.cx-done:focus { outline: none; }
.cx-done-ic { display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: 18px; background: #e7f8ef; color: var(--green); }
.cx-done-ic .lp-ico { width: 28px; height: 28px; stroke-width: 2.2; }
.cx-done-h { margin: 22px 0 0 !important; color: var(--ink) !important; font-family: var(--display); font-size: clamp(28px, 2.6vw, 34px); font-weight: 650; letter-spacing: -0.03em; line-height: 1.1; }
.cx-done p { max-width: 52ch; margin: 10px 0 0; color: var(--ink-2); }
.cx-done .cx-done-sub { margin-top: 34px; color: var(--mute); font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; }
.cx-done-links { list-style: none; margin: 12px 0 0; padding: 0; border-top: 1px solid var(--line); }
.cx-done-links a { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 2px; border-bottom: 1px solid var(--line); color: var(--ink); font-weight: 600; text-decoration: none; }
.cx-done-links a:hover { color: var(--violet); }
.cx-done-links .lp-ico { width: 18px; height: 18px; }

.cx-side { position: sticky; top: 96px; display: grid; gap: 10px; min-width: 0; }
.cx-side > h2 { margin: 6px 0 8px; color: var(--mute); font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; }
.cx-ch { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; align-items: center; gap: 14px; padding: 16px 18px; border: 1px solid var(--line); border-radius: 18px; background: #fff; color: var(--ink); text-decoration: none; transition: border-color .15s, background .15s; }
a.cx-ch:hover { border-color: rgba(96, 17, 238, .35); background: #fcfaff; }
.cx-ch-ic { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 12px; background: var(--violet-soft); color: var(--violet); }
.cx-ch-ic .lp-ico { width: 20px; height: 20px; }
.cx-ch h3 { margin: 0; font-size: 15px; font-weight: 600; letter-spacing: -0.01em; line-height: 1.3; }
.cx-ch p { margin: 3px 0 0; color: var(--ink-2); font-size: 13.5px; line-height: 1.45; }
.cx-ch-mail { border-color: var(--stone-line); background: var(--stone); }
.cx-ch-mail p a { color: var(--violet); font-size: 14.5px; font-weight: 600; text-decoration: none; white-space: nowrap; }
.cx-ch-mail .ap-copy.is-light { margin-left: 0; background: #fff; }
.cx-ch-go { display: inline-flex; color: var(--mute); transition: color .15s; }
.cx-ch-go .lp-ico { width: 18px; height: 18px; }
a.cx-ch:hover .cx-ch-go { color: var(--violet); }

@media (max-width: 1020px) {
	.cx-grid { grid-template-columns: minmax(0, 1fr); }
	.cx-side { position: static; grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.cx-side > h2 { grid-column: 1 / -1; }
}
@media (max-width: 720px) {
	.cx-sec { padding: 40px 0 72px; }
	.cx-card { padding: 26px 20px 24px; border-radius: 22px; }
	.cx-topic { height: 42px; padding: 0 16px 0 13px; gap: 8px; font-size: 14.5px; }
	.cx-topic .lp-ico { width: 17px; height: 17px; }
	.cx-row { grid-template-columns: minmax(0, 1fr); }
	.cx-side { grid-template-columns: minmax(0, 1fr); }
	.cx-submit .btn { width: 100%; }
	.cx-facts li, .cx-live { height: 34px; font-size: 13px; }
}

/* ---------- system status ---------- */
.ss-sec { padding: 64px 0 104px; }
.ss-sec .lp-ico, .ss-help .lp-ico { color: inherit; }
.ss-overall { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 22px; padding: 28px 32px; border: 1px solid #b7e6cd; border-radius: 26px; background: #effaf4; }
.ss-overall.is-down { border-color: #fedf89; background: #fffaeb; }
.ss-big { display: inline-flex; align-items: center; justify-content: center; width: 58px; height: 58px; border-radius: 50%; background: #12b76a; color: #fff; }
.ss-overall.is-down .ss-big { background: #f79009; }
.ss-big .lp-ico { width: 30px; height: 30px; stroke-width: 2.4; }
.ss-title { margin: 0; font-family: var(--display); font-size: clamp(22px, 2.3vw, 30px); font-weight: 650; letter-spacing: -0.03em; line-height: 1.15; }
.ss-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin: 6px 0 0; color: var(--ink-2); font-size: 14.5px; }
.ss-dot { width: 3px; height: 3px; border-radius: 50%; background: var(--mute); }
.ss-refresh { background: #fff; }
.ss-refresh .lp-ico { width: 17px; height: 17px; }
.ss-refresh.is-busy .lp-ico { animation: ssSpin .8s linear infinite; }
@keyframes ssSpin { to { transform: rotate(360deg); } }
.ss-head { margin-top: 80px; }
.ss-groups { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; align-items: start; margin-top: 32px; }
.ss-group { min-width: 0; padding: 6px 26px 8px; border: 1px solid var(--line); border-radius: 24px; background: #fff; }
.ss-group-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 18px 0 14px; border-bottom: 1px solid var(--line); }
.ss-group-head h3 { margin: 0; font-size: 17px; font-weight: 650; letter-spacing: -0.015em; }
.ss-group-head span { color: var(--mute); font-size: 13px; }
.ss-list { list-style: none; margin: 0; padding: 0; }
.ss-row { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 16px; min-height: 54px; border-bottom: 1px solid var(--line); }
.ss-row:last-child { border-bottom: 0; }
.ss-name { min-width: 0; font-size: 15px; font-weight: 550; }
.ss-ms { color: var(--mute); font-family: var(--mono); font-size: 12.5px; font-variant-numeric: tabular-nums; }
.ss-pill { display: inline-flex; align-items: center; gap: 7px; height: 28px; padding: 0 11px; border-radius: 999px; background: #ecfdf3; color: #067647; font-size: 12.5px; font-weight: 600; white-space: nowrap; }
.ss-pill i { width: 7px; height: 7px; border-radius: 50%; background: #12b76a; }
.ss-pill.is-part { background: #fffaeb; color: #b54708; }
.ss-pill.is-part i { background: #f79009; }
.ss-pill.is-down { background: #fef3f2; color: #b42318; }
.ss-pill.is-down i { background: #f04438; }
.ss-help-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 32px; }
@media (max-width: 900px) {
	.ss-groups, .ss-help-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 720px) {
	.ss-sec { padding: 40px 0 72px; }
	.ss-overall { grid-template-columns: auto minmax(0, 1fr); gap: 16px; padding: 22px 20px; border-radius: 22px; }
	.ss-big { width: 48px; height: 48px; }
	.ss-big .lp-ico { width: 25px; height: 25px; }
	.ss-refresh { grid-column: 1 / -1; width: 100%; }
	.ss-dot { display: none; }
	.ss-meta { flex-direction: column; align-items: flex-start; gap: 2px; }
	.ss-head { margin-top: 56px; }
	.ss-group { padding: 4px 18px 6px; border-radius: 20px; }
	.ss-row { gap: 10px; }
	.ss-name { font-size: 14.5px; }
}

/* ---------- website chat (same look and motion as the panel's support chat) ---------- */
.vc { font-family: var(--sans); }
.vc[hidden] { display: none; }
.vc-bubble { position: fixed; right: max(22px, env(safe-area-inset-right, 0px)); bottom: max(22px, env(safe-area-inset-bottom, 0px)); z-index: 9990; display: flex; align-items: center; justify-content: center; width: 56px; height: 56px; padding: 0; border: 1px solid #ddd6fe; border-radius: 50%; background: #f5f3ff; color: var(--violet); cursor: pointer; transform: translateZ(0); transition: transform .15s, background .15s; animation: vcPop .5s cubic-bezier(.16, 1, .3, 1) both; }
.vc-bubble:hover, .vc-bubble:focus-visible { transform: scale(1.06); background: #ede9fe; }
.vc-bubble svg { width: 25px; height: 25px; }
.vc-badge { position: absolute; top: -4px; right: -4px; display: flex; align-items: center; justify-content: center; min-width: 19px; height: 19px; padding: 0 5px; border: 2px solid #fff; border-radius: 10px; background: #ef4444; color: #fff; font-size: 10.5px; font-weight: 700; animation: vcPop .35s cubic-bezier(.16, 1, .3, 1) both; }
.vc-badge[hidden] { display: none; }
.vc-callout { position: fixed; right: calc(max(22px, env(safe-area-inset-right, 0px)) + 70px); bottom: calc(max(22px, env(safe-area-inset-bottom, 0px)) + 28px); z-index: 9989; display: flex; align-items: center; gap: 8px; max-width: 230px; padding: 11px 14px; border: 1px solid #e2e8f0; border-radius: 14px; background: #fff; color: #0f172a; font-size: 13.5px; font-weight: 550; line-height: 1.35; cursor: pointer; transform: translateY(50%); animation: vcCalloutIn .45s cubic-bezier(.16, 1, .3, 1) both; }
.vc-callout[hidden] { display: none; }
.vc-callout::after { content: ""; position: absolute; top: 50%; right: -6px; width: 12px; height: 12px; border-top: 1px solid #e2e8f0; border-right: 1px solid #e2e8f0; background: #fff; transform: translateY(-50%) rotate(45deg); }
.vc-callout-x { flex: none; padding: 0 2px; color: #94a3b8; font-size: 17px; line-height: 1; }
.vc-callout-x:hover { color: #475569; }
@keyframes vcCalloutIn { from { opacity: 0; transform: translateY(calc(50% + 10px)); } to { opacity: 1; transform: translateY(50%); } }
@keyframes vcPop { from { opacity: 0; transform: scale(.6); } to { opacity: 1; transform: scale(1); } }
.vc-window { position: fixed; top: 0; right: 0; bottom: 0; z-index: 9991; display: flex; flex-direction: column; width: 400px; max-width: 100vw; height: 100vh; height: 100dvh; overflow: hidden; border-left: 1px solid #e2e8f0; background: #fff; opacity: 0; visibility: hidden; transform: translateX(100%); transition: opacity .2s ease, transform .28s cubic-bezier(.2, .8, .2, 1), visibility 0s linear .28s; pointer-events: none; }
.vc-window.open { opacity: 1; visibility: visible; transform: translateX(0); transition: opacity .2s ease, transform .28s cubic-bezier(.2, .8, .2, 1), visibility 0s; pointer-events: auto; }
.vc.is-open .vc-bubble, .vc.is-open .vc-callout { display: none; }
.vc-header { display: flex; flex: none; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 18px; padding-top: max(16px, env(safe-area-inset-top, 0px)); background: var(--violet); color: #fff; }
.vc-header h3 { margin: 0; font-size: 15.5px; font-weight: 650; letter-spacing: -0.01em; }
.vc-header-sub { display: flex; align-items: center; gap: 6px; margin-top: 3px; font-size: 12px; opacity: .88; }
.vc-header-sub::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #5ee9a8; }
.vc-header-actions { display: flex; align-items: center; gap: 8px; }
.vc-status-cancel { margin-left: 6px; padding: 0; border: 0; background: none; color: inherit; font: inherit; font-weight: 700; text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
.vc-status-cancel:hover { opacity: .75; }
.vc-confirm { display: flex; flex-wrap: wrap; align-items: center; align-self: stretch; gap: 10px; margin: 8px 0; padding: 12px 14px; border: 1px solid #fecaca; border-radius: 12px; background: #fef2f2; animation: vcMsgIn .25s ease both; }
.vc-confirm-text { flex: 1; min-width: 140px; color: #991b1b; font-size: 13px; font-weight: 550; }
.vc-confirm-yes, .vc-confirm-no { padding: 7px 14px; border: 1px solid; border-radius: 8px; font: 600 12px var(--sans); cursor: pointer; }
.vc-confirm-yes { border-color: #dc2626; background: #dc2626; color: #fff; }
.vc-confirm-yes:hover { border-color: #b91c1c; background: #b91c1c; }
.vc-confirm-no { border-color: #cbd5e1; background: #fff; color: #475569; }
.vc-confirm-no:hover { border-color: #94a3b8; color: #1e293b; }
.vc-close { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; padding: 0; border: 0; border-radius: 8px; background: rgba(255, 255, 255, .14); color: #fff; cursor: pointer; }
.vc-close:hover { background: rgba(255, 255, 255, .24); }
.vc-close svg { width: 18px; height: 18px; }
.vc-toolbar { display: flex; flex: none; flex-wrap: wrap; gap: 6px; padding: 8px 12px; border-bottom: 1px solid #e2e8f0; background: #f8fafc; }
.vc-toolbar[hidden] { display: none; }
.vc-tool { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 11px; border: 1px solid #e2e8f0; border-radius: 6px; background: #fff; color: #475569; font: 600 12px var(--sans); text-decoration: none; cursor: pointer; transition: border-color .15s, color .15s; }
.vc-tool:hover { border-color: var(--violet); color: var(--violet); }
.vc-tool[hidden] { display: none; }
.vc-tool svg { width: 14px; height: 14px; }
.vc-status { flex: none; padding: 7px 14px; border-bottom: 1px solid #fde68a; background: #fef3c7; color: #92400e; font-size: 12px; line-height: 1.4; }
.vc-status[hidden] { display: none; }
.vc-status.live { border-color: #86efac; background: #dcfce7; color: #166534; }
.vc-status i { display: inline-block; width: 11px; height: 11px; margin-right: 7px; vertical-align: -1px; border: 2px solid #f6c76b; border-top-color: #92400e; border-radius: 50%; animation: vcSpin .8s linear infinite; }
.vc-status.live i { border: 0; border-radius: 50%; background: #22c55e; animation: none; width: 8px; height: 8px; vertical-align: 0; }
@keyframes vcSpin { to { transform: rotate(360deg); } }
.vc-body { flex: 1; display: flex; flex-direction: column; min-height: 0; padding: 14px; overflow-y: auto; overscroll-behavior: contain; background: #f8fafc; }
.vc-msg { display: flex; flex-direction: column; align-items: flex-start; max-width: 88%; margin-bottom: 10px; animation: vcMsgIn .32s cubic-bezier(.16, 1, .3, 1) both; }
.vc-msg.user { align-self: flex-end; align-items: flex-end; }
.vc-msg-bubble { padding: 9px 13px; border-radius: 14px; font-size: 13.5px; line-height: 1.5; overflow-wrap: anywhere; }
.vc-msg-bubble p { margin: 0; }
.vc-msg-bubble p + p { margin-top: 6px; }
.vc-msg-bubble a { color: var(--violet); font-weight: 600; text-decoration: none; }
.vc-msg-bubble a:hover { text-decoration: underline; }
.vc-msg.user .vc-msg-bubble { border-bottom-right-radius: 4px; background: var(--violet); color: #fff; }
.vc-msg.user .vc-msg-bubble a { color: #fff; text-decoration: underline; }
.vc-msg.ai .vc-msg-bubble { border: 1px solid #e2e8f0; border-bottom-left-radius: 4px; background: #fff; color: #0f172a; }
.vc-msg.agent .vc-msg-bubble { border: 1px solid #a7f3d0; border-bottom-left-radius: 4px; background: #ecfdf5; color: #064e3b; }
.vc-msg.agent .vc-msg-bubble a { color: #047857; }
.vc-msg.system .vc-msg-bubble { border: 1px solid #e2e8f0; border-bottom-left-radius: 4px; background: #f1f5f9; color: #64748b; font-size: 12.5px; }
.vc-msg.failed .vc-msg-bubble { opacity: .55; }
.vc-msg-meta { margin-top: 3px; padding: 0 4px; color: #94a3b8; font-size: 10.5px; }
@keyframes vcMsgIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.vc-typing { align-self: flex-start; margin-bottom: 10px; padding: 9px 13px; border: 1px solid #e2e8f0; border-radius: 14px; border-bottom-left-radius: 4px; background: #fff; animation: vcMsgIn .25s ease both; }
.vc-typing span { display: inline-block; width: 6px; height: 6px; margin: 0 1px; border-radius: 50%; background: #94a3b8; animation: vcDot 1.2s infinite; }
.vc-typing span:nth-child(2) { animation-delay: .2s; }
.vc-typing span:nth-child(3) { animation-delay: .4s; }
@keyframes vcDot { 0%, 60%, 100% { opacity: .4; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-4px); } }
.vc-actions { display: flex; flex-wrap: wrap; align-self: flex-start; gap: 6px; margin: -2px 0 10px; animation: vcMsgIn .32s cubic-bezier(.16, 1, .3, 1) .1s both; }
.vc-action { display: inline-flex; align-items: center; gap: 6px; padding: 7px 13px; border: 1px solid var(--violet); border-radius: 14px; background: #fff; color: var(--violet); font: 600 12px var(--sans); cursor: pointer; }
.vc-action:hover { background: #f5f3ff; }
.vc-contact { display: grid; align-self: stretch; gap: 8px; margin-bottom: 10px; padding: 14px; border: 1px solid #e0d5ff; border-radius: 12px; background: #fff; animation: vcMsgIn .32s cubic-bezier(.16, 1, .3, 1) both; }
.vc-contact p { margin: 0; color: #475569; font-size: 13px; line-height: 1.45; }
.vc-contact input { width: 100%; height: 40px; padding: 0 12px; border: 1px solid #cbd5e1; border-radius: 8px; background: #fff; color: #0f172a; font: 14.5px var(--sans); }
.vc-contact input:focus, .vc-footer textarea:focus { border-color: var(--violet); outline: 3px solid rgba(96, 17, 238, .1); outline-offset: 0; }
.vc-contact button { height: 40px; border: 0; border-radius: 8px; background: var(--violet); color: #fff; font: 600 13.5px var(--sans); cursor: pointer; }
.vc-contact button:hover { background: #4f0fbf; }
.vc-contact button:disabled { opacity: .6; cursor: default; }
.vc-contact .vc-err { color: #b42318; font-size: 12.5px; }
.vc-contact .vc-err[hidden] { display: none; }
.vc-footer { display: flex; flex: none; align-items: flex-end; gap: 8px; padding: 10px 12px; padding-bottom: max(10px, env(safe-area-inset-bottom, 0px)); border-top: 1px solid #e2e8f0; background: #fff; }
.vc-footer textarea { flex: 1; min-width: 0; height: 40px; max-height: 110px; padding: 9px 12px; border: 1px solid #cbd5e1; border-radius: 8px; background: #fff; color: #0f172a; font: 14px/1.45 var(--sans); resize: none; }
.vc-send { display: inline-flex; flex: none; align-items: center; justify-content: center; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 8px; background: var(--violet); color: #fff; cursor: pointer; }
.vc-send:hover { background: #4f0fbf; }
.vc-send:disabled { opacity: .5; cursor: not-allowed; }
.vc-send svg { width: 18px; height: 18px; }
.vc-note { flex: none; margin: 0; padding: 0 12px 8px; background: #fff; color: #94a3b8; font-size: 10.5px; text-align: center; }
.vc-note a { color: inherit; }
@media (max-width: 768px) { .vc-callout { display: none; } }
@media (max-width: 600px) {
	html.vc-lock body { overflow: hidden; }
	.vc-bubble { right: max(16px, env(safe-area-inset-right, 0px)); bottom: max(16px, env(safe-area-inset-bottom, 0px)); }
	.vc-window { left: 0; width: 100vw; border: 0; transform: translateY(16px); }
	.vc-window.open { transform: translateY(0); }
	.vc-footer textarea { font-size: 16px; }
}
@media (prefers-reduced-motion: reduce) { .vc-bubble, .vc-badge, .vc-callout, .vc-msg, .vc-typing, .vc-actions, .vc-contact { animation: none; } .vc-window, .vc-window.open { transition: none; } }
@media print { .vc { display: none; } }

/* taps fire at once on touch screens (no wait for a double-tap zoom) */
a, button, [role="button"], label, summary, input, select, textarea { touch-action: manipulation; }
/* mobile menu open: the page behind stays put, only the menu scrolls */
html.nav-lock body { overflow: hidden; }
.sheet { overscroll-behavior: contain; }
/* mobile: the account menu spans the screen and slides up from its button */
@media (max-width: 860px) {
	.acct-menu { left: 12px !important; right: 12px; width: auto; padding: 10px; border-radius: 18px; transform: translateY(14px) scale(.98); transform-origin: 50% 100%; transition: opacity .22s var(--ease), transform .28s var(--ease), visibility 0s linear .28s; }
	.acct-menu.open { transform: none; transition: opacity .22s var(--ease), transform .28s var(--ease), visibility 0s; }
	.acct-menu .acct-link { min-height: 48px; font-size: 16px; }
}
/* site-page product cards: icon beside the name, price with the link at the bottom */
.ct-card.is-row .ct-title { display: flex; align-items: center; gap: 12px; margin: 0; }
.ct-card.is-row .ct-title .ct-ic { flex: none; width: 40px; height: 40px; border-radius: 12px; }
.ct-card.is-row p { margin-top: 12px; }
.ct-card.is-row .ct-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: auto; padding-top: 18px; }
.ct-card.is-row .ct-foot .ct-go { margin: 0; padding: 0; }
@media (max-width: 720px) {
	.ct-card.is-row { display: flex; flex-direction: column; padding: 16px; }
	.ct-card.is-row .ct-title .ct-ic { width: 36px; height: 36px; }
	.ct-card.is-row p { margin-top: 10px; }
	.ct-card.is-row .ct-foot { padding-top: 12px; }
	.ct-card.is-row .ct-price { margin: 0; }
}