.page-faq {
  --faq-line: rgba(21, 19, 17, 0.14);
  --faq-line-gilt: rgba(201, 162, 74, 0.48);
  --faq-ink-soft: #4a443c;
  --faq-paper-veil: rgba(255, 246, 232, 0.78);
  background: var(--paper);
  color: var(--ink);
  overflow-x: clip;
}

.page-faq .faq-crumb-row {
  padding: clamp(14px, 2vw, 22px) 0 0;
  font-size: 13px;
}

.page-faq .faq-hero {
  padding: clamp(24px, 4vw, 52px) 0 clamp(32px, 5vw, 66px);
  border-bottom: 1px solid var(--faq-line);
  background:
    radial-gradient(circle at 88% 12%, rgba(200, 52, 43, 0.06), transparent 36%),
    radial-gradient(circle at 12% 88%, rgba(201, 162, 74, 0.08), transparent 42%),
    var(--paper);
}

.page-faq .faq-hero-grid {
  display: grid;
  gap: 28px;
  align-items: end;
}

.page-faq .faq-hero-copy h1 {
  margin: 10px 0 18px;
  font-family: var(--font-display);
  font-size: clamp(34px, 7.2vw, 66px);
  font-weight: 900;
  line-height: 1.08;
  letter-spacing: -0.01em;
  color: var(--ink);
}

.page-faq .faq-hero-copy .lede {
  max-width: 48ch;
  margin: 0;
  font-size: clamp(15px, 1.7vw, 18px);
  line-height: 1.85;
  color: var(--faq-ink-soft);
}

.page-faq .faq-hero-actions {
  margin-top: 24px;
}

.page-faq .faq-hero-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 28px;
  margin: 30px 0 0;
  padding: 18px 0 0;
  border-top: 1px dashed var(--faq-line-gilt);
  list-style: none;
}

.page-faq .faq-hero-facts li {
  display: flex;
  align-items: baseline;
  gap: 7px;
  font-size: 13px;
  color: var(--neutral);
}

.page-faq .fact-num {
  font-family: var(--font-num);
  font-size: 30px;
  line-height: 1;
  color: var(--cinnabar);
}

.page-faq .faq-hero-mark {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 96px;
  aspect-ratio: 1 / 1;
  background: var(--cinnabar);
  color: var(--paper);
  border: 3px double rgba(255, 246, 232, 0.58);
  border-radius: 4px;
  transform: rotate(-3deg);
  box-shadow: 0 14px 28px -18px rgba(21, 19, 17, 0.7);
}

.page-faq .mark-char {
  font-family: var(--font-display);
  font-size: 40px;
  font-weight: 900;
  line-height: 1;
}

.page-faq .mark-label {
  font-size: 10px;
  letter-spacing: 0.18em;
  color: var(--cream);
}

.page-faq .faq-quick {
  padding: clamp(36px, 6vw, 74px) 0;
  background: var(--paper-warm);
  border-bottom: 1px solid var(--faq-line);
}

.page-faq .faq-section-head {
  display: grid;
  gap: 10px;
  max-width: 760px;
  margin-bottom: 28px;
}

.page-faq .faq-section-head h2 {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(26px, 4vw, 40px);
  font-weight: 800;
  line-height: 1.25;
  color: var(--ink);
}

.page-faq .faq-section-head p:not(.eyebrow) {
  margin: 0;
  font-size: 15px;
  line-height: 1.8;
  color: var(--faq-ink-soft);
}

.page-faq .faq-quick-grid {
  display: grid;
  gap: 14px;
  margin-bottom: 30px;
}

.page-faq .faq-quick-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 20px;
  background: var(--paper);
  border: 1px solid var(--faq-line);
  border-radius: var(--radius-m);
  box-shadow: var(--shadow-paper);
  color: inherit;
  text-decoration: none;
  transition: border-color 0.18s ease, transform 0.18s ease;
}

.page-faq .faq-quick-card:hover,
.page-faq .faq-quick-card:focus-visible {
  border-color: var(--gilt);
  transform: translateY(-2px);
}

.page-faq .quick-card-num {
  font-family: var(--font-num);
  font-size: 12px;
  letter-spacing: 0.14em;
  color: var(--cinnabar-dark);
}

.page-faq .quick-card-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 800;
  line-height: 1.35;
  color: var(--ink);
}

.page-faq .quick-card-text {
  margin: 0;
  font-size: 14px;
  line-height: 1.75;
  color: var(--faq-ink-soft);
}

.page-faq .quick-card-go {
  margin-top: auto;
  padding-top: 12px;
  font-size: 13px;
  font-weight: 700;
  color: var(--cinnabar-dark);
}

.page-faq .faq-quick-figure {
  margin: 0;
  padding: 10px;
  background: var(--paper);
  border: 1px solid var(--faq-line);
  border-radius: var(--radius-m);
  box-shadow: var(--shadow-paper);
}

.page-faq .faq-quick-figure img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
  border-radius: var(--radius-s);
}

.page-faq .faq-quick-figure .figure-caption {
  padding: 10px 4px 0;
  font-size: 12px;
  color: var(--neutral);
}

.page-faq .faq-body {
  display: grid;
  gap: 26px;
  align-items: start;
  padding: clamp(36px, 6vw, 76px) 0;
}

.page-faq .faq-toc {
  padding: 14px;
  background: var(--cream);
  border: 1px solid var(--faq-line);
  border-radius: var(--radius-m);
}

.page-faq .faq-toc-title {
  margin: 0 0 10px;
  font-size: 12px;
  letter-spacing: 0.14em;
  color: var(--neutral);
}

.page-faq .faq-toc-list {
  display: flex;
  gap: 6px;
  margin: 0;
  padding: 0 0 4px;
  overflow-x: auto;
  list-style: none;
}

.page-faq .faq-toc-link {
  display: block;
  padding: 8px 12px;
  white-space: nowrap;
  font-size: 13px;
  color: var(--ink-deep);
  text-decoration: none;
  border: 1px solid var(--faq-line);
  border-radius: var(--radius-pill);
  transition: border-color 0.18s ease, color 0.18s ease;
}

.page-faq .faq-toc-link:hover,
.page-faq .faq-toc-link:focus-visible {
  border-color: var(--gilt);
  color: var(--cinnabar-dark);
}

.page-faq .faq-toc-top {
  display: inline-block;
  margin-top: 12px;
  font-size: 12px;
  color: var(--cinnabar-dark);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.page-faq .faq-groups {
  display: grid;
  gap: clamp(30px, 5vw, 56px);
}

.page-faq .faq-group {
  scroll-margin-top: 100px;
}

.page-faq .faq-group + .faq-group {
  padding-top: clamp(28px, 4vw, 44px);
  border-top: 1px solid var(--faq-line);
}

.page-faq .faq-group-head {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  margin-bottom: 16px;
}

.page-faq .faq-group-num {
  display: grid;
  place-items: center;
  flex: none;
  width: 44px;
  height: 44px;
  background: var(--cinnabar);
  color: var(--paper);
  font-family: var(--font-num);
  font-size: 20px;
  line-height: 1;
  border-radius: 4px;
  box-shadow: inset 0 0 0 1px rgba(231, 201, 122, 0.55);
}

.page-faq .faq-group-head h2 {
  margin: 0 0 6px;
  font-family: var(--font-display);
  font-size: clamp(24px, 3.4vw, 34px);
  font-weight: 800;
  line-height: 1.25;
  color: var(--ink);
}

.page-faq .faq-group-intro {
  margin: 0;
  font-size: 14px;
  line-height: 1.8;
  color: var(--faq-ink-soft);
}

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

.page-faq .faq-item {
  border-bottom: 1px solid var(--faq-line);
}

.page-faq .faq-item summary {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 18px;
  padding: 16px 2px;
  cursor: pointer;
  list-style: none;
}

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

.page-faq .faq-q {
  font-size: clamp(16px, 2vw, 18px);
  font-weight: 700;
  line-height: 1.6;
  color: var(--ink);
}

.page-faq .faq-icon {
  position: relative;
  flex: none;
  width: 24px;
  height: 24px;
  margin-top: 2px;
  border: 1px solid var(--gilt);
  border-radius: 50%;
  transition: background 0.18s ease, border-color 0.18s ease;
}

.page-faq .faq-icon::before,
.page-faq .faq-icon::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 10px;
  height: 1.5px;
  background: var(--gilt);
  transform: translate(-50%, -50%);
  transition: transform 0.18s ease, background 0.18s ease;
}

