/* Wedge #22 (stop-abuse-22) · Stayput's dark portfolio shell (pill nav, video hero, blue gradient rings) with sections
 * borrowed from Landed, Firstline, Collabmagic and Vigil. Icons are Lucide (inlined by scripts/inline-icons.mjs).
 * Every value references tokens.css. */

*, *::before, *::after { box-sizing: border-box; }
html, body { overflow-x: clip; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--font); font-size: var(--text-md); line-height: 1.6; -webkit-font-smoothing: antialiased; }
img, video, svg { display: block; max-width: 100%; }
h1, h2, h3, p, ol, ul, dl, dd, figure, blockquote { margin: 0; }
ol, ul { padding: 0; list-style: none; }
h1, h2, h3 { font-weight: var(--weight-medium); overflow-wrap: anywhere; }
a { color: inherit; }
button, output, input { font: inherit; }
:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: fixed; left: var(--s4); top: var(--s4); z-index: 60; padding: var(--s2) var(--s4); border-radius: var(--r-pill); background: var(--text); color: var(--bg); transform: translateY(-300%); }
.skip:focus { transform: none; }

/* lucide icons */
.ic { display: inline-block; flex: none; width: 18px; height: 18px; stroke-width: 1.75; vertical-align: -3px; }
.ic--sm { width: 15px; height: 15px; vertical-align: -2px; }

/* ---------- shared ---------- */
.shell { width: 100%; max-width: var(--max); margin: 0 auto; padding: 0 var(--s5); }
.sec { padding: var(--s10) 0; }
.sec--surface { background: var(--surface); border-top: 1px solid var(--stroke); border-bottom: 1px solid var(--stroke); }
.h2 { font-size: var(--text-h2); line-height: 1.12; letter-spacing: var(--track-heading); text-wrap: balance; }
.lede { max-width: 34rem; font-size: var(--text-lg); color: var(--muted); text-wrap: pretty; }
.kicker { font-size: var(--text-xs); text-transform: uppercase; letter-spacing: var(--track-caps); color: var(--muted); }
.split-head { display: grid; gap: var(--s5); margin-bottom: var(--s8); }
.split-head .h2 { max-width: 22ch; }
.center-head { display: grid; justify-items: center; gap: var(--s4); max-width: 44rem; margin: 0 auto var(--s8); text-align: center; }
.js .reveal { opacity: 0; transform: translateY(24px); }
.js .reveal.is-in { opacity: 1; transform: none; }

/* gradient ring on hover (template: masked gradient border) */
.gring { position: relative; isolation: isolate; }
.gring::before { content: ""; position: absolute; inset: -2px; z-index: -1; padding: 2px; border-radius: inherit; background: var(--grad); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; opacity: 0; transition: opacity var(--med) var(--ease); pointer-events: none; }
.gring:hover::before, .gring:focus-visible::before { opacity: 1; }

/* buttons (template: px-7 py-3.5, text-sm, rounded-full) */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--s2); padding: 14px 28px; border: 0; border-radius: var(--r-pill); font-size: var(--text-sm); font-weight: var(--weight-medium); line-height: 1.3; text-decoration: none; white-space: nowrap; cursor: pointer; transition: transform var(--med) var(--ease), background-color var(--fast) var(--ease); }
.btn:hover { transform: scale(1.05); }
.btn:active { transform: scale(0.99); }
.btn--solid { background: var(--text); color: var(--bg); }
.btn--block { width: 100%; }
.btn--block:hover { transform: none; }
.btn[aria-busy="true"] { cursor: progress; opacity: 0.7; }

/* ---------- nav (template: floating pill) ---------- */
.nav { position: fixed; top: 0; left: 0; right: 0; z-index: var(--z-nav); display: flex; justify-content: center; padding: var(--s4) var(--s3) 0; pointer-events: none; }
.nav__pill { display: inline-flex; align-items: center; gap: var(--s1); padding: var(--s2); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: var(--r-pill); background: rgba(20, 20, 20, 0.86); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); pointer-events: auto; transition: box-shadow var(--med) var(--ease); }
.nav.is-scrolled .nav__pill { box-shadow: 0 8px 24px -8px rgba(0, 0, 0, 0.5); }
.logo__mark { width: 100%; height: 100%; transition: transform var(--med) var(--ease), filter var(--med) var(--ease); }
.logo__dot { transform-origin: 33px 30.6px; transition: transform var(--med) var(--ease); }
.logo--sm { width: 28px; height: 28px; }
.nav__div { display: none; width: 1px; height: 20px; margin: 0 var(--s1); background: var(--stroke-2); }
.nav__links { display: flex; align-items: center; }
.nav__link { display: inline-flex; align-items: center; gap: 6px; padding: 6px var(--s3); border: 0; border-radius: var(--r-pill); background: transparent; color: var(--muted); font-size: var(--text-xs); text-decoration: none; white-space: nowrap; cursor: pointer; transition: color var(--fast) var(--ease), background-color var(--fast) var(--ease); }
.nav__link:hover, .nav__link.is-active { color: var(--text); background: rgba(31, 31, 31, 0.8); }
.nav__cta { color: var(--text); }

