@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Pacifico&display=swap');

/* ==========================================================================
   1. Tokens
   Brand palette is unchanged: navy #071939, pink #E7056F, deep pink #C81E6E,
   violet #A13BA1, mist #F4F5F9. Everything below is derived from those five.
   ========================================================================== */

:root {
	--hr-navy: #071939;
	--hr-pink: #E7056F;
	--hr-pink-deep: #C81E6E;
	--hr-violet: #A13BA1;
	--hr-mist: #F4F5F9;

	--font-sans: 'Helvetica Neue', Helvetica, 'Inter', Arial, sans-serif;
	--font-mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;

	/* Hierarchy comes from size, weight and tracking, never a second typeface,
	   so the display alias points at the same family as body copy. */
	--hr-display: var(--font-sans);

	--md-text-font-family: var(--font-sans);
	--md-code-font-family: var(--font-mono);
	--hr-radius: 14px;
	--hr-radius-sm: 10px;
	--hr-shadow: 0 1px 2px rgba(7, 25, 57, .04), 0 8px 24px -12px rgba(7, 25, 57, .18);
	--hr-shadow-lift: 0 2px 4px rgba(7, 25, 57, .06), 0 18px 40px -18px rgba(7, 25, 57, .32);
}

/* Light ------------------------------------------------------------------ */
[data-md-color-scheme="default"] {
	--hr-accent: #E7056F;
	--hr-accent-hover: #C81E6E;
	--hr-accent-soft: rgba(231, 5, 111, .08);
	--hr-accent-tint: #FCE7F0;
	--hr-page: #FFFFFF;
	--hr-surface: #FFFFFF;
	--hr-surface-sunken: #F7F8FC;
	--hr-border: #E4E8F1;
	--hr-border-strong: #D1D8E3;
	--hr-text: #16233D;
	--hr-muted: #5B6884;
	--hr-code-bg: #071939;
	--hr-code-border: rgba(255, 255, 255, .08);

	--md-primary-fg-color: #071939;
	--md-primary-fg-color--light: #A13BA1;
	--md-accent-fg-color: var(--hr-accent);
	--md-typeset-a-color: var(--hr-accent);
	--md-default-fg-color: var(--hr-text);
	--md-default-fg-color--light: var(--hr-muted);
	--md-default-fg-color--lighter: var(--hr-border-strong);
	--md-default-fg-color--lightest: #EBEFF5;
	--md-default-bg-color: var(--hr-page);
	--md-code-bg-color: var(--hr-surface-sunken);
	--md-code-fg-color: var(--hr-text);
	--md-footer-bg-color: var(--hr-page);
	--md-footer-bg-color--dark: var(--hr-page);
	--md-footer-fg-color--light: var(--hr-muted);
}

/* Dark ------------------------------------------------------------------- */
[data-md-color-scheme="slate"] {
	--hr-accent: #FF3D8F;
	--hr-accent-hover: #FF75AF;
	--hr-accent-soft: rgba(255, 61, 143, .14);
	--hr-accent-tint: #281533;
	--hr-page: #050F24;
	--hr-surface: #0A1B38;
	--hr-surface-sunken: #08152C;
	--hr-border: #1A2E56;
	--hr-border-strong: #23407A;
	--hr-text: #DDE5F3;
	--hr-muted: #8FA0C0;
	--hr-code-bg: #030B18;
	--hr-code-border: rgba(255, 255, 255, .07);

	--md-hue: 220;
	--md-primary-fg-color: #050F24;
	--md-primary-fg-color--light: #A13BA1;
	--md-accent-fg-color: var(--hr-accent);
	--md-typeset-a-color: var(--hr-accent);
	--md-default-fg-color: var(--hr-text);
	--md-default-fg-color--light: var(--hr-muted);
	--md-default-fg-color--lighter: var(--hr-border-strong);
	--md-default-fg-color--lightest: var(--hr-border);
	--md-default-bg-color: var(--hr-page);
	--md-code-bg-color: var(--hr-surface-sunken);
	--md-code-fg-color: var(--hr-text);
	--md-footer-bg-color: var(--hr-page);
	--md-footer-bg-color--dark: var(--hr-page);
	--md-footer-fg-color--light: var(--hr-muted);
}

/* ==========================================================================
   2. Base typography
   ========================================================================== */

body {
	font-family: var(--font-sans);
}

code,
pre,
kbd {
	font-family: var(--font-mono);
}

.md-typeset {
	font-size: 16px;
	line-height: 1.60;
}

/* Negative tracking is what replaces the serif: Helvetica Neue at display
   sizes with default spacing reads loose. Applied at 20px and up only. */
.md-typeset h1,
.md-typeset h2,
.md-typeset h3,
.md-typeset h4,
.md-typeset h5 {
	font-family: var(--hr-display);
	letter-spacing: -.01em;
	color: var(--hr-text);
}

.md-typeset h1 {
	font-size: clamp(32px, 5vw, 48px);
	line-height: 1.08;
	font-weight: 700;
	letter-spacing: -.025em;
	margin: 1.6rem 0 .8rem;
}

.md-typeset h2 {
	font-size: clamp(26px, 3.6vw, 36px);
	font-weight: 700;
	line-height: 1.15;
	letter-spacing: -.02em;
	margin: 2.4rem 0 .8rem;
}

.md-typeset h3 {
	font-size: 24px;
	font-weight: 700;
	line-height: 1.25;
	letter-spacing: -.015em;
	margin: 1.9rem 0 .5rem;
}

.md-typeset h4 {
	font-size: 20px;
	font-weight: 600;
	line-height: 1.30;
	letter-spacing: -.01em;
}

