/* Ombra components. Load after tokens.css. Every colour is a token. */

/* ── Base ── */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); position: relative; color: var(--text-2); font: 400 16px/1.55 var(--font); letter-spacing: -.01em; -webkit-font-smoothing: antialiased; overflow-x: clip; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
h1, h2, h3, h4, p, ul, ol, figure, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }
h1, h2, h3, h4 { text-wrap: balance; font-weight: 500; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 6px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.sr-only:focus { position: fixed; z-index: 100; top: 12px; left: 12px; width: auto; height: auto; clip: auto; padding: 10px 16px; background: var(--surface-2); border-radius: var(--r-pill); color: var(--text); }
.wrap { width: 100%; max-width: calc(var(--container) + var(--gutter) * 2); margin: 0 auto; padding: 0 var(--gutter); }
.ic { width: 18px; height: 18px; flex: none; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ic--sm { width: 16px; height: 16px; }

/* ── Buttons: light pill (primary), glass pill (secondary), round icon button ── */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 48px; padding: 0 24px; border-radius: var(--r-pill); font: 500 15px/1 var(--font); letter-spacing: -.01em; white-space: nowrap; transition: background-color .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease); }
.btn--light { background: var(--tint); color: var(--on-light); }
.btn--light:hover { background: var(--text); }
.btn--glass { background: rgba(255,255,255,.08); color: var(--text); box-shadow: inset 0 0 0 1px var(--line); }
.btn--glass:hover { background: rgba(255,255,255,.14); }
.btn--sm { height: 38px; padding: 0 16px; font-size: 14px; }
.btn-round { display: inline-grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: rgba(255,255,255,.08); color: var(--text); box-shadow: inset 0 0 0 1px var(--line); transition: background-color .25s var(--ease); }
.btn-round:hover { background: rgba(255,255,255,.16); }
.btn-round--sm { width: 40px; height: 40px; }
.link-arrow { display: inline-flex; align-items: center; gap: 8px; font: 500 14px/1 var(--font); color: var(--text); transition: color .25s var(--ease); }
.link-arrow:hover { color: var(--accent-ink); }

/* ── Chip: dot + label in a hairline pill (every section head) ── */
/* Horizon label (every section head): a short line in the sky's colours, then the label — no pill */
.chip { display: inline-flex; align-items: center; gap: 12px; min-height: 24px; font: 500 13px/1.2 var(--font); letter-spacing: .01em; color: var(--text-2); }
.chip::before { content: ""; width: 24px; height: 1px; flex: none; background: linear-gradient(90deg, rgba(238,244,246,0), var(--accent-ink) 55%, var(--tint)); }
.chip--plain::before { display: none; }
/* Pill chip: only for announcements and links ("New: …") */
.chip--pill { gap: 8px; height: 30px; padding: 0 12px; border-radius: var(--r-pill); background: rgba(255,255,255,.04); box-shadow: inset 0 0 0 1px var(--line); }
.chip--pill::before { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
.tag { display: inline-flex; align-items: center; height: 26px; padding: 0 10px; border-radius: var(--r-pill); background: rgba(255,255,255,.06); box-shadow: inset 0 0 0 1px var(--line); font: 500 13px/1 var(--font); color: var(--text-2); }

/* ── Header (header-a: bar, links centred, glass pill CTA; transparent over the hero) ── */
.site-head { position: fixed; inset: 0 0 auto; z-index: 50; transition: background-color .3s var(--ease), box-shadow .3s var(--ease); }
.site-head.is-scrolled { background: rgba(0,0,0,.72); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); box-shadow: 0 1px 0 var(--line); }
.site-head__in { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; height: 72px; }
.logo { display: inline-flex; align-items: center; gap: 10px; font: 600 17px/1 var(--font-display); letter-spacing: -.03em; color: var(--text); justify-self: start; }
.logo .mark { width: 28px; height: 28px; }
.nav { display: flex; gap: 4px; }
.nav a { position: relative; padding: 9px 14px; border-radius: var(--r-pill); font: 500 14px/1 var(--font); color: var(--text-2); transition: color .25s var(--ease), background-color .25s var(--ease); }
.nav a:hover, .nav a[aria-current="page"] { color: var(--text); background: rgba(255,255,255,.07); }
.site-head__cta { justify-self: end; }
.menu-btn { display: none; justify-self: end; width: 44px; height: 44px; border-radius: 50%; background: rgba(255,255,255,.08); box-shadow: inset 0 0 0 1px var(--line); place-items: center; }
.menu-btn i { display: block; width: 16px; height: 1.5px; background: var(--text); margin: 2px 0; border-radius: 2px; }
.menu-btn span { display: grid; gap: 0; }
.mnav { display: none; }

/* ── Section rhythm + head (chip → two-tone H2 left, short paragraph right, bottom-aligned) ── */
.sec { padding: var(--section) 0; position: relative; }
.sec--tight { padding-top: calc(var(--section) * .6); }
.head { display: grid; grid-template-columns: minmax(0, 560px) minmax(0, 300px); justify-content: space-between; align-items: end; gap: 32px; margin-bottom: var(--head-gap); }
.head__main { display: grid; gap: 24px; justify-items: start; }
.head__side { display: grid; gap: 20px; justify-items: start; padding-bottom: 6px; }
.head__side p { font: 400 16px/1.55 var(--font); color: var(--text-2); }
.head--wide { grid-template-columns: minmax(0, 760px) auto; }

/* ── Photo plate: a landscape behind a product window ── */
.plate { position: relative; overflow: hidden; border-radius: var(--r-lg); background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); }
.plate > img.plate__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* ── HERO (recomposed: copy left on the night sky, live agent window right landing on the fog) ── */
.hero { position: relative; min-height: 960px; padding-top: 150px; overflow: hidden; background: linear-gradient(180deg, var(--sky-1) 0%, var(--sky-2) 34%, var(--sky-3) 58%, var(--sky-3) 100%); }
.hero__photo { position: absolute; inset: auto 0 0; height: 54%; }
.hero__photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 22%); mask-image: linear-gradient(180deg, transparent 0%, #000 30%); }
.hero__photo::after { content: ""; position: absolute; inset: auto 0 0; height: 34%; background: linear-gradient(180deg, rgba(0,0,0,0), var(--bg)); }
.hero__grid { position: relative; z-index: 2; display: grid; grid-template-columns: minmax(0, 520px) minmax(0, 520px); justify-content: space-between; align-items: start; gap: 48px; }
.hero__copy { display: grid; gap: 28px; justify-items: start; padding-top: 24px; }
.hero__copy .t-h1 { margin-top: 4px; }
.hero__copy .t-lead { max-width: 420px; color: var(--tint); }
.hero__ctas { display: flex; gap: 12px; align-items: center; margin-top: 8px; }
.hero__proof { display: flex; align-items: center; gap: 14px; margin-top: 24px; font-size: 14px; color: var(--text); }
.hero__faces { display: flex; }
.hero__faces span { width: 34px; height: 34px; border-radius: 50%; margin-left: -4px; display: grid; place-items: center; font: 600 12px/1 var(--font); letter-spacing: -.02em; color: var(--text); background: var(--surface-3); box-shadow: 0 0 0 2px var(--sky-2); }
.hero__faces span:first-child { margin-left: 0; }
.hero__win { margin-top: 148px; }
.agent { display: grid; gap: 14px; padding: 18px; }
.agent__meta { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--muted); }
.agent__step { display: flex; align-items: center; gap: 10px; color: var(--text-2); font-size: 13px; }
.agent__step .ic { width: 15px; height: 15px; color: var(--accent-ink); }

/* ── INTRO: a statement lit word by word on scroll, then a customer logo row ── */
.intro__grid { display: grid; grid-template-columns: 200px minmax(0, 640px); justify-content: center; gap: 64px; }
.intro__text { display: grid; gap: 28px; }
.intro__text p { font: 400 26px/1.45 var(--font-display); letter-spacing: -.02em; color: var(--text); }
.lit .w { opacity: .26; transition: opacity .4s var(--ease); }
.lit .w.on { opacity: 1; }
.static .lit .w { opacity: 1; }
.logos { margin-top: 128px; display: grid; grid-template-columns: repeat(6, 1fr); align-items: center; gap: 24px; }
.logos__cap { grid-column: 1 / -1; margin-bottom: 24px; text-align: center; font-size: 14px; color: var(--muted); }
.logos svg { height: 26px; width: auto; margin: 0 auto; color: var(--muted); }

/* ── CORE FEATURES: segmented tabs over a photo plate with the product window ── */
.tabs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; padding: 4px; border-radius: var(--r-pill); box-shadow: inset 0 0 0 1px var(--line); margin-bottom: 24px; }
.tabs button { height: 44px; border-radius: var(--r-pill); font: 500 15px/1 var(--font); color: var(--muted); transition: background-color .3s var(--ease), color .3s var(--ease); }
.tabs button:hover { color: var(--text); }
.tabs button[aria-selected="true"] { background: var(--surface-2); color: var(--text); box-shadow: inset 0 0 0 1px var(--line); }
.feat__plate { height: 640px; }
.feat__plate > img.plate__img { height: 165%; inset: auto 0 0; object-position: 50% 100%; }
.mk-win.feat__app { position: absolute; inset: 72px 150px; display: grid; grid-template-columns: 220px 1fr; }
.feat__side { display: grid; align-content: start; gap: 4px; padding: 14px 12px; border-right: 1px solid var(--line); }
.feat__side .mk-pill { justify-content: center; margin-bottom: 12px; }
.feat__thread { display: grid; gap: 2px; padding: 8px 10px; border-radius: 10px; }
.feat__thread b { font-weight: 500; color: var(--text); font-size: 13px; }
.feat__thread span { font-size: 13px; color: var(--muted); }
.feat__thread.on { background: rgba(255,255,255,.06); }
.feat__user { margin-top: auto; display: flex; align-items: center; gap: 10px; padding: 10px; border-top: 1px solid var(--line); }
.feat__main { display: grid; grid-template-rows: auto 1fr auto; }
.feat__panel { display: none; padding: 28px 40px; align-content: center; gap: 18px; }
.feat__panel.on { display: grid; }
.feat__q { text-align: center; display: grid; gap: 4px; margin-bottom: 8px; }
.feat__q b { font: 500 24px/1.3 var(--font-display); letter-spacing: -.03em; color: var(--text); }
.feat__chips { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; max-width: 460px; margin: 0 auto; width: 100%; }
.feat__chips .mk-pill { height: 36px; justify-content: flex-start; padding: 0 14px; }
.feat__foot { padding: 0 24px 20px; }
.feat__cap { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 24px; margin-top: 24px; }
.feat__cap p { text-align: center; color: var(--text-2); font-size: 15px; }

/* ── WHY: horizontal carousel of illustration cards ── */
.rail { display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 32px) / 3); gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding-bottom: 4px; }
.rail::-webkit-scrollbar { display: none; }
.icard { scroll-snap-align: start; display: grid; grid-template-rows: 1fr auto; min-height: 460px; border-radius: var(--r); background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); overflow: hidden; transition: box-shadow .3s var(--ease); }
.icard:hover { box-shadow: inset 0 0 0 1px var(--line-2); }
.icard__art { position: relative; display: grid; place-items: center; padding: 16px; background: var(--surface); }
.icard__art img { width: 300px; max-width: 100%; height: auto; aspect-ratio: 1; }
.icard__txt { display: grid; gap: 8px; padding: 0 24px 28px; }
.icard__txt p { font-size: 15px; color: var(--text-2); max-width: 280px; }
.rail-nav { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 24px; margin-top: 32px; }
.rail-bar { height: 2px; border-radius: 2px; background: var(--line); position: relative; overflow: hidden; }
.rail-bar i { position: absolute; inset: 0 auto 0 0; width: 33%; background: var(--text-2); border-radius: 2px; transition: transform .35s var(--ease-out); }

/* ── WHAT YOU GET: three sticky rows that stack while scrolling ── */
.stack { display: grid; gap: 24px; }
.srow { position: sticky; top: 112px; display: grid; grid-template-columns: 1fr 1fr; min-height: 540px; border-radius: var(--r-lg); background: var(--surface); box-shadow: inset 0 0 0 1px var(--line), 0 -24px 48px rgba(0,0,0,.6); overflow: hidden; }
.srow:nth-child(2) { top: 136px; } .srow:nth-child(3) { top: 160px; }
.srow__txt { display: grid; align-content: space-between; gap: 32px; padding: 40px; }
.srow__txt h3 { max-width: 400px; }
.srow__txt p { max-width: 380px; color: var(--text-2); }
.srow__foot { display: flex; align-items: center; gap: 10px; padding-top: 20px; border-top: 1px solid var(--line); font-size: 14px; color: var(--text); }
.srow__media { position: relative; overflow: hidden; }
.srow__media > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.srow__media .mk-win { position: absolute; inset: 56px 48px auto; }
.srow--flip .srow__txt { order: 2; }