/* ---------- hero (template) ---------- */
.hero { position: relative; display: flex; flex-direction: column; justify-content: center; min-height: 100svh; overflow: hidden; background: var(--bg); }
.hero__media { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
/* the fade to the page colour is baked into the footage's last rows; anchoring the video to the bottom keeps it there */
.hero__media video { position: absolute; top: 0; bottom: -1px; left: 0; width: 100%; height: calc(100% + 1px); object-fit: cover; object-position: 50% 100%; }
.hero__shade { position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(0, 0, 0, 0.2) 70%, rgba(0, 0, 0, 0)); }
.hero__body { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; padding: var(--s12) var(--s5) var(--s11); text-align: center; }
.eyebrow { display: inline-flex; align-items: center; margin-bottom: var(--s6); padding: 7px var(--s4); border: 1px solid oklch(100% 0 0 / 0.16); border-radius: var(--r-pill); background: oklch(8% 0 0 / 0.55); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); font-size: 0.75rem; font-weight: var(--weight-medium); text-transform: uppercase; letter-spacing: 0.14em; color: var(--text); }
/* the hero label sits on moving footage, so it gets its own dark glass pill to stay readable */
.hero__title { max-width: 24ch; margin-bottom: var(--s6); font-size: var(--text-hero); font-weight: var(--weight-medium); line-height: 1.04; letter-spacing: var(--track-display); text-wrap: balance; text-shadow: 0 2px 24px rgba(0, 0, 0, 0.55); }
.hero__title-2 { display: block; color: rgba(245, 245, 245, 0.66); }
.hero__role { margin-bottom: var(--s6); font-size: clamp(1.125rem, 0.95rem + 0.8vw, 1.5rem); color: var(--muted); text-shadow: 0 1px 16px rgba(0, 0, 0, 0.8); }
.cycle { display: inline-block; color: var(--text); font-weight: var(--weight-medium); }
.cycle.is-swap { animation: fade-in 0.5s var(--ease) both; }
@keyframes fade-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.hero__bio { max-width: 34rem; margin-bottom: var(--s8); font-size: var(--text-md); line-height: 1.7; color: var(--text-2); text-shadow: 0 1px 16px rgba(0, 0, 0, 0.8); }
.js .in-name, .js .in-up { opacity: 0; transform: translateY(30px); }
.is-entered .in-name { animation: enter 1.2s cubic-bezier(0.215, 0.61, 0.355, 1) 0.1s both; }
.is-entered .in-up { animation: enter 1s cubic-bezier(0.215, 0.61, 0.355, 1) both; }
.is-entered .eyebrow.in-up { animation-delay: 0.3s; }
.is-entered .hero__role.in-up { animation-delay: 0.4s; }
.is-entered .hero__bio.in-up { animation-delay: 0.5s; }
.is-entered .wl-hero.in-up { animation-delay: 0.6s; }
@keyframes enter { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: none; } }
.muted { color: var(--muted); }
.sec--tight { padding-top: 0; }

