/*
 * HAB flagship signature modules
 * Page-scoped enhancement layer for Zo werkt het, Over HAB and Reclamevrij+.
 */

.page-how,
.page-about,
.page-rvp {
  --sig-navy: var(--navy-1000, var(--navy-950, #031125));
  --sig-navy-soft: var(--navy-950, var(--navy-900, #061a35));
  --sig-ink: var(--ink, #071c37);
  --sig-copy: var(--copy, var(--ink-soft, #4c6078));
  --sig-blue: var(--blue-600, var(--blue, #135fd6));
  --sig-blue-soft: var(--soft-blue, var(--blue-soft, #eaf2fc));
  --sig-gold: var(--gold-500, var(--gold, #ffbf1f));
  --sig-gold-soft: var(--gold-400, #ffd35b);
  --sig-paper: var(--soft, var(--paper, #f4f7fb));
  --sig-white: #fff;
  --sig-line: var(--line, rgba(7, 28, 55, .13));
  --sig-line-light: var(--line-light, rgba(255, 255, 255, .16));
  --sig-radius-sm: var(--radius-sm, .7rem);
  --sig-radius-md: var(--radius-md, 1.15rem);
  --sig-radius-lg: var(--radius-lg, 1.75rem);
  --sig-shadow-sm: var(--shadow-sm, 0 10px 28px rgba(6, 26, 53, .08));
  --sig-shadow-lg: var(--shadow-lg, 0 28px 80px rgba(3, 17, 37, .18));
  --sig-ease: var(--ease, cubic-bezier(.22, 1, .36, 1));
}

.page-how .btn,
.page-about .btn {
  display: inline-flex;
  min-height: 3.25rem;
  align-items: center;
  justify-content: center;
  padding: .78rem 1.25rem;
  border: 1px solid transparent;
  border-radius: .65rem;
  color: inherit;
  cursor: pointer;
  font-weight: 700;
  line-height: 1.25;
  text-align: center;
  text-decoration: none;
  transition: transform .18s var(--sig-ease), box-shadow .18s var(--sig-ease), background-color .18s ease, border-color .18s ease;
}

.page-how .btn:hover,
.page-about .btn:hover { transform: translateY(-2px); }

.page-how .btn-primary,
.page-about .btn-primary {
  color: var(--sig-ink);
  background: var(--sig-gold);
  border-color: var(--sig-gold);
  box-shadow: 0 12px 34px rgba(255, 191, 31, .18);
}

.page-how .btn-primary:hover,
.page-about .btn-primary:hover { background: var(--sig-gold-soft); border-color: var(--sig-gold-soft); }

.page-how .btn-ghost-light,
.page-about .btn-ghost-light {
  color: #fff;
  border-color: rgba(255, 255, 255, .34);
  background: rgba(255, 255, 255, .05);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08);
}

.page-how .btn-ghost-light:hover,
.page-about .btn-ghost-light:hover { border-color: rgba(255, 255, 255, .62); background: rgba(255, 255, 255, .11); }

.signature-heading {
  width: min(100%, 58rem);
  margin-bottom: clamp(2.5rem, 5vw, 4.75rem);
}

.signature-heading h2 { margin-bottom: 1.25rem; }
.signature-heading .lede,
.signature-heading .lead { margin-bottom: 0; }

.signature-panel[hidden] { display: none !important; }

.signature-panel:not([hidden]) {
  animation: signature-panel-in 360ms var(--sig-ease) both;
}

@keyframes signature-panel-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Motion lifecycle for the two hab-pro interior pages. */
.page-how.motion-ready .scroll-reveal,
.page-about.motion-ready .scroll-reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 560ms var(--sig-ease) var(--reveal-delay, 0ms), transform 620ms var(--sig-ease) var(--reveal-delay, 0ms);
}

.page-how.motion-ready .scroll-reveal[data-reveal="scale"],
.page-about.motion-ready .scroll-reveal[data-reveal="scale"] { transform: translateY(16px) scale(.985); }

.page-how.motion-ready .scroll-reveal.is-visible,
.page-about.motion-ready .scroll-reveal.is-visible { opacity: 1; transform: none; }

/* -------------------------------------------------------------------------- */
/* Zo werkt het — Uw adviesroute                                              */
/* -------------------------------------------------------------------------- */

.how-route-section {
  overflow: hidden;
  background:
    radial-gradient(circle at 82% 18%, rgba(19, 95, 214, .07), transparent 28rem),
    var(--sig-paper);
}

.how-route {
  display: grid;
  grid-template-columns: minmax(13rem, .48fr) minmax(0, 1.52fr);
  overflow: hidden;
  border: 1px solid var(--sig-line);
  border-radius: var(--sig-radius-lg);
  background: var(--sig-white);
  box-shadow: var(--sig-shadow-lg);
}

.how-route-rail {
  position: relative;
  display: grid;
  align-content: center;
  padding: 2rem 1.25rem;
  color: #fff;
  background:
    radial-gradient(circle at 15% 20%, rgba(36, 116, 234, .18), transparent 45%),
    var(--sig-navy);
}

.how-route-progress {
  position: absolute;
  top: 5.1rem;
  bottom: 5.1rem;
  left: 2.9rem;
  width: 1px;
  background: rgba(255, 255, 255, .16);
}

.how-route-progress::before {
  display: block;
  width: 1px;
  height: var(--signature-progress, 0%);
  background: var(--sig-gold);
  box-shadow: 0 0 18px rgba(255, 191, 31, .36);
  content: "";
  transition: height 360ms var(--sig-ease);
}

.how-route-tab {
  position: relative;
  z-index: 1;
  display: grid;
  min-height: 5.35rem;
  grid-template-columns: 2.25rem 1fr;
  align-items: center;
  gap: .8rem;
  padding: .75rem .8rem;
  color: rgba(255, 255, 255, .66);
  border: 0;
  border-radius: .8rem;
  background: transparent;
  cursor: pointer;
  text-align: left;
  transition: color 180ms ease, background-color 180ms ease, transform 180ms var(--sig-ease);
}

.how-route-tab::before {
  position: absolute;
  left: 1.18rem;
  width: .75rem;
  height: .75rem;
  border: 2px solid rgba(255, 255, 255, .45);
  border-radius: 50%;
  background: var(--sig-navy);
  box-shadow: 0 0 0 5px var(--sig-navy);
  content: "";
}

.how-route-tab span { padding-left: .1rem; color: rgba(255, 255, 255, .48); font-size: .66rem; font-weight: 800; letter-spacing: .08em; }
.how-route-tab strong { font-family: var(--display, var(--font-display)); font-size: 1rem; }
.how-route-tab:hover { color: #fff; background: rgba(255, 255, 255, .06); }
.how-route-tab[aria-selected="true"] { color: #fff; background: rgba(255, 255, 255, .09); transform: translateX(3px); }
.how-route-tab[aria-selected="true"]::before { border-color: var(--sig-gold); background: var(--sig-gold); box-shadow: 0 0 0 6px rgba(255, 191, 31, .12); }

.how-route-dossier { min-width: 0; background: #fff; }
.how-route-dossier__top {
  display: flex;
  min-height: 4.2rem;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1.5rem;
  color: #62758d;
  border-bottom: 1px solid var(--sig-line);
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.how-route-dossier__top > span:first-child { display: inline-flex; align-items: center; gap: .65rem; color: var(--sig-ink); }
.how-route-dossier__top i { width: .55rem; height: .55rem; border-radius: 50%; background: var(--sig-gold); box-shadow: 0 0 0 5px rgba(255, 191, 31, .13); }

.how-route-panel { min-height: 31rem; padding: clamp(2rem, 5vw, 4rem); }
.how-route-panel__kicker { margin-bottom: 2rem; color: var(--sig-blue); font-size: .7rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.how-route-fields { border-top: 1px solid var(--sig-line); }
.how-route-field {
  display: grid;
  grid-template-columns: 6.5rem minmax(0, 1fr);
  gap: 1.5rem;
  min-height: 7.2rem;
  align-items: center;
  padding: 1.2rem 0;
  border-bottom: 1px solid var(--sig-line);
}
.how-route-field > span { color: var(--sig-blue); font-size: .67rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.how-route-field h3 { margin: 0 0 .35rem; font-size: 1.15rem; }
.how-route-field p { margin: 0; color: var(--sig-copy); font-size: .9rem; }
.how-route-field--quiet > span { color: #7a8795; }
.how-route-field--quiet { background: linear-gradient(90deg, rgba(244, 247, 251, .72), transparent); }

.how-expect-strip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin-top: 1.5rem;
  overflow: hidden;
  border: 1px solid var(--sig-line);
  border-radius: var(--sig-radius-md);
  background: #fff;
  box-shadow: var(--sig-shadow-sm);
}
.how-expect-strip article { min-height: 9rem; padding: 1.5rem; }
.how-expect-strip article + article { border-left: 1px solid var(--sig-line); }
.how-expect-strip span { display: block; margin-bottom: .8rem; color: var(--sig-blue); font-size: .68rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.how-expect-strip p { margin: 0; color: var(--sig-ink); font-family: var(--display, var(--font-display)); font-weight: 600; line-height: 1.45; }

/* Zo werkt het — Gesprekspad */

.how-scenario-section {
  color: #fff;
  background:
    radial-gradient(circle at 84% 28%, rgba(36, 116, 234, .14), transparent 30rem),
    var(--sig-navy);
}
.how-scenario-section h2 { color: #fff; }
.how-scenario-section .lede { color: rgba(255, 255, 255, .7); }
.how-scenario-tabs {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: .5rem;
  margin-bottom: 1rem;
  padding: .45rem;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: var(--sig-radius-md);
  background: rgba(255, 255, 255, .035);
}
.how-scenario-tabs button {
  display: grid;
  min-height: 5.7rem;
  grid-template-columns: 2rem 1fr;
  align-items: center;
  gap: .65rem;
  padding: .9rem;
  color: rgba(255, 255, 255, .65);
  border: 1px solid transparent;
  border-radius: .75rem;
  background: transparent;
  cursor: pointer;
  font-weight: 700;
  line-height: 1.35;
  text-align: left;
}
.how-scenario-tabs button span { color: var(--sig-gold); font-size: .65rem; letter-spacing: .08em; }
.how-scenario-tabs button:hover { color: #fff; background: rgba(255, 255, 255, .05); }
.how-scenario-tabs button[aria-selected="true"] { color: var(--sig-ink); border-color: #fff; background: #fff; box-shadow: 0 14px 32px rgba(0, 0, 0, .18); }
.how-scenario-tabs button[aria-selected="true"] span { color: var(--sig-blue); }

.how-scenario-workspace { overflow: hidden; border: 1px solid rgba(255, 255, 255, .16); border-radius: var(--sig-radius-lg); background: rgba(255, 255, 255, .055); }
.how-scenario-workspace > header { display: flex; min-height: 4.25rem; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem 1.5rem; color: rgba(255, 255, 255, .56); border-bottom: 1px solid rgba(255, 255, 255, .12); font-size: .68rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.how-scenario-panel { min-height: 25rem; padding: clamp(2rem, 5vw, 4.5rem); }
.how-scenario-path { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.how-scenario-path::before { position: absolute; top: 1.05rem; right: 12%; left: 12%; height: 2px; background: linear-gradient(90deg, var(--sig-gold), rgba(255, 191, 31, .24)); content: ""; }
.how-scenario-path section { position: relative; padding: 3.4rem 1.25rem 1.5rem; border: 1px solid rgba(255, 255, 255, .13); border-radius: var(--sig-radius-md); background: rgba(3, 17, 37, .42); }
.how-scenario-path section > span { position: absolute; z-index: 1; top: .6rem; left: 1.1rem; display: grid; width: 2rem; height: 2rem; place-items: center; color: var(--sig-ink); border: 5px solid var(--sig-navy); border-radius: 50%; background: var(--sig-gold); font-size: .61rem; font-weight: 800; }
.how-scenario-path h3 { margin: 0 0 .8rem; color: #fff; }
.how-scenario-path p { margin: 0; color: rgba(255, 255, 255, .68); font-size: .9rem; }
.how-scenario-tabs button:focus-visible {
  outline: 2px solid #9bc4ff;
  outline-offset: -4px;
  box-shadow: none;
}
.how-scenario-tabs button[aria-selected="true"]:focus-visible {
  box-shadow: inset 0 0 0 2px rgba(19, 95, 214, .22);
}
.how-scenario-panel:focus-visible {
  outline: 2px solid rgba(155, 196, 255, .78);
  outline-offset: -3px;
  box-shadow: none;
}

.how-prepare-section { background: #fff; }
.how-prepare { display: grid; grid-template-columns: minmax(0, .82fr) minmax(25rem, 1.18fr); align-items: center; gap: clamp(3rem, 8vw, 8rem); }
.how-prepare h2 { margin-bottom: 1.25rem; }
.how-prepare ul { display: grid; grid-template-columns: repeat(2, 1fr); margin: 0; padding: 0; border-top: 1px solid var(--sig-line); list-style: none; }
.how-prepare li { position: relative; min-height: 6.2rem; padding: 2rem 1rem 1.5rem 2.4rem; border-bottom: 1px solid var(--sig-line); font-family: var(--display, var(--font-display)); font-weight: 600; }
.how-prepare li:nth-child(odd) { border-right: 1px solid var(--sig-line); }
.how-prepare li::before { position: absolute; top: 2.2rem; left: .45rem; width: .75rem; height: .75rem; border: 2px solid var(--sig-blue); border-radius: 50%; content: ""; box-shadow: 0 0 0 5px var(--sig-blue-soft); }
.how-cta-section { background: var(--sig-paper); }

/* -------------------------------------------------------------------------- */
/* Over HAB                                                                    */
/* -------------------------------------------------------------------------- */

.about-why-section { background: #fff; }
.about-why { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); align-items: center; gap: clamp(3rem, 8vw, 7rem); }
.about-why-media { position: relative; margin: 0; }
.about-why-media img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--sig-radius-lg); box-shadow: var(--sig-shadow-lg); }
.about-why-media::after { position: absolute; right: -1rem; bottom: -1rem; width: 38%; height: 42%; border-right: 2px solid var(--sig-gold); border-bottom: 2px solid var(--sig-gold); border-radius: 0 0 1.5rem 0; content: ""; pointer-events: none; }
.about-why-media figcaption { position: absolute; right: -1.25rem; bottom: 1.75rem; padding: 1rem 1.25rem; color: #fff; border-radius: .75rem; background: var(--sig-navy); font-family: var(--display, var(--font-display)); font-weight: 600; line-height: 1.35; box-shadow: var(--sig-shadow-sm); }
.about-why h2 { margin-bottom: 1.5rem; }
.about-why p { color: var(--sig-copy); }
.about-pull { margin-top: 2rem; padding-top: 1.25rem; color: var(--sig-ink) !important; border-top: 1px solid var(--sig-line); font-family: var(--display, var(--font-display)); font-size: 1.15rem; font-weight: 600; }

.about-compass-section {
  overflow: hidden;
  background:
    linear-gradient(rgba(19, 95, 214, .025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(19, 95, 214, .025) 1px, transparent 1px),
    var(--sig-paper);
  background-size: 3rem 3rem;
}
.about-compass { display: grid; grid-template-columns: minmax(30rem, 1.05fr) minmax(24rem, .95fr); align-items: stretch; gap: clamp(2rem, 5vw, 4.5rem); }
.about-compass-map { position: relative; min-height: 37rem; border: 1px solid var(--sig-line); border-radius: var(--sig-radius-lg); background: radial-gradient(circle at center, rgba(19, 95, 214, .08), transparent 31%), rgba(255, 255, 255, .76); box-shadow: var(--sig-shadow-sm); }
.about-compass-map::before { position: absolute; top: 50%; left: 50%; width: 18rem; height: 18rem; border: 1px solid rgba(19, 95, 214, .14); border-radius: 50%; content: ""; transform: translate(-50%, -50%); }
.about-compass-axis { position: absolute; top: 50%; left: 50%; background: linear-gradient(90deg, transparent, rgba(19, 95, 214, .22), transparent); }
.about-compass-axis--horizontal { width: 78%; height: 1px; transform: translate(-50%, -50%); }
.about-compass-axis--vertical { width: 1px; height: 78%; background: linear-gradient(180deg, transparent, rgba(19, 95, 214, .22), transparent); transform: translate(-50%, -50%); }
.about-compass-center { position: absolute; z-index: 1; top: 50%; left: 50%; display: grid; width: 8.7rem; height: 8.7rem; place-content: center; color: #fff; border: .65rem solid rgba(255, 255, 255, .92); border-radius: 50%; background: var(--sig-navy); box-shadow: 0 18px 48px rgba(3, 17, 37, .2); text-align: center; text-transform: uppercase; transform: translate(-50%, -50%); }
.about-compass-center span { color: rgba(255, 255, 255, .56); font-size: .57rem; font-weight: 800; letter-spacing: .12em; }
.about-compass-center strong { color: var(--sig-gold); font-family: var(--display, var(--font-display)); font-size: 1.15rem; letter-spacing: .03em; }
.about-compass-tab { position: absolute; z-index: 2; display: grid; width: 12rem; min-height: 6.4rem; grid-template-columns: 2rem 1fr; align-content: center; gap: .1rem .7rem; padding: .85rem 1rem; color: var(--sig-ink); border: 1px solid var(--sig-line); border-radius: .85rem; background: rgba(255, 255, 255, .96); box-shadow: var(--sig-shadow-sm); cursor: pointer; text-align: left; transition: transform 200ms var(--sig-ease), border-color 180ms ease, box-shadow 180ms ease; }
.about-compass-tab span { grid-row: 1 / 3; color: var(--sig-blue); font-size: .66rem; font-weight: 800; }
.about-compass-tab strong { text-transform: uppercase; }
.about-compass-tab small { color: var(--sig-copy); line-height: 1.35; }
.about-compass-tab:hover { transform: translateY(-2px); border-color: rgba(19, 95, 214, .3); }
.about-compass-tab[aria-selected="true"] { border-color: var(--sig-gold); box-shadow: 0 16px 38px rgba(3, 17, 37, .13), inset 4px 0 0 var(--sig-gold); }
.about-compass-tab--north { top: 2.25rem; left: 50%; transform: translateX(-50%); }
.about-compass-tab--north:hover { transform: translate(-50%, -2px); }
.about-compass-tab--east { top: 50%; right: 2.25rem; transform: translateY(-50%); }
.about-compass-tab--east:hover { transform: translateY(calc(-50% - 2px)); }
.about-compass-tab--south { bottom: 2.25rem; left: 50%; transform: translateX(-50%); }
.about-compass-tab--south:hover { transform: translate(-50%, -2px); }
.about-compass-tab--west { top: 50%; left: 2.25rem; transform: translateY(-50%); }
.about-compass-tab--west:hover { transform: translateY(calc(-50% - 2px)); }

.about-compass-detail { overflow: hidden; color: #fff; border-radius: var(--sig-radius-lg); background: var(--sig-navy); box-shadow: var(--sig-shadow-lg); }
.about-compass-detail > header { display: flex; min-height: 4.2rem; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem 1.4rem; color: rgba(255, 255, 255, .5); border-bottom: 1px solid rgba(255, 255, 255, .13); font-size: .65rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.about-compass-panel { min-height: 32.8rem; padding: clamp(2rem, 4vw, 3rem); }
.about-compass-panel__title { margin-bottom: 2rem; color: var(--sig-gold); font-family: var(--display, var(--font-display)); font-size: 1.25rem; font-weight: 600; }
.about-compass-panel dl { margin: 0; }
.about-compass-panel dl div { padding: 1.35rem 0; border-top: 1px solid rgba(255, 255, 255, .13); }
.about-compass-panel dt { margin-bottom: .45rem; color: rgba(255, 255, 255, .52); font-size: .65rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.about-compass-panel dd { margin: 0; color: rgba(255, 255, 255, .85); line-height: 1.55; }

.about-standard-section { color: #fff; background: radial-gradient(circle at 18% 30%, rgba(36, 116, 234, .13), transparent 28rem), var(--sig-navy); }
.about-standard-section h2 { color: #fff; }
.about-standard-section .lede { color: rgba(255, 255, 255, .68); }
.about-standard-track { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: .75rem; margin-bottom: 1rem; }
.about-standard-line { position: absolute; z-index: 0; top: 1.7rem; right: 10%; left: 10%; height: 2px; background: rgba(255, 255, 255, .15); }
.about-standard-line::before { display: block; width: var(--signature-progress, 0%); height: 100%; background: var(--sig-gold); content: ""; transition: width 360ms var(--sig-ease); }
.about-standard-track button { position: relative; z-index: 1; display: grid; min-height: 8.7rem; justify-items: start; align-content: start; gap: .85rem; padding: .8rem; color: rgba(255, 255, 255, .62); border: 1px solid transparent; border-radius: .8rem; background: transparent; cursor: pointer; text-align: left; }
.about-standard-track button span { display: grid; width: 2rem; height: 2rem; place-items: center; color: var(--sig-ink); border: 5px solid var(--sig-navy); border-radius: 50%; background: rgba(255, 255, 255, .72); font-size: .61rem; font-weight: 800; box-sizing: content-box; }
.about-standard-track button strong { max-width: 11rem; line-height: 1.35; }
.about-standard-track button:hover { color: #fff; background: rgba(255, 255, 255, .04); }
.about-standard-track button[aria-selected="true"] { color: #fff; border-color: rgba(255, 255, 255, .13); background: rgba(255, 255, 255, .06); }
.about-standard-track button[aria-selected="true"] span { background: var(--sig-gold); box-shadow: 0 0 0 6px rgba(255, 191, 31, .12); }
.about-standard-workspace { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(17rem, .75fr); overflow: hidden; color: var(--sig-ink); border-radius: var(--sig-radius-lg); background: #fff; box-shadow: var(--sig-shadow-lg); }
.about-standard-panels { min-width: 0; }
.about-standard-panels .signature-panel { min-height: 22rem; padding: clamp(2rem, 5vw, 4rem); }
.about-standard-index { display: block; margin-bottom: 2rem; color: var(--sig-blue); font-size: .68rem; font-weight: 800; letter-spacing: .1em; }
.about-standard-panels h3 { margin: 0 0 1rem; font-size: clamp(1.8rem, 3vw, 2.6rem); }
.about-standard-panels p { margin-bottom: 2rem; color: var(--sig-copy); font-size: 1.05rem; }
.about-standard-panels strong { display: block; padding-top: 1.25rem; border-top: 1px solid var(--sig-line); color: var(--sig-ink); }
.about-standard-outcomes { padding: clamp(2rem, 4vw, 3rem); border-left: 1px solid var(--sig-line); background: var(--sig-paper); }
.about-standard-outcomes > span { color: var(--sig-blue); font-size: .66rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.about-standard-outcomes ul { display: grid; gap: 0; margin: 2rem 0 0; padding: 0; border-top: 1px solid var(--sig-line); list-style: none; }
.about-standard-outcomes li { position: relative; padding: 1.1rem 0 1.1rem 1.5rem; border-bottom: 1px solid var(--sig-line); font-family: var(--display, var(--font-display)); font-weight: 600; }
.about-standard-outcomes li::before { position: absolute; top: 50%; left: 0; width: .6rem; height: .6rem; border: 2px solid var(--sig-blue); border-radius: 50%; content: ""; transform: translateY(-50%); }

.about-trust-section { background: var(--sig-paper); }
.about-trust { display: grid; grid-template-columns: minmax(0, .72fr) minmax(20rem, .72fr) minmax(15rem, .56fr); gap: clamp(2rem, 5vw, 4rem); padding: clamp(2rem, 5vw, 4rem); border: 1px solid var(--sig-line); border-radius: var(--sig-radius-lg); background: #fff; box-shadow: var(--sig-shadow-sm); }
.about-trust h2 { margin-bottom: 1rem; font-size: clamp(2rem, 3.3vw, 3rem); }
.about-trust dl { margin: 0; border-top: 1px solid var(--sig-line); }
.about-trust dl div { display: grid; grid-template-columns: 7rem 1fr; gap: 1rem; padding: .9rem 0; border-bottom: 1px solid var(--sig-line); }
.about-trust dt { color: var(--sig-copy); font-size: .72rem; font-weight: 800; text-transform: uppercase; }
.about-trust dd { margin: 0; font-weight: 600; }
.about-trust nav { display: grid; align-content: start; border-top: 1px solid var(--sig-line); }
.about-trust nav a { display: flex; min-height: 3.25rem; align-items: center; justify-content: space-between; color: var(--sig-blue); border-bottom: 1px solid var(--sig-line); font-weight: 700; text-decoration: none; }
.about-trust nav a::after { content: "→"; }
.about-cta-section { background: #fff; }

/* -------------------------------------------------------------------------- */
/* Reclamevrij+ — De Ruisradar                                                */
/* -------------------------------------------------------------------------- */

.rvp-noise-section {
  overflow: hidden;
  color: #fff;
  background:
    radial-gradient(circle at 15% 20%, rgba(36, 116, 234, .16), transparent 30rem),
    var(--sig-navy);
}
.rvp-noise-section h2 { color: #fff; }
.rvp-noise-section .lead { color: rgba(255, 255, 255, .68); }
.rvp-noise-section .eyebrow { color: var(--sig-gold-soft); }
.rvp-noise { border: 1px solid rgba(255, 255, 255, .14); border-radius: var(--sig-radius-lg); background: rgba(255, 255, 255, .04); box-shadow: 0 28px 70px rgba(0, 0, 0, .2); }
.rvp-noise-devices { display: grid; grid-template-columns: repeat(3, 1fr); padding: .55rem; border-bottom: 1px solid rgba(255, 255, 255, .12); }
.rvp-noise-devices button { display: flex; min-height: 4.5rem; align-items: center; justify-content: center; gap: .75rem; color: rgba(255, 255, 255, .64); border: 0; border-radius: .75rem; background: transparent; cursor: pointer; font-weight: 750; }
.rvp-noise-devices button + button { border-left: 1px solid rgba(255, 255, 255, .1); }
.rvp-noise-devices button span { color: var(--sig-gold); font-size: .63rem; letter-spacing: .08em; }
.rvp-noise-devices button:hover { color: #fff; background: rgba(255, 255, 255, .045); }
.rvp-noise-devices button[aria-pressed="true"] { color: var(--sig-ink); background: #fff; box-shadow: 0 12px 28px rgba(0, 0, 0, .16); }
.rvp-noise-devices button[aria-pressed="true"] span { color: var(--sig-blue); }
.rvp-noise-workspace { display: grid; grid-template-columns: minmax(28rem, .95fr) minmax(0, 1.05fr); min-height: 39rem; }
.rvp-noise-visual { position: relative; display: grid; min-width: 0; place-items: center; padding: 5rem 3rem 3rem; border-right: 1px solid rgba(255, 255, 255, .12); }
.rvp-noise-visual > header { position: absolute; top: 1.35rem; right: 1.5rem; left: 1.5rem; display: flex; justify-content: space-between; gap: 1rem; color: rgba(255, 255, 255, .44); font-size: .63rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.rvp-noise-visual > header strong { color: rgba(255, 255, 255, .72); font-weight: 700; text-align: right; }
.rvp-device-outline { position: relative; width: 21rem; height: 29rem; border: 2px solid rgba(255, 255, 255, .28); border-radius: 2.5rem; background: linear-gradient(145deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, .018)); box-shadow: inset 0 0 0 .65rem rgba(255, 255, 255, .025), 0 28px 60px rgba(0, 0, 0, .18); transition: width 280ms var(--sig-ease), height 280ms var(--sig-ease), border-radius 280ms var(--sig-ease); }
.rvp-device-outline[data-device="laptop"] { width: 28rem; height: 20rem; border-radius: 1.25rem; }
.rvp-device-outline[data-device="tablet"] { width: 24rem; height: 27rem; border-radius: 1.5rem; }
.rvp-device-speaker { position: absolute; top: .8rem; left: 50%; width: 3.6rem; height: .28rem; border-radius: 999px; background: rgba(255, 255, 255, .25); transform: translateX(-50%); }
.rvp-device-outline[data-device="laptop"] .rvp-device-speaker { top: auto; bottom: -1.1rem; width: 31rem; height: .9rem; border-radius: 0 0 1rem 1rem; }
.rvp-device-screen { position: absolute; inset: 2.1rem 1.15rem 1.4rem; overflow: hidden; border: 1px solid rgba(36, 116, 234, .24); border-radius: 1.65rem; background: linear-gradient(rgba(36, 116, 234, .07) 1px, transparent 1px), linear-gradient(90deg, rgba(36, 116, 234, .07) 1px, transparent 1px), rgba(3, 17, 37, .5); background-size: 2.1rem 2.1rem; }
.rvp-device-outline[data-device="laptop"] .rvp-device-screen { inset: 1.2rem; border-radius: .7rem; }
.rvp-device-outline[data-device="tablet"] .rvp-device-screen { inset: 1.55rem 1.25rem; border-radius: .8rem; }
.rvp-device-screen::after { position: absolute; top: 50%; left: 50%; width: 8rem; height: 8rem; border: 1px solid rgba(255, 191, 31, .24); border-radius: 50%; content: ""; box-shadow: 0 0 0 2.8rem rgba(255, 191, 31, .035), 0 0 0 5.6rem rgba(255, 191, 31, .02); transform: translate(-50%, -50%); }
.rvp-device-screen i { position: absolute; z-index: 1; width: .55rem; height: .55rem; border-radius: 50%; background: var(--sig-gold); box-shadow: 0 0 0 5px rgba(255, 191, 31, .1); }
.rvp-device-screen i:nth-child(1) { top: 22%; left: 28%; }
.rvp-device-screen i:nth-child(2) { top: 53%; right: 22%; }
.rvp-device-screen i:nth-child(3) { bottom: 17%; left: 42%; }
.rvp-noise-hotspot { position: absolute; z-index: 3; display: grid; min-height: 4.4rem; grid-template-columns: 2rem 1fr; align-items: center; gap: .6rem; padding: .65rem .8rem; color: rgba(255, 255, 255, .78); border: 1px solid rgba(255, 255, 255, .18); border-radius: .75rem; background: rgba(3, 17, 37, .92); box-shadow: 0 12px 28px rgba(0, 0, 0, .24); cursor: pointer; text-align: left; white-space: nowrap; }
.rvp-noise-hotspot span { display: grid; width: 1.7rem; height: 1.7rem; place-items: center; color: var(--sig-ink); border-radius: 50%; background: var(--sig-gold); font-size: .58rem; font-weight: 800; }
.rvp-noise-hotspot strong { font-size: .72rem; letter-spacing: .03em; text-transform: uppercase; }
.rvp-noise-hotspot:hover { color: #fff; border-color: rgba(255, 255, 255, .36); }
.rvp-noise-hotspot[aria-selected="true"] { color: #fff; border-color: var(--sig-gold); box-shadow: 0 12px 28px rgba(0, 0, 0, .24), 0 0 0 4px rgba(255, 191, 31, .09); }
.rvp-noise-hotspot--windows { top: 4.5rem; left: -4.8rem; }
.rvp-noise-hotspot--waiting { top: 46%; right: -6.3rem; }
.rvp-noise-hotspot--background { bottom: 4rem; left: -5.7rem; }
.rvp-noise-detail { min-width: 0; overflow: hidden; color: var(--sig-ink); background: #fff; }
.rvp-noise-detail > header { display: flex; min-height: 4.2rem; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem 1.5rem; color: #708197; border-bottom: 1px solid var(--sig-line); font-size: .65rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.rvp-noise-detail .signature-panel { min-height: 34.7rem; padding: clamp(2rem, 4vw, 3.5rem); }
.rvp-noise-panel-title { margin-bottom: 2rem; color: var(--sig-blue); font-family: var(--font-display, var(--display)); font-size: clamp(1.55rem, 2.4vw, 2.1rem); font-weight: 700; }
.rvp-noise-detail dl { margin: 0; }
.rvp-noise-detail dl div { padding: 1.35rem 0; border-top: 1px solid var(--sig-line); }
.rvp-noise-detail dt { margin-bottom: .45rem; color: #718199; font-size: .66rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.rvp-noise-detail dd { margin: 0; color: var(--sig-ink); line-height: 1.55; }

/* -------------------------------------------------------------------------- */
/* Reclamevrij+ — De Rustlijn                                                  */
/* -------------------------------------------------------------------------- */

.rvp-rustline-section {
  overflow: hidden;
  background:
    radial-gradient(circle at 86% 18%, rgba(36, 116, 234, .08), transparent 27rem),
    var(--sig-paper);
}
.rvp-rustline-section .eyebrow { color: var(--sig-blue); }
.rvp-rustline-section .lead { max-width: 46rem; color: var(--sig-copy); }
.rvp-rustline {
  display: grid;
  grid-template-columns: minmax(16rem, .38fr) minmax(0, 1.62fr);
  overflow: hidden;
  border: 1px solid var(--sig-line);
  border-radius: var(--sig-radius-lg);
  background: #fff;
  box-shadow: var(--sig-shadow-lg);
}
.rvp-rustline-control {
  display: flex;
  min-width: 0;
  padding: clamp(1.6rem, 3vw, 2.5rem);
  border-right: 1px solid var(--sig-line);
  flex-direction: column;
}
.rvp-rustline-control > p:first-child {
  margin: 0 0 1.2rem;
  color: #718199;
  font-size: .66rem;
  font-weight: 800;
  letter-spacing: .09em;
  text-transform: uppercase;
}
.rvp-rustline-options { display: grid; gap: .65rem; }
.rvp-rustline-options button {
  display: grid;
  min-height: 4.5rem;
  grid-template-columns: 2.15rem 1fr;
  align-items: center;
  gap: .8rem;
  padding: .75rem 1rem;
  color: var(--sig-copy);
  border: 1px solid var(--sig-line);
  border-radius: .8rem;
  background: #fff;
  cursor: pointer;
  text-align: left;
  transition: color 180ms ease, border-color 180ms ease, background-color 180ms ease, transform 180ms var(--sig-ease), box-shadow 180ms ease;
}
.rvp-rustline-options button:hover { color: var(--sig-ink); border-color: rgba(36, 116, 234, .34); transform: translateX(3px); }
.rvp-rustline-options button[aria-pressed="true"] {
  color: var(--sig-ink);
  border-color: rgba(36, 116, 234, .28);
  background: var(--sig-blue-soft);
  box-shadow: inset 3px 0 0 var(--sig-blue), 0 8px 20px rgba(7, 28, 55, .06);
}
.rvp-rustline-options button span {
  display: grid;
  width: 2rem;
  height: 2rem;
  place-items: center;
  color: var(--sig-blue);
  border: 1px solid rgba(36, 116, 234, .22);
  border-radius: 50%;
  background: #fff;
  font-size: .6rem;
  font-weight: 800;
}
.rvp-rustline-options button[aria-pressed="true"] span { color: var(--sig-ink); border-color: transparent; background: var(--sig-gold); }
.rvp-rustline-options button strong { font-family: var(--font-display, var(--display)); font-size: .93rem; }
.rvp-rustline-note { margin: auto 0 0; padding-top: 2rem; color: var(--sig-copy); font-size: .85rem; line-height: 1.6; }
.rvp-rustline-console {
  min-width: 0;
  color: #fff;
  background:
    radial-gradient(circle at 88% 20%, rgba(36, 116, 234, .2), transparent 22rem),
    linear-gradient(145deg, rgba(255, 255, 255, .035), transparent 52%),
    var(--sig-navy);
}
.rvp-rustline-console > header {
  display: flex;
  min-height: 4.4rem;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem clamp(1.25rem, 3vw, 2rem);
  color: rgba(255, 255, 255, .48);
  border-bottom: 1px solid rgba(255, 255, 255, .12);
  font-size: .65rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.rvp-rustline-console > header strong { color: var(--sig-gold-soft); font-weight: 800; }
.rvp-rustline-routes { display: grid; gap: 1rem; padding: clamp(1.25rem, 3vw, 2rem); }
.rvp-rustline-route {
  padding: clamp(1.2rem, 2.5vw, 1.7rem);
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 1rem;
  background: rgba(255, 255, 255, .045);
}
.rvp-rustline-route > div { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.rvp-rustline-route > div span { font-family: var(--font-display, var(--display)); font-size: 1rem; font-weight: 700; }
.rvp-rustline-route > div small { color: rgba(255, 255, 255, .46); font-size: .66rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.rvp-rustline-route ol {
  position: relative;
  display: grid;
  gap: .75rem;
  margin: 1.4rem 0 0;
  padding: 2rem 0 0;
  list-style: none;
}
.rvp-rustline-route--busy ol { grid-template-columns: repeat(4, 1fr); }
.rvp-rustline-route--calm ol { grid-template-columns: repeat(2, 1fr); }
.rvp-rustline-route ol::before {
  position: absolute;
  top: .55rem;
  right: 6%;
  left: 6%;
  height: 2px;
  background: rgba(255, 255, 255, .17);
  content: "";
}
.rvp-rustline-route--calm ol::before { background: linear-gradient(90deg, var(--sig-blue), var(--sig-gold)); }
.rvp-rustline-route ol::after {
  position: absolute;
  top: .32rem;
  left: 6%;
  width: .48rem;
  height: .48rem;
  border-radius: 50%;
  background: var(--sig-gold);
  box-shadow: 0 0 0 .35rem rgba(255, 191, 31, .09), 0 0 1rem rgba(255, 191, 31, .45);
  content: "";
  opacity: 0;
}
.rvp-rustline-route--busy ol.is-cycle-running::after { animation: rvp-rustline-busy var(--rvp-rustline-busy-duration, 9s) linear 1 both; }
.rvp-rustline-route--calm ol.is-cycle-running::after { animation: rvp-rustline-calm 3.2s linear 1 both; }
.rvp-rustline-route li {
  position: relative;
  min-width: 0;
  padding: .85rem .65rem;
  color: rgba(255, 255, 255, .72);
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: .65rem;
  background: rgba(255, 255, 255, .035);
  font-size: clamp(.7rem, 1vw, .82rem);
  font-weight: 700;
  line-height: 1.35;
  text-align: center;
}
.rvp-rustline-route li::before {
  position: absolute;
  top: -1.8rem;
  left: 50%;
  width: .72rem;
  height: .72rem;
  border: 2px solid var(--sig-navy);
  border-radius: 50%;
  background: rgba(255, 255, 255, .6);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .24);
  content: "";
  transform: translateX(-50%);
}
.rvp-rustline-route li.is-interruption { color: #fff; border-color: rgba(255, 191, 31, .32); background: rgba(255, 191, 31, .09); }
.rvp-rustline-route li.is-interruption::before { background: var(--sig-gold); box-shadow: 0 0 0 5px rgba(255, 191, 31, .1); }
.rvp-rustline-route--busy ol.is-cycle-running li { animation-duration: var(--rvp-rustline-busy-duration, 9s); animation-timing-function: linear; animation-fill-mode: both; }
.rvp-rustline-route--busy ol.is-cycle-running li:nth-child(1) { animation-name: rvp-rustline-busy-step-1; }
.rvp-rustline-route--busy ol.is-cycle-running li:nth-child(2) { animation-name: rvp-rustline-busy-step-2; }
.rvp-rustline-route--busy ol.is-cycle-running li:nth-child(3) { animation-name: rvp-rustline-busy-step-3; }
.rvp-rustline-route--busy ol.is-cycle-running li:nth-child(4) { animation-name: rvp-rustline-busy-step-4; }
.rvp-rustline-route--calm ol.is-cycle-running li { animation-duration: 3.2s; animation-timing-function: linear; animation-fill-mode: both; }
.rvp-rustline-route--calm ol.is-cycle-running li:nth-child(1) { animation-name: rvp-rustline-calm-step-1; }
.rvp-rustline-route--calm ol.is-cycle-running li:nth-child(2) { animation-name: rvp-rustline-calm-step-2; }
.rvp-rustline-console > footer {
  display: flex;
  min-height: 4.8rem;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 1rem clamp(1.25rem, 3vw, 2rem);
  border-top: 1px solid rgba(255, 255, 255, .12);
}
.rvp-rustline-console > footer span { display: inline-flex; align-items: center; gap: .65rem; font-size: .76rem; font-weight: 700; }
.rvp-rustline-console > footer span i { width: .65rem; height: .65rem; border-radius: 50%; background: #55d6a8; box-shadow: 0 0 0 5px rgba(85, 214, 168, .09); }
.rvp-rustline-console > footer p { max-width: 29rem; margin: 0; color: rgba(255, 255, 255, .5); font-size: .72rem; text-align: right; }

@keyframes rvp-rustline-busy {
  0%, 4% { left: calc(12.5% - .24rem); opacity: 0; }
  7%, 18% { left: calc(12.5% - .24rem); opacity: 1; }
  31%, 43% { left: calc(37.5% - .24rem); opacity: 1; }
  56%, 68% { left: calc(62.5% - .24rem); opacity: 1; }
  81%, 93% { left: calc(87.5% - .24rem); opacity: 1; }
  97%, 100% { left: calc(87.5% - .24rem); opacity: 0; }
}

@keyframes rvp-rustline-calm {
  0%, 4% { left: calc(25% - .24rem); opacity: 0; }
  7%, 16% { left: calc(25% - .24rem); opacity: 1; }
  48%, 93% { left: calc(75% - .24rem); opacity: 1; }
  97%, 100% { left: calc(75% - .24rem); opacity: 0; }
}

@keyframes rvp-rustline-busy-step-1 {
  0%, 5%, 20%, 100% { transform: translateY(0); box-shadow: none; }
  7%, 18% { transform: translateY(-2px); box-shadow: 0 0 0 1px rgba(255, 191, 31, .2), 0 10px 24px rgba(0, 0, 0, .18); }
}

@keyframes rvp-rustline-busy-step-2 {
  0%, 29%, 45%, 100% { transform: translateY(0); box-shadow: none; }
  31%, 43% { transform: translateY(-2px); box-shadow: 0 0 0 1px rgba(255, 191, 31, .28), 0 10px 24px rgba(0, 0, 0, .18); }
}

@keyframes rvp-rustline-busy-step-3 {
  0%, 54%, 70%, 100% { transform: translateY(0); box-shadow: none; }
  56%, 68% { transform: translateY(-2px); box-shadow: 0 0 0 1px rgba(255, 191, 31, .2), 0 10px 24px rgba(0, 0, 0, .18); }
}

@keyframes rvp-rustline-busy-step-4 {
  0%, 79%, 95%, 100% { transform: translateY(0); box-shadow: none; }
  81%, 93% { transform: translateY(-2px); box-shadow: 0 0 0 1px rgba(255, 191, 31, .2), 0 10px 24px rgba(0, 0, 0, .18); }
}

@keyframes rvp-rustline-calm-step-1 {
  0%, 5%, 18%, 100% { transform: translateY(0); box-shadow: none; }
  7%, 16% { transform: translateY(-2px); box-shadow: 0 0 0 1px rgba(36, 116, 234, .35), 0 10px 24px rgba(0, 0, 0, .18); }
}

@keyframes rvp-rustline-calm-step-2 {
  0%, 46%, 95%, 100% { transform: translateY(0); box-shadow: none; }
  48%, 93% { transform: translateY(-2px); box-shadow: 0 0 0 1px rgba(36, 116, 234, .35), 0 10px 24px rgba(0, 0, 0, .18); }
}

/* -------------------------------------------------------------------------- */
/* Responsive                                                                 */
/* -------------------------------------------------------------------------- */

@media (max-width: 1080px) {
  .how-route { grid-template-columns: 14rem minmax(0, 1fr); }
  .about-compass { grid-template-columns: 1fr; }
  .about-compass-map { min-height: 34rem; }
  .about-compass-detail { width: min(100%, 44rem); margin-inline: auto; }
  .about-compass-panel { min-height: 0; }
  .about-trust { grid-template-columns: 1fr 1fr; }
  .about-trust nav { grid-column: 1 / -1; grid-template-columns: repeat(4, 1fr); }
  .about-trust nav a { padding-inline: .75rem; }
  .rvp-noise-workspace { grid-template-columns: 1fr; }
  .rvp-noise-visual { min-height: 36rem; border-right: 0; border-bottom: 1px solid rgba(255, 255, 255, .12); }
  .rvp-noise-detail .signature-panel { min-height: 0; }
  .rvp-rustline { grid-template-columns: 1fr; }
  .rvp-rustline-control { border-right: 0; border-bottom: 1px solid var(--sig-line); }
  .rvp-rustline-options { grid-template-columns: repeat(3, 1fr); }
  .rvp-rustline-note { margin-top: 1.5rem; padding-top: 0; }
}

@media (max-width: 800px) {
  .page-how .site-header .nav-cta,
  .page-about .site-header .nav-cta { display: none; }

  .signature-heading { margin-bottom: 2.5rem; }
  .page-how .page-hero .button-row,
  .page-about .page-hero .button-row { width: 100%; }
  .how-route { grid-template-columns: 1fr; }
  .how-route-rail { grid-template-columns: repeat(2, 1fr); gap: .35rem; padding: .75rem; }
  .how-route-progress { display: none; }
  .how-route-tab { min-height: 4.6rem; grid-template-columns: 1.75rem 1fr; padding: .6rem; }
  .how-route-tab::before { display: none; }
  .how-route-tab[aria-selected="true"] { transform: none; box-shadow: inset 3px 0 0 var(--sig-gold); }
  .how-route-panel { min-height: 0; padding: 2rem 1.25rem; }
  .how-route-field { grid-template-columns: 5rem minmax(0, 1fr); gap: 1rem; }
  .how-expect-strip { grid-template-columns: 1fr; }
  .how-expect-strip article { min-height: 0; }
  .how-expect-strip article + article { border-top: 1px solid var(--sig-line); border-left: 0; }
  .how-scenario-tabs { grid-template-columns: repeat(2, 1fr); }
  .how-scenario-panel { min-height: 0; padding: 2rem 1.25rem; }
  .how-scenario-path { grid-template-columns: 1fr; gap: .75rem; }
  .how-scenario-path::before { top: 3rem; bottom: 3rem; left: 1.05rem; width: 2px; height: auto; background: linear-gradient(180deg, var(--sig-gold), rgba(255, 191, 31, .2)); }
  .how-scenario-path section { min-height: 7.5rem; padding: 1.3rem 1.2rem 1.3rem 4rem; }
  .how-scenario-path section > span { top: 1.25rem; left: .55rem; }
  .how-prepare { grid-template-columns: 1fr; gap: 2.5rem; }
  .about-why { grid-template-columns: 1fr; }
  .about-why-media { width: min(100%, 40rem); }
  .about-why-media::after { right: 0; bottom: 0; }
  .about-standard-track { grid-template-columns: repeat(2, 1fr); }
  .about-standard-line { display: none; }
  .about-standard-track button { min-height: 7.2rem; border-color: rgba(255, 255, 255, .1); }
  .about-standard-workspace { grid-template-columns: 1fr; }
  .about-standard-outcomes { border-top: 1px solid var(--sig-line); border-left: 0; }
  .about-standard-outcomes ul { grid-template-columns: repeat(2, 1fr); }
  .about-standard-outcomes li:nth-child(odd) { border-right: 1px solid var(--sig-line); }
  .about-trust { grid-template-columns: 1fr; }
  .about-trust nav { grid-column: auto; grid-template-columns: repeat(2, 1fr); }
  .rvp-noise-devices button { min-height: 4rem; }
  .rvp-noise-visual { min-height: 34rem; padding-inline: 1rem; }
}

@media (max-width: 560px) {
  .page-how .btn,
  .page-about .btn { width: 100%; }
  .how-route-dossier__top,
  .how-scenario-workspace > header,
  .about-compass-detail > header,
  .rvp-noise-detail > header { align-items: flex-start; flex-direction: column; gap: .3rem; }
  .how-route-field { min-height: 0; grid-template-columns: 1fr; gap: .35rem; padding: 1.15rem 0; }
  .how-route-field > span { margin-bottom: .15rem; }
  .how-scenario-tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .3rem; padding: .35rem; }
  .how-scenario-tabs button {
    min-height: 4.65rem;
    grid-template-columns: 1fr;
    align-content: center;
    gap: .3rem;
    padding: .75rem;
    font-size: .78rem;
  }
  .how-scenario-tabs button span { font-size: .58rem; }
  .how-scenario-workspace > header { min-height: 3.7rem; padding: .85rem 1rem; }
  .how-scenario-panel { padding: 1.1rem; }
  .how-scenario-path { gap: .6rem; }
  .how-scenario-path::before { top: 2.7rem; bottom: 2.7rem; left: 1.03rem; }
  .how-scenario-path section { min-height: 0; padding: 1.05rem .9rem 1.05rem 3.65rem; }
  .how-scenario-path section > span { top: 1rem; left: .53rem; }
  .how-scenario-path h3 { margin-bottom: .45rem; font-size: 1.08rem; }
  .how-scenario-path p { font-size: .84rem; line-height: 1.5; }
  .how-prepare ul { grid-template-columns: 1fr; }
  .how-prepare li:nth-child(odd) { border-right: 0; }
  .about-why-media figcaption { right: .75rem; bottom: .75rem; }
  .about-compass-map { display: grid; min-height: 0; grid-template-columns: repeat(2, 1fr); gap: .65rem; padding: 4.9rem .75rem .75rem; }
  .about-compass { min-width: 0; }
  .about-compass > * { width: 100%; min-width: 0; max-width: 100%; }
  .about-compass-map::before,
  .about-compass-axis { display: none; }
  .about-compass-center { top: .75rem; left: .75rem; display: flex; width: calc(100% - 1.5rem); height: 3.4rem; align-items: center; justify-content: center; gap: .35rem; border: 0; border-radius: .7rem; transform: none; }
  .about-compass-tab { position: static; width: auto; min-height: 6.4rem; transform: none !important; }
  .about-compass-tab[aria-selected="true"] { box-shadow: inset 0 3px 0 var(--sig-gold), var(--sig-shadow-sm); }
  .about-compass-panel { min-height: 0; padding: 1.5rem; }
  .about-standard-track { grid-template-columns: 1fr; }
  .about-standard-track button { min-height: 5.2rem; grid-template-columns: 2.6rem 1fr; align-items: center; align-content: center; }
  .about-standard-panels .signature-panel { min-height: 0; padding: 1.6rem; }
  .about-standard-outcomes ul { grid-template-columns: 1fr; }
  .about-standard-outcomes li:nth-child(odd) { border-right: 0; }
  .about-trust { padding: 1.4rem; }
  .about-trust dl div { grid-template-columns: 1fr; gap: .25rem; }
  .about-trust nav { grid-template-columns: 1fr; }
  .rvp-noise-devices { grid-template-columns: 1fr; gap: .25rem; }
  .rvp-noise-devices button { justify-content: flex-start; padding-inline: 1rem; }
  .rvp-noise-devices button + button { border-top: 1px solid rgba(255, 255, 255, .1); border-left: 0; }
  .rvp-noise-visual { display: block; min-height: 0; padding: 6.5rem .75rem .75rem; }
  .rvp-device-outline,
  .rvp-device-outline[data-device="laptop"],
  .rvp-device-outline[data-device="tablet"] { width: 100%; height: auto; min-height: 27rem; padding: 8.5rem .75rem .75rem; border-radius: 1.5rem; }
  .rvp-device-outline[data-device="laptop"] .rvp-device-speaker { top: .8rem; bottom: auto; width: 3.6rem; height: .28rem; border-radius: 999px; }
  .rvp-device-screen,
  .rvp-device-outline[data-device="laptop"] .rvp-device-screen,
  .rvp-device-outline[data-device="tablet"] .rvp-device-screen { inset: 1.4rem .9rem auto; height: 5.7rem; border-radius: .75rem; }
  .rvp-device-screen::after { width: 3.7rem; height: 3.7rem; box-shadow: 0 0 0 1.3rem rgba(255, 191, 31, .03); }
  .rvp-noise-hotspots { display: grid; gap: .5rem; }
  .rvp-noise-hotspot { position: static; width: 100%; min-height: 4.2rem; white-space: normal; }
  .rvp-noise-detail .signature-panel { padding: 1.5rem; }
  .rvp-rustline-options { grid-template-columns: 1fr; }
  .rvp-rustline-options button:hover { transform: none; }
  .rvp-rustline-console > header,
  .rvp-rustline-console > footer { align-items: flex-start; flex-direction: column; }
  .rvp-rustline-console > footer p { text-align: left; }
  .rvp-rustline-route > div { align-items: flex-start; flex-direction: column; gap: .25rem; }
  .rvp-rustline-route ol,
  .rvp-rustline-route--busy ol,
  .rvp-rustline-route--calm ol { grid-template-columns: 1fr; gap: .55rem; padding: 0 0 0 2rem; }
  .rvp-rustline-route ol::before { top: .85rem; right: auto; bottom: .85rem; left: .55rem; width: 2px; height: auto; }
  .rvp-rustline-route ol::after { top: calc(12.5% - .24rem); left: .32rem; }
  .rvp-rustline-route--busy ol.is-cycle-running::after { animation-name: rvp-rustline-busy-mobile; }
  .rvp-rustline-route--calm ol.is-cycle-running::after { animation-name: rvp-rustline-calm-mobile; }
  .rvp-rustline-route li { min-height: 3.3rem; display: flex; align-items: center; padding: .75rem 1rem; text-align: left; }
  .rvp-rustline-route li::before { top: 50%; left: -1.8rem; transform: translateY(-50%); }
}

@keyframes rvp-rustline-busy-mobile {
  0%, 4% { top: calc(12.5% - .24rem); opacity: 0; }
  7%, 18% { top: calc(12.5% - .24rem); opacity: 1; }
  31%, 43% { top: calc(37.5% - .24rem); opacity: 1; }
  56%, 68% { top: calc(62.5% - .24rem); opacity: 1; }
  81%, 93% { top: calc(87.5% - .24rem); opacity: 1; }
  97%, 100% { top: calc(87.5% - .24rem); opacity: 0; }
}

@keyframes rvp-rustline-calm-mobile {
  0%, 4% { top: calc(25% - .24rem); opacity: 0; }
  7%, 16% { top: calc(25% - .24rem); opacity: 1; }
  48%, 93% { top: calc(75% - .24rem); opacity: 1; }
  97%, 100% { top: calc(75% - .24rem); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .signature-panel:not([hidden]) { animation: none; }
  .how-route-progress::before,
  .about-standard-line::before,
  .rvp-device-outline { transition: none; }
  .rvp-rustline-route ol.is-cycle-running::after { animation: none; }
  .rvp-rustline-route ol.is-cycle-running li { animation: none; }
  .page-how.motion-ready .scroll-reveal,
  .page-about.motion-ready .scroll-reveal { opacity: 1; transform: none; transition: none; }
}