/* SCHMIDTWIRKUNG · Startseite V7 · „Packungsbeilage“ (setzt css/v7.css voraus)
   Grundzustand (ohne JS, reduzierte Bewegung): alles im normalen Fluss.
   html.motion schaltet die gepinnte Packungs-Bühne frei (js/start.js).
   Die Engine (scrollcraft.css/.js) bleibt unverändert, hier stehen nur Tokens
   und eigenes Markup. */

/* ============================================================ PACKUNG ==== */
.pack { position: relative; background: var(--red); }
.pack__scene {
  position: relative;
  height: 100vh; height: 100svh; min-height: 36rem;
  overflow: hidden;
  color: #fff;
  isolation: isolate;
}
.pack__ground, .pack__dark { position: absolute; inset: 0; }
.pack__ground { inset: -3%; will-change: transform; }
.pack__ground img { width: 100%; height: 100%; max-width: none; object-fit: cover; filter: brightness(0.88) saturate(1.06); }
.pack__dark {
  z-index: 6; opacity: 0; pointer-events: none;
  background: radial-gradient(120% 90% at 50% 50%, #3A0005 0%, #170002 70%, #0E0001 100%);
}

/* Die Riesenschrift ist auf das Papier gedruckt: Ton in Ton, und leuchtet auf,
   wenn die Kapsel wirkt. */
.pack__print {
  position: absolute; z-index: 1;
  left: 50%; bottom: -1.2vw;
  translate: -50% 0;
  margin: 0;
  font-family: var(--sc-font-display);
  font-size: 25.5vw; line-height: 1;
  letter-spacing: 0;
  white-space: nowrap;
  user-select: none; pointer-events: none;
}
.pack__letters { display: block; }
.pack__letters span { display: inline-block; will-change: transform; }
.pack__letters--tone { color: rgba(84, 0, 4, 0.34); }
.pack__letters--lit { position: absolute; inset: 0; color: #FFF6F2; opacity: 0; }
/* SCHMIDT steht direkt über WIRKUNG, bündig am linken Rand. Nur M, I und T
   sind gedruckt wie WIRKUNG, S, C, H und D stehen nur als Kontur in derselben
   Farbe: MIT WIRKUNG. */
.pack__print--over { left: 0; translate: none; bottom: calc(-1.2vw + 25.5vw * var(--over-k)); --over-k: 0.93; }
.pack__print--over .pack__letters { will-change: transform; }
.pack__print--over .pack__letters span { will-change: auto; }
.pack__letters .is-faint { color: transparent; -webkit-text-stroke: max(1.5px, 0.16vw) transparent; }
.pack__letters--tone .is-faint { -webkit-text-stroke-color: rgba(84, 0, 4, 0.34); }
.pack__letters--lit .is-faint { -webkit-text-stroke-color: #FFF6F2; }

.pack__capsule {
  position: absolute; z-index: 3;
  left: 64%; top: 60%;
  width: 44vw; max-width: none; height: auto;
  translate: -50% -50%;
  will-change: transform;
  /* kein filter: drop-shadow auf der drehenden Kapsel, den müsste die Grafik
     bei jedem Bild neu rechnen; den Schatten liefert .pack__shadow */
}
.pack__shadow {
  position: absolute; z-index: 2;
  left: 62%; top: 66%;
  width: 40vw; height: 9vw;
  translate: -50% -50%;
  rotate: -27deg;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(40, 0, 2, 0.62), rgba(40, 0, 2, 0.28) 55%, transparent 100%);
  will-change: transform, opacity;
}
.pack__near {
  position: absolute; z-index: 5;
  right: -7vw; top: -7vh;
  width: 30vw; max-width: none; height: auto;
  opacity: 0.92;
  rotate: 24deg;
  pointer-events: none;
  will-change: transform;
}

.pack__copy {
  position: absolute; z-index: 7;
  left: var(--gutter); top: calc(var(--bar-h) + 7vh);
  width: min(46rem, 52vw);
}
.pack__title {
  font-family: var(--sc-font-display); font-weight: 400;
  text-transform: uppercase;
  font-size: clamp(2.3rem, 1.2rem + 3.3vw, 4.7rem);
  line-height: var(--lh-anton);
  letter-spacing: 0.004em;
  color: #fff !important;
  text-wrap: balance;
}
.pack__sub {
  margin-top: 1.4rem !important;
  max-width: 40ch;
  font-size: clamp(1.05rem, 0.98rem + 0.3vw, 1.25rem);
  line-height: 1.45; font-weight: 500;
  color: #fff;
}
.pack__copy .btn { margin-top: 2rem; }
.pack__line { display: none; }

/* Zettel im Grundzustand: aufgefaltet, als Inhaltsverzeichnis auf Papier. */
.pack__sheet {
  position: relative;
  background: var(--paper-bg);
  padding: clamp(3.5rem, 8vw, 6rem) var(--gutter);
}
.pack__paper, .leaflet__shadow { display: none; }
.leaflet {
  width: var(--lf-w); margin: 0 auto;
  box-shadow: 0 2px 4px rgba(40, 10, 0, 0.08), 0 22px 50px -20px rgba(40, 10, 0, 0.3);
}
.lf__back { display: none; }
.lf__front {
  display: flex; align-items: center;
  min-height: var(--lf-h);
  padding: 0.6rem clamp(1rem, 4%, 1.6rem);
  background: var(--paper-hi);
  border-top: 1px dashed rgba(22, 20, 19, 0.16);
  position: relative;
}
.lf--head > .lf__front { border-top: 0; flex-direction: column; align-items: flex-start; justify-content: center; gap: 0.15rem; }
.lf__kicker { font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase; font-weight: 600; color: var(--ink-soft); line-height: 1.2; }
.lf__brand { font-family: var(--sc-font-display); color: var(--red); font-size: clamp(1.4rem, 1.1rem + 1vw, 1.9rem); line-height: 1; }
.lf__meta { font-size: 0.78rem; color: var(--ink-soft); line-height: 1.3; }
.lf__front a { display: flex; align-items: center; gap: clamp(0.8rem, 3%, 1.3rem); width: 100%; min-height: 100%; text-decoration: none; color: var(--ink); }
.lf__n { font-family: var(--sc-font-display); color: var(--red); font-size: 2.2rem; line-height: 1; min-width: 1.1em; }
.lf__t { font-weight: 600; font-size: clamp(0.92rem, 0.86rem + 0.3vw, 1.08rem); line-height: 1.25; text-wrap: balance; }
@media (hover: hover) and (pointer: fine) {
  .lf__front a:hover .lf__t { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
}
.pack__hint { margin: 1.5rem auto 0 !important; max-width: var(--lf-w); text-align: center; font-size: 0.85rem; color: var(--ink-soft); }

/* ------------------------------------------- Bewegung: die gepinnte Bühne -- */
html.motion .pack { background: #120001; }
html.motion .pack__stage { perspective: 1700px; perspective-origin: 50% 40%; background: #120001; }
html.motion .pack__scene { position: absolute; inset: 0; height: auto; min-height: 0; }
html.motion .pack__sheet { position: absolute; inset: 0; padding: 0; background: transparent; pointer-events: none; transform-style: preserve-3d; }
html.motion .pack__paper { display: block; position: absolute; inset: 0; background: var(--paper-bg); opacity: 0; }
html.motion .pack__line {
  display: block;
  position: absolute; z-index: 8; left: 0; right: 0; top: 50%;
  translate: 0 -50%;
  margin: 0;
  text-align: center;
  font-family: var(--sc-font-display);
  text-transform: uppercase;
  font-size: clamp(2rem, 1rem + 4vw, 5rem);
  line-height: 1;
  color: #fff;
  pointer-events: none;
}
html.motion .pack__line span { display: inline-block; opacity: 0; will-change: transform, opacity; }

html.motion .leaflet__shadow {
  display: block; position: absolute; left: 50%; top: 0;
  width: var(--lf-w); height: var(--lf-h);
  margin-left: calc(var(--lf-w) / -2);
  transform-origin: 50% 0;
  /* weicher Schatten als box-shadow statt filter: blur(), wird einmal gerastert */
  background: rgba(10, 0, 0, 0.3);
  box-shadow: 0 0 40px 18px rgba(10, 0, 0, 0.3);
  opacity: 0;
  will-change: transform, opacity;
}
html.motion .leaflet {
  position: absolute; left: 50%; top: 0;
  width: var(--lf-w); height: var(--lf-h);
  margin: 0 0 0 calc(var(--lf-w) / -2);
  transform-style: preserve-3d;
  box-shadow: none;
  opacity: 0;
  will-change: transform, opacity;
}
html.motion .lf {
  position: absolute; left: 0; top: 100%;
  width: 100%; height: var(--lf-h);
  transform-origin: 50% 0;
  transform-style: preserve-3d;
}
html.motion .lf--head { top: 0; }
html.motion .lf__face {
  position: absolute; inset: 0;
  -webkit-backface-visibility: hidden; backface-visibility: hidden;
  min-height: 0;
}
html.motion .lf__back { display: block; transform: rotateX(180deg); background: var(--paper-back); }
html.motion .lf__front { border-top: 0; }
/* Licht: jedes Feld wird dunkler, je weiter es vom Betrachter weg kippt;
   die Falz bekommt eine weiche Kante. */
html.motion .lf__face::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to bottom, rgba(30, 10, 0, 0.16), rgba(30, 10, 0, 0) 22%, rgba(30, 10, 0, 0) 80%, rgba(30, 10, 0, 0.07)), rgba(20, 4, 0, 1);
  background-blend-mode: normal;
  opacity: var(--shade, 0);
}
html.motion .lf__face::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to bottom, rgba(30, 10, 0, 0.12), transparent 18%);
}
html.motion .lf--head > .lf__face::before { display: none; }
html.motion .leaflet:not(.is-open) a { pointer-events: none; }
html.motion .leaflet.is-open { pointer-events: auto; }
html.motion .pack__hint {
  position: absolute; left: 0; right: 0; bottom: 2.6svh;
  margin: 0 auto !important; padding: 0 var(--gutter);
  opacity: 0;
}

/* ---------------------------------------------------- Packung · mobil -- */
@media (max-width: 760px) {
  .pack__copy { width: auto; right: var(--gutter); top: calc(var(--bar-h) + 4.5vh); }
  .pack__title { font-size: clamp(2rem, 1.2rem + 4.2vw, 2.7rem); }
  .pack__sub { font-size: 1.02rem; margin-top: 1rem !important; }
  .pack__copy .btn { margin-top: 1.4rem; }
  .pack__print { bottom: 2.5vh; }
  .pack__print--over { bottom: calc(2.5vh + 25.5vw * var(--over-k)); }
  .pack__capsule { left: 52%; top: 73%; width: 76vw; }
  .pack__shadow { left: 50%; top: 77%; width: 66vw; height: 16vw; }
  .pack__near { display: none; }
  .lf__n { font-size: 1.6rem; }
}
@media (max-width: 760px) and (max-height: 700px) {
  .pack__sub { display: none; }
  .pack__capsule { top: 76%; width: 64vw; }
  .pack__shadow { top: 80%; }
}

/* 1 · Wirkstoff */
/* „Zur Behandlung von“: Liste mit Kapsel-Strich, wie die Listen im Angebot */
.treat__head { margin-top: 0.6rem !important; color: var(--ink); }
.treat { list-style: none; margin: 0.5rem 0 1rem; padding: 0; max-width: 62ch; }
.treat li { position: relative; padding: 0.42rem 0 0.42rem 1.3rem; border-top: 1px solid var(--rule); color: var(--ink-body); }
.treat li:first-child { border-top: 0; }
.treat li::before { content: ""; position: absolute; left: 0; top: 0.95rem; width: 0.62rem; height: 0.32rem; border-radius: 999px; background: var(--red); rotate: -27deg; }
.uses__intro { margin: 0.5rem 0 1.1rem !important; font-size: clamp(1.1rem, 1rem + 0.35vw, 1.25rem); line-height: 1.45; font-weight: 500; color: var(--ink); max-width: 46ch; }
.dose__go { margin-top: 1.4rem !important; }
.uses { margin: 0; display: grid; gap: 0; }
.uses > div { padding: 0.95rem 0; border-top: 1px solid var(--rule); display: grid; grid-template-columns: minmax(10rem, 0.8fr) 1.4fr; gap: 1.25rem; }
.uses > div:last-child { border-bottom: 1px solid var(--rule); }
.uses dt { font-weight: 700; color: var(--ink); }
.uses dd { margin: 0; color: var(--ink-soft); }
.note { margin-top: 2rem !important; font-weight: 600; color: var(--ink) !important; }
/* 2 · Vor der Anwendung */
.contra { list-style: none; margin: 0; padding: 0; max-width: 62ch; }
.contra li { position: relative; padding: 0.55rem 0 0.55rem 1.6rem; }
.contra li::before { content: ""; position: absolute; left: 0; top: 1.2rem; width: 0.85rem; height: 0.42rem; border-radius: 999px; background: var(--red); rotate: -27deg; }
.selftest .ch__sub { margin-bottom: 0.6rem; }
.test {
  display: grid; gap: 0.3rem;
  padding: 1.15rem 0;
  border-top: 1px solid var(--rule);
  text-decoration: none;
}
.test:last-child { border-bottom: 1px solid var(--rule); }
.test__name { font-family: var(--sc-font-display); text-transform: uppercase; font-size: 1.6rem; line-height: var(--lh-anton-s); color: var(--ink); }
.test__what { color: var(--ink-soft); max-width: 46ch; }
.test__go { font-weight: 600; color: var(--red-ink); }
.test__go::after { content: " →"; display: inline-block; transition: transform 160ms var(--ease); }
@media (hover: hover) and (pointer: fine) {
  .test:hover .test__go::after { transform: translateX(4px); }
  .test:hover .test__name { color: var(--red-ink); }
}

/* 3 · Dosierung */
.dose { margin-top: clamp(2.5rem, 5vw, 4rem); }
.dose__intro { margin-top: 0.6rem !important; color: var(--ink-soft); }
.dose__table { width: 100%; border-collapse: collapse; margin-top: 1.5rem; font-variant-numeric: tabular-nums; }
.dose__table thead th { text-align: left; font-size: 0.78rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-soft); font-weight: 600; padding: 0 1rem 0.6rem 0; border-bottom: 1px solid var(--rule-strong); }
.dose__table thead th:last-child, .dose__table td:last-child { text-align: right; padding-right: 0; }
.dose__table th[scope="row"], .dose__table td { padding: 0.85rem 1rem 0.85rem 0; border-bottom: 1px solid var(--rule); vertical-align: baseline; }
.dose__table th[scope="row"] { text-align: left; font-weight: 700; color: var(--ink); width: 30%; }
.dose__table td { color: var(--ink-soft); }
.dose__table td:last-child { font-weight: 700; color: var(--ink); white-space: nowrap; }
.dose__group th { text-transform: uppercase; text-align: left; padding: 1.6rem 0 0.4rem; font-family: var(--sc-font-display); font-weight: 400; font-size: 1.15rem; color: var(--red-ink); border-bottom: 1px solid var(--rule); letter-spacing: 0.01em; }
.dose__free td:last-child { color: var(--red-ink); }
.dose__foot { margin-top: 1rem !important; font-size: 0.9rem; color: var(--ink-soft); }
.dose__foot a { margin-left: 0.75rem; font-weight: 600; color: var(--red-ink); }
@media (max-width: 640px) {
  .dose__table thead { display: none; }
  .dose__table tr:not(.dose__group) { display: grid; grid-template-columns: 1fr auto; column-gap: 1rem; border-bottom: 1px solid var(--rule); padding: 0.8rem 0; }
  .dose__table tr:not(.dose__group) > * { border: 0; padding: 0; width: auto; }
  .dose__table tr:not(.dose__group) td:nth-child(2) { grid-column: 1; grid-row: 2; font-size: 0.92rem; margin-top: 0.2rem; }
  .dose__table tr:not(.dose__group) td:last-child { grid-column: 2; grid-row: 1; }
  .dose__table tr.dose__group { display: block; }
  .dose__group th { display: block; border-bottom: 0; }
}

