/* The Plumbline marketing site.
 *
 * This is the apex domain. The application lives on app.plumbline-lb.com and
 * has its own stylesheet; the two are kept apart on purpose
 * (docs/06-COMPLIANCE.md), but they share a palette, because a prospect who
 * signs up should not feel handed over to a different company.
 *
 * The interface rules in docs/04-FRONTEND.md hold here too. Colour is spent
 * only where it carries meaning, and it is never the only carrier: every
 * state in the screenshots below is also named in words.
 *
 * There is no analytics and no third-party script on this site, which is why
 * there is no cookie banner. If that ever changes, the banner is required.
 */

:root {
  color-scheme: light dark;

  /* Shared with the application. Keep in step with web/static/plumbline.css. */
  --bg: #fbfbfa;
  --surface: #ffffff;
  --border: #e4e2dd;
  --text: #1c1b19;
  --muted: #6b6862;

  --ok: #1a6b3c;
  --ok-bg: #eef7f1;
  --bad: #9c2a1e;
  --bad-bg: #fdf0ee;
  --ours: #6b5a1a;
  --ours-bg: #fbf6e7;
  --accent: #1f4b8f;

  /* Marketing only. A quieter second surface, for banding sections apart
     without drawing a hard line across the page. */
  --sunken: #f4f3f0;
  --ink-inverse: #ffffff;

  --radius: 8px;
  --radius-lg: 14px;
  --measure: 38rem;
  --page: 70rem;

  --sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --serif: ui-serif, Georgia, "Times New Roman", serif;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #16161a;
    --surface: #1e1e23;
    --border: #32323a;
    --text: #ececf0;
    --muted: #9c9ca6;

    --ok: #6fd39b;
    --ok-bg: #12261b;
    --bad: #ff9c8d;
    --bad-bg: #2a1512;
    --ours: #e0c76a;
    --ours-bg: #262010;
    --accent: #8fb4ee;

    --sunken: #1a1a1f;
    --ink-inverse: #16161a;
  }
}

* { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  /* The header is sticky, so an anchor jump must stop short of it or
     the heading it jumped to lands underneath. */
  scroll-padding-top: 5rem;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 17px/1.6 var(--sans);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { letter-spacing: -0.022em; line-height: 1.18; margin: 0; }
p { margin: 0; }

a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 2px; }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 3px;
}

.skip {
  position: absolute; left: -9999px; top: 0;
  background: var(--surface); color: var(--text);
  padding: 0.7rem 1rem;
  border: 1px solid var(--border);
  border-radius: 0 0 var(--radius) 0;
  z-index: 10;
}
.skip:focus { left: 0; }

/* ---------------------------------------------------------------- layout */

.wrap {
  max-width: var(--page);
  margin: 0 auto;
  padding-inline: 1.5rem;
}

section { padding-block: clamp(3.5rem, 8vw, 6rem); }
section.banded { background: var(--sunken); }
section.ruled { border-top: 1px solid var(--border); }

.measure { max-width: var(--measure); }
/* A section that is nothing but a column of prose centres that column,
   rather than leaving half a wide screen empty beside it. */
.measure.solo { margin-inline: auto; }
.centred { margin-inline: auto; text-align: center; }

.eyebrow {
  font-size: 0.78rem; font-weight: 700; letter-spacing: 0.09em;
  text-transform: uppercase; color: var(--muted);
  margin-bottom: 0.9rem;
}

h2.section-title {
  font-size: clamp(1.5rem, 3.4vw, 2rem);
  margin-bottom: 0.85rem;
}

.lede {
  color: var(--muted);
  font-size: 1.05rem;
}

/* Spacing and emphasis, named rather than set inline, because the site is
   served under a Content-Security-Policy that forbids inline styles. */
.big { font-size: 1.08rem; }
.stack-sm { margin-top: 1.15rem; }
.stack-md { margin-top: 1.6rem; }
.stack-lg { margin-top: 2.2rem; }
.closer { margin-top: 2.5rem; font-size: 1.05rem; }
.footer-mark { margin-bottom: 0.8rem; }

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

header.site {
  position: sticky; top: 0; z-index: 5;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
}
header.site .wrap {
  display: flex; align-items: center; gap: 1.25rem;
  padding-block: 0.8rem;
}

.wordmark {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-weight: 700; font-size: 1.08rem; letter-spacing: -0.02em;
  color: var(--text); text-decoration: none;
}
.wordmark svg { display: block; }

