/* ============================================================================
   Cloudhouse Docs: the shared theme for every section (front door, Guardian
   Essentials and Classic, Alchemy Public, Partners and Private).

   Brand: a white page with navy headings and green accents, navy only in the
   header and hero bands; Open Sans throughout. Dark mode (Material's slate
   scheme) follows the reader's setting. Every colour is a token below; nothing
   further down names a hex value except the brand constants.
   ========================================================================= */

:root {
  /* Brand constants */
  --ch-navy: #0D2839;
  --ch-navy-2: #12324A;
  --ch-green: #3BD481;
  --ch-green-deep: #0B6B3A;
  --ch-orange: #FF751F;

  /* Light scheme */
  --ch-page: #FFFFFF;
  --ch-surface: #F6F8F9;
  --ch-surface-2: #EEF2F4;
  --ch-text: #303030;
  --ch-heading: #0D2839;
  --ch-muted: #5C6B70;
  --ch-border: #DDE4E6;
  --ch-link: #0B6B3A;
  --ch-accent-bg: #E9F8F0;
  --ch-focus: #3BD481;
  --ch-shadow: 0 1px 2px rgba(13, 40, 57, .06), 0 4px 16px rgba(13, 40, 57, .06);
  --ch-shadow-hover: 0 2px 4px rgba(13, 40, 57, .08), 0 10px 28px rgba(13, 40, 57, .10);
  --ch-ea-bg: #FFF4EA;
  --ch-ea-border: #F5C49A;
  --ch-ea-text: #7A3A00;
  --ch-ea-pill: #FFE9D6;
  --ch-warn-bg: #FFF7EE;
  --ch-info-bg: #EEF7FB;
  --ch-info: #0077A8;
  --ch-danger: #C2352B;
  --ch-radius: .6rem;
  --ch-font: "Open Sans", "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif;
}

[data-md-color-scheme="slate"] {
  --ch-page: #071822;
  --ch-surface: #0B2231;
  --ch-surface-2: #10304A;
  --ch-text: #DCE6EA;
  --ch-heading: #F2F7F8;
  --ch-muted: #A9BBC2;
  --ch-border: #1E4256;
  --ch-link: #3BD481;
  --ch-accent-bg: #10392F;
  --ch-shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 4px 16px rgba(0, 0, 0, .25);
  --ch-shadow-hover: 0 2px 4px rgba(0, 0, 0, .35), 0 10px 28px rgba(0, 0, 0, .35);
  --ch-ea-bg: #3A2A1C;
  --ch-ea-border: #7A4B22;
  --ch-ea-text: #FFB37A;
  --ch-ea-pill: #3A2A1C;
  --ch-warn-bg: #2E2418;
  --ch-info-bg: #0E2A3A;
  --ch-info: #5CC4F0;
  --ch-danger: #FF7A70;
}

/* Map onto Material's variables so its own components follow. */
:root, [data-md-color-scheme="default"], [data-md-color-scheme="slate"] {
  --md-default-bg-color: var(--ch-page);
  --md-default-fg-color: var(--ch-text);
  --md-default-fg-color--light: var(--ch-muted);
  --md-default-fg-color--lighter: var(--ch-border);
  --md-default-fg-color--lightest: var(--ch-surface-2);
  --md-typeset-color: var(--ch-text);
  --md-typeset-a-color: var(--ch-link);
  --md-primary-fg-color: var(--ch-navy);
  --md-primary-fg-color--dark: var(--ch-navy);
  --md-primary-bg-color: #FFFFFF;
  --md-accent-fg-color: var(--ch-green);
  --md-footer-bg-color: var(--ch-surface);
  --md-footer-fg-color: var(--ch-muted);
  --md-code-bg-color: var(--ch-surface);
  --md-code-fg-color: var(--ch-text);
  --md-text-font: var(--ch-font);
}

body { font-family: var(--ch-font); -webkit-font-smoothing: antialiased; }
:focus-visible { outline: 2px solid var(--ch-focus); outline-offset: 2px; }

