:root {
    --green: #02563D;
    --forest: #003727;
    --forest-2: #00261B;
    --ink: #1d3d33;
    --brand: #05704F;
    --accent: #009F78;
    --mint: #17B591;
    --mint-50: #17B59180;
    --coral: #E65F46;
    --coral-2: #F08A72;
    --gold: #FFDC78;
    --bg: #f1f4f2;
    --paper: #ffffff;
    --cream: #FFFAF0;
    --text: #272727;
    --text-2: #4d4d4d;
    --muted: #727272;
    --line: #e2e2e2;
    --line-2: #eaefec;
    --subtle: #02563D0f;
    --mint-bg: #E5F5EF;
    --peach-bg: #F9D7CE;
    --sky-bg: #A8DADC;
    --success: #17B591;
    --error: #c0392b;
    --warning: #E8A33D;
    --grad-header: linear-gradient(192deg, #003727 28%, #05704F);
    --grad-cover: linear-gradient(160deg, #00261B 0%, #003727 55%, #05704F 100%);
    --grad-btn: linear-gradient(135deg, #02563D, #05704F);
    --grad-strong: linear-gradient(90deg, #003727, #02563D);
    --grad-medium: linear-gradient(90deg, #02563D, #009F78);
    --grad-light: linear-gradient(90deg, #009F78, #17B591);
    --grad-coral: linear-gradient(90deg, #E65F46, #F08A72);
    --grad-neg: linear-gradient(90deg, #c0392b, #E65F46);
    --shadow-page: 0 8px 40px rgba(0, 55, 39, 0.10);
    --shadow-card: 0 1px 4px rgba(0, 0, 0, 0.05);
    --shadow-pop: 0 4px 24px rgba(0, 55, 39, 0.08);
    --w: 31.4%;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0
}


/* ---------- Side dot navigation ---------- */
.sidenav {
    position: fixed;
    top: 50%;
    right: 18px;
    transform: translateY(-50%);
    z-index: 48;
    display: flex;
    flex-direction: column;
    gap: 12px
}

.sn-dot {
    position: relative;
    width: 11px;
    height: 11px;
    border-radius: 50%;
    border: 1.5px solid #b6c9c1;
    background: transparent;
    cursor: pointer;
    padding: 0;
    transition: transform .2s, border-color .2s, background .2s
}

.sn-dot:hover {
    transform: scale(1.25);
    border-color: var(--accent)
}

.sn-dot.active {
    background: var(--accent);
    border-color: var(--accent)
}

.sn-dot .sn-lab {
    position: absolute;
    right: 22px;
    top: 50%;
    transform: translateY(-50%) translateX(6px);
    white-space: nowrap;
    background: var(--forest);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .02em;
    padding: 5px 10px;
    border-radius: 6px;
    opacity: 0;
    pointer-events: none;
    transition: opacity .2s, transform .2s
}

.sn-dot:hover .sn-lab {
    opacity: 1;
    transform: translateY(-50%) translateX(0)
}

/* ---------- Page shell ---------- */

.pad {
    padding: 24px 0px;
}

.page.cream {
    background: var(--cream);
    padding: 40px 0px;
}

.page.dark {
    background: var(--forest);
    color: #e6f2ed
}

/* ---------- Running head / foot ---------- */
.runhead {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 0px;
    border-bottom: 1px solid var(--line);
    font-size: 11px;
    letter-spacing: .14em;
    text-transform: uppercase;
    font-weight: 600;
    color: var(--muted);
}

.runhead .rh-mark {
    height: 16px;
    width: auto;
    opacity: .9
}

.runhead .rh-right {
    color: var(--green)
}

/* ---------- Eyebrow / headings ---------- */
.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 11px;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--green);
    margin-bottom: 18px;
}

.eyebrow::before {
    content: "";
    width: 30px;
    height: 2px;
    background: var(--accent);
    display: inline-block;
    border-radius: 2px
}

.eyebrow.coral {
    color: var(--coral)
}

.eyebrow.coral::before {
    background: var(--coral)
}

.eyebrow.on-dark {
    color: var(--mint)
}

.eyebrow.on-dark::before {
    background: var(--mint)
}

h1,
h2,
h3,
h4 {
    color: var(--green);
    font-weight: 700;
    line-height: 1.18;
    letter-spacing: -0.01em
}

.h-sec {
    font-size: 30px;
    font-weight: 900;
    margin-bottom: 14px;
    letter-spacing: -0.02em
}

.h-sec.coral {
    color: var(--coral)
}

.h-blk {
    font-size: 21px;
    font-weight: 700;
    margin: 34px 0 12px
}

.h-sub {
    font-size: 16px;
    font-weight: 700;
    margin: 24px 0 8px;
    color: var(--brand)
}

.dek {
    font-size: 18px;
    line-height: 1.58;
    color: var(--text-2);
    font-weight: 500;
    max-width: 62ch
}

p {
    margin-bottom: 14px;
    color: var(--text)
}

p.lead {
    font-size: 16px;
    color: var(--text-2)
}

strong,
b {
    font-weight: 700;
    color: var(--ink)
}

a {
    color: var(--brand);
    text-decoration: none
}

.muted {
    color: var(--muted)
}

/* 
.hr {
    height: 1px;
    background: var(--line);
    border: none;
    margin: 34px 0
} */

.hr-accent {
    height: 3px;
    width: 54px;
    background: var(--grad-light);
    border: none;
    border-radius: 3px;
    margin: 0 0 26px
}

.hr-accent.coral {
    background: var(--grad-coral)
}

/* ---------- Bullet lists ---------- */
ul.bl,
ol.bl {
    list-style: none;
    margin: 12px 0 16px
}

ul.bl li,
ol.bl li {
    position: relative;
    padding: 6px 0 6px 22px;
    font-size: 14px;
    line-height: 1.52;
    color: var(--text-2)
}

ul.bl li::before {
    content: "";
    position: absolute;
    left: 2px;
    top: 14px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--accent)
}

ol.bl {
    counter-reset: bl
}

ol.bl li {
    counter-increment: bl;
    padding-left: 26px
}

ol.bl li::before {
    content: counter(bl) ".";
    position: absolute;
    left: 0;
    top: 6px;
    color: var(--accent);
    font-weight: 800;
    font-size: 12.5px
}

ul.bl li strong,
ol.bl li strong {
    color: var(--ink)
}

ul.bl.tight li,
ol.bl.tight li {
    padding-top: 3px;
    padding-bottom: 3px
}

ul.bl.on-dark li {
    color: #c6e4d8
}

ul.bl.on-dark li::before {
    background: var(--mint)
}

ul.bl.on-dark li strong {
    color: #fff
}

ul.bl.check li::before {
    content: "\2713";
    background: none;
    left: 0;
    top: 6px;
    width: auto;
    height: auto;
    color: var(--accent);
    font-weight: 900;
    font-size: 12px
}

ul.bl.cross li::before {
    content: "\00d7";
    background: none;
    left: 1px;
    top: 4px;
    width: auto;
    height: auto;
    color: var(--coral);
    font-weight: 900;
    font-size: 15px
}

/* ---------- Cover ---------- */
.cover {
    background: var(--grad-cover);
    color: #fff;
    padding: 60px 0px;
}

.cover-top {
    display: flex;
    justify-content: end;
}

.cv-tag {
    font-size: 11px;
    letter-spacing: .2em;
    text-transform: uppercase;
    font-weight: 600;
    color: #9ad9c2;
    border: 1px solid rgba(154, 217, 194, 0.42);
    border-radius: 6px;
    padding: 7px 13px
}

.cv-eyebrow {
    font-size: 13px;
    letter-spacing: .22em;
    text-transform: uppercase;
    font-weight: 700;
    color: var(--mint);
    margin-bottom: 26px;
    display: flex;
    align-items: center;
    gap: 13px
}

.cv-eyebrow::before {
    content: "";
    width: 42px;
    height: 1px;
    background: var(--mint)
}

.cv-title {
    font-size: 64px;
    line-height: 1.3;
    font-weight: 600;
    letter-spacing: -0.03em;
    color: #fff;
    margin-bottom: 26px;
    text-transform: capitalize;
}

.cv-title .accent {
    color: var(--mint);
    font-weight: 700;
}

.cv-title .underline {
    position: relative;
    display: inline-block;
    font-weight: 700;
}

.cv-title .underline::after {
    content: "";
    position: absolute;
    left: 2%;
    right: 2%;
    bottom: -10px;
    height: 5px;
    border-radius: 4px;
    background: var(--mint);
    opacity: .85;
}

.cv-sub {
    font-size: 18.5px;
    line-height: 1.5;
    color: #c6e4d8;
    font-weight: 500;
    max-width: 56ch;
    margin-bottom: 46px
}

.cv-chips {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
    border-top: 1px solid rgba(154, 217, 194, 0.28);
    border-bottom: 1px solid rgba(154, 217, 194, 0.28)
}

.cv-chip {
    padding: 26px 24px 26px 24px;
    border-right: 1px solid rgba(154, 217, 194, 0.18)
}

.cv-chip:first-child {
    border-left: 1px solid rgba(154, 217, 194, 0.18);
}

.cv-chip .n {
    font-size: 42px;
    font-weight: 900;
    color: #fff;
    line-height: 1
}

.cv-chip .n .u {
    font-size: 24px;
    font-weight: 700;
    color: var(--mint);
    margin-left: 6px;
}

.cv-chip .l {
    font-size: 14px;
    color: #9ad9c2;
    line-height: 1.4;
    margin-top: 9px;
    font-weight: 500
}

.cover-foot {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-top: 42px;
    font-size: 14px;
    color: #9ad9c2;
    line-height: 1.7
}

.cover-foot .cf-r {
    text-align: right
}

.cover-foot b {
    color: #fff;
    font-weight: 700
}

/* ---------- Section divider ---------- */
.divider {
    background: var(--grad-cover);
    color: #fff;
    padding: 70px 74px;
    display: flex;
}

.divider .dv-num {
    font-size: 120px;
    font-weight: 900;
    color: rgba(23, 181, 145, 0.20);
    line-height: 0.8;
    letter-spacing: -0.04em;
    margin-bottom: 6px;
    position: relative;
    z-index: 2
}

.divider .dv-eyebrow {
    font-size: 12.5px;
    letter-spacing: .22em;
    text-transform: uppercase;
    font-weight: 700;
    color: #fff;
    margin-bottom: 18px;
    display: flex;
    align-items: center;
    gap: 12px;
    position: relative;
    z-index: 2
}

.divider .dv-eyebrow::before {
    content: "";
    width: 36px;
    height: 2px;
    background: var(--mint)
}

.divider .dv-title {
    font-size: 42px;
    font-weight: 900;
    letter-spacing: -0.025em;
    line-height: 1.05;
    color: var(--mint);
    max-width: 20ch;
    margin-bottom: 22px;
    position: relative;
    z-index: 2
}

.divider .dv-dek {
    font-size: 17px;
    color: #c6e4d8;
    font-weight: 500;
    line-height: 1.55;
    max-width: 60ch;
    position: relative;
    z-index: 2
}

.divider .dv-hyp {
    margin-top: 30px;
    padding: 20px 24px;
    border-left: 3px solid var(--mint);
    background: rgba(23, 181, 145, 0.10);
    border-radius: 0 8px 8px 0;
    max-width: 64ch;
    position: relative;
    z-index: 2
}

.divider .dv-hyp .lab {
    font-size: 11px;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--mint);
    font-weight: 700;
    margin-bottom: 7px
}

.divider .dv-hyp p {
    color: #daf0e7;
    font-size: 15px;
    margin: 0;
    font-weight: 500
}

/* ---------- Stat cards ---------- */
.stat-grid {
    display: grid;
    gap: 18px;
    margin: 28px 0
}

.stat-grid.c2 {
    grid-template-columns: repeat(2, 1fr)
}

.stat-grid.c3 {
    grid-template-columns: repeat(3, 1fr)
}

.stat-grid.c4 {
    grid-template-columns: repeat(4, 1fr)
}

.stat-grid.c5 {
    grid-template-columns: repeat(5, 1fr)
}

.stat-card {
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 12px 22px;
    background: var(--paper);
    position: relative;
    overflow: hidden;
    box-shadow: var(--shadow-card)
}

.stat-card::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: var(--grad-strong)
}

.stat-card.accent::before {
    background: var(--grad-light)
}

.stat-card.warn::before {
    background: var(--grad-neg)
}

.stat-card.coral::before {
    background: var(--grad-coral)
}

.stat-card .sc-n {
    font-size: 40px;
    font-weight: 900;
    color: var(--green);
    letter-spacing: -0.03em;
    line-height: 1
}

.stat-card .sc-n .u {
    font-size: 22px;
    font-weight: 700;
    color: var(--accent)
}

.stat-card .sc-l {
    font-size: 13px;
    color: var(--text-2);
    margin-top: 10px;
    line-height: 1.42;
    font-weight: 500
}

.stat-card .sc-src {
    font-size: 10.5px;
    color: var(--muted);
    margin-top: 12px;
    letter-spacing: .02em
}

/* ---------- Dark findings grid ---------- */
.findings {
    background: var(--grad-header);
    border-radius: 14px;
    padding: 40px 42px;
    margin: 30px 0;
    color: #fff;
    position: relative;
    overflow: hidden
}

.findings .motif {
    position: absolute;
    right: -70px;
    top: -70px;
    width: 290px;
    height: 290px;
    opacity: .07
}

.findings h3 {
    color: #fff;
    font-size: 13px;
    letter-spacing: .18em;
    text-transform: uppercase;
    margin-bottom: 26px;
    position: relative;
    z-index: 2
}

.findings h3::after {
    content: "";
    display: block;
    width: 40px;
    height: 2px;
    background: var(--mint);
    margin-top: 12px
}

.find-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px 26px;
    position: relative;
    z-index: 2
}

.find-item .fi-n {
    font-size: 38px;
    font-weight: 900;
    color: var(--mint);
    letter-spacing: -0.03em;
    line-height: 1
}

.find-item .fi-n .u {
    font-size: 20px
}

.find-item .fi-t {
    font-size: 12.5px;
    color: #c6e4d8;
    margin-top: 9px;
    line-height: 1.45;
    font-weight: 500
}

.find-item .fi-s {
    font-size: 10px;
    color: #7cb9a3;
    margin-top: 8px;
    letter-spacing: .03em;
    text-transform: uppercase;
    font-weight: 600
}

/* ---------- Exhibit ---------- */
.exhibit {
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 28px 30px 22px;
    margin: 26px 0;
    background: var(--paper);
    box-shadow: var(--shadow-card)
}

.exhibit.flush {
    background: #fbfdfc
}

.exhibit .hm-grid {
    grid-template-columns: 150px repeat(6, 1fr);
}

.ex-head {
    margin-bottom: 22px
}

.ex-kicker {
    font-size: 10.5px;
    letter-spacing: .16em;
    text-transform: uppercase;
    font-weight: 700;
    color: var(--accent);
    margin-bottom: 9px;
    display: flex;
    align-items: center;
    gap: 9px
}

.ex-kicker::before {
    content: "";
    width: 20px;
    height: 2px;
    background: var(--accent)
}

.ex-title {
    font-size: 18px;
    font-weight: 700;
    color: var(--green);
    line-height: 1.28;
    letter-spacing: -0.01em
}

.ex-sub {
    font-size: 13px;
    color: var(--text-2);
    margin-top: 6px;
    font-weight: 500
}

.ex-source {
    font-size: 10.5px;
    color: var(--muted);
    margin-top: 18px;
    padding-top: 13px;
    border-top: 1px solid var(--line-2);
    letter-spacing: .01em
}

.ex-source b {
    color: var(--text-2);
    font-weight: 700
}

.ex-flag {
    display: inline-block;
    margin-top: 10px;
    font-size: 10.5px;
    line-height: 1.5;
    color: #8a5a20;
    background: rgba(232, 163, 61, .12);
    border: 1px solid rgba(232, 163, 61, .3);
    border-radius: 6px;
    padding: 7px 11px
}

.ex-flag b {
    color: #7a4d16
}

/* ---------- Horizontal bar chart (static) ---------- */
.barh {
    display: flex;
    flex-direction: column;
    gap: 15px
}

.barh-row {
    display: grid;
    grid-template-columns: 128px 1fr;
    align-items: center;
    gap: 16px
}

.barh-lab {
    font-size: 13px;
    font-weight: 600;
    color: var(--ink);
    text-align: right;
    line-height: 1.25
}

.barh-lab .sub {
    display: block;
    font-size: 10.5px;
    color: var(--muted);
    font-weight: 500;
    margin-top: 2px
}

.barh-track {
    position: relative;
    height: 34px;
    background: #eef2f0;
    border-radius: 6px;
    overflow: hidden
}

.barh-fill {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding-right: 12px
}

.barh-fill .v {
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .01em
}

.barh-fill.s-strong {
    background: var(--grad-strong)
}

.barh-fill.s-medium {
    background: var(--grad-medium)
}

.barh-fill.s-light {
    background: var(--grad-light)
}

.barh-fill.s-mute {
    background: #c3d1cb
}

.barh-fill.s-mute .v {
    color: var(--ink)
}

.delta {
    font-size: 11px;
    font-weight: 700;
    padding: 2px 7px;
    border-radius: 5px;
    margin-left: 8px;
    display: inline-block
}

.delta.up {
    background: rgba(23, 181, 145, 0.16);
    color: #0c7d61
}

.delta.dn {
    background: rgba(230, 95, 70, 0.14);
    color: var(--error)
}

/* ---------- Donut ---------- */
.donut-wrap {
    display: flex;
    align-items: center;
    gap: 30px;
    flex-wrap: wrap
}

.donut {
    flex-shrink: 0
}

.donut-legend {
    display: flex;
    flex-direction: column;
    gap: 11px;
    flex: 1;
    min-width: 200px
}

.dl-item {
    display: flex;
    align-items: center;
    gap: 11px;
    font-size: 13px
}

.dl-dot {
    width: 13px;
    height: 13px;
    border-radius: 3px;
    flex-shrink: 0
}

.dl-item .dl-lab {
    color: var(--ink);
    font-weight: 600;
    flex: 1
}

.dl-item .dl-lab span {
    display: block;
    font-size: 11.5px;
    color: var(--muted);
    font-weight: 500;
    margin-top: 1px
}

.dl-item .dl-val {
    color: var(--green);
    font-weight: 800;
    font-variant-numeric: tabular-nums
}

.donut .dc-n {
    font-size: 30px;
    font-weight: 900;
    fill: var(--green)
}

.donut .dc-l {
    font-size: 8.5px;
    font-weight: 700;
    fill: var(--muted);
    letter-spacing: .08em;
    text-transform: uppercase
}

.donut .seg {
    transition: stroke-dashoffset .8s cubic-bezier(0.22, 1, 0.36, 1)
}

/* ---------- Tables ---------- */
.tbl {
    width: 100%;
    border-collapse: collapse;
    margin: 22px 0;
    font-size: 13px
}

.tbl th {
    background: var(--green);
    color: #fff;
    text-align: left;
    padding: 13px 15px;
    font-size: 11px;
    letter-spacing: .07em;
    text-transform: uppercase;
    font-weight: 700;
    vertical-align: bottom
}

.tbl th.num,
.tbl td.num {
    text-align: right;
    font-variant-numeric: tabular-nums
}

.tbl th:first-child {
    border-radius: 8px 0 0 0
}

.tbl th:last-child {
    border-radius: 0 8px 0 0
}

.tbl td {
    padding: 12px 15px;
    border-bottom: 1px solid var(--line);
    color: var(--text);
    vertical-align: top;
    line-height: 1.45
}

.tbl tr:nth-child(even) td {
    background: #fafcfb
}

.tbl tr:last-child td {
    border-bottom: none
}

.tbl td strong {
    color: var(--green)
}

.tbl .hl {
    color: var(--green);
    font-weight: 800
}

.tbl .pill {
    display: inline-block;
    font-size: 10.5px;
    font-weight: 700;
    padding: 3px 9px;
    border-radius: 20px;
    letter-spacing: .02em
}

.pill.crit {
    background: rgba(192, 57, 43, 0.10);
    color: var(--error)
}

.pill.high {
    background: rgba(0, 159, 120, 0.12);
    color: var(--accent)
}

.pill.found {
    background: rgba(2, 86, 61, 0.09);
    color: var(--green)
}

.pill.ok {
    background: rgba(23, 181, 145, 0.16);
    color: #0c7d61
}

.pill.warn {
    background: rgba(232, 163, 61, 0.16);
    color: #8a5a20
}

.pill.coral {
    background: rgba(230, 95, 70, 0.12);
    color: var(--coral)
}

/* ---------- HROne perspective callout ---------- */
.perspective {
    border: 1px solid rgba(0, 159, 120, 0.22);
    border-left: 4px solid var(--accent);
    background: linear-gradient(180deg, #f4fbf8, #fbfdfc);
    border-radius: 0 12px 12px 0;
    padding: 26px 30px;
    margin: 30px 0;
    position: relative
}

.persp-head {
    display: flex;
    align-items: center;
    gap: 11px;
    margin-bottom: 14px
}

.persp-head .pmark {
    width: 24px;
    height: 24px
}

.persp-head .pt {
    font-size: 12px;
    letter-spacing: .13em;
    text-transform: uppercase;
    font-weight: 700;
    color: var(--brand)
}

.persp-head .pby {
    font-size: 11px;
    color: var(--muted);
    margin-left: auto;
    font-weight: 600;
    letter-spacing: .02em
}

.perspective p {
    font-size: 15.5px;
    line-height: 1.62;
    color: var(--ink);
    font-weight: 500;
    margin-bottom: 10px
}

.perspective p:last-child {
    margin-bottom: 0
}

.perspective .lq {
    font-size: 17px;
    font-weight: 700;
    color: var(--green);
    line-height: 1.45;
    margin-bottom: 12px;
    letter-spacing: -0.01em
}

/* ---------- Inline note ---------- */
.note {
    border-left: 3px solid var(--mint);
    background: var(--subtle);
    padding: 16px 22px;
    border-radius: 0 8px 8px 0;
    margin: 22px 0
}

.note .nl {
    font-size: 11px;
    letter-spacing: .13em;
    text-transform: uppercase;
    font-weight: 700;
    color: var(--brand);
    margin-bottom: 6px
}

.note p {
    margin: 0;
    font-size: 14.5px;
    color: var(--ink);
    font-weight: 500;
    line-height: 1.55
}

.note.warn {
    border-left-color: var(--coral);
    background: rgba(230, 95, 70, 0.05)
}

.note.warn .nl {
    color: var(--coral)
}

.note.mint {
    background: var(--mint-bg);
    border-left-color: var(--accent)
}

.note.peach {
    background: var(--peach-bg);
    border-left-color: var(--coral)
}

.note.peach .nl {
    color: #a8412c
}

.note.gold {
    background: rgba(255, 220, 120, .2);
    border-left-color: var(--warning)
}

.note.gold .nl {
    color: #8a5a20
}

/* HROne signature dark ribbon callout (from the printed report) */
.ribbon {
    background: var(--green);
    color: #fff;
    border-radius: 10px;
    padding: 20px 26px;
    margin: 22px 0;
    position: relative;
    overflow: hidden
}

.ribbon .waves {
    position: absolute;
    right: -6%;
    bottom: -30%;
    width: 46%;
    opacity: .18;
    pointer-events: none
}

.ribbon p {
    color: #fff;
    margin: 0;
    font-size: 15.5px;
    font-weight: 600;
    line-height: 1.5;
    text-align: center;
}

.ribbon p+p {
    margin-top: 5px;
    color: #bfe5d6;
    font-weight: 500
}

.ribbon .rb-lab {
    font-size: 10.5px;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--mint);
    font-weight: 700;
    margin-bottom: 8px;
    position: relative;
    z-index: 2;
    text-align: center;
}

/* ---------- Pull quote ---------- */
.pullquote {
    margin: 36px 0;
    padding: 8px 0 8px 30px;
    border-left: 4px solid var(--accent)
}

.pullquote .pq-t {
    font-size: 25px;
    font-weight: 900;
    color: var(--green);
    line-height: 1.28;
    letter-spacing: -0.02em
}

.pullquote .pq-a {
    font-size: 13px;
    color: var(--muted);
    margin-top: 14px;
    font-weight: 600;
    letter-spacing: .02em
}

.pullquote.coral {
    border-left-color: var(--coral)
}

.pullquote.coral .pq-t {
    color: var(--coral)
}

.benchmark-data,
.hotspot_one,
.segment,
.implications,
.industry,
.use-case,
.stoping_scale,
.radiness,
.uneven,
.disruption {
    padding: 60px 0px;
}

/* ---------- Columns ---------- */
.cols {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 34px
}

.cols.w-wide {
    grid-template-columns: 1.3fr 1fr
}

.cols.w-narrow {
    grid-template-columns: 1fr 1.3fr
}

/* ---------- TOC ---------- */
.toc-list {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin-top: 8px
}

.toc-row {
    display: grid;
    grid-template-columns: 56px 1fr auto;
    align-items: baseline;
    gap: 18px;
    padding: 17px 0;
    border-bottom: 1px solid var(--line);
    text-align: left
}

.toc-row:last-child {
    border-bottom: none
}

a.toc-row {
    transition: padding-left .2s, background .2s
}

a.toc-row:hover {
    padding-left: 8px;
    background: linear-gradient(90deg, var(--subtle), transparent)
}

.toc-num {
    font-size: 14px;
    font-weight: 900;
    color: var(--mint);
    font-variant-numeric: tabular-nums;
    letter-spacing: .04em
}

.toc-t {
    font-size: 16.5px;
    font-weight: 700;
    color: var(--green)
}

.toc-d {
    font-size: 16px;
    color: var(--muted);
    margin-top: 3px;
    font-weight: 500
}

.toc-pg {
    font-size: 13px;
    color: var(--brand);
    font-weight: 700;
    font-variant-numeric: tabular-nums
}

/* ---------- Numbered list cards ---------- */
.numlist {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin: 22px 0
}

.numitem {
    display: grid;
    grid-template-columns: 42px 1fr;
    gap: 18px;
    align-items: start;
    padding: 18px 20px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--paper);
    box-shadow: var(--shadow-card)
}

.numitem .ni-n {
    width: 38px;
    height: 38px;
    border-radius: 9px;
    background: var(--grad-btn);
    color: #fff;
    font-weight: 900;
    font-size: 16px;
    display: flex;
    align-items: center;
    justify-content: center
}

.numitem.coral .ni-n {
    background: var(--grad-coral)
}

.numitem .ni-t {
    font-size: 15px;
    font-weight: 700;
    color: var(--green);
    margin-bottom: 4px
}

.numitem .ni-b {
    font-size: 13.5px;
    color: var(--text-2);
    line-height: 1.5
}

.numitem .ni-b strong {
    color: var(--ink)
}

/* ---------- Insight cards (Top 10) ---------- */
.ins-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 16px;
    margin: 30px 0;
    position: relative;
    z-index: 2
}

