/* doc.css: the reference pages (support, privacy, terms, delete-account).
   Same look as the article pages (hero band, gold rail, short-answer card),
   tuned for reading long reference text: a contents list, quiet h3s, FAQ rows. */

html, body { margin: 0; background: #FFFFFF; color: #1A1815;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  -webkit-text-size-adjust: 100%; -webkit-font-smoothing: antialiased; }
.wrap { display: block; max-width: 680px; margin: 0 auto; padding: 0 24px 96px; }
::selection { background: rgba(212,168,75,0.22); }
html { scroll-behavior: smooth; }
[id] { scroll-margin-top: 84px; }

/* Site bar: the app's dark + gold, so ad -> page -> app feels like one place */
nav.site { position: sticky; top: 0; z-index: 10; background: rgba(20,16,14,0.94);
  -webkit-backdrop-filter: saturate(160%) blur(12px); backdrop-filter: saturate(160%) blur(12px);
  border-bottom: 1px solid rgba(212,168,75,0.18); }
nav.site .in { max-width: 1040px; margin: 0 auto; padding: 0 24px; height: 60px;
  display: flex; align-items: center; justify-content: space-between; gap: 16px; }
nav.site a { text-decoration: none; }
.brand { display: flex; align-items: center; gap: 10px; flex-shrink: 0;
  color: #FFFFFF; font-size: 17px; font-weight: 700; letter-spacing: -0.2px; }
.brand:hover { color: #FFFFFF; }
.brand .mark { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px;
  border-radius: 9px; background: linear-gradient(160deg, #2A2228 0%, #17120F 100%);
  box-shadow: 0 0 0 1px rgba(212,168,75,0.3); }
.brand .mark img { display: block; width: 22px; height: 22px; }
nav.site .links { display: flex; align-items: center; gap: 26px; flex-shrink: 0; }
nav.site .links a { color: #CFC8BB; font-size: 14px; font-weight: 500; }
nav.site .links a:hover { color: #FFFFFF; }
nav.site .links a.get { color: #2E2410; font-weight: 700; padding: 9px 16px; border-radius: 10px;
  background: linear-gradient(180deg, #E2BC66 0%, #D4A84B 55%, #B98F38 100%);
  box-shadow: inset 0 1px 1px rgba(255,255,255,0.45); }
nav.site .links a.get:hover { color: #2E2410; filter: brightness(1.05); }
@media (max-width: 560px) { nav.site .links a:not(.get) { display: none; } }

/* Hero: full width band, content centered */
.hero { position: relative; text-align: left; overflow: hidden;
  background:
    radial-gradient(760px 360px at 18% -80px, rgba(212,168,75,0.20), transparent 68%),
    linear-gradient(180deg, #FBF5E8 0%, #FDFBF7 62%, #FFFFFF 100%);
  border-bottom: 1px solid #F0EBE1; }
.hero::before { content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: radial-gradient(rgba(212,168,75,0.16) 1px, transparent 1px);
  background-size: 22px 22px;
  -webkit-mask: radial-gradient(560px 280px at 30% 30%, transparent 55%, #000 100%);
  mask: radial-gradient(560px 280px at 30% 30%, transparent 55%, #000 100%);
  opacity: 0.6; }
.hero .in { position: relative; max-width: 680px; margin: 0 auto; padding: 56px 24px 44px; }
.cat { display: inline-block; margin: 0; padding: 6px 14px; border-radius: 999px;
  font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; text-decoration: none;
  color: #8A6A1E; background: rgba(212,168,75,0.14); border: 1px solid rgba(212,168,75,0.3); }
a.cat:hover { background: rgba(212,168,75,0.22); color: #8A6A1E; }
.hero h1 { font-size: clamp(30px, 5vw, 42px); font-weight: 700; letter-spacing: -0.8px;
  line-height: 1.12; margin: 16px 0 12px; max-width: 20ch; color: #17140F; }
.byline { display: flex; align-items: center; justify-content: flex-start; flex-wrap: wrap; white-space: pre-wrap;
  font-size: 13px; color: #8A857C; margin: 0; }
.byline .dot { width: 3px; height: 3px; margin: 0 10px; border-radius: 999px; background: #C9C2B4; }
.byline strong { color: #6B655B; font-weight: 600; }

/* Short answer */
.answer { font-size: 17px; line-height: 28px; color: #221F1A; font-weight: 500;
  background: linear-gradient(180deg, #FBF7EF 0%, #FCFAF6 100%);
  border: 1px solid #EFE7D6; border-left: 4px solid #D4A84B; border-radius: 14px;
  padding: 22px 24px; margin: 40px 0 0; box-shadow: 0 6px 22px rgba(180,140,50,0.08); }
.answer::before { content: "IN SHORT"; display: block; font-size: 11px; font-weight: 700;
  letter-spacing: 0.12em; color: #B98F38; margin-bottom: 8px; }
.answer a { font-weight: 600; }

/* Body type */
h2 { font-size: 22px; font-weight: 700; line-height: 1.3; margin: 52px 0 14px; color: #1A1815;
  letter-spacing: -0.3px; position: relative; padding-left: 18px; }
h2::before { content: ""; position: absolute; top: 4px; bottom: 4px; left: 0; width: 4px;
  border-radius: 3px; background: linear-gradient(180deg, #E2BC66, #B98F38); }
h3 { font-size: 16px; font-weight: 700; margin: 28px 0 8px; color: #2A2620; }
p, li { font-size: 16px; line-height: 27px; color: #4E4A43; margin: 0 0 14px; }
strong, b { color: #2A2620; font-weight: 600; }
a { color: #A27A28; text-decoration: underline; text-decoration-color: rgba(212,168,75,0.45);
  text-underline-offset: 3px; text-decoration-thickness: 1.5px; font-weight: 500; }
a:hover { color: #8A6A1E; text-decoration-color: #B98F38; }
ul { padding-left: 22px; margin: 10px 0 20px; }
ul > li { padding-left: 4px; margin-bottom: 8px; }
ul > li::marker { color: #D4A84B; }
blockquote { margin: 20px 0; padding: 14px 18px; border-radius: 12px;
  background: #FBF8F2; border: 1px solid #EFE7D6; border-left: 3px solid #D4A84B;
  font-size: 15px; line-height: 25px; color: #3A362F; }

/* Numbered steps */
ol.steps { counter-reset: step; padding-left: 0; list-style: none; margin: 18px 0 8px; }
ol.steps > li { counter-increment: step; position: relative; padding-left: 44px; min-height: 30px; margin: 0 0 14px; }
ol.steps > li::before { content: counter(step); position: absolute; left: 0; top: -1px;
  width: 28px; height: 28px; border-radius: 9px; display: flex; align-items: center; justify-content: center;
  font-size: 14px; font-weight: 700; color: #2E2410;
  background: linear-gradient(180deg, #E2BC66 0%, #D4A84B 100%);
  box-shadow: 0 2px 6px rgba(212,168,75,0.3), inset 0 1px 1px rgba(255,255,255,0.5); }

/* Card */
.card { background: #FCFBF8; border: 1px solid #EDE9E1; border-radius: 16px; padding: 20px 22px; margin: 14px 0; }
.card > :last-child { margin-bottom: 0; }

/* Contact card (support) */
.contact { text-align: left; margin: 40px 0 0; padding: 26px 26px 24px; border: 1px solid #EDE9E1;
  border-radius: 20px; background: radial-gradient(120% 140% at 0% 0%, rgba(212,168,75,0.09), #FBF9F5); }
.contact .kicker { font-size: 13px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
  color: #8A6A1E; margin: 0 0 8px; }
.contact .lede { font-size: 16px; color: #3A362F; margin: 0 0 20px; max-width: 52ch; }
a.btn { display: inline-block; padding: 15px 32px; border-radius: 14px; text-decoration: none;
  background: linear-gradient(180deg, #E2BC66 0%, #D4A84B 55%, #B98F38 100%);
  color: #2E2410; font-size: 16px; font-weight: 700;
  box-shadow: 0 4px 20px rgba(212,168,75,0.35), inset 0 1px 1px rgba(255,255,255,0.5); }
a.btn:hover { color: #2E2410; filter: brightness(1.03); }
.contact .fine { font-size: 13px; color: #8A857C; margin: 16px 0 0; }

/* Quick links (support) */
.quick { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 16px 0 0; }
.quick a { display: block; padding: 16px 18px; border: 1px solid #EDE9E1; border-radius: 14px;
  background: #FFFFFF; text-decoration: none; color: #1A1815; font-weight: 600; font-size: 15px;
  transition: border-color 0.15s ease, background 0.15s ease; }
.quick a span { display: block; font-weight: 400; font-size: 13px; color: #8A857C; margin-top: 2px; }
.quick a:hover { border-color: rgba(212,168,75,0.6); background: #FDFBF6; }
@media (max-width: 480px) { .quick { grid-template-columns: 1fr; } }

/* FAQ rows */
.faq { border: 1px solid #EDE9E1; border-radius: 16px; overflow: hidden; margin: 8px 0 0; }
.faq .q { padding: 18px 22px; border-top: 1px solid #F1EDE5; background: #FFFFFF; }
.faq .q:first-child { border-top: 0; }
.faq h3 { margin: 0 0 6px; font-size: 16px; line-height: 24px; color: #1A1815; }
.faq p { margin: 0; font-size: 15.5px; line-height: 25px; }

/* Contents (legal) */
.toc { margin: 32px 0 36px; padding: 20px 22px; border: 1px solid #EDE9E1; border-radius: 16px; background: #FCFBF8; }
.toc p { font-size: 12px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: #8A6A1E; margin: 0 0 10px; }
.toc ol { list-style: none; padding: 0; margin: 0; columns: 2; column-gap: 24px; }
.toc li { font-size: 14px; line-height: 20px; margin: 0 0 8px; break-inside: avoid; }
.toc a { color: #3D3A34; text-decoration: none; font-weight: 500; }
.toc a:hover { color: #8A6A1E; text-decoration: underline; }
@media (max-width: 520px) { .toc ol { columns: 1; } }

/* Footer */
footer { margin-top: 72px; padding-top: 28px; border-top: 1px solid #EDE9E1; text-align: left; }
footer .links { font-size: 14px; color: #8A857C; margin: 0; }
footer .links a { color: #6B655B; text-decoration: none; font-weight: 500; margin: 0 6px; }
footer .links a:first-child { margin-left: 0; }
footer .links a:hover { color: #8A6A1E; }
footer .sig { font-size: 12px; color: #A8A399; margin: 14px 0 0; }