/* Industry — design-system tokens and component classes. This file is the source of truth for the system's look; retune it here and see readme.md. */
@import url('https://fonts.googleapis.com/css2?family=Barlow:wght@400;500;700&family=Barlow+Condensed:wght@400;600&display=swap');

:root {
  --color-bg: #f2f2f3;
  --color-surface: #e9e9ea;
  --color-text: #1d1f20;
  --color-accent: #5980a6;
  --color-accent-2: #728fab;
  --color-divider: color-mix(in srgb, #1d1f20 16%, transparent);

  /* Tonal ramps — generated in OKLCH on one shared lightness scale, so the
     same step of any role matches the others in visual value. */
  --color-neutral-100: #f5f5f8;
  --color-neutral-200: #e7e7ea;
  --color-neutral-300: #d4d4d7;
  --color-neutral-400: #b7b7ba;
  --color-neutral-500: #98989b;
  --color-neutral-600: #7a7a7d;
  --color-neutral-700: #5d5d60;
  --color-neutral-800: #424244;
  --color-neutral-900: #2b2b2d;

  --color-accent-100: #eef6ff;
  --color-accent-200: #d6ebff;
  --color-accent-300: #b5d9fd;
  --color-accent-400: #94bce3;
  --color-accent-500: #749dc4;
  --color-accent-600: #597ea3;
  --color-accent-700: #416180;
  --color-accent-800: #2c455d;
  --color-accent-900: #1d2d3d;

  --color-accent-2-100: #eef6ff;
  --color-accent-2-200: #d6ebff;
  --color-accent-2-300: #bdd8f2;
  --color-accent-2-400: #9ebbd8;
  --color-accent-2-500: #7e9cb8;
  --color-accent-2-600: #627d98;
  --color-accent-2-700: #486077;
  --color-accent-2-800: #314457;
  --color-accent-2-900: #1f2d3a;

  --font-heading: "Barlow Condensed", system-ui, sans-serif;
  --font-heading-weight: 600;
  --font-body: "Barlow", system-ui, sans-serif;

  --space-1: 3.4px;
  --space-2: 6.8px;
  --space-3: 10.2px;
  --space-4: 13.6px;
  --space-6: 20.4px;
  --space-8: 27.2px;

  --radius-sm: 2px;
  --radius-md: 4px;
  --radius-lg: 7px;

  /* Elevation — derived from the ground: soft ink-tinted shadows on a
     light theme, a hairline edge + ambient darkness on a dark one. */
  --shadow-sm: 0 1px 2px color-mix(in srgb, #2b2b2d 14%, transparent);
  --shadow-md: 0 3px 10px color-mix(in srgb, #2b2b2d 16%, transparent);
  --shadow-lg: 0 12px 32px color-mix(in srgb, #2b2b2d 22%, transparent);
}

body {
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
}
h1, h2, h3, h4 { font-family: var(--font-heading); font-weight: var(--font-heading-weight); }

.blueprint {
  position: relative;
  border: 1px solid var(--color-divider);
  border-radius: 0;
}
/* The overlay image treatments (halftone, duotone) clip their overlay
   (overflow:hidden); a blueprint wrapper draws its registration marks
   outside the box, so when both classes share a wrapper the frame must
   win. */
.blueprint.halftone, .blueprint.plate, .blueprint.duotone { overflow: visible; }
.blueprint > .corner {
  position: absolute; width: 11px; height: 11px;
  color: color-mix(in srgb, var(--color-text) 55%, transparent);
}
.blueprint > .corner::before, .blueprint > .corner::after {
  content: ""; position: absolute; background: currentColor;
}
.blueprint > .corner::before { left: 5px; top: 0; width: 1px; height: 100%; }
.blueprint > .corner::after  { top: 5px; left: 0; width: 100%; height: 1px; }
.blueprint > .corner.tl { top: -6px; left: -6px; }
.blueprint > .corner.tr { top: -6px; right: -6px; }
.blueprint > .corner.bl { bottom: -6px; left: -6px; }
.blueprint > .corner.br { bottom: -6px; right: -6px; }

.duotone{position:relative;overflow:hidden}
.duotone::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:var(--color-accent);mix-blend-mode:color}

/* ══════════════════════════════════════════════════════════════════════════
   Components — built with the tokens above. Plain CSS
   on plain HTML: no JavaScript, no build step. Each class is documented in
   readme.md and demonstrated in foundations/ and components/.
   ══════════════════════════════════════════════════════════════════════ */

*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; font-size: 15px; line-height: 1.55; font-weight: 400; }
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  line-height: 1.12; letter-spacing: -0.015em; margin: 0 0 var(--space-2);
}
h1 { font-size: 42px; }
h2 { font-size: 32px; }
h3 { font-size: 25px; }
h4 { font-size: 20px; }
h5 { font-size: 16px; }
h6 { font-size: 13px; }
h6 { letter-spacing: 0.08em; text-transform: uppercase; }
p { margin: 0 0 var(--space-3); }
a { color: var(--color-accent); text-underline-offset: 3px; }
img { display: block; max-width: 100%; }
figure { margin: 0; }
figcaption {
  font-size: 11px; margin-top: var(--space-1);
  color: color-mix(in srgb, var(--color-text) 55%, transparent);
}
.text-muted { color: color-mix(in srgb, var(--color-text) 55%, transparent); }
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
::selection { background: color-mix(in srgb, var(--color-accent) 30%, transparent); }

/* — rules — */
.hr {
  height: 1px; border: 0; margin: var(--space-4) 0;
  background: var(--color-divider);
}

/* — buttons — */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  cursor: pointer; text-decoration: none;
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 14px; line-height: 1.2; color: var(--color-text); /* matches the .input's 14px —
     the pair sits side by side in sign-up rows */
  background: transparent; border: 1px solid transparent;
  padding: var(--space-2) calc(var(--space-3) * 1.2);
  border-radius: var(--radius-md);
}
.btn svg { display: block; }
.btn:disabled { opacity: 0.45; cursor: not-allowed; }
.btn-primary { background: var(--color-accent); color: var(--color-bg); }
.btn-primary:hover { background: var(--color-accent-600); }
.btn-primary:active { background: var(--color-accent-700); }
.btn-secondary { border-color: var(--color-divider); }
.btn-secondary:hover { background: color-mix(in srgb, var(--color-text) 7%, transparent); }
.btn-secondary:active { background: color-mix(in srgb, var(--color-text) 14%, transparent); }
.btn-ghost { color: var(--color-accent); padding-inline: var(--space-1); }
.btn-ghost:hover { background: color-mix(in srgb, var(--color-accent) 10%, transparent); }
.btn-ghost:active { background: color-mix(in srgb, var(--color-accent) 18%, transparent); }
.btn-icon { width: 36px; height: 36px; padding: 0; }
.btn-block { width: 100%; margin-top: var(--space-2); }

