/* stropk.ai homepage (Layout B, 2026-10-04). Tokens from the STROPK design system. */
@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
  src: url(/assets/brand/archivo-latin.woff2) format("woff2");
  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: "IBM Plex Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/brand/ibm-plex-mono-latin.woff2) format("woff2");
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/assets/brand/ibm-plex-mono-medium-latin.woff2) format("woff2");
}

:root {
  --abyss-blue: #071019;
  --deep-blue: #0e2740;
  --signal-blue: #1466a8;
  --stropk-blue: #258bde;
  --sky-blue: #63b2ec;
  --mist-blue: #a8d6f5;
  --carbon-black: #080a0d;
  --steel: #8a919c;
  --off-white: #f2f4f7;

  /* Light theme (the page) */
  --ground: var(--off-white);
  --ink: var(--carbon-black);
  --body: var(--carbon-black);
  --muted: var(--deep-blue);
  --accent: var(--stropk-blue);
  --accent-ink: var(--signal-blue);
  --on-accent: var(--off-white);
  --rule: rgba(138, 145, 156, 0.4);
  --line: var(--deep-blue);
  --focus: var(--signal-blue);
  --panel: var(--deep-blue);
  --panel-ink: var(--off-white);
  --panel-body: var(--mist-blue);
  --panel-accent: var(--sky-blue);

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-margin: 58px;

  --font-sans: "Archivo", system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, monospace;
  color-scheme: light;
}

*,
*::before,
*::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 88px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  background: var(--ground);
  color: var(--body);
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 23px;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { max-width: 100%; }
a { color: var(--accent-ink); }
h1, h2, h3, p { margin-top: 0; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: 16px; top: -60px; z-index: 100; padding: 10px 16px;
  background: var(--ink); color: var(--off-white); font-family: var(--font-mono);
  font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; text-decoration: none;
}
.skip-link:focus { top: 12px; }

.wrap { max-width: 1200px; margin: 0 auto; padding: 0 var(--space-margin); }
.sec { padding: 96px 0; border-top: 1px solid var(--rule); }

/* Type */
.headline {
  margin: 0; color: var(--ink); font-weight: 900; font-stretch: 112.5%;
  font-size: clamp(34px, 4.6vw, 62px); line-height: 1; text-transform: uppercase;
  overflow-wrap: break-word;
}
.h2 {
  margin: 0; color: var(--ink); font-weight: 900; font-stretch: 112.5%;
  font-size: clamp(28px, 4vw, 48px); line-height: 1.02; text-transform: uppercase;
}
.lede { margin: 0; max-width: 60ch; font-size: 19px; line-height: 30px; color: var(--ink); }
.subhead { margin: 0; font-size: 32px; line-height: 1.2; font-weight: 700; }
.caption {
  font-family: var(--font-mono); font-size: 10px; line-height: 14px; letter-spacing: 0.1em;
  text-transform: uppercase;
}
.emphasis { font-weight: 500; }

/* Logo lockup */
.logo {
  display: inline-flex; align-items: center; gap: 0.42em; line-height: 1;
  color: var(--ink); text-decoration: none;
}
.logo svg { display: block; flex: none; fill: var(--signal-blue); }
.logo-word { font-weight: 900; letter-spacing: 0.01em; white-space: nowrap; color: var(--ink); }
.logo-ai { font-weight: 500; color: var(--stropk-blue); }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  min-height: 44px; padding: 0 var(--space-5); border: 1px solid transparent; border-radius: 0;
  font-family: var(--font-mono); font-size: 11px; font-weight: 500; letter-spacing: 0.2em;
  text-transform: uppercase; text-decoration: none; text-align: center; cursor: pointer;
}
/* Layout B fills buttons with Stropk Blue; Off-White 11px text on it is ~3.5:1, below WCAG AA.
   Signal Blue (the same family, one step deeper) gives ~5.9:1. */
.btn-primary { background: var(--signal-blue); color: var(--on-accent); }
.btn-primary:hover { background: var(--deep-blue); }
.btn:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }

