/* ============================================================================
   docs.css — help.deadlinefox.com
   Same arrangement legal.css uses: layout and document typography only. The
   difference is that this is a SEPARATE Vercel project (root directory: docs/),
   so it cannot link to ../landing.css. The :root block below is therefore a
   VERBATIM COPY of landing.css's tokens, trimmed to what these pages use.
   Do not re-pick a value here. When docs/publish.mjs exists it will copy
   landing.css in wholesale and this block goes away.
   ========================================================================= */

:root{
  --brand:#F2662A; --brand-cta:#F2662A; --brand-cta-hov:#E55B20; --brand-deep:#CB4E14;
  --brand-tint:#FFE9DE; --brand-wash:#FFF6F1;

  /* feature accents: light fill, dark text, all AA on their own fill */
  --acc-teal-bg:#E4F7F5;   --acc-teal-fg:#00776F;
  --acc-violet-bg:#EEEBFB; --acc-violet-fg:#5B4BC4;
  --acc-amber-bg:#FFF3D6;  --acc-amber-fg:#8A5A00;

  /* warm neutral ramp */
  --ink:#1B1613; --ink-800:#2E2521; --ink-700:#4A3C35; --ink-600:#6E5C52;
  --ink-500:#7D6B61; --ink-400:#A99C93; --ink-300:#D8CFC9; --ink-200:#EAE3DE;
  --ink-100:#F4EFEB; --ink-50:#F8F6F4; --paper:#FFFFFF; --paper-alt:#FAF7F5;

  --fs-body:1.0625rem; --fs-sm:.9375rem; --fs-xs:.8125rem; --fs-eyebrow:.8125rem;
  --r-sm:8px; --r-md:14px; --r-lg:20px; --r-pill:999px;
  --sh-sm:0 1px 2px rgba(27,22,19,.04),0 2px 6px rgba(27,22,19,.05);
  --sh-md:0 2px 4px rgba(27,22,19,.04),0 10px 24px -6px rgba(27,22,19,.09);
  --wrap:1140px;
}

*{box-sizing:border-box}
body{
  margin:0;
  font-family:'Inter','Inter var',-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif;
  font-size:var(--fs-body);line-height:1.65;color:var(--ink-600);background:var(--paper);
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none}
h1,h2,h3{color:var(--ink);margin:0}
.dc-wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:clamp(1.25rem,4vw,2rem)}

/* ---------- header (same shape as legal.css .lg-bar) ---------- */
.dc-bar{background:var(--paper);border-bottom:1px solid var(--ink-200)}
.dc-bar-in{
  max-width:var(--wrap);margin-inline:auto;padding:0 clamp(1.25rem,4vw,2rem);height:76px;
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
}
.dc-bar .logo img{height:30px;width:auto;flex:none;object-fit:contain;object-position:left center}
.dc-mark{display:flex;align-items:center;gap:.55rem}
.dc-mark .tag{
  font-size:var(--fs-xs);font-weight:650;color:var(--brand-deep);
  background:var(--brand-wash);border:1px solid var(--brand-tint);
  border-radius:var(--r-pill);padding:.15rem .55rem;
}
.dc-links{display:flex;align-items:center;gap:1.5rem;font-size:var(--fs-sm);font-weight:550;color:var(--ink-700)}
.dc-links a:hover{color:var(--ink)}
.dc-btn{
  background:var(--brand-cta);color:#fff;padding:.6rem 1.1rem;border-radius:var(--r-pill);
  font-weight:600;font-size:var(--fs-sm);
}
.dc-btn:hover{background:var(--brand-cta-hov);color:#fff}

/* ---------- hero ---------- */
.dc-hero{
  background:linear-gradient(180deg,var(--brand-wash) 0%,var(--paper-alt) 62%,var(--paper) 100%);
  border-bottom:1px solid var(--ink-200);
  padding:clamp(3.2rem,7vw,4.75rem) 0 clamp(2.6rem,5vw,3.5rem);text-align:center;
}
.dc-eyebrow{font-size:var(--fs-eyebrow);font-weight:700;letter-spacing:.14em;color:var(--brand);text-transform:uppercase}
.dc-hero h1{font-size:clamp(2.1rem,4.6vw,3rem);line-height:1.1;letter-spacing:-.025em;margin-top:.85rem}
.dc-hero .lead{max-width:48ch;margin:1rem auto 0;color:var(--ink-500)}

.dc-search{position:relative;max-width:620px;margin:2rem auto 0}
.dc-search input{
  width:100%;padding:1.05rem 1.1rem 1.05rem 3.1rem;font:inherit;font-size:1.0625rem;color:var(--ink);
  background:var(--paper);border:1px solid var(--ink-200);border-radius:var(--r-md);
  box-shadow:var(--sh-md);outline:none;
}
.dc-search input::placeholder{color:var(--ink-400)}
.dc-search input:focus{border-color:var(--brand);box-shadow:var(--sh-md),0 0 0 3px var(--brand-tint)}
.dc-search .mag{position:absolute;left:1.15rem;top:50%;transform:translateY(-50%);color:var(--ink-400);font-size:19px}
.dc-search .kbd{
  position:absolute;right:1rem;top:50%;transform:translateY(-50%);font-size:11px;font-weight:600;
  color:var(--ink-400);background:var(--ink-50);border:1px solid var(--ink-200);border-radius:6px;padding:3px 7px;
}
.dc-chips{margin-top:1.15rem;display:flex;flex-wrap:wrap;gap:.5rem;justify-content:center}
.dc-chips .lbl{font-size:var(--fs-xs);color:var(--ink-500);align-self:center;margin-right:.15rem}
.dc-chip{
  background:var(--paper);border:1px solid var(--ink-300);border-radius:var(--r-pill);
  padding:.35rem .85rem;font-size:var(--fs-xs);font-weight:550;color:var(--ink-700);
}
.dc-chip:hover{border-color:var(--brand);color:var(--brand-deep)}

/* ---------- sections ---------- */
.dc-sect{padding:clamp(3rem,6vw,4.25rem) 0}
.dc-sect-head{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;margin-bottom:1.5rem}
.dc-sect-head h2{font-size:1.5rem;letter-spacing:-.018em}
.dc-sect-head a{font-size:var(--fs-sm);font-weight:600;color:var(--brand-deep)}

.dc-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:1.15rem}
@media(max-width:880px){.dc-steps{grid-template-columns:1fr}}
.dc-step{
  background:var(--paper);border:1px solid var(--ink-200);border-radius:var(--r-lg);
  padding:1.5rem 1.5rem 1.35rem;box-shadow:var(--sh-sm);display:block;
}
.dc-step:hover{border-color:var(--brand-tint);box-shadow:var(--sh-md)}
.dc-step .n{
  width:30px;height:30px;border-radius:var(--r-pill);background:var(--brand);color:#fff;
  display:grid;place-items:center;font-size:14px;font-weight:700;margin-bottom:1rem;
}
.dc-step h3{font-size:1.0625rem;font-weight:650;letter-spacing:-.008em}
.dc-step p{margin-top:.4rem;font-size:var(--fs-sm);color:var(--ink-500);line-height:1.6}
.dc-step .go{margin-top:.9rem;font-size:var(--fs-sm);font-weight:600;color:var(--brand-deep)}

