/* QueryStory site styles — ported from the Framer build.
   Reference geometry: 1240px shell, 22-column grid (56.36px) with 50px rows,
   lines #d9d9d9 on #efefef (light) and #303654 on #0e1234 (dark). */

@font-face {
  font-family: "Beausite Classic";
  src: url("/static/fonts/beausite-regular.woff2") format("woff2");
  font-display: swap;
  font-weight: 400;
}

@font-face {
  font-family: "Beausite Classic";
  src: url("/static/fonts/beausite-bold-italic.woff2") format("woff2");
  font-display: swap;
  font-weight: 700;
  font-style: italic;
}

@font-face {
  font-family: "Suisse Intl";
  src: url("/static/fonts/suisse-regular.woff2") format("woff2");
  font-display: swap;
  font-weight: 400;
}

@font-face {
  font-family: "Suisse Intl";
  src: url("/static/fonts/suisse-book.woff2") format("woff2");
  font-display: swap;
  font-weight: 450;
}

@font-face {
  font-family: "Suisse Intl";
  src: url("/static/fonts/suisse-medium.woff2") format("woff2");
  font-display: swap;
  font-weight: 500;
}

@font-face {
  font-family: "Suisse Intl";
  src: url("/static/fonts/suisse-bold.woff2") format("woff2");
  font-display: swap;
  font-weight: 700;
}

@font-face {
  font-family: "Matter Mono";
  src: url("/static/fonts/matter-mono-regular.woff2") format("woff2");
  font-display: swap;
  font-weight: 400;
}

@font-face {
  font-family: "Matter Mono";
  src: url("/static/fonts/matter-mono-medium.woff2") format("woff2");
  font-display: swap;
  font-weight: 500;
}

:root {
  --paper: #efefef;
  --line: #d9d9d9;
  --line-dark: #303654;
  --line-blue: #aac3f0;
  --ink: #0a0a0a;
  --heading: #1f2433;
  --navy: #0e1234;
  --body: #4a4a4a;
  --white: #fafafa;
  --blue: #cfe0ff;
  --tile: #eef4fe;
  --purple: #6a3b97;
  --bracket: #9e45f3;
  --link: #9e45f3;
  --shell: 1240px;
  /* minimum viewport gutter beside the shell: 36px desktop, 24px tablet
     (<1200), 16px phone (<810) — measured off the reference hero */
  --flank: 36px;
  --grid-x: 56.3636px;
  --grid-y: 50px;
  --display: "Beausite Classic", "Helvetica Neue", sans-serif;
  --sans: "Suisse Intl", Arial, sans-serif;
  --mono: "Matter Mono", "SFMono-Regular", monospace;
}

* {
  box-sizing: border-box;
}

/* wheel scrolling is eased in site.js; native smooth-behavior would fight it */

html {
  /* stop iOS Safari font boosting, which inflates text ~15% on real devices
     and overflows the header (logo/cookie banner clipping) */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  /* 100vw includes the classic vertical scrollbar, so the full-bleed band
     lines overflow by ~8px and summon a horizontal scrollbar; clip the
     viewport's x axis outright (body clip does not propagate in Chrome) */
  overflow-x: clip;
}

body {
  /* the full-width band lines break out to 100vw; clip the resulting few px of
     horizontal overflow without turning body into a scroll container (which
     would break the sticky home header) */
  overflow-x: clip;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  letter-spacing: -0.02em;
  -webkit-font-smoothing: antialiased;
}

/* the mobile menu is an in-flow dropdown, so no scroll lock while open */

a {
  color: inherit;
  text-decoration: none;
}

img {
  display: block;
  max-width: 100%;
}

button,
input,
textarea {
  font: inherit;
}

h1, h2, h3, p {
  margin: 0;
}

/* ---------- shell + grid surfaces ---------- */

.site-frame {
  position: relative;
  width: min(100% - 2 * var(--flank), var(--shell));
  margin: 0 auto;
  border-inline: 1px solid var(--line);
}

.dark-section .site-frame,
.site-frame--dark {
  border-inline-color: var(--line-dark);
}

.grid-surface {
  background-image:
    linear-gradient(to right, var(--line) 1px, transparent 1px),
    linear-gradient(to bottom, var(--line) 1px, transparent 1px);
  background-size: var(--grid-x) var(--grid-y);
}

.grid-surface-dark {
  background-image:
    linear-gradient(to right, var(--line-dark) 1px, transparent 1px),
    linear-gradient(to bottom, var(--line-dark) 1px, transparent 1px);
  background-size: var(--grid-x) var(--grid-y);
}

/* full-bleed dark band (CTA, footer) */
.dark-section {
  background: var(--navy);
  color: var(--white);
}

/* 150px grid spacer band between sections. The grid cells stay inside the
   1240 shell (via .site-frame + .grid-surface); only the band's top and bottom
   boundary lines run full-width to the viewport edges. */
.spacer-band {
  --band-line: var(--line);
  height: 150px;
  position: relative;
}

.spacer-band::before,
.spacer-band::after {
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 100vw;
  height: 1px;
  background: var(--band-line);
  pointer-events: none;
}

.spacer-band::before {
  top: 0;
}

.spacer-band::after {
  bottom: 0;
}

.spacer-band--prefooter {
  margin-bottom: 0;
}

.spacer-band--dark {
  --band-line: var(--line-dark);
}

/* ---------- type ---------- */

.eyebrow {
  font-family: var(--mono);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: -0.03em;
  text-transform: uppercase;
  color: var(--heading);
}

.dark-section .eyebrow,
.cta-section .eyebrow {
  color: var(--white);
}

.display-title {
  font-family: var(--display);
  font-size: 72px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.07em;
  color: var(--ink);
}

.section-title {
  font-family: var(--display);
  font-size: 56px;
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: -0.06em;
  color: var(--heading);
}

.section-title--navy {
  color: var(--navy);
}

.sub-title {
  font-family: var(--display);
  font-size: 36px;
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: -0.04em;
  color: var(--navy);
}

.section-copy {
  font-size: 16px;
  line-height: 1.6;
  letter-spacing: -0.02em;
  color: var(--body);
}

