/* ===================================================================
   iMatrics section and component styles.

   THE RULE: pattern markup carries classes, never inline styles.
   Everything visual lives here, keyed to .im-* classes. That is what
   makes a colour change one edit instead of ten pages of block
   attributes.

   Selectors use :where() where possible so specificity stays at zero
   and an editor's block settings can still override them.

   Depends on tokens.css for every value. No raw hex below this line.
   =================================================================== */

/* -------------------------------------------------------------------
   1. Base
   ------------------------------------------------------------------- */

/* Base typography is scoped to `body:not(.brz)`.
   Brizy adds `.brz` to the body of every page it renders, so during the
   transition these rules stay off the old pages entirely and cannot fight
   Brizy's own styling. Once Brizy is gone the guard is a no-op and can be
   dropped. The .im-* rules need no guard — they only match our own markup. */

body:not(.brz) {
  font-family: var(--font-sans);
  color: var(--navy-800);
  -webkit-font-smoothing: antialiased;

  /* Blocksy applies `font-family: var(--theme-font-family)` to body AND h1-h6,
     label and figcaption in main.min.css. That selector has specificity (0,0,1);
     our heading rule below is wrapped in :where(), which is (0,0,0) — so Blocksy
     won and every heading on the site rendered in its default system stack
     instead of Montserrat. Raising specificity here would break the .im-navy
     colour overrides, which are also :where()-wrapped. Pointing Blocksy's own
     variable at our font fixes it without touching the cascade anywhere else. */
  --theme-font-family: var(--font-sans);
}

:where(body:not(.brz)) p,
:where(body:not(.brz)) li {
  color: var(--gray-600);
  line-height: var(--leading-relaxed);
  font-weight: var(--fw-medium);
  text-wrap: pretty;
}

:root {
  /* Not in the token set — v2 introduced a monospace role with no family. */
  --im-font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
}

:where(body:not(.brz)) :where(h1, h2, h3, h4) {
  font-family: var(--font-display);
  font-weight: var(--fw-extrabold);
  letter-spacing: var(--tracking-tight);
  line-height: var(--leading-tight);
  color: var(--navy-800);
  text-wrap: balance;
}

::selection {
  background: var(--mint-200);
}

/* Dark sections invert the text colours rather than restating them
   on every child block. */
.im-on-navy,
.im-on-navy :where(h1, h2, h3, h4) {
  color: var(--white);
}

.im-on-navy :where(p, li) {
  color: var(--indigo-200);
}

/* -------------------------------------------------------------------
   2. Header — Blocksy renders this, we only restyle the active item.

   Confirmed against the live DOM 2026-09-04. Real markup is:
     header#header.ct-header[data-id="type-1"]
       > div[data-device="desktop"|"mobile"]
         > .ct-sticky-container > div[data-sticky]
           > div[data-row="top"|"middle"|"bottom"]
             > .ct-container > div[data-column] > div[data-items]
               > nav.header-menu-1.menu-container[data-id="menu"]

   Blocksy exposes row chrome as CSS vars on #header [data-row]:
   --theme-border-bottom, --theme-box-shadow, --theme-backdrop-blur.
   Set those from the Customizer (Header → row → Design) rather than
   overriding them here — the design's white-94%-plus-blur is a native
   row setting, not something this file needs to fight for.
   ------------------------------------------------------------------- */

.ct-header [class*="menu"] li.current-menu-item > a,
.ct-header [class*="menu"] li.current-menu-ancestor > a {
  position: relative;
}

.ct-header [class*="menu"] li.current-menu-item > a::after,
.ct-header [class*="menu"] li.current-menu-ancestor > a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  border-radius: 3px 3px 0 0;
  background: var(--mint-400);
}

/* -------------------------------------------------------------------
   3. Buttons
   ------------------------------------------------------------------- */

:where(body:not(.brz) .wp-block-button) .wp-block-button__link {
  border-radius: var(--radius-pill);
  font-weight: var(--fw-bold);
  font-size: var(--text-base);
  letter-spacing: 0;
  padding: 0 var(--space-5);
  line-height: 40px;
  transition: background var(--dur-fast) var(--ease-standard),
              transform var(--dur-fast) var(--ease-standard),
              border-color var(--dur-fast) var(--ease-standard);
}

:where(.wp-block-button) .wp-block-button__link:hover {
  transform: translateY(-1px);
}

.im-btn--lg .wp-block-button__link {
  line-height: 46px;
  padding: 0 var(--space-6);
}

.im-btn--primary .wp-block-button__link {
  background: var(--navy-800);
  color: var(--white);
  border: 1px solid var(--navy-800);
}

.im-btn--primary .wp-block-button__link:hover {
  background: var(--navy-950);
  border-color: var(--navy-950);
}

.im-btn--accent .wp-block-button__link {
  background: var(--mint-400);
  color: var(--navy-800);
  border: 1px solid var(--mint-400);
}

.im-btn--accent .wp-block-button__link:hover {
  background: var(--mint-500);
  border-color: var(--mint-500);
}

.im-btn--secondary .wp-block-button__link {
  background: var(--white);
  color: var(--navy-800);
  border: 1px solid var(--gray-300);
}

.im-btn--secondary .wp-block-button__link:hover {
  border-color: var(--indigo-300);
  color: var(--indigo-700);
}

/* The second conversion path — "Try the demo" → the webportal. One step
   down in weight from primary, same size, so it reads as an alternative
   rather than a competitor. */
.im-btn--outline .wp-block-button__link {
  background: transparent;
  color: var(--navy-800);
  border: 1px solid var(--navy-800);
}

.im-btn--outline .wp-block-button__link:hover {
  background: var(--navy-800);
  color: var(--white);
}

/* Navigation actions are text links, never buttons, so they don't compete
   with the two CTAs. */
.im-textlink a {
  color: var(--indigo-500);
  font-weight: var(--fw-bold);
  font-size: var(--text-base);
  text-decoration: none;
}

.im-textlink a:hover {
  color: var(--indigo-700);
}

/* -------------------------------------------------------------------
   4. Shared bits
   ------------------------------------------------------------------- */

/* v2: eyebrows sit behind a 2px left rule rather than being coloured text. */
.im-eyebrow {
  font-size: var(--text-2xs);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--indigo-500);
  margin-bottom: var(--space-3);
  padding-left: var(--space-3);
  border-left: 2px solid var(--indigo-500);
}

.im-on-navy .im-eyebrow,
.im-navy .im-eyebrow {
  color: var(--mint-300);
  border-left-color: var(--mint-400);
}

/* The HERO eyebrow is a pill, not a left rule — v2 specifies "mint pill
   eyebrow with a pulsing dot". Section eyebrows elsewhere keep the rule. */
.im-eyebrow--pill {
  display: inline-flex;
  align-items: center;
  padding: 9px 18px;
  border: 1px solid rgba(86, 227, 159, 0.38);
  background: rgba(86, 227, 159, 0.10);
  border-radius: var(--radius-pill);
  border-left-width: 1px;
  color: var(--mint-300);
}

.im-navy .im-eyebrow--pill { border-left-color: rgba(86, 227, 159, 0.38); }

/* v2: monospace numeric index (outcome cards, process steps). The token set
   has no mono family, so it is declared here. */
.im-index {
  font-family: var(--im-font-mono);
  font-size: 1.5rem;
  font-weight: var(--fw-bold);
  letter-spacing: 0.06em;
  color: var(--mint-text);
  line-height: 1;
}

.im-navy .im-index,
.im-on-navy .im-index {
  color: var(--mint-400);
}

/* Standard section rhythm — the handoff's 62–88px vertical padding. */
.im-section {
  padding-block: clamp(var(--space-9), 7vw, 5.5rem);
}

/* -------------------------------------------------------------------
   5. Pattern: CTA band
   The Pro "Content Block" replacement — a synced pattern closing
   every page.
   ------------------------------------------------------------------- */

/* The band was a light gray-50 strip until the September 2026 update
   handoff gave it the hero treatment. Nearly all of that arrives with
   .im-navy (section 7): gradient, graph lattice, mint hairline, white
   type. What is left here is the three places this band differs.

   SPECIFICITY NOTE: this section sits ABOVE section 7 in the file, and
   `.im-navy :where(p, li)` scores (0,1,0) — the same as a bare class —
   so a single-class rule on a paragraph in here would tie and lose on
   source order. The paragraph rules below are therefore written with
   .im-navy in front, which takes them to (0,2,0). */

.im-cta-band {
  /* Difference 1: the hairline goes on top, not the bottom. This band
     closes the page against the navy-900 footer, where a bottom rule
     would draw a line between two dark surfaces for no reason. */
  border-top: 1px solid rgba(86, 227, 159, 0.28);
  border-bottom: 0;
  padding-block: clamp(var(--space-9), 6vw, 4.5rem);
}

/* Difference 2: every other navy section gets an indigo blob anchored
   bottom-right. This one is mint and hangs off the top-right corner.
   Written as .im-navy.im-cta-band, not .im-cta-band: the rule it has to
   beat is .im-navy::after, which scores the same (0,1,1) as a single
   class plus a pseudo-element and sits LATER in the file, so a one-class
   selector loses on source order and the indigo blob stays. */
.im-navy.im-cta-band::after {
  top: -180px;
  right: -120px;
  bottom: auto;
  width: 520px;
  max-width: 78%;
  height: 430px;
  aspect-ratio: auto;
  background: var(--mint-400);
  opacity: 0.13;
  border-radius: 54% 46% 43% 57% / 49% 52% 48% 51%;
}

/* Difference 3: copy left, actions right, wrapping when they no longer
   fit side by side. `margin-block: 0` on the children, not just
   margin-block-start — see the note above .im-domains for why the end
   margin is the one that bites. */
.im-cta-band__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6) var(--space-8);
  flex-wrap: wrap;
}

.im-cta-band__row > *,
.im-cta-band__copy > *,
.im-cta-band__actions > * {
  margin-block: 0;
}

.im-cta-band__copy {
  max-width: 52ch;
  flex: 1 1 30ch;
}

.im-cta-band__title {
  /* The design's 34px. --text-2xl is 30px and --text-3xl is 38px, so this
     one lands between the tokens rather than on one; it is scaled down on
     small screens instead of being pinned, like the other display sizes. */
  font-size: clamp(1.75rem, 1.4rem + 1.4vw, 2.125rem);
  line-height: 1.1;
  letter-spacing: -0.022em;
  margin: 0 0 var(--space-3);
}

.im-navy .im-cta-band__sub {
  margin: 0;
  font-size: var(--text-md);
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.78);
}

.im-cta-band__actions {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  flex-wrap: wrap;
}

.im-cta-band__actions .im-textlink,
.im-cta-band .im-textlink {
  margin-top: 0;
}

@media (max-width: 720px) {
  .im-cta-band__row {
    display: block;
  }
  .im-cta-band__actions {
    margin-top: var(--space-6);
  }
  /* At desktop widths most of the blob hangs off the corner and only a soft
     edge shows. On a phone the same box covers three quarters of the band and
     stops being an accent, so it is scaled to the smaller canvas. */
  .im-navy.im-cta-band::after {
    top: -140px;
    right: -110px;
    width: 340px;
    height: 300px;
    max-width: none;
  }
}

/* -------------------------------------------------------------------
   6. Pattern: product sub-nav
   The Pro "conditional header" replacement — placed as the first block
   on the four product pages, so it reads as chrome without being it.
   ------------------------------------------------------------------- */

.im-subnav {
  background: var(--gray-50);
  border-bottom: 1px solid var(--gray-200);
  border-top: 1px solid var(--gray-100);
  padding-block: 0;
}

.im-subnav__inner {
  min-height: 50px;
  display: flex;
  align-items: center;
  gap: var(--space-5);
  flex-wrap: wrap;
}

.im-subnav p {
  margin: 0;
  font-size: var(--text-sm);
  font-weight: var(--fw-bold);
}

.im-subnav a {
  color: var(--gray-500);
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease-standard);
}

.im-subnav a:hover {
  color: var(--navy-800);
}

.im-subnav [aria-current="page"] {
  color: var(--navy-800);
}

@media (max-width: 720px) {
  .im-subnav__inner {
    gap: var(--space-3);
    padding-block: var(--space-3);
  }
}


/* ===================================================================
   7. Navy sections — gradient, graph lattice, blob, mint hairline

   Both motifs are pseudo-elements, so they attach to any section that
   carries .im-navy and no editor can delete or mangle them. The lattice
   is generated by tools/gen-lattice.py; regenerate it there, never by
   hand-editing the SVG.
   =================================================================== */

.im-navy {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: linear-gradient(158deg, var(--navy-800) 0%, var(--navy-950) 55%, var(--navy-900) 100%);
  border-bottom: 1px solid rgba(86, 227, 159, 0.28);
  color: var(--white);
}

