/* Spielvexa guide: a calm, tactile checklist layered over the shared monochrome shell. */
:root {
  --guide-ink: #101010;
  --guide-muted: #5e6465;
  --guide-paper: #f6f7f4;
  --guide-panel: #ffffff;
  --guide-cyan: #1ab2bf;
  --guide-cyan-soft: #d7f5f3;
  --guide-yellow: #fff02a;
  --guide-line: #d3d9d8;
  --guide-radius: 1.15rem;
}

html { background: var(--guide-paper); }
body.guide-page {
  margin: 0;
  background: var(--guide-paper);
  color: var(--guide-ink);
  font-family: "JetBrains Mono", "DejaVu Sans Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

body.guide-page .hero-header {
  position: relative;
  z-index: 5;
  min-height: 132px;
  background: #101718;
  color: #fff;
}

body.guide-page .hero-content {
  min-height: 132px;
  overflow: visible;
  background: #101718;
}

body.guide-page .hero-nav-shell {
  width: min(1460px, calc(100% - 64px));
  margin-top: 0;
  padding-top: 30px;
}

body.guide-page .hero-navigation { box-shadow: 0 16px 32px rgb(0 0 0 / 18%); }
body.guide-page .hero-navigation .is-current { background: linear-gradient(100deg, #71e0e7, #2fc1c8); }
body.guide-page .hero-main,
body.guide-page .hero-year,
body.guide-page .hero-grid-mark { display: none; }

.guide-main { display: block; }
.guide-main * { box-sizing: border-box; }
.guide-section {
  position: relative;
  padding: clamp(4.5rem, 9vw, 9.5rem) clamp(1.25rem, 7vw, 9rem);
  overflow: hidden;
}
.guide-section > * { position: relative; z-index: 1; }
.guide-section__inner { width: min(1360px, 100%); margin: 0 auto; }
.guide-eyebrow {
  margin: 0 0 1.35rem;
  color: var(--guide-cyan);
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .12em;
  line-height: 1.4;
  text-transform: uppercase;
}
.guide-section h1,
.guide-section h2,
.guide-section h3,
.guide-section p { margin-top: 0; }
.guide-section h2 {
  max-width: 850px;
  margin-bottom: 1.5rem;
  font-size: clamp(2.7rem, 6vw, 6.6rem);
  line-height: .98;
  letter-spacing: -.055em;
}
.guide-section h3 { font-size: clamp(1.05rem, 1.45vw, 1.45rem); line-height: 1.15; }
.guide-section p { max-width: 43rem; color: var(--guide-muted); font-family: Inter, Arial, sans-serif; font-size: clamp(1rem, 1.18vw, 1.2rem); line-height: 1.55; }

.guide-hero {
  min-height: 670px;
  padding-top: clamp(6.5rem, 12vw, 12rem);
  background: linear-gradient(122deg, #f6f7f4 0%, #f6f7f4 60%, #d7f5f3 100%);
}
.guide-hero::before,
.guide-hero::after {
  position: absolute;
  content: "";
  pointer-events: none;
}
.guide-hero::before {
  top: 9%;
  right: -4%;
  width: min(40vw, 560px);
  height: 82%;
  border: 2px solid var(--guide-cyan);
  border-radius: 47% 53% 35% 65% / 35% 39% 61% 65%;
  transform: rotate(12deg);
}
.guide-hero::after {
  right: 10%;
  bottom: 13%;
  width: 7.5rem;
  height: 7.5rem;
  border: 1px solid var(--guide-ink);
  background: repeating-linear-gradient(0deg, transparent 0 10px, rgb(16 16 16 / 20%) 11px 12px), repeating-linear-gradient(90deg, transparent 0 10px, rgb(16 16 16 / 20%) 11px 12px);
  transform: rotate(9deg);
}
.guide-hero__layout { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(280px, .9fr); align-items: end; gap: 4rem; }
.guide-hero h1 { max-width: 860px; margin: 0 0 2rem; font-size: clamp(4rem, 10vw, 10.7rem); line-height: .86; letter-spacing: -.08em; }
.guide-hero__lead { max-width: 35rem; margin-bottom: 0; color: var(--guide-ink) !important; font-size: clamp(1.15rem, 1.6vw, 1.55rem) !important; line-height: 1.42 !important; }
.guide-hero__signal { justify-self: end; width: min(100%, 390px); padding: 1.5rem; border: 1px solid var(--guide-ink); background: var(--guide-yellow); box-shadow: 1rem 1rem 0 var(--guide-ink); transform: rotate(-4deg); }
.guide-hero__signal strong { display: block; margin-bottom: 3rem; font-size: clamp(3rem, 5vw, 5.5rem); line-height: .8; letter-spacing: -.09em; }
.guide-hero__signal span { display: block; max-width: 13rem; font-size: .9rem; font-weight: 700; line-height: 1.25; text-transform: uppercase; }

.guide-steps { background: #111718; color: #fff; }
.guide-steps h2 { max-width: 760px; color: #fff; }
.guide-steps__intro { display: flex; justify-content: space-between; gap: 3rem; align-items: end; margin-bottom: 4.25rem; }
.guide-steps__intro p { margin-bottom: .25rem; color: #c4d0d0; }
.guide-steps__list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.guide-step-card { min-height: 270px; padding: 1.5rem; border: 1px solid rgb(255 255 255 / 28%); background: #263033; }
.guide-step-card:nth-child(2) { background: var(--guide-cyan); color: var(--guide-ink); transform: translateY(2.25rem); }
.guide-step-card:nth-child(3) { background: var(--guide-yellow); color: var(--guide-ink); transform: translateY(4.5rem); }
.guide-step-card__number { display: block; margin-bottom: 5rem; color: #c9d4d4; font-size: .85rem; font-weight: 700; }
.guide-step-card:nth-child(n+2) .guide-step-card__number { color: rgb(16 16 16 / 65%); }
.guide-step-card h3 { max-width: 16rem; margin-bottom: .7rem; }
.guide-step-card p { color: inherit; opacity: .78; font-size: .95rem; line-height: 1.4; }

.guide-devices { background: var(--guide-cyan-soft); }
.guide-devices__grid { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(2rem, 8vw, 9rem); align-items: center; }
.guide-devices__marker { display: grid; place-items: center; width: min(100%, 365px); aspect-ratio: 1; border: 1px solid var(--guide-ink); border-radius: 50%; background: #fff; box-shadow: 1.4rem 1.4rem 0 var(--guide-cyan); transform: rotate(-8deg); }
.guide-devices__marker strong { display: block; font-size: clamp(5rem, 10vw, 10rem); line-height: .8; letter-spacing: -.12em; }
.guide-devices__marker span { margin-top: 1.6rem; font-size: .8rem; font-weight: 700; text-transform: uppercase; }
.guide-device-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; margin-top: 2.5rem; }
.guide-device-card { padding: 1.35rem; border-top: 2px solid var(--guide-ink); }
.guide-device-card h3 { margin-bottom: .6rem; }
.guide-device-card p { margin-bottom: 0; font-size: .92rem; }

.guide-catalog { background: #fff; }
.guide-catalog__header { display: flex; justify-content: space-between; align-items: end; gap: 2rem; margin-bottom: 3rem; }
.guide-catalog__header p { margin-bottom: .25rem; }
.guide-catalog__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.guide-catalog-card { min-height: 280px; padding: 1.5rem; display: flex; flex-direction: column; justify-content: space-between; border: 1px solid var(--guide-ink); background: var(--guide-paper); }
.guide-catalog-card:nth-child(2) { background: #d7f5f3; }
.guide-catalog-card:nth-child(3) { background: #e8e8e8; }
.guide-catalog-card__icon { display: inline-grid; place-items: center; width: 3.5rem; height: 3.5rem; border-radius: 50%; background: var(--guide-ink); color: #fff; font-size: 1.3rem; }
.guide-catalog-card h3 { margin: 1.25rem 0 .65rem; }
.guide-catalog-card p { margin-bottom: 0; font-size: .95rem; }

.guide-search { background: #d9dada; }
.guide-search::before { position: absolute; top: 0; right: 12%; width: 32%; height: 100%; background: #c5caca; content: ""; clip-path: polygon(18% 0, 100% 0, 75% 100%, 0 100%); }
.guide-search__layout { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(2rem, 7vw, 8rem); align-items: center; }
.guide-checklist { display: grid; gap: .8rem; margin: 0; padding: 0; list-style: none; }
.guide-checklist li { display: grid; grid-template-columns: 2.25rem 1fr; gap: 1rem; align-items: center; min-height: 4.5rem; padding: .8rem 1rem; border: 1px solid var(--guide-ink); background: #fff; }
.guide-checklist li::before { display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: 50%; background: var(--guide-yellow); content: "✓"; font-weight: 700; }
.guide-checklist span { font-size: clamp(1rem, 1.35vw, 1.2rem); font-weight: 700; }

.guide-transparency { background: #111718; color: #fff; }
.guide-transparency h2 { color: #fff; }
.guide-transparency__layout { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 4rem; }
.guide-transparency__layout > p { color: #c4d0d0; }
.guide-transparency__cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.guide-transparency-card { padding: 1.4rem; border: 1px solid rgb(255 255 255 / 32%); background: #263033; }
.guide-transparency-card:nth-child(2) { background: var(--guide-cyan); color: var(--guide-ink); }
.guide-transparency-card:nth-child(3) { background: var(--guide-yellow); color: var(--guide-ink); }
.guide-transparency-card h3 { margin-bottom: .7rem; }
.guide-transparency-card p { margin-bottom: 0; color: inherit; opacity: .8; font-size: .92rem; }

.guide-next { padding-top: clamp(3.5rem, 7vw, 7rem); padding-bottom: clamp(3.5rem, 7vw, 7rem); background: #fff; }
.guide-next__layout { display: flex; align-items: center; justify-content: space-between; gap: 2rem; }
.guide-next h2 { max-width: 650px; margin-bottom: 0; font-size: clamp(2.4rem, 5vw, 5rem); }
.guide-next__link { display: inline-flex; align-items: center; justify-content: center; min-height: 3.4rem; padding: .8rem 1.4rem; border: 1px solid var(--guide-ink); background: var(--guide-ink); color: #fff; font: inherit; font-weight: 700; text-decoration: none; white-space: nowrap; }
.guide-next__link:hover, .guide-next__link:focus-visible { background: var(--guide-cyan); color: var(--guide-ink); outline: 2px solid var(--guide-cyan); outline-offset: 3px; }

body.guide-page [data-homepage-region="15-footer"] { margin-top: 0; }
body.guide-page [data-homepage-region="15-footer"] .footer-nav a { color: #fff; text-decoration: none; }
body.guide-page [data-homepage-region="15-footer"] .footer-nav a:hover,
body.guide-page [data-homepage-region="15-footer"] .footer-nav a:focus-visible { color: var(--guide-cyan-soft); text-decoration: underline; text-underline-offset: 4px; }
body.guide-page [data-homepage-region="15-footer"] .footer-settings { align-self: center; min-height: 2.75rem; padding: .6rem 1rem; border: 1px solid currentColor; border-radius: 999px; background: transparent; color: inherit; cursor: pointer; font: inherit; }
body.guide-page [data-homepage-region="15-footer"] .footer-settings:hover,
body.guide-page [data-homepage-region="15-footer"] .footer-settings:focus-visible { background: #fff; color: #111718; outline: 2px solid var(--guide-yellow); outline-offset: 3px; }

@media (max-width: 900px) {
  .guide-hero__layout, .guide-devices__grid, .guide-search__layout, .guide-transparency__layout { grid-template-columns: 1fr; }
  .guide-hero__signal { justify-self: start; }
  .guide-steps__list, .guide-catalog__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .guide-step-card:nth-child(n) { transform: none; }
  .guide-step-card:last-child { grid-column: 1 / -1; }
  .guide-hero::before { width: 50vw; opacity: .45; }
}

@media (max-width: 600px) {
  body.guide-page .hero-header, body.guide-page .hero-content { min-height: 88px; }
  body.guide-page .hero-nav-shell { width: calc(100% - 32px); padding-top: 16px; }
  .guide-section { padding: 4.3rem 1.25rem; }
  .guide-hero { min-height: 0; padding-top: 5rem; padding-bottom: 5.5rem; }
  .guide-hero h1 { font-size: clamp(3.5rem, 17vw, 6rem); }
  .guide-hero::before { top: 14%; right: -20%; width: 75vw; height: 70%; }
  .guide-hero::after { right: 5%; bottom: 7%; width: 4.5rem; height: 4.5rem; }
  .guide-steps__intro, .guide-catalog__header, .guide-next__layout { display: block; }
  .guide-steps__intro p, .guide-catalog__header p { margin-top: 1.25rem; }
  .guide-steps__list, .guide-catalog__grid, .guide-device-list, .guide-transparency__cards { grid-template-columns: 1fr; }
  .guide-step-card:last-child { grid-column: auto; }
  .guide-device-card { padding: 1rem 0; }
  .guide-devices__marker { width: min(75vw, 300px); margin: 0 auto 1rem; }
  .guide-search::before { right: -12%; width: 65%; opacity: .5; }
  .guide-next__link { margin-top: 2rem; }

  .guide-section__inner,
  .guide-section h2,
  .guide-section p,
  .guide-checklist {
    min-width: 0;
    max-width: 100%;
  }

  .guide-section h2,
  .guide-section p,
  .guide-eyebrow,
  .guide-checklist,
  .guide-checklist li,
  .guide-checklist span {
    overflow-wrap: anywhere;
    word-break: normal;
  }

  .guide-checklist li {
    grid-template-columns: 2rem minmax(0, 1fr);
    gap: .75rem;
  }
}