/* ============================================================
   Percision Marketing Studio — sub-brand section.
   Layered on /tools/tools.css, which owns the palette and the
   base type. Only what these pages add lives here.

   The argument these pages make is "here is the thing, working".
   So the screenshots are the design: full-bleed, unclipped, with
   the chrome that proves they are a real application and not an
   illustration. Everything else stays quiet around them.
   ============================================================ */

.wrap { max-width: 1100px; }

/* ── sub-brand lockup, same shape as /ai-cmo/ ───────────────── */
.subbrand { display: flex; align-items: center; gap: 9px; }
.subbrand .mark { font-weight: 800; font-size: 20px; letter-spacing: -.02em; color: var(--text); }
.subbrand .mark .p1 { color: var(--per); }
.subbrand .mark .p2 { color: var(--cision); }
.subbrand .unit {
  font-size: 11px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase;
  color: var(--per); border: 1px solid var(--line-3); border-radius: 6px; padding: 3px 8px;
  white-space: nowrap;
}

.secnav { display: flex; gap: 18px; flex-wrap: wrap; padding: 12px 0 4px; border-bottom: 1px solid var(--line); margin-bottom: 8px; }
.secnav a { font-size: 14px; color: var(--text-dim); }
.secnav a.on { color: var(--text); font-weight: 700; }

/* ── hero ───────────────────────────────────────────────────── */
.hero { padding: 26px 0 8px; }
.hero h1 { max-width: 15ch; }
.hero .lede { font-size: 18px; max-width: 58ch; }
.hero .cta-row { display: flex; gap: 12px; flex-wrap: wrap; margin: 22px 0 8px; align-items: center; }
.hero .cta-note { font-size: 13px; color: var(--text-mute); }

/* ── the screenshot: the page's main argument ───────────────── */
figure.shot { margin: 0 0 34px; }
figure.shot img {
  width: 100%; height: auto; display: block;
  border: 1px solid var(--line-2); border-radius: var(--r);
  background: #02050E;
  box-shadow: 0 40px 90px -40px rgba(34,211,238,.30), 0 16px 40px -20px rgba(167,139,250,.24);
}
figure.shot figcaption {
  font-size: 13.5px; color: var(--text-mute); line-height: 1.55;
  margin-top: 12px; max-width: 76ch;
}
figure.shot figcaption b { color: var(--text-dim); font-weight: 600; }

figure.shot.lead { margin: 26px 0 12px; }
figure.shot.lead img { border-color: var(--line-3); }

/* A shot that sits beside its explanation rather than under it. */
.shot-row { display: grid; gap: 22px; align-items: center; margin: 34px 0; }
@media (min-width: 900px) {
  /* The screenshot always takes the wider track. Reversing with `order` alone
     put the flipped rows' image in the 1fr column, so alternating rows showed
     the product at two different sizes down the page — the same object, resized
     for no reason the reader can see. Swap the template, not just the order. */
  .shot-row { grid-template-columns: 1.25fr 1fr; }
  .shot-row.flip { grid-template-columns: 1fr 1.25fr; }
  .shot-row.flip > figure { order: 2; }
}
.shot-row h3 { margin: 0 0 8px; font-size: 19px; letter-spacing: -.01em; }
.shot-row p { margin: 0 0 10px; color: var(--text-dim); font-size: 15px; line-height: 1.6; }
.shot-row p:last-child { margin-bottom: 0; }
.shot-row figure.shot { margin: 0; }

/* ── headings ───────────────────────────────────────────────── */
h2 { font-size: 25px; letter-spacing: -.015em; margin: 46px 0 10px; }
h2 + .sectionlede { color: var(--text-dim); font-size: 16px; max-width: 66ch; margin: 0 0 18px; }
h3 { font-size: 16px; margin: 24px 0 6px; }

/* ── the honest-numbers strip ───────────────────────────────── */
.truth {
  border: 1px solid var(--line-2); background: var(--bg-1); border-radius: var(--r);
  padding: 18px 20px; margin: 24px 0 34px;
  font-size: 15px; color: var(--text-dim); line-height: 1.62;
}
.truth b { color: var(--text); }