/* Knowledge-graph lattice. Masked so it fades away from the copy. */
.im-navy::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image: url("../img/graph-lattice.svg");
  background-size: cover;
  background-position: 50% 0;
  -webkit-mask-image: radial-gradient(120% 110% at 72% 6%, #000 18%, transparent 76%);
          mask-image: radial-gradient(120% 110% at 72% 6%, #000 18%, transparent 76%);
}

/* One oversized indigo blob per navy section, anchored to a corner. */
.im-navy::after {
  content: "";
  position: absolute;
  z-index: -2;
  right: -14%;
  bottom: -46%;
  width: 62%;
  aspect-ratio: 1.15;
  pointer-events: none;
  background: var(--indigo-700);
  opacity: 0.42;
  border-radius: 58% 42% 47% 53% / 44% 51% 49% 56%;
}

.im-navy--blob-left::after {
  right: auto;
  left: -18%;
  bottom: -40%;
  border-radius: 47% 53% 58% 42% / 51% 44% 56% 49%;
}

.im-navy :where(h1, h2, h3, h4) { color: var(--white); }
.im-navy :where(p, li) { color: var(--indigo-200); }
.im-navy .im-standfirst { color: var(--mint-300); }

/* ===================================================================
   8. Mockup panel — the v2 component the outcome cards depend on
   =================================================================== */

.im-mockup {
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: 11px;
  box-shadow: 0 12px 26px -18px rgba(0, 34, 85, 0.45);
  overflow: hidden;
}

.im-mockup__title {
  font-size: 0.5625rem;
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--gray-500);
  padding: var(--space-2) var(--space-3);
  border-bottom: 1px solid var(--gray-100);
  margin: 0;
}

.im-mockup__body {
  padding: var(--space-3);
  font-size: 0.78125rem;
  line-height: 1.45;
}

.im-mockup__body p { font-size: inherit; margin: 0 0 var(--space-2); }
.im-mockup__body p:last-child { margin-bottom: 0; }

/* Hero mockup on navy — mint edge ring and glow, per v2. */
.im-hero-mockup {
  border-radius: var(--radius-lg);
  overflow: hidden;
  line-height: 0;   /* no inline-descender gap under the image */
  box-shadow: 0 30px 62px -22px rgba(0, 34, 85, 0.55),
              0 0 0 1px rgba(86, 227, 159, 0.22),
              0 0 70px -14px rgba(86, 227, 159, 0.3);
}

/* WordPress gives .wp-block-image a 24px bottom margin. Inside this wrapper
   that made the box 24px TALLER than the picture, so the mint hairline and the
   glow were drawn low and read as an empty rectangle under the panel. */
.im-hero-mockup > *,
.im-hero-mockup figure { margin: 0; }
.im-hero-mockup img { display: block; width: 100%; height: auto; }

/* ===================================================================
   9. Cards, grids and rows
   =================================================================== */

.im-card {
  background: var(--white);
  border-radius: var(--radius-lg);
  border: 1px solid var(--gray-200);
  padding: var(--space-5);
  transition: box-shadow var(--dur-base) var(--ease-standard),
              transform var(--dur-base) var(--ease-standard);
}

.im-card:hover {
  border-color: var(--indigo-300);
  box-shadow: 0 26px 54px -26px rgba(0, 34, 85, 0.55);
  transform: translateY(-2px);
}

.im-card h3 { font-size: var(--text-lg); margin: 0 0 var(--space-3); }

/* Outcome card (homepage "Catch up with big tech") — see section 33. */

/* Full-width row list — products overview, careers openings. */
.im-rows { border-top: 1px solid var(--gray-200); }

.im-row {
  display: grid;
  grid-template-columns: 260px 1fr 180px;
  gap: var(--space-5);
  align-items: start;
  padding: var(--space-6) 0;
  border-bottom: 1px solid var(--gray-200);
  transition: background var(--dur-fast) var(--ease-standard);
}

.im-row:hover { background: var(--gray-50); }
.im-row h3 { font-size: var(--text-lg); margin: 0 0 var(--space-2); }

/* Logo grid — 4 up, individual files on a common optical box. */
.im-logo-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-6);
  align-items: center;
  max-width: 1000px;
  margin-inline: auto;
}

.im-logo-grid img {
  max-width: 150px;
  max-height: 46px;
  width: auto;
  height: auto;
  object-fit: contain;
  margin-inline: auto;
  opacity: 0.92;
  transition: opacity var(--dur-fast) var(--ease-standard);
}

.im-logo-grid img:hover { opacity: 1; }

/* Numbered process row. */
.im-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-5); }
.im-steps h3 { font-size: var(--text-base); margin: var(--space-3) 0 var(--space-2); }

/* Case study block. */
.im-case { align-items: center; }
.im-case img { border-radius: var(--radius-lg); }

/* ===================================================================
   10. Responsive — the prototype is desktop-only; these are the
   handoff's suggested breakpoints, applied once rather than per page.
   =================================================================== */

@media (max-width: 1024px) {
  .im-steps,
  .im-logo-grid { grid-template-columns: repeat(2, 1fr); }
  .im-row { grid-template-columns: 200px 1fr; }
  .im-row > :last-child { grid-column: 2; }
}

@media (max-width: 720px) {
  .im-steps,
  .im-logo-grid { grid-template-columns: repeat(2, 1fr); }
  .im-row { grid-template-columns: 1fr; gap: var(--space-3); }
  .im-row > :last-child { grid-column: 1; }
  .im-section { padding-block: var(--space-8); }
}

/* ===================================================================
   11. Supporting classes used by the patterns
   =================================================================== */

.im-h1 { font-size: 2.875rem; }

.im-standfirst {
  font-size: var(--text-md);
  font-weight: var(--fw-semibold);
  line-height: var(--leading-normal);
}

/* The products handoff specifies a hero lead in white at 78%, not the mint
   standfirst the rest of the site uses, and caps the measure. Full-width lead
   text across a 1220px column is unreadable regardless of colour. */
.im-hero-lead {
  font-size: var(--text-md);
  line-height: var(--leading-normal);
  max-width: 62ch;
}

.im-navy .im-hero-lead { color: rgba(255, 255, 255, 0.78); }

.im-hero-single > * { margin-block: 0; }
.im-hero-single > * + * { margin-block-start: var(--space-4); }

.im-kicker {
  font-size: var(--text-sm);
  font-weight: var(--fw-semibold);
  color: var(--gray-500);
  margin-bottom: var(--space-6);
}

.im-meta {
  font-size: var(--text-sm);
  color: var(--gray-500);
  margin: 0;
}

.im-crumbs {
  font-size: 0.6875rem;
  color: var(--gray-500);
  letter-spacing: 0.02em;
}

.im-stat__value {
  font-size: var(--text-xl);
  font-weight: var(--fw-extrabold);
  letter-spacing: var(--tracking-tight);
  color: var(--navy-800);
  margin: 0 0 var(--space-1);
}

.im-stats { margin-block: var(--space-5); }

/* About's four stat tiles. They began beside "Who we are", where four across
   a ~570px column left 140px each — not enough for "founded in Linköping" —
   so they were laid out 2x2. Christoffer's own edit then put the company film
   in that column, and the tiles moved to a band of their own below it, where
   the full 1220px gives each one ~290px. Four across above 900px, 2x2 below,
   stacked on a phone.

   A grid rather than the flex wp-block-columns underneath, so in the 2x2 state
   the two rows line up instead of each sizing itself. */
.im-stats--quad {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-6);
}

.im-stats--quad > * { margin-block: 0; flex-basis: auto; }

@media (max-width: 900px) {
  .im-stats--quad {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-5) var(--space-6);
  }
}

@media (max-width: 480px) { .im-stats--quad { grid-template-columns: 1fr; } }

/* A band holding nothing but one row of small stat tiles. At the standard
   .im-section rhythm (up to 88px top and bottom) it reads as an empty grey
   stripe with some text in it, so the padding is roughly halved. */
.im-statsband {
  padding-block: clamp(2.25rem, 4vw, 3.25rem);
}

.im-statsband .im-stats { margin-block: 0; }

/* The company film on About. Core sizes the 16:9 box; this only matches the
   corner treatment the mockup panels carry, so the video does not sit as the
   one square-cornered thing on the page. */
.wp-block-embed__wrapper iframe {
  display: block;
  border-radius: var(--radius-lg);
}
.im-minicards { margin-bottom: var(--space-4); }
.im-band-head { margin-bottom: var(--space-7); align-items: end; }
.im-hero-cols { gap: var(--space-8); }

/* The steps row is a grid of groups, and WordPress zeroes margin-block-start
   only on the FIRST child — so steps 02-04 sat 24px below step 01. Reset BOTH
   block margins, not just the start; see the note above .im-domains. */
.im-steps > *,
.im-outcomes > *,
.im-rows > * { margin-block: 0; }

/* Ghost pill — "Try the demo" on navy, where an outline in navy would
   disappear. Same weight relationship as .im-btn--outline on white. */
.im-btn--ghost .wp-block-button__link {
  background: transparent;
  color: var(--white);
  border: 1px solid rgba(255, 255, 255, 0.45);
}

.im-btn--ghost .wp-block-button__link:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: var(--white);
}

.im-textlink--on-navy a { color: var(--mint-300); }
.im-textlink--on-navy a:hover { color: var(--mint-400); }

/* The hero eyebrow carries a pulsing status dot (v2). */
.im-navy .im-eyebrow::before {
  content: "";
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-right: var(--space-2);
  border-radius: 50%;
  background: var(--mint-400);
  animation: imx-pulse 2.6s var(--ease-standard) infinite;
}

@keyframes imx-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(86, 227, 159, 0.55); }
  70%  { box-shadow: 0 0 0 9px rgba(86, 227, 159, 0); }
  100% { box-shadow: 0 0 0 0 rgba(86, 227, 159, 0); }
}

@media (prefers-reduced-motion: reduce) {
  .im-navy .im-eyebrow::before { animation: none; }
}

/* ===================================================================
   12. Logo marquee

   An alternative to .im-logo-grid: a continuous, seamless scroll rather
   than a paged carousel. Pure CSS — no JS, no plugin, which matters
   because shedding plugin dependencies was a reason for the rebuild.

   The track holds the logo set TWICE. Translating it -50% lands the
   second copy exactly where the first began, so the loop is invisible
   and there is no jump. The duplicate is aria-hidden so screen readers
   hear each customer once.

   HISTORY: handoff v2 specified a static 4x2 grid and banned carousels
   under Interactions. Christoffer overrode that in favour of this
   marquee, and the September 2026 update handoff has since adopted it as
   the design. .im-logo-grid is kept for the record but is unused.
   =================================================================== */

/* THE BAND. The hairlines run the full width of the viewport; the carousel
   inside them stops at the 1220px measure like everything else.

   It was fully full-bleed for a few hours. Christoffer compared the two
   pages while only home had been re-pasted and preferred the older,
   contained treatment still live on /customers/: at viewport width the
   logos are small relative to the band, and the edge mask clips the
   leading and trailing marks against the screen edge rather than fading
   them. Contained, the fade lands on the content boundary where it reads
   as intended.

   The group is emitted with `layout: default` (see logo_marquee() in
   tools/gen-pages.py), so nothing here has to fight WordPress's
   constrained layout for the width. The measure is put back by hand on
   the label alone. padding-inline is pinned to 0 in case the parent
   theme insets alignfull sections. */
.im-logo-band {
  padding-block: 48px 56px;
  padding-inline: 0;
  border-top: 1px solid var(--gray-200);
  border-bottom: 1px solid var(--gray-200);
}

.im-logo-band > * { margin-block: 0; }

.im-logo-band__head,
.im-logo-band .im-logo-marquee {
  max-width: 1220px;
  margin-inline: auto;
  padding-inline: var(--space-6);
}

.im-logo-band__head {
  margin-bottom: 28px;
}

/* The band label, centred at 26px (Christoffer, 2026-09-07).
   It was an 11.5px uppercase tracked eyebrow. At 26px that treatment stops
   working — uppercase with 0.16em tracking runs the line past 700px and
   shouts — so it is set as a statement line instead: sentence case, no extra
   tracking, navy rather than the eyebrow's gray, which at this size would
   read as placeholder text.
   .im-kicker's own bottom margin is dropped because the band already spaces
   the label with margin-bottom above; two margins would stack to 60px
   against the design's 28px. */
.im-logo-band__head .im-kicker {
  margin-bottom: 0;
  text-align: center;
  font-size: clamp(1.375rem, 1.1rem + 1.1vw, 1.625rem);
  line-height: 1.25;
  font-weight: var(--fw-semibold);
  letter-spacing: -0.01em;
  text-transform: none;
  color: var(--navy-800);
  text-wrap: balance;
}

