/* ============================================================
   OUTCOMES — shares global.css / header.css / footer.css
   ============================================================ */

.oc-eyebrow{font-family:var(--mono);font-weight:500;font-size:12px;letter-spacing:0.06em;text-transform:uppercase;opacity:0.6;display:block;margin-bottom:16px;}
.oc-head{max-width:680px;margin-bottom:44px;}
.oc-head h2{margin:0 0 16px;}
.oc-head p{font-size:16px;line-height:1.6;color:var(--text-dim-paper);margin:0;max-width:62ch;}
.oc-head.on-ink p{color:var(--text-dim-ink);}
.oc-close{font-size:16px;font-weight:600;margin-top:28px;}

/* ---------- 01 HERO — Paper-100, flat ---------- */
.oc-hero{background:var(--paper-100);padding:64px 0 88px;}
.oc-hero-grid{display:grid;grid-template-columns:1.1fr 0.9fr;gap:48px;align-items:start;}
.oc-hero h1{margin:18px 0 20px;max-width:16ch;}
.oc-hero .statement{font-size:20px;font-weight:700;margin-bottom:16px;}
.oc-hero .lede{max-width:54ch;}
.oc-hero .btnrow{margin-top:28px;}
.oc-panel{background:var(--ink-900);color:var(--paper-100);padding:22px 24px;}
.oc-panel-head{font-family:var(--mono);font-size:11px;letter-spacing:0.05em;color:var(--text-dim-ink);border-bottom:1px solid var(--line-on-ink);padding-bottom:12px;margin-bottom:6px;text-transform:uppercase;}
.oc-panel-row{display:flex;align-items:baseline;gap:10px;padding:11px 0;border-bottom:1px solid var(--line-on-ink);font-family:var(--mono);font-size:15px;}
.oc-panel-row:last-child{border-bottom:none;}
.oc-panel-row .mark{color:#80B5FF;flex-shrink:0;}

/* ---------- 02 THE OUTCOME IS MORE THAN CODE — Paper-200, no motifs ---------- */
.oc-bundle{background:var(--paper-200);}
.oc-bundle-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--paper-400);border:1px solid var(--paper-400);margin-top:40px;}
.oc-bundle-cell{background:var(--paper-200);padding:24px;}
.oc-bundle-cell h3{margin-bottom:8px;}
.oc-bundle-cell p{font-size:15px;color:var(--text-dim-paper);margin:0;line-height:1.55;}

/* ---------- 03 THE SPECIFICATION IS THE UNIT OF WORK — Paper-300 ---------- */
.oc-unit{background:var(--paper-300);}
.oc-contrast{border:1px solid var(--paper-400);background:#ffffff;padding:26px 28px;margin-top:12px;max-width:640px;}
.oc-old{display:flex;flex-wrap:wrap;gap:10px 18px;margin-bottom:18px;padding-bottom:18px;border-bottom:1px dashed var(--paper-400);}
.oc-old span{font-family:var(--mono);font-size:15px;color:var(--text-dim-paper);text-decoration:line-through;text-decoration-color:var(--fuchsia-700);text-decoration-thickness:2px;opacity:0.6;}
.oc-new{font-size:19px;font-weight:700;}
.oc-model{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--paper-400);border:1px solid var(--paper-400);margin-top:36px;}
.oc-model-cell{background:#ffffff;padding:24px;}
.oc-model-cell img{width:28px;height:28px;margin-bottom:14px;}
.oc-model-cell p{margin:0;font-size:16px;font-weight:600;line-height:1.4;}

/* ---------- 04 WHAT ENTERS, WHAT COMES OUT — Ink-900 + glyph-trace-ink ---------- */
.oc-inout{
  background:var(--ink-900);color:var(--paper-100);
  background-image:linear-gradient(rgba(6,8,17,0.88),rgba(6,8,17,0.93)),url(../assets/backgrounds/glyph-trace-ink.png);
  background-size:cover;background-position:center;
}
.oc-io-grid{display:grid;grid-template-columns:1fr 1fr;gap:56px;margin-top:44px;}
@media (max-width:760px){.oc-io-grid{grid-template-columns:1fr;gap:32px;}}
.oc-io-label{font-family:var(--mono);font-size:11px;letter-spacing:0.06em;text-transform:uppercase;color:#80B5FF;margin-bottom:18px;}
.oc-io-row{padding:16px 0;border-top:1px solid var(--line-on-ink);}
.oc-io-row:first-of-type{border-top:none;}
.oc-io-row h3{margin-bottom:4px;}
.oc-io-row p{margin:0;font-size:15px;color:var(--text-dim-ink);}

/* ---------- 05 CYBERGRC IS ONE OUTCOME — Paper-200, bordered callout ---------- */
.oc-proof{background:var(--paper-200);}
.oc-proof-card{border:1px solid var(--paper-400);background:#ffffff;padding:36px;margin-top:36px;max-width:720px;}
.oc-proof-card h2{margin:0 0 14px;}
.oc-proof-card p{font-size:16px;line-height:1.6;color:var(--text-dim-paper);margin:0 0 20px;}
.oc-proof-card a{font-family:var(--mono);font-size:15px;font-weight:600;color:var(--fuchsia-700);}

/* ---------- 06 BRAND STATEMENT — Fuchsia-700 solid ---------- */
.oc-statement{background:var(--fuchsia-700);color:var(--paper-100);text-align:center;padding:110px 0;}
.oc-statement .lines{font-size:clamp(20px,2.6vw,26px);font-weight:700;line-height:1.7;max-width:24ch;margin:0 auto;}

/* ---------- 07 FINAL CTA — Ink-900 + runs-fuchsia-on-ink ---------- */
.oc-cta{
  background:var(--ink-900);color:var(--paper-100);text-align:center;
  background-image:linear-gradient(rgba(6,8,17,0.82),rgba(6,8,17,0.9)),url(../assets/backgrounds/runs-fuchsia-on-ink.png);
  background-size:cover;background-position:center;
  padding:110px 0;
}
.oc-cta h2{max-width:16ch;margin:0 auto 14px;}
.oc-cta p{max-width:52ch;margin:0 auto 30px;color:var(--text-dim-ink);font-size:16px;line-height:1.6;}
.oc-cta .btnrow{justify-content:center;}

/* ---------- RESPONSIVE ---------- */
@media (max-width:860px){
  .oc-hero-grid{grid-template-columns:1fr;}
  .oc-bundle-grid{grid-template-columns:1fr;}
  .oc-model{grid-template-columns:1fr;}
}
@media (max-width:640px){
  .oc-hero .btnrow{flex-direction:column;align-items:stretch;}
}