/* tech · Concept G v2, Version 2: Design AI (the real AI Form Designer), the architecture (the V1 illustration), any industry + licensing.
   Every class and id is prefixed tech-. Windows use parts/fw.css. Needs ../site.css tokens. */

.tech-sec{position:relative;z-index:2;padding-block:clamp(100px,12vw,180px);--tech-out:calc(var(--t-out) * 1.3)}
.tech-sec + .tech-sec{padding-top:clamp(40px,6vw,90px)}
.tech-head{display:grid;grid-template-columns:1.15fr .85fr;gap:28px 64px;align-items:end;margin-bottom:clamp(36px,4.6vw,60px)}
.tech-head-c{grid-template-columns:1fr;justify-items:center;text-align:center}
.tech-head-c .lede{margin-inline:auto;text-align:center}
.tech-h2{font-size:clamp(42px,6.2vw,92px);margin-top:18px}
.tech-ai .tech-h2 .hl{display:block}
.tech-head-r{display:flex;flex-direction:column;align-items:flex-start;padding-bottom:.5em}
.tech-head .lede{text-wrap:pretty}
.tech-fine{margin-top:18px;font-size:14px;color:var(--dimmer);letter-spacing:.01em}
.tech-link{display:inline-flex;align-items:center;gap:8px;margin-top:18px;padding-bottom:3px;border-bottom:1px solid rgba(255,255,255,.3);font-weight:600;font-size:15px;transition:border-color .2s,gap .2s}
.tech-link:hover{border-color:#fff;gap:12px}

/* headline-style lines that replace the old small all-caps labels */
.tech-kick{margin:0;font-family:var(--display);font-weight:300;font-size:clamp(22px,2.2vw,32px);line-height:1.15;letter-spacing:-.01em;color:var(--blue)}
.tech-sprite{position:absolute;width:0;height:0;overflow:hidden}
.tech-ic{width:1em;height:1em;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
/* switching motion (tech.js): outgoing content eases out over about var(--t-out) on var(--ease-io) (--tech-out, a touch
   longer so the middle of the in-out curve never drops too fast on a large surface) while the incoming eases in over
   var(--t-in) on var(--ease-soft), at the same time, so a switch never shows an empty frame. Text crossfades (xfade): the old
   words, pinned in place on top, fade out while the new fade in under them. */
.tech-xf{position:relative}
.tech-xn{transition:opacity var(--t-text) linear}
.tech-xn.tech-xi{opacity:0}
.tech-xo{position:absolute;pointer-events:none;transition:opacity var(--t-text) linear}
.tech-xo.tech-xgo{opacity:0}

/* ---------- 1 · Design AI: the real AI Form Designer ---------- */
.tech-fdw{position:relative;z-index:1}
.tech-pick{display:flex;flex-direction:column;align-items:center;gap:14px;margin-bottom:clamp(22px,2.6vw,34px);text-align:center}
.tech-ask{margin:0;font-family:var(--display);font-weight:300;font-size:clamp(22px,2.2vw,32px);line-height:1.15;letter-spacing:-.01em;color:#fff}
.tech-ask span{color:var(--blue)}
.tech-try{display:flex;align-items:center;gap:6px;padding:4px;border:1px solid var(--line);border-radius:999px;background:rgba(255,255,255,.03)}
.tech-hand{width:20px;height:20px;margin:0 2px 0 10px;color:var(--blue)}
.tech-chip{position:relative;height:40px;padding:0 18px;border-radius:999px;border:1px solid transparent;background:transparent;color:var(--dim);font:600 14px var(--body);white-space:nowrap;cursor:pointer;transition:background .25s,color .25s,border-color .25s}
.tech-chip:hover{color:#fff;background:rgba(255,255,255,.06)}
.tech-chip[aria-pressed="true"]{background:#fff;color:var(--navy)}
.tech-chip.cue-active::after{height:3px;background:var(--blue)}
.tech-chip:focus-visible{outline:2px solid var(--blue);outline-offset:3px}
.tech-cs{display:none}

.tech-fd-frame{position:relative;width:min(100%,1160px);margin-inline:auto;height:calc(900px * var(--s,.8));--s:.8}
.tech-fd-frame::before{content:"";position:absolute;inset:6% 4% -4%;border-radius:40px;background:radial-gradient(60% 60% at 50% 40%,rgba(25,165,255,.22),transparent 70%);filter:blur(30px);z-index:-1;pointer-events:none}
/* design space: every size below is the screenshot's own pixel size, then the window is scaled to fit */
.tech-fd{position:absolute;left:0;top:0;width:1400px;height:900px;transform:scale(var(--s,.8));transform-origin:0 0;background:#fcfcfc;border:1px solid #d6d6d6;border-radius:9px;overflow:hidden;color:#2b2b2b;font-family:Inter,"Segoe UI","Open Sans","Helvetica Neue",Arial,sans-serif;font-size:14px;line-height:1.3;text-align:left;box-shadow:0 60px 140px rgba(0,0,0,.6),0 6px 20px rgba(0,0,0,.35);-webkit-user-select:none;user-select:none}
.tech-fd-bar{position:absolute;left:0;top:0;right:0;height:42px;display:flex;align-items:center;padding:0 14px 0 20px;background:#ececec;border-bottom:1px solid #e2e2e2}
.tech-fd-burger{width:16px;height:13px;flex:none;margin-right:20px;background:linear-gradient(#333 0 0) 0 0/100% 2.4px no-repeat,linear-gradient(#333 0 0) 0 50%/100% 2.4px no-repeat,linear-gradient(#333 0 0) 0 100%/100% 2.4px no-repeat}
.tech-fd-title{font-size:15px;color:#3a3a3a;white-space:nowrap}
.tech-fd-ctl{margin-left:auto;display:flex;align-items:center;gap:24px;font-size:15px;color:#333}
.tech-fd-ctl .tech-ic{stroke-width:2.4}

.tech-fd-side{position:absolute;left:6px;top:46px;width:392px;height:848px;display:flex;flex-direction:column;gap:4px}
.tech-fd-box{position:relative;border:1px solid #cfcfcf;background:#fcfcfc}
.tech-fd-tools{flex:none;height:48px;display:flex;align-items:center;justify-content:center;gap:16px;font-size:20px;color:#141414}
.tech-fd-tools .tech-ic{stroke-width:1.9}
.tech-fd-tools .tech-fd-chev{font-size:13px;margin-left:-10px;color:#666}
.tech-fd-off{color:#a6adb8}
.tech-fd-sep{display:block;width:1px;height:30px;background:#dcdcdc;margin:0 2px}
.tech-fd-tabs{flex:none;height:42px;display:flex;align-items:center;padding:0 8px}
.tech-fd-tabs span{flex:1;height:23px;display:flex;align-items:center;justify-content:center;background:#e3e3e3;font-size:12.5px;color:#2b2b2b}
.tech-fd-tabs span.on{background:#2b7fff;color:#fff;font-weight:600}
.tech-fd-chat{flex:1;min-height:0;display:flex;flex-direction:column;padding:10px 8px 8px}
.tech-fd-chat-h{flex:none;display:flex;align-items:center;gap:8px;padding-left:2px;font-size:14.5px;color:#222}
.tech-fd-chat-h .tech-ic{font-size:17px;color:#fdbc77;stroke-width:1.8}
.tech-fd-log{flex:1;min-height:0;display:flex;flex-direction:column;justify-content:flex-start;gap:12px;padding:16px 4px 12px;overflow:hidden}
.tech-fd-msg{max-width:88%;font-size:13.5px;line-height:1.45;opacity:0;transform:translateY(6px);transition:opacity var(--t-in) var(--ease-soft),transform var(--t-in) var(--ease-soft)}
.tech-fd-msg.tech-in{opacity:1;transform:none}
.tech-fd-me{align-self:flex-end;padding:8px 12px;border-radius:10px 10px 2px 10px;background:#e8f1ff;border:1px solid #cfe1ff;color:#1c2a44}
.tech-fd-ai{align-self:flex-start;display:flex;gap:8px;color:#2b2b2b}
.tech-fd-ai .tech-ic{flex:none;margin-top:2px;font-size:15px;color:#fdbc77;stroke-width:1.8}
/* a reply holds its full size from the start: its words wait hidden under the dots, then the two crossfade */
.tech-fd-rp{position:relative;display:block}
.tech-fd-rt{opacity:0;transition:opacity var(--t-text) linear}
.tech-said .tech-fd-rt{opacity:1}
.tech-fd-rp .tech-fd-dots{position:absolute;left:0;top:0;transition:opacity var(--t-text) linear}
.tech-said .tech-fd-dots{opacity:0}
/* the last conversation, lifted out at its spot (tech.js swap), eases out above the fresh log */
.tech-fd-log.tech-gone{opacity:0;transform:translateY(-8px);transition:opacity var(--tech-out) var(--ease-io),transform var(--t-out) var(--ease-io);pointer-events:none}
.tech-fd-dots{display:inline-flex;gap:4px;padding-top:7px}
.tech-fd-dots i{width:6px;height:6px;border-radius:50%;background:#b8bec8;animation:tech-dot 1s ease-in-out infinite;animation-play-state:paused}
.tech-fd-dots i:nth-child(2){animation-delay:.15s}.tech-fd-dots i:nth-child(3){animation-delay:.3s}
.tech-fd-dots i{animation-fill-mode:backwards}   /* a delayed dot waits at its first keyframe, so it never drops from full when its delay ends */
.tech-run .tech-fd-dots i{animation-play-state:running}
@keyframes tech-dot{0%,100%{opacity:.35;transform:none}50%{opacity:1;transform:translateY(-3px)}}
.tech-fd-ask{flex:none;display:flex;gap:9px;height:33px}
.tech-fd-in{position:relative;flex:1;min-width:0;display:flex;align-items:center;padding:0 8px;background:#e2e2e2;border:1px solid #cfcfcf;border-top-color:#9ab9ec;border-right-color:#8db1ec;font-size:13px;color:#2b2b2b;white-space:nowrap;overflow:hidden;transition:background .25s,border-color .25s}
.tech-fd-ask.tech-typing .tech-fd-in{background:#fff;border-color:#2b7fff}
.tech-fd-ph{position:absolute;left:8px;top:50%;transform:translateY(-50%);color:#8a8a8a;white-space:nowrap;pointer-events:none;transition:opacity var(--t-text) linear}
.tech-fd-in.tech-has .tech-fd-ph{opacity:0}
#tech-fd-typed{transition:opacity var(--t-text) linear}
.tech-fd-in.tech-sent #tech-fd-typed{opacity:0}
.tech-fd-caret{display:none;width:1.5px;height:15px;margin-left:1px;background:#2b2b2b;animation:tech-blink 1s steps(1) infinite;animation-play-state:paused}
.tech-run .tech-fd-caret{animation-play-state:running}
.tech-fd-ask.tech-typing .tech-fd-caret{display:inline-block}
@keyframes tech-blink{50%{opacity:0}}
.tech-fd-send{flex:none;width:48px;display:grid;place-items:center;background:#e2e2e2;font-size:18px;color:#717782;transition:background .2s,color .2s}
.tech-fd-send .tech-ic{stroke-width:1.8}
.tech-fd-ask.tech-armed .tech-fd-send{background:#2b7fff;color:#fff}
.tech-fd-foot{flex:none;height:47px;display:flex;align-items:center;padding:0 8px}
.tech-fd-savebtn{display:inline-flex;align-items:center;gap:9px;height:29px;padding:0 16px 0 14px;background:#3b82f6;color:#fff;font-size:14px;font-weight:600;border-radius:2px}
.tech-fd-savebtn .tech-ic{font-size:17px;stroke-width:1.8}
.tech-fd-gear{font-size:21px;margin-left:14px;color:#1d1d1d;stroke-width:1.8}
.tech-fd-zoom{margin-left:auto;display:inline-flex;align-items:center;gap:6px;font-size:13px;color:#333}
.tech-fd-zoom .tech-ic{font-size:19px;color:#1d1d1d;stroke-width:1.9}
.tech-fd-foot .tech-fd-sep{margin:0 16px}
.tech-fd-sun{font-size:21px;margin-right:9px;color:#1d1d1d;stroke-width:1.8}

.tech-fd-canvas{position:absolute;left:398px;top:42px;width:460px;height:858px}
.tech-fd-seg{position:absolute;left:133px;top:32px;width:178px;height:47px;display:flex;gap:1px;padding:9px;background:#fff;border:1px solid #d3d3d3;box-shadow:0 1px 4px rgba(0,0,0,.12)}
.tech-fd-seg span{flex:1;display:grid;place-items:center;background:#e3e3e3;font-size:13.5px;color:#444;transition:background .3s,color .3s}
.tech-fd-seg span.on{background:#2b7fff;color:#fff}
.tech-fd-wf{position:absolute;left:338px;top:32px;width:118px;height:47px;display:flex;align-items:center;justify-content:center;gap:8px;background:#2b7fff;color:#fff;font-size:14px;font-weight:600;transition:background .3s,box-shadow .3s}
.tech-fd-wf .tech-ic{font-size:15px;stroke-width:1.9}
.tech-fd-wf .tech-ic:last-child{font-size:16px;margin-left:4px;stroke-width:2.2}
.tech-fd-card{position:absolute;left:40px;top:289px;width:380px;height:339px;background:#fff;box-shadow:0 14px 24px rgba(0,0,0,.14);opacity:0;transform:translateY(10px);transition:opacity var(--t-in) var(--ease-soft),transform var(--t-in) var(--ease-soft)}
.tech-fd-card.tech-in{opacity:1;transform:none}
.tech-fd-card::before{content:"";position:absolute;left:0;right:0;top:40px;bottom:0;background-image:linear-gradient(#f2f2f2 1px,transparent 1px),linear-gradient(90deg,#f2f2f2 1px,transparent 1px);background-size:20px 20px;background-position:0 19px,1px 0}
.tech-fd-ch{position:relative;height:40px;display:flex;align-items:center;padding-left:8px;background:#e5e5e5;font-size:15px;color:#2b2b2b}
.tech-fd-f{position:absolute;display:flex;align-items:center;padding:0 8px;border:1px solid #d6d6d6;background:#fff;font-size:14px;color:#2b2b2b;white-space:nowrap;opacity:0;transform:scale(.96);transition:opacity .5s var(--ease-soft),transform .5s var(--ease-soft),border-color .3s,box-shadow .3s}
.tech-fd-f.tech-in{opacity:1;transform:none}
.tech-fd-f.tech-new{border-color:#2b7fff;box-shadow:0 0 0 3px rgba(43,127,255,.15)}
.tech-fd-f > span{overflow:hidden;text-overflow:ellipsis}
.tech-fd-s0{left:32px;top:55px;width:108px;height:30px}
.tech-fd-s1{left:152px;top:55px;width:200px;height:30px}
.tech-fd-s2{left:33px;top:95px;width:320px;height:31px}
.tech-fd-s3{left:32px;top:138px;width:95px;height:30px}
.tech-fd-s4{left:140px;top:138px;width:100px;height:30px}
.tech-fd-s5{left:252px;top:138px;width:100px;height:30px}
.tech-fd-s6{left:32px;top:178px;width:321px;height:100px;align-items:flex-start;padding-top:6px}
.tech-fd-sel::after{content:"";position:absolute;right:10px;top:12px;border:5px solid transparent;border-top:7px solid #111;border-bottom:0}
.tech-fd-sel > span{padding-right:20px}
.tech-fd-date{overflow:visible;justify-content:center;padding-right:26px}
.tech-fd-date em{position:absolute;left:10px;top:-7px;padding:0 3px;background:#fff;font-style:normal;font-size:10px;line-height:12px;color:#3a3a3a;white-space:nowrap;max-width:76px;overflow:hidden;text-overflow:ellipsis}
.tech-fd-date > span{font-size:13px;letter-spacing:.02em;color:#3a3a3a;padding-top:3px}
.tech-fd-date .tech-ic{position:absolute;right:6px;top:6px;font-size:17px;color:#222;stroke-width:1.7}
.tech-fd-area.tech-picked{border-color:#95bfff;overflow:visible}
.tech-fd-hd{position:absolute;inset:-4px;pointer-events:none;opacity:0;transition:opacity .5s var(--ease-soft)}
.tech-fd-area.tech-picked .tech-fd-hd{opacity:1}
.tech-fd-hd i{position:absolute;width:6px;height:6px;background:#fff;border:1px solid #6fa6ff}
.tech-fd-hd i:nth-child(1){left:0;top:0}.tech-fd-hd i:nth-child(2){left:calc(50% - 3px);top:0}.tech-fd-hd i:nth-child(3){right:0;top:0}
.tech-fd-hd i:nth-child(4){left:0;top:calc(50% - 3px)}.tech-fd-hd i:nth-child(5){right:0;top:calc(50% - 3px)}
.tech-fd-hd i:nth-child(6){left:0;bottom:0}.tech-fd-hd i:nth-child(7){left:calc(50% - 3px);bottom:0}.tech-fd-hd i:nth-child(8){right:0;bottom:0}
.tech-fd-badge{position:absolute;left:0;top:-15px;height:10px;padding:0 4px;background:#2b7fff;color:#fff;font-size:6.5px;line-height:10px;font-weight:600;letter-spacing:.02em;opacity:0;transition:opacity .5s var(--ease-soft)}
.tech-fd-area.tech-picked .tech-fd-badge{opacity:1}
.tech-fd-b{position:absolute;top:288px;width:80px;height:32px;display:grid;place-items:center;color:#fff;font-size:15px;opacity:0;transition:opacity .5s var(--ease-soft)}
.tech-fd-b.tech-in{opacity:1}
.tech-fd-bsave{left:182px;background:#3e84f6}
.tech-fd-bdel{left:272px;background:#e6161e}
/* the Listing tab: the generated list, in ProBuilt's own list style */
.tech-fd-listing{position:absolute;left:14px;top:250px;width:432px;height:330px;opacity:0;transform:translateY(10px);transition:opacity var(--tech-out) var(--ease-io),transform var(--t-out) var(--ease-io);pointer-events:none}
.tech-fd-listing .tech-pl{font-size:10.5px;height:100%;border:1px solid #dcdcdc;box-shadow:0 14px 24px rgba(0,0,0,.14)}
.tech-fd.tech-list .tech-fd-listing{opacity:1;transform:none;transition:opacity var(--t-in) var(--ease-soft),transform var(--t-in) var(--ease-soft)}
.tech-fd.tech-list .tech-fd-card,.tech-fd .tech-fd-card.tech-gone,.tech-fd .tech-fd-listing.tech-gone{opacity:0;transform:translateY(-8px);transition:opacity var(--tech-out) var(--ease-io),transform var(--t-out) var(--ease-io)}
.tech-fd-card.tech-gone,.tech-fd-listing.tech-gone{pointer-events:none}
.tech-fd-listing tbody tr{opacity:0;transition:opacity .5s var(--ease-soft)}
.tech-fd-listing tbody tr.tech-in{opacity:1}

.tech-fd-split{position:absolute;left:857px;top:430px;width:2px;height:80px;background:#1f1f1f}
.tech-fd-flow{position:absolute;left:860px;top:42px;width:540px;height:858px;background:#fff radial-gradient(circle,#cdcdd2 0 .85px,transparent 1.25px) 0 0/15.6px 15.6px;background-position:15px 9px}
.tech-fd-ur{position:absolute;left:19px;top:15px;width:83px;height:41px;display:flex;align-items:center;justify-content:center;gap:14px;background:#000;border-radius:6px;box-shadow:0 5px 12px rgba(0,0,0,.28);font-size:17px;color:#fff;z-index:3}
.tech-fd-ur .tech-fd-off{color:#4f5560}
.tech-fd-rf{position:absolute;right:5px;bottom:3px;font-size:9.5px;color:#9aa3ad}
.tech-fd-graph{position:absolute;left:0;top:0;width:540px;height:858px;transform-origin:0 0}
.tech-fd-edges{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.tech-fd-e{fill:none;stroke:#cfd0d4;stroke-width:1.1;stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset .7s var(--ease-io),opacity var(--t-in) var(--ease-soft)}
.tech-fd-e.tech-in{stroke-dashoffset:0}
.tech-fd-e.tech-dim{opacity:0;transition:stroke-dashoffset .7s var(--ease-io),opacity var(--tech-out) var(--ease-io)}
.tech-fd-nd{position:absolute;display:flex;align-items:center;justify-content:center;gap:5px;background:#eff6ff;border:1px solid #7db0ff;border-radius:5px;font-size:11px;color:#1b1b1b;opacity:0;transform:scale(.9);transition:opacity var(--t-in) var(--ease-soft),transform var(--t-in) var(--ease-soft)}
.tech-fd-nd.tech-in{opacity:1;transform:none}
.tech-fd-nd.tech-dim{opacity:.22;transform:scale(.97);transition:opacity var(--tech-out) var(--ease-io),transform var(--t-out) var(--ease-io)}
.tech-fd-nd b{font-weight:700}
.tech-fd-nd > .tech-ic{font-size:12px;stroke-width:2}
.tech-fd-hl,.tech-fd-hr{position:absolute;top:50%;width:7px;height:7px;margin-top:-3.5px;border-radius:50%;background:#1a192b}
.tech-fd-hl{left:-4px}.tech-fd-hr{right:-4px}
.tech-fd-refresh{left:169px;top:85px;width:198px;height:129px;display:block}
.tech-fd-refresh .tech-fd-hl,.tech-fd-refresh .tech-fd-hr{top:64px}
.tech-fd-refresh > b{position:absolute;left:7px;top:14px;font-size:11px}
.tech-fd-ns{position:absolute;left:7px;top:35px;width:155px;height:25px;display:flex;align-items:center;padding:0 7px;background:#fff;border:1px solid #2d2d2d;border-radius:1px;font-size:9px;color:#444}
.tech-fd-ns i{margin-left:auto;border:3.5px solid transparent;border-top:5px solid #222;border-bottom:0}
.tech-fd-ns2{top:66px}
.tech-fd-nt{position:absolute;left:171px;top:40px;font-size:13px;color:#222;stroke-width:1.9}
.tech-fd-nt2{top:71px}
.tech-fd-add{position:absolute;left:7px;top:98px;width:184px;height:17px;display:grid;place-items:center;background:#3b82f6;color:#fff;font-size:9.5px}
.tech-fd-close{left:236px;top:274px;width:92px;height:42px}
.tech-fd-save{left:149px;top:366px;width:77px;height:61px;flex-direction:column;gap:6px;font-size:12px}
.tech-fd-pl{position:absolute;right:calc(100% + 6px);top:50%;transform:translateY(-50%);font-style:normal;font-size:11px;color:#333}
.tech-fd-del{left:365px;top:365px;width:95px;height:42px}
.tech-fd-trig{display:block;background:#fefce8;border-color:#f8da83}
.tech-fd-trig .tech-fd-hr{top:36px}
.tech-fd-onsave{left:109px;top:534px;width:135px;height:76px}
.tech-fd-ondel{left:324px;top:533px;width:134px;height:76px}
.tech-fd-tz{position:absolute;left:50%;top:12px;margin-left:-7px;font-size:14px;color:#d4a017;stroke-width:1.8}
.tech-fd-trig em{position:absolute;left:7px;top:44px;font-size:11px;color:#444}
.tech-fd-tb{position:absolute;left:26px;top:38px;width:102px;height:24px;display:flex;align-items:center;padding:0 6px;background:#fef08a;border:1px solid #d5a025;font-size:9px}
.tech-fd-tb .tech-ic{margin-left:auto;font-size:13px;color:#d4a017;stroke-width:1.8}

/* phones: the same window, laid out for a narrow screen. The assistant sits on top, the canvas below,
   and the Workflow button opens the workflow over the canvas, as it does in the product. */
.tech-fd.tech-fd-n{width:560px;height:934px}
.tech-fd-n .tech-fd-title{font-size:14px;overflow:hidden;text-overflow:ellipsis}
.tech-fd-n .tech-fd-side{width:548px;height:324px}
.tech-fd-n .tech-fd-log{padding:10px 4px 8px;justify-content:flex-end;gap:8px}
.tech-fd-n .tech-fd-chat-h{display:none}
.tech-fd-n .tech-fd-msg{font-size:13px}
.tech-fd-n .tech-fd-canvas{left:0;top:374px;width:560px;height:560px}
.tech-fd-n .tech-fd-seg{left:118px;top:14px}
.tech-fd-n .tech-fd-wf{left:323px;top:14px}
.tech-fd-n .tech-fd-card{left:90px;top:120px}
.tech-fd-n .tech-fd-listing{left:40px;top:100px;width:480px}
.tech-fd-n .tech-fd-split{display:none}
.tech-fd-n .tech-fd-flow{left:0;top:450px;width:560px;height:484px;border-top:1px solid #e6e6e6;opacity:0;transition:opacity var(--t-in) var(--ease-io)}
.tech-fd-n.tech-wfon .tech-fd-flow{opacity:1;transition:opacity var(--t-in) var(--ease-soft)}
.tech-fd-n .tech-fd-graph{transform:translate(42px,-58px) scale(.84)}
.tech-fd-n .tech-fd-ur{display:none}
.tech-fd.tech-wfon .tech-fd-wf{background:#1f6be0;box-shadow:inset 0 0 0 2px rgba(255,255,255,.35)}

.tech-feats{position:relative;z-index:1;display:grid;grid-template-columns:repeat(4,1fr);gap:24px;margin:clamp(48px,6vw,80px) 0 0;padding:0;list-style:none}
.tech-feats li{border-top:1px solid var(--line);padding-top:18px;display:flex;flex-direction:column;gap:6px}
.tech-feats b{font-family:var(--display);font-weight:300;font-size:22px;letter-spacing:-.02em;line-height:1.15}
.tech-feats span{color:var(--dim);font-size:14px;line-height:1.5}

/* ---------- 1b · the virtual database: a fixed table vs. the same table flipped sideways ---------- */
.tech-vdb{position:relative;z-index:1;margin-top:clamp(90px,11vw,160px)}
.tech-vdb-h{font-size:clamp(38px,4.8vw,72px);margin-top:18px}
.tech-vdb-h span{display:block;color:var(--blue)}
.tech-vdb-fig{margin:0;display:grid;grid-template-columns:1fr 1fr;gap:24px;align-items:stretch}
.tech-vdb-p{position:relative;display:flex;flex-direction:column;min-width:0;border:1px solid var(--line);border-radius:22px;padding:clamp(20px,2.4vw,30px);background:linear-gradient(180deg,rgba(11,43,102,.16),rgba(255,255,255,.01));overflow:hidden}
.tech-vdb-new{background:radial-gradient(90% 70% at 50% 100%,rgba(25,165,255,.1),transparent 70%),linear-gradient(180deg,rgba(11,43,102,.24),rgba(255,255,255,.01))}
.tech-vdb-ph{display:flex;align-items:flex-end;justify-content:space-between;gap:10px 24px;flex-wrap:wrap;margin-bottom:clamp(16px,2vw,24px)}
.tech-vdb-t{margin:0;font-family:var(--display);font-weight:300;font-size:clamp(22px,2vw,30px);line-height:1.12;letter-spacing:-.02em}
.tech-vdb-old .tech-vdb-t{color:var(--dim)}
.tech-vdb-cap{margin:auto 0 0;padding-top:16px;font-size:15px;color:var(--dim);min-height:3.2em}
.tech-vdb-cap b{color:#fff;font-weight:600}
.tech-vdb-cap > .tech-xn,.tech-vdb-cap > .tech-xo,.tech-cap > .tech-xn,.tech-cap > .tech-xo{display:block}

/* the grid: every cell is placed in em, so the table can turn on its side. 1em follows the panel width */
.tech-vdb-g{position:relative;container-type:inline-size;width:100%}
.tech-vdb-g > .tech-vdb-in{--u:calc(100cqw / 41);position:relative;font-size:var(--u);height:calc(var(--rows,5) * 2.5 * var(--u))}
.tech-vdb-c{position:absolute;height:calc(2.5 * var(--u));line-height:calc(2.5 * var(--u));padding:0 calc(.55 * var(--u));white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-variant-numeric:tabular-nums;transition:left .9s var(--ease),top .9s var(--ease),width .9s var(--ease),background-color .5s,color .5s,opacity .5s,transform .5s var(--ease-soft),border-color .4s,box-shadow .5s}
.tech-vdb-c .tech-vdb-l2{position:absolute;inset:0;padding:inherit;opacity:0;transition:opacity .5s .35s}
.tech-vdb-c .tech-vdb-l1{transition:opacity .4s .2s}
.tech-flip .tech-vdb-c .tech-vdb-l1{opacity:0}
.tech-flip .tech-vdb-c .tech-vdb-l2{opacity:1}

/* everyone else: a dark SQL client */
.tech-vdb-db{border:1px solid rgba(255,255,255,.12);border-radius:10px;background:rgba(2,5,15,.6);overflow:hidden}
.tech-vdb-dbar{display:flex;align-items:center;gap:8px;height:34px;padding:0 12px;border-bottom:1px solid rgba(255,255,255,.08);font:600 13px ui-monospace,"SF Mono",Menlo,Consolas,monospace;color:rgba(255,255,255,.72)}
.tech-vdb-dbar .tech-ic{color:rgba(255,255,255,.45)}
.tech-vdb-dbar em{margin-left:auto;font:400 12px var(--body);font-style:normal;color:var(--dimmer)}
#tech-vdb-gl .tech-vdb-c{font-family:ui-monospace,"SF Mono",Menlo,Consolas,monospace;font-size:calc(.84 * var(--u));color:rgba(255,255,255,.62);border-bottom:1px solid rgba(255,255,255,.06)}
#tech-vdb-gl .tech-vdb-c.h{color:rgba(255,255,255,.85);background:rgba(255,255,255,.05)}
#tech-vdb-gl .tech-vdb-c.ghost{opacity:0;border:1px dashed rgba(255,255,255,.35);border-top-width:0;border-bottom-width:0;color:var(--dimmer);font-style:italic}
#tech-vdb-gl .tech-vdb-c.ghost.h{border-top-width:1px;font-style:normal;color:#fff}
#tech-vdb-gl .tech-vdb-c.ghost:last-child{border-bottom-width:1px}
#tech-vdb-gl .tech-vdb-c.ghost.on{opacity:1}
#tech-vdb-gl .tech-vdb-c.alter{background:rgba(25,165,255,.1);color:#fff;box-shadow:inset 0 0 0 1px rgba(25,165,255,.6)}
#tech-vdb-gl.tech-busy .tech-vdb-c:not(.h){color:rgba(255,255,255,.35)}
.tech-vdb-sql{position:relative;overflow:hidden;margin:0;min-height:4.4em;padding:10px 12px 12px;border-top:1px solid rgba(255,255,255,.08);font:12.5px/1.5 ui-monospace,"SF Mono",Menlo,Consolas,monospace;color:#9fd3ff;word-break:break-word}
.tech-vdb-sql::before,.tech-vdb-sqlo::before{content:"> ";color:var(--dimmer)}
/* the last statement scrolls up and fades out while the next one is typed */
.tech-vdb-sqlo{position:absolute;left:12px;right:12px;top:10px;pointer-events:none;transition:opacity var(--tech-out) var(--ease-io),transform var(--t-out) var(--ease-io)}
.tech-vdb-sqlo.tech-out{opacity:0;transform:translateY(-1em)}
.tech-vdb-caret{display:inline-block;width:.55em;height:1.05em;margin-left:1px;vertical-align:-.18em;background:rgba(159,211,255,.8);animation:tech-vdb-blink 1s steps(1) infinite}
@keyframes tech-vdb-blink{50%{opacity:0}}

/* the queue every change waits in */
.tech-vdb-steps{list-style:none;margin:16px 0 0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px;counter-reset:s}
.tech-vdb-steps li{position:relative;display:flex;flex-direction:column;align-items:center;gap:7px;text-align:center;font-size:12.5px;line-height:1.25;color:var(--dimmer);transition:color .4s}
.tech-vdb-steps li::before{content:"";position:absolute;top:10px;left:calc(50% + 14px);right:calc(-50% + 14px);height:1px;background:rgba(255,255,255,.12)}
.tech-vdb-steps li:last-child::before{display:none}
.tech-vdb-steps i{position:relative;width:21px;height:21px;border-radius:50%;border:1.5px solid rgba(255,255,255,.22);transition:border-color .42s var(--ease-io),background-color .42s var(--ease-io)}
/* icon parts, all present and faded in or out by state: i::before the waiting pulse, i::after the check,
   .tech-vdb-sp the spinner arc, .tech-vdb-hd the clock hands (both added by tech.js) */
.tech-vdb-steps i::before,.tech-vdb-steps i::after,.tech-vdb-sp,.tech-vdb-hd{content:"";position:absolute;opacity:0;transition:opacity var(--tech-out) var(--ease-io)}
.tech-vdb-steps i::before,.tech-vdb-sp{inset:-1.5px;border-radius:50%}
.tech-vdb-steps i::before{animation:tech-vdb-wait 1.6s ease-in-out infinite}
.tech-vdb-steps i::after{left:6px;top:3px;width:5px;height:9px;border:solid #19A5FF;border-width:0 1.8px 1.8px 0;transform:rotate(45deg)}
.tech-vdb-sp{border:1.5px solid transparent;border-top-color:#19A5FF;animation:tech-spin .8s linear infinite;animation-play-state:paused}
.tech-vdb-hd{left:50%;top:50%;width:5px;height:6px;margin:-6px 0 0 -.75px;border:solid #fff;border-width:0 0 1.5px 1.5px;border-radius:0 0 0 1px}
.tech-vdb-steps li.run{color:#fff}
.tech-vdb-steps li.run i{border-color:rgba(25,165,255,.3)}
.tech-vdb-steps li.run .tech-vdb-sp{opacity:1;animation-play-state:running}
.tech-vdb-steps li.done{color:var(--dim)}
.tech-vdb-steps li.done i{border-color:rgba(25,165,255,.7);background-color:rgba(25,165,255,.16)}
.tech-vdb-steps li.done i::after{opacity:1}
.tech-vdb-steps li.wait{color:#fff}
.tech-vdb-steps li.wait i{border-color:rgba(255,255,255,.7)}
.tech-vdb-steps li.wait i::before,.tech-vdb-steps li.wait .tech-vdb-hd{opacity:1}
@keyframes tech-vdb-wait{50%{box-shadow:0 0 0 5px rgba(255,255,255,.12)}}
@keyframes tech-spin{to{transform:rotate(360deg)}}

/* ProBuilt: the same data in a ProBuilt window, turned on its side */
.tech-vdb-win{border-radius:9px}
.tech-vdb-win .fw-bar{position:relative}
.tech-vdb-live{display:inline-flex;align-items:center;gap:.4em;margin-left:auto;padding:.1em .6em;border-radius:999px;background:#e7f5ec;color:#1d7a46;font-size:.78em;font-weight:600;opacity:0;transform:scale(.9);transition:opacity var(--t-in) var(--ease-soft),transform var(--t-in) var(--ease-soft)}
.tech-vdb-live::before{content:"";width:.5em;height:.5em;border-radius:50%;background:#2fb36b}
.tech-vdb-live.on{opacity:1;transform:none}
.tech-vdb-live + .fw-ctl{margin-left:1em}
#tech-vdb-gr{padding:.2em 0 .4em}
#tech-vdb-gr .tech-vdb-c{font-size:calc(.9 * var(--u));color:#1d2433;border-bottom:1px solid #eef1f6;background:#fff}
#tech-vdb-gr .tech-vdb-c.h{background:#f4f6fa;color:#3b4456;font-weight:600}
#tech-vdb-gr .tech-vdb-c.lab{background:#f4f6fa;color:#3b4456;font-weight:600;border-right:1px solid #e3e8f0}
#tech-vdb-gr .tech-vdb-c.h.lab{background:#e9eef6}
#tech-vdb-gr .tech-vdb-c.new{opacity:0;transform:translateY(.8em)}
#tech-vdb-gr .tech-vdb-c.new.on{opacity:1;transform:none}
#tech-vdb-gr .tech-vdb-c.flash{background:#e3f2ff}
#tech-vdb-gr .tech-vdb-c .tech-vdb-v2{position:absolute;inset:0;padding:inherit;opacity:0;transition:opacity var(--tech-out) var(--ease-io)}
#tech-vdb-gr .tech-vdb-c .tech-vdb-v1{transition:opacity var(--t-in) var(--ease-soft)}
#tech-vdb-gr .tech-vdb-c.chg .tech-vdb-v1{transition:opacity var(--tech-out) var(--ease-io)}
#tech-vdb-gr .tech-vdb-c.chg .tech-vdb-v2{transition:opacity var(--t-in) var(--ease-soft)}
#tech-vdb-gr .tech-vdb-c.chg .tech-vdb-v1{opacity:0}
#tech-vdb-gr .tech-vdb-c.chg .tech-vdb-v2{opacity:1}
.tech-vdb-pill{display:inline-block;line-height:1.5;padding:0 .5em;border-radius:3px;font-size:.86em;font-weight:600;color:#fff;background:#3cb98a;vertical-align:.05em}
.tech-vdb-pill.claim{background:#2a4c86}
.tech-vdb-pill::after{content:"";display:inline-block;margin-left:.4em;border:.25em solid transparent;border-top:.32em solid currentColor;border-bottom:0;vertical-align:.12em;opacity:.85}
.tech-vdb-lnk{color:#1565c0;text-decoration:underline;text-decoration-color:rgba(21,101,192,.35);text-underline-offset:2px}
.tech-vdb-c.off{display:none}
.tech-vdb-tag{position:absolute;right:.5em;top:50%;display:inline-flex;align-items:center;gap:.25em;height:1.55em;margin-top:-.78em;padding:0 .45em;border-radius:999px;background:#fff;border:1px solid #bcd6f5;color:#1565c0;font-size:.74em;line-height:1;font-weight:600;font-style:normal;opacity:0;transform:scale(.85);transition:opacity var(--tech-out) var(--ease-io),transform var(--t-out) var(--ease-io)}
.tech-vdb-tag .tech-ic{width:1.05em;height:1.05em;stroke-width:2.2}
.tech-vdb-c.tagged .tech-vdb-tag{opacity:1;transform:none;transition:opacity var(--t-in) var(--ease-soft) .3s,transform var(--t-in) var(--ease-soft) .3s}

/* ---------- 2 · architecture ---------- */
.tech-fig{margin:0;display:flex;flex-direction:column}
.tech-row{position:relative;border:1px solid var(--line);border-radius:22px;padding:clamp(22px,3vw,36px);background:linear-gradient(180deg,rgba(11,43,102,.16),rgba(255,255,255,.01));overflow:hidden}
.tech-row-new{background:radial-gradient(90% 70% at 50% 100%,rgba(25,165,255,.09),transparent 70%),linear-gradient(180deg,rgba(11,43,102,.22),rgba(255,255,255,.01))}
.tech-row-h{display:flex;align-items:flex-end;justify-content:space-between;gap:16px 32px;flex-wrap:wrap;margin-bottom:clamp(18px,2.4vw,30px)}
.tech-row-t{margin:0;font-family:var(--display);font-weight:300;font-size:clamp(26px,3vw,40px);letter-spacing:-.03em;line-height:1.1}
.tech-row-k{color:var(--blue)}
.tech-row-old .tech-row-t{color:var(--dim)}
.tech-x{position:relative;display:inline-block}
.tech-x::after{content:"";position:absolute;left:-1%;right:-1%;top:55%;height:2px;background:var(--coral);transform:scaleX(0);transform-origin:left;transition:transform .7s var(--ease) .5s}
.tech-on .tech-x::after{transform:scaleX(1)}
.tech-meter{display:flex;gap:22px;font-size:13px;color:var(--dim);white-space:nowrap}
.tech-meter b{color:#fff;font-weight:600;font-variant-numeric:tabular-nums;margin-left:6px}
.tech-vs{position:relative;height:56px;display:grid;place-items:center}
.tech-vs::before{content:"";position:absolute;left:50%;top:0;bottom:0;width:1px;background:linear-gradient(var(--line),rgba(25,165,255,.4),var(--line))}
.tech-vs span{position:relative;padding:2px 16px 6px;border-radius:999px;border:1px solid var(--line);background:var(--black);font-family:var(--display);font-weight:300;font-size:22px;line-height:1.2;color:var(--dim)}
.tech-cap{margin-top:clamp(12px,2vw,20px);text-align:center;font-size:15px;color:var(--dim);min-height:1.6em}
.tech-cap b{color:#fff;font-weight:600}
.tech-patent{margin-top:22px;text-align:center;font-size:12px;letter-spacing:.06em;color:var(--dimmer)}
.tech-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

.tech-svg{display:block;width:100%;height:auto;overflow:visible}
.tech-svg-n{display:none}
.tech-svg text{font-family:var(--display);font-weight:300;fill:rgba(255,255,255,.72)}
.tech-lb{font-size:18px}
.tech-svg-n .tech-lb{font-size:15px}
.tech-lb-s{font-size:13px;fill:rgba(255,255,255,.4)!important;letter-spacing:.04em}
.tech-svg-n .tech-lb-s{font-size:12px}

/* ProBuilt list window (the AI Form Designer listing tab). 1em = the grid's cell text; every size is the screenshot's at 2x divided by 12.5 */
.tech-pl{position:relative;display:flex;flex-direction:column;min-width:0;overflow:hidden;background:#fff;color:#333;font-family:Inter,"Segoe UI","Open Sans","Helvetica Neue",Arial,sans-serif;line-height:1.2;text-align:left}
.tech-pl-h{flex:none;display:flex;align-items:center;gap:.8em;height:5.2em;padding:0 1.1em 0 1.3em;border-bottom:1px solid #e9ecf1;white-space:nowrap;overflow:hidden}
.tech-pl-h > b{font-size:1.25em;font-weight:700;color:#004368;margin-right:auto}
.tech-pl-dd{flex:none;position:relative;height:2.4em;min-width:7.5em;display:flex;align-items:center;padding:0 2.2em 0 .7em;border:1px solid #d6d6d6;border-radius:2px;font-size:.92em;color:#333}
.tech-pl-dd::after{content:"";position:absolute;right:.7em;top:50%;margin-top:-.2em;border:.33em solid transparent;border-top:.45em solid #222;border-bottom:0}
.tech-pl-ics{flex:none;display:flex;align-items:center;gap:1.7em;margin-left:.9em;font-size:1.35em;color:#003b78}
.tech-pl-ics .tech-ic{stroke-width:2.3}
.tech-pl-ics .tech-ic:nth-last-child(2){font-size:.72em}
.tech-pl-g{position:relative;flex:1;min-height:0;overflow:hidden}
.tech-pl table{table-layout:fixed;border-collapse:separate;border-spacing:0 .2em;margin-top:-.2em}
.tech-pl th{height:3.2em;padding:0 .4em;font-weight:400;font-size:.92em;color:#333;text-align:center;border-left:1px solid #e6e6e6;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;background:#fff}
.tech-pl th:first-child{border-left:0}
.tech-pl th .tech-ic{font-size:1.1em;stroke-width:1.8;vertical-align:-.15em}
.tech-pl-f td{height:2.3em;padding:0;background:#f9fbff;border-left:1px solid #e6e6e6;border-bottom:2px solid #5d799b;text-align:center;border-radius:0!important}
.tech-pl-f td:first-child{border-left:0}
.tech-pl-mn{display:inline-block;width:1.05em;height:1.05em;border-radius:2px;background:#4b5bb5;vertical-align:middle;position:relative}
.tech-pl-mn::after{content:"";position:absolute;left:.25em;right:.25em;top:50%;height:2px;margin-top:-1px;background:#fff}
.tech-pl td{height:2.65em;padding:0 .8em;background:#f8fafc;box-shadow:1px 0 0 #f8fafc;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#3a3a3a}
.tech-pl td.c{text-align:center}.tech-pl td.r{text-align:right}
.tech-pl td u{color:#3b9be0}
.tech-pl tbody td:first-child{border-radius:.25em 0 0 .25em}
.tech-pl tbody td:last-child{border-radius:0 .25em .25em 0}
.tech-pl tbody tr.sel td:first-child{border-radius:.9em 0 0 .9em}
.tech-pl tbody tr.sel td:last-child{border-radius:0 .9em .9em 0}
.tech-pl tbody tr.sel td{background:#0555a5;box-shadow:1px 0 0 #0555a5;color:#fff;font-weight:700}
.tech-pl td.tech-pl-st{padding:0;text-align:center;font-size:.92em}
.tech-pl-ln{background:#4ebfa9!important;color:#fff!important}
.tech-pl-sn{background:#2ba86b!important;color:#11301f!important}
.tech-pl-billed{background:#7fe47f!important;color:#183818!important}
.tech-pl-cancel{background:#630909!important;color:#fff!important}
.tech-pl-tepid{background:#ffbe19!important;color:#4a3a00!important}
.tech-pl-warm{background:#ff7c05!important;color:#3a2000!important}
.tech-pl-ok{font-size:1.15em;color:#3cc76a;stroke-width:2.4}
.tech-pl-vs{position:absolute;right:.15em;top:5.6em;bottom:.3em;width:.42em}
.tech-pl-vs::after{content:"";position:absolute;left:0;right:0;top:calc(var(--t,0) * 60%);height:40%;border-radius:1em;background:#8b8f96}
.tech-pl-hs{position:absolute;left:.4em;bottom:.15em;width:62%;height:.38em;border-radius:1em;background:#8b8f96}
.tech-pl-ft{flex:none;display:flex;align-items:center;gap:1.4em;height:2.6em;padding:0 1.2em;border-top:1px solid #edf0f4;font-size:.92em;color:#333}
.tech-pl-tot{margin-left:auto}
.tech-pl-n{color:#1f6fa8}
.tech-pl-n:last-child{margin-right:12%}

/* one page at a time strip */
.tech-pg-box{fill:rgba(11,43,102,.12);stroke:rgba(255,255,255,.16);stroke-width:1.2}
.tech-pg-ln{stroke:rgba(255,255,255,.1);fill:none}
.tech-pg-dot{fill:rgba(255,255,255,.14)}
.tech-pg-sk{fill:rgba(255,255,255,.14)}
.tech-pg-sk2{fill:none;stroke:rgba(255,255,255,.1)}
.tech-pg-bar{fill:#fff;opacity:0;transform-box:fill-box;transform-origin:left;transform:scaleX(0)}
.tech-pg text{fill:rgba(255,255,255,.38)}
.tech-op-ln{fill:none;stroke:rgba(255,255,255,.18);stroke-width:1.2;stroke-dasharray:3 5}
.tech-op-ah{fill:none;stroke:rgba(255,255,255,.3);stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
.tech-rl-i{fill:none;stroke:rgba(255,255,255,.42);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;transform-box:fill-box;transform-origin:center}
.tech-row-old .tech-pg > *,.tech-row-old .tech-rl-i{animation-duration:8s;animation-iteration-count:infinite;animation-play-state:paused}
.tech-fig.tech-run .tech-row-old .tech-pg > *,.tech-fig.tech-run .tech-row-old .tech-rl-i{animation-play-state:running}
.tech-pg .tech-pg-box{animation-name:tech-pg-box;animation-delay:calc(var(--i) * 2s)}
.tech-pg .tech-pg-sk,.tech-pg .tech-pg-dot{animation-name:tech-pg-sk;animation-delay:calc(var(--i) * 2s)}
.tech-pg .tech-pg-sk2{animation-name:tech-pg-sk2;animation-delay:calc(var(--i) * 2s)}
.tech-pg text{animation-name:tech-pg-tx;animation-delay:calc(var(--i) * 2s)}
.tech-pg .tech-pg-bar{animation-name:tech-pg-bar;animation-delay:calc(var(--i) * 2s)}
.tech-rl-i{animation-name:tech-rl;animation-delay:calc(var(--k) * 2s + 1.55s)}
@keyframes tech-pg-box{0%,100%{fill:rgba(11,43,102,.12);stroke:rgba(255,255,255,.16)}4%,22%{fill:rgba(11,43,102,.7);stroke:#19A5FF}26%{fill:rgba(11,43,102,.12);stroke:rgba(255,255,255,.16)}}
@keyframes tech-pg-sk{0%,100%{fill:rgba(255,255,255,.14)}6%,22%{fill:rgba(255,255,255,.55)}26%{fill:rgba(255,255,255,.14)}}
@keyframes tech-pg-sk2{0%,100%{stroke:rgba(255,255,255,.1)}6%,22%{stroke:rgba(255,255,255,.4)}26%{stroke:rgba(255,255,255,.1)}}
@keyframes tech-pg-tx{0%,100%{fill:rgba(255,255,255,.38)}4%,22%{fill:#fff}26%{fill:rgba(255,255,255,.38)}}
@keyframes tech-pg-bar{0%{opacity:.9;transform:scaleX(0)}5%{opacity:.9;transform:scaleX(1)}7%,100%{opacity:0;transform:scaleX(1)}}
@keyframes tech-rl{0%{transform:rotate(0);stroke:rgba(255,255,255,.42)}2%{stroke:#19A5FF}7%{transform:rotate(360deg);stroke:#19A5FF}10%,100%{transform:rotate(360deg);stroke:rgba(255,255,255,.42)}}

/* live diagram */
.tech-tab{fill:rgba(11,43,102,.1);stroke:rgba(255,255,255,.2);stroke-width:1.2}
.tech-tab-ln{stroke:rgba(255,255,255,.1);fill:none}
.tech-tab-dot{fill:rgba(255,255,255,.16)}
.tech-svg .tech-tl-r{fill:#FF5F57}.tech-svg .tech-tl-y{fill:#FEBC2E}.tech-svg .tech-tl-g{fill:#28C840}
.tech-tab-url{fill:rgba(255,255,255,.06)}
.tech-svg .tech-tab-t{fill:rgba(255,255,255,.4)}
.tech-svg .tech-tab-one{fill:rgba(255,255,255,.38);font-family:var(--body);font-weight:600;letter-spacing:.14em}
.tech-cn{fill:none;stroke:rgba(25,165,255,.38);stroke-width:1.4}
.tech-port{fill:#02050F;stroke:rgba(25,165,255,.7);stroke-width:1.4}
.tech-sw-box{fill:#061A40;stroke:rgba(25,165,255,.55);stroke-width:1.2;transition:stroke .4s}
.tech-sw-ln{stroke:rgba(25,165,255,.25);fill:none}
.tech-sw-bg,.tech-sw-c{stroke:rgba(255,255,255,.45);stroke-width:1.4;fill:none;stroke-linecap:round}
.tech-sw-c{stroke:rgba(255,255,255,.32);stroke-width:1.2}
.tech-svg .tech-sw-t{fill:rgba(255,255,255,.88);font-family:var(--body);font-weight:400}
.tech-sw-f{fill:none;stroke:rgba(255,255,255,.16)}
.tech-sw-v{fill:rgba(255,255,255,.22)}
.tech-sw-hd{fill:rgba(255,255,255,.07)}
.tech-sw-rl{stroke:rgba(255,255,255,.07);fill:none}
.tech-sw-chip{fill:rgba(25,165,255,.35)}
.tech-lv{fill:#19A5FF;opacity:0}
.tech-svg .tech-sw-lab{fill:rgba(255,255,255,.42);font-family:var(--body)}
.tech-svg .tech-sw-val{fill:rgba(255,255,255,.82);font-family:var(--body);font-variant-numeric:tabular-nums}
.tech-svg .tech-sw-th{fill:rgba(255,255,255,.5);font-family:var(--body);font-weight:600}
.tech-svg .tech-sw-ct{fill:#fff;font-family:var(--body);font-weight:600}
.tech-db-b,.tech-db-t{fill:#061A40;stroke:rgba(25,165,255,.75);stroke-width:1.4}
.tech-db-m{fill:none;stroke:rgba(25,165,255,.4);stroke-width:1.2}
.tech-db-glow{fill:rgba(25,165,255,.22);opacity:0}
.tech-spk{fill:#fff}
.tech-spk-g{fill:rgba(25,165,255,.45)}

/* draw-in on scroll */
.tech-draw{stroke-dasharray:100;stroke-dashoffset:100;transition:stroke-dashoffset 1.6s var(--ease) var(--d,0s)}
.tech-on .tech-draw{stroke-dashoffset:0}
.tech-sw-in{opacity:0;transform:translateY(14px);transition:opacity .7s var(--ease),transform .9s var(--ease);transition-delay:var(--d,0s)}
.tech-sw{--d:0s}
.tech-sw .tech-sw-in{transition-delay:calc(var(--d) + .2s)}
.tech-on .tech-sw-in{opacity:1;transform:none}
.tech-db,.tech-port,.tech-live .tech-lb{opacity:0;transition:opacity .8s var(--ease) 1.2s}
.tech-on .tech-db,.tech-on .tech-port,.tech-on .tech-live .tech-lb{opacity:1}
.tech-pg,.tech-rl,.tech-op-ln,.tech-op-ah,.tech-row-old .tech-lb-s{opacity:0;transition:opacity .6s var(--ease)}
.tech-on .tech-pg,.tech-on .tech-rl,.tech-on .tech-op-ln,.tech-on .tech-op-ah,.tech-on .tech-row-old .tech-lb-s{opacity:1}
.tech-pg{transition-delay:calc(var(--i,0) * .12s)}

/* ---------- 3 · any industry ---------- */
/* each card: a real photo under a dark fade, the industry on top, one sourced number and its link at the bottom (like the products cards) */
.tech-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin:0;padding:0;list-style:none}
.tech-card{position:relative;isolation:isolate;overflow:hidden;min-height:620px;border-radius:20px;border:1px solid var(--line);display:flex;flex-direction:column;justify-content:flex-end;padding:28px 28px 24px;color:#fff;background:var(--navy-deep);transition-delay:calc(var(--i) * 70ms)}
.tech-card.reveal.in{transition-delay:calc(var(--i) * 70ms)}
.tech-card-ph{position:absolute;inset:0;z-index:-2;width:100%;height:100%;max-width:none;object-fit:cover;object-position:50% 18%;transform:scale(1.03);transition:transform 1.2s var(--ease);pointer-events:none;-webkit-user-drag:none;user-select:none}
.tech-card:hover .tech-card-ph{transform:scale(1)}
.tech-ph-ecommerce{object-position:62% 18%}
.tech-ph-healthcare{object-position:60% 18%}
.tech-card::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(0deg,rgba(2,5,15,.97) 0%,rgba(2,5,15,.86) 32%,rgba(2,5,15,.3) 56%,rgba(2,5,15,0) 74%),linear-gradient(180deg,rgba(2,5,15,.4),rgba(2,5,15,0) 18%)}
/* the big numbers line up across a row: each card spans four shared rows (photo room, number, why, source) */
@supports (grid-template-rows:subgrid){@media (min-width:641px){
  .tech-cards{grid-auto-rows:minmax(280px,auto) auto auto auto;row-gap:0}
  .tech-card{grid-row:span 4;display:grid;grid-template-rows:subgrid;row-gap:0;align-content:end;margin-bottom:20px}
  .tech-stat{grid-row:2;align-self:start}.tech-why{grid-row:3}.tech-src{grid-row:4;align-self:end}
}}
.tech-card h3{position:absolute;left:28px;top:24px;right:28px;font-size:clamp(26px,2.3vw,32px);letter-spacing:-.03em;text-shadow:0 2px 18px rgba(2,5,15,.6)}
.tech-stat{margin:0 0 12px}
.tech-num{display:block;font-family:var(--display);font-weight:300;font-size:clamp(60px,5.8vw,88px);line-height:.92;letter-spacing:-.045em;color:#fff;font-variant-numeric:tabular-nums}
.tech-stat span{display:block;margin-top:10px;font-family:var(--display);font-weight:300;font-size:clamp(19px,1.55vw,22px);line-height:1.25;letter-spacing:-.01em;color:#fff;text-wrap:pretty}
.tech-why{margin:0 0 16px;color:var(--dim);font-size:15px;line-height:1.55;text-wrap:pretty}
.tech-src{margin:0;padding-top:12px;border-top:1px solid var(--line);font-size:12.5px;line-height:1.45;color:var(--dimmer)}
.tech-src a{color:var(--dim);text-decoration:underline;text-decoration-color:rgba(255,255,255,.3);text-underline-offset:2px}
.tech-src a:hover{color:#fff;text-decoration-color:var(--blue)}
.tech-vbar{position:relative;height:28px;display:flex;align-items:center;gap:5px;padding:0 12px;border-bottom:1px solid var(--line);background:rgba(255,255,255,.03)}
.tech-vbar i{width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.16)}
.tech-vbar span{margin-inline:auto;transform:translateX(-12px);padding:2px 10px;border-radius:5px;background:rgba(255,255,255,.06);font-size:10.5px;color:var(--dimmer);white-space:nowrap}

/* licensing block */
.tech-lic{position:relative;margin-top:clamp(64px,8vw,110px);display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,5vw,72px);align-items:center;padding:clamp(28px,5vw,64px);border:1px solid var(--line);border-radius:26px;overflow:hidden;isolation:isolate;background:radial-gradient(70% 120% at 100% 50%,rgba(11,43,102,.7),transparent 70%),linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,.01))}
.tech-lic::before{content:"";position:absolute;right:-10%;top:50%;width:620px;height:620px;transform:translateY(-50%);border-radius:50%;background:radial-gradient(closest-side,rgba(25,165,255,.18),transparent 70%);z-index:-1;pointer-events:none}
.tech-lic-h{font-size:clamp(40px,5.2vw,76px);margin:16px 0 20px}
.tech-lic-copy p{color:var(--dim);font-size:clamp(16px,1.3vw,19px);max-width:46ch}
.tech-lic-copy .tech-kick{color:var(--blue);font-size:clamp(22px,2.2vw,32px);max-width:none}
.tech-lic-act{display:flex;align-items:center;flex-wrap:wrap;gap:14px 22px;margin-top:30px}
.tech-mail{font-size:15px;color:var(--dim);user-select:all;text-decoration:underline;text-decoration-color:rgba(255,255,255,.3);text-underline-offset:3px;transition:color .2s,text-decoration-color .2s}
.tech-mail:hover{color:#fff;text-decoration-color:var(--blue)}
.tech-mail:focus-visible{outline:2px solid var(--blue);outline-offset:3px;border-radius:2px}
/* licensing art: the same three Floating Forms windows inside four made-up products (Brightstall, an online store's admin;
   Wrenfield, clinic software; Rackmere, a warehouse app; Larchwood, finance software). The visitor's browser frame never changes.
   A switch never shows an empty, muddy or double-printed frame:
   - each product has its own opaque surface (.tech-lic-sf: top bar, page, Brightstall's sidebar, on its own ground). The new one
     wipes down over the old (clip-path, --t-in), so every pixel is one product or the other; the old one shades a little as it
     is covered (--t-out). Brand first, then the page, top to bottom.
   - .tech-lic-host[data-h] holds the window theme (frame, title bar, fields, rows). Each window tweens to it as the wipe reaches
     it (--lic-reach, from the window's y), so the windows visibly take on the product that has just arrived around them.
   - each product's own layers (.tech-lic-k[data-lk]) carry its final text, accent and status colors. Inside the windows every
     cell rolls the way the wipe goes: the old value drops out of a clip while the new one drops in (out .42 s, in .68 s), and
     since the old one always leads, the two never share a pixel.
   - the windows move with transform only (no layout). A thin blue outline stays on them, outside the host's styling, keyed to the
     caption's blue "Floating Forms inside."; it brightens on each switch. No ProBuilt branding inside the hosts. */
.tech-lic-art{position:relative;min-width:0}
.tech-lic-pick{gap:12px;margin-bottom:18px;container:licpick / inline-size}
.tech-lic-ask{font-size:clamp(19px,1.55vw,23px)}
/* the chips name the products (their brand first); as the column narrows they drop the hand, tighten, then drop the marks */
.tech-lic-try .tech-chip{display:inline-flex;align-items:center;gap:7px;flex:none;height:36px;padding:0 14px;font-size:13.5px}
.tech-lic-chm{display:block;width:15px;height:15px;flex:none}
/* the hand steps back (parts/cue.css) the first time a chip is used: here it fades there instead of dropping in one frame */
.tech-lic-try .cue-hand{transition:opacity var(--t-out) linear}
@container licpick (max-width:535px){
  .tech-lic-try .tech-hand{display:none}
}
@container licpick (max-width:502px){
  .tech-lic-try .tech-chip{gap:6px;padding:0 12px;font-size:13px}
  .tech-lic-chm{width:14px;height:14px}
}
@container licpick (max-width:469px){
  .tech-lic-try .tech-chip{padding:0 11px;font-size:12.5px}
  .tech-lic-chm{display:none}
}
@container licpick (max-width:371px){
  .tech-lic-try{gap:3px}
  .tech-lic-try .tech-chip{padding:0 8px;font-size:12px}
}
@container licpick (max-width:328px){
  .tech-lic-try .tech-chip{padding:0 7px;font-size:11.5px}
}
.tech-lic-stage{position:relative;aspect-ratio:4/3}
.tech-lic-stage::before{content:"";position:absolute;inset:8% 6% -6%;border-radius:40px;background:radial-gradient(60% 60% at 50% 45%,rgba(25,165,255,.2),transparent 70%);filter:blur(30px);z-index:-1;pointer-events:none}
.tech-lic-tab{position:absolute;inset:0;container:lictab / inline-size;border:1px solid rgba(255,255,255,.14);border-radius:14px;background:#0d1322;overflow:hidden;box-shadow:0 60px 120px rgba(0,0,0,.5),0 6px 20px rgba(0,0,0,.3);--lic-bb:clamp(24px,5.6cqw,32px);-webkit-user-select:none;user-select:none;
  /* a switch: the new product wipes down over the old (--t-in); each window re-skins (--lic-wt, as long as the incoming data takes)
     once the wipe has reached it (--lic-reach on .tech-lic-w), and its data rolls over just ahead of that. There is always a clear
     edge between windows and ground. */
  --lic-wt:var(--t-in)}
.tech-lic-sprite{position:absolute;width:0;height:0;overflow:hidden}
.tech-lic-tab svg{display:block}

/* the visitor's browser: neutral and constant. Only the tab title and favicon follow the product. */
.tech-lic-bbar{position:absolute;left:0;right:0;top:0;height:var(--lic-bb);display:flex;align-items:flex-end;gap:5px;padding:0 10px 0 12px;background:#182032;border-bottom:1px solid rgba(255,255,255,.06)}
.tech-lic-bbar > i{align-self:center;width:7px;height:7px;flex:none;border-radius:50%;background:rgba(255,255,255,.2)}
.tech-lic-btab{margin-left:10px;height:calc(var(--lic-bb) - 6px);min-width:0;max-width:64%;padding:0 14px 0 10px;border-radius:7px 7px 0 0;background:#273047;align-items:stretch;overflow:hidden;color:rgba(255,255,255,.86)}
.tech-lic-btab .tech-lic-k{display:flex;align-items:center;gap:7px;white-space:nowrap;overflow:hidden;font:400 11px/1 var(--body)}
.tech-lic-fav{width:12px;height:12px;flex:none}
.tech-lic-c0{color:#3f5b2b}.tech-lic-c1{color:#2d6cb5;--lic-mk:#fff}.tech-lic-c2{color:#f0a531}.tech-lic-c3{color:#16181c;--lic-mk:#fff}

/* the host product: a top bar, a page, and (Brightstall only) a sidebar over the left of the top bar. No layout ever tweens. */
.tech-lic-host{position:absolute;left:0;right:0;bottom:0;top:var(--lic-bb);overflow:hidden;--lic-side:21%;background-color:var(--lh-bg);font-size:calc(100cqw / 52);line-height:1.3;text-align:left}
/* each product's window theme: frame, title bar, fields and list rows (plus the ground, seen only if two switches overlap) */
.tech-lic-host[data-h="0"]{--lh-bg:#f5f4ef;--lh-chrome:#fff;--lh-cline:#e5e2d8;--lh-win:#fff;--lh-wline:#dad6ca;--lh-sh:rgba(46,40,20,.28);--lh-r:12px;--lh-bar:#fff;--lh-bink:#23251f;--lh-acc:#3f5b2b;--lh-soft:#e3ebd8;--lh-stripe:0;--lh-hl:#e3ebd8;--lh-fbg:#fff;--lh-fline:#d9d5c9;--lh-wfr:8px;--lh-head:#f6f4ee;--lh-wrow:#e5e2d8}
.tech-lic-host[data-h="1"]{--lh-bg:#f1f5f9;--lh-chrome:#2d6cb5;--lh-cline:#2d6cb5;--lh-win:#fff;--lh-wline:#d0dded;--lh-sh:rgba(18,48,88,.28);--lh-r:18px;--lh-bar:#edf3fa;--lh-bink:#1b3a5e;--lh-acc:#2d6cb5;--lh-soft:#e1ecf8;--lh-stripe:0;--lh-hl:#e1ecf8;--lh-fbg:#fff;--lh-fline:#c9d7e6;--lh-wfr:12px;--lh-head:#f3f7fb;--lh-wrow:#dce5ee}
.tech-lic-host[data-h="2"]{--lh-bg:#13161a;--lh-chrome:#0c0e11;--lh-cline:#2a3038;--lh-win:#1c2127;--lh-wline:#363d47;--lh-sh:rgba(0,0,0,.6);--lh-r:3px;--lh-bar:#272d35;--lh-bink:#f2f3f5;--lh-acc:#f0a531;--lh-soft:rgba(240,165,49,.2);--lh-stripe:3;--lh-hl:rgba(240,165,49,.18);--lh-fbg:#14181d;--lh-fline:#14181d;--lh-wfr:2px;--lh-head:#232930;--lh-wrow:#2a3038}
.tech-lic-host[data-h="3"]{--lh-bg:#fbfaf7;--lh-chrome:#16181c;--lh-cline:#16181c;--lh-win:#fff;--lh-wline:#d8d4cc;--lh-sh:rgba(16,16,20,.32);--lh-r:6px;--lh-bar:#16181c;--lh-bink:#fff;--lh-acc:#8c2f3e;--lh-soft:#f5e6e8;--lh-stripe:0;--lh-hl:#e6f0e9;--lh-fbg:#f4f2ed;--lh-fline:#f4f2ed;--lh-wfr:3px;--lh-head:#f5f3ee;--lh-wrow:#e7e4de}
/* each product's own colors, corners and type, on every layer of that product. Status pills say what they mean (ok, warn),
   separate from the brand accent. */
.tech-lic-k[data-lk="0"]{--lh-chrome:#fff;--lh-cline:#e5e2d8;--lh-ink:#23251f;--lh-mute:#6c6f64;--lh-cink:#23251f;--lh-cmute:#85887d;--lh-bink:#23251f;--lh-acc:#3f5b2b;--lh-aink:#fff;--lh-soft:#e3ebd8;--lh-hl:#e3ebd8;
  --lh-pill:#eeece4;--lh-pink:#5b5e55;--lh-ok-bg:#e0e9d3;--lh-ok-ink:#3a5626;--lh-warn-bg:#f4e7cc;--lh-warn-ink:#74500e;
  --lh-panel:#fff;--lh-line:#e5e2d8;--lh-wline:#dad6ca;--lh-side-bg:#efeee7;--lh-bg:#f5f4ef;--lh-fr:8px;--lh-pr:99px;
  font-family:"Nunito Sans","Avenir Next","Segoe UI","Helvetica Neue",Arial,sans-serif}
.tech-lic-k[data-lk="1"]{--lh-chrome:#2d6cb5;--lh-cline:#2d6cb5;--lh-ink:#18293b;--lh-mute:#5f7287;--lh-cink:#fff;--lh-cmute:rgba(255,255,255,.74);--lh-bink:#1b3a5e;--lh-acc:#2d6cb5;--lh-aink:#fff;--lh-soft:#e1ecf8;--lh-hl:#e1ecf8;
  --lh-pill:#e9eff6;--lh-pink:#4f6378;--lh-ok-bg:#e0f0e7;--lh-ok-ink:#25704c;--lh-warn-bg:#fbeadc;--lh-warn-ink:#8a4a17;
  --lh-panel:#fff;--lh-line:#dce5ee;--lh-wline:#d0dded;--lh-side-bg:#f1f5f9;--lh-bg:#f1f5f9;--lh-fr:12px;--lh-pr:99px;
  font-family:"Helvetica Neue",Helvetica,Arial,"Liberation Sans",sans-serif}
.tech-lic-k[data-lk="2"]{--lh-chrome:#0c0e11;--lh-cline:#2a3038;--lh-ink:#e6e8eb;--lh-mute:#8d96a1;--lh-cink:#f2f3f5;--lh-cmute:#7f8893;--lh-bink:#f2f3f5;--lh-acc:#f0a531;--lh-aink:#1b1405;--lh-soft:rgba(240,165,49,.2);--lh-hl:rgba(240,165,49,.18);
  --lh-pill:#2b323b;--lh-pink:#a9b1bb;--lh-ok-bg:rgba(112,190,134,.17);--lh-ok-ink:#93d1a5;--lh-warn-bg:rgba(240,165,49,.2);--lh-warn-ink:#f3b452;
  --lh-panel:#1a1e24;--lh-line:#2a3038;--lh-wline:#3c4450;--lh-side-bg:#13161a;--lh-bg:#13161a;--lh-fr:2px;--lh-pr:2px;
  font-family:Bahnschrift,"DIN Alternate","Roboto Condensed","Arial Narrow","DejaVu Sans Condensed","DejaVu Sans",sans-serif;font-stretch:condensed}
.tech-lic-k[data-lk="3"]{--lh-chrome:#16181c;--lh-cline:#16181c;--lh-ink:#16181c;--lh-mute:#6a6e77;--lh-cink:#fff;--lh-cmute:rgba(255,255,255,.62);--lh-bink:#fff;--lh-acc:#8c2f3e;--lh-aink:#fff;--lh-soft:#f5e6e8;--lh-hl:#e6f0e9;
  --lh-pill:#eeebe5;--lh-pink:#5d6169;--lh-ok-bg:#e6f0e9;--lh-ok-ink:#2f6b45;--lh-warn-bg:#f5e6e8;--lh-warn-ink:#8c2f3e;
  --lh-panel:#fff;--lh-line:#e7e4de;--lh-wline:#d8d4cc;--lh-side-bg:#fbfaf7;--lh-bg:#fbfaf7;--lh-fr:3px;--lh-pr:3px;
  font-family:Inter,"Segoe UI",system-ui,-apple-system,sans-serif;font-variant-numeric:tabular-nums;letter-spacing:-.005em}
.tech-lic-btab .tech-lic-k[data-lk]{font-family:var(--body);font-stretch:normal;letter-spacing:0}

/* a cell's values roll, the same way the wipe goes: all of them share one cell, which clips them. The outgoing one drops down and out
   (--t-out) while the incoming one drops in from above (--t-in), overlapping. Each moves by the cell's full height (--lic-roll) and
   the old one is always further along, so the two never share a pixel, and the clip alone hides what has left: no fade, so every
   cell shows readable text on every frame. At rest the value showing is .on and every other one waits above its cell, hidden.
   tech.js moves them (Web Animations, from where each one is), so a switch cut short carries on from there instead of snapping:
   whatever is showing moves on together as one strip, rolling back up to a value still on its way out, or down to bring a third
   value in right behind the last one showing. */
.tech-lic-st{display:grid;min-width:0;overflow:hidden}
.tech-lic-st > .tech-lic-k{--lic-roll:100%;grid-area:1/1;min-width:0;visibility:hidden;transform:translateY(calc(-1 * var(--lic-roll)));
  /* no transitions: the delay is only read by tech.js, the beat after which this cell rolls in an ordinary switch */
  transition:none;transition-delay:var(--lic-at,0s)}
.tech-lic-st > .tech-lic-k.on{visibility:visible;transform:none}
/* inside a window the data rolls just as the wipe reaches that window (rows a beat apart, top to bottom) */
.tech-lic-w .tech-lic-st > .tech-lic-k{--lic-at:calc(var(--lic-cue) + var(--rd,0s))}
.tech-lic-wb .tech-lic-k{color:var(--lh-ink)}
.tech-lic-wt > .tech-lic-k{color:var(--lh-bink)}
/* a product's surface. The incoming one sits on top and wipes down (inset from the bottom eases to 0); the outgoing one stays put
   underneath, fully drawn, and shades a little as it is covered, so nothing ever shows through. tech.js keeps a surface that is
   still being covered (.tech-lic-was) drawn until the wipe over it ends, and freezes a wipe that is cut short where it stands. */
.tech-lic-surf{position:absolute;inset:0;isolation:isolate}   /* its own stacking context: the windows stay above every surface */
.tech-lic-sf{position:absolute;inset:0;overflow:hidden;background-color:var(--lh-bg);color:var(--lh-ink);visibility:hidden;clip-path:inset(0 0 100% 0)}
.tech-lic-sf.on{visibility:visible;clip-path:inset(0 0 0 0);z-index:2;transition:clip-path var(--t-in) var(--ease-io)}
.tech-lic-sf.tech-lic-was{visibility:visible;clip-path:inset(0 0 0 0);z-index:1}
.tech-lic-sf::after{content:"";position:absolute;inset:0;z-index:5;background:#0a0f1f;opacity:0;pointer-events:none;transition:opacity var(--t-in) var(--ease-io)}
.tech-lic-sf.tech-lic-was::after{opacity:.16;transition:opacity var(--t-out) var(--ease-io)}
/* going back: a surface over the one coming back rolls up off it (tech.js sets where it goes) */
.tech-lic-sf.tech-lic-back{transition:clip-path var(--t-out) var(--ease-io)}
.tech-lic-sf.tech-lic-back::after{opacity:0}
/* resetting a product's live values happens at once, and only while nothing of that product is on screen */
.tech-lic-snap *{transition:none!important;animation:none!important}

/* chrome: each product's top bar, and Brightstall's sidebar over the left of it */
.tech-lic-top{position:absolute;left:0;right:0;top:0;height:3em;display:flex;align-items:center;gap:1.1em;padding:0 1.1em;white-space:nowrap;overflow:hidden;background-color:var(--lh-chrome);box-shadow:inset 0 -1px var(--lh-cline);color:var(--lh-cink)}
.tech-lic-sf[data-lk="0"] > .tech-lic-top,.tech-lic-sf[data-lk="0"] > .tech-lic-page{left:var(--lic-side)}
.tech-lic-side{position:absolute;left:0;top:0;bottom:0;width:var(--lic-side);overflow:hidden;display:flex;flex-direction:column;gap:.2em;padding:1em .7em;background:var(--lh-side-bg);box-shadow:inset -1px 0 var(--lh-line)}
.tech-lic-side .tech-lic-brand{margin:0 0 1em .3em;color:var(--lh-ink)}
.tech-lic-si{display:flex;align-items:center;gap:.6em;padding:.45em .55em;border-radius:7px;color:var(--lh-mute);white-space:nowrap}
.tech-lic-si svg{width:1.15em;height:1.15em;flex:none}
.tech-lic-si em{font-style:normal}
.tech-lic-si.on{background:var(--lh-panel);color:var(--lh-ink);font-weight:700;box-shadow:0 1px 2px rgba(40,30,10,.08)}
.tech-lic-si.on svg{color:var(--lh-acc)}
.tech-lic-brand{display:flex;align-items:center;gap:.55em;white-space:nowrap}
.tech-lic-brand b{font-size:1.12em}
.tech-lic-mk{width:1.75em;height:1.75em;flex:none;color:var(--lh-acc)}
.tech-lic-k[data-lk="0"] .tech-lic-brand b{font-weight:700;letter-spacing:-.01em}
.tech-lic-k[data-lk="1"] .tech-lic-brand b{font-weight:400;letter-spacing:.01em}
.tech-lic-k[data-lk="1"] .tech-lic-mk{--lic-mk:#fff}
.tech-lic-k[data-lk="2"] .tech-lic-brand b{font-weight:700;text-transform:uppercase;letter-spacing:.16em;font-size:1em}
.tech-lic-k[data-lk="3"] .tech-lic-brand b{font-weight:600;letter-spacing:-.02em}
.tech-lic-k[data-lk="3"] .tech-lic-mk{color:#16181c;--lic-mk:#fff;width:1.6em;height:1.6em}
.tech-lic-nav{display:flex;align-self:stretch;align-items:center;gap:1.15em;margin-left:.6em}
.tech-lic-nav em{font-style:normal;color:var(--lh-cmute)}
.tech-lic-nav em.on{color:var(--lh-cink)}
.tech-lic-k[data-lk="1"] .tech-lic-nav em.on{padding:.3em .8em;margin:0 -.4em;border-radius:99px;background:rgba(255,255,255,.18)}
.tech-lic-k[data-lk="2"] .tech-lic-nav{gap:0}
.tech-lic-k[data-lk="2"] .tech-lic-nav em{display:flex;align-items:center;align-self:stretch;padding:0 .8em;text-transform:uppercase;letter-spacing:.08em;font-size:.86em}
.tech-lic-k[data-lk="2"] .tech-lic-nav em.on{box-shadow:inset 0 -2px var(--lh-acc);background:rgba(255,255,255,.04)}
.tech-lic-av{margin-left:auto;width:2.1em;height:2.1em;flex:none;display:grid;place-items:center;border-radius:50%;background:var(--lh-soft);color:var(--lh-acc);font-style:normal;font-size:.8em;font-weight:600}
.tech-lic-k[data-lk="1"] .tech-lic-av,.tech-lic-k[data-lk="3"] .tech-lic-av{background:rgba(255,255,255,.16);color:#fff}
.tech-lic-srch{display:flex;align-items:center;gap:.55em;width:50%;height:2em;padding:0 .75em;border-radius:var(--lh-fr);background:var(--lh-bg);color:var(--lh-mute);box-shadow:inset 0 0 0 1px var(--lh-line)}
.tech-lic-srch svg{width:1em;height:1em;flex:none}
.tech-lic-meta{margin-left:auto;color:var(--lh-cmute);font-family:ui-monospace,"Cascadia Mono",Consolas,Menlo,"DejaVu Sans Mono",monospace;font-size:.86em}
.tech-lic-co{display:flex;align-items:center;gap:.35em;margin-left:.6em;padding:.28em .6em;border:1px solid rgba(255,255,255,.2);border-radius:3px;color:var(--lh-cink);font-size:.92em}
.tech-lic-co svg{width:.9em;height:.9em;opacity:.7}

/* the product's own page under the windows */
.tech-lic-page{position:absolute;left:0;right:0;top:3em;bottom:0;overflow:hidden}
.tech-lic-pg{padding:1.2em 1.4em}
.tech-lic-ph{display:flex;align-items:baseline;gap:.8em;margin-bottom:.8em;white-space:nowrap}
.tech-lic-ph b{font-size:1.6em;font-weight:600;letter-spacing:-.015em}
.tech-lic-k[data-lk="0"] .tech-lic-ph b{font-weight:700}
.tech-lic-k[data-lk="1"] .tech-lic-ph b{font-weight:400;letter-spacing:0}
.tech-lic-k[data-lk="2"] .tech-lic-ph b{font-size:1.35em;font-weight:700;text-transform:uppercase;letter-spacing:.07em}
.tech-lic-psub{color:var(--lh-mute)}
.tech-lic-k[data-lk="2"] .tech-lic-psub{margin-left:auto;font-family:ui-monospace,"Cascadia Mono",Consolas,Menlo,"DejaVu Sans Mono",monospace;font-size:.88em}
.tech-lic-pbtn{margin-left:auto;align-self:center;padding:.4em 1em;border-radius:var(--lh-pr);background:var(--lh-acc);color:var(--lh-aink);font-weight:600;font-size:.9em}
.tech-lic-k[data-lk="0"] .tech-lic-pbtn{font-weight:700}
.tech-lic-ptab{display:flex;gap:1.3em;margin-bottom:.6em;box-shadow:inset 0 -1px var(--lh-line);white-space:nowrap}
.tech-lic-ptab em{font-style:normal;padding:.45em 0;color:var(--lh-mute)}
.tech-lic-ptab em.on{color:var(--lh-ink);font-weight:600;box-shadow:inset 0 -2px var(--lh-acc)}
.tech-lic-pt{--cols:.8fr 1.4fr .9fr 1.1fr}
.tech-lic-pt p{display:grid;grid-template-columns:var(--cols);gap:.8em;align-items:center;margin:0;padding:.55em .6em;box-shadow:inset 0 -1px var(--lh-line);white-space:nowrap}
.tech-lic-pt p > span{min-width:0;overflow:hidden;text-overflow:ellipsis}
.tech-lic-pth{color:var(--lh-mute);font-size:.9em}
.tech-lic-k[data-lk="0"] .tech-lic-pt{background:var(--lh-panel);border-radius:10px;box-shadow:0 0 0 1px var(--lh-line)}
.tech-lic-k[data-lk="0"] .tech-lic-pt p:last-child{box-shadow:none}
/* status pills: neutral by default; ok and warn by meaning, not by brand color */
.tech-lic-pill{display:inline-grid;padding:.12em .65em;border-radius:var(--lh-pr);background-color:var(--lh-pill);color:var(--lh-pink);font-style:normal;font-size:.86em;font-weight:600;line-height:1.35;white-space:nowrap;transition:background-color var(--t-in) var(--ease-io),color var(--t-in) var(--ease-io),width var(--t-text) var(--ease-io)}
.tech-lic-pill.tech-lic-ok,.tech-lic-pill.tech-lic-done{background-color:var(--lh-ok-bg);color:var(--lh-ok-ink)}
.tech-lic-pill.tech-lic-warn{background-color:var(--lh-warn-bg);color:var(--lh-warn-ink)}
.tech-lic-k[data-lk="2"] .tech-lic-pill{text-transform:uppercase;letter-spacing:.06em;font-size:.8em}
/* a value that changes live: both values share one cell. The old one slips up and fades out (--t-out, the fade linear like every
   text crossfade on the page) while the new one rises in (--t-in) from .1 s later, so the two overlap by .32 s and the cell is never
   empty. tech.js sizes a live pill or button to the label it shows, so it never gives away the change ahead of time. */
.tech-lic-x{display:inline-grid}
.tech-lic-x > i{grid-area:1/1;justify-self:start;font-style:normal;white-space:nowrap;transition:opacity var(--t-in) var(--ease-io) .1s,transform var(--t-in) var(--ease-io) .1s}
.tech-lic-x > i + i{opacity:0;transform:translateY(.4em)}
.tech-lic-x.tech-lic-done > i:first-child,.tech-lic-x:not(.tech-lic-done) > i + i{transition:opacity var(--t-out) linear,transform var(--t-out) var(--ease-io)}
.tech-lic-x.tech-lic-done > i:first-child{opacity:0;transform:translateY(-.4em)}
.tech-lic-x.tech-lic-done > i + i{opacity:1;transform:none}
/* Wrenfield: a day schedule */
.tech-lic-cal{display:grid;grid-template-columns:3.4em repeat(3,minmax(0,1fr));grid-template-rows:2em repeat(10,2.05em);column-gap:.5em;background:repeating-linear-gradient(180deg,var(--lh-line) 0 1px,transparent 1px 4.1em) 0 2em/100% calc(100% - 2em) no-repeat}
.tech-lic-cal-h{grid-row:1;align-self:center;color:var(--lh-mute);font-weight:600;font-size:.9em}
.tech-lic-cal-t{grid-column:1;grid-row:var(--r);align-self:start;color:var(--lh-mute);font-size:.84em;transform:translateY(-.55em)}
.tech-lic-ev{grid-column:var(--c);grid-row:var(--r) / span var(--n);margin:.18em 0;padding:.35em .6em;overflow:hidden;white-space:nowrap;border-radius:var(--lh-fr);background-color:var(--lh-soft);color:var(--lh-acc);box-shadow:inset .22em 0 var(--lh-acc);font-weight:500;transition:background-color var(--t-in) var(--ease-io),color var(--t-in) var(--ease-io)}
.tech-lic-ev.tech-lic-x{display:grid;align-content:start}
.tech-lic-ev.tech-lic-done{background-color:var(--lh-acc);color:var(--lh-aink)}
/* Rackmere: a wave, the dock doors and the pick lines */
.tech-lic-prog{height:.35em;margin:-.2em 0 .9em;background:var(--lh-line)}
.tech-lic-prog i{display:block;width:62%;height:100%;background:var(--lh-acc)}
.tech-lic-docks{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:.4em;margin-bottom:.9em}
.tech-lic-docks span{display:flex;flex-direction:column;gap:.1em;padding:.4em .5em;border-radius:var(--lh-fr);background:var(--lh-panel);box-shadow:inset 0 0 0 1px var(--lh-line);color:var(--lh-mute);font-size:.8em;text-transform:uppercase;letter-spacing:.06em;white-space:nowrap;overflow:hidden}
.tech-lic-docks b{font-size:1.3em;color:var(--lh-ink);letter-spacing:.02em}
.tech-lic-docks span.on{box-shadow:inset 0 2px var(--lh-acc),inset 0 0 0 1px var(--lh-line)}
.tech-lic-k[data-lk="2"] .tech-lic-pt{--cols:1fr .9fr 1.4fr .8fr}
.tech-lic-k[data-lk="2"] .tech-lic-pt p{padding:.4em .3em}
.tech-lic-k[data-lk="2"] .tech-lic-pth{text-transform:uppercase;letter-spacing:.08em;font-size:.78em}
.tech-lic-k[data-lk="2"] .tech-lic-pt span:nth-child(-n+2){font-family:ui-monospace,"Cascadia Mono",Consolas,Menlo,"DejaVu Sans Mono",monospace;font-size:.9em;font-stretch:normal}
/* Larchwood: receivables */
.tech-lic-sub{margin:-1.2em -1.4em 1em;padding:0 1.4em;background:var(--lh-panel)}
.tech-lic-kpi{display:flex;gap:2.4em;margin-bottom:.8em}
.tech-lic-kpi span{display:flex;flex-direction:column;gap:.15em}
.tech-lic-kpi em{font-style:normal;font-size:.78em;color:var(--lh-mute);text-transform:uppercase;letter-spacing:.08em}
.tech-lic-kpi b{font-size:1.55em;font-weight:500;letter-spacing:-.02em}
.tech-lic-kpi b.tech-lic-due{color:var(--lh-warn-ink)}
.tech-lic-aging{display:flex;gap:2px;height:.45em;margin-bottom:1em}
.tech-lic-aging i{flex:var(--w);background:var(--lh-acc)}
.tech-lic-aging i:nth-child(2){opacity:.62}.tech-lic-aging i:nth-child(3){opacity:.38}.tech-lic-aging i:nth-child(4){opacity:.2}
.tech-lic-k[data-lk="3"] .tech-lic-pt{--cols:.9fr 1.5fr .9fr .8fr}
.tech-lic-k[data-lk="3"] .tech-lic-pt span:nth-child(3){text-align:right}
.tech-lic-k[data-lk="3"] .tech-lic-pth{text-transform:uppercase;letter-spacing:.07em;font-size:.76em}

/* the windows: the same three in every product. Each .tech-lic-w spans the desk and moves with transform only
   (translate in % of the desk, scale for size; the type is in cqw, so scaling keeps the look). Their look comes from the theme. */
.tech-lic-desk{position:absolute;inset:0;pointer-events:none}
.tech-lic-w{position:absolute;inset:0;container-type:inline-size;transform:translate(calc(var(--x) * 1%),calc(var(--y) * 1%)) scale(calc(var(--w) / var(--bw)));transform-origin:0 0;transition:transform var(--t-in) var(--ease-io) var(--d,0s);
  /* when the wipe reaches this window's top (the ease puts y% of the host at about .11 s + y x 2.8 ms): its skin tweens then,
     and its data starts to roll a beat before, so the new text is in place as the colors settle */
  --lic-reach:calc(.11s + var(--y) * .0028s);--lic-cue:calc(var(--lic-reach) - .04s)}
.tech-lic-desk.tech-lic-moving .tech-lic-w{will-change:transform}
.tech-lic-wa{z-index:3;--bw:44}.tech-lic-wl{z-index:2;--d:.05s;--bw:44}.tech-lic-wc{z-index:1;--d:.1s;--bw:34}
.tech-lic-wi{position:relative;width:calc(var(--bw) * 1%);overflow:hidden;font-size:calc(var(--bw) * 1cqw / 22);line-height:1.3;background-color:var(--lh-win);border-radius:var(--lh-r);box-shadow:0 0 0 1px var(--lh-wline),0 1.8em 3.4em var(--lh-sh),0 .2em .7em var(--lh-sh);outline:1px solid var(--lic-ring);outline-offset:3px;
  --lic-ring:rgba(25,165,255,.42);--lic-ring-lit:rgba(25,165,255,.95);
  transition:background-color var(--lic-wt) var(--ease-io) var(--lic-reach),box-shadow var(--lic-wt) var(--ease-io) var(--lic-reach),border-radius var(--t-in) var(--ease-io) var(--d,0s)}
.tech-lic-wc .tech-lic-wi{font-size:calc(var(--bw) * 1cqw / 17)}
/* ProBuilt's own mark, outside the host's styling: a thin blue outline offset from each window, there at rest (it matches the
   caption's blue "Floating Forms inside." and its key), brighter for a moment (--lic-ring-lit) as the windows glide into each
   product. tech.js plays that from whatever the outline shows, so a click mid-way never restarts it with a jump. */
.tech-lic-wbar{position:relative;display:flex;align-items:center;gap:.65em;height:2.45em;padding:0 .85em;background-color:var(--lh-bar);color:var(--lh-bink);font-weight:600;white-space:nowrap;box-shadow:inset 0 -1px var(--lh-wline);
  transition:background-color var(--lic-wt) var(--ease-io) var(--lic-reach),color var(--lic-wt) var(--ease-io) var(--lic-reach),box-shadow var(--lic-wt) var(--ease-io) var(--lic-reach)}
.tech-lic-wbar::before{content:"";position:absolute;left:0;top:0;bottom:0;width:calc(var(--lh-stripe) * 1px);background-color:var(--lh-acc);transition:width var(--lic-wt) var(--ease-io) var(--lic-reach),background-color var(--lic-wt) var(--ease-io) var(--lic-reach)}
.tech-lic-wbar .fw-burger{width:1em}
/* the window a change lands in: its title bar underlines for a moment (tech.js fades this in and out, in the accent the product
   had when the change landed) */
.tech-lic-wbar::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2.5px;background:var(--lic-ping,transparent);opacity:0;pointer-events:none}
.tech-lic-wt{flex:1}
.tech-lic-wt > .tech-lic-k{overflow:hidden;text-overflow:ellipsis}
.tech-lic-wt > .tech-lic-k[data-lk="2"]{text-transform:uppercase;letter-spacing:.07em;font-size:.9em}
.tech-lic-wt > .tech-lic-k[data-lk="1"]{font-weight:500}
.tech-lic-wt > .tech-lic-k[data-lk="0"]{font-weight:700}
.tech-lic-wb{padding:.75em .8em .8em}
.tech-lic-wl .tech-lic-wb{padding:0}
/* the window's own structure (fields, footer, list rows) is the same in every product: it re-skins, and the data inside crossfades */
.tech-lic-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:.55em;margin-bottom:.55em}
.tech-lic-wc .tech-lic-row{margin:0}
.tech-lic-f{display:block;min-width:0;height:2.8em;padding:.42em .6em 0;overflow:hidden;border-radius:var(--lh-wfr);background-color:var(--lh-fbg);box-shadow:inset 0 0 0 1px var(--lh-fline);
  transition:background-color var(--lic-wt) var(--ease-io) var(--lic-reach),box-shadow var(--lic-wt) var(--ease-io) var(--lic-reach),border-radius var(--t-in) var(--ease-io) var(--d,0s)}
.tech-lic-f .tech-lic-k{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tech-lic-f .tech-lic-k > b{display:block;font-weight:400;font-size:.78em;line-height:1.25;color:var(--lh-mute)}
.tech-lic-f [data-lk="2"] > b{text-transform:uppercase;letter-spacing:.08em}
.tech-lic-foot{margin:-.3em -.4em -.4em;padding:.4em}
.tech-lic-foot > .tech-lic-k{--lic-roll:calc(100% + .45em);display:flex;align-items:center;gap:.6em}
.tech-lic-foot .tech-lic-k > *{flex:none}
.tech-lic-btn{margin-left:auto;display:inline-grid;align-items:center;height:2.2em;padding:0 1em;border-radius:var(--lh-pr);background-color:var(--lh-acc);color:var(--lh-aink);font-weight:600;font-size:.88em;white-space:nowrap;
  transition:transform .22s var(--ease-io),filter .22s var(--ease-io),box-shadow .3s var(--ease-io),background-color var(--t-in) var(--ease-io),color var(--t-in) var(--ease-io),width var(--t-text) var(--ease-io)}
.tech-lic-k[data-lk="0"] .tech-lic-btn{font-weight:700}
.tech-lic-k[data-lk="2"] .tech-lic-btn{text-transform:uppercase;letter-spacing:.07em;font-size:.8em}
.tech-lic-btn.tech-lic-press{transform:scale(.93);filter:brightness(.9);box-shadow:0 0 0 .35em var(--lh-soft)}
/* once the action is done the button says so and steps back to an outline */
.tech-lic-btn.tech-lic-done{background-color:transparent;color:var(--lh-mute);box-shadow:inset 0 0 0 1px var(--lh-wline)}
.tech-lic-lt p{margin:0;padding:.5em .85em;box-shadow:inset 0 -1px var(--lh-wrow);white-space:nowrap;transition:box-shadow var(--lic-wt) var(--ease-io) var(--lic-reach),background-color var(--lic-wt) var(--ease-io) var(--lic-reach)}
/* the list's rows roll a beat apart, top to bottom, the way the wipe went */
.tech-lic-lt p:nth-child(2){--rd:.018s}.tech-lic-lt p:nth-child(3){--rd:.036s}.tech-lic-lt p:nth-child(4){--rd:.054s}.tech-lic-lt p:nth-child(5){--rd:.072s}
.tech-lic-wa .tech-lic-r2,.tech-lic-wa .tech-lic-foot{--rd:.04s}
.tech-lic-lt p:last-child{box-shadow:none}
.tech-lic-lt p .tech-lic-k{display:grid;grid-template-columns:.9fr 1.5fr 1.15fr;gap:.6em;align-items:center}
.tech-lic-lt p .tech-lic-k > span{min-width:0;overflow:hidden;text-overflow:ellipsis}
.tech-lic-lt p [data-lk="2"]{grid-template-columns:1fr 1.65fr 1.05fr}
.tech-lic-lt p [data-lk="3"]{grid-template-columns:1fr 1.6fr 1fr}
.tech-lic-lt .r{text-align:right}
.tech-lic-lt b{font-weight:600}
.tech-lic-lt p.tech-lic-th{background-color:var(--lh-head)}
.tech-lic-th .tech-lic-k{color:var(--lh-mute);font-weight:600;font-size:.86em}
.tech-lic-th [data-lk="2"],.tech-lic-th [data-lk="3"]{text-transform:uppercase;letter-spacing:.07em;font-size:.74em}
.tech-lic-lt [data-lk="2"] > span:first-child{font-family:ui-monospace,"Cascadia Mono",Consolas,Menlo,"DejaVu Sans Mono",monospace;font-size:.9em;font-stretch:normal}
.tech-lic-flash{animation:tech-lic-flash .8s var(--ease-io)}
@keyframes tech-lic-flash{0%{background-color:transparent}20%,40%{background-color:var(--lh-hl)}100%{background-color:transparent}}
.tech-lic-spark{position:absolute;left:0;top:0;z-index:5;width:11px;height:11px;margin:-5.5px 0 0 -5.5px;border-radius:50%;background:var(--lh-acc);box-shadow:0 0 0 3px var(--lh-soft),0 0 16px 3px var(--lh-acc);opacity:0}

/* window places, per product: x and y in % of the desk, w the window's width in % of the desk */
.tech-lic-host[data-h="0"] .tech-lic-wa{--x:23.5;--y:21.5;--w:43}
.tech-lic-host[data-h="0"] .tech-lic-wl{--x:55;--y:59;--w:42}
.tech-lic-host[data-h="0"] .tech-lic-wc{--x:24;--y:69;--w:35}
.tech-lic-host[data-h="1"] .tech-lic-wa{--x:33;--y:10;--w:44}
.tech-lic-host[data-h="1"] .tech-lic-wl{--x:51;--y:48.5;--w:45}
.tech-lic-host[data-h="1"] .tech-lic-wc{--x:6;--y:66;--w:36}
.tech-lic-host[data-h="2"] .tech-lic-wa{--x:2.5;--y:41;--w:45}
.tech-lic-host[data-h="2"] .tech-lic-wl{--x:50;--y:33;--w:46}
.tech-lic-host[data-h="2"] .tech-lic-wc{--x:54;--y:78;--w:34}
.tech-lic-host[data-h="3"] .tech-lic-wa{--x:47;--y:12;--w:44}
.tech-lic-host[data-h="3"] .tech-lic-wl{--x:2.5;--y:50;--w:46}
.tech-lic-host[data-h="3"] .tech-lic-wc{--x:58;--y:68;--w:35}

/* the caption: its three phrases dim as a switch starts and light back up one by one (the chrome lands, the page lands, the ring
   marks the windows). tech.js plays that from each phrase's current opacity, so a click mid-way carries on instead of snapping. */
.tech-lic-cap{margin-top:20px;text-align:center;font-family:var(--display);font-weight:300;font-size:clamp(17px,1.35vw,20px);line-height:1.3;letter-spacing:-.005em;color:rgba(255,255,255,.84)}
.tech-lic-cap > *{display:inline-block}
.tech-lic-cap b{font-weight:300;color:var(--blue);white-space:nowrap}
/* the key: a small window in the same thin blue outline the windows wear, so the caption names the part that stays */
.tech-lic-key{display:inline-block;width:.95em;height:.72em;margin:0 .45em 0 .1em;vertical-align:-.02em;border-radius:2px;background:linear-gradient(rgba(25,165,255,.32),rgba(25,165,255,.32)) 0 0/100% .2em no-repeat,rgba(255,255,255,.06);outline:1px solid rgba(25,165,255,.85);outline-offset:2px}

/* a narrow frame (the two-column layout on small laptops and tablets): two bigger windows, so no label drops under 7.5px */
@container lictab (max-width:500px){
  .tech-lic-host{font-size:calc(100cqw / 46)}
  .tech-lic-wc,.tech-lic-r2{display:none}
  .tech-lic-wa,.tech-lic-wl{--bw:56}
  .tech-lic-wi{font-size:calc(var(--bw) * 1cqw / 21)}
  .tech-lic-f .tech-lic-k > b{font-size:.8em}
  .tech-lic-th [data-lk="2"],.tech-lic-th [data-lk="3"]{font-size:.8em}
  .tech-lic-lt p:nth-child(n+5){display:none}
  .tech-lic-meta{display:none}
  .tech-lic-host[data-h="0"] .tech-lic-wa{--x:39;--y:11;--w:56}
  .tech-lic-host[data-h="0"] .tech-lic-wl{--x:24;--y:51.5;--w:56}
  .tech-lic-host[data-h="1"] .tech-lic-wa{--x:4;--y:11.5;--w:56}
  .tech-lic-host[data-h="1"] .tech-lic-wl{--x:40;--y:52;--w:56}
  .tech-lic-host[data-h="2"] .tech-lic-wa{--x:4;--y:59;--w:56}
  .tech-lic-host[data-h="2"] .tech-lic-wl{--x:42;--y:11.5;--w:56}
  .tech-lic-host[data-h="3"] .tech-lic-wa{--x:40;--y:11;--w:56}
  .tech-lic-host[data-h="3"] .tech-lic-wl{--x:4;--y:51.5;--w:56}
}
/* phones: a taller frame, an icon rail instead of the sidebar, two bigger windows */
@media (max-width:640px){
  .tech-lic .tech-lic-pick{margin-inline:-20px;width:calc(100% + 40px);margin-bottom:14px}
  .tech-lic .tech-lic-try{justify-content:center;overflow:visible}
  .tech-lic-stage{aspect-ratio:3/4}
  .tech-lic-host{--lic-side:14%;font-size:calc(100cqw / 31)}
  .tech-lic-side{align-items:center;padding:1em .3em}
  .tech-lic-side .tech-lic-brand{margin:0 0 .8em}
  .tech-lic-side .tech-lic-brand b,.tech-lic-si em{display:none}
  .tech-lic-si{padding:.5em}
  .tech-lic-top .tech-lic-nav em:not(.on),.tech-lic-meta{display:none}
  .tech-lic-srch{width:auto;flex:1}
  .tech-lic-pt{--cols:.8fr 1.3fr 1.1fr}
  .tech-lic-k[data-lk="2"] .tech-lic-pt{--cols:1fr 1.2fr .9fr}
  .tech-lic-k[data-lk="3"] .tech-lic-pt{--cols:.9fr 1.4fr .8fr}
  .tech-lic-pt p > span:nth-child(3){display:none}
  .tech-lic-docks{grid-template-columns:repeat(4,minmax(0,1fr))}
  .tech-lic-docks span:nth-child(n+5){display:none}
  .tech-lic-cal{grid-template-columns:3em repeat(2,minmax(0,1fr))}
  .tech-lic-cal > :nth-child(4),.tech-lic-ev[style*="--c:4"]{display:none}
  .tech-lic-r2{display:grid}
  .tech-lic-wc,.tech-lic-lt p:nth-child(n+5){display:none}
  .tech-lic-wa{--bw:80}.tech-lic-wl{--bw:81}
  .tech-lic-wi{font-size:calc(var(--bw) * 1cqw / 22)}
  .tech-lic-lt p{padding-inline:.7em}
  .tech-lic-lt p .tech-lic-k{grid-template-columns:1.1fr 1.45fr 1fr}
  .tech-lic-lt p [data-lk="3"]{grid-template-columns:1fr 1.62fr .93fr}
  .tech-lic-host[data-h="0"] .tech-lic-wa{--x:18;--y:16;--w:79}
  .tech-lic-host[data-h="0"] .tech-lic-wl{--x:16;--y:59;--w:81}
  .tech-lic-host[data-h="1"] .tech-lic-wa{--x:4;--y:17;--w:80}
  .tech-lic-host[data-h="1"] .tech-lic-wl{--x:15;--y:59;--w:81}
  .tech-lic-host[data-h="2"] .tech-lic-wa{--x:4;--y:23;--w:80}
  .tech-lic-host[data-h="2"] .tech-lic-wl{--x:14;--y:62;--w:82}
  .tech-lic-host[data-h="3"] .tech-lic-wa{--x:15;--y:20;--w:81}
  .tech-lic-host[data-h="3"] .tech-lic-wl{--x:4;--y:60;--w:82}
}
/* reduced motion: the first product, finished; a click switches at once */
@media (prefers-reduced-motion:reduce){
  .tech-lic-art *,.tech-lic-art *::before,.tech-lic-art *::after{transition:none!important;animation:none!important}
}

/* ---------- responsive ---------- */
@media (max-width:1100px){
  .tech-feats{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:900px){
  .tech-head{grid-template-columns:1fr;align-items:start}
  .tech-vdb-fig{grid-template-columns:1fr;gap:16px}
  .tech-lic{grid-template-columns:1fr}
  .tech-cards{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:640px){
  .tech-pick{margin-inline:-24px;width:calc(100% + 48px)}
  .tech-ask span{display:block}
  .tech-try{max-width:100%;overflow-x:auto;scrollbar-width:none;justify-content:flex-start;border-radius:999px}
  .tech-try::-webkit-scrollbar{display:none}
  .tech-chip{height:38px;padding:0 16px;font-size:14px}
  .tech-cl{display:none}
  .tech-cs{display:inline}
  .tech-hand{margin-left:8px}
  .tech-feats{grid-template-columns:1fr;gap:18px}
  .tech-vdb-steps li{font-size:11px}
  .tech-vdb-sql{font-size:11.5px}
  .tech-svg-w{display:none}
  .tech-svg-n{display:block}
  .tech-row-h{flex-direction:column;align-items:flex-start;gap:12px}
  .tech-vs{height:44px}
  .tech-cap{font-size:14px}
  .tech-cards{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;margin-inline:-24px;padding:4px 24px 14px;scroll-padding-inline:24px;scrollbar-width:none}
  .tech-cards::-webkit-scrollbar{display:none}
  .tech-card{flex:0 0 84%;scroll-snap-align:start;min-height:560px;padding:24px 22px 20px}
  .tech-card h3{left:22px;top:20px;right:22px}
  .tech-lic{padding:26px 22px;border-radius:20px}
  .tech-lic-act .btn{width:100%;justify-content:center}
  .tech-mail{width:100%;text-align:center}
}

@media (prefers-reduced-motion:reduce){
  .tech-vdb-c,.tech-vdb-c *,.tech-vdb-in,.tech-vdb-tag,.tech-vdb-steps li,.tech-vdb-steps i,.tech-vdb-steps i *,.tech-vdb-steps i::before,.tech-vdb-steps i::after,.tech-vdb-live,.tech-xn,.tech-xo{transition:none!important}
  .tech-vdb-caret,.tech-vdb-steps i,.tech-vdb-steps i::before,.tech-vdb-sp{animation:none!important}
  .tech-fd *,.tech-fd-card,.tech-card-ph,.tech-sw-in,.tech-draw,.tech-x::after{transition:none!important}
  .tech-draw{stroke-dashoffset:0}
  .tech-sw-in,.tech-db,.tech-port,.tech-pg,.tech-rl,.tech-op-ln,.tech-op-ah,.tech-row-old .tech-lb-s,.tech-live .tech-lb{opacity:1}
  .tech-sw-in{transform:none}
  .tech-x::after{transform:scaleX(1)}
  .tech-row-old .tech-pg > *,.tech-row-old .tech-rl-i,.tech-lw,.tech-fd-caret,.tech-fd-dots i{animation:none!important}
  /* the strip shows the first page open, the rest gone */
  .tech-pg[style*="--i:0"] .tech-pg-box{fill:rgba(11,43,102,.7);stroke:#19A5FF}
  .tech-pg[style*="--i:0"] text{fill:#fff}
}