/* Phone-only solution diagram (max-width 640px). Adapted from the other agent's
   home-solution.css (2026-10-21) at OJ's request. Desktop rules removed. */
.qpage .hs-creative { --hs-purple:#6c35c7; --hs-ink:#241d35; --hs-peri:#c9b7ec; --hs-amber:#f5a623; position:relative; }
.qpage .hs-phone {display:none;}
.qpage .hs-wide {position:relative;}
@media (max-width:640px) {
 .qpage .hs-wide {display:none;}
 .qpage .hs-phone {display:block;position:relative;isolation:isolate;max-width:390px;margin:12px auto 0;padding:0 5px 4px;color:var(--hs-ink);font-family:var(--font-product);}
 .qpage .hs-phone::before {content:"";position:absolute;z-index:-1;inset:0 -10px 30px;background:radial-gradient(ellipse at 50% 28%,#b29bd72b,transparent 64%);pointer-events:none;}
 .qpage .hs-source-row {display:flex;justify-content:space-between;gap:18px;padding:0 8px;}
 .qpage .hs-source {display:flex;align-items:center;gap:7px;background:#fff;border:1.5px solid var(--hs-ink);box-shadow:3px 3px 0 #c9b7ec;padding:8px 10px;font-size:12px;font-weight:600;white-space:nowrap;}
 .qpage .hs-source-context {color:#6c35c7;}
 .qpage .hs-source-wires {height:35px;display:flex;justify-content:center;position:relative;margin:0 55px;}
 .qpage .hs-source-wires span {width:50%;height:19px;border-bottom:1.5px dashed #9b84be;border-left:1.5px dashed #9b84be;}
 .qpage .hs-source-wires span+span {border-left:0;border-right:1.5px dashed #9b84be;}
 .qpage .hs-source-wires::after {content:"";position:absolute;top:19px;height:16px;left:50%;border-left:1.5px solid #7c50bd;}
 .qpage .hs-work {position:relative;z-index:3;background:#fff;border:1.5px solid var(--hs-ink);box-shadow:5px 5px 0 var(--hs-purple);padding:15px 15px 13px;margin:0 8px;}
 .qpage .hs-work-top {display:flex;align-items:center;gap:7px;font-size:10px;font-weight:600;color:#74707d;letter-spacing:.03em;}
 .qpage .hs-work-icon {display:grid;place-items:center;background:#eee6fa;color:var(--hs-purple);height:26px;width:26px;border-radius:6px;}
 .qpage .hs-status {margin-left:auto;color:#713ab1;background:#f0e9fa;padding:4px 6px;border-radius:4px;font-size:9px;letter-spacing:0;}
 .qpage .hs-work h3 {font-size:17px;font-weight:600;line-height:1.35;letter-spacing:-.025em;margin:12px 0 9px;}
 .qpage .hs-work-meta {display:flex;gap:7px;font-size:10px;color:#88818e;}
 .qpage .hs-space {position:relative;margin:21px 0 0;padding:24px 12px 13px;border:1.5px solid #9d81c6;background:#f0e9fa73;border-radius:0 0 7px 7px;}
 .qpage .hs-space::before {content:"";position:absolute;left:50%;top:-17px;height:16px;border-left:1.5px solid #9577bf;}
 .qpage .hs-space-label {display:flex;align-items:center;gap:6px;position:absolute;top:-10px;left:12px;background:#f6bd56;color:#38240d;border:1px solid #b3853b;padding:4px 7px;font-size:10px;font-weight:600;letter-spacing:-.01em;}
 .qpage .hs-context-grid {display:grid;grid-template-columns:1fr 1fr;gap:10px;}
 .qpage .hs-context {position:relative;display:flex;flex-direction:column;align-items:flex-start;min-width:0;background:white;border:1px solid #d0bfde;box-shadow:2px 3px 0 #e1d6ed;padding:10px;border-radius:4px;transition:transform .8s cubic-bezier(.16,1,.3,1),border-color .5s,box-shadow .5s;}
 .qpage .hs-context-icon {color:#b47a21;margin-bottom:7px;}
 .qpage .hs-context strong {font-size:12px;font-weight:600;line-height:1.3;}
 .qpage .hs-context span:not(.hs-context-icon) {font-size:10px;line-height:1.5;color:#83778c;margin-top:3px;}
 .qpage .hs-document-lines {display:grid;gap:4px;width:90%;margin-top:12px;}
 .qpage .hs-document-lines i {display:block;height:3px;border-radius:1px;background:#e4dce9;}
 .qpage .hs-document-lines i:last-child {width:68%;background:#e8d29c;}
 .qpage .hs-thread {position:relative;display:grid;grid-template-columns:17px 1fr;gap:4px;width:100%;margin-top:11px;align-items:center;}
 .qpage .hs-thread b {display:grid;place-items:center;grid-row:span 2;width:17px;height:17px;font-size:8px;background:#d9c6ee;color:#694093;border-radius:50%;}
 .qpage .hs-thread i {height:3px;background:#e4dce9;border-radius:1px;}
 .qpage .hs-thread i:last-child {width:65%;}
 .qpage .hs-context-meeting {grid-column:1/-1;flex-direction:row;align-items:center;gap:9px;}
 .qpage .hs-context-meeting .hs-context-icon {margin:0;}
 .qpage .hs-context-meeting strong,.qpage .hs-context-meeting span {display:block;}
 .qpage .hs-wave {display:flex;gap:3px;align-items:center;margin-left:auto;height:24px;padding:0 5px;color:#b791d7;}
 .qpage .hs-wave i {width:3px;background:currentColor;border-radius:3px;}
 .qpage .hs-connection {height:31px;position:relative;overflow:hidden;margin:0 auto;width:14px;}
 .qpage .hs-connection::before {content:"";position:absolute;top:0;bottom:0;left:6px;border-left:1.5px solid #a992c9;}
 .qpage .hs-connection span {position:absolute;top:-7px;left:3px;width:7px;height:7px;background:#7942c2;border-radius:50%;opacity:0;}
 .qpage .hs-orbit {position:relative;display:flex;align-items:center;gap:12px;padding:13px 15px;background:#2c193f;color:#fff;border:1.5px solid #2c193f;box-shadow:5px 5px 0 #c3a8e2;margin:0 8px;overflow:hidden;}
 .qpage .hs-orbit-image {position:relative;display:flex;align-items:center;flex-shrink:0;}
 .qpage .hs-orbit-image::before {content:"";position:absolute;inset:-2px;border:1px solid #c6a8e8;border-radius:50%;opacity:.35;}
 .qpage .hs-orbit strong {display:block;font-family:var(--font-marketing);font-size:19px;font-weight:600;letter-spacing:-.03em;}
 .qpage .hs-orbit div>span {display:block;color:#d3c0e5;font-size:11px;line-height:1.5;margin-top:3px;max-width:180px;}
 .qpage .hs-orbit-trace {position:absolute;inset:auto 0 0;height:2px;background:#d4aefa;transform:scaleX(0);transform-origin:left;}
 .qpage .hs-lenses-label {text-align:center;font-size:11px;font-weight:600;color:#6d567e;margin-bottom:10px;}
 .qpage .hs-lens-row {display:flex;justify-content:center;gap:9px;}
 .qpage .hs-lens {display:flex;align-items:center;gap:7px;padding:10px 11px;border:1.5px dashed currentColor;font-size:12px;font-weight:600;transition:background .6s,box-shadow .6s;}
 .qpage .hs-lens-decision {color:#24784d;background:#e8f2e8;}
 .qpage .hs-lens-action {color:#526cac;background:#edf0fa;}
 .qpage .hs-caption {display:block;text-align:center;font-size:9px;color:#92869b;margin-top:15px;}
}
@media (prefers-reduced-motion:no-preference) {
 .qpage .hs-creative[data-phase=orbit][data-running=true] .hs-orbit-connection span,.qpage .hs-creative[data-phase=lenses][data-running=true] .hs-lens-connection span {animation:hs-travel 2.6s cubic-bezier(.76,0,.24,1) infinite;}
 .qpage .hs-creative[data-phase=work] .hs-source-wires {animation:hs-wire 1.2s cubic-bezier(.76,0,.24,1) both;}
 .qpage .hs-creative[data-phase=work] .hs-work {animation:hs-work-arrive 1.1s cubic-bezier(.16,1,.3,1) both;}
 .qpage .hs-creative[data-phase=context] .hs-context {transform:translateY(-3px);border-color:#b898d7;box-shadow:3px 5px 0 #d8c5ea;}
 .qpage .hs-creative[data-phase=context] .hs-context-discussion {transition-delay:.12s;}
 .qpage .hs-creative[data-phase=context] .hs-context-meeting {transition-delay:.24s;}
 .qpage .hs-creative[data-phase=orbit] .hs-orbit-trace {animation:hs-process 3.8s cubic-bezier(.76,0,.24,1) forwards;}
 .qpage .hs-creative[data-phase=orbit] .hs-orbit-image::before {animation:hs-reason 2s ease infinite;}
 .qpage .hs-creative[data-phase=lenses] .hs-lens-decision {background:#d5ebd7;box-shadow:3px 3px 0 #bdd7bc;}
 .qpage .hs-creative[data-phase=lenses] .hs-lens-action {background:#dee5fa;box-shadow:3px 3px 0 #c5cfeb;transition-delay:.25s;}
}
@keyframes hs-travel {0%{transform:translateY(0);opacity:0}20%{opacity:1}85%{opacity:1}100%{transform:translateY(40px);opacity:0}}
@keyframes hs-process {to{transform:scaleX(1)}}
@keyframes hs-reason {50%{transform:scale(1.12);opacity:.8}}

@keyframes hs-wire {from{clip-path:inset(0 0 100% 0)}to{clip-path:inset(0)}}
@keyframes hs-work-arrive {from{transform:translateY(5px);box-shadow:2px 2px 0 #6c35c7}to{transform:translateY(0);box-shadow:5px 5px 0 #6c35c7}}


/* the phone diagram needs no swipe hint */
@media (max-width:640px){.qpage #how .rnav-anatomy-hint{display:none!important;}.qpage #how .rnav-anatomy-rail{overflow:visible!important;border:none!important;padding:0!important;background:none!important;}}