/*
 * Design overrides (README "Design overrides").
 *
 * Loaded after every page's own stylesheets. Rules are prefixed with `html body`
 * and marked !important where they must beat the export's inline styles or the
 * style tags hive-nav.js injects later in <head>. Selectors use what survives a
 * re-port: data-m / data-screen-label attributes, ids, and inline-style matches.
 */

/* ---- One page gutter ------------------------------------------------------
 * Every section's content starts at the export's own gutter token,
 * clamp(20px, 6vw, 96px): 86px at 1440, 61px at 1024, 46px at 768, and 20px on
 * phones (the nav's edge). Sections that used 32px, 4vw or 7vw get it too. */
/* From ~1560px wide the gutter grows to centre a 1320px column (see "Wide
 * screens" below). */
html { --hv-g: max(clamp(20px, 6vw, 96px), calc((100% - 1320px) / 2)); }
@media (max-width: 599px) { html { --hv-g: 20px; } }
html body section[style*="clamp(20px, 6vw, 96px)"],
html body section[style*=") 32px"],
html body section[style*="clamp(20px, 4vw, 48px)"],
html body section[style*="clamp(24px, 7vw, 128px)"],
html body section > div[style*="clamp(20px, 6vw, 96px)"],
html body section > div[style*="clamp(24px, 7vw, 128px)"] {
  padding-left: var(--hv-g) !important;
  padding-right: var(--hv-g) !important;
}

/* ---- "Team from" logo wall: two full rows at every width -------------------
 * Owner 2026-10-20: "two rows at max". The export's auto-fit grid wrapped the 12
 * logos as 5+5+2 on laptops (and 2 per row, 6 rows, on phones). Desktop shows
 * all 12 as 6 x 2; narrower screens show the best-known 8 (4 x 2) or 6 (3 x 2),
 * picked by alt text so a re-ordered export keeps working. */
html body [data-m="logos"] {
  grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
  column-gap: clamp(16px, 3vw, 56px) !important;
  row-gap: clamp(24px, 3vw, 44px) !important;
}
html body [data-m="logos"] > * { min-width: 0; }
html body [data-m="logos"] img { max-width: min(150px, 100%) !important; }
@media (max-width: 899px) {
  html body [data-m="logos"] { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
  html body [data-m="logos"] > :is(:has(img[alt="Microsoft"]), :has(img[alt="Accenture"]),
    :has(img[alt*="Oxford"]), :has(img[alt*="Imperial"]), :has(img[alt*="Harvard"]),
    :has(img[alt="Intercom"])) { order: 1; }
  html body [data-m="logos"] > :is(:has(img[alt*="echstars"]), :has(img[alt="Antler"])) { order: 2; }
  html body [data-m="logos"] > :not(:is(
    :has(img[alt="Microsoft"]), :has(img[alt="Accenture"]), :has(img[alt*="Oxford"]),
    :has(img[alt*="Imperial"]), :has(img[alt*="Harvard"]), :has(img[alt="Intercom"]),
    :has(img[alt*="echstars"]), :has(img[alt="Antler"]))) { display: none !important; }
}
@media (max-width: 599px) {
  html body [data-m="logos"] { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 24px 16px !important; }
  html body [data-m="logos"] > :is(:has(img[alt*="echstars"]), :has(img[alt="Antler"])) { display: none !important; }
}

/* ---- Home "Built to run on its own." ----------------------------------------
 * Owner 2026-10-20: the line was misaligned and, on laptops, the text column
 * ran past the viewport. The export's auto-fit grid (440px minimum columns plus
 * an 8vw gap) is replaced by two explicit shrinkable columns from 1000px up and
 * one column below. hive-nav.js caps every img at max-width:100%, which shrank
 * the mock-up (sized at 165% so the card crops it) to the card's width: its
 * bottom and the app's own scrollbar edge showed inside the frame. */
html body section[aria-labelledby="s4-h"] > div {
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 48px !important;
}
@media (min-width: 1000px) {
  html body section[aria-labelledby="s4-h"] > div {
    grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr) !important;
    gap: clamp(48px, 6vw, 112px) !important;
  }
}
html body section[aria-labelledby="s4-h"] > div > div:first-child img { max-width: none !important; }
/* WebKit sized the aspect-ratio card to 0x0 in the one-column grid. */
html body section[aria-labelledby="s4-h"] > div > div:first-child { width: 100%; }

