/* Anatomy IT — base styles. All colors/fonts via tokens.css variables. */

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font-sans);
  color: var(--ink);
  background: var(--bg);
  font-size: 16px;
  line-height: 1.7;
}

h1, h2, h3, h4 { margin: 0; color: var(--ink-heading); line-height: 1.2; text-wrap: balance; }
h1 { font-size: clamp(32px, 4vw, 54px); font-weight: 700; }
h2 { font-size: clamp(26px, 3vw, 38px); font-weight: 700; }
h3 { font-size: 22px; font-weight: 700; }
h4 { font-size: 16px; font-weight: 700; }
p { margin: 0; }

a { color: var(--link); text-decoration: none; }
a:hover { color: var(--ink-heading); }

/* The default hover color above is navy — invisible against the navy/dark
   backgrounds those same links often sit on (a pagehero lede, a dark CTA
   band). Every dark-background context hovers its links to the sky-blue
   accent instead — the same color breadcrumbs and .text-link already use
   on dark backgrounds — so a hovered link reads as distinct from both the
   background and the surrounding white body copy, not just "not navy".
   Buttons are excluded: each .btn variant already sets its own hover
   colors, tuned to its own background. */
.pagehero a:not(.btn):hover,
.pagehero--dots a:not(.btn):hover,
.pagehero--photo a:not(.btn):hover,
.hero--photo a:not(.btn):hover,
.section--dark a:not(.btn):hover {
  color: var(--color-sky);
}

img { max-width: 100%; height: auto; }

.container { max-width: 1200px; margin: 0 auto; padding: 0 24px; }

.section { padding: 80px 0; --surface: var(--bg); }
.section--alt { background: var(--bg-alt); --surface: var(--bg-alt); }
.section--dark { background: var(--bg-dark); --surface: var(--bg-dark); }
.section--dark h2, .section--dark h3 { color: var(--ink-on-dark); }
.section--dark p { color: var(--color-grey-light); }
.section--cream { background: var(--color-yellow-light); --surface: var(--color-yellow-light); }
/* A band that carries on from the white band above it, such as "About Anatomy IT"
   under the form on the campaign page: no top padding of its own, so the two sit
   one section padding apart (80px, 56px on phones) instead of two. Two classes, so
   the phone rule for .section further down cannot put the padding back. */
.section.section--flush-top { padding-top: 0; }

/* Eyebrow + brand motifs */
.eyebrow {
  font-size: 13px; font-weight: 700; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--accent);
}
.eyebrow--teal { color: var(--accent-2); }
.eyebrow--sky { color: var(--color-sky); }

/* HEALTHIT™ 360 wordmark: "HEALTH" and "360" in the surrounding ink colour,
   "IT" in brand purple, "360" a lighter weight than "HEALTHIT" — per your
   logo (2026-09-19). For standalone mentions (headings, the nav/
   footer link) and for the opening mention of a paragraph that leads with the
   mark; left out of every later mention in running copy and out of .text-link,
   where only part of the link changing colour would read as broken, not branded.
   Note that it sets the mark in bold wherever it is used, body copy included.
   --brand-healthit-ink lets a dark-background context (e.g. .pagehero h1)
   swap "HEALTH"/"360" to white without touching the purple. */
.brand-healthit { --brand-healthit-ink: var(--ink-heading); color: var(--brand-healthit-ink); font-weight: 700; }
/* "IT" carries the brand purple at every size the mark is set in, not only in
   headings. Against white that pair measures 4.01:1, which is under the 4.5:1
   contrast floor for text below heading size; it is a deliberate choice, made
   after seeing it rendered, and one value here reverses it. */
.brand-healthit__it { color: var(--color-purple); }
.brand-healthit__360 { color: var(--brand-healthit-ink); font-weight: 500; }
/* The trademark sits with the wordmark, not with the purple: it takes the
   ink of the phrase around it and rides smaller and high, the way a mark
   is set. Inside the purple span it read as part of the letters. */
.brand-healthit__tm {
  color: var(--brand-healthit-ink); font-weight: 500;
  font-size: 0.58em; vertical-align: 0.5em; letter-spacing: 0;
  /* A hair of air between the wordmark and the mark, set here rather than typed
     into the text: the words stay HEALTHIT™ 360 when they are copied, searched
     or indexed, and the gap scales with whatever size the mark is set in. */
  margin-left: 0.12em;
}
.pagehero .brand-healthit { --brand-healthit-ink: var(--ink-on-dark); }
/* Same swap when a bordered button fills on hover: without it the wordmark keeps
   its heading ink and would go navy on navy. */
.btn--secondary:hover .brand-healthit { --brand-healthit-ink: var(--ink-on-dark); }

.gradient-rule {
  height: 14px; width: 220px; border-radius: 999px; border: 0; margin: 0;
  background: linear-gradient(90deg, var(--color-purple), var(--color-blue), var(--color-sky));
}
/* Dark variant, as shown on Anatomy IT's Graphical Elements page */
.gradient-rule--dark {
  background: linear-gradient(90deg, var(--color-navy), var(--color-sky), var(--color-purple));
}

.dots { display: flex; gap: 8px; }
.dots span { width: 10px; height: 10px; border-radius: 50%; }
.dots span:nth-child(1) { background: var(--color-purple); }
.dots span:nth-child(2) { background: var(--color-blue); }
.dots span:nth-child(3) { background: var(--color-sky); }

.hex {
  clip-path: polygon(25% 3%, 75% 3%, 100% 50%, 75% 97%, 25% 97%, 0% 50%);
  display: flex; align-items: center; justify-content: center;
}

/* Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; padding: 14px 32px; border-radius: 4px;
  font-family: var(--font-sans); font-size: 15px; font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase;
  border: 2px solid transparent; cursor: pointer; text-align: center;
}
/* A disabled button must not look pressable — same treatment as a disabled field. */
.btn:disabled, .btn:disabled:hover {
  background: var(--color-grey-e8); color: var(--color-grey-90);
  border-color: var(--color-grey-c8); border-style: dashed; cursor: not-allowed;
}
.btn--primary { background: var(--color-navy); color: var(--ink-on-dark); }
.btn--primary:hover { background: var(--color-blue); color: var(--ink-on-dark); }
.btn--cta { background: var(--accent); color: var(--ink-on-dark); }
.btn--cta:hover { background: var(--color-navy); color: var(--ink-on-dark); }
.btn--secondary { background: var(--bg); color: var(--color-navy); border-color: var(--color-navy); }
.btn--secondary:hover { background: var(--color-navy); color: var(--ink-on-dark); }
/* LinkedIn's brand guidelines require the "LinkedIn" wordmark to stay mixed
   case (never LINKEDIN), so this overrides the site-wide uppercase button
   style and adds the gap for the logo mark. */
.btn--linkedin { text-transform: none; letter-spacing: normal; gap: 8px; }
/* The icon must always track the button's own text color, not whatever
   color a wrapping .tile/.featrow/.card/.listing sets on descendant svgs
   (see below) — the extra element in the selector outranks that rule. */
/* With the "in" mark alone there is no line of text to set the button's height,
   so the mark's box is one line tall: the button stays as tall as one with a
   label, and the mark keeps its size. */
a.btn--linkedin svg { flex: 0 0 auto; color: inherit; height: 1lh; }
.btn--accent-dark { background: var(--accent-2); color: var(--color-navy); }
.btn--accent-dark:hover { background: var(--color-white); color: var(--color-navy); }
.btn--ghost-dark { background: transparent; color: var(--ink-on-dark); border-color: var(--color-sky); }
.btn--ghost-dark:hover { background: var(--color-sky); color: var(--color-navy); }
/* Blue line, white inside. Two colour decisions inside one rule, both forced by
   the same measurement: the light blue is 3.51:1 against white and 3.51:1 behind
   white, either way under the 4.5:1 that a 15px label has to meet. So the resting
   label stays heading navy rather than turning blue, and the hover fills navy
   rather than blue (14.76:1). The line itself is the blue that was asked for.
   Fill the hover with the light blue instead and the label drops to 3.51:1. */
.btn--outline-blue { background: var(--bg); color: var(--ink-heading); border-color: var(--color-blue); }
.btn--outline-blue:hover { background: var(--color-navy); color: var(--ink-on-dark); border-color: var(--color-navy); }

.text-link { font-size: 14px; font-weight: 700; color: var(--link); }
.text-link:hover { color: var(--ink-heading); }
/* On navy the default link blue sits at 4.21:1 and the hover colour disappears
   into the background, so the dark sections get the sky accent instead. */
.section--dark .text-link { color: var(--color-sky); }
.section--dark .text-link:hover { color: var(--ink-on-dark); }

/* ============ Header ============ */
/* The bar is not flat white in the approved design: it washes from white at the
   left edge to the brand light grey at the right. Sampled across both drawings -
   #ffffff at the left margin, #f2f3fd at the right, no vertical component - and
   that end colour is --color-grey-light to within one value in one channel. On
   flat white the two links at the top right had no field under them at all,
   which is most of why they read as added on afterwards. */
.navbar {
  background: linear-gradient(90deg, var(--bg) 0%, var(--bg-alt) 100%);
  border-bottom: 1px solid var(--color-grey-blue); position: relative; z-index: 50;
}
/* Top right of the bar, the way the approved design draws them. Still not a band
   of its own: no fill, no rule across the width, so the header reads as one block
   rather than the two stacked strips the earlier navy version made. What holds
   the pair together instead is a mark on each link and a hairline between them.
   The ink is the body ink the drawing uses: the lighter grey that was here
   measured 3.19:1 on white and 2.88:1 on the tinted end of the wash, both under
   the 4.5:1 a label this size has to meet, and that paleness is most of why the
   two words looked dropped on rather than built in. 14px either side of the
   hairline reproduces the ~31px the drawing leaves between the labels. */
.navbar__utility {
  display: flex; align-items: center; justify-content: flex-end; gap: 14px;
  padding-top: 12px; padding-bottom: 0;
}
.navbar__utility-link {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 12px; font-weight: 500; color: var(--ink);
  /* 24px of height, which is the smallest target the guidelines accept. */
  min-height: 24px;
}
.navbar__utility-link svg { flex: 0 0 auto; }
.navbar__utility-link:hover,
.navbar__utility-link:focus-visible { color: var(--ink-heading); }
/* The same focus ring the FAQ summaries and the video poster already use. */
.navbar__utility-link:focus-visible {
  outline: 3px solid var(--color-sky); outline-offset: 3px; border-radius: 3px;
}
.navbar__utility-sep {
  flex: 0 0 auto; width: 1px; height: 14px; background: var(--color-grey-c8);
}

/* Both rows repeat the bar's own background: the dropdown below sits at z-index
   -1, which puts it under them but over .navbar's background, so they - not the
   bar - are what hides the panel while it slides out. inherit rather than a
   colour so it survives the washed bar in the three header options; if that wash
   lands, the ramp restarts at each row's 1200px box, and background-attachment:
   fixed on the bar and both rows lines them up again. */
/* The air belongs at the outer edges of the bar, not between its two rows: 12px
   above the utility line, 10px between that line and this row, 18px below. Built
   the other way round - a 16px channel in the middle and 14px at the bottom - the
   top line read as a separate strip sitting on the nav. */
.navbar__inner { display: flex; align-items: center; justify-content: space-between; padding-block: 10px 18px; gap: 24px; }
.navbar__logo { flex: 0 0 auto; }
/* max-width:none defeats the global img{max-width:100%}, which was compressing
   the logo horizontally once the flex row ran out of room (brand prohibition 1) */
.navbar__logo img { height: 44px; width: auto; max-width: none; display: block; }

.nav-toggle {
  display: none; background: none; border: 0; padding: 10px; cursor: pointer;
  min-width: 44px; min-height: 44px;
}
.nav-toggle svg { display: block; }

/* The items stretch to the height of the row so that .dropdown's top: 100% lands
   on the same line for all of them - 15px (.navbar__inner's padding-bottom plus
   the bar's 1px border) above the bottom edge of the bar, at every width,
   including the ones between 901 and 1200px where a label wraps to two lines and
   the row grows. The panel takes 14 of those 15 back, so its own top edge ends
   up a pixel behind the bar and no hairline of the page can show through. */
.nav-menu { display: flex; align-self: stretch; align-items: stretch; gap: 8px; list-style: none; margin: 0; padding: 0; }
.nav-menu > li { position: relative; display: flex; align-items: center; }
/* Those 15px belong to the bar, not to the item, so a mouse crossing them would
   drop the hover and start closing the panel. This invisible strip carries the
   hover across: it is part of the item, and it takes pointer events over the
   bar's background because the item is positioned and the two rows are not. */
.nav-menu > li::after {
  content: ""; position: absolute; top: 100%; left: 0; right: 0; height: 15px;
}
/* .nav-menu__parent is the submenu parent that has no page behind it (Services,
   Solutions, Who We Serve: Anatomy IT's instruction, 2026-09-16). It is a <button>
   so it stays in the tab order and :focus-within below still opens its
   submenu; these rules only strip the button chrome so it matches the links
   beside it. */
.nav-menu > li > a,
.nav-menu > li > .nav-menu__parent {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 15px; font-weight: 500; color: var(--color-navy);
  padding: 12px; border-radius: 4px;
}
.nav-menu > li > .nav-menu__parent {
  font-family: inherit; line-height: inherit; text-align: left;
  background: none; border: 0; cursor: pointer;
}
.nav-menu > li > a:not(.btn):hover,
.nav-menu > li > .nav-menu__parent:hover { background: var(--color-grey-light); }

/* Chevron on every dropdown-bearing item: with no other affordance, the plain
   text label of "Services" or "Company" gave no visual sign it opens a menu.
   Points down at rest, flips to point up on hover/focus (the CSS-only trigger
   that already opens .dropdown, see :hover/:focus-within below) — same
   convention as Vercel's nav and most others, so nothing needs explaining. */
.nav-chevron { flex: 0 0 auto; transition: transform 150ms ease 100ms; }
.nav-menu > li:hover > a .nav-chevron,
.nav-menu > li:hover > .nav-menu__parent .nav-chevron,
.nav-menu > li:focus-within > a .nav-chevron,
.nav-menu > li:focus-within > .nav-menu__parent .nav-chevron { transform: rotate(180deg); }

/* "You are here": assets/js/main.js compares location.pathname against every
   nav link on load (the markup is identical on all 102 pages, so there is no
   server-rendered active state to start from) and adds these two classes.
   is-current-section marks the top-level item that owns the current page;
   is-current marks the exact dropdown link that IS the current page. */
.nav-menu > li > a.is-current-section,
.nav-menu > li > .nav-menu__parent.is-current-section {
  color: var(--accent); background: var(--color-grey-light);
}
.dropdown a.is-current {
  color: var(--color-navy); font-weight: 700; text-decoration: underline; text-underline-offset: 4px;
}