.ins-card {
    background: rgba(255, 255, 255, 0.055);
    border: 1px solid rgba(154, 217, 194, 0.20);
    border-radius: 12px;
    padding: 20px;
    position: relative;
    transition: transform .25s, background .25s, border-color .25s
}

.ins-card:hover {
    transform: translateY(-4px);
    background: rgba(255, 255, 255, 0.09);
    border-color: rgba(23, 181, 145, 0.5)
}

.ins-card .ic-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 20px
}

.ins-card .ic-n {
    font-size: 34px;
    font-weight: 900;
    color: rgba(198, 228, 216, 0.4);
    line-height: 1;
    letter-spacing: -0.03em
}

.ins-card .ic-ic {
    width: 34px;
    height: 34px;
    border-radius: 9px;
    background: var(--mint);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0
}

.ins-card .ic-ic svg {
    width: 18px;
    height: 18px;
    stroke: var(--forest);
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round
}

.ins-card .ic-t {
    font-size: 18px;
    font-weight: 600;
    color: #fff;
    line-height: 1.3;
    margin-bottom: 9px
}

.ins-card .ic-d {
    font-size: 14px;
    color: #a9d3c2;
    line-height: 1.48;
    font-weight: 500
}

/* ---------- Pyramid ---------- */
.pyramid {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    margin: 26px 0
}

