/* COBOL modernization: split hero with a black copybook terminal, a blast-radius
   impact list, capabilities, and a z/OS deploy band. Brand tokens only, one accent. */

.cf-main{overflow:clip}
.cf-link{font-size:15px;font-weight:600;text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px;color:var(--ink)}
.cf-link:hover{color:var(--signal)}
.cf-actions{display:flex;gap:26px;align-items:center;flex-wrap:wrap;margin-top:34px}

/* Hero */
.cf-hero{max-width:1240px;margin:0 auto;padding:clamp(40px,5vw,72px) clamp(20px,4vw,48px) clamp(56px,7vw,92px);
  display:grid;grid-template-columns:1.05fr 1fr;gap:clamp(36px,5vw,72px);align-items:center}
.cf-hero h1{font-size:clamp(34px,4.3vw,62px);line-height:1.03;letter-spacing:-.04em;max-width:16ch;margin:0}
.cf-lede{margin-top:26px;font-size:clamp(17px,1.7vw,20px);line-height:1.55;color:var(--fg-505a52);max-width:54ch}

/* Black copybook terminal (black in both themes) */
.cf-term{margin:0;border:1px solid #2a2e2b;border-radius:14px;overflow:hidden;background:#0c0e0d;box-shadow:0 20px 50px -34px rgba(20,22,18,.6);user-select:none}
.cf-term-bar{display:flex;align-items:center;gap:14px;padding:12px 18px;border-bottom:1px solid #222623;background:#161917}
.cf-tl{display:inline-flex;gap:8px;flex:none}
.cf-tl i{width:12px;height:12px;border-radius:50%;display:block}
.cf-tl i:nth-child(1){background:#ff5f56}.cf-tl i:nth-child(2){background:#ffbd2e}.cf-tl i:nth-child(3){background:#27c93f}
.cf-file{font:500 13px var(--code);color:#e7ece6}
.cf-term-bar em{margin-left:auto;font:500 12px var(--code);font-style:normal;color:#8c968c}
.cf-term-body{padding:18px 0}
.cf-term-body code{display:block;font:400 14px/1.95 var(--code);padding:0 20px 0 18px;white-space:pre;overflow-x:auto;color:#d7ddd4}
.cf-term-body code span{display:inline-block;width:2em;color:#5f6a60;user-select:none}
.cf-ctx{color:#9aa79a !important}
.cf-old{color:#c98a86 !important;text-decoration:line-through;text-decoration-color:#6b4a47}
.cf-new{background:color-mix(in srgb,var(--signal) 24%,transparent);box-shadow:inset 3px 0 var(--signal);color:#fff !important}
.cf-msg{display:grid;grid-template-columns:auto 1fr;gap:12px;align-items:start;margin:0;padding:16px 20px;border-top:1px solid #222623;background:#101311;font-size:14px;line-height:1.55;color:#d7ddd4}
.cf-msg b{font:600 12px var(--code);letter-spacing:.03em;color:#ff8a72;background:color-mix(in srgb,var(--signal) 26%,transparent);padding:3px 8px;border-radius:5px;align-self:start}
.cf-msg strong{color:#fff;font-weight:600}
.cf-msg code{font:400 13px var(--code);background:#22261f;color:#e7ece6;padding:1px 5px;border-radius:4px}

/* Why: three columns */
.cf-why{max-width:1240px;margin:0 auto;padding:clamp(20px,3vw,40px) clamp(20px,4vw,48px) clamp(56px,7vw,92px)}
.cf-why-head{max-width:46ch;margin-bottom:12px;padding-bottom:36px;border-bottom:2px solid var(--ink)}
.cf-why-head h2{font-size:clamp(28px,3.4vw,48px);letter-spacing:-.035em}
.cf-why-head p{margin-top:16px;font-size:17px;line-height:1.55;color:var(--muted)}
.cf-why-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr)}
.cf-why-grid li{padding:34px 36px 38px 0}
.cf-why-grid li+li{padding-left:36px;border-left:1px solid var(--line)}
.cf-why-grid h3{font:600 clamp(20px,2.1vw,25px)/1.2 var(--display);letter-spacing:-.02em}
.cf-why-grid p{margin-top:12px;font-size:15.5px;line-height:1.6;color:var(--fg-505a52);max-width:36ch}

/* Blast radius: impact list */
.cf-blast{background:var(--sage);border-top:1px solid var(--bd-bec8b5);border-bottom:1px solid var(--bd-bec8b5)}
.cf-blast-head{max-width:1240px;margin:0 auto;padding:clamp(54px,6vw,88px) clamp(20px,4vw,48px) 0}
.cf-blast-head h2{font-size:clamp(28px,3.4vw,46px);letter-spacing:-.035em;max-width:18ch}
.cf-blast-head p{margin-top:16px;font-size:17px;line-height:1.55;color:var(--fg-53624e);max-width:58ch}
.cf-blast-head code{font:500 15px var(--code);background:color-mix(in srgb,var(--signal) 12%,transparent);color:var(--signal-text);padding:1px 6px;border-radius:4px}
.cf-rows{max-width:1240px;margin:0 auto;list-style:none;padding:clamp(36px,4vw,52px) clamp(20px,4vw,48px) clamp(54px,6vw,88px);display:grid;gap:0}
.cf-rows li{display:grid;grid-template-columns:200px 1fr auto;gap:28px;align-items:baseline;padding:20px 0;border-top:1px solid var(--bd-bec8b5)}
.cf-rows li:last-child{border-bottom:1px solid var(--bd-bec8b5)}
.cf-rows b{font:500 17px var(--code);letter-spacing:.01em;color:var(--ink)}
.cf-rows span{font-size:15.5px;color:var(--fg-53624e)}
.cf-rows em{font:500 13px var(--code);font-style:normal;letter-spacing:.03em;color:var(--moss-text,var(--moss))}
.cf-rows li.cf-hit em{color:var(--signal-text)}
.cf-rows li.cf-hit b{color:var(--signal-text)}
.cf-rows li.cf-na em,.cf-rows li.cf-na b,.cf-rows li.cf-na span{color:var(--muted)}

/* Reads: intro + dl */
.cf-reads{max-width:1240px;margin:0 auto;padding:clamp(58px,7vw,100px) clamp(20px,4vw,48px);
  display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(36px,6vw,80px);align-items:start}
.cf-reads-head{position:sticky;top:104px}
.cf-reads-head h2{font-size:clamp(26px,3vw,42px);letter-spacing:-.035em;max-width:15ch}
.cf-reads-head p{margin-top:16px;font-size:16px;line-height:1.55;color:var(--muted);max-width:36ch}
.cf-dl{margin:0;border-top:1px solid var(--line)}
.cf-dl>div{padding:26px 0;border-bottom:1px solid var(--line)}
.cf-dl dt{font:600 20px/1.25 var(--display);letter-spacing:-.02em}
.cf-dl dd{margin:10px 0 0;font-size:16px;line-height:1.6;color:var(--fg-505a52);max-width:60ch}

/* Deploy band (light, framed by heavy rules) */
.cf-deploy{background:var(--sage);border-top:2px solid var(--ink);border-bottom:2px solid var(--ink)}
.cf-deploy-inner{max-width:1240px;margin:0 auto;padding:clamp(56px,7vw,92px) clamp(20px,4vw,48px);display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(30px,5vw,64px);align-items:center}
.cf-deploy h2{margin:0;font-size:clamp(28px,3.4vw,46px);letter-spacing:-.035em;color:var(--ink);max-width:14ch}
.cf-deploy p{margin:0;font-size:17px;line-height:1.65;color:var(--fg-53624e)}
.cf-deploy .cf-link{display:inline-block;margin-top:18px;color:var(--ink)}
.cf-deploy-inner>div:last-child{display:flex;flex-direction:column}

/* Close */
.cf-close{max-width:1240px;margin:0 auto;padding:clamp(56px,7vw,92px) clamp(20px,4vw,48px) 70px;
  display:grid;grid-template-columns:1.3fr auto;gap:48px;align-items:center}
.cf-close h2{font-size:clamp(30px,3.6vw,50px);letter-spacing:-.035em;max-width:16ch}
.cf-close p{margin:18px 0 0;font-size:17px;line-height:1.55;color:var(--fg-505a52);max-width:50ch}
.cf-close p a{color:var(--signal-text);text-decoration:underline;text-underline-offset:3px}
.cf-mascot{width:clamp(180px,22vw,290px);height:auto;justify-self:end}

@media(max-width:860px){
  .cf-hero{grid-template-columns:1fr;gap:32px}
  .cf-why-grid{grid-template-columns:1fr}
  .cf-why-grid li,.cf-why-grid li+li{padding:24px 0;border-left:0;border-top:1px solid var(--line)}
  .cf-rows li{grid-template-columns:1fr auto;gap:4px 16px}
  .cf-rows span{grid-column:1}
  .cf-reads{grid-template-columns:1fr;gap:26px}
  .cf-reads-head{position:static}
  .cf-deploy-inner{grid-template-columns:1fr;gap:20px}
  .cf-close{grid-template-columns:1fr;gap:30px}
  .cf-mascot{justify-self:start;width:190px}
}
@media(prefers-reduced-motion:reduce){.cf-main *{transition:none!important}}