/* Site wide styles the designs assume but do not carry inline: the page wrapper, closed and open branches,
   post and doc content, and the layout for narrow screens. The designs are drawn at desktop width with inline
   styles; the phone and tablet layout below overrides those inline styles by matching on them. */

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; background: #ffffff; color: var(--navy); font: var(--type-body); }
.site { min-height: 100vh; background: var(--white); color: var(--navy); font: var(--type-body); overflow-x: clip; }
a { color: #1f2633; }
a:hover { color: #5a6473; }
input[type=range] { accent-color: #1f2633; }
img { max-width: 100%; height: auto; }

/* Branches the design shows only in some states. The page scripts remove [hidden] to open them. */
[data-dc-if]:not([hidden]) { display: contents; }
/* WordPress's block styles give a solid border to any element whose style mentions border-width, which also
   catches the design's var(--border-width) outlines (fields, pills) and draws a second, 3px border. */
.site [style*="var(--border-width)"]:not([style*="border:"]):not([style*="border-width:"]):not([style*="border-top:"]):not([style*="border-bottom:"]) { border-style: none; }

.skip-link { position: absolute; left: 16px; top: -48px; z-index: 100; padding: 10px 16px; border-radius: 8px; background: var(--navy); color: var(--white); font: var(--weight-medium) 14px/1 var(--font-text); text-decoration: none; }
.skip-link:focus { top: 16px; color: var(--white); }
:focus-visible { outline: var(--focus-ring-width) solid var(--focus-ring); outline-offset: var(--focus-ring-offset); }

.image-slot:not([style*="aspect-ratio"]):not(.image-slot--natural) { min-height: 100%; }
/* A hero keeps its own shape whatever the row does: filling the row's height would squash the screen. */
.image-slot--natural { height: auto !important; align-self: center; object-fit: contain; }
/* Placeholder numbers, so feedback and Site images can name a slot (inc/image-slots.php). */
/* The In short block usually sits above the closing call to action. Where it ends the page it takes its own
   room, rather than sitting against the footer. */
.page-summary:last-child { padding-bottom: 96px !important; }

/* A card that leads somewhere: the link inside it covers the card, so anywhere on it follows the link, while the
   button and the magnifier on top of it still work. */
.card-linked { position: relative; }
.card-linked:hover { cursor: pointer; }
.card-link::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.card-linked a:not(.card-link) { position: relative; z-index: 2; }
/* The magnifier is already placed in the image's corner, so it only needs to sit above the card's link. */
.card-linked .image-zoom__button { z-index: 2; }

/* A screenshot inside a page can be opened full size from the magnifier in its corner. */
.image-zoom { line-height: 0; }
.image-zoom__button {
  position: absolute; right: 12px; bottom: 12px; width: 34px; height: 34px; padding: 0;
  display: grid; place-items: center; cursor: zoom-in; border-radius: 50%;
  border: 1px solid rgba(31, 38, 51, .12); background: #fff; color: #1f2633;
  box-shadow: 0 2px 8px rgba(31, 38, 51, .18); opacity: .85; transition: opacity .15s, transform .15s;
}
.image-zoom:hover .image-zoom__button, .image-zoom__button:focus-visible { opacity: 1; transform: scale(1.06); }
.image-zoom-dialog { border: 0; padding: 0; background: none; max-width: 96vw; max-height: 96vh; overflow: visible; }
.image-zoom-dialog::backdrop { background: rgba(15, 20, 30, .74); }
.image-zoom-dialog img { display: block; max-width: 96vw; max-height: 92vh; border-radius: 12px; box-shadow: 0 30px 80px rgba(0, 0, 0, .45); }
.image-zoom-dialog__close {
  position: absolute; top: -14px; right: -14px; width: 34px; height: 34px; border-radius: 50%; cursor: pointer;
  border: 1px solid rgba(31, 38, 51, .12); background: #fff; color: #1f2633; font-size: 18px; line-height: 1;
}
/* A hero shows the screen at its own shape, so nothing is cropped and the text stays readable. */
.image-slot--natural { border-radius: 14px; box-shadow: 0 24px 60px rgba(31, 38, 51, .16), 0 4px 12px rgba(31, 38, 51, .08); }
/* The home hero image has no background of its own, so it can run wider than its column and reach toward the
   edge of the page. Below 1180px the hero stacks and it goes back to the width it is given. */
/* The designs draw a dashed box around an empty slot. Once the slot has a picture, the box goes. */
[style*="dashed var(--grey-500)"]:has(.image-slot--filled) { border-color: transparent !important; }
.image-slot[data-number] { position: relative; }
.image-slot[data-number]::after { content: attr(data-number); position: absolute; inset: 0; margin: auto; width: fit-content; height: fit-content; min-width: 28px; padding: 6px 10px; border-radius: 999px; background: var(--navy); color: var(--white); font: var(--weight-medium) 13px/1 var(--font-mono); text-align: center; }

/* Form feedback, shown by site.js from the ?form= flag after a submission. */
.form-note { margin: 0 0 16px; padding: 12px 14px; border-radius: 8px; font: var(--type-caption); }
.form-note--error { background: var(--coral-12); color: var(--navy); }
form [required]:user-invalid { box-shadow: inset 0 0 0 1px var(--coral); }

/* Written content: blog posts, docs, case studies, legal and plain pages. Matches the article styles in the designs. */
.prose { font: var(--weight-book) 17px/1.7 var(--font-text); color: var(--navy); }
.prose > * { margin: 24px 0 0; }
.prose > :first-child { margin-top: 0; }
.prose p { max-width: none; }
.prose h2 { font: var(--weight-semibold) 28px/1.2 var(--font-display); letter-spacing: var(--tracking-title); margin-top: 48px; }
.prose h3 { font: var(--weight-semibold) 20px/1.3 var(--font-display); letter-spacing: var(--tracking-heading); margin-top: 36px; }
.prose ul, .prose ol { padding-left: 20px; }
.prose li + li { margin-top: 6px; }
.prose a { color: var(--navy); text-decoration: underline; text-underline-offset: 3px; }
.prose strong { font-weight: 600; }
.prose code { font: 400 14px/1 var(--font-mono); background: var(--light-blue); padding: 2px 6px; border-radius: 4px; }
.prose pre { padding: 16px 20px; border-radius: 8px; background: var(--navy); color: #c6d1e2; font: 400 13px/1.6 var(--font-mono); overflow: auto; }
.prose pre code { background: none; padding: 0; color: inherit; }
.prose blockquote { margin-left: 0; padding: 24px; border-radius: 12px; background: var(--light-blue); font-size: 15px; }
.prose img, .prose figure { border-radius: 12px; }
.prose figcaption { font: var(--type-caption); color: var(--text-secondary); margin-top: 8px; }
.prose table { width: 100%; border-collapse: collapse; font: var(--type-body); }
.prose th, .prose td { text-align: left; padding: 12px 16px; border-top: 1px solid var(--rule-hairline); }
.prose th { font: var(--type-label); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--text-secondary); background: #f9fafc; }
.docs-article.prose { font-size: 16px; }
.docs-article.prose h2 { font-size: 24px; line-height: 1.25; letter-spacing: var(--tracking-heading); margin-top: 40px; }

/* The mobile menu button and panel, added by site.js. */
.nav-toggle { display: none; }
.mobile-nav { display: none; }

/* ---------------------------------------------------------------------------------------------------------
   Narrow screens. The designs are drawn at 1440 with inline styles, so everything below overrides those
   inline styles by matching on them, and only inside max-width queries: at 1181px and wider nothing here applies.
   --------------------------------------------------------------------------------------------------------- */

/* Tablet landscape and small laptops: keep desktop layouts but let wide grids breathe. */
@media (max-width: 1180px) {
	/* Grid items may shrink below their content (fr columns otherwise grow to fit wide illustrations). */
	.site [style*="grid-template-columns"] > * { min-width: 0; }
	/* Card illustrations drawn to a fixed height grow when their labels do. */
	.site main [style*="border-radius:12px 12px 0 0;height:124px"] { height: auto !important; min-height: 124px; }
	/* The design system's smallest text size is 11px; nothing on a tablet or phone goes below 12px. */
	:root { --size-label: 12px; }
	.site [style*=" 9px/"], .site [style*=" 10px/"], .site [style*=" 11px/"] { font-size: 12px !important; }
	[style*="grid-template-columns:repeat(4,minmax(0,1fr))"] { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
	[style*="grid-template-columns:repeat(6,minmax(0,1fr))"] { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
	[style*="grid-template-columns:200px repeat(4,minmax(0,1fr))"] { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
	[style*="grid-template-columns:200px repeat(4,minmax(0,1fr))"] > :first-child { grid-column: 1 / -1; }
}

/* Phones and portrait tablets: one column, 20px page gutters, headings scaled to the screen. */
@media (max-width: 900px) {
	/* A stacked row shows its picture first and the words under it, whichever side the design put the picture on. */
	.site main section[id] > div > *:not(:has(.image-slot)) { order: 0 !important; }
	.site main [style*="grid-template-columns"] > :is(.image-slot, .image-zoom, :has(.image-slot)) { order: -1 !important; }
	/* Layout grids stack. Small grids stay as they are: icon plus text rows, bar charts, calendars and the
	   comparison tables (which scroll sideways instead, see below). */
	.site main [style*="grid-template-columns"]:where(:not([style*="grid-template-columns:24px"]):not([style*="grid-template-columns:40px"]):not([style*="grid-template-columns:44px"]):not([style*="grid-template-columns:48px"]):not([style*="grid-template-columns:52px"]):not([style*="grid-template-columns:1fr 30px"]):not([style*="grid-template-columns:auto 1fr auto"]):not([style*="grid-template-columns:repeat(7,"]):not([style*="grid-template-columns:1.6fr 1fr 1fr 1fr"]):not([style*="grid-template-columns:.8fr .8fr 1fr 1.5fr 1fr"]):not([style*="grid-template-columns:1fr auto auto 20px"])) { grid-template-columns: minmax(0, 1fr) !important; }
	.site main [style*="grid-column:1 / -1"] { grid-column: auto !important; }
	.site main [style*="grid-column:span"] { grid-column: auto !important; }

	/* Comparison tables keep their columns and scroll sideways inside their box. */
	.site main :has(> [style*="grid-template-columns:1.6fr 1fr 1fr 1fr"]),
	.site main :has(> [style*="grid-template-columns:.8fr .8fr 1fr 1.5fr 1fr"]) { overflow-x: auto !important; -webkit-overflow-scrolling: touch; }
	.site main [style*="grid-template-columns:1.6fr 1fr 1fr 1fr"],
	.site main [style*="grid-template-columns:.8fr .8fr 1fr 1.5fr 1fr"] { min-width: 600px; }
	.site main :has(> [style*="grid-template-columns:1.6fr 1fr 1fr 1fr"]) > :not([style*="grid-template-columns"]) { min-width: 600px; }
	.site main [style*="grid-template-columns:1.6fr 1fr 1fr 1fr"] > :first-child,
	.site main [style*="grid-template-columns:.8fr .8fr 1fr 1.5fr 1fr"] > :first-child { position: sticky; left: 0; z-index: 1; margin-left: -24px; padding-left: 24px; background: inherit; }

	/* Page gutters. */
	.site main [style*="max-width:1296px"], .site main [style*="max-width:1264px"], .site footer [style*="max-width:1296px"] { padding-left: 20px !important; padding-right: 20px !important; }
	.site main [style*="padding:0 48px"] { padding-left: 20px !important; padding-right: 20px !important; }

	/* Heroes leave room for the shorter header rather than the desktop one. */
	.site main [style*="padding:144px 48px"], .site main [style*="padding:160px 48px"], .site main [style*="padding:168px 48px"], .site main [style*="padding:176px 48px"],
	.site main [style*="padding:192px 48px"], .site main [style*="padding:200px 48px"], .site main [style*="padding:224px 48px"], .site main [style*="padding:192px 0"] { padding-top: 112px !important; }

	/* Big vertical gaps halve. */
	.site main [style*="padding:112px 48px"], .site main [style*="padding:96px 48px"], .site main [style*="padding:128px 48px"], .site main [style*="padding:120px 48px"] { padding-top: 64px !important; padding-bottom: 64px !important; }
	.site main [style*="padding:112px 48px 0"], .site main [style*="padding:128px 32px 0"], .site main [style*="padding:144px 48px 0"] { padding-top: 64px !important; }
	.site main [style*="padding-top:112px"], .site main [style*="padding-top:144px"], .site main [style*="margin-top:128px"] { padding-top: 64px !important; margin-top: 0 !important; }
	.site main [style*="gap:64px"], .site main [style*="gap:72px"], .site main [style*="gap:96px"], .site main [style*="gap:32px 64px"] { gap: 32px !important; }
	.site main [style*="padding:40px"], .site main [style*="padding:40px 56px"], .site main [style*="padding:48px 56px"], .site main [style*="padding:64px;"], .site main [style$="padding:64px"] { padding: 24px !important; }

	/* Headings and big figures scale with the screen instead of overflowing it. */
	.site main h1 { font-size: clamp(34px, 9vw, 48px) !important; }
	.site main h2[style*=") 44px"], .site main h2[style*=") 40px"], .site main h2[style*=") 36px"], .site main h2[style*=") 48px"], .site main h2[style*=") 56px"] { font-size: clamp(28px, 7.4vw, 36px) !important; }
	.site main :not(h1):not(h2)[style*=") 56px"], .site main :not(h1):not(h2)[style*=") 58px"], .site main :not(h1):not(h2)[style*=") 60px"],
	.site main :not(h1):not(h2)[style*=") 48px"], .site main :not(h1):not(h2)[style*=") 44px"] { font-size: 40px !important; }
	.site main [style*="font:var(--weight-medium) 34px"] { font-size: 26px !important; }
	.site main [style*="white-space:nowrap"]:not([style*="clip-path"]) { white-space: normal !important; }
	.site main p, .site main h1, .site main h2, .site main h3 { overflow-wrap: break-word; }

	/* Rows that sit side by side on desktop wrap; buttons (FAQ questions) keep their icon on the same line. */
	.site main :not(button)[style*="display:flex"][style*="justify-content:space-between"] { flex-wrap: wrap; }
	.site main [style*="display:flex;gap:20px;align-items:center"], .site main [style*="display:flex;align-items:center;gap:20px"] { flex-wrap: wrap; }
	.site main button[style*="justify-content:space-between"] { gap: 16px !important; }

	/* Fixed width fields and columns fit the screen. */
	.site main form[style*="display:flex"] { flex-wrap: wrap; }
	.site main form[style*="display:flex"] > :first-child { flex: 1 1 220px; }
	.site main form[style*="display:flex"] input { width: 100% !important; box-sizing: border-box; }
	.site main input, .site main select, .site main textarea { max-width: 100%; }
	.site main [style*="width:280px"], .site main [style*="width:320px"], .site main [style*="width:360px"], .site main [style*="width:400px"] { max-width: 100%; }

	/* Sticky side columns stop sticking once they stack. */
	.site main [style*="position:sticky"] { position: static !important; }

	/* Header: logo on the left, a menu button on the right. */
	.site > header { margin-bottom: -76px !important; }
	.site > header > div { border-radius: 0 0 16px 16px !important; }
	.site > header > div > div:first-child { grid-template-columns: auto 1fr !important; min-height: 64px !important; padding: 10px 16px !important; gap: 12px !important; }
	.site > header nav:not(.mobile-nav), .site > header > div > div:first-child > div { display: none !important; }
	.site > header > div > div:first-child > a { order: -1; }
	.site > header [data-dc-if] { display: none !important; }
	.nav-toggle { display: inline-flex; justify-self: end; align-items: center; justify-content: center; width: 44px; height: 44px; border: 1px solid var(--rule-hairline); border-radius: 8px; background: var(--white); cursor: pointer; }
	.mobile-nav[data-open] { display: block; padding: 4px 16px 20px; max-height: calc(100vh - 80px); max-height: calc(100dvh - 80px); overflow: auto; overscroll-behavior: contain; }
	.mobile-nav h2 { font: var(--type-label); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--text-secondary); margin: 20px 0 8px; }
	.mobile-nav a { display: block; padding: 12px 0; font: var(--weight-medium) 16px/1.3 var(--font-text); color: var(--navy); text-decoration: none; border-bottom: 1px solid var(--rule-hairline); }
	.mobile-nav .mobile-nav__actions { display: flex; gap: 12px; margin-top: 20px; }
	.mobile-nav .mobile-nav__actions a { flex: 1; text-align: center; border: 1px solid var(--rule-hairline); border-radius: 8px; padding: 12px; }
	.mobile-nav .mobile-nav__actions a:last-child { background: var(--coral); border-color: var(--coral); color: var(--white); }

	/* Footer. */
	.site footer [style*="padding:80px 48px 56px"] { padding: 56px 20px 40px !important; }
	.site footer [style*="display:flex;justify-content:space-between"] { flex-direction: column; align-items: flex-start !important; }

	/* Tables in articles scroll sideways rather than squash. */
	.prose table { display: block; overflow-x: auto; }
}

/* Portrait tablets: card grids keep two columns. */
@media (min-width: 601px) and (max-width: 900px) {
	.site main [style*="grid-template-columns:repeat(2,minmax(0,1fr))"], .site main [style*="grid-template-columns:repeat(3,minmax(0,1fr))"],
	.site main [style*="grid-template-columns:repeat(4,minmax(0,1fr))"], .site main [style*="grid-template-columns:repeat(3,1fr)"] { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}

/* Phones. */
@media (max-width: 600px) {
	.site footer [style*="grid-template-columns:200px"] { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 32px 20px !important; }
	/* Stat strips divided by vertical rules lose the rule and its indent once they stack. */
	.site main [style*="grid-template-columns:repeat(3,1fr);gap:0"] > *, .site main [style*="grid-template-columns:repeat(3,minmax(0,1fr));gap:0"] > * { border-left: 0 !important; padding-left: 0 !important; }
	.site main [style*="grid-template-columns:repeat(3,220px)"] { grid-template-columns: minmax(0, 1fr) !important; width: 100%; }
	.site main h1 { font-size: clamp(32px, 9vw, 40px) !important; }
	/* Job rows (careers, other open roles): title and team, then location, salary and the arrow on one line. */
	.site main [style*="grid-template-columns:1fr auto auto 20px"] { grid-template-columns: auto minmax(0, 1fr) 20px !important; gap: 8px 16px !important; }
	.site main [style*="grid-template-columns:1fr auto auto 20px"] > :first-child { grid-column: 1 / -1; }
}