/* ==========================================================================
   Fonts — self-hosted Google Sans (only font used on this site)
   ========================================================================== */
@font-face {
  font-family: 'Google Sans';
  src: url('assets/fonts/GoogleSans-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Google Sans';
  src: url('assets/fonts/GoogleSans-Italic.ttf') format('truetype');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Google Sans';
  src: url('assets/fonts/GoogleSans-Medium.ttf') format('truetype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Google Sans';
  src: url('assets/fonts/GoogleSans-SemiBold.ttf') format('truetype');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Google Sans';
  src: url('assets/fonts/GoogleSans-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Instrument Sans';
  src: url('assets/fonts/static/InstrumentSans-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Instrument Sans';
  src: url('assets/fonts/static/InstrumentSans-Italic.ttf') format('truetype');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Instrument Sans';
  src: url('assets/fonts/static/InstrumentSans-Medium.ttf') format('truetype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Instrument Sans';
  src: url('assets/fonts/static/InstrumentSans-SemiBold.ttf') format('truetype');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Instrument Sans';
  src: url('assets/fonts/static/InstrumentSans-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* ==========================================================================
   Gist — design tokens (from Figma "Gist Website")
   ========================================================================== */
:root {
  --font-heading: 'Google Sans', system-ui, sans-serif;
  --font-body: 'Instrument Sans', system-ui, sans-serif;
  --color-ink: #2a323c;
  --color-ink-soft: #474547;
  --color-body: #475464;
  --color-muted: #9e9996;
  --color-cream: #f5f2f0;
  --color-sand: #d9d4d1;
  --color-grey-bg: #f5f5f5;
  --color-rose: #9f6569;
  --color-rose-border: #85585b;
  --color-rose-strong: #bb6f6f;
  --color-purple: #554167;
  --color-purple-border: #473755;
  --color-purple-divider: #8466a0;
  --color-purple-deep: #3f304c;
  --color-navy: #1c2537;
  --color-black: #131a22;
  --gradient-security: linear-gradient(90deg, #261D2E 0%, #1B1324 55%, #0F0A12 100%);
  --max-width: 1440px;
  --gutter: 180px;
}

/* ==========================================================================
   Reset & base
   ========================================================================== */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--color-ink);
  background: var(--color-black);
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; margin: 0; padding: 0; }
h1, h2, h3, h4, p { margin: 0; }

/* ==========================================================================
   Type scale
   ========================================================================== */
.eyebrow { font-family: var(--font-heading); font-weight: 600; font-size: 16px; line-height: 1.2em; }
.eyebrow--rose { color: var(--color-rose); }
.eyebrow--light { color: var(--color-cream); }

.h2 { font-family: var(--font-heading); font-weight: 600; font-size: clamp(1.625rem, 1rem + 1.667vw, 2.5rem); line-height: 1.2em; letter-spacing: -0.81px; color: var(--color-ink); }
.h2--light { color: var(--color-cream); }
.h2--center { text-align: center; }

.h3 { font-family: var(--font-heading); font-weight: 500; font-size: clamp(1.125rem, 0.857rem + 0.714vw, 1.5rem); line-height: 1.1em; color: var(--color-ink); }
.h3--rose { color: var(--color-rose); }
.h3--light { color: var(--color-cream); }

.h4 { font-family: var(--font-heading); font-weight: 500; font-size: 22px; line-height: 1.1em; color: var(--color-ink); }
.h4--rose { color: var(--color-rose-strong); }
.h4--light { color: var(--color-cream); }

.body-l { font-size: clamp(1.063rem, 0.839rem + 0.595vw, 1.375rem); line-height: 1.4em; color: var(--color-ink); font-weight: 400; }
.body-l--center { text-align: center; }
.body-l--light { color: var(--color-cream); }
.body-l--muted { color: var(--color-body); }

.body-m { font-size: clamp(0.938rem, 0.848rem + 0.238vw, 1.063rem); line-height: 1.4em; color: var(--color-body); font-weight: 400; }
.body-m--light { color: var(--color-sand); }

/* ==========================================================================
   Buttons
   ========================================================================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 16px;
  border-radius: 3px;
  border: 1px solid transparent;
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.2;
  white-space: nowrap;
  cursor: pointer;
  transition: opacity 0.15s ease;
}
.btn:hover { opacity: 0.85; }

.btn--primary-dark { background: var(--color-purple); border-color: var(--color-purple-border); color: #f6f7f3; }
.btn--rose { background: var(--color-rose); border-color: var(--color-rose-border); color: #f6f7f3; }
.btn--ghost { background: var(--color-cream); border-color: var(--color-sand); color: var(--color-purple); }
.btn--block { width: 100%; }
.btn--ghost-light { background: rgb(245 242 240 / 10%); border-color: rgb(158 153 150 / 60%); color: #f5f2f0; }

.link-rose { color: var(--color-rose); font-size: 14px; font-weight: 400; }

/* ==========================================================================
   Layout helpers
   ========================================================================== */
section { padding-left: var(--gutter); padding-right: var(--gutter); }

/* Backgrounds (color/image) stay full-bleed (100vw) on every band — only the
   gutter grows past 1440px viewport width, so the 1184px content column stays
   pinned to the center instead of the whole layout stretching.
   --gutter-min is a hard floor: the side padding never drops below it at any
   viewport width, so every max() below is deliberate, not decorative. */
:root { --gutter-min: 30px; }

@media (width >= 1440px) {
  :root { --gutter: max(var(--gutter-min), calc((100vw - 1184px) / 2)); }
}

@media (width <= 1200px) {
  :root { --gutter: max(var(--gutter-min), 40px); }
}

@media (width <= 640px) {
  :root { --gutter: var(--gutter-min); }
}

/* ==========================================================================
   Nav
   ========================================================================== */
.nav {
  background: var(--color-sand);
  border-bottom: 1px solid #d9dcd1;
  padding: 18px var(--gutter);
  position: sticky;
  top: 0;
  z-index: 50;
}

.nav__inner {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.nav__logo img { width: 80px; height: 33px; }

.nav__links {
  display: flex;
  align-items: center;
  gap: 24px;
  font-size: 14px;
  color: var(--color-ink-soft);
}
.nav__links a:not(.btn) { color: var(--color-ink); }
.nav__links a:first-child { color: var(--color-ink-soft); }
.nav__actions { display: flex; gap: 8px; }

.nav__toggle {
  display: none;
  position: fixed;
  top: 18px;
  right: var(--gutter);
  z-index: 110;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 36px;
  height: 36px;
  padding: 0;
  background: none;
  border: none;
  cursor: pointer;
  flex-shrink: 0;
}

.nav__toggle span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--color-ink);
  border-radius: 2px;
  transition: transform 0.25s ease, opacity 0.25s ease;
}
.nav__toggle.is-active span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav__toggle.is-active span:nth-child(2) { opacity: 0; }
.nav__toggle.is-active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.nav__toggle.is-active span { background: #fff; }

.nav-drawer { position: fixed; inset: 0; z-index: 100; visibility: hidden; pointer-events: none; }
.nav-drawer.is-open { visibility: visible; pointer-events: auto; }

.nav-drawer__overlay {
  position: absolute;
  inset: 0;
  background: rgb(19 26 34 / 50%);
  opacity: 0;
  transition: opacity 0.3s ease;
}
.nav-drawer.is-open .nav-drawer__overlay { opacity: 1; }

.nav-drawer__panel {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 75%;
  background: var(--color-sand);
  display: flex;
  flex-direction: column;
  padding: 18px var(--gutter) 32px;
  transform: translateX(-100%);
  transition: transform 0.3s ease;
  overflow-y: auto;
}
.nav-drawer.is-open .nav-drawer__panel { transform: translateX(0); }
.nav-drawer__top { display: flex; align-items: center; }
.nav-drawer__links { display: flex; flex-direction: column; gap: 24px; margin-top: 40px; }
.nav-drawer__links a { font-size: 17px; color: var(--color-ink-soft); }
.nav-drawer__actions { display: flex; gap: 12px; margin-top: 32px; }
body.nav-drawer-open { overflow: hidden; }

/* ==========================================================================
   Hero
   ========================================================================== */
.hero {
  position: relative;
  background: var(--color-navy) url('assets/hero-bg.png') bottom center / cover no-repeat;
  border-bottom: 1px solid var(--color-sand);
  min-height: 696px;
  display: flex;
  align-items: center;
  overflow: hidden;
  padding: 110px var(--gutter) 96px;
}
.hero__content { position: relative; max-width: 586px; }

.hero__title {
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: clamp(3.25rem, 0.929rem + 6.190vw, 6.5rem);
  line-height: 1em;
  letter-spacing: -1.56px;
  color: var(--color-cream);
  margin: 8px 0 20px;
}
.hero__subtitle { font-size: clamp(1.125rem, 0.946rem + 0.476vw, 1.375rem); line-height: 1.6em; color: var(--color-cream); max-width: 489px; }
.hero__ctas { display: flex; gap: 12px; margin: 40px 0 6px; }
.hero__footnote { font-size: 14px; color: var(--color-muted); margin-top: 24px; }

/* ==========================================================================
   Get the gist band
   ========================================================================== */
.gist-band {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr 1fr;
  gap: 48px;
  align-items: center;
  padding: 120px var(--gutter);
  background: linear-gradient(135deg, #BCB5C3 0%, #F4F4F4 65%);
}
.gist-band__deco { width: 280px; }
.gist-band__intro { display: flex; flex-direction: column; gap: 12px; }
.gist-band__compare { display: flex; flex-direction: column; gap: 24px; }
.compare-block { display: flex; flex-direction: column; gap: 8px; }
.compare-block--bordered { padding-top: 4px; }
.check-list { display: flex; flex-direction: column; gap: 10px; }
.check-list li { display: flex; gap: 6px; align-items: flex-start; }
.check-list img { width: 15px; height: 15px; margin-top: 4px; flex-shrink: 0; }

/* ==========================================================================
   Platform
   ========================================================================== */
.platform { background: #fff; padding: 88px var(--gutter); display: flex; flex-direction: column; align-items: center; gap: 48px; }
.platform__intro { max-width: 880px; display: flex; flex-direction: column; gap: 12px; }

.platform__grid {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 24px;
  max-width: 1200px;
  width: 100%;
}

.platform__grid-graphic {
  grid-column: 2;
  grid-row: 1 / span 2;
  width: 300px;
  justify-self: center;
  position: relative;
  left: -64px;
}
.platform__card { display: flex; flex-direction: column; gap: 10px; max-width: 283px; text-align: left; place-self: start start; }
.platform__card img { width: 15px; height: 15px; }
.platform__card--tl { grid-column: 1; grid-row: 1; }
.platform__card--tr { grid-column: 3; grid-row: 1; }
.platform__card--bl { grid-column: 1; grid-row: 2; }
.platform__card--br { grid-column: 3; grid-row: 2; }

@media (width <= 900px) {
  .platform__grid { display: flex; flex-direction: column; align-items: center; gap: 24px; width: 100%; }
  .platform__grid-graphic { order: -1; width: 100%; max-width: 240px; }
  .platform__card { text-align: center !important; align-items: center; width: 100%; max-width: 480px; }
}

/* ==========================================================================
   How it works
   ========================================================================== */
.how { background: #f5f5f5; padding: 88px var(--gutter); display: flex; flex-direction: column; align-items: center; }
.how__intro { max-width: 883px; width: 100%; display: flex; flex-direction: column; gap: 12px; margin-bottom: 24px; }
.how__link { color: inherit; text-decoration: underline; }
.steps { display: flex; flex-direction: column; gap: 28px; max-width: 883px; width: 100%; }
.step { display: flex; gap: 28px; align-items: center; }
.step__marker { position: relative; flex-shrink: 0; }

.step__num {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 121px;
  height: 76px;
  background: #fff;
  border: 1px solid var(--color-sand);
  border-radius: 10px;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 16px;
  color: var(--color-rose);
}

.step__diamond {
  position: absolute;
  left: 0;
  top: 50%;
  width: 13px;
  height: 12px;
  transform: translate(-50%, -50%);
  z-index: 2;
}

.step__connector {
  position: absolute;
  left: -35px;
  top: -66px; /* anchors the curve's ends on the diamonds (38px = box vertical center), not the box edges */
  width: 36px;
  height: 104px;
}
.step__body { display: flex; flex-direction: column; gap: 6px; max-width: 560px; }

/* ==========================================================================
   Workspace (Everything a lawyer needs)
   ========================================================================== */
.workspace { background: #362B40; padding: 88px var(--gutter); display: flex; justify-content: center; }
.workspace__inner { max-width: 1184px; width: 100%; display: flex; flex-direction: column; gap: 12px; }
.workspace__inner .h2 { margin-bottom: 36px; }
.workspace__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }

.workspace__card {
  background: rgb(255 255 255 / 6%);
  border: 1px solid rgb(255 255 255 / 14%);
  border-radius: 20px;
  padding: 32px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.workspace__icon { width: 24px; height: 24px; }
.workspace__card .h3 { margin-top: 4px; }

@media (width <= 800px) {
  .workspace__grid { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Security
   ========================================================================== */
.security {
  background: var(--gradient-security);
  padding: 88px var(--gutter);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 48px;
}
.security__cards { display: flex; gap: 24px; width: 100%; max-width: 1184px; }

.security__card {
  display: flex;
  gap: 24px;
  align-items: center;
  flex: 1 1 0;
  min-width: 0;
  min-height: 140px;
  padding: 24px;
  border-radius: 16px;
  background: rgb(255 255 255 / 4%);
  border-top: 1px solid rgb(255 255 255 / 8%);
}
.security__icon { width: 68px; height: 72px; flex-shrink: 0; }
.security__card > div { display: flex; flex-direction: column; gap: 8px; }

/* ==========================================================================
   Why Gist
   ========================================================================== */
.why-gist { background: #EAE9EB; padding: 72px var(--gutter); display: flex; justify-content: center; }
.why-gist__inner { max-width: 1184px; width: 100%; display: flex; flex-direction: column; gap: 12px; }
.why-gist .eyebrow { margin-bottom: 4px; }
.why-gist .body-l { max-width: 1056px; padding: 10px 0 30px; }
.why-list { display: flex; flex-direction: column; }

.why-list li {
  display: grid;
  grid-template-columns: 32px 260px 1fr;
  gap: 28px;
  align-items: center;
  padding: 22px 0;
  border-top: 1px solid var(--color-purple-divider);
}
.why-list li:last-child { border-bottom: 1px solid var(--color-purple-divider); }
.why-list li img { width: 32px; height: 32px; }

@media (width <= 800px) {
  .why-list li { grid-template-columns: 32px 1fr; gap: 10px; }
  .why-list li h4 { grid-column: 2; }
  .why-list li p { grid-column: 1 / -1; }
}

/* ==========================================================================
   Final CTA
   ========================================================================== */
.final-cta {
  position: relative;
  background: #0f0a12;
  padding: 64px var(--gutter) 88px;
  min-height: 361px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 40px;
  overflow: hidden;
  text-align: center;
}
.final-cta__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.final-cta__content { position: relative; display: flex; flex-direction: column; align-items: center; gap: 24px; max-width: 900px; }
.final-cta__subtitle { max-width: 860px; }
.final-cta__ctas { display: flex; gap: 12px; }

/* ==========================================================================
   Footer
   ========================================================================== */
.footer { background: var(--color-black); padding: 34px var(--gutter); }

.footer__inner {
  max-width: 1184px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.footer__links { display: flex; gap: 20px; flex-wrap: wrap; }
.footer__links a { color: var(--color-cream); font-size: 14px; }
.footer__meta { display: flex; align-items: center; gap: 24px; color: var(--color-cream); font-size: 14px; }
.footer__meta img { width: 24px; height: 24px; }

/* ==========================================================================
   Product — Hero
   ========================================================================== */
.product-hero {
  position: relative;
  background: var(--color-navy) url('assets/product-bg.png') bottom center / cover no-repeat;
  min-height: 527px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 60px var(--gutter);
  overflow: hidden;
  text-align: center;
}
.product-hero__content { position: relative; display: flex; flex-direction: column; align-items: center; gap: 0; max-width: 800px; }

.product-hero__title {
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: clamp(2.5rem, 0.714rem + 4.762vw, 5rem);
  line-height: 1em;
  letter-spacing: -1.56px;
  color: var(--color-cream);
  margin: 8px 0 20px;
}
.product-hero__subtitle { max-width: 796px; }
.product-hero__ctas { display: flex; gap: 12px; margin-top: 40px; }

/* ==========================================================================
   Product — "integrates into your stack" band (also reused for the
   placeholder "Lorem Ipsum" band — see note to user)
   ========================================================================== */
.stack-band {
  position: relative;
  min-height: 309px;
  display: flex;
  align-items: center;
  padding: 72px var(--gutter);
  overflow: hidden;
  background: linear-gradient(135deg, #BCB5C3 0%, #F4F4F4 65%);
}
.stack-band__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.stack-band__text { position: relative; display: flex; flex-direction: column; gap: 16px; max-width: 720px; z-index: 1; }
.stack-band:not(.stack-band--graphic) { justify-content: center; }
.stack-band:not(.stack-band--graphic) .stack-band__text { align-items: center; text-align: center; margin: 0 auto; }
.stack-band--graphic { min-height: 374px; overflow: visible; }

.stack-band__network {
  position: absolute;
  right: 90px;
  top: -18px;
  width: 320px;
  height: auto;
  pointer-events: none;
}

/* ==========================================================================
   Product — Self-serve
   ========================================================================== */
.product-self-serve { background: #fff; border-bottom: 1px solid #d9dcd1; padding: 88px var(--gutter); display: flex; flex-direction: column; align-items: center; gap: 64px; }
.product-self-serve__intro { display: flex; flex-direction: column; gap: 12px; align-items: center; text-align: center; max-width: 720px; }
.product-self-serve__body { display: flex; gap: 48px; align-items: flex-start; max-width: 1200px; width: 100%; flex-wrap: wrap; justify-content: center; }
.product-self-serve__col { flex: 1 1 380px; max-width: 435px; display: flex; flex-direction: column; }
.product-feature-list { border-top: 1px solid var(--color-rose); }
.product-feature-list__item { border-bottom: 1px solid var(--color-rose); padding: 4px 10px; }

.product-feature-list__trigger {
  display: flex;
  gap: 12px;

  /* Top-aligned so the icon tracks the first line of the title instead of
     drifting to the middle of a title that wraps to two or three lines.
     The 24px icon matches the 24.2px first line box, so it reads as
     optically centred on that line. */
  align-items: flex-start;
  width: 100%;
  padding: 16px 0;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  font: inherit;
}
.product-feature-list__trigger img { width: 24px; height: 24px; flex-shrink: 0; }
.product-feature-list__trigger .h3 { font-size: 22px; }
.product-feature-list__item.is-open .product-feature-list__trigger .h3 { color: #9f6569; }

.product-feature-list__item p {
  display: none;
  padding: 0 0 20px 36px;
  margin: -8px 0 0;
}
.product-feature-list__item.is-open p { display: block; }
.product-feature-list__video { display: none; }
.product-self-serve__col > .link-rose { margin-top: 16px; padding: 0 10px; }

.product-self-serve__mockup {
  flex: 1 1 480px;
  max-width: 720px;
  aspect-ratio: 720 / 405;
  background: #000;
  border: 0.5px solid #7a8eab;
  border-radius: 6px;
  box-shadow: 0 6px 18px rgb(0 0 0 / 10%);
  overflow: hidden;
}
.product-self-serve__mockup video { width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; }

/* ==========================================================================
   Product — Build your own skills
   ========================================================================== */
.skills { background: var(--color-purple-deep); padding: 80px var(--gutter); display: flex; flex-direction: column; gap: 28px; }
.skills__intro { display: flex; flex-direction: column; gap: 12px; }
.skills__intro .h2 { max-width: 505px; }
.skills__steps { display: flex; }
.skills__step { flex: 1; border-left: 1px solid var(--color-rose); padding: 24px 36px; display: flex; flex-direction: column; gap: 8px; }
.skills__step:first-child { padding-left: 36px; }
.skills__num { font-family: var(--font-heading); font-weight: 600; font-size: 16px; color: var(--color-rose); }

/* ==========================================================================
   Product — One workspace (audience)
   ========================================================================== */
.audience { background: #fff; padding: 96px var(--gutter); display: flex; flex-direction: column; gap: 32px; }
.audience__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.audience__card { display: flex; flex-direction: column; gap: 9px; }
.audience__label { display: flex; align-items: center; gap: 10px; margin-bottom: 4px; }
.audience__label img { width: 24px; height: 24px; }
.audience__label span { font-family: var(--font-heading); font-weight: 600; font-size: 16px; color: var(--color-rose); }

/* ==========================================================================
   Product — Use cases (A few of the things Gist already runs)
   ========================================================================== */
.use-cases { background: var(--color-grey-bg); padding: 96px var(--gutter); display: flex; flex-direction: column; gap: 32px; }
.use-cases__intro { display: flex; flex-direction: column; gap: 12px; }
.use-cases__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.use-cases__card { background: #fff; border: 1px solid #d9dcd1; padding: 32px; }
.use-cases__label { display: flex; align-items: center; gap: 10px; margin-bottom: 20px; }
.use-cases__label img { width: 24px; height: 24px; }
.use-cases__label span { font-family: var(--font-heading); font-weight: 600; font-size: 16px; color: var(--color-rose); }
.use-cases__list li { display: flex; gap: 12px; align-items: flex-start; padding: 16px 0; border-bottom: 1px solid #d9dcd1; }
.use-cases__list li:last-child { border-bottom: none; padding-bottom: 0; }
.use-cases__list img { width: 14px; height: 18px; flex-shrink: 0; margin-top: 4px; }
.use-cases__list p { font-size: 17px; line-height: 1.4; color: var(--color-ink); }

/* ==========================================================================
   Company — Hero
   ========================================================================== */
.company-hero {
  position: relative;
  background: #1c2537 url('assets/company-bg.png') bottom center / cover no-repeat;
  border-bottom: 1px solid var(--color-sand);
  min-height: 447px;
  display: flex;
  align-items: center;
  padding: 110px var(--gutter) 96px;
  overflow: hidden;
}
.company-hero__content { position: relative; display: flex; flex-direction: column; gap: 20px; max-width: 532px; }

/* Matches .product-hero__title / .hero__title — the marketing-hero
   treatment. It previously used the secondary-page scale shared with
   .faqpage-hero__title and .legal-hero__title, which rendered it a full
   step smaller (60px vs 80px at desktop, 30px vs 48px on mobile). */
.company-hero__title {
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: clamp(2.5rem, 0.714rem + 4.762vw, 5rem);
  line-height: 1em;
  letter-spacing: -1.56px;
  color: var(--color-cream);
}

/* ==========================================================================
   Company — Two things
   ========================================================================== */
.two-things {
  position: relative;
  padding: 95px var(--gutter);
  overflow: hidden;
  background: linear-gradient(135deg, #BCB5C3 0%, #F4F4F4 65%);
}
.two-things__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.two-things__inner { position: relative; display: flex; flex-direction: column; gap: 32px; max-width: 1184px; margin: 0 auto; }
.two-things__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }

.two-things__card {
  background: #fff;
  border-radius: 12px;
  border-right: 1px solid var(--color-sand);
  border-bottom: 1px solid var(--color-sand);
  padding: 32px 24px 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.two-things__card img { width: 32px; height: 32px; }

/* ==========================================================================
   Company — Leadership & Investors
   ========================================================================== */
.leadership { background: var(--color-grey-bg); padding: 80px var(--gutter) 81px; display: flex; flex-direction: column; align-items: center; }
.leadership__grid { display: flex; justify-content: center; gap: 32px; flex-wrap: wrap; margin-top: 56px; }
.leadership__person { display: flex; align-items: center; gap: 21px; text-align: left; }
.leadership__photo { width: 120px; height: 120px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.leadership__name { font-family: var(--font-heading); font-weight: 600; font-size: 16px; color: var(--color-ink); margin: 0 0 2px; }
.leadership__title { font-size: 14px; color: var(--color-body); margin: 0 0 12px; }
.leadership__person a img { width: 17px; height: 17px; }

.investors { background: var(--color-grey-bg); border-top: 1px solid var(--color-sand); padding: 40px var(--gutter); display: flex; justify-content: center; }
.investors__inner { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 16px 32px; }
.investors__logos { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 16px 24px; }
.investors__logos img { height: 44px; width: auto; }

/* ==========================================================================
   Company — Join us
   ========================================================================== */
.join-us { background: #fff; padding: 80px var(--gutter); display: flex; justify-content: center; }

.join-us__box {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 12px;
  max-width: 100%;
  background: #f5f3ee;
  border: 1px solid #ddd9d0;
  border-radius: 12px;
  padding: 21px 24px;
}
.join-us__box .h4 { flex-shrink: 0; }
.join-us__box p { margin: 0; }
.join-us__box .link-rose { font-size: inherit; }

/* ==========================================================================
   Pricing — Hero
   ========================================================================== */
.pricing-hero { background: var(--color-grey-bg); padding: 88px var(--gutter) 0; display: flex; flex-direction: column; align-items: center; text-align: center; }
.pricing-hero__text { display: flex; flex-direction: column; align-items: center; gap: 12px; max-width: 1184px; width: 100%; }

.pricing-hero__title {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: clamp(1.875rem, 0.536rem + 3.571vw, 3.75rem);
  line-height: 1em;
  letter-spacing: -0.81px;
  color: var(--color-ink);
}
.billing-toggle { margin-top: 24px; width: 185px; }

.billing-toggle__group {
  display: inline-flex;
  background: #fff;
  border: 1px solid var(--color-ink);
  border-radius: 3px;
  overflow: hidden;
}

.billing-toggle__btn {
  font-family: var(--font-body);
  font-size: 14px;
  padding: 10px 22px;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--color-ink);
}
.billing-toggle__btn.is-active { background: var(--color-ink); color: #f6f7f3; }
.billing-toggle__save { font-family: var(--font-heading); font-weight: 600; font-size: 16px; color: #7e8a82; width: 50%; margin: 8px 0 0 auto; text-align: center; }

/* ==========================================================================
   Pricing — Plans
   ========================================================================== */
.plans { background: var(--color-grey-bg); padding: 64px var(--gutter-min) 96px; display: flex; flex-direction: column; align-items: center; }
.plans__grid { display: flex; gap: 66px; align-items: stretch; justify-content: center; flex-wrap: wrap; max-width: 1220px; }
.plans__col { display: flex; flex-direction: column; gap: 12px; }
.plans__col--self-serve { flex: 1 1 auto; }
.plans__eyebrow { display: flex; align-items: center; justify-content: center; gap: 8px; font-size: 22px; color: var(--color-ink); margin: 0; }
.plans__eyebrow img { width: 24px; height: 24px; }
.plans__eyebrow--plain { color: var(--color-rose); justify-content: center; }
.plans__pair { display: flex; gap: 11px; flex-wrap: wrap; flex: 1; }

.plan-card { width: 380px; border-radius: 12px; padding: 38px 24px; display: flex; flex-direction: column; flex: 1; }
.plan-card--bespoke { background: #2a323c; border: 1px solid #7e8a82; }
.plan-card--professional { background: #fff; border: 1px solid var(--color-purple); }
.plan-card--team { background: #fff; border: 1px solid var(--color-rose); }

.plan-card__name { font-family: var(--font-heading); font-weight: 500; font-size: 24px; margin: 0; }
.plan-card__name--bespoke { margin-bottom: 51px; }
.plan-card--bespoke .plan-card__name { color: #c8d7cd; }
.plan-card--professional .plan-card__name { color: var(--color-purple); }
.plan-card--team .plan-card__name { color: var(--color-rose); }

.plan-card__tagline { font-size: 17px; color: #9e9996; margin: 4px 0 26px; }

.plan-card__price { font-family: var(--font-heading); font-weight: 600; font-size: 40px; letter-spacing: -0.81px; margin: 0; }
.plan-card--bespoke .plan-card__price { color: #9daca2; }
.plan-card--professional .plan-card__price { color: var(--color-purple); }
.plan-card--team .plan-card__price { color: var(--color-rose); }

.plan-card__period { font-size: 17px; margin: 0 0 28px; min-height: 24px; }
.plan-card--bespoke .plan-card__period { color: #f5f2f0; }

.plan-card--professional .plan-card__period,
.plan-card--team .plan-card__period { color: #9e9996; }

.plan-card__cta {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px 16px;
  border-radius: 3px;
  font-size: 14px;
  margin-bottom: 28px;
  text-decoration: none;
  border: 1px solid transparent;
}
.plan-card__cta--bespoke { background: #9daca2; border-color: #7e8a82; color: #131a22; }
.plan-card__cta--professional { background: var(--color-purple); border-color: var(--color-purple-border); color: #f6f7f3; }
.plan-card__cta--team { background: var(--color-rose); border-color: var(--color-rose-border); color: #f6f7f3; }

.plan-card__list { display: flex; flex-direction: column; }
.plan-card__list li { display: flex; align-items: center; gap: 6px; padding: 9px 0; border-top: 1px solid; font-size: 15px; list-style: none; }
.plan-card__list li:last-child { border-bottom: 1px solid; }
.plan-card--bespoke .plan-card__list li { border-color: #475464; color: #f5f2f0; }

.plan-card--professional .plan-card__list li,
.plan-card--team .plan-card__list li { border-color: #d9d4d1; color: #2a323c; }
.plan-card__list img { width: 12px; height: 12px; flex-shrink: 0; }

/* Pricing — FAQ */
.faq { background: var(--color-grey-bg); padding: 32px var(--gutter) 120px; display: flex; flex-direction: column; align-items: center; }
.faq__inner { max-width: 1044px; width: 100%; display: flex; flex-direction: column; }
.faq__inner .h2 { margin-bottom: 32px; }

.faq-list { border-top: 1px solid var(--color-sand); transition: border-color 0.3s ease; }
.faq-list:has(> .faq-item:first-child.is-open) { border-top-color: transparent; }

.faq-item {
  border-bottom: 1px solid var(--color-sand);
  border-left: 0 solid transparent;
  transition: background-color 0.3s ease, border-color 0.3s ease, border-radius 0.3s ease, border-left-width 0.3s ease, margin 0.3s ease;
}

.faq-item__trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  padding: 24px 4px;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  font: inherit;
  transition: padding 0.3s ease;
}
.faq-item__question { font-family: var(--font-heading); font-weight: 600; font-size: 18px; color: var(--color-body); transition: color 0.3s ease; }
.faq-item__icon { position: relative; flex-shrink: 0; width: 24px; height: 24px; border-radius: 50%; color: #9e9996; transition: background-color 0.3s ease; }

.faq-item__icon-plus, .faq-item__icon-minus {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  transition: opacity 0.25s ease;
}
.faq-item__icon-minus { opacity: 0; }
.faq-item.is-open .faq-item__icon-plus { opacity: 0; }
.faq-item.is-open .faq-item__icon-minus { opacity: 1; }

.faq-item__answer {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.35s ease;
}
.faq-item__answer-inner { overflow: hidden; min-height: 0; }

.faq-item__answer p {
  margin: 0;
  padding: 0 28px 28px 25px;
  max-width: 760px;
  color: var(--color-body);
  font-size: 16px;
  line-height: 1.6;
}

.faq-item.is-open { background: #fff; border-bottom-color: transparent; border-left: 4px solid var(--color-rose); border-radius: 0 6px 6px 0; margin: 8px 0; }
.faq-item:has(+ .faq-item.is-open) { border-bottom-color: transparent; }
.faq-item.is-open .faq-item__trigger { padding-left: 24px; padding-right: 25px; }
.faq-item.is-open .faq-item__question { color: var(--color-ink); }
.faq-item.is-open .faq-item__icon { background: #d9d4d1; }
.faq-item.is-open .faq-item__answer { grid-template-rows: 1fr; }

/* ==========================================================================
   Sign in
   ========================================================================== */
.signin { background: var(--color-grey-bg); padding: 88px var(--gutter) 96px; display: flex; flex-direction: column; align-items: center; }
.signin__inner { display: flex; flex-direction: column; align-items: flex-start; gap: 24px; max-width: 556px; width: 100%; }
.signin__title { font-family: var(--font-heading); font-weight: 600; font-size: clamp(1.875rem, 0.536rem + 3.571vw, 3.75rem); line-height: 1em; letter-spacing: -0.81px; color: var(--color-ink); margin: 0; }
.signin__lead { font-size: 17px; line-height: 1.4; color: var(--color-ink); margin: 0; }

.signin-list { display: flex; flex-direction: column; width: 100%; }
.signin-list__item { display: flex; gap: 6px; align-items: flex-start; padding: 10px 0; border-top: 1px solid var(--color-sand); }
.signin-list__item--last { border-bottom: 1px solid var(--color-sand); }
.signin-list__item img { width: 16px; height: 16px; flex-shrink: 0; margin-top: 4px; }
.signin-list__lead { font-family: var(--font-body); font-weight: 600; font-size: 17px; line-height: 1.4; color: var(--color-rose); margin: 0; }
.signin-list__text { font-size: 17px; line-height: 1.4; color: var(--color-ink); margin: 0; }

/* ==========================================================================
   Book a demo
   ========================================================================== */
.demo { background: var(--color-grey-bg); padding: 88px var(--gutter) 96px; display: flex; justify-content: center; }
.demo__grid { display: flex; gap: 64px; align-items: stretch; justify-content: center; max-width: 1080px; width: 100%; flex-wrap: wrap; }
.demo__intro { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; max-width: 556px; width: 100%; }
.demo__intro .eyebrow { margin-bottom: 4px; }
.demo__title { font-family: var(--font-heading); font-weight: 600; font-size: clamp(1.875rem, 0.536rem + 3.571vw, 3.75rem); line-height: 1em; letter-spacing: -0.81px; color: var(--color-ink); margin: 0 0 8px; }
.demo__lead { font-size: 17px; line-height: 1.4; color: var(--color-ink); margin: 4px 0; }
.demo__alt { font-size: 17px; line-height: 1.4; color: var(--color-ink); margin: 4px 0 0; }
.demo__alt .link-rose { font-size: 14px; }

.demo-list { display: flex; flex-direction: column; width: 100%; margin: 4px 0; }
.demo-list__item { display: flex; gap: 6px; align-items: flex-start; padding: 10px 0; border-top: 1px solid var(--color-sand); }
.demo-list__item--last { border-bottom: 1px solid var(--color-sand); }
.demo-list__item img { width: 16px; height: 16px; flex-shrink: 0; margin-top: 4px; }
.demo-list__item p { font-family: var(--font-body); font-weight: 600; font-size: 17px; line-height: 1.4; color: var(--color-ink); margin: 0; }

.demo-form {
  background: #fff;
  border: 1px solid #d9dcd1;
  border-radius: 12px;
  box-shadow: 0 12px 16px rgb(19 26 34 / 8%);
  padding: 40px;
  display: flex;
  flex-direction: column;
  gap: 24px;
  max-width: 460px;
  width: 100%;
}
.demo-form__fields { display: flex; flex-direction: column; gap: 16px; }
.demo-field { display: flex; flex-direction: column; gap: 6px; }
.demo-field label { font-size: 14px; line-height: 1.2; color: var(--color-ink); }

.demo-field input,
.demo-field textarea {
  font-family: inherit;
  font-size: 14px;
  color: var(--color-ink);
  background: var(--color-grey-bg);
  border: 1px solid #d9dcd1;
  border-radius: 4px;
  padding: 12px 14px;
  width: 100%;
}
.demo-field input { height: 48px; }
.demo-field textarea { height: 100px; resize: vertical; }

.demo-field input:focus,
.demo-field textarea:focus { outline: 2px solid var(--color-rose); outline-offset: 1px; }

/* Off-screen (not display:none, which some bots skip) honeypot field. */
.demo-field--honeypot {
  position: absolute;
  left: -9999px;
  top: -9999px;
}

/* ==========================================================================
   Legal (Privacy / Terms)
   ========================================================================== */
.legal-hero { background: var(--color-grey-bg); padding: 64px var(--gutter) 40px; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; }
.legal-hero__title { font-family: var(--font-heading); font-weight: 600; font-size: clamp(1.5rem, 0.429rem + 2.857vw, 3rem); line-height: 1em; letter-spacing: -0.81px; color: var(--color-ink); margin: 0; }
.legal-hero__meta { font-size: 14px; color: var(--color-muted); margin: 0; }

.legal { background: var(--color-grey-bg); padding: 0 var(--gutter) 96px; display: flex; justify-content: center; }
.legal__inner { max-width: 760px; width: 100%; display: flex; flex-direction: column; gap: 16px; overflow-wrap: break-word; }
.legal__inner .h3 { margin: 24px 0 4px; }
.legal__inner .h3:first-child { margin-top: 0; }
.legal__inner .body-m { color: var(--color-body); }
.legal-list { display: flex; flex-direction: column; gap: 10px; margin: 0; padding-left: 22px; list-style: disc; }
.legal-list li { font-size: 17px; line-height: 1.4; color: var(--color-body); }

/* ==========================================================================
   FAQ (dedicated page)
   ========================================================================== */
.faqpage-hero { background: var(--color-grey-bg); border-bottom: 1px solid var(--color-sand); padding: 96px var(--gutter) 64px; display: flex; flex-direction: column; gap: 12px; }
.faqpage-hero__title { font-family: var(--font-heading); font-weight: 600; font-size: clamp(1.875rem, 0.536rem + 3.571vw, 3.75rem); line-height: 1em; letter-spacing: -0.81px; color: var(--color-ink); margin: 0; }
.faqpage-hero__subtitle { font-size: 17px; line-height: 1.4; color: var(--color-body); max-width: 640px; margin: 0; }

.faqpage-layout { background: var(--color-grey-bg); display: flex; gap: 80px; align-items: flex-start; padding: 80px var(--gutter) 120px; }

.faqpage-sidebar { display: flex; flex-direction: column; gap: 16px; width: 280px; flex-shrink: 0; position: sticky; top: 96px; }
.faqpage-topics { display: flex; flex-direction: column; gap: 2px; width: 100%; }

.faqpage-topic {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 12px 12px 16px;
  border-radius: 6px;
  border: 1px solid transparent;
  font-size: 17px;
  line-height: 1.4;
  color: var(--color-body);
  text-decoration: none;
}

.faqpage-topic.is-active {
  background: #fff;
  border-color: var(--color-sand);
  padding-left: 12px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 16px;
  color: var(--color-ink);
}

.faqpage-topic.is-active::before {
  content: '';
  width: 4px;
  height: 16px;
  border-radius: 2px;
  background: var(--color-rose);
  flex-shrink: 0;
}

.faqpage-content { display: flex; flex-direction: column; gap: 64px; flex: 1 1 0; min-width: 0; }
.faqpage-section { display: flex; flex-direction: column; gap: 24px; width: 100%; scroll-margin-top: 96px; }
.faqpage-section .faq-list { border-top: none; }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (width <= 900px) {
  .nav__links { display: none; }
  .nav__toggle { display: flex; }
  .hero { min-height: auto; padding: 64px var(--gutter) 48px; flex-direction: column; align-items: flex-start; }
  .hero__title { font-size: 56px; }
  .gist-band { grid-template-columns: 1fr; justify-items: center; text-align: center; }
  .gist-band__deco { width: 180px; }
  .security__cards { flex-direction: column; }
  .product-hero__title, .company-hero__title { font-size: 48px; }
  .stack-band { flex-direction: column; }
  .stack-band__network { display: none; }
  .product-self-serve__body { flex-direction: column; }
  .skills__steps { flex-direction: column; }
  .audience__grid, .use-cases__grid { grid-template-columns: 1fr; }
  .plans__grid { flex-direction: column; align-items: stretch; }
  .plans__pair { flex-direction: column; align-items: center; }
  .plan-card { width: 100%; }
}

@media (width <= 1223px) and (width >= 901px) {
  .plans__grid { flex-direction: column; align-items: stretch; }
  .plan-card--bespoke { width: 100%; }
}

@media (width <= 600px) {
  .hero {
    background-image: url('assets/hero-bg-mobile.png');
    background-position: center bottom;
    background-size: cover;
    aspect-ratio: 700 / 1227;
    min-height: 620px;
    height: auto;

    /* min-height transfers back through aspect-ratio and would force the box
       wider than a <354px viewport, eating the side gutter. Clamp it. */
    max-width: 100%;
    justify-content: flex-start;
  }

  .company-hero {
    background-image: url('assets/company-hero-bg-mobile.png');
    background-position: center bottom;
    background-size: cover;
    aspect-ratio: 700 / 1227;
    min-height: 620px;
    height: auto;

    /* min-height transfers back through aspect-ratio and would force the box
       wider than a <354px viewport, eating the side gutter. Clamp it. */
    max-width: 100%;
    align-items: flex-start;
  }
  .step { margin-left: 0 !important; }
  .step__connector { display: none; }

  .step:not(:first-child) .step__marker::before {
    content: '';
    position: absolute;
    left: 0;
    top: var(--line-top, -66px);
    width: 1px;
    height: var(--line-height, 104px);
    background: var(--color-sand);
  }
}

@media (width <= 485px) {
  .step { gap: 14px; }
  .step__num { width: 80px; height: 50px; font-size: 14px; }
}

@media (width <= 400px) {
  .security__card { gap: 8px; }
}

@media (width <= 900px) {
  .faqpage-layout { flex-direction: column; gap: 40px; }
  .faqpage-sidebar { width: 100%; position: static; }
}

@media (width <= 700px) {
  .two-things__grid { grid-template-columns: 1fr; }
}

@media (width <= 1150px) {
  .stack-band__text { max-width: 480px; }
  .stack-band__network { width: 200px; right: 20px; top: -10px; }
}

@media (width <= 987px) {
  .product-self-serve__mockup { display: none; }
  .product-self-serve__col { max-width: 100%; width: 100%; }
  .product-feature-list__item p { display: block; }
  .product-feature-list__trigger { cursor: default; pointer-events: none; }

  .product-feature-list__video {
    display: block;
    width: 100%;
    background: #000;
    border: 0.5px solid #7a8eab;
    border-radius: 6px;
    box-shadow: 0 6px 18px rgb(0 0 0 / 10%);
    margin: 8px 0 20px;
  }
}

/* ==========================================================================
   Get the gist band — mobile
   Overrides the max-width:900 rules above (same specificity, later wins):
   full-bleed deco, left-aligned content, tighter vertical rhythm.
   ========================================================================== */
@media (width <= 640px) {
  .gist-band {
    justify-items: stretch;
    text-align: left;
  }
  .gist-band__deco { width: 100%; }
}

/* ==========================================================================
   Platform — mobile
   Overrides the max-width:900 rules above: full-bleed grid graphic and
   left-aligned content. The plus icon stays a block above each card title
   (DOM order is icon -> h3 -> p), it just aligns left instead of centre.
   The base rule offsets the graphic by -64px to sit it against the desktop
   two-column grid; that offset has to be cleared once it is full width.
   ========================================================================== */
@media (width <= 640px) {
  .platform { align-items: stretch; }
  .platform__intro { max-width: none; }

  .platform .h2--center,
  .platform .body-l--center { text-align: left; }
  .platform__grid { align-items: stretch; }
  .platform__grid-graphic { width: 100%; max-width: none; left: 0; }
  .platform__card { text-align: left !important; align-items: flex-start; max-width: none; }
}

/* ==========================================================================
   Mobile — uniform band rhythm
   Every content band on the site is a <section>; .nav is a <header> and
   .footer a <footer>, so page chrome keeps its own (already compact) spacing.
   The [class] is there purely to out-specify the per-band
   `.foo { padding: 88px var(--gutter) }` shorthands — it is not a filter.
   The two exceptions below are deliberate zeros: those bands butt directly
   against the one above/below them, and a gap there reads as a broken seam.
   ========================================================================== */
@media (width <= 640px) {
  section[class] {
    padding-top: 56px;
    padding-bottom: 56px;
  }
  section.pricing-hero { padding-bottom: 0; }
  section.legal { padding-top: 0; }
}