/* get.verityhq.app / get-dev.verityhq.app
   The Sector3 Software look, matching sector3software.ca (its colourguide.md and Tailwind setup):
   white and gray-50 sections, Deep Navy headings and footer, Slate Grey body text, Growth Green
   accents, Impact Orange (deepened for contrast) buttons, Montserrat headings and Open Sans body.
   Every text colour here passes WCAG AA (4.5:1) on the background it sits on. */

:root {
  --navy: #2C4B6B;          /* Primary: Deep Navy */
  --green: #86B847;         /* Secondary: Growth Green, accents only */
  --green-ink: #4f7a1c;     /* green for small text on white (AA) */
  --blue: #5B9BD5;          /* Action: Trust Blue, borders and fills */
  --blue-ink: #2F6FA8;      /* Trust Blue for text on white (AA) */
  --orange: #F19137;        /* Highlight: Impact Orange */
  --orange-btn: #BB560A;    /* Impact Orange deepened so white button text passes AA (4.7:1) */
  --orange-hover: #A44B08;
  --orange-ink: #9a4f0a;    /* orange for small text on light orange */
  --orange-tint: #fdf1e5;
  --body: #666666;          /* Neutral: Slate Grey */
  --muted: #707070;         /* small print, AA on white and gray-50 */
  --ink: #333333;
  --canvas: #ffffff;
  --alt: #f9fafb;           /* Tailwind gray-50 */
  --line: #e5e7eb;          /* Tailwind gray-200 */
  --line-strong: #d1d5db;
  --ok: #107c10;
  --bad: #b10e1c;
  --shadow: 0 10px 15px -3px rgba(0,0,0,.1), 0 4px 6px -4px rgba(0,0,0,.1);

  --display: "Montserrat", system-ui, sans-serif;
  --sans: "Open Sans", system-ui, "Segoe UI", Helvetica, Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;

  --wrap: 1280px;           /* same as sector3software.ca's container */
  --gut: 24px;
}
@media (min-width: 640px) { :root { --gut: 32px; } }
@media (min-width: 1024px) { :root { --gut: 48px; } }

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 24px; }

body {
  margin: 0;
  background: var(--canvas);
  color: var(--body);
  font: 400 17px/1.65 var(--sans);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { font-family: var(--display); color: var(--navy); font-weight: 700; line-height: 1.15; text-wrap: balance; }

img { max-width: 100%; }
[hidden] { display: none !important; }

a { color: var(--blue-ink); text-underline-offset: 3px; }
a:hover { color: var(--navy); }
code { font-family: var(--mono); font-size: 0.9em; color: var(--ink); }

:where(a, button, input, textarea, select, summary):focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 3px;
  border-radius: 4px;
}

.shell { max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gut); }

.skip {
  position: absolute; left: -9999px;
  background: #fff; color: var(--navy);
  padding: 0.75rem 1rem; z-index: 50; font-weight: 600;
}
.skip:focus { left: 1rem; top: 1rem; }

/* ---- channel notice (the dev host injects it in place of <!--CHANNEL-->) ---- */
.channel { background: var(--orange-tint); border-bottom: 1px solid var(--orange); color: var(--ink); font-size: 0.875rem; line-height: 1.45; }
.channel .shell { padding-block: 0.7rem; display: flex; gap: 0.5rem 1rem; flex-wrap: wrap; align-items: baseline; }
.channel b { font-weight: 700; color: var(--orange-ink); }

