/* ============================================================================
   Shared styles for the three legal pages: privacy, terms, do-not-call.
   
   One stylesheet rather than three inline copies, because these documents get
   edited by whoever is answering a carrier or a complaint, and three drifting
   copies of the same CSS is how a "privacy policy" ends up looking unlike the
   site it belongs to.
   
   Tokens mirror app/public/index.html. If the design system changes there,
   change it here in the same commit - see design/README.md.
   ============================================================================ */

:root {
  /* Re-themed 2026-10-05 to bl.pistevo.io's navy/gold/warm-stone scheme, same
     as app/public/index.html. navy = ground, gold = single action colour, warm
     stone = paper. Text-weight gold stays gold-deep for AA. */
  --ink-950: #070c16;
  --ink-900: #0b1220;
  --ink-800: #141a27;
  --ink-700: #121b2e;
  --ink-500: #5d6474;
  --ink-400: #a9afbe;
  --ink-300: #8b93a6;

  --ivory:   #f3f1ea;
  --ivory-2: #ebe8dd;
  --card:    #ffffff;

  --forest:     #c9a343;
  --forest-dk:  #a8861f;
  --forest-tint:#f3ebd2;

  --brass:      #c9a343;
  --brass-tint: #f3ebd2;

  --line:      #dad7cc;
  --line-dark: rgba(243,241,234,.14);

  --serif: "Newsreader", ui-serif, Georgia, "Times New Roman", serif;
  --sans:  "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  --lift-2: 0 2px 4px rgba(8,20,29,.05), 0 12px 28px -14px rgba(8,20,29,.18);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--ivory);
  color: var(--ink-800);
  font-family: var(--sans);
  font-size: 1rem;
  line-height: 1.7;
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-optical-sizing: auto;
}

.shell { width: 100%; max-width: 760px; margin-inline: auto; padding-inline: 22px; }

/* — top bar, same as the landing page — */
.topbar {
  background: var(--ink-900);
  border-bottom: 1px solid var(--line-dark);
}
.topbar .shell {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  min-height: 84px;
}
.wordmark {
  display: flex; align-items: center; gap: 10px; min-width: 0;
  font-family: var(--serif); font-size: clamp(.875rem, .72rem + .62vw, 1.125rem);
  font-weight: 500;
  letter-spacing: -.01em; color: var(--ivory); text-decoration: none;
}
.wordmark .wm-name { white-space: nowrap; }
/* The firm's mark: gold on transparent, so it needs no plate on the dark bar.
/* The firm mark at the landing page scale. The phone pill is hidden on
   mobile (the number is still in the body and contact card) so the logo
   is not squeezed; both return at 700px. */
.wm-logo { display: block; height: clamp(56px, 18vw, 68px); width: auto; }
/* The second mark — his own brand. Hidden on mobile; revealed at 700px */
/* so the two marks read as one unit, at the firm mark height to fit the bar. */
.wm-brand-logo { display: none; height: clamp(56px, 18vw, 68px); width: auto; }
.topbar-call {
  display: none; align-items: center; gap: 8px; flex: none;
  white-space: nowrap;          /* or the number breaks across three lines */
  font-size: .875rem; font-weight: 600; color: var(--ivory);
  text-decoration: none;
  padding: 8px 13px; border-radius: 999px;
  border: 1px solid var(--line-dark);
}
.topbar-call:hover { border-color: var(--brass); background: rgba(201,163,67,.14); }

/* No shrink media queries needed: the pill is hidden below 700px, so the
   logo keeps its clamp size at every phone width. */

/* — document — */
main { padding-block: 44px 64px; }

.doc-head { margin-bottom: 34px; padding-bottom: 26px; border-bottom: 1px solid var(--line); }
.kicker {
  display: flex; align-items: center; gap: 12px;
  font-size: 11.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink-500); margin: 0 0 14px;
}
.kicker::before { content: ""; width: 26px; height: 1px; background: var(--brass); }

h1 {
  font-family: var(--serif); font-optical-sizing: auto;
  font-size: clamp(1.9rem, 1.35rem + 2.4vw, 2.6rem);
  font-weight: 400; line-height: 1.1; letter-spacing: -.022em;
  color: var(--ink-950); margin: 0 0 12px; text-wrap: balance;
}
.updated { font-size: .875rem; color: var(--ink-500); margin: 0; }