/* ---------- logo lockup (as on Whosigned): mark + name in a fully rounded chip inside the nav pill ---------- */
/* logo lockup: mark + name in a fully rounded chip, sized to sit inside the nav pill */
.logo { display: inline-flex; align-items: center; gap: 9px; height: 40px; padding: 4px 14px 4px 4px; border-radius: var(--r-pill); background: var(--surface-2); color: var(--text); font-size: var(--text-sm); font-weight: var(--weight-semibold); letter-spacing: -0.02em; text-decoration: none; white-space: nowrap; transition: background var(--fast) var(--ease); }
.logo:hover { background: #242424; }
.logo__mark { flex: none; width: 32px; height: 32px; }
.foot__mark { flex: none; width: 30px; height: 30px; }
/* phones: the lockup keeps its name; the pill drops the links that also live in the footer */
@media (max-width: 639px) {
  .nav__links .nav__link[href$="#answers"], .nav__links .nav__link[href$="#faq"] { display: none; }
  .logo { height: 36px; gap: 7px; padding-right: 12px; }
  .logo__mark { width: 28px; height: 28px; }
}

/* ---------- 1 · the cost: two facts with charts (Landed) ---------- */
.key { width: 8px; height: 8px; margin-left: var(--space-2); border-radius: var(--radius-pill); }
.key:first-child { margin-left: 0; }
.proof { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-4); }
.proof__card { display: grid; grid-template-rows: auto 1fr; gap: var(--space-5); padding: var(--space-3); border-radius: var(--radius-xl); background: var(--surface); box-shadow: inset 0 0 0 1px var(--stroke); }
.proof__viz { display: grid; align-content: start; gap: var(--space-4); padding: var(--space-5); border-radius: var(--radius-lg); background: var(--bg); box-shadow: inset 0 0 0 1px var(--stroke-2); }
.proof__copy { display: grid; align-content: start; gap: var(--space-3); padding: 0 var(--space-4) var(--space-5); }
.proof__copy h3 { font-size: var(--text-h3); line-height: 1.3; letter-spacing: var(--track-heading); text-wrap: balance; }
.proof__copy p:last-child { color: var(--text-2); }
.viz-chart__top { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); font-size: var(--text-sm); font-weight: var(--weight-semibold); }
.viz-chart__tag { display: inline-flex; align-items: center; min-height: 24px; padding: 0 var(--space-2); border-radius: var(--radius-pill); background: var(--surface-2); font-size: var(--text-xs); font-weight: var(--weight-medium); color: var(--text-2); white-space: nowrap; }
.viz-split__nums { display: grid; grid-template-columns: 42fr 58fr; gap: var(--space-3); margin-top: var(--space-4); }
.viz-split__nums p { display: grid; gap: var(--space-1); }
.viz-split__nums strong { font-size: clamp(2.25rem, 1.8rem + 2vw, 3.25rem); font-weight: var(--weight-light); line-height: 1; letter-spacing: var(--track-display); font-variant-numeric: tabular-nums; }
.viz-split__bad strong { color: var(--error); }
.viz-split__nums span { display: inline-flex; align-items: center; gap: var(--space-2); font-size: var(--text-sm); color: var(--text-2); }
.viz-split__nums .key { margin: 0; }
.viz-split__bar { display: grid; grid-template-columns: 42fr 58fr; gap: 4px; height: 44px; }
.viz-split__bar i { display: block; border-radius: var(--radius-sm); transform: scaleX(0); transition: transform 1.1s var(--ease-out); }
.viz-split__note { font-size: var(--text-sm); color: var(--text-2); }
.proof.is-in .viz-split__bar i { transform: none; }
.cta { position: relative; border: 1px solid var(--stroke); overflow: hidden; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-7); align-items: center; padding: var(--space-7) var(--space-4) var(--space-4); border-radius: var(--radius-xl); background: var(--surface); color: var(--text); }
.cta__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 100%; }
.cta__shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10, 10, 10, 0.55), rgba(10, 10, 10, 0.15)); }
.cta__copy { position: relative; display: grid; gap: var(--space-4); justify-items: start; padding: 0 var(--space-2); }
.cta__copy .h2 { color: var(--text); max-width: 20ch; }
.cta__lede { max-width: 32rem; font-size: var(--text-lg); color: var(--text-2); }
.cta__card { position: relative; display: grid; gap: var(--space-5); padding: var(--space-6); border: 1px solid var(--stroke-2); border-radius: var(--radius-lg); background: rgba(20, 20, 20, 0.82); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); color: var(--text); box-shadow: 0 40px 80px -40px var(--shadow); }
.cta__label { font-size: var(--text-xs); font-weight: var(--weight-semibold); letter-spacing: var(--track-label); text-transform: uppercase; color: var(--text-2); }
.ticks { display: grid; gap: var(--space-3); }
.ticks li { position: relative; padding-left: var(--space-8); }
.ticks li::before { content: ""; position: absolute; left: 0; top: 0.15em; width: 22px; height: 22px; border-radius: var(--radius-pill); background: var(--color-ok-bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.2l2.6 2.6L12 5.4' fill='none' stroke='%237fd1a8' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 14px no-repeat; }
/* two status colours on the split bars: abuse in the theme's soft red, everything else in a quiet grey */
.key--bad { background: var(--error); }
.key--rest { background: var(--stroke-2); }
.viz-split__bar .bad { background: var(--error); transform-origin: left; }
.viz-split__bar .rest { background: #2a2a2a; transform-origin: left; transition-delay: 0.35s; }
.viz-split__nums--even { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.viz-split__nums strong { color: var(--text); }
.viz-split__bad strong { color: var(--error); }
.proof__copy h3 { font-weight: var(--weight-medium); }

/* ---------- 2 · three answers: scroll-pinned rail + example card (Firstline) ---------- */
.wx { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-6); }
.wx__tabs { position: relative; display: grid; align-content: start; align-self: center; }
.wx__rail { position: absolute; left: 0; top: 0; bottom: 0; width: 2px; border-radius: 2px; background: var(--color-line); overflow: hidden; }
.wx__rail i { position: absolute; inset: 0; background: linear-gradient(to bottom, var(--blue), var(--blue-2)); transform: scaleY(0); transform-origin: top; will-change: transform; }
.wt { position: relative; display: grid; gap: 2px; width: 100%; padding: var(--space-4) 0 var(--space-4) var(--space-6); border: 0; background: none; text-align: left; color: var(--color-ink-3); cursor: pointer; transition: color var(--dur-med) var(--ease-out); }
.wt:hover { color: var(--color-ink-2); }
.wt[aria-selected="true"] { color: var(--color-ink); }
.wt__name { font-size: var(--text-lg); font-weight: var(--weight-medium); letter-spacing: -0.02em; }
.wt__desc { margin-top: 2px; font-size: var(--text-sm); color: var(--color-ink-3); transition: color var(--dur-med) var(--ease-out); }
.wt[aria-selected="true"] .wt__desc { color: var(--color-ink-2); }
.wx__stage { position: relative; overflow: hidden; display: grid; place-items: center; min-height: 380px; padding: var(--space-8) var(--space-5); border: 1px solid var(--color-line); border-radius: var(--radius-lg); background: var(--color-bg-2); }
.wx__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; opacity: 0.9; }
.wx__panes { position: relative; display: grid; width: 100%; max-width: 440px; }
.wp { grid-area: 1 / 1; opacity: 0; transition: opacity 600ms var(--ease-out); pointer-events: none; }
.wp.is-active { opacity: 1; pointer-events: auto; }

.card { display: grid; gap: var(--space-4); padding: var(--space-6); border: 1px solid var(--color-line-2); border-radius: var(--radius-card); background: var(--color-panel); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); box-shadow: 0 40px 80px -40px var(--color-shadow); }
.card__top { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); }
.card__meta { font-size: var(--text-xs); color: var(--color-ink-3); }
.card__title { font-size: var(--text-h3); font-weight: var(--weight-medium); line-height: 1.25; letter-spacing: -0.02em; text-wrap: balance; }
.card__sub { font-size: var(--text-sm); color: var(--color-ink-2); }
.card__quote { font-size: var(--text-h3); line-height: 1.3; letter-spacing: -0.02em; }
.card__facts { display: grid; gap: var(--space-3); padding-top: var(--space-4); border-top: 1px solid var(--color-line); }
.card__facts dt { font-size: var(--text-xs); color: var(--color-ink-3); }
.card__facts dd { font-size: var(--text-sm); color: var(--color-ink-2); }
.badge { display: inline-flex; align-items: center; min-height: 24px; padding: 0 var(--space-3); border-radius: var(--radius-pill); font-size: var(--text-xs); font-weight: var(--weight-medium); }
.badge--signal { background: var(--color-signal-bg); color: var(--color-signal); }
.badge--person { background: var(--color-sky-bg); color: var(--color-sky); }
.badge--draft { background: var(--color-amber-bg); color: var(--color-amber); }
.badge--sent { background: var(--color-sky-bg); color: var(--color-sky); }
.badge--booked { background: var(--color-ok-bg); color: var(--color-ok); }
.wt { font-family: inherit; }
.card__facts div { display: grid; gap: 2px; }