/* Anchor links stay out of the way until you want them */
.md-typeset .headerlink {
	color: var(--hr-border-strong);
	transition: color .2s ease;
}

.md-typeset a {
	text-decoration: none;
	text-underline-offset: 3px;
	text-decoration-thickness: 1px;
}

.md-typeset a:hover {
	text-decoration: underline;
	color: var(--hr-accent-hover);
}

/* ==========================================================================
   3. Header, tabs and search
   ========================================================================== */

.md-header {
	background-color: var(--hr-navy);
	box-shadow: none !important;
	border-bottom: 1px solid rgba(255, 255, 255, .08);
}

/* A single hairline of brand colour under the header — the one flourish up top */
.md-header::after {
	content: "";
	position: absolute;
	inset: auto 0 -1px 0;
	height: 1px;
	background: linear-gradient(90deg, transparent 0%, var(--hr-violet) 30%, var(--hr-pink) 50%, var(--hr-violet) 70%, transparent 100%);
	opacity: .8;
}

.md-header__title {
	font-weight: 600;
	flex: 0 0 auto;
	margin-right: 1rem;
}

[dir=ltr] .md-header__title {
	margin-left: 0;
}

.md-header__title .md-ellipsis {
	text-transform: uppercase;
	letter-spacing: .5px;
}

.md-header__button {
	color: #fff;
}

.md-header__button:hover {
	color: rgba(255, 255, 255, .7);
}

/* Colour scheme picker: a native <select> in a pill, so the three states are
   one click apart instead of a cycle. The select covers the whole pill, with
   the state icon and the caret painted behind it, so a click anywhere in the
   pill opens the menu. Markup: overrides/partials/palette.html */
.hr-scheme {
	position: relative;
	display: flex;
	align-items: center;
	margin: 0 .3rem 0 .2rem;
	border-radius: 999px;
	border: 1px solid rgba(255, 255, 255, .16);
	background: rgba(255, 255, 255, .06);
	color: #fff;
	transition: background-color .2s ease, border-color .2s ease;
}

.hr-scheme:hover {
	background: rgba(255, 255, 255, .12);
	border-color: rgba(255, 255, 255, .28);
}

.hr-scheme:focus-within {
	outline: 2px solid #fff;
	outline-offset: 2px;
}

/* Decoration only: the select on top takes every click */
.hr-scheme__icon,
.hr-scheme__caret {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	pointer-events: none;
	display: none;
}

.hr-scheme__icon {
	left: .55rem;
}

.hr-scheme__caret {
	right: .45rem;
	display: block;
}

/* Show the icon belonging to the selected state */
.hr-scheme[data-scheme="0"] .hr-scheme__icon[data-scheme="0"],
.hr-scheme[data-scheme="1"] .hr-scheme__icon[data-scheme="1"],
.hr-scheme[data-scheme="2"] .hr-scheme__icon[data-scheme="2"] {
	display: block;
}

.hr-scheme__icon svg,
.hr-scheme__caret svg {
	width: 16px;
	height: 16px;
	fill: currentcolor;
	display: block;
}

.hr-scheme__select {
	appearance: none;
	background: transparent;
	border: 0;
	/* Dark popup on the platforms that theme it from here, macOS among them */
	color-scheme: dark;
	color: #fff;
	font-family: var(--hr-display);
	font-size: .75rem;
	font-weight: 600;
	line-height: 1.9;
	/* Room for the icon and the caret underneath */
	padding: 0 1.55rem 0 2rem;
	cursor: pointer;
	width: 100%;
}

.hr-scheme__select:focus-visible {
	outline: none;
}

/* Chrome on Windows draws the open list from the options' own colours and
   ignores everything set on the select, color-scheme included. Paint them, or
   the popup comes out white under the navy header. */
.hr-scheme__select option {
	background-color: var(--hr-navy);
	color: #fff;
}

/* Material's own palette form only carries the radio inputs now */
.md-header__option {
	display: none;
}

.md-tabs {
	background-color: var(--hr-navy);
	border-bottom: 1px solid rgba(255, 255, 255, .1);
}

.md-tabs__link {
	color: #fff !important;
	opacity: .7;
}

.md-tabs__link--active,
.md-tabs__link:hover {
	color: #fff !important;
	opacity: 1;
}

.md-tabs .md-tabs__item:last-child {
	float: right;
}

/* Search ---------------------------------------------------------------- */
.md-search__form,
.md-search__scrollwrap {
	background-color: rgba(255, 255, 255, .08);
	border: 1px solid rgba(233, 233, 236, .14);
}

.md-search__form:hover {
	background-color: rgba(255, 255, 255, .14);
}

.md-search__scrollwrap {
	width: 100%;
	background-color: var(--hr-navy);
	border-radius: 5px !important;
}

.md-search__input {
	color: #fff !important;
}

.md-search__input::placeholder {
	color: rgba(255, 255, 255, .7);
}

.md-search__icon .md-icon {
	padding-top: -0.1rem !important;
}

/* moving icon on search bar - hack... */
[data-md-toggle="search"]:checked~.md-header .md-search__input:valid~.md-search__options>.md-icon {
	margin-top: -10px !important;
}

[data-md-toggle="search"]:checked~.md-header .md-search__form {
	background-color: var(--hr-navy) !important;
	color: #fff !important;
}

[data-md-toggle="search"]:checked~.md-header .md-search__input+.md-search__icon {
	color: #fff !important;
}

.md-search-result__meta {
	background-color: var(--hr-navy) !important;
	color: #fff !important;
}

.md-search-result .md-typeset {
	color: #fff !important;
	margin-top: 15px;
}

