/* ═══════════════════════════════════════════════════════════════
   Pick A Deal — Shared Stylesheet
   Used by all root pages. Guide pages also load guides/guide.css.
   ═══════════════════════════════════════════════════════════════ */

/* ── CSS Custom Properties ───────────────────────────────────── */
:root {
  --dark:#0D2B1E; --teal:#1AAB72; --teal-dark:#128054; --mint:#C5F0D6;
  --sky:#68CCEF; --purple:#6450E8; --lavender:#CC7ADE; --lime:#88DE58;
  --off-white:#F2F7F4; --line:#D8EDE3; --muted:#4A6B58; --ink:#0D2B1E;
}

/* ── Base ────────────────────────────────────────────────────── */
html { scroll-behavior:smooth; }
body { font-family:'Inter',sans-serif; color:var(--ink); background:#fff; -webkit-font-smoothing:antialiased; margin:0; }
.font-display { font-family:'Plus Jakarta Sans',sans-serif; letter-spacing:-0.02em; }
.eyebrow { font-family:'Plus Jakarta Sans',sans-serif; font-weight:600; letter-spacing:.18em; text-transform:uppercase; color:var(--teal); font-size:11px; }

/* ── Buttons ─────────────────────────────────────────────────── */
.btn { display:inline-flex; align-items:center; gap:.4rem; font-family:'Plus Jakarta Sans',sans-serif; font-weight:600; font-size:.875rem; padding:.7rem 1.35rem; border-radius:99px; border:none; cursor:pointer; transition:opacity .15s,transform .12s; text-decoration:none; white-space:nowrap; }
.btn:hover { opacity:.9; transform:translateY(-1px); }
.btn-primary { background:var(--teal); color:#fff; box-shadow:0 3px 12px rgba(26,171,114,.32); }
.btn-dark { background:var(--dark); color:#fff; }
.btn-outline { background:transparent; color:var(--dark); border:2px solid var(--dark); }
.btn-outline-white { background:transparent; color:#fff; border:2px solid rgba(255,255,255,.5); }

/* ── Cards ───────────────────────────────────────────────────── */
.card { background:#fff; border:1.5px solid var(--line); border-radius:20px; }
.cat-card { display:block; background:#fff; border:1.5px solid var(--line); border-radius:20px; padding:1.5rem; transition:transform .18s,box-shadow .18s,border-color .15s; text-decoration:none; }
.cat-card:hover { transform:translateY(-3px); box-shadow:0 10px 28px rgba(13,43,30,.10); border-color:var(--teal); }
.guide-card { background:#fff; border:1.5px solid var(--line); border-radius:20px; overflow:hidden; transition:transform .18s,box-shadow .18s; text-decoration:none; display:block; }
.guide-card:hover { transform:translateY(-3px); box-shadow:0 10px 28px rgba(13,43,30,.10); }
.topic-row { display:flex; align-items:center; justify-content:space-between; padding:1rem 1.25rem; border:1.5px solid var(--line); border-radius:14px; text-decoration:none; color:var(--dark); transition:border-color .15s,background .15s; }
.topic-row:hover { border-color:var(--teal); background:var(--off-white); }

/* ── Address Bar ─────────────────────────────────────────────── */
.address-bar { display:flex; align-items:center; gap:.5rem; background:#fff; border:2px solid var(--line); border-radius:99px; padding:.35rem .35rem .35rem 1.1rem; box-shadow:0 2px 12px rgba(13,43,30,.08); max-width:520px; }
.address-bar input { flex:1; border:none; outline:none; font-size:.95rem; color:var(--ink); background:transparent; font-family:'Inter',sans-serif; min-width:0; }
.address-bar input::placeholder { color:#8aaa97; }

/* ── Hero ────────────────────────────────────────────────────── */
.hero-photo { background:radial-gradient(120% 80% at 20% 10%,#d5f5e5 0%,transparent 60%),radial-gradient(120% 80% at 80% 30%,#c8f0e8 0%,transparent 60%),linear-gradient(180deg,#e8f7ee,#d4eee0); position:relative; overflow:hidden; }
.floating-icon { position:absolute; background:#fff; border-radius:999px; box-shadow:0 10px 30px rgba(13,43,30,.12),0 2px 6px rgba(13,43,30,.06); display:grid; place-items:center; }

/* ── Components ──────────────────────────────────────────────── */
.step-num { width:26px; height:26px; border-radius:999px; background:var(--teal); color:#fff; font-weight:700; font-size:12px; display:grid; place-items:center; flex-shrink:0; }
.tp-star { width:22px; height:22px; background:#00b67a; display:grid; place-items:center; border-radius:2px; }
.check-icon { width:20px; height:20px; border-radius:999px; background:var(--mint); display:grid; place-items:center; flex-shrink:0; }
.icon-pill { width:46px; height:46px; border-radius:999px; display:grid; place-items:center; flex-shrink:0; }
.moving-banner { border-radius:28px; padding:2.75rem 3rem; display:grid; grid-template-columns:1fr 1fr 1fr; gap:2rem; align-items:center; background:linear-gradient(135deg,#0D2B1E 0%,#1a3d28 100%); }

/* ── Navigation ──────────────────────────────────────────────── */
.nav-link { color:var(--dark); font-size:.9375rem; text-decoration:none; transition:color .12s; font-weight:500; }
.nav-link:hover,.nav-link.active { color:var(--teal); }
.nav-link.active { font-weight:700; }
.footer-link { color:#4A6B58; font-size:.84rem; text-decoration:none; transition:color .12s; }
.footer-link:hover { color:var(--dark); }

/* ── Hamburger / Mobile Nav ──────────────────────────────────── */
.hamburger { display:none; background:none; border:none; cursor:pointer; padding:.5rem; color:var(--dark); border-radius:8px; transition:background .12s; }
.hamburger:hover { background:var(--off-white); }
.mobile-nav-panel { display:none; background:#fff; border-top:1.5px solid var(--line); padding:1.25rem 1.5rem 1.75rem; }
.mobile-nav-panel.open { display:block; }
.mobile-nav-link { display:block; font-size:1rem; font-weight:600; color:var(--dark); text-decoration:none; padding:.75rem 0; border-bottom:1px solid var(--line); }
.mobile-nav-link:last-of-type { border-bottom:none; }
.mobile-nav-link:hover,.mobile-nav-link.active { color:var(--teal); }

/* ── FAQ ─────────────────────────────────────────────────────── */
.faq-item { border:1.5px solid var(--line); border-radius:16px; overflow:hidden; margin-bottom:.75rem; }
.faq-item summary { list-style:none; padding:1.25rem 1.5rem; font-weight:600; font-size:.9375rem; cursor:pointer; display:flex; justify-content:space-between; align-items:center; gap:1rem; }
.faq-item summary::-webkit-details-marker { display:none; }
.faq-item[open] summary { color:var(--teal); border-bottom:1.5px solid var(--line); }
.faq-item .faq-body { padding:1.25rem 1.5rem; font-size:.9375rem; color:var(--muted); line-height:1.7; }

/* ── 900 px (tablets / landscape phones) ────────────────────── */
@media(max-width:900px) {
  .desktop-nav-links { display:none !important; }
  .desktop-nav-cta   { display:none !important; }
  .hamburger         { display:flex !important; align-items:center; justify-content:center; }

  .hero-grid       { grid-template-columns:1fr !important; }
  .hero-photo      { max-width:340px !important; margin:0 auto !important; }
  .floating-icon   { width:40px !important; height:40px !important; }

  .steps-outer     { grid-template-columns:1fr !important; }
  .steps-grid      { grid-template-columns:repeat(2,1fr) !important; }
  .why-grid        { grid-template-columns:repeat(2,1fr) !important; }
  .cat-grid        { grid-template-columns:repeat(2,1fr) !important; }
  .guides-grid     { grid-template-columns:1fr !important; }
  .types-grid      { grid-template-columns:repeat(2,1fr) !important; }
  .topic-grid      { grid-template-columns:repeat(2,1fr) !important; }
  .moving-banner   { grid-template-columns:1fr !important; padding:2rem 1.5rem !important; }
  .footer-grid     { grid-template-columns:repeat(3,1fr) !important; }
  .bottom-cta-inner{ grid-template-columns:1fr !important; text-align:center !important; }
  .bottom-cta-inner .btn { width:100%; justify-content:center; }
  .faq-accord-grid { grid-template-columns:1fr !important; }
  .legal-grid      { grid-template-columns:1fr !important; }
  .legal-toc-aside { display:none !important; }
  .article-grid    { grid-template-columns:1fr !important; }
  .toc-sidebar     { display:none !important; }
}

/* ── 640 px (phones) ────────────────────────────────────────── */
@media(max-width:640px) {
  .steps-grid   { grid-template-columns:1fr !important; }
  .why-grid     { grid-template-columns:1fr !important; }
  .cat-grid     { grid-template-columns:1fr !important; }
  .types-grid   { grid-template-columns:1fr !important; }
  .topic-grid   { grid-template-columns:1fr !important; }
  .footer-grid  { grid-template-columns:1fr !important; }
  .address-bar  { flex-wrap:wrap; border-radius:16px !important; padding:.75rem 1rem !important; }
  .address-bar input { width:100%; min-width:0; }
  .address-bar .btn  { width:100%; justify-content:center; }
  .moving-banner > *:first-child { display:none !important; }
}

/* ── 480 px (small phones) ──────────────────────────────────── */
@media(max-width:480px) {
  .hero-photo    { max-width:260px !important; }
  .floating-icon { display:none !important; }
  .moving-banner { padding:1.5rem 1.25rem !important; }
  .btn { font-size:.84rem !important; padding:.65rem 1.1rem !important; }
}