/* ── INTEGRATIONS: orbit of app tiles on three arcs + four feature cells ── */
.orbit { position: relative; height: 380px; margin: 0 auto; max-width: 900px; }
.orbit svg.orbit__arcs { position: absolute; inset: 0; width: 100%; height: 100%; }
.orbit__arcs path { stroke: var(--line); fill: none; }
.orbit__arcs path.ray { stroke: rgba(255,255,255,.05); }
.otile { position: absolute; display: grid; place-items: center; width: 56px; height: 56px; margin: -28px 0 0 -28px; border-radius: 16px; background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--line-2), var(--shadow-1); color: var(--text); font: 600 15px/1 var(--font); letter-spacing: -.02em; }
.otile .ic { width: 22px; height: 22px; stroke-width: 1.8; }
.otile--core { width: 84px; height: 84px; margin: -42px 0 0 -42px; border-radius: 24px; background: var(--surface-3); }
.otile--core .mark { width: 40px; height: 40px; }
.cells { display: grid; grid-template-columns: repeat(4, 1fr); margin-top: 56px; border-top: 1px solid var(--line); }
.cell { display: grid; align-content: start; gap: 10px; padding: 32px 28px 8px; border-left: 1px solid var(--line); }
.cell:first-child { border-left: 0; padding-left: 0; }
.cell p { font-size: 15px; color: var(--text-2); }
.cell .ic { color: var(--text); margin-top: 14px; }

/* ── CHANGELOG teaser: hairline timeline in four columns ── */
.tl { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; position: relative; padding-top: 40px; }
.tl::before { content: ""; position: absolute; inset: 0 0 auto; height: 1px; background: var(--line); }
.tl__item { position: relative; display: grid; gap: 10px; align-content: start; }
.tl__item::before { content: ""; position: absolute; top: -45px; left: 0; width: 9px; height: 9px; border-radius: 50%; background: var(--text-2); box-shadow: 0 0 0 4px var(--bg); }
.tl__item:first-child::before { background: var(--accent); }
.tl__item p { font-size: 15px; color: var(--text-2); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.tl__date { font-size: 13px; color: var(--muted); }

/* ── NUMBERS: two tall photo cards with a giant figure in the sky, four small stats ── */
.nums { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: start; }
.ncard { position: relative; height: 680px; border-radius: var(--r-lg); overflow: hidden; box-shadow: inset 0 0 0 1px var(--line); }
.ncard:nth-child(2) { margin-top: 96px; }
.ncard > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ncard::after { content: ""; position: absolute; inset: 0 0 auto; height: 48%; background: linear-gradient(180deg, rgba(4,8,12,.82) 0%, rgba(4,8,12,.62) 55%, rgba(4,8,12,0)); }
.ncard__top { position: absolute; z-index: 2; inset: 40px 40px auto; display: grid; gap: 14px; }
.ncard__top .t-display span { font-weight: 400; color: var(--tint); }
.ncard__top p:not(.t-display) { max-width: 280px; font-size: 15px; color: var(--text); }
.ncard__pill { position: absolute; z-index: 2; left: 40px; bottom: 36px; display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 14px; border-radius: var(--r-pill); background: rgba(0,0,0,.55); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); box-shadow: inset 0 0 0 1px var(--line-2); font: 500 13px/1 var(--font); color: var(--text); }
.ncard__pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
.stats4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; margin-top: 88px; }
.stat { display: grid; gap: 10px; align-content: start; }
.stat .ic { color: var(--text-2); margin-bottom: 10px; }
.stat b { font: 400 34px/1 var(--font-display); letter-spacing: -.05em; color: var(--tint); }
.stat p { font-size: 15px; color: var(--text-2); max-width: 220px; }

/* ── PRICING: three cards, middle one raised ── */
.plans { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; align-items: stretch; }
.plan { display: grid; align-content: start; gap: 22px; padding: 32px 28px; border-radius: var(--r); background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); }
.plan--pop { background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--line-2), var(--shadow-2); margin: -24px -8px; padding: 56px 36px; position: relative; z-index: 2; }
.plan__top { display: flex; justify-content: space-between; align-items: center; min-height: 26px; }
.plan__name { font: 500 13px/1 var(--font); letter-spacing: .06em; text-transform: uppercase; color: var(--text-2); }
.plan__price { display: flex; align-items: baseline; gap: 6px; }
.plan__price b { font: 400 40px/1 var(--font-display); letter-spacing: -.05em; color: var(--tint); }
.plan__price span { font-size: 14px; color: var(--muted); }
.plan > p { font-size: 15px; color: var(--text-2); max-width: 260px; }
.plan .btn { width: 100%; }
.plan ul { display: grid; border-top: 1px solid var(--line); }
.plan li { display: flex; align-items: center; gap: 10px; padding: 13px 0; border-bottom: 1px solid var(--line); font-size: 15px; color: var(--text-2); }
.plan li .ic { width: 16px; height: 16px; color: var(--text); }
.plan li.off { color: var(--muted); }
.plan li.off .ic { color: var(--muted); }
.plan li b { margin-left: auto; font-weight: 500; color: var(--text); }
.toggle { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text-2); }
.toggle__sw { position: relative; width: 34px; height: 20px; border-radius: 20px; background: var(--surface-3); box-shadow: inset 0 0 0 1px var(--line-2); transition: background-color .25s var(--ease); }
.toggle__sw::after { content: ""; position: absolute; top: 3px; left: 3px; width: 14px; height: 14px; border-radius: 50%; background: var(--text); transition: transform .25s var(--ease-out); }
.toggle[aria-pressed="true"] .toggle__sw { background: var(--accent); }
.toggle[aria-pressed="true"] .toggle__sw::after { transform: translateX(14px); }

/* ── FAQ: category pills + help card left, accordion right ── */
.faq { display: grid; grid-template-columns: 300px 1fr; gap: 40px; }
.faq__aside { display: grid; grid-template-rows: auto 1fr; gap: 24px; }
.faq__cats { display: grid; gap: 6px; align-content: start; }
.faq__cats button { height: 42px; padding: 0 18px; border-radius: var(--r-pill); text-align: left; font: 500 14.5px/1 var(--font); color: var(--muted); transition: background-color .25s var(--ease), color .25s var(--ease); }
.faq__cats button:hover { color: var(--text); }
.faq__cats button[aria-selected="true"] { background: var(--surface-2); color: var(--text); box-shadow: inset 0 0 0 1px var(--line); }
.help { align-self: end; display: grid; gap: 10px; padding: 24px; border-radius: var(--r); background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); }
.help p { font-size: 15px; color: var(--text-2); }
.qa { display: grid; gap: 10px; align-content: start; }
.qa__list { display: none; gap: 10px; }
.qa__list.on { display: grid; }
.qa details { border-radius: var(--r); background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); transition: background-color .25s var(--ease); }
.qa details[open] { background: var(--surface-2); }
.qa summary { list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 22px 24px; cursor: pointer; font: 500 17px/1.4 var(--font); color: var(--text); }
.qa summary::-webkit-details-marker { display: none; }
.qa summary .ic { color: var(--muted); transition: transform .3s var(--ease); }
.qa details[open] summary .ic { transform: rotate(45deg); }
.qa details p { padding: 0 24px 24px; max-width: 34em; font-size: 15px; color: var(--text-2); }

/* ── TESTIMONIAL: quote card with portrait ── */
.quote { display: grid; grid-template-columns: 1fr 400px; min-height: 520px; border-radius: var(--r-lg); background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); overflow: hidden; }
.quote__txt { display: grid; align-content: space-between; gap: 40px; padding: 48px; }
.quote__mark { display: inline-flex; align-items: center; gap: 10px; font: 600 17px/1 var(--font-display); letter-spacing: -.03em; color: var(--text); }
.quote blockquote p { font: 400 26px/1.42 var(--font-display); letter-spacing: -.03em; color: var(--text); max-width: 560px; }
.quote__who { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding-top: 24px; border-top: 1px solid var(--line); }
.quote__who b { display: block; color: var(--text); font-weight: 500; }
.quote__who span { font-size: 14px; color: var(--muted); }
.quote__img { position: relative; margin: 16px; border-radius: var(--r); overflow: hidden; }
.quote__img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.quote__nums { display: flex; gap: 40px; }
.quote__nums b { display: block; font: 400 34px/1 var(--font-display); letter-spacing: -.05em; color: var(--tint); }
.quote__nums span { font-size: 13px; color: var(--muted); }

/* ── BLOG: three cards with landscape thumbnails ── */
.posts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.post { display: grid; grid-template-rows: auto 1fr; border-radius: var(--r); background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); overflow: hidden; transition: box-shadow .3s var(--ease); }
.post:hover { box-shadow: inset 0 0 0 1px var(--line-2); }
.post__img { position: relative; aspect-ratio: 4 / 3; margin: 8px; border-radius: 12px; overflow: hidden; }
.post__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease-out); }
.post:hover .post__img img { transform: scale(1.03); }
.post__txt { display: grid; align-content: space-between; gap: 28px; padding: 16px 22px 24px; }
.post__txt h3 { font: 500 20px/1.35 var(--font-display); letter-spacing: -.03em; color: var(--text); }
.post__meta { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--muted); }

/* ── CTA (cta-a): copy left, agent window right cut by the edge, landscape strip below ── */
.cta { position: relative; padding-top: var(--section); overflow: hidden; }
.cta__grid { position: relative; z-index: 2; display: grid; grid-template-columns: minmax(0, 400px) 1fr; gap: 64px; align-items: center; }
.cta__copy { display: grid; gap: 24px; justify-items: start; }
.cta__copy p { color: var(--text-2); max-width: 340px; }
.badges { display: flex; gap: 24px; margin-top: 24px; }
.badge { display: flex; align-items: center; gap: 10px; font: 500 13px/1.4 var(--font); color: var(--text-2); }
.badge i { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--line-2); font: 600 12px/1 var(--font); font-style: normal; letter-spacing: .04em; color: var(--text); }
.cta__win { margin-right: -180px; }
.cta__strip { position: relative; height: 380px; margin-top: 8px; }
.cta__strip img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 60%; -webkit-mask-image: linear-gradient(180deg, transparent, #000 40%); mask-image: linear-gradient(180deg, transparent, #000 40%); }

/* ── Footer (footer-a: mark left, three link columns right, legal row) ── */
.foot { padding: 80px 0 40px; border-top: 1px solid var(--line); }
.foot__top { display: grid; grid-template-columns: 1fr repeat(3, 160px); gap: 32px; }
.foot__brand { display: grid; gap: 16px; align-content: start; }
.foot__brand p { max-width: 280px; font-size: 15px; color: var(--muted); }
.foot h4 { font: 500 14px/1 var(--font); color: var(--text); margin-bottom: 18px; }
.foot ul { display: grid; gap: 12px; }
.foot ul a { font-size: 15px; color: var(--text-2); transition: color .25s var(--ease); }
.foot ul a:hover { color: var(--text); }
.foot__bot { display: flex; justify-content: space-between; align-items: center; gap: 24px; margin-top: 80px; padding-top: 28px; border-top: 1px solid var(--line); font-size: 13.5px; color: var(--muted); }
.foot__social { display: flex; gap: 8px; }
.foot__social a { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--line); color: var(--text-2); transition: color .25s var(--ease), background-color .25s var(--ease); }
.foot__social a:hover { color: var(--text); background: rgba(255,255,255,.06); }

/* ── Reveal (own layer; the shared motion engine adds the intro + hovers) ── */
[data-reveal] { opacity: 0; transform: translateY(24px); transition: opacity .9s var(--ease-out), transform .9s var(--ease-out); }
[data-reveal].in { opacity: 1; transform: none; }
.static [data-reveal] { opacity: 1; transform: none; }

