:root {
  --color-paper: #f6f0e3;
  --color-ink: #171717;
  --color-rule-blue: #6fa6c8;
  --color-marker-red: #d94b3d;
  --color-marker-red-hover: #b83b32;
  --color-sun-yellow: #f4c84a;
  --color-mint: #a9d8b5;
  --color-muted-ink: #5d5a52;
  --color-paper-dark: #e9e0cf;
  --color-white: #fffdf7;

  --font-body: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-display: "Bricolage Grotesque", "Trebuchet MS", sans-serif;

  --text-body: 1.0625rem;
  --text-small: 0.8125rem;
  --text-eyebrow: 0.75rem;
  --text-card-title: clamp(1.1875rem, 2vw, 1.375rem);
  --text-h3: clamp(1.5625rem, 3vw, 1.875rem);
  --text-h2: clamp(2.125rem, 4.5vw, 2.75rem);
  --text-h1: clamp(2.75rem, 6vw, 4.75rem);

  --line-body: 1.6;
  --line-tight: 1.02;
  --line-display: 0.96;

  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-9: 5.5rem;

  --container-max: 75rem;
  --content-max: 46.25rem;
  --annotation-width: 15rem;

  --radius-none: 0;
  --radius-note: 0.125rem;
  --radius-default: 0.1875rem;

  --border-ink: 2px solid var(--color-ink);
  --border-rule: 1px solid color-mix(in srgb, var(--color-rule-blue) 62%, transparent);
  --shadow-note: 4px 5px 0 rgb(23 23 23 / 12%);

  --transition-fast: 180ms ease;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  min-width: 320px;
  scroll-behavior: smooth;
  scroll-padding-top: var(--space-6);
  text-size-adjust: 100%;
}

body {
  min-width: 320px;
  min-height: 100vh;
  margin: 0;
  overflow-x: hidden;
  background-color: var(--color-paper);
  background-image: linear-gradient(
    to bottom,
    transparent 31px,
    rgb(111 166 200 / 16%) 32px
  );
  background-size: 100% 32px;
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: var(--text-body);
  font-weight: 400;
  line-height: var(--line-body);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body:has(.nav-overlay.is-open),
body:has(.menu-open) {
  overflow: hidden;
}

main,
header,
footer,
section,
article,
aside,
nav,
form,
fieldset,
figure {
  min-width: 0;
}

img,
picture,
svg,
canvas,
video,
iframe {
  display: block;
  max-width: 100%;
}

img,
video {
  height: auto;
}

iframe {
  border: 0;
}

button,
input,
select,
textarea {
  color: inherit;
  font: inherit;
}

button,
select {
  cursor: pointer;
}

button {
  border: 0;
}

textarea {
  min-height: 8rem;
  resize: vertical;
}

input,
select,
textarea {
  width: 100%;
  border: 2px solid var(--color-ink);
  border-radius: var(--radius-default);
  background: var(--color-white);
  padding: 0.75rem 0.875rem;
  line-height: 1.35;
}

input::placeholder,
textarea::placeholder {
  color: var(--color-muted-ink);
  opacity: 1;
}

input[type="checkbox"],
input[type="radio"] {
  width: 1.125rem;
  height: 1.125rem;
  margin: 0;
  accent-color: var(--color-marker-red);
}

input[type="file"] {
  padding: var(--space-2);
}

fieldset {
  margin: 0 0 var(--space-5);
  padding: var(--space-5);
  border: var(--border-ink);
}

legend {
  padding-inline: var(--space-2);
  font-family: var(--font-display);
  font-weight: 800;
}

label {
  display: inline-block;
  margin-block-end: var(--space-2);
  font-size: var(--text-small);
  font-weight: 800;
  letter-spacing: 0.02em;
}

button,
input,
select,
textarea,
a {
  -webkit-tap-highlight-color: transparent;
}

a {
  color: inherit;
  overflow-wrap: anywhere;
  text-decoration-line: underline;
  text-decoration-color: var(--color-rule-blue);
  text-decoration-thickness: 0.13em;
  text-underline-offset: 0.18em;
  transition:
    text-decoration-color var(--transition-fast),
    text-underline-offset var(--transition-fast);
}

a:hover {
  text-decoration-color: var(--color-marker-red);
  text-underline-offset: 0.28em;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible {
  outline: 3px solid var(--color-rule-blue);
  outline-offset: 2px;
}

:focus:not(:focus-visible) {
  outline: none;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  margin-block: 0 var(--space-4);
  color: var(--color-ink);
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: -0.035em;
  overflow-wrap: break-word;
  text-wrap: balance;
}

h1 {
  font-size: var(--text-h1);
  line-height: var(--line-display);
}

h2 {
  font-size: var(--text-h2);
  line-height: var(--line-tight);
}

h3 {
  font-size: var(--text-h3);
  line-height: 1.12;
}

h4 {
  font-size: clamp(1.25rem, 2.4vw, 1.5rem);
  line-height: 1.18;
}

h5,
h6 {
  font-size: 1rem;
  line-height: 1.25;
}

p {
  margin-block: 0 var(--space-5);
}

ul,
ol {
  margin-block: 0 var(--space-5);
  padding-inline-start: 1.35rem;
}

ul {
  list-style: none !important;
  padding-inline-start: 0;
}

ol {
  list-style: decimal;
}

.content-list,
.rich-text ul,
.article-content ul {
  display: grid;
  gap: var(--space-2);
}

.content-list > li,
.rich-text ul > li,
.article-content ul > li {
  position: relative;
  padding-inline-start: 1.35rem;
}

.content-list > li::before,
.rich-text ul > li::before,
.article-content ul > li::before {
  position: absolute;
  inset-inline-start: 0;
  color: var(--color-marker-red);
  content: "✦";
  font-weight: 900;
}

blockquote {
  margin: 0 0 var(--space-5);
  border-inline-start: 4px solid var(--color-marker-red);
  padding: var(--space-3) var(--space-4);
  background: rgb(244 200 74 / 24%);
  font-family: var(--font-display);
  font-size: clamp(1.125rem, 2vw, 1.3rem);
  font-weight: 700;
  line-height: 1.35;
}

blockquote > :last-child {
  margin-block-end: 0;
}

figure {
  margin: 0 0 var(--space-5);
}

figcaption {
  margin-block-start: var(--space-2);
  padding: var(--space-2) var(--space-3);
  background: var(--color-paper-dark);
  color: var(--color-muted-ink);
  font-size: var(--text-small);
  line-height: 1.4;
}

hr {
  height: 1px;
  margin-block: var(--space-6);
  border: 0;
  background: var(--color-rule-blue);
}

table {
  width: 100%;
  margin-block: 0 var(--space-5);
  border-collapse: collapse;
  background: var(--color-white);
  font-variant-numeric: tabular-nums;
}

th,
td {
  border: 1px solid var(--color-ink);
  padding: var(--space-3);
  text-align: start;
  vertical-align: top;
}

th {
  background: var(--color-paper-dark);
  font-weight: 800;
}

code,
kbd,
samp {
  border: 1px solid var(--color-ink);
  border-radius: var(--radius-note);
  background: var(--color-paper-dark);
  padding: 0.08em 0.3em;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.9em;
}

pre {
  margin: 0 0 var(--space-5);
  overflow-x: auto;
  border: var(--border-ink);
  background: var(--color-ink);
  color: var(--color-white);
  padding: var(--space-4);
}

pre code {
  border: 0;
  background: transparent;
  padding: 0;
  color: inherit;
}

small {
  font-size: var(--text-small);
}

strong,
b {
  font-weight: 800;
}

summary {
  cursor: pointer;
}

summary::marker {
  color: var(--color-marker-red);
}

::selection {
  background: var(--color-sun-yellow);
  color: var(--color-ink);
}

.container {
  width: min(100%, var(--container-max));
  margin-inline: auto;
  padding-inline: var(--space-5);
}

.reading-column {
  width: min(100%, var(--content-max));
}

.section {
  padding-block: var(--space-9);
}

.stack {
  display: flex;
  min-width: 0;
  flex-direction: column;
  align-items: stretch;
  gap: var(--space-4);
}

.cluster {
  display: flex;
  min-width: 0;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
}

.cluster > * {
  min-width: 0;
}

.button-group {
  display: flex;
  min-width: 0;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
}

.button-group > * {
  min-width: 0;
}

.button,
button,
input[type="submit"],
input[type="button"],
input[type="reset"] {
  display: inline-flex;
  min-width: 0;
  min-height: 3rem;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--color-ink);
  border-radius: var(--radius-default);
  padding: 0.75rem 1rem;
  background: var(--color-marker-red);
  color: var(--color-white);
  font-family: var(--font-body);
  font-size: 0.9375rem;
  font-weight: 800;
  line-height: 1;
  text-align: center;
  text-decoration: none;
  transition:
    background-color var(--transition-fast),
    box-shadow var(--transition-fast),
    transform var(--transition-fast);
}

.button:hover,
button:hover,
input[type="submit"]:hover,
input[type="button"]:hover,
input[type="reset"]:hover {
  background: var(--color-marker-red-hover);
  box-shadow: 3px 3px 0 var(--color-ink);
  color: var(--color-white);
  text-decoration: none;
  transform: translate(-1px, -1px);
}

.button:focus-visible,
button:focus-visible,
input[type="submit"]:focus-visible,
input[type="button"]:focus-visible,
input[type="reset"]:focus-visible {
  outline: 3px solid var(--color-rule-blue);
  outline-offset: 2px;
}

.button--secondary {
  background: var(--color-sun-yellow);
  color: var(--color-ink);
}

.button--secondary:hover {
  background: #e7b838;
  color: var(--color-ink);
}

.button--paper {
  background: var(--color-paper);
  color: var(--color-ink);
}

.button--paper:hover {
  background: var(--color-paper-dark);
  color: var(--color-ink);
}

.card,
.panel {
  min-width: 0;
  border: var(--border-ink);
  border-radius: var(--radius-default);
  background: var(--color-paper-dark);
  padding: var(--space-5);
}

.card {
  transition:
    box-shadow var(--transition-fast),
    transform var(--transition-fast);
}

.card:hover {
  box-shadow: var(--shadow-note);
  transform: translateY(-2px) rotate(0.25deg);
}

.card > :last-child,
.panel > :last-child,
.stack > :last-child,
.callout > :last-child {
  margin-block-end: 0;
}

.callout {
  min-width: 0;
  border: var(--border-ink);
  border-radius: var(--radius-note);
  background: var(--color-sun-yellow);
  box-shadow: var(--shadow-note);
  padding: var(--space-5);
}

.callout--mint {
  background: var(--color-mint);
}

.callout--paper {
  background: var(--color-paper-dark);
}

.eyebrow,
.meta {
  display: block;
  color: var(--color-muted-ink);
  font-size: var(--text-eyebrow);
  font-weight: 800;
  letter-spacing: 0.08em;
  line-height: 1.2;
  text-transform: uppercase;
}

.meta {
  font-size: var(--text-small);
  letter-spacing: 0.04em;
  line-height: 1.35;
  text-transform: none;
}

.media-frame {
  overflow: hidden;
  border: var(--border-ink);
  border-radius: var(--radius-note);
  background: var(--color-paper-dark);
}

.media-frame > img,
.media-frame > video,
.media-frame > picture > img {
  width: 100%;
  object-fit: cover;
}

.nav-toggle {
  display: inline-flex;
  min-width: 44px;
  min-height: 44px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  border: 2px solid var(--color-ink);
  border-radius: var(--radius-default);
  background: var(--color-paper);
  color: var(--color-ink);
  padding: 0.5rem;
}

.nav-toggle:hover {
  background: var(--color-sun-yellow);
  color: var(--color-ink);
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  clip-path: inset(50%);
  margin: -1px;
  border: 0;
  padding: 0;
  white-space: nowrap;
}

@media (max-width: 59.9375rem) {
  :root {
    --space-9: 4rem;
  }

  .container {
    padding-inline: 1.25rem;
  }

  .section {
    padding-block: var(--space-8);
  }
}

@media (max-width: 44.9375rem) {
  :root {
    --text-body: 1rem;
    --space-9: 3rem;
  }

  html {
    scroll-padding-top: var(--space-5);
  }

  body {
    background-size: 100% 32px;
  }

  .container {
    padding-inline: var(--space-4);
  }

  .section {
    padding-block: var(--space-7);
  }

  .button-group {
    align-items: stretch;
  }

  .button-group > .button,
  .button-group > button,
  .button-group > input[type="submit"],
  .button-group > input[type="button"],
  .button-group > input[type="reset"] {
    width: 100%;
  }

  .card,
  .panel,
  .callout {
    padding: var(--space-4);
  }

  table {
    display: block;
    overflow-x: auto;
    white-space: nowrap;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }

  .card:hover,
  .button:hover,
  button:hover,
  input[type="submit"]:hover,
  input[type="button"]:hover,
  input[type="reset"]:hover {
    transform: none;
  }
}


.site-header {
  position: relative;
  z-index: 1100;
  border-bottom: 1px solid var(--color-rule-blue);
  background: var(--color-paper);
}

.site-header__inner {
  display: flex;
  width: min(100%, var(--container-max));
  min-height: 4.75rem;
  align-items: center;
  gap: var(--space-4);
  margin-inline: auto;
  padding: var(--space-3) var(--space-5);
}

.site-header__brand {
  display: flex;
  min-width: 0;
  flex: 0 1 auto;
  align-items: center;
  gap: var(--space-3);
  color: var(--color-ink);
  text-decoration: none;
}

.site-header__brand:hover {
  color: var(--color-ink);
}

.site-header__logo {
  width: 3rem;
  height: 3rem;
  flex: 0 0 3rem;
  object-fit: contain;
}

.site-header__brand-copy {
  display: grid;
  min-width: 0;
  gap: 0.1rem;
}

.site-header__brand-name {
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1;
  white-space: nowrap;
}

.site-header__descriptor {
  color: var(--color-muted-ink);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  line-height: 1.15;
  white-space: nowrap;
}

.site-header__nav {
  min-width: 0;
  margin-left: auto;
}

.site-header__list {
  display: flex;
  align-items: center;
  gap: clamp(0.6rem, 1.2vw, 1.1rem);
  margin: 0;
  padding: 0;
  list-style: none !important;
}

.site-header__list li,
.site-header__list li + li {
  display: flex;
  align-items: center;
  margin: 0;
  padding: 0;
}

.site-header__list a {
  display: inline-flex;
  min-height: 2.75rem;
  align-items: center;
  color: var(--color-ink);
  font-size: 0.875rem;
  font-weight: 800;
  line-height: 1;
  text-decoration-thickness: 2px;
  white-space: nowrap;
}

.site-header__list a[aria-current="page"] {
  text-decoration-color: var(--color-marker-red);
  text-decoration-thickness: 3px;
}

.site-header__actions {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: var(--space-3);
}

.site-header__cta.button {
  min-height: 2.75rem;
  padding-inline: 0.8rem;
  font-size: 0.8125rem;
  white-space: nowrap;
}

.site-header__toggle {
  display: none;
  flex-direction: column;
  background: var(--color-paper);
}

.site-header__toggle-line {
  display: block;
  width: 1.35rem;
  height: 2px;
  background: currentColor;
  transition: transform var(--transition-fast), opacity var(--transition-fast);
}

.site-header__toggle.is-open .site-header__toggle-line:nth-child(1) {
  transform: translateY(6px) rotate(45deg);
}

.site-header__toggle.is-open .site-header__toggle-line:nth-child(2) {
  opacity: 0;
}

.site-header__toggle.is-open .site-header__toggle-line:nth-child(3) {
  transform: translateY(-6px) rotate(-45deg);
}

@media (max-width: 67.5rem) {
  .site-header__inner {
    min-height: 4.25rem;
  }

  .site-header__toggle {
    display: inline-flex;
    margin-left: auto;
  }

  .site-header__cta {
    display: none;
  }

  .site-header__nav {
    position: fixed;
    z-index: 1090;
    inset: 0;
    display: grid;
    align-content: start;
    overflow-y: auto;
    visibility: hidden;
    background: var(--color-paper);
    opacity: 0;
    padding: calc(4.25rem + var(--space-4)) var(--space-5) var(--space-6);
    pointer-events: none;
    transition: opacity var(--transition-fast), visibility var(--transition-fast);
  }

  .site-header__nav.is-open {
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
  }

  .site-header__list {
    display: grid;
    width: min(100%, 34rem);
    gap: 0;
    margin-inline: auto;
    border-top: var(--border-ink);
  }

  .site-header__list li,
  .site-header__list li + li {
    display: block;
    border-bottom: var(--border-ink);
  }

  .site-header__list a {
    min-height: 3.5rem;
    width: 100%;
    font-family: var(--font-display);
    font-size: 1.35rem;
    text-decoration: none;
  }

  .site-header__toggle {
    position: relative;
    z-index: 1101;
  }
}

@media (max-width: 44.9375rem) {
  .site-header__inner {
    min-height: 4rem;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-4);
  }

  .site-header__logo {
    width: 2.4rem;
    height: 2.4rem;
    flex-basis: 2.4rem;
  }

  .site-header__brand {
    gap: var(--space-2);
  }

  .site-header__brand-name {
    font-size: 1.16rem;
  }

  .site-header__descriptor {
    display: none;
  }

  .site-header__nav {
    padding: calc(4rem + var(--space-4)) var(--space-4) var(--space-5);
  }
}

@media (prefers-reduced-motion: reduce) {
  .site-header__nav,
  .site-header__toggle-line {
    transition: none;
  }
}


.site-footer {
  margin-top: var(--space-8);
  border-top: 2px solid var(--color-ink);
  background: var(--color-ink);
  color: var(--color-white);
}

.site-footer a {
  color: var(--color-white);
  text-decoration-color: var(--color-rule-blue);
}

.site-footer a:hover {
  text-decoration-color: var(--color-sun-yellow);
}

.site-footer__inner {
  width: min(100%, var(--container-max));
  margin-inline: auto;
  padding: var(--space-7) var(--space-5) var(--space-5);
}

.site-footer__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) repeat(2, minmax(10rem, 1fr));
  gap: var(--space-6) var(--space-7);
}

.site-footer__brand,
.site-footer__column {
  min-width: 0;
}

.site-footer__brand-title,
.site-footer__heading {
  margin: 0;
  color: var(--color-white);
  font-family: var(--font-display);
  font-weight: 800;
  line-height: 1.1;
}

.site-footer__brand-title {
  font-size: 1.75rem;
}

.site-footer__heading {
  font-size: 1rem;
}

.site-footer__copy,
.site-footer__disclaimer {
  margin: var(--space-3) 0 0;
  color: rgb(255 253 247 / 84%);
  font-size: 0.9375rem;
  line-height: 1.55;
}

.site-footer__disclaimer {
  border-left: 3px solid var(--color-sun-yellow);
  padding-left: var(--space-3);
}

.site-footer__cta {
  margin-top: var(--space-4);
}

.site-footer__cta.button {
  width: fit-content;
  background: var(--color-marker-red);
}

.site-footer__cta.button:hover {
  background: var(--color-marker-red-hover);
}

.site-footer__list {
  display: grid;
  gap: var(--space-2);
  margin: var(--space-3) 0 0;
  padding: 0;
}

.site-footer__list li,
.site-footer__list li + li {
  margin: 0;
  padding: 0;
}

.site-footer__list a {
  font-size: 0.9375rem;
}

.site-footer__bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-3);
  margin-top: var(--space-6);
  border-top: 1px solid rgb(255 253 247 / 32%);
  padding-top: var(--space-4);
  color: rgb(255 253 247 / 76%);
  font-size: var(--text-small);
}

.site-consent {
  position: fixed;
  z-index: 1200;
  right: max(var(--space-4), env(safe-area-inset-right));
  bottom: max(var(--space-4), env(safe-area-inset-bottom));
  width: min(30rem, calc(100% - 2rem));
  border: var(--border-ink);
  background: var(--color-paper-dark);
  box-shadow: var(--shadow-note);
  padding: var(--space-4);
  transition: opacity var(--transition-fast), transform var(--transition-fast), visibility var(--transition-fast);
}

.site-consent[hidden],
.site-consent.is-hidden {
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  transform: translateY(1rem);
}

.site-consent__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 800;
  line-height: 1.15;
}

.site-consent__copy {
  margin: var(--space-2) 0 0;
  color: var(--color-muted-ink);
  font-size: 0.9375rem;
  line-height: 1.5;
}

.site-consent__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-4);
}

.site-consent__actions .button {
  min-height: 2.75rem;
}

@media (max-width: 44.9375rem) {
  .site-footer__inner {
    padding: var(--space-6) var(--space-4) var(--space-4);
  }

  .site-footer__grid {
    grid-template-columns: 1fr;
    gap: var(--space-5);
  }

  .site-footer__cta.button,
  .site-consent__actions .button {
    width: 100%;
  }

  .site-consent__actions {
    align-items: stretch;
  }
}


.cookies-page {
  overflow: hidden;
}

.cookies-page__opening-layout {
  display: grid;
  grid-template-columns: minmax(0, 46.25rem) minmax(0, 1fr);
  gap: var(--space-6);
  align-items: start;
}

.cookies-page__opening-layout > * {
  min-width: 0;
}

.cookies-page__title-column {
  width: min(100%, 46.25rem);
  min-width: 0;
}

.cookies-page__title-column h1 {
  position: relative;
  width: fit-content;
  max-width: 100%;
  margin-block-end: var(--space-5);
}

.cookies-page__title-column h1::after {
  position: absolute;
  right: 0;
  bottom: -0.48rem;
  left: 0.06em;
  height: 0.42rem;
  background: var(--color-marker-red);
  clip-path: polygon(0 30%, 18% 4%, 43% 24%, 71% 0, 100% 34%, 94% 86%, 65% 69%, 35% 100%, 8% 74%);
  content: "";
}

.cookies-page__lead {
  width: min(100%, 38.75rem);
  margin-block-end: var(--space-6);
}

.cookies-page__status-note,
.cookies-page__scope-card,
.cookies-page__browser-callout,
.cookies-page__update-note {
  display: flex;
  width: min(100%, 40rem);
  min-width: 0;
  flex-direction: column;
  align-items: stretch;
  gap: var(--space-3);
  border: var(--border-ink);
  border-radius: var(--radius-note);
  padding: var(--space-5);
}

.cookies-page__status-note {
  width: min(100%, 40rem);
  background: var(--color-sun-yellow);
  box-shadow: var(--shadow-note);
}

.cookies-page__status-note > p,
.cookies-page__scope-card > p,
.cookies-page__browser-callout > p,
.cookies-page__update-note > p {
  margin: 0;
}

.cookies-page__note-label,
.cookies-page__category-label,
.cookies-page__scenario-label {
  display: block;
  color: var(--color-ink);
  font-size: var(--text-eyebrow);
  font-weight: 800;
  letter-spacing: 0.08em;
  line-height: 1.2;
  text-transform: uppercase;
}

.cookies-page__route-mark {
  position: relative;
  width: 100%;
  min-width: 0;
  min-height: 17rem;
  opacity: 0.56;
}

.cookies-page__route-mark::before,
.cookies-page__route-mark::after {
  position: absolute;
  content: "";
}

.cookies-page__route-mark::before {
  top: 4.8rem;
  left: 12%;
  width: 78%;
  height: 8rem;
  border-top: 2px solid var(--color-rule-blue);
  border-right: 2px solid var(--color-rule-blue);
  border-radius: 0 100% 0 0;
  transform: rotate(-11deg);
}

.cookies-page__route-mark::after {
  top: 9.2rem;
  left: 42%;
  width: 2.8rem;
  height: 2.8rem;
  border: 2px solid var(--color-ink);
  border-radius: 50%;
  box-shadow: -1.65rem 1.1rem 0 -0.75rem var(--color-sun-yellow);
}

.cookies-page__definition-copy {
  width: min(100%, 45rem);
  min-width: 0;
}

.cookies-page__definition-copy h2 span {
  position: relative;
  display: inline-block;
}

.cookies-page__definition-copy h2 span::after {
  position: absolute;
  right: 0;
  bottom: -0.18rem;
  left: 0;
  height: 0.16rem;
  background: var(--color-rule-blue);
  transform: rotate(-1deg);
  content: "";
}