/* — forms — */
.field > label {
  display: block; font-size: 12px; margin-bottom: 5px;
  color: color-mix(in srgb, var(--color-text) 70%, transparent);
}
.input {
  width: 100%; min-height: 36px; padding: 6px 10px; font: inherit;
  font-size: 14px; color: var(--color-text); caret-color: var(--color-accent);
  background: var(--color-surface);
  border: 1px solid var(--color-divider); border-radius: var(--radius-md);
}
.input:hover { border-color: color-mix(in srgb, var(--color-text) 45%, transparent); }
.input:focus-visible { border-color: var(--color-accent); outline-offset: 0; }
textarea.input { min-height: 90px; resize: vertical; }
.radio { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; font-size: 14px; }
.radio input, .seg-opt input {
  position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none;
}
.radio .dot {
  width: 16px; height: 16px; flex: none; border-radius: 50%;
  border: 1.5px solid var(--color-divider);
}
.radio:hover .dot { border-color: var(--color-accent); }
.radio input:checked + .dot {
  border-color: var(--color-accent); background: var(--color-accent);
  box-shadow: inset 0 0 0 4px var(--color-bg);
}
.radio input:focus-visible + .dot { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.seg {
  display: inline-flex; overflow: hidden;
  border: 1px solid var(--color-divider); border-radius: var(--radius-md);
}
.seg-opt {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 12px; font-size: 13px; cursor: pointer;
}
.seg-opt + .seg-opt { border-left: 1px solid var(--color-divider); }
.seg-opt:has(input:checked) { background: var(--color-accent); color: var(--color-bg); }
.seg-opt:not(:has(input:checked)):hover { background: color-mix(in srgb, var(--color-text) 7%, transparent); }
.seg-opt:has(input:focus-visible) { outline: 2px solid var(--color-accent); outline-offset: -2px; }

/* — cards — */
.card {
  display: flex; flex-direction: column; gap: var(--space-2);
  padding: var(--space-3); border-radius: var(--radius-md); background: var(--color-surface);
}
.card-kicker { font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-accent); }
.card-title {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 17px; line-height: 1.2;
}
.card-body { margin: 0; font-size: 13px; opacity: 0.8; flex: 1; }
.card-meta {
  display: flex; align-items: center; gap: 6px; font-size: 11px;
  color: color-mix(in srgb, var(--color-text) 50%, transparent);
}
.elev-sm { box-shadow: var(--shadow-sm); }
.elev-md { box-shadow: var(--shadow-md); }
.elev-lg { box-shadow: var(--shadow-lg); }

