/* v3: coverage matrix + inside-the-plan diagrams */

/* coverage matrix */
.matrix{margin:0;padding:clamp(22px,3vw,44px);border:1px solid var(--line-d);background:linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,.01))}
.matrix svg{display:block;width:100%;height:auto;overflow:visible}
.matrix .mx-m{display:none}
.matrix .grid,.matrix .grid path{stroke:rgba(255,255,255,.1);stroke-width:1;fill:none}
.matrix text{font-family:var(--sans);fill:#aab4c5;font-size:12px}
.matrix .hd text{font-size:11.5px;letter-spacing:.1em;text-anchor:middle;font-weight:500}
.matrix .mx-d .rl{font-size:22px}.matrix .mx-d .rs{font-size:13px}
.matrix .hd .gold,.matrix .gold{fill:var(--brass-hi)}
.matrix .rl{font-family:var(--serif);font-size:21px;fill:#e9edf4}
.matrix .rl.gold{fill:var(--brass-hi)}
.matrix .rs{font-size:12px;fill:#8a96aa}
.matrix .rs.gold{fill:#c9a96a}
.matrix .bar{fill:none;stroke-width:10;stroke-linecap:round}
.matrix .bar.mute{stroke:#4a566b}
.matrix .bar.gold-b{stroke:var(--brass-hi)}
.matrix .end{stroke:none}
.matrix .mute-d{fill:#4a566b}.matrix .gold-d{fill:var(--brass-hi)}
.js .matrix .bar{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1.4s var(--ease) .3s}
.js .matrix.in .bar{stroke-dashoffset:0}
.js .matrix .bar.gold-b{transition-duration:2.2s;transition-delay:.9s}
.js .matrix .end{opacity:0;transition:opacity .5s ease 1.6s}.js .matrix .gold-d{transition-delay:2.8s}
.js .matrix.in .end{opacity:1}
.mx-key{display:none;margin-top:22px;gap:12px;flex-direction:column;font-size:.92rem;color:#aab4c5}
.mx-key span{display:flex;gap:10px;align-items:flex-start}
.mx-key .k{flex:none;width:18px;height:6px;border-radius:3px;margin-top:.55em;background:#4a566b}.mx-key .k.gold{background:var(--brass-hi)}
.mx-note{margin-top:28px;max-width:70ch;color:#aab4c5;font-size:1rem}

.matrix .gold-a{fill:none;stroke:var(--brass-hi);stroke-width:4;stroke-linecap:round;stroke-linejoin:round}
.matrix .ms{stroke:var(--brass-hi);stroke-width:1.5;stroke-dasharray:4 5;fill:none;opacity:.7}
.matrix .ms-t{font-size:11px;letter-spacing:.16em;text-anchor:middle;fill:var(--brass-hi);font-weight:500}
.matrix .ms-t.m{text-anchor:end}
.matrix .it{font-style:italic;font-family:var(--serif);font-size:17px;fill:var(--brass-hi)}
.matrix .mx-m .rows text.g2{fill:var(--brass-hi)}
.js .matrix .gold-a{opacity:0;transition:opacity .5s ease 3.3s}.js .matrix.in .gold-a{opacity:1}
.js .matrix .it{opacity:0;transition:opacity .8s ease 3.3s}.js .matrix.in .it{opacity:1}
.route.r4{grid-template-columns:repeat(4,1fr);gap:clamp(20px,3vw,44px)}
.route.r4 .rt p{font-size:.96rem}

/* inside the plan */
.chap-h{font:500 .72rem/1.5 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:#6b7482;margin-bottom:14px}
.pbar{display:flex;align-items:center;gap:14px;margin-bottom:10px;position:relative}
.pbar .pcount{font:500 .78rem/1 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:#8c6d33}
.pbar .illus{position:static;margin-left:auto}
@media (max-width:980px){.route.r4{grid-template-columns:1fr}}
@media (max-width:640px){.pbar{flex-wrap:wrap}.pbar .illus{margin-left:0}.pnav{margin-left:auto}}
.pnav{display:flex;gap:8px}
.pnav button{all:unset;cursor:pointer;box-sizing:border-box;padding:9px 14px;border:1px solid var(--navy);font:500 .82rem/1 var(--sans);color:var(--navy);transition:background .3s,color .3s}
.pnav button:hover{background:var(--navy);color:#fff}
.pnav button:focus-visible{outline:2px solid #8c6d33;outline-offset:2px}
.plan{background:var(--ivory)}
.plan-grid{display:grid;grid-template-columns:minmax(260px,.8fr) 1.6fr;gap:clamp(22px,4vw,56px);align-items:stretch}
.chap{display:flex;flex-direction:column;border-top:1px solid var(--line)}
.chap button{all:unset;box-sizing:border-box;cursor:pointer;display:flex;gap:18px;align-items:baseline;padding:20px 8px 20px 0;border-bottom:1px solid var(--line);font:350 1.28rem/1.25 var(--serif);color:var(--mute);transition:color .3s,padding .4s var(--ease)}
.chap button b{font:500 .72rem/1 var(--sans);letter-spacing:.14em;color:#8c6d33;min-width:22px}
.chap button:hover{color:var(--navy)}
.chap button.on{color:var(--navy);padding-left:14px;box-shadow:inset 3px 0 0 var(--brass)}
.chap button:focus-visible{outline:2px solid #8c6d33;outline-offset:2px}
.panel{position:relative;background:var(--paper);border:1px solid var(--line);padding:clamp(18px,3vw,36px);min-height:380px;display:grid;align-items:center}
.illus{position:absolute;top:14px;right:16px;font:500 .6rem/1 var(--sans);letter-spacing:.18em;text-transform:uppercase;color:#6b7482;border:1px solid var(--line);padding:6px 8px}
.js .pane{display:none}
.js .pane.on{display:block;animation:paneIn .7s var(--ease)}
@keyframes paneIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.pane svg{display:block;width:100%;height:auto}
.pane text{font-family:var(--sans);fill:#1b2433;font-size:13px}
.pane .s{font-size:11px;letter-spacing:.12em;fill:#5d6676;text-transform:uppercase}
.pane .s2 text,.pane .s2{font-size:12px}
.pane .b{font-family:var(--serif);font-size:19px;fill:var(--navy)}
.pane .cap{text-anchor:middle;font-family:var(--serif);font-style:italic;font-size:17px;fill:#5d6676}
.pane .c text,.pane .tx.c text{text-anchor:middle;font-size:14px}
.pane .tx text{text-anchor:middle}
.pane .n2{fill:#1b2433}
.pane .gold-t{fill:#8c6d33}
.pane .ax{stroke:#9aa3b2;stroke-width:1;fill:none}
.pane .dash{stroke-dasharray:3 5}
.pane .arr{stroke:#8c6d33;stroke-width:1.5;fill:none;stroke-dasharray:6 6;animation:flow 1.2s linear infinite}
@keyframes flow{to{stroke-dashoffset:-12}}
.pane .wv circle{fill:rgba(185,152,92,.16);stroke:#8c6d33;stroke-width:1.5}
.pane .cmp circle{fill:#c4cad4}
.pane .you{fill:#8c6d33}.pane .you.ring{fill:none;stroke:#8c6d33;stroke-width:1;transform-box:fill-box;transform-origin:center;animation:ping 2.4s ease-out infinite}
@keyframes ping{from{transform:scale(.6);opacity:.9}to{transform:scale(1.5);opacity:0}}
.pane .bars rect{fill:#c9cfd9}.pane .bars rect.top{fill:#8c6d33}
.pane .back{stroke:#8c6d33;stroke-width:1.5;fill:none;stroke-dasharray:5 5}
.pane .arrowhead{stroke:#8c6d33;stroke-width:1.5;fill:none}
.pane .nd rect{fill:#fff;stroke:#1b2433;stroke-width:1.25}
.pane .brk{stroke:#8c6d33;stroke-width:1.75;fill:none}
.pane .pulse{fill:#8c6d33}
.pane .stair rect{fill:rgba(14,26,44,.06);stroke:#1b2433;stroke-width:1.25}
.pane .chk path{stroke:#8c6d33;stroke-width:2.5;fill:none;stroke-linecap:round;stroke-linejoin:round}
.pane .card{fill:#fff;stroke:#c4cad4}
.pane .meter rect{fill:#e6e9ee}.pane .fill rect{fill:#8c6d33}
.js .pane.on .fill rect{transform-box:fill-box;transform-origin:left;animation:grow 1.2s var(--ease) both}
@keyframes grow{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.js .pane.on .bars rect{transform-box:fill-box;transform-origin:bottom;animation:rise .9s var(--ease) both}
.js .pane.on .bars rect:nth-child(2){animation-delay:.1s}.js .pane.on .bars rect:nth-child(3){animation-delay:.2s}.js .pane.on .bars rect:nth-child(4){animation-delay:.3s}.js .pane.on .bars rect:nth-child(5){animation-delay:.4s}.js .pane.on .bars rect:nth-child(6){animation-delay:.55s}
@keyframes rise{from{transform:scaleY(0)}to{transform:scaleY(1)}}
.js .pane.on .stair rect{transform-box:fill-box;transform-origin:bottom;animation:rise .8s var(--ease) both}
.js .pane.on .stair rect:nth-child(2){animation-delay:.12s}.js .pane.on .stair rect:nth-child(3){animation-delay:.24s}.js .pane.on .stair rect:nth-child(4){animation-delay:.36s}

@media (max-width:980px){
  .plan-grid{grid-template-columns:1fr}
  .chap{display:grid;grid-template-columns:1fr 1fr;border-top:0;gap:8px}
  .chap button{border:1px solid var(--line);padding:12px 14px;font-size:.98rem;line-height:1.25;align-items:flex-start}
  .chap button.on{padding-left:16px;box-shadow:none;background:var(--navy);color:#fff;border-color:var(--navy)}
  .chap button.on b{color:var(--brass-hi)}
  .panel{min-height:0;padding:44px 12px 18px}
}
@media (max-width:760px){
  .matrix .mx-d{display:none}.matrix .mx-m{display:block}
  .matrix .mx-m .rows text{font-size:13.5px;fill:#c4ccd9}
  .matrix .mx-m .hd text{font-size:9.5px;letter-spacing:.1em}
  .mx-key{display:flex}
}
@media (prefers-reduced-motion:reduce){
  .pane .arr,.pane .you.ring{animation:none}
  .js .matrix .bar{stroke-dashoffset:0!important;transition:none!important}
  .js .matrix .end{opacity:1!important;transition:none!important}
  .js .pane.on,.js .pane.on *{animation:none!important}
  .pane .pulse{display:none}
}

/* ---- v5: interactive plan explorer ---- */
.chap-h{display:flex;gap:10px;align-items:baseline;font:400 .95rem/1.4 var(--sans);letter-spacing:0;text-transform:none;color:#5d6676}
.chap-h span{font:500 .72rem/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:#8c6d33}
.chap button{align-items:flex-start}
.chap button span{display:flex;flex-direction:column;gap:6px}
.chap button small{font:400 .86rem/1.45 var(--sans);color:#5d6676;max-height:0;overflow:hidden;opacity:0;transition:max-height .5s var(--ease),opacity .4s}
.chap button.on small{max-height:6em;opacity:1}
.seg{display:grid;grid-template-columns:repeat(6,1fr);gap:6px;margin:4px 0 22px}
.seg i{display:block;height:4px;background:#dfe3ea;position:relative;overflow:hidden;cursor:pointer}
.seg i::after{content:"";position:absolute;inset:0;background:#8c6d33;transform:scaleX(0);transform-origin:left}
.seg i.done::after{transform:scaleX(1)}
.seg i.run::after{animation:segrun 7s linear forwards}
@keyframes segrun{to{transform:scaleX(1)}}
.phead{margin-bottom:6px;padding-right:0}
.phead h3{font-size:clamp(1.5rem,2.4vw,2.1rem);color:var(--navy);margin-bottom:6px}
.phead p{color:#5d6676;font-size:1rem;max-width:56ch}
.pbar .illus{order:0}
.panel{display:block;padding:clamp(18px,3vw,34px)}
.pane{margin-top:6px}
.tip{display:flex;gap:12px;align-items:baseline;margin-top:16px;padding:14px 16px;background:#f5f1e8;border-left:3px solid #8c6d33;min-height:3.4em}
.tip span{font:500 .66rem/1 var(--sans);letter-spacing:.18em;text-transform:uppercase;color:#8c6d33;flex:none}
.tip em{font-style:normal;color:var(--navy);font-size:.98rem;line-height:1.5}
.hot{cursor:pointer;transition:stroke .2s,stroke-width .2s,filter .2s}
.hot:hover,.hot.hl,.hot:focus-visible{stroke:#0e1a2c;stroke-width:2.5;filter:drop-shadow(0 4px 8px rgba(14,26,44,.25));outline:none}
.pane .brk.hot:hover,.pane .brk.hot.hl{stroke:#8c6d33;stroke-width:3}
@media (max-width:980px){
  .chap button small{display:none}
  .chap-h{margin-bottom:12px}
}
@media (max-width:640px){
  .tip{flex-direction:column;gap:6px}
}
@media (prefers-reduced-motion:reduce){ .seg i.run::after{animation:none;transform:scaleX(1)} }

/* ---- v6 alignment fixes ---- */
.chap button{position:relative;padding:20px 8px 20px 0}
.chap button.on{padding-left:0;box-shadow:none}
.chap button::before{content:"";position:absolute;left:-14px;top:-1px;bottom:-1px;width:3px;background:var(--brass);transform:scaleY(0);transition:transform .45s var(--ease)}
.chap button.on::before{transform:scaleY(1)}
.chap{margin-left:14px}
.chap-h{margin-left:14px}
.pane svg{max-height:340px}
.panel{min-height:0}
.route.r4 .route-line{right:19.5%;width:auto}
.step.key .body{padding:0;margin:0;background:none;border:0;position:relative}
.step.key .body::before{content:"";position:absolute;inset:-22px -26px -22px -22px;background:rgba(185,152,92,.08);border:1px solid rgba(185,152,92,.4);z-index:-1}
.step.key{z-index:1}
@media (max-width:980px){ .chap{margin-left:0} .chap-h{margin-left:0} .chap button::before{display:none} .route.r4 .route-line{display:none} }
@media (max-width:640px){ .step.key .body::before{inset:-16px -12px -16px -12px} }

@media (max-width:640px){
  .facts div,.facts div+div{display:block;padding:18px 0}
  .facts span{text-align:left;max-width:none;margin-top:8px;display:block}
}
.matrix .ms-t.m{text-anchor:start}

/* ---- v7: story viewer + contrast ---- */
:root{--mute:#4a5262;--mute-d:#c2cad7}
.seg{gap:5px;margin:2px 0 18px}
.seg i{height:3px;background:#d9dde5;border-radius:2px}
.seg i::after{transform:scaleX(var(--f,0));transition:none;animation:none!important;border-radius:2px}
.seg i.done::after,.seg i.run::after{animation:none}
.stage{position:relative;user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent;touch-action:manipulation;cursor:default}
.stage::before,.stage::after{content:"";position:absolute;top:50%;width:34px;height:34px;margin-top:-17px;border:1px solid rgba(14,26,44,.25);border-radius:50%;background:rgba(251,249,244,.85) center/14px no-repeat;opacity:.55;pointer-events:none;transition:opacity .3s;z-index:2}
.stage::before{left:2px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14' fill='none' stroke='%230e1a2c' stroke-width='1.5'%3E%3Cpath d='M9 2L4 7l5 5'/%3E%3C/svg%3E")}
.stage::after{right:2px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14' fill='none' stroke='%230e1a2c' stroke-width='1.5'%3E%3Cpath d='M5 2l5 5-5 5'/%3E%3C/svg%3E")}
.stage:hover::before,.stage:hover::after{opacity:.9}
.story-hint{margin-top:12px;font-size:.8rem;color:#4a5262;text-align:center;transition:opacity .6s}
.story-hint.gone{opacity:0}
.story-hint .h-touch{display:none}
@media (hover:none){ .story-hint .h-touch{display:inline} .story-hint .h-mouse{display:none} }
@media (max-width:980px){
  .chap-wrap{display:none}
  .plan-grid{grid-template-columns:1fr}
  .panel{padding:20px 14px 16px}
  .pbar{margin-bottom:12px}
  .phead h3{font-size:1.55rem}
  .stage::before,.stage::after{width:30px;height:30px;margin-top:-15px}
}

/* contrast */
.matrix .rs{fill:#b0bacb}.matrix .rs.gold{fill:#d9bd86}
.matrix .mute-t{fill:#b0bacb}
.matrix .hd text{fill:#c2cad7}.matrix .hd .gold{fill:var(--brass-hi)}
.mx-key{color:#c2cad7}.mx-note{color:#c2cad7}
.f-body p{color:#cbd3df}.f-body p.fine{color:#a7b2c4}
.step p{color:#ccd3df}.step .meta{color:#e0c48d}
.hero .lede{color:rgba(240,243,248,.92)}
.facts span{color:#bcc5d3}
.ftr,.ftr a,.ftr p{color:#b3bdcc}
.pts span{color:#d3dae5}
.chap button small,.phead p,.pane .s,.story-hint,.chap-h{color:#4a5262}
.pane .cap{fill:#4a5262}
.illus{color:#4a5262}
.fld span{color:#4a5262}.fld span em{color:#5a6372}
.formcard .sm,.formcard .alt{color:#4a5262}
.rt p,.verify{color:#2a3345}
.who .verify{color:#3b4455}
.ans{color:#3b4455}
.cats span{color:var(--navy)}
.glo,.globe-cap{color:rgba(255,255,255,.62)}
.matrix .gold-a{fill:var(--brass-hi);stroke:none}

/* chevrons only as a brief hint on touch; always on hover for mouse */
.stage::before,.stage::after{opacity:0;transition:opacity .5s}
.stage.hint::before,.stage.hint::after{opacity:.8}
@media (hover:hover){ .stage:hover::before,.stage:hover::after{opacity:.75} }
.pane .tx.l text{text-anchor:start}