.im-logo-marquee {
  --im-marquee-duration: 42s;
  position: relative;
  overflow: hidden;
  /* The measure, put back by hand — the band above is unconstrained so that
     the hairlines can reach the edges. Written as .im-logo-band .im-logo-marquee
     below rather than here, because the head needs the same treatment and
     both are set in one place. */
  /* A mask rather than two gradient overlays. The overlays had to know the
     section's background colour, which meant a second rule for every ground
     the band might sit on; a mask fades to transparent and is right on all
     of them. */
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 9%, #000 91%, transparent 100%);
          mask-image: linear-gradient(to right, transparent 0, #000 9%, #000 91%, transparent 100%);
}

.im-logo-marquee__track {
  display: flex;
  align-items: center;
  width: max-content;
  animation: im-marquee var(--im-marquee-duration) linear infinite;
}

/* Spacing lives on the item, NOT as `gap` on the track. With `gap`, the
   track measures 16 logos + 15 gaps, so translating -50% moves by half a
   gap less than one full set and the loop jumps ~72px every cycle. Making
   each figure carry its own trailing margin makes the repeating unit
   uniform, so -50% is exactly one set. (The design's alternative is to
   keep the gap and translate by `calc(-50% - 36px)`; this is the same
   correction expressed where it cannot drift out of step with the gap.) */
.im-logo-marquee figure {
  margin: 0 72px 0 0;
  flex: none;
}

/* Pause on hover so anyone can actually read a logo they spotted. */
.im-logo-marquee:hover .im-logo-marquee__track,
.im-logo-marquee:focus-within .im-logo-marquee__track {
  animation-play-state: paused;
}

.im-logo-marquee img {
  width: auto;
  height: auto;
  object-fit: contain;
  opacity: 0.92;
  transition: opacity var(--dur-fast) var(--ease-standard);
}

.im-logo-marquee img:hover { opacity: 1; }

/* PER-LOGO OPTICAL SIZING. These eight wordmarks are drawn at completely
   different proportions — Svenskt Näringsliv is a stacked mark twice the
   height of Medialivre's single line of type. Normalising them to one
   height makes the wide ones unreadable and the stacked one shout, so
   each carries its own pair. Sizes come from the update handoff.
   The same classes size the logo inside a quote card. */
/* Each cap is that artwork's OWN pixel size, so every mark renders 1:1 and
   none is upscaled into softness. The update handoff's caps were roughly
   40% of these; at those sizes the strip read as a thin ribbon of small
   marks. Christoffer compared it against /customers/, which was still
   rendering at native because the old markup carried no per-logo classes at
   all, and preferred that. Native is also the ceiling — going larger only
   blurs them, and only new artwork raises it. */
.im-logo--handelsblatt       { max-width: calc(282px * var(--im-logo-scale, 1)); max-height: calc(124px * var(--im-logo-scale, 1)); }
.im-logo--ntm                { max-width: calc(249px * var(--im-logo-scale, 1)); max-height: calc( 46px * var(--im-logo-scale, 1)); }
.im-logo--sjaellandske       { max-width: calc(271px * var(--im-logo-scale, 1)); max-height: calc( 90px * var(--im-logo-scale, 1)); }
.im-logo--stampen            { max-width: calc(217px * var(--im-logo-scale, 1)); max-height: calc( 82px * var(--im-logo-scale, 1)); }
.im-logo--ch-media           { max-width: calc(256px * var(--im-logo-scale, 1)); max-height: calc( 49px * var(--im-logo-scale, 1)); }
.im-logo--stuff              { max-width: calc(218px * var(--im-logo-scale, 1)); max-height: calc( 76px * var(--im-logo-scale, 1)); }
.im-logo--medialivre         { max-width: calc(228px * var(--im-logo-scale, 1)); max-height: calc( 37px * var(--im-logo-scale, 1)); }
.im-logo--svenskt-naringsliv { max-width: calc(270px * var(--im-logo-scale, 1)); max-height: calc(128px * var(--im-logo-scale, 1)); }

/* ONE KNOB FOR ALL EIGHT. Native size is right on a desktop and far too big
   on a phone — Handelsblatt alone is 282px against a 390px screen, so barely
   one mark is on screen at a time. Scaling every cap by the same factor keeps
   the optical relationships intact where a per-breakpoint rewrite of eight
   pairs would not. */
@media (max-width: 900px) { .im-logo-marquee { --im-logo-scale: 0.72; } }
@media (max-width: 600px) { .im-logo-marquee { --im-logo-scale: 0.5; } }

@keyframes im-marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* Motion is decorative here, so drop it entirely when asked and fall
   back to the static grid the design originally specified. */
@media (prefers-reduced-motion: reduce) {
  .im-logo-marquee {
    -webkit-mask-image: none;
            mask-image: none;
  }
  .im-logo-marquee__track {
    animation: none;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-6);
    width: 100%;
  }
  .im-logo-marquee figure { margin: 0; }
  .im-logo-marquee [aria-hidden="true"] { display: none; }
}

/* On touch the animation fights the finger, so stop it and let the strip
   be scrolled instead — the handoff's responsive note. */
@media (hover: none) and (pointer: coarse) {
  .im-logo-marquee {
    overflow-x: auto;
    scrollbar-width: none;
  }
  .im-logo-marquee::-webkit-scrollbar { display: none; }
  .im-logo-marquee__track { animation: none; }
}

/* ===================================================================
   13. Product suite  (design_handoff_homepage, 2026-09-15)

   Two cards of equal weight — ConceptCore (white flagship) and
   Personalization (navy) — over a row of three small white cards, on a
   gray-50 band. It was a three-column mosaic with the flagship spanning
   two; the refinement evens the top row out.

   The band is .im-hsuite (gray-50, see §33). It carries NO top rule of its
   own: the logo band directly above already ends in one, and two would
   stack to 2px.

   Hover lift on the three small cards only. The flagship and the navy card
   are panels, not clickable tiles, and the handoff keeps that distinction.
   =================================================================== */

.im-suite__intro {
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.im-suite__intro > * { margin-block: 0; }

.im-suite__intro .im-eyebrow {
  align-self: flex-start;
  font-weight: var(--fw-extrabold);
  letter-spacing: 0.16em;
}

.im-suite-head {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
  align-items: end;
}

.im-suite-head > * { margin-block: 0; }
.im-suite-head .im-hlead { max-width: 46ch; }
.im-suite-head .im-suite-head__link { justify-self: end; }

/* Both rows. WordPress's constrained layout would put 24px above each; the
   design's 44px (intro → cards) and 26px (row → row) replace it, written at
   (0,2,0) so they beat core's (0,1,0) block-gap rule. */
.im-suite {
  display: grid;
  gap: 26px;
  align-items: stretch;
}

.im-suite > * { margin-block: 0; }
.im-hsuite > .im-suite--top { margin-block-start: 44px; }
.im-hsuite > .im-suite--row { margin-block-start: 26px; }

.im-suite--top { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.im-suite--row { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* Eyebrows inside suite cards: smaller, heavier, shorter rule than a
   section eyebrow. */
.im-suite .im-eyebrow {
  align-self: flex-start;
  margin: 0;
  padding-left: 9px;
  font-size: 0.65625rem;
  font-weight: var(--fw-extrabold);
  letter-spacing: 0.16em;
  line-height: 12px;
}

/* --- ConceptCore flagship -------------------------------------------
   Copy and feature list sit side by side when the card is at least
   2 x 260px + gap wide, and stack otherwise. A flex-wrap pair with a
   260px basis does exactly what the handoff's auto-fit grid does, and
   needs no breakpoint: at the desktop width the card is ~495px inside,
   so the list sits UNDER the copy, as it does in the prototype. */
.im-suite__flagship {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 32px;
  height: 100%;
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg);
  padding: 32px;
}

.im-suite__flagship > * { margin-block: 0; }

.im-suite__copy {
  flex: 1 1 260px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.im-suite__copy > * { margin-block: 0; }

.im-suite__copy h3 {
  margin: 0;
  font-size: 1.5625rem;
  line-height: 1.2;
  letter-spacing: -0.015em;
  font-weight: var(--fw-extrabold);
}

.im-suite__copy p {
  margin: 0;
  font-size: 0.96875rem;
  line-height: 1.65;
}

.im-suite__flagship .im-featurelist { flex: 1 1 260px; min-width: 0; }

/* Tag pills under the flagship copy. */
.im-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 6px;
}

/* .im-tag's base box lives in §22 (Personalization's concept chain), which
   comes later and wins. These two rules are kept because that page relies
   on them for its hover. The suite's own variant is scoped below. */
.im-tag {
  transition: border-color var(--dur-fast) var(--ease-standard),
              color var(--dur-fast) var(--ease-standard);
}

.im-tag:hover { border-color: var(--indigo-300); color: var(--indigo-700); }

.im-suite .im-tag {
  padding: 8px 14px;
  border-color: var(--gray-200);
  font-size: 0.78125rem;
  font-weight: var(--fw-semibold);
  line-height: 1.3;
  color: var(--gray-600);
}

/* Feature rows with NEW / SOON badges. */
.im-featurelist { display: flex; flex-direction: column; gap: 12px; }

.im-feature {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 15px 18px;
  border-radius: var(--radius-md);
  border: 1px solid var(--gray-200);
  background: var(--white);
  font-size: 0.90625rem;
  font-weight: var(--fw-bold);
  line-height: 1.3;
  color: var(--navy-800);
}

/* "Soon" is a gray-50 row with muted text — solid border, no longer dashed. */
.im-feature--soon {
  background: var(--gray-50);
  color: var(--gray-500);
}

.im-badge {
  flex: none;
  font-size: 0.59375rem;
  font-weight: var(--fw-extrabold);
  letter-spacing: 0.1em;
  line-height: 1.2;
  text-transform: uppercase;
  padding: 5px 11px;
  border-radius: var(--radius-pill);
  white-space: nowrap;
}

.im-badge--new  { background: var(--mint-400); color: var(--navy-800); }
.im-badge--soon { background: var(--gray-100); color: var(--gray-500); }

/* --- Personalization, the page's one dark card below the hero -------- */
.im-suite__navy {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  gap: 14px;
  height: 100%;
  background: var(--navy-800);
  border-radius: var(--radius-lg);
  padding: 32px;
  color: var(--white);
}

.im-suite__navy > * { margin-block: 0; }

/* A plain circle now, in the hero-blob colour (#2b3f70 in the handoff —
   mixed from tokens rather than written as a raw hex). */
.im-suite__navy::after {
  content: "";
  position: absolute;
  z-index: -1;
  right: -90px;
  bottom: -130px;
  width: 280px;
  height: 280px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--indigo-700) 55%, var(--navy-800));
  opacity: 0.6;
  pointer-events: none;
}

.im-suite .im-suite__navy .im-eyebrow { color: var(--mint-400); border-left-color: var(--mint-400); }

.im-suite__navy h3 {
  margin: 0;
  color: var(--white);
  font-size: 1.4375rem;
  line-height: 1.22;
  letter-spacing: -0.015em;
  font-weight: var(--fw-extrabold);
}

.im-suite__navy p {
  margin: 0;
  color: var(--indigo-200);
  font-size: var(--text-base);
  line-height: 1.65;
}

.im-suite__navy ul {
  list-style: none;
  padding: 0;
  margin: 8px 0 0;
  display: flex;
  flex-direction: column;
  gap: 11px;
}

.im-suite__navy li {
  position: relative;
  margin: 0;
  padding-left: 17px;
  color: var(--white);
  font-size: 0.875rem;
  font-weight: var(--fw-semibold);
  line-height: 1.4;
}

.im-suite__navy li::before {
  content: "";
  position: absolute;
  left: 0;
  top: calc(0.7em - 3px);
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--mint-400);
}

/* --- The three small cards ------------------------------------------ */
.im-suite__card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  height: 100%;
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg);
  padding: 28px 26px;
}

.im-suite__card > * { margin-block: 0; }

.im-suite__card h3 {
  margin: 0;
  font-size: var(--text-lg);
  line-height: 1.25;
  letter-spacing: -0.01em;
  font-weight: var(--fw-extrabold);
}

.im-suite__card p {
  margin: 0;
  font-size: var(--text-base);
  line-height: 1.65;
}

@media (max-width: 780px) {
  .im-suite--top,
  .im-suite--row,
  .im-suite-head { grid-template-columns: minmax(0, 1fr); }
  .im-suite-head .im-suite-head__link { justify-self: start; }
}

/* Standalone page mockups (iMatrics Times reader, concept manager, API panel,
   search results). These are exported WITHOUT a baked shadow so they crop
   tight and fill their column, so the raised treatment lives here instead.
   The outcome-card mockups do NOT use this — theirs is baked in. */
.im-mockup-img { margin: 0; }

