/* The outreach domains — shared base.
   Structure, rhythm and the responsive rules only. Every colour and every typeface comes from
   the site's own theme.css, which build.mjs concatenates onto the end of this file. That is what
   lets two sites share a layout without reading as the same page.

   Mobile first, because most of the measured paid traffic is on a phone. Nothing in here may
   produce horizontal scroll at 375px. */

:root {
  --wrap: 1120px;
  --gut: 20px;
  --r: 14px;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 400 17px/1.65 var(--body);
  -webkit-font-smoothing: antialiased;
  overflow-wrap: break-word;
}

img { max-width: 100%; height: auto; display: block; }
a { color: var(--link); }

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 99;
  background: var(--accent); color: var(--on-accent);
  padding: 12px 18px; border-radius: 0 0 var(--r) 0; font-weight: 600;
}
.skip:focus { left: 0; }

.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gut); }

/* ---------------------------------------------------------------- header */

.top { border-bottom: 1px solid var(--line); background: var(--bg-top); }
.top-row {
  display: flex; align-items: center; gap: 14px;
  flex-wrap: wrap; padding-top: 14px; padding-bottom: 14px;
}
.brand { flex: 0 0 auto; line-height: 0; }
.brand img { height: 30px; width: auto; }
.top nav {
  order: 3; flex: 1 0 100%;
  display: flex; gap: 18px; flex-wrap: wrap;
  font: 500 15px/1 var(--body);
  padding-top: 12px; border-top: 1px solid var(--line);
}
.top nav a { color: var(--dim); text-decoration: none; }
.top nav a:hover, .top nav a[aria-current] { color: var(--ink); text-decoration: underline; }
.top-call {
  margin-left: auto; font: 600 15px/1 var(--body);
  color: var(--ink); text-decoration: none; white-space: nowrap;
}
.top-call:hover { color: var(--accent); }

/* ---------------------------------------------------------------- blocks */

section { padding: 48px 0; }
section.band { background: var(--band); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }

h1 {
  font: var(--h1-w) clamp(31px, 7.4vw, 52px)/1.1 var(--display);
  letter-spacing: -0.022em; margin: 0 0 18px; color: var(--ink);
}
h2 {
  font: var(--h2-w) clamp(24px, 5.2vw, 34px)/1.22 var(--display);
  letter-spacing: -0.016em; margin: 0 0 14px; color: var(--ink);
}
h3 { font: 600 19px/1.35 var(--display); margin: 0 0 8px; color: var(--ink); }
p { margin: 0 0 16px; }
.lede { font-size: clamp(18px, 2.4vw, 21px); line-height: 1.55; color: var(--ink2); }
.kick {
  font: 600 12px/1 var(--body); letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--accent); margin: 0 0 14px;
}
.narrow { max-width: 68ch; }
.dim { color: var(--dim); }
.small { font-size: 15px; }

/* ---------------------------------------------------------------- buttons */

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 14px 24px; border-radius: 999px; text-decoration: none;
  font: 600 16px/1 var(--body); border: 1.5px solid var(--accent);
  background: var(--accent); color: var(--on-accent);
}
.btn:hover { filter: brightness(1.08); }
.btn.ghost { background: transparent; color: var(--ink); border-color: var(--line-strong); }
.btn.ghost:hover { border-color: var(--accent); color: var(--accent); filter: none; }
.acts { display: flex; flex-wrap: wrap; gap: 12px; margin: 22px 0 0; }

/* ---------------------------------------------------------------- cards */

.cards { display: grid; gap: 16px; margin: 26px 0 0; }
.card {
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--r); padding: 22px;
}
.card h3 { margin-bottom: 6px; }
.card p:last-child { margin-bottom: 0; }

/* The department list: what one system actually holds. Plain, countable, no decoration. */
.depts { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line);
  border-radius: var(--r); overflow: hidden; margin: 26px 0 0; }
.dept { background: var(--card); padding: 18px 20px; }
.dept b { display: block; font: 600 16px/1.4 var(--display); color: var(--ink); margin-bottom: 3px; }
.dept span { font-size: 15px; color: var(--dim); }

/* A fact row: short, checkable statements. */
.facts { list-style: none; margin: 24px 0 0; padding: 0; display: grid; gap: 12px; }
.facts li { padding-left: 26px; position: relative; color: var(--ink2); }
.facts li::before {
  content: ""; position: absolute; left: 0; top: 9px; width: 11px; height: 11px;
  border-radius: 3px; background: var(--accent);
}

