/* Draft L: shared alignment and a clear hierarchy for the landing page. */
.page-index{--section-space:104px}
.page-index .w{max-width:1360px;padding-inline:64px}
.page-index .nav{height:84px}
.page-index .sec{padding-block:var(--section-space)}
.page-index .sec.white{background:transparent;border:0}
.page-index .h2{font-size:46px;line-height:1.08;letter-spacing:-.045em;text-wrap:pretty}
.page-index .lead{font-size:16px;line-height:1.75;max-width:580px}
.page-index .head{max-width:none;gap:24px}
.page-index .head>.mono{font-size:10px;letter-spacing:.1em}
.page-index .head>.mono:before{display:none}
.page-index .hero{grid-template-columns:minmax(0,1.45fr) minmax(0,1fr);gap:20px;min-height:670px;padding-block:82px 76px;overflow:hidden;align-items:center}
.page-index .hero .copy{max-width:none;gap:28px}
.page-index .hero .h1{font-size:clamp(48px,5.7vw,82px);line-height:1.04;max-width:none;letter-spacing:-.055em;text-wrap:initial;margin:0 0 4px}
.page-index .title-line{display:block;white-space:nowrap}
.page-index .hero .copy p{font-size:16px;line-height:1.75;max-width:590px}
.page-index .hero .hero-actions{display:flex;flex-direction:row!important;align-items:center!important;gap:26px!important;margin-top:4px;flex-wrap:wrap}
.page-index .hero .ghost{font-size:11px;max-width:210px;border:0;line-height:1.5}
.page-index .hero-visual{display:flex;align-items:center;justify-content:center;border:0;background:none;min-height:0;height:auto;width:100%;padding:0;isolation:isolate}
.page-index .hero-visual:before,.page-index .hero-visual:after{display:none}
.page-index .hero .lhwrap{position:relative;inset:auto;align-self:center;width:112%;height:auto;flex-shrink:0}
.page-index .hero .lhwrap .lh{width:100%;height:auto;object-fit:contain;max-width:none;display:block;mask-image:linear-gradient(to right,#000 88%,transparent 100%),linear-gradient(to bottom,#000 86%,transparent 100%);mask-composite:intersect}
.page-index #clients{border:0;background:transparent}
.page-index #clients>.w{border:0;padding-block:32px 40px;display:flex;gap:52px;align-items:center}
.page-index .band2 .bh{max-width:145px;flex-shrink:0;margin:0}
.page-index .band2 .bh h2{font-size:12px;font-weight:400;line-height:1.6;color:var(--muted)}
.page-index .lrow{gap:40px;grid-template-columns:repeat(6,minmax(0,1fr))}
.page-index .lrow img{height:32px!important;opacity:1;object-fit:contain}
.page-index .lrow img:nth-child(5){height:45px!important}
.page-index .lrow img:nth-child(6){height:38px!important}
.page-index .framework-chapter{background:var(--surface);border:0}
.page-index .framework-chapter .dial-hub{background:var(--surface)}
.page-index .chapter-heading{display:grid;grid-template-columns:1fr 1fr;gap:26px 88px;align-items:start}
.page-index .chapter-heading>.mono{grid-column:1/-1}
.page-index .chapter-heading>.lead{padding-top:3px}
.page-index #tools{padding-bottom:58px;overflow:visible}
.page-index #tools .head{max-width:none}
.page-index .dialwrap{grid-template-columns:minmax(0,1fr) 360px minmax(0,1fr);grid-template-rows:1fr 1fr;min-height:470px;padding-block:42px;gap:58px 30px;margin:46px 0 0;align-items:center}
.page-index .dial{width:360px;height:360px;left:50%;top:50%;transform:translate(-50%,-50%);opacity:.62}
.page-index .dial-hub{width:115px;height:115px;left:50%;top:50%;transform:translate(-50%,-50%)}
.page-index .dial-hub strong{font-size:40px}
.page-index .dial-hub span{font-size:8px}
.page-index .dial-needle{width:300px;height:300px;left:calc(50% - 150px);top:calc(50% - 150px)}
.page-index .tcard,.page-index .tcard.nw,.page-index .tcard.ne,.page-index .tcard.sw,.page-index .tcard.se{display:flex;flex-direction:column;gap:13px;padding:22px 22px 12px 0;background:transparent;border-top:1px solid var(--grid);align-items:flex-start;min-width:0}
.page-index .tcard.nw{grid-column:1;grid-row:1}.page-index .tcard.ne{grid-column:3;grid-row:1}.page-index .tcard.sw{grid-column:1;grid-row:2}.page-index .tcard.se{grid-column:3;grid-row:2}
.page-index .tcard .tb{font-size:9px;letter-spacing:.05em}
.page-index .tcard .st{font-size:25px;line-height:1.15;letter-spacing:-.035em;max-width:100%}
.page-index .tcard .sd{font-size:14px;line-height:1.65}
.page-index .tcard .sa{right:0;top:18px}
/* The framework responds as four complete cards. */
.page-index #tools .tcard{isolation:isolate;transform:none;border-top-color:var(--grid);transition:transform .24s ease,border-color .24s ease}
.page-index #tools .tcard:before{content:"";position:absolute;inset:-10px -14px;z-index:-1;border-radius:12px;background:var(--surface);box-shadow:0 18px 40px rgba(11,30,66,.10),0 3px 10px rgba(11,30,66,.04);opacity:0;pointer-events:none;transition:opacity .24s ease}
.page-index #tools .tcard .sa{transform:none;transition:color .24s ease}
.page-index #tools .tcard:focus-visible{z-index:3;border-top-color:transparent;outline:2px solid var(--blue);outline-offset:6px}
.page-index #tools .tcard:focus-visible:before{opacity:1}
@media(hover:hover) and (pointer:fine){
 .page-index #tools .tcard:hover{z-index:3;border-top-color:transparent}
 .page-index #tools .tcard:hover:before{opacity:1}
}
@media(prefers-reduced-motion:no-preference){
 .page-index #tools .tcard:focus-visible{transform:translateY(-5px) scale(1.025)}
}
@media(hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){
 .page-index #tools .tcard:hover{transform:translateY(-5px) scale(1.025)}
}
@media(prefers-reduced-motion:reduce){
 .page-index #tools .tcard,.page-index #tools .tcard:before,.page-index #tools .tcard .sa{transition:none}
}
@media(max-width:600px){.page-index #tools .tcard:before{inset:0 -10px}}
.page-index #value{padding-top:52px;padding-bottom:104px}
.page-index #value>.w{display:flex;flex-direction:column;gap:48px}
.page-index #value .two{gap:88px;align-items:start;grid-template-columns:1fr 1fr;border-top:1px solid var(--grid);padding-top:12px}
.page-index #value .list{border:0}
.page-index #value .list>div{padding-block:16px;border-color:var(--grid)}
.page-index #value .list .t{font-size:17px;font-weight:400}
.page-index .coverage{border:0;background:transparent;padding:20px 0;min-height:0;overflow:visible}
.page-index .coverage-top{font-size:9px;color:var(--muted)}
.page-index .coverage-stats{grid-template-columns:1.4fr 1fr 1fr;margin-top:32px;padding:0;border:0;gap:22px}
.page-index .coverage-stats strong{font-size:52px;font-weight:500}
.page-index .coverage-stats>div>span{font-size:12px;max-width:110px}
.page-index #steer{background:#EEF1F4;border:0}
.page-index #steer>.w{display:flex;flex-direction:column;gap:50px!important}
.page-index #steer .head{max-width:650px}
.page-index .roles2{grid-template-columns:repeat(3,minmax(0,1fr));gap:28px 48px}
.page-index .role2{padding-top:20px;gap:10px;min-height:100px}
.page-index .role2:before{display:none}
.page-index .role2 .rl{font-size:10px;padding:0;max-width:none;letter-spacing:.025em;color:var(--blue)}
.page-index .role2 .rt2{font-size:20px;line-height:1.4;letter-spacing:-.02em;max-width:320px}
.page-index .assessment-section{background:var(--surface);border:0}
.page-index .experience-grid{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:100px;align-items:start}
.page-index .experience-grid .head{padding-top:12px}
.page-index .experience-grid .h2{font-size:42px;max-width:360px}
.page-index .experience-grid .sample-note{border:0;padding:0;font-size:12px;color:var(--muted);margin-top:6px}
.page-index #sample{position:relative;border:0;border-top:1px solid var(--ink);border-bottom:1px solid var(--grid);background:transparent;box-shadow:none;border-radius:0;padding:24px 0 26px;display:flex;flex-direction:column;gap:22px;width:100%;min-width:0;margin:0}
.page-index #sample>div:first-child{gap:12px!important}
.page-index #sample .mono{font-size:9px;letter-spacing:.04em}
.page-index #sample .q{font-size:28px;line-height:1.3;min-height:110px;letter-spacing:-.035em;text-wrap:pretty}
.page-index #sample .opts{margin-bottom:12px}
.page-index #sample .opt{font-size:14px;min-height:44px;padding-inline:12px}
.page-index #sample .btn{min-height:44px}
.page-index #sample #done .btn{white-space:normal;height:auto;padding:12px 18px;text-align:center;font-size:10px}
.page-index #sample .res .kn{font-size:42px}
.page-index #sample .res .rt{padding:20px 10px}
.page-index .delivery-chapter{padding-block:104px;background:var(--paper)}
.page-index .delivery-chapter>.sec{padding-block:0;background:transparent;border:0}
.page-index #levels>.w,.page-index #together>.w{display:grid!important;grid-template-columns:1fr 1fr!important;gap:88px!important;align-items:start}
.page-index #levels .head{position:static}
.page-index #levels .h2{font-size:46px}
.page-index .tree{padding:0}
.page-index .troot{margin:0 0 30px;padding:0 0 15px}
.page-index .tnode{margin-bottom:20px}
.page-index .folder-tab{padding:22px;grid-template-columns:24px minmax(0,1fr) auto 18px}
.page-index .folder-tab h3{font-size:22px}
.page-index .folder-content{padding:0 22px 22px}
.page-index .trow p{font-size:15px}
.page-index .delivery-chapter #together{padding-top:76px}
.page-index #together>.w{padding-top:64px;border:0}
.page-index #together .h2{font-size:36px;max-width:470px}
.page-index #together .list>div{padding-block:20px}
.page-index #together .list .t{font-size:20px}
.page-index #together .list .s{font-size:13px}
.page-index .delivery-chapter #support{padding-top:64px}
.page-index #support>.w{display:grid;grid-template-columns:1fr 1fr;gap:88px}
.page-index #support .h2{font-size:36px;max-width:480px}
.page-index .services{display:flex;flex-direction:column;border-bottom:0}
.page-index .svc,.page-index .svc+.svc{border:0;border-bottom:1px solid var(--grid);padding:22px 0;font-size:20px;gap:22px}
.page-index #demo{background:var(--surface);border-top:1px solid var(--grid)}
.page-index #demo>.w{grid-template-columns:1fr 1fr!important;gap:88px!important}
.page-index #demo .h2{font-size:56px;max-width:400px}
.page-index .foot{padding-top:70px}
@media(max-width:1200px){
 .page-index .w{padding-inline:44px}
 .page-index .hero{gap:16px;grid-template-columns:1.5fr 1fr;padding-block:68px}
 .page-index .hero .h1{font-size:5.7vw}
 .page-index .hero .copy p{font-size:15px}
 .page-index .hero .lhwrap{width:115%}
 .page-index .dialwrap{grid-template-columns:minmax(0,1fr) 260px minmax(0,1fr);gap:42px 24px}
 .page-index .dial{width:280px;height:280px}
 .page-index .dial-needle{width:240px;height:240px;left:calc(50% - 120px);top:calc(50% - 120px)}
 .page-index .h2,.page-index #levels .h2{font-size:40px}
 .page-index .chapter-heading,.page-index #value .two,.page-index .experience-grid,.page-index #support>.w{column-gap:52px}
 .page-index #levels>.w,.page-index #together>.w,.page-index #demo>.w{gap:52px!important}
 .page-index .lrow{gap:28px}
}
@media(max-width:900px){
 .page-index{--section-space:76px}
 .page-index .hero{grid-template-columns:1fr;min-height:0;gap:18px;padding-block:60px 40px}
 .page-index .hero .h1{font-size:clamp(42px,8.7vw,72px)}
 .page-index .hero .copy p{max-width:640px;font-size:16px}
 .page-index .hero-visual{max-width:600px;justify-self:center}
 .page-index .hero .lhwrap{width:100%}
 .page-index #clients>.w{flex-direction:column;align-items:flex-start;gap:28px;padding-block:28px}
 .page-index .band2 .bh{max-width:none}
 .page-index .band2 .bh h2{font-size:12px}
 .page-index .lrow{gap:25px}
 .page-index .chapter-heading{grid-template-columns:1fr;gap:20px}
 .page-index .chapter-heading .h2{max-width:600px}
 .page-index .chapter-heading>.lead{max-width:640px}
 .page-index .dialwrap{grid-template-columns:1fr 1fr;grid-template-rows:auto auto;gap:24px 42px;padding:300px 0 0;margin-top:30px;min-height:0}
 .page-index .dial{top:136px;width:260px;height:260px}
 .page-index .dial-hub{top:136px;width:105px;height:105px}
 .page-index .dial-needle{top:26px;width:220px;height:220px;left:calc(50% - 110px)}
 .page-index .tcard.nw,.page-index .tcard.ne,.page-index .tcard.sw,.page-index .tcard.se{grid-column:auto;grid-row:auto;padding:22px 20px 20px 0}
 .page-index #value{padding-block:40px 76px}
 .page-index #value .two{gap:38px;grid-template-columns:1fr}
 .page-index .coverage-stats{max-width:500px}
 .page-index .roles2{grid-template-columns:repeat(3,minmax(0,1fr));gap:26px}
 .page-index .role2 .rt2{font-size:18px}
 .page-index .experience-grid{grid-template-columns:1fr;gap:40px}
 .page-index .experience-grid .h2{max-width:600px}
 .page-index #sample .q{min-height:0;margin-bottom:18px}
 .page-index .delivery-chapter{padding-block:76px}
 .page-index #levels>.w,.page-index #together>.w,.page-index #demo>.w{grid-template-columns:1fr!important;gap:40px!important}
 .page-index #support>.w{grid-template-columns:1fr;gap:32px}
 .page-index #levels .head,.page-index #together .head,.page-index #support .head{max-width:640px}
 .page-index #together>.w{padding-top:50px}
 .page-index .delivery-chapter #together,.page-index .delivery-chapter #support{padding-top:50px}
 .page-index .services{max-width:100%}
 .page-index #demo .h2{font-size:48px}
}
@media(max-width:600px){
 .page-index .w{padding-inline:24px}
 .page-index .nav{height:76px}
 .page-index .hero{padding-top:44px;gap:28px}
 .page-index .hero .h1{font-size:8.8vw;letter-spacing:-.055em}
 .page-index .hero .copy{gap:24px}
 .page-index .hero .copy p{font-size:15px;line-height:1.75}
 .page-index .hero .hero-actions{gap:22px!important;align-items:flex-start!important;flex-direction:column!important}
 .page-index .hero .ghost{max-width:none}
 .page-index .hero-visual{max-width:480px}
 .page-index .lrow{grid-template-columns:repeat(3,minmax(0,1fr));gap:30px}
 .page-index .lrow img{height:30px!important}
 .page-index .h2,.page-index #levels .h2,.page-index .experience-grid .h2{font-size:34px}
 .page-index .lead{font-size:15px}
 .page-index .dialwrap{grid-template-columns:1fr;gap:0;padding-top:280px}
 .page-index .tcard .st{font-size:25px}
 .page-index .tcard .sd{font-size:15px}
 .page-index .tcard.nw,.page-index .tcard.ne,.page-index .tcard.sw,.page-index .tcard.se{padding-block:25px}
 .page-index .coverage-stats{gap:14px}
 .page-index .coverage-stats strong{font-size:42px}
 .page-index .coverage-stats>div>span{font-size:11px}
 .page-index .roles2{grid-template-columns:1fr;gap:0}
 .page-index .role2{display:grid;grid-template-columns:120px 1fr;gap:22px;min-height:0;padding:20px 0}
 .page-index .role2 .rl{font-size:10px;line-height:1.6;padding-top:2px}
 .page-index .role2 .rt2{font-size:18px;line-height:1.45}
 .page-index #sample{gap:20px}
 .page-index #sample .q{font-size:24px}
 .page-index #sample .res .kn{font-size:36px}
 .page-index .folder-tab{padding:20px 16px;gap:8px;grid-template-columns:18px minmax(0,1fr) auto 14px}
 .page-index .folder-tab h3{font-size:19px}
 .page-index .folder-tab .tag{font-size:8px}
 .page-index .folder-content{padding-inline:16px}
 .page-index #together .h2,.page-index #support .h2{font-size:32px}
 .page-index #demo .h2{font-size:42px}
}
@media(prefers-reduced-motion:reduce){.page-index *{scroll-behavior:auto}}

/* Draft M: the requested hierarchy, spacing and numeric interaction. */
.page-index #clients{background:var(--surface)}
.page-index #clients>.w{padding-block:96px 48px;gap:48px}
.page-index #demo{border-top:0}
.page-index #value .list .n{font:600 27px/1.1 var(--display);letter-spacing:-.04em;min-width:36px}
.page-index .coverage-stats{grid-template-columns:repeat(3,max-content);gap:12px;align-items:start}
.page-index .coverage-stats>div{gap:4px;align-items:flex-start}
.page-index .coverage-stats strong{font-size:clamp(72px,7.8vw,112px);font-weight:700;line-height:1;letter-spacing:-.065em;white-space:nowrap}
.page-index .coverage-stats strong>span{font-size:.45em}
.page-index .coverage-stats>div>.metric-caption{font-size:14px;line-height:1.3;font-weight:700;max-width:145px;color:var(--ink)}
.metric-caption .metric-word{display:inline-block;white-space:nowrap}
.metric-caption .metric-slot{display:inline-block;position:relative;font:inherit;letter-spacing:inherit}
.page-index .coverage-stats strong>.metric-slot{font:inherit;color:inherit;display:inline-block;position:relative;letter-spacing:inherit}
.page-index .coverage-stats strong>.metric-plus{font-size:.45em;color:var(--blue);letter-spacing:0}
.metric-glyph{display:inline-block;transform-origin:50% 60%;text-shadow:0 calc(-1 * var(--fringe,0px)) 0 rgba(255,214,10,var(--fringe-alpha,0)),calc(var(--fringe,0px) * .866) calc(var(--fringe,0px) * .5) 0 rgba(255,45,58,var(--fringe-alpha,0)),calc(var(--fringe,0px) * -.866) calc(var(--fringe,0px) * .5) 0 rgba(30,215,96,var(--fringe-alpha,0));transition:transform 90ms ease-out,text-shadow 90ms ease-out}
.metric-label{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.page-index #steer>.w{gap:64px!important}
.page-index #steer .head{max-width:none;align-items:center;text-align:center}
.page-index #steer .h2{font-size:clamp(48px,6.4vw,92px);line-height:1.02;letter-spacing:-.055em}
.page-index #steer .h2>span{display:block;white-space:nowrap}
.page-index #steer .h2>.audience-intro{font-size:clamp(20px,.7em,64px);line-height:1.2;letter-spacing:-.035em;margin-bottom:.18em}
.page-index .roles2{width:100%;max-width:960px;margin-inline:auto;grid-template-columns:repeat(3,minmax(0,1fr));gap:26px 32px}
.page-index .role2 .rt2{max-width:270px}
.page-index #levels>.w,.page-index #together>.w{grid-template-columns:minmax(0,.72fr) minmax(0,1.28fr)!important;gap:80px!important}
.page-index #levels .head,.page-index #together .head{max-width:390px}
@media(max-width:1200px){
 .page-index #levels>.w,.page-index #together>.w{gap:52px!important}
 .page-index .coverage-stats{gap:10px}
 .page-index .coverage-stats strong{font-size:clamp(64px,7.2vw,94px)}
 .page-index .roles2{max-width:900px;gap:26px}
}
@media(max-width:900px){
 .page-index #levels>.w,.page-index #together>.w{grid-template-columns:1fr!important;gap:40px!important}
 .page-index #levels .head,.page-index #together .head{max-width:580px}
 .page-index .coverage-stats{max-width:620px}
 .page-index .coverage-stats strong{font-size:clamp(86px,15vw,100px)}
 .page-index #steer .h2{font-size:6.7vw}
 .page-index #steer>.w{gap:42px!important}
 .page-index #clients>.w{gap:28px}
}
@media(max-width:600px){
 .page-index .coverage-stats{gap:8px}
 .page-index .coverage-stats strong{font-size:clamp(50px,16vw,86px)}
 .page-index .coverage-stats>div>.metric-caption{font-size:12px;max-width:90px}
 .page-index #steer .h2{font-size:8.5vw;letter-spacing:-.045em}
 .page-index .roles2{grid-template-columns:1fr;max-width:400px;gap:0}
 .page-index .role2{grid-template-columns:110px minmax(0,1fr);gap:20px}
 .page-index #clients>.w{padding-block:64px 40px}
}
@media(prefers-reduced-motion:reduce){.metric-glyph{transition:none}}

/* Keep the requested two-line Framework heading within its existing column. */
.page-index .framework-title{container-type:inline-size}
.page-index .framework-title>span{display:block;font-size:min(46px,7cqw);line-height:1.08;letter-spacing:-.045em;white-space:nowrap}

/* The AFD source includes transparent clear space around its colour mark. */
.page-index .lrow img:first-child{height:50px!important}