/* Finiti Legal homepage — matches the designer's Framer page (home-new-copy).
   Self-contained: the homepage loads only this file and assets/js/home.js. */

@font-face { font-family: "Switzer"; src: url(../fonts/switzer-400.woff2) format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Switzer"; src: url(../fonts/switzer-500.woff2) format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Geist"; src: url(../fonts/geist-variable.woff2) format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Geist Mono"; src: url(../fonts/geist-mono-variable.woff2) format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Satoshi"; src: url(../fonts/satoshi-variable.woff2) format("woff2"); font-weight: 300 900; font-style: normal; font-display: swap; }

:root {
  --cream: #F2EFE9;
  --cream-2: #E9E4DA;
  --white-soft: #FAF8F6;
  --ink: #161513;
  --ink-2: #252728;
  --muted: #6F6B62;
  --muted-dark: #A5A199;
  --dark: #161513;
  --teal: #0C1E26;
  --accent: #3F6F7B;     /* Finiti Blue, deepened for text contrast; Blue 900 is --brand-blue */
  --brand-blue: #6C9EAB;   /* Finiti Blue 900, brand guidelines 2026 */
  --line: rgba(22, 21, 19, .14);
  --line-dark: rgba(242, 239, 233, .16);

  --sans: "Switzer", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  --label: "Satoshi", var(--sans);
  --tag: "Geist", var(--sans);

  --max: 1200px;
  --pad: 60px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.55;
  letter-spacing: -0.02em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
h1, h2, h3, p, ul, ol, figure, blockquote { margin: 0; padding: 0; }
ul, ol { list-style: none; }
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ── Type ── */
.h-display { font-size: 44px; line-height: 1.1; font-weight: 500; letter-spacing: -1px; }
.h-2 { font-size: 30px; line-height: 1.15; font-weight: 500; letter-spacing: -0.5px; }
.h-3 { font-size: 18px; line-height: 1.3; font-weight: 500; letter-spacing: -0.2px; }
.t-body { font-size: 15px; line-height: 1.55; letter-spacing: -0.3px; }
.t-small { font-size: 13px; line-height: 1.5; letter-spacing: -0.26px; }
.label { font-family: var(--label); font-size: 16px; line-height: 1.3; font-weight: 500; letter-spacing: 0; text-transform: uppercase; }
.tag { font-family: var(--tag); font-size: 12px; line-height: 1.4; font-weight: 500; letter-spacing: 1px; text-transform: uppercase; }

/* ── Layout ── */
.wrap { width: 100%; max-width: var(--max); margin: 0 auto; padding-inline: var(--pad); }
.section { position: relative; }
.on-dark { color: var(--cream); }

/* ── Buttons ── */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 12px 22px; border-radius: 4px;
  font-family: var(--sans); font-size: 14px; line-height: 1.2; font-weight: 500; letter-spacing: 0;
  transition: opacity .2s ease, background-color .3s ease, color .3s ease;
}
.btn:hover { opacity: .85; }
.btn-light { background: var(--cream); color: var(--ink); }
.btn-dark { background: #000; color: var(--cream); }
.btn-sm { padding: 8px 16px; font-size: 13px; }

/* ── Navigation ──
   Fixed. Logo and button sit on a top row; the page links stack under the logo.
   home.js sets data-theme="dark" on the nav while it is over a dark section. */
.nav { position: fixed; inset: 0 0 auto 0; z-index: 50; pointer-events: none; }
.nav-top { display: flex; align-items: center; justify-content: space-between; padding: 24px; transition: background-color .3s ease, padding .3s ease, box-shadow .3s ease; }
.nav.is-scrolled .nav-top { padding-block: 14px; background: rgba(242, 239, 233, .9); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: 0 1px 0 var(--line); pointer-events: auto; }
.nav.is-scrolled[data-theme="dark"] .nav-top { background: rgba(22, 21, 19, .78); box-shadow: 0 1px 0 var(--line-dark); }
.nav-logo, .nav-cta, .nav-links, .nav-menu { pointer-events: auto; }
.nav-logo { display: block; color: var(--ink); transition: color .3s ease; }
.logo { display: block; width: 133px; height: 24px; }
.nav-cta { background: #000; color: var(--cream); }
.nav-right { display: flex; align-items: center; }
.nav-links { position: absolute; top: 80px; left: 24px; display: flex; flex-direction: column; gap: 7px; }
.nav-links a { font-size: 14px; line-height: 1.2; font-weight: 500; letter-spacing: 0; color: var(--ink); transition: color .3s ease, opacity .2s ease; }
.nav-links a:hover { opacity: .6; }
.nav-group { display: flex; flex-direction: column; gap: 5px; }
.nav-group-label { font-size: 14px; line-height: 1.2; font-weight: 500; color: var(--ink); opacity: .55; }
.nav-links .nav-group a { padding-left: 12px; font-size: 13px; }
.nav[data-theme="dark"] .nav-group-label, .nav[data-theme="hero"] .nav-group-label { color: #fff; }
.nav-menu { display: none; }
.nav[data-theme="dark"] .nav-logo,
.nav[data-theme="dark"] .nav-links a { color: #fff; }
.nav[data-theme="dark"] .nav-cta { background: var(--cream); color: var(--ink); }
.nav[data-theme="hero"] .nav-logo,
.nav[data-theme="hero"] .nav-links a { color: #fff; }
.nav[data-theme="hero"] .nav-cta { background: var(--ink); color: var(--cream); }

/* ── Hero ── */
.hero { position: relative; min-height: 720px; overflow: hidden; color: #fff; isolation: isolate; }
.hero-bg { position: absolute; inset: 0; z-index: -1; }
.hero-bg img { width: 100%; height: 100%; object-fit: cover; }
.hero-bg::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(rgb(18, 14, 15) 0%, rgba(18, 14, 15, .46) 100%);
  opacity: .62;
  -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px);
}
.hero-inner { display: grid; grid-template-columns: 657fr 543fr; max-width: var(--max); margin: 0 auto; min-height: 720px; padding-top: 80px; }
.hero-copy { display: flex; flex-direction: column; padding: 112px 56px 136px; }
.hero-copy .tag { color: var(--cream); }
.hero-copy h1 { margin-top: 24px; max-width: 420px; color: #fff; }
.hero-copy p.t-body { margin-top: 24px; max-width: 490px; color: var(--cream); }
.hero-copy .btn { align-self: flex-start; margin-top: 48px; }
.hero-visual { display: flex; align-items: center; justify-content: center; padding: 40px; }

/* Hero demo widget (from the designer's Framer HTML embed) */
.fnw, .fnw * { margin: 0; padding: 0; box-sizing: border-box; }
.fnw {
  --fnw-ink: #252728; --fnw-muted: #6e6f70; --fnw-faint: #9e9f9f; --fnw-border: #e7e7e7;
  --fnw-attention: #8f6410; --fnw-resolved: #347849; --fnw-radius: 14px;
  --fnw-sans: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  --fnw-mono: "Geist Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  position: relative; width: 100%; max-width: 400px; margin: 0 auto; height: 178px;
  font-family: var(--fnw-sans); letter-spacing: 0; color: var(--fnw-ink);
}
.fnw-layer { position: absolute; inset: 0; display: flex; align-items: center; opacity: 0; transform: translateY(3px); transition: opacity .38s ease, transform .38s ease; pointer-events: none; }
.fnw-layer.is-on { opacity: 1; transform: translateY(0); }
.fnw-input { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 52px; padding: 12px 12px 12px 16px; background: rgba(255, 255, 255, .94); border: 1px solid var(--fnw-border); border-radius: var(--fnw-radius); box-shadow: 0 1px 2px rgba(37, 39, 40, .05), 0 10px 28px rgba(37, 39, 40, .10); }
.fnw-input-text { flex: 1; min-width: 0; font-size: 13.5px; line-height: 1.45; color: var(--fnw-ink); letter-spacing: .001em; }
.fnw-typed:empty + .fnw-caret { margin-left: 0; }
.fnw-caret { display: inline-block; width: 1px; height: 15px; margin-left: 1px; vertical-align: -2.5px; background: var(--fnw-ink); animation: fnw-blink 1.06s steps(1) infinite; }
@keyframes fnw-blink { 50% { opacity: 0; } }
.fnw-send { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border: 0; border-radius: 999px; background: var(--fnw-ink); color: #fff; opacity: .28; transition: opacity .3s ease, transform .16s ease; }
.fnw.has-text .fnw-send { opacity: 1; }
.fnw.is-sending .fnw-send { transform: scale(.86); }
.fnw-dots { display: none; flex: 1; align-items: center; gap: 5px; }
.fnw.is-thinking .fnw-dots { display: inline-flex; }
.fnw.is-thinking .fnw-input-text { display: none; }
.fnw-dots i { width: 4.5px; height: 4.5px; border-radius: 999px; background: var(--fnw-faint); animation: fnw-pulse 1s ease-in-out infinite; }
.fnw-dots i:nth-child(2) { animation-delay: .16s; }
.fnw-dots i:nth-child(3) { animation-delay: .32s; }
@keyframes fnw-pulse { 0%, 100% { opacity: .35; } 40% { opacity: 1; } }
.fnw-card { width: 100%; padding: 14px 16px; background: rgba(255, 255, 255, .96); border: 1px solid var(--fnw-border); border-radius: var(--fnw-radius); box-shadow: 0 1px 2px rgba(37, 39, 40, .05), 0 10px 28px rgba(37, 39, 40, .10); }
.fnw-card-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.fnw-eyebrow { font-size: 10.5px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--fnw-muted); white-space: nowrap; }
.fnw-source { font-family: var(--fnw-mono); font-size: 10px; color: var(--fnw-faint); white-space: nowrap; }
.fnw-rows { display: flex; flex-direction: column; gap: 6px; }
.fnw-row { display: flex; align-items: center; gap: 8px; opacity: 0; transform: translateY(2px); transition: opacity .32s ease, transform .32s ease; }
.fnw-layer.is-on .fnw-row { opacity: 1; transform: translateY(0); }
.fnw-layer.is-on .fnw-row:nth-child(1) { transition-delay: .05s; }
.fnw-layer.is-on .fnw-row:nth-child(2) { transition-delay: .13s; }
.fnw-layer.is-on .fnw-row:nth-child(3) { transition-delay: .21s; }
.fnw-layer.is-on .fnw-row:nth-child(4) { transition-delay: .29s; }
.fnw-row-dot { flex: none; width: 6px; height: 6px; border-radius: 999px; }
.fnw-row.is-gap .fnw-row-dot { background: var(--fnw-attention); }
.fnw-row.is-ok .fnw-row-dot { background: var(--fnw-resolved); }
.fnw-row-text { min-width: 0; font-size: 12.5px; line-height: 1.4; color: var(--fnw-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fnw-row.is-ok .fnw-row-text { color: var(--fnw-muted); }
.fnw-meta { margin-top: 10px; font-family: var(--fnw-mono); font-size: 10.5px; color: var(--fnw-muted); font-variant-numeric: tabular-nums; }

/* ── Shared 3-column grid ── */
.grid3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 32px; }
.grid3 > .span2 { grid-column: 2 / span 2; }

/* ── The problem ── */
.problem { background: var(--dark); color: var(--cream); padding: 96px 0 88px; }
.problem .label { color: var(--white-soft); }
.problem-head { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 48px; align-items: end; }
.problem h2 { margin-top: 24px; max-width: 700px; color: var(--cream); }
.problem-intro p { color: var(--muted-dark); }
.problem-rows { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; margin-top: 64px; padding-top: 32px; }
/* the line across the top fills left to right when the section comes into view */
.problem-rows::before, .problem-rows::after { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px; }
.problem-rows::before { background: var(--line-dark); }
.problem-rows::after { background: var(--brand-blue); transform: scaleX(0); transform-origin: left; transition: transform 1.6s cubic-bezier(.6, 0, .2, 1) .2s; }
.problem-row { display: flex; flex-direction: column; gap: 28px; }
.problem-icon { display: flex; align-items: flex-end; height: 64px; }
.problem-icon svg { display: block; width: auto; height: 100%; overflow: visible; }
.problem-row:first-child .problem-icon svg { height: 66%; }
.problem-icon path { fill: rgba(242, 239, 233, .45); stroke: var(--cream); stroke-width: 1; stroke-miterlimit: 10; vector-effect: non-scaling-stroke; }
.problem-row .t-body { margin-top: 10px; color: var(--muted-dark); }
.problem-row-gap .h-3 { color: var(--cream); }
.problem-row-gap .t-body { color: var(--brand-blue); font-weight: 500; }
.problem-quote { margin-top: 72px; padding-top: 32px; border-top: 1px solid var(--line-dark); }
.problem-quote p { max-width: 860px; color: var(--cream); }
.problem-quote footer { margin-top: 12px; color: var(--muted-dark); }
/* entrance: cards rise in turn, icons draw their outline then fill */
.js .problem-row, .js .problem-quote { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s cubic-bezier(.2, .7, .2, 1); }
.js .problem-icon path { fill-opacity: 0; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.1s ease, fill-opacity .6s ease; }
.problem.is-in .problem-rows::after { transform: scaleX(1); }
.problem.is-in .problem-row, .problem.is-in .problem-quote { opacity: 1; transform: none; }
.problem.is-in .problem-icon path { fill-opacity: 1; stroke-dashoffset: 0; }
.problem.is-in .problem-row:nth-child(1) { transition-delay: .15s; }
.problem.is-in .problem-row:nth-child(2) { transition-delay: .45s; }
.problem.is-in .problem-row:nth-child(3) { transition-delay: .75s; }
.problem.is-in .problem-row:nth-child(1) path { transition-delay: .3s, 1.2s; }
.problem.is-in .problem-row:nth-child(2) path { transition-delay: .6s, 1.5s; }
.problem.is-in .problem-row:nth-child(3) path { transition-delay: .9s, 1.8s; }
.problem.is-in .problem-quote { transition-delay: 1.1s; }
@media (prefers-reduced-motion: reduce) {
  .js .problem-row, .js .problem-quote, .js .problem-icon path, .problem-rows::after { transition: none !important; }
}

/* ── Capabilities ── */
.caps { padding: 60px 0 120px; }
.caps .label { color: var(--ink-2); }
.caps h2 { margin-top: 32px; }
.cap-list { margin-top: 100px; display: flex; flex-direction: column; gap: 100px; }
/* Carousel mode (home.js): tabs on top, one capability at a time */
.cap-list.is-carousel { display: block; margin-top: 56px; }
.cap-tabs { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; }
.cap-tabs::-webkit-scrollbar { display: none; }
.cap-tab { flex: 1 1 0; min-width: 120px; display: flex; flex-direction: column; gap: 12px; padding: 0 0 4px; border: 0; background: none; text-align: left; cursor: pointer;
  font-family: var(--tag); font-size: 13px; font-weight: 500; letter-spacing: 1.2px; text-transform: uppercase; color: var(--muted); transition: color .2s ease; }
.cap-tab:hover, .cap-tab.is-active { color: var(--accent); }
.cap-tab:focus-visible { outline: 2px solid var(--teal); outline-offset: 4px; border-radius: 2px; }
.cap-tab-bar { position: relative; display: block; height: 2px; border-radius: 1px; background: var(--line); overflow: hidden; }
.cap-tab-bar::after { content: ""; position: absolute; inset: 0; width: 0; background: var(--brand-blue); }
.cap-tab.is-active .cap-tab-bar::after { animation: cap-progress 5.2s linear forwards; }
.cap-list.is-paused .cap-tab.is-active .cap-tab-bar::after,
.cap-list.is-offscreen .cap-tab.is-active .cap-tab-bar::after { animation-play-state: paused; }
.cap-list.is-still .cap-tab.is-active .cap-tab-bar::after { animation: none; width: 100%; }
@keyframes cap-progress { to { width: 100%; } }
.cap-stage { display: grid; margin-top: 40px; }
.cap-stage > .cap { grid-area: 1 / 1; align-items: start;
  opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity .35s ease, transform .35s ease, visibility 0s linear .35s; }
.cap-stage > .cap.is-active { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.cap-stage .cap-copy > .tag { display: none; }
.cap-stage .cap-copy .h-3 { margin-top: 0; }
.cap { align-items: start; }
.cap-shot { position: relative; aspect-ratio: 339 / 220; border-radius: 8px; overflow: hidden; }
.cap-shot > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cap-frame { position: absolute; inset: 0; padding: 20px; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.slot {
  display: flex; align-items: center; justify-content: center; width: 100%; height: 100%;
  border-radius: 6px; background: var(--cream);
  font-family: var(--tag); font-size: 12px; font-weight: 500; letter-spacing: 1px; text-transform: uppercase; color: var(--muted-dark);
}
.slot img { width: 100%; height: 100%; object-fit: cover; object-position: left top; border-radius: inherit; }
.cap-copy .tag { color: var(--accent); }
.cap-copy .h-3 { margin-top: 16px; color: var(--ink-2); }
.cap-copy p.t-body { margin-top: 16px; max-width: 650px; color: var(--muted); }

/* ── Capability mockups (small animated product previews) ── */
.cap-shot { container-type: inline-size; }
.slot.mock { display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start; gap: .55em; padding: 1.1em 1.2em; overflow: hidden;
  background: #FBFAF8; text-align: left; text-transform: none; letter-spacing: 0; font-family: var(--tag); font-weight: 400;
  font-size: clamp(9px, 3.05cqw, 12px); line-height: 1.45; color: var(--ink-2); box-shadow: 0 1px 2px rgba(22, 21, 19, .06), 0 10px 24px -10px rgba(22, 21, 19, .2); }
.mk-bar { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding-bottom: .55em; border-bottom: 1px solid var(--line); font-size: .92em; color: var(--muted); }
.mk-pill { flex: none; padding: .1em .6em; border-radius: 999px; background: rgba(12, 30, 38, .07); color: var(--teal); font-weight: 500; }
.mock.is-play .mk-pill { animation: mk-pulse 1.6s ease-in-out infinite; }
@keyframes mk-pulse { 50% { opacity: .45; } }
.mk-line { color: var(--ink-2); }
.mk-hl { font-weight: 500; padding: 0 .2em; border-radius: 3px; transition: background-color .4s ease, color .4s ease; }
.mock.is-play .mk-hl-ok { background: rgba(52, 120, 73, .14); color: #285c38; transition-delay: var(--d); }
.mock.is-play .mk-hl-warn { background: rgba(143, 100, 16, .16); color: #7a550d; transition-delay: var(--d); }
.mk-in { opacity: 0; transform: translateY(4px); transition: opacity .35s ease, transform .35s ease; }
.mock.is-play .mk-in { opacity: 1; transform: none; transition-delay: var(--d); }
.mk-chips { display: flex; flex-wrap: wrap; gap: .4em; margin-top: auto; }
.mk-chip { display: inline-flex; align-items: center; gap: .35em; padding: .2em .55em; border-radius: 6px; background: rgba(52, 120, 73, .09); color: #285c38; font-size: .92em; }
.mk-chip-warn { background: rgba(143, 100, 16, .1); color: #7a550d; }
.mk-ico { flex: none; display: inline-flex; width: 1.15em; height: 1.15em; }
.mk-ico svg { width: 100%; height: 100%; }
.mk-ok { color: #347849; }
.mk-warn { color: #8f6410; }
.mk-foot { font-size: .9em; color: var(--muted); display: flex; align-items: center; gap: .4em; flex-wrap: wrap; }
.mk-list { display: flex; flex-direction: column; gap: .45em; }
.mk-list li { display: flex; align-items: center; gap: .5em; }
.mk-li-warn { margin: 0 -.4em; padding: .15em .4em; border-radius: 4px; background: rgba(143, 100, 16, .08); color: #7a550d; }
.mk-list + .mk-foot { margin-top: auto; }
.mk-bench { display: flex; flex-direction: column; gap: .6em; }
.mk-brow { display: grid; grid-template-columns: 8.4em 1fr 4.6em; white-space: nowrap; align-items: center; gap: .6em; }
.mk-track { position: relative; height: .5em; border-radius: 999px; background: rgba(22, 21, 19, .07); }
.mk-fill { position: absolute; left: 0; top: 0; bottom: 0; width: 0; border-radius: inherit; background: var(--teal); transition: width .8s cubic-bezier(.2, .7, .2, 1); }
.mock.is-play .mk-fill { width: var(--w); transition-delay: var(--d); }
.mk-track em { position: absolute; top: -.25em; bottom: -.25em; left: var(--p); width: 2px; border-radius: 1px; background: var(--accent); }
.mk-tag { justify-self: start; padding: .05em .5em; border-radius: 999px; border: 1px solid var(--line); font-size: .88em; color: var(--muted); }
.mk-tag-warn { border-color: rgba(143, 100, 16, .35); color: #7a550d; }
.mk-tag-novel { border-color: rgba(12, 30, 38, .35); color: var(--teal); }
.mk-bench + .mk-foot { margin-top: auto; }
.mk-legend { display: inline-block; width: .9em; height: .45em; border-radius: 999px; background: var(--teal); }
.mk-legend-peer { width: 2px; height: .9em; margin-left: .5em; background: var(--accent); }
.mk-type { width: 0; max-width: max-content; overflow: hidden; white-space: nowrap; border-right: 1.5px solid transparent; transition: width var(--t) steps(30, end); }
.mock.is-play .mk-type { width: 100%; transition-delay: var(--d); }
.mk-type sup, .mk-chip sup { font-size: .7em; color: var(--accent); }
.mk-mail { display: flex; align-items: center; gap: .55em; padding: .45em .55em; border-radius: 6px; background: #fff; box-shadow: 0 1px 2px rgba(22, 21, 19, .08); }
.mk-av { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 1.9em; height: 1.9em; border-radius: 50%; background: var(--teal); color: #fff; font-size: .82em; font-weight: 500; }
.mk-mail-text { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.mk-mail-text b { font-weight: 500; color: var(--ink); }
.mk-time { flex: none; font-size: .88em; color: var(--muted); }
.mk-mail + .mk-list { margin-top: .2em; }
.mk-vlist li > span:not(.mk-ico) { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.mk-vlist em { flex: none; font-style: normal; font-size: .88em; padding: .05em .5em; border-radius: 999px; border: 1px solid var(--line); color: var(--muted); }
.mk-vlist .mk-li-warn em { border-color: rgba(143, 100, 16, .35); color: #7a550d; }
.mk-doc { color: var(--teal); }
.mk-query { padding: .4em .6em; border-radius: 6px; border: 1px solid var(--line); background: #fff; color: var(--ink); }
.mk-query .mk-type { display: block; border-right-color: var(--teal); }
.mk-ratios li { justify-content: space-between; padding-bottom: .3em; border-bottom: 1px dashed var(--line); }
.mk-ratios b { font-weight: 500; color: var(--ink); font-variant-numeric: tabular-nums; }
.mk-ratios + .mk-chips { margin-top: .2em; }
.mk-chips + .mk-foot { margin-top: auto; }
.cap-copy .cap-note { margin-top: 12px; color: var(--muted); }
@media (prefers-reduced-motion: reduce) {
  .mock .mk-in, .mock .mk-fill, .mock .mk-type, .mock .mk-hl { transition: none !important; }
  .mock.is-play .mk-pill { animation: none; }
}

/* ── Lives where you work + email agent ── */
.work { padding: 72px 0 0; }
.work-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 48px; padding-bottom: 48px; border-bottom: 1px solid var(--line); }
.work-head .label { color: var(--ink-2); }
.work-head h2 { margin-top: 16px; }
.work-head .t-small { max-width: 280px; color: var(--muted); }
.product-frame { position: relative; padding: 60px; border-radius: 8px; overflow: hidden; isolation: isolate; }
.product-frame > img { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; object-fit: cover; }
.product-frame .slot { aspect-ratio: 968 / 657; height: auto; box-shadow: 0 10px 40px rgba(22, 21, 19, .12); }
/* product demo overlaps the bottom of the hero; the hero photo fades into the page behind it */
.hero::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 200px; z-index: -1; pointer-events: none;
  background: linear-gradient(to bottom, rgba(242, 239, 233, 0) 0%, rgba(242, 239, 233, .55) 55%, var(--cream) 100%); }
.demo { position: relative; z-index: 2; margin-top: -104px; padding: 0 0 24px; }
.demo .product-frame { padding: 48px; border-radius: 16px; border: 1px solid rgba(255, 255, 255, .55);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .4) inset, 0 40px 90px -30px rgba(22, 21, 19, .35); }
.demo .product-frame > img { filter: blur(14px) saturate(.85); transform: scale(1.12); }
.demo .product-frame::before { content: ""; position: absolute; inset: 0; z-index: -1; background: rgba(242, 239, 233, .28); }
.demo .slot { border-radius: 10px; box-shadow: 0 1px 2px rgba(22, 21, 19, .06), 0 18px 40px -12px rgba(22, 21, 19, .22); }
.fnw-mail { max-width: 420px; height: 262px; }
.fnw-mail .fnw-row { align-items: flex-start; }
.fnw-mail .fnw-row-dot { margin-top: 6px; }
.fnw-mail .fnw-row-text { white-space: normal; }
.fnw-mail .fnw-card-head { flex-wrap: wrap; row-gap: 2px; }
.fnw-mail .fnw-eyebrow { white-space: normal; }
.fnw-notify { display: flex; align-items: center; gap: 12px; width: 100%; padding: 14px 16px; background: rgba(255, 255, 255, .96); border: 1px solid var(--fnw-border); border-radius: var(--fnw-radius); box-shadow: 0 1px 2px rgba(37, 39, 40, .05), 0 10px 28px rgba(37, 39, 40, .10); }
.fnw-notify-icon { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 999px; background: var(--fnw-ink); color: #fff; }
.fnw-notify-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; font-size: 12.5px; line-height: 1.35; color: var(--fnw-muted); }
.fnw-notify-text b { font-weight: 500; color: var(--fnw-ink); }
.fnw-row.is-info .fnw-row-dot { background: var(--fnw-faint); }

/* ── Accountability ── */
.account { padding: 64px 0 96px; }
.account .label { color: var(--ink-2); }
.account h2 { margin-top: 16px; }
.account .wrap > p.t-body { max-width: 653px; margin-top: 16px; color: var(--muted); }
.account .wrap > p.t-body + p.t-body { color: var(--ink); }
.cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-top: 49px; }
.card { position: relative; display: flex; flex-direction: column; justify-content: flex-start; min-height: 244px; padding: 104px 24px 28px; border-radius: 20px; overflow: hidden; isolation: isolate; color: var(--cream); }
.card > img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; }
.card .grid-lines { position: absolute; top: 19px; right: 20px; z-index: -1; width: 133px; height: 133px; opacity: 0; transition: opacity .4s ease; }
.card:hover .grid-lines { opacity: 1; }
.card .h-3 { text-transform: uppercase; }
.card p { margin-top: 8px; }

/* ── Who it's for ── */
.built { position: relative; padding: 120px 0; background: var(--teal); color: var(--cream); overflow: hidden; isolation: isolate; }
.built > img { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; object-fit: cover; opacity: .23; }
.built .label { color: #fff; }
.built h2 { margin-top: 16px; }
.built .t-small { margin-top: 16px; max-width: 380px; color: var(--cream-2); }
.built-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; margin-top: 100px; }
.built-cols p { margin-top: 24px; color: var(--cream-2); }

/* ── Proof ── */
.proof { padding: 80px 0 88px; text-align: center; }
.proof > .wrap > .label { color: var(--ink-2); }
.quotes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 32px; text-align: left; }
.quotes-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 860px; margin-inline: auto; }
.quotes-2 .quote { min-height: 0; }
.quote { display: flex; flex-direction: column; justify-content: space-between; gap: 28px; min-height: 0; padding: 32px; border-radius: 12px; background: var(--teal); color: var(--cream); }
.quote footer { color: var(--muted-dark); }
.trust { margin-top: 40px; color: var(--muted); }

/* ── FAQ ── */
.faq { padding: 40px 0 80px; }
.faq .wrap { display: grid; grid-template-columns: 410fr 622fr; gap: 48px; align-items: start; }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-item summary { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 20px 0; cursor: pointer; list-style: none; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary .h-3 { color: var(--ink); }
.faq-icon { position: relative; flex: none; width: 28px; height: 28px; border-radius: 4px; }
.faq-icon::before, .faq-icon::after { content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 1.25px; margin: -0.6px 0 0 -6px; background: var(--ink-2); transition: transform .3s ease; }
.faq-icon::after { transform: rotate(90deg); }
.faq-item[open] .faq-icon::after { transform: rotate(0deg); }
.faq-item p { max-width: 559px; padding-bottom: 20px; color: var(--muted); }
.faq-item p a { text-decoration: underline; text-underline-offset: 2px; }

.faq-head { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
.faq-more { font-size: 14px; font-weight: 500; letter-spacing: 0; color: var(--ink); border-bottom: 1px solid var(--line); padding-bottom: 2px; transition: border-color .2s ease; }
.faq-more:hover { border-color: var(--ink); }

/* ── FAQ page (faq.html) ── */
.faq-top { padding: 176px 0 64px; border-bottom: 1px solid var(--line); }
.faq-top .label { color: var(--ink-2); }
.faq-top h1 { margin-top: 24px; max-width: 760px; }
.faq-lead { margin-top: 24px; max-width: 620px; color: var(--muted); }
.faq-updated { margin-top: 16px; color: var(--muted); }
.faq-body { padding: 64px 0 120px; }
.faq-grid { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 64px; align-items: start; }
.faq-index { position: sticky; top: 96px; }
.faq-index .tag { color: var(--muted); }
.faq-index ul { margin-top: 16px; display: flex; flex-direction: column; gap: 10px; }
.faq-index a { font-size: 14px; letter-spacing: -0.1px; color: var(--ink); opacity: .7; transition: opacity .2s ease; }
.faq-index a:hover { opacity: 1; }
.qa-group + .qa-group { margin-top: 80px; }
.qa-group > .h-2 { padding-bottom: 24px; border-bottom: 1px solid var(--line); scroll-margin-top: 96px; }
.qa { padding: 28px 0; border-bottom: 1px solid var(--line); scroll-margin-top: 88px; }
.qa .h-3 { max-width: 720px; }
.qa-anchor { color: var(--ink); }
.qa-anchor:hover { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.qa .t-body { max-width: 720px; margin-top: 12px; color: var(--muted); }
.qa .t-body:first-of-type { color: var(--ink-2); }
.qa .t-body a, .faq-item p a { color: inherit; text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1px; }
.qa:target .h-3 { color: var(--accent); }
.qa:target .qa-anchor { color: inherit; }

/* ── Compare page (compare.html) ── */
.cmp-legend { display: flex; flex-wrap: wrap; gap: 12px 28px; margin-bottom: 20px; font-size: 13px; color: var(--muted); letter-spacing: 0; }
.cmp-legend > span { display: inline-flex; align-items: center; gap: 8px; }
.cmp-scroll { position: relative; overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: 12px; border: 1px solid var(--line); background: var(--white-soft); }
.cmp-table { width: 100%; min-width: 640px; table-layout: fixed; border-collapse: collapse; font-size: 14px; line-height: 1.4; letter-spacing: -0.2px; }
.cmp-table th, .cmp-table td { padding: 16px 20px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.cmp-table thead th { background: var(--white-soft); padding-top: 20px; padding-bottom: 18px; vertical-align: bottom; font-weight: 500; }
.cmp-table .cmp-feature { width: 22%; text-align: left; font-weight: 500; color: var(--ink-2); }
.cmp-col { display: block; font-size: 15px; font-weight: 500; color: var(--ink); }
.cmp-sub { display: block; margin-top: 4px; font-size: 12px; font-weight: 400; color: var(--muted); }
.cmp-table thead .cmp-us { background: var(--teal); color: var(--cream); border-radius: 10px 10px 0 0; }
.cmp-table thead .cmp-us .cmp-col { color: var(--cream); }
.cmp-table thead .cmp-us .cmp-sub { color: rgba(242, 239, 233, .7); }
.cmp-table td.cmp-us { background: rgba(12, 30, 38, .05); }
.cmp-group th { padding: 22px 16px 10px; text-align: left; font-family: var(--tag); font-size: 12px; font-weight: 500; letter-spacing: 1px; text-transform: uppercase; color: var(--accent); background: var(--white-soft); }
.cmp-table tbody tr:last-child th, .cmp-table tbody tr:last-child td { border-bottom: 1px solid var(--line); }
.cmp-table tbody:last-child tr:last-child > * { border-bottom: 0; }
.cmp-mark { display: inline-flex; align-items: center; justify-content: center; vertical-align: middle; }
.cmp-cell { display: flex; align-items: flex-start; gap: 10px; color: var(--ink-2); }
td:not(.cmp-us) .cmp-cell { color: var(--muted); }
.cmp-cell .cmp-mark { flex: none; margin-top: -1px; }
.cmp-yes { width: 22px; height: 22px; border-radius: 999px; background: var(--teal); color: var(--cream); }
.cmp-no { width: 22px; height: 22px; border-radius: 999px; background: rgba(22, 21, 19, .06); color: var(--muted-dark); }
.cmp-eq { width: 22px; height: 22px; border-radius: 999px; border: 1px solid var(--line); color: var(--muted); }
.cmp-none { width: 22px; height: 22px; }
.cmp-partial { padding: 3px 8px; border-radius: 999px; border: 1px solid var(--line); font-size: 12px; color: var(--muted); }
.cmp-text { font-size: 13px; color: var(--muted); }
.cmp-note { margin-top: 16px; max-width: 720px; color: var(--muted); }
.cmp { padding: 56px 0 96px; }
.cmp-fit { padding: 88px 0; border-top: 1px solid var(--line); }
.cmp-pricing { padding-bottom: 120px; }
.cmp-fit-grid { display: grid; grid-template-columns: 410fr 622fr; gap: 48px; align-items: start; }
.cmp-fit .label { color: var(--ink-2); }
.cmp-fit h2 { margin-top: 16px; }
.cmp-fit .t-body { color: var(--muted); }
.cmp-examples { margin-top: 20px; display: flex; flex-direction: column; gap: 12px; }
.cmp-examples li { position: relative; padding-left: 22px; color: var(--ink-2); }
.cmp-examples li::before { content: ""; position: absolute; left: 0; top: 11px; width: 10px; height: 2px; border-radius: 1px; background: var(--accent); }
.cmp-price-lead { margin-top: 16px; max-width: 360px; }
.price-card { padding: 32px; border-radius: 12px; background: var(--teal); color: var(--cream); }
.price-amount { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 12px; }
.price-num { font-size: 44px; line-height: 1; font-weight: 500; letter-spacing: -1px; }
.price-unit { font-size: 15px; color: rgba(242, 239, 233, .72); letter-spacing: -0.2px; }
.price-list { margin-top: 24px; padding-top: 24px; border-top: 1px solid var(--line-dark); display: flex; flex-direction: column; gap: 10px; }
.price-list li { position: relative; padding-left: 26px; color: var(--cream) !important; }
.price-list li::before { content: ""; position: absolute; left: 2px; top: 6px; width: 10px; height: 5px; border-left: 1.6px solid var(--cream); border-bottom: 1.6px solid var(--cream); transform: rotate(-45deg); }
.price-cta { background: var(--cream); color: var(--ink); }
.cmp-related { margin-top: 40px; padding-top: 24px; border-top: 1px solid var(--line); }
.cmp-related .tag { color: var(--muted); }
.cmp-related ul { margin-top: 12px; display: flex; flex-direction: column; gap: 8px; }
.cmp-related a { font-size: 15px; letter-spacing: -0.3px; color: var(--ink); text-decoration: underline; text-decoration-color: var(--line); text-underline-offset: 3px; text-decoration-thickness: 1px; transition: text-decoration-color .2s ease; }
.cmp-related a:hover { text-decoration-color: var(--ink); }

/* ── Pricing page (pricing.html) ── */
.page-pricing .wrap { max-width: 1160px; padding-inline: 96px; }
.pr-hero { padding: 184px 0 120px; border-bottom: 1px solid var(--line); }
.pr-hero-copy { max-width: 640px; }
.plans { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 56px; }
.plan { display: flex; flex-direction: column; padding: 36px; border-radius: 12px; }
.plan .price-cta { align-self: flex-start; margin-top: auto; }
.plan .price-list { margin-bottom: 32px; }
.plan-name { font-family: var(--tag); font-size: 12px; font-weight: 500; letter-spacing: 1px; text-transform: uppercase; margin-bottom: 20px; }
.plan-team { background: var(--teal); color: var(--cream); }
.plan-team .plan-name { color: rgba(242, 239, 233, .72); }
.plan-ent { background: var(--white-soft); border: 1px solid var(--line); color: var(--ink); }
.plan-ent .plan-name, .plan-ent .price-unit { color: var(--muted); }
.plan-ent .price-list { border-top-color: var(--line); }
.plan-ent .price-list li { color: var(--ink-2) !important; }
.plan-ent .price-list li::before { border-color: var(--ink-2); }
.plan-ent .price-cta { background: #000; color: var(--cream); }
.pr-footnote { margin-top: 20px; color: var(--muted); }
.plans-one { grid-template-columns: minmax(0, 560px); }
.plans-one .price-num { font-size: 36px; }
.plan-ctas { display: flex; align-items: center; flex-wrap: wrap; gap: 12px 24px; margin-top: auto; }
.plan-ctas .price-cta { margin-top: 0; }
.plan-link { font-size: 14px; letter-spacing: 0; color: inherit; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; opacity: .85; }
.plan-link:hover { opacity: 1; }

/* ── Region switcher (US / HK) ── */
/* Region toggle: quiet "US · HK" text in the side nav, mobile menu and footer */
.region { display: inline-flex; align-items: center; gap: .45em; font-family: var(--label); font-size: 12px; letter-spacing: .4px; color: var(--muted); }
.region > span { opacity: .5; }
.nav-links .region { margin-top: 14px; }
.nav-links .region a, .foot-legal .region a { font-size: 12px; font-weight: 500; opacity: .45; }
.nav-links .region a[aria-current="true"], .foot-legal .region a[aria-current="true"] { opacity: 1; }
.nav-links .region a:hover, .foot-legal .region a:hover { opacity: .8; }
.nav[data-theme="dark"] .region, .nav[data-theme="hero"] .region { color: rgba(255, 255, 255, .7); }
.foot-legal .region { margin-left: 8px; color: #F3F3F3; }
.pr-hero .label { color: var(--ink-2); }
.pr-hero h1 { margin-top: 24px; max-width: 520px; }
.pr-lead { margin-top: 24px; max-width: 500px; color: var(--muted); }
.pr-updated { margin-top: 20px; color: var(--muted); }
.price-note { margin-top: 20px; color: rgba(242, 239, 233, .72); }
.page-pricing .cmp { padding: 120px 0; }
.cmp-head { max-width: 720px; margin-bottom: 48px; }
.cmp-head .label { color: var(--ink-2); }
.cmp-head h2 { margin-top: 16px; }
.cmp-head .t-body { margin-top: 16px; color: var(--muted); }
.page-pricing .cmp-fit { padding: 120px 0 140px; }
.cmp-3 .cmp-feature { width: 19%; }
.cmp-3 th.cmp-us, .cmp-3 td.cmp-us { width: 31%; }
.cmp-table thead th.cmp-us { padding-left: 20px; }

/* ── Footer ── */
.foot { position: relative; padding-top: 100px; background: var(--dark); color: var(--cream); overflow: hidden; isolation: isolate; }
.foot > img { position: absolute; top: -79px; left: 0; z-index: -1; width: 100%; height: 640px; object-fit: cover; opacity: .29; }
.foot-cta { padding: 0 60px 24px; }
.foot-cta p { margin-top: 24px; max-width: 660px; color: var(--muted-dark); }
.foot-cta .btn { margin-top: 24px; }
.foot-legal { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-top: 40px; padding: 40px 60px 60px; border-top: 1px solid rgba(242, 239, 233, .22); }
.foot-legal p { color: #F3F3F3; }
.foot-legal nav { display: flex; gap: 16px; }
.foot-legal a { font-family: var(--label); font-size: 14px; letter-spacing: 0; color: #F3F3F3; }
.foot-legal a:hover { opacity: .7; }

/* ── Floating side nav: keep page content clear of it on mid-size screens ── */
@media (min-width: 1024px) and (max-width: 1359px) {
  .wrap { padding-left: max(var(--pad), min(150px, calc(150px - (100vw - 1200px) / 2))); }
  .page-pricing .wrap { padding-left: max(96px, min(150px, calc(150px - (100vw - 1160px) / 2))); }
  .hero-inner { padding-left: max(0px, min(94px, calc(94px - (100vw - 1200px) / 2))); }
}
@media (min-width: 1024px) {
  /* side links follow the section behind them, not the one behind the top bar */
  .nav[data-links="dark"] .nav-links a, .nav[data-links="hero"] .nav-links a { color: #fff; }
  .nav[data-links="light"] .nav-links a { color: var(--ink); }
  .nav[data-links="dark"] .nav-group-label, .nav[data-links="hero"] .nav-group-label { color: #fff; }
  .nav[data-links="light"] .nav-group-label { color: var(--ink); }
  .nav[data-links="dark"] .nav-links .region, .nav[data-links="hero"] .nav-links .region { color: rgba(255, 255, 255, .7); }
  .nav[data-links="light"] .nav-links .region { color: var(--muted); }
  /* footer text starts clear of the floating side nav */
  .foot-cta, .foot-legal { padding-left: 150px; }
}

/* ── Smaller screens ── */
@media (max-width: 1023px) {
  /* links can no longer sit beside the content: fold them into a menu */
  .nav-links { display: none; top: 72px; left: 16px; right: 16px; padding: 16px 20px; gap: 14px; border-radius: 8px; background: var(--cream); box-shadow: 0 10px 30px rgba(22, 21, 19, .15); }
  .nav-links a, .nav[data-theme="dark"] .nav-links a, .nav[data-theme="hero"] .nav-links a { color: var(--ink); font-size: 16px; }
  .nav-group-label, .nav[data-theme="dark"] .nav-group-label, .nav[data-theme="hero"] .nav-group-label { color: var(--ink); font-size: 16px; }
  .nav-group { gap: 10px; }
  .nav-links .nav-group a { font-size: 15px; }
  .nav.is-open .nav-links { display: flex; }
  .nav-menu { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; margin-right: 12px; border: 0; border-radius: 4px; background: #000; color: var(--cream); cursor: pointer; }
  .nav[data-theme="dark"] .nav-menu { background: var(--cream); color: var(--ink); }
  .nav[data-theme="hero"] .nav-menu { background: var(--ink); color: var(--cream); }
  .nav-right { display: flex; align-items: center; }
}
@media (max-width: 1023px) {
  :root { --pad: 32px; }
  .hero-inner { grid-template-columns: 1fr; padding-top: 72px; }
  .hero-copy { padding: 64px var(--pad) 24px; }
  .hero-copy .btn { margin-top: 40px; }
  .hero-visual { padding: 24px var(--pad) 64px; }
  .grid3 { grid-template-columns: 1fr; row-gap: 24px; }
  .grid3 > .span2 { grid-column: auto; }
  .cap-list { margin-top: 64px; }
  .problem { padding: 72px 0; }
  .problem-head { grid-template-columns: 1fr; gap: 24px; }
  .problem-rows { grid-template-columns: 1fr; gap: 40px; margin-top: 48px; }
  .problem-row { flex-direction: row; align-items: flex-start; gap: 24px; }
  .problem-icon { flex: none; width: 72px; height: 48px; }
  .problem-quote { margin-top: 56px; }
  .cap-list { gap: 64px; }
  .cap-list.is-carousel { margin-top: 40px; }
  .cap-stage { margin-top: 28px; }
  .cap-tab { flex: 0 0 auto; min-width: 132px; }
  .cap-shot { max-width: 520px; }
  .work-head { flex-direction: column; align-items: flex-start; }
  .product-frame { padding: 24px; }
  .demo { margin-top: -48px; padding: 0 0 8px; }
  .demo .product-frame { padding: 20px; border-radius: 12px; }
  .hero::after { height: 120px; }
  .fnw-mail { height: 320px; }
  .cards { grid-template-columns: 1fr 1fr; }
  .built { padding: 88px 0; }
  .built-cols { grid-template-columns: 1fr; margin-top: 56px; }
  .quotes { grid-template-columns: 1fr; }
  .quote { min-height: 0; }
  .proof { padding: 88px 0; }
  .faq .wrap { grid-template-columns: 1fr; gap: 24px; }
  .faq-top { padding: 128px 0 48px; }
  .page-pricing .wrap { padding-inline: var(--pad); }
  .pr-hero { padding: 128px 0 72px; }
  .plans { grid-template-columns: 1fr; margin-top: 40px; }
  .plan { padding: 28px; }
  .page-pricing .cmp, .page-pricing .cmp-fit { padding: 72px 0; }
  .faq-grid { grid-template-columns: 1fr; gap: 40px; }
  .faq-index { position: static; }
  .faq-index ul { flex-direction: row; flex-wrap: wrap; gap: 8px 20px; }
  .price-num { font-size: 36px; }
  .cmp-fit-grid { grid-template-columns: 1fr; gap: 16px; }
  .cmp-fit { padding: 56px 0; }
  .cmp-table { min-width: 560px; font-size: 13px; }
  .cmp-table .cmp-feature { position: sticky; left: 0; z-index: 1; width: 120px; padding-inline: 12px; background: var(--white-soft); box-shadow: 1px 0 0 var(--line); }
  .cmp-table th, .cmp-table td { padding-inline: 10px; }
  .cmp-group th { position: sticky; left: 0; }
  .foot-cta { padding-inline: var(--pad); }
  .foot-legal { padding-inline: var(--pad); }
}
@media (max-width: 599px) {
  :root { --pad: 20px; }
  .nav-top { padding: 16px var(--pad); }
  .nav-links .region, .nav[data-theme="dark"] .nav-links .region, .nav[data-theme="hero"] .nav-links .region { margin-top: 4px; color: var(--muted); }
  .nav-links .region a { font-size: 13px; }
  .h-display { font-size: 34px; letter-spacing: -0.8px; }
  .h-2 { font-size: 26px; }
  .hero, .hero-inner { min-height: 0; }
  .hero-copy { padding-top: 56px; }
  .cards { grid-template-columns: 1fr; }
  .card { min-height: 200px; padding-top: 88px; }
  .foot-legal { flex-direction: column; align-items: flex-start; }
  .foot-cta .h-display br { display: none; }
}
@media (max-width: 767px) {
  /* comparison table: feature label on its own line, then each product stacked with its name */
  .cmp-scroll { overflow: visible; }
  .cmp-table, .cmp-table thead, .cmp-table tbody, .cmp-table tr, .cmp-table th, .cmp-table td { display: block; width: auto !important; min-width: 0; }
  .cmp-table thead { display: none; }
  .cmp-table .cmp-group th { position: static; }
  .cmp-table tbody tr:not(.cmp-group) { padding: 14px 16px 16px; border-bottom: 1px solid var(--line); }
  .cmp-table tbody tr:not(.cmp-group) > * { border: 0 !important; padding: 0; background: transparent; box-shadow: none; position: static; }
  .cmp-table tbody .cmp-feature { margin-bottom: 10px; font-size: 14px; }
  .cmp-table td { display: grid; grid-template-columns: 112px 1fr; gap: 12px; padding: 6px 0 !important; font-size: 13px; }
  .cmp-table td::before { content: attr(data-col); font-size: 12px; line-height: 1.4; color: var(--muted); padding-top: 2px; }
  .cmp-table td.cmp-us { margin: 0 -8px; padding: 8px !important; border-radius: 8px; background: rgba(12, 30, 38, .06) !important; }
  .cmp-table td.cmp-us::before { color: var(--ink); font-weight: 500; }
  .cmp-cell { gap: 8px; }
  .cmp-cell .cmp-mark { width: 20px; height: 20px; }
  .cmp-none { display: none !important; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .fnw-layer, .fnw-caret, .fnw-dots i, .fnw-row { transition: none; animation: none; }
}

/* ── Inner pages: about, trust center, privacy ── */
.pg-hero { padding: 168px 0 72px; }
.pg-hero .h-display { margin-top: 20px; max-width: 16ch; }
.pg-lead { margin-top: 24px; max-width: 640px; color: var(--muted); }
.pg-lead a, .pg-split-copy a, .pg-side a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(22, 21, 19, .3); }
.pg-updated { margin-top: 16px; color: var(--muted); }
.pg-section { padding: 96px 0; border-top: 1px solid var(--line); }
.pg-section-alt { background: var(--white-soft); }
.pg-head .h-2 { margin-top: 16px; max-width: 22ch; }
.pg-split { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 64px; align-items: start; }
.pg-split .h-2 { margin-top: 16px; }
.pg-side { margin-top: 20px; color: var(--muted); max-width: 36ch; }
.pg-split-copy .t-body { color: var(--muted); }
.pg-split-copy .t-body + .t-body { margin-top: 16px; }

/* team */
.people { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 48px; }
.person { display: flex; flex-direction: column; padding: 28px; border-radius: 12px; background: var(--white-soft); border: 1px solid var(--line); }
.person-photo { width: 88px; height: 88px; border-radius: 12px; object-fit: cover; filter: saturate(.9); }
.person-mark { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 50%; background: var(--teal); color: var(--cream); font-family: var(--label); font-size: 15px; letter-spacing: .5px; }
.person .h-3 { margin-top: 24px; color: var(--ink); }
.person .tag { margin-top: 6px; color: var(--accent); }
.person .t-body { margin-top: 16px; color: var(--muted); }
.people-note { margin-top: 32px; color: var(--muted); }

/* trust center */
.tc-statuses { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-top: 56px; }
.tc-status { padding: 24px; border-radius: 12px; background: var(--white-soft); border: 1px solid var(--line); }
.tc-status .tag { color: var(--muted); }
.tc-state { display: flex; align-items: center; gap: 8px; margin-top: 12px; font-size: 18px; font-weight: 500; color: var(--ink); }
.tc-dot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: #347849; box-shadow: 0 0 0 4px rgba(52, 120, 73, .14); }
.tc-progress .tc-dot { background: #b07d1a; box-shadow: 0 0 0 4px rgba(176, 125, 26, .16); }
.tc-status .t-small { margin-top: 12px; color: var(--muted); }
.tc-docs { border-top: 1px solid var(--line); }
.tc-doc { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 20px 0; border-bottom: 1px solid var(--line); }
.tc-doc-name { font-size: 17px; font-weight: 500; color: var(--ink); }
.tc-doc .t-small { margin-top: 4px; color: var(--muted); }
.tc-doc-link { flex: none; padding: 8px 14px; border-radius: 999px; border: 1px solid var(--line); font-size: 14px; font-weight: 500; color: var(--ink); transition: background-color .2s ease, border-color .2s ease; }
.tc-doc-link:hover { background: var(--ink); border-color: var(--ink); color: var(--cream); }
.tc-controls { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px 32px; margin-top: 48px; }
.tc-control { padding-top: 20px; border-top: 2px solid var(--ink); }
.tc-control .h-3 { color: var(--ink); }
.tc-control ul, .tc-deploy ul { display: flex; flex-direction: column; gap: 10px; margin-top: 16px; }
.tc-control li, .tc-deploy li { position: relative; padding-left: 16px; font-size: 15px; line-height: 1.5; color: var(--muted); }
.tc-control li::before, .tc-deploy li::before { content: ""; position: absolute; left: 0; top: .65em; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
.tc-deploys { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 48px; }
.tc-deploy { padding: 28px; border-radius: 12px; border: 1px solid var(--line); background: var(--white-soft); }
.tc-deploy .tag { color: var(--accent); }
.tc-deploy-lead { margin-top: 12px; font-size: 18px; line-height: 1.4; font-weight: 500; color: var(--ink); }
.tc-table-wrap { border-radius: 12px; border: 1px solid var(--line); overflow: hidden; background: var(--cream); }
.tc-table { width: 100%; border-collapse: collapse; font-size: 15px; }
.tc-table th, .tc-table td { padding: 14px 20px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); }
.tc-table thead th { font-family: var(--tag); font-size: 12px; font-weight: 500; letter-spacing: 1.2px; text-transform: uppercase; color: var(--muted); background: var(--white-soft); }
.tc-table tbody th { width: 34%; font-weight: 500; color: var(--ink); }
.tc-table td { color: var(--muted); }
.tc-table tbody tr:last-child > * { border-bottom: 0; }
.tc-contact { display: flex; align-items: center; justify-content: space-between; gap: 32px; padding: 48px; border-radius: 16px; background: var(--teal); color: var(--cream); }
.tc-contact .h-2 { color: var(--cream); }
.tc-contact .t-body { margin-top: 12px; color: rgba(242, 239, 233, .75); }
.tc-contact .btn { flex: none; background: var(--cream); color: var(--ink); }

/* privacy policy */
.prose { max-width: 72ch; color: var(--ink-2); }
.prose h2 { margin: 48px 0 12px; color: var(--ink); }
.prose h2:first-child { margin-top: 0; }
.prose p, .prose li { font-size: 16px; line-height: 1.65; }
.prose p + p, .prose ul + p, .prose p + ul { margin-top: 12px; }
.prose ul { display: flex; flex-direction: column; gap: 8px; padding-left: 20px; list-style: disc; }
.prose a { text-decoration: underline; text-underline-offset: 3px; }

@media (max-width: 1023px) {
  .pg-hero { padding: 128px 0 56px; }
  .pg-section { padding: 72px 0; }
  .pg-split { grid-template-columns: 1fr; gap: 32px; }
  .people, .tc-controls, .tc-deploys { grid-template-columns: 1fr 1fr; }
  .tc-statuses { grid-template-columns: 1fr 1fr; }
  .tc-contact { flex-direction: column; align-items: flex-start; padding: 32px; }
}
@media (max-width: 599px) {
  .people, .tc-controls, .tc-deploys, .tc-statuses { grid-template-columns: 1fr; }
  .tc-doc { flex-direction: column; align-items: flex-start; gap: 12px; }
  .tc-table th, .tc-table td { padding: 12px 14px; }
}

/* ── Demo request page ── */
.foot-slim .foot-legal { margin-top: 0; border-top: 0; }
.foot-slim { padding-top: 0; }
.foot-slim .foot-legal { padding-top: 32px; padding-bottom: 36px; }
.demo-page { padding-bottom: 120px; }
.demo-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 64px; align-items: start; }
.demo-copy .h-display { max-width: 12ch; }
.demo-steps { display: flex; flex-direction: column; gap: 20px; margin-top: 40px; padding-top: 28px; border-top: 1px solid var(--line); }
.demo-steps li { display: flex; gap: 16px; }
.demo-step-n { flex: none; width: 28px; font-family: var(--tag); font-size: 12px; letter-spacing: 1px; color: var(--brand-blue); padding-top: 3px; }
.demo-step-t { font-weight: 500; color: var(--ink); }
.demo-steps .t-small { margin-top: 2px; color: var(--muted); }
.demo-direct { margin-top: 32px; color: var(--muted); }
.demo-direct a, .demo-consent a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.demo-card { position: relative; padding: 36px; border-radius: 16px; background: #fff; border: 1px solid var(--line); box-shadow: 0 1px 2px rgba(22, 21, 19, .04), 0 24px 48px -24px rgba(22, 21, 19, .18); }
.demo-form { display: flex; flex-direction: column; gap: 18px; }
.demo-form[hidden] { display: none; }
.demo-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.demo-field { display: flex; flex-direction: column; gap: 8px; min-width: 0; border: 0; padding: 0; margin: 0; }
.demo-field > span, .demo-field legend { font-size: 13px; font-weight: 500; color: var(--ink-2); }
.demo-field legend { margin-bottom: 8px; }
.demo-field em { font-style: normal; font-weight: 400; color: var(--muted); }
.demo-field input, .demo-field select, .demo-field textarea { width: 100%; padding: 11px 13px; border: 1px solid rgba(22, 21, 19, .18); border-radius: 8px; background: #FCFBF9; font: inherit; font-size: 15px; color: var(--ink); transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease; }
.demo-field select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M3 4.5l3 3 3-3' fill='none' stroke='%236F6B62' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; padding-right: 34px; }
.demo-field textarea { resize: vertical; min-height: 96px; }
.demo-field input:focus, .demo-field select:focus, .demo-field textarea:focus { outline: none; border-color: var(--brand-blue); background: #fff; box-shadow: 0 0 0 3px rgba(108, 158, 171, .22); }
.demo-field.is-invalid input, .demo-field.is-invalid select { border-color: #b4472f; box-shadow: 0 0 0 3px rgba(180, 71, 47, .12); }
.demo-chips { flex-direction: row; flex-wrap: wrap; gap: 8px; }
.demo-chips legend { width: 100%; }
.demo-chips label { position: relative; cursor: pointer; }
.demo-chips input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.demo-chips label span { display: inline-flex; align-items: center; padding: 8px 14px; border-radius: 999px; border: 1px solid rgba(22, 21, 19, .18); font-size: 14px; color: var(--ink-2); background: #FCFBF9; transition: background-color .15s ease, border-color .15s ease, color .15s ease; }
.demo-chips input:checked + span { background: var(--ink); border-color: var(--ink); color: var(--cream); }
.demo-chips input:focus-visible + span { box-shadow: 0 0 0 3px rgba(108, 158, 171, .35); }
.demo-hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.demo-consent { color: var(--muted); }
.demo-submit { background: var(--ink); color: var(--cream); align-self: stretch; justify-content: center; padding-block: 14px; font-size: 15px; cursor: pointer; border: 0; }
.demo-submit:disabled { opacity: .6; cursor: progress; }
.demo-error { color: #b4472f; }
.demo-error a { color: inherit; text-decoration: underline; }
.demo-done { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; padding: 24px 4px; outline: none; animation: demo-in .5s cubic-bezier(.2, .7, .2, 1); }
.demo-done[hidden] { display: none; }
.demo-done-mark { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; background: rgba(108, 158, 171, .18); color: #3f6f7b; }
.demo-done .t-body { color: var(--muted); }
.demo-back { margin-top: 8px; font-weight: 500; color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
@keyframes demo-in { from { opacity: 0; transform: translateY(8px); } }
@media (max-width: 1023px) {
  .demo-grid { grid-template-columns: 1fr; gap: 40px; }
  .demo-page { padding-bottom: 72px; }
}
@media (max-width: 599px) {
  .demo-card { padding: 22px; border-radius: 12px; }
  .demo-row { grid-template-columns: 1fr; }
}

/* ── Exchange pages (Nasdaq, NYSE) ── */
.ex-hero .h-display { max-width: 18ch; }
.ex-ctas { display: flex; align-items: center; gap: 24px; margin-top: 32px; }
.ex-btn { background: var(--ink); color: var(--cream); }
.ex-link { font-weight: 500; color: var(--ink); text-decoration: underline; text-underline-offset: 4px; text-decoration-color: rgba(22, 21, 19, .3); }
.ex-points { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 48px; }
.ex-point { padding: 28px; border-radius: 12px; border: 1px solid var(--line); background: var(--white-soft); }
.pg-section-alt .ex-point { background: var(--cream); }
.ex-point-n { font-family: var(--tag); font-size: 12px; letter-spacing: 1px; color: var(--brand-blue); }
.ex-point .h-3 { margin-top: 16px; color: var(--ink); }
.ex-point .t-body { margin-top: 12px; color: var(--muted); }
.ex-checks .tc-control .t-body { margin-top: 12px; color: var(--muted); font-size: 15px; line-height: 1.55; }
.ex-math { border-radius: 12px; border: 1px solid var(--line); background: var(--cream); padding: 8px 24px 20px; }
.ex-math-row { display: flex; justify-content: space-between; gap: 24px; padding: 16px 0; border-bottom: 1px solid var(--line); font-size: 16px; color: var(--muted); }
.ex-math-row b { font-weight: 500; color: var(--ink); text-align: right; font-variant-numeric: tabular-nums; }
.ex-math-total b { font-size: 20px; color: #3f6f7b; }
.ex-math-note { margin-top: 16px; color: var(--muted); }
.pg-section-dark { background: var(--dark); border-top: 0; }
.ex-quote p { max-width: 900px; color: var(--cream); }
.ex-quote footer { margin-top: 16px; color: var(--muted-dark); }
.ex-reading { border-top: 1px solid var(--line); }
.ex-reading a { display: flex; justify-content: space-between; gap: 16px; padding: 18px 0; border-bottom: 1px solid var(--line); font-size: 17px; font-weight: 500; color: var(--ink); transition: opacity .2s ease; }
.ex-reading a:hover { opacity: .6; }
@media (max-width: 1023px) {
  .ex-points { grid-template-columns: 1fr; }
}
@media (max-width: 599px) {
  .ex-ctas { flex-direction: column; align-items: flex-start; gap: 16px; }
  .ex-math { padding: 4px 16px 16px; }
  .ex-math-row { flex-direction: column; gap: 4px; }
  .ex-math-row b { text-align: left; }
}

/* ── News (blog) ── */
.news-hero { padding-bottom: 48px; }
.news-list-wrap { padding: 0 0 112px; }
.news-list { border-top: 1px solid var(--line); }
.news-row { display: grid; grid-template-columns: 120px minmax(0, 1fr) 80px; gap: 32px; align-items: baseline; padding: 28px 0; border-bottom: 1px solid var(--line); color: var(--ink); }
.news-date, .news-tag { font-size: 13px; font-weight: 500; color: var(--muted); }
.news-tag { text-align: right; font-family: var(--tag); letter-spacing: 1px; text-transform: uppercase; font-size: 11px; }
.news-title { display: block; font-size: 22px; line-height: 1.3; font-weight: 500; letter-spacing: -0.2px; color: var(--ink); }
.news-excerpt { display: block; margin-top: 8px; max-width: 70ch; font-size: 15px; line-height: 1.55; color: var(--muted); }
.news-row:hover .news-title { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.post { padding: 152px 0 72px; }
.post-wrap { max-width: calc(760px + 2 * var(--pad)); }
.post-back { font-size: 14px; font-weight: 500; color: var(--muted); }
.post-back:hover { color: var(--ink); }
.post-meta { display: flex; gap: 16px; margin-top: 32px; font-size: 13px; font-weight: 500; color: var(--muted); }
.post-meta span { font-family: var(--tag); font-size: 11px; letter-spacing: 1px; text-transform: uppercase; padding-top: 2px; }
.post-title { margin-top: 16px; font-size: clamp(34px, 4.4vw, 52px); line-height: 1.08; }
.post-body { margin-top: 48px; max-width: none; }
.post-body h2 { margin: 48px 0 14px; font-size: 26px; line-height: 1.25; font-weight: 500; letter-spacing: -0.3px; color: var(--ink); }
.post-body h3 { margin: 32px 0 10px; font-size: 20px; line-height: 1.3; font-weight: 500; color: var(--ink); }
.post-body h4, .post-body h5 { margin: 24px 0 8px; font-size: 17px; font-weight: 600; color: var(--ink); }
.post-body p, .post-body li { font-size: 17px; line-height: 1.7; color: var(--ink-2); }
.post-body p + p { margin-top: 16px; }
.post-body ul, .post-body ol { display: flex; flex-direction: column; gap: 8px; margin: 16px 0; padding-left: 22px; }
.post-body ol { list-style: decimal; }
.post-body strong { font-weight: 600; color: var(--ink); }
.post-body a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(22, 21, 19, .35); }
.post-body > :first-child { margin-top: 0; }
.post-more { background: var(--white-soft); }
.post-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 24px; }
.post-card { display: flex; flex-direction: column; gap: 12px; padding: 24px; border-radius: 12px; border: 1px solid var(--line); background: var(--cream); transition: border-color .2s ease; }
.post-card:hover { border-color: rgba(22, 21, 19, .35); }
.post-card-date { font-size: 13px; color: var(--muted); }
.post-card-title { font-size: 17px; line-height: 1.4; font-weight: 500; color: var(--ink); }
@media (max-width: 767px) {
  .news-row { grid-template-columns: 1fr; gap: 8px; }
  .news-tag { text-align: left; }
  .news-title { font-size: 19px; }
  .post { padding-top: 120px; }
  .post-cards { grid-template-columns: 1fr; }
  .post-body p, .post-body li { font-size: 16px; }
}

/* Product demo video */
.demo-video { position: relative; display: block; width: 100%; aspect-ratio: 16 / 9; border-radius: 8px; background: #fff; object-fit: cover; box-shadow: 0 1px 2px rgba(22, 21, 19, .08), 0 18px 40px -18px rgba(22, 21, 19, .3); }
/* Nasdaq commercial-case cards: animated mock on top, one line of text */
.ex-points-vis .ex-point { padding: 16px 16px 24px; }
.ex-vis { container-type: inline-size; aspect-ratio: 16 / 11; padding: 14px; border-radius: 8px; background: linear-gradient(160deg, #DEE9EC, #F1EBE3); }
.ex-vis .slot.mock { height: 100%; }
.ex-points-vis .ex-point .h-3 { margin-top: 20px; padding-inline: 8px; }
.ex-points-vis .ex-point .t-body { margin-top: 6px; padding-inline: 8px; }
.mk-av-finn { background: var(--brand-blue); }