.md-search-result .md-typeset h1,
.md-search-result .md-typeset h2,
.md-search-result .md-typeset p {
	color: #fff !important;
}

.md-search-result__icon::after {
	color: #fff !important;
}

.md-search-result__list:has(li) {
	border-top: 2px solid var(--hr-pink) !important;
	background-color: var(--hr-navy) !important;
}

/* Inline navigation in header ------------------------------------------- */
.md-header__nav {
	display: flex;
	flex: 1;
	justify-content: center;
}

.md-header__nav-items {
	display: flex;
	align-items: center;
}

.md-header__nav-item {
	color: #fff;
	margin: 0 1rem;
	font-size: .8rem;
	font-weight: 500;
	text-decoration: none;
	opacity: .85;
	transition: opacity .2s ease;
}

.md-header__nav-item:hover {
	opacity: 1;
	text-decoration: underline;
	text-decoration-color: #fff;
	text-underline-offset: 4px;
}

/* Logo ------------------------------------------------------------------- */
.md-header__button.md-logo {
	padding: .5rem;
	margin: 0;
}

.md-header__button.md-logo img {
	height: 26px;
	width: 26px;
}

.md-header__button.md-logo.md-header__title-combo {
	display: flex !important;
	align-items: center !important;
	gap: .25rem;
	font-size: 1.2rem;
	font-weight: 500;
	color: #fff;
	text-decoration: none;
	white-space: nowrap;
}

.md-header__site-title {
	font-family: var(--hr-display);
	font-size: 1.2rem;
	white-space: nowrap;
}

.md-header__site-title-separator {
	display: inline-block;
	width: 1px;
	height: 24px;
	background: rgba(255, 255, 255, .35);
	margin: 0 12px;
	vertical-align: middle;
}

/* ==========================================================================
   4. Sidebars — nav and table of contents
   ========================================================================== */

.md-nav {
	font-size: .7rem;
}

.md-nav__title {
	font-family: var(--hr-display);
	font-size: .66rem;
	text-transform: uppercase;
	letter-spacing: .09em;
	color: var(--hr-muted);
}

.md-nav__link {
	border-radius: 8px;
	padding: .28rem .5rem;
	margin: 0 -.5rem;
	transition: background-color .15s ease, color .15s ease;
}

.md-nav__item .md-nav__link:hover {
	background: var(--hr-surface-sunken);
	color: var(--hr-text);
}

.md-nav__link--active,
.md-nav__link--active:focus,
.md-nav__link--active:hover {
	background: var(--hr-accent-tint);
	color: var(--hr-accent) !important;
	font-weight: 600;
}

/* The sticky section label carries an opaque halo of page background that
   spread over the first item and clipped the top of its pill. The label's own
   background hides items scrolling under it, so drop the halo and space the
   list off the label instead. */
.md-nav--lifted>.md-nav__list>.md-nav__item--active>.md-nav__link {
	box-shadow: none;
	padding-bottom: .35rem;
}

.md-nav--lifted>.md-nav__list>.md-nav__item--active>.md-nav>.md-nav__list>.md-nav__item:first-child {
	margin-top: .1rem;
}

/* Table of contents: a pink marker on the section you're reading */
.md-sidebar--secondary .md-nav__link {
	border-left: 2px solid transparent;
	border-radius: 0 8px 8px 0;
	margin-left: 0;
	padding-left: .6rem;
}

.md-sidebar--secondary .md-nav__link--active {
	border-left-color: var(--hr-accent);
	background: transparent;
}

/* ==========================================================================
   5. Content — code, tables, admonitions, tabs
   ========================================================================== */

.md-content__inner {
	padding-top: 0;
	position: relative;
	overflow: visible;
}

.md-main {
	position: relative;
	overflow: visible;
}

.md-main__inner.md-grid::before,
.md-main::before {
	display: none !important;
}

/* Documentation pages are mostly wide parameter tables, so give the content
   column more room than Material's 61rem default and take it back off the
   table of contents. The front page keeps the default width — the hero is
   laid out for it. Leave the nav labels wrapping instead of ellipsized, since
   the narrower rail would otherwise clip every long tool name. */
.md-main:not(:has(.hero)) .md-main__inner.md-grid {
	max-width: 76rem;
}

.md-main:not(:has(.hero)) .md-sidebar--secondary {
	width: 10.5rem;
}

.md-sidebar--secondary .md-nav__link {
	white-space: normal;
	overflow-wrap: anywhere;
}

/* Inline code ------------------------------------------------------------ */
.md-typeset code {
	word-break: normal;
	border-radius: 6px;
	background: var(--hr-surface-sunken);
	color: var(--hr-text);
	padding: .12em .38em;
	font-size: 14px;
}

/* Code in a heading: the shared 14px shrinks to a chip beside a 36px title,
   and a heading that is all code ends up one long box. Scale with the
   heading and drop the box — the mono face carries the signal on its own. */
.md-typeset h1 code,
.md-typeset h2 code,
.md-typeset h3 code,
.md-typeset h4 code,
.md-typeset h5 code {
	font-size: .88em;
	font-weight: inherit;
	letter-spacing: normal;
	background: transparent;
	color: inherit;
	padding: 0;
}

/* …but code inside a link keeps the link colour */
.md-typeset a code {
	color: var(--hr-accent);
	background: var(--hr-accent-soft);
}

.md-typeset td code,
.md-typeset p code,
.md-typeset li code {
	overflow-wrap: anywhere;
}

/* Code blocks: brand navy, in both schemes — the same surface as the hero */
.md-typeset pre>code,
.md-typeset .highlight pre {
	border-radius: var(--hr-radius-sm);
}

