/* ==========================================================================
   FORCE PR — 05 COMPONENTS
   Every class is namespaced `force-`. Single class, no nesting deeper than
   one level, no `!important`, no element selectors.
   ========================================================================== */

@layer force.components {

  /* ======================================================================
     SKIP LINK
     ====================================================================== */

  .force-skip-link {
    position: absolute;
    inset-block-start: var(--force-space-2);
    inset-inline-start: var(--force-space-2);
    z-index: var(--force-z-modal);
    padding: var(--force-space-3) var(--force-space-5);
    background-color: var(--force-accent);
    color: var(--force-color-ink);
    font-family: var(--force-font-display);
    font-weight: var(--force-weight-semibold);
    text-transform: uppercase;
    letter-spacing: var(--force-tracking-button);
    text-decoration: none;
    border-radius: var(--force-radius-sm);
    transform: translateY(-200%);
  }

  .force-skip-link:focus-visible { transform: translateY(0); }


  /* ======================================================================
     TYPOGRAPHIC COMPONENTS
     ====================================================================== */

  /* Display — the largest type in the system. One per page, normally the hero. */
  .force-display {
    font-family: var(--force-font-display);
    font-size: var(--force-text-display);
    font-weight: var(--force-weight-bold);
    line-height: var(--force-leading-display);
    letter-spacing: var(--force-tracking-display);
    text-transform: uppercase;
    text-wrap: balance;
    max-inline-size: var(--force-measure-display);
    margin: 0;
  }

  /* Eyebrow — the small uppercase label above a heading.
     This is the supported replacement for the legacy habit of setting an
     <h5> or a tiny styled <h6> purely to get a label. */
  .force-eyebrow {
    display: block;
    font-family: var(--force-font-display);
    font-size: var(--force-text-eyebrow);
    font-weight: var(--force-weight-semibold);
    line-height: var(--force-leading-tight);
    letter-spacing: var(--force-tracking-eyebrow);
    text-transform: uppercase;
    color: var(--force-accent);
  }

  .force-eyebrow--mint  { color: var(--force-accent-secondary); }
  .force-eyebrow--muted { color: var(--force-text-muted); }

  /* Eyebrow with a leading tick — the small technical detail that reads
     "system", not "decoration". */
  .force-eyebrow--marked {
    display: flex;
    align-items: center;
    gap: var(--force-space-3);
  }

  .force-eyebrow--marked::before {
    content: "";
    flex: none;
    inline-size: var(--force-space-6);
    block-size: 1px;
    background-color: currentColor;
  }

  /* Lead paragraph. Use this, never <h6>. */
  .force-lead {
    font-size: var(--force-text-body-lg);
    line-height: var(--force-leading-lead);
    color: var(--force-text-muted);
    max-inline-size: var(--force-measure-lead);
  }

  .force-caption {
    font-size: var(--force-text-caption);
    line-height: var(--force-leading-tight);
    color: var(--force-text-muted);
  }

  .force-measure-heading { max-inline-size: var(--force-measure-heading); }

  /* Accent fragments inside a heading — the controlled way to colour part
     of a title without a second heading element. */
  .force-accent-text   { color: var(--force-accent); }
  .force-accent-text-2 { color: var(--force-accent-secondary); }

  .force-gradient-text {
    background-image: var(--force-gradient-magenta-purple);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    /* Fallback for clip-path-less engines: the base colour still shows. */
    -webkit-text-fill-color: transparent;
  }


  /* ======================================================================
     ★ THE FORCE PR SIGNATURE — NEON CURSOR
     ----------------------------------------------------------------------
     Replaces the legacy mechanism, which required an author to literally
     type "_" into the heading. That single decision leaked the underscore
     into <title> tags, breadcrumbs, social previews, search snippets and
     three live URLs.

     Here the mark is a pseudo-element. Content stays clean and semantic:

         <h2 class="force-cursor">Digital</h2>

     renders as   DIGITAL▁   with a glowing, blinking neon mark.

     Accessibility: the mark is drawn with background-color, not with a text
     glyph, so there is no character for a screen reader to announce and no
     dependence on the `content: "x" / ""` alt-text syntax.

     BUDGET: one, at most two, per viewport. It is a signature, not a bullet.
     ====================================================================== */

  .force-cursor { position: relative; }

  .force-cursor::after {
    content: "";
    display: inline-block;
    inline-size: 0.5em;
    block-size: max(2px, 0.055em);
    margin-inline-start: var(--force-cursor-offset);
    margin-block-end: -0.08em;          /* drop it just below the baseline, like a real underscore */
    vertical-align: baseline;
    background-color: var(--force-accent);
    box-shadow: var(--force-glow-accent);
    animation: force-cursor-blink var(--force-cursor-duration) steps(1, end) infinite;
  }

  /* Block caret — the overt terminal insertion point. */
  .force-cursor--block::after {
    inline-size: 0.42em;
    block-size: 0.8em;
    margin-block-end: 0;
    border-radius: var(--force-radius-none);
  }

  /* Full-height thin caret — the quietest variant. */
  .force-cursor--bar::after {
    inline-size: max(2px, 0.06em);
    block-size: 0.85em;
    margin-block-end: -0.05em;
  }

  /* Mint variant, for the secondary/technical register. */
  .force-cursor--mint::after {
    background-color: var(--force-accent-secondary);
    box-shadow: var(--force-glow-accent-2);
  }

  /* No blink. Use when the mark sits near other motion, or in a card grid
     where several blinking marks would turn into noise. */
  .force-cursor--static::after { animation: none; }

  /* Larger, softer version for the hero display heading. */
  .force-cursor--display::after {
    inline-size: 0.42em;
    block-size: max(4px, 0.05em);
    box-shadow: var(--force-glow-accent), var(--force-glow-accent-soft);
  }

  @keyframes force-cursor-blink {
    0%,   49.9% { opacity: 1; }
    50%, 100%   { opacity: 0.12; }
  }

  /* The neon rule — the `▔` half of the signature, at section scale.
     A hairline that runs under a heading and fades out. */
  .force-rule {
    display: block;
    block-size: 2px;
    inline-size: var(--force-space-11);
    max-inline-size: 40%;
    border: 0;
    background: var(--force-gradient-rule);
    box-shadow: var(--force-glow-accent-soft);
    margin: 0;
  }

  .force-rule--full { inline-size: 100%; max-inline-size: none; }
  .force-rule--thin { block-size: 1px; box-shadow: none; opacity: 0.4; }


  /* ======================================================================
     BUTTONS
     ----------------------------------------------------------------------
     Contrast, computed against the tokens:

       ink #1c1c23 on magenta #ff0ff5 ....... 5.35:1  ✅ AA normal text
       white #ffffff on magenta #ff0ff5 ..... 3.16:1  ❌ fails AA normal text

     The legacy site uses white on magenta. This system uses ink on magenta
     instead. It passes, and a near-black label on a saturated neon fill also
     happens to read more like real signage than white-on-pink does.
     A white-on-magenta variant is deliberately NOT provided, because there
     is no button size in this scale at which it would pass.
     ====================================================================== */

  .force-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--force-space-3);
    min-block-size: 2.75rem;           /* 44px — WCAG 2.5.8 target size */
    padding: var(--force-space-3) var(--force-space-6);
    border: var(--force-border-width) solid transparent;
    border-radius: var(--force-radius-sm);
    font-family: var(--force-font-display);
    font-size: var(--force-text-button);
    font-weight: var(--force-weight-semibold);
    line-height: var(--force-leading-none);
    letter-spacing: var(--force-tracking-button);
    text-transform: uppercase;
    text-decoration: none;
    text-align: center;
    cursor: pointer;
    background-color: transparent;
    color: var(--force-text);
    transition: background-color var(--force-duration) var(--force-ease),
                border-color     var(--force-duration) var(--force-ease),
                color            var(--force-duration) var(--force-ease),
                box-shadow       var(--force-duration) var(--force-ease),
                transform        var(--force-duration) var(--force-ease);
  }

  .force-btn:focus-visible {
    outline: 2px solid var(--force-focus);
    outline-offset: 3px;
  }

  .force-btn:disabled,
  .force-btn[aria-disabled="true"] {
    opacity: 0.45;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
  }

  /* -- Primary: the one magenta CTA. Budget ~1 per viewport. -------------- */
  .force-btn--primary {
    background-color: var(--force-accent);
    color: var(--force-color-ink);
    border-color: var(--force-accent);
    box-shadow: var(--force-glow-accent-soft);
  }

  .force-btn--primary:hover {
    background-color: var(--force-color-white);
    border-color: var(--force-color-white);
    color: var(--force-color-ink);
    box-shadow: var(--force-glow-accent);
    transform: translateY(-2px);
  }

  .force-btn--primary:active {
    transform: translateY(0);
    box-shadow: var(--force-glow-accent-soft);
  }

  /* -- Secondary: dark, bordered, accent on interaction ------------------ */
  .force-btn--secondary {
    background-color: var(--force-surface);
    color: var(--force-text);
    border-color: rgb(255 255 255 / 0.22);
  }

  .force-btn--secondary:hover {
    background-color: var(--force-surface-accent);
    border-color: var(--force-accent);
    color: var(--force-accent);
    transform: translateY(-2px);
  }

  .force-btn--secondary:active { transform: translateY(0); }

  /* -- Ghost: text only -------------------------------------------------- */
  .force-btn--ghost {
    padding-inline: var(--force-space-2);
    color: var(--force-text);
    border-color: transparent;
    background-color: transparent;
  }

  .force-btn--ghost:hover {
    color: var(--force-accent);
    /* Non-colour state signal, so hover is not communicated by hue alone. */
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 0.35em;
  }

  /* -- Sizes ------------------------------------------------------------- */
  .force-btn--sm {
    min-block-size: 2.25rem;
    padding: var(--force-space-2) var(--force-space-4);
    font-size: var(--force-text-body-sm);
  }

  .force-btn--lg {
    min-block-size: 3.5rem;
    padding: var(--force-space-4) var(--force-space-8);
    font-size: var(--force-text-body-lg);
  }

  .force-btn--block { display: flex; inline-size: 100%; }

  /* -- Icon: the arrow nudges on hover ----------------------------------- */
  .force-btn__icon {
    flex: none;
    inline-size: 1em;
    block-size: 1em;
    transition: transform var(--force-duration) var(--force-ease);
  }

  .force-btn:hover .force-btn__icon { transform: translateX(3px); }


  /* ======================================================================
     LINKS
     ====================================================================== */

  /* Animated underline, for nav and standalone links. */
  .force-link {
    position: relative;
    display: inline-block;
    color: var(--force-text);
    text-decoration: none;
    padding-block-end: 2px;
  }

  .force-link::after {
    content: "";
    position: absolute;
    inset-block-end: 0;
    inset-inline-start: 0;
    inline-size: 100%;
    block-size: 1px;
    background-color: var(--force-accent);
    transform: scaleX(0);
    transform-origin: right;
    transition: transform var(--force-duration) var(--force-ease);
  }

  .force-link:hover::after,
  .force-link:focus-visible::after {
    transform: scaleX(1);
    transform-origin: left;
  }

  .force-link[aria-current]::after { transform: scaleX(1); }

  .force-nav-link {
    font-family: var(--force-font-display);
    font-size: var(--force-text-nav);
    font-weight: var(--force-weight-semibold);
    letter-spacing: var(--force-tracking-nav);
    text-transform: uppercase;
  }

  /* Strip the global prose underline where a link is obviously a link. */
  .force-link--bare { text-decoration: none; }


  /* ======================================================================
     CARDS
     Dark, structured, low ornament. Elevation on dark surfaces comes from
     the border and the background step, not from a big shadow.
     ====================================================================== */

  .force-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--force-space-4);
    padding: var(--force-space-6);
    background-color: var(--force-surface);
    border: var(--force-border);
    border-radius: var(--force-radius-sm);
    box-shadow: var(--force-shadow-inset);
    transition: background-color var(--force-duration) var(--force-ease),
                border-color     var(--force-duration) var(--force-ease),
                box-shadow       var(--force-duration) var(--force-ease),
                transform        var(--force-duration) var(--force-ease);
  }

  .force-card__title {
    font-family: var(--force-font-display);
    font-size: var(--force-text-h4);
    font-weight: var(--force-weight-semibold);
    line-height: var(--force-leading-h4);
    text-transform: uppercase;
    color: var(--force-text);
    margin: 0;
  }

  .force-card__body {
    font-size: var(--force-text-body-sm);
    color: var(--force-text-muted);
    margin: 0;
    max-inline-size: none;
  }

  /* Push the footer to the bottom so cards in a row align. */
  .force-card__footer { margin-block-start: auto; padding-block-start: var(--force-space-2); }

  /* -- Interactive ------------------------------------------------------- */
  .force-card--link:hover,
  .force-card--link:focus-within {
    background-color: var(--force-surface-hover);
    border-color: rgb(255 255 255 / 0.22);
    transform: translateY(-4px);
    box-shadow: var(--force-shadow-md), var(--force-shadow-inset);
  }

  /* Whole-card click target driven by a single real link inside it —
     keeps one focusable element and one accessible name. */
  .force-card__link { text-decoration: none; color: inherit; }

  .force-card__link::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
  }

  /* -- Accent: the top hairline. Use sparingly — one per grid, not all. --- */
  .force-card--accent { border-color: rgb(255 15 245 / 0.28); }

  .force-card--accent::before {
    content: "";
    position: absolute;
    inset-block-start: -1px;
    inset-inline: -1px;
    block-size: 2px;
    background: var(--force-gradient-rule);
    border-start-start-radius: var(--force-radius-sm);
    border-start-end-radius: var(--force-radius-sm);
  }

  .force-card--accent:hover { box-shadow: var(--force-glow-edge), var(--force-shadow-md); }

  /* -- Gradient: the one "hero" card in a set --------------------------- */
  .force-card--gradient {
    background-image: var(--force-gradient-ink);
    border-color: rgb(255 255 255 / 0.14);
  }

  /* -- Flush: image-led card, padding moves to an inner element ---------- */
  .force-card--flush { padding: 0; gap: 0; overflow: clip; }
  .force-card--flush .force-card__content { padding: var(--force-space-6); display: flex; flex-direction: column; gap: var(--force-space-4); flex: 1; }

  /* -- Bare: no chrome at all -------------------------------------------- */
  .force-card--bare {
    padding: 0;
    background: none;
    border: 0;
    box-shadow: none;
  }

  /* -- Numbered: process / step cards ------------------------------------ */
  .force-card__number {
    font-family: var(--force-font-display);
    font-size: var(--force-text-h2);
    font-weight: var(--force-weight-bold);
    line-height: 1;
    letter-spacing: var(--force-tracking-h2);
    color: transparent;
    -webkit-text-stroke: 1px rgb(255 255 255 / 0.28);
  }

  /* -- Container query: a card in a roomy slot gets more room ------------ */
  @container force (inline-size >= 34rem) {
    .force-card { padding: var(--force-space-8); }
    .force-card__title { font-size: var(--force-text-h3); }
    .force-card__body  { font-size: var(--force-text-body); }
  }

  @container force (inline-size < 20rem) {
    .force-card { padding: var(--force-space-5); }
  }


  /* ======================================================================
     MEDIA
     Treatments are OPT-IN. The default `.force-media` is a plain, clipped
     frame: photography stays photography. Never stack more than one
     treatment on the same image.
     ====================================================================== */

  .force-media {
    position: relative;
    display: block;
    overflow: clip;
    border-radius: var(--force-radius-sm);
    background-color: var(--force-bg-sunken);
  }

  .force-media > img {
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
  }

  .force-media--round { border-radius: var(--force-radius-md); }
  .force-media--sharp { border-radius: var(--force-radius-none); }

  /* Scrim — for text laid over an image. Functional, not decorative. */
  .force-media--scrim::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image: var(--force-gradient-scrim);
    pointer-events: none;
  }

  /* Tint — a whisper of brand over an image. Reserve for hero and case
     study covers; it is the loudest treatment in the set. */
  .force-media--tint::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image: var(--force-gradient-magenta-purple);
    mix-blend-mode: soft-light;
    opacity: 0.5;
    pointer-events: none;
  }

  /* Dim — pure darkening, no hue shift. The safe default for text overlays
     on photography where brand tint would misrepresent the subject. */
  .force-media--dim::after {
    content: "";
    position: absolute;
    inset: 0;
    background-color: var(--force-surface-overlay);
    pointer-events: none;
  }

  /* Edge glow. One per viewport, at most. */
  .force-media--glow { box-shadow: var(--force-glow-edge); }

  /* Hover zoom. Slow and small — 1.04, not 1.2. */
  .force-media--zoom > img {
    transition: transform var(--force-duration-slower) var(--force-ease-out);
  }

  .force-media--zoom:hover > img,
  .force-card--link:hover .force-media--zoom > img { transform: scale(1.04); }

  /* Hover reveal — caption slides up from the bottom edge. */
  .force-media__reveal {
    position: absolute;
    inset-inline: 0;
    inset-block-end: 0;
    padding: var(--force-space-5);
    background-image: var(--force-gradient-scrim);
    transform: translateY(12%);
    opacity: 0;
    transition: transform var(--force-duration-slow) var(--force-ease-out),
                opacity   var(--force-duration-slow) var(--force-ease-out);
  }

  .force-media:hover .force-media__reveal,
  .force-media:focus-within .force-media__reveal {
    transform: translateY(0);
    opacity: 1;
  }


  /* ======================================================================
     BADGE / TAG
     ====================================================================== */

  .force-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--force-space-2);
    padding: var(--force-space-1) var(--force-space-3);
    border: var(--force-border);
    border-radius: var(--force-radius-pill);
    font-family: var(--force-font-display);
    font-size: var(--force-text-caption);
    font-weight: var(--force-weight-semibold);
    letter-spacing: var(--force-tracking-nav);
    text-transform: uppercase;
    color: var(--force-text-muted);
    text-decoration: none;
    transition: border-color var(--force-duration) var(--force-ease),
                color        var(--force-duration) var(--force-ease);
  }

  .force-badge:hover { border-color: var(--force-accent); color: var(--force-accent); }

  .force-badge--accent { border-color: rgb(255 15 245 / 0.45); color: var(--force-accent); }
  .force-badge--mint   { border-color: rgb(0 255 195 / 0.45);  color: var(--force-accent-secondary); }


  /* ======================================================================
     STAT — the number-led figure used across the agency pages
     ====================================================================== */

  .force-stat { display: flex; flex-direction: column; gap: var(--force-space-2); }

  .force-stat__value {
    font-family: var(--force-font-display);
    font-size: var(--force-text-h1);
    font-weight: var(--force-weight-bold);
    line-height: var(--force-leading-none);
    letter-spacing: var(--force-tracking-h1);
    color: var(--force-accent-secondary);   /* mint reads as data — 13:1 on ink */
  }

  .force-stat__label {
    font-size: var(--force-text-body-sm);
    color: var(--force-text-muted);
  }


  /* ======================================================================
     FORMS
     Real <label> elements. The legacy Contact Form 7 forms use placeholder
     text as the only label (SITE-AUDIT A-4), which disappears on focus and
     is inconsistently exposed to assistive technology.
     ====================================================================== */

  .force-field { display: flex; flex-direction: column; gap: var(--force-space-2); }

  .force-label {
    font-family: var(--force-font-display);
    font-size: var(--force-text-eyebrow);
    font-weight: var(--force-weight-semibold);
    letter-spacing: var(--force-tracking-eyebrow);
    text-transform: uppercase;
    color: var(--force-text-muted);
  }

  .force-label__required { color: var(--force-accent); }

  .force-input,
  .force-textarea,
  .force-select {
    inline-size: 100%;
    min-block-size: 2.75rem;
    padding: var(--force-space-3) var(--force-space-4);
    background-color: var(--force-bg-sunken);
    border: var(--force-border);
    border-radius: var(--force-radius-xs);
    color: var(--force-text);
    font-family: var(--force-font-body);
    font-size: var(--force-text-body);
    transition: border-color var(--force-duration) var(--force-ease),
                box-shadow   var(--force-duration) var(--force-ease);
  }

  .force-textarea { min-block-size: 8rem; resize: vertical; }

  .force-input::placeholder,
  .force-textarea::placeholder { color: var(--force-text-subtle); }

  .force-input:focus-visible,
  .force-textarea:focus-visible,
  .force-select:focus-visible {
    outline: none;
    border-color: var(--force-focus);
    box-shadow: 0 0 0 2px rgb(0 255 195 / 0.25);
  }

  .force-input[aria-invalid="true"],
  .force-textarea[aria-invalid="true"] { border-color: var(--force-error); }

  .force-field__error {
    display: flex;
    align-items: center;
    gap: var(--force-space-2);
    font-size: var(--force-text-caption);
    color: var(--force-error);
  }

  /* Error is signalled by an icon and text, not by the red border alone. */
  .force-field__error::before { content: "⚠"; }

  .force-field__hint { font-size: var(--force-text-caption); color: var(--force-text-subtle); }


  /* ======================================================================
     ICONS
     One system: inline SVG, 1.5px stroke, currentColor, 24×24 viewBox.
     No icon fonts. The legacy site loads five icon font families
     (FontAwesome, Ion, Linea, Linear, Dripicons) — roughly 3,000 glyphs to
     render a handful of arrows.
     ====================================================================== */

  .force-icon {
    display: inline-block;
    inline-size: 1.25em;
    block-size: 1.25em;
    flex: none;
    vertical-align: -0.2em;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  .force-icon--sm { inline-size: 1em;    block-size: 1em; }
  .force-icon--lg { inline-size: 2rem;   block-size: 2rem; }
  .force-icon--xl { inline-size: 3rem;   block-size: 3rem; stroke-width: 1; }

  .force-icon--accent { color: var(--force-accent); }
  .force-icon--mint   { color: var(--force-accent-secondary); }

  /* Filled brand marks (logos, social) opt out of the stroke system. */
  .force-icon--solid { fill: currentColor; stroke: none; }
}

/* ==========================================================================
   GUTENBERG BLOCK BRIDGE
   Maps the block styles registered in functions.php onto the components
   above. This is what makes "zero custom blocks" workable: an editor picks
   a core Heading and chooses "Neon cursor" from the Styles panel.

   These selectors are single-class and live in the same layer as the
   components they alias, so specificity stays flat.
   ========================================================================== */

@layer force.components {

  .is-style-force-display       { font-family: var(--force-font-display); font-size: var(--force-text-display); font-weight: var(--force-weight-bold); line-height: var(--force-leading-display); letter-spacing: var(--force-tracking-display); text-transform: uppercase; text-wrap: balance; }

  .is-style-force-eyebrow       { font-family: var(--force-font-display); font-size: var(--force-text-eyebrow); font-weight: var(--force-weight-semibold); line-height: var(--force-leading-tight); letter-spacing: var(--force-tracking-eyebrow); text-transform: uppercase; color: var(--force-accent); }

  .is-style-force-lead          { font-size: var(--force-text-body-lg); line-height: var(--force-leading-lead); color: var(--force-text-muted); max-inline-size: var(--force-measure-lead); }

  .is-style-force-caption       { font-size: var(--force-text-caption); line-height: var(--force-leading-tight); color: var(--force-text-muted); }

  /* Signature cursor, via the Styles panel rather than a typed underscore. */
  .is-style-force-cursor::after,
  .is-style-force-cursor-block::after,
  .is-style-force-cursor-mint::after {
    content: "";
    display: inline-block;
    inline-size: 0.5em;
    block-size: max(2px, 0.055em);
    margin-inline-start: var(--force-cursor-offset);
    margin-block-end: -0.08em;
    vertical-align: baseline;
    background-color: var(--force-accent);
    box-shadow: var(--force-glow-accent);
    animation: force-cursor-blink var(--force-cursor-duration) steps(1, end) infinite;
  }

  .is-style-force-cursor-block::after { inline-size: 0.42em; block-size: 0.8em; margin-block-end: 0; }

  .is-style-force-cursor-mint::after  { background-color: var(--force-accent-secondary); box-shadow: var(--force-glow-accent-2); }

  /* core/button renders .wp-block-button__link inside the styled wrapper. */
  .is-style-force-secondary > .wp-block-button__link {
    background-color: var(--force-surface);
    color: var(--force-text);
    border: var(--force-border-width) solid rgb(255 255 255 / 0.22);
  }

  .is-style-force-secondary > .wp-block-button__link:hover {
    background-color: var(--force-surface-accent);
    border-color: var(--force-accent);
    color: var(--force-accent);
  }

  .is-style-force-ghost > .wp-block-button__link {
    background-color: transparent;
    color: var(--force-text);
    padding-inline: var(--force-space-2);
    border: var(--force-border-width) solid transparent;
  }

  .is-style-force-ghost > .wp-block-button__link:hover {
    color: var(--force-accent);
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 0.35em;
  }

  .is-style-force-card {
    padding: var(--force-space-6);
    background-color: var(--force-surface);
    border: var(--force-border);
    border-radius: var(--force-radius-sm);
    box-shadow: var(--force-shadow-inset);
  }

  .is-style-force-scrim { position: relative; }

  .is-style-force-scrim::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image: var(--force-gradient-scrim);
    pointer-events: none;
  }

  .is-style-force-glow > img { box-shadow: var(--force-glow-edge); border-radius: var(--force-radius-sm); }

  .is-style-force-rule {
    border: 0;
    block-size: 2px;
    inline-size: var(--force-space-11);
    max-inline-size: 40%;
    background: var(--force-gradient-rule);
    box-shadow: var(--force-glow-accent-soft);
  }

  /* The Light section group style reuses the inverse context from 01-tokens. */
  .is-style-force-inverse { padding: var(--force-space-8); border-radius: var(--force-radius-sm); }
}

/* Reduced motion for the bridged cursor styles. Outside @layer, as in 06. */
@media (prefers-reduced-motion: reduce) {
  .is-style-force-cursor::after,
  .is-style-force-cursor-block::after,
  .is-style-force-cursor-mint::after { animation: none; opacity: 1; }
}