/* ── Responsive ── */
@media (max-width: 1100px) {
  :root { --section: 136px; }
  .hero__grid { grid-template-columns: 1fr; }
  .hero__copy { justify-items: start; }
  .hero__win { max-width: 560px; }
  .hero { min-height: 0; padding-bottom: 96px; }
  .feat__app { inset: 32px; }
  .srow { grid-template-columns: 1fr; position: relative; top: auto !important; }
  .srow--flip .srow__txt { order: 0; }
  .srow__media { min-height: 420px; }
  .cta__win { margin-right: 0; }
}
@media (max-width: 900px) {
  .nav, .site-head__cta { display: none; }
  .menu-btn { display: grid; grid-column: 3; }
  .site-head__in { grid-template-columns: 1fr auto; }
  .mnav:not([hidden]) { display: grid; gap: 4px; padding: 8px 0 20px; }
  .mnav a { padding: 12px 4px; font: 500 17px/1 var(--font); color: var(--text); border-bottom: 1px solid var(--line); }
  .mnav .btn { margin-top: 12px; border: 0; }
  .site-head.is-open { background: var(--bg); }
  .head, .head--wide { grid-template-columns: 1fr; margin-bottom: 48px; }
  .intro__grid { grid-template-columns: 1fr; gap: 24px; }
  .logos { grid-template-columns: repeat(3, 1fr); row-gap: 40px; margin-top: 88px; }
  .tabs { grid-template-columns: repeat(2, 1fr); border-radius: 22px; }
  .feat__plate { height: 600px; }
  .feat__app { grid-template-columns: 1fr; inset: 24px 16px; }
  .feat__side { display: none; }
  .feat__panel { padding: 20px; }
  .feat__chips { grid-template-columns: 1fr; }
  .rail { grid-auto-columns: 82%; }
  .cells { grid-template-columns: 1fr 1fr; }
  .cell:nth-child(3) { border-left: 0; padding-left: 0; }
  .tl { grid-template-columns: 1fr 1fr; row-gap: 48px; }
  .tl::before { display: none; }
  .tl__item::before { top: -18px; }
  .nums { grid-template-columns: 1fr; }
  .ncard { height: 560px; }
  .ncard:nth-child(2) { margin-top: 0; }
  .stats4 { grid-template-columns: 1fr 1fr; row-gap: 40px; }
  .plans { grid-template-columns: 1fr; gap: 16px; }
  .plan--pop { margin: 0; padding: 32px 28px; }
  .faq { grid-template-columns: 1fr; }
  .faq__cats { grid-auto-flow: column; grid-auto-columns: max-content; overflow-x: auto; }
  .faq__cats button { white-space: nowrap; }
  .help { display: none; }
  .quote { grid-template-columns: 1fr; }
  .quote__img { min-height: 380px; order: -1; }
  .posts { grid-template-columns: 1fr; }
  .cta__grid { grid-template-columns: 1fr; }
  .foot__top { grid-template-columns: 1fr 1fr; }
  .foot__brand { grid-column: 1 / -1; }
}
@media (max-width: 560px) {
  :root { --section: 104px; --gutter: 20px; }
  .t-h1 { font-size: 40px; }
  .t-h2 { font-size: 32px; }
  .t-display { font-size: 104px; }
  .hero { padding-top: 128px; }
  .hero__ctas { flex-wrap: wrap; }
  .intro__text p { font-size: 21px; }
  .srow__txt { padding: 28px 24px; }
  .srow__media .mk-win { inset: 24px 16px auto; }
  .orbit { height: 260px; }
  .otile { width: 42px; height: 42px; margin: -21px 0 0 -21px; border-radius: 12px; font-size: 12px; }
  .otile--core { width: 60px; height: 60px; margin: -30px 0 0 -30px; }
  .cells { grid-template-columns: 1fr; }
  .cell { border-left: 0; padding-left: 0; padding-right: 0; border-bottom: 1px solid var(--line); padding-bottom: 28px; }
  .tl { grid-template-columns: 1fr; }
  .ncard__top { inset: 28px 24px auto; }
  .ncard__pill { left: 24px; }
  .quote__txt { padding: 28px 24px; }
  .quote blockquote p { font-size: 21px; }
  .quote__who { flex-direction: column; align-items: flex-start; }
  .feat__cap { grid-template-columns: 1fr 1fr; }
  .feat__cap p { grid-column: 1 / -1; order: -1; }
  .badges { flex-wrap: wrap; }
  .foot__bot { flex-direction: column; align-items: flex-start; }
}

/* Hero: a local shade only behind the copy (never the whole photo) */
.hero::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: radial-gradient(48% 50% at 21% 62%, rgba(7, 11, 16, .8), rgba(7, 11, 16, 0) 74%); }
@media (max-width: 1100px) { .hero::after { background: linear-gradient(180deg, rgba(7,11,16,0) 30%, rgba(7,11,16,.55) 55%, rgba(7,11,16,0) 75%); } }

.hero .chip { color: var(--text); }
.hero .chip--pill { background: rgba(7,11,16,.35); }
.site-head .nav a:not(:hover):not([aria-current]) { color: var(--text-nav); }

/* Illustration labels (il-): 1–3 words, glass pills sitting on the drawing */
.il-tag { position: absolute; display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 11px; border-radius: var(--r-pill); background: var(--glass); box-shadow: inset 0 0 0 1px var(--line-2); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); font: 500 13px/1 var(--font); color: var(--text); white-space: nowrap; }
.il-tag--on::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
.ncard:nth-child(2) > img { height: 140%; inset: auto 0 0; object-position: 50% 100%; }

/* ───────── 404 ───────── */
/* Ombra · 404 page (nf-). Loads after mockups.css. Tokens only. */

/* ── Full-screen blue-hour plate, a local shade behind the copy, a small frosted window ── */
.nf { position: relative; display: grid; align-items: start; min-height: max(100vh, 860px); padding: 168px 0 140px; overflow: hidden; background: linear-gradient(180deg, var(--sky-1) 0%, var(--sky-2) 36%, var(--sky-3) 62%, var(--sky-3) 100%); }
.nf__img { position: absolute; inset: auto 0 0; width: 100%; height: 58%; object-fit: cover; object-position: 32% 78%; -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 34%); mask-image: linear-gradient(180deg, transparent 0%, #000 34%); }
.nf::before { content: ""; position: absolute; inset: auto 0 0; z-index: 1; height: 30%; pointer-events: none; background: linear-gradient(180deg, rgba(0, 0, 0, 0), var(--bg)); }
.nf__in { position: relative; z-index: 2; display: grid; justify-items: center; gap: 40px; text-align: center; }
.nf__copy { display: grid; justify-items: center; gap: 20px; }
.nf__copy .chip { color: var(--text); }
.nf__copy .t-body { max-width: 380px; color: var(--tint); }
.nf .t-h1 .dim { color: var(--text-2); }

.nf__win { width: min(460px, 100%); text-align: left; }
.nf__dot { background: var(--warning); box-shadow: none; }
.nf__body { display: grid; gap: 10px; padding: 16px; }
.nf__search { padding-left: 14px; }
.nf__search:focus-within { box-shadow: inset 0 0 0 1px var(--line-2); }
.nf__search input { flex: 1; min-width: 0; height: 32px; border: 0; background: none; outline: none; font: 400 14px/1 var(--font); color: var(--text); }
.nf__search input::placeholder { color: var(--muted); }
.nf__search input::-webkit-search-cancel-button { display: none; }
.nf__search .mk-input__send { border: 0; cursor: pointer; transition: background-color .25s var(--ease); }
.nf__search .mk-input__send:hover { background: var(--text); }
.nf__links { display: grid; gap: 8px; }
.nf__links .mk-act { color: var(--muted); transition: background-color .25s var(--ease), box-shadow .25s var(--ease); }
.nf__links .mk-act > .ic { color: var(--muted); transition: color .25s var(--ease), transform .25s var(--ease); }
.nf__links .mk-act:hover { background: rgba(255, 255, 255, .1); box-shadow: inset 0 0 0 1px var(--line-2); }
.nf__links .mk-act:hover > .ic { color: var(--text); transform: translateX(2px); }

@media (max-width: 560px) {
  .nf { min-height: 0; padding: 120px 0 96px; }
  .nf__img { height: 46%; object-position: 30% 80%; }
  .nf__in { gap: 32px; }
}

/* ───────── About ───────── */
/* Ombra · about page (ab-). Loads after mockups.css. Tokens only. */

/* ── Page head: chip · H1 two lines · short line, then three stat cells ── */
.ab-head { padding-top: 200px; }
.ab-head__copy { display: grid; gap: 24px; justify-items: start; max-width: 680px; }
.ab-head__copy .t-h1 { margin-top: 4px; }
.ab-head__copy .t-body { max-width: 440px; }
.ab-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 64px; }
.ab-stat { display: grid; justify-items: center; align-content: center; gap: 10px; min-height: 116px; padding: 20px; border-radius: var(--r); background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); text-align: center; }
.ab-stat b { font: 400 34px/1 var(--font-display); letter-spacing: -.05em; color: var(--tint); }
.ab-stat span { font-size: 15px; color: var(--text-2); }

/* ── Photo strip: four full-bleed frames cut from one horizon ── */
.ab-strip { margin-top: 120px; display: grid; grid-template-columns: repeat(4, 1fr); height: clamp(260px, 38vw, 540px); border-block: 1px solid var(--line); }
.ab-strip__f { position: relative; margin: 0; overflow: hidden; }
.ab-strip__f + .ab-strip__f::after { content: ""; position: absolute; z-index: 1; inset: 0 auto 0 0; width: 1px; background: rgba(0, 0, 0, .55); }
.ab-strip__f img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* ── Story: statement, customer marks left, founder card right ── */
.ab-statement { display: grid; gap: 24px; justify-items: start; max-width: 760px; margin-bottom: var(--head-gap); }
.ab-story { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.ab-marks { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.ab-mark { display: grid; place-items: center; min-height: 190px; border-radius: var(--r); background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); transition: box-shadow .3s var(--ease); }
.ab-mark:hover { box-shadow: inset 0 0 0 1px var(--line-2); }
.ab-mark svg { height: 26px; width: auto; color: var(--muted); }
.ab-card { display: grid; align-content: space-between; gap: 48px; padding: 56px 56px 48px; border-radius: var(--r); background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); }
.ab-card__txt { display: grid; gap: 22px; }
.ab-card__txt p { font: 400 17px/1.6 var(--font); letter-spacing: -.01em; color: var(--text-2); max-width: 30em; }
.ab-card__txt p:first-child { color: var(--text); }
.ab-founder { display: flex; align-items: center; gap: 14px; padding-top: 24px; border-top: 1px solid var(--line); }
.ab-founder__img { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: linear-gradient(140deg, var(--sky-3), var(--sky-2)); box-shadow: inset 0 0 0 1px var(--line-2); font: 600 15px/1 var(--font); color: var(--text); flex: none; }
.ab-founder b { display: block; font-weight: 500; color: var(--text); }
.ab-founder span { font-size: 14px; color: var(--muted); }

/* ── Values: carousel of five icon cards (shared .rail behaviour) ── */
.ab-vcard { scroll-snap-align: start; display: grid; grid-template-rows: 1fr auto; gap: 32px; min-height: 380px; padding: 36px 32px 36px; border-radius: var(--r); background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); transition: box-shadow .3s var(--ease); }
.ab-vcard:hover { box-shadow: inset 0 0 0 1px var(--line-2); }
.ab-vcard > .ic { width: 26px; height: 26px; stroke-width: 1.5; color: var(--text); }
.ab-vcard > div { display: grid; gap: 10px; align-self: end; }
.ab-vcard h3 { font-size: 20px; letter-spacing: -.02em; }
.ab-vcard p { font-size: 15px; color: var(--text-2); max-width: 290px; }

/* ── Team: three columns of avatar + name + role under a hairline ── */
.ab-team { display: grid; grid-template-columns: repeat(3, 1fr); gap: 44px 24px; padding-top: 56px; border-top: 1px solid var(--line); }
.ab-team li { display: flex; align-items: center; gap: 14px; }
.ab-team b { display: block; font: 500 17px/1.35 var(--font); color: var(--text); }
.ab-team span:not(.ab-av) { font-size: 14px; color: var(--muted); }
.ab-av { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; flex: none; background: linear-gradient(140deg, var(--surface-3), var(--surface)); box-shadow: inset 0 0 0 1px var(--line-2); font: 600 15px/1 var(--font); letter-spacing: -.01em; color: var(--text); }
.ab-av[data-h="1"] { background: linear-gradient(140deg, var(--sky-3), var(--sky-1)); }
.ab-av[data-h="2"] { background: linear-gradient(140deg, var(--sky-2), var(--surface)); }
.ab-av[data-h="3"] { background: linear-gradient(140deg, var(--surface-3), var(--sky-2)); }