.md-typeset pre>code {
	background: var(--hr-code-bg);
	color: #D7E0F0;
	border: 1px solid var(--hr-code-border);
	padding: .9rem 1rem;
	font-size: 14px;
	line-height: 1.70;
}

.md-typeset .highlight span.filename {
	background: var(--hr-code-bg);
	color: var(--hr-muted);
	border-bottom: 1px solid var(--hr-code-border);
	font-family: var(--hr-display);
	font-size: .68rem;
	letter-spacing: .04em;
}

.md-typeset .highlight code .linenos,
.md-typeset .highlighttable .linenos {
	color: rgba(215, 224, 240, .35);
	background: transparent;
}

.md-clipboard {
	color: rgba(215, 224, 240, .4);
}

.md-clipboard:hover,
:hover>.md-clipboard {
	color: var(--hr-pink);
}

/* The copy button confirms in place — it swaps its own icon for a checkmark
   for a couple of seconds (clipboard.js in docs/clipboard.js), instead of the
   snackbar Material floats in the corner. */
.md-clipboard--copied,
.md-clipboard--copied:hover,
:hover>.md-clipboard--copied {
	--md-clipboard-icon: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M9 16.17 4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"/></svg>');
	color: #4ADE80;
}

.md-dialog {
	display: none;
}

/* Pygments defaults are tuned for a light ground; re-tint for navy */
.md-typeset .highlight {
	/* Cover every Material token category, including GraphQL names and
	   variables, while keeping inline code on the page's normal palette. */
	--md-code-hl-name-color: #D7E0F0;
	--md-code-hl-variable-color: #7FB9FF;
	--md-code-hl-constant-color: #F5C46B;
	--md-code-hl-keyword-color: #FF7AB6;
	--md-code-hl-string-color: #8FE3B0;
	--md-code-hl-special-color: #8FE3B0;
	--md-code-hl-number-color: #F5C46B;
	--md-code-hl-function-color: #C9A6F5;
	--md-code-hl-comment-color: #6D7F9E;
	--md-code-hl-operator-color: #9FB0CC;
	--md-code-hl-punctuation-color: #9FB0CC;
	--md-code-hl-generic-color: #D7E0F0;
}

.md-typeset .highlight .k,
.md-typeset .highlight .kd,
.md-typeset .highlight .kn,
.md-typeset .highlight .kt,
.md-typeset .highlight .ow {
	color: #FF7AB6;
}

.md-typeset .highlight .s,
.md-typeset .highlight .s1,
.md-typeset .highlight .s2,
.md-typeset .highlight .sb,
.md-typeset .highlight .sd,
.md-typeset .highlight .se {
	color: #8FE3B0;
}

.md-typeset .highlight .nt,
.md-typeset .highlight .na {
	color: #7FB9FF;
}

.md-typeset .highlight .m,
.md-typeset .highlight .mi,
.md-typeset .highlight .mf,
.md-typeset .highlight .kc {
	color: #F5C46B;
}

.md-typeset .highlight .nf,
.md-typeset .highlight .nx,
.md-typeset .highlight .nc {
	color: #C9A6F5;
}

.md-typeset .highlight .c,
.md-typeset .highlight .c1,
.md-typeset .highlight .cm {
	color: #6D7F9E;
	font-style: italic;
}

.md-typeset .highlight .p,
.md-typeset .highlight .o {
	color: #9FB0CC;
}

/* Plain-text blocks (no highlighting) may wrap */
.md-typeset pre:not(:has(code span[class])) {
	overflow-x: visible;
	white-space: pre-wrap;
}

.md-typeset pre:not(:has(code span[class])) code {
	white-space: pre-wrap;
	overflow-wrap: break-word;
}

/* Tabbed content: Material's own sliding indicator, in brand pink ---------- */
.js .md-typeset .tabbed-labels::before {
	background: var(--hr-accent);
}

.md-typeset .tabbed-labels>label {
	font-family: var(--hr-display);
	font-size: .7rem;
	font-weight: 600;
}

.md-typeset .tabbed-labels>label:hover {
	color: var(--hr-accent);
}

.md-typeset .tabbed-block>.highlight:first-child>pre>code,
.md-typeset .tabbed-block>pre:first-child>code {
	border-radius: var(--hr-radius-sm);
}

/* Admonitions: border-width is set as a longhand on purpose — border-color is
   left to Material so note / tip / warning keep their own colours. An
   admonition is boxed in its type colour; a collapsible details block, which
   sits closed most of the time, keeps a single rule down its left edge. */
.md-typeset .admonition,
.md-typeset details {
	border-width: 0 0 0 3px;
	border-radius: var(--hr-radius-sm);
	box-shadow: none;
	background-color: var(--hr-surface-sunken);
	font-size: .72rem;
	padding: 0 .9rem;
}

.md-typeset .admonition {
	border-width: 1px;
}

.md-typeset .admonition-title,
.md-typeset summary {
	font-family: var(--hr-display);
	font-weight: 600;
	letter-spacing: -.005em;
	margin: 0 -.9rem;
	padding: .45rem .9rem .45rem 2.2rem;
}

/* Tables ----------------------------------------------------------------- */
.md-typeset table:not([class]) {
	border-radius: var(--hr-radius-sm);
	border: 1px solid var(--hr-border);
	box-shadow: none;
	font-size: .74rem;
}

.md-typeset table:not([class]) th {
	background: var(--hr-surface-sunken);
	font-family: var(--hr-display);
	font-weight: 600;
	font-size: .7rem;
	letter-spacing: .02em;
	color: var(--hr-text);
	white-space: nowrap;
}

/* Parameter tables: the name column has to fit an identifier like
   `websiteUuid` on one line, so give it room and let the description — the
   most forgiving column — take the hit. */
