/* Local prototype: main-page hero, topic silo and standalone Verkehrsakte. */
.protection-page {
  --traffic-yellow: #f5c518;
  --traffic-yellow-ink: #4c3900;
  --traffic-file-paper: #f4f0e6;
  --traffic-file-paper-alt: #ebe4d5;
  --traffic-file-ink: #202023;
  --traffic-file-muted: #6f6b62;
  --traffic-file-line: rgba(32, 32, 35, .14);
  overflow-x: clip;
}

.traffic-main-hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  padding-top: 4.25rem;
  overflow: hidden;
  isolation: isolate;
  background: var(--background);
  color: var(--foreground);
}

.traffic-main-hero::before { position: absolute; inset: 4.25rem 0 auto; height: 1px; background: var(--border); content: ""; }

.traffic-main-hero__grid {
  position: absolute;
  inset: 4.25rem 0 3.4rem;
  z-index: -2;
  opacity: .3;
  background-image: linear-gradient(var(--border) 1px, transparent 1px), linear-gradient(90deg, var(--border) 1px, transparent 1px);
  background-size: 5.5rem 5.5rem;
  mask-image: linear-gradient(90deg, transparent 0%, #000 62%, transparent 100%);
}

.traffic-main-hero__inner {
  width: min(100% - 3rem, 90rem);
  flex: 1;
  display: grid;
  grid-template-columns: minmax(28rem, .9fr) minmax(33rem, 1.1fr);
  align-items: center;
  gap: clamp(1.5rem, 3.5vw, 5rem);
  margin-inline: auto;
  padding: clamp(2.35rem, 5.5vh, 4.6rem) 0 1rem;
}

.traffic-main-hero__copy { position: relative; z-index: 4; max-width: 42rem; }
.traffic-main-hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .65rem;
  padding: .55rem .75rem;
  border: 1px solid var(--border);
  border-radius: .45rem;
  color: var(--muted-foreground);
  font-size: .72rem;
  font-weight: 850;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.traffic-main-hero__eyebrow i,
.traffic-main-hero__proof i {
  width: .42rem;
  height: .42rem;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--traffic-yellow);
  box-shadow: 0 0 0 .28rem rgba(245, 197, 24, .12);
}

.traffic-main-hero h1 {
  max-width: 13ch;
  margin: 1.35rem 0 1.25rem;
  font-family: var(--font-display);
  font-size: clamp(3.5rem, 5.3vw, 5.65rem);
  font-weight: 620;
  line-height: .94;
  letter-spacing: -.058em;
  text-wrap: balance;
}

.traffic-main-hero h1 span { color: var(--primary); }
.dark .traffic-main-hero h1 span { color: var(--traffic-yellow); }
.traffic-main-hero__copy > p:not(.traffic-main-hero__proof) {
  max-width: 38rem;
  margin: 0;
  color: var(--muted-foreground);
  font-size: 1.02rem;
  line-height: 1.68;
}

.traffic-main-hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: .8rem; margin-top: 1.55rem; }
.traffic-main-hero__actions .button,
.traffic-main-hero__phone { min-height: 3.4rem; }
.traffic-main-hero__actions svg,
.traffic-main-hero__rating svg { width: 1.1rem; fill: none; stroke: currentColor; stroke-width: 1.8; }
.traffic-main-hero__phone {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 1rem;
  border: 1px solid var(--border);
  border-radius: .65rem;
  color: var(--foreground);
  font-weight: 780;
  text-decoration: none;
  transition: border-color 200ms ease, background-color 200ms ease, transform 160ms cubic-bezier(.23, 1, .32, 1);
}

.traffic-main-hero__phone:active,
.traffic-main-hero__actions .button:active { transform: scale(.97); }
.traffic-main-hero__rating { width: min(100%, 22rem); margin-top: .75rem; padding: .5rem .65rem; }
.traffic-main-hero__rating .protection-google-rating__g { width: 2.15rem; height: 2.15rem; font-size: 1rem; }
.traffic-main-hero__proof { display: flex; align-items: center; gap: .65rem; margin: 1rem 0 0; color: var(--muted-foreground); font-size: .72rem; }

