/* ── Docnote Asset Directory ───────────────────────────────────────────
   Structural styles only. Colours and sizes come from CSS custom properties
   written per-instance in module.html, so nothing here needs to know which
   editor fields exist — and nothing here reaches the generated snippet code,
   which carries its whole appearance inline.

   Blocks ported from `docnote-embed-code.module/module.css` are marked with
   their source line range. They are renamed `dec` → `dad` and otherwise
   unchanged; every oddity in them records a real bug.
────────────────────────────────────────────────────────────────────── */

.dad {
  box-sizing: border-box;
  width: 100%;
}

/* `container-type` lives here, and every @container rule in module.html names
   .dad__grid — a rule cannot style its own container, and such a rule parses,
   passes review, and silently does nothing while every DESCENDANT selector in
   the same block works, which is exactly what makes it look functional.

   Deliberately NOT on .dad-card: the cards are grid items, and giving each one
   its own containment is not what a column count needs to query. */
.dad__inner {
  box-sizing: border-box;
  width: 100%;
  margin: 0 auto;
  container-type: inline-size;
}

/* ── Filter chips ─────────────────────────────────────────────────── */

.dad__chips[hidden] { display: none; }

.dad__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 20px;
  min-width: 0;
}

/* Outlined pills rather than a segmented track. The active chip carries three
   redundant signals — fill, text colour, and weight — so state is never colour
   alone, and `aria-pressed` carries it to assistive tech. */
