/* Shared chrome for the agents site's secondary pages (privacy, terms, embed).
   The marketing index keeps its own inline styles (it is a bespoke landing
   page); these pages are documents, so they share one sheet instead of
   triplicating the header, footer, and prose rules.

   Tokens mirror the FindBusiness Services site so the whole property reads as
   one brand. mint (#8BC8B6) is for navy backgrounds only; mint-deep (#2F7A66)
   is the WCAG-safe mint for text/links on light. */
:root {
  --navy: #0A2540; --navy-light: #1a3a5f;
  --mint: #8BC8B6; --mint-dark: #6FB39E; --mint-deep: #2F7A66;
  --ink: #3C4043; --surface: #F8F9FA; --page: #eef2f7; --line: rgba(10,37,64,.1);
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: Montserrat, system-ui, sans-serif; color: var(--ink); background: #fff;
  line-height: 1.6; -webkit-font-smoothing: antialiased; overflow-x: clip;
}
::selection { background: var(--mint); color: var(--navy); }
.wrap { max-width: 1080px; margin: 0 auto; padding: 0 24px; }

/* Skip link: keyboard users shouldn't tab the whole header to reach content. */
.skip {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--mint); color: var(--navy); padding: 10px 16px; font-weight: 600;
}
.skip:focus { left: 8px; top: 8px; }
:focus-visible { outline: 3px solid var(--mint-deep); outline-offset: 2px; }

header { position: sticky; top: 0; z-index: 50; background: rgba(10,37,64,.9); backdrop-filter: blur(8px); border-bottom: 1px solid rgba(255,255,255,.1); }
header .wrap { display: flex; align-items: center; justify-content: space-between; height: 64px; gap: 16px; }
.wordmark { display: inline-flex; align-items: center; font-weight: 800; font-size: 1.12rem; letter-spacing: -.01em; text-decoration: none; }
.wordmark img { width: 30px; height: 30px; margin-right: 9px; flex-shrink: 0; }
.wordmark .fb-find { color: #F8F9FA; }
.wordmark .fb-biz { color: var(--mint); }
.wordmark .fb-dot { color: rgba(248,249,250,.45); }
.wordmark .fb-tld { color: rgba(248,249,250,.55); }
header nav { display: flex; align-items: center; }
header nav a { margin-left: 22px; color: rgba(255,255,255,.8); text-decoration: none; font-size: .9rem; font-weight: 500; }
header nav a:hover { color: var(--mint); }
header nav a.cta { background: var(--mint); color: var(--navy); padding: 8px 16px; border-radius: 999px; font-weight: 600; }
header nav a.cta:hover { background: var(--mint-dark); }
/* Off-site cue. A nav link that LEAVES this property is tinted mint and carries
   a small up-right arrow, the same signal services.findbusiness.ai uses for its
   links over here. Same glyph both directions, so a reader always knows whether
   a click keeps them on the page they are reading. */
header nav a.ext { display: inline-flex; align-items: center; color: rgba(139,200,182,.9); }
header nav a.ext:hover { color: var(--mint); }
.ext-arrow { width: 10px; height: 10px; margin-left: 5px; flex: 0 0 auto; opacity: .7; }

.eyebrow { display: inline-block; font-size: .7rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; }
.eyebrow.on-navy { color: var(--mint); }
.eyebrow.on-light { color: var(--mint-deep); }

/* Page head: navy band carrying the title. */
.pagehead { background: var(--navy); color: #fff; padding: 52px 0 44px; }
.pagehead h1 { font-size: clamp(1.8rem, 4vw, 2.6rem); line-height: 1.15; font-weight: 800; letter-spacing: -.02em; margin: 10px 0 12px; }
.pagehead p { color: rgba(238,244,242,.8); max-width: 62ch; }
.pagehead .updated { font-size: .84rem; color: rgba(238,244,242,.6); margin-top: 14px; }

main { padding: 44px 0 72px; }
.doc { max-width: 74ch; }
.doc h2 { font-size: 1.22rem; font-weight: 700; color: var(--navy); letter-spacing: -.01em; margin: 38px 0 10px; }
.doc h2:first-of-type { margin-top: 0; }
.doc h3 { font-size: 1rem; font-weight: 700; color: var(--navy); margin: 22px 0 6px; }
/* Long unbreakable tokens (an email address, a full URL) are wider than a small
   phone's text column. Body overflow is clipped, so without this they are
   silently cut off rather than wrapped. */
.doc p, .doc li { color: var(--ink); overflow-wrap: break-word; }
.doc a { overflow-wrap: anywhere; }
.doc p { margin: 0 0 12px; }
.doc ul, .doc ol { margin: 0 0 14px; padding-left: 22px; }
.doc li { margin: 5px 0; }
.doc a { color: var(--mint-deep); text-decoration: underline; text-underline-offset: 2px; }
.doc a:hover { color: var(--navy); }
.doc strong { color: var(--navy); }
.doc table { border-collapse: collapse; width: 100%; margin: 0 0 16px; font-size: .92rem; }
.doc th, .doc td { text-align: left; padding: 9px 12px; border-bottom: 1px solid var(--line); vertical-align: top; }
.doc th { color: var(--navy); font-weight: 700; background: var(--surface); }
/* Wide content scrolls inside its own container, never the page body. */
.scroller { overflow-x: auto; }

/* Callout: a fact worth stopping on. A full border and a tinted surface, never
   a left accent rail (house rule: that reads as template-built). */
.note { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 16px 18px; margin: 0 0 18px; }
.note.warn { background: #fff8ec; border-color: rgba(192,122,18,.32); }
.note p:last-child { margin-bottom: 0; }

/* Table of contents. */
.toc { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 16px 18px 16px 38px; margin: 0 0 30px; }
.toc li { margin: 3px 0; }

code, .doc code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .88em; background: rgba(10,37,64,.06); padding: 2px 6px; border-radius: 5px; }
pre { background: var(--navy); color: #eef4f2; border-radius: 12px; padding: 16px 18px; overflow-x: auto; margin: 0 0 16px; }
pre code { background: none; padding: 0; color: inherit; font-size: .84rem; line-height: 1.6; }

footer { background: var(--navy); color: rgba(238,244,242,.75); padding: 36px 0; font-size: .88rem; }
footer .wrap { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; align-items: center; }
footer a { color: rgba(238,244,242,.85); text-decoration: underline; text-underline-offset: 2px; }
footer a:hover { color: var(--mint); }
footer .agents { font-family: ui-monospace, Menlo, monospace; font-size: .8rem; }
footer .agents .label { font-family: Montserrat, sans-serif; color: var(--mint); font-weight: 600; margin-right: 8px; }

@media (max-width: 720px) {
  /* The wordmark plus three links do not fit one phone-width row, and body
     overflow is clipped, so an unwrapped header silently eats the CTA. Wrap into
     two rows (brand, then a centered nav) so every link stays reachable. */
  header .wrap { height: auto; flex-wrap: wrap; justify-content: center; padding-top: 10px; padding-bottom: 10px; row-gap: 9px; }
  .wordmark { font-size: 1rem; }
  .wordmark img { width: 26px; height: 26px; margin-right: 7px; }
  /* The nav wraps too: at ~320px even one row of links overruns the wrap, and a
     clipped link is an unreachable link. */
  header nav { width: 100%; justify-content: center; flex-wrap: wrap; gap: 10px 16px; }
  header nav a { margin-left: 0; font-size: .84rem; }
  header nav a.cta { padding: 7px 14px; }
  .pagehead { padding: 38px 0 32px; }
  main { padding: 32px 0 56px; }
}