/* Home refinements, 2026-10-02: six reviews, an inline system illustration with an air-whirl, and
   phone mockups drawn in code so they stay sharp on every screen. Loaded after priority-home.css. */

/* Reviews are rendered by home-refinements.js from its own list; the figures in index.html are the no-script fallback. */

/* ── System illustration ── */
.compute-art{position:relative;display:flex;align-items:center;justify-content:center}
.compute-art img{display:none}
.sys{width:100%;max-width:720px;max-height:560px;height:auto;display:block;overflow:visible}
.sys .whirl{transform-origin:360px 330px;animation:sys-whirl 16s linear infinite}
.sys .whirl-2{animation-duration:24s;animation-direction:reverse}
.sys .whirl-3{animation-duration:34s}
.sys .float{animation:sys-float 7s ease-in-out infinite}
.sys .float-2{animation-delay:-2.3s}
.sys .float-3{animation-delay:-4.6s}
.sys .mote{animation:sys-mote 9s ease-in-out infinite}
.sys .mote-2{animation-delay:-3s}
.sys .mote-3{animation-delay:-6s}
.sys .led{animation:sys-led 2.6s ease-in-out infinite;animation-delay:var(--d,0s)}
.sys .cell{animation:sys-cell 3s ease-in-out infinite;animation-delay:var(--d,0s)}
.sys .trace-pulse{stroke-dasharray:16 300;stroke-dashoffset:316;animation:sys-dash var(--dur,3.5s) linear infinite;animation-delay:var(--d,0s)}
.sys .ping{transform-origin:360px 150px;animation:sys-ping 3.2s ease-out infinite}
.sys .orb{transform-box:fill-box;transform-origin:center;animation:sys-orb 3s ease-in-out infinite}
.sys .core{transform-box:fill-box;transform-origin:center;animation:sys-core 4.5s ease-in-out infinite}
.sys .seam{animation:sys-seam 4s ease-in-out infinite}
@keyframes sys-whirl{to{transform:rotate(360deg)}}
@keyframes sys-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
@keyframes sys-mote{0%,100%{opacity:.15;transform:translate(0,0)}50%{opacity:.7;transform:translate(6px,-14px)}}
@keyframes sys-led{0%,100%{opacity:.25}50%{opacity:1}}
@keyframes sys-cell{0%,70%,100%{opacity:.3}20%{opacity:.95}}
@keyframes sys-dash{to{stroke-dashoffset:0}}
@keyframes sys-ping{0%{transform:scale(.3);opacity:.9}100%{transform:scale(1.9);opacity:0}}
@keyframes sys-orb{0%,100%{transform:scale(1);opacity:.75}50%{transform:scale(1.25);opacity:1}}
@keyframes sys-core{0%,100%{opacity:.6}50%{opacity:1}}
@keyframes sys-seam{0%,100%{opacity:.35}50%{opacity:.95}}
@media(prefers-reduced-motion:reduce){.sys *{animation:none!important}.sys .ping{display:none}}
@media(max-width:900px){.compute-art{height:auto}}
@media(max-width:640px){.sys{max-width:440px}}

/* ── Phone mockups (2026-10-09 rebuild) ──
   Every size inside a phone is a container-query unit (cqw = 1% of the phone's width), so the two
   screens render like scaled screenshots: identical proportions at 262px on desktop and 170px on a
   phone, nothing clipped. Motion: the pair rises into view, cards settle in one after another, the
   progress and capacity bars fill, the delivery steps light up in order, and the active step keeps a
   soft pulse. No continuous float: it read as jitter on phones (Taylor, 2026-10-09). All of it starts when .phone-pair gets .live (home-refinements.js) and respects
   prefers-reduced-motion. */