/* The panel slides out from behind the bar rather than fading in place: at
   z-index -1 it is painted under the two rows of the header, so while it travels
   the only part visible is the part already below the bar's bottom edge. It
   starts a little higher than its own height so nothing shows at rest. The 100ms
   delay is also hover intent - sweeping the mouse along the bar no longer flashes
   every menu open on the way past. */
.dropdown {
  position: absolute; top: 100%; left: 0; min-width: 300px;
  background: var(--bg); border: 1px solid var(--color-grey-blue); border-radius: 6px;
  box-shadow: var(--shadow-elevated);
  padding: 10px; margin: 0; list-style: none;
  opacity: 0; visibility: hidden; transform: translateY(6px);
  /* A short fade and six pixels of travel. It briefly slid the whole panel out
     from behind the bar instead; that read as too much movement on a hover and
     went back on 22 September. */
  transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s;
}
/* The two menus nearest the right end open inwards. A hidden panel still takes
   up space, so a 300px panel left-aligned under "Company" or "Resources" reached
   past the right edge of the window and gave the whole page a sideways scrollbar
   on every screen narrower than about 1130px. Anchored to the right edge of their
   own item they extend leftwards instead, and nothing sticks out. Counted from
   the end so the rule keeps holding if an item is added or removed: the last item
   in the bar is the call-to-action button, which has no panel. */
.nav-menu > li:nth-last-child(2) > .dropdown,
.nav-menu > li:nth-last-child(3) > .dropdown { left: auto; right: 0; }
.nav-menu > li:hover > .dropdown,
.nav-menu > li:focus-within > .dropdown { opacity: 1; visibility: visible; transform: translateY(0); }
/* Even six pixels is motion someone may have asked not to see. */
@media (prefers-reduced-motion: reduce) {
  .dropdown, .nav-chevron { transition: none; }
}
.dropdown a {
  display: block; padding: 10px 14px; border-radius: 4px;
  font-size: 14px; font-weight: 500; color: var(--ink);
}
.dropdown a:hover { background: var(--color-grey-light); color: var(--color-navy); }

.navbar .btn { min-height: 44px; padding: 12px 24px; font-size: 14px; }

/* ============ Hero ============ */
.hero { background: linear-gradient(180deg, var(--bg) 0%, var(--color-grey-light) 100%); }
.hero__inner { display: flex; align-items: stretch; gap: 40px; }
.hero__copy { flex: 1 1 0; display: flex; flex-direction: column; gap: 22px; padding: 88px 0; }
.hero__copy p.lede { font-size: 19px; line-height: 1.6; max-width: 540px; }
.hero__copy p.support { font-size: 16px; max-width: 560px; }
.hero__actions { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 6px; }
.hero__visual {
  flex: 0 0 480px; position: relative; display: flex; align-items: flex-end;
  justify-content: center; background: var(--color-navy); overflow: hidden;
  border-radius: 0 0 0 8px;
}
.hero__visual .dots { position: absolute; top: 36px; left: 36px; }
.hero__visual .dots span { width: 12px; height: 12px; }
.hero__hex-1 { position: absolute; right: -60px; top: 60px; width: 180px; height: 200px; background: var(--hex-fill-blue); }
.hero__hex-2 { position: absolute; right: 60px; bottom: -40px; width: 140px; height: 156px; background: var(--hex-fill-teal-hero); }
.hero__visual img { position: relative; width: 420px; max-width: 92%; display: block; }

/* ============ Trust band ============ */
.trustband { border-bottom: 1px solid var(--color-grey-blue); background: var(--bg); }
.trustband__inner { display: flex; align-items: center; justify-content: center; gap: 18px; flex-wrap: wrap; padding: 26px 0; }
.trustband__label { font-size: 12px; font-weight: 700; letter-spacing: 0.14em; color: var(--color-grey-90); }
/* The five award badges arrive at five different sizes, from 121x158 to 193x134.
   Each one now gets a cell of the same width and is centred inside it, so the
   row sits on an even pitch instead of the ragged one their own widths gave it —
   that unevenness, more than the size, was what made the strip read as clutter.
   64px is the ceiling, not a preference: the smallest artwork is 193x134, which
   at 64 CSS px still has device pixels to spare on a retina screen and starts
   upscaling above 67. Do not raise it, and do not crop the smallest badge to its
   ink — that logotype is knocked white out of a dark plate and would disappear
   against this white band. */
.trustband__badge { height: 64px; display: block; flex: 0 0 124px; width: 124px; object-fit: contain; }
.trustband__inner { gap: 26px; }
@media (max-width: 560px) {
  .navbar__utility { gap: 12px; padding-top: 10px; } .trustband__badge { height: 52px; flex: 0 0 96px; width: 96px; } .trustband__inner { gap: 16px; } }
.badge-slot {
  border: 1px solid var(--color-grey-c8); border-radius: 4px; padding: 12px 18px;
  font-size: 12px; font-weight: 500; color: var(--ink);
}
.badge-slot--pending { border-style: dashed; border-color: var(--accent); color: var(--accent); }

/* ============ Stats ============ */
.stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; }
.stat { border-top: 4px solid var(--color-purple); padding-top: 20px; display: flex; flex-direction: column; gap: 8px; }
.stat:nth-child(2) { border-top-color: var(--color-blue); }
.stat:nth-child(3) { border-top-color: var(--color-sky); }
.stat:nth-child(4) { border-top-color: var(--color-teal); }
.stat__value { font-size: 44px; font-weight: 700; color: var(--color-navy); line-height: 1; }
.stat p { font-size: 15px; line-height: 1.5; }

/* ============ Cards ============ */
.section__head { display: flex; flex-direction: column; gap: 12px; margin-bottom: 40px; }
.section__head--center { align-items: center; text-align: center; }
.section__head--split { flex-direction: row; justify-content: space-between; align-items: flex-end; gap: 24px; }
/* A long heading above a photo and its copy runs across the block, its first
   line full width, instead of the balanced pair of short lines headings get;
   'pretty' still keeps a single word off the last line. */
.section__head--across h2 { text-wrap: pretty; }

.card-grid { display: grid; gap: 28px; }
.card-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.card-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
/* A column of cards standing beside something taller than they are. Without
   this the rows stretch to fill the neighbour and each card grows a pocket of
   empty space under its own text. */
.card-grid--stack { align-content: start; }
.card-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.card {
  background: var(--bg); border-radius: 8px; padding: 32px;
  display: flex; flex-direction: column; gap: 14px;
  border-top: 5px solid var(--color-navy);
  box-shadow: var(--shadow-card);
}
.card--blue { border-top-color: var(--color-blue); }
.card--sky { border-top-color: var(--color-sky); }
.card p { font-size: 15px; }
/* Two-line box headings: the dividing bar is out and the second half drops to
   its own line. A span rather than a <br> so the pause survives being read
   aloud — the space before it is what a screen reader hears as the break. */
.card h3 .card__h3-line { display: block; }

/* A card is a flex column, so every child fills its width unless it says
   otherwise, and a heading inside one still answers to the page scale. Both
   defaults are wrong here and they compound: at 38px a four-word title breaks
   over three lines in a 300px column, the chip and the button stretch edge to
   edge as if they were full-width controls, and the call to action lands
   wherever the copy above it happens to end - 150px, 160px, 123px down three
   cards of the same height, which is what makes a tidy grid read as crooked.

   So: a card heading takes the same 22px an h3 already gets, because inside a
   card the heading level is a question about document structure and not about
   size - the 19 cards that use h3 have read correctly all along. The two things
   that are not full-width controls stop pretending to be - the chip sits at the
   start of its line the way a label does, the call to action is centred the way
   a card's one action should be - and a trailing button is pushed to the floor
   of the card, so cards in a row end on one line whatever their copy does. */
.card > h2 { font-size: 22px; line-height: 1.3; }
.card > .chip { align-self: flex-start; }
.card > .btn { align-self: center; }
.card > .btn:last-child { margin-top: auto; }
.card > ul {
  margin: 0; padding-left: 20px; font-size: 15px; line-height: 1.5;
  display: flex; flex-direction: column; gap: 6px;
}

.pill {
  align-self: flex-start; background: var(--accent-2); color: var(--ink-on-dark);
  font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
  padding: 5px 12px; border-radius: 999px;
}

.tile {
  border: 1px solid var(--color-grey-blue); border-radius: 8px; padding: 26px;
  display: flex; flex-direction: column; gap: 12px; background: var(--bg);
}
.tile:hover { border-color: var(--color-blue); box-shadow: var(--shadow-card); }
.tile svg { flex: 0 0 auto; }
.tile h3 { font-size: 17px; line-height: 1.4; }
.tile p { font-size: 14.5px; line-height: 1.55; color: var(--ink); }
.tile--note { border-style: dashed; border-color: var(--color-grey-c8); background: var(--color-yellow-light); justify-content: center; }

.numcard { background: var(--color-grey-light); border-radius: 8px; padding: 32px; display: flex; flex-direction: column; gap: 12px; }
.numcard__no { font-size: 30px; font-weight: 700; color: var(--color-purple); }
.numcard:nth-child(2) .numcard__no { color: var(--color-blue); }
.numcard:nth-child(3) .numcard__no { color: var(--color-sky); }
.numcard:nth-child(4) .numcard__no { color: var(--color-teal); }
.numcard h3 { font-size: 18px; letter-spacing: 0.02em; }
.numcard p { font-size: 15px; }

/* Resource cards */
.rescard { border: 1px solid var(--color-grey-blue); border-radius: 8px; overflow: hidden; display: flex; flex-direction: column; background: var(--bg); }
.rescard__bar { height: 8px; background: linear-gradient(90deg, var(--color-purple), var(--color-blue), var(--color-sky)); }
.rescard__body { padding: 24px; display: flex; flex-direction: column; gap: 10px; }
.rescard__type { font-size: 11px; font-weight: 700; letter-spacing: 0.12em; color: var(--accent-2); text-transform: uppercase; }
.rescard h3 { font-size: 17px; line-height: 1.4; }

/* ============ Framework band ============ */
/* Their own framework slide stacks it: headline + sub-head on top, the hexagon
   chain spanning the full width beneath — not a two-column split. */
.framework__inner { display: flex; flex-direction: column; gap: 44px; }
.framework__copy { display: flex; flex-direction: column; gap: 18px; max-width: 760px; }
.framework__copy p { font-size: 17px; }
/* Centred variant, as asked for on the home page: the column itself, the type
   inside it, and the button row (a flex row, which would otherwise stay left). */
.framework__copy--center { align-items: center; text-align: center; margin-inline: auto; }
.framework__copy--center .hero__actions { justify-content: center; }
/* Hexagon chain — outlined hexagons that touch in one row, each holding a
   thin-line icon, labels alternating above/below. This mirrors how Anatomy IT
   actually draws the motif on their own framework slide and Graphical Elements
   page (both from their "We are expanding this" set, so treat as directional). */
.hexchain {
  flex: 0 0 auto; list-style: none; margin: 0; padding: 0;
  display: flex; align-items: center; justify-content: center;
}
.hexchain__step {
  display: flex; flex-direction: column; align-items: center;
  /* pitch == hexagon width, so neighbours meet point-to-point like their slide */
  flex: 0 0 122px; margin-inline: -2px;
}
.hexchain__step:nth-child(even) { flex-direction: column-reverse; }
.hexchain__hex { width: 118px; height: 132px; display: block; flex: 0 0 auto; }
.hexchain__hex polygon { fill: none; stroke-width: 3; stroke-linejoin: round; }
.hexchain__hex .hexchain__glyph { fill: none; stroke: var(--color-navy); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.hexchain__label {
  font-size: 13.5px; font-weight: 700; line-height: 1.35; text-align: center;
  padding: 12px 6px; min-height: 62px; display: flex; align-items: center;
  justify-content: center;
}
.section--dark .hexchain__hex .hexchain__glyph { stroke: var(--ink-on-dark); }
.section--dark .hexchain__label { color: var(--color-grey-light); }

@media (max-width: 900px) {
  .hexchain { flex-wrap: wrap; gap: 8px 0; }
  .hexchain__step { flex: 0 1 33.333%; }
  .hexchain__hex { width: 100px; height: 112px; }
}
@media (max-width: 560px) {
  .hexchain__step { flex: 0 1 50%; }
  .hexchain__label { min-height: 0; padding: 8px 2px; font-size: 12.5px; }
}

/* ============ CTA band ============ */
.ctaband { position: relative; text-align: center; }
.ctaband::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 6px;
  background: linear-gradient(90deg, var(--color-purple), var(--color-blue), var(--color-sky));
}
.ctaband__inner { display: flex; flex-direction: column; align-items: center; gap: 20px; }
.ctaband p { max-width: 560px; }

/* ============ Page hero (inner pages) ============ */
.pagehero { position: relative; background: var(--color-navy); overflow: hidden; }
/* padding-block only -- a shorthand here wipes .container's 24px gutter, and this
   element carries both classes on 106 pages, so the hero copy ran edge to edge
   on every one of them below 1200px. */
.pagehero__inner { position: relative; display: flex; flex-direction: column; gap: 18px; padding-block: 76px; }
.pagehero__hex-1 { position: absolute; right: -50px; top: -60px; width: 220px; height: 244px; background: var(--hex-fill-blue); }
.pagehero__hex-2 { position: absolute; right: 180px; bottom: -80px; width: 150px; height: 166px; background: var(--hex-fill-teal-pagehero); }
.pagehero h1 { color: var(--ink-on-dark); max-width: 780px; }
.pagehero .lede { font-size: 17px; line-height: 1.75; color: var(--color-grey-light); max-width: 760px; }
.breadcrumbs { display: flex; gap: 8px; align-items: center; font-size: 13px; }
.breadcrumbs a { color: var(--color-sky); font-weight: 500; }
.breadcrumbs span[aria-hidden] { color: var(--color-blue); }
.breadcrumbs em { font-style: normal; color: var(--color-grey-light); font-weight: 500; }

/* Alternating feature rows */
.featrow { display: flex; align-items: center; gap: 56px; }
/* A row whose copy is shorter than its picture leaves a band of nothing between
   the heading and the first line of text, because the copy is centred against
   the taller column. This lifts the copy to the top so the heading and its
   paragraph read as one thing. Asked for on three blocks by name. */
.featrow--top { align-items: flex-start; }
.featrow__copy { flex: 1 1 0; display: flex; flex-direction: column; gap: 16px; }
.featrow__copy .eyebrow { letter-spacing: 0.18em; }
.featrow__copy h2 { font-size: 28px; line-height: 1.3; }
/* "Tighten up the space." The copy column is a flex column on a 16px rhythm, but
   an unclassed list brings its own 16px margins and the button row adds six more,
   so the same column ran 16, 16, 32, 38. Everything sits on the 16 now. */
.featrow__copy > ul { margin-block: 0; }
.featrow__copy > .hero__actions { margin-top: 0; }
/* And the bands themselves close up: 80 above and below put 160px between two
   feature rows, which is what reads as loose when four of them run together. */
