/* --- help page --------------------------------------------------------------
   Scoped to .fq so nothing leaks. The page is the store's own furniture — sand
   paper, one big serif sentence, drawings instead of stock photos — arranged
   the way a help page is actually used: five shelves you can recognise, a
   panel you can search, and one way out at the bottom.

   Paper is the site's --pi-paper, not a new tint: this page sits between the
   header and the footer like every other page, and a second background would
   read as a different site.
   -------------------------------------------------------------------------- */

.fq {
  --fq-ink: #20211d;
  --fq-muted: #6b7065;
  --fq-green: #2f3f2e;
  --fq-orange: #e8753f;
  --fq-soft: #e8ecdb;
  --fq-soft-hover: #e0e6d0;
  --fq-line: rgba(32, 33, 29, 0.11);
  color: var(--fq-ink);
  padding: clamp(16px, 2vw, 30px) 0 clamp(40px, 4.4vw, 66px);
}

.fq__inner {
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 clamp(18px, 4vw, 40px);
}

/* ------------------------------------------------------------------- hero */

.fq-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 45%);
  align-items: end;
  gap: clamp(14px, 2.4vw, 36px);
}

.fq-hero__kicker {
  display: inline-block;
  padding: 7px 14px;
  border-radius: 999px;
  background: var(--fq-soft);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #4b5346;
}

.fq-hero__title {
  margin: 18px 0 0;
  font-family: Georgia, 'Times New Roman', serif;
  font-weight: 400;
  font-size: clamp(42px, 5.4vw, 78px);
  line-height: 0.97;
  letter-spacing: -0.05em;
}

.fq-hero__title em {
  font-style: italic;
}

.fq-hero__star {
  display: inline-block;
  width: 0.4em;
  height: 0.4em;
  margin-left: 0.14em;
  color: var(--fq-orange);
  vertical-align: 0.34em;
}

.fq-hero__star svg,
.fq-help__star svg,
.fq-band__kicker span svg {
  width: 100%;
  height: 100%;
  display: block;
}

.fq-hero__lede {
  margin: 18px 0 0;
  max-width: 36ch;
  font-size: clamp(14px, 1.15vw, 16px);
  line-height: 1.62;
  color: #4e5449;
}

.fq-hero__art {
  display: block;
  width: 100%;
  height: auto;
}

/* ---------------------------------------------------------------- shelves */

.fq-cats {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: clamp(9px, 1vw, 14px);
  margin-top: clamp(22px, 2.6vw, 34px);
}

.fq-cat {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-height: 122px;
  padding: 15px 15px 14px;
  border-radius: 14px;
  background: var(--fq-soft);
  transition: background 0.18s ease, transform 0.18s ease;
}

.fq-cat:hover {
  background: var(--fq-soft-hover);
  transform: translateY(-2px);
}

.fq-cat__icon {
  width: 26px;
  height: 26px;
  color: #3d4438;
}

.fq-cat__icon svg {
  width: 100%;
  height: 100%;
}

.fq-cat__title {
  margin-top: 6px;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: -0.012em;
}

.fq-cat__note {
  font-size: 11.5px;
  line-height: 1.45;
  color: #5f6558;
  /* Room for the arrow in the corner, so a three-line note never runs under it. */
  padding-right: 18px;
}

.fq-cat__go {
  position: absolute;
  right: 13px;
  bottom: 12px;
  width: 15px;
  height: 15px;
  color: #3d4438;
  opacity: 0.5;
  transition: opacity 0.18s ease, transform 0.18s ease;
}

.fq-cat:hover .fq-cat__go {
  opacity: 1;
  transform: translateX(2px);
}

/* ------------------------------------------------------------- main split */

.fq-main {
  display: grid;
  grid-template-columns: minmax(0, 320px) minmax(0, 1fr);
  /* Start, then stick: an open shelf makes this row 700px tall, and stretching
     the card to match left 300px of flat green under the button. The card keeps
     its own height and follows the reader instead. */
  align-items: start;
  gap: clamp(16px, 2vw, 26px);
  margin-top: clamp(18px, 2.2vw, 30px);
}

/* The help card. It is the one place on the page that is not a list, so it
   gets the drawing and the only filled button. */
.fq-help {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: clamp(18px, 1.8vw, 24px) clamp(18px, 1.8vw, 24px) 0;
  border-radius: 20px;
  background: var(--fq-soft);
}

.fq-help__kicker {
  margin: 0;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: #4f5749;
}