/* ---------- 3 · setup: day-one process cards (Collabmagic) ---------- */
.process { position: relative; overflow: hidden; }
.process__bg {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 75%;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, var(--color-ink) 30%, var(--color-ink) 75%, transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0%, var(--color-ink) 30%, var(--color-ink) 75%, transparent 100%);
}

.process__inner { position: relative; }
.process__head { margin-bottom: var(--space-11); }
.pcards { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-3); }
.pcard {
  position: relative; display: flex; flex-direction: column; min-height: 220px; padding: var(--space-7);
  border-radius: var(--radius-lg); background: var(--color-frost); border: 1px solid var(--color-line-2);
  -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35); outline: none;
}
.pcard__badge { display: inline-flex; align-items: center; gap: var(--space-2); align-self: flex-start; padding: var(--space-2) var(--space-4); border-radius: var(--radius-pill); background: var(--color-accent-bg); font-size: var(--text-sm); font-weight: var(--weight-medium); }
.pcard__badge svg { width: 16px; height: 16px; fill: none; }
.pcard__title { margin-top: auto; padding-top: var(--space-7); font-family: var(--font); font-weight: var(--weight-medium); font-size: var(--text-h3); line-height: 1.1; transition: transform var(--dur-card) var(--ease-out); }
.pcard__list { display: grid; gap: var(--space-2); margin-top: var(--space-4); font-size: var(--text-sm); color: var(--color-ink-2); transition: transform var(--dur-card) var(--ease-out); }
.pcard__list li { display: flex; align-items: flex-start; gap: var(--space-2); }
/* Lucide "check" as a mask, tinted with the brand green (no dot bullets) */
.pcard__list li::before { content: ""; width: 14px; height: 14px; margin-top: 0.2em; flex: none; background: var(--color-accent); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27black%27 stroke-width=%273%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Cpath d=%27M20 6 9 17l-5-5%27/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27black%27 stroke-width=%273%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Cpath d=%27M20 6 9 17l-5-5%27/%3E%3C/svg%3E") center / contain no-repeat; }
.pcard__cta { margin-top: var(--space-5); align-self: stretch; }
@media (hover: hover) and (min-width: 1024px) {
  .pcard:hover .pcard__title, .pcard:focus-within .pcard__title, .pcard:hover .pcard__list, .pcard:focus-within .pcard__list { transform: translateY(-8px); }
}
@media (min-width: 640px) {
  .pcards { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}
@media (min-width: 1024px) {
  .pcards { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .pcard { min-height: 260px; }
}
.pcard__badge .ic { width: 16px; height: 16px; color: var(--color-accent); }
.process .center-head .h2 { max-width: 22ch; }

/* ---------- 4 · weekly report: report stage (Vigil / Brevlan) ---------- */
.stage { position: relative; overflow: hidden; display: grid; place-items: center; padding: var(--space-9) var(--space-4); border: 1px solid var(--color-line); border-radius: var(--radius-lg); background: var(--color-bg-2); }
.stage__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 70%; }
.msg { position: relative; width: 100%; max-width: 640px; padding: var(--space-5); border: 1px solid var(--color-line); border-radius: var(--radius-card); background: var(--color-panel); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); box-shadow: 0 40px 80px -40px var(--color-shadow); }
.msg__head { display: flex; align-items: center; gap: var(--space-3); }
.msg__avatar { width: 36px; height: 36px; color: var(--color-ink); }
.msg__avatar svg { width: 36px; height: 36px; display: block; }
.msg__sum { margin-bottom: var(--space-1); }
.msg__who { display: grid; line-height: 1.25; }
.msg__who strong { font-weight: var(--weight-semibold); }
.msg__who span { font-size: var(--text-xs); color: var(--color-ink-2); }
.msg__tag { margin-left: auto; padding: 2px var(--space-3); border-radius: var(--radius-pill); background: var(--color-glass-2); font-size: var(--text-xs); color: var(--color-ink-2); }
.msg__intro { margin: var(--space-4) 0 var(--space-3); color: var(--color-ink); }
.msg__items { display: grid; gap: var(--space-2); }
.row { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-2) var(--space-3); align-items: start; padding: var(--space-3) var(--space-4); border: 1px solid var(--color-line); border-radius: var(--radius-sm); transition: background-color var(--dur-med) var(--ease-out), opacity var(--dur-med) var(--ease-out); }
.row__kind { min-width: 50px; margin-top: 2px; padding: 1px var(--space-2); border-radius: var(--radius-pill); font-size: var(--text-xs); font-weight: var(--weight-semibold); text-align: center; }
.row__kind--stop { background: var(--color-find-bg); color: var(--color-find); }
.row__kind--scale { background: var(--color-ok-bg); color: var(--color-ok); }
.row__kind--fix { background: var(--color-accent-bg); color: var(--color-accent); }
.row__name { font-size: var(--text-sm); font-weight: var(--weight-semibold); line-height: 1.35; }
.row__why { margin-top: 2px; font-size: var(--text-sm); line-height: 1.45; color: var(--color-ink-2); }
/* ---------- report summary + item kinds ---------- */
.msg__sum { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-2); margin-top: var(--space-4); }
.msg__sum p { display: grid; gap: 2px; padding: var(--space-3); border-radius: var(--radius-sm); background: var(--color-glass-2); }
.msg__sum strong { font-size: clamp(1.25rem, 1rem + 1vw, 1.625rem); font-weight: var(--weight-semibold); line-height: 1.1; letter-spacing: var(--track-heading); font-variant-numeric: tabular-nums; }
.msg__sum span { font-size: var(--text-xs); line-height: 1.3; color: var(--color-ink-2); }
/* narrow phones: three columns pushed "1,240" into its box edge below 370px, so each figure becomes a row */
@media (max-width: 369px) {
  .msg__sum { grid-template-columns: minmax(0, 1fr); }
  .msg__sum p { grid-template-columns: 4.5rem minmax(0, 1fr); align-items: baseline; column-gap: var(--space-3); }
}
.row__kind--old { background: var(--color-glass-2); color: var(--color-ink-2); }
.row__kind { min-width: 72px; white-space: nowrap; }
@media (max-width: 639px) {
  .row { grid-template-columns: minmax(0, 1fr); }
  .row__kind { justify-self: start; }
}
.stage__bg { opacity: 0.95; }
.stage .msg { max-width: 600px; }

