/* ============================================================
   Deficit — Support / Help
   Shares the landing's Bruce Lee yellow + matte black system.
   Self-contained (tokens/nav/footer mirror landing.css, per the
   repo's per-page-CSS pattern). Content visible without JS; the
   inline script only enhances (nav border + category scroll-spy).
   ============================================================ */

/* ── tokens (verbatim from landing.css) ─────────────────────── */
:root{
  --ink-1000:#0A0A0B;
  --ink-900:#131316;
  --ink-800:#1C1D21;
  --ink-700:#26282E;
  --ink-600:#3A3D45;
  --fg-1:#F4F4F2;
  --fg-2:#8A8F99;
  --fg-3:#7E828B;
  --yellow:#E8BE2C;
  --yellow-hover:#F2CC44;
  --yellow-pressed:#C9A11F;

  --sans: "Geist", -apple-system, BlinkMacSystemFont, "Helvetica Neue", sans-serif;
  --display-italic: "Barlow Condensed", "Inter", sans-serif;
  --mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --gutter: clamp(1.25rem, 1rem + 2vw, 2.5rem);
  --section-y: clamp(3.5rem, 2.5rem + 4vw, 6.5rem);
  --rule: 1px solid var(--ink-700);
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);

  color-scheme: dark;
}

/* ── base ───────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin:0; padding:0; }
html { scroll-behavior: smooth; }
body{
  background: var(--ink-1000);
  color: var(--fg-1);
  font-family: var(--sans);
  font-size:16px;
  line-height:1.5;
  font-feature-settings: "ss01", "cv11";
  -webkit-font-smoothing:antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
/* hairline grain — atmosphere, not texture */
body::before{
  content:"";
  position:fixed; inset:0;
  pointer-events:none;
  z-index:1;
  background-image: radial-gradient(rgba(255,255,255,0.018) 1px, transparent 1px);
  background-size: 3px 3px;
}

a{ color: inherit; text-decoration:none; }
button{ font: inherit; cursor: pointer; }
::selection{ background: var(--yellow); color: var(--ink-1000); }

.container{
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
  padding-inline: var(--gutter);
}

.sr-only{
  position:absolute; width:1px; height:1px;
  padding:0; margin:-1px; overflow:hidden;
  clip: rect(0,0,0,0); white-space:nowrap; border:0;
}
.skip-link{
  position:absolute; top:-40px; left:12px; z-index:100;
  padding:10px 14px;
  background: var(--yellow); color: var(--ink-1000);
  font-family: var(--mono); font-size:12px; font-weight:600;
  letter-spacing:.12em; text-transform:uppercase;
  border-radius:6px;
  transition: top .15s ease;
}
.skip-link:focus{ top:12px; outline:none; }

/* ── shared typographic bits ────────────────────────────────── */
.eyebrow{
  font-family: var(--mono);
  font-size:11px; letter-spacing:.14em; text-transform:uppercase;
  color: var(--fg-3); font-weight:500;
}
.eyebrow .dot{
  display:inline-block; width:6px; height:6px; border-radius:50%;
  background: var(--yellow); vertical-align:2px; margin-right:8px;
}

/* ── nav (mirrors landing) ──────────────────────────────────── */
nav.top{
  position: sticky; top:0; z-index:50;
  background: color-mix(in oklab, var(--ink-1000) 80%, transparent);
  backdrop-filter: saturate(160%) blur(14px);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color .25s ease, background .25s ease;
}
nav.top.scrolled{ border-bottom-color: var(--ink-700); }
nav.top .row{
  display:flex; align-items:center; justify-content:space-between;
  height:68px;
}
.brand{
  display:flex; align-items:center; gap:10px;
  font-size:22px;
}
.brand img{ width:28px; height:28px; display:block; border-radius:6px; }
.deficit-wordmark{
  display:inline-block;
  font-family: var(--display-italic);
  font-weight:800; font-style:italic;
  text-transform:uppercase; letter-spacing:-0.02em; line-height:0.9;
  white-space:nowrap; user-select:none;
}
.deficit-wordmark .deficit-dot{
  display:inline-block;
  width:0.17em; height:0.17em; margin-left:0.06em;
  background: var(--yellow); vertical-align: baseline;
}
nav.top .back{
  font-family: var(--display-italic);
  font-style:italic; font-weight:800;
  font-size:14px; letter-spacing:.08em; text-transform:uppercase;
  color: var(--fg-2);
  transition: color 150ms var(--ease-out), transform 120ms var(--ease-out);
}
nav.top .back:active{ transform: scale(.98); }
nav.top .back .arrow{ display:inline-block; margin-right:6px; transition: transform .25s var(--ease-out); }
@media (hover: hover) and (pointer: fine){
  nav.top .back:hover{ color: var(--yellow); }
  nav.top .back:hover .arrow{ transform: translateX(-3px); }
}

