/**
 * company: cube one GmbH
 * name: regulatory-scope.css
 * author: Thomas Schäfer
 * created: 29.08.2026
 * change log: 29.08.2026 – Thomas Schäfer – Scope funnel (NIS-2/BSIG, KRITIS,
 *             no-case), duty strip, separate Grundschutz/ISO toolkit track and
 *             first-assessment blocks for the Regulatory Expertise Center.
 *             Abbreviation styling moved to the shared site component.
 *             30.08.2026 – Thomas Schäfer – Assessment grid carries a third
 *             question card, so the column floor drops to 240px and the cards
 *             stretch to equal height.
 *             30.08.2026 – Thomas Schäfer – Assessment cards spread evenly over
 *             the full content column (track floor capped to a third of the
 *             width, so no empty fourth track opens on wide viewports) and
 *             carry the site's orange cube-frame hover.
 *             30.08.2026 – Thomas Schäfer – Funnel section header splits into
 *             intro plus a self-assessment aside, so the band right of the
 *             lead carries the three recurring questions and the quick checks.
 *             04.09.2026 – Thomas Schäfer – Removed the superseded
 *             page-specific quick-check card styles.
 */

/* ── First assessment blocks inside the regulation cards ───────────────── */

/*
 * Three question cards per regulation, always filling the whole content column.
 * The track floor is the larger of 240px and an exact third of the available
 * width, so auto-fit can never open a fourth, empty track. On wide viewports
 * (>= 1600px, where the content column reaches its 1152px cap) a plain 240px
 * floor left a ~290px void between the third card and the sidebar.
 * Below the point where three 240px tracks fit, the floor falls back to 240px
 * and the track count drops on its own: three, then two, then one.
 */
.rx-assess {
  display: grid;
  grid-template-columns:
    repeat(auto-fit, minmax(min(100%, max(240px, (100% - 2rem) / 3)), 1fr));
  gap: 1rem;
  width: 100%;
  margin: 0.75rem 0 1.75rem;
  align-items: stretch;
}

.rx-assess-block {
  min-width: 0;
  padding: 1rem 1.25rem 1.1rem;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease,
    transform 0.2s ease;
}

/* The cards adopt the site's inverted orange cube-frame hover (ALCOA tiles,
   service cards): accent hairline, accent ring and a short lift. */
.rx-assess-block:focus-within {
  border-color: var(--accent);
  box-shadow:
    0 0 0 1px var(--accent),
    0 0 28px var(--accent-glow);
}

@media (hover: hover) and (pointer: fine) {
  .rx-assess-block:hover {
    border-color: var(--accent);
    box-shadow:
      0 0 0 1px var(--accent),
      0 0 28px var(--accent-glow);
    transform: translateY(-2px);
  }
}

/* Touch keeps the resting frame instead of a browser-emulated sticky hover.
   The :not() keeps a real focus inside the card visible, because a tap on a
   link matches the emulated :hover and this later rule would otherwise win. */
@media (hover: none), (pointer: coarse) {
  .rx-assess-block:hover:not(:focus-within) {
    border-color: var(--border);
    box-shadow: none;
    transform: none;
  }
}

.rx-assess-q {
  margin: 0 0 0.6rem;
  font-family: var(--font-display);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
}

.rx-assess-list {
  margin: 0;
  padding-left: 1.1rem;
}

.rx-assess-list li {
  margin-bottom: 0.45rem;
  font-size: 0.875rem;
  line-height: 1.65;
  color: var(--text-secondary);
}

.rx-assess-list li:last-child {
  margin-bottom: 0;
}

.rx-assess-list strong {
  color: var(--text-primary);
  font-weight: 600;
}

/* The step-after line is the practical payoff of each card, so it carries a
   quiet accent rule instead of another box. */
.rx-next {
  grid-column: 1 / -1;
  margin: 0;
  padding-left: 0.9rem;
  border-left: 2px solid var(--accent);
  font-size: 0.875rem;
  line-height: 1.65;
  color: var(--text-secondary);
}

