/* ==========================================================================
   NICU Jargon Rx - components.css
   Buttons, the translation device, product cards, forms, video, figures.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. BUTTONS
   -------------------------------------------------------------------------- */
.btn {
  --btn-bg: var(--brand-deep);
  --btn-fg: var(--cream);
  --btn-bd: var(--brand-deep);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .7rem;
  padding: .95rem 1.6rem;
  background: var(--btn-bg);
  color: var(--btn-fg);
  border: 1px solid var(--btn-bd);
  border-radius: var(--r-pill);
  font-size: var(--fs-sm);
  font-weight: 600;
  letter-spacing: -.004em;
  line-height: 1;
  text-align: center;
  cursor: pointer;
  overflow: hidden;
  isolation: isolate;
  transition: color var(--dur-2) var(--ease),
              border-color var(--dur-2) var(--ease),
              transform var(--dur-1) var(--ease);
}

/* Wipe-fill on hover - a single well-made interaction, used everywhere. */
.btn::before {
  content: "";
  position: absolute; inset: 0;
  background: var(--ink);
  transform: translateY(101%);
  transition: transform var(--dur-2) var(--ease-out);
  z-index: -1;
}
.btn:hover::before,
.btn:focus-visible::before { transform: translateY(0); }
.btn:active { transform: translateY(1px); }

.btn__arrow {
  flex: none;
  width: .95em; height: .95em;
  transition: transform var(--dur-2) var(--ease-out);
}
.btn:hover .btn__arrow { transform: translateX(3px); }

/* Secondary: outlined, quiet */
.btn--ghost {
  --btn-bg: transparent;
  --btn-fg: var(--ink);
  --btn-bd: var(--line-strong);
}
.btn--ghost:hover, .btn--ghost:focus-visible {
  --btn-fg: var(--cream);
  --btn-bd: var(--ink);
}

/* On dark backgrounds */
.on-ink .btn, .btn--on-ink {
  --btn-bg: var(--cream);
  --btn-fg: var(--ink);
  --btn-bd: var(--cream);
}
.on-ink .btn::before, .btn--on-ink::before { background: var(--brand); }
.on-ink .btn:hover, .btn--on-ink:hover { --btn-fg: var(--ink); }

.on-ink .btn--ghost, .btn--ghost.btn--on-ink {
  --btn-bg: transparent;
  --btn-fg: var(--cream);
  --btn-bd: var(--line-dark);
}
.on-ink .btn--ghost::before { background: var(--cream); }
.on-ink .btn--ghost:hover { --btn-fg: var(--ink); --btn-bd: var(--cream); }

.btn--lg { padding: 1.1rem 1.85rem; font-size: var(--fs-body); }
.btn--sm { padding: .7rem 1.15rem; font-size: var(--fs-xs); }
.btn--block { display: flex; width: 100%; }

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: .875rem;
  align-items: center;
}

/* Text link with an arrow - the tertiary action */
.arrow-link {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--brand-deep);
  padding-block: .25rem;
  border-block-end: 1px solid color-mix(in srgb, var(--brand-deep) 28%, transparent);
  transition: border-color var(--dur-2) var(--ease), gap var(--dur-2) var(--ease);
}
.arrow-link:hover { border-block-end-color: var(--brand-deep); gap: .85rem; }
.arrow-link svg { width: .9em; height: .9em; flex: none; }
.on-ink .arrow-link {
  color: var(--cream);
  border-block-end-color: var(--line-dark);
}
.on-ink .arrow-link:hover { border-block-end-color: var(--cream); }

/* --------------------------------------------------------------------------
   2. CARD FLIP
   The mechanism that turns a card over. The faces themselves are real card
   artwork - see .card-photo in cards.css.
   -------------------------------------------------------------------------- */
/* --- Flip mechanism -------------------------------------------------------
   Implemented as a <button> so it is keyboard- and screen-reader-operable.
   Both faces are always in the DOM; visibility is managed for AT.
   ------------------------------------------------------------------------- */
