/* Wingman · Sectional — website stylesheet.
   Tokens are the app's (design/sectional/DESIGN.md, design/sectional/mockups-source/sectional.css):
   light from `.sc`, night from `.sc.dark`. Shared by the public site and, later, the admin site. */

/* ---------- Fonts (self-hosted, SIL OFL — see ../fonts/OFL.txt) ---------- */
@font-face { font-family: "Archivo Narrow"; font-weight: 600; font-display: swap; src: url("../fonts/ArchivoNarrow-SemiBold.ttf") format("truetype"); }
@font-face { font-family: "Archivo Narrow"; font-weight: 700; font-display: swap; src: url("../fonts/ArchivoNarrow-Bold.ttf") format("truetype"); }
@font-face { font-family: "Public Sans"; font-weight: 400; font-display: swap; src: url("../fonts/PublicSans-Regular.ttf") format("truetype"); }
@font-face { font-family: "Public Sans"; font-weight: 700; font-display: swap; src: url("../fonts/PublicSans-Bold.ttf") format("truetype"); }

/* ---------- Tokens ---------- */
:root {
  color-scheme: light dark;
  --paper: #FBFBF8; --panel: #FFFFFF; --tint: #F3EEE0; --ink: #1A1A1A; --ink2: #4A4A4A; --rule: #D8D3C4;
  --blue: #1F5AA6; --blueBg: #E2ECF7; --onBlue: #FFFFFF; --accent: #A3410F; --accentBg: #FBE6DA;
  --green: #2F6B3A; --greenBg: #DCEBD5; --grey: #55595E; --greyBg: #E8E6E0; --sky: #0F5E73; --skyBg: #DDEFF3;
  --caution: #6E4600; --cautionBg: #F3E5C6; --danger: #B3261E; --dangerBg: #FBE3E1;
  --band: #F1ECDD; --checkA: #1A1A1A; --checkB: #FFFFFF;
  --display: "Archivo Narrow", "Arial Narrow", sans-serif;
  --body: "Public Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --page: 1120px; --read: 760px;
}
@media (prefers-color-scheme: dark) {
  :root {
    --paper: #10151C; --panel: #18202A; --tint: #1C232D; --ink: #EDEFF2; --ink2: #B0B8C2; --rule: #2A3340;
    --blue: #8AB8F2; --blueBg: #16263D; --onBlue: #0A1420; --accent: #F2A27A; --accentBg: #3D2318;
    --green: #8FD39A; --greenBg: #16301E; --grey: #B0B8C2; --greyBg: #232B35; --sky: #7FD0E0; --skyBg: #12303A;
    --caution: #F0CF8E; --cautionBg: #3B3020; --danger: #FF8A80; --dangerBg: #3A1A1A;
    --band: #151B23; --checkA: #EDEFF2; --checkB: #10151C;
  }
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 400 16px/1.5 var(--body); }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--blue); }
a:focus-visible, summary:focus-visible, .btn:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; }
h1, h2, h3 { font-family: var(--display); font-weight: 700; line-height: 1.1; margin: 0; }
p { margin: 0 0 12px; }
.skip { position: absolute; left: -9999px; }
.skip:focus { left: 16px; top: 16px; background: var(--panel); padding: 8px 12px; z-index: 10; }

/* ---------- The checkered top edge ---------- */
.checker { height: 8px; background: repeating-linear-gradient(90deg, var(--checkA) 0 16px, var(--checkB) 16px 32px); border-bottom: 1px solid var(--checkA); }