.pyr-tier {
    color: #fff;
    border-radius: 8px;
    padding: 20px 26px;
    text-align: center;
    position: relative;
    box-shadow: var(--shadow-card)
}

.pyr-1 {
    width: 58%;
    background: var(--grad-strong)
}

.pyr-2 {
    width: 78%;
    background: var(--grad-medium)
}

.pyr-3 {
    width: 100%;
    background: var(--grad-light)
}

.pyr-tier .pt-tag {
    font-size: 10.5px;
    letter-spacing: .14em;
    text-transform: uppercase;
    font-weight: 700;
    opacity: .82;
    margin-bottom: 5px
}

.pyr-tier .pt-t {
    font-size: 17px;
    font-weight: 800;
    margin-bottom: 5px
}

.pyr-tier .pt-d {
    font-size: 12.5px;
    opacity: .92;
    line-height: 1.4;
    font-weight: 500;
    max-width: 60ch;
    margin: 0 auto
}

/* ---------- Process flow ---------- */
.flow {
    display: grid;
    grid-template-columns: 1fr 28px 1fr 28px 1fr;
    align-items: stretch;
    margin: 26px 0
}

.flow.f4 {
    grid-template-columns: 1fr 24px 1fr 24px 1fr 24px 1fr
}

.flow.f5 {
    grid-template-columns: 1fr 20px 1fr 20px 1fr 20px 1fr 20px 1fr
}