/* ---- Careers values cards ---------------------------------------------------
 * Owner 2026-10-20: "this looks very ugly". The six cards wrapped 4 + 2, each
 * title was pushed to the bottom of a tall empty card (so a two-line body put
 * it lower than its siblings), and a half-width tint faded out mid-card. Now:
 * 3 x 2 on desktop, 2 x 3 on tablets, the design's accordion on phones; equal
 * heights; icon, title and body top-aligned; one soft full-card tint. */
html body div:has(> [data-acc-kind="life"]) {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: clamp(16px, 1.6vw, 24px) !important;
}
@media (max-width: 999px) {
  html body div:has(> [data-acc-kind="life"]) { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}
@media (max-width: 760px) {
  html body div:has(> [data-acc-kind="life"]) { grid-template-columns: minmax(0, 1fr) !important; gap: 10px !important; }
}
html body [data-acc-kind="life"] {
  border-radius: 10px;
  border: 1px solid rgba(63, 111, 163, 0.14);
  background: linear-gradient(150deg, rgba(111, 166, 220, 0.16) 0%, rgba(111, 166, 220, 0.06) 55%, rgba(111, 166, 220, 0.02) 100%);
}
html body [data-acc-kind="life"] > span[aria-hidden="true"] { display: none !important; }
@media (min-width: 761px) {
  html body [data-acc-kind="life"] {
    min-height: 0 !important;
    padding: clamp(26px, 2.4vw, 34px) !important;
  }
  html body [data-acc-kind="life"] > h3 { margin: clamp(36px, 3.4vw, 52px) 0 12px !important; }
  html body [data-acc-kind="life"] > p { max-width: none !important; }
}

/* ---- Property hero photo, mirrored ----------------------------------------
 * Owner 2026-10-20: "flip this image", so the building sits on the right and
 * the area behind the "Property" headline is calm. Only the photo layer flips. */
html body section[data-screen-label="Hero"] div[aria-hidden="true"][style*="ind-property.jpg"] { transform: scaleX(-1); }

/* ---- Product mock-ups on phones: a readable, zoomed crop ---------------------
 * Owner 2026-10-20: "cant read this image". Below 600px the export shrank each
 * full desktop screenshot (1710 css px wide) into a ~310px card, so its text was
 * ~3px. Each mock-up now shows the app at 1200px wide (body text ~9.5px) and
 * crops to its most meaningful region (the chat answer, the workflow list, ...)
 * inside the same rounded card. Offsets are in px of that 1200px-wide app. */
@media (max-width: 599px) {
  /* Hero shots (Platform, Agent Studio): taller frame, zoomed background. */
  html body section div[data-m="shot-frame"],
  html body section div[data-m="shot-frame"][style] { aspect-ratio: 1 / 0.92 !important; }
  html body section div[data-m="shot-frame"] > [data-m="shot"] {
    height: 100% !important;
    aspect-ratio: auto !important;
    background-size: 1200px auto !important;
    background-position: var(--hv-mx, 0) var(--hv-my, 0) !important;
  }
  html body [data-m="shot"][style*="p-01.png"] { --hv-mx: -520px; --hv-my: -170px; }
  html body [data-m="shot"][style*="p-04.png"] { --hv-mx: -180px; --hv-my: -20px; }

  /* Workflows hero: the HTML mock-up, 1232px wide, at 90% (12px text -> 10.8px). */
  html body section div[data-m="wf-frame"][style] { aspect-ratio: 1 / 0.92 !important; }
  html body section div[data-m="wf-frame"] [data-norwd] { transform: translate(-159px, 0) scale(0.9) !important; }

  /* Private Equity hero: the HTML mock-up at 72%, cropped to its left side
   * (a transform, not zoom: see "Private Equity hero mock-up" below). */
  html body section[data-screen-label="Hero"] div:has(> [data-hv-scale]) { height: 340px; }
  html body section[data-screen-label="Hero"] [data-hv-scale] { transform: translate(-196px, 0) scale(0.72) !important; margin-bottom: 0 !important; }

  /* Platform "Hive combines context, agents and workflows" (the owner's shot). */
  html body img[src$="/product/p-10.png"][data-rwd-w] {
    --hv-mx: 420px; --hv-my: 50px;
  }
  /* Screenshots placed straight on the gradient card: zoom, shift and clip so
   * the crop sits 16px inside the card like the design's inset frame. */
  html body img[src*="/product/"][data-rwd-w] {
    width: 1200px !important;
    max-width: none !important;
    left: calc(16px - var(--hv-mx, 0px)) !important;
    top: calc(16px - var(--hv-my, 0px)) !important;
    clip-path: inset(var(--hv-my, 0px) 0 0 var(--hv-mx, 0px) round 10px 0 0 0);
    border-radius: 0 !important;
  }

  /* Deployment: workflow list strip. */
  html body div[style*="p-05.png"][style*="130%"] {
    background-size: 1200px auto !important;
    background-position: -170px -30px !important;
  }
  html body div:has(> div[style*="p-05.png"][style*="130%"]) { height: 300px !important; }

  /* About: workflows screenshot. */
  html body img[src$="/product/p-05.png"][data-rwd-w] { --hv-mx: 175px; --hv-my: 0px; }

  /* Screenshots inside the phone accordions (Home, Platform capabilities). */
  html body :is(div, span)[style*="/design/product/"]:is([style*="190%"], [style*="170%"]) {
    background-size: 1200px auto !important;
    background-position: -175px -10px !important;
  }
  html body :is(div, span)[style*="/design/product/p-01.png"]:is([style*="190%"], [style*="170%"]) { background-position: -520px -170px !important; }
  html body :is(div, span)[style*="/design/product/p-10-tight.png"]:is([style*="190%"], [style*="170%"]) {
    background-size: 1000px auto !important;
    background-position: -230px -50px !important;
  }

  /* Home "Built to run": four crossfading screenshots. */
  html body section[aria-labelledby="s4-h"] > div > div:first-child { aspect-ratio: 1 / 0.92 !important; }
  html body section[aria-labelledby="s4-h"] > div > div:first-child > div { left: 16px !important; top: 16px !important; }
  html body section[aria-labelledby="s4-h"] > div > div:first-child img { width: 1200px !important; left: -170px !important; top: -10px !important; }
  html body section[aria-labelledby="s4-h"] > div > div:first-child img[src$="p-10.png"] { left: -400px !important; }
}

/* ===========================================================================
 * Site-wide sweep (2026-10-20): the same kinds of flaw as the owner's items,
 * found by screenshotting every page at 1366/1920 (scrollbar), 768 and 390.
 * ======================================================================== */

/* ---- Headings: no one-word last lines ---------------------------------------
 * Many h1/h2s left a lone word ("scale.", "time.", "company.") on phones.
 * "balance" (the export's choice on many) does not prevent it when a <br>
 * precedes a short first line; "pretty" avoids a one-word last line. */
html body :is(h1, h2, h3) { text-wrap: pretty !important; }
/* Safari 26's pretty re-breaks a heading that is only as wide as its own text
 * (a forced <br>, or a centred column), adding a line: "Talk to the team /
 * behind / the work.". In Safari, balance gives those headings exactly the
 * lines Chrome shows (measured on every page at 1440/768/390). Scoped to
 * WebKit (the only engine with hanging-punctuation) because Chrome's own
 * balance would re-break some of them. Safari 17-18 have no pretty at all, so
 * headings there balance instead of leaving a one-word last line. */
@supports (hanging-punctuation: first) {
  html body :is(h1, h2, h3):has(br),
  html body [style*="align-items: center"] > :is(h1, h2, h3) { text-wrap: balance !important; }
}
@supports (hanging-punctuation: first) and (not (text-wrap: pretty)) {
  html body :is(h1, h2, h3) { text-wrap: balance !important; }
}

/* ---- Card grids: complete rows ----------------------------------------------
 * The export's auto-fit/auto-fill grids wrap by width, not by count, so 3 cards
 * went 2 + 1 on tablets, 9 went 4 + 4 + 1 and 6 went 5 + 1 on wide screens, and
 * a 3-card grid made 4 tracks at 1920 (an empty column). Grids with a known
 * card count get a column count that divides it. Phones keep one column. The
 * footer's link grid has its own rule below. */
@media (min-width: 600px) and (max-width: 999px) {
  /* Three rich cards at ~215px each were too cramped (wrapped buttons,
   * clipped mock-ups), so tablets stack them. */
  html body [style*="repeat(auto-f"]:not([data-m="foot"] > *):not(:has(> select.hv-msel)):has(> :nth-child(3):last-child) {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  html body [style*="repeat(auto-f"]:not([data-m="foot"] > *):has(> :nth-child(4):last-child),
  html body [style*="repeat(auto-f"]:not([data-m="foot"] > *):has(> :nth-child(6):last-child) {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  html body [style*="repeat(auto-f"]:not([data-m="foot"] > *):has(> :nth-child(9):last-child) {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}
@media (min-width: 1000px) {
  html body [style*="repeat(auto-fill"]:not(:has(> select.hv-msel)):has(> :nth-child(3):last-child),
  html body [style*="repeat(auto-f"]:not([data-m="foot"] > *):has(> :nth-child(6):last-child),
  html body [style*="repeat(auto-f"]:not([data-m="foot"] > *):has(> :nth-child(9):last-child) {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}
@media (min-width: 1000px) {
  html body [style*="repeat(auto-f"]:not([data-m="foot"] > *):has(> :nth-child(10):last-child) {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

/* ---- Rows of three stats: one row on tablets, a stack on phones, never 2 + 1 */
@media (min-width: 600px) and (max-width: 999px) {
  html body div[style*="flex-wrap: wrap; gap: clamp(24px, 7vw, 96px)"]:has(> :nth-child(3):last-child) {
    flex-wrap: nowrap !important;
    gap: clamp(14px, 4vw, 40px) !important;
  }
  html body div[style*="flex-wrap: wrap; gap: clamp(24px, 7vw, 96px)"]:has(> :nth-child(3):last-child) > * {
    flex: 1 1 0;
    min-width: 0;
  }
}
@media (max-width: 599px) {
  html body div[style*="flex-wrap: wrap; gap: clamp(24px, 7vw, 96px)"]:has(> :nth-child(3):last-child) {
    flex-direction: column !important;
    gap: 22px !important;
  }
}

/* ---- Mobile filter <select>s span the content width -------------------------
 * They were capped at 560px and centred, so at 768 they sat ~58px in from the
 * heading and list edges. */
html body select.hv-msel { max-width: none !important; margin-left: 0 !important; margin-right: 0 !important; }

/* ---- Footer on tablets: five link columns in one row (was 3 + 2) ------------ */
@media (min-width: 601px) and (max-width: 1199px) {
  html body [data-m="foot"] > div:first-child { grid-template-columns: repeat(5, minmax(0, 1fr)) !important; gap: 40px 20px !important; }
  html body [data-m="foot"] > div:first-child > div:first-child { max-width: none !important; }
}

/* ---- Wide screens: one content column ---------------------------------------
 * From ~1560px some sections capped their content at 1320px (starting at
 * x~300 at 1920) while their neighbours ran to the 96px gutter, so left edges
 * jumped from section to section. Every section, the photo bands' overlay text
 * and the footer now share the centred 1320px column (--hv-g, at the top). */
html body section > footer[style*="clamp(20px, 6vw, 96px)"] {
  padding-left: var(--hv-g) !important;
  padding-right: var(--hv-g) !important;
}
html body section :is(div, span)[style*="position: absolute"]:is([style*="left: clamp(20px, 6vw, 96px)"], [style*="left: clamp(24px, 6vw, 96px)"]) {
  left: var(--hv-g) !important;
}
html body section div[style*="position: absolute"]:is([style*="right: clamp(20px, 6vw, 96px)"], [style*="right: clamp(24px, 6vw, 96px)"]) {
  right: var(--hv-g) !important;
}

/* ---- Sticky side rails stick ------------------------------------------------
 * The page wrapper's overflow-x:hidden made it a scroll container, so the
 * Pricing calculator rail (position:sticky) scrolled away. clip keeps the
 * horizontal clipping without that side effect. */
html body div[style*="width: 100%; overflow-x: hidden"] { overflow-x: clip !important; }
/* Below 1000px the rails sit above the content, not beside it; sticking there
 * drew them over the text, so they scroll normally (as they always did). */
@media (max-width: 999px) {
  html body [style*="position: sticky"] { position: static !important; }
}

/* ---- Careers open roles on tablets: one row per role ------------------------ */
@media (min-width: 600px) and (max-width: 999px) {
  html body a[style*="grid-template-columns: 48px minmax(0px, 1fr) auto auto"] {
    grid-template-columns: 36px minmax(0, 1fr) auto auto !important;
    gap: 20px !important;
  }
  html body a[style*="grid-template-columns: 48px minmax(0px, 1fr) auto auto"] > * { grid-column: auto !important; grid-row: auto !important; }
}

/* ---- Private Equity hold period on tablets ----------------------------------
 * The five-step staircase fell into a ragged 2-column grid with "Exit" alone;
 * tablets get the stacked phone version instead. */
@media (min-width: 600px) and (max-width: 999px) {
  html body [data-m="holdmob"] { display: block !important; }
  html body [data-m="holddesk"] { display: none !important; }
}

/* ---- 404 "Pick up from here" on phones: title above its description --------- */
@media (max-width: 599px) {
  html body section[data-screen-label="Popular pages"] a[style*="grid-template-columns"] { grid-template-columns: minmax(0, 1fr) !important; }
  html body section[data-screen-label="Popular pages"] a[style*="grid-template-columns"] > * { text-align: left !important; }
}

/* ---- Deployment bento on tablets and phones ---------------------------------
 * Stacked full width, the 0.88:1 cards became ~770px-tall empty panels. */
@media (max-width: 999px) {
  html body [style*="aspect-ratio: 0.88 / 1"] { aspect-ratio: 16 / 10 !important; }
}

/* ---- Contact options: titles top-aligned, links on one bottom line ---------- */
@media (min-width: 761px) {
  html body [data-acc-kind="way"] > p[style*="margin: auto 0px 8px"] { margin-top: clamp(28px, 3vw, 44px) !important; }
  html body [data-acc-kind="way"] > span:last-child { margin-top: auto !important; padding-top: 20px; }
}

/* ---- Touch tablets: CTA cards as on desktop -----------------------------------
 * The cards now rest with the first one open (design-overrides.mjs), so touch
 * tablets show the same view as desktop. Forcing every layer visible here gave
 * the second card its photo under dark text. Phones keep hive-nav.js's stacked
 * photo cards. hive-nav.js lifts the text's max-height below 900px, which left
 * the closed card's hidden text taking space and its title floating mid-card;
 * collapse it again so the title sits at the bottom as on desktop. */
@media (min-width: 600px) and (max-width: 899px) {
  html body [data-m="ctacards"] > a > span:last-child > span[style*="opacity: 0;"] { max-height: 0 !important; }
}

/* ---- The window scrolls, not <body> -----------------------------------------
 * hive-responsive.css sets overflow-x:hidden on html and body; when it loaded
 * after the nav's body{overflow-x:clip} (load order varies in WebKit), <body>
 * became the scroll container on iPhones, which breaks window scrolling,
 * anchor jumps and the collapsing address bar. clip never makes a scroller. */
html, html body { overflow-x: clip !important; }

/* ---- Home hero slide 1: Nina's photo, sized per screen ----------------------
 * Nina 2026-10-25: slide 1 ("Frontier AI, put to work.") shows people walking
 * through a bright stone hall (Wen Chen, Unsplash licence; design-overrides.mjs
 * swaps it in as a JPEG). The slide's background is a CSS image, so instead of
 * srcset the width is picked by media query (1280 / 1920 / 2560, more on dense
 * screens) and the format by image-set(): AVIF, then WebP, then JPEG. Browsers
 * without image-set type() drop the second declaration and keep the first
 * (JPEG); the scrim is written out because var() would defeat that. The photo is far
 * lighter than the others, so a scrim on the photo itself (on top of the
 * slide's own gradient) keeps the white text above WCAG AA. On phones the crop
 * centres on the walkers rather than the empty wall. Keyed on the inline
 * fallback URL: the runtime strips the static copy's aria-labels on mount. */
html body [role="img"][style*="/hero-sme-1920.jpg"] {
  background-image: linear-gradient(180deg, rgba(10, 10, 12, .2) 0%, rgba(10, 10, 12, .1) 40%, rgba(10, 10, 12, .22) 100%), url(/design/assets/photos/hero-sme-1920.jpg) !important;
  background-image: linear-gradient(180deg, rgba(10, 10, 12, .2) 0%, rgba(10, 10, 12, .1) 40%, rgba(10, 10, 12, .22) 100%), image-set(url(/design/assets/photos/hero-sme-1920.avif) type("image/avif"), url(/design/assets/photos/hero-sme-1920.webp) type("image/webp"), url(/design/assets/photos/hero-sme-1920.jpg) type("image/jpeg")) !important;
  background-position: 50% 45% !important;
}
@media (min-width: 1200px) and (min-resolution: 1.5dppx), (min-width: 1921px) {
  html body [role="img"][style*="/hero-sme-1920.jpg"] {
    background-image: linear-gradient(180deg, rgba(10, 10, 12, .2) 0%, rgba(10, 10, 12, .1) 40%, rgba(10, 10, 12, .22) 100%), url(/design/assets/photos/hero-sme-2560.jpg) !important;
    background-image: linear-gradient(180deg, rgba(10, 10, 12, .2) 0%, rgba(10, 10, 12, .1) 40%, rgba(10, 10, 12, .22) 100%), image-set(url(/design/assets/photos/hero-sme-2560.avif) type("image/avif"), url(/design/assets/photos/hero-sme-2560.webp) type("image/webp"), url(/design/assets/photos/hero-sme-2560.jpg) type("image/jpeg")) !important;
  }
}
@media (max-width: 599px) {
  html body [role="img"][style*="/hero-sme-1920.jpg"] { background-position: 56% 50% !important; }
}
@media (max-width: 599px) and (max-resolution: 1.99dppx) {
  html body [role="img"][style*="/hero-sme-1920.jpg"] {
    background-image: linear-gradient(180deg, rgba(10, 10, 12, .2) 0%, rgba(10, 10, 12, .1) 40%, rgba(10, 10, 12, .22) 100%), url(/design/assets/photos/hero-sme-1280.jpg) !important;
    background-image: linear-gradient(180deg, rgba(10, 10, 12, .2) 0%, rgba(10, 10, 12, .1) 40%, rgba(10, 10, 12, .22) 100%), image-set(url(/design/assets/photos/hero-sme-1280.avif) type("image/avif"), url(/design/assets/photos/hero-sme-1280.webp) type("image/webp"), url(/design/assets/photos/hero-sme-1280.jpg) type("image/jpeg")) !important;
  }
}

/* ---- Closing CTA headline on small phones ------------------------------------
 * Nina 2026-10-25: "Your first workflow starts" / "with one call." on two lines
 * at every width. At the export's 31px minimum, line 1 is wider than a 320-360px
 * column and wrapped to three lines, so the size scales down there. Matches the
 * headlines whose grey half is a block (design-overrides.mjs). */
@media (max-width: 400px) {
  html body section h2:has(> span[style*="text-wrap: balance; color: rgb(122, 122, 128)"]) { font-size: min(31px, 7.6vw) !important; }
}


/* ---- Safari parity (Nina 2026-10-26) ------------------------------------------
 * Safari draws differently from Chrome in a few places; each block says where. */

/* Agent Studio "Four kinds of agent": macOS/iOS Safari composites the animated
 * gradient layers on the GPU and then ignores the pill's overflow + radius
 * clip, so the pills and circles showed as hard-cornered rectangles. A
 * clip-path (and the mask, for older Safari) clips composited layers too. */
html body [data-shimmer] > span[aria-hidden="true"][style*="hvBreath"] {
  clip-path: inset(0 round 999px);
  -webkit-mask-image: -webkit-radial-gradient(white, black);
}

/* Private Equity "Deploy once": the photos zoom (1.06 to 1) as they cross-fade,
 * which flashed square corners in Safari for each slide change. */
html body div[style*="aspect-ratio: 1.6 / 1"][style*="border-radius: 12px"][style*="overflow: hidden"] {
  clip-path: inset(0 round 12px);
}

/* Private Equity hero mock-up: a 1440px-wide HTML app shot shrunk to its box.
 * The export used zoom, and Safari never renders zoomed text below 9px, so at
 * tablet widths every label grew to ~22px and the mock-up wrapped and broke.
 * A transform has no such floor. --hv-z is the scale the design (and, before
 * it starts, the porter's STATIC_FIT / sampleFit) computes, as it did for
 * zoom; the negative margin removes the layout height the transform leaves
 * behind (the mock-up is 950px tall). */
html body [data-hv-scale] {
  width: 1440px;
  transform: scale(var(--hv-z, 1));
  transform-origin: 0 0;
  margin-bottom: calc((var(--hv-z, 1) - 1) * 950px);
}

/* Platform, Agent Studio and Workflows hero shots: WebKit sized the screenshot
 * (height:100%) against the frame's whole height, padding included, so it was
 * ~7% too tall and zoomed in, cropping the sidebar and the right-hand column.
 * In a grid the screenshot's 100% is its grid area (the content box) in every
 * engine. The floating cards are absolutely positioned, so they do not move. */
html body section div[style*="aspect-ratio: 16 / 9.4"] { display: grid !important; }

/* Pricing seats: Safari always draws the native number stepper, so the field
 * showed two sets of arrows next to the custom More/Fewer seats buttons. */
html body input[aria-label="Seats"] { -moz-appearance: textfield; appearance: textfield; }
html body input[aria-label="Seats"]::-webkit-inner-spin-button,
html body input[aria-label="Seats"]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }

/* Form placeholders: Safari's default grey (#A9A9A9, 2.3:1 on white) is much
 * fainter than Chrome's; use Chrome's #757575 everywhere. */
html body :is(input, textarea)::placeholder { color: #757575; opacity: 1; }

/* Home hero on iPhone: 100vh is the height with the toolbars hidden, so on
 * first load the slide tabs, arrows and buttons sat under Safari's bottom bar.
 * svh is the visible height (the same as vh on desktop). */
@supports (height: 100svh) {
  html body header[aria-roledescription="carousel"][style*="100vh"] { height: min(100svh, 940px) !important; }
}

/* The server-rendered first paint only carries unprefixed backdrop-filter;
 * Safari 17 needs the prefix, or its glass chips flash un-blurred. */
html body [data-hive-static] [style*="backdrop-filter: blur(6px)"] { -webkit-backdrop-filter: blur(6px); }
html body [data-hive-static] [style*="backdrop-filter: blur(8px)"] { -webkit-backdrop-filter: blur(8px); }
/* ---- Header bar and hero: one left edge ---------------------------------------
 * Nina 2026-10-26: the logo, the hero headline, sub-copy and buttons start on
 * one edge ~1.3cm (49px) from the left on desktop; 32px on tablets, 20px on
 * phones. The bar keeps the design's height, 68px (60px on phones): Nina
 * 2026-10-28 asked for it back after it was made 106px / 88px / 72px.
 * hive-nav.js reads both (design-overrides.mjs NAV_PATCHES); here the
 * left-aligned heroes take the edge. Centred heroes stay centred. */
html { --hv-bar: 68px; --hv-edge: 49px; scroll-padding-top: calc(var(--hv-bar) + 4px) !important; }
@media (max-width: 1199px) { html { --hv-edge: 32px; } }
@media (max-width: 599px) { html { --hv-bar: 60px; --hv-edge: 20px; } }
/* The hero is the block the nav pads ([data-nav-pad]), or the section around it
 * when the section holds the gutter. A hero capped at the 1320px column (News,
 * FAQ, legal pages) spans the window instead, or its edge would move with the
 * window width. */
html body [data-nav-pad][style*="clamp(20px, 6vw, 96px)"]:not([style*="text-align: center"]),
html body section[style*="clamp(20px, 6vw, 96px)"]:has(> [data-nav-pad]:not([style*="clamp(20px, 6vw, 96px)"]):not([style*="text-align: center"])) {
  padding-left: var(--hv-edge) !important;
  padding-right: var(--hv-edge) !important;
  max-width: none !important;
}
/* The 404 hero is a card inset 12px from the window. */
html body section[style*="padding: 12px 12px 0px"] > [data-nav-pad][style*="clamp(20px, 6vw, 96px)"] {
  padding-left: calc(var(--hv-edge) - 12px) !important;
  padding-right: calc(var(--hv-edge) - 12px) !important;
}
/* Home's hero slides (headline, slide bars and arrows). */
html body header div[style*="position: absolute"][style*="left: clamp(24px, 3vw, 44px)"] {
  left: var(--hv-edge) !important;
  right: var(--hv-edge) !important;
}
/* Side rails stick the same distance below the bar. */
html body [style*="position: sticky"][style*="top: 96px"] { top: calc(var(--hv-bar) + 28px) !important; }
html body [style*="position: sticky"][style*="top: 92px"] { top: calc(var(--hv-bar) + 24px) !important; }