/* Marlows: framed paper page on a cobalt/teal mesh. Charcoal type, cobalt + signal-green accents used sparingly. */
:root {
  /* Neutrals (warm paper) */
  --paper: #fdfdfc;
  --n200: #f8f7f4;
  --n300: #eceae6;
  --n400: #dfddd9;
  --n500: #b8b7b4;
  --n600: #807f7c;
  --n700: #4f4e4c;
  --n800: #41403f;
  --ink: #2e2d2c;
  --ink-75: rgba(46, 45, 44, .75);
  /* Cobalt */
  --b100: #ebeeff;
  --b200: #d9dfff;
  --b300: #9eabff;
  --b400: #5570ff;
  --b500: #2c43c9;
  /* Signal green */
  --g100: #dcf5ea;
  --g200: #aee9d0;
  --g300: #63d2a6;
  --g400: #22b47f;
  --g500: #0e7f5a;
  --danger: #b42318;
  --mesh:
    radial-gradient(55% 45% at 12% 8%, #5d74ff 0%, transparent 62%),
    radial-gradient(48% 55% at 90% 26%, #24b682 0%, transparent 62%),
    radial-gradient(60% 55% at 40% 95%, #6f5fe0 0%, transparent 62%),
    linear-gradient(140deg, #3550dd, #4a59cf 48%, #1d9a76);
  --bar-grad: linear-gradient(90deg, #22b47f 10%, #4a59cf 55%, #2c43c9);
  --font: "Manrope", "Helvetica Neue", Arial, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, Menlo, monospace;
  --e-quart: cubic-bezier(.165, .84, .44, 1);
  --e-cubic: cubic-bezier(.215, .61, .355, 1);
  --e-swap: cubic-bezier(.77, 0, .175, 1);
  --e-snap: cubic-bezier(0, 1, 0, 1);
  --r: .5rem;
  color-scheme: light;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { background: var(--paper); }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font);
  font-size: 1rem;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 60; background: var(--paper); }
img, svg { max-width: 100%; }
a { color: inherit; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--b400); outline-offset: 3px; border-radius: 4px; }
::selection { background: var(--b200); }

/* ---------- Layout ---------- */
.pad { padding-left: max(16px, 5%, env(safe-area-inset-left, 0px)); padding-right: max(16px, 5%, env(safe-area-inset-right, 0px)); }
.container { max-width: 86.5rem; margin-inline: auto; }
.container-m { max-width: 64rem; margin-inline: auto; }
.container-s { max-width: 48rem; margin-inline: auto; }
.sec-l { padding-block: 7rem; }
.sec-m { padding-block: 5rem; }
.sec-s { padding-block: 3rem; }
.inset { padding: .5rem; }
.center { text-align: center; }
.stack { display: flex; flex-direction: column; gap: 1rem; }
.head { display: flex; flex-direction: column; gap: 1rem; margin-bottom: 3rem; max-width: 46rem; }
.head.center { margin-inline: auto; align-items: center; }
.head-row { display: flex; justify-content: space-between; align-items: end; gap: 2rem; flex-wrap: wrap; margin-bottom: 3rem; }
.head-row .head { margin-bottom: 0; }

/* ---------- Type ---------- */
h1, h2, h3, h4, h5, h6 { margin: 0; font-weight: 600; line-height: 1.15; letter-spacing: -.025em; text-wrap: balance; }
p { margin: 0; }
.display { font-size: clamp(2.5rem, 4.6vw, 4.5rem); line-height: 1.06; font-weight: 700; letter-spacing: -.03em; }
.h1 { font-size: 3.5rem; }
.h2 { font-size: 3rem; }
.h3 { font-size: 2.5rem; }
.h4 { font-size: 2rem; line-height: 1.3; }
.h5 { font-size: 1.5rem; line-height: 1.4; }
.h6 { font-size: 1.25rem; line-height: 1.4; }
.t-lg { font-size: 1.25rem; }
.t-md { font-size: 1.125rem; }
.t-sm { font-size: .875rem; }
.t-xs { font-size: .75rem; }
.muted { opacity: .75; }
.hl { color: var(--b500); }
.hl-g { color: var(--g500); }
.eyebrow { display: inline-flex; align-items: center; gap: .5rem; font-family: var(--mono); font-size: .8125rem; font-weight: 500; text-transform: uppercase; letter-spacing: .06rem; color: var(--n600); }
.eyebrow .em { width: 1.25rem; height: .75rem; flex: none; color: var(--g400); }
.eyebrow.is-blue { color: var(--b500); }
.eyebrow.is-green { color: var(--g500); }
.on-dark .eyebrow { color: var(--n500); }
.on-dark .eyebrow.is-green { color: var(--g300); }
.mono { font-family: var(--mono); }
.lede { max-width: 38rem; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: .75rem;
  min-height: 3rem; padding: .5rem .5rem .5rem 1.25rem;
  border-radius: 999px; border: 0; cursor: pointer;
  background: var(--ink); color: var(--paper);
  font-size: 1rem; font-weight: 400; text-decoration: none; white-space: nowrap;
  transition: opacity .38s var(--e-quart), background-color .38s var(--e-quart), color .38s var(--e-quart), transform .38s var(--e-quart);
}
.btn:hover { opacity: .78; }
.btn-icon { width: 2rem; height: 2rem; border-radius: 999px; background: var(--paper); color: var(--ink); display: grid; place-items: center; flex: none; transition: transform .38s var(--e-quart); }
.btn:hover .btn-icon { transform: translateX(2px); }
.btn-icon svg { width: 14px; height: 14px; }
.btn.is-accent { background: var(--b500); }
.btn.is-accent .btn-icon { color: var(--b500); }
.btn.is-light { background: var(--paper); color: var(--ink); }
.btn.is-light .btn-icon { background: var(--ink); color: var(--paper); }
.btn.is-sec { background: var(--n300); color: var(--ink); padding: .5rem 1.25rem; }
.btn.is-sec:hover { opacity: 1; background: var(--n400); }
.btn.is-sm { min-height: 2.5rem; font-size: .9375rem; }
.btn.is-sm .btn-icon { width: 1.75rem; height: 1.75rem; }
.link { display: inline-flex; align-items: center; gap: .4rem; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; cursor: pointer; background: none; border: 0; padding: 0; }
.link:hover { opacity: .75; }
.btn-row { display: flex; gap: 1rem; flex-wrap: wrap; align-items: center; }

/* ---------- Tiles, tags, cards ---------- */
.tile { width: 2.5rem; height: 2.5rem; border-radius: .375rem; display: grid; place-items: center; flex: none; background: var(--b100); color: var(--b500); transition: background-color .5s ease, color .5s ease; }
.tile svg { width: 55%; height: 55%; }
.tile.is-green { background: var(--g100); color: var(--g500); }
.tile.is-ink { background: var(--ink); color: var(--paper); }
.tile.is-lg { width: 3.5rem; height: 3.5rem; border-radius: .5rem; }
.tile.is-solid { background: var(--b500); color: var(--b300); }
.tile.is-solid-g { background: var(--g500); color: var(--g200); }
.tag { display: inline-flex; align-items: center; gap: .5rem; padding: .375rem .75rem .375rem .375rem; border-radius: 999px; background: var(--n200); border: 1px solid var(--n300); font-size: .875rem; font-weight: 500; }
.tag .tile { width: 1.5rem; height: 1.5rem; border-radius: 999px; }
.chip { display: inline-flex; align-items: center; padding: .25rem .625rem; border-radius: 999px; background: var(--n300); font-size: .8125rem; }
.card { background: var(--n200); border-radius: var(--r); padding: 1.5rem; }
.card.is-border { background: var(--paper); border: 1px solid var(--n300); }
.card-title { font-size: 1.5rem; line-height: 1.4; font-weight: 500; }
.example-badge { display: inline-flex; align-items: center; gap: .375rem; font-size: .75rem; font-weight: 600; letter-spacing: .08rem; text-transform: uppercase; color: var(--n600); }
.example-badge::before { content: ""; width: .4rem; height: .4rem; border-radius: 99px; background: currentColor; }

/* ---------- Navbar ---------- */
.nav-wrap { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 50; background: rgba(253,253,252,.88); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid var(--n300); }
.nav { position: relative; }
.nav-inner { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; min-height: 4.5rem; }
.logo { display: inline-flex; align-items: center; gap: .55rem; text-decoration: none; color: var(--ink); flex: none; }
.logo svg.mark { width: 2rem; height: 2rem; }
.logo .word { font-weight: 700; font-size: 1.6rem; letter-spacing: -.04em; line-height: 1; }
.nav-menu { display: flex; align-items: center; gap: .25rem; }
.nav-link { display: inline-flex; align-items: center; gap: .35rem; padding: .625rem .875rem; border-radius: 999px; text-decoration: none; font-size: 1rem; background: none; border: 0; cursor: pointer; transition: background-color .3s ease; }
.nav-link:hover, .dd.is-open > .nav-link { background: var(--n200); }
.nav-link[aria-current="page"] { background: var(--n200); }
.nav-link .chev { width: 12px; height: 12px; transition: transform .3s ease; }
.dd.is-open > .nav-link .chev { transform: rotate(180deg); }
.nav-right { display: flex; align-items: center; gap: .75rem; }
.lbl-short { display: none; }
.menu-btn { display: none; width: 2.5rem; height: 2.5rem; border-radius: 999px; background: var(--n300); border: 0; cursor: pointer; place-items: center; }
.menu-btn span { width: 1.75rem; height: 1.75rem; border-radius: 999px; background: var(--paper); display: grid; place-items: center; }
.menu-btn svg { width: 12px; height: 12px; }
.menu-btn .v { transition: transform .3s ease; transform-origin: center; }
.menu-open .menu-btn .v { transform: rotate(90deg); opacity: 0; }

.mega { position: absolute; left: 0; right: 0; top: 100%; background: var(--paper); border-radius: 0 0 .5rem .5rem; box-shadow: 0 24px 40px -24px rgba(46,45,44,.25); border-top: 1px solid var(--n300); padding-block: 1.5rem 2rem; opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity .3s ease, transform .3s ease, visibility 0s .3s; }
.dd.is-open .mega { opacity: 1; visibility: visible; transform: none; transition: opacity .3s ease, transform .3s ease; }
.mega-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; }
.mega-grid.is-4 { grid-template-columns: 1.2fr 1.2fr 1fr; }
.mega-col { display: flex; flex-direction: column; gap: .25rem; min-width: 0; }
.mega-head { font-size: .8125rem; text-transform: uppercase; letter-spacing: .1rem; color: var(--n600); padding: 0 .75rem .5rem; }
.mi { display: flex; gap: .875rem; align-items: flex-start; padding: .75rem; border-radius: .5rem; text-decoration: none; transition: background-color .5s ease; }
.mi .tile { width: 2.25rem; height: 2.25rem; }
.mi-t, .mi-d { display: block; }
.mi-t { font-size: 1.125rem; font-weight: 500; line-height: 1.3; }
.mi-d { font-size: .875rem; opacity: .75; max-height: 0; overflow: hidden; transition: max-height .5s var(--e-snap); }
.mi.is-plain { padding: .5rem .75rem; }
.mi.is-plain .mi-t { font-size: 1rem; font-weight: 400; }
.mega-feature { background: var(--ink); color: var(--paper); border-radius: .5rem; padding: 1.25rem; display: flex; flex-direction: column; justify-content: space-between; gap: 1.5rem; text-decoration: none; min-height: 12rem; position: relative; overflow: hidden; }
.mega-feature::after { content: ""; position: absolute; right: 1.25rem; bottom: 0; width: 5rem; height: 3.5rem; background: radial-gradient(circle at 50% 100%, transparent 0 1.6rem, var(--n800) 1.6rem); opacity: .9; }
.mega-feature > * { position: relative; z-index: 1; }
@media (min-width: 1024px) {
  .mi:hover { background: var(--b100); }
  .mi:hover .tile { background: var(--b500); color: var(--b300); }
  .mi.is-green:hover { background: var(--g100); }
  .mi.is-green:hover .tile { background: var(--g500); color: var(--g200); }
  .mi:hover .mi-d { max-height: 6rem; }
}
.mobile-panel { display: none; }
.nav-overlay { position: fixed; inset: 0; background: rgba(46,45,44,.2); z-index: 40; opacity: 0; visibility: hidden; transition: opacity .3s ease, visibility 0s .3s; }
.menu-open .nav-overlay { opacity: 1; visibility: visible; transition: opacity .3s ease; }

/* ---------- Hero (S1) ---------- */
.hero { padding-block: 5rem 4rem; text-align: center; }
.hero .stack { align-items: center; gap: 3rem; }
.hero .display { max-width: 72rem; }
.hero-sub { max-width: 38rem; font-size: 1.125rem; }
.lstack { display: inline-block; position: relative; width: .86em; height: .86em; vertical-align: -.1em; margin: 0 .06em; }
.lstack .si { position: absolute; inset: 0; border-radius: .2em; overflow: hidden; transform-origin: center top; display: grid; place-items: center; animation: cardFlip 18s infinite cubic-bezier(.4,0,.2,1); }
.lstack .si svg { width: 52%; height: 52%; }
.lstack .si b { font-size: .3em; font-weight: 700; letter-spacing: .02em; }
.lstack .si .cal { display: flex; flex-direction: column; align-items: center; line-height: 1; gap: .06em; }
.lstack .si .cal small { font-size: .17em; text-transform: uppercase; letter-spacing: .1em; font-weight: 600; }
.lstack .si .cal strong { font-size: .38em; font-weight: 600; }
.lstack .si:nth-child(1) { animation-delay: var(--d1); }
.lstack .si:nth-child(2) { animation-delay: var(--d2); }
.lstack .si:nth-child(3) { animation-delay: var(--d3); }
.ls-a { --d1: 0s; --d2: -12s; --d3: -6s; }
.ls-b { --d1: -16s; --d2: -10s; --d3: -4s; }
.ls-c { --d1: -14s; --d2: -8s; --d3: -2s; }
@keyframes cardFlip {
  0%, 31% { transform: translateY(0) scale(1); z-index: 3; opacity: 1; filter: none; visibility: visible; }
  31.5% { transform: translateY(10px) scale(.75); z-index: 2; opacity: .8; }
  33.33%, 64.33% { transform: translateY(-.11em) scale(.8); z-index: 2; opacity: 1; filter: grayscale(.7) brightness(.85); }
  64.5%, 97.66% { transform: translateY(-.11em) scale(.8); z-index: 1; opacity: 0; visibility: hidden; }
  99% { transform: translateY(0) scale(.95); z-index: 3; opacity: .9; visibility: visible; filter: none; }
  100% { transform: translateY(0) scale(1); z-index: 3; opacity: 1; }
}
.c-b { background: var(--b500); color: var(--paper); }
.c-bl { background: var(--b200); color: var(--b500); }
.c-g { background: var(--g400); color: var(--paper); }
.c-gl { background: var(--g200); color: var(--g500); }
.c-ink { background: var(--ink); color: var(--paper); }
.c-p { background: var(--n300); color: var(--ink); }
.hero-note { display: flex; gap: 1.5rem; flex-wrap: wrap; justify-content: center; font-size: .875rem; }
.hero-note span { display: inline-flex; gap: .4rem; align-items: center; opacity: .75; }
.hero-note svg { width: 14px; height: 14px; color: var(--g500); }

/* ---------- Marquee (S4) ---------- */
.marquee { display: flex; flex-direction: column; gap: .5rem; overflow: hidden; border-radius: .75rem; -webkit-mask: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.mq-row { display: flex; gap: .5rem; width: max-content; animation: mqL 120s linear infinite; will-change: transform; }
.mq-row.is-rev { animation-name: mqR; }
.marquee:hover .mq-row { animation-play-state: paused; }
@keyframes mqL { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes mqR { from { transform: translateX(-50%); } to { transform: translateX(0); } }
.mq-card { position: relative; overflow: hidden; display: flex; align-items: center; gap: 1.25rem; padding: 1.25rem 2rem 1.25rem 1.25rem; background: var(--n200); border-radius: .5rem; min-height: 6.5rem; transition: background-color .15s var(--e-swap), color .15s var(--e-swap); }
.mq-card::before { content: ""; position: absolute; inset: 0; background: var(--mesh); opacity: 0; transition: opacity .25s var(--e-swap); }
.mq-card > * { position: relative; }
.mq-card .k { font-size: 1.25rem; font-weight: 500; color: var(--b500); transition: color .25s var(--e-swap); white-space: nowrap; }
.mq-card .v { font-size: .9375rem; max-width: 17rem; line-height: 1.4; }
.mq-card .v small { display: block; opacity: .65; font-size: .8125rem; }
.mq-card:hover { background: var(--ink); color: var(--paper); }
.mq-card:hover::before { opacity: .22; }
.mq-card:hover .k { color: var(--g300); }
.mq-card:hover .tile { background: var(--n800); color: var(--g300); }
.mq-caption { margin-top: 1rem; text-align: center; font-size: .875rem; opacity: .7; }

/* ---------- What we do tabs (S5) ---------- */
@property --a { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
.tabs { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; margin-bottom: 2rem; }
.tab { position: relative; display: inline-flex; align-items: center; gap: .625rem; padding: 1rem 1.25rem; border-radius: .5rem; background: var(--n200); border: 0; cursor: pointer; text-transform: uppercase; letter-spacing: .08rem; font-size: .875rem; font-weight: 500; isolation: isolate; transition: background-color .3s ease; }
.tab .tile { width: 1.75rem; height: 1.75rem; background: var(--n300); color: var(--n700); }
.tab-border { position: absolute; inset: -1px; border-radius: .55rem; z-index: -1; background: transparent; }
.tab-border::after { content: ""; position: absolute; inset: 2px; border-radius: .45rem; background: var(--n200); transition: background-color .3s ease; }
.tab.is-current .tab-border { background: conic-gradient(from 270deg, var(--b500) 0deg var(--a), var(--b100) var(--a) 360deg); animation: tabProgress var(--tab-dur, 5s) linear forwards; }
.tab.is-current .tab-border::after { background: var(--b100); }
.tab.is-current .tile { background: var(--b500); color: var(--b300); }
.tabs.is-static .tab.is-current .tab-border { animation: none; --a: 360deg; }
@keyframes tabProgress { from { --a: 0deg; } to { --a: 360deg; } }
.tab:hover { background: var(--n300); }
.panes { position: relative; }
.pane { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: 1rem; animation: paneIn .45s var(--e-cubic); }
.pane[hidden] { display: none; }
@keyframes paneIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.pane-copy { background: var(--n200); border-radius: .5rem; padding: 2.5rem; display: flex; flex-direction: column; gap: 1.5rem; justify-content: space-between; min-width: 0; }
.pane-strip { display: flex; gap: 1rem; align-items: center; background: var(--paper); border-radius: .5rem; padding: 1rem; }
.pane-strip .big { font-size: 2rem; font-weight: 500; color: var(--b500); white-space: nowrap; }
.pane-strip p { font-size: .9375rem; }
.pane-vis { background: var(--ink); color: var(--paper); border-radius: .5rem; padding: 1.5rem; min-width: 0; position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: center; }

/* Console mockups */
.console { background: #262524; border: 1px solid var(--n700); border-radius: .5rem; font-family: var(--mono); font-size: .8125rem; overflow: hidden; }
.console-top { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: .75rem 1rem; border-bottom: 1px solid var(--n700); color: var(--n500); flex-wrap: wrap; }
.console-top b { color: var(--paper); font-weight: 500; }
.live { display: inline-flex; align-items: center; gap: .4rem; color: var(--g300); }
.live::before { content: ""; width: .45rem; height: .45rem; border-radius: 9px; background: var(--g400); box-shadow: 0 0 0 0 rgba(34,180,127,.6); animation: ping 2s infinite; }
@keyframes ping { 0% { box-shadow: 0 0 0 0 rgba(34,180,127,.55); } 70% { box-shadow: 0 0 0 7px rgba(34,180,127,0); } 100% { box-shadow: 0 0 0 0 rgba(34,180,127,0); } }
.sig-table { width: 100%; border-collapse: collapse; min-width: 32rem; }
.sig-table th { text-align: left; font-weight: 400; color: var(--n500); padding: .5rem 1rem; font-size: .75rem; text-transform: uppercase; letter-spacing: .06rem; }
.sig-table td { padding: .625rem 1rem; border-top: 1px solid #383736; color: #e9e8e5; vertical-align: middle; }
.sig-table td small { display: block; color: var(--n500); font-size: .75rem; }
.sig-table .ago { color: var(--n500); width: 3rem; }
.sig-row { animation: rowIn .6s var(--e-cubic); }
@keyframes rowIn { from { background: rgba(34,180,127,.18); } to { background: transparent; } }
.trig { display: inline-flex; align-items: center; gap: .4rem; }
.trig i { width: .5rem; height: .5rem; border-radius: 2px; flex: none; }
.bar { display: flex; align-items: center; gap: .5rem; }
.bar span { display: block; height: .375rem; border-radius: 9px; background: var(--n700); width: 4.5rem; overflow: hidden; }
.bar span i { display: block; height: 100%; border-radius: 9px; background: var(--g400); }
.console-foot { display: flex; justify-content: space-between; gap: 1rem; padding: .75rem 1rem; border-top: 1px solid var(--n700); color: var(--n500); flex-wrap: wrap; }
.console-foot b { color: var(--g300); font-weight: 500; }
.scroll-x { overflow-x: auto; }

.seq { display: flex; flex-direction: column; gap: .5rem; }
.seq-row { display: grid; grid-template-columns: 4rem 2rem minmax(0, 1fr) auto; gap: .75rem; align-items: center; padding: .75rem; border-radius: .5rem; background: var(--n800); color: #e9e8e5; font-size: .875rem; min-width: 0; }
.seq-row .day { font-family: var(--mono); color: var(--n500); font-size: .75rem; }
.seq-row .tile { width: 2rem; height: 2rem; background: var(--n700); color: var(--paper); }
.seq-row .st { font-family: var(--mono); font-size: .75rem; color: var(--n500); }
.seq-row.is-hit { background: #2e3a35; }
.seq-row.is-hit .st { color: var(--g300); }
.seq-row.is-hit .tile { background: var(--g500); color: var(--g200); }

.dialer { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: .75rem; }
.dial-card { background: var(--n800); border-radius: .5rem; padding: 1rem; display: flex; flex-direction: column; gap: .75rem; min-width: 0; }
.dial-card .lbl { font-family: var(--mono); font-size: .75rem; color: var(--n500); text-transform: uppercase; letter-spacing: .06rem; }
.dial-q { display: flex; flex-direction: column; gap: .4rem; font-size: .875rem; }
.dial-q div { display: flex; justify-content: space-between; gap: .5rem; padding: .5rem .625rem; border-radius: .375rem; background: #3a3938; }
.dial-q div.is-on { background: var(--b500); }
.dial-q span:last-child { font-family: var(--mono); font-size: .75rem; opacity: .8; }
.script { font-size: .9375rem; line-height: 1.5; color: #f1f0ed; }
.waves { display: flex; gap: 3px; align-items: center; height: 1.5rem; }
.waves i { width: 3px; border-radius: 3px; background: var(--g300); animation: wave 1.1s ease-in-out infinite; }
@keyframes wave { 0%, 100% { height: 20%; } 50% { height: 100%; } }

/* ---------- Problems (S6) ---------- */
.problems { display: flex; flex-direction: column; gap: 1rem; }
.prob { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 3rem; align-items: center; background: var(--n200); border-radius: .5rem; padding: 2.5rem; }
.prob-copy { display: flex; flex-direction: column; gap: 1rem; min-width: 0; }
.prob-vis { background: var(--paper); border-radius: .5rem; padding: 1.5rem; min-width: 0; }
.cal-grid { display: grid; grid-template-columns: 4.5rem minmax(0, 1fr); gap: .5rem 1rem; align-items: center; font-size: .75rem; }
.cal-grid .m { color: var(--n600); font-family: var(--mono); }
.cal-track { position: relative; height: 1rem; background: var(--n200); border-radius: 99px; }
.cal-track i { position: absolute; top: 0; bottom: 0; border-radius: 99px; background: var(--ink); transform-origin: left; transition: transform 1s var(--e-cubic); }
.cal-track i.is-g { background: var(--b400); }
.ramp { display: flex; align-items: flex-end; gap: .5rem; height: 11rem; border-bottom: 1px solid var(--n300); padding-top: 1rem; }
.ramp div { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: .375rem; height: 100%; min-width: 0; }
.ramp i { display: block; width: 100%; border-radius: .25rem .25rem 0 0; background: var(--n400); transform-origin: bottom; transition: transform 1s var(--e-cubic); }
.ramp i.is-cost { background: var(--ink); }
.ramp-x { display: flex; gap: .5rem; font-family: var(--mono); font-size: .6875rem; color: var(--n600); padding-top: .375rem; }
.ramp-x span { flex: 1; text-align: center; }
.legend { display: flex; gap: 1rem; flex-wrap: wrap; font-size: .75rem; margin-top: .75rem; color: var(--n700); }
.legend span { display: inline-flex; align-items: center; gap: .375rem; }
.legend i { width: .625rem; height: .625rem; border-radius: 2px; }
.org { display: grid; gap: .625rem; }
.org-row { display: flex; gap: .625rem; flex-wrap: wrap; justify-content: center; }
.person { display: inline-flex; align-items: center; gap: .5rem; padding: .375rem .75rem .375rem .375rem; border-radius: 999px; background: var(--n200); font-size: .8125rem; }
.person .av { width: 1.75rem; height: 1.75rem; border-radius: 99px; display: grid; place-items: center; font-size: .6875rem; font-weight: 600; }
.person.is-x { opacity: .55; text-decoration: line-through; }
.person.is-ok { background: var(--g100); }
.prob-vis .cap { font-size: .75rem; color: var(--n600); margin-top: 1rem; text-align: center; }

/* ---------- Process (S7) ---------- */
.process { background: var(--n200); border-radius: .5rem; overflow: hidden; }
.proc-vis { position: relative; height: 26rem; display: grid; place-items: center; overflow: hidden; }
.rings { position: absolute; inset: 0; display: grid; place-items: center; }
.rings i { position: absolute; border-radius: 50%; border: 1px solid var(--n400); }
.proc-scene { position: absolute; inset: 0; display: grid; place-items: center; opacity: 0; transition: opacity .25s ease-out; }
.proc-scene.is-on { opacity: 1; }
.hub { width: 6rem; height: 6rem; border-radius: 1.25rem; background: var(--ink); display: grid; place-items: center; position: relative; z-index: 2; }
.hub svg { width: 3rem; height: 3rem; }
.float { position: absolute; display: inline-flex; align-items: center; gap: .625rem; padding: .625rem .875rem .625rem .625rem; background: var(--paper); border-radius: .625rem; box-shadow: 0 10px 30px -12px rgba(46,45,44,.25); font-size: .875rem; white-space: nowrap; animation: bob 6s ease-in-out infinite; z-index: 3; }
.float .tile { width: 2rem; height: 2rem; }
.float small { display: block; font-size: .75rem; opacity: .65; }
@keyframes bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
.avatar { position: absolute; width: 3rem; height: 3rem; border-radius: 99px; display: grid; place-items: center; font-size: .8125rem; font-weight: 600; border: 3px solid var(--n200); z-index: 2; }
.proc-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--n300); }
.proc-step { text-align: left; padding: 2rem; background: none; border: 0; cursor: pointer; display: flex; flex-direction: column; gap: .75rem; opacity: .5; transition: opacity .3s ease; position: relative; }
.proc-step + .proc-step { border-left: 1px solid var(--n300); }
.proc-step.is-on { opacity: 1; }
.proc-step .when { font-size: .8125rem; text-transform: uppercase; letter-spacing: .1rem; color: var(--n600); }
.proc-bar { position: absolute; left: 2rem; right: 2rem; top: 0; height: 2px; background: transparent; overflow: hidden; }
.proc-bar i { display: block; height: 100%; width: 0; background: var(--bar-grad); }
.proc-step.is-on .proc-bar i { width: 100%; transition: width 6s linear; }
.process.is-static .proc-step.is-on .proc-bar i { transition: none; }

/* ---------- CTA + stats (S8) ---------- */
.cta-stats { background: var(--n200); border-radius: .5rem; padding: 8rem 3.5rem 3.5rem; display: flex; flex-direction: column; gap: 4rem; align-items: center; overflow: hidden; }
.cta-stats.is-dark { background: var(--ink); color: var(--paper); }
.strip { width: 100%; overflow: hidden; -webkit-mask: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); mask: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
.strip-row { display: flex; gap: 3rem; width: max-content; animation: mqL 30s linear infinite; }
.strip-row span { display: inline-flex; align-items: center; gap: .625rem; font-size: 1.125rem; font-weight: 500; color: var(--n700); white-space: nowrap; }
.strip-row span svg { width: 1.25rem; height: 1.25rem; color: var(--n600); }
.is-dark .strip-row span { color: var(--n500); }
.stat-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .75rem; width: 100%; }
.stat { background: var(--paper); border: 1px solid var(--n300); border-radius: .5rem; padding: 1rem; display: flex; flex-direction: column; gap: 2.5rem; }
.is-dark .stat { background: var(--n800); border-color: var(--n700); }
.stat .lbl { font-size: .875rem; text-transform: uppercase; letter-spacing: .1rem; color: var(--b500); font-weight: 500; }
.is-dark .stat .lbl { color: var(--g300); }
.stat .val { font-size: 1.5rem; line-height: 1.3; }
.stat .val small { display: block; font-size: .9375rem; opacity: .7; margin-top: .25rem; }

/* ---------- Slider (S9 / S14) ---------- */
.slider { position: relative; }
.slider-track { display: flex; gap: 1rem; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding-bottom: .25rem; margin-right: calc(-1 * max(16px, 5%)); padding-right: max(16px, 5%); scroll-padding-left: 0; }
.slider-track::-webkit-scrollbar { display: none; }
.slider-track > * { scroll-snap-align: start; flex: none; }
.slider-ctrl { display: flex; align-items: center; gap: 1.5rem; margin-top: 2rem; }
.arrows { display: flex; gap: .5rem; }
.arrow { width: 2.5rem; height: 2.5rem; border-radius: 99px; border: 1px solid var(--n400); background: var(--paper); display: grid; place-items: center; cursor: pointer; transition: background-color .2s ease, opacity .2s ease; }
.arrow:hover { background: var(--n200); }
.arrow:disabled { opacity: .35; cursor: default; }
.arrow svg { width: 14px; height: 14px; }
.drag { flex: 1; height: 2px; background: var(--n300); border-radius: 2px; overflow: hidden; }
.drag i { display: block; height: 100%; width: 20%; background: var(--ink); transition: width .3s ease-out; }
.dots { display: flex; gap: .375rem; }
.dots button { width: .5rem; height: .5rem; border-radius: 99px; border: 0; padding: 0; background: var(--n400); cursor: pointer; }
.dots button.is-active { background: var(--ink); }

.role-card { width: min(19rem, 78vw); display: flex; flex-direction: column; gap: 1rem; }
.portrait { aspect-ratio: 4 / 5; border-radius: .5rem; background: linear-gradient(180deg, var(--n200), var(--n300)); position: relative; overflow: hidden; display: grid; place-items: end center; max-width: 100%; }
.portrait { place-items: center; align-content: center; gap: 1.5rem; padding: 3.5rem 1.25rem 1.25rem; }
.role-ic { width: 5rem; height: 5rem; border-radius: 1.1rem; display: grid; place-items: center; }
.role-ic svg { width: 2.4rem; height: 2.4rem; }
.tasks { display: flex; flex-direction: column; gap: .375rem; width: 100%; max-width: 15rem; }
.tasks span { display: flex; align-items: center; gap: .5rem; background: var(--paper); border-radius: .5rem; padding: .5rem .625rem; font-size: .8125rem; box-shadow: 0 6px 16px -10px rgba(46,45,44,.3); }
.tasks span:nth-child(2) { margin-left: 1rem; }
.tasks span:nth-child(3) { margin-left: .5rem; }
.tasks svg { width: .875rem; height: .875rem; color: var(--g500); flex: none; }
.portrait .badge { position: absolute; top: 1rem; left: 1rem; display: inline-flex; align-items: center; gap: .4rem; background: var(--paper); border-radius: 99px; padding: .3rem .7rem .3rem .4rem; font-size: .75rem; font-weight: 500; }
.portrait .badge i { width: .5rem; height: .5rem; border-radius: 9px; background: var(--g400); }
.role-card .cap { display: flex; flex-direction: column; gap: .25rem; }
.role-card .cap b { font-weight: 500; font-size: 1.25rem; }
.role-card .cap span { font-size: .9375rem; opacity: .75; }

.ex-card { width: min(26rem, 82vw); background: var(--n200); border-radius: .5rem; padding: 1rem; display: flex; flex-direction: column; gap: 1.25rem; min-height: 34rem; transition: background-color .2s ease; text-decoration: none; }
.ex-card:hover { background: var(--n300); }
.ex-top { display: flex; justify-content: space-between; align-items: center; font-size: .8125rem; }
.ex-art { aspect-ratio: 16 / 10; border-radius: .375rem; background: var(--b500); position: relative; overflow: hidden; color: var(--paper); padding: 1rem; display: flex; flex-direction: column; justify-content: flex-end; gap: .5rem; max-width: 100%; }
.ex-art.is-g { background: var(--g500); }
.ex-art.is-ink { background: var(--ink); }
.ex-art .ex-chip { align-self: flex-start; font-family: var(--mono); font-size: .75rem; background: rgba(253,253,252,.14); border: 1px solid rgba(253,253,252,.25); border-radius: .375rem; padding: .375rem .625rem; }
.ex-art .ex-big { position: absolute; top: .75rem; right: 1rem; font-size: 4.5rem; font-weight: 500; line-height: 1; opacity: .9; letter-spacing: -.02em; }
.ex-art .ex-big small { display: block; font-size: .8125rem; letter-spacing: 0; text-align: right; opacity: .8; margin-top: .25rem; }
.ex-card h3 { font-size: 1.5rem; line-height: 1.35; }
.ex-meta { margin-top: auto; display: grid; gap: .5rem; font-size: .875rem; }
.ex-meta div { display: flex; justify-content: space-between; gap: 1rem; padding-top: .5rem; border-top: 1px solid var(--n300); }
.ex-meta span:first-child { opacity: .65; }
.ex-meta span:last-child { text-align: right; }

/* ---------- Dark panel / principles (S10 swap) ---------- */
.dark-panel { background: var(--ink); color: var(--paper); border-radius: .5rem; padding: 8rem 3.5rem 3.5rem; position: relative; overflow: hidden; }
.masonry { columns: 2; column-gap: 1rem; }
.masonry > * { break-inside: avoid; margin-bottom: 1rem; }
.rule { background: var(--n800); border-radius: .375rem; padding: 2.5rem; display: flex; flex-direction: column; gap: 1.5rem; }
.rule q { font-size: 1.25rem; font-weight: 500; line-height: 1.45; quotes: none; }
.rule .who { display: flex; align-items: center; gap: .75rem; font-size: .9375rem; }
.rule .who .tile { background: var(--b500); color: var(--b300); }
.rule .who .tile.is-g { background: var(--g500); color: var(--g200); }
.rule .who b { display: block; font-weight: 600; }
.rule .who span { opacity: .65; }

/* ---------- Comparison (S11) ---------- */
.compare { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.cmp { border-radius: .5rem; padding: 1rem; display: flex; flex-direction: column; gap: 2rem; background: var(--n200); }
.cmp.is-us { background: var(--n300); }
.cmp-art { position: relative; height: 15rem; border-radius: .375rem; background: repeating-linear-gradient(135deg, var(--n300) 0 2px, transparent 2px 14px), var(--n200); overflow: hidden; display: grid; place-items: center; }
.cmp.is-old .cmp-art { background: repeating-linear-gradient(135deg, var(--n400) 0 1px, transparent 1px 12px), var(--n300); }
.cmp.is-us .cmp-art { background: var(--mesh); }
.cmp-art .notch { position: absolute; top: 0; left: 50%; width: 9rem; height: 3.25rem; transform: translateX(-50%); background: var(--n200); border-radius: 0 0 4.5rem 4.5rem; }
.cmp.is-us .cmp-art .notch { background: var(--n300); }
.cmp-art .q { position: absolute; right: 1rem; bottom: 1rem; width: 2.5rem; height: 2.5rem; border-radius: .5rem; background: var(--paper); display: grid; place-items: center; font-weight: 700; }
.cmp-art .mini { display: flex; flex-direction: column; gap: .5rem; width: min(17rem, 80%); }
.cmp-art .mini div { background: rgba(253,253,252,.9); border-radius: .375rem; padding: .5rem .75rem; font-size: .8125rem; display: flex; justify-content: space-between; gap: .5rem; }
.cmp.is-old .cmp-art .mini div { background: var(--paper); opacity: .8; }
.cmp-body { padding: 0 1.5rem 1.5rem; display: flex; flex-direction: column; gap: 1.25rem; }
.cmp-body .eyebrow { font-size: .875rem; }
.ticks { list-style: none; padding: 0; margin: 0; display: grid; gap: .75rem; }
.ticks li { display: flex; gap: .75rem; align-items: flex-start; }
.ticks li svg { width: 1.25rem; height: 1.25rem; flex: none; margin-top: .125rem; }
.ticks .x svg { color: var(--n600); }
.ticks .y svg { color: var(--g500); }

/* ---------- Comparison table (S12) ---------- */
.ctable { display: grid; grid-template-columns: 1.3fr repeat(3, minmax(0, 1fr)); gap: .5rem; min-width: 46rem; }
.ct-col { border-radius: .5rem; background: var(--n200); display: flex; flex-direction: column; }
.ct-col.is-labels { background: transparent; }
.ct-col.is-us { background: var(--ink); color: var(--paper); }
.ct-cell { min-height: 4rem; padding: .875rem 1.25rem; display: flex; align-items: center; gap: .625rem; border-top: 1px solid var(--n300); font-size: .9375rem; }
.ct-col.is-us .ct-cell { border-color: var(--n700); }
.ct-cell:first-child { border-top: 0; min-height: 4.5rem; font-weight: 500; font-size: 1.125rem; }
.ct-col.is-labels .ct-cell { padding-left: 0; }
.ct-cell svg { width: 1.25rem; height: 1.25rem; flex: none; }
.ct-cell .y { color: var(--g500); }
.ct-col.is-us .ct-cell .y { color: var(--g300); }
.ct-cell .x { color: var(--n500); }

/* ---------- FAQ (S13) ---------- */
.faq { display: grid; grid-template-columns: 22rem minmax(0, 1fr); gap: 4rem; align-items: start; }
.faq-side { position: sticky; top: 7rem; display: flex; flex-direction: column; gap: 1.25rem; align-items: flex-start; }
.faq-list { display: flex; flex-direction: column; gap: .5rem; }
.acc { background: var(--n200); border-radius: .5rem; transition: background-color .38s var(--e-cubic); }
.acc:hover, .acc.is-open { background: var(--n300); }
.acc-q { width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 1.25rem 1rem; background: none; border: 0; cursor: pointer; text-align: left; font-size: 1rem; font-weight: 500; }
.acc-ic { width: 1.5rem; height: 1.5rem; border-radius: .25rem; background: var(--paper); display: grid; place-items: center; flex: none; }
.acc-ic svg { width: 12px; height: 12px; }
.acc-ic .v { transition: transform .38s var(--e-cubic); transform-origin: center; }
.acc.is-open .acc-ic .v { transform: rotate(90deg); }
.acc-a { max-height: 0; overflow: hidden; transition: max-height .38s var(--e-cubic); }
.acc-a p { padding: 0 1rem 1.25rem; opacity: .8; max-width: 44rem; }

/* ---------- Dark CTA banner (S15) ---------- */
.cta-dark { background: var(--ink); color: var(--paper); border-radius: .5rem; padding: 7rem 3.5rem; position: relative; overflow: hidden; }
.cta-dark .stack { max-width: 36rem; gap: 1.5rem; position: relative; z-index: 2; align-items: flex-start; }
.drip { position: absolute; width: 5.3rem; height: 6.6rem; color: var(--paper); transition: transform 1s var(--e-cubic); }
.drip.d1 { top: -1px; right: 18%; }
.drip.d2 { bottom: -1px; right: 6%; transform: rotate(180deg); }
.drip.d3 { top: 38%; right: -1px; transform: rotate(-90deg); }
.cta-dark .glow { position: absolute; right: -10%; top: -30%; width: 55%; height: 160%; background: var(--mesh); filter: blur(60px); opacity: .35; border-radius: 50%; }

/* ---------- Footer ---------- */
.footer { color: var(--paper); padding-top: 5rem; overflow: hidden; position: relative; background: transparent; }
.main { background: var(--paper); }
.foot-top { display: grid; grid-template-columns: 1.3fr repeat(4, minmax(0, 1fr)); gap: 2rem; }
.foot-brand { display: flex; flex-direction: column; gap: 1.25rem; align-items: flex-start; }
.foot-brand .logo { color: var(--paper); }
.foot-brand p { opacity: .8; max-width: 18rem; font-size: .9375rem; }
.foot-col { display: flex; flex-direction: column; gap: .625rem; }
.foot-col h4 { font-size: 1.125rem; font-weight: 500; margin-bottom: .375rem; }
.foot-col a { font-size: .875rem; text-decoration: none; opacity: .75; transition: opacity .38s var(--e-quart); }
.foot-col a:hover { opacity: 1; }
.foot-mail { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; justify-content: space-between; padding-block: 2.5rem 1.5rem; margin-top: 3rem; border-top: 1px solid rgba(253,253,252,.25); }
.foot-mail .email { font-size: 1.5rem; font-weight: 500; user-select: all; }
.socials { display: flex; gap: .5rem; }
.socials a { width: 2.5rem; height: 2.5rem; border-radius: 99px; background: rgba(253,253,252,.14); display: grid; place-items: center; transition: background-color .3s ease; }
.socials a:hover { background: rgba(253,253,252,.26); }
.socials svg { width: 16px; height: 16px; }
.foot-legal { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 1rem; font-size: .75rem; opacity: .8; padding-bottom: 1rem; }
.foot-legal nav { display: flex; gap: 1.25rem; }
.foot-legal a { text-decoration: none; }
.giant { font-weight: 700; letter-spacing: -.06em; line-height: .78; font-size: clamp(6rem, 25vw, 26rem); text-align: center; margin-bottom: -.12em; white-space: nowrap; user-select: none; color: var(--paper); }

/* ---------- Modal ---------- */
.modal { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; background: rgba(46,45,44,.35); backdrop-filter: blur(4px); padding: 1rem; opacity: 0; visibility: hidden; transition: opacity .3s ease, visibility 0s .3s; }
.modal.is-open { opacity: 1; visibility: visible; transition: opacity .3s ease; }
.modal-panel { width: min(51rem, 100%); max-height: calc(100dvh - 2.5rem); overflow: auto; background: var(--paper); border-radius: .5rem; box-shadow: 0 32px 68px rgba(0,0,0,.3); padding: 2.5rem; display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 2.5rem; position: relative; transform: translateY(12px); transition: transform .4s var(--e-cubic); }
.modal.is-open .modal-panel { transform: none; }
.modal-close { position: absolute; top: 1rem; right: 1rem; width: 2.25rem; height: 2.25rem; border-radius: 99px; border: 0; background: var(--n200); cursor: pointer; display: grid; place-items: center; }
.modal-close svg { width: 12px; height: 12px; }
.modal-side { display: flex; flex-direction: column; gap: 1.25rem; }
.modal-side ul { list-style: none; padding: 0; margin: 0; display: grid; gap: .75rem; font-size: .9375rem; }
.modal-side li { display: flex; gap: .625rem; }
.modal-side li svg { width: 1.125rem; height: 1.125rem; color: var(--g500); flex: none; margin-top: .2rem; }

/* ---------- Forms ---------- */
.form { display: grid; gap: .875rem; }
.form .row2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .875rem; }
.field { display: flex; flex-direction: column; gap: .375rem; font-size: .875rem; font-weight: 500; }
.field input, .field select, .field textarea { font: inherit; font-weight: 400; font-size: 1rem; padding: .75rem 1rem; border-radius: .5rem; border: 1px solid var(--n400); background: var(--paper); color: var(--ink); width: 100%; }
.field textarea { min-height: 6rem; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--b400); box-shadow: 0 0 0 3px var(--b100); }
.form-err { color: var(--danger); font-size: .875rem; }
.fine { font-size: .75rem; opacity: .65; }
.done { display: flex; flex-direction: column; gap: 1rem; align-items: flex-start; }
.done .tile { background: var(--g100); color: var(--g500); }

/* ---------- Service hero (S2) ---------- */
.shero { padding-block: 4rem 2rem; }
.shero-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 3rem; align-items: center; }
.shero .stack { gap: 1.5rem; align-items: flex-start; }
.shero-art { background: var(--ink); border-radius: .5rem; padding: 2rem; min-height: 28rem; display: flex; flex-direction: column; justify-content: center; position: relative; overflow: hidden; min-width: 0; }
.shero-art .console { box-shadow: 0 30px 60px -30px rgba(0,0,0,.5); }
.shero-art.is-paper { background: var(--n200); }
.page-hero { padding-block: 5rem 3rem; }
.page-hero .stack { gap: 1.5rem; align-items: flex-start; max-width: 50rem; }
.page-hero.center .stack { align-items: center; margin-inline: auto; text-align: center; }
.facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .75rem; margin-top: 3rem; }
.fact { background: var(--n200); border-radius: .5rem; padding: 1.5rem; display: flex; flex-direction: column; gap: 2rem; }
.fact .lbl { font-size: .8125rem; text-transform: uppercase; letter-spacing: .1rem; color: var(--n600); }
.fact .val { font-size: 2rem; font-weight: 500; line-height: 1.2; }
.fact .val small { display: block; font-size: .9375rem; font-weight: 400; opacity: .7; margin-top: .375rem; }

/* ---------- Grids of cards ---------- */
.grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.grid-4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; }
.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.feat { background: var(--n200); border-radius: .5rem; padding: 1.5rem; display: flex; flex-direction: column; gap: 1rem; min-width: 0; }
.feat h3 { font-size: 1.5rem; line-height: 1.35; }
.feat p { opacity: .8; }
.feat.is-link { text-decoration: none; transition: background-color .2s ease; }
.feat.is-link:hover { background: var(--n300); }
.feat .foot { margin-top: auto; display: flex; justify-content: space-between; align-items: center; font-size: .875rem; padding-top: 1rem; }
.chal { background: var(--n200); border-radius: .5rem; padding: 2rem; display: flex; flex-direction: column; gap: 3rem; justify-content: space-between; min-height: 18rem; }
.chal h3 { font-size: 1.75rem; line-height: 1.3; }

/* ---------- Split statement (S16) ---------- */
.split { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid var(--n300); border-bottom: 1px solid var(--n300); }
.split > div { padding: 3rem 3rem 3rem 0; display: flex; flex-direction: column; gap: 1.25rem; }
.split > div + div { padding: 3rem 0 3rem 3rem; border-left: 1px solid var(--n300); }
.split .big { font-size: 2rem; line-height: 1.3; font-weight: 500; }
.split .big em { font-style: normal; color: var(--b500); }
.on-dark.split, .on-dark .split { border-color: var(--n700); }
.words .w { opacity: .2; transition: opacity .5s ease; }
.words .w.is-in { opacity: 1; }

/* ---------- Pricing ---------- */
.plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; align-items: stretch; }
.plan { background: var(--n200); border-radius: .5rem; padding: 2rem; display: flex; flex-direction: column; gap: 1.5rem; position: relative; }
.plan.is-feat { background: var(--ink); color: var(--paper); }
.plan .ribbon { position: absolute; top: 1.5rem; right: 1.5rem; font-size: .75rem; font-weight: 600; letter-spacing: .08rem; text-transform: uppercase; background: var(--g400); color: var(--ink); border-radius: 99px; padding: .25rem .625rem; }
.plan-name { font-size: 2rem; font-weight: 500; }
.plan .vol { font-size: 3rem; font-weight: 500; line-height: 1; }
.plan .vol small { font-size: 1rem; font-weight: 400; opacity: .7; margin-left: .375rem; }
.plan .quote { font-size: .875rem; opacity: .7; margin-top: .5rem; }
.plan ul { list-style: none; padding: 1.5rem 0 0; margin: 0; display: grid; gap: .625rem; border-top: 1px solid var(--n300); font-size: .9375rem; }
.plan.is-feat ul { border-color: var(--n700); }
.plan li { display: flex; gap: .625rem; }
.plan li svg { width: 1.125rem; height: 1.125rem; flex: none; margin-top: .2rem; color: var(--g500); }
.plan.is-feat li svg { color: var(--g300); }
.plan li.off { opacity: .4; }
.plan li.off svg { color: currentColor; }
.plan .btn { align-self: flex-start; }
.plan .chans { display: flex; gap: .375rem; flex-wrap: wrap; }
.plan .chans .chip { background: var(--n300); }
.plan.is-feat .chans .chip { background: var(--n800); }

/* Calculator (S22) */
.calc { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 1rem; }
.calc-in { background: var(--n200); border-radius: .5rem; padding: 2rem; display: flex; flex-direction: column; gap: 2rem; }
.rng { display: flex; flex-direction: column; gap: .75rem; }
.rng-top { display: flex; justify-content: space-between; gap: 1rem; font-weight: 500; }
.rng-top output { font-family: var(--mono); color: var(--b500); }
.rng input[type=range] { -webkit-appearance: none; appearance: none; width: 100%; height: .375rem; border-radius: 9px; background: linear-gradient(90deg, var(--b500) var(--p, 50%), var(--n400) var(--p, 50%)); outline-offset: 6px; }
.rng input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 1.375rem; height: 1.375rem; border-radius: 99px; background: var(--b500); border: 4px solid var(--paper); box-shadow: 0 0 0 1px var(--b500); cursor: pointer; }
.rng input[type=range]::-moz-range-thumb { width: 1rem; height: 1rem; border-radius: 99px; background: var(--b500); border: 4px solid var(--paper); box-shadow: 0 0 0 1px var(--b500); cursor: pointer; }
.rng-mm { display: flex; justify-content: space-between; font-size: .75rem; color: var(--n600); font-family: var(--mono); }
.calc-out { display: grid; grid-template-rows: auto auto; gap: 1rem; min-width: 0; }
.calc-card { background: var(--n200); border-radius: .5rem; padding: 2rem; display: flex; flex-direction: column; gap: 1.25rem; min-width: 0; }
.calc-card .lbl { font-size: .8125rem; text-transform: uppercase; letter-spacing: .1rem; color: var(--n600); }
.calc-card .money { font-size: 3.5rem; font-weight: 500; line-height: 1; font-variant-numeric: tabular-nums; }
.steps { display: flex; align-items: flex-end; gap: .375rem; height: 8rem; }
.steps i { flex: 1; background: var(--b400); border-radius: .25rem .25rem 0 0; transition: height .5s var(--e-cubic); min-height: 2px; }
.steps i:nth-child(even) { background: var(--b500); }
.steps-x { display: flex; justify-content: space-between; font-family: var(--mono); font-size: .6875rem; color: var(--n600); }
.sq-grid { display: grid; grid-template-columns: repeat(20, minmax(0, 1fr)); gap: 4px; }
.sq-grid i { aspect-ratio: 1; border-radius: 2px; background: var(--n300); transition: background-color .3s ease; }
.sq-grid i.on { background: var(--g400); }
.calc-note { font-size: .8125rem; opacity: .7; }

/* Multistep (S29) */
.ms { background: var(--n200); border-radius: .5rem; padding: 2.5rem; display: flex; flex-direction: column; gap: 2rem; min-width: 0; }
.ms-prog { display: flex; flex-direction: column; gap: .625rem; }
.ms-prog .t { display: flex; justify-content: space-between; font-size: .875rem; }
.ms-bar { height: 4px; background: var(--n300); border-radius: 4px; overflow: hidden; }
.ms-bar i { display: block; height: 100%; background: var(--bar-grad); width: 20%; transition: width .4s var(--e-cubic); }
.ms-step { display: flex; flex-direction: column; gap: 1.25rem; animation: paneIn .4s var(--e-cubic); }
.ms-step[hidden] { display: none; }
.opts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .625rem; }
.opt { position: relative; }
.opt input { position: absolute; opacity: 0; }
.opt label { display: flex; gap: .75rem; align-items: center; padding: 1rem; border-radius: .5rem; background: var(--paper); border: 1px solid var(--n300); cursor: pointer; transition: border-color .2s ease, background-color .2s ease; height: 100%; }
.opt label::before { content: ""; width: 1.125rem; height: 1.125rem; border-radius: 99px; border: 1.5px solid var(--n500); flex: none; transition: all .2s ease; }
.opt input[type=checkbox] + label::before { border-radius: .25rem; }
.opt input:checked + label { border-color: var(--b500); background: var(--b100); }
.opt input:checked + label::before { border: 5px solid var(--b500); }
.opt input:focus-visible + label { outline: 2px solid var(--b400); outline-offset: 2px; }
.ms-nav { display: flex; justify-content: space-between; gap: 1rem; align-items: center; }
.contact-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); gap: 3rem; align-items: start; }
.contact-side { display: flex; flex-direction: column; gap: 1rem; }
.ci { background: var(--n200); border-radius: .5rem; padding: 1.25rem; display: flex; gap: 1rem; align-items: center; }
.ci b { display: block; font-weight: 500; }
.ci span { font-size: .9375rem; opacity: .75; user-select: all; }