.im-mockup-img img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-lg);
  box-shadow: 0 26px 56px -32px rgba(0, 34, 85, 0.5);
}

/* ===================================================================
   14. Footer

   Blocksy's footer row supplies the navy background and the full-bleed
   edge; this pattern supplies the four columns and the bottom bar, so
   the two do not fight over width. Keep the pattern's own background
   transparent.
   =================================================================== */

.im-footer { color: var(--indigo-200); }

.im-footer__cols {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1.2fr;
  gap: var(--space-7);
  padding-block: var(--space-8);
}

.im-footer__brand img { max-width: 150px; height: auto; }

.im-footer__brand p {
  color: var(--indigo-200);
  font-size: var(--text-base);
  margin-top: var(--space-4);
  max-width: 34ch;
}

.im-footer h2,
.im-footer h3 {
  font-size: var(--text-2xs);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--mint-300);
  margin: 0 0 var(--space-4);
}

.im-footer ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.im-footer li { color: var(--indigo-200); font-size: var(--text-base); }

.im-footer a {
  color: var(--indigo-200);
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease-standard);
}

.im-footer a:hover { color: var(--white); }

.im-footer__bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
  flex-wrap: wrap;
  padding-block: var(--space-5);
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  font-size: var(--text-sm);
}

.im-footer__bottom p { margin: 0; font-size: inherit; color: var(--indigo-200); }
.im-footer__legal { display: flex; flex-wrap: wrap; gap: var(--space-3) var(--space-5); }

@media (max-width: 1024px) {
  .im-footer__cols { grid-template-columns: 1fr 1fr; gap: var(--space-6); }
}

@media (max-width: 720px) {
  .im-footer__cols { grid-template-columns: 1fr; }
  .im-footer__bottom { flex-direction: column; align-items: flex-start; }
}

/* ===================================================================
   15. Contact — embed slot + "or try it yourself"

   The old layout was a two-column with both columns vertically centred.
   That works when the two sides are a similar height; it falls apart
   against an embed, because a HubSpot meeting scheduler is ~715px tall
   and the copy beside it is ~330px, so the copy floats in the middle of
   a tall navy void.

   Fixes: columns align to the TOP, and the left column carries enough
   real content (what happens next, contact details) to stand next to a
   700px embed without looking abandoned.
   =================================================================== */

/* WordPress gives every group child a 24px block margin. Inside a grid or flex
   container that shifts columns around and fights the container's own gap, so
   neutralise it where we own spacing. Reset BOTH block margins; see the note
   above .im-domains for why the end margin matters just as much. */
.im-contact__grid > *,
.im-next > *,
.im-next__item > *,
.im-contact__meta > *,
.im-tryout > * { margin-block: 0; }

.im-contact__grid {
  display: grid;
  /* 1.2fr on the right keeps the embed at ~630px, the width HubSpot's
     scheduler needs for its two-pane calendar layout. */
  grid-template-columns: 1fr 1.2fr;
  gap: var(--space-9);
  align-items: start;
}

.im-contact__lead { margin-bottom: var(--space-7); }

/* Numbered "what happens next" — fills the height with something useful
   rather than padding. */
.im-next { display: flex; flex-direction: column; gap: var(--space-5); margin-bottom: var(--space-7); }

.im-next__item { display: grid; grid-template-columns: 30px 1fr; gap: var(--space-4); align-items: start; }

.im-next__num {
  font-family: var(--im-font-mono);
  font-size: var(--text-sm);
  font-weight: var(--fw-bold);
  color: var(--mint-400);
  line-height: 1.5;
}

.im-next__item p { margin: 0; color: var(--indigo-200); }
.im-next__item strong { color: var(--white); font-weight: var(--fw-semibold); }

.im-contact__meta {
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  padding-top: var(--space-5);
  font-size: var(--text-base);
}

.im-contact__meta p { margin: 0 0 var(--space-2); color: var(--indigo-200); }
.im-contact__meta a { color: var(--mint-300); text-decoration: none; }
.im-contact__meta a:hover { color: var(--white); }

/* The embed slot. One wrapper for BOTH the scheduler and a form, so the
   page does not need relaying out when the two are swapped.
   min-height reserves the space so nothing jumps as the iframe loads. */
.im-embed {
  background: var(--white);
  border-radius: var(--radius-lg);
  box-shadow: 0 26px 56px -32px rgba(0, 34, 85, 0.5),
              0 0 0 1px rgba(86, 227, 159, 0.18);
  overflow: hidden;
  min-height: 720px;
}

/* The HubSpot meeting scheduler brings its own padding. */
.im-embed--scheduler { padding: 0; }
.im-embed--scheduler iframe { display: block; width: 100%; border: 0; }

/* A form does not, so give it card padding instead. A form is shorter than
   the scheduler, so it reserves less. */
.im-embed--form { padding: var(--space-6); min-height: 620px; }

/* ===================================================================
   16. "Or try it yourself" band

   Its own band on gray-50 rather than a footnote under the form. The
   portal is a genuine second path — lower commitment, no sales call —
   and it was previously a line of small text nobody would read.
   =================================================================== */

.im-tryout {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--space-7);
  align-items: center;
}

.im-tryout h2 { font-size: var(--text-xl); margin: 0 0 var(--space-3); }
.im-tryout p  { margin: 0; max-width: 60ch; }

@media (max-width: 1024px) {
  .im-contact__grid { grid-template-columns: 1fr; gap: var(--space-7); }
  .im-embed { min-height: 680px; }
  .im-tryout { grid-template-columns: 1fr; }
}

/* ===================================================================
   17. Wide mockup + hero stat cards

   .im-mockup-img--wide is for a mockup meant to span the whole content
   column (the search-results panel), rather than sit in half of a split.

   .im-herostat is the Personalization hero. The handoff puts three cards
   there instead of a mockup — two figures and a wider editorial note — so
   there is no image to export for that page.
   =================================================================== */

.im-mockup-img--wide img { width: 100%; height: auto; }

/* Scaled to 390px this panel is 140px tall and every label is illegible.
   Below the breakpoint let it keep a readable width and scroll instead. */
@media (max-width: 860px) {
  .im-mockup-img--wide {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .im-mockup-img--wide img { width: 760px; max-width: none; height: auto; }
}

.im-herostats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
}

.im-herostats > * { margin-block: 0; }

/* The third tile is the editorial-control note and runs the full width. */
.im-herostat--wide { grid-column: 1 / -1; }

.im-herostat {
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 14px;
  padding: var(--space-5);
}

.im-herostat > * { margin-block: 0; }

.im-herostat__value {
  font-size: var(--text-3xl);
  font-weight: var(--fw-extrabold);
  letter-spacing: var(--tracking-tight);
  line-height: 1.1;
  color: var(--mint-400);
  margin: 0 0 var(--space-3);
}

.im-navy .im-herostat p { color: var(--indigo-200); }
.im-herostat--wide p { margin: 0; }

@media (max-width: 720px) {
  .im-herostat__value { font-size: var(--text-2xl); }
}

/* ===================================================================
   18. Products page (redesign, design_handoff_products)

   Replaces the old .im-rows list. Each row is a card with three
   columns — name, description, mockup — and the whole row is a link.
   The two service rows carry no mockup and sit on gray-50, with the
   link in the third column instead.
   =================================================================== */

.im-prows {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.im-prows > * { margin-block: 0; }

.im-prow {
  display: grid;
  grid-template-columns: 240px 1fr 260px;
  gap: var(--space-7);
  align-items: center;
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg);
  padding: var(--space-6) var(--space-7);
  transition: border-color var(--dur-base) var(--ease-standard),
              box-shadow var(--dur-base) var(--ease-standard);
}

.im-prow > * { margin-block: 0; }

.im-prow:hover {
  border-color: var(--indigo-300);
  box-shadow: 0 18px 44px -28px rgba(0, 34, 85, 0.5);
}

/* The two service rows. */
.im-prow--service { background: var(--gray-50); }

.im-prow__name {
  font-size: var(--text-xl);
  font-weight: var(--fw-extrabold);
  letter-spacing: var(--tracking-tight);
  line-height: var(--leading-tight);
  margin: 0 0 var(--space-2);
  color: var(--navy-800);
}

.im-prow__cat {
  font-size: var(--text-xs);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--mint-text);
  margin: 0;
}

/* Services are delivery, not product — gray label, not mint. */
.im-prow--service .im-prow__cat { color: var(--gray-500); }

.im-prow__body p { margin: 0; }

.im-prow__body .im-textlink,
.im-prow__link .im-textlink { margin-top: var(--space-4); }

/* The link column on a service row has nothing above it to sit under. */
.im-prow__link .im-textlink { margin-top: 0; }

.im-prow__mockup { margin: 0; }
.im-prow__mockup img { display: block; width: 100%; height: auto; }

@media (max-width: 1024px) {
  /* Drop the mockup column, per the handoff. */
  .im-prow { grid-template-columns: 1fr; gap: var(--space-4); }
  .im-prow__mockup { display: none; }
}

/* ===================================================================
   19. Beyond editorial — the general-archive positioning block
   =================================================================== */

.im-beyond {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: var(--space-8);
  align-items: center;
}

.im-beyond > * { margin-block: 0; }

.im-asks {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-top: var(--space-6);
}

.im-asks > * { margin-block: 0; }

.im-ask {
  display: grid;
  grid-template-columns: 20px 1fr;
  gap: var(--space-3);
  align-items: start;
  margin: 0;
  color: var(--navy-800);
  font-weight: var(--fw-medium);
}

.im-ask::before {
  content: "→";
  color: var(--mint-text);
  font-weight: var(--fw-bold);
}

.im-graph { margin: 0; }
.im-graph img { display: block; width: 100%; height: auto; }

@media (max-width: 1024px) {
  .im-beyond { grid-template-columns: 1fr; gap: var(--space-6); }
}

/* The graph needs roughly 520px to stay legible. Below that it scrolls
   inside its own box rather than shrinking into an unreadable smudge. */
@media (max-width: 620px) {
  .im-graph { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .im-graph img { width: 520px; max-width: none; }
}

/* ===================================================================
   20. Integration band
   =================================================================== */

/* Four chips again — "Multilingual by design" came back with the September
   update handoff, which replaced the count rather than the claim. This
   dropped to three while the chip was out; the track count is part of the
   change every time an item is added or removed here. */
.im-chips {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-4);
  margin-top: var(--space-6);
}

.im-chips > * { margin-block: 0; }

.im-chip {
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-md);
  padding: var(--space-5);
  margin: 0;
  font-size: var(--text-base);
  font-weight: var(--fw-semibold);
  color: var(--navy-800);
}

@media (max-width: 900px) { .im-chips { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .im-chips { grid-template-columns: 1fr; } }

/* ===================================================================
   21. Interest profiles (design_handoff_personalization)

   Built in markup rather than as images. The handoff prefers it — the
   panels are chips, pills and captions, so as markup they stay crisp at
   any size, translatable, and readable to a screen reader.

   The vocabulary is deliberately archive-agnostic: subjects and people,
   never articles and readers. If the page is ever narrowed back to
   media, that wording is what changes, not this layout.
   =================================================================== */

.im-ip__head {
  display: grid;
  grid-template-columns: 1fr 0.9fr;
  gap: var(--space-8);
  align-items: end;
  margin-bottom: var(--space-7);
}

.im-ip__head > * { margin-block: 0; }
.im-ip__head p:last-child { margin: 0; }

.im-ip__panels {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  align-items: stretch;
}

.im-ip__panels > * { margin-block: 0; }

.im-panel {
  display: flex;
  flex-direction: column;
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg);
  box-shadow: 0 16px 40px -30px rgba(0, 34, 85, 0.5);
  overflow: hidden;
}

.im-panel > * { margin-block: 0; }

.im-panel__head {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--gray-100);
}

.im-panel__head > * { margin-block: 0; }

.im-panel__idx {
  font-family: var(--im-font-mono);
  font-size: var(--text-xs);
  font-weight: var(--fw-bold);
  letter-spacing: 0.06em;
  color: var(--indigo-500);
  margin: 0;
}

.im-panel__title {
  font-size: var(--text-sm);
  font-weight: var(--fw-extrabold);
  color: var(--navy-800);
  margin: 0;
}

/* flex:1 so all three panels end level however much body each carries */
.im-panel__body {
  flex: 1;
  padding: 18px;
  display: flex;
  flex-direction: column;
}

.im-panel__body > * { margin-block: 0; }
.im-panel__body > .im-note { margin-top: auto; }

.im-panel__foot {
  padding: var(--space-4) var(--space-5);
  border-top: 1px solid var(--gray-100);
  background: var(--gray-50);
  font-size: var(--text-xs);
  color: var(--gray-500);
  margin: 0;
}