/* ── Careers: centred head, role rows with tag chips ── */
.ab-chead { display: grid; justify-items: center; gap: 20px; text-align: center; margin-bottom: 56px; }
.ab-chead p { max-width: 520px; color: var(--text-2); }
.ab-chead a { color: var(--text); font-weight: 500; box-shadow: inset 0 -1px 0 var(--line-2); transition: color .25s var(--ease); }
.ab-chead a:hover { color: var(--accent-ink); }
.ab-jobs { display: grid; gap: 8px; max-width: 800px; margin: 0 auto; }
.ab-job { display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; padding: 32px 36px; border-radius: var(--r); background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); transition: box-shadow .3s var(--ease), background-color .3s var(--ease); }
.ab-job:hover { background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--line-2); }
.ab-job__tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.ab-job__tags .tag { height: 30px; padding: 0 14px; }
.ab-job > .ic { margin-top: 6px; color: var(--muted); transition: color .25s var(--ease); }
.ab-job:hover > .ic { color: var(--text); }

/* ── CTA (inset card): centred copy on a hairline card with a low sky glow ── */
.ab-cta { padding-bottom: 128px; }
.ab-cta__card { display: grid; justify-items: center; gap: 24px; padding: 104px 40px; border-radius: var(--r-lg); text-align: center; background: radial-gradient(70% 90% at 50% 120%, var(--sky-3) 0%, var(--sky-2) 38%, var(--surface) 78%); box-shadow: inset 0 0 0 1px var(--line); }
.ab-cta__card p { max-width: 440px; color: var(--text-2); }
.ab-cta__btns { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 8px; }

/* ── Responsive ── */
@media (max-width: 1100px) {
  .ab-card { padding: 44px 40px 40px; }
}
@media (max-width: 900px) {
  .ab-head { padding-top: 160px; }
  .ab-strip { margin-top: 96px; }
  .ab-story { grid-template-columns: 1fr; }
  .ab-marks { grid-template-columns: repeat(3, 1fr); }
  .ab-mark { min-height: 140px; }
  .ab-team { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .ab-head { padding-top: 132px; }
  .ab-strip { margin-top: 72px; }
  .ab-stats { grid-template-columns: 1fr; margin-top: 48px; }
  .ab-stat { min-height: 96px; }
  .ab-marks { grid-template-columns: 1fr 1fr; }
  .ab-mark { min-height: 112px; }
  .ab-card { padding: 32px 24px 28px; }
  .ab-card__txt p { font-size: 16px; }
  .ab-team { grid-template-columns: 1fr; gap: 24px; padding-top: 40px; }
  .ab-job { padding: 24px 22px; }
  .ab-job h3 { font-size: 20px; }
  .ab-cta__card { padding: 72px 24px; }
}
img.ab-founder__img { object-fit: cover; object-position: 50% 25%; padding: 0; }

/* ───────── Changelog ───────── */
/* Ombra · changelog page (cl-). Loads after mockups.css. Tokens only. */

/* ── Page hero: chip + H1 left, one line right, hairline under ── */
.sec.cl-hero { padding: 184px 0 0; }
.cl-hero__in { display: grid; grid-template-columns: minmax(0, 620px) minmax(0, 300px); justify-content: space-between; align-items: end; gap: 32px; padding-bottom: 64px; border-bottom: 1px solid var(--line); }
.cl-hero__in .head__side p { font-size: 16px; color: var(--text-2); }

/* ── Timeline: hairline at the left, sticky date, entry column 712px ── */
.sec.cl-list { padding: 0 0 160px; }
.sec.cl-list--first { padding-top: 96px; }
.cl-list--last .cl-line::before { bottom: 0; }
.cl-line { position: relative; }
.cl-line::before { content: ""; position: absolute; top: 0; bottom: -160px; left: 4px; width: 1px; background: var(--line); }
.cl-entry { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 712px); gap: 32px; }
.cl-date { position: sticky; top: 120px; align-self: start; display: flex; align-items: center; gap: 12px; padding-left: 26px; font: 500 14px/1 var(--font); color: var(--text-2); }
.cl-date::before { content: ""; position: absolute; left: 0; top: 50%; width: 9px; height: 9px; margin-top: -4.5px; border-radius: 50%; background: var(--text-2); box-shadow: 0 0 0 5px var(--bg); }
.cl-entry:first-child .cl-date::before { background: var(--accent); }
.cl-date .tag { height: 22px; font-size: 12px; color: var(--muted); }
.cl-body { display: grid; gap: 32px; min-width: 0; }
.cl-title { font: 500 32px/1.25 var(--font-display); letter-spacing: -.035em; color: var(--text); max-width: 520px; }

/* plate: the window floats on the photo; the plate grows with the window */
.cl-plate { padding: 56px 64px 88px; }
.cl-plate > .plate__img { object-position: 50% 70%; }
.cl-win { position: relative; }
.cl-win__in { display: grid; gap: 12px; padding: 18px; }
.cl-win__stats { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; padding: 4px 2px 6px; }
.cl-perm { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 14px; border-radius: 12px; background: var(--glass-2); box-shadow: inset 0 0 0 1px var(--line); }
.cl-perm b { display: block; color: var(--text); font-weight: 500; }

.cl-text { display: grid; gap: 18px; }
.cl-text p { max-width: 36em; font-size: 16px; color: var(--text-2); }

/* New / Improved / Fixed */
.cl-notes { display: grid; border-top: 1px solid var(--line); }
.cl-note { border-bottom: 1px solid var(--line); }
.cl-note summary { list-style: none; display: flex; align-items: center; gap: 12px; padding: 22px 0; cursor: pointer; font: 500 20px/1.3 var(--font-display); letter-spacing: -.02em; color: var(--text); }
.cl-note summary::-webkit-details-marker { display: none; }
.cl-note summary .ic { margin-left: auto; color: var(--muted); transition: transform .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease); }
.cl-note[open] summary .ic { transform: rotate(90deg); }
.cl-note summary:hover .ic { color: var(--text); }
.cl-count { display: inline-grid; place-items: center; min-width: 24px; height: 22px; padding: 0 7px; border-radius: var(--r-pill); background: rgba(255, 255, 255, .06); box-shadow: inset 0 0 0 1px var(--line); font: 500 12px/1 var(--font); color: var(--text-2); }
.cl-note ul { display: grid; gap: 12px; padding: 0 0 26px; }
.cl-note li { position: relative; padding-left: 20px; font-size: 15px; color: var(--text-2); }
.cl-note li::before { content: ""; position: absolute; left: 2px; top: .62em; width: 5px; height: 5px; border-radius: 50%; background: var(--muted); }

/* ── CTA: split card, copy left, "coming next" list right ── */
.sec.cl-cta { padding-bottom: 128px; }
.cl-cta__card { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 420px); gap: 64px; align-items: center; padding: 64px; border-radius: var(--r-lg); background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); }
.cl-cta__copy { display: grid; gap: 22px; justify-items: start; }
.cl-cta__copy p { max-width: 400px; color: var(--text-2); }
.cl-cta__btns { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 6px; }
.cl-next { display: grid; gap: 14px; padding: 28px; border-radius: var(--r); background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--line); }
.cl-next ul { display: grid; }
.cl-next li { display: grid; grid-template-columns: 48px 1fr; gap: 14px; align-items: start; padding: 14px 0; border-top: 1px solid var(--line); font-size: 14px; color: var(--text-2); }
.cl-next li b { display: block; margin-bottom: 2px; font: 500 15px/1.4 var(--font); color: var(--text); }
.cl-next .tag { justify-content: center; }

/* ── Responsive ── */
@media (max-width: 1100px) {
  .cl-entry { grid-template-columns: 180px minmax(0, 1fr); }
  .cl-plate { padding: 40px 40px 72px; }
}
@media (max-width: 900px) {
  .sec.cl-hero { padding-top: 144px; }
  .cl-hero__in { grid-template-columns: 1fr; padding-bottom: 48px; }
  .sec.cl-list { padding-bottom: 112px; }
  .sec.cl-list--first { padding-top: 64px; }
  .cl-line::before { display: none; }
  .cl-entry { grid-template-columns: 1fr; gap: 18px; }
  .cl-date { position: relative; top: auto; }
  .cl-cta__card { grid-template-columns: 1fr; gap: 40px; padding: 40px; }
}
@media (max-width: 560px) {
  .sec.cl-hero { padding-top: 128px; }
  .cl-title { font-size: 26px; }
  .cl-body { gap: 24px; }
  .cl-plate { padding: 28px 14px 56px; border-radius: var(--r); }
  .cl-win__in { padding: 14px; }
  .cl-win .mk-act { grid-template-columns: auto 1fr; }
  .cl-win .mk-act > :last-child { grid-column: 2; justify-self: start; }
  .cl-note summary { font-size: 18px; }
  .cl-cta__card { padding: 28px 20px; }
  .cl-next { padding: 20px; }
  .sec.cl-cta { padding-bottom: 88px; }
}

/* ───────── Mockups Page ───────── */
/* Ombra mock-up catalogue page only (mkc-). Tokens only. Never copied into a buyer's site. */
.mkc-hero { padding: 168px 0 0; }
.mkc-hero .head { margin-bottom: 0; }
.mkc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 72px 24px; padding-top: 88px; }
.mkc-item { display: grid; grid-template-rows: auto 1fr; gap: 24px; min-width: 0; }
.mkc-item--wide { grid-column: 1 / -1; }
.mkc-stage { position: relative; display: grid; place-items: center; min-height: 520px; padding: 56px 40px; border-radius: var(--r-lg); background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); overflow: hidden; }
.mkc-stage--sky { background: linear-gradient(180deg, var(--sky-1) 0%, var(--sky-2) 55%, var(--sky-3) 100%); }
.mkc-stage--black { background: var(--bg); }
.mkc-stage > img.plate__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.mkc-stage > .mk-win, .mkc-stage > .mkc-float { position: relative; z-index: 1; width: 100%; }
.mkc-w-460 { max-width: 460px; }
.mkc-w-520 { max-width: 520px; }
.mkc-w-640 { max-width: 640px; }
.mkc-w-760 { max-width: 760px; }
.mkc-float { position: relative; }
.mkc-toast-br { right: -28px; bottom: -26px; }
.mkc-toast-bl { left: -24px; bottom: -24px; }
.mkc-toast-tr { right: -24px; top: -22px; }
.mkc-toast-below { left: 32px; bottom: -58px; }
.mkc-meta { display: grid; gap: 12px; align-content: start; padding-top: 20px; border-top: 1px solid var(--line); }
.mkc-meta h2 { font: 500 24px/1.35 var(--font-display); letter-spacing: -.03em; color: var(--text); }
.mkc-meta h2 span { color: var(--muted); }
.mkc-meta p { font-size: 15px; color: var(--text-2); max-width: 36em; }
.mkc-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.mkc-rules { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.mkc-rule { display: grid; gap: 10px; align-content: start; padding: 28px; border-radius: var(--r); background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); }
.mkc-rule p { font-size: 15px; color: var(--text-2); }
.mkc-rule code { font: 400 12.5px/1.6 var(--mono); color: var(--muted); }
.mkc-sec { padding: 144px 0 160px; }