/* ---------- Header and nav ---------- */
.site-header { border-bottom: 1px solid var(--rule); }
.site-header .inner { max-width: var(--page); margin: 0 auto; padding: 14px 24px; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.brand { display: inline-flex; align-items: center; gap: 8px; font: 700 20px/1 var(--display); color: var(--ink); text-decoration: none; }
.brand svg { color: var(--blue); width: 18px; height: 18px; }
.site-nav { display: flex; gap: 20px; }
.site-nav a { color: var(--ink); text-decoration: none; font-weight: 700; font-size: 14px; padding: 6px 0; border-bottom: 2px solid transparent; }
.site-nav a[aria-current="page"] { color: var(--blue); border-bottom-color: var(--blue); }

/* ---------- Footer ---------- */
.site-footer { border-top: 2px solid var(--ink); margin-top: 64px; }
.site-footer .inner { max-width: var(--page); margin: 0 auto; padding: 24px 24px 40px; display: flex; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.site-footer p { color: var(--ink2); font-size: 13px; max-width: 420px; margin: 8px 0 0; }
.site-footer nav { display: flex; gap: 18px; flex-wrap: wrap; align-items: flex-start; }
.site-footer nav a { color: var(--ink); text-decoration: none; font-weight: 700; font-size: 13px; }

/* ---------- Type helpers ---------- */
.kicker { font: 700 13px/1.2 var(--display); letter-spacing: .12em; text-transform: uppercase; color: var(--accent); margin: 0 0 8px; }
.h-display { font-size: clamp(40px, 6vw, 64px); line-height: 1.02; }
.h-page { font-size: clamp(36px, 5vw, 48px); line-height: 1.05; margin-bottom: 8px; }
.lead { font-size: 18px; color: var(--ink2); max-width: 560px; }
.meta-line { font: 700 12px/1.2 var(--display); letter-spacing: .1em; text-transform: uppercase; color: var(--ink2); margin-bottom: 28px; }
.sec-h { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; border-bottom: 2px solid var(--ink); padding-bottom: 6px; margin: 36px 0 14px; }
.sec-h h2 { font-size: 24px; }
.sec-h .count { font: 700 12px/1 var(--display); letter-spacing: .1em; text-transform: uppercase; color: var(--ink2); }
.muted { color: var(--ink2); }
.small { font-size: 13px; }

/* ---------- Layout ---------- */
.wrap { max-width: var(--page); margin: 0 auto; padding: 0 24px; }
.band { background: var(--band); }
.band-pad { padding: 48px 0; }
.doc { max-width: var(--page); margin: 0 auto; padding: 40px 24px 0; display: grid; grid-template-columns: 200px minmax(0, var(--read)); gap: 48px; }
.rail { position: sticky; top: 24px; align-self: start; border-left: 2px solid var(--ink); padding: 2px 0 2px 16px; }
.rail .kicker { color: var(--ink2); font-size: 11px; }
.rail a { display: block; color: var(--ink); text-decoration: none; font-size: 13px; padding: 4px 0; }
.page section { scroll-margin-top: 16px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 32px; }

/* ---------- Components ---------- */
.card { background: var(--panel); border: 1px solid var(--rule); border-radius: 8px; padding: 18px; }
.card h3 { font-size: 20px; margin-bottom: 8px; }
.card .num { font: 700 26px/1 var(--display); color: var(--accent); margin-right: 8px; }
.btn { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 10px 16px; border-radius: 8px; border: 1px solid var(--blue); background: var(--panel); color: var(--blue); font: 700 15px/1 var(--body); text-decoration: none; }
.btn-primary { background: var(--blue); color: var(--onBlue); }
.btn[aria-disabled="true"] { cursor: default; }
.pill { display: inline-flex; align-items: center; gap: 6px; padding: 3px 8px; border-radius: 6px; font-size: 13px; font-weight: 700; margin: 3px 0; }
.pill--green { background: var(--greenBg); color: var(--green); }
.pill--accent { background: var(--accentBg); color: var(--accent); }
.pill--blue { background: var(--blueBg); color: var(--blue); }
.pill--grey { background: var(--greyBg); color: var(--grey); }
.pill--sky { background: var(--skyBg); color: var(--sky); }
.pill--caution { background: var(--cautionBg); color: var(--caution); }
.pills { display: flex; flex-direction: column; align-items: flex-start; margin-top: 10px; }
.callout-caution { background: var(--cautionBg); color: var(--caution); border: 1px solid var(--caution); border-radius: 6px; padding: 10px 12px; font-size: 14px; }
.disclaimer-box { display: flex; gap: 16px; align-items: flex-start; border: 1px solid var(--ink); border-radius: 8px; padding: 16px 18px; background: var(--panel); margin-top: 24px; }
.disclaimer-box .tag { flex: none; font: 700 11px/1 var(--display); letter-spacing: .1em; text-transform: uppercase; border: 1px solid var(--ink); border-radius: 4px; padding: 6px 8px; }
.disclaimer-box p { margin: 0; }
.note { border: 1px dashed var(--rule); border-radius: 8px; padding: 14px 16px; color: var(--ink2); font-size: 14px; background: var(--panel); }
.contact-card { background: var(--panel); border: 1px solid var(--rule); border-radius: 8px; padding: 18px; }
.contact-card .addr { font-weight: 700; font-size: 18px; display: inline-block; margin: 8px 0 4px; }
.tiles { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.tile { display: flex; align-items: center; gap: 10px; background: var(--panel); border: 1px solid var(--rule); border-radius: 6px; padding: 10px 12px; font-size: 14px; font-weight: 700; }
.tile svg { width: 18px; height: 18px; color: var(--ink2); flex: none; }
ol.steps { padding-left: 22px; }
ol.steps li { margin-bottom: 10px; }
ul.erased { padding-left: 20px; }

/* ---------- FAQ (details/summary, no script) ---------- */
.faq details { border-bottom: 1px solid var(--rule); }
.faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: 12px; padding: 14px 0; font-weight: 700; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "›"; color: var(--blue); font-size: 20px; line-height: 1; transition: transform .15s; }
.faq details[open] summary::after { transform: rotate(90deg); }
.faq details > div { padding: 0 0 14px; color: var(--ink); }

/* ---------- Home ---------- */
.hero { display: grid; grid-template-columns: 1.1fr .9fr; gap: 40px; align-items: center; padding: 56px 0; }
.hero .accent { color: var(--blue); }
.hero .actions { display: flex; gap: 12px; flex-wrap: wrap; margin: 24px 0 8px; }
.phone { border: 1px solid var(--rule); border-radius: 28px; overflow: hidden; background: var(--paper); box-shadow: 0 8px 28px rgba(0, 0, 0, .14); max-width: 300px; margin: 0 auto; }
/* Show the top of each screen, as the PDF does; the full screenshot is 390 × 1500. */
.phone img { width: 100%; height: auto; aspect-ratio: 390 / 640; object-fit: cover; object-position: top; }
.hero .phone img { aspect-ratio: 390 / 660; }
.phones { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.phones figure { margin: 0; }
.phones figcaption { margin-top: 10px; font-size: 14px; }
.phones figcaption b { display: block; font-family: var(--display); font-size: 17px; }
.closing { text-align: center; padding: 56px 0 8px; }
.closing img { width: 72px; margin: 0 auto 16px; border-radius: 16px; }
.closing h2 { font-size: clamp(30px, 4vw, 40px); }

/* ---------- Phone width ---------- */
@media (max-width: 767px) {
  .site-header .inner { flex-direction: column; align-items: flex-start; gap: 8px; padding: 12px 16px; }
  .wrap, .doc, .site-footer .inner { padding-left: 16px; padding-right: 16px; }
  .doc { grid-template-columns: 1fr; gap: 24px; padding-top: 24px; }
  .rail { position: static; }
  .hero, .grid-3, .grid-2, .phones { grid-template-columns: 1fr; }
  .hero { padding: 32px 0; }
  .site-footer .inner { flex-direction: column; }
  .disclaimer-box { flex-direction: column; }
}