:root{--ink:#202221;--muted:#626761;--paper:#f6f5f1;--white:#fff;--line:#dedfd8;--orange:#f58a16;--pale:#fff3e4;--green:#355d49;--radius:12px}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:24px}body{margin:0;background:var(--paper);color:var(--ink);font:15px/1.6 'DM Sans',Arial,sans-serif}button,a,input{font:inherit;-webkit-tap-highlight-color:transparent}button{cursor:pointer}a{color:inherit}button:focus-visible,a:focus-visible,summary:focus-visible{outline:3px solid #a64d08;outline-offset:4px}button:disabled{cursor:default;opacity:.4}[hidden]{display:none!important}h1,h2,h3,p{margin-top:0}
.wrap{width:min(1540px,calc(100% - 96px));margin-inline:auto}.top{background:#1c1e1d;color:#fff}.top-inner{min-height:80px;display:flex;align-items:center;gap:36px}.brand{display:flex;align-items:center;gap:18px;text-decoration:none}.brand strong{font:700 36px/1 'Barlow Condensed',sans-serif;letter-spacing:-.8px}.brand strong span{color:var(--orange)}.brand small{padding-left:18px;border-left:1px solid #51534f;color:#dbded8;font-size:10px;line-height:1.55;letter-spacing:.09em}.top nav{display:flex;gap:28px;margin-left:auto;font-size:13px}.top nav a{color:#d1d4cd;text-decoration:none}.top nav a:hover{color:#fff}
.button{display:inline-flex;align-items:center;justify-content:center;gap:20px;min-height:46px;padding:11px 20px;border:1px solid transparent;border-radius:6px;background:var(--orange);color:#20201c;font-size:13px;font-weight:700;text-decoration:none;transition:background .15s}.button:hover{background:#ffa037}.button.secondary{background:#fff;border-color:#d5d7d0}.button.secondary:hover,.button.subtle:hover{background:#eeeee7}.button.subtle{background:transparent;border-color:var(--line)}.arrow{font-size:20px;line-height:1}
.intro{display:grid;grid-template-columns:1.4fr 1fr;gap:64px;align-items:center;padding:46px 0 38px}.eyebrow{color:#60665c;font-size:10px;font-weight:700;letter-spacing:.16em;margin:0 0 15px}h1{font:600 clamp(48px,4.6vw,70px)/1.02 'Barlow Condensed',sans-serif;letter-spacing:-.02em;margin:0 0 17px}h1 span{color:#ac5008}.intro-copy{max-width:480px;font-size:14px;color:var(--muted);line-height:1.75;margin:0}.intro-actions{display:flex;align-items:center;gap:26px;margin-top:23px}.intro-start{min-width:186px;justify-content:space-between}.intro-reference{font-size:12px;text-decoration:none;color:#535950}.intro-reference span{margin-left:9px}.intro-reference:hover{text-decoration:underline;text-underline-offset:4px}
.example-company{padding:26px 28px;background:#eeeee7;border-radius:10px}.example-company .eyebrow{font-size:9px;margin-bottom:13px}.company-heading{display:flex;gap:12px;align-items:center;justify-content:space-between}.company-heading h2{font:600 35px/1.1 'Barlow Condensed',sans-serif;margin:0}.example-label{font-size:10px;padding:4px 8px;border:1px solid #cdd1c5;border-radius:4px;white-space:nowrap;color:#5c6456}.company-description{font-size:12px;color:var(--muted);margin:9px 0 20px}.people{display:grid;grid-template-columns:1fr 1fr 1fr;gap:16px;padding-top:19px;border-top:1px solid #d7d9ce}.person{display:flex;flex-direction:column;gap:9px}.avatar{width:36px;height:36px;display:grid;place-items:center;border-radius:50%;background:#dce3d5;color:#3d5036;font-size:11px;font-weight:700;flex-shrink:0}.person:nth-child(2) .avatar{background:#f0dec9;color:#75491f}.person:nth-child(3) .avatar{background:#dce3e7;color:#465e70}.person b{display:block;font-size:11px;line-height:1.5}.person small{font-size:10px;color:var(--muted)}
#walkthrough{border-top:1px solid var(--line);padding-top:25px}.tour-top{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:20px}.tour-label{font-size:18px;font-weight:600;margin:0;letter-spacing:-.03em}.tour-label span{margin-left:18px;color:var(--muted);font-size:12px;font-weight:400;letter-spacing:0}.progress-group{display:flex;align-items:center;gap:13px;color:var(--muted);font-size:11px}.progress-track{width:90px;height:4px;border-radius:4px;background:#dedfd6;overflow:hidden}.progress-fill{height:100%;width:0;background:var(--green);transition:width .2s}.text-button{background:none;border:0;color:#555e50;min-height:36px;padding:4px;font-size:11px;text-decoration:underline;text-underline-offset:4px}
.step-nav{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:5px;margin-bottom:20px}.step-tab{display:flex;align-items:center;gap:9px;padding:9px 10px;min-height:43px;background:transparent;border:1px solid transparent;border-radius:6px;color:#666c61;text-align:left;font-size:11px;white-space:nowrap}.step-tab:hover{background:#eaece3;color:var(--ink)}.step-tab[aria-current=step]{background:#252924;color:#fff}.step-number{display:grid;place-items:center;flex-shrink:0;width:23px;height:23px;border-radius:50%;background:#e8eae1;color:#59634e;font-size:10px}.step-tab[aria-current=step] .step-number{background:var(--orange);color:#222;font-weight:700}.step-tab.complete:not([aria-current]) .step-number{background:#dce8d8;color:#355d49}
.tour-card{display:grid;grid-template-columns:310px minmax(0,1fr);background:#fff;border:1px solid #d6d9cf;border-radius:var(--radius);overflow:hidden}.coach{display:flex;flex-direction:column;padding:26px;border-right:1px solid var(--line)}.step-kicker{display:flex;align-items:center;flex-wrap:wrap;justify-content:space-between;gap:8px;color:#6a7064;font-size:9px;letter-spacing:.08em;text-transform:uppercase;margin-bottom:22px}.chapter{color:#4c6041}.coach h2{font:600 34px/1.1 'Barlow Condensed',sans-serif;letter-spacing:-.015em;margin-bottom:14px}.lead{color:var(--muted);font-size:12px;line-height:1.75;margin-bottom:18px}.role{display:flex;align-items:center;gap:10px;padding-bottom:18px;margin-bottom:18px;border-bottom:1px solid #e9ebe4}.role b{display:block;font-size:11px}.role small{color:var(--muted);font-size:10px}.role .avatar{width:32px;height:32px;font-size:10px}
.task-list{display:flex;flex-direction:column;gap:7px;margin-bottom:22px}.task{display:flex;align-items:flex-start;gap:10px;padding:12px;width:100%;background:#f6f7f3;border:1px solid transparent;border-radius:7px;color:#5d6457;text-align:left}.task:hover{background:#eff1e9}.task.active{background:var(--pale);border-color:#edd5b8;color:#3f2e1c}.task-number{display:grid;place-items:center;width:21px;height:21px;border-radius:50%;background:#e6e9df;flex-shrink:0;font-size:10px;font-weight:600}.task.active .task-number{background:var(--orange);color:#222}.task-title{display:block;font-size:11px;font-weight:600;line-height:1.7}.task-detail{display:block;margin-top:5px;color:#6b5843;font-size:11px;line-height:1.75}.coach-bottom{margin-top:auto}.tip{font-size:10px;line-height:1.75;color:#6a7064;margin-bottom:17px}.coach .button{width:100%;justify-content:space-between}
.canvas{min-width:0;background:#e8ebe3;display:flex;flex-direction:column}.screen-top{min-height:48px;display:flex;align-items:center;gap:10px;padding:0 20px;background:#30372e;color:#e5eadd}.screen-top strong{font-size:11px;font-weight:500}.window-dots{display:flex;gap:4px;margin-right:5px}.window-dots i{height:5px;width:5px;border-radius:50%;background:#858e7e}.zoom{margin-left:auto;display:flex;align-items:center;gap:6px;min-height:40px;padding:5px 0 5px 10px;border:0;background:transparent;color:#f0f3eb;font-size:10px;white-space:nowrap}.zoom:hover{color:#ffc581}.screen-wrap{padding:24px 20px 16px;flex:1;display:flex;align-items:center}.screen-image{position:relative;width:100%;overflow:hidden;border-radius:6px;background:#fff;line-height:0;box-shadow:0 3px 12px #26321c15}
/* Match the 142px masthead crop used for the highlight coordinates. */
.screen-image>img{display:block;width:100%;height:auto;aspect-ratio:1440/900;margin-top:-9.861111111%}.spotlight{position:absolute;z-index:1;border:2px solid #ed870f;border-radius:4px;box-shadow:0 0 0 2000px #17231424;pointer-events:none;transition:top .2s,left .2s,width .2s,height .2s}.hotspot{position:absolute;z-index:2;display:grid;place-items:center;transform:translate(-50%,-50%);height:28px;width:28px;padding:0;border:2px solid #d6730a;border-radius:50%;background:#fff;color:#282e23;font-size:11px;font-weight:700;line-height:1}.hotspot.active{background:var(--orange);color:#201e16;outline:3px solid #fff9}.hotspot:hover{transform:translate(-50%,-50%) scale(1.12)}.screen-caption{display:flex;align-items:center;justify-content:space-between;gap:15px;padding:0 20px 18px;font-size:10px;color:#59644e}.screen-caption>span:first-child{display:flex;gap:8px;align-items:center}.key{display:inline-grid;place-items:center;width:17px;height:17px;border:1px solid #b16918;border-radius:50%;font-size:9px}
.tour-bottom{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px 0 0}.tour-bottom>span{font-size:10px;color:var(--muted)}.tour-bottom .button{font-size:12px;min-height:42px}.storage-note{color:#80501e;font-size:12px}.tour-active .intro{display:none}.tour-active #walkthrough{border-top:0;padding-top:28px}
.reference{padding:58px 0 44px}.section-heading{display:flex;align-items:end;justify-content:space-between;gap:24px;margin-bottom:24px}.section-heading .eyebrow{margin-bottom:8px}.section-heading h2{font:600 40px/1.1 'Barlow Condensed',sans-serif;margin:0;letter-spacing:-.015em}.section-heading>p{color:var(--muted);font-size:12px;margin:0 0 4px}.reference-grid{display:grid;grid-template-columns:1fr 1fr;column-gap:36px;align-items:start}.reference details{border-bottom:1px solid #d5d9ce}.reference summary{display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:62px;padding:16px 3px;font-size:14px;font-weight:500;cursor:pointer;list-style:none}.reference summary::-webkit-details-marker{display:none}.reference summary::after{content:'+';display:grid;place-items:center;width:27px;height:27px;border:1px solid #d2d7c8;border-radius:50%;color:#66705b;font-size:19px;font-weight:400;flex-shrink:0}.reference summary:hover{color:#9c4909}.reference details[open]{grid-column:1/-1}.reference details[open] summary{font-weight:700}.reference details[open] summary::after{content:'−'}.reference-body{padding:10px 0 24px;font-size:14px;color:#5d6356;max-width:1060px}.reference-body h3{color:var(--ink);font-size:15px}.reference-body figure{margin:24px 0}.reference-body img{display:block;max-width:100%;height:auto;border:1px solid var(--line);border-radius:6px}.reference-body figcaption{font-size:11px;margin-top:10px}.reference-body .how{display:grid;grid-template-columns:1fr 1fr;gap:36px}.reference-body ul{padding-left:20px}.reference-body li{margin-bottom:9px}
.setup{display:flex;align-items:center;gap:36px;padding:32px 36px;margin-bottom:30px;background:#252b24;color:#fff;border-radius:10px}.setup h2{font:600 34px/1.1 'Barlow Condensed',sans-serif;margin:0 0 12px}.setup p{max-width:640px;margin:0;color:#c3cbbd;font-size:12px}.setup .button{margin-left:auto;white-space:nowrap}footer{display:flex;justify-content:space-between;gap:25px;padding-bottom:30px;color:var(--muted);font-size:10px}.skip{position:absolute;top:-100px;left:10px;padding:10px 15px;z-index:20;background:#fff}.skip:focus{top:10px}
.completion{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:450px;padding:40px;border:1px solid var(--line);border-radius:var(--radius);background:#fff;text-align:center}.seal{display:grid;place-items:center;width:60px;height:60px;border-radius:50%;background:#e7efdf;color:var(--green);font-size:28px;margin-bottom:24px}.completion h2{font:600 42px/1.1 'Barlow Condensed',sans-serif;margin-bottom:18px}.completion p{font-size:14px;max-width:600px;color:var(--muted)}.completion-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-top:12px}
dialog{width:min(1500px,96vw);max-height:94vh;padding:0;border:0;border-radius:10px;background:#fff}dialog::backdrop{background:#131b12c9;backdrop-filter:blur(3px)}.dialog-bar{position:sticky;top:0;z-index:3;display:flex;justify-content:space-between;align-items:center;gap:20px;padding:12px 18px;font-size:13px;background:#fff}.dialog-bar button{min-height:40px;padding:8px 16px;border:0;border-radius:5px;background:#e8ece1;font-size:12px}.dialog-scroll{overflow:auto;max-height:80vh;background:#ecefe7}.dialog-scroll img{display:block;width:100%;min-width:1000px;height:auto}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}
@media(min-width:1600px){.intro{gap:110px}.tour-card{grid-template-columns:330px minmax(0,1fr)}.coach{padding:30px}.coach h2{font-size:38px}.lead,.task-title,.task-detail{font-size:13px}}
@media(max-width:1180px){.wrap{width:calc(100% - 48px)}.intro{gap:32px;grid-template-columns:1.2fr 1fr}.example-company{padding:24px}.company-heading{flex-wrap:wrap;gap:8px}.company-heading h2{font-size:32px}.top-inner{gap:24px}.top nav{gap:18px}.step-tab{gap:6px;padding:8px 5px;font-size:10px}.tour-card{grid-template-columns:280px minmax(0,1fr)}.coach{padding:22px}.screen-wrap{padding:18px 12px}.screen-top,.screen-caption{padding-inline:12px}.tour-label span{display:block;margin:3px 0 0}}
@media(max-width:900px){.top nav{display:none}.top-inner>.button{margin-left:auto}.intro{grid-template-columns:1fr;padding:32px 0;gap:28px}h1{font-size:58px}.intro-copy{max-width:580px}.example-company{padding:20px 24px}.company-heading{justify-content:flex-start;gap:18px}.company-description{margin-bottom:15px}.people{padding-top:15px}.person{flex-direction:row;align-items:center}.step-nav{display:flex;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:thin;padding-bottom:8px}.step-tab{flex-shrink:0;padding:9px 12px;font-size:12px}.tour-card{grid-template-columns:1fr}.coach{border-right:0;border-bottom:1px solid var(--line);padding:24px}.step-kicker{margin-bottom:15px}.coach h2{font-size:36px}.lead{font-size:13px;max-width:650px}.role{margin-bottom:14px;padding-bottom:14px}.task-list{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:20px}.coach-bottom{display:flex;align-items:center;gap:24px}.tip{margin:0;flex:1;font-size:11px}.coach .button{width:auto;min-width:185px}.screen-wrap{padding:20px 18px 16px}.screen-top,.screen-caption{padding-inline:18px}.tour-bottom{flex-wrap:wrap}.tour-bottom>span{order:3;width:100%;text-align:center}.reference{padding-top:40px}.reference-grid{column-gap:24px}.setup{padding:26px}.setup .button{min-width:180px;white-space:normal}}
@media(max-width:560px){.wrap{width:calc(100% - 32px)}.top-inner{min-height:68px;gap:12px}.brand{gap:10px}.brand strong{font-size:30px}.brand small{display:none}.top-inner>.button{font-size:10px;padding:9px 11px;min-height:38px;gap:10px}.intro{padding:29px 0;gap:26px}.intro .eyebrow{font-size:9px;letter-spacing:.12em}h1{font-size:clamp(43px,11.5vw,62px);margin-bottom:16px}.intro-copy{font-size:13px}.intro-actions{gap:18px;flex-wrap:wrap}.intro-start{min-width:175px}.intro-reference{font-size:11px}.example-company{padding:20px}.company-heading{gap:10px;justify-content:space-between}.company-heading h2{font-size:30px}.example-label{font-size:8px;padding:4px 6px}.people{gap:10px}.person{flex-direction:column;align-items:flex-start;gap:8px}.person b{font-size:10px}.person small{font-size:9px}.tour-top{align-items:flex-start;flex-wrap:wrap;gap:12px;margin-bottom:14px}.tour-label{font-size:18px}.tour-label span{font-size:11px}.progress-group{width:100%;gap:12px}.progress-track{flex:1}.text-button{min-height:32px}.step-nav{margin-bottom:12px}.coach{padding:22px 18px}.coach h2{font-size:34px}.task-list{display:flex}.task{padding:12px}.task-title,.task-detail{font-size:12px}.coach-bottom{flex-direction:column;align-items:stretch;gap:16px}.coach .button{width:100%}.window-dots{display:none}.screen-top{gap:5px;padding-inline:10px}.screen-top strong{font-size:9px}.zoom{font-size:9px;padding-left:4px}.screen-wrap{padding:12px 8px}.screen-caption{padding:0 10px 12px;font-size:9px}.screen-caption>span:last-child{display:none}.hotspot{width:24px;height:24px;border-width:1px;font-size:10px}.tour-bottom{gap:10px}.tour-bottom .button{font-size:10px;padding:10px 12px;gap:10px}.section-heading{display:block;margin-bottom:12px}.section-heading h2{font-size:36px}.section-heading>p{margin-top:12px;font-size:11px}.reference-grid{grid-template-columns:1fr}.reference summary{font-size:13px;min-height:59px}.reference-body{font-size:13px}.reference-body .how{grid-template-columns:1fr;gap:10px}.setup{display:block;padding:26px 24px}.setup h2{font-size:32px}.setup .button{margin-top:22px}footer{display:block;font-size:9px}footer span{display:block;margin-bottom:6px}.completion{padding:30px 20px}.completion h2{font-size:34px}.completion-actions{flex-direction:column}.dialog-bar{font-size:11px}}
/* Keep step navigation available from the first viewport, with room below the content. */
body{padding-bottom:calc(96px + env(safe-area-inset-bottom,0px))}
html{scroll-padding-bottom:100px}
.tour-bottom{position:fixed;z-index:10;inset:auto 0 0;flex-wrap:nowrap;margin:0;padding:14px max(24px,calc((100vw - 1540px)/2));padding-bottom:calc(14px + env(safe-area-inset-bottom,0px));background:#fff;border-top:1px solid var(--line)}
.tour-bottom>span{order:0;width:auto}
.tour-bottom #next-step{background:var(--orange);border-color:transparent;min-width:185px}
.tour-bottom #next-step:hover{background:#ffa037}
@media(max-width:900px){.tour-bottom>span{display:none}.tour-bottom{padding-inline:24px}}
@media(max-width:560px){.tour-bottom{padding-inline:16px;gap:12px}.tour-bottom .button{min-height:44px}.tour-bottom #next-step{min-width:0;flex:1;justify-content:space-between}.tour-bottom #previous{flex-shrink:0}}
/* Chapters, one navigation flow, and a closer view of the selected detail. */
.chapter-nav{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-bottom:12px}
.chapter-tab{display:flex;align-items:center;gap:12px;min-height:60px;padding:12px 17px;text-align:left;background:#eeeee7;border:1px solid transparent;border-radius:7px;color:#60675a;font-size:13px}
.chapter-tab[aria-current=true]{background:#fff;border-color:#cbd1c2;color:var(--ink)}
.chapter-tab:hover{border-color:#bdc5b2}.chapter-index{font-size:11px;color:#727b68}.chapter-name{font-weight:600}.chapter-count{margin-left:auto;font-size:11px;font-variant-numeric:tabular-nums;color:#5d6a50}
.chapter-description{font-size:12px;line-height:1.6;color:var(--muted);margin:0 0 16px}.step-nav{grid-template-columns:repeat(6,minmax(0,1fr))}
.task.viewed:not(.active) .task-number{background:#dce8d8;color:#355d49}
.screen-top{flex-wrap:wrap;padding-block:8px;gap:8px;min-height:54px}.screen-actions{display:flex;align-items:center;gap:12px;margin-left:auto}
.view-controls{display:flex;gap:2px;padding:3px;border:1px solid #5b6554;border-radius:5px}.view-controls button{border:0;border-radius:3px;background:transparent;color:#d9dfd2;font-size:10px;min-height:30px;padding:5px 9px;white-space:nowrap}.view-controls button[aria-pressed=true]{background:#e8ece1;color:#283023;font-weight:600}
.screen-wrap{padding:18px;align-items:center}.screen-viewport{position:relative;overflow:hidden;width:100%;aspect-ratio:1440/758;min-height:300px;background:#dfe4d8;border-radius:6px}
.screen-image{position:absolute;inset:0 auto auto 0;width:100%;transform-origin:0 0;transition:transform .55s cubic-bezier(.4,0,.2,1);border-radius:0;box-shadow:none;--pin-scale:1;--pin-offset:18px;--pin-edge:20px;--spot-border:2px}
.screen-image.reset-view{transition:none!important}.screen-image>img{max-width:none}.spotlight{border-width:var(--spot-border)}
.hotspot{transform:translate(-50%,-50%) scale(var(--pin-scale))}.hotspot:hover{transform:translate(-50%,-50%) scale(calc(var(--pin-scale)*1.1))}
.screen-caption>span:first-child{display:block;max-width:80%;line-height:1.5}.coach-bottom .tip{margin-bottom:0}
.footer-position{margin-inline:auto;text-align:center;line-height:1.55}.footer-position strong{display:block;font-size:12px;font-weight:600}.footer-position small{display:block;font-size:10px;color:var(--muted)}
.tour-bottom #skip-topic{padding:10px 12px;white-space:nowrap}.tour-bottom #next-step{min-width:195px;max-width:340px;text-align:left;justify-content:space-between}
.remaining-topics,.next-chapters{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin:10px 0}.remaining-topics .button{font-size:12px}.next-chapters{margin-top:24px}.completion-actions{align-items:center}.completion .text-button{min-height:44px}
@media(max-width:1180px){.chapter-tab{gap:8px;font-size:12px;padding:12px}.screen-top strong{font-size:10px}.screen-actions{gap:7px}.screen-wrap{padding:14px}.view-controls button{padding-inline:7px}}
@media(max-width:900px){.chapter-nav{gap:8px}.chapter-tab{font-size:11px;gap:7px}.chapter-index{display:none}.step-nav{display:flex}.footer-position{display:none}.screen-viewport{min-height:320px}.screen-top{padding-inline:18px}.screen-wrap{padding:18px}}
@media(max-width:560px){
  .chapter-nav{display:flex;overflow-x:auto;scrollbar-width:thin;padding-bottom:5px}.chapter-tab{min-height:48px;flex-shrink:0;padding:10px 12px;gap:12px}.chapter-description{font-size:11px;margin-bottom:12px}
  .tour-card{display:grid;grid-template-columns:minmax(0,1fr);padding-top:19px}.coach{display:contents}
  .step-kicker{grid-row:1;margin:0 18px 12px}.coach h2{grid-row:2;margin:0 18px 10px;font-size:31px}.lead{grid-row:3;margin:0 18px 14px;font-size:12px}.role{grid-row:4;margin:0 18px 16px;padding-bottom:12px}
  .canvas{grid-row:5;border-block:1px solid var(--line)}.task-list{grid-row:6;margin:18px 18px 14px}.coach-bottom{grid-row:7;margin:0 18px 20px}
  .screen-top{padding:8px 10px}.screen-top strong{width:100%;font-size:10px}.screen-actions{margin-left:0;width:100%;justify-content:space-between}.view-controls button{font-size:10px;min-height:32px}.zoom{font-size:10px;min-height:36px}
  .screen-wrap{padding:10px}.screen-viewport{min-height:290px}.screen-caption{padding-inline:10px}.screen-caption>span:first-child{max-width:100%;font-size:9px}
  .tour-bottom{padding:10px 12px;padding-bottom:calc(10px + env(safe-area-inset-bottom,0px));gap:8px;flex-wrap:wrap}.tour-bottom #previous{order:1;padding:9px 10px;min-height:44px}.tour-bottom #next-step{order:2;flex:1;max-width:none;min-width:0;min-height:44px;font-size:11px}.tour-bottom #skip-topic{order:3;width:100%;min-height:26px;padding:0;font-size:10px}.footer-position{display:none}
  body{padding-bottom:calc(118px + env(safe-area-inset-bottom,0px))}html{scroll-padding-bottom:122px}.next-chapters{flex-direction:column;width:100%}.remaining-topics{width:100%}.remaining-topics .button{width:100%}
}
/* The active guide uses the available viewport; reference content stays on its own page. */
.compact-navigation,.highlight-tools{display:none}
#restart-compact{display:none}
.speech-button{min-height:36px;padding:5px 8px;border:1px solid #75816b;border-radius:5px;background:transparent;color:#f0f3eb;font-size:10px;white-space:nowrap}.speech-button[aria-pressed=true]{background:#e8ece1;color:#283023;border-color:#e8ece1}.speech-button:hover{border-color:#e8ece1}.speech-button:disabled{max-width:90px;white-space:normal;font-size:9px}.intro-actions{flex-wrap:wrap;gap:16px 22px}
#notes-dialog{width:min(540px,calc(100vw - 32px))}.notes-content{padding:20px 24px;font-size:14px}.notes-content p:last-child{margin-bottom:0}#notes-role{color:var(--muted);font-size:12px}
.reference-mode #walkthrough,.reference-mode .intro{display:none}.reference-mode .top nav{display:flex}.reference-mode .top nav a[href="#reference"]{display:none}
.guide-fit{height:100vh;height:100dvh;padding-bottom:0;display:flex;flex-direction:column;overflow:hidden}
.guide-fit .top{flex:none}.guide-fit .top-inner{min-height:58px}.guide-fit .brand strong{font-size:30px}.guide-fit .top-inner>.button{min-height:38px;padding-block:8px}
.guide-fit main{flex:1;min-height:0;display:flex;flex-direction:column;width:calc(100% - 48px);max-width:1640px}
.guide-fit .reference,.guide-fit .setup,.guide-fit main>footer{display:none}
.guide-fit #walkthrough{flex:1;min-height:0;display:flex;flex-direction:column;padding-top:10px;gap:8px}
.guide-fit .tour-top{flex:none;margin:0;min-height:30px}.guide-fit .tour-label{font-size:15px}.guide-fit .tour-label span,.guide-fit .chapter-description{display:none}
.guide-fit .chapter-nav{flex:none;margin:0;gap:8px}.guide-fit .chapter-tab{min-height:40px;padding:7px 12px;font-size:12px}
.guide-fit .step-nav{flex:none;margin:0;padding:0}.guide-fit .step-tab{min-height:38px;padding-block:6px}
.guide-fit .tour-card{flex:1;min-height:0;grid-template-columns:300px minmax(0,1fr);padding:0}
.guide-fit .coach{display:flex;min-height:0;overflow:auto;padding:20px;border-right:1px solid var(--line);border-bottom:0}
.guide-fit .step-kicker{margin:0 0 12px;font-size:9px}.guide-fit .coach h2{font-size:30px;margin:0 0 12px}
.guide-fit .lead,.guide-fit .coach-bottom{display:none}.guide-fit .role{order:5;border:0;padding:12px 0 0;margin:0;margin-top:auto}
.guide-fit .highlight-tools{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:12px;flex:none}
#highlight-nav{display:flex;gap:6px}.highlight-choice{width:36px;height:36px;border:1px solid #d9ddcf;border-radius:50%;background:#f3f5ee;color:#536147;font-size:12px}.highlight-choice[aria-pressed=true]{background:var(--orange);border-color:var(--orange);color:#222;font-weight:700}
.guide-fit .task-list{display:block;margin:0}.guide-fit .task:not(.active){display:none}.guide-fit .task{padding:14px}.guide-fit .task-title,.guide-fit .task-detail{font-size:13px;line-height:1.6}.guide-fit .task-number{display:none}
.guide-fit .canvas{min-height:0;overflow:hidden;border:0}.guide-fit .screen-top{flex:none;min-height:46px;padding:4px 12px;flex-wrap:nowrap}.guide-fit .screen-top strong{width:auto}.guide-fit .screen-actions{width:auto;margin-left:auto}
.guide-fit .screen-wrap{flex:1;min-height:0;padding:12px;align-items:stretch}.guide-fit .screen-viewport{height:100%;min-height:0;aspect-ratio:auto}.guide-fit .screen-caption{flex:none;padding:0 12px 8px;font-size:9px}
.guide-fit .tour-bottom{position:static;flex:none;flex-wrap:nowrap;padding:9px 0;padding-bottom:calc(9px + env(safe-area-inset-bottom,0px));gap:12px;border:0;background:var(--paper)}
.guide-fit .tour-bottom #previous,.guide-fit .tour-bottom #next-step,.guide-fit .tour-bottom #skip-topic{order:0;width:auto;min-height:44px}.guide-fit .tour-bottom #skip-topic{padding:6px 10px}.guide-fit .tour-bottom #next-step{flex:0 1 300px}
.guide-fit .completion{flex:1;min-height:0;overflow:auto;justify-content:flex-start;padding:24px;margin-bottom:12px}.guide-fit .seal{flex-shrink:0}.guide-fit .storage-note{margin:0;font-size:10px;flex:none}
.guide-fit .completion>*{flex-shrink:0}
@media(min-width:901px) and (max-height:720px){.guide-fit .coach{padding:14px}.guide-fit .coach h2{font-size:25px;margin-bottom:8px}.guide-fit .step-kicker{margin-bottom:8px}.guide-fit .highlight-tools{margin-bottom:8px}.guide-fit .task{padding:11px}.guide-fit .task-title,.guide-fit .task-detail{font-size:12px;line-height:1.5}.guide-fit .role{display:none}}
@media(max-width:900px){
  .guide-fit .top nav{display:flex;gap:0;margin-left:auto}.guide-fit .top nav a[href="#walkthrough"]{display:none}.guide-fit .top-inner>.button{display:none}.guide-fit .top nav a{font-size:12px;min-height:44px;display:flex;align-items:center}
  .guide-fit main{width:calc(100% - 24px)}.guide-fit .top-inner{min-height:48px}.guide-fit .top .wrap{width:calc(100% - 24px)}
  .guide-fit .tour-label,.guide-fit .chapter-nav,.guide-fit .step-nav{display:none}.guide-fit .tour-top{min-height:24px}.guide-fit .progress-group{width:100%;gap:10px}.guide-fit .progress-track{flex:1}.guide-fit .text-button{min-height:28px}.guide-fit .tour-top #restart{min-height:24px}
  .guide-fit .compact-navigation{display:grid;grid-template-columns:1fr 1fr;gap:10px;flex:none}.compact-navigation label{display:flex;flex-direction:column;gap:2px;color:var(--muted);font-size:9px}.compact-navigation select{width:100%;min-width:0;min-height:36px;border:1px solid #d4d9cb;border-radius:5px;padding:4px 24px 4px 8px;background:#fff;color:var(--ink);font:500 12px 'DM Sans',sans-serif}
  .guide-fit .tour-card{grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto minmax(130px,1fr) auto;position:relative}
  .guide-fit .coach{display:contents}.guide-fit .coach h2{grid-row:1;margin:9px 12px 0;font-size:24px;line-height:1.08;padding-right:0}.guide-fit .step-kicker{display:none}.guide-fit .role{display:none}
  .guide-fit .highlight-tools{grid-row:2;margin:4px 12px 6px}.highlight-choice{width:32px;height:32px}.guide-fit .highlight-tools .text-button{font-size:10px;min-height:32px}
  .guide-fit .canvas{grid-row:3;border-block:1px solid var(--line)}.guide-fit .screen-top{min-height:42px;padding:2px 8px;gap:4px}.guide-fit .screen-top strong{display:none}.guide-fit .screen-actions{width:100%;margin:0;justify-content:space-between}.guide-fit .view-controls{padding:2px}.guide-fit .view-controls button{min-height:30px}.guide-fit .zoom{min-height:36px}.guide-fit .screen-wrap{padding:6px}.guide-fit .screen-caption{display:none}
  .guide-fit .task-list{grid-row:4;margin:8px 10px;max-height:32dvh;overflow:auto}.guide-fit .task{padding:10px 12px}.guide-fit .task-title,.guide-fit .task-detail{font-size:13px;line-height:1.5}.guide-fit .task-detail{margin-top:3px}
  .guide-fit .tour-bottom{gap:8px;padding-block:6px;padding-bottom:calc(6px + env(safe-area-inset-bottom,0px))}.guide-fit .tour-bottom #previous{font-size:11px;padding:8px 10px}.guide-fit .tour-bottom #next-step{flex:1;max-width:none;font-size:11px;padding:8px 10px}.guide-fit .tour-bottom #skip-topic{font-size:10px;padding:4px;min-width:52px}.guide-fit .footer-position{display:none}
}
@media(max-width:560px){.guide-fit #walkthrough{padding-top:4px;gap:5px}.guide-fit .brand strong{font-size:26px}.guide-fit .progress-group{font-size:10px}.guide-fit .tour-card{border-radius:8px}}
@media(max-width:900px) and (max-height:650px){
  .guide-fit .top-inner{min-height:40px}.guide-fit .top nav a{min-height:40px}.guide-fit .coach h2{font-size:20px;margin-top:7px}.guide-fit .highlight-tools{margin-block:2px 4px}.guide-fit .task-title,.guide-fit .task-detail{font-size:12px;line-height:1.45}.guide-fit .task{padding:8px 10px}.guide-fit .task-list{margin:6px 8px}.compact-navigation label{font-size:0}.compact-navigation select{min-height:36px}.guide-fit .tour-bottom #previous{font-size:0;gap:0;padding:8px 12px}.guide-fit .tour-bottom #previous .arrow,.guide-fit .tour-bottom #previous span{font-size:18px}
}
@media(max-width:900px) and (orientation:landscape) and (max-height:600px){
  .guide-fit .top,.guide-fit .tour-top{display:none}.guide-fit .compact-navigation{grid-template-columns:1fr 1fr;max-width:500px}.guide-fit .tour-card{grid-template-columns:230px minmax(0,1fr);grid-template-rows:auto auto minmax(0,1fr)}.guide-fit .coach h2{grid-column:1;grid-row:1}.guide-fit .highlight-tools{grid-column:1;grid-row:2}.guide-fit .task-list{grid-column:1;grid-row:3;max-height:none}.guide-fit .canvas{grid-column:2;grid-row:1/4;border:0;border-left:1px solid var(--line)}
}
@media(pointer:coarse){.compact-navigation select{font-size:16px}}
@media(max-width:900px) and (orientation:landscape) and (max-height:600px){.guide-fit .compact-navigation{grid-template-columns:minmax(0,1fr) minmax(0,1fr) auto;max-width:none;align-items:end}.guide-fit #restart-compact{display:block;min-height:36px}}
@media(max-width:560px){.guide-fit .screen-actions{gap:4px}.guide-fit .view-controls button{padding-inline:6px;font-size:9px}.guide-fit .speech-button{padding-inline:6px}.guide-fit .zoom{padding-left:0;font-size:9px}}
/* Match the My BAY38 landing page: charcoal, paper, white cards and orange actions. */
:root{--radius:5px;--green:#355d49;--dark:#1c1e1d}
.wrap{width:min(1240px,calc(100% - 48px))}
.top-inner{min-height:70px}.brand-logo{display:block;width:auto;height:32px}.brand small{border-color:#51534f}
.intro{grid-template-columns:1.1fr 1fr;gap:56px;padding:48px 0 42px}
.intro-mark{display:block;height:24px;width:auto;filter:brightness(0);margin-bottom:18px}
.intro .eyebrow{font-size:11px;margin-bottom:12px}
h1{font-weight:700;letter-spacing:-.01em}h1 span{color:var(--ink)}
.intro-copy{font-size:16px;max-width:520px}.intro-actions{margin-top:26px}
.intro-start{min-height:52px;font-size:14px;padding-inline:24px}
.company-heading h2,.coach h2,.section-heading h2,.setup h2,.completion h2{font-weight:700;letter-spacing:-.01em}
.example-company{background:#fff;border:1px solid var(--line);border-radius:5px;padding:28px}
.company-description{font-size:13px}.example-label{border-color:var(--line);color:var(--muted)}
.people{border-color:var(--line)}.person b{font-size:12px}.person small{font-size:11px}
.button,.chapter-tab,.step-tab,.task,.setup,dialog,.reference-body img,.screen-viewport,.guide-fit .tour-card{border-radius:5px}
.button{position:relative;overflow:hidden}.button::after{content:"";position:absolute;top:0;left:-75%;width:50%;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.5),transparent);transform:skewX(-20deg);pointer-events:none}
.button:hover::after{left:125%;transition:left .6s ease}
.button:hover,.tour-bottom #next-step:hover{background:var(--orange)}
.button.secondary:hover,.button.subtle:hover{background:#f0efeb}
.chapter-tab{background:#fff;border-color:var(--line);color:var(--muted)}
.chapter-tab[aria-current=true]{background:var(--pale);border-color:#e8c8a1;color:var(--ink)}
.chapter-tab:hover{border-color:#a7aaa3}.chapter-index{display:grid;place-items:center;flex:none;width:26px;height:26px;border-radius:50%;background:#f0efeb;color:var(--ink)}
.chapter-tab[aria-current=true] .chapter-index{background:var(--orange)}
.chapter-count,.chapter,.step-kicker,.text-button,.chapter-index{color:var(--muted)}
.step-tab{color:var(--muted)}.step-tab:hover{background:#eeede9}.step-tab[aria-current=step]{background:var(--dark)}
.step-number,.task-number{background:#eeede9;color:var(--muted)}
.tour-card{border-color:var(--line);box-shadow:0 10px 30px #20222108}
.canvas{background:#f0efeb}.screen-viewport{background:#e8e6e0}
.screen-top{background:var(--dark);color:#e6e7e3}
.screen-caption,.reference-body{color:var(--muted)}
.view-controls,.speech-button{border-color:#646862}
.view-controls button{color:#d1d4cd}
.view-controls button[aria-pressed=true],.speech-button[aria-pressed=true]{background:#fff;color:var(--ink);border-color:#fff}
.highlight-choice{background:#f6f5f1;border-color:var(--line);color:var(--muted)}
.task{background:#f6f5f1;color:var(--muted)}.task:hover{background:#eeede9}.task.active{background:var(--pale);border-color:#edd5b8;color:#3f2e1c}
.spotlight{box-shadow:0 0 0 2000px #20222124}
.setup{background:var(--dark)}.setup p{color:#d1d4cd}.dialog-bar button,.dialog-scroll{background:#f0efeb}
.compact-navigation select{border-color:var(--line)}
@media(max-width:1180px){.intro{gap:32px}.example-company{padding:24px}}
@media(max-width:900px){.intro{grid-template-columns:1fr;gap:28px;padding:32px 0}.guide-fit .brand-logo{height:28px}.chapter-index{display:none}}
@media(max-width:560px){.wrap{width:calc(100% - 32px)}.top-inner{min-height:64px}.brand-logo{height:28px}.intro{gap:26px;padding:29px 0}.intro-mark{height:21px;margin-bottom:16px}.intro-copy{font-size:14px}.intro-start{min-height:48px;font-size:13px;padding-inline:18px}.example-company{padding:20px}.company-description{font-size:12px}.person b{font-size:10px}.person small{font-size:9px}.guide-fit .brand-logo{height:26px}}
.avatar{overflow:hidden}.avatar img{display:block;width:100%;height:100%;object-fit:contain}
/* Stage headings receive focus for screen readers, but are not controls. */
#step-title:focus,#completion-title:focus{outline:none}
.company-identity{display:flex;align-items:center;gap:14px;min-width:0}.company-logo{display:block;width:72px;height:72px;object-fit:contain;flex:none}
@media(max-width:560px){.company-heading{flex-wrap:wrap}.company-identity{gap:10px}.company-logo{width:56px;height:56px}}
/* The stage changes as one surface; navigation stays still and usable. */
.tour-card,.completion{view-transition-name:walkthrough-stage}
.tour-bottom{view-transition-name:walkthrough-controls}
::view-transition{pointer-events:none}
::view-transition-old(root),::view-transition-new(root),::view-transition-old(walkthrough-controls),::view-transition-new(walkthrough-controls){animation:none}
::view-transition-group(walkthrough-controls){animation-duration:0s}
::view-transition-group(walkthrough-stage){animation-duration:550ms;animation-timing-function:cubic-bezier(.4,0,.2,1)}
::view-transition-old(walkthrough-stage){animation:350ms ease-in-out both stage-out}
::view-transition-new(walkthrough-stage){animation:550ms cubic-bezier(.4,0,.2,1) both stage-in}
@keyframes stage-out{to{opacity:0}}
@keyframes stage-in{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:translateY(0)}}
.spotlight{transition:top .45s cubic-bezier(.4,0,.2,1),left .45s cubic-bezier(.4,0,.2,1),width .45s cubic-bezier(.4,0,.2,1),height .45s cubic-bezier(.4,0,.2,1)}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important;animation:none!important}::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none!important}}
@media print{.top,#walkthrough,.intro-actions,.setup,dialog{display:none!important}.wrap{width:100%}.intro{display:block!important;padding:15px 0}.example-company{display:none}.reference-grid{display:block}.reference details{break-inside:avoid;margin-bottom:16px}.reference details>*{display:block!important}.reference summary::after{content:none}.reference-body img{max-height:420px;object-fit:contain}}