@media (max-width: 1100px) {
  .mkc-toast-br, .mkc-toast-tr { right: -8px; }
  .mkc-toast-bl { left: -8px; }
}
@media (max-width: 900px) {
  .mkc-grid { grid-template-columns: 1fr; gap: 64px; }
  .mkc-item--wide { grid-column: auto; }
  .mkc-rules { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .mkc-hero { padding-top: 128px; }
  .mkc-stage { min-height: 0; padding: 32px 14px 48px; }
  .mkc-toast-br, .mkc-toast-bl, .mkc-toast-tr, .mkc-toast-below { position: relative; inset: auto; margin-top: 12px; white-space: normal; }
  .mkc-float { display: grid; }
  .mkc-meta h2 { font-size: 21px; }
  .mkc-sec { padding: 104px 0 120px; }
}

/* ───────── Pricing ───────── */
/* Ombra · pricing page (pr-). Loads after mockups.css. Tokens only. */

/* ── Page hero: chip + two-line H1 left, short line right; plans below; customer marks ── */
.sec.pr-hero { padding-top: 184px; padding-bottom: 0; }
.pr-hero__head { display: grid; grid-template-columns: minmax(0, 600px) minmax(0, 300px); justify-content: space-between; align-items: end; gap: 32px; }
.sec.pr-plans-sec { padding: 112px 0 0; }
.pr-hero__head .t-h1 { max-width: 600px; }
.pr-hero__head .t-h1 .dim { color: var(--muted); }
.pr-plans .plan ul { margin-top: 2px; }
.logos.pr-logos { margin-top: 120px; }
.pr-logos .logos__cap { text-align: left; margin-bottom: 32px; color: var(--text-2); font-size: 15px; }

/* ── Compare table: grouped rows, checks / dashes / values, sticky header row ── */
.pr-hint { display: none; }
.pr-table { width: 100%; border-collapse: separate; border-spacing: 0; table-layout: fixed; font: 400 15px/1.45 var(--font); color: var(--text-2); }
.pr-table .pr-col-feat { width: 34%; }
.pr-table thead th { position: sticky; top: 72px; z-index: 3; padding: 22px 16px 20px 0; background: var(--bg); box-shadow: 0 1px 0 var(--line-2); text-align: left; vertical-align: bottom; font: 500 24px/1.2 var(--font-display); letter-spacing: -.03em; color: var(--text); }
.pr-table thead th span { display: block; margin-top: 6px; font: 400 14px/1.3 var(--font); letter-spacing: -.01em; color: var(--muted); }
.pr-table thead th:first-child { color: var(--text-2); }
.pr-table tbody th, .pr-table tbody td { padding: 17px 16px 17px 0; border-bottom: 1px solid var(--line); text-align: left; vertical-align: middle; font-weight: 400; }
.pr-table tbody th[scope="row"] { color: var(--text-2); }
.pr-table tbody td { color: var(--text); }
.pr-table .pr-group th { padding: 64px 0 16px; border-bottom: 1px solid var(--line-2); font: 500 20px/1.3 var(--font-display); letter-spacing: -.025em; color: var(--text); }
.pr-table tbody:first-of-type .pr-group th { padding-top: 40px; }
.pr-yes, .pr-no { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; vertical-align: middle; }
.pr-yes { background: rgba(255, 255, 255, .14); color: var(--text); }
.pr-no { color: var(--muted); }
.pr-yes .ic, .pr-no .ic { width: 14px; height: 14px; stroke-width: 2.4; }

/* ── Billing FAQ: help card shown on phones too ── */
.pr-faq .faq__aside { grid-template-rows: auto; align-content: start; }
.pr-faq .help { align-self: start; position: sticky; top: 112px; }

/* ── CTA: inset sky card, centred (cta-a on the home page is a split with a strip) ── */
.pr-cta__card { position: relative; overflow: hidden; display: grid; justify-items: center; gap: 24px; padding: 104px 48px 96px; border-radius: var(--r-lg); text-align: center; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); }
.pr-cta__card::before { content: ""; position: absolute; inset: auto -10% -55% -10%; height: 90%; border-radius: 50%; background: radial-gradient(closest-side, rgba(var(--accent-rgb), .16), rgba(var(--accent-rgb), 0)); pointer-events: none; }
.pr-cta__card > * { position: relative; }
.pr-cta__card .chip { color: var(--text); }
.pr-cta__card .t-h2 { max-width: 560px; }
.pr-cta__card .t-h2 .dim { color: var(--text-2); }
.pr-cta__card > p { max-width: 440px; color: var(--text-nav); }
.pr-cta__btns { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 8px; }
.pr-cta__ticks { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 28px; margin-top: 16px; font-size: 14px; color: var(--text-nav); }
.pr-cta__ticks li { display: inline-flex; align-items: center; gap: 8px; }
.pr-cta__ticks .ic { color: var(--accent-ink); }

/* ── Responsive ── */
@media (max-width: 900px) {
  .sec.pr-hero { padding-top: 144px; }
  .pr-hero__head { grid-template-columns: 1fr; }
  .sec.pr-plans-sec { padding-top: 64px; }
  .logos.pr-logos { margin-top: 88px; }
  .pr-hint { display: block; margin: -24px 0 16px; font-size: 14px; color: var(--muted); }
  .pr-table-wrap { overflow-x: auto; margin: 0 calc(var(--gutter) * -1); padding: 0 var(--gutter); scrollbar-width: thin; }
  .pr-table { min-width: 620px; }
  .pr-table thead th { position: static; font-size: 20px; }
  .pr-faq .help { display: grid; position: static; }
  .pr-faq .faq__aside { order: 2; }
}
@media (max-width: 560px) {
  .sec.pr-hero { padding-top: 128px; }
  .pr-table { min-width: 560px; font-size: 14px; }
  .pr-table .pr-col-feat { width: 38%; }
  .pr-table .pr-group th { padding-top: 48px; font-size: 18px; }
  .pr-cta__card { padding: 72px 24px 64px; }
}
.sec.pr-cta { padding-bottom: 128px; }
@media (max-width: 560px) { .sec.pr-cta { padding-bottom: 88px; } }

/* ───────── Style Guide ───────── */
/* Ombra style guide page only (sg-). Tokens only. Never copied into a buyer's site. */

/* ── Section heads on this page ── */
.sg-sec { padding: 128px 0 0; }
.sg-sec:last-of-type { padding-bottom: 160px; }
.sg-sec .head { margin-bottom: 48px; }
.sg-sub { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin: 64px 0 20px; padding-top: 20px; border-top: 1px solid var(--line); }
.head + .sg-sub { margin-top: 0; }
.sg-sub h3 { font: 500 17px/1.4 var(--font); letter-spacing: -.01em; color: var(--text); }
.sg-cap, .sg-sub code { font: 400 12.5px/1.5 var(--mono); color: var(--muted); letter-spacing: 0; }
.sg-cap b { font-weight: 400; color: var(--text-2); }

/* ── 1 · Overview board (first 1440×990 screen = store image) ── */
.sg-hero { padding: 128px 0 0; }
.sg-hero__top { display: grid; grid-template-columns: minmax(0, 640px) minmax(0, 340px); justify-content: space-between; align-items: end; gap: 32px; margin-bottom: 36px; }
.sg-hero__top .head__main { display: grid; gap: 20px; justify-items: start; }
.sg-hero__top p { font-size: 16px; color: var(--text-2); padding-bottom: 6px; }
.sg-board { display: grid; grid-template-columns: minmax(0, 1.62fr) minmax(0, 1fr); grid-template-rows: 300px 268px auto; gap: 16px; }
.sg-board__plate { grid-row: 1 / 3; }
.sg-board__plate > img.plate__img { object-position: 50% 40%; }
.sg-board__win { position: absolute; inset: 168px 56px auto; max-width: 540px; margin: 0 auto; }
.sg-board__win .agent { gap: 12px; padding: 16px; }
.sg-tile { position: relative; display: grid; gap: 12px; align-content: start; padding: 24px; border-radius: var(--r-lg); background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); overflow: hidden; }
.sg-tile__label { display: flex; justify-content: space-between; align-items: center; gap: 12px; font: 500 13px/1 var(--font); color: var(--text-2); }
.sg-aa { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; }
.sg-aa .t-display { line-height: .9; }
.sg-aa__fam { display: grid; gap: 6px; text-align: right; padding-bottom: 8px; }
.sg-aa__fam b { font: 500 22px/1.2 var(--font-display); letter-spacing: -.03em; color: var(--text); }
.sg-aa__fam span { font-size: 13px; color: var(--muted); }
.sg-ladder { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; padding-top: 14px; border-top: 1px solid var(--line); }
.sg-ladder span { display: grid; gap: 2px; font-size: 12px; color: var(--muted); }
.sg-ladder b { font: 500 15px/1.2 var(--font); color: var(--text); }
.sg-dots { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; }
.sg-dot { display: grid; gap: 7px; justify-items: start; font-size: 12px; color: var(--muted); }
.sg-dot i { width: 100%; height: 36px; border-radius: 12px; box-shadow: inset 0 0 0 1px var(--line-2); }
.sg-skybar { height: 28px; border-radius: 10px; background: linear-gradient(90deg, var(--sky-1), var(--sky-2) 45%, var(--sky-3)); box-shadow: inset 0 0 0 1px var(--line); }
.sg-acc { display: flex; align-items: center; gap: 10px; font-size: 15px; color: var(--text-2); }
.sg-strip { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 14px; padding: 18px 22px; border-radius: var(--r-lg); background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); }
.sg-strip .il-tag, .sg-inline .il-tag { position: static; }
.sg-strip__sep { width: 1px; height: 28px; background: var(--line); }

/* ── 2 · Colour swatches ── */
.sg-swatches { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 16px; }
.sg-sw { display: grid; gap: 4px; align-content: start; min-width: 0; }
.sg-sw i { display: block; height: 96px; margin-bottom: 10px; border-radius: var(--r-sm); box-shadow: inset 0 0 0 1px var(--line-2); }
.sg-sw b { font: 500 14px/1.3 var(--font); color: var(--text); }
.sg-sw span { font: 400 12px/1.45 var(--mono); color: var(--muted); overflow-wrap: anywhere; }
.sg-sw--wide { grid-column: span 3; }
.sg-sw--photo i { background-color: var(--surface); }

/* ── 3 · Type scale ── */
.sg-type { display: grid; }
.sg-trow { display: grid; grid-template-columns: 220px minmax(0, 1fr); align-items: baseline; gap: 32px; padding: 28px 0; border-top: 1px solid var(--line); }
.sg-trow__meta { display: grid; gap: 4px; }
.sg-trow__meta b { font: 500 14px/1.3 var(--font); color: var(--text); }
.sg-trow__meta span { font: 400 12px/1.5 var(--mono); color: var(--muted); }
.sg-trow > p { min-width: 0; overflow-wrap: anywhere; }
.sg-trow .t-display { font-size: 120px; }

/* ── 4 · Shape, space, depth ── */
.sg-shape { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; }
.sg-radius { display: grid; gap: 12px; }
.sg-radius i { display: block; height: 104px; background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--line-2); }
.sg-space { display: grid; gap: 14px; }
.sg-space__row { display: grid; grid-template-columns: 220px minmax(0, 1fr); align-items: center; gap: 24px; }
.sg-space__row i { display: block; height: 14px; border-radius: 4px; background: rgba(255,255,255,.14); box-shadow: inset 0 0 0 1px var(--line-2); max-width: 100%; }
.sg-depth { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.sg-depth > div { display: grid; gap: 14px; }
.sg-depth i { display: block; height: 140px; border-radius: var(--r); background: var(--surface-2); }

/* ── 5 · Components ── */
.sg-inline { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 14px; }
.sg-panel { padding: 28px; border-radius: var(--r-lg); background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); }
.sg-panel--bare { padding: 0; background: none; box-shadow: none; }
.sg-head-demo .head { margin-bottom: 0; }
.sg-parts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.sg-part { display: grid; grid-template-rows: 1fr auto; gap: 12px; min-width: 0; }
.sg-part > .mk-win { display: grid; gap: 12px; align-content: center; padding: 18px; min-height: 150px; }
.sg-part > .mk-win.sg-flush { padding: 0; align-content: start; }
.sg-part--wide { grid-column: span 2; }
.sg-plate-demo { height: 420px; }
.sg-plate-demo .mk-win { position: absolute; inset: 64px 18% auto; }
.sg-icards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.sg-icards .icard { min-height: 420px; }
.sg-icards .icard__art img { width: 260px; }
.sg-srow .srow { position: relative; top: auto; min-height: 480px; }
.sg-tl { padding-top: 48px; }
.sg-ncards { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: center; }
.sg-ncards .ncard { height: 640px; }
.sg-ncards .stats4 { margin-top: 0; grid-template-columns: 1fr 1fr; row-gap: 40px; }
.sg-plans .plans { max-width: 900px; margin: 24px auto 0; }
.sg-faq .faq { grid-template-columns: 280px 1fr; }
.sg-posts { grid-template-columns: repeat(3, 1fr); }
.sg-cta { position: relative; padding: 72px 56px; border-radius: var(--r-lg); background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); overflow: hidden; }
.sg-cta .cta__win { margin-right: -120px; }
.sg-icons { display: grid; grid-template-columns: repeat(8, 1fr); gap: 12px; }
.sg-icons span { display: grid; justify-items: center; gap: 10px; padding: 18px 6px 14px; border-radius: var(--r-sm); background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); font-size: 12px; color: var(--muted); }
.sg-icons .ic { width: 22px; height: 22px; color: var(--text); }
.sg-foot { border-radius: var(--r-lg); box-shadow: inset 0 0 0 1px var(--line); padding: 40px 32px 28px; }
.sg-foot .foot__bot { margin-top: 40px; }