.cookies-page__scope-card {
  width: min(100%, 35rem);
  margin-block-start: var(--space-6);
  background: var(--color-paper-dark);
}

.cookies-page__categories-copy {
  width: min(100%, 46.25rem);
  min-width: 0;
}

.cookies-page__categories-intro {
  width: min(100%, 43.75rem);
}

.cookies-page__category-list {
  display: grid;
  width: 100%;
  min-width: 0;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-4);
}

.cookies-page__category-list > * {
  width: 100%;
  min-width: 0;
}

.cookies-page__category-card {
  display: grid;
  grid-template-columns: 2.25rem minmax(0, 1fr);
  gap: var(--space-3);
  width: 100%;
  min-width: 0;
  border: var(--border-ink);
  border-radius: var(--radius-default);
  padding: var(--space-5);
}

.cookies-page__category-card--essential {
  background: var(--color-paper-dark);
}

.cookies-page__category-card--functional {
  background: var(--color-mint);
}

.cookies-page__category-card--optional {
  background: var(--color-sun-yellow);
}

.cookies-page__category-symbol {
  display: flex;
  width: 2.25rem;
  min-width: 0;
  height: 2.25rem;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--color-ink);
  border-radius: 50%;
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 800;
  line-height: 1;
}

.cookies-page__category-content {
  display: flex;
  min-width: 0;
  flex-direction: column;
  align-items: stretch;
  gap: var(--space-3);
}

.cookies-page__category-content > * {
  width: min(100%, 38.75rem);
  min-width: 0;
  margin: 0;
}

.cookies-page__category-content h3 {
  font-size: var(--text-card-title);
}

.cookies-page__optional-note {
  border-top: 1px solid var(--color-ink);
  padding-top: var(--space-3);
  font-size: 0.95em;
  font-weight: 700;
}

.cookies-page__management-copy {
  width: min(100%, 43.75rem);
  min-width: 0;
}

.cookies-page__steps {
  display: grid;
  width: 100%;
  min-width: 0;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-4);
  margin-block: var(--space-6);
  padding: 0;
  list-style: none;
}

.cookies-page__steps > li {
  display: grid;
  width: 100%;
  min-width: 0;
  grid-template-columns: 2.5rem minmax(0, 1fr);
  gap: var(--space-3);
  align-items: start;
}

.cookies-page__step-number {
  display: flex;
  width: 2.5rem;
  min-width: 0;
  height: 2.5rem;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--color-ink);
  border-radius: 50%;
  background: var(--color-paper);
  color: var(--color-marker-red);
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-weight: 800;
  line-height: 1;
  transform: rotate(-5deg);
}

.cookies-page__step-content {
  display: flex;
  min-width: 0;
  flex-direction: column;
  align-items: stretch;
  gap: var(--space-2);
}

.cookies-page__step-content > * {
  width: 100%;
  min-width: 0;
  margin: 0;
}

.cookies-page__step-content h3 {
  font-size: var(--text-card-title);
}

.cookies-page__browser-callout {
  width: min(100%, 37.5rem);
  background: var(--color-paper-dark);
}

.cookies-page__limits-copy {
  width: min(100%, 42.5rem);
  min-width: 0;
}

.cookies-page__limits-copy > p {
  position: relative;
}

.cookies-page__limits-copy > p::after {
  display: block;
  width: 10rem;
  height: 0.16rem;
  margin-top: var(--space-3);
  background: var(--color-rule-blue);
  transform: rotate(-1deg);
  content: "";
}

.cookies-page__scenario-list {
  display: grid;
  width: 100%;
  min-width: 0;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-4);
}

.cookies-page__scenario-list > * {
  width: 100%;
  min-width: 0;
}

.cookies-page__scenario {
  display: flex;
  min-width: 0;
  flex-direction: column;
  align-items: stretch;
  gap: var(--space-3);
  border-inline-start: 4px solid var(--color-ink);
  padding: var(--space-4) var(--space-5);
}

.cookies-page__scenario--essential {
  background: var(--color-paper-dark);
}

.cookies-page__scenario--optional {
  background: var(--color-mint);
}

.cookies-page__scenario p {
  width: 100%;
  min-width: 0;
  margin: 0;
}

.cookies-page__updates-copy {
  width: min(100%, 42.5rem);
  min-width: 0;
}

.cookies-page__update-note {
  width: min(100%, 36.25rem);
  margin-block-start: var(--space-6);
  background: var(--color-sun-yellow);
  box-shadow: var(--shadow-note);
}

.cookies-page__closing {
  padding-top: var(--space-7);
}

.cookies-page__closing-copy {
  display: flex;
  width: min(100%, 38.75rem);
  min-width: 0;
  flex-direction: column;
  align-items: stretch;
  gap: var(--space-3);
  border-top: 2px solid var(--color-ink);
  padding-top: var(--space-4);
}

.cookies-page__closing-copy > * {
  width: 100%;
  min-width: 0;
  margin: 0;
}

.cookies-page__closing-copy p {
  color: var(--color-muted-ink);
}

@media (max-width: 59.9375rem) {
  .cookies-page__opening-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .cookies-page__route-mark {
    display: none;
  }
}

@media (max-width: 44.9375rem) {
  .cookies-page__status-note,
  .cookies-page__scope-card,
  .cookies-page__browser-callout,
  .cookies-page__update-note,
  .cookies-page__category-card {
    padding: var(--space-4);
  }

  .cookies-page__title-column h1 {
    font-size: clamp(2.5rem, 12vw, 3.1rem);
  }

  .cookies-page__category-card {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-3);
  }

  .cookies-page__category-symbol {
    width: 2.1rem;
    height: 2.1rem;
  }

  .cookies-page__scenario {
    padding: var(--space-4);
  }
}

@media (max-width: 29.9375rem) {
  .cookies-page__steps > li {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-2);
  }

  .cookies-page__step-number {
    width: 2.3rem;
    height: 2.3rem;
  }
}


.regulamin-page {
  position: relative;
  min-width: 0;
  padding-block-end: var(--space-8);
}

.regulamin-page .container {
  width: min(100%, var(--container-max));
}

.regulamin-hero {
  padding-block: var(--space-9) var(--space-7);
}

.regulamin-hero__layout {
  display: grid;
  grid-template-columns: minmax(0, 46.25rem) minmax(0, 1fr);
  gap: var(--space-6);
  align-items: start;
}

.regulamin-hero__copy,
.regulamin-hero__space {
  min-width: 0;
}

.regulamin-hero__copy {
  width: min(100%, 46.25rem);
}

.regulamin-hero__lead {
  max-width: 38.75rem;
}

.regulamin-hero__meta {
  display: flex;
  width: min(100%, 31.25rem);
  min-width: 0;
  align-items: flex-start;
  gap: var(--space-2);
  margin-block-end: 0;
  color: var(--color-muted-ink);
  font-size: var(--text-small);
  font-weight: 700;
  line-height: 1.45;
}

.regulamin-hero__meta-mark {
  width: 0.9rem;
  min-width: 0.9rem;
  height: 0.9rem;
  margin-block-start: 0.18rem;
  border: 2px solid var(--color-ink);
  background: var(--color-rule-blue);
  transform: rotate(12deg);
}

.regulamin-notice-section {
  padding-block: 0 var(--space-7);
}

.regulamin-independence {
  position: relative;
  width: min(100%, 46.25rem);
  min-width: 0;
  border: var(--border-ink);
  border-radius: var(--radius-note);
  background: var(--color-sun-yellow);
  box-shadow: var(--shadow-note);
  padding: var(--space-5);
}

.regulamin-independence::after {
  position: absolute;
  inset-block-start: -2px;
  inset-inline-end: 1.25rem;
  width: 2.75rem;
  height: 0.45rem;
  background: rgb(255 253 247 / 72%);
  content: "";
  transform: rotate(-4deg);
}

.regulamin-independence__label {
  display: inline-block;
  margin-block-end: var(--space-3);
  border: 2px solid var(--color-ink);
  background: var(--color-marker-red);
  color: var(--color-white);
  padding: 0.24rem 0.48rem;
  font-size: var(--text-eyebrow);
  font-weight: 800;
  letter-spacing: 0.08em;
  line-height: 1;
  text-transform: uppercase;
}

.regulamin-independence p {
  margin-block-end: 0;
}

.regulamin-section {
  padding-block: var(--space-9);
}

.regulamin-section h2 {
  width: min(100%, 46.25rem);
  margin-block-end: var(--space-6);
}

.regulamin-clause {
  width: 100%;
  min-width: 0;
}

.regulamin-clause + .regulamin-clause {
  margin-block-start: var(--space-6);
}

.regulamin-clause h3 {
  width: fit-content;
  max-width: 100%;
  margin-block-end: var(--space-4);
  padding-block-end: var(--space-2);
  border-block-end: 2px solid var(--color-rule-blue);
}

.regulamin-clause p {
  max-width: 42.5rem;
}

.regulamin-numbered-list {
  display: grid;
  gap: var(--space-3);
  width: 100%;
  max-width: 46.25rem;
  margin-block: 0 var(--space-5);
  padding: 0;
  list-style: none;
  counter-reset: clause-item;
}

.regulamin-numbered-list > li {
  display: grid;
  grid-template-columns: 1.7rem minmax(0, 1fr);
  min-width: 0;
  gap: var(--space-2);
  counter-increment: clause-item;
}

.regulamin-numbered-list > li::before {
  display: grid;
  width: 1.7rem;
  min-width: 1.7rem;
  height: 1.7rem;
  place-items: center;
  border: 1px solid var(--color-ink);
  background: var(--color-paper-dark);
  color: var(--color-ink);
  content: counter(clause-item);
  font-size: var(--text-small);
  font-weight: 800;
  line-height: 1;
}

.regulamin-use__layout {
  display: grid;
  grid-template-columns: minmax(38.75rem, 46.25rem) minmax(12.5rem, 15rem);
  gap: var(--space-6);
  align-items: start;
}

.regulamin-use__content,
.regulamin-reading-note {
  min-width: 0;
}

.regulamin-use__content {
  width: 100%;
  max-width: 46.25rem;
}

.regulamin-reading-note {
  width: 100%;
  border: var(--border-ink);
  border-radius: var(--radius-default);
  background: var(--color-paper-dark);
  padding: var(--space-4);
}

.regulamin-reading-note h3 {
  margin-block-end: var(--space-3);
  font-size: 1.25rem;
}

.regulamin-reading-note ul {
  display: grid;
  gap: var(--space-3);
  margin: 0;
  padding: 0;
}

.regulamin-reading-note li {
  display: grid;
  min-width: 0;
  gap: var(--space-1);
  border-inline-start: 3px solid var(--color-rule-blue);
  padding-inline-start: var(--space-2);
  font-size: var(--text-small);
  line-height: 1.4;
}

.regulamin-reading-note li strong,
.regulamin-reading-note li span {
  min-width: 0;
}

.regulamin-editorial-tip {
  display: flex;
  width: min(100%, 42.5rem);
  min-width: 0;
  align-items: flex-start;
  gap: var(--space-3);
  border: var(--border-ink);
  border-radius: var(--radius-note);
  background: var(--color-mint);
  padding: var(--space-4);
}

.regulamin-editorial-tip__mark {
  display: grid;
  width: 1.75rem;
  min-width: 1.75rem;
  height: 1.75rem;
  place-items: center;
  border: 2px solid var(--color-ink);
  font-family: var(--font-display);
  font-weight: 800;
  line-height: 1;
  transform: rotate(-6deg);
}

.regulamin-editorial-tip p {
  width: 100%;
  max-width: none;
  margin: 0;
}

.regulamin-links__content,
.regulamin-rights__content,
.regulamin-liability__content,
.regulamin-final__content {
  width: min(100%, 46.25rem);
  min-width: 0;
}

.regulamin-play-cta {
  display: flex;
  width: 100%;
  min-width: 0;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
  border: var(--border-ink);
  border-radius: var(--radius-default);
  background: var(--color-paper-dark);
  padding: var(--space-5);
}

.regulamin-play-cta__copy,
.regulamin-play-cta__button {
  min-width: 0;
}

.regulamin-play-cta__copy {
  width: min(100%, 26.875rem);
}

.regulamin-play-cta__copy .meta {
  margin-block-end: var(--space-2);
}

.regulamin-play-cta__copy p {
  width: 100%;
  max-width: none;
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.5;
}

.regulamin-play-cta__button {
  width: auto;
  flex: 0 0 auto;
  white-space: nowrap;
}

.regulamin-game-marker {
  margin-block-start: var(--space-6);
  margin-block-end: var(--space-3) !important;
}

.regulamin-game-marker span {
  display: inline-block;
  border-block-end: 2px solid var(--color-rule-blue);
  color: var(--color-muted-ink);
  padding-block-end: 0.2rem;
  font-size: var(--text-small);
  font-weight: 800;
  letter-spacing: 0.04em;
}

.regulamin-practical-note {
  display: flex;
  width: min(100%, 32.5rem);
  min-width: 0;
  align-items: flex-start;
  gap: var(--space-3);
  border: var(--border-ink);
  border-radius: var(--radius-note);
  background: var(--color-mint);
  padding: var(--space-4);
}

.regulamin-practical-note__check {
  display: grid;
  width: 1.7rem;
  min-width: 1.7rem;
  height: 1.7rem;
  place-items: center;
  border: 2px solid var(--color-ink);
  font-family: var(--font-display);
  font-weight: 800;
  line-height: 1;
}

.regulamin-practical-note div {
  width: min(100%, 26rem);
  min-width: 0;
}

.regulamin-practical-note p {
  width: 100%;
  max-width: none;
  margin: var(--space-1) 0 0;
  font-size: 0.9375rem;
  line-height: 1.5;
}

.regulamin-final__rule {
  width: 100%;
  margin-block: var(--space-6);
}

.regulamin-final__closing {
  width: min(100%, 38.75rem) !important;
  margin-block-end: 0;
}

.regulamin-final {
  padding-block-end: var(--space-7);
}

.regulamin-end-section {
  padding-block: 0 var(--space-7);
}

.regulamin-end-stamp {
  display: grid;
  width: min(100%, 32.5rem);
  min-width: 0;
  gap: var(--space-2);
  border: var(--border-ink);
  border-radius: var(--radius-note);
  background: var(--color-paper-dark);
  padding: var(--space-4);
}

.regulamin-end-stamp > * {
  min-width: 0;
}

.regulamin-end-stamp span {
  width: fit-content;
  max-width: 100%;
  border: 2px solid var(--color-ink);
  padding: 0.2rem 0.42rem;
  font-family: var(--font-display);
  font-size: var(--text-small);
  font-weight: 800;
  line-height: 1.1;
  text-transform: uppercase;
  transform: rotate(-1deg);
}

.regulamin-end-stamp p {
  margin: 0;
  font-size: 0.9375rem;
}

.regulamin-page :is(h2, h3) {
  scroll-margin-top: 6rem;
}

@media (max-width: 59.9375rem) {
  .regulamin-hero {
    padding-block: var(--space-8) var(--space-6);
  }

  .regulamin-use__layout {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-5);
  }

  .regulamin-reading-note {
    width: min(100%, 31.25rem);
  }

  .regulamin-section {
    padding-block: var(--space-8);
  }
}

@media (max-width: 44.9375rem) {
  .regulamin-hero {
    padding-block: var(--space-7) var(--space-6);
  }

  .regulamin-hero__layout {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
  }

  .regulamin-hero__space {
    display: none;
  }

  .regulamin-hero__lead,
  .regulamin-hero__meta,
  .regulamin-independence,
  .regulamin-links__content,
  .regulamin-rights__content,
  .regulamin-liability__content,
  .regulamin-final__content {
    width: 100%;
    max-width: none;
  }

  .regulamin-notice-section {
    padding-block-end: var(--space-7);
  }

  .regulamin-independence {
    padding: 1.25rem;
  }

  .regulamin-section {
    padding-block: var(--space-7);
  }

  .regulamin-section h2 {
    width: 100%;
    margin-block-end: var(--space-5);
  }

  .regulamin-clause + .regulamin-clause {
    margin-block-start: var(--space-5);
  }

  .regulamin-clause h3 {
    font-size: 1.5625rem;
  }

  .regulamin-clause p {
    max-width: none;
  }

  .regulamin-numbered-list {
    max-width: none;
  }

  .regulamin-reading-note,
  .regulamin-editorial-tip,
  .regulamin-practical-note,
  .regulamin-end-stamp {
    width: 100%;
    max-width: none;
  }

  .regulamin-play-cta {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-4);
    padding: 1.25rem;
  }

  .regulamin-play-cta__copy,
  .regulamin-play-cta__button {
    width: 100%;
  }

  .regulamin-play-cta__button {
    white-space: normal;
  }

  .regulamin-practical-note div {
    width: 100%;
  }

  .regulamin-final__rule {
    margin-block: var(--space-5);
  }

  .regulamin-final__closing {
    width: 100% !important;
  }

  .regulamin-end-section {
    padding-block-end: var(--space-6);
  }

  .regulamin-page :is(h2, h3) {
    scroll-margin-top: 5rem;
  }
}


.privacy-page {
  min-width: 0;
  background: rgb(246 240 227 / 88%);
}

.privacy-page__section {
  min-width: 0;
  padding-block: var(--space-9);
}

.privacy-page__intro {
  padding-block-start: calc(var(--space-9) + var(--space-3));
  padding-block-end: var(--space-8);
}

.privacy-page__intro-copy,
.privacy-page__reading,
.privacy-page__closing-copy {
  min-width: 0;
  margin-inline: 0;
}

.privacy-page__intro-copy {
  width: min(100%, 46.25rem);
}

.privacy-page__reading {
  width: min(100%, 46.25rem);
}

.privacy-page__intro-copy .eyebrow {
  margin-block-end: var(--space-3);
}

.privacy-page__intro-copy h1 {
  max-width: 20ch;
  margin-block-end: var(--space-3);
}

.privacy-page__title-rule {
  width: min(100%, 12.5rem);
  height: 2px;
  margin-block-end: var(--space-5);
  background: var(--color-rule-blue);
}

.privacy-page__dek {
  width: min(100%, 46.25rem);
  min-width: 0;
}

.privacy-page__dek p:last-child {
  width: min(100%, 41rem);
  color: var(--color-muted-ink);
}

.privacy-page__independence-note {
  width: min(100%, 32.5rem);
  min-width: 0;
  margin-block-start: var(--space-6);
  border-inline-start: 3px solid var(--color-rule-blue);
  padding: var(--space-3) var(--space-4);
  color: var(--color-muted-ink);
  font-size: 0.9375rem;
  line-height: 1.55;
}

.privacy-page__section h2 {
  width: min(100%, 46.25rem);
  margin-block-end: var(--space-5);
  scroll-margin-top: var(--space-8);
}

.privacy-page__section h2 > span {
  display: block;
  margin-block-end: var(--space-2);
  color: var(--color-rule-blue);
  font-family: var(--font-body);
  font-size: var(--text-eyebrow);
  font-weight: 800;
  letter-spacing: 0.08em;
  line-height: 1.2;
}

.privacy-page__section h2::after {
  display: block;
  width: 4.5rem;
  height: 2px;
  margin-block-start: var(--space-3);
  background: var(--color-rule-blue);
  content: "";
}

.privacy-page__data-copy > p:first-of-type {
  width: min(100%, 46.25rem);
}

.privacy-page__marked-list {
  display: grid;
  width: min(100%, 46.25rem);
  min-width: 0;
  gap: var(--space-3);
  margin-block: var(--space-5);
}

.privacy-page__marked-list > li {
  position: relative;
  min-width: 0;
  padding-inline-start: 1.5rem;
}

.privacy-page__marked-list > li::before {
  position: absolute;
  inset-inline-start: 0;
  top: 0.5em;
  width: 0.7rem;
  height: 0.7rem;
  border: 2px solid var(--color-ink);
  background: var(--color-mint);
  content: "";
}

.privacy-page__paper-note,
.privacy-page__retention-note,
.privacy-page__external-note,
.privacy-page__request-note {
  min-width: 0;
  border: var(--border-ink);
  border-radius: var(--radius-note);
  padding: var(--space-5);
}

.privacy-page__paper-note {
  display: flex;
  width: min(100%, 38.75rem);
  flex-direction: column;
  gap: var(--space-3);
  margin-block: var(--space-6);
  background: var(--color-paper-dark);
}

.privacy-page__paper-note > * {
  min-width: 0;
  margin: 0;
}

.privacy-page__paper-note h3,
.privacy-page__retention-note h3,
.privacy-page__external-note h3,
.privacy-page__request-note h3 {
  font-size: var(--text-card-title);
}

.privacy-page__cookies-link {
  position: relative;
  width: min(100%, 46.25rem);
  padding-inline-start: 1.5rem;
}

.privacy-page__cookies-link::before {
  position: absolute;
  inset-inline-start: 0;
  top: 0.45em;
  width: 0.75rem;
  height: 0.75rem;
  border: 2px solid var(--color-ink);
  background: var(--color-paper);
  content: "";
}

.privacy-page__purposes-copy > p {
  width: min(100%, 46.25rem);
}

.privacy-page__purpose-list {
  display: grid;
  width: min(100%, 46.25rem);
  min-width: 0;
  gap: var(--space-5);
  margin-block: var(--space-6) 0;
  padding: 0;
  list-style: none;
}

.privacy-page__purpose-list > li {
  display: flex;
  min-width: 0;
  align-items: flex-start;
  gap: var(--space-3);
}

.privacy-page__purpose-number {
  display: inline-flex;
  width: 2.75rem;
  min-width: 2.75rem;
  min-height: 2.75rem;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--color-ink);
  background: var(--color-paper-dark);
  font-family: var(--font-display);
  font-weight: 800;
  line-height: 1;
}

.privacy-page__purpose-number--mint {
  background: var(--color-mint);
}

.privacy-page__purpose-body {
  width: calc(100% - 3.5rem);
  min-width: 0;
}

.privacy-page__purpose-body h3 {
  margin-block-end: var(--space-2);
  font-size: var(--text-card-title);
}

.privacy-page__purpose-body p {
  margin-block-end: 0;
}

.privacy-page__basis-copy {
  width: min(100%, 43.75rem);
  min-width: 0;
}

.privacy-page__retention-note {
  display: flex;
  width: min(100%, 40rem);
  flex-direction: column;
  gap: var(--space-3);
  margin-block-start: var(--space-6);
  margin-inline-start: var(--space-5);
  background: var(--color-paper-dark);
}

.privacy-page__retention-note > * {
  min-width: 0;
  margin: 0;
}

.privacy-page__retention-rows {
  display: grid;
  min-width: 0;
  border-block: var(--border-rule);
}

.privacy-page__retention-rows > p {
  min-width: 0;
  margin: 0;
  padding-block: var(--space-3);
}

.privacy-page__retention-rows > p + p {
  border-block-start: var(--border-rule);
}

.privacy-page__retention-summary {
  color: var(--color-muted-ink);
  font-size: 0.9375rem;
}

.privacy-page__recipient-text {
  width: min(100%, 42.5rem);
  min-width: 0;
}

.privacy-page__external-note {
  display: flex;
  width: min(100%, 38.75rem);
  flex-direction: column;
  gap: var(--space-3);
  margin-block-start: var(--space-6);
  background: var(--color-sun-yellow);
}

.privacy-page__external-note > * {
  min-width: 0;
  margin: 0;
}

.privacy-page__play-link {
  display: inline-flex;
  width: fit-content;
  min-width: 0;
  min-height: 2.75rem;
  align-items: center;
  color: var(--color-ink);
  font-weight: 800;
  text-decoration-color: var(--color-marker-red);
}

.privacy-page__rights-copy > p:first-of-type {
  width: min(100%, 43.75rem);
}

.privacy-page__rights-list {
  display: grid;
  width: min(100%, 43.75rem);
  min-width: 0;
  gap: var(--space-3);
  margin-block: var(--space-6);
}

.privacy-page__rights-list > li {
  position: relative;
  min-width: 0;
  padding-inline-start: 1.5rem;
}