/* ── Header ─────────────────────────────────────────────────────────────── */
.md-header { background: var(--ch-navy); color: #FFFFFF; box-shadow: none; border-bottom: 1px solid rgba(255, 255, 255, .08); }
.md-header__inner { gap: .4rem; height: 3.2rem; }
.md-logo img { height: .95rem !important; width: auto; }
.ch-sitename {
  color: #FFFFFF !important; font-weight: 700; font-size: .9rem; white-space: nowrap; margin: 0 .8rem 0 .2rem;
  padding-left: .7rem; border-left: 1px solid rgba(255, 255, 255, .25);
}
/* Product switcher: quiet text tabs, the current product marked by a green
   rule along the bottom of the header rather than a filled pill. */
.ch-products { display: flex; gap: .4rem; align-self: stretch; }
.ch-products a {
  display: flex; align-items: center; padding: 0 .5rem; border-bottom: 2px solid transparent; margin-bottom: -1px;
  color: rgba(255, 255, 255, .72) !important; font-size: .7rem; font-weight: 600; transition: color .15s, border-color .15s;
}
.ch-products a:hover { color: #FFFFFF !important; border-bottom-color: rgba(255, 255, 255, .3); }
.ch-products a[aria-current] { color: #FFFFFF !important; border-bottom-color: var(--ch-green); }
.ch-spacer, .md-header__inner > .md-header__title + * { flex: 1 1 auto; }
.md-header__inner > .ch-products { flex: 1 1 auto; }
.md-search__form { background: rgba(255, 255, 255, .08); border-radius: 999px; transition: background-color .15s; }
.md-search__form:hover { background: rgba(255, 255, 255, .14); }
.md-search__input::placeholder { color: #C3D2D8; }
[data-md-toggle="search"]:checked ~ .md-header .md-search__form { border-radius: .6rem .6rem 0 0; background: var(--ch-page); }
@media screen and (max-width: 59.984em) {
  .ch-products { display: none; }
}

/* ── Breadcrumbs and section switcher ────────────────────────────────────── */
.ch-pathbar { background: var(--ch-surface); border-bottom: 1px solid var(--ch-border); font-size: .65rem; }
.ch-pathbar__inner { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; padding: .45rem .8rem; }
.ch-crumbs { display: flex; flex-wrap: wrap; gap: .35rem; color: var(--ch-muted); flex: 1 1 auto; }
.ch-crumbs a { color: var(--ch-muted); }
.ch-crumbs a:hover { color: var(--ch-link); }
.ch-crumbs__here { color: var(--ch-heading); font-weight: 600; }
.ch-switch { display: inline-flex; align-items: center; gap: .15rem; padding: .15rem; border-radius: 999px; background: var(--ch-page); border: 1px solid var(--ch-border); }
.ch-switch__label { padding: 0 .4rem 0 .5rem; color: var(--ch-muted); font-weight: 600; }
.ch-switch a {
  display: inline-flex; align-items: center; gap: .25rem; padding: .2rem .65rem; border-radius: 999px;
  color: var(--ch-text); font-weight: 600;
}
.ch-switch a:hover { color: var(--ch-link); background: var(--ch-surface); }
.ch-switch a[aria-current] { background: var(--ch-accent-bg); color: var(--ch-link); }
.ch-switch svg { opacity: .7; }

/* ── Sidebar ─────────────────────────────────────────────────────────────── */
.md-nav { font-size: .7rem; }
.md-sidebar--primary .md-nav__title { display: none; }
.md-nav__link { border-radius: .4rem; padding: .25rem .5rem; margin-top: .1rem; transition: color .1s, background-color .1s; }
.md-nav__link:hover { color: var(--ch-link); }
.md-nav__item .md-nav__link--active, .md-nav__item--active > .md-nav__link { color: var(--ch-heading); font-weight: 700; }
.md-sidebar--primary a.md-nav__link--active { background: var(--ch-accent-bg); box-shadow: inset 3px 0 0 var(--ch-green); }
/* A section with its own page renders a link inside a container that is also
   a .md-nav__link; without this the padding doubles and the row is indented. */
.md-nav__container > .md-nav__link { padding: .25rem .5rem; margin-top: 0; }
.md-nav__container { padding: 0 !important; flex-wrap: nowrap; }
.md-nav__container > a.md-nav__link { flex: 1 1 auto; min-width: 0; }
.md-nav .md-status { display: none; }
.md-sidebar--secondary .md-nav__title { color: var(--ch-muted); font-weight: 700; font-size: .62rem; text-transform: uppercase; letter-spacing: .06em; background: none; box-shadow: none; }
.md-sidebar--secondary .md-nav__link--active { box-shadow: inset 2px 0 0 var(--ch-green); border-radius: 0; }

/* Early access in the nav: a small orange dot after the title. The sidebar is
   too narrow for a text pill beside a title; the page itself carries the
   Early access banner and label, and the dot has a tooltip and hidden text. */
.ch-nav-badge {
  flex: 0 0 auto; width: .4rem; height: .4rem; margin-left: .35rem; border-radius: 50%;
  background: var(--ch-orange); box-shadow: 0 0 0 2px var(--ch-ea-pill);
}
.ch-nav-badge span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
a.md-nav__link:has(.ch-nav-badge) { align-items: center; }

/* ── Page typography ─────────────────────────────────────────────────────── */
.md-main__inner { margin-top: 1rem; }
.md-content__inner { margin-bottom: 2.5rem; }
.md-typeset { font-size: .8rem; line-height: 1.7; }
.md-typeset h1, .md-typeset h2, .md-typeset h3, .md-typeset h4, .md-typeset h5 { color: var(--ch-heading); font-weight: 700; letter-spacing: -.01em; }
.md-typeset h1 { font-size: 1.8rem; line-height: 1.2; margin: 0 0 .7rem; letter-spacing: -.02em; }
.md-typeset h2 { font-size: 1.2rem; line-height: 1.3; margin-top: 2.2rem; }
.md-typeset h3 { font-size: .95rem; margin-top: 1.6rem; }
.md-typeset h4 { font-size: .85rem; }
.md-typeset .headerlink { color: var(--ch-muted); }
.md-typeset p, .md-typeset ul, .md-typeset ol, .md-typeset dl { max-width: 42rem; }
.md-typeset a { color: var(--ch-link); text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--ch-link) 35%, transparent); text-underline-offset: .15em; }
.md-typeset a:hover { color: var(--ch-heading); text-decoration-color: currentColor; }
.md-typeset .ch-lead { font-size: 1rem; line-height: 1.6; color: var(--ch-text); margin-top: 0; }
.md-typeset hr { border-bottom: 1px solid var(--ch-border); }
.md-typeset ol > li::marker { color: var(--ch-link); font-weight: 700; }
.md-typeset dt { color: var(--ch-heading); font-weight: 700; }
.md-typeset kbd { background: var(--ch-surface); color: var(--ch-heading); box-shadow: 0 0 0 1px var(--ch-border), 0 2px 0 var(--ch-border); }
.md-typeset code { border-radius: .3rem; }
.md-typeset pre > code { border-radius: var(--ch-radius); border: 1px solid var(--ch-border); }

.ch-eyebrow { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; margin: .2rem 0 .3rem; font-size: .62rem; }
.ch-kind { font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ch-link); font-size: .62rem; margin: 0; }
.ch-meta { color: var(--ch-muted); }
/* Copy as Markdown / View Markdown, at the end of the eyebrow line. */
.ch-md { margin-left: auto; display: inline-flex; gap: .5rem; align-items: center; }
.ch-md__copy, .ch-md__view { font: inherit; font-size: .62rem; font-weight: 600; color: var(--ch-link); background: none; border: 1px solid var(--ch-border); border-radius: 999px; padding: .15rem .6rem; cursor: pointer; text-decoration: none; }
.ch-md__copy:hover, .ch-md__view:hover, .ch-md__copy:focus-visible, .ch-md__view:focus-visible { border-color: var(--ch-link); }
.ch-md__copy[data-state="done"] { color: var(--ch-heading); }
@media print { .ch-md { display: none; } }

/* "Was this page helpful?" at the end of every page. */
.ch-feedback { margin: 2.4rem 0 .5rem; padding: .9rem 1rem; border: 1px solid var(--ch-border); border-radius: var(--ch-radius); background: var(--ch-surface); font-size: .72rem; }
.ch-feedback__q { margin: 0 0 .5rem; font-weight: 700; color: var(--ch-heading); }
.ch-feedback__vote { display: flex; gap: .5rem; }
.ch-feedback button { font: inherit; font-weight: 600; color: var(--ch-link); background: none; border: 1px solid var(--ch-border); border-radius: 999px; padding: .2rem .9rem; cursor: pointer; }
.ch-feedback button:hover, .ch-feedback button:focus-visible { border-color: var(--ch-link); }
.ch-feedback button[aria-pressed="true"] { background: var(--ch-link); border-color: var(--ch-link); color: var(--md-default-bg-color); }
.ch-feedback__more { margin-top: .8rem; display: grid; gap: .45rem; }
.ch-feedback__more label { font-weight: 600; color: var(--ch-heading); }
.ch-feedback__more textarea { font: inherit; width: 100%; box-sizing: border-box; padding: .5rem .6rem; border: 1px solid var(--ch-border); border-radius: .4rem; background: var(--md-default-bg-color); color: var(--md-typeset-color); resize: vertical; }
.ch-feedback__more button[type="submit"] { justify-self: start; }
.ch-feedback__note { margin: 0; color: var(--ch-muted); }
.ch-feedback__hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.ch-feedback__thanks { margin: .6rem 0 0; color: var(--ch-heading); }
@media print { .ch-feedback { display: none; } }
.ch-pill--ea { font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--ch-ea-text); background: var(--ch-ea-pill); padding: .1rem .45rem; border-radius: 999px; }

