/* ==========================================================================
   BA Hub simulation master: the look of a page built from a list.
   The base is lifted unchanged from the approved Project Maple explanation
   page (after the stakeholder wheel, version 8). The scene is the look of
   the approved visit screen. Billie in the corner is the one from the
   Conversations screen. The same file for every simulation. Brand colours only.
   © 2026 Hublinko Limited
   ========================================================================== */

: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,sans-serif;background:var(--paper);color:var(--navy);line-height:1.6;-webkit-font-smoothing:antialiased}
h1,h2,h3,.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}

.mock{background:var(--navy-dk);color:#fff;padding:10px 20px;display:flex;align-items:center;gap:14px}
.mock .lab{font-size:11px;font-weight:800;letter-spacing:1.4px;text-transform:uppercase;color:var(--sage)}

.nav{background:#fff;border-bottom:1px solid var(--border);height:80px;display:flex;align-items:center;padding:0 28px;gap:18px}
/* 20 Oct 2026: the top bar stays at the top while you scroll, so the logo, Unlock, Sign in and the menu are always there */
.nav{position:sticky;top:0;z-index:400}
.nav img{height:52px;width:auto}
.nav .crumb{font-weight:800;font-size:15px;color:var(--navy);padding-left:18px;border-left:2px solid var(--border)}
.nav .sp{flex:1}
/* 20 Oct 2026: never squash the label or the bar's links onto several lines */
.nav .crumb,.nav .tool{white-space:nowrap;flex-shrink:0}
.nav .tool{font-weight:700;font-size:14px;padding:9px 16px;border-radius:100px;border:1.5px solid var(--border);background:#fff;color:var(--navy);text-decoration:none}
.nav .tool:hover{border-color:var(--navy)}

/* hero, same family as the Conversations screen */
.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:1180px;margin:0 auto;position:relative;z-index:1;display:flex;gap:30px;align-items:flex-end;flex-wrap:wrap}
.hero-l{flex:1 1 520px}
.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(44px,6vw,72px);letter-spacing:-1.5px}
.hero p{font-size:18px;color:rgba(255,255,255,.82);margin-top:8px;max-width:640px}
.tiles{display:flex;gap:10px}
.tile{width:128px;padding:14px 8px;border-radius:16px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.2);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:.8px;text-transform:uppercase;color:var(--sage);line-height:1.3;margin-top:4px}