/* 4 · Nebenwirkungen: die Schiene */
.ch--works { border-top: 0; padding-top: 0; padding-bottom: clamp(1rem, 3vw, 2rem); }
.ch__subhead { font-size: clamp(1.45rem, 1.1rem + 1.4vw, 2.2rem); line-height: 1.1; letter-spacing: -0.018em; }
.works { position: relative; background: transparent; }
.works__stage { display: flex; align-items: center; height: 100vh; height: 100svh; }
.works__rail { gap: clamp(1.5rem, 3vw, 3rem); padding-inline: var(--gutter); align-items: flex-start; }
@media (min-width: 1200px) { .works__rail { padding-left: max(16rem, calc((100vw - 64rem) / 2)); } }
.work { flex: none; width: clamp(17rem, 30vw, 29rem); }
.work a { display: block; text-decoration: none; color: inherit; }
.work img {
  width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover;
  background: var(--paper-back);
  box-shadow: 0 1px 2px rgba(40, 10, 0, 0.1), 0 16px 32px -18px rgba(40, 10, 0, 0.4);
  transition: transform 220ms var(--ease);
}
.work__abb { margin-top: 1rem !important; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-soft); }
.work__name { margin-top: 0.25rem; font-size: 1.35rem; line-height: 1.2; letter-spacing: -0.01em; }
.work__what { font-size: 0.92rem; font-weight: 600; color: var(--red-ink); margin-top: 0.15rem !important; }
.work__effect { margin-top: 0.45rem !important; color: var(--ink-soft); font-size: 0.98rem; max-width: 34ch; }
@media (hover: hover) and (pointer: fine) {
  .work a:hover img { transform: translateY(-4px); }
  .work a:hover .work__name { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
}
.works__end { flex: none; width: clamp(15rem, 22vw, 20rem); align-self: center; display: grid; gap: 1.5rem; justify-items: start; padding-right: var(--gutter); }
.works__end p { font-family: var(--sc-font-display); font-size: clamp(1.8rem, 1.3rem + 1.6vw, 2.6rem); line-height: var(--lh-anton); color: var(--ink); text-transform: uppercase; }
@media (max-width: 700px) { .work { width: 78vw; } }
/* Handy: Leiste zum Wischen, die Seite scrollt normal weiter (js/start.js
   setzt .works--swipe und nimmt die Seitwärtsfahrt heraus). */
.works__swipe { display: none; }
.works--swipe .works__stage {
  display: block; height: auto;
  overflow-x: auto; overflow-y: hidden;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter);
  scrollbar-width: none;
  padding-block: 0.75rem 0.5rem;
}
.works--swipe .works__stage::-webkit-scrollbar { display: none; }
.works--swipe .works__rail { display: flex; width: max-content; }
.works--swipe .work, .works--swipe .works__end { scroll-snap-align: start; }
.works--swipe .works__swipe {
  display: block; margin: 0 0 0.25rem !important; padding-inline: var(--gutter);
  font-size: 0.85rem; font-weight: 600; color: var(--ink-soft);
}

