/* support.css — LetterFire support page (/letterfire/support/).
   Layers on base.css + letterfire.css (reuses the dark "command terminal"
   palette, .restricted strip, header/.studio/nav, footer). Self-contained:
   panels, the contact block and the FAQ disclosure list all live here, so
   this page never moves when the account-deletion page is tweaked. */

main{position:relative;z-index:1;padding:18px 0 24px}

h1{
  font-family:var(--font-display);font-weight:700;text-transform:uppercase;
  letter-spacing:.03em;font-size:2.2rem;line-height:1.1;margin-bottom:4px;
}
.eyebrow{
  display:block;font-family:var(--font-mono);font-size:.66rem;letter-spacing:.22em;
  text-transform:uppercase;color:var(--tile-hi);margin-bottom:10px;
}
.lead{max-width:62ch;margin:14px 0 8px;color:var(--chart-dim);font-size:1.05rem}
.lead b{color:var(--chart);font-weight:600}

/* ---- shared panel surface ---- */
.panel{
  background:var(--panel);border:1px solid var(--line);
  padding:26px 28px;margin:22px 0;position:relative;
}
.panel h2{
  font-family:var(--font-display);font-weight:600;text-transform:uppercase;
  letter-spacing:.03em;font-size:1.3rem;margin-bottom:14px;
}
.panel .sub{
  font-family:var(--font-mono);font-size:.66rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--tile-hi);margin-bottom:16px;
}
.panel p{color:var(--chart-dim);font-size:.98rem;max-width:64ch}
.panel p + p{margin-top:12px}
.panel b{color:var(--chart);font-weight:600}
.panel a{color:var(--tile-hi);text-decoration:none}
.panel a:hover{color:var(--glow);text-decoration:underline}

/* ---- contact block ---- */
.contact-line{
  font-family:var(--font-mono);font-size:1.05rem;letter-spacing:.02em;
  margin:16px 0 4px;word-break:break-all;
}
.contact-line a{color:var(--glow)}
.cta-row{margin:18px 0 4px}
.panel a.btn{
  font-family:var(--font-display);font-weight:600;text-transform:uppercase;
  letter-spacing:.06em;font-size:.95rem;cursor:pointer;text-decoration:none;
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:13px 22px;border-radius:4px;border:1px solid rgba(232,154,51,.5);
  background:var(--panel);color:var(--chart);transition:.18s ease;
}
.panel a.btn:hover{border-color:var(--glow);box-shadow:0 0 18px rgba(255,154,61,.22);transform:translateY(-1px);text-decoration:none}
.panel a.btn-primary{background:linear-gradient(180deg,var(--tile-hi),var(--tile-lo));color:var(--tile-ink);border-color:transparent}
.panel a.btn-primary:hover{box-shadow:0 0 22px rgba(255,154,61,.4);color:var(--tile-ink)}
.finehint{color:var(--chart-dim);font-size:.88rem;margin-top:14px;max-width:62ch}

/* ---- FAQ ---- */
.faq{display:grid;gap:10px;margin-top:6px}
.faq details{
  background:rgba(255,255,255,.02);border:1px solid var(--line);
  padding:14px 18px;
}
.faq details[open]{border-color:rgba(232,154,51,.34)}
.faq summary{
  cursor:pointer;list-style:none;color:var(--chart);
  font-family:var(--font-display);font-weight:500;text-transform:uppercase;
  letter-spacing:.03em;font-size:1.02rem;
  display:flex;align-items:flex-start;gap:12px;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::before{
  content:"+";font-family:var(--font-mono);font-weight:700;color:var(--tile-hi);
  flex:none;line-height:1.35;
}
.faq details[open] summary::before{content:"–";color:var(--glow)}
.faq summary:hover{color:var(--glow)}
.faq details > *:not(summary){margin-top:12px}
.faq p,.faq li{color:var(--chart-dim);font-size:.96rem;max-width:64ch}
.faq p + p{margin-top:10px}
.faq ul{list-style:none;display:grid;gap:8px;padding-left:2px}
.faq li{display:flex;gap:10px;align-items:flex-start}
.faq li::before{content:"·";color:var(--tile-hi);font-family:var(--font-mono);font-weight:700;flex:none}
.faq b{color:var(--chart);font-weight:600}
.faq a{color:var(--tile-hi);text-decoration:none}
.faq a:hover{color:var(--glow);text-decoration:underline}
/* in-app menu paths — Settings > RESTORE PURCHASES etc. */
.path{
  font-family:var(--font-mono);font-size:.86rem;color:var(--signal);
  letter-spacing:.02em;white-space:nowrap;
}

.backlink{color:var(--chart-dim);font-size:.94rem;margin:18px 0 6px}
.backlink a{color:var(--tile-hi);text-decoration:none}
.backlink a:hover{color:var(--glow);text-decoration:underline}

@media(max-width:560px){
  h1{font-size:1.8rem}
  .panel{padding:20px 18px}
  .path{white-space:normal}
}
@media(prefers-reduced-motion:reduce){
  .panel a.btn:hover{transform:none}
}