/* ── 6 · Motion ── */
.sg-ease { display: grid; gap: 14px; }
.sg-ease__row { display: grid; grid-template-columns: 220px minmax(0, 1fr); align-items: center; gap: 24px; }
.sg-ease__track { position: relative; height: 36px; border-radius: var(--r-pill); background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); }
.sg-ease__track i { position: absolute; top: 9px; left: 10px; width: 18px; height: 18px; border-radius: 50%; background: var(--tint); animation: sg-slide 3.2s var(--e, var(--ease)) infinite alternate; }
.sg-ease__track--accent i { background: var(--accent); }
@keyframes sg-slide { to { left: calc(100% - 28px); } }
.static .sg-ease__track i { left: calc(100% - 28px); }
.sg-lit { max-width: 640px; }
.sg-lit p { font: 400 24px/1.45 var(--font-display); letter-spacing: -.02em; color: var(--text); }
.sg-motion-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.sg-motion-grid > div { display: grid; gap: 10px; align-content: start; padding: 24px; border-radius: var(--r); background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); }
.sg-motion-grid p { font-size: 15px; color: var(--text-2); }

/* ── Responsive ── */
@media (max-width: 1100px) {
  .sg-board { grid-template-columns: 1fr 1fr; grid-template-rows: 460px auto auto; }
  .sg-board__plate { grid-column: 1 / -1; grid-row: auto; }
  .sg-swatches { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .sg-sw--wide { grid-column: span 2; }
  .sg-parts { grid-template-columns: 1fr 1fr; }
  .sg-cta .cta__win { margin-right: 0; }
}
@media (max-width: 900px) {
  .sg-hero__top { grid-template-columns: 1fr; }
  .sg-board { grid-template-columns: 1fr; grid-template-rows: auto; }
  .sg-board__plate { height: 440px; }
  .sg-board__win { inset: 24px 16px auto; }
  .sg-trow, .sg-space__row, .sg-ease__row { grid-template-columns: 1fr; gap: 10px; }
  .sg-sub { flex-direction: column; align-items: flex-start; gap: 6px; }
  .sg-shape { grid-template-columns: repeat(3, 1fr); }
  .sg-depth, .sg-icards, .sg-ncards, .sg-motion-grid { grid-template-columns: 1fr; }
  .sg-parts { grid-template-columns: 1fr; }
  .sg-part--wide { grid-column: auto; }
  .sg-faq .faq { grid-template-columns: 1fr; }
  .sg-posts { grid-template-columns: 1fr; }
  .sg-icons { grid-template-columns: repeat(4, 1fr); }
  .sg-plate-demo .mk-win { inset: 32px 16px auto; }
  .sg-cta { padding: 40px 24px; }
}
@media (max-width: 560px) {
  .sg-sec { padding-top: 96px; }
  .sg-hero { padding-top: 112px; }
  .sg-swatches { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sg-sw--wide { grid-column: 1 / -1; }
  .sg-dots { grid-template-columns: repeat(4, 1fr); }
  .sg-ladder { grid-template-columns: repeat(3, 1fr); row-gap: 12px; }
  .sg-aa .t-display { font-size: 96px; }
  .sg-trow .t-display { font-size: 88px; }
  .sg-shape { grid-template-columns: 1fr 1fr; }
  .sg-strip { padding: 16px; }
  .sg-strip__sep { display: none; }
  .sg-board__plate { height: 480px; }
  .sg-ncards .ncard { height: 460px; }
  .sg-ncards .stats4 { grid-template-columns: 1fr; }
  .sg-panel { padding: 20px; }
  .sg-foot { padding: 28px 20px; }
}

/* ───────── Variants ───────── */
/* Ombra variants library (v-). Loads after mockups.css. Tokens only. */

.v-defs { position: absolute; width: 0; height: 0; overflow: hidden; }

/* ── Intro + jump list ── */
.v-intro { padding: 176px 0 64px; background: linear-gradient(180deg, var(--sky-1), var(--bg) 70%); }
.v-intro__in { display: grid; gap: 24px; justify-items: start; max-width: 860px; }
.v-intro .t-lead { max-width: 640px; }
.v-jump { display: grid; gap: 10px; margin-top: 16px; width: 100%; }
.v-jump li { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.v-jump span { width: 112px; font: 500 13px/1 var(--font); color: var(--muted); }
.v-jump a { display: inline-flex; align-items: center; height: 28px; padding: 0 10px; border-radius: var(--r-pill); box-shadow: inset 0 0 0 1px var(--line); font: 500 13px/1 var(--mono); color: var(--text-2); transition: background-color .25s var(--ease), color .25s var(--ease); }
.v-jump a:hover { background: rgba(255,255,255,.07); color: var(--text); }

/* ── Group heads + labels ── */
.v-group { padding: 160px 0 24px; }
.v-group__in { display: grid; gap: 20px; justify-items: start; padding-bottom: 32px; border-bottom: 1px solid var(--line); }
.v-item { padding: 72px 0 96px; position: relative; }
.v-item--flush { padding-bottom: 0; }
.v-label { display: grid; grid-template-columns: auto 1fr; gap: 8px 20px; align-items: baseline; margin-bottom: 40px; }
.v-label__name { font: 500 15px/1.3 var(--font); color: var(--text); }
.v-label__name b { font: 500 13px/1 var(--mono); color: var(--accent-ink); margin-right: 10px; }
.v-label__line { font-size: 14px; color: var(--text-2); }
.v-label__cls { grid-column: 1 / -1; font: 400 12px/1.6 var(--mono); color: var(--muted); word-break: break-word; }
.v-label__fit { grid-column: 1 / -1; font-size: 13px; color: var(--muted); }
.v-label__fit a { color: var(--text-2); text-decoration: underline; text-decoration-color: var(--line-2); text-underline-offset: 3px; }

/* ── Headers (demos are static inside a sky stage) ── */
.v-stage { position: relative; height: 240px; border-radius: var(--r-lg); overflow: hidden; background: linear-gradient(180deg, var(--sky-1) 0%, var(--sky-2) 62%, var(--sky-3) 100%); box-shadow: inset 0 0 0 1px var(--line); }
.v-stage__hint { position: absolute; left: 32px; bottom: 28px; display: grid; gap: 6px; }
.v-stage__hint b { font: 400 30px/1.15 var(--font-display); letter-spacing: -.04em; color: var(--tint); }
.v-stage__hint span { font-size: 14px; color: var(--text-2); }
.v-hd { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; height: 72px; padding: 0 28px; }
.v-hd .nav a { color: var(--text-nav); }
.v-hd__end { justify-self: end; display: flex; align-items: center; gap: 8px; }
.v-hd__in { font: 500 14px/1 var(--font); color: var(--text-nav); padding: 9px 12px; }
.v-hd__menu { display: none; justify-self: end; width: 44px; height: 44px; border-radius: 50%; background: rgba(255,255,255,.08); box-shadow: inset 0 0 0 1px var(--line); place-items: center; }
.v-hd__menu i { display: block; width: 16px; height: 1.5px; margin: 2px 0; border-radius: 2px; background: var(--text); }
.v-hd--b { display: flex; justify-content: space-between; gap: 16px; max-width: 760px; height: 60px; margin: 20px auto 0; padding: 0 8px 0 18px; border-radius: var(--r-pill); background: var(--glass); box-shadow: inset 0 0 0 1px var(--line-2), var(--shadow-1); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); }
.v-hd--b .v-hd__menu { width: 40px; height: 40px; }
.v-hd--c { grid-template-columns: 1fr auto 1fr; }
.v-hd--c .logo { justify-self: center; }
.v-hd--c .v-hd__end { justify-self: end; }
.v-hd--c .nav:first-child { justify-self: start; }
.v-strip { display: flex; justify-content: center; align-items: center; gap: 10px; height: 36px; padding: 0 16px; background: rgba(255,255,255,.06); box-shadow: inset 0 -1px 0 var(--line); font: 500 13px/1 var(--font); color: var(--text-2); white-space: nowrap; overflow: hidden; }
.v-strip a { display: inline-flex; align-items: center; gap: 4px; color: var(--text); }
.v-hd--d { grid-template-columns: auto 1fr auto; gap: 24px; }
.v-hd--d .nav { justify-self: end; }

/* ── Hero B: full-bleed landscape, copy bottom-left, floating action card bottom-right ── */
.v-hb { position: relative; min-height: 860px; display: flex; align-items: flex-end; padding: 160px 0 72px; overflow: hidden; }
.v-hb > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; }
.v-hb::after { content: ""; position: absolute; inset: 0; background: radial-gradient(60% 62% at 24% 76%, rgba(4,8,12,.88), rgba(4,8,12,0) 100%), linear-gradient(180deg, rgba(0,0,0,.5) 0%, rgba(0,0,0,0) 26%, rgba(4,8,12,.2) 46%, rgba(4,8,12,.88) 100%); }
.v-hb__in { position: relative; z-index: 2; display: grid; grid-template-columns: minmax(0, 600px) minmax(0, 360px); justify-content: space-between; align-items: end; gap: 48px; }
.v-hb__copy { display: grid; gap: 24px; justify-items: start; }
.v-hb__copy .t-lead { max-width: 460px; color: var(--tint); }
.v-hb__copy .chip, .v-cb .chip, .v-scard .chip { color: var(--text); text-shadow: 0 1px 12px rgba(5,7,11,.8); }
.v-hb__card { padding: 16px; display: grid; gap: 12px; }
.v-hb__card .agent__meta { color: var(--muted-on-glass); }

/* ── Hero C: statement only, three small windows in a row on a plate ── */
.v-hc { padding: 168px 0 0; background: linear-gradient(180deg, var(--sky-1), var(--bg) 60%); }
.v-hc__copy { display: grid; gap: 28px; justify-items: center; text-align: center; max-width: 900px; margin: 0 auto 80px; }
.v-hc__copy .t-h1 { font-size: 72px; line-height: 1.06; }
.v-hc__copy .t-lead { max-width: 520px; }
.v-hc__plate { min-height: 520px; display: grid; align-items: center; padding: 64px 48px; }
.v-hc__plate > img.plate__img { object-position: 50% 70%; }
.v-hc__row { position: relative; z-index: 2; display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; align-items: start; }
.v-hc__row .mk-win { padding: 16px; display: grid; gap: 12px; }
.v-hc__row .mk-win:nth-child(2) { margin-top: 48px; }
.v-hc__head { display: flex; align-items: center; gap: 8px; font-weight: 500; color: var(--text); }
.v-two { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

/* ── Hero D: split reversed, window on a plate left, copy + stats right ── */
.v-hd2 { padding: 168px 0 120px; background: linear-gradient(180deg, var(--sky-1), var(--bg) 70%); }
.v-hd2__grid { display: grid; grid-template-columns: minmax(0, 560px) minmax(0, 460px); justify-content: space-between; align-items: center; gap: 56px; }
.v-hd2__plate { min-height: 600px; display: grid; align-items: center; padding: 48px 40px; }
.v-hd2__plate .mk-win { padding: 18px; display: grid; gap: 12px; }
.v-hd2__copy { display: grid; gap: 26px; justify-items: start; }
.v-hd2__stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; width: 100%; margin-top: 16px; padding-top: 28px; border-top: 1px solid var(--line); }
.v-hd2__stats b { display: block; font: 400 34px/1 var(--font-display); letter-spacing: -.05em; color: var(--tint); margin-bottom: 8px; }
.v-hd2__stats span { font-size: 14px; color: var(--text-2); }
.v-note { display: grid; gap: 8px; padding: 12px 14px; border-radius: 12px; background: var(--glass-2); box-shadow: inset 0 0 0 1px var(--line); }
.v-note b { color: var(--text); font-weight: 500; }

/* ── Features B: bento of mk tiles ── */
.v-bento { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.v-tile { display: grid; grid-template-rows: 1fr auto; min-height: 420px; border-radius: var(--r-lg); background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); overflow: hidden; }
.v-tile--wide { grid-column: span 2; }
.v-tile__art { position: relative; display: grid; align-items: center; padding: 28px; overflow: hidden; }
.v-tile__art > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.v-tile__art .mk-win { padding: 16px; display: grid; gap: 12px; }
.v-tile__txt { display: grid; gap: 8px; padding: 4px 28px 28px; }
.v-tile__txt p { font-size: 15px; color: var(--text-2); max-width: 420px; }
.v-tile--photo .v-tile__art .mk-win { max-width: 440px; }

/* ── Features C: alternating rows ── */
.v-rows { display: grid; gap: 24px; }
.v-row { display: grid; grid-template-columns: minmax(0, 400px) minmax(0, 600px); justify-content: space-between; align-items: center; gap: 48px; }
.v-row--flip .v-row__copy { order: 2; }
.v-row__copy { display: grid; gap: 18px; justify-items: start; }
.v-row__copy p { color: var(--text-2); }
.v-row__media { min-height: 460px; display: grid; align-items: center; padding: 48px; }
.v-row__media .mk-win { padding: 18px; display: grid; gap: 12px; }

/* ── Proof A: quote card + logo wall ── */
.v-pa { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 480px); gap: 16px; }
.v-pa__quote { display: grid; align-content: space-between; gap: 40px; padding: 40px; border-radius: var(--r-lg); background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); }
.v-pa__quote blockquote p { font: 400 24px/1.42 var(--font-display); letter-spacing: -.03em; color: var(--text); }
.v-pa__who { display: flex; align-items: center; gap: 14px; }
.v-pa__who img { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; }
.v-pa__who b { display: block; color: var(--text); font-weight: 500; }
.v-pa__who span { font-size: 14px; color: var(--muted); }
.v-wall { display: grid; grid-template-columns: repeat(2, 1fr); border-radius: var(--r-lg); box-shadow: inset 0 0 0 1px var(--line); overflow: hidden; }
.v-wall > div { display: grid; place-items: center; min-height: 128px; box-shadow: 0 0 0 .5px var(--line); }
.v-wall svg { height: 24px; width: auto; color: var(--text-2); }

