/* Customer pages, v2 — the 07 company page's system applied to the segment template:
   one loud headline, the illustration shown whole, one sage band (the voices),
   rows rather than cards, and nothing the footer already says. */
:root { --s-sec: 136px; --s-head: 40px; --r-media: 18px; --band-logos: #eef6f1; }
:root[data-theme="dark"] { --band-logos: transparent; --band-figures: transparent; --band-close: transparent; }
body { overflow-x: clip; }
.page { width: min(1100px, 100% - 48px); margin-inline: auto; }
.blk { padding: var(--s-sec) 0 0; }
.blk-h { margin: 0 0 var(--s-head); font: 600 clamp(28px, 3.4vw, 40px)/1.1 var(--f); letter-spacing: -0.03em; max-width: 22ch; text-wrap: balance; }
.lab { margin: 0 0 24px; font: 600 20px/1.3 var(--f); letter-spacing: -0.015em; }

/* hero: the words on the left and the illustration on the right as a framed picture, the same
   shape the phone layout uses. Each scene is cut to keep its subject in frame (--pos-m), and the
   picture sits on the page's own ground instead of behind the type, so nothing has to fade. */
.hero-full { position: relative; margin-top: -64px; padding-top: 152px; padding-bottom: 88px;
  display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(32px, 5vw, 72px); align-items: center; }
.hero-img { grid-column: 2; grid-row: 1; width: 100%; height: auto; aspect-ratio: 5 / 4; border-radius: 24px;
  object-fit: cover; object-position: var(--pos-m, 50% 50%); }
.hero-in { grid-column: 1; grid-row: 1; width: 100%; padding: 0; }
.hero-in > * { max-width: none; }
.hero-in .kicker { margin: 0 0 20px; font: 500 18px/1.3 var(--f); color: var(--ink2); }
.hero-in h1 { margin: 0; font: 600 clamp(36px, 4.2vw, 60px)/1.04 var(--f); letter-spacing: -0.04em; text-wrap: balance; }
.hero-in .sub { margin: 24px 0 0; font: 400 20px/1.5 var(--f); color: var(--ink2); letter-spacing: -0.01em; }
:root[data-theme="dark"] .hero-img { filter: brightness(.82) saturate(.92); }
.hero-full + .voices { margin-top: 0; }

/* the one sage band: what teams told us. A snapping track, one quote per slide, every
   slide as tall as the longest so the band never resizes. Centred on every screen,
   so the band has no empty side. */
.band { margin-inline: calc(50% - 50vw); padding-inline: calc(50vw - 50%); }
/* the customers' words close the page, under the last section, on the page's own ground: no band, no tint */
.voices { margin-top: 0; padding-top: var(--s-gap); padding-bottom: clamp(80px, 8vw, 120px); }
.voices .lab { margin: 0 0 40px; font-size: 18px; font-weight: 500; color: var(--ink2); text-align: center; }
.vtrack { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; scrollbar-width: none; outline: none; }
.vtrack::-webkit-scrollbar { display: none; }
.vtrack:focus-visible { outline: 2px solid var(--ring); outline-offset: 8px; border-radius: 8px; }
.vq { flex: 0 0 100%; margin: 0; text-align: center; scroll-snap-align: start; scroll-snap-stop: always;
  opacity: .18; transition: opacity 240ms var(--ease); }
.vq.on { opacity: 1; }
.vq blockquote { margin: 0 auto; font: 500 clamp(26px, 3.2vw, 42px)/1.22 var(--f); letter-spacing: -0.028em; max-width: 26ch; text-wrap: balance; }
.vq figcaption { display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 28px; font-size: 16px; color: var(--ink2); }
.vq figcaption::before { content: ""; width: 24px; height: 1px; background: currentColor; opacity: .5; }
.vnav { display: flex; justify-content: center; gap: 10px; margin-top: 40px; }
.vnav .arr { width: 44px; height: 44px; border-radius: 999px; border: 0; color: var(--ink); cursor: pointer;
  background: color-mix(in srgb, var(--ink) 7%, transparent);
  display: inline-flex; align-items: center; justify-content: center;
  transition: background-color 150ms ease, transform 160ms var(--ease), opacity 200ms ease; }
.vnav .arr:active:not(:disabled) { transform: scale(.94); }
.vnav .arr:disabled { opacity: .3; cursor: default; }
@media (hover: hover) and (pointer: fine) { .vnav .arr:hover:not(:disabled) { background: color-mix(in srgb, var(--ink) 12%, transparent); } }
.vnav .arr:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .vq, .vnav .arr { transition: none; } }

/* ── The original story, impact and hub sections, carried over as they were ──
   Their CSS comes from the live pages; these are the tokens and base rules it expects,
   pointed at the platform palette so the sections follow the theme. */