.rx-next-label {
  display: block;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.rx-note {
  margin: 1.5rem 0 2rem;
  padding: 1rem 1.25rem;
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-left: 2px solid var(--accent);
  border-radius: var(--radius-md);
  font-size: 0.8125rem;
  line-height: 1.7;
  color: var(--text-secondary);
}

/* ── Scope funnel section ──────────────────────────────────────────────── */

.rx-section {
  position: relative;
  padding: clamp(2.5rem, 6vw, 4.5rem) 0;
  background: var(--bg-secondary);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  isolation: isolate;
  overflow: hidden;
}

/* One soft light source behind the funnel gives the planes something to sit
   in. Kept as a scrim so no photograph is needed. */
.rx-section::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(
      70% 55% at 30% 8%,
      rgba(249, 115, 22, 0.07) 0%,
      rgba(249, 115, 22, 0) 62%
    ),
    radial-gradient(
      90% 70% at 50% 120%,
      rgba(255, 255, 255, 0.035) 0%,
      rgba(255, 255, 255, 0) 70%
    );
  pointer-events: none;
}

.rx-header {
  max-width: 44rem;
  margin: 0 0 clamp(1.75rem, 4vw, 2.75rem);
  min-width: 0;
}

.rx-kicker {
  margin: 0 0 0.5rem;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
}

.rx-header h2 {
  margin: 0 0 0.75rem;
}

.rx-header p {
  margin: 0;
  color: var(--text-secondary);
}

.rx-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(1.5rem, 4vw, 2.5rem);
  align-items: start;
  min-width: 0;
}

@media (min-width: 1024px) {
  .rx-layout {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  }
}

.rx-funnel-col {
  min-width: 0;
}

.rx-stage-label {
  margin: 0 0 0.85rem;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
}

/*
 * Shared virtual trapezoid so the three planes read as one machined funnel.
 * Top width 100%, bottom width 62%, three equal bands with a 0.16 gap ratio:
 * inset(y) = 19 * (y / 3.32), stage k spans y0 = k * 1.16 to y0 + 1.
 * The horizontal padding is derived from the wider bottom inset, so the label
 * can never sit outside the clipped plane on a narrow column.
 */
.rx-funnel {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  min-width: 0;
}

.rx-stage {
  --rx-clip: polygon(
    var(--rx-inset-top) 0,
    calc(100% - var(--rx-inset-top)) 0,
    calc(100% - var(--rx-inset-bottom)) 100%,
    var(--rx-inset-bottom) 100%
  );
  --rx-edge: rgba(255, 255, 255, 0.2);
  --rx-fill:
    linear-gradient(
      158deg,
      rgba(255, 255, 255, 0.055) 0%,
      rgba(255, 255, 255, 0.012) 58%,
      rgba(255, 255, 255, 0) 100%
    ),
    #131313;
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  gap: clamp(0.85rem, 2.5vw, 1.5rem);
  width: 100%;
  min-height: 5.5rem;
  min-width: 0;
  padding: 1.1rem calc(var(--rx-inset-bottom) + 1.25rem);
  color: var(--text-primary);
  text-align: left;
  background: transparent;
  border: 0;
  cursor: pointer;
  opacity: 0;
  transform: translateY(10px);
  filter: drop-shadow(0 0 0 transparent);
  transition:
    opacity 0.35s ease,
    transform 0.25s ease,
    filter 0.2s ease;
}

/*
 * Fill and hairline live on ::before so the clip-path cannot cut the accent
 * glow that ::after and the filter add on the interactive states.
 */
.rx-stage::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background: var(--rx-fill);
  border: 1px solid var(--rx-edge);
  border-radius: var(--radius-md);
  clip-path: var(--rx-clip);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.4);
  pointer-events: none;
  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease,
    background 0.2s ease;
}

/* The single permanent accent: a short machined marker on the top edge. */
.rx-stage::after {
  content: "";
  position: absolute;
  top: 0;
  left: calc(var(--rx-inset-top) + 1.25rem);
  z-index: -1;
  width: 2.25rem;
  height: 2px;
  background: var(--accent);
  opacity: 0.35;
  transform-origin: left center;
  transform: scaleX(0.5);
  pointer-events: none;
  transition:
    opacity 0.2s ease,
    transform 0.25s ease;
}

.rx-section.is-reveal-ready .rx-stage,
.rx-section.is-static .rx-stage {
  opacity: 1;
  transform: none;
}

.rx-section.is-reveal-ready .rx-stage[data-stage="1"] { transition-delay: 0ms; }
.rx-section.is-reveal-ready .rx-stage[data-stage="2"] { transition-delay: 90ms; }
.rx-section.is-reveal-ready .rx-stage[data-stage="3"] { transition-delay: 180ms; }