/* ---- header: the same white bar as sector3software.ca ---- */
.mast { background: #fff; border-bottom: 1px solid var(--line); }
.mast .shell { display: flex; align-items: center; justify-content: space-between; gap: 1rem 2rem; min-height: 80px; flex-wrap: wrap; padding-block: 0.5rem; }
.mast .brand { display: flex; align-items: center; gap: 14px; text-decoration: none; }
.mast .brand img { height: 44px; width: auto; display: block; }
@media (min-width: 768px) { .mast .brand img { height: 52px; } }
.mast .brand span { font: 600 14px/1.2 var(--sans); color: var(--body); border-left: 1px solid var(--line); padding-left: 14px; }
.mast nav { display: flex; align-items: center; flex-wrap: wrap; gap: 0.5rem 28px; }
.mast nav a:not(.btn) { color: var(--body); text-decoration: none; font: 600 14px/1.25 var(--sans); padding-block: 6px; }
.mast nav a:not(.btn):hover, .mast nav a[aria-current] { color: var(--blue-ink); }
.mast nav .btn { padding: 12px 24px; font-size: 14px; }

/* ---- page title: the navy band used on sector3software.ca's inner pages ---- */
.hero { background: var(--navy); color: #fff; text-align: center; }
.hero .shell { padding-block: clamp(56px, 8vw, 88px); }
.hero h1 { color: #fff; font-size: clamp(34px, 4.6vw, 48px); margin: 0 auto; max-width: 20ch; }
.hero .sub { margin: 20px auto 0; max-width: 46rem; font-size: clamp(18px, 1.6vw, 20px); line-height: 1.55; color: rgba(255,255,255,.9); }
.hero .sub-alt { display: inline-block; margin-top: 14px; font-size: 16px; font-weight: 600; color: #fff; text-underline-offset: 4px; }
.hero .sub-alt:hover { color: var(--green); }

/* ---- buttons, as on sector3software.ca ---- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  background: var(--orange-btn); color: #fff;
  font: 600 15px/1.25 var(--sans); letter-spacing: .025em;
  padding: 16px 32px; border: 0; border-radius: 8px;
  text-decoration: none; cursor: pointer; box-shadow: 0 4px 6px -1px rgba(0,0,0,.1);
  transition: background-color .3s;
}
.btn:hover { background: var(--orange-hover); color: #fff; }
.btn[disabled] { opacity: 0.55; cursor: progress; }
.btn-quiet { background: transparent; color: var(--blue-ink); border: 2px solid var(--blue); box-shadow: none; padding: 14px 30px; }
.btn-quiet:hover { background: var(--blue); color: #fff; }

/* ---- the two ways to start ---- */
.paths { background: var(--alt); }
.paths .shell { padding-block: clamp(48px, 7vw, 80px); display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); gap: 24px; }
.path { background: #fff; border-top: 4px solid var(--navy); box-shadow: var(--shadow); padding: clamp(24px, 3.5vw, 40px); display: flex; flex-direction: column; }
.path h2 { margin: 0 0 10px; font-size: clamp(24px, 2.4vw, 30px); }
.path p { margin: 0 0 24px; max-width: 46ch; }
.path .num { font-size: 14px; font-weight: 600; color: var(--body); display: block; margin-bottom: 8px; }
.path .btn { margin-top: auto; align-self: flex-start; }

/* ---- sections ---- */
.band { background: #fff; }
.band.alt, .hosted { background: var(--alt); }
.band .shell, .hosted .shell { padding-block: clamp(56px, 8vw, 96px); }
.band h2, .hosted h2 { font-size: clamp(28px, 3.2vw, 40px); margin: 0 0 16px; max-width: 26ch; }
.band .intro, .hosted .intro { font-size: 18px; max-width: 62ch; margin: 0 0 clamp(28px, 4vw, 44px); }
.eyebrow { font-size: 14px; font-weight: 600; color: var(--body); margin: 0 0 10px; }

/* ---- terminal one-liner ---- */
.cmd { display: flex; align-items: stretch; border: 1px solid var(--line-strong); border-radius: 8px; background: var(--alt); overflow: hidden; }
.cmd code { font-size: 14px; line-height: 1.5; padding: 14px 16px; overflow-x: auto; white-space: pre; flex: 1; min-width: 0; }
.cmd button {
  font: 600 14px/1 var(--sans); border: 0; border-left: 1px solid var(--line-strong);
  background: #fff; color: var(--blue-ink); padding-inline: 20px; cursor: pointer; flex: none;
}
.cmd button:hover { background: var(--blue); color: #fff; }
.cmd button[data-done="1"] { color: var(--ok); }

/* ---- numbered steps: green numerals, like the pricing promise on sector3software.ca ---- */
.steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); gap: 32px; counter-reset: s; }
.step { display: grid; grid-template-columns: 2.25rem 1fr; column-gap: 12px; }
.step::before { counter-increment: s; content: counter(s); font: 700 28px/1 var(--display); color: var(--green-ink); grid-row: span 2; }
.step h3 { margin: 0 0 6px; font-size: 19px; }
.step p { margin: 0; font-size: 16px; }

/* ---- facts lists ---- */
dl.facts { margin: 0; display: grid; gap: 20px; }
dl.facts dt { font: 700 16px/1.3 var(--display); color: var(--navy); margin-bottom: 4px; }
dl.facts dd { margin: 0; font-size: 16px; }
dl.facts-wide { grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); gap: 24px; }
dl.facts-wide > div { background: #fff; border-top: 4px solid var(--navy); padding: 24px; box-shadow: var(--shadow); }
dl.facts-wide dt { font-size: 19px; margin-bottom: 8px; }

/* ---- questions (docker page) ---- */
.faq { max-width: 48rem; border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { cursor: pointer; list-style: none; padding: 18px 2.5rem 18px 0; position: relative; font: 700 18px/1.35 var(--display); color: var(--navy); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 0.25rem; top: 14px; font: 700 24px/1 var(--display); color: var(--green-ink); }
.faq details[open] summary::after { content: "\2212"; }
.faq details p { margin: 0 0 18px; max-width: 44rem; }

/* ---- downloads ---- */
.dl-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); gap: 24px; }
.dl { background: #fff; border-top: 4px solid var(--navy); box-shadow: var(--shadow); padding: clamp(24px, 3.5vw, 36px); display: flex; flex-direction: column; }
.dl .os { font: 700 24px/1.2 var(--display); color: var(--navy); margin: 0 0 6px; }
.dl .file { font-family: var(--mono); font-size: 13px; color: var(--muted); margin: 0 0 20px; word-break: break-all; }
.dl p { margin: 0 0 24px; font-size: 16px; }
.dl .btn { margin-top: auto; align-self: flex-start; }
.dl.planned { background: var(--alt); box-shadow: none; border-top-color: var(--line-strong); }

/* ---- callout: says the awkward thing before the visitor hits it ---- */
.callout { margin-top: 32px; padding: 20px 24px; background: var(--orange-tint); border-left: 4px solid var(--orange); max-width: 70ch; }
.callout .callout-title { margin: 0 0 8px; font: 700 18px/1.3 var(--display); color: var(--orange-ink); }
.callout p { margin: 0 0 10px; font-size: 16px; color: var(--ink); }
.callout p:last-child { margin-bottom: 0; }

/* ---- contact form, as on sector3software.ca's Contact page ---- */
.form-wrap { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(32px, 5vw, 64px); }
@media (min-width: 60rem) { .form-wrap { grid-template-columns: 0.85fr 1.15fr; } }
form.contact { display: grid; gap: 20px; }
.row { display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); }
.field { display: grid; gap: 6px; }
.field label { font-size: 14px; font-weight: 600; color: var(--navy); }
.field .hint { display: block; font-weight: 400; color: var(--muted); }
.field input, .field textarea, .field select {
  font: 400 16px/1.4 var(--sans); padding: 12px 16px;
  background: #fff; color: var(--ink);
  border: 2px solid var(--line); border-radius: 8px; width: 100%;
}
.field input:focus, .field textarea:focus, .field select:focus { border-color: var(--blue); outline: none; }
.field textarea { min-height: 8rem; resize: vertical; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.note { padding: 14px 16px; font-size: 15px; border-left: 4px solid var(--line-strong); background: var(--alt); color: var(--ink); }
.note[data-tone="ok"] { border-color: var(--green); background: #f3f8ec; }
.note[data-tone="bad"] { border-color: var(--bad); background: #fdf3f4; color: var(--bad); }

/* ---- footer: the navy footer from sector3software.ca ---- */
footer.foot { background: var(--navy); color: rgba(255,255,255,.85); font-size: 16px; }
footer.foot .shell { padding-block: 64px 0; }
footer.foot .cols { display: grid; gap: 40px; grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr)); padding-bottom: 48px; }
@media (max-width: 900px) { footer.foot .cols { grid-template-columns: repeat(2, minmax(0, 1fr)); } footer.foot .cols > :first-child { grid-column: 1 / -1; } }
footer.foot .name { font: 700 24px/1.2 var(--display); color: #fff; margin: 0 0 12px; }
footer.foot .name span { color: var(--green); }
footer.foot p { margin: 0 0 8px; }
footer.foot h2 { font-size: 14px; color: #fff; margin: 0 0 14px; }
footer.foot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
footer.foot a { color: rgba(255,255,255,.85); text-decoration: none; display: inline-block; padding-block: 3px; overflow-wrap: anywhere; }
footer.foot a:hover { color: #fff; text-decoration: underline; }
footer.foot .legal { border-top: 1px solid rgba(255,255,255,.15); padding-block: 28px; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 32px; font-size: 14px; color: rgba(255,255,255,.75); }
footer.foot .legal a { color: rgba(255,255,255,.75); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}