h2 {
  font-family: var(--serif); font-optical-sizing: auto;
  font-size: clamp(1.35rem, 1.1rem + 1.1vw, 1.65rem);
  font-weight: 500; line-height: 1.2; letter-spacing: -.018em;
  color: var(--ink-950); margin: 40px 0 12px; text-wrap: balance;
}
h3 {
  font-family: var(--sans);
  font-size: 1.0625rem; font-weight: 600; letter-spacing: -.005em;
  color: var(--ink-950); margin: 26px 0 8px;
}
p { margin: 0 0 15px; text-wrap: pretty; }
ul, ol { margin: 0 0 15px; padding-left: 22px; }
li { margin-bottom: 8px; }
li::marker { color: var(--brass); }
strong { font-weight: 600; color: var(--ink-950); }
a { color: var(--forest); font-weight: 500; text-decoration-thickness: 1px; text-underline-offset: 2px; }
:focus-visible { outline: 2px solid var(--brass); outline-offset: 3px; border-radius: 3px; }

/* The one thing on these pages a carrier reviewer is looking for. It is
   called out rather than buried so it can be found in one glance. */
.keybox {
  background: var(--forest-tint);
  border: 1px solid #e6d9b0;
  border-left: 3px solid var(--forest);
  border-radius: 8px;
  padding: 18px 20px;
  margin: 0 0 22px;
}
.keybox p:last-child { margin-bottom: 0; }
.keybox h3 { margin-top: 0; }

.note {
  background: var(--brass-tint);
  border: 1px solid #e8dcc2;
  border-left: 3px solid var(--brass);
  border-radius: 8px;
  padding: 18px 20px;
  margin: 0 0 22px;
  font-size: .9375rem;
}
.note p:last-child { margin-bottom: 0; }

.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 20px 22px;
  margin: 0 0 22px;
  box-shadow: var(--lift-2);
}
.card p:last-child { margin-bottom: 0; }

table { width: 100%; border-collapse: collapse; margin: 0 0 20px; font-size: .9375rem; }
th, td { text-align: left; padding: 11px 12px; border-bottom: 1px solid var(--line); vertical-align: top; }
th { font-weight: 600; color: var(--ink-950); background: var(--ivory-2); }
.tw { overflow-x: auto; }

/* Placeholders that must not ship. Loud on purpose. */
.tbc {
  display: inline-block;
  background: #fde7e3; color: #7d2419;
  border: 1px dashed #c98a7d; border-radius: 4px;
  padding: 1px 7px; font-size: .875rem; font-weight: 600;
  font-family: var(--sans);
}

/* — footer, same as the landing page — */
footer {
  background: var(--ink-950);
  color: var(--ink-300);
  padding-block: 40px;
  font-size: .875rem; line-height: 1.72;
}
.f-mark { font-family: var(--serif); font-size: 1.25rem; font-weight: 400; color: var(--ivory); margin: 0 0 8px; }
.f-logo { display: block; height: 48px; width: auto; margin: 0 0 12px; }
.f-brand { display: flex; align-items: center; gap: 14px; margin: 0 0 12px; }
.f-brand > .f-logo { margin: 0; }
.f-brand-logo { display: none; height: 48px; width: auto; }
.f-meta { color: var(--ink-400); margin: 0 0 14px; }
footer .legal { max-width: 62ch; margin: 0; }
.f-links {
  display: flex; flex-wrap: wrap; gap: 10px 20px;
  margin-top: 22px; padding-top: 22px; border-top: 1px solid var(--line-dark);
}
.f-links a { color: var(--ink-300); text-decoration: none; font-weight: 400; }
.f-links a:hover { color: var(--ivory); }
.f-links [aria-current] { color: var(--ivory); font-weight: 600; }

@media (min-width: 700px) {
  .wm-logo, .wm-brand-logo { height: 52px; }
  .topbar-call { display: inline-flex; }
  .wm-brand-logo { display: block; }
  .f-brand-logo { display: block; }
  main { padding-block: 56px 80px; }
}