/* ---------- category grid ---------- */
.dc-cats{background:var(--paper-alt);border-block:1px solid var(--ink-200)}
.dc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.15rem}
@media(max-width:980px){.dc-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:680px){.dc-grid{grid-template-columns:1fr}}
.dc-cat{background:var(--paper);border:1px solid var(--ink-200);border-radius:var(--r-lg);padding:1.5rem;box-shadow:var(--sh-sm)}
.dc-cat:hover{border-color:var(--brand-tint);box-shadow:var(--sh-md)}
.dc-cat .ico{
  width:36px;height:36px;border-radius:10px;display:grid;place-items:center;font-size:17px;
  margin-bottom:.95rem;background:var(--brand-wash);color:var(--brand-deep);
}
.dc-cat.t2 .ico{background:var(--acc-teal-bg);color:var(--acc-teal-fg)}
.dc-cat.t3 .ico{background:var(--acc-violet-bg);color:var(--acc-violet-fg)}
.dc-cat.t4 .ico{background:var(--acc-amber-bg);color:var(--acc-amber-fg)}
.dc-cat h3{font-size:1.0625rem;font-weight:650;letter-spacing:-.008em}
.dc-cat .cnt{font-size:var(--fs-xs);color:var(--ink-400);font-weight:550;margin-top:.15rem}
.dc-cat ul{list-style:none;margin:1rem 0 0;padding:0}
.dc-cat li{margin-top:.5rem}
.dc-cat li a{font-size:var(--fs-sm);color:var(--ink-600);line-height:1.5}
.dc-cat li a:hover{color:var(--brand-deep)}
.dc-cat .all{display:inline-block;margin-top:1rem;font-size:var(--fs-sm);font-weight:600;color:var(--brand-deep)}

/* ---------- support strip ---------- */
.dc-strip{display:grid;grid-template-columns:1.4fr 1fr;gap:1.15rem}
@media(max-width:880px){.dc-strip{grid-template-columns:1fr}}
.dc-panel{border:1px solid var(--ink-200);border-radius:var(--r-lg);padding:1.65rem 1.75rem;background:var(--paper)}
.dc-panel.warm{background:var(--brand-wash);border-color:var(--brand-tint)}
.dc-panel h3{font-size:1.1875rem;letter-spacing:-.012em}
.dc-panel p{margin-top:.5rem;font-size:var(--fs-sm);color:var(--ink-600);line-height:1.65}
.dc-panel .dc-btn{display:inline-block;margin-top:1.1rem}
.dc-ghost{
  display:inline-block;margin-top:1.1rem;border:1px solid var(--ink-300);border-radius:var(--r-pill);
  padding:.6rem 1.1rem;font-size:var(--fs-sm);font-weight:600;color:var(--ink-700);background:var(--paper);
}
.dc-ghost:hover{border-color:var(--brand);color:var(--brand-deep)}

/* ---------- footer ---------- */
.dc-foot{background:var(--ink);color:#8A7B71;padding:2.75rem 0 2rem;font-size:var(--fs-sm)}
.dc-foot-in{
  max-width:var(--wrap);margin-inline:auto;padding-inline:clamp(1.25rem,4vw,2rem);
  display:flex;justify-content:space-between;gap:1.5rem;flex-wrap:wrap;align-items:center;
}
.dc-foot a{color:#C9BBB2}
.dc-foot a:hover{color:#fff}
.dc-foot .fl{display:flex;gap:1.5rem;flex-wrap:wrap}

/* ⚠️ The card is a <div>, never an <a>. It contains per-article links, and anchors cannot
   nest: the parser closes the outer one early, so the <ul> and "View all" escaped the card
   and became grid items of their own. Shipped that way once. */
.dc-cat-title{display:block}
.dc-cat-title:hover h3{color:var(--brand-deep)}