.md-typeset table:not([class]) td:first-child,
.md-typeset table:not([class]) th:first-child {
	min-width: 9rem;
}

.md-typeset table:not([class]) td:last-child {
	font-size: .93em;
}

.md-typeset table:not([class]) tr:hover {
	background: var(--hr-accent-soft);
}

/* Blockquote ------------------------------------------------------------- */
.md-typeset blockquote {
	border-left: 3px solid var(--hr-accent);
	color: var(--hr-muted);
}

/* MCP prompt cards ------------------------------------------------------- */
.mcp-intro-actions {
	display: flex;
	margin: 1.2rem 0 2.2rem;
}

.md-typeset .mcp-intro-actions .button {
	display: inline-flex;
	align-items: center;
	gap: .45rem;
	width: auto;
	padding: .5rem 1.1rem;
	font-size: .75rem;
}

/* MCP setup tips --------------------------------------------------------- */
.mcp-setup-tip-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: .8rem;
	margin: 1.2rem 0 2.6rem;
}

.mcp-setup-tip-card {
	display: flex;
	flex-direction: column;
	min-width: 0;
	padding: 1rem;
	border: 1px solid var(--hr-border);
	border-radius: var(--hr-radius);
	background: var(--hr-surface);
	box-shadow: var(--hr-shadow);
}

.mcp-setup-tip-card--wide {
	grid-column: 1 / -1;
}

.mcp-setup-tip-card__heading {
	display: grid;
	grid-template-columns: 38px minmax(0, 1fr);
	gap: .7rem;
	align-items: center;
	margin-bottom: .75rem;
}

.mcp-setup-tip-card__icon {
	display: grid;
	place-items: center;
	width: 38px;
	height: 38px;
	border-radius: var(--hr-radius-sm);
	background: var(--hr-accent-soft);
	color: var(--hr-accent);
}

.mcp-setup-tip-card__icon svg {
	width: 21px;
	height: 21px;
	stroke: currentColor;
	stroke-width: 1.8;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.mcp-setup-tip-card__eyebrow {
	display: block;
	margin-bottom: .08rem;
	color: var(--hr-accent);
	font-size: .62rem;
	font-weight: 700;
	letter-spacing: .06em;
	line-height: 1.2;
	text-transform: uppercase;
}

.md-typeset .mcp-setup-tip-card h3 {
	margin: 0;
	font-size: .92rem;
	line-height: 1.25;
}

.md-typeset .mcp-setup-tip-card>p {
	margin: 0 0 .8rem;
	color: var(--hr-muted);
	font-size: .75rem;
	line-height: 1.5;
}

.mcp-setup-tip-card>.highlight {
	margin-top: auto;
}

.md-typeset .mcp-setup-tip-card pre {
	margin: 0;
}

.md-typeset .mcp-setup-tip-card pre>code {
	padding: .75rem 2.2rem .75rem .85rem;
	font-size: .68rem;
	line-height: 1.55;
}

.mcp-ask-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1rem;
	margin: 1.2rem 0 2.6rem;
}

.mcp-ask-card {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	min-width: 0;
	padding: 1.1rem;
	border: 1px solid var(--hr-border);
	border-radius: var(--hr-radius);
	background: var(--hr-surface);
	box-shadow: var(--hr-shadow);
}

.mcp-ask-card__heading {
	display: grid;
	grid-template-columns: 42px minmax(0, 1fr);
	gap: .75rem;
	align-items: center;
}

.mcp-ask-card__icon {
	display: grid;
	place-items: center;
	width: 42px;
	height: 42px;
	border-radius: var(--hr-radius-sm);
	background: var(--hr-accent-soft);
	color: var(--hr-accent);
}

.mcp-ask-card__icon svg {
	width: 23px;
	height: 23px;
	stroke: currentColor;
	stroke-width: 1.8;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.md-typeset .mcp-ask-card h3 {
	margin: 0 0 .15rem;
	font-size: 1rem;
	line-height: 1.25;
}

.md-typeset .mcp-ask-card__heading p {
	margin: 0;
	color: var(--hr-muted);
	font-size: .76rem;
	line-height: 1.4;
}

.mcp-prompt-list {
	display: grid;
	gap: .6rem;
}

.mcp-prompt {
	padding: .7rem .75rem;
	border: 1px solid var(--hr-border);
	border-radius: var(--hr-radius-sm);
	background: var(--hr-surface-sunken);
	transition: border-color .2s ease, transform .2s ease;
}

.mcp-prompt:hover {
	border-color: var(--hr-border-strong);
	transform: translateY(-1px);
}

.mcp-prompt__question {
	display: block;
	color: var(--hr-text);
	font-size: .78rem;
	font-weight: 600;
	line-height: 1.42;
}

.mcp-prompt__tools {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .25rem;
	margin-top: .35rem;
	font-size: .68rem;
	font-weight: 600;
}

.md-typeset .mcp-prompt__tools a::after {
	content: " →";
}

/* ==========================================================================
   6. Front page
   ========================================================================== */

/* The navy field behind the hero. It bleeds past the content column via a
   negative-inset ::before, clipped vertically by the hero's own clip-path, so
   the band is always exactly as tall as the hero — no fixed height to keep in
   sync with the content. */
.hero::before {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: -100vmax;
	right: -100vmax;
	z-index: -2;
	background:
		radial-gradient(900px 420px at 62% -8%, rgba(231, 5, 111, .38), transparent 62%),
		radial-gradient(720px 400px at 22% 108%, rgba(161, 59, 161, .32), transparent 60%),
		#071939;
}

/* A faint grid over the navy — reads as a plotting surface, not decoration */
.hero::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	background-image:
		linear-gradient(rgba(255, 255, 255, .05) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255, 255, 255, .05) 1px, transparent 1px);
	background-size: 72px 72px;
	mask-image: radial-gradient(900px 500px at 50% 20%, #000 20%, transparent 85%);
	-webkit-mask-image: radial-gradient(900px 500px at 50% 20%, #000 20%, transparent 85%);
}

.homepage .md-header {
	background: transparent;
	box-shadow: none;
	position: relative;
}

/* Hero layout ------------------------------------------------------------ */
.hero {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.02fr);
	gap: 3rem;
	/* Top, not centre: the tab panels stack all four cards in one cell, so the
	   row is as tall as the tallest (PHP). Centring pushed the copy ~160px down
	   whenever a shorter tab was active. */
	align-items: start;
	padding: 3.2rem 0 3.6rem;
	position: relative;
	min-width: 0;
}

