/* Brand tokens from the TRPL Brand repo (plugins/trpl-brand/tokens/tokens.css).
   Site palette is the approved trio Night Sky + Deep Orange + Gray Sky.
   Deep Orange is kept for things people can click. */
:root {
  --night-sky: #092A4D;
  --dark-forest: #1B4532;
  --dark-gray: #25282A;
  --sand: #D1CCBD;
  --gray-sky: #99ADC5;
  --deep-orange: #E7805D;
  --rule: #cfd6df;
  --paper: #f4f6f8;
  --font-display: "Dharma Gothic E", Impact, "Arial Narrow", sans-serif;
  --font-body: "ITC Clearface", Georgia, "Times New Roman", serif;
  --font-caption: "Frutiger Next", Arial, Helvetica, sans-serif;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--paper); color: var(--dark-gray); font-family: var(--font-body); font-size: 18px; line-height: 1.55; }
a { color: var(--night-sky); }
a:focus-visible, button:focus-visible, input:focus-visible { outline: 3px solid var(--gray-sky); outline-offset: 2px; }
.top { background: var(--night-sky); color: #fff; padding: 28px 20px 24px; }
.top .in, main { max-width: 1040px; margin: 0 auto; }
.top .logo { display: block; height: 48px; width: auto; max-width: 100%; margin: 0 0 26px; }
.top p.kicker { font-family: var(--font-caption); font-size: 13px; letter-spacing: .12em; text-transform: uppercase; color: var(--gray-sky); margin: 0 0 6px; }
.top h1 { font-family: var(--font-display); font-weight: 400; font-size: clamp(44px, 9vw, 76px); line-height: .95; letter-spacing: .01em; text-transform: uppercase; margin: 0; }
.top p.lede { max-width: 620px; margin: 12px 0 0; color: #e8ebf0; }
.top nav { margin-top: 16px; font-family: var(--font-caption); font-size: 15px; display: flex; gap: 18px; flex-wrap: wrap; }
.top nav a { color: #fff; }
.top nav a[aria-current="page"] { text-decoration: none; border-bottom: 3px solid var(--gray-sky); }
main { padding: 28px 20px 64px; }
h2 { font-family: var(--font-display); font-weight: 400; text-transform: uppercase; font-size: 38px; line-height: 1; color: var(--night-sky); margin: 40px 0 10px; }
h3 { font-family: var(--font-caption); font-size: 17px; margin: 22px 0 6px; }
.cols { display: grid; grid-template-columns: minmax(0, 480px) minmax(0, 1fr); gap: 40px; align-items: start; }
@media (max-width: 820px) { .cols { grid-template-columns: minmax(0, 1fr); gap: 8px; } }
.card { background: #fff; border: 1px solid var(--rule); border-radius: 8px; padding: 22px; }
.note { font-family: var(--font-caption); font-size: 15px; background: #fff; border-left: 4px solid var(--gray-sky); padding: 12px 14px; margin: 0 0 20px; }
ol.steps { padding-left: 22px; margin: 8px 0; }
ol.steps li { margin: 6px 0; }
pre { max-width: 100%; background: var(--dark-gray); color: #f1efe9; padding: 14px 16px; border-radius: 6px; overflow-x: auto; font-size: 14px; line-height: 1.5; }
code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .9em; }
footer { font-family: var(--font-caption); font-size: 14px; color: #5b6166; border-top: 1px solid var(--rule); margin-top: 48px; padding-top: 16px; }
table.plain { border-collapse: collapse; font-family: var(--font-caption); font-size: 15px; width: 100%; }
table.plain th, table.plain td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--rule); vertical-align: top; }