/* ---------- 5 · compare: capability table (Collabmagic) ---------- */
.ct { margin-top: 0; overflow-x: auto; border: 1px solid var(--color-line); border-radius: var(--r-lg); background: var(--surface); -webkit-overflow-scrolling: touch; }
.ct table { width: 100%; min-width: 760px; border-collapse: separate; border-spacing: 0; font-size: var(--text-sm); }
.ct th, .ct td { padding: var(--s4) var(--s5); text-align: left; vertical-align: middle; border-bottom: 1px solid var(--color-line); }
.ct tbody tr:last-child th, .ct tbody tr:last-child td { border-bottom: 0; }
.ct thead th { padding-top: var(--s6); padding-bottom: var(--s5); vertical-align: bottom; }
.ct__name { display: block; font-size: var(--text-md); font-weight: var(--weight-medium); color: var(--text); }
.ct__sub { display: block; margin-top: 2px; font-size: var(--text-xs); font-weight: var(--weight-regular); color: var(--muted); }
.ct tbody th { position: sticky; left: 0; z-index: 1; width: 26%; font-weight: var(--weight-medium); color: var(--text); background: var(--surface); }
.ct td { color: var(--text-2); }
.ct .ct__us { background: var(--color-accent-bg); color: var(--text); font-weight: var(--weight-medium); }
.ct thead .ct__us { position: relative; border-top: 2px solid var(--blue); }
.ct thead .ct__us .ct__sub { color: var(--blue); }
.ct__yes, .ct__no { display: inline-block; width: 18px; height: 18px; vertical-align: middle; }
.ct__yes { border-radius: var(--r-pill); background: var(--blue) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.2l2.6 2.6L12 5.4' fill='none' stroke='%230a0a0a' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 14px no-repeat; }
.ct__no { position: relative; }
.ct__no::before { content: ""; position: absolute; left: 3px; right: 3px; top: 50%; height: 1.5px; background: var(--stroke-2); }
.ct tbody tr:last-child td, .ct tbody tr:last-child th { font-weight: var(--weight-medium); color: var(--text); }
@media (max-width: 899px) {
  .ct { overflow: visible; border: 0; background: none; }
  .ct table, .ct tbody { display: block; min-width: 0; }
  .ct thead { display: none; }
  .ct tbody tr { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1px; margin-bottom: var(--s3); overflow: hidden; border: 1px solid var(--color-line); border-radius: var(--r-md); background: var(--color-line); }
  .ct tbody th { order: -2; position: static; grid-column: 1 / -1; width: auto; padding: var(--s3) var(--s4); border: 0; background: var(--surface); }
  .ct td { display: grid; gap: 2px; padding: var(--s3) var(--s4); border: 0; background: var(--surface); }
  .ct td::before { content: attr(data-label); font-size: var(--text-xs); font-weight: var(--weight-regular); color: var(--muted); }
  .ct td.ct__us { grid-column: 1 / -1; order: -1; background: var(--color-accent-bg); }
  .ct td.ct__us::before { color: var(--blue); font-weight: var(--weight-medium); }
}

/* ---------- 7 · FAQ: heading left, accordion right (Firstline) ---------- */
.faq { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-8); }
.accordion { display: grid; gap: var(--space-3); }
.acc { border: 1px solid var(--color-line); border-radius: var(--radius-md); background: var(--color-glass); }
.acc h3 { font-size: inherit; font-weight: inherit; }
.acc button { display: flex; width: 100%; justify-content: space-between; align-items: center; gap: var(--space-4); min-height: 60px; padding: var(--space-4) var(--space-5); border: 0; border-radius: var(--radius-md); background: none; font-weight: var(--weight-medium); text-align: left; color: var(--color-ink); cursor: pointer; }
.acc__icon { flex: none; width: 9px; height: 9px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-3px) rotate(45deg); transition: transform var(--dur-med) var(--ease-out); }
.acc.is-open .acc__icon { transform: translateY(2px) rotate(-135deg); }
.acc__panel { display: grid; grid-template-rows: 0fr; opacity: 0; transition: grid-template-rows var(--dur-med) var(--ease-out), opacity var(--dur-med) var(--ease-out); }
.acc.is-open .acc__panel { grid-template-rows: 1fr; opacity: 1; }
.acc__inner { min-height: 0; overflow: hidden; }
.acc__panel p { padding: 0 var(--space-5) var(--space-5); color: var(--color-ink-2); }