/* ── Proof B: metrics band of giant number cards ── */
.v-metrics { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.v-metric { display: grid; align-content: space-between; gap: 48px; min-height: 300px; padding: 28px; border-radius: var(--r-lg); background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); }
.v-metric b { font: 400 76px/1 var(--font-display); letter-spacing: -.06em; color: var(--tint); }
.v-metric p { font-size: 15px; color: var(--text-2); max-width: 220px; }
.v-metric .tag { justify-self: start; }

/* ── Pricing B: table first ── */
.v-table-wrap { border-radius: var(--r-lg); box-shadow: inset 0 0 0 1px var(--line); overflow-x: auto; }
.v-table { width: 100%; min-width: 640px; border-collapse: collapse; font-size: 15px; }
.v-table th, .v-table td { padding: 16px 24px; text-align: left; border-bottom: 1px solid var(--line); }
.v-table thead th { vertical-align: bottom; padding-top: 28px; padding-bottom: 24px; font-weight: 500; color: var(--text); }
.v-table thead th .plan__name { display: block; margin-bottom: 12px; }
.v-table thead th b { display: block; font: 400 34px/1 var(--font-display); letter-spacing: -.05em; color: var(--tint); margin-bottom: 4px; }
.v-table thead th small { display: block; font-size: 13px; color: var(--muted); font-weight: 400; margin-bottom: 16px; }
.v-table tbody th { font-weight: 400; color: var(--text-2); }
.v-table td { color: var(--text); }
.v-table td .ic { width: 16px; height: 16px; }
.v-table .is-pop { background: rgba(255,255,255,.04); }
.v-table tbody tr:last-child th, .v-table tbody tr:last-child td { border-bottom: 0; }
.v-dash { color: var(--muted); }

/* ── CTA B: full-bleed photo band ── */
.v-cb { position: relative; min-height: 640px; display: grid; place-items: center; padding: 120px 0; overflow: hidden; text-align: center; }
.v-cb > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 45%; }
.v-cb::after { content: ""; position: absolute; inset: 0; background: radial-gradient(60% 64% at 50% 50%, rgba(4,8,12,.82), rgba(4,8,12,.4) 100%); }
.v-cb__in { position: relative; z-index: 2; display: grid; gap: 24px; justify-items: center; max-width: 640px; }
.v-cb__in p { color: var(--tint); max-width: 460px; }

/* ── CTA C: inset card on a plate with an email form ── */
.v-cc { min-height: 600px; display: grid; place-items: center; padding: 64px 24px; }
.v-cc > img.plate__img { object-position: 50% 80%; }
.v-cc__card { position: relative; z-index: 2; display: grid; gap: 20px; justify-items: start; width: 100%; max-width: 520px; padding: 40px; border-radius: var(--r-lg); background: var(--glass); box-shadow: inset 0 0 0 1px var(--line-2), var(--shadow-2); backdrop-filter: blur(22px); -webkit-backdrop-filter: blur(22px); }
.v-cc__card p { color: var(--text-2); }
.v-form { display: flex; gap: 8px; width: 100%; padding: 6px; border-radius: var(--r-pill); background: rgba(0,0,0,.35); box-shadow: inset 0 0 0 1px var(--line-2); }
.v-form input { flex: 1; min-width: 0; height: 44px; padding: 0 16px; border: 0; background: none; font: 400 15px/1 var(--font); color: var(--text); }
.v-form input::placeholder { color: var(--muted); }
.v-form input:focus { outline: none; }
.v-form:focus-within { box-shadow: inset 0 0 0 1px var(--accent); }
.v-form .btn { height: 44px; }
.v-cc__fine { font-size: 13px; color: var(--muted); }

/* ── CTA D: one line + button on black ── */
.v-cd { display: flex; justify-content: space-between; align-items: center; gap: 32px; padding: 56px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }

/* ── Footers ── */
.v-foot-b { padding: 80px 0 0; border-top: 1px solid var(--line); overflow: hidden; }
.v-foot-b__top { display: grid; grid-template-columns: 1fr repeat(3, 160px); gap: 32px; }
.v-foot-b .foot__brand { justify-items: start; }
.v-foot-b__word { margin-top: 72px; font: 500 clamp(96px, 20vw, 288px)/.78 var(--font-display); letter-spacing: -.07em; color: var(--surface-3); white-space: nowrap; text-align: center; transform: translateY(14%); user-select: none; }
.v-foot-b__bot { display: flex; justify-content: space-between; gap: 24px; padding-top: 28px; border-top: 1px solid var(--line); font-size: 13.5px; color: var(--muted); margin-top: 64px; }
.v-foot-c { position: relative; padding-top: 360px; overflow: hidden; }
.v-foot-c > img { position: absolute; inset: 0 0 auto; width: 100%; height: 640px; object-fit: cover; object-position: 50% 60%; -webkit-mask-image: linear-gradient(180deg, #000 30%, transparent 100%); mask-image: linear-gradient(180deg, #000 30%, transparent 100%); }
.v-foot-c::before { content: ""; position: absolute; inset: 0 0 auto; height: 640px; background: linear-gradient(180deg, rgba(4,8,12,.6), rgba(4,8,12,.55) 40%, var(--bg) 100%); z-index: 1; }
.v-foot-c__in { position: relative; z-index: 2; }
.v-foot-c__line { display: flex; justify-content: space-between; align-items: end; gap: 32px; padding-bottom: 64px; }
.v-foot-c__line .t-h2 { max-width: 560px; }
.v-foot-c .foot__top { padding-top: 56px; border-top: 1px solid var(--line); }
.v-foot-c .foot { border-top: 0; padding-top: 0; }
.v-foot-d { display: grid; grid-template-columns: auto minmax(0, 360px) auto; align-items: center; gap: 32px; padding: 40px 0; border-top: 1px solid var(--line); }
.v-foot-d .v-form { padding: 4px; }
.v-foot-d .v-form input { height: 38px; font-size: 14px; }
.v-foot-d .v-form .btn { height: 38px; }
.v-foot-d__links { display: flex; flex-wrap: wrap; gap: 4px 20px; justify-content: end; font-size: 14px; color: var(--text-2); }
.v-foot-d__links a { transition: color .3s var(--ease), border-color .3s var(--ease); }
.v-foot-d__links a:hover { color: var(--text); }
.v-foot-d__legal { grid-column: 1 / -1; display: flex; justify-content: space-between; gap: 16px; padding-top: 24px; border-top: 1px solid var(--line); font-size: 13px; color: var(--muted); }

/* ── Signature B: full-photo sticky cards ── */
.v-stack { display: grid; gap: 24px; }
.v-scard { position: sticky; top: 112px; min-height: 560px; border-radius: var(--r-lg); overflow: hidden; box-shadow: inset 0 0 0 1px var(--line), 0 -24px 48px rgba(0,0,0,.6); display: grid; grid-template-columns: minmax(0, 420px) minmax(0, 440px); justify-content: space-between; align-items: end; gap: 32px; padding: 40px; }
.v-scard:nth-child(2) { top: 136px; } .v-scard:nth-child(3) { top: 160px; }
.v-scard > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.v-scard::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(4,8,12,.9) 0%, rgba(4,8,12,.72) 50%, rgba(4,8,12,.3) 100%); }
.v-scard__txt { position: relative; z-index: 2; display: grid; gap: 18px; justify-items: start; }
.v-scard__txt p { color: var(--tint); max-width: 380px; }
.v-scard .mk-win { z-index: 2; padding: 18px; display: grid; gap: 12px; align-self: start; }

