/* ==========================================================================
   How we build: pinned scroll steps (homepage).
   Design: prototypes/how-we-build-v3.html (Claude Design export).
   Divi mapping: row .am-hwb = scroll track, column .am-hwb-pin = sticky stage,
   Text modules .am-hwb-card = steps (h3 + p, editable in the builder).
   The visuals are decorative and injected by assets/js/how-we-build.js from
   inc/partials/how-we-build-visuals.html.
   ========================================================================== */

 .am-hwb{
  --am-ink:#101010; --am-paper:#fbfbfa; --am-sand:#f6f5f1; --am-accent:#2338ec; --am-accent-soft:#8b96ff;
  --am-muted:#5d5d57; --am-faint:#8a8a83; --am-rule:#e4e3df; --am-hair:#c9c7c0;
  --am-white:#ffffff; --am-rule-soft:#f1f0ec; --am-accent-tint:#dfe2fe; --am-avatar:#eceaf9;
  --am-success:#1d8a4e; --am-success-rule:#bfe3cd; --am-off:#b5b4ae;
  --am-font:"Space Grotesk",Helvetica,Arial,sans-serif; --am-mono:ui-monospace,SFMono-Regular,Menlo,monospace;
  --am-fs-title:26px; --am-fs-body:16px; --am-fs-ui:14px; --am-fs-ui-sm:12px; --am-fs-label:11px; --am-fs-micro:10px; --am-fs-nano:9px;
  --am-lh-title:1.2; --am-lh-body:1.6; --am-track-label:.08em;
  --am-max:1360px; --am-pad-x:40px; --am-col-gap:72px; --am-panel-h:max(440px,min(72vh,580px));
  --am-sp-1:4px; --am-sp-2:8px; --am-sp-3:12px; --am-sp-4:16px; --am-sp-5:20px; --am-sp-6:24px;
  --am-border:1px solid var(--am-rule); --am-border-soft:1px solid var(--am-rule-soft);
  --am-ease-out:cubic-bezier(.2,.8,.2,1); --am-ease-drop:cubic-bezier(.2,.9,.3,1.2); --am-ease-pop:cubic-bezier(.3,1.6,.5,1);
  --am-beat:.38s;
}
@property --am-hwb-n{syntax:"<integer>";inherits:false;initial-value:4}

/* scroll track + pinned stage */
.am-hwb{position:relative;height:560vh;background:var(--am-paper)}
.am-hwb-pin{position:sticky;top:0;height:100vh;max-width:var(--am-max);margin:0 auto;padding:0 var(--am-pad-x);
  display:grid;grid-template-columns:1.1fr 1fr;column-gap:var(--am-col-gap);align-content:center}
.am-hwb-pin > .am-hwb-card{grid-column:2}
.am-hwb-scrollbar{position:absolute;left:var(--am-pad-x);width:calc((100% - 2*var(--am-pad-x) - var(--am-col-gap))*1.1/2.1);
  top:calc(50% + var(--am-panel-h)/2 + 14px);height:2px;background:var(--am-rule)}
.am-hwb-scrollbar::after{content:"";position:absolute;inset:0 auto 0 0;width:calc(var(--am-progress,.1667)*100%);background:var(--am-accent);transition:width .4s}

/* card = list row + its visual (visual is absolutely placed in the left column) */
.am-hwb-card{border-top:1px solid var(--am-rule);padding:18px 0;display:grid;grid-template-columns:24px 1fr;column-gap:var(--am-sp-5);cursor:pointer;transition:border-color .3s}
.am-hwb-card::before{content:counter(am-hwb,decimal-leading-zero);grid-column:1;grid-row:1;font-family:var(--am-mono);font-size:var(--am-fs-ui-sm);letter-spacing:.06em;padding-top:6px;color:var(--am-off);transition:color .3s}
.am-hwb-card h3{margin:0;font-weight:600;font-size:var(--am-fs-title);line-height:var(--am-lh-title);letter-spacing:-.015em;color:var(--am-off);transition:color .3s}
.am-hwb-card:hover h3{color:var(--am-muted)}
.am-hwb-card.is-past::before{color:var(--am-accent)}
.am-hwb-card.is-active{border-top-color:var(--am-accent)}
.am-hwb-card.is-active::before{color:var(--am-accent)}
.am-hwb-card.is-active h3{color:var(--am-ink)}
.am-hwb-visual{position:absolute;left:var(--am-pad-x);top:calc(50% - var(--am-panel-h)/2);height:var(--am-panel-h);
  width:calc((100% - 2*var(--am-pad-x) - var(--am-col-gap))*1.1/2.1);background:var(--am-sand);border:var(--am-border);
  display:flex;align-items:center;justify-content:center;padding:56px 40px 40px;
  opacity:0;transform:translateY(16px);transition:opacity .5s,transform .5s;pointer-events:none}