/* A note under a hairline, shared by panels 01-03. */
.im-note {
  border-top: 1px solid var(--gray-100);
  margin-top: var(--space-4);
  padding-top: var(--space-4);
  font-size: var(--text-sm);
  color: var(--gray-500);
}

/* --- panel 01: subject chips ------------------------------------- */

.im-subjects { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.im-subjects > * { margin-block: 0; }

.im-subject {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 7px 13px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--gray-300);
  background: var(--white);
  color: var(--gray-600);
  font-size: var(--text-sm);
  font-weight: var(--fw-semibold);
  white-space: nowrap;
  margin: 0;
}

.im-subject--on {
  background: var(--mint-100);
  border-color: var(--mint-400);
  color: var(--mint-text);
  font-weight: var(--fw-bold);
}

.im-subject--on::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: var(--radius-pill);
  background: var(--mint-400);
  flex: none;
}

/* --- panel 02: graph expansion rows ------------------------------- */

.im-exps { display: flex; flex-direction: column; gap: var(--space-3); }
.im-exps > * { margin-block: 0; }

.im-exp {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin: 0;
  font-size: var(--text-sm);
  font-weight: var(--fw-bold);
  color: var(--navy-800);
}

/* Provenance pill. Shared, by design, between the Personalization interest
   panels ("via Energy policy"), the Products graph traces and the Search
   query-expansion rows. Indigo marks vocabulary expansion, mint marks language
   and place expansion, gray marks a term that was discarded. */
.im-via {
  padding: 3px 9px;
  border-radius: var(--radius-pill);
  background: var(--indigo-700);
  color: var(--indigo-200);
  font-size: var(--text-2xs);
  font-weight: var(--fw-bold);
  white-space: nowrap;
}

.im-via--lang { background: var(--mint-100); color: var(--mint-text); }
.im-via--drop { background: var(--gray-100); color: var(--gray-500); }

/* --- panel 03: the editable profile ------------------------------- */

.im-profs { display: flex; flex-direction: column; gap: var(--space-4); }
.im-profs > * { margin-block: 0; }

.im-prof {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: var(--space-3);
  margin: 0;
}

/* The name+origin stack is the grid's first column, so it has to be a block
   and it has to be allowed to shrink. */
.im-prof__text { display: block; min-width: 0; }

.im-prof__name {
  font-size: var(--text-sm);
  font-weight: var(--fw-bold);
  color: var(--navy-800);
  display: block;
}

.im-prof__from {
  font-size: var(--text-xs);
  color: var(--gray-500);
  display: block;
  margin-top: 2px;
}

.im-state {
  padding: 4px 11px;
  border-radius: var(--radius-pill);
  font-size: var(--text-xs);
  font-weight: var(--fw-bold);
  white-space: nowrap;
}

.im-state--on   { background: var(--mint-100); color: var(--mint-text); }
.im-state--off  { background: var(--gray-100); color: var(--gray-500); }
.im-state--add  { background: var(--white); color: var(--indigo-500); }

/* --- the context strip -------------------------------------------- */

.im-ctx {
  border-top: 1px solid var(--gray-200);
  margin-top: var(--space-7);
  padding-top: 34px;
}

.im-ctx > * { margin-block: 0; }
.im-ctx h3 { font-size: var(--text-lg); margin: 0 0 var(--space-3); }
.im-ctx__lead { margin: 0 0 var(--space-6); }

.im-ctx__cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}

.im-ctx__cards > * { margin-block: 0; }

.im-ctx__card {
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
}

.im-ctx__card > * { margin-block: 0; }

.im-ctx__card .im-eyebrow,
.im-pair__card .im-eyebrow {
  color: var(--mint-text);
  border-left: 0;
  padding-left: 0;
}

.im-pair__card .im-eyebrow--indigo { color: var(--indigo-500); }

.im-ctx__who {
  font-size: var(--text-md);
  font-weight: var(--fw-extrabold);
  color: var(--navy-800);
  margin: 0 0 var(--space-3);
}

/* --- the footnote row --------------------------------------------- */

.im-facts {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3) 28px;
  border-top: 1px solid var(--gray-200);
  margin-top: var(--space-7);
  padding-top: var(--space-6);
}

.im-facts > * { margin-block: 0; }

.im-fact {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin: 0;
  font-size: var(--text-base);
  color: var(--gray-600);
}

.im-fact::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: var(--radius-pill);
  background: var(--mint-400);
  flex: none;
}

@media (max-width: 1024px) {
  .im-herostats { grid-template-columns: 1fr; }
  .im-ip__head { grid-template-columns: 1fr; gap: var(--space-5); align-items: start; }
  /* 2-up with the third full width — the panels are content-height, so
     stacking them is safe. */
  .im-ip__panels { grid-template-columns: repeat(2, 1fr); }
  .im-ip__panels > *:last-child { grid-column: 1 / -1; }
  .im-ctx__cards { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 720px) {
  .im-ip__panels { grid-template-columns: 1fr; }
  .im-ip__panels > *:last-child { grid-column: auto; }
}

@media (max-width: 640px) {
  .im-ctx__cards { grid-template-columns: 1fr; }
}

/* ===================================================================
   22. NearYou / No Cold Start pair
   =================================================================== */

.im-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-5);
  align-items: stretch;
}

.im-pair > * { margin-block: 0; }

.im-pair__card {
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg);
  padding: 34px;
}

.im-pair__card > * { margin-block: 0; }
.im-pair__card h3 { font-size: var(--text-xl); margin: 0 0 var(--space-4); }

/* NearYou distance list */
.im-dists { display: flex; flex-direction: column; gap: var(--space-3); margin-top: var(--space-6); }
.im-dists > * { margin-block: 0; }

.im-dist {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  margin: 0;
  padding: 11px 16px;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  font-weight: var(--fw-bold);
  color: var(--navy-800);
}

.im-dist span { font-weight: var(--fw-semibold); color: var(--gray-500); }

.im-dist--near {
  background: var(--mint-100);
  border-color: var(--mint-200);
}

.im-dist--near span { color: var(--mint-text); }

/* No Cold Start concept chain */
.im-chain {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  margin-top: var(--space-6);
}

.im-chain > * { margin-block: 0; }

.im-tag {
  padding: 7px 14px;
  border: 1px solid var(--gray-300);
  border-radius: var(--radius-pill);
  background: var(--white);
  font-size: var(--text-sm);
  font-weight: var(--fw-semibold);
  color: var(--navy-800);
  white-space: nowrap;
  margin: 0;
}

.im-chain__arrow { color: var(--gray-400); margin: 0; }

@media (max-width: 900px) {
  .im-pair { grid-template-columns: 1fr; }
}

/* ===================================================================
   23. Mockup panel chrome (design_handoff_search "shared panel style")

   White card, a gray-50 header strip with a tracked-out title and
   right-aligned meta, and a matching footer strip. Used by the query
   understanding panel and the unmet-queries table, and available to any
   future panel rather than restyled per page.
   =================================================================== */

.im-mock {
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg);
  box-shadow: 0 16px 40px -30px rgba(0, 34, 85, 0.5);
  overflow: hidden;
}

.im-mock > * { margin-block: 0; }
.im-mock--wide { box-shadow: 0 18px 44px -32px rgba(0, 34, 85, 0.5); }

.im-mock__bar {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-4);
  margin: 0;
  padding: var(--space-4) var(--space-6);
  background: var(--gray-50);
  border-bottom: 1px solid var(--gray-100);
  font-size: var(--text-2xs);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--gray-500);
}

/* the right-hand meta is sentence case, not a second label */
.im-mock__meta { text-transform: none; letter-spacing: normal; font-weight: var(--fw-semibold); }

.im-mock__body { padding: var(--space-6); }
.im-mock__body > * { margin-block: 0; }

.im-mock__foot {
  margin: 0;
  padding: var(--space-4) var(--space-6);
  background: var(--gray-50);
  border-top: 1px solid var(--gray-100);
  font-size: var(--text-sm);
  color: var(--gray-500);
}

/* ===================================================================
   24. Query understanding
   =================================================================== */

.im-qu {
  display: grid;
  grid-template-columns: 1fr 0.95fr;
  gap: var(--space-8);
  align-items: center;
}

.im-qu > * { margin-block: 0; }

.im-query {
  display: block;
  margin: 0 0 var(--space-5);
  padding: 9px 14px;
  border: 1px solid var(--gray-300);
  border-radius: var(--radius-pill);
  font-family: var(--im-font-mono);
  font-size: var(--text-sm);
  color: var(--gray-600);
}

.im-expands { display: flex; flex-direction: column; gap: 11px; }
.im-expands > * { margin-block: 0; }

.im-expand {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: var(--space-3);
  margin: 0;
  font-size: var(--text-sm);
  font-weight: var(--fw-bold);
  color: var(--navy-800);
}

.im-expand__from {
  font-size: var(--text-xs);
  font-weight: var(--fw-medium);
  color: var(--gray-500);
  white-space: nowrap;
}

@media (max-width: 1024px) {
  .im-qu { grid-template-columns: 1fr; gap: var(--space-6); }
}

/* The panel needs about 380px to keep term / source / pill on one line.
   Below that, drop the source token and keep the term and its pill. */
@media (max-width: 460px) {
  .im-expand { grid-template-columns: 1fr auto; }
  .im-expand__from { display: none; }
}

/* ===================================================================
   25. Unmet queries — the diagnosis-and-fix table

   Named grid areas, because the handoff moves one column rather than
   reordering: at 1100 Diagnosis drops to its own line under the query,
   and at 720 each row becomes a card. Areas express that directly;
   auto-placement would put Fix in the wrong cell at the middle step.
   =================================================================== */

.im-unmet__row,
.im-unmet__head {
  display: grid;
  grid-template-columns: 1.1fr 110px 0.9fr 1.5fr 150px;
  grid-template-areas: "q res near diag fix";
  gap: 0 18px;
  align-items: center;
  margin: 0;
  padding: 15px 26px;
  background: var(--white);
}

.im-unmet__row > *,
.im-unmet__head > * { margin-block: 0; }

.im-unmet__row { border-top: 1px solid var(--gray-200); }

.im-unmet__head {
  background: var(--gray-50);
  font-size: var(--text-2xs);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--gray-500);
}

/* The header cells reuse the body cells' classes purely to inherit their grid
   areas, so strip the cell styling back off — otherwise the labels come out
   indigo and mint and "Result" wears a pill. */
.im-unmet__head > span {
  font: inherit;
  color: inherit;
  background: none;
  padding: 0;
  border-radius: 0;
  justify-self: start;
}

.im-q {
  grid-area: q;
  font-family: var(--im-font-mono);
  font-size: var(--text-sm);
  font-weight: var(--fw-bold);
  color: var(--navy-800);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.im-res {
  grid-area: res;
  justify-self: start;
  padding: 3px 10px;
  border-radius: var(--radius-pill);
  font-size: var(--text-xs);
  font-weight: var(--fw-bold);
  white-space: nowrap;
}

.im-res--none { background: var(--coral-100); color: var(--coral-600); }
.im-res--weak { background: var(--yellow-400); color: var(--yellow-text); }
.im-res--ok   { background: var(--gray-100);  color: var(--gray-500); }

.im-near {
  grid-area: near;
  font-size: var(--text-sm);
  font-weight: var(--fw-bold);
  color: var(--indigo-500);
}

.im-diag {
  grid-area: diag;
  font-size: var(--text-sm);
  color: var(--gray-600);
  line-height: var(--leading-normal);
}

.im-fix {
  grid-area: fix;
  font-size: var(--text-xs);
  font-weight: var(--fw-bold);
  color: var(--mint-text);
}

.im-unmet__note {
  max-width: 78ch;
  margin-top: var(--space-4);
  font-size: var(--text-sm);
  color: var(--gray-600);
}

@media (max-width: 1100px) {
  .im-unmet__row,
  .im-unmet__head {
    grid-template-columns: 1.1fr 110px 0.9fr 150px;
    grid-template-areas: "q res near fix";
  }
  .im-unmet__row { grid-template-areas: "q res near fix" "diag diag diag diag"; }
  .im-unmet__row .im-diag { margin-top: var(--space-2); }
  .im-unmet__head .im-diag { display: none; }
}

@media (max-width: 720px) {
  /* one card per query */
  .im-unmet__head { display: none; }
  .im-unmet__row {
    grid-template-columns: 1fr auto;
    grid-template-areas: "q res" "near near" "diag diag" "fix fix";
    gap: var(--space-2) var(--space-4);
    padding: var(--space-5);
    align-items: start;
  }
  .im-res { justify-self: end; }
  .im-q { white-space: normal; overflow: visible; }
}

/* ===================================================================
   26. Capability grid — six cards, own breakpoints
   =================================================================== */

.im-caps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  margin-top: var(--space-6);
}

.im-caps > * { margin-block: 0; }