.quote {
  border-left: 3px solid var(--accent); padding: 4px 0 4px 20px; margin: 26px 0 0;
}
.quote p { font: 500 clamp(18px, 2.6vw, 22px)/1.5 var(--display); color: var(--ink); }
.quote cite { font-style: normal; font-size: 15px; color: var(--dim); }

.callout {
  background: var(--band); border: 1px solid var(--line-strong);
  border-radius: var(--r); padding: 24px; margin: 28px 0 0;
}
.callout p:last-child { margin-bottom: 0; }

/* ---------------------------------------------------------------- legal pages */

.legal h2 { margin-top: 38px; font-size: clamp(21px, 3.6vw, 26px); }
.legal h2:first-of-type { margin-top: 0; }
.legal ul { padding-left: 20px; }
.legal li { margin-bottom: 8px; }
.legal .updated { font-size: 15px; color: var(--dim); }
.toc { margin: 0 0 34px; padding: 20px 22px; background: var(--card);
  border: 1px solid var(--line); border-radius: var(--r); }
.toc h2 { font: 600 12px/1 var(--body) !important; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--dim); margin: 0 0 12px !important; }
.toc ol { margin: 0; padding-left: 20px; font-size: 15px; }
.toc li { margin-bottom: 6px; }

/* ---------------------------------------------------------------- footer */

.foot { background: var(--foot); color: var(--foot-ink); padding: 44px 0 30px; }
.foot a { color: var(--foot-ink); }
.foot-grid { display: grid; gap: 30px; }
.foot-logo { height: 28px; width: auto; margin-bottom: 14px; }
.foot-line { color: var(--foot-dim); max-width: 40ch; font-size: 15px; margin: 0; }
.foot-nav { display: grid; gap: 10px; font-size: 15px; align-content: start; }
.foot-contact h2 { font: 600 12px/1 var(--body); letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--foot-dim); margin: 0 0 12px; }
.foot-contact a { display: block; margin-bottom: 8px; font-size: 15px; }
.foot-contact address { font-style: normal; font-size: 15px; color: var(--foot-dim); margin-top: 12px; }
.foot-legal {
  margin: 34px 0 0; padding-top: 20px; border-top: 1px solid var(--foot-line);
  font-size: 13.5px; color: var(--foot-dim);
}
.foot-legal a { color: var(--foot-dim); }

/* ---------------------------------------------------------------- wider screens */

@media (min-width: 620px) {
  .cards { grid-template-columns: repeat(2, 1fr); }
  .acts .btn { min-width: 190px; }
}

@media (min-width: 860px) {
  :root { --gut: 28px; }
  section { padding: 72px 0; }
  /* Mobile puts the nav on its own row below the logo (order 3); from here it sits inline, so it
     goes back in front of the phone number and the phone number keeps the right-hand edge. */
  .top nav {
    order: 0; flex: 0 1 auto; border-top: 0; padding-top: 0;
    margin-left: 24px; gap: 24px;
  }
  .top-call { order: 1; }
  .cards.three { grid-template-columns: repeat(3, 1fr); }
  .depts { grid-template-columns: repeat(2, 1fr); }
  .foot-grid { grid-template-columns: 1.6fr 1fr 1fr; }
}

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}


/* ---- theoneapp.net theme ---- */
/* theoneapp.net — the brand's own black.
   This domain carries the product's exact name, so looking like the product is correct here. */

:root {
  --display: Poppins, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --body: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --h1-w: 800;
  --h2-w: 700;

  --bg: #000000;
  --bg-top: #000000;
  --band: #0c0e11;
  --card: #0e1115;
  --foot: #06070a;

  --ink: #ffffff;
  --ink2: #c9d0da;
  --dim: #8b94a3;
  --foot-ink: #d8dee7;
  --foot-dim: #79818f;

  --line: #1d2229;
  --line-strong: #2d343e;
  --foot-line: #1a1f26;

  --accent: #2fb67c;
  --on-accent: #04130c;
  --link: #6fd3a6;
}

/* The hero sits straight on the black with a single hairline under it — no gradient, no
   photograph. Nothing here should look like it is trying to sell; it is a statement of fact. */
.hero { padding-top: 56px; padding-bottom: 56px; }
.hero h1 { max-width: 16ch; }
.hero .lede { max-width: 56ch; }

/* The one place colour is used as emphasis rather than decoration. */
.hero h1 em { font-style: normal; color: var(--accent); }

.card { box-shadow: none; }
.dept b { color: #ffffff; }

@media (min-width: 860px) {
  .hero { padding-top: 92px; padding-bottom: 80px; }
}