/* honeypot: present in the DOM for bots, invisible and untabbable for people */
.hp-field {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

/* ---------- buttons ---------- */

.action-button {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 41px;
  padding: 0 23px;
  background: var(--purple);
  border: none;
  color: var(--white);
  font-family: var(--mono);
  font-size: 14px;
  font-weight: 400;
  letter-spacing: -0.01em;
  line-height: 1.2;
  text-transform: uppercase;
  cursor: pointer;
  white-space: nowrap;
}

.action-button--dark {
  background: var(--navy);
}

/* selection-style corner brackets, offset 4px outside the fill */
.action-button::before,
.action-button::after,
.action-button > .bracket::before,
.action-button > .bracket::after {
  content: "";
  position: absolute;
  width: 10px;
  height: 10px;
  border: 0 solid var(--bracket);
  pointer-events: none;
}

@property --bko {
  syntax: "<length>";
  inherits: true;
  initial-value: 4px;
}

.action-button::before {
  top: calc(-1 * var(--bko, 4px));
  left: calc(-1 * var(--bko, 4px));
  border-top-width: 1px;
  border-left-width: 1px;
}

.action-button::after {
  top: calc(-1 * var(--bko, 4px));
  right: calc(-1 * var(--bko, 4px));
  border-top-width: 1px;
  border-right-width: 1px;
}

.action-button > .bracket::before {
  bottom: calc(-1 * var(--bko, 4px));
  left: calc(-1 * var(--bko, 4px));
  border-bottom-width: 1px;
  border-left-width: 1px;
}

.action-button > .bracket::after {
  bottom: calc(-1 * var(--bko, 4px));
  right: calc(-1 * var(--bko, 4px));
  border-bottom-width: 1px;
  border-right-width: 1px;
}

/* hover: the label rolls up and its duplicate rolls in from below, with a
   quick spring settle — one cycle, then an invisible reset (texts match) */
.label-roll {
  display: block;
  overflow: hidden;
  height: 17px;
}

.label-roll__track {
  display: flex;
  flex-direction: column;
}

.label-roll__track > span {
  display: block;
  height: 17px;
  line-height: 17px;
}

@keyframes label-roll {
  0% { transform: translateY(0); }
  55% { transform: translateY(-55%); }
  75% { transform: translateY(-47%); }
  100% { transform: translateY(-50%); }
}

.action-button:hover .label-roll__track {
  animation: label-roll 0.45s cubic-bezier(0.33, 1, 0.68, 1);
}

@media (prefers-reduced-motion: reduce) {
  .action-button:hover .label-roll__track {
    animation: none;
  }
}

/* ---------- header ---------- */

/* pinned on every page (the reference scrolls it away outside the home page;
   deliberate divergence, user decision 2026-08-26) */
.site-header {
  border-bottom: 1px solid var(--line);
  background: var(--paper);
  position: sticky;
  top: 0;
  z-index: 20;
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 66px;
  padding: 0 24px;
}

/* the anchor is a flex item: without flex none it shrinks on narrow phones
   and the global img max-width squeezes the wordmark */
.site-header__inner > a:first-child {
  flex: none;
}

.site-logo {
  width: 121px;
  min-width: 121px;
  height: 22px;
}

.site-nav {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 32px;
}

.site-nav a {
  font-size: 16px;
  letter-spacing: -0.02em;
  color: var(--heading);
  line-height: 1.6;
}

.site-nav a:hover {
  opacity: 0.7;
}

.menu-toggle {
  display: none;
}

.mobile-menu {
  display: none;
}

/* ---------- hero ---------- */

.hero {
  position: relative;
  padding-top: 60px;
  text-align: center;
}

.hero__pattern {
  position: absolute;
  top: 0;
  left: 0;
  border: none;
  width: 100%;
  /* the reference's star field ends above the dashboard; fade it out so no
     stars show through the card's masked fade zone or beside the cards */
  height: 620px;
  -webkit-mask-image: linear-gradient(#000 65%, transparent 100%);
  mask-image: linear-gradient(#000 65%, transparent 100%);
  pointer-events: none;
}

.hero__content {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 20px;
}

.hero__content .eyebrow {
  margin-bottom: 24px;
}

.hero__content .display-title {
  margin-bottom: 24px;
}

.hero__copy {
  max-width: 500px;
  color: var(--body);
  margin-bottom: 24px;
}

.hero__images {
  position: relative;
  z-index: 2;
  margin: 40px -1px 0;
  height: 600px;
}

/* the star-wave pattern must stay clipped to the hero even though the hero
   itself now overflows (so the dashboard frame and card can spill out) */
.hero__pattern {
  clip-path: inset(0);
}

/* Two masked layers, matching the reference. A light frame (12px larger, 24px
   radius) mattes the card so it pops off the grid; the dashboard image sits on
   top with its own 12px radius and soft drop shadow. Both fade with the same
   mask, and the card overflows its 600px slot so it scrolls under the sticky
   header and its ghost bars dissolve into the grid band below. */
.hero__dashboard-card {
  position: relative;
}

.hero__dashboard-frame {
  position: absolute;
  inset: -12px;
  background: rgba(230, 230, 230, 0.5);
  border-radius: 24px;
  -webkit-mask-image: linear-gradient(#000 25%, rgba(0, 0, 0, 0) 70%);
  mask-image: linear-gradient(#000 25%, rgba(0, 0, 0, 0) 70%);
}

.hero__dashboard {
  position: relative;
  display: block;
  width: 100%;
  height: auto;
  border-radius: 12px;
  -webkit-mask-image: linear-gradient(#000 25%, rgba(0, 0, 0, 0) 70%);
  mask-image: linear-gradient(#000 25%, rgba(0, 0, 0, 0) 70%);
}

/* the floating charts strip is two layers like the dashboard card: a light
   gray frame (24px radius, 12px larger on every side) matting a white card
   that carries the reference's soft drop shadow */
.hero__charts-card {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 240px;
  width: 1000px;
  max-width: 84%;
  z-index: 2;
}

.hero__charts-frame {
  position: absolute;
  inset: -12px;
  background: rgba(230, 230, 230, 0.5);
  border-radius: 24px;
}

.hero__charts {
  position: relative;
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 999 / 284;
  object-fit: cover;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 20px 40px rgba(13, 13, 13, 0.05);
}

/* ---------- story (feature showcase) ---------- */

.story-section {
  padding: 128px 40px;
}

.story-section__header {
  max-width: 1021px;
  margin-bottom: 96px;
}

.story-section__header .eyebrow {
  margin-bottom: 24px;
}

.story-section__header h2 {
  font-family: var(--display);
  font-size: 56px;
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: -0.06em;
  color: var(--heading);
  margin-bottom: 16px;
}

.story-section__header > p {
  color: var(--body);
}

.story-showcase {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 529px;
  gap: 42px;
  align-items: start;
}

.story-tabs {
  border-top: 1px solid var(--line);
}

.story-tab {
  border-bottom: 1px solid var(--line);
}

.story-tab__button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 24px 8px;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  font-family: var(--display);
  font-size: 20px;
  letter-spacing: -0.03em;
  line-height: 1.4;
  color: var(--heading);
}

.story-tab__arrow {
  flex: none;
  width: 16px;
  height: 16px;
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

.story-tab.open .story-tab__arrow {
  transform: rotate(90deg);
}

.story-tab__body {
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  transition: max-height 0.5s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.4s ease;
}

.story-tab.open .story-tab__body {
  max-height: 320px;
  opacity: 1;
}

.story-tab__body > p {
  color: var(--body);
  padding: 0 8px 16px;
}

.story-tab__body ul {
  list-style: none;
  margin: 0;
  padding: 0 8px 24px;
}

.story-tab__body li {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--heading);
  line-height: 1.6;
  margin-bottom: 8px;
}

.story-tab__body li::before {
  content: "";
  flex: none;
  width: 19px;
  height: 19px;
  border-radius: 6px;
  background-color: rgba(158, 68, 242, 0.13);
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path fill="%239e44f2" d="M6.5 12 2 7.6l1.4-1.4 3.1 3 6.1-6.1L14 4.5z"/></svg>');
  background-size: 12px 12px;
  background-position: center;
  background-repeat: no-repeat;
}

.story-visuals {
  position: relative;
  min-height: 529px;
}

.story-visual {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.45s ease;
  pointer-events: none;
}

.story-visual.active {
  opacity: 1;
  pointer-events: auto;
}

.story-visual img {
  width: 100%;
  height: auto;
}

/* ---------- capabilities (light blue) ---------- */

.capabilities {
  background: var(--blue);
  border-block: 1px solid var(--line-blue);
}

.capabilities .section-intro {
  padding: 128px 20px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.capabilities .section-intro .eyebrow {
  color: var(--navy);
  margin-bottom: 24px;
}

.capabilities .section-intro .section-title {
  color: var(--navy);
  margin-bottom: 16px;
}

.capabilities .section-intro .section-copy {
  max-width: 500px;
  color: var(--navy);
}

.usecase-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--line-blue);
}

.usecase {
  border-right: 1px solid var(--line-blue);
  border-bottom: 1px solid var(--line-blue);
  display: flex;
  flex-direction: column;
}

.usecase:nth-child(3n) {
  border-right: none;
}

.usecase__art {
  height: 300px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-bottom: 1px solid var(--line-blue);
}

.usecase__art img {
  width: 347px;
  height: 252px;
}

.usecase h3 {
  font-family: var(--display);
  font-size: 20px;
  font-weight: 400;
  letter-spacing: -0.03em;
  line-height: 1.4;
  color: var(--navy);
  padding: 16px;
  border-bottom: 1px solid var(--line-blue);
  text-align: center;
}

.usecase ul {
  list-style: none;
  margin: 0;
  padding: 16px;
}

.usecase li {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 16px;
  color: var(--navy);
  line-height: 1.6;
  margin-bottom: 2px;
}

.usecase li:last-child {
  margin-bottom: 0;
}

.usecase li::before {
  content: "";
  flex: none;
  width: 19px;
  height: 19px;
  border-radius: 6px;
  background-color: rgba(158, 68, 242, 0.13);
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path fill="%239e44f2" d="M6.5 12 2 7.6l1.4-1.4 3.1 3 6.1-6.1L14 4.5z"/></svg>');
  background-size: 12px 12px;
  background-position: center;
  background-repeat: no-repeat;
}

/* reads / integrations block inside the blue section */
.reads {
  padding: 100px 40px 0;
}

.reads__cols {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 40px;
  padding: 0 40px;
  margin-bottom: 55px;
}

.reads__cols .eyebrow {
  color: var(--navy);
  margin-bottom: 24px;
}

.reads h2 {
  font-family: var(--display);
  font-size: 36px;
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: -0.04em;
  color: var(--navy);
  max-width: 506px;
}

.reads__copy {
  color: var(--navy);
  align-self: start;
  justify-self: end;
  max-width: 350px;
}

.works-with {
  padding-bottom: 180px;
}

.works-with__label {
  font-family: var(--mono);
  font-size: 14px;
  letter-spacing: -0.03em;
  text-transform: uppercase;
  color: var(--navy);
  padding-left: 40px;
  margin-bottom: 24px;
}

.integration-ticker {
  overflow: hidden;
}

.integration-ticker__track {
  display: flex;
  gap: 16px;
  width: max-content;
  animation: ticker-left 34.8s linear infinite;
}

@keyframes ticker-left {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

.integration-ticker span {
  flex: none;
  width: 100px;
  height: 100px;
  border-radius: 10px;
  background: var(--tile);
  display: flex;
  align-items: center;
  justify-content: center;
}

.integration-ticker img {
  width: 80px;
  height: 80px;
}

/* ---------- enterprise ---------- */

.enterprise {
  position: relative;
}

.enterprise__inner {
  display: grid;
  grid-template-columns: 494px minmax(0, 1fr);
  padding: 100px 0 100px 40px;
  gap: 40px;
}

.enterprise .eyebrow {
  margin-bottom: 20px;
}

.enterprise .section-title {
  color: var(--navy);
  max-width: 474px;
  margin-bottom: 20px;
}

.enterprise .section-copy {
  color: var(--heading);
  max-width: 474px;
  margin-bottom: 12px;
}

.certifications__label {
  font-family: var(--mono);
  font-size: 14px;
  letter-spacing: -0.03em;
  text-transform: uppercase;
  color: var(--heading);
  margin: 24px 0 24px;
}

.certifications {
  display: flex;
  gap: 16px;
}

.certifications img {
  width: 100px;
  height: 100px;
}

.partner-rail {
  justify-self: end;
  width: 200px;
  height: 504px;
  overflow: hidden;
  border-left: 1px solid var(--line);
  align-self: center;
}

.partner-rail__track {
  display: flex;
  flex-direction: column;
  animation: rail-up 30s linear infinite;
}

@keyframes rail-up {
  from { transform: translateY(0); }
  to { transform: translateY(-50%); }
}

/* 600px of content per loop at 20px/s */

.partner-rail__cell {
  flex: none;
  width: 200px;
  height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-bottom: 1px solid var(--line);
}

.partner-rail__cell img {
  max-width: 144px;
  max-height: 40px;
}

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

.faq-section .section-intro {
  padding: 80px 20px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.faq-section .section-intro .eyebrow {
  margin-bottom: 24px;
}

.faq-section .section-intro .section-title {
  margin-bottom: 16px;
}

.faq-list {
  border-top: 1px solid var(--line);
}

.faq-item {
  border-bottom: 1px solid var(--line);
}

.faq-question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  width: 100%;
  min-height: 73px;
  padding: 24px;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  font-size: 16px;
  letter-spacing: -0.02em;
  color: var(--ink);
  line-height: 1.6;
}

.faq-marker {
  flex: none;
  width: 16px;
  height: 16px;
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

.faq-item.open .faq-marker {
  transform: rotate(180deg);
}

.faq-answer {
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  transition: max-height 0.5s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.4s ease;
  color: var(--body);
}

.faq-item.open .faq-answer {
  max-height: 1600px;
  opacity: 1;
}

.faq-answer > p {
  padding: 0 24px 24px;
  max-width: 900px;
}

.chev {
  display: block;
  width: 16px;
  height: 16px;
}

/* ---------- CTA ---------- */

.cta-section {
  position: relative;
  overflow: hidden;
}

.cta-section .site-frame {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  text-align: center;
  min-height: 776px;
  padding: 60px 0 0;
}

.cta-section .site-frame > .eyebrow,
.cta-section .site-frame > .section-title,
.cta-section .site-frame > .section-copy {
  padding: 0 20px;
}

.cta-section__wave {
  display: block;
  border: none;
  width: 100%;
  height: 400px;
  margin-top: 48px;
  /* the page must scroll natively over the wave; site.js feeds it the cursor */
  pointer-events: none;
}

.cta-section .eyebrow {
  margin-bottom: 24px;
}

.cta-section .section-title {
  color: var(--white);
  margin-bottom: 16px;
}

.cta-section .section-copy {
  color: var(--white);
  letter-spacing: -0.03em;
  line-height: 1.5;
  margin-bottom: 40px;
}

.cta-section .site-frame > * {
  position: relative;
}

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

.site-footer .grid-surface-dark {
  background-image: none;
}

.site-footer .site-frame {
  border-top: 1px solid var(--line-dark);
}

.site-footer .footer-main {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 413px;
  min-height: 285px;
}

.footer-brand {
  padding: 40px;
  border-right: 1px solid var(--line-dark);
}

.footer-brand img {
  width: 225px;
  height: 41px;
  margin-bottom: 16px;
}

.footer-brand p {
  color: var(--white);
  letter-spacing: -0.03em;
  line-height: 1.5;
}

.footer-brand .footer-address {
  margin-top: 109px;
}

.footer-nav__title {
  font-family: var(--mono);
  font-size: 14px;
  letter-spacing: -0.03em;
  text-transform: uppercase;
  color: var(--white);
  padding: 24px 24px 16px;
}

.footer-links {
  display: flex;
  flex-direction: column;
}

.footer-links a {
  color: var(--white);
  font-size: 14px;
  letter-spacing: -0.03em;
  line-height: 1.5;
  padding: 18px 24px;
  border-top: 1px solid var(--line-dark);
}

.footer-links a:hover {
  opacity: 0.7;
}

.footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 66px;
  padding: 0 24px;
  border-top: 1px solid var(--line-dark);
  font-family: var(--mono);
  font-size: 12px;
  line-height: 1.5;
  color: var(--line);
  text-transform: uppercase;
}

.footer-legal {
  display: flex;
  gap: 24px;
}

.footer-legal a:hover {
  opacity: 0.7;
}

/* ---------- cookie banner ---------- */

.cookie-banner {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 60;
  width: min(300px, calc(100vw - 48px));
  background: #fff;
  padding: 20px;
  box-shadow: 0 10px 30px rgba(14, 18, 52, 0.16);
  display: none;
}

.cookie-banner.visible {
  display: block;
}

.cookie-banner h2 {
  font-family: var(--sans);
  font-size: 16px;
  font-weight: 700;
  color: var(--heading);
  margin: 0 0 8px;
}

.cookie-banner p {
  font-size: 14px;
  line-height: 1.5;
  color: var(--heading);
  margin: 0 0 16px;
}

.cookie-banner a {
  color: var(--link);
}

.cookie-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}

.cookie-actions button {
  flex: 1;
  height: 38px;
  border: none;
  cursor: pointer;
  font-size: 14px;
}

.cookie-reject {
  background: #ececec;
  color: var(--heading);
}

.cookie-accept {
  background: var(--navy);
  color: #fff;
}

/* ---------- appear animations ---------- */

[data-appear] {
  opacity: 0.001;
  transform: translateY(var(--appear-y, 12px));
  transition:
    opacity 1s cubic-bezier(0.22, 1, 0.36, 1),
    transform 1s cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: var(--appear-delay, 0s);
  will-change: transform, opacity;
}

[data-appear="fade"] {
  --appear-y: 0px;
  transition-duration: 0.5s, 0.5s;
}

[data-appear="rise"] {
  --appear-y: 24px;
  transition-duration: 0.5s, 0.5s;
}

[data-appear].in {
  opacity: 1;
  transform: none;
}

/* split-text headings: chars rise in with stagger (set inline via JS) */
.split-text .word {
  display: inline-block;
  white-space: nowrap;
}

.split-text .char {
  display: inline-block;
  opacity: 0;
  transform: translateY(0.35em);
  transition: opacity 0.5s cubic-bezier(0.22, 1, 0.36, 1), transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

.split-text.in .char {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  [data-appear],
  .split-text .char {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .integration-ticker__track,
  .partner-rail__track {
    animation: none !important;
  }
}

/* ---------- contact page ---------- */

.contact-section {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 620px;
}

.contact-copy {
  padding: 37px 40px;
  border-right: 1px solid var(--line);
}

.contact-copy .eyebrow {
  margin-bottom: 14px;
}

.contact-copy h1 {
  font-family: var(--display);
  font-size: 48px;
  font-weight: 400;
  letter-spacing: -0.05em;
  line-height: 1.2;
  color: var(--heading);
  margin-bottom: 16px;
}

.contact-copy p {
  color: var(--heading);
  font-size: 18px;
  line-height: 1.5;
  margin-bottom: 24px;
  max-width: 480px;
}

.contact-copy a {
  color: var(--link);
}

.contact-form {
  padding: 40px 36px 40px;
  display: flex;
  flex-direction: column;
}

.contact-form label {
  display: block;
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  color: var(--heading);
  margin-bottom: 18px;
}

/* the reference SUBMIT button has no corner brackets */
.action-button--plain::before,
.action-button--plain::after,
.action-button--plain > .bracket::before,
.action-button--plain > .bracket::after {
  display: none;
}

.contact-form label > span {
  display: block;
  margin-bottom: 10px;
}

.contact-form input[type="file"] {
  border-style: dashed;
  cursor: pointer;
}

.contact-form input,
.contact-form textarea {
  display: block;
  width: 100%;
  border: 1px solid var(--line);
  background: var(--paper);
  padding: 10px 14px;
  font-family: var(--sans);
  font-size: 16px;
  letter-spacing: -0.02em;
  color: var(--ink);
}

.contact-form input::placeholder,
.contact-form textarea::placeholder {
  color: #9a9a9a;
}

.contact-form input:focus,
.contact-form textarea:focus {
  outline: 1px solid var(--navy);
}

.contact-form textarea {
  min-height: 100px;
  resize: vertical;
}

.contact-form__note {
  font-size: 14px;
  line-height: 1.5;
  color: var(--heading);
  margin-bottom: 24px;
}

.contact-form__note a {
  color: var(--link);
}

.contact-form .action-button {
  width: 100%;
  height: 48px;
}

.contact-spacer {
  height: 150px;
  border-block: 1px solid var(--line);
}

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

.about-hero {
  padding: 80px 20px 64px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.about-hero .eyebrow {
  margin-bottom: 24px;
}

.about-hero .display-title {
  font-size: 60px;
  line-height: 1;
  letter-spacing: -0.07em;
  color: var(--ink);
  max-width: 800px;
  margin-bottom: 32px;
}

.about-hero p {
  max-width: 800px;
  color: var(--body);
  margin-bottom: 16px;
}

.about-hero .about-link {
  color: var(--link);
  margin-top: 16px;
  font-family: var(--mono);
  font-size: 14px;
  letter-spacing: -0.03em;
  text-transform: uppercase;
}

.team-section .section-intro {
  padding: 80px 20px 48px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.team-section .section-intro .eyebrow {
  margin-bottom: 24px;
}

.team-section .section-intro .section-title {
  margin-bottom: 16px;
}

.team-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
}

.team-member {
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.team-member__photo {
  aspect-ratio: 278 / 334;
  width: calc(100% - 32px);
  height: auto;
  margin: 16px 16px 0;
  object-fit: cover;
  object-position: top;
}

.team-member__photo--empty {
  aspect-ratio: 278 / 334;
  width: calc(100% - 32px);
  margin: 16px 16px 0;
  background: repeating-linear-gradient(
    -45deg,
    #e3e3e3 0 6px,
    #ececec 6px 12px
  );
}

.team-member__meta {
  margin-top: 10px;
  padding: 12px 16px;
  border-top: 1px solid var(--line);
  background: var(--white);
}

.team-member__meta strong {
  display: block;
  font-weight: 400;
  font-size: 16px;
  letter-spacing: -0.02em;
  color: var(--heading);
}

.team-member__meta span {
  font-size: 13px;
  letter-spacing: -0.02em;
  color: var(--heading);
}

.how-we-build {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
  border-block: 1px solid var(--line);
}

.how-we-build > h2 {
  font-family: var(--display);
  font-size: 56px;
  font-weight: 400;
  letter-spacing: -0.05em;
  line-height: 1.2;
  color: var(--heading);
  padding: 40px;
}

.how-we-build__culture {
  padding: 40px;
  border-left: 1px solid var(--line);
}

.how-we-build__culture h3 {
  font-family: var(--display);
  font-size: 24px;
  font-weight: 400;
  letter-spacing: -0.03em;
  color: var(--heading);
  margin-bottom: 16px;
}

.how-we-build__culture p {
  color: var(--body);
  max-width: 570px;
}

.how-we-build__photo {
  display: block;
  width: calc(100% - 80px);
  /* the box keeps the photo's own ratio so nobody gets beheaded at any
     width; the cap reproduces the reference's 516px strip on wide desktop
     (the only place cover then crops, and mildly) */
  aspect-ratio: 2320 / 1148;
  height: auto;
  max-height: 516px;
  object-fit: cover;
  margin: 75px 40px 0;
  padding-bottom: 40px;
  box-sizing: content-box;
}

/* ---------- work with us (about) ---------- */

.work-with-us {
  padding: 0;
}

.work-with-us__photo {
  width: 100%;
  height: 516px;
  object-fit: cover;
}

.work-with-us__cols {
  display: grid;
  grid-template-columns: 550px minmax(0, 1fr);
}

.work-with-us__cols > h2 {
  padding: 120px 40px 60px;
}

.work-with-us__cols h2 {
  font-family: var(--display);
  font-size: 56px;
  font-weight: 400;
  letter-spacing: -0.06em;
  line-height: 1.2;
  color: var(--heading);
}

/* the copy column carries the divider that runs the section's full height */
.work-with-us__copy {
  border-left: 1px solid var(--line);
  padding: 120px 40px 60px 60px;
}

.work-with-us__copy p {
  color: var(--heading);
  font-size: 24px;
  text-wrap: balance;
  line-height: 1.4;
  max-width: 570px;
  margin-bottom: 24px;
}

/* ---------- blogs index ---------- */

.blogs-hero {
  padding: 88px 20px 80px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.blogs-hero .eyebrow {
  margin-bottom: 24px;
}

.blogs-hero .display-title {
  font-size: 64px;
  letter-spacing: -0.06em;
  color: var(--heading);
  margin-bottom: 16px;
}

.blogs-hero p {
  color: var(--body);
}

.blog-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  padding: 16px;
  min-height: 520px;
}

.blog-card {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line);
  background: var(--white);
  align-self: start;
}

.blog-card img {
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

.blog-card__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  border-block: 1px solid var(--line);
  font-family: var(--mono);
  font-size: 12px;
  text-transform: uppercase;
  color: var(--heading);
}

.blog-card__tag {
  background: #d0c5da;
  color: #8b6aaf;
  padding: 4px 8px;
}

.blog-card h2 {
  font-family: var(--display);
  font-size: 24px;
  font-weight: 400;
  letter-spacing: -0.03em;
  line-height: 1.3;
  color: var(--heading);
  padding: 16px 16px 8px;
}

.blog-card p {
  font-size: 14px;
  line-height: 1.5;
  color: var(--body);
  padding: 0 16px 24px;
}

.blogs-more {
  display: flex;
  justify-content: center;
  padding: 60px 0 100px;
}

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

.post-hero {
  padding: 60px 20px 62px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.post-hero .eyebrow {
  margin-bottom: 24px;
}

.post-hero h1 {
  font-family: var(--display);
  font-size: 56px;
  font-weight: 400;
  letter-spacing: -0.06em;
  line-height: 1.2;
  color: var(--heading);
  max-width: 680px;
  margin-bottom: 12px;
}

.post-hero p {
  font-size: 16px;
  color: var(--body);
  max-width: 760px;
}

.post-meta {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  position: relative;
}

/* the byline bar's top and bottom lines run full-width to the viewport edges,
   while the author/date content stays within the 1240 shell */
.post-meta::before,
.post-meta::after {
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 100vw;
  height: 1px;
  background: var(--line);
  pointer-events: none;
}

.post-meta::before {
  top: 0;
}

.post-meta::after {
  bottom: 0;
}

.post-meta > div {
  padding: 24px 40px;
  font-size: 14px;
  letter-spacing: -0.02em;
  color: var(--heading);
  text-align: center;
}

.post-meta > div:last-child {
  border-left: 1px solid var(--line);
  font-family: var(--mono);
  text-transform: uppercase;
}

.post-meta strong {
  font-weight: 500;
  margin-right: 12px;
}

/* the author's name is deliberately plain text — that click is reserved for a
   future author archive; the LinkedIn mark beside it carries the profile link,
   monochrome via currentColor rather than the brand blue */
.byline-linkedin {
  display: inline-flex;
  margin-left: 6px;
  vertical-align: -2px;
}

.byline-linkedin:hover {
  opacity: 0.6;
}

.byline-linkedin img {
  width: 14px;
  height: 14px;
}

.post-layout {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
}

.post-body {
  padding: 40px 60px 63px;
  border-right: 1px solid var(--line);
}

.post-body > p {
  color: var(--navy);
  line-height: 1.6;
  margin: 20px 0 0;
  max-width: 700px;
}

/* the reference bolds inline emphasis with Suisse Book (450), not 700 */
.post-body strong {
  font-weight: 450;
}

.post-body > p:first-child {
  font-style: italic;
  font-size: 20px;
  line-height: 1.4;
  font-weight: 500;
  letter-spacing: -0.04em;
  color: var(--navy);
  margin-top: 0;
}

.post-body blockquote {
  margin: 20px 0 0;
  padding-left: 22px;
  border-left: 3px solid var(--bracket);
  max-width: 700px;
}

.post-body blockquote p {
  font-size: 18px;
  line-height: 1.8;
  color: #16193b;
  margin: 0;
}

.post-body blockquote strong {
  font-weight: 400;
}

.post-body h2 {
  font-family: var(--display);
  font-size: 30px;
  font-weight: 400;
  letter-spacing: -0.04em;
  line-height: 1.4;
  color: var(--heading);
  margin: 40px 0 0;
}

.post-body a {
  color: var(--link);
}

.post-rail {
  padding: 48px 40px;
}

.post-rail__card {
  position: sticky;
  /* clears the pinned header (66px + its 1px border) and keeps the same 40px
     gap the card used to hold against the top of the viewport */
  top: 107px;
}

.post-rail__card .eyebrow {
  margin-bottom: 16px;
}

.post-rail__card h2 {
  font-family: var(--display);
  font-size: 32px;
  font-weight: 400;
  letter-spacing: -0.04em;
  line-height: 1.25;
  color: var(--heading);
  margin-bottom: 8px;
}

.post-rail__card p {
  color: var(--body);
  margin-bottom: 24px;
}

.post-rail__card .action-button {
  width: 100%;
}

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

.legal-header {
  min-height: 208px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px 36px;
  text-align: center;
  border-bottom: 1px solid var(--line);
}

.legal-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--line);
  background: #fff;
  padding: 6px 12px;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  color: var(--heading);
  margin-bottom: 20px;
}

.legal-chip__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--navy);
}

.legal-title {
  font-family: var(--display);
  font-size: 40px;
  font-weight: 400;
  letter-spacing: -0.05em;
  line-height: 1.2;
  color: var(--heading);
}

.legal-panel {
  width: min(100%, 700px);
  margin: 0 auto;
  border-inline: 1px solid var(--line);
}

.legal-updated {
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  color: var(--body);
  text-align: center;
  padding: 24px;
  border-bottom: 1px solid var(--line);
}

.legal-updated strong {
  font-weight: 500;
  color: var(--heading);
}

.legal-copy {
  padding: 0 60px 100px;
}

.legal-copy h2 {
  font-family: var(--display);
  font-size: 30px;
  font-weight: 400;
  letter-spacing: -0.03em;
  line-height: 1.4;
  color: var(--ink);
  margin: 40px 0 0;
}

.legal-copy h3 {
  font-family: var(--display);
  font-size: 24px;
  font-weight: 400;
  letter-spacing: -0.03em;
  line-height: 1.4;
  color: var(--ink);
  margin: 32px 0 0;
}

.legal-copy ul,
.legal-copy ol {
  padding-left: 14px;
  margin: 20px 0 0;
}

.legal-copy ul ul {
  margin: 0;
}

.legal-copy li li::marker {
  color: #333;
}

.legal-copy p,
.legal-copy li,
.legal-copy td,
.legal-copy th {
  color: #333;
  font-size: 16px;
  line-height: 1.6;
  margin: 20px 0 0;
}

.legal-copy li,
.legal-copy td,
.legal-copy th {
  margin: 0;
}

.legal-copy a {
  color: var(--link);
  text-decoration: none;
}

.legal-copy table {
  border-collapse: collapse;
  width: 100%;
  margin: 20px 0 0;
}

.legal-copy td,
.legal-copy th {
  border: 1px solid var(--line);
  padding: 10px;
  text-align: left;
}

.terms-page .legal-copy p {
  line-height: 1.7;
}

.cookie-settings-empty {
  min-height: 185px;
}

.not-found {
  align-items: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 720px;
  padding: 80px 36px;
  text-align: center;
}

.not-found .display-title {
  margin-bottom: 24px;
}

/* pages that keep their desktop layout on phones (like the Framer originals) */
.no-reflow,
body.no-reflow {
  min-width: 1240px;
}

.legal-shell {
  margin-bottom: 0;
}

/* ---------- responsive ---------- */

/* the reference narrows the flank to 24px at its tablet breakpoint */
@media (max-width: 1199px) {
  :root {
    --flank: 24px;
  }

  /* culture photo tightens its inset on the tablet band; the ratio and
     cap come from the base rule */
  .how-we-build__photo {
    width: calc(100% - 48px);
    margin: 75px 24px 0;
  }
}

@media (max-width: 1023px) {
  .story-showcase {
    grid-template-columns: 1fr;
  }

  .story-visuals {
    min-height: 0;
    height: auto;
  }

  .story-visual {
    position: relative;
    display: none;
  }

  .story-visual.active {
    display: block;
  }

  .usecase-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .usecase:nth-child(3n) {
    border-right: 1px solid var(--line-blue);
  }

  .usecase:nth-child(2n) {
    border-right: none;
  }

  .enterprise__inner {
    grid-template-columns: 1fr;
    padding: 64px 24px;
    gap: 24px;
  }

  .certifications {
    gap: 12px;
  }

  .certifications img {
    width: 76px;
    height: 76px;
  }

  .partner-rail {
    justify-self: stretch;
    width: 100%;
    height: auto;
    border-left: none;
    overflow: visible;
  }

  .partner-rail__track {
    flex-direction: row;
    align-items: center;
    gap: 32px;
    animation: none;
  }

  .partner-rail__cell {
    width: auto;
    height: auto;
    border-bottom: none;
  }

  .partner-rail__cell[aria-hidden="true"] {
    display: none;
  }

  .partner-rail__cell img {
    max-height: 28px;
    max-width: 110px;
  }

  .team-grid {
    grid-template-columns: 1fr;
    gap: 0;
    padding: 0;
  }

  .team-member {
    border: none;
    padding: 16px 32px;
  }

  .team-member__photo,
  .team-member__photo--empty {
    aspect-ratio: 1 / 1.03;
    width: 100%;
    margin: 0;
  }

  .team-member__meta {
    border: 1px solid var(--line);
    border-top: none;
    padding: 12px 16px;
  }

  .team-member__meta strong {
    color: var(--heading);
    font-size: 16px;
  }

  .how-we-build > h2 {
    font-size: 32px;
  }

  .post-layout,
  .contact-section,
  .how-we-build,
  .work-with-us__cols,
  .reads__cols {
    grid-template-columns: 1fr;
  }

  /* once the reads block stacks, the copy left-justifies under the title
     like the reference (the desktop rule pins it to the right column edge) */
  .reads__copy {
    justify-self: start;
    max-width: none;
  }

  .post-body,
  .contact-copy,
  .how-we-build__culture {
    border-right: none;
    border-left: none;
  }

  .blog-grid {
    grid-template-columns: 1fr;
    min-height: 640px;
  }

  .blog-card {
    border-right: none;
    border-bottom: 1px solid var(--line);
  }
}

@media (max-width: 809px) {
  /* the reference keeps a 16px flank around the shell on phones */
  :root {
    --flank: 16px;
  }

  .site-header__inner {
    padding: 0 16px;
  }

  .footer-brand .footer-address {
    margin-top: 24px;
  }

  /* enterprise: single column, large badges, logos in a horizontal marquee */
  .enterprise__inner {
    display: block;
    padding: 64px 16px;
  }

  .certifications {
    gap: 16px;
  }

  /* quarter-width badges: 148px at 703, 80px at 430, always one row */
  .certifications img {
    width: calc((100% - 48px) / 4);
    height: auto;
  }

  .partner-rail {
    width: auto;
    height: 96px;
    margin-top: 32px;
    border-left: none;
    align-self: auto;
    /* the 1023px tablet rule sets overflow visible; the marquee must clip */
    overflow: hidden;
  }

  .partner-rail__track {
    flex-direction: row;
    width: max-content;
    animation: rail-left-mobile 30s linear infinite;
  }

  @keyframes rail-left-mobile {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
  }

  .partner-rail__cell {
    width: 180px;
    height: 96px;
    border-bottom: none;
  }

  .display-title {
    font-size: 46px;
  }

  .about-hero .display-title {
    font-size: 34px;
    line-height: 1.2;
  }

  .section-title,
  .story-section__header h2 {
    font-size: 32px;
  }

  .sub-title,
  .reads h2 {
    font-size: 32px;
  }

  .works-with__label {
    font-family: var(--sans);
    text-transform: none;
    font-size: 16px;
  }

  /* the reference insets the hero copy 32px from the viewport edge at every
     phone width; the frame already accounts for 17 of that (16px flank + its
     1px border), so 32px of padding here left the copy ~34px too narrow */
  .hero__content {
    padding: 0 15px;
  }

  .cta-section .site-frame {
    padding-top: 100px;
    padding-bottom: 0;
    min-height: 0;
  }

  .cta-section .section-title {
    font-size: 28px;
  }

  .cta-section .section-title br {
    display: none;
  }

  .site-nav {
    display: none;
  }

  .site-header__inner > .action-button {
    height: 42px;
    margin-left: auto;
    padding: 0 18px;
  }

  /* Below 345px the logo, demo button and toggle cannot all fit (measured:
     4px of slack at 345, -1px at 340). The reference clips the toggle off the
     right edge here; we drop the header's demo button instead, because the
     toggle is the only navigation on phones and the hero carries the same
     call to action a screen below. */
  @media (max-width: 344px) {
    .site-header__inner > .action-button {
      display: none;
    }
  }

  .menu-toggle {
    display: flex;
    /* a flex item with a width still shrinks: at 320px it collapsed to 16px
       and the bars squashed with it */
    flex: none;
    flex-direction: column;
    justify-content: center;
    gap: 6px;
    width: 40px;
    min-width: 40px;
    height: 40px;
    padding: 8px;
    /* 12px here plus the 8px padding puts the bars 20px clear of the demo
       button, the gap the reference keeps */
    margin-left: 12px;
    background: none;
    border: none;
    cursor: pointer;
  }

  .menu-toggle span {
    display: block;
    height: 2px;
    background: var(--heading);
  }

  /* the menu drops in under the header and pushes the page down, like the
     reference: centered rows with hairline dividers */
  .mobile-menu {
    background: var(--paper);
    flex-direction: column;
  }

  .mobile-menu.open {
    display: flex;
  }

  .mobile-menu a {
    font-size: 17px;
    color: var(--heading);
    text-align: center;
    padding: 16px 0;
    border-bottom: 1px solid var(--line);
  }

  /* hamburger morphs into a close cross while the menu is open */
  body.menu-open .menu-toggle span:first-child {
    transform: translateY(4px) rotate(45deg);
  }

  body.menu-open .menu-toggle span:last-child {
    transform: translateY(-4px) rotate(-45deg);
  }

  .hero__images {
    height: 490px;
    padding: 0 16px;
  }

  /* phones show the dashboard at natural aspect with a short bottom fade */
  .hero__dashboard,
  .hero__dashboard-frame {
    -webkit-mask-image: linear-gradient(#000 82%, rgba(0, 0, 0, 0) 100%);
    mask-image: linear-gradient(#000 82%, rgba(0, 0, 0, 0) 100%);
  }

  .hero__charts-card {
    width: 90.5%;
    max-width: none;
    top: 210px;
  }

  .hero__charts {
    aspect-ratio: auto;
  }

  .story-section {
    padding: 64px 20px;
  }

  .story-tab .story-visuals {
    margin: 8px 0 24px;
  }

  .story-section__header {
    margin-bottom: 48px;
  }

  .usecase-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .usecase:nth-child(3n) {
    border-right: 1px solid var(--line-blue);
  }

  .usecase:nth-child(2n) {
    border-right: none;
  }

  .usecase__art {
    height: auto;
    padding: 24px 12px;
  }

  .usecase__art img {
    max-width: 100%;
    height: auto;
  }

  .usecase h3 {
    text-align: center;
  }

  .usecase li {
    align-items: flex-start;
  }

  .usecase li::before {
    margin-top: 6px;
  }

  .capabilities .section-intro {
    padding: 80px 32px;
  }

  .reads {
    padding: 64px 32px 0;
  }

  /* phones re-cap the reads copy like the reference */
  .reads__copy {
    max-width: 350px;
  }

  .works-with {
    padding-bottom: 64px;
  }

  .team-grid {
    grid-template-columns: 1fr;
    gap: 0;
    padding: 0;
  }

  .team-member {
    border: none;
    padding: 16px 32px;
  }

  .team-member__photo,
  .team-member__photo--empty {
    aspect-ratio: 1 / 1.03;
    width: 100%;
    margin: 0;
  }

  .team-member__meta {
    border: 1px solid var(--line);
    border-top: none;
    padding: 12px 16px;
  }

  .team-member__meta strong {
    color: var(--heading);
    font-size: 16px;
  }

  .how-we-build > h2 {
    font-size: 32px;
  }



  .site-footer .footer-main {
    grid-template-columns: 1fr;
  }

  .footer-brand {
    border-right: none;
    border-bottom: 1px solid var(--line-dark);
  }

  .footer-bottom {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 8px;
    padding: 16px 24px;
  }

  .contact-copy,
  .contact-form {
    padding: 32px 40px;
  }

  .contact-copy h1 {
    font-size: 42px;
  }

  .contact-copy {
    padding-bottom: 8px;
  }

  .post-meta {
    grid-template-columns: 1fr;
  }

  .post-meta > div:last-child {
    border-left: none;
    border-top: 1px solid var(--line);
    text-align: left;
  }

  .post-body {
    padding: 32px 40px;
  }

  .post-rail {
    padding: 32px 48px;
  }

  .post-hero h1 {
    font-size: 34px;
    max-width: 280px;
  }

  .post-hero p {
    /* the reference lets the standfirst run the full shell and balance
       into two lines on phones */
    max-width: none;
    text-wrap: balance;
  }

  .post-meta > div {
    text-align: center;
  }

  .post-meta strong {
    display: block;
    margin-right: 0;
  }

  /* live phone legal pages run flush: header and footer bleed full width */
  .legal-page {
    padding: 0;
  }

  .legal-copy {
    padding: 0 32px 64px;
  }

  /* ---------- blog on phones (the live post reflows now) ---------- */

  .blog-grid {
    grid-template-columns: 1fr;
    min-height: 0;
  }

  .post-hero {
    padding: 24px 24px 40px;
  }

  .post-hero h1 {
    font-size: 31px;
    max-width: none;
  }

  /* byline stacks into two centered bordered rows */
  .post-meta {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .post-meta > div {
    padding: 24px 16px;
  }

  .post-meta > div strong {
    display: block;
  }

  .post-meta > div,
  .post-meta > div:last-child {
    justify-content: center;
    border-left: none;
    text-align: center;
  }

  .post-meta > div + div {
    border-top: 1px solid var(--line);
    font-family: var(--mono);
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: -0.02em;
  }

  /* single column: the get-started card follows the article */
  .post-layout {
    grid-template-columns: 1fr;
  }

  .post-body {
    padding: 32px 24px 48px;
    border-right: none;
  }

  .post-body blockquote {
    font-size: 18px;
    line-height: 1.8;
  }

  .post-rail {
    padding: 32px 24px 64px;
    border-top: 1px solid var(--line);
  }

  .post-rail__card {
    position: static;
  }

  .post-rail__card h2 {
    font-size: 36px;
  }

  .how-we-build > h2,
  .how-we-build__culture {
    padding: 24px 20px;
  }

  /* culture photo on phones: tighter top margin; the photo-ratio box from
     the base rule shows the complete picture at every width */
  .how-we-build__photo {
    width: calc(100% - 48px);
    margin: 40px 24px 0;
    padding-bottom: 40px;
  }

  /* work-with-us stacks on phones: bordered heading row, copy below */
  .work-with-us__cols {
    grid-template-columns: 1fr;
  }

  .work-with-us__cols > h2 {
    font-size: 34px;
    padding: 40px 24px 24px;
    border-bottom: 1px solid var(--line);
  }

  .work-with-us__copy {
    border-left: none;
    padding: 24px 24px 48px;
  }

  .how-we-build__culture {
    border-left: none;
    border-top: 1px solid var(--line);
  }
}

/* no-reflow pages keep their desktop layout at tablet/phone viewport widths */
@media (max-width: 1023px) {
  body.no-reflow .post-layout {
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  }

  body.no-reflow .post-body {
    border-right: 1px solid var(--line);
    padding: 40px 60px 40px;
  }

  body.no-reflow .blog-grid {
    grid-template-columns: repeat(3, 1fr);
    min-height: 520px;
  }

  body.no-reflow .blog-card {
    border: 1px solid var(--line);
  }
}

@media (max-width: 809px) {
  body.no-reflow .site-nav {
    display: flex;
  }

  body.no-reflow .site-header__inner > .action-button {
    height: 49px;
    margin-left: 0;
    padding: 0 27px;
  }

  body.no-reflow .menu-toggle,
  body.no-reflow .mobile-menu {
    display: none;
  }

  body.no-reflow .site-footer .footer-main {
    grid-template-columns: minmax(0, 1fr) 413px;
  }

  body.no-reflow .footer-brand {
    border-right: 1px solid var(--line-dark);
    border-bottom: none;
  }

  body.no-reflow .footer-bottom {
    flex-direction: row;
    align-items: center;
    gap: 0;
    padding: 0 24px;
  }

  body.no-reflow .post-meta {
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  }

  body.no-reflow .post-meta > div:last-child {
    border-left: 1px solid var(--line);
    border-top: none;
    text-align: right;
  }

  body.no-reflow .post-body {
    padding: 40px 60px 80px;
  }

  body.no-reflow .post-rail {
    padding: 48px 40px;
  }
}