:root {

  --sig-danger:      #E0556B;
  --sig-danger-2:    #F2879A;
  --sig-danger-soft: rgba(224, 85, 107, 0.14);
  --sig-danger-line: rgba(224, 85, 107, 0.42);
  --sig-warn:        var(--gold);
  --sig-good:        var(--glow);
  --sig-good-2:      var(--accent-2);
  --sig-good-soft:   color-mix(in srgb, var(--glow) 14%, transparent);
}

.surface-light { --sig-danger: #C03046; --sig-danger-2: #C03046; --sig-good: var(--accent); --sig-good-2: var(--accent); }

.dio { position: relative; isolation: isolate; overflow: clip; background: var(--bg-3); }
.dio__bed { position: absolute; inset: 0; z-index: -3; overflow: hidden; }
.dio__bed img {
  position: absolute; inset: 0; width: 100%; height: 116%;
  object-fit: cover; object-position: var(--bed-pos, center 35%);
  filter: saturate(.66) contrast(1.05) brightness(.7);
  transform: translateY(var(--bed-y, 0));
  will-change: transform;
}

.dio__grade {
  position: absolute; inset: 0; z-index: -2; pointer-events: none;
  background:
    linear-gradient(110deg, color-mix(in srgb, var(--bg-3) 92%, transparent) 0%,
                            color-mix(in srgb, var(--bg) 70%, transparent) 42%,
                            color-mix(in srgb, var(--bg) 14%, transparent) 78%,
                            color-mix(in srgb, var(--bg-2) 34%, transparent) 100%),
    linear-gradient(180deg, color-mix(in srgb, var(--bg-3) 60%, transparent) 0%, transparent 26%,
                            color-mix(in srgb, var(--bg-3) 78%, transparent) 100%);
}

.dio__glow {
  position: absolute; z-index: -1; pointer-events: none;
  width: 60%; height: 70%; inset: var(--glow-top, -8%) var(--glow-right, -10%) auto auto;
  background: radial-gradient(50% 50% at 70% 30%,
              color-mix(in srgb, var(--glow) 20%, transparent),
              color-mix(in srgb, var(--accent) 7%, transparent) 46%, transparent 72%);
  filter: blur(16px);
  transform: translateZ(0);
}

.dio__seam {
  position: absolute; left: 0; right: 0; bottom: 0; height: 26%; z-index: -1; pointer-events: none;
  background: linear-gradient(180deg, transparent, var(--bg-3));
}

/* Thin rules with round ends (user, 16 October 2026, drawn from their reference), on Home: between "How we scan
   your radius" and "What we do", and along the top and bottom edges of the final call to action; on The 2-KPI
   Method between the two white sections ("A tap on a result" and "Each extra second"), on the boundary, which is the
   middle of that gap (both sections have the same padding); on the light surface its colours are the light set's;
   and along the top and bottom edges of its teal "Google's marks" section, edge to edge, as on Home's final call to action. (One between
   "Impact from Google" and "Our guarantee" was taken out again: that join is seamless now, user.) A rule is taken
   out of the flow, so nothing moves, and sits above the section's layers. It runs edge to edge (the final call to
   action's two, user: "go from edge to edge"), or, as a .container, exactly as wide as the content column at every
   width (the one between sections). --gap: the section
   ends with a .rv__note, which keeps the browser's 1em bottom margin (.84rem), and the next section has the same
   padding, so the middle of the gap is half of that above this section's lower edge. --top / --bottom: on the
   section's edge (inside it: sections clip). Colour: --glow and --accent-2 mixed, fading to 18% at the right, as
   measured on the reference. The .container form needs the longer selector to beat `.dx .container` and the like. */
.dio > .dio__rule,
.dio > .container.dio__rule { position: absolute; left: 0; right: 0; z-index: 3; pointer-events: none; }
.dio > .container.dio__rule { max-width: var(--maxw); }
.dio > .dio__rule--gap    { bottom: calc((.84rem - 2px) / 2); }
.dio > .dio__rule--top    { top: 0; }
.dio > .dio__rule--bottom { bottom: 0; }
.dio__rule::before {
  content: ""; display: block; height: 2px; border-radius: 999px;
  --rule: color-mix(in srgb, var(--glow) 50%, var(--accent-2));
  background: linear-gradient(90deg, var(--rule), color-mix(in srgb, var(--rule) 18%, transparent));
}

.dio--dark { background: var(--bg); }
.dio__darkbed {
  position: absolute; inset: 0; z-index: -3; pointer-events: none; overflow: hidden;
  background:
    radial-gradient(72% 90% at var(--dark-bloom, 84% 8%),
      color-mix(in srgb, var(--glow) 12%, transparent),
      color-mix(in srgb, var(--accent) 5%, transparent) 40%, transparent 70%),
    radial-gradient(60% 80% at 6% 100%,
      color-mix(in srgb, var(--accent) 8%, transparent), transparent 58%),
    linear-gradient(168deg, var(--bg-2) 0%, var(--bg) 44%, var(--bg-3) 100%);
}
/* Background pattern (was a 64px grid): a hexagon "connections" line drawing in the accent colour
   (img/hex-connections.webp: --accent's value baked in, transparent elsewhere; re-tint it if --accent
   changes), kept faint with --hex-a. It is a background image, not a CSS mask image, so it also shows
   when a page is opened from disk (browsers block url() masks there). The drawing has hexagons down
   both sides and an empty middle; its lower half is the upper half mirrored on a row of horizontal
   edges, so it repeats downwards without a seam. It is sized to the section's width and centred; on
   phones one side's hexagons are stretched across the screen instead (--hex-pos 0 0), since the
   centred drawing would show only the empty middle there. Source: owner-supplied stock banner
   (4350031_10068.jpg); licence and credit to be confirmed (OPEN-ITEMS). */
:root { --hex-a: .12; --hex-size: max(100%, 1100px); --hex-pos: 50% 0; --hex-clear: 56px; }
@media (max-width: 767px) { :root { --hex-size: 290%; --hex-pos: 0 0; } }
.dio__darkbed::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: var(--hex-a);
  background: url(../img/hex-connections.webp) var(--hex-pos) / var(--hex-size) auto repeat-y;
  -webkit-mask-image: radial-gradient(120% 120% at 50% 0, var(--bg) 0%, transparent 72%);
          mask-image: radial-gradient(120% 120% at 50% 0, var(--bg) 0%, transparent 72%);
}
/* The first section of a page runs under the fixed header, which is transparent at the top of the
   page, so the pattern stays clear of the nav links (--hex-clear) and fades in below them. The
   typographic hero does the same (.hv2-typographic .hv2-ground::after). */
.dbf .dio__darkbed::after {
  -webkit-mask-image: linear-gradient(180deg, transparent var(--hex-clear), var(--bg) calc(var(--hex-clear) + 80px)),
                      radial-gradient(120% 120% at 50% 0, var(--bg) 0%, transparent 72%);
  -webkit-mask-composite: source-in;
          mask-image: linear-gradient(180deg, transparent var(--hex-clear), var(--bg) calc(var(--hex-clear) + 80px)),
                      radial-gradient(120% 120% at 50% 0, var(--bg) 0%, transparent 72%);
          mask-composite: intersect;
}
.dio--dark .glass { background: color-mix(in srgb, var(--bg-2) 72%, transparent); }
.dio--dark .dio__seam { background: linear-gradient(180deg, transparent, var(--bg-3)); }

body::after {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(60% 42% at 84% 4%,  color-mix(in srgb, var(--glow) 9%, transparent), transparent 60%),
    radial-gradient(56% 50% at 6% 96%,  color-mix(in srgb, var(--accent) 7%, transparent), transparent 60%),
    linear-gradient(180deg, var(--bg-3) 0%, var(--bg-2) 30%, var(--bg) 60%, var(--bg-3) 100%);
}
body { background: var(--bg-3); }

.dio--blend { background: transparent; }
.dio--blend .dio__darkbed { display: none; }
.dio--blend .dio__seam    { display: none; }
.dio--blend .glass        { background: color-mix(in srgb, var(--bg-2) 72%, transparent); }

.dio--light {
  background: var(--bg);
  color: var(--ink);
  isolation: isolate;
}
.dio.dio--light {
  padding-top: calc(var(--pad) + clamp(70px, 9vw, 130px));
  padding-bottom: calc(var(--pad) + clamp(40px, 6vw, 96px));
}
/* A light section with no flow seams to make room for keeps the dark sections' padding, so a dark section turned
   white keeps its layout (The 2-KPI Method, "A tap on a result" and "Each extra second": user, 16 October 2026). */
.dio.dio--light.dio--light-flat { padding-block: var(--pad); }
.dio--light .glass {
  background: var(--surface);
  -webkit-backdrop-filter: none; backdrop-filter: none;
  border: 1px solid var(--line);
  box-shadow: var(--shadow-elev);
  color: var(--ink);
}
.dio--light .glass::before {
  background: radial-gradient(120% 80% at 26% 0, color-mix(in srgb, var(--accent) 8%, transparent), transparent 64%);
}

.flow-seam { position: absolute; left: 0; right: 0; line-height: 0; z-index: 2; pointer-events: none; }
.flow-seam--bottom { bottom: -1px; }
.flow-seam--top    { top: -1px; }
.flow-fade { height: clamp(96px, 13vw, 168px);
  background: linear-gradient(180deg, var(--flow-from, transparent) 0%, var(--flow-to, transparent) 100%); }
.flow-wave { color: var(--flow-to, var(--bg)); }
.flow-wave svg { display: block; width: 100%; height: clamp(46px, 6.5vw, 84px); fill: currentColor; }

.glass {
  position: relative;
  background: color-mix(in srgb, var(--bg-2) 46%, transparent);
  backdrop-filter: blur(22px) saturate(150%);
  -webkit-backdrop-filter: blur(22px) saturate(150%);
  border: 1px solid var(--line);
  border-radius: calc(var(--r-surface) + 4px);
  box-shadow: var(--shadow-elev), var(--inset-hi);
}
.glass::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 48%; z-index: 0;
  border-radius: inherit; pointer-events: none;
  background: radial-gradient(120% 80% at 26% 0, color-mix(in srgb, var(--glow) 9%, transparent), transparent 62%);
}
.glass > * { position: relative; z-index: 1; }

.dio-crumb { display: flex; align-items: center; gap: .55em; flex-wrap: wrap;
  font: 600 var(--fs-small)/1 var(--body); color: var(--ink-2); margin-bottom: 22px; }
.dio-crumb a { color: var(--ink-2); transition: color var(--t-fast) var(--ease); }
.dio-crumb a:hover { color: var(--accent-2); text-decoration: none; }
.dio-crumb .sep { color: var(--ink-3); }
.dio-crumb [aria-current] { color: color-mix(in srgb, var(--accent-2) 70%, var(--ink)); }

.s-head { max-width: 720px; margin-bottom: clamp(34px, 4.6vw, 54px); }
.s-head.center { margin-inline: auto; text-align: center; }
.s-head .eyebrow { margin-bottom: 16px; }
.s-head.center .eyebrow { justify-content: center; }
.s-head h1 { font: 800 var(--fs-h1)/1.05 var(--font); letter-spacing: -.02em; color: var(--ink); margin: 0 0 14px; }
.s-head h1 .grad { background: var(--grad-text); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; }
.s-head h2 { font: 800 var(--fs-h2)/1.05 var(--font); letter-spacing: -.02em; color: var(--ink); margin: 0 0 14px; }
.s-head h2 .grad { background: var(--grad-text); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; }
.s-head p { font: 400 var(--fs-lead)/1.55 var(--body); color: var(--ink-2); max-width: 58ch; }
/* Two section intros sit over brighter glows (the proof section's, and the speed section's on phones); their
   copy is lifted towards --ink so it keeps 4.5:1 there. Measured 9 October 2026. */
.persona-proof .s-head p { color: color-mix(in srgb, var(--ink-2) 60%, var(--ink)); }
.dfcp .s-head p { color: color-mix(in srgb, var(--ink-2) 40%, var(--ink)); }
.s-head.center p { margin-inline: auto; }

.dh { min-height: 100vh; display: flex; align-items: center;
  padding: calc(var(--s-12) + 24px) 0 var(--s-10); }
.dh .container { display: grid; grid-template-columns: minmax(0, 1.06fr) minmax(0, .94fr);
  gap: clamp(28px, 4vw, 56px); align-items: center; }
.dh__panel { padding: clamp(28px, 3vw, 44px); max-width: 620px; }
.dh__eyebrow { display: inline-flex; align-items: center; gap: .6em; margin-bottom: 20px;
  padding: 7px 14px; border-radius: var(--r-pill);
  font: 700 var(--fs-eyebrow)/1 var(--body); letter-spacing: .18em; text-transform: uppercase;
  color: var(--ink); background: color-mix(in srgb, var(--bg-3) 42%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent); }
.dh__eyebrow::before { content: ""; width: 7px; height: 7px; border-radius: 50%;
  background: var(--glow); box-shadow: 0 0 10px 1px var(--glow); }
.dh h1 { font: 900 clamp(2.7rem, 5.3vw, 4.4rem)/.98 var(--font); letter-spacing: -.035em;
  color: var(--ink); margin: 0 0 20px; text-shadow: 0 18px 60px rgba(0,0,0,.5); }
.dh h1 .grad { background: var(--grad-text); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; }
.dh__sub { font: 400 var(--fs-lead)/1.55 var(--body); color: var(--ink-2); margin: 0 0 22px; max-width: 46ch; }
.dh__price { display: inline-flex; align-items: baseline; gap: .5em; flex-wrap: wrap;
  margin-bottom: 24px; padding: 11px 17px; border-radius: var(--r-pill);
  background: color-mix(in srgb, var(--surface) 50%, transparent); border: 1px solid var(--line); }
.dh__price .from { font: 600 var(--fs-small)/1 var(--body); color: var(--ink-2); text-transform: uppercase; letter-spacing: .1em; }
.dh__price .amt { font: 800 1.5rem/1 var(--font); color: var(--ink); }
.dh__price .per { font: 500 var(--fs-small)/1 var(--body); color: var(--ink-2); }
.dh__price .pro { font: 500 var(--fs-small)/1 var(--body); color: var(--accent-2); }
.dh__actions { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 24px; }
.dh__trust { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.dh__rating { display: inline-flex; align-items: center; gap: .5em;
  font: 400 var(--fs-small)/1.2 var(--body); color: var(--ink-2); }
.dh__rating b { color: var(--ink); }
.dh__stars { color: var(--gold); letter-spacing: .08em; }

.dh__overlay { justify-self: end; width: min(420px, 100%); padding: 22px; }
.dh__ov-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.dh__ov-head .t { font: 700 .92rem/1.1 var(--font); color: var(--ink); }
.dh__ov-head .live { display: inline-flex; align-items: center; gap: 6px;
  font: 700 .66rem/1 var(--body); letter-spacing: .14em; text-transform: uppercase; color: var(--accent-2); }
.dh__ov-head .live::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--glow);
  box-shadow: 0 0 10px 1px var(--glow); animation: dio-pulse 2.4s var(--ease) infinite; }
@keyframes dio-pulse { 0%,100% { opacity: 1; } 50% { opacity: .35; } }
.dh__ov-rank { display: grid; gap: 9px; }
.dh__ov-row { display: grid; grid-template-columns: 26px 1fr auto; align-items: center; gap: 12px;
  padding: 10px 12px; border-radius: var(--r-control);
  background: color-mix(in srgb, var(--surface) 36%, transparent); border: 1px solid var(--line-2); }
.dh__ov-row.you { background: color-mix(in srgb, var(--accent) 14%, transparent);
  border-color: color-mix(in srgb, var(--glow) 46%, transparent);
  box-shadow: 0 0 22px -8px color-mix(in srgb, var(--glow) 70%, transparent); }
.dh__ov-pos { font: 800 1rem/1 var(--font); color: var(--ink-3); text-align: center; }
.dh__ov-row.you .dh__ov-pos { color: var(--glow); }
.dh__ov-name { font: 600 .86rem/1.2 var(--body); color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dh__ov-row.you .dh__ov-name { color: var(--ink); }
.dh__ov-bar { width: 58px; height: 7px; border-radius: 999px; overflow: hidden;
  background: color-mix(in srgb, var(--ink-3) 30%, transparent); }
.dh__ov-bar i { display: block; height: 100%; border-radius: 999px; background: var(--ink-3); }
.dh__ov-row.you .dh__ov-bar i { background: var(--grad-accent); box-shadow: 0 0 10px color-mix(in srgb, var(--glow) 70%, transparent); }
.dh__ov-foot { margin-top: 14px; padding-top: 13px; border-top: 1px solid var(--divider);
  display: flex; align-items: baseline; gap: .5em; }
.dh__ov-foot .big { font: 800 1.7rem/1 var(--font); color: var(--ink); }
.dh__ov-foot .pct { font: 700 1rem/1 var(--font); color: var(--accent-2); }
.dh__ov-foot .cap { font: 400 .76rem/1.3 var(--body); color: var(--ink-2); margin-left: auto; max-width: 16ch; text-align: right; }
.dh__ov-note { margin-top: 12px; font: 400 .68rem/1.3 var(--body); color: var(--ink-3); letter-spacing: .02em; }

.dh__scrollcue { position: absolute; left: 50%; bottom: 26px; transform: translateX(-50%); z-index: 4;
  display: inline-flex; flex-direction: column; align-items: center; gap: 8px;
  font: 600 .68rem/1 var(--body); letter-spacing: .22em; text-transform: uppercase; color: color-mix(in srgb, var(--ink-2) 60%, var(--ink-3)); }
.dh__scrollcue .line { width: 1px; height: 38px; background: linear-gradient(180deg, var(--accent), transparent); }
@media (prefers-reduced-motion: no-preference) {
  .dh__scrollcue .line { animation: dio-cue 2s var(--ease) infinite; transform-origin: top; }
  @keyframes dio-cue { 0% { transform: scaleY(.2); opacity: .3; } 50% { transform: scaleY(1); opacity: 1; } 100% { transform: scaleY(.2); opacity: .3; } }
}

.dpress { padding: clamp(34px, 5vw, 56px) 0 clamp(30px, 4vw, 48px); }
.dpress .container { position: relative; z-index: 1; text-align: center; }
.dpress__eyebrow { display: inline-flex; align-items: center; gap: .6em; margin: 0 auto 26px;
  font: 700 var(--fs-eyebrow)/1 var(--body); letter-spacing: .2em; text-transform: uppercase; color: var(--ink-3); }
.dpress__eyebrow::before, .dpress__eyebrow::after { content: ""; width: 34px; height: 1px;
  background: linear-gradient(90deg, transparent, var(--line)); }
.dpress__eyebrow::after { background: linear-gradient(90deg, var(--line), transparent); }

.dpress__marquee { position: relative; overflow: hidden; width: 100%;
  -webkit-mask-image: linear-gradient(90deg, transparent, var(--ink) 9%, var(--ink) 91%, transparent);
          mask-image: linear-gradient(90deg, transparent, var(--ink) 9%, var(--ink) 91%, transparent); }
.dpress__lane { display: flex; width: max-content; flex-wrap: nowrap;
  animation: dpress-scroll 42s linear infinite; will-change: transform; }
.dpress__track { display: flex; flex: none; flex-wrap: nowrap; padding-block: 6px; }
.dpress__marquee:hover .dpress__lane { animation-play-state: paused; }
@keyframes dpress-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }

.dpress__chip { flex: none; display: grid; place-items: center;
  height: clamp(52px, 6vw, 64px); padding: 0 clamp(16px, 1.8vw, 24px);
  margin-right: clamp(16px, 2.4vw, 34px);
  border-radius: var(--r-control);
  background: color-mix(in srgb, var(--ink) 90%, transparent);
  border: 1px solid color-mix(in srgb, var(--ink) 30%, transparent);
  box-shadow: 0 1px 0 0 rgba(255,255,255,0.55) inset, 0 10px 26px -16px rgba(0,0,0,0.6);
  transition: transform var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease); }
.dpress__chip:hover { transform: translateY(-3px);
  box-shadow: 0 1px 0 0 rgba(255,255,255,0.7) inset, 0 16px 34px -16px rgba(0,0,0,0.7); }
.dpress__logo { height: clamp(20px, 2.6vw, 28px); width: auto; max-width: clamp(82px, 10vw, 118px);
  object-fit: contain; display: block; filter: saturate(1.02) brightness(1.0); }
.dpress__line { margin: 26px auto 0; font: 500 var(--fs-small)/1.4 var(--body); color: var(--ink-2); }
.dpress__line b { color: var(--ink); }

@media (prefers-reduced-motion: reduce) {
  .dpress__lane { animation: none; transform: none; flex-wrap: wrap; justify-content: center; width: 100%; }
  .dpress__track { flex-wrap: wrap; justify-content: center; }
  .dpress__track[data-clone] { display: none; }
}

/* The press band (option A, 9 October 2026), used on Home and on the ten pages that had the .dpress strip above. */
/* Press marks: every logo as one light mark on the dark band. Logos drawn in ink on a clear
   ground become a white silhouette; the two filled marks (ABC's disc, Google News's card) are
   inverted instead, so their letters stay readable. Each logo gets its own height so the wide
   wordmarks and the square marks carry about the same visual weight. */
.dpm { display: block; flex: none; width: auto; height: calc(var(--mark, 40px) * var(--k, .8));
  max-width: 100%; object-fit: contain;
  filter: brightness(0) invert(1); opacity: .8;
  transition: opacity var(--t-base) var(--ease), transform var(--t-base) var(--ease); }
.dpm--abc, .dpm--gn { filter: grayscale(1) invert(1) brightness(1.7) contrast(1.3); }
.dpm--fox { --k: .7; }  .dpm--nbc { --k: .94; } .dpm--cbs { --k: .68; } .dpm--abc { --k: .8; }
.dpm--gn  { --k: .78; } .dpm--dj  { --k: .8; }  .dpm--yf  { --k: .68; } .dpm--mw  { --k: 1.02; }
.dpm--bz  { --k: .46; }

/* Option A, ticker band: one full-width band framed by fading hairlines. The label sits at the
   left behind a divider, the marks run through the middle, and the proof line closes the band
   at the right as a pill. Below 1024px the label and pill share the top row; on a phone all
   three stack. */
/* The band sits flush on the section after it: no space below its bottom hairline. */
.dpress--ticker { padding: clamp(28px, 4.4vw, 56px) 0 0; }
/* After a light section the band starts on the light section's edge: no dark lip above it, and that edge is its top frame. */
.dio--light + .dpress--ticker { padding-top: 0; }
.dio--light + .dpress--ticker .dpa::before { content: none; }
/* After a full-bleed photo hero too (user, 16 October 2026: "remove this gap between hero section and the as seen on
   band"): the band starts on the hero's foot, its top hairline the seam between them. */
.hv2--bleed + .dpress--ticker { padding-top: 0; }
.dpa { position: relative;
  background: linear-gradient(180deg, color-mix(in srgb, var(--bg-3) 30%, transparent), color-mix(in srgb, var(--bg-2) 62%, transparent));
  box-shadow: 0 30px 60px -40px var(--bg-3); }
.dpa::before, .dpa::after { content: ""; position: absolute; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--accent) 42%, transparent) 30%, color-mix(in srgb, var(--accent) 42%, transparent) 70%, transparent); }
.dpa::before { top: 0; } .dpa::after { bottom: 0; }
.dpa__row { max-width: 1320px; display: grid; grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-areas: "label mq line"; align-items: center; gap: clamp(18px, 2.6vw, 36px);
  padding-block: clamp(18px, 2vw, 24px); }
.dpa__label { grid-area: label; display: inline-flex; align-items: center; gap: .7em; padding-right: clamp(18px, 2.6vw, 36px);
  border-right: 1px solid var(--line); align-self: stretch;
  font: 700 var(--fs-eyebrow)/1 var(--body); letter-spacing: .2em; text-transform: uppercase; color: var(--ink-2); white-space: nowrap; }
.dpa__label::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--glow); box-shadow: 0 0 10px 1px var(--glow); }
.dpa__marquee { grid-area: mq; position: relative; overflow: hidden; min-width: 0; --mark: clamp(30px, 3vw, 40px);
  -webkit-mask-image: linear-gradient(90deg, transparent, var(--ink) 8%, var(--ink) 92%, transparent);
          mask-image: linear-gradient(90deg, transparent, var(--ink) 8%, var(--ink) 92%, transparent); }
.dpa__lane { display: flex; width: max-content; animation: dpa-scroll 64s linear infinite; }
.dpa__track, .dpa__set { display: flex; flex: none; align-items: center; }
.dpa__track { padding-block: 10px; }
.dpa__set .dpm { margin-right: clamp(40px, 4.6vw, 68px); }
.dpa__marquee:hover .dpa__lane { animation-play-state: paused; }
.dpa__marquee .dpm:hover { opacity: 1; transform: translateY(-2px); }
@keyframes dpa-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.dpa__line { grid-area: line; margin: 0; padding: 10px 16px; border-radius: var(--r-pill); white-space: nowrap;
  font: 500 var(--fs-small)/1 var(--body); color: var(--ink-2);
  background: color-mix(in srgb, var(--accent) 9%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 34%, transparent); }
