/* Framework page-specific layouts and responsive behavior. */

.page-hero { padding: 88px 36px 58px; border-bottom: 0; background-image: radial-gradient(var(--grid) 1.2px,transparent 1.2px); background-size: 24px 24px; }
    .page-hero h1 { max-width: 1100px; font-size: clamp(3rem,6.5vw,5.8rem); line-height: .98; letter-spacing: -.055em; margin: 18px 0 24px; }
    .page-hero p { max-width: 860px; font-size: 1.18rem; color: var(--slate); }
    .page-hero .hero-actions { margin-top: 32px; }
    .framework-overview { display:grid; grid-template-columns: 1fr 1.2fr; border-bottom: var(--strong); }
    .overview-copy { padding: 88px 36px; border-right: var(--strong); }
    .overview-copy h2, .section-copy h2 { font-size: clamp(2.3rem,4vw,4.2rem); line-height:1.05; letter-spacing:-.045em; margin:14px 0 24px; }
    .overview-copy p, .section-copy p { color:var(--slate); font-size:1.05rem; max-width:680px; }
    .outcome-diagram { min-height:600px; padding:48px; display:grid; place-items:center; background:var(--surface); position:relative; overflow:hidden; }
    .outcome-system { width:min(560px,92%); aspect-ratio:1; position:relative; }
    .outcome-system svg { position:absolute; inset:0; width:100%; height:100%; }
    .outcome-system line { stroke:var(--line); stroke-width:.6; vector-effect:non-scaling-stroke; }
    .outcome-center { position:absolute; width:180px; height:180px; border:3px solid var(--navy); background:white; border-radius:50%; display:grid; place-items:center; text-align:center; font-weight:800; line-height:1.15; left:50%; top:50%; transform:translate(-50%,-50%); padding:22px; box-shadow:0 12px 40px rgba(15,23,42,.08); }
    .lens { position:absolute; width:132px; min-height:56px; border:1.5px solid var(--navy); background:white; display:grid; place-items:center; text-align:center; padding:10px; font-weight:700; font-size:.78rem; }
    .l1{left:50%;top:0;transform:translateX(-50%)} .l2{right:0;top:19%} .l3{right:0;bottom:19%} .l4{left:50%;bottom:0;transform:translateX(-50%)} .l5{left:0;bottom:19%} .l6{left:0;top:19%}
    .stage-detail-grid { display:grid; grid-template-columns:repeat(2,1fr); border-bottom:var(--strong); }
    .stage-detail { padding:58px 36px; border-right:var(--soft); border-bottom:var(--soft); min-height:340px; }
    .stage-detail:nth-child(2n){border-right:0} .stage-detail:nth-last-child(-n/**/+2){border-bottom:0}
    .stage-detail h3 { font-size:1.8rem; margin:14px 0 10px; }
    .stage-detail .tagline { font-family:var(--font-serif); font-style:italic; font-size:1.12rem; margin-bottom:18px; }
    .stage-detail p { color:var(--slate); margin-bottom:18px; }
    .stage-detail ul { list-style:none; display:grid; gap:8px; color:var(--slate); }
    .stage-detail li::before { content:"→"; color:var(--cyan); margin-right:9px; }
    .section-copy { padding:88px 36px 48px; }
    .test-grid { display:grid; grid-template-columns:repeat(2,1fr); border-top:var(--soft); border-bottom:var(--strong); }
    .test-item { padding:30px 36px; border-right:var(--soft); border-bottom:var(--soft); display:grid; grid-template-columns:54px 1fr; gap:18px; align-items:start; }
    .test-item:nth-child(2n){border-right:0} .test-item:nth-last-child(-n/**/+2){border-bottom:0}
    .test-number { font-family:var(--font-mono); color:var(--cyan); font-size:.75rem; }
    .test-item strong { display:block; font-size:1.05rem; margin-bottom:6px; }
    .test-item p { color:var(--slate); font-size:.95rem; }
    .deliverable-grid { display:grid; grid-template-columns:repeat(3,1fr); border-top:var(--strong); border-bottom:var(--strong); }
    .deliverable { padding:38px 30px; border-right:var(--soft); border-bottom:var(--soft); }
    .deliverable:nth-child(3n){border-right:0} .deliverable:nth-last-child(-n/**/+3){border-bottom:0}
    .deliverable h3 { font-size:1.05rem; margin:12px 0 8px; }
    .deliverable p { color:var(--slate); font-size:.92rem; }
    .commitment { padding:96px 36px; background:var(--navy); color:white; display:grid; grid-template-columns:.8fr 1.2fr; gap:72px; }
    .commitment h2 { font-size:clamp(2.4rem,4vw,4.4rem); line-height:1.03; letter-spacing:-.045em; }
    .commitment p { color:#cbd5e1; font-size:1.08rem; margin-bottom:18px; }
    @media(max-width:980px){.framework-overview,.commitment{grid-template-columns:1fr}.overview-copy{border-right:0;border-bottom:var(--strong)}.outcome-diagram{min-height:520px}.stage-detail-grid,.test-grid{grid-template-columns:1fr}.stage-detail,.test-item{border-right:0}.stage-detail:nth-last-child(-n/**/+2){border-bottom:var(--soft)}.stage-detail:last-child,.test-item:last-child{border-bottom:0}.deliverable-grid{grid-template-columns:1fr 1fr}.deliverable:nth-child(3n){border-right:var(--soft)}.deliverable:nth-child(2n){border-right:0}.deliverable:nth-last-child(-n/**/+3){border-bottom:var(--soft)}.deliverable:last-child,.deliverable:nth-last-child(2){border-bottom:0}}
    @media(max-width:680px){.page-hero,.overview-copy,.section-copy,.commitment{padding-left:20px;padding-right:20px}.outcome-diagram{padding:24px;min-height:440px}.outcome-center{width:140px;height:140px;font-size:.86rem}.lens{width:104px;font-size:.68rem}.stage-detail{padding:42px 20px}.test-item{padding:26px 20px}.deliverable-grid{grid-template-columns:1fr}.deliverable{border-right:0!important;border-bottom:var(--soft)!important}.deliverable:last-child{border-bottom:0!important}}


    .framework-key { border-bottom:var(--strong); }
    .framework-key-head { padding:88px 36px 48px; }
    
    .framework-key-head h2 { font-size:clamp(2.3rem,4vw,4rem); line-height:1.05; letter-spacing:-.04em; margin:12px 0 18px; }
    .framework-key-head p { color:var(--slate); font-size:1.05rem; }
    .framework-key-grid { display:grid; grid-template-columns:repeat(3,1fr); border-top:var(--strong); }
    .framework-key-card { padding:38px 30px; border-right:var(--soft); background:#fff; }
    .framework-key-card:last-child { border-right:0; }
    .framework-key-card h3 { font-size:1.35rem; margin:12px 0 8px; }
    .framework-key-card .key-line { font-family:var(--font-serif); font-style:italic; font-size:1.08rem; margin-bottom:12px; }
    .framework-key-card p { color:var(--slate); }
    .outcome-diagram { align-content:center; gap:26px; }
    .diagram-heading { width:min(560px,92%); }
    .diagram-heading h3 { font-size:1.55rem; margin:8px 0 6px; }
    .diagram-heading p { color:var(--slate); font-size:.95rem; max-width:520px; }
    @media(max-width:980px){.framework-key-grid{grid-template-columns:1fr}.framework-key-card{border-right:0;border-bottom:var(--soft)}.framework-key-card:last-child{border-bottom:0}}
    @media(max-width:680px){.framework-key-head{padding:64px 20px 36px}.framework-key-card{padding:30px 20px}}

/* Framework page: tighter section rhythm and top-aligned Cosmos Test. */

.framework-overview.section-space-expanded,.decision-flow.section-space-expanded,.rule-list.section-space-expanded{padding-top:clamp(48px,6vw,72px)!important;padding-bottom:clamp(48px,6vw,72px)!important;}
.framework-overview .overview-copy,.decision-flow .section-copy,.rule-list>.section-copy{padding-top:0!important;}
.decision-flow>.section-copy,.rule-list>.section-copy{padding-bottom:32px!important;}
.rule-list.editorial-section{display:block!important;grid-template-columns:none!important;gap:0!important;}
.rule-list.editorial-section>.section-copy{max-width:820px!important;padding-left:36px!important;padding-right:36px!important;margin-bottom:0!important;}
.rule-list.editorial-section>.test-grid{width:100%!important;margin-top:0!important;border-top:var(--strong)!important;}
@media(max-width:680px){
 
 .framework-overview.section-space-expanded,.decision-flow.section-space-expanded,.rule-list.section-space-expanded{padding-top:40px!important;padding-bottom:40px!important;}
 .rule-list.editorial-section>.section-copy{padding-left:20px!important;padding-right:20px!important;padding-bottom:26px!important;}
}