.privacy-page__rights-list > li::before {
  position: absolute;
  inset-inline-start: 0;
  top: 0.38em;
  color: var(--color-ink);
  content: "✓";
  font-size: 1.15rem;
  font-weight: 900;
  line-height: 1;
}

.privacy-page__request-note {
  display: flex;
  width: min(100%, 40rem);
  flex-direction: column;
  gap: var(--space-3);
  background: var(--color-mint);
}

.privacy-page__request-note > * {
  min-width: 0;
  margin: 0;
}

.privacy-page__closing {
  padding-block-start: var(--space-8);
}

.privacy-page__closing-copy {
  width: min(100%, 42.5rem);
}

.privacy-page__closing-rule {
  width: min(100%, 10rem);
  height: 2px;
  margin-block-end: var(--space-5);
  background: var(--color-rule-blue);
}

.privacy-page__closing-copy h2 {
  width: min(100%, 42.5rem);
}

.privacy-page__status-note {
  position: relative;
  width: min(100%, 42.5rem);
  margin-block-start: var(--space-6);
  margin-block-end: 0;
  padding-block-end: var(--space-2);
  color: var(--color-muted-ink);
}

.privacy-page__status-note::after {
  position: absolute;
  inset-inline-start: 0;
  inset-block-end: 0;
  width: min(100%, 19rem);
  height: 2px;
  background: var(--color-rule-blue);
  content: "";
}

@media (max-width: 59.9375rem) {
  .privacy-page__section {
    padding-block: var(--space-8);
  }

  .privacy-page__intro {
    padding-block-start: var(--space-8);
  }

  .privacy-page__retention-note {
    margin-inline-start: 0;
  }
}

@media (max-width: 44.9375rem) {
  .privacy-page__section {
    padding-block: var(--space-7);
  }

  .privacy-page__intro {
    padding-block-start: var(--space-7);
    padding-block-end: var(--space-7);
  }

  .privacy-page__intro-copy,
  .privacy-page__reading,
  .privacy-page__closing-copy,
  .privacy-page__dek,
  .privacy-page__dek p:last-child,
  .privacy-page__section h2,
  .privacy-page__data-copy > p:first-of-type,
  .privacy-page__cookies-link,
  .privacy-page__purposes-copy > p,
  .privacy-page__basis-copy,
  .privacy-page__recipient-text,
  .privacy-page__rights-copy > p:first-of-type,
  .privacy-page__closing-copy h2,
  .privacy-page__status-note {
    width: 100%;
  }

  .privacy-page__intro-copy h1 {
    max-width: 100%;
    font-size: clamp(2.5rem, 12vw, 2.9rem);
  }

  .privacy-page__paper-note,
  .privacy-page__retention-note,
  .privacy-page__external-note,
  .privacy-page__request-note {
    width: 100%;
    padding: var(--space-5);
  }

  .privacy-page__purpose-list {
    gap: var(--space-5);
  }

  .privacy-page__purpose-list > li {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-2);
  }

  .privacy-page__purpose-number {
    width: fit-content;
    min-width: 2.75rem;
  }

  .privacy-page__purpose-body {
    width: 100%;
  }

  .privacy-page__play-link {
    width: 100%;
  }

  .privacy-page__closing {
    padding-block-start: var(--space-7);
  }
}


.kontakt-page {
  overflow-wrap: anywhere;
}

.kontakt-page .container {
  width: min(100%, var(--container-max));
}

.kontakt-hero__layout {
  display: grid;
  grid-template-columns: minmax(0, 46.25rem) 15rem;
  column-gap: clamp(4rem, 6vw, 5rem);
  align-items: start;
}

.kontakt-hero__copy,
.kontakt-scenarios__content,
.kontakt-form-section__content,
.kontakt-game-boundary__content,
.kontakt-tips__content {
  width: min(100%, 46.25rem);
  min-width: 0;
}

.kontakt-hero__copy {
  display: flex;
  min-width: 0;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-3);
}

.kontakt-hero__copy h1,
.kontakt-hero__copy p,
.kontakt-scope-note h2,
.kontakt-scope-note p,
.kontakt-scenario h3,
.kontakt-scenario p,
.kontakt-form-section__content h2,
.kontakt-form-section__content > p,
.kontakt-game-boundary__content h2,
.kontakt-game-boundary__content > p,
.kontakt-play-card h3,
.kontakt-play-card p,
.kontakt-tips__content h2,
.kontakt-tips__content > p,
.kontakt-tip h3,
.kontakt-tip p,
.kontakt-closing__panel h2,
.kontakt-closing__panel p {
  margin: 0;
}

.kontakt-hero__lead {
  width: min(100%, 41rem);
  font-size: clamp(1rem, 1.35vw, 1.125rem);
}

.kontakt-scope-note {
  position: relative;
  width: 15rem;
  min-width: 0;
  border: var(--border-ink);
  border-radius: var(--radius-note);
  background: var(--color-sun-yellow);
  box-shadow: var(--shadow-note);
  padding: var(--space-5);
  transform: rotate(1.25deg);
}

.kontakt-scope-note__mark {
  display: inline-flex;
  width: 1.75rem;
  height: 1.75rem;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--color-ink);
  border-radius: 50%;
  font-family: var(--font-display);
  font-weight: 800;
  line-height: 1;
}

.kontakt-scope-note h2 {
  margin-top: var(--space-3);
  font-size: 1.35rem;
  line-height: 1.12;
}

.kontakt-scope-note p {
  margin-top: var(--space-3);
  color: var(--color-ink);
  font-size: 0.94rem;
  line-height: 1.5;
}

.kontakt-scenarios__content,
.kontakt-form-section__content,
.kontakt-game-boundary__content,
.kontakt-tips__content {
  display: flex;
  min-width: 0;
  flex-direction: column;
  align-items: stretch;
  gap: var(--space-5);
}

.kontakt-scenarios__intro {
  width: min(100%, 43.75rem);
}

.kontakt-scenarios__list {
  display: flex;
  min-width: 0;
  flex-direction: column;
  align-items: stretch;
  gap: var(--space-4);
}

.kontakt-scenario {
  width: 100%;
  min-width: 0;
  border: var(--border-ink);
  border-radius: var(--radius-default);
  padding: var(--space-5);
  transition: box-shadow var(--transition-fast), transform var(--transition-fast);
}

.kontakt-scenario--paper {
  background: var(--color-paper-dark);
}

.kontakt-scenario--yellow {
  background: var(--color-sun-yellow);
}

.kontakt-scenario:hover {
  box-shadow: var(--shadow-note);
  transform: translateY(-2px) rotate(-0.25deg);
}

.kontakt-scenario__heading {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: var(--space-3);
}

.kontakt-scenario__heading > span {
  flex: 0 0 1.5rem;
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 800;
  text-align: center;
}

.kontakt-scenario__heading h3 {
  min-width: 0;
  font-size: var(--text-card-title);
}

.kontakt-scenario p {
  margin-top: var(--space-3);
  width: 100%;
}

.kontakt-form-section__intro {
  width: min(100%, 40rem);
}

.kontakt-form {
  display: flex;
  min-width: 0;
  flex-direction: column;
  align-items: stretch;
  gap: var(--space-5);
  border: var(--border-ink);
  border-radius: var(--radius-default);
  background: rgb(255 253 247 / 88%);
  padding: var(--space-5);
}

.kontakt-form[hidden] {
  display: none;
}

.kontakt-form__summary {
  width: 100%;
  min-width: 0;
  border: 2px solid var(--color-ink);
  background: var(--color-sun-yellow);
  padding: var(--space-3) var(--space-4);
  font-weight: 800;
}

.kontakt-form__summary[hidden],
.kontakt-status[hidden] {
  display: none;
}

.kontakt-form__pair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-6);
}

.kontakt-form__pair > *,
.kontakt-form__field,
.kontakt-form__consent,
.kontakt-form__actions {
  width: 100%;
  min-width: 0;
}

.kontakt-form__field {
  display: flex;
  min-width: 0;
  flex-direction: column;
  align-items: stretch;
  gap: var(--space-2);
}

.kontakt-form label {
  margin: 0;
}

.kontakt-form input:not([type="checkbox"]),
.kontakt-form textarea {
  min-height: 3rem;
  background: var(--color-white);
}

.kontakt-form textarea {
  min-height: 12rem;
}

.kontakt-form__hint,
.kontakt-form__error {
  margin: 0;
  font-size: var(--text-small);
  line-height: 1.45;
}

.kontakt-form__hint {
  color: var(--color-muted-ink);
}

.kontakt-form__error {
  min-height: 0;
  color: var(--color-ink);
  font-weight: 800;
}

.kontakt-form__error:not(:empty) {
  border-left: 3px solid var(--color-marker-red);
  padding-left: var(--space-2);
}

.kontakt-form .has-error input:not([type="checkbox"]),
.kontakt-form .has-error textarea {
  border-color: var(--color-marker-red);
}

.kontakt-form__consent {
  display: flex;
  min-width: 0;
  flex-direction: column;
  align-items: stretch;
  gap: var(--space-2);
}

.kontakt-form__consent label {
  display: flex;
  min-width: 0;
  align-items: flex-start;
  gap: var(--space-3);
  font-size: 0.9375rem;
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1.5;
}

.kontakt-form__consent input {
  flex: 0 0 1.125rem;
  margin-top: 0.2rem;
}

.kontakt-form__actions {
  display: flex;
  min-width: 0;
  justify-content: flex-start;
}

.kontakt-form__actions button {
  width: auto;
}

.kontakt-form__actions button:disabled {
  cursor: wait;
  opacity: 0.8;
}

.kontakt-status {
  width: 100%;
  min-width: 0;
  border: var(--border-ink);
  background: var(--color-mint);
  padding: var(--space-5);
}

.kontakt-status h3,
.kontakt-status p {
  margin: 0;
}

.kontakt-status p {
  margin-top: var(--space-3);
}

.kontakt-game-boundary__content > p {
  width: min(100%, 42.5rem);
}

.kontakt-game-boundary__note {
  display: flex;
  width: min(100%, 42.5rem);
  min-width: 0;
  flex-direction: column;
  align-items: stretch;
  gap: var(--space-2);
  border-left: 4px solid var(--color-rule-blue);
  background: var(--color-paper-dark);
  padding: var(--space-4);
}

.kontakt-game-boundary__note span {
  color: var(--color-muted-ink);
  font-size: 0.95rem;
}

.kontakt-play-card {
  display: flex;
  width: min(100%, 35rem);
  min-width: 0;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-3);
  border: var(--border-ink);
  border-radius: var(--radius-default);
  background: var(--color-paper-dark);
  padding: var(--space-5);
}

.kontakt-play-card h3 {
  font-size: var(--text-card-title);
}

.kontakt-play-card p {
  width: min(100%, 31rem);
}

.kontakt-play-card__button {
  width: auto;
}

.kontakt-tips__intro {
  width: min(100%, 43.75rem);
}

.kontakt-tips__list {
  display: flex;
  min-width: 0;
  flex-direction: column;
  align-items: stretch;
}

.kontakt-tip {
  display: grid;
  grid-template-columns: 3rem minmax(0, 1fr);
  column-gap: var(--space-4);
  width: 100%;
  min-width: 0;
  border-top: var(--border-rule);
  padding-block: var(--space-5);
}

.kontakt-tip:last-child {
  border-bottom: var(--border-rule);
}

.kontakt-tip__number {
  display: block;
  width: 3rem;
  min-width: 0;
  font-family: var(--font-display);
  font-size: 1.125rem;
  font-weight: 800;
  line-height: 1.2;
}

.kontakt-tip__copy {
  display: flex;
  min-width: 0;
  flex-direction: column;
  align-items: stretch;
  gap: var(--space-3);
}

.kontakt-tip__copy h3 {
  font-size: var(--text-card-title);
}

.kontakt-tip__example {
  border-bottom: 2px solid var(--color-rule-blue);
  padding-bottom: var(--space-2);
  font-style: italic;
}

.kontakt-closing .container {
  display: flex;
  min-width: 0;
  justify-content: center;
}

.kontakt-closing__panel {
  display: flex;
  width: min(100%, 42.5rem);
  min-width: 0;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-4);
  border: var(--border-ink);
  border-radius: var(--radius-default);
  background: var(--color-paper-dark);
  padding: var(--space-6);
}

.kontakt-closing__panel p {
  width: min(100%, 35rem);
}

.kontakt-closing__button {
  align-self: center;
  width: auto;
}

@media (max-width: 59.9375rem) {
  .kontakt-hero__layout {
    grid-template-columns: minmax(0, 46.25rem);
    row-gap: var(--space-5);
  }

  .kontakt-scope-note {
    width: min(100%, 32.5rem);
    transform: none;
  }
}

@media (max-width: 44.9375rem) {
  .kontakt-hero__copy,
  .kontakt-scenarios__content,
  .kontakt-form-section__content,
  .kontakt-game-boundary__content,
  .kontakt-tips__content {
    width: 100%;
  }

  .kontakt-hero__copy h1 {
    font-size: clamp(2.75rem, 13vw, 3.5rem);
    line-height: 1.02;
  }

  .kontakt-scope-note,
  .kontakt-scenario,
  .kontakt-form,
  .kontakt-status,
  .kontakt-play-card,
  .kontakt-closing__panel {
    padding: var(--space-4);
  }

  .kontakt-form__pair {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-5);
  }

  .kontakt-form__actions,
  .kontakt-form__actions button,
  .kontakt-play-card,
  .kontakt-play-card__button,
  .kontakt-closing__button {
    width: 100%;
  }

  .kontakt-play-card__button,
  .kontakt-closing__button {
    min-height: 3rem;
  }

  .kontakt-tip {
    grid-template-columns: minmax(0, 1fr);
    row-gap: var(--space-2);
  }

  .kontakt-tip__number {
    width: auto;
  }

  .kontakt-closing__panel {
    gap: var(--space-4);
  }

  .kontakt-closing__button {
    align-self: stretch;
  }
}

@media (prefers-reduced-motion: reduce) {
  .kontakt-scenario:hover {
    box-shadow: none;
    transform: none;
  }
}


[data-page="wyzwania-tras"] {
  overflow: clip;
}

[data-page="wyzwania-tras"] .wt-section {
  padding-block: var(--space-9);
}

[data-page="wyzwania-tras"] .wt-hero {
  padding-block-start: var(--space-8);
}

[data-page="wyzwania-tras"] .wt-hero__layout,
[data-page="wyzwania-tras"] .wt-editorial-layout,
[data-page="wyzwania-tras"] .wt-analysis-layout,
[data-page="wyzwania-tras"] .wt-finish-layout {
  display: flex;
  min-width: 0;
  align-items: flex-start;
  gap: var(--space-6);
}

[data-page="wyzwania-tras"] .wt-hero__copy {
  display: flex;
  min-width: 0;
  flex: 1 1 58%;
  max-width: 42.5rem;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-4);
}

[data-page="wyzwania-tras"] .wt-hero__copy > *,
[data-page="wyzwania-tras"] .wt-analysis-copy > *,
[data-page="wyzwania-tras"] .wt-finish-copy > *,
[data-page="wyzwania-tras"] .wt-cta-card > * {
  margin-block: 0;
}

[data-page="wyzwania-tras"] .wt-hero h1 {
  max-width: 42.5rem;
}

[data-page="wyzwania-tras"] .wt-hero__lead {
  max-width: 38.125rem;
  font-size: clamp(1rem, 1.4vw, 1.125rem);
}

[data-page="wyzwania-tras"] .wt-independent-note {
  max-width: 32.5rem;
  border-top: var(--border-rule);
  padding-top: var(--space-3);
  color: var(--color-muted-ink);
  font-size: var(--text-small);
  line-height: 1.45;
}

[data-page="wyzwania-tras"] .wt-play-link {
  position: relative;
  min-width: 13.75rem;
}

[data-page="wyzwania-tras"] .wt-play-link::after {
  display: inline-block;
  margin-inline-start: var(--space-2);
  content: "↗";
  font-size: 1.1em;
  transition: transform var(--transition-fast);
}

[data-page="wyzwania-tras"] .wt-play-link:hover::after {
  transform: translate(3px, -2px);
}

[data-page="wyzwania-tras"] .wt-hero__media {
  min-width: 0;
  flex: 1 1 42%;
  min-inline-size: 23.75rem;
  margin-block-start: var(--space-6);
}

[data-page="wyzwania-tras"] .wt-hero__media img {
  aspect-ratio: 16 / 10;
  object-position: center;
}

[data-page="wyzwania-tras"] .wt-section-heading {
  max-width: 43.75rem;
}

[data-page="wyzwania-tras"] .wt-section-heading > :last-child {
  margin-block-end: 0;
}

[data-page="wyzwania-tras"] .wt-editorial-layout {
  gap: var(--space-6);
}

[data-page="wyzwania-tras"] .wt-editorial-main {
  width: min(100%, 46.25rem);
  min-width: 0;
}

[data-page="wyzwania-tras"] .wt-editorial-rail {
  width: 15rem;
  min-width: 0;
  flex: 0 0 15rem;
  margin-block-start: 4.25rem;
}

[data-page="wyzwania-tras"] .wt-observations {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-3);
  margin: 0;
  padding: 0;
  counter-reset: observation;
}

[data-page="wyzwania-tras"] .wt-observations > li {
  min-width: 0;
  border-top: 2px solid var(--color-ink);
  padding-top: var(--space-3);
  counter-increment: observation;
}

[data-page="wyzwania-tras"] .wt-observations > li::before {
  display: block;
  margin-bottom: var(--space-2);
  color: var(--color-marker-red);
  content: "0" counter(observation);
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 800;
  line-height: 1;
}

[data-page="wyzwania-tras"] .wt-observations h3 {
  margin-block-end: var(--space-2);
  font-size: 1.25rem;
}

[data-page="wyzwania-tras"] .wt-observations p {
  margin-block-end: 0;
  font-size: 0.98rem;
}

[data-page="wyzwania-tras"] .wt-note-title {
  margin-block-end: var(--space-3);
  font-size: 1.2rem;
}

[data-page="wyzwania-tras"] .wt-note-quote {
  margin: 0;
  border: 0;
  padding: 0;
  background: transparent;
  font-size: 1.18rem;
}

[data-page="wyzwania-tras"] .wt-transition-copy {
  max-width: 42.5rem;
  margin-block: var(--space-6) 0;
}

[data-page="wyzwania-tras"] .wt-card-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-5);
  margin-top: var(--space-6);
}

[data-page="wyzwania-tras"] .wt-obstacle-card,
[data-page="wyzwania-tras"] .wt-step-card,
[data-page="wyzwania-tras"] .wt-related-card {
  display: flex;
  min-width: 0;
  flex-direction: column;
  align-items: stretch;
  gap: var(--space-3);
}

[data-page="wyzwania-tras"] .wt-obstacle-card > *,
[data-page="wyzwania-tras"] .wt-step-card > *,
[data-page="wyzwania-tras"] .wt-related-card > * {
  margin-block: 0;
}

[data-page="wyzwania-tras"] .wt-obstacle-card:nth-child(2) {
  background: var(--color-mint);
}

[data-page="wyzwania-tras"] .wt-obstacle-card h3,
[data-page="wyzwania-tras"] .wt-step-card h3,
[data-page="wyzwania-tras"] .wt-related-card h3 {
  font-size: var(--text-card-title);
}

[data-page="wyzwania-tras"] .wt-route-sketch {
  position: relative;
  height: 3.75rem;
  overflow: hidden;
  border-bottom: 2px solid var(--color-ink);
}

[data-page="wyzwania-tras"] .wt-route-sketch::before,
[data-page="wyzwania-tras"] .wt-route-sketch::after {
  position: absolute;
  content: "";
}

[data-page="wyzwania-tras"] .wt-route-sketch::before {
  width: 140%;
  height: 2.75rem;
  inset-inline-start: -16%;
  inset-block-end: -1.25rem;
  border: 3px solid var(--color-ink);
  border-radius: 50% 50% 0 0;
  transform: rotate(-5deg);
}

[data-page="wyzwania-tras"] .wt-route-sketch--bumpy::before {
  border-style: dashed;
  transform: rotate(4deg);
}

[data-page="wyzwania-tras"] .wt-route-sketch--drop::before {
  border-color: var(--color-rule-blue);
  transform: rotate(-12deg);
}

[data-page="wyzwania-tras"] .wt-watch-list {
  display: grid;
  gap: var(--space-2);
  margin: 0;
}

[data-page="wyzwania-tras"] .wt-watch-list > li {
  position: relative;
  min-width: 0;
  padding-inline-start: 4.5rem;
  font-size: 0.96rem;
}

[data-page="wyzwania-tras"] .wt-watch-list > li::before {
  position: absolute;
  inset-inline-start: 0;
  color: var(--color-ink);
  content: "obserwuj";
  font-size: var(--text-eyebrow);
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

[data-page="wyzwania-tras"] .wt-analysis-copy {
  display: flex;
  min-width: 0;
  flex: 1 1 52%;
  max-width: 40rem;
  flex-direction: column;
  align-items: stretch;
  gap: var(--space-5);
}

[data-page="wyzwania-tras"] .wt-highlight {
  background: linear-gradient(transparent 58%, rgb(244 200 74 / 72%) 58%);
  font-weight: 800;
}

[data-page="wyzwania-tras"] .wt-method-card {
  display: grid;
  min-width: 0;
  grid-template-columns: 1fr;
  gap: var(--space-3);
  background: var(--color-paper-dark);
}

[data-page="wyzwania-tras"] .wt-method-card > * {
  margin-block: 0;
}

[data-page="wyzwania-tras"] .wt-method-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-3);
  margin: 0;
}

[data-page="wyzwania-tras"] .wt-method-list > li {
  min-width: 0;
  border-top: 1px solid var(--color-rule-blue);
  padding-top: var(--space-2);
  font-size: 0.93rem;
}

[data-page="wyzwania-tras"] .wt-method-list strong {
  display: block;
  margin-bottom: var(--space-1);
}

[data-page="wyzwania-tras"] .wt-analysis-media {
  min-width: 0;
  flex: 1 1 48%;
  min-inline-size: 21.25rem;
}

[data-page="wyzwania-tras"] .wt-analysis-media img {
  aspect-ratio: 4 / 3;
  object-position: 50% 58%;
}

[data-page="wyzwania-tras"] .wt-analysis-media figcaption {
  max-width: 100%;
}

[data-page="wyzwania-tras"] .wt-diagnostic-layout {
  display: flex;
  min-width: 0;
  align-items: flex-start;
  gap: var(--space-6);
}

[data-page="wyzwania-tras"] .wt-diagnostics {
  display: grid;
  width: min(100%, 46.25rem);
  min-width: 0;
  grid-template-columns: 1fr;
  gap: var(--space-4);
}

[data-page="wyzwania-tras"] .wt-diagnostic {
  display: grid;
  min-width: 0;
  grid-template-columns: 7rem minmax(0, 1fr);
  gap: var(--space-4);
  border-top: var(--border-rule);
  padding-top: var(--space-4);
}

[data-page="wyzwania-tras"] .wt-diagnostic > * {
  min-width: 0;
}

[data-page="wyzwania-tras"] .wt-diagnostic h3,
[data-page="wyzwania-tras"] .wt-diagnostic p {
  margin-block: 0;
}

[data-page="wyzwania-tras"] .wt-diagnostic h3 {
  margin-bottom: var(--space-2);
  font-size: 1.35rem;
}

[data-page="wyzwania-tras"] .wt-diagnostic-labels {
  display: grid;
  align-content: start;
  gap: var(--space-2);
}