.flow-step {
    border: 1px solid var(--line);
    border-top: 3px solid var(--accent);
    border-radius: 10px;
    padding: 20px 20px;
    background: var(--paper);
    box-shadow: var(--shadow-card)
}

.flow-step .fs-n {
    font-size: 11px;
    letter-spacing: .12em;
    text-transform: uppercase;
    font-weight: 700;
    color: var(--accent);
    margin-bottom: 9px
}

.flow-step .fs-t {
    font-size: 15.5px;
    font-weight: 800;
    color: var(--green);
    /* margin-bottom: 9px */
}

.flow-step .fs-io {
    font-size: 12px;
    line-height: 1.5;
    color: var(--text-2)
}

.flow-step .fs-io b {
    display: block;
    margin-top: 7px;
    font-size: 11px;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--brand)
}

.flow-arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--mint);
    font-size: 22px;
    font-weight: 900
}

/* ---------- Legend ---------- */
.legend {
    display: flex;
    gap: 22px;
    flex-wrap: wrap;
    margin-top: 12px
}

.legend .lg {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    font-weight: 600;
    color: var(--ink)
}

.legend .lg .lc {
    width: 18px;
    height: 3px;
    border-radius: 2px
}

.legend .lg .lc.dot {
    width: 12px;
    height: 12px;
    border-radius: 3px
}