/* Header */
.site-header {
  position: sticky; top: 0; z-index: 50; background: var(--ground);
  border-bottom: 1px solid var(--rule);
}
.site-header .bar {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-5);
  max-width: none; padding: var(--space-5) var(--space-margin);
}
.site-header .logo { font-size: 17px; }
.nav { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-5); }
.nav a {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase;
  text-decoration: none; color: var(--body);
}
.nav a:hover { color: var(--accent-ink); }
.nav .nav-cta { color: var(--accent-ink); font-weight: 500; }

/* Floating CTA */
.float-cta {
  position: fixed; right: 24px; bottom: 24px; z-index: 60;
  box-shadow: 0 8px 24px rgba(8, 10, 13, 0.28);
}

/* Hero */
.hero { padding: 72px 0 80px; }
.hero .wrap { display: flex; flex-wrap: wrap; gap: var(--space-7); align-items: center; }
.hero-copy {
  flex: 1 1 440px; min-width: 0; display: flex; flex-direction: column;
  gap: var(--space-5); align-items: flex-start;
}
.hero-media { flex: 1 1 380px; min-width: 0; width: 100%; max-width: 560px; }

.compare {
  position: relative; width: 100%; aspect-ratio: 16 / 9; overflow: hidden;
  user-select: none; -webkit-user-select: none; touch-action: pan-y; background: var(--deep-blue);
  --pos: 35%;
}
.compare picture, .compare img, .compare video {
  position: absolute; inset: 0; width: 100%; height: 100%; display: block;
}
.compare img, .compare video { object-fit: cover; }
.compare .layer { opacity: 0; transition: opacity 1s ease; }
.compare .layer.is-on { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .compare .layer { transition: none; } }
.compare .top { clip-path: inset(0 calc(100% - var(--pos)) 0 0); }
.compare video::-webkit-media-controls, .compare video::-webkit-media-controls-start-playback-button { display: none !important; -webkit-appearance: none; }
.compare-line {
  position: absolute; top: 0; bottom: 0; left: calc(var(--pos) - 1px); width: 2px;
  background: var(--off-white); box-shadow: 0 0 0 1px rgba(8, 10, 13, 0.35); pointer-events: none;
}
.compare-knob {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 44px; height: 44px; border-radius: 50%; background: var(--stropk-blue); color: var(--off-white);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-mono); font-size: 14px; letter-spacing: 2px;
}
.compare input[type="range"] {
  position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0;
  cursor: ew-resize; -webkit-appearance: none; appearance: none;
}
.compare:has(input:focus-visible) { outline: 2px solid var(--focus); outline-offset: 3px; }
.compare:has(input:focus-visible) .compare-knob { box-shadow: 0 0 0 3px var(--off-white), 0 0 0 5px var(--focus); }