/* The hero's background bleeds past the content column with negative insets,
   which would otherwise widen the page. overflow-x: clip on the full-width
   ancestor trims it at the viewport edge; unlike `hidden` it does not turn
   .md-main into a scroll container, so sticky positioning still works. */
.md-main:has(.hero) {
	overflow-x: clip;
}

/* Material's default gap between header and content would show as a white
   strip above the hero's navy field */
.md-main:has(.hero) .md-main__inner {
	margin-top: 0;
}

/* Material's .4rem spacer pseudo-element, which would show as a white sliver */
.md-main:has(.hero) .md-content__inner::before {
	display: none;
}

/* Grid children default to min-width:auto, so the wide code card would
   otherwise push the whole page sideways on narrow screens. */
.hero__copy,
.hero__demo {
	min-width: 0;
}

.md-typeset .hero__eyebrow {
	font-family: var(--hr-display);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .10em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, .55);
	margin: 0 0 1rem;
	display: flex;
	align-items: center;
	gap: .6rem;
}

.md-typeset .hero__eyebrow::before {
	content: "";
	width: 28px;
	height: 1px;
	background: var(--hr-pink);
}

.md-typeset .hero h1 {
	font-family: var(--hr-display);
	color: #fff;
	/* Fluid so a 13" laptop gets a headline that fits the column instead of
	   breaking into orphaned single words. */
	font-size: clamp(2.5rem, 2.12vw + 1.1rem, 3.05rem);
	line-height: 1.06;
	letter-spacing: -.035em;
	font-weight: 700;
	margin: 0 0 1.1rem;
	/* Even out the remaining lines rather than filling each one to the edge */
	text-wrap: balance;
}

.md-typeset .hero h1 .developer-highlight {
	color: var(--hr-pink);
}

.md-typeset .hero__lead {
	color: rgba(255, 255, 255, .74);
	font-size: 18px;
	line-height: 1.55;
	max-width: 30rem;
	margin: 0 0 1.8rem;
}

.hero-buttons {
	display: flex;
	gap: .8rem;
	margin: 0;
	flex-wrap: wrap;
}

.button {
	padding: .62rem 1.5rem;
	border-radius: 999px;
	text-decoration: none;
	font-family: var(--hr-display);
	font-weight: 600;
	font-size: .8rem;
	transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease, border-color .2s ease;
}

.button.primary {
	background-color: var(--hr-pink);
	color: #fff;
}

.button.primary:hover {
	background-color: var(--hr-pink-deep);
	color: #fff;
	text-decoration: none;
}

.button.secondary {
	background-color: rgba(255, 255, 255, .1);
	color: #fff;
	border: 1.5px solid rgba(255, 255, 255, .28);
}

.button.secondary:hover {
	background-color: rgba(255, 255, 255, .18);
	border-color: rgba(255, 255, 255, .45);
	text-decoration: none;
	color: #fff;
}

.button:hover {
	transform: translateY(-2px);
	box-shadow: 0 10px 24px -10px rgba(0, 0, 0, .55);
}

/* One tab per solution, on plain radios so the card works without JavaScript */
.hero-tabs>input {
	position: absolute;
	width: 1px;
	height: 1px;
	opacity: 0;
	pointer-events: none;
}

.hero-tabs__labels {
	display: flex;
	flex-wrap: wrap;
	gap: .3rem;
	margin-bottom: .7rem;
}

.hero-tabs__labels label {
	font-family: var(--hr-display);
	font-size: .68rem;
	font-weight: 600;
	color: rgba(255, 255, 255, .55);
	padding: .3rem .85rem;
	border-radius: 999px;
	cursor: pointer;
	transition: color .15s ease, background-color .15s ease;
}

.hero-tabs__labels label:hover {
	color: #fff;
	background: rgba(255, 255, 255, .08);
}

.hero-tabs__panels {
	display: grid;
}

/* Every card shares one grid cell, so switching tabs never changes the
   hero's height; align-self keeps a short card from stretching to fill it. */
.hero-tabs__panels>.reqcard {
	grid-area: 1 / 1;
	align-self: start;
	visibility: hidden;
}

.hero-tabs>input:nth-of-type(1):checked~.hero-tabs__labels label:nth-of-type(1),
.hero-tabs>input:nth-of-type(2):checked~.hero-tabs__labels label:nth-of-type(2),
.hero-tabs>input:nth-of-type(3):checked~.hero-tabs__labels label:nth-of-type(3),
.hero-tabs>input:nth-of-type(4):checked~.hero-tabs__labels label:nth-of-type(4) {
	background: var(--hr-pink);
	color: #fff;
}

