/* Soundings tour: silent, animated walkthrough. Reuses ../assets/site.css tokens. */
body.tour-body{overflow:hidden; height:100vh}
.tour{position:fixed; inset:0; background:var(--navy); overflow:hidden}
.tour-top{position:absolute; top:0; left:0; right:0; z-index:5; padding:18px 22px 0}
.dots{display:flex; gap:5px}
.dots i{flex:1; height:3px; background:rgba(255,255,255,.22); border-radius:2px; overflow:hidden; position:relative}
.dots i b{position:absolute; inset:0; width:0; background:var(--gold-light); display:block; transform-origin:left}
.dots i.done b{width:100%; transition:none}
.dots i.active b{width:0; animation:fillbar linear forwards}
@keyframes fillbar{to{width:100%}}
.tour-brand{display:flex; justify-content:space-between; align-items:center; margin:12px 0 0}
.tour-brand span{font-family:'Bricolage Grotesque','Hanken Grotesk',system-ui,sans-serif; color:#fff; font-size:14.5px; opacity:.85}
.tour-controls{display:flex; gap:14px; align-items:center}
.tour-controls button{background:none; border:0; color:#fff; opacity:.75; cursor:pointer; font-size:13px; font-family:'Hanken Grotesk',sans-serif; padding:4px}
.tour-controls button:hover{opacity:1}
.skip{border-bottom:1px solid rgba(255,255,255,.5)}

.stage{position:absolute; inset:0; display:flex; align-items:center; justify-content:center; padding:90px 24px 70px}
.scene{position:absolute; inset:0; display:flex; align-items:center; justify-content:center; padding:90px 28px 70px; opacity:0; pointer-events:none; transition:opacity .5s ease; overflow-y:auto; -webkit-overflow-scrolling:touch}
.scene.on{opacity:1; pointer-events:auto}
.scene .inner{max-width:760px; width:100%; text-align:center}
.scene h2{font-family:'Bricolage Grotesque','Hanken Grotesk',system-ui,sans-serif; color:#fff; font-weight:600; font-size:clamp(26px,4.4vw,42px); line-height:1.3; margin:0 0 14px; letter-spacing:-.01em}
.scene .kick{text-transform:none; letter-spacing:.4px; font-size:13px; color:var(--gold-light); font-weight:600; margin:0 0 14px}
.scene p{color:rgba(228,236,232,.82); font-size:17px; line-height:1.65; max-width:60ch; margin:0 auto}
.pop{opacity:0; transform:translateY(14px); animation:pop .6s ease forwards}
.d1{animation-delay:.05s}.d2{animation-delay:.35s}.d3{animation-delay:.65s}.d4{animation-delay:.95s}
@keyframes pop{to{opacity:1; transform:translateY(0)}}
@media (prefers-reduced-motion:reduce){.pop{animation:none; opacity:1; transform:none}}

.sits{display:grid; grid-template-columns:repeat(3,1fr); gap:0; margin-top:30px; text-align:left}
.sits div{padding:0 18px; opacity:.35; transition:opacity .4s ease}
.sits div + div{border-left:1px solid rgba(255,255,255,.18)}
.sits div.on{opacity:1}
.sits h4{color:#fff; font-size:14.5px; margin:0 0 8px}
.sits p{color:rgba(228,236,232,.72); font-size:13.5px; margin:0; max-width:none}
@media (max-width:700px){.sits{grid-template-columns:1fr; gap:14px}.sits div + div{border-left:0; border-top:1px solid rgba(255,255,255,.18); padding-top:14px}}

.checklist{display:grid; grid-template-columns:1fr 1fr; gap:26px; margin-top:26px; text-align:left}
.checklist div{background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.14); border-radius:8px; padding:16px 18px}
.checklist h4{color:var(--gold-light); font-size:12.5px; letter-spacing:.6px; margin:0 0 10px}
.checklist ul{list-style:none; margin:0; padding:0}
.checklist li{color:rgba(228,236,232,.85); font-size:14px; padding:5px 0; opacity:0; transform:translateX(-6px)}
.checklist li.on{animation:slide .4s ease forwards}
@keyframes slide{to{opacity:1; transform:none}}
@media (max-width:700px){.checklist{grid-template-columns:1fr}}

.chat{max-width:560px; margin:26px auto 0; text-align:left}
.bubble{max-width:82%; padding:11px 16px; border-radius:12px; font-size:14.5px; line-height:1.55; margin:0 0 10px; opacity:0; transform:translateY(8px)}
.bubble.on{animation:slide2 .45s ease forwards}
@keyframes slide2{to{opacity:1; transform:none}}
.b-ask{background:rgba(255,255,255,.08); color:#fff; border-bottom-left-radius:3px}
.b-ans{background:var(--gold-light); color:#3A2E10; margin-left:auto; border-bottom-right-radius:3px}
.b-why{background:none; border:1px dashed rgba(255,255,255,.35); color:rgba(228,236,232,.7); font-size:12.5px; font-style:italic}

.mapwrap{margin-top:24px; background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.14); border-radius:10px; padding:16px}
.mapwrap svg{width:100%; height:auto; display:block}

.deliv{display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:26px; text-align:left}
.deliv div{opacity:0; transform:translateY(10px)}
.deliv div.on{animation:pop .5s ease forwards}
.deliv h4{color:#fff; font-size:14.5px; margin:0 0 6px}
.deliv p{color:rgba(228,236,232,.72); font-size:13px; margin:0}
@media (max-width:700px){.deliv{grid-template-columns:1fr}}

.end .inner{max-width:600px}
.end .btnrow{display:flex; gap:14px; justify-content:center; margin-top:30px; flex-wrap:wrap}
.tourbtn{font:inherit; font-size:14.5px; font-weight:600; padding:13px 26px; border-radius:6px; cursor:pointer; border:1px solid rgba(255,255,255,.5); background:transparent; color:#fff}
.tourbtn:hover{border-color:#fff}
.tourbtn.solid{background:var(--gold); border-color:var(--gold); color:#221904}
.tourbtn.solid:hover{background:var(--gold-light); border-color:var(--gold-light)}

.tour-bottom{position:absolute; bottom:22px; left:0; right:0; display:flex; justify-content:center; gap:26px; z-index:5}
.navbtn{background:none; border:0; color:rgba(255,255,255,.6); cursor:pointer; font-size:22px; padding:6px 14px; line-height:1}
.navbtn:hover{color:#fff}
.navbtn[disabled]{opacity:.25; cursor:default}

/* Modal for the assessment */
.modalbg{position:fixed; inset:0; background:rgba(15,42,71,.6); backdrop-filter:blur(2px); display:flex; align-items:center; justify-content:center; padding:22px; z-index:50; opacity:0; pointer-events:none; transition:opacity .25s ease}
.modalbg.on{opacity:1; pointer-events:auto}
.modalbox{background:var(--bg); width:100%; max-width:760px; height:min(88vh,880px); border-radius:12px; overflow:hidden; position:relative; box-shadow:0 30px 70px rgba(0,0,0,.4); transform:translateY(14px) scale(.98); transition:transform .25s ease}
.modalbg.on .modalbox{transform:none}
.modalbox iframe{width:100%; height:100%; border:0; display:block}
.modalclose{position:absolute; top:10px; right:10px; width:34px; height:34px; border-radius:50%; border:0; background:var(--paper); color:var(--navy); font-size:18px; cursor:pointer; z-index:2; box-shadow:0 2px 8px rgba(0,0,0,.15)}

/* Deck gravitas: quiet blueprint grid, exhibit numbering, citation strip. */
.tour::before{content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background-image:
    linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
  background-size:44px 44px;
  mask-image:radial-gradient(ellipse 80% 70% at 50% 40%, #000 40%, transparent 85%);
}
.tour::after{content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:radial-gradient(ellipse 90% 60% at 50% 0%, rgba(184,146,63,.07), transparent 60%);
}
.stage{z-index:2}

.exline{position:absolute; top:96px; left:28px; right:28px; display:flex; justify-content:space-between; align-items:baseline; font-size:11px; letter-spacing:1.6px; text-transform:uppercase; color:rgba(255,176,58,.55); font-weight:700; pointer-events:none}
.exline[hidden]{display:none}
.exline span:last-child{color:rgba(228,236,232,.4)}
.decknote{position:absolute; bottom:64px; left:0; right:0; text-align:center; font-size:10.5px; letter-spacing:.8px; color:rgba(228,236,232,.32); text-transform:uppercase; pointer-events:none}
@media (max-width:700px){
  .exline{top:70px; font-size:9.5px; letter-spacing:1px}
  .decknote{bottom:58px; font-size:9px}
  .scene{padding-top:108px; align-items:flex-start}
  .scene.reportscene{padding-top:104px}
  .scene .inner{margin:auto 0}
  .tour-brand span:first-child{display:none}
  .tour-controls{gap:10px}
  .tour-controls button{font-size:12px; white-space:nowrap}
}

.rule{width:40px; height:2px; background:var(--gold); margin:0 auto 18px; border:0}
.rule.left{margin:0 0 16px}

/* Free vs report tags on the deliverables scene */
.tagpill{display:inline-block; font-size:10.5px; font-weight:700; letter-spacing:.6px; text-transform:uppercase; padding:3px 9px; border-radius:3px; margin-bottom:8px}
.tp-free{background:rgba(184,146,63,.18); color:var(--gold-light); border:1px solid rgba(184,146,63,.4)}
.tp-report{background:rgba(255,255,255,.08); color:rgba(228,236,232,.75); border:1px solid rgba(255,255,255,.22)}

/* Report preview card */
.reportcard{position:relative; margin-top:16px; background:#fff; border-radius:10px; padding:16px 20px 14px; text-align:left; box-shadow:0 30px 60px rgba(0,0,0,.35); max-width:600px; margin-left:auto; margin-right:auto}
.reportcard::before,.reportcard::after{content:""; position:absolute; left:10px; right:-10px; height:100%; background:#EDEFF2; border-radius:10px; z-index:-1}
.reportcard::before{top:8px; right:-8px; background:#E4E7EC}
.reportcard::after{top:16px; right:-16px; background:#DADEE5}
.rc-top{display:flex; justify-content:space-between; align-items:center; border-bottom:1px solid var(--line); padding-bottom:8px; margin-bottom:12px}
.rc-top span:first-child{font-family:'Bricolage Grotesque','Hanken Grotesk',system-ui,sans-serif; font-weight:600; color:var(--navy); font-size:14.5px}
.rc-illustrative{font-size:10px; letter-spacing:.6px; text-transform:uppercase; color:var(--muted); border:1px solid var(--line); border-radius:3px; padding:2px 7px}
.rc-grid{display:grid; grid-template-columns:1fr 1fr; gap:10px 20px}
.rc-h{font-size:11px; letter-spacing:.6px; text-transform:uppercase; color:var(--navy); font-weight:700; margin:0 0 6px; opacity:.8}
.rc-chart svg,.rc-donut svg{width:100%; height:auto; display:block}
.rc-chart p{margin:4px 0 0; font-size:11px; color:var(--muted); text-align:center}
.rc-legend{display:flex; flex-wrap:wrap; gap:6px 12px; justify-content:center; margin-top:2px}
.rc-legend span{font-size:10.5px; color:var(--ink); display:flex; align-items:center; gap:5px}
.rc-legend i{width:8px; height:8px; border-radius:2px; display:inline-block}
.rc-list .rc-row,.rc-evidence p{opacity:0; transform:translateY(4px)}
.rc-list .rc-row.on,.rc-evidence p.on{animation:pop .4s ease forwards}
.rc-row{display:flex; align-items:center; gap:8px; font-size:12px; color:var(--ink); padding:4px 0; border-bottom:1px solid var(--line)}
.rc-row .num{width:17px; height:17px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; font-size:10px; font-weight:700; color:#fff; flex:none}
.rc-evidence p{font-size:11.5px; color:var(--ink); font-style:italic; margin:0 0 6px; line-height:1.4}
.rc-evidence p span{display:block; font-style:normal; color:var(--muted); font-size:10.5px; margin-top:2px}
@media (max-width:700px){.rc-grid{grid-template-columns:1fr}.reportcard{padding:18px 18px 16px}}

/* Three-tier ladder */
.ladder{display:grid; grid-template-columns:repeat(3,1fr); gap:0; margin-top:30px; text-align:left; align-items:stretch}
.ladder > div{padding:20px; opacity:0; transform:translateY(10px); border:1px solid rgba(255,255,255,.14); border-left:0}
.ladder > div:first-child{border-left:1px solid rgba(255,255,255,.14); border-radius:6px 0 0 6px}
.ladder > div:last-child{border-radius:0 6px 6px 0; background:rgba(184,146,63,.06)}
.ladder > div.on{animation:pop .5s ease forwards}
.lstep{font-family:'Bricolage Grotesque','Hanken Grotesk',system-ui,sans-serif; color:var(--gold-light); font-size:22px}
.ladder h4{color:#fff; font-size:15px; margin:6px 0 8px}
.ladder p{color:rgba(228,236,232,.72); font-size:13px; margin:0 0 10px}
.lprice{display:inline-block; font-size:11px; font-weight:700; letter-spacing:.4px; color:var(--gold-light); border-top:1px solid rgba(255,255,255,.18); padding-top:8px; width:100%}
@media (max-width:700px){.ladder{grid-template-columns:1fr}.ladder>div,.ladder>div:first-child,.ladder>div:last-child{border-radius:0;border-left:1px solid rgba(255,255,255,.14)}}

.scene.reportscene{padding-top:78px; padding-bottom:52px}
.scene.reportscene h2{margin-bottom:6px}
.scene.reportscene p.pop{margin-bottom:0}

/* Six-step method overview */
.sixgrid{display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-top:26px; text-align:left; max-width:640px; margin-left:auto; margin-right:auto}
.sixgrid div{opacity:0; transform:translateY(8px); padding:14px 14px 12px; border:1px solid rgba(255,255,255,.14); border-radius:6px}
.sixgrid div.on{animation:pop .4s ease forwards}
.sixgrid .n{font-family:'Bricolage Grotesque','Hanken Grotesk',system-ui,sans-serif; color:var(--gold-light); font-size:18px; display:block; margin-bottom:5px}
.sixgrid h4{color:#fff; font-size:13px; margin:0; line-height:1.35}
@media (max-width:700px){.sixgrid{grid-template-columns:1fr 1fr; gap:10px}}

/* Amnesty quote */
.amnesty{max-width:600px; margin:26px auto 0; text-align:left; border-left:3px solid var(--gold); padding:4px 0 4px 22px}
.amnesty p{font-style:italic; color:rgba(228,236,232,.9); font-size:17px; line-height:1.6; margin:0 0 10px}
.amnesty .who{font-style:normal; font-size:12.5px; color:var(--gold-light); text-transform:uppercase; letter-spacing:.6px}

/* Four areas */
.areas{max-width:560px; margin:24px auto 0; text-align:left}
.areas > div{display:flex; gap:14px; padding:10px 0; border-bottom:1px solid rgba(255,255,255,.14); opacity:0; transform:translateX(-6px)}
.areas > div.on{animation:slide .4s ease forwards}
.areas .n{font-family:'Bricolage Grotesque','Hanken Grotesk',system-ui,sans-serif; color:var(--gold-light); font-size:18px; flex:none; width:26px}
.areas h4{color:#fff; font-size:14.5px; margin:0 0 2px}
.areas p{color:rgba(228,236,232,.68); font-size:12.5px; margin:0; max-width:none}

/* Scoring criteria */
.scoregrid{display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:24px; text-align:left; max-width:660px; margin-left:auto; margin-right:auto}
.scoregrid div{opacity:0; transform:translateY(8px); background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.14); border-radius:6px; padding:14px 16px}
.scoregrid div.on{animation:pop .4s ease forwards}
.scoregrid h4{color:var(--gold-light); font-size:11.5px; letter-spacing:.6px; text-transform:uppercase; margin:0 0 8px}
.scoregrid p{color:rgba(228,236,232,.78); font-size:12.5px; line-height:1.5; margin:0}
.scoregrid p b{color:#fff}

/* Timing strip */
.timeline{position:relative; max-width:680px; margin:38px auto 0; padding-top:6px}
.timeline .track{position:absolute; top:5px; left:0; right:0; height:2px; background:rgba(255,255,255,.2)}
.tl-row{display:flex; justify-content:space-between}
.tl-item{flex:1; text-align:center; opacity:0; transform:translateY(6px); padding:0 4px}
.tl-item.on{animation:pop .4s ease forwards}
.tl-dot{display:block; width:9px; height:9px; border-radius:50%; background:var(--gold); margin:0 auto 12px}
.tl-item .d{font-size:11px; color:var(--gold-light); font-weight:700; margin-bottom:4px}
.tl-item .w{font-size:12px; color:rgba(228,236,232,.75); line-height:1.4}
@media (max-width:700px){.tl-item .w{font-size:10.5px}}

/* Presenting principle */
.principle{max-width:600px; margin:22px auto 0; text-align:left}
.principle p{font-size:15px; line-height:1.7}


/* The Sentinel chain: six links, drawn as a connected row. */
.chain{display:flex; align-items:stretch; gap:0; margin-top:28px; max-width:760px; margin-left:auto; margin-right:auto}
.chain > div{flex:1; min-width:0; opacity:0; transform:translateY(8px); text-align:center; padding:0 6px; position:relative}
.chain > div.on{animation:pop .45s ease forwards}
.chain > div:not(:last-child)::after{content:"\2192"; position:absolute; right:-2px; top:22px; color:rgba(184,146,63,.55); font-size:15px}
.chain .lnk{width:40px; height:40px; border-radius:50%; border:1.5px solid var(--gold); color:var(--gold-light); display:flex; align-items:center; justify-content:center; margin:0 auto 10px; font-family:'Bricolage Grotesque','Hanken Grotesk',system-ui,sans-serif; font-size:15px}
.chain h4{color:#fff; font-size:12.5px; margin:0 0 4px}
.chain p{color:rgba(228,236,232,.62); font-size:10.5px; margin:0; max-width:none; line-height:1.4}
@media (max-width:760px){
  .chain{flex-wrap:wrap; gap:16px 0}
  .chain > div{flex:0 0 30%}
  .chain > div:nth-child(3n)::after{content:""}
  .chain > div::after{display:none}
}

/* Sentinel's own accent for the tour: steel-teal instead of Soundings' gold. */
.tour{
  --gold: #3E6FA8;
  --gold-light: #6D97C7;
  --gold-text: #274A73;
  background: #0E1620;
}
.tour::after{
  background:radial-gradient(ellipse 90% 60% at 50% 0%, rgba(62,111,168,.12), transparent 60%);
}
.tour::before{
  background-image:
    linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
  background-size:36px 36px;
}
.tour .exline{color:rgba(109,151,199,.7)}
.tour .tp-free{background:rgba(62,111,168,.18); border-color:rgba(62,111,168,.4)}
.tour .ladder > div:last-child{background:rgba(62,111,168,.07)}
.tour .chain > div:not(:last-child)::after{color:rgba(109,151,199,.7)}

/* A brief scanning sweep behind the title only, a security tool's opening beat. */
.scene:first-child::before{
  content:""; position:absolute; inset:0; pointer-events:none; z-index:1;
  background:linear-gradient(100deg, transparent 42%, rgba(62,150,163,.10) 50%, transparent 58%);
  background-size:250% 100%; background-position:150% 0;
  animation:sentinel-sweep 2.6s ease-out 1;
}
@keyframes sentinel-sweep{0%{background-position:150% 0}100%{background-position:-50% 0}}
@media (prefers-reduced-motion:reduce){.scene:first-child::before{animation:none; display:none}}

/* Matrix and severity badge styles, shared with the live assessment's own CSS,
   needed here too since the report-preview scene reuses the same markup. */
.matrixwrap{overflow-x:auto; background:#fff; border:1px solid rgba(15,42,71,.12); border-radius:6px}
table.matrix{border-collapse:collapse; width:100%; font-size:11px}
table.matrix th,table.matrix td{padding:6px 8px; text-align:center; border-bottom:1px solid rgba(15,42,71,.1)}
table.matrix thead th{font-size:9px; letter-spacing:.4px; text-transform:uppercase; color:#5B6472; font-weight:700; border-bottom:2px solid #0F2A47}
table.matrix th.rowhead,table.matrix td.rowhead{text-align:left; font-weight:600; color:#0F2A47}
table.matrix td.divide,table.matrix th.divide{border-left:2px solid #0F2A47}
.matrix .cell{width:16px; height:16px; border-radius:3px; display:inline-flex; align-items:center; justify-content:center; font-size:10px; font-weight:700}
.matrix .cell.yes{background:#8A2A1C; color:#fff}
.matrix .cell.no{background:rgba(15,42,71,.1); color:transparent}
.matrix td.zonecell{text-align:left; padding-left:8px}
.sevbadge{display:inline-block; font-size:9.5px; font-weight:800; letter-spacing:.4px; text-transform:uppercase; padding:2px 7px; border-radius:3px}
.sevbadge.sev-EXPOSURE{background:#8A2A1C; color:#fff}
.sevbadge.sev-CONTROLLED{background:#1F5A3A; color:#fff}
.sevbadge.sev-OVERBUILT{background:#7A5A12; color:#fff}
.sevbadge.sev-LOW_STAKES{background:#5B6472; color:#fff}

/* Condensed architecture strip: where this framework sits in the whole system. */
.archstrip{max-width:600px; margin:26px auto 0; text-align:left}
.archstrip .aband{border:1px solid rgba(255,255,255,.16); border-radius:6px; padding:14px 18px; margin-bottom:10px; opacity:0; transform:translateY(8px)}
.archstrip .aband.on{animation:pop .45s ease forwards}
.archstrip .aband .role{font-size:10.5px; letter-spacing:.8px; text-transform:uppercase; color:rgba(228,236,232,.5); font-weight:700; margin:0 0 3px}
.archstrip .aband h4{color:#fff; font-size:15px; margin:0 0 4px}
.archstrip .aband p{color:rgba(228,236,232,.65); font-size:12.5px; margin:0; max-width:none}
.archstrip .aband.here{border-color:var(--gold); background:rgba(62,150,163,.08)}
.archstrip .aband.here .role{color:var(--gold-light)}
.archstrip .herelink{font-size:11px; color:var(--gold-light); font-weight:700; text-transform:uppercase; letter-spacing:.4px}
.arch-more{display:block; text-align:center; margin-top:18px; font-size:12.5px; color:rgba(228,236,232,.55)}
.arch-more a{color:var(--gold-light); border-bottom:1px solid rgba(255,255,255,.3)}

/* One CoE model, shown full-screen: name, description, trade-off, failure mode. */
.modelscene{max-width:680px; margin:0 auto}
.modelscene .mname{font-family:'Bricolage Grotesque','Hanken Grotesk',system-ui,sans-serif; font-size:34px; color:#fff; margin:0 0 4px}
.modelscene .mdesc{font-size:15.5px; color:rgba(228,236,232,.75); margin:0 0 22px}
.modelrow{text-align:left; border-top:1px solid rgba(255,255,255,.14); padding:16px 0; opacity:0; transform:translateY(8px)}
.modelrow.on{animation:pop .45s ease forwards}
.modelrow .mlabel{font-size:10.5px; letter-spacing:1px; text-transform:uppercase; color:var(--gold-light); font-weight:700; margin:0 0 6px}
.modelrow p{font-size:14px; color:rgba(228,236,232,.82); margin:0; max-width:none; line-height:1.6}

/* Keel's report preview: model badge, readiness bars, an excerpt line. */
.rc-model{display:inline-block; font-size:12px; font-weight:700; padding:4px 12px; border-radius:4px; background:#0F2A47; color:#fff; margin-bottom:10px}
.rc-ready{display:flex; flex-direction:column; gap:6px; margin:10px 0}
.rc-ready .rrow{display:flex; align-items:center; gap:8px; font-size:11.5px}
.rc-ready .rname{width:120px; flex:none; color:var(--muted)}
.rc-ready .rbar{flex:1; height:7px; background:rgba(15,42,71,.08); border-radius:4px; overflow:hidden}
.rc-ready .rbar i{display:block; height:100%; border-radius:4px}
.rc-ready .r-0{background:#8A2A1C}
.rc-ready .r-1{background:#B8923F}
.rc-ready .r-2{background:#1F5A3A}

/* The trust wheel: Trust at the centre, four pillars around it. */
.trustwheel{position:relative; width:680px; height:420px; margin:20px auto 0}
.trustwheel .hub{position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:120px; height:120px; border-radius:50%; border:2px solid var(--gold); display:flex; flex-direction:column; align-items:center; justify-content:center; background:rgba(62,111,168,.08); opacity:0}
.trustwheel .hub.on{animation:pop .5s ease forwards}
.trustwheel .hub b{color:#fff; font-family:'Bricolage Grotesque','Hanken Grotesk',system-ui,sans-serif; font-size:19px; letter-spacing:.03em}
.trustwheel .hub span{color:var(--gold-light); font-size:10px; text-transform:uppercase; letter-spacing:.5px; margin-top:3px}
.trustwheel .node{position:absolute; width:210px; padding:12px 14px; border:1px solid rgba(255,255,255,.16); border-radius:6px; opacity:0; transform:translateY(6px)}
.trustwheel .node.on{animation:pop .45s ease forwards}
.trustwheel .node h4{color:#fff; font-size:13.5px; margin:0 0 4px}
.trustwheel .node p{color:rgba(228,236,232,.68); font-size:11.5px; margin:0; max-width:none; line-height:1.4}
.trustwheel .n-top{top:0; left:50%; transform:translateX(-50%)}
.trustwheel .n-bottom{bottom:0; left:50%; transform:translateX(-50%)}
.trustwheel .n-left{left:0; top:50%; transform:translateY(-50%)}
.trustwheel .n-right{right:0; top:50%; transform:translateY(-50%)}
.trustwheel .force{position:absolute; font-size:10px; letter-spacing:.5px; text-transform:uppercase; color:rgba(228,236,232,.35); font-style:italic}
.trustwheel .f-tl{top:8%; left:2%} .trustwheel .f-tr{top:8%; right:2%}
.trustwheel .f-bl{bottom:8%; left:2%} .trustwheel .f-br{bottom:8%; right:2%}
@media (max-width:760px){
  .trustwheel{width:100%; height:auto; display:flex; flex-direction:column; gap:10px; align-items:center}
  .trustwheel .hub, .trustwheel .node{position:static; transform:none; width:88%}
  .trustwheel .hub{width:150px; aspect-ratio:1; height:auto; margin:0 auto}
  .trustwheel .force{display:none}
}

/* Minimum Human Standards: five numbered rows, not a grid, they read better as a list. */
.mhslist{max-width:680px; margin:20px auto 0; text-align:left}
.mhslist .mhsrow{display:flex; gap:14px; padding:12px 0; border-top:1px solid rgba(255,255,255,.12); opacity:0; transform:translateY(6px)}
.mhslist .mhsrow.on{animation:pop .45s ease forwards}
.mhslist .mhsrow:first-child{border-top:0}
.mhslist .mhsnum{flex:none; width:30px; height:30px; border-radius:50%; border:1.5px solid var(--gold); color:var(--gold-light); display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:700}
.mhslist p{color:rgba(228,236,232,.78); font-size:13px; margin:0; max-width:none; line-height:1.5; padding-top:3px}

/* Leading vs lagging indicators: two columns. */
.indicators{display:grid; grid-template-columns:1fr 1fr; gap:20px; max-width:760px; margin:20px auto 0; text-align:left}
.indicators .col{opacity:0; transform:translateY(8px)}
.indicators .col.on{animation:pop .5s ease forwards}
.indicators .col h4{color:var(--gold-light); font-size:11px; letter-spacing:.6px; text-transform:uppercase; margin:0 0 10px}
.indicators .col ul{list-style:none; padding:0; margin:0}
.indicators .col li{color:rgba(228,236,232,.78); font-size:12.5px; padding:6px 0; border-top:1px solid rgba(255,255,255,.1)}
.indicators .col li:first-child{border-top:0}
@media (max-width:700px){.indicators{grid-template-columns:1fr}}

/* Without/with HALO contrast. */
.contrast{display:grid; grid-template-columns:1fr 1fr; gap:16px; max-width:760px; margin:18px auto 0; text-align:left}
.contrast > div{padding:14px 16px; border-radius:6px; opacity:0; transform:translateY(6px)}
.contrast > div.on{animation:pop .45s ease forwards}
.contrast .without{background:rgba(138,42,28,.14); border:1px solid rgba(138,42,28,.35)}
.contrast .with{background:rgba(31,90,58,.14); border:1px solid rgba(31,90,58,.35)}
.contrast p.lbl{font-size:10px; letter-spacing:.6px; text-transform:uppercase; font-weight:700; margin:0 0 6px}
.contrast .without p.lbl{color:#E08A78}
.contrast .with p.lbl{color:#7FC9A0}
.contrast p.body{color:rgba(228,236,232,.82); font-size:12.5px; margin:0; max-width:none; line-height:1.5}
@media (max-width:700px){.contrast{grid-template-columns:1fr}}

/* a3 skin */
.tour h1,.tour h2,.tour h3,.scene h2,.scene h3{font-family:'Bricolage Grotesque','Hanken Grotesk',system-ui,sans-serif}
.tour,.scene p,.tour button{font-family:'Hanken Grotesk',system-ui,sans-serif}

:root{--navy:#0B1714;--navy2:#12211d;--steel:#aec2bb;--gold:#FFB03A;--gold-light:#FFC56B;--gold-text:#FFB03A;--ink:#E4ECE8}
.tour,.scene{background-color:#0B1714}