/* Early access banner. */
.ch-ea {
  display: flex; gap: .7rem; padding: .8rem .9rem; margin: 0 0 .6rem; border-radius: var(--ch-radius);
  background: var(--ch-ea-bg); border: 1px solid var(--ch-ea-border); border-left: 5px solid var(--ch-orange);
  font-size: .75rem; line-height: 1.5;
}
.ch-ea svg { flex: 0 0 auto; color: var(--ch-orange); }
.ch-ea p { margin: 0; }
.ch-ea strong { color: var(--ch-heading); }

/* "Applies to" chips: a paragraph with the .ch-applies class. */
.md-typeset .ch-applies { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; font-size: .65rem; color: var(--ch-muted); }
.md-typeset .ch-applies code {
  font-family: var(--ch-font); font-size: .62rem; font-weight: 600; color: var(--ch-heading);
  background: var(--ch-surface); border: 1px solid var(--ch-border); border-radius: 999px; padding: .1rem .55rem;
}

/* ── Callouts ────────────────────────────────────────────────────────────────
   Admonitions, and the Flare conversions' callout paragraphs (p.callout--note,
   --tip, --warning, --important, --caution), share one look: a tinted panel
   with a coloured rule. */
.md-typeset .admonition, .md-typeset details, .md-typeset p.callout {
  border: 1px solid var(--ch-border) !important; border-left: 4px solid var(--ch-green) !important;
  border-radius: var(--ch-radius); box-shadow: none; font-size: .76rem; background: var(--ch-surface);
}
.md-typeset p.callout { padding: .7rem .9rem; max-width: 42rem; }
.md-typeset .admonition-title, .md-typeset summary { background: transparent !important; color: var(--ch-heading); font-weight: 700; }
.md-typeset .admonition-title::before, .md-typeset summary::before { background-color: var(--ch-link) !important; }
.md-typeset .admonition.warning, .md-typeset .admonition.danger, .md-typeset p.callout--warning, .md-typeset p.callout--caution,
.md-typeset p.callout--important { border-left-color: var(--ch-orange) !important; background: var(--ch-warn-bg); }
.md-typeset .admonition.warning > .admonition-title::before { background-color: var(--ch-orange) !important; }
.md-typeset .admonition.info, .md-typeset details.info, .md-typeset p.callout--tip { border-left-color: var(--ch-info) !important; background: var(--ch-info-bg); }
.md-typeset .admonition.info > .admonition-title::before, .md-typeset details.info > summary::before { background-color: var(--ch-info) !important; }
.md-typeset .note, .md-typeset .note-green { border-left: 4px solid var(--ch-green); background: var(--ch-surface); padding: .6rem .9rem; border-radius: var(--ch-radius); }
.md-typeset p.callout img, .md-typeset .admonition img { max-width: 100%; }