.section--tight { padding: 56px 0; }
.featrow__media {
  flex: 0 0 440px; min-height: 270px; border-radius: 8px;
  background: var(--color-grey-light); border: 1px dashed var(--color-grey-c8);
  display: flex; align-items: center; justify-content: center; padding: 20px;
}
.featrow__media p { font-size: 13px; font-weight: 500; color: var(--color-grey-90); text-align: center; }
.featrow--flip { flex-direction: row-reverse; }
.section--alt .featrow__media { background: var(--bg); }

/* ============ Footer ============ */
.footer { background: var(--bg); border-top: 1px solid var(--color-grey-blue); }
/* Six sections, so six tracks: the brand, then one for each menu. They used to
   share five, which put Resources underneath Company in the same column instead
   of beside it. The link tracks take the width their own words need and the row
   spreads what is left evenly between them, so the space you see between any two
   columns is the same - equal-width tracks made the gaps look uneven, because a
   column of short words leaves a wide ragged margin and a column of long ones
   leaves none. */
.footer__grid {
  display: grid; grid-template-columns: minmax(240px, 2fr) repeat(5, max-content);
  justify-content: space-between; gap: 28px; padding: 60px 0 40px;
}
/* Tracks that take the width of their own words cannot shrink, so below the width
   where all six still fit the row would push the page sideways. Measured: six fit
   at 1200 and not at 1100, so the three-column stack starts here rather than at
   the 1080 it used to. */
@media (max-width: 1199px) {
  .footer__grid { grid-template-columns: repeat(3, 1fr); justify-content: stretch; }
}
.footer__brand { display: flex; flex-direction: column; gap: 16px; }
.footer__brand img { height: 38px; width: auto; align-self: flex-start; }
.footer__brand p { font-size: 13.5px; max-width: 260px; }
.footer__social { display: flex; gap: 10px; }
.footer__social a {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--color-grey-light); color: var(--ink-heading);
  transition: background-color 150ms ease, color 150ms ease;
}
.footer__social a:hover, .footer__social a:focus-visible { background: var(--accent); color: var(--ink-on-dark); }
.footer__social svg { width: 18px; height: 18px; }
.footer h4 { font-size: 13px; letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 2px; }
.footer__col { display: flex; flex-direction: column; gap: 10px; }
.footer__col a { font-size: 13px; color: var(--ink); }
.footer__col a:hover { color: var(--color-navy); }
.footer__badges {
  display: flex; justify-content: center; gap: 14px; flex-wrap: wrap;
  padding: 20px 0; border-top: 1px solid var(--color-grey-blue); border-bottom: 1px solid var(--color-grey-blue);
}
/* Half the height of the band under the top block, in cells of a fixed width so
   the five sit on an even pitch: the artwork is five different shapes and left
   to itself the row reads as clutter. 40px keeps every mark inside its own
   resolution - the smallest source is 134px tall. */
.footer__badge {
  height: 40px; width: 84px; flex: 0 0 84px;
  object-fit: contain; display: block;
}
.footer__legal { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; padding: 20px 0 28px; }
.footer__legal p, .footer__legal a { font-size: 12.5px; color: var(--color-grey-90); }
.footer__legal a:hover { color: var(--color-navy); }
.footer__legal nav { display: flex; align-items: center; gap: 24px; }
.footer__legal nav a { display: inline-flex; align-items: center; gap: 5px; }
.footer__legal nav svg { flex: 0 0 auto; }

/* ============ Utility ============ */
.visually-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ============ Responsive ============ */
@media (max-width: 1080px) {
  /* The full bar - logo, five menus and the call-to-action - needs about 1040px
     of window before it stops pushing past the right edge. Between the point
     where the menu turns into a hamburger and that figure it was the second
     cause of the sideways scrollbar, on top of the panels above. So the spacing
     tightens here: the logo comes down to 36px (the brand floor is 30px, and the
     small-screen rule further down already uses 34px), the gaps and the padding
     around each label close up, and the button loses a little width. Type size
     and colour are untouched, every label stays on the bar, and the tap targets
     stay at least 44px tall. Measured: no horizontal overflow at any window
     width from 901px up. */
  .navbar__inner { gap: 16px; }
  .navbar__logo img { height: 36px; }
  .nav-menu { gap: 4px; }
  .nav-menu > li > a,
  .nav-menu > li > .nav-menu__parent { padding: 12px 8px; }
  .navbar .btn { padding: 12px 18px; }
  .hero__visual { flex-basis: 400px; }
  .hexgrid { flex-basis: 420px; }
  .card-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer__grid { grid-template-columns: repeat(3, 1fr); }
  .footer__brand { grid-column: span 3; }
}

@media (max-width: 900px) {
  .section { padding: 56px 0; }
  .nav-toggle { display: block; }
  .nav-menu {
    display: none; position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--bg); border-bottom: 1px solid var(--color-grey-blue);
    box-shadow: var(--shadow-nav-menu); padding: 8px 16px 16px;
  }
  .nav-menu.is-open { display: flex; }
  /* Back to a block: the submenu is in the flow here, under its label, not a
     flex sibling beside it. And there is no gap left to bridge. */
  .nav-menu > li { display: block; }
  .nav-menu > li::after { content: none; }
  .nav-menu > li > a,
  .nav-menu > li > .nav-menu__parent { display: flex; width: 100%; min-height: 48px; }
  /* Every dropdown is already permanently open here (below), so a chevron
     that implies "tap to expand" would be a broken promise. */
  .nav-chevron { display: none; }
  /* Opacity has to come back with the rest of it. The submenu is hidden at rest
     on a wide screen by four properties at once, and resetting three of them
     left every submenu here holding its full height while painting nothing - an
     open menu that looked like three headings adrift in white, until a tap put
     focus inside one and faded that one in. */
  .dropdown {
    position: static; visibility: visible; opacity: 1; pointer-events: auto;
    transform: none; transition: none;
    border: 0; box-shadow: none; padding: 0 0 8px 16px; min-width: 0;
  }
  .navbar .btn { display: none; }
  .hero__inner { flex-direction: column; gap: 0; }
  .hero__copy { padding: 48px 0; }
  .hero__visual { flex-basis: auto; width: 100%; border-radius: 8px 8px 0 0; min-height: 320px; }
  .framework__inner { flex-direction: column; align-items: flex-start; }
  .hexgrid { flex-basis: auto; width: 100%; }
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .card-grid--3, .card-grid--2 { grid-template-columns: 1fr; }
  .featrow, .featrow--flip { flex-direction: column; align-items: stretch; }
  .featrow__media, .reportshot { flex-basis: auto; }
  .section__head--split { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 560px) {
  /* 34px keeps us clear of the brand's 30px minimum while the row still fits */
  .navbar__logo img { height: 34px; }
  .stats { grid-template-columns: 1fr 1fr; gap: 20px; }
  .stat__value { font-size: 32px; }
  .card-grid--4 { grid-template-columns: 1fr; }
  .hero__actions .btn { width: 100%; }
  .footer__grid { grid-template-columns: 1fr 1fr; }
  .footer__brand { grid-column: span 2; }
}

/* ============================================================================
   CONTENT COMPONENTS
   Added for the migrated-content build (blog, news, leadership, webinars,
   client spotlights, insights & guides). Everything above this line is
   untouched. All colors/fonts come from tokens.css; radii 8px; shadows use the
   same soft-navy rgba as the base cards; breakpoints stay at 1080/900/560.
   ============================================================================ */

/* ---------- Long-form article body ---------- */
.prose { max-width: 68ch; }
/* A long URL or an unbroken run of characters in a post wraps inside the
   column instead of running past it and the screen edge. */
.prose { overflow-wrap: break-word; }
/* "Have copy go all the way across. Looks awkward with white space." Applies to the
   Leadership intro only; .prose keeps its 68ch measure everywhere else. */
.prose--full { max-width: none; }
/* A prose block that opens a column or a section with a heading: the heading
   starts at the top edge, level with whatever sits beside it. */
.prose--flush > :first-child { margin-top: 0; }
.prose > * + * { margin-top: 1.3em; }
.prose p, .prose li { font-size: 17px; line-height: 1.8; }
.prose h2 { font-size: 26px; margin-top: 2em; }
.prose h3 { font-size: 20px; margin-top: 1.8em; }
.prose h4 { font-size: 17px; margin-top: 1.6em; }
.prose h2 + p, .prose h3 + p, .prose h4 + p { margin-top: 0.8em; }
.prose strong { color: var(--ink-heading); }
.prose a { font-weight: 500; text-decoration: underline; text-underline-offset: 3px; }
.prose a:not(.btn):hover { color: var(--ink-heading); }
/* A button-styled link inside prose copy (e.g. the LinkedIn button on a
   speaker card) should look like every other button, not like inline text —
   and must keep its own hover colors, since --ink-heading above is the same
   navy as the button's hover background and would erase it. */
.prose .btn, .prose .btn:hover { text-decoration: none; }
.prose ul, .prose ol { margin-left: 0; padding-left: 24px; }
.prose li + li { margin-top: 8px; }
/* A list whose items carry a check mark instead of a bullet, set bold, as the
   previous site set the value list of the Connectivity campaign page; the mark
   takes the site's purple. */
.prose ul.ticklist { list-style: none; padding-left: 0; }
.prose .ticklist li { position: relative; padding-left: 30px; font-weight: 700; color: var(--ink-heading); }
.prose .ticklist li::before { content: "\2713"; position: absolute; left: 4px; top: 0; color: var(--color-purple); }
.prose blockquote {
  margin: 0; padding: 22px 28px;
  border-left: 5px solid var(--color-purple);
  background: var(--color-grey-light); border-radius: 0 8px 8px 0;
}
.prose blockquote p { font-size: 18px; font-weight: 500; color: var(--color-navy); }
.prose blockquote > * + * { margin-top: 0.8em; }
/* A quote card with a badge on its right, the text wrapping round it (the MSP
   Summit quote on /mgma). flow-root keeps the floated badge inside the card. */
.prose blockquote.quotecard-badge { display: flow-root; }
.prose > * + blockquote.quotecard-badge { margin-top: 1.3em; }
.quotecard-badge-row { margin-top: 28px; }   /* the card on its own row under a card-grid */
.prose .quotecard-badge__img {
  float: right; width: 120px; height: auto; margin: 0 0 12px 20px; border-radius: 6px;
}
.prose blockquote.quotecard-badge > .quotecard-badge__img + p { margin-top: 0; }
.prose figure { margin: 0; }
.prose img { display: block; border-radius: 8px; }
/* The HIPAA Tips roundup images sit at 240px on the right with the text
   wrapping round them, as asked; on phones they drop back above the text. Each
   image comes before its h2 in the page, so its top margin matches the h2's
   (2em of 26px) to line the image up with the top of the heading. The September
   and August images are listed by name; their folders hold other posts' too.
   A list's bottom margin would push the image (not the h2) down, so the block
   before one of these images drops it; the h2's larger margin keeps the gap. */
.prose :is(
  img[src*="/image-bank/hipaa-tip-"],
  img[src*="/migrated/2026/09/HIPAA-Tip-Tuesday-2.png"],
  img[src*="/migrated/2026/09/1787666363953.jpeg"],
  img[src*="/migrated/2026/09/1786977768373.jpeg"],
  img[src*="/migrated/2026/09/1786385939143.jpeg"],
  img[src*="/migrated/2026/08/HIPAA-Tip-Tuesday-2-1024x1024.png"],
  img[src*="/migrated/2026/08/1785246642083.jpeg"],
  img[src*="/migrated/2026/08/1784658124281.jpeg"],
  img[src*="/migrated/2026/08/1784052022091.jpeg"]) {
  float: right; clear: right; width: 240px; height: auto; margin: 52px 0 16px 28px;
}
.prose > :has(+ figure > :is(
  img[src*="/image-bank/hipaa-tip-"],
  img[src*="/migrated/2026/09/HIPAA-Tip-Tuesday-2.png"],
  img[src*="/migrated/2026/09/1787666363953.jpeg"],
  img[src*="/migrated/2026/09/1786977768373.jpeg"],
  img[src*="/migrated/2026/09/1786385939143.jpeg"],
  img[src*="/migrated/2026/08/HIPAA-Tip-Tuesday-2-1024x1024.png"],
  img[src*="/migrated/2026/08/1785246642083.jpeg"],
  img[src*="/migrated/2026/08/1784658124281.jpeg"],
  img[src*="/migrated/2026/08/1784052022091.jpeg"])) { margin-bottom: 0; }
@media (max-width: 560px) {
  .prose :is(
    img[src*="/image-bank/hipaa-tip-"],
    img[src*="/migrated/2026/09/HIPAA-Tip-Tuesday-2.png"],
    img[src*="/migrated/2026/09/1787666363953.jpeg"],
    img[src*="/migrated/2026/09/1786977768373.jpeg"],
    img[src*="/migrated/2026/09/1786385939143.jpeg"],
    img[src*="/migrated/2026/08/HIPAA-Tip-Tuesday-2-1024x1024.png"],
    img[src*="/migrated/2026/08/1785246642083.jpeg"],
    img[src*="/migrated/2026/08/1784658124281.jpeg"],
    img[src*="/migrated/2026/08/1784052022091.jpeg"]) { float: none; margin: 24px 0 0; }
}
.prose figcaption { margin-top: 10px; font-size: 13px; line-height: 1.6; color: var(--color-grey-90); }
.prose hr {
  border: 0; height: 4px; width: 180px; border-radius: 2px; margin: 44px 0;
  background: linear-gradient(90deg, var(--color-purple), var(--color-blue), var(--color-sky));
}
.prose code {
  background: var(--color-grey-light); border: 1px solid var(--color-grey-blue);
  border-radius: 4px; padding: 2px 6px; font-size: 0.92em;
}
.prose__scroll { overflow-x: auto; }
.prose table { border-collapse: collapse; width: 100%; font-size: 15px; }
.prose th, .prose td { border: 1px solid var(--color-grey-blue); padding: 10px 14px; text-align: left; vertical-align: top; }
.prose th { background: var(--color-grey-light); color: var(--ink-heading); font-weight: 700; }
/* A table written as a pipe table in a post's source (see TABLES in
   tools/generate.py). Up to three columns fit the width of the text on a phone.
   A table of four or more (--wide) keeps a readable minimum width and scrolls
   inside its wrapper instead, so the page itself never overflows and the
   columns do not squeeze to one word per line. A first column of short codes
   (--keyed) stays on one line. */
.prose .table-wrap { overflow-x: auto; }
.prose .table-wrap:focus-visible { outline: 3px solid var(--color-sky); outline-offset: 3px; border-radius: 4px; }
.prose .table-wrap--wide table { min-width: 34em; }
.prose .table-wrap--keyed td:first-child { white-space: nowrap; }
/* On a phone the cells tighten, and a heading cell may break inside a long
   word ("Mandatory/Voluntary"), so three columns still fit the text width. */