/* — tags — */
.tag {
  display: inline-flex; align-items: center; font-size: 11px;
  letter-spacing: 0.02em; padding: 3px 10px;
  border-radius: calc(var(--radius-md) * 0.75);
}
.tag-accent { background: var(--color-accent-100); color: var(--color-accent-800); }
.tag-accent-2 { background: var(--color-accent-2-100); color: var(--color-accent-2-800); }
.tag-neutral { background: var(--color-neutral-100); color: var(--color-neutral-800); }
.tag-outline { border: 1px solid var(--color-accent); color: var(--color-accent); }

/* — navigation — */
.nav {
  display: flex; align-items: center; gap: var(--space-4);
  padding: var(--space-3) var(--space-4);
  border-bottom: none;
}
.nav-brand {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 18px; margin-right: auto;
}
.nav a { color: inherit; text-decoration: none; font-size: 14px; }
.nav a:hover, .nav a[aria-current='page'] { color: var(--color-accent); }

/* — tables — */
.table { width: 100%; border-collapse: collapse; font-size: 14px; }
.table th {
  text-align: left; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase;
  color: color-mix(in srgb, var(--color-text) 60%, transparent);
  padding: var(--space-2); border-bottom: 1px solid var(--color-divider);
}
.table td {
  padding: var(--space-2);
  border-bottom: 1px solid color-mix(in srgb, var(--color-text) 8%, transparent);
}
.table tbody tr:hover { background: color-mix(in srgb, var(--color-text) 4%, transparent); }

/* — dialog — */
.dialog-backdrop {
  position: fixed; inset: 0; display: grid; place-items: center;
  padding: var(--space-4);
  background: color-mix(in srgb, var(--color-neutral-900) 50%, transparent);
}
.dialog {
  width: min(440px, 100%); display: flex; flex-direction: column; gap: var(--space-3);
  padding: var(--space-4); border-radius: var(--radius-lg);
  background: var(--color-surface); box-shadow: var(--shadow-lg);
}
.dialog-title {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 20px;
}
.dialog-body { font-size: 14px; opacity: 0.85; }
.dialog-actions { display: flex; justify-content: flex-end; gap: var(--space-2); margin-top: var(--space-2); }

/* — blueprint frame: components are wireframe objects (see .blueprint
     and .corner above) — square, transparent, hairline-bordered — */
.card, .btn, .input, .tag, .seg, .dialog { border-radius: 0; }
.card, .dialog { background: transparent; border: 1px solid var(--color-divider); }
.btn { border: 1px solid var(--color-divider); }
.btn-primary { border-color: var(--color-accent); }
.btn-ghost { border-color: transparent; }

/* Database article content uses the supplied editorial scale after imported
   WordPress inline styling has been removed for safety. */