/* Metrics */
.metrics { border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.metrics .wrap {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--space-5); padding-top: 40px; padding-bottom: 40px; margin: 0 auto;
}
.metrics dl, .metrics dd { margin: 0; }
.metric { display: flex; flex-direction: column-reverse; justify-content: flex-end; }
.metric dd {
  font-size: 44px; line-height: 1; font-weight: 900; color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.metric dt { margin-top: var(--space-2); color: var(--muted); }
/* Live stats: typed out once on view; the last character lands green. */
.metric dd[data-live] { font-family: "IBM Plex Mono", ui-monospace, monospace; font-weight: 500; letter-spacing: -0.02em; min-height: 1em; }
.metric dd[data-live] .tail { color: inherit; }
/* The last digit sits on a four-face cube that rotates to a new digit. The cube itself is invisible:
   no box, no shading, just the black digit turning in place. */
.metric dd[data-live] .cube { --h: .76em; display: inline-block; position: relative; vertical-align: -.03em; }
.metric dd[data-live] .scene { display: block; width: .6em; height: var(--h); perspective: 2.2em; }
.metric dd[data-live] .rot { display: block; position: relative; width: 100%; height: 100%; transform-style: preserve-3d; transform: translateZ(calc(var(--h) / -2)); }
.metric dd[data-live] .face {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  backface-visibility: hidden; color: inherit; line-height: 1;
}
@media (prefers-reduced-motion: reduce) { .metric dd[data-live] .rot { transition: none !important; } }

/* How it works: vertical timeline (layout after 21st.dev HextaUI Timeline) */
.how-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-7) 96px; align-items: start; }
.how-head { position: sticky; top: 96px; display: flex; flex-direction: column; gap: var(--space-4); }
.how-head .caption { color: var(--accent-ink); }
.how-lede { margin: var(--space-2) 0 0; max-width: 38ch; font-size: 17px; line-height: 27px; color: var(--muted); }
.how-steps { list-style: none; margin: 0; padding: 0; counter-reset: none; }
.how-steps li {
  position: relative; margin: 0 0 var(--space-5) 0; padding: var(--space-5) var(--space-5) var(--space-5) 88px;
  background: #fff; border: 1px solid var(--rule); border-radius: 12px;
  box-shadow: 0 1px 2px rgba(8, 10, 13, 0.04);
  transition: border-color .2s ease, box-shadow .2s ease;
}
.how-steps li:last-child { margin-bottom: 0; }
.how-steps li:hover { border-color: var(--accent); box-shadow: 0 10px 28px -18px rgba(20, 102, 168, 0.55); }
.how-steps li::before {
  content: ""; position: absolute; left: 43px; top: calc(100% + 1px); height: var(--space-5); width: 2px; background: var(--accent); opacity: .45;
}
.how-steps li:last-child::before { display: none; }
.how-node {
  position: absolute; left: 24px; top: var(--space-5); width: 40px; height: 40px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--accent); color: var(--on-accent);
  font-family: var(--font-mono); font-size: 14px; font-weight: 500;
  box-shadow: 0 0 0 6px rgba(37, 139, 222, 0.14);
}
.how-steps .caption { display: block; color: var(--accent-ink); }
.how-title { margin: var(--space-2) 0 var(--space-2); font-size: 24px; line-height: 1.2; font-weight: 700; color: var(--ink); }
.how-steps p { margin: 0; font-size: 17px; line-height: 27px; color: var(--body); max-width: 52ch; }
@media (max-width: 900px) {
  .how-grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-6); }
  .how-head { position: static; }
}
@media (max-width: 640px) {
  .how-steps li { padding: var(--space-4) var(--space-4) var(--space-4) 68px; }
  .how-steps li::before { left: 31px; }
  .how-node { left: 12px; top: var(--space-4); width: 36px; height: 36px; font-size: 13px; }
  .how-title { font-size: 21px; }
}
@media (prefers-reduced-motion: reduce) { .how-steps li { transition: none; } }

/* Our Audits marquee */
.audits { border-top: 0; }
.slider {
  margin-top: var(--space-6); 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);
}
.track {
  display: flex; align-items: center; width: max-content; margin: 0; padding: 0; list-style: none;
  animation: slide 45s linear infinite;
}
.slider:hover .track, .slider:focus-within .track { animation-play-state: paused; }
.track li { flex: none; padding-right: 72px; white-space: nowrap; }
.track img { display: block; height: 64px; width: auto; }
.track .wordlogo {
  display: block; font-weight: 900; font-stretch: 125%; font-size: 24px; line-height: 64px; color: var(--ink);
}
@keyframes slide { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .slider { -webkit-mask-image: none; mask-image: none; }
  .track { animation: none; flex-wrap: wrap; width: auto; row-gap: 24px; padding: 0 var(--space-margin); max-width: 1200px; margin: 0 auto; }
  .track li { padding-right: 48px; }
  .track li[aria-hidden="true"] { display: none; }
}