[data-page="wyzwania-tras"] .wt-diagnostic-labels span {
  display: block;
  border: 1px solid var(--color-ink);
  padding: var(--space-1) var(--space-2);
  font-size: var(--text-eyebrow);
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

[data-page="wyzwania-tras"] .wt-diagnostic-labels span:last-child {
  background: var(--color-paper-dark);
}

[data-page="wyzwania-tras"] .wt-diagnostic--last .wt-diagnostic-copy::after {
  display: inline-block;
  margin-inline-start: var(--space-2);
  color: var(--color-marker-red);
  content: "↗";
  font-weight: 800;
}

[data-page="wyzwania-tras"] .wt-diagnostic-rail {
  width: 15rem;
  min-width: 0;
  flex: 0 0 15rem;
  margin-block-start: 11rem;
}

[data-page="wyzwania-tras"] .wt-diagnostic-note {
  background: var(--color-mint);
}

[data-page="wyzwania-tras"] .wt-diagnostic-note h3,
[data-page="wyzwania-tras"] .wt-diagnostic-note p {
  margin-block: 0;
}

[data-page="wyzwania-tras"] .wt-diagnostic-note h3 {
  margin-bottom: var(--space-3);
  font-size: 1.2rem;
}

[data-page="wyzwania-tras"] .wt-steps-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-4);
  margin-top: var(--space-6);
}

[data-page="wyzwania-tras"] .wt-step-card {
  position: relative;
  background: var(--color-paper-dark);
}

[data-page="wyzwania-tras"] .wt-step-card:nth-child(3) {
  background: var(--color-sun-yellow);
}

[data-page="wyzwania-tras"] .wt-step-number {
  display: inline-flex;
  width: 2.25rem;
  height: 2.25rem;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--color-ink);
  background: var(--color-paper);
  font-family: var(--font-display);
  font-weight: 800;
}

[data-page="wyzwania-tras"] .wt-finish-copy {
  display: flex;
  min-width: 0;
  flex: 1 1 46%;
  max-width: 35rem;
  flex-direction: column;
  align-items: stretch;
  gap: var(--space-5);
}

[data-page="wyzwania-tras"] .wt-finish-media {
  min-width: 0;
  flex: 1 1 54%;
  min-inline-size: 22.5rem;
}

[data-page="wyzwania-tras"] .wt-finish-media img {
  aspect-ratio: 3 / 2;
  object-position: center;
}

[data-page="wyzwania-tras"] .wt-finish-note {
  margin: 0;
  font-size: 1.04rem;
}

[data-page="wyzwania-tras"] .wt-related-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-5);
  margin-top: var(--space-6);
}

[data-page="wyzwania-tras"] .wt-related-card {
  min-height: 100%;
}

[data-page="wyzwania-tras"] .wt-related-card--mint {
  background: var(--color-mint);
}

[data-page="wyzwania-tras"] .wt-related-card--yellow {
  background: var(--color-sun-yellow);
}

[data-page="wyzwania-tras"] .wt-related-card a {
  display: inline-flex;
  width: fit-content;
  min-height: 2.75rem;
  align-items: center;
  font-weight: 800;
}

[data-page="wyzwania-tras"] .wt-cta-card {
  display: flex;
  width: min(100%, 47.5rem);
  min-width: 0;
  margin-inline: auto;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-4);
  background: var(--color-paper-dark);
}

[data-page="wyzwania-tras"] .wt-cta-card h2 {
  max-width: 37.5rem;
}

[data-page="wyzwania-tras"] .wt-cta-card p {
  max-width: 37.5rem;
}

[data-page="wyzwania-tras"] .wt-cta-card .wt-play-link {
  min-width: 13.75rem;
}

[data-page="wyzwania-tras"] .wt-cta-disclaimer {
  width: 100%;
  max-width: 37.5rem;
  border-top: var(--border-rule);
  padding-top: var(--space-3);
  color: var(--color-muted-ink);
  font-size: var(--text-small);
  line-height: 1.45;
}

@media (max-width: 68.6875rem) {
  [data-page="wyzwania-tras"] .wt-steps-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 60rem) {
  [data-page="wyzwania-tras"] .wt-hero__layout,
  [data-page="wyzwania-tras"] .wt-editorial-layout,
  [data-page="wyzwania-tras"] .wt-analysis-layout,
  [data-page="wyzwania-tras"] .wt-diagnostic-layout,
  [data-page="wyzwania-tras"] .wt-finish-layout {
    flex-direction: column;
    gap: var(--space-5);
  }

  [data-page="wyzwania-tras"] .wt-hero__copy,
  [data-page="wyzwania-tras"] .wt-analysis-copy,
  [data-page="wyzwania-tras"] .wt-finish-copy,
  [data-page="wyzwania-tras"] .wt-editorial-main,
  [data-page="wyzwania-tras"] .wt-diagnostics {
    width: 100%;
    max-width: 46.25rem;
    flex-basis: auto;
  }

  [data-page="wyzwania-tras"] .wt-hero__media,
  [data-page="wyzwania-tras"] .wt-analysis-media,
  [data-page="wyzwania-tras"] .wt-finish-media {
    width: 100%;
    min-inline-size: 0;
    margin-block-start: 0;
    flex-basis: auto;
  }

  [data-page="wyzwania-tras"] .wt-editorial-rail,
  [data-page="wyzwania-tras"] .wt-diagnostic-rail {
    width: min(100%, 46.25rem);
    flex: 0 1 auto;
    margin-block-start: 0;
  }

  [data-page="wyzwania-tras"] .wt-card-grid,
  [data-page="wyzwania-tras"] .wt-related-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 56.1875rem) {
  [data-page="wyzwania-tras"] .wt-analysis-layout,
  [data-page="wyzwania-tras"] .wt-finish-layout {
    flex-direction: column;
  }
}

@media (max-width: 38.75rem) {
  [data-page="wyzwania-tras"] .wt-section {
    padding-block: var(--space-7);
  }

  [data-page="wyzwania-tras"] .wt-hero {
    padding-block-start: var(--space-7);
  }

  [data-page="wyzwania-tras"] .wt-hero h1 {
    font-size: clamp(2.75rem, 13vw, 3.375rem);
  }

  [data-page="wyzwania-tras"] .wt-observations,
  [data-page="wyzwania-tras"] .wt-card-grid,
  [data-page="wyzwania-tras"] .wt-related-grid,
  [data-page="wyzwania-tras"] .wt-steps-grid,
  [data-page="wyzwania-tras"] .wt-method-list {
    grid-template-columns: 1fr;
  }

  [data-page="wyzwania-tras"] .wt-observations {
    gap: var(--space-4);
  }

  [data-page="wyzwania-tras"] .wt-diagnostic {
    grid-template-columns: 1fr;
    gap: var(--space-3);
  }

  [data-page="wyzwania-tras"] .wt-diagnostic-labels {
    grid-template-columns: repeat(2, minmax(0, max-content));
  }

  [data-page="wyzwania-tras"] .wt-play-link,
  [data-page="wyzwania-tras"] .wt-cta-card .wt-play-link {
    width: 100%;
  }

  [data-page="wyzwania-tras"] .wt-hero__lead {
    max-width: 100%;
  }
}

@media (hover: hover) {
  [data-page="wyzwania-tras"] .wt-obstacle-card:hover,
  [data-page="wyzwania-tras"] .wt-step-card:hover,
  [data-page="wyzwania-tras"] .wt-related-card:hover {
    transform: translateY(-2px) rotate(-0.25deg);
  }
}


ul { list-style: none !important; }

.game-loop-page {
  overflow: hidden;
}

.game-loop-page .section {
  position: relative;
}

.loop-hero__grid {
  display: grid;
  grid-template-columns: minmax(500px, 1.45fr) minmax(330px, 0.95fr);
  align-items: center;
  gap: 48px;
}

.loop-hero__grid > * { min-width: 0; width: 100%; }

.loop-hero__copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  max-width: 700px;
}

.loop-hero__copy > * { min-width: 0; }
.loop-hero__copy h1,
.loop-hero__copy p { margin: 0; }
.loop-hero__lead { max-width: 620px; font-size: clamp(1.1rem, 1.7vw, 1.25rem); }

.loop-hero__action {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  width: 100%;
}

.loop-hero__cta { min-width: 250px; }
.loop-hero__note { max-width: 560px; color: var(--color-muted-ink); font-size: var(--text-small); line-height: 1.45; }
.loop-hero__media { width: 100%; margin: 32px 0 0; }
.loop-image { width: 100%; }
.loop-image > img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.loop-image--hero { aspect-ratio: 16 / 10; }
.loop-image--trial { aspect-ratio: 4 / 3; }
.loop-image--finish { aspect-ratio: 3 / 2; }

.loop-map__intro,
.drawing-decision__intro,
.test-habits__intro { width: min(100%, 740px); }

.loop-map__intro { margin-bottom: 32px; }
.loop-map__intro p,
.drawing-decision__intro p,
.test-habits__intro p { max-width: 680px; }

.loop-map__cards {
  display: grid;
  grid-template-columns: repeat(4, minmax(230px, 1fr));
  gap: 16px;
}

.loop-map__cards > * { min-width: 0; width: 100%; }

.loop-step,
.drawing-card,
.habit-card {
  border: var(--border-ink);
  border-radius: var(--radius-default);
  padding: 24px;
  transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}

.loop-step:hover,
.drawing-card:hover,
.habit-card:hover { box-shadow: var(--shadow-note); transform: translateY(-2px) rotate(0.25deg); }
.loop-step h3,
.loop-step p,
.drawing-card h3,
.drawing-card p,
.habit-card h3,
.habit-card p { margin: 0; }
.loop-step,
.drawing-card,
.habit-card { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.loop-step--paper,
.drawing-card--paper,
.habit-card--paper { background: var(--color-paper-dark); }
.loop-step--mint,
.drawing-card--mint,
.habit-card--mint { background: var(--color-mint); }
.loop-step--yellow,
.drawing-card--yellow,
.habit-card--yellow { background: var(--color-sun-yellow); }
.loop-step__number { font-family: var(--font-display); font-size: 2.3rem; font-weight: 800; line-height: 1; }

.route-reading__grid {
  display: grid;
  grid-template-columns: minmax(560px, 740px) minmax(200px, 240px);
  align-items: start;
  gap: 32px;
}

.route-reading__grid > * { min-width: 0; width: 100%; }
.route-reading__main { display: flex; flex-direction: column; align-items: flex-start; gap: 24px; }
.route-reading__main > * { min-width: 0; margin: 0; }
.route-reading__main > p { max-width: 700px; }
.route-reading__note { width: min(100%, 620px); }
.route-reading__note h3,
.route-reading__note p { margin: 0; }
.route-reading__note { display: flex; flex-direction: column; gap: 12px; }
.route-reading__rail { border: var(--border-ink); background: var(--color-paper-dark); box-shadow: var(--shadow-note); padding: 24px; }
.route-reading__rail > *:last-child { margin-bottom: 0; }
.route-reading__pairs { width: min(100%, 700px); }
.route-reading__pairs h3 { margin-bottom: 16px; }
.route-pair { display: grid; grid-template-columns: minmax(150px, 0.35fr) minmax(0, 1fr); gap: 12px; padding: 12px 0; border-top: var(--border-rule); }
.route-pair > * { min-width: 0; }

.drawing-decision__intro { margin-bottom: 32px; }
.drawing-decision__intro span { text-decoration: underline; text-decoration-color: var(--color-rule-blue); text-decoration-thickness: 0.14em; text-underline-offset: 0.12em; }
.drawing-decision__cards { display: grid; grid-template-columns: repeat(3, minmax(280px, 1fr)); gap: 20px; }
.drawing-decision__cards > * { min-width: 0; width: 100%; }

.wheel-test__grid { display: grid; grid-template-columns: minmax(500px, 1.2fr) minmax(360px, 0.85fr); align-items: start; gap: 32px; }
.wheel-test__grid > * { min-width: 0; width: 100%; }
.wheel-test__analysis { max-width: 620px; }
.wheel-test__media { margin: 0; }
.wheel-test__caption { display: flex; flex-direction: column; gap: 12px; margin: 8px 0 0; }
.wheel-test__caption h3,
.wheel-test__caption p { margin: 0; }
.wheel-test__summary { grid-column: 1 / -1; width: min(100%, 520px); }
.wheel-test__summary h3 { margin-bottom: 12px; }
.wheel-test__summary ul { margin-bottom: 0; }

.diagnosis__intro { width: min(100%, 680px); margin-bottom: 32px; }
.diagnosis__intro p { max-width: 680px; }
.diagnosis__stamp,
.verdict__stamp { display: inline-block; border: 2px solid var(--color-marker-red); color: var(--color-marker-red); padding: 4px 8px; font-size: var(--text-small); font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; transform: rotate(-2deg); }
.diagnosis__accordion,
.loop-faq__accordion { display: flex; flex-direction: column; align-items: stretch; gap: 16px; }
.diagnosis__accordion > *,
.loop-faq__accordion > * { min-width: 0; width: 100%; }
.diagnosis-panel,
.faq-item { border: var(--border-ink); background: var(--color-paper-dark); }
.diagnosis-panel h3,
.faq-item h3 { margin: 0; }
.diagnosis-panel__trigger,
.faq-item__trigger { display: grid; grid-template-columns: minmax(0, 1fr) 28px; align-items: center; gap: 16px; width: 100%; min-height: 52px; border: 0; border-radius: 0; background: transparent; color: var(--color-ink); padding: 20px 24px; font-family: var(--font-display); font-size: clamp(1.1rem, 2vw, 1.35rem); font-weight: 800; line-height: 1.2; text-align: left; }
.diagnosis-panel__trigger:hover,
.faq-item__trigger:hover { background: var(--color-sun-yellow); box-shadow: none; color: var(--color-ink); transform: none; }
.diagnosis-panel__indicator,
.faq-item__indicator { font-size: 2rem; line-height: 1; text-align: center; transition: transform var(--transition-fast); }
.diagnosis-panel.is-open .diagnosis-panel__indicator,
.faq-item.is-open .faq-item__indicator { transform: rotate(90deg); }
.diagnosis-panel__content,
.faq-item__content { display: grid; grid-template-rows: 1fr; overflow: hidden; transition: grid-template-rows 180ms ease; }
.diagnosis-panel__content > p,
.faq-item__content > p { min-height: 0; overflow: hidden; margin: 0; padding: 0 24px 24px; }
.diagnosis-panel:not(.is-open) .diagnosis-panel__content,
.faq-item:not(.is-open) .faq-item__content { grid-template-rows: 0fr; }
.diagnosis-panel:not(.is-open) .diagnosis-panel__content > p,
.faq-item:not(.is-open) .faq-item__content > p { padding-bottom: 0; }

.test-habits__intro { margin-bottom: 32px; }
.test-habits__cards { display: grid; grid-template-columns: repeat(2, minmax(330px, 1fr)); gap: 20px; }
.test-habits__cards > * { min-width: 0; width: 100%; }

.verdict__block { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; width: min(100%, 760px); margin-inline: auto; padding: 32px; border: var(--border-ink); background: var(--color-paper); }
.verdict__block > * { min-width: 0; margin: 0; }
.verdict__block > p { max-width: 680px; }
.verdict__audience { width: min(100%, 560px); background: var(--color-mint); padding: 20px 24px; }
.verdict__audience h3 { margin-bottom: 12px; }
.verdict__audience ul { margin-bottom: 0; }

.loop-faq__column { width: min(100%, 700px); }
.loop-faq__column > p { max-width: 700px; }

.play-cta__panel { display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px; width: min(100%, 760px); margin-inline: auto; border: var(--border-ink); background: var(--color-paper-dark); padding: 32px; }
.play-cta__panel > * { min-width: 0; width: 100%; }
.play-cta__media { margin: 0; }
.play-cta__copy { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
.play-cta__copy > * { min-width: 0; margin: 0; }
.play-cta__copy > p { max-width: 600px; }
.play-cta__button { min-width: 260px; }
.play-cta__disclaimer { width: min(100%, 560px); border-top: var(--border-rule); padding-top: 12px; color: var(--color-muted-ink); font-size: var(--text-small); line-height: 1.45; }

@media (max-width: 65.625rem) {
  .loop-map__cards { grid-template-columns: repeat(2, minmax(230px, 1fr)); }
  .drawing-decision__cards { grid-template-columns: repeat(2, minmax(280px, 1fr)); }
}

@media (max-width: 60rem) {
  .loop-hero__grid,
  .wheel-test__grid { grid-template-columns: minmax(0, 1fr); }
  .loop-hero__media { width: min(100%, 680px); margin-top: 0; }
  .route-reading__grid { grid-template-columns: minmax(0, 1fr); }
  .route-reading__rail { width: min(100%, 420px); }
  .wheel-test__analysis { max-width: 700px; }
  .wheel-test__media { width: min(100%, 620px); }
}

@media (max-width: 47.5rem) {
  .test-habits__cards { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 44.9375rem) {
  .loop-hero__grid,
  .loop-map__cards,
  .drawing-decision__cards,
  .wheel-test__grid,
  .route-reading__grid { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .loop-hero__copy { gap: 16px; }
  .loop-hero__copy h1 { font-size: clamp(2.75rem, 12vw, 3.5rem); }
  .loop-hero__lead { max-width: none; }
  .loop-hero__action { align-items: stretch; }
  .loop-hero__cta,
  .play-cta__button { width: 100%; min-width: 0; }
  .loop-hero__media,
  .wheel-test__media { width: 100%; }
  .loop-step,
  .drawing-card,
  .habit-card { padding: 24px; }
  .route-reading__main { gap: 24px; }
  .route-reading__note,
  .route-reading__rail,
  .route-reading__pairs { width: 100%; }
  .route-pair { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .wheel-test__summary { width: 100%; }
  .diagnosis__intro { margin-bottom: 24px; }
  .diagnosis-panel__trigger,
  .faq-item__trigger { padding: 16px; font-size: 1.15rem; }
  .diagnosis-panel__content > p,
  .faq-item__content > p { padding-inline: 16px; padding-bottom: 20px; }
  .verdict__block,
  .play-cta__panel { width: 100%; padding: 24px 20px; gap: 24px; }
  .verdict__audience { width: 100%; padding: 20px; }
}

@media (prefers-reduced-motion: reduce) {
  .diagnosis-panel__content,
  .faq-item__content,
  .diagnosis-panel__indicator,
  .faq-item__indicator { transition: none; }
  .loop-step:hover,
  .drawing-card:hover,
  .habit-card:hover { transform: none; }
}


.drawing-page {
  overflow: clip;
}

.drawing-page .section {
  position: relative;
}

.drawing-page .button:hover {
  box-shadow: 3px 3px 0 var(--color-ink);
}

.drawing-hero__grid {
  display: grid;
  grid-template-columns: minmax(25rem, 5fr) minmax(32.5rem, 7fr);
  gap: var(--space-6);
  align-items: center;
}

.drawing-hero__grid > * { min-width: 0; }
.drawing-hero__copy { display: flex; min-width: 0; flex-direction: column; align-items: flex-start; gap: var(--space-4); }
.drawing-hero__copy > * { min-width: 0; margin: 0; }
.drawing-hero__copy h1 { max-width: 8.5ch; }
.drawing-hero__lead { max-width: 36ch; font-size: clamp(1rem, 1.55vw, 1.125rem); }
.drawing-hero__note { width: min(100%, 31ch); padding: var(--space-4); transform: rotate(-0.6deg); }
.drawing-hero__note > * { margin: 0; }
.drawing-hero__note .eyebrow { margin-bottom: var(--space-2); }
.drawing-hero__cta { min-width: 13.75rem; }
.drawing-hero__media { width: 100%; min-width: 0; margin: 0; }
.drawing-hero__media .media-frame { aspect-ratio: 16 / 10; }
.drawing-hero__media img { height: 100%; object-position: center; }
.drawing-hero__media figcaption { max-width: 100%; }

.drawing-basics__intro { width: min(100%, 38.75rem); }
.drawing-basics__intro p { max-width: 38rem; }
.drawing-basics__items { display: flex; width: min(100%, 46.25rem); min-width: 0; flex-direction: column; }
.drawing-basic { display: grid; grid-template-columns: 3.5rem minmax(0, 1fr); gap: var(--space-4); padding-block: var(--space-5); border-top: var(--border-rule); }
.drawing-basic:last-child { border-bottom: var(--border-rule); }
.drawing-basic > * { min-width: 0; }
.drawing-basic__number { color: var(--color-rule-blue); font-family: var(--font-display); font-size: 1.8rem; font-weight: 800; line-height: 1; }
.drawing-basic__text { min-width: 0; }
.drawing-basic__text h3 { margin-bottom: var(--space-2); }
.drawing-basic__text p { max-width: 41ch; }
.drawing-check { color: #287042; font-weight: 900; }
.drawing-basic__scribble { display: inline-block; border-bottom: 3px solid var(--color-rule-blue); font-family: var(--font-display); font-size: 1rem; font-weight: 700; transform: rotate(-1deg); }

.drawing-shapes__intro { width: min(100%, 38.75rem); }
.drawing-shapes__intro p { max-width: 37rem; }
.drawing-shapes__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-5); }
.drawing-shapes__grid > * { min-width: 0; width: 100%; }
.drawing-shape { display: flex; min-width: 0; min-height: 20rem; flex-direction: column; gap: var(--space-3); border: var(--border-ink); border-radius: var(--radius-default); padding: var(--space-5); transition: transform var(--transition-fast), box-shadow var(--transition-fast); }
.drawing-shape > * { min-width: 0; margin: 0; }
.drawing-shape:hover { box-shadow: var(--shadow-note); transform: translateY(-2px) rotate(.35deg); }
.drawing-shape--paper { background: var(--color-paper-dark); }
.drawing-shape--yellow { background: var(--color-sun-yellow); }
.drawing-shape--mint { background: var(--color-mint); }
.drawing-shape__top { display: flex; min-width: 0; align-items: center; justify-content: space-between; gap: var(--space-3); }
.drawing-shape__top > * { min-width: 0; }
.drawing-sketch { position: relative; display: block; width: 6rem; height: 2.4rem; flex: 0 0 6rem; border: 3px solid var(--color-ink); border-bottom: 0; }
.drawing-sketch::before, .drawing-sketch::after { position: absolute; bottom: -0.65rem; width: .85rem; height: .85rem; border: 3px solid var(--color-ink); border-radius: 50%; background: var(--color-paper); content: ""; }
.drawing-sketch::before { left: .55rem; }
.drawing-sketch::after { right: .55rem; }
.drawing-sketch--low { height: 1.7rem; }
.drawing-sketch--long { width: 7rem; flex-basis: 7rem; transform: skewX(-15deg); }
.drawing-sketch--high { height: 3.1rem; transform: rotate(-5deg); }
.drawing-shape h3 { font-size: var(--text-card-title); }
.drawing-shape p { max-width: 39ch; }

.drawing-method__layout { display: grid; grid-template-columns: minmax(0, 46.25rem) minmax(0, 15rem); gap: var(--space-6); align-items: start; }
.drawing-method__layout > * { min-width: 0; }
.drawing-method__main { min-width: 0; }
.drawing-method__lead { max-width: 42ch; }
.drawing-method__steps { display: flex; min-width: 0; flex-direction: column; border-top: var(--border-rule); }
.drawing-step { display: grid; grid-template-columns: 4rem minmax(0, 1fr); gap: var(--space-4); padding-block: var(--space-5); border-bottom: var(--border-rule); }
.drawing-step > * { min-width: 0; }
.drawing-step__number { color: var(--color-rule-blue); font-family: var(--font-display); font-size: 2.25rem; font-weight: 800; line-height: .9; }
.drawing-step h3 { margin-bottom: var(--space-2); }
.drawing-step p { max-width: 42ch; }
.drawing-one-change { display: inline-block; color: var(--color-marker-red); font-family: var(--font-body); font-size: var(--text-small); letter-spacing: .04em; text-transform: uppercase; }
.drawing-method__toggle { margin-top: var(--space-5); }
.drawing-method__map { max-width: 42rem; margin-top: var(--space-4); border: var(--border-ink); background: var(--color-paper-dark); padding: var(--space-4); }
.drawing-method__note { width: 100%; margin-top: 10rem; }
.drawing-method__note > * { margin: 0; }
.drawing-method__note .eyebrow { margin-bottom: var(--space-2); }

.drawing-terrain__grid { display: grid; grid-template-columns: minmax(35rem, 8fr) minmax(18.75rem, 4fr); gap: var(--space-6); align-items: start; }
.drawing-terrain__grid > * { min-width: 0; }
.drawing-terrain__media { grid-column: 1; grid-row: 1 / span 2; width: 100%; margin: 0; }
.drawing-terrain__media .media-frame { aspect-ratio: 3 / 2; }
.drawing-terrain__media img { height: 100%; object-position: center; }
.drawing-terrain__copy { grid-column: 2; grid-row: 1; min-width: 0; }
.drawing-terrain__copy > p { max-width: 33ch; }
.drawing-terrain__note { position: relative; display: flex; min-width: 0; flex-direction: column; gap: var(--space-3); border: var(--border-ink); background: var(--color-paper-dark); padding: var(--space-4); }
.drawing-terrain__note::before { width: 100%; border-top: 3px dashed var(--color-rule-blue); content: ""; }
.drawing-terrain__note > * { margin: 0; }
.drawing-terrain__note p { max-width: 30ch; }
.drawing-terrain__conclusion { grid-column: 2; grid-row: 2; min-width: 0; }
.drawing-terrain__conclusion p { max-width: 38ch; }
.drawing-terrain__conclusion strong { border-bottom: 3px solid var(--color-sun-yellow); }

.drawing-comparison__intro { width: min(100%, 40rem); }
.drawing-comparison__intro p { max-width: 39rem; }
.drawing-comparison__scroll { position: relative; width: 100%; min-width: 0; overflow-x: auto; border: var(--border-ink); background: var(--color-white); }
.drawing-comparison__hint { display: none; }
.drawing-comparison__table { min-width: 56.25rem; margin: 0; }
.drawing-comparison__table th:nth-child(1), .drawing-comparison__table td:nth-child(1) { width: 22%; min-width: 11.25rem; }
.drawing-comparison__table th:nth-child(2), .drawing-comparison__table td:nth-child(2) { width: 30%; }
.drawing-comparison__table th:nth-child(3), .drawing-comparison__table td:nth-child(3) { width: 28%; }
.drawing-comparison__table th:nth-child(4), .drawing-comparison__table td:nth-child(4) { width: 20%; min-width: 10.625rem; }

.drawing-wheels__grid { display: grid; grid-template-columns: minmax(35rem, 7fr) minmax(23.75rem, 5fr); gap: var(--space-6); align-items: center; }
.drawing-wheels__grid > * { min-width: 0; }
.drawing-wheels__copy { min-width: 0; }
.drawing-wheels__copy > p { max-width: 41ch; }
.drawing-wheels__link { display: inline-block; padding-block: .5rem; }
.drawing-wheels__note { width: min(100%, 22.5rem); margin-top: var(--space-5); }
.drawing-wheels__note > * { margin: 0; }
.drawing-wheels__note .eyebrow { margin-bottom: var(--space-2); }
.drawing-wheels__media { width: 100%; margin: 0; }
.drawing-wheels__media .media-frame { aspect-ratio: 4 / 3; }
.drawing-wheels__media img { height: 100%; object-position: center; }

.drawing-cta__panel { width: min(100%, 47.5rem); margin-inline: auto; border: var(--border-ink); background: var(--color-paper-dark); padding: var(--space-7); }
.drawing-cta__copy { display: flex; min-width: 0; flex-direction: column; align-items: flex-start; gap: var(--space-4); }
.drawing-cta__copy > * { min-width: 0; margin: 0; }
.drawing-cta__copy h2, .drawing-cta__copy > p { max-width: 35rem; }
.drawing-cta__button { min-width: 13.75rem; }
.drawing-cta__disclaimer { width: min(100%, 31rem); border-top: var(--border-rule); padding-top: var(--space-4); color: var(--color-muted-ink); font-size: var(--text-small); line-height: 1.45; }

.drawing-faq__layout { display: grid; grid-template-columns: minmax(0, 46.25rem) minmax(0, 15rem); gap: var(--space-6); align-items: start; }
.drawing-faq__layout > * { min-width: 0; }
.drawing-faq__lead { max-width: 42ch; }
.drawing-faq__items { display: flex; min-width: 0; flex-direction: column; gap: var(--space-3); }
.drawing-faq__item { min-width: 0; border: var(--border-ink); background: var(--color-paper); }
.drawing-faq__item h3 { margin: 0; font-size: 1.18rem; letter-spacing: -.02em; }
.drawing-faq__item button { display: grid; width: 100%; min-width: 0; min-height: 3.5rem; grid-template-columns: minmax(0, 1fr) 2rem; gap: var(--space-3); align-items: center; border: 0; border-radius: 0; background: transparent; color: var(--color-ink); padding: var(--space-4); text-align: left; }
.drawing-faq__item button:hover { background: var(--color-paper-dark); box-shadow: none; color: var(--color-ink); transform: none; }
.drawing-faq__icon { display: block; width: 2rem; color: var(--color-marker-red); font-size: 2rem; font-weight: 400; line-height: 1; text-align: center; transition: transform var(--transition-fast); }
.drawing-faq__item button[aria-expanded="true"] .drawing-faq__icon { transform: rotate(90deg); }
.drawing-faq__item:has(button[aria-expanded="true"]) { border-color: var(--color-rule-blue); border-width: 3px; }
.drawing-faq__answer { padding: 0 var(--space-4) var(--space-5); }
.drawing-faq__answer p { max-width: 42ch; margin: 0; }
.drawing-faq__note { width: 100%; border-left: 4px solid var(--color-rule-blue); padding: var(--space-4); color: var(--color-muted-ink); font-family: var(--font-display); font-size: 1.15rem; font-weight: 700; line-height: 1.25; transform: rotate(-2deg); }

.drawing-next__intro { width: min(100%, 38.75rem); }
.drawing-next__intro p { max-width: 38rem; }
.drawing-next__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-5); }
.drawing-next__grid > * { min-width: 0; width: 100%; }
.drawing-next__card { display: flex; min-width: 0; min-height: 11rem; flex-direction: column; gap: var(--space-3); border: var(--border-ink); border-radius: var(--radius-default); padding: var(--space-5); color: var(--color-ink); text-decoration: none; transition: transform var(--transition-fast), box-shadow var(--transition-fast); }
.drawing-next__card > * { min-width: 0; margin: 0; }
.drawing-next__card:hover { box-shadow: var(--shadow-note); transform: translateY(-2px) rotate(-.3deg); text-decoration: none; }
.drawing-next__card h3 { font-size: var(--text-card-title); }
.drawing-next__card h3 span { display: inline-block; color: var(--color-marker-red); transition: transform var(--transition-fast); }
.drawing-next__card:hover h3 span { transform: translateX(.35rem); }
.drawing-next__card p { max-width: 38ch; }
.drawing-next__card--paper { background: var(--color-paper-dark); }
.drawing-next__card--yellow { background: var(--color-sun-yellow); }
.drawing-next__card--mint { background: var(--color-mint); }

@media (max-width: 59.9375rem) {
  .drawing-hero__grid { grid-template-columns: 1fr; gap: var(--space-5); }
  .drawing-hero__copy { width: min(100%, 46.25rem); }
  .drawing-hero__copy h1 { max-width: 11ch; }
  .drawing-hero__lead { max-width: 42ch; }
  .drawing-hero__media { grid-row: 2; }
  .drawing-shapes__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .drawing-shape:nth-child(3) { grid-column: 1 / span 1; }
  .drawing-method__layout, .drawing-faq__layout { grid-template-columns: minmax(0, 1fr); }
  .drawing-method__note { width: min(100%, 100%); margin-top: 0; }
  .drawing-terrain__grid { grid-template-columns: 1fr; gap: var(--space-5); }
  .drawing-terrain__media, .drawing-terrain__copy, .drawing-terrain__conclusion { grid-column: 1; grid-row: auto; }
  .drawing-terrain__copy { width: min(100%, 46.25rem); }
  .drawing-terrain__copy > p { max-width: 42ch; }
  .drawing-terrain__note { width: min(100%, 30rem); }
  .drawing-terrain__conclusion { width: min(100%, 42.5rem); }
  .drawing-comparison__hint { display: block; position: sticky; left: 0; width: max-content; border-right: var(--border-ink); border-bottom: var(--border-ink); background: var(--color-sun-yellow); padding: var(--space-2) var(--space-3); font-size: var(--text-small); font-weight: 800; }
  .drawing-wheels__grid { grid-template-columns: 1fr; gap: var(--space-5); }
  .drawing-wheels__copy { width: min(100%, 46.25rem); }
  .drawing-wheels__media { width: min(100%, 40rem); }
  .drawing-faq__note { width: min(100%, 30rem); transform: none; }
  .drawing-next__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 44.9375rem) {
  .drawing-hero__copy, .drawing-basics__intro, .drawing-shapes__intro, .drawing-method__main, .drawing-terrain__copy, .drawing-comparison__intro, .drawing-wheels__copy, .drawing-next__intro { width: 100%; }
  .drawing-hero__copy h1 { max-width: 9ch; font-size: clamp(2.75rem, 13vw, 3.25rem); }
  .drawing-hero__lead, .drawing-basics__intro p, .drawing-shapes__intro p, .drawing-method__lead, .drawing-terrain__copy > p, .drawing-comparison__intro p, .drawing-wheels__copy > p, .drawing-next__intro p { max-width: none; }
  .drawing-hero__note { width: 100%; transform: none; }
  .drawing-hero__cta, .drawing-method__toggle, .drawing-cta__button { width: 100%; }
  .drawing-basic { grid-template-columns: 1fr; gap: var(--space-2); padding-block: var(--space-4); }
  .drawing-basic__number { font-size: 1.1rem; }
  .drawing-basic__text p, .drawing-step p, .drawing-shape p, .drawing-terrain__note p, .drawing-terrain__conclusion p, .drawing-faq__answer p, .drawing-next__card p { max-width: none; }
  .drawing-shapes__grid, .drawing-next__grid { grid-template-columns: 1fr; gap: var(--space-4); }
  .drawing-shape:nth-child(3) { grid-column: auto; }
  .drawing-shape { min-height: auto; padding: var(--space-5); }
  .drawing-step { grid-template-columns: 1fr; gap: var(--space-2); padding-block: var(--space-4); }
  .drawing-step__number { font-size: 1.3rem; }
  .drawing-method__note, .drawing-terrain__note, .drawing-wheels__note { width: 100%; }
  .drawing-terrain__media, .drawing-wheels__media { width: 100%; }
  .drawing-comparison__scroll { overflow: visible; border: 0; background: transparent; }
  .drawing-comparison__hint { display: none; }
  .drawing-comparison__table, .drawing-comparison__table tbody, .drawing-comparison__table tr, .drawing-comparison__table td { display: block; width: 100%; min-width: 0; white-space: normal; }
  .drawing-comparison__table { background: transparent; }
  .drawing-comparison__table thead { display: none; }
  .drawing-comparison__table tr { margin-bottom: var(--space-4); border: var(--border-ink); background: var(--color-paper-dark); padding: var(--space-4); }
  .drawing-comparison__table td { border: 0; border-bottom: var(--border-rule); padding: var(--space-3) 0; }
  .drawing-comparison__table td:last-child { border-bottom: 0; }
  .drawing-comparison__table td::before { display: block; margin-bottom: var(--space-1); color: var(--color-muted-ink); content: attr(data-label); font-size: var(--text-small); font-weight: 800; }
  .drawing-cta__panel { padding: var(--space-5); }
  .drawing-cta__copy h2, .drawing-cta__copy > p, .drawing-cta__disclaimer { max-width: none; }
  .drawing-faq__item button { grid-template-columns: minmax(0, 1fr) 2rem; padding: var(--space-4); }
  .drawing-faq__answer { padding: 0 var(--space-4) var(--space-5); }
  .drawing-next__card { min-height: 0; padding: var(--space-5); }
}

@media (prefers-reduced-motion: reduce) {
  .drawing-shape, .drawing-next__card, .drawing-next__card h3 span, .drawing-faq__icon { transition: none; }
  .drawing-shape:hover, .drawing-next__card:hover { transform: none; }
}


.tips-page {
  overflow: clip;
  hyphens: auto;
}

.tips-page .section {
  position: relative;
}

.tips-hero {
  padding-block: var(--space-9) var(--space-8);
}

.tips-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(220px, 280px);
  gap: var(--space-6);
  align-items: start;
}

.tips-hero__copy,
.tips-start-note,
.tips-map__intro,
.tips-map-card,
.tips-editorial__main,
.tips-editorial__rail,
.tips-wheels__intro,
.tips-wheel-card,
.tips-track__copy,
.tips-track-checklist,
.tips-track-note,
.tips-process__intro,
.tips-step,
.tips-diagnosis__intro,
.tips-diagnosis-card,
.tips-cta__panel,
.tips-session__intro,
.tips-session-note,
.tips-faq__main,
.tips-faq__rail {
  min-width: 0;
}

.tips-hero__copy {
  width: 100%;
  max-width: 740px;
}

.tips-hero__lead {
  width: min(100%, 650px);
  font-size: clamp(1.125rem, 2vw, 1.3rem);
  font-weight: 520;
}

.tips-hero__independent {
  width: min(100%, 620px);
}

.tips-start-note {
  width: 100%;
  max-width: 280px;
  margin-block-start: var(--space-2);
}

.tips-start-note h2 {
  font-size: var(--text-card-title);
}

.tips-map__intro {
  width: min(100%, 660px);
}

.tips-map__cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-5);
  margin-block-start: var(--space-6);
}

