/* FAQ page composition: a question-led reading path built from the Spielvexa shell palette. */
/* Archived comparison experiment: .faq-legacy-sort[data-order="criterion"] { display: grid; } */
:root {
  --faq-ink: #080808;
  --faq-paper: #f4f4ef;
  --faq-card: #ffffff;
  --faq-muted: #5c5c5c;
  --faq-line: #c9c9c2;
  --faq-cyan: #1ab2bf;
  --faq-aqua: #8ce9ee;
  --faq-yellow: #f2ed31;
  --faq-dark: #171717;
  --faq-radius: 1.15rem;
  --faq-shadow: 0 1.25rem 3rem rgb(0 0 0 / 10%);
}

html[data-faq-theme="dark"] {
  --faq-ink: #f6f6f0;
  --faq-paper: #151919;
  --faq-card: #202626;
  --faq-muted: #bec8c7;
  --faq-line: #435050;
  --faq-dark: #090b0b;
  color-scheme: dark;
}

.faq-page {
  min-width: 320px;
  background: var(--faq-paper);
  color: var(--faq-ink);
  font-family: "JetBrains Mono", "DejaVu Sans Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

.faq-page .hero-header {
  position: relative;
  z-index: 5;
  min-height: 0;
  background: var(--faq-card);
  color: var(--faq-ink);
  border-bottom: 1px solid var(--faq-line);
}

.faq-page .hero-content {
  min-height: 0;
  height: auto;
  padding: 0 0 1rem;
  overflow: visible;
  background: var(--faq-card);
  color: var(--faq-ink);
}

.faq-page .hero-nav-shell {
  width: min(1320px, calc(100% - 3rem));
  height: 96px;
  margin: 0 auto;
  gap: 1rem;
}

.faq-page .hero-logo {
  width: 64px;
  height: 64px;
  background: #050505;
}

.faq-page .hero-navigation {
  flex: 1 1 auto;
  width: auto;
  max-width: 860px;
  height: 60px;
  margin-inline: auto;
  background: var(--faq-card);
  border-color: var(--faq-line);
  box-shadow: 0 .75rem 2rem rgb(0 0 0 / 9%);
}

.faq-page .hero-navigation a {
  color: var(--faq-ink);
  font-size: 13px;
}

.faq-page .hero-navigation .is-current {
  color: #050505;
  background: var(--faq-aqua);
}

.faq-page .hero-menu-toggle {
  border-color: var(--faq-ink);
  color: var(--faq-ink);
}

.faq-theme-toggle {
  flex: 0 0 auto;
  min-height: 2.75rem;
  padding: .65rem .9rem;
  border: 1px solid var(--faq-ink);
  border-radius: 999px;
  background: transparent;
  color: var(--faq-ink);
  cursor: pointer;
  font: inherit;
  font-size: .75rem;
  font-weight: 700;
  white-space: nowrap;
}

.faq-theme-toggle:hover,
.faq-theme-toggle:focus-visible {
  background: var(--faq-yellow);
  color: #050505;
}

.faq-main {
  display: block;
  background: var(--faq-paper);
}

/* Keep transformed helper artwork and the copied header inside the viewport. */
.faq-page [data-helper-shell="header"],
.faq-page .faq-main {
  max-width: 100%;
}

.faq-page [data-helper-shell="header"] .hero-content {
  max-width: 100%;
}

.faq-page .hero-header,
.faq-page .faq-section,
.faq-page .faq-intro__visual {
  box-sizing: border-box;
}

.faq-section {
  width: min(1320px, calc(100% - 3rem));
  margin: 0 auto;
  padding: clamp(4rem, 8vw, 8rem) 0;
}

.faq-section + .faq-section {
  border-top: 1px solid var(--faq-line);
}

.faq-section__eyebrow {
  margin: 0 0 1.25rem;
  color: var(--faq-cyan);
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.faq-section h2 {
  max-width: 890px;
  margin: 0;
  font-size: clamp(2.45rem, 6.2vw, 7rem);
  line-height: .98;
  letter-spacing: -.07em;
}

.faq-section h3,
.faq-section p,
.faq-section ul {
  margin-top: 0;
}

.faq-section p {
  color: var(--faq-muted);
  font-family: Inter, Arial, sans-serif;
  font-size: clamp(1rem, 1.25vw, 1.2rem);
  line-height: 1.55;
}

.faq-intro {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(19rem, .72fr);
  gap: clamp(2rem, 7vw, 8rem);
  align-items: end;
  min-height: 34rem;
  padding-top: clamp(4rem, 9vw, 9rem);
}

.faq-intro__copy {
  position: relative;
  z-index: 1;
}

.faq-intro__copy h1 {
  max-width: 850px;
  margin: 0;
  font-size: clamp(3.2rem, 8.5vw, 9rem);
  line-height: .9;
  letter-spacing: -.09em;
}

.faq-intro__lead {
  max-width: 36rem;
  margin: 2.25rem 0 0;
  color: var(--faq-ink) !important;
  font-size: clamp(1.1rem, 1.65vw, 1.45rem) !important;
  line-height: 1.4 !important;
}

.faq-intro__visual {
  position: relative;
  min-height: 23rem;
  padding: 1rem;
  background: var(--faq-cyan);
  border-radius: 48% 52% 38% 62% / 34% 36% 64% 66%;
  transform: rotate(3deg);
}

.faq-intro__visual::before {
  position: absolute;
  right: -2rem;
  bottom: -2rem;
  width: 9rem;
  height: 9rem;
  background: var(--faq-yellow);
  border-radius: 50%;
  content: "";
}

.faq-intro__visual img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 21rem;
  border: 1px solid var(--faq-ink);
  object-fit: cover;
  filter: grayscale(1) contrast(1.1) brightness(.75);
  transform: rotate(-3deg);
}

.faq-intro__note {
  position: absolute;
  right: 1.25rem;
  bottom: 1rem;
  z-index: 1;
  max-width: 11rem;
  margin: 0;
  color: #050505 !important;
  font-family: inherit !important;
  font-size: .75rem !important;
  font-weight: 700;
  line-height: 1.35 !important;
  text-transform: uppercase;
  transform: rotate(-3deg);
}

.faq-section--method {
  background: var(--faq-paper);
}

.faq-section__heading-row {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 2rem;
  margin-bottom: 3rem;
}

.faq-section__heading-row p {
  max-width: 30rem;
  margin-bottom: .3rem;
}

.faq-accordion {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
}

.faq-question {
  min-height: 100%;
  padding: 1.4rem;
  background: var(--faq-card);
  border: 1px solid var(--faq-line);
  border-radius: var(--faq-radius);
  box-shadow: var(--faq-shadow);
}

.faq-question[open] {
  background: var(--faq-yellow);
  color: #050505;
}

.faq-question summary {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  cursor: pointer;
  list-style: none;
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1.2;
}

.faq-question summary::-webkit-details-marker {
  display: none;
}

.faq-question summary::after {
  flex: 0 0 auto;
  width: 1.5rem;
  height: 1.5rem;
  border: 1px solid currentColor;
  border-radius: 50%;
  content: "+";
  font-size: 1.2rem;
  line-height: 1.3rem;
  text-align: center;
}

.faq-question[open] summary::after {
  content: "–";
}

.faq-question p {
  margin: 1.4rem 0 0;
  color: inherit;
  font-size: .95rem;
  line-height: 1.5;
}

.faq-platforms {
  background: var(--faq-dark);
  color: #fff;
}

.faq-platforms .faq-section__eyebrow {
  color: var(--faq-aqua);
}

.faq-platforms p {
  color: #c7cfce;
}

.faq-platforms h2 {
  color: #fff;
}

.faq-platform-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: .75rem;
  margin-top: 3rem;
}

