/*
  Andy Kemp Docs: the shared Andy Kemp look, as www, downloads, tools and demos.
  Dark strip, header and footer (warm charcoal); a cream reading area with white cards; brushed copper accents;
  Archivo headings over Inter body. Material's own variables are pointed at these tokens.
*/
@font-face { font-family: Archivo; src: url("../fonts/Archivo-Bold.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: Archivo; src: url("../fonts/Archivo-ExtraBold.woff2") format("woff2"); font-weight: 800; font-display: swap; }

:root {
  /* Cream reading area */
  --akc-bg: #f6f1ea;
  --akc-bg-soft: #efe7dc;
  --akc-panel: #ffffff;
  --akc-panel-raised: #fbf8f4;
  --akc-text: #3d3630;
  --akc-heading: #1c1917;
  --akc-muted: #5f564e;
  --akc-border: #e0d3c2;
  --akc-border-soft: #e6dccf;
  --akc-border-strong: #c9a684;
  --akc-copper: #8a4e1f;
  --akc-copper-dark: #5e3312;
  --akc-shadow-hover: 0 12px 32px rgba(28, 25, 23, 0.08);

  /* Dark bands: strip, header, hero, footer */
  --akc-ink: #141210;
  --akc-ink-deep: #0d0b0a;
  --akc-ink-panel: #1e1a17;
  --akc-ink-border: #3a2c21;
  --akc-ink-border-soft: #2a241f;
  --akc-ink-border-strong: #6b4426;
  --akc-cream: #f6f1ea;
  --akc-cream-text: #cfc4b6;
  --akc-cream-muted: #b5aa9c;
  --akc-copper-glow: #e0a16a;
  --akc-copper-pale: #f3c08f;
  --akc-sheen: linear-gradient(100deg, #9c5a26 0%, #d8915a 30%, #f6c79a 48%, #c47a3e 66%, #8e4f1f 100%);
  --akc-button: linear-gradient(180deg, #c98448 0%, #a8622c 100%);
  --akc-button-hover: linear-gradient(180deg, #d6935a 0%, #b56e36 100%);

  --akc-display: Archivo, Inter, "Segoe UI", system-ui, sans-serif;
  --md-text-font: Inter, Aptos, "Segoe UI", system-ui, -apple-system, sans-serif;
  --md-code-font: "Cascadia Code", Consolas, "SF Mono", Menlo, monospace;
}

/* Material reads these from the scheme; "primary: custom" leaves them to us. */
:root,
[data-md-color-scheme="default"] {
  --md-primary-fg-color: var(--akc-ink);
  --md-primary-fg-color--light: var(--akc-ink-panel);
  --md-primary-fg-color--dark: var(--akc-ink-deep);
  --md-primary-bg-color: var(--akc-cream);
  --md-primary-bg-color--light: var(--akc-cream-muted);
  --md-accent-fg-color: var(--akc-copper);
  --md-accent-fg-color--transparent: rgba(138, 78, 31, 0.1);
  --md-default-fg-color: var(--akc-text);
  --md-default-fg-color--light: var(--akc-muted);
  --md-default-fg-color--lighter: #8f8478;
  --md-default-bg-color: var(--akc-bg);
  --md-typeset-color: var(--akc-text);
  --md-typeset-a-color: var(--akc-copper);
  --md-code-bg-color: #f1e9df;
  --md-code-fg-color: var(--akc-heading);
  --md-footer-bg-color: var(--akc-ink-deep);
  --md-footer-bg-color--dark: var(--akc-ink-deep);
  --md-footer-fg-color: var(--akc-cream);
  --md-footer-fg-color--light: var(--akc-cream-muted);
  --md-footer-fg-color--lighter: var(--akc-cream-muted);
  color-scheme: light;
}

body {
  font-family: var(--md-text-font);
  -webkit-font-smoothing: antialiased;
  background: var(--akc-bg);
}
::selection { background: color-mix(in srgb, #c47a3e 30%, transparent); }
:focus-visible { outline: 2px solid var(--akc-copper); outline-offset: 2px; }

/* Screen-reader-only text, e.g. "(opens in a new tab)" in the sites strip and drawer */
.md-visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ── The Andy Kemp sites strip (dark), the same on every site ───────────────────────────────── */
.akc-strip { display: none; background: var(--akc-ink-deep); border-bottom: 1px solid var(--akc-ink-border-soft); font-size: 13px; line-height: 1; font-family: var(--md-text-font); }
.akc-strip-inner { max-width: 1240px; margin: 0 auto; padding: 0 24px; height: 34px; display: flex; align-items: center; justify-content: space-between; }
.akc-strip-name { color: var(--akc-cream-muted); }
.akc-strip nav { display: flex; gap: 20px; }
.akc-strip a { color: var(--akc-cream-muted); }
.akc-strip a:hover, .akc-strip a:focus { color: var(--akc-copper-pale); }
.akc-strip a[aria-current="page"] { color: var(--akc-copper-pale); font-weight: 600; }
.akc-strip :focus-visible { outline-color: var(--akc-copper-pale); }
@media screen and (min-width: 768px) { .akc-strip { display: block; } }

/* ── Header: dark, with the AK Docs logo ──────────────────────────────────────────────────────── */
.md-header {
  background: rgba(20, 18, 16, 0.96);
  color: var(--akc-cream);
  border-bottom: 1px solid var(--akc-ink-border-soft);
  box-shadow: none;
  backdrop-filter: blur(8px);
}
.md-header--shadow { box-shadow: 0 2px 16px rgba(0, 0, 0, 0.25); }
.md-header :focus-visible { outline-color: var(--akc-copper-pale); }
.md-header__inner.md-grid { max-width: 1240px; height: 84px; padding: 0 24px; gap: 0; }
.md-header__button.md-logo { margin: 0 12px 0 0; padding: 0; }
.md-header__button.md-logo img, .md-header__button.md-logo svg { height: 40px; width: auto; }
.md-header__button:not(.md-logo):hover, .md-header__button.md-logo:hover { opacity: 0.85; }
/* The logo says "Andy Kemp Docs", so the site name isn't repeated beside it; the page title still shows on scroll. */
.md-header__topic:first-child,
.md-header__title--active .md-header__topic:first-child { opacity: 0; pointer-events: none; }
.md-header__title { color: var(--akc-cream); font-weight: 600; }
.md-header .md-icon, .md-header__button { color: var(--akc-copper-pale); }
.md-source { color: var(--akc-cream-text); }
.md-source:hover { color: var(--akc-copper-pale); }
.md-source__repository { font-weight: 500; }

/* Book Discovery Call; the guides menu itself is the shared tools-style menu at the end of this file */
.akc-book { display: none; flex: 0 0 auto; margin-left: 10px; background-image: var(--akc-button); color: #fff8f0 !important; font-weight: 700; font-size: 14px; padding: 11px 18px; border-radius: 10px; white-space: nowrap; }
.akc-book:hover { background-image: var(--akc-button-hover); }
@media screen and (min-width: 600px) { .akc-book { display: inline-block; } }
@media screen and (min-width: 76.25em) {
  /* The title area is just a spacer here; the page title would crowd the menu */
  .md-header__title { visibility: hidden; flex: 1 1 0; min-width: 0; margin: 0; }
  /* Search is an icon, as space is taken by the menu; it opens a search box over the right of the header */
  .md-header__button[for="__search"] { display: block; }
  [data-md-toggle="search"]:not(:checked) ~ .md-header .md-search { display: none; }
  [data-md-toggle="search"]:checked ~ .md-header .md-search { position: absolute; right: 24px; top: 50%; transform: translateY(-50%); }
  [data-md-toggle="search"]:checked ~ .md-header .md-search__inner { width: 30rem; }
  .md-header__inner.md-grid { position: relative; }
  [data-md-toggle="search"]:checked ~ .md-header .md-header__button[for="__search"] { visibility: hidden; }
}

/* Search: a dark field in the header, light results */
.md-search__form { background: var(--akc-ink-panel); border: 1px solid var(--akc-ink-border); border-radius: 10px; }
.md-search__form:hover { background: #241f1b; }
.md-search__input { color: var(--akc-cream); }
.md-search__input::placeholder { color: var(--akc-cream-muted); }
.md-search__icon[for="__search"], .md-search__icon { color: var(--akc-copper-pale); }
@media screen and (min-width: 60em) {
  [data-md-toggle="search"]:checked ~ .md-header .md-search__form { background: #ffffff; border-color: var(--akc-border); border-radius: 10px 10px 0 0; }
  [data-md-toggle="search"]:checked ~ .md-header .md-search__input { color: var(--akc-heading); }
  [data-md-toggle="search"]:checked ~ .md-header .md-search__input::placeholder { color: var(--akc-muted); }
  [data-md-toggle="search"]:checked ~ .md-header .md-search__icon { color: var(--akc-copper); }
}
.md-search__output { border-radius: 0 0 10px 10px; }
.md-search-result__meta { background: var(--akc-bg-soft); color: var(--akc-muted); }
.md-search-result mark { color: var(--akc-copper); }

/* Phones: menu button on the right, as on the other sites; the drawer ends with the Andy Kemp sites. */
@media screen and (max-width: 76.2344em) {
  .md-header__button.md-logo { display: block; }
  .md-header__button[for="__drawer"] { order: 10; margin-right: -8px; }
  .md-header__button.md-logo img { height: 36px; }
  .md-nav--primary .md-nav__title { background: var(--akc-ink); color: var(--akc-cream); }
  .md-nav--primary .md-nav__title .md-nav__button.md-logo img { height: 36px; width: auto; }
  .md-nav__source { background: var(--akc-ink-panel); color: var(--akc-cream-text); }
}
.akc-drawer-sites { margin: 12px 12px 0; padding: 12px 8px 16px; border-top: 1px solid var(--akc-border); font-size: 14px; }
.akc-drawer-sites p { margin: 0 0 4px; font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--akc-muted); }
.akc-drawer-sites ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 20px; }
.akc-drawer-sites a { display: inline-block; padding: 6px 0; color: var(--akc-muted); }
.akc-drawer-sites a[aria-current="page"] { color: var(--akc-copper); font-weight: 600; }
@media screen and (min-width: 76.25em) { .akc-drawer-sites { display: none; } }

/* ── Navigation (on cream) ────────────────────────────────────────────────────────────────────── */
.md-nav { font-size: 0.72rem; }
.md-nav__link { color: var(--akc-text); }
.md-nav__link:hover, .md-nav__link:focus { color: var(--akc-copper); }
.md-nav__link--active, .md-nav__item--active > .md-nav__link { color: var(--akc-copper); font-weight: 600; }
@media screen and (min-width: 76.25em) {
  .md-nav--primary > .md-nav__title { display: none; }
  .md-nav--primary > .md-nav__list > .md-nav__item > .md-nav__link { font-weight: 600; color: var(--akc-heading); padding: 0.35rem 0; }
  .md-nav--primary > .md-nav__list > .md-nav__item { border-bottom: 1px solid var(--akc-border-soft); padding: 0.15rem 0; }
  .md-nav--primary .md-nav__item .md-nav .md-nav__link--active { border-left: 2px solid #c47a3e; margin-left: -0.6rem; padding-left: calc(0.6rem - 2px); }
}
.md-nav--secondary .md-nav__title { color: var(--akc-muted); font-size: 0.6rem; letter-spacing: 0.12em; text-transform: uppercase; background: transparent; box-shadow: none; }
.md-path { color: var(--akc-muted); }

/* ── Content ──────────────────────────────────────────────────────────────────────────────────── */
.md-typeset { font-size: 0.8rem; line-height: 1.7; }
.md-typeset h1, .md-typeset h2, .md-typeset h3, .md-typeset h4 { font-family: var(--akc-display); color: var(--akc-heading); font-weight: 700; letter-spacing: -0.01em; }
.md-typeset h1 { font-weight: 800; letter-spacing: -0.025em; line-height: 1.05; margin-bottom: 1rem; }
.md-typeset h2 { border-top: 1px solid var(--akc-border); padding-top: 1.2rem; margin-top: 2rem; }
.md-typeset h1 + h2, .md-typeset .tools-heading { border-top: 0; padding-top: 0; }
.md-typeset a { text-decoration: underline; text-decoration-color: var(--akc-border-strong); text-underline-offset: 2px; }
.md-typeset a:hover { color: var(--akc-copper-dark); text-decoration-color: currentColor; }
.md-typeset .headerlink { text-decoration: none; color: var(--akc-border-strong); }
.md-typeset .headerlink:hover { color: var(--akc-copper); }
.md-typeset code { border-radius: 4px; padding: 0.05em 0.35em; }
/* Code blocks: dark, like the code panels on the other sites */
.md-typeset pre > code { background: var(--akc-ink); color: var(--akc-cream); border-radius: 10px; }
.md-typeset .highlight { --md-code-hl-keyword-color: #e0a16a; --md-code-hl-string-color: #a9d8a9; --md-code-hl-function-color: #f3c08f; --md-code-hl-name-color: #f6f1ea; --md-code-hl-variable-color: #f3c08f; --md-code-hl-comment-color: #8f8478; --md-code-hl-number-color: #e8b6a0; --md-code-hl-operator-color: #cfc4b6; --md-code-hl-punctuation-color: #cfc4b6; --md-code-hl-constant-color: #e0a16a; --md-code-hl-generic-color: #cfc4b6; }
.md-typeset .highlight .md-clipboard { color: var(--akc-cream-muted); }
.md-typeset .highlight .md-clipboard:hover { color: var(--akc-copper-pale); }
.md-typeset table:not([class]) { border: 1px solid var(--akc-border); border-radius: 10px; box-shadow: none; font-size: 0.72rem; background: var(--akc-panel); }
.md-typeset table:not([class]) th { background: var(--akc-bg-soft); color: var(--akc-heading); font-weight: 600; }
.md-typeset table:not([class]) td { border-top: 1px solid var(--akc-border-soft); }
.md-typeset table:not([class]) tr:hover { background: var(--akc-panel-raised); box-shadow: none; }
.md-typeset hr { border-bottom: 1px solid var(--akc-border); }

/* Small mono label above a heading, as on the other sites */
.md-typeset .eyebrow { display: block; font-family: var(--md-code-font); font-size: 0.58rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--akc-copper); margin: 0 0 0.4rem; }

/* Admonitions: "note", "info" and "tip" in copper; warnings and dangers keep Material's colours. */
.md-typeset .admonition, .md-typeset details { border-radius: 10px; box-shadow: none; font-size: 0.75rem; background: var(--akc-panel); }
.md-typeset .admonition.note, .md-typeset details.note,
.md-typeset .admonition.info, .md-typeset details.info,
.md-typeset .admonition.tip, .md-typeset details.tip { border-color: #c47a3e; background: var(--akc-panel); }
.md-typeset .note > .admonition-title, .md-typeset .note > summary,
.md-typeset .info > .admonition-title, .md-typeset .info > summary,
.md-typeset .tip > .admonition-title, .md-typeset .tip > summary { background: rgba(196, 122, 62, 0.1); }
.md-typeset .note > .admonition-title::before, .md-typeset .note > summary::before,
.md-typeset .info > .admonition-title::before, .md-typeset .info > summary::before,
.md-typeset .tip > .admonition-title::before, .md-typeset .tip > summary::before { background-color: var(--akc-copper); }

/* ── Buttons: copper gradient primary, outlined secondary ────────────────────────────────────── */
.md-typeset .md-button { border: 1px solid var(--akc-border-strong); border-radius: 10px; color: var(--akc-copper); font-weight: 600; font-size: 0.72rem; padding: 0.6em 1.3em; text-decoration: none; transition: transform 0.25s ease, background-color 0.25s ease; }
.md-typeset .md-button:hover, .md-typeset .md-button:focus { background: var(--akc-panel-raised); border-color: #c47a3e; color: var(--akc-copper-dark); transform: translateY(-1px); }
.md-typeset .md-button--primary { background-image: var(--akc-button); border: 0; padding: calc(0.6em + 1px) calc(1.3em + 1px); color: #fff8f0; box-shadow: none; }
.md-typeset .md-button--primary:hover, .md-typeset .md-button--primary:focus { background-image: var(--akc-button-hover); color: #fff8f0; }
.md-typeset .md-button .twemoji { margin-right: 0.3em; }

/* ── Home page hero: a dark band with Atlas ──────────────────────────────────────────────────── */
/* Full-width dark band, as the downloads hero: the shadow paints the band edge to edge, the clip trims it to the band. */
.md-typeset .hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 260px;
  gap: 40px;
  align-items: center;
  margin: var(--akc-hero-pull, -2.5rem) 0 2.8rem;
  padding: 80px 0 72px;
  background: var(--akc-ink);
  color: var(--akc-cream-text);
  box-shadow: 0 0 0 100vmax var(--akc-ink);
  clip-path: inset(0 -100vmax);
}
.md-typeset .hero .eyebrow { font-size: 12px; color: #d8915a; }
.md-typeset .hero h1 { font-size: clamp(40px, 5vw, 72px); line-height: 0.98; letter-spacing: -0.03em; margin: 0 0 22px; color: var(--akc-cream); }
.md-typeset .hero h1 .copper { background: var(--akc-sheen); -webkit-background-clip: text; background-clip: text; color: transparent; }
.md-typeset .hero .hero-subtitle { font-size: 19px; line-height: 1.55; color: var(--akc-cream-text); margin: 0 0 12px; max-width: 600px; }
.md-typeset .hero .hero-tagline { font-size: 16px; color: var(--akc-cream-muted); margin: 0 0 28px; max-width: 600px; }
.md-typeset .hero .hero-buttons { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.md-typeset .hero .hero-buttons .md-button { margin: 0; }
.md-typeset .hero .md-button:not(.md-button--primary) { border-color: var(--akc-ink-border-strong); color: var(--akc-cream); }
.md-typeset .hero .md-button:not(.md-button--primary):hover, .md-typeset .hero .md-button:not(.md-button--primary):focus { background: var(--akc-ink-panel); border-color: #c47a3e; color: var(--akc-copper-pale); }
.md-typeset .hero :focus-visible { outline-color: var(--akc-copper-pale); }
.md-typeset .hero .hero-atlas { width: 100%; height: auto; margin: 0; filter: drop-shadow(0 24px 36px rgba(0, 0, 0, 0.4)); }

/* ── Tool cards on the home page (white on cream) ────────────────────────────────────────────── */
.md-typeset .tools-heading { font-size: 1.5rem; font-weight: 800; margin: 0 0 0.3rem; }
.md-typeset .tools-lead { color: var(--akc-muted); margin: 0 0 1.2rem; }
.md-typeset .tool-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: 1rem; margin: 0 0 2rem; }
.md-typeset .tool-card { display: flex; flex-direction: column; padding: 1.2rem 1.3rem 1.3rem; background: var(--akc-panel); border: 1px solid var(--akc-border); border-radius: 16px; box-shadow: 0 1px 2px rgba(28, 25, 23, 0.04); transition: box-shadow 0.3s ease, transform 0.3s ease, border-color 0.3s ease; }
.md-typeset .tool-card:hover { box-shadow: var(--akc-shadow-hover); border-color: var(--akc-border-strong); transform: translateY(-2px); }
.md-typeset .tool-card h3 { margin: 0.3rem 0 0.4rem; font-size: 1rem; font-weight: 800; border: 0; padding: 0; }
.md-typeset .tool-card h3 .twemoji, .md-typeset .tool-card h3 .twemoji svg { color: #c47a3e; fill: currentColor; }
.md-typeset .tool-card p { color: var(--akc-muted); font-size: 0.72rem; margin: 0 0 0.9rem; }
.md-typeset .tool-card p:last-child { margin: auto 0 0; }
.md-typeset .tool-card .tag { display: inline-block; font-size: 0.55rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--akc-copper); background: #f6e2cf; border-radius: 6px; padding: 0.15rem 0.5rem; margin: 0; align-self: flex-start; }
.md-typeset .tool-card.legacy { background: var(--akc-bg-soft); box-shadow: none; }
.md-typeset .home-footer { text-align: center; color: var(--akc-muted); font-size: 0.75rem; margin-top: 1rem; }

.md-top { background: var(--akc-ink); color: var(--akc-copper-pale); border: 1px solid var(--akc-ink-border); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2); }
.md-top:hover { background: #a8622c; color: #fff8f0; }

/* ── Footer: Material's previous/next links, then the shared Andy Kemp Consulting footer (all dark) ── */
.md-footer { background: var(--akc-ink-deep); color: var(--akc-cream); border-top: 2px solid #a8622c; }
.md-footer :focus-visible { outline-color: var(--akc-copper-pale); }
.md-footer__inner { border-bottom: 1px solid var(--akc-ink-border-soft); }
.md-footer__link { color: var(--akc-cream); }
.md-footer__link:hover { color: var(--akc-copper-pale); }
.md-footer__direction { color: var(--akc-cream-muted); }
.akc-footer { background: var(--akc-ink-deep); color: var(--akc-cream-muted); font-size: 0.7rem; line-height: 1.6; }
.akc-footer__grid { display: grid; grid-template-columns: 1.4fr repeat(5, 1fr); gap: 1.6rem; padding: 2.8rem 0.8rem 1.6rem; }
.akc-footer__logo { height: 2.7rem; width: auto; display: block; }
.akc-footer p { margin: 0.8rem 0 0; max-width: 20rem; }
.akc-footer h2 { font-family: var(--akc-display); font-size: 0.75rem; font-weight: 700; color: var(--akc-copper-pale); margin: 0 0 0.7rem; }
.akc-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.4rem; }
.akc-footer a { color: var(--akc-cream-text); }
.akc-footer a:hover { color: var(--akc-copper-pale); }
.akc-footer .akc-footer__contact { margin-top: 0.8rem; }
.akc-footer .akc-footer__cta { display: inline-block; margin-top: 0.8rem; padding: 0.55rem 1.05rem; border-radius: 0.5rem; background-image: var(--akc-button); color: #fff8f0; font-weight: 600; }
.akc-footer .akc-footer__cta:hover { background-image: var(--akc-button-hover); color: #fff8f0; }
.akc-footer .akc-footer__mvp { display: inline-flex; align-items: center; gap: 0.4rem; white-space: nowrap; padding: 0.3rem 0.65rem; border: 1px solid var(--akc-ink-border); border-radius: 999px; color: var(--akc-cream); font-size: 0.62rem; }
.akc-footer .akc-footer__mvp span { width: 7px; height: 7px; border-radius: 50%; background: #d8915a; }
.akc-footer__legal { display: grid; justify-items: center; text-align: center; gap: 0.35rem; border-top: 1px solid var(--akc-ink-border-soft); padding: 1.2rem 0.8rem 1.6rem; font-size: 0.62rem; }
.akc-footer__legal p { margin: 0; max-width: none; }
.akc-footer__legal .akc-footer__copy { color: var(--akc-cream); font-weight: 700; font-size: 0.7rem; }
.akc-footer__legal nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.2rem 0.9rem; margin-top: 0.2rem; }
.akc-footer__legal nav a { color: var(--akc-cream-muted); }
@media screen and (max-width: 1199px) {
  .akc-footer__grid { grid-template-columns: repeat(5, 1fr); }
  .akc-footer__brand { grid-column: 1 / -1; }
}
@media screen and (max-width: 1000px) { .akc-footer__grid { grid-template-columns: repeat(3, 1fr); } }
@media screen and (max-width: 600px) { .akc-footer__grid { grid-template-columns: 1fr 1fr; gap: 1.4rem 1rem; } }

/* ── Smaller screens ──────────────────────────────────────────────────────────────────────────── */
@media screen and (max-width: 960px) {
  .md-typeset .hero { grid-template-columns: minmax(0, 1fr) 160px; gap: 24px; padding: 56px 0 48px; }
}
@media screen and (max-width: 600px) {
  .md-typeset .hero { grid-template-columns: 1fr; padding: 40px 0 36px; }
  .md-typeset .hero .hero-art { order: -1; text-align: center; }
  .md-typeset .hero .hero-atlas { width: 8rem; margin: 0 auto -0.6rem; }
  .md-typeset .hero h1 { font-size: 1.7rem; }
  .md-typeset .hero .hero-buttons .md-button { flex: 1 1 100%; text-align: center; }
}

@media print {
  .akc-strip, .md-header, .md-footer, .md-sidebar { display: none; }
}

/* ── Home hero (overrides/main.html, block hero): full-width dark band under the header ──────── */
.akc-hero { background: var(--akc-ink); color: var(--akc-cream-text); border-bottom: 1px solid var(--akc-ink-border-soft); font-family: var(--md-text-font); }
.akc-hero__inner.md-grid { max-width: 1240px; padding: 72px 24px 56px; display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: 40px; align-items: center; }
.akc-hero__copy { display: grid; gap: 20px; min-width: 0; }
.akc-hero__eyebrow { margin: 0; font-family: var(--md-code-font); font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: #d8915a; }
.akc-hero h1 { margin: 0; font-family: var(--akc-display); font-weight: 800; font-size: clamp(40px, 5vw, 72px); line-height: 0.98; letter-spacing: -0.03em; color: var(--akc-cream); }
.akc-sheen { background: var(--akc-sheen); -webkit-background-clip: text; background-clip: text; color: transparent; }
.akc-hero__lede { margin: 0; max-width: 600px; font-size: 19px; line-height: 1.55; color: var(--akc-cream-text); }
.akc-hero__actions { display: flex; flex-wrap: wrap; gap: 12px; }
.akc-btn { display: inline-block; padding: 13px 20px; border-radius: 10px; border: 1px solid var(--akc-ink-border-strong); color: var(--akc-cream); font-size: 15px; font-weight: 600; }
.akc-btn:hover, .akc-btn:focus { border-color: #c47a3e; color: var(--akc-copper-pale); background: var(--akc-ink-panel); }
.akc-btn--primary { border: 0; padding: 14px 21px; background-image: var(--akc-button); color: #fff8f0; }
.akc-btn--primary:hover, .akc-btn--primary:focus { background-image: var(--akc-button-hover); color: #fff8f0; }
.akc-hero :focus-visible { outline-color: var(--akc-copper-pale); }
.akc-hero__paths { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 22px; font-size: 14px; }
.akc-hero__paths a { color: var(--akc-cream-muted); }
.akc-hero__paths a::before { content: "→ "; color: #d8915a; }
.akc-hero__paths a:hover { color: var(--akc-copper-pale); }
.akc-hero__atlas { width: 100%; height: auto; filter: drop-shadow(0 24px 36px rgba(0, 0, 0, 0.4)); }
@media screen and (max-width: 960px) { .akc-hero__inner.md-grid { grid-template-columns: minmax(0, 1fr) 160px; gap: 24px; padding: 48px 24px 40px; } }
@media screen and (max-width: 600px) {
  .akc-hero__inner.md-grid { grid-template-columns: 1fr; padding: 32px 20px; }
  .akc-hero__atlas { order: -1; width: 130px; margin: 0 auto -8px; }
  .akc-hero__actions .akc-btn { flex: 1 1 100%; text-align: center; }
}

/* ── Home: area headings and card quick links ─────────────────────────────────────────────────── */
.md-typeset .area-heading { font-family: var(--md-code-font); font-size: 0.58rem; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--akc-copper); margin: 1.6rem 0 0.7rem; border: 0; padding: 0; }
.md-typeset .tools-heading + .tools-lead + .area-heading { margin-top: 0.4rem; }
.md-typeset .tool-grid { margin: 0 0 0.6rem; }
.md-typeset .tool-card .quick-links { display: flex; flex-wrap: wrap; gap: 0.2rem 0.9rem; margin: 0 0 1rem; font-size: 0.68rem; font-weight: 600; }
.md-typeset .tool-card .quick-links a { text-decoration: none; color: var(--akc-copper); }
.md-typeset .tool-card .quick-links a:hover { text-decoration: underline; }

/* ── Left menu grouped by area (navigation.sections), as in the docs mock-up ──────────────────── */
@media screen and (min-width: 76.25em) {
  .md-nav--primary > .md-nav__list > .md-nav__item { border-bottom: 0; padding: 0; }
  .md-nav--primary > .md-nav__list > .md-nav__item--section { margin-top: 1.1rem; }
  .md-nav--primary > .md-nav__list > .md-nav__item--section > .md-nav__link { font-family: var(--md-code-font); font-size: 0.56rem; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: #8f8478; padding: 0 0 0.2rem; }
  .md-nav--primary > .md-nav__list > .md-nav__item--section > .md-nav > .md-nav__list > .md-nav__item > .md-nav__link { font-weight: 600; color: var(--akc-heading); }
  .md-nav--primary > .md-nav__list > .md-nav__item--section > .md-nav > .md-nav__list > .md-nav__item--active > .md-nav__link { color: var(--akc-copper); }
}
.md-typeset h1.tools-heading { font-size: 1.5rem; margin: 0 0 0.3rem; }


/* ── The shared sub-site menu (the same file on downloads and demos), matched to tools.andykemp.com ── */
/* The Andy Kemp sub-site menu, matched to tools.andykemp.com's navbar (the benchmark): category buttons with a
   chevron that open a dark panel on hover or click, the Book Discovery Call button, and below 1280px a burger that
   opens a full-width panel with the groups as accordions and the sites list. Same sizes and colours on every site. */
.akx-nav { display: flex; align-items: center; gap: 2px; }
.akx-dd { position: relative; }
.akx-dd-btn { display: flex; align-items: center; gap: 4px; padding: 8px 12px; margin: 0; font: inherit; font-size: 15px; line-height: 1.5; white-space: nowrap; color: #cfc4b6; background: none; border: 0; cursor: pointer; transition: color .2s; }
.akx-dd-btn:hover, .akx-dd.open > .akx-dd-btn { color: #f3c08f; }
.akx-dd.is-active > .akx-dd-btn { color: #f3c08f; font-weight: 600; }
.akx-chev { width: 14px; height: 14px; flex: 0 0 auto; transition: transform .2s; }
.akx-dd.open .akx-chev, .akx-m-group.open .akx-chev { transform: rotate(180deg); }
.akx-dd-panel { display: none; position: absolute; top: 100%; left: 0; margin-top: 4px; min-width: 240px; background: #1e1a17; border: 1px solid #3a2c21; border-radius: 12px; box-shadow: 0 16px 40px rgba(0,0,0,.35); padding: 6px; z-index: 60; }
.akx-dd.open .akx-dd-panel { display: block; }
.akx-dd-panel a { display: block; padding: 8px 12px; border-radius: 8px; font-size: 14px; line-height: 1.5; color: #cfc4b6; text-decoration: none; white-space: nowrap; transition: color .2s, background-color .2s; }
.akx-dd-panel a:hover { color: #f3c08f; background: #241f1b; }
.akx-dd-panel a[aria-current] { color: #f3c08f; background: #241f1b; font-weight: 600; }
.akx-actions { display: flex; align-items: center; gap: 10px; }
.akx-ghost { display: inline-flex; align-items: center; padding: 10px 16px; border-radius: 10px; font-size: 14px; font-weight: 600; line-height: 1.5; white-space: nowrap; text-decoration: none; color: #f6f1ea !important; border: 1px solid #6b4426; transition: color .2s, border-color .2s; }
.akx-ghost:hover { border-color: #c47a3e; color: #f3c08f !important; }
.akx-burger { display: none; align-items: center; justify-content: center; padding: 8px; margin: 0 -8px 0 0; color: #f3c08f; background: none; border: 0; cursor: pointer; }
.akx-burger svg { width: 24px; height: 24px; }
.akx-burger .akx-x, .akx-burger[aria-expanded="true"] .akx-bars { display: none; }
.akx-burger[aria-expanded="true"] .akx-x { display: block; }
.akx-mobile { border-top: 1px solid #3a2c21; padding-bottom: 16px; }
.akx-mobile[hidden] { display: none !important; }
.akx-m-link, .akx-m-btn { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 10px 8px; margin: 0; font: inherit; font-size: 15px; line-height: 1.5; text-align: left; color: #cfc4b6; background: none; border: 0; text-decoration: none; cursor: pointer; transition: color .2s; }
.akx-m-link { margin-top: 4px; }
.akx-m-link:hover, .akx-m-btn:hover { color: #f3c08f; }
.akx-m-link[aria-current] { color: #f3c08f; font-weight: 600; }
.akx-m-sub { margin-left: 8px; padding-left: 16px; border-left: 2px solid #3a2c21; }
.akx-m-sub[hidden] { display: none; }
.akx-m-sub a { display: block; padding: 8px; font-size: 14px; line-height: 1.5; color: #cfc4b6; text-decoration: none; }
.akx-m-sub a:hover { color: #f3c08f; }
.akx-m-sub a[aria-current] { color: #f3c08f; font-weight: 600; }
.akx-m-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 12px; padding: 0 8px; }
.akx-m-sites { margin-top: 16px; padding: 12px 8px 0; border-top: 1px solid #3a2c21; }
.akx-m-sites p { margin: 0 0 4px; font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: #b5aa9c; }
.akx-m-sites ul { display: flex; flex-wrap: wrap; gap: 4px 20px; margin: 0; padding: 0; list-style: none; font-size: 14px; }
.akx-m-sites a { display: inline-block; padding: 6px 0; color: #b5aa9c; text-decoration: none; }
.akx-m-sites a:hover, .akx-m-sites a[aria-current] { color: #f3c08f; }
.akx-m-sites a[aria-current] { font-weight: 600; }
.akx-only-2xl { display: none !important; }
@media (min-width: 1536px) { .akx-only-2xl { display: inline-flex !important; } }
@media (max-width: 1279.98px) {
  .akx-nav, .akx-actions { display: none !important; }
  .akx-burger { display: inline-flex; }
}
@media (min-width: 1280px) { .akx-mobile { display: none !important; } }