:root{
  --coral:#E63946;--coral-dk:#c0202d;--navy:#1D3557;--navy-dk:#122440;
  --sage:#C8DEC8;--sage-bg:rgba(200,222,200,.32);--sage-faint:rgba(200,222,200,.16);
  --paper:#F5F6F8;--border:#E5E7EB;--grey:#6B7280;--ink:#2b3a52;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:'DM Sans',system-ui,Arial,sans-serif;background:var(--paper);color:var(--navy);line-height:1.6;font-size:16px;-webkit-font-smoothing:antialiased;overflow-x:hidden}
h1,h2,h3,h4,.serif{font-family:'DM Serif Display',Georgia,serif;font-weight:400;letter-spacing:-.5px;line-height:1.1}
h1 em,h2 em,h3 em{color:var(--coral);font-style:normal}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}
img{display:block}
.hide{display:none!important}

.forbar{position:sticky;top:0;z-index:400;background:var(--coral);color:#fff;padding:12px 28px;box-shadow:0 6px 18px rgba(29,53,87,.18)}
.forbar-in{max-width:1080px;margin:0 auto;display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.forbar-in span{flex:1 1 380px;font-size:15.5px;line-height:1.45}
.forbar .btn{white-space:nowrap}
.forbar .fb-more{font-style:normal}
.btn.forback{display:inline-flex;margin:14px 0 6px}
@media (max-width:640px){.forbar{padding:10px 16px}.forbar-in{gap:10px}.forbar{padding:8px 16px}.forbar-in span{display:none}.forbar .btn{width:100%;padding:11px 16px;font-size:15px}}
.nav{background:#fff;border-bottom:1px solid var(--border);height:80px;display:flex;align-items:center;padding:0 28px;gap:18px}
.nav img{height:52px;width:auto}
.nav .crumb{font-weight:800;font-size:15px;padding-left:18px;border-left:2px solid var(--border)}
.nav .sp{flex:1}
.nav .tool{font-weight:700;font-size:14px;padding:10px 18px;border-radius:100px;border:1.5px solid var(--border);background:#fff;color:var(--navy);text-decoration:none;white-space:nowrap}
.nav .tool:hover{border-color:var(--navy)}

.hero{background:var(--navy);color:#fff;padding:40px 28px 44px;position:relative;overflow:hidden}
.hero::before{content:'';position:absolute;width:420px;height:420px;border-radius:50%;background:rgba(230,57,70,.16);top:-150px;right:-110px}
.hero::after{content:'';position:absolute;width:300px;height:300px;border-radius:50%;background:rgba(255,255,255,.05);bottom:-170px;left:-90px}
.hero-in{max-width:1080px;margin:0 auto;position:relative;z-index:1;display:flex;gap:28px;align-items:flex-end;flex-wrap:wrap}
.hero-t{flex:1 1 460px}
.pill{display:inline-block;font-size:12px;font-weight:800;letter-spacing:1.4px;text-transform:uppercase;padding:9px 16px;border-radius:100px;margin:0 8px 14px 0}
.pill.soft{background:rgba(255,255,255,.12);color:var(--sage)}
.pill.hot{background:var(--coral);color:#fff}
.hero h1{font-size:clamp(40px,6vw,68px);letter-spacing:-1.5px}
.hero p{font-size:18px;color:rgba(255,255,255,.85);margin-top:10px;max-width:620px}
.tiles{display:flex;gap:10px}
.tile{width:128px;border-radius:16px;padding:14px 10px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.22);text-align:center}
.tile b{display:block;font-family:'DM Serif Display',serif;font-weight:400;font-size:30px;line-height:1.1}
.tile span{display:block;font-size:10.5px;font-weight:800;letter-spacing:1px;text-transform:uppercase;color:var(--sage);margin-top:4px;line-height:1.3}

.wrap{max-width:1080px;margin:0 auto;padding:30px 28px 130px}
.card{background:#fff;border:1.5px solid var(--border);border-radius:20px;padding:26px 28px;margin-bottom:22px}
.eyebrow{display:inline-block;font-size:11.5px;font-weight:800;letter-spacing:1.2px;text-transform:uppercase;color:var(--coral);background:var(--sage-bg);padding:6px 14px;border-radius:100px}
.hd{display:flex;gap:16px;align-items:center;margin-bottom:16px}
.n{width:54px;height:54px;border-radius:14px;background:var(--coral);color:#fff;font-family:'DM Serif Display',serif;font-size:28px;display:flex;align-items:center;justify-content:center;flex:none}
.n.navy{background:var(--navy)}
.k{font-size:11.5px;font-weight:800;letter-spacing:1.2px;text-transform:uppercase;color:var(--grey)}
.hd h2{font-size:30px}
.lede{font-size:16px;color:var(--ink);max-width:720px}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-weight:800;font-size:15px;padding:13px 24px;border-radius:100px;background:var(--coral);color:#fff;text-decoration:none;transition:.15s;min-height:48px}
.btn:hover{background:var(--coral-dk)}
.btn.navy{background:var(--navy)}
.btn.navy:hover{background:var(--navy-dk)}
.btn.line{background:#fff;color:var(--navy);border:1.5px solid var(--border)}
.btn.line:hover{border-color:var(--navy);background:#fff}
.btn.dash{background:#fff;color:var(--coral-dk);border:1.5px dashed var(--coral);width:100%}
.btn.dash:hover{background:var(--coral);color:#fff}

/* Jo */
.jo-top{display:flex;gap:16px;align-items:center;margin-bottom:16px}
.av{width:56px;height:56px;border-radius:50%;border:2px solid var(--navy);flex:none;background:#fff;overflow:hidden}.av img{width:100%;height:100%;object-fit:cover}
.jo-top h2{font-size:30px;margin-top:6px}
.two{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.say{background:var(--sage-faint);border:1.5px solid var(--sage);border-radius:16px;padding:16px 18px}
.say h3{font-size:20px;margin-bottom:6px}
.say p{font-size:15.5px;color:var(--ink)}
.hear{display:inline-flex;align-items:center;gap:9px;background:#fff;border:1.5px solid var(--border);border-radius:100px;padding:6px 16px 6px 7px;font-weight:800;font-size:14px;margin-top:12px;min-height:44px}
.hear i{width:28px;height:28px;border-radius:50%;background:var(--coral);color:#fff;display:flex;align-items:center;justify-content:center;font-style:normal;font-size:11px;padding-left:2px}
.hear:hover{border-color:var(--navy)}

.two.three{grid-template-columns:repeat(3,1fr)}
.popit{display:grid;grid-template-columns:300px 1fr;gap:22px;align-items:center;margin-top:16px}
.popit svg{width:100%;height:auto;display:block}
.popit svg text{font-family:'DM Serif Display',Georgia,serif}
.pl{list-style:none}
.pl li{display:grid;grid-template-columns:128px 1fr;gap:4px 14px;padding:11px 0;border-top:1px solid var(--border);font-size:15px;color:var(--ink)}
.pl li:first-child{border-top:0}
.pl b{font-family:'DM Serif Display',serif;font-weight:400;font-size:19px;color:var(--navy)}
.pl small{display:block;font-size:13.5px;color:var(--grey);margin-top:2px}
.pl small i{font-style:normal;font-weight:800;color:var(--coral-dk)}
.cats{display:flex;flex-wrap:wrap;gap:7px}
.cats button{min-height:40px;padding:6px 15px;border:1.5px solid var(--border);border-radius:100px;font-weight:700;font-size:14.5px;background:#fff}
.cats button:hover{border-color:var(--navy)}
.cats button.on{background:var(--navy);border-color:var(--navy);color:#fff}
.cats button.add{border-style:dashed;border-color:var(--coral);color:var(--coral-dk)}
.newcat{display:flex;gap:8px;margin-top:8px}
.newcat input{flex:1;min-width:0}
.newcat .btn{padding:10px 20px}
.cat{display:inline-block;font-size:10.5px;font-weight:800;letter-spacing:.8px;text-transform:uppercase;background:var(--sage);color:var(--navy-dk);border-radius:100px;padding:3px 10px;margin-bottom:5px}
.pair{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.seg.four{grid-template-columns:repeat(4,1fr)}
.seg.four button{font-size:14.5px;padding:0 4px}
input[type=date]{width:100%;font:500 16px 'DM Sans',sans-serif;color:var(--navy);padding:11px 12px;border:1.5px solid var(--border);border-radius:12px;background:#fff;min-height:48px}
.morebtn{font-size:14.5px;font-weight:800;color:var(--navy);text-decoration:underline;text-underline-offset:3px;padding:10px 0}
.morebox{display:grid;grid-template-columns:1.25fr 1fr;gap:14px 24px;background:var(--paper);border-radius:14px;padding:16px;margin-top:6px}
.sub2{font-size:13.5px;color:var(--grey);margin:-2px 0 8px}
.idp{display:inline-block;font-size:10.5px;font-weight:800;letter-spacing:.8px;background:var(--navy);color:#fff;border-radius:100px;padding:3px 10px;margin:0 5px 5px 0}
.late{display:inline-block;font-size:10.5px;font-weight:800;letter-spacing:.8px;text-transform:uppercase;background:var(--coral);color:#fff;border-radius:100px;padding:2px 9px;margin-top:4px}
.sec td small{display:block;font-size:12.5px;color:var(--grey);margin-top:4px;line-height:1.45}
.meta{grid-template-columns:repeat(2,1fr)!important}
/* form */
.meta{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.f label,.lab{display:block;font-size:12px;font-weight:800;letter-spacing:.8px;text-transform:uppercase;color:var(--navy);margin-bottom:5px}
.lab small{font-size:12px;font-weight:600;letter-spacing:0;text-transform:none;color:var(--grey);margin-left:6px}
input[type=text],textarea{width:100%;font:500 16px 'DM Sans',sans-serif;color:var(--navy);padding:12px 14px;border:1.5px solid var(--border);border-radius:12px;background:#fff}
textarea{min-height:92px;resize:vertical;line-height:1.5}
input:focus,textarea:focus{outline:none;border-color:var(--navy);box-shadow:0 0 0 3px rgba(29,53,87,.1)}
::placeholder{color:#9aa3af;opacity:1;font-weight:400}

.risk{border:1.5px solid var(--border);border-radius:18px;margin-bottom:14px;background:#fff;overflow:hidden}
.risk.hi{border-color:var(--coral)}
.rh{display:flex;align-items:center;gap:12px;padding:14px 18px;width:100%;text-align:left;background:var(--paper)}
.rh .num{min-width:40px;padding:0 6px;height:34px;border-radius:10px;background:var(--navy);color:#fff;font-weight:800;font-size:15px;display:flex;align-items:center;justify-content:center;flex:none}
.rh .ttl{flex:1;font-weight:800;font-size:16px;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rh .ttl small{display:block;font-weight:500;font-size:13.5px;color:var(--grey);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rh .chev{font-size:13px;font-weight:800;color:var(--grey);flex:none}
.score{font-size:12px;font-weight:800;letter-spacing:.6px;text-transform:uppercase;border-radius:100px;padding:6px 12px;white-space:nowrap;flex:none}
.score.none{background:#fff;border:1.5px dashed #c9ced6;color:var(--grey)}
.score.low{background:var(--sage);color:var(--navy-dk)}
.score.med{background:var(--navy);color:#fff}
.score.high{background:var(--coral);color:#fff}
.rb{padding:18px;display:grid;grid-template-columns:1.25fr 1fr;gap:18px 24px}
.risk.shut .rb{display:none}
.rb .full{grid-column:1 / -1}
.fld{margin-bottom:14px}
.fld:last-child{margin-bottom:0}
.lrow{display:flex;align-items:center;gap:8px;margin-bottom:5px}
.lrow .lab{margin:0;flex:1}
.q{font-size:13px;font-weight:800;color:var(--coral-dk);text-decoration:underline;text-underline-offset:3px;padding:6px 0;white-space:nowrap}
.help{display:none;background:var(--sage-faint);border:1.5px solid var(--sage);border-radius:12px;padding:12px 14px;font-size:14.5px;color:var(--ink);margin-bottom:8px}
.help.on{display:block}
.help b{display:block;font-size:11.5px;font-weight:800;letter-spacing:.8px;text-transform:uppercase;color:var(--coral-dk);margin-top:8px}
.help b:first-child{margin-top:0}
.seg{display:grid;grid-template-columns:repeat(5,1fr);gap:6px}
.seg button{min-height:46px;border:1.5px solid var(--border);border-radius:12px;font-weight:800;font-size:16px;background:#fff;transition:.12s}
.seg button:hover{border-color:var(--navy)}
.seg button.on{background:var(--navy);border-color:var(--navy);color:#fff}
.seg.three{grid-template-columns:repeat(3,1fr)}
.seg.three button{font-size:14.5px}
.pick{font-size:13.5px;color:var(--grey);margin-top:5px;min-height:20px}
.sum{display:flex;align-items:center;gap:12px;flex-wrap:wrap;background:var(--paper);border-radius:14px;padding:12px 14px}
.sum p{font-size:14.5px;color:var(--ink);flex:1 1 180px}
.rm{font-size:13.5px;font-weight:800;color:var(--grey);text-decoration:underline;text-underline-offset:3px;padding:10px 0}
.rm:hover{color:var(--coral-dk)}
.rowacts{display:flex;gap:10px;flex-wrap:wrap;margin-top:16px}
.rowacts .btn.dash{flex:1 1 260px;width:auto}
.undo{display:none;align-items:center;gap:12px;background:var(--navy);color:#fff;border-radius:14px;padding:10px 16px;font-size:14.5px;margin-bottom:14px}
.undo.on{display:flex}
.undo button{font-weight:800;text-decoration:underline;color:var(--sage);padding:6px}
.key{display:flex;flex-wrap:wrap;gap:8px 16px;font-size:13.5px;color:var(--grey);margin:2px 0 16px;align-items:center}
.key span{display:inline-flex;align-items:center;gap:6px}

/* the finished document */
.pf-top{display:flex;gap:16px;align-items:center;flex-wrap:wrap;margin-bottom:16px}
.pf-top h2{font-size:34px}
.pf-top .sp{flex:1}
.doc{background:#fff;border:1.5px solid var(--border);border-radius:20px;overflow:hidden;box-shadow:0 18px 50px rgba(29,53,87,.10)}
.cover{background:var(--navy);color:#fff;padding:34px 36px 30px;position:relative;overflow:hidden}
.cover::before{content:'';position:absolute;width:340px;height:340px;border-radius:50%;background:rgba(230,57,70,.18);top:-140px;right:-90px}
.cover>*{position:relative}
.cover .k{color:var(--sage)}
.cover h3{font-size:42px;letter-spacing:-1px;margin-top:6px}
.cover .by{margin-top:10px;font-size:15px;color:rgba(255,255,255,.85)}
.sec{padding:26px 36px;border-top:1.5px solid var(--border)}
.stats{display:flex;gap:12px;flex-wrap:wrap}
.stat{flex:1 1 150px;border-radius:16px;border:1.5px solid var(--border);padding:12px 16px}
.stat b{display:block;font-family:'DM Serif Display',serif;font-weight:400;font-size:30px;line-height:1.1}
.stat span{display:block;font-size:10.5px;font-weight:800;letter-spacing:.8px;text-transform:uppercase;color:var(--grey);margin-top:3px}
.stat.hot{border-color:var(--coral);background:rgba(230,57,70,.05)}
.sec table{width:100%;border-collapse:collapse;font-size:14px}
.sec th{text-align:left;font-size:10.5px;font-weight:800;letter-spacing:1px;text-transform:uppercase;color:var(--grey);padding:8px 9px;border-bottom:1.5px solid var(--navy)}
.sec td{padding:11px 9px;border-bottom:1px solid var(--border);vertical-align:top;color:var(--ink)}
.sec td.c{text-align:center;white-space:nowrap}
.sec td b{color:var(--navy)}
.sec .score{display:inline-block;padding:4px 10px}
.empty{font-size:15.5px;color:var(--grey);padding:6px 0}
.note{font-size:13.5px;color:var(--grey);margin-top:12px}

/* export */
.exp{background:var(--navy);color:#fff;border-color:var(--navy)}
.exp h2{font-size:30px}
.exp p{color:rgba(255,255,255,.85);font-size:16px;max-width:640px;margin-top:4px}
.exps{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:18px}
.ex{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.22);border-radius:16px;padding:16px;display:flex;flex-direction:column;gap:10px}
.ex b{font-size:16px}
.ex span{font-size:14px;color:rgba(255,255,255,.8);flex:1}
.ex .btn{width:100%}
.ex .btn.wh{background:#fff;color:var(--navy)}
.ex .btn.wh:hover{background:var(--sage)}
.done{display:none;margin-top:14px;background:var(--sage);color:var(--navy-dk);border-radius:14px;padding:11px 16px;font-weight:700;font-size:15px}
.done.on{display:block}

/* Billie: buttons only, nothing to type */
#bilFab{position:fixed;right:24px;bottom:24px;width:68px;height:68px;border-radius:50%;background:#fff;box-shadow:0 12px 28px rgba(29,53,87,.28),0 0 0 4px var(--coral);z-index:260;overflow:hidden;transition:.16s}
#bilFab:hover{transform:scale(1.07) rotate(-4deg)}
#bilFab svg{width:100%;height:100%;display:block}
#bilBub{position:fixed;right:102px;bottom:39px;z-index:250;background:#fff;color:var(--navy);font:800 14px/1.3 'DM Sans',Arial,sans-serif;padding:10px 16px;border-radius:18px 18px 4px 18px;box-shadow:0 10px 26px rgba(29,53,87,.18);white-space:nowrap}
#bil{position:fixed;right:24px;bottom:108px;width:380px;max-width:calc(100vw - 20px);max-height:calc(100vh - 150px);background:#fff;border-radius:20px;box-shadow:0 24px 60px rgba(18,36,64,.32);z-index:270;display:none;flex-direction:column;overflow:hidden;border:1.5px solid var(--border)}
#bil.on{display:flex}
.bil-h{background:var(--navy);color:#fff;padding:14px 16px;display:flex;align-items:center;gap:12px}
.bil-h .face{width:44px;height:44px;border-radius:50%;overflow:hidden;flex:none;background:#fff}
.bil-h b{display:block;font-size:17px;line-height:1.2}
.bil-h small{display:block;font-size:13px;color:var(--sage)}
.bil-h .x{margin-left:auto;width:40px;height:40px;border-radius:50%;background:rgba(255,255,255,.14);font-size:18px;font-weight:800}
.bil-b{padding:16px;overflow-y:auto;-webkit-overflow-scrolling:touch}
.bil-a{background:var(--sage-faint);border:1.5px solid var(--sage);border-radius:16px 16px 16px 4px;padding:13px 15px;font-size:15px;color:var(--ink);margin-bottom:14px}
.bil-a b{display:block;color:var(--navy);margin-bottom:4px}
.bil-a strong{color:var(--navy)}
.bil-k{font-size:11.5px;font-weight:800;letter-spacing:1px;text-transform:uppercase;color:var(--grey);margin-bottom:8px}
.bil-q{display:block;width:100%;text-align:left;font-weight:700;font-size:15px;padding:12px 14px;border:1.5px solid var(--border);border-radius:14px;margin-bottom:8px;background:#fff;min-height:46px}
.bil-q:hover{border-color:var(--navy)}
.bil-q::after{content:' →';color:var(--coral)}


@media (max-width:980px){.two.three{grid-template-columns:1fr}}
@media (max-width:820px){
  .rb{grid-template-columns:1fr;gap:0}
  .rb>div{margin-bottom:14px}.rb>div:last-child{margin-bottom:0}
  .meta{grid-template-columns:1fr}
  .exps{grid-template-columns:1fr}
}
@media (max-width:760px){
  .nav{height:64px;padding:0 14px;gap:10px}.nav img{height:40px}.nav .crumb{display:none}
  .nav .tool{font-size:13px;padding:8px 13px}
  .hero{padding:26px 16px 28px}.hero p{font-size:16.5px}
  .tiles{width:100%}.tile{flex:1;width:auto;padding:11px 6px}.tile b{font-size:26px}
  .wrap{padding:18px 14px 120px}
  .card{padding:20px 16px}.hd{gap:12px}.hd h2,.jo-top h2,.exp h2{font-size:25px}
  .n{width:46px;height:46px;font-size:24px}
  .two,.two.three{grid-template-columns:1fr}
  .popit{grid-template-columns:1fr}.popit svg{max-width:260px;margin:0 auto}
  .pl li{grid-template-columns:1fr}
  .rh{padding:12px 14px;gap:10px}.rh .chev{display:none}
  .rb{padding:16px 14px}
  .seg.three button{font-size:13.5px}
  .seg.four{grid-template-columns:repeat(2,1fr)}
  .morebox{grid-template-columns:1fr;padding:14px}
  .meta{grid-template-columns:1fr!important}
  .pf-top h2{font-size:28px}.pf-top .sp{display:none}.pf-top .btn{width:100%}
  .cover{padding:24px 18px}.cover h3{font-size:32px}.sec{padding:20px 16px}
  .stat{flex:1 1 30%;padding:10px 12px}.stat b{font-size:26px}
  .sec table,.sec tbody,.sec tr,.sec td{display:block;width:100%}.sec thead{display:none}
  .sec tr{border:1.5px solid var(--border);border-radius:14px;padding:12px 14px;margin-bottom:10px}
  .sec td{border:0;padding:3px 0}.sec td.c{text-align:left;display:inline-block;width:auto;margin-right:14px}
  .sec td[data-l]::before{content:attr(data-l);display:block;font-size:11.5px;font-weight:800;letter-spacing:.8px;text-transform:uppercase;color:var(--grey);margin-top:6px}
  .sec td.c[data-l]::before{display:inline;margin-right:5px}
  .sec td.no{display:none}
  .sec td[data-l="Score"]::before{margin-bottom:4px}
  .rowacts .btn{width:100%;flex:1 1 100%}
  #bilBub{display:none}
  #bilFab{right:14px;bottom:14px;width:62px;height:62px}
  #bil{right:0;left:0;bottom:0;width:auto;max-width:none;max-height:78vh;border-radius:22px 22px 0 0;border-width:1.5px 0 0}
}
@media print{
  *{-webkit-print-color-adjust:exact!important;print-color-adjust:exact!important}
  
  body{background:#fff}
  .forbar,.forback,.nav,.hero,.card,.pf-top,.note,.walk,.done,.clear,.saved,#bilFab,#bilBub,#bil{display:none!important}
  .sec thead th{padding-top:11mm}
  .wrap{padding-bottom:0!important}
  .wrap{padding:12mm!important;max-width:none}
  .doc{border:0;box-shadow:none;border-radius:0;overflow:visible}
  .cover{border-radius:14px}
  .sec{padding:18px 2px}
  .sec tr{break-inside:avoid}
}

/* ===== added for the shared design (templates-v2) ===== */
.risk .rb.one{grid-template-columns:1fr}
.sfields{display:grid;grid-template-columns:1fr 1fr;gap:4px 18px}
.sfields .fld.full{grid-column:1 / -1}
.sfields .fld{margin-bottom:14px}
.people{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:8px}
.people span{display:inline-flex;align-items:center;gap:6px;background:var(--navy);color:#fff;border-radius:100px;padding:6px 6px 6px 14px;font-weight:700;font-size:14.5px}
.people span button{width:28px;height:28px;border-radius:50%;background:rgba(255,255,255,.18);color:#fff;font-weight:800;font-size:14px}
.people span button:hover{background:var(--coral)}
.people .none{font-size:14.5px;color:var(--grey);padding:6px 0}
.mx{border:1.5px solid var(--border);border-radius:14px;overflow:hidden}
.mxr{display:grid;grid-template-columns:minmax(120px,1fr) 1.6fr;gap:10px;align-items:center;padding:9px 12px;border-top:1px solid var(--border)}
.mxr:first-child{border-top:0}
.mxr b{font-size:15px;font-weight:700;overflow:hidden;text-overflow:ellipsis}
.mxr b small{display:block;font-weight:500;font-size:13px;color:var(--grey)}
.mxr .seg{grid-template-columns:repeat(4,1fr)}
.mxr .seg button{min-height:42px;font-size:15px}
.mxnone{font-size:14.5px;color:var(--grey);background:var(--paper);border-radius:14px;padding:12px 14px}
.warn{display:inline-block;font-size:12px;font-weight:800;background:rgba(230,57,70,.1);color:var(--coral-dk);border-radius:100px;padding:4px 11px;margin-top:6px}
.dsec h4{font-family:'DM Serif Display',Georgia,serif;font-weight:400;font-size:24px;margin-bottom:10px}
.dsec .dl{margin-bottom:14px}
.dsec .dl:last-child{margin-bottom:0}
.dsec .dl b{display:block;font-size:11px;font-weight:800;letter-spacing:1px;text-transform:uppercase;color:var(--grey);margin-bottom:3px}
.dsec .dl p{font-size:15px;color:var(--ink);white-space:pre-line}
.dsec .dl p.gap{color:#9aa3af;font-style:italic}
.sec td.mxc{text-align:center;font-weight:800;color:var(--navy)}
.sec td.mxc i{display:inline-block;min-width:30px;border-radius:8px;padding:3px 6px;font-style:normal}
.sec td.mxc i.A{background:var(--coral);color:#fff}
.sec td.mxc i.R{background:var(--navy);color:#fff}
.sec td.mxc i.C{background:var(--sage);color:var(--navy-dk)}
.sec td.mxc i.I{background:#fff;border:1.5px solid var(--border)}
.clear{margin-top:16px;font-size:14px;font-weight:800;color:var(--sage);text-decoration:underline;text-underline-offset:3px;padding:8px 0}
.saved{font-size:13px;color:var(--grey);margin-left:auto}
@media (max-width:760px){
  .sfields{grid-template-columns:1fr}
  .mxr{grid-template-columns:1fr}
}
@media print{
  body.land{}
}

.walk{display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;margin:-4px 0 16px}
.walk .hear{margin-top:0}
.walkbox{display:none;flex-basis:100%;background:var(--sage-faint);border:1.5px solid var(--sage);border-radius:14px;padding:13px 16px;font-size:15.5px;color:var(--ink)}
.walkbox.on{display:block}
.walkbox b{display:block;font-size:11.5px;font-weight:800;letter-spacing:.8px;text-transform:uppercase;color:var(--coral-dk);margin-bottom:4px}
.pf-top+.walk{margin-top:-6px}
.exp .walk{margin:14px 0 0}
.exp .walk .q{color:var(--sage)}
.exp .walkbox{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.22);color:#fff}
.exp .walkbox b{color:var(--sage)}

.exp .ftype{margin:6px 0 10px;max-width:520px}
.exp .ftype button{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.25);color:#fff}
.exp .ftype button:hover{border-color:#fff}
.exp .ftype button.on{background:#fff;border-color:#fff;color:var(--navy)}
.exp .ftsay{font-size:15px;margin:0 0 14px}
#expGo{min-width:240px}
@media (max-width:760px){#expGo{width:100%}}
.exp .ftype button{transition:none}
.exp .ftype button.on::before{content:'✓ ';color:var(--coral)}

/* Jo recordings always show. Until the file is saved they say "Recording to come" and can't be pressed */
.hear small{display:none}
.hear.todo{border-style:dashed;cursor:default;color:var(--grey)}
.hear.todo i{background:#c9ced6}
.hear.todo span{display:none}
.hear.todo small{display:inline;font-size:13.5px;font-weight:700}
.hear.todo:hover{border-color:var(--border)}
.walk{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;margin:0 0 18px;background:var(--sage-faint);border:1.5px solid var(--sage);border-radius:16px;padding:12px 16px}
.walk .wav{width:46px;height:46px;border-radius:50%;overflow:hidden;border:2px solid var(--navy);flex:none;background:#fff}
.walk .wav img{width:100%;height:100%;object-fit:cover}
.walk .wtx{flex:1 1 200px;min-width:0}
.walk .wtx b{display:block;font-size:15.5px}
.walk .wtx .wsub{display:block;font-size:13.5px;color:var(--grey)}
.walk .hear{margin-top:0;background:#fff}
.walkbox{background:#fff;border:1.5px solid var(--border)}
.walkbox b{display:none}
.exp .walk{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.22)}
.exp .walk .wtx .wsub{color:rgba(255,255,255,.7)}
.exp .walkbox{background:rgba(255,255,255,.06);color:#fff}
.exp .walk .hear.todo{background:transparent;color:rgba(255,255,255,.7);border-color:rgba(255,255,255,.35)}
@media (max-width:760px){.walk .hear,.walk .q{flex:1 1 auto}}

/* Play all */
.jo-top .sp{flex:1}
.playall{margin-top:0;align-self:center}
.playall.on{border-color:var(--navy);background:var(--navy);color:#fff}
.now{outline:3px solid var(--coral);outline-offset:3px;background:#FBF3F4!important;transition:background .2s}
@media (max-width:760px){.jo-top{flex-wrap:wrap}.jo-top .sp{display:none}.playall{width:100%;justify-content:center}}

/* A finished example to look at (added 9 Oct 2026) */
.hero-ex{margin-top:20px}
.btn.wh{background:#fff;color:var(--navy)}
.btn.wh:hover{background:var(--sage);color:var(--navy)}
#exView{position:fixed;inset:0;background:rgba(18,36,64,.74);z-index:2000;overflow-y:auto;padding:30px 16px;display:none}
#exView.on{display:block}
body.exv-lock{overflow:hidden}
.exv-in{max-width:980px;margin:0 auto;background:var(--paper);border-radius:22px;padding:26px 26px 22px;box-shadow:0 30px 80px rgba(0,0,0,.35)}
.exv-top{display:flex;gap:16px;align-items:flex-start;flex-wrap:wrap;margin-bottom:18px}
.exv-top>div{flex:1 1 320px}
.exv-top h2{font-size:34px;margin:10px 0 6px}
.exv-top p{color:var(--grey);font-size:15.5px}
.exv-foot{display:flex;justify-content:center;margin-top:20px}
@media (max-width:760px){#exView{padding:10px 8px}.exv-in{padding:18px 12px 16px;border-radius:18px}.exv-top h2{font-size:28px}.exv-top .btn,.hero-ex .btn{width:100%}}
@media print{#exView{display:none!important}body.exv-lock{overflow:visible}}

/* Business case: tidy details on the cover, and bringing in other templates (added 9 Oct 2026) */
.hero-ex{display:flex;gap:10px;flex-wrap:wrap}
.bygrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px 18px;margin-top:16px;padding-top:16px;border-top:1px solid rgba(255,255,255,.18)}
.bygrid div{font-size:15px;color:#fff;line-height:1.35}
.bygrid small{display:block;font-size:11px;font-weight:800;letter-spacing:1px;text-transform:uppercase;color:var(--sage);margin-bottom:3px}
.pulls{display:grid;gap:10px;margin-top:16px}
.pullrow{display:flex;align-items:center;gap:14px;border:1.5px solid var(--border);border-radius:16px;padding:14px 16px;background:#fff}
.pullrow.ready{border-color:var(--sage);background:var(--sage-faint)}
.pullrow .pi{flex:0 0 30px;height:30px;border-radius:50%;border:2px dashed #c9ced6;display:flex;align-items:center;justify-content:center;font-weight:800;color:var(--navy)}
.pullrow.ready .pi{border:0;background:var(--sage)}
.pullrow .pt{flex:1;min-width:0}
.pullrow .pt b{display:block;font-size:16px}
.pullrow .pt span{display:block;font-size:14.5px;color:var(--ink)}
.pullrow .pt small{display:block;font-size:13px;color:var(--grey);margin-top:2px}
.pullrow .btn{flex:0 0 auto}
.pullup{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:14px;font-size:14.5px;color:var(--grey)}
.pullup span{flex:1 1 260px}
.pullup label{cursor:pointer}
.pullmsg{display:none;margin-top:14px;border-radius:14px;background:var(--sage-bg);padding:12px 16px;font-size:15px;color:var(--navy)}
.pullmsg.on{display:block}
.pullnote.done span{font-weight:400}.pullnote.done span b{font-weight:800}
.pullmsg .pullgo,.pullnote .pullgo{display:inline-block;margin-top:6px;font-weight:800;color:var(--coral-dk);text-decoration:underline}
.pullnote{display:flex;align-items:center;gap:12px;flex-wrap:wrap;background:var(--sage-faint);border:1.5px solid var(--sage);border-radius:14px;padding:10px 14px;margin:0 0 16px;font-size:14.5px}
.pullnote span{flex:1 1 240px}
.pullnote .pn-acts{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.pullnote .pullopen{font-weight:800;color:var(--coral-dk);text-decoration:underline;font-size:14.5px}
.pullnote.done{background:var(--sage-bg)}
@media (max-width:760px){.pullrow{flex-wrap:wrap}.pullrow .btn,.pullup label,.pullnote .btn,.hero-ex .btn{width:100%}.pullnote .pn-acts{width:100%}}
@media print{.pullnote{display:none}}

.exv-acts{display:flex;gap:10px;flex-wrap:wrap}
.exv-foot{gap:10px;flex-wrap:wrap}
@media (max-width:760px){.exv-acts,.exv-acts .btn,.exv-foot .btn{width:100%}}
@media print{
  body.exv-print .nav,body.exv-print .hero,body.exv-print .wrap,body.exv-print .exv-top,body.exv-print .exv-foot{display:none!important}
  body.exv-print #exView{display:block!important;position:static;background:none;padding:0;overflow:visible}
  body.exv-print .exv-in{max-width:none;background:#fff;box-shadow:none;border-radius:0;padding:12mm}
}

/* Keep big serif headings from letters touching (9 Oct 2026) */
.hero h1{letter-spacing:-.6px}
.cover h3{letter-spacing:-.2px}
.exv-top h2,.pf-top h2{letter-spacing:-.3px}

/* Play all highlight on dark cards: keep the dark background so the white words stay readable (9 Oct 2026) */
.now{background:#fff!important}
.exp.now{background:#24406a!important}
.exp .now{background:rgba(255,255,255,.14)!important}

/* Stakeholder wheel and power interest grid, drawn from the learner's list (9 Oct 2026). Same groups, boxes and colours as the simulations. */
.swg{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:18px;align-items:start}
.swg-w,.swg-g{background:#fff;border:1.5px solid var(--border);border-radius:18px;padding:16px}
.swg-k{font-size:11.5px;font-weight:800;letter-spacing:1px;text-transform:uppercase;color:var(--grey);margin-bottom:10px}
.sw{width:100%;max-width:420px;height:auto;display:block;margin:0 auto;font-family:'DM Sans',Arial,sans-serif}
.sg{display:grid;grid-template-columns:22px 1fr;grid-template-rows:1fr auto;gap:6px}
.sg-y{display:grid;grid-template-rows:1fr 1fr;gap:8px}
.sg-y span{writing-mode:vertical-rl;transform:rotate(180deg);align-self:center;justify-self:center;font-size:10.5px;font-weight:800;letter-spacing:1px;text-transform:uppercase;color:var(--grey);white-space:nowrap}
.sg-b{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.sg-x{grid-column:2;display:grid;grid-template-columns:1fr 1fr;text-align:center;font-size:10.5px;font-weight:800;letter-spacing:1px;text-transform:uppercase;color:var(--grey)}
.sgb{border-radius:14px;padding:12px 12px 14px;min-height:150px;border:1.5px solid var(--border);background:#fff}
.sgb b{display:block;font-family:'DM Serif Display',Georgia,serif;font-weight:400;font-size:20px;color:var(--navy);line-height:1.15}
.sgb small{display:block;font-size:10.5px;font-weight:800;letter-spacing:.6px;text-transform:uppercase;color:var(--grey);margin:3px 0 10px}
.sgb.ks{background:var(--paper)}
.sgb.mc{background:#FDECEE;border-color:#F3B9BE}.sgb.mc small{color:var(--coral-dk)}
.sgb.ki{background:var(--sage-faint);border-color:var(--sage)}.sgb.ki small{color:#3d6b3d}
.sgp{display:flex;flex-wrap:wrap;gap:6px}
.sgp span{background:#fff;border:1.5px solid rgba(29,53,87,.2);border-radius:100px;padding:4px 10px;font-size:13px;font-weight:700;color:var(--navy)}
.sgp i{font-size:13px;color:var(--grey)}
.swg-n{margin-top:14px;background:var(--sage-faint);border:1.5px solid var(--sage);border-radius:14px;padding:12px 16px;font-size:14.5px;color:var(--ink);line-height:1.6}
.doc .swg{padding:4px 0}
@media (max-width:860px){.swg{grid-template-columns:1fr}}
@media print{.swg{grid-template-columns:1fr 1fr;break-inside:avoid}.sgb{min-height:110px}}