/* ---------- footer ---------- */
.foot { padding: var(--s11) 0 var(--s7); }
.foot__cta { display: grid; justify-items: start; gap: var(--s7); padding-bottom: var(--s10); border-bottom: 1px solid var(--stroke-2); }
.foot__big { font-size: clamp(2.75rem, 1.2rem + 6vw, 6rem); font-weight: var(--weight-medium); line-height: 0.98; letter-spacing: var(--track-display); }
.foot__big span { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.foot__row { display: grid; gap: var(--s5); padding: var(--s7) 0; }
.foot__brand { display: inline-flex; align-items: center; gap: var(--s3); font-size: var(--text-lg); font-weight: var(--weight-semibold); text-decoration: none; }
.foot__links { display: flex; flex-wrap: wrap; gap: var(--s1) var(--s5); }
.foot__links a { display: inline-flex; align-items: center; min-height: 36px; font-size: var(--text-sm); color: var(--muted); text-decoration: none; transition: color var(--fast) var(--ease); }
.foot__links a:hover { color: var(--text); }
.foot__legal { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s2); padding-top: var(--s5); border-top: 1px solid var(--stroke); font-size: var(--text-xs); color: var(--muted); }

/* ---------- dialog ---------- */
.field { display: grid; gap: var(--s2); margin-top: var(--s6); font-size: var(--text-sm); font-weight: var(--weight-medium); }
.field input { min-height: 50px; width: 100%; padding: var(--s3) var(--s5); border: 1px solid var(--stroke-2); border-radius: var(--r-pill); background: var(--bg); font-size: var(--text-md); font-weight: var(--weight-regular); color: var(--text); }
.field input::placeholder { color: #5c5c5c; }
.field input:focus { border-color: var(--blue); }
.field input[aria-invalid="true"] { border-color: var(--error); }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* footer contact button (no email address until a domain is linked) */
.foot__link { display: inline-flex; align-items: center; min-height: 36px; padding: 0; border: 0; background: none; font: inherit; font-size: var(--text-sm); color: var(--muted); cursor: pointer; text-align: left; transition: color var(--fast) var(--ease); }
.foot__link:hover { color: var(--text); }
.foot__link:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }

/* ---------- ≥ 640 ---------- */
@media (min-width: 640px) {
  .shell { padding: 0 var(--s8); }
  .sec { padding: var(--s11) 0; }
  .sec--tight { padding-top: 0; }
  .nav { padding-top: var(--s5); }
  .nav__div { display: block; }
  .nav__link { padding: var(--s2) var(--s4); font-size: var(--text-sm); }
  .foot__row { grid-template-columns: auto minmax(0, 1fr); align-items: center; }
  .foot__links { justify-content: flex-end; }
}

/* ---------- ≥ 1024 ---------- */
@media (min-width: 1024px) {
  .split-head { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: end; gap: var(--s9); margin-bottom: var(--s10); }
  .split-head .lede { padding-bottom: var(--s1); }
  .center-head { margin-bottom: var(--s9); }
}

@media (min-width: 640px) {
  .cta { padding: var(--space-8) var(--space-6) var(--space-6); }
  .cta__card { padding: var(--space-7); }
}
@media (min-width: 768px) {
  .proof { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-5); }
}
@media (min-width: 1024px) {
  .proof__viz { min-height: 300px; padding: var(--space-6); }
  .proof__copy { padding: 0 var(--space-5) var(--space-6); }
  .cta { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-8); padding: var(--space-9) var(--space-8); }
  .cta__copy { padding: 0; }
  .cta__shade { background: linear-gradient(90deg, rgba(10, 10, 10, 0.7), rgba(10, 10, 10, 0.1)); }
  .cta__card { padding: var(--space-8); }
}
@media (min-width: 1200px) {
  .cta { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--space-9); padding: var(--space-9); }
}
/* phones: a tighter card so the pinned block (tabs + card) fits under the nav */
@media (max-width: 639px) {
  .wx { gap: var(--space-4); }
  .wx__stage.wx__stage { min-height: 0; padding: var(--space-3); }
  .card { gap: var(--space-3); padding: var(--space-4); }
  .card__title { font-size: 1.0625rem; }
  .card__facts { gap: var(--space-2); padding-top: var(--space-3); }
  .card__facts dd { line-height: 1.45; }
}
@media (max-width: 1023px) {
  .wx .wt { padding-top: var(--space-3); padding-bottom: var(--space-3); }
  .wx__stage { min-height: 300px; padding: var(--space-5) var(--space-4); }
}
@media (min-width: 1024px) {
  .wx { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-10); align-items: stretch; }
  .wx__stage { min-height: 520px; }
}
@media (min-width: 1024px) {
  .faq { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: var(--space-10); align-items: start; }
}

@media (max-width: 399px) {
  .nav__links .nav__link:first-child { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; }
  .js .reveal, .js .in-name, .js .in-up { opacity: 1; transform: none; }
}

/* text inputs: no focus ring around the field; its own border changes colour on focus instead */
input:not([type="radio"]):not([type="checkbox"]):focus,
input:not([type="radio"]):not([type="checkbox"]):focus-visible { outline: none; }

/* ---- Team · "The people behind" (growth-studio-1 V2Team, LinkedIn links and the client-logo strip left out) ----
   Same layout as the source: centred heading + line, three cards (two founders, "Our Team"), photo 392×430 on top,
   name 600 24/33.6, role 500 16/19.2, card radius 30, 31 between cards, 56 under the heading. Laid out in this
   site's container instead of the source's scaled 1920 frame; under 900px the cards stack at max 392 wide, as in
   the source. Only the colours follow the site's theme, through the four --tm-* values below. */
.tm { --tm-title: #262626; --tm-sub: #6d727e; --tm-card: #f2f2f2; --tm-name: #161616; --tm-role: rgba(75, 75, 75, 0.6);
  display: flex; flex-direction: column; align-items: center; }