.wrap{max-width:1180px;margin:0 auto;padding:30px 28px 90px;display:grid;grid-template-columns:1fr 1fr;gap:22px}
.card{background:#fff;border:1.5px solid var(--border);border-radius:20px;padding:26px 28px}
.card.wide{grid-column:1 / -1}
.hd{display:flex;gap:16px;align-items:center;margin-bottom:14px}
.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.sage{background:var(--sage);color:var(--navy)}
.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}
.jo-says{display:flex;gap:12px;align-items:flex-start;background:var(--sage-faint);border:1.5px solid var(--sage);border-radius:16px;padding:14px 16px;margin-bottom:16px}
.av{width:40px;height:40px;border-radius:50%;background:#fff;color:var(--navy);border:2px solid var(--navy);font-weight:800;font-size:13px;display:flex;align-items:center;justify-content:center;flex:none}
.av{overflow:hidden;width:56px;height:56px;border-width:2px}.av img{width:100%;height:100%;object-fit:cover;border-radius:50%;display:block}
.jo-says p{font-size:15.5px;color:var(--ink)}
.jo-says p + p{margin-top:8px}
.listen{display:inline-flex;align-items:center;gap:8px;font-weight:800;font-size:13px;padding:7px 14px 7px 8px;border-radius:100px;background:#fff;color:var(--navy);border:1.5px solid var(--border);margin-top:10px;transition:.15s}
.listen:hover{border-color:var(--navy)}
.listen i{font-style:normal;width:26px;height:26px;border-radius:50%;background:var(--coral);color:#fff;display:flex;align-items:center;justify-content:center;font-size:11px}
.listen.playing{background:var(--navy);color:#fff;border-color:var(--navy)}
.listen.miss{opacity:.6}
.seek{display:flex;align-items:center;gap:12px;margin-top:10px;max-width:520px}
.seek input{flex:1;min-width:0;height:22px;margin:0;background:transparent;cursor:pointer;-webkit-appearance:none;appearance:none;--p:0%}
.seek input::-webkit-slider-runnable-track{height:6px;border-radius:100px;background:linear-gradient(to right,var(--coral) var(--p),var(--border) var(--p))}
.seek input::-moz-range-track{height:6px;border-radius:100px;background:var(--border)}
.seek input::-moz-range-progress{height:6px;border-radius:100px;background:var(--coral)}
.seek input::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:18px;height:18px;border-radius:50%;background:var(--navy);border:3px solid #fff;box-shadow:0 0 0 1.5px var(--navy);margin-top:-6px}
.seek input::-moz-range-thumb{width:14px;height:14px;border-radius:50%;background:var(--navy);border:3px solid #fff;box-shadow:0 0 0 1.5px var(--navy)}
.seek input:focus-visible{outline:2px solid var(--coral);outline-offset:4px;border-radius:100px}
.seek span{font-size:13px;font-weight:800;color:var(--navy);white-space:nowrap;font-variant-numeric:tabular-nums}

.ps p{font-size:16px;margin-bottom:7px;color:var(--ink)}
.ps p b{color:var(--navy)}
.tag{display:inline-block;font-size:10.5px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;border-radius:100px;padding:3px 10px;background:var(--sage);color:var(--navy);margin-bottom:10px}
.tag.eg{background:#EEF0F3;color:var(--grey)}
.small{font-size:13px;color:var(--grey);margin-top:6px}
.limits{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.limits span{font-size:13.5px;font-weight:700;background:var(--paper);border:1.5px solid var(--border);border-radius:100px;padding:6px 14px}
.limits span b{color:var(--coral-dk)}

.done{list-style:none}
.done li{display:flex;gap:12px;align-items:flex-start;padding:11px 0;border-top:1.5px solid var(--border)}
.done li:first-child{border-top:0;padding-top:2px}
.done i{font-style:normal;width:26px;height:26px;border-radius:50%;background:var(--sage);color:var(--navy);display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:800;flex:none;margin-top:2px}
.done b{display:block;font-size:16px;line-height:1.35}
.done small{display:block;font-size:13.5px;color:var(--grey);line-height:1.4;margin-top:1px}
.musts{padding-left:20px}
.musts li{font-size:16px;margin-bottom:8px;color:var(--ink)}

.next{background:var(--navy);color:#fff;border-color:var(--navy);position:relative;overflow:hidden}
.next::after{content:'';position:absolute;width:260px;height:260px;border-radius:50%;background:rgba(230,57,70,.14);bottom:-120px;right:-70px}
.next > *{position:relative;z-index:1}
.next .k{color:var(--sage)}
.next h2{color:#fff}
.why{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:6px 0 20px}
.why div{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18);border-radius:16px;padding:16px 18px}
.why b{display:block;font-size:11.5px;font-weight:800;letter-spacing:1.2px;text-transform:uppercase;color:var(--sage);margin-bottom:6px}
.why p{font-size:15.5px;color:rgba(255,255,255,.9);line-height:1.5}
.next .jo-says{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.2)}
.next .jo-says p{color:rgba(255,255,255,.9)}
.go{display:flex;gap:14px;align-items:center;flex-wrap:wrap}
.btn{display:inline-flex;align-items:center;gap:8px;font-weight:800;font-size:17px;padding:16px 30px;border-radius:100px;transition:.16s;text-decoration:none}
.btn-coral{background:var(--coral);color:#fff;box-shadow:0 8px 22px rgba(230,57,70,.32)}
.btn-coral:hover{background:var(--coral-dk);transform:translateY(-2px)}
.back{color:rgba(255,255,255,.75);font-weight:700;font-size:14px}
.two{display:grid;grid-template-columns:1.05fr .95fr;gap:22px;align-items:start}
/* lesson boxes: tip, watch out, in practice, from working BAs */
.lesson{border-radius:16px;padding:14px 16px 15px;margin-top:14px;border:1.5px solid var(--border);background:#fff}
.lesson:first-child{margin-top:0}
.lesson .lab{display:block;font-size:11.5px;font-weight:800;letter-spacing:1.1px;text-transform:uppercase;margin-bottom:5px}
.lesson h4{font-family:'DM Sans',sans-serif;font-size:16.5px;font-weight:800;line-height:1.3;margin-bottom:5px;letter-spacing:0}
.lesson p{font-size:15px;color:var(--ink);line-height:1.55}
.lesson p + p{margin-top:7px}
.lesson .here{display:block;margin-top:9px;padding-top:9px;border-top:1.5px dashed var(--border);font-size:14.5px;color:var(--navy)}
.lesson .here b{color:var(--coral-dk)}
.lesson p b{color:var(--navy)}
.lesson .parts{list-style:none;margin:7px 0 9px}
.lesson .parts li{font-size:15px;color:var(--ink);line-height:1.5;padding:6px 0;border-top:1.5px dashed var(--border)}
.lesson .parts li:first-child{border-top:0;padding-top:0}
.lesson .parts b{color:var(--navy)}
.lesson.tip{background:var(--sage-faint);border-color:var(--sage)}
.lesson.tip .lab{color:var(--navy)}
.lesson.watch{background:#FDECEE;border-color:#F4B9BE}
.lesson.watch .lab{color:var(--coral-dk)}
.lesson.ba{background:var(--paper)}
.lesson.ba .lab{color:var(--navy)}
.lesson.prac .lab{color:var(--navy)}
.done small{color:var(--ink)}
.done small b{display:inline;font-size:inherit;line-height:inherit;color:var(--navy);font-weight:800}
.why .here b{display:inline;font-size:inherit;letter-spacing:0;text-transform:none;margin:0}
.next .lesson{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.2);margin-top:0}
.next .lesson .lab{color:var(--sage)}
.next .lesson h4{color:#fff}
.next .lesson p{color:rgba(255,255,255,.9)}
.next .lesson .here{border-top-color:rgba(255,255,255,.25);color:#fff}
.next .lesson .here b{color:var(--sage)}
.why{grid-template-columns:1fr 1fr}
@media(max-width:900px){.wrap{grid-template-columns:1fr}.why,.two{grid-template-columns:1fr}}

/* this page only */
.people{list-style:none}
.people li{display:flex;gap:14px;align-items:flex-start;padding:12px 0;border-top:1.5px solid var(--border)}
.people li:first-child{border-top:0;padding-top:2px}
.people .ph{width:54px;height:54px;border-radius:50%;border:2px solid var(--navy);background:#fff;overflow:hidden;flex:none;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:15px;color:var(--navy)}
.people .ph img{width:100%;height:100%;object-fit:cover;object-position:center 30%}
.people b{display:block;font-size:16px;line-height:1.3}
.people b span{font-weight:700;color:var(--grey);font-size:13.5px}
.people p{font-size:15px;color:var(--ink);line-height:1.5;margin-top:2px}
.three{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:4px 0 16px}
.three div{background:var(--paper);border:1.5px solid var(--border);border-radius:16px;padding:16px 18px}
.three i{font-style:normal;display:flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:50%;background:var(--navy);color:#fff;font-weight:800;font-size:14px;margin-bottom:8px}
.three b{display:block;font-size:16.5px;line-height:1.3;margin-bottom:4px}
.three p{font-size:15px;color:var(--ink);line-height:1.5}
.lrow{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;align-items:stretch} /* 12 October 2026: boxes side by side are the same height. Jo: make sure things line up */
.lrow .lesson{margin-top:0}
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:0 0 22px}
.steps div{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18);border-radius:16px;padding:14px 16px}
.steps i{font-style:normal;display:flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:50%;background:var(--sage);color:var(--navy);font-weight:800;font-size:13.5px;margin-bottom:8px}
.steps b{display:block;font-size:16px;line-height:1.3;color:#fff}
.steps span{display:block;font-size:14px;line-height:1.45;color:rgba(255,255,255,.82);margin-top:3px}
.next .jo-says{margin-bottom:16px}
.realworld{font-size:11.5px;font-weight:800;letter-spacing:1.2px;text-transform:uppercase;color:var(--coral-dk)}
@media(max-width:900px){.three,.lrow{grid-template-columns:1fr}.steps{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.nav{padding:0 14px;gap:10px}.nav .crumb{display:none}.nav .tool{font-size:13px;padding:8px 12px}.tiles{flex-wrap:wrap}.tile{width:auto;flex:1 1 90px}}

/* explainer marker: tells the learner this is a page to read and listen to, not a page to work on */
.explainer{background:var(--sage);border-bottom:1.5px solid rgba(29,53,87,.12)}
.explainer-in{max-width:1180px;margin:0 auto;padding:12px 28px;display:flex;align-items:center;gap:14px}
.explainer .ic{width:44px;height:44px;border-radius:50%;background:var(--navy);display:flex;align-items:center;justify-content:center;flex:none}
.explainer .ic svg{width:24px;height:24px}
.explainer b{display:block;font-size:12px;font-weight:800;letter-spacing:1.4px;text-transform:uppercase;color:var(--navy)}
.explainer span{display:block;font-size:15px;color:var(--navy-dk);line-height:1.4}
.explainer .sp{flex:1}
.explainer .steplab{font-size:13px;font-weight:800;color:var(--navy);background:#fff;border-radius:100px;padding:7px 14px;white-space:nowrap}
.hero .pill.ex{background:#fff;color:var(--navy)}
.hero .pill.ex svg{width:13px;height:13px;vertical-align:-2px;margin-right:6px}
/* an explainer the learner may skip (page design version 15) */
.explainer a.skiplab{font-size:13px;font-weight:800;color:#fff;background:var(--navy);border-radius:100px;padding:7px 14px;white-space:nowrap;text-decoration:none}
.explainer a.skiplab:hover{background:var(--coral)}
@media(max-width:600px){.explainer-in{padding:12px 14px;flex-wrap:wrap}.explainer .steplab{display:none}}
/* this page only */
.names{display:flex;flex-wrap:wrap;gap:8px;margin:4px 0 14px}
.names span{display:inline-flex;align-items:center;gap:7px;font-size:14px;font-weight:700;background:var(--paper);border:1.5px solid var(--border);border-radius:100px;padding:6px 13px;color:var(--navy)}
.names span i{font-style:normal;width:22px;height:22px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:800;color:#fff;background:var(--navy)}
.names span.new i{background:var(--coral)}
.names span.none i{background:var(--grey)}
.names span em{font-style:normal;font-weight:600;color:var(--grey);font-size:12.5px}
.groups{list-style:none}
.groups li{display:flex;gap:12px;align-items:flex-start;padding:10px 0;border-top:1.5px solid var(--border)}
.groups li:first-child{border-top:0;padding-top:2px}
.groups .g{width:104px;flex:none;font-size:12px;font-weight:800;letter-spacing:.6px;text-transform:uppercase;color:var(--navy);padding-top:3px}
.groups p{font-size:15px;color:var(--ink);line-height:1.5}
.groups p b{color:var(--navy)}
.prompt{background:var(--navy);color:#fff;border-radius:14px;padding:14px 16px;font-size:14.5px;line-height:1.55;margin:10px 0 8px;font-family:Consolas,Menlo,monospace}
.prompt b{color:var(--sage);font-family:'DM Sans',sans-serif;font-size:11.5px;font-weight:800;letter-spacing:1.2px;text-transform:uppercase;display:block;margin-bottom:6px}
.cant{list-style:none;margin-top:6px}
.cant li{display:flex;gap:10px;align-items:flex-start;padding:8px 0;border-top:1.5px dashed var(--border);font-size:15px;color:var(--ink);line-height:1.5}
.cant li:first-child{border-top:0;padding-top:0}
.cant li i{font-style:normal;flex:none;width:24px;height:24px;border-radius:50%;background:#FDECEE;color:var(--coral-dk);display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:800;margin-top:1px}
.cant li b{color:var(--navy)}
.grid4{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:8px 0 18px}
.grid4 div{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18);border-radius:14px;padding:13px 15px}
.grid4 b{display:block;font-size:11.5px;font-weight:800;letter-spacing:1.2px;text-transform:uppercase;color:var(--sage);margin-bottom:4px}
.grid4 p{font-size:14.5px;color:rgba(255,255,255,.9);line-height:1.45}
@media(max-width:600px){.grid4{grid-template-columns:1fr}.groups .g{width:86px}}

/* ===== shared by every page built from a list ===== */
.mock{flex-wrap:wrap}
.mock .reset{margin-left:auto;font-size:13px;font-weight:700;color:rgba(255,255,255,.7);text-decoration:underline;background:none;border:none;padding:0}
.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;margin-bottom:8px}
.btn:disabled{background:#C0C8D0;box-shadow:none;cursor:not-allowed;transform:none}
.btn-line{background:#fff;color:var(--navy);border:1.5px solid var(--navy);padding:14.5px 26px}
.btn-line:hover{background:var(--navy);color:#fff}
.btn.sm{font-size:15px;padding:12px 22px}
.btn-line.sm{padding:10.5px 20px}
.linkbtn{font-size:14.5px;color:var(--grey);font-weight:700;text-decoration:underline}
.pop{animation:pop .45s cubic-bezier(.2,1.4,.4,1) both}
@keyframes pop{from{opacity:0;transform:translateY(14px) scale(.98)}to{opacity:1;transform:none}}
.toast{position:fixed;left:50%;bottom:28px;transform:translate(-50%,120px);background:var(--navy);color:#fff;font-weight:800;font-size:16px;padding:14px 22px 14px 14px;border-radius:100px;display:flex;align-items:center;gap:12px;box-shadow:0 14px 34px rgba(18,36,64,.35);transition:transform .35s cubic-bezier(.2,1.3,.4,1);z-index:300}
.toast b{width:34px;height:34px;border-radius:50%;background:var(--coral);display:flex;align-items:center;justify-content:center;font-size:17px}
.toast.show{transform:translate(-50%,0)}
.card > .block + .block{margin-top:16px}
.jo-more{display:inline-block;font-weight:800;font-size:13px;color:var(--navy);text-decoration:underline}
.card .jo-says:last-child{margin-bottom:0}
.hd .n.done{background:var(--sage);color:var(--navy)}
.next .notmade{display:inline-block;font-weight:800;font-size:15px;background:rgba(255,255,255,.1);border:1.5px dashed rgba(255,255,255,.4);border-radius:100px;padding:12px 22px;color:#fff}
.next .ps p{color:rgba(255,255,255,.9)}
.next .ps p b{color:#fff}
.next .ps{margin-top:14px}
.next .done li{border-top-color:rgba(255,255,255,.2)}
.next .done b{color:#fff}
.next .done small{color:rgba(255,255,255,.82)}
.locked-note{font-size:14.5px;font-weight:700;color:var(--grey)}
.next .locked-note{color:var(--sage)}

/* a document the learner reads: a notice, a letter, an email */
.doc{background:#fff;border:1.5px solid var(--border);border-radius:16px;overflow:hidden}
.doc-hd{display:flex;gap:14px;align-items:center;background:var(--paper);border-bottom:1.5px solid var(--border);padding:14px 18px}
.doc-hd .ic{width:46px;height:46px;border-radius:12px;background:var(--navy);color:#fff;display:flex;align-items:center;justify-content:center;font-size:22px;flex:none;overflow:hidden}
.doc-hd .ic.ph{border-radius:50%;border:2px solid var(--navy);background:#fff}
.doc-hd .ic img{width:100%;height:100%;object-fit:cover;object-position:center 30%}
.doc-hd b{display:block;font-size:16px;line-height:1.3}
.doc-hd span{display:block;font-size:13.5px;color:var(--grey);font-weight:600}
.doc-hd{flex-wrap:wrap}
.doc-hd .listen{margin:0 0 0 auto;flex:none}
.doc-hd .listen span{display:inline;font-size:13px;color:inherit;font-weight:800}
.doc-hd .listen.playing span{color:#fff}
.doc-hd .seek{flex:1 1 100%;max-width:none;margin:0}
.doc-hd .seek span{display:inline;font-size:13px;color:var(--navy);font-weight:800}
@media(max-width:560px){.doc-hd .listen{margin:2px 0 0;max-width:100%;text-align:left}.doc-hd .listen i{flex:none}}
.doc-body{padding:18px 20px 20px}
.doc-subj{font-weight:800;font-size:16px;margin-bottom:10px;padding-bottom:10px;border-bottom:1.5px dashed var(--border)}
.doc-body p{font-size:15.5px;color:var(--ink);margin-bottom:10px}
.doc-sign{margin-top:14px;font-size:15px;color:var(--navy)}
.doc-sign b{display:block}
.doc-sign span{display:block;font-size:13.5px;color:var(--grey)}
.facts{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:14px}
.facts div{background:var(--paper);border:1.5px solid var(--border);border-radius:14px;padding:10px 12px}
.facts span{display:block;font-size:11px;font-weight:800;letter-spacing:.8px;text-transform:uppercase;color:var(--grey)}
.facts b{display:block;font-size:15.5px;line-height:1.3;margin-top:2px}
.warn{background:#FDECEE;border:1.5px solid #F4B9BE;border-radius:16px;padding:14px 16px;font-size:15.5px;color:var(--ink)}
.warn b{color:var(--coral-dk)}
.numbered{list-style:none;counter-reset:nn}
.numbered li{display:flex;gap:14px;align-items:flex-start;padding:11px 0;border-top:1.5px solid var(--border);font-size:15.5px;color:var(--ink)}
.numbered li:first-child{border-top:0;padding-top:2px}
.numbered li i{font-style:normal;width:30px;height:30px;border-radius:50%;background:var(--navy);color:#fff;font-weight:800;font-size:14px;display:flex;align-items:center;justify-content:center;flex:none}
.numbered li b{color:var(--navy)}
.numbered li .later{display:inline-block;font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;background:var(--paper);border:1.5px solid var(--border);border-radius:100px;padding:1px 9px;color:var(--grey);margin-left:6px}
.tbl{width:100%;border-collapse:collapse;font-size:15px}
.tbl th{text-align:left;font-size:11.5px;font-weight:800;letter-spacing:1px;text-transform:uppercase;color:var(--grey);padding:8px 10px;border-bottom:2px solid var(--border)}
.tbl td{padding:10px;border-bottom:1.5px solid var(--border);vertical-align:top;color:var(--ink)}
.tbl tr:last-child td{border-bottom:0}
.tbl td b{color:var(--navy)}
.tbl .num{font-family:'DM Serif Display',serif;font-size:24px;line-height:1;color:var(--navy);white-space:nowrap}
.tbl .bar{display:block;height:8px;border-radius:100px;background:var(--paper);margin-top:6px;overflow:hidden;min-width:90px}
.tbl .bar i{display:block;height:100%;background:var(--coral);border-radius:100px}

/* choose one: each choice opens what happens next */
.choices{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.choice{text-align:left;background:#fff;border:1.5px solid var(--border);border-radius:18px;padding:16px 16px 14px;transition:border-color .12s,box-shadow .12s,transform .12s;display:flex;flex-direction:column;gap:6px;color:var(--navy)}
.choice:hover{border-color:var(--navy);transform:translateY(-2px)}
.choice .ic{font-size:26px;line-height:1}
.choice b{font-family:'DM Serif Display',serif;font-weight:400;font-size:21px;line-height:1.15}
.choice span{font-size:14px;color:var(--ink);line-height:1.45}
.choice .st{font-size:11.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--grey);margin-top:auto;padding-top:6px}
.choice.sel{border-color:var(--coral);box-shadow:0 0 0 4px rgba(230,57,70,.14)}
.choice.seen .st{color:var(--navy)}
.chosen{margin-top:18px;padding-top:18px;border-top:1.5px dashed var(--border)}
.chosen > .block + .block{margin-top:16px}
.reveal > .block + .block{margin-top:16px}
.b-form .block{margin-top:14px}
.chosen h3{font-size:26px;margin-bottom:10px}
.reveal-row{display:flex;gap:14px;align-items:center;flex-wrap:wrap}
@media(max-width:1000px){.choices{grid-template-columns:1fr 1fr}.facts{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.choices{grid-template-columns:1fr}}

/* a scene: what was said, line by line (the same look as the visit in Project Maple) */
.tk-head{display:flex;gap:16px;align-items:flex-start;justify-content:space-between;flex-wrap:wrap;margin:6px 0 12px}
.tk-head h3{font-family:'DM Serif Display',serif;font-weight:400;font-size:24px;margin:0 0 4px;color:#1D3557}
.tk-head p{font-size:14.5px;color:#4B5563;margin:0;max-width:620px}
.tk-all{background:#E63946;color:#fff;border:0;border-radius:100px;padding:10px 20px;font:800 14px 'DM Sans',sans-serif;cursor:pointer;white-space:nowrap}
.tk-list{display:flex;flex-direction:column;gap:10px;max-width:860px}
.tk-scene{font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:#6B7280;margin-top:6px;padding-top:8px;border-top:1.5px dashed #E5E7EB}
.tk-scene:first-child{border-top:0;padding-top:0;margin-top:0}
.tk-note{font-size:14px;font-style:italic;color:#4B5563;padding:4px 14px;border-left:3px solid #C8DEC8;transition:background .2s}
.tk-line{display:flex;gap:10px;align-items:flex-start}
.tk-line.you{justify-content:flex-end}
.tk-b{border-radius:16px;padding:10px 14px;font-size:15px;line-height:1.55;max-width:640px;transition:box-shadow .2s}
.tk-b p + p{margin-top:8px}
.tk-line.you .tk-b{background:#1D3557;color:#fff;border-radius:16px 16px 4px 16px}
.tk-line.them .tk-b{background:#F5F6F8;color:#1D3557;border:1.5px solid #E5E7EB;border-radius:16px 16px 16px 4px}
.tk-n{display:block;font-size:12px;font-weight:800;letter-spacing:.04em;margin-bottom:2px}
.tk-line.you .tk-n{color:#C8DEC8}.tk-line.them .tk-n{color:#c0202d}
.tk-n small{font-weight:600;color:#6B7280;letter-spacing:0}
.tk-av{width:44px;height:44px;border-radius:50%;object-fit:cover;object-position:center 30%;flex-shrink:0;border:2px solid #fff;box-shadow:0 2px 6px rgba(18,36,64,.15)}
.tk-play{display:inline-flex;align-items:center;gap:7px;margin-top:8px;padding:5px 12px 5px 5px;border-radius:100px;border:1.5px solid #E5E7EB;background:#fff;font:700 12.5px 'DM Sans',sans-serif;color:#1D3557;cursor:pointer}
.tk-play i{width:22px;height:22px;border-radius:50%;background:#E63946;color:#fff;font-style:normal;font-size:10px;display:flex;align-items:center;justify-content:center}
.tk-play.miss{opacity:.65}
.tk-play.playing{background:#1D3557;color:#fff;border-color:#1D3557}
.tk-line.on .tk-b{box-shadow:0 0 0 3px rgba(230,57,70,.4)}.tk-note.on{background:rgba(200,222,200,.25)}
.tk-line.jo .tk-b{background:rgba(200,222,200,.28);border:1.5px solid #C8DEC8;border-radius:16px;max-width:720px}
.tk-line.jo .tk-n{color:#1D3557}
.tk-pick{display:flex;flex-direction:column;gap:8px;align-items:flex-end;margin:4px 0}
.tk-pick .lab{font-size:11.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--coral)}
.tk-pick button{text-align:left;max-width:560px;background:#fff;border:2px solid var(--navy);border-radius:16px 16px 4px 16px;padding:10px 14px;font-size:15px;font-weight:700;color:var(--navy);transition:.12s}
.tk-pick button:hover{background:var(--navy);color:#fff}
.tk-pick button small{display:block;font-weight:600;font-size:13px;opacity:.8}

/* boxes the learner writes in */
.form-box{background:var(--paper);border:1.5px solid var(--border);border-radius:16px;padding:14px 16px;margin-top:12px}
.form-box:first-child{margin-top:0}
.form-box label{display:flex;gap:10px;align-items:center;font-weight:800;font-size:16.5px}
.form-box label i{font-style:normal;width:28px;height:28px;border-radius:50%;background:var(--navy);color:#fff;font-size:13.5px;display:flex;align-items:center;justify-content:center;flex:none}
.form-box .hint{font-size:14px;color:var(--grey);margin:4px 0 8px 38px}
.form-box textarea{width:100%;min-height:74px;border:1.5px solid var(--border);border-radius:12px;padding:10px 12px;font:15.5px/1.5 'DM Sans',sans-serif;color:var(--navy);resize:vertical;background:#fff}
.form-box textarea:focus{outline:none;border-color:var(--navy)}
.form-box .mark{display:none;font-size:14.5px;line-height:1.5;margin-top:8px;border-radius:12px;padding:9px 12px}
.form-box.ok .mark{display:block;background:var(--sage-faint);border:1.5px solid var(--sage);color:var(--ink)}
.form-box.bad .mark{display:block;background:#FDECEE;border:1.5px solid #F4B9BE;color:var(--ink)}
.form-box.ok label i{background:var(--sage);color:var(--navy)}
.form-box.bad label i{background:var(--coral)}
.form-box .wc{float:right;font-size:12.5px;font-weight:700;color:var(--grey)}
.sentence{background:#fff;border:1.5px solid var(--border);border-left:5px solid var(--coral);border-radius:14px;padding:14px 16px;font-size:16px;color:var(--ink);line-height:1.6}
.sentence b{color:var(--navy)}
.sentence .k{display:block;margin-bottom:4px}
.submit-row{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-top:16px}
.submit-hint{font-size:14.5px;color:var(--grey);font-weight:700}
.know{list-style:none}
.know li{padding:10px 0;border-top:1.5px solid var(--border);font-size:15px;color:var(--ink);line-height:1.5}
.know li:first-child{border-top:0;padding-top:2px}
.know li b{color:var(--navy)}
.know li small{display:block;font-size:13px;color:var(--grey);font-weight:600}
.wrapcard{display:none}
.wrapcard.show{display:block}

/* the change impact assessment */
.pop-bar{display:flex;gap:16px;align-items:center;flex-wrap:wrap;background:var(--paper);border:1.5px solid var(--border);border-radius:16px;padding:12px 16px}
.pop-bar b{font-family:'DM Serif Display',serif;font-weight:400;font-size:26px;line-height:1}
.pop-bar span{font-size:12px;font-weight:800;letter-spacing:.8px;text-transform:uppercase;color:var(--grey)}
.pop-track{flex:1 1 180px;height:10px;border-radius:100px;background:#fff;border:1.5px solid var(--border);overflow:hidden}
.pop-track i{display:block;height:100%;background:var(--coral);border-radius:100px;transition:width .3s}
.dim{border:1.5px solid var(--border);border-radius:18px;background:#fff;margin-top:14px;overflow:hidden}
.dim-hd{width:100%;display:flex;gap:14px;align-items:center;padding:14px 18px;text-align:left}
.dim-hd .ic{width:46px;height:46px;border-radius:12px;background:var(--navy);color:#fff;font-family:'DM Serif Display',serif;font-size:24px;display:flex;align-items:center;justify-content:center;flex:none}
.dim-hd b{display:block;font-family:'DM Serif Display',serif;font-weight:400;font-size:24px;line-height:1.1}
.dim-hd span{display:block;font-size:13.5px;color:var(--grey);font-weight:600}
.dim-hd .cnt{margin-left:auto;font-size:12.5px;font-weight:800;background:var(--paper);border:1.5px solid var(--border);border-radius:100px;padding:5px 12px;color:var(--navy);white-space:nowrap}
.dim-hd .cnt.all{background:var(--sage);border-color:var(--sage)}
.dim-hd .chev{font-size:18px;color:var(--grey);transition:transform .2s}
.dim.open .dim-hd .chev{transform:rotate(180deg)}
.dim-body{display:none;padding:0 18px 18px}
.dim.open .dim-body{display:block}
.dim-body .jo-says{margin-bottom:12px}
.irow{border:1.5px solid var(--border);border-radius:14px;padding:12px 14px;margin-top:10px;background:var(--paper)}
.irow p{font-size:15.5px;color:var(--navy);font-weight:700;line-height:1.45}
.irow .from{font-size:13px;color:var(--grey);font-weight:600;margin-top:2px}
.irow .rate{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:10px}
.irow .rate .lab{font-size:11.5px;font-weight:800;letter-spacing:.8px;text-transform:uppercase;color:var(--grey);margin-right:2px}
.irow .rate button{font-size:13.5px;font-weight:800;padding:6px 16px;border-radius:100px;border:1.5px solid var(--border);background:#fff;color:var(--navy)}
.irow .rate button:hover{border-color:var(--navy)}
.irow .rate button.on.high{background:var(--coral);border-color:var(--coral);color:#fff}
.irow .rate button.on.med{background:var(--navy);border-color:var(--navy);color:#fff}
.irow .rate button.on.low{background:var(--sage);border-color:var(--sage);color:var(--navy)}
.irow .jo-rate{display:none;font-size:13.5px;font-weight:700;color:var(--navy);background:#fff;border:1.5px dashed var(--border);border-radius:100px;padding:5px 12px}
.compare .irow .jo-rate{display:inline-block}
.irow .jo-rate.diff{border-color:var(--coral);color:var(--coral-dk)}
.irow textarea{width:100%;min-height:52px;border:1.5px solid var(--border);border-radius:12px;padding:8px 12px;font:15px/1.5 'DM Sans',sans-serif;color:var(--navy);resize:vertical;background:#fff;margin-top:10px}
.irow textarea:focus{outline:none;border-color:var(--navy)}
.lvl{display:inline-block;font-size:11.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;border-radius:100px;padding:3px 11px}
.lvl.high{background:var(--coral);color:#fff}.lvl.med{background:var(--navy);color:#fff}.lvl.low{background:var(--sage);color:var(--navy)}

/* Billie's feedback, in the page */
.fb{display:none;border-top:6px solid var(--navy)}
.fb.show{display:block}
.fb-hd{display:flex;gap:14px;align-items:center;margin-bottom:12px}
.fb-av{width:48px;height:48px;border-radius:50%;background:#E8EFE5 url('../assets/billie-avatar.svg') center/cover no-repeat;box-shadow:0 0 0 3px var(--coral);flex:none}
.fb-hd h2{font-size:26px}
.fb-body{display:grid;grid-template-columns:1fr 1fr;gap:12px;align-items:stretch}
.bubble{padding:12px 15px;border-radius:14px;font-size:15px;line-height:1.55;color:var(--ink);background:var(--paper)}
.bubble.wide{grid-column:1 / -1}
.bubble-good{background:var(--sage-faint);border:1.5px solid var(--sage)}
.bubble-warn{background:#FDECEE;border:1.5px solid #F4B9BE}
.bubble-tip{background:#fff;border:1.5px solid var(--border)}
.bubble strong{color:var(--navy)}
@media(max-width:900px){.fb-body{grid-template-columns:1fr}}

/* ===== Billie in the corner (buttons only, no typing) ===== */
.bil-fab{position:fixed;right:24px;bottom:24px;z-index:250;display:flex;align-items:center;gap:10px}
.bil-fab .bub{background:#fff;color:var(--navy);font-weight:800;font-size:14px;padding:10px 16px;border-radius:18px 18px 4px 18px;box-shadow:0 10px 26px rgba(29,53,87,.18);animation:pop .5s .8s both}
.bil-fab .face{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);overflow:hidden;transition:.16s}
.bil-fab .face:hover{transform:scale(1.07) rotate(-4deg)}
.bil-fab .face img{width:100%;height:100%}
.bil-fab.hide .bub{display:none}
.bil{position:fixed;right:24px;bottom:108px;width:390px;max-width:calc(100vw - 32px);max-height:min(640px,calc(100vh - 150px));background:#fff;border-radius:26px;box-shadow:0 24px 60px rgba(18,36,64,.30);z-index:260;display:none;flex-direction:column;overflow:hidden}
.bil.open{display:flex;animation:pop .35s both}
.bil-hd{background:var(--navy);color:#fff;padding:16px 18px;display:flex;gap:12px;align-items:center}
.bil-hd img{width:46px;height:46px;border-radius:50%;background:#fff}
.bil-hd b{font-family:'DM Serif Display',serif;font-weight:400;font-size:22px;display:block;line-height:1.1}
.bil-hd small{font-size:13px;color:var(--sage)}
.bil-hd .x{margin-left:auto;font-size:20px;color:#fff;opacity:.7}
.bil-ctx{background:var(--sage-bg);font-size:13px;font-weight:700;padding:9px 18px}
.bil-body{padding:16px 18px;overflow-y:auto;flex:1;min-height:110px;display:flex;flex-direction:column;gap:10px}
.bil-m{background:var(--paper);border-radius:6px 18px 18px 18px;padding:12px 15px;font-size:15px;color:var(--ink);align-self:flex-start;max-width:92%}
.bil-m b{color:var(--navy)}
.bil-u{background:var(--coral);color:#fff;border-radius:18px 18px 6px 18px;padding:10px 15px;font-size:15px;font-weight:700;align-self:flex-end;max-width:85%}
.bil-chips{display:flex;flex-wrap:wrap;gap:8px;padding:2px 18px 12px;flex:0 0 auto;max-height:min(250px,30vh);overflow-y:auto}
.bil-chips button{font-size:13.5px;font-weight:800;padding:8px 14px;border-radius:100px;border:2px solid var(--navy);background:#fff}
.bil-chips button:hover{background:var(--navy);color:#fff}
.bil-in{display:flex;gap:8px;padding:12px 14px;border-top:1px solid var(--border)}
.bil-in input{flex:1;border:1.5px solid var(--border);border-radius:100px;padding:10px 16px;font:inherit;font-size:15px}
.bil-in button{background:var(--coral);color:#fff;border-radius:100px;padding:0 18px;font-weight:800}
@media(max-width:600px){.bil-fab .bub{display:none}}

/* ---------- cards to drag into boxes, with Billie's check ---------- */
.so-wrap.side{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:18px;align-items:start}
.so-tray{background:#fff;border:1.5px dashed var(--border);border-radius:16px;padding:14px 16px;margin-bottom:14px;transition:border-color .12s,box-shadow .12s}
.so-wrap.side .so-tray{margin-bottom:0;position:sticky;top:14px}
.so-tray .tray-h{font-size:11.5px;font-weight:800;letter-spacing:1.1px;text-transform:uppercase;color:var(--navy);margin:0 0 10px;line-height:1.5}
.so-tray .tray-h em{display:block;font-style:normal;font-weight:600;letter-spacing:0;text-transform:none;font-size:13.5px;color:var(--grey)}
.so-drop{display:flex;flex-direction:column;gap:8px}
.so-none{display:none;font-size:14px;color:var(--grey);font-style:italic}
.so-tray.empty .so-none{display:block}
.so-bins{display:grid;grid-template-columns:repeat(var(--cols,1),minmax(0,1fr));gap:12px;align-items:start}
.so-bin{background:var(--paper);border:1.5px solid var(--border);border-radius:16px;padding:12px 14px 14px;transition:border-color .12s,box-shadow .12s}
.so-bin.over,.so-tray.over{border-color:var(--navy);border-style:solid;box-shadow:0 0 0 4px rgba(29,53,87,.10)}
.so-bin-h{display:flex;gap:10px;align-items:center;font-size:16.5px;font-weight:800}
.so-bin-h i{font-style:normal;width:28px;height:28px;border-radius:50%;background:var(--navy);color:#fff;font-size:13.5px;display:flex;align-items:center;justify-content:center;flex:none}
.so-bin .hint{font-size:14px;color:var(--grey);margin:4px 0 0}
.so-bin .so-drop{margin-top:10px;min-height:42px}
.so-here{font-size:13.5px;font-weight:600;color:var(--grey);border:1.5px dashed var(--border);border-radius:12px;padding:9px 12px;text-align:center;background:#fff}
.so-drop .so-card~.so-here{display:none}
.so-bin.out{background:#fff;border-style:dashed}
.so-bin.out .so-bin-h i{background:var(--grey)}
.so-bin.high{border-top:6px solid var(--coral)}
.so-bin.med{border-top:6px solid var(--navy)}
.so-bin.low{border-top:6px solid var(--sage)}
.so-card{background:#fff;border:1.5px solid var(--border);border-radius:12px;padding:9px 12px;cursor:grab;font-size:15px;font-weight:700;color:var(--navy);line-height:1.4;user-select:none;-webkit-user-select:none;transition:border-color .12s,box-shadow .12s,transform .12s}
.so-card:hover{border-color:var(--navy);transform:translateY(-1px)}
.so-card:active{cursor:grabbing}
.so-card.dragging{opacity:.45}
.so-card.sel{border-color:var(--coral);box-shadow:0 0 0 4px rgba(230,57,70,.18)}
.so-card small{display:block;font-size:12.5px;color:var(--grey);font-weight:600;margin-top:2px}
.so-card .so-why{font-size:14px;font-weight:500;color:var(--ink);line-height:1.5;margin-top:7px;padding-top:7px;border-top:1.5px dashed var(--border)}
.so-card .so-why b{color:var(--navy)}
.so-card.m-ok{background:var(--sage-faint);border-color:var(--sage)}
.so-card.m-near{background:#fff;border-color:var(--navy);border-style:dashed}
.so-card.m-bad{background:#FDECEE;border-color:#F4B9BE}
.so-card.m-bad .so-why b{color:var(--coral-dk)}
.pop-sum textarea{width:100%;min-width:180px;min-height:46px;border:1.5px solid var(--border);border-radius:10px;padding:7px 10px;font:14.5px/1.45 'DM Sans',sans-serif;color:var(--navy);resize:vertical;background:#fff}
.pop-sum textarea:focus{outline:none;border-color:var(--navy)}
.dim-body .sorter{margin-top:12px}
@media(max-width:900px){.so-wrap.side{grid-template-columns:1fr}.so-wrap.side .so-tray{position:static;margin-bottom:14px}.so-bins{grid-template-columns:1fr}}
.card,.popit,.dim,.sorter,.so-wrap,.so-bins{min-width:0}
.tbl-scroll{overflow-x:auto}
@media(max-width:700px){.pop-sum,.pop-sum tbody,.pop-sum tr,.pop-sum td{display:block;width:100%}.pop-sum tr:first-child{display:none}.pop-sum td{border:0;padding:4px 0}.pop-sum tr{border-top:1.5px solid var(--border);padding:10px 0}.pop-bar{gap:10px}}

/* ---------- the learner's notes: a button in the top bar and a panel that slides in ---------- */
.nav .notes-btn{display:inline-flex;align-items:center;gap:8px;cursor:pointer;font-family:inherit}
.nav .notes-btn b{min-width:24px;height:24px;padding:0 7px;border-radius:100px;background:var(--border);color:var(--navy);font-size:12.5px;font-weight:800;display:flex;align-items:center;justify-content:center}
.nav .notes-btn.has{border-color:var(--navy)}
.nav .notes-btn.has b{background:var(--coral);color:#fff}
.nav .notes-btn.pulse b{animation:notePulse .9s ease}
@keyframes notePulse{0%{transform:scale(1)}35%{transform:scale(1.45)}100%{transform:scale(1)}}
.notes-shade{position:fixed;inset:0;background:rgba(18,36,64,.35);opacity:0;pointer-events:none;transition:opacity .2s;z-index:300}
.notes-shade.open{opacity:1;pointer-events:auto}
.notes{position:fixed;top:0;right:0;bottom:0;width:430px;max-width:100vw;background:#fff;box-shadow:-18px 0 50px rgba(18,36,64,.25);z-index:310;display:flex;flex-direction:column;transform:translateX(105%);transition:transform .25s ease}
.notes.open{transform:none}
.notes-hd{background:var(--navy);color:#fff;padding:20px 22px;display:flex;align-items:center;gap:12px}
.notes-hd div{flex:1}
.notes-hd small{display:block;font-size:11.5px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:var(--sage)}
.notes-hd b{display:block;font-family:'DM Serif Display',Georgia,serif;font-weight:400;font-size:26px;line-height:1.2}
.notes-hd .x{width:36px;height:36px;border-radius:50%;border:0;background:rgba(255,255,255,.14);color:#fff;font-size:15px;cursor:pointer}
.notes-hd .x:hover{background:var(--coral)}
.notes-body{flex:1;overflow:auto;padding:18px 22px 24px}
.notes-body h4{font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--coral);margin:18px 0 8px}
.notes-body h4:first-child{margin-top:2px}
.notes-body ul{list-style:none;margin:0;padding:0}
.notes-body li{position:relative;font-size:15px;line-height:1.5;color:var(--ink,#122440);padding:9px 12px 9px 30px;border-radius:12px;background:var(--paper,#F5F6F8);margin-bottom:6px}
.notes-body li::before{content:'';position:absolute;left:13px;top:17px;width:7px;height:7px;border-radius:50%;background:var(--navy)}
.notes-body li.new{background:var(--sage-faint,rgba(200,222,200,.18));box-shadow:inset 0 0 0 1.5px var(--sage)}
.notes-body li small{display:block;font-size:12px;font-weight:700;color:var(--grey);margin-top:2px}
.notes-empty{font-size:15.5px;color:var(--grey);line-height:1.6;padding:8px 0}
.notes-ft{border-top:1.5px solid var(--border);padding:12px 22px;text-align:right}
.notes-ft button{font:700 13px 'DM Sans',Arial,sans-serif;color:var(--grey);background:none;border:0;cursor:pointer;text-decoration:underline}
.notes-ft button:hover{color:var(--coral-dk,#c0202d)}
.block{position:relative}
.note-mark{position:absolute;left:0;bottom:0;width:1px;height:1px;pointer-events:none}
@media(max-width:600px){.nav .notes-btn span{display:none}.nav .notes-btn::before{content:'Notes';}}

/* ---------- a story in steps: one box, a heading strip, numbered steps across, and a closing line ---------- */
.story{border:1.5px solid #F4B9BE;border-radius:18px;overflow:hidden;background:#fff;margin:4px 0 16px}
.story-hd{background:#FDECEE;padding:16px 20px 15px;border-bottom:1.5px solid #F4B9BE}
.story-hd .lab{display:block;font-size:11.5px;font-weight:800;letter-spacing:1.1px;text-transform:uppercase;color:var(--coral-dk);margin-bottom:5px}
.story-hd h4{font-family:'DM Serif Display',Georgia,serif;font-weight:400;font-size:24px;line-height:1.2;color:var(--navy);margin-bottom:6px;letter-spacing:0}
.story-hd p{font-size:15px;color:var(--ink);line-height:1.55}
.story-hd p b{color:var(--navy)}
.story-steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr)}
.story-steps li{position:relative;padding:18px 20px 18px;border-right:1.5px dashed var(--border);border-bottom:1.5px dashed var(--border)}
.story-steps li:nth-child(3n){border-right:0}
.story-steps li:nth-last-child(-n+3){border-bottom:0}
.story-steps li::after{content:'→';position:absolute;right:-13px;top:19px;width:24px;height:24px;border-radius:50%;background:#fff;border:1.5px solid var(--border);color:var(--coral);font-weight:800;font-size:13px;display:flex;align-items:center;justify-content:center;z-index:1}
.story-steps li:nth-child(3n)::after{content:'↓';right:auto;left:50%;top:auto;bottom:-13px;margin-left:-12px}
.story-steps li:last-child::after{display:none}
.story-steps i{font-style:normal;display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:50%;background:var(--navy);color:#fff;font-weight:800;font-size:13.5px;margin-bottom:8px}
.story-steps b{display:block;font-size:16px;font-weight:800;line-height:1.3;color:var(--navy);margin-bottom:4px}
.story-steps p{font-size:15px;color:var(--ink);line-height:1.5}
.story-steps li.key{background:#FFF7F7}
.story-steps li.key i{background:var(--coral)}
.story-ft{background:var(--sage-faint);border-top:1.5px solid var(--sage);padding:14px 20px 15px}
.story-ft b{display:block;font-size:16px;font-weight:800;color:var(--navy);margin-bottom:3px}
.story-ft p{font-size:15px;color:var(--ink);line-height:1.55}
@media(max-width:760px){.story-steps{grid-template-columns:1fr}.story-steps li{border-right:0;border-bottom:1.5px dashed var(--border)!important}.story-steps li:last-child{border-bottom:0!important}.story-steps li::after,.story-steps li:nth-child(3n)::after{content:'↓';right:auto;left:26px;top:auto;bottom:-13px;margin-left:0}}
.story-src{border-top:1.5px solid var(--border);padding:12px 20px 14px;background:#fff}
.story-src b{display:block;font-size:11.5px;font-weight:800;letter-spacing:1.1px;text-transform:uppercase;color:var(--grey);margin-bottom:4px}
.story-src ul{list-style:none;margin:0;padding:0}
.story-src li{font-size:14px;line-height:1.5;color:var(--grey);padding:2px 0}
.story-src a{color:var(--navy);font-weight:700;text-decoration:underline;text-underline-offset:2px}
.story-src a:hover{color:var(--coral-dk)}
.story-hd .listen{margin-top:12px}

/* ---------- a picture inside a card ---------- */
.pic{margin:4px 0 2px}
.pic-scroll{overflow-x:auto}
.pic img{display:block;width:100%;min-width:680px;height:auto;border-radius:18px}
.pic figcaption{font-size:14px;color:var(--grey);margin-top:8px}

/* ---------- a fishbone (Ishikawa) diagram ---------- */
.fishbone{margin:14px 0 16px;border:1.5px solid var(--border);border-radius:18px;background:#fff;overflow:hidden}
.fb-title{background:var(--navy);color:#fff;font-weight:800;font-size:16px;padding:12px 20px}
.fb-scroll{overflow-x:auto;padding:10px 12px 6px}
.fishbone svg{display:block;width:100%;min-width:680px;height:auto;font-family:'DM Sans',Arial,sans-serif}
.fb-spine{stroke:var(--navy);stroke-width:5;stroke-linecap:round}
.fb-bone{stroke:var(--navy);stroke-width:3;stroke-linecap:round}
.fb-tick{stroke:var(--coral);stroke-width:3;stroke-linecap:round}
.fb-pill{fill:var(--sage)}
.fb-h{fill:var(--navy-dk);font-weight:800;font-size:18px}
.fb-c{fill:#2b3a52;font-size:16.5px;font-weight:500}
.fb-head{fill:var(--coral)}
.fb-e{fill:#fff;font-weight:800;font-size:19px}
.fb-note{font-size:13.5px;color:var(--grey);padding:0 20px 14px}
/* ---------- Your notes: the foot of the panel ---------- */
.notes-ft{display:flex;justify-content:space-between;align-items:center;gap:12px}

/* 12 October 2026. A steps block in a white card had white words on white, so it looked empty (Rowan's force field explainer and the new Aurora pages).
   On a white card the steps now use the page's own colours. On the navy Next card they are as before. */
.card:not(.next) .steps div{background:var(--paper,#F5F6F8);border-color:var(--border,#E5E7EB)}
.card:not(.next) .steps b{color:var(--navy,#1D3557)}
.card:not(.next) .steps span{color:#374151}