.im-cap {
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg);
  padding: 28px;
}

.im-cap > * { margin-block: 0; }
.im-cap h3 { font-size: var(--text-md); margin: 0 0 var(--space-3); }

.im-lead-narrow { max-width: 68ch; }

@media (max-width: 1024px) { .im-caps { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px)  { .im-caps { grid-template-columns: 1fr; } }

/* ===================================================================
   27. "Any large content owner has the same problem"
        (design_handoff_homepage, 2026-09-15 — the one REDESIGNED section)

   Centred head ABOVE the whole card row (the explicit ask), then four
   domain cards drawn as ONE object: a grid with a 1px gap on a hairline
   ground, each cell white, so the gap itself is the divider.

   The domain figures are markup now (.im-dfig), not PNGs.
   =================================================================== */

/* WHY EVERY CONTAINER HERE RESETS `margin-block: 0` AND NOT JUST THE START.
   WordPress puts a 24px block margin on group children — start on all but the
   first, END on all but the LAST. In a stretch grid an item's used height is
   the row height MINUS its margins, so the last item, having no end margin,
   comes out exactly 24px TALLER than its siblings. That produced a taller
   rightmost card in every row on the site — product suite, capability grid,
   interest panels, context cards, NearYou pair, how-it-runs steps. Resetting
   only margin-block-start left the end margin in place and the symptom intact.
   Reset both, on every grid or flex container we own. */

/* The head is a child of a constrained layout, so a bare class cannot narrow
   it (trap 11) — (0,2,0) keeps WordPress's auto margins and centres it. */
.im-problem .im-problem__head {
  max-width: 760px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  text-align: center;
}

.im-problem__head > * { margin-block: 0; }
.im-problem__head .im-hlead { max-width: none; line-height: 1.65; }
.im-problem__head .im-textlink a { font-size: 0.90625rem; font-weight: var(--fw-semibold); }

/* A centred eyebrow: a mint rule either side instead of the left rule. */
.im-eyebrow.im-eyebrow--center {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  padding-left: 0;
  border-left: 0;
  font-size: var(--text-xs);
  letter-spacing: 0.14em;
  color: var(--gray-500);
}

.im-eyebrow--center::before,
.im-eyebrow--center::after {
  content: "";
  flex: none;
  width: 26px;
  height: 2px;
  background: var(--mint-400);
}

.im-problem > .im-domains { margin-block-start: 52px; }

/* ROWS LINE UP THROUGH SUBGRID, NOT MIN-HEIGHTS. Each card spans five rows
   (eyebrow, headline, figure, body, Reads) and adopts the parent's tracks, so
   a headline that wraps to two lines in one card moves the figure down in all
   four, and every Reads hairline lands on one line. The old version reserved
   two-line min-heights by hand for the same effect; that stays below as the
   fallback for a browser without subgrid. */
.im-domains {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  background: var(--gray-200);
  border: 1px solid var(--gray-200);
  border-radius: 14px;
  overflow: hidden;
}

.im-domains > * { margin-block: 0; }

.im-domain {
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span 5;
  row-gap: 16px;
  background: var(--white);
  padding: 26px 24px;
  transition: background 160ms var(--ease-standard);
}

.im-domain:hover { background: var(--gray-50); }
.im-domain > * { margin-block: 0; }

.im-domain__eyebrow {
  font-size: var(--text-2xs);
  font-weight: var(--fw-bold);
  letter-spacing: 0.12em;
  line-height: 1.3;
  text-transform: uppercase;
  color: var(--indigo-500);
}

.im-domain .im-domain__head {
  margin: 0;
  font-size: 1.1875rem;
  line-height: 1.25;
  letter-spacing: 0;
  font-weight: var(--fw-bold);
}

.im-domain__body { font-size: 0.90625rem; line-height: 1.55; }

/* Pinned to the TOP of its row, not the bottom: the row is as tall as the
   longest Reads line, so top-aligned is what puts every hairline level. */
.im-domain .im-domain__reads {
  align-self: start;
  padding-top: 14px;
  border-top: 1px solid var(--gray-100);
  font-size: 0.78125rem;
  line-height: 1.5;
  color: var(--gray-500);
}

/* "Reads" is the concrete evidence that the engines are domain-agnostic,
   so it is labelled, not just a caption. */
.im-domain__reads strong { color: var(--navy-800); font-weight: var(--fw-bold); }

@supports not (grid-template-rows: subgrid) {
  .im-domain { display: flex; flex-direction: column; gap: 16px; height: 100%; }
  .im-domain .im-domain__head { min-height: 2.5em; }
  .im-domain .im-domain__reads { margin-top: auto; min-height: calc(3em + 15px); }
}

/* --- The four data figures. Each reserves 54px (min, not fixed) so the
   cards stay level while the contents can still wrap. ----------------- */
.im-dfig {
  min-height: 54px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 9px;
  line-height: 1.3;
}

.im-dfig i { display: block; }

/* 1 — six bars, the last three mint */
.im-dfig--bars {
  height: 54px;
  flex-direction: row;
  align-items: flex-end;
  justify-content: normal;
  gap: 7px;
}

.im-dfig--bars i { flex: 1; border-radius: 2px; background: var(--gray-200); }
.im-dfig--bars i.is-on { background: var(--mint-400); }
.im-dfig--bars .im-w34  { height: 34%; }
.im-dfig--bars .im-w40  { height: 40%; }
.im-dfig--bars .im-w46  { height: 46%; }
.im-dfig--bars .im-w62  { height: 62%; }
.im-dfig--bars .im-w80  { height: 80%; }
.im-dfig--bars .im-w100 { height: 100%; }

/* 2 — timecode track with three concept hits */
.im-dfig--track { gap: 10px; }

.im-dfig__track {
  position: relative;
  height: 6px;
  border-radius: var(--radius-pill);
  background: var(--gray-100);
}

.im-dfig__track i {
  position: absolute;
  top: -4px;
  width: 3px;
  height: 14px;
  border-radius: 2px;
  background: var(--mint-400);
}

.im-dfig__track i:nth-child(1) { left: 18%; }
.im-dfig__track i:nth-child(2) { left: 47%; }
.im-dfig__track i:nth-child(3) { left: 78%; }

.im-dfig__times {
  display: flex;
  justify-content: space-between;
  font-size: 0.65625rem;
  font-weight: var(--fw-bold);
  letter-spacing: 0.06em;
  color: var(--gray-400);
}

.im-dfig__times .is-on { color: var(--navy-800); }

/* 3 — authority ids resolved to concepts */
.im-dfig--map { gap: 8px; }

.im-dfig__maprow {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.im-dfig__maprow code {
  flex: none;
  font-family: var(--im-font-mono);
  font-size: 0.65625rem;
  line-height: 1.3;
  color: var(--gray-500);
  background: transparent;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-xs);
  padding: 3px 6px;
}

.im-dfig__arrow { flex: none; font-size: var(--text-xs); line-height: 1; color: var(--gray-300); }

.im-dfig__concept {
  min-width: 0;
  font-size: var(--text-xs);
  font-weight: var(--fw-bold);
  color: var(--navy-800);
  background: var(--mint-100);
  border-radius: var(--radius-pill);
  padding: 3px 10px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 4 — an entity over three document types, one of them a hit */
.im-dfig__entity {
  align-self: flex-start;
  font-size: var(--text-xs);
  font-weight: var(--fw-bold);
  color: var(--navy-800);
  border: 1px solid var(--gray-300);
  border-radius: var(--radius-pill);
  padding: 3px 10px;
}

.im-dfig__docs { display: flex; flex-wrap: wrap; gap: 6px; }

.im-dfig__docs span {
  font-size: 0.65625rem;
  font-weight: var(--fw-bold);
  letter-spacing: 0.06em;
  line-height: 1.2;
  text-transform: uppercase;
  color: var(--gray-500);
  background: var(--gray-100);
  border-radius: var(--radius-xs);
  padding: 4px 7px;
}

.im-dfig__docs .is-on { color: var(--navy-800); background: var(--mint-100); }

/* FOUR ACROSS, THEN TWO BY TWO, THEN ONE. Explicit steps rather than the
   handoff's auto-fit: auto-fit gives 3 + 1 between ~590 and ~840px, and in a
   hairline grid the two empty cells beside the orphan show as a gray block. */
@media (max-width: 900px) {
  .im-domains { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 520px) {
  .im-domains { grid-template-columns: minmax(0, 1fr); }
}

/* The pipeline panel. NOT RENDERED since design_handoff_homepage — the
   approved section has no such block. Kept because HOME_PIPELINE in
   tools/gen-pages.py can put it back. */
.im-pipe {
  border-top: 1px solid var(--gray-200);
  margin-top: var(--space-7);
  padding-top: 32px;
}

.im-pipe > * { margin-block: 0; }

.im-pipe__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-3) var(--space-5);
  margin-bottom: var(--space-5);
}

.im-pipe__head > * { margin-block: 0; }
.im-pipe__head h3 { font-size: var(--text-lg); margin: 0; }
.im-pipe__head p { margin: 0; }

.im-pipe__panel { margin: 0; }
.im-pipe__panel img { display: block; width: 100%; height: auto; }

/* The panel needs about 720px to keep three columns and two arrows.
   Below that it scrolls rather than shrinking into illegibility. */
@media (max-width: 780px) {
  .im-pipe__panel { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .im-pipe__panel img { width: 720px; max-width: none; }
}

/* ===================================================================
   28. Legal document shell (design_handoff_legal)

   One template, two pages: Terms and Privacy. The Data Protection page
   is not a legal document and does not use it.

   Body copy runs at 15.5px/1.7 rather than the site's 15px/1.6 — these
   are long-read documents. The container is 920px, not 1220px.

   Every container below resets `margin-block: 0`, not just the start —
   see the note above .im-domains.
   =================================================================== */

.im-legal {
  --legal-text: 0.96875rem;   /* 15.5px */
  font-size: var(--legal-text);
}

.im-section .im-legal { max-width: 920px; }

.im-legal > * { margin-block: 0; }

/* Shorter than a marketing hero — nobody opens these pages for the headline. */
.im-legal-hero { padding-block: 62px 68px; }
.im-legal-hero h1 { font-size: var(--text-3xl); }

/* The metadata strip. The one genuinely new idea here: it surfaces the
   facts a reader or a procurement reviewer actually opens the page to
   find — the org number, the DPO's name — instead of making them scan
   the body for it. */
.im-meta-strip {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4) 30px;
  margin-top: var(--space-6);
}

.im-meta-strip > * { margin-block: 0; }

.im-meta-item { margin: 0; }

.im-meta-item strong {
  display: block;
  font-size: var(--text-2xs);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--mint-300);
  margin-bottom: var(--space-2);
}

.im-navy .im-meta-item { color: var(--white); font-weight: var(--fw-semibold); }

/* --- contents card ------------------------------------------------- */

.im-toc {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px 30px;
  background: var(--gray-50);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg);
  padding: 26px 30px;
  margin-bottom: 44px;
}

.im-toc > * { margin-block: 0; }

.im-toc__label {
  grid-column: 1 / -1;
  font-size: var(--text-2xs);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--gray-500);
  margin: 0 0 var(--space-3);
}

/* No item is marked "current". An earlier version hard-coded the first
   entry as active, which misreports position the moment a reader
   scrolls. If scroll-spy is ever added, wire it to real position. */
.im-toc__link { margin: 0; }

.im-toc__link a {
  display: block;
  padding: 7px 0 7px 13px;
  border-left: 2px solid var(--gray-200);
  font-size: var(--text-sm);
  font-weight: var(--fw-semibold);
  color: var(--gray-600);
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease-standard),
              border-color var(--dur-fast) var(--ease-standard);
}

.im-toc__link a:hover {
  border-left-color: var(--indigo-300);
  color: var(--indigo-500);
  font-weight: var(--fw-bold);
}

/* --- sections ------------------------------------------------------ */

.im-legal__section {
  padding-block: 34px;
  border-top: 1px solid var(--gray-200);
}

.im-legal__section > * { margin-block: 0; }

/* The sticky site header would otherwise cover an anchored heading. */
.im-legal__section h2,
.im-legal__section h3 { scroll-margin-top: 100px; }

.im-legal__section h2 {
  font-size: var(--text-xl);
  letter-spacing: var(--tracking-tight);
  margin: 0 0 var(--space-5);
}

/* Sub-headings inside Privacy sections. Deliberately NOT in the TOC, and
   deliberately h3 so the heading hierarchy stays valid. */
.im-legal__section h3 {
  font-size: var(--text-lg);
  margin: var(--space-6) 0 var(--space-4);
}

.im-legal__section p {
  font-size: var(--legal-text);
  line-height: 1.7;
  max-width: 78ch;
  margin: 0 0 var(--space-4);
}