.traffic-main-hero__visual {
  --traffic-shift-x: 0px;
  --traffic-shift-y: 0px;
  position: relative;
  min-width: 0;
  height: min(68vh, 45rem);
  min-height: 34rem;
  transform: translate3d(var(--traffic-shift-x), var(--traffic-shift-y), 0);
  transition: transform 700ms var(--ease-premium);
}

.traffic-main-hero__visual figure {
  position: absolute;
  inset: -4% -3% -5% -9%;
  z-index: 2;
  margin: 0;
  overflow: visible;
}

.traffic-main-hero__visual img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  filter: drop-shadow(0 2rem 3.5rem rgba(35, 28, 12, .14));
}

.dark .traffic-main-hero__visual img { filter: brightness(.92) saturate(.94) contrast(1.03) drop-shadow(0 2rem 4rem rgba(0, 0, 0, .44)); }
.traffic-main-hero__halo {
  position: absolute;
  inset: 8% 2% 5% 2%;
  z-index: -1;
  border-radius: 50%;
  background: color-mix(in srgb, var(--traffic-yellow) 15%, var(--muted));
  filter: blur(4rem);
}

.traffic-main-hero__dock {
  min-height: 3.4rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.25rem;
  padding: .9rem 1.5rem;
  border-top: 1px solid var(--border);
  color: var(--muted-foreground);
  font-size: .74rem;
  font-weight: 750;
}

.traffic-main-hero__dock i { width: .23rem; height: .23rem; flex: 0 0 auto; border-radius: 50%; background: var(--traffic-yellow); }

.traffic-topic-silo {
  position: relative;
  padding: clamp(4.75rem, 7vw, 7rem) 0;
  border-bottom: 1px solid var(--border);
  background: var(--background);
  color: var(--foreground);
}

.traffic-topic-silo__inner { width: min(100% - 3rem, 90rem); margin-inline: auto; }
.traffic-topic-silo header {
  display: grid;
  grid-template-columns: minmax(15rem, .36fr) minmax(24rem, .64fr);
  align-items: end;
  gap: 2rem;
  margin-bottom: clamp(2rem, 4vw, 3.5rem);
}

.traffic-topic-silo header > span { color: var(--primary); font-size: .7rem; font-weight: 850; letter-spacing: .1em; text-transform: uppercase; }
.dark .traffic-topic-silo header > span { color: var(--traffic-yellow); }
.traffic-topic-silo h2 {
  max-width: 19ch;
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(2.35rem, 4vw, 4.6rem);
  font-weight: 630;
  line-height: .98;
  letter-spacing: -.05em;
  text-wrap: balance;
}

.traffic-topic-silo nav {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  border: 1px solid var(--border);
  background: var(--border);
}
.traffic-topic-silo a {
  min-width: 0;
  min-height: 7.25rem;
  display: grid;
  grid-template-columns: 2.25rem minmax(0, 1fr) auto;
  grid-template-rows: auto auto;
  align-content: center;
  align-items: center;
  column-gap: .75rem;
  padding: 1.15rem 1.2rem;
  background: var(--background);
  color: var(--foreground);
  text-decoration: none;
  transition: background-color 200ms ease, transform 160ms cubic-bezier(.23, 1, .32, 1);
}

.traffic-topic-silo a:active { transform: scale(.98); }
.traffic-topic-silo a::after { grid-column: 3; grid-row: 1 / 3; color: var(--muted-foreground); content: "↘"; font-size: .9rem; transition: color 180ms ease, transform 180ms ease; }
.traffic-topic-silo a > span { grid-row: 1 / 3; align-self: start; padding-top: .15rem; color: var(--primary); font-size: .64rem; font-weight: 900; letter-spacing: .09em; }
.dark .traffic-topic-silo a > span { color: var(--traffic-yellow); }
.traffic-topic-silo a strong { max-width: 18ch; font-family: var(--font-display); font-size: 1.05rem; line-height: 1.05; }
.traffic-topic-silo a small { margin-top: .38rem; color: var(--muted-foreground); font-size: .66rem; line-height: 1.4; }
.traffic-topic-silo a.is-active { background: color-mix(in srgb, var(--traffic-yellow) 12%, var(--background)); box-shadow: inset 3px 0 var(--traffic-yellow); }
.traffic-topic-silo a.is-active::after { color: var(--foreground); transform: translate(2px, 2px); }