/* Stimmen */
.voices__intro { margin-top: 0.35rem !important; color: var(--ink-soft); font-size: 0.95rem; }
.voices { list-style: none; margin: 1.75rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2.25rem clamp(1.5rem, 3vw, 3rem); }
.voices li { border-top: 2px solid var(--ink); padding-top: 0.9rem; }
.voices .voices__sym { margin: 0 0 0.6rem !important; font-size: 0.74rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--red-ink); }
.voices blockquote { margin: 0; font-size: 1.12rem; line-height: 1.45; font-weight: 500; color: var(--ink); text-wrap: pretty; }
.voices li p { margin-top: 0.7rem !important; font-size: 0.88rem; color: var(--ink-soft); }
@media (max-width: 900px) { .voices { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .voices { grid-template-columns: 1fr; } }

/* 5 · Aufbewahrung */
#aufbewahrung .ch__wrap { max-width: 82rem; }
/* Auswahl: zwölf Kunden groß und ruhig im Raster, Logo und Branche mittig.
   Insgesamt 41, immer zwölf sichtbar (data-page); „Mehr anzeigen“ blättert weiter. */
.clients-top {
  list-style: none; margin: 2.5rem 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(2.5rem, 4.5vw, 3.75rem) clamp(1.5rem, 3vw, 3rem);
}
.clients-top li { display: grid; gap: 1.6rem; align-content: start; justify-items: center; text-align: center; }
.clients-top__logo { display: flex; align-items: center; justify-content: center; width: 100%; height: 5rem; }
.clients-top img {
  width: calc(var(--w) * 1.4); max-width: 100%; height: auto; max-height: 100%;
  object-fit: contain; object-position: center;
  filter: grayscale(1) contrast(1.15); opacity: 0.86; mix-blend-mode: multiply;
  transition: filter 220ms var(--ease), opacity 220ms var(--ease);
}
.clients-top__what { font-size: 0.95rem; line-height: 1.35; color: var(--ink-soft); max-width: 22ch; }
@media (hover: hover) and (pointer: fine) {
  .clients-top li:hover img { filter: none; opacity: 1; }
}
.clients-top .is-faint img { filter: grayscale(1) brightness(0.5) contrast(1.6); }
/* Weiterblättern (js/start.js): Listen mit data-page zeigen n Einträge,
   „Mehr anzeigen“ tauscht sie gegen die nächsten. Ohne JavaScript stehen alle da. */
[data-page] > li.is-off { display: none; }
[data-page] > li > * { transition: opacity 260ms var(--ease), translate 260ms var(--ease); transition-delay: calc(var(--d, 0) * 22ms); }
[data-page].is-out > li > * { opacity: 0; translate: 0 -0.4rem; }
[data-page] > li.is-new > * { animation: kunde-in 460ms var(--ease) both; animation-delay: calc(var(--d, 0) * 40ms); }
[data-page] > li.is-new > :last-child { animation-delay: calc(var(--d, 0) * 40ms + 60ms); }
@keyframes kunde-in { from { opacity: 0; translate: 0 0.6rem; } }
.more { margin: clamp(2.5rem, 5vw, 3.5rem) 0 0 !important; max-width: none !important; text-align: center; }
.more__btn {
  appearance: none; background: none; border: 0; border-bottom: 1px solid currentColor; border-radius: 0;
  padding: 0.4rem 0; cursor: pointer; font: inherit; font-weight: 600; font-size: 1.05rem; color: var(--ink);
  transition: color 180ms var(--ease);
}
.more__btn::after { content: "↻"; display: inline-block; margin-left: 0.45em; transition: rotate 420ms var(--ease); }
.more__btn:active::after { rotate: 180deg; }
@media (hover: hover) and (pointer: fine) {
  .more__btn:hover { color: var(--red-ink); }
  .more__btn:hover::after { rotate: 90deg; }
}
@media (prefers-reduced-motion: reduce) {
  [data-page] > li > *, [data-page] > li.is-new > * { transition: none; animation: none; }
}
@media (max-width: 900px) { .clients-top { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 700px) { .clients-top__logo { height: 3.75rem; } .clients-top img { width: calc(var(--w) * 0.95); } }
.clients__note { margin-top: 2.25rem !important; font-size: 0.85rem; color: var(--ink-soft); max-width: 52ch; }

/* 6 · Inhalt der Packung */
.ingredients { list-style: none; margin: 1rem 0 0; padding: 0; max-width: 34rem; }
.ingredients li { display: grid; grid-template-columns: 4.5rem 1fr; align-items: baseline; padding: 0.5rem 0; border-top: 1px solid var(--rule); }
.ingredients li:last-child { border-bottom: 1px solid var(--rule); }
.ingredients strong { font-family: var(--sc-font-display); font-weight: 400; font-size: 1.45rem; color: var(--red-ink); font-variant-numeric: tabular-nums; }
.maker { margin-top: clamp(2.5rem, 5vw, 4rem); display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem 2rem; max-width: 40rem; font-size: 0.95rem; }
.maker .ch__sub { grid-column: 1 / -1; }
.maker a { color: var(--ink); }
.maker__rev { grid-column: 1 / -1; margin-top: 1.25rem !important; font-size: 0.82rem; color: var(--ink-soft); font-style: italic; }
@media (max-width: 480px) { .maker { grid-template-columns: 1fr; } }

@media (max-width: 900px) {
  .uses > div { grid-template-columns: 1fr; gap: 0.2rem; }
}
@media (prefers-reduced-motion: reduce) {
  .test__go::after, .work img { transition: none; }
}