.im-legal__section ul {
  padding-left: 20px;
  margin: 0 0 var(--space-4);
  max-width: 78ch;
}

.im-legal__section li {
  font-size: var(--legal-text);
  line-height: 1.7;
  margin-bottom: 9px;
}

/* --- the strongest claim on the privacy page ----------------------- */

.im-callout {
  background: var(--mint-100);
  border: 1px solid var(--mint-200);
  border-radius: 14px;
  padding: var(--space-5);
  margin: 0 0 var(--space-5);
  font-size: var(--legal-text);
  font-weight: var(--fw-semibold);
  color: var(--navy-800);
  max-width: none;
}

/* --- demo-account term tiles --------------------------------------- */

.im-tiles {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
  margin-bottom: var(--space-5);
}

.im-tiles > * { margin-block: 0; }

.im-tile {
  background: var(--gray-50);
  border-radius: 14px;
  padding: var(--space-5);
  margin: 0;
}

.im-tile strong {
  display: block;
  font-size: var(--text-lg);
  font-weight: var(--fw-extrabold);
  color: var(--navy-800);
  margin-bottom: var(--space-2);
}

.im-tile span { font-size: var(--text-sm); color: var(--gray-600); }

/* --- GDPR rights grid and the representative / DPO cards ----------- */

.im-rights,
.im-officers {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
  margin-bottom: var(--space-5);
}

.im-rights > *,
.im-officers > * { margin-block: 0; }

.im-right,
.im-officer {
  height: 100%;
  border: 1px solid var(--gray-200);
  border-radius: 14px;
  padding: 20px 22px;
  margin: 0;
}

.im-right strong {
  display: block;
  font-size: var(--text-sm);
  font-weight: var(--fw-extrabold);
  color: var(--navy-800);
  margin-bottom: var(--space-2);
}

.im-right span { font-size: var(--text-sm); line-height: 1.6; color: var(--gray-600); }

.im-officer em {
  display: block;
  font-style: normal;
  font-size: var(--text-2xs);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--mint-text);
  margin-bottom: var(--space-2);
}

.im-officer strong {
  font-size: var(--text-md);
  font-weight: var(--fw-extrabold);
  color: var(--navy-800);
}

/* --- closing block ------------------------------------------------- */

.im-legal__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  background: var(--gray-50);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg);
  padding: 24px 26px;
  margin-top: 34px;
}

.im-legal__foot > * { margin-block: 0; }
.im-legal__foot p { margin: 0; font-size: var(--text-base); }
.im-legal__foot strong { display: block; font-weight: var(--fw-extrabold); color: var(--navy-800); }
.im-legal__stamp { color: var(--gray-500); }

@media (max-width: 720px) {
  .im-rights, .im-officers { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  .im-toc { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
  .im-tiles { grid-template-columns: 1fr; }
}

/* ===================================================================
   29. Numbered card grid

   The Data Protection measures. Same pattern as the ConceptCore
   "How it runs" steps — a monospace index over a title and body — so it
   is built once here and the index styling comes from .im-index.
   =================================================================== */

.im-numcards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  margin-top: var(--space-6);
}

.im-numcards > * { margin-block: 0; }

.im-numcard {
  height: 100%;
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg);
  padding: 28px;
}

.im-numcard > * { margin-block: 0; }
.im-numcard h3 { font-size: var(--text-md); margin: var(--space-3) 0 var(--space-3); }
.im-numcard p { font-size: var(--text-sm); line-height: 1.65; margin: 0; }

@media (max-width: 1024px) { .im-numcards { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px)  { .im-numcards { grid-template-columns: 1fr; } }

/* ===================================================================
   30. Related-page cards
   =================================================================== */

.im-related {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-5);
}

.im-related > * { margin-block: 0; }

.im-related__card {
  height: 100%;
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  transition: border-color var(--dur-base) var(--ease-standard),
              box-shadow var(--dur-base) var(--ease-standard);
}

.im-related__card > * { margin-block: 0; }

.im-related__card:hover {
  border-color: var(--indigo-300);
  box-shadow: 0 18px 44px -28px rgba(0, 34, 85, 0.5);
}

.im-related__card h3 { font-size: var(--text-xl); margin: 0 0 var(--space-3); }
.im-related__card p { margin: 0 0 var(--space-4); }

@media (max-width: 900px) { .im-related { grid-template-columns: 1fr; } }


/* ===================================================================
   31. Customer quote carousel  (design_handoff_update §2)

   Three quotes in a real horizontal scroller. The track is the source of
   truth for which quote is showing: the arrows and dots only ever call
   scrollTo, and the dots read their state back from the scroll position.
   That means the component still works with JavaScript switched off —
   the strip is swipeable and scrollable — and there is no second copy of
   "which slide are we on" to fall out of sync with the first.

   assets/js/patterns.js adds .is-ready, which is what reveals the
   controls. Without it they would sit there looking clickable and do
   nothing.
   =================================================================== */

.im-quotes__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
  margin-bottom: 26px;
  flex-wrap: wrap;
}

.im-quotes__eyebrow {
  margin: 0;
  font-size: 11.5px;
  font-weight: var(--fw-bold);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--indigo-500);
  padding-left: 11px;
  border-left: 2px solid var(--indigo-500);
  white-space: nowrap;
}

.im-quotes__controls {
  display: none;
  align-items: center;
  gap: var(--space-4);
}

.im-quotes.is-ready .im-quotes__controls { display: flex; }

.im-quotes__dots,
.im-quotes__arrows {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.im-quotes__dot {
  width: 9px;
  height: 9px;
  padding: 0;
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--gray-300);
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-standard);
}

.im-quotes__dot[aria-current="true"] { background: var(--indigo-500); }

.im-quotes__arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--gray-300);
  background: var(--white);
  color: var(--navy-800);
  font-size: var(--text-base);
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease-standard),
              color var(--dur-fast) var(--ease-standard);
}

.im-quotes__arrow:hover {
  border-color: var(--indigo-500);
  color: var(--indigo-500);
}

.im-quotes__track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 100%;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  /* The card carries a soft drop shadow that a clipping scroller would
     cut off at the top and bottom edges, so the padding is the shadow's
     room to breathe, and the negative margin takes it back off the
     layout. */
  padding-block: 6px;
  margin-block: -6px;
}

.im-quotes__track::-webkit-scrollbar { display: none; }

.im-quotes__card {
  scroll-snap-align: start;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 180px;
  gap: var(--space-8);
  align-items: center;
  min-height: 210px;
  margin: 0;
  padding: 44px 48px;
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: 18px;
  box-shadow: 0 20px 48px -34px rgba(0, 34, 85, 0.5);
}

.im-quotes__mark {
  display: block;
  font-size: 42px;
  line-height: 1;
  font-weight: var(--fw-extrabold);
  color: var(--mint-400);
  margin-bottom: 10px;
}

.im-quotes__card blockquote,
.im-quotes__card .im-quotes__body p {
  margin: 0 0 var(--space-4);
  padding: 0;
  border: 0;
  font-size: var(--text-md);
  line-height: 1.6;
  font-weight: var(--fw-semibold);
  color: var(--navy-800);
  text-wrap: pretty;
}

.im-quotes__by {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: var(--space-5);
  text-align: left;
}

.im-quotes__name {
  font-size: var(--text-base);
  font-weight: var(--fw-extrabold);
  color: var(--navy-800);
}

.im-quotes__role {
  font-size: var(--text-sm);
  color: var(--gray-500);
}

/* The quote card reuses the .im-logo--<slug> classes for its customer mark,
   and those caps are now the artwork's full native size — up to 282px wide,
   against a 180px column. Written with the card in front to reach (0,2,0) so
   it beats them on specificity rather than on source order, which would break
   the first time these sections were reordered. */
.im-quotes__card .im-quotes__logo {
  justify-self: center;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 44px;
  object-fit: contain;
}

/* Under 860px the 180px logo column no longer leaves the quote a usable
   measure, so the logo goes above it. */
@media (max-width: 860px) {
  .im-quotes__card {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-6);
    padding: var(--space-7) var(--space-6);
  }
  .im-quotes__logo {
    order: -1;
    justify-self: start;
  }
}

/* On a phone the longest quote runs to nine hundred pixels at 17px, which
   is a lot of scrolling for one card. A point off the type and the padding
   takes roughly a fifth off it without making it small. */
@media (max-width: 520px) {
  .im-quotes__card {
    padding: var(--space-6) var(--space-5);
  }
  .im-quotes__card blockquote,
  .im-quotes__card .im-quotes__body p {
    font-size: var(--text-base);
  }
}

@media (prefers-reduced-motion: reduce) {
  .im-quotes__track { scroll-behavior: auto; }
}

/* ===================================================================
   32. Contact page  (design_handoff_contact)

   Two HubSpot embeds sit on this page and NEITHER is ours. The handoff's
   mockups are drawings of what HubSpot renders — "What matters from them
   is the frame, which is ours." So this section styles two frames and
   then overrides HubSpot's own stylesheet inside the second one. It does
   not draw a single input.
   =================================================================== */

.im-contact-hero { align-items: start; }

/* The scheduler is ~715px tall and the copy beside it about half that, so
   the columns align to the TOP. Centred, the copy floats in a navy void —
   the same mistake the parked redesign in section 15 was written to fix. */
.im-contact-hero > .wp-block-column { align-self: start; }

.im-contact__meta {
  margin-top: var(--space-7);
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-2) var(--space-6);
  align-items: baseline;
}

.im-contact__meta > * { margin-block: 0; }

.im-contact__label {
  font-size: var(--text-2xs);
  font-weight: var(--fw-bold);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--mint-300);
}

.im-navy .im-contact__meta p { color: rgba(255, 255, 255, 0.82); }
.im-contact__meta a { color: var(--mint-300); text-decoration: none; }
.im-contact__meta a:hover { color: var(--white); }

/* The demo-portal line, under its own hairline. */
.im-contact__portal {
  margin-top: var(--space-5);
  padding-top: var(--space-4);
  border-top: 1px solid rgba(255, 255, 255, 0.16);
}

.im-contact__portal > * { margin-block: 0; }

/* THE MEETINGS FRAME.
   The handoff gives this a white surface and a triple shadow — the indigo
   glow every floating card over navy on this site carries. Both are gone
   (Christoffer, 2026-09-07). HubSpot's iframe covers the frame to the pixel,
   so the white never showed; what did show was the glow, as a halo boxing in
   an embed that already has its own edge. Nothing of ours paints here now.

   `overflow: hidden` STAYS and is load-bearing, not tidiness: it is the only
   thing clipping HubSpot's square-cornered iframe to the 16px radius. */
.im-meetings {
  border-radius: 16px;
  overflow: hidden;
  /* Reserve the scheduler's height so the page does not jump as the iframe
     arrives. HubSpot handles its own internal reflow below this width. */
  min-height: 715px;
}

.im-meetings > *,
.im-meetings iframe { display: block; width: 100%; border: 0; margin-block: 0; }

/* ---- Send a message ---------------------------------------------- */

.im-msgband {
  padding-block: 74px 80px;
  border-bottom: 1px solid var(--gray-200);
}

.im-msg {
  display: grid;
  /* The copy column is deliberately the narrower of the two: the form is
     the point of the section, the copy is the reason to use it. */
  grid-template-columns: 0.85fr 1fr;
  gap: 56px;
  align-items: start;
}

.im-msg > *,
.im-msg__copy > *,
.im-msg__points > * { margin-block: 0; }

.im-msg__copy > * + * { margin-top: var(--space-4); }

.im-msg__title {
  font-size: 2rem;
  line-height: 1.12;
  letter-spacing: -0.022em;
  text-wrap: balance;
}

.im-msg__points {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-top: var(--space-6);
}

/* Each line behind a mint dot. The dot is a pseudo-element rather than a
   list marker so it can be nudged onto the first baseline of a line that
   wraps. */
.im-msg__point {
  position: relative;
  padding-left: 22px;
  font-size: var(--text-base);
  color: var(--gray-600);
}

.im-msg__point::before {
  content: "";
  position: absolute;
  left: 0;
  top: 7px;
  width: 6px;
  height: 6px;
  border-radius: var(--radius-pill);
  background: var(--mint-400);
}

.im-msg__point a {
  color: var(--indigo-500);
  font-weight: var(--fw-bold);
  text-decoration: none;
}

.im-msg__point a:hover { color: var(--indigo-700); }