/* What we do */
.services { background: var(--panel); color: var(--panel-body); border-top: 0; --focus: var(--sky-blue); --rule: rgba(168, 214, 245, 0.2); }
.services .h2 { color: var(--panel-ink); }
.services-intro { margin: var(--space-4) 0 0; max-width: 60ch; font-size: 17px; line-height: 27px; color: var(--panel-body); }
.svc-cols { display: flex; flex-wrap: wrap; gap: var(--space-7); margin-top: var(--space-7); align-items: flex-start; }
.svc-col { flex: 1 1 360px; min-width: 0; }
.svc-col .subhead { margin: 0 0 var(--space-5); color: var(--panel-ink); }
.svc-list { list-style: none; margin: 0; padding: 0; }
.svc { border-top: 1px solid var(--rule); padding: var(--space-4) 0; }
.svc h4 { margin: 0; font: inherit; }
.tgl {
  all: unset; box-sizing: border-box; cursor: pointer; display: flex; gap: var(--space-3);
  align-items: baseline; width: 100%; min-height: 28px;
}
.tgl:focus-visible { outline: 2px solid var(--focus); outline-offset: 4px; }
.tgl:hover .nm { color: var(--panel-accent); }
.chev {
  display: inline-block; flex: none; transition: transform 0.15s; font-family: var(--font-mono);
  color: var(--panel-accent);
}
.tgl[aria-expanded="true"] .chev { transform: rotate(90deg); }
@media (prefers-reduced-motion: reduce) { .chev { transition: none; } }
.svc-name { font-size: 19px; line-height: 28px; font-weight: 500; color: var(--panel-ink); }
.sub { padding: var(--space-3) 0 var(--space-2) var(--space-6); }
.sub-name { font-size: 17px; line-height: 25px; font-weight: 500; color: var(--panel-ink); margin: 0; }
.sub-body { padding-left: var(--space-6); }
.sub-plain + .sub-body { padding-left: 0; }
.sub-desc { margin: var(--space-2) 0; max-width: 60ch; font-size: 16px; line-height: 25px; color: var(--panel-body); }
.sub-cap { margin: 0; color: var(--panel-accent); }
.sub-body img { display: block; width: 100%; max-width: 560px; height: auto; margin-top: var(--space-4); }
.svc-cta {
  margin-top: 64px; display: flex; flex-wrap: wrap; gap: var(--space-5); align-items: center;
  justify-content: space-between; border-top: 1px solid var(--rule); padding-top: var(--space-6);
}
.svc-cta .subhead { color: var(--panel-ink); }

/* About */
.about .wrap { display: flex; flex-wrap: wrap; gap: var(--space-7); }
.about-head { flex: 1 1 320px; }
.about-body { flex: 2 1 420px; min-width: 0; display: flex; flex-direction: column; gap: var(--space-5); }
.people { display: flex; flex-wrap: wrap; gap: var(--space-6); margin: 0; padding: 0; list-style: none; }
.people p { margin: 0; }
.people .emphasis { color: var(--ink); }
.people .caption { color: var(--muted); }

/* Founders portrait with leader lines running left to the names */
.founders { box-sizing: border-box; --g: clamp(112px, 24vw, 280px); position: relative; width: 100%; flex: 1 1 100%; max-width: 860px; margin: var(--space-6) auto 0; padding-left: var(--g); }
.founders-photo { position: relative; aspect-ratio: 4 / 5; background: var(--deep-blue); }
.founders-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; display: block; }
.founders-photo::after { content: ""; position: absolute; inset: 0; box-shadow: inset 0 0 0 1px rgba(8, 10, 13, 0.14); pointer-events: none; }
.callout { --d: 30px; position: absolute; left: 0; height: var(--d); display: flex; align-items: flex-start; width: calc(var(--g) + (100% - var(--g)) * var(--x)); top: calc(var(--y) * 1% - var(--d)); }
.callout-line { flex: 1 1 auto; height: 1px; background: var(--stropk-blue); box-shadow: 0 0 0 1px rgba(242, 244, 247, 0.85); }
.callout-diag { flex: 0 0 var(--d); width: var(--d); height: var(--d); display: block; overflow: visible; }
.callout-diag { filter: drop-shadow(0 0 1px #f2f4f7) drop-shadow(0 0 1px #f2f4f7); }
.callout-diag line { stroke: var(--stropk-blue); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.callout-name, .callout-role { position: absolute; left: 0; margin: 0; white-space: nowrap; }
.callout-name { bottom: 100%; padding-bottom: 7px; font-size: 17px; line-height: 22px; font-weight: 500; color: var(--ink); }
.callout-role { top: 0; padding-top: 6px; font-family: var(--font-mono); font-size: 11px; line-height: 14px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--signal-blue); }
@media (max-width: 480px) { .callout { --d: 22px; } .callout-name { font-size: 15px; line-height: 20px; } .callout-role { font-size: 10px; letter-spacing: 0.12em; } }

@media (min-width: 900px) {
  .about .wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); column-gap: var(--space-7); }
  .founders { --g: calc((100% - var(--space-7)) / 3 + var(--space-7)); grid-column: 1 / -1; max-width: none; margin: var(--space-7) 0 0; }
  .founders-photo { aspect-ratio: 4 / 3; }
  .callout { top: calc(var(--yd) * 1% - var(--d)); }
}

