/* Section 04 — What We're Building Together (scroll-driven story)
   Scoped to .wbt so it cannot affect other pages. */
.wbt{--navy:#001d6c;--purple:#8a3ffc;--teal:#1192e8;--green:#198038;--mid:#525252;--grey:#f4f4f4;--soft:#a6c8ff;--rule:#dcdcdc;color:#161616;background:#fff;overflow-x:clip}
.wbt-wrap{max-width:1328px;margin:0 auto;padding:0 40px}
.wbt .mono{font-family:PlexMono,ui-monospace,monospace;font-size:12px;letter-spacing:.08em;text-transform:uppercase}

/* reveal on scroll (only when JS is running) */
.wbt-js .wbt .reveal{opacity:0;transform:translateY(26px);transition:opacity .8s ease,transform .8s cubic-bezier(.2,.7,.2,1)}
.wbt-js .wbt .reveal.in{opacity:1;transform:none}
.wbt .d1{transition-delay:.1s}.wbt .d2{transition-delay:.2s}.wbt .d3{transition-delay:.3s}.wbt .d4{transition-delay:.4s}.wbt .d5{transition-delay:.5s}

/* ---------- Hero ---------- */
.wbt-hero{position:relative;padding:88px 0 0;background:#fff;overflow:hidden}
.wbt-hero-grid{display:grid;grid-template-columns:1.25fr 1fr;gap:64px;align-items:end;padding-bottom:72px}
.wbt-hero .wbt-eyebrow{color:#161616;margin-bottom:28px}
.wbt-eyebrow b{color:var(--blue);font-weight:400;margin-right:14px}
.wbt .wbt-hero h1{font-size:clamp(46px,5.6vw,88px);font-weight:300;line-height:1;letter-spacing:-.025em}
.wbt-hero h1 em{font-style:normal;color:var(--blue)}
.wbt-hero h1 .ln{display:block;overflow:hidden}
.wbt-hero h1 .ln span{display:inline-block;transform:translateY(105%);animation:wbt-up 1s cubic-bezier(.2,.7,.2,1) forwards}
.wbt-hero h1 .ln:nth-child(2) span{animation-delay:.14s}
.wbt-hero h1 .ln:nth-child(3) span{animation-delay:.28s}
@keyframes wbt-up{to{transform:none}}
.wbt-hero .wbt-sub{margin-top:30px;font-size:clamp(20px,2vw,26px);font-weight:300;line-height:1.35;color:var(--mid);max-width:620px}
.wbt-hero .wbt-proof{font-size:clamp(22px,2.2vw,28px);font-weight:400;line-height:1.3;margin-bottom:22px}
.wbt-hero .wbt-proof span{display:block;color:var(--blue)}
.wbt-goal{border-left:4px solid var(--blue);background:var(--grey);padding:22px 26px}
.wbt-goal .mono{color:var(--blue);margin-bottom:8px}
.wbt-goal p{font-size:17px;color:#262626}
.wbt-hero .qlink{margin-top:26px}

/* process strip at the bottom of the hero */
.wbt-strip{list-style:none;margin:0;padding:0;border-top:1px solid var(--rule);display:flex;align-items:stretch}
.wbt-strip li{flex:1;display:flex;align-items:center;gap:12px;padding:20px 24px;font-size:15px;position:relative}
.wbt-strip li+li{border-left:1px solid var(--rule)}
.wbt-strip li i{width:10px;height:10px;border-radius:50%;background:var(--c);flex:none}
.wbt-strip li small{display:block;font-family:PlexMono,monospace;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--mid)}
.wbt-strip li:first-child{padding-left:0}
.wbt-strip-label{flex:none!important;font-family:PlexMono,monospace;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--blue);border-right:1px solid var(--rule)}

/* ---------- Quick links ---------- */
.qlink{display:inline-flex;align-items:center;gap:12px;padding:13px 20px;border:1.5px solid var(--c,var(--blue));color:var(--c,var(--blue));background:transparent;font-size:15px;text-decoration:none;transition:background .3s,color .3s,transform .3s}
.qlink:hover{background:var(--c,var(--blue));color:#fff;transform:translateY(-2px)}
.qlink .arr{transition:transform .3s}
.qlink:hover .arr{transform:translateX(6px)}
.wbt-next{display:flex;flex-wrap:wrap;gap:12px;align-items:center;border-top:1px solid var(--rule);margin-top:64px;padding-top:26px}
.wbt-next .lbl{font-family:PlexMono,monospace;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--mid);margin-right:8px}
.wbt-dark .wbt-next{border-top-color:rgba(255,255,255,.25)}
.wbt-dark .wbt-next .lbl{color:var(--soft)}
.wbt-dark .qlink{--c:#fff}
.wbt-dark .qlink:hover{color:var(--navy)}

/* ---------- Chapters ---------- */
.wbt-chapter{padding:110px 0 70px;position:relative}
.wbt-chapter.alt{background:var(--grey)}
.wbt-chapter .wbt-label{display:flex;align-items:center;gap:14px;color:var(--c)}
.wbt-chapter .wbt-label .line{flex:1;max-width:200px;height:1px;background:var(--rule)}
.wbt .wbt-chapter h2{margin-top:22px;max-width:900px;font-size:clamp(36px,4.4vw,60px);font-weight:300;line-height:1.06;letter-spacing:-.015em}
.wbt .wbt-chapter h2 strong{font-weight:600}
.wbt-chapter .lede{margin-top:20px;max-width:660px;font-size:19px;line-height:1.5;color:var(--mid)}

/* 01 scope tiles */
.wbt-ch1{--c:var(--blue)}
.wbt-scope{margin-top:56px;display:grid;grid-template-columns:repeat(6,1fr);gap:20px}
.wbt-scope .tile{grid-column:span 2}
.wbt-scope .tile:nth-child(n+4){grid-column:span 3}
.tile{background:#fff;border:1px solid var(--rule);padding:30px 28px 32px;position:relative;overflow:hidden;transition:transform .4s,box-shadow .4s}
.alt .tile{border-color:transparent}
.tile::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--t,var(--blue));transform:scaleY(0);transform-origin:top;transition:transform .9s cubic-bezier(.2,.7,.2,1)}
.tile.in::before{transform:scaleY(1)}
.tile:hover{transform:translateY(-6px);box-shadow:0 22px 40px -24px rgba(0,0,0,.35)}
.tile .n{font-family:PlexMono,monospace;font-size:12px;letter-spacing:.08em;color:var(--t,var(--blue))}
.wbt .tile h3{margin:12px 0 12px;font-size:25px;font-weight:600;line-height:1.15}
.tile p{font-size:16px;line-height:1.5;color:var(--mid)}

/* 02 process */
.wbt-ch2{--c:var(--purple)}
.wbt-steps{list-style:none;margin:60px 0 0;padding:0;display:grid;grid-template-columns:repeat(6,1fr);position:relative;isolation:isolate}
.wbt-steps::before,.wbt-steps::after{content:"";position:absolute;top:22px;left:8.333%;height:2px;z-index:0}
.wbt-steps::before{right:8.333%;background:var(--rule)}
.wbt-steps::after{width:0;background:linear-gradient(90deg,var(--blue),var(--purple),var(--teal),#6929c4,#0043ce,var(--green));transition:width 1.8s cubic-bezier(.2,.7,.2,1)}
.wbt-steps.in::after{width:83.333%}
.wbt-steps li{text-align:center;padding:0 12px;position:relative;z-index:1}
.wbt-steps .dot{width:46px;height:46px;border-radius:50%;margin:0 auto 18px;display:grid;place-items:center;background:#fff;border:2px solid var(--c);color:var(--c);font-family:PlexMono,monospace;font-size:14px;transition:background .6s,color .6s}
.wbt-steps.in .dot{background:var(--c);color:#fff}
.wbt-steps h3{font-family:PlexMono,monospace;font-size:14px;font-weight:400;letter-spacing:.1em;text-transform:uppercase;color:var(--c);margin-bottom:8px}
.wbt-steps p{font-size:16px;color:var(--mid);line-height:1.45}
.wbt-principle{margin-top:60px;background:var(--navy);color:#fff;padding:34px 40px;font-size:clamp(20px,2.2vw,28px);font-weight:300;line-height:1.35;position:relative;overflow:hidden}
.wbt-principle .mono{display:block;color:var(--soft);margin-bottom:10px}
.wbt-principle strong{font-weight:600}
.wbt-principle::after{content:"";position:absolute;right:-70px;top:-70px;width:240px;height:240px;border-radius:50%;background:radial-gradient(circle,rgba(138,63,252,.55),transparent 70%)}

/* 03 outputs (dark) */
.wbt-dark{background:var(--navy);color:#fff}
.wbt-ch3{--c:var(--soft)}
.wbt-dark .lede{color:var(--soft)}
.wbt-dark .wbt-chapter-label,.wbt-dark .wbt-label{color:var(--soft)}
.wbt-dark .wbt-label .line{background:rgba(255,255,255,.25)}
.wbt-outputs{margin-top:56px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;align-items:stretch}
.wbt-outputs .out{grid-column:span 1;display:flex;flex-direction:column;border:1px solid #2b4c9b;background:rgba(255,255,255,.04);transition:transform .4s,background .4s,border-color .4s}
.wbt-outputs.has-open{align-items:start}
.wbt-outputs .out.hero-out{grid-column:span 2;background:var(--blue);border-color:var(--blue)}
.wbt-outputs .out:hover{transform:translateY(-4px);background:rgba(255,255,255,.09);border-color:var(--soft)}
.wbt-outputs .out.hero-out:hover{background:#0043ce;border-color:#0043ce}
.wbt-hint{margin-top:40px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.wbt-hint span{grid-column:4;display:flex;align-items:center;gap:10px;font-family:PlexMono,monospace;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--soft)}
.wbt-hint .hint-plus{position:relative;flex:none;width:18px;height:18px;border:1.5px solid currentColor;border-radius:50%}
.wbt-hint .hint-plus::before,.wbt-hint .hint-plus::after{content:"";position:absolute;left:50%;top:50%;width:8px;height:1.5px;background:currentColor;transform:translate(-50%,-50%)}
.wbt-hint .hint-plus::after{transform:translate(-50%,-50%) rotate(90deg)}
.wbt-hint+.wbt-outputs{margin-top:10px}
.wbt-outputs summary{position:relative;display:block;flex:none;cursor:pointer;list-style:none;padding:26px 24px 24px}
.wbt-outputs summary::-webkit-details-marker{display:none}
.wbt-outputs summary:focus-visible{outline:2px solid #fff;outline-offset:-4px}
.wbt-outputs .n{font-family:PlexMono,monospace;font-size:12px;letter-spacing:.08em;color:var(--soft)}
.wbt .wbt-outputs h3{margin:12px 0 10px;font-size:20px;font-weight:600;line-height:1.2;color:#fff}
.wbt-outputs summary>p{font-size:15px;line-height:1.45;color:#d0e2ff}
.wbt-outputs .out.hero-out .n,.wbt-outputs .out.hero-out summary>p{color:#fff}
.wbt-outputs .plus{position:absolute;top:18px;right:18px;color:var(--soft);width:24px;height:24px;border:1.5px solid currentColor;border-radius:50%;transition:background .3s,color .3s}
.wbt-outputs .plus::before,.wbt-outputs .plus::after{content:"";position:absolute;left:50%;top:50%;width:10px;height:1.5px;background:currentColor;transform:translate(-50%,-50%);transition:transform .3s,background .3s}
.wbt-outputs .plus::after{transform:translate(-50%,-50%) rotate(90deg)}
.wbt-outputs details[open] .plus::after{transform:translate(-50%,-50%) rotate(0)}
.wbt-outputs .hero-out .plus{color:#fff}
.wbt-outputs summary:hover .plus{background:#fff;color:var(--navy)}
.wbt-outputs .hero-out summary:hover .plus{color:#0043ce}
.wbt-outputs .detail{margin:0 24px;padding:16px 0 24px;border-top:1px solid #2b4c9b}
.wbt-outputs .hero-out .detail{border-top-color:rgba(255,255,255,.4)}
.wbt-outputs .detail p{font-size:14px;line-height:1.5;color:#d0e2ff}
.wbt-outputs .detail p+p{margin-top:12px}
.wbt-outputs .hero-out .detail p{color:#fff}
.wbt-outputs .detail b{display:block;margin-bottom:3px;font-family:PlexMono,monospace;font-size:11px;font-weight:400;letter-spacing:.08em;text-transform:uppercase;color:#fff}
.wbt-result{margin-top:48px;display:flex;flex-wrap:wrap;align-items:center;gap:16px 28px;border-top:1px solid #2b4c9b;padding-top:30px}
.wbt-result>p{font-size:clamp(20px,2.2vw,28px);font-weight:300;max-width:640px;line-height:1.3}
.wbt-result>p strong{font-weight:600}
.wbt-decide{display:flex;gap:10px;flex-wrap:wrap}
.wbt-decide span{padding:10px 18px;border:1.5px solid var(--c);color:#fff;font-family:PlexMono,monospace;font-size:13px;letter-spacing:.08em;text-transform:uppercase}
.wbt-decide span:nth-child(1){--c:#42be65}
.wbt-decide span:nth-child(2){--c:#78a9ff}
.wbt-decide span:nth-child(3){--c:#ff8389}

/* 04 meaning for me */
.wbt-ch4{--c:var(--teal)}
.wbt-meaning{margin-top:56px;display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.wbt-closer{margin-top:24px;background:var(--navy);color:#fff;padding:34px 40px;font-size:clamp(20px,2.2vw,26px);line-height:1.4;position:relative;overflow:hidden;text-align:center}
.wbt-closer::after{content:"";position:absolute;right:-60px;top:-60px;width:220px;height:220px;border-radius:50%;background:radial-gradient(circle,#8a3ffc,transparent 70%);opacity:.55}
.wbt-closer strong{font-weight:600}

/* 05 your role */
.wbt-ch5{--c:var(--green)}
.wbt-you{display:flex;align-items:flex-end;gap:40px;margin-top:56px;flex-wrap:wrap}
.wbt-you .big{font-size:clamp(120px,16vw,230px);font-weight:600;line-height:.8;letter-spacing:-.03em;color:var(--blue);transform-origin:left bottom;transform:scale(.88);transition:transform 1.2s cubic-bezier(.2,.7,.2,1)}
.wbt-you.in .big{transform:none}
.wbt-you p{max-width:520px;padding-bottom:12px;font-size:clamp(22px,2.4vw,32px);font-weight:600;line-height:1.3}
.wbt-show{margin-top:52px;font-size:22px;font-weight:600;color:var(--purple)}
.wbt-asks{margin-top:20px;display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.wbt-asks .tile:nth-child(2){background:#f7f2ff}
.wbt-question{margin-top:24px;background:#161616;color:#fff;padding:30px 36px;font-size:20px;font-weight:600;line-height:1.35}

.wbt-end{padding-bottom:90px}

/* section sidebar: its own column on wide screens, so it never overlaps content */
.wbt-side{display:none}
@media (min-width:1200px){
  .wbt{display:grid;grid-template-columns:270px minmax(0,1fr)}
  .wbt-side{display:block;background:#fff;border-right:1px solid var(--rule)}
  .wbt-rail{position:sticky;top:150px;padding:34px 0}
}
.wbt-rail .rail-title{padding:0 24px 16px;color:var(--mid)}
.wbt-rail ol{list-style:none;margin:0;padding:0;border-top:1px solid var(--rule)}
.wbt-rail li{border-bottom:1px solid var(--rule)}
.wbt-rail a{display:flex;align-items:baseline;gap:14px;padding:15px 20px 15px 21px;border-left:4px solid transparent;color:var(--mid);font-size:15px;line-height:1.3;transition:background .25s,color .25s,border-color .25s}
.wbt-rail a b{flex:none;min-width:22px;font-family:PlexMono,monospace;font-size:12px;font-weight:400;color:#8d8d8d;transition:color .25s}
.wbt-rail a:hover{background:var(--grey);color:#161616}
.wbt-rail a.on{background:#edf4ff;border-left-color:var(--blue);color:var(--blue);font-weight:600}
.wbt-rail a.on b{color:var(--blue)}

/* ---------- Fit each chapter on one screen (wide layout with sidebar) ----------
   After a sidebar click the chapter top sits ~144px down (below the sticky header),
   so each chapter is sized to the remaining viewport and its spacing scales with height. */
@media (min-width:1200px){
  .wbt-chapter{min-height:calc(100vh - 144px);min-height:calc(100svh - 144px);display:flex;flex-direction:column;justify-content:center;padding:clamp(12px,2vh,32px) 0}
  .wbt-chapter .wbt-wrap{width:100%}
  .wbt-chapter .wbt-label{font-size:11px}
  .wbt .wbt-chapter h2{margin-top:clamp(8px,1.4vh,16px);font-size:clamp(26px,4.2vh,44px)}
  .wbt-chapter .lede{margin-top:clamp(6px,1.2vh,14px);font-size:clamp(15px,2vh,18px)}
  .wbt-scope,.wbt-outputs,.wbt-meaning,.wbt-steps{margin-top:clamp(12px,2.4vh,30px)}
  .wbt-scope,.wbt-outputs,.wbt-meaning,.wbt-asks{gap:clamp(10px,1.6vh,16px)}
  .tile{padding:clamp(10px,1.8vh,20px) 22px clamp(12px,2vh,22px)}
  .wbt .tile h3{margin:clamp(6px,1.1vh,10px) 0;font-size:clamp(17px,2.4vh,22px)}
  .tile p{font-size:clamp(13px,1.8vh,15px);line-height:1.4}
  .wbt-next{margin-top:clamp(10px,2vh,24px);padding-top:clamp(8px,1.6vh,18px)}
  .qlink{padding:clamp(8px,1.3vh,12px) 18px;font-size:14px}

  /* 02 steps + principle */
  .wbt-steps .dot{margin-bottom:clamp(8px,1.6vh,14px)}
  .wbt-steps h3{font-size:13px;margin-bottom:6px}
  .wbt-steps p{font-size:clamp(13px,1.8vh,15px);line-height:1.4}
  .wbt-principle{margin-top:clamp(16px,3.4vh,34px);padding:clamp(16px,2.8vh,28px) 36px;font-size:clamp(18px,2.8vh,26px)}

  /* 03 outputs: seven expandable cards */
  .wbt .wbt-ch3 h2{font-size:clamp(24px,3.8vh,38px)}
  .wbt-hint{margin-top:clamp(10px,2vh,24px)}
  .wbt-hint+.wbt-outputs{margin-top:clamp(5px,1vh,10px)}
  .wbt-outputs{gap:clamp(8px,1.6vh,14px)}
  .wbt-outputs summary{padding:clamp(10px,1.8vh,18px) 18px clamp(12px,2vh,18px)}
  .wbt .wbt-outputs h3{margin:clamp(4px,.9vh,8px) 0;font-size:clamp(14px,2vh,17px)}
  .wbt-outputs summary>p{font-size:clamp(12px,1.6vh,14px);line-height:1.35}
  .wbt-outputs .detail{margin:0 18px}
  .wbt-ch3 .wbt-result>p{max-width:560px}
  .wbt-outputs .detail{margin:0 20px}
  .wbt-result{margin-top:clamp(14px,3vh,30px);padding-top:clamp(12px,2.4vh,22px)}
  .wbt-result>p{font-size:clamp(17px,2.6vh,24px)}
  .wbt-decide span{padding:7px 14px;font-size:12px}

  /* 04 meaning + closer */
  .wbt-meaning .tile p{font-size:clamp(12px,1.6vh,15px);line-height:1.35}
  .wbt-closer{margin-top:clamp(10px,1.6vh,16px);padding:clamp(14px,2.4vh,24px) 32px;font-size:clamp(17px,2.6vh,24px)}

  /* 05 you */
  .wbt-you{margin-top:clamp(12px,2.6vh,28px);gap:32px}
  .wbt-you .big{font-size:clamp(80px,15vh,160px)}
  .wbt-you p{font-size:clamp(18px,3vh,28px);padding-bottom:4px}
  .wbt-show{margin-top:clamp(12px,2.6vh,28px);font-size:clamp(17px,2.4vh,22px)}
  .wbt-asks{margin-top:clamp(8px,1.4vh,14px)}
  .wbt-question{margin-top:clamp(10px,1.6vh,16px);padding:clamp(14px,2.4vh,24px) 32px;font-size:clamp(16px,2.4vh,20px)}
  .wbt-end{padding-bottom:clamp(12px,2vh,32px)}
}

/* ---------- Responsive ---------- */
@media (max-width:1000px){
  .wbt-hint{display:block}
  .wbt-hint+.wbt-outputs{margin-top:12px}
  .wbt-hero-grid{grid-template-columns:1fr;gap:36px}
  .wbt-scope,.wbt-outputs{grid-template-columns:1fr 1fr}
  .wbt-scope .tile,.wbt-scope .tile:nth-child(n+4),.wbt-outputs .out{grid-column:span 1}
  .wbt-scope .tile:last-child{grid-column:span 2}
  .wbt-outputs .out.hero-out{grid-column:span 2}
  .wbt-meaning,.wbt-asks{grid-template-columns:1fr 1fr}
  .wbt-strip{flex-wrap:wrap}
  .wbt-strip li{flex:1 1 33%;padding:14px 18px;border-left:0!important;border-top:1px solid var(--rule)}
  .wbt-strip-label{flex:1 1 100%!important;border-right:0;border-top:0!important}
  .wbt-steps{grid-template-columns:1fr;gap:26px;margin-top:44px}
  .wbt-steps::before,.wbt-steps::after{display:none}
  .wbt-steps li{display:grid;grid-template-columns:46px 1fr;gap:0 18px;text-align:left;padding:0}
  .wbt-steps .dot{grid-row:span 2;margin:0}
}
@media (max-width:700px){
  .wbt-wrap{padding:0 20px}
  .wbt-hero{padding-top:56px}
  .wbt-chapter{padding:72px 0 48px}
  .wbt-scope,.wbt-outputs,.wbt-meaning,.wbt-asks{grid-template-columns:1fr}
  .wbt-scope .tile:last-child,.wbt-outputs .out.hero-out{grid-column:span 1}
  .wbt-strip li{flex:1 1 50%}
  .wbt-principle,.wbt-closer{padding:26px 24px}
  .wbt-question{padding:24px}
}
@media (prefers-reduced-motion:reduce){
  .wbt *,.wbt *::before,.wbt *::after{animation:none!important;transition:none!important}
  .wbt-hero h1 .ln span{transform:none}
  .wbt-js .wbt .reveal{opacity:1;transform:none}
  .wbt-steps::after{width:83.333%}
  .tile::before{transform:scaleY(1)}
  .wbt-you .big{transform:none}
}
.wbt .wbt-outputs summary h3{padding-right:30px}
/* ---------- 01 scope: expandable cards (same +/- pattern as the deliverables) ---------- */
.wbt-hint-scope{display:flex;justify-content:flex-end}
.wbt-hint-scope span{grid-column:auto;color:var(--mid)}
.wbt-hint-scope+.wbt-scope{margin-top:10px}
.wbt-scope.has-open{align-items:start}
.wbt-scope details.tile{display:block;padding:0}
.wbt-scope summary{position:relative;display:block;cursor:pointer;list-style:none;padding:26px 56px 26px 28px}
.wbt-scope summary::-webkit-details-marker{display:none}
.wbt-scope summary:focus-visible{outline:2px solid var(--t,var(--blue));outline-offset:-4px}
.wbt-scope summary .n{font-family:PlexMono,monospace;font-size:12px;letter-spacing:.08em;color:var(--t,var(--blue))}
.wbt-scope .plus{position:absolute;top:18px;right:18px;width:24px;height:24px;border:1.5px solid var(--t,var(--blue));border-radius:50%;color:var(--t,var(--blue));transition:background .3s,color .3s}
.wbt-scope .plus::before,.wbt-scope .plus::after{content:"";position:absolute;left:50%;top:50%;width:10px;height:1.5px;background:currentColor;transform:translate(-50%,-50%);transition:transform .3s}
.wbt-scope .plus::after{transform:translate(-50%,-50%) rotate(90deg)}
.wbt-scope details[open] .plus::after{transform:translate(-50%,-50%) rotate(0)}
.wbt-scope summary:hover .plus,.wbt-scope details[open] .plus{background:var(--t,var(--blue));color:#fff}
.wbt-scope .detail{margin:0 28px;padding:16px 0 26px;border-top:1px solid var(--rule)}
.wbt-scope .detail p{font-size:15px;line-height:1.55;color:var(--mid)}
.wbt-scope .detail p+p{margin-top:16px}
.wbt-scope .detail .ask{color:#161616;font-weight:600}
.wbt-scope .detail .ask b{display:block;margin-bottom:4px;font-family:PlexMono,monospace;font-size:11px;font-weight:400;letter-spacing:.08em;text-transform:uppercase;color:var(--t,var(--blue))}
@media (min-width:1200px){
  .wbt-hint-scope{margin-top:clamp(10px,2vh,24px)}
  .wbt-hint-scope+.wbt-scope{margin-top:clamp(5px,1vh,10px)}
  .wbt-scope summary{padding:clamp(10px,1.8vh,20px) 52px clamp(12px,2vh,22px) 22px}
  .wbt-scope .detail{margin:0 22px}
  .wbt-scope .detail p{font-size:clamp(13px,1.8vh,15px);line-height:1.5}
}
.wbt-you+.wbt-asks{margin-top:44px}
@media (min-width:1200px){.wbt-you+.wbt-asks{margin-top:clamp(14px,3vh,32px)}}

/* ---------- 02 sprint timeline cards ---------- */
.wbt-sprints{margin-top:48px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;align-items:start}
.spr{background:#fff;border:1px solid var(--rule);border-top:3px solid var(--t,var(--blue));position:relative;overflow:hidden;transition:transform .4s,box-shadow .4s}
.alt .spr{border-color:rgba(0,0,0,.08);border-top-color:var(--t,var(--blue))}
.spr summary{position:relative;cursor:pointer;list-style:none;padding:22px 52px 22px 24px}
.spr summary::-webkit-details-marker{display:none}
.spr summary:focus-visible{outline:2px solid var(--t,var(--blue));outline-offset:-4px}
.spr-week{display:block;font-size:11px;color:var(--t,var(--blue));margin-bottom:10px}
.spr summary h3{margin:0 0 12px;font-size:22px;font-weight:600;line-height:1.2;color:#161616}
.spr summary p{font-size:14px;line-height:1.5;color:var(--mid)}
.spr summary p+p{margin-top:10px}
.spr-output b{color:#161616;font-weight:600}
.spr .plus{position:absolute;top:20px;right:18px;width:26px;height:26px;border:1.5px solid var(--t,var(--blue));border-radius:50%;color:var(--t,var(--blue));transition:background .3s,color .3s}
.spr .plus::before,.spr .plus::after{content:"";position:absolute;left:50%;top:50%;width:10px;height:1.5px;background:currentColor;transform:translate(-50%,-50%);transition:transform .3s}
.spr .plus::after{transform:translate(-50%,-50%) rotate(90deg)}
.spr[open] .plus::after{transform:translate(-50%,-50%) rotate(0)}
.spr summary:hover .plus,.spr[open] .plus{background:var(--t,var(--blue));color:#fff}
.spr-detail{margin:0 24px;padding:18px 0 24px;border-top:1px solid var(--rule)}
.spr-detail p{font-size:14px;line-height:1.55;color:var(--mid);margin:0 0 10px}
.spr-detail .spr-section-label{margin-bottom:6px}
.spr-detail .spr-section-label b{display:block;font-family:PlexMono,monospace;font-size:11px;font-weight:400;letter-spacing:.08em;text-transform:uppercase;color:var(--t,var(--blue))}
.spr-detail .spr-output{margin-top:16px;padding-top:14px;border-top:1px solid var(--rule)}
.spr-detail .spr-output b{display:block;font-family:PlexMono,monospace;font-size:11px;font-weight:400;letter-spacing:.08em;text-transform:uppercase;color:var(--t,var(--blue));margin-bottom:4px}
.spr-detail .spr-output span{display:block;font-size:14px;line-height:1.5;color:#161616}
.spr-detail ul{list-style:none;margin:0 0 14px;padding:0;display:grid;gap:7px}
.spr-detail li{position:relative;padding-left:16px;font-size:14px;line-height:1.45;color:var(--mid)}
.spr-detail li::before{content:"";position:absolute;left:0;top:.62em;width:7px;height:1.5px;background:var(--t,var(--blue))}
@media (max-width:1000px){.wbt-sprints{grid-template-columns:1fr 1fr}}
@media (max-width:600px){.wbt-sprints{grid-template-columns:1fr}}
@media (min-width:1200px){
  .wbt-sprints{margin-top:clamp(16px,3vh,32px);gap:clamp(10px,1.6vh,14px)}
  .spr summary{padding:clamp(14px,2.2vh,20px) 50px clamp(14px,2.2vh,20px) 20px}
  .spr summary h3{font-size:clamp(16px,2.4vh,20px);margin-bottom:clamp(6px,1vh,10px)}
  .spr summary p{font-size:clamp(12px,1.6vh,14px)}
  .spr-detail{margin:0 20px;padding:clamp(12px,2vh,18px) 0 clamp(14px,2.2vh,22px)}
  .spr-detail p,.spr-detail li{font-size:clamp(12px,1.6vh,14px)}
}