/* Signals list cards (signal page) */
.sigcards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--n300); }
.sigcards > div { padding: 2rem 1.5rem 2rem 0; display: flex; flex-direction: column; gap: .75rem; }
.sigcards > div + div { padding-left: 1.5rem; border-left: 1px solid var(--n300); }
.sigcards .k { font-family: var(--mono); font-size: .8125rem; color: var(--g500); }
.sigcards h3 { font-size: 1.25rem; }
.sigcards p { font-size: .9375rem; opacity: .8; }
.opener { background: var(--paper); border: 1px solid var(--n300); border-radius: .5rem; overflow: hidden; }
.opener-row { display: grid; grid-template-columns: 1fr 1fr 1.6fr; gap: 1rem; padding: 1rem 1.25rem; border-top: 1px solid var(--n300); font-size: .9375rem; }
.opener-row:first-child { border-top: 0; font-size: .75rem; text-transform: uppercase; letter-spacing: .08rem; color: var(--n600); background: var(--n200); }
.opener-row em { font-style: normal; font-family: var(--mono); font-size: .875rem; }

/* Reveal */
.js .rv { transform: translateY(28px); transition: transform .7s var(--e-cubic); }
.js .rv.is-in { transform: none; }

/* ---------- Responsive ---------- */
@media (max-width: 991px) {
  .sec-l { padding-block: 6rem; }
  .sec-m { padding-block: 4rem; }
  .h1 { font-size: 3.25rem; } .h2 { font-size: 2.75rem; } .h3 { font-size: 2.25rem; } .h4 { font-size: 1.75rem; }
  .nav-menu, .nav-right .btn .lbl-long { display: none; }
  .nav-right .btn .lbl-short { display: inline; }
  .menu-btn { display: grid; }
  .mobile-panel { display: block; position: absolute; left: 0; right: 0; top: 100%; background: var(--paper); border-radius: 0 0 .5rem .5rem; max-height: 0; overflow: hidden; transition: max-height .45s var(--e-cubic); }
  .menu-open .mobile-panel { max-height: calc(100dvh - 5rem); overflow-y: auto; }
  .m-list { list-style: none; margin: 0; padding: .5rem 0 1.5rem; }
  .m-list > li { border-top: 1px solid var(--n300); }
  .m-list a, .m-list summary { display: flex; justify-content: space-between; align-items: center; padding: 1rem 0; text-decoration: none; font-size: 1.125rem; cursor: pointer; list-style: none; }
  .m-list summary::-webkit-details-marker { display: none; }
  .m-list details[open] summary .chev { transform: rotate(180deg); }
  .m-list summary .chev { width: 12px; height: 12px; transition: transform .3s ease; }
  .m-sub { display: grid; gap: .25rem; padding-bottom: 1rem; }
  .m-sub a { padding: .5rem .75rem; font-size: 1rem; background: var(--n200); border-radius: .375rem; }
  .pane, .prob, .shero-grid, .calc, .contact-grid, .modal-panel { grid-template-columns: minmax(0, 1fr); }
  .contact-grid .ms { order: -1; }
  .prob { gap: 2rem; }
  .faq { grid-template-columns: minmax(0, 1fr); gap: 2rem; }
  .faq-side { position: static; }
  .compare, .plans { grid-template-columns: minmax(0, 1fr); }
  .grid-4, .sigcards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sigcards > div:nth-child(3) { padding-left: 0; border-left: 0; }
  .sigcards > div:nth-child(n+3) { border-top: 1px solid var(--n300); }
  .foot-top { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .foot-brand { grid-column: 1 / -1; }
  .masonry { columns: 1; }
  .dark-panel, .cta-stats { padding: 5rem 1.5rem 1.5rem; }
  .cta-dark { padding: 5rem 1.5rem; }
}
@media (max-width: 767px) {
  .sec-l { padding-block: 4rem; }
  .sec-m { padding-block: 3rem; }
  .sec-s { padding-block: 2rem; }
  .h1 { font-size: 2.5rem; } .h2 { font-size: 2.25rem; } .h3 { font-size: 2rem; } .h4 { font-size: 1.5rem; } .h5 { font-size: 1.25rem; }
  .t-lg { font-size: 1.125rem; } .t-md, .hero-sub { font-size: 1rem; }
  .eyebrow { font-size: .875rem; }
  .hero { padding-block: 3rem; }
  .hero .stack { gap: 2rem; }
  .grid-3, .grid-2, .stat-grid, .facts, .split, .proc-steps { grid-template-columns: minmax(0, 1fr); }
  .split > div, .split > div + div { padding: 2rem 0; border-left: 0; }
  .split > div + div { border-top: 1px solid var(--n300); }
  .proc-step + .proc-step { border-left: 0; border-top: 1px solid var(--n300); }
  .proc-step { padding: 1.5rem; }
  .proc-vis { height: 20rem; }
  .float { font-size: .75rem; }
  .pane-copy, .prob, .ms, .calc-in, .calc-card, .plan { padding: 1.5rem; }
  .cmp-body { padding: 0 .5rem 1rem; }
  .dialer, .opts, .form .row2 { grid-template-columns: minmax(0, 1fr); }
  .modal-panel { padding: 1.5rem; gap: 1.5rem; }
  .modal-side ul { display: none; }
  .foot-top { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .opener-row { grid-template-columns: minmax(0, 1fr); gap: .25rem; }
  .opener-row:first-child { display: none; }
  .seq-row { grid-template-columns: 3rem 2rem minmax(0, 1fr); }
  .seq-row .st { grid-column: 3; }
  .rule { padding: 1.5rem; }
  .calc-card .money { font-size: 2.5rem; }
  .shero-art { min-height: 0; padding: 1rem; }
  .tab { padding: .75rem 1rem; font-size: .75rem; }
  .mq-card { min-height: 5.5rem; padding: 1rem 1.5rem 1rem 1rem; }
}
@media (max-width: 479px) {
  .grid-4, .sigcards { grid-template-columns: minmax(0, 1fr); }
  .sigcards > div, .sigcards > div + div { padding: 1.5rem 0; border-left: 0; border-top: 1px solid var(--n300); }
  .foot-top { grid-template-columns: minmax(0, 1fr); }
  .nav-right .btn { display: none; }
}
/* ================= Marlows identity layer: arches, calendar grid, signal network ================= */

/* Buttons: squared, label-first, arrow inline */
.btn { border-radius: .625rem; padding: .5rem 1.125rem; gap: .5rem; font-weight: 600; font-size: .9375rem; }
.btn:hover { opacity: 1; background: var(--n800); }
.btn-icon, .btn.is-accent .btn-icon, .btn.is-light .btn-icon { width: auto; height: auto; background: none; color: inherit; }
.btn-icon svg { width: 16px; height: 16px; }
.btn.is-accent:hover { background: #2338a8; }
.btn.is-light:hover { background: var(--n300); }
.btn.is-sec { border-radius: .625rem; }
.tag { border-radius: .5rem; }
.on-dark .tag { background: rgba(253,253,252,.06); border-color: var(--n700); color: var(--paper); }
.on-dark .link { color: var(--paper); }
.hl-g { color: var(--g500); }
.on-dark .hl-g { color: var(--g300); }

/* Mega menu: calm, descriptions always visible */
.mi-d { max-height: none; }
@media (min-width: 1024px) {
  .mi:hover, .mi.is-green:hover { background: var(--n200); }
  .mi:hover .tile { background: var(--b100); color: var(--b500); }
  .mi.is-green:hover .tile { background: var(--g100); color: var(--g500); }
}

/* Arches: the two humps of the logo's "m", cut into dark panels */
.arches { position: absolute; right: 6%; bottom: -1px; display: flex; align-items: flex-end; z-index: 2; pointer-events: none; }
.arch { display: block; width: 3.5rem; height: 4.375rem; color: var(--paper); }
.arch-dot { position: absolute; top: -.75rem; right: -1.25rem; width: .9rem; height: .9rem; border-radius: 99px; background: var(--g400); }

/* Hero: dark panel with the signal network */
.hero { padding: .75rem .75rem 0; text-align: left; }
.hero-panel { position: relative; overflow: hidden; isolation: isolate; background: var(--ink); color: var(--paper); border-radius: 1rem; }
.hero-panel::before { content: ""; position: absolute; inset: 0; z-index: -2; background-image: linear-gradient(rgba(253,253,252,.045) 1px, transparent 1px), linear-gradient(90deg, rgba(253,253,252,.045) 1px, transparent 1px); background-size: 100% 3.5rem, calc(100% / 7) 100%; }
#net { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; -webkit-mask: linear-gradient(90deg, rgba(0,0,0,.35), rgba(0,0,0,.35) 30%, #000 58%); mask: linear-gradient(90deg, rgba(0,0,0,.35), rgba(0,0,0,.35) 30%, #000 58%); }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 3rem; padding-block: 6rem 7rem; }
.hero .hero-copy { align-items: flex-start; gap: 1.75rem; }
.hero .display { max-width: 40rem; }
.hero-note { justify-content: flex-start; gap: .5rem 1.25rem; }
.on-dark .hero-note svg { color: var(--g300); }
.hero-stage { position: relative; min-height: 24rem; }
.net-legend { position: absolute; left: 0; bottom: -3.5rem; display: flex; flex-wrap: wrap; gap: .5rem 1rem; font-family: var(--mono); font-size: .75rem; color: var(--n500); }
.net-legend span { display: inline-flex; align-items: center; gap: .4rem; }
.net-legend i { width: .55rem; height: .55rem; border-radius: 99px; }
.net-legend em { font-style: normal; opacity: .7; }
.lg-s { background: var(--g400); }
.lg-o { background: var(--b300); }
.lg-b { background: var(--b400); }

/* Journey stepper (replaces pill tabs) */
.tabs { justify-content: flex-start; gap: 0; flex-wrap: nowrap; margin-bottom: 1.5rem; overflow-x: auto; scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tab { flex: 1 0 8rem; justify-content: flex-start; background: none; border-radius: 0; padding: 1rem .5rem 0 0; border-top: 2px solid var(--n300); text-transform: none; letter-spacing: 0; font-size: 1rem; font-weight: 600; isolation: auto; text-align: left; }
.tab:hover { background: none; color: var(--b500); }
.tab-border { inset: -2px auto auto 0; height: 2px; width: 0; border-radius: 0; z-index: 1; }
.tab-border::after { display: none; }
.tab.is-current .tab-border { background: var(--b500); animation: stepFill var(--tab-dur, 6s) linear forwards; }
.tabs.is-static .tab.is-current .tab-border { animation: none; width: 100%; }
@keyframes stepFill { from { width: 0; } to { width: 100%; } }
.tab-n { font-family: var(--mono); font-size: .75rem; font-weight: 500; width: 1.625rem; height: 1.625rem; border-radius: 99px; border: 1px solid var(--n400); display: grid; place-items: center; color: var(--n600); flex: none; transition: all .3s ease; }
.tab.is-current .tab-n { background: var(--b500); border-color: var(--b500); color: var(--paper); }
.tab .tile { width: 1.625rem; height: 1.625rem; background: var(--n200); color: var(--n600); }
.tab.is-current .tile { background: var(--b500); color: var(--paper); }
.when { font-size: .8125rem; color: var(--g500); }
.pane-copy, .pane-vis { border-radius: .75rem; }
.pane-vis { background: var(--ink); background-image: linear-gradient(rgba(253,253,252,.04) 1px, transparent 1px), linear-gradient(90deg, rgba(253,253,252,.04) 1px, transparent 1px); background-size: 100% 2.5rem, 2.5rem 100%; }

/* Problems: three columns, picture first */
.problems { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.prob { display: flex; flex-direction: column; gap: 1.25rem; padding: .75rem; align-items: stretch; border-radius: .75rem; }
.prob-vis { min-height: 16rem; display: flex; flex-direction: column; justify-content: center; }
.prob-copy { padding: 0 .75rem 1rem; gap: .625rem; }
.cal-grid { gap: .3rem .75rem; grid-template-columns: 2.5rem minmax(0, 1fr); }
.cal-track { height: .75rem; }
.ramp { height: 9rem; }

/* Usual vs Marlows */
.vs { border-top: 1px solid var(--n300); }
.vs-row { display: grid; grid-template-columns: 12rem minmax(0, 1fr) minmax(0, 1fr); gap: 1.5rem; padding: 1.25rem 0; border-bottom: 1px solid var(--n300); align-items: start; }
.vs-head span { font-family: var(--mono); font-size: .8125rem; text-transform: uppercase; letter-spacing: .06rem; color: var(--n600); }
.vs-head span:last-child { color: var(--b500); }
.vs-k { font-weight: 700; }
.vs-old, .vs-new { display: flex; gap: .625rem; align-items: flex-start; }
.vs-old { color: var(--n600); }
.vs-new { font-weight: 600; }
.vs-old svg, .vs-new svg { width: 1.25rem; height: 1.25rem; flex: none; margin-top: .125rem; }
.vs-old svg { color: var(--n500); }
.vs-new svg { color: var(--g500); }

/* Founder note */
.founder { display: grid; grid-template-columns: 5rem minmax(0, 1fr); gap: 2.5rem; background: var(--n200); border-radius: 1rem; padding: 3.5rem; max-width: 64rem; margin-inline: auto; }
.founder-mark svg { width: 4.5rem; height: 4.5rem; }
.founder-q { font-size: 1.5rem; line-height: 1.45; font-weight: 500; letter-spacing: -.015em; max-width: 46rem; }
.founder-sig { display: flex; gap: 1rem; align-items: center; }
.sig-line { width: 3rem; height: 2px; background: var(--ink); }
.founder-sig b { display: block; }

/* Rules on dark */
.dark-panel { border-radius: 1rem; padding: 6rem 3.5rem 7rem; }
.rule-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 3rem; }
.rule-row { display: grid; grid-template-columns: 10.5rem minmax(0, 1fr); gap: 1.5rem; padding: 1.5rem 0; border-top: 1px solid var(--n700); }
.rule-k { display: flex; gap: .75rem; align-items: center; align-self: start; }
.rule-k .tile { width: 2rem; height: 2rem; }
.rule-row p { opacity: .85; }

/* Plans ledger */
.ledger-wrap { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 3rem; align-items: start; background: var(--n200); border-radius: 1rem; padding: 3rem; }
.ledger-wrap.is-dark { background: var(--ink); color: var(--paper); }
.ledger-wrap .head { align-items: flex-start; }
.ledger { display: flex; flex-direction: column; }
.ledger-row { display: grid; grid-template-columns: 5.5rem minmax(0, 1fr) auto 1.25rem; gap: 1rem; align-items: center; padding: 1.25rem 0; border-top: 1px solid var(--n400); text-decoration: none; transition: padding .3s var(--e-cubic); }
.is-dark .ledger-row { border-color: var(--n700); }
.ledger-row:hover { padding-left: .5rem; }
.ledger-name { font-weight: 700; font-size: 1.375rem; letter-spacing: -.02em; }
.ledger-d { opacity: .7; font-size: .9375rem; }
.ledger-v { font-family: var(--mono); font-size: 1.25rem; color: var(--b500); text-align: right; }
.is-dark .ledger-v { color: var(--g300); }
.ledger-v small { display: block; font-size: .6875rem; color: var(--n600); }
.ledger-go svg { width: 1.125rem; height: 1.125rem; }
.ledger-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; border-top: 1px solid var(--n400); padding-top: 1.25rem; font-size: .9375rem; }
.is-dark .ledger-facts { border-color: var(--n700); }
.ledger-facts .lbl { display: block; font-family: var(--mono); font-size: .75rem; text-transform: uppercase; color: var(--n600); margin-bottom: .25rem; }

/* Team cards */
.role-card { width: auto; background: var(--n200); border-radius: .75rem; padding: 1.5rem; gap: 1.25rem; }
.role-top { display: flex; justify-content: space-between; align-items: center; }
.role-ic { width: 3rem; height: 3rem; border-radius: .75rem; }
.role-ic svg { width: 1.5rem; height: 1.5rem; }
.role-top .badge { display: inline-flex; gap: .4rem; align-items: center; font-family: var(--mono); font-size: .75rem; color: var(--n600); }
.role-top .badge i { width: .5rem; height: .5rem; border-radius: 9px; background: var(--g400); }
.role-card .tasks { max-width: none; }
.role-card .tasks span { margin-left: 0; box-shadow: none; border: 1px solid var(--n300); }

/* Dark CTA */
.cta-dark { border-radius: 1rem; background-image: linear-gradient(rgba(253,253,252,.04) 1px, transparent 1px), linear-gradient(90deg, rgba(253,253,252,.04) 1px, transparent 1px); background-size: 100% 3.5rem, calc(100% / 7) 100%; }
.cta-dark .arches { right: 10%; }
.cta-dark .arch { width: 5.5rem; height: 6.875rem; }
.cta-dark .arch-dot { width: 1.25rem; height: 1.25rem; top: -1rem; right: -1.75rem; }

/* Service heroes on ink with a grid */
.shero-art { background-image: linear-gradient(rgba(253,253,252,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(253,253,252,.05) 1px, transparent 1px); background-size: 100% 3rem, 3rem 100%; border-radius: 1rem; }

/* Footer: a week with meetings in it */
.footer { color: var(--paper); padding: 0 .5rem .5rem; background: var(--paper); }
.foot-panel { background: var(--ink); border-radius: 1rem; padding-block: 4.5rem 2rem; position: relative; overflow: hidden; }
.foot-inner { display: flex; flex-direction: column; gap: 3rem; }
.foot-week-head { display: flex; justify-content: space-between; align-items: end; gap: 1.5rem; flex-wrap: wrap; margin-bottom: 1.5rem; }
.foot-week-head h2 { max-width: 30rem; }
.foot-week > p { margin-top: .75rem; }
.wk { display: grid; grid-template-columns: repeat(5, minmax(8.5rem, 1fr)); gap: .5rem; min-width: 44rem; }
.wk-day { display: flex; flex-direction: column; gap: .5rem; }
.wk-h { font-family: var(--mono); font-size: .75rem; text-transform: uppercase; color: var(--n500); padding-bottom: .375rem; border-bottom: 1px solid var(--n700); }
.wk-slot { min-height: 3.5rem; border-radius: .5rem; border: 1px dashed var(--n700); padding: .5rem .625rem; font-size: .8125rem; color: var(--n500); display: flex; flex-direction: column; gap: .125rem; }
.wk-slot b { font-family: var(--mono); font-weight: 500; font-size: .75rem; }
.wk-slot.is-booked { background: var(--b500); border: 1px solid var(--b500); color: var(--paper); }
.wk-slot.is-booked b { color: var(--b200); }
.foot-top { border-top: 1px solid var(--n700); padding-top: 3rem; }
.foot-brand .email { font-size: 1.25rem; font-weight: 600; user-select: all; }
.socials a { background: rgba(253,253,252,.08); }
.foot-legal { border-top: 1px solid var(--n700); padding: 1.5rem 0 0; }
.foot-col h4 { font-weight: 600; }

@media (max-width: 991px) {
  .hero-grid { grid-template-columns: minmax(0, 1fr); gap: 1rem; padding-block: 4rem 3.5rem; }
  .hero-stage { min-height: 18rem; }
  .net-legend { bottom: -1rem; }
  #net { -webkit-mask: linear-gradient(180deg, rgba(0,0,0,.3), rgba(0,0,0,.3) 50%, #000 70%); mask: linear-gradient(180deg, rgba(0,0,0,.3), rgba(0,0,0,.3) 50%, #000 70%); }
  .problems { grid-template-columns: minmax(0, 1fr); }
  .ledger-wrap { grid-template-columns: minmax(0, 1fr); padding: 2rem; }
  .rule-list { grid-template-columns: minmax(0, 1fr); }
  .dark-panel { padding: 4rem 1.5rem 6rem; }
  .foot-panel { padding-block: 3rem 1.5rem; }
}
@media (max-width: 767px) {
  .vs-row { grid-template-columns: minmax(0, 1fr); gap: .5rem; }
  .vs-head { display: none; }
  .founder { grid-template-columns: minmax(0, 1fr); padding: 1.75rem; gap: 1.5rem; }
  .founder-mark svg { width: 3rem; height: 3rem; }
  .founder-q { font-size: 1.1875rem; }
  .rule-row { grid-template-columns: minmax(0, 1fr); gap: .75rem; }
  .ledger-wrap { padding: 1.5rem; }
  .ledger-row { grid-template-columns: minmax(0, 1fr) auto; gap: .25rem 1rem; }
  .ledger-d { grid-column: 1; grid-row: 2; }
  .ledger-v { grid-row: 1 / span 2; grid-column: 2; }
  .ledger-go { display: none; }
  .ledger-facts { grid-template-columns: minmax(0, 1fr); }
  .tab { flex-basis: 7rem; font-size: .875rem; }
  .arch { width: 2.5rem; height: 3.125rem; }
  .cta-dark .arch { width: 3.5rem; height: 4.375rem; }
}

/* ================= v4: wordmark, banner nav, calm app console, animated comparison ================= */

/* Wordmark: "marlows" with a live intent ring as the o */
.wm { display: inline-flex; align-items: baseline; font-weight: 800; font-size: 1.7rem; letter-spacing: -.055em; line-height: 1; color: var(--ink); }
.logo.is-light .wm { color: var(--paper); }
.wm-o { position: relative; display: inline-block; width: .55em; height: .55em; margin: 0 .035em 0 .03em; border: .125em solid currentColor; border-radius: 50%; }
.wm-o i { position: absolute; left: 50%; top: 50%; width: .17em; height: .17em; margin: -.085em 0 0 -.085em; border-radius: 50%; background: var(--g400); }
.wm-o::after { content: ""; position: absolute; inset: -.125em; border-radius: 50%; border: .06em solid var(--g400); opacity: 0; animation: wmPing 4s ease-out infinite 1s; }
@keyframes wmPing { 0% { transform: scale(1); opacity: .7; } 40%, 100% { transform: scale(1.9); opacity: 0; } }
.founder-mark .wm-o { font-size: 6rem; color: var(--ink); }

/* Small ring glyph (eyebrows, rules, app titles) */
.ring { position: relative; display: inline-block; width: .8rem; height: .8rem; border: 2px solid currentColor; border-radius: 50%; flex: none; }
.ring i { position: absolute; left: 50%; top: 50%; width: .25rem; height: .25rem; margin: -.125rem 0 0 -.125rem; border-radius: 50%; background: var(--g400); }
.eyebrow .ring.em { width: .75rem; height: .75rem; color: var(--n600); }
.eyebrow.is-blue .ring.em { color: var(--b500); }
.on-dark .eyebrow .ring.em { color: var(--n500); }

/* Nav: links always visible; on narrower screens they become a banner row under the logo */
.menu-btn, .mobile-panel, .nav-overlay { display: none !important; }
.nav-strip { display: none; border-top: 1px solid var(--n300); }
.nav-strip-in { display: flex; gap: .25rem; overflow-x: auto; scrollbar-width: none; padding-block: .375rem; }
.nav-strip-in::-webkit-scrollbar { display: none; }
.nav-strip a { flex: none; padding: .5rem .75rem; border-radius: .5rem; text-decoration: none; font-size: .9375rem; font-weight: 500; white-space: nowrap; }
.nav-strip a:hover, .nav-strip a[aria-current="page"] { background: var(--n200); }
@media (max-width: 991px) { .nav-strip { display: block; } .nav-inner { min-height: 4rem; } }

/* App console: one calm, custom system for every product mock */
.console { background: #252423; border: 1px solid rgba(253,253,252,.08); border-radius: .75rem; }
.console-top { padding: .875rem 1rem; border-bottom: 1px solid rgba(253,253,252,.08); font-size: .75rem; }
.app-t { display: inline-flex; align-items: center; gap: .5rem; color: var(--n500); min-width: 0; }
.app-t .ring { color: var(--paper); width: .75rem; height: .75rem; }
.app-t b { color: var(--paper); font-weight: 500; }
.app-meta { color: var(--n600); }
.app-meta::before { content: "/"; margin-right: .5rem; opacity: .6; }
.app-st { color: var(--n500); }
.console-foot { border-top: 1px solid rgba(253,253,252,.08); font-size: .75rem; }
.sig-table td { border-top-color: rgba(253,253,252,.06); }
.seq { gap: 0; }
.seq-row { background: transparent; border-radius: 0; border-top: 1px solid rgba(253,253,252,.06); padding: .75rem 1rem; }
.seq-row:first-child { border-top: 0; }
.seq-row.is-hit { background: transparent; }
.seq-row.is-off { opacity: .45; text-decoration: line-through; }
.seq-row .st { color: var(--n500); }
.seq-row.is-hit .st { color: var(--g300); }
.app .seq { padding: .25rem 0; }
.app .dialer { padding: 1rem; }
.dial-card { background: transparent; border: 1px solid rgba(253,253,252,.08); }
.dial-q div { background: rgba(253,253,252,.04); }
.dial-q div.is-on { background: rgba(85,112,255,.22); color: var(--paper); box-shadow: inset 2px 0 0 var(--b400); }

/* Sequence lanes with a moving playhead */
.lanes { position: relative; padding: 1rem 1rem .5rem; --kw: 5.25rem; font-family: var(--mono); font-size: .75rem; color: var(--n500); }
.ruler, .lane { display: grid; grid-template-columns: var(--kw) minmax(0, 1fr); align-items: center; }
.ruler-in { position: relative; height: 1.25rem; }
.ruler-in span { position: absolute; top: 0; transform: translateX(-50%); }
.ruler-in span:first-child { transform: none; }
.ruler-in span:last-child { transform: translateX(-100%); }
.lane { height: 2.75rem; }
.lane-track { position: relative; height: 100%; border-top: 1px dashed rgba(253,253,252,.08); }
.lane:first-of-type .lane-track { border-top: 0; }
.lane-track::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: rgba(253,253,252,.1); }
.mk { position: absolute; top: 50%; width: .75rem; height: .75rem; margin: -.375rem 0 0 -.375rem; border-radius: .2rem; border: 1.5px solid var(--n500); background: #252423; animation: mkPop var(--dur, 9s) linear infinite; }
.mk.is-open { background: var(--n500); }
.mk.is-reply { background: var(--g400); border-color: var(--g400); }
.mk.is-book { background: var(--b400); border-color: var(--b400); width: 1rem; height: 1rem; margin: -.5rem 0 0 -.5rem; }
@keyframes mkPop { 0% { transform: scale(1.5); box-shadow: 0 0 0 4px rgba(253,253,252,.14); } 6%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(253,253,252,0); } }
.playhead { position: absolute; top: 1rem; bottom: .5rem; left: calc(1rem + var(--kw)); right: 1rem; pointer-events: none; }
.playhead i { position: absolute; top: 0; bottom: 0; width: 1px; background: var(--b300); box-shadow: 0 0 12px rgba(158,171,255,.6); animation: sweep var(--dur, 9s) linear infinite; }
@keyframes sweep { from { left: 0; } to { left: 100%; } }
.app-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid rgba(253,253,252,.08); }
.app-stats div { padding: .75rem 1rem; display: flex; flex-direction: column; gap: .125rem; }
.app-stats div + div { border-left: 1px solid rgba(253,253,252,.08); }
.app-stats span { font-family: var(--mono); font-size: .6875rem; color: var(--n500); text-transform: uppercase; letter-spacing: .04rem; }
.app-stats b { font-weight: 600; font-size: 1rem; color: var(--paper); }
.log { border-top: 1px solid rgba(253,253,252,.08); padding: .5rem 0; font-size: .8125rem; }
.log-row { display: grid; grid-template-columns: 5.5rem 4rem minmax(0, 1fr); gap: .75rem; padding: .375rem 1rem; color: #e9e8e5; }
.log-row span:first-child { font-family: var(--mono); font-size: .75rem; color: var(--n500); }
.log-k { font-family: var(--mono); font-size: .75rem; color: var(--n500); }
.log-row.is-booked .log-k { color: var(--b300); }
.log-row.is-reply .log-k { color: var(--g300); }

/* Rules: ring + label, no icon tiles */
.rule-k .ring { color: var(--g300); }

/* Comparison: rows settle in, Marlows column fills and ticks draw */
.vs-new { justify-self: start; padding: .25rem .5rem; margin: -.25rem -.5rem; border-radius: .375rem; background: linear-gradient(var(--g100), var(--g100)) no-repeat left / 0% 100%; transition: background-size .9s var(--e-cubic) calc(var(--i, 0) * .08s + .2s); }
.vs-new svg path { stroke-dasharray: 24; stroke-dashoffset: 24; transition: stroke-dashoffset .5s ease-out calc(var(--i, 0) * .08s + .5s); }
.vs-old { transition: opacity .6s ease calc(var(--i, 0) * .08s); }
.js .vs-row.rv:not(.is-in) .vs-old { opacity: .5; }
.vs-row.is-in .vs-new { background-size: 100% 100%; }
.vs-row.is-in .vs-new svg path { stroke-dashoffset: 0; }
html:not(.js) .vs-new svg path { stroke-dashoffset: 0; }

@media (max-width: 767px) {
  .app-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .app-stats div:nth-child(3) { border-left: 0; }
  .app-stats div:nth-child(n+3) { border-top: 1px solid rgba(253,253,252,.08); }
  .log-row { grid-template-columns: 5rem minmax(0, 1fr); }
  .log-row span:last-child { grid-column: 1 / -1; }
  .lanes { --kw: 4.25rem; }
  .app-meta { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .vs-new { background-size: 100% 100%; }
  .vs-new svg path { stroke-dashoffset: 0; }
  .playhead { display: none; }
}

/* ================= v5: light app console on a light panel ================= */
.pane-vis { background-color: var(--n200); color: var(--ink); background-image: linear-gradient(var(--n300) 1px, transparent 1px), linear-gradient(90deg, var(--n300) 1px, transparent 1px); }
.console { background: var(--paper); border-color: var(--n300); color: var(--ink); box-shadow: 0 1px 2px rgba(46,45,44,.04), 0 12px 32px -18px rgba(46,45,44,.18); }
.console-top, .console-foot, .app-stats, .log { border-color: var(--n300); }
.console-top { color: var(--n600); }
.console-top b, .app-t b { color: var(--ink); }
.app-t .ring { color: var(--ink); }
.live { color: var(--g500); }
.console-foot { color: var(--n600); }
.console-foot b { color: var(--g500); }
.sig-table th { color: var(--n600); }
.sig-table td { color: var(--ink); border-top-color: var(--n300); }
.sig-table td small, .sig-table .ago { color: var(--n600); }
.bar span { background: var(--n300); }
.seq-row { color: var(--ink); border-top-color: var(--n300); }
.seq-row .day, .seq-row .st { color: var(--n600); }
.seq-row.is-hit .st { color: var(--g500); }
.seq-row .mono[style] { color: var(--n600) !important; }
.lanes { color: var(--n600); }
.lane-track { border-top-color: var(--n300); }
.lane-track::before { background: var(--n300); }
.mk { background: var(--paper); border-color: var(--n500); }
.mk.is-open { background: var(--n500); }
.playhead i { background: var(--b400); box-shadow: 0 0 10px rgba(85,112,255,.35); }
.app-stats div + div { border-color: var(--n300); }
.app-stats span { color: var(--n600); }
.app-stats b { color: var(--ink); }
.log-row { color: var(--ink); }
.log-row span:first-child, .log-k { color: var(--n600); }
.log-row.is-booked .log-k { color: var(--b500); }
.log-row.is-reply .log-k { color: var(--g500); }
.dial-card { border-color: var(--n300); }
.dial-card .lbl { color: var(--n600); }
.dial-q div { background: var(--n200); }
.dial-q div.is-on { background: var(--b100); color: var(--ink); box-shadow: inset 2px 0 0 var(--b500); }
.script { color: var(--ink); }
.waves i { background: var(--g400); }
.dial-card .lbl[style] { color: var(--g500) !important; }
@media (max-width: 767px) { .app-stats div:nth-child(n+3) { border-color: var(--n300); } }

/* ================= v6: white hero, new "o", nav with Belkins-style dropdowns ================= */
/* Hero: white, centered, quiet grey network */
.hero { padding: .75rem .75rem 0; text-align: center; }
.hero-panel { background: var(--paper); color: var(--ink); border: 1px solid var(--n300); }
.hero-panel::before { background-image: linear-gradient(rgba(46,45,44,.03) 1px, transparent 1px), linear-gradient(90deg, rgba(46,45,44,.03) 1px, transparent 1px); }
#net { -webkit-mask: radial-gradient(ellipse 46% 52% at 50% 50%, rgba(0,0,0,.12), rgba(0,0,0,.12) 45%, #000 100%); mask: radial-gradient(ellipse 46% 52% at 50% 50%, rgba(0,0,0,.12), rgba(0,0,0,.12) 45%, #000 100%); }
.hero-grid { grid-template-columns: minmax(0, 1fr); justify-items: center; padding-block: 6.5rem 7rem; }
.hero .hero-copy { align-items: center; gap: 1.5rem; }
.hero .display { max-width: 46rem; font-size: clamp(2.25rem, 4vw, 3.75rem); }
.hero-sub { max-width: 36rem; }
.hero .btn-row { justify-content: center; }
@media (max-width: 991px) {
  .hero-grid { padding-block: 4.5rem 5rem; }
  #net { -webkit-mask: radial-gradient(ellipse 70% 45% at 50% 50%, rgba(0,0,0,.1), #000 100%); mask: radial-gradient(ellipse 70% 45% at 50% 50%, rgba(0,0,0,.1), #000 100%); }
}

/* Logo "o": open ring closed by the booked dot */
.wo { display: inline-block; width: .62em; height: .62em; vertical-align: -.045em; margin: 0 .02em; overflow: visible; }
.wo-g { transform-origin: 12px 12px; }
.wo-d { fill: var(--g400); }
.wo-p { fill: var(--g400); transform-box: fill-box; transform-origin: center; opacity: 0; animation: woPing 4s ease-out infinite 1s; }
@keyframes woPing { 0% { transform: scale(1); opacity: .55; } 40%, 100% { transform: scale(2.6); opacity: 0; } }
.logo:hover .wo-g { animation: woSpin 1.1s var(--e-cubic); }
@keyframes woSpin { from { transform: rotate(0); } to { transform: rotate(360deg); } }
.founder-mark .wo { font-size: 6rem; width: .62em; height: .62em; color: var(--ink); }

/* Nav: menu sits beside the logo, email + button on the right */
.nav-left { display: flex; align-items: center; gap: 1.75rem; min-width: 0; }
.nav-menu { gap: 0; }
.nav-link { padding: .5rem .75rem; font-size: .9375rem; font-weight: 500; }
.nav-mail { display: inline-flex; align-items: center; gap: .45rem; font-size: .9375rem; text-decoration: none; color: var(--ink); padding: .5rem; border-radius: .5rem; }
.nav-mail svg { width: 18px; height: 18px; color: var(--n600); }
.nav-mail:hover { background: var(--n200); }
@media (max-width: 1279px) { .nav-mail span { display: none; } .nav-right .btn .lbl-long { display: none; } .nav-right .btn .lbl-short { display: inline; } }
@media (max-width: 1099px) { .nav-left { gap: 1rem; } .nav-link { padding: .5rem .55rem; } }

/* Dropdown card */
.mega { background: none; box-shadow: none; border: 0; border-radius: 0; padding-block: .5rem 0; }
.dm { background: var(--paper); border: 1px solid var(--n300); border-radius: 1rem; overflow: hidden; box-shadow: 0 30px 60px -30px rgba(46,45,44,.28); }
.dm-head { font-size: .75rem; text-transform: uppercase; letter-spacing: .08rem; color: var(--n600); margin-bottom: .875rem; min-height: 1em; }
.dm-top { padding: 1.5rem 1.5rem 1.75rem; }
.dm-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .75rem; }
.dc { display: flex; gap: .875rem; align-items: flex-start; padding: 1rem; border: 1px solid var(--n300); border-radius: .625rem; text-decoration: none; color: var(--ink); transition: border-color .25s ease, background-color .25s ease; }
.dc:hover { border-color: var(--b300); background: var(--b100); }
.dc-i { flex: none; width: 2.25rem; height: 2.25rem; display: grid; place-items: center; border: 1px solid var(--n300); border-radius: .5rem; background: var(--paper); color: var(--b500); }
.dc-i svg { width: 18px; height: 18px; }
.dc-t, .dc-d { display: block; }
.dc-t { font-size: 1rem; font-weight: 600; line-height: 1.3; }
.dc-d { font-size: .8125rem; line-height: 1.45; color: var(--n600); margin-top: .2rem; }
.dm-bot { display: grid; grid-template-columns: 2fr 1fr; gap: 1.5rem; background: var(--n200); padding: 1.5rem; border-top: 1px solid var(--n300); }
.dm-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; }
.dm-col { display: flex; flex-direction: column; }
.dl { display: flex; align-items: center; gap: .625rem; padding: .45rem 0; text-decoration: none; color: var(--ink); font-size: .9375rem; }
.dl svg { width: 16px; height: 16px; color: var(--b500); flex: none; }
.dl:hover span { text-decoration: underline; text-underline-offset: 3px; }
.dm-feat { position: relative; display: flex; flex-direction: column; justify-content: center; gap: .5rem; padding: 1.5rem; min-height: 9rem; background: var(--paper); border: 1px solid var(--n300); border-radius: .75rem; text-decoration: none; color: var(--ink); }
.dm-ft { font-size: 1.375rem; font-weight: 600; letter-spacing: -.02em; }
.dm-fd { font-size: .8125rem; color: var(--n600); max-width: 16rem; }
.dm-arrow { position: absolute; right: 1rem; bottom: 1rem; color: var(--b500); transition: transform .25s ease; }
.dm-arrow svg { width: 20px; height: 20px; }
.dm-feat:hover .dm-arrow { transform: translate(2px, -2px); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001s !important; animation-iteration-count: 1 !important; transition-duration: .001s !important; }
  .mq-row, .strip-row { animation: none !important; }
  .js .rv { transform: none; }
}
.foot-top { border-top: 0; padding-top: 0; }
/* Hero blends into the page: no outline box */
.hero { padding: 0; }
.hero-panel { border: 0; border-radius: 0; background: transparent; }
.hero-panel::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 8rem; z-index: 0; pointer-events: none; background: linear-gradient(rgba(253,253,252,0), var(--paper)); }
.hero-grid { position: relative; z-index: 1; }
/* v7 mark: ring + stem + green crown */
.wo { width: .74em; height: .74em; vertical-align: -.055em; margin: 0 -.01em 0 -.04em; overflow: visible; }
.wo .mk-crown, .ring-svg .mk-crown { stroke: var(--g400); }
.wo .mk-crown { transform-origin: 17.8px 6.7px; }
.logo:hover .wo .mk-crown { animation: crownWave .9s var(--e-cubic); }
@keyframes crownWave { 0%, 100% { transform: rotate(0); } 30% { transform: rotate(-14deg); } 65% { transform: rotate(8deg); } }
.ring { border: 0; border-radius: 0; width: 1rem; height: 1rem; }
.ring svg { display: block; width: 100%; height: 100%; overflow: visible; }
.ring i { display: none; }
.eyebrow .ring.em { width: .95rem; height: .95rem; }
.app-t .ring { width: .95rem; height: .95rem; }
.founder-mark .wo { font-size: 6rem; width: .74em; height: .74em; }
.rule-k .ring { color: var(--paper); }
/* v8: the "o" set like a real glyph */
.wm { display: inline-block; white-space: nowrap; }
.wo { width: .627em; height: .776em; vertical-align: -.016em; margin: 0 -.055em 0 0; overflow: visible; }
.wo .mk-crown { transform-origin: 545px -507px; transform-box: view-box; }
.founder-mark .wo { font-size: 6rem; width: .627em; height: .776em; }
.wo { height: .76em; vertical-align: baseline; }
.founder-mark .wo { height: .76em; }
.logo .wo { transform: translateY(-.5px); }
/* v9: green slash, no crown */
.mk-slash { stroke: var(--g400); }
.logo:hover .wo .mk-slash { animation: none; }
/* v10: compact dropdowns (text columns + feature card) */
.mega { padding-block: .5rem 0; }
.dm { display: grid; grid-template-columns: minmax(0, 1fr) 15rem; gap: .5rem; padding: .5rem; background: var(--paper); border: 1px solid var(--n300); border-radius: 1rem; box-shadow: 0 24px 48px -28px rgba(46,45,44,.3); overflow: visible; }
.dm-cols { display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); padding: 1rem 1.25rem 1.25rem; }
.dm-col { display: flex; flex-direction: column; padding-right: 1.5rem; }
.dm-col.is-split { border-left: 1px solid var(--n300); padding-left: 1.5rem; }
.dm-head { font-size: .6875rem; font-weight: 600; letter-spacing: .06rem; text-transform: uppercase; color: var(--n600); margin: 0 0 .5rem; min-height: 0; }
.dl { display: block; padding: .3rem 0; text-decoration: none; color: var(--ink); font-size: inherit; }
.dl-t { display: block; font-size: .875rem; font-weight: 500; line-height: 1.35; }
.dl-d { display: block; font-size: .75rem; line-height: 1.35; color: var(--n600); }
.dl:hover .dl-t { color: var(--b500); text-decoration: none; }
.dl:hover span { text-decoration: none; }
.dm-feat { display: flex; flex-direction: column; gap: 0; padding: 0; min-height: 0; background: var(--paper); border: 1px solid var(--n300); border-radius: .75rem; overflow: hidden; justify-content: flex-start; }
.dm-vis { display: grid; place-items: center; height: 7.5rem; background-color: var(--n200); background-image: linear-gradient(var(--n300) 1px, transparent 1px), linear-gradient(90deg, var(--n300) 1px, transparent 1px); background-size: 1.25rem 1.25rem; color: var(--ink); }
.dm-mark { width: 3rem; height: 3rem; overflow: visible; transition: transform .4s var(--e-cubic); }
.dm-feat:hover .dm-mark { transform: rotate(-12deg) scale(1.06); }
.dm-fb { display: flex; flex-direction: column; gap: .3rem; padding: .875rem 1rem 1rem; }
.dm-fe { font-size: .6875rem; font-weight: 600; letter-spacing: .06rem; text-transform: uppercase; color: var(--n600); }
.dm-ft { font-size: .9375rem; line-height: 1.35; }
.dm-feat:hover .dm-ft { color: var(--b500); }
/* v11: nested-chain "o" */
.mk-g { fill: var(--g400); }
.mk-p { fill: var(--paper); }
.on-dark .mk-p, .footer .mk-p, .is-light .mk-p { fill: var(--ink); }
/* v12: live call mock (Instrument Serif speech, Geist Mono labels) */
.call-live { --gm: "Geist Mono", ui-monospace, monospace; padding: 1rem 1.125rem 1.125rem; display: flex; flex-direction: column; gap: .875rem; min-height: 22rem; }
.cl-top { display: flex; align-items: center; gap: .75rem; }
.cl-av { width: 2.25rem; height: 2.25rem; border-radius: 50%; display: grid; place-items: center; background: var(--ink); color: var(--paper); font-family: var(--gm); font-size: .75rem; letter-spacing: .04em; flex: none; }
.cl-id { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.cl-id b { font-size: .9375rem; font-weight: 600; }
.cl-id span { font-family: var(--gm); font-size: .6875rem; color: var(--n600); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cl-time { margin-left: auto; display: inline-flex; align-items: center; gap: .4rem; font-family: var(--gm); font-size: .75rem; }
.cl-time i { width: .5rem; height: .5rem; border-radius: 50%; background: #e5484d; animation: recBlink 1.4s steps(2) infinite; }
.cl-time b { font-weight: 500; font-variant-numeric: tabular-nums; }
@keyframes recBlink { 50% { opacity: .25; } }
.cl-wave { display: grid; gap: 2px; padding: .625rem .75rem; border: 1px solid var(--n300); border-radius: .625rem; background: var(--n200); }
.cl-lane { display: flex; align-items: flex-end; gap: 2px; height: 1.4rem; }
.cl-lane.is-them { align-items: flex-start; }
.cl-lane i { flex: 1; height: 8%; border-radius: 2px; background: var(--n400); transition: height .12s linear, background-color .3s ease; }
.cl-lane.is-you.is-talking i { background: var(--b400); }
.cl-lane.is-them.is-talking i { background: var(--g400); }
.cl-script { display: flex; flex-direction: column; gap: .625rem; }
.cl-line { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); gap: .75rem; align-items: baseline; }
.cl-who { font-family: var(--gm); font-size: .6875rem; color: var(--n600); text-transform: uppercase; letter-spacing: .03em; }
.cl-line.is-you .cl-who { color: var(--b500); }
.cl-line.is-them .cl-who { color: var(--g500); }
.cl-say { font-family: "Instrument Serif", Georgia, serif; font-size: 1.1875rem; line-height: 1.3; color: var(--ink); margin: 0; }
.cl-line.is-them .cl-say { font-style: italic; }
.js .call-live:not(.is-static) .cl-line { display: none; }
.js .call-live .cl-line.is-shown { display: grid; animation: clIn .35s var(--e-cubic); }
.cl-say .caret { display: inline-block; width: 1px; height: 1em; margin-left: 2px; vertical-align: -.12em; background: currentColor; animation: recBlink 1s steps(2) infinite; }
.cl-say mark { background: linear-gradient(transparent 58%, var(--g200) 58%); color: inherit; padding: 0 .05em; }
@keyframes clIn { from { opacity: 0; transform: translateY(4px); } }
.cl-cues { display: flex; flex-wrap: wrap; gap: .5rem; min-height: 1.75rem; margin-top: auto; }
.cl-cue { display: inline-flex; align-items: center; gap: .45rem; padding: .3rem .6rem; border-radius: 999px; font-family: var(--gm); font-size: .6875rem; border: 1px solid var(--n300); background: var(--paper); animation: cueIn .5s var(--e-cubic); }
.cl-cue::before { content: ""; width: .4rem; height: .4rem; border-radius: 50%; background: var(--g400); }
.cl-cue.is-booked { background: var(--ink); color: var(--paper); border-color: var(--ink); }
@keyframes cueIn { from { opacity: 0; transform: translateY(6px) scale(.96); } }
@media (max-width: 600px) { .cl-line { grid-template-columns: minmax(0, 1fr); gap: .15rem; } .cl-say { font-size: 1.0625rem; } }
.cl-wave { padding: .5rem .75rem; gap: 1px; }
.cl-lane { gap: 0; justify-content: space-between; height: 1.6rem; }
.cl-lane i { flex: none; width: 2px; border-radius: 1px; }
.cl-lane.is-them { border-top: 1px dashed var(--n400); }
.cl-line { grid-template-columns: 6rem minmax(0, 1fr); }
/* Journey consoles: clean headers, just the app name (the pane already says "Example account") */
.pane-vis .console-top .live, .pane-vis .console-top .app-st, .pane-vis .app-meta { display: none; }
/* v13: ring + green arc over it */
.mk-arc { stroke: var(--g400); }
.wo { height: .79em; }
.founder-mark .wo { height: .79em; }
.wo .mk-arc { transform-origin: 312px -640px; transform-box: view-box; transition: transform .4s var(--e-cubic); }
.logo:hover .wo .mk-arc { transform: translateY(-30px); }
/* v14: head + shoulders "o" */
.wo { height: .76em; }
.founder-mark .wo { height: .76em; }
.wo .mk-arc { transform-origin: 312px 107px; transform-box: view-box; }
.logo:hover .wo .mk-arc { transform: scale(1.06, 1.1); }

/* Problems: hover makes each card move */
.prob { transition: transform .5s var(--e-cubic), box-shadow .5s var(--e-cubic), background-color .4s ease; }
.prob-vis { transition: transform .35s var(--e-cubic); transform: perspective(900px) rotateX(var(--ry, 0deg)) rotateY(var(--rx, 0deg)); will-change: transform; }
@media (hover: hover) {
  .prob:hover { transform: translateY(-6px); box-shadow: 0 24px 40px -28px rgba(46,45,44,.35); background: var(--n300); }
  .prob:hover .cal-track i { transform: translateX(var(--dx)) scaleX(var(--sx)); transition-duration: 1.4s; }
  .prob:hover .cal-track i.is-g { transform: translateX(calc(var(--dx) * -1)) scaleX(1.25); }
  .cal-grid .m { transition: color .2s ease; }
  .cal-grid .m:hover, .cal-grid .m:hover + .cal-track i { color: var(--ink); background-color: var(--b500); }
  .prob:hover .ramp i:not(.is-cost) { transform: scaleY(1.45); background: var(--g400); }
  .prob:hover .ramp i.is-cost { transform: scaleY(.92); }
  .ramp div:nth-child(2) i { transition-delay: .05s; } .ramp div:nth-child(3) i { transition-delay: .1s; } .ramp div:nth-child(4) i { transition-delay: .15s; } .ramp div:nth-child(5) i { transition-delay: .2s; } .ramp div:nth-child(6) i { transition-delay: .25s; }
  .person { transition: transform .4s var(--e-cubic), opacity .4s ease, box-shadow .4s ease; }
  .prob:hover .person.is-x { transform: translateY(6px) scale(.94); opacity: .3; }
  .prob:hover .person.is-ok { transform: translateY(-4px); box-shadow: 0 0 0 2px var(--g400); }
  .prob:hover .person.is-ok:nth-child(2) { transition-delay: .06s; } .prob:hover .person.is-ok:nth-child(3) { transition-delay: .12s; } .prob:hover .person.is-ok:nth-child(4) { transition-delay: .18s; }
}
.founder-mark .wo { margin: 0 .08em .3em; }
/* ================= v15: photo sections ================= */
/* Orbit: buyer cutout with channels travelling an arc */
.orb-split { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 4rem; align-items: center; }
.orb-card { background: var(--n200); border: 1px solid var(--n300); border-radius: 1.25rem; padding: 1rem 1rem 0; overflow: hidden; }
.orbit { position: relative; aspect-ratio: 400 / 260; overflow: hidden; border-radius: .75rem .75rem 0 0; background: radial-gradient(circle at 50% 100%, var(--paper) 0 30%, var(--n200) 30.2% 44%, #f3f2ee 44.2% 60%, var(--n200) 60.2%); }
.orb-ring { display: none; }
.orb-path { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 84.6%; }
.orb-path path { stroke: var(--g400); stroke-width: 1.4; vector-effect: non-scaling-stroke; animation: dash 30s linear infinite; }
@keyframes dash { to { stroke-dashoffset: -400; } }
.orb-person { position: absolute; left: 50%; bottom: 0; height: 88%; width: auto; transform: translateX(-50%); mix-blend-mode: multiply; filter: saturate(.95); transition: transform .6s var(--e-cubic); }
.orb-card:hover .orb-person { transform: translateX(-50%) scale(1.03); }
.orb-chip { position: absolute; left: 0; top: 0; display: inline-flex; align-items: center; gap: .4rem; padding: .4rem .7rem .4rem .45rem; border-radius: 999px; background: var(--paper); border: 1px solid var(--n300); box-shadow: 0 8px 20px -12px rgba(46,45,44,.35); font-size: .8125rem; white-space: nowrap; will-change: transform; }
.orb-chip svg { width: 1.6rem; height: 1.6rem; padding: .3rem; border-radius: 50%; background: var(--g100); color: var(--g500); }
.orb-chip b { font-weight: 600; }
.orb-copy { gap: 1.25rem; }
.orb-list { list-style: none; padding: 0; margin: .5rem 0 0; display: grid; gap: 0; }
.orb-list li { display: grid; grid-template-columns: 6rem minmax(0, 1fr); gap: 1rem; padding: .875rem 0; border-top: 1px solid var(--n300); }
.orb-list b { font-weight: 600; }
.orb-list span { color: var(--n600); }

/* Meeting photo with floating invite cards */
.mp { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); grid-template-rows: auto; gap: 4rem; align-items: center; position: relative; }
.mp-photo { grid-column: 1; grid-row: 1; border-radius: 1.25rem; overflow: hidden; aspect-ratio: 4 / 3; }
.mp-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 35% 50%; transform: scale(1.12); transition: transform 6s cubic-bezier(.2,.6,.2,1); }
.mp.is-in .mp-photo img { transform: scale(1); }
.mp-cards { grid-column: 1; grid-row: 1; align-self: end; justify-self: end; display: grid; gap: .5rem; margin: 0 -1.5rem -1.5rem 0; z-index: 1; }
.mp-card { display: flex; align-items: center; gap: .75rem; padding: .7rem 1rem .7rem .7rem; background: var(--paper); border: 1px solid var(--n300); border-radius: .75rem; box-shadow: 0 18px 36px -22px rgba(46,45,44,.45); opacity: 0; transform: translateX(24px); transition: opacity .6s ease, transform .8s var(--e-cubic); transition-delay: calc(.6s + var(--d)); }
.mp.is-in .mp-card { opacity: 1; transform: none; animation: bob 5s ease-in-out infinite; animation-delay: calc(1.6s + var(--d) * 3); }
@keyframes bob { 50% { transform: translateY(-5px); } }
.mp-card b, .mp-card small { display: block; }
.mp-card b { font-size: .9375rem; font-weight: 600; }
.mp-card small { font-size: .75rem; color: var(--n600); }
.mp-ic { width: 2.25rem; height: 2.25rem; border-radius: .6rem; display: grid; place-items: center; background: var(--g100); color: var(--g500); flex: none; }
.mp-ic svg { width: 18px; height: 18px; }
.mp-copy { grid-column: 2; gap: 1.25rem; }

/* People map: dark dot map with avatars */
.pm { position: relative; overflow: hidden; border-radius: 1.25rem; background: var(--ink); min-height: 30rem; }
.dmap { position: absolute; inset: 0; width: 100%; height: 100%; }
.dmap circle { fill: rgba(253,253,252,.08); }
.dmap circle.in { fill: rgba(253,253,252,.3); }
.pm-av { position: absolute; width: 4.25rem; height: 4.25rem; margin: -2.125rem 0 0 -2.125rem; border-radius: 50%; padding: 3px; background: var(--g400); box-shadow: 0 10px 24px -10px rgba(0,0,0,.6); animation: avFloat 6s ease-in-out infinite; animation-delay: var(--d); transition: transform .3s var(--e-cubic); }
.pm-av:nth-child(3n) { width: 3.5rem; height: 3.5rem; margin: -1.75rem 0 0 -1.75rem; }
.pm-av img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: block; border: 2px solid var(--ink); }
.pm-av::after { content: ""; position: absolute; inset: -3px; border-radius: 50%; border: 2px solid var(--g400); opacity: 0; animation: avPing 6s ease-out infinite; animation-delay: calc(var(--d) * 2); }
.pm-av:hover { transform: scale(1.12); }
@keyframes avFloat { 50% { translate: 0 -6px; } }
@keyframes avPing { 0% { transform: scale(1); opacity: .7; } 30%, 100% { transform: scale(1.6); opacity: 0; } }
.pm-ping { position: absolute; width: .45rem; height: .45rem; margin: -.225rem; border-radius: 50%; background: var(--g400); animation: dotBlink 4s ease-in-out infinite; animation-delay: var(--d); }
@keyframes dotBlink { 0%, 100% { opacity: .25; } 50% { opacity: 1; box-shadow: 0 0 0 6px rgba(34,180,127,.18); } }
.pm-copy { position: absolute; left: 2rem; bottom: 2rem; max-width: 24rem; padding: 1.5rem; border-radius: 1rem; background: rgba(46,45,44,.82); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); display: flex; flex-direction: column; gap: .75rem; z-index: 2; }

