/* ===== Life: motion and interaction (homepage) ===== */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ---------- Hero: website -> clean data ---------- */
.scrape-demo{position:relative;margin:0;padding:18px;border:1px solid var(--line);border-radius:17px;background:#edf6f7 radial-gradient(#cbdfe3 1px,transparent 1px) 0 0/16px 16px;box-shadow:0 22px 65px #2037461c}
.sd-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;color:var(--teal);font:600 .68rem/1.4 Inter,system-ui,sans-serif;letter-spacing:.12em;text-transform:uppercase}
.sd-live{display:inline-flex;align-items:center;gap:7px}
.sd-live i{width:8px;height:8px;border-radius:50%;background:var(--teal);box-shadow:0 0 0 0 #0f727b66}
.js-anim .sd-live i{animation:sd-pulse 1.8s ease-out infinite}
@keyframes sd-pulse{70%{box-shadow:0 0 0 7px #0f727b00}100%{box-shadow:0 0 0 0 #0f727b00}}
.sd-page{background:white;border:1px solid var(--line);border-radius:11px;overflow:hidden}
.sd-bar{display:flex;align-items:center;gap:5px;padding:7px 10px;background:var(--cloud);border-bottom:1px solid var(--line)}
.sd-bar i{width:7px;height:7px;border-radius:50%;background:#d4dfe4}
.sd-url{margin-left:8px;padding:2px 10px;border-radius:99px;background:white;border:1px solid var(--line);color:var(--gray);font-size:.7rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sd-product{display:grid;grid-template-columns:76px 1fr;gap:14px;padding:12px 14px;align-items:center}
.sd-img{position:relative;height:76px;border-radius:9px;background:linear-gradient(135deg,#e3eef1,#cbdfe3);display:grid;place-items:center}
.sd-img span{width:48px;height:18px;border-radius:4px;background:#203746;box-shadow:inset 0 -5px 0 #2f4d5f;opacity:.85}
.sd-info p{margin:0;color:var(--slate)}
.sd-name{font:700 .92rem/1.3 Manrope,system-ui,sans-serif}
.sd-priceline{display:flex;gap:8px;align-items:baseline;margin-top:4px!important}
.sd-price{font-weight:700;font-size:1.05rem}
.sd-was{color:var(--gray);font-size:.8rem}
.sd-stock{margin-top:3px!important;font-size:.78rem;color:#1d7a43!important;font-weight:600}
.sd-btn{display:inline-block;margin-top:7px;padding:3px 10px;border-radius:6px;background:var(--slate);color:white;font-size:.68rem;font-weight:600}
.sd-info [data-f]{display:inline-block;border-radius:5px;transition:box-shadow .25s,background .25s}
.sd-info [data-f].hit{background:#dff1f1;box-shadow:0 0 0 2px var(--teal)}
.sd-flow{display:flex;align-items:center;gap:10px;margin:9px 4px;color:var(--teal);font-size:.7rem;font-weight:600;letter-spacing:.06em}
.sd-flow span{flex:1;height:2px;background:repeating-linear-gradient(90deg,var(--teal) 0 6px,transparent 6px 11px);opacity:.55}
.js-anim .sd-flow span{animation:sd-dash 1s linear infinite}
@keyframes sd-dash{to{background-position:11px 0}}
.sd-flow em{font-style:normal;white-space:nowrap}
.sd-table{background:white;border:1px solid var(--line);border-radius:11px;overflow:hidden}
.sd-table table{width:100%;border-collapse:collapse;table-layout:fixed;font-size:.76rem}
.sd-table th{padding:7px 9px;text-align:left;background:var(--slate);color:#deedf0;font:600 .68rem/1.3 ui-monospace,SFMono-Regular,Menlo,monospace}
.sd-table th:nth-child(1){width:19%}.sd-table th:nth-child(3){width:17%}.sd-table th:nth-child(4){width:18%}.sd-table th:nth-child(5){width:11%}
.sd-table td{height:31px;padding:0 9px;border-top:1px solid var(--line);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-variant-numeric:tabular-nums;color:var(--slate)}
.sd-table tr.active td{background:#f2f9f9}
.sd-ok{display:inline-grid;place-items:center;width:18px;height:18px;border-radius:50%;background:var(--teal);color:white;font-size:.66rem;font-weight:700}
.js-anim .sd-ok.pop{animation:sd-pop .45s cubic-bezier(.3,1.6,.5,1)}
@keyframes sd-pop{from{transform:scale(0)}to{transform:scale(1)}}
.scrape-demo figcaption{margin-top:10px;color:var(--teal);font:600 .7rem/1.5 Inter,system-ui,sans-serif}
.sd-chip{position:absolute;left:0;top:0;z-index:3;padding:3px 8px;border-radius:6px;background:var(--teal);color:white;font:600 .72rem/1.3 Inter,system-ui,sans-serif;white-space:nowrap;pointer-events:none;box-shadow:0 6px 16px #0f727b40}
.sd-fill{animation:sd-fill .35s ease-out}
@keyframes sd-fill{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}

/* ---------- Before / after ---------- */
.ba{position:relative;height:350px;border:1px solid var(--line);border-radius:14px;overflow:hidden;user-select:none;box-shadow:0 18px 48px #2037460f}
.ba-pane{position:absolute;inset:0;padding:26px 32px}
.ba-before{background:#fffaf2}
.ba-after{background:var(--slate);clip-path:inset(0 0 0 var(--pos));color:#deedf0}
.ba-label{margin:0 0 14px;font-size:.7rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:#9a5b12}
.ba-after .ba-label{text-align:right;color:#9fd3d7}
.ba-web{max-width:520px;font-family:Georgia,'Times New Roman',serif;color:#3a2a1a}
.ba-web p{margin:6px 0 0;color:#3a2a1a}
.ba-deal{display:inline-block;padding:3px 9px;background:#d1342f;color:white;font:700 .72rem/1.3 Inter,system-ui,sans-serif;letter-spacing:.06em;transform:rotate(-2deg)}
.ba-title{font-size:1.15rem;font-weight:700;line-height:1.3}
.ba-prices s{color:#726354}.ba-prices strong{color:#d1342f;font-size:1.25rem}.ba-prices span{margin-left:6px;padding:1px 6px;background:#ffe36e;font-size:.8rem;font-family:Inter,system-ui,sans-serif;font-weight:700}
.ba-stars{color:#e0a100}.ba-stars u{color:#2a62b8;font-size:.86rem}
.ba-stock{color:#b4321f!important;font-weight:700;font-style:italic}
.ba-ship{font-size:.86rem;color:#6b5b4b!important}
.ba-web code{display:block;margin-top:14px;padding:8px 10px;border-radius:6px;background:#f3e9da;color:#7a5a3a;font:.72rem/1.5 ui-monospace,Menlo,monospace;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ba-record{width:min(470px,100%);margin:0 0 0 auto;font:.82rem/1.4 ui-monospace,SFMono-Regular,Menlo,monospace}
.ba-record div{display:grid;grid-template-columns:150px 1fr;gap:10px;padding:5px 0;border-bottom:1px solid #35505e}
.ba-record dt{color:#9fd3d7}
.ba-record dd{margin:0;color:white;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ba-pass{color:#7fe0b0!important}
.ba-handle{position:absolute;top:0;bottom:0;left:var(--pos);width:2px;margin-left:-1px;background:white;box-shadow:0 0 0 1px #20374633;pointer-events:none}
.ba-handle span{position:absolute;top:50%;left:50%;display:grid;place-items:center;width:44px;height:44px;margin:-22px 0 0 -22px;border-radius:50%;background:white;color:var(--slate);font-weight:700;letter-spacing:2px;box-shadow:0 6px 20px #20374640}
.ba-range{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:ew-resize}
.ba:has(.ba-range:focus-visible){outline:3px solid var(--teal);outline-offset:4px}

/* ---------- Sample table ---------- */
.st-filters{display:flex;flex-wrap:wrap;gap:8px;padding:10px 14px;border-bottom:1px solid var(--line);background:var(--cloud)}
.st-filters button{min-height:32px;padding:4px 12px;border:1px solid var(--line);border-radius:99px;background:white;color:var(--slate);font:600 .78rem/1 Inter,system-ui,sans-serif;cursor:pointer}
.st-filters button:hover{border-color:var(--teal);color:var(--teal)}
.st-filters button[aria-pressed="true"]{background:var(--teal);border-color:var(--teal);color:white}
.st-scroll{max-height:262px;overflow:auto}
.st-scroll thead th{position:sticky;top:0;z-index:1}
.sample-table tr.hide{display:none}
.js-anim .sample-table.pre tbody tr{opacity:0;transform:translateY(6px)}
.sample-table tbody tr{transition:opacity .35s ease,transform .35s ease}
.js-anim .sample-table.pre .flag{transform:scale(.6);opacity:0}
.flag{transition:transform .35s cubic-bezier(.3,1.6,.5,1) .5s,opacity .3s .5s}

/* ---------- Services ladder ---------- */
.ladder{display:none}
@media(min-width:900px){
.ladder{position:relative;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin:0 0 10px;padding:0;list-style:none}
.ladder::before{content:"";position:absolute;left:12.5%;right:12.5%;top:50%;height:2px;margin-top:-1px;background:var(--teal);transform-origin:left;transition:transform 1.1s cubic-bezier(.65,0,.35,1)}
.ladder li{display:grid;place-items:center}
.ladder span{position:relative;display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:white;border:2px solid var(--teal);color:var(--teal);font:700 .78rem Inter,system-ui,sans-serif;transition:transform .4s cubic-bezier(.3,1.6,.5,1),background .3s,color .3s}
.js-anim .ladder.pre::before{transform:scaleX(0)}
.js-anim .ladder.pre span{transform:scale(0)}
.ladder.in span{background:var(--teal);color:white}
.ladder li:nth-child(2) span{transition-delay:.3s}.ladder li:nth-child(3) span{transition-delay:.6s}.ladder li:nth-child(4) span{transition-delay:.9s}
}
.services-core article{transition:opacity .5s ease,transform .5s ease,box-shadow .25s,border-color .25s}
.js-anim .services-core.pre article{opacity:0;transform:translateY(14px)}


/* ---------- Use cases ---------- */
.solution-grid .tok{display:inline-block;transition:opacity .4s ease,transform .4s ease}
.js-anim .solution-grid article.pre .tok{opacity:0;transform:translateY(5px)}
.uc-price s{color:var(--gray);text-decoration-thickness:2px;text-decoration-color:transparent;transition:text-decoration-color .3s .6s}
.uc-price b{display:inline-block;color:var(--teal);transition:transform .45s cubic-bezier(.3,1.6,.5,1) 1s}
.solution-grid article.in .uc-price s{text-decoration-color:#c0392b}
.js-anim .solution-grid article.pre .uc-price b{transform:scale(0)}
.solution-grid b[data-count]{font-variant-numeric:tabular-nums}

/* ---------- Standards checks ---------- */
.std-check{display:block;width:30px;height:30px;margin-bottom:10px;fill:none;stroke:var(--teal);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.std-check circle{stroke-dasharray:66;stroke-dashoffset:0;transition:stroke-dashoffset .7s ease}
.std-check path{stroke-dasharray:16;stroke-dashoffset:0;transition:stroke-dashoffset .4s ease .55s}
.js-anim .standards-grid.pre .std-check circle{stroke-dashoffset:66}
.js-anim .standards-grid.pre .std-check path{stroke-dashoffset:16}
.standards-grid article:nth-child(1) .std-check circle{transition-delay:0.00s}.standards-grid article:nth-child(1) .std-check path{transition-delay:0.55s}
.standards-grid article:nth-child(2) .std-check circle{transition-delay:0.12s}.standards-grid article:nth-child(2) .std-check path{transition-delay:0.67s}
.standards-grid article:nth-child(3) .std-check circle{transition-delay:0.24s}.standards-grid article:nth-child(3) .std-check path{transition-delay:0.79s}
.standards-grid article:nth-child(4) .std-check circle{transition-delay:0.36s}.standards-grid article:nth-child(4) .std-check path{transition-delay:0.91s}
.standards-grid article:nth-child(5) .std-check circle{transition-delay:0.48s}.standards-grid article:nth-child(5) .std-check path{transition-delay:1.03s}
.standards-grid article:nth-child(6) .std-check circle{transition-delay:0.60s}.standards-grid article:nth-child(6) .std-check path{transition-delay:1.15s}

/* ---------- Hover life ---------- */
@media(hover:hover){
.services-core article:hover,.standards-grid article:hover,.solution-grid article:hover{transform:translateY(-3px);box-shadow:0 14px 34px #2037461a}
.solution-grid article,.standards-grid article{transition:transform .25s,box-shadow .25s}
.card-link span,.text-link span{display:inline-block;transition:transform .2s}
.card-link:hover span,.text-link:hover span{transform:translate(2px,-2px)}
}

@media(max-width:620px){
.scrape-demo{padding:12px}
.sd-table th:nth-child(1){width:22%}
.sd-flow em{font-size:.62rem}
.ba{height:auto}
.ba-pane{position:relative;inset:auto;padding:20px}
.ba-after{clip-path:none}
.ba-handle,.ba-range{display:none}
.ba-after .ba-label{text-align:left}
.ba-record div{grid-template-columns:118px 1fr}
}
@media(prefers-reduced-motion:reduce){
.sd-live i,.sd-flow span{animation:none!important}
}
.sd-btn{display:table;margin-top:6px}
@media(min-width:900px){.ladder{margin-bottom:6px}.ladder span{width:26px;height:26px}.included{padding:14px 20px}}

/* ---------- Services: colour change on hover / focus ---------- */
.services-core article{position:relative;transition:opacity .5s ease,transform .3s ease,box-shadow .3s,border-color .3s,background-color .3s}
.services-core article *{transition:color .3s,background-color .3s,stroke .3s,border-color .3s}
.services-core article:hover,.services-core article:focus-within{background:var(--teal);border-color:var(--teal);box-shadow:0 18px 40px #0f727b40}
.services-core article:hover :is(h3,p,.you-get,.you-get strong,.service-kicker),
.services-core article:focus-within :is(h3,p,.you-get,.you-get strong,.service-kicker){color:white}
.services-core article:hover .service-kicker,.services-core article:focus-within .service-kicker{color:#bfe6e8}
.services-core article:hover p:not(.you-get):not(.service-kicker),.services-core article:focus-within p:not(.you-get):not(.service-kicker){color:#e2f2f3}
.services-core article:hover .service-icon,.services-core article:focus-within .service-icon{background:white;color:var(--teal)}
.services-core article:hover .card-link,.services-core article:focus-within .card-link{color:white}
.services-core article .card-link::after{content:"";position:absolute;inset:0;border-radius:inherit}
.services-core article .card-link:focus-visible{outline:none}
.services-core article:has(.card-link:focus-visible){outline:3px solid var(--slate);outline-offset:3px}
@media(min-width:900px){.ladder li.hot span{background:var(--slate);border-color:var(--slate);color:white;transform:scale(1.18)}}
/* Snappier hover colour change */
.services-core article{transition:opacity .5s ease,transform .18s ease,box-shadow .18s,border-color .12s,background-color .12s}
.services-core article *{transition:color .12s,background-color .12s,stroke .12s,border-color .12s}
.services-core article:nth-child(n){transition-delay:0s}
#transform{border-top:1px solid var(--line)}