header.site nav {
  margin-left: auto;
  display: flex; align-items: center; gap: 1.4rem;
  font-size: 0.93rem;
}
header.site nav a.plain { color: var(--muted); text-decoration: none; }
header.site nav a.plain:hover { color: var(--text); }

@media (max-width: 54rem) {
  header.site nav .hide-narrow { display: none; }
}

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

.button {
  display: inline-block;
  font: inherit; font-size: 0.97rem; font-weight: 650;
  padding: 0.62rem 1.15rem;
  border: 1px solid var(--accent);
  border-radius: 7px;
  background: var(--accent);
  color: var(--ink-inverse);
  text-decoration: none;
  white-space: nowrap;
  transition: opacity 0.15s ease;
}
.button:hover { opacity: 0.88; }
.button.quiet { background: transparent; color: var(--accent); }
.button.large { font-size: 1.05rem; padding: 0.8rem 1.5rem; }

.cta-row {
  display: flex; flex-wrap: wrap; gap: 0.9rem 1.1rem;
  align-items: center;
  margin-top: 1.9rem;
}
.centred .cta-row { justify-content: center; }

.cta-note {
  font-size: 0.9rem; color: var(--muted);
  margin-top: 1rem;
}

/* ------------------------------------------------------------------ hero */

.hero {
  padding-top: clamp(3rem, 7vw, 5.5rem);
  padding-bottom: clamp(3.5rem, 8vw, 6rem);
}

.hero h1 {
  font-size: clamp(2.1rem, 6vw, 3.4rem);
  max-width: 17ch;
  margin-inline: auto;
}
.hero .sub {
  font-size: clamp(1.05rem, 2.2vw, 1.22rem);
  color: var(--muted);
  margin: 1.1rem auto 0;
  max-width: 40rem;
}

.hero-shot { margin-top: clamp(2.5rem, 6vw, 4rem); }

/* ------------------------------------------- the application, illustrated */

/* A faithful rendering of the real overview screen, built from the same
   markup and the same palette rather than a picture of it, so that it stays
   legible at any width and in either theme. Nothing here claims to be a
   customer: the agency and the client names are invented, and the caption
   underneath says so. */

.frame {
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04), 0 12px 32px -12px rgba(0, 0, 0, 0.16);
}

