/* Plumo components. Load after tokens.css and mockups.css.
   White page · navy ink (#03294A) · Vend Sans SemiBold headlines with tight tracking · Inter (display optical size) body ·
   soft pink→lime rainbow chips · four pastel fields (lilac, pink, lime, mint) · cream bands inset 32px with 24px corners ·
   ink pill buttons with a lilac inner glint. */

/* ── base ── */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 24px; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 400 16px/1.7 var(--font); font-variation-settings: "opsz" 32; -webkit-font-smoothing: antialiased; overflow-x: clip; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4, h5, p, figure, blockquote, ul, ol, dl { margin: 0; }
ul, ol { padding: 0; list-style: none; }
h1, h2, h3, h4, h5 { color: var(--ink); text-wrap: balance; font-family: var(--font-display); font-weight: 600; }
p { text-wrap: pretty; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
:focus-visible { outline: 2px solid var(--lilac-2); 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: 99; top: 12px; left: 12px; width: auto; height: auto; clip: auto; background: #fff; padding: 10px 16px; border-radius: 10px; }

.wrap { width: min(var(--container), 100% - 2 * var(--gutter)); margin-inline: auto; }
.band { width: min(var(--band), 100% - 2 * var(--gutter)); margin-inline: auto; border-radius: var(--r-lg); }
.band--cream { background: var(--paper); }
.band--soft { background: var(--paper-soft); }
.section { margin-top: var(--section); }
.muted { color: var(--text-2); }

/* ── chip: the rainbow pill with a sparkle ── */
.chip { display: inline-flex; align-items: center; gap: 4px; background: var(--grad-chip); border-radius: 20px; padding: 3px 12px 3px 10px; font: 500 14px/1.7 var(--font-display); color: var(--ink); white-space: nowrap; }
.chip svg { width: 18px; height: 18px; fill: var(--ink); flex: none; }
.chip--lg { font-size: 16px; padding: 4px 14px 4px 10px; }

/* ── buttons: ink pill with an inner lilac glint; outline pill; white pill ── */
.btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 56px; padding: 0 32px; border-radius: var(--r-pill); font: 500 16px/1.7 var(--font-display); white-space: nowrap; transition: background-color .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease); }
.btn svg { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.btn--ink { background: var(--accent); color: var(--on-accent); box-shadow: var(--btn-inset); }
.btn--ink:hover { background: var(--accent-hover); }
.btn--line { background: #fff; color: var(--ink); border: 2px solid var(--ink); }
.btn--line:hover { background: var(--paper); }
.btn--white { background: #fff; color: var(--ink); }
.btn--white:hover { background: var(--paper-2); }
.btn--sm { min-height: 48px; padding: 0 24px; }
.btn__ico { width: 24px; height: 24px; border-radius: 6px; background: rgba(255,255,255,.18); display: grid; place-items: center; margin-left: -8px; }
.btn__ico svg { width: 16px; height: 16px; }

/* ── section head (chip · 60px headline · 18px lead) ── */
.shead { display: flex; flex-direction: column; align-items: center; gap: 16px; text-align: center; max-width: 664px; margin-inline: auto; }
.shead h2 { margin-top: 0; }
.shead p { max-width: 572px; color: var(--text-2); }
.shead--left { align-items: flex-start; text-align: left; margin-inline: 0; }

/* ── top marquee (lime ribbon) ── */
.ribbon { background: var(--lime); height: 52px; overflow: hidden; display: flex; align-items: center; }
.ribbon__track { display: flex; align-items: center; gap: 62px; padding-right: 62px; white-space: nowrap; font: 500 16px/1.7 var(--font-display); animation: ribbon 38s linear infinite; flex: none; }
.ribbon__track i { width: 16px; height: 16px; border-radius: 50%; background: var(--pink); flex: none; }
@keyframes ribbon { to { transform: translateX(-100%); } }
.ribbon:hover .ribbon__track { animation-play-state: paused; }

/* ── header A: translucent bar floating inside the hero card ── */
.site-head { position: relative; z-index: 20; }
.site-head__in { display: flex; align-items: center; justify-content: space-between; height: 80px; padding: 0 24px; border-radius: var(--r); background: rgba(255,255,255,.4); }
.logo { display: inline-flex; align-items: center; gap: 8px; font: 600 26px/1 var(--font-display); letter-spacing: -1px; color: var(--ink); }
.logo__mark { width: 34px; height: 34px; border-radius: 50%; background: var(--lilac-2); display: grid; place-items: center; flex: none; }
.logo__mark svg { width: 18px; height: 18px; fill: #fff; }
.nav { display: flex; align-items: center; gap: 6px; }
.nav a { font: 500 16px/1.7 var(--font-display); padding: 8px 16px; border-radius: var(--r-pill); color: rgba(3,41,74,.8); transition: color .3s var(--ease); }
.nav a:hover, .nav a[aria-current] { color: var(--ink); }
.site-head__end { display: flex; align-items: center; gap: 16px; }
.site-head__end > a:not(.btn) { font: 500 16px/1.7 var(--font-display); }
.menu-btn { display: none; width: 48px; height: 48px; border-radius: 50%; background: #fff; place-items: center; }
.menu-btn span { display: grid; gap: 5px; }
.menu-btn i { display: block; width: 18px; height: 2px; border-radius: 2px; background: var(--ink); }
.mnav { display: grid; gap: 4px; margin-top: 8px; padding: 12px; background: #fff; border-radius: var(--r); box-shadow: var(--shadow-2); }
.mnav[hidden] { display: none; }
.mnav a { padding: 12px 14px; border-radius: 12px; font: 500 17px/1.4 var(--font-display); }
.mnav .btn { margin-top: 6px; }

/* ── HERO A: centred headline on the soft rainbow glow, the app rising into the card ── */
.hero-wrap { padding: 13px 0 0; }
.hero { position: relative; width: min(var(--band), 100% - 2 * var(--gutter)); margin-inline: auto; height: 1048px; border-radius: var(--r-xl); overflow: hidden; isolation: isolate; }
.hero__glow { position: absolute; z-index: -3; left: 50%; bottom: 0; width: 1920px; max-width: none; height: 1132px; transform: translateX(-50%) rotate(180deg); pointer-events: none; }
.hero__grid { position: absolute; z-index: -2; left: 50%; top: 40px; width: 816px; height: 465px; transform: translateX(-50%); pointer-events: none;
  background-image: linear-gradient(#E2E2E2 1px, transparent 1px), linear-gradient(90deg, #E2E2E2 1px, transparent 1px); background-size: 40.2px 40.2px; background-position: 12px 12px;
  -webkit-mask: radial-gradient(closest-side, #000 0%, rgba(0,0,0,.45) 45%, transparent 100%); mask: radial-gradient(closest-side, #000 0%, rgba(0,0,0,.45) 45%, transparent 100%); }
.hero__dots { position: absolute; z-index: -1; left: 0; right: 0; bottom: 0; height: 500px; pointer-events: none;
  background-image: radial-gradient(circle, rgba(255,255,255,.95) 1.6px, transparent 1.9px); background-size: 15px 15px;
  -webkit-mask: linear-gradient(to bottom, transparent 0%, #000 55%); mask: linear-gradient(to bottom, transparent 0%, #000 55%); }
.hero .site-head { width: min(1258px, 100% - 48px); margin: 0 auto; }
.hero__copy { display: flex; flex-direction: column; align-items: center; gap: 24px; text-align: center; margin: 34px auto 0; max-width: 1040px; padding: 0 24px; }
.hero__badge { display: inline-flex; align-items: center; gap: 12px; background: #fff; border-radius: 20px; padding: 1px 16px 1px 1px; font: 400 14px/1.7 "Inter", sans-serif; }
.hero__badge .chip { font: 400 14px/1.7 var(--font); padding: 2px 12px 2px 6px; }
.hero__badge .chip svg { width: 14px; height: 14px; }
.hero h1 { max-width: 900px; }
.hero__lead { max-width: 466px; font: 400 18px/1.7 var(--font); font-variation-settings: "opsz" 32; }
.hero__ctas { display: flex; gap: 16px; flex-wrap: wrap; justify-content: center; }
.hero__ctas .btn--line { min-width: 212px; }
.hero__app { position: absolute; z-index: 0; left: 50%; top: 582px; width: 1018px; transform: translateX(-50%); border: 10px solid #fff; border-radius: var(--r); background: #fff; box-shadow: 0 30px 80px -40px rgba(3,41,74,.25); }
.hero__app .mk-app { border-radius: 8px; }
.social-tile { position: absolute; z-index: 2; width: 78px; height: 72px; border-radius: 27px; background: #fff; border: 4.5px solid var(--b, var(--pink)); box-shadow: 3.6px 5.4px 12.6px .9px #fff; display: grid; place-items: center; transform: rotate(var(--rot, 0deg)); }
.social-tile svg { width: 32px; height: 32px; fill: var(--ink); }
.social-tile--ig { left: 1162px; top: 480px; --rot: 12.2deg; --b: #FBC8DB; }
.social-tile--fb { left: 1181px; top: 624px; --rot: -16.7deg; --b: #F8D2D6; }
.social-tile--in { left: 56px; top: 552px; --rot: -16.7deg; --b: #EDF56C; }
.social-tile--x  { left: 111px; top: 646px; --rot: 12.2deg; --b: #EDF38B; }
.social-tile svg path { stroke: none; }

/* ── logo strip ── */
.logos { text-align: center; padding-top: 91px; }
.logos__title { font: 500 24px/1.6 var(--font-display); letter-spacing: -.5px; }
.logos__row { position: relative; margin-top: 32px; overflow: hidden; }
.logos__row::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, #fff 0%, rgba(255,255,255,0) 30%, rgba(255,255,255,0) 70%, #fff 100%); pointer-events: none; }
.logos__list { display: flex; justify-content: center; align-items: center; gap: 52px; padding: 16px 0; }
.logos__list img { height: 32px; width: auto; flex: none; }

/* ── about statement ── */
.statement { display: flex; flex-direction: column; align-items: center; gap: 24px; text-align: center; max-width: 1029px; margin-inline: auto; }
.statement p { font: 600 48px/1.2 var(--font-display); letter-spacing: -1px; color: var(--ink); }

/* ── tabs band ── */
.tabs-band { padding: var(--band-pad) 40px; }
.tabs { margin-top: var(--head-gap); }
.tabs__list { display: grid; grid-template-columns: repeat(4, 324px); }
.tab { text-align: left; height: 176px; padding: 40px 32px 0; border-radius: var(--r-lg) var(--r-lg) 0 0; transition: background-color .35s var(--ease); }
.tab:hover { background: rgba(248,240,233,.55); }
.tab[aria-selected="true"] { background: var(--paper-2); }
.tab b { display: block; font: 500 20px/1.5 var(--font-display); color: var(--ink); margin-bottom: 8px; }
.tab span { display: block; color: var(--text-2); max-width: 264px; }
.tabs__panel { position: relative; background: var(--paper-2); border-radius: 0 var(--r-lg) var(--r-lg) var(--r-lg); min-height: 530px; display: grid; grid-template-columns: 579px 1fr; align-items: center; gap: 109px; padding: 60px 60px 60px 60px; }
.tabs__panel[hidden] { display: none; }
.tabs__panel:not(:first-of-type) { border-radius: var(--r-lg); }
.tabs__copy { display: flex; flex-direction: column; gap: 40px; align-items: flex-start; }
.tabs__copy h3 { max-width: 582px; }
.tabs__copy p { max-width: 460px; margin-top: 16px; }
.tabs__visual { position: relative; width: 488px; height: 410px; justify-self: end; }
.tabs__visual .mk-glass { position: absolute; inset: 0; }
.tabs__visual .mk-glass__card { position: absolute; left: 50px; top: 57px; width: 388px; }
.tabs__visual .mk-post { position: absolute; left: -95px; top: 155px; z-index: 2; font-size: 15px; }

/* ── manage split (violet tile + stacked metric cards) ── */
.split { display: grid; grid-template-columns: 676px 1fr; gap: 80px; align-items: center; }
.split--flip { grid-template-columns: 1fr 676px; }
.split__copy { display: flex; flex-direction: column; gap: 60px; align-items: flex-start; }
.split__copy p { margin-top: 16px; max-width: 520px; color: var(--text-2); }
.stack-tile { position: relative; height: 560px; border-radius: var(--r-lg); background: var(--violet); overflow: hidden; display: grid; place-items: center; }
.stack-tile::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(circle, rgba(255,255,255,.28) 1.5px, transparent 1.8px); background-size: 14px 14px; -webkit-mask: linear-gradient(#000, rgba(0,0,0,.4)); mask: linear-gradient(#000, rgba(0,0,0,.4)); }
.stack { position: relative; width: 488px; height: 300px; margin-top: -20px; }
.stack__ghost { position: absolute; left: 50%; height: 120px; border-radius: 28px; background: #fff; border: 4px solid rgba(255,255,255,.7); box-shadow: 0 -4px 16px rgba(0,0,0,.05); transform: translateX(-50%); }
.stack__ghost:nth-child(1) { top: 0; width: 386px; opacity: .85; }
.stack__ghost:nth-child(2) { top: 34px; width: 418px; opacity: .92; }
.stack__ghost:nth-child(3) { top: 70px; width: 452px; }
.stack .mk-metric { position: absolute; left: 0; right: 0; top: 108px; background: #fff; border: 4px solid #E7E2FF; border-radius: 28px; padding: 24px 28px; box-shadow: 0 -4px 16px rgba(0,0,0,.05); }
.mk-metric__head { display: flex; justify-content: space-between; font: 500 17px/1.4 var(--font-display); }
.mk-metric__body { display: flex; justify-content: space-between; align-items: flex-end; margin-top: 30px; }
.mk-metric__num { font: 600 36px/1 var(--font-display); letter-spacing: -.5px; }
.mk-metric__num small { font: 500 14px/1 var(--font-display); letter-spacing: 0; margin-left: 4px; }
.mk-metric__note { text-align: right; font: 400 14px/1.45 var(--font); color: var(--text-2); }
.mk-metric__note b { display: block; color: var(--success-ink); font-weight: 500; }

/* ── feature bands (one pastel field each, text + composed mock-up) ── */
.fbands { display: grid; gap: 32px; margin-top: var(--head-gap); }
.fband { position: relative; min-height: 600px; border-radius: var(--r-lg); display: grid; grid-template-columns: 579px 1fr; align-items: center; gap: 60px; padding: 0 64px 0 80px; overflow: hidden; }
.fband--pink { background: var(--pink); } .fband--lime { background: var(--lime); } .fband--mint { background: var(--mint); } .fband--lilac { background: var(--lilac); }
.fband--flip { grid-template-columns: 1fr 579px; padding: 0 59px 0 80px; }
.fband--flip .fband__copy { order: 2; }
.fband__copy { display: flex; flex-direction: column; gap: 32px; align-items: flex-start; }
.fband__copy p { max-width: 450px; margin-top: 16px; }
.icon-tile { width: 56px; height: 56px; border-radius: var(--r-sm); background: #fff; display: grid; place-items: center; flex: none; }
.icon-tile svg { width: 24px; height: 24px; fill: none; stroke: var(--ink); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.fband__visual { position: relative; height: 500px; }

/* band 1: ad preview window + floating line chart */
.fv-ad { position: absolute; left: 0; top: 30px; width: 452px; }
.fv-ad .mk-ad { aspect-ratio: 418 / 222; font-size: 17px; }
.fv-ad__title { margin: 14px 0 2px; font: 500 20px/1.5 var(--font-display); color: var(--ink); }
.fv-ad__sub { font-size: 15px; color: var(--text-2); }
.fv-line { position: absolute; left: 290px; top: 380px; width: 296px; background: #fff; border-radius: 12px; padding: 14px 14px 10px; box-shadow: var(--shadow-2); }
/* band 2: two story ads + confirm card */
.fv-stories { position: absolute; left: 0; top: 10px; width: 488px; }
.fv-stories__row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.fv-stories .mk-ad { aspect-ratio: 211 / 368; font-size: 13px; }
.fv-confirm { position: absolute; left: 400px; top: 64px; width: 200px; font-size: 16px; }
/* band 3: stacked brand sheets */
.fv-sheets { position: absolute; inset: 0; }
.fv-sheets .mk-sheet { position: absolute; }
.fv-sheets .s1 { left: 170px; top: 0; width: 430px; height: 200px; }
.fv-sheets .s2 { left: 0; top: 150px; width: 380px; height: 220px; }
.fv-sheets .s3 { left: 210px; top: 292px; width: 410px; height: 200px; }

/* ── statement with drifting cards ── */
.drift { position: relative; min-height: 680px; display: grid; place-items: center; text-align: center; }
.drift__card { position: absolute; width: 372px; height: 396px; border-radius: var(--r); padding: 28px 30px; overflow: hidden; text-align: left; }
.drift__title { font: 500 36px/1.3 var(--font-display); letter-spacing: -1px; color: #fff; max-width: 260px; }
.drift__card--lilac { left: 0; top: 0; background: rgba(226,222,255,.65); }
.drift__card--pink { right: 0; top: 300px; background: rgba(254,211,241,.65); }
.drift__card--pink .drift__title { position: absolute; left: 26px; bottom: 28px; }
.drift__card .mk-line, .drift__card .mk-gauge { position: absolute; }
.drift__card--lilac .mk-line { left: 28px; right: 28px; bottom: 34px; }
.drift__card--pink .mk-gauge { left: 46px; right: 46px; top: 36px; color: #fff; }
.drift__copy { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; gap: 80px; max-width: 1000px; }
.drift__copy h2 { font: 600 60px/1.2 var(--font-display); letter-spacing: -1.5px; }
.drift__glow { position: absolute; left: -140px; bottom: -120px; width: 520px; height: 360px; border-radius: 50%; background: radial-gradient(closest-side, rgba(247,254,142,.55), rgba(247,254,142,0)); pointer-events: none; }

/* ── use cases: sticky intro + list of cream cards ── */
.cases { display: grid; grid-template-columns: 550px 1fr; gap: 105px; align-items: start; }
.cases__intro { position: sticky; top: 40px; display: flex; flex-direction: column; gap: 40px; align-items: flex-start; }
.cases__intro p { margin-top: 16px; color: var(--text-2); }
.cases__glow { position: absolute; left: -120px; top: 220px; width: 520px; height: 420px; border-radius: 50%; z-index: -1; background: radial-gradient(closest-side, rgba(254,211,241,.55), rgba(255,233,204,.25) 60%, rgba(255,255,255,0)); pointer-events: none; }
.cases__list { display: grid; gap: 24px; }
.case { display: grid; grid-template-columns: 48px 1fr; grid-template-rows: auto auto; align-content: center; gap: 0 16px; align-items: center; min-height: 256px; background: var(--paper); border-radius: var(--r); padding: 40px; }
.case .icon-tile { width: 48px; height: 48px; border-radius: 10px; }
.case .icon-tile svg { width: 22px; height: 22px; }
.case h3 { font: 500 24px/1.6 var(--font-display); letter-spacing: -.5px; }
.case p { grid-column: 2; color: var(--text-2); max-width: 480px; margin-top: 8px; }
.cases__all { display: flex; justify-content: center; align-items: center; height: 80px; border-radius: var(--r); background: var(--paper); font: 500 16px/1.7 var(--font-display); transition: background-color .35s var(--ease); }
.cases__all:hover { background: var(--paper-2); }

/* ── proof bento (quotes, stats on blurred colour, a photo card) ── */
.proof { padding: var(--band-pad) 40px; }
.bento { display: grid; grid-template-columns: 610fr 319fr 319fr; grid-template-rows: 320px 450px; gap: 24px; margin-top: var(--head-gap); }
.bento > * { border-radius: var(--r-lg); background: #fff; position: relative; overflow: hidden; }
.bento .b-a { grid-column: 1; } .bento .b-d { grid-column: 1; grid-row: 2; display: grid; grid-template-columns: 1fr 1fr; gap: 24px; background: none; overflow: visible; }
.bento .b-d > * { border-radius: var(--r-lg); background: #fff; position: relative; overflow: hidden; }
.bento .b-f { grid-column: 2 / 4; grid-row: 2; }
.quote { display: flex; flex-direction: column; padding: 32px; }
.quote__mark { width: 24px; height: 24px; fill: var(--lilac-2); opacity: .45; margin-bottom: 16px; }
.quote blockquote p { color: var(--ink); }
.quote__foot { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.who { display: flex; align-items: center; gap: 16px; }
.who img { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; }
.who b { display: block; font: 500 16px/1.5 var(--font-display); }
.who span { font-size: 14px; color: var(--text-2); }
.stars { text-align: right; }
.stars svg { width: 120px; height: 20px; fill: var(--ink); }
.stars span { font: 500 24px/1.4 var(--font-display); }
.stars span em { font-style: normal; color: var(--muted); }
.stat { display: flex; flex-direction: column; justify-content: flex-end; padding: 32px; }
.stat > img { position: absolute; inset: 0 0 auto 0; width: 100%; height: 78%; object-fit: cover; -webkit-mask: linear-gradient(#000 35%, transparent 92%); mask: linear-gradient(#000 35%, transparent 92%); }
.stat::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(to bottom, rgba(255,255,255,0) 18%, rgba(255,255,255,.85) 58%, #fff 70%); }
.stat > * { position: relative; z-index: 2; }
.stat b { font: 600 48px/1.2 var(--font-display); letter-spacing: -1px; }
.stat p { margin-top: 12px; color: var(--text-2); font-size: 16px; }
.b-f > img { position: absolute; inset: 0 0 auto 0; width: 100%; height: 78%; object-fit: cover; -webkit-mask: linear-gradient(#000 45%, transparent 96%); mask: linear-gradient(#000 45%, transparent 96%); }
.b-f__copy { position: absolute; z-index: 2; left: 32px; right: 32px; bottom: 32px; display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; }
.b-f__copy h3 { font: 500 24px/1.6 var(--font-display); letter-spacing: -.5px; max-width: 470px; }
.b-f__copy p { margin-top: 12px; color: var(--text-2); max-width: 400px; }
.round-btn { width: 48px; height: 48px; border-radius: 50%; border: 1px solid var(--line-2); background: #fff; display: grid; place-items: center; flex: none; transition: background-color .35s var(--ease); }
.round-btn:hover { background: var(--paper); }
.round-btn svg { width: 20px; height: 20px; fill: none; stroke: var(--ink); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* ── steps: three pastel cards on a staggered line ── */
.steps { position: relative; height: 421px; margin-top: var(--head-gap); }
.steps__line { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.steps__line path { fill: none; stroke-width: 2; }
.step { position: absolute; width: 400px; height: 341px; border-radius: var(--r-step); padding: 32px; display: flex; flex-direction: column; justify-content: flex-end; }
.step:nth-of-type(1) { left: 8px; top: 0; background: var(--lime); }
.step:nth-of-type(2) { left: 487px; top: 80px; background: var(--mint); }
.step:nth-of-type(3) { left: 968px; top: 0; background: var(--pink); }
.step__n { position: absolute; top: 32px; right: 32px; font: 600 48px/1.2 var(--font-display); letter-spacing: -1px; }
.step h3 { font: 500 20px/1.5 var(--font-display); }
.step p { margin-top: 8px; color: var(--text-2); max-width: 336px; }

/* ── pricing ── */
.pricing-band { padding: var(--band-pad) 100px; }
.plans { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; margin-top: var(--head-gap); }
.plan { background: #fff; border-radius: var(--r-lg); }
.plan__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; padding: 40px 32px 32px; border-bottom: 1px solid var(--line-2); }
.plan__head h3 { font: 500 24px/1.6 var(--font-display); letter-spacing: -.5px; display: flex; align-items: center; gap: 10px; }
.plan__head p { color: var(--text-2); margin-top: 4px; }
.plan__tag { font: 500 14px/20px var(--font); background: var(--ink); color: #fff; border-radius: 8px; padding: 2px 10px; letter-spacing: 0; }
.price { display: flex; align-items: flex-end; gap: 4px; white-space: nowrap; }
.price sup { font: 600 36px/44px var(--font-display); align-self: flex-start; margin-top: 4px; }
.price b { font: 600 60px/1.05 var(--font-display); letter-spacing: -1.5px; }
.price span { font: 500 16px/24px var(--font); color: var(--text-2); padding-bottom: 6px; }
.plan__body { padding: 32px; border-bottom: 1px solid var(--line-2); }
.plan__label { font: 500 16px/1.7 var(--font-display); text-transform: uppercase; letter-spacing: .02em; color: var(--ink); }
.ticks { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 16px; margin-top: 20px; }
.ticks li { display: flex; gap: 10px; align-items: center; color: var(--text-2); font: 400 16px/1.7 var(--font-display); }
.ticks svg { width: 22px; height: 22px; flex: none; fill: none; stroke: var(--ink); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.plan__foot { padding: 24px 32px; }
.plan__foot .btn { width: 100%; }
.enterprise { display: flex; justify-content: space-between; align-items: center; gap: 24px; margin-top: 32px; padding: 32px; border-radius: var(--r-lg); background: var(--grad-chip); }
.enterprise h3 { font: 500 24px/1.6 var(--font-display); letter-spacing: -.5px; }
.enterprise p { color: var(--text-2); }

/* ── FAQ split ── */
.faq { display: grid; grid-template-columns: 450px 1fr; gap: 167px; align-items: start; }
.faq__intro { display: flex; flex-direction: column; gap: 16px; align-items: flex-start; }
.faq__intro > p { color: var(--text-2); max-width: 420px; }
.faq__more { margin: 64px 0 24px; color: var(--text-2); }
.faq__list { display: grid; gap: 16px; }
.qa { background: #fff; border: 1px solid var(--line-2); border-radius: var(--r); }
.qa summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 32px 26px 32px 36px; font: 500 20px/1.5 var(--font-display); }
.qa summary::-webkit-details-marker { display: none; }
.qa__pm { width: 48px; height: 48px; border-radius: 50%; background: var(--paper); display: grid; place-items: center; flex: none; transition: background-color .35s var(--ease); }
.qa__pm svg { width: 20px; height: 20px; fill: none; stroke: var(--ink); stroke-width: 2; stroke-linecap: round; }
.qa[open] .qa__pm { background: var(--ink); }
.qa[open] .qa__pm svg { stroke: #fff; }
.qa[open] .qa__pm .v { display: none; }
.qa p { padding: 0 96px 32px 36px; margin-top: -16px; color: var(--text-2); }

/* ── CTA A: cream card on the rainbow glow, the app blurred underneath ── */
.cta { position: relative; overflow: hidden; border-radius: var(--r-lg); background: rgba(252,248,245,.5); height: 700px; text-align: center; isolation: isolate; }
.cta__glow { position: absolute; z-index: -1; left: 50%; bottom: 0; width: 1920px; max-width: none; height: 1132px; transform: translateX(-50%) rotate(180deg); pointer-events: none; opacity: .95; }
.cta__copy { display: flex; flex-direction: column; align-items: center; gap: 16px; padding-top: 72px; }
.cta__copy p { max-width: 520px; color: var(--text-2); }
.cta__ctas { display: flex; gap: 12px; margin-top: 24px; }
.cta__app { position: absolute; left: 50%; top: 375px; width: 924px; transform: translateX(-50%); border: 10px solid rgba(255,255,255,.7); border-radius: 24px; overflow: hidden; height: 420px; }
.cta__app::after { content: ""; position: absolute; inset: 0; backdrop-filter: blur(0); background: linear-gradient(to bottom, rgba(255,255,255,0) 30%, rgba(255,255,255,.55)); }
.cta__app .mk-app { filter: blur(1.5px); }

/* ── footer A: brand + newsletter, four columns, giant grainy wordmark ── */
.foot { padding-top: 80px; }
.foot__top { display: grid; grid-template-columns: 1fr 580px; gap: 80px; }
.foot__brand p { margin-top: 20px; color: var(--text-2); max-width: 300px; }
.foot__news { margin-top: 72px; }
.foot__news h3 { font: 500 28px/1.3 var(--font-display); letter-spacing: -.5px; max-width: 300px; }
.foot__form { display: flex; align-items: center; gap: 8px; margin-top: 24px; width: 300px; border: 1px solid var(--line-2); border-radius: 40px; padding: 4px 4px 4px 16px; }
.foot__form input { flex: 1; min-width: 0; border: 0; outline: 0; font: 400 14px/1.5 var(--font); color: var(--ink); background: transparent; }
.foot__form input::placeholder { color: var(--muted); }
.foot__form .btn { min-height: 40px; padding: 0 18px; }
.foot__cols { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.foot__cols h4 { font: 500 16px/1.7 var(--font-display); margin-bottom: 16px; }
.foot__cols li + li { margin-top: 14px; }
.foot__cols a { color: var(--text-2); font: 400 16px/1.6 var(--font-display); transition: color .3s var(--ease); }
.foot__cols a:hover { color: var(--ink); }
.foot__base { grid-column: 2; display: flex; justify-content: space-between; align-items: center; margin-top: 56px; padding-top: 32px; border-top: 1px solid var(--line-2); color: var(--text-2); font-size: 15px; }
.foot__base span + span { margin-left: 32px; }
.socials { display: flex; gap: 8px; }
.socials a { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: var(--paper); transition: background-color .3s var(--ease); }
.socials a:hover { background: var(--paper-2); }
.socials svg { width: 16px; height: 16px; fill: var(--ink); }
.wordmark { margin-top: 48px; font: 600 clamp(64px, 25.5vw, 382px)/.82 var(--font-display); letter-spacing: -.05em; color: var(--ink); text-align: center; white-space: nowrap; padding-bottom: .06em; overflow: hidden;
  -webkit-mask: linear-gradient(to bottom, #000 62%, rgba(0,0,0,.25) 92%, transparent); mask: linear-gradient(to bottom, #000 62%, rgba(0,0,0,.25) 92%, transparent); }

/* ── responsive ── */
@media (max-width: 1360px) {
  .hero { height: auto; padding-bottom: 0; }
  .hero__app { position: relative; left: auto; top: auto; transform: none; width: auto; margin: 64px 4% -8% ; }
  .social-tile { display: none; }
  .tabs__list { grid-template-columns: repeat(4, 1fr); }
  .tabs__panel { grid-template-columns: 1fr 1fr; gap: 48px; }
  .tabs__visual { justify-self: center; }
  .split { grid-template-columns: 1fr 1fr; }
  .fband, .fband--flip { grid-template-columns: 1fr 1fr; padding: 0 48px; }
  .fband__visual { transform: scale(.85); transform-origin: left center; }
  .cases { grid-template-columns: 1fr 1.3fr; gap: 64px; }
  .steps { height: auto; display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
  .steps__line { display: none; }
  .step { position: relative; left: auto !important; top: auto !important; width: auto; }
  .pricing-band { padding-inline: 40px; }
  .faq { grid-template-columns: 1fr 1.4fr; gap: 64px; }
  .drift__card { width: 300px; height: 330px; }
}
@media (max-width: 991px) {
  .nav, .site-head__end > a:not(.btn) { display: none; }
  .menu-btn { display: grid; }
  .site-head__end .btn { display: none; }
  .tabs-band, .proof { padding-inline: 24px; }
  .tabs__list { display: flex; overflow-x: auto; scrollbar-width: none; }
  .tab { flex: 0 0 240px; height: auto; padding: 24px; }
  .tabs__panel, .tabs__panel:not(:first-of-type) { grid-template-columns: 1fr; border-radius: 0 0 var(--r-lg) var(--r-lg); padding: 40px 24px; }
  .tabs__visual { width: 100%; max-width: 488px; height: auto; aspect-ratio: 488 / 410; }
  .tabs__visual .mk-glass__card { left: 6%; top: 10%; width: 80%; }
  .tabs__visual .mk-post { left: auto; right: -2%; top: auto; bottom: -6%; font-size: 12px; }
  .split, .split--flip { grid-template-columns: 1fr; gap: 48px; }
  .split--flip .stack-tile { order: -1; }
  .fband, .fband--flip { grid-template-columns: 1fr; padding: 56px 32px 0; gap: 40px; }
  .fband--flip .fband__copy { order: 0; }
  .fband__visual { transform: none; height: 420px; }
  .cases { grid-template-columns: 1fr; }
  .cases__intro { position: static; }
  .bento { grid-template-columns: 1fr 1fr; grid-template-rows: auto; }
  .bento .b-a, .bento .b-d, .bento .b-f { grid-column: 1 / -1; grid-row: auto; }
  .bento > *, .bento .b-d > * { min-height: 300px; }
  .steps { grid-template-columns: 1fr; }
  .plans { grid-template-columns: 1fr; }
  .faq { grid-template-columns: 1fr; gap: 48px; }
  .foot__top { grid-template-columns: 1fr; gap: 48px; }
  .foot__base { grid-column: 1; }
  .drift { min-height: 0; padding: 40px 0; }
  .drift__card { display: none; }
}
@media (max-width: 767px) {
  :root { --gutter: 16px; }
  .ribbon { height: 44px; }
  .ribbon__track { font-size: 14px; gap: 32px; padding-right: 32px; }
  .hero { border-radius: var(--r-lg); }
  .hero .site-head { width: calc(100% - 24px); }
  .site-head__in { height: 68px; padding: 0 8px 0 16px; }
  .hero__copy { gap: 20px; margin-top: 28px; padding: 0 12px; }
  .hero__badge { font-size: 12.5px; padding-right: 12px; white-space: nowrap; gap: 8px; }
  .hero__badge .chip { font-size: 12.5px; }
  .hero__ctas { flex-direction: column; width: 100%; }
  .hero__ctas .btn { width: 100%; }
  .hero__app { width: auto; margin: 40px 12px -30%; border-width: 6px; }
  .logos { padding-top: 64px; }
  .logos__title { font-size: 20px; }
  .logos__list { justify-content: flex-start; gap: 36px; animation: ribbon 30s linear infinite; width: max-content; }
  .logos__list img { height: 26px; }
  .statement p { font-size: 30px; letter-spacing: -.6px; }
  .shead p { font-size: 16px; }
  .stack-tile { height: 400px; }
  .stack { position: absolute; left: 50%; top: 50%; margin: 0; transform: translate(-50%, -42%) scale(.62); }
  .fband { padding: 40px 20px 0; }
  .fband__visual { height: 340px; overflow: visible; }
  .fv-ad { left: 0; top: 0; width: 88%; }
  .fv-line { left: auto; right: -12px; top: 280px; width: 62%; }
  .fband__visual:has(.fv-line) { height: 430px; }
  .fv-stories { width: 92%; }
  .fv-stories .mk-ad { font-size: 13px; }
  .tabs__visual .mk-post { display: none; }
  .fv-confirm { left: auto; right: -8px; top: 306px; width: 190px; font-size: 14.5px; }
  .fband__visual:has(.fv-confirm) { height: 440px; }
  .fv-ad .mk-ad { font-size: 12.5px; }
  .fv-confirm dl { display: none; }
  .fv-sheets { transform: scale(.52); transform-origin: left top; }
  .drift__copy h2 { font-size: 34px; letter-spacing: -.8px; }
  .drift__glow { left: -80px; width: 320px; height: 260px; }
  .cases__glow { left: -90px; width: 360px; height: 320px; }
  .drift__copy { gap: 40px; }
  .case { padding: 28px 24px; min-height: 0; grid-template-columns: 1fr; gap: 16px; }
  .case p { grid-column: 1; margin-top: 0; }
  .case h3 { font-size: 20px; }
  .bento { grid-template-columns: 1fr; }
  .bento .b-d { grid-template-columns: 1fr; }
  .quote, .stat { padding: 24px; }
  .quote__foot { flex-direction: column; align-items: flex-start; }
  .stars { text-align: left; }
  .b-f { min-height: 460px; }
  .b-f > img { height: 58%; }
  .b-f__copy { left: 24px; right: 24px; bottom: 24px; }
  .step { height: 280px; border-radius: 32px; padding: 24px; }
  .step__n { top: 24px; right: 24px; font-size: 40px; }
  .pricing-band { padding: var(--band-pad) 16px; }
  .plan__head { flex-direction: column; padding: 28px 24px 24px; }
  .plan__body, .plan__foot { padding: 24px; }
  .ticks { grid-template-columns: 1fr; }
  .enterprise { flex-direction: column; align-items: flex-start; }
  .qa summary { padding: 22px 16px 22px 20px; font-size: 17px; }
  .qa p { padding: 0 20px 22px; }
  .qa__pm { width: 40px; height: 40px; }
  .cta { height: 640px; }
  .cta__copy { padding: 56px 20px 0; }
  .cta__ctas { flex-direction: column; width: 100%; }
  .cta__app { top: 430px; width: calc(100% - 32px); left: 16px; transform: none; }
  .foot__form { width: 100%; }
  .foot__cols { grid-template-columns: 1fr 1fr; gap: 32px 24px; }
  .foot__base { flex-direction: column; align-items: flex-start; gap: 20px; }
  .foot__base span + span { margin-left: 0; display: block; margin-top: 6px; }
}

/* ── header A on inner pages (outside a hero card) ── */
body > .site-head { width: min(1258px, 100% - 2 * var(--gutter)); margin: 16px auto 0; }
body > .site-head .site-head__in { background: var(--paper-soft); }

/* ───────── Home2 ───────── */
/* Plumo · home-2 (source "Homepage v2"). Prefix h2-. Loaded after plumo.css. Tokens only. */

/* ── HERO v2: white card, left headline, lilac arc ring, logo row, app on a landscape photo plate ── */
.h2-hero { position: relative; width: min(var(--band), 100% - 2 * var(--gutter)); margin-inline: auto; height: 1203px; border-radius: var(--r-xl); overflow: hidden; isolation: isolate; background: var(--bg); }
.h2-hero .site-head { width: min(1258px, 100% - 48px); margin: 0 auto; }
.h2-hero__ring { position: absolute; z-index: -1; right: -228px; top: 215px; width: 420px; height: 420px; border-radius: 50%; border: 80px solid var(--lilac); clip-path: inset(0 0 52% 0); pointer-events: none; }
.h2-hero__copy { padding: 60px 52px 0; display: flex; flex-direction: column; align-items: flex-start; }
.h2-hero__copy h1 { max-width: 760px; }
.h2-hero__lead { max-width: 470px; margin-top: 28px; font: 400 18px/1.7 var(--font); font-variation-settings: "opsz" 32; color: var(--ink); }
.h2-hero__ctas { display: flex; align-items: center; gap: 32px; margin-top: 32px; }
.h2-link { font: 500 16px/1.7 var(--font-display); color: var(--ink); transition: color .35s var(--ease); }
.h2-link:hover { color: var(--accent-hover); }
.h2-hero__logos { width: min(1280px, 100% - 48px); margin: 56px auto 0; }
.h2-hero__logos .logos__list { gap: 64px; }
.h2-plate { position: relative; width: min(1259px, 100% - 64px); height: 560px; margin: 40px auto 0; border-radius: var(--r-step) var(--r-step) 0 0; overflow: hidden; }
.h2-plate__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 100%; }
.h2-plate__app { position: absolute; left: 50%; top: 69px; width: 87.5%; transform: translateX(-50%); border: 10px solid #fff; border-radius: var(--r); background: #fff; box-shadow: 0 30px 80px -40px rgba(3,41,74,.3); }
.h2-plate__app .mk-app { border-radius: 8px; }

/* ── benefit cards ── */
.h2-split-head { display: flex; justify-content: space-between; align-items: center; gap: 48px; }
.h2-split-head__l { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
.h2-split-head__l h2 { max-width: 560px; }
.h2-split-head > p { max-width: 330px; color: var(--text-2); }
.h2-bcards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 25px; margin-top: var(--head-gap); }
.h2-bcard { display: flex; flex-direction: column; min-height: 545px; padding: 32px; border-radius: 28px; background: var(--paper); }
.h2-bcard__mock { height: 320px; border-radius: var(--r-md); background: #fff; padding: 24px 16px; display: flex; flex-direction: column; justify-content: center; }
.h2-bcard__copy { margin-top: auto; padding-top: 40px; }
.h2-bcard__copy h3 { font: 500 24px/1.6 var(--font-display); letter-spacing: -.5px; }
.h2-bcard__copy p { margin-top: 12px; color: var(--text-2); max-width: 336px; }
.h2-chat { gap: 14px; }
.h2-chat .mk-msg p { font-size: 15px; letter-spacing: -.2px; border-radius: 32px 32px 32px 4px; padding: 10px 16px; background: rgba(248,240,233,.7); }
.h2-chat .mk-msg--me p { border-radius: 32px 32px 4px 32px; }
.h2-chat .mk-avatar { width: 44px; height: 44px; }
.h2-chat__bot { width: 44px; height: 44px; border-radius: 50%; background: var(--lilac-2); display: grid; place-items: center; flex: none; }
.h2-chat__bot svg { width: 22px; height: 22px; fill: #fff; }
.h2-gen { padding: 0 8px; }
.h2-gen .mk-gen__orb { width: 72px; height: 72px; margin-bottom: 14px; background: radial-gradient(circle at 30% 25%, var(--danger) 0%, var(--danger-ink) 100%); }
.h2-gen__note { max-width: 210px; margin: 0 auto; font: 400 14px/1.5 var(--font-display); color: var(--text-2); }
.h2-gen .mk-gen__field { font: 500 15px/1.4 var(--font-display); margin-top: 28px; }
.h2-gen .mk-gen__field b { padding: 12px 18px; }
.h2-gen .mk-gen__tags { font-size: 12px; }
.h2-bars { padding: 0 6px; font-size: 15px; }
.h2-bars .mk-chart__plot { height: 220px; }
.h2-bars .mk-bars { gap: 10px; padding-left: 8px; }
.h2-bars .mk-bar i b { font-size: 15px; }

/* ── features: full lime band + two half bands ── */
.h2-features { width: min(var(--band), 100% - 2 * var(--gutter)); }
.h2-fgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; margin-top: var(--head-gap); }
.h2-fwide { grid-column: 1 / -1; }
.h2-tile { width: 80px; height: 80px; border-radius: var(--r); }
.h2-tile svg { width: 32px; height: 32px; }
.h2-fwide .fband__copy p { max-width: 460px; }
.h2-sheets { position: absolute; inset: 0; }
.h2-sheets .mk-sheet { position: absolute; width: 422px; height: 237px; border-radius: 12px; }
.h2-sheets .s1 { left: 150px; top: 10px; height: auto; }
.h2-sheets .s1 .mk-sheet__big { font-size: 1.6em; }
.h2-sheets .s2 { left: -40px; top: 196px; width: 300px; height: auto; padding-bottom: 1.6em; }
.h2-sheets .s3 { left: 222px; top: 318px; width: 360px; height: auto; box-shadow: 0 -2px 130px 0 rgba(3,41,74,.22); }
.h2-sheets .mk-sheet__big { font-size: 2.6em; }
.h2-sheets .mk-sheet__swatches i { width: 2.8em; height: 2.8em; }
.h2-half { position: relative; display: flex; flex-direction: column; gap: 56px; min-height: 983px; padding: 60px 40px 86px; border-radius: var(--r-lg); overflow: hidden; }
.h2-half--pink { background: var(--pink); } .h2-half--mint { background: var(--mint); }
.h2-half__copy { display: flex; flex-direction: column; gap: 32px; align-items: flex-start; }
.h2-half__copy h3 { max-width: 582px; }
.h2-half__copy p { max-width: 460px; margin-top: 16px; }
.h2-half__visual { height: 491px; margin-top: auto; }
.h2-half .fv-ad.h2-ad { left: 0; top: 0; width: 488px; padding: 20px; }
.h2-ad .mk-ad { aspect-ratio: 448 / 279; font-size: 18px; }
.h2-half .mk-ad__brand { background: rgba(3,41,74,.66); }
.h2-half .mk-ad__shade { background: linear-gradient(to bottom, rgba(3,41,74,.5), rgba(3,41,74,0) 26%, rgba(3,41,74,0) 38%, rgba(3,41,74,.78) 64%, rgba(3,41,74,.94)); }
.h2-line.fv-line { left: 330px; top: 340px; width: 296px; }
.h2-half .fv-stories.h2-stories { left: 0; top: 0; width: 488px; padding: 20px; }
.h2-stories .mk-ad { aspect-ratio: 214 / 368; font-size: 13px; }
.h2-confirm.fv-confirm { left: 396px; top: 150px; width: 202px; }

/* ── impact stats ── */
.h2-stats__title { max-width: 852px; font: 600 48px/1.2 var(--font-display); letter-spacing: -1px; text-wrap: balance; }
.h2-stats { display: flex; justify-content: space-between; gap: 32px; margin-top: var(--head-gap); }
.h2-stat { width: 236px; display: flex; flex-direction: column; gap: 8px; }
.h2-stat b { font: 600 72px/1.15 var(--font-display); letter-spacing: -2px; }
.h2-stat p { font: 400 16px/1.7 var(--font-display); color: var(--text-2); }

/* ── advantages band ── */
.h2-adv { display: grid; grid-template-columns: 499px 635px; justify-content: space-between; align-items: start; gap: 48px; padding: 80px 60px; }
.h2-adv__head { position: sticky; top: 40px; display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
.h2-adv__head p { color: var(--text-2); }
.h2-adv__head .btn { margin-top: 32px; }
.h2-adv__list { display: grid; gap: 24px; }
.h2-adv__card { display: flex; flex-direction: column; justify-content: center; gap: 24px; min-height: 240px; padding: 32px 40px; border-radius: var(--r); background: var(--paper); }
.h2-adv__card h3 { font: 500 24px/1.6 var(--font-display); letter-spacing: -.5px; }
.h2-adv__card p { margin-top: 8px; color: var(--text-2); max-width: 470px; }

/* ── comparison ── */
.h2-vs { width: min(1200px, 100%); margin: var(--head-gap) auto 0; display: grid; grid-template-columns: 1fr 1fr; gap: 24px; padding: 80px 56px; border-radius: var(--r-lg); background: var(--paper-soft); }
.h2-vs__col { padding: 60px; border-radius: var(--r-md); }
.h2-vs__col--us { background: #fff; }
.h2-vs__col h3 { font: 500 24px/1.6 var(--font-display); letter-spacing: -.5px; }
.h2-vs__list { display: grid; gap: 28px; margin-top: 24px; }
.h2-vs__list li { display: flex; align-items: flex-start; gap: 12px; font: 500 16px/1.7 var(--font-display); color: var(--text-2); }
.h2-vs__mark { width: 24px; height: 24px; margin-top: 1.5px; border-radius: 50%; display: grid; place-items: center; flex: none; }
.h2-vs__mark svg { width: 18px; height: 18px; fill: none; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.h2-vs__list--no .h2-vs__mark { background: rgba(229,72,77,.28); }
.h2-vs__list--no .h2-vs__mark svg { stroke: var(--ink); }
.h2-vs__list--yes .h2-vs__mark { background: var(--mint); }
.h2-vs__list--yes .h2-vs__mark svg { stroke: var(--success-ink); }

/* ── core values ── */
.h2-values-wrap { width: min(1360px, 100% - 2 * var(--gutter)); margin-inline: auto; }
.h2-values { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-top: var(--head-gap); }
.h2-value { display: flex; flex-direction: column; justify-content: space-between; gap: 64px; min-height: 341px; padding: 40px 32px 32px; border-radius: var(--r-step); }
.h2-value--lilac { background: var(--lilac); } .h2-value--pink { background: var(--pink); } .h2-value--lime { background: var(--lime); } .h2-value--mint { background: var(--mint); }
.h2-value h3 { font: 500 24px/1.6 var(--font-display); letter-spacing: -.5px; }
.h2-value p { margin-top: 16px; color: var(--text-2); max-width: 260px; }

/* ── testimonials carousel ── */
.h2-proof { padding: 80px 0 80px 80px; overflow: hidden; }
.h2-proof__top { display: grid; grid-template-columns: 386px 1fr; gap: 100px; }
.h2-proof__head { display: flex; flex-direction: column; justify-content: flex-start; gap: 100px; }
.h2-proof__head .chip { margin-bottom: 16px; }
.h2-proof__head p { margin-top: 16px; max-width: 360px; color: var(--text-2); font-size: 16px; }
.h2-arrows { display: flex; gap: 16px; }
.h2-arrow { width: 108px; height: 65px; border-radius: var(--r-pill); border: 2px solid var(--ink); display: grid; place-items: center; color: var(--ink); background: transparent; transition: border-color .35s var(--ease), background-color .35s var(--ease), color .35s var(--ease); }
.h2-arrow:hover:not(:disabled) { background: #fff; }
.h2-arrow:disabled { border-color: var(--line); color: var(--muted); cursor: default; }
.h2-arrow svg { width: 28px; height: 28px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.h2-arrow[data-car-prev] svg { transform: scaleX(-1); }
.h2-car { display: flex; gap: 40px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding-right: 80px; scroll-padding-left: 0; }
.h2-car::-webkit-scrollbar { display: none; }
.h2-car:focus-visible { outline-offset: -2px; }
.h2-review { flex: 0 0 610px; min-height: 600px; display: flex; flex-direction: column; padding: 40px; border-radius: var(--r-step); background: #fff; scroll-snap-align: start; }
.h2-review__top { display: flex; justify-content: space-between; align-items: flex-start; }
.h2-review__face { width: 160px; height: 160px; border-radius: var(--r-lg); object-fit: cover; }
.h2-review__mark { width: 84px; height: 84px; fill: var(--pink); margin: -6px -8px 0 0; }
.h2-review blockquote { margin-top: 40px; }
.h2-review blockquote p { font: 500 36px/1.3 var(--font-display); letter-spacing: -1px; color: var(--ink); }
.h2-review__foot { margin-top: auto; padding-top: 32px; display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; }
.h2-review__foot b { display: block; font: 500 16px/1.7 var(--font-display); }
.h2-review__foot > span:first-child > span { font: 400 14px/1.6 var(--font-display); color: var(--text-2); }
.h2-proof__logos { display: grid; grid-template-columns: 386px 1fr; gap: 100px; align-items: center; margin-top: 80px; padding-right: 80px; }
.h2-proof__logos > p { font: 500 24px/1.6 var(--font-display); letter-spacing: -.5px; color: var(--ink); }
.h2-proof__row { margin: 0; }
.h2-proof__row::after { background: linear-gradient(90deg, var(--paper) 0%, rgba(250,244,239,0) 22%, rgba(250,244,239,0) 78%, var(--paper) 100%); }
.h2-proof__row .logos__list { justify-content: space-between; gap: 40px; }

/* ── analytics ── */
.h2-ana { display: grid; grid-template-columns: 498px 600px; justify-content: space-between; align-items: center; gap: 48px; }
.h2-ana__copy { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
.h2-ana__copy p { margin-top: 8px; color: var(--text-2); }
.h2-ana__photo { position: relative; height: 560px; border-radius: var(--r-lg); overflow: hidden; background: var(--mint); display: grid; place-items: center; }
.h2-ana__photo > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 40%; }
.h2-ana__card { position: relative; width: 346px; padding: 24px 28px 26px; border-radius: var(--r-md); background: #fff; box-shadow: var(--shadow-2); }
.h2-ana__gauge { width: 230px; margin: 0 auto; }
.h2-ana__gauge .mk-gauge__num { top: 46%; }
.h2-ana__gauge .mk-gauge__num b { font-size: 36px; }
.h2-ana__gauge .mk-gauge__num span { font-size: 15px; }
.h2-ana__line { margin-top: 22px; }

/* ── plans: the rainbow band ── */
.h2-plans-wrap { width: min(var(--band), 100% - 2 * var(--gutter)); }
.h2-plans { display: grid; grid-template-columns: 358px 1fr; gap: 67px; margin-top: var(--head-gap); padding: 40px 40px 40px 40px; border-radius: var(--r-lg); background: var(--grad-chip); }
.h2-plans__card { display: grid; grid-template-columns: 1fr 1fr; gap: 0; padding: 0 32px; border-radius: var(--r-lg); background: #fff; position: relative; }
.h2-plans__card::before { content: ""; position: absolute; left: 50%; top: 80px; height: 340px; border-left: 1px solid var(--line-2); }
.h2-plan { padding: 24px 32px 40px; }
.h2-plan__head { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding-bottom: 20px; border-bottom: 1px solid var(--line-2); }
.h2-plan--free .h2-plan__head { border-bottom-color: rgba(255,255,255,.7); }
.h2-plan__head h3 { font: 500 24px/1.6 var(--font-display); letter-spacing: -.5px; color: var(--text-2); }
.h2-plan__price { font: 500 16px/1.7 var(--font-display); color: var(--ink); }
.h2-plan__price b { font: 600 48px/1.1 var(--font-display); letter-spacing: -1.3px; }
.h2-plan__head > p:not(.h2-plan__price) { color: var(--text-2); max-width: 290px; }
.h2-plan__head .btn { width: 100%; max-width: 294px; margin-top: 32px; }
.h2-plan__ticks { display: grid; gap: 16px; padding-top: 32px; }
.h2-plan__ticks li { display: flex; align-items: center; gap: 12px; font: 400 16px/1.7 var(--font-display); color: var(--text-2); }
.h2-plan__ticks svg { width: 24px; height: 24px; flex: none; padding: 3px; fill: none; stroke: var(--ink); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.h2-plan--free .h2-plan__ticks svg { background: #fff; border-radius: 50%; }
.h2-plan--free { padding-left: 0; padding-right: 0; }

/* ── FAQ: centred list ── */
.h2-faq { width: min(800px, 100%); margin: var(--head-gap) auto 0; display: grid; gap: 16px; }
.h2-faq .qa { background: rgba(250,244,239,.75); border: 1px solid var(--paper); }
.h2-faq .qa summary { padding: 32px; }
.h2-faq .qa__pm { width: 42px; height: 42px; }
.h2-faq .qa p { padding: 0 120px 32px 32px; margin-top: -20px; }

/* ── responsive ── */
@media (max-width: 1360px) {
  .h2-hero { height: auto; }
  .h2-plate { height: auto; aspect-ratio: 1259 / 560; }
  .h2-split-head > p { max-width: 300px; }
  .h2-fgrid { grid-template-columns: 1fr; }
  .h2-half { min-height: 0; display: grid; grid-template-columns: 1fr 520px; align-items: center; gap: 40px; padding: 56px 48px; }
  .h2-half__visual { margin-top: 0; transform: scale(.85); transform-origin: left center; }
  .h2-half h3 { font-size: 40px; }
  .h2-adv { grid-template-columns: 1fr 1.2fr; padding: 72px 40px; }
  .h2-values { grid-template-columns: repeat(2, 1fr); }
  .h2-proof__top, .h2-proof__logos { grid-template-columns: 320px 1fr; gap: 56px; }
  .h2-proof { padding-left: 48px; }
  .h2-review { flex-basis: 520px; min-height: 540px; }
  .h2-review blockquote p { font-size: 30px; }
  .h2-ana { grid-template-columns: 1fr 1fr; }
  .h2-plans { grid-template-columns: 1fr; gap: 24px; }
  .h2-plan--free { padding: 8px 8px 0; }
  .h2-plan--free .h2-plan__ticks { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 1100px) {
  .h2-hero__ring { right: -280px; }
  .h2-stats { flex-wrap: wrap; row-gap: 48px; }
  .h2-stat { width: calc(50% - 16px); }
}
@media (max-width: 991px) {
  .h2-hero__copy { padding: 48px 32px 0; }
  .h2-hero__ring { width: 300px; height: 300px; border-width: 56px; right: -190px; top: 150px; }
  .h2-split-head { flex-direction: column; align-items: flex-start; gap: 16px; }
  .h2-split-head > p { max-width: 560px; }
  .h2-bcards { grid-template-columns: 1fr; max-width: 520px; margin-inline: auto; }
  .h2-bcard { min-height: 0; }
  .h2-half { grid-template-columns: 1fr; padding: 56px 32px 40px; }
  .h2-half__visual { transform: none; height: 491px; }
  .h2-fwide .fband__visual { height: 530px; }
  .h2-sheets .s2 { left: 0; }
  .h2-adv { grid-template-columns: 1fr; padding: 64px 24px; }
  .h2-adv__head { position: static; }
  .h2-vs { grid-template-columns: 1fr; padding: 40px 24px; }
  .h2-vs__col { padding: 40px 32px; }
  .h2-proof { padding: 64px 0 64px 24px; }
  .h2-proof__top { grid-template-columns: 1fr; gap: 40px; }
  .h2-proof__head { flex-direction: row; justify-content: space-between; align-items: flex-end; gap: 32px; padding-right: 24px; }
  .h2-proof__logos { grid-template-columns: 1fr; gap: 24px; padding-right: 24px; }
  .h2-car { padding-right: 24px; }
  .h2-ana { grid-template-columns: 1fr; }
  .h2-plans__card { grid-template-columns: 1fr; padding: 0 8px; }
  .h2-plans__card::before { display: none; }
  .h2-plans__card .h2-plan + .h2-plan { border-top: 1px solid var(--line-2); }
  .h2-faq .qa p { padding-right: 32px; }
}
@media (max-width: 767px) {
  .h2-hero { border-radius: var(--r-lg); }
  .h2-hero .site-head { width: calc(100% - 24px); }
  .h2-hero__copy { padding: 36px 20px 0; }
  .h2-hero__ring { display: none; }
  .h2-hero h1 br { display: none; }
  .h2-hero__lead { font-size: 16px; margin-top: 20px; }
  .h2-hero__ctas { flex-direction: column; align-items: stretch; width: 100%; gap: 16px; }
  .h2-hero__ctas .h2-link { text-align: center; }
  .h2-hero__logos { margin-top: 40px; width: calc(100% - 24px); }
  .h2-plate { width: calc(100% - 24px); aspect-ratio: auto; height: auto; margin-top: 32px; padding: 24px 12px 0; border-radius: var(--r-lg) var(--r-lg) 0 0; }
  .h2-plate__app { position: relative; left: auto; top: auto; transform: none; width: 100%; border-width: 6px; border-bottom: 0; border-radius: var(--r) var(--r) 0 0; }
  .h2-plate .mk-duo > div:first-child { display: none; }
  .h2-bcard { padding: 16px 16px 24px; }
  .h2-bcard__copy { padding: 28px 8px 0; }
  .h2-bcard__copy h3 { font-size: 20px; }
  .h2-chat .mk-msg p { font-size: 14px; }
  .h2-tile { width: 64px; height: 64px; }
  .h2-tile svg { width: 28px; height: 28px; }
  .h2-fwide { padding-bottom: 32px; }
  .h2-fwide .fband__visual { height: auto; }
  .h2-sheets { position: relative; inset: auto; transform: none; display: grid; gap: 12px; }
  .h2-sheets .mk-sheet { position: relative; left: auto; top: auto; width: auto; height: auto; min-height: 0; font-size: 13px; }
  .h2-sheets .s1 { display: none; }
  .h2-sheets .s2 { margin-right: 32px; }
  .h2-sheets .s3 { margin-left: 32px; box-shadow: var(--shadow-2); }
  .h2-half { padding: 40px 20px 32px; gap: 32px; }
  .h2-half h3 { font-size: 32px; }
  .h2-half__visual, .fband__visual.h2-half__visual:has(.fv-line), .fband__visual.h2-half__visual:has(.fv-confirm) { height: auto; }
  .h2-half .fv-ad.h2-ad, .h2-half .fv-stories.h2-stories { position: relative; width: 100%; padding: 12px; }
  .h2-ad .mk-ad { font-size: 13px; }
  .h2-line.fv-line, .h2-confirm.fv-confirm { position: relative; left: auto; top: auto; margin: -12px -8px 0 auto; }
  .h2-line.fv-line { width: 72%; }
  .h2-confirm.fv-confirm { width: 200px; }
  .h2-stats__title { font-size: 32px; letter-spacing: -.6px; }
  .h2-stats { flex-direction: column; gap: 32px; }
  .h2-stat { width: auto; }
  .h2-stat b { font-size: 56px; }
  .h2-adv { padding: 56px 16px; }
  .h2-adv__card { padding: 28px 24px; min-height: 0; }
  .h2-adv__card h3, .h2-value h3, .h2-vs__col h3 { font-size: 20px; }
  .h2-vs { padding: 16px; }
  .h2-vs__col { padding: 28px 20px; }
  .h2-values { grid-template-columns: 1fr; }
  .h2-value { min-height: 260px; border-radius: 32px; padding: 32px 24px 28px; }
  .h2-proof { padding: 56px 0 56px 16px; }
  .h2-proof__head { flex-direction: column; align-items: flex-start; padding-right: 16px; }
  .h2-arrow { width: 84px; height: 52px; }
  .h2-car { gap: 16px; padding-right: 16px; }
  .h2-review { flex-basis: calc(100% - 32px); min-height: 0; padding: 24px; border-radius: 32px; }
  .h2-review__face { width: 104px; height: 104px; border-radius: 20px; }
  .h2-review__mark { width: 56px; height: 56px; }
  .h2-review blockquote { margin-top: 28px; }
  .h2-review blockquote p { font-size: 22px; letter-spacing: -.4px; }
  .h2-review__foot { flex-direction: column; align-items: flex-start; }
  .h2-review__foot .stars { text-align: left; }
  .h2-proof__logos { padding-right: 16px; margin-top: 56px; }
  .h2-proof__logos > p { font-size: 20px; }
  .h2-ana__photo { height: 480px; }
  .h2-ana__card { width: calc(100% - 40px); max-width: 320px; padding: 20px; }
  .h2-ana__gauge { width: 200px; }
  .h2-plans { padding: 16px; }
  .h2-plan { padding: 24px 16px 32px; }
  .h2-plan--free { padding: 16px 8px 8px; }
  .h2-plan--free .h2-plan__ticks { grid-template-columns: 1fr; }
  .h2-plan__head .btn { max-width: none; }
  .h2-faq .qa summary { padding: 22px 16px 22px 20px; font-size: 17px; }
  .h2-faq .qa p { padding: 0 20px 22px; margin-top: -8px; }
}

/* ───────── Mockcat ───────── */
/* Plumo mock-up catalogue page (mkc-). Tokens only. Loads after plumo.css.
   Page layout first, then the atoms this catalogue composed in Plumo's learned style (white cards on cream or one
   pastel field, 12–16px radius, Vend Sans labels, ink numbers, lime before cream, one shadowed focal piece).
   Atoms marked "kit candidate" are proposed for mockups.css. */

/* ── page: intro + rules ── */
.mkc-intro { padding-top: 72px; }
.mkc-intro .shead { max-width: 780px; }
.mkc-intro .shead p { max-width: 620px; }
.mkc-rules { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; margin-top: 64px; }
.mkc-rule { display: flex; flex-direction: column; gap: 14px; border-radius: var(--r-lg); padding: 28px; min-height: 236px; }
.mkc-rule:nth-child(1) { background: var(--lime); } .mkc-rule:nth-child(2) { background: var(--mint); }
.mkc-rule:nth-child(3) { background: var(--pink); } .mkc-rule:nth-child(4) { background: var(--lilac); }
.mkc-rule h3 { margin-top: auto; font: 500 20px/1.5 var(--font-display); }
.mkc-rule p { color: var(--text-2); font-size: 15px; line-height: 1.6; }

/* ── page: the catalogue ── */
.mkc-list { display: grid; gap: 40px; margin-top: var(--head-gap); }
.mkc-comp { display: grid; grid-template-columns: 1fr 340px; gap: 56px; align-items: center; }
.mkc-comp--flip { grid-template-columns: 340px 1fr; }
.mkc-comp--flip .mkc-cap { order: -1; }
.mkc-stage { position: relative; height: 540px; border-radius: var(--r-lg); overflow: hidden; background: var(--paper); }
.mkc-stage--mint { background: var(--mint); } .mkc-stage--pink { background: var(--pink); }
.mkc-stage--lilac { background: var(--lilac); } .mkc-stage--lime { background: var(--lime); }
.mkc-scene { position: absolute; inset: 0; font-size: 16px; }
.mkc-scene > * { position: absolute; }
.mkc-scene > .mkc-bg { inset: 0; width: 100%; height: 100%; object-fit: cover; }
.mkc-cap { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
.mkc-cap h3 { font: 600 36px/1.2 var(--font-display); letter-spacing: -.8px; }
.mkc-cap > p { color: var(--text-2); }
.mkc-path { display: inline-flex; align-items: center; gap: 6px; border-radius: var(--r-pill); padding: 3px 12px; font: 500 14px/1.7 var(--font-display); background: var(--lilac); }
.mkc-path--ref { background: var(--mint); }
.mkc-path svg { width: 16px; height: 16px; fill: none; stroke: var(--ink); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.mkc-meta { display: grid; gap: 10px; width: 100%; margin-top: 8px; padding-top: 16px; border-top: 1px solid var(--line-2); }
.mkc-meta div { display: grid; grid-template-columns: 76px 1fr; gap: 12px; font-size: 14px; line-height: 1.6; }
.mkc-meta dt { font: 500 14px/1.6 var(--font-display); }
.mkc-meta dd { margin: 0; color: var(--text-2); }
.mkc-meta code { font: 400 13px/1.6 var(--mono); color: var(--ink); }

/* ── composed atoms (kit candidates) ── */
.mkc-pad { padding: 1.4em 1.5em; }
.mkc-t { margin: 0; font: 600 1.25em/1.25 var(--font-display); letter-spacing: -.02em; color: var(--ink); }
.mkc-s { margin: 0; font: 400 .875em/1.45 var(--font); color: var(--text-2); }
.mkc-l { margin: 0; font: 500 1em/1.35 var(--font-display); color: var(--ink); }
.mkc-big { margin: 0; font: 600 2.5em/1 var(--font-display); letter-spacing: -.03em; color: var(--ink); }
.mkc-big small { font: 500 .36em/1 var(--font-display); letter-spacing: 0; margin-left: .3em; }
.mkc-float { box-shadow: var(--shadow-2); }
.mkc-gap { margin-top: 1em; }
/* progress: lime fill on a cream track */
.mkc-prog { display: block; height: .62em; border-radius: 1em; background: var(--paper); overflow: hidden; }
.mkc-prog i { display: block; height: 100%; width: var(--p, 50%); background: var(--lime); border-radius: inherit; }
.mkc-prog--lilac i { background: var(--lilac-2); }
/* schedule slots */
.mkc-slots { display: grid; gap: .5em; margin-top: 1.1em; }
.mkc-slot { display: grid; grid-template-columns: 3.1em 2.25em 1fr auto; align-items: center; gap: .75em; background: var(--paper); border-radius: .75em; padding: .55em .7em; font: 500 .95em/1.3 var(--font-display); }
.mkc-slot time { color: var(--text-2); font-weight: 400; }
.mkc-slot .mk-avatar { width: 2.25em; height: 2.25em; }
/* letter-mark tile (merchant, client, app) */
.mkc-mark { width: 2.5em; height: 2.5em; flex: none; border-radius: .7em; display: grid; place-items: center; font: 600 1.05em/1 var(--font-display); background: var(--lilac); color: var(--ink); }
/* phone frame */
.mkc-phone { background: var(--surface); border: 1px solid var(--line-2); border-radius: 2.4em; padding: .7em .7em 1.2em; box-shadow: var(--shadow-1); }
.mkc-phone__notch { display: block; width: 5.4em; height: 1.35em; border-radius: 1em; background: var(--ink); margin: .2em auto .7em; }
.mkc-phone__body { padding: 0 .6em; }
.mkc-photo { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 1.6em; }
.mkc-chips { display: flex; gap: .4em; margin-top: .55em; }
.mkc-chips span { background: var(--paper); border-radius: 2em; padding: .3em .7em; font: 500 .8em/1.3 var(--font-display); }
.mkc-ticks { display: grid; gap: .55em; margin-top: .7em; }
.mkc-ticks span { display: flex; align-items: center; gap: .6em; font: 400 .95em/1.3 var(--font-display); }
.mkc-ticks .mk-ico { width: 1.3em; height: 1.3em; }
.mkc-ticks i { width: 1.3em; height: 1.3em; flex: none; border-radius: 50%; border: 1.5px solid var(--line-2); }
.mkc-btn { display: block; margin-top: 1em; background: var(--ink); color: var(--on-accent); border-radius: 2em; padding: .75em; text-align: center; font: 500 .9em/1 var(--font-display); box-shadow: var(--btn-inset); }
/* route stops */
.mkc-stops { position: relative; display: grid; gap: 1.15em; margin-top: 1.2em; }
.mkc-stops::before { content: ""; position: absolute; left: .54em; top: .7em; bottom: .7em; width: 2px; background: var(--line-2); }
.mkc-stop { position: relative; display: grid; grid-template-columns: 1.1em 1fr auto; gap: .8em; align-items: center; font: 500 .95em/1.3 var(--font-display); }
.mkc-stop i { width: 1.1em; height: 1.1em; border-radius: 50%; background: var(--lilac-2); border: .2em solid var(--surface); box-shadow: 0 0 0 1px var(--lilac-2); }
.mkc-stop time { color: var(--text-2); font-weight: 400; }
.mkc-stop.is-next { background: var(--paper); border-radius: .7em; margin: -.45em -.6em; padding: .45em .6em; grid-template-columns: 1.1em 1fr auto; }
.mkc-stop.is-next i { background: var(--lime); box-shadow: 0 0 0 1px var(--ink); }
.mkc-stop.is-next time { color: var(--ink); font-weight: 600; }
/* video lesson frame */
.mkc-video { position: relative; aspect-ratio: 16 / 9; border-radius: .75em; overflow: hidden; }
.mkc-video img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.mkc-play { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 3.4em; height: 3.4em; border-radius: 50%; background: rgba(255,255,255,.92); display: grid; place-items: center; }
.mkc-play svg { width: 1.4em; height: 1.4em; fill: var(--ink); margin-left: .15em; }
.mkc-tag { position: absolute; right: .7em; bottom: .7em; background: rgba(3,41,74,.78); color: var(--on-accent); border-radius: .4em; padding: .35em .55em; font: 500 .8em/1 var(--font-display); }
/* episode row */
.mkc-ep { display: flex; align-items: center; gap: .9em; }
.mkc-ep img { width: 4.2em; height: 4.2em; flex: none; border-radius: .75em; object-fit: cover; }
/* people rows */
.mkc-people { display: grid; gap: .3em; margin-top: 1em; }
.mkc-person { display: grid; grid-template-columns: 2.5em 1fr auto; align-items: center; gap: .8em; padding: .55em 0; border-top: 1px solid var(--line-2); font: 500 .95em/1.3 var(--font-display); }
.mkc-person small { display: block; font: 400 .85em/1.4 var(--font); color: var(--text-2); }
.mkc-person time { font-weight: 500; }
/* toast (one floating confirmation) */
.mkc-toast { display: flex; align-items: center; gap: .8em; background: var(--surface); border-radius: 1em; padding: .9em 1.1em; }
.mkc-toast__ic { width: 2.3em; height: 2.3em; flex: none; border-radius: 50%; background: var(--mint); display: grid; place-items: center; }
.mkc-toast__ic svg { width: 1.3em; height: 1.3em; fill: none; stroke: var(--ink); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
/* a customer's real screenshot inside the kit window (only when the user asked for raw screens) */
.mkc-shot { display: block; width: 100%; border-radius: .6em; }

/* ── composition positions (desktop stage ≈ 836 × 540) ── */
.mkc-a__main { left: 64px; top: 52px; width: 470px; }
.mkc-a__float { right: 56px; top: 250px; width: 272px; }
.mkc-b__main { left: 56px; top: 52px; width: 520px; }
.mkc-b__main .mk-chart__plot { height: 15.5em; font-size: 14px; }
.mkc-b__float { right: 56px; top: 404px; width: 290px; }
.mkc-c__phone { left: 110px; top: 40px; width: 300px; }
.mkc-c__phone .mkc-photo { aspect-ratio: 16 / 10; }
.mkc-c__float { left: 452px; top: 210px; width: 268px; }
.mkc-d__card { right: 48px; top: 48px; width: 340px; }
.mkc-e__main { left: 56px; top: 48px; width: 520px; }
.mkc-e__float { right: 48px; bottom: 64px; width: 262px; }
.mkc-f__main { left: 56px; top: 48px; width: 486px; }
.mkc-f__main .mk-chart__plot { height: 12em; font-size: 14px; }
.mkc-f__float { right: 52px; top: 110px; width: 258px; }
.mkc-g__main { left: 72px; top: 64px; width: 500px; font-size: 17px; }
.mkc-g__float { left: 360px; top: 392px; width: 310px; font-size: 17px; }

/* ── responsive ── */
@media (max-width: 1240px) {
  .mkc-rules { grid-template-columns: 1fr 1fr; }
  .mkc-comp, .mkc-comp--flip { grid-template-columns: 1fr; gap: 28px; }
  .mkc-comp--flip .mkc-cap { order: 0; }
  .mkc-cap { max-width: 640px; }
  .mkc-cap h3 { font-size: 28px; letter-spacing: -.5px; }
}
@media (max-width: 900px) {
  .mkc-scene { font-size: 14.5px; }
  .mkc-a__main, .mkc-g__main { left: 32px; } .mkc-a__float, .mkc-g__float { right: 28px; }
  .mkc-b__main, .mkc-e__main, .mkc-f__main { left: 32px; } .mkc-b__float, .mkc-e__float, .mkc-f__float { right: 28px; }
  .mkc-c__phone { left: 56px; } .mkc-c__float { left: auto; right: 40px; }
  .mkc-g__float { left: auto; right: 40px; }
  .mkc-d__card { right: 32px; }
}
@media (max-width: 767px) {
  .mkc-intro { padding-top: 48px; }
  .mkc-rules { grid-template-columns: 1fr; gap: 14px; margin-top: 40px; }
  .mkc-rule { min-height: 0; padding: 24px; }
  .mkc-list { gap: 56px; }
  .mkc-stage { height: auto; padding: 24px 16px 28px; }
  .mkc-scene { position: relative; inset: auto; display: flex; flex-direction: column; font-size: 14px; }
  .mkc-scene > * { position: relative; left: auto; right: auto; top: auto; bottom: auto; width: 100%; }
  .mkc-scene > .mkc-float { width: 88%; margin: -1.4em 0 0 auto; z-index: 2; }
  .mkc-g__main, .mkc-g__float { font-size: 14px; }
  .mkc-c__phone { width: 100%; max-width: 290px; margin: 0 auto; }
  .mkc-c__phone + .mkc-float { margin-top: -2.2em; }
  .mkc-stage--photo { padding: 0 16px 28px; }
  .mkc-stage--photo .mkc-scene { padding-top: 200px; }
  .mkc-scene > .mkc-bg { position: absolute; inset: 0 -16px auto; width: calc(100% + 32px); height: 260px; }
  .mkc-slot { grid-template-columns: 2.9em 2.1em 1fr auto; gap: .55em; }
  .mkc-cap h3 { font-size: 24px; letter-spacing: -.4px; }
  .mkc-meta div { grid-template-columns: 68px 1fr; }
}

/* ───────── Pricing ───────── */
/* Plumo · pricing.html (pr-) and 404.html (nf-). Page CSS only; shared classes come from plumo.css. */

/* body class "pricing" would pick up the shared .pricing band padding — cancel it on the body */

/* ── pricing hero: chip · 80px title · one line · billing toggle (faint grid + soft glows behind) ── */
.pr-top { position: relative; isolation: isolate; padding-top: 96px; overflow-x: clip; }
.pr-top .hero__grid { top: 24px; }
.pr-glow { position: absolute; z-index: -1; width: 520px; height: 420px; border-radius: 50%; pointer-events: none; }
.pr-glow--a { left: 0; top: 40px; background: radial-gradient(closest-side, rgba(254,211,241,.5), rgba(255,233,204,.2) 60%, rgba(255,255,255,0)); }
.pr-glow--b { right: 0; top: 120px; background: radial-gradient(closest-side, rgba(247,254,142,.5), rgba(255,255,255,0)); }
.pr-hero { display: flex; flex-direction: column; align-items: center; gap: 24px; text-align: center; max-width: 960px; margin-inline: auto; padding: 0 24px; }
.pr-hero .t-h1 { max-width: 900px; }
.pr-hero__lead { max-width: 540px; color: var(--text-2); }
.pr-toggle { display: inline-flex; gap: 4px; padding: 4px; border-radius: var(--r-pill); background: #fff; border: 1px solid var(--line-2); box-shadow: var(--shadow-1); margin-top: 8px; }
.pr-toggle button { display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding: 0 24px; border-radius: var(--r-pill); font: 500 16px/1.7 var(--font-display); color: var(--text-2); transition: background-color .35s var(--ease), color .35s var(--ease); }
.pr-toggle button:hover { color: var(--ink); }
.pr-toggle button[aria-pressed="true"] { background: var(--ink); color: var(--on-accent); box-shadow: var(--btn-inset); }
.pr-toggle em { font: 500 13px/1 var(--font); font-style: normal; background: var(--lime); color: var(--ink); border-radius: var(--r-pill); padding: 5px 9px; }

/* ── plans: one rainbow band · Starter on the colour · Growth + Agency in a white card ── */
.pr-band { width: min(var(--band), 100% - 2 * var(--gutter)); margin: var(--head-gap) auto 0; border-radius: var(--r-lg); background: var(--grad-chip); padding: 40px; }
.pr-grid { display: grid; grid-template-columns: 1fr 912px; align-items: stretch; }
.pr-card { display: grid; grid-template-columns: 1fr 1fr; background: #fff; border-radius: var(--r-lg); box-shadow: var(--shadow-1); }
.pr-plan { position: relative; display: flex; flex-direction: column; align-items: flex-start; padding: 48px 48px 44px; }
.pr-plan--bare { padding-left: 36px; padding-right: 40px; }
.pr-card .pr-plan + .pr-plan::before { content: ""; position: absolute; left: 0; top: 48px; bottom: 48px; width: 1px; background: var(--line-2); }
.pr-plan h3 { display: flex; align-items: center; gap: 10px; font: 500 24px/1.6 var(--font-display); letter-spacing: -.5px; }
.pr-plan .price { margin-top: 12px; }
.pr-plan .price sup { font-size: 30px; line-height: 40px; }
.pr-plan .price b { font-size: 56px; }
.pr-bill { margin-top: 2px; font: 400 14px/1.6 var(--font); color: var(--muted); }
.pr-plan__desc { margin-top: 16px; color: var(--text-2); max-width: 330px; }
.pr-plan .btn { margin-top: 32px; min-width: 228px; }
.pr-rule { align-self: stretch; height: 1px; background: var(--line-2); margin: 36px 0 28px; }
.pr-plan .ticks { grid-template-columns: 1fr; gap: 14px; margin-top: 0; }
.pr-plan .ticks li { color: var(--text-2); }
/* Starter sits straight on the rainbow: ink text, white tick wells */
.pr-plan--bare .pr-bill, .pr-plan--bare .pr-plan__desc, .pr-plan--bare .ticks li, .pr-plan--bare .price span { color: rgba(3,41,74,.82); }
.pr-plan--bare .pr-rule { background: rgba(255,255,255,.8); }
.pr-plan--bare .ticks svg { background: #fff; border-radius: 50%; }

/* enterprise strip: glass on the rainbow, under the plans */
.pr-ent { display: flex; justify-content: space-between; align-items: center; gap: 24px; margin-top: 24px; padding: 28px 32px 28px 36px; border-radius: var(--r-lg); background: rgba(255,255,255,.5); border: 1px solid rgba(255,255,255,.85); }
.pr-ent h3 { font: 500 24px/1.6 var(--font-display); letter-spacing: -.5px; }
.pr-ent p { color: rgba(3,41,74,.82); }

/* ── comparison table ── */
.pr-table-wrap { margin-top: var(--head-gap); border: 1px solid var(--line-2); border-radius: var(--r-lg); overflow: hidden; }
.pr-table { width: 100%; border-collapse: collapse; table-layout: fixed; }
.pr-table th, .pr-table td { padding: 20px 28px; border-bottom: 1px solid var(--line-2); text-align: center; font: 400 16px/1.6 var(--font); color: var(--text-2); }
.pr-table tr > :first-child { width: 37%; text-align: left; padding-left: 36px; }
.pr-table thead th { padding-top: 28px; padding-bottom: 28px; background: var(--paper-soft); font: 500 20px/1.5 var(--font-display); color: var(--ink); vertical-align: middle; }
.pr-table tbody th { font: 500 17px/1.5 var(--font-display); color: var(--ink); }
.pr-table tbody tr:last-child > * { border-bottom: 0; }
.pr-table .is-pop { background: var(--paper); }
.pr-table thead .is-pop { background: var(--paper-2); }
.pr-table td svg { width: 24px; height: 24px; margin: 0 auto; fill: none; stroke: var(--ink); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.pr-table td b { font-weight: 500; color: var(--ink); }
.pr-no { color: var(--muted); }
.pr-tag { display: inline-block; vertical-align: middle; margin-left: 8px; font: 500 13px/20px var(--font); background: var(--ink); color: #fff; border-radius: 8px; padding: 1px 8px; }

/* ── proof row: quote · result on a blurred photo · quote ── */
.pr-proof { padding: var(--band-pad) 40px; }
.pr-proof__grid { display: grid; grid-template-columns: 1.3fr 1fr 1.3fr; gap: 24px; margin-top: var(--head-gap); }
.pr-proof__grid > * { position: relative; overflow: hidden; min-height: 360px; border-radius: var(--r-lg); background: #fff; }
.pr-proof .quote blockquote p { font: 500 20px/1.5 var(--font-display); letter-spacing: -.2px; }
.pr-proof .quote__foot { padding-top: 32px; }
.pr-proof .who b { color: var(--ink); }

/* ── responsive ── */
@media (max-width: 1360px) {
  .pr-grid { grid-template-columns: 1fr 2fr; }
  .pr-plan { padding: 40px 32px 36px; }
  .pr-plan--bare { padding-left: 24px; padding-right: 28px; }
  .pr-card .pr-plan + .pr-plan::before { top: 40px; bottom: 40px; }
  .pr-plan .btn { min-width: 0; align-self: stretch; }
  .pr-plan .price b { font-size: 48px; }
}
@media (max-width: 991px) {
  .pr-band { padding: 24px; }
  .pr-grid { grid-template-columns: 1fr; gap: 8px; }
  .pr-plan--bare { padding: 24px 16px 32px; }
  .pr-plan--bare .btn { align-self: flex-start; min-width: 228px; }
  .pr-proof { padding-inline: 24px; }
  .pr-proof__grid { grid-template-columns: 1fr 1fr; }
  .pr-proof__grid > .stat { order: -1; grid-column: 1 / -1; min-height: 300px; }
}
@media (max-width: 767px) {
  .pr-top { padding-top: 64px; }
  .pr-hero { padding: 0 var(--gutter); gap: 20px; }
  .pr-glow { width: 300px; height: 280px; }
  .pr-toggle button { padding: 0 16px; font-size: 15px; }
  .pr-band { padding: 12px; }
  .pr-plan--bare { padding: 28px 16px 32px; }
  .pr-plan--bare .btn { align-self: stretch; }
  .pr-card { grid-template-columns: 1fr; }
  .pr-plan { padding: 32px 24px; }
  .pr-card .pr-plan + .pr-plan::before { left: 24px; right: 24px; top: 0; bottom: auto; width: auto; height: 1px; }
  .pr-ent { flex-direction: column; align-items: flex-start; margin-top: 16px; padding: 24px 20px; }
  .pr-ent h3 { font-size: 20px; }
  .pr-ent .btn { align-self: stretch; }
  .pr-table th, .pr-table td { padding: 14px 6px; font-size: 14px; }
  .pr-table tr > :first-child { width: 34%; padding-left: 14px; }
  .pr-table thead th { padding: 18px 6px; font-size: 15px; }
  .pr-table tbody th { font-size: 14px; }
  .pr-table td svg { width: 20px; height: 20px; }
  .pr-tag { display: block; width: max-content; margin: 4px auto 0; font-size: 11px; line-height: 16px; }
  .pr-proof { padding: var(--band-pad) 16px; }
  .pr-proof__grid { grid-template-columns: 1fr; }
  .pr-proof__grid > * { min-height: 0; }
  .pr-proof__grid > .stat { min-height: 280px; }
  .pr-proof .quote blockquote p { font-size: 18px; }
}

/* ══ 404 ══ */
.nf { position: relative; isolation: isolate; padding-top: 96px; overflow-x: clip; }
.nf .hero__grid { top: 24px; }
.nf__copy { display: flex; flex-direction: column; align-items: center; gap: 24px; text-align: center; max-width: 900px; margin-inline: auto; padding: 0 24px; }
.nf__copy > p { max-width: 520px; color: var(--text-2); }
.nf__ctas { display: flex; gap: 16px; flex-wrap: wrap; justify-content: center; margin-top: 8px; }
.nf__ctas .btn--line { min-width: 200px; }
.nf__tile { width: min(880px, 100%); height: 420px; margin: var(--head-gap) auto 0; }
.nf__tile .stack { margin-top: 44px; }
.nf__tile .mk-metric__num { font-size: 48px; }
.nf-search { display: flex; align-items: center; gap: 8px; font: 400 14px/1.4 var(--font); color: var(--text-2); }
.nf-search svg { width: 18px; height: 18px; fill: none; stroke: var(--ink); stroke-width: 2; stroke-linecap: round; }
.nf__tile .mk-metric__note b { color: var(--danger-ink); }

@media (max-width: 767px) {
  .nf { padding-top: 64px; }
  .nf__copy { padding: 0 var(--gutter); gap: 20px; }
  .nf__ctas { flex-direction: column; width: 100%; }
  .nf__ctas .btn { width: 100%; }
  .nf__tile { height: 340px; }
  .nf__tile .stack { position: relative; left: auto; top: auto; transform: none; width: calc(100% - 32px); max-width: 360px; height: 250px; margin: 0; }
  .nf__tile .stack__ghost:nth-child(1) { width: 78%; }
  .nf__tile .stack__ghost:nth-child(2) { width: 86%; top: 28px; }
  .nf__tile .stack__ghost:nth-child(3) { width: 94%; top: 56px; }
  .nf__tile .stack .mk-metric { top: 88px; padding: 18px 20px; border-radius: 22px; }
  .nf__tile .mk-metric__body { margin-top: 20px; }
  .nf__tile .mk-metric__num { font-size: 30px; }
  .nf__tile .mk-metric__head { font-size: 15px; }
}

/* ───────── Styleguide ───────── */
/* Plumo style guide page (sg-). Tokens only. Loads after plumo.css. */

/* ── shared bits ── */
.sg-code { font: 400 13px/1.5 var(--mono); color: var(--text-2); }
.sg-sec .shead { margin-bottom: 0; }
.sg-sub { margin-top: 56px; }
.sg-sub > h3 { font: 500 24px/1.6 var(--font-display); letter-spacing: -.5px; }
.sg-sub > p { margin-top: 4px; color: var(--text-2); max-width: 640px; }

/* ── 1 · overview board (first 1440×990 screen) ── */
.sg-hero { position: relative; isolation: isolate; overflow: hidden; width: min(var(--band), 100% - 2 * var(--gutter)); margin: 20px auto 0; padding: 36px 48px 40px; border-radius: var(--r-xl); background: var(--paper-soft); }
.sg-hero__glow { position: absolute; z-index: -1; left: 50%; bottom: -60px; width: 1920px; max-width: none; height: 1132px; transform: translateX(-50%) rotate(180deg); pointer-events: none; }
.sg-hero__top { display: grid; grid-template-columns: 1fr 400px; gap: 48px; align-items: end; }
.sg-hero__top h1 { margin-top: 14px; }
.sg-hero__side p { color: var(--text-2); }
.sg-hero__meta { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.sg-hero__meta span { background: var(--surface); border-radius: var(--r-pill); padding: 4px 14px; font: 500 14px/1.7 var(--font-display); }

.sg-board { display: grid; grid-template-columns: repeat(4, 1fr); grid-template-rows: 292px 292px; gap: 20px; margin-top: 28px;
  grid-template-areas: "col col type ui" "chart metric type step"; }
.sg-tile { position: relative; display: flex; flex-direction: column; gap: 14px; min-width: 0; padding: 22px 24px 24px; border-radius: var(--r-lg); background: var(--surface); overflow: hidden; }
.sg-tile__n { display: flex; justify-content: space-between; align-items: center; gap: 12px; font: 500 15px/1.4 var(--font-display); }
.sg-tile__n span { font: 400 12px/1.4 var(--mono); color: var(--text-2); white-space: nowrap; }
.sg-colour { grid-area: col; }
.sg-type { grid-area: type; }
.sg-ui { grid-area: ui; background: var(--paper); }
.sg-chart { grid-area: chart; }
.sg-metric { grid-area: metric; background: var(--violet); }
.sg-stepmini { grid-area: step; }

/* colour tile */
.sg-fields { flex: 1; display: grid; grid-template-columns: 1.3fr repeat(4, 1fr); gap: 10px; min-height: 0; }
.sg-field { display: flex; flex-direction: column; justify-content: flex-end; border-radius: var(--r); padding: 12px 14px; font: 400 13px/1.4 var(--font); }
.sg-field b { font: 500 15px/1.3 var(--font-display); }
.sg-field--ink { background: var(--ink); color: var(--on-accent); }
.sg-rainbow { display: flex; align-items: center; justify-content: space-between; height: 46px; border-radius: var(--r-sm); background: var(--grad-chip); padding: 0 16px; font: 500 14px/1 var(--font-display); }
.sg-rainbow span { font: 400 12px/1 var(--mono); }
.sg-dots { display: flex; flex-wrap: wrap; gap: 6px 18px; font: 400 13px/1.4 var(--font); color: var(--text-2); }
.sg-dots span { display: inline-flex; align-items: center; gap: 6px; }
.sg-dots i { width: 14px; height: 14px; border-radius: 50%; border: 1px solid var(--line); }

/* type tile */
.sg-aa { font: 600 168px/.9 var(--font-display); letter-spacing: -8px; margin: 10px 0 4px; }
.sg-fams { display: grid; gap: 12px; }
.sg-fams div { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; border-top: 1px solid var(--line-2); padding-top: 12px; }
.sg-fams b { font: 600 24px/1.2 var(--font-display); letter-spacing: -.5px; white-space: nowrap; }
.sg-type__line { font: 600 28px/1.15 var(--font-display); letter-spacing: -.8px; margin-top: 16px; }
.sg-fams .sg-f-body { font: 400 24px/1.2 var(--font); letter-spacing: -.3px; }
.sg-fams small { font-size: 13px; color: var(--text-2); text-align: right; }
.sg-ladder { margin-top: auto; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.sg-ladder span { background: var(--paper); border-radius: var(--r-sm); padding: 10px 12px; font: 400 13px/1.3 var(--font); color: var(--text-2); }
.sg-ladder b { display: block; font: 600 24px/1.1 var(--font-display); letter-spacing: -.5px; color: var(--ink); }

/* ui tile */
.sg-ui .chip { align-self: flex-start; }
.sg-ui .btn { width: 100%; }
.sg-ui__icons { display: flex; gap: 10px; margin-top: auto; }
.sg-ui__icons .icon-tile { width: 48px; height: 48px; border-radius: 10px; }
.sg-ui__icons .icon-tile svg { width: 22px; height: 22px; }

/* chart tile */
.sg-chart .mk-chart__plot { height: 196px; font-size: 14px; }
.sg-chart .mk-chart__head { margin-bottom: 14px; font-size: 15px; }

/* metric tile (violet dotted field, ghosts + one metric card) */
.sg-metric .sg-tile__n span { color: var(--ink); }
.sg-metric::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(circle, rgba(255,255,255,.28) 1.5px, transparent 1.8px); background-size: 14px 14px; pointer-events: none; }
.sg-metric > * { position: relative; }
.sg-stack { position: relative; flex: 1; }
.sg-stack i { position: absolute; left: 50%; transform: translateX(-50%); height: 60px; border-radius: 20px; background: var(--surface); border: 3px solid rgba(255,255,255,.7); }
.sg-stack i:nth-child(1) { top: 16px; width: 78%; opacity: .85; }
.sg-stack i:nth-child(2) { top: 34px; width: 89%; opacity: .92; }
.sg-stack .sg-mcard { position: absolute; left: 0; right: 0; top: 54px; background: var(--surface); border: 3px solid var(--lilac); border-radius: 22px; padding: 16px 18px; box-shadow: 0 -4px 16px rgba(3,41,74,.05); }
.sg-mcard .mk-metric__head { font-size: 15px; }
.sg-mcard .mk-metric__body { margin-top: 18px; flex-wrap: wrap; gap: 6px 12px; }
.sg-mcard .mk-metric__num { font-size: 32px; }
.sg-mcard .mk-metric__note { font-size: 13px; }

/* step mini */
.sg-stepmini { background: var(--lime); justify-content: flex-end; gap: 8px; }
.sg-stepmini .sg-tile__n { position: absolute; left: 24px; right: 24px; top: 22px; }
.sg-stepmini__ic { position: absolute; left: 24px; top: 62px; }
.sg-stepmini__t { font: 500 24px/1.35 var(--font-display); letter-spacing: -.5px; }
.sg-stepmini p:last-child { color: var(--text-2); font-size: 15px; }

/* ── 2 · colour ── */
.sg-groups { display: grid; gap: 48px; margin-top: 64px; }
.sg-group > h3 { font: 500 20px/1.5 var(--font-display); }
.sg-group > p { color: var(--text-2); font-size: 15px; margin-top: 2px; }
.sg-sws { display: grid; grid-template-columns: repeat(6, 1fr); gap: 20px; margin-top: 18px; }
.sg-sw { display: flex; flex-direction: column; gap: 2px; font: 400 13px/1.5 var(--font); color: var(--text-2); }
.sg-sw i { display: block; height: 96px; border-radius: var(--r); border: 1px solid var(--line-2); margin-bottom: 10px; }
.sg-sw b { font: 500 15px/1.4 var(--font-display); color: var(--ink); }
.sg-sw code { font: 400 13px/1.5 var(--mono); color: var(--ink); }
.sg-grad { margin-top: 18px; }
.sg-grad__bar { height: 96px; border-radius: var(--r-lg); background: var(--grad-chip); }
.sg-grad__stops { display: grid; grid-template-columns: repeat(5, 1fr); margin-top: 10px; font: 400 13px/1.5 var(--font); color: var(--text-2); }
.sg-grad__stops span:nth-child(3) { text-align: center; } .sg-grad__stops span:nth-child(4) { text-align: center; } .sg-grad__stops span:last-child { text-align: right; }
.sg-grad__stops b { display: block; font: 500 14px/1.4 var(--font-display); color: var(--ink); }
.sg-grad__uses { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 18px; align-items: center; }

/* ── 3 · type ── */
.sg-fonts { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 24px; margin-top: 64px; }
.sg-font { border-radius: var(--r-lg); background: var(--paper); padding: 32px; display: flex; flex-direction: column; gap: 10px; }
.sg-font .sg-font__aa { font: 600 96px/1 var(--font-display); letter-spacing: -4px; color: var(--ink); }
.sg-font--body .sg-font__aa { font: 400 96px/1 var(--font); letter-spacing: -3px; }
.sg-font--mono .sg-font__aa { font: 400 80px/1.2 var(--mono); letter-spacing: -4px; }
.sg-font > h3 { font: 500 24px/1.6 var(--font-display); letter-spacing: -.5px; }
.sg-font > p { color: var(--text-2); font-size: 15px; }
.sg-trows { margin-top: 40px; border-top: 1px solid var(--line-2); }
.sg-trow { display: grid; grid-template-columns: 240px 1fr; gap: 40px; align-items: baseline; padding: 28px 0; border-bottom: 1px solid var(--line-2); }
.sg-trow__meta b { display: block; font: 400 15px/1.5 var(--mono); color: var(--ink); }
.sg-trow__meta span { font: 400 13px/1.5 var(--font); color: var(--text-2); }
.sg-trow .t-lead, .sg-trow .t-body, .sg-trow .t-small { color: var(--text-2); max-width: 720px; }

/* ── 4 · shape, space, shadow, motion ── */
.sg-shape { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 64px; }
.sg-panel { border-radius: var(--r-lg); background: var(--paper); padding: 32px; }
.sg-panel > h3 { font: 500 24px/1.6 var(--font-display); letter-spacing: -.5px; }
.sg-panel > p { color: var(--text-2); font-size: 15px; margin-top: 2px; }
.sg-radii { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 24px; }
.sg-radius { display: flex; flex-direction: column; gap: 4px; font: 400 13px/1.4 var(--font); color: var(--text-2); }
.sg-radius i { display: block; height: 76px; background: var(--surface); border: 2px solid var(--ink); border-right: 0; border-bottom: 0; }
.sg-radius b { font: 500 15px/1.4 var(--font-display); color: var(--ink); }
.sg-space { display: grid; gap: 14px; margin-top: 24px; }
.sg-space__row { display: grid; grid-template-columns: 150px 1fr 64px; gap: 14px; align-items: center; font: 400 13px/1.4 var(--font); color: var(--text-2); }
.sg-space__row code { font: 400 13px/1.4 var(--mono); color: var(--ink); }
.sg-space__row i { display: block; height: 16px; border-radius: 4px; background: var(--lilac-2); }
.sg-space__row span:last-child { text-align: right; font: 500 14px/1 var(--font-display); color: var(--ink); }
.sg-shadows { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 24px; }
.sg-shadow { display: grid; place-items: center; height: 132px; border-radius: var(--r); background: var(--surface); font: 400 13px/1.4 var(--mono); text-align: center; }
.sg-shadow--1 { box-shadow: var(--shadow-1); }
.sg-shadow--2 { box-shadow: var(--shadow-2); }
.sg-shadow .btn { pointer-events: none; }
.sg-shadow small { display: block; margin-top: 10px; font-size: 13px; line-height: 1.5; color: var(--text-2); }
.sg-motion { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 24px; }
.sg-curve { background: var(--surface); border-radius: var(--r); padding: 16px 16px 14px; font: 400 13px/1.55 var(--font); color: var(--text-2); }
.sg-curve svg { width: 100%; height: auto; margin-bottom: 10px; }
.sg-curve b { display: block; font: 400 13px/1.5 var(--mono); color: var(--ink); }

/* ── 5 · components ── */
.sg-comps { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; margin-top: 64px; }
.sg-item { display: flex; flex-direction: column; margin: 0; border: 1px solid var(--line-2); border-radius: var(--r-lg); overflow: hidden; }
.sg-item--wide { grid-column: 1 / -1; }
.sg-item__stage { flex: 1; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 16px; padding: 40px 32px; background: var(--paper-soft); }
.sg-item__stage--white { background: var(--surface); }
.sg-item__stage--cream { background: var(--paper); }
.sg-cap { padding: 18px 24px 20px; background: var(--surface); border-top: 1px solid var(--line-2); }
.sg-cap > h3 { font: 500 20px/1.5 var(--font-display); }
.sg-cap code { display: block; margin-top: 2px; font: 400 13px/1.6 var(--mono); color: var(--text-2); }
.sg-cap p { margin-top: 4px; font-size: 14px; color: var(--text-2); }

/* component stages that need a frame */
.sg-head { width: 100%; }
.sg-head .site-head__in { background: var(--surface); box-shadow: var(--shadow-1); }
.sg-head .nav span { font: 500 16px/1.7 var(--font-display); padding: 8px 16px; color: rgba(3,41,74,.8); }
.sg-head .site-head__end span:not(.btn) { font: 500 16px/1.7 var(--font-display); }
.sg-tiles { display: flex; gap: 14px; }
.sg-tiles > div { width: 92px; height: 92px; border-radius: var(--r); display: grid; place-items: center; }
.sg-item .case { width: 100%; max-width: 560px; min-height: 0; background: var(--surface); }
.sg-item .quote { width: 100%; max-width: 560px; min-height: 280px; background: var(--surface); border-radius: var(--r-lg); }
.sg-item .stat { position: relative; overflow: hidden; width: 300px; height: 320px; background: var(--surface); border-radius: var(--r-lg); }
.sg-statrow { display: flex; gap: 20px; align-items: stretch; }
.sg-item .plan { width: 100%; max-width: 620px; }
.sg-ticks { background: var(--surface); border-radius: var(--r-lg); padding: 28px 32px; width: 100%; max-width: 560px; }
.sg-ticks .ticks { margin-top: 0; }
.sg-item .faq__list { width: 100%; max-width: 720px; }
.sg-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; width: 100%; }
.sg-steps .step { position: relative; left: auto; top: auto; width: auto; height: 300px; }
.sg-steps .step:nth-child(2) { margin-top: 48px; height: 252px; }
.sg-steps .step--lime { background: var(--lime); } .sg-steps .step--mint { background: var(--mint); } .sg-steps .step--pink { background: var(--pink); }
.sg-item .fband { width: 100%; min-height: 440px; grid-template-columns: 1fr 420px; padding: 0 56px; }
.sg-fband__v { position: relative; height: 360px; }
.sg-fband__v .mk-confirm { position: absolute; left: 10px; top: 0; width: 236px; font-size: 16px; }
.sg-fband__v .fv-line { left: 130px; top: 214px; width: 290px; }
.sg-item .stack-tile { width: 100%; max-width: 676px; height: 420px; }
.sg-item .stack { transform: scale(.9); }
.sg-item .enterprise { width: 100%; margin: 0; }
.sg-item .ribbon { width: 100%; border-radius: var(--r); }
.sg-livenote { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; width: 100%; }
.sg-livenote a { display: flex; align-items: center; justify-content: space-between; gap: 16px; background: var(--surface); border-radius: var(--r); padding: 22px 24px; font: 500 18px/1.4 var(--font-display); transition: background-color .35s var(--ease); }
.sg-livenote a:hover { background: var(--paper-2); }
.sg-livenote code { display: block; font: 400 13px/1.5 var(--mono); color: var(--text-2); }
.sg-livenote svg { width: 20px; height: 20px; flex: none; fill: none; stroke: var(--ink); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transform: rotate(90deg); }

/* ── 6 · mock-up kit atoms ── */
.sg-kit { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 64px; }
.sg-kit .sg-item__stage { padding: 32px 28px; min-height: 340px; }
.sg-kit__app { grid-column: 1 / -1; }
.sg-kit__app .sg-item__stage { display: block; padding: 32px; }
.sg-kit__app .sg-item__stage:has(.sg-atoms) { display: flex; min-height: 0; }
.sg-kit__app .mk-scale { border: 8px solid var(--surface); border-radius: var(--r); background: var(--surface); box-shadow: var(--shadow-1); }
.sg-glassdemo { position: relative; width: 100%; height: 300px; }
.sg-glassdemo .mk-glass { position: absolute; inset: 0; }
.sg-glassdemo .mk-glass__card { position: absolute; left: 34px; right: 34px; top: 28px; }
.sg-glassdemo .mk-post { position: absolute; left: -6px; bottom: -12px; z-index: 2; font-size: 14px; }
.sg-linecard { width: 100%; background: var(--surface); border-radius: var(--r-sm); padding: 18px 16px 12px; box-shadow: var(--shadow-2); }
.sg-linecard .mk-chart__head { font-size: 15px; margin-bottom: 18px; }
.sg-gaugecard { width: 100%; background: var(--surface); border-radius: var(--r-lg); padding: 20px 36px 18px; }
.sg-gaugecard .mk-chart__head { font-size: 15px; margin-bottom: 6px; }
.sg-gaugecard .mk-gauge__num { font-size: 15px; top: 46%; }
.sg-adwin { width: 100%; max-width: 330px; }
.sg-adwin .mk-ad { aspect-ratio: 418 / 300; font-size: 14px; }
.sg-adwin .mk-ad__shade { background: linear-gradient(to bottom, rgba(3,41,74,.6), rgba(3,41,74,0) 26%, rgba(3,41,74,0) 30%, rgba(3,41,74,.55) 52%, rgba(3,41,74,.9)); }
.sg-orb svg { width: 1.8em; height: 1.8em; fill: var(--on-accent); }
.sg-adwin p { margin-top: 10px; font: 500 16px/1.4 var(--font-display); }
.sg-adwin p small { display: block; font: 400 14px/1.5 var(--font); color: var(--text-2); }
.sg-kit .mk-confirm { width: 230px; font-size: 17px; }
.sg-sheets { position: relative; width: 100%; height: 270px; font-size: 15px; }
.sg-sheets .mk-sheet { position: absolute; }
.sg-sheets .s1 { left: 0; top: 0; width: 76%; }
.sg-sheets .s2 { right: 0; top: 104px; width: 70%; }
.sg-kit .mk-chat { width: 100%; font-size: 15px; }
.sg-kit .mk-gen { width: 100%; font-size: 15px; }
.sg-atoms { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 20px 40px; width: 100%; font-size: 16px; }
.sg-atoms > div { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }

/* ── 7 · icons ── */
.sg-icons { display: grid; grid-template-columns: repeat(9, 1fr); gap: 12px; margin-top: 64px; }
.sg-icon { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 20px 8px 14px; border-radius: var(--r); background: var(--paper); font: 400 13px/1.3 var(--mono); color: var(--text-2); }
.sg-icon svg { width: 26px; height: 26px; fill: none; stroke: var(--ink); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.sg-icon--fill svg { fill: var(--ink); stroke: none; }

/* ── responsive ── */
@media (max-width: 1240px) {
  .sg-hero__top { grid-template-columns: 1fr; gap: 20px; }
  .sg-board { grid-template-columns: 1fr 1fr; grid-template-rows: none; grid-auto-rows: minmax(300px, auto);
    grid-template-areas: "col col" "type ui" "type chart" "metric step"; }
  .sg-sws { grid-template-columns: repeat(4, 1fr); }
  .sg-fonts { grid-template-columns: 1fr 1fr; }
  .sg-shape { grid-template-columns: 1fr; }
  .sg-kit { grid-template-columns: 1fr 1fr; }
  .sg-icons { grid-template-columns: repeat(6, 1fr); }
  .sg-item .fband { grid-template-columns: 1fr 1fr; padding: 0 40px; }
}
@media (max-width: 991px) {
  .sg-comps { grid-template-columns: 1fr; }
  .sg-item .fband { grid-template-columns: 1fr; padding: 48px 28px 24px; }
  .sg-livenote { grid-template-columns: 1fr; }
}
@media (max-width: 767px) {
  .sg-hero { padding: 28px 16px 16px; border-radius: var(--r-lg); margin-top: 12px; }
  .sg-board { grid-template-columns: 1fr; grid-auto-rows: auto; gap: 14px; grid-template-areas: "col" "type" "ui" "chart" "metric" "step"; }
  .sg-tile { min-height: 0; padding: 20px; }
  .sg-fields { grid-template-columns: repeat(3, 1fr); min-height: 0; }
  .sg-field { min-height: 92px; }
  .sg-aa { font-size: 120px; letter-spacing: -6px; }
  .sg-ladder span { padding: 8px 10px; }
  .sg-chart { min-height: 300px; }
  .sg-metric { min-height: 250px; }
  .sg-stepmini { min-height: 240px; }
  .sg-sws { grid-template-columns: repeat(2, 1fr); gap: 16px; }
  .sg-sw i { height: 72px; }
  .sg-grad__stops { grid-template-columns: repeat(3, 1fr); gap: 8px; }
  .sg-grad__stops span { text-align: left !important; }
  .sg-fonts { grid-template-columns: 1fr; }
  .sg-trow { grid-template-columns: 1fr; gap: 6px; padding: 22px 0; }
  .sg-panel { padding: 24px 18px; }
  .sg-radii { grid-template-columns: repeat(2, 1fr); }
  .sg-space__row { grid-template-columns: 110px 1fr 48px; }
  .sg-shadows, .sg-motion { grid-template-columns: 1fr; }
  .sg-item__stage { padding: 28px 16px; }
  .sg-kit { grid-template-columns: 1fr; }
  .sg-kit__app .sg-item__stage { padding: 16px 12px; }
  .sg-statrow { flex-direction: column; width: 100%; }
  .sg-item .stat { width: 100%; }
  .sg-steps { grid-template-columns: 1fr; }
  .sg-steps .step, .sg-steps .step:nth-child(2) { margin-top: 0; height: 240px; }
  .sg-item .fband { padding: 36px 18px 16px; }
  .sg-fband__v { height: 330px; }
  .sg-fband__v .mk-confirm { left: 0; top: 0; width: 220px; font-size: 15px; }
  .sg-fband__v .fv-line { left: auto; right: 0; top: 168px; width: 250px; }
  .sg-icons { grid-template-columns: repeat(3, 1fr); }
  .sg-head .site-head__in { padding: 0 12px; }
  .sg-tiles > div { width: 64px; height: 64px; }
  .sg-glassdemo .mk-glass__card { left: 14px; right: 14px; }
}

/* ───────── Variants ───────── */
/* Plumo · variants.html — the layout-variants library (prefix v-). Same tokens, type, pills and pastel fields as the
   gold page; every variant sits under a small caption row (.v-label). */

/* ── library chrome ── */
.variants main { padding-bottom: 40px; }
.v-intro { padding-top: 96px; }
.v-intro .wrap { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; }
.v-intro h1 { max-width: 920px; }
.v-intro .t-lead { max-width: 620px; color: var(--text-2); }
.v-jump { display: grid; grid-template-columns: repeat(3, max-content); justify-content: space-between; gap: 14px 40px; width: 100%; margin-top: 24px; padding-top: 32px; border-top: 1px solid var(--line-2); }
.v-jump li { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; }
.v-jump span { min-width: 92px; font: 500 15px/1.6 var(--font-display); color: var(--ink); }
.v-jump a { padding: 2px 10px; border-radius: var(--r-pill); background: var(--paper); font: 400 14px/1.7 var(--font-display); color: var(--text-2); transition: background-color .3s var(--ease), color .3s var(--ease); }
.v-jump a:hover { background: var(--paper-2); color: var(--ink); }

.v-item { margin-top: var(--section); scroll-margin-top: 24px; }
.v-label { display: grid; grid-template-columns: auto 1fr; align-items: baseline; gap: 8px 24px; margin-bottom: 32px; padding-bottom: 16px; border-bottom: 1px dashed var(--line); }
.v-label__name { display: flex; align-items: center; gap: 12px; font: 500 18px/1.5 var(--font-display); color: var(--ink); }
.v-label__name b { font: 500 13px/1 var(--mono); color: #fff; background: var(--ink); border-radius: 8px; padding: 6px 9px; }
.v-label__cls { justify-self: end; text-align: right; font: 400 12.5px/1.6 var(--mono); color: var(--muted); }
.v-cap { grid-column: 1 / -1; max-width: 860px; font-size: 14px; line-height: 1.6; color: var(--text-2); }
.v-wide { width: min(var(--band), 100% - 2 * var(--gutter)); }

/* shared header bits */
.v-pill .site-head__end, .v-bar .site-head__end, .v-sbar .site-head__end { justify-self: end; }
:is(.v-pill, .v-sbar, .v-dhead) .menu-btn { background: var(--paper); }

/* ── header A stage: the glow card holding the gold header ── */
.v-hstage { position: relative; width: min(var(--band), 100% - 2 * var(--gutter)); height: 200px; margin-inline: auto; padding-top: 13px; border-radius: var(--r-xl); overflow: hidden; isolation: isolate; }
.v-hstage__glow { position: absolute; z-index: -1; left: 50%; top: -560px; width: 1920px; max-width: none; height: 1132px; transform: translateX(-50%) rotate(180deg); pointer-events: none; }
.v-hstage .site-head { width: min(1258px, 100% - 48px); margin: 0 auto; }
.v-hstage .mnav { position: absolute; left: 0; right: 0; }

/* ── header B: floating white pill ── */
.v-pstage { width: min(var(--band), 100% - 2 * var(--gutter)); margin-inline: auto; padding: 32px 24px 96px; border-radius: var(--r-xl); background: linear-gradient(180deg, var(--paper-soft) 0%, rgba(254,211,241,.5) 55%, rgba(247,254,142,.45) 100%); }
.v-pill { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; max-width: 1120px; height: 76px; margin-inline: auto; padding: 0 10px 0 24px; background: #fff; border-radius: var(--r-pill); box-shadow: var(--shadow-2); }
.v-pill .site-head__end > a:not(.btn) { font: 500 16px/1.7 var(--font-display); }

/* ── header C: split, logo centred ── */
.v-sbar { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; height: 88px; padding: 0 16px 0 20px; border-radius: var(--r); background: var(--paper-soft); }
.v-sbar .site-head__end .nav { margin-right: 8px; }

/* ── header D: lime utility strip + full-width bar ── */
.v-util { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 6px 14px; min-height: 40px; padding: 6px 24px; background: var(--lime); font: 500 14px/1.5 var(--font-display); color: var(--ink); text-align: center; }
.v-util b { padding: 1px 8px; border-radius: 6px; background: var(--ink); color: #fff; font: 500 12px/1.6 var(--font-display); }
.v-util a { display: inline-flex; align-items: center; gap: 4px; font-weight: 600; transition: opacity .3s var(--ease); }
.v-util a:hover { opacity: .7; }
.v-util svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.v-bar { background: #fff; border-bottom: 1px solid var(--line-2); }
.v-bar__in { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; height: 80px; }
.v-bar .site-head__end { gap: 10px; }

/* ── HERO A: split panels · owners · capability chips ── */
.v-ha { width: min(var(--band), 100% - 2 * var(--gutter)); margin-inline: auto; border-radius: var(--r-xl); overflow: hidden; background: var(--paper-soft); }
.v-ha .v-bar { background: transparent; border-bottom-color: var(--line); }
.v-ha .v-bar__in { padding: 0 32px; }
.v-ha__body { display: grid; grid-template-columns: 664px 1fr; min-height: 720px; }
.v-ha__copy { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 24px; padding: 64px 48px 64px 64px; }
.v-ha__title { font: 600 80px/1.05 var(--font-display); letter-spacing: -4px; max-width: 560px; }
.v-ha__copy .t-lead { max-width: 480px; color: var(--text-2); }
.v-ha__ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 8px; }
.v-ha__stat { display: flex; align-items: center; gap: 20px; width: 100%; max-width: 520px; margin-top: 16px; padding-top: 24px; border-top: 1px solid var(--line); }
.v-ha__stat b { font: 600 48px/1 var(--font-display); letter-spacing: -1.5px; color: var(--ink); }
.v-ha__stat span { max-width: 280px; font-size: 15px; line-height: 1.5; color: var(--text-2); }
.v-ha__panel { position: relative; background: var(--lilac); }
.v-ha__tiles { position: absolute; inset: 0; overflow: hidden; }
.v-ha__tiles::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(circle, rgba(255,255,255,.7) 1.5px, transparent 1.8px); background-size: 15px 15px; -webkit-mask: linear-gradient(160deg, #000, rgba(0,0,0,.2)); mask: linear-gradient(160deg, #000, rgba(0,0,0,.2)); }
.v-tile { position: absolute; margin: 0; border-radius: var(--r-lg); overflow: hidden; box-shadow: 0 24px 50px -30px rgba(3,41,74,.4); }
.v-tile img { width: 100%; height: 100%; object-fit: cover; }
.v-tile--1 img { object-position: 88% 50%; }
.v-tile--1 { left: 8%; top: 9%; width: 40%; height: 53%; }
.v-tile--2 { left: 52%; top: -7%; width: 40%; height: 58%; }
.v-tile--2 img { object-position: 22% 40%; }
.v-tile--3 { left: 8%; top: 66%; width: 40%; height: 46%; }
.v-tile--3 img { object-position: 60% 30%; }
.v-tile__tag { position: absolute; left: 12px; bottom: 12px; padding: 7px 12px; border-radius: 12px; background: rgba(255,255,255,.95); font: 500 14px/1.3 var(--font-display); color: var(--ink); }
.v-tile__tag small { display: block; font: 400 12px/1.5 var(--font); color: var(--text-2); }
.v-crowd { position: absolute; left: 52%; top: 55%; width: 40%; padding: 22px 22px 24px; border-radius: var(--r-lg); background: #fff; box-shadow: 0 24px 50px -30px rgba(3,41,74,.4); }
.v-crowd__faces { display: flex; }
.v-crowd__faces img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; border: 3px solid #fff; }
.v-crowd__faces img + img { margin-left: -12px; }
.v-crowd p { margin-top: 14px; font-size: 15px; line-height: 1.5; color: var(--text-2); }
.v-crowd b { display: block; font: 600 24px/1.45 var(--font-display); letter-spacing: -.5px; color: var(--ink); }
.v-cchip { position: absolute; z-index: 2; display: inline-flex; align-items: center; gap: 10px; padding: 7px 18px 7px 7px; border-radius: var(--r-pill); background: #fff; box-shadow: var(--shadow-2); font: 500 15px/1.3 var(--font-display); color: var(--ink); white-space: nowrap; }
.v-cchip i { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--c, var(--pink)); }
.v-cchip svg { width: 18px; height: 18px; fill: none; stroke: var(--ink); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.v-cchip--1 { left: -64px; top: 30%; }
.v-cchip--2 { left: -24px; top: 82%; }
.v-cchip--3 { right: 4%; top: 3%; }
.v-cchip--4 { left: 56%; top: 88%; }

/* ── HERO B: rainbow art stage · staggered caps · stats row ── */
.v-hb { position: relative; width: min(var(--band), 100% - 2 * var(--gutter)); height: 900px; margin-inline: auto; border-radius: var(--r-xl); overflow: hidden; isolation: isolate; background: #fff; }
.v-hb__glow { position: absolute; z-index: -3; left: 50%; bottom: -60px; width: 2200px; max-width: none; height: 1240px; transform: translateX(-50%) rotate(180deg); pointer-events: none; }
.v-hb__ring { position: absolute; z-index: -2; width: 560px; height: 560px; border-radius: 50%; border: 64px solid var(--lilac); pointer-events: none; }
.v-hb__ring--l { left: -380px; top: 150px; }
.v-hb__ring--r { right: -360px; top: -250px; border-color: rgba(254,211,241,.85); }
.v-hb__dots { position: absolute; z-index: -1; left: 0; right: 0; bottom: 0; height: 460px; pointer-events: none; background-image: radial-gradient(circle, rgba(255,255,255,.95) 1.6px, transparent 1.9px); background-size: 15px 15px; -webkit-mask: linear-gradient(to bottom, transparent, #000 60%); mask: linear-gradient(to bottom, transparent, #000 60%); }
.v-hb .site-head { width: min(1258px, 100% - 48px); margin: 13px auto 0; }
.v-hb__copy { display: flex; flex-direction: column; align-items: center; gap: 24px; margin-top: 48px; padding: 0 24px; text-align: center; }
.v-rate { display: inline-flex; align-items: center; gap: 8px; padding: 5px 16px 5px 12px; border-radius: var(--r-pill); background: #fff; font: 400 14px/1.6 var(--font); color: var(--ink); box-shadow: var(--shadow-1); }
.v-rate svg { width: 84px; height: 14px; fill: var(--ink); }
.v-rate b { font: 600 15px/1 var(--font-display); }
.v-hb__title { display: flex; flex-direction: column; font: 600 132px/.94 var(--font-display); letter-spacing: -.05em; text-transform: uppercase; }
.v-hb__title span:first-child { transform: translateX(-150px); }
.v-hb__title span:last-child { transform: translateX(120px); }
.v-hb__copy .t-lead { max-width: 520px; }
.v-hb__ctas { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; }
.v-hb__t1 { left: auto; right: 330px; top: 168px; }
.v-hb__t2 { left: auto; right: 210px; top: 236px; }
.v-hb__t3 { left: 150px; top: 380px; }
.v-hb__t4 { left: 250px; top: 440px; }
.v-hb__stats { position: absolute; left: 40px; right: 40px; bottom: 40px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.v-hb__stat { display: flex; flex-direction: column; gap: 6px; padding: 22px 24px; border-radius: var(--r-md); background: rgba(255,255,255,.78); box-shadow: inset 0 0 0 1px rgba(255,255,255,.9); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.v-hb__stat b { font: 600 36px/1.1 var(--font-display); letter-spacing: -1px; color: var(--ink); }
.v-hb__stat span { font-size: 15px; line-height: 1.5; color: var(--text-2); }

/* ── HERO C: inset photo · giant stack · brief printed faint ── */
.v-hc { width: min(var(--band), 100% - 2 * var(--gutter)); margin-inline: auto; }
.v-hc .v-sbar { background: transparent; height: 84px; }
.v-hc__frame { position: relative; height: 800px; margin-top: 8px; border-radius: var(--r-xl); overflow: hidden; isolation: isolate; }
.v-hc__img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; }
.v-hc__form { position: absolute; z-index: -1; right: 36px; top: 56px; width: 238px; padding: 18px 16px; border: 1.5px solid rgba(3,41,74,.34); border-radius: 6px; color: rgba(3,41,74,.5); font: 400 12px/1.4 var(--font); }
.v-hc__form p { display: flex; align-items: center; gap: 6px; padding: 9px 0; border-top: 1px solid rgba(3,41,74,.24); }
.v-hc__form p span { flex: 0 0 66px; text-transform: uppercase; letter-spacing: .06em; font-size: 10px; }
.v-hc__form .v-hc__form-t { border-top: 0; padding-top: 0; font: 500 12px/1.4 var(--font-display); letter-spacing: .04em; }
.v-hc__form i { width: 11px; height: 11px; border: 1.2px solid rgba(3,41,74,.45); border-radius: 2px; flex: none; }
.v-hc__form i.on { background: rgba(3,41,74,.45); }
.v-hc__copy { position: absolute; left: 64px; top: 56px; bottom: 56px; display: flex; flex-direction: column; align-items: flex-start; gap: 28px; width: 520px; }
.v-news { display: inline-flex; align-items: center; gap: 10px; padding: 4px 14px 4px 4px; border-radius: var(--r-pill); background: #fff; font: 400 14px/1.6 var(--font); color: var(--ink); }
.v-news b { padding: 2px 10px; border-radius: var(--r-pill); background: var(--ink); color: #fff; font: 500 13px/1.5 var(--font-display); }
.v-news svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.v-hc__title { display: flex; flex-direction: column; font: 600 148px/.86 var(--font-display); letter-spacing: -.055em; }
.v-hc__foot { margin-top: auto; display: flex; flex-direction: column; align-items: flex-start; gap: 28px; }
.v-hc__foot .t-lead { max-width: 430px; }
.v-hc__ctas { display: flex; flex-wrap: wrap; gap: 12px; }

/* ── HERO D: full-bleed photo · the app with a channel switch ── */
.v-hd { position: relative; height: 940px; overflow: hidden; isolation: isolate; color: #fff; }
.v-hd__img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; object-position: 50% 62%; }
.v-hd__fade { position: absolute; inset: 0; z-index: -1; background: linear-gradient(to top, rgba(3,41,74,.86) 0%, rgba(3,41,74,.66) 24%, rgba(3,41,74,.3) 42%, rgba(3,41,74,0) 60%); }
.v-boxbar { display: flex; align-items: stretch; height: 72px; background: #fff; border-bottom: 1px solid var(--line-2); color: var(--ink); }
.v-boxbar > * { display: flex; align-items: center; padding: 0 32px; border-right: 1px solid var(--line-2); }
.v-boxbar .nav { flex: 1; justify-content: center; }
.v-boxbar__cell { font: 500 16px/1.7 var(--font-display); transition: background-color .3s var(--ease); }
a.v-boxbar__cell:hover { background: var(--paper-soft); }
.v-boxbar__go { gap: 10px; padding: 0 12px; border-right: 0; }
.v-hd__app { position: absolute; right: 64px; top: 140px; width: 560px; }
.v-ctrl { position: relative; z-index: 2; display: flex; gap: 4px; width: max-content; max-width: 100%; margin: 0 auto -28px; padding: 5px; border-radius: var(--r-pill); background: #fff; box-shadow: var(--shadow-2); }
.v-ctrl__tab { padding: 7px 18px; border-radius: var(--r-pill); text-align: center; font: 500 15px/1.3 var(--font-display); color: var(--ink); transition: background-color .3s var(--ease); }
.v-ctrl__tab small { display: block; font: 400 12px/1.35 var(--font); color: var(--text-2); }
.v-ctrl__tab:hover { background: var(--paper-soft); }
.v-ctrl__tab[aria-selected="true"] { background: var(--lilac); }
.v-hd__win { padding: 48px 24px 22px; border-radius: 22px; background: #fff; box-shadow: 0 40px 80px -36px rgba(3,41,74,.5); color: var(--ink); }
.v-hd__win[hidden] { display: none; }
.v-hd__whead { display: flex; justify-content: space-between; align-items: flex-start; }
.v-hd__whead p { font: 600 22px/1.2 var(--font-display); letter-spacing: -.4px; }
.v-hd__whead small { display: block; margin-top: 4px; font: 400 13px/1.4 var(--font); color: var(--text-2); letter-spacing: 0; }
.v-hd__stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 18px 0 22px; }
.v-hd__stats p { padding: 12px 14px; border-radius: 12px; background: var(--paper); }
.v-hd__stats span { display: block; font: 400 13px/1.3 var(--font); color: var(--text-2); }
.v-hd__stats b { display: block; margin-top: 8px; font: 600 26px/1 var(--font-display); letter-spacing: -.5px; }
.v-hd__chart { font-size: 14px; }
.v-hd__copy { position: absolute; left: 64px; bottom: 132px; width: 560px; }
.v-hd__title { font: 600 48px/1.15 var(--font-display); letter-spacing: -1px; color: #fff; }
.v-hd__copy > p { max-width: 470px; margin-top: 16px; font: 400 18px/1.7 var(--font); color: rgba(255,255,255,.92); }
.v-hd__ctas { display: flex; flex-wrap: wrap; align-items: center; gap: 24px; margin-top: 32px; }
.v-hd__link { display: inline-flex; align-items: center; gap: 8px; font: 500 16px/1.7 var(--font-display); color: #fff; transition: opacity .3s var(--ease); }
.v-hd__link:hover { opacity: .75; }
.v-hd__link svg, .v-hc__ctas .btn svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.v-hd__logos { position: absolute; left: 64px; right: 64px; bottom: 0; display: flex; align-items: center; gap: 48px; height: 96px; border-top: 1px solid rgba(255,255,255,.28); }
.v-hd__logos > p { flex: none; font: 500 15px/1.4 var(--font-display); color: rgba(255,255,255,.92); }
.v-hd__row { display: flex; align-items: center; justify-content: space-between; gap: 40px; flex: 1; }
.v-hd__row img { height: 26px; width: auto; filter: brightness(0) invert(1); opacity: .9; }

/* ── FEATURES A (fbands): two new compositions ── */
.v-fa1__win { position: absolute; left: 0; top: 40px; width: 420px; font-size: 16px; padding-bottom: 28px; }
.v-fa1__spark { width: 28px; height: 28px; fill: #fff; }
.v-fa1__say { margin-top: .2em; font: 400 15px/1.45 var(--font); color: var(--text-2); }
.v-fa1__win .mk-gen__field { font-size: 15px; }
.v-fa1__win .mk-gen__tags { font-size: 12px; }
.v-fa1__out { position: absolute; left: 240px; top: 330px; width: 340px; padding: 18px 20px; border-radius: 16px; background: #fff; box-shadow: var(--shadow-2); }
.v-fa1__h { font: 600 16px/1.3 var(--font-display); }
.v-fa1__out ul { display: grid; gap: 10px; margin-top: 12px; }
.v-fa1__out li { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 10px; background: var(--paper); font: 500 14px/1.35 var(--font-display); }
.v-fa1__out svg { width: 18px; height: 18px; flex: none; fill: none; stroke: var(--success-ink); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.v-fa2__rep { position: absolute; left: 0; top: 36px; width: 440px; padding: 22px 22px 18px; border-radius: 16px; background: #fff; box-shadow: var(--shadow-1); }
.v-fa2__h { display: flex; justify-content: space-between; align-items: baseline; font: 600 18px/1.3 var(--font-display); }
.v-fa2__h small { font: 400 13px/1.3 var(--font); color: var(--text-2); }
.v-fa2__kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 16px 0 20px; }
.v-fa2__kpis p { padding: 10px 12px; border-radius: 10px; background: var(--paper); }
.v-fa2__kpis span { display: block; font: 400 12px/1.3 var(--font); color: var(--text-2); }
.v-fa2__kpis b { display: block; margin-top: 6px; font: 600 22px/1 var(--font-display); }
.v-fa2__sent { position: absolute; left: 300px; top: 318px; width: 220px; font-size: 16px; }

/* ── FEATURES B: bento of pastel cards ── */
.v-bento { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: var(--head-gap); }
.v-bc { display: flex; flex-direction: column; justify-content: space-between; gap: 28px; min-height: 440px; padding: 32px; border-radius: var(--r-lg); }
.v-bc--lilac { background: var(--lilac); } .v-bc--pink { background: var(--pink); } .v-bc--mint { background: var(--mint); } .v-bc--lime { background: var(--lime); } .v-bc--peach { background: var(--peach); }
.v-bc--wide { grid-column: span 2; display: grid; grid-template-columns: 1fr 1.15fr; align-items: center; gap: 40px; padding: 40px; }
.v-bc h3 { font: 500 24px/1.4 var(--font-display); letter-spacing: -.5px; }
.v-bc--wide h3 { font: 600 36px/1.2 var(--font-display); letter-spacing: -.8px; }
.v-bc__copy p:not(.v-bc__big) { margin-top: 10px; color: var(--text-2); max-width: 380px; }
.v-bc__mock { padding: 22px; border-radius: var(--r); background: #fff; }
.v-bc__mock.mk .mk-chat { font-size: 15px; }
.v-bc__mh { margin-bottom: 14px; font: 500 15px/1.3 var(--font-display); }
.v-bc__bot { width: 2.9em; height: 2.9em; flex: none; border-radius: 50%; display: grid; place-items: center; background: var(--lilac-2); }
.v-bc__bot svg { width: 1.2em; height: 1.2em; fill: #fff; }
.v-bc--pink .mk-gauge { max-width: 300px; margin-inline: auto; }
.v-bc__big { font: 600 60px/1 var(--font-display); letter-spacing: -2px; color: var(--ink); margin-bottom: 14px; }
.v-bc--lime, .v-bc--peach { justify-content: space-between; }

/* ── FEATURES C: icon grid of cream cards ── */
.v-fc-head { display: grid; grid-template-columns: 1fr 1fr; align-items: end; gap: 80px; }
.v-fc-head .t-lead { max-width: 440px; justify-self: end; color: var(--text-2); }
.v-icons { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: var(--head-gap); }
.v-icon { display: flex; flex-direction: column; gap: 12px; min-height: 280px; padding: 40px; border-radius: var(--r-lg); background: var(--paper); }
.v-icon .icon-tile { margin-bottom: auto; }
.v-icon h3 { margin-top: 40px; font: 500 24px/1.4 var(--font-display); letter-spacing: -.5px; }
.v-icon p { color: var(--text-2); }

/* ── TABS A: vertical tabs ── */
.v-vtabs { padding: var(--band-pad) 48px; }
.v-vtabs .shead { max-width: 720px; }
.v-vt { display: grid; grid-template-columns: 330px 1fr; margin-top: var(--head-gap); }
.v-vt__list { display: flex; flex-direction: column; }
.v-vt__tab { padding: 32px; border-radius: var(--r-lg) 0 0 var(--r-lg); text-align: left; transition: background-color .35s var(--ease); }
.v-vt__tab:hover { background: rgba(248,240,233,.55); }
.v-vt__tab[aria-selected="true"] { background: var(--paper-2); }
.v-vt__tab b { display: block; margin-bottom: 6px; font: 500 20px/1.5 var(--font-display); color: var(--ink); }
.v-vt__tab span { display: block; color: var(--text-2); }
.v-vt__panel { display: grid; grid-template-columns: 1fr 420px; align-items: center; gap: 48px; min-height: 500px; padding: 48px; border-radius: 0 var(--r-lg) var(--r-lg) var(--r-lg); background: var(--paper-2); }
.v-vt__panel[hidden] { display: none; }
.v-vt:has(.v-vt__tab:first-child[aria-selected="false"]) .v-vt__panel { border-top-left-radius: var(--r-lg); }
.v-vt__copy { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
.v-vt__copy h3 { font: 600 36px/1.2 var(--font-display); letter-spacing: -.8px; }
.v-vt__copy p { max-width: 380px; margin-bottom: 16px; color: var(--text-2); }
.v-vt__visual { position: relative; height: 380px; }
.v-vt__visual.mk-glass { border-radius: var(--r-lg); }
.v-vt__card { position: absolute; left: 36px; top: 54px; width: 340px; font-size: 15px; }
.v-vt__ads { position: absolute; left: 0; top: 10px; width: 330px; }
.v-vt__adrow { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.v-vt__adrow .mk-ad { aspect-ratio: 9 / 15; font-size: 12px; }
.v-vt__win { position: absolute; left: 250px; top: 210px; width: 190px; font-size: 16px; }
.v-vt__tile { display: grid; place-items: center; border-radius: var(--r-lg); background: var(--violet); overflow: hidden; }
.v-vt__tile::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(circle, rgba(255,255,255,.28) 1.5px, transparent 1.8px); background-size: 14px 14px; }
.v-vt__metric { position: relative; width: 380px; background: #fff; border: 4px solid #E7E2FF; border-radius: 28px; padding: 24px 26px; box-shadow: 0 -4px 16px rgba(0,0,0,.05); }

/* ── TABS B: pill tabs over a photo panel ── */
.v-tb__list { display: flex; gap: 4px; width: max-content; max-width: 100%; margin: 56px auto 32px; padding: 6px; border-radius: var(--r-pill); background: var(--paper); }
.v-tb__tab { padding: 12px 26px; border-radius: var(--r-pill); font: 500 16px/1.4 var(--font-display); color: var(--text-2); white-space: nowrap; transition: background-color .35s var(--ease), color .35s var(--ease); }
.v-tb__tab:hover { color: var(--ink); }
.v-tb__tab[aria-selected="true"] { background: var(--ink); color: #fff; box-shadow: var(--btn-inset); }
.v-tb__panel { position: relative; height: 620px; border-radius: var(--r-lg); overflow: hidden; isolation: isolate; }
.v-tb__panel[hidden] { display: none; }
.v-tb__img { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; }
.v-tb__copy { position: absolute; left: 32px; bottom: 32px; width: 440px; padding: 32px; border-radius: var(--r-lg); background: #fff; }
.v-tb__copy h3 { font: 500 24px/1.4 var(--font-display); letter-spacing: -.5px; }
.v-tb__copy p { margin-top: 10px; color: var(--text-2); }
.v-tb__card { position: absolute; right: 32px; top: 32px; width: 330px; font-size: 15px; }
.v-tb__ch { margin-bottom: 14px; font: 500 16px/1.3 var(--font-display); }
.v-tb__list2 { display: grid; gap: 8px; }
.v-tb__list2 li { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 10px; background: var(--paper); font: 500 14px/1.3 var(--font-display); }
.v-tb__list2 li span { margin-left: auto; font: 400 13px/1 var(--font); color: var(--text-2); }
.v-tb__list2 svg { width: 18px; height: 18px; flex: none; fill: none; stroke: var(--success-ink); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }

/* ── BAND A: half-width pastel pair ── */
.v-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; }
.v-half { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; padding: 48px 48px 0; border-radius: var(--r-lg); overflow: hidden; }
.v-half--pink { background: var(--pink); } .v-half--mint { background: var(--mint); }
.v-half .icon-tile { margin-bottom: 16px; }
.v-half h3 { font: 600 40px/1.2 var(--font-display); letter-spacing: -1px; max-width: 520px; }
.v-half > p { max-width: 460px; color: var(--text-2); }
.v-half__visual { position: relative; align-self: stretch; height: 280px; margin-top: auto; padding-top: 32px; box-sizing: content-box; }
.v-ba1 { position: absolute; left: 0; top: 0; width: 72%; font-size: 15px; }
.v-ba1 .mk-ad { aspect-ratio: 16 / 9; font-size: 15px; }
.v-ba1__line { position: absolute; right: 0; top: 150px; width: 56%; padding: 14px 14px 10px; border-radius: 12px; background: #fff; box-shadow: var(--shadow-2); }
.v-ba2 { position: absolute; left: 6%; right: 6%; top: 0; padding-bottom: 60px; font-size: 16px; }

/* ── BAND B: full pastel band with a stats row ── */
.v-sband { padding: 80px 80px 56px; border-radius: var(--r-lg); background: var(--peach); }
.v-sband__top { display: grid; grid-template-columns: 1fr 560px; align-items: center; gap: 64px; }
.v-sband__copy { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; }
.v-sband__copy .t-body { max-width: 460px; margin-bottom: 12px; color: var(--text-2); }
.v-sband__visual { position: relative; }
.v-bb { font-size: 15px; }
.v-bb__h { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 14px; font: 600 17px/1.3 var(--font-display); }
.v-bb__h span { font: 500 13px/1 var(--font-display); color: var(--success-ink); }
.v-bb__row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.v-bb__row .mk-ad { aspect-ratio: 9 / 14; font-size: 12px; }
.v-bb__row .mk-ad__brand { padding: .35em .7em; }
.v-bb__row .mk-ad__brand, .v-vt__adrow .mk-ad__brand { font-size: 12px; }
.v-sband__stats { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 64px; border-top: 1px solid rgba(3,41,74,.14); }
.v-sband__stats li { padding: 28px 24px 0 0; }
.v-sband__stats li + li { padding-left: 32px; border-left: 1px solid rgba(3,41,74,.14); }
.v-sband__stats b { display: block; font: 600 48px/1.1 var(--font-display); letter-spacing: -1.5px; color: var(--ink); }
.v-sband__stats span { display: block; margin-top: 6px; color: var(--text-2); }

/* ── PROOF A: logo wall + one big quote ── */
.v-proof { display: grid; grid-template-columns: 1fr 560px; gap: 64px; align-items: center; padding: var(--band-pad) 80px; }
.v-proof__left { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
.v-proof__left h2 { max-width: 560px; }
.v-wall { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; width: 100%; margin-top: 48px; }
.v-wall > span { display: grid; place-items: center; height: 96px; padding: 0 14px; border-radius: var(--r); background: #fff; }
.v-wall img { width: 100%; max-width: 120px; height: auto; }
.v-wall__more { background: var(--lilac) !important; text-align: center; font: 400 13px/1.3 var(--font); color: var(--ink); }
.v-wall__more b { display: block; font: 600 22px/1.2 var(--font-display); }
.v-bigq { margin: 0; border-radius: var(--r-lg); background: #fff; overflow: hidden; }
.v-bigq__photo { width: 100%; height: 300px; object-fit: cover; object-position: 20% 35%; }
.v-bigq__body { display: flex; flex-direction: column; padding: 32px 36px 36px; }
.v-bigq blockquote p { font: 500 26px/1.4 var(--font-display); letter-spacing: -.5px; color: var(--ink); }
.v-bigq .quote__foot { margin-top: 28px; }

/* ── PROOF B: metrics band ── */
.v-metrics { padding: var(--band-pad) 80px; }
.v-metrics__head { display: grid; grid-template-columns: 1fr 1fr; align-items: end; gap: 80px; }
.v-metrics__head .t-lead { max-width: 440px; justify-self: end; color: var(--text-2); }
.v-metrics__row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; margin-top: var(--head-gap); }
.v-metric { padding-top: 28px; border-top: 1px solid var(--line); }
.v-metric b { display: flex; align-items: center; gap: 14px; font: 600 72px/1 var(--font-display); letter-spacing: -2.5px; color: var(--ink); }
.v-metric span { display: block; max-width: 240px; margin-top: 18px; color: var(--text-2); }

/* ── PRICING B: table first ── */
.v-pricetab__head { display: grid; grid-template-columns: 1fr 1fr; align-items: end; gap: 80px; }
.v-pricetab__head > div { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
.v-pricetab__head .t-lead { max-width: 440px; justify-self: end; color: var(--text-2); }
.v-ptable-wrap { margin-top: var(--head-gap); overflow-x: auto; border: 1px solid var(--line-2); border-radius: var(--r-lg); background: #fff; }
.v-ptable { width: 100%; min-width: 880px; border-collapse: separate; border-spacing: 0; font: 400 16px/1.5 var(--font-display); color: var(--text-2); }
.v-ptable th, .v-ptable td { padding: 20px 28px; border-bottom: 1px solid var(--line-2); text-align: left; vertical-align: middle; }
.v-ptable tbody tr:last-child > * { border-bottom: 0; }
.v-ptable thead th { padding: 36px 28px 28px; vertical-align: top; font-weight: 400; }
.v-ptable tbody th { font: 500 16px/1.5 var(--font-display); color: var(--ink); }
.v-ptable td { color: var(--ink); }
.v-ptable .is-pop { background: rgba(226,222,255,.45); }
.v-ptable__lead { display: block; max-width: 220px; font: 500 20px/1.4 var(--font-display); color: var(--ink); }
.v-ptable__name { display: flex; align-items: center; gap: 10px; font: 500 24px/1.4 var(--font-display); letter-spacing: -.5px; color: var(--ink); }
.v-ptable .price { margin: 14px 0 20px; color: var(--ink); }
.v-ptable .price b { font-size: 48px; }
.v-ptable .price sup { font-size: 28px; line-height: 36px; }
.v-ptable .btn { width: 100%; }
.v-tick { width: 22px; height: 22px; fill: none; stroke: var(--ink); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.v-dash { color: var(--muted); }

/* ── CTA B: photo band with a soft edge gradient ── */
.v-ctab { position: relative; display: flex; align-items: center; height: 600px; overflow: hidden; isolation: isolate; }
.v-ctab__img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; object-position: 75% 35%; }
.v-ctab__fade { position: absolute; inset: 0; z-index: -1; background: linear-gradient(to right, rgba(252,249,246,.97) 0%, rgba(252,249,246,.9) 32%, rgba(252,249,246,0) 60%); }
.v-ctab__copy { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; max-width: 640px; padding: 0 80px; }
.v-ctab__copy .t-lead { max-width: 440px; color: var(--text-2); }
.v-ctab__ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 16px; }

/* ── CTA C: split with an email form ── */
.v-ctac { display: grid; grid-template-columns: 1fr 520px; align-items: center; gap: 80px; padding: 96px 80px; }
.v-ctac__copy { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
.v-ctac__copy .t-lead { max-width: 500px; color: var(--text-2); }
.v-faces { display: flex; align-items: center; gap: 14px; margin-top: 16px; font-size: 15px; color: var(--text-2); }
.v-faces > span { display: flex; flex: none; }
.v-faces img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; border: 3px solid var(--paper); }
.v-faces img + img { margin-left: -12px; }
.v-form { padding: 40px; border-radius: var(--r-lg); background: #fff; }
.v-form label { display: block; margin-bottom: 12px; font: 500 16px/1.5 var(--font-display); color: var(--ink); }
.v-form__row { display: flex; align-items: center; gap: 8px; padding: 6px 6px 6px 20px; border: 1px solid var(--line-2); border-radius: var(--r-pill); transition: border-color .3s var(--ease); }
.v-form__row:focus-within { border-color: var(--lilac-2); }
.v-form input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font: 400 16px/1.5 var(--font); color: var(--ink); }
.v-form input::placeholder { color: var(--muted); }
.v-form .btn { min-height: 48px; padding: 0 22px; }
.v-form .ticks { grid-template-columns: 1fr; gap: 10px; margin-top: 24px; }

/* ── CTA D: single line + button on a pastel field ── */
.v-ctad { display: flex; justify-content: space-between; align-items: center; gap: 40px; padding: 64px 72px; }
.v-ctad--lilac { background: var(--lilac); }
.v-ctad h2 { flex: 1; }

/* ── FOOTER A spacing inside the library ── */
.v-foot { padding-top: 0; }

/* ── FOOTER B: cream band, five columns ── */
.v-fb { padding: 72px 64px 32px; }
.v-fb__top { display: grid; grid-template-columns: 300px 1fr; gap: 80px; }
.v-fb__brand p { margin: 20px 0 28px; max-width: 260px; color: var(--text-2); }
.v-fb .socials a { background: #fff; }
.v-fb .socials a:hover { background: var(--paper-2); }
.v-fb__cols { display: grid; grid-template-columns: repeat(5, 1fr); gap: 24px; }
.v-fb__cols h4 { margin-bottom: 16px; font: 500 16px/1.7 var(--font-display); }
.v-fb__cols li + li { margin-top: 12px; }
.v-fb__cols a, .v-fb__base a { font: 400 15px/1.6 var(--font-display); color: var(--text-2); transition: color .3s var(--ease); }
.v-fb__cols a:hover, .v-fb__base a:hover { color: var(--ink); }
.v-fb__base { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 16px; margin-top: 64px; padding-top: 28px; border-top: 1px solid var(--line); font-size: 15px; color: var(--text-2); }
.v-fb__base p:last-child { display: flex; gap: 28px; }

/* ── FOOTER C: photo fading into ink ── */
.v-fcf { position: relative; overflow: hidden; isolation: isolate; padding: 260px 64px 32px; background: var(--ink); color: #fff; }
.v-fcf__img { position: absolute; left: 0; right: 0; top: 0; z-index: -2; width: 100%; height: 560px; object-fit: cover; object-position: 50% 30%; }
.v-fcf__fade { position: absolute; left: 0; right: 0; top: 0; z-index: -1; height: 562px; background: linear-gradient(to bottom, rgba(3,41,74,0) 0%, rgba(3,41,74,.25) 30%, rgba(3,41,74,.8) 62%, #03294A 100%); }
.v-fcf__cta { display: flex; justify-content: space-between; align-items: flex-end; gap: 40px; padding-bottom: 56px; border-bottom: 1px solid rgba(255,255,255,.2); }
.v-fcf__line { max-width: 720px; font: 600 60px/1.1 var(--font-display); letter-spacing: -1.5px; color: #fff; }
.v-fcf__cols { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 24px; padding: 48px 0; }
.v-fcf .logo { color: #fff; }
.v-fcf__cols li + li { margin-top: 12px; }
.v-fcf__cols a:not(.logo), .v-fcf__base p { font: 400 15px/1.6 var(--font-display); color: rgba(255,255,255,.8); transition: color .3s var(--ease); }
.v-fcf__cols a:not(.logo):hover { color: #fff; }
.v-fcf__base { display: flex; justify-content: space-between; align-items: center; padding-top: 28px; border-top: 1px solid rgba(255,255,255,.2); }
.v-fcf .socials a { background: rgba(255,255,255,.12); }
.v-fcf .socials a:hover { background: rgba(255,255,255,.22); }
.v-fcf .socials svg { fill: #fff; }

/* ── FOOTER D: minimal one row ── */
.v-fd { padding-top: 40px; border-top: 1px solid var(--line-2); }
.v-fd__row { display: flex; align-items: center; gap: 40px; }
.v-fd__links { display: flex; gap: 28px; margin-right: auto; }
.v-fd__links a { font: 400 15px/1.6 var(--font-display); color: var(--text-2); transition: color .3s var(--ease); }
.v-fd__links a:hover { color: var(--ink); }
.v-fd__form { width: 320px; margin-top: 0; }
.v-fd__base { margin-top: 32px; padding-top: 24px; border-top: 1px solid var(--line-2); font-size: 14px; color: var(--text-2); }

/* ── responsive ── */
@media (max-width: 1360px) {
  .v-ha__body { grid-template-columns: 1fr 1fr; }
  .v-ha__title { font-size: 68px; letter-spacing: -3px; }
  .v-cchip--1 { left: -40px; }
  .v-hb__title { font-size: 104px; }
  .v-hb__title span:first-child { transform: translateX(-90px); } .v-hb__title span:last-child { transform: translateX(80px); }
  .v-hb__t1 { right: 120px; } .v-hb__t2 { right: 40px; } .v-hb__t3 { left: 40px; } .v-hb__t4 { left: 120px; }
  .v-hc__title { font-size: 120px; }
  .v-hc__img { object-position: 0% 20%; }
  .v-hc__foot .t-lead { max-width: 360px; }
  .v-hd__app { width: 500px; right: 40px; }
  .v-hd__copy { left: 40px; width: 460px; } .v-hd__logos { left: 40px; right: 40px; }
  .v-proof { grid-template-columns: 1fr 1fr; padding-inline: 48px; }
  .v-sband { padding-inline: 48px; }
  .v-sband__top { grid-template-columns: 1fr 1fr; }
  .v-vt { grid-template-columns: 300px 1fr; }
  .v-vt__panel { grid-template-columns: 1fr; }
  .v-vt__visual { max-width: 440px; width: 100%; }
}
@media (max-width: 1200px) {
  .v-hc__form { display: none; }
}
@media (max-width: 1100px) {
  .v-hb__t1, .v-hb__t2, .v-hb__t3, .v-hb__t4 { display: none; }
  .v-hd { height: auto; padding-bottom: 0; }
  .v-hd__app { position: relative; right: auto; top: auto; width: auto; max-width: 600px; margin: 56px 24px 0 auto; }
  .v-hd__copy { position: relative; left: auto; bottom: auto; width: auto; max-width: 560px; margin: 120px 40px 0; }
  .v-hd__logos { position: relative; left: auto; right: auto; margin: 56px 40px 0; }
  .v-hd__fade { background: linear-gradient(to top, rgba(3,41,74,.88) 0%, rgba(3,41,74,.7) 30%, rgba(3,41,74,.3) 50%, rgba(3,41,74,0) 66%); }
}
@media (max-width: 991px) {
  .v-jump { grid-template-columns: 1fr 1fr; }
  .v-label { grid-template-columns: 1fr; }
  .v-label__cls { justify-self: start; text-align: left; }
  .v-pill { grid-template-columns: 1fr auto; padding-right: 12px; }
  .v-sbar { grid-template-columns: 1fr auto 1fr; }
  .v-sbar .site-head__end .nav { display: none; }
  .v-bar__in { grid-template-columns: 1fr auto; }
  .v-bar .site-head__end .btn--line { display: none; }
  .v-boxbar .nav, .v-boxbar a.v-boxbar__cell { display: none; }
  .v-boxbar > .logo { margin-right: auto; border-right: 0; }
  .v-boxbar__go .btn { display: inline-flex !important; }
  .v-ha__body { grid-template-columns: 1fr; }
  .v-ha__copy { padding: 56px 32px 48px; }
  .v-ha__panel { height: 620px; }
  .v-cchip--1 { left: 4%; top: 64%; }
  .v-cchip--2 { left: 4%; top: 86%; }
  .fband__visual:has(.v-fa1__out), .fband__visual:has(.v-fa2__sent) { height: 490px; }
  .v-hb { height: auto; padding-bottom: 32px; }
  .v-hb__stats { position: relative; left: auto; right: auto; bottom: auto; grid-template-columns: 1fr 1fr; margin: 56px 24px 0; }
  .v-hb__title { font-size: 76px; }
  .v-hb__title span:first-child { transform: translateX(-40px); } .v-hb__title span:last-child { transform: translateX(40px); }
  .v-hc__frame { height: auto; display: flex; flex-direction: column; overflow: visible; border-radius: 0; }
  .v-hc__copy { position: static; width: auto; padding: 32px 8px 40px; }
  .v-hc__img { position: relative; z-index: 0; height: 560px; border-radius: var(--r-lg); object-position: 66% 30%; }
  .v-hc__form { display: none; }
  .v-hc__copy { order: -1; }
  .v-hc__ctas .btn--white { border: 2px solid var(--ink); }
  .v-hc__title { font-size: 96px; }
  .v-hc__foot { margin-top: 8px; }
  .v-fa1__win { width: 380px; }
  .v-fa1__out { left: auto; right: 0; top: 270px; width: 300px; }
  .v-fa2__rep { width: 400px; }
  .v-fa2__sent { left: auto; right: 0; top: 280px; }
  .v-bento { grid-template-columns: 1fr 1fr; }
  .v-bc--wide { grid-column: 1 / -1; }
  .v-fc-head, .v-metrics__head, .v-pricetab__head { grid-template-columns: 1fr; gap: 20px; }
  .v-fc-head .t-lead, .v-metrics__head .t-lead, .v-pricetab__head .t-lead { justify-self: start; }
  .v-icons { grid-template-columns: 1fr 1fr; }
  .v-vtabs { padding-inline: 24px; }
  .v-vt { grid-template-columns: 1fr; }
  .v-vt__list { flex-direction: row; overflow-x: auto; scrollbar-width: none; }
  .v-vt__tab { flex: 0 0 240px; padding: 22px 24px; border-radius: var(--r-lg) var(--r-lg) 0 0; }
  .v-vt__panel, .v-vt:has(.v-vt__tab:first-child[aria-selected="false"]) .v-vt__panel { border-radius: 0 0 var(--r-lg) var(--r-lg); padding: 32px 24px; }
  .v-pair { grid-template-columns: 1fr; }
  .v-sband__top { grid-template-columns: 1fr; }
  .v-proof { grid-template-columns: 1fr; padding-inline: 32px; }
  .v-metrics { padding-inline: 32px; }
  .v-metrics__row { grid-template-columns: 1fr 1fr; gap: 40px 32px; }
  .v-ctab__copy { padding: 0 48px; }
  .v-ctac { grid-template-columns: 1fr; gap: 40px; padding: 72px 40px; }
  .v-ctad { flex-direction: column; align-items: flex-start; padding: 56px 40px; }
  .v-fb__top { grid-template-columns: 1fr; gap: 48px; }
  .v-fb__cols { grid-template-columns: repeat(3, 1fr); gap: 32px 24px; }
  .v-fcf__cta { flex-direction: column; align-items: flex-start; }
  .v-fcf__line { font-size: 48px; }
  .v-fd__row { flex-wrap: wrap; gap: 24px 32px; }
  .v-fd__form { order: 3; width: 100%; max-width: 420px; }
}
@media (max-width: 767px) {
  .v-intro { padding-top: 56px; }
  .v-jump { grid-template-columns: 1fr; }
  .v-label__name { font-size: 16px; flex-wrap: wrap; }
  .v-hstage { height: 140px; border-radius: var(--r-lg); }
  .v-hstage__glow { top: -620px; }
  .v-pstage { padding: 20px 12px 64px; border-radius: var(--r-lg); }
  .v-pill { height: 64px; padding: 0 8px 0 16px; }
  .v-pill .site-head__end .btn { display: none; }
  .v-sbar { height: 72px; padding: 0 8px 0 12px; }
  .v-sbar .site-head__end .btn { display: none; }
  .v-util { font-size: 13px; padding: 8px 16px; }
  .v-util > span { flex-basis: 100%; order: 2; }
  .v-util > a { order: 3; }
  .v-bar__in { height: 68px; }
  .v-ha { border-radius: var(--r-lg); }
  .v-ha .v-bar__in { padding: 0 8px 0 16px; }
  .v-ha__copy { padding: 40px 20px 40px; gap: 20px; }
  .v-ha__title { font-size: 44px; letter-spacing: -1.6px; line-height: 1.08; }
  .v-ha__ctas { flex-direction: column; width: 100%; }
  .v-ha__ctas .btn { width: 100%; }
  .v-ha__stat b { font-size: 40px; }
  .v-ha__panel { height: 560px; }
  .v-tile--1 { left: 5%; width: 44%; } .v-tile--3 { left: 5%; width: 44%; }
  .v-tile--2 { left: 52%; width: 44%; } .v-crowd { left: 52%; width: 44%; padding: 14px; }
  .v-crowd b { font-size: 17px; } .v-crowd p { font-size: 13px; margin-top: 10px; }
  .v-crowd__faces img { width: 32px; height: 32px; border-width: 2px; }
  .v-tile__tag { left: 8px; bottom: 8px; padding: 5px 9px; font-size: 13px; }
  .v-tile__tag small { display: none; }
  .v-cchip { font-size: 13px; padding: 5px 12px 5px 5px; gap: 8px; }
  .v-cchip i { width: 28px; height: 28px; }
  .v-cchip--1 { left: 4%; top: 60%; } .v-cchip--3 { right: 3%; top: 2%; }
  .v-cchip--2, .v-cchip--4 { display: none; }
  .v-hb { border-radius: var(--r-lg); padding-bottom: 20px; }
  .v-hb .site-head { width: calc(100% - 24px); }
  .v-hb__copy { margin-top: 36px; padding: 0 16px; gap: 20px; }
  .v-hb__title { font-size: 44px; letter-spacing: -.04em; }
  .v-hb__title span:first-child { transform: translateX(-14px); } .v-hb__title span:last-child { transform: translateX(14px); }
  .v-hb__ctas { flex-direction: column; width: 100%; } .v-hb__ctas .btn { width: 100%; }
  .v-hb__ring { width: 300px; height: 300px; border-width: 36px; }
  .v-hb__ring--l { left: -220px; top: 260px; } .v-hb__ring--r { right: -200px; top: -120px; }
  .v-hb__stats { margin: 40px 12px 0; gap: 10px; }
  .v-hb__stat { padding: 16px; }
  .v-hb__stat b { font-size: 26px; } .v-hb__stat span { font-size: 13px; }
  .v-hc .v-sbar { height: 72px; }
  .v-hc__copy { padding: 24px 4px 32px; gap: 22px; }
  .v-hc__title { font-size: 64px; }
  .v-hc__ctas { flex-direction: column; width: 100%; } .v-hc__ctas .btn { width: 100%; }
  .v-hc__img { height: 420px; }
  .v-news { font-size: 13px; }
  .v-boxbar { height: 64px; } .v-boxbar > * { padding: 0 16px; } .v-boxbar__go { padding: 0 8px; gap: 8px; }
  .v-boxbar__go .btn { display: none !important; }
  .v-hd__app { margin: 40px 12px 0; }
  .v-ctrl { display: grid; grid-template-columns: 1fr 1fr; border-radius: 22px; margin-bottom: -20px; width: auto; }
  .v-ctrl__tab { border-radius: 16px; padding: 6px 10px; font-size: 14px; }
  .v-hd__win { padding: 40px 14px 16px; }
  .v-hd__whead p { font-size: 18px; }
  .v-hd__stats { gap: 6px; } .v-hd__stats p { padding: 10px; } .v-hd__stats b { font-size: 20px; } .v-hd__stats span { font-size: 12px; }
  .v-hd__copy { margin: 96px 16px 0; }
  .v-hd__title { font-size: 34px; letter-spacing: -.6px; }
  .v-hd__copy > p { font-size: 16px; }
  .v-hd__logos { flex-direction: column; align-items: flex-start; gap: 18px; height: auto; margin: 48px 16px 0; padding: 24px 0 28px; }
  .v-hd__row { flex-wrap: wrap; justify-content: flex-start; gap: 18px 28px; }
  .v-hd__row img { height: 22px; }
  .v-fa1__win { width: 92%; font-size: 14px; }
  .v-fa1__out { width: 82%; top: 250px; right: -6px; }
  .fband__visual:has(.v-fa1__out) { height: 470px; }
  .v-fa2__rep { width: 100%; top: 0; padding: 16px; }
  .v-fa2__sent { top: 300px; right: -6px; width: 200px; font-size: 15px; }
  .fband__visual:has(.v-fa2__sent) { height: 450px; }
  .v-bento { grid-template-columns: 1fr; }
  .v-bc, .v-bc--wide { grid-column: auto; display: flex; padding: 24px; min-height: 0; gap: 24px; }
  .v-bc--wide { flex-direction: column; align-items: stretch; }
  .v-bc--wide h3 { font-size: 28px; }
  .v-bc__mock { padding: 16px; }
  .v-icons { grid-template-columns: 1fr; }
  .v-icon { min-height: 0; padding: 28px 24px; }
  .v-icon h3 { margin-top: 24px; font-size: 20px; }
  .v-vtabs { padding-inline: 16px; }
  .v-vt__tab { flex-basis: 220px; }
  .v-vt__copy h3 { font-size: 28px; }
  .v-vt__visual { height: 330px; }
  .v-vt__card { left: 12px; right: 12px; top: 36px; width: auto; font-size: 13px; }
  .v-vt__ads { width: 74%; }
  .v-vt__win { left: auto; right: 0; top: 170px; width: 170px; font-size: 14px; }
  .v-vt__metric { width: 290px; padding: 18px 20px; }
  .v-vt__metric .mk-metric__num { font-size: 28px; }
  .v-tb__list { overflow-x: auto; scrollbar-width: none; margin-top: 40px; }
  .v-tb__tab { padding: 10px 12px; font-size: 14px; }
  .v-tb__panel { height: 600px; }
  .v-tb__copy { left: 12px; right: 12px; bottom: 12px; width: auto; padding: 22px; }
  .v-tb__card { left: 12px; right: 12px; top: 12px; width: auto; font-size: 13px; }
  .v-half { padding: 32px 20px 0; }
  .v-half h3 { font-size: 30px; letter-spacing: -.6px; }
  .v-half__visual { height: 330px; }
  .v-ba1 { width: 90%; }
  .v-ba1__line { width: 72%; top: 170px; right: -6px; }
  .v-ba2 { left: 0; right: 0; font-size: 14px; }
  .v-sband { padding: 40px 20px 32px; }
  .v-bb__row .mk-ad { font-size: 11px; }
  .v-sband__stats { grid-template-columns: 1fr; margin-top: 40px; }
  .v-sband__stats li, .v-sband__stats li + li { padding: 20px 0; border-left: 0; }
  .v-sband__stats li + li { border-top: 1px solid rgba(3,41,74,.14); }
  .v-sband__stats b { font-size: 40px; }
  .v-proof { padding: var(--band-pad) 16px; gap: 40px; }
  .v-wall { grid-template-columns: 1fr 1fr; margin-top: 32px; }
  .v-wall > span { height: 80px; }
  .v-bigq__photo { height: 240px; }
  .v-bigq__body { padding: 24px; }
  .v-bigq blockquote p { font-size: 21px; }
  .v-bigq .quote__foot { flex-direction: row; align-items: center; }
  .v-metrics { padding: var(--band-pad) 20px; }
  .v-metrics__row { grid-template-columns: 1fr; gap: 28px; }
  .v-metric b { font-size: 56px; }
  .v-ctab { height: 680px; align-items: flex-end; }
  .v-ctab__img { object-position: 72% 30%; }
  .v-ctab__fade { background: linear-gradient(to top, rgba(252,249,246,.97) 0%, rgba(252,249,246,.92) 46%, rgba(252,249,246,0) 74%); }
  .v-ctab__copy { padding: 0 20px 32px; }
  .v-ctab__ctas { flex-direction: column; width: 100%; } .v-ctab__ctas .btn { width: 100%; }
  .v-ctac { padding: 56px 16px; }
  .v-form { padding: 24px 20px; }
  .v-form__row { flex-direction: column; align-items: stretch; padding: 0; border: 0; gap: 12px; }
  .v-form input { flex: none; height: 52px; padding: 0 18px; border: 1px solid var(--line-2); border-radius: var(--r-pill); }
  .v-ctad { padding: 40px 24px; }
  .v-ctad h2 { font-size: 30px; }
  .v-ctad .btn { width: 100%; }
  .v-fb { padding: 48px 20px 28px; }
  .v-fb__cols { grid-template-columns: 1fr 1fr; }
  .v-fb__base { flex-direction: column; }
  .v-fb__base p:last-child { flex-wrap: wrap; gap: 12px 20px; }
  .v-fcf { padding: 200px 20px 28px; }
  .v-fcf__img { height: 440px; } .v-fcf__fade { height: 442px; }
  .v-fcf__line { font-size: 36px; letter-spacing: -.8px; }
  .v-fcf__cols { grid-template-columns: 1fr 1fr; gap: 28px 24px; }
  .v-fcf__cols .logo { grid-column: 1 / -1; }
  .v-fcf__base { flex-direction: column; align-items: flex-start; gap: 16px; }
  .v-fd__links { flex-wrap: wrap; gap: 12px 24px; margin-right: 0; width: 100%; }
}