/* ---------- Recommendation columns ---------- */
.rec-cols {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
    margin: 24px 0
}

.rec-cols.c2 {
    grid-template-columns: repeat(2, 1fr)
}

.rec-col {
    border: 1px solid var(--line);
    border-radius: 12px;
    overflow: hidden;
    background: var(--paper);
    box-shadow: var(--shadow-card)
}

.rec-col .rc-hd {
    background: var(--grad-header);
    color: #fff;
    padding: 16px 20px;
    font-size: 14px;
    font-weight: 800;
    letter-spacing: .01em
}

.rec-col .rc-hd span {
    display: block;
    font-size: 10.5px;
    color: var(--mint);
    letter-spacing: .12em;
    text-transform: uppercase;
    font-weight: 700;
    margin-bottom: 4px
}

.rec-col.coral .rc-hd {
    background: var(--grad-coral)
}

.rec-col.coral .rc-hd span {
    color: #ffe6df
}

.rec-col ol {
    list-style: none;
    counter-reset: r;
    padding: 14px 20px 18px
}

.rec-col li {
    counter-increment: r;
    position: relative;
    padding: 11px 0 11px 32px;
    font-size: 13px;
    line-height: 1.5;
    color: var(--text-2);
    border-bottom: 1px solid var(--line-2)
}

.rec-col li:last-child {
    border-bottom: none
}

.rec-col li::before {
    content: counter(r);
    position: absolute;
    left: 0;
    top: 10px;
    width: 21px;
    height: 21px;
    background: var(--subtle);
    color: var(--brand);
    border-radius: 6px;
    font-size: 11px;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center
}

.rec-col li strong {
    color: var(--green)
}

/* ---------- Compare panels ---------- */
.split2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
    margin: 24px 0
}

.split3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
    margin: 24px 0
}

.sp-panel {
    border: 1px solid var(--line);
    border-radius: 12px;
    overflow: hidden;
    background: var(--paper);
    box-shadow: var(--shadow-card)
}

.sp-hd {
    padding: 14px 20px;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: .02em;
    color: #fff;
    display: flex;
    align-items: center;
    gap: 10px
}

.sp-panel.gone .sp-hd {
    background: var(--grad-neg)
}

.sp-panel.read .sp-hd {
    background: var(--grad-strong)
}

.sp-panel.assist .sp-hd {
    background: var(--grad-medium)
}

.sp-list {
    list-style: none;
    padding: 8px 20px 16px
}

.sp-list li {
    padding: 10px 0 10px 26px;
    position: relative;
    font-size: 13px;
    line-height: 1.45;
    color: var(--text-2);
    border-bottom: 1px solid var(--line-2)
}

.sp-list li:last-child {
    border-bottom: none
}

.sp-list li strong {
    color: var(--ink);
    display: block
}

.sp-panel.gone .sp-list li::before {
    content: "\00d7";
    position: absolute;
    left: 0;
    top: 9px;
    color: var(--error);
    font-weight: 900;
    font-size: 15px
}

.sp-panel.read .sp-list li::before {
    content: "\2713";
    position: absolute;
    left: 0;
    top: 10px;
    color: #0c7d61;
    font-weight: 900;
    font-size: 13px
}

.sp-panel.assist .sp-list li::before {
    content: "\223C";
    position: absolute;
    left: 0;
    top: 9px;
    color: var(--accent);
    font-weight: 900;
    font-size: 14px
}

/* ---------- Timeline ---------- */
.tl {
    position: relative;
    margin: 24px 0 8px;
    padding-left: 4px
}

.tl::before {
    content: "";
    position: absolute;
    left: 11px;
    top: 6px;
    bottom: 6px;
    width: 2px;
    background: linear-gradient(180deg, var(--mint), var(--accent), var(--green))
}

.tl-item {
    position: relative;
    padding: 0 0 22px 40px
}

.tl-item:last-child {
    padding-bottom: 0
}

.tl-item .tl-dot {
    position: absolute;
    left: 0px;
    top: 2px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #fff;
    border: 3px solid var(--accent);
    box-shadow: 0 0 0 4px rgba(0, 159, 120, 0.1)
}

.tl-item .tl-when {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--accent)
}

.tl-item .tl-t {
    font-size: 15px;
    font-weight: 800;
    color: var(--green);
    margin: 3px 0 4px
}

.tl-item .tl-d {
    font-size: 13px;
    color: var(--text-2);
    line-height: 1.5
}

.tl-item .tl-d strong {
    color: var(--ink)
}

/* ---------- Utility ---------- */
.mt0 {
    margin-top: 0
}

.mb0 {
    margin-bottom: 0
}

.tc {
    text-align: center
}

.grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 28px
}

.grid-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px
}

.badge-row {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin: 16px 0
}

.badge {
    font-size: 11.5px;
    font-weight: 700;
    padding: 6px 13px;
    border-radius: 7px;
    background: var(--subtle);
    color: var(--brand);
    border: 1px solid rgba(0, 159, 120, 0.16)
}

.badge.lg {
    font-size: 13px;
    padding: 10px 18px;
    border-radius: 24px;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    background: var(--mint-bg);
    border-color: rgba(0, 159, 120, .2)
}

.badge.lg svg {
    width: 15px;
    height: 15px;
    stroke: var(--accent);
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round
}

/* ============================================================
   INTERACTIVE LAYER
   ============================================================ */
.reveal {
    opacity: 1;
    transform: none
}

