:root {
      --brand: #F9A003;
      --ink: #202020;
      --muted: #5e5e5e;
      --line: #e7e1d9;
      --surface: #ffffff;
      --page: #f7f7f5;
    }

    * { box-sizing: border-box; }

    body {
      margin: 0;
      background: var(--page);
      color: var(--ink);
      font-family: Arial, Helvetica, sans-serif;
      font-size: 14px;
      line-height: 1.7;
    }

    .faq-page {
      width: min(100% - 32px, 920px);
      margin: 56px auto;
    }

    .faq-heading {
      margin: 0 0 8px;
      color: var(--ink);
      font-size: 28px;
      line-height: 1.25;
      font-weight: 700;
    }

    .faq-heading::after {
      content: "";
      display: block;
      width: 44px;
      height: 3px;
      margin-top: 14px;
      background: var(--brand);
    }

    .faq-intro {
      max-width: 680px;
      margin: 18px 0 28px;
      color: var(--muted);
    }

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

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

    .faq-item summary {
      position: relative;
      padding: 18px 48px 18px 20px;
      cursor: pointer;
      list-style: none;
      color: var(--ink);
      font-weight: 700;
      outline: none;
    }

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

    .faq-item summary::after {
      content: "+";
      position: absolute;
      top: 50%;
      right: 20px;
      color: var(--brand);
      font-size: 24px;
      font-weight: 400;
      line-height: 1;
      transform: translateY(-50%);
    }

    .faq-item[open] summary {
      color: #b87000;
    }

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

    .faq-answer {
      padding: 0 20px 20px;
      color: var(--muted);
    }

    .faq-answer p { margin: 0; }

    @media (max-width: 600px) {
      .faq-page { width: min(100% - 24px, 920px); margin: 32px auto; }
      .faq-heading { font-size: 24px; }
      .faq-item summary { padding: 16px 44px 16px 16px; }
      .faq-answer { padding: 0 16px 18px; }
      .faq-item summary::after { right: 16px; }
    }