/* WEB-02 Explore Platform R01 */

.explore-hero{
  background:
    radial-gradient(circle at 78% 26%,rgba(35,126,231,.20),transparent 24%),
    linear-gradient(135deg,#04182e 0%,#06213c 58%,#0b385d 100%);
  color:#fff;
  padding:62px 0 54px;
}
.explore-hero-grid{display:grid;grid-template-columns:1.08fr .92fr;gap:48px;align-items:center}
.explore-hero h1{font-family:Georgia,"Times New Roman",serif;font-size:clamp(3.2rem,5.2vw,5.25rem);line-height:.92;letter-spacing:-.035em;margin:12px 0 20px;max-width:760px}
.explore-hero h1 span{color:var(--gold)}
.explore-hero-copy>p{max-width:720px;color:#d8e5ef;font-size:1.03rem;line-height:1.65}
.explore-outline{background:transparent;color:#fff;border-color:#b4c6d4}

.loop-panel{background:rgba(255,255,255,.97);color:var(--ink);border-radius:20px;padding:24px;box-shadow:0 22px 50px rgba(0,0,0,.24);border:1px solid rgba(255,255,255,.55)}
.loop-kicker{font-size:.72rem;font-weight:900;letter-spacing:.12em;color:#47708f;margin-bottom:15px}
.loop-steps{list-style:none;padding:0;margin:0;display:grid;gap:10px}
.loop-steps li{display:grid;grid-template-columns:38px 1fr;gap:11px;align-items:start;padding:10px;border:1px solid #e1eaf1;border-radius:11px;background:#fff}
.loop-steps li>span{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;background:#06213c;color:#fff;font-weight:900;font-size:.78rem}
.loop-steps strong{display:block;font-family:Georgia,serif;font-size:1rem;margin-bottom:3px}
.loop-steps small{display:block;color:var(--muted);line-height:1.35}
.canonical-chain{margin:16px 0 0!important;padding:13px 14px;border-radius:10px;background:#eef5fa;color:#31536f!important;font-size:.72rem!important;line-height:1.5!important;font-weight:700}

.explore-section{padding:62px 0}
.section-heading{display:grid;grid-template-columns:1fr .75fr;gap:48px;align-items:end;margin-bottom:28px}
.section-heading h2,.sequence-copy h2,.report-grid h2,.boundary-grid h2{font-family:Georgia,"Times New Roman",serif;font-size:clamp(2.2rem,3.6vw,3.45rem);line-height:1.02;margin:7px 0 0;letter-spacing:-.025em}
.section-heading>p{margin:0;color:var(--muted);line-height:1.65}
.section-kicker{display:block;color:#1b6aa6;font-size:.72rem;font-weight:900;letter-spacing:.12em}

.ecosystem-section{background:#fff}
.system-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.system-card{position:relative;border:1px solid var(--line);border-radius:16px;padding:22px 20px 20px;background:#fff;box-shadow:0 8px 25px rgba(6,33,60,.06);overflow:hidden}
.system-card:before{content:"";position:absolute;left:0;right:0;top:0;height:5px;background:#2589f1}
.system-trace:before{background:#875ad8}.system-report:before{background:#1e9ded}.system-pl:before{background:#d98a12}
.system-icon{width:43px;height:43px;border-radius:12px;display:grid;place-items:center;background:#eaf4ff;color:#1677cf;font-size:1.4rem;font-weight:900;margin-bottom:14px}
.system-trace .system-icon{background:#f1ebff;color:#7d4ed0}.system-report .system-icon{background:#e9f8ff;color:#1187b4}.system-pl .system-icon{background:#fff5dc;color:#b87308}
.system-label{font-size:.61rem;font-weight:900;letter-spacing:.12em;color:#718698}
.system-card h3{font-family:Georgia,serif;font-size:1.45rem;margin:5px 0 1px}
.system-card>strong{display:block;font-size:.83rem;margin-bottom:10px}
.system-card p{font-size:.82rem;line-height:1.55;color:var(--muted);min-height:126px}
.system-card ul{padding-left:17px;margin:14px 0 18px;color:#36546d;font-size:.76rem;line-height:1.55}
.system-card>a,.text-link,.role-entry a{font-weight:900;color:#135c96;text-decoration:none;font-size:.8rem}

.sequence-section{background:#06213c;color:#fff}
.sequence-layout{display:grid;grid-template-columns:320px 1fr;gap:42px;align-items:start}
.sequence-copy p{color:#d4e0e9;line-height:1.65}
.sequence-copy .section-kicker{color:var(--gold2)}
.sequence-copy .text-link{color:var(--gold2)}
.sequence-map{display:grid;grid-template-columns:repeat(6,1fr);gap:9px}
.sequence-map>div{position:relative;background:#0a2b49;border:1px solid rgba(255,255,255,.12);border-radius:12px;padding:14px 12px;min-height:126px}
.sequence-map b{display:block;color:var(--gold2);font-size:.65rem;margin-bottom:14px}
.sequence-map strong{display:block;font-family:Georgia,serif;font-size:.86rem;margin-bottom:6px}
.sequence-map span{display:block;color:#c7d7e4;font-size:.66rem;line-height:1.35}

.roles-section{background:#f8fbfd}
.roles-heading{margin-bottom:24px}
.role-entry-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:9px}
.role-entry{border:1px solid #d8e5ef;background:#fff;border-radius:13px;padding:16px 13px;min-height:230px;display:flex;flex-direction:column}
.role-entry>span{font-size:1.45rem;color:#277fd5}
.role-entry:nth-child(2)>span{color:#15966c}.role-entry:nth-child(3)>span{color:#7c4bd1}.role-entry:nth-child(4)>span{color:#777639}.role-entry:nth-child(5)>span{color:#d9504e}.role-entry:nth-child(6)>span{color:#d77610}.role-entry:nth-child(7)>span{color:#0da2bd}
.role-entry h3{font-family:Georgia,serif;font-size:1rem;margin:10px 0 6px}
.role-entry p{font-size:.72rem;line-height:1.48;color:var(--muted);margin:0 0 14px}
.role-entry a{margin-top:auto;font-size:.68rem}

.report-section{background:#fff}
.report-grid{display:grid;grid-template-columns:.78fr 1.22fr;gap:50px;align-items:center}
.report-grid>div:first-child>p{color:var(--muted);line-height:1.65;margin-bottom:22px}
.report-preview{display:grid;grid-template-columns:1fr 1fr;border:1px solid var(--line);border-radius:18px;overflow:hidden;box-shadow:0 12px 35px rgba(6,33,60,.07)}
.report-preview>div{display:grid;grid-template-columns:36px 1fr;column-gap:10px;padding:18px;border-right:1px solid var(--line);border-bottom:1px solid var(--line);background:#fff}
.report-preview>div:nth-child(even){border-right:0}.report-preview>div:nth-last-child(-n+2){border-bottom:0}
.report-preview span{grid-row:1/3;width:31px;height:31px;border-radius:50%;display:grid;place-items:center;background:#06213c;color:#fff;font-size:.65rem;font-weight:900}
.report-preview strong{font-size:.82rem}
.report-preview small{color:var(--muted);font-size:.71rem;margin-top:4px;line-height:1.35}

.explore-boundary{background:linear-gradient(135deg,#fff3c9,#f7fbfd);border-top:1px solid #ead99b;padding:48px 0}
.boundary-grid{display:grid;grid-template-columns:1fr auto;gap:40px;align-items:center}
.boundary-grid h2{font-size:2.35rem}
.boundary-grid p{color:#5c5960;line-height:1.6;max-width:800px}
.boundary-actions{display:grid;gap:10px;min-width:245px}
.boundary-signin{background:#fff;color:#06213c}

@media(max-width:1100px){
  .explore-hero-grid{grid-template-columns:1fr}
  .loop-panel{max-width:850px}
  .system-grid{grid-template-columns:1fr 1fr}
  .role-entry-grid{grid-template-columns:repeat(4,1fr)}
  .sequence-layout{grid-template-columns:1fr}
  .sequence-map{grid-template-columns:repeat(4,1fr)}
}
@media(max-width:820px){
  .section-heading,.report-grid,.boundary-grid{grid-template-columns:1fr;gap:22px}
  .role-entry-grid{grid-template-columns:1fr 1fr}
  .sequence-map{grid-template-columns:1fr 1fr}
  .boundary-actions{display:flex;flex-wrap:wrap}
}
@media(max-width:560px){
  .explore-hero{padding:48px 0 40px}
  .explore-hero h1{font-size:3rem}
  .loop-panel{padding:16px}
  .system-grid,.role-entry-grid,.sequence-map,.report-preview{grid-template-columns:1fr}
  .system-card p{min-height:0}
  .report-preview>div{border-right:0!important;border-bottom:1px solid var(--line)!important}
  .report-preview>div:last-child{border-bottom:0!important}
  .explore-section{padding:46px 0}
  .boundary-actions{display:grid}
  .boundary-actions .btn{width:100%}
}


/* WEB-02 R02 interactive cognition features */
.loop-head{display:flex;justify-content:space-between;gap:18px;align-items:flex-start;margin-bottom:14px}
.loop-head>div>small{display:block;color:var(--muted);font-size:.68rem;margin-top:3px}
.loop-demo-link{font-size:.66rem;font-weight:900;color:#135c96;text-decoration:none;white-space:nowrap}
.loop-stage-list{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.loop-stage{appearance:none;border:1px solid #dce7ef;background:#fff;border-radius:10px;padding:9px 10px;display:grid;grid-template-columns:30px 1fr;gap:9px;text-align:left;color:var(--ink);cursor:pointer;transition:transform .16s ease,border-color .16s ease,box-shadow .16s ease}
.loop-stage:last-child{grid-column:1/-1}
.loop-stage:hover{transform:translateY(-1px);border-color:#abc4d8;box-shadow:0 5px 13px rgba(6,33,60,.06)}
.loop-stage:focus-visible{outline:3px solid var(--gold);outline-offset:2px}
.loop-stage>span{width:27px;height:27px;border-radius:50%;display:grid;place-items:center;background:#eaf2f8;color:#315b7d;font-size:.66rem;font-weight:900}
.loop-stage strong{display:block;font-family:Georgia,serif;font-size:.83rem;line-height:1.05}
.loop-stage small{display:block;font-size:.58rem;line-height:1.25;color:#6d8395;margin-top:3px}
.loop-stage.is-active{background:#06213c;color:#fff;border-color:#06213c;box-shadow:0 8px 18px rgba(6,33,60,.15)}
.loop-stage.is-active>span{background:var(--gold);color:#2b220b}
.loop-stage.is-active small{color:#d5e3ed}
.loop-stage-detail{margin-top:11px;background:#eef5fa;border-radius:11px;padding:13px 14px}
.loop-stage-detail>span{display:block;font-size:.58rem;font-weight:900;letter-spacing:.11em;color:#2775ad;margin-bottom:4px}
.loop-stage-detail>strong{display:block;font-family:Georgia,serif;font-size:.92rem;margin-bottom:4px}
.loop-stage-detail>p{margin:0;color:#526d82;font-size:.67rem;line-height:1.4}

.grounding-section{background:linear-gradient(180deg,#f9fbfd,#f2f8fb);border-top:1px solid #e1ebf2;border-bottom:1px solid #e1ebf2}
.grounding-layout{display:grid;grid-template-columns:.8fr 1.2fr;gap:50px;align-items:center}
.grounding-copy h2,.ladder-copy h2,.demo-heading h2{font-family:Georgia,"Times New Roman",serif;font-size:clamp(2.3rem,3.8vw,3.65rem);line-height:1.02;letter-spacing:-.025em;margin:8px 0 16px}
.grounding-copy>p,.ladder-copy>p{color:var(--muted);line-height:1.65;font-size:.98rem}
.principle-callout{margin-top:20px;border-left:4px solid var(--gold);padding:14px 16px;background:#fff7dd;border-radius:0 10px 10px 0;color:#5b4c1f;font-size:.78rem;line-height:1.5}
.principle-callout strong{display:block;color:#3e3211;margin-bottom:3px}
.grounding-lab{border:1px solid #d7e4ed;background:#fff;border-radius:18px;padding:18px;box-shadow:0 14px 35px rgba(6,33,60,.08)}
.ground-tabs{display:grid;grid-template-columns:repeat(4,1fr);gap:7px;margin-bottom:14px}
.ground-tab{border:1px solid #d7e4ed;background:#f8fbfd;border-radius:9px;padding:10px 8px;font-weight:900;font-size:.67rem;color:#46657d;cursor:pointer}
.ground-tab.is-active{background:#06213c;color:#fff;border-color:#06213c}
.ground-panel{border:1px solid #e2ebf1;border-radius:14px;padding:20px;background:linear-gradient(135deg,#fff,#f6fafc)}
.ground-panel-label{font-size:.61rem;letter-spacing:.12em;font-weight:900;color:#1d75af;margin-bottom:7px}
.ground-panel h3{font-family:Georgia,serif;font-size:1.35rem;margin:0 0 8px}
.ground-panel>p{color:var(--muted);font-size:.85rem;line-height:1.55;margin:0}
.ground-prompts{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:15px}
.ground-prompts span{display:flex;align-items:center;min-height:56px;border-radius:9px;background:#eef5fa;padding:10px;color:#375b75;font-size:.68rem;line-height:1.3;font-weight:700}
.ground-output{margin-top:12px;border-radius:11px;background:#fff2c9;padding:13px 15px;border:1px solid #f1d57a}
.ground-output span{display:block;font-size:.57rem;letter-spacing:.1em;font-weight:900;color:#876319;margin-bottom:3px}
.ground-output strong{font-size:.79rem;color:#4c3c17}

.ladder-section{background:#fff}
.ladder-layout{display:grid;grid-template-columns:.82fr 1.18fr;gap:48px;align-items:center}
.ladder-principle{margin-top:20px;border:1px solid #d5e4ed;border-radius:13px;padding:16px;background:#f7fbfd}
.ladder-principle strong{display:block;font-family:Georgia,serif;font-size:1.05rem;margin-bottom:4px}
.ladder-principle span{display:block;color:var(--muted);font-size:.78rem;line-height:1.45}
.question-ladder{display:grid;grid-template-columns:180px 1fr;border:1px solid #d9e5ee;border-radius:18px;overflow:hidden;box-shadow:0 14px 36px rgba(6,33,60,.08)}
.ladder-rungs{background:#06213c;padding:14px;display:grid;gap:7px}
.ladder-rung{border:1px solid rgba(255,255,255,.13);background:#0a2b49;color:#d9e6ef;border-radius:9px;padding:10px 11px;text-align:left;font-weight:900;font-size:.67rem;letter-spacing:.04em;cursor:pointer}
.ladder-rung span{display:inline-block;color:var(--gold2);font-size:.55rem;margin-right:8px}
.ladder-rung.is-active{background:var(--gold);color:#2b220b;border-color:var(--gold)}
.ladder-rung.is-active span{color:#5a4311}
.ladder-preview{padding:28px 27px;background:linear-gradient(145deg,#fff,#f7fbfd);min-height:340px;display:flex;flex-direction:column;justify-content:center}
.ladder-preview>span{font-size:.61rem;font-weight:900;letter-spacing:.12em;color:#2e75aa}
.ladder-preview h3{font-family:Georgia,serif;font-size:1.65rem;line-height:1.2;margin:11px 0 12px}
.ladder-preview>p{color:var(--muted);line-height:1.55;font-size:.86rem}
.ladder-meta{border-top:1px solid #dce7ef;padding-top:14px;margin-top:8px}
.ladder-meta span{display:block;font-size:.56rem;letter-spacing:.1em;font-weight:900;color:#7b8f9f;margin-bottom:3px}
.ladder-meta strong{font-size:.76rem;color:#35536b}

.demo-section{background:linear-gradient(180deg,#f6f9fc,#eef5fa);border-top:1px solid #dce7ef;border-bottom:1px solid #dce7ef}
.demo-heading{display:grid;grid-template-columns:1fr .7fr;gap:46px;align-items:end;margin-bottom:26px}
.demo-heading>p{margin:0;color:var(--muted);line-height:1.6}
.demo-shell{border:1px solid #cfdee9;background:#fff;border-radius:20px;overflow:hidden;box-shadow:0 16px 42px rgba(6,33,60,.08)}
.demo-progress{display:grid;grid-template-columns:repeat(7,1fr);background:#06213c;padding:13px 14px;gap:5px}
.demo-dot{border:0;background:transparent;color:#b8cbd9;display:grid;justify-items:center;gap:4px;cursor:pointer;font-weight:800;font-size:.58rem}
.demo-dot span{width:27px;height:27px;border-radius:50%;display:grid;place-items:center;background:#17415f;color:#fff;border:1px solid rgba(255,255,255,.15)}
.demo-dot.is-active{color:#fff}
.demo-dot.is-active span{background:var(--gold);color:#2a220e;border-color:var(--gold)}
.demo-stage{display:grid;grid-template-columns:1fr 300px}
.demo-screen{padding:28px 30px}
.demo-screen-top{display:flex;justify-content:space-between;gap:14px;align-items:center}
.demo-screen-top>span:first-child{font-size:.64rem;font-weight:900;letter-spacing:.12em;color:#1e6ca3}
.demo-badge{font-size:.56rem;font-weight:900;background:#eef5fa;color:#56748a;border-radius:999px;padding:6px 9px}
.demo-screen h3{font-family:Georgia,serif;font-size:1.65rem;line-height:1.18;margin:13px 0 10px}
.demo-screen>p{color:var(--muted);line-height:1.6;font-size:.9rem}
.demo-evidence{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;margin-top:20px}
.demo-evidence>div{border:1px solid #dde8ef;border-radius:10px;padding:13px;background:#f9fbfd}
.demo-evidence span{display:block;font-size:.55rem;letter-spacing:.08em;font-weight:900;color:#748a9a;margin-bottom:5px}
.demo-evidence strong{font-size:.74rem;line-height:1.35}
.demo-next{background:#f8f1d5;padding:27px 22px;display:flex;flex-direction:column;justify-content:center;border-left:1px solid #eadba3}
.demo-next>span{font-size:.56rem;letter-spacing:.11em;font-weight:900;color:#856518}
.demo-next>strong{font-family:Georgia,serif;font-size:1.2rem;line-height:1.2;margin:8px 0}
.demo-next>p{font-size:.76rem;line-height:1.5;color:#645b3a}
.demo-controls{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:14px}
.demo-control{border:1px solid #bba34f;background:#fff;border-radius:8px;padding:10px;font-weight:900;font-size:.65rem;cursor:pointer;color:#584817}
.demo-control:disabled{opacity:.35;cursor:not-allowed}
.demo-next-button{background:#06213c;color:#fff;border-color:#06213c}

@media(max-width:1100px){
  .loop-stage-list{grid-template-columns:1fr}
  .loop-stage:last-child{grid-column:auto}
  .grounding-layout,.ladder-layout{grid-template-columns:1fr}
  .role-entry-grid{grid-template-columns:repeat(4,1fr)}
}
@media(max-width:820px){
  .ground-tabs{grid-template-columns:1fr 1fr}
  .ground-prompts{grid-template-columns:1fr}
  .question-ladder{grid-template-columns:1fr}
  .ladder-rungs{grid-template-columns:repeat(4,1fr)}
  .demo-heading,.demo-stage{grid-template-columns:1fr}
  .demo-next{border-left:0;border-top:1px solid #eadba3}
  .demo-evidence{grid-template-columns:1fr}
  .demo-progress{overflow-x:auto;grid-template-columns:repeat(7,minmax(72px,1fr))}
}
@media(max-width:560px){
  .loop-head{display:grid}
  .ground-tabs{grid-template-columns:1fr}
  .ladder-rungs{grid-template-columns:1fr 1fr}
  .ladder-preview{min-height:0;padding:22px 18px}
  .demo-screen{padding:22px 18px}
  .demo-controls{grid-template-columns:1fr}
}


/* WEB-02 R03 canonical architecture views */
.sequence-header{display:grid;grid-template-columns:1fr auto;gap:36px;align-items:end;margin-bottom:28px}
.sequence-header .sequence-copy{max-width:720px}
.architecture-toggle{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;background:#0a2b49;border:1px solid rgba(255,255,255,.12);padding:6px;border-radius:12px;min-width:430px}
.architecture-tab{border:0;border-radius:8px;background:transparent;color:#c9d9e5;padding:10px 12px;font-weight:900;font-size:.66rem;cursor:pointer}
.architecture-tab.is-active{background:var(--gold);color:#2b220b}
.architecture-tab:focus-visible{outline:3px solid var(--gold2);outline-offset:2px}
.architecture-view{margin-top:10px}
.architecture-loop{display:grid;grid-template-columns:repeat(13,auto);gap:8px;align-items:stretch}
.architecture-loop>div{min-width:0;background:#0a2b49;border:1px solid rgba(255,255,255,.13);border-radius:12px;padding:15px 13px;display:flex;flex-direction:column;justify-content:center;min-height:132px}
.architecture-loop>div:first-child{border-color:#f1bf41;box-shadow:inset 0 3px 0 #f1bf41}
.architecture-loop>div:nth-of-type(2){box-shadow:inset 0 3px 0 #5aa4e8}
.architecture-loop>div:nth-of-type(3){box-shadow:inset 0 3px 0 #7e66d6}
.architecture-loop>div:nth-of-type(4){box-shadow:inset 0 3px 0 #1ca9a2}
.architecture-loop>div:nth-of-type(5){box-shadow:inset 0 3px 0 #49a86f}
.architecture-loop>div:nth-of-type(6){box-shadow:inset 0 3px 0 #c9902e}
.architecture-loop>div:nth-of-type(7){box-shadow:inset 0 3px 0 #e26b5a}
.architecture-loop span{font-size:.58rem;font-weight:900;color:var(--gold2);letter-spacing:.08em}
.architecture-loop strong{font-family:Georgia,serif;font-size:.84rem;margin:10px 0 5px}
.architecture-loop small{color:#c5d5e1;font-size:.6rem;line-height:1.35}
.architecture-loop i{display:grid;place-items:center;color:var(--gold2);font-style:normal;font-weight:900;font-size:1rem}
.architecture-caption{margin-top:15px;padding:13px 16px;border-left:4px solid var(--gold);background:#0a2b49;border-radius:0 10px 10px 0;color:#c9d8e3;font-size:.72rem;line-height:1.5}
.architecture-caption strong{color:#fff}

.phase-pathway{display:grid;grid-template-columns:1.05fr auto 1.15fr auto 1.15fr auto 1fr auto 1.1fr;gap:8px;align-items:stretch}
.phase{background:#0a2b49;border:1px solid rgba(255,255,255,.13);border-radius:14px;padding:15px 14px}
.phase-ground{box-shadow:inset 0 4px 0 var(--gold)}
.phase-deconstruct{box-shadow:inset 0 4px 0 #5aa4e8}
.phase-design{box-shadow:inset 0 4px 0 #7e66d6}
.phase-reveal{box-shadow:inset 0 4px 0 #20a2a7}
.phase-develop{box-shadow:inset 0 4px 0 #58a36b}
.phase-head{display:grid;grid-template-columns:28px 1fr;gap:8px;align-items:center;padding-bottom:11px;border-bottom:1px solid rgba(255,255,255,.1)}
.phase-head>span{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;background:#173d5c;color:var(--gold2);font-size:.58rem;font-weight:900}
.phase-head strong{display:block;font-size:.7rem;letter-spacing:.09em}
.phase-head small{display:block;color:#b9ccd9;font-size:.56rem;margin-top:2px}
.phase ol{list-style:none;padding:0;margin:12px 0 0;display:grid;gap:6px;counter-reset:phaseItem}
.phase li{position:relative;padding-left:14px;color:#d6e2ea;font-size:.64rem;line-height:1.3}
.phase li:before{content:"";position:absolute;left:0;top:.45em;width:6px;height:6px;border-radius:50%;background:var(--gold)}
.phase-arrow{display:grid;place-items:center;color:var(--gold2);font-weight:900}

.learner-journey{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.learner-journey article{display:grid;grid-template-columns:42px 1fr;gap:12px;background:#0a2b49;border:1px solid rgba(255,255,255,.13);border-radius:13px;padding:15px}
.learner-journey article:last-child{grid-column:1/-1}
.learner-journey article>span{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;background:var(--gold);color:#2b220b;font-weight:900}
.learner-journey strong{font-family:Georgia,serif;font-size:.92rem}
.learner-journey p{margin:5px 0 0;color:#c7d7e3;font-size:.67rem;line-height:1.45}

.design-readiness{margin-top:12px;border:1px solid #d7e4ed;border-radius:11px;padding:13px 14px;background:#f7fafc}
.readiness-head{display:flex;justify-content:space-between;gap:12px;align-items:center;margin-bottom:10px}
.readiness-head>span{font-size:.57rem;letter-spacing:.1em;font-weight:900;color:#668097}
.readiness-head>strong{font-size:.67rem;color:#805e12}
.readiness-checks{display:grid;grid-template-columns:1fr 1fr;gap:7px}
.readiness-item{display:flex;align-items:center;gap:7px;border:1px solid #dce6ed;border-radius:8px;padding:8px 9px;background:#fff;color:#6d8291;font-size:.64rem;font-weight:700}
.readiness-item i{font-style:normal;width:20px;height:20px;border-radius:50%;display:grid;place-items:center;background:#edf2f5;color:#8496a3;font-size:.61rem}
.readiness-item.is-complete{border-color:#b8dec9;background:#f4fbf7;color:#32684a}
.readiness-item.is-complete i{background:#2f9e64;color:#fff}
.design-readiness>p{margin:9px 0 0;color:#667c8d;font-size:.64rem;line-height:1.4}

.ladder-alignments{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:16px}
.ladder-alignments>div{border:1px solid #dbe6ee;border-radius:9px;padding:10px;background:#fff}
.ladder-alignments span{display:block;font-size:.5rem;font-weight:900;letter-spacing:.08em;color:#788d9d;margin-bottom:4px}
.ladder-alignments strong{display:block;font-size:.66rem;line-height:1.3;color:#36566e}

.demo-intro-side{display:grid;gap:12px}
.demo-intro-side>p{margin:0;color:var(--muted);line-height:1.6}
.demo-mode{border-left:4px solid var(--gold);padding:10px 12px;background:#fff8df;border-radius:0 8px 8px 0}
.demo-mode span{display:block;font-size:.52rem;letter-spacing:.09em;font-weight:900;color:#806018;margin-bottom:3px}
.demo-mode strong{font-size:.71rem;color:#493a17}

@media(max-width:1180px){
  .sequence-header{grid-template-columns:1fr}
  .architecture-toggle{min-width:0;max-width:620px}
  .architecture-loop{grid-template-columns:repeat(7,1fr);gap:9px}
  .architecture-loop i{display:none}
  .phase-pathway{grid-template-columns:1fr 1fr;gap:10px}
  .phase-arrow{display:none}
  .phase-develop{grid-column:1/-1}
}
@media(max-width:820px){
  .architecture-toggle{grid-template-columns:1fr}
  .architecture-loop,.phase-pathway,.learner-journey{grid-template-columns:1fr}
  .learner-journey article:last-child,.phase-develop{grid-column:auto}
  .readiness-checks,.ladder-alignments{grid-template-columns:1fr}
}

.demo-mode{display:flex;justify-content:space-between;gap:14px;align-items:center}
.demo-mode>div{min-width:0}
.demo-mode button{border:1px solid #b9922e;background:#fff;color:#5a4512;border-radius:8px;padding:8px 10px;font-weight:900;font-size:.61rem;cursor:pointer;white-space:nowrap}
.demo-mode button[aria-pressed="true"]{background:#06213c;color:#fff;border-color:#06213c}
@media(max-width:560px){
  .demo-mode{display:grid}
  .demo-mode button{width:100%}
}