/* Shared styles for asapp.app/help. Tokens and header/footer rules mirror
   terms.html so the help center reads as the same site. */
:root { --bg:#171717; --panel:#262626; --line:#404040; --ink:#f5f5f5; --ink-soft:#a3a3a3; --ink-mute:#737373; --brand:#008f4a; --brand-dark:#00753c; --brand-light:#2fbf71; --amber:#fbbf24; }
* { margin:0; padding:0; box-sizing:border-box; }
body { font-family:'Karla',-apple-system,sans-serif; background:var(--bg); color:var(--ink); line-height:1.65; font-size:17px; }
.wrap { max-width:760px; margin:0 auto; padding:0 24px; }
header { border-bottom:1px solid var(--line); padding:18px 0; }
header .wrap { display:flex; align-items:center; justify-content:space-between; max-width:1080px; }
.logo { font-family:'Fraunces',Georgia,serif; font-weight:700; font-size:22px; color:var(--ink); text-decoration:none; display:flex; align-items:center; gap:12px; }
.logo span { color:var(--brand-light); font-size:17px; white-space:nowrap; }
.logo img { width:222px; height:auto; border-radius:8px; display:block; }
.nav-cta { background:var(--brand); color:#ffffff; text-decoration:none; padding:10px 20px; border-radius:6px; font-weight:700; font-size:15px; transition:background .15s ease; }
.nav-cta:hover { background:var(--brand-dark); }
@media (max-width:640px) {
  header .wrap { display:block; }
  /* Smaller than the landing page's 300px: on an article the reader came for
     the steps, and a full-width logo pushed them below the first screen. */
  header { padding:12px 0; }
  .logo { flex-direction:row; justify-content:center; gap:12px; }
  .logo img { width:120px; }
  .logo span { font-size:17px; }
  .nav-cta { display:none; }
}
main { padding:36px 0 64px; }
.crumbs { font-size:14px; color:var(--ink-mute); margin-bottom:22px; }
.crumbs a { color:var(--brand-light); text-decoration:none; }
.crumbs a:hover { text-decoration:underline; }
h1 { font-family:'Fraunces',Georgia,serif; font-size:clamp(28px,4vw,40px); line-height:1.2; margin-bottom:6px; }
.meta { color:var(--ink-mute); font-size:14px; margin-bottom:26px; }
h2 { font-family:'Fraunces',Georgia,serif; font-size:21px; line-height:1.3; margin:34px 0 10px; }
h3 { font-size:17px; color:var(--ink); margin:22px 0 6px; }
p, li { color:var(--ink-soft); margin-bottom:12px; }
ul, ol { padding-left:24px; margin-bottom:12px; }
li { padding-left:4px; }
a { color:var(--brand-light); }
strong { color:var(--ink); font-weight:700; }
/* A label exactly as it appears on screen. */
.ui { color:var(--ink); background:var(--panel); border:1px solid var(--line); border-radius:5px; padding:1px 7px; font-size:.92em; white-space:nowrap; }
code { font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:.86em; color:var(--ink); background:var(--panel); border:1px solid var(--line); border-radius:5px; padding:1px 6px; overflow-wrap:anywhere; }
.lede { background:var(--panel); border:1px solid var(--line); border-radius:10px; padding:18px 22px; color:var(--ink); margin-bottom:30px; }
.note { border-left:3px solid var(--amber); background:var(--panel); border-radius:0 8px 8px 0; padding:14px 18px; margin:18px 0; }
.note p:last-child { margin-bottom:0; }
.note strong:first-child { color:var(--amber); }
.tablewrap { overflow-x:auto; margin:14px 0 18px; border:1px solid var(--line); border-radius:8px; }
table { border-collapse:collapse; width:100%; font-size:15px; }
th, td { text-align:left; padding:10px 14px; border-bottom:1px solid var(--line); color:var(--ink-soft); vertical-align:top; }
th { color:var(--ink); background:var(--panel); white-space:nowrap; }
tr:last-child td { border-bottom:0; }
/* Index cards */
.group { margin-top:34px; }
.group > h2 { margin-top:0; }
.cards { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:14px; }
.card { display:block; background:var(--panel); border:1px solid var(--line); border-radius:10px; padding:16px 18px; text-decoration:none; transition:border-color .15s ease; }
.card:hover { border-color:var(--brand-light); }
.card b { display:block; color:var(--ink); font-size:17px; margin-bottom:4px; }
.card span { display:block; color:var(--ink-soft); font-size:15px; line-height:1.5; }
@media (max-width:640px) { .cards { grid-template-columns:1fr; } }
.next { margin-top:40px; padding-top:22px; border-top:1px solid var(--line); }
.next p { margin-bottom:6px; }
footer { border-top:1px solid var(--line); padding:26px 0 34px; font-size:13px; color:var(--ink-mute); text-align:center; }
footer a { color:var(--brand-light); }
.footer-logo { width:222px; height:auto; border-radius:10px; margin:0 auto 14px; display:block; }
@media (max-width:640px) { .footer-logo { width:min(60vw,222px); } }
/* Screenshots are captured at 2x from the demo site; max-width keeps a narrow
   card from being blown up to the full column. */
.shot { margin:18px 0 22px; }
.shot img { display:block; width:100%; height:auto; border:1px solid var(--line); border-radius:10px; }
.shot.narrow img { max-width:420px; }
.shot figcaption { font-size:14px; color:var(--ink-mute); margin-top:8px; }