.hero-tabs>input:nth-of-type(1):checked~.hero-tabs__panels>.reqcard:nth-of-type(1),
.hero-tabs>input:nth-of-type(2):checked~.hero-tabs__panels>.reqcard:nth-of-type(2),
.hero-tabs>input:nth-of-type(3):checked~.hero-tabs__panels>.reqcard:nth-of-type(3),
.hero-tabs>input:nth-of-type(4):checked~.hero-tabs__panels>.reqcard:nth-of-type(4) {
	visibility: visible;
}

.hero-tabs>input:nth-of-type(1):focus-visible~.hero-tabs__labels label:nth-of-type(1),
.hero-tabs>input:nth-of-type(2):focus-visible~.hero-tabs__labels label:nth-of-type(2),
.hero-tabs>input:nth-of-type(3):focus-visible~.hero-tabs__labels label:nth-of-type(3),
.hero-tabs>input:nth-of-type(4):focus-visible~.hero-tabs__labels label:nth-of-type(4) {
	outline: 2px solid #fff;
	outline-offset: 2px;
}

/* Signature element: a real request and its response, side by side with the
   headline. Every payload is copied from that solution's API reference. */
.reqcard {
	border-radius: var(--hr-radius);
	background: rgba(3, 11, 26, .72);
	border: 1px solid rgba(255, 255, 255, .12);
	box-shadow: 0 40px 80px -40px rgba(0, 0, 0, .8);
	backdrop-filter: blur(6px);
	overflow: hidden;
}

.reqcard__bar {
	display: flex;
	align-items: center;
	gap: .7rem;
	padding: .6rem .9rem;
	border-bottom: 1px solid rgba(255, 255, 255, .1);
	background: rgba(255, 255, 255, .03);
}

.reqcard__method {
	font-family: var(--hr-display);
	font-size: .6rem;
	font-weight: 700;
	letter-spacing: .1em;
	color: #fff;
	background: var(--hr-pink);
	border-radius: 4px;
	padding: .12rem .4rem;
}

.md-typeset .reqcard__path {
	font-family: var(--md-code-font-family, monospace);
	font-size: .68rem;
	color: rgba(255, 255, 255, .62);
	margin: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.md-typeset .reqcard pre {
	margin: 0;
}

.md-typeset .reqcard pre code {
	background: transparent;
	border: 0;
	border-radius: 0;
	padding: .85rem 1rem;
	font-size: .67rem;
	line-height: 1.6;
	color: #C3D0E6;
}

.reqcard__status {
	display: flex;
	align-items: center;
	gap: .5rem;
	padding: .45rem .9rem;
	border-top: 1px solid rgba(255, 255, 255, .1);
	border-bottom: 1px solid rgba(255, 255, 255, .1);
	background: rgba(255, 255, 255, .03);
	font-family: var(--hr-display);
	font-size: .62rem;
	letter-spacing: .06em;
	color: rgba(255, 255, 255, .55);
}

.reqcard__dot {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: #3FD68A;
	box-shadow: 0 0 0 3px rgba(63, 214, 138, .18);
}

/* Section headings on the front page ------------------------------------- */
.md-typeset .section-heading {
	font-family: var(--hr-display);
	font-size: 1.45rem;
	font-weight: 700;
	letter-spacing: -.02em;
	border-top: 0;
	padding-top: 0;
	margin: 3.6rem 0 .4rem;
}

.md-typeset .section-sub {
	color: var(--hr-muted);
	margin: 0 0 1.6rem;
	font-size: 18px;
	line-height: 1.55;
}

/* Entry cards ------------------------------------------------------------ */
.main-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 1rem;
	margin: 3rem 0 0;
}

.grid-item,
.product-item {
	background: var(--hr-surface);
	border: 1px solid var(--hr-border);
	border-radius: var(--hr-radius);
	box-shadow: var(--hr-shadow);
	position: relative;
	transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}

.grid-item {
	display: flex;
	flex-direction: column;
	padding: 1.4rem;
}

.grid-item .learn-more {
	margin-top: auto;
}

.grid-item:hover,
.product-item:hover {
	transform: translateY(-3px);
	border-color: var(--hr-accent);
	box-shadow: var(--hr-shadow-lift);
}

.grid-item a.grid-link,
.product-item a.product-link {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	z-index: 1;
}

.grid-item a.learn-more,
.product-item a.learn-more {
	position: relative;
	z-index: 2;
}

.md-typeset .grid-item h2 {
	font-size: 1.05rem !important;
	font-weight: 600 !important;
	margin: .9rem 0 .4rem;
	padding-top: 0;
	border-top: 0;
	color: var(--hr-text) !important;
}

.md-typeset .grid-item p,
.md-typeset .product-item p {
	color: var(--hr-muted);
	font-size: .76rem;
	line-height: 1.6;
	margin: 0 0 .8rem;
}

.learn-more {
	color: var(--hr-accent);
	text-decoration: none;
	font-family: var(--hr-display);
	font-weight: 600;
	font-size: .76rem;
	display: inline-block;
}

/* Solution grid ---------------------------------------------------------- */
.product-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 1rem;
	padding: 0;
}

.product-grid.centered {
	grid-template-columns: repeat(2, 1fr);
	max-width: 800px;
	margin: 2rem auto;
	justify-items: center;
}

.product-item {
	display: grid;
	grid-template-columns: 52px 1fr;
	align-items: stretch;
	gap: 1.1rem;
	padding: 1.3rem;
}

.product-item .icon {
	align-self: start;
}

.product-item .product-content {
	display: flex;
	flex-direction: column;
}

.product-item .learn-more {
	margin-top: auto;
}

.md-typeset .product-item h3 {
	font-size: 1rem;
	font-weight: 600;
	color: var(--hr-text);
	margin: 0 0 .35rem;
}