:root { --color-text: var(--ink); --color-text-secondary: var(--ink2); --gray-0: var(--bg); --gray-500: #5d5d5d; --gray-700: #303030;
  --green-50: #eef6f1; --blue-50: #eef4fb; --yellow-50: #f6f4ec; --purple-50: #f4f2fa;  /* one muted pastel family, as the quote band */ --radius-2xl: 1rem; --radius-md: .5rem;
  --o-line: rgba(13,13,13,.16); --o-join: rgba(13,13,13,.26); }
:root[data-theme="dark"] { --gray-500: #a3a3a3; --gray-700: #c6ccd2;
  --green-50: #14261c; --blue-50: #13202e; --yellow-50: #26220f; --purple-50: #1d1829;
  --o-line: rgba(255,255,255,.14); --o-join: rgba(255,255,255,.26); }
/* one rhythm: each section carries half of the gap, so two meeting sections make one (about 160px wide, 96px on a phone) */
:root { --s-gap: clamp(48px, 5.6vw, 80px); }
.sec { padding: var(--s-gap) 0; }
.sec.story { padding-top: var(--s-gap); }
.sec h2 { font-size: clamp(1.875rem, 3.4vw, 2.625rem); line-height: 1.12; font-weight: 500; letter-spacing: -0.022em; margin: 0; }
.say { font-size: 1.125rem; line-height: 1.62; color: var(--color-text-secondary); margin: 18px 0 0; max-width: 58ch; text-wrap: pretty; }
.sec .wrap { width: auto; }
.voices + .sec.story { padding-top: var(--s-sec); }
.impact.band { padding: var(--s-gap) calc(50vw - 50%); }
.impact.band .wrap { width: 100%; }
/* the hairlines of the figures set, in the theme's own line colour (they are rules, not plates) */
:root[data-theme="dark"] .figs { border-bottom-color: var(--o-line); }
:root[data-theme="dark"] .fig-rest .fig + .fig { border-top-color: var(--o-line); }
:root[data-theme="dark"] .fig-rest::before { background: var(--o-line); }
.sec.hub + .blk { padding-top: 40px; }

/* other customers: Granola rows */
.rows { border-top: 1px solid var(--line); }
.r { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr) auto; gap: 4px 64px; padding: 22px 0; border-bottom: 1px solid var(--lines); align-items: baseline; }
.r .tt { font: 600 16px/1.35 var(--f); letter-spacing: -0.01em; }
.r .mm { font-size: 16px; color: var(--ink2); }
.r .go { color: var(--ink3); transition: transform 160ms var(--ease), color 150ms ease; }
.r .tt { text-decoration: underline 1px; text-underline-offset: 3px; text-decoration-color: transparent; transition: text-decoration-color 150ms ease; }
@media (hover: hover) and (pointer: fine) {
  .r:hover .tt { text-decoration-color: currentColor; }
  .r:hover .go { transform: translateX(3px); color: var(--ink); }
}
.foot.far { margin-top: calc(var(--s-sec) + 24px); }
@media (prefers-reduced-motion: reduce) { .r .go { transition: none; } }

@media (max-width: 900px) {
  .r { grid-template-columns: 1fr auto; }
  .r .mm { grid-column: 1; }
  .r .go { grid-row: 1; grid-column: 2; }
}
/* narrow screens: the words first, then the picture below them, framed */
@media (max-width: 860px) {
  .hero-full { display: flex; flex-direction: column-reverse; align-items: stretch; gap: 0; padding-top: 0; padding-bottom: var(--s-gap); }
  .hero-in { padding: 112px 0 28px; }
  .hero-img { aspect-ratio: 3 / 2; border-radius: 20px; }
}
@media (max-width: 600px) {
  :root { --s-sec: 96px; --s-head: 28px; }
  .page { width: calc(100% - 32px); }
  .hero-in > * { max-width: none; }
  .hero-in h1 { font-size: clamp(36px, 10.5vw, 44px); }
  .hero-in .sub { font-size: 18px; }
  .hero-img { aspect-ratio: 5 / 4; border-radius: 18px; }
  .voices { padding-top: var(--s-gap); padding-bottom: 72px; }
  .voices .lab, .vq, .vnav { text-align: center; }
  .vq blockquote { margin-inline: auto; font-size: 24px; }
  .vq figcaption { justify-content: center; }
  .vnav { justify-content: center; margin-top: 32px; }
  .foot .row nav { display: grid; grid-template-columns: repeat(3, auto); justify-content: start; gap: 0 20px; }
  .foot .row nav a { padding-block: 12px; }
}