.fq-help__title {
  margin: 14px 0 0;
  /* 84%, not 100%: at full width "We're here to help." fills the line exactly
     and pushes the star onto a line of its own. Two lines with the star after
     "help." is the arrangement the page is drawn for. */
  max-width: 84%;
  font-family: Georgia, 'Times New Roman', serif;
  font-weight: 400;
  font-size: clamp(27px, 2.4vw, 35px);
  line-height: 1.05;
  letter-spacing: -0.04em;
}

.fq-help__title em {
  font-style: italic;
}

.fq-help__star {
  display: inline-block;
  width: 0.4em;
  height: 0.4em;
  margin-left: 0.1em;
  color: var(--fq-orange);
  vertical-align: 0.52em;
}

.fq-help__body {
  margin: 12px 0 0;
  font-size: 13px;
  line-height: 1.6;
  color: #555b4e;
}

.fq-help__btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 0;
  margin-top: 16px;
  padding: 11px 20px;
  border-radius: 999px;
  background: var(--fq-green);
  color: #f6efdc;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: -0.005em;
  transition: background 0.18s ease, transform 0.18s ease;
}

.fq-help__btn:hover {
  background: #3b4f38;
  transform: translateY(-1px);
}

.fq-help__cat {
  display: block;
  width: min(66%, 176px);
  height: auto;
  /* Pushed to the floor of the card whatever the copy above it does. */
  margin: auto auto -2px;
}

@media (min-width: 1081px) {
  .fq-help {
    position: sticky;
    top: 96px;
  }
}

/* ------------------------------------------------------------------ panel */

.fq-panel__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
}

.fq-panel__title {
  margin: 0;
  font-family: Georgia, 'Times New Roman', serif;
  font-weight: 400;
  font-size: clamp(21px, 2.1vw, 29px);
  letter-spacing: -0.035em;
}

/* site.css sets `input { border: 1px !important; min-height: 44px }` for the
   forms, which turns a search field into a text box with a shadow border. The
   pill is a label here, so the input inside it has to give up both. */
.fq-search {
  display: flex;
  align-items: center;
  gap: 8px;
  width: min(280px, 100%);
  height: 40px;
  padding: 0 15px;
  border: 1px solid rgba(32, 33, 29, 0.16);
  border-radius: 999px;
  background: #fbfaf4;
  transition: border-color 0.18s ease;
}

.fq-search:focus-within {
  border-color: rgba(32, 33, 29, 0.42);
}

.fq-search__icon {
  width: 15px;
  height: 15px;
  flex: none;
  color: #7c8176;
}

.fq-search input {
  width: 100%;
  height: 38px;
  min-height: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  font-size: 12.5px;
  outline: none;
}

.fq-search input::placeholder {
  color: #8d9187;
}

.fq-panel__groups {
  margin-top: 10px;
}

.fq-group {
  border-bottom: 1px solid var(--fq-line);
  /* A shelf card jumps here, and the header is sticky — without this the first
     line of the row it opens lands underneath it. */
  scroll-margin-top: 92px;
}

.fq-group:first-child {
  border-top: 1px solid var(--fq-line);
}

.fq-group[hidden] {
  display: none;
}

.fq-group__head {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 15px 4px;
  cursor: pointer;
  list-style: none;
}

.fq-group__head::-webkit-details-marker {
  display: none;
}

.fq-group__icon {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  flex: none;
  border-radius: 50%;
  background: var(--fq-soft);
  color: #3d4438;
}

.fq-group__icon svg {
  width: 19px;
  height: 19px;
}

.fq-group__txt {
  flex: 1;
  min-width: 0;
}

.fq-group__txt strong {
  display: block;
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 17px;
  font-weight: 400;
  letter-spacing: -0.02em;
}

.fq-group__txt span {
  display: block;
  margin-top: 3px;
  font-size: 12px;
  line-height: 1.4;
  color: var(--fq-muted);
}

.fq-group__chev {
  width: 18px;
  height: 18px;
  flex: none;
  color: #6d7267;
  transition: transform 0.2s ease;
}

.fq-group[open] .fq-group__chev {
  transform: rotate(180deg);
}

