/* Fonts: same files the current termblocks.com self-hosts (both SIL Open Font License) */
@font-face { font-family: Figtree; font-style: normal; font-weight: 300 900; font-display: swap; src: url("/assets/fonts/figtree-latin.woff2") format("woff2"); }
@font-face { font-family: Merriweather; font-style: normal; font-weight: 300 400; font-display: swap; src: url("/assets/fonts/merriweather-latin.woff2") format("woff2"); }

:root {
  --navy: #210347;
  --navy-2: #31036b;
  --sky: #5212a2;
  --sky-soft: #eaeefe;
  --ink: #3c3c38;
  --muted: #61605a;
  --line: #e1dfdb;
  --bg: #ffffff;
  --bg-alt: #f8f7f6;
  --tbd-bg: #fff3c4;
  --tbd-ink: #7a5a00;
  --radius: 12px;
  --max: 1120px;
  --font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font);
  color: var(--ink);
  background: var(--bg);
  line-height: 1.6;
  font-size: 17px;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; }
h1, h2, h3, h4 { line-height: 1.2; margin: 0 0 .5em; letter-spacing: -0.015em; }
h1 { font-size: clamp(2.2rem, 5vw, 3.6rem); font-weight: 700; }
h2 { font-size: clamp(1.7rem, 3.2vw, 2.4rem); font-weight: 700; }
h3 { font-size: 1.2rem; font-weight: 650; }
p { margin: 0 0 1em; }