.dpa__line b { font-weight: 700; color: var(--glow); }
@media (max-width: 1023px) {
  .dpa__row { grid-template-columns: 1fr auto; grid-template-areas: "label line" "mq mq"; row-gap: 14px; }
  .dpa__label { border-right: 0; padding-right: 0; }
}
@media (max-width: 600px) {
  .dpa__row { grid-template-columns: minmax(0, 1fr); grid-template-areas: "label" "mq" "line"; justify-items: center; text-align: center; }
  .dpa__marquee { width: 100%; --mark: 28px; }
}
@media (prefers-reduced-motion: reduce) {
  .dpa__lane { animation: none; width: 100%; }
  .dpa__track { width: 100%; }
  .dpa__track[aria-hidden], .dpa__set[aria-hidden] { display: none; }
  .dpa__set { flex: 1; flex-wrap: wrap; justify-content: center; row-gap: 18px; }
  .dpa__marquee { -webkit-mask-image: none; mask-image: none; }
  .dpa__set .dpm { margin-inline: clamp(14px, 2vw, 24px); }
}

.dstat { padding-block: var(--pad); }
.dstat .dio__darkbed { --dark-bloom: 50% 0%; }
.dstat .container { position: relative; z-index: 1; }
.dstat__head { text-align: center; max-width: 720px; margin: 0 auto clamp(40px, 5vw, 60px); }
.dstat__head .eyebrow { justify-content: center; margin-bottom: 16px; }
.dstat__head h2 { font: 800 var(--fs-h2)/1.05 var(--font); letter-spacing: -.02em; color: var(--ink); margin: 0 0 14px; }
.dstat__head h2 .grad { background: var(--grad-text); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; }
.dstat__head p { font: 400 var(--fs-lead)/1.55 var(--body); color: var(--ink-2); max-width: 56ch; margin-inline: auto; }
.dstat__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(16px, 2.4vw, 26px); }
.dstat__grid--2 { grid-template-columns: repeat(2, 1fr); }
.dstat__cell { padding: clamp(26px, 3vw, 40px) clamp(20px, 2.6vw, 32px); text-align: center; }
.dstat__big { font: 900 var(--fs-stat)/.92 var(--font); letter-spacing: -.03em; color: var(--ink);
  display: inline-flex; align-items: baseline; gap: .08em;
  background: var(--grad-text); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; }
.dstat__big .unit { font-size: .42em; -webkit-text-fill-color: var(--accent-2); color: var(--accent-2); align-self: center; letter-spacing: .04em; }
.dstat__lbl { display: block; margin-top: 12px; font: 600 var(--fs-body)/1.3 var(--font); color: var(--ink); }
.dstat__sub { display: block; margin-top: 6px; font: 400 .82rem/1.4 var(--body); color: var(--ink-2); }
.dstat__chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: clamp(34px, 4vw, 48px); }
.dstat__chip { display: inline-flex; align-items: center; gap: .6em;
  font: 600 .86rem/1 var(--font); padding: 10px 16px; border-radius: var(--r-pill);
  color: var(--ink); background: color-mix(in srgb, var(--accent) 10%, transparent); border: 1px solid var(--line); }
.dstat__chip b { color: var(--accent-2); }
.dstat__chip::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--glow); box-shadow: 0 0 10px var(--glow); }

/* Home's numbers (option A, 9 October 2026): .dstat--split. The other pages keep the .dstat cards above.
   The numbers count up from zero through the shared .count[data-to] script in shell-tail.html. */
/* Option A, editorial split: the heading reads on the left; the three numbers stack on the right as
   a ruled list, each row opened by a glowing tick, with a teal line drawn under it as it comes in. */
.dstat--split .dsa { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(32px, 6vw, 96px); align-items: center; }
.dsa__head .eyebrow { margin-bottom: 16px; }
.dsa__head h2 { font: 800 var(--fs-h2)/1.05 var(--font); letter-spacing: -.02em; color: var(--ink); margin: 0 0 16px; }
.dsa__head h2 .grad { background: var(--grad-text); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; }
.dsa__head p { font: 400 var(--fs-lead)/1.55 var(--body); color: var(--ink-2); max-width: 40ch; margin: 0; }
.dsa__list { border-top: 1px solid var(--line); }
.dsa__row { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 20px;
  padding: clamp(18px, 2.4vw, 28px) 0 clamp(18px, 2.4vw, 28px) clamp(24px, 2.6vw, 34px); border-bottom: 1px solid var(--line); }
.dsa__row::before { content: ""; position: absolute; left: 2px; top: 50%; width: 8px; height: 8px; margin-top: -4px; border-radius: 50%;
  background: var(--glow); box-shadow: 0 0 12px 1px var(--glow); }
.dsa__row::after { content: ""; position: absolute; left: 0; bottom: -1px; height: 1px; width: 0;
  background: linear-gradient(90deg, var(--glow), color-mix(in srgb, var(--accent) 40%, transparent) 60%, transparent);
  transition: width 1.2s var(--ease-out) .25s; }
.dsa__row.in::after { width: 100%; }
.dstat--split .dsa__row .dstat__big { font-size: clamp(3rem, 6.2vw, 5.6rem); }
.dsa__lbl { font: 600 var(--fs-body)/1.3 var(--font); color: var(--ink); text-align: right; }
@media (max-width: 900px) {
  .dstat--split .dsa { grid-template-columns: minmax(0, 1fr); gap: clamp(28px, 6vw, 44px); }
}
/* Phones (user, 16 October 2026: "these numbers should be center-aligned"): number and label centred in each row;
   the glowing tick moves from the left edge to sit centred above the number; the counting number keeps its final
   width (--count-w, set by the count-up script) and equal-width digits (WebKit and Firefox draw "0.0" wider than
   "2.1"), so the centred number does not shift while it counts. */
@media (max-width: 479px) {
  .dsa__row { grid-template-columns: minmax(0, 1fr); gap: 6px; justify-items: center; text-align: center;
    padding: clamp(36px, 10vw, 44px) 0 clamp(18px, 5vw, 24px); }
  .dsa__row::before { left: 50%; top: clamp(16px, 4.6vw, 20px); margin: 0 0 0 -4px; }
  .dsa__lbl { text-align: center; }
  .dstat--split .dsa__row .dstat__big { font-size: clamp(3rem, 16vw, 3.8rem); }
  .dsa__row .count { min-width: var(--count-w, 0px); text-align: right; font-variant-numeric: tabular-nums; }
}
@media (prefers-reduced-motion: reduce) {
  .dsa__row::after { width: 100%; transition: none; }
}
/* A tapered hairline closes the numbers on Home, on the boundary with the next section: 2px at
   its middle, narrowing to nothing at both ends, in the accent and fading out towards the ends. */
.dstat--split::after {
  content: ""; position: absolute; z-index: 1; pointer-events: none;
  left: 50%; bottom: 0; width: min(1180px, 88%); height: 2px; transform: translateX(-50%);
  background: linear-gradient(90deg, transparent,
    color-mix(in srgb, var(--accent) 35%, transparent) 22%, color-mix(in srgb, var(--glow) 75%, transparent) 50%,
    color-mix(in srgb, var(--accent) 35%, transparent) 78%, transparent);
  clip-path: polygon(0 50%, 50% 0, 100% 50%, 50% 100%);
}

.dkpi { padding-block: var(--pad); }
.dkpi .container { position: relative; z-index: 1; }
.dkpi__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(18px, 2.6vw, 28px); align-items: stretch; }
.dkpi__grid--3 { grid-template-columns: repeat(3, 1fr); }
.dkpi__card { padding: clamp(28px, 3vw, 40px); display: flex; flex-direction: column; }
.dkpi__tag { display: inline-flex; align-self: flex-start; align-items: center; gap: .5em; margin-bottom: 18px;
  padding: 7px 14px; border-radius: var(--r-pill);
  font: 800 .72rem/1 var(--body); letter-spacing: .14em; text-transform: uppercase;
  color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, transparent); border: 1px solid var(--line-2); }
.dkpi__abbr { font: 900 clamp(2.4rem, 4vw, 3.4rem)/1 var(--font); letter-spacing: -.02em; color: var(--ink); margin: 0 0 6px; }
.dkpi__abbr .full { display: block; margin-top: 8px; font: 700 1rem/1.2 var(--font); color: var(--accent); letter-spacing: 0; }
.dkpi__card > p { font: 400 var(--fs-body)/1.6 var(--body); color: var(--ink-2); margin: 14px 0 18px; }
.dkpi__lever { margin-top: auto; padding-top: 16px; border-top: 1px solid var(--divider);
  font: 600 .9rem/1.45 var(--body); color: var(--ink); }
.dkpi__lever b { color: var(--accent); }
/* Industries, "Built for your specialty" (user, 19 October 2026: "more compact ... include images too on each card that
   matches industry / specialty"): each card is a row: the specialty's photo (the natural-colour set of Home's specialty
   selector, focal point per card in --pos) as a strip down its left side, and the tag, name, line and link beside it,
   in less padding. The photo is decorative (the card's link text names the specialty). .dkpi__grid--spec: Industries only
   (The 2-KPI Method's .dkpi__grid--hub cards have no photo and keep their layout). */
.dkpi__grid--spec { gap: clamp(12px, 1.6vw, 18px); }
.dkpi__grid--spec .dkpi__card { display: grid; grid-template-columns: clamp(96px, 32%, 140px) minmax(0, 1fr); padding: 0; overflow: hidden; }
.hub__media { position: relative; overflow: hidden; }
.hub__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: var(--pos, 50% 50%);
  filter: saturate(.92) brightness(.92); transition: transform .6s var(--ease); }
.dkpi__grid--spec .dkpi__card:hover .hub__media img { transform: scale(1.06); }
.hub__body { display: flex; flex-direction: column; min-width: 0; padding: clamp(14px, 1.5vw, 18px) clamp(14px, 1.6vw, 20px); }
.hub__body .dkpi__tag { margin-bottom: 8px; padding: 5px 10px; font-size: .62rem; letter-spacing: .12em; max-width: 100%; }
.hub__body .dkpi__abbr { font-size: clamp(1.15rem, 1.5vw, 1.4rem); line-height: 1.1; margin: 0; }
.hub__body > p { margin: 4px 0 10px; font: 400 .9rem/1.4 var(--body); color: var(--ink-2); }
.hub__body .dkpi__lever { padding-top: 10px; font-size: .84rem; }
@media (prefers-reduced-motion: reduce) { .hub__media img { transition: none; } }
/* narrower cards (3 columns at 1024 to 1279, 2 on tablets, phones): a narrower photo strip and a tighter tag, so the
   longest tag ("Physical therapy near me") stays on one line */
@media (max-width: 1279px) {
  .dkpi__grid--spec .dkpi__card { grid-template-columns: clamp(84px, 27%, 130px) minmax(0, 1fr); }
  .hub__body .dkpi__tag { letter-spacing: .08em; padding-inline: 8px; }
}
.dkpi__num { font: 900 clamp(1.5rem,2vw,1.9rem)/1 var(--font); color: var(--accent); }

/* Home, "Patient acquisition": the specialty selector (.dkpi--select). The heading on the left with
   the nine choices under it as a tab list; one panel on the right shows the chosen specialty as the
   search a patient types, a photo of that kind of practice, then its name, line and link. Without JS
   the tab list is not shown and all nine panels sit in a grid. Everything here is scoped to
   .dkpi--select, so the other pages' .dkpi sections are untouched. The section fits one screen, so its
   padding follows the screen's height. */
.dkpi--select { padding-block: clamp(40px, 7vh, 96px); }
.dkpi--select .ico-search, .dkpi--select .ico-grid {
  width: 1em; height: 1em; flex: none; fill: none; stroke: var(--accent-2); stroke-width: 2; stroke-linecap: round; }
.dkpi--select .ico-grid { stroke-width: 1.7; }
.dkpi--select .dkx-ico { display: grid; place-items: center; flex: none; border-radius: 10px;
  background: color-mix(in srgb, var(--accent) 11%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 24%, transparent); box-shadow: var(--inset-hi); }
/* the site's specialty icons are dark glyphs; the mega menu's own filter turns them teal */
.dkpi--select .dkx-ico img { width: min(24px, 60%); height: auto; filter: brightness(0) saturate(100%) invert(82%) sepia(20%) saturate(640%) hue-rotate(140deg) brightness(101%) contrast(94%); }
.dkpi--select .dkx-ico svg { width: 50%; height: 50%; }

.dkpi--select .dka { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 76px); align-items: center; }
/* The photo panel sits on the left and the heading with the specialty buttons on the right. The source
   order stays heading, buttons, panel, so the reading order, heading order and Tab order are unchanged;
   where the layout is one column (narrow screens, no JS) the heading stays above the panel. */
.dkpi--select .dka__panels { grid-column: 1; grid-row: 1; }
.dkpi--select .dka__intro { grid-column: 2; grid-row: 1; }
.dkpi--select .dka__head { margin-bottom: clamp(18px, 3vh, 30px); }
.dkpi--select .dka__head h2 { font-size: clamp(2rem, 3.5vw, 3.05rem); }
.dkpi--select .dka__head p { font-size: var(--fs-body); margin-bottom: 0; }
.dkpi--select .dka__tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.dkpi--select .dka__tabs[hidden] { display: none; }
.js .dkpi--select .dka__tabs[hidden] { display: grid; visibility: hidden; }
.dkpi--select .dka__tab { display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 7px 12px 7px 8px; margin: 0;
  border-radius: var(--r-control); border: 1px solid var(--line-2); background: color-mix(in srgb, var(--bg-3) 45%, transparent);
  color: var(--ink-2); font: 600 .86rem/1.2 var(--font); text-align: left; cursor: pointer;
  transition: color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease), box-shadow var(--t-base) var(--ease); }
.dkpi--select .dka__tab:hover { color: var(--ink); border-color: var(--line); }
.dkpi--select .dka__tab[aria-selected="true"] { color: var(--ink); border-color: color-mix(in srgb, var(--glow) 55%, transparent);
  background: color-mix(in srgb, var(--accent) 14%, transparent);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--glow) 22%, transparent), 0 10px 26px -14px var(--glow); }
.dkpi--select .dka__ico { width: 32px; height: 32px; border-radius: 8px; }
.dkpi--select .dka__panels { position: relative; }

/* The panel is a photo card: the search bar at the top, the photo showing through in the middle, and
   the name, line and link at the bottom. */
.dkpi--select .dka__panel { --pad: clamp(28px, 3.4vw, 48px);
  display: flex; flex-direction: column; justify-content: flex-start; overflow: hidden; isolation: isolate;
  min-height: clamp(380px, 66vh, 600px); padding: var(--pad);
  background: var(--bg-3); -webkit-backdrop-filter: none; backdrop-filter: none; }
.dkpi--select .dka__panel[hidden] { display: none; }
.js .dkpi--select:not(.is-ready) .dka__panel:not(:first-child) { display: none; }

/* The photo in its natural colour, treated like the full-bleed heroes' (user, 16 October 2026: "have the images here
   in full color", keeping the gradient behind the text): it was dimmed, flattened and given the brand teal by a
   colour layer of --accent at .85, which is gone. */
.dkpi--select .dka__media { position: absolute; inset: 0; z-index: 0; overflow: hidden; isolation: isolate;
  border-radius: inherit; pointer-events: none; background: var(--bg-3); }
.dkpi--select .dka__media img { position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: var(--pos, 50% 50%); transform-origin: var(--pos, 50% 50%);
  filter: saturate(.9) brightness(.82); }
/* Soft edges like the hero's and a light shade under the search bar. */
.dkpi--select .dka__media::after { content: ""; position: absolute; inset: 0; z-index: 2;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--bg-3) 50%, transparent) 0, transparent 30%),
    radial-gradient(130% 100% at 50% 30%, transparent 55%, color-mix(in srgb, var(--bg-3) 60%, transparent) 100%); }
/* Chiropractic: the adjustment sits low in its photo, so the photo is drawn smaller and higher to bring
   it above the name; its foot fades out under the scrim. */
.dkpi--select .dka__media--raise img { top: -14%; height: 84%;
  -webkit-mask-image: linear-gradient(180deg, var(--bg) 78%, transparent); mask-image: linear-gradient(180deg, var(--bg) 78%, transparent); }
/* The scrim behind the text hangs from the name, so it always starts just above the bottom block
   however the name and the line wrap, and runs past the panel's foot (the panel clips it): clear
   above, half dark at the name's top, near solid behind the line and the link. */
.dkpi--select .dka__name::before { content: ""; position: absolute; z-index: -1; pointer-events: none;
  left: calc(-1 * var(--pad)); right: calc(-1 * var(--pad)); top: -100px; height: 720px;
  background: linear-gradient(180deg, transparent 0,
    color-mix(in srgb, var(--bg-3) 30%, transparent) 50px,
    color-mix(in srgb, var(--bg-3) 72%, transparent) 100px,
    color-mix(in srgb, var(--bg-3) 84%, transparent) 150px,
    color-mix(in srgb, var(--bg-3) 92%, transparent) 210px); }

.dkpi--select .dka__search { z-index: 2; display: flex; align-items: center; gap: 12px; align-self: stretch; margin-bottom: auto;
  padding: 14px 20px; border-radius: var(--r-pill); border: 1px solid var(--line);
  background: color-mix(in srgb, var(--bg-3) 80%, transparent);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  box-shadow: inset 0 2px 10px -4px var(--bg-3), 0 10px 30px -14px var(--bg-3);
  font: 500 1.05rem/1.2 var(--body); color: var(--ink); }
.dkpi--select .dka__search .ico-search { font-size: 1.15rem; }
.dkpi--select .dka__q::after { content: ""; display: inline-block; width: 2px; height: 1.1em; margin-left: 3px; vertical-align: -.18em; background: var(--glow); }
.dkpi--select .dka__name { display: flex; align-items: center; gap: 16px; margin: clamp(20px, 3.4vh, 32px) 0 10px;
  font: 900 clamp(2rem, 3.3vw, 2.8rem)/1.05 var(--font); letter-spacing: -.02em; color: var(--ink); }
.dkpi--select .dka__big { width: 52px; height: 52px; border-radius: 14px; }
.dkpi--select .dka__panel > p { font: 400 var(--fs-lead)/1.5 var(--body); color: var(--ink-2); margin: 0 0 clamp(18px, 3vh, 28px); }
.dkpi--select .dka__go { align-self: flex-start; display: inline-flex; align-items: center; gap: .35em; padding: 12px 18px; border-radius: var(--r-pill);
  border: 1px solid var(--line); background: color-mix(in srgb, var(--bg-3) 55%, transparent); color: var(--ink); font: 600 .95rem/1 var(--body);
  transition: border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease); }
.dkpi--select .dka__go b { color: var(--accent); transition: transform var(--t-fast) var(--ease); }
.dkpi--select .dka__go:hover { text-decoration: none; border-color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, transparent); }
.dkpi--select .dka__go:hover b { transform: translateX(3px); }
@media (prefers-reduced-motion: no-preference) {
  .dkpi--select .dka__q::after { animation: dka-caret 1.1s steps(1) infinite; }
  .dkpi--select.is-ready .dka__panel:not([hidden]) { animation: dka-in .4s var(--ease-out); }
  /* the photo settles in as its panel opens */
  .dkpi--select.is-ready .dka__panel:not([hidden]) .dka__media img { animation: dka-settle 1.4s var(--ease-out); }
  @keyframes dka-caret { 50% { opacity: 0; } }
  @keyframes dka-in { from { opacity: 0; transform: translateY(8px); } }
  @keyframes dka-settle { from { transform: scale(1.06); } }
}
html:not(.js) .dkpi--select .dka { grid-template-columns: minmax(0, 1fr); }
html:not(.js) .dkpi--select .dka__panels, html:not(.js) .dkpi--select .dka__intro { grid-column: auto; grid-row: auto; }
html:not(.js) .dkpi--select .dka__panels { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
/* without JS the nine panels share the row, so the name and the padding come down to fit a third of it */
html:not(.js) .dkpi--select .dka__panel { --pad: clamp(22px, 2.2vw, 32px); min-height: 420px; }
html:not(.js) .dkpi--select .dka__name { font-size: clamp(1.6rem, 2.1vw, 1.9rem); gap: 12px; }
html:not(.js) .dkpi--select .dka__big { width: 44px; height: 44px; }
@media (max-width: 980px) {
  .dkpi--select .dka { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .dkpi--select .dka__panels, .dkpi--select .dka__intro { grid-column: auto; grid-row: auto; }
  .dkpi--select .dka__panel { min-height: clamp(400px, 54vw, 480px); }
  html:not(.js) .dkpi--select .dka__panels { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  .dkpi--select .dka__tabs { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--s-4); gap: 8px; padding: 2px var(--s-4) 8px; margin-inline: calc(-1 * var(--s-4)); scrollbar-width: none; }
  .js .dkpi--select .dka__tabs[hidden] { display: flex; }
  .dkpi--select .dka__tabs::-webkit-scrollbar { display: none; }
  .dkpi--select .dka__tab { flex: none; scroll-snap-align: start; }
  .dkpi--select .dka__panel { min-height: clamp(440px, 122vw, 520px); }
  /* a phone shows about half the photo's width; --pos-s, where a panel sets one, aims it */
  .dkpi--select .dka__media img { object-position: var(--pos-s, var(--pos, 50% 50%)); transform-origin: var(--pos-s, var(--pos, 50% 50%)); }
  .dkpi--select .dka__media--raise img { top: -6%; height: 62%; }
  .dkpi--select .dka__search { font-size: .95rem; padding: 12px 16px; }
  .dkpi--select .dka__big { width: clamp(32px, 11.45vw + 1.4px, 46px); height: clamp(32px, 11.45vw + 1.4px, 46px); }
  /* Below 390px the card's padding, the name's icon, its gap and the name itself shrink with the screen
     (at 390px and up they are the values above), so the longest word, "Management", stays inside the
     card at 320px and narrower instead of being cut off by the card's edge. */
  .dkpi--select .dka__panel { --pad: clamp(16px, 8.6vw - 5.5px, 28px); }
  .dkpi--select .dka__name { gap: clamp(8px, 5.72vw - 6.3px, 16px); font-size: clamp(1.25rem, 9.2vw - 3.85px, 2rem); }
  html:not(.js) .dkpi--select .dka__panels { grid-template-columns: minmax(0, 1fr); }
}

.dfcp { padding-block: var(--pad); }
.dfcp .dio__darkbed { --dark-bloom: 86% 8%; }
.dfcp .container { position: relative; z-index: 1; }
.dfcp__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(18px, 2.6vw, 26px); align-items: stretch; }
.dfcp__card { padding: clamp(24px, 2.8vw, 34px); display: flex; flex-direction: column; }
.dfcp__card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.dfcp__who { font: 700 1rem/1.2 var(--font); color: var(--ink); }
.dfcp__flag { font: 700 .62rem/1 var(--body); letter-spacing: .12em; text-transform: uppercase;
  padding: 5px 10px; border-radius: var(--r-pill); }
/* The red flag's tint is mixed into the section colour (not see-through), so its contrast does not depend on
   whatever shows through the card behind it (the background pattern, a glow). */
.dfcp__flag.bad  { color: var(--sig-danger-2); background: color-mix(in srgb, var(--sig-danger) 14%, var(--bg-2)); border: 1px solid var(--sig-danger-line); }
.dfcp__flag.good { color: var(--sig-good); background: var(--sig-good-soft); border: 1px solid color-mix(in srgb, var(--glow) 46%, transparent); }
.dfcp__cap { font: 400 .84rem/1.4 var(--body); color: var(--ink-2); margin: 0 0 18px; }

.dfcp__gauge { position: relative; width: 100%; max-width: 280px; margin: 4px auto 0; }
.dfcp__gauge svg { display: block; width: 100%; height: auto; overflow: visible; }
.dfcp__gauge .track { stroke: color-mix(in srgb, var(--ink-3) 32%, transparent); }
.dfcp__gauge .fill-bad  { stroke: var(--sig-danger); filter: drop-shadow(0 0 8px color-mix(in srgb, var(--sig-danger) 60%, transparent)); }
.dfcp__gauge .fill-good { stroke: var(--sig-good);   filter: drop-shadow(0 0 8px color-mix(in srgb, var(--glow) 70%, transparent)); }
.dfcp__gauge .needle { stroke: var(--ink); stroke-linecap: round; transform-origin: 100px 100px;
  transition: transform 2.8s var(--ease-out, var(--ease)) .2s; }
.dfcp__card.is-in .dfcp__gauge .needle { transform: rotate(var(--ndl, 0deg)); }
.dfcp__gauge .ticks line { stroke: color-mix(in srgb, var(--ink-3) 50%, transparent); }
.dfcp__gauge .hub { fill: var(--ink); }

.dfcp__gauge-read { position: static; text-align: center; margin: 10px auto 14px;
  padding-top: 12px; border-top: 1px solid var(--divider); }
.dfcp__gauge-read .sec { font: 900 2.4rem/1 var(--font); letter-spacing: -.02em; }
.dfcp__gauge-read.bad  .sec { color: var(--sig-danger-2); }
.dfcp__gauge-read.good .sec { color: var(--sig-good); }
.dfcp__gauge-read .u { display: block; margin-top: 5px; font: 600 .68rem/1.3 var(--body); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-2); }
.dfcp__metric { margin-top: auto; display: grid; gap: 8px; padding-top: 14px; border-top: 1px solid var(--divider); }
.dfcp__metric .ln { display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  font: 400 .86rem/1.3 var(--body); color: var(--ink-2); }
.dfcp__metric .ln b { color: var(--ink); font-weight: 700; }
.dfcp__metric .ln.good b { color: var(--sig-good); }
.dfcp__metric .ln.bad b  { color: var(--sig-danger-2); }