.tips-map-card {
  display: flex;
  width: 100%;
  min-width: 0;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-3);
  border: var(--border-ink);
  border-radius: var(--radius-default);
  background: var(--color-paper-dark);
  padding: var(--space-5);
  text-decoration: none;
  transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}

.tips-map-card:nth-child(1),
.tips-map-card:nth-child(4) {
  background: var(--color-sun-yellow);
}

.tips-map-card > h3,
.tips-map-card > p,
.tips-wheel-card > h3,
.tips-wheel-card > p,
.tips-diagnosis-card > h3,
.tips-diagnosis-card > p,
.tips-session-note > h3,
.tips-session-note > p {
  margin: 0;
}

.tips-map-card__number {
  font-family: var(--font-display);
  font-size: 2rem;
  font-weight: 800;
  line-height: 1;
}

.tips-map-card__tag,
.tips-wheel-card__label,
.tips-diagnosis-card__label {
  display: inline-block;
  border-bottom: 2px solid var(--color-rule-blue);
  font-size: var(--text-small);
  font-weight: 800;
  letter-spacing: 0.04em;
}

.tips-map-card__tag--mint,
.tips-wheel-card__label {
  background: var(--color-mint);
  padding-inline: var(--space-2);
}

.tips-map-card:hover {
  box-shadow: var(--shadow-note);
  transform: translateY(-2px) rotate(-0.25deg);
}

.tips-editorial {
  display: grid;
  grid-template-columns: minmax(580px, 740px) minmax(220px, 240px);
  gap: var(--space-6);
  align-items: start;
}

.tips-editorial__main {
  width: 100%;
  max-width: 740px;
}

.tips-editorial__rail {
  width: 100%;
  max-width: 240px;
  margin-block-start: 13rem;
}

.tips-workshop-note {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.tips-workshop-note > * {
  margin: 0;
}

.tips-workshop-note h3 {
  font-size: var(--text-card-title);
}

.tips-red-underline {
  text-decoration: underline;
  text-decoration-color: var(--color-marker-red);
  text-decoration-thickness: 0.16em;
  text-underline-offset: 0.13em;
}

.tips-figure {
  width: 100%;
}

.tips-figure--drawing {
  max-width: 620px;
}

.tips-figure .media-frame {
  width: 100%;
}

.tips-figure--drawing .media-frame {
  aspect-ratio: 4 / 3;
}

.tips-figure--wheels {
  width: min(100%, 740px);
  margin-block-start: var(--space-6);
}

.tips-figure--wheels .media-frame {
  aspect-ratio: 16 / 10;
}

.tips-figure--track {
  width: min(100%, 900px);
  margin-block: var(--space-6);
}

.tips-figure--track .media-frame {
  aspect-ratio: 3 / 2;
}

.tips-figure .media-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.tips-figure figcaption {
  max-width: 560px;
}

.tips-observation-list {
  display: grid;
  gap: var(--space-2);
}

.tips-observation-list > li {
  position: relative;
  padding-inline-start: 1.5rem;
}

.tips-observation-list > li::before {
  position: absolute;
  inset-inline-start: 0;
  color: var(--color-marker-red);
  content: "—";
  font-weight: 900;
}

.tips-wheels__intro {
  width: min(100%, 680px);
}

.tips-wheel-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-5);
  margin-block-start: var(--space-6);
}

.tips-wheel-card {
  display: flex;
  width: 100%;
  min-width: 0;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-3);
  border: var(--border-ink);
  border-radius: var(--radius-default);
  background: var(--color-paper);
  padding: var(--space-5);
}

.tips-wheel-card--repeat {
  background: var(--color-paper-dark);
}

.tips-wheel-card .content-list {
  margin: 0;
}

.tips-track__copy {
  width: min(100%, 700px);
}

.tips-route-mark {
  border-bottom: 2px solid var(--color-rule-blue);
  font-weight: 800;
}

.tips-track__lower {
  display: grid;
  grid-template-columns: minmax(0, 620px) minmax(220px, 260px);
  gap: var(--space-6);
  align-items: start;
}

.tips-track-checklist {
  width: 100%;
  max-width: 620px;
  border: var(--border-ink);
  background: var(--color-paper-dark);
  padding: var(--space-5);
}

.tips-track-checklist h3 {
  margin-block-end: var(--space-4);
}

.tips-track-checklist ol {
  display: grid;
  gap: var(--space-3);
  margin: 0;
  padding-inline-start: 1.5rem;
}

.tips-track-note {
  display: flex;
  width: 100%;
  max-width: 260px;
  flex-direction: column;
  gap: var(--space-3);
}

.tips-track-note > * {
  margin: 0;
}

.tips-track-note h3 {
  font-size: var(--text-card-title);
}

.tips-process__intro {
  width: min(100%, 640px);
}

.tips-steps {
  display: grid;
  width: min(100%, 740px);
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-5);
  margin-block-start: var(--space-6);
}

.tips-step {
  display: grid;
  grid-template-columns: 80px minmax(0, 620px);
  gap: var(--space-4);
  align-items: start;
}

.tips-step__number {
  display: flex;
  width: 80px;
  min-width: 0;
  min-height: 80px;
  align-items: center;
  justify-content: center;
  border: var(--border-ink);
  background: var(--color-sun-yellow);
  font-family: var(--font-display);
  font-size: 2.5rem;
  font-weight: 800;
  line-height: 1;
}

.tips-step__number--mint {
  background: var(--color-mint);
}

.tips-step__body {
  width: 100%;
  max-width: 620px;
}

.tips-step__body--paper {
  border: 1px solid var(--color-ink);
  background: var(--color-paper-dark);
  padding: var(--space-4);
}

.tips-diagnosis__intro {
  width: min(100%, 650px);
}

.tips-diagnosis__cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-5);
  margin-block-start: var(--space-6);
}

.tips-diagnosis-card {
  display: flex;
  width: 100%;
  min-width: 0;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-3);
  border: var(--border-ink);
  background: var(--color-paper-dark);
  padding: var(--space-5);
}

.tips-diagnosis-card--yellow {
  background: var(--color-sun-yellow);
}

.tips-cta__panel {
  display: flex;
  width: min(100%, 760px);
  margin-inline: auto;
  flex-direction: column;
  align-items: center;
  gap: var(--space-5);
  border: var(--border-ink);
  background: var(--color-white);
  padding: var(--space-7);
  text-align: center;
}

.tips-cta__panel > * {
  margin: 0;
}

.tips-cta__panel > p {
  width: min(100%, 540px);
}

.tips-cta__button {
  min-width: 220px;
}

.tips-cta__disclaimer {
  display: flex;
  width: min(100%, 560px);
  flex-direction: column;
  align-items: stretch;
  gap: var(--space-2);
  border: 1px solid var(--color-ink);
  background: var(--color-paper-dark);
  padding: var(--space-4);
  text-align: left;
}

.tips-cta__disclaimer > * {
  margin: 0;
}

.tips-session__intro {
  width: min(100%, 640px);
}

.tips-session__notes {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-5);
  margin-block-start: var(--space-6);
}

.tips-session-note {
  display: flex;
  width: 100%;
  min-width: 0;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-3);
  border: var(--border-ink);
  background: var(--color-paper-dark);
  padding: var(--space-5);
}

.tips-session-note--yellow {
  background: var(--color-sun-yellow);
}

.tips-session-note--mint {
  background: var(--color-mint);
}

.tips-faq__layout {
  display: grid;
  grid-template-columns: minmax(580px, 740px) minmax(220px, 240px);
  gap: var(--space-6);
  align-items: start;
}

.tips-faq__main {
  width: 100%;
  max-width: 740px;
}

.tips-faq__intro {
  width: min(100%, 620px);
}

.tips-faq__rail {
  width: 100%;
  max-width: 240px;
  margin-block-start: 7rem;
}

.tips-faq__rail .callout {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.tips-faq__rail .callout > * {
  margin: 0;
}

.tips-faq__rail h3 {
  font-size: var(--text-card-title);
}

.tips-faq__items {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-3);
  margin-block-start: var(--space-6);
}

.tips-faq-item {
  width: 100%;
  min-width: 0;
  border: var(--border-ink);
  background: var(--color-paper);
}

.tips-faq-item h3 {
  margin: 0;
  font-family: var(--font-body);
  font-size: 1rem;
  letter-spacing: 0;
}

.tips-faq-button {
  display: grid;
  width: 100%;
  min-width: 0;
  min-height: 56px;
  grid-template-columns: minmax(0, 1fr) 28px;
  gap: var(--space-3);
  align-items: center;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--color-ink);
  padding: var(--space-4);
  text-align: left;
}

.tips-faq-button:hover {
  box-shadow: none;
  background: var(--color-paper-dark);
  color: var(--color-ink);
  transform: none;
}

.tips-faq-button__icon {
  justify-self: end;
  font-size: 2rem;
  font-weight: 400;
  line-height: 1;
  transition: transform var(--transition-fast);
}

.tips-faq-button[aria-expanded="true"] .tips-faq-button__icon {
  transform: rotate(90deg);
}

.tips-faq-answer {
  border-top: var(--border-rule);
  padding: var(--space-4) var(--space-5);
}

.tips-faq-answer p {
  width: min(100%, 680px);
  margin: 0;
}

@media (max-width: 66rem) {
  .tips-wheel-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .tips-wheel-card--repeat {
    grid-column: 1 / -1;
  }

  .tips-session__notes {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .tips-session-note:nth-child(3) {
    grid-column: 1 / -1;
  }
}

@media (max-width: 59.9375rem) {
  .tips-hero {
    padding-block: var(--space-8);
  }

  .tips-hero__grid,
  .tips-editorial,
  .tips-faq__layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .tips-start-note,
  .tips-editorial__rail,
  .tips-faq__rail {
    max-width: none;
    margin-block-start: 0;
  }

  .tips-track__lower {
    grid-template-columns: minmax(0, 1fr);
  }

  .tips-track-note {
    max-width: none;
  }

  .tips-figure--track {
    width: 100%;
  }
}

@media (max-width: 44.9375rem) {
  .tips-hero {
    padding-block: var(--space-7);
  }

  .tips-hero__lead {
    width: 100%;
    font-size: 1.0625rem;
  }

  .tips-map__cards,
  .tips-wheel-cards,
  .tips-diagnosis__cards,
  .tips-session__notes {
    grid-template-columns: minmax(0, 1fr);
  }

  .tips-wheel-card--repeat,
  .tips-session-note:nth-child(3) {
    grid-column: auto;
  }

  .tips-map-card,
  .tips-wheel-card,
  .tips-diagnosis-card,
  .tips-session-note {
    padding: var(--space-5);
  }

  .tips-steps {
    width: 100%;
    gap: var(--space-5);
  }

  .tips-step {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-3);
  }

  .tips-step__number {
    width: 52px;
    min-height: 52px;
    font-size: 1.75rem;
  }

  .tips-step__body,
  .tips-track-checklist {
    max-width: none;
  }

  .tips-cta__panel {
    width: 100%;
    padding: var(--space-5);
  }

  .tips-cta__button {
    width: 100%;
  }

  .tips-faq-answer {
    padding: var(--space-4);
  }
}