/* Flare badges (highlight-round*), as pills. */
.md-typeset [class^="highlight-round"] {
  display: inline-block; padding: .1rem .55rem; border-radius: 999px; font-size: .62rem !important; font-weight: 700;
  letter-spacing: .03em; background: var(--ch-surface-2); color: var(--ch-heading);
}
.md-typeset .highlight-round-red { background: color-mix(in srgb, var(--ch-danger) 14%, transparent); color: var(--ch-danger); }
.md-typeset .highlight-round-green { background: var(--ch-accent-bg); color: var(--ch-link); }
.md-typeset .highlight-round-blue { background: var(--ch-info-bg); color: var(--ch-info); }
.md-typeset .highlight-round-black { background: var(--ch-heading); color: var(--ch-page); }

/* ── Tables ──────────────────────────────────────────────────────────────────
   One look for every table, including the Flare conversions' per-table styles
   (table.ts-*), which this theme deliberately flattens. */
.md-typeset .ch-table-scroll { overflow-x: auto; margin: 1em 0; }
.md-typeset table:not([class]), .md-typeset table[class*="ts-"] {
  display: table; width: 100%; font-size: .72rem; border: 1px solid var(--ch-border); border-radius: var(--ch-radius);
  border-collapse: separate; border-spacing: 0; overflow: hidden; box-shadow: none; background: var(--ch-page);
}
.md-typeset table:not([class]) th, .md-typeset table[class*="ts-"] th {
  background: var(--ch-navy); color: #FFFFFF; font-weight: 700; text-align: left; padding: .6rem .8rem; border: 0;
}
[data-md-color-scheme="slate"] .md-typeset table:not([class]) th, [data-md-color-scheme="slate"] .md-typeset table[class*="ts-"] th { background: var(--ch-surface-2); }
.md-typeset table:not([class]) td, .md-typeset table[class*="ts-"] td { border: 0; border-top: 1px solid var(--ch-border); padding: .55rem .8rem; vertical-align: top; }
.md-typeset table:not([class]) tbody tr:hover, .md-typeset table[class*="ts-"] tbody tr:hover { background: var(--ch-surface); }
.md-typeset table[class*="ts-"] td p, .md-typeset table[class*="ts-"] th p { margin: .2em 0; }