/* ── Numbers B: three shorter photo cards, figure at the foot ── */
.v-nums { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.v-ncard { position: relative; height: 520px; border-radius: var(--r-lg); overflow: hidden; box-shadow: inset 0 0 0 1px var(--line); display: grid; align-content: space-between; padding: 28px; }
.v-ncard > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.v-ncard::after { content: ""; position: absolute; inset: auto 0 0; height: 62%; background: linear-gradient(0deg, rgba(4,8,12,.9) 0%, rgba(4,8,12,.6) 50%, rgba(4,8,12,0)); }
.v-ncard .ncard__pill { position: relative; left: auto; bottom: auto; z-index: 2; justify-self: start; }
.v-ncard__foot { position: relative; z-index: 2; display: grid; gap: 10px; }
.v-ncard__foot b { font: 400 96px/1 var(--font-display); letter-spacing: -.065em; color: var(--tint); }
.v-ncard__foot p { font-size: 15px; color: var(--text); max-width: 260px; }

/* Windows on bright plates in this library get a denser glass so captions keep 4.5:1 */
.v-item .mk-win { background: rgba(14,16,19,.94); }

/* ── Responsive ── */
@media (max-width: 1100px) {
  .v-hb__in, .v-hd2__grid { grid-template-columns: 1fr; }
  .v-hb__card { max-width: 420px; }
  .v-hd2__copy { order: -1; }
  .v-hc__copy .t-h1 { font-size: 58px; }
  .v-row { grid-template-columns: 1fr 1fr; }
  .v-pa { grid-template-columns: 1fr; }
  .v-metrics { grid-template-columns: 1fr 1fr; }
  .v-scard { grid-template-columns: 1fr; position: relative; top: auto !important; }
  .v-scard::after { background: rgba(4,8,12,.74); }
  .v-foot-c__line { flex-direction: column; align-items: flex-start; }
  .v-foot-d { grid-template-columns: 1fr 1fr; }
  .v-foot-d__links { grid-column: 1 / -1; justify-content: start; }
}
@media (max-width: 900px) {
  .v-hd .nav, .v-hd__end > .btn, .v-hd__in { display: none; }
  .v-hd__menu { display: grid; }
  .v-hd, .v-hd--c, .v-hd--d { grid-template-columns: 1fr auto; }
  .v-hd--c .logo { justify-self: start; }
  .v-hd--c .v-hd__end { grid-column: 2; }
  .v-hd--b { margin: 16px 16px 0; }
  .v-hc__row { grid-template-columns: 1fr; max-width: 440px; margin: 0 auto; width: 100%; }
  .v-hc__row .mk-win:nth-child(2) { margin-top: 0; }
  .v-hc__plate { padding: 40px 20px; }
  .v-bento { grid-template-columns: 1fr; }
  .v-tile--wide { grid-column: auto; }
  .v-row { grid-template-columns: 1fr; }
  .v-row--flip .v-row__copy { order: 0; }
  .v-nums { grid-template-columns: 1fr; }
  .v-ncard { height: 440px; }
  .v-cd { flex-direction: column; align-items: flex-start; }
  .v-foot-b__top { grid-template-columns: 1fr 1fr; }
  .v-foot-b__top > :first-child { grid-column: 1 / -1; }
}
@media (max-width: 560px) {
  .v-label { grid-template-columns: 1fr; }
  .v-jump span { width: 100%; }
  .v-stage { height: 280px; }
  .v-hd { padding: 0 16px; }
  .v-stage__hint { left: 20px; right: 20px; }
  .v-stage__hint b { font-size: 24px; }
  .v-strip { font-size: 12px; justify-content: flex-start; }
  .v-hb { min-height: 0; padding-top: 280px; }
  .v-hc__copy .t-h1 { font-size: 40px; }
  .v-hc__copy { margin-bottom: 48px; }
  .v-hd2__plate { min-height: 0; padding: 24px 16px; }
  .v-hd2__stats { grid-template-columns: 1fr 1fr; }
  .v-row__media { min-height: 0; padding: 24px 16px; }
  .v-tile__art { padding: 20px 16px; }
  .v-tile__txt { padding: 4px 20px 24px; }
  .v-pa__quote { padding: 28px 24px; }
  .v-pa__quote blockquote p { font-size: 20px; }
  .v-metrics { grid-template-columns: 1fr; }
  .v-metric { min-height: 0; }
  .v-metric b { font-size: 64px; }
  .v-cc__card { padding: 28px 22px; }
  .v-form { flex-direction: column; border-radius: var(--r); }
  .v-form .btn { width: 100%; }
  .v-scard { padding: 24px 16px; min-height: 0; }
  .v-ncard__foot b { font-size: 80px; }
  .v-foot-c { padding-top: 240px; }
  .v-foot-d { grid-template-columns: 1fr; }
  .v-foot-d__legal, .v-foot-b__bot { flex-direction: column; }
}

/* Film grain over the whole page (blue-black canvas). Decorative, never blocks clicks. */
body::after { content: ""; position: fixed; inset: 0; z-index: 90; pointer-events: none; opacity: var(--grain-opacity); mix-blend-mode: screen; background-image: url("assets/art/grain.svg"); background-size: 160px 160px; }
.static body::after { opacity: var(--grain-opacity); }

/* Field note: a small glass caption on a landscape photo — the hour and what the photo shows */
.plate-note { position: absolute; z-index: 2; left: 20px; bottom: 20px; display: inline-flex; align-items: center; gap: 8px; height: 28px; padding: 0 12px; border-radius: var(--r-pill); background: rgba(5, 7, 11, .58); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: inset 0 0 0 1px var(--line-2); font: 500 13px/1 var(--font); color: var(--text); white-space: nowrap; pointer-events: none; }
.plate-note b { font-weight: 500; color: var(--tint); font-variant-numeric: tabular-nums; }
.plate-note--right { left: auto; right: 20px; }
.hero__photo .plate-note--right, .cta__strip .plate-note--right, .nf .plate-note--right { right: max(24px, calc((100% - var(--container)) / 2)); }
.hero__photo .plate-note { bottom: 96px; }

/* Tide lines (integrations): tools sit on three soft wave lines that meet at the product mark */
.tide { position: relative; height: 380px; max-width: 1000px; margin: 0 auto; }
.tide svg.tide__lines { color: var(--tint); position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.tide__lines path { fill: none; stroke: var(--line-2); stroke-width: 1; }
.tide__lines path.tide__out { stroke: url(#tideFade); stroke-width: 1.5; }
@media (max-width: 560px) { .tide { height: 260px; } }
.srow { isolation: isolate; }
.v-hb__copy .chip { padding: 5px 12px 5px 10px; border-radius: var(--r-pill); background: rgba(5, 7, 11, .55); }

/* ── Restructure (originality pass, Farhan 2026-10-14) ── */
/* Features: numbered steps (vertical tabs) beside the photo plate */
.feat { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 24px; align-items: stretch; }
.steps { display: grid; align-content: start; gap: 4px; }
.steps button { position: relative; display: grid; grid-template-columns: 36px 1fr; column-gap: 8px; row-gap: 6px; text-align: left; padding: 20px 20px 20px 18px; border-radius: var(--r); color: var(--muted); transition: background-color .3s var(--ease), color .3s var(--ease); }
.steps button > b { grid-column: 2; font: 500 17px/1.3 var(--font); letter-spacing: -.01em; color: var(--text-2); transition: color .3s var(--ease); }
.steps button > span:not(.steps__n) { grid-column: 2; font-size: 14px; line-height: 1.45; color: var(--muted); }
.steps__n { grid-row: 1 / span 2; font: 500 13px/1.7 var(--font); font-variant-numeric: tabular-nums; color: var(--muted); }
.steps button:hover > b { color: var(--text); }
.steps button[aria-selected="true"] { background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); }
.steps button[aria-selected="true"] > b { color: var(--text); }
.steps button[aria-selected="true"] .steps__n { color: var(--accent-ink); }
.steps button[aria-selected="true"]::before { content: ""; position: absolute; left: 0; top: 18%; bottom: 18%; width: 1px; background: linear-gradient(180deg, rgba(238,244,246,0), var(--accent-ink), rgba(238,244,246,0)); }
.feat .feat__plate { height: 520px; }
.feat .mk-win.feat__app { inset: 72px 96px; grid-template-columns: 170px 1fr; }
@media (max-width: 1100px) { .feat { grid-template-columns: 1fr; } .steps { grid-auto-flow: column; grid-auto-columns: minmax(220px, 1fr); overflow-x: auto; } .feat .mk-win.feat__app { inset: 32px; } }
@media (max-width: 900px) { .feat .mk-win.feat__app { inset: 24px 16px; } .steps button > span:not(.steps__n) { display: none; } .steps { grid-auto-columns: minmax(140px, 1fr); } }

/* Why: one wide card + four in a 3-column grid (no carousel) */
.icards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.icards .icard { min-height: 420px; }
.icard--wide { grid-column: span 2; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr; }
.icard--wide .icard__txt { align-self: end; padding: 32px; }
.icard--wide .icard__txt h3 { font-size: 24px; letter-spacing: -.03em; }
@media (max-width: 900px) { .icards { grid-template-columns: 1fr 1fr; } .icard--wide { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .icards { grid-template-columns: 1fr; } .icard--wide { grid-column: auto; } }

/* Stacked rows: photo wider than text, a step number on the text side */
.srow { grid-template-columns: 5fr 7fr; }
.srow--flip { grid-template-columns: 7fr 5fr; }
.srow__txt { position: relative; }
.srow__n { position: absolute; top: 40px; right: 40px; font: 400 34px/1 var(--font-display); letter-spacing: -.05em; color: var(--muted); font-variant-numeric: tabular-nums; }
@media (max-width: 1100px) { .srow, .srow--flip { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .srow__n { top: 28px; right: 24px; font-size: 24px; } }

/* Pricing: one billing switch in the head, equal cards; Team marked by the horizon edge, not raised */
.head__side--row { display: flex; align-items: center; gap: 24px; justify-self: end; }
.plans { gap: 16px; }
.plan--pop { margin: 0; padding: 32px 28px; position: relative; background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--line-2); }
.plan--pop::before { content: ""; position: absolute; top: 0; left: 10%; right: 10%; height: 1px; background: var(--horizon); }

/* FAQ: groups on top, accordion left, help card right */
.faq--flip { grid-template-columns: minmax(0, 1fr) 300px; grid-template-areas: "cats cats" "qa help"; row-gap: 24px; }
.faq--flip .faq__aside { display: contents; }
.faq--flip .faq__cats { grid-area: cats; grid-auto-flow: column; justify-content: start; }
.faq--flip .qa { grid-area: qa; }
.faq--flip .help { grid-area: help; align-self: start; position: sticky; top: 112px; }
@media (max-width: 900px) { .faq--flip { grid-template-columns: 1fr; grid-template-areas: "cats" "qa"; } }

.feat__nav { display: flex; flex-direction: column; gap: 24px; }
.feat__proof { margin-top: auto; display: grid; gap: 6px; padding: 20px 20px 4px 18px; border-top: 1px solid var(--line); }
.feat__proof b { font: 400 34px/1 var(--font-display); letter-spacing: -.05em; color: var(--tint); }
.feat__proof span { font-size: 14px; line-height: 1.45; color: var(--text-2); max-width: 240px; }
@media (max-width: 1100px) { .feat__proof { display: none; } }
.feat > *, .feat__nav { min-width: 0; }
@media (max-width: 560px) { .steps { grid-auto-flow: row; grid-template-columns: 1fr 1fr; overflow: visible; } .steps button { padding: 14px 12px; grid-template-columns: 28px 1fr; } }
.feat__main { min-width: 0; }
.steps button { padding-top: 16px; padding-bottom: 16px; }
.feat__nav { gap: 16px; }

/* hero-b: the photo melts into the page — no hard edge into the next section (Farhan 2026-10-14) */
.v-hb > img { -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 58%, transparent 100%); mask-image: linear-gradient(180deg, #000 0%, #000 58%, transparent 100%); }
.v-hb { background: var(--bg); }
.v-hb::before { content: ""; position: absolute; inset: auto 0 0; height: 34%; z-index: 1; pointer-events: none; background: linear-gradient(180deg, rgba(5, 7, 11, 0) 0%, var(--bg) 100%); }

/* Results on the horizon (replaces two tall offset photo cards): one wide plate, both figures stand on a hairline drawn
   across the photo, captions in two columns under it. */
.horizon { position: relative; height: 620px; border-radius: var(--r-lg); overflow: hidden; box-shadow: inset 0 0 0 1px var(--line); isolation: isolate; }
.horizon__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 62%; z-index: -2; }
.horizon::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(180deg, rgba(5, 7, 11, .1) 0%, rgba(5, 7, 11, 0) 28%, rgba(5, 7, 11, .45) 52%, rgba(5, 7, 11, .82) 100%); }
.horizon__grid { position: absolute; inset: auto 0 0; display: grid; grid-template-columns: 1fr 1fr; grid-template-areas: "n1 n2" "line line" "c1 c2"; column-gap: 48px; padding: 0 48px 44px; }
.horizon__n { margin: 0 0 18px; line-height: .9; }
.horizon__n:nth-child(1) { grid-area: n1; } .horizon__n:nth-child(2) { grid-area: n2; }
.horizon__n span { color: var(--tint); }
.horizon__line { grid-area: line; height: 1px; background: linear-gradient(90deg, rgba(238,244,246,.08), var(--accent-ink) 30%, var(--tint) 55%, rgba(238,244,246,.08)); }
.horizon__cap { display: grid; gap: 12px; justify-items: start; padding-top: 22px; }
.horizon__cap:nth-of-type(1) { grid-area: c1; } .horizon__cap:nth-of-type(2) { grid-area: c2; padding-left: 48px; margin-left: -48px; box-shadow: inset 1px 0 0 var(--line-2); }
.horizon__cap p { max-width: 300px; font-size: 15px; line-height: 1.5; color: var(--text); }
.horizon__pill { display: inline-flex; align-items: center; gap: 8px; height: 28px; padding: 0 12px; border-radius: var(--r-pill); background: rgba(5, 7, 11, .55); box-shadow: inset 0 0 0 1px var(--line-2); font: 500 13px/1 var(--font); color: var(--text); }
.horizon__pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
.plate-note--top { top: 20px; bottom: auto; left: 20px; }
@media (max-width: 900px) {
  .horizon { height: auto; min-height: 640px; }
  .horizon__grid { grid-template-columns: 1fr; grid-template-areas: "n1" "c1" "n2" "c2"; row-gap: 0; padding: 0 24px 28px; }
  .horizon__line { display: none; }
  .horizon__cap { padding: 14px 0 28px; border-top: 1px solid var(--line-2); }
  .horizon__cap:nth-of-type(2) { padding-left: 0; margin-left: 0; box-shadow: none; padding-bottom: 0; }
  .horizon__n { margin: 0 0 14px; }
}
@media (max-width: 900px) {
  .horizon { min-height: 0; background: var(--surface); }
  .horizon__img { position: relative; display: block; height: 260px; z-index: 0; }
  .horizon::after { inset: 0 0 auto; height: 260px; background: linear-gradient(180deg, rgba(5,7,11,0) 55%, var(--surface) 100%); }
  .horizon__grid { position: relative; padding-top: 8px; }
  .horizon .plate-note--top { z-index: 1; }
}