@media (hover: none) {
  .tips-map-card:hover {
    box-shadow: none;
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .tips-faq-button__icon {
    transition: none;
  }
}


[data-sterowanie-page] {
  overflow: clip;
}

[data-sterowanie-page] .sterowanie-section {
  padding-block: var(--space-9);
}

[data-sterowanie-page] .sterowanie-section > .container {
  min-width: 0;
}

[data-sterowanie-page] .sterowanie-eyebrow {
  margin-block-end: var(--space-3);
}

[data-sterowanie-page] .sterowanie-hero {
  padding-block-start: var(--space-8);
}

[data-sterowanie-page] .sterowanie-hero__layout {
  display: grid;
  grid-template-columns: minmax(470px, 1.08fr) minmax(380px, 1fr);
  align-items: center;
  gap: var(--space-6);
}

[data-sterowanie-page] .sterowanie-hero__copy,
[data-sterowanie-page] .sterowanie-hero__media {
  min-width: 0;
  width: 100%;
}

[data-sterowanie-page] .sterowanie-hero__copy {
  max-width: 36.875rem;
}

[data-sterowanie-page] .sterowanie-hero__lead {
  max-width: 36rem;
  font-size: clamp(1.125rem, 1.8vw, 1.3rem);
  font-weight: 650;
}

[data-sterowanie-page] .sterowanie-hero__lead strong {
  background: linear-gradient(transparent 62%, rgb(244 200 74 / 68%) 62%);
}

[data-sterowanie-page] .sterowanie-hero__actions {
  display: flex;
  min-width: 0;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-3);
}

[data-sterowanie-page] .sterowanie-hero__actions > * {
  min-width: 0;
}

[data-sterowanie-page] .sterowanie-hero__note {
  max-width: 34rem;
  margin: 0;
  color: var(--color-muted-ink);
  font-size: var(--text-small);
  line-height: 1.45;
}

[data-sterowanie-page] .sterowanie-hero__media {
  position: relative;
  transform: rotate(0.4deg);
}

[data-sterowanie-page] .sterowanie-hero__media::after {
  position: absolute;
  right: 7%;
  bottom: 9%;
  width: 4.5rem;
  height: 1.5rem;
  border-top: 3px solid var(--color-marker-red);
  border-radius: 50%;
  content: "";
  pointer-events: none;
}

[data-sterowanie-page] .sterowanie-hero__media:hover::after {
  animation: sterowanie-arrow 180ms ease-out 1;
}

[data-sterowanie-page] .sterowanie-hero__media img {
  aspect-ratio: 16 / 10;
  object-position: center;
}

[data-sterowanie-page] .sterowanie-hero__caption {
  margin: var(--space-2) 0 0;
  color: var(--color-muted-ink);
  font-size: var(--text-small);
}

[data-sterowanie-page] .sterowanie-intro {
  width: 100%;
  max-width: 38.75rem;
}

[data-sterowanie-page] .sterowanie-decision-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-5);
  width: 100%;
  max-width: 51.25rem;
  margin-top: var(--space-6);
}

[data-sterowanie-page] .sterowanie-decision-grid > article {
  min-width: 0;
  width: 100%;
}

[data-sterowanie-page] .sterowanie-decision-card {
  display: flex;
  min-width: 0;
  min-height: 100%;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-3);
  background: var(--color-mint);
}

[data-sterowanie-page] .sterowanie-decision-card > * {
  min-width: 0;
}

[data-sterowanie-page] .sterowanie-card-number,
[data-sterowanie-page] .sterowanie-tip-number {
  display: inline-flex;
  width: fit-content;
  min-width: 3rem;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--color-ink);
  background: var(--color-paper);
  padding: var(--space-2) var(--space-3);
  font-family: var(--font-display);
  font-weight: 800;
  line-height: 1;
}

[data-sterowanie-page] .sterowanie-decision-card h3,
[data-sterowanie-page] .sterowanie-mini-card h3 {
  margin: 0;
}

[data-sterowanie-page] .sterowanie-decision-card p,
[data-sterowanie-page] .sterowanie-mini-card p,
[data-sterowanie-page] .sterowanie-diagnostic-card p {
  margin: 0;
}

[data-sterowanie-page] .sterowanie-editorial-layout {
  display: grid;
  grid-template-columns: minmax(0, 46.25rem) minmax(0, 15rem);
  align-items: start;
  gap: var(--space-6);
  width: 100%;
}

[data-sterowanie-page] .sterowanie-article-column,
[data-sterowanie-page] .sterowanie-rail {
  min-width: 0;
  width: 100%;
}

[data-sterowanie-page] .sterowanie-article-column {
  max-width: 46.25rem;
}

[data-sterowanie-page] .sterowanie-route-rule {
  width: 8rem;
  height: 0.35rem;
  margin: var(--space-4) 0 var(--space-5);
  border-top: 2px solid var(--color-rule-blue);
  border-radius: 50%;
  transform: rotate(-1deg);
}

[data-sterowanie-page] .sterowanie-article-column h3 {
  margin-top: var(--space-6);
}

[data-sterowanie-page] .sterowanie-article-figure {
  width: 100%;
  max-width: 46.25rem;
}

[data-sterowanie-page] .sterowanie-article-figure img {
  width: 100%;
}

[data-sterowanie-page] .sterowanie-article-figure--comparison img {
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: center;
}

[data-sterowanie-page] .sterowanie-article-figure--hill img {
  aspect-ratio: 3 / 2;
  object-fit: cover;
  object-position: center bottom;
}

[data-sterowanie-page] .sterowanie-caption-extra {
  margin-top: var(--space-2);
}

[data-sterowanie-page] .sterowanie-caption-extra p {
  margin: 0;
}

[data-sterowanie-page] .sterowanie-caption-toggle {
  min-height: 2.5rem;
  margin-top: var(--space-2);
  padding: var(--space-2) var(--space-3);
  background: var(--color-paper);
  color: var(--color-ink);
  font-size: var(--text-small);
}

[data-sterowanie-page] .sterowanie-rail {
  align-self: start;
}

[data-sterowanie-page] .sterowanie-rail--lower {
  margin-top: 14.5rem;
}

[data-sterowanie-page] .sterowanie-rail-note {
  position: relative;
  display: flex;
  min-width: 0;
  flex-direction: column;
  align-items: stretch;
  gap: var(--space-3);
  margin: 0;
}

[data-sterowanie-page] .sterowanie-rail-note > * {
  min-width: 0;
}

[data-sterowanie-page] .sterowanie-rail-note p {
  margin: 0;
}

[data-sterowanie-page] .sterowanie-rail-note ul {
  display: grid;
  gap: var(--space-2);
  margin: 0;
}

[data-sterowanie-page] .sterowanie-rail-note li {
  position: relative;
  padding-inline-start: 1.25rem;
}

[data-sterowanie-page] .sterowanie-rail-note li::before {
  position: absolute;
  inset-inline-start: 0;
  color: var(--color-ink);
  content: "↳";
  font-weight: 800;
}

[data-sterowanie-page] .sterowanie-rail-note--yellow {
  transform: rotate(-1deg);
}

[data-sterowanie-page] .sterowanie-rail-note--yellow::after {
  position: absolute;
  top: -1.2rem;
  left: -1.75rem;
  width: 2rem;
  border-top: 2px solid var(--color-marker-red);
  content: "";
  transform: rotate(24deg);
}

[data-sterowanie-page] .sterowanie-rail-note--yellow:hover::after {
  animation: sterowanie-arrow 180ms ease-out 1;
}

[data-sterowanie-page] .sterowanie-steps-intro {
  width: 100%;
  max-width: 38.75rem;
}

[data-sterowanie-page] .sterowanie-steps {
  position: relative;
  display: grid;
  gap: var(--space-5);
  width: 100%;
  max-width: 47.5rem;
  margin: var(--space-6) 0 0;
}

[data-sterowanie-page] .sterowanie-steps::before {
  position: absolute;
  top: 1rem;
  bottom: 1rem;
  left: 2.2rem;
  border-inline-start: 2px dashed var(--color-rule-blue);
  content: "";
}

[data-sterowanie-page] .sterowanie-step {
  position: relative;
  display: grid;
  grid-template-columns: 4.5rem minmax(0, 1fr);
  gap: var(--space-4);
  min-width: 0;
  width: 100%;
  padding: var(--space-4);
}

[data-sterowanie-page] .sterowanie-step > * {
  min-width: 0;
}

[data-sterowanie-page] .sterowanie-step:target {
  background: var(--color-paper-dark);
}

[data-sterowanie-page] .sterowanie-step__number {
  z-index: 1;
  display: flex;
  width: 4.5rem;
  height: 4.5rem;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--color-ink);
  background: var(--color-paper);
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 800;
}

[data-sterowanie-page] .sterowanie-step__body {
  display: flex;
  min-width: 0;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-2);
}

[data-sterowanie-page] .sterowanie-step__body > * {
  min-width: 0;
}

[data-sterowanie-page] .sterowanie-step h3,
[data-sterowanie-page] .sterowanie-step p {
  margin: 0;
}

[data-sterowanie-page] .sterowanie-step-label,
[data-sterowanie-page] .sterowanie-diagnostic-label {
  display: inline-block;
  width: fit-content;
  border: 1px solid var(--color-ink);
  padding: var(--space-1) var(--space-2);
  font-size: var(--text-small);
  font-weight: 800;
  line-height: 1.2;
}

[data-sterowanie-page] .sterowanie-step-label--before { background: var(--color-sun-yellow); }
[data-sterowanie-page] .sterowanie-step-label--during { background: var(--color-paper-dark); }
[data-sterowanie-page] .sterowanie-step-label--after { background: var(--color-mint); }
[data-sterowanie-page] .sterowanie-step-label--finish { background: rgb(217 75 61 / 18%); }

[data-sterowanie-page] .sterowanie-diagnostic-intro {
  width: 100%;
  max-width: 40.625rem;
}

[data-sterowanie-page] .sterowanie-diagnostic-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-5);
  width: 100%;
  margin-top: var(--space-6);
}

[data-sterowanie-page] .sterowanie-diagnostic-grid > article {
  min-width: 0;
  width: 100%;
}

[data-sterowanie-page] .sterowanie-diagnostic-card {
  display: flex;
  min-width: 0;
  min-height: 100%;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-3);
}

[data-sterowanie-page] .sterowanie-diagnostic-card > * {
  min-width: 0;
}

[data-sterowanie-page] .sterowanie-diagnostic-card h3 {
  margin: 0;
}

[data-sterowanie-page] .sterowanie-diagnostic-card dl {
  display: grid;
  gap: var(--space-2);
  width: 100%;
  margin: 0;
}

[data-sterowanie-page] .sterowanie-diagnostic-card dt {
  font-size: var(--text-small);
  font-weight: 800;
}

[data-sterowanie-page] .sterowanie-diagnostic-card dd {
  margin: 0;
}

[data-sterowanie-page] .sterowanie-diagnostic-card--summary {
  background: var(--color-sun-yellow);
}

[data-sterowanie-page] .sterowanie-diagnostic-card--summary ul {
  display: grid;
  gap: var(--space-2);
  margin: 0;
}

[data-sterowanie-page] .sterowanie-diagnostic-card--summary li {
  position: relative;
  padding-inline-start: 1.25rem;
}

[data-sterowanie-page] .sterowanie-diagnostic-card--summary li::before {
  position: absolute;
  inset-inline-start: 0;
  content: "✓";
  font-weight: 900;
}

[data-sterowanie-page] .sterowanie-terrain-prompt {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3);
  margin: var(--space-4) 0 0;
}

[data-sterowanie-page] .sterowanie-terrain-prompt > p {
  min-width: 0;
  margin: 0;
  border-inline-start: 3px solid var(--color-sun-yellow);
  padding-inline-start: var(--space-3);
  font-weight: 700;
}

[data-sterowanie-page] .sterowanie-tips-intro {
  width: 100%;
  max-width: 40rem;
}

[data-sterowanie-page] .sterowanie-tips-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-4);
  width: 100%;
  margin-top: var(--space-6);
}

[data-sterowanie-page] .sterowanie-tips-grid > article {
  min-width: 0;
  width: 100%;
}

[data-sterowanie-page] .sterowanie-mini-card {
  display: flex;
  min-width: 0;
  min-height: 100%;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-5);
}

[data-sterowanie-page] .sterowanie-mini-card > * {
  min-width: 0;
}

[data-sterowanie-page] .sterowanie-faq-wrap {
  width: 100%;
  max-width: 46.25rem;
}

[data-sterowanie-page] .sterowanie-faq-intro {
  max-width: 43rem;
}

[data-sterowanie-page] .sterowanie-faq-list {
  display: grid;
  gap: var(--space-3);
}

[data-sterowanie-page] .sterowanie-faq-item {
  min-width: 0;
  width: 100%;
  border: var(--border-ink);
  background: var(--color-paper-dark);
}

[data-sterowanie-page] .sterowanie-faq-trigger {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 2.75rem;
  gap: var(--space-3);
  width: 100%;
  min-height: 3.5rem;
  align-items: center;
  border: 0;
  background: var(--color-paper);
  color: var(--color-ink);
  padding: var(--space-4);
  text-align: left;
}

[data-sterowanie-page] .sterowanie-faq-trigger:hover {
  background: var(--color-paper);
  box-shadow: none;
  color: var(--color-ink);
  transform: none;
}

[data-sterowanie-page] .sterowanie-faq-question,
[data-sterowanie-page] .sterowanie-faq-indicator {
  min-width: 0;
}

[data-sterowanie-page] .sterowanie-faq-indicator {
  display: flex;
  width: 2.75rem;
  height: 2.75rem;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--color-ink);
  font-size: 1.4rem;
  line-height: 1;
  transition: transform var(--transition-fast);
}

[data-sterowanie-page] .sterowanie-faq-trigger[aria-expanded="true"] .sterowanie-faq-indicator {
  transform: rotate(90deg);
}

[data-sterowanie-page] .sterowanie-faq-panel {
  padding: var(--space-5);
}

[data-sterowanie-page] .sterowanie-faq-panel p {
  margin: 0;
}

[data-sterowanie-page] .sterowanie-cta-card {
  position: relative;
  display: grid;
  grid-template-columns: minmax(460px, 38.75rem) minmax(0, 1fr);
  gap: var(--space-6);
  width: 100%;
  max-width: 61.25rem;
  margin-inline: auto;
  overflow: hidden;
  background: var(--color-paper-dark);
}

[data-sterowanie-page] .sterowanie-cta-card::after {
  align-self: center;
  min-width: 0;
  height: 11rem;
  border: 4px solid var(--color-ink);
  border-radius: 50% 46% 42% 54%;
  border-inline-start-color: var(--color-rule-blue);
  content: "";
  transform: rotate(-15deg) translateX(14%);
}

[data-sterowanie-page] .sterowanie-cta-copy {
  display: flex;
  min-width: 0;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-3);
}

[data-sterowanie-page] .sterowanie-cta-copy > * {
  min-width: 0;
}

[data-sterowanie-page] .sterowanie-cta-copy h2,
[data-sterowanie-page] .sterowanie-cta-copy p {
  margin: 0;
}

[data-sterowanie-page] .sterowanie-cta-copy p {
  max-width: 38.75rem;
}

[data-sterowanie-page] .sterowanie-cta-action {
  position: relative;
  width: fit-content;
}

[data-sterowanie-page] .sterowanie-cta-action::after {
  position: absolute;
  top: 50%;
  right: -4rem;
  width: 3rem;
  border-top: 2px solid var(--color-marker-red);
  content: "";
  transform: rotate(-8deg);
}

[data-sterowanie-page] .sterowanie-cta-action:hover::after {
  animation: sterowanie-arrow 180ms ease-out 1;
}

[data-sterowanie-page] .sterowanie-cta-disclaimer {
  max-width: 35rem;
  color: var(--color-muted-ink);
  font-size: var(--text-small);
  line-height: 1.5;
}

[data-sterowanie-page] .sterowanie-cta-disclaimer strong {
  color: var(--color-ink);
}

@keyframes sterowanie-arrow {
  from { transform: translateX(-5px) rotate(-8deg); }
  to { transform: translateX(0) rotate(-8deg); }
}

@media (max-width: 59.9375rem) {
  [data-sterowanie-page] .sterowanie-hero__layout {
    grid-template-columns: minmax(0, 1fr);
  }

  [data-sterowanie-page] .sterowanie-hero__copy {
    max-width: 38.75rem;
  }

  [data-sterowanie-page] .sterowanie-hero__media {
    max-width: 46.25rem;
    transform: none;
  }

  [data-sterowanie-page] .sterowanie-editorial-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  [data-sterowanie-page] .sterowanie-rail,
  [data-sterowanie-page] .sterowanie-rail--lower {
    max-width: 46.25rem;
    margin-top: 0;
  }

  [data-sterowanie-page] .sterowanie-rail-note--yellow {
    transform: none;
  }

  [data-sterowanie-page] .sterowanie-cta-card {
    grid-template-columns: minmax(0, 1fr);
  }

  [data-sterowanie-page] .sterowanie-cta-card::after {
    order: -1;
    width: 100%;
    height: 2.5rem;
    transform: rotate(-2deg);
  }
}

@media (max-width: 44.9375rem) {
  [data-sterowanie-page] .sterowanie-section {
    padding-block: var(--space-7);
  }

  [data-sterowanie-page] .sterowanie-hero {
    padding-block-start: var(--space-7);
  }

  [data-sterowanie-page] .sterowanie-hero__lead,
  [data-sterowanie-page] .sterowanie-hero__note,
  [data-sterowanie-page] .sterowanie-intro,
  [data-sterowanie-page] .sterowanie-steps-intro,
  [data-sterowanie-page] .sterowanie-diagnostic-intro,
  [data-sterowanie-page] .sterowanie-tips-intro,
  [data-sterowanie-page] .sterowanie-faq-intro {
    max-width: none;
  }

  [data-sterowanie-page] .sterowanie-hero__actions,
  [data-sterowanie-page] .sterowanie-hero__actions .button,
  [data-sterowanie-page] .sterowanie-cta-action,
  [data-sterowanie-page] .sterowanie-cta-action .button {
    width: 100%;
  }

  [data-sterowanie-page] .sterowanie-hero__media::after,
  [data-sterowanie-page] .sterowanie-cta-action::after {
    display: none;
  }

  [data-sterowanie-page] .sterowanie-decision-grid,
  [data-sterowanie-page] .sterowanie-diagnostic-grid,
  [data-sterowanie-page] .sterowanie-tips-grid,
  [data-sterowanie-page] .sterowanie-terrain-prompt {
    grid-template-columns: minmax(0, 1fr);
  }

  [data-sterowanie-page] .sterowanie-steps::before {
    display: none;
  }

  [data-sterowanie-page] .sterowanie-step {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-3);
    padding-inline: 0;
  }

  [data-sterowanie-page] .sterowanie-step__number {
    width: 3.5rem;
    height: 3.5rem;
  }

  [data-sterowanie-page] .sterowanie-faq-trigger {
    grid-template-columns: minmax(0, 1fr) 2.75rem;
    padding: var(--space-3);
    font-size: 1rem;
  }

  [data-sterowanie-page] .sterowanie-faq-panel {
    padding: var(--space-4);
  }

  [data-sterowanie-page] .sterowanie-cta-card {
    padding: var(--space-5);
  }

  [data-sterowanie-page] .sterowanie-cta-card::after {
    height: 2rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  [data-sterowanie-page] .sterowanie-hero__media:hover::after,
  [data-sterowanie-page] .sterowanie-rail-note--yellow:hover::after,
  [data-sterowanie-page] .sterowanie-cta-action:hover::after {
    animation: none;
  }
}


.kombinacje-kol-page {
  background-color: var(--color-paper);
  background-image: linear-gradient(to bottom, transparent 31px, rgb(111 166 200 / 12%) 32px);
  background-size: 100% 32px;
}

.kombinacje-kol-page .section { position: relative; }
.kombinacje-kol-page .eyebrow { margin-block-end: var(--space-3); }
.kombinacje-kol-page h2 { margin-block-end: var(--space-4); }
.kombinacje-kol-page h3 { margin-block-end: var(--space-3); }

.kk-hero__grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(390px, 5fr); gap: var(--space-7); align-items: center; }
.kk-hero__copy, .kk-hero__media-wrap { min-width: 0; width: 100%; }
.kk-hero__copy { max-width: 650px; }
.kk-hero__copy h1 { position: relative; display: inline; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.kk-hero__copy h1::after { position: absolute; right: 1%; bottom: -0.16em; left: 0; height: 0.12em; background: var(--color-rule-blue); content: ""; transform: rotate(-1deg); }
.kk-hero__lead { max-width: 60ch; }
.kk-hero__action { display: flex; width: 100%; min-width: 0; flex-direction: column; align-items: flex-start; gap: var(--space-3); }
.kk-hero__action > * { min-width: 0; }
.kk-hero__disclaimer { max-width: 58ch; margin: 0; color: var(--color-muted-ink); font-size: var(--text-small); line-height: 1.45; }
.kk-hero__figure { margin: 0; }
.kk-hero__media { width: 100%; aspect-ratio: 16 / 10; }
.kk-hero__media img { width: 100%; height: 100%; object-fit: cover; object-position: center bottom; }
.kk-hero__media-wrap { position: relative; padding-block-end: 3.5rem; }
.kk-hero__note { position: absolute; bottom: 0; left: -1.5rem; width: min(15rem, calc(100% - 1rem)); margin: 0; transform: rotate(-1deg); }
.kk-hero__note p { margin: 0; font-size: 0.95rem; line-height: 1.45; }
.kk-hero__arrow { position: absolute; top: -1.3rem; right: 0.8rem; color: var(--color-marker-red); font-family: var(--font-display); font-size: 2rem; line-height: 1; pointer-events: none; }
.kk-hero__media-wrap:hover .kk-hero__arrow { transform: translate(4px, -4px); transition: transform var(--transition-fast); }

.kk-rail-layout { display: grid; grid-template-columns: minmax(0, 46.25rem) minmax(0, 15rem); gap: var(--space-6); align-items: start; }
.kk-criteria__core, .kk-criteria__rail { min-width: 0; width: 100%; }
.kk-criteria__lead { max-width: 68ch; }
.kk-criteria__lead span { text-decoration: underline 0.12em var(--color-marker-red); text-underline-offset: 0.17em; }
.kk-criteria__cards { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-4); }
.kk-criterion-card { position: relative; width: 100%; min-width: 0; border: var(--border-ink); border-radius: var(--radius-default); padding: var(--space-5); }
.kk-criterion-card::after, .kk-scenario::after { position: absolute; inset: 5px -5px -5px 5px; z-index: -1; border: 1px solid var(--color-ink); content: ""; }
.kk-criterion-card--paper { background: var(--color-paper-dark); }
.kk-criterion-card--mint { background: var(--color-mint); }
.kk-card-icon { display: block; margin-block-end: var(--space-2); font-family: var(--font-display); font-size: 1.6rem; font-weight: 800; }
.kk-criterion-card p:last-child, .kk-scenario p:last-child, .kk-diagnostic p:last-child { margin-block-end: 0; }
.kk-observe { margin-block-start: var(--space-4); color: var(--color-muted-ink); font-size: var(--text-small); }
.kk-criteria__rail { margin-block-start: 5.9rem; }
.kk-criteria__rail p { margin: 0; font-size: 0.95rem; line-height: 1.5; }

.kk-scenarios__intro { width: min(100%, 42.5rem); min-width: 0; }
.kk-scenarios__intro p { max-width: 62ch; }
.kk-scenarios__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-5); align-items: stretch; }
.kk-scenario { position: relative; width: 100%; min-width: 0; border: var(--border-ink); border-radius: var(--radius-default); padding: var(--space-5); }
.kk-scenario--paper { background: var(--color-paper-dark); }
.kk-scenario--yellow { background: var(--color-sun-yellow); }
.kk-scenario--mint { background: var(--color-mint); }
.kk-scenario .meta { margin-block-end: var(--space-2); }
.kk-check { margin-block-start: var(--space-4); color: var(--color-muted-ink); font-size: var(--text-small); }
.kk-scenarios__rule { width: min(100%, 38.75rem); margin-block-start: var(--space-6); border-bottom: 2px solid var(--color-rule-blue); padding-block-end: var(--space-2); }

