/* DIY Credit Repair — CreditElite theme (David's palette) */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@500;600;700&family=Nunito:wght@400;600;700&display=swap');
:root {
  --gold:#C9963A; --gold2:#E0B468; --gold3:#9B7028;
  --navy:#0A1628; --navy2:#0F1E35; --navy3:#162540; --navy4:#1D2F4E;
  --ink:#f2f5fb; --muted:#a9b8d4;
}
* { box-sizing: border-box; }
body { margin:0; font-family:'Nunito',system-ui,sans-serif;
       color:var(--ink); background:var(--navy); line-height:1.6; min-height:100vh; }
h1, h2, h3 { font-family:'Playfair Display',serif; }
.wrap { max-width: 960px; margin: 0 auto; padding: 0 1rem; }
.site-header { background:rgba(10,22,40,.95); border-bottom:1px solid var(--navy4);
               position:sticky; top:0; backdrop-filter: blur(6px); z-index:10; }
.header-inner { display:flex; align-items:center; justify-content:space-between; padding:.7rem 1rem; }
.brand { font-weight:700; color:var(--gold2); text-decoration:none; font-size:1.15rem;
         font-family:'Playfair Display',serif; }
nav a { margin-left:1rem; color:var(--ink); text-decoration:none; }
nav a:hover { color:var(--gold2); }
.btn { display:inline-block; background:linear-gradient(180deg,var(--gold2),var(--gold));
       color:#1a1200; border:none; padding:.6rem 1.2rem; border-radius:.5rem;
       text-decoration:none; cursor:pointer; font-size:1rem; font-weight:700;
       font-family:'Nunito',sans-serif; }
