/* ============================================================================
   Condy — FAQ page
   ----------------------------------------------------------------------------
   Same palette and the same furniture as the how and why-it's-free pages:
   warm cream ground, framed hero card, one dark-green money panel, cards on
   #f5f3eb. Nothing new is invented here — the eyebrow, heading, card, chip and
   disclosure treatments are lifted from how-page.css so the three pages read
   as one site.

   Orange means Condy. Green means cash to you. (design-system.css § 1.)
   ========================================================================= */

.faq-page { background:#fffdf9 }
.fq-wrap { width:min(1180px,calc(100% - 40px)); margin-inline:auto }
.fq-eyebrow { display:block; font:500 10px/1.4 var(--font); letter-spacing:.16em;
              text-transform:uppercase; color:#907347; margin-bottom:13px }

/* --- 1. Hero -------------------------------------------------------------- */
#fq-hero { padding:30px 0;
  background:radial-gradient(ellipse at 0% 20%,#e9efdf80,transparent 45%),
             radial-gradient(ellipse at 95% 80%,#efe2c666,transparent 50%),#f6f4ec }
.fq-hero-card { padding:30px 30px 22px; border:1px solid #d9dfcf; border-radius:28px;
  background:linear-gradient(135deg,#fffefa,#f5f7ef);
  box-shadow:0 20px 55px -35px #33593e55; overflow:hidden }
.fq-hero-top { display:flex; align-items:center; justify-content:space-between; gap:34px }
.fq-hero-top h1 { font:500 clamp(28px,2.7vw,38px)/1.1 var(--font); letter-spacing:-.05em; margin:0 }
.fq-hero-top > div > p { max-width:40ch; font:400 13px/1.7 var(--font); color:#75674f; margin:12px 0 0 }

/* The green panel. One per page, always the money. */
.fq-short { position:relative; isolation:isolate; overflow:hidden; flex:0 0 400px;
  padding:20px 24px; border-radius:18px; border:1px solid #3b7957;
  background:linear-gradient(120deg,#1c553e,#2a7551); box-shadow:0 10px 24px -14px #1c543b80 }
.fq-short-aura { position:absolute; z-index:-1; width:90%; height:120%; bottom:-65%; left:0;
  background:radial-gradient(ellipse,#95ecb780,#5ed19944 40%,transparent 70%);
  filter:blur(14px); animation:hw-aura 5s ease-in-out infinite }
.fq-short-title { font:500 9px/1.4 var(--font); letter-spacing:.09em; text-transform:uppercase; color:#d5e4cf }
.fq-short ul { margin:14px 0 0; padding:0; list-style:none; display:grid; gap:11px }
.fq-short li { display:grid; grid-template-columns:78px 1fr; align-items:baseline; gap:4px 14px;
  padding-top:11px; border-top:1px solid #d8e5cc33 }
.fq-short li:first-child { padding-top:0; border-top:0 }
.fq-short-label { grid-column:1; font:500 9px/1.5 var(--font); letter-spacing:.09em;
  text-transform:uppercase; color:#d5e4cf }
.fq-short-value { grid-column:2; font:700 30px/1 var(--font); letter-spacing:-.05em; color:#f2e9c6 }
.fq-short-note { grid-column:2; font:400 10px/1.5 var(--font); color:#dce7d4 }

/* Jump chips. Same pill as .hw-map-footer > div > span, made interactive. */
.fq-jump { display:flex; align-items:center; flex-wrap:wrap; gap:9px;
  margin-top:24px; padding-top:18px; border-top:1px solid #ded6c6 }
.fq-jump-label { margin-right:4px; font:500 10px/1.4 var(--font); letter-spacing:.09em;
  text-transform:uppercase; color:#8b734f }
.fq-chip { display:inline-flex; align-items:center; gap:8px; padding:7px 12px;
  border:1px solid #d9e3cf; border-radius:30px; background:#f6f9ef; color:#356245;
  font:500 11px/1.4 var(--font); transition:background .2s,border-color .2s,transform .2s }
.fq-chip span { font-size:9px; color:#7d9481 }
.fq-chip:hover { background:#eaf2e2; border-color:#c3d3b6; transform:translateY(-1px) }
.fq-chip:focus-visible { outline:2px solid var(--brand); outline-offset:2px }

/* --- 2. Questions --------------------------------------------------------- */
#fq-list { padding:60px 0 68px; background:#fffdf9 }
.fq-list-grid { display:grid; grid-template-columns:230px minmax(0,1fr); gap:70px; align-items:start }
.fq-groups { min-width:0 }

.fq-rail { position:sticky; top:96px }
.fq-rail ol { margin:0; padding:0; list-style:none; border-left:1px solid #e4dccb }
.fq-rail a { display:flex; align-items:baseline; justify-content:space-between; gap:10px;
  padding:11px 0 11px 18px; margin-left:-1px; border-left:1px solid transparent;
  font:500 13px/1.4 var(--font); color:#8b7c63; transition:color .2s,border-color .2s }
.fq-rail a:hover { color:#4a3d2b }
.fq-rail a.is-on { color:#2a6c4b; border-left-color:#2a6c4b }
.fq-rail-count { font:400 10px/1.4 var(--font); color:#a99c85 }

.fq-group + .fq-group { margin-top:46px }
.fq-group-head { padding-bottom:16px; border-bottom:1px solid #e9e1d3 }
.fq-group-head h2 { font:500 clamp(22px,2.2vw,28px)/1.15 var(--font); letter-spacing:-.04em; margin:0 }
.fq-group-head p { font:400 13px/1.7 var(--font); color:#766951; margin:8px 0 0; max-width:60ch }
.fq-items { display:grid; gap:10px; margin-top:18px }

/* Accordion. Card language from .hw-firm-card. */
.fq-item { border:1px solid #e0ddce; border-radius:18px; overflow:hidden;
  background:linear-gradient(125deg,#fffefa,#f7f8f0);
  box-shadow:0 18px 30px -30px #31503d55; transition:border-color .2s,box-shadow .2s }
.fq-item:hover { border-color:#d2cdb8 }
.fq-item[open] { border-color:#cfdbc6; box-shadow:0 20px 34px -30px #2a6c4b66 }
.fq-q { display:flex; align-items:center; justify-content:space-between; gap:20px;
  padding:19px 24px; cursor:pointer; list-style:none;
  font:600 15px/1.45 var(--font); letter-spacing:-.02em; color:#241a12 }
.fq-q::-webkit-details-marker { display:none }
.fq-q:focus-visible { outline:2px solid var(--brand); outline-offset:-4px; border-radius:18px }

/* The sign is drawn, not typed: two bars, one of which collapses on open. */
.fq-sign { position:relative; flex:0 0 26px; width:26px; height:26px; border-radius:50%;
  border:1px solid #cfdbc6; background:#f0f5e9; transition:background .2s,border-color .2s }
.fq-sign::before, .fq-sign::after { content:""; position:absolute; inset:50% 7px auto;
  height:1.5px; background:#3a6b4d; border-radius:2px; transform:translateY(-50%);
  transition:transform var(--d-base,320ms) var(--ease,ease) }
.fq-sign::after { transform:translateY(-50%) rotate(90deg) }
.fq-item[open] .fq-sign { background:#2a6c4b; border-color:#2a6c4b }
.fq-item[open] .fq-sign::before, .fq-item[open] .fq-sign::after { background:#f1efd6 }
.fq-item[open] .fq-sign::after { transform:translateY(-50%) rotate(0deg) }

/* 0fr → 1fr is the one way to transition to an auto height without measuring. */
.fq-a-wrap { display:grid; grid-template-rows:1fr;
  transition:grid-template-rows var(--d-base,320ms) var(--ease,ease) }
.fq-item.is-closing .fq-a-wrap { grid-template-rows:0fr }
.fq-a { overflow:hidden; padding:0 24px 22px }
.fq-a > p { font:400 14px/1.75 var(--font); color:#6b5f4a; margin:0; max-width:68ch }
.fq-link { display:inline-flex; gap:18px; align-items:center; margin-top:16px; padding-bottom:5px;
  border-bottom:1px solid #d8b999; color:#a74920; font:500 12px/1.4 var(--font) }
.fq-link:hover { border-bottom-color:#a74920 }
.fq-a .flag { margin-top:16px; max-width:68ch }

/* The ladder inside the "how much can I earn" answer. Every row comes from
   flow.stops, so this table and the $ figure above it cannot disagree. */
.fq-ledger { list-style:none; margin:18px 0 0; padding:0; max-width:460px;
  border:1px solid #e2ddcc; border-radius:14px; overflow:hidden; background:#fffefa }
.fq-ledger-row { display:grid; grid-template-columns:72px 1fr auto; align-items:center;
  gap:14px; padding:10px 16px; border-top:1px solid #efe9db;
  font:400 12px/1.4 var(--font); color:#7c7059 }
.fq-ledger-row:first-child { border-top:0 }
.fq-ledger-day { font-weight:500; color:#8b734f; letter-spacing:.02em }
.fq-ledger-kind { color:#8a7f69 }
.fq-ledger-row.is-reg .fq-ledger-kind { color:#3a6b4d; font-weight:500 }
.fq-ledger-cash { font:600 15px/1 var(--font); letter-spacing:-.04em; color:#2b7650 }
/* The total row has no "kind", so the label takes the full width instead of
   being squeezed into the 72px day column. */
.fq-ledger-total { grid-template-columns:1fr auto; background:#f2f6ec; border-top:1px solid #dde6d2 }
.fq-ledger-total .fq-ledger-day { color:#3a6b4d; font-weight:600; letter-spacing:0 }
.fq-ledger-total .fq-ledger-cash { font-size:19px }

/* --- 3. Before you start -------------------------------------------------- */
#fq-before { padding:66px 0; background:#f5f3eb; border-block:1px solid #e5ddce }
.fq-section-intro h2 { font:500 clamp(26px,2.8vw,34px)/1.13 var(--font); letter-spacing:-.045em; margin:0 }
.fq-before-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:28px }
.fq-before-grid article { padding:24px; border:1px solid #e0d7c5; border-radius:20px;
  background:linear-gradient(130deg,#fffefa,#f7f9f0); box-shadow:0 12px 25px -23px #68543760 }
.fq-before-grid h3 { font:600 15px/1.4 var(--font); letter-spacing:-.02em; margin:0 0 9px }
.fq-before-grid p { font:400 13px/1.7 var(--font); color:#796c56; margin:0 }

.fq-firms { margin-top:30px; padding-top:24px; border-top:1px solid #ded6c6 }
.fq-firms-label { display:block; font:500 10px/1.4 var(--font); letter-spacing:.12em;
  text-transform:uppercase; color:#8b734f }
.fq-firms-row { display:flex; flex-wrap:wrap; gap:10px; margin-top:14px }
.fq-firm { display:inline-flex; align-items:center; gap:10px; padding:8px 16px 8px 8px;
  border:1px solid #dfd6c3; border-radius:30px; background:#fffdfa;
  font:500 13px/1.4 var(--font); color:#3f3629 }
.fq-firm i { display:grid; place-items:center; width:26px; height:26px; border-radius:50%;
  background:#eaf0e7; border:1px solid #dce4d4; color:#2c6749;
  font:600 11px/1 var(--font); font-style:normal }
.fq-firms-note { max-width:64ch; margin:16px 0 0; font:400 11px/1.7 var(--font); color:#7a6e59 }

.fq-disclosure { margin-top:28px; padding:18px 22px; border:1px solid #e2d9c8;
  border-radius:14px; background:#f0ecdf }
.fq-disclosure strong { font:600 10px/1.4 var(--font); letter-spacing:.09em;
  text-transform:uppercase; color:#7b6744 }
.fq-disclosure p { margin:8px 0 0; font:400 12px/1.7 var(--font); color:#756a59; max-width:80ch }
.fq-review { margin-top:20px }

.faq-page #nav a[aria-current="page"] { color:#a94d23 }
.faq-page #cta { padding-top:0 }

/* --- 4. Responsive -------------------------------------------------------- */
@media(max-width:1040px) and (min-width:761px) {
  .fq-short { flex-basis:330px; padding:18px }
  .fq-short-value { font-size:26px }
  .fq-short li { grid-template-columns:70px 1fr }
  .fq-hero-top h1 { font-size:28px }
  .fq-list-grid { grid-template-columns:180px minmax(0,1fr); gap:40px }
  .fq-before-grid { gap:14px }
}
@media(max-width:760px) {
  .fq-wrap { width:calc(100% - 24px) }
  #fq-hero { padding:16px 0 }
  .fq-hero-card { padding:24px 18px 18px; border-radius:22px }
  .fq-hero-top { flex-direction:column; align-items:stretch; gap:22px }
  .fq-hero-top > div > p { max-width:none; font-size:12px }
  .fq-short { flex-basis:auto; padding:18px }
  .fq-short li { grid-template-columns:1fr; gap:2px }
  .fq-short-label, .fq-short-value, .fq-short-note { grid-column:1 }
  .fq-short-value { font-size:27px }
  .fq-jump { margin-top:20px; padding-top:16px }

  #fq-list { padding:40px 0 46px }
  /* minmax(0,…), not 1fr: a bare 1fr track is min-width:auto, so the ledger
     and the long answers push the grid — and the whole page — wider than the
     screen. */
  .fq-list-grid { grid-template-columns:minmax(0,1fr); gap:0 }
  /* The rail goes away rather than becoming a second chip row: the hero's
     jump chips are a few hundred pixels up and say the same thing. */
  .fq-rail { display:none }

  .fq-group + .fq-group { margin-top:34px }
  .fq-q { padding:16px 18px; font-size:14px; gap:14px }
  .fq-a { padding:0 18px 18px }
  .fq-a > p { font-size:13px }
  .fq-ledger-row { grid-template-columns:64px 1fr auto; gap:10px; padding:9px 13px; font-size:11px }

  #fq-before { padding:44px 0 }
  .fq-before-grid { grid-template-columns:1fr; gap:14px; margin-top:22px }
  .fq-before-grid article { padding:20px }
  .fq-disclosure { padding:16px 18px }
}
@media(prefers-reduced-motion:reduce) {
  .fq-short-aura, .fq-chip, .fq-a-wrap, .fq-sign::before, .fq-sign::after { animation:none; transition:none }
  .fq-chip:hover { transform:none }
}