html.armed .reveal {
    opacity: 0;
    transform: translateY(22px);
    transition: opacity .7s cubic-bezier(.22, 1, .36, 1), transform .7s cubic-bezier(.22, 1, .36, 1);
    margin-top: 20px;
}

html.armed .reveal.is-visible {
    opacity: 1;
    transform: none
}

#tip {
    position: fixed;
    z-index: 90;
    pointer-events: none;
    opacity: 0;
    transform: translateY(4px);
    transition: opacity .12s ease, transform .12s ease;
    background: var(--forest);
    color: #fff;
    border: 1px solid rgba(23, 181, 145, .45);
    border-radius: 9px;
    padding: 10px 13px;
    font-size: 12px;
    line-height: 1.5;
    box-shadow: 0 8px 28px rgba(0, 26, 18, .4);
    max-width: 260px
}

#tip.show {
    opacity: 1;
    transform: translateY(0)
}

#tip .tt-h {
    font-weight: 800;
    color: #fff;
    font-size: 12.5px;
    margin-bottom: 3px;
    letter-spacing: .01em
}

#tip .tt-r {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #c6e4d8;
    font-weight: 500
}

#tip .tt-r b {
    color: #fff;
    font-weight: 800;
    margin-left: auto;
    font-variant-numeric: tabular-nums
}

#tip .tt-sw {
    width: 9px;
    height: 9px;
    border-radius: 2px;
    flex-shrink: 0
}

.seg {
    display: inline-flex;
    background: #edf2ef;
    border: 1px solid var(--line);
    border-radius: 9px;
    padding: 4px;
    gap: 3px;
    flex-wrap: wrap
}

.seg-btn {
    border: none;
    background: transparent;
    font-family: inherit;
    font-size: 12px;
    font-weight: 700;
    color: var(--text-2);
    padding: 7px 14px;
    border-radius: 6px;
    cursor: pointer;
    letter-spacing: .01em;
    transition: background .2s, color .2s, box-shadow .2s
}

.seg-btn:hover {
    color: var(--green)
}

.seg-btn.active {
    background: var(--paper);
    color: var(--green);
    box-shadow: 0 1px 4px rgba(0, 55, 39, .14)
}

.ex-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 20px
}

.svg-chart {
    width: 100%;
    height: auto;
    display: block;
    overflow: visible
}

.svg-chart text {
    font-family: 'Satoshi', sans-serif
}

.axis-lab {
    fill: var(--muted);
    font-size: 11px;
    font-weight: 600
}

.hot {
    cursor: crosshair
}

.donut-i .seg {
    cursor: pointer;
    transition: stroke-dashoffset .8s cubic-bezier(.22, 1, .36, 1), opacity .2s, stroke-width .2s
}

.donut-i.dim .seg:not(.on) {
    opacity: .32
}

.donut-i .seg.on {
    stroke-width: 25
}

.dl-item.hot {
    cursor: pointer;
    border-radius: 7px;
    padding: 4px 6px;
    margin: -4px -6px;
    transition: background .2s
}

.dl-item.hot:hover,
.dl-item.hot.on {
    background: var(--subtle)
}

/* animated horizontal bars */
.hbar-chart {
    display: flex;
    flex-direction: column;
    gap: 13px
}

.hbar-row {
    display: grid;
    grid-template-columns: 188px 1fr 104px;
    align-items: center;
    gap: 14px;
    transition: transform .45s cubic-bezier(.22, 1, .36, 1)
}

.hbar-row.wide {
    grid-template-columns: 230px 1fr 104px
}

.hbar-lab {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--ink);
    text-align: right;
    line-height: 1.2
}

.hbar-lab .sub {
    display: block;
    font-size: 10px;
    color: var(--muted);
    font-weight: 500;
    margin-top: 2px
}

.hbar-track {
    position: relative;
    height: 30px;
    background: #eef2f0;
    border-radius: 6px;
    overflow: hidden
}

.hbar-fill {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    border-radius: 6px;
    width: var(--w);
    background: var(--grad-medium);
    transition: width 1s cubic-bezier(.22, 1, .36, 1), filter .2s
}

.hbar-row:hover .hbar-fill {
    filter: brightness(1.08)
}

.hbar-fill.s-strong {
    background: var(--grad-strong)
}

.hbar-fill.s-accent {
    background: var(--grad-light)
}

.hbar-fill.s-coral {
    background: var(--grad-coral)
}

.hbar-fill.s-mute {
    background: #c3d1cb
}

.hbar-val {
    font-size: 13.5px;
    font-weight: 800;
    color: var(--green);
    font-variant-numeric: tabular-nums;
    text-align: right
}

.hbar-val .vsub {
    display: block;
    font-size: 10.5px;
    color: var(--muted);
    font-weight: 600
}

html.armed .hbar-fill {
    width: 0
}

html.armed .is-visible .hbar-fill {
    width: var(--w)
}

/* grouped vertical bars */
.gbar-wrap {
    display: flex;
    align-items: flex-end;
    gap: 30px;
    height: 250px;
    padding: 18px 8px 0;
    border-bottom: 2px solid var(--line);
    margin-bottom: 12px
}

.gbar-group {
    flex: 1;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: 10px;
    height: 100%
}

.gbar {
    flex: 1;
    max-width: 56px;
    border-radius: 6px 6px 0 0;
    position: relative;
    height: var(--h);
    background: var(--grad-medium);
    cursor: pointer;
    transition: height .9s cubic-bezier(.22, 1, .36, 1), filter .2s;
    align-self: flex-end
}

.gbar:hover {
    filter: brightness(1.1)
}

.gbar .gv {
    position: absolute;
    top: -22px;
    left: 0;
    right: 0;
    text-align: center;
    font-size: 12px;
    font-weight: 800;
    color: var(--green)
}

html.armed .gbar {
    height: 0
}

html.armed .is-visible .gbar {
    height: var(--h)
}

.gbar-caps {
    display: flex;
    gap: 30px;
    padding: 0 8px
}

.gbar-cap {
    flex: 1;
    text-align: center;
    font-size: 13px;
    font-weight: 700;
    color: var(--ink)
}

.gbar-cap .sub {
    display: block;
    font-size: 10.5px;
    color: var(--muted);
    font-weight: 500;
    margin-top: 2px
}

/* ---------- Heatmap (HROne signature exhibit) ---------- */
.hm {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 6px
}

.hm-grid {
    display: grid;
    gap: 5px;
    min-width: 660px
}

.hm-ch {
    font-size: 10.5px;
    font-weight: 700;
    color: var(--brand);
    text-align: center;
    line-height: 1.25;
    padding: 0 2px 8px;
    letter-spacing: .02em;
    align-self: end
}

.hm-rh {
    font-size: 12px;
    font-weight: 700;
    color: var(--ink);
    text-align: right;
    padding-right: 12px;
    align-self: center;
    line-height: 1.2;
    white-space: nowrap
}

.hm-rh span {
    display: block;
    font-size: 10px;
    color: var(--muted);
    font-weight: 500
}

.hm-cell {
    position: relative;
    font-style: normal;
    border-radius: 7px;
    height: 46px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    cursor: default;
    transition: transform .18s, box-shadow .18s, opacity .5s;
    opacity: 1;
    background: #eef2f0
}

.hm-cell:hover {
    transform: scale(1.07);
    box-shadow: 0 4px 16px rgba(0, 55, 39, .22);
    z-index: 3
}

html.armed .hm-cell {
    opacity: 0
}