.frame-bar {
  display: flex; align-items: center; gap: 0.5rem;
  padding: 0.65rem 0.9rem;
  border-bottom: 1px solid var(--border);
  background: var(--sunken);
}
.dot { width: 10px; height: 10px; border-radius: 50%; background: var(--border); }
.frame-url {
  margin-left: 0.6rem;
  font-family: var(--mono); font-size: 0.76rem; color: var(--muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.app { font-size: 0.93rem; }

.app-bar {
  display: flex; align-items: center; gap: 1rem;
  padding: 0.7rem 1.1rem;
  border-bottom: 1px solid var(--border);
}
.app-bar strong { font-size: 0.97rem; letter-spacing: -0.01em; }
.app-bar .links {
  margin-left: auto; display: flex; gap: 0.95rem;
  font-size: 0.82rem; color: var(--muted);
}
@media (max-width: 44rem) { .app-bar .links { display: none; } }

.app-body { padding: 1.15rem 1.1rem 1.4rem; }
.app-body h3 { font-size: 1.2rem; margin-bottom: 0.3rem; }
.app-body .summary { color: var(--muted); font-size: 0.9rem; margin-bottom: 1.1rem; }
.app-body h4 {
  font-size: 0.82rem; font-weight: 650; color: var(--muted);
  margin: 1.35rem 0 0.6rem;
}

.row {
  display: flex; align-items: flex-start; gap: 1rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0.75rem 0.9rem;
  margin-bottom: 0.45rem;
  background: var(--surface);
}
.row .grow { flex: 1; min-width: 0; }
.row .name { font-weight: 650; }
.row .client { color: var(--muted); font-weight: 400; }
.row .url {
  font-family: var(--mono); font-size: 0.78rem; color: var(--muted);
  overflow-wrap: anywhere; margin-top: 0.1rem;
}
.row .reason { margin-top: 0.45rem; font-size: 0.9rem; }
.row .reason.quiet { color: var(--muted); font-size: 0.85rem; }

.state {
  display: inline-flex; align-items: center; gap: 0.4rem;
  font-size: 0.7rem; font-weight: 700; letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 0.2rem 0.5rem; border-radius: 999px;
  white-space: nowrap;
}
.state-ok   { color: var(--ok);   background: var(--ok-bg); }
.state-bad  { color: var(--bad);  background: var(--bad-bg); }
.state-ours { color: var(--ours); background: var(--ours-bg); }
.state-idle { color: var(--muted); background: transparent; border: 1px solid var(--border); }

.shot-caption {
  font-size: 0.85rem; color: var(--muted);
  margin-top: 0.9rem; text-align: center;
}

/* --------------------------------------------------------------- columns */

.grid {
  display: grid;
  gap: 1.5rem;
  margin-top: 2.5rem;
}
.grid.three { grid-template-columns: repeat(3, 1fr); }
.grid.two   { grid-template-columns: repeat(2, 1fr); }

@media (max-width: 58rem) {
  .grid.three, .grid.two { grid-template-columns: 1fr; gap: 1.1rem; }
}

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.35rem 1.4rem;
}
.card h3 { font-size: 1.02rem; margin-bottom: 0.45rem; }
.card p { color: var(--muted); font-size: 0.97rem; }

/* The problem scenarios. No icons: the sentence is the point. */
.scenario { border-left: 2px solid var(--bad); padding-left: 1.1rem; }
.scenario h3 { font-size: 1.02rem; margin-bottom: 0.4rem; }
.scenario p { color: var(--muted); font-size: 0.97rem; }

/* ------------------------------------------------------------ steps, list */

ol.steps {
  counter-reset: step;
  list-style: none;
  padding: 0;
  margin: 2.5rem 0 0;
  display: grid; gap: 1.5rem;
  grid-template-columns: repeat(3, 1fr);
}
@media (max-width: 58rem) { ol.steps { grid-template-columns: 1fr; gap: 1.25rem; } }

ol.steps li { counter-increment: step; }
ol.steps li::before {
  content: counter(step);
  display: flex; align-items: center; justify-content: center;
  width: 1.9rem; height: 1.9rem; margin-bottom: 0.8rem;
  border: 1px solid var(--border); border-radius: 50%;
  font-size: 0.85rem; font-weight: 700; color: var(--muted);
  font-variant-numeric: tabular-nums;
}
ol.steps h3 { font-size: 1.02rem; margin-bottom: 0.4rem; }
ol.steps p { color: var(--muted); font-size: 0.97rem; }

ul.plain { list-style: none; padding: 0; margin: 2rem 0 0; display: grid; gap: 1.1rem; }
ul.plain li {
  display: grid; grid-template-columns: 1.4rem 1fr; gap: 0.6rem;
  align-items: start;
}
ul.plain .mark { color: var(--muted); font-weight: 700; line-height: 1.5; }
ul.plain p { color: var(--muted); font-size: 0.97rem; margin-top: 0.2rem; }
ul.plain strong { font-weight: 650; }

/* -------------------------------------------------------- the report shot */

/* The report is a document, so it is shown as one: serif, on paper, never in
   dark mode. What an agency sees in the application is exactly this. */
.paper {
  background: #fff;
  color: #17171a;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 2rem 2.1rem 2.2rem;
  font-family: var(--serif);
  font-size: 0.94rem; line-height: 1.6;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04), 0 14px 34px -14px rgba(0, 0, 0, 0.22);
  --brand: #2f6f4f;
  --p-muted: #5f5f68;
  --p-rule: #e2e0dc;
}
.paper .masthead {
  border-bottom: 3px solid var(--brand);
  padding-bottom: 0.9rem; margin-bottom: 1.5rem;
}
.paper .agency {
  font-family: var(--sans); font-weight: 700; font-size: 1.12rem;
  color: var(--brand); letter-spacing: -0.01em;
}
.paper h3 { font-size: 1.25rem; margin: 0.8rem 0 0.15rem; font-weight: 600; }
.paper .period { color: var(--p-muted); margin: 0; font-size: 0.9rem; }
.paper .headline {
  background: #faf9f7; border-left: 3px solid var(--brand);
  padding: 0.85rem 1rem; margin: 0 0 1.6rem; font-size: 1rem;
}
.paper h4 {
  font-family: var(--sans); font-size: 0.72rem; text-transform: uppercase;
  letter-spacing: 0.08em; color: var(--p-muted); font-weight: 600;
  margin: 1.6rem 0 0.7rem; border-bottom: 1px solid var(--p-rule);
  padding-bottom: 0.35rem;
}
.paper .incident {
  background: #fdf1ef; border-radius: 6px; padding: 0.8rem 0.95rem;
}
.paper .incident .what { font-weight: 600; margin-bottom: 0.3rem; }
.paper .incident .times { font-size: 0.82rem; color: var(--p-muted); margin-top: 0.35rem; }
.paper table { width: 100%; border-collapse: collapse; font-size: 0.86rem; }
.paper th, .paper td {
  text-align: left; padding: 0.35rem 0.5rem; border-bottom: 1px solid var(--p-rule);
}
.paper th {
  font-family: var(--sans); font-size: 0.68rem; text-transform: uppercase;
  letter-spacing: 0.05em; color: var(--p-muted); font-weight: 600;
}
.paper td.num { text-align: right; font-variant-numeric: tabular-nums; }
.paper td.bad { color: #9c2a1e; font-weight: 600; }
.paper .addr {
  font-family: var(--mono); font-size: 0.76rem; color: var(--p-muted);
  margin-bottom: 0.5rem; overflow-wrap: anywhere;
}
.paper .note {
  font-size: 0.84rem; color: var(--p-muted);
  border-top: 1px solid var(--p-rule); padding-top: 0.85rem; margin-top: 1.6rem;
}

.report-layout {
  display: grid; gap: clamp(2rem, 5vw, 3.5rem);
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1fr);
  align-items: start;
  margin-top: 2.5rem;
}
@media (max-width: 62rem) {
  .report-layout { grid-template-columns: 1fr; }
}