/* ── Images ──────────────────────────────────────────────────────────────── */
.md-typeset img { border-radius: .35rem; }
.md-typeset img.ch-shot { border: 1px solid var(--ch-border); border-radius: var(--ch-radius); box-shadow: var(--ch-shadow); }
.md-typeset figure { margin: 1.4rem 0; }
.md-typeset figcaption { font-size: .65rem; color: var(--ch-muted); max-width: none; margin-top: .5rem; }

/* ── Tiles ───────────────────────────────────────────────────────────────────
   A list of links inside <div class="ch-tiles">. Each link has an optional
   <em> eyebrow, a <strong> title and a line of description. */
.md-typeset .ch-tiles ul { list-style: none; margin: 1rem 0 1.6rem; padding: 0; margin-left: 0 !important; display: grid; gap: .8rem; max-width: none;
  grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr)); }
.md-typeset .ch-tiles li { margin: 0; }
.md-typeset .ch-tiles li > a {
  display: flex; flex-direction: column; height: 100%; padding: .95rem 1.05rem; border: 1px solid var(--ch-border); border-radius: .75rem;
  color: var(--ch-muted); text-decoration: none; background: var(--ch-page); font-size: .72rem; line-height: 1.5;
  transition: border-color .15s, box-shadow .15s, transform .15s;
}
.md-typeset .ch-tiles li > a:hover { border-color: var(--ch-green); box-shadow: var(--ch-shadow-hover); transform: translateY(-2px); color: var(--ch-muted); }
.md-typeset .ch-tiles li > a strong { display: block; color: var(--ch-heading); font-size: .86rem; margin-bottom: .2rem; }
.md-typeset .ch-tiles li > a em { font-style: normal; font-size: .56rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--ch-link); display: block; margin-bottom: .35rem; }
.md-typeset .ch-tiles--compact ul { grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); }