/* THE FORM FRAME — NOW JUST A CORNER CLIP.
   The handoff draws a white card here: 18px radius, 1px --gray-200, card
   shadow, 32px padding. That is right for the INLINE form it assumed. What
   HubSpot actually delivers is an IFRAME which paints its own white surface,
   so the card became a white box behind a white embed with 32px of white
   padding all round — 629x215 of ours behind 564x150 of theirs. Christoffer
   asked for it gone.
   The radius went too, on a second pass. Rounding the wrapper clips the
   IFRAME'S OWN CONTENT, and HubSpot puts the first field label hard against
   its top-left corner — an 18px radius took half the E off "Email". A corner
   clip is only safe over an embed that keeps its own padding, which the
   scheduler does and this form does not. So this is now a bare layout cell.

   If the embed is ever switched to the inline (non-iframe) form, the card
   treatment described above is what to put back — and then the radius is
   safe again, because the padding comes back with it. */
.im-hsform {
  /* deliberately no background, border, shadow, padding or radius */
}

.im-hsform > *,
.im-hsform iframe { margin-block: 0; display: block; }

/* ---- Overriding HubSpot's stylesheet ------------------------------
   HubSpot ships its own CSS with a different type scale and a different
   blue. These are the five things the handoff calls out. Selectors are
   HubSpot's own class names (.hs-form, .hs-input, .hs-button …), scoped
   under .im-hsform so nothing here can reach the meetings scheduler or
   any other HubSpot form on the site.

   *** INERT AS SHIPPED, 2026-09-07. *** The live embed renders as
   `iframe.hs-form-iframe`, and nothing can style across that boundary, so
   every rule from here to the responsive block below currently matches
   NOTHING. Kept rather than deleted because it becomes live the moment the
   embed is switched to HubSpot's inline (non-iframe) form, which is the only
   way to make the form match the rest of the site. Until then the form's
   appearance is set in HubSpot's own form editor.

   Do not "fix" a form styling problem by editing these rules without first
   checking, in the browser, whether the form is still iframed. */

.im-hsform .hs-form,
.im-hsform .hs-form input,
.im-hsform .hs-form select,
.im-hsform .hs-form textarea,
.im-hsform .hs-form label { font-family: var(--font-sans); }

.im-hsform .hs-form-field { margin-bottom: var(--space-4); }

.im-hsform .hs-form-field > label {
  display: block;
  margin-bottom: 7px;
  font-size: 12.5px;
  font-weight: var(--fw-bold);
  color: var(--navy-800);
}

.im-hsform .hs-input {
  width: 100%;
  padding: 11px 13px;
  border: 1px solid var(--gray-300);
  border-radius: var(--radius-md);
  font-size: var(--text-base);
  color: var(--navy-800);
  background: var(--white);
}

.im-hsform .hs-input:focus {
  outline: none;
  border-color: var(--indigo-500);
  box-shadow: 0 0 0 3px rgba(88, 108, 191, 0.22);
}

.im-hsform textarea.hs-input { min-height: 104px; resize: vertical; }

/* The four interest options are a MULTI-SELECT, not radios — an enquiry
   commonly touches more than one. HubSpot renders those as a checkbox
   list; this turns that list into the pill row the design shows. */
.im-hsform .inputs-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.im-hsform .inputs-list > li { margin: 0; }

.im-hsform .inputs-list label {
  display: inline-flex;
  align-items: center;
  padding: 7px 15px;
  border: 1px solid var(--gray-300);
  border-radius: var(--radius-pill);
  font-size: var(--text-sm);
  font-weight: var(--fw-semibold);
  color: var(--navy-800);
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease-standard),
              color var(--dur-fast) var(--ease-standard);
}

.im-hsform .inputs-list label:hover,
.im-hsform .inputs-list input:checked + span,
.im-hsform .inputs-list label:has(input:checked) {
  border-color: var(--indigo-500);
  color: var(--indigo-500);
}

/* The checkbox itself is redundant once the pill shows state — but only
   hide it where the pill treatment applies, never on the consent box,
   which must stay a visible, operable control. */
.im-hsform .hs-fieldtype-checkbox .inputs-list input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.im-hsform .hs-form-booleancheckbox .inputs-list { display: block; }

.im-hsform .hs-form-booleancheckbox label {
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
  padding: 0;
  border: 0;
  border-radius: 0;
  font-size: var(--text-sm);
  font-weight: var(--fw-medium);
  color: var(--gray-600);
  cursor: pointer;
}

.im-hsform .hs-form-booleancheckbox input[type="checkbox"] {
  position: static;
  opacity: 1;
  pointer-events: auto;
  width: 16px;
  height: 16px;
  margin-top: 2px;
  flex: none;
  accent-color: var(--indigo-500);
}

.im-hsform .hs-form-booleancheckbox a { color: var(--indigo-500); }

.im-hsform .hs-button {
  display: block;
  width: 100%;
  padding: 13px 24px;
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--navy-800);
  color: var(--white);
  font-family: var(--font-sans);
  font-size: var(--text-md);
  font-weight: var(--fw-bold);
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-standard);
}

.im-hsform .hs-button:hover { background: var(--navy-950); }

.im-hsform .hs-error-msg,
.im-hsform .hs-error-msgs label {
  color: #b3261e;
  font-size: var(--text-sm);
  font-weight: var(--fw-semibold);
}

/* HubSpot's own two-up rows, where the form is configured with them. */
.im-hsform .form-columns-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }
.im-hsform .form-columns-2 .hs-form-field { width: 100% !important; float: none; margin-bottom: 0; }
.im-hsform .form-columns-1 .hs-form-field { width: 100% !important; float: none; }
.im-hsform .hs-form-field > .input { margin-right: 0 !important; }

@media (max-width: 980px) {
  .im-contact-hero { display: block; }
  .im-contact-hero > .wp-block-column { flex-basis: auto !important; }
  .im-contact-hero > .wp-block-column + .wp-block-column { margin-top: var(--space-7); }
}

@media (max-width: 900px) {
  .im-msg { grid-template-columns: 1fr; gap: var(--space-7); }
  .im-msgband { padding-block: var(--space-9); }
}

@media (max-width: 620px) {
  .im-hsform .form-columns-2 { grid-template-columns: 1fr; }
}

/* ===================================================================
   33. Homepage refinement  (design_handoff_homepage, 2026-09-15)

   The rules the refinement rests on:
   - two light grounds only, white and gray-50;
   - tinted panels never sit on tinted ground (so "Catch up" is white and
     the product suite, whose cards are white, sits on gray-50);
   - light sections are separated by a full-width 1px hairline, not a
     colour change;
   - one section rhythm, 92px.

   Menu, hero, logo band, CTA band and footer are NOT restyled from this
   handoff — Christoffer asked for them to stay as they are.
   =================================================================== */

/* One rhythm for the light sections. (0,2,0) so it beats .im-section's
   clamp regardless of source order. 56px on a phone, 92px from ~1150px. */
.im-section.im-hsec { padding-block: clamp(3.5rem, 8vw, 5.75rem); }
.im-hsec--rule { border-top: 1px solid var(--gray-200); }

/* Lead copy in the light home sections: 16.5px / 1.7. */
.im-hlead {
  max-width: 48ch;
  font-size: 1.03125rem;
  line-height: 1.7;
}

/* --- "Catch up with big tech" --------------------------------------- */
.im-outcomes-head {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 40px;
  align-items: start;
}

.im-outcomes-head > * { margin-block: 0; }

.im-outcomes-head .im-outcomes-head__title {
  margin: 0;
  font-size: clamp(1.625rem, 3vw, 2.375rem);
  line-height: 1.14;
  letter-spacing: -0.02em;
}

.im-outcomes-head__copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 18px;
  padding-top: 4px;
}

.im-outcomes-head__copy > * { margin-block: 0; }
.im-hsec > .im-outcomes { margin-block-start: 48px; }

/* Three cards. Subgrid again: each card spans the panel row and the text
   row, so the three panels share one height even though their mocks do not,
   and every "01 / 02 / 03" starts on the same line. The card's own row-gap
   is zeroed so panel and text stay flush. */
.im-outcomes {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 26px;
}

.im-outcome {
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span 2;
  row-gap: 0;
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: 14px;
  overflow: hidden;
}

.im-outcome > * { margin-block: 0; }

.im-outcome__panel {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 24px 22px;
}

.im-outcome__panel > * { margin-block: 0; }

.im-outcome--mint   .im-outcome__panel { background: var(--mint-100); }
.im-outcome--indigo .im-outcome__panel { background: var(--indigo-200); }
.im-outcome--yellow .im-outcome__panel { background: var(--yellow-300); }

.im-outcome__body {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 24px 22px 28px;
}

.im-outcome__body > * { margin-block: 0; }

.im-outcome__body .im-index { font-size: var(--text-base); letter-spacing: 0; line-height: 1.2; }

.im-outcome__body h3 {
  margin: 0;
  font-size: var(--text-lg);
  line-height: 1.25;
  letter-spacing: 0;
  font-weight: var(--fw-bold);
}

.im-outcome__body p:not(.im-index) { font-size: var(--text-base); line-height: 1.65; }

@supports not (grid-template-rows: subgrid) {
  .im-outcome { display: flex; flex-direction: column; }
}

/* The shared hover lift — catch-up cards and the three small suite cards.
   Not the flagship or the navy card, and not the domain cells (one object;
   lifting a cell would break the hairline grid). */
.im-outcome,
.im-suite__card {
  transition: box-shadow 180ms var(--ease-standard),
              transform 180ms var(--ease-standard);
}

.im-outcome:hover,
.im-suite__card:hover {
  box-shadow: 0 18px 38px -24px rgba(11, 37, 69, 0.3);
  transform: translateY(-2px);
}

@media (prefers-reduced-motion: reduce) {
  .im-outcome:hover,
  .im-suite__card:hover { transform: none; }
}

@media (max-width: 780px) {
  .im-outcomes-head { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .im-outcomes { grid-template-columns: minmax(0, 1fr); }
}

/* --- The small white UI mocks inside the tinted panels (.im-umock) ----
   Markup, not PNGs: they are words, pills and bars. Widths come from the
   .im-wNN classes below — pattern markup never carries inline styles. */
.im-umock {
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: var(--white);
  border-radius: var(--radius-md);
  box-shadow: 0 6px 18px -12px rgba(11, 37, 69, 0.35);
  padding: 14px;
  line-height: 1.3;
}

.im-umock i { display: block; font-style: normal; }
.im-umock b { font-weight: var(--fw-bold); }

.im-umock__crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  font-size: 0.65625rem;
  font-weight: var(--fw-semibold);
  color: var(--gray-400);
}

.im-umock__crumbs b { color: var(--mint-text); }

.im-umock__head,
.im-umock__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.im-umock__head b {
  font-size: 0.90625rem;
  font-weight: var(--fw-extrabold);
  color: var(--navy-800);
}

.im-umock__pill {
  flex: none;
  font-size: 0.5625rem;
  font-weight: var(--fw-extrabold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--navy-800);
  background: var(--mint-400);
  border-radius: var(--radius-pill);
  padding: 4px 8px;
}

.im-umock__label {
  font-size: 0.625rem;
  font-weight: var(--fw-extrabold);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gray-500);
}

.im-umock__meta {
  flex: none;
  font-size: 0.625rem;
  font-weight: var(--fw-extrabold);
  letter-spacing: 0.06em;
  color: var(--indigo-600);
}

.im-umock__item { display: flex; align-items: center; gap: 10px; }

.im-umock__item > span {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.im-umock__thumb {
  flex: none;
  width: 22px;
  height: 22px;
  border-radius: var(--radius-xs);
  background: var(--gray-100);
}

.im-umock__thumb--lg { width: 24px; height: 24px; }

.im-sk {
  height: 6px;
  border-radius: 2px;
  background: var(--gray-100);
}

.im-umock__stat { display: flex; flex-direction: column; gap: 5px; }

.im-umock__stat > div {
  display: flex;
  justify-content: space-between;
  font-size: 0.6875rem;
  font-weight: var(--fw-semibold);
  color: var(--gray-600);
}

.im-umock__stat b { color: var(--navy-800); }

.im-umock__track {
  height: 5px;
  border-radius: var(--radius-pill);
  background: var(--gray-100);
}

.im-umock__track i {
  height: 100%;
  border-radius: var(--radius-pill);
  background: var(--indigo-500);
}

.im-umock__score {
  flex: none;
  font-size: 0.65625rem;
  font-weight: var(--fw-extrabold);
  color: var(--navy-800);
  background: var(--yellow-400);
  border-radius: var(--radius-pill);
  padding: 3px 8px;
}

.im-umock .im-w18  { width: 18%; }
.im-umock .im-w26  { width: 26%; }
.im-umock .im-w34  { width: 34%; }
.im-umock .im-w48  { width: 48%; }
.im-umock .im-w52  { width: 52%; }
.im-umock .im-w58  { width: 58%; }
.im-umock .im-w64  { width: 64%; }
.im-umock .im-w86  { width: 86%; }
.im-umock .im-w90  { width: 90%; }
.im-umock .im-w100 { width: 100%; }