.traffic-file-section {
  --traffic-file-surface: color-mix(in srgb, var(--muted) 86%, var(--background));
  position: relative;
  padding: clamp(7rem, 10vw, 12rem) 0;
  overflow: clip;
  background: color-mix(in srgb, var(--background) 78%, var(--muted));
  color: var(--foreground);
}

.dark .traffic-file-section { --traffic-file-surface: color-mix(in srgb, var(--muted) 89%, var(--background)); background: color-mix(in srgb, var(--background) 90%, var(--muted)); }
.traffic-file-section__inner { width: min(100% - 3rem, 90rem); margin-inline: auto; }
.traffic-file-section__heading {
  display: grid;
  grid-template-columns: minmax(0, 1.22fr) minmax(18rem, .55fr);
  align-items: end;
  gap: 2rem 5rem;
}

.traffic-file-section__heading .section-kicker { grid-column: 1 / -1; justify-self: start; }
.traffic-file-section__heading h2 {
  max-width: 15ch;
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(3rem, 5vw, 5.8rem);
  font-weight: 630;
  line-height: .94;
  letter-spacing: -.058em;
  text-wrap: balance;
}

.traffic-file-section__heading > p { max-width: 34rem; margin: 0; color: var(--muted-foreground); font-size: .95rem; line-height: 1.72; }
.traffic-file-section__layout {
  display: grid;
  grid-template-columns: minmax(32rem, .95fr) minmax(27rem, 1.05fr);
  align-items: start;
  gap: clamp(4rem, 8vw, 8rem);
  margin-top: clamp(5rem, 8vw, 8rem);
}

.traffic-file-section__stage { position: sticky; top: clamp(6.5rem, 12vh, 9rem); align-self: start; }
.traffic-file { position: relative; width: min(100%, 40rem); margin-inline: auto; padding: 3rem .9rem 1rem; }
.traffic-file__sheet,
.traffic-file__folder {
  position: absolute;
  inset: 3rem .9rem 1rem;
  border: 1px solid rgba(74, 57, 20, .18);
  border-radius: .6rem 1.35rem 1.35rem 1.35rem;
  background: var(--traffic-file-paper-alt);
  box-shadow: 0 1.25rem 3.2rem rgba(43, 34, 15, .12);
  transform-origin: 50% 100%;
}

.traffic-file__sheet--back { transform: translate3d(-.8rem, .8rem, 0) rotate(-1.1deg); }
.traffic-file__sheet--middle { transform: translate3d(.65rem, .4rem, 0) rotate(.75deg); }
.traffic-file__folder { position: relative; inset: auto; z-index: 3; padding: 1rem; background: color-mix(in srgb, var(--traffic-yellow) 22%, var(--traffic-file-paper-alt)); }
.traffic-file__tabs {
  position: absolute;
  right: .55rem;
  bottom: calc(100% - .3rem);
  left: .55rem;
  z-index: -1;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  align-items: end;
  gap: .25rem;
}

.traffic-file__tabs span {
  min-height: 2.7rem;
  display: grid;
  place-items: center;
  padding-top: .25rem;
  border: 1px solid rgba(74, 57, 20, .17);
  border-bottom: 0;
  border-radius: .52rem .52rem 0 0;
  background: var(--traffic-file-paper-alt);
  color: var(--traffic-file-muted);
  font-size: .58rem;
  font-weight: 850;
  transition: min-height 250ms cubic-bezier(.23, 1, .32, 1), background-color 200ms ease, color 200ms ease;
}

.traffic-file__tabs span.is-active { min-height: 3.1rem; background: var(--traffic-yellow); color: var(--traffic-yellow-ink); }
.traffic-file__paper {
  position: relative;
  z-index: 2;
  min-height: 36rem;
  display: flex;
  flex-direction: column;
  padding: clamp(1.4rem, 3vw, 2.35rem);
  overflow: hidden;
  border: 1px solid rgba(32, 32, 35, .09);
  border-radius: .32rem 1rem 1rem .58rem;
  background: repeating-linear-gradient(0deg, transparent 0 2.35rem, rgba(32, 32, 35, .035) 2.35rem calc(2.35rem + 1px)), var(--traffic-file-paper);
  color: var(--traffic-file-ink);
  box-shadow: 0 1.4rem 3.7rem rgba(43, 34, 15, .17);
  transform-origin: 12% 100%;
  will-change: transform, opacity;
}