.alias-imported-article::after { content: ''; display: table; clear: both; }
.alias-imported-article > :first-child { margin-top: 0; }
.alias-imported-article h2 {
  clear: both; margin: 44px 0 16px; color: var(--color-text);
  font-size: 30px; line-height: 1.15; letter-spacing: -0.01em;
}
.alias-imported-article h3 { clear: both; margin: 32px 0 12px; font-size: 23px; line-height: 1.2; }
.alias-imported-article p { margin: 0 0 22px; }
.alias-imported-article ul, .alias-imported-article ol { margin: 0 0 26px; padding-left: 22px; }
.alias-imported-article li + li { margin-top: 8px; }
.alias-imported-article blockquote {
  margin: 0 0 26px; padding: 22px 26px; border-left: 3px solid var(--color-accent);
  background: #fff;
}
.alias-imported-article figure { margin: 28px 0; }
.alias-imported-article figcaption {
  margin-top: 10px; color: rgba(29,31,32,.55); font-family: var(--font-heading);
  font-size: 11.5px; line-height: 1.5; letter-spacing: .08em; text-transform: uppercase;
}
.alias-imported-article img { width: auto; max-width: 100%; height: auto; margin-inline: auto; }
.alias-imported-article table { display: block; width: 100%; overflow-x: auto; border-collapse: collapse; }
.alias-imported-article th, .alias-imported-article td { padding: 10px 12px; border-bottom: 1px solid var(--color-divider); }

.alias-pagination {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 38px;
}
.alias-pagination a {
  display: grid; place-items: center; min-width: 40px; min-height: 40px;
  border: 1px solid var(--color-divider); color: var(--color-text);
  font-family: var(--font-heading); font-size: 12px;
}
.alias-pagination a[aria-current='page'] { color: #fff; background: var(--color-accent); border-color: var(--color-accent); }

.alias-mobile-toggle, .alias-mobile-menu { display: none; }

@media (max-width: 1180px) {
  html, body { width: 100%; max-width: 100%; overflow-x: clip; }
  body * { min-width: 0; }

  .alias-topbar > div { padding-inline: 20px !important; gap: 10px 18px !important; }
  .alias-topbar > div > span:last-child { width: 100%; margin-left: 0 !important; gap: 10px 18px !important; }
  .alias-topbar > div > span:last-child > span { display: none !important; }

  .alias-site-header > div {
    min-height: 70px; padding: 12px 20px !important; gap: 16px !important; white-space: normal !important;
  }
  .alias-site-header > div > nav,
  .alias-site-header > div > .btn { display: none !important; }
  .alias-site-header img { max-width: 152px; height: auto !important; max-height: 42px; }
  .alias-mobile-toggle {
    display: inline-grid; place-items: center; width: 44px; height: 44px; margin-left: auto;
    border: 1px solid var(--color-divider); background: #fff; color: var(--color-text); cursor: pointer;
  }
  .alias-mobile-toggle svg { width: 22px; height: 22px; }
  .alias-mobile-menu {
    position: fixed; inset: 0; z-index: 100; display: block; visibility: hidden;
    opacity: 0; pointer-events: none; transition: opacity 180ms ease, visibility 180ms ease;
    overflow: hidden; background: rgba(6,20,38,.58);
  }
  .alias-mobile-menu[data-open='true'] { visibility: visible; opacity: 1; pointer-events: auto; }
  .alias-mobile-menu__panel {
    width: min(88vw, 380px); height: 100%; margin-left: auto; overflow-y: auto;
    padding: 24px; background: #fff; box-shadow: var(--shadow-lg); transform: translateX(100%);
    transition: transform 220ms ease;
  }
  .alias-mobile-menu[data-open='true'] .alias-mobile-menu__panel { transform: translateX(0); }
  .alias-mobile-menu__head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 22px; }
  .alias-mobile-menu__close {
    display: grid; place-items: center; width: 42px; height: 42px; border: 1px solid var(--color-divider);
    background: transparent; color: var(--color-text); cursor: pointer; font-size: 24px;
  }
  .alias-mobile-menu__nav { display: grid; gap: 0; }
  .alias-mobile-menu__nav a,
  .alias-mobile-menu__nav summary {
    display: block; padding: 14px 0; border-bottom: 1px solid var(--color-divider);
    color: var(--color-text); font-family: var(--font-heading); font-weight: 600;
    font-size: 14px; letter-spacing: .06em; text-transform: uppercase; cursor: pointer;
  }
  .alias-mobile-menu__nav details div { display: grid; padding: 4px 0 8px 16px; }
  .alias-mobile-menu__nav details div a { padding: 10px 0; border: 0; font-size: 12px; color: rgba(29,31,32,.75); }
  body.alias-menu-open { overflow: hidden; }

  body[data-design-page] [style*='padding: 0px 32px'],
  body[data-design-page] [style*='padding: 32px'] { padding-left: 20px !important; padding-right: 20px !important; }
  body[data-design-page] [style*='padding: 9px 32px'],
  body[data-design-page] [style*='padding: 14px 32px'] { padding-left: 20px !important; padding-right: 20px !important; }
  body[data-design-page] [style*='min-width: 300px'],
  body[data-design-page] [style*='min-width: 260px'],
  body[data-design-page] [style*='min-width: 340px'] { width: 100% !important; min-width: 0 !important; }
  body[data-design-page] [style*='minmax(440px'],
  body[data-design-page] [style*='minmax(430px'],
  body[data-design-page] [style*='minmax(340px'] { grid-template-columns: minmax(0, 1fr) !important; }
  body[data-design-page] h1[style*='font-size: 56px'],
  body[data-design-page] h1[style*='font-size: 54px'],
  body[data-design-page] h1[style*='font-size: 52px'] { font-size: clamp(36px, 8.5vw, 48px) !important; }
  body[data-design-page] h2[style*='font-size: 44px'],
  body[data-design-page] h2[style*='font-size: 42px'],
  body[data-design-page] h2[style*='font-size: 40px'] { font-size: clamp(30px, 7vw, 38px) !important; }
  body[data-design-page] form { max-width: 100%; }
  body[data-design-page] input, body[data-design-page] textarea, body[data-design-page] select { max-width: 100%; }
  body[data-design-page] footer [style*='margin-left: auto'] { margin-left: 0 !important; width: 100%; }

  body[data-design-page='article'] article > div[style*='grid-template-columns: 230px'] {
    grid-template-columns: minmax(0, 1fr) !important; gap: 30px !important;
  }
  body[data-design-page='article'] article aside { position: static !important; }
}