/* ── discipline grid ────────────────────────────────────────── */
.disciplines { display: grid; grid-template-columns: repeat(auto-fit, minmax(215px, 1fr)); gap: 12px; margin: 14px 0 8px; }
.disciplines > div { border: 1px solid var(--line); background: var(--bg-1); border-radius: var(--r-sm); padding: 14px 16px; }
.disciplines h4 { margin: 0 0 5px; font-size: 14.5px; color: var(--text); }
.disciplines p { margin: 0; font-size: 13.5px; color: var(--text-mute); line-height: 1.5; }

/* ── how it works ───────────────────────────────────────────── */
.steps { counter-reset: s; padding: 0; margin: 12px 0 30px; list-style: none; }
.steps li { counter-increment: s; position: relative; padding: 0 0 20px 44px; border-left: 1px solid var(--line-2); margin-left: 13px; }
.steps li:last-child { border-left-color: transparent; padding-bottom: 0; }
.steps li::before {
  content: counter(s); position: absolute; left: -13px; top: 0; width: 26px; height: 26px;
  border-radius: 50%; background: var(--bg-2); border: 1px solid var(--line-3); color: var(--per);
  font-size: 12px; font-weight: 800; display: flex; align-items: center; justify-content: center;
}
.steps b { display: block; color: var(--text); font-size: 15.5px; margin-bottom: 3px; }
.steps span { color: var(--text-dim); font-size: 14.5px; line-height: 1.56; }

/* ── guardrail chain ────────────────────────────────────────── */
.chain { display: flex; flex-wrap: wrap; gap: 7px; align-items: center; margin: 12px 0 10px; }
.chain span {
  font-size: 12.5px; border: 1px solid var(--line-2); border-radius: 7px;
  padding: 5px 11px; color: var(--text-dim); background: var(--bg-1);
}
.chain i { font-style: normal; color: var(--text-mute); font-size: 13px; }

/* ── connectors ─────────────────────────────────────────────── */
.stack { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0 30px; }
.stack span { font-size: 12.5px; border: 1px solid var(--line-2); border-radius: 999px; padding: 4px 11px; color: var(--text-dim); }

/* ── comparison ─────────────────────────────────────────────── */
table.plain { width: 100%; border-collapse: collapse; font-size: 14.5px; margin: 14px 0 30px; }
table.plain th, table.plain td { text-align: left; padding: 11px 13px; border-bottom: 1px solid var(--line); vertical-align: top; }
table.plain th { font-size: 11.5px; text-transform: uppercase; letter-spacing: .07em; color: var(--text-mute); font-weight: 800; }
table.plain td.k { color: var(--text); font-weight: 600; }
table.plain td { color: var(--text-dim); }
.tablewrap { overflow-x: auto; }

/* ── FAQ ────────────────────────────────────────────────────── */
.faq { margin: 12px 0 30px; }
.faq details { border-bottom: 1px solid var(--line); padding: 13px 0; }
.faq summary { cursor: pointer; font-size: 15.5px; color: var(--text); font-weight: 600; list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::before { content: "+ "; color: var(--per); font-weight: 800; }
.faq details[open] summary::before { content: "– "; }
.faq p { margin: 9px 0 0; color: var(--text-dim); font-size: 14.5px; line-height: 1.62; max-width: 74ch; }

/* ── closing CTA ────────────────────────────────────────────── */
.cta-band { border: 1px solid var(--line-3); background: var(--bg-2); border-radius: var(--r-lg); padding: 28px; margin: 40px 0 10px; }
.cta-band h3 { margin: 0 0 8px; font-size: 22px; }
.cta-band p { color: var(--text-dim); margin: 0 0 16px; font-size: 15.5px; max-width: 62ch; }

.note { font-size: 13.5px; color: var(--text-mute); margin-top: 8px; }
.crosslinks { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(215px, 1fr)); margin: 26px 0; }
.crosslinks a { display: block; background: var(--bg-1); border: 1px solid var(--line-2); border-radius: var(--r); padding: 16px; color: var(--text); font-weight: 600; font-size: 14.5px; }
.crosslinks a:hover { border-color: var(--line-3); text-decoration: none; }
.crosslinks a span { display: block; color: var(--text-mute); font-weight: 400; font-size: 12.5px; margin-top: 4px; }

@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }