/* Original local art direction, inspired by visual workflow tools. */
.connection-hero{position:relative;isolation:isolate;overflow:hidden;padding:43px 26px 27px;border-bottom:1px solid #dce7ef;background:radial-gradient(ellipse at 50% 75%,#e8f6ff 0%,#f8fcff 45%,#fff 78%);color:#14334c}
.connection-intro{max-width:1000px;margin:0 auto;text-align:center}
.connection-eyebrow{font-size:11px;font-weight:700;letter-spacing:.16em;color:#27658e;margin:0 0 18px;display:flex;align-items:center;justify-content:center;gap:10px}
.connection-eyebrow>span{width:7px;height:7px;background:#048cb9;box-shadow:0 0 0 5px #e2f3fc;border-radius:50%}
.connection-hero h1{font-size:clamp(43px,4.5vw,67px);line-height:1.04;font-weight:900;color:#092b4b;letter-spacing:-.035em;margin:0 0 19px}
.connection-hero h1 span{background:linear-gradient(100deg,#004890,#0a7dac);background-clip:text;-webkit-background-clip:text;color:transparent}
.connection-subtitle{font-size:22px;font-weight:600;color:#194b70;margin:0 0 5px}
.connection-lead{font-size:16px;color:#526c81;margin:0;line-height:1.8}
.workflow-shell{max-width:1200px;margin:30px auto 0;position:relative}
.workflow-head{direction:ltr;position:absolute;left:0;right:0;top:5px;height:20px;pointer-events:none}
.workflow-head span{position:absolute;transform:translateX(-50%);font-size:10px;letter-spacing:.14em;font-weight:600;color:#7491a5;white-space:nowrap}
.workflow-head span:nth-child(1){left:12.5%}.workflow-head span:nth-child(2){left:44.167%}.workflow-head span:nth-child(3){left:85%}
.workflow-stage{height:340px;position:relative;direction:ltr;background-image:radial-gradient(#accce05c .8px,transparent .8px);background-size:19px 19px;border-radius:22px;mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.workflow-wires{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.mobile-wires{display:none}
.wire-base{fill:none;stroke:#b7d2e2;stroke-width:1.4;vector-effect:non-scaling-stroke}
.wire-packet{fill:none;stroke:#008ac2;stroke-width:3;vector-effect:non-scaling-stroke;stroke-dasharray:12 88;stroke-linecap:round;opacity:0;animation:flow-packet 3.4s linear infinite}
.wire-packet.is-active{opacity:1;filter:drop-shadow(0 0 4px #16bbdc6b)}
@keyframes flow-packet{from{stroke-dashoffset:100}to{stroke-dashoffset:0}}
.workflow-node{position:absolute;transform:translate(-50%,-50%);display:flex;align-items:center;justify-content:center;background:#fff;border:1px solid #d4e3ed;border-radius:14px;box-shadow:0 10px 25px #114c7610;color:#193c57;text-align:left;text-decoration:none;font-family:inherit;transition:border-color .3s,box-shadow .3s,background .3s}
.workflow-node:before,.workflow-node:after{content:"";position:absolute;width:6px;height:6px;border:1px solid #a5c4d7;border-radius:50%;background:#fff;top:50%;transform:translateY(-50%)}
.workflow-node:before{left:-4px}.workflow-node:after{right:-4px}
.workflow-node:hover{border-color:#70b8da;box-shadow:0 12px 30px #0956871c}.workflow-node:focus-visible{outline:3px solid #e8b600;outline-offset:5px}
.node-meta{left:12.5%;top:50%;width:12%;height:113px;flex-direction:column;gap:2px;border-color:#b7d4e9;box-shadow:0 10px 30px #00569a15}.node-meta:before{display:none}.node-meta img{width:48px;height:40px}.node-meta strong{font-size:17px}.node-meta small{font-size:11px;color:#738b9e}
.node-agent{left:44.167%;width:15%;height:78px;gap:12px;padding:10px 15px;cursor:pointer}.node-claude{top:30.882%}.node-codex{top:69.118%}.node-agent img{width:32px;height:32px}.node-agent span{display:flex;flex-direction:column}.node-agent strong{font-size:17px}.node-agent small{font-size:10px;color:#8295a4;letter-spacing:.035em}.node-agent i{position:absolute;right:11px;top:11px;width:5px;height:5px;border-radius:50%;background:#d5e3eb}
.node-agent[aria-pressed=true]{border-color:#64b8dc;background:#fafdff;box-shadow:0 0 0 5px #52b3df0b,0 12px 32px #035b9e19}.node-agent[aria-pressed=true] i{background:#008bc2;box-shadow:0 0 9px #00a5d370}
.node-target{left:85%;width:18%;height:76px;flex-direction:column;gap:2px;cursor:pointer;padding:8px 12px}.node-analytics{top:20.588%}.node-wordpress{top:50%}.node-shopify{top:79.412%}.node-target:after{display:none}.node-target small{font-size:9px;color:#718b9e;letter-spacing:.09em}.node-target img{display:block;object-fit:contain;max-height:43px;width:auto;max-width:100%}.node-analytics img{height:36px;width:154px}.node-wordpress img{height:28px;max-width:136px}.node-shopify img{height:28px;max-width:126px}.node-target[aria-pressed=true]{border-color:#71c0d6;box-shadow:0 0 0 5px #36b9d20c,0 12px 30px #16587e17}
.workflow-detail{min-height:88px;max-width:775px;margin:0 auto;display:flex;gap:20px;align-items:center;justify-content:space-between;padding:14px 22px;border:1px solid #cfe2ef;border-radius:12px;background:#ffffffc9;box-shadow:0 8px 24px #02436d04;backdrop-filter:blur(8px)}
.detail-eyebrow{font-size:10px;font-weight:700;color:#1c7ba7}.workflow-detail p{font-size:14px;color:#355c79;margin:1px 0 0;line-height:1.7}.workflow-detail a{font-size:10px;color:#4b829f;text-decoration:none}.workflow-detail a:hover{text-decoration:underline}
.workflow-play{border:1px solid #d7e6ef;border-radius:8px;background:#fff;display:flex;align-items:center;gap:6px;padding:7px 10px;color:#55778e;font-size:11px;flex-shrink:0;cursor:pointer}.play-symbol{font-size:12px;line-height:1}
.workflow-footnote{font-size:11px;color:#6f8a9d;text-align:center;line-height:1.8;margin:15px auto 0;max-width:750px}
.workflow-paused .wire-packet{animation-play-state:paused}
@media(max-width:900px){.connection-hero{padding:28px 22px 24px}.connection-hero h1{font-size:clamp(37px,8vw,60px)}.connection-subtitle{font-size:20px}.connection-lead{font-size:15px}.workflow-shell{margin-top:8px}.workflow-head{display:none}.workflow-stage{height:520px;max-width:460px;margin:auto;mask-image:none;background-size:17px 17px}.desktop-wires{display:none}.mobile-wires{display:block}.workflow-node:before,.workflow-node:after{display:none}.node-meta{left:50%;top:12%;width:120px;height:74px;flex-direction:row;flex-wrap:wrap;gap:3px 8px;padding:10px 15px}.node-meta img{width:35px;height:28px}.node-meta strong{font-size:15px}.node-meta small{width:100%;text-align:center;font-size:10px}.node-agent{top:37%;width:130px;height:66px;gap:8px;padding:9px 10px}.node-agent img{width:27px;height:27px}.node-agent strong{font-size:15px}.node-agent small{font-size:9px}.node-claude{left:25%}.node-codex{left:75%}.node-target{height:64px;padding:7px 9px}.node-analytics{top:63%;left:50%;width:176px}.node-analytics img{width:154px;height:34px}.node-wordpress{top:86%;left:25%;width:130px}.node-wordpress img{width:111px;height:25px}.node-shopify{top:86%;left:75%;width:130px}.node-shopify img{width:106px;height:25px}.node-target small{font-size:8px}.workflow-detail{padding:13px 14px;gap:10px;align-items:flex-start}.workflow-detail p{font-size:13px}.workflow-play{padding:7px 8px;font-size:10px}.workflow-footnote{font-size:10px}.connection-eyebrow{font-size:9px;letter-spacing:.12em;margin-bottom:17px}}
@media(max-width:350px){.connection-hero{padding-inline:16px}.node-agent{width:119px}.node-wordpress,.node-shopify{width:119px}.connection-subtitle{font-size:18px}.connection-hero h1{font-size:36px}.workflow-detail{padding:11px}.workflow-play .play-label{display:none}}
@media(prefers-reduced-motion:reduce){.wire-packet{animation:none;stroke-dasharray:none;stroke-width:2;opacity:0}.wire-packet.is-active{opacity:1}.workflow-node{transition:none}}
/* Additional choices preserve the three-route diagram. */
.workflow-tools{max-width:1000px;margin:8px auto 18px;border-top:1px solid #d8e7f1;padding-top:10px}
.workflow-tools>summary{list-style:none;display:flex;gap:12px;align-items:center;cursor:pointer;color:#416c88;min-height:34px;font-size:12px;font-weight:600}
.workflow-tools>summary::-webkit-details-marker{display:none}.workflow-tools>summary small{font-size:10px;color:#8aa0b0;font-weight:400}.workflow-tools>summary b{margin-inline-start:auto;font-size:18px;line-height:1;font-weight:400}.workflow-tools[open]>summary b{transform:rotate(45deg)}
.tool-palette{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;padding:5px 0 9px}.tool-group h3{font-size:10px;font-weight:500;color:#7490a4;margin:0 0 7px}.tool-group>div{display:flex;gap:6px;direction:ltr;flex-wrap:wrap}.tool-group button{flex:1 1 auto;display:flex;align-items:center;justify-content:center;gap:5px;padding:7px 8px;min-height:36px;background:#ffffffb8;border:1px solid #dae6ee;border-radius:7px;color:#4a677d;font-family:inherit;font-size:10px;cursor:pointer;transition:border-color .2s,background .2s}.tool-group button img{width:18px;height:18px;object-fit:contain;border-radius:3px}.tool-group button:hover{border-color:#86bfd9;background:#f4fbff}.tool-group button[aria-pressed=true]{border-color:#4daacb;color:#005c8c;background:#eff9ff}.tool-group button:focus-visible{outline:3px solid #e0b300;outline-offset:3px}
.node-target .node-lockup{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;min-height:34px}.node-target .node-lockup:not(.wordmark-lockup) img{width:28px;height:28px;max-width:28px;max-height:28px;object-fit:contain;border-radius:5px}.node-target .node-lockup strong{font-size:15px;letter-spacing:-.02em}.node-target .wordmark-lockup img{max-width:154px;max-height:34px;width:auto;height:auto}.node-wordpress .wordmark-lockup img{max-width:136px;max-height:28px}.node-shopify .wordmark-lockup img{max-width:126px;max-height:28px}
@media(max-width:900px){.tool-palette{grid-template-columns:1fr;gap:12px;padding-top:8px}.workflow-tools{margin-top:0;margin-bottom:12px}.workflow-tools>summary{font-size:11px}.workflow-tools>summary small{font-size:9px}.tool-group h3{margin-bottom:5px}.tool-group button{font-size:11px;min-height:37px}.node-target .node-lockup{gap:5px;min-height:30px}.node-target .node-lockup strong{font-size:12px}.node-target .node-lockup:not(.wordmark-lockup) img{width:23px;height:23px;max-width:23px;max-height:23px}.node-target .wordmark-lockup img{max-width:154px;max-height:32px}.node-wordpress .wordmark-lockup img{max-width:111px;max-height:25px}.node-shopify .wordmark-lockup img{max-width:106px;max-height:25px}}
@media(max-width:350px){.node-target .node-lockup strong{font-size:11px}.node-target .node-lockup{gap:4px}}
/* Final title alignment and the staged student release. */
.connection-intro{width:100%;max-width:1040px;margin-inline:auto;text-align:center}
.connection-hero .connection-intro h1{width:100%;max-width:none;margin:0 auto 19px;text-align:center}
.connection-intro .connection-subtitle{max-width:900px;margin:0 auto 9px;line-height:1.6}
.connection-intro .connection-lead{max-width:780px;margin:0 auto;line-height:1.85;text-wrap:pretty}
.locked-course-stage{display:flex;align-items:center;justify-content:space-between;gap:25px;padding:28px 30px;border:1px solid #dce5ed;border-radius:13px;background:#f7f9fc;color:#70859a;margin:0 0 22px;scroll-margin-top:120px}
.locked-course-stage h2{font-size:23px;margin:3px 0 5px;color:#536b81}.locked-course-stage p{font-size:14px;line-height:1.7;margin:0}.locked-label{font-size:11px;color:#8395a4;letter-spacing:.03em}.locked-status{display:flex;align-items:center;gap:9px;white-space:nowrap;padding:10px 14px;border:1px solid #d9e4ed;border-radius:8px;background:#fff;color:#637c93;font-size:13px;font-weight:600}.locked-status svg{width:18px;height:18px}.release-locked-nav{opacity:.75}.release-locked-nav small{font-weight:600}
@media(max-width:700px){.locked-course-stage{padding:22px 20px;align-items:flex-start;flex-direction:column;gap:15px}.locked-course-stage h2{font-size:21px}.connection-intro .connection-subtitle{font-size:19px}.connection-intro .connection-lead{font-size:15px;max-width:100%}}