.rx-stage[data-stage="1"] {
  --rx-inset-top: 0%;
  --rx-inset-bottom: 5.7%;
}

.rx-stage[data-stage="2"] {
  --rx-inset-top: 6.6%;
  --rx-inset-bottom: 12.4%;
}

.rx-stage[data-stage="3"] {
  --rx-inset-top: 13.3%;
  --rx-inset-bottom: 19%;
  /* The last plane is the one that falls out of scope, so the material says so:
     lower luminance and a dashed hairline instead of a solid edge. */
  --rx-edge: rgba(255, 255, 255, 0.14);
  --rx-fill:
    linear-gradient(
      158deg,
      rgba(255, 255, 255, 0.03) 0%,
      rgba(255, 255, 255, 0) 70%
    ),
    #0C0C0C;
}

.rx-stage[data-stage="3"]::before {
  border-style: dashed;
}

.rx-stage[data-stage="3"]::after {
  background: rgba(255, 255, 255, 0.4);
}

.rx-stage:is(:hover, :focus-visible, .is-active) {
  z-index: 2;
  filter:
    drop-shadow(0 0 1px var(--accent))
    drop-shadow(0 0 14px rgba(249, 115, 22, 0.4))
    drop-shadow(0 0 30px var(--accent-glow));
  outline: none;
}

.rx-stage:is(:hover, :focus-visible, .is-active)::before {
  border-color: var(--accent);
  border-style: solid;
  background:
    linear-gradient(
      158deg,
      rgba(249, 115, 22, 0.1) 0%,
      rgba(255, 255, 255, 0.015) 60%,
      rgba(255, 255, 255, 0) 100%
    ),
    #151515;
}

.rx-stage:is(:hover, :focus-visible, .is-active)::after {
  opacity: 1;
  transform: scaleX(1);
}

.rx-section.is-reveal-ready .rx-stage:is(:hover, :focus-visible, .is-active),
.rx-section.is-static .rx-stage:is(:hover, :focus-visible, .is-active) {
  transform: scale(0.987);
  transition-delay: 0ms;
}

.rx-stage:active::before {
  box-shadow: inset 0 2px 10px rgba(0, 0, 0, 0.55);
}

/* Stage number is the typographic anchor: quiet at rest, accent when active. */
.rx-stage-idx {
  flex-shrink: 0;
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 3.4vw, 2.125rem);
  font-weight: 300;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  letter-spacing: -0.02em;
  color: rgba(245, 245, 245, 0.3);
  transition: color 0.2s ease;
}

.rx-stage:is(:hover, :focus-visible, .is-active) .rx-stage-idx {
  color: var(--accent);
}

.rx-stage-body {
  min-width: 0;
}

.rx-stage-eyebrow {
  display: block;
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.rx-stage-title {
  display: block;
  margin-top: 0.2rem;
  font-family: var(--font-display);
  font-size: clamp(0.9375rem, 1.7vw, 1.125rem);
  font-weight: 600;
  line-height: 1.3;
  color: var(--text-primary);
  overflow-wrap: anywhere;
}

.rx-stage-meta {
  display: block;
  margin-top: 0.25rem;
  font-size: 0.75rem;
  line-height: 1.5;
  color: var(--text-secondary);
  overflow-wrap: anywhere;
}

.rx-hint {
  margin: 1rem 0 0;
  font-size: 0.8125rem;
  line-height: 1.6;
  color: var(--text-muted);
}

/* ── Detail panel ──────────────────────────────────────────────────────── */

.rx-panel {
  min-width: 0;
  padding: clamp(1.25rem, 3vw, 1.75rem);
  background: var(--bg-glass);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg);
  backdrop-filter: blur(6px);
}

.rx-panel-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem 1rem;
  padding-bottom: 0.85rem;
  margin-bottom: 1.25rem;
  border-bottom: 1px solid var(--border);
}

.rx-panel-kicker {
  margin: 0;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
}

.rx-panel-title {
  margin: 0.25rem 0 0;
  font-family: var(--font-display);
  font-size: clamp(1.0625rem, 2.2vw, 1.375rem);
  font-weight: 600;
}

.rx-panel-verdict {
  margin: 0;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-secondary);
}

.rx-detail[hidden] {
  display: none;
}

.rx-detail-lead {
  margin: 0 0 1.25rem;
  font-size: 0.9375rem;
  line-height: 1.7;
  color: var(--text-secondary);
}

.rx-detail h4 {
  margin: 1.25rem 0 0.5rem;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-primary);
}

.rx-detail h4:first-of-type {
  margin-top: 0;
}

.rx-detail ul {
  margin: 0;
  padding-left: 1.1rem;
}

.rx-detail li {
  margin-bottom: 0.4rem;
  font-size: 0.875rem;
  line-height: 1.65;
  color: var(--text-secondary);
}

/* ── Duty strip ────────────────────────────────────────────────────────── */

.rx-duty {
  margin-top: clamp(2rem, 5vw, 3rem);
  padding-top: clamp(1.5rem, 4vw, 2rem);
  border-top: 1px solid var(--border);
}

.rx-duty-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.5rem 1rem;
  margin-bottom: 1.25rem;
}

.rx-duty-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1rem, 2vw, 1.25rem);
  font-weight: 600;
}

.rx-duty-scope {
  margin: 0;
  font-size: 0.75rem;
  color: var(--text-muted);
}

.rx-duty-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
  gap: 1px;
  margin: 0;
  padding: 0;
  list-style: none;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.rx-duty-item {
  padding: 1.1rem 1.25rem;
  background: var(--bg-primary);
}

.rx-duty-item h4 {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  margin: 0 0 0.4rem;
  font-family: var(--font-display);
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--text-primary);
}

.rx-duty-item h4 span {
  font-size: 0.6875rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.08em;
  color: var(--accent);
}

.rx-duty-item p {
  margin: 0;
  font-size: 0.8125rem;
  line-height: 1.65;
  color: var(--text-secondary);
}

/* ── Toolkit track: method, not scope ──────────────────────────────────── */

.rx-toolkit {
  margin-top: clamp(2rem, 5vw, 3rem);
  padding: clamp(1.25rem, 3vw, 1.75rem);
  background: var(--bg-card);
  /* Rectangular and cool on purpose: the toolkit is not a funnel stage, so it
     does not borrow the funnel's geometry or its accent marker. */
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
}

.rx-toolkit-head {
  max-width: 46rem;
  margin-bottom: 1.25rem;
}

.rx-toolkit-kicker {
  margin: 0 0 0.4rem;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.rx-toolkit-title {
  margin: 0 0 0.6rem;
  font-family: var(--font-display);
  font-size: clamp(1rem, 2vw, 1.25rem);
  font-weight: 600;
}

.rx-toolkit-head p {
  margin: 0;
  font-size: 0.875rem;
  line-height: 1.7;
  color: var(--text-secondary);
}

.rx-toolkit-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
  gap: 1rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.rx-tool {
  padding: 1rem 1.25rem;
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}

.rx-tool h4 {
  margin: 0 0 0.4rem;
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--text-primary);
}

.rx-tool p {
  margin: 0;
  font-size: 0.8125rem;
  line-height: 1.65;
  color: var(--text-secondary);
}

/* ── Accessible duplicate of the funnel content ────────────────────────── */

.rx-fallback {
  margin-top: clamp(2rem, 5vw, 3rem);
  padding-top: clamp(1.5rem, 4vw, 2rem);
  border-top: 1px solid var(--border);
}

.rx-fallback summary {
  font-family: var(--font-display);
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--text-primary);
  cursor: pointer;
  min-height: 44px;
  display: flex;
  align-items: center;
}

.rx-fallback summary:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
}

.rx-fallback-list {
  margin: 0.75rem 0 0;
  padding-left: 1.2rem;
}

.rx-fallback-list li {
  margin-bottom: 0.6rem;
  font-size: 0.875rem;
  line-height: 1.65;
  color: var(--text-secondary);
}

.rx-fallback-list strong {
  color: var(--text-primary);
}

/* Without JavaScript every stage detail stays readable in the panel. */
html:not(.js) .rx-detail,
html:not(.js) .rx-detail[hidden] {
  display: block;
}

html:not(.js) .rx-detail + .rx-detail {
  padding-top: 1.25rem;
  margin-top: 1.25rem;
  border-top: 1px solid var(--border);
}

/* ── Mobile: the funnel stays a funnel, only the taper gets shallower ──── */

@media (max-width: 767px) {
  .rx-stage {
    min-height: 5rem;
    gap: 0.75rem;
    padding: 1rem calc(var(--rx-inset-bottom) + 0.85rem);
  }

  /* Narrower column, so the taper closes to 70 percent instead of 62: the
     metaphor survives without squeezing the label to two words per line. */
  .rx-stage[data-stage="1"] {
    --rx-inset-top: 0%;
    --rx-inset-bottom: 4.5%;
  }

  .rx-stage[data-stage="2"] {
    --rx-inset-top: 5.2%;
    --rx-inset-bottom: 9.8%;
  }

  .rx-stage[data-stage="3"] {
    --rx-inset-top: 10.5%;
    --rx-inset-bottom: 15%;
  }

  .rx-stage::after {
    left: calc(var(--rx-inset-top) + 0.85rem);
    width: 1.75rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .rx-assess-block,
  .rx-assess-block:hover {
    transition: none;
    transform: none;
  }

  .rx-stage,
  .rx-stage::before,
  .rx-stage::after,
  .rx-stage-idx {
    transition: none;
    opacity: 1;
    transform: none;
  }

  .rx-stage::after {
    opacity: 0.35;
    transform: scaleX(0.5);
  }

  .rx-stage:is(:hover, :focus-visible, .is-active)::after {
    opacity: 1;
    transform: scaleX(1);
  }

  .rx-section.is-reveal-ready .rx-stage:is(:hover, :focus-visible, .is-active),
  .rx-section.is-static .rx-stage:is(:hover, :focus-visible, .is-active) {
    transform: none;
  }
}

/* ── Funnel header split: intro left, self-assessment aside right ──────── */

/*
 * The intro paragraph is capped at 44rem, which left a wide empty band to its
 * right on desktop. From 1024px the header becomes a two-column split and that
 * band carries the three recurring questions plus the matching quick checks.
 * Below 1024px the aside stacks under the lead.
 */
.rx-header--split {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(1.25rem, 3vw, 2.5rem);
  align-items: start;
  max-width: none;
}

.rx-header-main {
  min-width: 0;
  max-width: 44rem;
}

@media (min-width: 1024px) {
  .rx-header--split {
    grid-template-columns: minmax(0, 1fr) minmax(15rem, 21rem);
  }

  /* The aside already limits the measure, so the 44rem cap would only reopen
     the void it is meant to close. */
  .rx-header-main {
    max-width: none;
  }
}

.rx-header-aside {
  min-width: 0;
  padding: 1.1rem 1.25rem 1.25rem;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease;
}

.rx-header-aside:focus-within {
  border-color: var(--accent);
  box-shadow:
    0 0 0 1px var(--accent),
    0 0 28px var(--accent-glow);
}

@media (hover: hover) and (pointer: fine) {
  .rx-header-aside:hover {
    border-color: var(--accent);
    box-shadow:
      0 0 0 1px var(--accent),
      0 0 28px var(--accent-glow);
  }
}

/* Touch keeps the resting frame instead of an emulated sticky hover. */
@media (hover: none), (pointer: coarse) {
  .rx-header-aside:hover:not(:focus-within) {
    border-color: var(--border);
    box-shadow: none;
  }
}

/* The aside sits inside .rx-header, whose generic p rule would otherwise win. */
.rx-header-aside .rx-aside-kicker {
  margin: 0 0 0.3rem;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
}

.rx-header-aside .rx-aside-title {
  margin: 0 0 0.85rem;
  font-size: 1rem;
  line-height: 1.35;
  color: var(--text-primary);
}

.rx-aside-list {
  margin: 0 0 1.1rem;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0.4rem;
}

.rx-aside-list li {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  font-size: 0.875rem;
  line-height: 1.55;
  color: var(--text-secondary);
}

.rx-aside-idx {
  flex-shrink: 0;
  font-family: var(--font-display);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--accent);
}

.rx-header-aside .rx-aside-note {
  margin: 0;
  padding-top: 0.85rem;
  border-top: 1px solid var(--border);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.rx-aside-links {
  display: grid;
}

.rx-aside-links a {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.4;
  color: var(--accent);
  text-decoration: none;
}

.rx-aside-links a:hover,
.rx-aside-links a:focus-visible {
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

@media (prefers-reduced-motion: reduce) {
  .rx-header-aside {
    transition: none;
  }
}