:root {
  --mow-a: var(--page-ground);
  --mow-b: #112818;
  --mow-h: 88px;
  --chalk-line: color-mix(in oklab, var(--cream), transparent 87%);
  --panel-r: clamp(18px, 2vw, 30px);
  --fg: clamp(12px, 2.8vw, 48px);
  --gap: clamp(20px, 2.6vw, 40px);

  --pin: clamp(20px, 2.6vw, 40px);

  --touch: clamp(22px, 2.2vw, 34px);
}

html { background: var(--mow-a); scrollbar-color: var(--pale) var(--mow-a); }

body {
  background-color: var(--mow-a);

  background-image: none;
  color: var(--cream);
}

.faq {
  position: relative;
  row-gap: var(--gap);
  padding-block: calc(var(--gap) * 1.6) calc(var(--gap) * 1.2);
}

.faq > .faq__group {
  margin-inline: var(--fg);
  padding-block: clamp(26px, 3vw, 44px) clamp(30px, 3.4vw, 48px);
  border-radius: var(--panel-r);
}

.faq .faq__group .tab {
  padding-left: var(--pin);
  border-radius: 0 12px 12px 0;
}
.faq .faq__group .sec__in {
  margin-top: clamp(20px, 2.6vw, 32px);
  padding-inline: var(--pin);
}

.faq .qa__q { padding-block: 15px; }
.faq .qa__mark { border-radius: 6px; }

.faq__index { margin-inline: var(--fg); }
.faq__plate { border-radius: var(--panel-r); }
.faq__input { border-radius: 10px; }
.faq__topics a { border-radius: 8px; }

.closing { background: transparent; }
.closing .sec__in { border-inline: 0; }

.foot {
  position: relative;
  background: transparent;
  border-top: 0;
}
.foot::before {
  content: "";
  position: absolute;
  top: 0;
  left: var(--fg);
  right: var(--fg);
  height: 2px;
  background: var(--chalk-line);
}

@media (min-width: 900px) {
  .faq > .faq__group {
    grid-column: 1;
    margin-left: calc(var(--fg) + var(--touch));
    margin-right: 0;
  }
  .faq .faq__group .sec__in { padding-right: clamp(22px, 3vw, 48px); }

  .faq__index {
    margin-inline: var(--gap) var(--fg);
    padding-block: 0;
  }
  .faq__plate {
    padding-right: clamp(22px, 2.2vw, 30px);
    box-shadow: inset 0 0 0 2px var(--chalk-line);
  }
  .faq__topics a { border-radius: 0; }

  .faq::before {
    content: "";
    position: absolute;
    left: var(--fg);
    top: calc(var(--gap) * 1.6);
    bottom: calc(var(--gap) * 1.2);
    width: 2px;
    background: var(--chalk-line);
    pointer-events: none;
  }

  .faq__group::before,
  .faq__group::after {
    content: "";
    position: absolute;
    pointer-events: none;
  }
  .faq__group::before {
    left: calc(-1 * var(--touch) - 5px);
    top: calc(clamp(26px, 3vw, 44px) + 0.66 * var(--fs-h2) + 1px);
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: color-mix(in oklab, var(--cream), transparent 55%);
  }
  .faq__group::after {
    left: calc(-1 * var(--touch) + 7px);
    top: calc(clamp(26px, 3vw, 44px) + 0.66 * var(--fs-h2) + 6px);
    width: calc(var(--touch) - 7px);
    height: 2px;
    background: var(--chalk-line);
  }
}

@media (max-width: 600px) {
  :root { --mow-h: 72px; --panel-r: 16px; }
}