/* --------------------------------------------------------------- pricing */

.price-table {
  width: 100%; border-collapse: collapse;
  margin-top: 1.9rem;
  font-variant-numeric: tabular-nums;
}
.price-table th, .price-table td {
  text-align: left; padding: 0.72rem 0.8rem;
  border-bottom: 1px solid var(--border);
}
.price-table th {
  font-size: 0.76rem; text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--muted); font-weight: 650;
}
.price-table th.rate, .price-table td.rate { text-align: right; }
.price-table td.rate { font-weight: 650; }
.price-table caption {
  caption-side: bottom; text-align: left; color: var(--muted);
  font-size: 0.88rem; padding-top: 0.9rem;
}

.pull {
  border-left: 2px solid var(--accent);
  padding-left: 1.2rem;
  font-size: 1.1rem;
  margin-top: 2rem;
}

/* ------------------------------------------------------------------- faq */

.faq { margin-top: 2.2rem; border-top: 1px solid var(--border); }
.faq details { border-bottom: 1px solid var(--border); }
.faq summary {
  cursor: pointer; list-style: none;
  padding: 1.05rem 2rem 1.05rem 0;
  font-weight: 650;
  position: relative;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+";
  position: absolute; right: 0.2rem; top: 50%; transform: translateY(-50%);
  color: var(--muted); font-weight: 400; font-size: 1.3rem; line-height: 1;
}
.faq details[open] summary::after { content: "\2212"; }
.faq .answer { color: var(--muted); padding: 0 2rem 1.2rem 0; }

/* --------------------------------------------------------------- closing */

.closing { text-align: center; }
.closing h2 {
  font-size: clamp(1.7rem, 4vw, 2.3rem);
  max-width: 20ch; margin-inline: auto;
}
/* text-align does not centre a flex row, and the buttons are a flex row. */
.closing .cta-row { justify-content: center; }

/* ------------------------------------------------------ interior pages */

/* Every page other than the landing page opens the same way: an eyebrow, a
   heading and a standfirst, then a rule, then the prose. Sameness is the
   point — a visitor should always know where they are on the page. */

.page-head { padding-bottom: clamp(2rem, 4vw, 3rem); }
/* The rule under the page header already separates it from the prose,
   so the section below it does not need a full section's padding too. */
.page-head + .ruled { padding-top: clamp(2.5rem, 5vw, 3.5rem); }
.page-head h1 {
  font-size: clamp(1.9rem, 4.6vw, 2.7rem);
  max-width: 20ch;
}
.page-head .lede { margin-top: 1.1rem; font-size: 1.1rem; }
.page-head .eyebrow a { color: inherit; text-decoration: none; }
.page-head .eyebrow a:hover { text-decoration: underline; }

header.site nav a.plain.current { color: var(--text); font-weight: 650; }

.post-meta { color: var(--muted); font-size: 0.92rem; margin-top: 0.9rem; }

/* --------------------------------------------------------------- prose */

/* Long-form text. Spacing is set on the elements themselves rather than by
   utility classes, because prose is the one place where the rhythm should
   come out right without anyone thinking about it. */

.prose > * + * { margin-top: 1.15rem; }

.prose h2 {
  font-size: 1.32rem;
  margin-top: 3rem;
  padding-top: 0;
}
.prose h3 {
  font-size: 1.08rem;
  margin-top: 2.2rem;
}
.prose h2 + p, .prose h3 + p { margin-top: 0.8rem; }
.prose > h2:first-child, .prose > p:first-child { margin-top: 0; }

