/* ==========================================================================
   ARRCO — FAQ and Client Instructions
   Extends the global design system. Adds no new colour primitives.
   ========================================================================== */

.guide-hero{background:linear-gradient(160deg,var(--navy) 0%,var(--navy-soft) 60%,#16305a 100%);color:#fff;padding:clamp(60px,8vw,120px) 0 clamp(44px,6vw,88px)}
.guide-hero h1{font-size:clamp(2.2rem,5vw,3.7rem);line-height:1.05;letter-spacing:-.02em;margin:.15em 0 .35em;color:#fff}
.guide-eyebrow{text-transform:uppercase;letter-spacing:.18em;font-size:.78rem;font-weight:700;color:var(--lime);margin:0}
.guide-intro{font-size:clamp(1.02rem,.5vw + .92rem,1.26rem);line-height:1.65;color:rgba(255,255,255,.85);max-width:62ch;margin:0}
.guide-body{padding:clamp(48px,7vw,96px) 0;background:var(--paper)}
.guide-measure{max-width:880px}

/* --- FAQ accordion --- */
.faq-group{margin-bottom:clamp(28px,4vw,44px)}
.faq-group > h2{font-size:.8rem;text-transform:uppercase;letter-spacing:.14em;color:var(--primary);margin:0 0 14px}
.faq-item{background:#fff;border:1px solid var(--line);border-radius:14px;margin-bottom:10px;overflow:hidden}
.faq-item + .faq-item{margin-top:10px}
.faq-q{display:flex;align-items:center;gap:14px;width:100%;border:0;background:none;padding:18px 20px;font:inherit;font-weight:700;color:var(--ink);text-align:left;cursor:pointer;line-height:1.4}
.faq-q:hover{background:var(--paper)}
.faq-q:focus-visible{outline:3px solid var(--primary);outline-offset:-3px}
.faq-icon{margin-left:auto;flex:0 0 auto;width:22px;height:22px;border-radius:50%;background:rgba(7,75,255,.1);color:var(--primary);display:grid;place-items:center;font-size:1rem;line-height:1;transition:transform .2s ease}
.faq-q[aria-expanded="true"] .faq-icon{transform:rotate(45deg)}
.faq-a{padding:0 20px 20px;color:var(--muted);line-height:1.7}
.faq-a[hidden]{display:none}
.faq-a p{margin:0 0 .9em}.faq-a p:last-child{margin-bottom:0}
.faq-a ul{margin:.4em 0 .9em;padding-left:1.2em}
.faq-a li{margin-bottom:.4em}
.faq-a strong{color:var(--ink)}
.faq-note{background:rgba(7,75,255,.06);border-left:3px solid var(--primary);border-radius:8px;padding:12px 14px;margin:.8em 0 0;font-size:.94rem}

/* --- Instruction steps --- */
.step{position:relative;background:#fff;border:1px solid var(--line);border-radius:16px;padding:clamp(22px,3vw,32px);margin-bottom:16px;box-shadow:var(--shadow-soft)}
.step-head{display:flex;align-items:flex-start;gap:16px;margin-bottom:12px}
.step-num{flex:0 0 auto;width:42px;height:42px;border-radius:12px;background:var(--primary);color:#fff;display:grid;place-items:center;font-weight:800;font-size:1.05rem}
.step-head h2{margin:0;font-size:clamp(1.15rem,2vw,1.45rem);line-height:1.3;color:var(--ink);align-self:center}
.step p{color:var(--muted);line-height:1.7;margin:0 0 .9em}
.step p:last-child{margin-bottom:0}
.step ul{margin:.3em 0 .9em;padding-left:1.2em;color:var(--muted)}
.step li{margin-bottom:.4em;line-height:1.6}
.step .btn{margin-top:6px}
.step-callout{background:rgba(7,75,255,.06);border-left:3px solid var(--primary);border-radius:8px;padding:14px 16px;margin:.6em 0;color:var(--ink);font-weight:600;line-height:1.6}
.step-allowance{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,150px),1fr));gap:12px;margin:.8em 0}
.step-allowance div{background:var(--paper);border:1px solid var(--line);border-radius:12px;padding:14px;text-align:center}
.step-allowance strong{display:block;color:var(--ink);font-size:1.4rem;line-height:1.2}
.step-allowance span{font-size:.84rem;color:var(--muted)}

/* --- Reminders --- */
.reminders{background:var(--navy);color:#fff;border-radius:18px;padding:clamp(24px,3.5vw,40px);margin-top:clamp(28px,4vw,44px)}
.reminders h2{margin:0 0 16px;font-size:clamp(1.3rem,2.4vw,1.8rem);color:#fff}
.reminders ul{margin:0;padding-left:1.2em}
.reminders li{margin-bottom:.7em;line-height:1.65;color:rgba(255,255,255,.86)}
.reminders li::marker{color:var(--lime)}
.reminders strong{color:#fff}

/* --- Shared CTA --- */
.guide-cta{padding:clamp(48px,7vw,88px) 0;background:linear-gradient(140deg,var(--primary-deep) 0%,var(--primary) 55%,var(--primary-bright) 100%);color:#fff;text-align:center}
.guide-cta h2{font-size:clamp(1.6rem,3.2vw,2.5rem);margin:0 auto .5em;max-width:22ch;color:#fff;letter-spacing:-.02em}
.guide-cta p{color:rgba(255,255,255,.9);max-width:52ch;margin:0 auto;line-height:1.65}
.guide-actions{display:flex;flex-wrap:wrap;gap:14px;justify-content:center;margin-top:clamp(22px,3vw,34px)}
.guide-cta .btn-primary{background:#fff;color:var(--primary-deep)}
.guide-cta .btn-primary:hover{background:var(--lime);color:var(--navy)}
.guide-cta .btn-outline{border-color:rgba(255,255,255,.7);color:#fff}
.guide-cta .btn-outline:hover{background:rgba(255,255,255,.14)}

@media (max-width:520px){
  .guide-actions .btn{width:100%;justify-content:center}
  .step-head{gap:12px}
  .step-num{width:36px;height:36px;font-size:.95rem}
}
@media (prefers-reduced-motion:reduce){.faq-icon{transition:none}}