/* ── Section home (Alchemy, Guardian Classic) ────────────────────────────── */
.ch-section-home .ch-hero { padding: .6rem 0 .4rem; }
.ch-section-home h1 { margin-bottom: .4rem; }
.ch-section-home .ch-kind { margin-bottom: .5rem; }
.ch-cta {
  display: inline-flex; align-items: center; gap: .8rem; margin-top: .6rem; padding: .7rem 1rem; border-radius: .75rem;
  background: var(--ch-navy); color: #FFFFFF !important; text-decoration: none !important; box-shadow: var(--ch-shadow);
  transition: transform .15s, box-shadow .15s;
}
.ch-cta:hover { transform: translateY(-2px); box-shadow: var(--ch-shadow-hover); }
.ch-cta__eyebrow { font-size: .58rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--ch-green); }
.ch-cta__title { font-weight: 700; }
.ch-section-home .ch-tiles li > a { min-height: 4.2rem; justify-content: center; }

/* Hero band on Guardian Essentials' Markdown home. */
.md-typeset .ch-hero { padding: .8rem 0 .4rem; }
.md-typeset .ch-hero h1 { margin-bottom: .3rem; }

/* ── Front door ──────────────────────────────────────────────────────────── */
.ch-door-hero {
  background:
    radial-gradient(60rem 22rem at 85% -20%, rgba(59, 212, 129, .22), transparent 60%),
    radial-gradient(40rem 18rem at 0% 120%, rgba(0, 181, 248, .12), transparent 60%),
    linear-gradient(180deg, var(--ch-navy) 0%, var(--ch-navy-2) 100%);
  color: #FFFFFF;
}
.ch-door-hero__inner { padding: 3.2rem .8rem 3.2rem; }
.ch-door-hero__eyebrow { margin: 0 0 .6rem; font-size: .65rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ch-green); }
.ch-door-hero h1 { margin: 0; font-size: 2.4rem; font-weight: 700; letter-spacing: -.025em; line-height: 1.1; color: #FFFFFF; }
.ch-door-hero__lead { margin: .8rem 0 0; max-width: 34rem; font-size: .95rem; line-height: 1.6; color: #C3D2D8; }
.ch-door .md-typeset, .md-typeset.ch-door { max-width: none; }
.md-content:has(.ch-door) .md-content__inner { margin-top: .4rem; }
.md-content:has(.ch-door) .md-content__inner > .md-content__button { display: none; }

/* Product cards. Each card spans four rows of the grid and shares them with
   its neighbour (subgrid), so the product names, headings, descriptions and
   link lists line up across the cards whatever their text lengths. */
.md-typeset .ch-products-grid {
  display: grid; gap: 0 1.2rem; grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr)); margin-bottom: 2.4rem;
}
.md-typeset .ch-product {
  position: relative; display: grid; grid-row: span 4; grid-template-rows: subgrid; row-gap: 0; align-content: start;
  padding: 1.5rem 1.5rem 1.3rem; margin-bottom: 1.2rem; border-radius: 1rem; background: var(--ch-page);
  border: 1px solid var(--ch-border); box-shadow: var(--ch-shadow); overflow: hidden;
}
.md-typeset .ch-product::before { content: ""; position: absolute; inset: 0 0 auto; height: 4px; background: var(--ch-green); }
.md-typeset .ch-product--packaging::before { background: linear-gradient(90deg, #8546F8, #00B5F8); }
.md-typeset .ch-product__name { margin: 0 0 .35rem; font-size: .62rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ch-link); }
.md-typeset .ch-product--packaging .ch-product__name { color: #8546F8; }
[data-md-color-scheme="slate"] .md-typeset .ch-product--packaging .ch-product__name { color: #B794FF; }
.md-typeset .ch-product h3 { margin: 0 0 .5rem; font-size: 1.15rem; line-height: 1.3; align-self: start; }
.md-typeset .ch-product > p:not(.ch-product__name) { margin: 0 0 1.1rem; color: var(--ch-muted); }

/* The links: one list of equal rows, title and description on the left, a
   sign-in tag and an arrow on the right. */
.md-typeset .ch-product__links { display: flex; flex-direction: column; border: 1px solid var(--ch-border); border-radius: .7rem; overflow: hidden; align-self: start; }
.md-typeset .ch-product__links p { display: contents; }
.md-typeset .ch-product__links a, .md-typeset .ch-product__links .ch-product__soon {
  display: grid; grid-template-columns: 1fr auto auto; grid-template-rows: auto auto; column-gap: .6rem; align-items: center;
  padding: .7rem .9rem; color: var(--ch-muted); text-decoration: none; font-size: .7rem; line-height: 1.4;
  border-top: 1px solid var(--ch-border); transition: background-color .15s;
}
.md-typeset .ch-product__links a:first-child { border-top: 0; }
.md-typeset .ch-product__links a::after { content: "→"; grid-column: 3; grid-row: 1 / span 2; color: var(--ch-muted); transition: transform .15s, color .15s; }
.md-typeset .ch-product__links a:hover { background: var(--ch-surface); }
.md-typeset .ch-product__links a:hover::after { color: var(--ch-link); transform: translateX(3px); }
.md-typeset .ch-product__links .ch-product__soon strong { grid-column: 1; grid-row: 1; color: var(--ch-muted); font-size: .8rem; }
.md-typeset .ch-product__links a strong { grid-column: 1; grid-row: 1; color: var(--ch-heading); font-size: .8rem; }
.md-typeset .ch-product__links .ch-desc { grid-column: 1; grid-row: 2; }
.md-typeset .ch-product__links .ch-lock { grid-column: 2; grid-row: 1 / span 2; }
.md-typeset .ch-product__links a.ch-product__primary { background: var(--ch-accent-bg); }
.md-typeset .ch-product__links a.ch-product__primary strong { color: var(--ch-link); }
.md-typeset .ch-lock {
  display: inline-block; padding: .05rem .45rem; border-radius: 999px; background: var(--ch-surface-2);
  color: var(--ch-muted); font-size: .55rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; white-space: nowrap;
}

/* ── Footer ──────────────────────────────────────────────────────────────── */
.ch-footer { background: var(--ch-surface); color: var(--ch-muted); border-top: 1px solid var(--ch-border); }
.ch-footer__inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .8rem 1.4rem; padding: 1.1rem .8rem; font-size: .62rem; }
.ch-footer__brand { display: flex; align-items: center; gap: .8rem; }
.ch-footer__brand img { height: .85rem; width: auto; }
.ch-footer__links { display: flex; flex-wrap: wrap; gap: 1rem; }
.ch-footer__links a { color: var(--ch-muted); }
.ch-footer__links a:hover { color: var(--ch-link); }
.ch-footer__sha { font-family: var(--md-code-font-family, monospace); opacity: .7; }

/* ── Motion ──────────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .md-typeset .ch-tiles li > a, .ch-cta, .ch-products a, .md-nav__link { transition: none; }
  .md-typeset .ch-tiles li > a:hover, .ch-cta:hover { transform: none; }
}

/* Keep the switcher on the right of a long breadcrumb trail on wide screens;
   the trail wraps within its own space instead. */
@media screen and (min-width: 60em) {
  .ch-pathbar__inner { flex-wrap: nowrap; }
  .ch-crumbs { min-width: 0; }
  .ch-switch { flex: 0 0 auto; margin-left: auto; }
}

/* Tiles sit flush with the heading above them (Material indents list items). */
.md-typeset .ch-tiles li { margin-left: 0 !important; }
/* The front door's tile sets are six and three: three columns keeps rows full. */
@media screen and (min-width: 60em) {
  .md-typeset.ch-door .ch-tiles ul { grid-template-columns: repeat(3, 1fr); }
}

/* Front door on a phone: a smaller hero so the product cards show on the first screen. */
@media screen and (max-width: 44.984em) {
  .ch-door-hero__inner { padding: 1.8rem .8rem 2.6rem; }
  .ch-door-hero h1 { font-size: 1.7rem; }
  .ch-door-hero__lead { font-size: .8rem; }
}

/* Numbered steps without numbers in the source: a step heading carries the
   ch-step class ({ #anchor .ch-step }) and the theme counts them, so adding or
   reordering a step never means renumbering headings or anchors. */
.md-typeset { counter-reset: ch-step; }
.md-typeset h2.ch-step { display: flex; align-items: baseline; gap: .6rem; }
.md-typeset h2.ch-step::before {
  counter-increment: ch-step; content: counter(ch-step);
  flex: none; align-self: center; display: inline-grid; place-items: center;
  width: 1.6rem; height: 1.6rem; border-radius: 50%;
  background: var(--ch-green); color: var(--ch-navy, #0D2839);
  font-size: .8rem; font-weight: 700; line-height: 1;
}
.md-typeset h2.ch-step .headerlink { margin-left: 0; }
/* A product with docs on the way: listed in its family's card, not linked. */
.md-typeset .ch-lock--soon { background: transparent; border: 1px dashed var(--ch-border); color: var(--ch-muted); }

/* ── Product banner ──────────────────────────────────────────────────────────
   Navy with the template's green glow, the product mark large and faint on the
   right (as on the template's product slides), and the mark and name on the
   left. Navy in both colour schemes, so it reads as part of the header. */
.ch-banner {
  position: relative; overflow: hidden; color: #FFFFFF;
  background: var(--ch-navy) var(--ch-banner-art) right center / cover no-repeat;
  border-top: 1px solid rgba(255, 255, 255, .06);
}
.ch-banner__watermark {
  position: absolute; right: 6%; top: 50%; height: 260%; width: auto;
  transform: translateY(-46%); opacity: .18; pointer-events: none;
}
.ch-banner__inner {
  position: relative; display: grid; grid-template-columns: auto 1fr; column-gap: .75rem; align-items: center;
  padding: 1rem .8rem;
}
.ch-banner__mark { width: 2.2rem; height: 2.2rem; object-fit: contain; grid-row: 1 / span 2; }
.ch-banner__name { margin: 0; display: flex; flex-wrap: wrap; align-items: baseline; column-gap: .45rem; line-height: 1.15; }
.ch-banner__product { font-size: 1.15rem; font-weight: 700; letter-spacing: -.01em; }
.ch-banner__edition { font-size: 1.15rem; font-weight: 400; color: #C3D2D8; }
.ch-banner__lead { grid-column: 2; margin: .3rem 0 0; max-width: 36rem; font-size: .72rem; line-height: 1.5; color: #C3D2D8; }
.ch-banner--home .ch-banner__inner { padding-block: 1.8rem 2rem; }
.ch-banner--home .ch-banner__mark { width: 3rem; height: 3rem; }
.ch-banner--home .ch-banner__product, .ch-banner--home .ch-banner__edition { font-size: 1.5rem; }
@media screen and (max-width: 44.984375em) {
  .ch-banner__inner { padding-block: .7rem; }
  .ch-banner__mark { width: 1.7rem; height: 1.7rem; }
  .ch-banner__product, .ch-banner__edition { font-size: .95rem; }
  .ch-banner--home .ch-banner__product, .ch-banner--home .ch-banner__edition { font-size: 1.15rem; }
  .ch-banner__watermark { right: -8%; }
}