.prose a { color: var(--accent); }

.prose code {
  font-family: var(--mono);
  font-size: 0.87em;
  background: var(--sunken);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 0.08em 0.34em;
  overflow-wrap: anywhere;
}

.prose blockquote {
  margin: 1.6rem 0;
  padding: 0.2rem 0 0.2rem 1.25rem;
  border-left: 2px solid var(--border);
  color: var(--muted);
  font-size: 1.02rem;
}

.prose .aside {
  color: var(--muted);
  font-size: 0.95rem;
  border-left: 2px solid var(--border);
  padding-left: 1.1rem;
}

.prose .address { font-style: normal; line-height: 1.7; }

/* Lists. A tick and a cross are decoration; the sentence carries the
   meaning, and the marks are hidden from assistive technology. */

.prose ul.ticks, .prose ul.crosses, .prose ul.posts {
  list-style: none;
  padding: 0;
  margin-top: 1.15rem;
}
.prose ul.ticks > li, .prose ul.crosses > li {
  position: relative;
  padding-left: 1.6rem;
  margin-top: 0.7rem;
}
.prose ul.ticks > li::before,
.prose ul.crosses > li::before {
  position: absolute;
  left: 0;
  top: 0;
  font-weight: 700;
}
.prose ul.ticks > li::before { content: "¹3"; color: var(--ok); }
.prose ul.crosses > li::before { content: "d7"; color: var(--bad); font-size: 1.15em; line-height: 1.35; }

.prose ol.numbered {
  padding-left: 1.3rem;
  margin-top: 1.15rem;
}
.prose ol.numbered > li { margin-top: 0.8rem; padding-left: 0.3rem; }

/* A term and its explanation. Used wherever the page is really a list of
   things that each need a paragraph. */
.prose dl.detail { margin-top: 1.6rem; }
.prose dl.detail dt {
  font-weight: 650;
  margin-top: 1.7rem;
  padding-bottom: 0.45rem;
  border-bottom: 1px solid var(--border);
}
.prose dl.detail dd {
  margin: 0.75rem 0 0;
  color: var(--muted);
}
.prose dl.detail dd > * + * { margin-top: 0.75rem; }

/* The writing index. */
.prose ul.posts > li + li {
  margin-top: 2.5rem;
  padding-top: 2.5rem;
  border-top: 1px solid var(--border);
}
.prose ul.posts h2 { margin-top: 0; font-size: 1.28rem; }
.prose ul.posts h2 a { text-decoration: none; }
.prose ul.posts h2 a:hover { text-decoration: underline; }
.prose ul.posts p { margin-top: 0.7rem; }

/* Notices. Same three states as the application, same rule: colour plus
   words, never colour alone. */
.notice {
  border-radius: var(--radius);
  border: 1px solid var(--border);
  padding: 1rem 1.15rem;
  font-size: 0.97rem;
}
.notice-ok  { background: var(--ok-bg);  border-color: transparent; color: var(--ok); }
.notice-bad { background: var(--bad-bg); border-color: transparent; color: var(--bad); }
.notice a { color: inherit; }

.prose .price-table { margin-top: 0; }
.prose .faq { margin-top: 1.6rem; }
.prose .cta-row { margin-top: 2.5rem; }

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

footer.site {
  border-top: 1px solid var(--border);
  padding-block: 3rem 3.5rem;
  color: var(--muted);
  font-size: 0.92rem;
}
footer.site .cols {
  display: grid;
  gap: 2.5rem 3rem;
  grid-template-columns: minmax(0, 2fr) repeat(3, minmax(0, 1fr));
}
@media (max-width: 62rem) {
  footer.site .cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  footer.site .about { grid-column: 1 / -1; }
}
footer.site .about { max-width: 30rem; }
footer.site .foot-nav h2 {
  font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.07em;
  color: var(--text); font-weight: 650; margin-bottom: 0.9rem;
}
footer.site .foot-nav ul { list-style: none; padding: 0; margin: 0; }
footer.site .foot-nav li + li { margin-top: 0.55rem; }
footer.site .foot-nav a { text-decoration: none; }
footer.site .foot-nav a:hover { color: var(--text); text-decoration: underline; }
footer.site a { color: var(--muted); }
footer.site .legal {
  margin-top: 2.5rem; padding-top: 1.4rem;
  border-top: 1px solid var(--border);
  font-size: 0.86rem;
}

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

@media print {
  header.site, .cta-row, .frame-bar { display: none; }
  body { background: #fff; color: #000; }
  section { padding-block: 1.5rem; }
}