/* About mosaic */
.mosaic { display: grid; grid-template-columns: 1.6fr 1fr 1fr; gap: 1rem; height: 26rem; }
.mo { margin: 0; border-radius: 1rem; overflow: hidden; clip-path: inset(100% 0 0 0 round 1rem); transition: clip-path 1.1s var(--e-cubic); }
.mo.is-in { clip-path: inset(0 0 0 0 round 1rem); }
.mo-b { transition-delay: .15s; } .mo-c { transition-delay: .3s; }
.mo img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.15); transition: transform 1.6s var(--e-cubic); }
.mo.is-in img { transform: scale(1); }
.mo:hover img { transform: scale(1.04); }
.mo-a img { object-position: 50% 30%; } .mo-b img { object-position: 60% 20%; } .mo-c img { object-position: 50% 15%; }
.js .rv.mo { opacity: 1; transform: none; }

@media (max-width: 991px) {
  .orb-split, .mp { grid-template-columns: minmax(0, 1fr); gap: 2.5rem; }
  .mp-copy { grid-column: 1; grid-row: 2; }
  .mp-cards { margin: 0 .75rem .75rem 0; }
  .mosaic { grid-template-columns: 1fr 1fr; height: auto; } .mo-a { grid-column: 1 / -1; height: 16rem; } .mo-b, .mo-c { height: 14rem; }
  .pm { min-height: 34rem; } .pm-copy { left: 1rem; right: 1rem; bottom: 1rem; max-width: none; }
}
@media (max-width: 600px) { .pm-av { width: 3rem; height: 3rem; margin: -1.5rem 0 0 -1.5rem; } .pm-av:nth-child(3n) { width: 2.6rem; height: 2.6rem; margin: -1.3rem 0 0 -1.3rem; } .mp-card { padding: .5rem .75rem .5rem .5rem; } .orb-chip { font-size: .6875rem; } }
@media (prefers-reduced-motion: reduce) { .mo { clip-path: none; } .mp-card { opacity: 1; transform: none; } }
.pm { color: var(--paper); min-height: 32rem; }
.dmap { left: 18%; width: 82%; }
.dmap circle { fill: rgba(253,253,252,.05); }
.dmap circle.in { fill: rgba(253,253,252,.34); }
.pm-copy h2, .pm-copy p { color: var(--paper); }
.pm-copy p { opacity: .72; }
.pm-copy { background: rgba(46,45,44,.6); }
@media (max-width: 991px) { .dmap { left: 0; width: 100%; height: 70%; } }
@media (max-width: 991px) { .pm-av.is-low { display: none; } }
@media (max-width: 600px) {
  .mp { gap: 0; }
  .mp-cards { grid-row: 2; justify-self: stretch; margin: -2.5rem .75rem 0; gap: .375rem; }
  .mp-card:nth-child(n+2) { display: none; }
  .mp-copy { grid-row: 3; margin-top: 2rem; }
}
/* v16: example cards as live mini-dashboards */
.ex-art { --ac: var(--b500); --ac-soft: var(--b100); background: var(--paper); color: var(--ink); border: 1px solid var(--n300); aspect-ratio: auto; min-height: 15rem; gap: .875rem; justify-content: flex-start; isolation: isolate;
  background-image: radial-gradient(circle, var(--n400) .8px, transparent 1px); background-size: 12px 12px; }