.page-faq .faq-icon::after {
  transform: translate(-50%, -50%) rotate(90deg);
}

.page-faq .faq-item[open] .faq-icon {
  background: var(--cinnabar);
  border-color: var(--cinnabar);
}

.page-faq .faq-item[open] .faq-icon::before,
.page-faq .faq-item[open] .faq-icon::after {
  background: var(--paper);
}

.page-faq .faq-item[open] .faq-icon::after {
  transform: translate(-50%, -50%) rotate(0deg);
}

.page-faq .faq-a {
  max-width: 70ch;
  padding: 0 2px 20px;
  font-size: 15.5px;
  line-height: 1.85;
  color: var(--faq-ink-soft);
}

.page-faq .faq-a p {
  margin: 0;
}

.page-faq .faq-a a {
  color: var(--cinnabar-dark);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.page-faq .faq-service {
  padding: clamp(40px, 7vw, 84px) 0;
  background:
    linear-gradient(135deg, rgba(200, 52, 43, 0.08), transparent 46%),
    var(--ink-deep);
  color: var(--paper);
  border-top: 3px solid var(--gilt);
}

.page-faq .faq-service-grid {
  display: grid;
  gap: 30px;
  align-items: start;
}

.page-faq .faq-service .eyebrow {
  color: var(--gilt-light);
}

.page-faq .faq-service h2 {
  margin: 10px 0 14px;
  font-family: var(--font-display);
  font-size: clamp(26px, 4vw, 42px);
  font-weight: 800;
  line-height: 1.25;
  color: var(--paper);
}

.page-faq .faq-service-lede {
  max-width: 58ch;
  margin: 0;
  font-size: 15px;
  line-height: 1.85;
  color: var(--faq-paper-veil);
}

.page-faq .faq-contact-list {
  display: grid;
  margin: 26px 0;
  border-top: 1px solid rgba(231, 201, 122, 0.28);
}

.page-faq .faq-contact-row {
  display: grid;
  gap: 6px;
  padding: 14px 0;
  border-bottom: 1px solid rgba(231, 201, 122, 0.28);
}

.page-faq .faq-contact-label {
  font-size: 12px;
  letter-spacing: 0.16em;
  color: var(--gilt-light);
}

.page-faq .faq-contact-value {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  font-size: clamp(15px, 2vw, 18px);
  line-height: 1.7;
  color: var(--paper);
  word-break: break-word;
}

.page-faq .copy-btn {
  padding: 5px 11px;
  font-family: var(--font-body);
  font-size: 12px;
  line-height: 1.5;
  color: var(--gilt-light);
  background: transparent;
  border: 1px solid var(--faq-line-gilt);
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: background 0.18s ease, color 0.18s ease;
}

.page-faq .copy-btn:hover,
.page-faq .copy-btn:focus-visible {
  background: var(--gilt);
  color: var(--ink-deep);
}

.page-faq .copy-status {
  font-size: 12px;
  color: var(--celadon-mist);
}

.page-faq .faq-service-note {
  margin: 0;
  padding-left: 14px;
  font-size: 13.5px;
  line-height: 1.85;
  color: var(--faq-paper-veil);
  border-left: 2px solid var(--cinnabar);
}

.page-faq .faq-service-figure {
  margin: 0;
  padding: 10px;
  background: rgba(255, 246, 232, 0.05);
  border: 1px solid rgba(231, 201, 122, 0.34);
  border-radius: var(--radius-m);
}

.page-faq .faq-service-figure img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: var(--radius-s);
}

.page-faq .faq-service-figure .figure-caption {
  padding: 10px 4px 0;
  font-size: 12px;
  line-height: 1.6;
  color: rgba(255, 246, 232, 0.68);
}

.page-faq .faq-more {
  padding: clamp(32px, 5vw, 58px) 0;
  border-top: 1px solid var(--faq-line);
}

.page-faq .faq-more-grid {
  display: grid;
  gap: 12px;
}

.page-faq .faq-more-card {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 16px 18px;
  font-size: 15px;
  font-weight: 700;
  color: var(--ink);
  text-decoration: none;
  background: var(--cream);
  border: 1px solid var(--faq-line);
  border-radius: var(--radius-m);
  transition: border-color 0.18s ease, color 0.18s ease;
}

.page-faq .faq-more-card:hover,
.page-faq .faq-more-card:focus-visible {
  border-color: var(--gilt);
  color: var(--cinnabar-dark);
}

.page-faq .faq-more-card span {
  color: var(--cinnabar);
}