/* ── hex CTA (from landing) ─────────────────────────────────── */
.hex{
  position:relative;
  display:inline-flex; align-items:center; justify-content:center;
  padding:16px 34px; min-height:54px;
  font-family: var(--display-italic);
  font-style:italic; font-weight:800; font-size:16px;
  letter-spacing:.04em; text-transform:uppercase;
  color: var(--ink-1000); background: var(--yellow); border:none;
  clip-path: polygon(14px 0, calc(100% - 14px) 0, 100% 50%, calc(100% - 14px) 100%, 14px 100%, 0 50%);
  transition: background 150ms ease, transform 120ms var(--ease-out);
}
@media (hover: hover) and (pointer: fine){
  .hex:hover{ background: var(--yellow-hover); }
}
.hex:active{ transform: scale(.97); background: var(--yellow-pressed); }

/* ── click-to-copy email (mailto fallback) ──────────────────── */
.copy-email{
  display:inline-flex; align-items:center; gap:8px;
  padding:9px 13px;
  background: var(--ink-800);
  border:1px solid var(--ink-700);
  border-radius:9px;
  font-family: var(--mono);
  font-size:12.5px; letter-spacing:.01em;
  color: var(--fg-1);
  cursor:pointer;
  transition: border-color .15s var(--ease-out), color .15s var(--ease-out), transform .12s var(--ease-out);
}
.copy-email .ce-ico{ display:inline-flex; color: var(--fg-3); transition: color .15s var(--ease-out); }
.copy-email .ce-label{ color: var(--fg-1); }
.copy-email:active{ transform: scale(.98); }
@media (hover: hover) and (pointer: fine){
  .copy-email:hover{ border-color: var(--ink-600); }
  .copy-email:hover .ce-ico{ color: var(--fg-2); }
}
.copy-email.copied{ border-color: var(--yellow); }
.copy-email.copied .ce-ico{ color: var(--yellow); }
.copy-email .ce-status{
  font-family: var(--mono);
  font-size:11px; letter-spacing:.1em; text-transform:uppercase;
  color: var(--yellow);
}
.copy-email .ce-status:empty{ display:none; }

/* ── header ─────────────────────────────────────────────────── */
header.support-hero{
  padding-block: clamp(2.75rem, 2rem + 3.5vw, 5.5rem);
  border-bottom: var(--rule);
  position: relative;
}
header.support-hero .kicker{ display:inline-block; }
header.support-hero h1{
  margin:18px 0 0;
  font-family: var(--sans);
  font-weight:800;
  font-size: clamp(2.6rem, 1.8rem + 3.4vw, 5rem);
  letter-spacing:-0.05em; line-height:0.98;
  color: var(--fg-1); text-wrap: balance;
}
header.support-hero .sub{
  margin:20px 0 0;
  max-width: 54ch;
  color: var(--fg-2);
  font-size: clamp(1rem, .94rem + .3vw, 1.15rem);
  line-height:1.55;
}
header.support-hero .hero-contact{
  margin-top: clamp(1.75rem, 1.25rem + 1.5vw, 2.5rem);
  display:flex; flex-wrap:wrap; align-items:center; gap:16px 22px;
}
.hero-contact .addr{
  font-family: var(--mono);
  font-size: clamp(.8rem, .74rem + .2vw, .95rem);
  letter-spacing:.02em;
  color: var(--fg-3);
}
.hero-contact .addr strong{ color: var(--fg-1); font-weight:500; }

