/* Mobile primary actions follow the full 6.5-cell Begrip card width.
   The portrait/speaking actions and the inset Begrip action stay compact. All rules
   stay mobile-only; desktop keeps its existing component dimensions. */
@media (max-width: 899.98px) {
  :root {
    --mobile-cta-width: 81.25vw;
    --mobile-cta-height: 54px;
    --mobile-cta-font-size: 14px;
    --mobile-cta-note-gap: 12px;
  }
  #spreken,
  #schrijven > .sch-about {
    --mobile-cta-width: 220px;
  }
  #hero .fig-b-reeks {
    width: var(--mobile-cta-width);
    margin-inline: auto;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: calc(var(--cell) * 0.5);
  }
  /* Keep the inset action and its caption centered inside the card. */
  #systematiseren .sys-begrip-cta {
    --mobile-cta-width: 220px;
    width: var(--mobile-cta-width);
    margin-inline: auto;
  }
  #schrijven .nieuwsbrief form {
    width: var(--mobile-cta-width);
    max-width: none;
    margin-inline: calc((100% - var(--mobile-cta-width)) / 2);
  }
  /* The avatar needs enough room for the same field and action width. */
  .bri .bri-kaart.bri-kaart--brief {
    right: 0;
    bottom: 62px;
    width: calc(var(--mobile-cta-width) + 36px);
  }
  :is(#hero, #systematiseren, #spreken, #schrijven, #contact, .fig-header, .bri)
    .mobile-primary-cta {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    box-sizing: border-box;
    width: var(--mobile-cta-width);
    min-width: var(--mobile-cta-width);
    max-width: var(--mobile-cta-width);
    height: var(--mobile-cta-height);
    min-height: var(--mobile-cta-height);
    padding: 0 8px;
    margin-inline: auto;
    border-radius: 999px 999px 0 999px;
    font-family: var(--font-sans);
    font-size: var(--mobile-cta-font-size);
    font-weight: 700;
    line-height: 20px;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    text-align: center;
    white-space: nowrap;
  }
  :is(#hero, #systematiseren, #spreken, #schrijven, #contact, .fig-header, .bri)
    .mobile-primary-cta
    > span {
    --bl-corr: 0px;
    top: 0;
    line-height: inherit;
  }
  :is(#hero, #systematiseren, #spreken, #schrijven, #contact)
    .btn-wrap:has(> .mobile-primary-cta) {
    width: var(--mobile-cta-width);
  }
  :is(#hero, #systematiseren, #spreken, #schrijven, #contact)
    .mobile-primary-cta
    + .btn-notch {
    display: none;
  }
  :is(#hero, #systematiseren, #contact, .fig-header) .mobile-cta-group {
    text-align: center;
  }
  :is(#hero, #systematiseren, #contact, .fig-header) .mobile-cta-note {
    --bl-corr: 0px;
    display: block;
    position: relative;
    top: 0;
    width: var(--mobile-cta-width);
    max-width: none;
    margin: var(--mobile-cta-note-gap) auto 0;
    font-family: var(--font-mono), monospace;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.5;
    letter-spacing: 0.04em;
    text-indent: 0;
    text-transform: uppercase;
    text-align: center;
    text-wrap: balance;
    opacity: 1;
  }
}