.card-flip {
  display: block;
  width: 100%;
  perspective: 1600px;
  background: none;
  border: 0;
  padding: 0;
  text-align: start;
  border-radius: var(--r-card);
  cursor: pointer;
}
/* A <button> may only contain phrasing content, so the inner wrapper and both
   faces are <span>s. They MUST be made block-level: `transform` does not apply
   to non-replaced inline boxes, so leaving them inline silently kills the flip
   - rotateY() computes but never renders. Keep these two lines with the flip. */
.card-flip__inner,
.card-flip__face { display: block; }

.card-flip__inner {
  position: relative;
  transform-style: preserve-3d;
  transition: transform 720ms var(--ease-out);
  border-radius: var(--r-card);
}
.card-flip[aria-pressed="true"] .card-flip__inner { transform: rotateY(180deg); }

.card-flip__face { backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.card-flip__face--back {
  position: absolute;
  inset: 0;
  transform: rotateY(180deg);
}

/* Reduced motion: cross-fade rather than rotate */
@media (prefers-reduced-motion: reduce) {
  .card-flip__inner { transition: none; }
  .card-flip[aria-pressed="true"] .card-flip__inner { transform: none; }
  .card-flip__face--back { opacity: 0; transform: none; visibility: hidden; }
  .card-flip[aria-pressed="true"] .card-flip__face--back { opacity: 1; visibility: visible; }
  .card-flip[aria-pressed="true"] .card-flip__face--front { opacity: 0; }
}

/* --------------------------------------------------------------------------
   4. SPECIMEN PLATE - gallery presentation with a wall label
   -------------------------------------------------------------------------- */
.plate {
  background: var(--bone-deep);
  border-radius: var(--r-lg);
  padding: clamp(1.75rem, 1rem + 4vw, 4.5rem);
  display: grid;
  place-items: center;
}
.plate--paper { background: var(--paper); }
.plate--ink {
  background:
    radial-gradient(110% 80% at 50% 0%,
      color-mix(in srgb, var(--brand-deep) 40%, transparent) 0%, transparent 70%),
    var(--ink);
}

.wall-label {
  margin-block-start: var(--sp-2);
  padding-block-start: .7rem;
  border-block-start: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  gap: .3rem 1rem;
  font-size: var(--fs-xs);
  color: var(--muted);
  letter-spacing: -.004em;
}
.wall-label__title { color: var(--ink); font-weight: 600; }
.on-ink .wall-label { border-block-start-color: var(--line-dark); color: var(--muted-dark); }
.on-ink .wall-label__title { color: var(--cream); }

/* --------------------------------------------------------------------------
   5. FIGURES & IMAGE PLACEHOLDERS
   -------------------------------------------------------------------------- */
.figure { margin: 0; }
.figure__media {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-lg);
  background: var(--bone-deep);
}
/* A <picture> is display:inline by default. The <img> inside it sets height:100%,
   which needs a parent with a resolvable height to compute against, so the
   wrapper MUST be made a block that fills .figure__media. Leave it inline and
   object-fit:cover silently stops cropping: the image reverts to its intrinsic
   height and the 21:9 box no longer governs. Keep this rule with the one below. */
.figure__media picture {
  display: block;
  width: 100%;
  height: 100%;
}
.figure__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.1s var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .figure--zoom:hover .figure__media img { transform: scale(1.035); }
}
.figure__caption {
  margin-block-start: .85rem;
  padding-inline-start: 1rem;
  border-inline-start: 1px solid var(--brand);
  font-size: var(--fs-xs);
  line-height: 1.55;
  color: var(--muted);
  max-width: 38ch;
}
.on-ink .figure__caption { color: var(--muted-dark); }

.ratio-3-4  { aspect-ratio: 3 / 4; }
.ratio-4-5  { aspect-ratio: 4 / 5; }
.ratio-1-1  { aspect-ratio: 1 / 1; }
.ratio-4-3  { aspect-ratio: 4 / 3; }
.ratio-3-2  { aspect-ratio: 3 / 2; }
.ratio-16-9 { aspect-ratio: 16 / 9; }
.ratio-21-9 { aspect-ratio: 21 / 9; }

@media (max-width: 599px) {
  .ratio-21-9 { aspect-ratio: 16 / 10; }
}