/* ── quick-help cards ───────────────────────────────────────── */
.help-cards{
  padding-top: clamp(2.5rem, 2rem + 2vw, 4rem);
  display:grid; grid-template-columns:1fr; gap:16px;
}
@media (min-width: 760px){
  .help-cards{ grid-template-columns: repeat(3, minmax(0,1fr)); gap:18px; }
}
.help-card{
  display:flex; flex-direction:column; gap:10px;
  padding: clamp(1.4rem, 1rem + 1.2vw, 1.85rem);
  background: var(--ink-900);
  border:1px solid var(--ink-700);
  border-radius:18px;
  color: inherit;
  transition: border-color .25s ease, transform 120ms var(--ease-out);
}
.help-card .hc-tag{
  font-family: var(--mono);
  font-size:10.5px; letter-spacing:.16em; text-transform:uppercase;
  color: var(--yellow);
}
.help-card h2{
  margin:0;
  font-family: var(--sans);
  font-weight:800; font-size: clamp(1.15rem,1rem + .5vw,1.4rem);
  letter-spacing:-0.03em; line-height:1.12;
  color: var(--fg-1);
}
.help-card p{
  margin:0;
  color: var(--fg-2); font-size:13.5px; line-height:1.55;
}
.help-card .hc-go{
  margin-top:auto; padding-top:8px;
  display:inline-flex; align-items:center; gap:8px;
  font-family: var(--display-italic);
  font-style:italic; font-weight:800;
  font-size:13px; letter-spacing:.06em; text-transform:uppercase;
  color: var(--fg-1);
}
.help-card .hc-go .arrow{ display:inline-block; transition: transform .25s var(--ease-out); }
.help-card:active{ transform: scale(.99); }
@media (hover: hover) and (pointer: fine){
  .help-card:hover{ border-color: var(--ink-600); }
  .help-card:hover .hc-go{ color: var(--yellow); }
  .help-card:hover .hc-go .arrow{ transform: translateX(4px); }
}

/* ── doc grid: category nav + faq ───────────────────────────── */
.support-body{ padding-block: clamp(3rem, 2rem + 3vw, 5.5rem); }
.doc-grid{
  display:grid; grid-template-columns:1fr; gap:48px;
}
@media (min-width: 940px){
  .doc-grid{ grid-template-columns: 240px 1fr; gap:80px; align-items:start; }
}

.cat-nav{ position: relative; }
@media (min-width: 940px){
  .cat-nav{ position: sticky; top:96px; }
}
.cat-nav .label{
  font-family: var(--mono);
  font-size:11px; letter-spacing:.14em; text-transform:uppercase;
  color: var(--fg-3); font-weight:500;
  margin-bottom:14px;
  display:flex; align-items:center; gap:8px;
}
.cat-nav .label::before{
  content:""; width:6px; height:6px; border-radius:50%; background: var(--yellow);
}
.cat-nav ol{
  list-style:none; margin:0; padding:0;
  display:flex; flex-direction:column; gap:2px;
}
.cat-nav a{
  display:block; padding:7px 0;
  color: var(--fg-2); font-size:14px; line-height:1.4;
  transition: color .15s var(--ease-out);
}
@media (hover: hover) and (pointer: fine){
  .cat-nav a:hover{ color: var(--fg-1); }
}
.cat-nav a.current{ color: var(--yellow); }
@media (max-width: 939px){
  .cat-nav{
    display:flex; flex-wrap:wrap; gap:8px;
    padding-bottom:4px;
  }
  .cat-nav .label{ flex-basis:100%; margin-bottom:4px; }
  .cat-nav ol{ flex-flow:row wrap; gap:8px; }
  .cat-nav a{
    padding:12px 16px;
    border:1px solid var(--ink-700); border-radius:999px;
    font-family: var(--mono); font-size:11px;
    letter-spacing:.08em; text-transform:uppercase;
  }
  .cat-nav a.current{ border-color: var(--yellow); }
}

