/* The Build page header: four-layers visual with zoom per layer. Source: prototypes/am-layers-hero-v4.html (Claude Design). */
.am-layers{--am-ink:#101010;--am-sand:#f6f5f1;--am-accent:#2338ec;--am-accent-soft:#8b96ff;--am-muted:#5d5d57;--am-faint:#8a8a83;--am-rule:#e4e3df;--am-hair:#c9c7c0;--am-white:#fff;
  --am-mono:ui-monospace,Menlo,Monaco,"Cascadia Mono",monospace;
  --am-sans:"Space Grotesk",system-ui,sans-serif;
  --am-ease:cubic-bezier(.22,.8,.24,1);
  --am-idle:2s;position:relative;width:100%;max-width:520px;margin-left:auto}
.am-layers svg{display:block;overflow:visible}
.am-layers .am-layers-iso{width:100%;height:auto}
.am-layers .am-layers-flat{display:none;width:100%;height:auto}
.am-layers-sheet *,.am-layers-stage *{vector-effect:non-scaling-stroke}
.am-layers-plane{fill:var(--am-white);stroke:var(--am-hair);stroke-width:1;transition:stroke .3s}
.am-layers-plane--sand{fill:var(--am-sand)}
.am-layers-plane--top{stroke:var(--am-accent)}
.am-layers-rule{fill:none;stroke:var(--am-hair)}
.am-layers-wire{fill:none;stroke:var(--am-faint)}
.am-layers-mark{fill:none;stroke:var(--am-faint)}
.am-layers-box{fill:var(--am-white);stroke:var(--am-muted)}
.am-layers-done{fill:var(--am-ink)}
.am-layers-todo{fill:var(--am-hair)}
.am-layers-loop{fill:none;stroke:var(--am-muted);stroke-dasharray:3 3}
.am-layers-chev,.am-layers-arrow{fill:none;stroke:var(--am-ink)}
.am-layers-tile{fill:none;stroke:var(--am-hair)}
.am-layers-val{fill:var(--am-muted)}
.am-layers-bar{fill:var(--am-white);stroke:var(--am-muted)}
.am-layers-bar--last{fill:var(--am-muted)}
.am-layers-link{fill:none;stroke:var(--am-accent-soft)}
.am-layers-agent{fill:var(--am-white);stroke:var(--am-accent)}
.am-layers-hub{fill:var(--am-accent);stroke:var(--am-accent)}
.am-layers-ping{fill:none;stroke:var(--am-accent);opacity:0;transform-box:fill-box;transform-origin:center}
.am-layers-seg{stroke:var(--am-muted)}
.am-layers-node{fill:var(--am-white);stroke:var(--am-ink)}
.am-layers-node-lit{fill:var(--am-accent);opacity:0}
.am-layers-ring-lit{fill:none;stroke:var(--am-accent);opacity:0}
.am-layers-leader{stroke:var(--am-hair);transition:opacity .2s}
.am-layers-label{font-family:var(--am-mono);font-size:10px;letter-spacing:.1em;fill:var(--am-muted);transition:opacity .2s}
.am-layers-label--lit{fill:var(--am-accent);opacity:0}
.am-layers-posts{fill:none;stroke:var(--am-hair);stroke-dasharray:1 3}
.am-layers-pulse{fill:var(--am-accent);opacity:0}
.am-layers-cap circle{fill:var(--am-accent)}
.am-layers-cap text{font-family:var(--am-mono);font-size:9px;letter-spacing:.14em;fill:var(--am-faint)}
/* hover zones: transparent, never move; switched off while a layer is zoomed */
.am-layers-hits{pointer-events:all}
.am-layers-hit{fill:transparent}
.am-layers--focus .am-layers-hits{pointer-events:none}
/* zoom detail: callouts + panel */
.am-layers-detail{opacity:0;pointer-events:none;transition:opacity .15s}
.am-layers-co-line{fill:none;stroke:var(--am-ink)}
.am-layers-co-dot{fill:var(--am-accent)}
.am-layers-co-text{font-family:var(--am-mono);font-size:9.5px;letter-spacing:.1em;fill:var(--am-ink)}
.am-layers-pn-rule{stroke:var(--am-rule)}
.am-layers-pn-accent{fill:var(--am-accent)}
.am-layers-pn-label{font-family:var(--am-mono);font-size:10px;letter-spacing:.14em;fill:var(--am-accent)}
.am-layers-pn-title{font-family:var(--am-sans);font-size:22px;font-weight:500;letter-spacing:-.01em;fill:var(--am-ink)}
.am-layers-pn-item{font-family:var(--am-mono);font-size:10px;letter-spacing:.1em;fill:var(--am-muted)}
.am-layers-pn-bullet{fill:var(--am-ink)}
/* zoom controls: 01-04 tabs + "see how" link */
.am-layers-ctrl{opacity:0;pointer-events:none;transition:opacity .15s}
.am-layers--focus .am-layers-ctrl{opacity:1;pointer-events:all;transition:opacity .3s ease-out .25s}
.am-layers-tab-hit{fill:transparent;cursor:pointer}
.am-layers-tab text{font-family:var(--am-mono);font-size:10px;letter-spacing:.1em;fill:var(--am-faint);transition:fill .2s}
.am-layers-tab-bar{fill:var(--am-accent);opacity:0;transition:opacity .2s}
.am-layers-go text{font-family:var(--am-mono);font-size:10px;letter-spacing:.14em;fill:var(--am-accent)}
.am-layers--nolinks .am-layers-go{display:none}
.am-layers--focus:not(.am-layers--nolinks) .am-layers-iso{cursor:pointer}
.am-layers[data-focus="1"] .am-layers-tab--1 text,.am-layers[data-focus="2"] .am-layers-tab--2 text,
.am-layers[data-focus="3"] .am-layers-tab--3 text,.am-layers[data-focus="4"] .am-layers-tab--4 text{fill:var(--am-accent)}
.am-layers[data-focus="1"] .am-layers-tab--1 .am-layers-tab-bar,.am-layers[data-focus="2"] .am-layers-tab--2 .am-layers-tab-bar,
.am-layers[data-focus="3"] .am-layers-tab--3 .am-layers-tab-bar,.am-layers[data-focus="4"] .am-layers-tab--4 .am-layers-tab-bar{opacity:1}
/* mobile tap detail (HTML, below the flat stack) */
.am-layers-mpanel{display:none}
.am-layers-mpanel p,.am-layers-mpanel ul{margin:0;padding:0}
.am-layers-m{display:none}
.am-layers[data-mfocus="1"] .am-layers-m--1,.am-layers[data-mfocus="2"] .am-layers-m--2,
.am-layers[data-mfocus="3"] .am-layers-m--3,.am-layers[data-mfocus="4"] .am-layers-m--4{display:block}
.am-layers[data-mfocus] .am-layers-m-hint{display:none}
.am-layers-m-label,.am-layers-m-hint,.am-layers-m-go,.am-layers-mpanel li{font-family:var(--am-mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase}
.am-layers-m-label{color:var(--am-accent)}
.am-layers-m-hint{color:var(--am-faint)}
.am-layers-m-title{font-family:var(--am-sans);font-size:20px;line-height:1.25;font-weight:500;color:var(--am-ink);margin-top:8px!important}
.am-layers-mpanel ul{list-style:none;display:grid;gap:8px;margin-top:12px!important}
.am-layers-mpanel li{position:relative;padding-left:14px;color:var(--am-muted);line-height:1.5}
.am-layers-mpanel li::before{content:"";position:absolute;left:0;top:.45em;width:5px;height:5px;background:var(--am-ink)}
.am-layers-m-go{display:inline-block;margin-top:14px;color:var(--am-accent);cursor:pointer}
.am-layers--nolinks .am-layers-m-go{display:none}
.am-layers-flat .am-layers-layer{cursor:pointer}
.am-layers-flat .am-layers-lift{transition:opacity .2s}
.am-layers[data-mfocus] .am-layers-flat .am-layers-lift{opacity:.4}
.am-layers[data-mfocus="1"] .am-layers-flat .am-layers-l1 .am-layers-lift,.am-layers[data-mfocus="2"] .am-layers-flat .am-layers-l2 .am-layers-lift,
.am-layers[data-mfocus="3"] .am-layers-flat .am-layers-l3 .am-layers-lift,.am-layers[data-mfocus="4"] .am-layers-flat .am-layers-l4 .am-layers-lift{opacity:1}
.am-layers[data-mfocus="1"] .am-layers-flat .am-layers-l1 .am-layers-plane,.am-layers[data-mfocus="2"] .am-layers-flat .am-layers-l2 .am-layers-plane,
.am-layers[data-mfocus="3"] .am-layers-flat .am-layers-l3 .am-layers-plane{stroke:var(--am-accent)}
/* hit times: when the pulse crosses each layer */
.am-layers-iso .am-layers-l1{--am-hit:.37s}.am-layers-iso .am-layers-l2{--am-hit:.79s}
.am-layers-iso .am-layers-l3{--am-hit:1.2s}.am-layers-iso .am-layers-l4{--am-hit:1.62s}
.am-layers-flat .am-layers-l1{--am-hit:.23s}.am-layers-flat .am-layers-l2{--am-hit:.71s}
.am-layers-flat .am-layers-l3{--am-hit:1.2s}.am-layers-flat .am-layers-l4{--am-hit:1.69s}
/* hidden until in view (only when JS runs; no JS = static finished stack) */
.am-layers--js:not(.am-layers--in) .am-layers-layer,
.am-layers--js:not(.am-layers--in) .am-layers-posts,
.am-layers--js:not(.am-layers--in) .am-layers-cap{opacity:0}
/* pause every loop while the visual is off screen */
.am-layers--paused *{animation-play-state:paused!important}
/* build-up */
@keyframes am-layers-settle{from{opacity:0;transform:translateY(-18px)}to{opacity:1;transform:translateY(0)}}
@keyframes am-layers-fade{from{opacity:0}to{opacity:1}}
@keyframes am-layers-on{from{fill:#ffffff}to{fill:#2338ec}}
@keyframes am-layers-linkon{from{stroke:#c9c7c0}to{stroke:#8b96ff}}
.am-layers--in .am-layers-layer{animation:am-layers-settle .38s var(--am-ease) both}
.am-layers--in .am-layers-l1{animation-delay:.1s}
.am-layers--in .am-layers-l2{animation-delay:.45s}
.am-layers--in .am-layers-l3{animation-delay:.8s}
.am-layers--in .am-layers-l4{animation-delay:1.15s}
.am-layers--in .am-layers-posts,.am-layers--in .am-layers-cap{animation:am-layers-fade .5s ease-out 1.45s both}
/* AI agents switch on once their layer has landed */
.am-layers--in .am-layers-hub{animation:am-layers-on .3s ease-out 1.55s both}
.am-layers--in .am-layers-l4 .am-layers-link{animation:am-layers-linkon .4s ease-out 1.6s both}
/* idle loop: 5s cycle, pulse travels bottom to top in 1.8s */
@keyframes am-layers-lit{0%{opacity:0}2%{opacity:1}16%{opacity:1}26%{opacity:0}100%{opacity:0}}
@keyframes am-layers-travel-iso{0%{opacity:0;transform:translateY(0)}3%{opacity:1}33%{opacity:1}36%{opacity:0;transform:translateY(-378px)}100%{opacity:0;transform:translateY(-378px)}}
@keyframes am-layers-travel-flat{0%{opacity:0;transform:translateY(0)}3%{opacity:1}33%{opacity:1}36%{opacity:0;transform:translateY(-270px)}100%{opacity:0;transform:translateY(-270px)}}
@keyframes am-layers-ping{0%{opacity:0;transform:scale(.6)}30%{opacity:.9}60%{opacity:0;transform:scale(1.15)}100%{opacity:0;transform:scale(1.15)}}
.am-layers--in .am-layers-lit{animation:am-layers-lit 5s linear infinite;animation-delay:calc(var(--am-idle) + var(--am-hit))}
.am-layers--in .am-layers-iso .am-layers-pulse{animation:am-layers-travel-iso 5s linear var(--am-idle) infinite}
.am-layers--in .am-layers-flat .am-layers-pulse{animation:am-layers-travel-flat 5s linear var(--am-idle) infinite}
.am-layers--in .am-layers-ping{animation:am-layers-ping 3s ease-out infinite}
.am-layers--in .am-layers-ping--1{animation-delay:1.9s}.am-layers--in .am-layers-ping--2{animation-delay:2.5s}
.am-layers--in .am-layers-ping--3{animation-delay:3.1s}.am-layers--in .am-layers-ping--4{animation-delay:3.7s}
.am-layers--in .am-layers-ping--5{animation-delay:4.3s}

/* ---------- zoom into one layer ---------- */
.am-layers-stage{transform-origin:0 0;transition:transform .55s var(--am-ease)}
.am-layers-iso .am-layers-lift{transition:transform .45s var(--am-ease),opacity .25s ease-out}
.am-layers-pulsewrap,.am-layers-cap,.am-layers-posts{transition:opacity .2s}
.am-layers--focus .am-layers-pulsewrap,.am-layers--focus .am-layers-iso .am-layers-cap,.am-layers--focus .am-layers-iso .am-layers-posts{opacity:0!important}
.am-layers--focus .am-layers-iso .am-layers-label,.am-layers--focus .am-layers-iso .am-layers-leader{opacity:0}
.am-layers--focus .am-layers-iso .am-layers-lit{visibility:hidden}
/* scale 1.35, focused plane centre moves to (260,130) */
.am-layers[data-focus="1"] .am-layers-stage{transform:translate(2.69px,-342.5px) scale(1.35)}
.am-layers[data-focus="2"] .am-layers-stage{transform:translate(2.69px,-223.7px) scale(1.35)}
.am-layers[data-focus="3"] .am-layers-stage{transform:translate(2.69px,-104.9px) scale(1.35)}
.am-layers[data-focus="4"] .am-layers-stage{transform:translate(2.69px,13.9px) scale(1.35)}
/* layers above lift away, layers below drop away */
.am-layers[data-focus="1"] .am-layers-iso :is(.am-layers-l2,.am-layers-l3,.am-layers-l4) .am-layers-lift,
.am-layers[data-focus="2"] .am-layers-iso :is(.am-layers-l3,.am-layers-l4) .am-layers-lift,
.am-layers[data-focus="3"] .am-layers-iso .am-layers-l4 .am-layers-lift{opacity:0;transform:translateY(-40px)}
.am-layers[data-focus="2"] .am-layers-iso .am-layers-l1 .am-layers-lift,
.am-layers[data-focus="3"] .am-layers-iso :is(.am-layers-l1,.am-layers-l2) .am-layers-lift,
.am-layers[data-focus="4"] .am-layers-iso :is(.am-layers-l1,.am-layers-l2,.am-layers-l3) .am-layers-lift{opacity:0;transform:translateY(40px)}
.am-layers[data-focus="1"] .am-layers-iso .am-layers-l1 .am-layers-plane,
.am-layers[data-focus="2"] .am-layers-iso .am-layers-l2 .am-layers-plane,
.am-layers[data-focus="3"] .am-layers-iso .am-layers-l3 .am-layers-plane{stroke:var(--am-accent)}
.am-layers[data-focus="1"] .am-layers-detail--1,
.am-layers[data-focus="2"] .am-layers-detail--2,
.am-layers[data-focus="3"] .am-layers-detail--3,
.am-layers[data-focus="4"] .am-layers-detail--4{opacity:1;transition:opacity .3s ease-out .25s}

/* tablet: below the intro, full column width, max 360px tall (tap to zoom) */
@media (max-width:1100px){
  .am-layers{max-width:none;margin:40px 0 0}
  .am-layers .am-layers-iso{width:auto;height:360px;max-width:100%}
}
/* mobile: flat stack + tap detail (default) or hidden with .am-layers--mobile-hidden */
@media (max-width:767px){
  .am-layers{margin-top:32px}
  .am-layers .am-layers-iso{display:none}
  .am-layers .am-layers-flat{display:block}
  .am-layers .am-layers-mpanel{display:block;margin-top:20px;border-top:1px solid var(--am-rule);padding-top:16px}
  .am-layers--mobile-hidden{display:none}
}
@media (prefers-reduced-motion:reduce){
  .am-layers *{animation:none!important;transition:none!important}
  .am-layers .am-layers-layer,.am-layers .am-layers-posts,.am-layers .am-layers-cap{opacity:1!important}
}

/* ---------- Placement in The Build page header (theme, not part of the export) ----------
   The header column becomes a two-column grid: the Divi modules on the left,
   the visual on the right, vertically centred. Below 1100px it drops under the intro. */
@media (min-width:1101px){
  .am-layers-host.et_pb_column{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,520px);grid-template-rows:auto 1fr auto auto 1fr;column-gap:56px;align-items:start}
  /* dots + "THE ONE SYSTEM BUILD": full width, centred on the page as before */
  .am-layers-host > .am-nodes{grid-column:1 / -1;grid-row:1;margin-bottom:24px !important}
  /* title and intro: left column, centred as a group against the visual */
  .am-layers-host > .am-h1{grid-column:1;grid-row:3}
  .am-layers-host > .et_pb_module:not(.am-nodes):not(.am-h1){grid-column:1;grid-row:4;margin-bottom:0 !important}
  .am-layers-host > .am-layers{grid-column:2;grid-row:2 / 6;align-self:center;margin:0}
}
/* Responsive fix: centre the tablet visual instead of leaving it left-aligned. */
@media (max-width:1100px) and (min-width:768px){ .am-layers .am-layers-iso{display:block;margin-left:auto;margin-right:auto} }