.metric-ladder-section{margin-bottom:60px;padding:30px;border:1px solid var(--line);border-radius:24px;background:#fff;box-shadow:0 16px 36px rgba(45,21,93,.08)}
.metric-ladder-heading{display:flex;justify-content:space-between;gap:28px;align-items:end}.metric-ladder-heading>div:first-child{max-width:720px}.metric-ladder-heading span:first-child{color:#9a6a14;font-size:.68rem;font-weight:900;letter-spacing:.12em;text-transform:uppercase}.metric-ladder-heading h2{margin:7px 0;font:700 clamp(1.65rem,3vw,2.35rem) Lora,serif}.metric-ladder-heading p{margin:0;color:var(--muted);line-height:1.65}.ladder-rule{min-width:260px;padding:15px 18px;border-radius:15px;background:#17133f;color:#fff}.ladder-rule small,.ladder-rule strong,.ladder-rule span{display:block}.ladder-rule small{color:#efbd50;font-size:.65rem;font-weight:900;letter-spacing:.1em;text-transform:uppercase}.ladder-rule strong{margin:6px 0 3px;font-size:.83rem}.ladder-rule span{color:#d8d2e8;font-size:.75rem}
.metric-ladder-wrap{overflow-x:auto;margin-top:26px;padding:10px 4px 20px}.metric-ladder{position:relative;width:950px;height:385px;margin:auto}.metric-ladder:before{content:"";position:absolute;left:70px;top:76px;width:792px;height:254px;border-left:3px solid #d8d0ea;border-bottom:3px solid #d8d0ea;background:repeating-linear-gradient(135deg,transparent 0 90px,rgba(75,46,191,.07) 91px 94px,transparent 95px 132px);clip-path:polygon(0 0,14.28% 0,14.28% 16.66%,28.56% 16.66%,28.56% 33.32%,42.84% 33.32%,42.84% 49.98%,57.12% 49.98%,57.12% 66.64%,71.4% 66.64%,71.4% 83.3%,85.68% 83.3%,85.68% 100%,100% 100%,100% 94%,91.5% 94%,91.5% 77.3%,77.2% 77.3%,77.2% 60.6%,62.9% 60.6%,62.9% 43.9%,48.6% 43.9%,48.6% 27.2%,34.3% 27.2%,34.3% 10.5%,20% 10.5%,20% 0)}
.metric-ladder button{position:absolute;left:calc(20px + var(--step)*132px);top:calc(18px + var(--step)*48px);width:112px;min-height:88px;padding:10px;border:2px solid transparent;border-radius:50%;background:linear-gradient(140deg,#5432c9,#2b165f);color:#fff;box-shadow:0 10px 22px rgba(45,21,93,.18);cursor:pointer;transition:transform .2s,border-color .2s,box-shadow .2s}.metric-ladder button:hover,.metric-ladder button:focus-visible{transform:translateY(-4px);outline:none;border-color:#efbd50}.metric-ladder button small,.metric-ladder button strong,.metric-ladder button span{display:block}.metric-ladder button small{color:#f1c45e;font-weight:800}.metric-ladder button strong{margin:2px 0;font:700 1rem Lora,serif}.metric-ladder button span{color:#ded7f5;font-size:.65rem;font-weight:700}.metric-ladder button.is-base{background:linear-gradient(140deg,#d39324,#9a6514)}.metric-ladder button.is-from{border-color:#efbd50;box-shadow:0 0 0 5px rgba(211,147,36,.17),0 10px 22px rgba(45,21,93,.2)}.metric-ladder button.is-to{border-color:#8edbd0;box-shadow:0 0 0 5px rgba(45,159,143,.16),0 10px 22px rgba(45,21,93,.2)}.metric-ladder button.is-between:after{content:"×10";position:absolute;right:-34px;bottom:-20px;padding:4px 7px;border-radius:12px;background:#fff;color:var(--purple);font-size:.66rem;font-weight:900;box-shadow:0 4px 12px rgba(34,24,74,.15)}
.ladder-legend{display:grid;grid-template-columns:1fr 1fr;gap:12px}.ladder-legend span{padding:14px 16px;border-radius:13px;background:#f7f4fc;color:var(--muted);font-size:.78rem}.ladder-legend i{display:inline-grid;place-items:center;width:28px;height:28px;margin-right:9px;border-radius:50%;background:#4b2ebf;color:#fff;font-style:normal}.ladder-legend b{display:block;margin:0 0 3px 37px;color:var(--ink)}.ladder-example{display:flex;align-items:center;gap:14px;margin-top:14px;padding:17px 19px;border-left:4px solid var(--gold);border-radius:12px;background:#fff9ea}.ladder-example strong{color:#9a6a14;font-size:.7rem;letter-spacing:.08em;text-transform:uppercase}.ladder-example span{flex:1;font-weight:700}.ladder-example b{color:var(--purple);font-size:.8rem}
@media(max-width:900px){.metric-ladder-heading{align-items:stretch;flex-direction:column}.ladder-rule{min-width:0}.ladder-legend{grid-template-columns:1fr}}@media(max-width:560px){.metric-ladder-section{padding:20px}.ladder-example{align-items:flex-start;flex-direction:column}}