.kk-diagnostics__intro { width: min(100%, 46.25rem); min-width: 0; }
.kk-diagnostics__intro p { max-width: 68ch; }
.kk-diagnostics__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-5); }
.kk-diagnostic { width: 100%; min-width: 0; border: var(--border-ink); border-radius: var(--radius-default); background: var(--color-paper-dark); padding: var(--space-5); }
.kk-diagnostic--mint { background: var(--color-mint); }
.kk-diagnostic .meta { margin-block-end: var(--space-2); }
.kk-next { border-inline-start: 3px solid var(--color-rule-blue); padding-inline-start: var(--space-3); color: var(--color-muted-ink); font-size: var(--text-small); }
.kk-method { display: flex; width: min(100%, 60rem); min-width: 0; flex-direction: column; gap: var(--space-3); margin-block-start: var(--space-6); border: var(--border-ink); background: var(--color-sun-yellow); padding: var(--space-5); }
.kk-method > * { min-width: 0; margin: 0; }
.kk-method ol { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); padding-inline-start: 1.25rem; }
.kk-method li { min-width: 0; }

.kk-reading__grid { display: grid; grid-template-columns: minmax(420px, 1.1fr) minmax(400px, 0.9fr); gap: var(--space-7); align-items: start; }
.kk-reading__figure, .kk-reading__copy { width: 100%; min-width: 0; }
.kk-reading__figure { margin: 0; }
.kk-reading__media { width: 100%; aspect-ratio: 4 / 3; }
.kk-reading__media img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.kk-reading__copy { max-width: 32.5rem; }
.kk-reading__copy p { max-width: 58ch; }
.kk-reading__copy h3 + p { border-inline-start: 3px solid var(--color-rule-blue); padding-inline-start: var(--space-3); }
.kk-reading__note { display: flex; width: 100%; min-width: 0; flex-direction: column; gap: var(--space-2); margin: 0; }
.kk-reading__note > * { min-width: 0; margin: 0; }

.kk-process__intro { width: min(100%, 42.5rem); min-width: 0; }
.kk-process__intro p { max-width: 60ch; }
.kk-process__grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--space-4); align-items: stretch; }
.kk-step { display: grid; grid-template-columns: 2.25rem minmax(0, 1fr); gap: var(--space-2); width: 100%; min-width: 0; border: var(--border-ink); background: var(--color-white); padding: var(--space-4); }
.kk-step > * { min-width: 0; }
.kk-step--paper { background: var(--color-paper-dark); }
.kk-step--yellow { background: var(--color-sun-yellow); }
.kk-step--mint { background: var(--color-mint); }
.kk-step__number { display: flex; width: 2.25rem; height: 2.25rem; align-items: center; justify-content: center; border: 2px solid var(--color-ink); border-radius: 50%; font-family: var(--font-display); font-weight: 800; }
.kk-step h3 { font-size: 1.15rem; }
.kk-step p { margin: 0; font-size: 0.92rem; line-height: 1.5; }

.kk-terrain__grid { display: grid; grid-template-columns: minmax(400px, 56fr) minmax(400px, 44fr); gap: 2.5rem; align-items: start; }
.kk-terrain__copy, .kk-terrain__figure { width: 100%; min-width: 0; }
.kk-terrain__copy { max-width: 42.5rem; }
.kk-terrain__lead { max-width: 66ch; }
.kk-terrain__item { width: 100%; min-width: 0; border-bottom: var(--border-rule); padding-block: var(--space-4); }
.kk-terrain__item--paper { border: var(--border-ink); background: var(--color-paper-dark); padding: var(--space-4); }
.kk-terrain__item p { max-width: 56ch; margin: 0; }
.kk-terrain__figure { margin: 6.2rem 0 0; }
.kk-terrain__media { width: 100%; aspect-ratio: 3 / 2; }
.kk-terrain__media img { width: 100%; height: 100%; object-fit: cover; object-position: center; }

.kk-checklist__grid { display: grid; grid-template-columns: minmax(0, 46.25rem) minmax(240px, 17.5rem); gap: var(--space-7); align-items: start; }
.kk-checklist__core, .kk-checklist__note { width: 100%; min-width: 0; }
.kk-checklist__lead { max-width: 64ch; }
.kk-checklist__items { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-3); }
.kk-checklist__items article { display: grid; grid-template-columns: 2rem minmax(0, 1fr); gap: var(--space-3); width: 100%; min-width: 0; align-items: start; border-bottom: var(--border-rule); padding-block: var(--space-3); }
.kk-checklist__items article > * { min-width: 0; }
.kk-checklist__items span { display: flex; width: 2rem; height: 2rem; align-items: center; justify-content: center; border: 2px solid var(--color-ink); background: var(--color-mint); font-weight: 900; }
.kk-checklist__items p { max-width: 58ch; margin: 0; }
.kk-checklist__note { display: flex; flex-direction: column; gap: var(--space-3); }
.kk-checklist__note > * { min-width: 0; margin: 0; }
.kk-checklist__note ol { padding-inline-start: 1.25rem; }

.kk-faq__core { width: min(100%, 46.25rem); min-width: 0; }
.kk-faq__list { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-3); }
.kk-faq-item { width: 100%; min-width: 0; border: var(--border-ink); background: var(--color-white); }
.kk-faq-item h3 { margin: 0; }
.kk-faq-item button { display: grid; grid-template-columns: minmax(0, 1fr) 1.5rem; gap: var(--space-3); width: 100%; min-width: 0; min-height: 3.25rem; align-items: center; border: 0; background: transparent; color: var(--color-ink); padding: var(--space-3) var(--space-4); font-family: var(--font-display); font-size: 1.15rem; font-weight: 800; line-height: 1.25; text-align: left; }
.kk-faq-item button:hover { box-shadow: none; background: var(--color-paper-dark); color: var(--color-ink); transform: none; }
.kk-faq-item button span { display: block; justify-self: end; font-family: var(--font-body); font-size: 1.8rem; line-height: 1; transition: transform var(--transition-fast); }
.kk-faq-item.is-open button span { transform: rotate(90deg); }
.kk-faq-item__answer { border-top: var(--border-rule); border-inline-start: 4px solid var(--color-rule-blue); padding: var(--space-4); }
.kk-faq-item__answer p { max-width: 60ch; margin: 0; }
.kk-final-card { display: flex; width: min(100%, 47.5rem); min-width: 0; flex-direction: column; align-items: flex-start; gap: var(--space-4); margin-block-start: var(--space-7); border: var(--border-ink); background: var(--color-paper-dark); padding: var(--space-6); }
.kk-final-card > * { min-width: 0; margin: 0; }
.kk-final-card p { max-width: 56ch; }
.kk-final-card__note { color: var(--color-muted-ink); font-size: var(--text-small); line-height: 1.45; }

@media (max-width: 67.4375rem) {
  .kk-hero__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-6); }
  .kk-hero__media-wrap { padding-block-end: 0; }
  .kk-hero__note { position: relative; bottom: auto; left: auto; width: min(100%, 21rem); margin-block-start: var(--space-4); transform: none; }
  .kk-criteria__rail { margin-block-start: 6.5rem; }
  .kk-scenarios__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kk-scenarios__grid > :first-child { grid-column: 1 / -1; }
  .kk-process__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .kk-terrain__grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-5); }
  .kk-terrain__figure { width: min(100%, 42.5rem); margin: 0; }
}

@media (max-width: 59.9375rem) {
  .kk-rail-layout { grid-template-columns: minmax(0, 1fr); gap: var(--space-5); }
  .kk-criteria__rail { width: min(100%, 22.5rem); margin: 0; }
  .kk-reading__grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-5); }
  .kk-reading__figure { width: min(100%, 42.5rem); }
  .kk-reading__copy { max-width: 42.5rem; }
  .kk-checklist__grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-5); }
  .kk-checklist__note { width: min(100%, 22.5rem); }
}

@media (max-width: 53.0625rem) {
  .kk-diagnostics__grid { grid-template-columns: minmax(0, 1fr); }
  .kk-method ol { grid-template-columns: minmax(0, 1fr); gap: var(--space-2); }
}

@media (max-width: 44.9375rem) {
  .kk-hero__grid, .kk-scenarios__grid, .kk-process__grid { grid-template-columns: minmax(0, 1fr); }
  .kk-hero__copy { max-width: none; }
  .kk-hero__copy h1 { font-size: clamp(2.75rem, 12vw, 3.5rem); }
  .kk-hero__lead { max-width: none; }
  .kk-hero__action { align-items: stretch; }
  .kk-hero__action .button { width: 100%; }
  .kk-hero__note { width: min(100%, 21.25rem); }
  .kk-scenarios__grid > :first-child { grid-column: auto; }
  .kk-criterion-card, .kk-scenario, .kk-diagnostic { padding: var(--space-4); }
  .kk-method { padding: var(--space-4); }
  .kk-process__grid { gap: var(--space-3); }
  .kk-step { grid-template-columns: 2.25rem minmax(0, 1fr); }
  .kk-terrain__figure { width: 100%; }
  .kk-checklist__note { width: 100%; order: -1; }
  .kk-final-card { width: 100%; padding: var(--space-4); }
  .kk-final-card .button { width: 100%; }
  .kk-faq-item button { padding-inline: var(--space-3); font-size: 1.05rem; }
  .kk-faq-item__answer { padding: var(--space-3); }
}

@media (prefers-reduced-motion: reduce) {
  .kk-hero__media-wrap:hover .kk-hero__arrow, .kk-faq-item button span { transition: none; transform: none; }
  .kk-faq-item.is-open button span { transform: rotate(90deg); }
}


.gallery-page {
  overflow: clip;
}

.gallery-page__hero-grid,
.gallery-page__reading-layout,
.gallery-page__cta-panel {
  display: grid;
  min-width: 0;
}

.gallery-page__hero-grid {
  grid-template-columns: minmax(0, 1.15fr) minmax(380px, 1fr);
  align-items: center;
  gap: 2.5rem;
}

.gallery-page__hero-copy,
.gallery-page__hero-lead,
.gallery-page__hero-action,
.gallery-page__reading-main,
.gallery-page__filter-intro,
.gallery-page__gallery-intro,
.gallery-page__takeaways-intro,
.gallery-page__comparison-intro,
.gallery-page__cta-copy,
.gallery-page__cta-action,
.gallery-page__faq-inner,
.gallery-page__closing-copy,
.gallery-page__card-copy,
.gallery-page__lightbox-copy {
  min-width: 0;
}

.gallery-page__hero-copy {
  width: min(100%, 38.75rem);
}

.gallery-page__hero-copy > .eyebrow,
.gallery-page__hero-copy > h1,
.gallery-page__hero-lead,
.gallery-page__hero-action {
  margin-block: 0;
}

.gallery-page__hero-copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-5);
}

.gallery-page__hero-copy h1 {
  max-width: 11ch;
}

.gallery-page__hero-lead {
  width: min(100%, 35rem);
}

.gallery-page__hero-lead p:last-child,
.gallery-page__hero-action p:last-child {
  margin-block-end: 0;
}

.gallery-page__hero-action {
  display: flex;
  width: min(100%, 35rem);
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-3);
}

.gallery-page__hero-action .button {
  min-width: 15rem;
}

.gallery-page__independence-note {
  max-width: 31rem;
  color: var(--color-muted-ink);
  font-size: var(--text-small);
}

.gallery-page__hero-figure,
.gallery-page__card figure {
  width: 100%;
  min-width: 0;
  margin: 0;
}

.gallery-page__hero-figure {
  justify-self: end;
}

.gallery-page__hero-figure figcaption,
.gallery-page__card figcaption {
  margin-block-start: 0;
}

.gallery-page__image-trigger {
  display: block;
  width: 100%;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  border: var(--border-ink);
  border-radius: var(--radius-note);
  background: var(--color-paper-dark);
  padding: 0;
  cursor: zoom-in;
}

.gallery-page__image-trigger:hover {
  background: var(--color-paper-dark);
  box-shadow: none;
  color: inherit;
  transform: none;
}

.gallery-page__image-trigger img {
  width: 100%;
  max-width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
}

.gallery-page__reading-layout {
  grid-template-columns: minmax(0, 46.25rem) minmax(12.5rem, 15rem);
  align-items: start;
  gap: var(--space-6);
}

.gallery-page__reading-main {
  width: min(100%, 46.25rem);
}

.gallery-page__reading-main > .eyebrow,
.gallery-page__reading-main > h2,
.gallery-page__observation {
  margin-block: 0;
}

.gallery-page__reading-main {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--space-5);
}

.gallery-page__observation {
  display: grid;
  grid-template-columns: 3.25rem minmax(0, 1fr);
  gap: var(--space-3);
  padding-block-start: var(--space-4);
  border-top: var(--border-rule);
}

.gallery-page__observation-number {
  min-width: 0;
  color: var(--color-marker-red);
  font-family: var(--font-display);
  font-size: 1.8rem;
  font-weight: 800;
  line-height: 1;
}

.gallery-page__observation-copy h3,
.gallery-page__observation-copy p {
  margin-block: 0;
}

.gallery-page__observation-copy {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.gallery-page__observation-copy p {
  max-width: 44rem;
}

.gallery-page__editorial-note {
  width: 100%;
  min-width: 0;
  border: var(--border-ink);
  border-radius: var(--radius-note);
  background: var(--color-sun-yellow);
  box-shadow: var(--shadow-note);
  padding: var(--space-5);
  transform: rotate(-0.6deg);
}

.gallery-page__editorial-note > .eyebrow,
.gallery-page__editorial-note > p {
  margin-block: 0;
}

.gallery-page__editorial-note {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.gallery-page__editorial-note p {
  font-size: 0.96rem;
}

.gallery-page__filter-intro,
.gallery-page__gallery-intro,
.gallery-page__takeaways-intro,
.gallery-page__comparison-intro {
  width: min(100%, 46.25rem);
}

.gallery-page__filter-intro > *,
.gallery-page__gallery-intro > *,
.gallery-page__takeaways-intro > *,
.gallery-page__comparison-intro > * {
  margin-block: 0;
}

.gallery-page__filter-intro,
.gallery-page__gallery-intro,
.gallery-page__takeaways-intro,
.gallery-page__comparison-intro {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.gallery-page__filter-controls {
  display: flex;
  width: 100%;
  min-width: 0;
  flex-wrap: wrap;
  align-items: stretch;
  gap: var(--space-3);
  margin-block-start: var(--space-5);
}

.gallery-page__filter-controls > * {
  min-width: 7rem;
}

.gallery-page__filter-button {
  min-height: 2.75rem;
  border: 2px solid var(--color-ink);
  border-radius: var(--radius-default);
  background: var(--color-paper-dark);
  color: var(--color-ink);
  padding: 0.65rem 1rem;
  font-size: 0.9375rem;
}

.gallery-page__filter-button:hover,
.gallery-page__filter-button.is-active {
  background: var(--color-sun-yellow);
  color: var(--color-ink);
}

.gallery-page__filter-button.is-active {
  box-shadow: inset 0 -4px 0 var(--color-marker-red);
}

.gallery-page__grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--space-5);
  align-items: start;
  margin-block-start: var(--space-6);
}

.gallery-page__card {
  display: flex;
  width: 100%;
  min-width: 0;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  border: var(--border-ink);
  border-radius: var(--radius-default);
  background: var(--color-paper-dark);
  padding: 0;
  overflow: hidden;
  transition: box-shadow var(--transition-fast), transform var(--transition-fast);
}

.gallery-page__card:hover {
  box-shadow: var(--shadow-note);
  transform: translateY(-2px) rotate(0.25deg);
}

.gallery-page__card[hidden] {
  display: none;
}

.gallery-page__card--start { grid-column: 1 / span 7; }
.gallery-page__card--wheels { grid-column: 8 / span 5; }
.gallery-page__card--vehicle { grid-column: 1 / span 6; }
.gallery-page__card--obstacle { grid-column: 7 / span 6; }
.gallery-page__card--finish { grid-column: 1 / span 8; }

.gallery-page__card--wheels .gallery-page__image-trigger img,
.gallery-page__card--vehicle .gallery-page__image-trigger img,
.gallery-page__card--obstacle .gallery-page__image-trigger img {
  aspect-ratio: 4 / 3;
}

.gallery-page__card-copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-5);
}

.gallery-page__card-copy > * {
  margin-block: 0;
}

.gallery-page__card-copy h3 {
  font-size: var(--text-card-title);
}

.gallery-page__card--start .gallery-page__card-copy p,
.gallery-page__card--finish .gallery-page__card-copy p {
  max-width: 40rem;
}

.gallery-page__text-trigger {
  min-height: 2.75rem;
  border: 0;
  border-bottom: 2px solid var(--color-rule-blue);
  border-radius: 0;
  background: transparent;
  color: var(--color-ink);
  padding: 0.3rem 0;
  font-weight: 800;
}

.gallery-page__text-trigger:hover {
  background: transparent;
  box-shadow: none;
  color: var(--color-ink);
  transform: translateX(4px);
}

.gallery-page__takeaway-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-5);
  align-items: stretch;
  margin-block-start: var(--space-6);
}

.gallery-page__takeaway {
  display: flex;
  width: 100%;
  min-width: 0;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-3);
  border: var(--border-ink);
  border-radius: var(--radius-default);
  padding: var(--space-5);
  transition: box-shadow var(--transition-fast), transform var(--transition-fast);
}

.gallery-page__takeaway > * {
  margin-block: 0;
}

.gallery-page__takeaway:hover {
  box-shadow: var(--shadow-note);
  transform: translateY(-2px) rotate(-0.25deg);
}

.gallery-page__takeaway h3 {
  font-size: var(--text-card-title);
}

.gallery-page__takeaway--paper { background: var(--color-paper-dark); }
.gallery-page__takeaway--mint { background: var(--color-mint); }
.gallery-page__takeaway--yellow { background: var(--color-sun-yellow); }

.gallery-page__comparison-table-wrap {
  width: 100%;
  min-width: 0;
  margin-block-start: var(--space-6);
}

.gallery-page__comparison-table {
  table-layout: fixed;
}

.gallery-page__comparison-table th,
.gallery-page__comparison-table td {
  padding: 1.25rem;
}

.gallery-page__comparison-table th:first-child,
.gallery-page__comparison-table td:first-child { width: 18%; }
.gallery-page__comparison-table th:nth-child(2),
.gallery-page__comparison-table td:nth-child(2) { width: 38%; }
.gallery-page__comparison-table th:nth-child(3),
.gallery-page__comparison-table td:nth-child(3) { width: 44%; }

.gallery-page__comparison-table strong {
  display: block;
  margin-block-end: var(--space-2);
}

.gallery-page__comparison-cards {
  display: none;
}

.gallery-page__cta-panel {
  grid-template-columns: minmax(0, 8fr) minmax(15rem, 4fr);
  align-items: center;
  gap: var(--space-6);
  border: var(--border-ink);
  border-radius: var(--radius-default);
  background: var(--color-paper-dark);
  padding: var(--space-6);
}

.gallery-page__cta-copy {
  width: min(100%, 41.25rem);
}

.gallery-page__cta-copy > *,
.gallery-page__cta-action > * {
  margin-block: 0;
}

.gallery-page__cta-copy,
.gallery-page__cta-action {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-4);
}

.gallery-page__cta-action {
  width: 100%;
}

.gallery-page__cta-action .button {
  width: min(100%, 17rem);
}

.gallery-page__cta-action p {
  max-width: 17.5rem;
  color: var(--color-muted-ink);
  font-size: var(--text-small);
}

.gallery-page__faq-inner {
  width: min(100%, 46.25rem);
}

.gallery-page__faq-inner > .eyebrow,
.gallery-page__faq-inner > h2,
.gallery-page__faq-inner > p,
.gallery-page__accordion-list {
  margin-block: 0;
}

.gallery-page__faq-inner {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--space-4);
}

.gallery-page__accordion-list {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--space-3);
  margin-block-start: var(--space-3);
}

.gallery-page__accordion-item {
  width: 100%;
  min-width: 0;
  border: var(--border-ink);
  background: rgb(255 253 247 / 72%);
}

.gallery-page__accordion-item h3 {
  margin: 0;
}

.gallery-page__accordion-item h3 button {
  display: grid;
  width: 100%;
  min-width: 0;
  min-height: 3rem;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-3);
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--color-ink);
  padding: var(--space-4);
  font-family: var(--font-display);
  font-size: 1.12rem;
  font-weight: 800;
  line-height: 1.25;
  text-align: left;
}

.gallery-page__accordion-item h3 button:hover {
  background: var(--color-paper-dark);
  box-shadow: none;
  color: var(--color-ink);
  transform: none;
}

.gallery-page__accordion-item h3 button span {
  display: block;
  transition: transform var(--transition-fast);
}

.gallery-page__accordion-item h3 button[aria-expanded="true"] span {
  transform: rotate(90deg);
}

.gallery-page__accordion-panel {
  border-top: var(--border-rule);
  padding: 0 var(--space-4) var(--space-4);
}

.gallery-page__accordion-panel p {
  max-width: 40rem;
  margin: var(--space-4) 0 0;
}

.gallery-page__closing-copy {
  width: min(100%, 46.25rem);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-4);
}

.gallery-page__closing-copy > * {
  margin-block: 0;
}

.gallery-page__closing-copy h2,
.gallery-page__closing-copy p {
  max-width: 40rem;
}

.gallery-page__return-link {
  display: inline-flex;
  min-height: 2.75rem;
  align-items: center;
  font-weight: 800;
}

.gallery-page__lightbox[hidden] {
  display: none;
}

.gallery-page__lightbox {
  position: fixed;
  z-index: 10000;
  inset: 0;
  display: grid;
  place-items: center;
  padding: var(--space-4);
}

.gallery-page__lightbox-backdrop {
  position: absolute;
  z-index: 0;
  inset: 0;
  background: rgb(23 23 23 / 82%);
}

.gallery-page__lightbox-dialog {
  position: relative;
  z-index: 1;
  display: grid;
  width: min(100%, 62rem);
  max-height: min(90vh, 56rem);
  grid-template-columns: minmax(0, 1.25fr) minmax(16rem, 0.75fr);
  grid-template-rows: minmax(0, 1fr) auto;
  gap: var(--space-5);
  overflow: auto;
  border: var(--border-ink);
  border-radius: var(--radius-default);
  background: var(--color-paper);
  padding: var(--space-5);
}

.gallery-page__lightbox-media,
.gallery-page__lightbox-copy,
.gallery-page__lightbox-navigation {
  min-width: 0;
}

.gallery-page__lightbox-media {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: center;
  border: var(--border-ink);
  background: var(--color-ink);
}

.gallery-page__lightbox-media img {
  width: 100%;
  max-height: 68vh;
  object-fit: contain;
}

.gallery-page__lightbox-copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: var(--space-3);
  padding-inline-end: var(--space-5);
}

.gallery-page__lightbox-copy > * {
  margin-block: 0;
}

.gallery-page__lightbox-copy p {
  font-size: 0.98rem;
}

.gallery-page__lightbox-navigation {
  display: flex;
  grid-column: 1 / -1;
  justify-content: space-between;
  gap: var(--space-3);
}

.gallery-page__lightbox-navigation > * {
  min-width: 0;
}

.gallery-page__lightbox-close {
  position: absolute;
  z-index: 2;
  top: var(--space-3);
  right: var(--space-3);
  min-width: 2.75rem;
  min-height: 2.75rem;
  border: var(--border-ink);
  border-radius: var(--radius-default);
  background: var(--color-paper);
  color: var(--color-ink);
  padding: 0;
  font-size: 2rem;
  line-height: 1;
}

.gallery-page__lightbox-close:hover {
  background: var(--color-sun-yellow);
  color: var(--color-ink);
}