.portal .phones{display:none}
.phone-pair{display:flex;gap:4%;justify-content:center;align-items:flex-end;justify-self:center;width:92%;max-width:560px;--ease:cubic-bezier(.2,.7,.2,1)}
.phone{flex:1 1 0;max-width:262px;aspect-ratio:9/19.2;container-type:inline-size;border-radius:38px;background:#12201e;padding:9px;box-shadow:0 30px 60px -30px rgba(23,59,55,.5),0 1px 0 rgba(255,255,255,.35) inset,0 0 0 1px rgba(255,255,255,.08) inset;position:relative;opacity:0;transform:translateY(34px);transition:opacity .9s var(--ease),transform 1s var(--ease)}
.phone.back{transition-delay:.12s;margin-bottom:-26px;scale:.96}
.phone-pair.live .phone{opacity:1;transform:none}
.phone::before{content:"";position:absolute;left:50%;top:6.4cqw;width:30cqw;height:8cqw;transform:translateX(-50%);background:#12201e;border-radius:5cqw;z-index:3}
.screen{height:100%;border-radius:11.5cqw;background:#fbf8f1;overflow:hidden;display:flex;flex-direction:column;font-family:Inter,Manrope,system-ui,sans-serif;color:#173b37;position:relative}
.screen .status{display:flex;justify-content:space-between;align-items:center;padding:5cqw 8cqw 0;font-size:4.4cqw;font-weight:700;line-height:1}
.screen .status span:last-child{display:flex;gap:1.6cqw;font-size:0}
.screen .status span:last-child::before,.screen .status span:last-child::after{content:"";display:block;width:3.2cqw;height:3.2cqw;border-radius:50%;background:#173b37}
.screen .status span:last-child::after{width:6.4cqw;border-radius:1.6cqw}
.screen .head{padding:10cqw 6cqw 3.4cqw}
.screen .head small{display:block;font-size:4cqw;letter-spacing:.16em;text-transform:uppercase;color:#b69450;font-weight:800}
.screen .head b{display:block;font-size:8cqw;letter-spacing:-.02em;margin-top:1cqw;line-height:1.1}
.screen .body{padding:1cqw 4.5cqw 3cqw;display:grid;gap:3.4cqw;flex:1;align-content:start;min-height:0}
.card{background:#fff;border:1px solid #dfe8e4;border-radius:5cqw;padding:4.2cqw 4.4cqw;opacity:0;transform:translateY(5cqw);transition:opacity .7s var(--ease),transform .8s var(--ease);transition-delay:calc(.15s + var(--i,0)*.09s)}
.phone.back .card{transition-delay:calc(.28s + var(--i,0)*.09s)}
.phone-pair.live .card{opacity:1;transform:none}
.card .t{display:flex;justify-content:space-between;align-items:center;gap:2cqw;font-size:5cqw;font-weight:700;line-height:1.2}
.card .t em{flex:none;font-style:normal;font-size:3.6cqw;font-weight:800;padding:1.2cqw 2.8cqw;border-radius:4.5cqw;background:#e8f3ef;color:#147f78;white-space:nowrap}
.card .t em.gold{background:#f6efdd;color:#8a6d1f}
.card .s{font-size:4cqw;color:#5f7370;margin-top:1.6cqw;line-height:1.35}
.card .bar{height:2.4cqw;border-radius:1.2cqw;background:#e4ece9;margin-top:3.4cqw;overflow:hidden}
.card .bar i{display:block;height:100%;width:62%;border-radius:inherit;background:linear-gradient(90deg,#147f78,#a9d6cf);transform:scaleX(0);transform-origin:left;transition:transform 1.4s var(--ease) 1s}
.phone-pair.live .card .bar i{transform:scaleX(1)}
.screen .steps{display:flex;justify-content:space-between;margin-top:3.4cqw;font-size:3.4cqw;color:#8b95a0;text-align:center}
.screen .steps span{flex:1}
.screen .steps b{display:block;width:3.4cqw;height:3.4cqw;border-radius:50%;background:#dfe8e4;margin:0 auto 1.2cqw;position:relative;transition:background .5s var(--ease)}
.screen .steps b.on{transition-delay:calc(1s + var(--i,0)*.45s)}
.phone-pair.live .screen .steps b.on{background:#147f78}
.phone-pair.live .screen .steps b.now::after{content:"";position:absolute;inset:-1cqw;border-radius:50%;border:1px solid #147f78;opacity:0;animation:step-pulse 2.6s ease-out calc(1.9s + var(--i,0)*.45s) infinite}
.cal{display:grid;grid-template-columns:repeat(6,1fr);gap:1.4cqw;margin-top:1.6cqw}
.cal span{text-align:center;font-size:3.6cqw;color:#5f7370;padding:2cqw 0;border-radius:2.6cqw;line-height:1.3}
.cal span b{display:block;font-size:4.8cqw;color:#173b37;margin-top:.6cqw}
.cal span.on{color:#147f78;background:#e8f3ef;box-shadow:0 0 0 0 rgba(20,127,120,0);transition:box-shadow .6s var(--ease) 1.1s}
.phone-pair.live .cal span.on{box-shadow:0 0 0 .8cqw rgba(20,127,120,.14)}
.tabs{display:flex;justify-content:space-around;padding:3cqw 2cqw 4.5cqw;border-top:1px solid #e4ece9;font-size:3.4cqw;font-weight:700;color:#8b95a0;margin-top:auto;background:#fbf8f1}
.tabs span.on{color:#147f78}
.tabs span::before{content:"";display:block;width:5.5cqw;height:5.5cqw;border-radius:1.4cqw;background:currentColor;opacity:.25;margin:0 auto 1.2cqw}
@keyframes step-pulse{0%{opacity:.9;transform:scale(1)}100%{opacity:0;transform:scale(2.6)}}
@media(max-width:640px){.phone-pair{width:100%;max-width:420px;gap:3.5%}.phone{border-radius:30px;padding:7px}.phone.back{margin-bottom:-18px}}
@media(prefers-reduced-motion:reduce){.phone,.card,.card .bar i,.steps b,.cal span.on{transition:none!important;animation:none!important;opacity:1;transform:none}.phone-pair .screen .steps b.on{background:#147f78}.phone-pair .screen .steps b::after{display:none}}

/* Salesforce-first product positioning, October 6. */
.hero h1{font-size:clamp(42px,5.6vw,76px);line-height:1.08}
.capability-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px;margin-top:36px}
.capability-grid{--e:cubic-bezier(.2,.7,.2,1)}
.capability-grid article{position:relative;overflow:hidden;padding:26px;border:1px solid #dfe8e4;border-radius:20px;background:#fff;opacity:0;translate:0 22px;transition:opacity .7s var(--e) calc(var(--i,0)*.1s),translate .8s var(--e) calc(var(--i,0)*.1s),transform .45s var(--e),box-shadow .45s var(--e),border-color .45s var(--e)}
.capability-grid.in-view article{opacity:1;translate:0 0}
.capability-grid article::before{content:"";position:absolute;inset:0 0 auto 0;height:3px;background:linear-gradient(90deg,#147f78,#a9d6cf 70%,#d3ba77);transform:scaleX(0);transform-origin:left;transition:transform .9s var(--e) calc(.35s + var(--i,0)*.1s)}
.capability-grid.in-view article::before{transform:scaleX(1)}
.capability-grid article::after{content:attr(data-n);position:absolute;right:14px;bottom:-16px;font-family:Manrope,sans-serif;font-size:104px;font-weight:700;letter-spacing:-.06em;line-height:1;color:#147f78;opacity:.06;pointer-events:none}
.capability-grid article:hover{transform:translateY(-5px);border-color:#9fc9bd;box-shadow:0 24px 50px -26px rgba(20,127,120,.4)}
.cap-icon{display:grid;place-items:center;width:46px;height:46px;border-radius:14px;background:linear-gradient(135deg,#e8f3ef,#f6efdd);color:#147f78;margin-bottom:18px}
.cap-icon svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;transition:transform .5s var(--e)}
.capability-grid article:hover .cap-icon svg{transform:scale(1.12) rotate(-5deg)}
@media(prefers-reduced-motion:reduce){.capability-grid article{opacity:1;translate:none;transition:none}.capability-grid article::before{transform:none;transition:none}}
/* Priority workflow art: the PNG has an opaque cream ground, so the section takes the same cream and the
   art's edges dissolve into it instead of sitting on a visible rectangle (Taylor, 2026-10-09). */
.priority{background:linear-gradient(160deg,#f9f8f1,#fdfaf5 50%,#f7f7ef)}
.workflow-stage .workflow-art{-webkit-mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent),linear-gradient(transparent,#000 10%,#000 86%,transparent);-webkit-mask-composite:source-in;mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent),linear-gradient(transparent,#000 10%,#000 86%,transparent);mask-composite:intersect}
.capability-grid h3{font-size:21px;margin:14px 0}
.capability-grid p{font-size:15px;line-height:1.65}
.signup-path{margin-top:48px}
.signup-path ol{list-style:none;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}
.signup-path li{padding:22px;border-top:2px solid #147f78}
.signup-path strong,.signup-path span{display:block}
.signup-path li span{margin-top:10px;font-size:15px;line-height:1.6;color:#5f7370}
.model.featured .model-price{font-size:clamp(25px,3vw,38px)}
@media(max-width:1100px){.nav nav{gap:14px}.nav nav a{font-size:13px}.capability-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:640px){.capability-grid,.signup-path ol{grid-template-columns:1fr}.capability-grid article{padding:22px}.signup-path li{padding:18px 0}.hero h1{font-size:clamp(36px,9vw,48px)}}

/* ── Privacy strip (Taylor, 2026-10-09): a skinny dark band under Ownership with a secure pipeline: two LED
   endpoints, a lock in the middle, light packets travelling along the tracks. CSS only. ── */
.trust{background:#12201e;color:#d7e6e1;padding:30px 0;border-top:1px solid #1f3330}
.trust .wrap{display:grid;gap:22px}
.pipe{display:flex;align-items:center}
.pipe .node{display:flex;align-items:center;gap:9px;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:#9fc9bd;white-space:nowrap;font-weight:600}
.pipe .node i{width:9px;height:9px;border-radius:50%;background:#2cc5b4;box-shadow:0 0 0 4px rgba(44,197,180,.14),0 0 14px #2cc5b4;animation:led 2.4s ease-in-out var(--d,0s) infinite}
.pipe .lock svg{width:22px;height:22px;fill:none;stroke:#e9d7a6;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 0 8px rgba(233,215,166,.45))}
.pipe .track{flex:1;height:2px;margin:0 16px;position:relative;overflow:hidden;background:linear-gradient(90deg,rgba(44,197,180,.12),rgba(44,197,180,.4),rgba(44,197,180,.12))}
.pipe .track::before,.pipe .track::after{content:"";position:absolute;top:-1px;left:-56px;width:56px;height:4px;border-radius:2px;background:linear-gradient(90deg,transparent,#7fe8da);animation:packet 3.4s linear infinite}
.pipe .track::after{animation-delay:1.7s}
.pipe .track+.node+.track::before{animation-delay:.6s}
.pipe .track+.node+.track::after{animation-delay:2.3s}
.trust-points{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(3,1fr);gap:28px;font-size:13px;line-height:1.55;color:#b9cdc6}
.trust-points strong{display:block;color:#fff;font-weight:600;margin-bottom:3px}
.trust small{color:#8fa7a1;font-size:11px}
.trust small a{color:#9fc9bd}
@keyframes led{0%,100%{opacity:.55}50%{opacity:1}}
@keyframes packet{to{left:100%}}
@media(max-width:640px){.trust{padding:24px 0}.pipe .node{font-size:9px;letter-spacing:.1em;gap:6px}.pipe .track{margin:0 10px}.trust-points{grid-template-columns:1fr;gap:14px}}
@media(prefers-reduced-motion:reduce){.pipe .node i,.pipe .track::before,.pipe .track::after{animation:none}.pipe .track::before,.pipe .track::after{display:none}}
.trust-points{grid-template-columns:repeat(4,1fr);gap:24px}
@media(max-width:980px){.trust-points{grid-template-columns:1fr 1fr}}
@media(max-width:640px){.trust-points{grid-template-columns:1fr}}
/* Phone: the four proof points sit inside the hero art, in the open space left of the loop (Taylor, 2026-10-17). */
@media(max-width:640px){.proof-strip{position:relative;z-index:2;margin-top:-285px;height:285px;display:flex;flex-direction:column;justify-content:center;gap:13px;padding:0 0 48px;border-bottom:0;font-size:12px;pointer-events:none}.proof-strip span{max-width:min(44%,calc(100vw - 250px))}}