/* biotiq website: fonts, layout and sections. Tokens and shared components come from tokens.css. */

/* ---------- fonts (self-hosted, no calls to Google) ---------- */

@font-face { font-family: 'Geist'; src: url(/assets/fonts/geist-latin.woff2) format('woff2'); font-weight: 100 900; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Geist'; src: url(/assets/fonts/geist-latin-ext.woff2) format('woff2'); font-weight: 100 900; font-style: normal; font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Geist Mono'; src: url(/assets/fonts/geist-mono-latin.woff2) format('woff2'); font-weight: 100 900; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Geist Mono'; src: url(/assets/fonts/geist-mono-latin-ext.woff2) format('woff2'); font-weight: 100 900; font-style: normal; font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'DM Sans'; src: url(/assets/fonts/DMSans-700.woff2) format('woff2'); font-weight: 700; font-style: normal; font-display: swap; }
/* Until Geist arrives, Helvetica Neue at Geist's width (the system font is about 10% narrower), so text keeps its
   lines when Geist swaps in. Measured in WebKit on the site's paragraphs: 0.3 to 0.4% mean width error per weight. */
@font-face { font-family: 'Geist Fallback'; src: local('Helvetica Neue'), local('HelveticaNeue'); font-weight: 100 449; size-adjust: 101.7%; }
@font-face { font-family: 'Geist Fallback'; src: local('Helvetica Neue Medium'), local('HelveticaNeue-Medium'); font-weight: 450 549; size-adjust: 100.7%; }
@font-face { font-family: 'Geist Fallback'; src: local('Helvetica Neue Bold'), local('HelveticaNeue-Bold'); font-weight: 550 900; size-adjust: 99.9%; }

/* ---------- base ---------- */

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bl-light); overflow-x: hidden; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
.bl [id] { scroll-margin-top: 96px; }
.bl :focus-visible { outline: 2px solid var(--bl-dark); outline-offset: 2px; }
.box--dark :focus-visible, .dark-sec :focus-visible, .on-dark:focus-visible { outline-color: var(--bl-primary); }
.skip { position: absolute; left: -9999px; top: 12px; z-index: 100; padding: 8px 12px; border-radius: var(--r-8); background: #fff; }
.skip:focus { left: 12px; }
.bl p { text-wrap: pretty; }
.bl a.link { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.center { text-align: center; }
.mt-48 { margin-top: 48px; }

/* ---------- navigation ---------- */

.nav .pill.is-on { background: var(--bl-dark); }
.nav .logo { font-size: 20px; }
.nav-menu { display: none; border: 0; cursor: pointer; font: 500 14px/20px var(--font); }
.nav-sheet {
  position: absolute; top: calc(100% + 8px); right: 0; min-width: 240px; display: grid; gap: 2px; padding: 8px;
  border-radius: var(--r-12); background: rgba(248, 247, 244, .98); box-shadow: inset 0 0 0 1px var(--line-glass), var(--shadow-float);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
}
.nav-sheet[hidden] { display: none; }
.nav-sheet a { padding: 12px 14px; border-radius: var(--r-8); font-size: 16px; line-height: 20px; text-decoration: none; }
.nav-sheet a:hover { background: rgba(36, 35, 32, .06); }
@media (max-width: 900px) {
  .nav .nav-pills .pill.nav-menu { display: inline-flex; }
}
@media (max-width: 380px) {
  .nav .pill--cta { display: none; }
}

/* ---------- split hero (home) ---------- */

.hero { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 8px; height: clamp(700px, 100svh, 920px); }
.hero .pane, .page-hero .pane { position: relative; overflow: hidden; border-radius: var(--r-16); min-width: 0; }
.hero .pane-img { background: var(--bl-grey-light); }
.pane-img > img.fill { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero .pane-txt { display: flex; flex-direction: column; gap: 24px; padding: 140px 48px 40px 64px; background: var(--bl-yellow-7); }
.hero .pane-txt .lead { max-width: 560px; color: var(--bl-dark-light); }
.hero .ctas, .page-hero .ctas, .ctas { display: flex; flex-wrap: wrap; gap: 8px; }
.hero .foot-note { margin-top: auto; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; }
.works-with { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; line-height: 18px; color: var(--bl-dark-light); }
.works-with .hs { width: 18px; height: 18px; }
.hs { color: #ff7a59; }

/* glass signal card on top of the hero image */
.sigcard {
  position: absolute; left: 7%; bottom: 8%; width: min(360px, 84%); display: grid; gap: 12px; padding: 16px 18px 16px;
  border-radius: var(--r-14); background: rgba(248, 247, 244, .78); box-shadow: inset 0 0 0 1px var(--line-glass), var(--shadow-float);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.sigcard-top { display: flex; align-items: center; gap: 8px; }
.sigcard-top .meta { margin-left: auto; }
.pulse { width: 8px; height: 8px; border-radius: 50%; background: var(--bl-primary); box-shadow: 0 0 0 4px rgba(250, 195, 15, .28); flex: none; }
.sigcard-co { margin: 0; font-size: 18px; line-height: 24px; letter-spacing: -.02em; }
.sigcard-co span { display: block; font-size: 13px; line-height: 18px; color: var(--bl-dark-light); letter-spacing: -.01em; }
.sigcard-row { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--bl-dark-light); }
.sigcard-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; padding-top: 12px; border-top: 1px solid rgba(36, 35, 32, .12); font-size: 13px; }
.synced { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; line-height: 18px; }
.synced svg { width: 15px; height: 15px; }
.sigcard--b { left: auto; right: 6%; bottom: auto; top: 16%; width: min(260px, 70%); gap: 8px; padding: 12px 14px; }

/* redacted text: we show that a signal exists, never what it is */
.redact { display: inline-block; height: 10px; width: 120px; max-width: 100%; border-radius: 3px; background: var(--bl-dark); vertical-align: middle; opacity: .88; }
.redact--soft { background: rgba(36, 35, 32, .22); }
.on-dark .redact, .redact--light { background: rgba(255, 255, 255, .82); }
.lockline { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; line-height: 16px; color: var(--bl-dark-light); }
.lockline svg { width: 13px; height: 13px; }

@media (max-width: 900px) {
  .hero { grid-template-columns: 1fr; height: auto; }
  .hero .pane-txt { padding: 112px 24px 48px; }
  .hero .pane-img { height: 520px; order: 2; }
}

/* ---------- the section that slides over the hero, statement ---------- */

.over { position: relative; z-index: 2; margin-top: -40px; border-radius: var(--r-40) var(--r-40) 0 0; background: var(--bl-light); }
.statement { max-width: 1040px; margin-inline: auto; text-align: center; }
.statement .w { color: var(--bl-grey-medium); transition: color .25s ease; }
.statement .w.on { color: var(--bl-dark); }
@media (prefers-reduced-motion: reduce) { .statement .w { color: var(--bl-dark); transition: none; } }

/* ---------- ten signals: them versus us ---------- */

.versus { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; max-width: 1000px; margin: 72px auto 0; }
.vs-card { display: grid; align-content: start; gap: 16px; padding: 24px 24px 20px; border-radius: var(--r-16); min-width: 0; }
.vs-card--them { background: var(--bl-grey-light); }
.vs-card--us { background: var(--bl-card); box-shadow: 0 0 0 1px rgba(36, 35, 32, .08), var(--shadow-frame); }
.vs-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.vs-head .logo { font-size: 18px; }
.vs-head .h6 { font-weight: 500; }
.vs-list { list-style: none; margin: 0; padding: 0; counter-reset: sig; }
.vs-list li { display: grid; grid-template-columns: 30px minmax(0, 1fr) 20px; align-items: center; gap: 12px; height: 38px; border-top: 1px solid rgba(36, 35, 32, .08); counter-increment: sig; }
.vs-list li::before { content: counter(sig, decimal-leading-zero); font: 500 12px/1 var(--mono); color: var(--bl-grey); }
.vs-list .blank { display: block; border-top: 1px dashed rgba(36, 35, 32, .25); }
.vs-list .q { font-size: 14px; color: var(--bl-grey); }
.vs-list svg { width: 16px; height: 16px; }
.vs-card--us .vs-list svg { color: var(--state-good); }
.vs-card--them .vs-list svg { color: var(--bl-grey); }
.vs-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 13px; line-height: 18px; color: var(--bl-dark-light); }
@media (max-width: 760px) { .versus { grid-template-columns: 1fr; } }

/* ---------- engine: three layers ---------- */

.layers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 56px; }
.layer { display: flex; flex-direction: column; border-radius: var(--r-16); background: var(--bl-card); border: 1px solid var(--line); overflow: hidden; min-width: 0; }
.layer-h { display: grid; gap: 8px; padding: 24px 24px 22px; background: var(--bl-yellow-7); }
.layer-h p { margin: 0; color: var(--bl-dark-light); font-size: 15px; line-height: 22px; }
.layer ol { list-style: none; margin: 0; padding: 4px 24px 12px; }
.layer li { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 4px 10px; padding: 16px 0; border-top: 1px solid var(--line); }
.layer li:first-child { border-top: 0; }
.layer li .n { font: 500 12px/24px var(--mono); color: var(--bl-grey); }
.layer li b { font-weight: 500; font-size: 17px; line-height: 24px; letter-spacing: -.01em; }
.layer li p { grid-column: 2; margin: 0; color: var(--bl-dark-light); font-size: 15px; line-height: 22px; }
.layer-link { margin-top: auto; padding: 0 24px 24px; }
@media (max-width: 960px) { .layers { grid-template-columns: 1fr; } }

/* ---------- dark container (platform on the home page) ---------- */

.dark-sec { padding: 112px 0 104px; }
.dark-sec .lead { color: #d9d6d0; }
.feats { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 32px; margin-top: 72px; }
.feats div { display: grid; gap: 10px; align-content: start; }
.feats h3 { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 16px; line-height: 22px; font-weight: 500; color: #fff; }
.feats h3 svg { width: 16px; height: 16px; color: var(--bl-yellow-3); }
.feats p { margin: 0; font-size: 15px; line-height: 22px; color: #cfccc6; }
.works-row { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 10px; margin-top: 56px; }
.works-chip { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 16px; border-radius: var(--r-full); background: rgba(255, 255, 255, .06); box-shadow: inset 0 0 0 1px var(--line-dark); color: #fff; font-size: 14px; }
.works-chip svg { width: 18px; height: 18px; }
.works-chip--light { background: var(--bl-card); box-shadow: inset 0 0 0 1px var(--line); color: var(--bl-dark); }
@media (max-width: 1100px) { .feats { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 700px) { .feats { grid-template-columns: 1fr 1fr; gap: 28px 20px; } .dark-sec { padding: 72px 0; } }
@media (max-width: 460px) { .feats { grid-template-columns: 1fr; } }

/* ---------- app mockup (HTML, neutral placeholder data, signals redacted) ---------- */

.app-stage { position: relative; max-width: 1060px; margin: 56px auto 0; }
.app { display: grid; grid-template-columns: 210px minmax(0, 1fr); min-height: 460px; border-radius: var(--r-12); overflow: hidden; background: var(--bl-card); color: var(--bl-dark); box-shadow: 0 0 0 1px rgba(36, 35, 32, .08), var(--shadow-frame); text-align: left; }
.app-side { display: grid; align-content: start; gap: 2px; padding: 14px 10px; background: var(--bl-light); border-right: 1px solid var(--line); font-size: 13px; line-height: 18px; }
.app-side .logo { font-size: 16px; padding: 4px 8px 10px; }
.app-side .logo img { width: 18px; height: 18px; }
.app-side .input { margin: 0 4px 10px; height: 30px; }
.app-group { margin: 10px 8px 4px; font-size: 11px; line-height: 14px; font-weight: 500; text-transform: uppercase; letter-spacing: .02em; color: var(--bl-grey); }
.app-nav { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: var(--r-6); color: var(--bl-dark-light); }
.app-nav svg { width: 15px; height: 15px; }
.app-nav.is-on { background: var(--bl-yellow-6); color: var(--bl-dark); font-weight: 500; }
.app-conn { display: flex; align-items: center; gap: 8px; padding: 6px 8px; }
.app-conn svg { width: 15px; height: 15px; }
.app-conn i { margin-left: auto; width: 7px; height: 7px; border-radius: 50%; background: var(--state-good); }
.app-main { display: grid; align-content: start; gap: 14px; padding: 18px 22px 22px; min-width: 0; }
.app-crumb { font-size: 12px; color: var(--bl-grey); }
.app-title { margin: 0; font-size: 24px; line-height: 28px; font-weight: 400; letter-spacing: -.03em; }
.app-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; }
.app .tbl td { white-space: nowrap; }
.app .tbl td:first-child { white-space: normal; }
.acct { display: grid; gap: 1px; }
.acct b { font-weight: 500; }
.acct span { font-size: 12px; color: var(--bl-grey); }
.sig { display: inline-flex; align-items: center; gap: 8px; padding: 3px 8px; border-radius: var(--r-6); background: var(--bl-yellow-7); border: 1px solid var(--bl-yellow-5); }
.sig .redact { width: 84px; height: 8px; }
.sig svg { width: 12px; height: 12px; color: var(--bl-gold); }
.fit { display: inline-block; width: 64px; height: 4px; border-radius: 2px; background: var(--bl-grey-light); overflow: hidden; vertical-align: middle; }
.fit i { display: block; height: 100%; background: var(--bl-dark); }
.ok-chip { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: var(--bl-dark-light); }
.ok-chip svg { width: 13px; height: 13px; }
@media (max-width: 860px) {
  .app { grid-template-columns: 1fr; }
  .app-side { display: none; }
  .app .hide-sm { display: none; }
}


/* ---------- who we work for: tall image cards ---------- */

.who { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 56px; }
.who-card { display: flex; flex-direction: column; border-radius: var(--r-16); overflow: hidden; background: var(--bl-card); border: 1px solid var(--line); min-width: 0; }
.who-card .img { aspect-ratio: 5 / 4; overflow: hidden; background: var(--bl-grey-light); }
.who-card .img img { width: 100%; height: 100%; object-fit: cover; }
.who-card .txt { display: flex; flex-direction: column; gap: 12px; padding: 24px; flex: 1; }
.who-card .txt p { margin: 0; color: var(--bl-dark-light); font-size: 15px; line-height: 23px; }
.who-card .pain { padding: 12px 14px; border-radius: var(--r-8); background: var(--bl-light); font-size: 14px; line-height: 21px; }
.who-card .txt .btn { margin-top: auto; align-self: flex-start; }
@media (max-width: 960px) { .who { grid-template-columns: 1fr; } .who-card { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); } .who-card .img { aspect-ratio: auto; height: 100%; min-height: 260px; } }
@media (max-width: 640px) { .who-card { display: flex; } .who-card .img { aspect-ratio: 5 / 4; height: auto; min-height: 0; } }

/* ---------- offers ---------- */

.offers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 56px; }
.offer { display: flex; flex-direction: column; gap: 16px; padding: 28px 28px 28px; border-radius: var(--r-16); background: var(--bl-card); border: 1px solid var(--line); min-width: 0; }
.offer--main { background: var(--bl-yellow-7); border-color: var(--bl-yellow-6); }
.offer .kicker { margin: 0; font: 500 12px/16px var(--mono); text-transform: uppercase; letter-spacing: .02em; color: var(--bl-dark-light); }
.offer p { margin: 0; color: var(--bl-dark-light); font-size: 15px; line-height: 23px; }
.offer ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.offer li { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 10px; font-size: 15px; line-height: 22px; }
.offer li svg { width: 16px; height: 16px; margin-top: 3px; }
.offer .best { padding-top: 14px; border-top: 1px solid rgba(36, 35, 32, .12); font-size: 14px; line-height: 20px; color: var(--bl-dark-light); }
.offer .btn { margin-top: auto; align-self: flex-start; }
@media (max-width: 960px) { .offers { grid-template-columns: 1fr; } }

/* ---------- proof ---------- */

.proof { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 48px; align-items: center; }
.logo-row { display: flex; flex-wrap: wrap; align-items: center; gap: 32px; }
.logo-row img { height: 34px; width: auto; filter: grayscale(1) contrast(1.1); opacity: .85; }
.principles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.principles > div { display: grid; gap: 8px; align-content: start; padding: 22px; border-radius: var(--r-16); background: var(--bl-grey-light); }
.principles h3 { display: flex; align-items: center; gap: 10px; margin: 0; font-size: 17px; line-height: 24px; font-weight: 500; }
.principles h3 svg { width: 18px; height: 18px; }
.principles p { margin: 0; font-size: 15px; line-height: 23px; color: var(--bl-dark-light); }
@media (max-width: 900px) { .proof { grid-template-columns: 1fr; gap: 32px; } }
@media (max-width: 560px) { .principles { grid-template-columns: 1fr; } }

/* ---------- FAQ ---------- */

.faq { max-width: 880px; margin: 48px auto 0; border-top: 1px solid var(--line-input); }
.faq details { border-bottom: 1px solid var(--line-input); }
.faq summary { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; padding: 22px 0; cursor: pointer; list-style: none; font-size: 20px; line-height: 28px; letter-spacing: -.02em; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary svg { flex: none; width: 20px; height: 20px; margin-top: 4px; transition: transform .2s ease; }
.faq details[open] summary svg { transform: rotate(45deg); }
.faq .a { padding: 0 56px 24px 0; color: var(--bl-dark-light); font-size: 16px; line-height: 26px; }
.faq .a p { margin: 0 0 12px; }
.faq .a p:last-child { margin-bottom: 0; }
@media (max-width: 560px) { .faq summary { font-size: 18px; line-height: 25px; } .faq .a { padding-right: 0; } }

/* ---------- final call to action ---------- */

.final-box { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); align-items: stretch; }
.final-txt { display: grid; align-content: center; gap: 24px; padding: 96px 64px; }
.final-txt .lead { color: #d9d6d0; max-width: 520px; }
.final-img { position: relative; min-height: 420px; }
.final-img img { position: absolute; inset: 24px 24px 24px 0; width: calc(100% - 24px); height: calc(100% - 48px); object-fit: cover; border-radius: var(--r-12); }
@media (max-width: 900px) { .final-box { grid-template-columns: 1fr; } .final-txt { padding: 64px 24px 32px; } .final-img { min-height: 300px; } .final-img img { inset: 0 12px 12px 12px; width: calc(100% - 24px); height: calc(100% - 12px); } }

/* ---------- footer ---------- */

.foot { padding: 112px 0 0; }
.foot-grid { display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: 32px; }
.foot-grid h4 { margin: 0 0 12px; font-size: 12px; line-height: 16px; font-weight: 500; text-transform: uppercase; letter-spacing: .02em; color: var(--bl-dark-light); }
.foot-grid a.logo { display: inline-flex; padding: 0; font-size: 20px; }
.foot-grid a:not(.logo) { display: block; padding: 3px 0; font-size: 15px; line-height: 22px; text-decoration: none; }
.foot-grid a:not(.logo):hover { text-decoration: underline; text-underline-offset: 3px; }
.foot-grid p { margin: 12px 0 0; max-width: 300px; font-size: 14px; line-height: 20px; color: var(--bl-dark-light); }
.foot-legal { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 16px; margin-top: 64px; padding-top: 20px; border-top: 1px solid var(--line-input); font-size: 13px; color: var(--bl-grey); }
.band { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; height: 160px; margin-top: 56px; padding: 0 32px; overflow: hidden; }
.band img { height: 100%; width: auto; min-width: 0; object-fit: contain; }
.band img:nth-child(even) { height: 72%; }
@media (max-width: 760px) { .foot-grid { grid-template-columns: 1fr 1fr; } .foot-grid > div:first-child { grid-column: 1 / -1; } .band { height: 84px; padding: 0 12px; } .band img:nth-child(n+6) { display: none; } }

/* ---------- inner page hero ---------- */

.page-hero { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 8px; min-height: clamp(620px, 82svh, 780px); }
.page-hero .pane-txt { display: flex; flex-direction: column; justify-content: flex-end; gap: 24px; padding: 132px 48px 64px 64px; background: var(--bl-yellow-7); }
.page-hero .pane-txt .lead { max-width: 560px; color: var(--bl-dark-light); }
.page-hero .pane-img { background: var(--bl-grey-light); }
.page-hero .pane-img .engr { position: absolute; width: min(54%, 360px); left: 50%; top: 54%; transform: translate(-50%, -50%); }
.page-hero--short { height: auto; }
.page-hero--short .pane-txt { padding-top: 140px; }
@media (max-width: 900px) {
  .page-hero { grid-template-columns: 1fr; height: auto; }
  .page-hero .pane-txt { padding: 112px 24px 48px; }
  .page-hero .pane-img { height: 380px; }
}

/* ---------- services: one block per system ---------- */

.layer-sec { padding-top: 24px; }
.layer-title { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px; align-items: end; padding: 56px 0 24px; border-bottom: 1px solid var(--line-input); }
.layer-title p { margin: 0; color: var(--bl-dark-light); font-size: 17px; line-height: 26px; }
.sys { display: grid; grid-template-columns: 120px minmax(0, 1fr) minmax(0, 1fr); gap: 32px; padding: 40px 0; border-bottom: 1px solid var(--line); }
.sys .n { font: 500 13px/20px var(--mono); color: var(--bl-grey); }
.sys .n b { display: block; margin-top: 6px; font: 400 24px/28px var(--font); letter-spacing: -.03em; color: var(--bl-dark); }
.sys h3 { margin: 0 0 12px; }
.sys p { margin: 0; color: var(--bl-dark-light); font-size: 16px; line-height: 25px; }
.sys .ex { align-self: start; padding: 18px 20px; border-radius: var(--r-12); background: var(--bl-grey-light); font-size: 15px; line-height: 23px; color: var(--bl-dark-light); }
.sys .ex b { display: block; margin-bottom: 6px; font: 500 11px/16px var(--mono); text-transform: uppercase; letter-spacing: .03em; color: var(--bl-dark); }
@media (max-width: 960px) { .layer-title { grid-template-columns: 1fr; gap: 12px; } .sys { grid-template-columns: 1fr; gap: 16px; padding: 32px 0; } }

/* how an engagement runs */
.steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-top: 48px; counter-reset: st; }
.steps > div { display: grid; gap: 12px; align-content: start; padding: 24px; border-radius: var(--r-16); background: var(--bl-card); border: 1px solid var(--line); min-width: 0; }
.steps > div::before { counter-increment: st; content: counter(st); display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--bl-yellow-6); font-size: 14px; font-weight: 500; }
.steps h3 { margin: 0; }
.steps p { margin: 0; font-size: 15px; line-height: 23px; color: var(--bl-dark-light); }
@media (max-width: 960px) { .steps { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .steps { grid-template-columns: 1fr; } }

/* ---------- platform: feature blocks with mockups ---------- */

.feature { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 56px; align-items: center; padding-block: 72px; border-top: 1px solid var(--line-input); }
.feature:nth-of-type(even) .feature-vis { order: -1; }
.feature-txt { display: grid; gap: 16px; align-content: start; }
.feature-txt .lead { color: var(--bl-dark-light); }
.feature-txt ul { margin: 4px 0 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.feature-txt li { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 10px; font-size: 15px; line-height: 22px; color: var(--bl-dark-light); }
.feature-txt li svg { width: 16px; height: 16px; margin-top: 3px; color: var(--bl-dark); }
.feature-vis { position: relative; border-radius: var(--r-16); background: var(--grad-persona); padding: 40px; min-width: 0; }
.feature-vis--img { padding: 0; overflow: hidden; background: var(--bl-grey-light); }
.feature-vis--img img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 1 / 1; }
@media (max-width: 900px) { .feature { grid-template-columns: 1fr; gap: 28px; padding-block: 48px; } .feature:nth-of-type(even) .feature-vis { order: 0; } .feature-vis { padding: 20px; } }

/* mock cards inside feature visuals */
.mock { border-radius: var(--r-12); background: var(--bl-card); box-shadow: 0 0 0 1px rgba(36, 35, 32, .08), var(--shadow-frame); overflow: hidden; font-size: 13px; line-height: 18px; color: var(--bl-dark); }
.mock + .mock { margin-top: 12px; }
.mock-h { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--line); font-weight: 500; font-size: 14px; }
.mock-h .meta { font-weight: 400; }
.mock-h .t { display: flex; align-items: center; gap: 8px; }
.mock-h svg { width: 16px; height: 16px; }
.mock-b { padding: 14px 16px; }
.mock-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 11px 16px; border-bottom: 1px solid var(--line); }
.mock-row:last-child { border-bottom: 0; }
.mock-row .acct b { font-size: 13px; }
.kv { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 8px 16px; }
.kv dt { color: var(--bl-grey); }
.kv dd { margin: 0; }
.connect { display: flex; align-items: center; gap: 14px; padding: 18px 16px; }
.connect .tile { display: grid; place-items: center; width: 44px; height: 44px; border-radius: var(--r-12); background: #fff4f0; flex: none; }
.connect .tile svg { width: 24px; height: 24px; }
.connect .tile--bq { background: var(--biotiq-lime); }
.connect .tile--bq img { width: 26px; height: 26px; }
.connect .wire { flex: 1; height: 2px; background: repeating-linear-gradient(90deg, var(--bl-grey-medium) 0 6px, transparent 6px 11px); }
.connect .state { display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px; border-radius: var(--r-full); background: #e7f4ed; color: var(--state-good); font-size: 12px; font-weight: 500; }
.toggle-list { display: grid; gap: 10px; }
.toggle-list .switch { justify-content: space-between; width: 100%; }
.comp { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 12px 16px; border-bottom: 1px solid var(--line); }
.comp:last-child { border-bottom: 0; }
.comp .av { display: grid; place-items: center; width: 36px; height: 36px; border-radius: var(--r-8); background: var(--bl-grey-light); font-weight: 600; font-size: 13px; }
.comp .what { display: grid; gap: 2px; }
.comp .what span { color: var(--bl-grey); font-size: 12px; }
.tag { display: inline-flex; padding: 2px 8px; border-radius: var(--r-4); font-size: 12px; line-height: 16px; background: var(--bl-grey-light); color: var(--bl-dark); }
.tag--y { background: var(--bl-yellow-6); }
.spark { display: block; width: 100%; height: 120px; }
.mail { padding: 20px 22px; display: grid; gap: 14px; }
.mail-meta { display: grid; gap: 2px; padding-bottom: 12px; border-bottom: 1px solid var(--line); color: var(--bl-grey); font-size: 12px; }
.mail-meta b { color: var(--bl-dark); font-weight: 500; font-size: 15px; }
.mail .mail-h { margin: 0; font: 500 11px/16px var(--mono); text-transform: uppercase; letter-spacing: .03em; color: var(--bl-dark-light); }
.mail .item { display: grid; grid-template-columns: 8px minmax(0, 1fr); gap: 10px; align-items: center; }
.mail .item i { width: 8px; height: 8px; border-radius: 2px; background: var(--bl-primary); }
.mail .lines { display: grid; gap: 6px; }
.mail .line { height: 8px; border-radius: 3px; background: var(--bl-grey-light); }

/* how it connects: sources into biotiq, out to your tools */
.flow { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 24px; align-items: center; max-width: 980px; margin: 56px auto 0; }
.flow-col { display: grid; gap: 8px; }
.flow-item { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-radius: var(--r-12); background: rgba(255, 255, 255, .06); box-shadow: inset 0 0 0 1px var(--line-dark); color: #fff; font-size: 15px; }
.flow-item svg { width: 18px; height: 18px; color: var(--bl-yellow-3); }
.flow-item .hs { color: #ff7a59; }
.flow-hub { display: grid; justify-items: center; gap: 12px; }
.flow-hub .tile { display: grid; place-items: center; width: 92px; height: 92px; border-radius: 22px; background: var(--biotiq-lime); box-shadow: 0 0 0 10px rgba(250, 195, 15, .12), 0 0 0 22px rgba(250, 195, 15, .06); }
.flow-hub .tile img { width: 52px; height: 52px; }
.flow-hub span { font: 500 12px/16px var(--mono); text-transform: uppercase; letter-spacing: .03em; color: rgba(255, 255, 255, .72); }
.flow-arrow { display: none; }
@media (max-width: 760px) { .flow { grid-template-columns: 1fr; } .flow-hub { padding: 12px 0; } }

/* promises */
.never { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 48px; }
.never > div { display: grid; gap: 10px; align-content: start; padding: 24px; border-radius: var(--r-16); background: var(--bl-grey-light); min-width: 0; }
.never svg { width: 20px; height: 20px; }
.never h3 { margin: 0; font-size: 18px; line-height: 24px; font-weight: 500; letter-spacing: -.01em; }
.never p { margin: 0; font-size: 15px; line-height: 23px; color: var(--bl-dark-light); }
@media (max-width: 900px) { .never { grid-template-columns: 1fr; } }

/* split text + image row */
.split { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 56px; align-items: center; }
.split .photo { aspect-ratio: 4 / 3; }
.split .photo img { width: 100%; height: 100%; object-fit: cover; }
.split-txt { display: grid; gap: 18px; align-content: start; }
.split-txt p { margin: 0; color: var(--bl-dark-light); font-size: 17px; line-height: 27px; }
@media (max-width: 900px) { .split { grid-template-columns: 1fr; gap: 28px; } }

/* ---------- about ---------- */

.team { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 48px; }
.person { display: grid; grid-template-columns: minmax(0, 220px) minmax(0, 1fr); gap: 28px; padding: 24px; border-radius: var(--r-16); background: var(--bl-card); border: 1px solid var(--line); min-width: 0; }
.person img { width: 100%; height: auto; align-self: start; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 30%; border-radius: var(--r-12); background: var(--bl-grey-light); }
.person .txt { display: grid; gap: 12px; align-content: start; }
.person .role { margin: 0; font: 500 12px/16px var(--mono); text-transform: uppercase; letter-spacing: .02em; color: var(--bl-dark-light); }
.person p { margin: 0; font-size: 15px; line-height: 23px; color: var(--bl-dark-light); }
@media (max-width: 1000px) { .team { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .person { grid-template-columns: 1fr; } .person img { max-width: 260px; } }

/* ---------- scan form ---------- */

.scan-wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; align-items: start; }
.form-card { padding: 32px; border-radius: var(--r-16); background: var(--bl-card); box-shadow: 0 0 0 1px rgba(36, 35, 32, .08), var(--shadow-frame); }
.form { display: grid; gap: 16px; }
.form .row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.fgroup label { display: block; margin-bottom: 6px; font-size: 14px; line-height: 20px; font-weight: 500; }
.fgroup label span { font-weight: 400; color: var(--bl-grey); }
.fgroup input, .fgroup textarea, .fgroup select {
  width: 100%; min-height: 44px; padding: 10px 12px; border: 1px solid var(--line-input); border-radius: var(--r-8);
  background: #fff; color: var(--bl-dark); font: 400 16px/22px var(--font); letter-spacing: -.01em;
}
.fgroup textarea { min-height: 112px; resize: vertical; }
.fgroup input:focus, .fgroup textarea:focus, .fgroup select:focus { outline: 2px solid var(--bl-yellow-5); outline-offset: 0; border-color: var(--bl-dark-light); }
.form .btn { height: 44px; padding: 0 20px; font-size: 15px; }
.form-msg { margin: 0; padding: 12px 14px; border-radius: var(--r-8); font-size: 15px; line-height: 22px; }
.form-msg[hidden] { display: none; }
.form-msg.ok { background: #e7f4ed; color: var(--state-good); }
.form-msg.err { background: #fbece5; color: var(--state-bad); }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.gets { display: grid; gap: 14px; margin: 8px 0 0; padding: 0; list-style: none; }
.gets li { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 12px; font-size: 16px; line-height: 24px; color: var(--bl-dark-light); }
.gets li svg { width: 18px; height: 18px; margin-top: 3px; color: var(--bl-dark); }
.gets b { color: var(--bl-dark); font-weight: 500; }
.split-txt .next-h { margin: 8px 0 0; font-size: 15px; line-height: 22px; font-weight: 500; color: var(--bl-dark); }
.next-list { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; counter-reset: nx; }
.next-list li { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 12px; font-size: 16px; line-height: 24px; color: var(--bl-dark-light); counter-increment: nx; }
.next-list li::before { content: counter(nx); display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--bl-yellow-6); font-size: 13px; font-weight: 500; color: var(--bl-dark); }
.next-list b { color: var(--bl-dark); font-weight: 500; }
@media (max-width: 900px) { .scan-wrap { grid-template-columns: 1fr; } .form .row2 { grid-template-columns: 1fr; } .form-card { padding: 22px; } }

/* ---------- legal ---------- */

.legal { max-width: 780px; margin: 0 auto; }
.legal h2 { margin: 40px 0 12px; font-size: 24px; line-height: 30px; font-weight: 400; letter-spacing: -.02em; }
.legal h3 { margin: 24px 0 8px; font-size: 18px; line-height: 26px; font-weight: 500; }
.legal p, .legal li { color: var(--bl-dark-light); font-size: 16px; line-height: 26px; }
.legal ul, .legal ol { padding-left: 22px; }
.legal a { text-decoration: underline; text-underline-offset: 3px; }
.legal .meta { margin-top: 8px; }

/* ---------- 404 ---------- */

.nf { display: grid; justify-items: center; gap: 20px; padding: 180px 24px 80px; text-align: center; }
.nf img { width: 220px; }

/* ---------- additions ---------- */

.outcomes { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-top: 8px; }
.outcomes p { display: flex; gap: 10px; align-items: flex-start; margin: 0; padding: 18px 20px; border-radius: var(--r-16); background: var(--bl-grey-light); font-size: 15px; line-height: 22px; }
.outcomes svg { flex: none; width: 16px; height: 16px; margin-top: 3px; color: var(--state-good); }
@media (max-width: 960px) { .outcomes { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .outcomes { grid-template-columns: 1fr; } }

.page-hero--solo { grid-template-columns: 1fr; }
.page-hero--solo .pane-txt { padding: 140px 64px 56px; }
@media (max-width: 900px) { .page-hero--solo .pane-txt { padding: 112px 24px 40px; } }
.legal-notice { padding: 16px 18px; border-radius: var(--r-12); background: var(--bl-yellow-7); color: var(--bl-dark); font-size: 15px; line-height: 23px; }
.legal-defs { display: grid; gap: 10px; margin: 0 0 16px; }
.legal-defs dt { font-weight: 500; }
.legal-defs dd { margin: 2px 0 0; color: var(--bl-dark-light); line-height: 25px; }
.legal-n { display: inline-block; min-width: 40px; font: 500 13px/1 var(--mono); color: #6b675f; }
.legal-foot { margin-top: 48px; padding-top: 20px; border-top: 1px solid var(--line-input); font-size: 14px; line-height: 22px; color: var(--bl-grey); }

.ea { display: inline-flex; align-items: center; height: 20px; margin-left: 8px; padding: 0 8px; border-radius: var(--r-full); background: var(--bl-primary); color: var(--bl-dark); font: 500 11px/1 var(--font); letter-spacing: .02em; vertical-align: 1px; }

.tbl--compare td { padding: 16px 20px; font-size: 15px; line-height: 22px; vertical-align: top; }
.tbl--compare th { padding: 12px 20px; }
.tbl--compare td:first-child { color: var(--bl-grey); width: 42%; }
.tbl--compare td:last-child { color: var(--bl-dark); }
.tbl--pk td { white-space: normal; vertical-align: top; }
.tbl--pk td:nth-child(4), .tbl--pk td:nth-child(5) { white-space: nowrap; color: var(--bl-dark-light); }
@media (max-width: 760px) { .tbl--pk td:nth-child(4), .tbl--pk td:nth-child(5) { white-space: normal; } }

/* ---------- QA fixes, 22 Oct ---------- */

/* Scan intro only sticks next to the form on wide screens */
@media (min-width: 901px) { .scan-intro { position: sticky; top: 104px; } }

/* About: four principles, then two, then one */
.principles--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 960px) { .principles--4 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .principles--4 { grid-template-columns: 1fr; } }
.impact-box { padding: 56px; border-radius: var(--r-16); background: var(--bl-grey-light); }
@media (max-width: 720px) { .impact-box { padding: 24px; } .impact-box .layer-title { grid-template-columns: 1fr; } }

/* inner pages on phones: headline and button first, image after */
@media (max-width: 900px) {
  .page-hero .pane-txt { order: 1; padding: 104px 24px 40px; }
  .page-hero .pane-img { order: 2; height: 300px; }
  .over { margin-top: 0; border-radius: 0; }
  .over.section { padding-top: 64px !important; }
}

/* the floating contact button covers buttons on phones; the nav and footer already offer contact */
@media (max-width: 700px) { .float-contact { display: none; } }

/* visible focus, readable small text */
.bl :focus-visible { outline: 2px solid var(--bl-dark); outline-offset: 2px; }
.box--dark :focus-visible, .dark-sec :focus-visible { outline-color: var(--bl-primary); }
.bl .meta, .foot-legal, .fgroup label span, .tbl--compare td:first-child, .acct span, .steps .kicker,
.kv dt, .comp .what span, .layer li .n, .sys .n, .app-crumb, .app-group,
.vs-list .q, .vs-list li::before, .mail-meta, .legal-foot, .kpi-s, .input { color: #6b675f; }
.foot-legal span { overflow-wrap: anywhere; }
.foot-h { margin: 0 0 12px; font-size: 12px; line-height: 16px; font-weight: 500; text-transform: uppercase; letter-spacing: .02em; color: var(--bl-dark-light); }

/* CRM logos and chips */
.sf { color: #00a1e0; }
.zo { color: #e42527; }
.works-with { gap: 6px; }
.works-with svg { width: 16px; height: 16px; }
.works-with .meta { margin-left: 2px; }
.crm-row { display: inline-flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.crm { display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 14px; border-radius: var(--r-full); background: var(--bl-card); box-shadow: inset 0 0 0 1px var(--line); font-size: 14px; color: var(--bl-dark); white-space: nowrap; }
.crm svg { width: 16px; height: 16px; flex: none; }
.crm-row--dark .crm { background: rgba(255, 255, 255, .06); box-shadow: inset 0 0 0 1px var(--line-dark); color: #fff; }
.crm-row--dark .crm svg:not(.hs):not(.sf):not(.zo) { color: var(--bl-yellow-3); }
.crm-pick { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; padding: 14px 16px; }
.crm-tile { display: grid; justify-items: center; gap: 6px; padding: 14px 6px 12px; border: 1px solid var(--line); border-radius: var(--r-8); font-size: 12px; line-height: 16px; text-align: center; }
.crm-tile svg { width: 22px; height: 22px; }
.crm-tile em { font-style: normal; font-size: 11px; color: #6b675f; }
.crm-tile.is-on { box-shadow: inset 0 0 0 1.5px var(--bl-dark); border-color: transparent; }
.crm-tile.is-on em { color: #8a6300; font-weight: 500; }
@media (max-width: 520px) { .crm-pick { grid-template-columns: 1fr 1fr; } }

/* captions under mockups, status tags */
.mock-cap { margin: 16px 0 0; text-align: center; font-size: 13px; line-height: 18px; color: rgba(255, 255, 255, .62); }
.feature-vis .mock-cap { text-align: left; color: var(--bl-dark-light); }
.flow-item .soon { margin-left: auto; padding: 2px 8px; border-radius: var(--r-full); background: rgba(250, 195, 15, .16); color: var(--bl-yellow-3); font: 500 11px/16px var(--font); font-style: normal; white-space: nowrap; }

/* preview badge (only in the hidden preview build) */
.pv-badge { position: fixed; z-index: 60; left: 16px; bottom: 16px; margin: 0; padding: 6px 10px; border-radius: var(--r-6); background: var(--bl-dark); color: #fff; font: 500 12px/16px var(--font); }

/* ---------- motion and interaction: living mockups and steppers ---------- */

@keyframes rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes grow-x { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes pop { 0% { opacity: 0; transform: scale(.6); } 70% { opacity: 1; transform: scale(1.08); } 100% { opacity: 1; transform: none; } }
@keyframes draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes ring { from { transform: scale(1); opacity: .55; } to { transform: scale(3.2); opacity: 0; } }
@keyframes bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
@keyframes progress { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes dash-move { to { stroke-dashoffset: -40; } }

/* reveal on scroll: site.js adds .in when the element enters the view */
.js [data-reveal] { opacity: 0; }
/* if the reveal script has not started within 4 s (a failed download), everything shows, without the animation */
.js.no-reveal [data-reveal] { opacity: 1; animation: none; }
[data-reveal].in { animation: rise .8s cubic-bezier(.2, .7, .2, 1) both; }
/* print and PDF: what fades in on scroll is shown, so a page printed without scrolling first is complete */
@media print {
  .js [data-reveal], [data-reveal] { opacity: 1 !important; animation: none !important; }
  /* charts, meters, chips and buttons keep their fills when "background graphics" is off */
  html { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  /* a card stays on one page: offers, fine print, principles, journey steps, questions */
  .a-oc, .a-mc, .a-jr-s, .faq details { break-inside: avoid; }
  /* a section heading stays with what follows it */
  .a-head { break-inside: avoid; }
  .a-head, .a-eyebrow, .a-h2, .a-h3 { break-after: avoid; }
}

/* hero signal card: floats, pulses, and cycles through example accounts */
.sigcard { animation: bob 6s ease-in-out infinite; }
.sigcard .pulse { position: relative; }
.sigcard .pulse::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--bl-primary); animation: ring 2.4s ease-out infinite; }
.sigcard.swap .sigcard-co, .sigcard.swap .sigcard-row .redact, .sigcard.swap .sigcard-foot { animation: fade-in .5s ease both; }
.sigcard .sigcard-row .redact { transform-origin: left; }
.sigcard.swap .sigcard-row .redact { animation: grow-x .9s cubic-bezier(.2, .7, .2, 1) both .15s; }

/* ten signals: our rows fill one by one, the agency's question marks fade in */
.vs-list li .redact { transform-origin: left; }
.versus.in .vs-card--us .redact { animation: grow-x .9s cubic-bezier(.2, .7, .2, 1) both; animation-delay: calc(var(--i, 0) * 110ms + 250ms); }
.versus.in .vs-card--us li svg { animation: pop .45s ease both; animation-delay: calc(var(--i, 0) * 110ms + 700ms); }
.versus.in .vs-card--them .q { animation: fade-in .6s ease both; animation-delay: calc(var(--i, 0) * 120ms + 300ms); }
.versus:not(.in) .vs-card--us .redact { transform: scaleX(0); }
.versus:not(.in) .vs-card--us li svg, .versus:not(.in) .vs-card--them .q { opacity: 0; }

/* platform mockup: tabs, panels, rows that slide in, bars that grow, a line that draws */
.app-nav { width: 100%; border: 0; background: none; font: inherit; text-align: left; cursor: pointer; position: relative; overflow: hidden; }
.app-nav:hover { background: rgba(36, 35, 32, .05); }
.app-nav.is-on { background: var(--bl-yellow-6); }
.app-nav.is-on::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--bl-gold); transform-origin: left; animation: progress var(--cycle, 5s) linear both; }
.app.paused .app-nav.is-on::after { animation-play-state: paused; }
.app-panel[hidden] { display: none; }
.app-panel.is-on { animation: fade-in .45s ease both; }
.rows-in > *, .rows-in tbody tr { animation: rise .55s cubic-bezier(.2, .7, .2, 1) both; animation-delay: calc(var(--i, 0) * 80ms + 80ms); }
.app-panel:not(.is-on) .rows-in > *, .app-panel:not(.is-on) .rows-in tbody tr { animation: none; }
.app-panel.is-on .fit i, .app-panel.is-on .sig .redact { transform-origin: left; animation: grow-x 1.1s cubic-bezier(.2, .7, .2, 1) both .35s; }
.spark.draw .line { stroke-dasharray: 1; stroke-dashoffset: 0; }
.app-panel.is-on .spark.draw .line { animation: draw 1.6s ease both .2s; }
.app-panel.is-on .spark.draw .line--2 { stroke-dasharray: none; animation: fade-in 1s ease both .6s; }
.app-panel.is-on .spark.draw .area { animation: fade-in 1.2s ease both .9s; }
.legend { display: flex; gap: 16px; margin-top: 10px; font-size: 12px; color: var(--bl-dark-light); }
.legend i { display: inline-block; width: 10px; height: 2px; margin-right: 6px; vertical-align: middle; }
.feed-row { display: grid; grid-template-columns: 10px minmax(0, 1.1fr) auto minmax(0, 1fr); align-items: center; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--line); }
.feed-row:last-child { border-bottom: 0; }
.feed-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--bl-primary); box-shadow: 0 0 0 3px rgba(250, 195, 15, .25); }
.feed-row .why { display: grid; gap: 5px; }
.feed-row .why .redact { height: 6px; }
@media (max-width: 860px) { .feed-row { grid-template-columns: 10px minmax(0, 1fr) auto; } .feed-row .why { display: none; } }

/* platform feature mocks animate when they come into view */
.feature-vis[data-reveal].in .mock-row, .feature-vis[data-reveal].in .comp, .feature-vis[data-reveal].in .crm-tile, .feature-vis[data-reveal].in .mail > * { animation: rise .55s cubic-bezier(.2, .7, .2, 1) both; animation-delay: calc(var(--i, 0) * 80ms + 150ms); }
.feature-vis[data-reveal].in .crm-tile.is-on svg { animation: pop .5s ease both .6s; }
.feature-vis[data-reveal].in .sig .redact, .feature-vis[data-reveal].in .mail .line { transform-origin: left; animation: grow-x 1s cubic-bezier(.2, .7, .2, 1) both .45s; }
.feature-vis[data-reveal].in .spark .line:not(.line--2) { stroke-dasharray: 1; animation: draw 1.6s ease both .3s; }

/* how it connects: connectors drawn by site.js, dashes that move, packets that travel */
.flow { position: relative; }
.flow-wires { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.flow-wires path { fill: none; stroke: rgba(255, 255, 255, .22); stroke-width: 1.2; stroke-dasharray: 3 5; animation: dash-move 2.4s linear infinite; }
.flow-wires circle { fill: var(--bl-primary); }
.flow-col, .flow-hub { position: relative; z-index: 1; }
.flow-hub .tile { position: relative; }
.flow-hub .tile::before, .flow-hub .tile::after { content: ""; position: absolute; inset: 0; border-radius: 22px; border: 1px solid rgba(250, 195, 15, .5); animation: ring 3.2s ease-out infinite; }
.flow-hub .tile::after { animation-delay: 1.6s; }
.flow-item { transition: transform .2s ease, box-shadow .2s ease; }
.flow-item:hover { transform: translateY(-2px); box-shadow: inset 0 0 0 1px rgba(250, 195, 15, .6); }

/* stepper (Scan): each step lights up in turn, with a progress bar; click to pick one */
.steps[data-stepper] > div { position: relative; cursor: pointer; transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease; }
.steps[data-stepper] > div::after { content: ""; position: absolute; left: 16px; right: 16px; top: 0; height: 3px; border-radius: 0 0 3px 3px; background: var(--bl-primary); transform: scaleX(0); transform-origin: left; }
.steps[data-stepper] > div.is-on { border-color: var(--bl-dark); box-shadow: 0 0 0 1px var(--bl-dark); transform: translateY(-3px); }
.steps[data-stepper] > div.is-on::after { animation: progress var(--cycle, 4s) linear both; }
.steps[data-stepper].paused > div.is-on::after { animation-play-state: paused; }

/* small interactions */
.who-card .img img, .split .photo img, .final-img img { transition: transform .8s cubic-bezier(.2, .7, .2, 1); }
.who-card:hover .img img, .split .photo:hover img { transform: scale(1.035); }
.offer, .who-card, .layer { transition: transform .25s ease, box-shadow .25s ease; }
.offer:hover, .who-card:hover, .layer:hover { transform: translateY(-3px); box-shadow: var(--shadow-float); }

@media (prefers-reduced-motion: reduce) {
  [data-reveal], .js [data-reveal] { opacity: 1; }
  [data-reveal].in, .sigcard, .sigcard .pulse::after, .rows-in > *, .rows-in tbody tr, .app-panel.is-on, .flow-wires path, .flow-hub .tile::before, .flow-hub .tile::after { animation: none !important; }
  .versus .vs-card--us .redact, .versus .vs-card--us li svg, .versus .vs-card--them .q { animation: none !important; transform: none !important; opacity: 1 !important; }
  .app-nav.is-on::after, .steps[data-stepper] > div::after { display: none; }
  .flow-wires circle { display: none; }
  .who-card .img img, .offer, .who-card, .layer { transition: none; }
}

/* who uses the platform: gradient box with an accordion (from the brand landing pages) */
.aud { padding: 112px 0; }
.aud-list { max-width: 940px; margin: 48px auto 0; }
.aud details { border-bottom: 1px solid rgba(36, 35, 32, .2); }
.aud summary { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px; align-items: baseline; padding: 18px 0; cursor: pointer; list-style: none; }
.aud summary::-webkit-details-marker { display: none; }
.aud summary .h4 sup { font-size: 12px; letter-spacing: 0; margin-left: 4px; }
.aud summary .verbs { font-size: 14px; color: var(--bl-dark-light); }
.aud .open-body { display: grid; grid-template-columns: minmax(0, 1fr) 240px; gap: 32px; padding: 4px 0 28px; }
.aud dl { margin: 0; display: grid; gap: 16px; align-content: start; }
.aud dt { font-weight: 500; font-size: 16px; }
.aud dd { margin: 2px 0 0; font-size: 15px; line-height: 22px; color: var(--bl-dark-light); }
.aud .glass { display: grid; place-items: center; padding: 20px; border-radius: var(--r-12); }
.aud .glass img { width: 100%; max-width: 180px; }
.aud details[open] .open-body { animation: rise .45s cubic-bezier(.2, .7, .2, 1) both; }
@media (max-width: 700px) { .aud { padding: 72px 0; } .aud .open-body { grid-template-columns: 1fr; } .aud .glass { display: none; } .aud summary .verbs { display: none; } }

/* ---------- blog ---------- */

.post { display: grid; grid-template-rows: auto 1fr; border-radius: var(--r-16); overflow: hidden; background: var(--bl-card); border: 1px solid var(--line); text-decoration: none; color: inherit; transition: transform .25s ease, box-shadow .25s ease; }
.post:hover { transform: translateY(-3px); box-shadow: var(--shadow-float); }
.post-img { display: block; aspect-ratio: 16 / 10; overflow: hidden; background: var(--bl-grey-light); }
.post-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s cubic-bezier(.2, .7, .2, 1); }
.post:hover .post-img img { transform: scale(1.035); }
.post-txt { display: grid; gap: 12px; align-content: start; padding: 24px; }
.post-lead { color: var(--bl-dark-light); font-size: 15px; line-height: 23px; }
.post--featured { grid-template-rows: none; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); }
.post--featured .post-img { aspect-ratio: auto; min-height: 380px; }
.post--featured .post-txt { align-content: center; padding: 40px; gap: 16px; }
.post--featured .btn { justify-self: start; }
.posts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 8px; }
@media (max-width: 860px) { .post--featured { grid-template-columns: 1fr; } .post--featured .post-img { min-height: 0; aspect-ratio: 16 / 10; } .post--featured .post-txt { padding: 24px; } }
@media (max-width: 760px) { .posts { grid-template-columns: 1fr; } }

.prose { max-width: 720px; margin: 0 auto; }
.prose h2 { margin: 48px 0 12px; font-size: 30px; line-height: 34px; font-weight: 400; letter-spacing: -.03em; }
.prose h3 { margin: 32px 0 10px; font-size: 20px; line-height: 26px; font-weight: 500; letter-spacing: -.01em; }
.prose p, .prose li { color: var(--bl-dark-light); font-size: 17px; line-height: 28px; }
.prose p { margin: 0 0 18px; }
.prose ul { margin: 0 0 18px; padding-left: 20px; }
.prose li { margin-bottom: 8px; }
.prose b { color: var(--bl-dark); font-weight: 500; }
.prose .chart { margin: 32px -60px; }
.prose .chart img { width: 100%; height: auto; border-radius: var(--r-12); box-shadow: 0 0 0 1px rgba(36, 35, 32, .08); }
.prose .chart figcaption { margin-top: 10px; font-size: 13px; line-height: 19px; color: #6b675f; }
.prose-end { justify-content: center; margin-top: 48px; }
@media (max-width: 860px) { .prose .chart { margin: 28px 0; } }

@media (max-width: 600px) { .app .tbl th:last-child, .app .tbl td:last-child { display: none; } }

.nw { white-space: nowrap; }
@media (prefers-reduced-motion: reduce) {
  .app-panel.is-on .fit i, .app-panel.is-on .sig .redact, .app-panel.is-on .spark.draw .line, .app-panel.is-on .spark.draw .area,
  .feature-vis[data-reveal].in *, .sigcard.swap * { animation: none !important; }
}

/* ---------- services: the engine explorer ---------- */

.engine { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 24px; margin-top: 48px; align-items: start; }
.engine-rail { display: grid; gap: 18px; position: sticky; top: 104px; }
.rail-group { display: grid; gap: 6px; }
.rail-layer { display: grid; gap: 2px; margin: 0 0 4px; font: 500 12px/16px var(--font); text-transform: uppercase; letter-spacing: .02em; color: var(--bl-dark-light); }
.rail-layer span { font-size: 13px; line-height: 18px; text-transform: none; letter-spacing: 0; font-weight: 400; color: #6b675f; }
.rail-btn, .dim-btn { position: relative; overflow: hidden; display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--r-12); background: var(--bl-card); color: var(--bl-dark); font: 500 16px/20px var(--font); text-align: left; cursor: pointer; transition: border-color .2s ease, transform .2s ease; }
.rail-btn:hover, .dim-btn:hover { transform: translateX(2px); border-color: var(--bl-grey-medium); }
.rail-btn .n, .dim-btn .n { font: 500 12px/1 var(--mono); color: #6b675f; }
.rail-btn.is-on, .dim-btn.is-on { border-color: var(--bl-dark); box-shadow: inset 0 0 0 1px var(--bl-dark); }
.rail-btn.is-on::after, .dim-btn.is-on::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--bl-primary); transform-origin: left; animation: progress var(--cycle, 6s) linear both; }
[data-explorer].paused .is-on::after { animation-play-state: paused; }
[data-explorer].picked .is-on::after { animation: none; transform: scaleX(1); }
.engine-pane { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px; align-items: center; min-height: 460px; padding: 32px; border-radius: var(--r-16); background: var(--bl-card); border: 1px solid var(--line); }
.engine-pane[hidden], .dim-pane[hidden] { display: none; }
.engine-pane.is-on { animation: fade-in .45s ease both; }
.ep-txt { display: grid; gap: 14px; align-content: start; }
.ep-txt p { margin: 0; color: var(--bl-dark-light); font-size: 16px; line-height: 25px; }
.ep-txt .eyebrow { color: var(--bl-dark-light); }
.ep-txt .ex { padding: 16px 18px; border-radius: var(--r-12); background: var(--bl-grey-light); font-size: 15px; line-height: 23px; color: var(--bl-dark-light); }
.ep-txt .ex b { display: block; margin-bottom: 6px; font: 500 11px/16px var(--mono); text-transform: uppercase; letter-spacing: .03em; color: var(--bl-dark); }
.ep-vis { display: grid; align-content: center; min-height: 380px; padding: 28px; border-radius: var(--r-12); background: var(--grad-persona); }
.mv { position: relative; display: grid; gap: 12px; padding: 16px; border-radius: var(--r-12); background: var(--bl-card); box-shadow: 0 0 0 1px rgba(36, 35, 32, .08), var(--shadow-frame); font-size: 13px; line-height: 18px; }
.mv-h { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-weight: 500; font-size: 14px; }
.engine-pane.is-on .mv > *, .engine-pane.is-on .prow, .engine-pane.is-on .seq { animation: rise .55s cubic-bezier(.2, .7, .2, 1) both; animation-delay: calc(var(--i, 0) * 70ms + 120ms); }
/* 01 message map */
.msg-grid { display: grid; grid-template-columns: auto 1fr 1fr; gap: 8px; align-items: center; }
.msg-grid .col { font-size: 12px; color: #6b675f; }
.msg-grid .row { font-size: 12px; color: var(--bl-dark-light); padding-right: 6px; }
.msg-grid .chip { display: block; padding: 9px 10px; border-radius: var(--r-8); background: var(--bl-light); border: 1px solid var(--line); }
.msg-grid .chip .redact { display: block; height: 7px; background: rgba(36, 35, 32, .35); }
.msg-grid .chip.is-hot { background: var(--bl-yellow-7); border-color: var(--bl-yellow-5); }
.msg-grid .chip.is-hot .redact { background: var(--bl-dark); }
/* 02 account map */
.dots { display: grid; grid-template-columns: repeat(14, 1fr); gap: 7px; }
.dots .d, .legend .d { display: block; aspect-ratio: 1; border-radius: 50%; background: var(--bl-grey-medium); }
.dots .d.f, .legend .d.f { background: var(--bl-dark); }
.dots .d.c, .legend .d.c { background: transparent; box-shadow: inset 0 0 0 1.5px var(--bl-grey); }
.engine-pane.is-on .dots .d { animation: pop .4s ease both; animation-delay: calc(var(--i, 0) * 8ms + 100ms); }
.mv .legend { gap: 14px; flex-wrap: wrap; margin: 0; }
.mv .legend .d { display: inline-block; width: 9px; height: 9px; margin-right: 6px; vertical-align: -1px; }
/* 03 signal timeline */
.tl { position: relative; height: 34px; margin: 4px 6px; }
.tl::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 2px; background: var(--bl-grey-light); }
.tl i { position: absolute; top: 50%; width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%; background: var(--bl-grey-medium); }
.tl i.s { width: 14px; height: 14px; margin: -7px 0 0 -7px; background: var(--bl-primary); box-shadow: 0 0 0 4px rgba(250, 195, 15, .22); }
.engine-pane.is-on .tl i.s { animation: pop .5s ease both .5s; }
/* 04 sequence */
.seqs { gap: 10px; }
.seq { display: grid; gap: 8px; padding: 12px 14px; border-radius: var(--r-8); border: 1px solid var(--line); background: var(--bl-light); }
.seq.is-hot { background: var(--bl-yellow-7); border-color: var(--bl-yellow-5); }
.seq-k { display: flex; align-items: center; gap: 8px; font-weight: 500; }
.seq-k svg { width: 15px; height: 15px; }
.seq-k .meta { margin-left: auto; font-weight: 400; }
.seq .lines { display: grid; gap: 5px; }
.seq .lines .redact { display: block; height: 6px; }
/* 05 pipeline */
/* 06 workflow */
.wf { justify-items: start; }
.wf .node { display: inline-flex; align-items: center; gap: 8px; padding: 10px 14px; border-radius: var(--r-8); border: 1px solid var(--line); background: var(--bl-light); font-weight: 500; }
.wf .node svg { width: 15px; height: 15px; }
.wf .node.is-hot { background: var(--bl-yellow-7); border-color: var(--bl-yellow-5); }
.wf .wire { display: block; width: 2px; height: 16px; margin-left: 22px; background: repeating-linear-gradient(180deg, var(--bl-grey-medium) 0 4px, transparent 4px 7px); }
/* 07 loop */
.loop { place-items: center; aspect-ratio: 1; max-width: 320px; width: 100%; justify-self: center; }
.loop svg { width: 78%; height: auto; overflow: visible; }
.loop-c { fill: none; stroke: var(--bl-grey-light); stroke-width: 10; }
.loop-a { fill: none; stroke: var(--bl-dark); stroke-width: 2; stroke-dasharray: 4 6; animation: dash-move 2s linear infinite; }
.loop-head { fill: none; stroke: var(--bl-dark); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.loop-l { position: absolute; transform: translate(-50%, -50%); padding: 5px 10px; border-radius: var(--r-full); background: var(--bl-card); box-shadow: 0 0 0 1px var(--line), var(--shadow-sm); font-weight: 500; }
.loop-cap { position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%); text-align: center; margin: 0; }
@media (max-width: 960px) {
  .engine { grid-template-columns: 1fr; }
  .engine-rail { position: static; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
  .rail-group { display: contents; }
  .rail-layer { display: none; }
  .rail-btn { width: 100%; min-width: 0; white-space: nowrap; }
  .engine-pane { grid-template-columns: 1fr; padding: 20px; min-height: 0; }
  .ep-vis { min-height: 0; padding: 18px; }
}
@media (max-width: 560px) { .engine-rail { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .dots { grid-template-columns: repeat(10, 1fr); } .dots .d:nth-child(n+61) { display: none; } }

/* services: the route from Scan to a system you own */
.route { display: flex; align-items: flex-start; gap: 0; margin-top: 40px; padding: 28px 24px; border-radius: var(--r-16); background: var(--bl-yellow-7); }
.route .stop { display: grid; justify-items: center; gap: 6px; flex: none; width: 170px; text-align: center; }
.route .stop b { font-weight: 500; font-size: 16px; }
.route .stop span:not(.dot) { font-size: 13px; color: #6b675f; }
.route .dot { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: var(--bl-card); box-shadow: 0 0 0 1px var(--line), var(--shadow-sm); }
.route .dot svg { width: 20px; height: 20px; }
.route .dot--own { background: var(--bl-dark); color: #fff; }
.route .leg { flex: 1; min-width: 24px; height: 2px; margin-top: 26px; background: repeating-linear-gradient(90deg, var(--bl-dark) 0 6px, transparent 6px 11px); background-size: 22px 2px; animation: route-move 1.2s linear infinite; }
@keyframes route-move { to { background-position: 22px 0; } }
@media (max-width: 860px) { .route { flex-direction: column; align-items: stretch; } .route .stop { width: auto; grid-template-columns: 52px 1fr; justify-items: start; text-align: left; column-gap: 14px; } .route .stop .dot { grid-row: span 2; } .route .leg { width: 2px; min-width: 0; height: 22px; margin: 4px 0 4px 25px; flex: none; background: repeating-linear-gradient(180deg, var(--bl-dark) 0 6px, transparent 6px 11px); animation: none; } }

/* services: comparison icons */
.tbl--compare svg { width: 15px; height: 15px; margin-right: 10px; vertical-align: -2px; }
.tbl--compare svg.x { color: var(--bl-grey); }
.tbl--compare svg.ok { color: var(--state-good); }

/* ---------- scan: the radar ---------- */

.radar-box { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 32px; align-items: center; margin-top: 48px; padding: 32px; border-radius: var(--r-16); background: var(--bl-card); border: 1px solid var(--line); }
.radar-vis { display: grid; justify-items: center; gap: 8px; }
.radar { width: 100%; max-width: 480px; height: auto; overflow: visible; }
.radar .ring { fill: none; stroke: var(--bl-grey-light); stroke-width: 1; }
.radar .ax { stroke: var(--bl-grey-light); stroke-width: 1; transition: stroke .2s ease; }
.radar .area { fill: rgba(250, 195, 15, .22); stroke: var(--bl-gold); stroke-width: 1.5; }
.radar .node { fill: var(--bl-card); stroke: var(--bl-dark); stroke-width: 1.5; transition: r .2s ease; }
.radar .node.leak { fill: var(--bl-primary); }
.radar .lab { font: 500 13px var(--font); fill: var(--bl-dark-light); cursor: pointer; }
.radar[data-active] .ax[data-dim], .radar[data-active] .lab[data-dim] { opacity: .45; }
.radar[data-active="d1"] [data-dim="d1"], .radar[data-active="d2"] [data-dim="d2"], .radar[data-active="d3"] [data-dim="d3"], .radar[data-active="d4"] [data-dim="d4"],
.radar[data-active="d5"] [data-dim="d5"], .radar[data-active="d6"] [data-dim="d6"], .radar[data-active="d7"] [data-dim="d7"], .radar[data-active="d8"] [data-dim="d8"] { opacity: 1; stroke: var(--bl-dark); fill: var(--bl-dark); }
.radar[data-active] .node[data-dim] { opacity: 1; }
.radar[data-active="d1"] .node[data-dim="d1"], .radar[data-active="d2"] .node[data-dim="d2"], .radar[data-active="d3"] .node[data-dim="d3"], .radar[data-active="d4"] .node[data-dim="d4"],
.radar[data-active="d5"] .node[data-dim="d5"], .radar[data-active="d6"] .node[data-dim="d6"], .radar[data-active="d7"] .node[data-dim="d7"], .radar[data-active="d8"] .node[data-dim="d8"] { r: 8; fill: var(--bl-primary); }
.radar-side { display: grid; gap: 18px; }
.dim-list { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 10px; }
.dim-group { display: grid; gap: 6px; align-content: start; }
.dim-btn { padding: 10px 12px; font-size: 14px; line-height: 18px; }
.dim-panes { min-height: 132px; }
.dim-pane { display: grid; gap: 8px; padding: 18px 20px; border-radius: var(--r-12); background: var(--bl-yellow-7); }
.dim-pane.is-on { animation: fade-in .4s ease both; }
.dim-pane p { margin: 0; color: var(--bl-dark-light); font-size: 15px; line-height: 22px; }
.dim-pane .h6 { color: var(--bl-dark); font-weight: 500; }
.dim-pane .tag { justify-self: start; }
@media (max-width: 960px) { .radar-box { grid-template-columns: 1fr; padding: 20px; } }
@media (max-width: 520px) { .dim-list { grid-template-columns: 1fr; } }

/* scan: the steps as one line */
.steps--line { position: relative; }
.steps--line::before { content: ""; position: absolute; left: 12%; right: 12%; top: 40px; height: 2px; background: repeating-linear-gradient(90deg, var(--bl-grey-medium) 0 6px, transparent 6px 11px); }
.steps--line > div { position: relative; }
.steps .st-ic { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: var(--r-8); background: var(--bl-yellow-7); }
.steps .st-ic svg { width: 17px; height: 17px; }
@media (max-width: 960px) { .steps--line::before { display: none; } }

/* scan: the report mock */
.doc { padding: 32px; border-radius: var(--r-16); background: var(--grad-persona); }
.doc-page { display: grid; gap: 16px; padding: 24px; border-radius: var(--r-8); background: var(--bl-card); box-shadow: 0 0 0 1px rgba(36, 35, 32, .08), var(--shadow-frame); transform: rotate(-1.2deg); }
.doc-h { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.doc-h .logo { font-size: 15px; }
.doc-h .logo img { width: 16px; height: 16px; }
.doc-title { margin: 0; font-size: 22px; line-height: 26px; letter-spacing: -.02em; }
.doc-rows { display: grid; gap: 10px; }
.doc-row { display: grid; grid-template-columns: 1.3fr 1fr auto; gap: 12px; align-items: center; font-size: 13px; }
.doc-row .bar { display: block; height: 6px; border-radius: 3px; background: var(--bl-grey-light); overflow: hidden; }
.doc-row .bar b { display: block; height: 100%; border-radius: 3px; background: var(--bl-dark); transform-origin: left; }
.doc.in .doc-row .bar b { animation: grow-x 1s cubic-bezier(.2, .7, .2, 1) both .3s; }
.doc-call, .doc-wp { display: grid; gap: 8px; padding: 14px; border-radius: var(--r-8); background: var(--bl-yellow-7); font-size: 13px; }
.doc-wp { background: var(--bl-light); }
.doc-call .lines, .doc-wp .lines { display: grid; gap: 5px; }
.doc-call .redact, .doc-wp .redact { display: block; height: 6px; }
.doc-btns { display: flex; gap: 6px; }
.tag--line { background: transparent; box-shadow: inset 0 0 0 1px var(--line-input); }

/* scan: work packages as cards */
.pks { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 48px; }
.pk { display: grid; gap: 10px; align-content: start; padding: 22px; border-radius: var(--r-16); background: var(--bl-card); border: 1px solid var(--line); transition: transform .25s ease, box-shadow .25s ease; }
.pk:hover { transform: translateY(-3px); box-shadow: var(--shadow-float); }
.pk-dim { font: 500 11px/16px var(--mono); text-transform: uppercase; letter-spacing: .03em; color: #6b675f; }
.pk .h6 { margin: 0; font-weight: 500; }
.pk p { margin: 0; font-size: 14px; line-height: 21px; color: var(--bl-dark-light); }
.pk-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
@media (max-width: 960px) { .pks { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .pks { grid-template-columns: 1fr; } }

/* blog: the ESG 2030 cover in the essay's own style */
@font-face { font-family: 'PT Serif'; src: url(/assets/fonts/PTSerif-Regular.woff2) format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
.esg-cover { position: relative; display: grid; grid-template-columns: 1fr 1fr; align-items: center; background-color: #0b0e0d;
  background-image: linear-gradient(rgba(255, 255, 255, .045) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .045) 1px, transparent 1px); background-size: 32px 32px; }
.esg-t { grid-column: 1; grid-row: 1; display: grid; gap: 14px; padding: 32px; }
.esg-k { font: 500 12px/16px 'Geist Mono', var(--mono); letter-spacing: .14em; text-transform: uppercase; color: #8fd39f; }
.esg-h { font: 400 30px/36px 'PT Serif', Georgia, serif; letter-spacing: -.01em; color: #f5f2eb; }
@media (max-width: 860px) { .esg-h { font-size: 24px; line-height: 30px; } .esg-t { padding: 22px; } }

@media (prefers-reduced-motion: reduce) {
  .engine-pane.is-on *, .route .leg, .loop-a, .doc.in *, .rail-btn.is-on::after, .dim-btn.is-on::after { animation: none !important; }
  .rail-btn:hover, .dim-btn:hover, .pk:hover { transform: none; }
}

/* scan steps as a timeline: numbers on one line, progress runs to the next step */
.steps--line { gap: 28px; }
.steps--line::before { left: 16px; right: 16px; top: 15px; height: 2px; background: var(--line-input); }
.steps--line > div { padding: 0; background: transparent; border: 0; border-radius: 0; }
.steps[data-stepper].steps--line > div.is-on { border: 0; box-shadow: none; transform: none; }
.steps--line > div::before { position: relative; z-index: 1; background: var(--bl-card); box-shadow: 0 0 0 1px var(--line-input), 0 0 0 6px var(--bl-light); transition: background .2s ease, color .2s ease; }
.steps--line > div.is-on::before { background: var(--bl-dark); color: #fff; box-shadow: 0 0 0 6px var(--bl-light); }
.steps[data-stepper].steps--line > div::after { top: 15px; left: 40px; right: -20px; height: 2px; border-radius: 2px; background: var(--bl-dark); }
.steps[data-stepper].steps--line > div:last-child::after { right: 0; }
.steps--line > div:not(.is-on) h3, .steps--line > div:not(.is-on) p { opacity: .62; transition: opacity .2s ease; }
.steps--line > div h3 { margin-top: 6px; }
@media (max-width: 960px) { .steps--line > div:not(.is-on) h3, .steps--line > div:not(.is-on) p { opacity: 1; } .steps[data-stepper].steps--line > div::after { display: none; } }
@media (prefers-reduced-motion: reduce) { .steps--line > div:not(.is-on) h3, .steps--line > div:not(.is-on) p { opacity: 1; } }

/* fixes 23 Oct: calmer motion around the logo hub */
.flow-hub .tile::before, .flow-hub .tile::after { animation: ring-slow 10s ease-out infinite; }
.flow-hub .tile::after { animation-delay: 5s; }
@keyframes ring-slow { from { transform: scale(1); opacity: .5; } to { transform: scale(1.9); opacity: 0; } }
.flow-wires path { animation-duration: 9s; }

.esg-cover .esg-lines { grid-column: 2; grid-row: 1; width: 100%; height: 100%; min-height: 380px; }

/* 05 pipeline as stage rows */
.pipe { gap: 0; padding-bottom: 6px; }
.pipe .mv-h { margin-bottom: 8px; }
.prow { position: relative; display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 12px; align-items: center; padding: 11px 0; border-top: 1px solid var(--line); }
.pst { display: flex; align-items: center; gap: 10px; font-size: 12px; color: #6b675f; }
.pst i { width: 9px; height: 9px; border-radius: 50%; background: var(--bl-grey-medium); flex: none; }
.prow.is-hot .pst { color: var(--bl-dark); font-weight: 500; }
.prow.is-hot .pst i { background: var(--bl-primary); box-shadow: 0 0 0 3px rgba(250, 195, 15, .25); }
.pchips { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.pchip { padding: 5px 10px; border-radius: var(--r-6); background: var(--bl-light); box-shadow: inset 0 0 0 1px var(--line); font-size: 12px; line-height: 16px; white-space: nowrap; }
.pchip.is-hot { background: var(--bl-yellow-7); box-shadow: inset 0 0 0 1px var(--bl-yellow-5); font-weight: 500; }
@media (max-width: 520px) { .prow { grid-template-columns: 1fr; gap: 6px; } }
@media (max-width: 520px) { .mv-h { flex-wrap: wrap; } .mv-h .tag { white-space: nowrap; } }

/* phones: let the ESG cover grow to fit its title */
@media (max-width: 860px) {
  .post--featured .esg-cover { aspect-ratio: auto; min-height: 220px; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); }
  .esg-cover .esg-lines { min-height: 0; }
  .esg-t { padding: 20px; gap: 10px; }
  .esg-h { font-size: 20px; line-height: 26px; }
}

/* very small phones (320 px): a little less padding so the mockups fit */
@media (max-width: 360px) { .engine-pane { padding: 14px; } .ep-vis { padding: 10px; } }

/* scan: the self-check (eight dimensions, nothing leaves the browser) */
.sc { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px; align-items: start; margin-top: 40px; padding: 28px 32px; border-radius: var(--r-16); background: var(--bl-card); box-shadow: inset 0 0 0 1px var(--line); }
.sc .sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.sc-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 16px; min-width: 0; margin: 0; padding: 12px 0; border: 0; border-top: 1px solid var(--line); }
.sc-row:first-child { border-top: 0; }
.sc-name { font-size: 15px; line-height: 20px; }
.sc-seg { display: inline-flex; padding: 3px; border-radius: var(--r-full); background: var(--bl-grey-light); }
.sc-seg label { position: relative; }
.sc-seg input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.sc-seg span { display: inline-flex; align-items: center; height: 30px; padding: 0 12px; border-radius: var(--r-full); font-size: 13px; font-weight: 500; color: var(--bl-dark-light); transition: background-color .2s ease, color .2s ease; }
.sc-seg input:checked + span { background: var(--bl-card); color: var(--bl-dark); box-shadow: 0 1px 2px rgba(36, 35, 32, .1); }
.sc-seg input[value="1"]:checked + span { background: var(--bl-dark); color: #fff; }
.sc-seg input:focus-visible + span { outline: 2px solid var(--bl-primary); outline-offset: 1px; }
.sc-out { position: sticky; top: 96px; display: grid; gap: 16px; }
.sc-radar { display: block; width: 100%; height: auto; }
.sc-ring, .sc-ax { fill: none; stroke: var(--bl-grey-medium); stroke-width: 1; }
.sc-area { fill: rgba(250, 195, 15, .3); stroke: var(--bl-gold); stroke-width: 1.5; stroke-linejoin: round; }
.sc-node { fill: var(--bl-dark); }
.sc-node.weak { fill: #b4532a; }
.sc-lab { font: 500 13px var(--font); fill: var(--bl-dark-light); }
.sc-lab.weak { fill: #b4532a; }
.sc-res { padding: 18px 20px 20px; border-radius: var(--r-12); background: var(--bl-yellow-7); }
.sc-res .sc-weak { margin: 6px 0 8px; }
.sc-weak .h6 { margin: 0; }
.sc-list { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.sc-list li { padding: 5px 11px; border-radius: var(--r-full); background: var(--bl-card); box-shadow: inset 0 0 0 1px rgba(180, 83, 42, .4); color: #9a4422; font-size: 14px; line-height: 18px; font-weight: 500; }
.sc-note { margin: 0 0 14px; font-size: 14px; line-height: 21px; color: var(--bl-dark-light); }
@media (max-width: 900px) {
  .sc { grid-template-columns: 1fr; gap: 16px; padding: 18px; }
  .sc-out { display: contents; }
  .sc-radar { order: 1; max-width: 420px; margin: 0 auto; }
  .sc-res { order: 2; }
  .sc-anchor { order: -1; }
  .sc-row { grid-template-columns: 1fr; gap: 8px; }
  .sc-seg { justify-self: start; }
}

.aud-roles { max-width: 720px; margin: 20px auto 8px; text-align: center; color: var(--bl-dark-light); }

/* self-check: progress, not-sure answers, larger targets on phones */
.sc-progress { margin: 0 0 10px; font-size: 14px; line-height: 20px; color: var(--bl-dark-light); }
.sc-progress b { font-weight: 600; color: var(--bl-dark); }
.sc-sub { margin: 10px 0 6px; font-size: 13px; line-height: 18px; font-weight: 500; color: var(--bl-dark-light); }
.sc-list--unsure li { box-shadow: inset 0 0 0 1px var(--bl-grey-medium); color: var(--bl-dark-light); }
.sc-node.unsure { fill: var(--bl-card); stroke: var(--bl-dark); stroke-width: 1.5; }
.sc-area[hidden] { display: none; }
.sc-seg span { padding: 0 11px; }
@media (max-width: 900px) {
  .sc-seg { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); width: 100%; }
  .sc-seg span { justify-content: center; height: 44px; padding: 0 6px; font-size: 13px; }
}
/* platform: availability beside every feature */
.avail-line { margin: 0; font-size: 15px; line-height: 22px; color: var(--bl-dark-light); }
.feat-status { display: inline-flex; align-items: center; gap: 8px; margin: 6px 0 0; font-size: 14px; line-height: 18px; font-weight: 500; color: var(--bl-dark); }
.feat-status::before { content: ""; width: 8px; height: 8px; border-radius: 2px; background: var(--bl-grey-medium); }
.feat-status--y::before { background: var(--bl-primary); }
.feat-status--g::before { background: var(--state-good, #177650); }
.feat-status--p::before { background: var(--data-8); }
/* scan: three example packages, the rest behind a toggle */
.pks-more { margin-top: 16px; }
.pks-more summary { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; list-style: none; font-weight: 500; }
.pks-more summary::-webkit-details-marker { display: none; }
.pks-more summary svg { width: 16px; height: 16px; transition: transform .2s ease; }
.pks-more[open] summary svg { transform: rotate(180deg); }
.pks-more .pks { margin-top: 16px; }
.pks-model { max-width: 720px; margin: 20px 0 0; color: var(--bl-dark-light); }
.sc-area[hidden] ~ .sc-node { display: none; }

/* about: the founders open the page */
.about-top { padding-top: 152px; }
.about-top .head .lead { margin-top: 20px; max-width: 640px; }
@media (max-width: 760px) { .about-top { padding-top: 112px; } }

/* scan, phones: one chart is enough. The example readout keeps its eight explained dimensions; the chart people
   see is their own, in the self-check below */
@media (max-width: 760px) {
  #dimensions .radar-vis { display: none; }
}

.sc-anchor { grid-column: 1 / -1; margin: 0 0 4px; font-size: 14px; line-height: 21px; color: var(--bl-dark-light); }
.sc-anchor b { font-weight: 500; color: var(--bl-dark); }
.fee-note { margin: 0; }

/* platform: five parts at a glance */
.glance { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; margin-top: 32px; }
.glance-card { display: grid; align-content: start; gap: 8px; padding: 18px 18px 20px; border-radius: var(--r-16); background: var(--bl-card);
  box-shadow: inset 0 0 0 1px var(--line); color: var(--bl-dark); text-decoration: none; transition: transform .25s ease, box-shadow .25s ease; }
.glance-card:hover { transform: translateY(-2px); box-shadow: inset 0 0 0 1px var(--bl-grey-medium), 0 14px 28px -18px rgba(36, 35, 32, .35); }
.glance-card .feat-status { margin: 0; font-size: 13px; }
.glance-card b { font-size: 17px; line-height: 22px; font-weight: 500; letter-spacing: -.015em; }
.glance-card > span:last-child { font-size: 14px; line-height: 20px; color: var(--bl-dark-light); }
.glance-cta { margin-top: 24px; }
@media (max-width: 1100px) { .glance { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 700px) { .glance { grid-template-columns: 1fr; } }
/* about: what we published, next to how we think */
.research-mini { display: grid; align-content: start; gap: 10px; }
.rm-card { display: grid; gap: 4px; padding: 16px 18px; border-radius: var(--r-12); background: var(--bl-card); box-shadow: inset 0 0 0 1px var(--line);
  color: var(--bl-dark); text-decoration: none; transition: transform .25s ease, box-shadow .25s ease; }
.rm-card:hover { transform: translateY(-2px); box-shadow: inset 0 0 0 1px var(--bl-grey-medium), 0 14px 28px -18px rgba(36, 35, 32, .35); }
.rm-k { font-size: 13px; line-height: 18px; color: var(--bl-dark-light); }
.rm-card b { font-size: 17px; line-height: 23px; font-weight: 500; letter-spacing: -.015em; }
.rm-card > span:last-child { font-size: 14px; line-height: 20px; color: var(--bl-dark-light); }

/* services: the deliverable, visible before the ways in */
.brief-sec { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 56px; align-items: center; }
.brief-txt .lead { margin-top: 18px; }
.brief-txt .meta { margin-top: 14px; }
.brief-stage { display: grid; place-items: center; padding: 44px 32px; border-radius: var(--r-16); background: var(--grad-persona); }
.brief-card { width: min(520px, 100%); padding: 4px 22px 10px; border-radius: var(--r-14); background: var(--bl-card); color: var(--bl-dark);
  box-shadow: 0 0 0 1px rgba(36, 35, 32, .06), 0 28px 50px -24px rgba(36, 35, 32, .4); font-size: 14px; line-height: 21px; }
.bc-h { display: flex; align-items: center; gap: 12px; padding: 16px 0 14px; }
.bc-h b { display: block; font-size: 16px; line-height: 20px; font-weight: 600; }
.bc-h div span { font-size: 13px; color: var(--bl-dark-light); }
.bc-ini { display: grid; place-items: center; width: 38px; height: 38px; flex: none; border-radius: 11px; background: var(--data-2); color: #242320; font-weight: 600; }
.bc-new { margin-left: auto; padding: 4px 9px; border-radius: var(--r-full); background: var(--bl-primary); color: #242320; font-size: 12px; font-weight: 500; white-space: nowrap; }
.bc-row { display: grid; grid-template-columns: 26px 92px minmax(0, 1fr); gap: 10px; align-items: start; padding: 14px 0; border-top: 1px solid var(--line); }
.bc-n { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--bl-primary); color: #242320; font-size: 12px; font-weight: 500; }
.bc-k { padding-top: 1px; font-size: 13px; font-weight: 500; color: var(--bl-dark-light); }
.bc-v .redact { display: inline-block; vertical-align: middle; height: 9px; border-radius: var(--r-full); background: var(--bl-dark); opacity: .85; }
.bc-sub { display: block; margin-top: 6px; color: var(--bl-dark-light); }
.bc-task { display: inline-flex; padding: 5px 11px; border-radius: var(--r-full); background: #242320; color: #fff; font-size: 13px; }
@media (max-width: 900px) {
  .brief-sec { grid-template-columns: 1fr; gap: 28px; }
  .brief-stage { padding: 24px 12px; }
  .bc-row { grid-template-columns: 24px 1fr; }
  .bc-row .bc-v { grid-column: 2; }
}

/* services: an outcome under every part name */
.rail-btn { flex-wrap: wrap; }
.rail-btn .rail-d { display: block; flex-basis: 100%; margin-top: 2px; padding-left: 32px; font-size: 12.5px; line-height: 17px; font-weight: 400; color: var(--bl-dark-light); white-space: normal; text-align: left; }
@media (max-width: 960px) { .rail-btn .rail-d { display: none; } }

/* scan report: an illustrative recommendation you can read */
.doc-ill { display: inline-flex; margin-left: 6px; padding: 1px 7px; border-radius: var(--r-full); background: var(--bl-grey-light); color: var(--bl-dark-light); font-size: 10.5px; font-weight: 500; vertical-align: 1px; }
.doc-txt { display: block; margin-top: 4px; font-size: 13px; line-height: 19px; color: var(--bl-dark); }
.doc-ev { display: block; margin-top: 6px; font-size: 12px; line-height: 17px; color: var(--bl-dark-light); }
.doc-ev i { display: block; font-style: normal; font-weight: 500; color: var(--bl-dark); }

/* Scan self-check: open everywhere; on phones the script folds it behind its summary, so it reads as optional */
.sc-fold > summary { display: none; }
@media (max-width: 760px) {
  .sc-fold:not([open]) > summary { display: inline-flex; list-style: none; }
  .sc-fold > summary::-webkit-details-marker { display: none; }
  .lead-more { display: none; }
}

/* Scan on phones: the four steps as compact rows (number beside the text), one work package example before "See all 9" */
@media (max-width: 760px) {
  .steps--line { gap: 22px; }
  .steps--line > div { grid-template-columns: 32px minmax(0, 1fr); column-gap: 14px; row-gap: 4px; }
  .steps--line > div::before { grid-column: 1; grid-row: 1 / span 3; }
  .steps--line > div > * { grid-column: 2; }
  .steps--line .st-ic, .steps[data-stepper].steps--line > div::after { display: none; }
  .steps--line > div > p:not(.kicker) { font-size: 15px; line-height: 22px; }
  .pks--ex > .pk:not(.pk--match) { display: none; }
}

/* services explorer on desktop: the three groups in a row above a full-width panel, so the list never outruns the panel */
@media (min-width: 961px) {
  .engine { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .engine-rail { position: static; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; align-items: start; }
}

/* the featured essay: the title sits next to the cover, so the cover keeps only its label */
.post--featured .esg-h { display: none; }
.post--featured .esg-t { align-self: start; position: relative; z-index: 1; }
.post--featured .esg-cover .esg-lines { grid-column: 1 / -1; }

/* text for screen readers only */
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.redact { position: relative; }
/* blog charts open full size (on a phone the labels are too small to read in the column) */
.prose .chart-open { display: block; cursor: zoom-in; }
/* phones: a visible, tappable line under each chart, inside its link */
@media (max-width: 600px) { .prose .chart-open::after { content: "Open the chart full size"; display: flex; align-items: center; min-height: 44px;
  font-size: 14px; font-weight: 500; text-decoration: underline; text-underline-offset: 3px; } }