section { padding-block: clamp(40px, 6vw, 80px); }

/* Hero */
.hero { padding-top: clamp(16px, 3vw, 40px); padding-bottom: clamp(24px, 4vw, 48px); }
.hero__grid { display: grid; gap: clamp(32px, 5vw, 64px); align-items: center; }
.hero__copy { display: grid; gap: var(--pad-3); }
.hero h1 { font-size: var(--step-4); font-weight: 700; }
.hero__body { display: grid; gap: var(--pad-2); }
.hero__lead { font-size: var(--step-1); color: var(--text-2); }
.hero__text { color: var(--text-2); }
.hero__platforms { font-size: var(--step--1); color: var(--text-3); }
.hero__art img { width: 100%; max-width: 360px; margin-inline: auto; }
/* let the logo's ruled lines fade out instead of stopping at the image edge */
.hero__art { -webkit-mask-image: linear-gradient(to right, transparent, #000 14%, #000 86%, transparent); mask-image: linear-gradient(to right, transparent, #000 14%, #000 86%, transparent); }
@media (min-width: 900px) { .hero__grid { grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); } }

/* Features: screens alternate left/right and overlap vertically, so the next
   screen peeks in beside the lower part of the current one. */
.features { --feature-gap: 56px; --feature-overlap: clamp(80px, 11vw, 130px); display: grid; gap: 56px; padding-top: clamp(24px, 4vw, 48px); }
@media (min-width: 820px) {
  .features { gap: 0; }
  .feature + .feature { margin-top: calc(var(--feature-gap) - var(--feature-overlap)); }
}
.section-head { display: grid; gap: var(--pad-2); margin-bottom: clamp(24px, 4vw, 48px); }

/* Story */
.story__grid { display: grid; gap: clamp(32px, 6vw, 80px); align-items: start; }
.story__copy { display: grid; gap: var(--pad-3); align-content: start; }
.story__photo { aspect-ratio: 4 / 5; object-fit: cover; max-width: 200px; }
@media (min-width: 820px) { .story__grid { grid-template-columns: minmax(0, 200px) minmax(0, 1fr); } }
.story__note { display: grid; gap: var(--pad-2); }
.story__sign { width: 160px; height: auto; margin-top: var(--pad-1); }
.story__cta { font-size: var(--step-2); font-weight: 700; line-height: 1.3; color: var(--text); max-width: none; }

/* Legal pages (privacy, imprint) */
.legal { padding-block: clamp(24px, 4vw, 56px); }
.legal__body { display: grid; gap: var(--pad-2); max-width: var(--w-text); }
.legal__body h1 { font-size: var(--step-3); }
.legal__body h2 { font-size: var(--step-1); margin-top: var(--pad-3); }
.legal__body p, .legal__body li { max-width: none; }
.legal__body ul { display: grid; gap: var(--pad-1); padding-left: 1.2em; list-style: disc; color: var(--text-2); }
.legal__address { font-style: normal; line-height: 1.7; color: var(--text); margin-top: var(--pad-1); }
.legal__meta { color: var(--text-3); font-size: var(--step--1); }
.legal__draft { padding: var(--pad-2); border: 2px dashed var(--accent); border-radius: var(--radius); color: var(--text); max-width: none; }
.legal__nav { display: flex; flex-wrap: wrap; gap: var(--pad-1) var(--pad-3); margin-top: var(--pad-3); }
.legal .todo { padding: var(--pad-2); border: 2px dashed var(--accent); border-radius: var(--radius); color: var(--text); }