.dfcp__bounce { margin-top: clamp(20px, 2.6vw, 30px); padding: clamp(22px, 2.6vw, 30px); }
.dfcp__bounce-head { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 10px; margin-bottom: 16px; }
.dfcp__bounce-head .t { font: 700 var(--fs-h3)/1.2 var(--font); color: var(--ink); }
.dfcp__bounce-head .t b { color: var(--accent-2); }
.dfcp__bounce-head .cap { font: 500 .82rem/1.3 var(--body); color: var(--ink-2); }
.dfcp__bounce-head .cap b { color: var(--ink); }
.dfcp__bars { display: grid; gap: 12px; }
.dfcp__bar { display: grid; grid-template-columns: 92px 1fr 64px; gap: 14px; align-items: center; }
.dfcp__bar .k { font: 700 .9rem/1 var(--font); color: var(--ink); }
.dfcp__bar .track { height: 14px; border-radius: 999px; overflow: hidden;
  background: color-mix(in srgb, var(--ink-3) 22%, transparent); }
.dfcp__bar .track i { display: block; height: 100%; border-radius: 999px; width: 0;
  background: linear-gradient(90deg, color-mix(in srgb, var(--sig-warn) 80%, var(--sig-danger)), var(--sig-danger));
  transition: width 1.9s var(--ease); }
.dfcp__bounce.is-in .dfcp__bar .track i { width: var(--w, 0%); }
.dfcp__bounce.is-in .dfcp__bar:nth-child(1) .track i { transition-delay: 0s; }
.dfcp__bounce.is-in .dfcp__bar:nth-child(2) .track i { transition-delay: .24s; }
.dfcp__bounce.is-in .dfcp__bar:nth-child(3) .track i { transition-delay: .48s; }
.dfcp__bar .v { font: 800 1rem/1 var(--font); color: var(--sig-danger-2); text-align: right; }

.dsolv { padding-block: var(--pad); }
.dsolv .dio__darkbed { --dark-bloom: 14% 4%; }
.dsolv .container { position: relative; z-index: 1; }
.dsolv__scans { display: grid; grid-template-columns: 1fr auto 1fr; gap: clamp(16px, 2.4vw, 28px); align-items: center; }
.dsolv__scan { padding: clamp(20px, 2.4vw, 28px); }
.dsolv__scan-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.dsolv__scan-head .t { font: 700 1rem/1.2 var(--font); color: var(--ink); }
.dsolv__tag { font: 700 .62rem/1 var(--body); letter-spacing: .12em; text-transform: uppercase; padding: 5px 10px; border-radius: var(--r-pill); }
.dsolv__tag.before { color: var(--sig-danger-2); background: var(--sig-danger-soft); border: 1px solid var(--sig-danger-line); }
.dsolv__tag.after  { color: var(--sig-good); background: var(--sig-good-soft); border: 1px solid color-mix(in srgb, var(--glow) 46%, transparent); }

.dsolv__scanning { display: inline-flex; align-items: center; gap: .5em; margin-bottom: 12px;
  font: 600 .72rem/1 var(--body); color: var(--ink-2); padding: 6px 11px; border-radius: var(--r-pill);
  background: color-mix(in srgb, var(--bg-2) 50%, transparent); border: 1px solid var(--line-2); }
.dsolv__scanning svg { width: 13px; height: 13px; color: var(--accent-2); flex: none; }
.dsolv__scanning b { color: var(--ink); font-weight: 700; }

.dsolv__grid { position: relative; aspect-ratio: 1 / 1; border-radius: var(--r-control); overflow: hidden;
  background: var(--bg-3); border: 1px solid var(--line-2);
  box-shadow: inset 0 0 60px -20px rgba(0,0,0,.7); }

.dsolv__map { position: absolute; inset: 0; width: 100%; height: 100%; display: block; pointer-events: none; }

.dsolv__grid::before { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 1;
  background: radial-gradient(80% 80% at 50% 46%, transparent 38%, color-mix(in srgb, var(--bg) 64%, transparent) 100%); }

.dsolv__grid::after { content: ""; position: absolute; left: 50%; top: 50%; width: 46%; height: 46%; z-index: 2;
  transform: translate(-50%,-50%); border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--accent) 12%, transparent), transparent 66%);
  border: 1px dashed color-mix(in srgb, var(--accent) 40%, transparent); }
.dsolv__pin { position: absolute; z-index: 3; transform: translate(-50%,-50%); width: 26px; height: 26px;
  display: grid; place-items: center; border-radius: 50% 50% 50% 0; rotate: -45deg;
  font: 800 .68rem/1 var(--font); box-shadow: 0 5px 12px -5px rgba(0,0,0,.7); }
.dsolv__pin span { rotate: 45deg; }
.dsolv__pin.bad  { background: color-mix(in srgb, var(--sig-danger) 72%, var(--bg-3)); color: var(--ink); }
.dsolv__pin.mid  { background: var(--sig-warn); color: var(--on-accent); }
.dsolv__pin.good { background: var(--sig-good); color: var(--on-accent); box-shadow: 0 0 13px -2px color-mix(in srgb, var(--glow) 80%, transparent); }
.dsolv__scan-foot { margin-top: 14px; display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.dsolv__scan-foot .solv { font: 900 1.7rem/1 var(--font); }
.dsolv__scan-foot.before .solv { color: var(--sig-danger-2); }
.dsolv__scan-foot.after  .solv { color: var(--sig-good); }
.dsolv__scan-foot .solv small { font: 600 .64rem/1 var(--body); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); display: block; }
.dsolv__scan-foot .rk { font: 400 .76rem/1.3 var(--body); color: var(--ink-2); text-align: right; }
.dsolv__scan-foot .rk b { color: var(--ink); }
.dsolv__arrow { display: grid; place-items: center; color: var(--accent-2); }
.dsolv__arrow svg { width: 30px; height: 30px; }
.dsolv__url { display: block; margin-top: 12px; font: 400 .66rem/1.3 var(--body); color: var(--ink-3); word-break: break-all; }

.dsolv__cliff { margin-top: clamp(24px, 3vw, 36px); display: grid; grid-template-columns: 1.4fr 1fr; gap: clamp(16px, 2.4vw, 26px); align-items: stretch; }
.dsolv__cliff--even { grid-template-columns: 1fr 1fr; }
.dsolv__cliff-card { padding: clamp(22px, 2.6vw, 30px); }
.dsolv__cliff-card h3 { font: 700 var(--fs-h3)/1.2 var(--font); color: var(--ink); margin: 0 0 4px; }
.dsolv__cliff-card .sub { font: 400 .84rem/1.4 var(--body); color: var(--ink-2); margin: 0 0 18px; }
.dsolv__cols { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; align-items: end; height: 150px; }
.dsolv__col { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; gap: 8px; position: relative; padding-bottom: 30px; }
.dsolv__col .bar { width: 100%; max-width: 52px; border-radius: 8px 8px 0 0; height: 0; flex-shrink: 0;
  background: var(--grad-accent); box-shadow: 0 0 18px -6px color-mix(in srgb, var(--glow) 70%, transparent);
  transition: height 1.1s var(--ease); position: relative; }
.dsolv__col.dead .bar { background: color-mix(in srgb, var(--sig-danger) 70%, transparent); box-shadow: none; }
.dsolv__cliff-card.is-in .dsolv__col .bar { height: calc(var(--h, 4%) * .8); }
.dsolv__col .pct { font: 800 1.05rem/1 var(--font); color: var(--ink); }
.dsolv__col.dead .pct { color: var(--sig-danger-2); }
.dsolv__col .pos { font: 500 .7rem/1.2 var(--body); color: var(--ink-2); text-align: center; position: absolute; left: 0; right: 0; bottom: 0; }
.dsolv__cliff-note { margin-top: 16px; font: 600 .9rem/1.4 var(--body); color: var(--ink); }
.dsolv__cliff-note b { color: var(--accent-2); }
.dsolv__vol { padding: clamp(22px, 2.6vw, 30px); display: flex; flex-direction: column; justify-content: center; text-align: center; }
.dsolv__vol .big { font: 900 clamp(2.4rem,4vw,3.4rem)/.95 var(--font); letter-spacing: -.02em; color: var(--ink);
  background: var(--grad-text); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; }
.dsolv__vol .big .unit { font-size: .34em; -webkit-text-fill-color: var(--accent-2); color: var(--accent-2); display: block; margin-top: 6px; letter-spacing: .08em; }
.dsolv__vol .desc { margin-top: 14px; font: 400 .9rem/1.45 var(--body); color: var(--ink-2); }
.dsolv__vol .desc b { color: var(--ink); }

.dimp { padding-block: var(--pad); }
.dimp .dio__bed img { --bed-pos: 50% 32%; filter: saturate(.58) contrast(1.04) brightness(.42); }
.dimp .container { position: relative; z-index: 1; }

.dimp__hero { display: grid; grid-template-columns: minmax(0,.92fr) minmax(0,1.08fr); gap: clamp(24px,3.4vw,44px);
  align-items: center; padding: clamp(28px,3.2vw,44px); margin-bottom: clamp(20px,2.6vw,30px); }
.dimp__hero-copy .badge { display: inline-flex; align-items: center; gap: .5em; margin-bottom: 16px;
  font: 700 .66rem/1 var(--body); letter-spacing: .14em; text-transform: uppercase; color: var(--accent-2);
  padding: 6px 12px; border-radius: var(--r-pill); background: color-mix(in srgb, var(--accent) 12%, transparent); border: 1px solid var(--line); }
.dimp__hero-copy h3 { font: 800 var(--fs-h3)/1.2 var(--font); color: var(--ink); margin: 0 0 10px; }
.dimp__money { display: flex; align-items: baseline; flex-wrap: wrap; gap: .3em; margin: 0 0 12px;
  font: 900 clamp(2rem,3.4vw,2.9rem)/1 var(--font); letter-spacing: -.02em; color: var(--ink); }
.dimp__money .from { color: var(--ink-2); }
.dimp__money .arr { color: var(--accent-2); font-size: .7em; }
.dimp__money .to { background: var(--grad-text); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; }
.dimp__hero-copy p { font: 400 .92rem/1.55 var(--body); color: var(--ink-2); margin: 0; max-width: 42ch; }
.dimp__hero-copy p b { color: var(--ink); }

.dimp__chart { position: relative; }
.dimp__chart svg { display: block; width: 100%; height: auto; color: var(--glow); }
.dimp__chart .grid line { stroke: var(--line-2); }
.dimp__chart .area { opacity: 0; transition: opacity 3s var(--ease) .3s; }
.dimp__chart .line { fill: none; stroke: currentColor; stroke-width: 3.5; stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 3s var(--ease); }
.dimp__chart .dot { fill: var(--glow); opacity: 0; transition: opacity .5s var(--ease) 2.8s; }
.dimp__chart.is-in .area { opacity: 1; }
.dimp__chart.is-in .line { stroke-dashoffset: 0; }
.dimp__chart.is-in .dot { opacity: 1; }
html:not(.js) .dfcp__gauge .needle, html:not(.js) .dfcp__gauge .hub { display: none; }
html:not(.js) .dfcp__bar .track i { width: var(--w, 0%); }
html:not(.js) .dsolv__col .bar { height: calc(var(--h, 4%) * .8); }
html:not(.js) .dimp__chart .area, html:not(.js) .dimp__chart .dot { opacity: 1; }
html:not(.js) .dimp__chart .line { stroke-dashoffset: 0; }
.dimp__inflect { position: absolute; left: 38%; top: 8%; max-width: 165px;
  font: 700 .68rem/1.25 var(--body); letter-spacing: .04em; text-transform: uppercase; color: var(--accent-2); }
.dimp__inflect::before { content: ""; display: block; width: 1px; height: 30px; margin: 6px 0 0 6px;
  background: linear-gradient(180deg, var(--accent), transparent); }

.dimp__dash { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(14px,2vw,20px); margin-bottom: clamp(20px,2.6vw,30px); }
.dimp__dcard { padding: clamp(18px,2.2vw,26px); text-align: center; }
.dimp__dcard .v { font: 900 clamp(1.6rem,2.4vw,2.1rem)/1 var(--font); color: var(--ink);
  background: var(--grad-text); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; }
.dimp__dcard .k { display: block; margin-top: 8px; font: 600 .76rem/1.3 var(--body); color: var(--ink-2); }

.dimp__sales-eyebrow { display: block; text-align: center; margin-bottom: 16px;
  font: 700 var(--fs-eyebrow)/1 var(--body); letter-spacing: .16em; text-transform: uppercase; color: var(--accent-2); }
.dimp__sales { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(14px,2vw,20px); }
.dimp__sale { margin: 0; width: 100%; padding: clamp(10px,1.1vw,14px); }
.dimp__sale img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; object-position: center;
  border-radius: var(--r-control); display: block; border: 1px solid var(--line-2); }
.dimp__caption { margin-top: clamp(18px,2.2vw,26px); text-align: center; font: 400 .8rem/1.4 var(--body); color: color-mix(in srgb, var(--ink-2) 60%, var(--ink-3)); }

.dshow { padding-block: var(--pad); }
/* Above the section's fades (z-index 2), so the Certified partners panel's shadow runs out over the bottom fade instead of
   being covered by it in a straight line (user, 19 October 2026: "no cropped shadows"); its content never overlaps a fade. */
.dshow .container { position: relative; z-index: 3; }
/* Industry pages, "Websites built to sell" (user, 16 October 2026: "too narrow because we used too many lines, reduce to
   2-3 lines, both header and subtitles"): a wider heading block, so from 1024px the headline sets on 2 lines (was 4)
   and the intro on 2 or 3 even lines, by its length (was 3 to 4, the last often one or two words); balanced, so no
   short last line. Phones and upright tablets are already as wide as the screen allows. */
.dshow.ecosystem-block .s-head { max-width: 1100px; }
.dshow.ecosystem-block .s-head p { max-width: 1000px; text-wrap: balance; }
/* "Websites built to sell" (8 industry pages; padding and heading spacing on Our Story's section too), user, 19 October
   2026: "reduce spaces on top and bottom, just enough space ... so we can still fit it in a single viewport": the light
   section's large top and bottom padding (258px / 224px at 1440) comes down to 56-88px / 80-88px, and from 1024px the
   heading block and the two main browser mockups fit one screen under the fixed header (checked at 1680x810, 1440x900,
   1280x800 and 1024x768 on all 8 pages): a tighter heading block (the heading and intro follow the screen height), and
   flatter mockups (2:1 picture, 3:1 thumbnails, a wider text column, slimmer bars and captions, at most 1060px wide). */
.dio.dshow { padding-top: clamp(56px, 6vw, 88px); padding-bottom: clamp(80px, 5.6vw, 88px); }   /* bottom: the partners panel's shadow reaches 72px, and the section clips */
.dshow .s-head { margin-bottom: 0; }
.dshow .s-head .eyebrow { margin-bottom: 10px; }
.dshow .s-head h2 { font-size: clamp(2rem, min(3.6vw, 5vh), 3.2rem); margin-bottom: 10px; }
.dshow__honest { margin-top: 6px; }
.dshow .dshow__lead { margin-top: clamp(14px, 1.6vw, 20px); }   /* .dshow: beats the base .dshow__lead rule further down */
@media (min-width: 1024px) {
  .dshow .s-head p { font-size: min(var(--fs-lead), max(1rem, 2.3vh)); line-height: 1.45; }
  .dshow__lead { max-width: 1060px; margin-inline: auto; }
  .dshow__lead .bw__view { padding: clamp(12px, 1.4vw, 18px); }
  .dshow__lead .bw__nav { margin-bottom: 10px; }
  .dshow__lead .bw__hero { margin-bottom: 10px; grid-template-columns: 1.25fr .75fr; }
  .dshow__lead .bw__art { aspect-ratio: 2 / 1; }
  .dshow__lead .bw__frame-card .pic { aspect-ratio: 3 / 1; }
  .dshow__lead .dshow__frame-cap { padding-block: 8px; }
  .dshow__lead .bw__bar { padding-block: 7px; }
}
.dshow__honest { display: inline-flex; align-items: center; gap: .6em; margin: 14px auto 0;
  font: 600 .8rem/1.3 var(--body); color: var(--ink-2); padding: 8px 14px; border-radius: var(--r-pill);
  background: color-mix(in srgb, var(--accent) 8%, transparent); border: 1px solid var(--line-2); }
.dshow__honest svg { width: 16px; height: 16px; color: var(--accent); flex: none; }
.dshow__grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: clamp(14px,2vw,22px); margin-top: clamp(34px,4vw,50px); }
.dshow__card { overflow: hidden; padding: 0; display: flex; flex-direction: column; }
.dshow__card.span3 { grid-column: span 3; }
.dshow__card.span2 { grid-column: span 2; }
.dshow__shot { position: relative; aspect-ratio: 16 / 11; overflow: hidden; background: var(--surface-2); }
.dshow__shot img { width: 100%; height: 100%; object-fit: cover; object-position: center top; display: block;
  transition: transform var(--t-slow) var(--ease); }
.dshow__card:hover .dshow__shot img { transform: scale(1.03); }
.dshow__meta { padding: clamp(16px,1.8vw,22px); }
.dshow__meta .t { font: 700 1rem/1.2 var(--font); color: var(--ink); margin: 0 0 4px; }
.dshow__meta .d { font: 400 .82rem/1.45 var(--body); color: var(--ink-2); margin: 0; }
.dshow__tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.dshow__tags span { font: 600 .68rem/1 var(--body); letter-spacing: .04em; padding: 5px 10px; border-radius: var(--r-pill);
  color: var(--accent); background: color-mix(in srgb, var(--accent) 9%, transparent); border: 1px solid var(--line-2); }

.dshow__lead { display: grid; grid-template-columns: 1.18fr .82fr; gap: clamp(16px,2.2vw,26px); margin-top: clamp(30px,3.6vw,46px); }
.dshow__frame { border-radius: var(--r-control); overflow: hidden; border: 1px solid var(--line-2);
  background: var(--surface); box-shadow: var(--shadow-elev); display: flex; flex-direction: column; }

.bw__bar { display: flex; align-items: center; gap: 10px; padding: 9px 12px;
  background: var(--surface-2); border-bottom: 1px solid var(--line-2); }
.bw__dots { display: inline-flex; gap: 6px; flex: none; }
.bw__dots i { width: 10px; height: 10px; border-radius: 50%; background: color-mix(in srgb, var(--ink-3) 40%, transparent); }
.bw__dots i:nth-child(1) { background: color-mix(in srgb, var(--sig-danger) 70%, var(--ink-3)); }
.bw__dots i:nth-child(2) { background: color-mix(in srgb, var(--sig-warn) 70%, var(--ink-3)); }
.bw__dots i:nth-child(3) { background: color-mix(in srgb, var(--sig-good) 70%, var(--ink-3)); }
.bw__url { flex: 1; display: flex; align-items: center; gap: .5em; min-width: 0;
  padding: 5px 12px; border-radius: var(--r-pill); background: var(--surface);
  border: 1px solid var(--line-2); font: 500 .72rem/1 var(--body); color: var(--ink-2); }
.bw__url svg { width: 11px; height: 11px; color: var(--accent); flex: none; }
.bw__url span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bw__view { position: relative; flex: 1; padding: clamp(16px,1.9vw,24px); background:
    radial-gradient(120% 90% at 88% -10%, color-mix(in srgb, var(--accent) 9%, transparent), transparent 56%),
    var(--surface); }

.bw__nav { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: clamp(14px,1.8vw,20px); }
.bw__brand { display: inline-flex; align-items: center; gap: .5em; font: 800 .9rem/1 var(--font); color: var(--ink); }
.bw__brand i { width: 18px; height: 18px; border-radius: 50%; flex: none; display: grid; place-items: center;
  background: var(--grad-accent); color: var(--cta-ink); }
.bw__brand i svg { width: 11px; height: 11px; }
.bw__navlinks { display: inline-flex; gap: 14px; font: 600 .62rem/1 var(--body); color: var(--ink-3); }
.bw__navcta { font: 700 .58rem/1 var(--body); padding: 5px 9px; border-radius: var(--r-pill);
  color: var(--cta-ink); background: var(--grad-accent); }

.bw__hero { display: grid; grid-template-columns: 1.1fr .9fr; gap: 14px; align-items: center; margin-bottom: clamp(14px,1.8vw,20px); }
.bw__hero .eye { font: 700 .56rem/1 var(--body); letter-spacing: .14em; text-transform: uppercase; color: color-mix(in srgb, var(--accent) 70%, var(--ink)); margin-bottom: 8px; display: block; }
.bw__hero h4 { font: 800 clamp(1rem,1.6vw,1.35rem)/1.08 var(--font); letter-spacing: -.01em; color: var(--ink); margin: 0 0 8px; }
.bw__hero p { font: 400 .68rem/1.4 var(--body); color: color-mix(in srgb, var(--ink-2) 70%, var(--ink)); margin: 0 0 12px; }
.bw__hero .cta { display: inline-flex; align-items: center; gap: .4em; font: 700 .64rem/1 var(--body);
  padding: 8px 13px; border-radius: var(--r-pill); color: var(--cta-ink); background: var(--grad-accent); }
.bw__hero .cta svg { width: 11px; height: 11px; }

.bw__art { aspect-ratio: 4 / 3; border-radius: var(--r-control); overflow: hidden;
  background: radial-gradient(80% 80% at 60% 30%, color-mix(in srgb, var(--accent) 16%, transparent), color-mix(in srgb, var(--bg-2) 18%, transparent) 70%, transparent),
    var(--surface-2); display: grid; place-items: center; border: 1px solid var(--line-2); }
.bw__art svg { width: 64%; height: auto; color: var(--accent); }