@media (max-width: 600px) {
  .alias-topbar > div > span:nth-child(2) { display: none !important; }
  .alias-topbar a[href^='mailto:'] { display: none !important; }

  body[data-design-page] [style*='grid-template-columns'] { grid-template-columns: minmax(0, 1fr) !important; }
  body[data-design-page] [style*='padding: 96px 32px'] { padding: 64px 20px 80px !important; }
  body[data-design-page] [style*='padding: 64px 0px 72px'] { padding-top: 48px !important; padding-bottom: 58px !important; }
  body[data-design-page] [style*='padding: 56px 0px 64px'] { padding-top: 44px !important; padding-bottom: 50px !important; }
  body[data-design-page] [style*='gap: 64px'] { gap: 32px !important; }
  body[data-design-page] [style*='gap: 56px'] { gap: 28px !important; }

  .alias-featured-article { grid-template-columns: minmax(0, 1fr) !important; }
  .alias-featured-article > span:first-child { aspect-ratio: 16 / 10; }
  .alias-featured-article > span:last-child { padding: 26px 22px 28px !important; }
  body[data-design-page='articles'] article { grid-template-columns: minmax(0, 1fr) !important; }
  body[data-design-page='articles'] article > a[role='img'] { aspect-ratio: 16 / 10; }

  body[data-design-page='home'] [data-hero-status],
  body[data-design-page='home'] [data-hero-progress] { display: none !important; }
  body[data-design-page='home'] div:has(> [data-hero-prev]) {
    max-width: calc(100vw - 40px); gap: 8px !important; flex-wrap: wrap;
  }

  .alias-article-cover { float: none !important; width: 100% !important; margin: 0 0 26px !important; }
  .alias-imported-article { font-size: 16px; line-height: 1.68; }
  .alias-imported-article h2 { margin-top: 34px; font-size: 27px; }
  .alias-imported-article h3 { font-size: 21px; }
  .alias-imported-article blockquote { padding: 18px 20px; }

  body[data-design-page] footer span[style*='display: flex'] { display: grid !important; gap: 12px !important; }
  body[data-design-page] .btn { white-space: normal; text-align: center; justify-content: center; }
}