@media (max-width: 600px) {
  .prose .table-wrap th, .prose .table-wrap td { padding: 8px; font-size: 14px; }
  .prose .table-wrap th { overflow-wrap: anywhere; }
}
/* The boxes in a post body: the :::author-bio, :::tldr and :::callout blocks of
   its source (see BOXES in tools/generate.py). The previous site drew its author
   box as a light panel with a purple rule on the left and a small photo beside
   the text. Here every photo placed directly in the box is set round at 72px,
   beside the text that follows it; a joint post has one per author, each
   starting below the one before. The TL;DR box takes the sky blue, the callout
   a light purple. */
.prose .author-bio, .prose .tldr, .prose .callout {
  padding: 22px 24px; border-radius: 8px; border-left: 4px solid var(--color-purple);
}
.prose .author-bio { display: flow-root; background: var(--color-grey-light); }
.prose .tldr { background: var(--tint-sky-panel); border-left-color: var(--color-sky); }
.prose .callout { background: var(--wash-purple-soft); }
.prose .author-bio > * + *, .prose .tldr > * + *, .prose .callout > * + * { margin-top: 0.8em; }
.prose .author-bio > :first-child, .prose .tldr > :first-child, .prose .callout > :first-child { margin-top: 0; }
.prose .author-bio > figure { float: left; clear: left; width: 72px; margin-right: 18px; }
.prose .author-bio > figure img {
  width: 72px; height: 72px; border-radius: 50%; object-fit: cover;
}
/* The text after a photo takes the photo's own top margin, so the two start
   level, and is at least as tall as it, so whatever follows (the bio, or the
   next author's photo) starts below the photo. */
.prose .author-bio > figure + * { min-height: 72px; }
.prose .author-bio > figure:first-child + * { margin-top: 0; }

/* A click-to-open section in a post body: the :::accordion block of its source,
   which the previous site used to fold away a long list of measures. Same
   native <details> as a FAQ question, so it opens on click, on Enter and on
   Space and needs no script, and the same chevron, focus ring and reduced-
   motion rule; it is closed to begin with, as it was there. The content stays
   in the markup when closed, so a crawler and the Markdown twin still read it. */
.prose details.accordion {
  background: var(--bg); border-radius: 8px; padding: 14px 22px;
  border-left: 5px solid var(--color-blue);
  box-shadow: var(--shadow-card-subtle);
}
.prose details.accordion + details.accordion { margin-top: 0.6em; }
.prose details.accordion > summary {
  cursor: pointer; list-style: none;
  display: flex; align-items: flex-start; justify-content: space-between; gap: 16px;
  padding: 8px 0;
  font-size: 19px; font-weight: 700; line-height: 1.35; color: var(--ink-heading);
}
.prose details.accordion > summary::-webkit-details-marker { display: none; }
.prose details.accordion > summary::after {
  content: ""; flex: 0 0 auto; margin-top: 7px;
  width: 9px; height: 9px;
  border-right: 2px solid var(--color-blue); border-bottom: 2px solid var(--color-blue);
  transform: rotate(45deg); transition: transform 150ms ease;
}
.prose details.accordion[open] > summary::after { transform: rotate(-135deg); margin-top: 11px; }
.prose details.accordion > summary:focus-visible { outline: 3px solid var(--color-sky); outline-offset: 3px; border-radius: 4px; }
.prose details.accordion:not([open]) > :not(summary) { display: none; }
@media (prefers-reduced-motion: reduce) { .prose details.accordion > summary::after { transition: none; } }
.prose .accordion__body { margin-top: 12px; }
.prose .accordion__body > * + * { margin-top: 1em; }

/* ---------- Post title block ---------- */
.article-header { display: flex; flex-direction: column; gap: 16px; }
.article-header h1 { font-size: clamp(28px, 3.4vw, 44px); }
.article-meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px;
  font-size: 14px; color: var(--ink);
}
.article-meta strong { font-weight: 700; }
.article-meta__sep { color: var(--color-grey-c8); }
.pagehero .article-meta { color: var(--color-grey-light); }
.pagehero .article-meta strong { color: var(--ink-on-dark); }
.pagehero .article-meta__sep { color: var(--color-blue); }
/* Under 900px the byline takes its own line below the date, so the dot that
   separates them on one line is not left at the end of the date line. */
@media (max-width: 900px) {
  .article-meta__sep:has(+ strong) { display: none; }
  .article-meta strong { flex-basis: 100%; }
}
.pagehero .article-header .chip { background: transparent; border-color: var(--color-sky); color: var(--color-sky); }

/* ---------- Index rows / cards ---------- */
.listing { display: flex; flex-direction: column; border-top: 1px solid var(--color-grey-blue); }
.listing__item {
  display: grid; grid-template-columns: 190px minmax(0, 1fr); gap: 12px 32px;
  padding: 28px 0; border-bottom: 1px solid var(--color-grey-blue);
}
.listing__side { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.listing__date { font-size: 13px; font-weight: 700; letter-spacing: 0.06em; color: var(--color-grey-90); }
.listing__body { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.listing__title { font-size: 20px; line-height: 1.35; }
.listing__title a { color: var(--ink-heading); }
.listing__title a:hover { color: var(--link); }
.listing__excerpt { font-size: 15px; line-height: 1.7; }
.listing--media .listing__item { grid-template-columns: 260px minmax(0, 1fr); }
.listing--media .listing__side { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 10px 12px; }
.listing__thumb {
  width: 100%; aspect-ratio: 1024 / 538; overflow: hidden;
  border-radius: 8px; border: 1px solid var(--color-grey-blue);
  background: var(--color-grey-light);
}
.listing__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* The colour tiles that stand in the thumbnail's place on the two migrated
   series. Same box as a photograph, so every card in the list lines up. The
   label is set large and bold because white on the brand purple is 4.0:1,
   which passes as large text and not as body text. */
.listing__thumb--tile {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 10px; padding: 16px; border: 0; color: var(--ink-on-dark); text-align: center;
}
.listing__thumb--navy { background: var(--color-navy); }
.listing__thumb--purple { background: var(--color-purple); }
/* The general rule further down sets every svg in a listing to the heading
   colour; on a coloured tile the mark has to follow the tile's own text. */
.listing .listing__thumb--tile svg { width: 44px; height: 44px; flex: 0 0 auto; color: var(--ink-on-dark); }
.listing__tile-label { font-size: 19px; font-weight: 700; line-height: 1.2; }

/* ---------- Category sort buttons (Blog, News, Webinars) ---------- */
/* One colour per category, as on the live pages. The fills are the brand
   tokens: the live stylesheet's own fills are already #5c88da / #5bc2e7 /
   #012169 / #8c6fca, so this is the same row of colours, sourced from
   tokens.css instead of from four hard-coded hexes.

   The ink is chosen per fill rather than white everywhere, which is what the
   live page does. White on Sky measures 2.0:1 and is not legible at button
   size, so Sky takes navy (7.3:1). Navy and Purple keep white (15.3:1 and
   4.0:1 — the same pairing .btn--cta has shipped with site-wide) and Light Blue
   keeps white at 3.5:1, both above the 3:1 floor for a control and matching the
   live page. ALL is the live page's own light grey, with navy ink because its
   purple-on-grey measures 3.6:1.

   The bar is hidden until the script reveals it, so it never appears where it
   cannot work. [hidden] needs saying twice over: a display rule of our own
   beats the browser's default for it. */
.filterbar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 32px; }
.filterbar[hidden] { display: none; }
/* The status line at the end of the bar is visually hidden, except on the Blog
   while a search is active: then the script shows its count on a line of its
   own under the buttons. */
.filterbar__status { flex-basis: 100%; font-size: 15px; line-height: 1.7; }

/* The search row above the bar on the Blog list: label, field, purple button,
   in the order the live page has them. Same two rules as the bar — it is hidden
   until the script reveals it, and [hidden] has to be repeated because the
   display rule on the line above would otherwise win.
   The field is wide and the button never shrinks, so at 390px the button drops
   to a line of its own instead of squeezing the field to nothing. The border is
   Grey 90 rather than the lighter greys: at 3.2:1 on white it is a boundary a
   low-vision reader can find (the 3:1 floor for a control), where the next grey
   down the scale is 2.4:1. The button is the site's purple CTA button, minus the uppercase every
   other button takes — the live control reads "Search", not "SEARCH". */
.searchbar { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-bottom: 20px; }
.searchbar[hidden] { display: none; }
.searchbar__label { font-size: 15px; color: var(--ink); }
.searchbar__input {
  flex: 1 1 240px; min-width: 0; min-height: 48px; padding: 12px 16px;
  font-family: var(--font-sans); font-size: 15px;
  border: 1px solid var(--color-grey-90); border-radius: 8px;
  background: var(--bg); color: var(--ink);
}
.searchbar__btn { flex: 0 0 auto; text-transform: none; border-radius: 8px; }
/* Shown only when a query matches nothing. It is not a live region: the count
   is announced by the one status line in the bar. */
.listing__empty { padding: 28px 0; font-size: 15px; line-height: 1.7; }
.listing__empty[hidden] { display: none; }
.filterbar__btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; padding: 10px 26px; border-radius: 999px;
  font-family: var(--font-sans); font-size: 13px; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase; text-align: center;
  border: 1px solid transparent; cursor: pointer;
  background: var(--bg); color: var(--ink-heading);
}
.filterbar__btn--all { background: var(--color-grey-light); border-color: var(--color-grey-blue); color: var(--ink-heading); }
.filterbar__btn--blue { background: var(--color-blue); color: var(--ink-on-dark); }
.filterbar__btn--sky { background: var(--color-sky); color: var(--color-navy); }
.filterbar__btn--navy { background: var(--color-navy); color: var(--ink-on-dark); }
.filterbar__btn--purple { background: var(--color-purple); color: var(--ink-on-dark); }
/* Which one is on cannot be colour alone — every button is already a different
   colour — so the pressed one is ringed and the others are dimmed. */
.filterbar__btn[aria-pressed="false"] { opacity: 0.75; }
.filterbar__btn:hover { opacity: 1; }
/* The ring cannot be currentColor: on every white-ink button that is white
   on a near-white page, so four of the eight had no visible pressed state. */
.filterbar__btn[aria-pressed="true"] { box-shadow: 0 0 0 3px var(--bg), 0 0 0 5px var(--ink-heading); }
.filterbar__btn--all[aria-pressed="true"] { box-shadow: 0 0 0 3px var(--bg), 0 0 0 5px var(--ink-heading); }

/* ---------- Webinar cards (the /webinars/ list) ---------- */
/* Two across, with every so often one running the full width: the live page
   shows two cards, then the next recording in full, then the rest. A card
   hidden by the sort buttons has to give up its grid slot as well. */
.wcards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; }
.wcards > [hidden], .listing__item[hidden] { display: none; }
.wcard {
  display: flex; flex-direction: column; background: var(--bg);
  border: 1px solid var(--color-grey-blue); border-radius: 8px;
  overflow: hidden; box-shadow: var(--shadow-card-subtle);
}
.wcard__media { display: block; width: 100%; aspect-ratio: 1024 / 474; background: var(--color-grey-light); }
.wcard__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.wcard__body { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding: 24px; }
.wcard__title { font-size: 19px; line-height: 1.35; }
.wcard__title a { color: var(--ink-heading); }
.wcard__title a:hover { color: var(--link); }
.wcard .text-link { margin-top: auto; padding-top: 4px; }

/* A webinar shown in full: at the top of the page, and once inside the grid in
   teal. Navy ink on teal measures 6.7:1. */
.wfeature { display: grid; grid-template-columns: 320px minmax(0, 1fr); gap: 36px; align-items: start; }
/* Same trap as the bar above: a display rule of ours outranks [hidden], so the
   feature above the list has to be told twice to go away. */
.wfeature[hidden] { display: none; }
.wfeature--nomedia { grid-template-columns: minmax(0, 1fr); }
.wfeature__media { display: block; border-radius: 12px; overflow: hidden; background: var(--color-grey-light); }
.wfeature__media img { width: 100%; height: auto; display: block; }
.wfeature__body { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.wfeature__title { font-size: 26px; line-height: 1.3; }
.wfeature__title a { color: var(--ink-heading); }
.wfeature__title a:hover { color: var(--link); }
.wfeature .prose { max-width: none; }
/* Tightened to read as one compact unit, as the featured webinar does on the
   old site: smaller copy, and its lines close together. */
.wfeature .prose > * + * { margin-top: 0.6em; }
.wfeature .prose p { font-size: 15px; line-height: 1.6; }
.wfeature--tint {
  grid-column: 1 / -1; background: var(--tint-sky-panel); color: var(--color-navy);
  border-radius: 12px; padding: 32px;
}
.wfeature--tint .wfeature__title a, .wfeature--tint .listing__date, .wfeature--tint .prose { color: var(--color-navy); }
.wfeature--tint .wfeature__title a:hover { color: var(--link); }

/* ---------- Article lead image ---------- */
.article-lead { margin: 0 0 32px; max-width: 68ch; }
.article-lead img { display: block; width: 100%; height: auto; border-radius: 8px; }

/* ---------- The column beside a blog post ---------- */
/* Search and the newest posts, the two the old site carried: beside the text
   on a wide screen, under it on anything narrower, so the links stay
   reachable on a phone. It is the column that asks for the two-track layout,
   through the :has() below: news items and press releases are built from the
   same template without one, and their text keeps the full width.
   Two rows, because the post may open with a lead image: with one the picture
   takes the first and the text the second, without one the second is empty
   and costs nothing, and the column spans both either way.
   Its heading is set at the size of a small one: the page scale starts at
   26px, which in a column this narrow would read as a second title. */
.article-aside {
  margin-top: 56px; padding-top: 36px;
  border-top: 1px solid var(--color-grey-blue);
}
.article-aside__search { display: grid; gap: 10px; margin: 0 0 36px; }
/* Same trap as the bar on the list: a display rule of ours outranks [hidden],
   so it has to be said again. The form is revealed by the script that does the
   searching, and stays away where that script has not run. */
.article-aside__search[hidden] { display: none; }
.article-aside__search .searchbar__btn { justify-self: start; }
.article-aside__title { font-size: 20px; }
.article-aside__list { list-style: none; margin: 16px 0 0; padding: 0; }
.article-aside__list a {
  display: block; padding: 8px 0;
  font-size: 15px; line-height: 1.5; color: var(--ink-heading);
}
.article-aside__list a:hover { color: var(--link); text-decoration: underline; }
@media (min-width: 1024px) {
  .section > .container:has(> .article-aside) {
    display: grid; align-items: start;
    grid-template-columns: minmax(0, 1fr) 300px;
    grid-template-rows: auto auto;
    column-gap: 56px;
  }
  .container > .article-aside {
    grid-column: 2; grid-row: 1 / -1;
    margin-top: 0; padding-top: 0; border-top: 0;
  }
}

/* ---------- Category label ---------- */
.chip {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 6px 14px; border-radius: 999px;
  border: 1px solid var(--color-grey-blue); background: var(--color-grey-light);
  color: var(--ink-heading);
  font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
}
a.chip, button.chip { min-height: 44px; padding: 10px 20px; }
a.chip:hover { border-color: var(--color-blue); color: var(--color-navy); }
.chip--active { background: var(--color-navy); border-color: var(--color-navy); color: var(--ink-on-dark); }
.chip--active:hover { color: var(--ink-on-dark); }
.chip--pending { background: var(--bg); border-style: dashed; border-color: var(--accent); color: var(--accent); }
.chip-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }

/* ---------- Leadership ---------- */
/* "Prefer as it is on current site with white background and 4 people across.
   Feels a bit tight with 5." The steps below (three at 1080px, two at 900px)
   are unchanged. */
.person-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 36px 28px; }
.person-card { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 12px; }
.person-card__photo {
  width: 150px; height: 150px; border-radius: 50%; object-fit: cover; display: block;
  background: var(--color-grey-light); border: 4px solid var(--color-grey-blue);
}
.person-card a:hover .person-card__photo { border-color: var(--color-blue); }
.person-card__name { font-size: 17px; line-height: 1.35; }
.person-card__name a { color: var(--ink-heading); }
.person-card__name a:hover { color: var(--link); }
.person-card__role {
  font-size: 11.5px; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--color-grey-90); line-height: 1.5;
}

.person-detail { display: flex; align-items: flex-start; gap: 56px; }
.person-detail__media { flex: 0 0 260px; display: flex; flex-direction: column; align-items: center; gap: 18px; }
.person-detail__photo {
  width: 240px; height: 240px; border-radius: 50%; object-fit: cover; display: block;
  background: var(--color-grey-light); border: 6px solid var(--color-grey-blue);
}
.person-detail__body { flex: 1 1 0; }

/* ---------- Responsive video ---------- */
.video-embed {
  position: relative; width: 100%; aspect-ratio: 16 / 9;
  background: var(--color-navy); border-radius: 8px; overflow: hidden;
  box-shadow: var(--shadow-elevated);
}
.video-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* ---------- Embedded form container ---------- */
.form-embed {
  border: 1px solid var(--color-grey-blue); border-radius: 8px; background: var(--bg);
  padding: 32px; box-shadow: var(--shadow-card);
}
.form-embed__head { display: flex; flex-direction: column; gap: 8px; margin-bottom: 20px; }
.form-embed__note { margin-top: 18px; font-size: 13px; line-height: 1.6; color: var(--color-grey-90); }
.form-embed noscript { display: block; }

/* ---------- Scorecard page: a short hero, the form in the centre ----------
   The form is what the page is for, so the hero only names it and the form
   follows at once in one centred column, wide enough for its own fields to
   breathe. What the analysis covers comes after the form, set apart by a rule
   and in smaller type, still in the body colour so it stays readable. */
.pagehero--compact .pagehero__inner { gap: 12px; padding-block: 40px; }
.pagehero--compact h1 { font-size: clamp(28px, 3vw, 40px); }
.pagehero--compact .lede { font-size: 16px; line-height: 1.65; max-width: 700px; }
.pagehero--compact .pagehero__hex-1 { width: 150px; height: 166px; top: -50px; }
.pagehero--compact .pagehero__hex-2 { display: none; }
.scorecard-page { padding-top: 48px; }
.scorecard-page__inner { max-width: 848px; }
@media (max-width: 700px) {
  .pagehero--compact .lede { font-size: 15px; line-height: 1.6; }
  .scorecard-page { padding-top: 32px; }
  /* The card's own padding would come on top of the page gutter; the form
     needs that width more than the card needs the air. */
  .scorecard-page .form-embed { padding: 20px 8px; }
}

/* ---------- Speaker block (photo + LinkedIn, inside a form-embed) ---------- */
.speaker { display: flex; align-items: center; gap: 16px; }
.speaker__photo {
  width: 144px; height: 144px; border-radius: 50%; object-fit: cover; flex: 0 0 auto;
  background: var(--color-grey-light); border: 3px solid var(--color-grey-blue);
}
.speaker__info { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.speaker__info p { margin: 0; }
/* The same box standing on its own under a centred heading, as on the MGMA page:
   it is as wide as what it holds and sits in the middle, and the text inside it
   stays left aligned. */
.speaker-feature { width: fit-content; max-width: 100%; margin: 0 auto 40px; }
/* A row of award marks with its label on a line of its own above them, as on the
   MGMA page: the marks start at the left edge on every width, in line with the
   copy above them, so a long label never leaves a mark alone on a line. */
.trustband__inner--stacked { justify-content: flex-start; }
.trustband__inner--stacked .trustband__label { flex-basis: 100%; }

/* ---------- Client logo row ---------- */
.logo-strip {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: 28px 48px; padding: 8px 0;
}
.logo-strip img { max-height: 60px; width: auto; display: block; }
.logo-strip a { display: inline-flex; align-items: center; min-height: 44px; }

/* ---------- Pagination ---------- */
.pagination { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; margin-top: 48px; }
.pagination a, .pagination span {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 44px; min-height: 44px; padding: 0 14px; border-radius: 4px;
  border: 1px solid var(--color-grey-blue);
  font-size: 14px; font-weight: 700; color: var(--ink-heading);
}
.pagination a:hover { border-color: var(--color-blue); background: var(--color-grey-light); }
.pagination [aria-current="page"] { background: var(--color-navy); border-color: var(--color-navy); color: var(--ink-on-dark); }
.pagination__gap { border-color: transparent; color: var(--color-grey-90); }
.pagination__label { border-color: transparent; color: var(--color-grey-90); font-weight: 500; }

/* ---------- Content-component responsive ---------- */
@media (max-width: 1080px) {
  .person-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .person-detail { gap: 36px; }
  .person-detail__media { flex-basis: 200px; }
  .person-detail__photo { width: 190px; height: 190px; }
}

@media (max-width: 900px) {
  .prose { max-width: none; }
  .article-lead { max-width: none; }
  .listing__item { grid-template-columns: 1fr; gap: 12px; }
  .listing__side { flex-direction: row; align-items: center; gap: 14px; }
  .listing--media .listing__item { grid-template-columns: 1fr; }
  .wcards { grid-template-columns: 1fr; }
  .wfeature { grid-template-columns: 1fr; gap: 20px; }
  .wfeature__media { max-width: 420px; }
  .person-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .person-detail { flex-direction: column; align-items: stretch; }
  .person-detail__media { flex-basis: auto; align-items: flex-start; }
}

@media (max-width: 560px) {
  .prose p, .prose li { font-size: 16px; }
  .prose h2 { font-size: 22px; }
  .prose h3 { font-size: 18px; }
  .prose blockquote { padding: 18px 20px; }
  .prose .author-bio, .prose .tldr, .prose .callout { padding: 18px 20px; }
  .form-embed { padding: 22px; }
  .logo-strip { gap: 22px 28px; }
  .logo-strip img { max-height: 46px; }
  .person-card__photo { width: 128px; height: 128px; }
}

/* SVG icons inherit their stroke from color (tokens, never hardcoded) */
.nav-toggle { color: var(--color-navy); }
.tile svg, .featrow svg, .card svg, .listing svg { color: var(--ink-heading); }

/* ---------- MIPS planner ----------
   A year of deadlines, grouped by the month heading the source page uses. Two
   columns where there is room, one where there is not; the months stay in
   reading order either way, which a masonry layout would not guarantee. */
.planner { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px 48px; }
.planner__month h3 {
  font-size: 20px; padding-bottom: 10px; margin-bottom: 18px;
  border-bottom: 2px solid var(--color-grey-blue);
}
.planner__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 20px; }
.planner__item { display: flex; flex-direction: column; gap: 6px; }
.planner__item p { font-size: 15.5px; line-height: 1.65; margin: 0; }
.planner__date { font-weight: 700; color: var(--ink-heading); }
@media (max-width: 860px) { .planner { grid-template-columns: 1fr; gap: 32px; } }

/* ============ Company history timeline ============
   Real text (recovered from Anatomy IT's timeline graphic) rather than an
   image, so it is readable by screen readers, agents and search. */
.timeline { margin: 56px 0 0; }
/* The 56px above is the gap from whatever sits over the timeline inside the same
   section. When the timeline opens a section of its own, that section's padding
   is the gap. */
.timeline:first-child { margin-top: 0; }
.timeline__head { text-align: center; margin-bottom: 36px; }
.timeline__head h3 { font-size: clamp(22px, 2.4vw, 30px); font-weight: 700; }
.timeline__head h3 em { font-style: normal; color: var(--accent); }
.timeline__head p { font-size: 16px; color: var(--ink); margin-top: 8px; }
.timeline__list {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px;
}
.timeline__item { position: relative; padding-top: 26px; }
.timeline__item::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0;
  height: 2px; background: var(--color-grey-blue);
}
.timeline__item::after {
  content: ""; position: absolute; top: -7px; left: 0;
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--bg); border: 3px solid var(--color-purple);
}
.timeline__item:nth-child(4n+2)::after { border-color: var(--color-blue); }
.timeline__item:nth-child(4n+3)::after { border-color: var(--color-sky); }
.timeline__item:nth-child(4n+4)::after { border-color: var(--color-teal); }
.timeline__year {
  display: block; font-size: 26px; font-weight: 700;
  color: var(--ink-heading); line-height: 1; margin-bottom: 10px;
}
.timeline__item p { font-size: 14.5px; line-height: 1.6; }

@media (max-width: 900px) {
  .timeline__list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
}
@media (max-width: 560px) {
  .timeline__list { grid-template-columns: 1fr; gap: 20px; }
}

/* ============================================================================
   SERVICES v1 COMPONENTS
   Blocks Anatomy IT's Services document of 28 August asks for on every service
   page: the "Need to include" checklist, third-party data points with their
   source, the anonymous Client Experience card, the Solutions hand-off
   ("Anatomy IT helps ..."), a FAQ whose Q&A pairs mirror the FAQPage JSON-LD,
   and the Let's Connect box that closes every page. Tokens only; radii 8px;
   the same soft-navy shadow as the base cards; breakpoints 1080/900/560.
   ============================================================================ */

/* ---------- Service checklist ---------- */
.svclist { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 32px; }
.svclist li { position: relative; padding-left: 30px; font-size: 16px; line-height: 1.6; font-weight: 500; color: var(--ink-heading); }
.svclist li::before {
  content: ""; position: absolute; left: 0; top: 7px; width: 14px; height: 14px; border-radius: 50%;
  background: linear-gradient(135deg, var(--color-purple), var(--color-blue), var(--color-sky));
}
.svclist--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* ---------- Data points (third-party statistics, always with their source) ---------- */
.datapoints { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 28px 40px; }
.datapoint { border-left: 4px solid var(--color-sky); padding-left: 20px; display: flex; flex-direction: column; gap: 8px; }
.datapoint:nth-child(2n) { border-left-color: var(--color-purple); }
.datapoint:nth-child(3n) { border-left-color: var(--color-teal); }
.datapoint__value { font-size: 40px; font-weight: 700; color: var(--color-navy); line-height: 1; }
.datapoint__text { font-size: 15px; line-height: 1.6; }
.datapoint__source { font-size: 12.5px; color: var(--color-grey-90); }
.datapoint__source a { color: var(--color-grey-90); font-weight: 500; text-decoration: underline; text-underline-offset: 2px; }
.datapoint__source a:hover { color: var(--color-navy); }
/* The Cybersecurity pair. Asked to keep the two figures and change how they look:
   they were the left half of a row that had lost its right half. Two columns of
   equal width on a tinted band, the figures large enough to read as the point of
   the block; one column under 720px. */
.datapoints--band {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  background: var(--bg-alt); border-radius: 12px; padding: 36px 40px; gap: 32px 48px;
}
.datapoints--band .datapoint__value { font-size: 52px; }
@media (max-width: 720px) {
  .datapoints--band { grid-template-columns: minmax(0, 1fr); padding: 28px 24px; }
  .datapoints--band .datapoint__value { font-size: 44px; }
}
/* The same two figures, moved into the hero on instruction. Everything about
   them was coloured for a white section, so on the purple panel the number went
   navy on purple and the source line all but vanished. Here they take the
   hero's own ink. */
.pagehero .datapoints { margin-top: 30px; gap: 24px 48px; }
.pagehero .datapoint__value { color: var(--ink-on-dark); }
.pagehero .datapoint__text { color: var(--color-grey-light); }
.pagehero .datapoint__source,
.pagehero .datapoint__source a { color: var(--color-grey-light); }
.pagehero .datapoint__source a:hover { color: var(--ink-on-dark); }
.pagehero .datapoint { border-left-color: var(--color-sky); }

/* ---------- Client Experience (anonymous engagement) ---------- */
.experience {
  background: var(--bg); border-radius: 8px; padding: 40px;
  border-top: 5px solid var(--color-purple);
  box-shadow: var(--shadow-card);
  display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 40px;
}
.experience__story { display: flex; flex-direction: column; gap: 16px; }
.experience__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.experience h3 { font-size: 24px; line-height: 1.3; }
.experience p { font-size: 15.5px; line-height: 1.7; }
.experience__outcome { display: flex; flex-direction: column; gap: 6px; padding: 22px 26px; border-radius: 8px; background: var(--color-grey-light); }
.experience__outcome-label { font-size: 12px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent-2); }
.experience__outcome-value { font-size: 20px; font-weight: 700; color: var(--color-navy); line-height: 1.3; }
.experience__aside { display: flex; flex-direction: column; gap: 22px; }
.experience__aside .datapoints { grid-template-columns: 1fr; gap: 20px; }
.section--alt .experience { box-shadow: var(--shadow-card-subtle); }

/* ---------- Solutions hand-off ("Anatomy IT helps ...") ---------- */
.solution { display: flex; align-items: center; gap: 56px; }
.solution__copy { flex: 1 1 0; display: flex; flex-direction: column; gap: 16px; }
.solution__copy h2 em { font-style: normal; color: var(--accent); }
.solution__copy p { font-size: 17px; }
.solution__suites {
  flex: 0 0 340px; display: flex; flex-direction: column; gap: 14px; padding: 32px;
  background: var(--bg); border-radius: 8px; box-shadow: var(--shadow-card);
}
.solution__suites-label { font-size: 12px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-grey-90); }

/* ---------- FAQ (question-form headings, mirrored 1:1 in FAQPage JSON-LD) ---------- */
.faq { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; }
/* The answers are folded away behind their question, at Anatomy IT's request.
   This is a native <details>, so it opens on click, on Enter and on Space,
   tells assistive software whether it is open, and needs no script. The answer
   stays in the markup when closed, so the FAQ schema and any crawler still
   read it. */