.bw__shoplabel { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.bw__shoplabel b { font: 700 .72rem/1 var(--font); color: var(--ink); }
.bw__shoplabel span { font: 600 .58rem/1 var(--body); color: var(--accent); }
.bw__frames { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.bw__frame-card { border-radius: 10px; overflow: hidden; border: 1px solid var(--line-2); background: var(--surface); }
.bw__frame-card .pic { aspect-ratio: 5 / 4; display: grid; place-items: center; background: var(--surface-2); border-bottom: 1px solid var(--line-2); }
.bw__frame-card .pic svg { width: 64%; color: var(--ink-2); }
.bw__frame-card .px { display: flex; align-items: center; justify-content: space-between; gap: 4px; padding: 6px 7px; }
.bw__frame-card .px b { font: 700 .58rem/1 var(--font); color: var(--ink); }
.bw__frame-card .px .chip { font: 700 .5rem/1 var(--body); padding: 3px 6px; border-radius: var(--r-pill);
  color: var(--accent); background: color-mix(in srgb, var(--accent) 11%, transparent); }

.dshow__frame-cap { padding: 14px clamp(14px,1.6vw,18px); border-top: 1px solid var(--line-2); background: var(--surface-2); }
.dshow__frame-cap .t { font: 700 .92rem/1.2 var(--font); color: var(--ink); margin: 0 0 3px; }
.dshow__frame-cap .d { font: 400 .76rem/1.4 var(--body); color: var(--ink-2); margin: 0; }

.dshow__frame--book .bw__view { display: flex; flex-direction: column; }
.dshow__frame--book .bw__bookcard { margin-top: auto; padding: 12px; border-radius: var(--r-control);
  background: var(--surface-2); border: 1px solid var(--line-2); }
.dshow__frame--book .bw__bookcard .row { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; font: 600 .64rem/1 var(--body); color: var(--ink-2); }
.dshow__frame--book .bw__bookcard .row svg { width: 12px; height: 12px; color: var(--accent); flex: none; }
.dshow__frame--book .bw__bookcard .row b { color: var(--ink); font-weight: 700; }
.dshow__frame--book .bw__bookcard .book { display: block; text-align: center; font: 700 .66rem/1 var(--body);
  padding: 9px; border-radius: var(--r-pill); color: var(--cta-ink); background: var(--grad-accent); margin-top: 4px; }

.dshow__support { margin-top: clamp(26px,3.4vw,42px); }
.dshow__support-lbl { display: block; text-align: center; font: 600 .8rem/1.4 var(--body); color: color-mix(in srgb, var(--ink-2) 60%, var(--ink)); margin-bottom: 20px; }
.dshow__support-lbl b { color: var(--ink); }
.dshow__support-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(16px,2vw,24px); align-items: stretch; }

.dshow__support-grid .dshow__frame { height: 100%; }
.dshow__mini { display: grid; gap: 12px; }
.dshow__mini .row { display: flex; align-items: center; gap: 10px; }
.dshow__mini .ico { width: 30px; height: 30px; flex: none; display: grid; place-items: center; border-radius: 9px;
  background: color-mix(in srgb, var(--fr-accent, var(--accent)) 16%, transparent);
  border: 1px solid color-mix(in srgb, var(--fr-accent, var(--accent)) 30%, transparent);
  color: var(--fr-accent, var(--accent)); }
.dshow__mini .ico svg { width: 17px; height: 17px; }
.dshow__mini .row .tx { display: grid; gap: 2px; }
.dshow__mini .row .tx b { font: 700 .7rem/1.1 var(--font); color: var(--ink); }
.dshow__mini .row .tx span { font: 500 .6rem/1.2 var(--body); color: var(--ink-2); }
.dshow__mini .pill { display: inline-flex; align-items: center; gap: .4em; align-self: start; margin-top: 2px;
  font: 700 .56rem/1 var(--body); letter-spacing: .04em; padding: 6px 10px; border-radius: var(--r-pill);
  color: var(--fr-on, var(--cta-ink)); background: var(--fr-accent, var(--accent)); }

.dshow__frame--dental  { --fr-accent: color-mix(in srgb, var(--gold) 78%, var(--ink)); --fr-on: var(--bg-3);
  --fr-tint: color-mix(in srgb, var(--gold) 12%, var(--surface)); }
.dshow__frame--medspa  { --fr-accent: color-mix(in srgb, var(--sig-danger) 44%, var(--accent-2)); --fr-on: var(--bg-3);
  --fr-tint: color-mix(in srgb, var(--sig-danger) 12%, var(--surface)); }
.dshow__frame--clinic  { --fr-accent: var(--accent); --fr-on: var(--bg-3);
  --fr-tint: color-mix(in srgb, var(--accent) 10%, var(--surface)); }
.dshow__frame--dental .bw__view,
.dshow__frame--medspa .bw__view,
.dshow__frame--clinic .bw__view { background:
    radial-gradient(120% 90% at 88% -10%, color-mix(in srgb, var(--fr-accent) 12%, transparent), transparent 56%),
    var(--fr-tint); }
.dshow__frame--dental .bw__brand i,
.dshow__frame--medspa .bw__brand i,
.dshow__frame--clinic .bw__brand i { background: var(--fr-accent); color: var(--fr-on); }
.dshow__frame--dental .bw__navcta,
.dshow__frame--medspa .bw__navcta,
.dshow__frame--clinic .bw__navcta,
.dshow__frame--dental .bw__hero .cta,
.dshow__frame--medspa .bw__hero .cta,
.dshow__frame--clinic .bw__hero .cta { background: var(--fr-accent); color: var(--fr-on); }
.dshow__frame--dental .bw__hero .eye,
.dshow__frame--medspa .bw__hero .eye,
.dshow__frame--clinic .bw__hero .eye { color: color-mix(in srgb, var(--fr-accent) 65%, var(--ink)); }
.dshow__frame--dental .bw__art,
.dshow__frame--medspa .bw__art,
.dshow__frame--clinic .bw__art { background:
    radial-gradient(80% 80% at 60% 30%, color-mix(in srgb, var(--fr-accent) 18%, transparent), color-mix(in srgb, var(--bg-2) 16%, transparent) 70%, transparent),
    var(--surface-2); }
.dshow__frame--dental .bw__art svg,
.dshow__frame--medspa .bw__art svg,
.dshow__frame--clinic .bw__art svg { color: var(--fr-accent); }

.dshow__trust { margin-top: clamp(34px,4vw,52px); padding: clamp(28px,3.2vw,40px); text-align: center; }
.dshow__trust .lbl { font: 700 var(--fs-eyebrow)/1 var(--body); letter-spacing: .18em; text-transform: uppercase; color: var(--ink-2); margin-bottom: clamp(20px,2.4vw,28px); display: block; }
.dshow__logos { display: flex; flex-wrap: wrap; justify-content: center; align-items: stretch;
  gap: clamp(12px,1.6vw,20px); margin: 0 auto; max-width: 900px; }
/* The logos stand on the panel without cards (user, 19 October 2026: "remove the borders or cards for each logo"):
   still dark grey, in colour on hover. */
.dshow__logo-card { flex: 1 1 152px; max-width: 188px; min-width: 132px;
  display: grid; place-items: center; padding: clamp(10px,1.2vw,14px) clamp(12px,1.6vw,20px); }
/* phones: each logo at its own width, so two or three share a row instead of one each */
@media (max-width: 599px) {
  .dshow__logos { gap: 14px 22px; }
  .dshow__logo-card { flex: 0 0 auto; min-width: 0; max-width: none; padding: 6px 4px; }
}

.dshow__logo-card img { height: clamp(32px,4vw,46px); width: auto; max-width: 100%; object-fit: contain;
  display: block; filter: grayscale(1) brightness(.36) contrast(1.08); opacity: .95;
  transition: filter var(--t-base) var(--ease), opacity var(--t-base) var(--ease); }
.dshow__logo-card:hover img { filter: grayscale(0) brightness(1) contrast(1); opacity: 1; }
.dshow__trust .credo { margin-top: clamp(20px,2.4vw,26px); font: 500 .86rem/1.4 var(--body); color: var(--ink-2); }
.dshow__trust .credo b { color: var(--ink); }

.ddiff { padding-block: var(--pad); }
.ddiff .container { position: relative; z-index: 1; }
.ddiff__plate { padding: clamp(30px, 3.4vw, 48px); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(28px, 3.4vw, 48px); align-items: stretch; }
.ddiff__copy .eyebrow { margin-bottom: 16px; }
.ddiff__copy h2 { font: 800 var(--fs-h2)/1.05 var(--font); letter-spacing: -.02em; color: var(--ink); margin: 0 0 16px; }
.ddiff__copy h2 .accent { color: var(--accent-2); }
.ddiff__copy > p { font: 400 var(--fs-body)/1.6 var(--body); color: var(--ink-2); margin: 0 0 22px; max-width: 50ch; }
.ddiff__copy > p b { color: var(--ink); }
/* Industry pages and Our Story (user, 19 October 2026, Medi Spa: "make this look more compact"): the eyebrow and
   heading sit in a row across the plate (.ddiff__head), so the long heading sets on 2 lines instead of 5; below it the
   copy and software cards on the left and the guarantees on the right come out about the same height. Home and The
   2-KPI Method keep the heading in the copy column (theirs is short, and a row would make them taller). */
.ddiff__head .eyebrow { margin-bottom: 16px; }
.ddiff__head h2 { font: 800 var(--fs-h2)/1.05 var(--font); letter-spacing: -.02em; color: var(--ink); margin: 0; }
.ddiff__head h2 .accent { color: var(--accent-2); }
@media (max-width: 1023px) {
  .ddiff__head { margin-bottom: calc(16px - clamp(28px, 3.4vw, 48px)); }   /* stacked: 16px to the copy, as before */
}
@media (min-width: 1024px) {
  .ddiff__plate:has(> .ddiff__head) { grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); row-gap: clamp(24px, 2.6vw, 34px); }
  .ddiff__head { grid-column: 1 / -1; max-width: 1000px; }
  .ddiff__head h2 { font-size: clamp(2.2rem, 3.6vw, 3.2rem); text-wrap: balance; }
}
.ddiff__stack { display: grid; gap: 10px; margin-bottom: 18px; }
.ddiff__sw { display: grid; grid-template-columns: 36px 1fr; gap: 12px; align-items: center;
  padding: 11px 14px; border-radius: var(--r-control);
  background: color-mix(in srgb, var(--bg-2) 40%, transparent); border: 1px solid var(--line); }
.ddiff__sw-ico { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 10px;
  background: color-mix(in srgb, var(--accent) 13%, transparent); border: 1px solid color-mix(in srgb, var(--accent) 26%, transparent); color: var(--accent-2); }
.ddiff__sw-ico svg { width: 20px; height: 20px; }
.ddiff__sw .nm { font: 700 .98rem/1.2 var(--font); color: var(--ink); }
.ddiff__sw .ds { display: block; margin-top: 2px; font: 400 .82rem/1.4 var(--body); color: var(--ink-2); }
.ddiff__replace { font: 600 .9rem/1.45 var(--body); color: var(--ink); }
.ddiff__replace b { color: var(--accent-2); }

.ddiff__guar { padding: clamp(24px, 2.8vw, 34px); border-radius: var(--r-surface);
  background: color-mix(in srgb, var(--bg-3) 50%, transparent); border: 1px solid var(--line);
  display: flex; flex-direction: column; }
.ddiff__seal { width: 52px; height: 52px; display: grid; place-items: center; border-radius: 50%;
  color: var(--glow); background: color-mix(in srgb, var(--accent) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--glow) 46%, transparent); box-shadow: var(--inset-hi); margin-bottom: 18px; }
.ddiff__seal svg { width: 27px; height: 27px; }
.ddiff__guar h3 { font: 800 clamp(1.4rem, 2.2vw, 1.9rem)/1.15 var(--font); letter-spacing: -.01em; color: var(--ink); margin: 0 0 18px; }
.ddiff__guar h3 .accent { color: var(--accent-2); }
.ddiff__badges { display: grid; gap: 12px; }
.ddiff__badge { display: grid; grid-template-columns: 24px 1fr; gap: 12px; align-items: center;
  padding: 13px 15px; border-radius: var(--r-control);
  background: color-mix(in srgb, var(--accent) 9%, transparent); border: 1px solid var(--line); }
.ddiff__badge svg { width: 22px; height: 22px; color: var(--glow); }
.ddiff__badge b { font: 700 .92rem/1.2 var(--font); color: var(--ink); }

.ddiff__emblem { margin-top: clamp(20px,2.4vw,28px); padding: clamp(20px,2.4vw,28px) clamp(18px,2vw,24px);
  display: grid; grid-template-columns: auto 1fr; gap: clamp(16px,2vw,22px); align-items: center;
  border-radius: var(--r-surface); position: relative; overflow: hidden;
  background:
    radial-gradient(120% 140% at 12% 0%, color-mix(in srgb, var(--glow) 10%, transparent), transparent 58%),
    color-mix(in srgb, var(--bg-3) 60%, transparent);
  border: 1px solid color-mix(in srgb, var(--glow) 28%, var(--line));
  box-shadow: var(--inset-hi), 0 18px 44px -26px rgba(0,0,0,.6); }

.ddiff__emblem::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(105deg, transparent 38%, color-mix(in srgb, var(--glow) 22%, transparent) 50%, transparent 62%);
  transform: translateX(-130%); }
.ddiff__plate.in .ddiff__emblem::after { animation: ddiff-shine 2.6s var(--ease) .6s 1; }
@keyframes ddiff-shine { to { transform: translateX(130%); } }

.ddiff__stamp { position: relative; width: clamp(78px,9vw,94px); height: clamp(78px,9vw,94px); flex: none;
  display: grid; place-items: center; }
.ddiff__stamp .ring { position: absolute; inset: 0; }
.ddiff__stamp .ring svg { width: 100%; height: 100%; display: block;
  animation: ddiff-rotate 26s linear infinite; transform-origin: 50% 50%; }
.ddiff__stamp .ring--type text { fill: var(--accent-2);
  font: 700 8.4px/1 var(--body); letter-spacing: .14em; text-transform: uppercase; }
.ddiff__stamp .ring--type circle { fill: none; stroke: color-mix(in srgb, var(--glow) 36%, transparent); stroke-width: 1; }
.ddiff__stamp .core { position: relative; width: 56%; height: 56%; border-radius: 50%; display: grid; place-items: center;
  color: var(--glow); background: color-mix(in srgb, var(--accent) 16%, transparent);
  border: 1px solid color-mix(in srgb, var(--glow) 50%, transparent); box-shadow: var(--inset-hi); }
.ddiff__stamp .core svg { width: 54%; height: 54%; }
@keyframes ddiff-rotate { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .ddiff__stamp .ring svg { animation: none; }
  .ddiff__plate.in .ddiff__emblem::after { animation: none; }
}
.ddiff__emblem-tx { display: grid; gap: 6px; }
.ddiff__emblem-tx .h { font: 800 1rem/1.18 var(--font); letter-spacing: -.01em; color: var(--ink); }
.ddiff__emblem-tx .h b { color: var(--accent-2); }
.ddiff__emblem-tx .p { font: 400 .8rem/1.42 var(--body); color: var(--ink-2); }

.ddiff__sign { margin-top: 6px; padding-top: 10px; border-top: 1px solid var(--line); display: grid; gap: 4px; }
.ddiff__sign svg { width: clamp(110px,14vw,150px); height: auto; color: var(--accent-2); }
.ddiff__sign .lbl { font: 600 .56rem/1 var(--body); letter-spacing: .16em; text-transform: uppercase; color: var(--ink-3); }
.ddiff__guar .risk { margin-top: auto; padding-top: 16px; font: 500 .82rem/1.4 var(--body); color: var(--ink-2); }
.ddiff__guar--plain { justify-content: center; }
/* Its height is its content's, centred beside the copy (user, 19 October 2026, Medi Spa: "too much space on both top
   and bottom ... more sleek without changing the general layout"): it stretched to the copy's height, 911px for 447px
   of content on the industry pages. */
.ddiff__plate > .ddiff__guar--plain { align-self: center; }
/* The full guarantee panel (Optometry: seal, four guarantees, the signed emblem). Optometry keeps its heading in the
   copy column (user, 19 October 2026: "revert specifically for this ... but retain it being in a single viewport"):
   from 1024px the plate fits one screen under the fixed header (682px tall in a 1680x810 window, 679px at 1024x768):
   a wider copy column with a smaller balanced heading (3 lines, was 5), and tighter spacing in the panel. */
@media (min-width: 1024px) {
  .ddiff__plate:has(> .ddiff__guar:not(.ddiff__guar--plain)) {
    grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr);
    padding: clamp(24px, 3.4vh, 40px) clamp(28px, 3vw, 44px); gap: clamp(24px, 3vw, 40px); }
  .ddiff__plate:has(> .ddiff__guar:not(.ddiff__guar--plain)) .ddiff__copy h2 { font-size: clamp(2rem, min(3.1vw, 5.2vh), 2.9rem); line-height: 1.04; margin-bottom: 12px; text-wrap: balance; }
  .ddiff__plate:has(> .ddiff__guar:not(.ddiff__guar--plain)) .ddiff__copy .eyebrow { margin-bottom: 12px; }
  .ddiff__plate:has(> .ddiff__guar:not(.ddiff__guar--plain)) .ddiff__copy > p { margin-bottom: 14px; }
  .ddiff__plate:has(> .ddiff__guar:not(.ddiff__guar--plain)) .ddiff__stack { margin-bottom: 12px; gap: 8px; }
  .ddiff__plate:has(> .ddiff__guar:not(.ddiff__guar--plain)) .ddiff__sw { padding-block: 9px; }
  .ddiff__guar:not(.ddiff__guar--plain) { padding: clamp(18px, 2.6vh, 28px) clamp(20px, 2.2vw, 28px); }
  .ddiff__guar:not(.ddiff__guar--plain) .ddiff__seal { width: 42px; height: 42px; margin-bottom: 12px; }
  .ddiff__guar:not(.ddiff__guar--plain) .ddiff__seal svg { width: 22px; height: 22px; }
  .ddiff__guar:not(.ddiff__guar--plain) h3 { font-size: clamp(1.3rem, 1.9vw, 1.6rem); margin-bottom: 12px; }
  .ddiff__guar:not(.ddiff__guar--plain) .ddiff__badges { gap: 8px; }
  .ddiff__guar:not(.ddiff__guar--plain) .ddiff__badge { padding: 9px 14px; }
  .ddiff__guar:not(.ddiff__guar--plain) .ddiff__emblem { margin-top: 14px; padding: 14px 18px; }
  .ddiff__guar:not(.ddiff__guar--plain) .ddiff__stamp { width: 74px; height: 74px; }
  .ddiff__guar:not(.ddiff__guar--plain) .risk { padding-top: 12px; }
}
.ddiff__guar--plain .risk { margin-top: 0; }
.ddiff__guar .risk b { color: var(--accent-2); }

/* FAQ (user, 16 October 2026, option C of three: "for FAQs lets go with C"): no cards; every question is a row between
   hairlines, numbered 01, 02 ... in teal (a CSS counter, so each FAQ numbers its own questions), in a wider column; the
   answer lines up under the question text. All 9 FAQs share it (the 8 industry pages and The 2-KPI Method). The items
   keep their .glass class in the markup; the card look (ground, border, shadow, sheen) is taken off here. */
.df { padding-block: var(--pad); }
.df .container { max-width: 1040px; position: relative; z-index: 1; }
.df__head { text-align: center; margin-bottom: clamp(30px, 4vw, 46px); }
.df__head .eyebrow { justify-content: center; margin-bottom: 16px; }
.df__head h2 { font: 800 var(--fs-h2)/1.05 var(--font); letter-spacing: -.02em; color: var(--ink); margin: 0; }
.df__list { display: grid; counter-reset: faq; border-top: 1px solid var(--line); }
.df .df__item.glass { counter-increment: faq; padding: 0; overflow: visible; background: none; border: 0;
  border-bottom: 1px solid var(--line); border-radius: 0; box-shadow: none; }
.df .df__item.glass::before { content: none; }
.df__q { width: 100%; display: flex; align-items: center; justify-content: flex-start; gap: 18px;
  padding: clamp(18px, 2vw, 26px) 2px; background: transparent; border: 0; cursor: pointer; text-align: left;
  font: 700 clamp(1.05rem, .4vw + .98rem, 1.25rem)/1.35 var(--font); color: var(--ink);
  transition: color var(--t-fast) var(--ease); }
.df__q::before { content: counter(faq, decimal-leading-zero); flex: none; width: clamp(40px, 5vw, 64px);
  font: 800 clamp(1.3rem, 2vw, 1.7rem)/1 var(--font); letter-spacing: -.02em; color: var(--accent); }
.df__q:hover { color: var(--accent-2); }
.df__icon { flex: none; margin-left: auto; width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%;
  border: 1px solid var(--line); color: var(--accent-2); position: relative;
  transition: background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), transform var(--t-base) var(--ease); }
.df__icon::before, .df__icon::after { content: ""; position: absolute; background: currentColor; border-radius: 2px; }
.df__icon::before { width: 12px; height: 2px; }
.df__icon::after { width: 2px; height: 12px; transition: transform var(--t-base) var(--ease); }
.df__q[aria-expanded="true"] .df__icon { background: color-mix(in srgb, var(--accent) 16%, transparent); border-color: color-mix(in srgb, var(--glow) 46%, transparent); }
.df__q[aria-expanded="true"] .df__icon::after { transform: scaleY(0); }
.df__a { display: grid; grid-template-rows: 1fr; transition: grid-template-rows var(--t-base) var(--ease); }
.js .df__a { grid-template-rows: 0fr; }
.df__a-inner { overflow: hidden; }
.df__a p { margin: 0; padding: 0 48px clamp(20px, 2.2vw, 26px) calc(clamp(40px, 5vw, 64px) + 20px);
  font: 400 var(--fs-body)/1.6 var(--body); color: var(--ink-2); max-width: 64ch; }
.df__a p a { color: var(--accent-2); }
.df__item.open .df__a { grid-template-rows: 1fr; }

.dpf { padding-block: var(--pad); }
.dpf .dio__darkbed { --dark-bloom: 50% 4%; }
.dpf .container { position: relative; z-index: 1; }
/* Clean edges (owner, 9 October 2026: "awkward crop ... clean and seamless even when scrolling").
   Top: the glow box starts --glow-top (8%) above the section and the section clips it, which cut the glow off
   in a straight line along the top edge. A mask fades the glow to nothing exactly at the section's top edge
   (--glow-top over the glow's 70% height, from the top of the glow box) and back to full by its centre.
   Bottom: this section is see-through (dio--blend) over the fixed page background, so the line where the
   solid section after it begins changed with the scroll position. That section now starts see-through and
   fades into its own background over --join, so both sides of the line show the same page background (the
   seamless dark joins below, which now do this at every join between dark sections). */
/* No clip on this section: the cards' drop shadows run past its bottom edge (the compact layout below leaves
   little room under them), and a clip cut them off in a line. Unclipped, the shadow tails continue into the
   next section's see-through top and fade there; the glow is masked to nothing above this section's top. */
.dio.dpf { overflow: visible; }
.dpf .dio__glow {
  -webkit-mask-image: linear-gradient(180deg, transparent calc(var(--glow-top, -8%) * -100 / 70), var(--bg) 34%);
          mask-image: linear-gradient(180deg, transparent calc(var(--glow-top, -8%) * -100 / 70), var(--bg) 34%);
}
/* Seamless joins between dark sections. First below pricing (owner, 9 October 2026, above), then Home's "Impact
   from Google" into "Our guarantee" (user, 16 October 2026: "make this transition look seamless"), now at every such
   join (user, 16 October 2026, on the dental page's "Share of Local Visibility" into "Impact from Google": "ensure
   transitions like this will look seamless"). A see-through section (dio--blend) shows the fixed page background, so
   where it met a solid section the line moved with the scroll; two solid sections met in a step between their
   grounds. A solid dark section now fades its ground, and its picture layers with it, to see-through over --join
   along every edge it shares with another dark section: in at the top (--fade-t), out at the foot (--fade-b), each
   at most half its height. Both sides of the line then show the same page background at any scroll position.
   Left as they are: the "As seen on" band (its hairlines are the design), the full-bleed photo heroes (they meet
   that band, or on The 2-KPI Method a teal section built to join them, .dkpi--a-teal) and the footer's top rule.
   Lines drawn on purpose stay: the rules (.dio__rule) and the tapered hairline under Home's numbers are not
   layers. The glow box starts --glow-top above the section, so its fade starts at the section's edge, not the
   box's; it ends well above the foot, so it needs none there. */
.dio { --join: clamp(110px, 12vw, 180px); --join-bg: var(--bg-3); --fade-t: 0px; --fade-b: 0px; }
.dio--dark, .hv2-typographic { --join-bg: var(--bg); }
.dio:not(.dio--light, .dpress--ticker, .hv2--bleed) + .dio:not(.dio--light, .dio--blend, .dpress--ticker, .hv2--bleed) { --fade-t: min(var(--join), 50%); }
.dio:not(.dio--light, .dio--blend, .dpress--ticker, .hv2--bleed):has(+ .dio:not(.dio--light, .dpress--ticker, .hv2--bleed)) { --fade-b: min(var(--join), 50%); }
.dio:not(.dio--light, .dpress--ticker, .hv2--bleed) + .dio:not(.dio--light, .dio--blend, .dpress--ticker, .hv2--bleed),
.dio:not(.dio--light, .dio--blend, .dpress--ticker, .hv2--bleed):has(+ .dio:not(.dio--light, .dpress--ticker, .hv2--bleed)) {
  background: linear-gradient(180deg, transparent, var(--join-bg) var(--fade-t), var(--join-bg) calc(100% - var(--fade-b)), transparent);
}
:is(.dio:not(.dio--light, .dpress--ticker, .hv2--bleed) + .dio:not(.dio--light, .dio--blend, .dpress--ticker, .hv2--bleed), .dio:not(.dio--light, .dio--blend, .dpress--ticker, .hv2--bleed):has(+ .dio:not(.dio--light, .dpress--ticker, .hv2--bleed)))
  > :is(.dio__bed, .dio__grade, .dio__seam, .dio__darkbed, .hv2-ground, .hv2-bloom, .hv2-vignette, .hv2-grain) {
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 var(--fade-t), #000 calc(100% - var(--fade-b)), transparent);
          mask-image: linear-gradient(180deg, transparent, #000 var(--fade-t), #000 calc(100% - var(--fade-b)), transparent);
}
.dio:not(.dio--light, .dpress--ticker, .hv2--bleed) + .dio:not(.dio--light, .dio--blend, .dpress--ticker, .hv2--bleed) > .dio__glow {
  --glow-edge: calc(var(--glow-top, -8%) * -100 / 70);
  -webkit-mask-image: linear-gradient(180deg, transparent var(--glow-edge), #000 calc(var(--glow-edge) + var(--fade-t)));
          mask-image: linear-gradient(180deg, transparent var(--glow-edge), #000 calc(var(--glow-edge) + var(--fade-t)));
}
.dpf__head { text-align: center; max-width: 680px; margin: 0 auto clamp(34px, 4.6vw, 52px); }
.dpf__head .eyebrow { justify-content: center; margin-bottom: 16px; }
.dpf__head h2 { font: 800 var(--fs-h2)/1.05 var(--font); letter-spacing: -.02em; color: var(--ink); margin: 0 0 14px; }
.dpf__head h2 .grad { background: var(--grad-text); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; }
.dpf__head p { font: 400 var(--fs-lead)/1.55 var(--body); color: var(--ink-2); }
.dpf__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(18px, 2.4vw, 26px); align-items: stretch; max-width: 920px; margin: 0 auto; }
.dpf__card { padding: clamp(28px, 2.8vw, 38px); display: flex; flex-direction: column; }
.dpf__card.featured { border-color: color-mix(in srgb, var(--glow) 40%, transparent);
  box-shadow: var(--shadow-elev), 0 0 50px -16px color-mix(in srgb, var(--glow) 60%, transparent), var(--inset-hi); }

.dpf__ribbon { align-self: flex-start; margin-bottom: 16px; padding: 6px 12px; border-radius: var(--r-pill);
  font: 700 .64rem/1 var(--body); letter-spacing: .1em; text-transform: uppercase;
  color: var(--cta-ink); background: var(--grad-accent); }
.dpf__ribbon-spacer { height: calc(.64rem + 12px); margin-bottom: 16px; }
.dpf__tier { font: 700 .8rem/1 var(--font); letter-spacing: .12em; text-transform: uppercase; color: var(--accent-2); margin: 0 0 12px; }

.dpf__amt { display: flex; flex-direction: column; gap: 6px; margin: 0 0 6px; }
.dpf__amt .from { font: 600 .72rem/1 var(--body); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); }
.dpf__amt .price { display: flex; align-items: baseline; gap: .14em; font: 900 2.7rem/1 var(--font); letter-spacing: -.02em; color: var(--ink); }
.dpf__amt .price small { font: 500 1rem/1 var(--body); color: var(--ink-2); }
.dpf__per { font: 400 .82rem/1.3 var(--body); color: color-mix(in srgb, var(--ink-2) 60%, var(--ink-3)); margin: 0 0 16px; }
.dpf__blurb { font: 400 .92rem/1.5 var(--body); color: var(--ink-2); margin: 0 0 20px; padding-bottom: 20px; border-bottom: 1px solid var(--divider); }
.dpf__feats { list-style: none; margin: 0 0 26px; padding: 0; display: grid; gap: 13px; }
.dpf__feats li { display: grid; grid-template-columns: 22px 1fr; gap: 12px; align-items: start;
  font: 400 .9rem/1.45 var(--body); color: var(--ink-2); }
.dpf__feats li svg { width: 18px; height: 18px; margin-top: 2px; color: var(--accent-2); flex: none; }
.dpf__card .btn { margin-top: auto; justify-content: center; }
.dpf__foot { display: flex; justify-content: center; flex-wrap: wrap; gap: 10px 26px; margin-top: clamp(24px, 3vw, 36px); }
.dpf__foot span { display: inline-flex; align-items: center; gap: .5em; font: 500 .82rem/1.2 var(--body); color: var(--ink-2); }
.dpf__foot span::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }

/* Compact pricing (owner, 9 October 2026: "fit in a single viewport ... look sleeker"). From 1024px wide:
   the heading splits (eyebrow and title left, intro right, bottom-aligned, as in the FCP section); the cards
   take the full container width and share their rows (subgrid), so name, price, blurb, list and button line
   up across both plans; the ribbon sits on the name's row (no spacer on Plus) and "+ per location" beside the
   price; vertical sizes follow the screen height. Tablets in portrait and phones keep the stacked cards. */
.dpf .dio__glow {
  /* the glow's centre sits mid-box (at the same place on the page as before: --glow-right moves the box), so
     the gradient fades out inside the box instead of being cut by the box's right edge */
  --glow-right: 18%;
  background: radial-gradient(50% 50% at 50% 30%,
              color-mix(in srgb, var(--glow) 20%, transparent),
              color-mix(in srgb, var(--accent) 7%, transparent) 46%, transparent 72%);
}
/* the spacer only lined Plus up with Pro's ribbon; the cards now share rows (wide) or stack (narrow), so it goes */
.dpf__ribbon-spacer { display: none; }
@media (min-width: 1024px) {
  .dio.dpf { padding-block: clamp(18px, 3.4vh, 72px); }
  .dpf__head {
    /* the title column is the wider one: the industry pages' "Transparent pricing." needs it on one line in every engine */
    display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); column-gap: clamp(32px, 5vw, 80px);
    align-items: end; max-width: none; margin: 0 0 clamp(14px, 2.8vh, 40px); text-align: left;
  }
  .dpf__head .eyebrow { grid-column: 1; grid-row: 1; justify-content: flex-start; justify-self: start; margin-bottom: clamp(8px, 1.4vh, 16px); }
  .dpf__head h2 { grid-column: 1; grid-row: 2; margin: 0; font-size: clamp(2.1rem, min(4.2vw, 6vh), 3.4rem); }
  .dpf__head p { grid-column: 2; grid-row: 1 / span 2; margin: 0; padding-bottom: .3em; max-width: 52ch;
    font-size: min(var(--fs-lead), max(1.125rem, 2.4vh)); }

  .dpf__grid { max-width: none; grid-template-rows: repeat(5, auto); column-gap: clamp(16px, 2vw, 26px); row-gap: 0; }
  .dpf__card {
    display: grid; grid-row: span 5; grid-template-rows: subgrid; grid-template-columns: auto minmax(0, 1fr);
    column-gap: 14px; align-items: start;
    padding: clamp(16px, 2.6vh, 34px) clamp(22px, 2.4vw, 36px) clamp(16px, 2.6vh, 32px);
  }
  .dpf__tier { grid-row: 1; grid-column: 1; align-self: center; margin: 0 0 clamp(8px, 1.5vh, 16px); }
  .dpf__ribbon { grid-row: 1; grid-column: 2; justify-self: end; align-self: center; margin: 0 0 clamp(8px, 1.5vh, 16px); }
  .dpf__amt { grid-row: 2; grid-column: 1; gap: 5px; margin: 0; }
  .dpf__amt .price { font-size: clamp(2.2rem, min(3.4vw, 5.4vh), 2.7rem); }
  .dpf__per { grid-row: 2; grid-column: 2; align-self: end; margin: 0 0 .3em; }
  .dpf__blurb { grid-row: 3; grid-column: 1 / -1; min-height: 0;
    margin: clamp(8px, 1.5vh, 16px) 0 clamp(10px, 1.6vh, 18px); padding-bottom: clamp(10px, 1.6vh, 18px); }
  .dpf__feats { grid-row: 4; grid-column: 1 / -1; align-content: start; gap: clamp(5px, 1vh, 11px); margin: 0 0 clamp(14px, 2.4vh, 26px); }
  .dpf__feats li { line-height: 1.4; }
  /* no one-word last lines in the blurbs and list items */
  .dpf__blurb, .dpf__feats li { text-wrap: pretty; }
  .dpf__card .btn { grid-row: 5; grid-column: 1 / -1; margin-top: 0; padding-block: clamp(.66em, 1.5vh, .92em); }
  .dpf__foot { margin-top: clamp(10px, 1.8vh, 28px); }
}
/* the footer line sits in the bottom 8% of a short screen when the section fits it exactly, where the reveal
   observer never fires: it fades in with the cards instead */
.js .dpf__grid:has(> .reveal.in) + .dpf__foot.reveal { opacity: 1; transform: none; transition-delay: .3s; }

.dx { min-height: 70vh; display: flex; align-items: center; padding-block: var(--pad-lg); text-align: center; }
.dx .dio__darkbed {
  background:
    radial-gradient(60% 70% at 50% 22%, color-mix(in srgb, var(--glow) 16%, transparent), color-mix(in srgb, var(--accent) 6%, transparent) 44%, transparent 72%),
    radial-gradient(90% 100% at 50% 120%, color-mix(in srgb, var(--accent) 7%, transparent), transparent 60%),
    linear-gradient(180deg, var(--bg-2) 0%, var(--bg-3) 60%, var(--bg-3) 100%); }
.dx .container { max-width: 800px; position: relative; z-index: 1; }
.dx .eyebrow { justify-content: center; margin-bottom: 18px; }
.dx h2 { font: 900 var(--fs-h1)/1.04 var(--font); letter-spacing: -.03em; color: var(--ink); margin: 0 0 18px; text-shadow: 0 18px 60px rgba(0,0,0,.5); }
.dx h2 .grad { background: var(--grad-text); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; }
.dx p { font: 400 var(--fs-lead)/1.6 var(--body); color: var(--ink-2); margin: 0 auto 28px; max-width: 56ch; }
.dx__actions { display: flex; gap: 16px; flex-wrap: wrap; justify-content: center; margin-bottom: 22px; }

@media (max-width: 1279px) {

  .dh .container { grid-template-columns: minmax(0, 1fr) minmax(0, .82fr);
    gap: clamp(22px, 2.6vw, 34px); align-items: start; }
  .dh__panel { max-width: none; }
  .dh__overlay { justify-self: stretch; width: 100%; max-width: 420px; margin-left: auto; }

  .dimp__hero { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(20px, 2.6vw, 32px); }

  .dimp__dash  { grid-template-columns: repeat(2, 1fr); }
  .dimp__sales { grid-template-columns: repeat(2, 1fr); }

  .dshow__grid { grid-template-columns: repeat(4, 1fr); }
  .dshow__logos { max-width: 760px; }
}

@media (max-width: 1023px) {

  .dh { min-height: 0; padding: calc(var(--s-12) - 16px) 0 var(--s-9); }
  .dh .container { grid-template-columns: 1fr; gap: clamp(24px, 4vw, 34px); align-items: stretch; }
  .dh__panel { max-width: 640px; }
  .dh__overlay { justify-self: center; width: 100%; max-width: 520px; margin-left: 0; }
  .dh__scrollcue { display: none; }

  .dkpi__grid  { grid-template-columns: 1fr; }
  .dkpi__grid--hub { grid-template-columns: repeat(2, 1fr); }
  .dfcp__grid  { grid-template-columns: 1fr; max-width: 560px; margin-inline: auto; }
  .ddiff__plate { grid-template-columns: 1fr; }
  .dimp__hero  { grid-template-columns: 1fr; gap: clamp(22px, 4vw, 32px); }
  .dimp__chart { max-width: 620px; }

  .dsolv__scans { grid-template-columns: 1fr; gap: clamp(20px, 4vw, 30px); justify-items: center; }
  .dsolv__scan  { width: 100%; max-width: 460px; }
  .dsolv__arrow { transform: rotate(90deg); justify-self: center; }
  .dsolv__cliff { grid-template-columns: 1fr; }

  .dshow__lead { grid-template-columns: 1fr; }
  .dshow__grid { grid-template-columns: repeat(2, 1fr); }
  .dshow__card.span3, .dshow__card.span2 { grid-column: span 1; }
  .dshow__support-grid { grid-template-columns: 1fr; max-width: 460px; margin-inline: auto; }

  .dpf__grid { grid-template-columns: 1fr; max-width: 460px; }
}

@media (max-width: 767px) {
  .dkpi__grid--hub { grid-template-columns: 1fr; }

  .dstat__big { font-size: clamp(2.6rem, 11vw, 3.6rem); }

  .dh__actions .btn { flex: 1 1 auto; justify-content: center; }

  .dfcp__bar { grid-template-columns: 76px 1fr 52px; gap: 10px; }
  .dsolv__cols { gap: 8px; }

  .dimp__inflect { left: 32%; max-width: 140px; font-size: .62rem; }

  .ddiff__emblem { grid-template-columns: 1fr; justify-items: center; text-align: center; gap: 16px; }
  .ddiff__sign { justify-items: center; }


  .bw__frames { grid-template-columns: repeat(2, 1fr); }
  .bw__hero   { grid-template-columns: 1fr; }
}

@media (max-width: 479px) {

  .dh h1 { font-size: clamp(2.05rem, 9.4vw, 2.7rem); line-height: 1.04; letter-spacing: -.028em; }
  .dh__panel { padding: clamp(22px, 6vw, 30px); }
  .dh__actions { gap: 10px; }
  .dh__actions .btn { flex: 1 1 100%; }
  .dh__trust { gap: 12px; }

  .dh__overlay { padding: 18px; }
  .dh__ov-foot .big { font-size: 1.5rem; }

  .dstat__grid { grid-template-columns: 1fr; gap: 14px; }
  .dstat__big { font-size: clamp(3rem, 18vw, 3.6rem); }

  .dimp__dash  { grid-template-columns: 1fr; }
  .dimp__sales { grid-template-columns: 1fr 1fr; }
  .dimp__inflect { left: 30%; max-width: 118px; font-size: .58rem; }

  .dfcp__bar { grid-template-columns: 1fr auto; grid-auto-rows: auto; gap: 6px 10px; }
  .dfcp__bar .k { grid-column: 1; }
  .dfcp__bar .v { grid-column: 2; grid-row: 1; }
  .dfcp__bar .track { grid-column: 1 / -1; }
  .dfcp__gauge { max-width: 230px; }

  .dsolv__cols { gap: 6px; height: 128px; }
  .dsolv__col .pct { font-size: .92rem; }
  .dsolv__col .pos { font-size: .62rem; }

  .dshow__grid { grid-template-columns: 1fr; }
  .bw__frames { grid-template-columns: repeat(2, 1fr); }

  .dpf__amt .price { font-size: 2.4rem; }

  .dx__actions { gap: 12px; }
  .dx__actions .btn { flex: 1 1 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .dio__bed img { transform: none !important; }
  .dimp__chart .line, .dimp__chart .area, .dimp__chart .dot,
  .dfcp__gauge .needle, .dfcp__bar .track i, .dsolv__col .bar { transition: none !important; }
  .dh__ov-head .live::before { animation: none !important; }
}

.hv2-typographic.dh {
  min-height: 100svh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-block: clamp(88px, 12vh, 150px) clamp(40px, 7vh, 96px);
  padding-inline: 0;
  text-align: center;
  background: var(--bg);
}
.hv2-typographic .container {
  position: relative;
  z-index: 1;
  display: block;
  max-width: 980px;
}

.hv2-typographic .hv2-ground {
  position: absolute; inset: 0; z-index: -3; pointer-events: none; overflow: hidden;
  background:
    radial-gradient(62% 70% at 50% 30%,
      color-mix(in srgb, var(--glow) 13%, transparent),
      color-mix(in srgb, var(--accent) 5%, transparent) 44%, transparent 70%),
    radial-gradient(70% 80% at 86% 4%,
      color-mix(in srgb, var(--glow) 11%, transparent), transparent 60%),
    radial-gradient(60% 80% at 6% 100%,
      color-mix(in srgb, var(--accent) 9%, transparent), transparent 58%),
    linear-gradient(168deg, var(--bg-2) 0%, var(--bg) 46%, var(--bg-3) 100%);
}

/* Clear of the transparent header's nav links at the top, like .dbf .dio__darkbed::after. */
.hv2-typographic .hv2-ground::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: var(--hex-a);
  background: url(../img/hex-connections.webp) var(--hex-pos) / var(--hex-size) auto repeat-y;
  -webkit-mask-image: linear-gradient(180deg, transparent var(--hex-clear), var(--bg) calc(var(--hex-clear) + 80px)),
                      radial-gradient(120% 110% at 50% 6%, var(--bg) 0%, transparent 70%);
  -webkit-mask-composite: source-in;
          mask-image: linear-gradient(180deg, transparent var(--hex-clear), var(--bg) calc(var(--hex-clear) + 80px)),
                      radial-gradient(120% 110% at 50% 6%, var(--bg) 0%, transparent 70%);
          mask-composite: intersect;
}
/* On a phone the copy fills the hero's width, so the pattern keeps to the space between the header and
   the headline, as it keeps beside the copy on wider screens: a short fade of fixed height (gone about
   290px down), so a taller hero does not stretch it over its copy. The Home hero sets its own fade
   below (.hv2--photo .hv2-ground::after). */
@media (max-width: 767px) {
  .hv2-typographic .hv2-ground::after {
    -webkit-mask-image: linear-gradient(180deg, transparent var(--hex-clear), var(--bg) calc(var(--hex-clear) + 80px)),
                        radial-gradient(120% 320px at 50% 6%, var(--bg) 0%, transparent 70%);
            mask-image: linear-gradient(180deg, transparent var(--hex-clear), var(--bg) calc(var(--hex-clear) + 80px)),
                        radial-gradient(120% 320px at 50% 6%, var(--bg) 0%, transparent 70%);
  }
}

.hv2-typographic .hv2-bloom {
  position: absolute; left: 50%; top: 42%; z-index: -2; pointer-events: none;
  width: min(760px, 86vw); height: min(520px, 60vh); transform: translate(-50%, -50%);
  background: radial-gradient(50% 50% at 50% 50%,
    color-mix(in srgb, var(--glow) 22%, transparent),
    color-mix(in srgb, var(--accent) 8%, transparent) 48%, transparent 74%);
  filter: blur(22px);
}

.hv2-typographic .hv2-vignette {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(120% 90% at 50% 44%, transparent 52%,
    color-mix(in srgb, var(--bg-3) 70%, transparent) 100%);
}

.hv2-typographic .hv2-grain {
  position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .05;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.hv2-typographic .hv2-inner {
  display: flex; flex-direction: column; align-items: center;
  gap: clamp(12px, 2.2vh, 28px);
  max-width: none;
  margin: 0 auto;
}

.hv2-typographic .dio-crumb,
.hv2-typographic .dh__eyebrow,
.hv2-typographic h1,
.hv2-typographic .hv2-sub,
.hv2-typographic .hv2-actions,
.hv2-typographic .hv2-trust { margin: 0; }

.hv2-typographic .dio-crumb { justify-content: center; }

.hv2-typographic h1 {
  font-weight: 900;
  font-size: clamp(2.4rem, min(7vw, 10.5vh), 6.25rem);
  line-height: 0.96;
  font-family: var(--font);
  letter-spacing: -.04em;
  color: var(--ink);
  max-width: 17ch;
  text-wrap: balance;
  text-shadow: 0 24px 80px rgba(0, 0, 0, .45);
}
/* Results (user, 19 October 2026: "Turn this into 2 lines") and Our Story (same day: "2 lines header and 1 line sub
   format here"): the heading takes the full width at a size that keeps each of its two parts (split by its <br>) on
   one line from 1024px; phones keep the wrapped heading. */
.hv2-typographic:is(.hero-results, .hero-story) .container { max-width: var(--maxw); }   /* the typographic hero's 980px held it to 3-4 lines at 1440 */
.hv2-typographic:is(.hero-results, .hero-story) h1 { max-width: none; font-size: clamp(2.4rem, min(5.2vw, 9vh), 4.9rem); }
.hv2-typographic:is(.hero-results, .hero-story) .hv2-sub { max-width: none; }   /* "make this single line": one line wherever it fits */
.hv2-typographic h1 .grad {
  background: var(--grad-text);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}

.hv2-typographic .hv2-sub {
  font: 400 var(--fs-lead)/1.55 var(--body);
  color: var(--ink-2);
  max-width: 44ch;
}
/* Readability (9 October 2026). The centred heroes' bloom sits behind the copy: their gradient line gets brighter
   ends, their breadcrumb links are lifted, and on phones (where the bloom is behind the subtitle) the subtitle
   takes --ink. The photo heroes (Home and the eight industry pages) keep their own colours. */
.hv2-typographic:not(.hv2--photo) h1 .grad { background-image: linear-gradient(100deg, var(--glow) 0%, var(--accent-2) 60%, var(--glow) 100%); }
.hv2-typographic .dio-crumb a, .hv2-typographic .dio-crumb .sep { color: color-mix(in srgb, var(--ink-2) 50%, var(--ink)); }
@media (max-width: 767px) { .hv2-typographic:not(.hv2--photo) .hv2-sub { color: var(--ink); } }

.hv2-typographic .hv2-actions {
  display: flex; flex-wrap: wrap; gap: 16px;
  align-items: center; justify-content: center;
}

.hv2-typographic .hv2-trust {
  display: inline-flex; align-items: center; gap: .6em;
  font: 400 var(--fs-small)/1.3 var(--body); color: var(--ink-2);
}
.hv2-typographic .hv2-stars { color: var(--gold); letter-spacing: .1em; font-size: .95em; }
.hv2-typographic .hv2-trust b { color: var(--ink); font-weight: 700; }
.hv2-typographic .hv2-trust .dot {
  width: 3px; height: 3px; border-radius: 50%;
  background: color-mix(in srgb, var(--ink-3) 80%, transparent);
}

@media (prefers-reduced-motion: no-preference) {
  .hv2-typographic .hv2-rise {
    animation: hv2-rise .9s var(--ease-out) both;
    animation-delay: calc(var(--i, 0) * 90ms + 60ms);
  }
  @keyframes hv2-rise {
    from { opacity: 0; transform: translateY(22px); }
    to   { opacity: 1; transform: translateY(0); }
  }
}

@media (max-width: 767px) {
  .hv2-typographic .container { padding-inline: var(--s-4); }
  .hv2-typographic .hv2-actions { flex-direction: column; width: 100%; }
  .hv2-typographic .hv2-actions .btn { width: 100%; justify-content: center; max-width: 360px; }
  .hv2-typographic .hv2-bloom { top: 38%; height: 46vh; }
}

@media (max-width: 479px) {
  .hv2-typographic h1 { letter-spacing: -.03em; }
  .hv2-typographic .hv2-trust { flex-wrap: wrap; justify-content: center; }
}

.hv2--photo {
  --hp-maxw: var(--mm-nav-maxw, 1320px);
  --hp-pad: clamp(1.25rem, 4vw, 1.75rem);
  --hp-fs: clamp(2.3rem, min(6.2vw - 4px, 9.6vh), 4.75rem);
  --hp-col: calc(var(--hp-fs) * 8.75);
  --hp-gap: clamp(32px, 3vw, 56px);
  --hp-fade: clamp(120px, 12vw, 240px);
  --hp-left: calc(max(0px, (100% - var(--hp-maxw)) / 2) + var(--hp-pad));
  --hp-tint: .85;
}
.hv2-typographic.hv2--photo.dh { justify-content: flex-start; text-align: left; background: transparent; }
.hv2--photo .hv2-ground,
.hv2--photo .hv2-vignette,
.hv2--photo .hv2-grain {
  -webkit-mask-image: linear-gradient(180deg, var(--bg) 80%, transparent 100%);
          mask-image: linear-gradient(180deg, var(--bg) 80%, transparent 100%);
}
.hv2--photo .container { max-width: var(--hp-maxw); }
.hv2--photo .hv2-inner {
  width: var(--hp-col); max-width: 100%;
  align-items: flex-start; margin: 0;
  gap: clamp(14px, 2.4vh, 26px);
}
.hv2--photo .hv2-inner > * { max-width: 100%; }
.hv2--photo h1 { font-size: calc(var(--hp-fs) * var(--hp-h1k, 1)); max-width: none; text-wrap: wrap; }
.hv2--photo .hv2-sub { max-width: min(42ch, 100%); }
.hv2--photo .hv2-actions { justify-content: flex-start; }
.hv2--photo .dh__scrollcue { left: var(--hp-left); transform: none; align-items: flex-start; }

.hv2--photo .hv2-ground {
  background:
    radial-gradient(44% 64% at 76% 50%,
      color-mix(in srgb, var(--glow) 13%, transparent),
      color-mix(in srgb, var(--accent) 5%, transparent) 46%, transparent 72%),
    radial-gradient(60% 70% at 8% 0%,
      color-mix(in srgb, var(--accent) 8%, transparent), transparent 60%),
    linear-gradient(168deg, var(--bg-2) 0%, var(--bg) 46%, var(--bg-3) 100%);
}
.hv2--photo .hv2-ground::after {
  -webkit-mask-image: radial-gradient(60% 85% at 30% 40%, var(--bg) 0%, transparent 72%);
          mask-image: radial-gradient(60% 85% at 30% 40%, var(--bg) 0%, transparent 72%);
}
.hv2--photo .hv2-bloom {
  left: calc(var(--hp-left) + var(--hp-col) + var(--hp-gap) + var(--hp-fade)); top: 52%;
  width: min(520px, 44vw); height: min(560px, 60vh);
}
.hv2--photo .hv2-vignette {
  background: radial-gradient(120% 95% at 60% 46%, transparent 50%,
    color-mix(in srgb, var(--bg-3) 70%, transparent) 100%);
}

.hv2--photo .hv2-photo {
  position: absolute; z-index: -2; pointer-events: none;
  top: 0; right: 0; bottom: 0;
  left: calc(var(--hp-left) + var(--hp-col) + var(--hp-gap));
  -webkit-mask-image: linear-gradient(90deg, transparent 0,
    color-mix(in srgb, var(--bg) 6%, transparent) calc(var(--hp-fade) * .2),
    color-mix(in srgb, var(--bg) 24%, transparent) calc(var(--hp-fade) * .4),
    color-mix(in srgb, var(--bg) 52%, transparent) calc(var(--hp-fade) * .6),
    color-mix(in srgb, var(--bg) 80%, transparent) calc(var(--hp-fade) * .8),
    var(--bg) var(--hp-fade));
          mask-image: linear-gradient(90deg, transparent 0,
    color-mix(in srgb, var(--bg) 6%, transparent) calc(var(--hp-fade) * .2),
    color-mix(in srgb, var(--bg) 24%, transparent) calc(var(--hp-fade) * .4),
    color-mix(in srgb, var(--bg) 52%, transparent) calc(var(--hp-fade) * .6),
    color-mix(in srgb, var(--bg) 80%, transparent) calc(var(--hp-fade) * .8),
    var(--bg) var(--hp-fade));
}
.hv2--photo .hv2-photo__media {
  position: absolute; inset: 0; overflow: hidden;
  -webkit-mask-image: linear-gradient(180deg, transparent 0,
    color-mix(in srgb, var(--bg) 20%, transparent) max(8%, 72px),
    color-mix(in srgb, var(--bg) 62%, transparent) max(16%, 140px),
    var(--bg) max(26%, 220px), var(--bg) 62%,
    color-mix(in srgb, var(--bg) 52%, transparent) 76%,
    color-mix(in srgb, var(--bg) 14%, transparent) 88%, transparent 95%);
          mask-image: linear-gradient(180deg, transparent 0,
    color-mix(in srgb, var(--bg) 20%, transparent) max(8%, 72px),
    color-mix(in srgb, var(--bg) 62%, transparent) max(16%, 140px),
    var(--bg) max(26%, 220px), var(--bg) 62%,
    color-mix(in srgb, var(--bg) 52%, transparent) 76%,
    color-mix(in srgb, var(--bg) 14%, transparent) 88%, transparent 95%);
}
.hv2--photo .hv2-photo img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: calc(var(--hp-xn, .46) * 100%) var(--hp-y, 56%);
  filter: saturate(.8) brightness(var(--hp-bright, .72)) contrast(1.08);
}
/* The photo takes the brand teal: a colour layer over it keeps the photo's light and shade and
   swaps its colours for --accent. The tint in the desktop shade's image file uses the same
   strength (--hp-tint) and colour, baked in. */