.dad__chip {
  appearance: none;
  -webkit-appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 16px;
  background: transparent;
  border: 1px solid var(--dad-chip-border, #d4e1ee);
  border-radius: 999px;
  color: var(--dad-chip-fg, #163f6d);
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.2;
  cursor: pointer;
  transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}

.dad__chip:hover {
  background: rgba(8, 44, 84, 0.04);
  border-color: var(--dad-chip-active-bg, #082c54);
}

.dad__chip--active,
.dad__chip--active:hover {
  background: var(--dad-chip-active-bg, #082c54);
  border-color: var(--dad-chip-active-bg, #082c54);
  color: var(--dad-chip-active-fg, #ffffff);
  font-weight: 600;
}

.dad__chip:focus-visible {
  outline: 3px solid var(--dad-focus, #1b99e8);
  outline-offset: 2px;
}


/* ── Grid ────────────────────────────────────────────────────────────
   A plain grid, deliberately. The toolkit module subdivides its tracks so an
   incomplete last row can be centred or stretched, but that maths derives each
   card's `grid-column` from `total % cols` computed SERVER-SIDE. Filtering
   changes the visible count at runtime, so those spans would be wrong the
   instant a chip is clicked.

   `grid-auto-rows: 1fr` makes every card in a row match the tallest. */
.dad__grid {
  display: grid;
  grid-template-columns: repeat(var(--dad-cols, 3), minmax(0, 1fr));
  grid-auto-rows: 1fr;
  column-gap: var(--dad-gap-x, 24px);
  row-gap: var(--dad-gap-y, 28px);
}

/* ── Card ────────────────────────────────────────────────────────────── */

/* Same story as .dad__chips[hidden] — the author `display: flex` below would
   otherwise beat the UA rule and a filtered-out card would stay visible. */
.dad-card[hidden] { display: none; }

.dad-card {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-width: 0;
  padding: var(--dad-card-pad, 20px);
  background: var(--dad-card-bg, #ffffff);
  border: var(--dad-card-border-w, 1px) solid var(--dad-card-border, #d4e1ee);
  border-radius: var(--dad-card-radius, 12px);
  color: inherit;
  transition: background-color 0.18s ease, border-color 0.18s ease,
              transform 0.18s ease, box-shadow 0.18s ease;
}

.dad-card--linked,
.dad-card--modal {
  cursor: pointer;
}

/* The <a> variant is the whole card, so the ring belongs on it. The <div>
   variant is not focusable — its <button> is — so it gets the ring via
   :focus-within instead, and the two read identically. */
.dad-card--linked:focus-visible,
.dad-card--modal:focus-within {
  outline: 3px solid var(--dad-focus, #1b99e8);
  outline-offset: 2px;
}

/* The card carries no category eyebrow — the chips say that already. This row
   exists only when there is a work-in-progress pill to show. */
.dad-card__flags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 8px;
  margin: 14px 0 0;
}

.dad-card__wip {
  display: inline-block;
  padding: 2px 7px;
  background: var(--dad-wip-bg, #fff4e0);
  border-radius: 999px;
  color: var(--dad-wip-fg, #8a5300);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
}

/* 14px because the title normally follows the thumbnail directly. When a
   work-in-progress row precedes it, that row takes the 14px and the title
   tightens to 8px — see the adjacent-sibling rule below. */
.dad-card__title {
  margin: 14px 0 0;
  color: var(--dad-title, #082c54);
  font-size: var(--dad-title-size, 18px);
  font-weight: var(--dad-title-weight, 600);
  line-height: 1.3;
  letter-spacing: -0.01em;
  text-transform: none;
}

.dad-card__flags + .dad-card__title { margin-top: 8px; }

/* `pre-line` renders the field's own newlines, so the copy needs no markup and
   nothing is interpolated unescaped. */
.dad-card__desc {
  margin: 8px 0 0;
  color: var(--dad-desc, #163f6d);
  font-size: var(--dad-desc-size, 14.5px);
  line-height: var(--dad-desc-lh, 1.6);
  white-space: pre-line;
}

/* `margin-top: auto` pins every action to the bottom of its card, so the row of
   CTAs shares one baseline however uneven the descriptions are. */
.dad-card__cta {
  appearance: none;
  -webkit-appearance: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: auto;
  padding: 16px 0 0;
  background: none;
  border: 0;
  color: var(--dad-cta, #0d63a0);
  font-family: inherit;
  font-size: var(--dad-cta-size, 14px);
  font-weight: 600;
  line-height: 1.2;
  text-align: left;
}

/* ── Why the button is not a hit target ──
   `pointer-events: none` lets a mouse click fall through to the whole-card
   target, so the visitor can click anywhere on the card. It does NOT disable
   the button: `pointer-events` is a hit-testing property only, and keyboard
   activation runs the HTML activation behaviour, which dispatches `click` AT
   the element with no hit test. So this stays a real, focusable control — which
   is why it must never also get `tabindex="-1" aria-hidden="true"`. That
   combination is the WCAG 2.1.1 Level A failure recorded from
   `customer-stories-video.module`, where it made every video unplayable without
   a mouse. module.js binds an explicit handler with stopPropagation() rather
   than relying on the click bubbling to the card. */
button.dad-card__cta {
  pointer-events: none;
  cursor: pointer;
}

/* The ring is drawn by .dad-card--modal:focus-within, on the card, so the
   button suppresses its own — two nested rings read as a rendering fault. */
button.dad-card__cta:focus-visible { outline: none; }

.dad-card__cta-arrow {
  width: 15px;
  height: 15px;
  flex: 0 0 auto;
  transition: transform 0.18s ease;
}

.dad-card--linked:hover .dad-card__cta-arrow,
.dad-card--modal:hover .dad-card__cta-arrow {
  transform: translateX(3px);
}

/* ── Thumbnail ───────────────────────────────────────────────────────── */

/* A flex container, so the portrait `doc` sheet can size its width from its
   aspect ratio against a stretched height and sit centred. Every other shape
   just fills it.

   `container-type` belongs HERE, on the outer box, not on the sheet inside it —
   and the reason is the same trap as "a rule cannot style its own container",
   wearing a different hat. An element's own `cq*` lengths resolve against its
   nearest ANCESTOR container, never against itself. With the containment on the
   sheet, the sheet's own padding and gap resolved against .dad__inner instead:
   `4.4cqi` became 4.4% of 702px = 31px on a 156px-tall sheet, padding and gaps
   alone overflowed it, and every child flex-shrank to zero height. The wordmark
   survived only because it has an intrinsic size.

   Measured, not guessed: computed padding read 30.888px where ~14px was
   intended, while the children's own `cqi` resolved correctly against the
   sheet — two different reference boxes inside one component, which is what made
   it look like a units problem rather than a containment one. */
.dad-thumb {
  box-sizing: border-box;
  container-type: inline-size;
  display: flex;
  justify-content: center;
  align-items: stretch;
  width: 100%;
  aspect-ratio: var(--dad-thumb-ratio, 16 / 10);
  padding: var(--dad-thumb-pad, 14px);
  overflow: hidden;
  background: var(--dad-thumb-bg, #f4f8fc);
  border: 1px solid var(--dad-thumb-border, #e4ebf3);
  border-radius: var(--dad-thumb-radius, 8px);
}

.dad-thumb__shot {
  display: block;
  width: 100%;
  height: 100%;
  max-width: 100%;
  object-fit: cover;
  border-radius: calc(var(--dad-thumb-radius, 8px) - 2px);
}

/* ── The drawn placeholder ──
   A wireframe of the thing it stands for, not a generic card: the page's intro
   band, the promo card's media-over-copy grid, the poster's headline-and-rows
   layout, the logo kit's three grounds. Nothing in it can go stale, because
   there is nothing in it to drift.

   Parts are sized in `--u`, which is 1cqi — a share of .dad-thumb's WIDTH (see
   the note on .dad-thumb for why the containment sits there and not here). The
   portrait `doc` sheet is only about half the thumb's width, so it re-declares
   `--u` smaller and every part inside it scales down together, with no
   per-shape sizes to keep in step.

   `flex-shrink: 0` on the parts is load-bearing. This is a COLUMN flex
   container, so `height` is the main size and a flex item shrinks out of
   existence rather than overflowing. `overflow: hidden` is the backstop for an
   over-long headline. */
.dad-thumb__sheet {
  --u: 1cqi;
  box-sizing: border-box;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: calc(1.7 * var(--u));
  width: 100%;
  height: 100%;
  padding: calc(5 * var(--u)) calc(5.5 * var(--u));
  overflow: hidden;
  background: var(--dad-thumb-sheet, #ffffff);
  border-radius: calc(var(--dad-thumb-radius, 8px) - 2px);
}

.dad-thumb__mark {
  flex: 0 0 auto;
  width: auto;
  height: calc(3.4 * var(--u));
  max-width: 45%;
  object-fit: contain;
  object-position: left center;
}

/* The small uppercase kicker above a headline — "For our patients" on the page,
   "Uninsured services made easy" ranged right on the poster. */
.dad-thumb__eyebrow {
  flex: 0 0 auto;
  display: block;
  width: 34%;
  height: calc(1.2 * var(--u));
  background: var(--dad-thumb-bar, #d4e1ee);
  border-radius: 999px;
}

.dad-thumb__head {
  flex: 0 0 auto;
  display: block;
  max-width: 100%;
  overflow: hidden;
  color: var(--dad-thumb-accent, #082c54);
  font-size: calc(4.4 * var(--u));
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.01em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dad-thumb__head--sm { font-size: calc(3.4 * var(--u)); }

/* The page's own h1 is clamp(30px … 48px) against 16px body copy, so it towers
   over everything around it. The thumbnail should read the same way. */
.dad-thumb__sheet--page .dad-thumb__head { font-size: calc(5.4 * var(--u)); font-weight: 700; }

/* The poster's headline runs to a second line in Daybreak — the blue "Docnote"
   in "An email from Docnote is an email from our office." */
.dad-thumb__accent {
  flex: 0 0 auto;
  display: block;
  width: 46%;
  height: calc(2.4 * var(--u));
  background: var(--dad-thumb-daybreak, #1b99e8);
  border-radius: 2px;
}

.dad-thumb__bar {
  flex: 0 0 auto;
  display: block;
  height: calc(1.7 * var(--u));
  background: var(--dad-thumb-bar, #d4e1ee);
  border-radius: 999px;
}

.dad-thumb__bar--a { width: 100%; }
.dad-thumb__bar--b { width: 62%; }
.dad-thumb__bar--c { width: 84%; }
.dad-thumb__bar--d { width: 46%; }

/* Rows on hairlines: the page's services list, the poster's "what you'll see".
   The rule colour is the panel outline's, not a second token — they are the same
   hairline in the real artwork. */
.dad-thumb__rows {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  width: 100%;
  margin-top: calc(0.8 * var(--u));
}

.dad-thumb__irow {
  display: flex;
  align-items: center;
  gap: calc(1.8 * var(--u));
  padding: calc(1.4 * var(--u)) 0;
  border-bottom: 1px solid var(--dad-thumb-border, #e4ebf3);
}

.dad-thumb__irow .dad-thumb__bar { flex: 1 1 auto; max-width: 74%; }

/* A Phosphor glyph on the poster, so a filled Daybreak square rather than a
   muted bar — the icons are the one coloured element in those rows. */
.dad-thumb__icon {
  flex: 0 0 auto;
  width: calc(3.2 * var(--u));
  height: calc(3.2 * var(--u));
  background: var(--dad-thumb-daybreak, #1b99e8);
  border-radius: 2px;
  opacity: 0.85;
}

/* The page's list marker is a hairline dash, not a bullet. */
.dad-thumb__dash {
  flex: 0 0 auto;
  width: calc(2.4 * var(--u));
  height: calc(1.1 * var(--u));
  background: var(--dad-thumb-daybreak, #1b99e8);
  border-radius: 999px;
}

/* The poster ranges its lockup left and its kicker right, on one line. */
.dad-thumb__top {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(2 * var(--u));
  width: 100%;
  margin-bottom: calc(1 * var(--u));
}

.dad-thumb__top .dad-thumb__mark { max-width: 58%; }
.dad-thumb__top .dad-thumb__eyebrow { width: calc(11 * var(--u)); }

/* The poster closes with a line of small print and the mark in a navy rounded
   square, bottom-right. `margin-top: auto` pins the pair to the foot. */
.dad-thumb__foot {
  flex: 0 0 auto;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: calc(2 * var(--u));
  width: 100%;
  margin-top: auto;
  padding-top: calc(2 * var(--u));
}

.dad-thumb__markbox {
  flex: 0 0 auto;
  width: calc(6 * var(--u));
  height: calc(6 * var(--u));
  background: var(--dad-thumb-accent, #082c54);
  border-radius: calc(1.2 * var(--u));
}

/* `card` — the promo card's cover-fit media band above the copy. */
.dad-thumb__media {
  flex: 0 0 auto;
  display: block;
  width: 100%;
  height: calc(13.5 * var(--u));
  background: linear-gradient(135deg,
    var(--dad-thumb-bg, #f4f8fc) 0%,
    var(--dad-thumb-bar, #d4e1ee) 100%);
  border-radius: 4px;
}

.dad-thumb__btn {
  flex: 0 0 auto;
  display: block;
  width: 26%;
  min-width: 34px;
  height: calc(3.7 * var(--u));
  margin-top: calc(1.2 * var(--u));
  background: var(--dad-thumb-accent, #082c54);
  border-radius: 999px;
}

/* `doc` — a portrait sheet, centred, so a print asset never reads as a page.
   Half `--u`, because the sheet is about half the thumb's width and every part
   inside it is sized against that width. */
.dad-thumb__sheet--doc {
  /* 0.62, not the 0.44 that would be strictly proportional to the sheet's share
     of the thumb's width. Proportional is the honest number and it renders the
     hairlines and the icon squares too fine to read at ~110px wide, so the parts
     are deliberately over-scaled — the shape is what has to be recognisable
     here, not the type size. */
  --u: 0.62cqi;
  flex: 0 0 auto;
  width: auto;
  aspect-ratio: 1 / 1.294;   /* A4 */
  padding: calc(4.5 * var(--u)) calc(4.5 * var(--u));
  border: 1px solid var(--dad-thumb-bar, #d4e1ee);
}

/* The poster leads with a headline several times the body size. */
.dad-thumb__sheet--doc .dad-thumb__head { font-size: calc(5 * var(--u)); font-weight: 700; }
.dad-thumb__sheet--doc .dad-thumb__accent { height: calc(2.8 * var(--u)); width: 42%; }
.dad-thumb__sheet--doc .dad-thumb__rows { margin-top: calc(1.6 * var(--u)); }

/* `logos` — the wordmark on the three grounds it ships for. */
.dad-thumb__tiles {
  flex: 0 0 auto;
  display: flex;
  gap: calc(1.7 * var(--u));
  width: 100%;
  margin-bottom: calc(0.8 * var(--u));
}

.dad-thumb__sheet--logos { justify-content: center; }

.dad-thumb__tile {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1 1 0;
  min-width: 0;
  height: calc(14 * var(--u));
  border-radius: 3px;
}

.dad-thumb__tile--white { background: #ffffff; box-shadow: inset 0 0 0 1px var(--dad-thumb-bar, #d4e1ee); }
.dad-thumb__tile--navy  { background: var(--dad-thumb-accent, #082c54); }
.dad-thumb__tile--tint  { background: var(--dad-thumb-bg, #eaf6fe); }

.dad-thumb__tilemark {
  width: 74%;
  height: auto;
  max-width: 74%;
  object-fit: contain;
}

/* The reversed tile needs a white mark and only the navy one is supplied, so it
   is knocked out with a filter. Safe here in a way it would not be inside a
   snippet: this is our own page, not markup leaving for a clinic's site, so the
   `filter: none !important` guard that armours the shipped lockups does not
   apply and cannot fight it. */
.dad-thumb__tilemark--rev { filter: brightness(0) invert(1); }
/* ══ ported from docnote-embed-code.module/module.css:19-30 ══ */
.dad-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ══ ported from docnote-embed-code.module/module.css:32-55 ══ */
/* ── Header ──────────────────────────────────────────────────────── */

.dad__eyebrow {
  margin: 0 0 12px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.dad__heading {
  margin: 0;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.02em;
}

.dad__subheading {
  margin-top: 14px;
  line-height: 1.65;
}

.dad__subheading > *:first-child { margin-top: 0; }
.dad__subheading > *:last-child { margin-bottom: 0; }

/* ══ ported from docnote-embed-code.module/module.css:138-190 ══ */
/* ── Preview ─────────────────────────────────────────────────────── */

.dad__preview-wrap {
  min-width: 0;
}

/* The iframe paints its own white page; this frame makes the block's own
   edges readable against it.

   `max-height` is load-bearing. module.js sets an inline `height` equal to
   the snippet's full content height, and the page block is a whole page —
   several thousand pixels. max-height beats height in the cascade, so the
   frame stays this tall and the preview scrolls internally instead of
   stretching the host page. */
.dad__preview {
  display: block;
  width: 100%;
  min-height: var(--dad-preview-min, 180px);
  max-height: var(--dad-preview-max, 520px);
  border: 1px solid var(--dad-border, #d4e1ee);
  border-radius: 8px;
  background: #ffffff;
  box-sizing: border-box;
}

/* A capped iframe is a scroll container, so it is a real tab stop and needs a
   real ring (2.4.7).

   The ring has to go on the WRAPPER, not the iframe. Tabbing to an iframe moves
   focus into its content document, so the iframe element itself never matches
   `:focus` or `:focus-visible` — a rule on `.dad__preview:focus-visible` looks
   right and silently never applies. `:focus-within` on the stage does match,
   because focus genuinely is inside it. */
.dad__preview-stage:focus-within {
  outline: 3px solid var(--dad-focus, #1b99e8);
  outline-offset: 2px;
  border-radius: 8px;
}

/* Kept as belt and braces for any engine that does focus the frame itself. */
.dad__preview:focus-visible {
  outline: 3px solid var(--dad-focus, #1b99e8);
  outline-offset: -3px;
}

/* Signals that the frame is holding more than it shows, since a capped
   iframe gives no other hint that it scrolls. */
.dad__preview-note {
  margin: 8px 0 0;
  color: #2e5a8a;
  font-size: 12px;
  line-height: 1.5;
}

/* ══ ported from docnote-embed-code.module/module.css:192-236 ══ */
/* ── Pitch column ────────────────────────────────────────────────────
   What this block is, then the two actions, then the code tucked away.
   The order matters: a clinic decides whether they want the block before
   they care what its markup looks like. */

/* A flex column, so "buttons above" vs "buttons below" is an `order` swap
   rather than two copies of the markup.

   The base rhythm is flex `gap`, and only the buttons/steps boundary gets extra
   on top — that pair needs more air or the two read as one block, and a single
   uniform gap cannot say that.

   `gap` rather than a margin on the leading element, deliberately. `gap` applies
   between items in VISUAL order and never before the first one, so it is
   immune to the mismatch that `order` creates. A margin plus a
   `:first-child` reset is not: `:first-child` is DOM order, `order` is visual
   order, and when the head is absent the DOM-first element is the buttons —
   which in "buttons below" are visually LAST. That reset then silently zeroed
   the very margin meant to separate them, so the setting appeared to do nothing.
   The head is absent whenever the module header carries the section title,
   which is the normal single-block setup, so this was the common case. */
.dad__pitch {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--dad-pitch-gap, 20px);
  min-width: 0;
}

/* The extra sits on whichever element is visually last, so the total distance
   across that boundary is exactly the configured value: gap + (value − gap).
   `max(0px, …)` keeps it from going negative if the value is set below the base
   gap, which would otherwise pull the two together. */
/* No pitch-head here — the title and intro live in .dad__dialog-head, above
   this column — so the orders start at the buttons.

   The opt-in carries an EXPLICIT order. In the embed module it has none, so it
   defaults to `order: 0` and paints ABOVE the buttons, contradicting its own
   comment ("sits under the two buttons, because it changes what they produce").
   That is latent there because the annual plan is off by default; it is fixed
   here rather than ported. */
/* The code <pre> needs an order too, for the same reason the opt-in does. It is
   `hidden` in normal use, so order never comes up — until the clipboard's tier-3
   fallback un-hides it, at which point `order: 0` sends it to the TOP of the
   column, above the button that was just pressed, while the status message says
   the code is "below". Measured it: the revealed block landed above the actions.
   Same latent bug in the embed module, invisible for the same reason. */
.dad__actions    { order: 2; }
.dad__optin      { order: 3; }
.dad__code       { order: 4; }
.dad__steps-wrap {
  order: 5;
  margin-top: max(0px, calc(var(--dad-steps-space, 40px) - var(--dad-pitch-gap, 20px)));
}

.dad__pitch--steps-first .dad__steps-wrap { order: 2; margin-top: 0; }
.dad__pitch--steps-first .dad__actions { order: 3; }
.dad__pitch--steps-first .dad__optin { order: 4; }
.dad__pitch--steps-first .dad__code  { order: 5; }
.dad__pitch--steps-first .dad__actions {
  margin-top: max(0px, calc(var(--dad-steps-space, 40px) - var(--dad-pitch-gap, 20px)));
}
/* In steps-first mode the boundary the extra air belongs on is steps → actions,
   and the actions are always present — so no :has() branch is needed. */

/* ══ ported from docnote-embed-code.module/module.css:261-291 ══ */
/* ── Annual-plan opt-in ──────────────────────────────────────────────
   Sits under the two buttons, because it changes what they produce. A real
   <label> wrapping a real <input type="checkbox">, so the whole line is a
   click target and the accessible name comes from the markup rather than an
   aria-label that could drift from the visible text. */
.dad__optin {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-top: 14px;
  color: var(--dad-body, #163F6D);
  font-size: 14px;
  line-height: 1.45;
  cursor: pointer;
}

.dad__optin input {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  /* 2px keeps the box optically centred on the first line of a wrapped
     label rather than sitting on the cap line. */
  margin: 2px 0 0;
  accent-color: #0D63A0;
  cursor: pointer;
}

.dad__optin input:focus-visible {
  outline: 3px solid #1B99E8;
  outline-offset: 2px;
}

/* ══ ported from docnote-embed-code.module/module.css:293-420 ══ */
/* ── Instruction steps ───────────────────────────────────────────────
   A vertical numbered list. Visual language borrowed from the design
   system's `.hstep` stepper — pill circle, hairline ring, tabular numerals,
   thin connector — but not its state model: `.hstep` is a progress indicator
   (horizontal by canonical decision, five states, aria-current), and nothing
   here is in progress. Every step is equally still to do, so the number sits
   in bh-700 rather than the pending bh-400.

   Every dimension comes from a custom property, because the connector's
   position is derived from the circle size and line width — hard-coding it
   would break the moment either is changed in the editor. */

.dad__steps-wrap {
  width: 100%;
}

.dad__steps-title {
  margin: 0 0 14px;
  color: var(--dad-steps-head, #2e5a8a);
  font-size: var(--dad-steps-head-size, 11px);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* The margin/padding resets are load-bearing, not hygiene. A theme that styles
   `ol`/`li` at all — and most do — would otherwise add spacing this component
   cannot see, and the connector below is positioned against the li's padding
   box. A theme `li { margin-bottom: 14px }` leaves the line ending 14px short
   of the next circle, which is exactly the gap this fixes. */
.dad__steps {
  margin: 0;
  padding: 0;
  /* Markers off: the numbers are drawn in .dad__step-num instead. Paired with
     role="list" in the markup, because Safari drops list semantics from any
     list whose markers are removed. */
  list-style: none;
}

.dad__step {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: var(--dad-step-indent, 12px);
  margin: 0;
  padding: 0 0 var(--dad-step-gap, 20px);
  text-indent: 0;
}

.dad__step:last-child {
  padding-bottom: 0;
}

/* Connector, derived rather than fixed:
     left   centres the line under the circle for any circle/line width
     top    clears the circle plus a small breath
     bottom 0 → the li's padding box, which the resets above guarantee is
            flush with the next circle
   Decorative: the numbers and the <ol> carry the sequence, so this is exempt
   from 1.4.11 the same way the design system's own connector is. */
.dad__step:not(:last-child)::before {
  content: "";
  position: absolute;
  left: calc((var(--dad-step-size, 28px) - var(--dad-step-line-w, 2px)) / 2);
  top: calc(var(--dad-step-size, 28px) + 6px);
  bottom: 0;
  width: var(--dad-step-line-w, 2px);
  background: var(--dad-step-line, #aabfd9);
}

.dad__step-num {
  flex: 0 0 auto;
  width: var(--dad-step-size, 28px);
  height: var(--dad-step-size, 28px);
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: var(--dad-step-bg, #ffffff);
  border: var(--dad-step-ring-w, 1.5px) solid var(--dad-step-ring, #aabfd9);
  color: var(--dad-step-num, #082c54);
  /* Scales with the circle so one size field is enough; floored so a small
     circle never drops the number below the 12px chrome minimum. */
  font-size: max(12px, calc(var(--dad-step-size, 28px) * 0.43));
  font-weight: 700;
  line-height: 1;
  /* Keeps a two-digit step from shifting the circle's optical centre. */
  font-variant-numeric: tabular-nums;
  /* Above the connector, which its opaque fill then masks. */
  position: relative;
  z-index: 1;
}

.dad__step-body {
  min-width: 0;
  /* Optical alignment: pulls the step's cap-height onto the circle's centre
     rather than aligning the two boxes' tops. */
  padding-top: calc((var(--dad-step-size, 28px) - var(--dad-step-title-size, 15px) * 1.4) / 2);
}

.dad__step-title {
  display: block;
  color: var(--dad-step-title, #082c54);
  font-size: var(--dad-step-title-size, 15px);
  font-weight: 600;
  line-height: 1.4;
}

.dad__step-text {
  display: block;
  margin-top: 2px;
  color: var(--dad-step-text, #163f6d);
  font-size: var(--dad-step-text-size, 14px);
  line-height: 1.55;
}

/* Forced colours strips the ring and the connector, which is all that conveys
   the step structure — restore both with system colours. */
@media (forced-colors: active) {
  .dad__step-num {
    border: 1.5px solid CanvasText;
  }

  .dad__step:not(:last-child)::before {
    background: CanvasText;
  }
}

/* The "Preview" caption. Ported from docnote-embed-code.module/module.css:129-136,
   which lives in that file's Panels block — the rest of which is the switcher
   layout this module does not have. */
.dad__caption {
  margin: 0 0 8px;
  color: #2e5a8a;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* ══ ported from docnote-embed-code.module/module.css:422-478 ══ */
/* ── Preview head, with the column-width control ─────────────────── */

.dad__preview-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px 16px;
}

.dad__widths {
  display: inline-flex;
  gap: 0;
  padding: 3px;
  background: #eef3f9;
  border-radius: 999px;
}

.dad__width {
  appearance: none;
  -webkit-appearance: none;
  padding: 5px 11px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 999px;
  color: #163f6d;
  font-family: inherit;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.2;
  cursor: pointer;
}

.dad__width--active,
.dad__width--active:hover {
  background: #ffffff;
  border-color: #082c54;
  color: #082c54;
  font-weight: 600;
}

.dad__width:hover {
  color: #082c54;
}

.dad__width:focus-visible {
  outline: 3px solid var(--dad-focus, #1b99e8);
  outline-offset: 2px;
}

/* The stage is the box module.js measures when it has to scale a preview
   wider than the pane. `overflow: hidden` keeps a scaled frame from painting
   outside it — an outline is drawn outside the box so it is unaffected. */
.dad__preview-stage {
  overflow: hidden;
  border-radius: 8px;
}

/* ══ ported from docnote-embed-code.module/module.css:514-583 ══ */
/* ── Buttons ─────────────────────────────────────────────────────────
   Two modes. In theme mode the button also carries the site's own
   `hs-elevate-button--*` class and the theme owns colour, radius, font and
   hover — so this rule must not compete with it, hence the `:not()` rather
   than an override. A `<button>` also needs its native chrome neutralised,
   which the theme's classes were written for `<a>` and do not do. */

.dad__btn {
  appearance: none;
  -webkit-appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: inherit;
  cursor: pointer;
}

.dad__btn:not(.dad__btn--theme) {
  padding: 6px 12px;
  background: transparent;
  border: 1px solid var(--dad-border, #d4e1ee);
  border-radius: 4px;
  color: #0d63a0;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.3;
  transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}

.dad__btn:not(.dad__btn--theme):hover {
  background: #ffffff;
  border-color: var(--dad-accent, #0d63a0);
  color: #082c54;
}

/* Custom mode only: Copy is the primary action, so it is the filled one. The
   design system is explicit that two filled buttons must not sit together —
   neither would read as the primary. */
.dad__btn--primary:not(.dad__btn--theme) {
  background: var(--dad-btn, #082c54);
  border-color: var(--dad-btn, #082c54);
  color: #ffffff;
}

.dad__btn--primary:not(.dad__btn--theme):hover {
  background: #051e3a;
  border-color: #051e3a;
  color: #ffffff;
}

/* Theme mode: the theme keeps button padding in a build-hashed per-module
   class this module cannot target, so it is reproduced here from the theme's
   own spacing tokens. Everything else comes from hs-elevate-button--*. */
.dad__btn--theme {
  padding: var(--hsElevate--spacing--12, 12px) var(--hsElevate--spacing--24, 24px);
  border: 0;
  text-align: center;
}

.dad__btn:focus-visible {
  outline: 3px solid var(--dad-focus, #1b99e8);
  outline-offset: 2px;
}

/* The code pane scrolls inside its own box in both directions, so a long
   snippet never stretches the page or forces the body to scroll sideways.
   It is focusable because a scrollable region a keyboard cannot reach is a
   2.1.1 failure. */
/* Hidden by default (see module.html) and revealed only by the
   clipboard-unavailable fallback, so it has to stand on its own rather than

/* ══ ported from docnote-embed-code.module/module.css:585-621 ══ */
.dad__code {
  margin: 20px 0 0;
  border-radius: 8px;
  /* All three are needed to keep the block inside its column on the rare path
     that reveals it. It is a flex item, so `min-width: auto` would otherwise
     stop it shrinking below its longest unwrapped line — which for a whole
     generated page is a couple of thousand pixels, enough to blow the grid open
     and push the page into a horizontal scroll. */
  width: 100%;
  max-width: 100%;
  min-width: 0;
  align-self: stretch;
  padding: 14px 16px;
  max-height: var(--dad-code-max, 420px);
  overflow: auto;
  background: #031221;
  color: #d4e1ee;
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  font-size: 12px;
  line-height: 1.55;
  tab-size: 2;
  box-sizing: border-box;
}

.dad__code code {
  display: block;
  font: inherit;
  color: inherit;
  background: none;
  padding: 0;
  white-space: pre;
}

.dad__code:focus-visible {
  outline: 3px solid var(--dad-focus, #1b99e8);
  outline-offset: -3px;
}


/* ── Dialog ──────────────────────────────────────────────────────────
   Native <dialog> with .showModal(), which is what gives us the focus trap,
   the top layer, `Escape` via the `cancel` event, focus restoration to the
   invoking button, and `::backdrop` — none of which we then have to author.

   MOTION IS NONE, on purpose. The design system's modal spec says "appears
   instantly · no fade · no scale", and lists "animate the modal entrance" as an
   explicit Don't. Do not add a transition here for polish. It also means there
   is nothing for `prefers-reduced-motion` to reduce.

   The scrim colour and the dialog background are written per-instance in
   module.html rather than read from a --dad-* here: `::backdrop`'s inheritance
   parent was only changed to the originating element in a 2023 spec revision
   and engine behaviour still varies, so a custom property set on the dialog is
   not reliably visible to its own backdrop. */

/* Defensive: a theme that resets `display` on unknown elements would otherwise
   paint every closed dialog inline in the page. */
.dad__dialog:not([open]) { display: none; }

.dad__dialog {
  box-sizing: border-box;
  /* No padding, so the content box fills the dialog and there is no rim that a
     legitimate click would read as "outside" and dismiss on. */
  padding: 0;
  /* `max-width: none` overrides the UA's own calc(100% - 6px - 2em). */
  width: min(var(--dad-modal-max, 1040px), calc(100vw - 48px));
  max-width: none;
  max-height: min(90dvh, calc(100vh - 48px));
  overflow: auto;
  /* Stops a scroll that reaches the dialog's end from chaining to the page
     behind it, which iOS does by default. */
  overscroll-behavior: contain;
  min-width: 0;
  border: 1px solid var(--dad-modal-border, #d4e1ee);
  border-radius: var(--dad-modal-radius, 8px);
  color: inherit;
}

.dad__dialog-box {
  box-sizing: border-box;
  padding: var(--dad-modal-pad, 28px);
  min-width: 0;
}

/* A programmatic focus target for the fallback path, not a control — so no ring
   when script moves focus here, but a real one if a keyboard ever lands on it. */
.dad__dialog-box:focus { outline: none; }
.dad__dialog-box:focus-visible {
  outline: 3px solid var(--dad-modal-focus, #1b99e8);
  outline-offset: -3px;
}

.dad__dialog-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 22px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--dad-modal-border, #d4e1ee);
}

.dad__dialog-headings { min-width: 0; }

.dad__dialog-title {
  margin: 0;
  color: var(--dad-title, #082c54);
  font-size: 22px;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.02em;
  text-transform: none;
}

/* 60ch caps the measure. The theme's body copy computes to 16px Inter at
   8.22px per average character, so ~60 characters is well inside the ~80 that
   WCAG 1.4.8 names, even at this smaller size. */
.dad__dialog-intro {
  max-width: 60ch;
  margin: 8px 0 0;
  color: var(--dad-desc, #163f6d);
  font-size: 15px;
  line-height: 1.55;
  white-space: pre-line;
}

.dad__dialog-close {
  appearance: none;
  -webkit-appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  padding: 0;
  background: transparent;
  border: 1px solid var(--dad-modal-border, #d4e1ee);
  border-radius: 999px;
  color: var(--dad-title, #082c54);
  cursor: pointer;
  transition: background-color 0.18s ease, border-color 0.18s ease;
}

.dad__dialog-close svg { width: 16px; height: 16px; }

.dad__dialog-close:hover {
  background: rgba(8, 44, 84, 0.05);
  border-color: var(--dad-card-hover-border, #aabfd9);
}

.dad__dialog-close:focus-visible {
  outline: 3px solid var(--dad-modal-focus, #1b99e8);
  outline-offset: 2px;
}

.dad__dialog-grid {
  display: grid;
  gap: 24px;
  min-width: 0;
}

/* ── Footer request band ─────────────────────────────────────────────── */

.dad__band {
  box-sizing: border-box;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 20px;
  margin-top: var(--dad-band-space, 32px);
  padding: 20px 24px;
  background: var(--dad-band-bg, #eaf6fe);
  border: 1px solid var(--dad-band-border, #cfe6f8);
  border-radius: var(--dad-band-radius, 12px);
}

.dad__band-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  color: var(--dad-accent, #0d63a0);
}

.dad__band-icon svg { width: 24px; height: 24px; }

.dad__band-body {
  flex: 1 1 260px;
  min-width: 0;
}

.dad__band-heading {
  margin: 0;
  color: var(--dad-title, #082c54);
  font-size: 15.5px;
  font-weight: 600;
  line-height: 1.35;
}

.dad__band-text {
  max-width: 66ch;
  margin: 3px 0 0;
  color: var(--dad-desc, #163f6d);
  font-size: 14px;
  line-height: 1.55;
  white-space: pre-line;
}

.dad__band-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  padding: 10px 18px;
  background: #ffffff;
  border: 1px solid var(--dad-band-border, #cfe6f8);
  border-radius: 999px;
  color: var(--dad-accent, #0d63a0);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.2;
  transition: background-color 0.18s ease, border-color 0.18s ease;
}

.dad__band-btn:hover {
  background: #f7fbff;
  border-color: var(--dad-accent, #0d63a0);
}

.dad__band-btn:focus-visible {
  outline: 3px solid var(--dad-focus, #1b99e8);
  outline-offset: 2px;
}

/* ── No-JS notes ─────────────────────────────────────────────────────── */

.dad__noscript {
  margin-top: 24px;
  padding: 16px 18px;
  background: #f7fafd;
  border: 1px solid var(--dad-card-border, #d4e1ee);
  border-radius: 8px;
  color: var(--dad-desc, #163f6d);
  font-size: 14px;
  line-height: 1.6;
}

.dad__noscript-title {
  margin: 0 0 6px;
  color: var(--dad-title, #082c54);
  font-weight: 600;
}

.dad__noscript-list { margin: 0 0 14px; padding-left: 20px; }
.dad__noscript-note { margin: 0; }

/* ── Two-up above the tablet floor ───────────────────────────────────
   900px is the project's column-stacking breakpoint. A media query is right
   here, not a container query: the dialog paints in the top layer at viewport
   scale, so its own width has nothing to do with the module's column. */
@media (min-width: 900px) {
  .dad__dialog-grid {
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
    align-items: start;
  }
}

/* ── Full-bleed sheet on phones ──────────────────────────────────────── */
@media (max-width: 640px) {
  .dad__dialog {
    width: 100vw;
    max-width: none;
    height: 100dvh;
    max-height: none;
    margin: 0;
    border: 0;
    border-radius: 0;
  }
  .dad__dialog-box { padding: 20px 18px 32px; }
  .dad__dialog-title { font-size: 19px; }

  /* Touch targets. */
  .dad__chip { min-height: 40px; }
  .dad__dialog-close { width: 44px; height: 44px; }
  .dad-card__cta { padding-top: 18px; }
}

/* ── Reduced motion ──────────────────────────────────────────────────
   The dialog has no motion to begin with — see the note above. These are the
   card, chip and arrow transitions. */
@media (prefers-reduced-motion: reduce) {
  .dad-card,
  .dad__chip,
  .dad__dialog-close,
  .dad__band-btn,
  .dad-card__cta-arrow {
    transition: none;
  }
  .dad-card--linked:hover,
  .dad-card--modal:hover { transform: none; }
  .dad-card--linked:hover .dad-card__cta-arrow,
  .dad-card--modal:hover .dad-card__cta-arrow { transform: none; }
}

/* ── Forced colours ──────────────────────────────────────────────────
   box-shadow and ::backdrop are both stripped here, so the scrim disappears and
   the dialog would float with no edge. An explicit border keeps it readable as
   a separate surface, and the active chip gets a border because its fill is
   gone too. */
@media (forced-colors: active) {
  .dad__dialog::backdrop { background: Canvas; }
  .dad__dialog { border: 1px solid CanvasText; }
  .dad-card { border: 1px solid CanvasText; }
  .dad__chip--active { border: 2px solid CanvasText; }
  .dad-card__wip { border: 1px solid CanvasText; }
  .dad-thumb__tile,
  .dad-thumb__icon,
  .dad-thumb__markbox,
  .dad-thumb__accent { border: 1px solid CanvasText; }
  /* The knock-out filter is meaningless once the navy ground is gone. */
  .dad-thumb__tilemark--rev { filter: none; }
  .dad__chip:focus-visible,
  .dad__dialog-close:focus-visible,
  .dad__band-btn:focus-visible,
  .dad-card--linked:focus-visible,
  .dad-card--modal:focus-within {
    outline: 3px solid Highlight;
    outline-offset: 2px;
  }
}