.fq-group__head:hover .fq-group__txt strong {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.fq-group__body {
  padding: 2px 4px 20px 52px;
}

.fq-item + .fq-item {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px dashed var(--fq-line);
}

.fq-item__q {
  margin: 0 0 6px;
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.fq-item__a {
  font-size: 13px;
  line-height: 1.72;
  color: #555b4e;
}

.fq-item__a p {
  margin: 0 0 8px;
}

.fq-item__a p:last-child,
.fq-item__a ul:last-child {
  margin-bottom: 0;
}

.fq-item__a ul {
  margin: 0 0 8px;
  padding-left: 18px;
}

.fq-item__a a {
  border-bottom: 1px solid rgba(32, 33, 29, 0.3);
}

.fq-panel__empty {
  margin: 18px 0 0;
  font-size: 13px;
  color: var(--fq-muted);
}

/* -------------------------------------------------------------- closing band */

.fq-band {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 36%);
  align-items: end;
  gap: clamp(12px, 2vw, 26px);
  margin-top: clamp(22px, 2.6vw, 34px);
  padding: clamp(22px, 2.4vw, 32px) clamp(20px, 2.4vw, 32px) 0;
  border-radius: 20px;
  background: var(--fq-green);
  color: #f7f1de;
  overflow: hidden;
}

.fq-band__kicker {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #d5d1bc;
}

.fq-band__kicker span {
  display: block;
  width: 11px;
  height: 11px;
  color: var(--fq-orange);
}

.fq-band__title {
  margin: 10px 0 0;
  font-family: Georgia, 'Times New Roman', serif;
  font-weight: 400;
  font-size: clamp(26px, 2.7vw, 38px);
  line-height: 1.03;
  letter-spacing: -0.035em;
  color: #f7f1de;
}

.fq-band__title em {
  font-style: italic;
}

.fq-band__body {
  margin: 10px 0 0;
  max-width: 48ch;
  font-size: 12.5px;
  line-height: 1.62;
  color: #c7c6b2;
}

.fq-band__link {
  display: inline-block;
  margin: 15px 0 22px;
  padding-bottom: 4px;
  border-bottom: 1px solid rgba(240, 160, 106, 0.45);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #f0a06a;
  transition: border-color 0.18s ease, color 0.18s ease;
}

.fq-band__link:hover {
  color: #ffbe8c;
  border-color: #ffbe8c;
}

.fq-band__art {
  display: block;
  width: 100%;
  height: auto;
  margin-bottom: -2px;
}

/* --- narrower ------------------------------------------------------------- */

@media (max-width: 1080px) {
  .fq-cats {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .fq-main {
    grid-template-columns: minmax(0, 1fr);
  }

  /* Full width, the help card would be a 900px strip with two lines in it —
     so the drawing moves beside the copy instead of under it. */
  .fq-help {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 260px);
    align-items: center;
    gap: 12px;
    padding-bottom: clamp(14px, 1.6vw, 20px);
  }

  .fq-help__kicker,
  .fq-help__title,
  .fq-help__body,
  .fq-help__btn {
    grid-column: 1;
  }

  .fq-help__cat {
    grid-column: 2;
    grid-row: 1 / span 4;
    margin: 0;
    align-self: end;
  }
}

@media (max-width: 860px) {
  .fq-hero {
    grid-template-columns: minmax(0, 1fr);
  }

  .fq-hero__art-wrap {
    order: 2;
    max-width: 460px;
  }

  .fq-hero__lede {
    max-width: none;
  }

  .fq-cats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .fq-cat {
    min-height: 0;
  }

  .fq-help {
    display: block;
    padding-bottom: 0;
  }

  .fq-help__cat {
    width: min(60%, 220px);
    margin: 10px auto -2px;
  }

  .fq-band {
    grid-template-columns: minmax(0, 1fr);
  }

  .fq-band__art-wrap {
    max-width: 420px;
    margin-left: auto;
  }

  .fq-band__link {
    margin-bottom: 4px;
  }

  .fq-group__body {
    padding-left: 0;
  }

  .fq-search {
    width: 100%;
  }

  .fq-panel__head {
    align-items: flex-start;
    flex-direction: column;
  }
}

@media (max-width: 520px) {
  .fq-hero__title {
    font-size: clamp(36px, 10.4vw, 46px);
  }

  .fq-cats {
    grid-template-columns: minmax(0, 1fr);
  }

  .fq-cat {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 0 12px;
    padding: 13px 15px;
  }

  .fq-cat__icon {
    width: 22px;
    height: 22px;
  }

  .fq-cat__title {
    margin: 0;
    flex: 1;
    min-width: 0;
  }

  .fq-cat__note {
    flex-basis: 100%;
    margin-top: 6px;
    padding-right: 0;
  }

  .fq-cat__go {
    position: static;
    margin-left: auto;
  }

  .fq-group__head {
    gap: 11px;
  }

  .fq-band__link {
    font-size: 10px;
  }
}