.am-hwb-card.is-past .am-hwb-visual{transform:translateY(-16px)}
.am-hwb-card.is-active .am-hwb-visual{opacity:1;transform:none;pointer-events:auto}
.am-hwb-vhead{position:absolute;top:18px;left:20px;right:20px;display:flex;justify-content:space-between;font-family:var(--am-mono);font-size:var(--am-fs-label);letter-spacing:var(--am-track-label);color:var(--am-faint)}
.am-hwb-vhead b{font-weight:400;color:var(--am-accent)}

/* shared UI atoms */
.am-hwb-box{width:100%;background:var(--am-white);border:var(--am-border)}
.am-hwb-mono{font-family:var(--am-mono);font-size:var(--am-fs-micro);letter-spacing:var(--am-track-label);color:var(--am-faint)}
.am-hwb-avatar{flex:none;display:flex;align-items:center;justify-content:center;border-radius:50%;background:var(--am-avatar);color:var(--am-accent);font-family:var(--am-mono)}
.am-hwb-row{display:flex;align-items:center;gap:var(--am-sp-3);padding:13px var(--am-sp-4);border-bottom:var(--am-border-soft);font-size:var(--am-fs-ui)}

/* ---------- 01 ANALYSE ---------- */
.am-hwb-map{max-width:460px;display:flex;flex-direction:column;gap:var(--am-sp-4);width:100%}
.am-hwb-lanes{position:relative}
.am-hwb-lane{display:flex;border-bottom:var(--am-border-soft)}
.am-hwb-lane-name{width:78px;flex:none;padding:16px 12px;border-right:var(--am-border-soft);display:flex;align-items:center}
.am-hwb-nodes{flex:1;display:flex;align-items:center;padding:14px 12px}
.am-hwb-node{flex:1;position:relative;padding:9px 8px;border:var(--am-border);background:var(--am-white);font-size:var(--am-fs-ui-sm);line-height:1.2;color:#333;text-align:center}
.am-hwb-node + .am-hwb-node{margin-left:14px}
.am-hwb-node + .am-hwb-node::before{content:"";position:absolute;right:100%;top:50%;width:15px;height:1px;background:#d6d5d0}
.am-hwb-node.is-manual{border-style:dashed;border-color:var(--am-off);background:var(--am-paper)}
.am-hwb-node.is-issue::after{content:"";position:absolute;top:-5px;right:-5px;width:10px;height:10px;border-radius:50%;background:var(--am-accent);border:2px solid var(--am-white)}
.am-hwb-scan{position:absolute;top:0;bottom:0;left:78px;width:2px;background:var(--am-accent);box-shadow:0 0 18px 4px rgba(35,56,236,.25);opacity:0;z-index:2}
.am-hwb-findings{padding:14px 16px;display:flex;flex-direction:column;gap:var(--am-sp-2)}
.am-hwb-finding{display:flex;align-items:center;gap:10px;font-size:13px;color:#444}
.am-hwb-finding::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--am-accent);flex:none}
.am-hwb-output{display:flex;align-items:center;gap:var(--am-sp-3)}
.am-hwb-output-line{flex:1;height:1px;background:var(--am-accent)}
.am-hwb-scope{flex:none;white-space:nowrap;font-family:var(--am-mono);font-size:11.5px;letter-spacing:.04em;padding:8px 12px;border:1px solid var(--am-accent);background:var(--am-accent);color:var(--am-white)}

.is-active .am-hwb-scan{animation:am-hwb-k-scan 2.28s linear var(--am-beat) both}
.is-active .am-hwb-node{animation:am-hwb-k-pop .4s ease var(--d) both}
.is-active .am-hwb-node.is-issue::after{animation:am-hwb-k-dot .35s var(--am-ease-pop) 2.66s both}
.is-active .am-hwb-finding{animation:am-hwb-k-rise .4s ease var(--d) both}
.is-active .am-hwb-output-line{transform-origin:left;animation:am-hwb-k-grow-x .6s ease 3.8s both}
.is-active .am-hwb-scope{animation:am-hwb-k-scope .4s ease 3.8s both}
@keyframes am-hwb-k-scan{0%{left:78px;opacity:1}92%{opacity:1}100%{left:calc(100% - 2px);opacity:0}}
@keyframes am-hwb-k-pop{from{opacity:0;transform:scale(.92)}to{opacity:1;transform:none}}
@keyframes am-hwb-k-dot{from{transform:scale(0)}to{transform:scale(1)}}
@keyframes am-hwb-k-rise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes am-hwb-k-grow-x{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes am-hwb-k-scope{from{background:var(--am-white);color:var(--am-accent)}to{background:var(--am-accent);color:var(--am-white)}}

/* ---------- 02 STRUCTURAL BUILD ---------- */
.am-hwb-visual.is-board{padding:56px 32px 32px}
.am-hwb-app{max-width:480px;display:flex}
.am-hwb-side{width:96px;flex:none;border-right:1px solid #eeede9;padding:14px 0;display:flex;flex-direction:column;gap:2px}
.am-hwb-side span{padding:8px 12px;font-size:var(--am-fs-ui-sm);color:#888;border-left:2px solid transparent}
.am-hwb-side span.is-current{color:var(--am-ink);background:var(--am-sand);border-left-color:var(--am-accent)}
.am-hwb-main{flex:1;min-width:0;display:flex;flex-direction:column}
.am-hwb-apphead{padding:12px 14px;border-bottom:1px solid #eeede9;display:flex;justify-content:space-between;align-items:center;font-weight:600;font-size:var(--am-fs-ui)}
.am-hwb-apphead .am-hwb-mono{font-size:9.5px;letter-spacing:.06em;color:var(--am-accent);font-weight:400}
.am-hwb-cols{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;padding:12px 10px 14px;background:var(--am-paper);min-height:250px}
.am-hwb-col{display:flex;flex-direction:column;gap:6px}
.am-hwb-colhead{font-family:var(--am-mono);font-size:var(--am-fs-nano);letter-spacing:.06em;color:var(--am-faint);padding:0 2px 4px;border-bottom:2px solid var(--am-rule)}
.am-hwb-col.is-done .am-hwb-colhead{border-bottom-color:var(--am-accent)}
.am-hwb-ticket{background:var(--am-white);border:var(--am-border);padding:8px;display:flex;flex-direction:column;gap:8px;font-size:11.5px;color:#222}
.am-hwb-ticket div{display:flex;justify-content:space-between;align-items:center}
.am-hwb-ticket .am-hwb-avatar{width:18px;height:18px;font-size:8px}
.am-hwb-ticket .am-hwb-mono{font-size:var(--am-fs-nano);letter-spacing:0}
.is-active .am-hwb-ticket{animation:am-hwb-k-drop .45s var(--am-ease-drop) var(--d) both}
.is-active .am-hwb-col.is-done .am-hwb-colhead{animation:am-hwb-k-line-on .4s ease 3.8s both}
@keyframes am-hwb-k-drop{from{opacity:0;transform:translateY(-14px)}to{opacity:1;transform:none}}
@keyframes am-hwb-k-line-on{from{border-bottom-color:var(--am-rule)}to{border-bottom-color:var(--am-accent)}}

/* ---------- 03 AUTOMATION (loop 3.04s) ---------- */
.am-hwb-flow{width:100%;max-width:360px;display:flex;flex-direction:column;align-items:center}
.am-hwb-link{width:0;height:22px;border-left:1px solid var(--am-rule)}
.am-hwb-action{width:100%;background:var(--am-white);border:var(--am-border);padding:14px 16px;display:flex;align-items:center;gap:14px;color:var(--am-faint)}
.am-hwb-action .am-hwb-mono{width:58px;color:inherit}
.am-hwb-action span:nth-child(2){flex:1;font-size:14.5px;color:var(--am-ink)}
.am-hwb-action i{font-style:normal;font-family:var(--am-mono);font-size:var(--am-fs-label);color:inherit}
.is-active .am-hwb-flow > *{animation:3.04s linear infinite both}
.is-active .am-hwb-flow > .f1{animation-name:am-hwb-k-flow-1}
.is-active .am-hwb-flow > .f2{animation-name:am-hwb-k-flow-2}
.is-active .am-hwb-flow > .f3{animation-name:am-hwb-k-flow-3}
.is-active .am-hwb-flow > .f4{animation-name:am-hwb-k-flow-4}
@keyframes am-hwb-k-flow-1{0%,12.4%{border-color:var(--am-rule);color:var(--am-hair)}12.5%,100%{border-color:var(--am-accent);color:var(--am-accent)}}
@keyframes am-hwb-k-flow-2{0%,24.9%{border-color:var(--am-rule);color:var(--am-hair)}25%,100%{border-color:var(--am-accent);color:var(--am-accent)}}
@keyframes am-hwb-k-flow-3{0%,37.4%{border-color:var(--am-rule);color:var(--am-hair)}37.5%,100%{border-color:var(--am-accent);color:var(--am-accent)}}
@keyframes am-hwb-k-flow-4{0%,49.9%{border-color:var(--am-rule);color:var(--am-hair)}50%,100%{border-color:var(--am-accent);color:var(--am-accent)}}

/* ---------- 04 AI AGENTS (loop 3.8s) ---------- */
.am-hwb-agent{max-width:400px}
.am-hwb-agenthead{display:flex;align-items:center;gap:var(--am-sp-3);padding:var(--am-sp-4);border-bottom:1px solid #eeede9}
.am-hwb-agenticon{width:28px;height:28px;background:var(--am-accent);display:flex;align-items:center;justify-content:center}
.am-hwb-agenticon::after{content:"";width:8px;height:8px;background:var(--am-white)}
.am-hwb-agentname{flex:1;display:flex;flex-direction:column;gap:2px;font-weight:600;font-size:15px}
.am-hwb-agentname .am-hwb-mono{font-weight:400;font-size:10.5px;letter-spacing:0}
.am-hwb-pill{font-family:var(--am-mono);font-size:var(--am-fs-micro);letter-spacing:var(--am-track-label);color:var(--am-success);border:1px solid var(--am-success-rule);padding:4px 8px}
.am-hwb-mail{padding:12px 16px;border-bottom:var(--am-border-soft);display:flex;flex-direction:column;gap:6px;background:var(--am-paper)}
.am-hwb-mail i{display:block;height:6px;background:var(--am-rule)}
.am-hwb-check{width:16px;height:16px;flex:none;border:1px solid var(--am-hair);background:var(--am-white);color:var(--am-white);font-size:10px;display:flex;align-items:center;justify-content:center}
.am-hwb-row .am-hwb-busy{margin-left:auto;font-family:var(--am-mono);font-size:9.5px;letter-spacing:.06em;color:var(--am-accent);opacity:0}
.is-active .am-hwb-agenticon::after{animation:am-hwb-k-pulse .38s ease-in-out infinite alternate}
.is-active .t1 .am-hwb-check{animation:am-hwb-k-check-1 3.8s linear infinite}
.is-active .t2 .am-hwb-check{animation:am-hwb-k-check-2 3.8s linear infinite}
.is-active .t3 .am-hwb-check{animation:am-hwb-k-check-3 3.8s linear infinite}
.is-active .t4 .am-hwb-check{animation:am-hwb-k-check-4 3.8s linear infinite}
.is-active .t1 .am-hwb-busy{animation:am-hwb-k-busy-1 3.8s linear infinite}
.is-active .t2 .am-hwb-busy{animation:am-hwb-k-busy-2 3.8s linear infinite}
.is-active .t3 .am-hwb-busy{animation:am-hwb-k-busy-3 3.8s linear infinite}
.is-active .t4 .am-hwb-busy{animation:am-hwb-k-busy-4 3.8s linear infinite}
@keyframes am-hwb-k-pulse{from{transform:scale(.5)}to{transform:scale(1)}}
@keyframes am-hwb-k-check-1{0%,9.9%{border-color:var(--am-hair);background:var(--am-white)}10%,19.9%{border-color:var(--am-accent);background:var(--am-white)}20%,100%{border-color:var(--am-accent);background:var(--am-accent)}}
@keyframes am-hwb-k-check-2{0%,29.9%{border-color:var(--am-hair);background:var(--am-white)}30%,39.9%{border-color:var(--am-accent);background:var(--am-white)}40%,100%{border-color:var(--am-accent);background:var(--am-accent)}}
@keyframes am-hwb-k-check-3{0%,49.9%{border-color:var(--am-hair);background:var(--am-white)}50%,59.9%{border-color:var(--am-accent);background:var(--am-white)}60%,100%{border-color:var(--am-accent);background:var(--am-accent)}}
@keyframes am-hwb-k-check-4{0%,69.9%{border-color:var(--am-hair);background:var(--am-white)}70%,79.9%{border-color:var(--am-accent);background:var(--am-white)}80%,100%{border-color:var(--am-accent);background:var(--am-accent)}}
@keyframes am-hwb-k-busy-1{0%,9.9%,20%,100%{opacity:0}10%,19.9%{opacity:1}}
@keyframes am-hwb-k-busy-2{0%,29.9%,40%,100%{opacity:0}30%,39.9%{opacity:1}}
@keyframes am-hwb-k-busy-3{0%,49.9%,60%,100%{opacity:0}50%,59.9%{opacity:1}}
@keyframes am-hwb-k-busy-4{0%,69.9%,80%,100%{opacity:0}70%,79.9%{opacity:1}}

/* ---------- 05 DASHBOARDS ---------- */
.am-hwb-dash{width:100%;max-width:420px;display:flex;flex-direction:column;gap:var(--am-sp-2)}
.am-hwb-kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--am-sp-2)}
.am-hwb-kpi{background:var(--am-white);border:var(--am-border);padding:14px;display:flex;flex-direction:column;gap:var(--am-sp-3)}
.am-hwb-kpi .am-hwb-mono{letter-spacing:.06em}
.am-hwb-meter{height:4px;background:#eeede9;position:relative}
.am-hwb-meter::after{content:"";position:absolute;inset:0 auto 0 0;width:var(--w);background:var(--am-accent)}
.am-hwb-chart{background:var(--am-white);border:var(--am-border);padding:18px 16px 14px;display:flex;flex-direction:column;gap:var(--am-sp-3)}
.am-hwb-chart header{display:flex;justify-content:space-between}
.am-hwb-live{color:var(--am-accent)}
.am-hwb-bars{height:150px;display:flex;align-items:flex-end;gap:var(--am-sp-2)}
.am-hwb-bar{flex:1;height:var(--h);background:var(--am-accent-tint)}
.am-hwb-bar.is-now{background:var(--am-accent)}
.is-active .am-hwb-meter::after{animation:am-hwb-k-fill .8s var(--am-ease-out) var(--d) both}
.is-active .am-hwb-bar{animation:am-hwb-k-grow-h .6s var(--am-ease-out) var(--d) both}
.is-active .am-hwb-bar.is-now{animation:am-hwb-k-grow-h .6s var(--am-ease-out) var(--d) both,am-hwb-k-tick .38s steps(1) 1.9s infinite alternate}
.is-active .am-hwb-live{animation:am-hwb-k-blink .76s steps(1) infinite}
@keyframes am-hwb-k-fill{from{width:0}}
@keyframes am-hwb-k-grow-h{from{height:0}}
@keyframes am-hwb-k-tick{from{height:88%}to{height:94%}}
@keyframes am-hwb-k-blink{0%{opacity:1}50%{opacity:.35}}

/* ---------- 06 ONBOARDING ---------- */
.am-hwb-team{max-width:400px}
.am-hwb-teamhead{padding:14px 16px;border-bottom:1px solid #eeede9;display:flex;justify-content:space-between}
.am-hwb-count{color:var(--am-accent);counter-reset:n var(--am-hwb-n)}
.am-hwb-count::before{content:counter(n) " / 4 LIVE"}
.am-hwb-team .am-hwb-row{padding:14px 16px}
.am-hwb-team .am-hwb-avatar{width:30px;height:30px;font-size:10.5px}
.am-hwb-dept{width:90px}
.am-hwb-progress{flex:1;height:4px;background:#eeede9;position:relative}
.am-hwb-progress::after{content:"";position:absolute;inset:0 auto 0 0;width:100%;background:var(--am-accent)}
.am-hwb-tag{width:30px;font-family:var(--am-mono);font-size:var(--am-fs-micro);letter-spacing:var(--am-track-label);color:var(--am-accent)}
.is-active .am-hwb-progress::after{animation:am-hwb-k-fill .7s var(--am-ease-out) var(--d) both}
.is-active .am-hwb-tag{animation:am-hwb-k-fade .3s ease var(--d2) both}
.is-active .am-hwb-count{animation:am-hwb-k-count 3.42s linear both}
@keyframes am-hwb-k-fade{from{opacity:0}}
@keyframes am-hwb-k-count{0%,33.2%{--am-hwb-n:0}33.3%,55.5%{--am-hwb-n:1}55.6%,77.7%{--am-hwb-n:2}77.8%,99.9%{--am-hwb-n:3}100%{--am-hwb-n:4}}

/* ---------- 980px ---------- */
@media (max-width:1199px){
  .am-hwb{--am-pad-x:32px;--am-col-gap:40px;--am-panel-h:max(420px,min(60vh,480px));--am-fs-title:22px}
  .am-hwb-pin{grid-template-columns:1fr 1fr}
  .am-hwb-visual,.am-hwb-scrollbar{width:calc((100% - 2*var(--am-pad-x) - var(--am-col-gap))/2)}
  .am-hwb-visual{padding:52px 24px 24px}
}
/* ---------- 375px ---------- */
@media (max-width:767px){
  .am-hwb{--am-pad-x:20px;--am-fs-title:22px}
  .am-hwb{height:auto}
  .am-hwb-pin{position:static;height:auto;display:block;padding:40px var(--am-pad-x)}
  .am-hwb-scrollbar{display:none}
  .am-hwb-card{display:flex;flex-direction:column;gap:var(--am-sp-4);padding:24px 0 32px;cursor:default}
  .am-hwb-visual{position:relative;left:auto;top:auto;width:100%;height:360px;min-height:0;opacity:1;transform:none;order:-1;padding:48px 16px 16px;overflow:hidden}
  .am-hwb-card::before{content:counter(am-hwb,decimal-leading-zero);grid-column:1;grid-row:1;padding-top:0;color:var(--am-accent)}
  .am-hwb-card h3{color:var(--am-ink)}
      .am-hwb-visual > *{transform:scale(.82);transform-origin:center}
}

/* ---------- Divi wrappers ---------- */
.am-page .am-hwb.et_pb_row{width:100%;max-width:none;padding:0 !important;margin:0;font-family:var(--am-font)}
.am-page .am-hwb .am-hwb-pin.et_pb_column{position:sticky;top:0;width:100%;float:none;margin:0 auto;counter-reset:am-hwb}
.am-page .am-hwb-card.et_pb_module{position:static;margin:0 !important;width:auto;counter-increment:am-hwb}
.am-hwb-card .et_pb_text_inner{display:contents}
.am-page .am-hwb-card h3{grid-column:2;grid-row:1;padding:0 !important;font-family:var(--am-font)}
.am-hwb-card p{grid-column:2;grid-row:2;margin:0;padding:0 !important;max-width:440px;max-height:0;overflow:hidden;opacity:0;
  font-size:var(--am-fs-body);line-height:var(--am-lh-body);color:var(--am-muted);text-wrap:pretty;
  transition:max-height .45s ease,opacity .3s ease,margin-top .45s ease}
.am-hwb-card.is-active p{max-height:140px;opacity:1;margin-top:10px}
@media (max-width:767px){
  .am-hwb-card p{max-height:none;opacity:1;margin-top:0}
  .am-page .am-hwb .am-hwb-pin.et_pb_column{position:static}
}

/* ---------- Fit the site layout (desktop/tablet) ----------
   Align with the page's content column, pin just under the sticky header
   instead of centring in a full-screen stage, and keep the scroll track
   short: about half a screen of scrolling per step. */
@media (min-width:768px){
  .am-hwb{--am-hwb-top:150px}
  .am-page .am-hwb.et_pb_row{height:calc(var(--am-panel-h) + 40px + 300vh);margin-top:48px}
  .am-page .am-hwb .am-hwb-pin.et_pb_column{top:var(--am-hwb-top);height:auto;min-height:calc(var(--am-panel-h) + 40px);
    align-content:center;margin-left:auto !important;margin-right:auto !important;max-width:var(--am-max)}
  .am-hwb-visual{top:0}
  .am-hwb-scrollbar{top:calc(var(--am-panel-h) + 14px)}
}

/* ---------- Keep the section title in view while the steps are pinned ----------
   The first row of the section (eyebrow, title, intro) sticks under the site
   header; the step stage sticks right under it. JS measures both and sets
   --am-hwb-top and --am-panel-h so the stage fills the rest of the screen. */
@media (min-width:768px){
  .am-page .et_pb_section:has(> .am-hwb) > .et_pb_row:first-child{position:sticky;z-index:3;background:var(--am-paper);padding-top:20px !important;padding-bottom:4px !important}
  .am-page .am-hwb.et_pb_row{margin-top:16px}
}

/* Shorter screens: shrink the mock-ups with the panel so they never spill out. */
@media (min-width:768px){
  .am-hwb-visual{overflow:hidden}
  .am-hwb-visual > *:not(.am-hwb-vhead){transform:scale(var(--am-hwb-scale,1));transform-origin:center}
}

/* Responsive fixes (audit 2026-10-26) */
/* Step 02 board: drop the sidebar on smaller screens so the four columns stay readable. */
@media (max-width:1199px){ .am-hwb-side{display:none} }
@media (max-width:767px){ .am-hwb-visual.is-board > *{transform:scale(.74)} }
/* When there is no room to pin the title with the steps, only the steps pin. */
.am-hwb-nohead > .et_pb_row:first-child{position:static !important;transform:none !important}

/* ---------- Phones: pinned horizontal strip (assets/js/how-we-build.js adds .am-hwb--h) ---------- */
@media (max-width:767px){
  .am-page .am-hwb.am-hwb--h .am-hwb-pin.et_pb_column{
    position:sticky !important;top:var(--am-hwb-mtop,80px);height:calc(100vh - var(--am-hwb-mtop,80px));
    height:calc(100svh - var(--am-hwb-mtop,80px));
    padding:16px 0 28px !important;overflow:hidden;display:block
  }
  .am-hwb-strip{display:flex;gap:16px;padding:0 20px;height:100%;overflow:hidden;scroll-padding:0 20px}
  .am-hwb-strip::after{content:"";flex:0 0 4px}
  .am-hwb-strip .am-hwb-card.et_pb_module{
    flex:0 0 calc(100vw - 40px);display:flex !important;flex-direction:column;gap:10px;height:100%;
    padding:20px !important;background:#fff;border:1px solid var(--am-rule);border-top:2px solid var(--am-accent);overflow:hidden
  }
  /* title first, then the text, then the animation */
  .am-hwb-strip .am-hwb-card::before{order:0;padding-top:0;color:var(--am-accent);flex-shrink:0}
  .am-hwb-strip .am-hwb-card h3{order:1;color:var(--am-ink);font-size:22px;flex-shrink:0}
  .am-hwb-strip .am-hwb-card p{order:2;max-height:none;opacity:1;margin:0;flex-shrink:0;overflow:visible}
  .am-hwb-strip .am-hwb-visual{
    order:3;position:relative;left:auto;top:auto;width:100%;height:auto;flex:1 1 auto;min-height:0;
    opacity:1;transform:none !important;transition:none;padding:40px 8px 8px;overflow:hidden
  }
  .am-hwb-strip .am-hwb-visual{align-items:flex-start}
  /* JS sets --am-fit so each animation fits its box whole */
  .am-hwb-strip .am-hwb-visual > *:not(.am-hwb-vhead){transform:scale(var(--am-fit,.72)) !important;transform-origin:center top}
  .am-hwb--h .am-hwb-scrollbar{display:block;position:absolute;left:20px;right:20px;bottom:12px;top:auto;width:auto;height:2px}
}