/* --------------------------------------------------------------------------
   6. VIDEO - click-to-load facade. No third-party JS until the user asks.
   -------------------------------------------------------------------------- */
.video {
  position: relative;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--ink);
  aspect-ratio: 16 / 9;
  box-shadow: var(--sh-3);
}
@media (max-width: 599px) {
  .video { aspect-ratio: 4 / 3; }
}

.video__poster {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 1.4s var(--ease-out), opacity var(--dur-3) var(--ease);
}
.video__scrim {
  position: absolute; inset: 0;
  background:
    linear-gradient(to top,
      rgba(5, 39, 48, .82) 0%,
      rgba(5, 39, 48, .34) 42%,
      rgba(5, 39, 48, .18) 100%);
  transition: opacity var(--dur-3) var(--ease);
}

.video__trigger {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;
  gap: var(--sp-2);
  padding: clamp(1.25rem, .6rem + 3vw, 3rem);
  color: var(--cream);
  text-align: start;
  cursor: pointer;
}
@media (hover: hover) and (pointer: fine) {
  .video__trigger:hover ~ .video__poster,
  .video:has(.video__trigger:hover) .video__poster { transform: scale(1.03); }
}

.video__play {
  display: inline-flex;
  align-items: center;
  gap: .9rem;
  padding: .8rem .8rem .8rem .85rem;
  border-radius: var(--r-pill);
  background: color-mix(in srgb, var(--cream) 14%, transparent);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 235, 207, .3);
  transition: background-color var(--dur-2) var(--ease),
              border-color var(--dur-2) var(--ease);
}
.video__trigger:hover .video__play,
.video__trigger:focus-visible .video__play {
  background: var(--cream);
  border-color: var(--cream);
  color: var(--ink);
}
.video__play-icon {
  width: 2.35rem; height: 2.35rem;
  border-radius: 50%;
  background: var(--cream);
  color: var(--brand-deep);
  display: grid; place-items: center;
  flex: none;
  transition: transform var(--dur-2) var(--ease-out);
}
.video__trigger:hover .video__play-icon { transform: scale(1.06); }
.video__play-icon svg { width: .8rem; height: .8rem; margin-inline-start: 2px; }
.video__play-label {
  font-size: var(--fs-sm);
  font-weight: 600;
  letter-spacing: -.004em;
  padding-inline-end: .85rem;
}

.video__meta {
  max-width: 42ch;
  font-size: var(--fs-sm);
  line-height: 1.5;
  color: color-mix(in srgb, var(--cream) 84%, transparent);
}
.video__runtime {
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--brand-lift);
  margin-block-end: .5rem;
}

/* Playing state */
.video.is-playing .video__poster,
.video.is-playing .video__scrim,
.video.is-playing .video__trigger { opacity: 0; pointer-events: none; }

.video__frame {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  border: 0;
}
.video__frame video { width: 100%; height: 100%; object-fit: cover; }

/* --------------------------------------------------------------------------
   7. STEPS - the numbered process
   -------------------------------------------------------------------------- */
.steps { display: grid; gap: 0; }

.step {
  display: grid;
  grid-template-columns: minmax(4.5rem, 8vw) 1fr;
  column-gap: var(--gutter);
  align-items: start;
  padding-block: clamp(1.5rem, .8rem + 2.4vw, 2.75rem);
  border-block-start: 1px solid var(--line);
  position: relative;
}
.step:last-child { border-block-end: 1px solid var(--line); }
.on-ink .step { border-block-start-color: var(--line-dark); }
.on-ink .step:last-child { border-block-end-color: var(--line-dark); }

.step::before {
  content: "";
  position: absolute;
  inset-block-start: -1px; inset-inline-start: 0;
  width: 0; height: 1px;
  background: var(--brand);
  transition: width var(--dur-4) var(--ease-out);
}
.step.is-in::before { width: 100%; }

.step__num {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 1.1rem + 1.8vw, 2.5rem);
  line-height: 1;
  letter-spacing: -.03em;
  color: var(--brand-deep);
  font-variant-numeric: tabular-nums;
  font-variation-settings: "SOFT" 16, "WONK" 0;
}
.on-ink .step__num { color: var(--brand-lift); }