.product-item h3,
.product-item p,
.product-item .icon {
	position: relative;
}

/* Icons: a tinted chip rather than a bare black glyph -------------------- */
.icon {
	width: 52px;
	height: 52px;
	border-radius: 12px;
	background: var(--hr-accent-soft);
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0;
	transition: background-color .22s ease;
}

.icon svg {
	width: 24px;
	height: 24px;
	transition: fill .22s ease;
}

.icon svg :is(path, rect, circle, ellipse, polygon, polyline, line) {
	fill: var(--hr-accent) !important;
}

.grid-item:hover .icon,
.product-item:hover .icon {
	background: var(--hr-accent);
}

.grid-item:hover .icon svg :is(path, rect, circle, ellipse, polygon, polyline, line),
.product-item:hover .icon svg :is(path, rect, circle, ellipse, polygon, polyline, line) {
	fill: #fff !important;
}

.icon img {
	width: 24px;
	height: 24px;
}

/* ==========================================================================
   7. Footer
   ========================================================================== */

.md-footer {
	background-color: var(--md-footer-bg-color);
	margin-top: 4rem;
	border-top: 0;
}

.md-footer-meta {
	background-color: var(--md-footer-bg-color--dark);
	padding: 1rem 0;
}

.md-footer-meta__inner.md-grid {
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 100%;
}

.md-footer-meta.md-typeset {
	border-top: 1px solid var(--hr-border);
}

.md-copyright {
	width: 100%;
	color: var(--hr-muted);
	text-align: center;
}

.md-copyright__highlight {
	color: var(--hr-muted);
	font-size: .9rem;
}

.md-footer__inner.md-grid {
	display: none;
}

.footer-links-list li {
	color: var(--md-footer-fg-color--light);
	list-style: none;
}

.footer-links-list li a:hover {
	color: var(--hr-accent) !important;
}

/* My Hello Retail menu item */
.my-hello-retail span {
	font-family: 'Pacifico', cursive;
	font-size: .9em;
	margin-right: .2em;
}

.my-hello-retail {
	display: flex;
	align-items: center;
}

/* ==========================================================================
   8. Accessibility floor
   ========================================================================== */

.md-typeset a:focus-visible,
.button:focus-visible,
.md-nav__link:focus-visible {
	outline: 2px solid var(--hr-accent);
	outline-offset: 3px;
	border-radius: 4px;
}

@media (prefers-reduced-motion: reduce) {

	.button:hover,
	.grid-item:hover,
	.product-item:hover,
	.mcp-prompt:hover {
		transform: none;
	}

	* {
		animation-duration: .01ms !important;
		transition-duration: .01ms !important;
	}
}

/* ==========================================================================
   9. Breakpoints
   ========================================================================== */

/* Laptop widths: the code card holds its shape, so give the extra room to
   the headline column instead of splitting the row down the middle. */
@media screen and (min-width: 1101px) and (max-width: 1440px) {
	.hero {
		grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr);
		gap: 2.4rem;
	}
}

@media screen and (max-width: 1100px) {
	.hero {
		grid-template-columns: 1fr;
		gap: 2rem;
		padding-top: 2.4rem;
	}
}

@media screen and (max-width: 768px) {

	.md-header__site-title,
	.md-header__site-title-separator {
		display: none !important;
	}

	.md-header__nav {
		display: none !important;
	}

	.md-header__button.md-icon {
		margin-left: auto;
		margin-right: 0;
		display: flex;
		justify-content: flex-end;
	}

	.footer-links-list {
		flex-direction: column !important;
		align-items: center !important;
		gap: 0 !important;
	}

	.footer-links-list li {
		margin-bottom: 8px;
		text-align: center;
	}

	.footer-links-list li:nth-child(2n) {
		display: none !important;
	}

	.header-height {
		background-image: none !important;
	}

	.md-search__form,
	.md-search__scrollwrap {
		border-radius: 0 !important;
	}

	.md-logo {
		display: inline-flex !important;
		align-items: center;
	}

	.md-typeset .hero h1 {
		font-size: 2.25rem;
	}

	.md-typeset h1 {
		font-size: 1.7rem;
	}

	.hero-buttons {
		flex-direction: column;
	}

	.button {
		width: 100%;
		text-align: center;
	}

	.main-grid,
	.product-grid,
	.mcp-setup-tip-grid,
	.mcp-ask-grid {
		grid-template-columns: 1fr;
	}

	.mcp-setup-tip-card--wide {
		grid-column: auto;
	}
}

@media screen and (min-width: 768px) {

	.md-search,
	.md-search__form {
		border-radius: 30px;
	}

	.md-header__site-title {
		font-size: 1.2rem;
	}
}

@media screen and (min-width: 76.25em) {
	[data-md-toggle="search"]:checked~.md-header .md-search__inner {
		width: 11.7rem;
	}
}

@media screen and (max-width: 992px) {
	.product-grid {
		grid-template-columns: repeat(2, 1fr);
	}

	.product-grid.centered {
		grid-template-columns: repeat(2, 1fr);
		max-width: none;
	}
}

@media screen and (max-width: 576px) {

	.product-grid,
	.product-grid.centered {
		grid-template-columns: 1fr;
		max-width: none;
	}
}

@media screen and (min-width: 769px) {
	.footer-links-list {
		display: flex !important;
		flex-direction: row !important;
		align-items: center !important;
		justify-content: center !important;
		gap: 12px !important;
	}

	.footer-links-list li {
		margin-bottom: 0 !important;
		display: list-item !important;
	}

	.footer-links-list li:last-child {
		color: var(--md-footer-fg-color--light);
		float: right !important;
		list-style: none;
	}
}