.container { max-width: var(--max); margin: 0 auto; padding: 0 24px; }
.skip { position: absolute; left: -9999px; }
.skip:focus { left: 16px; top: 16px; background: #fff; padding: 8px 12px; z-index: 100; }

/* Placeholder marker — must be gone before launch (see scripts/check-launch.js) */
.tbd {
  background: var(--tbd-bg);
  color: var(--tbd-ink);
  border-radius: 4px;
  padding: 0 4px;
  font-weight: 600;
}

/* Header */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255,255,255,.94);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
}
.nav { display: flex; align-items: center; justify-content: space-between; height: 68px; gap: 24px; }
.brand { display: flex; align-items: center; text-decoration: none; }
.brand img { height: 26px; width: auto; }
.site-footer .brand img { height: 28px; }
.nav-links { display: flex; align-items: center; gap: 28px; list-style: none; margin: 0; padding: 0; }
.nav-links a { text-decoration: none; color: var(--muted); font-weight: 550; font-size: .95rem; }
.nav-links a:hover, .nav-links a[aria-current="page"] { color: var(--navy); }
.has-menu { position: relative; }
.menu {
  display: none; position: absolute; top: 100%; left: -16px; min-width: 280px;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: 0 12px 32px rgba(33,3,71,.12); padding: 8px; list-style: none; margin: 0;
}
.has-menu:hover .menu, .has-menu:focus-within .menu { display: block; }
.menu a { display: block; padding: 10px 12px; border-radius: 8px; color: var(--ink); }
.menu a:hover { background: var(--bg-alt); }
.menu small { display: block; color: var(--muted); font-weight: 400; font-size: .82rem; }
.nav-cta { display: flex; gap: 12px; align-items: center; }
.menu-toggle { display: none; background: none; border: 1px solid var(--line); border-radius: 8px; padding: 6px 10px; font: inherit; cursor: pointer; }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 12px 20px; border-radius: 10px; font-weight: 650; font-size: .95rem;
  text-decoration: none; border: 1px solid transparent; cursor: pointer; font-family: inherit;
}
.btn-primary { background: var(--navy); color: #fff; }
.btn-primary:hover { background: var(--navy-2); }
.btn-ghost { border-color: var(--line); color: var(--navy); background: #fff; }
.btn-ghost:hover { border-color: var(--navy); }
.btn-light { background: #fff; color: var(--navy); }

/* Sections */
section { padding: 88px 0; }
.alt { background: var(--bg-alt); }
.dark { background: var(--navy); color: #fff; }
.dark p, .dark .lede { color: #dfcaf9; }
.dark .eyebrow { color: #c89efc; }
.eyebrow { text-transform: uppercase; letter-spacing: .1em; font-size: .78rem; font-weight: 700; color: var(--sky); margin-bottom: 12px; display: block; }
.lede { font-size: 1.2rem; color: var(--muted); max-width: 720px; }
.center { text-align: center; }
.center .lede { margin-left: auto; margin-right: auto; }
.section-head { margin-bottom: 48px; }

/* Hero */
.hero { padding: 96px 0 72px; background: radial-gradient(1200px 500px at 80% -10%, var(--sky-soft), transparent 60%); }
.hero h1 { max-width: 900px; }
.hero .lede { margin-bottom: 32px; }
.hero-ctas { display: flex; gap: 12px; flex-wrap: wrap; }
.page-hero { padding: 80px 0 56px; background: linear-gradient(180deg, var(--sky-soft), #fff); }
.breadcrumb { font-size: .88rem; color: var(--muted); margin-bottom: 16px; }
.breadcrumb a { color: var(--muted); }

/* Metrics */
.metrics { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 56px; }
.metric { border: 1px solid var(--line); border-radius: var(--radius); padding: 24px; background: #fff; }
.metric strong { display: block; font-size: 2rem; color: var(--navy); line-height: 1.1; margin-bottom: 6px; }
.metric span { color: var(--muted); font-size: .92rem; }
.dark .metric { background: var(--navy-2); border-color: #5212a2; }
.dark .metric strong { color: #fff; }

/* Logos */
.logos { display: grid; grid-template-columns: repeat(6, 1fr); gap: 16px; align-items: center; }
.logo-slot {
  height: 64px; border: 1px dashed #c1bdb7; border-radius: 10px;
  display: grid; place-items: center; color: var(--muted); font-size: .8rem; text-align: center; padding: 6px;
}
.logos-label { text-align: center; color: var(--muted); font-size: .9rem; margin-bottom: 20px; }

/* Cards */
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.card { border: 1px solid var(--line); border-radius: var(--radius); padding: 28px; background: #fff; }
.card p { color: var(--muted); margin-bottom: 0; }
.card .num { font-weight: 700; color: var(--sky); font-size: .85rem; margin-bottom: 8px; display: block; }
a.card { text-decoration: none; transition: border-color .15s, transform .15s; display: block; }
a.card:hover { border-color: var(--navy); transform: translateY(-2px); }
.card .more { color: var(--navy); font-weight: 650; margin-top: 16px; display: inline-block; }
.dark .card { background: var(--navy-2); border-color: #5212a2; }
.dark .card p { color: #dfcaf9; }

/* Split */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.checks { list-style: none; padding: 0; margin: 0; }
.checks li { padding-left: 30px; position: relative; margin-bottom: 12px; }
.checks li::before { content: ""; position: absolute; left: 0; top: 7px; width: 16px; height: 16px; border-radius: 50%; background: var(--sky); box-shadow: inset 0 0 0 4px var(--sky-soft); }

/* Mock product panel */
.panel { border: 1px solid var(--line); border-radius: var(--radius); background: #fff; box-shadow: 0 20px 48px rgba(33,3,71,.08); overflow: hidden; font-size: .9rem; }
.panel-head { background: var(--bg-alt); border-bottom: 1px solid var(--line); padding: 12px 16px; font-weight: 650; display: flex; justify-content: space-between; }
.panel-head span { color: var(--muted); font-weight: 500; }
.panel-row { display: grid; grid-template-columns: 1fr auto; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--line); }
.panel-row:last-child { border-bottom: 0; }
.panel-row small { display: block; color: var(--muted); }
.pill { font-size: .75rem; font-weight: 700; padding: 3px 10px; border-radius: 999px; align-self: center; white-space: nowrap; }
.pill-ok { background: #eaeefe; color: #1a34a8; }
.pill-flag { background: #ffdad2; color: #a02307; }
.pill-info { background: var(--sky-soft); color: #5212a2; }

/* Comparison table */
.compare { width: 100%; border-collapse: collapse; background: #fff; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); }
.compare th, .compare td { padding: 14px 18px; text-align: left; border-bottom: 1px solid var(--line); vertical-align: top; }
.compare th { background: var(--bg-alt); font-size: .85rem; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.compare td:first-child { font-weight: 600; }

/* Quote */
.quote { border-left: 4px solid var(--sky); padding: 8px 0 8px 24px; font-size: 1.25rem; max-width: 820px; }
.quote cite { display: block; font-style: normal; font-size: .95rem; color: var(--muted); margin-top: 12px; }

/* Prompts */
.prompts { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.prompt { background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 16px 18px; font-size: .95rem; }
.prompt::before { content: "› "; color: var(--sky); font-weight: 800; }

/* CTA band */
.cta-band { text-align: center; }
.cta-band h2 { margin-bottom: 12px; }
.cta-band .hero-ctas { justify-content: center; margin-top: 24px; }

/* Form */
.form { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.form label { display: block; font-weight: 600; font-size: .9rem; margin-bottom: 6px; }
.form input, .form select, .form textarea {
  width: 100%; padding: 12px 14px; border: 1px solid #d4d1cc; border-radius: 10px; font: inherit; font-size: .95rem; background: #fff;
}
.form textarea { min-height: 110px; resize: vertical; }
.form .full { grid-column: 1 / -1; }
.form-note { font-size: .85rem; color: var(--muted); }
.form-status { font-weight: 600; color: #1a34a8; }

/* Prose (legal) */
.prose { max-width: 760px; }
.prose h2 { font-size: 1.4rem; margin-top: 2em; }

/* Footer */
.site-footer { background: var(--navy); color: #dfcaf9; padding: 64px 0 32px; font-size: .92rem; }
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 32px; }
.site-footer h4 { color: #fff; font-size: .85rem; text-transform: uppercase; letter-spacing: .08em; }
.site-footer ul { list-style: none; padding: 0; margin: 0; }
.site-footer li { margin-bottom: 8px; }
.site-footer a { text-decoration: none; color: #dfcaf9; }
.site-footer a:hover { color: #fff; }
.site-footer .brand { color: #fff; margin-bottom: 12px; }
.footer-bottom { border-top: 1px solid #5212a2; margin-top: 48px; padding-top: 24px; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; }
.badge { display: inline-block; border: 1px solid #7e37d9; border-radius: 6px; padding: 4px 10px; font-size: .8rem; color: #fff; margin-top: 12px; }

/* Responsive */
@media (max-width: 960px) {
  .metrics, .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .grid-3 { grid-template-columns: 1fr 1fr; }
  .logos { grid-template-columns: repeat(3, 1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .split { grid-template-columns: 1fr; gap: 32px; }
}
@media (max-width: 760px) {
  body { font-size: 16px; }
  .container { padding: 0 16px; }
  section { padding: 64px 0; }
  .hero { padding: 64px 0 48px; }
  .menu-toggle { display: block; }
  .nav-cta { gap: 8px; }
  .nav-cta .btn-primary { padding: 9px 14px; font-size: .88rem; white-space: nowrap; }
  .nav-links, .nav-cta .btn-ghost { display: none; }
  .nav-links.open {
    display: flex; flex-direction: column; align-items: flex-start; gap: 4px;
    position: absolute; top: 68px; left: 0; right: 0; background: #fff;
    border-bottom: 1px solid var(--line); padding: 12px 16px 20px;
  }
  .nav-links.open .menu { display: block; position: static; box-shadow: none; border: 0; padding: 0 0 0 8px; }
  .grid-2, .grid-3, .prompts, .form { grid-template-columns: 1fr; }
  .metrics, .grid-4 { grid-template-columns: 1fr 1fr; }
  .compare { font-size: .85rem; }
  .compare th, .compare td { padding: 10px; }
  .footer-grid { grid-template-columns: 1fr; }
}

/* ---- Hero artwork, carried over from the current termblocks.com ---- */
@property --agc { syntax: "<color>"; inherits: true; initial-value: #dfcaf9; }
.hero--viz {
  position: relative; overflow: hidden; background: #210347; color: #fff;
  --hair: rgba(234,238,254,.20); --faint: rgba(234,238,254,.10); --lead: rgba(234,238,254,.42);
  --fg: #fff; --fg2: rgba(234,238,254,.72); --stage-bg: #210347;
  padding: 120px 0 96px; min-height: min(100vh, 860px); display: grid; align-content: center;
}
.hero--viz .container { position: relative; z-index: 2; }
.hero--viz h1 { color: var(--fg); max-width: 16ch; }
.hero--viz .lede { color: var(--fg2); max-width: 46ch; }
.hero--viz .eyebrow { color: #dfcaf9; }
.hero--viz .btn-primary { background: #fff; color: var(--navy); }
.hero--viz .btn-primary:hover { background: #f7f0ff; }
.hero--viz .btn-ghost { background: transparent; color: #fff; border-color: rgba(234,238,254,.35); }
.hero--viz .btn-ghost:hover { border-color: #fff; }
.hero--viz .metric { background: rgba(33,3,71,.72); border-color: rgba(234,238,254,.18); backdrop-filter: blur(4px); }
.hero--viz .metric strong { color: #fff; }
.hero--viz .metric span { color: var(--fg2); }
.viz { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 1; }
.viz svg { width: 100%; height: 100%; display: block; overflow: visible; }
.hair { stroke: var(--hair); stroke-width: 1; fill: none; vector-effect: non-scaling-stroke; }
.park path { fill: var(--stage-bg); stroke: var(--lead); stroke-width: 1; vector-effect: non-scaling-stroke; }
.ag { offset-rotate: 0deg; animation-name: agRun; animation-timing-function: linear; animation-iteration-count: infinite; }
.ag--loop { animation-name: agLoop; --agc: var(--c); }
.ag__hit { fill: none; }
.ag__core2 { fill: var(--agc); transform-box: fill-box; transform-origin: center center; }
.ag__halo2 { fill: var(--agc); fill-opacity: 0.4; animation-name: agBreath; animation-timing-function: ease-in-out; animation-iteration-count: infinite; transform-box: fill-box; transform-origin: center center; }
.ag__glow { opacity: 0.5; animation-timing-function: linear; animation-iteration-count: infinite; }
@keyframes agRun { 0% { offset-distance: 0%; opacity: 0; } 4% { opacity: 1; } 92% { opacity: 1; } 100% { offset-distance: 100%; opacity: 0; } }
@keyframes agLoop { 0% { offset-distance: 0%; } 100% { offset-distance: 100%; } }
@media (max-width: 1000px) { .hero--viz .viz { opacity: 0.45; } }
@media (max-width: 760px) { .hero--viz { padding: 72px 0 56px; min-height: 0; } }
@media (prefers-reduced-motion: reduce) {
  .ag, .ag__glow, .ag__halo2 { animation: none; }
  .ag { offset-distance: 62%; }
  .ag__halo2 { opacity: 1; transform: none; }
}

@keyframes agBreath { 
  0%, 100% { opacity: 0.82; transform: scale(0.94); }
  50% { opacity: 1; transform: scale(1.1); }
}
@keyframes agd0 { 
  0% { offset-distance: 0%; --agc: var(--c); }
  26.094% { offset-distance: 31.25%; --agc: var(--c); }
  27.294% { offset-distance: 31.25%; --agc: #f5f7ff; }
  30.394% { offset-distance: 31.25%; --agc: #f5f7ff; }
  31.594% { offset-distance: 31.25%; --agc: var(--c); }
  42.031% { offset-distance: 43.75%; --agc: var(--c); }
  43.231% { offset-distance: 43.75%; --agc: #f5f7ff; }
  46.331% { offset-distance: 43.75%; --agc: #f5f7ff; }
  47.531% { offset-distance: 43.75%; --agc: var(--c); }
  60.578% { offset-distance: 59.375%; --agc: var(--c); }
  61.778% { offset-distance: 59.375%; --agc: #f5f7ff; }
  64.878% { offset-distance: 59.375%; --agc: #f5f7ff; }
  66.078% { offset-distance: 59.375%; --agc: var(--c); }
  100% { offset-distance: 100%; --agc: var(--c); }
}
@keyframes agh0 { 
  0% { opacity: 0.5; }
  26.094% { opacity: 0.5; }
  27.294% { opacity: 1; }
  30.394% { opacity: 1; }
  31.594% { opacity: 0.5; }
  42.031% { opacity: 0.5; }
  43.231% { opacity: 1; }
  46.331% { opacity: 1; }
  47.531% { opacity: 0.5; }
  60.578% { opacity: 0.5; }
  61.778% { opacity: 1; }
  64.878% { opacity: 1; }
  66.078% { opacity: 0.5; }
  100% { opacity: 0.5; }
}
@keyframes agd1 { 
  0% { offset-distance: 0%; --agc: var(--c); }
  13.917% { offset-distance: 16.667%; --agc: var(--c); }
  15.117% { offset-distance: 16.667%; --agc: #f5f7ff; }
  18.217% { offset-distance: 16.667%; --agc: #f5f7ff; }
  19.417% { offset-distance: 16.667%; --agc: var(--c); }
  65.806% { offset-distance: 72.222%; --agc: var(--c); }
  67.006% { offset-distance: 72.222%; --agc: #f5f7ff; }
  70.106% { offset-distance: 72.222%; --agc: #f5f7ff; }
  71.306% { offset-distance: 72.222%; --agc: var(--c); }
  85.222% { offset-distance: 88.889%; --agc: var(--c); }
  86.422% { offset-distance: 88.889%; --agc: #f5f7ff; }
  89.522% { offset-distance: 88.889%; --agc: #f5f7ff; }
  90.722% { offset-distance: 88.889%; --agc: var(--c); }
  100% { offset-distance: 100%; --agc: var(--c); }
}
@keyframes agh1 { 
  0% { opacity: 0.5; }
  13.917% { opacity: 0.5; }
  15.117% { opacity: 1; }
  18.217% { opacity: 1; }
  19.417% { opacity: 0.5; }
  65.806% { opacity: 0.5; }
  67.006% { opacity: 1; }
  70.106% { opacity: 1; }
  71.306% { opacity: 0.5; }
  85.222% { opacity: 0.5; }
  86.422% { opacity: 1; }
  89.522% { opacity: 1; }
  90.722% { opacity: 0.5; }
  100% { opacity: 0.5; }
}
@keyframes agd2 { 
  0% { offset-distance: 0%; --agc: var(--c); }
  0% { offset-distance: 0%; --agc: var(--c); }
  1.2% { offset-distance: 0%; --agc: #f5f7ff; }
  4.3% { offset-distance: 0%; --agc: #f5f7ff; }
  5.5% { offset-distance: 0%; --agc: var(--c); }
  29.357% { offset-distance: 28.571%; --agc: var(--c); }
  30.557% { offset-distance: 28.571%; --agc: #f5f7ff; }
  33.657% { offset-distance: 28.571%; --agc: #f5f7ff; }
  34.857% { offset-distance: 28.571%; --agc: var(--c); }
  46.786% { offset-distance: 42.857%; --agc: var(--c); }
  47.986% { offset-distance: 42.857%; --agc: #fff5f3; }
  51.086% { offset-distance: 42.857%; --agc: #fff5f3; }
  52.286% { offset-distance: 42.857%; --agc: var(--c); }
  100% { offset-distance: 100%; --agc: var(--c); }
}
@keyframes agh2 { 
  0% { opacity: 0.5; }
  0% { opacity: 0.5; }
  1.2% { opacity: 1; }
  4.3% { opacity: 1; }
  5.5% { opacity: 0.5; }
  29.357% { opacity: 0.5; }
  30.557% { opacity: 1; }
  33.657% { opacity: 1; }
  34.857% { opacity: 0.5; }
  46.786% { opacity: 0.5; }
  47.986% { opacity: 0.7; }
  51.086% { opacity: 0.7; }
  52.286% { opacity: 0.5; }
  100% { opacity: 0.5; }
}
@keyframes agd3 { 
  0% { offset-distance: 0%; --agc: var(--c); }
  26.094% { offset-distance: 31.25%; --agc: var(--c); }
  27.294% { offset-distance: 31.25%; --agc: #f5f7ff; }
  30.394% { offset-distance: 31.25%; --agc: #f5f7ff; }
  31.594% { offset-distance: 31.25%; --agc: var(--c); }
  39.422% { offset-distance: 40.625%; --agc: var(--c); }
  40.622% { offset-distance: 40.625%; --agc: #f5f7ff; }
  43.722% { offset-distance: 40.625%; --agc: #f5f7ff; }
  44.922% { offset-distance: 40.625%; --agc: var(--c); }
  55.359% { offset-distance: 53.125%; --agc: var(--c); }
  56.559% { offset-distance: 53.125%; --agc: #f5f7ff; }
  59.659% { offset-distance: 53.125%; --agc: #f5f7ff; }
  60.859% { offset-distance: 53.125%; --agc: var(--c); }
  100% { offset-distance: 100%; --agc: var(--c); }
}
@keyframes agh3 { 
  0% { opacity: 0.5; }
  26.094% { opacity: 0.5; }
  27.294% { opacity: 1; }
  30.394% { opacity: 1; }
  31.594% { opacity: 0.5; }
  39.422% { opacity: 0.5; }
  40.622% { opacity: 1; }
  43.722% { opacity: 1; }
  44.922% { opacity: 0.5; }
  55.359% { opacity: 0.5; }
  56.559% { opacity: 1; }
  59.659% { opacity: 1; }
  60.859% { opacity: 0.5; }
  100% { opacity: 0.5; }
}
@keyframes agd4 { 
  0% { offset-distance: 0%; --agc: var(--c); }
  29.667% { offset-distance: 33.333%; --agc: var(--c); }
  30.867% { offset-distance: 33.333%; --agc: #f5f7ff; }
  33.967% { offset-distance: 33.333%; --agc: #f5f7ff; }
  35.167% { offset-distance: 33.333%; --agc: var(--c); }
  79.667% { offset-distance: 83.333%; --agc: var(--c); }
  80.867% { offset-distance: 83.333%; --agc: #f5f7ff; }
  83.967% { offset-distance: 83.333%; --agc: #f5f7ff; }
  85.167% { offset-distance: 83.333%; --agc: var(--c); }
  100% { offset-distance: 100%; --agc: var(--c); }
}
@keyframes agh4 { 
  0% { opacity: 0.5; }
  29.667% { opacity: 0.5; }
  30.867% { opacity: 1; }
  33.967% { opacity: 1; }
  35.167% { opacity: 0.5; }
  79.667% { opacity: 0.5; }
  80.867% { opacity: 1; }
  83.967% { opacity: 1; }
  85.167% { opacity: 0.5; }
  100% { opacity: 0.5; }
}
@keyframes agd5 { 
  0% { offset-distance: 0%; --agc: var(--c); }
  4.639% { offset-distance: 5.556%; --agc: var(--c); }
  5.839% { offset-distance: 5.556%; --agc: #fff5f3; }
  8.939% { offset-distance: 5.556%; --agc: #fff5f3; }
  10.139% { offset-distance: 5.556%; --agc: var(--c); }
  14.778% { offset-distance: 11.111%; --agc: var(--c); }
  15.978% { offset-distance: 11.111%; --agc: #f5f7ff; }
  19.078% { offset-distance: 11.111%; --agc: #f5f7ff; }
  20.278% { offset-distance: 11.111%; --agc: var(--c); }
  38.833% { offset-distance: 33.333%; --agc: var(--c); }
  40.033% { offset-distance: 33.333%; --agc: #f5f7ff; }
  43.133% { offset-distance: 33.333%; --agc: #f5f7ff; }
  44.333% { offset-distance: 33.333%; --agc: var(--c); }
  100% { offset-distance: 100%; --agc: var(--c); }
}
@keyframes agh5 { 
  0% { opacity: 0.5; }
  4.639% { opacity: 0.5; }
  5.839% { opacity: 0.7; }
  8.939% { opacity: 0.7; }
  10.139% { opacity: 0.5; }
  14.778% { opacity: 0.5; }
  15.978% { opacity: 1; }
  19.078% { opacity: 1; }
  20.278% { opacity: 0.5; }
  38.833% { opacity: 0.5; }
  40.033% { opacity: 1; }
  43.133% { opacity: 1; }
  44.333% { opacity: 0.5; }
  100% { opacity: 0.5; }
}
.metric strong .tbd { color: var(--tbd-ink); }

/* Hero typewriter tagline */
.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; }
.hero--viz h1.typed-h1 { max-width: none; }
.typed { display: block; min-height: 1.2em; color: #dfcaf9; white-space: nowrap; }
.typed::after { content: ""; display: inline-block; width: 3px; height: .9em; margin-left: 4px; background: currentColor; vertical-align: -0.08em; animation: caret 1s steps(1) infinite; }
@keyframes caret { 50% { opacity: 0; } }
@media (max-width: 760px) { .typed { white-space: normal; min-height: 2.4em; } }
@media (prefers-reduced-motion: reduce) { .typed::after { animation: none; } }

/* ---- Typography: same fonts as the current termblocks.com (Figtree + Merriweather) ---- */
:root { --font: "Figtree", -apple-system, system-ui, "Segoe UI", sans-serif; --serif: "Merriweather", Georgia, "Times New Roman", serif; }
body { font-family: var(--font); }
h1, h2 { font-family: var(--serif); letter-spacing: -0.02em; }
h1 { font-weight: 300; line-height: 1.16; }
h2 { font-weight: 400; line-height: 1.28; }
h3 { font-family: var(--font); font-weight: 600; letter-spacing: -0.005em; }
.metric strong { font-family: var(--serif); font-weight: 400; }
.quote { font-family: var(--serif); font-weight: 300; }

/* ---- Homepage: header sits transparent over the dark hero, turns solid on scroll ---- */
.site-header--over { position: fixed; left: 0; right: 0; background: transparent; border-bottom-color: transparent; backdrop-filter: none; transition: background .25s, border-color .25s; }
.site-header--over .logo-dark { display: none; }
.site-header--over .nav-links a { color: rgba(234,238,254,.82); }
.site-header--over .nav-links a:hover { color: #fff; }
.site-header--over .btn-ghost { background: transparent; color: #fff; border-color: rgba(234,238,254,.35); }
.site-header--over .btn-primary { background: #fff; color: var(--navy); }
.site-header--over .menu-toggle { color: #fff; border-color: rgba(234,238,254,.35); }
.site-header--over .menu a { color: var(--ink); }
.site-header--over.is-scrolled { background: rgba(255,255,255,.96); border-bottom-color: var(--line); backdrop-filter: blur(8px); }
.site-header--over.is-scrolled .logo-dark { display: block; }
.site-header--over.is-scrolled .logo-light { display: none; }
.site-header--over.is-scrolled .nav-links a { color: var(--muted); }
.site-header--over.is-scrolled .nav-links a:hover { color: var(--navy); }
.site-header--over.is-scrolled .btn-ghost { color: var(--navy); border-color: var(--line); background: #fff; }
.site-header--over.is-scrolled .btn-primary { background: var(--navy); color: #fff; }
.site-header--over.is-scrolled .menu-toggle { color: var(--ink); border-color: var(--line); }

.hero--viz { min-height: 100vh; min-height: 100svh; padding: 140px 0 96px; align-content: center; }
.hero--viz h1.typed-h1 { font-size: clamp(2.3rem, 4.6vw, 3.6rem); }
.hero--viz .lede { font-size: 1.1rem; }
.typed { color: #dfcaf9; }
.metrics-band { padding: 56px 0; border-bottom: 1px solid var(--line); }
.metrics-band .metrics { margin-top: 0; }
@media (max-width: 760px) {
  .hero--viz { min-height: min(100svh, 720px); padding: 112px 0 64px; }
  .site-header--over .nav-links.open { background: #fff; }
  .site-header--over .nav-links.open a { color: var(--ink); }
}
.hero--viz .container { width: 100%; }

/* Use-case grid: five across on desktop */
.grid-uc { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; }
.grid-uc .card { padding: 24px; }
@media (max-width: 1100px) { .grid-uc { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 760px) { .grid-uc { grid-template-columns: 1fr; } }
a.card { display: flex; flex-direction: column; }
a.card .more { margin-top: auto; padding-top: 16px; }

/* ===== Warm pages (Security, About) — matches the current termblocks.com ===== */
.page-warm { background: #f8f7f6; }
.page-warm .alt, .page-warm section { background: transparent; }
.page-warm .dark { background: var(--navy); }
.warm-hero { padding: 120px 0 48px; }
.warm-hero h1 { font-size: clamp(2.2rem, 4.2vw, 3.2rem); margin-bottom: 20px; }
.warm-hero .lede { max-width: 640px; font-size: 1.05rem; }
.warm-section { padding: 48px 0 88px; border-top: 1px solid #ebeae7; }
.warm-hero + .warm-section { border-top: 0; padding-top: 24px; }

.num-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid #e1dfdb; }
.num-list li { display: grid; grid-template-columns: 64px 1fr 1.25fr; gap: 24px; align-items: baseline; padding: 32px 0; border-bottom: 1px solid #e1dfdb; }
.num-list__n { font-size: .8rem; color: var(--muted); letter-spacing: .05em; }
.num-list h3 { font-family: var(--serif); font-weight: 400; font-size: 1.15rem; margin: 0; }
.num-list p { margin: 0; color: var(--muted); }
.soc2-card { margin-top: 56px; display: flex; gap: 32px; align-items: center; background: #210347; color: #fff; border-radius: 16px; padding: 40px; }
.soc2-card img { width: 96px; height: 96px; flex: none; }
.soc2-card h2 { color: #fff; font-size: 1.6rem; }
.soc2-card p { color: rgba(234,238,254,.72); max-width: 560px; }

/* About: legacy -> termblocks ledger */
.ledger { margin: 48px 0; background: #fff; border: 1px solid #e1dfdb; border-radius: 14px; box-shadow: 0 24px 60px rgba(33,3,71,.08); overflow: hidden; }
.ledger__bar { display: flex; align-items: center; gap: 6px; padding: 12px 16px; border-bottom: 1px solid #ebeae7; font-size: .75rem; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.ledger__bar i { width: 9px; height: 9px; border-radius: 50%; background: #d4d1cc; }
.ledger__bar span { margin-left: 8px; }
.ledger__table { position: relative; padding: 8px 24px 16px; }
.ledger__row { position: relative; z-index: 1; display: grid; grid-template-columns: 1.3fr .9fr 1.1fr .8fr .8fr .7fr 1fr; gap: 12px; align-items: center; padding: 13px 0; font-size: .82rem; color: #827f7b; min-height: 46px; }
.ledger__row--head { font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); border-bottom: 1px solid #ebeae7; }
.ledger__row.is-clean { color: var(--ink); }
.ledger__row.is-clean span:first-child { font-weight: 600; }
.ledger__row .blk { display: block; height: 10px; border-radius: 3px; background: #c1bdb7; width: 70%; }
.ledger__row .st { justify-self: start; font-size: .72rem; font-weight: 600; padding: 2px 8px; border-radius: 999px; }
.ledger__row .st::before { content: "● "; font-size: .6rem; }
.st--ok { background: #eaeefe; color: #1a34a8; }
.st--err { background: #ffdad2; color: #a02307; }
.ledger__scan { position: absolute; left: 0; right: 0; top: 0; opacity: 0; background: linear-gradient(90deg, rgba(222,200,249,.0), rgba(222,200,249,.55), rgba(222,200,249,.0)); transition: transform .45s ease, opacity .3s; pointer-events: none; }
.about-copy { display: grid; grid-template-columns: 1fr 1fr; gap: 24px 56px; align-items: start; }
.about-lead { font-family: var(--serif); font-weight: 300; font-size: 1.5rem; line-height: 1.4; color: var(--ink); }
.about-copy p:not(.about-lead) { color: var(--muted); }
.about-copy .btn { grid-column: 2; justify-self: start; }

.team { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px 24px; }
.member { margin: 0; }
.member__photo { aspect-ratio: 1; border-radius: 12px; background: #ebeae7; display: grid; place-items: center; margin-bottom: 12px; font-size: .75rem; }
.member__name { font-weight: 600; margin: 0; }
.member__role { margin: 2px 0 0; color: var(--muted); font-size: .9rem; }
.logo-band { padding: 28px 0; border-top: 1px solid #e1dfdb; display: grid; grid-template-columns: 260px 1fr; gap: 24px; align-items: center; }
.logo-band .eyebrow { margin: 0; color: var(--muted); }
.logo-row { display: flex; gap: 48px; align-items: center; flex-wrap: wrap; }
.logo-row img { width: auto; filter: grayscale(1); }
.angels { margin: 0; color: var(--ink); font-size: 1.05rem; }

/* ===== Platform page — Prismera-style template ===== */
.pf-hero { background: #210347; color: #fff; padding: 170px 0 110px; }
.pf-hero h1 { color: #fff; max-width: 15ch; }
.pf-hero .lede { color: rgba(234,238,254,.72); margin-bottom: 32px; }
.pf-hero .eyebrow, .pf-dark .eyebrow { color: #dfcaf9; }
.pf-hero .btn-primary { background: #fff; color: var(--navy); }
.pf-hero .btn-ghost { background: transparent; color: #fff; border-color: rgba(234,238,254,.35); }
.pf-dark { background: #1c013f; color: #fff; border-top: 1px solid #31036b; }
.pf-dark--alt { background: #210347; }
.pf-dark h2 { color: #fff; }
.pf-dark .lede { color: rgba(234,238,254,.65); }
.pf-tabs { display: grid; grid-template-columns: 340px 1fr; gap: 40px; align-items: start; }
.pf-tablist { display: flex; flex-direction: column; gap: 4px; }
.pf-tab { position: relative; display: flex; gap: 14px; text-align: left; background: none; border: 0; color: rgba(234,238,254,.55); padding: 16px 12px 18px; border-radius: 10px; cursor: pointer; font: inherit; overflow: hidden; }
.pf-tab svg { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; margin-top: 2px; }
.pf-tab strong { display: block; color: rgba(255,255,255,.75); font-weight: 600; margin-bottom: 4px; }
.pf-tab small { display: block; font-size: .85rem; line-height: 1.5; }
.pf-tab.is-active { background: rgba(255,255,255,.05); color: rgba(234,238,254,.8); }
.pf-tab.is-active strong { color: #fff; }
.pf-progress { position: absolute; left: 12px; right: 12px; bottom: 6px; height: 2px; background: rgba(255,255,255,.08); border-radius: 2px; }
.pf-tab.is-active .pf-progress::after { content: ""; position: absolute; inset: 0; background: #dfcaf9; border-radius: 2px; transform-origin: left; animation: pfprog 6s linear forwards; }
@keyframes pfprog { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.mk { background: #31036b; border: 1px solid #5212a2; border-radius: 14px; overflow: hidden; font-size: .88rem; box-shadow: 0 30px 80px rgba(0,0,0,.35); }
.mk-head { display: flex; justify-content: space-between; gap: 12px; padding: 14px 18px; border-bottom: 1px solid #5212a2; font-weight: 600; color: #fff; }
.mk-head span { color: rgba(234,238,254,.55); font-weight: 400; }
.mk-row { display: grid; grid-template-columns: 1fr auto auto; gap: 14px; align-items: center; padding: 12px 18px; border-bottom: 1px solid rgba(223,202,249,.12); color: #fff; animation: mkin .4s ease both; }
.mk-row:last-child { border-bottom: 0; }
.mk-row small { display: block; color: rgba(234,238,254,.5); font-size: .78rem; margin-top: 2px; }
.mk-meta { color: rgba(234,238,254,.5); font-size: .8rem; }
.mk-val { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .85rem; color: #dfcaf9; }
.pf-panel.is-active .mk-row:nth-child(3) { animation-delay: .08s; } .pf-panel.is-active .mk-row:nth-child(4) { animation-delay: .16s; }
.pf-panel.is-active .mk-row:nth-child(5) { animation-delay: .24s; } .pf-panel.is-active .mk-row:nth-child(6) { animation-delay: .32s; }
.pf-panel.is-active .mk-row:nth-child(7) { animation-delay: .4s; } .pf-panel.is-active .mk-row:nth-child(8) { animation-delay: .48s; }
@keyframes mkin { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.mk-note { margin: 10px 2px 0; font-size: .8rem; color: rgba(234,238,254,.45); }
.mk-light { background: #fff; border-color: var(--line); box-shadow: 0 20px 48px rgba(33,3,71,.08); }
.mk-light .mk-head { color: var(--ink); border-color: var(--line); }
.mk-light .mk-head span, .mk-light .mk-meta, .mk-light .mk-row small { color: var(--muted); }
.mk-light .mk-row { color: var(--ink); border-color: var(--line); }

.ask { max-width: 820px; margin: 0 auto; }
.ask-tabs { display: flex; justify-content: center; gap: 28px; margin-bottom: 24px; }
.ask-tab { background: none; border: 0; color: rgba(234,238,254,.55); font: inherit; font-size: .92rem; padding: 6px 2px; cursor: pointer; border-bottom: 2px solid transparent; }
.ask-tab.is-active { color: #fff; border-bottom-color: #fff; }
.ask-box { background: #fff; color: var(--ink); border-radius: 14px; padding: 20px 20px 14px; box-shadow: 0 0 0 4px rgba(255,255,255,.12), 0 30px 80px rgba(0,0,0,.4); }
.ask-input { min-height: 56px; font-size: 1rem; }
.ask-caret { display: inline-block; width: 2px; height: 1.1em; background: var(--ink); vertical-align: -0.2em; margin-left: 1px; animation: caret 1s steps(1) infinite; }
.ask-bar { display: flex; justify-content: space-between; align-items: center; }
.ask-icons { color: var(--muted); font-size: .85rem; }
.btn-sm { padding: 8px 14px; font-size: .85rem; }
.ask-answer { margin-top: 20px; }

@media (max-width: 960px) {
  .pf-tabs { grid-template-columns: 1fr; }
  .team { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 760px) {
  .warm-hero { padding: 96px 0 32px; }
  .num-list li { grid-template-columns: 40px 1fr; }
  .num-list li p { grid-column: 2; }
  .soc2-card { flex-direction: column; align-items: flex-start; padding: 28px; }
  .about-copy { grid-template-columns: 1fr; }
  .about-copy .btn { grid-column: 1; }
  .team { grid-template-columns: 1fr 1fr; }
  .logo-band { grid-template-columns: 1fr; }
  .ledger__table { padding: 4px 12px 12px; overflow-x: auto; }
  .ledger__row { grid-template-columns: repeat(7, minmax(70px, 1fr)); min-width: 560px; font-size: .75rem; }
  .pf-hero { padding: 120px 0 72px; }
  .mk-row { grid-template-columns: 1fr auto; }
  .mk-row .mk-meta { display: none; }
  .ask-tabs { gap: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .pf-tab.is-active .pf-progress::after, .mk-row { animation: none; }
}
.cta-band .lede { margin-left: auto; margin-right: auto; }

/* ======================================================================
   BRAND FOUNDATION (claude/brand-foundation.md) — palette + typography
   Colors: only the Termblocks tonal palette. Type: Merriweather Light for
   every heading, Figtree 17.5px body, 0.8rem subtext.
   ====================================================================== */
:root {
  /* Primary (purple) */ --p10:#1c013f; --p20:#210347; --p30:#31036b; --p40:#5212a2; --p50:#7e37d9; --p60:#a96ef5; --p70:#c89efc; --p80:#dfcaf9; --p90:#f7f0ff;
  /* Secondary (blue) */ --s10:#00136a; --s20:#1a34a8; --s30:#3250d7; --s40:#5770e1; --s50:#8b9def; --s60:#b7c3f9; --s70:#d5dcfb; --s80:#eaeefe; --s90:#f5f7ff;
  /* Tertiary (accent) */ --t10:#641605; --t20:#a02307; --t30:#d43a17; --t40:#f8522d; --t50:#fb7253; --t60:#ff9b84; --t70:#ffc0b2; --t80:#ffdad2; --t90:#fff5f3;
  /* Neutrals */ --n10:#3c3c38; --n20:#61605a; --n30:#827f7b; --n40:#a09c97; --n50:#c1bdb7; --n60:#d4d1cc; --n70:#e1dfdb; --n80:#ebeae7; --n90:#f8f7f6;
  --navy: var(--p20); --navy-2: var(--p30); --sky: var(--p40); --sky-soft: var(--s80);
  --ink: var(--n10); --muted: var(--n20); --line: var(--n70); --bg: #ffffff; --bg-alt: var(--n90);
}
html { font-size: 16px; }
body { font-family: var(--font); font-size: 17.5px; color: var(--ink); }

h1, h2, h3, h4 { font-family: var(--serif); font-weight: 300; color: var(--p20); letter-spacing: -0.015em; }
h1, .hero--viz h1.typed-h1, .warm-hero h1, .pf-hero h1 { font-size: clamp(2.5rem, 6vw, 4rem); line-height: 1.15; }
h2 { font-size: clamp(2rem, 4.5vw, 3rem); line-height: 1.2; }
h3, .soc2-card h3 { font-size: clamp(1.5rem, 3vw, 2rem); line-height: 1.3; }
h4, .num-list h4 { font-size: 1.35rem; line-height: 1.35; margin: 0 0 .5em; }
.num-list h4 { margin: 0; }
.metric strong { font-family: var(--serif); font-weight: 300; font-size: 2rem; color: var(--p20); }
.quote { font-size: 1.75rem; color: var(--p20); }
.about-lead { color: var(--p20); }

/* White headings/text on Primary 20 surfaces */
.dark h1, .dark h2, .dark h3, .dark h4, .cta-band h2,
.hero--viz h1, .pf-hero h1, .pf-dark h2, .pf-dark h4, .soc2-card h3,
.dark .metric strong, .hero--viz .metric strong { color: #fff; }
.site-footer h4 { font-family: var(--font); font-weight: 600; font-size: .8rem; color: #fff; letter-spacing: .08em; }

/* Subtext: captions, labels, footnotes, sources = 0.8rem */
.eyebrow, .breadcrumb, small, figcaption .member__role, .form-note, .metric span, .panel-row small, .mk-row small, .mk-note,
.footer-bottom, .logos-label, .member__role, .num-list__n, .ask-icons, .pill, .ledger__row--head, .ledger__bar, .logo-slot,
.menu small, .card .num, .badge { font-size: .8rem; }
.eyebrow { color: var(--p40); }
.hero--viz .eyebrow, .pf-hero .eyebrow, .pf-dark .eyebrow, .dark .eyebrow { color: var(--p80); }

/* Status pills: Secondary = pass, Tertiary = exception, Primary = info */
.pill-ok, .st--ok { background: var(--s80); color: var(--s20); }
.pill-flag, .st--err { background: var(--t80); color: var(--t20); }
.pill-info { background: var(--p90); color: var(--p40); }

/* Surfaces */
.alt { background: var(--n90); }
.page-hero { background: linear-gradient(180deg, var(--s80), #fff); }
.hero { background: radial-gradient(1200px 500px at 80% -10%, var(--s80), transparent 60%); }
.hero--viz { background: var(--p20); --stage-bg: var(--p20); }
.site-footer { background: var(--p20); }
.cta-band.dark, .dark { background: var(--p20); }
.soc2-card { background: var(--p20); }
.pf-hero { background: var(--p20); }
.pf-dark { background: var(--p10); border-top-color: var(--p30); }
.pf-dark--alt { background: var(--p20); }
.mk { background: var(--p30); border-color: var(--p40); }
.mk-head { border-bottom-color: var(--p40); }
.mk-val { color: var(--p80); }
.typed { color: var(--p80); }
.typed::after { background: var(--t30); }   /* Tertiary 30 accent: the typing caret */
.btn-primary { background: var(--p20); color: #fff; }
.btn-primary:hover { background: var(--p30); }
.btn-ghost { color: var(--p20); border-color: var(--n70); }
.card .num { color: var(--p50); }
.checks li::before { background: var(--p50); box-shadow: inset 0 0 0 4px var(--p90); }
.mk-light { background: #fff; border-color: var(--line); }
.mk-light .mk-head { border-bottom-color: var(--line); }

/* Homepage client logos (bottom of page, above the closing CTA) */
.clients { padding: 72px 0; background: #fff; border-top: 1px solid var(--line); }
.clients .eyebrow { display: block; text-align: center; margin-bottom: 36px; color: var(--n20); }
.client-logos { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 40px 64px; }
.client-logos li { display: flex; align-items: center; height: 56px; }
.client-logos img { max-height: 44px; max-width: 200px; width: auto; height: auto; }
.client-logos img[alt^="Mission"], .client-logos img[alt^="Evolve"] { max-height: 56px; }
@media (max-width: 760px) {
  .client-logos { gap: 28px 36px; }
  .client-logos li { height: 44px; }
  .client-logos img { max-height: 34px; max-width: 140px; }
  .client-logos img[alt^="Mission"], .client-logos img[alt^="Evolve"] { max-height: 44px; }
}
@media (min-width: 761px) { .client-logos { gap: 40px 48px; flex-wrap: nowrap; } .client-logos img { max-width: 180px; } }
@media (min-width: 761px) and (max-width: 1100px) { .client-logos { flex-wrap: wrap; } }

/* Client logos floating at the bottom of the homepage hero (white, single color) */
.hero--viz { padding-bottom: 170px; }
.hero-logos { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: 28px 0 40px;
  background: linear-gradient(180deg, rgba(33,3,71,0), rgba(33,3,71,.85) 45%); }
.hero-logos .client-logos { justify-content: space-between; gap: 24px 40px; flex-wrap: nowrap; }
.hero-logos .client-logos li { height: 48px; }
.hero-logos .client-logos img { max-height: 38px; max-width: 170px; width: auto; height: auto; opacity: .9; }
.hero-logos .client-logos img[alt^="Mission"] { max-height: 44px; }
.hero-logos .client-logos img[alt^="Evolve"] { max-height: 42px; }
@media (max-width: 1000px) { .hero-logos .client-logos { flex-wrap: wrap; justify-content: center; } .hero--viz { padding-bottom: 230px; } }
@media (max-width: 760px) {
  .hero--viz { min-height: 0; padding-bottom: 210px; }
  .hero-logos { padding: 20px 0 28px; }
  .hero-logos .client-logos { gap: 18px 28px; }
  .hero-logos .client-logos li { height: 34px; }
  .hero-logos .client-logos img { max-height: 26px; max-width: 120px; }
  .hero-logos .client-logos img[alt^="Mission"], .hero-logos .client-logos img[alt^="Evolve"] { max-height: 32px; }
}

/* Client logo carousel: continuous loop, pauses on hover, static for reduced motion */
.marquee { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.hero-logos .marquee__track { display: flex; flex-wrap: nowrap; justify-content: flex-start; gap: 0; width: max-content; animation: marquee 30s linear infinite; }
.hero-logos .marquee__track li { padding: 0 44px; flex: none; }
.marquee:hover .marquee__track { animation-play-state: paused; }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (max-width: 1000px) { .hero-logos .marquee__track { flex-wrap: nowrap; } .hero--viz { padding-bottom: 170px; } }
@media (max-width: 760px) { .hero-logos .marquee__track li { padding: 0 26px; } .hero-logos .marquee__track { animation-duration: 22s; } .hero--viz { padding-bottom: 130px; } }
@media (prefers-reduced-motion: reduce) {
  .hero-logos .marquee__track { animation: none; width: auto; flex-wrap: wrap; justify-content: center; }
  .hero-logos .marquee__track li[aria-hidden="true"] { display: none; }
  .marquee { -webkit-mask-image: none; mask-image: none; }
}

/* Homepage hero background: Neutral 10 (#3c3c38) */
.hero--viz { background: var(--n10); --stage-bg: var(--n10); }
.hero-logos { background: linear-gradient(180deg, rgba(60,60,56,0), rgba(60,60,56,.85) 45%); }

/* Hero artwork: match current termblocks.com line weights — faint grid, bright cube stack */
.hair--faint { stroke: var(--faint); }
.hair--lead { stroke: var(--lead); }
/* Artwork ends above the logo carousel so the cube stack stays fully visible */
.hero--viz .viz { bottom: 112px; height: auto; }
.hero-logos { background: none; padding: 24px 0 36px; }
@media (max-width: 760px) { .hero--viz .viz { bottom: 84px; } .hero-logos { padding: 18px 0 26px; } }

/* Buttons, menus and links always use Figtree */
a, button, .btn, input, select, textarea, label,
.nav-links, .nav-links a, .menu, .menu a, .menu small, .menu-toggle,
.site-footer a, .breadcrumb a, .more, .ask-tab, .pf-tab, .pf-tab strong, .pf-tab small { font-family: var(--font); }

/* "One platform for the entire mortgage life cycle" — directly below the hero */
.lifecycle { padding: 96px 0 72px; background: #fff; }
.lifecycle .section-head { max-width: 820px; }
.lifecycle__steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; border-top: 1px solid var(--line); }
.lifecycle__steps li { position: relative; display: flex; flex-direction: column; padding: 32px 28px 8px 0; margin-right: 28px; }
.lifecycle__steps li::before { content: ""; position: absolute; top: -1px; left: 0; width: 48px; height: 2px; background: var(--p50); }
.lifecycle__n { font-size: .8rem; color: var(--n30); letter-spacing: .06em; margin-bottom: 14px; }
.lifecycle__steps h4 { font-size: 1.5rem; margin-bottom: 12px; }
.lifecycle__steps p { color: var(--muted); flex: 1; }
.lifecycle__steps .more { color: var(--p20); font-weight: 600; text-decoration: none; margin-top: 8px; }
.lifecycle__steps .more:hover { color: var(--p50); }
@media (max-width: 960px) { .lifecycle__steps { grid-template-columns: 1fr 1fr; row-gap: 16px; } }
@media (max-width: 760px) { .lifecycle { padding: 64px 0 48px; } .lifecycle__steps { grid-template-columns: 1fr; } .lifecycle__steps li { margin-right: 0; padding-right: 0; border-bottom: 1px solid var(--line); padding-bottom: 24px; } }

/* ===== Benefits: "Purpose-Built Beats General Purpose" stacked cards ===== */
.benefits { background: var(--n90); position: relative; }
.benefits.is-stacked { height: 300vh; }
.benefits__sticky { padding: 96px 0; }
.benefits.is-stacked .benefits__sticky { position: sticky; top: 0; height: 100vh; display: flex; align-items: center; padding: 72px 0 40px; }
.benefits__sticky > .container { width: 100%; }
.benefits__head { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 72px; }
.benefits__head h2 { margin: 0; color: var(--n10); }
.benefits__dots { display: flex; gap: 12px; padding-bottom: 14px; }
.benefits__dot { width: 34px; height: 3px; border: 0; padding: 0; border-radius: 2px; background: var(--n60); cursor: pointer; transition: background .3s; }
.benefits__dot.is-active { background: var(--n10); }
.benefits__deck { position: relative; display: grid; gap: 20px; }
.benefit { display: grid; grid-template-columns: 1fr 1.6fr; gap: 40px; align-items: center; background: #fff; border: 1px solid var(--p80);
  border-radius: 22px; padding: 56px 56px; box-shadow: 0 24px 50px rgba(0,0,0,.08); }
.benefit__icon { width: 48px; height: 48px; border-radius: 10px; display: grid; place-items: center; margin-bottom: 26px;
  background: linear-gradient(135deg, var(--s50), var(--p70)); }
.benefit__icon svg { width: 24px; height: 24px; fill: none; stroke: #fff; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.benefit h3 { margin: 0; color: var(--n10); }
.benefit p { margin: 0; color: var(--muted); line-height: 1.75; }

/* Stacked mode: one card in front, earlier cards peek out behind it */
.benefits.is-stacked .benefits__deck { display: block; height: 300px; }
.benefits.is-stacked .benefit { position: absolute; left: 0; right: 0; top: 0; min-height: 280px;
  transition: transform .6s cubic-bezier(.2,.7,.2,1), opacity .5s, background .4s; }
.benefits.is-stacked .benefit.is-active { transform: none; opacity: 1; z-index: 3; }
.benefits.is-stacked .benefit.is-past { transform: translateY(calc(var(--depth) * -26px)) scale(calc(1 - var(--depth) * .035)); z-index: calc(3 - var(--depth)); background: var(--n80); }
.benefits.is-stacked .benefit.is-past > * { opacity: 0; transition: opacity .3s; }
.benefits.is-stacked .benefit.is-next { transform: translateY(70vh); opacity: 0; z-index: 4; }

@media (max-width: 760px) {
  .benefits__head { margin-bottom: 36px; }
  .benefits__dots { display: none; }
  .benefit { grid-template-columns: 1fr; gap: 16px; padding: 32px 26px; }
  .benefit__icon { margin-bottom: 16px; }
}
.benefits__head h2, .benefit h3 { color: var(--p20); } .benefits__dot.is-active { background: var(--p20); }

/* ===== "Why clients choose Termblocks" — Every block built by experts ===== */
.why { background: var(--n80); padding: 96px 0 104px; }
.why .eyebrow { color: var(--n30); font-weight: 500; letter-spacing: .12em; }
.why h2 { margin: 0 0 64px; }
.why__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 48px 64px; }
.why__item h3 { margin: 36px 0 14px; }
.why__item p { color: var(--muted); line-height: 1.75; margin: 0; }
.wc { width: 116px; height: 116px; display: block; overflow: visible; }
.wc__win { fill: none; stroke: var(--n50); stroke-width: 1.2; }
.wc__rule { stroke: var(--n50); stroke-width: 1; }
.wc__bar { fill: var(--n30); }
.wc__soft { fill: var(--n50); }
.wc__chip { fill: var(--n90); stroke: var(--n40); stroke-width: 1; }
.wc__okdisc { fill: var(--p50); }
.wc__okcheck { fill: none; stroke: #fff; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.wc__ring { fill: none; stroke: var(--n30); stroke-width: 1.4; }
.wc__ring2 { fill: none; stroke-width: 1.6; }
.wc3__ok .wc__ring2 { stroke: var(--p50); } .wc3__ok .wc__disc { fill: var(--p50); }
.wc3__flag .wc__ring2 { stroke: var(--t30); } .wc3__flag .wc__disc { fill: var(--t30); }
/* Gentle 6s loops, matching the current site's icon behaviour */
.wc1__chip { animation: wcChip 6s ease-in-out infinite; }
.wc1__tick { animation: wcTick 6s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
@keyframes wcChip { 0%, 15% { opacity: 0; transform: translateY(6px); } 30%, 88% { opacity: 1; transform: none; } 100% { opacity: 0; } }
@keyframes wcTick { 0%, 35% { opacity: 0; transform: scale(.6); } 48%, 88% { opacity: 1; transform: none; } 100% { opacity: 0; } }
.wc2__legacy { animation: wcLegacy 6s ease-in-out infinite; }
.wc2__resolved { animation: wcResolved 6s ease-in-out infinite; }
@keyframes wcLegacy { 0%, 30% { opacity: 1; } 42%, 90% { opacity: 0; } 100% { opacity: 1; } }
@keyframes wcResolved { 0%, 34% { opacity: 0; } 46%, 88% { opacity: 1; } 98% { opacity: 0; } }
.wc3__g { opacity: 0; animation: wcRow 6s ease-in-out infinite; }
.wc3__g1 { animation-delay: .6s; } .wc3__g2 { animation-delay: 1.2s; } .wc3__g3 { animation-delay: 1.8s; }
@keyframes wcRow { 0%, 8% { opacity: 0; } 14%, 80% { opacity: 1; } 92%, 100% { opacity: 0; } }
@media (max-width: 960px) { .why__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 760px) { .why { padding: 64px 0 72px; } .why h2 { margin-bottom: 40px; } .why__grid { grid-template-columns: 1fr; } .why__item h3 { margin-top: 24px; } }
@media (prefers-reduced-motion: reduce) {
  .wc1__chip, .wc1__tick, .wc2__resolved, .wc3__g { animation: none; opacity: 1; transform: none; }
  .wc2__legacy { animation: none; opacity: 0; }
}

/* ===== "Plain English" — ask the way you'd ask any person ===== */
.plain { background: var(--n90); padding: 104px 0; }
.plain__grid { display: grid; grid-template-columns: 1fr 1.25fr; gap: 72px; align-items: center; }
.plain .eyebrow { color: var(--n30); font-weight: 500; letter-spacing: .12em; }
.plain h2 { margin-bottom: 20px; }
.plain__copy > p { color: var(--muted); max-width: 460px; }
.plain__points { list-style: none; margin: 28px 0 0; padding: 0; border-top: 1px solid var(--line); }
.plain__points li { padding: 16px 0; border-bottom: 1px solid var(--line); color: var(--muted); }
.plain__points strong { display: block; color: var(--p20); font-weight: 600; margin-bottom: 2px; }

.agent { border-radius: 16px; background: #fff; border: 1px solid var(--n70); box-shadow: 0 30px 70px rgba(33,3,71,.10); overflow: hidden; }
.agent__bar { display: flex; align-items: center; gap: 6px; padding: 12px 16px; background: var(--n80); font-size: .8rem; letter-spacing: .1em; text-transform: uppercase; color: var(--n30); }
.agent__bar i { width: 9px; height: 9px; border-radius: 50%; background: var(--n60); }
.agent__bar span { margin-left: 8px; }
.agent__body { padding: 44px 40px; background:
  radial-gradient(60% 80% at 15% 20%, var(--s80), transparent 70%),
  radial-gradient(60% 80% at 85% 85%, var(--p90), transparent 70%), #fbfaff; }
.agent__box { background: #fff; border: 1px solid var(--p80); border-radius: 12px; box-shadow: 0 0 0 5px rgba(223,202,249,.35); overflow: hidden; }
.agent__file { display: flex; align-items: center; gap: 8px; margin: 14px 16px 0; padding: 8px 12px; border: 1px solid var(--n70); border-radius: 8px; background: var(--n90); font-size: .8rem; color: var(--n10); width: max-content; max-width: calc(100% - 32px); animation: mkin .35s ease both; }
.agent__file svg { width: 16px; height: 16px; fill: none; stroke: var(--p50); stroke-width: 1.8; }
.agent__file em { font-style: normal; color: var(--s20); background: var(--s80); padding: 1px 8px; border-radius: 999px; margin-left: 4px; }
.agent__file[hidden] { display: none; }
.agent__input { min-height: 92px; padding: 16px; font-size: .95rem; color: var(--n10); }
.agent__caret { display: inline-block; width: 1.5px; height: 1.1em; background: var(--n10); vertical-align: -0.2em; margin-left: 1px; animation: caret 1s steps(1) infinite; }
.agent__tools { display: flex; align-items: center; gap: 14px; padding: 10px 12px 10px 16px; background: linear-gradient(90deg, var(--s90), var(--p90)); }
.agent__clip { width: 18px; height: 18px; fill: none; stroke: var(--n30); stroke-width: 1.6; margin-right: auto; }
.agent__sel { font-size: .8rem; color: var(--n20); }
.agent__send { width: 30px; height: 30px; border-radius: 8px; background: var(--p20); display: grid; place-items: center; }
.agent__send svg { width: 16px; height: 16px; fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

@media (max-width: 960px) { .plain__grid { grid-template-columns: 1fr; gap: 40px; } }
@media (max-width: 760px) { .plain { padding: 64px 0; } .agent__body { padding: 24px 16px; } .agent__sel:first-of-type { display: none; } }

/* ===== Homepage security grid (dark, framed 2x2) ===== */
.sec-dark { background: var(--n10); color: #fff; padding: 104px 0 112px; }
.sec-dark__head { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; margin-bottom: 56px; }
.sec-dark .eyebrow { color: rgba(234,238,254,.6); font-weight: 500; letter-spacing: .12em; }
.sec-dark h2 { color: #fff; margin: 0; }
.sec-dark .more { color: rgba(234,238,254,.82); text-decoration: none; font-weight: 600; }
.sec-dark .more:hover { color: #fff; }
.sec-grid { position: relative; display: grid; grid-template-columns: 1fr 1fr; border: 1px solid rgba(234,238,254,.14); }
.sec-grid::before { content: ""; position: absolute; inset: -11px; border: 1px solid rgba(234,238,254,.28); pointer-events: none;
  -webkit-mask: linear-gradient(#000 0 0) top/100% 1px no-repeat, linear-gradient(#000 0 0) bottom/100% 1px no-repeat, linear-gradient(#000 0 0) left/1px 100% no-repeat, linear-gradient(#000 0 0) right/1px 100% no-repeat; }
.sec-grid::after { content: ""; position: absolute; inset: -11px; pointer-events: none;
  background: linear-gradient(var(--n10), var(--n10)) center top/12px 1px no-repeat, linear-gradient(var(--n10), var(--n10)) center bottom/12px 1px no-repeat,
              linear-gradient(var(--n10), var(--n10)) left center/1px 12px no-repeat, linear-gradient(var(--n10), var(--n10)) right center/1px 12px no-repeat; }
.sec-grid__cell { padding: 64px 64px 60px; }
.sec-grid__cell:nth-child(odd) { border-right: 1px solid rgba(234,238,254,.12); }
.sec-grid__cell:nth-child(-n+2) { border-bottom: 1px solid rgba(234,238,254,.12); }
.sx { width: 112px; height: 112px; display: block; margin-bottom: 36px; }
.sx__l, .sx g { fill: none; stroke: rgba(234,238,254,.62); stroke-width: 1.3; stroke-linejoin: round; stroke-linecap: round; }
.sec-grid__cell h3 { color: #fff; font-size: clamp(1.5rem, 3vw, 2rem); margin: 0 0 14px; }
.sec-grid__cell p { color: rgba(234,238,254,.65); margin: 0; max-width: 520px; line-height: 1.7; }

/* ===== Final CTA card ===== */
.final-cta { background: var(--n90); padding: 72px 0 96px; }
.final-cta__card { background: var(--p20); border-radius: 22px; padding: 104px 32px; text-align: center; color: #fff; }
.final-cta__card h2 { color: #fff; margin: 0 0 24px; }
.final-cta__card p { color: rgba(234,238,254,.72); font-size: 1.15rem; margin: 0 0 40px; }
.final-cta__btn { background: transparent; color: #fff; border: 1px solid rgba(234,238,254,.4); padding: 14px 26px; }
.final-cta__btn:hover { border-color: #fff; background: rgba(255,255,255,.06); }

@media (max-width: 860px) {
  .sec-grid { grid-template-columns: 1fr; }
  .sec-grid__cell { padding: 44px 28px; border-right: 0 !important; border-bottom: 1px solid rgba(234,238,254,.12); }
  .sec-grid__cell:last-child { border-bottom: 0; }
  .sec-dark__head { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 760px) {
  .sec-dark { padding: 64px 0 72px; } .sec-grid::before, .sec-grid::after { inset: -7px; }
  .final-cta { padding: 48px 0 64px; } .final-cta__card { padding: 64px 22px; border-radius: 16px; }
}

/* Footer background: Neutral 10 (#3c3c38) on every page */
.site-footer { background: var(--n10); }
.footer-bottom { border-top-color: rgba(234,238,254,.16); }
.badge { border-color: rgba(234,238,254,.35); }
.site-footer, .site-footer a, .site-footer p { color: rgba(255,255,255,.72); }
.site-footer a:hover { color: #fff; }

/* Header: menu items right-aligned next to the buttons */
@media (min-width: 761px) {
  .nav { justify-content: flex-start; }
  .nav-links { margin-left: auto; margin-right: 12px; }
  .has-menu .menu { left: auto; right: -16px; }
}

/* Footer — same structure as the current termblocks.com: brand · Company · Legal & Trust */
.site-footer { padding: 88px 0 40px; font-size: 15px; }
.footer-top { display: grid; grid-template-columns: 1.6fr 1fr 1fr; gap: 40px; padding-bottom: 64px; }
.footer-brand .brand img { height: 30px; }
.footer-brand p { margin: 18px 0 0; max-width: 260px; color: rgba(234,238,254,.65); font-size: 15px; line-height: 1.6; }
.site-footer h4 { font-family: var(--font); font-size: .75rem; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: rgba(234,238,254,.5); margin: 0 0 22px; }
.site-footer li { margin-bottom: 16px; }
.site-footer ul a { color: rgba(234,238,254,.72); font-size: 15px; }
.site-footer ul a:hover { color: #fff; }
.footer-bottom { display: flex; justify-content: space-between; align-items: center; margin-top: 0; padding-top: 28px; border-top: 1px solid rgba(234,238,254,.14); color: rgba(234,238,254,.65); font-size: 14px; }
.footer-soc2 { width: 56px; height: 56px; opacity: .85; }
@media (max-width: 760px) {
  .footer-top { grid-template-columns: 1fr 1fr; gap: 36px 24px; padding-bottom: 40px; }
  .footer-brand { grid-column: 1 / -1; }
  .site-footer { padding: 64px 0 32px; }
}

/* "Turn Complexity into Clarity" / closing call-to-action backgrounds: Neutral 10 */
.final-cta__card, .cta-band.dark { background: var(--n10); }

/* "Why clients choose Termblocks" and "Plain English": one full screen each, more breathing room */
@media (min-width: 761px) {
  .why, .plain { min-height: 100vh; min-height: 100svh; display: flex; align-items: center; padding: 140px 0; }
  .why > .container, .plain > .container { width: 100%; }
  .why h2 { margin-bottom: 96px; }
  .why__grid { gap: 64px 96px; }
  .plain__grid { gap: 112px; }
}
/* Content eases in as each section scrolls into view */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity .8s ease, transform .8s cubic-bezier(.2,.7,.2,1); }
.reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } }
@media (min-width: 761px) { .why, .plain { padding: 96px 0; } }
@media (min-width: 761px) and (max-height: 820px) { .why h2 { margin-bottom: 64px; } .plain__points li { padding: 12px 0; } }

/* Homepage end: "Turn Complexity into Clarity" + footer fill exactly one screen together */
@media (min-width: 761px) {
  .final-cta { min-height: calc(100vh - var(--footer-h, 330px)); min-height: calc(100svh - var(--footer-h, 330px)); display: flex; align-items: center; padding: 56px 0; }
  .final-cta > .container { width: 100%; }
  .final-cta__card { padding: clamp(64px, 12vh, 140px) 32px; }
}
@media (min-width: 761px) {
  .site-footer { padding: 64px 0 28px; }
  .footer-top { padding-bottom: 44px; }
  .site-footer li { margin-bottom: 12px; }
  .final-cta { padding: 32px 0; }
  .final-cta__card { padding: clamp(40px, 8vh, 120px) 32px; }
  .final-cta__card h2 { margin-bottom: 18px; }
  .final-cta__card p { margin-bottom: 30px; }
}
@media (min-width: 761px) and (max-height: 840px) {
  .site-footer { padding: 44px 0 18px; }
  .footer-top { padding-bottom: 26px; }
  .site-footer li { margin-bottom: 8px; }
  .site-footer h4 { margin-bottom: 14px; }
  .footer-bottom { padding-top: 16px; }
  .footer-soc2 { width: 44px; height: 44px; }
  .final-cta { padding: 20px 0; }
  .final-cta__card { padding: 36px 32px; }
}
/* account for the fixed header so the CTA card is never hidden under it */
@media (min-width: 761px) {
  .final-cta { min-height: calc(100vh - var(--footer-h, 330px) - 68px); min-height: calc(100svh - var(--footer-h, 330px) - 68px); }
}
@media (min-width: 761px) and (max-height: 840px) {
  .final-cta { padding: 12px 0; }
  .final-cta__card { padding: 28px 32px; }
  .final-cta__card h2 { font-size: 2.4rem; margin-bottom: 12px; }
  .final-cta__card p { margin-bottom: 20px; }
}
@media (min-width: 761px) and (min-height: 841px) { .final-cta__card { padding: clamp(40px, 6vh, 110px) 32px; } }

/* Platform hero: full screen, centered */
.pf-hero { min-height: 100vh; min-height: 100svh; display: flex; align-items: center; text-align: center; padding: 120px 0 80px; }
.pf-hero > .container { width: 100%; display: flex; flex-direction: column; align-items: center; }
.pf-hero h1 { max-width: 16ch; margin-left: auto; margin-right: auto; }
.pf-hero .lede { max-width: 640px; margin-left: auto; margin-right: auto; }
.pf-hero .hero-ctas { justify-content: center; }
@media (max-width: 760px) { .pf-hero { min-height: min(100svh, 720px); padding: 110px 0 64px; } }

/* Platform "How it works" mockups on Neutral 90 for contrast against the dark section */
.pf-panel.mk { background: var(--n90); border-color: var(--n70); box-shadow: 0 30px 80px rgba(0,0,0,.35); }
.pf-panel .mk-head { color: var(--n10); border-bottom-color: var(--n70); }
.pf-panel .mk-head span, .pf-panel .mk-meta, .pf-panel .mk-row small { color: var(--n20); }
.pf-panel .mk-row { color: var(--n10); border-bottom-color: var(--n80); }
.pf-panel .mk-val { color: var(--p40); }

/* Platform "Ask anything": one full screen */
@media (min-width: 761px) {
  .pf-ask { min-height: 100vh; min-height: 100svh; display: flex; align-items: center; padding: 96px 0; }
  .pf-ask > .container { width: 100%; }
  .pf-ask .ask-answer { min-height: 230px; }
}
@media (min-width: 761px) and (max-height: 840px) {
  .pf-ask { padding: 72px 0 40px; }
  .pf-ask .section-head { margin-bottom: 28px; }
  .pf-ask .section-head h2 { font-size: 2.5rem; }
  .pf-ask .ask-tabs { margin-bottom: 16px; }
  .pf-ask .ask-input { min-height: 40px; }
  .pf-ask .ask-answer { min-height: 0; margin-top: 14px; }
  .pf-ask .mk-row { padding: 9px 18px; }
}

/* Platform "Ask anything": input box styled like the Termblocks app, light answer cards */
.pf-ask .ask-box { background: #fff; border: 1px solid var(--n70); border-radius: 14px; padding: 0; overflow: hidden; box-shadow: 0 0 0 4px rgba(255,255,255,.08), 0 30px 80px rgba(0,0,0,.4); }
.pf-ask .ask-input { position: relative; min-height: 120px; padding: 22px 24px; font-size: 1rem; color: var(--n10); }
.ask-ph { color: var(--n30); }
.ask-ph[hidden] { display: none; }
.pf-ask .ask-bar { display: flex; justify-content: space-between; align-items: center; padding: 12px 16px 12px 20px; background: linear-gradient(90deg, var(--s90), var(--p90)); }
.ask-bar__right { display: flex; align-items: center; gap: 14px; }
.ask-ic { width: 20px; height: 20px; fill: none; stroke: var(--n10); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.ask-send { width: 40px; height: 40px; border-radius: 10px; background: var(--n70); display: grid; place-items: center; transition: background .3s; }
.ask-send svg { width: 18px; height: 18px; fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ask-send.is-ready { background: var(--p20); }
.pf-ask .ask-answer.mk { background: var(--n90); border-color: var(--n70); }
.pf-ask .ask-answer .mk-head { color: var(--n10); border-bottom-color: var(--n70); }
.pf-ask .ask-answer .mk-head span, .pf-ask .ask-answer .mk-row small { color: var(--n20); }
.pf-ask .ask-answer .mk-row { color: var(--n10); border-bottom-color: var(--n80); }
@media (min-width: 761px) and (max-height: 840px) { .pf-ask .ask-input { min-height: 72px; } }

/* Keep "Ask anything" a constant height: both answers share one slot and fade in/out */
.ask-answers { display: grid; margin-top: 20px; }
.ask-answers > .ask-answer { grid-area: 1 / 1; margin-top: 0; transition: opacity .4s ease; }
.ask-answers > .ask-answer[hidden] { display: block; visibility: hidden; opacity: 0; }
.pf-ask .ask-answer { min-height: 0 !important; }
@media (min-width: 761px) { .pf-ask { height: 100vh; height: 100svh; min-height: 0; } }
@media (min-width: 761px) and (max-height: 840px) { .ask-answers { margin-top: 14px; } }
/* "How it works": all four mockups share one slot so the section never changes height */
.pf-panels { display: grid; align-content: start; }
.pf-panels > .pf-panel { grid-area: 1 / 1; transition: opacity .4s ease; }
.pf-panels > .pf-panel[hidden] { display: block; visibility: hidden; opacity: 0; }
.pf-panels > .pf-panel[hidden] .mk-row { animation: none; }
.pf-panels > .mk-note { grid-area: 2 / 1; }

/* ======================================================================
   Platform page — light, clean color pattern (like the current termblocks.com/#/product):
   warm off-white backgrounds, thin hairlines, product windows framed in a soft
   purple→blue tint. Dark is reserved for the closing call to action.
   ====================================================================== */
.pf-hero { background: var(--n90); color: var(--n10); min-height: calc(100vh - 69px); min-height: calc(100svh - 69px); padding: 64px 0; }
.pf-hero h1 { color: var(--p20); }
.pf-hero .lede { color: var(--n20); }
.pf-hero .eyebrow, .pf-dark .eyebrow { color: var(--n30); font-weight: 500; letter-spacing: .12em; }
.pf-hero .btn-primary { background: var(--p20); color: #fff; }
.pf-hero .btn-primary:hover { background: var(--p30); }

.pf-dark, .pf-dark--alt { background: var(--n90); color: var(--n10); border-top: 1px solid var(--n70); }
.pf-dark h2 { color: var(--p20); }
.pf-dark .lede { color: var(--n20); }

/* How it works: tab list */
.pf-tab { color: var(--n20); }
.pf-tab strong { color: var(--n10); }
.pf-tab.is-active { background: #fff; color: var(--n20); box-shadow: 0 0 0 1px var(--n70); }
.pf-tab.is-active strong { color: var(--p20); }
.pf-progress { background: var(--n80); }
.pf-tab.is-active .pf-progress::after { background: var(--p50); }

/* Product windows framed in the soft gradient, as on the product page */
.pf-panels { background: linear-gradient(135deg, var(--p90), var(--s80)); border-radius: 22px; padding: 28px; }
.pf-panel.mk, .pf-ask .ask-answer.mk { background: #fff; border-color: var(--n70); box-shadow: 0 18px 40px rgba(33,3,71,.08); }
.pf-panel .mk-head, .pf-ask .ask-answer .mk-head { background: var(--n90); }
.mk-note { color: var(--n30); }
.pf-panels > .mk-note { margin: 14px 4px 0; }

/* Ask anything */
.pf-ask .ask { background: linear-gradient(135deg, var(--p90), var(--s80)); border-radius: 22px; padding: 28px; max-width: 900px; }
.pf-ask .ask-box { box-shadow: 0 18px 40px rgba(33,3,71,.08); }
@media (max-width: 760px) { .pf-panels, .pf-ask .ask { padding: 14px; border-radius: 16px; } .pf-hero { min-height: 0; padding: 72px 0 56px; } }
.page-platform .eyebrow { color: var(--n30); font-weight: 500; letter-spacing: .12em; }
.page-platform .alt { background: var(--n90); border-top: 1px solid var(--n70); }
.page-platform main > section:not(.pf-hero):not(.cta-band) { border-top: 1px solid var(--n70); }
/* Ask anything: keep content clear of the sticky header */
@media (min-width: 761px) { .pf-ask { padding: 96px 0 40px; } .pf-ask .section-head { margin-bottom: 36px; } }
@media (min-width: 761px) and (max-height: 840px) { .pf-ask { padding: 80px 0 24px; } .pf-ask .section-head { margin-bottom: 20px; } .pf-ask .section-head .lede { margin-bottom: 0; } }

/* Ask anything: the light purple frame grows and shrinks with its content; the heading stays put */
.pf-ask .ask-answers { height: 0; overflow: hidden; align-items: start; transition: height .45s cubic-bezier(.2,.7,.2,1); margin-top: 0; }
.pf-ask .ask-answers > .ask-answer { margin-top: 20px; }
@media (min-width: 761px) { .pf-ask { align-items: flex-start; } }
@media (prefers-reduced-motion: reduce) { .pf-ask .ask-answers { transition: none; } }

/* ===== Platform: "Built around your expertise" — Agent anatomy window, full screen ===== */
.pf-anatomy { background: var(--n90); border-top: 1px solid var(--n70); padding: 96px 0; }
@media (min-width: 761px) { .pf-anatomy { min-height: 100vh; min-height: 100svh; display: flex; align-items: center; } .pf-anatomy > .container { width: 100%; } }
.pf-anatomy .section-head { margin-bottom: 56px; }
.anatomy { background: #fbfaf8; border: 1px solid var(--n70); border-radius: 22px; box-shadow: 0 30px 70px rgba(60,60,56,.10); overflow: hidden; }
.anatomy__bar { display: flex; align-items: center; gap: 7px; padding: 14px 22px; background: var(--n80); border-bottom: 1px solid var(--n70); font-size: .8rem; letter-spacing: .12em; text-transform: uppercase; color: var(--n20); }
.anatomy__bar i { width: 10px; height: 10px; border-radius: 50%; background: var(--n60); }
.anatomy__bar span { margin-left: 12px; }
.anatomy__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; padding: 32px; }
.anatomy__card { background: var(--n90); border: 1px solid var(--n70); border-radius: 12px; padding: 26px 24px 30px; transition: transform .25s ease, box-shadow .25s ease, background .25s; }
.anatomy__card:hover { transform: translateY(-4px); background: #fff; box-shadow: 0 18px 36px rgba(60,60,56,.12); }
.anatomy__icon { width: 46px; height: 46px; border-radius: 9px; display: grid; place-items: center; background: linear-gradient(135deg, var(--s50), var(--p70)); margin-bottom: 30px; }
.anatomy__icon svg { width: 22px; height: 22px; fill: none; stroke: #fff; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.anatomy__card h3 { font-size: 1.45rem; color: var(--n10); margin: 0 0 8px; }
.anatomy__card p { color: var(--n20); margin: 0; line-height: 1.7; }
@media (max-width: 1000px) { .anatomy__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 760px) { .anatomy__grid { grid-template-columns: 1fr; padding: 16px; } .pf-anatomy { padding: 64px 0; } }
.page-platform .final-cta { border-top: 0; }
@media (min-width: 761px) {
  .pf-anatomy { padding: 88px 0 40px; }
  .pf-anatomy .section-head { margin-bottom: 36px; }
  .anatomy__grid { padding: 24px; gap: 16px; }
  .anatomy__card { padding: 22px 20px 24px; }
  .anatomy__icon { margin-bottom: 22px; width: 42px; height: 42px; }
  .anatomy__card p { line-height: 1.6; }
}
@media (min-width: 761px) and (max-height: 840px) {
  .pf-anatomy .section-head h2 { font-size: 2.4rem; }
  .pf-anatomy .section-head { margin-bottom: 24px; }
  .anatomy__bar { padding: 10px 18px; }
  .anatomy__card p { font-size: 15.5px; line-height: 1.55; }
  .anatomy__icon { margin-bottom: 14px; width: 38px; height: 38px; }
}

/* ===== Security page: grey (Neutral 10) instead of purple ===== */
.page-security .warm-hero h1, .page-security .num-list h4, .page-security h2, .page-security h3 { color: var(--n10); }
.page-security .eyebrow { color: var(--n30); font-weight: 500; letter-spacing: .12em; }
.page-security .soc2-card { background: var(--n10); }
.page-security .soc2-card h3 { color: #fff; }
.page-security .soc2-card .btn-light { color: var(--n10); }

/* Light "Turn Complexity into Clarity" card, separated from the footer */
.cta-light { padding: 40px 0 120px; }
.cta-light__card { border: 1px solid var(--n60); border-radius: 22px; background: #fbfaf8; text-align: center; padding: 110px 32px; }
.cta-light__card h2 { color: var(--n10); margin: 0 0 26px; }
.cta-light__card p { color: var(--n20); font-size: 1.15rem; margin: 0 0 40px; }
.cta-light__btn { background: var(--n10); color: #fff; padding: 14px 28px; }
.cta-light__btn:hover { background: #000; }
@media (max-width: 760px) { .cta-light { padding: 24px 0 72px; } .cta-light__card { padding: 64px 22px; border-radius: 16px; } }

/* Security page: full-screen hero; CTA card + footer fill exactly one screen together */
@media (min-width: 761px) {
  .page-security .warm-hero { min-height: calc(100vh - 69px); min-height: calc(100svh - 69px); display: flex; align-items: center; padding: 48px 0; }
  .page-security .warm-hero > .container { width: 100%; }
  .page-security .warm-hero h1 { font-size: clamp(2.5rem, 6vw, 4rem); }
  .page-security .warm-hero .lede { font-size: 1.2rem; max-width: 720px; }
  .page-security .warm-section { padding-top: 72px; border-top: 1px solid var(--n70); }
  .cta-light { min-height: calc(100vh - var(--footer-h, 330px) - 69px); min-height: calc(100svh - var(--footer-h, 330px) - 69px); display: flex; align-items: center; padding: 40px 0; }
  .cta-light > .container { width: 100%; }
  .cta-light__card { padding: clamp(48px, 9vh, 120px) 32px; }
}
@media (min-width: 761px) and (max-height: 840px) {
  .cta-light { padding: 24px 0; }
  .cta-light__card { padding: 40px 32px; }
  .cta-light__card h2 { font-size: 2.4rem; margin-bottom: 14px; }
  .cta-light__card p { margin-bottom: 24px; }
}
@media (min-width: 761px) and (min-height: 841px) { .cta-light__card { padding: clamp(40px, 6vh, 110px) 32px; } .cta-light__card h2 { margin-bottom: 20px; } .cta-light__card p { margin-bottom: 32px; } }
@media (min-width: 761px) and (min-height: 841px) and (max-height: 960px) { .cta-light { padding: 20px 0; } .cta-light__card { padding: 44px 32px; } }

/* ===== Use Cases mega menu — full width, like prismera.ai ===== */
@media (min-width: 761px) {
  .nav-links > li { height: 68px; display: flex; align-items: center; }
  .has-menu { position: static; }
  .has-menu .menu { display: block; position: static; box-shadow: none; border: 0; padding: 0; min-width: 0; background: none; }
  .mega { position: absolute; left: 0; right: 0; top: 100%; background: #fff; border-top: 1px solid var(--n70); border-bottom: 1px solid var(--n70);
    opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity .2s ease, transform .2s ease, visibility 0s linear .2s; z-index: 60; }
  .mega::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 100vh; background: rgba(60,60,56,.28);
    -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px); pointer-events: none; }
  .has-menu:hover .mega, .has-menu:focus-within .mega { opacity: 1; visibility: visible; transform: none; transition: opacity .2s ease, transform .2s ease; }
  .has-menu:hover > a .chev, .has-menu:focus-within > a .chev { display: inline-block; transform: rotate(180deg); }
  .chev { display: inline-block; transition: transform .2s; font-size: .75em; }
  .mega__inner { display: grid; grid-template-columns: 1.7fr 1fr; gap: 64px; padding-top: 40px; padding-bottom: 44px; }
  .mega__label { display: block; font-size: .8rem; letter-spacing: .12em; text-transform: uppercase; color: var(--n30); margin-bottom: 18px; }
  .mega__list { display: grid !important; grid-template-columns: 1fr 1fr; gap: 6px 32px; }
  .mega__list a { display: block; padding: 12px 14px; margin-left: -14px; border-radius: 10px; color: var(--n10) !important; text-decoration: none; }
  .mega__list a:hover { background: var(--n90); }
  .mega__list strong { display: block; font-weight: 600; color: var(--n10); margin-bottom: 3px; font-size: 1rem; }
  .mega__list small { display: block; color: var(--n20); font-size: .85rem; line-height: 1.45; }
  .mega__all { display: inline-block; margin-top: 18px; color: var(--p20) !important; font-weight: 600; text-decoration: none; }
  .mega__side { border-left: 1px solid var(--n70); padding-left: 40px; }
  .mega__logos { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 28px; align-items: center; margin-bottom: 28px; }
  .mega__logos img { max-height: 24px; max-width: 130px; width: auto; filter: brightness(0); opacity: .55; }
  .mega__card { display: block; padding: 18px 20px; border-radius: 12px; background: linear-gradient(135deg, var(--p90), var(--s80)); text-decoration: none; }
  .mega__card strong { display: block; font-family: var(--serif); font-weight: 300; font-size: 1.2rem; color: var(--p20); margin-bottom: 6px; }
  .mega__card small { color: var(--n20); font-size: .85rem; }
  /* menu text colors stay dark even on the transparent homepage header */
  .site-header--over .mega a, .site-header--over .mega strong { color: var(--n10); }
}
@media (max-width: 760px) {
  .mega__side, .mega__label, .mega__all { display: none; }
  .nav-links.open .mega { display: block; }
  .nav-links.open .menu { display: block; position: static; box-shadow: none; border: 0; padding: 0 0 0 8px; }
  .nav-links.open .mega__list a { display: block; padding: 8px 0; }
  .nav-links.open .mega__list small { display: block; color: var(--n20); font-size: .8rem; }
  .mega { display: none; }
}
@media (min-width: 761px) { .mega__side { display: flex; align-items: center; } .mega__card { width: 100%; padding: 26px 26px; } }

/* Use Cases panel in the site's grey (Neutral 10) */
@media (min-width: 761px) {
  .mega { background: var(--n10); border-top-color: rgba(234,238,254,.12); border-bottom-color: rgba(234,238,254,.12); }
  .mega__label { color: rgba(234,238,254,.5); }
  .mega__list a, .site-header--over .mega a { color: #fff !important; }
  .mega__list a:hover { background: rgba(255,255,255,.06); }
  .mega__list strong, .site-header--over .mega strong { color: #fff; }
  .mega__list small { color: rgba(234,238,254,.62); }
  .mega__all { color: #fff !important; }
  .mega__side { border-left-color: rgba(234,238,254,.14); }
  .mega__card { background: rgba(255,255,255,.06); border: 1px solid rgba(234,238,254,.14); transition: background .2s; }
  .mega__card:hover { background: rgba(255,255,255,.1); }
  .mega__card strong, .site-header--over .mega .mega__card strong { color: #fff; }
  .mega__card small { color: rgba(234,238,254,.72); }
}
/* Restore the original tinted card inside the grey Use Cases panel */
@media (min-width: 761px) {
  .mega__card, .mega__card:hover { background: linear-gradient(135deg, var(--p90), var(--s80)); border: 0; }
  .mega__card:hover { filter: brightness(.98); }
  .mega__card strong, .site-header--over .mega .mega__card strong { color: var(--p20); }
  .mega__card small { color: var(--n20); }
}

/* Use Cases panel matches each page's hero background */
@media (min-width: 761px) {
  .mega-tone--warm .mega { background: var(--n90); }   /* Platform, Security, About heroes */
  .mega-tone--tint .mega { background: var(--s80); }   /* Use-case and demo page heroes */
  .mega-tone--warm .mega, .mega-tone--tint .mega { border-top-color: var(--n70); border-bottom-color: var(--n70); }
  .mega-tone--warm .mega__label, .mega-tone--tint .mega__label { color: var(--n30); }
  .mega-tone--warm .mega__list a, .mega-tone--tint .mega__list a { color: var(--n10) !important; }
  .mega-tone--warm .mega__list strong, .mega-tone--tint .mega__list strong { color: var(--n10); }
  .mega-tone--warm .mega__list small, .mega-tone--tint .mega__list small { color: var(--n20); }
  .mega-tone--warm .mega__list a:hover { background: #fff; }
  .mega-tone--tint .mega__list a:hover { background: rgba(255,255,255,.6); }
  .mega-tone--warm .mega__all, .mega-tone--tint .mega__all { color: var(--p20) !important; }
  .mega-tone--warm .mega__side, .mega-tone--tint .mega__side { border-left-color: var(--n70); }
  .mega-tone--tint .mega__card { background: #fff; }
}
/* "See how the platform works" card: stronger purple→blue gradient on every page */
@media (min-width: 761px) {
  .mega__card, .mega__card:hover, .mega-tone--tint .mega__card { background: linear-gradient(135deg, var(--p80) 0%, var(--p90) 45%, var(--s60) 100%); border: 0; }
  .mega__card:hover { filter: brightness(1.03); }
}

/* Use Cases panel matches the menu bar it drops from:
   white wherever the bar is white; dark grey only while the homepage bar is see-through over the dark hero */
@media (min-width: 761px) {
  .mega { background: #fff; border-top-color: var(--n70); border-bottom-color: var(--n70); }
  .mega__label { color: var(--n30); }
  .mega__list a { color: var(--n10) !important; }
  .mega__list strong { color: var(--n10); }
  .mega__list small { color: var(--n20); }
  .mega__list a:hover { background: var(--n90); }
  .mega__all { color: var(--p20) !important; }
  .mega__side { border-left-color: var(--n70); }

  .site-header--over:not(.is-scrolled) .mega { background: var(--n10); border-top-color: rgba(234,238,254,.12); border-bottom-color: rgba(234,238,254,.12); }
  .site-header--over:not(.is-scrolled) .mega__label { color: rgba(234,238,254,.5); }
  .site-header--over:not(.is-scrolled) .mega__list a, .site-header--over:not(.is-scrolled) .mega__list strong, .site-header--over:not(.is-scrolled) .mega__all { color: #fff !important; }
  .site-header--over:not(.is-scrolled) .mega__list small { color: rgba(234,238,254,.62); }
  .site-header--over:not(.is-scrolled) .mega__list a:hover { background: rgba(255,255,255,.06); }
  .site-header--over:not(.is-scrolled) .mega__side { border-left-color: rgba(234,238,254,.14); }
  .site-header--over.is-scrolled .mega__list a, .site-header--over.is-scrolled .mega__list strong { color: var(--n10) !important; }
  .site-header--over.is-scrolled .mega__all { color: var(--p20) !important; }
  .mega__card strong, .site-header--over .mega .mega__card strong { color: var(--p20) !important; }
}

/* ======================================================================
   Menu bar = hero background on every page, and the Use Cases panel = menu bar
   ====================================================================== */
.site-header.tone-warm { background: rgba(248,247,246,.97); }          /* Platform, Security, About */
.site-header.tone-tint { background: rgba(234,238,254,.97); border-bottom-color: rgba(60,60,56,.08); }  /* Use cases, Demo */
.site-header.tone-white { background: rgba(255,255,255,.97); }         /* Privacy, Terms */
/* Homepage: the bar stays dark grey (#3c3c38) like the hero, also after scrolling */
.site-header--over.is-scrolled { background: rgba(60,60,56,.97); border-bottom-color: rgba(234,238,254,.12); }
.site-header--over.is-scrolled .logo-dark { display: none; }
.site-header--over.is-scrolled .logo-light { display: block; }
.site-header--over.is-scrolled .nav-links a { color: rgba(234,238,254,.82); }
.site-header--over.is-scrolled .nav-links a:hover { color: #fff; }
.site-header--over.is-scrolled .btn-ghost { background: transparent; color: #fff; border-color: rgba(234,238,254,.35); }
.site-header--over.is-scrolled .btn-primary { background: #fff; color: var(--p20); }
.site-header--over.is-scrolled .menu-toggle { color: #fff; border-color: rgba(234,238,254,.35); }
@media (min-width: 761px) {
  .tone-warm .mega { background: var(--n90); }
  .tone-tint .mega { background: var(--s80); border-top-color: rgba(60,60,56,.08); }
  .tone-warm .mega__list a:hover { background: #fff; }
  .tone-tint .mega__list a:hover { background: rgba(255,255,255,.65); }
  .site-header--over .mega { background: var(--n10) !important; border-top-color: rgba(234,238,254,.12); border-bottom-color: rgba(234,238,254,.12); }
  .site-header--over .mega__label { color: rgba(234,238,254,.5); }
  .site-header--over .mega__list a, .site-header--over .mega__list strong, .site-header--over .mega__all,
  .site-header--over.is-scrolled .mega__list a, .site-header--over.is-scrolled .mega__list strong, .site-header--over.is-scrolled .mega__all { color: #fff !important; }
  .site-header--over .mega__list small { color: rgba(234,238,254,.62); }
  .site-header--over .mega__list a:hover { background: rgba(255,255,255,.06); }
  .site-header--over .mega__side { border-left-color: rgba(234,238,254,.14); }
}
@media (max-width: 760px) {
  .site-header--over.is-scrolled .nav-links.open { background: var(--n10); }
  .site-header--over.is-scrolled .nav-links.open a { color: #fff; }
  .tone-warm .nav-links.open { background: var(--n90); }
  .tone-tint .nav-links.open { background: var(--s80); }
}
@media (max-width: 760px) { .grid-4:has(> a.card) { grid-template-columns: 1fr; } .grid-4 > * { min-width: 0; } }

/* Platform, Security, About: menu bar is solid #f8f7f6 and blends into the hero (no dividing line) */
.site-header.tone-warm { background: var(--n90); border-bottom-color: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; transition: border-color .2s; }
.site-header.tone-warm.is-scrolled { border-bottom-color: var(--n70); }
.site-header.tone-tint { background: var(--s80); border-bottom-color: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; }
.site-header.tone-tint.is-scrolled { border-bottom-color: rgba(60,60,56,.1); }
@media (min-width: 761px) { .tone-warm .mega, .tone-tint .mega { border-top-color: transparent; } }
/* four use cases */
.grid-uc { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1100px) { .grid-uc { grid-template-columns: 1fr 1fr; } }
@media (max-width: 760px) { .grid-uc { grid-template-columns: 1fr; } }

/* ===== Book a Demo — same layout as the current termblocks.com/#/request-a-demo ===== */
.demo-sec { padding: 72px 0 120px; }
.demo { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: stretch; }
.demo__copy { display: flex; flex-direction: column; }
.demo__copy .eyebrow { color: var(--n30); font-weight: 500; letter-spacing: .12em; }
.demo__copy h1 { font-size: 2rem; font-weight: 400; color: #252428; margin: 0; }
.demo__info { margin-top: auto; padding-top: 48px; }
.why-list { list-style: none; margin: 0 0 36px; padding: 0; }
.why-list li { position: relative; padding-left: 30px; margin-bottom: 14px; color: var(--n10); }
.why-list li::before { content: ""; position: absolute; left: 0; top: 4px; width: 18px; height: 18px; border-radius: 50%; background: #17663d url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center/12px no-repeat; }
.demo__email p { margin: 6px 0 0; }
.demo__email a { color: var(--n10); text-decoration: underline; text-underline-offset: 3px; }
.demo-card { background: #fff; border: 1px solid var(--n70); border-radius: 18px; padding: 36px; box-shadow: 0 20px 50px rgba(60,60,56,.08); }
.dform .field { margin-bottom: 20px; }
.dform__row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.dform label { display: block; font-size: .9rem; font-weight: 500; color: var(--n10); margin-bottom: 8px; }
.dform .req { color: var(--n30); font-weight: 400; font-size: .85em; }
.dform input, .dform select, .dform textarea { width: 100%; height: 44px; padding: 0 14px; border: 1px solid #cfccc6; border-radius: 8px; background: #fbfaf8; font: 400 15px var(--font); color: #252428; transition: border-color .15s, box-shadow .15s; }
.dform select { appearance: none; padding-right: 38px; background: #fbfaf8 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2361605a' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") right 12px center/16px no-repeat; }
.dform textarea { height: 110px; padding: 12px 14px; resize: vertical; }
.dform input:focus, .dform select:focus, .dform textarea:focus { outline: none; border-color: var(--n10); box-shadow: 0 0 0 3px rgba(60,60,56,.08); }
.field__error { display: none; color: var(--t20); font-size: .8rem; margin-top: 6px; }
.field.is-invalid input { border-color: var(--t30); }
.field.is-invalid .field__error { display: block; }
.dform__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.dform__btn { width: 100%; justify-content: center; height: 48px; background: #252428; color: #fff; font-weight: 600; margin-top: 4px; }
.dform__btn:hover { background: #000; }
.dform__btn:disabled { opacity: .6; }
.dform__error { color: var(--t20); font-size: .9rem; }
.dform__note { font-size: .8rem; color: var(--n30); text-align: center; margin: 14px 0 0; }
.dform__note a { color: var(--n20); }
.dform-success { text-align: center; padding: 64px 12px; }
.dform-success[hidden], .dform[hidden] { display: none; }
.dform-success__mark { width: 56px; height: 56px; border-radius: 50%; background: #17663d; display: grid; place-items: center; margin: 0 auto 20px; }
.dform-success__mark svg { width: 28px; fill: none; stroke: #fff; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.dform-success h2 { font-size: 1.6rem; color: var(--n10); }
.dform-success p { color: var(--n20); }
@media (max-width: 860px) { .demo { grid-template-columns: 1fr; gap: 32px; } .demo__info { padding-top: 28px; } }
@media (max-width: 760px) { .demo-sec { padding: 40px 0 72px; } .demo-card { padding: 22px; } .dform__row { grid-template-columns: 1fr; gap: 0; } }

/* Menu bar "Book a demo": hover turns black on every page */
.site-header .nav-cta .btn-primary:hover,
.site-header--over .nav-cta .btn-primary:hover,
.site-header--over.is-scrolled .nav-cta .btn-primary:hover { background: #000; color: #fff; border-color: #000; }
.site-header .nav-cta .btn-primary { transition: background .15s, color .15s; }
/* Menu bar "Book a demo" is black wherever it used to be purple (light menu bars) */
.site-header:not(.site-header--over) .nav-cta .btn-primary { background: #000; color: #fff; border-color: #000; }
.site-header:not(.site-header--over) .nav-cta .btn-primary:hover { background: var(--n10); border-color: var(--n10); }

/* Homepage: "Book a demo" (menu bar and hero) hovers to Secondary 80 #eaeefe */
.site-header--over .nav-cta .btn-primary:hover,
.site-header--over.is-scrolled .nav-cta .btn-primary:hover,
.hero--viz .hero-ctas .btn-primary:hover { background: var(--s80); color: var(--p20); border-color: var(--s80); }
.hero--viz .hero-ctas .btn-primary { transition: background .15s, color .15s; }

/* Book a Demo: form section fills the screen; footer fills its own screen */
@media (min-width: 761px) {
  .page-demo .demo-sec { min-height: calc(100vh - 69px); min-height: calc(100svh - 69px); display: flex; align-items: center; padding: 40px 0; }
  .page-demo .demo-sec > .container { width: 100%; }
  .page-demo .site-footer { min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; padding-top: 0; padding-bottom: 32px; }
  .page-demo .site-footer > .container { flex: 1; display: flex; flex-direction: column; }
  .page-demo .footer-top { flex: 1; align-content: center; align-items: start; padding: 96px 0 72px; }
  .page-demo .footer-brand .brand img { height: 40px; }
}
@media (min-width: 761px) and (max-height: 840px) {
  .page-demo .demo-card { padding: 26px 30px; }
  .page-demo .dform .field { margin-bottom: 14px; }
  .page-demo .dform input, .page-demo .dform select { height: 40px; }
  .page-demo .dform textarea { height: 80px; }
}
@media (min-width: 761px) {
  .page-demo .site-footer { min-height: calc(100vh - 69px); min-height: calc(100svh - 69px); }
  .page-demo .site-footer > .container { width: 100%; }
}

/* Book a Demo: footer back to normal height; the card + footer share one screen */
@media (min-width: 761px) {
  .page-demo .site-footer { min-height: 0; display: block; padding: 64px 0 28px; }
  .page-demo .site-footer > .container { display: block; }
  .page-demo .footer-top { padding: 0 0 44px; align-content: normal; }
  .page-demo .footer-brand .brand img { height: 30px; }
  .page-demo .cta-light__card p { margin-bottom: 0; }
}

/* ===== About page: tape animation carried over from the current site ===== */
.page-about { --ink:#252428; --line:#e4e2dd; --line-2:#cfccc6; --muted:#8a8781; --paper:#fbfaf8; --paper-2:#f2f1ec; --ink-3:#61605a;
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px; --s7:48px; --r:8px; --r-lg:16px; --r-xxs:4px; --white:#fff;
  --ok:#006118; --ok-bg:#dbffe4; --err:#ad0003; --err-bg:#ffebeb; --ease:cubic-bezier(.22,.61,.36,1);
  --sans:'Figtree',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; --label:var(--sans); --serif:'Merriweather',Georgia,serif;
  --shadow-rgb:225,223,219; --shadow-o:1; --p2:#dfcaf9; background:#fbfaf8; }
.page-about .frame { position: relative; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--white); box-shadow: 0 1px 2px rgba(var(--shadow-rgb),var(--shadow-o)),0 18px 48px 0 rgba(var(--shadow-rgb),var(--shadow-o)); overflow: hidden; }
.page-about .frame__bar { display: flex; align-items: center; gap: 7px; height: 36px; padding: 0px 14px; background: var(--paper-2); border-bottom: 1px solid var(--line); }
.page-about .frame__dot { width: 9px; height: 9px; border-radius: 50%; background: var(--line-2); }
.page-about .frame__label { margin-left: 8px; font-family: var(--label); font-size: 12px; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.page-about .page-head__inner { display: grid; gap: var(--s5); justify-items: start; }
.page-about .page-head__inner h1 { max-width: 17ch; }
.page-about .page-head__inner .lede { max-width: 58ch; }
.page-about .about-hero { position: relative; }
.page-about .tape__view { position: relative; aspect-ratio: 1400 / 520; background: rgb(248, 247, 246); overflow: hidden; }
.page-about .tape { position: absolute; inset: 0px; width: 100%; height: 100%; display: block; }
.page-about .tape__rule { stroke: var(--line); stroke-width: 1; vector-effect: non-scaling-stroke; fill: none; }
.page-about .tape__lbl { font-family: Figtree, system-ui, sans-serif; font-size: 17px; font-weight: 500; letter-spacing: 0.11em; fill: rgb(138, 135, 129); }
.page-about .tape__data { font-family: Figtree, system-ui, sans-serif; font-size: 15px; font-weight: 500; letter-spacing: 0.01em; }
.page-about .v-cell { font-family: Figtree, system-ui, sans-serif; font-size: 16px; font-weight: 500; fill: rgb(97, 96, 90); }
.page-about .v-id { fill: rgb(61, 60, 56); font-weight: 600; }
.page-about .about-hero .badge { display: inline-flex; align-items: center; gap: 6px; border-radius: 4px; padding: 2px 8px; font: 500 12px / 17px Figtree, sans-serif; white-space: nowrap; }
.page-about .about-hero .badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentcolor; }
.page-about .about-hero .badge--ok { background: rgb(219, 255, 228); color: rgb(0, 97, 24); }
.page-about .about-hero .badge--err { background: rgb(255, 235, 235); color: rgb(173, 0, 3); }
.page-about .about-hero .badge__wrap { transform: scale(1.2); transform-origin: left center; }
.page-about .tape .tb-fade { animation: tbFade 14000ms var(--ease) infinite; }
.page-about .tape .tb-form { animation: tbForm 14000ms var(--ease) infinite; opacity: 0; }
.page-about .tape .tb-show { animation: tbShow 14000ms var(--ease) infinite; opacity: 0; }
.page-about .tape__sweep { animation: 14000ms linear 0s infinite normal none running tbSweepDown; opacity: 0; }
@keyframes tbFade { 
  0% { opacity: 1; }
  6% { opacity: 0; }
  60% { opacity: 0; }
  66% { opacity: 1; }
  100% { opacity: 1; }
}
@keyframes tbForm { 
  0% { opacity: 0; transform: translateX(-14px); }
  6% { opacity: 1; transform: translateX(0px); }
  60% { opacity: 1; transform: translateX(0px); }
  66% { opacity: 0; transform: translateX(-14px); }
  100% { opacity: 0; transform: translateX(-14px); }
}
@keyframes tbShow { 
  0% { opacity: 0; }
  4% { opacity: 1; }
  60% { opacity: 1; }
  66% { opacity: 0; }
  100% { opacity: 0; }
}
@keyframes tbSweepDown { 
  0% { transform: translateY(-170px); opacity: 0; }
  3% { transform: translateY(-70px); opacity: 0.35; }
  9% { transform: translateY(11px); opacity: 0.9; }
  26% { transform: translateY(311px); opacity: 0.9; }
  30% { transform: translateY(390px); opacity: 0; }
  100% { transform: translateY(390px); opacity: 0; }
}
.page-about .statement { display: grid; grid-template-columns: minmax(0px, 1.05fr) minmax(0px, 1fr); gap: clamp(28px, 5vw, 80px); align-items: start; }
.page-about .statement__quote { font-family: var(--serif); font-size: 32px; line-height: 1.32; letter-spacing: -0.012em; font-weight: 400; color: var(--ink); }
.page-about .statement__body { display: grid; gap: var(--s5); padding-top: var(--s2); }
.page-about .team { display: grid; grid-template-columns: repeat(4, minmax(0px, 1fr)); gap: clamp(32px, 4vw, 48px) 40px; }
.page-about .member { display: grid; row-gap: 16px; align-content: start; min-width: 0px; margin: 0px; }
.page-about .member__photo { aspect-ratio: 1 / 1; border-radius: var(--r); overflow: hidden; background-position-x: ; background-position-y: ; background-size: ; background-repeat: ; background-attachment: ; background-origin: ; background-clip: ; background-color: ; border: 1px solid var(--line); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Crect width='200' height='200' fill='%23f2f1ec'/%3E%3Ccircle cx='100' cy='76' r='29' fill='%23cfccc6'/%3E%3Cpath d='M41 175c0-32.6 26.4-51 59-51s59 18.4 59 51z' fill='%23cfccc6'/%3E%3C/svg%3E"); }
.page-about .member__photo img { width: 100%; height: 100%; object-fit: cover; display: block; filter: grayscale(1) contrast(0.95); transition: filter .25s var(--ease); }
.page-about .member:hover .member__photo img { filter: none; }
.page-about .member__name { font-family: var(--sans); font-size: 15px; font-weight: 600; line-height: 1.35; letter-spacing: -0.005em; color: var(--ink); margin: 0px; }
.page-about .member__role { font-size: 13.5px; line-height: 1.45; color: var(--ink-3); margin: 4px 0px 0px; }
.page-about .logo-bands { display: grid; gap: clamp(48px, 6vw, 80px); }
.page-about .logo-band { display: grid; gap: var(--s6); }
.page-about .logo-band__label { display: flex; align-items: center; gap: var(--s4); }
.page-about .logo-row { display: flex; flex-wrap: wrap; align-items: center; gap: clamp(28px, 4vw, 44px) clamp(36px, 5.5vw, 76px); }
.page-about .logo-row img { height: var(--h,26px); width: auto; object-fit: contain; filter: grayscale(1) contrast(0.9); opacity: 0.55; transition: opacity .25s var(--ease),filter .25s var(--ease); }
.page-about .logo-row img:hover { filter: none; opacity: 1; }
.page-about .logo-row--angels { display: grid; grid-template-columns: repeat(6, minmax(0px, 1fr)); column-gap: clamp(20px, 2.6vw, 36px); row-gap: var(--s7); place-items: end center; }
.page-about .logo-row--angels img { max-width: 100%; transform: translateY(calc(var(--h) * var(--d,0))); }
@media (max-width: 860px){.page-about .logo-row--angels { grid-template-columns: repeat(3, minmax(0px, 1fr)); row-gap: 56px; }}
@media (max-width: 860px){.page-about .logo-bands { gap: 72px; }}
@media (max-width: 860px){.page-about .team { grid-template-columns: repeat(3, minmax(0px, 1fr)); }}
@media (max-width: 860px){.page-about .statement { grid-template-columns: 1fr; gap: var(--s5); }}
@media (max-width: 700px){.page-about .tape__view { aspect-ratio: auto; height: 230px; }}
@media (max-width: 700px){.page-about .tape__lbl { display: none; }}
@media (max-width: 620px){.page-about .logo-row--lead { row-gap: 44px; }}
@media (max-width: 520px){.page-about .logo-row { column-gap: var(--s6); row-gap: var(--s5); }}
@media (max-width: 520px){.page-about .logo-row img { height: calc(var(--h,26px) * .82); }}
@media (max-width: 520px){.page-about .logo-row--lead { gap: 44px 48px; }}
@media (max-width: 520px){.page-about .logo-row--angels { grid-template-columns: repeat(2, minmax(0px, 1fr)); row-gap: 56px; }}
@media (max-width: 520px){.page-about .team { grid-template-columns: repeat(2, minmax(0px, 1fr)); }}
@media (prefers-reduced-motion: reduce){.page-about .tape .tb-fade { animation: auto ease 0s 1 normal none running none; opacity: 0; }}
@media (prefers-reduced-motion: reduce){.page-about .tape .tb-form { animation: auto ease 0s 1 normal none running none; opacity: 1; transform: none; }}
@media (prefers-reduced-motion: reduce){.page-about .tape .tb-show { animation: auto ease 0s 1 normal none running none; opacity: 1; }}
@media (prefers-reduced-motion: reduce){.page-about .tape__sweep { animation: auto ease 0s 1 normal none running none; opacity: 0; }}
.page-about .badge { display: inline-flex; align-items: center; gap: 6px; border-radius: var(--r-xxs); padding: 2px var(--p2); font: 500 12px / 17px Figtree, sans-serif; white-space: nowrap; }
.page-about .badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentcolor; }
.page-about .badge--ok { background: var(--ok-bg); color: var(--ok); }
.page-about .badge--err { background: var(--err-bg); color: var(--err); }

/* About page layout (matches current termblocks.com/#/about) */
.page-about main { background: #fbfaf8; }
.page-about .ab-sec { padding: 120px 0; }
.page-about .ab-hero { padding-top: 96px; }
.page-about .ab-rule { border: 0; border-top: 1px solid var(--line); margin: 0; }
.page-about .ab-head { margin-bottom: 48px; }
.page-about .eyebrow { display: block; font: 500 12px/1 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin-bottom: 16px; }
.page-about .ab-head h1, .page-about .ab-head h2 { font: 400 32px/1.3 var(--serif); color: var(--ink); letter-spacing: -0.01em; margin: 0; max-width: 18ch; }
.page-about .statement { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; margin-top: 72px; }
.page-about .statement__quote { font: 400 32px/1.32 var(--serif); color: var(--ink); margin: 0; }
.page-about .statement__body p { color: var(--ink-3); line-height: 1.68; margin: 0 0 16px; }
.page-about .ab-link { color: var(--ink); font-weight: 500; text-decoration: none; }
.page-about .ab-link:hover { text-decoration: underline; text-underline-offset: 4px; }
.page-about .ab-team { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 40px 24px; }
.page-about .ab-member { margin: 0; }
.page-about .ab-member__photo { aspect-ratio: 4 / 5; background: var(--paper-2); border: 1px solid var(--line); border-radius: 8px; margin-bottom: 14px; position: relative; overflow: hidden; }
.page-about .ab-member__photo::after { content: ""; position: absolute; left: 50%; bottom: -8%; width: 62%; height: 72%; transform: translateX(-50%);
  background: radial-gradient(circle at 50% 28%, #dedbd4 0 22%, transparent 22.5%), radial-gradient(ellipse at 50% 100%, #dedbd4 0 48%, transparent 48.5%); }
.page-about .ab-member__name { font: 600 15px/1.4 var(--sans); color: var(--ink); margin: 0; }
.page-about .ab-member__role { font: 400 13.5px/1.4 var(--sans); color: var(--ink-3); margin: 4px 0 0; }
.page-about .ab-band { display: grid; grid-template-columns: 260px 1fr; gap: 24px; align-items: center; padding: 36px 0; border-top: 1px solid var(--line); }
.page-about .ab-band:last-child { border-bottom: 1px solid var(--line); }
.page-about .ab-band .eyebrow { margin: 0; }
.page-about .ab-logos { display: flex; flex-wrap: wrap; gap: 28px 48px; align-items: center; }
.page-about .ab-logos img { width: auto; filter: grayscale(1); opacity: .85; }
@media (max-width: 960px) { .page-about .ab-team { grid-template-columns: repeat(3, minmax(0,1fr)); } }
@media (max-width: 760px) {
  .page-about .ab-sec { padding: 72px 0; } .page-about .ab-hero { padding-top: 56px; }
  .page-about .statement { grid-template-columns: 1fr; gap: 20px; margin-top: 40px; } .page-about .statement__quote { font-size: 24px; }
  .page-about .ab-team { grid-template-columns: 1fr 1fr; } .page-about .ab-band { grid-template-columns: 1fr; }
  .page-about .ab-logos img { max-width: 40vw; }
}

/* About: full-screen hero, statement on its own screen, stacked investor rows */
@media (min-width: 761px) {
  .page-about .ab-hero { min-height: calc(100vh - 69px); min-height: calc(100svh - 69px); display: flex; align-items: center; padding: 40px 0; }
  .page-about .ab-hero > .container { width: 100%; }
  .page-about .ab-hero .ab-head { margin-bottom: 36px; }
  .page-about .ab-statement { min-height: 100vh; min-height: 100svh; display: flex; align-items: center; }
  .page-about .ab-statement > .container { width: 100%; }
  .page-about .ab-statement .statement { margin-top: 0; align-items: center; }
  .page-about .ab-statement .statement__quote { font-size: 40px; line-height: 1.3; }
}
@media (min-width: 761px) and (max-height: 840px) { .page-about .ab-hero .about-hero { max-width: 900px; } }
.page-about .ab-inv { padding: 28px 0 40px; }
.page-about .ab-inv .eyebrow { margin-bottom: 36px; }
.page-about .ab-inv__logos { display: flex; align-items: center; flex-wrap: wrap; }
.page-about .ab-inv__logos img { width: auto; filter: grayscale(1); opacity: .62; }
.page-about .ab-inv__logos--vc { gap: 32px 120px; }
.page-about .ab-inv__logos--angels { justify-content: space-between; gap: 28px 40px; }
@media (max-width: 1000px) { .page-about .ab-inv__logos--angels { justify-content: flex-start; } }
@media (max-width: 760px) {
  .page-about .ab-inv__logos--vc img { max-height: 44px; } .page-about .ab-inv__logos--vc { gap: 24px 48px; }
  .page-about .ab-inv__logos--angels img { max-height: 30px; max-width: 40vw; }
}
.page-about .ab-inv__logos--vc { gap: 32px 96px; }
@media (min-width: 1001px) { .page-about .ab-inv__logos--angels { flex-wrap: nowrap; justify-content: space-between; gap: 24px; } }
.page-about .ab-inv__logos--angels img { flex: 0 1 auto; min-width: 0; max-width: 16%; object-fit: contain; }

/* ===== Legal pages — layout matches the current termblocks.com legal pages ===== */
.legal-sec { padding: 72px 0 112px; }
.legal { display: grid; grid-template-columns: minmax(0, 240px) minmax(0, 1fr); gap: clamp(32px, 5vw, 80px); align-items: start; }
.legal__rail { position: sticky; top: 104px; display: grid; gap: 16px; min-width: 0; }
.legal__rail h1 { font-size: 2.6rem; line-height: 1.15; margin: 0; }
.legal__rail .eyebrow { margin: 0; }
.legal__meta { font-family: "Figtree", sans-serif; font-size: 12px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--n30); margin: 0; }
.legal__body { min-width: 0; max-width: 70ch; font-size: 17.5px; line-height: 1.75; color: var(--n20); overflow-wrap: break-word; }
.legal__body p { margin: 0 0 1.05em; }
.legal__body h2 { font-size: clamp(19px, 1.9vw, 24px); line-height: 1.35; margin: 2.2em 0 .7em; padding-top: 1.4em; border-top: 1px solid var(--n70); scroll-margin-top: 104px; color: var(--n10); }
.legal__body h2:first-of-type { margin-top: 1.6em; }
.legal__body strong { color: var(--n10); font-weight: 600; }
.legal__body ul { margin: 0 0 1.2em; padding-left: 1.1em; list-style: none; }
.legal__body ul li { position: relative; margin-bottom: .5em; padding-left: .4em; }
.legal__body ul li::before { content: ""; position: absolute; left: -.9em; top: .85em; width: 4px; height: 1px; background: var(--n40); }
.legal__body ul li p { margin: 0; }
.legal__body a { color: var(--p30); text-decoration: none; border-bottom: 1px solid rgba(33,3,71,.25); }
.legal-toc { margin: 32px 0 48px; padding: 24px 32px; background: #f8f7f6; border-radius: 12px; }
.legal-toc__label { font-family: "Figtree", sans-serif; font-size: 12px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--n30); margin-bottom: 16px !important; }
.legal-toc ol { list-style: none; counter-reset: toc; display: grid; gap: 9px; margin: 0; padding: 0; }
.legal-toc li { counter-increment: toc; font-size: 14.5px; display: grid; grid-template-columns: 2em 1fr; align-items: baseline; }
.legal-toc li::before { content: counter(toc, decimal-leading-zero); font-family: "Figtree", sans-serif; font-size: 12px; font-weight: 500; letter-spacing: .06em; color: var(--n30); }
.legal-toc a { color: var(--n10); border-bottom: 1px solid transparent; }
.legal-toc a:hover { color: var(--p30); border-bottom-color: var(--n70); }
@media (max-width: 1000px) { .legal { grid-template-columns: 1fr; } .legal__rail { position: static; } .legal__rail h1 { font-size: 2rem; } }
@media (max-width: 600px) { .legal-toc { padding: 20px; } }

/* Homepage hero fills the whole first screen on phones and tablets too */
@media (max-width: 1000px) {
  .hero--viz { display: grid; align-content: center; min-height: 100vh; min-height: 100svh; }
}

/* ===== Mobile pass ===== */
/* Three-line menu icon (turns into an X when open) */
.menu-toggle { width: 42px; height: 42px; padding: 0; place-items: center; line-height: 0; }
.menu-toggle svg path { transition: transform .25s ease, opacity .2s ease; transform-origin: 12px 12px; }
.menu-toggle[aria-expanded="true"] .mt-1 { transform: translateY(5px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] .mt-2 { opacity: 0; }
.menu-toggle[aria-expanded="true"] .mt-3 { transform: translateY(-5px) rotate(-45deg); }

@media (max-width: 760px) {
  .menu-toggle { display: grid; }
  /* Wider side margins on phones */
  .container { padding: 0 24px; }
  .nav-links.open { padding-left: 24px; padding-right: 24px; }
  /* Logo keeps its original proportions and sits centred in the bar */
  .site-header .brand { flex-shrink: 0; align-self: center; }
  .site-header .brand img { height: 22px; width: auto; max-width: none; flex-shrink: 0; object-fit: contain; }
  .site-header .nav-cta { gap: 10px; flex-shrink: 0; }
  .site-header .nav-cta .btn-primary { padding: 10px 14px; font-size: .86rem; }

  /* "One platform for the entire mortgage life cycle" */
  .lifecycle { padding: 104px 0 96px; }
  .lifecycle .section-head { margin-bottom: 48px; }
  .lifecycle__steps li { padding: 36px 0 36px; }
  .lifecycle__steps h4 { margin-bottom: 14px; }

  /* "Why clients choose Termblocks" */
  .why { padding: 104px 0 112px; }
  .why h2 { margin-bottom: 56px; }
  .why__grid { gap: 64px; }
  .why__item h3 { margin-top: 28px; }

  /* "Plain English" */
  .plain { padding: 104px 0 112px; }
  .plain__grid { gap: 56px; }
  .plain__points { margin-top: 36px; }
  .plain__points li { padding: 20px 0; }

  /* "Purpose-Built Beats General Purpose": stacking cards on phones too */
  .benefits.is-stacked { height: 320vh; }
  .benefits.is-stacked .benefits__sticky { padding: 96px 0 32px; align-items: center; }
  .benefits.is-stacked .benefits__head { margin-bottom: 56px; }
  .benefits.is-stacked .benefit { min-height: 0; }
  .benefits.is-stacked .benefit.is-past { transform: translateY(calc(var(--depth) * -18px)) scale(calc(1 - var(--depth) * .04)); }
  .benefits.is-stacked .benefit.is-next { transform: translateY(80vh); }
}
@media (max-width: 380px) {
  .container { padding: 0 20px; }
  .site-header .brand img { height: 19px; }
  .site-header .nav-cta .btn-primary { padding: 9px 12px; font-size: .82rem; }
}
@media (max-width: 760px) { .benefits.is-stacked .benefit { align-content: start; } }

/* Mobile dropdown menu: roomier spacing */
@media (max-width: 760px) {
  .nav-links.open { gap: 0; padding: 28px 24px 44px; align-items: stretch; }
  .nav-links.open > li { height: auto; }
  .nav-links.open > li > a { display: block; padding: 18px 0; font-size: 1.15rem; }
  .nav-links.open > li + li > a { border-top: 1px solid rgba(128,128,128,.22); }
}
@media (max-width: 380px) { .nav-links.open { padding-left: 20px; padding-right: 20px; } }

/* About on phones: full-screen hero, investor logos one per line at one height */
@media (max-width: 760px) {
  .page-about .ab-hero { min-height: calc(100vh - 69px); min-height: calc(100svh - 69px); display: flex; align-items: center; padding: 40px 0; }
  .page-about .ab-hero > .container { width: 100%; }
  .page-about .ab-inv__logos, .page-about .ab-inv__logos--vc, .page-about .ab-inv__logos--angels { flex-direction: column; align-items: flex-start; flex-wrap: nowrap; gap: 40px; }
  .page-about .ab-inv__logos img, .page-about .ab-inv__logos--vc img, .page-about .ab-inv__logos--angels img { height: 30px !important; width: auto; max-width: 100%; max-height: none; object-fit: contain; flex: none; }
  .page-about .ab-inv { padding: 32px 0 48px; }
}

/* Platform on phones: full-screen hero and Ask anything, roomier How it works */
@media (max-width: 760px) {
  .pf-hero { min-height: calc(100vh - 69px); min-height: calc(100svh - 69px); padding: 56px 0; }

  #how-it-works { padding: 104px 0 112px; }
  #how-it-works .section-head { margin-bottom: 56px; }
  #how-it-works .section-head .lede { margin-top: 20px; }
  .pf-tabs { gap: 48px; }
  .pf-tablist { gap: 14px; }
  .pf-tab { padding: 22px 16px 24px; gap: 16px; }
  .pf-tab strong { margin-bottom: 8px; }
  .pf-tab small { line-height: 1.6; }

  .pf-ask { min-height: calc(100vh - 69px); min-height: calc(100svh - 69px); display: flex; align-items: flex-start; padding: 72px 0 56px; }
  .pf-ask > .container { width: 100%; }
  .pf-ask .section-head { margin-bottom: 40px; }
}
/* Ask anything fits on one phone screen, including the answer */
@media (max-width: 760px) {
  .pf-ask { padding: 36px 0 28px; }
  .pf-ask .section-head { margin-bottom: 24px; }
  .pf-ask .section-head h2 { font-size: 1.85rem; line-height: 1.2; margin-bottom: 12px; }
  .pf-ask .section-head .lede { font-size: .95rem; line-height: 1.55; }
  .pf-ask .ask-box { box-shadow: 0 0 0 4px rgba(255,255,255,.08), 0 16px 40px rgba(0,0,0,.12); }
  .pf-ask .ask-input { min-height: 64px; padding: 14px 16px; font-size: .92rem; }
  .pf-ask .ask-bar { padding: 8px 10px 8px 14px; }
  .pf-ask .ask-answer { margin-top: 12px; }
  .pf-ask .ask-answer .mk-head { padding: 10px 14px; font-size: .82rem; }
  .pf-ask .ask-answer .mk-row { padding: 9px 14px; font-size: .82rem; line-height: 1.4; }
  .pf-ask .ask-answer .mk-row small { font-size: .74rem; }
}
@media (max-width: 380px) {
  .pf-ask { padding: 24px 0 16px; }
  .pf-ask .section-head { margin-bottom: 18px; }
  .pf-ask .section-head h2 { font-size: 1.6rem; }
  .pf-ask .section-head .lede { font-size: .88rem; }
  .pf-ask .ask-answer .mk-row small { display: none; }
}
@media (max-width: 760px) and (max-height: 700px) {
  .pf-ask .section-head .lede { display: none; }
  .pf-ask .section-head h2 { margin-bottom: 0; }
  .pf-ask .ask-input { min-height: 52px; }
}

/* Phone menu: Use Cases sub-links sit inside the menu, no box */
@media (max-width: 760px) {
  .nav-links.open .mega, .nav-links.open .mega__inner, .nav-links.open .mega__col { display: block; position: static; background: transparent !important; border: 0; box-shadow: none; padding: 0; margin: 0; width: auto; }
  .nav-links.open .mega__list { display: block; background: transparent !important; border: 0; border-radius: 0; box-shadow: none; padding: 0 0 18px 16px !important; margin: -4px 0 0; }
  .nav-links.open .mega__list li { margin: 0; }
  .nav-links.open .mega__list a { display: block; padding: 12px 0 !important; border: 0 !important; background: none !important; }
  .nav-links.open .mega__list strong { display: block; font-weight: 500; font-size: 1rem; color: inherit; margin-bottom: 3px; }
  .nav-links.open .mega__list small { display: block; font-size: .82rem; line-height: 1.45; color: inherit !important; opacity: .65; }
  .nav-links.open .has-menu > a .chev { display: none; }
}

/* Full-screen use-case hero (Portfolio Management) */
.page-hero--full { min-height: calc(100vh - 69px); min-height: calc(100svh - 69px); display: flex; align-items: center; padding: 64px 0; }
.page-hero--full > .container { width: 100%; }
.page-hero--full h1 { max-width: 18ch; margin-bottom: 24px; }
.page-hero--full .lede { max-width: 620px; margin-bottom: 36px; }
.page-hero--full h1 { max-width: none; }
.page-hero--full .h1-line { display: block; white-space: nowrap; }
@media (max-width: 760px) { .page-hero--full h1:has(.h1-line--long) { font-size: 6.2vw; line-height: 1.2; } }

/* Portfolio Management: problem statement */
.pm-problem h2 { max-width: 22ch; margin-bottom: 28px; }
.pm-problem .lede { max-width: 720px; margin: 0; }

/* ===== Portfolio Management capability cards (illustration tile + label + text) ===== */
.pm-caps .section-head { margin-bottom: 56px; }
.cap-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 56px 24px; }
.cap__art { aspect-ratio: 1 / 1; border-radius: 14px; background: #efeeec; display: grid; place-items: center; padding: 28px; overflow: hidden; margin-bottom: 24px; }
.cap__label { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; font-size: .78rem; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; color: var(--n20); }
.cap__label svg { width: 16px; height: 16px; fill: none; stroke: var(--p40); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.cap__h { font-family: var(--font); font-size: 1.15rem; font-weight: 600; color: var(--n10); margin: 0 0 8px; line-height: 1.4; }
.cap__p { margin: 0; color: var(--n20); line-height: 1.65; max-width: 40ch; }
@media (max-width: 1000px) { .cap-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .cap-grid { grid-template-columns: 1fr; gap: 48px; } .cap__art { aspect-ratio: 4 / 3.4; } }

/* illustrations */
.cap__art svg { display: block; }
.art-card { background: #fff; border-radius: 12px; box-shadow: 0 1px 2px rgba(0,0,0,.05), 0 14px 34px rgba(60,60,56,.12); font-size: 12px; color: var(--n10); }
.art-card small { display: block; font-size: 10.5px; color: var(--n30); letter-spacing: .01em; }
.art-stack { width: 100%; max-width: 300px; display: grid; gap: 12px; justify-items: start; }
.art-stack > .art-card { width: 100%; }
.art-chip { display: inline-flex; align-items: center; gap: 7px; background: #fff; border-radius: 999px; padding: 7px 12px; font-size: 11.5px; font-weight: 500; color: var(--n10); box-shadow: 0 6px 18px rgba(60,60,56,.12); }
.art-chip svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.art-chip--flag { color: var(--t20); background: var(--t90); }

.art-dash { width: 100%; max-width: 310px; padding: 16px; }
.art-dash__q { display: flex; align-items: center; gap: 8px; background: var(--s90); border: 1px solid var(--s70); border-radius: 8px; padding: 8px 10px; font-size: 11.5px; margin-bottom: 14px; }
.art-dash__q svg { width: 14px; height: 14px; fill: none; stroke: var(--s30); stroke-width: 1.8; flex: none; }
.art-dash__kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 12px; }
.art-dash__kpis b { font-size: 15px; font-weight: 600; }
.art-dash__chart { width: 100%; height: 80px; }

.art-row { display: grid; grid-template-columns: 1fr auto; padding: 12px 14px; align-items: center; row-gap: 2px; }
.art-row small { grid-column: 1 / -1; }
.art-row b { font-size: 15px; font-weight: 600; }
.art-row--doc { margin-left: 22px; width: calc(100% - 22px) !important; border-left: 3px solid var(--t40); }

.art-tl { width: 100%; max-width: 300px; padding: 14px 16px; }
.art-tl__head { display: flex; justify-content: space-between; align-items: baseline; border-bottom: 1px solid var(--n80); padding-bottom: 10px; margin-bottom: 4px; }
.art-tl__head b { font-size: 13px; }
.art-tl ol { list-style: none; margin: 0; padding: 0; }
.art-tl li { display: grid; grid-template-columns: 34px 1fr; gap: 8px; padding: 9px 0; border-bottom: 1px solid var(--n90); align-items: baseline; }
.art-tl li:last-child { border-bottom: 0; }
.art-tl li.is-flag span { color: var(--t20); font-weight: 600; }

.art-pay { display: grid; grid-template-columns: 1fr 1fr; padding: 14px 16px; gap: 10px; }
.art-pay b { display: block; font-size: 17px; font-weight: 600; margin-top: 4px; }
.art-pay b.is-zero { color: var(--t20); }

.art-note { display: flex; gap: 12px; align-items: center; padding: 14px; }
.art-note__ic { width: 34px; height: 34px; border-radius: 9px; background: linear-gradient(135deg, var(--s50), var(--p60)); display: grid; place-items: center; flex: none; }
.art-note__ic svg { width: 18px; height: 18px; fill: none; stroke: #fff; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.art-note b { font-size: 12.5px; font-weight: 600; }
.art-flow { padding: 6px 14px; }
.art-flow > div { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--n90); }
.art-flow > div:last-child { border-bottom: 0; }
.art-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--n60); flex: none; }
.art-dot--on { background: var(--p50); box-shadow: 0 0 0 4px var(--p90); }
@media (min-width: 1001px) {
  .cap-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .cap { grid-column: span 2; }
  .cap:nth-child(4) { grid-column: 2 / span 2; }
}
.cap__h { display: flex; align-items: center; gap: 10px; margin: 0 0 10px; }
.cap__h svg { width: 20px; height: 20px; fill: none; stroke: var(--p40); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; flex: none; }

/* Portfolio Management: benefit statement and "Get started in two steps" */
.pm-benefit { padding: 120px 0; text-align: center; }
.pm-benefit__text { font-family: var(--serif); font-weight: 300; font-size: clamp(1.8rem, 3.4vw, 2.6rem); line-height: 1.3; letter-spacing: -0.015em; color: var(--p20); max-width: 22ch; margin: 0 auto; }
.pm-start { padding: 104px 0 120px; }
.pm-start h2 { text-align: center; margin: 0 0 64px; }
.pm-steps { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 48px 64px; max-width: 920px; margin: 0 auto; }
.pm-step__ic { width: 48px; height: 48px; border-radius: 10px; background: var(--s80); display: grid; place-items: center; margin-bottom: 20px; }
.pm-step__ic svg { width: 24px; height: 24px; fill: none; stroke: var(--s30); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.pm-step h3 { font-family: var(--font); font-size: 1.15rem; font-weight: 600; color: var(--n10); margin: 0 0 8px; }
.pm-step p { margin: 0; color: var(--n20); line-height: 1.65; max-width: 40ch; }
@media (max-width: 760px) {
  .pm-benefit { padding: 96px 0; }
  .pm-start { padding: 88px 0 104px; }
  .pm-start h2 { margin-bottom: 48px; }
  .pm-steps { grid-template-columns: 1fr; gap: 48px; }
}
.pm-benefit { padding: 120px 0 56px; }
.pm-benefit__text { max-width: none; }
.pm-start { padding-top: 64px; }
@media (max-width: 760px) { .pm-benefit { padding: 96px 0 40px; } .pm-start { padding-top: 56px; } }
.pm-start h2 { margin-bottom: 16px; }
.pm-start__sub { text-align: center; font-size: 1.15rem; color: var(--n20); margin: 0 auto 64px; max-width: 40ch; }
@media (max-width: 760px) { .pm-start__sub { margin-bottom: 48px; } }

/* Use-case placeholders and 3-step layout */
.cap__art--ph { background: #f4f3f1; border: 1.5px dashed var(--n60); }
.cap__art--ph span { display: inline-flex; align-items: center; gap: 8px; font-size: .85rem; color: var(--n30); }
.cap__art--ph svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; }
.pm-steps--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: none; gap: 48px; }
@media (max-width: 900px) { .pm-steps--3 { grid-template-columns: 1fr; } }
.pm-start h2 + .pm-steps { margin-top: 64px; }
@media (max-width: 760px) { .pm-start h2 + .pm-steps { margin-top: 48px; } }
@media (max-width: 760px) { .page-hero--full h1:has(.h1-line):not(:has(.h1-line--long)) { font-size: min(2.5rem, 8.6vw); line-height: 1.2; } }

/* QC & Diligence illustrations */
.art-docs li { grid-template-columns: 1fr auto !important; }
.art-docs em { font-style: normal; font-size: 10.5px; font-weight: 600; padding: 3px 8px; border-radius: 999px; background: var(--s80); color: var(--s20); }
.art-docs em.is-flag { background: var(--t90); color: var(--t20); }
.art-docs em.is-trail { background: var(--p90); color: var(--p40); }
.art-doc { padding: 14px 16px; }
.art-doc small { margin-bottom: 10px; }
.art-doc__lines { display: grid; gap: 7px; margin: 8px 0; }
.art-doc__lines i { display: block; height: 6px; border-radius: 3px; background: var(--n80); }
.art-doc__lines i.w60 { width: 60%; } .art-doc__lines i.w80 { width: 80%; } .art-doc__lines i.w40 { width: 40%; }
.art-doc__hit { display: flex; justify-content: space-between; align-items: center; padding: 8px 10px; border-radius: 6px; background: #fff6c8; box-shadow: inset 0 0 0 1.5px #f2c94c; font-size: 11.5px; }
.art-doc__hit b { font-size: 13px; }
.art-bars { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; align-items: end; height: 120px; padding-top: 6px; }
.art-bars > div { display: grid; grid-template-rows: 1fr auto; height: 100%; gap: 6px; justify-items: center; }
.art-bars span { align-self: end; width: 100%; border-radius: 6px 6px 2px 2px; background: linear-gradient(180deg, var(--s50), var(--p60)); }
.art-bars small { font-size: 10px; }
.art-chat { width: 100%; max-width: 310px; padding: 16px; display: grid; gap: 12px; }
.art-chat__me { justify-self: end; max-width: 85%; background: var(--p20); color: #fff; border-radius: 14px 14px 4px 14px; padding: 9px 12px; font-size: 11.5px; line-height: 1.45; }
.art-chat__ai { display: grid; grid-template-columns: 26px 1fr; gap: 8px; align-items: start; }
.art-chat__av { width: 26px; height: 26px; border-radius: 8px; background: linear-gradient(135deg, var(--s50), var(--p60)); display: grid; place-items: center; }
.art-chat__av svg { width: 14px; height: 14px; fill: none; stroke: #fff; stroke-width: 1.8; stroke-linecap: round; }
.art-chat__ai p { margin: 0 0 8px; background: var(--n90); border-radius: 4px 14px 14px 14px; padding: 9px 12px; font-size: 11.5px; line-height: 1.45; }
.art-chat__src { display: flex; flex-wrap: wrap; gap: 6px; }
.art-chat__src span { font-size: 10px; padding: 3px 8px; border-radius: 999px; background: var(--s80); color: var(--s20); font-weight: 500; }

/* Use-case pages: hero not full screen, but much more breathing room everywhere */
.page-hero--full { min-height: 0; display: block; padding: 176px 0 168px; }
.pm-problem { padding: 152px 0; }
.pm-caps { padding: 152px 0 160px; }
.pm-start { padding: 152px 0 160px; }
.pm-caps .section-head { margin-bottom: 72px; }
@media (max-width: 760px) {
  .page-hero--full { padding: 112px 0 104px; }
  .pm-problem { padding: 104px 0; }
  .pm-caps { padding: 104px 0 112px; }
  .pm-caps .section-head { margin-bottom: 56px; }
  .pm-start { padding: 104px 0 112px; }
}
/* Use-case hero: doubled top and bottom spacing */
.page-hero--full { padding: 352px 0 336px; }
@media (max-width: 760px) { .page-hero--full { padding: 224px 0 208px; } }