html.armed .is-visible .hm-cell {
    opacity: 1
}

.hm-cell.tp {
    height: auto;
    min-height: 52px;
    font-size: 10px;
    font-weight: 600;
    line-height: 1.3;
    white-space: normal;
    text-align: center;
    padding: 8px 7px;
    background: #f4f7f6;
    color: var(--brand);
    border: 1px dashed var(--line)
}

.hm-cell.tp:hover {
    transform: none;
    box-shadow: none
}

.hm-yl {
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--brand);
    text-align: center;
    align-self: center;
    padding-right: 6px
}

/* ---------- Maturity ladder ---------- */
.ladder {
    display: flex;
    flex-direction: column-reverse;
    gap: 9px;
    margin: 24px 0
}

.ld-step {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 20px;
    border-radius: 9px;
    padding: 18px 24px;
    color: #fff;
    position: relative;
    overflow: hidden;
    transition: transform .2s
}

.ld-step:hover {
    transform: translateX(6px)
}

.ld-step .ld-t {
    font-size: 15px;
    font-weight: 800;
    line-height: 1.3
}

.ld-step .ld-d {
    font-size: 12.5px;
    opacity: .9;
    font-weight: 500;
    margin-top: 3px
}

.ld-step .ld-v {
    font-size: 24px;
    font-weight: 900;
    letter-spacing: -.02em;
    font-variant-numeric: tabular-nums;
    white-space: nowrap
}

.ld-step .ld-v span {
    display: block;
    font-size: 11px;
    font-weight: 600;
    opacity: .82;
    text-align: right;
    letter-spacing: 0
}

.ld-1 {
    background: #c3d1cb;
    color: var(--ink)
}

.ld-2 {
    background: var(--grad-light)
}

.ld-3 {
    background: var(--grad-medium)
}

.ld-4 {
    background: var(--grad-strong)
}

.ld-5 {
    background: var(--forest)
}

.ld-axis {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--brand);
    margin-bottom: 14px
}

.ld-axis::after {
    content: "";
    flex: 1;
    height: 2px;
    background: linear-gradient(90deg, #c3d1cb, var(--accent), var(--forest));
    border-radius: 2px
}

/* ---------- Stacked distribution bar ---------- */
.stackbar {
    display: flex;
    height: 56px;
    border-radius: 9px;
    overflow: hidden;
    margin: 20px 0 14px;
    box-shadow: var(--shadow-card)
}

.sb-seg {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 13px;
    font-weight: 800;
    position: relative;
    cursor: default;
    width: var(--w);
    transition: width 1s cubic-bezier(.22, 1, .36, 1), filter .2s
}

.sb-seg:hover {
    filter: brightness(1.12)
}

html.armed .sb-seg {
    width: 0
}

html.armed .is-visible .sb-seg {
    width: var(--w)
}

.sb-legend {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 12px 20px;
    margin-top: 16px
}

.sb-li {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    font-size: 12.5px
}

.sb-li .sb-dot {
    width: 12px;
    height: 12px;
    border-radius: 3px;
    flex-shrink: 0;
    margin-top: 3px
}

.sb-li .sb-k {
    font-weight: 700;
    color: var(--ink)
}

.sb-li .sb-k b {
    color: var(--green);
    font-weight: 900;
    font-variant-numeric: tabular-nums
}

.sb-li .sb-s {
    display: block;
    color: var(--muted);
    font-weight: 500;
    font-size: 11.5px;
    margin-top: 1px
}

/* ---------- Scoring bands ---------- */
.bands {
    display: flex;
    flex-direction: column-reverse;
    gap: 8px;
    margin: 24px 0
}

.band {
    display: grid;
    grid-template-columns: 60px 1fr;
    align-items: center;
    gap: 20px;
    border-radius: 9px;
    padding: 18px 24px;
    color: #fff;
    transition: transform .2s
}

.band:hover {
    transform: translateX(6px)
}

.band .bd-n {
    font-size: 26px;
    font-weight: 900;
    opacity: .55;
    letter-spacing: -.03em;
    font-variant-numeric: tabular-nums
}

.band .bd-t {
    font-size: 16px;
    font-weight: 800
}

.band .bd-d {
    font-size: 12.5px;
    opacity: .9;
    font-weight: 500;
    margin-top: 3px;
    line-height: 1.45
}

.bd-1 {
    background: #c0392b
}

.bd-2 {
    background: #E8A33D;
    color: #3d2a08
}

.bd-3 {
    background: var(--mint)
}

.bd-4 {
    background: var(--accent)
}

.bd-5 {
    background: var(--forest)
}

.bd-2 .bd-n {
    opacity: .4
}

/* ---------- Role evolution ---------- */
.evo {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 24px 0
}

.evo-row {
    display: grid;
    grid-template-columns: 1fr 42px 1fr 1.35fr;
    align-items: center;
    gap: 16px;
    padding: 16px 20px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--paper);
    box-shadow: var(--shadow-card);
    transition: border-color .2s, box-shadow .2s
}

.evo-row:hover {
    border-color: rgba(0, 159, 120, .4);
    box-shadow: var(--shadow-pop)
}

.evo-row .ev-now {
    font-size: 14.5px;
    font-weight: 700;
    color: var(--muted)
}

.evo-row .ev-arrow {
    text-align: center;
    color: var(--mint);
    font-size: 20px;
    font-weight: 900
}

.evo-row .ev-next {
    font-size: 15px;
    font-weight: 800;
    color: var(--green)
}

.evo-row .ev-ch {
    font-size: 12.5px;
    color: var(--text-2);
    line-height: 1.45
}

.evo-head {
    display: grid;
    grid-template-columns: 1fr 42px 1fr 1.35fr;
    gap: 16px;
    padding: 0 20px 4px;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--brand)
}

/* ---------- Glossary ---------- */
.gloss {
    display: grid;
    grid-template-columns: 230px 1fr;
    gap: 0
}

.gloss dt {
    font-size: 13.5px;
    font-weight: 800;
    color: var(--green);
    padding: 13px 16px 13px 0;
    border-bottom: 1px solid var(--line-2)
}

.gloss dd {
    font-size: 13.5px;
    color: var(--text-2);
    padding: 13px 0;
    border-bottom: 1px solid var(--line-2);
    line-height: 1.5
}

/* ---------- About / closing ---------- */
.about {
    background: var(--grad-cover);
    color: #fff;
    padding: 60px 74px;
    position: relative;
    overflow: hidden
}

.about .motif {
    position: absolute;
    right: -90px;
    top: -90px;
    width: 360px;
    height: 360px;
    opacity: .07
}

.about .waves {
    position: absolute;
    left: 0;
    bottom: -30px;
    width: 110%;
    opacity: .14
}

.about .ab-logo {
    height: 32px;
    margin-bottom: 30px;
    position: relative;
    z-index: 2
}

.about h2 {
    color: #fff;
    font-size: 30px;
    font-weight: 900;
    margin-bottom: 18px;
    letter-spacing: -0.02em;
    position: relative;
    z-index: 2
}

.about p {
    color: #c6e4d8;
    font-size: 15px;
    line-height: 1.65;
    max-width: 66ch;
    font-weight: 500;
    position: relative;
    z-index: 2
}

.about .ab-cta {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-top: 26px;
    background: var(--grad-light);
    color: #fff;
    padding: 13px 24px;
    border-radius: 9px;
    font-weight: 700;
    font-size: 14px;
    position: relative;
    z-index: 2
}