.tm__head { width: min(880px, 100%); text-align: center; }
.tm__title { margin: 0; color: var(--tm-title); font-weight: 700; font-size: 39.5px; line-height: 44px; letter-spacing: 0; text-wrap: balance; }
.tm__sub { margin: 12px 0 0; color: var(--tm-sub); font-weight: 400; font-size: 16px; line-height: 24px; letter-spacing: 0.02em; }
.tm__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 392px)); justify-content: center; gap: 31px; width: 100%; margin: 56px 0 0; padding: 1px 0 0; list-style: none; }
.tm__card { overflow: hidden; border-radius: 30px; background: var(--tm-card); }
.tm__photo { display: block; width: 100%; height: auto; aspect-ratio: 392 / 430; object-fit: cover; }
.tm__body { padding: 20px; }
.tm__body h3 { margin: 0; color: var(--tm-name); font-weight: 600; font-size: 24px; line-height: 33.6px; letter-spacing: 0; }
.tm__body p { min-height: 20px; margin: 3px 0 0; color: var(--tm-role); font-weight: 500; font-size: 16px; line-height: 19.2px; letter-spacing: 0.02em; }
@media (max-width: 900px) {
  .tm__title { font-size: 28px; line-height: 32px; }
  .tm__sub { font-size: 15px; line-height: 22px; }
  .tm__grid { grid-template-columns: minmax(0, 1fr); gap: 16px; max-width: 392px; margin-top: 32px; }
  .tm__body { padding-bottom: 24px; }
}
/* this site (Stayput theme, dark): the title and names in the page text, the line in its softer text, roles muted, the card on the theme surface (one step up from the page, like the FAQ band) */
.tm { --tm-title: var(--text); --tm-sub: var(--text-2); --tm-card: var(--surface); --tm-name: var(--text); --tm-role: var(--muted); }

/* ---- Contact page (/contact): heading, lede, email + address on the left, the message form on the right; stacked
   under 900px. Only the colours follow the site's theme, through the --ct-* values set after this block. Inputs show
   no focus ring: the border colour changes instead (as on every wedge site). ---- */
/* root class .ct-page: this site already uses .ct for its comparison table */
.ct-page { --ct-ink: #161616; --ct-ink-2: #4b4b4b; --ct-line: rgba(0, 0, 0, 0.12); --ct-card: #f2f2f2; --ct-field: #fff; --ct-focus: rgba(0, 0, 0, 0.45);
  padding: 160px 0 112px; color: var(--ct-ink); }
.ct__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 64px; align-items: start; }
.ct__title { margin: 0; color: var(--ct-ink); font-size: clamp(2.25rem, 1.6rem + 2.4vw, 3.5rem); font-weight: 600; line-height: 1.05; letter-spacing: -0.02em; }
.ct__lede { max-width: 30rem; margin: 20px 0 0; color: var(--ct-ink-2); font-size: 1.125rem; line-height: 1.55; text-wrap: pretty; }
.ct__info { display: grid; gap: 24px; margin: 40px 0 0; }
.ct__row { display: grid; gap: 6px; padding-top: 20px; border-top: 1px solid var(--ct-line); }
.ct__row dt { color: var(--ct-ink-2); font-size: 0.875rem; font-weight: 500; }
.ct__row dd { margin: 0; color: var(--ct-ink); font-size: 1.0625rem; line-height: 1.55; overflow-wrap: anywhere; }
.ct__row address { font-style: normal; }
.ct__row a { color: inherit; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--ct-line); }
.ct__row a:hover { text-decoration-color: currentColor; }
.ct__form { display: grid; gap: 20px; padding: 32px; border: 1px solid var(--ct-line); border-radius: 24px; background: var(--ct-card); }
.ct__field { display: grid; gap: 8px; color: var(--ct-ink); font-size: 0.875rem; font-weight: 500; }
.ct__field input, .ct__field textarea { width: 100%; box-sizing: border-box; margin: 0; padding: 12px 16px; border: 1px solid var(--ct-line); border-radius: 12px;
  background: var(--ct-field); color: var(--ct-ink); font: inherit; font-size: 1rem; font-weight: 400; line-height: 1.5; outline: none; box-shadow: none;
  transition: border-color 160ms cubic-bezier(0.16, 1, 0.3, 1); }
.ct__field input { min-height: 48px; }
.ct__field textarea { min-height: 160px; resize: vertical; }
.ct__field input::placeholder, .ct__field textarea::placeholder { color: var(--ct-ink-2); opacity: 0.7; }
.ct__field input:focus, .ct__field textarea:focus, .ct__field input:focus-visible, .ct__field textarea:focus-visible { border-color: var(--ct-focus); outline: none; box-shadow: none; }
.ct__field [aria-invalid="true"] { border-color: oklch(62% 0.2 25); }
.ct__send { justify-self: start; }
.ct__form[aria-busy="true"] .ct__send { opacity: 0.7; cursor: progress; }
@media (max-width: 900px) {
  .ct-page { padding: 120px 0 80px; }
  .ct__grid { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .ct__form { padding: 24px 20px; }
  .ct__send { justify-self: stretch; }
}
/* this site (Stayput theme, dark): page text and its softer text, theme hairlines, the form on the theme surface the team cards use, fields on its raised surface */
.ct-page { --ct-ink: var(--text); --ct-ink-2: var(--text-2); --ct-line: var(--stroke-2); --ct-card: var(--surface); --ct-field: var(--surface-2); --ct-focus: var(--text-2); }