/* ---------------------------------------------------------------------------
   Mobile presentation refinements.

   Everything below lives inside a max-width query, so layouts at the existing
   900px desktop breakpoint and above are untouched. No colour, font, wording
   or image is changed here - only sizing, spacing and flow.
   --------------------------------------------------------------------------- */

@media (max-width: 900px) {
  /* The header logo was being squeezed: max-width and max-height were both
     applied while width and height were auto, so the used width came from one
     and the used height from the other, distorting a 2:1 mark to 3.6:1. Drive
     the size from height alone and let the aspect ratio follow. */
  .alias-site-header img {
    height: 38px !important;
    width: auto !important;
    max-width: min(58vw, 190px);
    max-height: none;
    object-fit: contain;
  }

  /* Keep every media box proportionate rather than letting a fixed height
     stretch the picture. */
  body[data-design-page] img { max-width: 100%; }
  body[data-design-page] img[style*='height: 100%'],
  body[data-design-page] img[style*='height:100%'] { object-fit: cover; }

  /* The off-canvas panel is translated fully out of view; without this its
     transformed width is reported as page content. */
  .alias-mobile-menu { overflow-x: clip; }
  .alias-mobile-menu__panel { width: min(90vw, 360px); padding: 22px 20px 32px; }
  /* The drawer logo is written with fixed 152x42 attributes, which squashes a
     2:1 mark. Size it from height and keep the aspect ratio. */
  .alias-mobile-menu__head img {
    height: 34px;
    width: auto;
    max-width: 62%;
    object-fit: contain;
  }
  .alias-mobile-menu__nav a,
  .alias-mobile-menu__nav summary { padding: 15px 0; }

  /* Product section navigation scrolls horizontally, but its links were
     shrinking below their text and clipping the labels. */
  body[data-design-page^='product'] nav[style*='position: sticky'] { top: 64px !important; }
  body[data-design-page^='product'] nav[style*='position: sticky'] > div {
    gap: 22px !important;
    /* Trailing space so the final tab clears the edge when scrolled. */
    padding: 0 20px 0 20px !important;
    scroll-padding-inline: 20px;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  body[data-design-page^='product'] nav[style*='position: sticky'] > div::after {
    content: '';
    flex: 0 0 4px;
  }
  body[data-design-page^='product'] nav[style*='position: sticky'] > div::-webkit-scrollbar { display: none; }
  body[data-design-page^='product'] nav[style*='position: sticky'] a {
    flex: 0 0 auto;
    white-space: nowrap;
  }

  /* Comfortable, consistently tappable controls. */
  body[data-design-page] .btn { min-height: 44px; align-items: center; }
  body[data-design-page] .btn-icon { min-height: 0; }
}

@media (max-width: 600px) {
  /* --- Homepage hero -------------------------------------------------------
     The hero reserved desktop-sized vertical space, and its overview card and
     slideshow controls were both pinned to the bottom of the same box, so on a
     narrow screen they sat on top of each other. Return both to normal flow
     and let the section size itself. */
  body[data-design-page='home'] [style*='min-height: 540px'] {
    min-height: 0 !important;
    padding: 40px 0 32px !important;
    gap: 26px !important;
  }
  body[data-design-page='home'] [style*='min-height: 372px'] { min-height: 0 !important; }

  body[data-design-page='home'] .blueprint:has([data-hot-kicker]) {
    position: static !important;
    width: 100% !important;
    margin-top: 22px;
  }
  body[data-design-page='home'] div:has(> [data-hero-prev]) {
    position: static !important;
    margin-top: 20px;
    max-width: 100%;
    gap: 10px !important;
    flex-wrap: wrap;
  }

  /* Hero headline: same face and weight, sized for a narrow column. */
  body[data-design-page='home'] [data-hero-copy] h1 {
    font-size: clamp(32px, 9vw, 44px) !important;
    margin-bottom: 16px !important;
  }
  body[data-design-page='home'] [data-hero-copy] p[style*='font-size: 16px'] {
    margin-bottom: 22px !important;
  }
  body[data-design-page='home'] [data-hero-copy] .btn { width: 100%; }
  body[data-design-page='home'] [data-hero-copy] div[style*='display: flex'] { width: 100%; }

  /* Product hero statistics: four tall stacked cells became a very long
     column. Give them an even two-up grid and normal padding. */
  body[data-design-page^='product'] [style*='padding: 30px 28px'] { padding: 20px 18px !important; }

  /* Section rhythm. */
  body[data-design-page] [style*='padding: 60px 0px 72px'] { padding-top: 44px !important; padding-bottom: 52px !important; }
  body[data-design-page] [style*='padding: 52px 0px 20px'] { padding-top: 40px !important; }
  body[data-design-page] [style*='margin-top: 56px'] { margin-top: 36px !important; }
  body[data-design-page] [style*='gap: 48px'] { gap: 26px !important; }
  body[data-design-page] [style*='gap: 30px'] { gap: 22px !important; }

  /* Project and article media keep their shape instead of being letterboxed
     into a desktop-proportioned frame. */
  body[data-design-page^='project'] figure img,
  body[data-design-page^='project'] .blueprint img { object-fit: cover; }
}

@media (max-width: 430px) {
  /* Tighter gutters and slightly smaller display type at the narrowest sizes,
     keeping the same typeface and hierarchy. */
  body[data-design-page] [style*='padding: 0px 32px'] { padding-left: 18px !important; padding-right: 18px !important; }
  body[data-design-page] h1[style*='font-size: 48px'],
  body[data-design-page] h1[style*='font-size: 46px'] { font-size: clamp(30px, 8.4vw, 40px) !important; }
  body[data-design-page] h2[style*='font-size: 34px'],
  body[data-design-page] h2[style*='font-size: 31px'],
  body[data-design-page] h2[style*='font-size: 28px'] { font-size: clamp(23px, 6.6vw, 30px) !important; }
  body[data-design-page] [style*='font-size: 38px'] { font-size: 30px !important; }
  body[data-design-page] .btn { padding-left: 16px !important; padding-right: 16px !important; font-size: 12px !important; }
}

@media (max-width: 900px) {
  /* Footer legal bar. The desktop row is a straight three-part line held in
     place by inline styles, so it still renders correctly on the older
     templates that do not load this stylesheet. Once the row wraps, the
     auto margins that centre the company details would leave them indented
     mid-line, so the bar becomes a left-aligned stack instead. */
  .v3-footer-legal { display: grid !important; justify-items: start; gap: 12px !important; }
  .v3-footer-legal-meta { margin: 0 !important; }
}

@media print {
  .alias-topbar, .alias-site-header, .alias-mobile-menu, footer, .alias-pagination,
  [data-article-print] { display: none !important; }
}

/* Cookie consent banner. Lives in the shared footer include so every page
   family (V3 and design-export templates alike) picks it up automatically. */
.alias-cookie-consent {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9999;
  background: var(--alias-navy-deep, #061426);
  color: rgba(255, 255, 255, .86);
  border-top: 1px solid rgba(255, 255, 255, .14);
  box-shadow: 0 -8px 24px rgba(0, 0, 0, .28);
}
.alias-cookie-consent[hidden] { display: none; }
.alias-cookie-consent-inner {
  max-width: 1320px;
  margin: 0 auto;
  padding: 18px 22px;
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
}
.alias-cookie-consent-text { margin: 0; font-size: 13.5px; line-height: 1.6; max-width: 64ch; text-wrap: pretty; }
.alias-cookie-consent-text a { color: #fff; text-decoration: underline; text-underline-offset: 2px; }
.alias-cookie-consent-actions { display: flex; gap: 12px; flex-wrap: wrap; flex: 0 0 auto; }
.alias-cookie-consent-btn {
  font-family: var(--font-heading);
  font-size: 12px;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: 11px 20px;
  border: 1px solid rgba(255, 255, 255, .28);
  background: transparent;
  color: #fff;
  cursor: pointer;
  white-space: nowrap;
}
.alias-cookie-consent-btn:hover { border-color: #fff; }
.alias-cookie-consent-btn-primary { background: var(--color-accent, #0b4fd4); border-color: var(--color-accent, #0b4fd4); }
.alias-cookie-consent-btn-primary:hover { background: var(--color-accent-700, #0a3893); border-color: var(--color-accent-700, #0a3893); }
@media (max-width: 600px) {
  .alias-cookie-consent-actions { width: 100%; }
  .alias-cookie-consent-btn { flex: 1 1 0; }
}