/* assets/css/components/page-investors-landing.css
 * @layer components — Investors landing V4.1 (Navigation Portal)
 *
 * Pixel-perfect to Pencil frame eb7f4. Sections:
 *   .investors-landing__banner       slim dark teal gradient banner
 *   .investors-landing__intro        "Built on trust" + last-updated
 *   .investors-landing__dashboard    deck card + live stock card
 *   .investors-landing__section--s1  Recent filings = quarter matrix
 *   .investors-landing__section--s2  Governance — 5 compact tiles
 *   .investors-landing__section--s3  Disclosures — 4 compact tiles
 *   .invl-deck                       dark teal deck card (left of hero)
 *   .invl-tile                       compact bordered tile
 *   .invl-shareholder                dividend table + grievance card pair
 *   .invl-grievance                  solid teal grievance card
 *   .invl-ir                         IR contact strip (officer + pills)
 *
 * Tokens-only. Contextual gap tokens (--container-gap / --content-gap /
 * --grid-gap / --stack-gap / --card-gap / --cluster-gap). margin: 0 on
 * children; parent gap owns rhythm. margin-block-start: auto allowed
 * only to push elements to flex end.
 */

@layer components {

  /* ─────────────────────────────────────────────────────────────
     Shared icon
     ───────────────────────────────────────────────────────────── */
  .invl-icon {
    inline-size: var(--icon-inline-m);
    block-size: var(--icon-inline-m);
    flex-shrink: 0;
  }

  /* ─────────────────────────────────────────────────────────────
     Banner — uses canonical .page-banner component. No overrides.
     ───────────────────────────────────────────────────────────── */

  /* ─────────────────────────────────────────────────────────────
     Sticky tab nav (sits under the page banner)
     ───────────────────────────────────────────────────────────── */
  .invl-tabnav {
    position: sticky;
    inset-block-start: 0;
    z-index: 20;
    background-color: color-mix(in oklch, var(--white) 92%, transparent);
    backdrop-filter: saturate(180%) blur(12px);
    -webkit-backdrop-filter: saturate(180%) blur(12px);
    border-block-end: var(--line-thin) solid var(--border-subtle);
  }

  .invl-tabnav__list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    gap: var(--space-2xl);
    scrollbar-width: none;
  }

  .invl-tabnav__list::-webkit-scrollbar { display: none; }

  .invl-tabnav__item {
    margin: 0;
    flex-shrink: 0;
  }

  .invl-tabnav__link {
    position: relative;
    display: inline-flex;
    align-items: center;
    padding-block: var(--space-m);
    font-family: var(--font-body);
    font-size: var(--text-s);
    font-weight: var(--weight-medium);
    letter-spacing: var(--tracking-tight);
    color: var(--text-muted);
    text-decoration: none;
    transition:
      color var(--duration-fast) var(--ease-default);
    white-space: nowrap;
  }

  /* Animated underline — sits flush with the tabnav border-block-end. */
  .invl-tabnav__link::after {
    content: '';
    position: absolute;
    inset-inline: 0;
    inset-block-end: 0;
    block-size: var(--line-thick);
    background-color: var(--primary);
    transform: scaleX(0);
    transform-origin: center;
    transition: transform var(--duration-fast) var(--ease-default);
  }

  .invl-tabnav__link:hover {
    color: var(--text-main);
  }

  .invl-tabnav__link:hover::after {
    transform: scaleX(0.6);
    background-color: var(--secondary);
  }

  .invl-tabnav__link:focus-visible {
    outline: var(--focus-ring);
    outline-offset: var(--focus-ring-offset);
    border-radius: var(--radius-s);
  }

  .invl-tabnav__link.is-active {
    color: var(--text-main);
    font-weight: var(--weight-bold);
  }

  .invl-tabnav__link.is-active::after {
    transform: scaleX(1);
  }

  /* Hide on smaller screens — tab nav is desktop-only wayfinding */
  @media (max-width: 47.999em) {
    .invl-tabnav { display: none; }
  }

  /* ─────────────────────────────────────────────────────────────
     Intro — "Built on trust" + last-updated meta
     ───────────────────────────────────────────────────────────── */
  .investors-landing__intro {
    background-color: var(--white);
    padding-block: var(--section-space-l) var(--section-space-s);
  }

  .investors-landing__intro-inner {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--container-gap);
  }

  .investors-landing__intro-left {
    display: flex;
    flex-direction: column;
    gap: var(--space-m);
    max-inline-size: var(--text-width-l);
  }

  .investors-landing__intro-left > * {
    margin: 0;
  }

  .investors-landing__intro-heading {
    font-family: var(--font-heading);
    font-size: var(--heading-section);
    font-weight: var(--weight-bold);
    line-height: var(--leading-tight);
    letter-spacing: var(--tracking-tight);
    color: var(--text-main);
  }

  .investors-landing__intro-body {
    font-family: var(--font-body);
    font-size: var(--text-m);
    line-height: var(--leading-normal);
    color: var(--text-body);
  }

  .investors-landing__intro-right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: var(--space-2xs);
    text-align: end;
  }

  .investors-landing__intro-right > * {
    margin: 0;
  }

  .investors-landing__intro-meta-label {
    font-family: var(--font-body);
    font-size: var(--text-2xs);
    font-weight: var(--weight-semibold);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    color: var(--text-subtle);
  }

  .investors-landing__intro-meta-date {
    font-family: var(--font-body);
    font-size: var(--text-s);
    font-weight: var(--weight-semibold);
    color: var(--text-main);
  }

  .investors-landing__intro-meta-sub {
    font-family: var(--font-body);
    font-size: var(--text-xs);
    font-weight: var(--weight-medium);
    color: var(--text-subtle);
  }

  /* ─────────────────────────────────────────────────────────────
     Dashboard — deck card + stock card (2-up)
     ───────────────────────────────────────────────────────────── */
  .investors-landing__dashboard {
    background-color: var(--white);
    padding-block-end: var(--section-space-xl);
  }

  .investors-landing__dashboard-inner {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-l);
    align-items: stretch;
  }

  @media (min-width: 64em) {
    .investors-landing__dashboard-inner {
      grid-template-columns: minmax(0, 504fr) minmax(0, 756fr);
    }
  }

  /* Deck card */
  .invl-deck {
    display: flex;
    flex-direction: column;
    gap: var(--space-m);
    padding: var(--card-padding);
    background-color: var(--primary-ultra-dark);
    color: var(--text-on-dark);
    border-radius: var(--radius-l);
    min-block-size: 23.75rem;
  }

  .invl-deck > * {
    margin: 0;
  }

  .invl-deck__body {
    display: flex;
    flex-direction: column;
    gap: var(--space-m);
    flex-grow: 1;
  }

  .invl-deck__body > * {
    margin: 0;
  }

  .invl-deck__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2xs);
    font-family: var(--font-body);
    font-size: var(--text-2xs);
    font-weight: var(--weight-bold);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    color: var(--secondary);
  }

  .invl-deck__thumb {
    position: relative;
    aspect-ratio: 16 / 9;
    min-block-size: 10rem;
    background-color: var(--primary-dark);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    border: var(--line-thin) solid color-mix(in oklch, var(--text-on-dark) 14%, transparent);
    border-radius: var(--radius-s);
    overflow: hidden;
  }

  .invl-deck__thumb-meta {
    position: absolute;
    inset-block-start: var(--space-s);
    inset-inline-start: var(--space-s);
    display: inline-flex;
    align-items: center;
    gap: var(--space-2xs);
    padding-block: var(--space-3xs);
    padding-inline: var(--space-xs);
    font-family: var(--font-body);
    font-size: var(--text-2xs);
    font-weight: var(--weight-semibold);
    color: var(--text-on-dark);
    background-color: color-mix(in oklch, var(--black) 55%, transparent);
    border-radius: var(--radius-s);
    margin: 0;
  }

  .invl-deck__title {
    font-family: var(--font-heading);
    font-size: var(--heading-card);
    font-weight: var(--weight-bold);
    line-height: var(--leading-tight);
    letter-spacing: var(--tracking-tight);
    color: var(--text-on-dark);
  }

  .invl-deck__meta {
    font-family: var(--font-body);
    font-size: var(--text-xs);
    font-weight: var(--weight-medium);
    color: color-mix(in oklch, var(--text-on-dark) 80%, transparent);
  }

  .invl-deck__cta-row {
    display: flex;
    align-items: center;
    gap: var(--space-s);
    flex-wrap: wrap;
  }

  .invl-deck__cta {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2xs);
    padding-block: var(--space-xs);
    padding-inline: var(--space-m);
    background-color: var(--secondary);
    color: var(--text-on-dark);
    font-family: var(--font-body);
    font-size: var(--text-s);
    font-weight: var(--weight-semibold);
    border-radius: var(--radius-s);
    text-decoration: none;
    transition: background-color var(--duration-fast) var(--ease-default);
  }

  .invl-deck__cta:hover {
    background-color: var(--secondary-hover);
  }

  .invl-deck__archive {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2xs);
    font-family: var(--font-body);
    font-size: var(--text-s);
    font-weight: var(--weight-semibold);
    color: color-mix(in oklch, var(--text-on-dark) 85%, transparent);
    text-decoration: none;
    transition: color var(--duration-fast) var(--ease-default);
  }

  .invl-deck__archive:hover {
    color: var(--text-on-dark);
  }

  /* ─────────────────────────────────────────────────────────────
     Section heads (S1-S4 shared)
     ───────────────────────────────────────────────────────────── */
  .investors-landing__section {
    background-color: var(--white);
    padding-block: var(--section-space-l);
  }

  /* No surface differentiation for S2/S3/S4 — keep them on white,
     section-eyebrow + rule does the demarcation. */

  /* Hairline between sections to break the white-on-white rhythm. */
  .investors-landing__section + .investors-landing__section,
  .investors-landing__shareholder + .investors-landing__ir-strip {
    border-block-start: var(--line-thin) solid var(--border-subtle);
  }

  .investors-landing__section-head {
    display: flex;
    flex-direction: column;
    gap: var(--space-s);
    padding-block-end: var(--space-2xl);
    max-inline-size: var(--text-width-l);
  }

  .investors-landing__section-head > * {
    margin: 0;
  }

  .investors-landing__section-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: var(--space-s);
    font-family: var(--font-body);
    font-size: var(--text-2xs);
    font-weight: var(--weight-semibold);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    color: var(--text-subtle);
  }

  .investors-landing__section-rule {
    display: inline-block;
    inline-size: var(--space-l);
    block-size: var(--line-thick);
    background-color: var(--secondary);
  }

  .investors-landing__section-title {
    font-family: var(--font-heading);
    font-size: var(--heading-block);
    font-weight: var(--weight-bold);
    line-height: var(--leading-tight);
    letter-spacing: var(--tracking-tight);
    color: var(--text-main);
  }

  .investors-landing__section-subline {
    font-family: var(--font-body);
    font-size: var(--text-s);
    line-height: var(--leading-normal);
    color: var(--text-body);
    max-inline-size: var(--text-width-m);
  }

  /* ─────────────────────────────────────────────────────────────
     Tiles — compact bordered cards
     ───────────────────────────────────────────────────────────── */
  .invl-tiles {
    list-style: none;
    padding: 0;
    /* Pull the grid out by the tile's inner padding so the first/last
       tile's content edge still aligns with the section heading. The
       hover surface (which uses that inner padding) never extends past
       the section gutter. */
    margin-inline: calc(var(--space-m) * -1);
    display: grid;
    grid-template-columns: 1fr;
    column-gap: var(--grid-gap);
    /* Row gap is intentionally larger than column gap so multi-row
       tile sections breathe properly between rows. */
    row-gap: calc(var(--grid-gap) * 2);
    align-items: start;
  }

  @media (min-width: 40em) {
    .invl-tiles {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }

  @media (min-width: 64em) {
    /* Max 3 tiles per row across S2/S3. */
    .invl-tiles--s2,
    .invl-tiles--s3 {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
    /* Shareholder Services is a 2-up pair. */
    .invl-tiles--s4 {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }

  .invl-tile {
    margin: 0;
  }

  /* Borderless editorial tile: icon → title → description → "Open →" link.
     Hover gives a soft surface tint + lift + teal accent. Padding stays
     INSIDE the grid cell so the hover surface never bleeds into the
     column gap or onto adjacent tiles. */
  .invl-tile__link {
    display: flex;
    flex-direction: column;
    gap: var(--space-s);
    padding: var(--space-m);
    background: transparent;
    border: 0;
    color: var(--text-main);
    text-decoration: none;
    block-size: 100%;
    transition:
      background-color var(--duration-fast) var(--ease-default),
      transform        var(--duration-fast) var(--ease-default),
      color            var(--duration-fast) var(--ease-default),
      box-shadow       var(--duration-fast) var(--ease-default);
  }

  .invl-tile__link > * {
    margin: 0;
  }

  .invl-tile__link:hover,
  .invl-tile__link:focus-visible {
    background-color: var(--off-white);
    transform: translateY(-2px);
    color: var(--primary);
    box-shadow: 0 0.5rem 1.5rem -0.5rem color-mix(in oklch, var(--primary) 18%, transparent);
  }

  .invl-tile__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    inline-size: 2.5rem;
    block-size: 2.5rem;
    color: var(--primary);
    transition: color var(--duration-fast) var(--ease-default);
  }

  .invl-tile__icon svg {
    inline-size: 1.5rem;
    block-size: 1.5rem;
  }

  .invl-tile__title {
    font-family: var(--font-heading);
    font-size: var(--heading-card);
    font-weight: var(--weight-bold);
    line-height: var(--leading-tight);
    letter-spacing: var(--tracking-tight);
    color: var(--text-main);
    transition: color var(--duration-fast) var(--ease-default);
  }

  .invl-tile__link:hover .invl-tile__title {
    color: var(--primary);
  }

  .invl-tile__meta {
    font-family: var(--font-body);
    font-size: var(--text-s);
    font-weight: var(--weight-medium);
    line-height: var(--leading-normal);
    color: var(--text-muted);
    max-inline-size: 32ch;
  }

  .invl-tile__cta {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2xs);
    padding-block-start: var(--space-2xs);
    font-family: var(--font-body);
    font-size: var(--text-s);
    font-weight: var(--weight-bold);
    color: var(--primary);
  }

  .invl-tile__cta-arrow {
    inline-size: var(--icon-inline-s);
    block-size: var(--icon-inline-s);
    transition: transform var(--duration-fast) var(--ease-default);
  }

  .invl-tile__link:hover .invl-tile__cta-arrow {
    transform: translate(2px, -2px);
  }

  /* ─────────────────────────────────────────────────────────────
     Shareholder Services (Dividend + Grievance pair)
     ───────────────────────────────────────────────────────────── */
  .investors-landing__shareholder {
    background-color: var(--white);
    padding-block: var(--section-space-l);
    border-block-start: var(--line-thin) solid var(--border-subtle);
  }

  .invl-shareholder {
    display: grid;
    grid-template-columns: 1fr;
    gap: calc(var(--container-gap) * 1.5);
    align-items: start;
  }

  @media (min-width: 56em) {
    .invl-shareholder {
      grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
    }
  }

  /* Dividend block — borderless editorial */
  .invl-dividend {
    display: flex;
    flex-direction: column;
    gap: var(--space-m);
    padding: 0;
    background: transparent;
    border: 0;
  }

  .invl-dividend > * {
    margin: 0;
  }

  .invl-dividend__head {
    padding-block-end: var(--space-s);
    border-block-end: var(--line-thin) solid var(--border-subtle);
  }

  .invl-dividend__title {
    font-family: var(--font-heading);
    font-size: var(--heading-card);
    font-weight: var(--weight-bold);
    line-height: var(--leading-tight);
    letter-spacing: var(--tracking-tight);
    color: var(--text-main);
    margin: 0;
  }

  .invl-dividend__list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
  }

  .invl-dividend__row {
    border-block-end: var(--line-thin) solid var(--border-subtle);
  }

  .invl-dividend__row:last-child {
    border-block-end: 0;
  }

  .invl-dividend__link {
    display: grid;
    grid-template-columns: 5.5rem minmax(0, 1fr) auto;
    grid-template-areas: 'year kind date';
    align-items: baseline;
    column-gap: var(--space-l);
    row-gap: var(--space-3xs);
    padding-block: var(--space-s);
    text-decoration: none;
    color: var(--text-main);
    transition: color var(--duration-fast) var(--ease-default);
  }

  .invl-dividend__link:hover {
    color: var(--primary);
  }

  .invl-dividend__year {
    grid-area: year;
    font-family: var(--font-body);
    font-size: var(--text-s);
    font-weight: var(--weight-bold);
  }

  .invl-dividend__kind {
    grid-area: kind;
    font-family: var(--font-body);
    font-size: var(--text-s);
    line-height: var(--leading-normal);
    color: var(--text-body);
  }

  .invl-dividend__amount {
    /* Inline with kind — amount sits as part of the description */
    grid-area: kind;
    font-family: var(--font-body);
    font-size: var(--text-s);
    font-weight: var(--weight-bold);
    color: var(--text-main);
    justify-self: end;
    display: none; /* hidden by default — only shown when amount field is present (rare) */
  }

  .invl-dividend__amount:not(:empty) {
    display: block;
  }

  .invl-dividend__date {
    grid-area: date;
    font-family: var(--font-body);
    font-size: var(--text-s);
    color: var(--text-muted);
    justify-self: end;
    white-space: nowrap;
  }

  .invl-dividend__empty {
    padding-block: var(--space-m);
    font-family: var(--font-body);
    font-size: var(--text-s);
    color: var(--text-muted);
    margin: 0;
  }

  .invl-dividend__foot {
    padding-block-start: var(--space-s);
    border-block-start: var(--line-thin) solid var(--border-subtle);
  }

  .invl-dividend__view-all {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2xs);
    font-family: var(--font-body);
    font-size: var(--text-s);
    font-weight: var(--weight-bold);
    color: var(--primary);
    text-decoration: none;
  }

  .invl-dividend__view-all:hover {
    text-decoration: underline;
  }

  /* Grievance — borderless editorial (matches the dividend side). */
  .invl-grievance {
    display: flex;
    flex-direction: column;
    gap: var(--space-m);
    padding: 0;
    background: transparent;
    border: 0;
  }

  .invl-grievance > * {
    margin: 0;
  }

  .invl-grievance__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2xs);
    font-family: var(--font-body);
    font-size: var(--text-2xs);
    font-weight: var(--weight-bold);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    color: var(--secondary);
  }

  .invl-grievance__dot {
    display: inline-block;
    inline-size: 0.4rem;
    block-size: 0.4rem;
    border-radius: var(--radius-full);
    background-color: var(--secondary);
  }

  .invl-grievance__heading {
    font-family: var(--font-heading);
    font-size: var(--heading-card);
    font-weight: var(--weight-bold);
    line-height: var(--leading-tight);
    letter-spacing: var(--tracking-tight);
    color: var(--text-main);
  }

  .invl-grievance__desc {
    font-family: var(--font-body);
    font-size: var(--text-s);
    line-height: var(--leading-normal);
    color: var(--text-body);
  }

  .invl-grievance__stats {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-l);
    padding-block: var(--space-m);
    border-block: var(--line-thin) solid var(--border-subtle);
    margin: 0;
  }

  .invl-grievance__stat {
    display: flex;
    flex-direction: column;
    gap: var(--space-3xs);
    margin: 0;
  }

  .invl-grievance__stat-value {
    font-family: var(--font-heading);
    font-size: var(--heading-block);
    font-weight: var(--weight-bold);
    line-height: var(--leading-tight);
    letter-spacing: var(--tracking-tight);
    color: var(--primary);
  }

  .invl-grievance__stat-label {
    font-family: var(--font-body);
    font-size: var(--text-xs);
    font-weight: var(--weight-medium);
    color: var(--text-muted);
  }

  .invl-grievance__cta {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2xs);
    align-self: flex-start;
    padding-block: var(--space-2xs);
    font-family: var(--font-body);
    font-size: var(--text-s);
    font-weight: var(--weight-bold);
    color: var(--primary);
    text-decoration: none;
    transition: transform var(--duration-fast) var(--ease-default);
  }

  .invl-grievance__cta:hover {
    transform: translate(2px, -2px);
  }

  /* ─────────────────────────────────────────────────────────────
     IR contact strip — dark closer
     ───────────────────────────────────────────────────────────── */
  .investors-landing__ir-strip {
    background-color: var(--primary-ultra-dark);
    color: var(--text-on-dark);
    padding-block: var(--section-space-m);
  }

  .invl-ir {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--container-gap);
    align-items: center;
  }

  @media (min-width: 56em) {
    .invl-ir {
      grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
    }
  }

  .invl-ir__left {
    display: flex;
    flex-direction: column;
    gap: var(--space-s);
  }

  .invl-ir__left > * {
    margin: 0;
  }

  .invl-ir__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2xs);
    font-family: var(--font-body);
    font-size: var(--text-2xs);
    font-weight: var(--weight-bold);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    color: var(--secondary);
  }

  .invl-ir__rule {
    display: inline-block;
    inline-size: var(--space-l);
    block-size: var(--line-thick);
    background-color: var(--secondary);
  }

  .invl-ir__heading {
    font-family: var(--font-heading);
    font-size: var(--heading-block);
    font-weight: var(--weight-bold);
    line-height: var(--leading-tight);
    letter-spacing: var(--tracking-tight);
    color: var(--text-on-dark);
  }

  .invl-ir__subheading {
    font-family: var(--font-body);
    font-size: var(--text-s);
    line-height: var(--leading-normal);
    color: color-mix(in oklch, var(--text-on-dark) 80%, transparent);
    max-inline-size: var(--text-width-m);
  }

  .invl-ir__right {
    display: flex;
    flex-direction: column;
    gap: var(--space-2xs);
  }

  @media (min-width: 56em) {
    .invl-ir__right {
      align-items: flex-end;
    }
  }

  .invl-ir__right > * {
    margin: 0;
  }

  .invl-ir__officer-name {
    font-family: var(--font-body);
    font-size: var(--text-l);
    font-weight: var(--weight-bold);
    color: var(--text-on-dark);
  }

  .invl-ir__officer-role {
    font-family: var(--font-body);
    font-size: var(--text-s);
    font-weight: var(--weight-medium);
    color: color-mix(in oklch, var(--text-on-dark) 80%, transparent);
  }

  .invl-ir__ctas {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-s);
    padding-block-start: var(--space-s);
  }

  .invl-ir__cta {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2xs);
    padding-block: var(--space-xs);
    padding-inline: var(--space-l);
    font-family: var(--font-body);
    font-size: var(--text-s);
    font-weight: var(--weight-semibold);
    text-decoration: none;
    border-radius: var(--radius-full);
    transition:
      background-color var(--duration-fast) var(--ease-default),
      border-color     var(--duration-fast) var(--ease-default);
  }

  .invl-ir__cta--primary {
    background-color: var(--secondary);
    color: var(--text-on-dark);
  }

  .invl-ir__cta--primary:hover {
    background-color: var(--secondary-hover);
  }

  .invl-ir__cta--ghost {
    background-color: color-mix(in oklch, var(--text-on-dark) 8%, transparent);
    color: var(--text-on-dark);
    border: var(--line-thin) solid color-mix(in oklch, var(--text-on-dark) 20%, transparent);
  }

  .invl-ir__cta--ghost:hover {
    border-color: var(--text-on-dark);
  }

}