.ex-art.is-g { --ac: var(--g500); --ac-soft: var(--g100); background-color: var(--paper); }
.ex-art.is-ink { --ac: var(--ink); --ac-soft: var(--n300); background-color: var(--paper); }
.ex-spot { position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: 0; transition: opacity .4s ease; background: radial-gradient(14rem circle at var(--mx, 50%) var(--my, 50%), var(--ac-soft), transparent 70%); }
.ex-card:hover .ex-spot { opacity: 1; }
.ex-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; }
.ex-lbl { font-size: .6875rem; color: var(--n600); text-transform: uppercase; letter-spacing: .06em; padding-top: .35rem; }
.ex-art .ex-big { position: static; font-size: 3.25rem; font-weight: 600; letter-spacing: -.04em; opacity: 1; color: var(--ac); text-align: right; line-height: .9; }
.ex-art .ex-big b { font-weight: 600; font-variant-numeric: tabular-nums; }
.ex-art .ex-big small { color: var(--n600); font-size: .75rem; font-weight: 500; opacity: 1; letter-spacing: 0; margin-top: .375rem; }
.ex-cal { position: relative; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px; overflow: hidden; }
.ex-dow { font-family: var(--mono); font-size: .625rem; color: var(--n500); text-align: center; padding-bottom: 2px; }
.ex-cal i { height: 1.05rem; border-radius: 4px; background: var(--n200); border: 1px solid var(--n300); transition: background-color .35s ease, border-color .35s ease, transform .35s var(--e-cubic); }
.ex-cal i.is-on { background: var(--ac); border-color: var(--ac); transform: scale(1.04); }
.ex-cal i.is-on::after { content: ""; display: block; width: 4px; height: 4px; margin: calc(.525rem - 3px) auto 0; border-radius: 50%; background: var(--paper); opacity: .85; }
.ex-scan { position: absolute; top: 14px; bottom: 0; width: 2px; left: 0; background: linear-gradient(var(--ac), transparent); opacity: 0; pointer-events: none; }
.ex-art.is-scanning .ex-scan { animation: exScan 1.8s cubic-bezier(.5,0,.5,1); }
@keyframes exScan { 0% { left: 0; opacity: 0; } 10% { opacity: .9; } 90% { opacity: .9; } 100% { left: 100%; opacity: 0; } }
.ex-art .ex-chip { margin-top: auto; background: var(--paper); border: 1px solid var(--n300); color: var(--ink); box-shadow: inset 3px 0 0 var(--ac); }
.ex-card { transition: background-color .3s ease, transform .5s var(--e-cubic), box-shadow .5s var(--e-cubic); }
.ex-card:hover { transform: translateY(-4px); box-shadow: 0 24px 40px -30px rgba(46,45,44,.4); }
.ex-art.is-g, .ex-art.is-ink { background-image: radial-gradient(circle, var(--n400) .8px, transparent 1px); background-size: 12px 12px; }

/* v17: hero "you grow" emphasis */
.hero-sub { color: rgba(46,45,44,.75); }
.hero-sub .grow { font-weight: 800; color: var(--ink); white-space: nowrap; background: linear-gradient(var(--g400), var(--g400)) 0 100% / 0 .2em no-repeat; padding-bottom: .1em; animation: grow-line .9s cubic-bezier(.2,.7,.2,1) .5s forwards; }
@keyframes grow-line { to { background-size: 100% .2em; } }
@media (prefers-reduced-motion: reduce) { .hero-sub .grow { animation: none; background-size: 100% .2em; } }