@media (max-width: 59.9375rem) {
  .gallery-page__hero-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-6);
  }

  .gallery-page__hero-copy,
  .gallery-page__hero-lead {
    width: min(100%, 42.5rem);
  }

  .gallery-page__hero-figure {
    width: min(100%, 42.5rem);
    justify-self: start;
  }

  .gallery-page__reading-layout {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-5);
  }

  .gallery-page__editorial-note {
    width: min(100%, 42.5rem);
    transform: rotate(-0.35deg);
  }

  .gallery-page__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .gallery-page__card--start,
  .gallery-page__card--wheels,
  .gallery-page__card--vehicle,
  .gallery-page__card--obstacle,
  .gallery-page__card--finish {
    grid-column: span 1;
  }

  .gallery-page__takeaway-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .gallery-page__takeaway:nth-child(3) {
    grid-column: 1 / span 1;
  }

  .gallery-page__comparison-table-wrap {
    display: none;
  }

  .gallery-page__comparison-cards {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-4);
    margin-block-start: var(--space-6);
  }

  .gallery-page__comparison-cards > article {
    display: flex;
    min-width: 0;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-2);
    border: var(--border-ink);
    background: var(--color-white);
    padding: var(--space-5);
  }

  .gallery-page__comparison-cards > article > * {
    margin-block: 0;
  }

  .gallery-page__comparison-cards h3 {
    margin-block-start: var(--space-2);
    font-size: 1.05rem;
  }

  .gallery-page__cta-panel {
    grid-template-columns: minmax(0, 1fr);
  }

  .gallery-page__cta-action .button {
    width: min(100%, 20rem);
  }
}

@media (max-width: 44.9375rem) {
  .gallery-page__hero-copy h1 {
    max-width: 12ch;
  }

  .gallery-page__hero-action,
  .gallery-page__hero-action .button {
    width: 100%;
  }

  .gallery-page__hero-figure,
  .gallery-page__hero-copy,
  .gallery-page__hero-lead,
  .gallery-page__editorial-note {
    width: 100%;
  }

  .gallery-page__reading-main {
    width: 100%;
  }

  .gallery-page__observation {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-2);
  }

  .gallery-page__editorial-note {
    padding: var(--space-5);
    transform: none;
  }

  .gallery-page__filter-controls {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .gallery-page__filter-controls > * {
    width: 100%;
    min-width: 0;
    min-height: 3rem;
  }

  .gallery-page__filter-controls > *:first-child {
    grid-column: 1 / -1;
  }

  .gallery-page__grid,
  .gallery-page__takeaway-grid,
  .gallery-page__comparison-cards {
    grid-template-columns: minmax(0, 1fr);
  }

  .gallery-page__card--start,
  .gallery-page__card--wheels,
  .gallery-page__card--vehicle,
  .gallery-page__card--obstacle,
  .gallery-page__card--finish,
  .gallery-page__takeaway:nth-child(3) {
    grid-column: 1;
  }

  .gallery-page__card-copy,
  .gallery-page__takeaway,
  .gallery-page__comparison-cards > article,
  .gallery-page__cta-panel {
    padding: var(--space-5);
  }

  .gallery-page__takeaway-grid {
    gap: var(--space-4);
  }

  .gallery-page__cta-action,
  .gallery-page__cta-action .button {
    width: 100%;
  }

  .gallery-page__cta-action p {
    max-width: none;
  }

  .gallery-page__faq-inner,
  .gallery-page__closing-copy {
    width: 100%;
  }

  .gallery-page__accordion-item h3 button {
    padding: var(--space-4);
    font-size: 1.05rem;
  }

  .gallery-page__lightbox {
    padding: var(--space-2);
  }

  .gallery-page__lightbox-dialog {
    width: 100%;
    max-height: 94vh;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto auto;
    gap: var(--space-4);
    padding: var(--space-4);
  }

  .gallery-page__lightbox-media img {
    max-height: 45vh;
  }

  .gallery-page__lightbox-copy {
    padding-inline-end: 0;
  }

  .gallery-page__lightbox-navigation {
    grid-column: 1;
  }
}

@media (max-width: 22.4375rem) {
  .gallery-page__filter-controls {
    grid-template-columns: minmax(0, 1fr);
  }

  .gallery-page__filter-controls > *:first-child {
    grid-column: 1;
  }

  .gallery-page__lightbox-navigation {
    flex-direction: column;
  }

  .gallery-page__lightbox-navigation .button {
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .gallery-page__card:hover,
  .gallery-page__takeaway:hover,
  .gallery-page__text-trigger:hover {
    transform: none;
  }
}


.home-page {
  overflow: clip;
}

.home-page .section {
  position: relative;
}

.home-hero {
  padding-block-start: calc(var(--space-9) + var(--space-3));
}

.home-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(12.5rem, 2fr) minmax(23rem, 5fr);
  align-items: start;
  gap: var(--space-6);
}

.home-hero__editorial,
.home-hero__rail,
.home-hero__media,
.home-drawing__content,
.home-drawing__note,
.home-wheels__figure,
.home-wheels__questions,
.home-controls__content,
.home-controls__rail,
.home-faq__content,
.home-faq__note {
  min-width: 0;
}

.home-hero__editorial {
  grid-column: 1;
  width: 100%;
}

.home-hero__editorial h1 {
  max-width: 10.5ch;
}

.home-hero__lead {
  max-width: 56ch;
}

.home-hero__draw {
  margin-block-end: 0;
  color: var(--color-ink);
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 5vw, 4.7rem);
  font-weight: 800;
  letter-spacing: -0.07em;
  line-height: 0.9;
  text-decoration: underline;
  text-decoration-color: var(--color-rule-blue);
  text-decoration-thickness: 0.08em;
  text-underline-offset: 0.14em;
}

.home-hero__draw span {
  color: var(--color-marker-red);
}

.home-hero__rail {
  display: flex;
  grid-column: 2;
  width: 100%;
  min-width: 12.5rem;
  flex-direction: column;
  align-items: stretch;
  gap: var(--space-5);
  padding-block-start: var(--space-1);
}

.home-hero__labels {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-3);
  margin: 0;
}

.home-hero__labels > li {
  position: relative;
  width: 100%;
  min-width: 0;
  padding-inline-start: 1.35rem;
  font-family: var(--font-display);
  font-weight: 800;
  line-height: 1.2;
}

.home-hero__labels > li::before {
  position: absolute;
  inset-inline-start: 0;
  color: var(--color-ink);
  content: "✦";
}

.home-hero__cta {
  width: 100%;
}

.home-hero__media {
  position: relative;
  grid-column: 3;
  width: 100%;
  min-height: 27rem;
}

.home-hero__card {
  position: absolute;
  width: auto;
  min-width: 0;
  margin: 0;
  transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}

.home-hero__card:hover,
.home-hero__card:focus-within {
  box-shadow: var(--shadow-note);
}

.home-hero__card--route {
  z-index: 1;
  inset-block-start: 2.4rem;
  inset-inline-end: 0;
  width: min(76%, 18rem);
  transform: rotate(2deg);
}

.home-hero__card--vehicle {
  z-index: 2;
  inset-block-start: 0;
  inset-inline-start: 10%;
  width: min(68%, 15.8rem);
  transform: rotate(-2deg);
}

.home-hero__card--wheels {
  z-index: 3;
  inset-block-end: 0;
  inset-inline-start: 0;
  width: min(48%, 10.5rem);
  transform: rotate(3deg);
}

.home-hero__card:hover {
  transform: translateY(-2px) rotate(0.5deg);
}

.home-hero__card .media-frame img {
  width: 100%;
}

.home-hero__card--vehicle .media-frame img {
  aspect-ratio: 4 / 5;
  object-position: center bottom;
}

.home-hero__card--wheels .media-frame img {
  aspect-ratio: 1;
  object-position: center;
}

.home-hero__card--route .media-frame img {
  aspect-ratio: 16 / 10;
  object-position: center;
}

.home-loop__intro,
.home-wheels__intro,
.home-tracks__intro,
.home-tips__intro,
.home-gallery__intro,
.home-faq__content {
  width: 100%;
}

.home-loop__intro {
  max-width: 46.25rem;
}

.home-loop__steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-4);
  margin-block-start: var(--space-6);
}

.home-loop__step {
  display: flex;
  width: 100%;
  min-width: 0;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-3);
  margin: 0;
}

.home-loop__step > * {
  min-width: 0;
  margin: 0;
}

.home-loop__step--finish {
  background: var(--color-mint);
}

.home-loop__number {
  display: inline-flex;
  width: 2.4rem;
  min-width: 2.4rem;
  height: 2.4rem;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--color-ink);
  border-radius: 50%;
  background: var(--color-mint);
  font-family: var(--font-display);
  font-weight: 800;
}

.home-loop__figure {
  width: min(100%, 60rem);
  margin-block: var(--space-6) 0;
}

.home-loop__figure img {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
}

.home-drawing__grid,
.home-controls__grid,
.home-faq__grid {
  display: grid;
  grid-template-columns: minmax(0, 45rem) minmax(15rem, 17.5rem);
  align-items: start;
  gap: var(--space-6);
}

.home-drawing__content {
  grid-column: 1;
  width: 100%;
}

.home-drawing__content > p {
  max-width: 64ch;
}

.home-drawing__note {
  grid-column: 2;
  width: 100%;
  margin-block-start: var(--space-7);
  transform: rotate(-1deg);
}

.home-drawing__note strong {
  font-family: var(--font-display);
  font-size: var(--text-card-title);
}

.home-drawing__observations {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-4);
  margin-block-start: var(--space-5);
}

.home-drawing__observations > article {
  width: 100%;
  min-width: 0;
  border-top: 2px solid var(--color-ink);
  padding-block-start: var(--space-3);
}

.home-drawing__observations h3 {
  font-size: var(--text-card-title);
}

.home-wheels__intro {
  max-width: 46.25rem;
}

.home-wheels__grid {
  display: grid;
  grid-template-columns: minmax(22.5rem, 5fr) minmax(0, 7fr);
  align-items: start;
  gap: var(--space-6);
  margin-block-start: var(--space-6);
}

.home-wheels__figure {
  grid-column: 1;
  width: 100%;
  margin: 0;
}

.home-wheels__figure img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
}

.home-wheels__questions {
  display: flex;
  grid-column: 2;
  width: 100%;
  flex-direction: column;
  align-items: stretch;
  gap: var(--space-3);
}

.home-wheels__questions > article {
  display: grid;
  grid-template-columns: 2rem minmax(0, 1fr);
  width: 100%;
  min-width: 0;
  gap: var(--space-3);
  border: var(--border-ink);
  background: rgb(169 216 181 / 55%);
  padding: var(--space-4);
}

.home-wheels__questions > article > span {
  display: flex;
  width: 2rem;
  height: 2rem;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--color-ink);
  border-radius: 50%;
  background: var(--color-mint);
  font-weight: 900;
}

.home-wheels__questions h3,
.home-wheels__questions p,
.home-wheels__more {
  margin: 0;
}

.home-wheels__questions h3 {
  font-size: var(--text-card-title);
}

.home-wheels__more {
  padding: var(--space-3) var(--space-1);
}

.home-tracks__intro {
  max-width: 43.75rem;
}

.home-tracks__figure {
  width: min(100%, 55rem);
  margin-block: var(--space-6);
  margin-inline-start: auto;
}

.home-tracks__figure img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.home-tracks__method {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-4);
}

.home-tracks__method > article {
  display: flex;
  width: 100%;
  min-width: 0;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-3);
  margin: 0;
}

.home-tracks__method > article > * {
  margin: 0;
}

.home-tracks__method span {
  color: var(--color-rule-blue);
  font-family: var(--font-display);
  font-weight: 800;
}

.home-tracks__more {
  margin-block-start: var(--space-5);
}

.home-controls__content {
  grid-column: 1;
  width: 100%;
}

.home-controls__content > p {
  max-width: 62ch;
}

.home-controls__link {
  display: inline-flex;
  min-height: 2.75rem;
  align-items: center;
  font-weight: 800;
}

.home-controls__rail {
  display: grid;
  grid-column: 2;
  grid-template-columns: minmax(0, 1fr);
  width: 100%;
  gap: var(--space-4);
  padding-block-start: var(--space-7);
}

.home-controls__rail > article {
  width: 100%;
  min-width: 0;
  border-inline-start: 4px solid var(--color-rule-blue);
  padding-inline-start: var(--space-3);
}

.home-controls__rail h3 {
  margin-block-end: var(--space-2);
  font-size: var(--text-card-title);
}

.home-controls__rail p {
  margin: 0;
}

.home-tips__intro {
  max-width: 45rem;
}

.home-tips__grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  align-items: stretch;
  gap: var(--space-4);
  margin-block-start: var(--space-6);
}

.home-tips__tip,
.home-tips__more {
  display: flex;
  min-width: 0;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-3);
  border: var(--border-ink);
  background: var(--color-paper-dark);
  padding: var(--space-5);
}

.home-tips__tip > *,
.home-tips__more > * {
  margin: 0;
}

.home-tips__tip > span,
.home-tips__more > span {
  color: var(--color-muted-ink);
  font-size: var(--text-small);
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.home-tips__tip h3 {
  font-size: var(--text-card-title);
}

.home-tips__tip--main {
  grid-column: span 6;
  grid-row: span 2;
  background: var(--color-sun-yellow);
}

.home-tips__tip:nth-child(2),
.home-tips__tip:nth-child(3),
.home-tips__tip:nth-child(4) {
  grid-column: span 2;
}

.home-tips__tip--mint {
  background: var(--color-mint);
}

.home-tips__more {
  grid-column: span 6;
  width: 100%;
  color: var(--color-ink);
  text-decoration: none;
}

.home-tips__more:hover {
  text-decoration: none;
}

.home-tips__more strong {
  font-family: var(--font-display);
  font-size: var(--text-h3);
  line-height: 1.1;
  text-decoration: underline;
  text-decoration-color: var(--color-rule-blue);
}

.home-gallery__intro {
  max-width: 43.75rem;
}

.home-gallery__grid {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  align-items: start;
  gap: var(--space-5);
  width: min(100%, 60rem);
  margin-block-start: var(--space-6);
}

.home-gallery__item {
  width: 100%;
  min-width: 0;
  text-decoration: none;
}

.home-gallery__item figure {
  width: 100%;
  margin: 0;
}

.home-gallery__item img {
  width: 100%;
  object-fit: cover;
}

.home-gallery__item--loop img {
  aspect-ratio: 16 / 10;
}

.home-gallery__item--terrain {
  margin-block-start: var(--space-6);
}

.home-gallery__item--terrain img {
  aspect-ratio: 4 / 3;
}

.home-gallery__item figcaption {
  min-height: 7rem;
}

.home-gallery__more {
  margin-block-start: var(--space-5);
}

.home-faq__content {
  grid-column: 1;
  width: 100%;
  max-width: 45rem;
}

.home-faq__content > p {
  max-width: 62ch;
}

.home-faq__accordion {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-3);
  width: 100%;
  margin-block-start: var(--space-5);
}

.home-faq__item {
  width: 100%;
  min-width: 0;
  border: var(--border-ink);
  background: var(--color-paper-dark);
}

.home-faq__item h3 {
  margin: 0;
}

.home-faq__item button {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 1.5rem;
  width: 100%;
  min-height: 3.5rem;
  align-items: center;
  gap: var(--space-3);
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--color-ink);
  padding: var(--space-4);
  font-family: var(--font-display);
  font-size: clamp(1.125rem, 2vw, 1.3rem);
  font-weight: 800;
  line-height: 1.2;
  text-align: start;
  text-decoration: none;
}

.home-faq__item button:hover {
  background: var(--color-sun-yellow);
  box-shadow: none;
  color: var(--color-ink);
  transform: none;
}

.home-faq__item button > span {
  display: inline-block;
  font-size: 2rem;
  line-height: 1;
  text-align: center;
  transition: transform var(--transition-fast);
}

.home-faq__item.is-open button > span {
  transform: rotate(90deg);
}

.home-faq__answer {
  display: flex;
  width: 100%;
  min-width: 0;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-4);
  border-top: 1px solid var(--color-ink);
  padding: var(--space-4);
}

.home-faq__answer > * {
  max-width: 62ch;
  margin: 0;
}

.home-faq__note {
  grid-column: 2;
  width: 100%;
  margin-block-start: 16rem;
  background: var(--color-sun-yellow);
}

.home-faq__note strong {
  font-family: var(--font-display);
  font-size: var(--text-card-title);
}

.home-final .container {
  display: flex;
  min-width: 0;
  justify-content: center;
}

.home-final__paper {
  display: flex;
  width: min(100%, 47.5rem);
  min-width: 0;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-4);
  border: var(--border-ink);
  background: var(--color-paper-dark);
  padding: var(--space-7);
  box-shadow: var(--shadow-note);
}

.home-final__paper > * {
  margin: 0;
}

.home-final__paper h2 {
  max-width: 11ch;
}

.home-final__paper > p:not(.home-final__disclaimer) {
  max-width: 52ch;
}

.home-final__cta {
  min-width: 16rem;
}

.home-final__disclaimer {
  max-width: 64ch;
  color: var(--color-muted-ink);
  font-size: 0.9rem;
  line-height: 1.45;
}

@media (max-width: 67.4375rem) {
  .home-hero__grid {
    grid-template-columns: minmax(0, 1fr) minmax(12.5rem, 14rem);
  }

  .home-hero__editorial {
    grid-column: 1;
  }

  .home-hero__rail {
    grid-column: 2;
  }

  .home-hero__media {
    grid-column: 1 / -1;
    max-width: 32rem;
    margin-inline-start: auto;
  }

  .home-drawing__grid,
  .home-controls__grid,
  .home-faq__grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .home-drawing__note,
  .home-faq__note {
    grid-column: 1;
    max-width: 45rem;
    margin-block-start: 0;
    transform: none;
  }

  .home-controls__rail {
    grid-column: 1;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    padding-block-start: 0;
  }

  .home-loop__steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .home-tips__tip--main,
  .home-tips__more {
    grid-column: span 12;
  }

  .home-tips__tip:nth-child(2),
  .home-tips__tip:nth-child(3),
  .home-tips__tip:nth-child(4) {
    grid-column: span 4;
  }
}

@media (max-width: 59.9375rem) {
  .home-wheels__grid {
    grid-template-columns: minmax(18.75rem, 5fr) minmax(22.5rem, 7fr);
  }

  .home-tracks__method {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .home-tracks__method > article:nth-child(3) {
    grid-column: 1 / -1;
    max-width: calc(50% - var(--space-2));
  }
}

@media (max-width: 44.9375rem) {
  .home-hero {
    padding-block-start: var(--space-7);
  }

  .home-hero__grid {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-5);
  }

  .home-hero__editorial,
  .home-hero__rail,
  .home-hero__media {
    grid-column: 1;
  }

  .home-hero__editorial h1 {
    max-width: 12ch;
    font-size: clamp(2.75rem, 12vw, 3.25rem);
  }

  .home-hero__lead {
    max-width: none;
  }

  .home-hero__draw {
    font-size: clamp(2rem, 11vw, 3rem);
  }

  .home-hero__rail {
    gap: var(--space-4);
  }

  .home-hero__labels {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-2);
  }

  .home-hero__labels > li {
    padding-inline-start: 1rem;
    font-size: 0.9rem;
  }

  .home-hero__media {
    display: flex;
    width: 100%;
    min-height: 0;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-4);
    margin: 0;
  }

  .home-hero__card,
  .home-hero__card--route,
  .home-hero__card--vehicle,
  .home-hero__card--wheels {
    position: relative;
    inset: auto;
    margin: 0;
  }

  .home-hero__card--vehicle {
    order: 1;
    width: 80%;
    transform: rotate(-1deg);
  }

  .home-hero__card--wheels {
    order: 2;
    width: 56%;
    margin-block-start: calc(var(--space-4) * -1);
    margin-inline-start: auto;
    transform: rotate(1deg);
  }

  .home-hero__card--route {
    order: 3;
    width: 100%;
    transform: none;
  }

  .home-loop__steps,
  .home-drawing__observations,
  .home-wheels__grid,
  .home-tracks__method,
  .home-controls__rail,
  .home-gallery__grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .home-loop__steps {
    gap: var(--space-4);
  }

  .home-wheels__grid {
    gap: var(--space-5);
  }

  .home-wheels__figure,
  .home-wheels__questions {
    grid-column: 1;
  }

  .home-tracks__figure {
    width: 100%;
    margin-inline-start: 0;
  }

  .home-tracks__method > article:nth-child(3) {
    grid-column: 1;
    max-width: none;
  }

  .home-controls__rail {
    gap: var(--space-3);
  }

  .home-controls__rail > article {
    padding: var(--space-3);
    border: var(--border-ink);
    border-inline-start: 4px solid var(--color-rule-blue);
    background: var(--color-paper-dark);
  }

  .home-tips__grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .home-tips__tip--main,
  .home-tips__tip:nth-child(2),
  .home-tips__tip:nth-child(3),
  .home-tips__tip:nth-child(4),
  .home-tips__more {
    grid-column: 1;
    grid-row: auto;
  }

  .home-tips__tip,
  .home-tips__more {
    padding: var(--space-4);
  }

  .home-gallery__grid {
    width: 100%;
  }

  .home-gallery__item--terrain {
    margin-block-start: 0;
  }

  .home-gallery__item figcaption {
    min-height: 0;
  }

  .home-faq__note {
    order: 2;
  }

  .home-faq__content {
    order: 1;
  }

  .home-final__paper {
    width: 100%;
    padding: var(--space-5);
  }

  .home-final__cta {
    width: 100%;
    min-width: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .home-hero__card,
  .home-hero__card:hover,
  .home-hero__card:focus-within,
  .home-faq__item button > span {
    transition: none;
    transform: none;
  }
}


.thank-you-page {
  display: grid;
  min-height: min(42rem, calc(100vh - 12rem));
  align-items: center;
  padding-block: var(--space-8);
}

.thank-you-page__inner {
  width: min(100%, 50rem);
  margin-inline: auto;
}

.thank-you-page__panel {
  position: relative;
  overflow: hidden;
  border: var(--border-ink);
  border-radius: var(--radius-default);
  background: var(--color-paper-dark);
  box-shadow: var(--shadow-note);
  padding: clamp(1.5rem, 5vw, 3.5rem);
  text-align: center;
}

.thank-you-page__panel::before {
  position: absolute;
  inset: 0.75rem;
  border: 1px solid rgb(111 166 200 / 62%);
  content: "";
  pointer-events: none;
}

.thank-you-page__content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-5);
}

.thank-you-page__content > * {
  margin-block: 0;
}

.thank-you-page__stamp {
  display: grid;
  width: 4.5rem;
  height: 4.5rem;
  place-items: center;
  border: 2px solid var(--color-ink);
  border-radius: 50%;
  background: var(--color-mint);
  color: var(--color-ink);
  font-family: var(--font-display);
  font-size: 2.25rem;
  font-weight: 800;
  line-height: 1;
  transform: rotate(-8deg);
}

.thank-you-page__eyebrow {
  color: var(--color-muted-ink);
}

.thank-you-page__title {
  max-width: 13ch;
  margin-inline: auto;
}

.thank-you-page__lead,
.thank-you-page__next {
  max-width: 42rem;
  margin-inline: auto;
  text-align: center;
}

.thank-you-page__lead {
  font-size: clamp(1.125rem, 2.3vw, 1.375rem);
  font-weight: 700;
  line-height: 1.45;
}

.thank-you-page__next {
  color: var(--color-muted-ink);
}

.thank-you-page__actions {
  justify-content: center;
  margin-block-start: var(--space-2);
}

.thank-you-page__note {
  max-width: 38rem;
  margin-inline: auto;
  border-top: var(--border-rule);
  padding-top: var(--space-4);
  color: var(--color-muted-ink);
  font-size: var(--text-small);
  line-height: 1.45;
  text-align: center;
}

@media (max-width: 44.9375rem) {
  .thank-you-page {
    min-height: auto;
    padding-block: var(--space-7);
  }

  .thank-you-page__panel {
    padding: var(--space-6) var(--space-4);
  }

  .thank-you-page__content {
    gap: var(--space-4);
  }

  .thank-you-page__actions {
    width: 100%;
  }
}