.btn:hover { filter:brightness(1.08); }
.btn-sm { padding:.35rem .8rem; font-size:.9rem; }
.btn-lg { padding:.8rem 1.8rem; font-size:1.1rem; }
.hero { text-align:center; padding:3rem 0 2rem; }
.hero h1 { font-size:2.2rem; margin-bottom:.5rem; color:#fff; }
.lede { color:var(--muted); font-size:1.15rem; max-width:640px; margin:0 auto 1.5rem; }
section { margin:2.5rem 0; }
section h2 { color:#fff; }
.steps li { margin-bottom:1rem; }
.cards { display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:1rem; }
.card { background:var(--navy3); border:1px solid var(--navy4); border-radius:.75rem;
        padding:1.25rem; box-shadow:0 4px 18px rgba(0,0,0,.3); }
.card h3 { color:var(--gold2); margin-top:0; }
.price { font-size:1.6rem; font-weight:800; color:var(--gold2); }
.price span, .price small { font-size:.9rem; color:var(--muted); font-weight:400; }
.note { background:rgba(201,150,58,.1); border-left:4px solid var(--gold);
        padding:.8rem 1rem; border-radius:.25rem; }
.flash { background:#3a2c07; border:1px solid var(--gold); color:#ffe9a8;
         padding:.7rem 1rem; border-radius:.5rem; }
.auth { max-width:420px; margin:2rem auto; }
.auth label { display:block; margin:.8rem 0; }
.auth input, .auth textarea { width:100%; padding:.6rem; border:1px solid var(--navy4);
        border-radius:.4rem; font-size:1rem; background:var(--navy2); color:var(--ink); }
input[type="file"] { color:var(--ink); }
table { width:100%; border-collapse:collapse; margin:1rem 0; background:var(--navy3); }
th, td { border:1px solid var(--navy4); padding:.5rem .7rem; text-align:left; font-size:.95rem; }
th { background:var(--navy2); color:var(--gold2); }
.timeline { list-style:none; padding:0; }
.timeline li { background:var(--navy3); border:1px solid var(--navy4);
               border-radius:.5rem; padding:.6rem .9rem; margin-bottom:.5rem; }
.timeline ul { margin:.5rem 0; padding-left:1.2rem; }
.ts { color:var(--muted); font-size:.85rem; margin-left:.5rem; }
.site-footer { border-top:1px solid var(--navy4); margin-top:3rem; padding:1.5rem 0;
               color:var(--muted); font-size:.9rem; }
.site-footer strong { color:var(--ink); }
dl dt { font-weight:700; margin-top:1rem; color:var(--gold2); }
dl dd { margin:.25rem 0 0; color:var(--muted); }
.cta { text-align:center; padding:2rem 0; }
a { color:#9dc0ff; }
@media (max-width:600px){ .hero h1{font-size:1.7rem;} nav a{margin-left:.6rem;} }

/* Language toggle */
.lang-toggle {
  border: 1px solid var(--gold);
  color: var(--gold2);
  border-radius: 4px;
  padding: 2px 8px;
  font-size: 0.85em;
  font-weight: 600;
  margin-left: 8px;
}

/* Price tag next to each letter */
.price-tag {
  display: inline-block;
  background: linear-gradient(180deg,var(--gold2),var(--gold));
  color: #1a1200;
  font-weight: 700;
  border-radius: 6px;
  padding: 2px 10px;
  margin-left: 8px;
  font-size: 0.9em;
}

/* ---- Visual client dashboard ---- */
.dash-head { display:flex; justify-content:space-between; align-items:flex-start;
  flex-wrap:wrap; gap:.5rem; margin-bottom:.5rem; }
.dash-welcome { font-family:'Playfair Display',serif; color:#fff; margin:.5rem 0 .2rem; }
.dash-links { font-size:.9rem; }
.stat-row { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:1rem; margin:1.5rem 0; }
.stat-card { background:var(--navy3); border:1px solid var(--navy4); border-radius:.75rem;
  padding:1rem 1.2rem; display:flex; flex-direction:column; }
.stat-label { font-size:.72rem; letter-spacing:.08em; color:var(--muted); font-weight:700; }
.stat-num { font-size:2rem; font-weight:800; color:#fff; line-height:1.2; }
.stat-sub { font-size:.85rem; font-weight:600; }
.stat-sub.danger { color:#ff8a8a; }
.stat-sub.ok { color:#7ee2a8; }
.section-title { font-size:.85rem; letter-spacing:.1em; color:var(--gold2);
  font-family:'Nunito',sans-serif; font-weight:800; }
.prog-row { display:flex; justify-content:space-between; font-size:.95rem; margin:.6rem 0 .2rem; }
.prog-count { color:var(--gold2); font-weight:700; }
.prog-bar { background:var(--navy2); border-radius:999px; height:10px; overflow:hidden;
  margin-bottom:.8rem; }
.prog-fill { height:100%; border-radius:999px; }
.prog-fill.green { background:linear-gradient(90deg,#3ecf6f,#7ee2a8); }
.prog-fill.gold { background:linear-gradient(90deg,var(--gold3),var(--gold2)); }
.process { list-style:none; padding:0; margin:0; }
.pstep { display:flex; gap:.8rem; align-items:flex-start; padding:.55rem 0;
  border-bottom:1px solid var(--navy4); }
.pstep:last-child { border-bottom:none; }
.pdot { flex:0 0 28px; width:28px; height:28px; border-radius:50%; display:flex;
  align-items:center; justify-content:center; font-weight:800; font-size:.9rem; }
.pstep.done .pdot { background:#1d5c38; color:#7ee2a8; }
.pstep.active .pdot { background:var(--gold); color:#1a1200; }
.pstep.pending .pdot { background:var(--navy2); color:var(--muted);
  border:1px solid var(--navy4); }
.pstep.pending { opacity:.65; }
.disputes { list-style:none; padding:0; margin:0; }
.disputes li { display:flex; justify-content:space-between; align-items:center;
  gap:1rem; padding:.7rem 0; border-bottom:1px solid var(--navy4); }
.disputes li:last-child { border-bottom:none; }
.badge { font-size:.72rem; font-weight:800; letter-spacing:.06em; border-radius:6px;
  padding:3px 10px; white-space:nowrap; }
.b-removed { background:rgba(62,207,111,.15); color:#7ee2a8; border:1px solid #2c7a4b; }
.b-sent { background:rgba(201,150,58,.15); color:var(--gold2); border:1px solid var(--gold3); }
.b-review { background:rgba(120,150,200,.12); color:#9dc0ff; border:1px solid #3a557f; }
.charge-row { display:flex; justify-content:space-between; align-items:center;
  gap:1rem; padding:.7rem 0; border-bottom:1px solid var(--navy4); }
.charge-row:last-child { border-bottom:none; }
.pay-cta { border:1px solid var(--gold3); background:linear-gradient(180deg,#1a2c52,#14244a); }

/* ---- Letter catalog ---- */
.catalog-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:1rem; margin-top:1rem; }
.catalog-item { background:var(--navy2); border:1px solid var(--navy4); border-radius:.6rem;
  padding:1rem; display:flex; flex-direction:column; gap:.4rem; }
.catalog-item strong { color:var(--gold2); }
.catalog-foot { display:flex; align-items:center; justify-content:space-between;
  gap:.5rem; margin-top:auto; padding-top:.5rem; flex-wrap:wrap; }

/* ---- Certified mail guide ---- */
.mail-guide { border:1px solid var(--gold3); }
.dest-address { background:var(--navy2); border:1px solid var(--navy4);
  border-radius:.5rem; padding:.8rem 1rem; font-weight:600; white-space:pre-line; }
.mail-guide ol li, .mail-guide ul li { margin-bottom:.4rem; }

/* ---- DIY explanation ---- */
.diy-explain { margin-bottom:1.5rem; border:1px solid var(--gold3); }
.diy-explain ul li { margin-bottom:.5rem; }

/* ---- Messages ---- */
.thread { display:flex; flex-direction:column; gap:.7rem; }
.msg { max-width:85%; padding:.6rem .9rem; border-radius:.6rem; }
.msg-user { align-self:flex-end; background:var(--navy3); border:1px solid var(--navy4); }
.msg-admin { align-self:flex-start; background:var(--navy2); border:1px solid var(--gold3); }
.msg p { margin:0 0 .3rem; white-space:pre-wrap; }
.ref-code { background:var(--navy2); padding:.2rem .6rem; border-radius:.3rem;
  font-size:1.1rem; letter-spacing:.1rem; }
.referral-card { border:1px solid var(--gold3); }
.ref-note { color:var(--gold2); font-weight:600; }
.ref-progress { margin:1rem 0; }
.ref-bar { height:14px; background:var(--navy2); border-radius:7px; overflow:hidden; }
.ref-fill { height:100%; background:linear-gradient(90deg,#2e7d32,#66bb6a);
  border-radius:7px; transition:width .4s; }
.ref-steps { display:flex; justify-content:space-between; margin-top:.4rem; }
.ref-steps span { font-size:.85rem; color:var(--muted); font-weight:600; }
.ref-steps span.done { color:#66bb6a; }
.bundle-hero { border:2px solid var(--gold); text-align:center; }
.bundle-hero .btn-lg { margin-top:.5rem; }
.discount-line { color:#66bb6a; font-weight:700; }
.why-box { background:var(--navy2); border-left:4px solid var(--gold);
  padding:.8rem 1rem; border-radius:.3rem; }
.id-note { color:var(--gold2); }

/* ---- Onboarding modal (first landing visit) ---- */
.onboard-backdrop { position:fixed; inset:0; background:rgba(4,10,22,.78);
  display:flex; align-items:center; justify-content:center; z-index:50; padding:1rem; }
.onboard-backdrop[hidden] { display:none; }
.onboard-card { background:var(--navy3); border:1px solid var(--gold3); border-radius:.9rem;
  max-width:520px; width:100%; padding:1.5rem; position:relative; box-shadow:0 12px 40px rgba(0,0,0,.5); }
.onboard-close { position:absolute; top:.5rem; right:.8rem; background:none; border:none;
  color:var(--muted); font-size:1.6rem; cursor:pointer; line-height:1; }
.onboard-card h2 { margin-top:0; color:#fff; }
.onboard-slide h3 { color:var(--gold2); margin-bottom:.3rem; }
.onboard-actions { display:flex; gap:.6rem; flex-wrap:wrap; margin-top:1.2rem; }
.onboard-actions .btn { margin:0; }

/* ---- Cost estimator ---- */
#cost-estimator .cost-label { display:block; margin:1rem 0 .5rem; font-weight:700; }
#cost-slider { width:100%; max-width:520px; }
.cost-result { max-width:520px; margin:1rem 0; }
.cost-result p { margin:.3rem 0; }

/* ---- Simulator gauge (illustration only, prototype style) ---- */
.hero-gauge { margin: 1.5rem auto 1rem; }
.sim-badge { display:inline-block; background:#E0B468; color:#0A1628;
  font-weight:800; font-size:.75rem; letter-spacing:.08em;
  padding:.3rem .7rem; border-radius:999px; }
.gauge { position:relative; width:340px; height:205px; margin:1rem auto .5rem; overflow:hidden; }
.gauge-arc { position:absolute; left:10px; top:10px; width:320px; height:320px; border-radius:50%;
  background:conic-gradient(from 180deg, #ff4d4d 0 20%, #ff8a3d 20% 40%, #ffd93d 40% 60%, #a3e635 60% 80%, #22c55e 80% 100%);
  -webkit-mask:radial-gradient(closest-side, transparent 70%, #000 71%);
  mask:radial-gradient(closest-side, transparent 70%, #000 71%); }
.gauge-ticks { position:absolute; left:10px; top:10px; width:320px; height:320px; border-radius:50%;
  background:repeating-conic-gradient(from 180deg, rgba(0,0,0,.28) 0deg 1deg, transparent 1deg 6deg);
  -webkit-mask:radial-gradient(closest-side, transparent 70%, #000 71%);
  mask:radial-gradient(closest-side, transparent 70%, #000 71%); }
.gauge-needle { position:absolute; left:50%; bottom:8px; width:3px; height:140px;
  background:#fff; transform-origin:bottom center; transform:translateX(-50%) rotate(46deg);
  z-index:1; }
.gauge-pivot { position:absolute; left:50%; bottom:0; transform:translateX(-50%);
  width:18px; height:18px; background:#fff; border-radius:50%; z-index:3; }
.gauge-center { position:absolute; left:50%; bottom:28px; transform:translateX(-50%);
  text-align:center; z-index:2; }
.gauge-center span { display:block; font-size:2.8rem; font-weight:800; color:#fff; line-height:1; }
.gauge-center small { color:#fff; font-size:.85rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; }
.gauge-min, .gauge-max { position:absolute; bottom:0; font-size:.85rem; font-weight:700; color:#fff; z-index:2; }
.gauge-min { left:2px; }
.gauge-max { right:2px; }
@media (max-width: 420px) {
  .gauge { width:300px; height:185px; }
  .gauge-arc, .gauge-ticks { left:0; width:300px; height:300px; }
  .gauge-needle { height:125px; }
  .gauge-center span { font-size:2.3rem; }
}