.hv2--photo .hv2-photo__media::before {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: var(--accent); mix-blend-mode: color; opacity: var(--hp-tint);
}
.hv2--photo .hv2-photo__media::after {
  content: ""; position: absolute; inset: 0; z-index: 2;
  mix-blend-mode: multiply;
  background: linear-gradient(90deg,
    color-mix(in srgb, var(--bg-3) 70%, transparent) 0%,
    color-mix(in srgb, var(--bg) 40%, transparent) 45%,
    color-mix(in srgb, var(--bg) 26%, transparent) 100%);
}

/* A beam of light rises from the tablet's screen. The photo box is a size container, so the beam
   is placed on the photo itself: the image's drawn size (object-fit: cover of 2000x1055) and its
   offset (object-position 46% and --ray-oy) come from cqw/cqh. The beam's base lies along the
   tablet's lit top edge, measured on the photo (2688x1520) from (33.97%, 36.46%) to (58%, 60.46%):
   27.6% of the image wide, centred at 45.985% / 48.46%, sloping 29.45deg. It rises at right angles
   to the edge, towards the doctor. Re-measure these if the photo changes. */
.hv2--photo .hv2-photo__media { container-type: size; }
.hv2--photo .hv2-photo__ray {
  --ray-oy: .56;
  --iw: max(100cqw, 176.84cqh); --ih: max(100cqh, 56.55cqw);
  --ax: calc(.46 * (100cqw - var(--iw)) + .45985 * var(--iw));
  --ay: calc(var(--ray-oy) * (100cqh - var(--ih)) + .48460 * var(--ih));
  position: absolute; z-index: 3; pointer-events: none;
  width: calc(.2760 * var(--iw)); height: calc(.8 * var(--ih));
  left: calc(var(--ax) - .1380 * var(--iw)); top: calc(var(--ay) - .8 * var(--ih));
  transform-origin: 50% 100%; transform: rotate(29.45deg) perspective(600px) rotateX(-38deg);
  mix-blend-mode: screen;
  background:
    radial-gradient(50% 9% at 50% 100%, color-mix(in srgb, var(--cta-bg) 85%, transparent), transparent 100%),
    linear-gradient(0deg, color-mix(in srgb, var(--cta-bg) 70%, transparent) 0%,
      color-mix(in srgb, var(--cta-bg) 40%, transparent) 26%,
      color-mix(in srgb, var(--cta-bg) 16%, transparent) 58%, transparent 100%);
  -webkit-mask-image: linear-gradient(0deg, var(--bg) 0%, var(--bg) 35%, transparent 100%),
                      linear-gradient(90deg, transparent 0%, var(--bg) 10%, var(--bg) 90%, transparent 100%);
  -webkit-mask-composite: source-in;
          mask-image: linear-gradient(0deg, var(--bg) 0%, var(--bg) 35%, transparent 100%),
                      linear-gradient(90deg, transparent 0%, var(--bg) 10%, var(--bg) 90%, transparent 100%);
          mask-composite: intersect;
  filter: blur(5px);
}
/* Two layers of light shafts run along the beam, in the primary button's colour (--cta-bg). When
   motion is allowed they drift across it in opposite directions at different speeds, so the light
   ripples like a wave; the beam itself stays still, so its base never leaves the tablet's edge.
   Each layer is twice the beam's width and moves exactly one tile per loop. */
.hv2--photo .hv2-photo__ray::before,
.hv2--photo .hv2-photo__ray::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: -50%; width: 200%;
  background-repeat: repeat-x;
}
.hv2--photo .hv2-photo__ray::before {
  background-image: linear-gradient(90deg, transparent 0 34%,
    color-mix(in srgb, var(--cta-bg) 30%, transparent) 46% 54%, transparent 66% 100%);
  background-size: 12.5% 100%;
}
.hv2--photo .hv2-photo__ray::after {
  background-image: linear-gradient(90deg, transparent 0 40%,
    color-mix(in srgb, var(--cta-bg) 22%, transparent) 50%, transparent 60% 100%);
  background-size: calc(100% / 7) 100%;
}
@media (prefers-reduced-motion: no-preference) {
  .hv2--photo .hv2-photo__ray::before { animation: hv2-ray-drift-a 7s linear infinite; }
  .hv2--photo .hv2-photo__ray::after { animation: hv2-ray-drift-b 11s linear infinite; }
  @keyframes hv2-ray-drift-a { from { transform: translateX(0); } to { transform: translateX(-12.5%); } }
  @keyframes hv2-ray-drift-b { from { transform: translateX(calc(-100% / 7)); } to { transform: translateX(0); } }
}

/* On a desktop the whole photo shows under the copy as a soft, blurred shade: a pre-blurred copy
   of it (Home's is img/hero-clinician-tablet-shade.webp; each industry page names its own with
   --hp-shade-img; all are made with the photo's filter and its teal tint, and a soft left edge)
   sits behind the sharp one, lined up with it (same height, and the photo's focal position moved
   by the rest of the extra width). The shade starts at the copy's left edge, comes in
   across the copy, and hands over to the sharp photo. It multiplies, so it only ever darkens
   the ground in the ground's own colour (the photo's dark shapes show; its bright window adds no
   grey haze, and the copy's contrast can only rise); --hp-shade-b and --hp-shade-o set how light
   and how strong it is. */
.hv2--photo .hv2-shade { display: none; }
@media (min-width: 981px) {
  .hv2--photo { --hp-shade: calc(var(--hp-col) + var(--hp-gap)); --hp-shade-b: 1.1; --hp-shade-o: .85; }
  .hv2--photo .hv2-shade {
    display: block; position: absolute; z-index: -2; pointer-events: none;
    mix-blend-mode: multiply;
    top: 0; right: 0; bottom: 0;
    left: calc(var(--hp-left) + var(--hp-col) + var(--hp-gap) - var(--hp-shade));
    -webkit-mask-image: linear-gradient(90deg, transparent 0,
      color-mix(in srgb, var(--bg) 18%, transparent) calc(var(--hp-shade) * .15),
      color-mix(in srgb, var(--bg) 45%, transparent) calc(var(--hp-shade) * .35),
      color-mix(in srgb, var(--bg) 70%, transparent) calc(var(--hp-shade) * .6),
      color-mix(in srgb, var(--bg) 88%, transparent) calc(var(--hp-shade) * .85),
      color-mix(in srgb, var(--bg) 95%, transparent) var(--hp-shade),
      var(--bg) calc(var(--hp-shade) + var(--hp-fade) * .4),
      color-mix(in srgb, var(--bg) 70%, transparent) calc(var(--hp-shade) + var(--hp-fade)),
      transparent calc(var(--hp-shade) + var(--hp-fade) * 1.6));
            mask-image: linear-gradient(90deg, transparent 0,
      color-mix(in srgb, var(--bg) 18%, transparent) calc(var(--hp-shade) * .15),
      color-mix(in srgb, var(--bg) 45%, transparent) calc(var(--hp-shade) * .35),
      color-mix(in srgb, var(--bg) 70%, transparent) calc(var(--hp-shade) * .6),
      color-mix(in srgb, var(--bg) 88%, transparent) calc(var(--hp-shade) * .85),
      color-mix(in srgb, var(--bg) 95%, transparent) var(--hp-shade),
      var(--bg) calc(var(--hp-shade) + var(--hp-fade) * .4),
      color-mix(in srgb, var(--bg) 70%, transparent) calc(var(--hp-shade) + var(--hp-fade)),
      transparent calc(var(--hp-shade) + var(--hp-fade) * 1.6));
  }
  .hv2--photo .hv2-shade::before {
    content: ""; position: absolute; inset: 0;
    background: var(--hp-shade-img, url(../img/hero-clinician-tablet-shade.webp))
      calc(var(--hp-xn, .46) * 100% + var(--hp-shade) * (1 - var(--hp-xn, .46))) 0 / auto 100% no-repeat;
    filter: brightness(var(--hp-shade-b)); opacity: var(--hp-shade-o);
    -webkit-mask-image: linear-gradient(180deg, transparent 0,
      color-mix(in srgb, var(--bg) 20%, transparent) max(8%, 72px),
      color-mix(in srgb, var(--bg) 62%, transparent) max(16%, 140px),
      var(--bg) max(26%, 220px), var(--bg) 62%,
      color-mix(in srgb, var(--bg) 52%, transparent) 76%,
      color-mix(in srgb, var(--bg) 14%, transparent) 88%, transparent 95%);
            mask-image: linear-gradient(180deg, transparent 0,
      color-mix(in srgb, var(--bg) 20%, transparent) max(8%, 72px),
      color-mix(in srgb, var(--bg) 62%, transparent) max(16%, 140px),
      var(--bg) max(26%, 220px), var(--bg) 62%,
      color-mix(in srgb, var(--bg) 52%, transparent) 76%,
      color-mix(in srgb, var(--bg) 14%, transparent) 88%, transparent 95%);
  }
  /* The background hex pattern sits above the photo layers on the left, faint, and fades out before
     the sharp photo; it replaces the ground's own pattern here. */
  .hv2--photo .hv2-ground::after { display: none; }
  .hv2--photo .hv2-vignette::before {
    content: ""; position: absolute; inset: 0; pointer-events: none; opacity: var(--hex-a-hero, .08);
    background: url(../img/hex-connections.webp) var(--hex-pos) / var(--hex-size) auto repeat-y;
    -webkit-mask-image: radial-gradient(50% 78% at 18% 46%, var(--bg) 0%, var(--bg) 35%, transparent 80%);
            mask-image: radial-gradient(50% 78% at 18% 46%, var(--bg) 0%, var(--bg) 35%, transparent 80%);
  }
}

/* On a short screen the copy reaches the bottom of the hero, where the decorative
   scroll cue would sit on the trust line, so the cue is left out there. */
@media (max-height: 680px) {
  .hv2--photo .dh__scrollcue { display: none; }
}

/* A short desktop window: at fs * 8.75 the column is too narrow for the two buttons side by
   side, and the copy runs below the first screen. The column widens (the headline's first
   line fits on one line at 15.5em in either font) and the line under it gets 44ch, while the
   photo keeps at least 360px: 28px margin + 32px gap + 360px = 420px. */
@media (min-width: 981px) and (max-height: 500px) {
  .hv2--photo { --hp-col: min(calc(var(--hp-fs) * 15.5), 100vw - 420px); }
  .hv2--photo .hv2-sub { max-width: min(44ch, 100%); }
  /* The gap is at its minimum here; the trust line steps out of the primary button's glow. */
  .hv2--photo .hv2-trust { margin-top: 10px; }
}

/* Up to 700px tall the gap above the trust line is still near its 14px minimum, and on a wide
   window the line sits in the primary button's glow (under 4.5:1 from 501 to 620px tall); it
   steps out of the glow the same way. */
@media (min-width: 981px) and (max-height: 700px) {
  .hv2--photo .hv2-trust { margin-top: 10px; }
}

/* The band above the copy is kept short enough that the copy, down to its trust line, still
   ends inside the first screen. Below the band the copy needs 3 headline lines (at the page's
   headline size), 4 gaps and 212px more (294px below 768px, where the buttons stack), plus any
   extra a page sets (--hp-more, --hp-more-s). The band never goes under 240px;
   screens too short for that get the copy-first layout below. */
@media (max-width: 980px) {
  .hv2--photo {
    --hp-copy: calc(3 * var(--hp-fs) * var(--hp-h1k, 1) + 4 * clamp(14px, 2.4vh, 26px) + 212px + var(--hp-more, 0px));
    --hp-band: clamp(240px, min(86vw, 100vh - var(--hp-copy)), 540px);
    --hp-fs: clamp(1.75rem, calc((100vw - 2 * var(--s-4)) / 8.75), 3.6rem);
  }
  @supports (height: 1svh) {
    .hv2--photo { --hp-band: clamp(240px, min(86vw, 100svh - var(--hp-copy)), 540px); }
  }
  .hv2-typographic.hv2--photo.dh { align-items: flex-start; padding-top: calc(var(--hp-band) + var(--s-3)); }
  .hv2--photo .hv2-photo {
    left: 0; bottom: auto; height: var(--hp-band);
    -webkit-mask-image: none; mask-image: none;
  }
  .hv2--photo .hv2-photo__media {
    -webkit-mask-image: linear-gradient(180deg, transparent 0,
      color-mix(in srgb, var(--bg) 14%, transparent) 48px,
      color-mix(in srgb, var(--bg) 55%, transparent) 92px,
      var(--bg) 136px, var(--bg) 60%,
      color-mix(in srgb, var(--bg) 52%, transparent) 75%,
      color-mix(in srgb, var(--bg) 14%, transparent) 87%, transparent 95%);
            mask-image: linear-gradient(180deg, transparent 0,
      color-mix(in srgb, var(--bg) 14%, transparent) 48px,
      color-mix(in srgb, var(--bg) 55%, transparent) 92px,
      var(--bg) 136px, var(--bg) 60%,
      color-mix(in srgb, var(--bg) 52%, transparent) 75%,
      color-mix(in srgb, var(--bg) 14%, transparent) 87%, transparent 95%);
  }
  .hv2--photo .hv2-photo img { object-position: calc(var(--hp-bxn, var(--hp-xn, .46)) * 100%) var(--hp-by, 50%); }
  .hv2--photo .hv2-photo__ray { --ray-oy: .5; }
  .hv2--photo .hv2-photo__media::after {
    background: linear-gradient(90deg,
      color-mix(in srgb, var(--bg-3) 45%, transparent) 0%,
      color-mix(in srgb, var(--bg) 34%, transparent) 50%,
      color-mix(in srgb, var(--bg-3) 45%, transparent) 100%);
  }
  .hv2--photo .hv2-bloom { left: 50%; top: calc(var(--hp-band) * .55); width: 90vw; height: 60vw; }
}

/* A phone on its side, or a short upright screen, has no room for even the shortest band
   above the copy. There the copy comes first and the band sits below it. The column is
   15.5em, so the headline's first line stays on one line in either font and every engine
   (Montserrat needs 14.3em), and at least 35rem, so the line under it gets its 44ch: two
   lines, as on the other heroes. That keeps the buttons inside a landscape phone's first
   screen. "Too short" depends on the width, where the headline takes 3 lines and the buttons
   stack: 710px tall below 480px wide, 750px from 480 to 767px, 690px from 768 to 980px (Home;
   the industry pages, whose heroes also carry a breadcrumb, switch at the taller heights below). */
@media (max-width: 479px) and (max-height: 710px),
       (min-width: 480px) and (max-width: 767px) and (max-height: 750px),
       (min-width: 768px) and (max-width: 980px) and (max-height: 690px) {
  .hv2--photo {
    --hp-band: clamp(300px, 86vw, 540px);
    --hp-fs: clamp(1.75rem, min((100vw - 2 * var(--s-4)) / 8.75, 9.6vh), 3.6rem);
    --hp-col: max(35rem, calc(var(--hp-fs) * 15.5));
  }
  .hv2--photo .hv2-inner { gap: clamp(12px, 2.2vh, 26px); }
  .hv2--photo .hv2-sub { max-width: min(44ch, 100%); }
  /* The trust line sits right under the primary button here; it steps out of the button's glow. */
  .hv2--photo .hv2-trust { margin-top: 10px; }
  .hv2-typographic.hv2--photo.dh {
    padding-top: clamp(88px, 12vh, 150px);
    padding-bottom: calc(var(--hp-band) + var(--s-5));
  }
  .hv2--photo .hv2-photo { top: auto; bottom: 0; }
  .hv2--photo .hv2-bloom { top: calc(100% - var(--hp-band) * .45); }
  /* The ground's glow follows the band too, so it does not light the copy above it. */
  .hv2--photo .hv2-ground {
    background:
      radial-gradient(44% 64% at 76% calc(100% - var(--hp-band) * .45),
        color-mix(in srgb, var(--glow) 13%, transparent),
        color-mix(in srgb, var(--accent) 5%, transparent) 46%, transparent 72%),
      radial-gradient(60% 70% at 8% 0%,
        color-mix(in srgb, var(--accent) 8%, transparent), transparent 60%),
      linear-gradient(168deg, var(--bg-2) 0%, var(--bg) 46%, var(--bg-3) 100%);
  }
}

@media (max-width: 767px) {
  .hv2--photo { --hp-copy: calc(3 * var(--hp-fs) * var(--hp-h1k, 1) + 4 * clamp(14px, 2.4vh, 26px) + 294px + var(--hp-more-s, 0px)); }
  .hv2--photo .hv2-actions { align-items: flex-start; }
}

/* The split/photo hero on the eight industry pages (user, 15 October 2026), each with its own cinematic photograph.
   Each page's section carries hv2--photo (Home's layout), hv2--photo-inner (the rules below for a hero with a
   breadcrumb) and its own hp-<name> class, which sets the photograph's focal point for the split (--hp-xn, a
   fraction, and --hp-y) and for the band (--hp-bxn, --hp-by), its brightness (--hp-bright: these photographs are
   darker than Home's, so they are lifted from Home's .72) and its own baked shade (--hp-shade-img, made from the
   page's photograph like Home's). Optometry and Urgent Care size their headline down to 3 lines (--hp-h1k) and
   Physical Therapy adds room for its longer supporting line in the stacked layout (--hp-more, --hp-more-s). Home sets
   none of these and keeps its own values. Only Home has the beam. */
.hv2--photo .dio-crumb { justify-content: flex-start; }
.hv2--photo.hp-chiropractic { --hp-xn: 0.9; --hp-y: 50%; --hp-bxn: 0.9; --hp-by: 45%; --hp-bright: 1; --hp-shade-img: url(../img/hero-chiropractic-shade.webp); }
.hv2--photo.hp-dental { --hp-xn: 0.84; --hp-y: 50%; --hp-bxn: 0.84; --hp-by: 30%; --hp-bright: 1.15; --hp-shade-img: url(../img/hero-dental-shade.webp); }
.hv2--photo.hp-med-spa { --hp-xn: 0.94; --hp-y: 50%; --hp-bxn: 0.94; --hp-by: 25%; --hp-bright: 1.15; --hp-shade-img: url(../img/hero-med-spa-shade.webp); }
.hv2--photo.hp-optometry { --hp-xn: 0.95; --hp-y: 50%; --hp-bxn: 0.95; --hp-by: 45%; --hp-h1k: 0.94; --hp-bright: 1.15; --hp-shade-img: url(../img/hero-optometry-shade.webp); }
.hv2--photo.hp-pain-management { --hp-xn: 0.76; --hp-y: 50%; --hp-bxn: 0.76; --hp-by: 40%; --hp-bright: 1; --hp-shade-img: url(../img/hero-pain-management-shade.webp); }
.hv2--photo.hp-physical-therapy { --hp-xn: 0.95; --hp-y: 50%; --hp-bxn: 0.95; --hp-by: 15%; --hp-more: 32px; --hp-more-s: 32px; --hp-bright: 1; --hp-shade-img: url(../img/hero-physical-therapy-shade.webp); }
.hv2--photo.hp-urgent-care { --hp-xn: 1; --hp-y: 50%; --hp-bxn: 1; --hp-by: 50%; --hp-h1k: 0.94; --hp-bright: 1; --hp-shade-img: url(../img/hero-urgent-care-shade.webp); }
.hv2--photo.hp-vet-clinic { --hp-xn: 0.68; --hp-y: 50%; --hp-bxn: 0.68; --hp-by: 15%; --hp-bright: 1; --hp-shade-img: url(../img/hero-vet-clinic-shade.webp); }

/* Full-bleed photo hero: The 2-KPI Method (the user's pick, option D of four, 16 October 2026), then Home and the
   eight industry pages ("apply them same way"). The photograph covers the hero and a scrim darkens it towards the
   copy, which sits low on the left. It keeps the typographic hero's type, buttons, trust line and rise-in, with its
   own layers in place of the ground, bloom and vignette. The scrim ends in --bg-3 at the foot, as the typographic
   hero's ground does (the light section below meets it on a straight edge, as before). Per page: --hb-pos, the
   photo's focal point, and --hb-bright. Portrait screens and Home on desktop draw the photo whole instead: below.
   The img `sizes` follow: 100vw on portrait screens, else 100vw when the hero is wider than the photo, else its
   height x the photo's ratio (151vh for 3:2). */
.hv2--bleed.hv2-typographic.dh { text-align: left; align-items: flex-end; padding-bottom: clamp(56px, 10vh, 120px); }
.hv2--bleed.hv2-typographic .container { max-width: var(--maxw); }
.hv2--bleed .hv2-inner { align-items: flex-start; margin: 0; max-width: 760px; }
.hv2--bleed.hv2-typographic .dio-crumb,
.hv2--bleed.hv2-typographic .hv2-actions { justify-content: flex-start; }
.hv2--bleed.hv2-typographic h1 { font-size: clamp(2.4rem, min(6vw, 9vh), 5.4rem); }
/* Over the photo the supporting line takes --ink. */
.hv2--bleed.hv2-typographic .hv2-sub { color: var(--ink); }
.hv2-bleed__photo { position: absolute; inset: 0; z-index: -3; overflow: hidden; }
.hv2-bleed__photo img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: var(--hb-pos, 50% 50%);
  filter: saturate(.9) brightness(var(--hb-bright, .82)); }
.hv2-bleed__scrim { position: absolute; inset: 0; z-index: -2; pointer-events: none; background:
  linear-gradient(90deg, color-mix(in srgb, var(--bg-3) 92%, transparent) 0%, color-mix(in srgb, var(--bg-3) 70%, transparent) 38%, transparent 72%),
  linear-gradient(0deg, var(--bg-3) 0%, color-mix(in srgb, var(--bg-3) 55%, transparent) 30%, transparent 60%),
  linear-gradient(180deg, color-mix(in srgb, var(--bg-3) 70%, transparent) 0%, transparent 22%); }

/* Portrait screens, phones and upright tablets (user, 16 October 2026: the phone views were "too zoomed in", "utilize
   the space above the texts to show the whole image", any gap covered by a gradient of a matching colour): the
   whole photograph, full width, from the top of the hero (under the transparent header), fading out over its lower
   half into the hero's ground, here --bg-3; the copy keeps its place at the foot. Where a short screen brings the
   copy up into the photo, it sits on the faded part. */
@media (max-width: 980px) and (max-aspect-ratio: 1/1) {
  .hv2--bleed.hv2-typographic.dh { background: var(--bg-3); }
  .hv2-bleed__photo { bottom: auto; }
  .hv2-bleed__photo img { height: auto; min-height: var(--hb-ph, 0px); object-fit: cover; object-position: var(--hb-pos-p, var(--hb-pos, 50% 50%));
    -webkit-mask-image: linear-gradient(180deg, var(--bg) 50%, transparent 100%);
            mask-image: linear-gradient(180deg, var(--bg) 50%, transparent 100%); }
  .hv2-bleed__scrim { background: linear-gradient(180deg, color-mix(in srgb, var(--bg-3) 55%, transparent) 0%, transparent 14%); }
  /* The copy brings its own ground, so wherever it lands it sits on --bg-3: a fade from 72px above its first line,
     the width of the screen. Over the half-faded photo the breadcrumb measured 2.3:1 at 375x667 without it. */
  .hv2--bleed .hv2-inner { position: relative; }
  .hv2--bleed .hv2-inner::before { content: ""; position: absolute; z-index: -1; pointer-events: none;
    top: -72px; bottom: -40px; left: -50vw; right: -50vw; background: linear-gradient(180deg, transparent, var(--bg-3) 72px); }
}
/* Phones: the breadcrumb takes --ink (it measured 3.2:1 over the lit parts of the zoomed photos at 360px wide). */
@media (max-width: 767px) {
  .hv2--bleed .dio-crumb a, .hv2--bleed .dio-crumb .sep, .hv2--bleed .dio-crumb [aria-current] { color: var(--ink); }
}