.step__title { margin-block-end: .5rem; }
.step__text { color: var(--muted); max-width: 52ch; }
.on-ink .step__text { color: color-mix(in srgb, var(--cream) 74%, transparent); }

@media (max-width: 599px) {
  .step { grid-template-columns: 1fr; row-gap: .75rem; }
}

/* --------------------------------------------------------------------------
   8. USE-CASE / FEATURE LIST
   -------------------------------------------------------------------------- */
.tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
}
.on-ink .tiles { background: var(--line-dark); border-color: var(--line-dark); }

.tile {
  background: var(--bone);
  padding: clamp(1.35rem, .9rem + 1.8vw, 2.15rem);
  display: flex;
  flex-direction: column;
  gap: .55rem;
  transition: background-color var(--dur-2) var(--ease);
}
.on-ink .tile { background: var(--ink); }
.tile:hover { background: var(--bone-deep); }
.on-ink .tile:hover { background: var(--ink-soft); }

.tile__num {
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: .14em;
  color: var(--brand-deep);
  font-variant-numeric: tabular-nums;
}
.on-ink .tile__num { color: var(--brand-lift); }
.tile__title { font-size: var(--fs-h4); font-weight: 600; letter-spacing: -.012em; }
.tile__text { font-size: var(--fs-sm); color: var(--muted); line-height: 1.55; }
.on-ink .tile__text { color: var(--muted-dark); }

/* --------------------------------------------------------------------------
   9. PULL QUOTE
   -------------------------------------------------------------------------- */
.pullquote { margin: 0; }
.pullquote__text {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 1.05rem + 2.6vw, 3.1rem);
  font-style: italic;
  line-height: 1.14;
  letter-spacing: -.024em;
  font-variation-settings: "SOFT" 40, "WONK" 1;
  text-wrap: balance;
}
.pullquote__cite {
  display: block;
  margin-block-start: var(--sp-3);
  font-family: var(--font-sans);
  font-style: normal;
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--muted);
  letter-spacing: -.004em;
}
.on-ink .pullquote__cite { color: var(--muted-dark); }
.pullquote__cite strong { display: block; font-weight: 600; color: var(--ink); }
.on-ink .pullquote__cite strong { color: var(--cream); }

/* --------------------------------------------------------------------------
   10. FORMS
   -------------------------------------------------------------------------- */
.form { display: grid; gap: var(--sp-3); }

.form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-3);
}
@media (max-width: 699px) {
  .form-grid { grid-template-columns: 1fr; }
}
.field--full { grid-column: 1 / -1; }

.field { display: grid; gap: .45rem; }

.field__label {
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: .04em;
  color: var(--ink);
}
.on-ink .field__label { color: var(--cream); }

.field__req {
  color: var(--brand-deep);
  margin-inline-start: .15rem;
}
.on-ink .field__req { color: var(--brand-lift); }

.field__hint {
  font-size: var(--fs-xs);
  color: var(--muted);
}
.on-ink .field__hint { color: var(--muted-dark); }

.input, .select, .textarea {
  width: 100%;
  padding: .8rem .95rem;
  background: var(--paper);
  color: var(--ink);
  border: 1px solid var(--line-strong);
  border-radius: var(--r);
  font-size: var(--fs-sm);
  line-height: 1.5;
  transition: border-color var(--dur-1) var(--ease),
              box-shadow var(--dur-1) var(--ease);
  appearance: none;
}
.textarea { min-height: 8.5rem; resize: vertical; }

/* Placeholders are text and must meet 4.5:1 (WCAG 1.4.3). At the previous 72%
   this resolved to 3.01:1 against --bone. Full --muted is 5.28:1. */
.input::placeholder, .textarea::placeholder { color: var(--muted); }

.input:hover, .select:hover, .textarea:hover { border-color: var(--muted); }