@media (min-width: 720px) {
  .page-faq .faq-hero-grid {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 40px;
  }

  .page-faq .faq-hero-mark {
    width: clamp(120px, 16vw, 180px);
  }

  .page-faq .mark-char {
    font-size: 58px;
  }

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

  .page-faq .faq-quick-card {
    min-height: 220px;
  }

  .page-faq .faq-quick-figure {
    padding: 14px;
  }

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

@media (min-width: 980px) {
  .page-faq .faq-hero {
    padding-top: clamp(34px, 4vw, 58px);
  }

  .page-faq .faq-body {
    grid-template-columns: 220px minmax(0, 1fr);
    gap: 52px;
  }

  .page-faq .faq-toc {
    position: sticky;
    top: 96px;
    padding: 18px 16px;
  }

  .page-faq .faq-toc-list {
    display: block;
    padding: 0;
    overflow: visible;
  }

  .page-faq .faq-toc-list li + li {
    margin-top: 2px;
  }

  .page-faq .faq-toc-link {
    padding: 8px 10px;
    white-space: normal;
    border: 0;
    border-left: 2px solid transparent;
    border-radius: 0;
  }

  .page-faq .faq-toc-link:hover,
  .page-faq .faq-toc-link:focus-visible {
    border-left-color: var(--cinnabar);
    color: var(--cinnabar-dark);
  }

  .page-faq .faq-service-grid {
    grid-template-columns: minmax(0, 1.15fr) minmax(280px, 0.85fr);
    gap: 56px;
    align-items: center;
  }
}

.page-faq { --faq-line: rgba(21,19,17,.14); --faq-line-gilt: rgba(201,162,74,.48); --faq-ink-soft: #4a443c; --faq-paper-veil: rgba(255,246,232,.78); background: var(--paper); color: var(--ink); overflow-x: clip; }
.page-faq .faq-crumb-row { padding: clamp(14px,2vw,22px) 0 0; font-size: 13px; }
.page-faq .faq-hero { padding: clamp(24px,4vw,52px) 0 clamp(32px,5vw,66px); border-bottom: 1px solid var(--faq-line); background: radial-gradient(circle at 88% 12%, rgba(200,52,43,.06), transparent 36%), radial-gradient(circle at 12% 88%, rgba(201,162,74,.08), transparent 42%), var(--paper); }
.page-faq .faq-hero-grid { display: grid; gap: 28px; align-items: end; }
.page-faq .faq-hero-copy h1 { margin: 10px 0 18px; font-family: var(--font-display); font-size: clamp(34px,7.2vw,66px); font-weight: 900; line-height: 1.08; letter-spacing: -.01em; color: var(--ink); }
.page-faq .faq-hero-copy .lede { max-width: 48ch; margin: 0; font-size: clamp(15px,1.7vw,18px); line-height: 1.85; color: var(--faq-ink-soft); }
.page-faq .faq-hero-actions { margin-top: 24px; }
.page-faq .faq-hero-facts { display: flex; flex-wrap: wrap; gap: 14px 28px; margin: 30px 0 0; padding: 18px 0 0; border-top: 1px dashed var(--faq-line-gilt); list-style: none; }
.page-faq .faq-hero-facts li { display: flex; align-items: baseline; gap: 7px; font-size: 13px; color: var(--neutral); }
.page-faq .fact-num { font-family: var(--font-num); font-size: 30px; line-height: 1; color: var(--cinnabar); }
.page-faq .faq-hero-mark { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; width: 96px; aspect-ratio: 1/1; background: var(--cinnabar); color: var(--paper); border: 3px double rgba(255,246,232,.58); border-radius: 4px; transform: rotate(-3deg); box-shadow: 0 14px 28px -18px rgba(21,19,17,.7); }
.page-faq .mark-char { font-family: var(--font-display); font-size: 40px; font-weight: 900; line-height: 1; }
.page-faq .mark-label { font-size: 10px; letter-spacing: .18em; color: var(--cream); }
.page-faq .faq-quick { padding: clamp(36px,6vw,74px) 0; background: var(--paper-warm); border-bottom: 1px solid var(--faq-line); }
.page-faq .faq-section-head { display: grid; gap: 10px; max-width: 760px; margin-bottom: 28px; }
.page-faq .faq-section-head h2 { margin: 0; font-family: var(--font-display); font-size: clamp(26px,4vw,40px); font-weight: 800; line-height: 1.25; color: var(--ink); }
.page-faq .faq-section-head p:not(.eyebrow) { margin: 0; font-size: 15px; line-height: 1.8; color: var(--faq-ink-soft); }
.page-faq .faq-quick-grid { display: grid; gap: 14px; margin-bottom: 30px; }
.page-faq .faq-quick-card { display: flex; flex-direction: column; gap: 8px; padding: 20px; background: var(--paper); border: 1px solid var(--faq-line); border-radius: var(--radius-m); box-shadow: var(--shadow-paper); color: inherit; text-decoration: none; transition: border-color .18s ease, transform .18s ease; }
.page-faq .faq-quick-card:hover, .page-faq .faq-quick-card:focus-visible { border-color: var(--gilt); transform: translateY(-2px); }
.page-faq .quick-card-num { font-family: var(--font-num); font-size: 12px; letter-spacing: .14em; color: var(--cinnabar-dark); }
.page-faq .quick-card-title { margin: 0; font-family: var(--font-display); font-size: 20px; font-weight: 800; line-height: 1.35; color: var(--ink); }
.page-faq .quick-card-text { margin: 0; font-size: 14px; line-height: 1.75; color: var(--faq-ink-soft); }
.page-faq .quick-card-go { margin-top: auto; padding-top: 12px; font-size: 13px; font-weight: 700; color: var(--cinnabar-dark); }
.page-faq .faq-quick-figure { margin: 0; padding: 10px; background: var(--paper); border: 1px solid var(--faq-line); border-radius: var(--radius-m); box-shadow: var(--shadow-paper); }
.page-faq .faq-quick-figure img { display: block; width: 100%; height: auto; object-fit: cover; border-radius: var(--radius-s); }
.page-faq .faq-quick-figure .figure-caption { padding: 10px 4px 0; font-size: 12px; color: var(--neutral); }
.page-faq .faq-body { display: grid; gap: 26px; align-items: start; padding: clamp(36px,6vw,76px) 0; }
.page-faq .faq-toc { padding: 14px; background: var(--cream); border: 1px solid var(--faq-line); border-radius: var(--radius-m); }
.page-faq .faq-toc-title { margin: 0 0 10px; font-size: 12px; letter-spacing: .14em; color: var(--neutral); }
.page-faq .faq-toc-list { display: flex; gap: 6px; margin: 0; padding: 0 0 4px; overflow-x: auto; list-style: none; }
.page-faq .faq-toc-link { display: block; padding: 8px 12px; white-space: nowrap; font-size: 13px; color: var(--ink-deep); text-decoration: none; border: 1px solid var(--faq-line); border-radius: var(--radius-pill); transition: border-color .18s ease, color .18s ease; }
.page-faq .faq-toc-link:hover, .page-faq .faq-toc-link:focus-visible { border-color: var(--gilt); color: var(--cinnabar-dark); }
.page-faq .faq-toc-top { display: inline-block; margin-top: 12px; font-size: 12px; color: var(--cinnabar-dark); text-decoration: underline; text-underline-offset: 3px; }
.page-faq .faq-groups { display: grid; gap: clamp(30px,5vw,56px); }
.page-faq .faq-group { scroll-margin-top: 100px; }
.page-faq .faq-group + .faq-group { padding-top: clamp(28px,4vw,44px); border-top: 1px solid var(--faq-line); }
.page-faq .faq-group-head { display: flex; gap: 14px; align-items: flex-start; margin-bottom: 16px; }
.page-faq .faq-group-num { display: grid; place-items: center; flex: none; width: 44px; height: 44px; background: var(--cinnabar); color: var(--paper); font-family: var(--font-num); font-size: 20px; line-height: 1; border-radius: 4px; box-shadow: inset 0 0 0 1px rgba(231,201,122,.55); }
.page-faq .faq-group-head h2 { margin: 0 0 6px; font-family: var(--font-display); font-size: clamp(24px,3.4vw,34px); font-weight: 800; line-height: 1.25; color: var(--ink); }
.page-faq .faq-group-intro { margin: 0; font-size: 14px; line-height: 1.8; color: var(--faq-ink-soft); }
.page-faq .faq-list { border-top: 1px solid var(--faq-line); }
.page-faq .faq-item { border-bottom: 1px solid var(--faq-line); }
.page-faq .faq-item summary { display: flex; justify-content: space-between; align-items: flex-start; gap: 18px; padding: 16px 2px; cursor: pointer; list-style: none; }
.page-faq .faq-item summary::-webkit-details-marker { display: none; }
.page-faq .faq-q { font-size: clamp(16px,2vw,18px); font-weight: 700; line-height: 1.6; color: var(--ink); }
.page-faq .faq-icon { position: relative; flex: none; width: 24px; height: 24px; margin-top: 2px; border: 1px solid var(--gilt); border-radius: 50%; transition: background .18s ease, border-color .18s ease; }
.page-faq .faq-icon::before, .page-faq .faq-icon::after { content: ""; position: absolute; top: 50%; left: 50%; width: 10px; height: 1.5px; background: var(--gilt); transform: translate(-50%,-50%); transition: transform .18s ease, background .18s ease; }
.page-faq .faq-icon::after { transform: translate(-50%,-50%) rotate(90deg); }
.page-faq .faq-item[open] .faq-icon { background: var(--cinnabar); border-color: var(--cinnabar); }
.page-faq .faq-item[open] .faq-icon::before, .page-faq .faq-item[open] .faq-icon::after { background: var(--paper); }
.page-faq .faq-item[open] .faq-icon::after { transform: translate(-50%,-50%) rotate(0deg); }
.page-faq .faq-a { max-width: 70ch; padding: 0 2px 20px; font-size: 15.5px; line-height: 1.85; color: var(--faq-ink-soft); }
.page-faq .faq-a p { margin: 0; }
.page-faq .faq-a a { color: var(--cinnabar-dark); text-decoration: underline; text-underline-offset: 3px; }
.page-faq .faq-service { padding: clamp(40px,7vw,84px) 0; background: linear-gradient(135deg, rgba(200,52,43,.08), transparent 46%), var(--ink-deep); color: var(--paper); border-top: 3px solid var(--gilt); }
.page-faq .faq-service-grid { display: grid; gap: 30px; align-items: start; }
.page-faq .faq-service .eyebrow { color: var(--gilt-light); }
.page-faq .faq-service h2 { margin: 10px 0 14px; font-family: var(--font-display); font-size: clamp(26px,4vw,42px); font-weight: 800; line-height: 1.25; color: var(--paper); }
.page-faq .faq-service-lede { max-width: 58ch; margin: 0; font-size: 15px; line-height: 1.85; color: var(--faq-paper-veil); }
.page-faq .faq-contact-list { display: grid; margin: 26px 0; border-top: 1px solid rgba(231,201,122,.28); }
.page-faq .faq-contact-row { display: grid; gap: 6px; padding: 14px 0; border-bottom: 1px solid rgba(231,201,122,.28); }
.page-faq .faq-contact-label { font-size: 12px; letter-spacing: .16em; color: var(--gilt-light); }
.page-faq .faq-contact-value { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; font-size: clamp(15px,2vw,18px); line-height: 1.7; color: var(--paper); word-break: break-word; }
.page-faq .copy-btn { padding: 5px 11px; font-family: var(--font-body); font-size: 12px; line-height: 1.5; color: var(--gilt-light); background: transparent; border: 1px solid var(--faq-line-gilt); border-radius: var(--radius-pill); cursor: pointer; transition: background .18s ease, color .18s ease; }
.page-faq .copy-btn:hover, .page-faq .copy-btn:focus-visible { background: var(--gilt); color: var(--ink-deep); }
.page-faq .copy-status { font-size: 12px; color: var(--celadon-mist); }
.page-faq .faq-service-note { margin: 0; padding-left: 14px; font-size: 13.5px; line-height: 1.85; color: var(--faq-paper-veil); border-left: 2px solid var(--cinnabar); }
.page-faq .faq-service-figure { margin: 0; padding: 10px; background: rgba(255,246,232,.05); border: 1px solid rgba(231,201,122,.34); border-radius: var(--radius-m); }
.page-faq .faq-service-figure img { display: block; width: 100%; height: auto; aspect-ratio: 1/1; object-fit: cover; border-radius: var(--radius-s); }
.page-faq .faq-service-figure .figure-caption { padding: 10px 4px 0; font-size: 12px; line-height: 1.6; color: rgba(255,246,232,.68); }
.page-faq .faq-more { padding: clamp(32px,5vw,58px) 0; border-top: 1px solid var(--faq-line); }
.page-faq .faq-more-grid { display: grid; gap: 12px; }
.page-faq .faq-more-card { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 16px 18px; font-size: 15px; font-weight: 700; color: var(--ink); text-decoration: none; background: var(--cream); border: 1px solid var(--faq-line); border-radius: var(--radius-m); transition: border-color .18s ease, color .18s ease; }
.page-faq .faq-more-card:hover, .page-faq .faq-more-card:focus-visible { border-color: var(--gilt); color: var(--cinnabar-dark); }
.page-faq .faq-more-card span { color: var(--cinnabar); }
@media (min-width: 720px) {
  .page-faq .faq-hero-grid { grid-template-columns: minmax(0,1fr) auto; gap: 40px; }
  .page-faq .faq-hero-mark { width: clamp(120px,16vw,180px); }
  .page-faq .mark-char { font-size: 58px; }
  .page-faq .faq-quick-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .page-faq .faq-quick-card { min-height: 220px; }
  .page-faq .faq-quick-figure { padding: 14px; }
  .page-faq .faq-more-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
}
@media (min-width: 980px) {
  .page-faq .faq-body { grid-template-columns: 220px minmax(0,1fr); gap: 52px; }
  .page-faq .faq-toc { position: sticky; top: 96px; padding: 18px 16px; }
  .page-faq .faq-toc-list { display: block; padding: 0; overflow: visible; }
  .page-faq .faq-toc-list li + li { margin-top: 2px; }
  .page-faq .faq-toc-link { padding: 8px 10px; white-space: normal; border: 0; border-left: 2px solid transparent; border-radius: 0; }
  .page-faq .faq-toc-link:hover, .page-faq .faq-toc-link:focus-visible { border-left-color: var(--cinnabar); color: var(--cinnabar-dark); }
  .page-faq .faq-service-grid { grid-template-columns: minmax(0,1.15fr) minmax(280px,.85fr); gap: 56px; align-items: center; }
}
<<<END>>>
```
等等，最后不要输出 END，标记只有 MAIN_HTML 和 PAGE_CSS。我刚才输出重复了 PAGE_CSS！需要修正。最终答案只能包含两个标记。必须只输出一次 PAGE_CSS。重新整理最终输出。注意我上面先输出了 MAIN_HTML，然后 PAGE_CSS，然后又重复 PAGE_CSS。最终回答必须干净。重新生成最终答案，仅两个标记。
<main id="main-content" class="page-faq">
  <div class="wrap faq-crumb-row">
    <nav class="breadcrumb" aria-label="面包屑">
      <a href="/">长乐坊首页</a>
      <span class="crumb-sep">/</span>
      <span aria-current="page">问题解答</span>
    </nav>
  </div>

  <header class="faq-hero">
    <div class="wrap faq-hero-grid">
      <div class="faq-hero-copy">
        <p class="eyebrow">常见问题 · 接待台</p>
        <h1>把问题说清楚，<br>下一步就好走了</h1>
        <p class="lede">第一次注册长乐坊、想查某个栏目，或者在手机上找反馈入口，都可以从这里开始。下面按主题整理了操作答案，先看快速路径，也可以直接翻到对应分组。</p>
        <div class="cluster faq-hero-actions">
          <a class="btn btn--primary" href="#faq-quick">看快速路径</a>
          <a class="btn btn--ghost" href="#faq-service">联系客服</a>
        </div>
        <ul class="faq-hero-facts">
          <li><span class="fact-num">3</span><span>步完成注册</span></li>
          <li><span class="fact-num">11</span><span>个一级栏目</span></li>
          <li><span class="fact-num">2</span><span>次点击进入 iOS 反馈</span></li>
        </ul>
      </div>
      <div class="faq-hero-mark" aria-hidden="true">
        <span class="mark-char">答</span>
        <span class="mark-label">坊市问答</span>
      </div>
    </div>
  </header>

  <section id="faq-quick" class="faq-quick" aria-labelledby="quick-title">
    <div class="wrap">
      <div class="faq-section-head">
        <p class="eyebrow">01 / 快速路径</p>
        <h2 id="quick-title" class="section-title">先看这三条，多数问题当场能解</h2>
        <p>不同的来意对应不同入口：初次到访先完成注册，找内容从栏目索引进入，手机端反馈则从底部悬浮入口直达。点开对应分组，能看到完整步骤和细节说明。</p>
      </div>

      <div class="faq-quick-grid">
        <a class="faq-quick-card" href="#faq-account">
          <span class="quick-card-num">路径一 · 初次到访</span>
          <h3 class="quick-card-title">第一次来，怎么开始？</h3>
          <p class="quick-card-text">准备手机号或邮箱，按引导完成验证、设置登录凭证并确认服务条款，三步后自动进入栏目索引。</p>
          <span class="quick-card-go">看注册细节 <span aria-hidden="true">→</span></span>
        </a>
        <a class="faq-quick-card" href="#faq-index">
          <span class="quick-card-num">路径二 · 查找内容</span>
          <h3 class="quick-card-title">想找某个栏目内容？</h3>
          <p class="quick-card-text">注册后直接进入索引页，11 个一级栏目与 46 个内容标签按季度更新，可先按栏目缩小范围。</p>
          <span class="quick-card-go">看索引用法 <span aria-hidden="true">→</span></span>
        </a>
        <a class="faq-quick-card" href="#faq-mobile">
          <span class="quick-card-num">路径三 · 手机反馈</span>
          <h3 class="quick-card-title">在手机上怎么反馈？</h3>
          <p class="quick-card-text">移动端页面底部有固定的 iOS 反馈入口，滑动时保持可见，通常两次点击内即可提交反馈。</p>
          <span class="quick-card-go">看移动端入口 <span aria-hidden="true">→</span></span>
        </a>
      </div>

      <figure class="figure faq-quick-figure">
        <div class="frame frame--16x9">
          <img src="{zhanqunpic:h:800w:1200}" width="1200" height="800" alt="长乐坊问答路径示意图，三步注册、栏目索引与 iOS 反馈入口以节点和连线依次呈现" loading="lazy" decoding="async">
        </div>
        <figcaption class="figure-caption">从注册到索引，再到反馈：三条常用路径一眼看清。</figcaption>
      </figure>
    </div>
  </section>

  <div class="wrap faq-body">
    <aside class="faq-toc" aria-label="问答目录">
      <p class="faq-toc-title">翻到对应分组</p>
      <ul class="faq-toc-list">
        <li><a class="faq-toc-link" href="#faq-quick">快速路径</a></li>
        <li><a class="faq-toc-link" href="#faq-account">注册与账户</a></li>
        <li><a class="faq-toc-link" href="#faq-index">栏目索引与季度更新</a></li>
        <li><a class="faq-toc-link" href="#faq-mobile">移动端与 iOS 反馈</a></li>
        <li><a class="faq-toc-link" href="#faq-kit">适配清单与下载</a></li>
        <li><a class="faq-toc-link" href="#faq-service">客服联系与回拨</a></li>
      </ul>
      <a class="faq-toc-top" href="#main-content">回到顶部</a>
    </aside>

    <div class="faq-groups">
      <section id="faq-account" class="faq-group" aria-labelledby="account-title">
        <div class="faq-group-head">
          <span class="faq-group-num" aria-hidden="true">02</span>
          <div>
            <h2 id="account-title">注册与账户</h2>
            <p class="faq-group-intro">从填写到进入栏目索引，三步注册的常见疑问都集中在这里。遇到验证问题时，也可以直接联系客服协助处理。</p>
          </div>
        </div>
        <div class="faq-list">
          <details class="faq-item" open>
            <summary>
              <span class="faq-q">注册需要准备什么？</span>
              <span class="faq-icon" aria-hidden="true"></span>
            </summary>
            <div class="faq-a">
              <p>准备一个可用的手机号或邮箱即可开始。按页面引导完成验证、设置登录凭证并确认服务条款，全程三步。提交后会自动进入栏目索引页，不需要再回首页找入口。</p>
            </div>
          </details>
          <details class="faq-item">
            <summary>
              <span class="faq-q">三步具体是哪三步？</span>
              <span class="faq-icon" aria-hidden="true"></span>
            </summary>
            <div class="faq-a">
              <p>第一步填写手机号或邮箱并完成验证；第二步设置登录凭证；第三步确认服务条款并提交。完成后即可浏览 11 个一级栏目与 46 个内容标签。</p>
            </div>
          </details>
          <details class="faq-item">
            <summary>
              <span class="faq-q">收不到验证信息怎么办？</span>
              <span class="faq-icon" aria-hidden="true"></span>
            </summary>
            <div class="faq-a">
              <p>先检查手机拦截设置或邮箱垃圾箱，确认号码与邮箱填写无误后再发起一次。仍未收到，可发邮件到客服邮箱，注明注册时使用的账号，我们会协助排查。</p>
            </div>
          </details>
          <details class="faq-item">
            <summary>
              <span class="faq-q">注册完成后会到哪里？</span>
              <span class="faq-icon" aria-hidden="true"></span>
            </summary>
            <div class="faq-a">
              <p>注册完成后自动进入栏目索引页，您可以立即看到全部一级栏目和内容标签，按主题或季度查看专题条目。</p>
            </div>
          </details>
          <details class="faq-item">
            <summary>
              <span class="faq-q">登录方式可以更换吗？</span>
              <span class="faq-icon" aria-hidden="true"></span>
            </summary>
            <div class="faq-a">
              <p>验证方式和登录凭证可以在账户设置中调整。如果原手机号或邮箱已经无法使用，请通过客服邮箱说明原账号与需要变更的信息，我们会协助您恢复访问。</p>
            </div>
          </details>
        </div>
      </section>

      <section id="faq-index" class="faq-group" aria-labelledby="index-title">
        <div class="faq-group-head">
          <span class="faq-group-num" aria-hidden="true">03</span>
          <div>
            <h2 id="index-title">栏目索引与季度更新</h2>
            <p class="faq-group-intro">索引页是查找专题内容的主要入口。按栏目、标签或版本阶段定位，能更快找到您关心的坊市文化观察与运营记录。</p>
          </div>
        </div>
        <div class="faq-list">
          <details class="faq-item">
            <summary>
              <span class="faq-q">栏目索引里包含哪些内容？</span>
              <span class="faq-icon" aria-hidden="true"></span>
            </summary>
            <div class="faq-a">
              <p>索引覆盖 11 个一级栏目和 46 个内容标签，专题类型包括坊市文化观察、栏目适配指南、版本札记和合作动态。您可以按栏目进入，也可以按标签跨栏目查找相近话题。</p>
            </div>
          </details>
          <details class="faq-item">
            <summary>
              <span class="faq-q">多久更新一次？</span>
              <span class="faq-icon" aria-hidden="true"></span>
            </summary>
            <div class="faq-a">
              <p>每季度更新一次，全年共 4 次。每次更新会发布索引更新说明，列出新增标签、下架内容和适配变化，方便您判断哪些内容值得重新查看。</p>
            </div>
          </details>
          <details class="faq-item">
            <summary>
              <span class="faq-q">怎么确认看到的是最新版本？</span>
              <span class="faq-icon" aria-hidden="true"></span>
            </summary>
            <div class="faq-a">
              <p>当前索引版本为 V9。在索引页查看版本标识和当季更新说明即可确认；专题条目按季度和版本阶段排列，从最近一期往回翻也能判断内容所处阶段。</p>
            </div>
          </details>
          <details class="faq-item">
            <summary>
              <span class="faq-q">想找某个具体话题怎么办？</span>
              <span class="faq-icon" aria-hidden="true"></span>
            </summary>
            <div class="faq-a">
              <p>使用栏目级检索输入关键词，或先按一级栏目缩小范围，再用标签定位。标签适合查找分布在多个栏目里的相近内容，例如同一阶段的适配说明或合作动态。</p>
            </div>
          </details>
        </div>
      </section>

      <section id="faq-mobile" class="faq-group" aria-labelledby="mobile-title">
        <div class="faq-group-head">
          <span class="faq-group-num" aria-hidden="true">04</span>
          <div>
            <h2 id="mobile-title">移动端与 iOS 反馈</h2>
            <p class="faq-group-intro">移动端访问占比较高，反馈入口因此做了更短的路径。手机用户可以从页面底部直接进入，不必逐层寻找。</p>
          </div>
        </div>
        <div class="faq-list">
          <details class="faq-item">
            <summary>
              <span class="faq-q">手机上的反馈入口在哪里？</span>
              <span class="faq-icon" aria-hidden="true"></span>
            </summary>
            <div class="faq-a">
              <p>移动端页面底部有固定的 iOS 反馈入口，向上滑动时保持可见。从入口进入反馈页通常不超过两次点击，提交后即可完成反馈。</p>
            </div>
          </details>
          <details class="faq-item">
            <summary>
              <span class="faq-q">为什么 iOS 入口单独优化？</span>
              <span class="faq-icon" aria-hidden="true"></span>
            </summary>
            <div class="faq-a">
              <p>移动端访问占比约 63%，iOS 用户是主要反馈来源之一。该入口在 2025 年做过路径优化，减少了中间步骤，让反馈更直接。</p>
            </div>
          </details>
          <details class="faq-item">
            <summary>
              <span class="faq-q">反馈时写什么信息更有帮助？</span>
              <span class="faq-icon" aria-hidden="true"></span>
            </summary>
            <div class="faq-a">
              <p>建议写清所在页面、操作步骤、设备型号和系统版本，并说明问题出现的时间。需要回复时请留下邮箱，客服会据此跟进。</p>
            </div>
          </details>
          <details class="faq-item">
            <summary>
              <span class="faq-q">手机和电脑看到的内容一样吗？</span>
              <span class="faq-icon" aria-hidden="true"></span>
            </summary>
            <div class="faq-a">
              <p>中国长乐坊首页同时适配移动端与桌面端，栏目和专题内容保持一致，入口位置会随屏幕尺寸调整。手机上优先看到底部反馈入口，电脑上则从导航进入各栏目。</p>
            </div>
          </details>
        </div>
      </section>

      <section id="faq-kit" class="faq-group" aria-labelledby="kit-title">
        <div class="faq-group-head">
          <span class="faq-group-num" aria-hidden="true">05</span>
          <div>
            <h2 id="kit-title">适配清单与下载</h2>
            <p class="faq-group-intro">适配清单帮助您判断在不同设备上的使用方式。清单随季度索引同步更新，下载后即可按终端逐项对照。</p>
          </div>
        </div>
        <div class="faq-list">
          <details class="faq-item">
            <summary>
              <span class="faq-q">适配清单覆盖哪些终端？</span>
              <span class="faq-icon" aria-hidden="true"></span>
            </summary>
            <div class="faq-a">
              <p>覆盖桌面浏览器、iOS、Android、平板和微信内置浏览器 5 类终端，逐项列出入口位置与已知适配情况，方便您按实际设备查看。</p>
            </div>
          </details>
          <details class="faq-item">
            <summary>
              <span class="faq-q">在哪里下载清单？</span>
              <span class="faq-icon" aria-hidden="true"></span>
            </summary>
            <div class="faq-a">
              <p>完成注册后，可在 <a href="/download/">下载与适配中心</a> 获取最新清单。清单随季度索引同步更新，建议每次更新后重新下载，以免参考旧版本。</p>
            </div>
          </details>
          <details class="faq-item">
            <summary>
              <span class="faq-q">清单可以用于内部评估吗？</span>
              <span class="faq-icon" aria-hidden="true"></span>
            </summary>
            <div class="faq-a">
              <p>可以。清单面向访客与合作方提供终端适配参考，便于您判断在哪些设备上使用，或在合作前评估终端覆盖情况。如需更细的说明，可通过 <a href="/cooperation/">商务合作</a> 联系我们。</p>
            </div>
          </details>
          <details class="faq-item">
            <summary>
              <span class="faq-q">团队有多种设备，怎么快速对照？</span>
              <span class="faq-icon" aria-hidden="true"></span>
            </summary>
            <div class="faq-a">
              <p>先看清单中的 5 类终端分组，再按团队实际使用的设备逐项对照。遇到清单未覆盖的特殊环境，可在邮件中说明设备与系统版本，我们会安排适配同事跟进。</p>
            </div>
          </details>
        </div>
      </section>
    </div>
  </div>

  <section id="faq-service" class="faq-service" aria-labelledby="service-title">
    <div class="wrap faq-service-grid">
      <div class="faq-service-copy">
        <p class="eyebrow">06 / 客服联系与回拨</p>
        <h2 id="service-title">邮件写清楚，回拨更顺畅</h2>
        <p class="faq-service-lede">客服邮箱在工作日 10:00-18:00 内回复。若您希望电话沟通，请在邮件中留下联系方式，我们会安排专属顾问在合适的时间回拨。</p>

        <div class="faq-contact-list">
          <div class="faq-contact-row">
            <span class="faq-contact-label">客服邮箱</span>
            <span class="faq-contact-value">
              service@android-changlefang.com.cn
              <button type="button" class="copy-btn" data-copy="service@android-changlefang.com.cn" data-label="复制邮箱">复制邮箱</button>
              <span class="copy-status" data-copy-status aria-live="polite"></span>
            </span>
          </div>
          <div class="faq-contact-row">
            <span class="faq-contact-label">联系电话</span>
            <span class="faq-contact-value">
              17292520754
              <button type="button" class="copy-btn" data-copy="17292520754" data-label="复制电话">复制电话</button>
              <span class="copy-status" data-copy-status aria-live="polite"></span>
            </span>
          </div>
          <div class="faq-contact-row">
            <span class="faq-contact-label">联系地址</span>
            <span class="faq-contact-value">广东省广州市天河区科韵路88号长乐坊大厦12层</span>
          </div>
          <div class="faq-contact-row">
            <span class="faq-contact-label">服务时段</span>
            <span class="faq-contact-value">工作日 10:00-18:00 邮件回复</span>
          </div>
        </div>

        <p class="faq-service-note">邮件中请写清问题、账号和可联系的时间。电话沟通以回拨方式安排，专属顾问会在与您确认的时间段联系。</p>
      </div>

      <figure class="figure faq-service-figure">
        <div class="frame frame--1x1">
          <img src="{zhanqunpic:h:1000w:1000}" width="1000" height="1000" alt="桌面上的邮箱界面、纸张便签与茶杯，表现工作日邮件回复的服务场景" loading="lazy" decoding="async">
        </div>
        <figcaption class="figure-caption">工作日的邮件由客服团队逐封查看，复杂问题会转给对应小组跟进。</figcaption>
      </figure>
    </div>
  </section>

  <section class="faq-more" aria-labelledby="more-title">
    <div class="wrap">
      <div class="faq-section-head">
        <p class="eyebrow">继续了解</p>
        <h2 id="more-title" class="section-title">答案之外，还有这些入口</h2>
      </div>
      <div class="faq-more-grid">
        <a class="faq-more-card" href="/download/">下载与适配中心 <span aria-hidden="true">→</span></a>
        <a class="faq-more-card" href="/topics/">专题索引 <span aria-hidden="true">→</span></a>
        <a class="faq-more-card" href="/cooperation/">商务合作 <span aria-hidden="true">→</span></a>
      </div>
    </div>
  </section>
</main>

.page-faq {
  --faq-line: rgba(21, 19, 17, 0.14);
  --faq-line-gilt: rgba(201, 162, 74, 0.48);
  --faq-ink-soft: #4a443c;
  --faq-paper-veil: rgba(255, 246, 232, 0.78);
  background: var(--paper);
  color: var(--ink);
  overflow-x: clip;
}

.page-faq .faq-crumb-row {
  padding: clamp(14px, 2vw, 22px) 0 0;
  font-size: 13px;
}

.page-faq .faq-hero {
  padding: clamp(24px, 4vw, 52px) 0 clamp(32px, 5vw, 66px);
  border-bottom: 1px solid var(--faq-line);
  background:
    radial-gradient(circle at 88% 12%, rgba(200, 52, 43, 0.06), transparent 36%),
    radial-gradient(circle at 12% 88%, rgba(201, 162, 74, 0.08), transparent 42%),
    var(--paper);
}

.page-faq .faq-hero-grid {
  display: grid;
  gap: 28px;
  align-items: end;
}

.page-faq .faq-hero-copy h1 {
  margin: 10px 0 18px;
  font-family: var(--font-display);
  font-size: clamp(34px, 7.2vw, 66px);
  font-weight: 900;
  line-height: 1.08;
  letter-spacing: -0.01em;
  color: var(--ink);
}

.page-faq .faq-hero-copy .lede {
  max-width: 48ch;
  margin: 0;
  font-size: clamp(15px, 1.7vw, 18px);
  line-height: 1.85;
  color: var(--faq-ink-soft);
}

.page-faq .faq-hero-actions {
  margin-top: 24px;
}

.page-faq .faq-hero-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 28px;
  margin: 30px 0 0;
  padding: 18px 0 0;
  border-top: 1px dashed var(--faq-line-gilt);
  list-style: none;
}

.page-faq .faq-hero-facts li {
  display: flex;
  align-items: baseline;
  gap: 7px;
  font-size: 13px;
  color: var(--neutral);
}

.page-faq .fact-num {
  font-family: var(--font-num);
  font-size: 30px;
  line-height: 1;
  color: var(--cinnabar);
}

.page-faq .faq-hero-mark {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 96px;
  aspect-ratio: 1 / 1;
  background: var(--cinnabar);
  color: var(--paper);
  border: 3px double rgba(255, 246, 232, 0.58);
  border-radius: 4px;
  transform: rotate(-3deg);
  box-shadow: 0 14px 28px -18px rgba(21, 19, 17, 0.7);
}

.page-faq .mark-char {
  font-family: var(--font-display);
  font-size: 40px;
  font-weight: 900;
  line-height: 1;
}

.page-faq .mark-label {
  font-size: 10px;
  letter-spacing: 0.18em;
  color: var(--cream);
}

.page-faq .faq-quick {
  padding: clamp(36px, 6vw, 74px) 0;
  background: var(--paper-warm);
  border-bottom: 1px solid var(--faq-line);
}

.page-faq .faq-section-head {
  display: grid;
  gap: 10px;
  max-width: 760px;
  margin-bottom: 28px;
}

.page-faq .faq-section-head h2 {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(26px, 4vw, 40px);
  font-weight: 800;
  line-height: 1.25;
  color: var(--ink);
}

.page-faq .faq-section-head p:not(.eyebrow) {
  margin: 0;
  font-size: 15px;
  line-height: 1.8;
  color: var(--faq-ink-soft);
}

.page-faq .faq-quick-grid {
  display: grid;
  gap: 14px;
  margin-bottom: 30px;
}

.page-faq .faq-quick-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 20px;
  background: var(--paper);
  border: 1px solid var(--faq-line);
  border-radius: var(--radius-m);
  box-shadow: var(--shadow-paper);
  color: inherit;
  text-decoration: none;
  transition: border-color 0.18s ease, transform 0.18s ease;
}

.page-faq .faq-quick-card:hover,
.page-faq .faq-quick-card:focus-visible {
  border-color: var(--gilt);
  transform: translateY(-2px);
}

.page-faq .quick-card-num {
  font-family: var(--font-num);
  font-size: 12px;
  letter-spacing: 0.14em;
  color: var(--cinnabar-dark);
}

.page-faq .quick-card-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 800;
  line-height: 1.35;
  color: var(--ink);
}

.page-faq .quick-card-text {
  margin: 0;
  font-size: 14px;
  line-height: 1.75;
  color: var(--faq-ink-soft);
}

.page-faq .quick-card-go {
  margin-top: auto;
  padding-top: 12px;
  font-size: 13px;
  font-weight: 700;
  color: var(--cinnabar-dark);
}

.page-faq .faq-quick-figure {
  margin: 0;
  padding: 10px;
  background: var(--paper);
  border: 1px solid var(--faq-line);
  border-radius: var(--radius-m);
  box-shadow: var(--shadow-paper);
}

.page-faq .faq-quick-figure img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
  border-radius: var(--radius-s);
}

.page-faq .faq-quick-figure .figure-caption {
  padding: 10px 4px 0;
  font-size: 12px;
  color: var(--neutral);
}

.page-faq .faq-body {
  display: grid;
  gap: 26px;
  align-items: start;
  padding: clamp(36px, 6vw, 76px) 0;
}

.page-faq .faq-toc {
  padding: 14px;
  background: var(--cream);
  border: 1px solid var(--faq-line);
  border-radius: var(--radius-m);
}

.page-faq .faq-toc-title {
  margin: 0 0 10px;
  font-size: 12px;
  letter-spacing: 0.14em;
  color: var(--neutral);
}

.page-faq .faq-toc-list {
  display: flex;
  gap: 6px;
  margin: 0;
  padding: 0 0 4px;
  overflow-x: auto;
  list-style: none;
}

.page-faq .faq-toc-link {
  display: block;
  padding: 8px 12px;
  white-space: nowrap;
  font-size: 13px;
  color: var(--ink-deep);
  text-decoration: none;
  border: 1px solid var(--faq-line);
  border-radius: var(--radius-pill);
  transition: border-color 0.18s ease, color 0.18s ease;
}

.page-faq .faq-toc-link:hover,
.page-faq .faq-toc-link:focus-visible {
  border-color: var(--gilt);
  color: var(--cinnabar-dark);
}

.page-faq .faq-toc-top {
  display: inline-block;
  margin-top: 12px;
  font-size: 12px;
  color: var(--cinnabar-dark);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.page-faq .faq-groups {
  display: grid;
  gap: clamp(30px, 5vw, 56px);
}

.page-faq .faq-group {
  scroll-margin-top: 100px;
}

.page-faq .faq-group + .faq-group {
  padding-top: clamp(28px, 4vw, 44px);
  border-top: 1px solid var(--faq-line);
}

.page-faq .faq-group-head {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  margin-bottom: 16px;
}

.page-faq .faq-group-num {
  display: grid;
  place-items: center;
  flex: none;
  width: 44px;
  height: 44px;
  background: var(--cinnabar);
  color: var(--paper);
  font-family: var(--font-num);
  font-size: 20px;
  line-height: 1;
  border-radius: 4px;
  box-shadow: inset 0 0 0 1px rgba(231, 201, 122, 0.55);
}

.page-faq .faq-group-head h2 {
  margin: 0 0 6px;
  font-family: var(--font-display);
  font-size: clamp(24px, 3.4vw, 34px);
  font-weight: 800;
  line-height: 1.25;
  color: var(--ink);
}

.page-faq .faq-group-intro {
  margin: 0;
  font-size: 14px;
  line-height: 1.8;
  color: var(--faq-ink-soft);
}

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

.page-faq .faq-item {
  border-bottom: 1px solid var(--faq-line);
}

.page-faq .faq-item summary {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 18px;
  padding: 16px 2px;
  cursor: pointer;
  list-style: none;
}

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

.page-faq .faq-q {
  font-size: clamp(16px, 2vw, 18px);
  font-weight: 700;
  line-height: 1.6;
  color: var(--ink);
}

.page-faq .faq-icon {
  position: relative;
  flex: none;
  width: 24px;
  height: 24px;
  margin-top: 2px;
  border: 1px solid var(--gilt);
  border-radius: 50%;
  transition: background 0.18s ease, border-color 0.18s ease;
}

.page-faq .faq-icon::before,
.page-faq .faq-icon::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 10px;
  height: 1.5px;
  background: var(--gilt);
  transform: translate(-50%, -50%);
  transition: transform 0.18s ease, background 0.18s ease;
}

.page-faq .faq-icon::after {
  transform: translate(-50%, -50%) rotate(90deg);
}

.page-faq .faq-item[open] .faq-icon {
  background: var(--cinnabar);
  border-color: var(--cinnabar);
}

.page-faq .faq-item[open] .faq-icon::before,
.page-faq .faq-item[open] .faq-icon::after {
  background: var(--paper);
}

.page-faq .faq-item[open] .faq-icon::after {
  transform: translate(-50%, -50%) rotate(0deg);
}

.page-faq .faq-a {
  max-width: 70ch;
  padding: 0 2px 20px;
  font-size: 15.5px;
  line-height: 1.85;
  color: var(--faq-ink-soft);
}

.page-faq .faq-a p {
  margin: 0;
}

.page-faq .faq-a a {
  color: var(--cinnabar-dark);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.page-faq .faq-service {
  padding: clamp(40px, 7vw, 84px) 0;
  background:
    linear-gradient(135deg, rgba(200, 52, 43, 0.08), transparent 46%),
    var(--ink-deep);
  color: var(--paper);
  border-top: 3px solid var(--gilt);
}

.page-faq .faq-service-grid {
  display: grid;
  gap: 30px;
  align-items: start;
}

.page-faq .faq-service .eyebrow {
  color: var(--gilt-light);
}

.page-faq .faq-service h2 {
  margin: 10px 0 14px;
  font-family: var(--font-display);
  font-size: clamp(26px, 4vw, 42px);
  font-weight: 800;
  line-height: 1.25;
  color: var(--paper);
}

.page-faq .faq-service-lede {
  max-width: 58ch;
  margin: 0;
  font-size: 15px;
  line-height: 1.85;
  color: var(--faq-paper-veil);
}

.page-faq .faq-contact-list {
  display: grid;
  margin: 26px 0;
  border-top: 1px solid rgba(231, 201, 122, 0.28);
}

.page-faq .faq-contact-row {
  display: grid;
  gap: 6px;
  padding: 14px 0;
  border-bottom: 1px solid rgba(231, 201, 122, 0.28);
}

.page-faq .faq-contact-label {
  font-size: 12px;
  letter-spacing: 0.16em;
  color: var(--gilt-light);
}

.page-faq .faq-contact-value {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  font-size: clamp(15px, 2vw, 18px);
  line-height: 1.7;
  color: var(--paper);
  word-break: break-word;
}

.page-faq .copy-btn {
  padding: 5px 11px;
  font-family: var(--font-body);
  font-size: 12px;
  line-height: 1.5;
  color: var(--gilt-light);
  background: transparent;
  border: 1px solid var(--faq-line-gilt);
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: background 0.18s ease, color 0.18s ease;
}

.page-faq .copy-btn:hover,
.page-faq .copy-btn:focus-visible {
  background: var(--gilt);
  color: var(--ink-deep);
}

.page-faq .copy-status {
  font-size: 12px;
  color: var(--celadon-mist);
}

.page-faq .faq-service-note {
  margin: 0;
  padding-left: 14px;
  font-size: 13.5px;
  line-height: 1.85;
  color: var(--faq-paper-veil);
  border-left: 2px solid var(--cinnabar);
}

.page-faq .faq-service-figure {
  margin: 0;
  padding: 10px;
  background: rgba(255, 246, 232, 0.05);
  border: 1px solid rgba(231, 201, 122, 0.34);
  border-radius: var(--radius-m);
}

.page-faq .faq-service-figure img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: var(--radius-s);
}

.page-faq .faq-service-figure .figure-caption {
  padding: 10px 4px 0;
  font-size: 12px;
  line-height: 1.6;
  color: rgba(255, 246, 232, 0.68);
}

.page-faq .faq-more {
  padding: clamp(32px, 5vw, 58px) 0;
  border-top: 1px solid var(--faq-line);
}

.page-faq .faq-more-grid {
  display: grid;
  gap: 12px;
}

.page-faq .faq-more-card {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 16px 18px;
  font-size: 15px;
  font-weight: 700;
  color: var(--ink);
  text-decoration: none;
  background: var(--cream);
  border: 1px solid var(--faq-line);
  border-radius: var(--radius-m);
  transition: border-color 0.18s ease, color 0.18s ease;
}

.page-faq .faq-more-card:hover,
.page-faq .faq-more-card:focus-visible {
  border-color: var(--gilt);
  color: var(--cinnabar-dark);
}

.page-faq .faq-more-card span {
  color: var(--cinnabar);
}

@media (min-width: 720px) {
  .page-faq .faq-hero-grid {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 40px;
  }

  .page-faq .faq-hero-mark {
    width: clamp(120px, 16vw, 180px);
  }

  .page-faq .mark-char {
    font-size: 58px;
  }

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

  .page-faq .faq-quick-card {
    min-height: 220px;
  }

  .page-faq .faq-quick-figure {
    padding: 14px;
  }

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

@media (min-width: 980px) {
  .page-faq .faq-body {
    grid-template-columns: 220px minmax(0, 1fr);
    gap: 52px;
  }

  .page-faq .faq-toc {
    position: sticky;
    top: 96px;
    padding: 18px 16px;
  }

  .page-faq .faq-toc-list {
    display: block;
    padding: 0;
    overflow: visible;
  }

  .page-faq .faq-toc-list li + li {
    margin-top: 2px;
  }

  .page-faq .faq-toc-link {
    padding: 8px 10px;
    white-space: normal;
    border: 0;
    border-left: 2px solid transparent;
    border-radius: 0;
  }

  .page-faq .faq-toc-link:hover,
  .page-faq .faq-toc-link:focus-visible {
    border-left-color: var(--cinnabar);
    color: var(--cinnabar-dark);
  }

  .page-faq .faq-service-grid {
    grid-template-columns: minmax(0, 1.15fr) minmax(280px, 0.85fr);
    gap: 56px;
    align-items: center;
  }
}