.faq-platform-link {
  display: flex;
  min-height: 10rem;
  flex-direction: column;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 1.15rem;
  background: #252b2b;
  border: 1px solid #56605f;
  border-radius: .8rem;
  color: #fff;
  text-decoration: none;
  transition: transform .2s ease, background-color .2s ease;
}

.faq-platform-link:hover,
.faq-platform-link:focus-visible {
  background: var(--faq-cyan);
  color: #050505;
  transform: translateY(-.35rem);
}

.faq-platform-link strong {
  font-size: 1rem;
  line-height: 1.2;
}

.faq-platform-link span {
  font-family: Inter, Arial, sans-serif;
  font-size: .8rem;
}

.faq-device-layout {
  display: grid;
  grid-template-columns: .8fr 1.2fr;
  gap: clamp(2rem, 8vw, 10rem);
  align-items: start;
}

.faq-device-layout > p {
  max-width: 32rem;
  margin-top: 1.5rem;
}

.faq-device-list {
  display: grid;
  gap: .75rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.faq-device-card {
  display: grid;
  grid-template-columns: 7rem minmax(0, 1fr);
  gap: 1.5rem;
  align-items: center;
  padding: 1.25rem;
  background: var(--faq-card);
  border: 1px solid var(--faq-line);
  border-radius: .85rem;
}

.faq-device-card__number {
  display: grid;
  min-height: 5rem;
  place-items: center;
  background: var(--faq-aqua);
  color: #050505;
  font-size: 1.5rem;
  font-weight: 700;
}

.faq-device-card h3 {
  margin-bottom: .4rem;
  font-size: 1.2rem;
}

.faq-device-card p {
  margin-bottom: 0;
  font-size: .9rem;
}

.faq-contact {
  display: grid;
  grid-template-columns: minmax(0, .8fr) minmax(20rem, 1.2fr);
  gap: clamp(2rem, 8vw, 10rem);
  align-items: start;
  background: var(--faq-aqua);
}

.faq-contact h2 {
  color: #050505;
}

.faq-contact__intro p {
  max-width: 27rem;
  margin-top: 1.5rem;
  color: #183033;
}

.faq-contact-form {
  display: grid;
  gap: .9rem;
}

.faq-field {
  display: grid;
  gap: .4rem;
}

.faq-field label {
  color: #050505;
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.faq-field input,
.faq-field textarea {
  width: 100%;
  padding: .95rem 1rem;
  border: 1px solid #517b7d;
  border-radius: .35rem;
  background: rgb(255 255 255 / 82%);
  color: #050505;
  font: 1rem/1.4 Inter, Arial, sans-serif;
}

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

.faq-field input:focus,
.faq-field textarea:focus {
  outline: 3px solid #050505;
  outline-offset: 2px;
}

.faq-field input[aria-invalid="true"],
.faq-field textarea[aria-invalid="true"] {
  border-color: #a31b1b;
}

.faq-field__error,
.faq-form__status {
  min-height: 1.2em;
  margin: 0;
  color: #7b1414;
  font-family: Inter, Arial, sans-serif;
  font-size: .82rem;
}

.faq-form__status {
  color: #183033;
}

.faq-submit {
  justify-self: start;
  min-height: 3.1rem;
  padding: .8rem 1.4rem;
  border: 1px solid #050505;
  border-radius: 999px;
  background: #050505;
  color: #fff;
  cursor: pointer;
  font: 700 1rem/1 Inter, Arial, sans-serif;
}

.faq-submit:hover,
.faq-submit:focus-visible {
  background: var(--faq-yellow);
  color: #050505;
}

.faq-guidance {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  gap: clamp(2rem, 8vw, 9rem);
  align-items: start;
}

.faq-guidance__list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .75rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.faq-guidance__list li {
  padding: 1.2rem;
  background: var(--faq-card);
  border-top: 4px solid var(--faq-cyan);
}

.faq-guidance__list strong {
  display: block;
  margin-bottom: .45rem;
  font-size: 1rem;
}

.faq-guidance__list span {
  color: var(--faq-muted);
  font-family: Inter, Arial, sans-serif;
  font-size: .85rem;
  line-height: 1.4;
}

.faq-guidance__cta {
  display: inline-flex;
  margin-top: 2rem;
  padding: .9rem 1.2rem;
  border: 1px solid var(--faq-ink);
  border-radius: 999px;
  color: var(--faq-ink);
  font-weight: 700;
  text-decoration: none;
}

.faq-guidance__cta:hover,
.faq-guidance__cta:focus-visible {
  background: var(--faq-ink);
  color: var(--faq-paper);
}

.faq-page [data-consent-panel] {
  position: fixed;
  inset: 50% auto auto 50%;
  z-index: 1001;
  width: min(28rem, calc(100% - 2rem));
  padding: 1.5rem;
  background: var(--faq-card);
  border: 1px solid var(--faq-line);
  border-radius: var(--faq-radius);
  color: var(--faq-ink);
  box-shadow: 0 1.5rem 4rem rgb(0 0 0 / 30%);
  transform: translate(-50%, -50%);
}

.faq-page [data-consent-panel][hidden] {
  display: none;
}

.faq-page [data-consent-panel] h2 {
  margin: 0;
  font-size: 1.4rem;
  letter-spacing: -.04em;
}

.faq-page [data-consent-panel] p {
  margin: .8rem 0 1rem;
  color: var(--faq-muted);
  font-family: Inter, Arial, sans-serif;
  font-size: .9rem;
  line-height: 1.45;
}

.faq-page [data-consent-panel] footer {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
}

.faq-page [data-consent-panel] button {
  min-height: 2.7rem;
  padding: .6rem .85rem;
  border: 1px solid var(--faq-ink);
  border-radius: 999px;
  background: transparent;
  color: var(--faq-ink);
  cursor: pointer;
  font: 700 .8rem/1 inherit;
}

.faq-page [data-consent-panel] button:first-child {
  background: var(--faq-ink);
  color: var(--faq-paper);
}

.faq-page .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;
}

.faq-page .footer-settings:hover,
.faq-page .footer-settings:focus-visible {
  background: var(--faq-yellow);
  color: #050505;
}

/* The helper shell remains readable if scripts arrive late or a browser lacks color-mix. */
.faq-page .faq-question summary:focus-visible,
.faq-page a:focus-visible,
.faq-page button:focus-visible {
  outline: 3px solid var(--faq-cyan);
  outline-offset: 3px;
}

@media (max-width: 1100px) {
  .faq-page [data-helper-shell="header"] {
    padding-inline: 1rem !important;
  }

  .faq-page [data-helper-shell="header"] .hero-main {
    width: calc(100% - 2rem);
    padding-inline: 0;
  }

  .faq-page [data-helper-shell="header"] .hero-year {
    width: min(55%, 100%);
    padding-right: 0;
    overflow-wrap: anywhere;
  }

  .faq-page [data-helper-shell="header"] .hero-gallery {
    overflow: hidden;
  }

  .faq-page .faq-intro__visual {
    transform: none;
  }

  .faq-page .faq-intro__visual::before {
    right: 0;
  }

  .faq-page .faq-intro__visual img {
    transform: none;
  }

  .faq-page .hero-navigation a {
    padding-inline: .55rem;
    font-size: 11px;
  }

  .faq-intro,
  .faq-contact,
  .faq-guidance {
    gap: 3rem;
  }

  .faq-platform-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .faq-page [data-helper-shell="header"] {
    padding-inline: 1rem !important;
  }

  .faq-page [data-helper-shell="header"] .hero-main {
    width: 100%;
  }

  .faq-page .faq-intro__visual {
    margin-right: 0;
    transform: none;
  }

  .faq-page .faq-intro__visual img {
    transform: none;
  }

  .faq-page .hero-nav-shell {
    width: calc(100% - 2rem);
  }

  .faq-page .hero-content {
    padding-bottom: .75rem;
  }

  .faq-page .hero-navigation {
    max-width: none;
  }

  .faq-theme-toggle {
    font-size: .68rem;
  }

  .faq-section {
    width: calc(100% - 2rem);
    padding: 4rem 0;
  }

  .faq-intro,
  .faq-device-layout,
  .faq-contact,
  .faq-guidance {
    display: block;
    min-height: 0;
  }

  .faq-intro__visual {
    min-height: 17rem;
    margin: 3rem 1rem 1rem 0;
  }

  .faq-intro__visual img {
    min-height: 15rem;
  }

  .faq-section__heading-row {
    display: block;
    margin-bottom: 2rem;
  }

  .faq-section__heading-row p {
    margin-top: 1.25rem;
  }

  .faq-accordion {
    display: block;
  }

  .faq-question + .faq-question {
    margin-top: .75rem;
  }

  .faq-platform-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-top: 2rem;
  }

  .faq-device-layout > p {
    margin-bottom: 2rem;
  }

  .faq-contact__intro,
  .faq-guidance > div:first-child {
    margin-bottom: 2.5rem;
  }

  .faq-guidance__list {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 600px) {
  .faq-page [data-helper-shell="header"] .hero-year {
    width: 100%;
    padding-inline: 0;
  }

  .faq-page [data-helper-shell="header"] .hero-gallery {
    width: 100%;
    overflow: hidden;
  }

  .faq-page .hero-nav-shell {
    gap: .75rem;
  }

  .faq-page .hero-navigation {
    order: 4;
  }

  .faq-page .hero-menu-toggle {
    display: block;
  }

  .faq-theme-toggle {
    margin-left: auto;
  }

  .faq-platform-grid {
    grid-template-columns: 1fr;
  }

  .faq-device-card {
    grid-template-columns: 4.5rem minmax(0, 1fr);
    gap: 1rem;
  }

  .faq-device-card__number {
    min-height: 4.5rem;
  }

  .faq-page [data-consent-panel] footer {
    flex-direction: column;
  }

  .faq-page [data-consent-panel] button {
    width: 100%;
  }

  .faq-page [data-consent-banner] [data-consent-actions] {
    grid-template-columns: 1fr;
  }
}