.faq__item {
  background: var(--bg); border-radius: 8px; padding: 20px 26px;
  border-left: 5px solid var(--color-blue);
  box-shadow: var(--shadow-card-subtle);
  display: block; align-self: start;
}
.faq__item > summary {
  cursor: pointer; list-style: none;
  display: flex; align-items: flex-start; justify-content: space-between; gap: 16px;
  padding: 8px 0;
}
.faq__item > summary::-webkit-details-marker { display: none; }
.faq__item > summary h3 { margin: 0; }
/* A chevron drawn from two borders, so it needs no file and follows the text colour. */
.faq__item > summary::after {
  content: ""; flex: 0 0 auto; margin-top: 7px;
  width: 9px; height: 9px;
  border-right: 2px solid var(--color-blue); border-bottom: 2px solid var(--color-blue);
  transform: rotate(45deg); transition: transform 150ms ease;
}
.faq__item[open] > summary::after { transform: rotate(-135deg); margin-top: 11px; }
.faq__item:nth-child(2n) > summary::after { border-color: var(--color-purple); }
.faq__item > summary:focus-visible { outline: 3px solid var(--color-sky); outline-offset: 3px; border-radius: 4px; }
.faq__item > summary + * { margin-top: 12px; }
/* State it rather than trust it: the built-in hiding of a closed <details> did not
   apply in testing, and a closed question that still shows its answer is worse than
   no accordion at all. The answer stays in the markup either way. */
.faq__item:not([open]) > :not(summary) { display: none; }
@media (prefers-reduced-motion: reduce) { .faq__item > summary::after { transition: none; } }
.faq__item:nth-child(2n) { border-left-color: var(--color-purple); }
.faq__item h3 { font-size: 19px; line-height: 1.35; }
.faq__item p, .faq__item li { font-size: 15px; line-height: 1.7; }
.faq__item ul { margin: 0; padding-left: 20px; }
.faq__item li + li { margin-top: 6px; }

/* ---------- Let's Connect box (closes the Services and Solutions pages) ---------- */
.ctabox { position: relative; }
.ctabox::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 6px;
  background: linear-gradient(90deg, var(--color-purple), var(--color-blue), var(--color-sky));
}
.ctabox__inner { display: flex; align-items: center; gap: 56px; }
.ctabox__copy { flex: 1 1 0; display: flex; flex-direction: column; gap: 18px; }
.ctabox__copy ul { margin: 0; padding-left: 22px; display: flex; flex-direction: column; gap: 10px; }
.ctabox__copy li { font-size: 16px; line-height: 1.65; color: var(--color-grey-light); }
.ctabox__copy li strong { color: var(--ink-on-dark); }
.ctabox__action { flex: 0 0 auto; }

@media (max-width: 1080px) {
  .readiness__chart { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .readiness__slot { height: 120px; }
}
@media (max-width: 900px) {
  .svclist, .svclist--3 { grid-template-columns: 1fr; }
  .experience { grid-template-columns: 1fr; padding: 28px; }
  .solution { flex-direction: column; align-items: stretch; }
  .solution__suites { flex-basis: auto; }
  .faq { grid-template-columns: 1fr; }
  .ctabox__inner { flex-direction: column; align-items: flex-start; }
  .scorecard { gap: 28px; }
  .scoreband__captions li { font-size: 11.5px; }
}
@media (max-width: 560px) {
  .datapoint__value { font-size: 32px; }
  .experience h3 { font-size: 21px; }
  .ctabox__action .btn { width: 100%; }
}

/* ============================================================================
   SOLUTIONS v1 COMPONENTS (Anatomy IT's Solutions document of 31 August)
   Two blocks the document asks for: the per-suite "copy + graphic" pair on Core
   Solutions ("less words and no swivel" — a static label grid, no carousel) and a
   numbered step strip (the "Establish Governance Early" asset, rendered in
   tokens until the branded version arrives). Tokens only; radii 8px; the same
   soft-navy shadow; breakpoints 1080/900/560.
   ============================================================================ */

/* ---------- Suite block: copy + label grid ---------- */
.suite { display: flex; align-items: center; gap: 56px; }
.suite--flip { flex-direction: row-reverse; }
.suite__copy { flex: 1 1 0; display: flex; flex-direction: column; gap: 16px; }
.suite__copy h2 { font-size: 30px; }
.suite__copy p { font-size: 16.5px; }
.suite__graphic {
  flex: 0 0 440px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px;
  padding: 28px; border-radius: 8px; background: var(--bg);
  border-top: 5px solid var(--color-purple); box-shadow: var(--shadow-card);
}
.suite--security .suite__graphic { border-top-color: var(--color-blue); }
.suite--advisory .suite__graphic { border-top-color: var(--color-sky); }
.suite--innovation .suite__graphic { border-top-color: var(--color-teal); }
.suite__label {
  display: flex; align-items: center; gap: 10px; min-height: 56px; padding: 12px 14px;
  border-radius: 8px; background: var(--color-grey-light);
  font-size: 14px; font-weight: 700; line-height: 1.3; color: var(--color-navy);
}
.suite__label::before {
  content: ""; flex: 0 0 12px; width: 12px; height: 14px; background: var(--color-purple);
  clip-path: polygon(25% 3%, 75% 3%, 100% 50%, 75% 97%, 25% 97%, 0% 50%);
}
.suite--security .suite__label::before { background: var(--color-blue); }
.suite--advisory .suite__label::before { background: var(--color-sky); }
.suite--innovation .suite__label::before { background: var(--color-teal); }
.suite__label:last-child:nth-child(odd) { grid-column: span 2; }
.section--alt .suite__graphic { box-shadow: var(--shadow-card-subtle); }

/* ---------- Numbered step strip ---------- */
.steps {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px;
}
.steps li {
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: 14px;
  padding: 26px 16px; border-radius: 8px; background: var(--bg);
  border-top: 4px solid var(--color-teal); box-shadow: var(--shadow-card-subtle);
}
.steps svg { width: 40px; height: 40px; fill: none; stroke: var(--color-navy); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.steps p { font-size: 14.5px; line-height: 1.45; font-weight: 500; color: var(--ink-heading); }

@media (max-width: 1080px) {
  .steps { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .suite, .suite--flip { flex-direction: column; align-items: stretch; }
  .suite__graphic { flex-basis: auto; }
}
@media (max-width: 560px) {
  .steps { grid-template-columns: 1fr; }
  .suite__graphic { grid-template-columns: 1fr; padding: 20px; }
  .suite__label:last-child:nth-child(odd) { grid-column: auto; }
}


/* ============================================================================
   HEALTHIT 360 sample report + report request form
   (/solutions/healthit-framework/, built to Anatomy IT's HealthIT page
   direction document of 5 September; status colours come from tokens.css)
   ============================================================================ */

/* ---------- Conversion box shell ---------- */
.report { display: flex; flex-direction: column; gap: 32px; }
.report__head { display: flex; flex-direction: column; gap: 12px; max-width: 860px; }
.report__head h2 { font-size: 30px; line-height: 1.25; }
.report__head p { font-size: 16.5px; }
.report__panel {
  padding: 32px; border-radius: 8px; background: var(--bg);
  box-shadow: var(--shadow-card);
  display: flex; flex-direction: column; gap: 28px;
}
.report__part { display: flex; flex-direction: column; gap: 18px; }

/* The form lies over the report rather than following it, which is the whole
   point of the treatment: you can see what you are asking for underneath the
   thing you fill in. The card pulls up over the panel's lower edge and carries a
   heavier shadow so the two planes read apart. Below the breakpoint the overlap
   would eat the report, so there it simply sits under it. */
/* The detail behind the form: present, unreadable, and not clickable. It is
   what the form lies on - without it the form would hang below the report
   instead of on top of it. */
.report__part--veiled {
  filter: blur(7px); pointer-events: none; user-select: none;
  -webkit-mask-image: linear-gradient(to bottom, black 20%, transparent 92%);
  mask-image: linear-gradient(to bottom, black 20%, transparent 92%);
}
.report__gate { position: relative; z-index: 2; max-width: 660px; margin: -340px auto 0; }
/* Arriving from a Request-your-report button elsewhere: stop with a band of the
   report visible above the form, so it is clear what the form is attached to. */
.report__gate { scroll-margin-top: 90px; }
.report__gate .form-embed { box-shadow: var(--shadow-elevated); }
.report__gate .form-embed__head { align-items: center; text-align: center; }
.report__gate .form-embed__head h3 { font-size: 24px; line-height: 1.25; }
@media (max-width: 860px) {
  .report__gate { margin-top: 24px; max-width: none; }
  .report__part--veiled { display: none; }
}
.report__part-label {
  font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--ink);
}

/* ---------- Score: dial + figures ---------- */
.scorecard { display: flex; align-items: center; gap: 40px; flex-wrap: wrap; }
.dial { flex: 0 0 200px; position: relative; width: 200px; height: 200px; }
.dial svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.dial__track { fill: none; stroke: var(--color-grey-blue); stroke-width: 16; }
.dial__value { fill: none; stroke: var(--status-critical); stroke-width: 16; stroke-linecap: butt; }
.dial__caption {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 2px;
}
.dial__pct { font-size: 40px; font-weight: 700; color: var(--status-critical); line-height: 1; }
.dial__unit {
  font-size: 12px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--ink);
}
.figures { flex: 1 1 320px; display: flex; flex-direction: column; gap: 14px; }
.figures__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.figure {
  padding: 16px 18px; border: 1px solid var(--color-grey-blue); border-radius: 8px; background: var(--bg);
  display: flex; flex-direction: column; gap: 4px;
}
.figure dt {
  font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--ink);
}
.figure dd { margin: 0; font-size: 26px; font-weight: 700; color: var(--ink-heading); line-height: 1.1; }
.verdict {
  align-self: flex-start; padding: 9px 18px; border-radius: 999px;
  background: var(--status-critical-soft); color: var(--status-critical-ink);
  font-size: 14px; font-weight: 700;
}

/* ---------- Score: scoring interpretation scale ---------- */
.scoreband { display: flex; flex-direction: column; gap: 10px; }
.scoreband__bar { display: flex; border-radius: 999px; overflow: hidden; }
/* Decorative only: every range and caption is spelled out in .scoreband__captions,
   so nothing sits as text on a mid-tone fill and nothing is hidden from a reader. */
.scoreband__seg { flex: 1 1 0; height: 14px; }
.scoreband__seg--critical { background: var(--status-critical); flex-grow: 40; }
.scoreband__seg--moderate { background: var(--status-moderate); flex-grow: 20; }
.scoreband__seg--strong { background: var(--status-strong); flex-grow: 25; }
.scoreband__seg--excellent { background: var(--status-excellent); flex-grow: 15; }
.scoreband__captions {
  list-style: none; margin: 0; padding: 0;
  display: flex; gap: 8px;
}
.scoreband__captions li {
  flex: 1 1 0; display: flex; flex-direction: column; align-items: center; gap: 6px;
  text-align: center; font-size: 12.5px; line-height: 1.35; color: var(--ink);
}
.scoreband__captions li::before {
  content: ""; display: block; flex: 0 0 12px; width: 12px; height: 12px; border-radius: 3px;
}
.scoreband__captions li:nth-child(1) { flex-grow: 40; }
.scoreband__captions li:nth-child(2) { flex-grow: 20; }
.scoreband__captions li:nth-child(3) { flex-grow: 25; }
.scoreband__captions li:nth-child(4) { flex-grow: 15; }
.scoreband__captions li:nth-child(1)::before { background: var(--status-critical); }
.scoreband__captions li:nth-child(2)::before { background: var(--status-moderate); }
.scoreband__captions li:nth-child(3)::before { background: var(--status-strong); }
.scoreband__captions li:nth-child(4)::before { background: var(--status-excellent); }

/* ---------- Readiness by category: real bar chart. Values are the sample
   PDF's own (Surgical Center of Evergreen, a fictional demo org, Sept 2026),
   so — unlike the old hatched placeholder this replaces — the bar heights and
   colour bands mean something real, and colour-coding by band is honest here. ---------- */
