/* Inner pages of meetingwarning.app (privacy, terms, support, compare): brand book v1.1, a roadside at night. */
:root {
  color-scheme: dark;
  --warning: #FFC72C; --guide: #00704A; --night: #121418; --asphalt: #1D2025; --asphalt-2: #272B31; --line: #343941;
  --fg: #EEF0EC; --muted: #A1A7B0; --body: #C9CDD4;
  --font-text: "Barlow", Arial, sans-serif;
  --font-display: "Barlow Condensed", "Arial Narrow", sans-serif;
  --font-label: "Barlow Semi Condensed", "Arial Narrow", sans-serif;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--night); color: var(--fg); font: 18px/1.65 var(--font-text); }
a { color: var(--warning); }
:focus-visible { outline: 3px solid var(--warning); outline-offset: 3px; border-radius: 4px; }
.wrap { max-width: 820px; margin: 0 auto; padding-left: max(20px, env(safe-area-inset-left, 0px)); padding-right: max(20px, env(safe-area-inset-right, 0px)); }
.wide { max-width: 1140px; }
nav { border-bottom: 1px solid var(--line); padding-top: env(safe-area-inset-top, 0px); }
nav .wrap { max-width: 1140px; display: flex; align-items: center; gap: 22px; padding-block: 16px; flex-wrap: wrap; }
nav a.brand { display: inline-flex; align-items: center; gap: 10px; margin-right: auto; color: var(--fg); text-decoration: none; font: 800 21px/1 var(--font-display); text-transform: uppercase; }
nav a.brand img { width: 28px; height: 28px; }
nav a.link { color: var(--muted); text-decoration: none; font: 700 15px/1 var(--font-label); }
nav a.link:hover, nav a.link[aria-current="page"] { color: var(--fg); }
header.page { padding-block: 56px 8px; display: grid; gap: 12px; }
h1 { margin: 0; font: 800 clamp(44px, 8vw, 72px)/.9 var(--font-display); text-transform: uppercase; color: var(--warning); text-wrap: balance; }
.lede { color: var(--body); font-size: 20px; max-width: 62ch; }
.date { font: 700 14px/1 var(--font-label); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
article { display: grid; gap: 16px; padding-block: 24px 0; }
h2 { margin: 28px 0 0; font: 700 25px/1.2 var(--font-label); text-wrap: balance; }
h3 { margin: 8px 0 0; font: 700 20px/1.25 var(--font-label); }
p, li { color: var(--body); margin: 0; }
strong { color: var(--fg); font-weight: 600; }
ul, ol { padding-left: 1.2em; margin: 0; display: grid; gap: 8px; }
.box { background: var(--asphalt-2); border-radius: 12px; padding: 18px 20px; display: grid; gap: 10px; }
code { font: 500 15px/1 ui-monospace, "SF Mono", Menlo, monospace; color: var(--fg); }
.table-wrap { overflow-x: auto; border-radius: 12px; background: var(--asphalt-2); }
table { border-collapse: collapse; width: 100%; min-width: 720px; font-size: 16px; }
th, td { text-align: left; padding: 12px 14px; border-bottom: 1px solid var(--line); vertical-align: top; color: var(--body); }
th { font: 700 13px/1.2 var(--font-label); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
th[scope="row"] { font: 700 16px/1.3 var(--font-label); letter-spacing: 0; text-transform: none; color: var(--fg); }
tr:last-child td, tr:last-child th { border-bottom: 0; }
td.us { color: var(--fg); background: rgba(255, 199, 44, .06); }
.cta { display: inline-flex; align-items: center; gap: 10px; padding: 14px 22px; border-radius: 10px; background: var(--guide); color: #fff; text-decoration: none;
  font: 700 18px/1 var(--font-label); box-shadow: inset 0 0 0 3px var(--guide), inset 0 0 0 5px #fff; justify-self: start; }
.cta::after { content: "↗"; }
footer { margin-top: 96px; border-top: 1px solid var(--line); padding-block: 28px calc(48px + env(safe-area-inset-bottom, 0px)); color: var(--muted); font-size: 15px; }
footer .wrap { max-width: 1140px; display: flex; flex-wrap: wrap; gap: 12px 24px; }
footer span { margin-right: auto; }
footer a { color: var(--muted); }
footer a:hover { color: var(--fg); }