/* Focus indicator, WCAG 1.4.11 Non-text Contrast (3:1).
   The previous ring was --brand at 22% alpha, which resolves to 1.28:1 against
   --bone: visible as a tint, but nowhere near a compliant focus indicator.
   Solid --brand-deep is 6.05:1. The geometry is unchanged (still a 3px ring
   hugging the border radius), so only the strength of the color differs.
   The transparent outline is deliberate: box-shadow is discarded in Windows
   High Contrast / forced-colors mode, where a transparent outline is
   repainted in the user's system color and keeps focus visible. */
.input:focus, .select:focus, .textarea:focus {
  outline: 2px solid transparent;
  outline-offset: 3px;
  border-color: var(--brand-deep);
  box-shadow: 0 0 0 3px var(--brand-deep);
}

.select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%235B7079' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right .95rem center;
  background-size: .7rem;
  padding-inline-end: 2.4rem;
}

/* Validation */
.input[aria-invalid="true"], .select[aria-invalid="true"], .textarea[aria-invalid="true"] {
  border-color: #A8342B;
  box-shadow: 0 0 0 3px rgba(168, 52, 43, .13);
}
.field__error {
  font-size: var(--fs-xs);
  font-weight: 500;
  color: #8E2B23;
  display: none;
}
.field__error.is-shown { display: block; }
.on-ink .field__error { color: #F2A9A2; }

/* Honeypot - bots fill it, humans never see it */
.hp {
  position: absolute !important;
  left: -9999px;
  opacity: 0;
  height: 0;
  width: 0;
  pointer-events: none;
}

.form-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2) var(--sp-3);
  padding-block-start: var(--sp-1);
}
.form-note { font-size: var(--fs-xs); color: var(--muted); max-width: 44ch; }
.on-ink .form-note { color: var(--muted-dark); }

.form-status {
  padding: 1rem 1.15rem;
  border-radius: var(--r);
  font-size: var(--fs-sm);
  line-height: 1.55;
  display: none;
}
.form-status.is-shown { display: block; }
.form-status--ok {
  background: color-mix(in srgb, var(--brand) 12%, var(--paper));
  border: 1px solid color-mix(in srgb, var(--brand-deep) 32%, transparent);
  color: var(--ink);
}
.form-status--err {
  background: #FBEFEE;
  border: 1px solid #E2B6B1;
  color: #7C271F;
}

.btn[aria-busy="true"] { opacity: .68; pointer-events: none; }

/* --------------------------------------------------------------------------
   11. ACCORDION (FAQ)
   -------------------------------------------------------------------------- */
.accordion { border-block-start: 1px solid var(--line); }
.on-ink .accordion { border-block-start-color: var(--line-dark); }

.acc__item { border-block-end: 1px solid var(--line); }
.on-ink .acc__item { border-block-end-color: var(--line-dark); }

.acc__btn {
  width: 100%;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--sp-3);
  padding-block: clamp(1.05rem, .8rem + .9vw, 1.5rem);
  text-align: start;
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  line-height: 1.2;
  letter-spacing: -.018em;
  font-variation-settings: "SOFT" 20, "WONK" 0;
  color: var(--ink);
  transition: color var(--dur-1) var(--ease);
}
.acc__btn:hover { color: var(--brand-deep); }
.on-ink .acc__btn { color: var(--cream); }
.on-ink .acc__btn:hover { color: var(--brand-lift); }

.acc__icon {
  flex: none;
  position: relative;
  width: 1.05rem; height: 1.05rem;
  margin-block-start: .38em;
}
.acc__icon::before, .acc__icon::after {
  content: "";
  position: absolute;
  background: currentColor;
  transition: transform var(--dur-2) var(--ease-out), opacity var(--dur-2) var(--ease);
}
.acc__icon::before { inset-block-start: 50%; inset-inline: 0; height: 1.5px; transform: translateY(-50%); }
.acc__icon::after  { inset-inline-start: 50%; inset-block: 0; width: 1.5px; transform: translateX(-50%); }
[aria-expanded="true"] .acc__icon::after { transform: translateX(-50%) scaleY(0); opacity: 0; }

.acc__panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--dur-3) var(--ease-out);
}
.acc__panel[data-open="true"] { grid-template-rows: 1fr; }
.acc__panel > div { overflow: hidden; }
.acc__body {
  padding-block-end: var(--sp-3);
  padding-inline-end: var(--sp-5);
  color: var(--muted);
  max-width: 62ch;
}
.on-ink .acc__body { color: var(--muted-dark); }
@media (max-width: 599px) { .acc__body { padding-inline-end: 0; } }