/* Closing CTA */
.closing { padding: 120px 0; }
.closing-inner { display: flex; flex-direction: column; gap: var(--space-5); align-items: flex-start; }
.closing .h2 { max-width: 16ch; }

/* Footer */
.site-footer { border-top: 1px solid var(--rule); padding: 56px 0 104px; color: var(--body); } /* bottom room so the floating CTA never covers the legal links */
.site-footer .wrap { display: flex; flex-direction: column; gap: var(--space-6); }
.foot-top { display: flex; flex-wrap: wrap; gap: var(--space-5); justify-content: space-between; align-items: center; }
.foot-top .logo { font-size: 27px; }
.social { display: flex; gap: var(--space-3); margin: 0; padding: 0; list-style: none; }
.social a {
  display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px;
  border: 1px solid var(--line); color: var(--ink); text-decoration: none;
}
.social a:hover { background: var(--ink); color: var(--off-white); }
.foot-nav, .foot-bottom { border-top: 1px solid var(--rule); padding-top: var(--space-5); }
.foot-nav { display: flex; flex-wrap: wrap; gap: var(--space-4) var(--space-6); }
.foot-nav a, .legal a, .legal button {
  font-family: var(--font-mono); font-size: 10px; line-height: 14px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--ink); text-decoration: none;
}
.foot-nav a:hover, .legal a:hover, .legal button:hover { color: var(--accent-ink); text-decoration: underline; }
.foot-bottom { display: flex; flex-wrap: wrap; gap: var(--space-3) var(--space-6); justify-content: space-between; align-items: center; }
.foot-meta { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5); color: var(--muted); }
.legal { display: flex; flex-wrap: wrap; gap: var(--space-5); align-items: center; }
.legal button { background: none; border: 0; padding: 0; cursor: pointer; }

@media (max-width: 640px) {
  :root { --space-margin: 20px; }
  html { scroll-padding-top: 72px; }
  .sec { padding: 64px 0; }
  .closing { padding: 80px 0; }
  .hero { padding: 40px 0 56px; }
  .hero .wrap { gap: var(--space-6); }
  .site-header .bar { padding: var(--space-4) var(--space-margin); gap: var(--space-3); }
  .nav .nav-text { display: none; }
  .metric dd { font-size: 36px; }
  .metrics .wrap { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lede { font-size: 17px; line-height: 27px; }
  .subhead { font-size: 26px; }
  .sub { padding-left: var(--space-5); }
  .sub-body { padding-left: var(--space-5); }
  .track img { height: 48px; }
  .track .wordlogo { line-height: 48px; font-size: 20px; }
  .track li { padding-right: 48px; }
  .float-cta { right: 16px; bottom: 16px; left: 16px; }
  /* diagrams keep a readable size on phones: the open item scrolls sideways instead of shrinking the text */
  .sub-body { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .sub-body img { width: 560px; max-width: none; height: auto; }
}
@media (max-width: 380px) {
  .site-header .logo { font-size: 15px; }
  .nav .nav-cta { letter-spacing: 0.08em; }
}

/* FAQ */
.faq-list { margin-top: var(--space-5, 32px); display: grid; gap: var(--space-4, 24px); max-width: 760px; }
.faq-q { margin: 0 0 var(--space-1, 8px); font-size: 20px; line-height: 1.3; font-weight: 700; color: var(--ink); }
.faq-a { margin: 0; font-size: 17px; line-height: 27px; color: var(--muted); }