/* the closing ask, as on the live pages: this page's close colour, centred, one button */
.close-cta { margin-top: var(--s-sec); background: var(--band-close); padding-top: clamp(84px, 10vw, 124px); padding-bottom: clamp(84px, 10vw, 124px); }
.close-cta .wrap { width: 100%; }
.close-cta .panel { text-align: center; max-width: 980px; margin: 0 auto; padding: 0 8px; }
.close-cta h2 { font: 500 clamp(1.75rem, 3.6vw, 2.75rem)/1.14 var(--f); letter-spacing: -0.026em; margin: 0 auto; text-wrap: balance; }
.close-cta .btn { margin-top: 34px; }
.btn-lg { height: 48px; padding: 0 26px; font-size: 16px; }
.close-cta + * { margin-top: 0; }
main:has(.close-cta) + .foot.far { margin-top: 0; }
@media (max-width: 480px) { .close-cta h2 { font-size: 1.5rem; line-height: 1.18; } }

/* Customers dropdown in the nav pill: the four segment pages, one click away */
.nav .dd { position: relative; }
.nav .dd summary { list-style: none; display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 12px; border-radius: 999px; color: var(--ink2); font-weight: 500; cursor: pointer; }
.nav .dd summary::-webkit-details-marker { display: none; }
.nav .dd summary[aria-current="page"] { background: var(--sel); color: var(--ink); }
.nav .dd summary svg { transition: transform 200ms var(--ease); }
.nav .dd[open] summary svg, .nav .dd details[open] summary svg { transform: rotate(180deg); }
.nav .dd-p { position: absolute; top: calc(100% + 12px); left: 50%; transform: translateX(-50%); min-width: 240px; display: flex; flex-direction: column; gap: 2px; padding: 8px;
  border-radius: 18px; background: var(--bg); box-shadow: inset 0 0 0 1px var(--line), var(--sh4); }
.nav .dd-p a { display: flex; align-items: center; height: 40px; padding: 0 12px; border-radius: 12px; color: var(--ink2); font-weight: 500; white-space: nowrap; }
.nav .dd-p a:hover, .nav .dd-p a[aria-current="page"] { background: var(--hov); color: var(--ink); }
@media (hover: hover) and (pointer: fine) { .nav .dd summary:hover { background: var(--hov); color: var(--ink); } }

/* a before → after figure: the starting point quieter, the target at full weight */
.fig b.chg { display: flex; align-items: baseline; gap: .22em; }
.fig b.chg .from { color: var(--gray-500); font-weight: 400; }
.fig b.chg .to-ar { font-size: .46em; color: var(--gray-500); font-weight: 400; margin: 0 .15em; }

/* The data-sources panel in the hub section: a window of the product, drawn with the
   platform's own parts (hairline card, soft tiles, state pills, the pill composer). */
.src { border-radius: 18px; background: var(--bg); overflow: hidden; font-family: var(--f);
  box-shadow: 0 0 0 1px var(--line), 0 1px 1px rgba(13,13,13,.03), 0 40px 80px -48px rgba(13,13,13,.28); }
.src-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  padding: 12px 18px; background: var(--panel); border-bottom: 1px solid var(--line); font-size: 13px; }
.src-crumb { color: var(--ink2); }
.src-crumb i { font-style: normal; margin: 0 6px; color: var(--ink4); }
.src-crumb b { font-weight: 600; color: var(--ink); }
.src-pill { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px;
  background: var(--soft); font-size: 12px; font-weight: 500; color: var(--ink2); }
.src-pill svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; }
.src-list { list-style: none; margin: 0; padding: 6px 18px; }
.src-list li { display: flex; align-items: center; gap: 14px; padding: 14px 0; border-top: 1px solid var(--lines);
  font-size: 15px; font-weight: 500; line-height: 1.3; color: var(--ink); }
.src-list li:first-child { border-top: 0; }
.src-ic { flex: none; width: 36px; height: 36px; border-radius: 10px; background: var(--soft); color: var(--ink2);
  display: grid; place-items: center; }
.src-ic svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.35; stroke-linecap: round; stroke-linejoin: round; }
.src-s { margin-left: auto; flex: none; display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px;
  background: var(--ok-soft); font-size: 12px; font-weight: 500; color: var(--ok); }
.src-s i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.src-ask { display: flex; align-items: center; gap: 10px; margin: 6px 14px 14px; padding: 7px 7px 7px 9px; border-radius: 999px;
  background: var(--bg); box-shadow: 0 0 0 1px var(--line), 0 4px 12px -4px rgba(0,0,0,.06); font-size: 14px; color: var(--ink3); }
.src-plus { flex: none; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center;
  box-shadow: inset 0 0 0 1px var(--line); color: var(--ink); font-size: 15px; line-height: 1; }
.src-q { flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.src-send { flex: none; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center;
  background: var(--fill); color: var(--on-fill); font-size: 13px; }

/* Light theme: the page is the same soft off-white as the home page, so the white cards and windows stand out from it. */
:root:not([data-theme="dark"]) body { background: #f8f7f4; }

/* Dark theme: one ground for the whole page, the home page's, with the cards and windows a step above it
   (they take --bg). */
:root[data-theme="dark"] body { background: #0f1113; }