/* Route typing and a matching browser preview connect the hero to the partner strip. */
.sq-showcase{position:relative;isolation:isolate;overflow:hidden;background:var(--soft);border-bottom:1px solid var(--line)}
.sq-showcase:before{content:"";position:absolute;inset:0;z-index:-1;opacity:.45;background:radial-gradient(circle at 76% 48%,rgba(68,188,188,.17),transparent 36%),linear-gradient(115deg,transparent 25%,rgba(109,190,196,.11) 100%)}
.sq-showcase-layout{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);align-items:center;gap:4%;min-height:620px;padding-block:85px 75px}
.sq-showcase-copy{position:relative;z-index:3}
.sq-showcase-copy h2{max-width:540px;margin:21px 0 20px;color:var(--ink);font-size:clamp(2.55rem,4vw,4.5rem);line-height:1.08;letter-spacing:-.06em}
.sq-showcase-copy h2 span{color:var(--accent)}
.sq-showcase-copy>p:not(.sq-section-label){max-width:470px;margin:0;color:var(--muted);font-size:1rem;line-height:1.75}
.sq-showcase-steps{display:flex;align-items:center;flex-wrap:wrap;gap:9px;margin-top:31px;color:var(--ink);font:.67rem/1.5 ui-monospace,Consolas,monospace;letter-spacing:.04em;text-transform:uppercase}
.sq-showcase-steps span{display:inline-flex;align-items:center;gap:7px}
.sq-showcase-steps b{color:var(--accent);font-weight:800}
.sq-showcase-steps i{display:inline-block;width:19px;height:1px;background:var(--line-strong)}
.sq-showcase-actions{display:flex;align-items:center;flex-wrap:wrap;gap:18px 23px;margin-top:33px}
.sq-showcase-button{background:var(--navy);color:#fff}
.sq-showcase-button:hover{color:#fff;background:var(--accent-strong)}
.sq-showcase-stage{position:relative;min-width:0;height:510px;perspective:1350px;transform-style:preserve-3d}
.sq-showcase-grid{position:absolute;inset:-45px -35px -20px 0;opacity:.5;background-image:linear-gradient(rgba(63,151,163,.15) 1px,transparent 1px),linear-gradient(90deg,rgba(63,151,163,.15) 1px,transparent 1px);background-size:32px 32px;mask-image:radial-gradient(ellipse at 53% 54%,#000 8%,transparent 72%);transform:rotateX(62deg) rotateZ(-19deg) translateY(34px)}
.sq-showcase-halo{position:absolute;inset:7% 4% 5%;border-radius:50%;background:radial-gradient(ellipse,rgba(51,174,184,.2),transparent 66%);filter:blur(23px)}
.sq-showcase-editor,.sq-showcase-browser,.sq-showcase-view-file{position:absolute;backface-visibility:hidden}
.sq-showcase-editor{z-index:2;left:0;top:30px;width:min(75%,475px);height:306px;overflow:hidden;border:1px solid #517385;border-radius:13px;background:#0b2431;color:#e2f5f7;box-shadow:0 11px 0 #0a3545,0 34px 60px rgba(5,39,51,.28),0 0 0 1px rgba(157,236,237,.16) inset;transform:rotateY(10deg) rotateX(4deg) rotateZ(-2deg);animation:sq-showcase-editor-float 7s ease-in-out infinite}
.sq-showcase-editor-top,.sq-showcase-browser-top{display:flex;align-items:center;gap:12px;min-height:43px;padding:9px 15px;border-bottom:1px solid rgba(144,208,218,.2);font:.62rem ui-monospace,Consolas,monospace;letter-spacing:.015em}
.sq-showcase-editor-top{color:#a9c4cc;background:#102c3a}
.sq-showcase-editor-top b{margin-left:auto;color:#81d9d7;font-weight:700}
.sq-showcase-window-dots{display:flex;gap:5px;flex:none}
.sq-showcase-window-dots i{width:7px;height:7px;border-radius:50%;background:#648899}
.sq-showcase-window-dots i:first-child{background:#8fe0d1}
.sq-showcase-window-dots i:nth-child(2){background:#e0cb96}
.sq-showcase-editor-code{padding:14px 12px 13px 6px;font:.65rem/1.7 ui-monospace,Consolas,monospace;white-space:nowrap}
.sq-showcase-editor-code>div{display:flex;align-items:center;min-height:20px;border-radius:4px}
.sq-showcase-editor-code>div>span{flex:none;width:39px;padding-right:12px;text-align:right;color:#6f929f;user-select:none}
.sq-showcase-editor-code code{color:#dff4f5;font:inherit;white-space:nowrap}
.sq-showcase-editor-code em{color:#a2ccef;font-style:normal}
.sq-showcase-editor-code strong{color:#7be2d6;font-weight:650}
.sq-showcase-editor-code mark{color:#f0ce99;background:transparent}
.sq-showcase-active-line{background:rgba(88,215,211,.085);box-shadow:inset 2px 0 #7ae2d3;animation:sq-showcase-line-glow 4.2s ease-in-out infinite}
.sq-showcase-editor-foot{display:flex;align-items:center;gap:7px;min-height:37px;padding:7px 15px;border-top:1px solid rgba(144,208,218,.14);color:#90b4c0;font:.58rem ui-monospace,Consolas,monospace}
.sq-showcase-editor-foot>span:last-child{margin-left:auto;color:#709ca9}
.sq-showcase-editor-status{width:6px;height:6px;border-radius:50%;background:#7cddb8;box-shadow:0 0 0 4px rgba(124,221,184,.1)}
.sq-showcase-view-file{z-index:3;left:7%;top:348px;display:flex;flex-direction:column;gap:8px;width:min(58%,350px);padding:13px 17px;border:1px solid #79b7c2;border-radius:9px;background:linear-gradient(130deg,#153e4e,#0d2b3a);box-shadow:0 6px 0 #0a2937,0 20px 38px rgba(6,45,59,.22);color:#d8f4f2;transform:rotateZ(-3deg) translateZ(20px);animation:sq-showcase-file-float 6s ease-in-out infinite}
.sq-showcase-view-file span{font:.55rem ui-monospace,Consolas,monospace;letter-spacing:.04em;color:#9bd5d8}
.sq-showcase-view-file code{font:.66rem ui-monospace,Consolas,monospace;color:#eacb9a;white-space:nowrap}
.sq-showcase-browser{z-index:4;right:14px;top:205px;width:min(64%,420px);height:268px;overflow:hidden;border:1px solid #a4c9cf;border-radius:12px;background:#fff;color:#183646;box-shadow:0 9px 0 #b5d4d9,0 20px 0 rgba(35,99,115,.13),0 37px 58px rgba(9,51,67,.27);transform:translateZ(90px) rotateY(-11deg) rotateX(4deg) rotateZ(2deg);animation:sq-showcase-browser-float 7.5s ease-in-out infinite}
.sq-showcase-browser-top{color:#6e8d98;background:#eaf3f5;border-bottom-color:#d4e4e9}
.sq-showcase-address{display:flex;align-items:center;gap:6px;min-width:0;flex:1;padding:5px 10px;border:1px solid #d3e2e6;border-radius:5px;background:#fff;color:#496a77;font:.61rem ui-monospace,Consolas,monospace;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sq-showcase-address b{color:#16899b;font-size:.77rem}
.sq-showcase-browser-page{height:calc(100% - 43px);background:radial-gradient(circle at 80% 80%,#d7f4f2,transparent 40%),linear-gradient(130deg,#fff,#f3f9fa)}
.sq-showcase-browser-nav{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:15px 19px;border-bottom:1px solid #e1edef;color:#557380;font:.5rem ui-monospace,Consolas,monospace;letter-spacing:.09em}
.sq-showcase-browser-brand{display:inline-flex;align-items:center;gap:7px;color:#144255;font:800 .72rem/1.2 Inter,ui-sans-serif,sans-serif;letter-spacing:-.02em}
.sq-showcase-browser-brand img{width:17px;height:19px;object-fit:contain}
.sq-showcase-browser-content{padding:27px 27px 20px}
.sq-showcase-browser-kicker{display:block;margin-bottom:10px;color:#137b91;font:.55rem ui-monospace,Consolas,monospace;letter-spacing:.12em}
.sq-showcase-browser-content strong{display:block;color:#0f3344;font-size:clamp(1.25rem,2.4vw,1.9rem);line-height:1.1;letter-spacing:-.06em}
.sq-showcase-browser-content p{margin:10px 0 16px;color:#587482;font-size:.68rem}
.sq-showcase-browser-content p:empty{display:none}
.sq-showcase-browser-rule{display:block;width:56px;height:3px;border-radius:4px;background:#55c7bb;box-shadow:0 0 18px rgba(85,199,187,.4)}
.sq-showcase-connection{position:absolute;z-index:1;left:29%;top:318px;display:flex;align-items:center;gap:0;width:45%;height:2px;transform:rotate(-7deg);background:linear-gradient(90deg,transparent,#3cafb5 30%,#6bd9c8 72%,transparent);box-shadow:0 0 14px rgba(63,190,189,.48)}
.sq-showcase-connection span{position:absolute;width:7px;height:7px;border:2px solid #55c4bf;border-radius:50%;background:#f2fafb;box-shadow:0 0 10px rgba(70,194,188,.45)}
.sq-showcase-connection span:nth-child(1){left:5%}
.sq-showcase-connection span:nth-child(2){left:44%;animation:sq-showcase-signal 3.3s ease-in-out infinite}
.sq-showcase-connection span:nth-child(3){right:5%}
.sq-showcase-stage-note{position:absolute;right:0;bottom:4px;color:var(--faint);font:.55rem ui-monospace,Consolas,monospace;letter-spacing:.16em}
@keyframes sq-showcase-editor-float{0%,100%{transform:rotateY(10deg) rotateX(4deg) rotateZ(-2deg) translateY(0)}50%{transform:rotateY(8deg) rotateX(5deg) rotateZ(-2deg) translateY(-7px)}}
@keyframes sq-showcase-browser-float{0%,100%{transform:translateZ(90px) rotateY(-11deg) rotateX(4deg) rotateZ(2deg) translateY(0)}50%{transform:translateZ(90px) rotateY(-9deg) rotateX(4deg) rotateZ(2deg) translateY(7px)}}
@keyframes sq-showcase-file-float{0%,100%{transform:rotateZ(-3deg) translateZ(20px) translateY(0)}50%{transform:rotateZ(-2deg) translateZ(20px) translateY(-5px)}}
@keyframes sq-showcase-line-glow{0%,100%{background:rgba(88,215,211,.06)}50%{background:rgba(88,215,211,.18)}}
@keyframes sq-showcase-signal{0%{left:8%;opacity:0}20%{opacity:1}80%{opacity:1}100%{left:90%;opacity:0}}
@media(max-width:1100px){.sq-showcase-layout{grid-template-columns:.85fr 1.15fr;gap:2%}.sq-showcase-editor{width:79%}.sq-showcase-browser{width:67%}.sq-showcase-editor-code{font-size:.62rem}.sq-showcase-copy h2{font-size:clamp(2.5rem,4.3vw,3.8rem)}}
@media(max-width:900px){.sq-showcase-layout{grid-template-columns:1fr;gap:10px;padding-block:80px 62px}.sq-showcase-copy h2{max-width:650px;font-size:clamp(2.8rem,6vw,4.2rem)}.sq-showcase-copy>p:not(.sq-section-label){max-width:650px}.sq-showcase-stage{width:min(100%,690px);justify-self:center}}
@media(max-width:600px){.sq-showcase-layout{padding-block:65px 45px}.sq-showcase-copy h2{font-size:clamp(2.55rem,8vw,3.5rem)}.sq-showcase-copy>p:not(.sq-section-label){font-size:.92rem}.sq-showcase-steps{font-size:.58rem;gap:6px}.sq-showcase-steps i{width:11px}.sq-showcase-stage{height:420px;margin-top:15px}.sq-showcase-editor{top:0;width:92%;height:274px;transform:none;animation:none}.sq-showcase-editor-code{padding-top:12px;padding-bottom:10px;font-size:.55rem;line-height:1.6}.sq-showcase-editor-top{font-size:.54rem}.sq-showcase-editor-foot{font-size:.49rem}.sq-showcase-browser{top:195px;width:78%;height:205px;transform:none;animation:none}.sq-showcase-browser-nav{padding:10px 13px}.sq-showcase-browser-content{padding:17px 20px}.sq-showcase-browser-content strong{font-size:1.25rem}.sq-showcase-browser-content p{margin:7px 0 11px}.sq-showcase-view-file{display:none}.sq-showcase-connection{left:18%;top:278px;width:55%}.sq-showcase-stage-note{font-size:.44rem}}
@media(max-width:390px){.sq-showcase-stage{height:390px}.sq-showcase-editor{width:100%;height:258px}.sq-showcase-editor-code{padding-top:10px;padding-bottom:10px;font-size:.52rem}.sq-showcase-browser{top:180px;width:84%;height:193px}.sq-showcase-browser-nav>span:last-child{display:none}.sq-showcase-browser-content strong{font-size:1.12rem}.sq-showcase-browser-top{font-size:.51rem}}
@media(prefers-reduced-motion:reduce){.sq-showcase-editor,.sq-showcase-browser,.sq-showcase-view-file,.sq-showcase-active-line,.sq-showcase-connection span:nth-child(2){animation:none!important}.sq-showcase-editor,.sq-showcase-browser,.sq-showcase-view-file{transition:none!important}}
/* The editor types one route line at a time; the browser waits until it is complete. */
.sq-showcase-browser-page{position:relative}
.sq-showcase-browser-pending{position:absolute;inset:57px 0 0;display:none;align-items:center;justify-content:center;flex-direction:column;gap:8px;padding:10px;color:#587785;text-align:center}
.sq-showcase-browser-pending strong{color:#214c5b;font:.76rem/1.25 ui-monospace,Consolas,monospace}
.sq-showcase-browser-pending small{font:.59rem/1.35 ui-monospace,Consolas,monospace}
.sq-showcase-pending-pulse{width:11px;height:11px;border-radius:50%;background:#45c6bd;box-shadow:0 0 0 6px rgba(69,198,189,.15);animation:sq-showcase-wait 1.2s ease-in-out infinite}
.sq-showcase-stage.is-typing:not(.is-ready) .sq-showcase-browser-pending{display:flex}
.sq-showcase-stage.is-typing:not(.is-ready) .sq-showcase-browser-content{opacity:0}
.sq-showcase-stage.is-typing .sq-showcase-editor-code code[data-showcase-type]{position:relative;display:inline-block;min-height:1em;white-space:pre}
.sq-showcase-stage.is-typing .sq-showcase-active-line:not(.is-current){background:transparent;box-shadow:none;animation:none}
.sq-showcase-stage.is-typing .sq-showcase-editor-code>div.is-current{background:rgba(88,215,211,.14);box-shadow:inset 2px 0 #7ae2d3}
.sq-showcase-stage.is-typing .sq-showcase-editor-code>div.is-current code:after{content:"";display:inline-block;width:1px;height:1em;margin-left:2px;vertical-align:-.12em;background:#a9f3e5;animation:sq-showcase-caret .65s steps(1,end) infinite}
.sq-showcase-stage.is-typing .sq-showcase-editor-status{background:#e0c88f;box-shadow:0 0 0 4px rgba(224,200,143,.12)}
.sq-showcase-stage.is-ready .sq-showcase-browser-content{animation:sq-showcase-preview-in .7s ease-out both}
@keyframes sq-showcase-caret{50%{opacity:0}}
@keyframes sq-showcase-wait{50%{opacity:.42;transform:scale(.8);box-shadow:0 0 0 11px rgba(69,198,189,.08)}}
@keyframes sq-showcase-preview-in{from{opacity:0;transform:translateY(13px)}to{opacity:1;transform:translateY(0)}}
@media(prefers-reduced-motion:reduce){.sq-showcase-pending-pulse,.sq-showcase-stage.is-typing .sq-showcase-editor-code>div.is-current code:after,.sq-showcase-stage.is-ready .sq-showcase-browser-content{animation:none!important}}
/* Nine compact rows cover the controller example without clipping its closing brace. */
.sq-showcase-editor-code>div[hidden]{display:none}
.sq-showcase-steps [data-showcase-step]{transition:color .25s ease}
.sq-showcase-steps [data-showcase-step].is-active{color:var(--accent);font-weight:800}
.sq-showcase-stage.is-paused .sq-showcase-editor,
.sq-showcase-stage.is-paused .sq-showcase-browser,
.sq-showcase-stage.is-paused .sq-showcase-view-file,
.sq-showcase-stage.is-paused .sq-showcase-active-line,
.sq-showcase-stage.is-paused .sq-showcase-connection span{animation-play-state:paused!important}
@media(max-width:600px){.sq-showcase-stage{height:450px}.sq-showcase-editor{height:300px}.sq-showcase-editor-code>div{min-height:20px}.sq-showcase-browser{top:220px}.sq-showcase-connection{top:300px}}
@media(max-width:390px){.sq-showcase-stage{height:430px}.sq-showcase-editor{height:284px}.sq-showcase-editor-code>div{min-height:19px}.sq-showcase-browser{top:210px}.sq-showcase-connection{top:290px}}
@media(prefers-reduced-motion:reduce){.sq-showcase-steps [data-showcase-step]{transition:none}}
.sq-showcase-editor-top [data-showcase-filename]{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media(max-width:350px){.sq-showcase-editor-code{font-size:.47rem}.sq-showcase-editor-code>div>span{width:34px;padding-right:8px}.sq-showcase-editor-top{font-size:.49rem}.sq-showcase-browser{width:88%}}
/* On narrow screens the four code stages form a balanced two-by-two guide. */
.sq-showcase-steps{row-gap:10px}
@media(max-width:600px){.sq-showcase-steps{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:14px;row-gap:10px}.sq-showcase-steps i{display:none}}