/* 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; }
}


/* ---- oneappcamp.com theme ---- */
/* oneappcamp.com — paper and pine.
   Deliberately unlike both theoneapp.camp (black, Poppins) and theoneapp.net (which is that same
   black on purpose). Two domains that look identical give a reader nothing to tell them apart,
   and give a reputation problem on one an easy resemblance to the other. */

:root {
  --display: Fraunces, Georgia, "Times New Roman", serif;
  --body: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --h1-w: 600;
  --h2-w: 600;

  --bg: #fbf8f2;
  --bg-top: #ffffff;
  --band: #f2eee4;
  --card: #ffffff;
  --foot: #16352a;

  --ink: #1b2420;
  --ink2: #3b4742;
  --dim: #6a756f;
  --foot-ink: #e7efe9;
  --foot-dim: #9db3a7;

  --line: #e2dccd;
  --line-strong: #cfc6b1;
  --foot-line: #27483b;

  --accent: #1d4634;
  --on-accent: #ffffff;
  --link: #1d4634;
}

h1, h2 { font-optical-sizing: auto; }

.hero { padding-top: 48px; padding-bottom: 44px; }
.hero h1 { max-width: 18ch; }
.hero .lede { max-width: 58ch; }

/* The question the email asks, set as the thing it is. */
.ask {
  font: 600 clamp(26px, 6vw, 42px)/1.2 var(--display);
  letter-spacing: -0.018em; color: var(--accent); margin: 0 0 18px; max-width: 20ch;
}

/* The offer card. One on the page, repeated once at the bottom, and nowhere else. */
.offer {
  background: var(--accent); color: #fff; border-radius: var(--r);
  padding: 28px 24px; margin: 30px 0 0;
}
.offer h2, .offer h3 { color: #fff; }
.offer p { color: #d9e7df; }
.offer .btn { background: #fff; color: var(--accent); border-color: #fff; }
.offer .btn.ghost { background: transparent; color: #fff; border-color: #6d9a85; }
.offer .terms {
  display: flex; flex-wrap: wrap; gap: 8px 20px; margin: 18px 0 0; padding: 0;
  list-style: none; font: 500 14px/1.4 var(--body); color: #c6ddd2;
}

/* The before/after pair. Stacks on a phone; sits side by side from 620px. */
.swap { display: grid; gap: 14px; margin: 26px 0 0; }
.swap > div { border: 1px solid var(--line); border-radius: var(--r); padding: 22px; background: var(--card); }
.swap .now { background: #f6f1e6; }
.swap h3 { font-size: 17px; }
.swap ul { margin: 0; padding-left: 20px; font-size: 15.5px; color: var(--ink2); }
.swap li { margin-bottom: 7px; }

@media (min-width: 620px) {
  .swap { grid-template-columns: 1fr 1fr; }
}

@media (min-width: 860px) {
  .hero { padding-top: 84px; padding-bottom: 72px; }
  .offer { padding: 38px 36px; }
}

/* The brand mark is a pale blue outline drawn for a black background. On paper it is legible but
   weak, so on this site it sits on its own dark chip rather than being redrawn — the logo is the
   company's and is not ours to alter. */
.brand {
  background: var(--foot); padding: 7px 11px; border-radius: 9px;
}
.brand img { height: 24px; }