.ab-meta {
    display: flex;
    gap: 50px;
    margin-top: 40px;
    padding-top: 28px;
    border-top: 1px solid rgba(154, 217, 194, 0.28);
    position: relative;
    z-index: 2;
    flex-wrap: wrap
}

.ab-meta .am-k {
    font-size: 11px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--mint);
    font-weight: 700;
    margin-bottom: 7px
}

.ab-meta .am-v {
    font-size: 13.5px;
    color: #daf0e7;
    line-height: 1.6;
    font-weight: 500
}

/* ---------- Print ---------- */
@media print {
    html {
        scroll-behavior: auto
    }

    body {
        background: #fff;
        padding: 0
    }

    .toolbar,
    .progress,
    .sidenav,
    #tip {
        display: none !important
    }

    .page {
        box-shadow: none;
        margin: 0 auto;
        width: 100%;
        max-width: 100%;
        page-break-after: always;
        break-after: page
    }

    .page:last-child {
        page-break-after: auto
    }

    .exhibit,
    .stat-card,
    .numitem,
    .rec-col,
    .perspective,
    .findings,
    .flow-step,
    .sp-panel,
    .evo-row {
        box-shadow: none
    }

    a {
        color: var(--brand)
    }

    html.armed .reveal {
        opacity: 1 !important;
        transform: none !important
    }

    html.armed .hbar-fill {
        width: var(--w) !important
    }

    html.armed .gbar {
        height: var(--h) !important
    }

    html.armed .sb-seg {
        width: var(--w) !important
    }

    html.armed .hm-cell {
        opacity: 1 !important
    }

    .seg {
        display: none !important
    }

    @page {
        size: A4 landscape;
        margin: 0
    }
}

.rec-col>div:last-child {
    padding: 18px 20px;
}

.footer-section .footer-logo-div .newsletter-head .stay-up strong {
    color: #fff;
}

/* ---------- Tablet ---------- */
@media (max-width:991px) {
    .pad {
        padding: 44px 36px 50px
    }

    .runhead,
    .page-foot {
        padding-left: 36px;
        padding-right: 36px
    }

    .h-sec {
        font-size: 26px
    }

    .cv-title {
        font-size: 48px
    }

    .divider .dv-num {
        font-size: 96px
    }

    .divider .dv-title {
        font-size: 36px
    }

    .cv-chips {
        grid-template-columns: repeat(2, 1fr)
    }

    .cv-chip {
        border-bottom: 1px solid rgba(154, 217, 194, 0.18);
    }

    .cv-chips .cv-chip:nth-child(3) {
        border-left: 1px solid rgba(154, 217, 194, 0.18);
    }

    .find-grid {
        grid-template-columns: repeat(2, 1fr)
    }

    .ins-grid {
        grid-template-columns: repeat(2, 1fr)
    }

    .cols,
    .cols.w-wide,
    .cols.w-narrow,
    .grid-2,
    .grid-3,
    .stat-grid.c3,
    .stat-grid.c4,
    .stat-grid.c5,
    .rec-cols,
    .rec-cols.c2,
    .split2,
    .split3 {
        grid-template-columns: 1fr
    }

    .flow,
    .flow.f4,
    .flow.f5 {
        grid-template-columns: 1fr
    }

    .flow-arrow {
        transform: rotate(90deg);
        padding: 6px 0
    }

    .sidenav {
        display: none
    }

    .hbar-row,
    .hbar-row.wide {
        grid-template-columns: 130px 1fr 86px
    }

    .evo-row,
    .evo-head {
        grid-template-columns: 1fr
    }

    .evo-head {
        display: none
    }

    .evo-row .ev-arrow {
        transform: rotate(90deg);
        text-align: left
    }

    .gloss {
        grid-template-columns: 1fr
    }

    .gloss dt {
        padding-bottom: 2px;
        border-bottom: none
    }
}

/* ---------- Phone ---------- */
@media (max-width:768px) {
    .tbl-wrapper {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .tbl {
        width: 100%;
        border-collapse: collapse;
    }

    .pad {
        padding: 0px;
    }

    .benchmark-data,
    .hotspot_one,
    .segment,
    .implications,
    .industry,
    .use-case,
    .stoping_scale,
    .radiness,
    .uneven,
    .disruption {
        padding: 32px 0px;
    }

    .runhead,
    .page-foot {
        padding-left: 0px;
        padding-right: 0px;
        font-size: 10px;
        letter-spacing: .07em
    }

    .divider {
        min-height: auto;
        padding: 42px 0px
    }

    .cover {
        padding: 32px 0px;
    }

    .hr-accent.coral {
        background: var(--grad-coral);
        margin-bottom: 0px;
    }

    .about {
        padding: 42px 24px
    }

    .cv-title {
        font-size: 36px
    }

    .cv-chip .n {
        font-size: 32px
    }

    .cv-chips {
        grid-template-columns: 1fr
    }

    .cover-foot {
        flex-direction: column;
        align-items: flex-start;
        gap: 14px
    }

    .cover-foot .cf-r {
        text-align: left
    }

    .divider .dv-num {
        font-size: 70px
    }

    .divider .dv-title {
        font-size: 27px
    }

    .h-sec {
        font-size: 22px
    }

    .stat-card .sc-n {
        font-size: 33px
    }

    .stat-grid.c2 {
        grid-template-columns: 1fr
    }

    .find-grid,
    .ins-grid {
        grid-template-columns: 1fr
    }

    .pyr-1,
    .pyr-2,
    .pyr-3 {
        width: 100%
    }

    .hbar-row,
    .hbar-row.wide {
        grid-template-columns: 1fr;
        gap: 8px
    }

    .hbar-lab {
        text-align: left
    }

    .barh-row {
        grid-template-columns: 1fr;
        gap: 7px
    }

    .barh-lab {
        text-align: left
    }

    .ld-step,
    .band {
        grid-template-columns: 1fr;
        gap: 8px
    }

    .ld-step .ld-v span,
    .band .bd-n {
        text-align: left
    }

    .findings {
        padding: 28px 22px
    }

    .exhibit {
        padding: 22px 18px 18px;
        margin: 0px;
    }

    .stackbar {
        height: auto;
        flex-direction: column
    }

    .sb-seg {
        width: 100% !important;
        height: 38px
    }

    html.armed .sb-seg {
        width: 100% !important
    }

    .overflow_cus {
        overflow: hidden;
    }

    .custom_grid {
        display: grid;
        gap: 15px;
    }

    .cv-chips .cv-chip:nth-child(2),
    .cv-chips .cv-chip:nth-child(4) {
        border-left: 1px solid rgba(154, 217, 194, 0.18);
    }

    .grid_unset {
        display: unset;
    }

    .cv-eyebrow {
        font-size: 12px;
        letter-spacing: 1px;
        gap: 8px;
        margin-top: 20px;
    }

    .cv-tag {
        font-size: 11px;
        letter-spacing: 1px;
    }

    .cover-top {
        justify-content: start;
    }

    .cv-eyebrow::before {
        content: "";
        width: 28px;
    }

    .cv-title br {
        display: none;
    }

    .toc-row {
        display: grid;
        grid-template-columns: 25px 1fr auto;
    }

    .page.cream {
        padding: 12px 0px;
    }

    .perspective {
        padding: 15px;
    }

    .persp-head,
    .perspective .lq {
        margin-bottom: 5px;
    }
}