.traffic-file__paper::before { position: absolute; inset: 0 auto 0 1.1rem; width: 1px; background: rgba(197, 108, 76, .17); content: ""; }
.traffic-file__header {
  min-height: 3rem;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: .75rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--traffic-file-line);
}

.traffic-file__seal { width: 2.6rem; height: 2.6rem; display: grid; place-items: center; border-radius: .48rem; background: var(--traffic-yellow); color: var(--traffic-yellow-ink); font-family: var(--font-display); font-size: .78rem; font-weight: 900; }
.traffic-file__header > span:nth-child(2) { display: flex; flex-direction: column; }
.traffic-file__header b { font-size: .76rem; }
.traffic-file__header small { margin-top: .18rem; color: var(--traffic-file-muted); font-size: .55rem; }
.traffic-file__status { padding: .4rem .6rem; border: 1px solid var(--traffic-file-line); border-radius: .4rem; color: var(--traffic-file-muted); font-size: .52rem; font-weight: 850; letter-spacing: .08em; text-transform: uppercase; }
.traffic-file__heading { display: grid; grid-template-columns: 1fr auto; gap: .4rem 1rem; padding: 1.55rem 0 1.25rem; }
.traffic-file__heading > span { color: var(--traffic-yellow-ink); font-size: .57rem; font-weight: 880; letter-spacing: .08em; text-transform: uppercase; }
.traffic-file__heading > span:nth-child(2) { text-align: right; }
.traffic-file__heading h3 { grid-column: 1 / -1; max-width: 17ch; margin: .3rem 0 0; font-family: var(--font-display); font-size: clamp(1.85rem, 3.2vw, 3rem); font-weight: 650; line-height: .98; letter-spacing: -.045em; text-wrap: balance; }
.traffic-file__heading p { grid-column: 1 / -1; max-width: 48ch; margin: .3rem 0 0; color: var(--traffic-file-muted); font-size: .75rem; line-height: 1.58; }
.traffic-file__document { padding: 1rem; border: 1px solid var(--traffic-file-line); border-radius: .55rem; background: rgba(255, 255, 255, .25); }
.traffic-file__document > span { color: var(--traffic-yellow-ink); font-size: .58rem; font-weight: 880; letter-spacing: .08em; text-transform: uppercase; }
.traffic-file__document dl { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: .8rem 0 0; }
.traffic-file__document dl div { min-width: 0; padding-right: .7rem; }
.traffic-file__document dl div + div { padding-left: .7rem; border-left: 1px solid var(--traffic-file-line); }
.traffic-file__document dt { color: var(--traffic-file-muted); font-size: .48rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; }
.traffic-file__document dd { margin: .38rem 0 0; font-size: .66rem; font-weight: 820; line-height: 1.25; }
.traffic-file__tags { display: flex; flex-wrap: wrap; gap: .42rem; margin-top: 1rem; }
.traffic-file__tags span { padding: .4rem .6rem; border: 1px solid var(--traffic-file-line); border-radius: 999px; color: var(--traffic-file-muted); font-size: .52rem; font-weight: 750; }
.traffic-file__footer { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: .25rem 1rem; margin-top: auto; padding-top: 1.25rem; border-top: 1px solid var(--traffic-file-line); }
.traffic-file__footer span { color: var(--traffic-file-muted); font-size: .5rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.traffic-file__footer strong { grid-column: 1; font-size: .76rem; }
.traffic-file__footer i { grid-area: 1 / 2 / 3; color: var(--traffic-yellow-ink); font-size: 1rem; font-style: normal; }
.traffic-file__progress { height: 2px; margin: 1.1rem 1rem 0; background: color-mix(in srgb, var(--foreground) 12%, transparent); }
.traffic-file__progress i { display: block; width: 16.666%; height: 100%; background: var(--traffic-yellow); transition: width 260ms cubic-bezier(.23, 1, .32, 1); }

.traffic-file-section__steps { margin: 0; padding: 0; list-style: none; }
.traffic-file-section__steps li { min-height: 58svh; display: flex; align-items: center; padding: 3rem 0; scroll-margin-top: 7rem; opacity: .38; transition: opacity 250ms ease; }
.traffic-file-section__steps li.is-active { opacity: 1; }
.traffic-file-section__steps article { padding-left: 2rem; border-left: 2px solid var(--border); transition: border-color 250ms ease, transform 250ms cubic-bezier(.23, 1, .32, 1); }
.traffic-file-section__steps li.is-active article { border-left-color: var(--traffic-yellow); transform: translate3d(.55rem, 0, 0); }
.traffic-file-section__steps span { color: var(--primary); font-size: .62rem; font-weight: 850; letter-spacing: .1em; text-transform: uppercase; }
.dark .traffic-file-section__steps span { color: var(--traffic-yellow); }
.traffic-file-section__steps h3 { max-width: 13ch; margin: .9rem 0 0; font-family: var(--font-display); font-size: clamp(2.2rem, 3.7vw, 4.1rem); font-weight: 640; line-height: .96; letter-spacing: -.05em; text-wrap: balance; }
.traffic-file-section__steps p { max-width: 46ch; margin: 1rem 0 0; color: var(--muted-foreground); font-size: .85rem; line-height: 1.68; }
.traffic-file-section__steps a { display: inline-flex; align-items: center; gap: .55rem; margin-top: 1.2rem; color: var(--foreground); font-size: .72rem; font-weight: 820; text-decoration: none; }
.traffic-file-section__steps a b { font-size: .9rem; font-weight: 500; }
.traffic-file-section__mobile-status { display: none; }

@media (hover: hover) and (pointer: fine) {
  .traffic-main-hero__phone:hover { border-color: var(--foreground); background: var(--muted); transform: translateY(-2px); }
  .traffic-topic-silo a:hover { background: color-mix(in srgb, var(--traffic-yellow) 8%, var(--background)); }
  .traffic-file-section__steps a:hover { color: var(--primary); }
  .dark .traffic-file-section__steps a:hover { color: var(--traffic-yellow); }
}

@media (max-width: 1180px) {
  .traffic-main-hero__inner { grid-template-columns: minmax(25rem, .92fr) minmax(28rem, 1.08fr); gap: 1rem; }
  .traffic-main-hero h1 { font-size: clamp(3.3rem, 5.7vw, 4.75rem); }
  .traffic-main-hero__visual { min-height: 30rem; }
  .traffic-topic-silo nav { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .traffic-file-section__layout { grid-template-columns: minmax(28rem, .92fr) minmax(24rem, 1.08fr); gap: 3.5rem; }
}

@media (max-height: 850px) and (min-width: 761px) {
  .traffic-main-hero__rating { display: none; }
  .traffic-main-hero__proof { margin-top: .7rem; }
}

@media (max-width: 1024px) {
  .traffic-main-hero__inner { width: min(100% - 2rem, 90rem); grid-template-columns: minmax(23rem, .95fr) minmax(25rem, 1.05fr); }
  .traffic-file-section__heading { grid-template-columns: 1fr; gap: 1.2rem; }
  .traffic-file-section__heading .section-kicker { grid-column: auto; }
  .traffic-file-section__layout { grid-template-columns: minmax(26rem, .95fr) minmax(22rem, 1.05fr); gap: 2.25rem; }
  .traffic-file { padding-inline: .5rem; }
}

@media (max-width: 900px), (max-height: 600px) and (orientation: landscape) {
  .traffic-file-section__mobile-status {
    position: sticky;
    top: 4.75rem;
    z-index: 5;
    display: grid;
    grid-template-columns: auto 1fr;
    gap: .25rem 1rem;
    margin-top: 3rem;
    padding: .8rem 1rem;
    border: 1px solid var(--border);
    border-radius: .7rem;
    background: color-mix(in srgb, var(--background) 94%, transparent);
    box-shadow: 0 .7rem 1.8rem color-mix(in srgb, var(--foreground) 8%, transparent);
    backdrop-filter: blur(14px);
  }

  .traffic-file-section__mobile-status > span { grid-row: 1 / 3; align-self: center; color: var(--primary); font-size: .65rem; font-weight: 900; }
  .dark .traffic-file-section__mobile-status > span { color: var(--traffic-yellow); }
  .traffic-file-section__mobile-status strong { font-size: .77rem; }
  .traffic-file-section__mobile-status small { color: var(--muted-foreground); font-size: .58rem; }
  .traffic-file-section__mobile-status b { color: var(--foreground); font-weight: 760; }
  .traffic-file-section__layout { display: block; margin-top: 2rem; }
  .traffic-file-section__stage { display: none; }
  .traffic-file-section__steps li { min-height: auto; display: block; padding: 0; margin: -.35rem 0 0; scroll-margin-top: 9rem; opacity: 1; }
  .traffic-file-section__steps article {
    position: relative;
    min-height: 18rem;
    display: flex;
    flex-direction: column;
    padding: 2rem;
    overflow: hidden;
    border: 1px solid var(--traffic-file-line);
    border-left-width: 1px;
    border-radius: .45rem 1rem 1rem .65rem;
    background: repeating-linear-gradient(0deg, transparent 0 2.35rem, rgba(32, 32, 35, .035) 2.35rem calc(2.35rem + 1px)), var(--traffic-file-paper);
    color: var(--traffic-file-ink);
    box-shadow: 0 1.1rem 2.8rem rgba(35, 28, 12, .1);
    transform: translate3d(0, 0, 0);
  }

  .traffic-file-section__steps li:nth-child(even) article { transform: translate3d(.18rem, 0, 0); }
  .traffic-file-section__steps li.is-active article { border-color: rgba(185, 140, 11, .45); box-shadow: 0 1.25rem 3rem rgba(35, 28, 12, .15), inset .3rem 0 var(--traffic-yellow); transform: translate3d(.28rem, 0, 0); }
  .traffic-file-section__steps article::before { position: absolute; top: 0; right: 1.2rem; width: 4.5rem; height: .45rem; border-radius: 0 0 .35rem .35rem; background: var(--traffic-yellow); content: ""; }
  .traffic-file-section__steps span { color: var(--traffic-yellow-ink); }
  .traffic-file-section__steps h3 { max-width: 13ch; color: var(--traffic-file-ink); font-size: clamp(2rem, 7vw, 3.25rem); }
  .traffic-file-section__steps p { color: var(--traffic-file-muted); }
  .traffic-file-section__steps a { margin-top: auto; color: var(--traffic-file-ink); }
}

@media (max-width: 760px) {
  .traffic-bento-section .protection-bento-video {
    width: 100%;
    min-width: 0;
    min-height: 30rem;
    aspect-ratio: auto;
  }

  .traffic-main-hero { min-height: auto; }
  .traffic-main-hero__grid { bottom: 0; background-size: 4rem 4rem; }
  .traffic-main-hero__inner { width: min(100% - 2rem, 42rem); grid-template-columns: 1fr; gap: 1rem; padding: 3rem 0 1.2rem; }
  .traffic-main-hero__copy { display: contents; }
  .traffic-main-hero__eyebrow { order: 1; justify-self: start; }
  .traffic-main-hero h1 { order: 2; max-width: 12ch; font-size: clamp(2.8rem, 13vw, 4rem); }
  .traffic-main-hero__copy > p:not(.traffic-main-hero__proof) { order: 3; font-size: .96rem; }
  .traffic-main-hero__actions { order: 4; }
  .traffic-main-hero__visual { order: 5; height: min(68vw, 32rem); min-height: 0; }
  .traffic-main-hero__rating { order: 6; width: 100%; }
  .traffic-main-hero__proof { order: 7; }
  .traffic-main-hero__visual figure { inset: -4% -4% -6%; }
  .traffic-main-hero__dock { justify-content: flex-start; overflow-x: auto; white-space: nowrap; scrollbar-width: none; }
  .traffic-main-hero__dock::-webkit-scrollbar { display: none; }
  .traffic-topic-silo { padding-block: 4.5rem; }
  .traffic-topic-silo__inner,
  .traffic-file-section__inner { width: min(100% - 2rem, 42rem); }
  .traffic-topic-silo header { grid-template-columns: 1fr; gap: 1rem; }
  .traffic-topic-silo h2 { font-size: clamp(2.45rem, 11vw, 3.8rem); }
  .traffic-topic-silo nav { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .traffic-topic-silo a { min-height: 7.5rem; padding: 1rem .85rem; }
  .traffic-file-section { padding: 5.5rem 0 6.5rem; }
  .traffic-file-section__heading h2 { font-size: clamp(2.75rem, 13vw, 4.25rem); }
  .traffic-file-section__steps article { padding: 1.6rem; }
}

@media (max-width: 430px) {
  .traffic-main-hero__eyebrow { font-size: .61rem; }
  .traffic-main-hero h1 { font-size: min(11vw, 2.8rem); }
  .traffic-main-hero__actions { align-items: stretch; }
  .traffic-main-hero__actions > * { width: 100%; justify-content: center; }
  .traffic-main-hero__visual { height: min(70vw, 24rem); }
  .traffic-topic-silo a strong { font-size: .94rem; }
  .traffic-topic-silo a small { font-size: .6rem; }
  .traffic-file-section__mobile-status { top: 4.4rem; padding-inline: .8rem; }
  .traffic-file-section__steps article { min-height: 19rem; padding: 1.4rem; }
  .traffic-file-section__steps p { font-size: .8rem; }
}

@media (max-height: 600px) and (orientation: landscape) {
  .traffic-main-hero { min-height: 100svh; }
  .traffic-main-hero__inner { padding-block: 1.15rem .65rem; }
  .traffic-main-hero h1 { max-width: 17ch; margin-block: .6rem; font-size: 2.2rem; }
  .traffic-main-hero__copy > p:not(.traffic-main-hero__proof) { font-size: .74rem; line-height: 1.45; }
  .traffic-main-hero__actions { flex-wrap: nowrap; margin-top: .65rem; }
  .traffic-main-hero__actions .button,
  .traffic-main-hero__phone { min-height: 2.7rem; font-size: .66rem; }
  .traffic-main-hero__rating,
  .traffic-main-hero__proof { display: none; }
  .traffic-main-hero__visual { height: 17rem; min-height: 0; }
  .traffic-main-hero__dock { min-height: 2.5rem; padding-block: .35rem; font-size: .58rem; }
  .traffic-file-section__mobile-status { position: relative; top: auto; }
}

@media (prefers-reduced-motion: reduce) {
  .traffic-main-hero__visual,
  .traffic-main-hero__phone,
  .traffic-topic-silo a,
  .traffic-file__paper,
  .traffic-file__tabs span,
  .traffic-file__progress i,
  .traffic-file-section__steps li,
  .traffic-file-section__steps article { transition: none !important; }
  .traffic-main-hero__visual,
  .traffic-file-section__steps li.is-active article { transform: none !important; }
  .traffic-file-section__stage { position: relative; top: auto; }
  .traffic-file-section__steps li { min-height: auto; padding: 3.5rem 0; opacity: 1; }
}
@media (max-width: 900px), (max-height: 600px) and (orientation: landscape) {
  .traffic-file-section__steps article { min-height: 0; }
  .traffic-file-section__steps p { font-size: 1rem; line-height: 1.7; }
  .traffic-file-section__steps span, .traffic-file-section__steps a { font-size: .875rem; }
}

/* Route-local reading experience; the main hero and desktop file stay unchanged. */
.traffic-file-reading { display: none; }
.traffic-file-section:is([data-traffic-file-mode=reading],[data-traffic-file-mode=static]) .traffic-file-section__layout { display: block; margin-top: 3rem; }
.traffic-file-section:is([data-traffic-file-mode=reading],[data-traffic-file-mode=static]) .traffic-file-section__stage,
.traffic-file-section:is([data-traffic-file-mode=reading],[data-traffic-file-mode=static]) .traffic-file-section__mobile-status { display: none; }
.traffic-file-section:is([data-traffic-file-mode=reading],[data-traffic-file-mode=static]) .traffic-file-section__steps { max-width: 46rem; margin-inline: auto; }
.traffic-file-section:is([data-traffic-file-mode=reading],[data-traffic-file-mode=static]) .traffic-file-section__steps li { min-height: 0; display: block; padding: 0; margin: 0 0 1.5rem; opacity: 1; scroll-margin-top: 22rem; }
.traffic-file-section:is([data-traffic-file-mode=reading],[data-traffic-file-mode=static]) .traffic-file-section__steps article { min-height: 0; padding: 1.5rem; border: 1px solid var(--traffic-file-line); border-radius: .5rem 1rem 1rem .5rem; color: var(--traffic-file-ink); background: var(--traffic-file-paper); transform: none; }
.traffic-file-section:is([data-traffic-file-mode=reading],[data-traffic-file-mode=static]) .traffic-file-section__steps h3 { max-width: none; color: var(--traffic-file-ink); font-size: clamp(2rem,5vw,3rem); }
.traffic-file-section:is([data-traffic-file-mode=reading],[data-traffic-file-mode=static]) .traffic-file-section__steps p { color: var(--traffic-file-muted); font-size: 1rem; line-height: 1.7; }
.traffic-file-section:is([data-traffic-file-mode=reading],[data-traffic-file-mode=static]) .traffic-file-section__steps span,
.traffic-file-section:is([data-traffic-file-mode=reading],[data-traffic-file-mode=static]) .traffic-file-section__steps a { color: var(--traffic-file-ink); font-size: .875rem; }
@media(prefers-reduced-motion:no-preference) {
  .traffic-file-section[data-traffic-file-mode=reading] .traffic-file-reading { display: block; position: relative; z-index: 5; background: var(--background); padding: 20px 0 14px; margin-bottom: 1.5rem; }
  .traffic-file-reading__folder { position: relative; width: min(calc(100% - 24px),310px); margin: 16px auto 0; padding: 10px; border: 1px solid var(--traffic-file-line); border-radius: 4px 12px 12px 12px; background: color-mix(in srgb,var(--traffic-yellow) 22%,var(--traffic-file-paper-alt)); box-shadow: 0 8px 20px #0002; }
  .traffic-file-reading__tabs { position: absolute; bottom: 100%; left: 10px; right: 10px; display: grid; grid-template-columns: repeat(6,minmax(0,1fr)); gap: 4px; }
  .traffic-file-reading__tabs span { padding: 6px 0; text-align: center; border: 1px solid var(--traffic-file-line); border-bottom: 0; border-radius: 6px 6px 0 0; background: var(--traffic-file-paper-alt); color: var(--traffic-file-ink); font-size: .75rem; }
  .traffic-file-reading__tabs span.is-active { background: var(--traffic-yellow); color: var(--traffic-yellow-ink); }
  .traffic-file-reading__papers { position: relative; height: 170px; }
  .traffic-file-reading__paper { position: absolute; inset: 0; padding: 16px; border: 1px solid var(--traffic-file-line); border-radius: 3px 10px 10px 3px; background: var(--traffic-file-paper); color: var(--traffic-file-ink); box-shadow: 0 4px 10px #0002; transform-origin: left bottom; }
  .traffic-file-reading__paper header { display: flex; justify-content: space-between; gap: 8px; padding-bottom: 10px; border-bottom: 1px solid var(--traffic-file-line); font-size: .75rem; }
  .traffic-file-reading__paper > * { opacity: var(--reading-ink,1); }
  .traffic-file-reading__paper>strong { display: block; margin-top: 14px; font-size: 1.15rem; line-height: 1.15; letter-spacing: -.025em; }
  .traffic-file-reading__paper>p { margin: 8px 0; color: var(--traffic-file-muted); font-size: .8125rem; }
  .traffic-file-reading__paper>div { display: flex; flex-wrap: wrap; gap: 6px; color: var(--traffic-file-muted); font-size: .7rem; }
  .traffic-file-reading>p { margin: 10px 0 0; text-align: center; font-size: .8125rem; line-height: 1.4; color: var(--muted-foreground); }
}
@media(min-height:640px) and (prefers-reduced-motion:no-preference) {
  .traffic-file-section[data-traffic-file-mode=reading] .traffic-file-reading { position: sticky; top: 76px; }
}