.readiness { display: flex; flex-direction: column; gap: 14px; }
.readiness__chart {
  display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 10px;
  padding: 20px; border-radius: 8px;
  background: var(--color-grey-light);
  border: 1px solid var(--color-grey-blue);
}
.readiness__col { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.readiness__value { font-size: 14px; font-weight: 700; color: var(--ink-heading); }
.readiness__slot { width: 100%; height: 150px; display: flex; align-items: flex-end; }
.readiness__track { width: 100%; border-radius: 6px 6px 0 0; min-height: 4px; }
.readiness__track--critical { background: var(--status-critical); }
.readiness__track--moderate { background: var(--status-moderate); }
.readiness__track--strong { background: var(--status-strong); }
.readiness__track--excellent { background: var(--status-excellent); }
/* Excluded from the overall score (the asterisked category) — greyed out like
   the source PDF, rather than coloured by band, so it visually reads apart
   from the ten that do count. */
.readiness__track--excluded { background: var(--color-grey-c8); }
.readiness__label { font-size: 11.5px; line-height: 1.3; text-align: center; color: var(--ink-heading); font-weight: 500; }
.readiness__note { font-size: 13px; color: var(--ink); }

/* ---------- Report request: CTA card ---------- */
/* Reads as a CTA worth clicking, not a plain info box: a soft gradient wash
   (same tokens as .section--wash) in place of the plain-white .form-embed
   background, a gradient top accent (same pattern as .ctabox), a "for
   partners" pill, and the whole thing centred around one big button. */

/* ---------- Report request: trigger ---------- */
.formgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.formgrid label { display: flex; flex-direction: column; gap: 6px; font-size: 13px; font-weight: 700; color: var(--ink-heading); }
/* A field that owns its row: a HubSpot field group of one, the way the portal lays it out. */
.formgrid__full { grid-column: 1 / -1; }
.formgrid input, .formgrid select, .formgrid textarea {
  font-family: var(--font-sans); font-size: 15px; padding: 11px 12px;
  border: 1px solid var(--color-grey-c8); border-radius: 8px; background: var(--color-grey-light); color: var(--ink);
}
.formgrid input:disabled, .formgrid select:disabled {
  cursor: not-allowed; background: var(--color-grey-e8); color: var(--color-grey-90);
  border-style: dashed;
}
.field-error { font-size: 13px; font-weight: 500; color: var(--status-critical-ink); }
.field-error:empty { display: none; }
.formgrid [aria-invalid="true"] { border-color: var(--status-critical-ink); }
.lead-form .form-error { margin-bottom: 16px; }
.lead-form .cf-turnstile { margin: 18px 0; }
.lead-form[aria-busy="true"] { opacity: 0.7; pointer-events: none; }
.formnote {
  padding: 12px 14px; border-radius: 8px; border: 1px dashed var(--accent);
  background: var(--color-grey-light); font-size: 13.5px; font-weight: 500; color: var(--ink-heading);
}

@media (max-width: 560px) {
  .report__panel { padding: 20px; }
  .formgrid { grid-template-columns: 1fr; }
  .dial { flex-basis: 160px; width: 160px; height: 160px; }
  .dial__pct { font-size: 32px; }
  .figures__grid { grid-template-columns: 1fr; }
  .readiness__chart { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .readiness__slot { height: 110px; }
  .scoreband__bar { display: none; }
  .scoreband__captions { flex-direction: column; gap: 10px; }
  /* Stacked: the captions become a colour key, so the range proportions go away. */
  .scoreband__captions li,
  .scoreband__captions li:nth-child(1),
  .scoreband__captions li:nth-child(2),
  .scoreband__captions li:nth-child(3),
  .scoreband__captions li:nth-child(4) { flex-grow: 0; }
  .scoreband__captions li { flex-direction: row; align-items: center; gap: 10px; text-align: left; }
}

/* ============================================================================
   HOME v1 (the HOME tab of Anatomy IT's review workbook, 2026-09-14)
   New classes only — nothing above this line changes. Colours via tokens.css.
   ============================================================================ */

/* Block 2 — "Subhead (keep left justified)" */
.trustband__inner--left { justify-content: flex-start; }

/* Block 4 — "Don't like the icons and white boxes. And just Navy color feel."
   The service tiles keep their geometry and lose the icon and the white fill;
   the yellow call-out box is the one thing that stays light on the navy band,
   so its heading and link are pulled back from the dark-section colours. */
.tile--dark { background: transparent; border-color: var(--color-blue); }
.tile--dark:hover { background: transparent; border-color: var(--color-sky); box-shadow: none; }
.section--dark .tile--note h3 { color: var(--ink-heading); }
.section--dark .tile--note .text-link { color: var(--link); }
.section--dark .tile--note .text-link:hover { color: var(--ink-heading); }

/* Blocks 7 and 9 — a lede paragraph inside a centred section head, and a
   centred row for the block's single button or link. */
.section__lede { font-size: 17px; max-width: 860px; }
.section__cta { display: flex; justify-content: center; margin-top: 36px; }

/* Block 7: the four short headers from Anatomy IT's Advantage slide. The slide
   puts a photograph behind each panel with the title over it; until those photos
   arrive the panel is the navy ground, with the brand colour on the top edge. */
.advtile {
  display: flex; align-items: flex-end; min-height: 190px; padding: 26px;
  background: var(--color-navy); border-radius: 8px;
  border-top: 5px solid var(--color-purple);
}
.advtile:nth-child(2) { border-top-color: var(--color-blue); }
.advtile:nth-child(3) { border-top-color: var(--color-sky); }
.advtile:nth-child(4) { border-top-color: var(--color-teal); }
.advtile h3 { color: var(--ink-on-dark); font-size: 18px; line-height: 1.35; }

/* Block 9 — the quote treatment from the Design tab: light panel, large quote
   mark, a light blue line along the top and right with one rounded corner. */
.quotecard {
  position: relative; max-width: 860px; margin: 0 auto;
  background: var(--bg-alt); border-radius: 8px 24px 8px 8px;
  padding: 40px 44px 32px 96px;
  border-top: 2px solid var(--color-sky); border-right: 2px solid var(--color-sky);
}
.quotecard__mark {
  position: absolute; left: 30px; top: 16px;
  font-size: 92px; line-height: 1; font-weight: 700; color: var(--color-sky);
}
.quotecard blockquote {
  margin: 0; font-size: clamp(18px, 2vw, 24px); line-height: 1.6;
  font-weight: 500; color: var(--color-navy);
}
.quotecard figcaption {
  margin-top: 22px; display: flex; flex-direction: column; gap: 2px; text-align: right;
}
.quotecard figcaption strong { font-size: 15px; color: var(--color-navy); }
.quotecard figcaption span { font-size: 14px; }
/* The attribution is right justified, and .dots is a flex row that would other-
   wise start hard left under it, so the dots are pushed to the same edge. */
.quotecard figcaption .dots { justify-content: flex-end; }
/* The same treatment for a set of short quotes side by side (About, Client
   Support): one smaller card per quote in the three-column grid, with the
   attribution held to the foot of each card so a row ends level. */
.quotecard--compact {
  max-width: none; margin: 0; padding: 30px 26px 22px 66px;
  display: flex; flex-direction: column;
}
.quotecard--compact .quotecard__mark { left: 20px; top: 12px; font-size: 64px; }
.quotecard--compact blockquote { font-size: 16px; line-height: 1.65; }
.quotecard--compact figcaption { margin-top: auto; padding-top: 16px; }

@media (max-width: 900px) {
  .advtile { min-height: 150px; }
}
@media (max-width: 560px) {
  .quotecard { padding: 64px 22px 24px; border-radius: 8px 18px 8px 8px; }
  .quotecard__mark { left: 18px; top: 8px; font-size: 68px; }
  .quotecard figcaption { text-align: left; }
  .quotecard figcaption .dots { justify-content: flex-start; }
  .quotecard--compact { padding: 52px 20px 20px; }
  .quotecard--compact .quotecard__mark { left: 16px; top: 4px; font-size: 56px; }
  .trustband__inner--left { justify-content: center; }
}

/* ============================================================
   Services pages: the treatments Anatomy IT asks for on the seven /services/
   pages. Scoped with modifiers so nothing outside that section changes.
   ============================================================ */

/* (A) "Purple color block with dots" hero. Anatomy IT's mock-up:
   solid brand purple, light blue dots scattered over the right half and
   spilling onto the white below, no hexes, no gradient rule. Three
   radial-gradient layers on different tiles keep the scatter from reading as a
   grid; the mask fades the density away from the copy. */
.pagehero--dots { background: var(--color-purple); overflow: visible; }
.pagehero__dotfield {
  position: absolute; left: 0; right: 0; top: 0; bottom: -46px;
  pointer-events: none;
  background-image:
    radial-gradient(var(--dot-hero) 1.7px, transparent 1.8px),
    radial-gradient(var(--dot-hero-soft) 1.5px, transparent 1.6px),
    radial-gradient(var(--dot-hero) 1.2px, transparent 1.3px);
  background-size: 86px 74px, 57px 93px, 121px 61px;
  background-position: 0 0, 23px 41px, 61px 17px;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, 0.2) 40%, rgba(0, 0, 0, 1) 74%);
  mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, 0.2) 40%, rgba(0, 0, 0, 1) 74%);
}
.pagehero--dots .lede { color: var(--ink-on-dark); }
/* The rule under the page name starts in brand purple, and this panel IS
   brand purple - on it the first third of the bar simply vanishes and what
   is left reads as a short sky stub. Same three cool stops, same direction,
   but starting on navy so the bar has an edge to begin at. Only this panel
   needs it; on navy and on a photograph the standard rule is correct. */
.pagehero--dots .gradient-rule {
  background: linear-gradient(90deg, var(--color-navy), var(--color-blue), var(--color-sky));
}
.pagehero--dots .breadcrumbs a { color: var(--ink-on-dark); text-decoration: underline; text-underline-offset: 3px; }
.pagehero--dots .breadcrumbs em { color: var(--ink-on-dark); }
.pagehero--dots .breadcrumbs span[aria-hidden] { color: var(--color-grey-light); }
.pagehero--dots .btn--ghost-dark { border-color: var(--color-white); }

/* "Love this. Don't love white box." The suites keep their place in the
   yellow block and lose the card; a brand rule carries the structure. */
.solution__suites--open {
  background: transparent; box-shadow: none;
  padding: 4px 0 4px 26px; border-left: 4px solid var(--color-purple);
}

/* The Advantage promo laid out like the right-hand side of the
   overview PDF: four light cards on a soft purple-to-blue wash. The wash is the
   brand pair at low alpha so navy type on it stays well above the contrast
   threshold, as it is in the PDF. */
.section--wash { background: linear-gradient(120deg, var(--wash-purple-soft), var(--wash-blue-soft)); }
.advband__head { margin: 0; font-size: 20px; }

/* The engagement story keeps its three points as a list, and the outcome is a
   full sentence rather than a headline figure. */
.experience__points { margin: 0; padding-left: 20px; display: grid; gap: 6px; font-size: 15.5px; line-height: 1.7; }
.experience__outcome-value--statement { font-size: 16px; font-weight: 600; line-height: 1.6; }

/* A single-column service list, the class form of the inline rule these lists
   carried before. */
.svclist--one { grid-template-columns: 1fr; }

/* "Need to adjust design loosing 2 data points". The Advisory figures run as
   a pair instead of a row of four. */
.stats--pair { grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* The Trusted By strip scrolls, as it does on the site this replaced. The second
   set of logos is a clone that closes the seam and is hidden from assistive
   technology. There is no stop button: the strip stops under the pointer and when
   a logo takes keyboard focus, and it never starts at all for anyone whose system
   asks for reduced motion.
   Known and accepted: on a touch screen neither of those two can happen, so a
   visitor there has no way to stop it. A visible control is the only mechanism
   that would cover that case, and a visible control was asked out five times over.
   Put logo-strip__toggle back and the animation-play-state gate with it if that
   trade is ever revisited. */
.logo-strip--marquee { flex-wrap: nowrap; justify-content: flex-start; overflow: hidden; gap: 0; position: relative; }
.logo-strip__track {
  display: flex; align-items: center; flex: 0 0 auto; gap: 48px; padding-right: 48px;
  animation: logo-marquee 34s linear infinite;
}
.logo-strip--marquee:hover .logo-strip__track,
.logo-strip--marquee:focus-within .logo-strip__track { animation-play-state: paused; }
@keyframes logo-marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-100%); }
}
@media (prefers-reduced-motion: reduce) {
  .logo-strip__track { animation: none; }
  .logo-strip--marquee { flex-wrap: wrap; justify-content: center; gap: 28px 48px; }
}

/* The two photographs sent from the current site sit in the
   feature row in place of the bullets that moved into the FAQ. */
.featrow__media--photo { padding: 0; border: 0; background: transparent; overflow: hidden; }
.featrow__media--photo img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 8px; }
/* A page of a document stood as tall as a landscape photograph is wide, which
   made it the loudest thing in the row. Two thirds of that, which also brings it
   level with the copy beside it. It is a document, so it is shown whole rather
   than cropped to fill. */
.featrow__media--portrait { flex: 0 0 293px; min-height: 0; }
.featrow__media--portrait img { height: auto; object-fit: contain; }
/* Two thirds of the width a row's picture normally takes. Asked for on the Cyber
   block, where the photograph carried more weight than the four lines beside it. */
.featrow__media--small { flex: 0 0 293px; min-height: 0; }
.featrow__media--small img { height: auto; }

/* The still of the HEALTHIT 360 report with its request form, on the Advisory page.
   It is the link, so it carries the hover and focus states a button would. */
.reportshot { flex: 0 0 440px; display: block; text-decoration: none; }
.reportshot img {
  display: block; width: 100%; height: auto; border-radius: 8px;
  box-shadow: var(--shadow-card); transition: box-shadow 0.15s ease;
}
.reportshot__label {
  display: block; margin-top: 14px; font-weight: 700; font-size: 15px;
  color: var(--link); text-align: center;
}
.reportshot:hover img, .reportshot:focus-visible img { box-shadow: var(--shadow-elevated); }
.reportshot:hover .reportshot__label { text-decoration: underline; }

/* The picture took the second column of that row, so the two figures from
   the "Data" section sit on their own line under it. */
.featrow + .datapoints { margin-top: 44px; }

/* The data block on Data Protection & Business Continuity, built after the
   treatment in Anatomy IT's slide: the figure, then the two statements. */
.datablock { display: flex; gap: 56px; align-items: flex-start; }
.datablock__figure { flex: 0 0 300px; }
.datablock__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 18px; }
.datablock__list li { position: relative; padding-left: 30px; font-size: 15.5px; line-height: 1.7; }
.datablock__list li::before {
  content: ""; position: absolute; left: 0; top: 9px; width: 12px; height: 12px;
  border-radius: 50%; background: var(--color-sky);
}
.datablock__list li:nth-child(2n)::before { background: var(--color-purple); }

@media (max-width: 900px) {
  .datablock { flex-direction: column; gap: 28px; }
  .datablock__figure { flex-basis: auto; }
}

/* ---------------- Solutions pages ---------------- */

/* "Please just add the icons from the PDF". The five Establish Governance
   Early icons of the AI Governance datasheet are filled vectors, not the outline
   set the strip was first drawn with, so they need fill and no stroke. The colour
   comes from the token, not from the #0F1D62 the PDF paints them in. */
.steps--asset svg { fill: var(--color-navy); stroke: none; }

/* "Follow image with Copy on top design". Treatment (B): the photograph
   fills the hero, a navy scrim carries the white copy, and the bottom edge stays
   square (no dots, no wave). The scrim is heaviest behind the column the copy
   sits in and lightens to the right so the picture is still readable. */
.pagehero--photo { background: var(--color-navy); }
.pagehero--photo .pagehero__photo {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center 30%;
}
.pagehero--photo .pagehero__scrim {
  position: absolute; inset: 0;
  background: linear-gradient(90deg, var(--scrim-pagehero-photo) 0%, var(--scrim-pagehero-photo) 70%, var(--scrim-pagehero-photo-far) 100%);
}
.pagehero--photo .lede { color: var(--ink-on-dark); }
/* Over the photograph and its light veil the sky eyebrow falls below 4.5:1; white
   keeps it readable, as the rest of the copy on these heroes. */
.pagehero--photo .eyebrow--sky { color: var(--ink-on-dark); }
/* The same holds for the sky breadcrumb link: white, underlined so it still reads as a
   link, as on the purple heroes. */
.pagehero--photo .breadcrumbs a { color: var(--ink-on-dark); text-decoration: underline; text-underline-offset: 3px; }
.pagehero--photo .breadcrumbs em { color: var(--ink-on-dark); }

/* The 30% above is framed for a hero that carries a lede. A hero without one is
   about 100px shorter, so the same 30% drops the visible strip to chest height
   and cuts the faces off. This modifier pulls the crop back to the very top of
   the picture, which is where it has to be: in the photograph this is written
   for, the subject's hair reaches the third row, so anything above zero shaves
   the crown off at every width the page is read at. Opt-in, so the heroes that
   do carry a lede are untouched. */
.pagehero--photo-top .pagehero__photo { object-position: center 0%; }

/* Below 900px the container is full width, so the copy would reach the light
   end of the gradient: the scrim goes solid there. */
@media (max-width: 900px) {
  .pagehero--photo .pagehero__scrim { background: var(--scrim-pagehero-photo); }
}

/* ============================================================
   Home top block, 17 September: Anatomy IT's design direction of 13 September
   (design-direction-home-image-dots-swirl.png, "Image, dots, swirl bottom").
   Every number below was measured off that PNG with PIL, at the 1.4565 device
   px per CSS px the screenshot was taken at, not read from the note that came
   with it. Scoped to .hero--photo so no other page moves.
   ============================================================ */