/* Home on desktop (user, 16 October 2026: "too zoomed in, doctor should be moved a bit more to the right", a gap
   covered by a gradient of a matching colour): the photograph is drawn at 88% of the hero's height from its
   bottom-right corner and fades out along its left and top edges into the hero's ground and scrim. */
@media not all and (max-width: 980px) and (max-aspect-ratio: 1/1) {
  .hv2--bleed.hb-home .hv2-bleed__photo img { position: absolute; right: 0; bottom: 0; width: auto; height: 88%; max-width: none; object-fit: fill;
    -webkit-mask-image: linear-gradient(90deg, transparent, var(--bg) 30%), linear-gradient(180deg, transparent, var(--bg) 18%);
    -webkit-mask-composite: source-in;
            mask-image: linear-gradient(90deg, transparent, var(--bg) 30%), linear-gradient(180deg, transparent, var(--bg) 18%);
            mask-composite: intersect; }
}

/* Per page. The industry photos' subjects stand right of centre, so the photo is anchored on the right where the
   window is narrower than the photo (4:3). --hb-bright: Home's photo is lighter than the others (mean luma 115
   against 36 to 57 on the right half), so it keeps its old .72; Dental's is the darkest (36), so it gets 1. */
.hv2--bleed.hb-kpi                { --hb-pos: 72% 40%; }
.hv2--bleed.hb-home               { --hb-bright: .72; }
/* Home on portrait screens (user, 16 October 2026: "increase the size of the background image, to reduce the teal
   gap"): its photo is the widest (16:9), so at full width it ended 80px above the copy on a 390x844 phone; it is at
   least 38svh tall there, cropped at the sides around the tablet and the doctor (--hb-pos-p). */
.hv2--bleed.hb-home               { --hb-ph: 38svh; --hb-pos-p: 35% 50%; }
.hv2--bleed.hb-optometry          { --hb-pos: 100% 50%; }
.hv2--bleed.hb-dental             { --hb-pos: 100% 30%; --hb-bright: 1; }
.hv2--bleed.hb-med-spa            { --hb-pos: 100% 35%; }
.hv2--bleed.hb-chiropractic       { --hb-pos: 100% 50%; }
.hv2--bleed.hb-vet-clinic         { --hb-pos: 100% 35%; }
.hv2--bleed.hb-pain-management    { --hb-pos: 100% 50%; }
.hv2--bleed.hb-physical-therapy   { --hb-pos: 100% 20%; }
.hv2--bleed.hb-urgent-care        { --hb-pos: 100% 50%; }

/* Book an Audit (user, 19 October 2026: option B of three, "make the image to next section transition seamless"): the
   full-bleed photo hero, shorter, with the form section rising into its foot, so the form starts on the first screen.
   The photo (supplied by the user) is brighter than the others (mean luma 164; Home 115), so it is drawn darker. The
   hero's foot fades to see-through over --join (photo, scrim, grain and its ground), and the form section is
   see-through (dio--blend), so both sides of the line show the same page background at any scroll position.
   Industries uses the same photo and foot, at the full height of the other photo heroes (user, 19 October 2026:
   "for the hero section can we also use the image we used in the book an audit page"); its directory below is see-through. */
.hv2--bleed.hv2-typographic:is(.hb-book, .hb-industries).dh { --hb-pos: 62% 58%; --hb-bright: .56; --hb-pos-p: 62% 50%; --join: clamp(110px, 12vw, 180px);
  background: linear-gradient(180deg, var(--bg) calc(100% - var(--join)), transparent); }
