/* Instill sites — shared tokens and layout.
   InstillCore: harbour blue. InstillHire pages set body[data-brand="hire"]
   and take the copper accent. Instill BI reuses the core palette. */
:root {
  --ground: #F5F7F9; --paper: #FFFFFF;
  --ink: #1B2430; --ink-2: #4A5563; --ink-3: #7A8492;
  --rule: #DDE3E9; --rule-soft: #ECF0F4;
  --accent: #1F5F8B; --accent-ink: #FFFFFF; --accent-soft: #E3EEF6;
  --serif: "Source Serif 4", Georgia, "Times New Roman", serif;
  --sans: "Source Sans 3", "Segoe UI", system-ui, -apple-system, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, Menlo, Consolas, monospace;
  --wrap: 1120px;
}
body[data-brand="hire"] { --accent: #B8672E; --accent-soft: #F7EADF; }
@media (prefers-color-scheme: dark) {
  :root {
    --ground: #0F151C; --paper: #161E27; --ink: #E6EAEE; --ink-2: #B4BDC7; --ink-3: #7F8A97;
    --rule: #2A3542; --rule-soft: #1F2933; --accent: #6FB1E0; --accent-ink: #0F151C; --accent-soft: #1A2E3F;
  }
  body[data-brand="hire"] { --accent: #E09A63; --accent-soft: #3A2A1E; }
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--ground); color: var(--ink); font-family: var(--sans); font-size: 17px; line-height: 1.55; }
a { color: var(--accent); text-underline-offset: 2px; }
a:focus-visible, button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.skip { position: absolute; left: -999px; } .skip:focus { left: 12px; top: 12px; background: var(--paper); padding: 8px 12px; }
.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 20px; }
h1, h2, h3 { font-family: var(--serif); text-wrap: balance; line-height: 1.15; margin: 0; }
h1 { font-size: clamp(2rem, 4.5vw, 3rem); font-weight: 700; letter-spacing: -0.01em; }
h2 { font-size: 1.65rem; font-weight: 700; }
h3 { font-size: 1.2rem; font-weight: 600; }
h4 { font-family: var(--sans); font-size: 0.78rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); margin: 0 0 8px; }
p { margin: 0; max-width: 66ch; }
ul, ol { margin: 0; padding-left: 1.2em; }
li { max-width: 66ch; }
code { font-family: var(--mono); font-size: 0.88em; }

/* header */
.site-header { background: var(--paper); border-bottom: 1px solid var(--rule); }
.site-header .wrap { display: flex; align-items: center; gap: 24px; min-height: 64px; }
.mark { font-family: var(--serif); font-weight: 700; font-size: 1.25rem; color: var(--ink); text-decoration: none; }
body[data-brand="hire"] .mark { color: var(--accent); }
.site-header nav { display: flex; gap: 18px; flex-wrap: wrap; }
.site-header nav a { color: var(--ink-2); text-decoration: none; font-weight: 500; }
.site-header nav a[aria-current="page"], .site-header nav a:hover { color: var(--ink); }
.site-header .actions { margin-left: auto; display: flex; gap: 10px; align-items: center; }
.btn, .btn-quiet { display: inline-block; padding: 9px 16px; border-radius: 4px; text-decoration: none; font-weight: 600; }
.btn { background: var(--accent); color: var(--accent-ink); }
.btn-quiet { color: var(--ink-2); border: 1px solid var(--rule); background: var(--paper); }
@media (max-width: 760px) { .site-header nav { display: none; } }

/* page structure */
main { display: flex; flex-direction: column; gap: 56px; padding: 48px 20px 80px; }
.hero { display: flex; flex-direction: column; gap: 16px; max-width: 760px; }
.hero .kicker { font-size: 0.8rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent); font-weight: 600; }
.hero .lede { font-size: 1.2rem; color: var(--ink-2); }
.hero .cta { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 8px; }
section { display: flex; flex-direction: column; gap: 16px; }
.grid { display: grid; grid-template-columns: 1fr; gap: 16px; }
@media (min-width: 720px) { .grid.two { grid-template-columns: 1fr 1fr; } .grid.three { grid-template-columns: repeat(3, 1fr); } }
.card { background: var(--paper); border: 1px solid var(--rule); padding: 20px 22px; display: flex; flex-direction: column; gap: 8px; }
.card h3 { font-size: 1.05rem; }
.card p { font-size: 0.97rem; color: var(--ink-2); }
.callout { background: var(--paper); border: 1px solid var(--rule); border-left: 4px solid var(--accent); padding: 16px 20px; }
.todo { border: 1px dashed var(--ink-3); color: var(--ink-3); padding: 10px 14px; font-size: 0.9rem; border-radius: 4px; }
.todo::before { content: "Draft: "; font-weight: 600; }
.tablewrap { overflow-x: auto; background: var(--paper); border: 1px solid var(--rule); }
table { border-collapse: collapse; width: 100%; font-size: 0.95rem; }
th, td { text-align: left; vertical-align: top; padding: 10px 14px; border-top: 1px solid var(--rule-soft); }
thead th { border-top: 0; font-size: 0.74rem; letter-spacing: 0.07em; text-transform: uppercase; color: var(--ink-3); background: var(--rule-soft); }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.prose { display: flex; flex-direction: column; gap: 14px; max-width: 70ch; }
.prose h2 { margin-top: 12px; }
.prose ol, .prose ul { display: flex; flex-direction: column; gap: 6px; }
form.plain { display: grid; gap: 14px; max-width: 520px; }
form.plain label { display: flex; flex-direction: column; gap: 4px; font-size: 0.9rem; font-weight: 600; }
form.plain input, form.plain select, form.plain textarea { font: inherit; padding: 9px 11px; border: 1px solid var(--rule); border-radius: 4px; background: var(--paper); color: var(--ink); }

/* footer */
.site-footer { border-top: 1px solid var(--rule); background: var(--paper); padding: 40px 0; font-size: 0.92rem; }
.site-footer .cols { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
@media (min-width: 720px) { .site-footer .cols { grid-template-columns: repeat(4, 1fr); } }
.site-footer ul { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.site-footer a { color: var(--ink-2); text-decoration: none; } .site-footer a:hover { color: var(--ink); }
.fine { margin-top: 28px; color: var(--ink-3); font-size: 0.85rem; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }