/* Site additions on top of the design bundle.
 *
 * Everything else in public/css came from the redesign bundle unchanged (bar
 * two @import lines moved into BaseLayout, and one asset URL made absolute), so
 * the next design drop can be copied straight over it. Anything we add lives
 * here instead: pages the bundle has no design for, and fixes to its components.
 * (The schedule-demo page's .sd styles came with a later export and live in
 * redesign.css.)
 * Built from the bundle's own tokens and header pattern (.ucx-head).
 */

/* ---- Site-wide: no orphaned last words ---------------------------------
 * Set once on html so every block inherits it. Headings the design sets to
 * text-wrap: balance keep that (it avoids a lone last word too). Browsers
 * without support (Firefox today) just wrap as before. */
html { text-wrap: pretty; }

/* ---- About: each team card links to that partner's /our-team page ------ */
a.ab-member { color: inherit; text-decoration: none; }
a.ab-member:focus-visible { outline: 2px solid var(--zenda-magenta); outline-offset: 6px; border-radius: 8px; }

/* ---- Insight article ------------------------------------------------------ */
.ins-head p { max-width: 56ch; }
.ins-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 36px; }
.ins-actions .zbtn:not(.zbtn--magenta) { background: #fff; color: var(--zenda-black); border-color: var(--slate-200); }
.ins-actions .zbtn:not(.zbtn--magenta):hover { border-color: var(--zenda-magenta); color: var(--zenda-magenta); }
.ins-hero { padding: 56px 64px 0; }
.ins-hero img { width: 100%; height: auto; border-radius: 12px; aspect-ratio: 3 / 2; object-fit: cover; }
.ins-body { padding: 72px 64px 140px; }
.ins-doc { max-width: 72ch; margin: 0 auto; }
.ins-doc .ins-lede {
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(26px, 22px + 1vw, 36px); line-height: 1.15; letter-spacing: -0.02em;
  color: var(--zenda-black); margin: 0 0 40px;
}
.ins-doc sup { font-size: 0.7em; line-height: 0; }
.ins-doc sup a, .ins-doc a { color: var(--zenda-black); text-decoration: underline; text-decoration-color: var(--zenda-magenta); text-underline-offset: 3px; }
.ins-fig { float: right; width: 44%; margin: 8px 0 24px 40px; }
.ins-fig img { width: 100%; height: auto; }
.ins-fig figcaption { margin-top: 12px; font-size: 14px; line-height: 1.5; color: var(--slate-500); }
.ins-fig figcaption strong { display: block; color: var(--zenda-black); margin-bottom: 4px; }
.ins-foot { max-width: 72ch; margin: 72px auto 0; padding-top: 40px; border-top: 1px solid var(--zenda-black); display: grid; gap: 40px; }
.ins-byline { display: flex; flex-direction: column; gap: 4px; }
.ins-byline strong { font-size: 18px; color: var(--zenda-black); }
.ins-byline span { font-size: 15px; color: var(--slate-500); }
.ins-byline__links { display: flex; gap: 20px; margin-top: 12px; font-size: 14px; }
.ins-byline__links a { color: var(--zenda-black); text-decoration: underline; text-decoration-color: var(--zenda-magenta); text-underline-offset: 3px; }
.ins-cite p { margin: 0 0 10px; font-size: 13px; line-height: 1.55; color: var(--slate-500); }
.ins-cite a { color: var(--slate-700); text-decoration: underline; text-underline-offset: 2px; }
/* The download modal sizes to its HubSpot form, and scrolls inside itself
 * only when the screen is too short for it. */
.ins-gate .ab-modal__panel { grid-template-columns: 1fr; width: 560px; max-width: calc(100vw - 32px); max-height: calc(100vh - 48px); overflow-y: auto; }
.ins-gate .hs-form-frame { margin-top: 24px; min-height: 280px; }
@media (max-width: 1024px) { .ins-hero, .ins-body { padding-left: 40px; padding-right: 40px; } }
@media (max-width: 760px) {
  .ins-hero { padding: 32px 20px 0; }
  .ins-body { padding: 48px 20px 80px; }
  .ins-fig { float: none; width: 100%; margin: 24px 0; }
}

/* ---- 404 ------------------------------------------------------------------ */
.nf { border-bottom: 0; min-height: 70vh; }
.nf h1 { margin-top: 16px; }
.nf .zbtn { margin-top: 36px; }

/* ---- Policy ---------------------------------------------------------------
 * "www.zendaplatform.com" in the website policy title is one unbreakable word;
 * at the 44px phone size it pushed the page 150px wider than the screen, which
 * dragged the fixed nav out with it (present in the design bundle too). */
.pol-head h1 { overflow-wrap: anywhere; }

/* ---- Use-case steps: mobile pattern whenever it is not side by side --------
 * responsive.css stacks the steps into one column at 1024px, but the bundle
 * only switches to the mobile pattern (each step reveals its own image inline)
 * at 760px. In between, the shared desktop stage sat alone below the whole
 * list, far from the step it illustrates. Same rules as redesign.css's 760px
 * block, raised to the width where side-by-side ends. Section padding is left
 * to responsive.css (40px tablet / 20px phone). */
@media (max-width: 1024px) {
  .uc-steps__layout { grid-template-columns: 1fr; gap: 0 !important; }
  .uc-steps__media { display: none; }
  .uc-step { padding: 24px 4px 24px 22px; }
  .uc-step__head { flex-direction: column; gap: 6px; }
  .uc-step__num { width: auto; padding-top: 0; }
  .uc-step__title { font-size: 25px; max-width: none; }
  .uc-step__body p { padding-left: 0; max-width: none; }
  /* The box takes the image's own shape. A fixed 4:3 grey box letterboxed the
   * ~1.46:1 step images with grey bands top and bottom. */
  .uc-step__media-m {
    display: block; margin-top: 18px; border-radius: 0; overflow: hidden;
    background: transparent; aspect-ratio: auto;
  }
  .uc-step__media-m > img { width: 100%; height: auto; display: block; }
}

/* Home hero rotating word: the reveal's clip-path ended flush with the word's
 * box, but the h1's -0.045em tracking lets the last glyph's ink run past it,
 * so the k of "how work" and the s of "the blind spots" were shaved. Same
 * keyframes as redesign.css with 0.12em of slack each side (inside the
 * magenta box's 0.18em padding). Later @keyframes of a name win. */
@keyframes v4wordIn {
  from { clip-path: inset(-0.25em 100% -0.25em -0.12em); transform: translateY(0.04em); }
  to   { clip-path: inset(-0.25em -0.12em -0.25em -0.12em); transform: translateY(0); }
}
@keyframes v4wordOut {
  from { clip-path: inset(-0.25em -0.12em -0.25em -0.12em); }
  to   { clip-path: inset(-0.25em -0.12em -0.25em 100%); }
}

/* ---- Phone menu button -----------------------------------------------------
 * The burger's bars are currentColor and responsive.css never sets a color on
 * the <button>, so iOS Safari drew them in its default button blue. Black,
 * or white over the home hero until the nav turns frosted (like the logo). */
.znav__burger { color: var(--zenda-black); -webkit-appearance: none; appearance: none; padding: 0; }
.znav--overlay:not(.is-stuck) .znav__burger { color: #fff; }
.znav__burger span, .znav__burger span::before, .znav__burger span::after { transition: background-color var(--dur-slow) var(--ease-standard); }

/* ---- Team bio pages (/our-team/*) ------------------------------------------
 * The policy page body, with photo, name and role in the side column and the
 * bio beside it. No page header: the top padding clears the fixed nav, as
 * .ucx-head does. The bio's first paragraph keeps body size (.pol-rich
 * enlarges it as a policy's lead-in). */
.bio-page { padding-top: 160px; }
.bio-back { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 40px; font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 600; color: var(--slate-600); text-decoration: none; transition: color 160ms; }
.bio-back::before { content: "←"; color: var(--zenda-magenta); }
.bio-back:hover { color: var(--zenda-magenta); }
.bio-side { gap: 24px; }
.bio-photo { display: block; width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 8px; }
.bio-name { font-family: 'TWK Lausanne', system-ui, sans-serif; font-weight: 600; font-size: clamp(27px, 24.40px + 0.667vw, 34px); letter-spacing: -0.015em; line-height: 1.1; margin: 0 0 6px; color: var(--zenda-black); }
.bio-role { margin: 0; font-size: clamp(16px, 15.26px + 0.190vw, 18px); line-height: 1.3; color: var(--zenda-magenta); font-weight: 600; }
.bio-text > p:first-child { font-size: clamp(16px, 15.26px + 0.190vw, 18px); line-height: 1.6; color: var(--slate-700); margin: 0 0 16px; }
@media (max-width: 1024px) { .bio-side { flex-direction: column; } .bio-photo { max-width: 320px; } }
@media (max-width: 760px) { .bio-page { padding-top: 110px; } .bio-back { margin-bottom: 28px; } .bio-photo { max-width: 240px; } }

/* ---- Team photos ------------------------------------------------------------
 * The photos are landscape and cropped to 3:4 portraits from the center.
 * Mary sits left of center in hers, so a centered crop cut her hair off on
 * the left; aim the crop at her instead (card, bio page and bio modal). */
img[src="/assets/team-mary.avif"] { object-position: 34% 50%; }

.v4-slide__num .pct { margin-left: 0.2em; }
@media (min-width: 1101px) { .v4-slide__cap { min-height: 3lh; } }
.uct-h { max-width: 20ch; }
.zbtn--magenta:hover, .znav__links a.zbtn--magenta:hover, .znav--overlay.is-stuck .znav__links a.zbtn--magenta:hover { color: #fff; }
.ab-hero__fig { border-radius: 8px; overflow: hidden; }
.ab-gallery img { border-radius: 8px; }
.uc-step__body .bp-desc { font-size: 6px; line-height: 1.45; color: #485A66; max-width: none; }
.uc-step__body .cr-card__a { margin: 3px 0 0; font-size: 11px; line-height: 1.38; color: inherit; max-width: none; }

/* Nav: fixed on every page. The homepage gets .znav--overlay (site-base.css);
 * every other page gets the frosted bar from the start. */
.znav { position: fixed; top: 0; left: 0; right: 0; z-index: 50; }
.znav--solid {
  background: rgba(255,255,255,0.68);
  backdrop-filter: blur(18px) saturate(140%); -webkit-backdrop-filter: blur(18px) saturate(140%);
  border-bottom-color: var(--slate-100);
}
.znav--solid .znav__links a:not(.zbtn) { color: var(--slate-700); }
.znav--solid .znav__links a:not(.zbtn):hover { color: var(--zenda-magenta); }

/* JetBrains Mono, self-hosted instead of the bundle's Google Fonts <link>, so
 * no visitor's browser talks to Google before consent and no page waits on a
 * third-party stylesheet. Variable font, Latin subset (the file Google serves
 * for Latin); other scripts fall back to the system monospace in --font-mono. */
@font-face {
  font-family: 'JetBrains Mono';
  src: url('../fonts/JetBrainsMono-latin.woff2') format('woff2');
  font-weight: 400 600; font-style: normal; font-display: swap;
}

/* /impact and /how-it-works open on the section the homepage shows under its
 * own <h1>, so their heading is promoted from <h2> to <h1>: same look. */
.v4-impact__head h1 { margin: 12px 0 0; font-family: var(--font-display); font-weight: 900; font-size: clamp(44px, 36.57px + 1.905vw, 64px); line-height: 1; letter-spacing: -0.035em; }
.v4-how__head h1 { font-family: var(--font-display); font-weight: 900; font-size: clamp(57px, 39.54px + 4.476vw, 104px); line-height: 0.95; letter-spacing: -0.04em; margin: 12px 0 0; max-width: 14ch; }