/* Technology page base (UD-057: no inline styles). Loaded render-blocking in <head>, before tech-page.css (deferred),
   so the reveal starts hidden without a flicker. It holds what the pages used to put in an inline <style> block and in
   style="" attributes:
   - the Caveat note font beside Vivek's photo
   - scroll reveal (data-tp-reveal / data-tp-reveal-group), headings that wrap evenly, cards that lift on hover
   - .tp-work on the case-study section: the row scrolls sideways, so its cards zoom the photo instead of lifting
   - the black header on these pages
   - value classes instead of style="": .d0-.d24 (--d, animation step), .vw-1-.vw-100 (--w, %), .vx-0/10/16/20/32 (--x, px),
     .vc-<hex> (--c, code-line colour), .wp-1-.wp-100 (width %), .mk-h11/.mk-h14 (logo mark height) */
@font-face{font-family:'Caveat Vivek';font-style:normal;font-weight:500;font-display:swap;src:url('../fonts/caveat-vivek.woff2') format('woff2')}
.tp-motion [data-tp-reveal]:not(.is-in),.tp-motion [data-tp-reveal-group]>:not(.is-in){opacity:0}
.tp-motion .is-in{animation:tpIn .6s cubic-bezier(0,0,.58,1) calc(var(--i,0)*80ms) backwards}
@keyframes tpIn{from{opacity:0;transform:translateY(16px)}}
main h2,main h3,main b.block,.tp-apps__cat b,.tp-apps__built b{text-wrap:balance}
[data-tp-reveal-group=lift]>li{transition:transform .25s,box-shadow .25s,border-color .25s,background-color .25s}
@media (hover:hover) and (prefers-reduced-motion:no-preference){[data-tp-reveal-group=lift]>li:hover{transform:translateY(-3px)}}
.tp-work [data-tp-reveal-group=lift]>li:hover{transform:none}
.tp-work [data-tp-reveal-group=lift]>li>a:first-child{overflow:hidden}
.tp-work [data-tp-reveal-group=lift]>li img{transition:transform .6s cubic-bezier(.2,.7,.2,1)}
@media (hover:hover) and (prefers-reduced-motion:no-preference){.tp-work [data-tp-reveal-group=lift]>li:hover img{transform:scale(1.04)}}
header{background:#000!important}
.d0{--d:0}.d1{--d:1}.d2{--d:2}.d3{--d:3}.d4{--d:4}.d5{--d:5}.d6{--d:6}.d7{--d:7}.d8{--d:8}.d9{--d:9}.d10{--d:10}.d11{--d:11}.d12{--d:12}.d13{--d:13}.d14{--d:14}.d15{--d:15}.d16{--d:16}.d17{--d:17}.d18{--d:18}.d19{--d:19}.d20{--d:20}.d21{--d:21}.d22{--d:22}.d23{--d:23}.d24{--d:24}
.vw-1{--w:1%}.vw-2{--w:2%}.vw-3{--w:3%}.vw-4{--w:4%}.vw-5{--w:5%}.vw-6{--w:6%}.vw-7{--w:7%}.vw-8{--w:8%}.vw-9{--w:9%}.vw-10{--w:10%}.vw-11{--w:11%}.vw-12{--w:12%}.vw-13{--w:13%}.vw-14{--w:14%}.vw-15{--w:15%}.vw-16{--w:16%}.vw-17{--w:17%}.vw-18{--w:18%}.vw-19{--w:19%}.vw-20{--w:20%}.vw-21{--w:21%}.vw-22{--w:22%}.vw-23{--w:23%}.vw-24{--w:24%}.vw-25{--w:25%}.vw-26{--w:26%}.vw-27{--w:27%}.vw-28{--w:28%}.vw-29{--w:29%}.vw-30{--w:30%}.vw-31{--w:31%}.vw-32{--w:32%}.vw-33{--w:33%}.vw-34{--w:34%}.vw-35{--w:35%}.vw-36{--w:36%}.vw-37{--w:37%}.vw-38{--w:38%}.vw-39{--w:39%}.vw-40{--w:40%}.vw-41{--w:41%}.vw-42{--w:42%}.vw-43{--w:43%}.vw-44{--w:44%}.vw-45{--w:45%}.vw-46{--w:46%}.vw-47{--w:47%}.vw-48{--w:48%}.vw-49{--w:49%}.vw-50{--w:50%}.vw-51{--w:51%}.vw-52{--w:52%}.vw-53{--w:53%}.vw-54{--w:54%}.vw-55{--w:55%}.vw-56{--w:56%}.vw-57{--w:57%}.vw-58{--w:58%}.vw-59{--w:59%}.vw-60{--w:60%}.vw-61{--w:61%}.vw-62{--w:62%}.vw-63{--w:63%}.vw-64{--w:64%}.vw-65{--w:65%}.vw-66{--w:66%}.vw-67{--w:67%}.vw-68{--w:68%}.vw-69{--w:69%}.vw-70{--w:70%}.vw-71{--w:71%}.vw-72{--w:72%}.vw-73{--w:73%}.vw-74{--w:74%}.vw-75{--w:75%}.vw-76{--w:76%}.vw-77{--w:77%}.vw-78{--w:78%}.vw-79{--w:79%}.vw-80{--w:80%}.vw-81{--w:81%}.vw-82{--w:82%}.vw-83{--w:83%}.vw-84{--w:84%}.vw-85{--w:85%}.vw-86{--w:86%}.vw-87{--w:87%}.vw-88{--w:88%}.vw-89{--w:89%}.vw-90{--w:90%}.vw-91{--w:91%}.vw-92{--w:92%}.vw-93{--w:93%}.vw-94{--w:94%}.vw-95{--w:95%}.vw-96{--w:96%}.vw-97{--w:97%}.vw-98{--w:98%}.vw-99{--w:99%}.vw-100{--w:100%}
.vx-0{--x:0px}.vx-10{--x:10px}.vx-16{--x:16px}.vx-20{--x:20px}.vx-32{--x:32px}
.vc-8fa8ff{--c:#8fa8ff}.vc-3bdc9a{--c:#3BDC9A}.vc-72aee6{--c:#72AEE6}.vc-f5c26b{--c:#F5C26B}.vc-7cc4ff{--c:#7CC4FF}.vc-9fe0c0{--c:#9fe0c0}.vc-c9aee8{--c:#C9AEE8}
.wp-1{width:1%}.wp-2{width:2%}.wp-3{width:3%}.wp-4{width:4%}.wp-5{width:5%}.wp-6{width:6%}.wp-7{width:7%}.wp-8{width:8%}.wp-9{width:9%}.wp-10{width:10%}.wp-11{width:11%}.wp-12{width:12%}.wp-13{width:13%}.wp-14{width:14%}.wp-15{width:15%}.wp-16{width:16%}.wp-17{width:17%}.wp-18{width:18%}.wp-19{width:19%}.wp-20{width:20%}.wp-21{width:21%}.wp-22{width:22%}.wp-23{width:23%}.wp-24{width:24%}.wp-25{width:25%}.wp-26{width:26%}.wp-27{width:27%}.wp-28{width:28%}.wp-29{width:29%}.wp-30{width:30%}.wp-31{width:31%}.wp-32{width:32%}.wp-33{width:33%}.wp-34{width:34%}.wp-35{width:35%}.wp-36{width:36%}.wp-37{width:37%}.wp-38{width:38%}.wp-39{width:39%}.wp-40{width:40%}.wp-41{width:41%}.wp-42{width:42%}.wp-43{width:43%}.wp-44{width:44%}.wp-45{width:45%}.wp-46{width:46%}.wp-47{width:47%}.wp-48{width:48%}.wp-49{width:49%}.wp-50{width:50%}.wp-51{width:51%}.wp-52{width:52%}.wp-53{width:53%}.wp-54{width:54%}.wp-55{width:55%}.wp-56{width:56%}.wp-57{width:57%}.wp-58{width:58%}.wp-59{width:59%}.wp-60{width:60%}.wp-61{width:61%}.wp-62{width:62%}.wp-63{width:63%}.wp-64{width:64%}.wp-65{width:65%}.wp-66{width:66%}.wp-67{width:67%}.wp-68{width:68%}.wp-69{width:69%}.wp-70{width:70%}.wp-71{width:71%}.wp-72{width:72%}.wp-73{width:73%}.wp-74{width:74%}.wp-75{width:75%}.wp-76{width:76%}.wp-77{width:77%}.wp-78{width:78%}.wp-79{width:79%}.wp-80{width:80%}.wp-81{width:81%}.wp-82{width:82%}.wp-83{width:83%}.wp-84{width:84%}.wp-85{width:85%}.wp-86{width:86%}.wp-87{width:87%}.wp-88{width:88%}.wp-89{width:89%}.wp-90{width:90%}.wp-91{width:91%}.wp-92{width:92%}.wp-93{width:93%}.wp-94{width:94%}.wp-95{width:95%}.wp-96{width:96%}.wp-97{width:97%}.wp-98{width:98%}.wp-99{width:99%}.wp-100{width:100%}
.mk-h11{height:11px;width:auto}.mk-h14{height:14px;width:auto}
/* Wide logo marks inside integration chips: beat .tp-apps__tool svg{width:20px;height:20px} (tech-page.css) */
.tp-apps__tool svg.mk-h11,.tp-apps__tool svg.mk-h14{width:auto}.tp-apps__tool svg.mk-h11{height:11px}.tp-apps__tool svg.mk-h14{height:14px}
/* Hero art (UD-064: no inline SVG). The drawing is an .svg file shown with <img width height>; its notes are HTML cards
   over it, so their text is Poppins and stays legible at every width. The notes are absolutely positioned (no layout
   shift) in percentages of the drawing, so they move with it as it scales; .tp-hero-note--<page><n> places each one
   in the drawing's free space, clear of the phone screens. The tick is an .svg file too (img/icons/check-green.svg). */
.tp-hero-art{position:relative}
.tp-hero-note{position:absolute;display:flex;margin:0;align-items:center;gap:7px;padding:7px 10px 7px 7px;border:1px solid #e3ece7;border-radius:12px;background:#fff;box-shadow:0 12px 28px -14px rgba(15,60,40,.3);color:#0f1f2e;font-size:12.5px;font-weight:600;line-height:1.25;white-space:nowrap}
.tp-hero-note::before{content:"";flex:none;width:22px;height:22px;background:url('../img/icons/check-green.svg') center/contain no-repeat}
.tp-hero-note small{display:block;margin-top:2px;color:#4b5f55;font-size:12px;font-weight:400}
@media (min-width:640px){.tp-hero-note{gap:10px;padding:10px 16px 10px 10px;border-radius:16px;font-size:15px}.tp-hero-note::before{width:30px;height:30px}.tp-hero-note small{font-size:13px}}
@media (min-width:1024px) and (max-width:1279px){.tp-hero-note{gap:7px;padding:7px 10px 7px 7px;font-size:13px}.tp-hero-note::before{width:24px;height:24px}.tp-hero-note small{font-size:12px}}
/* Phones (under 420px) the drawing is under 390px wide, so the notes shrink to stay in its free space, off the phone screens */
@media (max-width:419px){.tp-hero-note{gap:5px;padding:5px 8px 5px 5px;border-radius:10px;font-size:11px}.tp-hero-note::before{width:18px;height:18px}.tp-hero-note small{margin-top:1px;font-size:10.5px}}
.tp-hero-note--rn1{left:2%;top:51%}
.tp-hero-note--rn2{left:0;top:73%}
.tp-hero-note--kt1{left:3%;top:41%}
.tp-hero-note--kt2{left:0;top:64%}