:root{--navy:#1B2A4A;--navy2:#2C3D5C;--navyd:#16233D;--mag:#BC1867;--magsoft:#FBE6F1;
--light:#F4F6FA;--line:#DDE4EE;--body:#48576F;--grey:#7E8CA3;--wrap:1280px}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:Montserrat,system-ui,sans-serif;background:#0D1117;color:var(--navy)}
.bar{position:fixed;z-index:400;top:0;left:0;right:0;background:#0d1117;border-bottom:1px solid #16233D;padding:8px 16px;display:flex;flex-wrap:wrap;gap:8px;align-items:center;color:#C3CFDE;font-size:12px}
.bar strong{color:#fff;font-weight:600;margin-right:6px}
.bar .sp{flex:1}
.bar button{font:inherit;font-size:11px;color:#C3CFDE;background:#16233D;border:1px solid #2C3D5C;padding:4px 11px;border-radius:5px;cursor:pointer}
.bar button.on{background:var(--mag);border-color:var(--mag);color:#fff}
.bar .grp{display:flex;gap:4px;flex-wrap:wrap}
.stage{padding:96px 0 70px;display:flex;justify-content:center}
.frame{width:1440px;max-width:100%;background:#fff;position:relative;overflow:hidden;transition:width .25s}
.frame.phone{width:390px}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 40px;position:relative;z-index:2}
.phone .wrap{padding:0 20px}
.spine{position:absolute;left:20px;top:0;bottom:0;width:1px;background:rgba(27,42,74,.10);z-index:5}
.spinefill{position:absolute;left:0;top:0;width:1px;background:var(--mag);height:0}
.gate{position:absolute;left:-4px;width:9px;height:9px;border-radius:50%;background:#fff;border:1px solid rgba(27,42,74,.25);transition:.3s}
.gate.lit{background:var(--mag);border-color:var(--mag);transform:scale(1.35)}
.gatelab{position:absolute;left:16px;font-size:9.5px;letter-spacing:.1em;color:var(--grey);white-space:nowrap;opacity:0;transition:.3s}
.gate.lit+.gatelab{opacity:1}
.phone .spine{display:none}
nav.site{background:var(--navy);position:sticky;top:0;z-index:100}
nav.site .in{max-width:var(--wrap);margin:0 auto;padding:0 40px;height:72px;display:flex;align-items:center;justify-content:space-between;transition:height .2s}
nav.site.tight .in{height:56px}
.phone nav.site .in{padding:0 20px;height:64px}
.logo{display:flex;align-items:center;gap:8px;color:#fff;font-weight:600;font-size:12px;letter-spacing:.06em}
.logo i{width:26px;height:26px;border-radius:50%;border:2px solid #fff;position:relative;display:block;flex:0 0 auto}
.logo i::after{content:"";position:absolute;inset:4px;border-radius:50%;border:2px solid var(--mag);border-left-color:transparent}
.links{display:flex;gap:24px;align-items:center}
.links a{color:#C3CFDE;text-decoration:none;font-size:12px;font-weight:500;cursor:pointer}
.links a:hover,.links a.act{color:#fff}
.links a.act{border-bottom:2px solid var(--mag);padding-bottom:4px}
.cta-sm{background:var(--mag);color:#fff!important;padding:8px 16px;border-radius:5px;font-size:12px;border:0!important}
.burger{display:none;width:44px;height:44px;align-items:center;justify-content:center;cursor:pointer}
.burger b{display:block;width:22px;height:2px;background:#fff;position:relative}
.burger b::before,.burger b::after{content:"";position:absolute;left:0;width:22px;height:2px;background:#fff}
.burger b::before{top:-7px}.burger b::after{top:7px}
.phone .links{display:none}.phone .burger{display:flex}
.drawer{display:none;background:var(--navy2)}
.phone .drawer.open{display:block}
.drawer a{display:block;padding:16px 20px;color:#E6EDF6;text-decoration:none;font-size:14px;border-bottom:1px solid #2C3D5C;min-height:44px;cursor:pointer}
.drawer .last{margin:16px 20px 20px;background:var(--mag);text-align:center;border:0;border-radius:5px}

/* v15: reveal restored. v14 had both states identical, so nothing animated. */
.rv{opacity:0;transform:translateY(14px);transition:opacity .6s,transform .6s}
.rv.in{opacity:1;transform:none}

/* v15: announcement strip */
.annc{background:var(--navyd);border-bottom:1px solid #2C3D5C;padding:12px 0}
.anncin{max-width:var(--wrap);margin:0 auto;padding:0 40px;display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.phone .anncin{padding:0 20px;gap:8px}
.annc .bdg{background:var(--mag);color:#fff;font-size:9.5px;letter-spacing:.13em;font-weight:700;padding:4px 9px;border-radius:3px}
.annc p{font-size:12px;color:#C3CFDE;margin:0}
.annc a{font-size:12px;color:#fff;font-weight:600;text-decoration:none;border-bottom:1px solid var(--mag);cursor:pointer}

section{position:relative;overflow:hidden}
.pad{padding:96px 0}.phone .pad{padding:48px 0}
.lightsec{background:var(--light)}.whitesec{background:#fff}
.navysec{background:var(--navy);color:#fff}.navydsec{background:var(--navyd);color:#fff}
.aur{position:absolute;pointer-events:none;border-radius:50%;filter:blur(70px);pointer-events:none;z-index:1}
@keyframes f1{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(40px,-30px) scale(1.12)}}
@keyframes f2{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-50px,26px) scale(.9)}}
.a1{width:520px;height:520px;background:var(--mag);opacity:.13;animation:f1 18s ease-in-out infinite}
.a2{width:420px;height:420px;background:#3E7BD6;opacity:.12;animation:f2 22s ease-in-out infinite}
.phone .aur{filter:blur(46px);width:260px;height:260px}
.rule{width:44px;height:4px;background:var(--mag);margin-bottom:16px}
.eyebrow{font-size:11px;letter-spacing:.14em;color:var(--mag);font-weight:600;margin-bottom:12px}
h1{font-size:58px;line-height:1.15;font-weight:700;letter-spacing:-.02em}
.phone h1{font-size:34px}
h1 .m{color:var(--mag)}
h2{font-size:34px;line-height:1.15;font-weight:700;letter-spacing:-.01em}
.phone h2{font-size:26px}
h3{font-size:16px;font-weight:600}
p.lead{font-size:18px;line-height:1.6;color:var(--body);margin-top:16px;max-width:54ch}
.phone p.lead{font-size:14px}
.navysec p.lead,.navydsec p.lead{color:#C3CFDE}
.small{font-size:14px;color:var(--grey)}
.btn{display:inline-block;background:var(--navy);color:#fff;text-decoration:none;font-size:14px;font-weight:500;padding:16px 26px;border-radius:6px;cursor:pointer}
.btn.mag{background:var(--mag)}
.btn.ghost{background:transparent;color:var(--navy);border:1px solid #C3CFDE}
.navysec .btn.ghost,.navydsec .btn.ghost{color:#fff;border-color:#4C608A}
.heroin{max-width:var(--wrap);margin:0 auto;padding:96px 40px 84px;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:48px;align-items:center;position:relative;z-index:2}
.phone .heroin{grid-template-columns:1fr;padding:32px 20px 44px;gap:32px}
.heroproof{margin-top:32px;padding-top:16px;border-top:1px solid var(--line);display:flex;align-items:baseline;gap:8px}
.heroproof b{font-size:26px;font-weight:700}.heroproof span{font-size:14px;color:var(--body)}
.imgslot{position:relative;border-radius:14px;overflow:hidden;background:var(--light);border:1px solid var(--line)}
.imgslot img{display:block;width:100%;height:auto}
.imgslot .fb{display:block}
.imgslot .tag{position:absolute;left:10px;bottom:10px;background:rgba(13,17,23,.86);color:#E6EDF6;font-size:11px;padding:4px 9px;border-radius:5px;letter-spacing:.03em}
.strata{width:100%;height:340px;display:block}
.phone .strata{height:220px}
@keyframes drift{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
.p2{animation:drift 5s ease-in-out infinite}
.p4{animation:drift 5s ease-in-out infinite .8s}
.p6{animation:drift 5s ease-in-out infinite 1.6s}
.cyc{display:inline-block;min-width:5.4em}

/* v15: stat band */
.stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.phone .stats{grid-template-columns:1fr}
.stat{padding:48px 34px;border-left:1px solid var(--line)}
.stat:first-child{border-left:0;padding-left:0}
.phone .stat{border-left:0;border-top:1px solid var(--line);padding:24px 0}
.phone .stat:first-child{border-top:0}
.stat b{display:block;font-size:58px;font-weight:700;letter-spacing:-.03em;line-height:1.15;color:var(--navy)}
.phone .stat b{font-size:34px}
.stat span{display:block;font-size:14px;color:var(--body);margin-top:12px;line-height:1.6;max-width:30ch}
.stat em{display:block;font-style:normal;font-size:11px;letter-spacing:.12em;color:var(--mag);font-weight:700;margin-bottom:12px}

/* v15: sticky scroll product section */
.sticky{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);gap:64px;align-items:start;margin-top:48px}
.phone .sticky{grid-template-columns:1fr;gap:24px}
.stickycopy .blk{padding:64px 0;border-top:1px solid var(--line)}
.stickycopy .blk:first-child{border-top:0;padding-top:0}
.phone .stickycopy .blk{padding:24px 0}
.stickycopy .kk{font-size:11px;letter-spacing:.15em;font-weight:700;color:var(--mag);margin-bottom:12px}
.stickycopy h3{font-size:26px;line-height:1.15;margin-bottom:12px;letter-spacing:-.01em}
.phone .stickycopy h3{font-size:21px}
.stickycopy p{font-size:14px;line-height:1.6;color:var(--body);max-width:46ch;margin-bottom:12px}
.stickymedia{position:sticky;top:112px;aspect-ratio:3/2;max-height:66vh;border-radius:14px;overflow:hidden;
 background:var(--light);border:1px solid var(--line);display:flex;align-items:center;justify-content:center}
.phone .stickymedia{position:static;aspect-ratio:3/2;max-height:none;order:-1}
.stickymedia .pane{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
 padding:24px;opacity:0;transition:opacity .45s}
.stickymedia .pane.on{opacity:1}
.stickymedia .pane svg{width:100%;height:auto;max-height:100%;display:block}
.stickymedia .cap{position:absolute;left:14px;bottom:14px;background:rgba(13,17,23,.86);color:#E6EDF6;
 font-size:11px;padding:4px 10px;border-radius:5px;letter-spacing:.03em;z-index:4}

/* v15: use case pills */
.ucs{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px}
.uc{border:1px solid var(--line);background:#fff;border-radius:100px;padding:12px 20px;font-size:14px;
 color:var(--navy);font-weight:500;transition:border-color .2s,background .2s;cursor:default}
.uc:hover{border-color:var(--mag);background:var(--magsoft)}

/* v15: persistent Ari launcher */
.arifab{position:fixed;right:26px;bottom:26px;z-index:300;display:flex;align-items:center;gap:12px;
 background:var(--navy);color:#fff;border-radius:100px;padding:12px 20px 13px 14px;cursor:pointer;
 box-shadow:0 10px 30px rgba(13,17,23,.28);transition:transform .2s,box-shadow .2s}
.arifab:hover{transform:translateY(-2px);box-shadow:0 14px 38px rgba(13,17,23,.34)}
.arifab i{width:30px;height:30px;border-radius:50%;border:2px solid #fff;position:relative;display:block;flex:0 0 auto}
.arifab i::after{content:"";position:absolute;inset:5px;border-radius:50%;border:2px solid var(--mag);border-left-color:transparent}
.arifab span{font-size:14px;font-weight:600;letter-spacing:.02em}
.phone .arifab{right:16px;bottom:16px;padding:12px 17px 11px 12px}
.aripanel{position:fixed;right:26px;bottom:92px;z-index:301;width:340px;max-width:calc(100% - 52px);
 background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:0 18px 50px rgba(13,17,23,.22);
 padding:16px;display:none}
.aripanel.open{display:block}
.phone .aripanel{right:16px;bottom:76px;max-width:calc(100% - 32px)}
.aripanel h4{font-size:14px;font-weight:700;color:var(--navy);margin-bottom:4px;letter-spacing:0}
.aripanel .sub{font-size:12px;color:var(--grey);margin-bottom:12px;line-height:1.45}
.aripanel .sug{display:block;width:100%;text-align:left;background:var(--light);border:1px solid var(--line);
 border-radius:8px;padding:12px 13px;font:inherit;font-size:12px;color:var(--body);margin-bottom:8px;cursor:pointer}
.aripanel .sug:hover{background:var(--magsoft);border-color:var(--mag);color:var(--navy)}
.aripanel .note{font-size:11px;color:var(--grey);line-height:1.6;margin-top:8px;padding-top:8px;border-top:1px solid var(--line)}


/* v16 fix: ticker CSS was dropped in the v15 stylesheet rewrite. Restored. */
.tickstrip{position:relative;overflow:hidden;height:96px;margin:36px 0 4px;display:flex;align-items:center;
 border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.phone .tickstrip{height:60px;margin:24px 0 2px}
@keyframes slide{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.tick{display:flex;width:200%;animation:slide 46s linear infinite;white-space:nowrap;align-items:center}
.tick span{font-size:44px;font-weight:700;letter-spacing:.03em;color:var(--navy);opacity:.10;padding-right:32px}
.phone .tick span{font-size:26px;padding-right:24px}
.ticklab{position:absolute;left:0;top:6px;font-size:9.5px;letter-spacing:.14em;font-weight:700;color:var(--grey);z-index:3}
.gridn{display:grid;gap:24px;margin-top:48px}
.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.g4{grid-template-columns:repeat(4,minmax(0,1fr))}
.g2{grid-template-columns:repeat(2,minmax(0,1fr))}
.phone .gridn{grid-template-columns:1fr!important;gap:12px;margin-top:24px}
.card{background:#fff;border:1px solid var(--line);border-radius:12px;padding:24px 26px}
.navysec .card,.navydsec .card{background:var(--navy2);border-color:#35486d}
.card .n{width:28px;height:28px;border-radius:50%;background:var(--magsoft);color:var(--mag);font-size:12px;font-weight:600;display:flex;align-items:center;justify-content:center;margin-bottom:16px}
.card h3{margin-bottom:8px}
.card p{font-size:14px;line-height:1.6;color:var(--body)}
.navysec .card p,.navydsec .card p{color:#C3CFDE}
.navysec .card h3,.navydsec .card h3{color:#fff}
.measure{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:64px;align-items:center}
.phone .measure{grid-template-columns:1fr;gap:32px}
.dial{background:var(--navy2);border-radius:14px;padding:32px}
.bignum{font-size:58px;font-weight:700;line-height:1.15;letter-spacing:-.03em}
.phone .bignum{font-size:44px}
.track{margin-top:24px;height:8px;background:#35486D;border-radius:4px;position:relative}
.fill{height:8px;background:var(--mag);border-radius:4px;width:68.2%}
.mk{position:absolute;top:-7px;width:2px;height:22px;background:#8FA2C4}
.mklab{position:absolute;top:24px;font-size:11px;color:#8FA2C4;transform:translateX(-50%)}
.band{color:var(--mag);font-size:14px;font-weight:600;margin-top:32px}
.loop{width:140px;height:140px}
@keyframes spin{to{transform:rotate(360deg)}}
.rot{transform-origin:75px 75px;animation:spin 14s linear infinite}

.art{background:#fff;border:1px solid var(--line);border-radius:12px;overflow:hidden;cursor:pointer;transition:transform .25s,box-shadow .25s}
.art:hover{transform:translateY(-6px);box-shadow:0 14px 34px rgba(27,42,74,.13)}
.artviz{height:150px;background:var(--light);border-bottom:1px solid var(--line);transition:background .25s;display:flex;align-items:center;justify-content:center;padding:12px}
.artviz svg{width:100%;height:100%;display:block}
.art:hover .artviz{background:var(--magsoft)}
.artbody{padding:16px 17px 21px}
.artbody h3{font-size:14px;margin-bottom:4px}
.artbody p{font-size:12px;color:var(--body)}

.diff{display:grid;grid-template-columns:52px 1fr;gap:24px;padding:24px 0;position:relative;border-top:1px solid #41567F}
.phone .diff{grid-template-columns:1fr;gap:8px;padding:16px 0}
.diff .k{font-size:12px;font-weight:600;color:var(--mag)}
.diff h3{font-size:21px;margin-bottom:8px;color:#fff}
.phone .diff h3{font-size:16px}
.diff p{font-size:14px;line-height:1.6;color:#C3CFDE;max-width:62ch}

.cmp{margin-top:32px;border-top:1px solid var(--line)}
.cmprow{display:grid;grid-template-columns:200px 1fr 1fr 132px;gap:24px;padding:24px 0;border-bottom:1px solid var(--line);align-items:start}
.phone .cmprow{grid-template-columns:1fr;gap:8px;padding:16px 0}
.cmpname{font-size:14px;font-weight:700;color:var(--navy);line-height:1.3}
.cmpcat{font-size:11px;letter-spacing:.06em;color:var(--grey);margin-top:4px;line-height:1.45}
.cmpgap,.cmpus{font-size:14px;line-height:1.6}
.cmpgap{color:var(--body)}
.cmpus{color:var(--navy)}
.cmplab{font-size:9.5px;letter-spacing:.12em;font-weight:700;margin-bottom:4px;display:block}
.cmplab.g{color:var(--grey)}
.cmplab.u{color:var(--mag)}
.cmptag{font-size:11px;font-weight:700;color:var(--mag);letter-spacing:.03em;line-height:1.45}
.cmphead{display:grid;grid-template-columns:200px 1fr 1fr 132px;gap:24px;padding:0 0 12px}
.phone .cmphead{display:none}
.cmphead div{font-size:11px;letter-spacing:.14em;font-weight:700;color:var(--grey)}

.tabs{display:flex;gap:8px;margin-top:32px;flex-wrap:wrap}
.tb{background:#fff;border:1px solid var(--line);border-radius:8px;padding:12px 18px;cursor:pointer;font-size:14px;font-weight:500;color:var(--body)}
.tb.on{background:var(--navy);color:#fff;border-color:var(--navy)}
.panel{margin-top:24px;background:#fff;border:1px solid var(--line);border-radius:12px;padding:32px}
.panel .q{font-size:21px;font-weight:700;margin-bottom:12px}
.phone .panel .q{font-size:18px}
.panel p{font-size:14px;color:var(--body);line-height:1.6}
.seen{margin-top:16px;display:flex;gap:8px;flex-wrap:wrap}
.chip{background:var(--light);border:1px solid var(--line);border-radius:100px;padding:8px 14px;font-size:12px;color:var(--body)}
.rail{display:flex;gap:12px;padding-left:32px;will-change:transform}
.phone .rail{padding-left:16px;gap:8px}
.pill{flex:0 0 auto;border:1px solid var(--line);border-radius:10px;padding:16px 19px;background:var(--light);min-width:180px}
.pill b{display:block;font-size:12px;color:var(--mag);letter-spacing:.08em;margin-bottom:4px}
.pill span{font-size:14px;color:var(--body)}
.acc{margin-top:32px;border-top:1px solid var(--line)}
.acc .q{padding:24px 0;border-bottom:1px solid var(--line);cursor:pointer;display:flex;justify-content:space-between;gap:16px;align-items:center}
.acc .q h3{font-size:18px;font-weight:600}
.phone .acc .q h3{font-size:16px}
.acc .q i{color:var(--mag);font-style:normal;font-size:21px;flex:0 0 auto;transition:transform .25s}
.acc .q.open i{transform:rotate(45deg)}
.acc .a{max-height:0;overflow:hidden;transition:max-height .35s ease}
.acc .q.open+.a{max-height:340px}
.acc .a p{font-size:14px;line-height:1.6;color:var(--body);padding:4px 0 24px;max-width:76ch}
.rows{margin-top:32px;border-top:1px solid var(--line)}
.row{display:grid;grid-template-columns:180px 1fr;gap:24px;padding:16px 0;border-bottom:1px solid var(--line);align-items:baseline}
.phone .row{grid-template-columns:1fr;gap:4px;padding:16px 0}
.row b{font-size:14px;color:var(--mag);font-weight:600}
.row span{font-size:14px;color:var(--body);line-height:1.6}
.navysec .rows,.navydsec .rows{border-color:#35486d}
.navysec .row,.navydsec .row{border-color:#35486d}
.navysec .row span,.navydsec .row span{color:#C3CFDE}
.book{background:#fff;border:1px solid var(--line);border-radius:10px;overflow:hidden}
.bcov{aspect-ratio:3/4;background:#F4F6FA;border-bottom:1px solid var(--line);padding:16px;display:flex;flex-direction:column;justify-content:space-between;position:relative}
.bcov .num{position:absolute;right:12px;top:12px;background:var(--mag);color:#fff;font-size:11px;font-weight:700;padding:4px 8px;border-radius:3px}
.bcov .cap{font-size:8.5px;letter-spacing:.09em;color:var(--mag);font-weight:600;line-height:1.45}
.bcov .ttl{font-size:14px;font-weight:700;line-height:1.15;letter-spacing:-.01em}
.bcov .byl{font-size:8px;color:var(--grey);letter-spacing:.05em}
.bmeta{padding:12px 14px 16px}
.bmeta h3{font-size:12px;margin-bottom:4px}
.bmeta p{font-size:11px;color:var(--grey)}
.soon{display:inline-block;background:var(--light);border:1px solid var(--line);color:var(--body);font-size:11px;letter-spacing:.08em;padding:4px 9px;border-radius:4px;margin-bottom:12px}
.post{background:#fff;border:1px solid var(--line);border-radius:12px;padding:24px;border-top:3px solid var(--mag)}
.post .tp{font-size:11px;letter-spacing:.1em;color:var(--mag);font-weight:600;margin-bottom:8px}
.post h3{font-size:16px;line-height:1.3;margin-bottom:8px}
.post p{font-size:14px;color:var(--body);line-height:1.6}
.post .ft{margin-top:16px;font-size:11px;color:var(--grey)}

.tl{margin-top:48px;position:relative}
.tltrack{position:relative;height:82px}
.phone .tltrack{display:none}
.tlline{position:absolute;left:0;right:0;top:64px;height:2px;background:var(--line)}
.tlfill{position:absolute;left:0;top:64px;height:2px;background:var(--mag);width:100%}
.sdot{position:absolute;top:57px;width:16px;height:16px;border-radius:50%;background:#fff;border:2px solid var(--mag);transform:translateX(-50%);z-index:2}
.gmark{position:absolute;top:2px;transform:translateX(-50%);text-align:center;z-index:3}
.gmark b{display:block;font-size:8.5px;letter-spacing:.1em;color:var(--navy);font-weight:700;white-space:nowrap}
.gmark i{display:block;width:1px;height:26px;background:#C3CFDE;margin:7px auto 0}
.gmark u{display:block;width:11px;height:11px;background:var(--navy);transform:rotate(45deg);margin:5px auto 0;text-decoration:none}
.tlrow{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px}
.phone .tlrow{grid-template-columns:1fr;gap:24px}
.tlrow .st h3{font-size:14px;margin-bottom:4px}
.tlrow .st p{font-size:12px;color:var(--body);line-height:1.45}
.tlrow .st em{display:block;font-style:normal;font-size:11px;letter-spacing:.07em;color:var(--grey);font-weight:600;margin-top:8px;padding-top:8px;border-top:1px solid var(--line)}
.tlrow .st em b{color:var(--mag);font-weight:700}
.phone .tlrow .st{padding-left:12px;border-left:2px solid var(--mag)}

.aribar{margin-top:32px;border:1px solid var(--line);border-radius:12px;padding:24px 26px;
 background:linear-gradient(90deg,#FBE6F1 0%,#FBE6F1 38%,var(--light) 100%);position:relative}
.aritop{display:grid;grid-template-columns:auto 1fr;gap:16px;align-items:center}
.arimark{width:46px;height:46px;border-radius:50%;border:2px solid var(--mag);position:relative;flex:0 0 auto;background:#fff}
.arimark::after{content:"";position:absolute;inset:7px;border-radius:50%;border:2px solid var(--navy);border-left-color:transparent}
.aribar h3{font-size:16px;margin-bottom:4px}
.aribar p{font-size:14px;color:var(--body);line-height:1.6;max-width:86ch}
.ariline{margin-top:16px;height:3px;border-radius:2px;background:linear-gradient(90deg,var(--mag) 0%,rgba(188,24,103,.55) 55%,rgba(188,24,103,.18) 100%)}
.aripts{margin-top:12px;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px}
.phone .aripts{grid-template-columns:1fr 1fr;gap:8px}
.aripts span{font-size:11px;color:var(--grey);letter-spacing:.03em;line-height:1.45}

.dtier{background:#fff;border:1px solid var(--line);border-radius:12px;padding:24px 26px;border-top:3px solid var(--mag)}
.dtier .dk{font-size:11px;letter-spacing:.13em;font-weight:700;color:var(--mag);margin-bottom:12px}
.dtier h3{font-size:16px;margin-bottom:8px}
.dtier>p{font-size:14px;color:var(--body);line-height:1.6;margin-bottom:16px}
.dtier ul{list-style:none;border-top:1px solid var(--line);padding-top:12px}
.dtier li{font-size:12px;color:var(--navy);padding:8px 0 7px 16px;position:relative;line-height:1.45}
.dtier li::before{content:"";position:absolute;left:0;top:13px;width:5px;height:5px;border-radius:50%;background:var(--mag)}
.dclose{margin-top:32px;background:var(--navy);color:#fff;border-radius:12px;padding:24px 30px}
.dclose h3{font-size:21px;color:#fff;margin-bottom:8px}
.phone .dclose h3{font-size:16px}
.dclose p{font-size:14px;color:#C3CFDE;line-height:1.6;max-width:88ch}

.bio{display:grid;grid-template-columns:300px 1fr;gap:48px;align-items:start;margin-top:8px}
.phone .bio{grid-template-columns:1fr;gap:24px}
.bioimg{position:relative;border-radius:12px;overflow:hidden;background:var(--light);border:1px solid var(--line);aspect-ratio:4/5;display:flex;align-items:center;justify-content:center}
.bioimg span{font-size:11px;letter-spacing:.1em;color:var(--grey);font-weight:700;text-align:center;padding:0 20px;line-height:1.6}
.bio p{font-size:16px;line-height:1.6;color:var(--body);margin-bottom:16px;max-width:70ch}
.bio .nm{font-size:21px;font-weight:700;color:var(--navy);margin-bottom:4px}
.bio .rl{font-size:12px;letter-spacing:.1em;color:var(--mag);font-weight:700;margin-bottom:16px}

.step{margin-top:32px;background:#fff;border:1px solid var(--line);border-radius:12px;overflow:hidden}
.stephead{display:flex;border-bottom:1px solid var(--line);overflow-x:auto}
.stephead div{padding:16px 20px;font-size:14px;font-weight:500;color:var(--body);cursor:pointer;white-space:nowrap;border-bottom:2px solid transparent}
.stephead div.on{color:var(--navy);border-bottom-color:var(--mag)}
.stepbody{padding:32px}
.prose p{font-size:16px;line-height:1.6;color:var(--body);margin-bottom:16px;max-width:74ch}
.prose h3{margin:28px 0 10px}
.tier{background:#fff;border:1px solid var(--line);border-radius:12px;padding:24px}
.tier.mid{border:2px solid var(--mag)}
.tier .tn{font-size:11px;letter-spacing:.1em;color:var(--mag);font-weight:600;margin-bottom:8px}
.tier h3{font-size:21px;margin-bottom:8px}
.tier p{font-size:14px;color:var(--body);line-height:1.6;margin-bottom:16px}
.tier ul{list-style:none;margin-bottom:16px}
.tier li{font-size:14px;color:var(--body);padding:8px 0 7px 18px;position:relative}
.tier li::before{content:"";position:absolute;left:0;top:14px;width:6px;height:6px;border-radius:50%;background:var(--mag)}
.ask{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:48px;align-items:center}
.phone .ask{grid-template-columns:1fr;gap:24px}
.newsbox{background:#fff;border:1px solid var(--line);border-radius:12px;padding:24px}
.notefoot{margin-top:24px;font-size:12px;color:var(--grey);line-height:1.6;max-width:74ch;padding-top:12px;border-top:1px solid var(--line)}

footer{background:var(--navy);color:#fff;padding:48px 0 22px;position:relative;z-index:2}
.phone footer{padding:32px 0 20px}
.fwrap{max-width:var(--wrap);margin:0 auto;padding:0 40px}
.phone .fwrap{padding:0 20px}
/* v15: footer lead magnet */
.fcta{display:grid;grid-template-columns:1fr auto;gap:32px;align-items:center;padding:0 0 40px;
 margin-bottom:32px;border-bottom:1px solid #35486d}
.phone .fcta{grid-template-columns:1fr;gap:16px;padding-bottom:32px;margin-bottom:32px}
.fgrid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:32px;align-items:start}
.phone .fgrid{grid-template-columns:1fr 1fr;gap:24px}
footer h4{font-size:11px;letter-spacing:.11em;color:#8FA2C4;font-weight:600;margin-bottom:12px}
footer a{display:block;color:#C3CFDE;text-decoration:none;font-size:12px;margin-bottom:8px}
.legal{margin-top:32px;padding-top:16px;border-top:1px solid #35486d}
.legal p{font-size:11px;color:#8FA2C4;line-height:1.6;max-width:64ch}
.legal .op{color:#6F82A0;margin-top:0px}

.ann{display:none;position:absolute;z-index:60;background:#0d1117;color:#E6EDF6;border:1px solid var(--mag);border-radius:8px;padding:8px 12px;font-size:11px;line-height:1.45;max-width:290px}
.ann b{color:var(--mag);display:block;font-size:11px;letter-spacing:.08em;margin-bottom:4px}
.ann em{color:#9FE1CB;font-style:normal;display:block;margin-top:4px;font-size:11px}
body.notes .ann{display:block}
.phone .ann{display:none!important}

h1 .g{color:#1D9E75}
body.darkhero .lightsec:first-of-type{background:#0E1626}
body.darkhero .lightsec:first-of-type h1,body.darkhero .lightsec:first-of-type .heroproof b{color:#fff}
body.darkhero .lightsec:first-of-type p.lead{color:#B9C6D8}
body.darkhero .lightsec:first-of-type .heroproof{border-top-color:#2C3D5C}
body.darkhero .lightsec:first-of-type .heroproof span{color:#8FA2C4}
body.darkhero .lightsec:first-of-type .btn:not(.mag){background:#fff;color:var(--navy)}
body.darkhero .lightsec:first-of-type .btn.ghost{background:transparent;color:#fff;border-color:#4C608A}
body.darkhero .lightsec:first-of-type .imgslot{background:#0E1626;border-color:#2C3D5C}
body.darkhero .a1{opacity:.22}
body.darkhero .a2{opacity:.2}
body.circlemask .imgslot{border-radius:50%;aspect-ratio:1/1;border:0;background:transparent}
body.circlemask .imgslot img{height:100%;object-fit:cover}
body.circlemask .imgslot::after{content:"";position:absolute;inset:0;border-radius:50%;border:6px solid rgba(188,24,103,.35);pointer-events:none}
body.bigtype h1{font-size:58px;line-height:1.15;letter-spacing:-.035em}
body.bigtype.phone h1,body.bigtype .phone h1{font-size:44px}
body.bigtype h2{font-size:44px}
body.bigtype p.lead{font-size:18px}
/* ============ v16 CSS ============ */
.pilltabs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-top:32px}
.phone .pilltabs{grid-template-columns:1fr 1fr;gap:8px}
.pt{border:1px solid var(--line);border-radius:10px;padding:16px 18px 16px;cursor:pointer;background:#fff;position:relative;transition:border-color .2s,background .2s}
.pt:hover{border-color:var(--mag)}
.pt.on{background:var(--navy);border-color:var(--navy)}
.pt b{display:block;font-size:11px;letter-spacing:.14em;color:var(--mag);font-weight:700;margin-bottom:8px}
.pt.on b{color:#fff;opacity:.75}
.pt span{display:block;font-size:14px;font-weight:600;color:var(--navy);line-height:1.3}
.pt.on span{color:#fff}
.pt em{position:absolute;right:16px;top:16px;font-style:normal;font-size:11px;font-weight:700;color:var(--grey)}
.pt.on em{color:#8FA2C4}
.pillbody{margin-top:24px;border:1px solid var(--line);border-radius:12px;padding:32px;background:#fff}
.phone .pillbody{padding:24px}
.pillbody .pb{font-size:16px;line-height:1.6;color:var(--body);max-width:70ch;margin-bottom:8px}
.pillbody .pl{font-size:11px;letter-spacing:.09em;font-weight:700;color:var(--mag);margin-bottom:16px}
.icodes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:24px;padding-top:24px;border-top:1px solid var(--line)}
.phone .icodes{grid-template-columns:1fr}
.ic{border:1px solid var(--line);border-radius:8px;padding:12px 14px;background:var(--light);transition:background .2s,border-color .2s}
.ic:hover{background:var(--magsoft);border-color:var(--mag)}
.ic b{display:block;font-size:11px;color:var(--mag);letter-spacing:.06em;margin-bottom:4px}
.ic span{font-size:12px;color:var(--navy);line-height:1.45}

.bscale{display:flex;gap:4px;margin-top:48px;align-items:flex-end}
.phone .bscale{gap:4px}
.bseg{cursor:pointer;text-align:center}
.bseg .bnum{display:block;font-size:11px;color:#8FA2C4;margin-bottom:8px;white-space:nowrap}
.phone .bseg .bnum{font-size:8px}
.bseg .bbar{display:block;height:12px;border-radius:3px;background:#35486D;transition:background .25s,height .25s}
.bseg:hover .bbar{background:#4C608A}
.bseg.on .bbar{background:var(--mag);height:22px}
.bseg .blab{display:block;font-size:11px;color:#8FA2C4;margin-top:8px;line-height:1.3}
.phone .bseg .blab{font-size:8.5px}
.bseg.on .blab{color:#fff;font-weight:600}
.bdetail{margin-top:32px;background:var(--navy2);border-radius:12px;padding:32px;border-left:4px solid var(--mag)}
.phone .bdetail{padding:24px}
.bdetail h3{font-size:21px;color:#fff;margin-bottom:4px}
.bdetail .br{font-size:12px;letter-spacing:.1em;color:var(--mag);font-weight:700;margin-bottom:12px}
.bdetail p{font-size:14px;line-height:1.6;color:#C3CFDE;max-width:74ch}

.fchips{display:flex;gap:8px;flex-wrap:wrap;margin-top:32px}
.fc{border:1px solid var(--line);background:#fff;border-radius:100px;padding:8px 17px;font-size:12px;
 color:var(--body);cursor:pointer;transition:.2s}
.fc:hover{border-color:var(--mag)}
.fc.on{background:var(--navy);color:#fff;border-color:var(--navy)}

.btog{display:inline-flex;gap:0;margin-top:32px;border:1px solid var(--line);border-radius:9px;overflow:hidden}
.bt{padding:12px 24px;font-size:14px;font-weight:500;color:var(--body);cursor:pointer;background:#fff;transition:.2s}
.bt.on{background:var(--navy);color:#fff}
.bpanel{margin-top:24px;border:1px solid var(--line);border-radius:12px;padding:32px;background:#fff}
.phone .bpanel{padding:24px}
.bpanel .bl{font-size:16px;color:var(--navy);font-weight:600;margin-bottom:16px;padding-bottom:16px;border-bottom:1px solid var(--line)}
.bcols{display:grid;grid-template-columns:1fr 1fr;gap:32px}
.phone .bcols{grid-template-columns:1fr;gap:24px}
.bcols h4{font-size:11px;letter-spacing:.13em;font-weight:700;margin-bottom:12px}
.bcols .yes h4{color:var(--mag)}
.bcols .no h4{color:var(--grey)}
.bcols li{list-style:none;font-size:14px;line-height:1.45;padding:8px 0 8px 20px;position:relative;color:var(--body)}
.bcols .yes li::before{content:"";position:absolute;left:0;top:15px;width:7px;height:7px;border-radius:50%;background:var(--mag)}
.bcols .no li{color:var(--grey)}
.bcols .no li::before{content:"";position:absolute;left:0;top:18px;width:9px;height:1px;background:#C3CFDE}

.jrn{margin-top:48px;position:relative}
.jr{display:grid;grid-template-columns:190px 1fr;gap:32px;padding:32px 0;border-top:1px solid var(--line);position:relative}
.phone .jr{grid-template-columns:1fr;gap:8px;padding:24px 0}
.jr:first-child{border-top:0}
.jd{font-size:11px;letter-spacing:.14em;font-weight:700;color:var(--mag);padding-top:4px}
.jc h3{font-size:21px;margin-bottom:8px}
.phone .jc h3{font-size:16px}
.jc p{font-size:14px;line-height:1.6;color:var(--body);max-width:70ch}

.ctl{background:#fff;border:1px solid var(--line);border-radius:12px;padding:24px 22px;border-top:3px solid var(--mag);
 transition:transform .25s,box-shadow .25s;cursor:pointer}
.ctl:hover{transform:translateY(-5px);box-shadow:0 14px 32px rgba(27,42,74,.12)}
.ctl .ck{font-size:11px;letter-spacing:.13em;font-weight:700;color:var(--mag);margin-bottom:12px}
.ctl h3{font-size:16px;margin-bottom:8px}
.ctl p{font-size:12px;color:var(--body);line-height:1.6;margin-bottom:16px}
.ctl .cl{font-size:12px;color:var(--navy);font-weight:600;border-bottom:1px solid var(--mag);padding-bottom:0px}

.lmeta{display:flex;gap:32px;flex-wrap:wrap;margin-top:24px;padding-top:16px;border-top:1px solid var(--line)}
.lmeta span{font-size:12px;color:var(--body)}
.lmeta b{display:block;font-size:9.5px;letter-spacing:.13em;color:var(--grey);font-weight:700;margin-bottom:4px}
.lsecs{margin-top:32px}
.lsec{display:grid;grid-template-columns:56px 1fr;gap:24px;padding:24px 0;border-top:1px solid var(--line)}
.phone .lsec{grid-template-columns:1fr;gap:8px;padding:16px 0}
.lnum{font-size:12px;font-weight:700;color:var(--mag)}
.lsec h3{font-size:18px;margin-bottom:8px}
.lsec p{font-size:14px;line-height:1.6;color:var(--body);max-width:76ch}

/* ============ v17 role section ============ */
.rtabs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-top:48px}
.phone .rtabs{grid-template-columns:1fr 1fr;gap:8px}
.rt{border:1px solid #35486d;border-radius:10px;padding:16px 16px 14px;cursor:pointer;background:var(--navy2);
 position:relative;overflow:hidden;transition:border-color .2s,background .2s}
.rt:hover{border-color:var(--mag)}
.rt.on{background:#fff;border-color:#fff}
.rinit{width:32px;height:32px;border-radius:50%;background:#35486D;color:#C3CFDE;font-size:11px;font-weight:700;
 display:flex;align-items:center;justify-content:center;letter-spacing:.04em;margin-bottom:12px;transition:.2s}
.rt.on .rinit{background:var(--mag);color:#fff}
.rmeta b{display:block;font-size:14px;font-weight:600;color:#fff;line-height:1.3;margin-bottom:4px}
.rt.on .rmeta b{color:var(--navy)}
.rmeta span{display:block;font-size:11px;color:#8FA2C4;line-height:1.45}
.rt.on .rmeta span{color:var(--grey)}
.rprog{position:absolute;left:0;right:0;bottom:0;height:2px;background:rgba(255,255,255,.08)}
.rt.on .rprog{background:rgba(27,42,74,.10)}
.rprog i{display:block;height:2px;width:0;background:var(--mag)}
@keyframes rfill{from{width:0}to{width:100%}}

.rstage{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.02fr);gap:48px;margin-top:24px;
 background:var(--navy2);border:1px solid #35486d;border-radius:14px;padding:32px}
.phone .rstage{grid-template-columns:1fr;gap:24px;padding:24px}
.rq{font-size:26px;font-weight:700;color:#fff;line-height:1.15;letter-spacing:-.01em;margin-bottom:12px}
.phone .rq{font-size:21px}
.ra{font-size:14px;line-height:1.6;color:#C3CFDE;max-width:52ch;margin-bottom:24px}
.rsee h4,.rhide h4{font-size:9.5px;letter-spacing:.14em;font-weight:700;margin-bottom:12px}
.rsee h4{color:var(--mag)}
.rhide h4{color:#8FA2C4}
.rchips{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:24px}
.rstage .chip{background:#35486D;border-color:#41567F;color:#E6EDF6;font-size:12px}
.rhide ul{list-style:none;margin-bottom:24px}
.rhide li{font-size:12px;color:#7E8CA3;padding:4px 0 5px 18px;position:relative;line-height:1.45}
.rhide li::before{content:"";position:absolute;left:0;top:13px;width:10px;height:1px;background:#4C608A}
.rrule{font-size:11px;color:#8FA2C4;line-height:1.6;padding-top:16px;border-top:1px solid #35486d;max-width:50ch}
.rright{display:flex;align-items:flex-start}
.rscreen{position:relative;width:100%;background:#fff;border-radius:10px;overflow:hidden;
 box-shadow:0 16px 42px rgba(6,10,18,.34)}
.rscreen svg{display:block;width:100%;height:auto}
.rcap{position:absolute;left:10px;bottom:10px;background:rgba(13,17,23,.86);color:#E6EDF6;font-size:11px;
 padding:4px 9px;border-radius:4px;letter-spacing:.04em}
.rfoot{margin-top:24px;font-size:12px;color:#8FA2C4;line-height:1.6;max-width:82ch}

/* ============ v18 Insights and Article ============ */
.fbar{margin-top:32px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:16px 0}
.frow{display:flex;align-items:center;gap:16px;padding:4px 0}
.phone .frow{flex-direction:column;align-items:flex-start;gap:8px}
.flab{font-size:9.5px;letter-spacing:.14em;font-weight:700;color:var(--grey);width:52px;flex:0 0 auto}
.incount{margin-top:24px;font-size:12px;color:var(--grey);letter-spacing:.02em}
.incard{cursor:pointer;transition:transform .2s,box-shadow .2s}
.incard:hover{transform:translateY(-4px);box-shadow:0 14px 32px rgba(27,42,74,.12)}
.inempty{grid-column:1 / -1;border:1px dashed var(--line);border-radius:12px;padding:32px;text-align:center;
 font-size:14px;color:var(--body)}
.inempty span{display:block;font-size:12px;color:var(--grey);margin-top:8px}

.artwrap{max-width:820px}
.crumb{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--grey);margin-bottom:24px}
.crumb .cl{color:var(--mag);font-weight:600;cursor:pointer;border-bottom:1px solid var(--mag)}
.crumb i{font-style:normal;color:#C3CFDE}
.ah1{font-size:44px;line-height:1.15;letter-spacing:-.02em;margin-bottom:16px}
.phone .ah1{font-size:26px}
.ameta{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:12px;color:var(--grey);
 padding-bottom:24px;border-bottom:1px solid var(--line)}
.ameta i{display:block;width:3px;height:3px;border-radius:50%;background:#C3CFDE}
.ahero{position:relative;margin:30px 0 34px;border-radius:14px;overflow:hidden;background:var(--light);
 border:1px solid var(--line);display:flex;align-items:center;justify-content:center;padding:16px}
.ahero .tag{position:absolute;left:12px;bottom:12px;background:rgba(13,17,23,.86);color:#E6EDF6;
 font-size:11px;padding:4px 9px;border-radius:5px}
.abody .ap{font-size:16px;line-height:1.6;color:var(--body);margin-bottom:16px}
.phone .abody .ap{font-size:14px}
.abody .ah2{font-size:26px;line-height:1.3;margin:38px 0 14px;letter-spacing:-.01em}
.phone .abody .ah2{font-size:21px}
.aq{border-left:3px solid var(--mag);padding:4px 0 6px 22px;margin:30px 0;font-size:18px;line-height:1.6;
 color:var(--navy);font-weight:500}
.phone .aq{font-size:16px}
.astat{display:grid;grid-template-columns:auto 1fr;gap:24px;align-items:center;background:var(--light);
 border-radius:12px;padding:24px 26px;margin:30px 0}
.phone .astat{grid-template-columns:1fr;gap:8px;padding:16px}
.astat b{font-size:44px;font-weight:700;color:var(--mag);line-height:1.15}
.astat span{font-size:14px;color:var(--body);line-height:1.6}
.acall{margin-top:32px;border:1px solid var(--line);border-radius:12px;padding:24px 24px;background:#fff;
 border-left:3px solid var(--mag);cursor:pointer}
.acall b{display:block;font-size:14px;color:var(--navy);margin-bottom:4px}
.acall span{font-size:12px;color:var(--mag);font-weight:600}
.arel{margin-top:48px;padding-top:32px;border-top:1px solid var(--line)}
.arel h4{font-size:9.5px;letter-spacing:.14em;font-weight:700;color:var(--mag);margin-bottom:16px}
.arc{border:1px solid var(--line);border-radius:12px;padding:24px;margin-bottom:12px;cursor:pointer;
 border-top:3px solid var(--mag);transition:transform .2s,box-shadow .2s}
.arc:hover{transform:translateY(-3px);box-shadow:0 12px 28px rgba(27,42,74,.11)}
.arc h3{font-size:16px;line-height:1.3;margin-bottom:8px}
.arc p{font-size:14px;color:var(--body);line-height:1.6}
.relnote{font-size:11px;color:var(--grey);line-height:1.6;margin-top:12px}
.aclose{margin-top:48px;background:var(--navy);border-radius:14px;padding:32px}
.aclose h3{font-size:21px;color:#fff;margin-bottom:8px}
.aclose p{font-size:14px;color:#C3CFDE;line-height:1.6;margin-bottom:16px;max-width:52ch}


/* v20: focus must be visible or keyboard access is unusable. */
:focus-visible{outline:2px solid var(--mag);outline-offset:3px;border-radius:4px}
.navysec :focus-visible,.navydsec :focus-visible,nav.site :focus-visible,footer :focus-visible{outline-color:#fff}
.skip{position:absolute;left:-9999px;top:0;z-index:500;background:var(--mag);color:#fff;
 padding:12px 18px;font-size:12px;font-weight:600;border-radius:0 0 6px 0}
.skip:focus{left:0}


/* v21 Publications cover treatment */
.bgrid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:16px;margin-top:48px}
.phone .bgrid{grid-template-columns:1fr 1fr;gap:12px}
.book{background:#fff;border:1px solid var(--line);border-radius:10px;overflow:hidden;
 transition:transform .25s,box-shadow .25s}
.book:hover{transform:translateY(-6px);box-shadow:0 16px 36px rgba(27,42,74,.16)}
.bcov{position:relative;aspect-ratio:3/4;background:var(--light);border-bottom:1px solid var(--line);overflow:hidden;
 display:block;padding:0}
.bimg{width:100%;height:100%;object-fit:cover;display:block}
.bslot{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;
 gap:8px;padding:12px;background:linear-gradient(160deg,#1B2A4A 0%,#2C3D5C 100%)}
.bcode{font-size:26px;font-weight:700;color:#fff;opacity:.30;letter-spacing:.04em}
.bfile{font-size:8px;color:#8FA2C4;letter-spacing:.03em;text-align:center;line-height:1.45;word-break:break-all}
.bnum{position:absolute;right:9px;top:9px;background:var(--mag);color:#fff;font-size:11px;font-weight:700;
 padding:4px 7px;border-radius:3px;z-index:2}
.bmeta{padding:12px 14px 16px}
.bmeta h3{font-size:12px;margin-bottom:4px;line-height:1.3}
.bmeta p{font-size:11px;color:var(--grey)}


/* v22 Publications */
.ser{background:#fff;border:1px solid var(--line);border-radius:12px;padding:32px 28px;border-top:3px solid var(--mag)}
.ser .sk{font-size:11px;letter-spacing:.14em;font-weight:700;color:var(--mag);margin-bottom:12px}
.ser h3{font-size:21px;margin-bottom:12px;line-height:1.3}
.ser p{font-size:14px;line-height:1.6;color:var(--body);margin-bottom:16px}
.ser .sw{font-size:12px;color:var(--navy);font-weight:600;padding-top:16px;border-top:1px solid var(--line);line-height:1.6}















/* v24 what is inside a guide */
.ins{background:#fff;border:1px solid var(--line);border-radius:12px;padding:24px 26px}
.ins .ik{font-size:11px;letter-spacing:.14em;font-weight:700;color:var(--mag);margin-bottom:12px}
.ins h3{font-size:18px;margin-bottom:8px;line-height:1.3}
.ins p{font-size:14px;line-height:1.6;color:var(--body);margin-bottom:16px}
.ins ul{list-style:none;border-top:1px solid var(--line);padding-top:12px}
.ins li{font-size:12px;color:var(--navy);padding:4px 0 6px 16px;position:relative;line-height:1.45}
.ins li::before{content:"";position:absolute;left:0;top:12px;width:5px;height:5px;border-radius:50%;background:var(--mag)}
.ibound{margin-top:24px;background:var(--navy);border-radius:12px;padding:24px 28px}
.ibound b{display:block;font-size:16px;color:#fff;margin-bottom:8px}
.ibound p{font-size:14px;color:#C3CFDE;line-height:1.6;max-width:88ch}


/* v29: the role section gets its own ground. It was navy deep, identical to the section directly
   above it, so the strongest block on the page read as a continuation rather than its own chapter. */
.rolesec{background:linear-gradient(180deg,#16233D 0%,#1B2A4A 58%,#1B2A4A 100%);color:#fff;
 border-top:1px solid #35486d;border-bottom:1px solid #35486d;position:relative}
.rolesec::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;z-index:6;
 background:linear-gradient(90deg,var(--mag) 0%,rgba(188,24,103,.35) 42%,transparent 100%)}
.rolesec h2{color:#fff}
.rolesec p.lead{color:#C3CFDE}
.rolesec .btn.ghost{color:#fff;border-color:#4C608A}
.rolesec :focus-visible{outline-color:#fff}


/* v30: diffs light variant, so the role section is the only dark block on the lower page
   and actually reads as its own chapter. Previously sections 7 and 8 were both dark and adjacent. */
.whitesec .diff,.lightsec .diff{border-top:1px solid var(--line)}
.whitesec .diff h3,.lightsec .diff h3{color:var(--navy)}
.whitesec .diff p,.lightsec .diff p{color:var(--body)}

/* stronger separation for the role section: real contrast, not a four hex point nudge */
.rolesec{background:#0E1626;color:#fff;position:relative;
 border-top:0;border-bottom:1px solid #2C3D5C}
.rolesec::before{content:"";position:absolute;left:0;right:0;top:0;height:4px;z-index:6;
 background:linear-gradient(90deg,var(--mag) 0%,rgba(188,24,103,.45) 38%,transparent 78%)}
.rolesec::after{content:"";position:absolute;left:0;right:0;top:4px;height:120px;z-index:1;
 background:radial-gradient(ellipse at 20% 0%,rgba(188,24,103,.16) 0%,transparent 68%);pointer-events:none}
.rolesec h2{color:#fff}
.rolesec p.lead{color:#C3CFDE}
.rolesec .rt{background:#1B2A4A;border-color:#35486D}
.rolesec .rstage{background:#16233D;border-color:#2C3D5C}
.rolesec :focus-visible{outline-color:#fff}


/* v37: real cover art on all nine. The number badge is removed because every cover
   already carries its own number block, and two numbers on one card reads as an error. */
.bnum{display:none}
.bcov{background:#E6EDF6}
.bimg{width:100%;height:100%;object-fit:cover;display:block}


/* ===================================================================
   Static build additions.
   =================================================================== */

/* Reveal. The failure on the previous build was content already on screen
   never animating in, so it stayed invisible. .noanim is applied by the
   script to anything inside the first viewport: visible immediately, no
   transition. Below the fold still animates. */
.rv.noanim{transition:none!important;opacity:1!important;transform:none!important}

/* No script, no hidden content. A visitor with JavaScript disabled sees the
   whole page rather than a blank one. */
.no-js .rv{opacity:1!important;transform:none!important}
@media (prefers-reduced-motion: reduce){
  .rv{opacity:1!important;transform:none!important;transition:none!important}
  .tick{animation:none!important}
  .p2,.p4,.p6,.rot{animation:none!important}
}

/* Panels are rendered at build time and switched by the script. Without JS
   the first of each group shows, which is a working page rather than a broken
   one. */
.rpanel,.ppanel,.bpanel,.spanel,.bp{display:none}
.rpanel.on,.ppanel.on,.bpanel.on,.spanel.on,.bp.on{display:block}
:is(.rpanel,.ppanel,.bpanel,.spanel,.bp):first-child:not(.on){display:none}
/* The first panel carries class="on" from the build, so it shows without
   JavaScript. The old :first-child fallback sat after .on in the cascade at
   equal specificity, so panel one stayed visible whatever was selected and
   two panels rendered side by side. */
.no-js :is(.rpanel,.ppanel,.bpanel,.spanel,.bp):first-child{display:block}

/* Logo is a link in the static build. */
a.logo{text-decoration:none}
a.logo:hover{opacity:.9}

/* Footer links are real anchors now. */
footer a{text-decoration:none}
footer a:hover{color:#fff}

/* Nav links are real anchors now. */
.links a{text-decoration:none}
.drawer a{text-decoration:none}

/* Real ACL mark. The CSS drawn circle was a wireframe placeholder. */
.logo img{width:26px;height:26px;border-radius:50%;display:block;flex:0 0 auto}
.logo span{white-space:nowrap}
footer .logo img{width:26px;height:26px}

/* Ari mark. Was a CSS drawn ring in the wireframe. */
.arifab img{width:30px;height:30px;display:block;flex:0 0 auto}
.arifab i{display:none}
.aripanel h4{display:flex;align-items:center;gap:8px}
.aripanel h4 img{width:22px;height:22px;flex:0 0 auto}

/* Approved logo used as approved. It carries the wordmark, so no text beside it.
   56px is the smallest size at which the enclosed text resolves. */
.logo img{width:56px;height:56px;border-radius:50%;display:block;flex:0 0 auto}
.logo{gap:0}
nav.site .in{padding-top:8px;padding-bottom:8px}
nav.site.tight .in{padding-top:4px;padding-bottom:4px}
nav.site.tight .logo img{width:44px;height:44px;transition:width .18s,height .18s}
@media (max-width:640px){ .logo img{width:44px;height:44px} }
/* Section 8 of the locked brand standard: top-bar carries the master mark and
   the platform name in text. Mark sized so its enclosed wordmark still reads. */
.logo{gap:12px}
.logo span{white-space:nowrap}

/* ===================================================================
   Redline corrections, 5 September 2026.
   =================================================================== */

/* R15. Focus was undefined, so keyboard users got the browser default,
   which is close to invisible on the navy ground. One ring, everywhere. */
:root{
  --focus:#BC1867;
  --step-1:4px;  --step-2:8px;  --step-3:12px; --step-4:16px;
  --step-5:24px; --step-6:32px; --step-7:48px; --step-8:64px; --step-9:96px;
}
*:focus-visible{
  outline:3px solid var(--focus);
  outline-offset:3px;
  border-radius:3px;
}
nav.site *:focus-visible,footer *:focus-visible,.hero.dark *:focus-visible{
  outline-color:#fff;
}
*:focus:not(:focus-visible){outline:none}

/* R11. Section padding was binary, 96 or 48, regardless of how much a
   section holds. Three weights instead, so the page has a rhythm. */
.pad{padding:96px 0}
.pad.tight{padding:64px 0}
.pad.loose{padding:128px 0}
@media (max-width:1024px){
  .pad{padding:64px 0}
  .pad.tight{padding:48px 0}
  .pad.loose{padding:96px 0}
}
@media (max-width:640px){
  .pad{padding:48px 0}
  .pad.tight{padding:32px 0}
  .pad.loose{padding:64px 0}
}

/* R10. Only 640 and 820 existed, so 820 to 1100 was desktop but cramped,
   which is most laptop traffic. */
@media (max-width:1024px){
  .wrap{padding-left:32px;padding-right:32px}
  h1{font-size:44px}
  .g4{grid-template-columns:repeat(2,1fr)}
  .g3{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:820px){
  h1{font-size:34px}
}

/* R12. Line length ran from 30ch to 88ch. Body copy holds at a readable
   measure and nothing exceeds 74ch. */
p,.lead,.ap,li{max-width:68ch}
.lead{max-width:60ch}
.ap{max-width:70ch}
h1,h2{max-width:20ch}
h3{max-width:32ch}

/* R2. Two primary calls to action competed on every page, both magenta.
   The diagnostic is the entry product; registration is what follows it. */
.cta-sm{
  background:transparent;
  border:1px solid rgba(255,255,255,.35);
  color:#fff;
  font-weight:600;
}
.cta-sm:hover{background:rgba(255,255,255,.10);border-color:rgba(255,255,255,.55)}
nav.site .cta-sm{box-shadow:none}

/* R14. Panel labels were marked up as h4, which skipped a heading level and
   read to a screen reader as a missing section. Same appearance, correct
   semantics. */
.plbl{
  font-size:9.5px;letter-spacing:.14em;font-weight:700;
  color:#7E8CA3;margin-bottom:8px;text-transform:uppercase;
}
.rsee .plbl,.rhide .plbl{color:#7E8CA3}
.yes .plbl{color:#1B2A4A}
.no .plbl{color:#7E8CA3}

/* ===================================================================
   The scroll spine. Restored from v37.
   A 1px line down the left edge that fills magenta as the page scrolls,
   with the four programme gates marked along it. Each gate lights as you
   pass it. The page becomes the programme: you scroll through the gates.
   =================================================================== */
.spine{
  position:fixed;left:24px;top:0;bottom:0;width:1px;
  background:rgba(27,42,74,.10);z-index:5;pointer-events:none;
}
.spinefill{
  position:absolute;left:0;top:0;width:1px;height:0;
  background:#BC1867;
  transition:height .12s linear;
}
.gate{
  position:absolute;left:-4px;width:9px;height:9px;border-radius:50%;
  background:#fff;border:1px solid rgba(27,42,74,.25);
  transition:background .3s,border-color .3s,transform .3s;
}
.gate.lit{background:#BC1867;border-color:#BC1867;transform:scale(1.35)}
.gatelab{
  position:absolute;left:16px;
  font-size:9.5px;letter-spacing:.1em;font-weight:600;
  color:#7E8CA3;white-space:nowrap;
  opacity:0;transition:opacity .3s;
}
.gatelab.lit{opacity:1}

/* On a dark section the line and unlit gates need to read against navy. */
.spine.ondark{background:rgba(255,255,255,.14)}
.spine.ondark .gate{background:#1B2A4A;border-color:rgba(255,255,255,.30)}
.spine.ondark .gatelab{color:#A9B6C9}

/* The spine needs room. Below the laptop range it would sit on the copy. */
@media (max-width:1180px){ .spine{display:none} }
@media (prefers-reduced-motion: reduce){ .spinefill{transition:none} }
/* Related block label. Was an h4 after an h2, which skipped a level. */
.arel .relhead{font-size:9.5px;letter-spacing:.14em;color:#7E8CA3;margin-bottom:16px}

/* Use case pills are a list of programme types, not controls. In v37 they
   carried a button role and a hover state but were never wired to anything,
   so clicking changed the colour and nothing else happened. They read as
   labels now. */
.uc[data-static]{cursor:default}
.uc[data-static]:hover{border-color:#C2CDDD;background:#fff}
.uc[data-static]:active{transform:none}

/* Platform, "Nothing arrives in a shape you have not already seen".
   The three cards were identical, so the reader could not tell which was
   which. Each cadence now carries its own accent. */
.artcard:nth-child(1){border-top:3px solid #1B2A4A}
.artcard:nth-child(2){border-top:3px solid #BC1867}
.artcard:nth-child(3){border-top:3px solid #4C608A}
.artcard:nth-child(1) .ak{color:#1B2A4A}
.artcard:nth-child(2) .ak{color:#BC1867}
.artcard:nth-child(3) .ak{color:#4C608A}

/* Platform, "Three ways in". Flat panels with no hierarchy. */
.tier{
  border:1px solid #C2CDDD;border-radius:14px;padding:32px;
  background:#fff;position:relative;overflow:hidden;
  transition:transform .2s,box-shadow .2s,border-color .2s;
}
.tier:hover{transform:translateY(-4px);box-shadow:0 16px 40px rgba(27,42,74,.10);border-color:#A9B6C9}
.tier::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:#C2CDDD}
.tier:nth-child(1)::before{background:#1D9E75}
.tier:nth-child(2)::before{background:#BC1867}
.tier:nth-child(3)::before{background:#1B2A4A}

/* Platform sticky section. The media column is sticky and the copy column
   scrolls, so once the copy ran out the right side sat empty against a large
   band of white. The section now ends with the copy. */
#stickysec .sticky{align-items:start}
#stickysec .stickycopy .blk:last-child{padding-bottom:0}
#stickysec{padding-bottom:64px}

/* The Ari band on Platform carried an empty CSS ring where the mark belongs. */
.arimark{display:flex;align-items:center;justify-content:center;background:none;border:0}
.arimark img{width:46px;height:46px;display:block}

/* The three books. Previously plain text cards with no cover, no format and
   no route to buy. Book 1 is a free download, Books 2 and 3 are Amazon only
   and never take checkout on this site. */
.tgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:32px;margin-top:48px}
.title{
  background:#fff;border:1px solid #C2CDDD;border-radius:14px;overflow:hidden;
  display:flex;flex-direction:column;transition:transform .2s,box-shadow .2s;
}
.title:hover{transform:translateY(-4px);box-shadow:0 18px 44px rgba(27,42,74,.12)}
.tcov{background:#E7EBF3;aspect-ratio:3/4;display:flex;align-items:center;justify-content:center;overflow:hidden}
.tcov img{width:100%;height:100%;object-fit:cover;display:block}
.tcovph{
  width:100%;height:100%;display:flex;align-items:center;justify-content:center;
  padding:24px;text-align:center;
  background:linear-gradient(150deg,#1B2A4A,#2C3D5C);
}
.tcovph span{color:#fff;font-size:16px;font-weight:700;line-height:1.3;letter-spacing:.01em}
.tbody{padding:24px;display:flex;flex-direction:column;flex:1}
.tk{font-size:9.5px;letter-spacing:.14em;font-weight:700;color:#BC1867;margin-bottom:8px}
.title h3{font-size:18px;line-height:1.3;margin-bottom:8px;color:#1B2A4A}
.title p{font-size:14px;line-height:1.6;color:#48576F;flex:1}
.tmeta{font-size:11px;color:#7E8CA3;letter-spacing:.04em;margin-top:16px;padding-top:12px;border-top:1px solid #DDE4EE}
.tcta{margin-top:16px;display:flex;flex-direction:column;gap:8px;align-items:flex-start}
.tcta .btn{width:100%;text-align:center}
.tfree{font-size:11.5px;color:#7E8CA3}
.tsoon{font-size:12.5px;color:#7E8CA3;font-weight:600;padding:12px 0}
@media (max-width:1024px){ .tgrid{grid-template-columns:repeat(2,1fr)} }
@media (max-width:640px){ .tgrid{grid-template-columns:1fr;gap:24px} }

/* The band detail panel is a white card inside a navy section, so its text
   was inheriting the section's white and reading white on white. */
.bpanel{background:#fff;color:#48576F}
.bpanel h3{color:#1B2A4A;font-size:21px;margin:8px 0 12px}
.bpanel p{color:#48576F;font-size:16px;line-height:1.6;max-width:68ch}
.bpanel .br{color:#BC1867;font-size:11px;letter-spacing:.12em;font-weight:700}
.bpanel a{color:#BC1867}


/* Founder portrait. Was an asset placeholder. */
.bioimg{overflow:hidden;background:#E7EBF3;display:block}
.bioimg img{width:100%;height:100%;object-fit:cover;object-position:center 22%;display:block}

/* ===================================================================
   Platform, "What you are actually looking at".

   The media pane was sticky but only about 540px tall, so on a normal
   viewport roughly a third of the right hand column sat empty below it on
   every screen as you scrolled. The pane now fills the height it occupies
   and the artwork is centred inside it, so the column reads as one surface
   rather than a card floating above dead space.
   =================================================================== */
@media (min-width:821px){
  #stickysec .sticky{
    grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);
    gap:56px;
    align-items:start;
  }
  #stickysec .stickymedia{
    position:sticky;
    top:88px;
    align-self:start;
    aspect-ratio:auto;
    height:calc(100vh - 148px);
    max-height:none;
    min-height:420px;
    display:flex;align-items:center;justify-content:center;
    background:#F4F6FA;
    border:1px solid #DDE4EE;
    border-radius:14px;
  }
  #stickysec .stickymedia .pane{
    position:absolute;inset:0;
    display:flex;align-items:center;justify-content:center;
    padding:40px;
  }
  #stickysec .stickymedia .pane svg{
    width:100%;height:auto;max-height:100%;
  }
  /* The copy column has to be long enough that the pane has something to
     stick against, and short enough that it does not run past it. */
  #stickysec .stickycopy .blk{padding:56px 0}
  #stickysec .stickycopy .blk:first-child{padding-top:8px}
  #stickysec .stickycopy .blk:last-child{padding-bottom:8px}
}
@media (min-width:1400px){
  #stickysec .stickymedia{height:calc(100vh - 168px);max-height:760px}
}

/* ===================================================================
   The actual cause of the Platform white space.

   section{overflow:hidden} exists so the decorative aura blobs do not
   create a horizontal scrollbar. But an overflow:hidden ancestor disables
   position:sticky on every descendant, so the media pane never stuck. It
   sat at the top of its column while the copy scrolled past, which is the
   empty column that kept coming back after two attempts to resize it.

   clip with an inline axis exception contains the blobs horizontally and
   leaves the vertical axis visible, which is what sticky needs. The plain
   overflow-x fallback covers browsers without overflow-clip-margin.
   =================================================================== */
#stickysec{overflow:visible}
#stickysec .wrap{overflow:visible}
@supports (overflow: clip){
  section{overflow:visible;overflow-x:clip}
}
@supports not (overflow: clip){
  #stickysec{overflow:visible}
}

/* The rail slides horizontally, so its section must not clip it vertically
   and the strip needs room to travel. */
#railsec{overflow:visible;overflow-x:clip}
.rail{will-change:transform;transition:transform .06s linear}
@media (prefers-reduced-motion: reduce){ .rail{transform:none!important;transition:none} }

/* ===================================================================
   CARD PRIMITIVE
   ===================================================================
   Grid stretches the boxes. It does not align what is inside them, which
   is why a title that wraps in one card pushes its body line out of step
   with the others. Every card is a flex column: the head reserves the
   space of its longest wrap, the body flexes, the action pins to the
   bottom. Applied once here rather than eight times by hand.
   =================================================================== */
.rt, .pt, .card, .tier, .art, .artcard, .title, .incard, .arc, .st, .book, .post{
  display:flex;
  flex-direction:column;
  height:100%;
}

/* Heads occupy a FIXED two lines, not a minimum. A minimum still lets
   content govern, so a one line title and a two line title produced
   different geometry and everything below them fell out of step. A fixed
   height with a clamp is deterministic: every card in a row is identical
   whatever the text does. */
.rt .rmeta b, .pt b, .card h3, .tier h3, .art h3, .artcard h3,
.st h3, .incard h3, .arc h3, .post h3, .book h3{
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
  height:2.6em;              /* exactly two lines at 1.3 */
  line-height:1.3;
  margin-bottom:8px;
}
.title h3{height:auto;-webkit-line-clamp:none;display:block;overflow:visible}

/* Bodies take the remaining height so actions and meta lines sit level. */
.rt .rmeta, .pt .pb, .card p, .tier p, .art p, .artcard p,
.st p, .incard p, .arc p, .post p{ flex:1 1 auto }

/* Meta and action rows pin to the foot of the card, level across a row. */
.incard .ft, .post .ft, .arc .ft, .title .tmeta, .title .tcta,
.art .alist, .st em{ margin-top:auto }

/* The role card is horizontal. The meta column has to stretch or the
   description cannot sit at a consistent height. */
.rt{
  flex-direction:row;
  align-items:stretch;
  gap:12px;
}
.rt .rinit{flex:0 0 auto;align-self:flex-start}
.rt .rmeta{display:flex;flex-direction:column;min-width:0;flex:1 1 auto}
.rt .rmeta b{height:2.6em;font-size:14px}
.rt .rmeta span{margin-top:0}

@media (max-width:640px){
  .rt .rmeta b, .pt b, .card h3, .tier h3, .art h3, .artcard h3,
  .st h3, .incard h3, .arc h3, .post h3, .book h3{
    height:auto;-webkit-line-clamp:none;display:block;overflow:visible;
  }
}

/* ===================================================================
   INTERACTION VOCABULARY
   ===================================================================
   Three components were clickable with no hover response, and two invited
   a click then left the cursor as an arrow. A control has to acknowledge
   the pointer or it reads as decoration.
   =================================================================== */
.acc .q{transition:background .18s,padding-left .18s}
.acc .q:hover{background:rgba(188,24,103,.04);padding-left:8px}
.acc .q:hover h3{color:#BC1867}

.stephead div{transition:background .18s,color .18s}
.stephead div:hover:not(.on){background:#F4F6FA;color:#1B2A4A}

.bt{transition:background .18s,color .18s}
.bt:hover:not(.on){background:#F4F6FA}

.tier, .title, .book{cursor:default}
.tier a, .title a, .book a{cursor:pointer}

/* ===================================================================
   TOUCH TARGETS
   ===================================================================
   Four controls sat under 44px, the point below which thumbs miss. The
   filter chips were the worst at 32px, and they are the primary control
   on Insights.
   =================================================================== */
.fc, .chip, .uc, .bt{
  min-height:44px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}
.fc, .chip{padding:0 16px}
.uc{padding:0 20px}
.bt{padding:0 24px}

/* ===================================================================
   Selected role card.

   .rt.on sets a white card so the selected role reads as chosen. A later
   rule, .rolesec .rt, forces navy on the dark section and wins on equal
   specificity, so the card stayed navy while the on-state text colours
   still applied. The result was navy text on navy: the selected card lost
   its title entirely and read as a broken card rather than a chosen one.
   =================================================================== */
.rolesec .rt.on{
  background:#fff;
  border-color:#fff;
}
.rolesec .rt.on .rmeta b{color:#1B2A4A}
.rolesec .rt.on .rmeta span{color:#48576F}
.rolesec .rt.on .rinit{background:#BC1867;color:#fff}
.rolesec .rt.on .rprog{background:rgba(27,42,74,.10)}

/* Unselected cards on the dark ground need enough contrast to be readable
   and enough difference from the selected one to be obviously unselected. */
.rolesec .rt .rmeta b{color:#fff}
.rolesec .rt .rmeta span{color:#A9B6C9}
.rolesec .rt .rinit{background:#35486D;color:#C3CFDE}

/* ===================================================================
   Mobile reflow.

   v37 switched these to fewer columns via a .phone class the wireframe
   toggled by hand. On a real site that class never exists, so the grids
   stayed at their desktop column count all the way down. At 390px the
   role cards were four columns of 73px and the statistics three of 109px.
   =================================================================== */
@media (max-width:900px){
  .rtabs{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .cmphead,.cmprow{grid-template-columns:1.4fr repeat(3,minmax(0,1fr));font-size:13px}
}
@media (max-width:640px){
  .rtabs{grid-template-columns:1fr;gap:8px}
  .stats{grid-template-columns:1fr;gap:20px}
  .fgrid{grid-template-columns:repeat(2,minmax(0,1fr));gap:28px}
  .cmphead,.cmprow{grid-template-columns:1fr;gap:4px}
  .cmphead{display:none}
  .cmprow{padding:16px 0;border-bottom:1px solid #DDE4EE}
  .cmprow > *:first-child{font-weight:600;margin-bottom:4px}
}
@media (max-width:420px){
  .fgrid{grid-template-columns:1fr;gap:24px}
}

/* ===================================================================
   Role panel layout.

   v37 painted the two columns straight into .rstage, so .rstage was the
   grid. The static build needs all four panels present, so each one is
   wrapped in .rpanel. That wrapper became the grid item: the visible panel
   filled column one and column two sat empty, and the screen card dropped
   below the copy instead of beside it. The grid moves onto the panel.
   =================================================================== */
.rstage{display:block}
.rpanel.on{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1.02fr);
  gap:48px;
  align-items:start;
}
.rpanel .rright{display:flex;align-items:flex-start;justify-content:center}
@media (max-width:900px){
  .rpanel.on{grid-template-columns:1fr;gap:24px}
}

/* ===================================================================
   Positioning Canon, Tier 1.

   "Where change becomes measurable value." Locked July 2026 after
   "adoption" was rejected as incumbent vocabulary contradicted by CPI.
   The canon places it under the wordmark, which means every page.
   =================================================================== */
.logo .wm{display:flex;flex-direction:column;line-height:1.15}
.logo .wm em{
  font-style:normal;font-weight:500;
  font-size:10.5px;letter-spacing:.02em;
  color:#A9B6C9;margin-top:3px;white-space:nowrap;
}
footer .logo .wm em{color:#7E8CA3}
nav.site.tight .logo .wm em{display:none}
@media (max-width:820px){ .logo .wm em{display:none} }

/* Positioning Canon, Tier 2. Opens hero sections and the About page. */
.tier2{
  font-size:15px;line-height:1.6;color:#7E8CA3;
  max-width:62ch;margin-top:16px;
  padding-left:16px;border-left:2px solid #BC1867;
}
.lightsec .tier2,.whitesec .tier2{color:#48576F}
@media (max-width:640px){ .tier2{font-size:14px;padding-left:12px} }

/* ===================================================================
   Diagnostic availability.

   Every page carried a primary call to action for a diagnostic that does
   not exist yet, and a promise of ten questions with no call required. A
   visitor clicking it reached a page with no form. On a site whose whole
   argument is that nothing is claimed without evidence, that was the worst
   contradiction on it. The date is stated plainly instead.
   =================================================================== */
.soondate{
  display:inline-flex;align-items:center;gap:8px;
  font-size:11px;letter-spacing:.1em;font-weight:700;
  color:#BC1867;background:#FBE6F1;
  border:1px solid rgba(188,24,103,.22);
  border-radius:100px;padding:7px 14px;
  margin-bottom:16px;
}
.soondate::before{
  content:"";width:6px;height:6px;border-radius:50%;
  background:#BC1867;flex:0 0 auto;
}
.navysec .soondate,.rolesec .soondate,footer .soondate{
  color:#fff;background:rgba(188,24,103,.20);border-color:rgba(188,24,103,.45);
}
.navysec .soondate::before,footer .soondate::before{background:#BC1867}

/* ===================================================================
   Contact form.

   Five fields. The message is composed in the sender's own mail client,
   so no third party processes the data and nothing is added to the
   subprocessor register. Swap the send handler for a Tally embed when
   that form exists.
   =================================================================== */
.cwrap{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:64px;align-items:start}
.cnote{margin-top:24px;padding:0;list-style:none}
.cnote li{
  font-size:13.5px;line-height:1.6;color:#48576F;
  padding-left:18px;position:relative;margin-bottom:10px;max-width:44ch;
}
.cnote li::before{content:"";position:absolute;left:0;top:9px;width:7px;height:1px;background:#BC1867}

.cform{background:#F4F6FA;border:1px solid #DDE4EE;border-radius:14px;padding:32px}
.fgridf{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.fld{display:flex;flex-direction:column}
.fld.wide{grid-column:1 / -1}
.fld label{
  font-size:11px;letter-spacing:.1em;font-weight:700;text-transform:uppercase;
  color:#1B2A4A;margin-bottom:7px;display:flex;gap:6px;align-items:baseline;
}
.fld label i{font-style:normal;font-weight:500;letter-spacing:.04em;text-transform:none;font-size:10.5px;color:#7E8CA3}
.fld input,.fld textarea{
  font:inherit;font-size:14px;color:#1B2A4A;
  background:#fff;border:1px solid #C2CDDD;border-radius:8px;
  padding:12px 14px;width:100%;min-height:46px;
  transition:border-color .18s,box-shadow .18s;
}
.fld textarea{min-height:120px;resize:vertical;line-height:1.6}
.fld input::placeholder,.fld textarea::placeholder{color:#A9B6C9}
.fld input:hover,.fld textarea:hover{border-color:#A9B6C9}
.fld input:focus,.fld textarea:focus{border-color:#BC1867;box-shadow:0 0 0 3px rgba(188,24,103,.10);outline:none}
.fld.bad input,.fld.bad textarea{border-color:#BC1867;background:#FFF7FB}
.fld .err{font-size:11.5px;color:#BC1867;margin-top:5px;font-weight:500}
#csend{margin-top:24px;width:100%;text-align:center;border:0;cursor:pointer;font:inherit;font-weight:600}
.cfoot{font-size:12px;color:#7E8CA3;line-height:1.6;margin-top:16px;max-width:52ch}
.csent{
  background:#fff;border:1px solid #C2CDDD;border-left:3px solid #1D9E75;
  border-radius:10px;padding:20px;margin-top:20px;
}
.csent b{display:block;color:#1B2A4A;font-size:15px;margin-bottom:6px}
.csent p{font-size:13.5px;color:#48576F;line-height:1.6;margin:0}
@media (max-width:1024px){ .cwrap{grid-template-columns:1fr;gap:32px} }
@media (max-width:640px){ .fgridf{grid-template-columns:1fr} .cform{padding:24px} }

/* ===================================================================
   Subprocessor register.

   The privacy notice committed to publishing this and nothing was
   published. A client's procurement or data protection officer checks it
   early, and a paragraph saying a register exists is not a register.
   =================================================================== */
.sptable{margin-top:48px;border:1px solid #C2CDDD;border-radius:14px;overflow:hidden;background:#fff}
.sphead,.sprow{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1.4fr) minmax(0,1.2fr) minmax(0,.75fr);
  gap:24px;padding:16px 24px;align-items:start;
}
.sphead{
  background:#1B2A4A;color:#fff;
  font-size:10px;letter-spacing:.12em;font-weight:700;
}
.sprow{border-top:1px solid #DDE4EE;font-size:13.5px;line-height:1.6}
.sprow:nth-child(odd){background:#F4F6FA}
.spv b{display:block;font-size:15px;color:#1B2A4A;font-weight:700;margin-bottom:3px}
.spv span{display:block;font-size:11px;color:#7E8CA3;letter-spacing:.03em}
.spp,.spd{color:#48576F}
.spl{display:flex;flex-direction:column;gap:6px;align-items:flex-start}
.sploc{font-size:12.5px;color:#48576F;font-weight:600}
.spret{
  font-size:9.5px;letter-spacing:.1em;font-weight:700;
  color:#7E8CA3;background:#E7EBF3;border:1px solid #C2CDDD;
  border-radius:100px;padding:3px 9px;
}
.sprow.out{opacity:.62}
.sprow.out .spv b{color:#48576F}
.spfoot{
  font-size:13px;line-height:1.6;color:#48576F;
  margin-top:24px;max-width:74ch;
  padding-left:16px;border-left:2px solid #BC1867;
}
@media (max-width:900px){
  .sphead{display:none}
  .sprow{grid-template-columns:1fr;gap:8px;padding:20px 24px}
  .spv b{font-size:16px}
  .spp::before{content:"Purpose. ";font-weight:700;color:#1B2A4A}
  .spd::before{content:"Data. ";font-weight:700;color:#1B2A4A}
  .spl{flex-direction:row;align-items:center;gap:10px}
  .sploc::before{content:"Location. ";font-weight:700;color:#1B2A4A}
}

/* ===================================================================
   FREE DIAGNOSTIC
   ===================================================================
   A serious buyer decides here whether the operator is serious. Three
   steps, one screen each: register, answer, read. Nothing waits, nothing
   is emailed before the result, and the limits are stated on the page
   that delivers the good news.
   =================================================================== */

/* Step indicator. Shows where you are and how much is left. */
.dprog{display:flex;gap:8px;margin-bottom:48px;flex-wrap:wrap}
.dstep{
  display:flex;align-items:center;gap:10px;
  padding:10px 18px 10px 12px;border-radius:100px;
  border:1px solid #DDE4EE;background:#fff;
  font-size:12.5px;font-weight:600;color:#A9B6C9;
  transition:color .25s,border-color .25s,background .25s;
}
.dstep .dsn{
  width:22px;height:22px;border-radius:50%;flex:0 0 auto;
  display:flex;align-items:center;justify-content:center;
  background:#E7EBF3;color:#7E8CA3;font-size:11px;font-weight:700;
  transition:background .25s,color .25s;
}
.dstep.on{color:#1B2A4A;border-color:#BC1867;background:#fff}
.dstep.on .dsn{background:#BC1867;color:#fff}
.dstep.done{color:#48576F;border-color:#C2CDDD}
.dstep.done .dsn{background:#1D9E75;color:#fff}

.dpane{display:none}
.dpane.on{display:block;animation:dfade .35s ease both}
@keyframes dfade{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion: reduce){ .dpane.on{animation:none} }

.dgrid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:64px;align-items:start}
@media (max-width:1024px){ .dgrid{grid-template-columns:1fr;gap:32px} }

/* Progress through the ten. */
.dbar{
  position:relative;height:4px;background:#E7EBF3;border-radius:4px;
  margin:32px 0 48px;max-width:100%;
}
.dbarfill{position:absolute;left:0;top:0;bottom:0;width:0;background:#BC1867;border-radius:4px;transition:width .3s ease}
.dbar span{
  position:absolute;right:0;top:-24px;
  font-size:11px;letter-spacing:.1em;font-weight:700;color:#7E8CA3;
}

/* A question. Generous, one thought at a time, not a grid of radios. */
.dqs{display:flex;flex-direction:column;gap:8px;margin-bottom:32px}
.dq{
  border:1px solid #DDE4EE;border-radius:14px;padding:24px 32px;
  background:#fff;margin:0;
  transition:border-color .2s,background .2s,box-shadow .2s;
}
.dq:hover{border-color:#C2CDDD}
.dq.answered{background:#F4F6FA;border-color:#C2CDDD}
.dq.missing{border-color:#BC1867;background:#FBE6F1}
.dq legend{display:flex;gap:16px;align-items:flex-start;padding:0;width:100%}
.dqn{
  flex:0 0 auto;width:26px;height:26px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:#E7EBF3;color:#48576F;font-size:12px;font-weight:700;
  transition:background .2s,color .2s;
}
.dq.answered .dqn{background:#1B2A4A;color:#fff}
.dqt{font-size:16.5px;line-height:1.45;color:#1B2A4A;font-weight:500;max-width:62ch}

.dqscale{display:flex;align-items:center;gap:10px;margin:20px 0 0 42px;flex-wrap:wrap}
.dqend{font-size:11px;color:#A9B6C9;letter-spacing:.03em;white-space:nowrap}
.dqopt{position:relative;cursor:pointer}
.dqopt input{position:absolute;opacity:0;width:0;height:0}
.dqopt span{
  display:flex;align-items:center;justify-content:center;
  width:46px;height:46px;border-radius:10px;
  border:1px solid #C2CDDD;background:#fff;
  font-size:15px;font-weight:600;color:#48576F;
  transition:border-color .15s,background .15s,color .15s,transform .15s;
}
.dqopt:hover span{border-color:#A9B6C9;transform:translateY(-1px)}
.dqopt input:checked + span{background:#BC1867;border-color:#BC1867;color:#fff}
.dqopt input:focus-visible + span{outline:3px solid #BC1867;outline-offset:3px}

#dsubmit,#dstart{width:auto;min-width:240px;border:0;cursor:pointer;font:inherit;font-weight:600}
#dsubmit[disabled]{opacity:.4;cursor:not-allowed}

/* The reading. This is the page that has to feel like the real thing. */
.dres{max-width:960px}
.dresband{
  background:linear-gradient(160deg,#1B2A4A,#2C3D5C);
  border-radius:18px;padding:48px;color:#fff;position:relative;overflow:hidden;
}
.dresband::after{
  content:"";position:absolute;right:-90px;top:-90px;
  width:320px;height:320px;border-radius:50%;
  background:radial-gradient(circle,rgba(188,24,103,.34),transparent 68%);
}
.dresk{font-size:10px;letter-spacing:.16em;font-weight:700;color:#A9B6C9;margin-bottom:14px}
.dresband h3{font-size:34px;line-height:1.15;color:#fff;margin:0 0 20px;max-width:20ch;position:relative}
.dresscore{display:flex;align-items:baseline;gap:12px;margin-bottom:28px;position:relative}
.dresscore b{font-size:52px;font-weight:700;color:#fff;line-height:1}
.dresscore span{font-size:14px;color:#A9B6C9}
.dscale{position:relative;height:8px;background:rgba(255,255,255,.14);border-radius:6px;margin-bottom:10px}
.dscalefill{position:absolute;left:0;top:0;bottom:0;background:#BC1867;border-radius:6px;transition:width .8s cubic-bezier(.2,.8,.2,1)}
.dscalemark{position:absolute;top:-5px;bottom:-5px;width:2px;background:rgba(255,255,255,.55)}
.dscalelab{position:relative;height:16px;font-size:10.5px;color:#8FA2C4;letter-spacing:.04em}
/* The labels sit under their own marks rather than spaced evenly, otherwise
   "gate 3.75" appears nowhere near the 3.75 line. */
.dscalelab span{position:absolute;top:0;transform:translateX(-50%);white-space:nowrap}
.dscalelab span:nth-child(1){left:0;transform:none}
.dscalelab span:nth-child(2){left:68.75%}
.dscalelab span:nth-child(3){left:87.5%}
.dscalelab span:nth-child(4){right:0;left:auto;transform:none}

.dresrow{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:24px}
.drescard{border:1px solid #C2CDDD;border-radius:14px;padding:32px;background:#fff}
.drescard .dresk{color:#BC1867}
.drescard h4{font-size:20px;line-height:1.3;color:#1B2A4A;margin:0 0 12px}
.drescard p{font-size:15px;line-height:1.6;color:#48576F;margin:0}
.dreslimit{
  margin-top:24px;padding:24px 32px;background:#F4F6FA;
  border:1px solid #DDE4EE;border-left:3px solid #BC1867;border-radius:12px;
}
.dreslimit p{font-size:14.5px;line-height:1.6;color:#48576F;margin:0;max-width:78ch}
.dresnext{display:flex;gap:12px;margin-top:32px;flex-wrap:wrap}
.dressent{font-size:13px;color:#7E8CA3;margin-top:20px}

@media (max-width:820px){
  .dresrow{grid-template-columns:1fr}
  .dresband{padding:32px}
  .dresband h3{font-size:26px}
  .dresscore b{font-size:42px}
  .dq{padding:20px}
  .dqscale{margin-left:0}
  .dqopt span{width:42px;height:42px}
}
/* Footer column labels and the Ari panel title were marked up as headings.
   They are labels, and on a page with no h3 they skipped a level. */
footer .fcol{font-size:11px;letter-spacing:.12em;font-weight:700;color:#fff;margin-bottom:14px}
.aripanel .arititle{font-size:15px;font-weight:700;color:#1B2A4A;margin:0}
.aripanel .arititle{display:flex;align-items:center;gap:8px;font-size:15px;font-weight:700;color:#1B2A4A;margin:0}
.drescard h3{font-size:20px;line-height:1.3;color:#1B2A4A;margin:0 0 12px;height:auto;-webkit-line-clamp:none;display:block;overflow:visible}