.hv2--bleed:is(.hb-book, .hb-industries) .hv2-bleed__photo img { filter: saturate(.85) brightness(var(--hb-bright)); }
.hv2--bleed:is(.hb-book, .hb-industries) > :is(.hv2-bleed__photo, .hv2-bleed__scrim, .hv2-grain) {
  -webkit-mask-image: linear-gradient(180deg, #000 calc(100% - var(--join)), transparent);
          mask-image: linear-gradient(180deg, #000 calc(100% - var(--join)), transparent); }
/* Industries draws a crop of the same photo that stops above the two product boxes on the desk (at full height they sat
   right under the buttons; on Book an Audit the rising form covers them). */
.hv2--bleed.hv2-typographic.hb-industries.dh { --hb-pos: 60% 50%; --hb-pos-p: 60% 50%; }
/* the trust line sits in the see-through foot, over the page background's soft glow at the lower left (ink-2 there
   measured 3.9:1): --ink */
.hv2--bleed.hb-industries .hv2-trust, .hv2--bleed.hb-industries .hv2-trust span { color: var(--ink); }
@media not all and (max-width: 980px) and (max-aspect-ratio: 1/1) {
  .hv2--bleed.hv2-typographic.hb-book.dh { min-height: clamp(520px, 74svh, 720px); padding-bottom: clamp(170px, 24vh, 230px); }
  .dio.dbook.dbook--rise { margin-top: calc(-1 * clamp(130px, 19vh, 180px)); position: relative; z-index: 4; }
}
@media (max-width: 980px) and (max-aspect-ratio: 1/1) {
  .hv2--bleed.hv2-typographic:is(.hb-book, .hb-industries).dh { background: linear-gradient(180deg, var(--bg-3) calc(100% - var(--join)), transparent); }
}

/* Blog (user, 19 October 2026: "for the blog page i would like you to use the same hero style as the specialty while
   keeping the elements on it", then "use this image instead"): the full-bleed photo hero with the user's photo of a
   clinician at a laptop (img/hero-blog-*.webp, from 2149741273.jpg), keeping the page's breadcrumb, eyebrow, heading,
   line, topic chips and buttons in their order. She sits on the right, so the photo is anchored there, as the
   industry photos are. Its box runs past the hero's right edge (--hb-over), so she sits further right while the
   photo still covers the hero: where the screen is narrower than the photo (3:2: 1024 to 1194px tablets on their
   side, a phone on its side), the heading's last word ran into her hair. 96px on screens squarer than 7:5, where
   WebKit and Firefox set the heading wider than Chromium; her hair still ends inside the frame there. */
.hv2--bleed.hb-blog { --hb-pos: 100% 6%; --hb-over: 64px; }   /* 6%: on wide, short screens the crop comes off the desk, not her head */
@media (max-aspect-ratio: 7/5) { .hv2--bleed.hb-blog { --hb-over: 96px; } }
@media not all and (max-width: 980px) and (max-aspect-ratio: 1/1) {
  .hv2--bleed.hb-blog .hv2-bleed__photo img { width: calc(100% + var(--hb-over)); max-width: none; }
}
.hv2--bleed.hb-blog .dbf__filter { margin: 0; }
/* Over the photo the see-through chips take a dark backing (the "Soon" chips measured 2.0 to 3.2:1 over the
   stethoscope and the laptop without it, 4.5 to 4.7:1 with a 62% one); hover and the active chip keep their own fill. */
.hv2--bleed.hb-blog .dbf__chip:not(.is-active, :hover) {
  background: linear-gradient(color-mix(in srgb, var(--accent) 9%, transparent), color-mix(in srgb, var(--accent) 9%, transparent)),
              color-mix(in srgb, var(--bg-3) 72%, transparent); }
.hv2--bleed.hb-blog .dbf__chip.is-soon { background: color-mix(in srgb, var(--bg-3) 72%, transparent); }
/* Portrait screens: the copy is taller than the other heroes' (nine chips), so the hero is taller than the screen and
   the copy would start under the header, over the photo; it starts 80% of the way down the photo instead. */
@media (max-width: 980px) and (max-aspect-ratio: 1/1) {
  .hv2--bleed.hv2-typographic.hb-blog.dh { padding-top: max(clamp(88px, 12vh, 150px), 53.3vw); }
}

/* Short screens: copy first, band below (Home's block, "A phone on its side..." above), at the heights where a hero
   with a breadcrumb no longer fits its copy under a 240px band (measured in three engines and both fonts: the trust
   line needs up to 749px below 480px wide, 783px from 480 to 767px and 718px from 768 to 980px). */
@media (max-width: 479px) and (max-height: 750px),
       (min-width: 480px) and (max-width: 767px) and (max-height: 790px),
       (min-width: 768px) and (max-width: 980px) and (max-height: 720px) {
  .hv2--photo-inner {
    --hp-band: clamp(300px, 86vw, 540px);
    --hp-fs: clamp(1.75rem, min((100vw - 2 * var(--s-4)) / 8.75, 9.6vh), 3.6rem);
    --hp-col: max(35rem, calc(var(--hp-fs) * 15.5));
  }
  .hv2--photo-inner .hv2-inner { gap: clamp(12px, 2.2vh, 26px); }
  .hv2--photo-inner .hv2-sub { max-width: min(44ch, 100%); }
  .hv2--photo-inner .hv2-trust { margin-top: 10px; }
  .hv2-typographic.hv2--photo.hv2--photo-inner.dh {
    padding-top: clamp(88px, 12vh, 150px);
    padding-bottom: calc(var(--hp-band) + var(--s-5));
  }
  .hv2--photo-inner .hv2-photo { top: auto; bottom: 0; }
  .hv2--photo-inner .hv2-bloom { top: calc(100% - var(--hp-band) * .45); }
  .hv2--photo-inner .hv2-ground {
    background:
      radial-gradient(44% 64% at 76% calc(100% - var(--hp-band) * .45),
        color-mix(in srgb, var(--glow) 13%, transparent),
        color-mix(in srgb, var(--accent) 5%, transparent) 46%, transparent 72%),
      radial-gradient(60% 70% at 8% 0%,
        color-mix(in srgb, var(--accent) 8%, transparent), transparent 60%),
      linear-gradient(168deg, var(--bg-2) 0%, var(--bg) 46%, var(--bg-3) 100%);
  }
}
/* The scroll cue: Home leaves it out below 680px tall ("On a short screen..." above). The copy of a hero with a
   breadcrumb is taller and reaches the cue sooner, so it is left out below 720px tall. */
@media (max-height: 720px) { .hv2--photo-inner .dh__scrollcue { display: none; } }
/* A phone on its side: with the breadcrumb the copy can run past the first screen (Book an Audit up to 8px below
   it at 844x390), so the headline is capped at 8vh instead of 9.6vh there. */
@media (max-width: 980px) and (max-height: 430px) {
  .hv2--photo-inner { --hp-fs: clamp(1.75rem, min((100vw - 2 * var(--s-4)) / 8.75, 8vh), 3.6rem); }
}

/* Home "Two numbers decide the click": option A, editorial split (owner, 9 October 2026). */
/* Option A, "Editorial split" (.dkpi--a-split): Home, "Two numbers decide the click".
   Heading block on the left, the two KPIs stacked on the right as rows. Each row has the tag and a large
   abbreviation lockup (abbreviation | full name), the explanation under a hairline, and a decorative motif:
   FCP = a sweep arc that draws on view around a small page glyph; SoLV = concentric radius rings with the
   inner ring highlighted. The motifs are aria-hidden and carry no numbers or text.
   Every rule is scoped to .dkpi--a-split, so the 11 other pages that use .dkpi are untouched.
   Colours are tokens only (or color-mix of tokens); inside .surface-light they resolve to the light set
   from medimarketing-tokens.css (dark navy --ink, slate --ink-2, deep teal --accent, white --surface).
   Motion: the motifs key off the existing reveal (.reveal -> .in, added by the page script on view, or at
   once under reduced motion). The start states live under .js only, so without JS the motifs show finished;
   under prefers-reduced-motion nothing moves. */

/* ---- section frame ---------------------------------------------------------------------------------- */
/* Both flow seams (top wave + fade, bottom fade) stay in place and unchanged. They are drawn in --bg over
   a --bg section, so they read as no-ops here, but they sit above the container (z-index 2) and would
   wash out any content inside their bands. Lifting the container above them is what lets the padding come
   in: the top keeps only the wave's height plus a gap (was ~258px at 1440, now ~133px). */
.dio.dio--light.dkpi--a-split {
  padding-top: calc(clamp(46px, 6.5vw, 84px) + clamp(22px, 3.4vw, 50px));
  padding-bottom: clamp(56px, 7vw, 100px);
}
:is(.dkpi.dkpi--a-split, .dkpi.story-why) .container { z-index: 3; }
/* The hexagon background pattern on this light section too (owner, 9 October 2026): the same drawing as
   the dark sections, darkened by a filter towards the light surface's deep teal so it reads on --bg. It sits
   below the seams (z-index 1 < 2), stays clear of the top wave, and fades out towards the bottom. Our Story's
   "Why we exist" carries it the same way (user, 19 October 2026: "apply the hexagonal patterns here"). */
:is(.dio.dkpi--a-split, .dio.story-why)::before {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: var(--hex-a-light, .16);
  background: url(../img/hex-connections.webp) var(--hex-pos) / var(--hex-size) auto repeat-y;
  filter: brightness(.5) saturate(1.35);
  -webkit-mask-image: linear-gradient(180deg, transparent 90px, var(--bg) 190px),
                      radial-gradient(120% 115% at 50% 20%, var(--bg) 0%, var(--bg) 30%, transparent 78%);
  -webkit-mask-composite: source-in;
          mask-image: linear-gradient(180deg, transparent 90px, var(--bg) 190px),
                      radial-gradient(120% 115% at 50% 20%, var(--bg) 0%, var(--bg) 30%, transparent 78%);
          mask-composite: intersect;
}
/* The pattern fades out around the heading block so its lines never sit behind the copy: a soft veil in the
   section's own --bg, inside the container (above the pattern layer): a blurred block, solid behind every
   line of the copy (60px of margin, about two blur radii) and fading to nothing beyond it. */
.dkpi--a-split .s-head { position: relative; }
.dkpi--a-split .s-head::after {
  content: ""; position: absolute; inset: -60px -72px; z-index: -1; pointer-events: none;
  background: var(--bg); border-radius: 48px; filter: blur(28px);
}
/* soft accent glow behind the rows. It is a layer ABOVE the seams (z-index 2, later in the DOM) and below
   the container, so the seams' --bg paint can never show as bands over it. */
.dio.dkpi--a-split::after {
  content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background:
    radial-gradient(44% 60% at 76% 52%, color-mix(in srgb, var(--accent) 9%, transparent), transparent 72%),
    radial-gradient(30% 44% at 10% 46%, color-mix(in srgb, var(--accent) 5%, transparent), transparent 70%);
}

/* ---- layout: stacked below 1024, split at 1024+ --------------------------------------------------------- */
.dkpi--a-split .dkpi__split { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(28px, 5vw, 44px); }

.dkpi--a-split .s-head { max-width: 620px; margin: 0; text-align: left; }
.dkpi--a-split .s-head .eyebrow { margin-bottom: 18px; line-height: 1.45; }
.dkpi--a-split .s-head h2 { margin-bottom: 18px; }
.dkpi--a-split .s-head p { margin: 0; max-width: 46ch; color: color-mix(in srgb, var(--ink-2) 82%, var(--ink)); }
/* Industries hub: its link-out note lives in the heading block, so it sits under the intro and travels with it. */
.dkpi--a-split .s-head p.rv__note { margin-top: clamp(16px, 1.8vw, 22px); text-align: left; font: 400 .84rem/1.5 var(--body); }
.dkpi--a-split .s-head p.rv__note a { white-space: nowrap; }

.dkpi--a-split .dkpi__grid { grid-template-columns: minmax(0, 1fr); gap: clamp(14px, 1.6vw, 20px); }

@media (min-width: 1024px) {
  .dkpi--a-split .dkpi__split {
    grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
    gap: clamp(48px, 6vw, 96px); align-items: start;
  }
  .dkpi--a-split .s-head { padding-top: clamp(20px, 2.4vw, 30px); }
  .dkpi--a-split .s-head h2 { font-size: clamp(2.3rem, 4vw, 3.6rem); line-height: 1.03; }
}

/* ---- the rows ------------------------------------------------------------------------------------------- */
.dkpi--a-split .dkpi__card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "tag  motif"
    "abbr motif"
    "text text";
  column-gap: clamp(14px, 2.4vw, 28px);
  align-items: center;
  padding: clamp(20px, 2.4vw, 30px) clamp(20px, 2.8vw, 36px) clamp(20px, 2.4vw, 30px);
  border-radius: 20px;
  border-color: var(--line);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}
.dkpi--a-split .dkpi__card::before {
  height: 100%;
  background: radial-gradient(70% 90% at 100% 0, color-mix(in srgb, var(--accent) 7%, transparent), transparent 66%);
}

/* tag text a step deeper than --accent: the middle dot is a ~2px glyph and only clears 4.5:1 on rendered
   pixels at phone size with the darker mix */
.dkpi--a-split .dkpi__tag { grid-area: tag; justify-self: start; align-self: end; margin-bottom: 14px;
  color: color-mix(in srgb, var(--accent) 60%, var(--ink)); }

.dkpi--a-split .dkpi__abbr {
  grid-area: abbr; align-self: start;
  display: flex; align-items: center; gap: clamp(12px, 1.4vw, 18px);
  margin: 0;
  font-size: clamp(2.5rem, 4.2vw, 3.5rem); line-height: .92; letter-spacing: -.03em;
}
.dkpi--a-split .dkpi__abbr .full {
  display: block; margin: 0; box-sizing: content-box; max-width: 8.6em; text-wrap: wrap;
  padding-left: clamp(12px, 1.4vw, 18px);
  border-left: 2px solid color-mix(in srgb, var(--accent) 34%, transparent);
  font: 700 clamp(.9rem, .3vw + .82rem, 1rem)/1.25 var(--font); letter-spacing: 0;
  color: var(--accent);
}

.dkpi--a-split .dkpi__card > p {
  grid-area: text;
  margin: clamp(16px, 1.8vw, 22px) 0 0; padding-top: clamp(14px, 1.6vw, 18px);
  border-top: 1px solid var(--divider);
  font-size: var(--fs-body); line-height: 1.6; color: color-mix(in srgb, var(--ink-2) 82%, var(--ink));
}

/* ---- motifs (decorative) ------------------------------------------------------------------------------------ */
.dkpi--a-split .dkpi__motif {
  grid-area: motif; align-self: center;
  width: clamp(88px, 8.4vw, 120px); height: auto; aspect-ratio: 1; overflow: visible;
  fill: none; stroke-linecap: round;
}
.dkpi--a-split .dkpi__motif * { transform-box: view-box; transform-origin: 60px 60px; }

/* FCP: sweep */
.dkpi--a-split .m-stop--a { stop-color: var(--accent); stop-opacity: .28; }
.dkpi--a-split .m-stop--b { stop-color: var(--ink); stop-opacity: 1; }
.dkpi--a-split .m-orbit { stroke: var(--line-2); stroke-width: 1.4; stroke-dasharray: .1 5.2; }
.dkpi--a-split .m-track { stroke: var(--surface-2); stroke-width: 9; }
.dkpi--a-split .m-sweep { stroke: url(#dkpiA-sweep); stroke-width: 9; }
.dkpi--a-split .m-head__halo { fill: color-mix(in srgb, var(--accent) 16%, transparent); stroke: none; }
.dkpi--a-split .m-head__dot  { fill: var(--surface); stroke: var(--ink); stroke-width: 3; }
.dkpi--a-split .m-page__sheet { fill: var(--surface); stroke: color-mix(in srgb, var(--accent) 55%, transparent); stroke-width: 1.6; }
.dkpi--a-split .m-page__bar { stroke: none; fill: color-mix(in srgb, var(--accent) 34%, transparent); }
.dkpi--a-split .m-page__bar--1 { fill: var(--ink); }

/* SoLV: rings */
.dkpi--a-split .m-ring { stroke: var(--line-2); stroke-width: 1.4; }
.dkpi--a-split .m-ring--4 { stroke-dasharray: .1 5.2; }
.dkpi--a-split .m-ring--3 { stroke: color-mix(in srgb, var(--accent) 22%, transparent); }
.dkpi--a-split .m-ring--2 { stroke: color-mix(in srgb, var(--accent) 40%, transparent); }
.dkpi--a-split .m-radius { stroke: color-mix(in srgb, var(--accent) 45%, transparent); stroke-width: 1.4; stroke-dasharray: 3 3; }
.dkpi--a-split .m-radius__end { fill: var(--accent); stroke: none; }
.dkpi--a-split .m-core__fill { fill: color-mix(in srgb, var(--accent) 14%, transparent); stroke: none; }
.dkpi--a-split .m-core { stroke: var(--accent); stroke-width: 4; }
.dkpi--a-split .m-pin__halo { fill: var(--surface); stroke: none; }
.dkpi--a-split .m-pin { fill: var(--ink); stroke: none; }

/* ---- motion (JS on, motion allowed): start states, then the card's .in plays them ------------------------- */
@media (prefers-reduced-motion: no-preference) {
  .js .dkpi--a-split .m-sweep { stroke-dasharray: 185; stroke-dashoffset: 185;
    transition: stroke-dashoffset 1.5s var(--ease-out) .25s; }
  .js .dkpi--a-split .m-head { transform: rotate(-240deg); opacity: 0;
    transition: transform 1.5s var(--ease-out) .25s, opacity .3s linear .25s; }
  .js .dkpi--a-split .m-page__bar { opacity: 0; transform: scaleX(.4); transform-box: fill-box; transform-origin: 0 50%;
    transition: opacity .45s var(--ease-out), transform .6s var(--ease-out); }
  .js .dkpi--a-split .m-page__bar--1 { transition-delay: 1.05s; }
  .js .dkpi--a-split .m-page__bar--2 { transition-delay: 1.2s; }
  .js .dkpi--a-split .m-page__bar--3 { transition-delay: 1.35s; }

  .js .dkpi--a-split .m-ring, .js .dkpi--a-split .m-core__fill { opacity: 0; transform: scale(.72);
    transition: opacity .7s var(--ease-out), transform 1.1s var(--ease-out); }
  .js .dkpi--a-split .m-ring--2 { transition-delay: .35s; }
  .js .dkpi--a-split .m-ring--3 { transition-delay: .5s; }
  .js .dkpi--a-split .m-ring--4 { transition-delay: .65s; }
  .js .dkpi--a-split .m-core__fill { transition-delay: .2s; }
  .js .dkpi--a-split .m-core { stroke-dasharray: 126; stroke-dashoffset: 126;
    transition: stroke-dashoffset 1.2s var(--ease-out) .3s; }
  .js .dkpi--a-split .m-radius, .js .dkpi--a-split .m-radius__end { opacity: 0; transition: opacity .5s linear 1.1s; }

  .dkpi--a-split .dkpi__card.in .m-sweep,
  .dkpi--a-split .dkpi__card.in .m-core { stroke-dashoffset: 0; }
  .dkpi--a-split .dkpi__card.in .m-head { transform: none; opacity: 1; }
  .dkpi--a-split .dkpi__card.in .m-page__bar,
  .dkpi--a-split .dkpi__card.in .m-ring,
  .dkpi--a-split .dkpi__card.in .m-core__fill { opacity: 1; transform: none; }
  .dkpi--a-split .dkpi__card.in .m-radius,
  .dkpi--a-split .dkpi__card.in .m-radius__end { opacity: 1; }
}

/* ---- small screens ----------------------------------------------------------------------------------------- */
/* below 600 the tag takes its own full row and the motif sits beside the abbreviation lockup, so the tag
   pill never has to wrap inside a column narrowed by the motif */
@media (max-width: 599px) {
  .dkpi--a-split .dkpi__card { grid-template-areas: "tag tag" "abbr motif" "text text"; }
  .dkpi--a-split .dkpi__abbr { flex-direction: column; align-items: flex-start; gap: 8px; align-self: center; }
  .dkpi--a-split .dkpi__abbr .full { padding-left: 0; border-left: 0; max-width: none; }
  .dkpi--a-split .dkpi__motif { width: clamp(66px, 20vw, 84px); }
}
/* the eyebrow stays on one line down to 320: tighter tracking under 375, and no leading rule under 360 */
@media (max-width: 374px) {
  .dkpi--a-split .s-head .eyebrow { letter-spacing: .14em; }
}
@media (max-width: 359px) {
  .dkpi--a-split .s-head .eyebrow::before { display: none; }
}

/* The 2-KPI Method, "Two numbers stand between a search and a booked patient": the same editorial split in teal
   (user, 16 October 2026: option A of three, "turn it into a teal version"). It is a dark section, so every token
   above resolves to the dark set; only what was tuned for the light surface changes. The ground runs from the
   hero's foot (--bg-3) into --bg over --join, so that edge is not a line; it ends solid on the white section after
   it, a straight edge like the site's other dark-to-light joins. The hexagon pattern is drawn as on the dark sections (no darkening
   filter, --hex-a), and the light veil behind the heading is not needed. Each card closes with a note line. */
.dio.dkpi--a-teal { --join: clamp(110px, 12vw, 180px);
  padding-block: clamp(72px, 8.5vw, 120px) clamp(64px, 8vw, 110px);
  background: linear-gradient(180deg, var(--bg-3), var(--bg) var(--join)); }
.dio.dkpi--a-teal::before { filter: none; opacity: var(--hex-a);
  -webkit-mask-image: linear-gradient(180deg, transparent 40px, var(--bg) 160px),
                      radial-gradient(120% 115% at 50% 20%, var(--bg) 0%, var(--bg) 30%, transparent 78%);
          mask-image: linear-gradient(180deg, transparent 40px, var(--bg) 160px),
                      radial-gradient(120% 115% at 50% 20%, var(--bg) 0%, var(--bg) 30%, transparent 78%); }
.dkpi--a-teal .s-head::after { content: none; }
.dkpi--a-teal .dkpi__card { grid-template-areas: "tag motif" "abbr motif" "text text" "note note"; }
.dkpi--a-teal .dkpi__card > p.dkpi__note { grid-area: note; margin: 10px 0 0; padding-top: 0; border-top: 0;
  font: 600 .86rem/1.45 var(--body); color: var(--ink); }
@media (max-width: 599px) {
  .dkpi--a-teal .dkpi__card { grid-template-areas: "tag tag" "abbr motif" "text text" "note note"; }
}
/* The 8 industry pages' and the Industries hub's "two numbers" sections take the editorial split too (user, 16 October
   2026: "apply the same design" to the similar sections): same FCP and SoLV cards and motifs as Home; each card keeps
   its closing lever line (a figure and its source) as a last row, under its own hairline. */
.dkpi--a-split .dkpi__card:has(> .dkpi__lever) { grid-template-areas: "tag motif" "abbr motif" "text text" "note note"; }
.dkpi--a-split .dkpi__card > .dkpi__lever { grid-area: note; margin-top: clamp(14px, 1.6vw, 18px); }
@media (max-width: 599px) {
  .dkpi--a-split .dkpi__card:has(> .dkpi__lever) { grid-template-areas: "tag tag" "abbr motif" "text text" "note note"; }
}

/* The 2-KPI Method, "One Local Radius Scan, three measures" (user, 16 October 2026: option A of three): the same
   editorial split on the light surface with three measures and no motifs, each card closing with its "better" line.
   Every editorial split (here, Home's "Two numbers decide the click" and The 2-KPI Method's teal "Two numbers"; user,
   16 October 2026: "apply it here as well and to other pages where applicable"): from 1024px, where the split has two
   columns, the heading block "should move along when user scrolls until only to end of the section": it sticks below
   the fixed header while the cards scroll past and is let go where the split ends (its containing block), so it never
   leaves the section. Where the heading block is as tall as the cards, there is nothing to travel and it stays put.
   Sticky works here because no ancestor is a scroll container (.dio clips with overflow: clip). */
.dkpi--m3 .dkpi__card { grid-template-areas: "tag tag" "abbr abbr" "text text" "note note"; padding-block: clamp(16px, 1.8vw, 22px); }
.dkpi--m3 .dkpi__abbr { font-size: clamp(2rem, 3.2vw, 2.7rem); }
.dkpi--m3 .dkpi__card > p:not(.dkpi__note) { margin-top: 12px; padding-top: 12px; }
.dkpi--m3 .dkpi__card > p.dkpi__note { grid-area: note; margin: 8px 0 0; padding-top: 0; border-top: 0;
  font: 600 .86rem/1.45 var(--body); color: var(--ink); }
.dkpi--m3 .dkpi__card > p.dkpi__note b { color: var(--accent); }
@media (min-width: 1024px) {
  .dkpi--a-split .dkpi__split > .s-head { position: sticky; top: clamp(96px, 11vh, 120px); }
}

/* Home "What a patient sees after the tap": option B, versus split (owner, 9 October 2026). */
/* Option B, "Versus split" (.dfcp--b-versus): Home, "What a patient sees after the tap" (KPI 01, FCP).
   One split frame instead of two cards: the competitor half is tinted warm (the danger signal colour),
   the SGEN CMS half is tinted teal (--glow), and the two halves meet on a slanted seam with a round
   "vs" mark on it. Each half is centred: name + flag, caption, a larger gauge, the big reading under it,
   then the yes/no lines. The heading block sits above (eyebrow + h2 on the left, intro on the right from
   900px up); the method note stays under the frame.
   Every word, number, flag, caption, aria-label and link is the original's. The SVG gauges are the
   original drawings; the only markup change inside them is pathLength="1" on the two fill arcs so the
   arcs can draw on with the needle. The "vs" mark is a CSS glyph on an aria-hidden element (alt text
   empty), and the check / cross next to Yes / No are CSS shapes: neither adds text to the page.
   Every rule is scoped to .dfcp--b-versus, so the 9 other pages that use .dfcp are untouched.
   Colours are tokens only (or color-mix of tokens).
   Motion keys off the page script's existing hooks: .reveal -> .in (the halves slide in from their own
   sides, the "vs" mark pops in between them), [data-fcp] -> .is-in (each needle swings from the start of
   its track to data-ndl while its fill arc draws behind it), .count[data-to] counts up. Without JS the
   gauges show finished (needle hidden, as on the base site); under prefers-reduced-motion nothing moves. */

/* ---- section frame --------------------------------------------------------------------------------------- */
/* Shorter padding than the base .dfcp (128px a side at 1440) so the whole section fits one 900px screen. */
.dio.dfcp.dfcp--b-versus { padding-block: clamp(48px, 4.6vw, 66px); }
/* The teal versus (The 2-KPI Method, user, 16 October 2026: "looks too tight") is one section among others there, not
   a one-screen block: it takes the same padding as the sections around it. */
.dio.dfcp.dfcp--b-versus.dio--dark { padding-block: var(--pad); }

/* ---- heading block: stacked below 900px, two columns from 900px ------------------------------------------- */
.dfcp--b-versus .s-head { max-width: none; margin-bottom: clamp(24px, 2.8vw, 36px); }
.dfcp--b-versus .s-head h2 { max-width: 15ch; }
.dfcp--b-versus .s-head p { max-width: 52ch; margin: 0; }
@media (min-width: 900px) {
  .dfcp--b-versus .s-head {
    display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    column-gap: clamp(32px, 5vw, 80px); align-items: end;
  }
  .dfcp--b-versus .s-head .eyebrow { grid-column: 1; grid-row: 1; justify-self: start; }
  .dfcp--b-versus .s-head h2 { grid-column: 1; grid-row: 2; margin: 0; max-width: none; }
  /* the intro spans the eyebrow's row too: a long intro (the industry pages run to 8 lines) grows up beside
     the eyebrow instead of pushing the frame down; it stays bottom-aligned with the heading */
  .dfcp--b-versus .s-head p { grid-column: 2; grid-row: 1 / span 2; padding-bottom: .3em; }
}

/* ---- the split frame ----------------------------------------------------------------------------------------
   --S is the seam's slant (how far its top sits right of its bottom), --g half the seam's width. The halves
   overlap by --S and each is clipped on the seam side, so the frame's own background shows through only along
   the seam: a hairline running from the warm colour at the top to the teal at the bottom.
   Rows are shared (subgrid) so the two gauges, readings and yes/no rules line up across the seam. */
.dfcp--b-versus .dfcp__versus {
  --S: clamp(22px, 2.8vw, 40px);
  --g: 1.5px;
  --pad-x: clamp(20px, 2.8vw, 44px);
  position: relative; isolation: isolate;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: repeat(5, auto);
  gap: 0; max-width: none; margin-inline: 0; align-items: stretch;
  border-radius: calc(var(--r-surface) + 10px); overflow: clip;
  background: linear-gradient(180deg, var(--sig-danger) 0%, color-mix(in srgb, var(--sig-danger) 40%, var(--glow)) 50%, var(--glow) 100%);
  box-shadow: var(--shadow-elev);
}

.dfcp--b-versus .dfcp__half {
  grid-row: 1 / span 5;
  display: grid; grid-template-rows: subgrid; justify-items: center; text-align: center;
  padding: clamp(24px, 2.8vw, 38px) var(--pad-x) clamp(24px, 2.6vw, 34px);
  position: relative; border: 0; border-radius: 0;
}
.dfcp--b-versus .dfcp__half--bad {
  grid-column: 1;
  margin-right: calc(var(--S) / -2);
  padding-right: calc(var(--pad-x) + var(--S) / 2);
  clip-path: polygon(0 0, calc(100% - var(--g)) 0, calc(100% - var(--S) - var(--g)) 100%, 0 100%);
  background:
    radial-gradient(54% 36% at 50% 44%, color-mix(in srgb, var(--sig-danger) 22%, transparent), transparent 72%),
    repeating-linear-gradient(135deg, color-mix(in srgb, var(--sig-danger) 7%, transparent) 0 2px, transparent 2px 15px),
    linear-gradient(195deg, color-mix(in srgb, var(--sig-danger) 12%, var(--bg-2)) 0%, color-mix(in srgb, var(--sig-danger) 26%, var(--bg-3)) 100%);
  box-shadow: inset 0 3px 0 var(--sig-danger);
}
.dfcp--b-versus .dfcp__half--good {
  grid-column: 2;
  margin-left: calc(var(--S) / -2);
  padding-left: calc(var(--pad-x) + var(--S) / 2);
  clip-path: polygon(calc(var(--S) + var(--g)) 0, 100% 0, 100% 100%, var(--g) 100%);
  background:
    radial-gradient(54% 36% at 50% 44%, color-mix(in srgb, var(--glow) 17%, transparent), transparent 72%),
    linear-gradient(165deg, color-mix(in srgb, var(--glow) 16%, var(--bg-2)) 0%, color-mix(in srgb, var(--glow) 11%, var(--bg-3)) 100%);
  box-shadow: inset 0 3px 0 var(--glow);
}

/* the "vs" mark: centred on the seam (the seam crosses the frame's centre point) */
.dfcp--b-versus .dfcp__vs {
  grid-column: 1 / -1; grid-row: 1 / -1; align-self: center; justify-self: center; z-index: 3;
  display: grid; place-items: center;
  width: clamp(54px, 5vw, 70px); aspect-ratio: 1; border-radius: 50%;
  border: 2px solid transparent;
  background:
    linear-gradient(var(--bg-3), var(--bg-3)) padding-box,
    linear-gradient(135deg, var(--sig-danger), var(--glow)) border-box;
  box-shadow: 0 0 0 6px color-mix(in srgb, var(--bg-3) 55%, transparent), var(--shadow-card);
  pointer-events: none;
}
.dfcp--b-versus .dfcp__vs::before {
  content: "vs"; content: "vs" / "";
  font: italic 800 clamp(1rem, 1.3vw, 1.3rem)/1 var(--font); letter-spacing: -.01em; color: var(--ink);
  transform: translateY(-.04em);
}

/* ---- inside each half -------------------------------------------------------------------------------------- */
.dfcp--b-versus .dfcp__card-head { justify-content: center; flex-wrap: wrap; gap: 8px 12px; margin: 0 0 10px; align-self: start; }
.dfcp--b-versus .dfcp__who { font-size: clamp(1.05rem, .45vw + .92rem, 1.3rem); }
.dfcp--b-versus .dfcp__flag { font-size: .66rem; padding: 6px 11px; }
/* the teal flag gets a solid fill (its tint mixed into --bg-3, like the base red flag) so it keeps 4.5:1 over the
   brighter top of the teal half; the base flag is see-through (--sig-good-soft) */
.dfcp--b-versus .dfcp__flag.good { background: color-mix(in srgb, var(--glow) 12%, var(--bg-3)); }
/* below 900px the halves are too narrow for name + flag on one line on both sides: stack both, so the halves match */
@media (max-width: 899px) {
  .dfcp--b-versus .dfcp__card-head { flex-direction: column; gap: 9px; }
}
.dfcp--b-versus .dfcp__cap {
  max-width: 48ch; margin: 0 0 clamp(8px, 1vw, 12px); align-self: start; text-wrap: balance;
  font-size: .88rem; color: color-mix(in srgb, var(--ink-2) 70%, var(--ink));
}

.dfcp--b-versus .dfcp__gauge { width: 100%; max-width: clamp(210px, 24vw, 320px); margin: 0; align-self: end; }
.dfcp--b-versus .dfcp__gauge .track { stroke: color-mix(in srgb, var(--ink-3) 36%, transparent); }

/* the gauge drawing has empty space under its hub, so the reading tucks up into it */
.dfcp--b-versus .dfcp__gauge-read { margin: calc(-1 * clamp(2px, .7vw, 10px)) 0 clamp(16px, 1.8vw, 24px); padding-top: 0; border-top: 0; }
.dfcp--b-versus .dfcp__gauge-read .sec { font-size: clamp(2.9rem, 4.4vw, 4.3rem); line-height: .95; font-variant-numeric: tabular-nums; }
.dfcp--b-versus .dfcp__gauge-read .u { margin-top: 8px; font-size: .7rem; letter-spacing: .14em; color: color-mix(in srgb, var(--ink-2) 70%, var(--ink)); }

.dfcp--b-versus .dfcp__metric { width: 100%; max-width: 400px; margin: 0; align-self: start; padding-top: 14px; text-align: left; }
.dfcp--b-versus .dfcp__half--bad  .dfcp__metric { border-top-color: color-mix(in srgb, var(--sig-danger) 34%, transparent); }
.dfcp--b-versus .dfcp__half--good .dfcp__metric { border-top-color: color-mix(in srgb, var(--glow) 30%, transparent); }
.dfcp--b-versus .dfcp__metric .ln { align-items: center; font-size: .9rem; color: color-mix(in srgb, var(--ink-2) 70%, var(--ink)); }
/* a cross / check in a ring before No / Yes (CSS shapes in the answer's own colour, no text) */
.dfcp--b-versus .dfcp__metric .ln b { position: relative; display: inline-flex; align-items: center; gap: 7px; flex: none; }
.dfcp--b-versus .dfcp__metric .ln b::before {
  content: ""; flex: none; width: 17px; height: 17px; border-radius: 50%; box-sizing: border-box;
  border: 1.5px solid currentColor;
}
.dfcp--b-versus .dfcp__metric .ln.bad b::before {
  background:
    linear-gradient(45deg,  transparent calc(50% - .8px), currentColor calc(50% - .8px) calc(50% + .8px), transparent calc(50% + .8px)) center / 7px 7px no-repeat,
    linear-gradient(-45deg, transparent calc(50% - .8px), currentColor calc(50% - .8px) calc(50% + .8px), transparent calc(50% + .8px)) center / 7px 7px no-repeat;
}
.dfcp--b-versus .dfcp__metric .ln.good b::after {
  content: ""; position: absolute; left: 6px; top: 50%; width: 3.5px; height: 7px;
  border: solid currentColor; border-width: 0 1.6px 1.6px 0;
  transform: translateY(-62%) rotate(45deg);
}

/* ---- motion -------------------------------------------------------------------------------------------------- */
/* halves slide in from their own sides; the frame clips them, so they meet at the seam */
.js .dfcp--b-versus .dfcp__half--bad.reveal  { transform: translateX(-36px); }
.js .dfcp--b-versus .dfcp__half--good.reveal { transform: translateX(36px); }
.js .dfcp--b-versus .dfcp__half.reveal.in    { transform: none; }
.js .dfcp--b-versus .dfcp__vs.reveal    { transform: scale(.5) rotate(-24deg); }
.js .dfcp--b-versus .dfcp__vs.reveal.in { transform: none; }

/* White version (owner, 15 October 2026; Home first, then the 8 industry pages): the versus section sits on the light
   surface right under a light section (Home: "Two numbers decide the click"; industry pages: the persona pillars),
   so the two read as one white block. The rules above are tokens
   only; inside .surface-light they resolve to the light set (deep teal --glow, --sig-danger #C03046, navy --ink,
   white --bg-3). The dark bed and the glow are left out of this section's markup (they are drawn for dark
   grounds). On Home the section above carries the hexagon pattern, so this one continues it (same drawing, filter
   and strength), fading in below the top edge so it does not restart at the join, with a veil in --bg that keeps
   its lines out from behind the heading block. Since 16 October 2026 the industry pages' section above is the same
   editorial split, so theirs continues it too. */
.dkpi--a-split + .dio.dfcp--b-versus.surface-light::before {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: var(--hex-a-light, .16);
  background: url(../img/hex-connections.webp) var(--hex-pos) / var(--hex-size) auto repeat-y;
  filter: brightness(.5) saturate(1.35);
  -webkit-mask-image: linear-gradient(180deg, transparent 0, var(--bg) 160px),
                      radial-gradient(120% 115% at 50% 30%, var(--bg) 0%, var(--bg) 30%, transparent 78%);
  -webkit-mask-composite: source-in;
          mask-image: linear-gradient(180deg, transparent 0, var(--bg) 160px),
                      radial-gradient(120% 115% at 50% 30%, var(--bg) 0%, var(--bg) 30%, transparent 78%);
          mask-composite: intersect;
}
.dkpi--a-split + .dfcp--b-versus.surface-light .container { position: relative; z-index: 2; }
.dkpi--a-split + .dfcp--b-versus.surface-light .s-head { position: relative; }
.dkpi--a-split + .dfcp--b-versus.surface-light .s-head::after {
  content: ""; position: absolute; inset: -60px -72px; z-index: -1; pointer-events: none;
  background: var(--bg); border-radius: 48px; filter: blur(28px);
}
/* Contrast on white (measured: the slate captions, the red flag text and "No" fell to 3.9 to 4.4:1 on the
   pinkest part of the competitor half). On the light surface the warm half is tinted half as strongly, the
   section's red text colour is the danger red mixed towards --ink, the small grey copy in both halves leans to
   --ink, and the method link under the frame is a deeper teal. Everything stays a token or a color-mix of tokens. */
.dfcp--b-versus.surface-light { --sig-danger-2: color-mix(in srgb, var(--sig-danger) 72%, var(--ink)); }
.dfcp--b-versus.surface-light .dfcp__half--bad {
  background:
    radial-gradient(54% 36% at 50% 44%, color-mix(in srgb, var(--sig-danger) 11%, transparent), transparent 72%),
    repeating-linear-gradient(135deg, color-mix(in srgb, var(--sig-danger) 5%, transparent) 0 2px, transparent 2px 15px),
    linear-gradient(195deg, color-mix(in srgb, var(--sig-danger) 6%, var(--bg-2)) 0%, color-mix(in srgb, var(--sig-danger) 13%, var(--bg-3)) 100%);
}
.dfcp--b-versus.surface-light .dfcp__cap,
.dfcp--b-versus.surface-light .dfcp__gauge-read .u,
.dfcp--b-versus.surface-light .dfcp__metric .ln { color: color-mix(in srgb, var(--ink-2) 35%, var(--ink)); }
/* the method link sits in the frame's drop shadow: a deeper teal keeps it at 4.5:1 there */
.dfcp--b-versus.surface-light .rv__note a { color: color-mix(in srgb, var(--accent) 60%, var(--ink)); }

/* the needle starts on the start of its track (not straight up) and swings to data-ndl on .is-in (base rule);
   the fill arc draws on behind it over the same time and curve, so the arc's tip follows the needle.
   The arcs carry pathLength="1"; the start offsets leave the round caps out of sight before the draw. */
.dfcp--b-versus .dfcp__gauge .needle { transform: rotate(-90deg); }
.dfcp--b-versus .dfcp__gauge .fill-bad,
.dfcp--b-versus .dfcp__gauge .fill-good {
  stroke-dasharray: 1 2;
  transition: stroke-dashoffset 2.8s var(--ease-out, var(--ease)) .2s;
}
.dfcp--b-versus .dfcp__gauge .fill-bad  { stroke-dashoffset: 1.18; }
.dfcp--b-versus .dfcp__gauge .fill-good { stroke-dashoffset: 1.04; }
.dfcp--b-versus .dfcp__card.is-in .dfcp__gauge .fill-bad,
.dfcp--b-versus .dfcp__card.is-in .dfcp__gauge .fill-good,
html:not(.js) .dfcp--b-versus .dfcp__gauge .fill-bad,
html:not(.js) .dfcp--b-versus .dfcp__gauge .fill-good { stroke-dashoffset: 0; }

@media (prefers-reduced-motion: reduce) {
  .dfcp--b-versus .dfcp__gauge .needle,
  .dfcp--b-versus .dfcp__gauge .fill-bad,
  .dfcp--b-versus .dfcp__gauge .fill-good { transition: none !important; }
  .js .dfcp--b-versus .dfcp__half.reveal,
  .js .dfcp--b-versus .dfcp__vs.reveal { transform: none !important; }
}

/* ---- phones: the halves stack, the seam turns to a slanted horizontal cut, the "vs" mark sits on it -------- */
@media (max-width: 639px) {
  .dfcp--b-versus .dfcp__versus {
    --S: 26px; --pad-x: clamp(16px, 5vw, 24px);
    grid-template-columns: minmax(0, 1fr); grid-template-rows: none;
    background: linear-gradient(90deg, var(--sig-danger), var(--glow));
  }
  .dfcp--b-versus .dfcp__half { grid-row: auto; grid-column: 1; display: flex; flex-direction: column; align-items: center; }
  .dfcp--b-versus .dfcp__half--bad {
    margin: 0 0 calc(var(--S) * -1);
    padding: 28px var(--pad-x) calc(36px + var(--S));
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--S) - var(--g)), 0 calc(100% - var(--g)));
  }
  .dfcp--b-versus .dfcp__half--good {
    margin: 0;
    padding: calc(46px + var(--S)) var(--pad-x) 28px;
    clip-path: polygon(0 calc(var(--S) + var(--g)), 100% var(--g), 100% 100%, 0 100%);
  }
  .dfcp--b-versus .dfcp__gauge { max-width: 240px; }
  /* the mark is a zero-height row between the halves; its negative margins centre it on the seam */
  .dfcp--b-versus .dfcp__vs {
    grid-row: auto; width: 56px;
    margin: calc(var(--S) / 2 - 28px) auto calc(-28px - var(--S) / 2);
  }
  .dfcp--b-versus .dfcp__metric { max-width: 340px; }
}
/* in the phone stack the halves are flex columns, where align-self is horizontal: centre every child */
@media (max-width: 639px) {
  .dfcp--b-versus .dfcp__half > * { align-self: center; }
}

/* Fit one screen (owner, 9 October 2026): from 900px wide the section's vertical sizes follow the screen height,
   so the whole section (heading, the split frame, the note) fits below the 58px scrolled header on 1440x900,
   1366x768 and 1280x800 screens. Text keeps its usual minimum sizes. Phones still scroll. */
@media (min-width: 900px) {
  .dio.dfcp.dfcp--b-versus { padding-block: clamp(18px, 3.6vh, 66px); }
  .dfcp--b-versus .s-head { margin-bottom: clamp(12px, 2.4vh, 36px); }
  .dfcp--b-versus .s-head h2 { font-size: clamp(2.1rem, min(4.6vw, 6.4vh), 3.6rem); }
  /* on short screens the intro also steps down toward the lead's own 18px minimum (never past --fs-lead) */
  .dfcp--b-versus .s-head p { font-size: min(var(--fs-lead), max(1.125rem, 2.4vh)); }
  .dfcp--b-versus .dfcp__half { padding: clamp(14px, 2.6vh, 38px) var(--pad-x) clamp(14px, 2.4vh, 34px); }
  .dfcp--b-versus .dfcp__card-head { margin-bottom: clamp(4px, .9vh, 10px); }
  .dfcp--b-versus .dfcp__gauge { max-width: clamp(170px, min(24vw, 33vh), 320px); }
  .dfcp--b-versus .dfcp__gauge-read { margin-bottom: clamp(8px, 1.6vh, 24px); }
  .dfcp--b-versus .dfcp__gauge-read .sec { font-size: clamp(2.3rem, min(4.4vw, 7.2vh), 4.3rem); }
  .dfcp--b-versus .dfcp__metric { padding-top: clamp(6px, 1.2vh, 14px); }
}
.dfcp--b-versus .rv__note { margin-top: clamp(12px, 2.2vh, 30px); }
/* Readability (owner's readability pass, 9 October 2026): from 900px the intro sits in the right column, over the
   brighter part of the hex pattern, so a soft veil in the section's own --bg sits behind it (as behind the KPI
   heading). The red "No" gets a little of --ink so it keeps its old contrast over the warmer foot of the red half. */
@media (min-width: 900px) {
  .dfcp--b-versus .s-head p { position: relative; isolation: isolate; }
  .dfcp--b-versus .s-head p::before {
    content: ""; position: absolute; inset: -30px -40px; z-index: -1; pointer-events: none;
    background: var(--bg); border-radius: 40px; filter: blur(22px);
  }
}
.dfcp--b-versus .dfcp__metric .ln.bad b { color: color-mix(in srgb, var(--sig-danger-2) 78%, var(--ink)); }