/* --------------------------------------------------------------------------
   12. STAT / CREDENTIAL ROW
   -------------------------------------------------------------------------- */
.creds {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
  gap: var(--sp-3) var(--gutter);
}
.cred { border-block-start: 1px solid var(--line); padding-block-start: .85rem; }
.on-ink .cred { border-block-start-color: var(--line-dark); }
.cred__label {
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--muted);
  margin-block-end: .35rem;
}
.on-ink .cred__label { color: var(--muted-dark); }
.cred__value { font-size: var(--fs-sm); font-weight: 500; line-height: 1.45; }

/* --------------------------------------------------------------------------
   13. DISCLAIMER - present, precise, never dominant
   -------------------------------------------------------------------------- */
.disclaimer {
  font-size: var(--fs-xs);
  line-height: 1.6;
  color: var(--muted);
  max-width: 66ch;
  padding-inline-start: 1rem;
  border-inline-start: 1px solid var(--line-strong);
}
.on-ink .disclaimer { color: var(--muted-dark); border-inline-start-color: var(--line-dark); }

/* A single, scoped step up in prominence for the disclaimer that closes the
   For Hospitals page. The shared .disclaimer used on Home, How It Works and
   elsewhere is deliberately untouched. Body size instead of caption size, full
   ink instead of muted, a brand rule instead of a hairline, and a tinted panel
   so it reads as important information rather than fine print. */
.disclaimer--notice {
  font-size: var(--fs-sm);
  color: var(--ink);
  max-width: 72ch;
  padding: 1.25rem 1.5rem;
  background: var(--bone-deep);
  border-inline-start: 3px solid var(--brand);
  border-radius: 0 var(--r) var(--r) 0;
}

/* Item 13: the contact prompt is a sentence, not a label, so it is set as
   readable body text while keeping the .cred block's position and the email
   below it exactly as they were. */
.cred__note {
  font-size: var(--fs-sm);
  line-height: 1.55;
  color: var(--muted);
  margin-block-end: .5rem;
  max-width: 46ch;
}
.on-ink .cred__note { color: var(--muted-dark); }

/* --------------------------------------------------------------------------
   14. CTA BANNER
   -------------------------------------------------------------------------- */
.cta-band {
  background: var(--ink);
  color: var(--cream);
  border-radius: var(--r-lg);
  padding: clamp(2.25rem, 1.2rem + 5vw, 5.5rem);
  position: relative;
  overflow: hidden;
}
.cta-band::before {
  content: "";
  position: absolute;
  inset-block-start: -30%; inset-inline-end: -12%;
  width: 46rem; height: 46rem;
  background: radial-gradient(circle,
    color-mix(in srgb, var(--brand) 30%, transparent) 0%, transparent 62%);
  pointer-events: none;
}
.cta-band > * { position: relative; }

/* --------------------------------------------------------------------------
   15. BADGE
   -------------------------------------------------------------------------- */
.badge {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .35rem .75rem .35rem .6rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-pill);
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
  background: color-mix(in srgb, var(--paper) 60%, transparent);
}
.badge::before {
  content: "";
  width: .4rem; height: .4rem;
  border-radius: 50%;
  background: var(--brand);
  flex: none;
}
.on-ink .badge {
  border-color: var(--line-dark);
  color: var(--muted-dark);
  background: transparent;
}

/* --------------------------------------------------------------------------
   16. BREADCRUMB / PAGE HEAD
   -------------------------------------------------------------------------- */
.page-head { padding-block: clamp(3rem, 1.5rem + 6vw, 7rem) 0; }
.page-head__inner {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gutter);
  row-gap: var(--sp-3);
  align-items: end;
}
.page-head__title { grid-column: 1 / 9; }
.page-head__aside { grid-column: 9 / -1; padding-block-end: .6rem; }
@media (max-width: 899px) {
  .page-head__title, .page-head__aside { grid-column: 1 / -1; }
}