/* The photograph is the block: full width, copy on top of it. The mock-up has no
   overlay — the left 40% of that frame is a dark wall (mean luminance 63/255 over
   x 0-400) and carries white type on its own. Ours is bright there, so the scrim
   is what keeps the copy readable. It is not the dark blue of the (B) service
   heroes: it is the overlay colour the mock-ups use, and it is spent on the copy
   rather than on the whole frame. */
.hero--photo { position: relative; background: var(--color-navy); overflow: visible; }
.hero--photo .hero__photo {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center 22%;
}
/* The veil, and where it stops. Full strength from the left edge and across the
   copy, then a fade that reaches zero 200px past it, so the right of the frame -
   where the subject of the photograph is - is left open.
   The stops are anchored to the copy, not to a share of the window. The copy
   column is a fixed 860px inside a 1200px container, so a percentage that clears
   the text at 2560 still cuts through it at 1280: max(884px, 50% + 284px) is the
   right edge of that column at every width from 908px up. The third stop carries
   the intent that the fade be finished by two thirds of the block, and on a
   window wide enough (about 2900px) that is the term that wins. It does not win
   below that, because with this photograph it cannot: the copy itself reaches
   two thirds of the window at 1440, and what sits behind it there is a white
   wall, which needs the full strength to hold 4.5:1. A photograph that is dark
   on the right would let the two-thirds term take over at every width. */
.hero--photo .hero__scrim {
  position: absolute; inset: 0;
  background: linear-gradient(90deg,
    var(--scrim-hero-photo) 0,
    var(--scrim-hero-photo) max(884px, calc(50% + 284px)),
    var(--scrim-hero-photo-far) max(1084px, calc(50% + 484px), 66.67%));
}
/* Above the copy: 76px, the same air as the top block of every other page, since
   the request of 14 October for less dead space above the words. The mock-up's
   126 CSS px from the header edge to the h1 read as empty. Below: buttons to the
   crest of the wave = 89 CSS px in the mock-up. The wave is 82 px tall and
   overlaps the padding, hence 170 below. */
.hero--photo .hero__inner { position: relative; z-index: 2; display: block; }
/* 296px of air below the copy, not 170: the drawing crests 256px above the bottom
   of the block (measured - the highest white pixel sits 184 down its 440px file),
   and at 170 the buttons landed on the white.
   That 296 is the right figure only while the drawing is at its own size. Past
   1920px the drawing is asked to scale up with the window, so its crest climbs at
   the same rate - 256px becomes 341px at a 2560px window - while the copy stayed
   where it was and the dot field rose into the last lines of it. So the air below
   the copy now grows on the same curve the drawing does: 13.3334vw is those same
   256px expressed as a share of the window, and 40px is the clearance the crest
   was given in the first place. The floor keeps every window up to 1920px exactly
   as it was; the 440px ceiling is where the drawing stops climbing, because its
   own box is 440px tall and paints nothing above that. */
.hero--photo .hero__copy {
  padding: 76px 0 calc(40px + min(440px, max(256px, 13.3334vw)));
  gap: 18px; max-width: 860px;
}
.hero--photo h1 { color: var(--ink-on-dark); }
/* The lede in that mock-up runs 4 lines over 729 CSS px at ~31 px line height. */
.hero--photo .hero__copy p.lede { color: var(--ink-on-dark); max-width: 730px; }

/* The bottom edge of the block. The white wave and the light blue dots are one
   drawing, supplied as one file on 21 September; before that they were a curve we
   traced off a mock-up and a separate dot artwork placed against it, and the two
   never agreed. They cannot disagree now.
   Sized the way it was drawn to be: held at its own 1920px width so nothing is
   stretched, anchored to the bottom, and scaled only once the window is wider
   than the drawing. Below 1920 the window simply shows less of it. */
.hero__dotfield {
  position: absolute; left: 0; right: 0; bottom: -1px; top: auto;
  height: 440px; z-index: 1; pointer-events: none;
  background: url("/assets/img/brand/hero-wave-dots.svg") no-repeat center bottom;
  background-size: max(1920px, 100%) auto;
}

@media (max-width: 900px) {
  /* The container is full width here; the scrim is set from the single token so
     this stays right whatever the wide layout above does with it. A horizontal
     fade would strand the copy on the bare picture, since the copy reaches the
     right edge. Measured at 390x844 at 2x device pixels, the lightest pixel
     under any line of the copy holds 4.56:1 at this strength and 0.60 drops
     below 4.5:1, so 0.61 is the floor here too. */
  .hero--photo .hero__scrim { background: var(--scrim-hero-photo); }
  .hero--photo .hero__copy { padding: 64px 0 200px; }
  .hero__dotfield { height: 300px; }
}

/* The five recognition badges are sized once, up at .trustband__badge near
   the top of this file: one common height so they sit on a line. Their own sizes
   run 134-159 px tall, which is both too large for a trust strip and visibly
   ragged. They are only ever scaled DOWN, so the artefacts in the artwork shrink
   with them rather than being enlarged. */

/* The silent b-roll in the AI Governance row. Same shape as the photograph
   variant of this slot; the stop button sits under the frame, not over it. */
.featrow__media--video {
  padding: 0; border: 0; background: transparent;
  flex-direction: column; align-items: flex-start; gap: 12px;
}
.section--alt .featrow__media--video { background: transparent; }
.ambient-video {
  width: 100%; aspect-ratio: 16 / 9; height: auto; display: block;
  border-radius: 8px; background: var(--color-navy); object-fit: cover;
}
.ambient-video__pause[hidden] { display: none; }

/* "Content is good. We need to dress up with some imagery." and "Use the video
   from the advisory page": that clip is a 2580x740 banner, so it runs the
   full width of the column at its own ratio rather than being cropped into the
   16/9 slot, which would cut the clinician out of frame. */
.mediaband { margin: 44px 0 0; }
.ambient-video--band { aspect-ratio: 192 / 55; }

/* The six HEALTHIT 360 focus areas. One vector hexagon per area with its name as
   page text underneath, replacing the one raster that had the names painted in.
   Six across on a desktop row; three, then two, as the column narrows, because
   six two- and three-word headings side by side stop being readable well before
   a phone. The shape is capped rather than left to take its whole share of the
   row, so it does not grow past the size it was drawn for. No colour here: the
   fills are inside the SVG files. */
.hexrow { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 28px 20px; }
.hexrow__item { display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center; }
.hexrow__shape { display: block; width: 100%; max-width: 96px; height: auto; }
.hexrow h3 { font-size: 16px; line-height: 1.35; }
/* Declared here rather than in the shared breakpoint blocks near the top of the
   file: those run before this rule, and at equal specificity the later one wins. */
@media (max-width: 900px) { .hexrow { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 560px) { .hexrow { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* The clip is its own play/pause control, so it has to look and behave like one:
   a pointer over it and a focus ring for anyone arriving by keyboard. */
.ambient-video[role="button"] { cursor: pointer; }
.ambient-video[role="button"]:focus-visible { outline: 3px solid var(--color-sky); outline-offset: 3px; }

/* ---------------- Client Support page ---------------- */

/* "Needs some pizazz" and "Please follow the same design / colors etc. on
   the current site" — the two Client Billing cards on the live page are not white
   boxes with a navy top rule: each is a photograph behind a white wash, in a
   hairline grey frame with a 10px radius, and its button is solid navy and spans
   the card. Every value is read out of the live stylesheet
   (6647-layout.css, nodes 679y0z8iobrs / r5xoq06fcke3): 1px #d1d1d1 border,
   10px radius, rgba(255,255,255,0.72) wash, background no-repeat center / cover,
   button #012169 with a #8c6fca hover, label uppercase 15px/500 at 2px of
   letter-spacing. The colours all exist as tokens already (#012169 is
   --color-navy, #8c6fca --color-purple); the wash and the frame are the two that
   did not, and they are in tokens.css.
   Scoped to .card--photo so the site-wide .card is untouched. */
.card--photo {
  position: relative; isolation: isolate;
  border: 1px solid var(--border-card-photo); border-radius: 10px;
  padding: 40px 40px 56px;
  background-repeat: no-repeat; background-position: center center;
  background-size: cover;
}
/* The wash sits above the photograph and below the copy: a negative z-index
   inside the card's own stacking context paints after the background and before
   the content, which is what the live ::after does. */
.card--photo::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: var(--wash-card-photo); border-radius: inherit;
}
.card--photo .btn { width: 100%; margin-top: 22px; font-weight: 500; letter-spacing: 2px; }
/* Purple hover, here only: .btn--primary goes blue on hover everywhere else. */
.card--photo .btn--primary:hover { background: var(--color-purple); }

/* The photograph is the one thing that differs between the two cards. These are
   the two files the live cards use, now local to the image bank: the hand on a
   mouse behind the online-payment card, the colleague at a desktop behind the
   billing-questions card. */
.card-grid--billing .card--photo:nth-child(1) {
  background-image: url("/assets/img/image-bank/client-billing-hand-on-a-mouse.jpg");
}
.card-grid--billing .card--photo:nth-child(2) {
  background-image: url("/assets/img/image-bank/client-billing-colleague-at-a-desktop.jpg");
}

/* "Including with client logos included". Each client story opens with that
   client's own mark, above the quote, the way the live page does. The width cap is
   the column the live page puts it in (a Beaver Builder small column, 360px less
   its padding): three of the four marks are narrower than that and keep their own
   size, the widest one comes down to it. It is centred in that column and the copy
   under it is not, which is how the previous site set it; the space under it is the
   column's own gap, below. */
.spotlight__logo { display: block; width: auto; height: auto; max-width: min(240px, 100%); margin: 0 auto; }

/* "The design of the page should look like our existing site" — each client story
   is two columns, as it was there: a narrow one on white carrying the logo, the
   quote and the person, and a wide one on the tinted ground carrying the two
   headed parts of the story, with a hairline between them that curves away at the
   top. The split is a third of the container, measured off the previous site's
   own page. The client name is still a heading above the pair, for screen readers
   and for the anchor in "On this page", but it is hidden on screen: the logo
   already names the client. Sizes and spacing are about a quarter smaller than
   the first version, which read too big.
   The tinted ground runs to the right edge of the window: ::after paints it past
   the container and the section clips what runs over, which keeps the bleed off
   the horizontal scroll (a 100vw margin would take the scrollbar's width with it
   and push the page sideways). */
.spotlight { overflow: hidden; }
.spotlight__row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); }
.spotlight__aside {
  display: flex; flex-direction: column; gap: 54px;
  padding: 36px 36px 36px 0;
}
.spotlight__story {
  position: relative; background: var(--bg-alt);
  padding: 36px 42px 42px 48px;
}
.spotlight__story::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: 100%;
  width: 100vw; background: var(--bg-alt);
}
/* The hairline. It is drawn by a box that sits in the gutter to the left of the
   tint and shows only its right and top borders, so the radius on that corner is
   what bends the line away from the column at the top. */
.spotlight__story::before {
  content: ""; position: absolute; top: 0; bottom: 0; left: -24px; width: 24px;
  border-top: 1px solid var(--color-purple);
  border-right: 1px solid var(--color-purple);
  border-top-right-radius: 24px;
}
/* The quote: purple italic, larger than body copy, then the person's name large
   and in the body ink with the job title under it. The name is the <strong> the
   markdown source puts there and the <br> after it is what starts the title line,
   so both are sized inline rather than turned into blocks — a block would add an
   empty line where that <br> falls. */
.spotlight__quote blockquote { margin: 0; }
.spotlight__quote blockquote p {
  font-size: 18px; font-style: italic; font-weight: 500; line-height: 1.55;
  color: var(--accent);
}
.spotlight__quote blockquote p + p {
  margin-top: 42px;
  font-size: 16px; font-style: normal; font-weight: 400; line-height: 1.7;
  color: var(--ink);
}
.spotlight__quote blockquote p + p strong {
  font-size: 22px; font-weight: 400; line-height: 2; color: var(--ink);
}
/* The two headings of the story, large and regular weight: the first navy, every
   one after it purple — "Our Client's Story" then "Anatomy IT Partnership". */
.spotlight__story .prose { max-width: none; }
.spotlight__story .prose h3 {
  font-size: clamp(24px, 2.4vw, 34px); font-weight: 400; line-height: 1.15;
  margin-top: 1.4em;
}
.spotlight__story .prose h3:first-child { margin-top: 0; }
.spotlight__story .prose h3 ~ h3 { color: var(--accent); }
.spotlight__story .prose h3 + p { margin-top: 1em; }
.spotlight__story .prose p { font-size: 16px; }

@media (max-width: 900px) {
  /* Stacked: logo, quote, person, then the story. The tint keeps its bleed on the
     right and ::before gives up the hairline to bleed it on the left instead, so
     the story reads as a band across the page rather than a panel inset in it. */
  .spotlight__row { grid-template-columns: 1fr; }
  .spotlight__aside { padding: 0 0 30px; gap: 30px; }
  .spotlight__story { padding: 30px 0 33px; }
  .spotlight__story::before {
    left: auto; right: 100%; width: 100vw; border: 0; border-radius: 0;
    background: var(--bg-alt);
  }
  .spotlight__quote blockquote p + p strong { font-size: 20px; }
  .spotlight__story .prose p { font-size: 16px; }
}

/* "Please add scam alert pop up like current site". The notice ships as an
   open <dialog>, so it has two faces and both are styled here. Open in the markup
   it is a block of the page (the UA stylesheet takes a non-modal dialog out of the
   flow, hence position: static); opened by the script it is a modal, and :modal
   hands back the UA's fixed position and centring. */
.scam-notice {
  position: static; width: auto; max-width: 720px; margin: 0;
  padding: 28px; border: 1px solid var(--color-grey-e8); border-radius: 12px;
  background: var(--bg); color: var(--ink); box-shadow: var(--shadow-card);
}
.scam-notice:modal {
  position: fixed; margin: auto;
  max-width: min(720px, calc(100% - 32px)); max-height: calc(100% - 64px); overflow: auto;
}
.scam-notice::backdrop { background: var(--scrim-modal); }
.scam-notice h2 { margin: 0 0 18px; }
.scam-notice__close { margin-top: 24px; }
/* The band that holds the notice is empty whenever the notice is not sitting in
   it: once a visitor has closed it, and while it floats above the page as a
   modal. Its padding stayed, and read as 160px of blank between the opening
   block and Core Values. With no scripting the notice stays open in place and
   the band keeps its padding, which is when it has something to hold. */
.section:has(> .container > .scam-notice:not([open])),
.section:has(> .container > .scam-notice:modal) { padding: 0; }
/* .btn is inline-flex, which beats the hidden attribute on its own. The button is
   hidden until the script that opens the dialog is there to give it something to do. */
[data-scam-open][hidden], [data-scam-close][hidden] { display: none; }