/* faq groups */
.faq-group{ scroll-margin-top: 92px; }
.faq-group + .faq-group{ margin-top: clamp(2.5rem, 2rem + 1.5vw, 3.5rem); }
.faq-group > h2{
  font-family: var(--sans);
  font-weight:800;
  font-size: clamp(1.35rem, 1.1rem + .8vw, 1.85rem);
  letter-spacing:-0.03em; line-height:1.1;
  color: var(--fg-1);
  margin:0 0 4px;
}
.faq-list{ border-top: var(--rule); }
.faq-item{ border-bottom: var(--rule); }
.faq-item summary{
  list-style:none; cursor:pointer;
  display:flex; align-items:flex-start; justify-content:space-between; gap:20px;
  padding: clamp(15px,.85rem + .5vw,20px) 0;
  font-family: var(--sans);
  font-weight:700;
  font-size: clamp(1rem,.94rem + .35vw,1.15rem);
  letter-spacing:-0.02em; line-height:1.35;
  color: var(--fg-1);
  transition: color .15s ease;
}
.faq-item summary::-webkit-details-marker{ display:none; }
@media (hover: hover) and (pointer: fine){
  .faq-item summary:hover{ color: var(--yellow); }
}
.faq-mark{
  position:relative; flex:0 0 18px; width:18px; height:18px; margin-top:3px;
}
.faq-mark::before, .faq-mark::after{
  content:""; position:absolute; background: var(--yellow);
  transition: transform .25s var(--ease-out), opacity .2s ease;
}
.faq-mark::before{ top:8px; left:1px; right:1px; height:2px; }
.faq-mark::after{ left:8px; top:1px; bottom:1px; width:2px; }
.faq-item[open] .faq-mark::after{ transform: scaleY(0); opacity:0; }
.faq-a{
  padding:0 0 clamp(15px,.85rem + .5vw,20px);
  max-width: 68ch;
}
.faq-a p{
  margin:0 0 .8em;
  color: var(--fg-2);
  font-size: clamp(.92rem,.88rem + .2vw,1.02rem);
  line-height:1.65;
}
.faq-a p:last-child{ margin-bottom:0; }
.faq-a strong{ color: var(--fg-1); font-weight:600; }
.faq-a a{ color: var(--fg-1); text-decoration:underline; text-underline-offset:2px; }
@media (hover: hover) and (pointer: fine){
  .faq-a a:hover{ color: var(--yellow); }
}
.faq-a ul{ margin:.4em 0 .8em; padding-left:20px; color: var(--fg-2); }
.faq-a li{ margin:5px 0; font-size: clamp(.92rem,.88rem + .2vw,1.02rem); line-height:1.6; }
.faq-a li::marker{ color: var(--fg-3); }
.faq-a code{
  font-family: var(--mono);
  font-size:.86em; padding:1px 6px;
  background: var(--ink-800); border:1px solid var(--ink-700);
  border-radius:4px; color: var(--fg-1);
}
@keyframes faqIn{ from{ opacity:0; transform: translateY(-4px); } to{ opacity:1; transform:none; } }
.faq-item[open] .faq-a{ animation: faqIn .25s var(--ease-out); }

/* ── contact band ───────────────────────────────────────────── */
.contact{
  border-top: var(--rule);
  padding-block: var(--section-y);
}
.contact .inner{
  background: var(--ink-900);
  border:1px solid var(--ink-700);
  border-radius:22px;
  padding: clamp(1.75rem, 1.25rem + 2.5vw, 3.25rem);
  display:grid; grid-template-columns:1fr; gap:28px;
  align-items:center;
  position:relative; overflow:hidden;
}
@media (min-width: 820px){
  .contact .inner{ grid-template-columns: 1.4fr auto; gap:48px; }
}
.contact .eyebrow{ color: var(--yellow); }
.contact h2{
  margin:14px 0 0;
  font-family: var(--sans);
  font-weight:800;
  font-size: clamp(1.7rem, 1.3rem + 1.8vw, 2.75rem);
  letter-spacing:-0.04em; line-height:1.02;
  color: var(--fg-1); text-wrap:balance;
}
.contact p{
  margin:16px 0 0;
  max-width: 52ch;
  color: var(--fg-2);
  font-size: clamp(.95rem,.9rem + .25vw,1.075rem);
  line-height:1.6;
}
.contact p strong{ color: var(--fg-1); font-weight:600; }
.contact .cta-col{ display:flex; flex-direction:column; align-items:flex-start; gap:12px; }
.contact .addr-line{
  font-family: var(--mono);
  font-size:11px; letter-spacing:.12em; text-transform:uppercase;
  color: var(--fg-3);
}

/* ── footer (mirrors landing) ───────────────────────────────── */
footer{
  border-top: var(--rule);
  padding-block:44px;
  color: var(--fg-3);
}
footer .row{
  display:flex; flex-wrap:wrap; gap:24px;
  justify-content:space-between; align-items:center;
}
footer .links{ display:flex; flex-wrap:wrap; gap:14px 24px; }
footer .links a{
  font-family: var(--mono);
  font-size:11px; letter-spacing:.14em; text-transform:uppercase;
  color: var(--fg-2);
  transition: color 150ms var(--ease-out);
}
@media (hover: hover) and (pointer: fine){
  footer .links a:hover{ color: var(--fg-1); }
}
footer .brand{ font-size:18px; }
footer .copy{
  font-family: var(--mono);
  font-size:11px; color: var(--fg-3);
  letter-spacing:.14em; text-transform:uppercase;
}

/* ── focus states ───────────────────────────────────────────── */
a:focus-visible,
button:focus-visible,
summary:focus-visible{
  outline: 2px solid var(--yellow);
  outline-offset: 3px;
  border-radius: 4px;
}
.hex:focus-visible{ outline: 2px solid var(--yellow); outline-offset: 4px; }
.help-card:focus-visible{ outline: 2px solid var(--yellow); outline-offset: 3px; }

/* ── reduced motion ─────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  *{ animation: none !important; transition: none !important; }
}