/* ATLAS Flow Solutions site. Brand palette from the kit: steel accent on deep blue-black panels, light pages.
   Mockups are drawn in HTML/CSS/SVG after the product's own style guide. Moving backgrounds in v3-backdrops.js. */
:root{
  --deep:#061016;--base:#08141c;--inset:#0a1720;--panel:#0e1e29;--panel2:#143042;
  --ink:#08141c;--ink2:#1c2a33;--body:#3d4c56;--muted:#54646f;--faint:#798c98;
  --line:#e6ebee;--line2:#bfced7;--bg:#ffffff;--bg2:#f3f6f8;--bg3:#e6ebee;
  --steel:#8ea6b4;--steel-dim:#6d818c;--steel-lift:#b8c6ce;--body-dark:#bfced7;--muted-dark:#91a3ae;
  --blue:#3f7ea6;--green:#4fb894;--gold:#f0c73f;--sky:#7fb8d4;--coral:#e0785f;
  --flow:linear-gradient(100deg,#3f7ea6 0%,#7fb8d4 55%,#4fb894 100%);
  --flow2:linear-gradient(100deg,#e0785f 0%,#f0c73f 100%);
  --fd:"IBM Plex Sans",ui-sans-serif,system-ui,sans-serif;
  --fc:"IBM Plex Sans Condensed","IBM Plex Sans",ui-sans-serif,sans-serif;
  --fs:"IBM Plex Sans",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  --fm:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --r:12px;--r2:18px;--r3:26px;
  --sh1:0 1px 2px rgba(6,16,22,.05),0 4px 14px -8px rgba(6,16,22,.12);
  --sh2:0 2px 4px rgba(6,16,22,.04),0 24px 56px -22px rgba(6,16,22,.28);
  --sh3:0 40px 100px -32px rgba(6,16,22,.5);
  --wrap:1400px;--ease:cubic-bezier(.2,.8,.2,1);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--body);font:400 16px/1.65 var(--fs);-webkit-font-smoothing:antialiased;overflow-x:hidden}
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;cursor:pointer}
h1,h2,h3,h4{font-family:var(--fd);color:var(--ink);margin:0;letter-spacing:-.025em;line-height:1.08;font-weight:500}
p{margin:0}
.ic{width:20px;height:20px;flex:none}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 28px;position:relative}
.skip{position:absolute;left:-999px;top:8px;z-index:200;background:var(--ink);color:#fff;padding:10px 14px;border-radius:8px}
.skip:focus{left:12px}
:focus-visible{outline:2.5px solid var(--blue);outline-offset:3px;border-radius:6px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
/* the hairline rails at the page's edges */
.rails{position:fixed;inset:0;pointer-events:none;z-index:-1}
.rails i{position:absolute;top:0;bottom:0;width:1px;background:var(--line)}
.rails i:first-child{left:calc(50% - var(--wrap)/2)}
.rails i:last-child{left:calc(50% + var(--wrap)/2 - 1px)}
@media (max-width:1240px){.rails{display:none}}

/* ---------- header ---------- */
.hdr{position:sticky;top:0;z-index:100;background:rgba(255,255,255,.82);backdrop-filter:saturate(1.4) blur(14px);-webkit-backdrop-filter:saturate(1.4) blur(14px);border-bottom:1px solid transparent;transition:border-color .3s,background .3s}
.hdr.scrolled{border-bottom-color:var(--line);background:rgba(255,255,255,.94)}
.hdr .wrap{display:flex;align-items:center;gap:26px;height:66px}
.brand{display:flex;align-items:center;flex:none}
.brand img{height:30px;width:auto}
.ftr .brand img{height:34px}
.nav{display:flex;align-items:center;gap:2px;flex:1}
.nav>a,.nav>.dd>button{display:flex;align-items:center;gap:5px;padding:9px 12px;border-radius:9px;font:500 14.5px/1 var(--fs);color:var(--ink2);background:none;border:0;transition:background .2s}
.nav>a:hover,.nav>.dd>button:hover,.nav>.dd.open>button{background:var(--bg2)}
.nav>.dd>button .ic{width:14px;height:14px;transition:transform .25s;color:var(--faint)}
.nav>.dd.open>button .ic{transform:rotate(180deg)}
.hdr-cta{display:flex;gap:8px;align-items:center}
.dd{position:relative}
/* the panel hangs from a bridge, so the pointer never crosses a gap on its way down */
.mega-wrap{position:absolute;top:100%;left:-140px;padding-top:12px;z-index:60;opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity .18s var(--ease),transform .18s var(--ease),visibility .18s}
.mega-wrap.small{left:-24px}
.dd.open .mega-wrap{opacity:1;visibility:visible;transform:none}
.mega{width:900px;background:#fff;border:1px solid var(--line);border-radius:var(--r2);box-shadow:var(--sh2);padding:20px;display:grid;grid-template-columns:1fr 1fr 1fr;gap:4px 16px}
.mega.small{width:360px;grid-template-columns:1fr}
.mega h6{grid-column:1/-1;margin:2px 8px 6px;font:500 11px/1 var(--fm);letter-spacing:.2em;text-transform:uppercase;color:var(--faint)}
.mi{display:flex;gap:12px;align-items:flex-start;padding:10px;border-radius:12px;transition:background .18s}
.mi:hover{background:var(--bg2)}
.tile{display:grid;place-items:center;color:var(--on,#fff);flex:none}
.mi .tile{width:40px;height:40px;border-radius:11px}
.mi .tile .ic{width:20px;height:20px}
.mi b{display:flex;align-items:center;gap:6px;font:500 14.5px/1.25 var(--fs);color:var(--ink)}

.mega .foot{grid-column:1/-1;display:flex;justify-content:space-between;align-items:center;margin-top:8px;padding:14px 12px 2px;border-top:1px solid var(--line);font-size:14px;color:var(--muted)}
.mega .foot a{color:var(--ink);font-weight:500;display:flex;align-items:center;gap:6px}
.mega .foot a .ic{width:16px;height:16px}
.new{display:inline-block;font:600 9.5px/1 var(--fm);letter-spacing:.08em;text-transform:uppercase;color:var(--deep);background:var(--gold);padding:4px 6px;border-radius:999px}
.burger{display:none;margin-left:auto;background:none;border:0;padding:8px}
.burger .ic{width:26px;height:26px}
.mnav{display:none}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:44px;padding:0 20px;border-radius:10px;font:500 15px/1 var(--fs);border:1px solid transparent;transition:transform .2s var(--ease),box-shadow .2s,background .2s,border-color .2s;white-space:nowrap}
.btn .ic{width:17px;height:17px;transition:transform .2s}
.btn:hover .ic{transform:translateX(3px)}
.btn-p{background:var(--deep);color:#fff}
.btn-p:hover{background:var(--panel2);transform:translateY(-1px)}
.btn-g{background:var(--steel);color:var(--deep)}
.btn-g:hover{background:var(--steel-lift);transform:translateY(-1px)}
.btn-o{background:#fff;color:var(--ink);border-color:var(--line2)}
.btn-o:hover{border-color:var(--ink);transform:translateY(-1px)}
.btn-w{background:#fff;color:var(--deep)}
.btn-w:hover{background:var(--bg3)}
.btn-ghost-w{color:#fff;border-color:rgba(255,255,255,.3)}
.btn-ghost-w:hover{border-color:#fff}
.btn-sm{height:38px;padding:0 15px;font-size:14px;border-radius:9px}
.btn-lg{height:52px;padding:0 26px;font-size:16px;border-radius:12px}
.link{display:inline-flex;align-items:center;gap:6px;font-weight:500;color:var(--ink);border-bottom:1px solid var(--line2);padding-bottom:2px}
.link .ic{width:16px;height:16px;transition:transform .2s}
.link:hover{border-bottom-color:var(--ink)}
.link:hover .ic{transform:translateX(3px)}
.night .link{color:#fff;border-bottom-color:rgba(191,206,215,.35)}

/* ---------- type helpers ---------- */
.kicker{display:inline-flex;align-items:center;gap:9px;font:500 12px/1 var(--fm);letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}
.kicker .dot{width:22px;height:22px;border-radius:6px;display:grid;place-items:center;background:var(--bg3);color:var(--ink)}
.kicker .dot .ic{width:13px;height:13px}
.night .kicker,.hero-dark .kicker{color:var(--muted-dark)}
.night .kicker .dot,.hero-dark .kicker .dot{background:rgba(255,255,255,.08);color:var(--steel-lift)}
a.kicker{border:1px solid var(--line);background:#fff;padding:7px 12px 7px 7px;border-radius:999px;text-transform:none;letter-spacing:0;font:500 13.5px/1 var(--fs);color:var(--ink2);box-shadow:var(--sh1)}
a.kicker .ic{width:14px;height:14px;color:var(--faint)}
.hero-dark a.kicker,.night a.kicker{background:rgba(255,255,255,.06);border-color:rgba(191,206,215,.2);color:var(--body-dark);box-shadow:none}
.grad{color:var(--blue)}
.grad2{color:var(--coral)}
.night .grad,.hero-dark .grad{color:var(--steel)}
.night .grad2{color:var(--gold)}
.lead{font-size:clamp(17px,1.4vw,19px);line-height:1.6;color:var(--muted);max-width:60ch}
.h-xl{font-size:clamp(40px,6vw,76px);letter-spacing:-.035em;line-height:1.02}
.h-l{font-size:clamp(32px,4.2vw,54px);letter-spacing:-.03em}
.h-m{font-size:clamp(26px,3vw,40px);letter-spacing:-.025em}
.h-s{font-size:22px;letter-spacing:-.015em;line-height:1.2}
.center{text-align:center}
.center .lead{margin-left:auto;margin-right:auto}
.mt8{margin-top:8px}.mt16{margin-top:16px}.mt24{margin-top:24px}.mt32{margin-top:32px}.mt48{margin-top:48px}.mt64{margin-top:64px}
.acts{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.center .acts{justify-content:center}
.note{font-size:13.5px;color:var(--faint)}
.num{font-family:var(--fc);font-weight:600;letter-spacing:-.02em}

/* ---------- sections ---------- */
.sec{padding:112px 0;position:relative}
.sec.tight{padding:72px 0}
.sec.alt{background:var(--bg2)}
.sec.night{background:var(--deep);color:var(--body-dark)}
.sec.night h1,.sec.night h2,.sec.night h3,.sec.night h4{color:#fff}
.sec.night .lead{color:var(--muted-dark)}
.sec.night .wrap{z-index:1}
.sec-head{max-width:800px}
.sec-head.center{margin:0 auto}
.sec-head .lead{margin-top:18px}
.sec-head .kicker{margin-bottom:22px}

/* ---------- dark hero (the demo's brand panel) ---------- */
.hero-dark{position:relative;background:var(--deep);color:var(--body-dark);overflow:hidden;padding:56px 0 176px}
.hero-dark .wrap{z-index:1}
.hero-dark .grid{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:40px;align-items:center}
.hero-card{position:relative;border:1px solid rgba(191,206,215,.14);border-radius:var(--r2);background:rgba(10,23,32,.92);padding:40px 42px}
.hero-card .kicker{margin-bottom:22px}
.hero-card h1{color:#fff;font-size:clamp(38px,5vw,66px);letter-spacing:-.035em;line-height:1.02}
.hero-card .lead{color:var(--body-dark);margin-top:20px;max-width:52ch}
.hero-card .acts{margin-top:30px}
.facts{list-style:none;margin:30px 0 0;padding:22px 0 0;border-top:1px solid rgba(191,206,215,.14);display:flex;flex-wrap:wrap;gap:10px 0}
.facts li{display:flex;align-items:center;gap:8px;padding:0 16px;font-size:13.5px;color:var(--body-dark);border-left:1px solid rgba(191,206,215,.18)}
.facts li:first-child{padding-left:0;border-left:0}
.facts .ic{width:15px;height:15px;color:var(--steel)}
.robot-anchor{position:relative;display:flex;justify-content:center;align-items:center;min-height:380px}
.robot-anchor .login-bot{height:min(440px,46vh);width:auto}
.robot-anchor.is-3d{height:400px}
.cta .robot-anchor.is-3d{height:380px}
.sl-panel .robot-anchor.is-3d{height:380px}
/* the open hero: the words sit on the moving background, no box */
.hero-open{max-width:1000px;margin:0 auto;text-align:center;padding:10px 16px}
.hero-open .kicker{margin-bottom:28px}
.hero-open h1{color:#fff;font-size:clamp(44px,6.4vw,92px);letter-spacing:-.04em;line-height:1}
.hero-open .lead{color:var(--body-dark);margin:28px auto 0;max-width:58ch;font-size:clamp(17px,1.5vw,21px)}
.hero-open .acts{justify-content:center;margin-top:36px}
.hero-open .facts{justify-content:center;border-top:0;padding-top:0;margin-top:30px}
.tiles4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;margin-top:44px;border:1px solid rgba(191,206,215,.14);border-radius:var(--r2);overflow:hidden;background:rgba(191,206,215,.14)}
.tiles4 a{display:flex;gap:12px;align-items:flex-start;padding:18px 20px;background:rgba(10,23,32,.92);transition:background .2s}
.tiles4 a:hover{background:var(--panel)}
.tiles4 .ic{width:20px;height:20px;color:var(--steel);margin-top:2px}
.tiles4 b{display:block;font-weight:500;color:#fff;font-size:15px}
.tiles4 span{display:block;font-size:13px;color:var(--muted-dark);margin-top:2px}
.stage-wrap{margin-top:-132px;position:relative;z-index:2}

/* light page hero */
.page-hero{padding:72px 0 24px;position:relative;overflow:hidden}
.page-hero .wrap{position:relative;z-index:1}
.page-hero .split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:52px;align-items:center}
.page-hero h1{font-size:clamp(38px,5vw,64px);letter-spacing:-.035em}
.page-hero .lead{margin-top:22px}
.page-hero .acts{margin-top:30px}
.crumb{display:inline-flex;align-items:center;gap:10px;margin-bottom:22px;font:500 12px/1 var(--fm);letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}
.crumb .tile{width:28px;height:28px;border-radius:8px}
.crumb .tile .ic{width:15px;height:15px}
.hero{position:relative;padding:72px 0 40px;overflow:hidden}
.bgfx{position:absolute;inset:0;pointer-events:none;z-index:0}
.blob{position:absolute;border-radius:50%;filter:blur(70px);opacity:.5;animation:drift 18s ease-in-out infinite alternate}
.blob.b1{width:560px;height:560px;left:-6%;top:-10%;background:#d9e5ec}
.blob.b2{width:520px;height:520px;right:-4%;top:0;background:#cfe6dc;animation-delay:-6s}
.blob.b3{width:420px;height:420px;left:38%;top:24%;background:#f6e1d8;animation-delay:-11s;opacity:.4}
@keyframes drift{0%{transform:translate(0,0) scale(1)}50%{transform:translate(40px,30px) scale(1.08)}100%{transform:translate(-30px,50px) scale(.96)}}
.gridfx{position:absolute;inset:0;background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);background-size:48px 48px;mask-image:radial-gradient(ellipse at 50% 0,#000 20%,transparent 70%);-webkit-mask-image:radial-gradient(ellipse at 50% 0,#000 20%,transparent 70%);opacity:.7}
.hero .wrap{position:relative;z-index:1}
.hero-copy{max-width:960px;margin:0 auto;text-align:center}
.hero-copy .kicker{margin-bottom:26px}
.hero-copy .lead{margin:24px auto 0}
.hero-copy .acts{justify-content:center;margin-top:32px}
.hero-copy .note{margin-top:16px}
.rot{display:inline-grid;vertical-align:bottom;overflow:hidden;height:1.06em}
.rot>span{grid-area:1/1;transform:translateY(105%);opacity:0;transition:transform .7s var(--ease),opacity .5s;white-space:nowrap;padding-bottom:.06em}
.rot>span.on{transform:none;opacity:1}
.rot>span.off{transform:translateY(-105%);opacity:0}

/* ---------- gradient panel: the home of every mockup ---------- */
.gpanel{position:relative;border-radius:var(--r3);padding:clamp(18px,3vw,34px);background:linear-gradient(135deg,color-mix(in oklab,var(--tc,#8ea6b4) 14%,#fff) 0%,color-mix(in oklab,var(--tc,#8ea6b4) 36%,#fff) 60%,color-mix(in oklab,#7fb8d4 34%,#fff) 100%);border:1px solid color-mix(in oklab,var(--tc,#8ea6b4) 22%,#fff);overflow:hidden}
.gpanel::before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(6,16,22,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(6,16,22,.07) 1px,transparent 1px);background-size:44px 44px;mask-image:radial-gradient(ellipse at 50% 50%,#000 30%,transparent 85%);-webkit-mask-image:radial-gradient(ellipse at 50% 50%,#000 30%,transparent 85%);pointer-events:none}
.gpanel>*{position:relative}
.gpanel .win{box-shadow:0 30px 60px -30px rgba(6,16,22,.5)}
.gpanel.center{display:grid;place-items:center;min-height:320px}
.gpanel .card-f{box-shadow:0 20px 40px -22px rgba(6,16,22,.4)}
.night .gpanel{background:linear-gradient(135deg,var(--panel),var(--panel2));border-color:rgba(191,206,215,.14)}
.night .gpanel::before{background-image:linear-gradient(rgba(191,206,215,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(191,206,215,.08) 1px,transparent 1px)}

/* ---------- stage: composite of floating mockups ---------- */
.stage{position:relative;margin:0 auto;max-width:1120px;perspective:2000px}
.stage .main{transform:rotateX(6deg);transform-origin:50% 0;transition:transform 1.2s var(--ease)}
.stage.in .main{transform:none}
.float{position:absolute;z-index:3;animation:bob 7s ease-in-out infinite}
.float.f2{animation-delay:-2.5s}.float.f3{animation-delay:-4.5s}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}

/* ---------- app window mockup (after /admin/style-guide) ---------- */
.win{background:#fff;border:1px solid var(--line);border-radius:16px;box-shadow:var(--sh3);overflow:hidden;font-family:var(--fs);color:var(--ink2);text-align:left;container-type:inline-size;width:100%;max-width:100%}
/* the product's own top bar: menu, search, the bell, you */
.win .tb{display:flex;align-items:center;gap:12px;height:42px;padding:0 14px;background:#fff;border-bottom:1px solid var(--line)}
.tb-menu{display:grid;color:var(--faint)}.tb-menu .ic{width:16px;height:16px}
.tb-search{display:flex;align-items:center;gap:8px;height:28px;padding:0 10px;border:1px solid var(--line2);border-radius:8px;background:var(--bg2);font:400 12px/1 var(--fs);color:var(--faint);flex:0 1 320px;min-width:0}
.tb-search .ic{width:13px;height:13px}
.tb-search kbd{margin-left:auto;font:500 10px/1 var(--fm);color:var(--faint)}
.tb-right{margin-left:auto;display:flex;align-items:center;gap:14px;color:var(--muted)}
.tb-right .ic{width:16px;height:16px}
.tb-av{width:26px;height:26px;border-radius:50%;background:var(--steel);color:var(--deep);font:600 10px/26px var(--fs);text-align:center;font-style:normal;display:inline-block}
.app{display:grid;grid-template-columns:200px minmax(0,1fr);min-height:460px}
.side{background:var(--deep);color:var(--body-dark);padding:14px 10px;display:flex;flex-direction:column;gap:2px;font-size:12.5px}
.side .sb{display:flex;align-items:center;padding:6px 6px 16px}
.side .sb img{height:22px;width:auto}
.side .nv{display:flex;align-items:center;gap:9px;padding:7px 9px;border-radius:8px;white-space:nowrap}
.side .nv .ic{width:15px;height:15px}
.side .nv.on{background:rgba(142,166,180,.18);color:#fff}
.side .nv .ct{margin-left:auto;font:500 10px/1 var(--fm);background:rgba(255,255,255,.12);padding:3px 6px;border-radius:999px;color:#fff}
.side .grp{font:500 9.5px/1 var(--fm);letter-spacing:.18em;text-transform:uppercase;color:var(--faint);padding:14px 9px 6px}
.main-pane{padding:20px 22px;background:#f8fafb;min-width:0}
.mp-h{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.mp-h h5,.mp-h .h5x{display:block;margin:0;font:600 19px/1.1 var(--fd);color:var(--ink);letter-spacing:-.02em}
.mp-h .sub{font-size:12px;color:var(--faint);margin-top:4px}
.mbtn{display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 12px;border-radius:8px;font:500 12px/1 var(--fs);background:var(--deep);color:#fff;white-space:nowrap}
.mbtn.o{background:#fff;color:var(--ink2);border:1px solid var(--line2)}
.mbtn .ic{width:13px;height:13px}
.kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-top:16px}
.kp{background:#fff;border:1px solid var(--line);border-radius:12px;padding:11px 12px}
.kp small{display:block;font-size:10.5px;color:var(--faint);font-weight:500}
.kp b{display:block;font:600 20px/1.1 var(--fc);color:var(--ink);margin-top:4px;letter-spacing:-.01em}
.kp em{font-style:normal;font-size:10.5px;font-weight:500}
.up{color:#065f46}.dn{color:#991b1b}
.tbl{margin-top:14px;background:#fff;border:1px solid var(--line);border-radius:12px;overflow:hidden;font-size:12px}
.tr{display:grid;align-items:center;gap:10px;padding:9px 12px;border-top:1px solid var(--line)}
.tr:first-child{border-top:0}
.tr.th{background:var(--bg2);font:500 10px/1 var(--fm);letter-spacing:.1em;text-transform:uppercase;color:var(--faint);padding:9px 12px}
.tr .nm{font-weight:500;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:flex;align-items:center;gap:8px;min-width:0}
.tr .nm span{overflow:hidden;text-overflow:ellipsis}
.tr .mono{font:400 11px/1 var(--fm);color:var(--muted)}
.tr .r{text-align:right;font-variant-numeric:tabular-nums;font-weight:500;color:var(--ink)}
.av{width:22px;height:22px;border-radius:50%;display:inline-grid;place-items:center;font:600 9px/1 var(--fs);color:#fff;flex:none}
.av[style*="#7fb8d4"],.tile[style*="#7fb8d4"],.av[style*="#f0c73f"],.tile[style*="#f0c73f"],.av[style*="#4fb894"],.tile[style*="#4fb894"],.av[style*="#8ea6b4"],.tile[style*="#8ea6b4"],.av[style*="#bfced7"],.tile[style*="#bfced7"]{color:var(--deep)}
.pill{display:inline-flex;align-items:center;gap:5px;height:21px;padding:0 9px;border-radius:999px;font:500 10.5px/1 var(--fs);white-space:nowrap;justify-self:start;max-width:100%;overflow:hidden;text-overflow:ellipsis}
.pill::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;flex:none}
.p-g{background:#d1fae5;color:#065f46}.p-o{background:#fef3c7;color:#78350f}.p-v{background:#e6ebee;color:#3d4c56}.p-b{background:#eff6ff;color:#1e40af}.p-c{background:#e6f2f9;color:#2b5f80}.p-m{background:#fee2e2;color:#991b1b}.p-n{background:#f3f6f8;color:#54646f}.p-y{background:#fef3c7;color:#78350f}
.bar{height:6px;border-radius:999px;background:var(--bg3);overflow:hidden}
.bar i{display:block;height:100%;border-radius:inherit;background:var(--flow);width:0;transition:width 1.4s var(--ease)}
.in .bar i,.bar.in i{width:var(--w)}
.tag{display:inline-block;font:500 10px/1 var(--fm);padding:4px 6px;border-radius:6px;background:var(--bg3);color:var(--muted)}

/* floating cards */
.card-f{background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:var(--sh2);padding:14px 16px;font-size:12.5px;color:var(--ink2);min-width:230px;max-width:100%;text-align:left}
.card-f .hd{display:flex;align-items:center;gap:9px;font-weight:500;color:var(--ink)}
.card-f .hd .tile{width:28px;height:28px;border-radius:8px}
.card-f .hd .tile .ic{width:15px;height:15px}
.card-f .sub{font-size:11.5px;color:var(--faint);font-weight:400}
.card-f .row{display:flex;gap:8px;margin-top:12px}
.toast{display:flex;align-items:center;gap:10px;background:var(--deep);color:#fff;border-radius:12px;padding:11px 14px;box-shadow:var(--sh2);font-size:12.5px;white-space:nowrap}
.toast .ic{width:18px;height:18px;color:var(--green)}
.toast b{font-weight:500}
.cursor{position:absolute;z-index:5;width:22px;height:22px;pointer-events:none;transition:transform 1.1s var(--ease)}
.cursor svg{width:22px;height:22px;filter:drop-shadow(0 3px 6px rgba(0,0,0,.25))}
.cursor .lbl{position:absolute;left:18px;top:18px;font:500 11px/1 var(--fs);color:#fff;background:var(--blue);padding:5px 8px;border-radius:7px;white-space:nowrap}
.click-ring{position:absolute;left:-10px;top:-10px;width:40px;height:40px;border-radius:50%;border:2px solid var(--blue);opacity:0}
.cursor.clk .click-ring{animation:ring .6s ease-out}
@keyframes ring{0%{transform:scale(.3);opacity:1}100%{transform:scale(1.4);opacity:0}}

/* phone mockup */
.phone{width:250px;max-width:100%;border-radius:38px;background:var(--base);padding:10px;box-shadow:var(--sh3);position:relative}
.phone .scr{border-radius:30px;background:#fff;overflow:hidden;height:500px;position:relative;font-size:12.5px}
.phone .notch{position:absolute;top:8px;left:50%;transform:translateX(-50%);width:84px;height:22px;border-radius:999px;background:var(--base);z-index:3}
.ph-h{padding:40px 16px 10px;display:flex;align-items:center;justify-content:space-between;font:600 15px/1 var(--fd);color:var(--ink);border-bottom:1px solid var(--line)}
.ph-row{display:flex;align-items:center;gap:10px;padding:11px 16px;border-bottom:1px solid var(--line)}
.ph-row .t{flex:1;min-width:0}
.ph-row .t b{display:block;font-weight:500;color:var(--ink);font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ph-row .t span{font-size:11.5px;color:var(--faint)}
.ph-act{position:absolute;left:12px;right:12px;bottom:14px;display:flex;gap:8px}
.ph-act span{flex:1;height:42px;border-radius:12px;display:grid;place-items:center;font-weight:500;font-size:13px}

/* ---------- module tabs (kept for pages that use them) ---------- */
.mtabs{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-top:40px}
.mtab{position:relative;display:flex;align-items:center;gap:8px;height:42px;padding:0 16px;border-radius:999px;background:#fff;border:1px solid var(--line);font:500 14px/1 var(--fs);color:var(--ink2);overflow:hidden;transition:border-color .25s,color .25s}
.mtab .ic{width:17px;height:17px;color:var(--muted)}
.mtab.on{border-color:var(--ink)}
.mtab .prog{position:absolute;left:0;bottom:0;height:2px;width:0;background:var(--ink)}
.mtab.on .prog{animation:prog var(--dur,6s) linear forwards}
.paused .mtab.on .prog{animation-play-state:paused}
@keyframes prog{to{width:100%}}
.mpanels{position:relative;margin-top:36px}
.mpanel{display:none;grid-template-columns:minmax(0,.8fr) minmax(0,1.4fr);gap:48px;align-items:center}
.mpanel.on{display:grid;animation:panelIn .6s var(--ease)}
@keyframes panelIn{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
.mpanel h3{font-size:clamp(28px,3vw,38px);letter-spacing:-.03em}
.mpanel p{margin-top:14px;color:var(--muted);font-size:17px}
.ticks{list-style:none;padding:0;margin:22px 0 0;display:grid;gap:11px}
.ticks li{display:flex;gap:10px;align-items:flex-start;font-size:15px;color:var(--ink2)}
.ticks li .ic{width:20px;height:20px;padding:4px;border-radius:50%;color:var(--deep);background:var(--ts,var(--bg3));flex:none;margin-top:2px;stroke-width:3}
.night .ticks li{color:var(--body-dark)}
.night .ticks li .ic{background:rgba(255,255,255,.1);color:var(--steel-lift)}

/* ---------- marquee ---------- */
.marquee{overflow:hidden;mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);-webkit-mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent)}
.mq-track{display:flex;gap:12px;width:max-content;animation:mq 50s linear infinite}
.marquee.rev .mq-track{animation-direction:reverse;animation-duration:60s}
.marquee:hover .mq-track{animation-play-state:paused}
@keyframes mq{to{transform:translateX(-50%)}}
.chip{display:inline-flex;align-items:center;gap:10px;height:48px;padding:0 18px;border-radius:12px;background:#fff;border:1px solid var(--line);font:500 14.5px/1 var(--fs);color:var(--ink2);white-space:nowrap}
.chip .ic{width:18px;height:18px;color:var(--steel-dim)}
.night .chip{background:var(--panel);border-color:rgba(191,206,215,.14);color:var(--body-dark)}

/* ---------- bento (kept) ---------- */
.bento{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:16px;margin-top:56px}
.bx{position:relative;background:#fff;border:1px solid var(--line);border-radius:var(--r2);padding:28px;overflow:hidden;transition:transform .35s var(--ease),box-shadow .35s;min-height:260px;display:flex;flex-direction:column}
.bx:hover{transform:translateY(-3px);box-shadow:var(--sh2)}
.bx.s2{grid-column:span 2}.bx.s3{grid-column:span 3}.bx.s4{grid-column:span 4}.bx.s6{grid-column:span 6}
.bx h3{font-size:22px;letter-spacing:-.02em;line-height:1.2}
.bx p{margin-top:10px;color:var(--muted);font-size:15px}
.bx .tile{width:42px;height:42px;border-radius:12px;margin-bottom:18px}
.bx .tile .ic{width:21px;height:21px}
.bx .vis{margin-top:auto;padding-top:22px}
.bx.dark{background:var(--deep);border-color:var(--deep);color:var(--body-dark)}
.bx.dark h3{color:#fff}.bx.dark p{color:var(--muted-dark)}

/* ---------- plain feature list ---------- */
.plist{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;margin-top:56px;border-top:1px solid var(--line)}
.pl{padding:30px 28px 34px;border-bottom:1px solid var(--line);border-right:1px solid var(--line)}
.pl:nth-child(3n){border-right:0}
.pl:nth-child(3n+1){padding-left:0}
.pl .tile{width:40px;height:40px;border-radius:10px;background:var(--bg3);color:var(--ink);margin-bottom:18px}
.pl .tile .ic{width:20px;height:20px}
.pl h4{font-size:18px;letter-spacing:-.015em;line-height:1.25}
.pl p{margin-top:8px;font-size:14.5px;color:var(--muted);line-height:1.55}

/* ---------- feature grid ---------- */
.fgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:52px}
.fgrid.four{grid-template-columns:repeat(4,minmax(0,1fr))}
.fgrid.two{grid-template-columns:repeat(2,minmax(0,1fr))}
.fc{background:#fff;border:1px solid var(--line);border-radius:var(--r2);padding:26px;transition:transform .3s var(--ease),box-shadow .3s}
.fc:hover{transform:translateY(-3px);box-shadow:var(--sh2)}
.fc .tile{width:40px;height:40px;border-radius:10px;color:var(--ink);background:var(--ts,var(--bg3));margin-bottom:16px}
.fc .tile .ic{width:20px;height:20px}
.fc h4,.fc .fc-h{font-size:17.5px;letter-spacing:-.015em;line-height:1.25}
.fc p{margin-top:8px;font-size:14.5px;color:var(--muted);line-height:1.55}
.night .fc{background:var(--panel);border-color:rgba(191,206,215,.14)}
.night .fc h4,.night .fc .fc-h{color:#fff}.night .fc p{color:var(--muted-dark)}
.night .fc .tile{background:rgba(255,255,255,.08);color:var(--steel-lift)}

/* ---------- showcase rows ---------- */
.show{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:64px;align-items:center;margin-top:120px}
.show:first-of-type{margin-top:72px}
.show.rev .show-t{order:2}
.show-t .lbl{display:inline-flex;align-items:center;gap:9px;font:500 12px/1 var(--fm);letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}
.show-t .lbl .ic{width:16px;height:16px;color:var(--tc,var(--steel-dim))}
.show-t h3{font-size:clamp(28px,3.1vw,42px);letter-spacing:-.03em;margin-top:16px;line-height:1.1}
.show-t>p{margin-top:16px;color:var(--muted);font-size:17px}
.show-t .acts{margin-top:26px}
.show-v{position:relative;min-width:0}
.show-v .glow{display:none}
.night .show-t .lbl{color:var(--muted-dark)}
.night .show-t>p{color:var(--muted-dark)}

/* ---------- sticky story ---------- */
.story{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:64px;margin-top:64px}
.story-steps{display:flex;flex-direction:column}
.st{padding:36px 0 36px 28px;border-left:2px solid var(--line);opacity:.4;transition:opacity .4s,border-color .4s;min-height:46vh;display:flex;flex-direction:column;justify-content:center}
.st.on{opacity:1;border-left-color:var(--tc,var(--steel))}
.st .n{font:500 12px/1 var(--fm);color:var(--muted);letter-spacing:.18em;text-transform:uppercase}
.st h3{font-size:clamp(24px,2.4vw,32px);letter-spacing:-.03em;margin-top:12px;line-height:1.12}
.st p{margin-top:10px;color:var(--muted);font-size:16px;max-width:46ch}
.story-vis{position:sticky;top:100px;height:min(600px,calc(100vh - 130px))}
.story-vis .gpanel{position:absolute;inset:0}
.sv{position:absolute;inset:0;opacity:0;transform:translateY(24px) scale(.98);transition:opacity .55s var(--ease),transform .55s var(--ease);display:flex;align-items:center;justify-content:center;padding:24px}
.sv.on{opacity:1;transform:none}
.sv .card-f{transform:scale(1.3)}
.sv .phone{transform:scale(1.02)}
.sv-inline{display:none}

/* ---------- stats ---------- */
.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;margin-top:56px;background:var(--line);border:1px solid var(--line);border-radius:var(--r2);overflow:hidden}
.stat{padding:30px 28px;background:#fff}
.stat b{display:block;font:600 clamp(40px,4.4vw,60px)/1 var(--fc);letter-spacing:-.02em;color:var(--ink)}
.stat span{display:block;margin-top:10px;font-size:14.5px;color:var(--muted)}
.night .stats{background:rgba(191,206,215,.14);border-color:rgba(191,206,215,.14)}
.night .stat{background:rgba(10,23,32,.9)}
.night .stat b{color:#fff}.night .stat span{color:var(--muted-dark)}

/* ---------- module grid (platform) ---------- */
.mgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:52px}
.mcard{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:var(--r2);padding:24px;transition:transform .3s var(--ease),box-shadow .3s;position:relative;overflow:hidden}
.mcard::before{content:"";position:absolute;inset:0 0 auto;height:3px;background:var(--tc)}
.mcard:hover{transform:translateY(-3px);box-shadow:var(--sh2)}
.mcard .top{display:flex;align-items:center;gap:12px}
.mcard .tile{width:40px;height:40px;border-radius:10px;background:var(--tc)}
.mcard .tile .ic{width:20px;height:20px}
.mcard h4,.mcard .mc-h{font-size:17.5px;letter-spacing:-.015em}
.mcard .fm{font:500 10.5px/1 var(--fm);color:var(--faint);letter-spacing:.14em;text-transform:uppercase;margin-top:4px}
.mcard p{margin-top:14px;font-size:14.5px;color:var(--muted);flex:1}
.mcard .link{margin-top:16px;font-size:14.5px;align-self:flex-start}

/* ---------- CTA band ---------- */
.cta{position:relative;border-radius:var(--r3);background:var(--deep);padding:72px 48px;overflow:hidden;color:var(--body-dark);display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,.8fr);gap:32px;align-items:center}
.cta>*:not(canvas){position:relative;z-index:1}
.cta h2{color:#fff;font-size:clamp(32px,4.2vw,54px);letter-spacing:-.035em}
.cta p{margin:18px 0 0;max-width:52ch;color:var(--body-dark);font-size:17.5px}
.cta .acts{margin-top:30px}
.cta .robot-anchor{min-height:280px}
.cta .robot-anchor .login-bot{height:300px}

/* ---------- table (content) ---------- */
.dt{width:100%;border-collapse:separate;border-spacing:0;margin-top:40px;background:#fff;border:1px solid var(--line);border-radius:var(--r2);overflow:hidden;font-size:15px}
.dt th,.dt td{padding:16px 20px;text-align:left;vertical-align:top;border-top:1px solid var(--line)}
.dt thead th{border-top:0;background:var(--bg2);font:500 11px/1.2 var(--fm);letter-spacing:.14em;text-transform:uppercase;color:var(--faint)}
.dt td:first-child{font-weight:500;color:var(--ink);white-space:nowrap}
.dt td{color:var(--muted)}

/* ---------- FAQ ---------- */
.faq{max-width:860px;margin:48px auto 0}
.faq details{border-bottom:1px solid var(--line);padding:4px 0}
.faq summary{list-style:none;display:flex;justify-content:space-between;align-items:center;gap:20px;padding:20px 0;cursor:pointer;font:500 18px/1.35 var(--fs);color:var(--ink)}
.faq summary::-webkit-details-marker{display:none}
.faq summary .pm{width:32px;height:32px;border-radius:50%;background:var(--bg3);display:grid;place-items:center;flex:none;transition:transform .3s,background .3s}
.faq summary .pm .ic{width:16px;height:16px}
.faq details[open] summary .pm{transform:rotate(45deg);background:var(--ink);color:#fff}
.faq .ans{padding:0 50px 22px 0;color:var(--muted);font-size:16px;line-height:1.65}

/* ---------- footer ---------- */
.ftr{background:var(--deep);color:var(--muted-dark);padding:72px 0 36px}
.ftr .top{display:grid;grid-template-columns:1.4fr repeat(4,minmax(0,1fr));gap:32px}
.ftr p.about{margin-top:18px;font-size:14px;line-height:1.6;max-width:36ch}
.ftr h6{margin:0 0 16px;font:500 11px/1 var(--fm);letter-spacing:.2em;text-transform:uppercase;color:var(--steel-lift)}
.ftr ul{list-style:none;margin:0;padding:0;display:grid;gap:11px;font-size:14.5px}
.ftr ul a:hover{color:#fff}
.ftr .bot{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-top:60px;padding-top:24px;border-top:1px solid rgba(191,206,215,.14);font-size:13px}
/* ATLAS, letter by letter: Application · Tracking · Lifecycle · Approval · Stewardship */
.acro{display:flex;justify-content:space-between;gap:12px;margin-top:64px;padding-top:44px;border-top:1px solid rgba(191,206,215,.14)}
.acro span{flex:1;text-align:center;cursor:default}
.acro b{display:block;font:600 clamp(64px,11vw,176px)/.95 var(--fc);letter-spacing:.02em;color:transparent;-webkit-text-stroke:1.5px rgba(142,166,180,.45);transition:color .7s var(--ease),-webkit-text-stroke-color .7s}
.acro.in b{color:var(--steel);-webkit-text-stroke-color:var(--steel)}
.acro span:hover b{color:#fff;-webkit-text-stroke-color:#fff;transition-duration:.2s}
.acro i{display:block;margin-top:14px;font:500 11px/1 var(--fm);letter-spacing:.22em;text-transform:uppercase;color:var(--muted-dark);font-style:normal;opacity:0;transform:translateY(8px);transition:opacity .5s var(--ease),transform .5s var(--ease)}
.acro.in i{opacity:1;transform:none}
.acro span:nth-child(1) *{transition-delay:.05s}.acro span:nth-child(2) *{transition-delay:.2s}.acro span:nth-child(3) *{transition-delay:.35s}.acro span:nth-child(4) *{transition-delay:.5s}.acro span:nth-child(5) *{transition-delay:.65s}
.acro span:hover *{transition-delay:0s}

/* ---------- reveal ---------- */
.rv{opacity:0;transform:translateY(24px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.rv.in{opacity:1;transform:none}
.rv.d1{transition-delay:.08s}.rv.d2{transition-delay:.16s}.rv.d3{transition-delay:.24s}.rv.d4{transition-delay:.32s}.rv.d5{transition-delay:.4s}
.stag>*{opacity:0;transform:translateY(14px);transition:opacity .5s var(--ease),transform .5s var(--ease)}
.stag.in>*{opacity:1;transform:none}
.stag.in>*:nth-child(1){transition-delay:.05s}.stag.in>*:nth-child(2){transition-delay:.15s}.stag.in>*:nth-child(3){transition-delay:.25s}.stag.in>*:nth-child(4){transition-delay:.35s}.stag.in>*:nth-child(5){transition-delay:.45s}.stag.in>*:nth-child(6){transition-delay:.55s}.stag.in>*:nth-child(7){transition-delay:.65s}.stag.in>*:nth-child(8){transition-delay:.75s}
.draw path.ln{stroke-dasharray:1000;stroke-dashoffset:1000;transition:stroke-dashoffset 2s var(--ease)}
.in .draw path.ln,.draw.in path.ln{stroke-dashoffset:0}
.typing::after{content:"";display:inline-block;width:2px;height:1em;background:var(--blue);margin-left:2px;vertical-align:-2px;animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
.pulse{position:relative}
.pulse::after{content:"";position:absolute;inset:-4px;border-radius:inherit;border:2px solid currentColor;opacity:0;animation:pulse 2s ease-out infinite}
@keyframes pulse{0%{transform:scale(.9);opacity:.7}100%{transform:scale(1.3);opacity:0}}
.pop{animation:popIn .5s var(--ease) both}
@keyframes popIn{from{opacity:0;transform:translateY(10px) scale(.96)}to{opacity:1;transform:none}}

/* ---------- pricing ---------- */
.bill{display:inline-flex;align-items:center;gap:4px;padding:5px;border-radius:999px;background:var(--bg3);margin-top:32px}
.bill button{height:38px;padding:0 18px;border-radius:999px;border:0;background:none;font:500 14px/1 var(--fs);color:var(--muted);transition:background .25s,color .25s,box-shadow .25s}
.bill button.on{background:#fff;color:var(--ink);box-shadow:var(--sh1)}
.bill .save{font:500 10.5px/1 var(--fm);color:#065f46;background:#d1fae5;padding:4px 7px;border-radius:999px;margin-left:6px}
.plans{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-top:48px;align-items:stretch}
.plan{position:relative;display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:var(--r2);padding:28px 24px;transition:transform .3s var(--ease),box-shadow .3s}
.plan:hover{transform:translateY(-3px);box-shadow:var(--sh2)}
.plan.pop{border-color:var(--ink);box-shadow:var(--sh2)}
.plan .badge{position:absolute;top:-13px;left:24px;font:500 10.5px/1 var(--fm);letter-spacing:.12em;text-transform:uppercase;color:var(--deep);background:var(--gold);padding:7px 11px;border-radius:999px}
.plan h3{font-size:22px}
.plan .who{margin-top:8px;font-size:14px;color:var(--muted);min-height:42px}
.plan .price{margin-top:22px;display:flex;align-items:baseline;gap:6px}
.plan .price b{font:600 44px/1 var(--fc);letter-spacing:-.02em;color:var(--ink)}
.plan .price>span{font-size:14px;color:var(--muted)}
.plan .was{font-size:13px;color:var(--faint);margin-top:6px;min-height:20px}
.plan .was s{color:var(--faint)}
.plan .was em{font-style:normal;color:#065f46;font-weight:500}
.plan .btn{margin-top:22px;width:100%}
.plan ul{list-style:none;padding:0;margin:24px 0 0;display:grid;gap:10px;font-size:14px;color:var(--ink2)}
.plan li{display:flex;gap:9px;align-items:flex-start}
.plan li .ic{width:17px;height:17px;color:var(--green);margin-top:2px;stroke-width:2.6}
.plan li .dotc{width:9px;height:9px;border-radius:3px;background:var(--tc);margin-top:6px;flex:none}
.plan .inc{font:500 10.5px/1 var(--fm);letter-spacing:.14em;text-transform:uppercase;color:var(--faint);margin-top:24px}
.unl{display:flex;flex-wrap:wrap;justify-content:center;gap:10px 26px;margin-top:30px;font-size:14.5px;color:var(--ink2)}
.unl span{display:flex;align-items:center;gap:7px}
.unl .ic{width:17px;height:17px;color:var(--green)}
.builder{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:24px;margin-top:48px;align-items:start}
.bmods{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.bm{display:flex;gap:12px;align-items:flex-start;text-align:left;background:#fff;border:1.5px solid var(--line);border-radius:14px;padding:14px;transition:border-color .2s,background .2s,transform .2s}
.bm:hover{transform:translateY(-1px)}
.bm .tile{width:36px;height:36px;border-radius:10px;background:var(--tc)}
.bm .tile .ic{width:18px;height:18px}
.bm .t{flex:1;min-width:0}
.bm b{display:flex;align-items:center;gap:6px;font-size:14.5px;color:var(--ink);font-weight:500}
.bm span.pr{display:block;margin-top:3px;font:500 12.5px/1 var(--fm);color:var(--muted)}
.bm span.dep{display:block;margin-top:5px;font-size:11.5px;color:var(--faint)}
.bm .box{width:22px;height:22px;border-radius:7px;border:1.5px solid var(--line2);display:grid;place-items:center;flex:none;transition:background .2s,border-color .2s;color:transparent}
.bm .box .ic{width:14px;height:14px;stroke-width:3}
.bm[aria-pressed="true"]{border-color:var(--ink);background:var(--bg2)}
.bm[aria-pressed="true"] .box{background:var(--ink);border-color:var(--ink);color:#fff}
.bm[disabled]{cursor:default;opacity:1}
.bsum{position:sticky;top:96px;background:var(--deep);color:var(--body-dark);border-radius:var(--r2);padding:28px;overflow:hidden}
.bsum::before{content:"";position:absolute;right:-80px;top:-80px;width:240px;height:240px;border-radius:50%;background:var(--steel);filter:blur(70px);opacity:.35}
.bsum>*{position:relative}
.bsum h4,.bsum .bs-h{color:#fff;font-size:18px}
.bsum .tot{font:600 52px/1 var(--fc);color:#fff;letter-spacing:-.02em;margin-top:18px}
.bsum .per{font-size:14px;margin-top:6px}
.bsum ul{list-style:none;padding:0;margin:20px 0 0;display:grid;gap:8px;font-size:13.5px;max-height:240px;overflow:auto}
.bsum li{display:flex;justify-content:space-between;gap:12px}
.bsum li b{color:#fff;font-weight:400}
.bsum .hint{margin-top:16px;padding:12px 14px;border-radius:12px;background:rgba(255,255,255,.07);font-size:13.5px;color:var(--body-dark);display:none}
.bsum .hint.show{display:block}
.bsum .btn{width:100%;margin-top:20px}
.cmp-wrap{margin-top:48px;border:1px solid var(--line);border-radius:var(--r2);background:#fff;overflow:clip}
.cmp{width:100%;border-collapse:separate;border-spacing:0;font-size:14.5px}
.cmp th,.cmp td{padding:14px 18px;border-top:1px solid var(--line);text-align:center}
.cmp th:first-child,.cmp td:first-child{text-align:left;width:34%}
.cmp thead th{position:sticky;top:66px;z-index:5;background:rgba(255,255,255,.96);backdrop-filter:blur(10px);border-top:0;border-bottom:1px solid var(--line2);padding:18px}
.cmp thead th b{display:block;font:500 17px/1.2 var(--fd);color:var(--ink)}
.cmp thead th span{display:block;font-size:13px;color:var(--muted);margin-top:4px;font-weight:400}
.cmp thead th.pop b{color:var(--blue)}
.cmp tbody tr.grp td{background:var(--bg2);text-align:left;padding:13px 18px}
.cmp tbody tr.grp td div{display:flex;align-items:center;gap:10px;font:500 15px/1 var(--fs);color:var(--ink)}
.cmp tbody tr.grp .tile{width:28px;height:28px;border-radius:8px}
.cmp tbody tr.grp .tile .ic{width:15px;height:15px}
.cmp tbody tr.grp .pr{margin-left:auto;font:400 12.5px/1 var(--fm);color:var(--muted)}
.cmp tbody tr.mrow td:first-child{font-weight:500;color:var(--ink)}
.cmp tbody tr.feat td:first-child{padding-left:56px;color:var(--muted);font-size:14px}
.cmp .yes{display:inline-grid;place-items:center;width:24px;height:24px;border-radius:50%;background:#d1fae5;color:#065f46}
.cmp .yes .ic{width:14px;height:14px;stroke-width:3}
.cmp .no{display:inline-block;width:14px;height:2px;background:var(--line2);border-radius:2px;vertical-align:middle}
.cmp .addon{font:500 12px/1 var(--fm);color:var(--blue)}
.cmp td.popc{background:rgba(63,126,166,.05)}
.cmp-toggle{display:flex;justify-content:center;margin-top:20px}

/* ---------- forms ---------- */
.form{display:grid;gap:16px}
.form .g2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.field span{display:block;font:500 13.5px/1 var(--fs);color:var(--ink);margin-bottom:8px}
.field input,.field select,.field textarea{width:100%;height:48px;border-radius:10px;border:1.5px solid var(--line2);background:#fff;padding:0 14px;font:400 15.5px/1.4 var(--fs);color:var(--ink);transition:border-color .2s,box-shadow .2s}
.field textarea{height:130px;padding:12px 14px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{outline:0;border-color:var(--blue);box-shadow:0 0 0 4px rgba(63,126,166,.15)}
.msg{font-size:14.5px;font-weight:500;min-height:20px}
.hp{position:absolute;left:-9999px}

/* ---------- login-style split (contact) ---------- */
.split-login{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);min-height:calc(100vh - 66px)}
.sl-panel{position:relative;background:var(--deep);color:var(--body-dark);overflow:hidden;padding:56px 48px;display:flex;flex-direction:column;justify-content:center}
.sl-panel>*:not(canvas){position:relative;z-index:1}
.sl-copy{text-align:center;max-width:560px;margin:0 auto}
.sl-copy h1{color:#fff;font-size:clamp(32px,3.6vw,46px);letter-spacing:-.03em}
.sl-copy h1 .grad{color:var(--steel)}
.sl-copy p{margin-top:12px;color:var(--muted-dark);font-size:16px}
.slides{position:relative;height:1.5em;margin-top:12px;overflow:hidden}
.slides span{position:absolute;inset:0;opacity:0;transform:translateY(8px);transition:opacity .5s,transform .5s;color:var(--muted-dark);font-size:16px}
.slides span.on{opacity:1;transform:none}
.sdots{display:flex;justify-content:center;gap:6px;margin-top:14px}
.sdots i{width:6px;height:6px;border-radius:50%;background:rgba(191,206,215,.3);transition:background .3s,width .3s}
.sdots i.on{background:var(--steel);width:18px;border-radius:3px}
.sl-panel .robot-anchor{min-height:300px;margin-top:20px}
.sl-panel .robot-anchor .login-bot{height:min(320px,34vh)}
.sl-panel .facts{justify-content:center;border-top:0;padding-top:0}
.sl-form{padding:56px 48px;display:flex;flex-direction:column;justify-content:center;background:#fff}
.sl-form .inner{max-width:520px;margin:0 auto;width:100%}
.sl-form h2{font-size:30px;letter-spacing:-.025em}
.sl-form .sub{color:var(--muted);margin-top:8px;font-size:15px}
.sl-form .form{margin-top:28px}
.next{list-style:none;margin:28px 0 0;padding:0;display:grid;gap:12px}
.next li{display:flex;gap:12px;align-items:flex-start;font-size:14.5px;color:var(--muted)}
.next li i{font:500 11px/1 var(--fm);color:var(--deep);background:var(--steel);width:24px;height:24px;border-radius:50%;display:grid;place-items:center;flex:none;font-style:normal}
.next li b{color:var(--ink);font-weight:500}

/* ---------- the robot (ported from the sign-in page) ---------- */
.login-bot{--bot-accent:var(--steel);--bot-dim:color-mix(in oklab,var(--steel) 30%,var(--deep));--bot-shell:color-mix(in oklab,#fff 88%,var(--deep));--bot-shell-lo:color-mix(in oklab,#fff 70%,var(--deep));--bot-trim:color-mix(in oklab,#fff 52%,var(--deep));--bot-screen:color-mix(in oklab,#000 55%,var(--deep));--bot-tyre:color-mix(in oklab,#000 35%,var(--deep));--bot-line:rgba(255,255,255,.14);user-select:none}
.login-bot *{transform-box:view-box}
.login-bot .bot-chassis{animation:bot-bob 2.8s ease-in-out infinite}
.login-bot .bot-ping{transform-origin:160px 30px;animation:bot-ping 2.4s ease-out infinite}
.login-bot .bot-tip{animation:bot-tip 2.4s ease-in-out infinite}
.login-bot .bot-antenna{transform-origin:160px 62px;animation:bot-sway 3.6s ease-in-out infinite}
.login-bot .bot-scan{animation:bot-scan 3.2s linear infinite}
.login-bot .bot-eyes{transition:transform .18s ease-out}
.login-bot .bot-eye{transform-box:fill-box;transform-origin:center;animation:bot-blink 5s infinite}
.login-bot .bot-bar{transform-box:fill-box;transform-origin:bottom;animation:bot-eq 1.4s ease-in-out infinite}
.login-bot .bot-bar:nth-child(2){animation-delay:-.3s}.login-bot .bot-bar:nth-child(3){animation-delay:-.7s}.login-bot .bot-bar:nth-child(4){animation-delay:-.2s}.login-bot .bot-bar:nth-child(5){animation-delay:-.9s}.login-bot .bot-bar:nth-child(6){animation-delay:-.5s}
.login-bot .bot-wheel-l{transform-origin:124px 314px}.login-bot .bot-wheel-r{transform-origin:196px 314px}
.login-bot .bot-arm-l{transform-origin:106px 232px;transition:transform .5s cubic-bezier(.34,1.3,.64,1)}
.login-bot .bot-arm-r{transform-origin:214px 232px;transition:transform .5s cubic-bezier(.34,1.3,.64,1)}
.login-bot .bot-arm-r.is-waving{animation:bot-wave 2.6s ease-in-out 1.2s 1 backwards}
.login-bot .bot-head{transform-origin:160px 214px;transition:transform .3s ease}
.login-bot[data-mood="look"] .bot-head{transform:rotate(4deg)}
.login-bot[data-mood="cheer"] .bot-wheel-l,.login-bot[data-mood="cheer"] .bot-wheel-r{animation:bot-spin 1s linear infinite}
@keyframes bot-bob{50%{transform:translateY(-3px)}}
@keyframes bot-spin{to{transform:rotate(360deg)}}
@keyframes bot-ping{0%{transform:scale(.6);opacity:.9}100%{transform:scale(2.6);opacity:0}}
@keyframes bot-tip{50%{opacity:.55}}
@keyframes bot-sway{0%,100%{transform:rotate(-4deg)}50%{transform:rotate(4deg)}}
@keyframes bot-scan{0%{transform:translateY(0);opacity:0}10%,90%{opacity:.35}100%{transform:translateY(108px);opacity:0}}
@keyframes bot-blink{0%,46%,50%,100%{transform:scaleY(1)}48%{transform:scaleY(.08)}}
@keyframes bot-eq{0%,100%{transform:scaleY(.3)}50%{transform:scaleY(1)}}
@keyframes bot-wave{0%,100%{transform:rotate(0deg)}20%{transform:rotate(-150deg) scale(1,1.25)}35%{transform:rotate(-120deg) scale(1,1.25)}50%{transform:rotate(-155deg) scale(1,1.25)}65%{transform:rotate(-120deg) scale(1,1.25)}80%{transform:rotate(-150deg) scale(1,1.25)}}

/* ---------- misc visuals ---------- */
.doc{background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:var(--sh2);padding:22px 24px;font-size:12px;color:var(--muted);line-height:1.7;position:relative;max-width:100%}
.doc .ln{height:7px;border-radius:4px;background:var(--bg3);margin:9px 0}
.doc .hl{position:relative;border-radius:4px}
.doc .hl::after{content:"";position:absolute;inset:-3px -5px;border:2px solid var(--tc,var(--coral));border-radius:6px;background:color-mix(in oklab,var(--tc,var(--coral)) 10%,transparent);opacity:0;transform:scale(.96);transition:opacity .4s,transform .4s}
.in .doc .hl::after,.doc.in .hl::after{opacity:1;transform:none}
.ins{text-decoration:underline;text-decoration-color:var(--green);text-decoration-thickness:2px;color:#065f46;background:#d1fae5}
.del{text-decoration:line-through;color:#991b1b;background:#fee2e2}
.kanban{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:14px}
.kcol{background:var(--bg2);border-radius:12px;padding:8px}
.kcol h6{margin:4px 4px 8px;font:500 11px/1 var(--fs);color:var(--muted);display:flex;justify-content:space-between}
.kcard{background:#fff;border:1px solid var(--line);border-radius:10px;padding:9px 10px;font-size:11.5px;margin-bottom:7px;box-shadow:0 1px 2px rgba(6,16,22,.04)}
.kcard b{display:block;color:var(--ink);font-weight:500;font-size:12px;margin-bottom:6px}
.kcard .meta{display:flex;align-items:center;justify-content:space-between}
.cal{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:4px;margin-top:12px}
.cal div{aspect-ratio:1.3;border-radius:7px;background:var(--bg2);font:400 10px/1 var(--fm);color:var(--faint);padding:5px;position:relative}
.cal div.ev{background:var(--ts,#e6f2f9);color:var(--tc,#2b5f80);font-weight:600}
.cal div.ev::after{content:"";position:absolute;left:5px;right:5px;bottom:5px;height:3px;border-radius:2px;background:currentColor}
.map-svg{width:100%;height:auto}
.node{fill:#fff;stroke:var(--line2);stroke-width:1.5}
.edge{stroke:#bfced7;stroke-width:1.5;fill:none}
.edge.anim{stroke-dasharray:5 6;animation:dash 1.2s linear infinite}
@keyframes dash{to{stroke-dashoffset:-22}}
.nodes text{font:500 11px var(--fs);fill:var(--ink2)}

/* ---------- guard rails ---------- */
main{overflow-x:clip}
.ftr{overflow:hidden}
.show-v,.mpanel>div,.split>div,.story-steps,.st{min-width:0}
@container (max-width:720px){.app{grid-template-columns:minmax(0,1fr)}.side{display:none}}
@container (max-width:460px){.kpis{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* ---------- responsive ---------- */
@media (max-width:1100px){
  .nav,.hdr-cta .btn-o{display:none}
  .burger{display:block}
  .hdr-cta{margin-left:auto}
  .mnav{position:fixed;inset:66px 0 0;background:#fff;z-index:99;padding:20px 24px 40px;overflow:auto;display:block;opacity:0;visibility:hidden;transform:translateY(-8px);transition:opacity .25s,transform .25s,visibility .25s}
  body.mopen .mnav{opacity:1;visibility:visible;transform:none}
  body.mopen{overflow:hidden}
  .mnav h6{margin:22px 0 8px;font:500 11px/1 var(--fm);letter-spacing:.2em;text-transform:uppercase;color:var(--faint)}
  .mnav a.mi{padding:10px 0}
  .mnav .acts{margin-top:28px}
  .mnav .acts .btn{flex:1}
  .plans{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ftr .top{grid-template-columns:1fr 1fr 1fr}
  .ftr .top>div:first-child{grid-column:1/-1}
  .hero-dark .grid{grid-template-columns:minmax(0,1fr)}
  .robot-anchor{min-height:0}
  .robot-anchor .login-bot{height:300px}
  .split-login{grid-template-columns:minmax(0,1fr)}
  .sl-panel{padding:44px 24px}
}
@media (max-width:980px){
  .sec{padding:80px 0}
  .page-hero .split,.mpanel,.show,.story,.builder,.cta{grid-template-columns:minmax(0,1fr);gap:36px}
  .show.rev .show-t{order:0}
  .story-vis{display:none}
  .st{min-height:0;opacity:1;border-left-color:var(--tc,var(--steel))}
  .st .sv-inline{display:block;margin-top:22px}
  .bento{grid-template-columns:repeat(2,minmax(0,1fr))}
  .bx.s2,.bx.s3,.bx.s4,.bx.s6{grid-column:span 2}
  .fgrid,.fgrid.four,.mgrid,.plist{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pl:nth-child(3n){border-right:1px solid var(--line)}
  .pl:nth-child(2n){border-right:0}
  .pl:nth-child(3n+1){padding-left:28px}
  .pl:nth-child(2n+1){padding-left:0}
  .stats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .tiles4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .bsum{position:static}
  .float{display:none}
  .cmp-wrap{overflow-x:auto}
  .cmp{min-width:820px}
  .cmp thead th{top:0}
  .cta .robot-anchor{display:none}
  .hero-dark{padding-bottom:150px}
}
@media (max-width:640px){
  .wrap{padding:0 16px}
  .hero{padding:44px 0 20px}
  .hero-dark{padding:36px 0 130px}
  .hero-card{padding:26px 22px}
  .fgrid,.fgrid.four,.fgrid.two,.mgrid,.plans,.bmods,.stats,.plist,.tiles4{grid-template-columns:minmax(0,1fr)}
  .pl{padding-left:0!important;border-right:0!important}
  .bento{grid-template-columns:minmax(0,1fr)}
  .bx.s2,.bx.s3,.bx.s4,.bx.s6{grid-column:span 1}
  .app{grid-template-columns:minmax(0,1fr)}
  .side{display:none}
  .kpis{grid-template-columns:repeat(2,minmax(0,1fr))}
  .form .g2{grid-template-columns:minmax(0,1fr)}
  .ftr .top{grid-template-columns:1fr 1fr}
  .cta{padding:48px 22px;border-radius:22px}
  .hdr-cta .btn-g{display:none}
  .faq .ans{padding-right:0}
  .dt{display:block;overflow-x:auto}
  .tr.hide-sm,.hide-sm{display:none!important}
  .card-f{min-width:0}
  .tr{gap:6px;padding:8px 10px}
  .main-pane{padding:14px}
  .gpanel{border-radius:18px}
  .stage-wrap{margin-top:-100px}
  .robot-anchor .login-bot{height:240px}
  .sl-form{padding:40px 16px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
  .rv,.stag>*{opacity:1;transform:none}
}
/* a narrow window stacks its side-by-side blocks instead of squeezing them */
@container (max-width:500px){
  .main-pane>div[style*="grid-template-columns"]{grid-template-columns:minmax(0,1fr)!important}
  .kpis{grid-template-columns:repeat(2,minmax(0,1fr))}
}
.brand img{height:32px}
/* no blur blobs: on a wide monitor they float away from the content */
.blob{display:none}
.gridfx{mask-image:radial-gradient(ellipse 60% 70% at 50% 0,#000 10%,transparent 80%);-webkit-mask-image:radial-gradient(ellipse 60% 70% at 50% 0,#000 10%,transparent 80%)}
/* the mockup always takes the wider column, whichever side it is on */
.show.rev{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr)}
@media (max-width:980px){.show.rev{grid-template-columns:minmax(0,1fr)}}

/* ---------- section edges: the old site's dividers (wave, poly, shear, bus) ----------
   A section wearing one eats upward into the section above along the shape, in its own colour,
   and draws the line along the seam. Light sections draw a steel-dim line with a light halo;
   dark ones a lifted steel line with a dark halo. */
.edge-wave,.edge-poly,.edge-shear,.edge-bus{position:relative;--edge-bg:#fff}
.sec.alt.edge-wave,.sec.alt.edge-poly,.sec.alt.edge-shear,.sec.alt.edge-bus{--edge-bg:var(--bg2)}
.night.edge-wave,.night.edge-poly,.night.edge-shear,.night.edge-bus,.ftr.edge-wave,.ftr.edge-poly,.ftr.edge-shear,.ftr.edge-bus{--edge-bg:var(--deep)}
.edge-wave::before,.edge-poly::before,.edge-shear::before,.edge-bus::before,.edge-wave::after,.edge-poly::after,.edge-shear::after,.edge-bus::after{content:"";position:absolute;left:0;right:0;top:-63px;height:64px;pointer-events:none;z-index:3}
.edge-wave::before,.edge-poly::before,.edge-shear::before,.edge-bus::before{background:var(--edge-bg)}
.edge-wave::before{-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1200' height='64' preserveAspectRatio='none'%3E%3Cpath d='M0,46 C176,8 316,60 512,30 S872,4 1046,36 S1150,52 1200,42 V64 H0 Z' fill='%23fff'/%3E%3C/svg%3E") no-repeat 0 0/100% 64px;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1200' height='64' preserveAspectRatio='none'%3E%3Cpath d='M0,46 C176,8 316,60 512,30 S872,4 1046,36 S1150,52 1200,42 V64 H0 Z' fill='%23fff'/%3E%3C/svg%3E") no-repeat 0 0/100% 64px}
.edge-poly::before{-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1200' height='64' preserveAspectRatio='none'%3E%3Cpath d='M0,54 L152,18 L302,46 L452,10 L604,40 L754,14 L904,48 L1054,20 L1200,52 V64 H0 Z' fill='%23fff'/%3E%3C/svg%3E") no-repeat 0 0/100% 64px;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1200' height='64' preserveAspectRatio='none'%3E%3Cpath d='M0,54 L152,18 L302,46 L452,10 L604,40 L754,14 L904,48 L1054,20 L1200,52 V64 H0 Z' fill='%23fff'/%3E%3C/svg%3E") no-repeat 0 0/100% 64px}
.edge-shear::before{-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1200' height='64' preserveAspectRatio='none'%3E%3Cpath d='M0,60 L1200,8 V64 H0 Z' fill='%23fff'/%3E%3C/svg%3E") no-repeat 0 0/100% 64px;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1200' height='64' preserveAspectRatio='none'%3E%3Cpath d='M0,60 L1200,8 V64 H0 Z' fill='%23fff'/%3E%3C/svg%3E") no-repeat 0 0/100% 64px}
.edge-bus::before{-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1200' height='64' preserveAspectRatio='none'%3E%3Cpath d='M0,44 H132 V24 H228 V44 H352 V12 H452 V44 H588 V30 H712 V44 H842 V16 H944 V44 H1074 V34 H1200 V64 H0 Z' fill='%23fff'/%3E%3C/svg%3E") no-repeat 0 0/100% 64px;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1200' height='64' preserveAspectRatio='none'%3E%3Cpath d='M0,44 H132 V24 H228 V44 H352 V12 H452 V44 H588 V30 H712 V44 H842 V16 H944 V44 H1074 V34 H1200 V64 H0 Z' fill='%23fff'/%3E%3C/svg%3E") no-repeat 0 0/100% 64px}
.edge-wave::after{background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1200' height='64' preserveAspectRatio='none'%3E%3Cpath d='M0,46 C176,8 316,60 512,30 S872,4 1046,36 S1150,52 1200,42' fill='none' stroke='%23ffffff' stroke-width='6'/%3E%3Cpath d='M0,46 C176,8 316,60 512,30 S872,4 1046,36 S1150,52 1200,42' fill='none' stroke='%236d818c' stroke-width='2.2'/%3E%3C/svg%3E") no-repeat 0 0/100% 64px}
.night.edge-wave::after,.ftr.edge-wave::after{background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1200' height='64' preserveAspectRatio='none'%3E%3Cpath d='M0,46 C176,8 316,60 512,30 S872,4 1046,36 S1150,52 1200,42' fill='none' stroke='%23061016' stroke-width='6'/%3E%3Cpath d='M0,46 C176,8 316,60 512,30 S872,4 1046,36 S1150,52 1200,42' fill='none' stroke='%23b8c6ce' stroke-width='2.2'/%3E%3C/svg%3E") no-repeat 0 0/100% 64px}
.edge-poly::after{background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1200' height='64' preserveAspectRatio='none'%3E%3Cpath d='M0,54 L152,18 L302,46 L452,10 L604,40 L754,14 L904,48 L1054,20 L1200,52' fill='none' stroke='%23ffffff' stroke-width='6'/%3E%3Cpath d='M0,54 L152,18 L302,46 L452,10 L604,40 L754,14 L904,48 L1054,20 L1200,52' fill='none' stroke='%236d818c' stroke-width='2.2'/%3E%3C/svg%3E") no-repeat 0 0/100% 64px}
.night.edge-poly::after,.ftr.edge-poly::after{background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1200' height='64' preserveAspectRatio='none'%3E%3Cpath d='M0,54 L152,18 L302,46 L452,10 L604,40 L754,14 L904,48 L1054,20 L1200,52' fill='none' stroke='%23061016' stroke-width='6'/%3E%3Cpath d='M0,54 L152,18 L302,46 L452,10 L604,40 L754,14 L904,48 L1054,20 L1200,52' fill='none' stroke='%23b8c6ce' stroke-width='2.2'/%3E%3C/svg%3E") no-repeat 0 0/100% 64px}
.edge-shear::after{background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1200' height='64' preserveAspectRatio='none'%3E%3Cpath d='M0,60 L1200,8' fill='none' stroke='%23ffffff' stroke-width='6'/%3E%3Cpath d='M0,60 L1200,8' fill='none' stroke='%236d818c' stroke-width='2.2'/%3E%3C/svg%3E") no-repeat 0 0/100% 64px}
.night.edge-shear::after,.ftr.edge-shear::after{background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1200' height='64' preserveAspectRatio='none'%3E%3Cpath d='M0,60 L1200,8' fill='none' stroke='%23061016' stroke-width='6'/%3E%3Cpath d='M0,60 L1200,8' fill='none' stroke='%23b8c6ce' stroke-width='2.2'/%3E%3C/svg%3E") no-repeat 0 0/100% 64px}
.edge-bus::after{background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1200' height='64' preserveAspectRatio='none'%3E%3Cpath d='M0,44 H132 V24 H228 V44 H352 V12 H452 V44 H588 V30 H712 V44 H842 V16 H944 V44 H1074 V34 H1200' fill='none' stroke='%23ffffff' stroke-width='6'/%3E%3Cpath d='M0,44 H132 V24 H228 V44 H352 V12 H452 V44 H588 V30 H712 V44 H842 V16 H944 V44 H1074 V34 H1200' fill='none' stroke='%236d818c' stroke-width='2.2'/%3E%3C/svg%3E") no-repeat 0 0/100% 64px}
.night.edge-bus::after,.ftr.edge-bus::after{background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1200' height='64' preserveAspectRatio='none'%3E%3Cpath d='M0,44 H132 V24 H228 V44 H352 V12 H452 V44 H588 V30 H712 V44 H842 V16 H944 V44 H1074 V34 H1200' fill='none' stroke='%23061016' stroke-width='6'/%3E%3Cpath d='M0,44 H132 V24 H228 V44 H352 V12 H452 V44 H588 V30 H712 V44 H842 V16 H944 V44 H1074 V34 H1200' fill='none' stroke='%23b8c6ce' stroke-width='2.2'/%3E%3C/svg%3E") no-repeat 0 0/100% 64px}
.ftr{position:relative}
.ftr .wrap{z-index:1}
/* the app frame, as ATLAS draws it */
.app{min-height:480px}
.app .col{display:flex;flex-direction:column;min-width:0}
.app .col .main-pane{flex:1}
.win>.app>.side{padding-top:16px}
/* a row carries a plain glyph, as the style guide rules: no tile, no colour disc */
.rg{display:grid;place-items:center;flex:none;width:22px;color:var(--faint)}
.rg .ic{width:17px;height:17px}
.stage .float .card-f{box-shadow:0 30px 60px -24px rgba(6,16,22,.45)}
@media (max-width:1500px){.stage .float.f1{left:-16px!important}.stage .float.f2{right:-16px!important}}
.stage{margin-bottom:110px}
.stage .float.f3{bottom:-26px!important;right:auto!important;left:50%;margin-left:-190px}
/* the ruler: a light-to-light seam drawn as an instrument scale, minor ticks every 12px, a major every 120px */
.edge-ruler{position:relative}
.edge-ruler::before{content:"";position:absolute;left:0;right:0;top:0;height:15px;pointer-events:none;border-top:1px solid var(--line2);
  background:repeating-linear-gradient(90deg,var(--steel-dim) 0 1px,transparent 1px 120px) 0 0/100% 14px no-repeat,
             repeating-linear-gradient(90deg,var(--line2) 0 1px,transparent 1px 12px) 0 0/100% 7px no-repeat;
  -webkit-mask:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);mask:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
/* the integrations strip: monogram, name, what it is for; grey until you look at it */
.lgs .mq-track{gap:0;animation-duration:70s}
.lgs.rev .mq-track{animation-duration:80s}
.lg{display:inline-flex;align-items:center;gap:12px;padding:14px 34px;border-right:1px solid var(--line);white-space:nowrap;filter:grayscale(1);opacity:.72;transition:opacity .25s,filter .25s}
.lg:hover{opacity:1;filter:none}
.lg i{font:600 13px/1 var(--fc);font-style:normal;letter-spacing:.02em;min-width:40px;height:40px;padding:0 8px;border-radius:11px;display:grid;place-items:center;color:var(--deep);background:var(--bg2);border:1px solid var(--line2)}
.lg:nth-child(5n+1) i{background:#e1eef6;border-color:#bfd9ea;color:#2b5f80}
.lg:nth-child(5n+2) i{background:#e3f5ec;border-color:#bfe6d4;color:#1f6e52}
.lg:nth-child(5n+3) i{background:#fbe7e1;border-color:#f3c9bc;color:#9c4430}
.lg:nth-child(5n+4) i{background:#fdf4d5;border-color:#f3e09b;color:#7a5c00}
.lg:nth-child(5n) i{background:#e6ebee;border-color:#bfced7;color:#3d4c56}
.lg b{display:block;font:500 16px/1.15 var(--fs);color:var(--ink)}
.lg em{display:block;margin-top:4px;font:500 10.5px/1 var(--fm);letter-spacing:.16em;text-transform:uppercase;color:var(--faint);font-style:normal}
.lgs{mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
@media (max-width:640px){.lg{padding:12px 22px}.lg b{font-size:14.5px}}
/* ---------- integrations: a dark ruled grid, crosses at the joins, cells that swap ---------- */
.lband{background:var(--deep);padding:64px 0 72px;border-top:1px solid rgba(191,206,215,.08);border-bottom:1px solid rgba(191,206,215,.08)}
.lband-h{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:28px}
.lband .kicker{color:var(--muted-dark)}
.lband .kicker .dot{background:rgba(255,255,255,.08);color:var(--steel-lift)}
.lband .link{color:#fff;border-bottom-color:rgba(191,206,215,.35);font-size:14.5px}
.lgrid{position:relative;display:grid;grid-template-columns:repeat(var(--cols),minmax(0,1fr));border:1px solid rgba(191,206,215,.12)}
.lc{position:relative;height:118px;overflow:hidden;border-right:1px solid rgba(191,206,215,.12);border-bottom:1px solid rgba(191,206,215,.12);background:#08141c;transition:background .3s}
.lc:nth-child(2n){background:#0b1a24}
.lgrid .lc:nth-child(5n){border-right:0}
.lgrid .lc:nth-child(n+6){border-bottom:0}
.lc:hover{background:#0f2230}
.wm{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:12px;transition:transform .6s var(--ease),opacity .6s var(--ease)}
.wm i{font:600 11px/1 var(--fc);font-style:normal;letter-spacing:.02em;min-width:30px;height:30px;padding:0 6px;border-radius:8px;display:grid;place-items:center;color:#fff;border:1.5px solid rgba(255,255,255,.85)}
.wm b{font:600 21px/1 var(--fc);color:#fff;letter-spacing:-.005em;white-space:nowrap}
.wm em{position:absolute;bottom:14px;left:0;right:0;text-align:center;font:500 10px/1 var(--fm);letter-spacing:.2em;text-transform:uppercase;color:var(--muted-dark);font-style:normal;opacity:0;transform:translateY(4px);transition:opacity .25s,transform .25s}
.lc:hover .wm em{opacity:1;transform:none}
.wm.out{transform:translateY(-100%);opacity:0}
.wm.in{transform:translateY(100%);opacity:0}
.plus{position:absolute;width:15px;height:15px;margin:-7.5px 0 0 -7.5px;pointer-events:none;z-index:2}
.plus::before,.plus::after{content:"";position:absolute;background:var(--body-dark)}
.plus::before{left:7px;top:0;width:1px;height:15px}
.plus::after{top:7px;left:0;height:1px;width:15px}
@media (max-width:980px){.lgrid{--cols:2!important}.plus{display:none}.lgrid .lc{border-right:1px solid rgba(191,206,215,.12);border-bottom:1px solid rgba(191,206,215,.12)}.lgrid .lc:nth-child(2n){border-right:0}.lc{height:92px}.wm b{font-size:17px}}
.wm .mk{width:26px;height:26px;color:#fff;flex:none}
.wm svg.ic.mk{stroke-width:1.8}

/* ---------- the blueprint hero ---------- */
.hero-bp{position:relative;background:var(--deep);color:var(--body-dark);overflow:hidden;padding:72px 0 0}
.hero-bp .wrap{z-index:1}
.bp-grid{position:absolute;inset:0;pointer-events:none;
  background-image:linear-gradient(rgba(142,166,180,.10) 1px,transparent 1px),linear-gradient(90deg,rgba(142,166,180,.10) 1px,transparent 1px),
                   linear-gradient(rgba(142,166,180,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(142,166,180,.045) 1px,transparent 1px);
  background-size:120px 120px,120px 120px,24px 24px,24px 24px;background-position:-1px -1px;
  -webkit-mask:radial-gradient(ellipse 80% 90% at 30% 40%,#000 30%,transparent 85%);mask:radial-gradient(ellipse 80% 90% at 30% 40%,#000 30%,transparent 85%)}
.bp{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:56px;align-items:center;min-height:540px}
.bp-tag{display:flex;flex-wrap:wrap;align-items:center;gap:0;margin:0 0 30px;font:500 11.5px/1 var(--fm);letter-spacing:.18em;text-transform:uppercase;color:var(--muted-dark)}
.bp-tag>*{padding:0 14px;border-left:1px solid rgba(191,206,215,.22)}
.bp-tag>*:first-child{padding-left:0;border-left:0;color:#fff}
.bp-tag a{display:inline-flex;align-items:center;gap:6px;color:var(--gold);letter-spacing:.12em}
.bp-tag a .ic{width:13px;height:13px;transition:transform .2s}
.bp-tag a:hover .ic{transform:translateX(3px)}
.bp-copy h1{font:600 clamp(48px,6.2vw,96px)/.94 var(--fc);letter-spacing:-.015em;color:#fff;max-width:11.5ch}
.bp-copy h1 em{font-style:normal;color:var(--steel);position:relative;white-space:nowrap}
.bp-copy h1 em::after{content:"";position:absolute;left:0;right:.12em;bottom:.02em;height:.07em;background:var(--gold);transform:scaleX(0);transform-origin:left;transition:transform 1s var(--ease) .6s}
.bp-copy h1.in em::after{transform:scaleX(1)}
.bp-copy .lead{color:var(--body-dark);margin-top:28px;max-width:46ch;font-size:clamp(17px,1.4vw,20px)}
.bp-copy .acts{margin-top:36px;gap:26px}
.tlink{display:inline-flex;align-items:center;gap:8px;font:500 16px/1 var(--fs);color:#fff;padding:6px 0;border-bottom:1px solid rgba(191,206,215,.35)}
.tlink .ic{width:16px;height:16px;transition:transform .2s}
.tlink:hover{border-bottom-color:#fff}.tlink:hover .ic{transform:translateX(3px)}

/* the record writing itself */
.ledger{background:rgba(8,20,28,.94);border:1px solid rgba(191,206,215,.16);border-radius:14px;overflow:hidden;font-size:13px}
.lg-h{display:flex;align-items:center;gap:12px;padding:14px 18px;border-bottom:1px solid rgba(191,206,215,.12);background:rgba(14,30,41,.9)}
.lg-k{font:500 10.5px/1 var(--fm);letter-spacing:.2em;text-transform:uppercase;color:var(--muted-dark)}
.lg-h b{font:500 14px/1.2 var(--fs);color:#fff;flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.live{display:inline-flex;align-items:center;gap:7px;font:500 10.5px/1 var(--fm);letter-spacing:.16em;text-transform:uppercase;color:var(--green)}
.live i{width:7px;height:7px;border-radius:50%;background:var(--green);animation:live 1.8s infinite}
@keyframes live{0%{box-shadow:0 0 0 0 rgba(79,184,148,.6)}70%{box-shadow:0 0 0 7px rgba(79,184,148,0)}100%{box-shadow:0 0 0 0 rgba(79,184,148,0)}}
.lg-rows{list-style:none;margin:0;padding:10px 0;position:relative}
.lg-rows::before{content:"";position:absolute;left:104px;top:22px;bottom:22px;width:1px;background:rgba(191,206,215,.14)}
.lg-rows li{display:grid;grid-template-columns:86px 96px minmax(0,1fr) 44px;gap:0 12px;align-items:baseline;padding:9px 18px;position:relative;transition:opacity .4s,transform .4s}
.lg-rows li::before{content:"";position:absolute;left:101px;top:15px;width:7px;height:7px;border-radius:50%;background:var(--c);box-shadow:0 0 0 3px #08141c}
.lg-rows time{font:400 11.5px/1.4 var(--fm);color:var(--muted-dark)}
.lg-m{font:500 10.5px/1.4 var(--fm);letter-spacing:.06em;color:var(--c);padding-left:12px}
.lg-t{color:#e6ebee;line-height:1.45;min-height:1.45em}
.lg-rows code{font:400 11px/1.4 var(--fm);color:var(--steel-dim);text-align:right}
.lg-rows li.wait{opacity:0;transform:translateY(6px)}
.lg-rows li.now .lg-t::after{content:"";display:inline-block;width:7px;height:1em;background:var(--steel);margin-left:3px;vertical-align:-2px;animation:blink 1s steps(1) infinite}
.lg-f{display:flex;justify-content:space-between;gap:12px;padding:12px 18px;border-top:1px solid rgba(191,206,215,.12);font:500 11px/1 var(--fm);letter-spacing:.08em;color:var(--muted-dark);transition:opacity .4s}
.lg-f span:first-child{display:inline-flex;align-items:center;gap:7px;color:var(--green);text-transform:uppercase;letter-spacing:.16em}
.lg-f .ic{width:14px;height:14px}
.ledger.writing .lg-f{opacity:0}

/* the drawing's title block */
.tblock{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));margin:64px 0 0;border:1px solid rgba(191,206,215,.16);border-bottom:0;background:rgba(6,16,22,.82)}
.tblock>div{padding:16px 18px 18px;border-right:1px solid rgba(191,206,215,.16)}
.tblock>div:last-child{border-right:0}
.tblock dt{font:500 10px/1 var(--fm);letter-spacing:.22em;text-transform:uppercase;color:var(--muted-dark)}
.tblock dd{margin:9px 0 0;font:500 14.5px/1.35 var(--fs);color:#fff}
@media (max-width:1100px){.bp{grid-template-columns:minmax(0,1fr);gap:40px;min-height:0}.bp-copy h1{max-width:none}.tblock{grid-template-columns:repeat(2,minmax(0,1fr))}.tblock>div{border-bottom:1px solid rgba(191,206,215,.16)}}
@media (max-width:640px){.hero-bp{padding-top:44px}.lg-rows li{grid-template-columns:70px minmax(0,1fr)}.lg-rows .lg-m,.lg-rows code,.lg-rows::before,.lg-rows li::before{display:none}.tblock{grid-template-columns:minmax(0,1fr)}}
/* menu tiles: quiet neutral square, the glyph in the module's own ink; centred */
.mi>span:not(.tile){display:block}
.mi b+span{display:block;font-size:13px;line-height:1.4;color:var(--muted);margin-top:2px}
.mi span.tile{display:grid}
.tile.soft{background:var(--bg2);border:1px solid var(--line);color:var(--fi,var(--ink))}
.mi .tile.soft{width:40px;height:40px;border-radius:11px}
.mi:hover .tile.soft{background:#fff;border-color:var(--line2)}
.mi .tile.soft .ic{width:19px;height:19px;stroke-width:1.8}
.crumb .tile.soft .ic{stroke-width:2}
.new{font:500 10.5px/1 var(--fs);letter-spacing:0;text-transform:none;color:#7a5c00;background:#fdf4d5;border:1px solid #f3e09b;padding:3px 7px}

/* ---------- the orbit hero: tools pulled into the ATLAS core ---------- */
.hero-orb{position:relative;background:radial-gradient(ellipse 70% 55% at 50% 62%,#0f2433 0%,var(--deep) 62%);color:var(--body-dark);overflow:hidden;padding:72px 0 0}
.hero-orb .wrap{z-index:1}
.ho-copy{text-align:center;max-width:900px;margin:0 auto}
.ho-copy .bp-tag{justify-content:center}
.ho-copy h1{font:600 clamp(48px,6.6vw,104px)/.95 var(--fc);letter-spacing:-.015em;color:#fff}
.ho-copy h1 .grad{background:linear-gradient(100deg,#b8c6ce 0%,#7fb8d4 45%,#4fb894 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.ho-copy .lead{color:var(--body-dark);margin:26px auto 0;max-width:56ch;font-size:clamp(17px,1.45vw,20px)}
.ho-copy .acts{justify-content:center;margin-top:34px;gap:26px}

.orbit{position:relative;width:min(760px,100%);aspect-ratio:1/0.9;margin:40px auto 0}
.o-ring{position:absolute;left:50%;top:50%;border-radius:50%;border:1px solid rgba(191,206,215,.14);translate:-50% -50%}
.o-r1{width:76%;aspect-ratio:1}
.o-r2{width:52%;aspect-ratio:1;border-style:dashed;border-color:rgba(191,206,215,.10)}
.o-r3{width:100%;aspect-ratio:1;border-color:rgba(191,206,215,.06)}
.o-spin{position:absolute;inset:0;animation:o-spin 140s linear infinite}
.oc{position:absolute;left:50%;top:50%;width:0;height:0;--r:min(282px,38vw);transform:rotate(var(--a)) translateX(var(--r)) rotate(calc(-1 * var(--a)));transition:transform 1.1s cubic-bezier(.6,0,.3,1),opacity .5s}
.ocb{position:absolute;left:0;top:0;translate:-50% -50%;display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 16px;border-radius:999px;white-space:nowrap;font:500 14px/1 var(--fs);color:var(--muted-dark);background:rgba(10,23,32,.86);border:1px solid rgba(191,206,215,.16);box-shadow:0 10px 30px -14px rgba(0,0,0,.8);animation:o-spin 140s linear infinite reverse;transition:color .4s,border-color .4s,background .4s}
.ocb s{text-decoration:line-through;text-decoration-color:rgba(224,120,95,.0);transition:text-decoration-color .4s}
.oc.doomed .ocb s{text-decoration-color:rgba(224,120,95,.9)}
.oc.eat{--r:0px;opacity:0}
.oc.atlas .ocb{color:#fff;border-color:var(--c);background:rgba(14,30,41,.95)}
.oc.atlas .ocb::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--c);box-shadow:0 0 10px var(--c)}
.oc.atlas .ocb s{text-decoration:none}
@keyframes o-spin{to{rotate:360deg}}

.core{position:absolute;left:50%;top:50%;width:min(230px,34vw);aspect-ratio:1;translate:-50% -50%}
.c-glow{position:absolute;inset:-14%;border-radius:50%;background:conic-gradient(from 0deg,#3f7ea6,#7fb8d4,#4fb894,#8ea6b4,#3f7ea6);filter:blur(22px);opacity:.75;animation:o-spin 9s linear infinite;transition:opacity .4s,scale .5s var(--ease)}
.c-glow::after{content:"";position:absolute;inset:16%;border-radius:50%;background:var(--deep)}
.core.hit .c-glow{opacity:1;scale:1.12}
.c-disc{position:absolute;inset:0;border-radius:50%;background:radial-gradient(circle at 50% 35%,#12293a,#061016 70%);border:1px solid rgba(127,184,212,.45);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;overflow:hidden;box-shadow:inset 0 0 40px rgba(127,184,212,.15)}
.c-disc::before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(142,166,180,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(142,166,180,.08) 1px,transparent 1px);background-size:16px 16px;border-radius:50%}
.c-mark{position:relative;width:30%;height:auto;fill:none;stroke:#fff;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;transition:scale .4s var(--ease)}
.core.hit .c-mark{scale:1.08}
.c-k{position:relative;font:500 10px/1 var(--fm);letter-spacing:.24em;text-transform:uppercase;color:var(--muted-dark);margin-top:4px}
.c-disc b{position:relative;font:600 clamp(14px,1.5vw,18px)/1.1 var(--fc);color:#fff;text-align:center;padding:0 14px;transition:opacity .3s}
.c-disc b.swap{opacity:0}
.o-count{text-align:center;margin:22px 0 0;font:500 12px/1 var(--fm);letter-spacing:.18em;text-transform:uppercase;color:var(--muted-dark)}
.o-count b{color:#fff;font-weight:600}
.hero-orb .tblock{margin-top:56px}
@media (max-width:760px){.orbit{aspect-ratio:1/1.05}.oc{--r:39vw}.ocb{height:32px;padding:0 11px;font-size:12px}.core{width:36vw}}
@media (prefers-reduced-motion:reduce){.o-spin,.ocb,.c-glow{animation:none}}

/* ==========================================================================================
   v4: editorial serif headlines, floating nav, the record hero, diagrams, colour-blocked cards,
   a tabbed showcase, the route ribbon. Brand palette and IBM Plex throughout.
   ========================================================================================== */
:root{--fserif:"IBM Plex Serif",Georgia,serif}
h1,h2,.h-xl,.h-l,.h-m,.page-hero h1,.cta h2,.sec-head h2{font-family:var(--fserif);font-weight:500;letter-spacing:-.025em}
.page-hero h1{font-weight:500}
.grad{color:var(--blue)}
.night .grad,.hero-dark .grad{color:var(--steel)}

/* the floating nav (Rigakvest): a rounded bar inset from the edges */
.hdr{top:10px;background:transparent!important;border-bottom:0!important;backdrop-filter:none;-webkit-backdrop-filter:none;pointer-events:none}
.hdr .wrap{pointer-events:auto;height:62px;margin-top:10px;background:rgba(255,255,255,.86);backdrop-filter:saturate(1.4) blur(14px);-webkit-backdrop-filter:saturate(1.4) blur(14px);border:1px solid var(--line);border-radius:18px;padding:0 10px 0 18px;box-shadow:0 10px 30px -18px rgba(6,16,22,.25);max-width:calc(var(--wrap) + 24px)}
.hdr.scrolled .wrap{background:rgba(255,255,255,.94)}
.hdr-cta .btn{border-radius:12px}
.mega-wrap{padding-top:16px}
@media (max-width:1100px){.mnav{inset:86px 10px auto;border:1px solid var(--line);border-radius:18px;max-height:calc(100vh - 100px);box-shadow:var(--sh2)}}

/* tags (Synthesized / Jasper): a bordered mono label, or a marker highlight */
.tag2{display:inline-flex;align-items:center;height:26px;padding:0 10px;border:1px solid var(--ink);border-radius:6px;font:500 11px/1 var(--fm);letter-spacing:.14em;text-transform:uppercase;color:var(--ink);background:#fff}
.tag2.hl{border-color:transparent;background:linear-gradient(transparent 18%,#fbe9a6 18%,#fbe9a6 82%,transparent 82%);padding:0 6px;border-radius:2px}
.night .tag2,.lband .tag2{color:#fff;border-color:rgba(255,255,255,.6);background:transparent}
.kicker .dot{display:none}
.kicker{font:500 11px/1 var(--fm);letter-spacing:.14em}
.h2wrap{max-width:820px}
.h2wrap.c{margin:0 auto;text-align:center}
.h2wrap h2{font-size:clamp(34px,4.4vw,60px);line-height:1.04;margin-top:20px}
.h2wrap .lead{margin-top:18px}
.h2wrap.c .lead{margin-left:auto;margin-right:auto}
.btn.rnd{border-radius:999px}
.btn-p.rnd{padding:0 24px}

/* ---------- hero ---------- */
.hx{position:relative;padding:150px 0 40px;overflow:hidden;background:radial-gradient(ellipse 60% 50% at 50% 0%,#eaf2f7 0%,#fff 70%)}
.hx-copy{text-align:center;max-width:1260px}
.hx-copy h1{font-size:clamp(42px,5.5vw,92px);line-height:.98;margin-top:26px;color:var(--ink)}
.hx-copy h1 em{font-style:italic;color:var(--blue)}
.hx-copy .lead{margin:28px auto 0;max-width:62ch;font-size:clamp(17px,1.45vw,20px)}
.hx-copy .acts{justify-content:center;margin-top:34px}
.stage2{position:relative;margin-top:60px;border-radius:28px;background:radial-gradient(ellipse 70% 80% at 30% 60%,#0f2433 0%,#061016 70%);overflow:hidden;min-height:540px;box-shadow:0 50px 120px -50px rgba(6,16,22,.6)}
.cols{position:absolute;inset:0;pointer-events:none}
.cols i{position:absolute;bottom:0;width:3.2%;background:linear-gradient(to top,rgba(127,184,212,.0),rgba(127,184,212,.22) 55%,rgba(184,198,206,.35));border-top:1px solid rgba(207,227,240,.45);transform-origin:bottom;animation:col-in 1.4s var(--ease) both,col-breathe 7s ease-in-out 1.6s infinite alternate}
.cols i:nth-child(2n){background:linear-gradient(to top,rgba(79,184,148,0),rgba(79,184,148,.16) 60%,rgba(79,184,148,.3))}
@keyframes col-in{from{transform:scaleY(0)}}
@keyframes col-breathe{to{transform:scaleY(.86)}}
.st2-grid{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,.9fr) 120px minmax(0,1.1fr);align-items:center;gap:0;padding:40px 64px 30px;min-height:540px}
.st2-bot{min-height:440px}
.st2-bot.is-3d{height:460px}
.st2-bot .login-bot{height:380px}
.wire{width:100%;height:60px;overflow:visible}
.wire path{fill:none;stroke:rgba(127,184,212,.75);stroke-width:1.5;vector-effect:non-scaling-stroke;stroke-dasharray:4 5;animation:dash 1.2s linear infinite}
.st2-cap{position:absolute;left:64px;bottom:18px;z-index:2;display:flex;align-items:center;gap:7px;margin:0;font:500 11px/1 var(--fm);letter-spacing:.12em;text-transform:uppercase;color:var(--muted-dark)}
.st2-cap .ic{width:13px;height:13px}

/* the record stack (Argyle) */
.rstack{position:relative}
.rs-tabs{display:flex;flex-direction:column;align-items:center}
.rs-tab{display:flex;align-items:center;justify-content:center;gap:8px;height:40px;border:1px solid rgba(207,227,240,.18);border-bottom:0;border-radius:14px 14px 0 0;background:rgba(14,30,41,.94);color:var(--muted-dark);font:500 13.5px/1 var(--fs);cursor:pointer;transition:color .3s,background .3s;width:calc(100% - var(--k,0) * 22px)}
.rs-tab:nth-child(1){--k:4}.rs-tab:nth-child(2){--k:3}.rs-tab:nth-child(3){--k:2}.rs-tab:nth-child(4){--k:1}.rs-tab:nth-child(5){--k:0}
.rs-tab .ic{width:15px;height:15px}
.rs-tab.on{color:#fff;background:rgba(20,48,66,.98)}
.rs-tab.on .ic{color:var(--c)}
.rs-body{position:relative;background:#fff;border-radius:0 0 16px 16px;min-height:208px;box-shadow:0 30px 60px -30px rgba(0,0,0,.7)}
.rs-card{position:absolute;inset:0;padding:22px 24px;opacity:0;transform:translateY(8px);transition:opacity .45s var(--ease),transform .45s var(--ease)}
.rs-card.on{opacity:1;transform:none}
.rs-h{display:flex;align-items:center;gap:10px}
.rs-h span{width:30px;height:30px;border-radius:9px;display:grid;place-items:center;background:var(--s);color:var(--i)}
.rs-h span .ic{width:16px;height:16px}
.rs-h b{font:600 16px/1.2 var(--fs);color:var(--ink)}
.rs-chips{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:18px}
.chip2{display:flex;align-items:baseline;justify-content:space-between;gap:10px;padding:10px 12px;border-radius:10px;background:var(--s);font-size:13px}
.chip2 em{font-style:normal;color:var(--muted)}
.chip2 b{font:600 15px/1.1 var(--fc);color:var(--ink);white-space:nowrap}
.rs-foot{display:flex;align-items:center;gap:8px;margin:14px 0 0;font:500 11px/1 var(--fm);letter-spacing:.1em;text-transform:uppercase;color:var(--muted-dark)}
.rs-foot i{width:7px;height:7px;border-radius:50%;background:var(--green);animation:live 1.8s infinite}

/* ---------- process line + stat band (Synthesized) ---------- */
.pline{position:relative;display:grid;grid-template-columns:110px repeat(5,minmax(0,1fr)) 110px;gap:18px;margin-top:64px}
.pline::before{content:"";position:absolute;left:55px;right:55px;top:22px;height:1px;background:var(--ink)}
.pn{position:relative;text-align:left}
.pn.start,.pn.end{text-align:center}
.pc{position:relative;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:var(--deep);color:#fff;margin-bottom:14px}
.pn.start .pc,.pn.end .pc{margin:0 auto 14px}
.pn.end .pc{background:#fff;color:var(--ink);border:1.5px solid var(--ink)}
.pc .ic{width:18px;height:18px}
.pc i{position:absolute;top:-6px;right:-6px;width:20px;height:20px;border-radius:50%;background:var(--coral);color:#fff;display:grid;place-items:center}
.pc i .ic{width:11px;height:11px;stroke-width:3}
.pn b{display:block;font:500 17px/1.25 var(--fs);color:var(--ink)}
.pn p{margin-top:6px;font-size:14px;line-height:1.5;color:var(--muted)}
.sband{display:grid;grid-template-columns:1fr 1fr;margin-top:48px;background:var(--deep);border-radius:18px;overflow:hidden}
.sband>div{display:flex;align-items:center;gap:22px;padding:30px 34px}
.sband>div+div{border-left:1px solid rgba(191,206,215,.14)}
.sband b{font:600 clamp(48px,5vw,72px)/1 var(--fc);color:var(--green);letter-spacing:-.02em;white-space:nowrap}
.sband span{color:#e6ebee;font-size:16.5px;line-height:1.45;max-width:36ch}

/* ---------- system diagram (Synthesized) ---------- */
.arch{max-width:980px;margin:56px auto 0}
.arow{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.abox{background:#fff;border:1px solid var(--ink);border-radius:12px;padding:16px 18px}
.abox b{display:block;font:500 17px/1.2 var(--fs);color:var(--ink)}
.abox span{display:block;margin-top:5px;font-size:13.5px;color:var(--muted)}
.aline{position:relative;height:56px;display:flex;align-items:center;justify-content:center}
.aline i{position:absolute;left:50%;top:6px;bottom:6px;width:1px;background:var(--ink)}
.aline i::after{content:"";position:absolute;top:-1px;left:-4px;border:4.5px solid transparent;border-bottom:7px solid var(--ink);border-top:0}
.aline span{position:relative;margin-left:180px;font:500 11px/1 var(--fm);letter-spacing:.12em;color:var(--muted)}
.acore{background:var(--deep);border-radius:16px;padding:22px 26px;color:#e6ebee}
.ak{margin:0;font:500 12px/1 var(--fm);letter-spacing:.14em;color:var(--green)}
.asteps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin-top:18px}
.asteps b{display:flex;align-items:baseline;gap:8px;font:500 19px/1.2 var(--fs);color:#fff}
.asteps b em{font-style:normal;font:500 13px/1 var(--fm);color:var(--steel)}
.asteps span{display:block;margin-top:5px;font-size:13.5px;color:var(--muted-dark)}
.af{margin:20px 0 0;padding-top:14px;border-top:1px solid rgba(191,206,215,.14);font:500 11px/1.5 var(--fm);letter-spacing:.12em;color:var(--muted-dark)}
.anote{margin:16px 0 0;font:500 11px/1.5 var(--fm);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}

/* ---------- colour-blocked module cards (Jasper) ---------- */
.mcards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:56px}
.mcard2{display:flex;flex-direction:column;background:var(--s);border-radius:18px;overflow:hidden;transition:transform .35s var(--ease),box-shadow .35s}
.mcard2:hover{transform:translateY(-4px);box-shadow:0 30px 60px -30px rgba(6,16,22,.35)}
.mcard2 h3{font:500 26px/1.1 var(--fserif);letter-spacing:-.02em;color:var(--ink);padding:22px 24px 0}
.mc-viz{position:relative;height:210px;margin:16px 0 0;background-image:linear-gradient(color-mix(in oklab,var(--c) 26%,transparent) 1px,transparent 1px),linear-gradient(90deg,color-mix(in oklab,var(--c) 26%,transparent) 1px,transparent 1px);background-size:22px 22px;border-top:1px solid color-mix(in oklab,var(--c) 30%,transparent);border-bottom:1px solid color-mix(in oklab,var(--c) 30%,transparent);display:grid;place-items:center;overflow:hidden}
.mc-f{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;padding:18px 24px 22px}
.mc-f p{font-size:14.5px;line-height:1.5;color:var(--ink2)}
.mc-f span{flex:none;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;border:1px solid var(--ink);color:var(--ink);transition:background .25s,color .25s}
.mc-f .ic{width:16px;height:16px}
.mcard2:hover .mc-f span{background:var(--ink);color:#fff}
/* duotone mini visuals, drawn in the card's ink */
.mv{position:relative;color:var(--i)}
.mv i{display:block;height:6px;border-radius:3px;background:color-mix(in oklab,var(--i) 30%,transparent);margin:6px 0}
.mv-doc{background:#fff;border:1.5px solid var(--i);border-radius:8px;padding:12px 14px;width:170px;box-shadow:6px 6px 0 color-mix(in oklab,var(--i) 25%,transparent)}
.mv-doc b{font:700 11px/1 var(--fm);letter-spacing:.06em;color:var(--i)}
.mv-list{width:230px;background:#fff;border:1.5px solid var(--i);border-radius:10px;padding:10px;box-shadow:6px 6px 0 color-mix(in oklab,var(--i) 25%,transparent)}
.mv-h{display:flex;gap:6px;margin-bottom:6px}.mv-h b{height:8px;width:40%;border-radius:4px;background:var(--i)}.mv-h u{height:8px;width:18%;border-radius:4px;background:color-mix(in oklab,var(--i) 35%,transparent)}
.mv-r{display:grid;grid-template-columns:24px 1fr 12px;align-items:center;gap:8px;padding:5px 0;border-top:1px solid color-mix(in oklab,var(--i) 20%,transparent)}
.mv-r s{text-decoration:none;font:700 9px/1 var(--fm);color:#fff;background:var(--i);border-radius:4px;padding:3px 0;text-align:center}
.mv-r i{margin:0}.mv-r em{width:10px;height:10px;border-radius:50%;border:1.5px solid var(--i)}
.mv-tag{display:grid;place-items:center}
.mv-label{background:#fff;border:1.5px solid var(--i);border-radius:8px;padding:12px 14px;width:200px;box-shadow:6px 6px 0 color-mix(in oklab,var(--i) 25%,transparent)}
.mv-label span{font:700 13px/1 var(--fm);color:var(--i)}
.mv-label .bars{display:flex;gap:2px;height:34px;margin:10px 0 8px}
.mv-label .bars i{flex:1;height:100%;margin:0;border-radius:0;background:transparent}.mv-label .bars i.k{background:var(--i)}
.mv-label small{font:500 10px/1 var(--fm);color:var(--i);opacity:.8}
.mv-scan{position:absolute;left:-14px;right:-14px;top:50%;height:2px;background:var(--i);box-shadow:0 0 12px var(--i);animation:scanl 2.2s ease-in-out infinite alternate}
.mv-po{display:grid;place-items:center}
.mv-tot{display:flex;justify-content:space-between;align-items:center;margin-top:8px;padding-top:8px;border-top:1.5px dashed color-mix(in oklab,var(--i) 40%,transparent)}
.mv-tot strong{font:700 13px/1 var(--fc);color:var(--i)}
.mv-stamp{position:absolute;right:-34px;top:-10px;display:flex;align-items:center;gap:4px;padding:6px 10px;border:2px solid var(--i);border-radius:6px;font:700 11px/1 var(--fm);letter-spacing:.08em;text-transform:uppercase;color:var(--i);background:color-mix(in oklab,var(--s) 70%,#fff);transform:rotate(-8deg)}
.mv-stamp .ic{width:12px;height:12px;stroke-width:3}
.mv-doc2{display:flex;align-items:center;gap:14px}
.mv-doc2 p{margin:8px 0;font:600 12px/1 var(--fs);color:var(--i)}
.mv-doc2 .d{text-decoration:line-through;opacity:.55;margin-right:5px}
.mv-doc2 .a{background:color-mix(in oklab,var(--i) 18%,transparent);padding:1px 4px;border-radius:3px;margin-right:4px}
.mv-cal{width:74px;background:#fff;border:1.5px solid var(--i);border-radius:10px;text-align:center;padding:8px 0;box-shadow:5px 5px 0 color-mix(in oklab,var(--i) 25%,transparent)}
.mv-cal span{font:700 9px/1 var(--fm);letter-spacing:.1em;text-transform:uppercase;color:var(--i)}
.mv-cal b{display:block;font:700 30px/1 var(--fc);color:var(--i);margin:4px 0}
.mv-cal small{font:500 10px/1 var(--fm);color:var(--i)}
.mv-apps{display:grid;grid-template-columns:repeat(3,64px);gap:10px}
.mv-apps div{background:#fff;border:1.5px solid var(--i);border-radius:10px;height:62px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px}
.mv-apps div i{width:22px;height:22px;border-radius:7px;margin:0;background:var(--i)}
.mv-apps div span{font:600 9px/1 var(--fs);color:var(--i)}
.mv-apps div.warn{border-style:dashed}.mv-apps div.warn i{background:transparent;border:1.5px dashed var(--i)}
.mv-ocr{display:flex;align-items:center;gap:14px}
.mv-ocr .box{margin:6px 0;padding:2px 4px;border:1.5px solid var(--i);border-radius:4px;font:600 10px/1.3 var(--fs);color:var(--i);background:color-mix(in oklab,var(--i) 10%,transparent)}
.mv-ocr .box.r{text-align:right}
.mv-fields{display:grid;gap:6px}
.mv-fields div{display:flex;justify-content:space-between;gap:10px;width:120px;background:#fff;border:1.5px solid var(--i);border-radius:7px;padding:6px 8px;font-size:10.5px;color:var(--i)}
.mv-fields b{font:700 10.5px/1 var(--fm)}

/* ---------- tabbed showcase (Synthesized) ---------- */
.xtabs{margin-top:36px}
.xt-tabs{justify-content:flex-start;margin-top:0}
.xt-tabs .mtab{height:36px;border-radius:7px;border:1px solid var(--ink);background:#fff;font:500 12px/1 var(--fm);letter-spacing:.1em;text-transform:uppercase;color:var(--ink);padding:0 14px}
.xt-tabs .mtab.on{background:var(--ink);color:#fff;border-color:var(--ink)}
.xt-tabs .mtab .prog{background:var(--green)}
.xtabs .mpanels{margin-top:18px}
.xpanel{background:var(--deep);border-radius:20px;padding:30px;grid-template-columns:minmax(0,.75fr) minmax(0,1.25fr);gap:30px}
.xp-t{padding:10px 6px}
.xp-t h3{font:500 clamp(26px,2.6vw,36px)/1.12 var(--fserif);color:#fff;letter-spacing:-.02em}
.xticks{list-style:none;margin:22px 0 28px;padding:0;display:grid;gap:12px}
.xticks li{display:flex;gap:10px;align-items:flex-start;color:#e6ebee;font-size:15.5px;line-height:1.45}
.xticks .ic{flex:none;width:20px;height:20px;padding:4px;border-radius:50%;background:var(--green);color:var(--deep);stroke-width:3;margin-top:1px}
.xp-v{position:relative;border-radius:14px;padding:28px 0 28px 28px;background:linear-gradient(135deg,color-mix(in oklab,var(--c) 70%,#fff),var(--c));overflow:hidden;min-height:420px}
.xp-main{width:118%;transform-origin:top left}
.xp-main .win{box-shadow:0 30px 60px -20px rgba(6,16,22,.55)}
.xp-float{position:absolute;right:18px;bottom:18px;z-index:2}
.xp-float .phone{width:200px;transform:scale(.9);transform-origin:bottom right}
.xp-float .card-f{box-shadow:0 24px 50px -16px rgba(6,16,22,.55)}

/* ---------- the route (Rigakvest) ---------- */
.route{position:relative;margin-top:44px;height:900px;border-radius:28px;background:var(--bg2);overflow:hidden}
.rpath{position:absolute;inset:0;width:100%;height:100%}
.rpath path{fill:none;stroke-linecap:round;vector-effect:non-scaling-stroke}
.rp-bg{stroke:#fff;stroke-width:34;filter:drop-shadow(0 10px 18px rgba(6,16,22,.08))}
.rp-fg{stroke:var(--blue);stroke-width:3;stroke-dasharray:9 10;opacity:.85}
.rpin{position:absolute;translate:-22px -22px;display:flex;align-items:flex-start;gap:14px;z-index:1}
.rpin>i{flex:none;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:var(--c);color:#fff;font:600 13px/1 var(--fm);font-style:normal;box-shadow:0 0 0 6px #fff,0 10px 24px -8px rgba(6,16,22,.4)}
.rcard{width:250px;background:#fff;border:1px solid var(--line);border-radius:14px;padding:14px 16px;box-shadow:0 18px 40px -24px rgba(6,16,22,.35);opacity:0;transform:translateY(10px);transition:opacity .6s var(--ease),transform .6s var(--ease)}
.rpin.lit .rcard{opacity:1;transform:none}
.rpin>i{transform:scale(.5);opacity:0;transition:transform .5s var(--ease),opacity .5s}
.rpin.lit>i{transform:none;opacity:1}
.rcard b{display:block;font:500 17px/1.2 var(--fserif);color:var(--ink)}
.rcard p{margin-top:6px;font-size:13.5px;line-height:1.5;color:var(--muted)}

/* ---------- facts mosaic (Jasper) ---------- */
.mosaic{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:190px;gap:12px;margin-top:52px}
.mo{background:var(--s);border-radius:16px;padding:22px;display:flex;flex-direction:column;justify-content:space-between}
.mo.b{grid-column:span 1}
.mo .num{font:500 clamp(40px,4vw,58px)/1 var(--fserif);color:var(--ink);letter-spacing:-.03em}
.mo span{font-size:14.5px;color:var(--ink2);line-height:1.45}
.mo.dark{background:var(--deep);grid-row:span 2;grid-column:span 2;position:relative;overflow:hidden;justify-content:flex-end}
.mo.dark p{position:relative;color:#e6ebee;font:400 clamp(19px,1.8vw,24px)/1.35 var(--fserif);max-width:30ch}
.mo.dark .tlink{position:relative;margin-top:16px;align-self:flex-start}
.mo-bot{position:absolute;right:-10px;top:10px;width:220px;opacity:.95}
.mo-bot .login-bot{width:100%;height:auto}

/* ---------- deploy cards (Argyle) ---------- */
.dcards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-top:52px}
.dcard{background:var(--deep);border-radius:18px;padding:26px;min-height:250px;display:flex;flex-direction:column;transition:transform .3s var(--ease)}
.dcard:hover{transform:translateY(-4px)}
.dcard span{width:40px;height:40px;border-radius:10px;border:1px solid rgba(191,206,215,.25);display:grid;place-items:center;color:var(--steel-lift)}
.dcard span .ic{width:19px;height:19px}
.dcard h3{margin-top:auto;font:500 23px/1.15 var(--fserif);color:#fff;letter-spacing:-.015em}
.dcard p{margin-top:10px;font-size:14.5px;line-height:1.5;color:var(--muted-dark)}

/* CTA band: serif */
.cta h2{font-weight:500}

/* ---------- responsive ---------- */
@media (max-width:1100px){
  .st2-grid{grid-template-columns:minmax(0,1fr);padding:30px 24px 50px}
  .wire{display:none}
  .st2-bot,.st2-bot.is-3d{height:340px;min-height:0}
  .pline{grid-template-columns:repeat(3,minmax(0,1fr));row-gap:34px}
  .pline::before{display:none}
  .pn.start,.pn.end{text-align:left}.pn.start .pc,.pn.end .pc{margin:0 0 14px}
  .xpanel{grid-template-columns:minmax(0,1fr)}
  .mosaic{grid-template-columns:repeat(2,minmax(0,1fr))}
  .dcards{grid-template-columns:repeat(2,minmax(0,1fr))}
  .route{height:auto;padding:30px 20px;display:grid;gap:18px}
  .rpath{display:none}
  .rpin{position:relative;left:auto!important;top:auto!important;translate:none}
  .rcard{width:auto;flex:1;opacity:1;transform:none}
  .rpin>i{opacity:1;transform:none}
}
@media (max-width:760px){
  .hx{padding-top:120px}
  .mcards,.arow,.asteps,.sband,.dcards,.mosaic{grid-template-columns:minmax(0,1fr)}
  .sband>div+div{border-left:0;border-top:1px solid rgba(191,206,215,.14)}
  .mo.dark{grid-column:span 1}
  .aline span{margin-left:0;padding:0 8px;background:var(--bg2)}
  .pline{grid-template-columns:minmax(0,1fr)}
  .xp-main{width:100%}
  .xp-float{display:none}
  .rs-chips{grid-template-columns:minmax(0,1fr)}
  .stage2{border-radius:20px}
}
.rpin.left{flex-direction:row-reverse;translate:calc(-100% + 22px) -22px}
@media (max-width:1100px){.rpin.left{flex-direction:row;translate:none}}
/* the broken hand-off line: a break at every join, a dot that keeps stalling */
.pline{grid-template-columns:110px repeat(6,minmax(0,1fr)) 110px;gap:16px}
.pline::before{background:linear-gradient(90deg,var(--ink) 0 100%);height:1px}
.pn:not(.start)::before{content:"";position:absolute;left:-14px;top:14px;width:12px;height:16px;z-index:1;background:linear-gradient(115deg,transparent 0 30%,var(--coral) 30% 42%,transparent 42% 58%,var(--coral) 58% 70%,transparent 70%),#fff}
.pline::after{content:'';position:absolute;top:18px;left:51px;width:9px;height:9px;border-radius:50%;background:var(--blue);box-shadow:0 0 0 4px rgba(63,126,166,.18);z-index:2;animation:handoff 9s cubic-bezier(.5,0,.5,1) infinite}
@keyframes handoff{
  0%{left:51px;opacity:0}5%{opacity:1}
  14%,20%{left:calc(51px + (100% - 110px) * 1 / 7)}
  32%,40%{left:calc(51px + (100% - 110px) * 2 / 7)}
  54%{left:calc(51px + (100% - 110px) * 3 / 7);opacity:1}
  62%,100%{left:calc(51px + (100% - 110px) * 3.3 / 7);opacity:0}}

.pn.more .pc{background:#fff;color:var(--ink);border:1.5px dashed var(--ink);font:600 13px/1 var(--fm)}
.pn p{max-width:22ch}
/* the stat band */
.sband>div{padding:34px 40px;gap:28px}
.sband b{display:flex;align-items:baseline;gap:12px;min-width:150px}
.sband b s{color:rgba(230,235,238,.35);text-decoration-thickness:3px;text-decoration-color:var(--coral)}
.sband b i{font-style:normal;font-size:.55em;color:rgba(230,235,238,.45)}
.sband span em{display:block;margin-bottom:8px;font:500 11px/1 var(--fm);letter-spacing:.16em;text-transform:uppercase;font-style:normal;color:var(--green)}
@media (max-width:1100px){.pn:not(.start)::before,.pline::after{display:none}.pline{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:760px){.pline{grid-template-columns:minmax(0,1fr)}}

/* ---------- the data-flow diagram ---------- */
.flow{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr) minmax(0,1fr);gap:clamp(40px,7vw,110px);align-items:center;margin-top:56px;padding:44px clamp(24px,4vw,56px);border-radius:28px;background:radial-gradient(ellipse 60% 70% at 50% 50%,#10283a 0%,#061016 72%);overflow:hidden}
.flow::before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(142,166,180,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(142,166,180,.06) 1px,transparent 1px);background-size:32px 32px;pointer-events:none}
.fl-wires{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:1;overflow:visible}
.fl-wires path{fill:none;stroke:rgba(127,184,212,.22);stroke-width:1.5}
.fl-wires path.hot{stroke:rgba(127,184,212,.6)}
.fl-wires circle{fill:#bfe6f5;filter:drop-shadow(0 0 6px #7fb8d4)}
.fl-col,.fl-core{position:relative;z-index:2}
.fl-k{margin:0 0 14px;font:500 11px/1 var(--fm);letter-spacing:.16em;text-transform:uppercase;color:var(--muted-dark)}
.fl-col{display:grid;gap:12px}
.fl-node{display:flex;align-items:center;gap:12px;padding:13px 14px;border-radius:14px;background:rgba(14,30,41,.92);border:1px solid rgba(191,206,215,.14);transition:border-color .35s,background .35s,transform .35s}
.fl-node.ping{border-color:#7fb8d4;background:rgba(20,48,66,.98);transform:translateX(var(--nudge,0))}
.fl-people .fl-node.ping{--nudge:4px}.fl-systems .fl-node.ping{--nudge:-4px}
.fl-node>span{flex:none;width:36px;height:36px;border-radius:10px;display:grid;place-items:center;background:rgba(255,255,255,.06);color:var(--steel-lift)}
.fl-node>span .ic{width:18px;height:18px}
.fl-node b{display:block;font:500 15.5px/1.2 var(--fs);color:#fff}
.fl-node em{display:block;margin-top:3px;font-style:normal;font-size:12.5px;color:var(--muted-dark)}
.fl-core{background:linear-gradient(180deg,rgba(20,48,66,.96),rgba(10,23,32,.98));border:1px solid rgba(127,184,212,.35);border-radius:20px;padding:22px 22px 18px;box-shadow:0 0 0 6px rgba(127,184,212,.05),0 40px 80px -30px rgba(0,0,0,.8)}
.fl-core .fl-k{color:var(--green)}
.fl-steps{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.fl-step{display:flex;gap:10px;align-items:flex-start;padding:11px 12px;border-radius:12px;border:1px solid rgba(191,206,215,.1);background:rgba(255,255,255,.02);transition:background .35s,border-color .35s}
.fl-step i{font:500 11px/1.6 var(--fm);font-style:normal;color:var(--muted-dark)}
.fl-step b{display:block;font:500 15px/1.2 var(--fs);color:#e6ebee}
.fl-step em{display:block;margin-top:3px;font-style:normal;font-size:12px;color:var(--muted-dark)}
.fl-step.on{background:rgba(79,184,148,.12);border-color:rgba(79,184,148,.55)}
.fl-step.on i{color:var(--green)}.fl-step.on b{color:#fff}
.fl-log{list-style:none;margin:14px 0 0;padding:10px 12px;border-radius:12px;background:rgba(6,16,22,.7);border:1px solid rgba(191,206,215,.08);height:94px;overflow:hidden;font:400 12px/1.55 var(--fm);color:var(--muted-dark)}
.fl-log li{display:flex;gap:8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;animation:logIn .5s var(--ease)}
.fl-log li::before{content:"›";color:var(--green)}
.fl-log li:first-child{color:#e6ebee}
@keyframes logIn{from{opacity:0;transform:translateY(-6px)}}
.fl-f{margin:14px 0 0;font:500 10.5px/1.5 var(--fm);letter-spacing:.12em;text-transform:uppercase;color:var(--muted-dark)}
.anote.c{text-align:center}
@media (max-width:1100px){.flow{grid-template-columns:minmax(0,1fr);gap:28px}.fl-wires{display:none}.fl-col{grid-template-columns:repeat(2,minmax(0,1fr))}.fl-k{grid-column:1/-1}}
@media (max-width:640px){.fl-col,.fl-steps{grid-template-columns:minmax(0,1fr)}}

/* ---------- the numbers mosaic ---------- */
.mosaic{grid-auto-rows:230px}
.mo{position:relative;overflow:hidden}
.mo-v{position:absolute;right:18px;top:18px;color:var(--i)}
.mo-sq{display:grid;grid-template-columns:repeat(4,14px);gap:5px}
.mo-sq i{width:14px;height:14px;border-radius:4px;border:1.5px solid var(--i);animation:sqOn 4.8s infinite}
@keyframes sqOn{0%,8%{background:transparent}12%,70%{background:var(--i)}80%,100%{background:transparent}}
.mo-av{display:flex}
.mo-av i{width:30px;height:30px;margin-left:-8px;border-radius:50%;border:2px solid var(--s);background:var(--i);color:#fff;font:600 9.5px/26px var(--fs);text-align:center;font-style:normal}
.mo-av i:nth-child(2n){background:color-mix(in oklab,var(--i) 65%,#fff)}
.mo-av i.inf{background:#fff;color:var(--i);border-color:var(--i);font-size:15px;line-height:24px}
.mo-loop svg{width:130px;height:44px}
.mo-loop path{fill:none;stroke:var(--i);stroke-width:1.6;stroke-dasharray:4 4;opacity:.7}
.mo-loop circle{fill:var(--i)}
.mo-plugs{display:grid;grid-template-columns:repeat(4,22px);gap:9px}
.mo-plugs svg{width:22px;height:22px;color:var(--i);opacity:.85}
.mo.dark{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.85fr);align-items:stretch;padding:0}
.mo-q{display:flex;flex-direction:column;justify-content:flex-end;padding:28px}
.mo.dark p{font:400 clamp(19px,1.7vw,23px)/1.38 var(--fserif);color:#e6ebee;max-width:none}
.mo-bot{position:relative;right:auto;top:auto;width:auto;opacity:1;background:radial-gradient(ellipse 70% 60% at 50% 70%,#143042 0%,transparent 70%)}
.mo-bot.is-3d{height:100%}
.mo-bot .login-bot{width:80%;height:auto;margin:30px auto 0}
@media (max-width:760px){.mo.dark{grid-template-columns:minmax(0,1fr)}.mo-bot{height:240px}.mosaic{grid-auto-rows:auto}.mo{min-height:200px}}

/* ---------- deployment cards ---------- */
.dcard{min-height:330px;padding:0;overflow:hidden;border:1px solid rgba(191,206,215,.08)}
.d-topo{height:150px;display:grid;place-items:center;background:radial-gradient(ellipse 80% 90% at 50% 100%,#12293a 0%,transparent 70%);border-bottom:1px solid rgba(191,206,215,.08);background-image:radial-gradient(rgba(142,166,180,.12) 1px,transparent 1px);background-size:14px 14px}
.d-topo svg{width:82%;height:auto;overflow:visible}
.d-topo text{font:600 10px var(--fm);fill:#e6ebee;text-anchor:middle;letter-spacing:.06em}
.d-topo text.t-k{font-size:8px;fill:var(--muted-dark);text-anchor:start;letter-spacing:.14em}
.t-line{fill:none;stroke:var(--steel);stroke-width:1.6}
.t-dash{fill:none;stroke:var(--steel);stroke-width:1.4;stroke-dasharray:5 5}
.t-box{fill:rgba(20,48,66,.95);stroke:var(--steel);stroke-width:1.4}
.t-box.lit{stroke:var(--green);fill:rgba(79,184,148,.18)}
.t-led{fill:var(--green);animation:blink 1.6s steps(1) infinite}
.t-flow{fill:none;stroke:var(--sky);stroke-width:1.6;stroke-dasharray:4 5;animation:dash 1.1s linear infinite}
.t-dot{fill:var(--sky)}
.t-x{stroke:var(--coral);stroke-width:2.2;stroke-linecap:round}
.t-pack{fill:rgba(240,199,63,.18);stroke:var(--gold);stroke-width:1.4}
.d-tag{display:inline-block;margin:20px 24px 0;font:500 10.5px/1 var(--fm);letter-spacing:.14em;text-transform:uppercase;color:var(--green)}
.dcard h3{margin:10px 24px 0}
.dcard p{margin:8px 24px 24px}

/* ---------- footer ---------- */
.ftr,.acro{display:none}
.ftr2{position:relative;background:var(--deep);color:var(--muted-dark);padding:96px 0 0;overflow:hidden}
.ftr2 .wrap{z-index:1}
.f2-top{display:flex;justify-content:space-between;align-items:flex-end;gap:32px;padding-bottom:56px;border-bottom:1px solid rgba(191,206,215,.12)}
.f2-top h2{color:#fff;font-size:clamp(32px,3.8vw,54px);line-height:1.05}
.f2-act{display:flex;flex-direction:column;align-items:flex-end;gap:16px}
.f2-mail{color:#e6ebee;font-size:15px;border-bottom:1px solid rgba(191,206,215,.3);padding-bottom:2px}
.f2-mail:hover{color:#fff;border-bottom-color:#fff}
.f2-cols{display:grid;grid-template-columns:1.3fr repeat(4,minmax(0,1fr));gap:32px;padding:52px 0}
.f2-brand img{height:34px;width:auto}
.f2-brand p{margin-top:16px;font-size:14px;line-height:1.6}
.ftr2 h6{margin:0 0 16px;font:500 11px/1 var(--fm);letter-spacing:.2em;text-transform:uppercase;color:var(--steel-lift)}
.ftr2 ul{list-style:none;margin:0;padding:0;display:grid;gap:11px;font-size:14.5px}
.ftr2 ul a{transition:color .2s}.ftr2 ul a:hover{color:#fff}
.f2-bot{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;padding:22px 0;border-top:1px solid rgba(191,206,215,.12);font-size:13px}
.f2-word{position:relative;z-index:1;display:flex;justify-content:center;gap:0;margin-top:20px;height:clamp(110px,15vw,240px);overflow:hidden;user-select:none}
.f2-word span{position:relative;display:flex;flex-direction:column;align-items:center}
.f2-word b{font:600 clamp(150px,21vw,340px)/.78 var(--fc);letter-spacing:-.02em;color:transparent;background:linear-gradient(180deg,#8ea6b4 0%,rgba(142,166,180,.35) 55%,rgba(142,166,180,0) 92%);-webkit-background-clip:text;background-clip:text;transform:translateY(30%);transition:transform 1.1s var(--ease)}
.f2-word.in b{transform:translateY(6%)}
.f2-word span:nth-child(2) b{transition-delay:.08s}.f2-word span:nth-child(3) b{transition-delay:.16s}.f2-word span:nth-child(4) b{transition-delay:.24s}.f2-word span:nth-child(5) b{transition-delay:.32s}
.f2-word span:hover b{background:linear-gradient(180deg,#fff 0%,rgba(127,184,212,.5) 60%,transparent 95%);-webkit-background-clip:text;background-clip:text}
.f2-word em{position:absolute;top:10px;font:500 10px/1 var(--fm);letter-spacing:.2em;text-transform:uppercase;font-style:normal;color:var(--muted-dark);opacity:0;transition:opacity .5s}
.f2-word.in em{opacity:1}
@media (max-width:980px){.f2-top{flex-direction:column;align-items:flex-start}.f2-act{align-items:flex-start}.f2-cols{grid-template-columns:repeat(2,minmax(0,1fr))}.f2-brand{grid-column:1/-1}.f2-word em{display:none}}
.mo-v{position:static;align-self:flex-start;margin-bottom:6px}
.dcard .d-tag{width:auto;height:auto;border:0;border-radius:0;display:inline-block;place-items:initial}

/* ---------- the people hero ---------- */
.stage3{position:relative;margin-top:60px;border-radius:28px;background:radial-gradient(ellipse 60% 70% at 50% 55%,#10283a 0%,#061016 72%);overflow:hidden;box-shadow:0 50px 120px -50px rgba(6,16,22,.6)}
.hp-wires{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:1;overflow:visible}
.hp-wires path{fill:none;stroke:rgba(127,184,212,.2);stroke-width:1.4;stroke-dasharray:3 5}
.hp-wires path.hot{stroke:rgba(127,184,212,.75);stroke-dasharray:none}
.hp-wires circle{fill:#d5ecf7;filter:drop-shadow(0 0 7px #7fb8d4)}
.hp-grid{position:relative;z-index:2;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr) minmax(0,1fr);gap:clamp(24px,4vw,60px);align-items:center;padding:44px clamp(22px,3.5vw,48px)}
.hp-side{display:grid;gap:16px}
.hp-side.r{align-content:center}
.pp{position:relative;display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:16px;background:rgba(14,30,41,.9);border:1px solid rgba(191,206,215,.12);transition:border-color .35s,background .35s,transform .35s}
.hp-side.l .pp{margin-right:auto;width:100%}
.pp-a{position:relative;flex:none}
.pp-a .avt{display:block;border-radius:50%}
.pp-ring{position:absolute;inset:-4px;border-radius:50%;border:2px solid var(--green);opacity:0;transform:scale(.85);transition:opacity .3s,transform .3s}
.pp-t b{display:block;font:500 15px/1.2 var(--fs);color:#fff}
.pp-t em{display:block;margin-top:3px;font-style:normal;font-size:12.5px;color:var(--muted-dark)}
.pp-say{position:absolute;left:14px;right:14px;top:calc(100% + 8px);z-index:3;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:9px 12px;border-radius:12px;background:#fff;color:var(--ink);font-size:13px;line-height:1.35;box-shadow:0 16px 34px -16px rgba(0,0,0,.6);opacity:0;transform:translateY(-6px);transition:opacity .35s,transform .35s;pointer-events:none}
.pp-say::before{content:"";position:absolute;top:-6px;left:22px;width:12px;height:12px;background:#fff;transform:rotate(45deg)}
.pp-say i{flex:none;font:600 11px/1 var(--fm);font-style:normal;color:#065f46;background:#d1fae5;padding:4px 7px;border-radius:999px;white-space:nowrap}
.pp.on{border-color:rgba(127,184,212,.7);background:rgba(20,48,66,.98);transform:translateX(var(--nx,0))}
.hp-side.l .pp.on{--nx:6px}.hp-side.r .pp.on{--nx:-6px}
.pp.on .pp-ring{opacity:1;transform:none}
.pp.on .pp-say{opacity:1;transform:none}
.pp.done .pp-ring{opacity:.55;transform:none;border-color:var(--steel)}
.pp.done .pp-t b::after{content:" ✓";color:var(--green);font-size:12px}
.hp-mid{display:grid;gap:10px;justify-items:center}
.hp-bot{width:100%;min-height:300px}
.hp-bot.is-3d{height:320px}
.hp-bot .login-bot{height:290px}
.hp-stack{width:100%}
.hp-stack .rs-tab{cursor:default}
.hp-stack .rs-body{min-height:178px}
.hp-stack .rs-card{padding:18px 20px}
.hp-meter{margin-top:6px;padding:16px 18px;border-radius:16px;background:linear-gradient(160deg,rgba(79,184,148,.16),rgba(14,30,41,.9));border:1px solid rgba(79,184,148,.35)}
.hp-meter p{margin:0;font:500 10.5px/1.3 var(--fm);letter-spacing:.14em;text-transform:uppercase;color:var(--muted-dark)}
.hp-meter b{display:block;margin-top:8px;font:600 clamp(34px,3vw,44px)/1 var(--fc);color:#fff;letter-spacing:-.01em}
.hp-bar{height:6px;border-radius:999px;background:rgba(255,255,255,.08);margin-top:12px;overflow:hidden}
.hp-bar i{display:block;height:100%;width:0;border-radius:inherit;background:var(--green);transition:width .8s var(--ease)}
.hp-meter span{display:block;margin-top:10px;font-size:12.5px;color:var(--muted-dark)}
.hp-meter span em{font-style:normal;color:#fff;font-weight:600}
.pts4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;margin-top:40px;border-top:1px solid var(--line)}
.pts4>div{padding:26px 26px 6px 0}
.pts4>div+div{padding-left:26px;border-left:1px solid var(--line)}
.pts4 span{width:38px;height:38px;border-radius:10px;display:grid;place-items:center;background:var(--bg2);border:1px solid var(--line);color:var(--blue)}
.pts4 span .ic{width:18px;height:18px}
.pts4 b{display:block;margin-top:16px;font:500 20px/1.2 var(--fserif);color:var(--ink);letter-spacing:-.01em}
.pts4 p{margin-top:8px;font-size:14.5px;line-height:1.55;color:var(--muted)}
@media (max-width:1100px){
  .hp-grid{grid-template-columns:minmax(0,1fr)}
  .hp-wires{display:none}
  .hp-side{grid-template-columns:repeat(2,minmax(0,1fr))}
  .hp-mid{order:-1}
  .pp-say{position:static;margin-top:8px;opacity:1;transform:none;display:none}
  .pp.on .pp-say{display:flex}
  .pp{flex-wrap:wrap}
  .pts4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pts4>div:nth-child(3){padding-left:0;border-left:0}
}
@media (max-width:640px){.hp-side,.pts4{grid-template-columns:minmax(0,1fr)}.pts4>div+div{padding-left:0;border-left:0;border-top:1px solid var(--line)}}
.hp-mid>div{width:100%}
.hp-mid .hp-stack{max-width:520px;margin:0 auto}
.hp-stack .rs-chips{grid-template-columns:1fr 1fr}
.pp-say{top:auto;bottom:calc(100% + 8px);transform:translateY(6px)}
.pp-say::before{top:auto;bottom:-6px}
@media (max-width:1100px){.pp-say{bottom:auto}}

/* ===== v5: Jasper-style collage hero ===== */
.hj{padding:150px 0 0;background:#edf2f5}
.hj .hx-copy{position:relative;z-index:3}
.hj-art{position:relative;height:clamp(380px,36vw,600px);margin:60px auto 0;overflow:clip;overflow-clip-margin:160px}
.hj-art>*{position:absolute}
.hj-sky{inset:0;z-index:1;background-color:var(--sk);background-image:linear-gradient(rgba(255,255,255,.6) 1.5px,transparent 1.5px),linear-gradient(90deg,rgba(255,255,255,.6) 1.5px,transparent 1.5px);background-size:28px 28px;background-position:center bottom;animation:hjRise 1.1s var(--ease) .15s both}
.hj-pix{inset:0;z-index:2}
.hj-pix i{position:absolute;background-color:var(--px);background-image:linear-gradient(rgba(255,255,255,.22) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.22) 1px,transparent 1px);background-size:9.33px 9.33px;transform-origin:bottom;animation:hjPop .5s var(--ease) both}
.hj-leds{inset:0;z-index:2}
.hj-leds b{position:absolute;width:6px;height:6px;background:#fff;animation:hjLed 2.4s steps(1) infinite}
.hj-tri{z-index:3;left:17%;bottom:0;width:23%;height:74%;fill:var(--tri);animation:hjSlide 1s var(--ease) .35s both}
.hj-bar{z-index:3;right:16%;bottom:0;width:clamp(56px,7%,112px);height:88%;background:var(--bar);display:grid;grid-template-columns:100%;align-content:end;gap:10px;padding:12px 10px;animation:hjRise 1s var(--ease) .45s both}
.hj-bar span{aspect-ratio:1;border-radius:50%;background:var(--dot);animation:hjPop .45s var(--ease) both}
.hj-bar span:nth-child(1){animation-delay:1.25s}.hj-bar span:nth-child(2){animation-delay:1.1s}.hj-bar span:nth-child(3){animation-delay:.95s}.hj-bar span:nth-child(4){animation-delay:.8s}
.hj-str{z-index:4;left:58%;bottom:-2px;width:clamp(90px,10%,150px);overflow:visible}
.hj-str path{fill:none;stroke:var(--str);stroke-width:13;stroke-dasharray:140;stroke-dashoffset:140;animation:hjDraw .9s var(--ease) 1s forwards}
.hj-bot{z-index:5;left:50%;bottom:-3%;transform:translateX(-50%);width:min(46%,680px);height:122%;min-height:0}
.hj-bot.is-3d{height:122%}
.hj-bot .login-bot{height:86%}
.hj-stat{z-index:6;left:63%;top:30%;width:clamp(170px,15vw,220px);padding:16px 18px 18px;background:#061016;color:#fff;animation:hjSlide .9s var(--ease) .8s both}
.hj-stat b{display:inline-block;white-space:nowrap;padding:2px 8px 4px;background:var(--sk);color:#061016;font:500 clamp(32px,3.4vw,50px)/1 var(--fserif);letter-spacing:-.03em}
.hj-stat span{display:block;margin-top:12px;font:500 13.5px/1.35 var(--fs);color:#d6e1e7}
.hj-call{z-index:7;left:9%;top:24%;width:clamp(260px,24vw,330px);display:grid;padding:16px 18px 16px;background:#fff;border:1px solid rgba(6,16,22,.1);border-radius:4px;box-shadow:0 22px 44px -22px rgba(6,16,22,.45);animation:hjSlide .9s var(--ease) .65s both}
.hj-cur{position:absolute;left:-20px;top:-18px;width:24px;height:24px;fill:#061016;stroke:#fff;stroke-width:1.6;stroke-linejoin:round;animation:hjCur 2.8s ease-in-out infinite}
.hj-note{grid-area:1/1;opacity:0;transform:translateY(8px);transition:opacity .45s,transform .45s var(--ease);pointer-events:none}
.hj-note.on{opacity:1;transform:none}
.hj-nh{display:flex;align-items:center;gap:10px}
.hj-nh .avt{flex:none;border-radius:50%}
.hj-nh span{display:grid;line-height:1.2}
.hj-nh b{font:600 13.5px/1.2 var(--fs);color:var(--ink)}
.hj-nh em{font:500 10.5px/1.3 var(--fm);font-style:normal;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.hj-note p{margin:12px 0 0;font:500 clamp(18px,1.6vw,22px)/1.2 var(--fserif);letter-spacing:-.015em;color:var(--ink)}
.hj-note>i{display:inline-flex;align-items:center;gap:6px;justify-self:start;margin-top:12px;padding:4px 9px;background:#e3f5ec;color:#2e8a6a;font:600 11px/1 var(--fm);font-style:normal;letter-spacing:.06em;text-transform:uppercase}
.hj-note>i svg{width:13px;height:13px}
@keyframes hjRise{from{transform:translateY(40%);opacity:0}to{transform:none;opacity:1}}
@keyframes hjPop{from{transform:scale(0);opacity:0}to{transform:none;opacity:1}}
@keyframes hjSlide{from{transform:translateY(24px);opacity:0}to{transform:none;opacity:1}}
@keyframes hjDraw{to{stroke-dashoffset:0}}
@keyframes hjLed{0%,100%{opacity:1}50%{opacity:.2}}
@keyframes hjCur{0%,100%{transform:translate(0,0)}50%{transform:translate(5px,4px)}}
.hj-bot.is-3d{transform:translateX(-50%)}
.hj-bot canvas{-webkit-mask-image:linear-gradient(90deg,transparent 4%,#000 24%,#000 76%,transparent 96%);mask-image:linear-gradient(90deg,transparent 4%,#000 24%,#000 76%,transparent 96%)!important}
.hp-sec .stage3{margin-top:36px}
@media (max-width:900px){
  .hj{padding-top:120px}
  .hj-art{height:440px;margin-top:40px}
  .hj-bar,.hj-leds{display:none}
  .hj-tri{left:4%;width:40%;height:62%}
  .hj-str{left:auto;right:4%}
  .hj-bot{width:82%;left:58%}
  .hj-call{left:16px;top:18px;width:min(260px,62%);padding:12px 14px}
  .hj-note p{font-size:16px;margin-top:8px}
  .hj-nh .avt{width:28px;height:28px}
  .hj-cur{display:none}
  .hj-stat{left:auto;right:16px;top:auto;bottom:22px;width:150px;padding:12px 14px}
  .hj-stat b{font-size:28px}
  .hj-stat span{font-size:12px;margin-top:8px}
}
@media (prefers-reduced-motion:reduce){.hj-art *{animation:none!important}.hj-str path{stroke-dashoffset:0}}

/* ===== v5: printed-matter kit ===== */
.sh{position:absolute;pointer-events:none}
.sh-dots circle,.sh-tri path,.sh-half path{fill:var(--c)}
.sh-str path{fill:none;stroke:var(--c);stroke-width:11}
.sh-ring circle{fill:none;stroke:var(--c);stroke-width:12}
.sh-pix i{position:absolute;background-color:var(--c);background-image:linear-gradient(rgba(255,255,255,.35) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.35) 1px,transparent 1px);background-size:8px 8px}
.sh-bars{display:grid;grid-template-columns:repeat(3,1fr);gap:14%}
.sh-bars i{background:var(--c)}
/* halftone cards */
.htgrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;margin-top:48px}
.htc{display:flex;flex-direction:column;color:var(--ink);transition:transform .35s var(--ease)}
.htc:hover{transform:translateY(-4px)}
.htc-pic{position:relative;aspect-ratio:1/0.86;overflow:hidden;background-color:var(--bg);background-image:linear-gradient(rgba(6,16,22,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(6,16,22,.06) 1px,transparent 1px);background-size:22px 22px}
.htc-pic img{position:absolute;left:50%;bottom:-4%;width:84%;height:auto;transform:translateX(-50%) rotate(var(--tilt));z-index:2;transition:transform .5s var(--ease)}
.htc:hover .htc-pic img{transform:translateX(-50%) rotate(0deg) scale(1.04)}
.htc-pic .sh{z-index:1}
.htc-pic img~.sh{z-index:3;mix-blend-mode:multiply;opacity:.92}
.htc-pic .a-tl{left:6%;top:7%;width:30%}
.htc-pic .a-tr{right:6%;top:7%;width:32%}
.htc-pic .a-bl{left:5%;bottom:6%;width:30%}
.htc-pic .a-br{right:5%;bottom:6%;width:30%}
.htc-pic .a-b{left:0;right:0;bottom:0;height:36%;width:100%}
.htc-pic .sh-half.a-b{left:12%;width:76%;height:auto;bottom:0}
.htc-pic .a-l{left:-4%;bottom:0;width:48%;height:84%}
.htc-pic .a-r{right:-4%;bottom:0;width:48%;height:84%}
.htc-pic .sh-bars.a-bl{height:30%;width:24%}
.htc-pic .sh-bars.a-r{width:30%;height:70%;right:6%}
.htc-pic .sh-half.a-bl{width:44%;left:-4%;bottom:0}
.htc-pic .sh-half.a-tr{width:40%;transform:rotate(180deg);top:0;right:8%}
.htc-cap{position:relative;display:grid;gap:8px;padding:18px 18px 20px;background:var(--cap);min-height:132px;align-content:start}
.htc-k{font:500 11px/1 var(--fm);letter-spacing:.12em;text-transform:uppercase;color:var(--ink);opacity:.75}
.htc-cap b{font:500 clamp(19px,1.5vw,23px)/1.15 var(--fserif);letter-spacing:-.015em;padding-right:28px}
.htc-go{position:absolute;right:16px;bottom:16px;width:20px;height:20px;transition:transform .3s var(--ease)}
.htc:hover .htc-go{transform:translateX(4px)}
/* knockout type */
.ko{display:inline;line-height:1.02}
.ko>span{display:inline;background:var(--kb);color:var(--kf);padding:.02em .14em .08em;box-decoration-break:clone;-webkit-box-decoration-break:clone}
/* pixel field */
.mz{position:absolute;inset:0;z-index:0;display:grid;pointer-events:none;overflow:hidden}
.mz i{display:block;border-right:1px solid rgba(255,255,255,.7);border-bottom:1px solid rgba(255,255,255,.7);opacity:0;transition:opacity 1.2s}
.mz.in i{opacity:var(--o)}
/* platform section */
.jx-plat{position:relative;overflow:hidden;padding-bottom:110px}
.jx-plat>.wrap{position:relative;z-index:1}
.jx-plat-g{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:clamp(30px,6vw,100px);align-items:start}
.jx-plat-g h2{font-size:clamp(32px,3.4vw,52px);line-height:1.04;margin-top:18px}
.jx-plat-g .lead{margin-top:20px;max-width:46ch}
.jx-acc{display:grid;gap:10px;padding-top:10px}
.jx-ai button{display:flex;align-items:flex-start;gap:14px;border:0;background:none;padding:0;text-align:left}
.jx-ai button>i{flex:none;display:grid;place-items:center;width:30px;height:30px;margin-top:12px;background:var(--ink);color:#fff;transition:transform .3s var(--ease)}
.jx-ai button>i svg{width:16px;height:16px}
.jx-ai.open button>i{transform:rotate(45deg);background:var(--coral)}
.jx-ai .ko{font:500 clamp(40px,5vw,78px)/1 var(--fserif);letter-spacing:-.035em}
.jx-ai p{max-height:0;overflow:hidden;margin:0 0 0 44px;max-width:44ch;font-size:16px;color:var(--body);transition:max-height .45s var(--ease),margin .45s var(--ease)}
.jx-ai.open p{max-height:120px;margin-top:12px;margin-bottom:8px}
.jx-float{position:relative;display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:30px;align-items:center;margin-top:90px;padding:clamp(28px,4vw,56px);background:#fff;border:1px solid var(--line2);box-shadow:0 40px 80px -50px rgba(6,16,22,.45)}
.jx-ft h3{font:500 clamp(30px,3.2vw,48px)/1.04 var(--fserif);letter-spacing:-.03em;margin:16px 0 0;color:var(--ink)}
.jx-ft p{margin:18px 0 18px;max-width:44ch}
.jx-iso{position:relative;height:clamp(300px,30vw,420px);perspective:2000px}
.jx-iso-s{position:absolute;left:4%;top:4%;width:118%;transform-origin:0 0;transform:rotateX(52deg) rotateZ(-34deg) translate(-6%,10%);transform-style:preserve-3d}
.jx-iso-s .win{box-shadow:none;border:1px solid #c8d4db;pointer-events:none}
.jx-iso-b{position:absolute;inset:0;transform:translateZ(-22px);border:1px solid #c8d4db;background:repeating-linear-gradient(90deg,transparent 0 28px,rgba(63,126,166,.08) 28px 29px)}
.jx-iso-c{position:absolute;left:6%;bottom:2%;transform:rotateX(52deg) rotateZ(-34deg) translateZ(40px);transform-origin:0 100%;filter:drop-shadow(0 18px 18px rgba(6,16,22,.18))}
/* lifecycle */
.jx-life{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(20px,3vw,40px);margin-top:46px;align-items:stretch}
.jx-steps{display:grid;gap:8px;align-content:start}
.jx-steps-h{margin:0 0 10px;font:500 clamp(20px,1.7vw,26px)/1.2 var(--fs);color:var(--ink);letter-spacing:-.01em}
.jx-step{background:var(--bg)}
.jx-step b{display:block;padding:12px 16px;border-bottom:1px solid rgba(6,16,22,.18);font:500 clamp(20px,1.6vw,24px)/1.1 var(--fserif);color:var(--ink);letter-spacing:-.015em}
.jx-step p{margin:0;padding:12px 16px 14px;font-size:14.5px;line-height:1.5;color:var(--ink2)}
.jx-col{position:relative;min-height:560px;overflow:hidden;background-color:#e1eff7;background-image:linear-gradient(rgba(63,126,166,.18) 1px,transparent 1px),linear-gradient(90deg,rgba(63,126,166,.18) 1px,transparent 1px);background-size:30px 30px}
.jx-col img{position:absolute;height:auto}
.jx-col .c-bot{left:22%;bottom:-2%;width:62%;z-index:3}
.jx-col .c-box{right:-6%;bottom:-6%;width:46%;z-index:4}
.jx-col .c-lap{left:-8%;bottom:-6%;width:44%;z-index:4;transform:rotate(-6deg)}
.jx-col .c-sun{left:44%;top:8%;width:40%;z-index:1}
.jx-col .c-str{left:6%;top:10%;width:22%;z-index:2}
.jx-col .c-pix{right:0;top:22%;width:26%;height:40%;z-index:1}
.jx-col .c-dots{right:8%;top:6%;width:20%;z-index:5;mix-blend-mode:multiply}
.jx-col .c-tag{position:absolute;left:24px;top:24px;z-index:6;padding:7px 11px;background:var(--ink);color:#fff;font:500 11.5px/1 var(--fm);letter-spacing:.06em}
/* governed tiles */
.jx-tiles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-top:46px}
.jx-tile{display:grid;align-content:center;min-height:clamp(180px,16vw,230px);padding:22px;background:var(--bg)}
.jx-tile .ko{font:500 clamp(26px,2.6vw,40px)/1.04 var(--fserif);letter-spacing:-.03em}
.jx-tile.t1,.jx-tile.t3{text-align:right}
.jx-tile.t2{text-align:center}
/* riso trio */
.jx-riso{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(20px,4vw,60px);margin-top:50px;text-align:center}
.jx-r{display:grid;justify-items:center;align-content:start;gap:10px}
.jx-r .riso{width:96px;height:96px;margin-bottom:8px}
.jx-r h3{font:500 clamp(22px,1.9vw,28px)/1.1 var(--fserif);letter-spacing:-.02em}
.jx-r p{margin:0 0 10px;max-width:34ch;font-size:15px}
@media (max-width:1100px){.htgrid{grid-template-columns:repeat(2,minmax(0,1fr))}.jx-tiles{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:900px){
  .jx-plat-g,.jx-float,.jx-life{grid-template-columns:minmax(0,1fr)}
  .jx-iso{height:300px}
  .jx-col{min-height:420px}
  .jx-riso{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:560px){.htgrid{gap:12px}.htc-cap{padding:14px;min-height:112px}.htc-cap b{font-size:17px}.jx-tiles{grid-template-columns:minmax(0,1fr)}}
.jx-ft .tlink{color:var(--coral);font-family:var(--fm);font-size:14px;letter-spacing:.02em;border-bottom-color:currentColor}
.jx-float{overflow:hidden}
.jx-ai .ko>span{display:inline-block;padding:.04em .14em .1em}
.jx-acc{gap:14px}
.hj-art{margin-top:84px}
.jx-tile .ko>span{display:inline-block;margin:3px 0;padding:.04em .16em .1em}
.jx-tile .ko br{display:none}
.jx-tile .ko{display:flex;flex-direction:column;align-items:flex-start}
.jx-tile.t1 .ko,.jx-tile.t3 .ko{align-items:flex-end}
.jx-tile.t2 .ko{align-items:center}
.jx-r .btn{border-radius:2px}

/* ===== v5: closing band ===== */
.jcta{position:relative;margin-top:40px;padding:clamp(70px,8vw,120px) 16px 0;overflow:hidden;background-color:#7fb8d4;background-image:linear-gradient(rgba(255,255,255,.8) 2px,transparent 2px),linear-gradient(90deg,rgba(255,255,255,.8) 2px,transparent 2px);background-size:46px 34px;background-position:center top}
.jcta-art{position:absolute;inset:0;pointer-events:none}
.jcta-pix{position:absolute;background-color:#061016;background-image:linear-gradient(rgba(127,184,212,.35) 1px,transparent 1px),linear-gradient(90deg,rgba(127,184,212,.35) 1px,transparent 1px);background-size:9px 9px;transform-origin:bottom;animation:hjPop .6s var(--ease) both}
.jcta-str{position:absolute;left:4%;bottom:0;width:clamp(150px,18vw,280px);overflow:visible}
.jcta-str path{fill:none;stroke:#e0785f;stroke-width:13}
.jcta-tri{position:absolute;right:0;bottom:0;width:clamp(220px,26vw,420px);height:clamp(120px,14vw,220px)}
.jcta-tri svg{position:absolute;inset:0;width:100%;height:100%;fill:#4fb894}
.jcta-dots{position:absolute;inset:18% 0 0 6%;display:grid;grid-template-columns:repeat(7,1fr);gap:4px;align-content:end;overflow:hidden}
.jcta-dots b{aspect-ratio:1;border-radius:50%;background:#1d5b45}
.jcta-win{position:relative;z-index:2;max-width:760px;margin:0 auto;background:#ececec;border-radius:10px 10px 0 0;box-shadow:0 0 0 1px rgba(6,16,22,.08)}
.jcta-tb{display:flex;align-items:center;gap:10px;padding:10px 12px;background:#fff;border-radius:10px 10px 0 0;border-bottom:1px solid #dde3e7}
.jcta-logo{display:grid;place-items:center;width:30px;height:30px;border-radius:6px;background:#061016}
.jcta-logo img{width:18px;height:18px;filter:brightness(0) invert(1)}
.jcta-chip{display:inline-flex;align-items:center;gap:6px;margin:0 auto;padding:5px 10px;border:1px solid #d3dbe0;border-radius:6px;font:500 12px/1 var(--fs);color:var(--ink)}
.jcta-chip svg{width:12px;height:12px}
.jcta-who{display:flex}
.jcta-who i{display:grid;place-items:center;width:24px;height:24px;margin-left:-6px;border:2px solid #fff;border-radius:50%;font:600 9px/1 var(--fs);font-style:normal;color:#fff}
.jcta-share{padding:6px 12px;border:1px solid #d3dbe0;border-radius:6px;font:500 12px/1 var(--fs);color:var(--ink)}
.jcta-body{padding:clamp(56px,7vw,100px) clamp(24px,5vw,70px) clamp(64px,8vw,110px);text-align:center}
.jcta-body h2{font-size:clamp(36px,4.6vw,66px);line-height:1.02;letter-spacing:-.035em;color:var(--ink);max-width:14ch;margin:0 auto}
.jcta-body p{margin:20px auto 0;max-width:46ch;font-size:17px}
.jcta-body .acts{justify-content:center;margin-top:32px}
.jcta-body .btn{border-radius:2px}
.jcta-bot{position:absolute;z-index:3;right:clamp(10px,9vw,170px);bottom:-10px;width:clamp(200px,20vw,320px);height:clamp(240px,24vw,380px);min-height:0}
.jcta-bot.is-3d{height:clamp(240px,24vw,380px)}
.jcta-bot .login-bot{height:100%}
.jcta-bot canvas{-webkit-mask-image:none!important;mask-image:none!important}
.rel .rel-h h2{font-size:clamp(28px,3vw,44px);margin-top:16px}
.rel .htgrid{margin-top:32px}
@media (max-width:1100px){.jcta-bot{display:none}}
@media (max-width:700px){.jcta-pix{display:none}.jcta-tri{width:180px;height:90px}.jcta-str{width:120px}.jcta-tb .jcta-who{display:none}}
.jx-tile.t0 .ko>span:nth-of-type(2){margin-left:.9em}.jx-tile.t0 .ko>span:nth-of-type(3){margin-left:1.7em}
.jx-tile.t1 .ko>span:nth-of-type(1){margin-right:.6em}
.jx-tile.t3 .ko>span:nth-of-type(2){margin-right:.8em}
@media (max-width:900px){.hj-bot,.hj-bot.is-3d{width:70%;left:64%;height:96%}.hj-call{width:min(240px,54%)}}

/* ===== r6: photo hero (module pages) ===== */
.kh{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);min-height:clamp(600px,82vh,820px);background:var(--kp);color:#fff;overflow:hidden}
.kh-copy{position:relative;z-index:3;align-self:center;padding:150px clamp(24px,4vw,72px) 80px max(28px,calc((100vw - var(--wrap)) / 2 + 28px))}
.kh-tag{background:transparent;color:#fff;border-color:rgba(255,255,255,.6)}
.kh h1{color:#fff;font-size:clamp(40px,4.6vw,76px);line-height:1;letter-spacing:-.035em;margin-top:22px;max-width:13ch}
.kh h1 em{font-style:italic;color:var(--ke)}
.kh .lead{color:rgba(255,255,255,.86);margin-top:24px;max-width:46ch;font-size:clamp(16px,1.3vw,19px)}
.kh .acts{margin-top:32px}
.kh .btn-p{background:#fff;color:#061016;border-color:#fff}
.kh .btn-p:hover{background:#e6ebee}
.kh .btn-o{background:transparent;color:#fff;border-color:rgba(255,255,255,.55)}
.kh .btn-o:hover{background:rgba(255,255,255,.1)}
.kh-photo{position:relative;min-height:100%}
.kh-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.kh-px{position:absolute;inset:0 auto 0 0;width:58%;z-index:2;pointer-events:none;display:grid}
.kh-px i{display:block;transition:opacity .9s}
@media (max-width:900px){
  .kh{grid-template-columns:minmax(0,1fr);min-height:0}
  .kh-copy{padding:120px 22px 44px}
  .kh-photo{height:320px}
  .kh-px{inset:0 0 auto 0;width:100%;height:46%}
}

/* ===== r6: the story stage ===== */
.sx .sx-stage{position:relative;height:clamp(620px,52vw,760px);margin-top:46px}
.sx-paper{position:absolute;left:4%;right:4%;top:6%;bottom:0;background-color:#e1eff7;background-image:linear-gradient(rgba(63,126,166,.16) 1px,transparent 1px),linear-gradient(90deg,rgba(63,126,166,.16) 1px,transparent 1px);background-size:26px 26px;clip-path:polygon(0 18%,8% 18%,8% 8%,22% 8%,22% 0,78% 0,78% 10%,92% 10%,92% 22%,100% 22%,100% 88%,94% 88%,94% 100%,6% 100%,6% 92%,0 92%)}
.sx-block{position:absolute;left:30%;right:30%;top:10%;bottom:0;background:#061016;background-image:repeating-linear-gradient(90deg,transparent 0 22px,rgba(79,184,148,.55) 22px 24px);clip-path:polygon(0 12%,10% 12%,10% 4%,22% 4%,22% 0,40% 0,40% 6%,62% 6%,62% 0,78% 0,78% 8%,90% 8%,90% 16%,100% 16%,100% 100%,0 100%)}
.sx-photo{position:absolute;left:36%;right:36%;top:16%;bottom:0;overflow:hidden}
.sx-photo img{width:100%;height:100%;object-fit:cover}
.sxc{position:absolute;z-index:3;width:clamp(230px,24%,300px);transition:transform .45s var(--ease)}
.sxc-ui{background:#fff;border:1px solid #c8d4db;box-shadow:7px 7px 0 var(--c);padding:12px 14px 14px;transition:box-shadow .45s var(--ease)}
.sxc-h{display:flex;align-items:center;gap:8px;padding-bottom:9px;margin-bottom:10px;border-bottom:1px solid var(--line);font:600 11.5px/1.2 var(--fs);color:var(--i)}
.sxc-h svg{width:15px;height:15px;flex:none}
.sxc-h span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sxc-p{display:flex;align-items:center;gap:9px}
.sxc-p .avt{flex:none;border-radius:50%}
.sxc-p span{display:grid;line-height:1.2}
.sxc-p b{font:600 13px/1.2 var(--fs);color:var(--ink)}
.sxc-p em{font:500 10px/1.3 var(--fm);font-style:normal;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.sxc p{margin:9px 0 0;font:500 15px/1.3 var(--fserif);color:var(--ink)}
.sxc-save{display:inline-flex;align-items:center;gap:5px;margin-top:9px;padding:3px 8px;background:#e3f5ec;color:#2e8a6a;font:600 10.5px/1 var(--fm);font-style:normal;letter-spacing:.06em;text-transform:uppercase;opacity:.35;transition:opacity .4s}
.sxc-save svg{width:12px;height:12px}
.sxc-tab{position:relative;display:inline-flex;align-items:center;gap:10px;margin:-8px 0 0 22px;padding:9px 16px 10px 12px;background:#fff;border:1px solid #061016;box-shadow:6px 6px 0 var(--c);font:500 clamp(17px,1.5vw,21px)/1 var(--fs);color:var(--ink);letter-spacing:-.01em}
.sxc-tab i{display:grid;place-items:center;width:15px;height:15px;border:1.5px solid #061016;color:transparent;transition:background .3s,color .3s}
.sxc-tab i svg{width:11px;height:11px}
.sxc.on{transform:translateY(-6px)}
.sxc.on .sxc-ui{box-shadow:11px 11px 0 var(--c)}
.sxc.on .sxc-save{opacity:1}
.sxc.done .sxc-tab i,.sxc.on .sxc-tab i{background:var(--c);color:#061016}
.sx-meter{position:absolute;z-index:4;left:50%;bottom:22px;transform:translateX(-50%);width:clamp(220px,22%,280px);padding:14px 16px 16px;background:#061016;color:#fff}
.sx-meter span{display:block;font:500 10.5px/1.3 var(--fm);letter-spacing:.12em;text-transform:uppercase;color:#91a3ae}
.sx-meter b{display:inline-block;margin-top:8px;padding:2px 8px 4px;background:#7fb8d4;color:#061016;font:500 clamp(30px,2.6vw,40px)/1 var(--fserif);letter-spacing:-.03em}
.sx-meter em{display:block;margin-top:9px;font:500 12.5px/1.3 var(--fs);font-style:normal;color:#bfced7}
.sx-meter em i{font-style:normal;color:#fff;font-weight:600}
.pts-sec{padding-top:0}
@media (max-width:1000px){
  .sx .sx-stage{height:auto;display:grid;gap:22px;padding-top:300px}
  .sx-paper{top:0;bottom:auto;height:300px}
  .sx-block{left:20%;right:20%;top:20px;bottom:auto;height:280px}
  .sx-photo{left:26%;right:26%;top:50px;bottom:auto;height:250px}
  .sxc{position:relative;left:auto!important;top:auto!important;width:auto}
  .sx-meter{position:relative;left:auto;bottom:auto;transform:none;width:auto}
}

/* ===== r6: flowing staircase ===== */
.stair{position:absolute;display:block;pointer-events:none}
.stair.flip{transform:rotate(180deg)}
.fx{position:relative;overflow:hidden;background:#061016;color:#fff;padding:clamp(220px,22vw,320px) 0 clamp(200px,20vw,300px)}
.fx-top{top:0;right:0;width:78%;height:clamp(200px,20vw,300px)}
.fx-bot{bottom:0;left:0;width:62%;height:clamp(170px,17vw,250px)}
.fx-copy{position:relative;z-index:1}
.fx-tag{background:#e6ebee;color:#061016;border-color:#e6ebee}
.fx h2{color:#fff;font-size:clamp(38px,5vw,78px);line-height:1;letter-spacing:-.035em;margin-top:22px;max-width:18ch}
.fx-copy p{margin:22px 0 0;max-width:56ch;color:#bfced7;font-size:17.5px}
.fx-field{position:relative;z-index:1;margin-top:60px;border-top:1px solid rgba(127,184,212,.35);background-image:repeating-linear-gradient(180deg,transparent 0 63px,rgba(127,184,212,.35) 63px 64px);background-size:100% 64px}
.fx-row{max-width:var(--wrap);margin:0 auto;padding:0 28px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;align-items:start}
.fx-st{margin-top:calc(var(--i) * 64px);height:256px;padding:28px 26px;border:1px solid rgba(127,184,212,.45);background:#061016}
.fx-st b{display:block;font:300 clamp(64px,6.4vw,104px)/.9 var(--fs);letter-spacing:-.04em;color:#fff}
.fx-st sup{font-size:.32em;font-weight:400;letter-spacing:0;vertical-align:baseline;margin-left:4px;color:#7fb8d4}
.fx-st p{margin:14px 0 0;color:#7fb8d4;font-size:15.5px;line-height:1.4;max-width:30ch}
.fx-st small{display:block;margin-top:12px;color:#91a3ae;font-size:12.5px}
@media (max-width:900px){.fx-row{grid-template-columns:minmax(0,1fr)}.fx-st{margin-top:0;height:auto}.fx-top{width:100%}.fx-bot{width:100%}}

/* ===== r6: pixel-art integrations ===== */
.pg{position:relative;overflow:hidden;background:#e1eff7}
.pg-strip{display:grid;grid-template-columns:repeat(48,1fr);height:26px}
.pg-strip i{border-right:1px solid rgba(255,255,255,.7);background:#3f7ea6;animation:pgStrip 6s steps(1) infinite;animation-delay:calc(var(--k) * -0.13s)}
.pg-strip i:nth-child(3n){background:#7fb8d4}.pg-strip i:nth-child(7n){background:#061016}.pg-strip i:nth-child(5n+2){background:#bfdcec}
@keyframes pgStrip{0%,100%{opacity:1}40%{opacity:.55}70%{opacity:.85}}
.pg-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));width:122%;margin-left:-11%}
.pg-t{position:relative;aspect-ratio:1/1;overflow:hidden;border-right:1px solid rgba(63,126,166,.5);border-bottom:1px solid rgba(63,126,166,.5);background:#e9f3f9}
.pg-cat{position:absolute;left:18px;top:0;z-index:2;padding:5px 9px;border:1px solid rgba(63,126,166,.6);border-top:0;background:#e9f3f9;font:500 10.5px/1 var(--fm);letter-spacing:.1em;text-transform:uppercase;color:#3f7ea6}
.pg-t>b{position:absolute;left:clamp(18px,2.4vw,34px);top:clamp(44px,4.4vw,64px);z-index:2;font:600 clamp(22px,2.6vw,40px)/1.05 var(--fs);letter-spacing:-.02em;color:#3f7ea6;max-width:80%}
.pg-t canvas{position:absolute;inset:0;width:100%;height:100%;image-rendering:pixelated}
.pg-head,.pg-say{background:#3f7ea6;color:#fff;display:grid;padding:clamp(22px,3vw,44px)}
.pg-head{align-content:start}
.pg-head .tag2{justify-self:start;background:#e6ebee;color:#061016;border-color:#e6ebee}
.pg-head h2{color:#fff;font-size:clamp(30px,3.4vw,58px);line-height:1;letter-spacing:-.035em;margin-top:22px}
.pg-say{align-content:end;gap:22px}
.pg-say p{margin:0;font-size:clamp(14px,1.1vw,16.5px);line-height:1.5;color:#eef6fb}
.pg-say .btn{justify-self:start;border-radius:2px;color:#3f7ea6}
@media (max-width:900px){.pg-grid{grid-template-columns:repeat(2,minmax(0,1fr));width:100%;margin-left:0}.pg-t:nth-child(n+7){display:none}.pg-say{grid-column:1/-1;aspect-ratio:auto}}

/* ===== r6: photo band ===== */
.pb{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);min-height:clamp(460px,44vw,640px);background:#061016;overflow:hidden}
.pb-rules{position:absolute;inset:0;z-index:2;pointer-events:none;background:linear-gradient(rgba(127,184,212,.4),rgba(127,184,212,.4)) 0 46px/100% 1px no-repeat,linear-gradient(rgba(127,184,212,.4),rgba(127,184,212,.4)) 0 calc(100% - 46px)/100% 1px no-repeat,linear-gradient(rgba(127,184,212,.4),rgba(127,184,212,.4)) 16.6% 0/1px 100% no-repeat,linear-gradient(rgba(127,184,212,.4),rgba(127,184,212,.4)) 50% 0/1px 100% no-repeat,linear-gradient(rgba(127,184,212,.4),rgba(127,184,212,.4)) 83.3% 0/1px 100% no-repeat}
.pb-copy{position:relative;z-index:3;align-self:center;padding:90px clamp(24px,4vw,60px) 90px 18.5%}
.pb h2{color:#fff;font-size:clamp(36px,4.2vw,70px);line-height:1;letter-spacing:-.035em}
.pb h2 span{display:block;margin-top:8px;font:500 1em/1 var(--fs);letter-spacing:-.03em;color:#7fb8d4}
.pb-copy p{margin:24px 0 30px;max-width:44ch;color:#d6e1e7;font-size:16.5px}
.pb .btn{border-radius:2px}
.pb-photo{position:relative;margin:46px 0}
.pb-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
@media (max-width:900px){.pb{grid-template-columns:minmax(0,1fr)}.pb-copy{padding:70px 22px 30px}.pb-photo{height:320px;margin:0 0 46px}}

/* ===== r6: footer ===== */
.ft3{position:relative;overflow:hidden;background:#061016;color:#bfced7;padding:clamp(150px,13vw,200px) 0 40px;background-image:repeating-linear-gradient(90deg,transparent 0 calc(16.666% - 1px),rgba(127,184,212,.07) calc(16.666% - 1px) 16.666%)}
.ft3-stair{top:0;left:0;width:100%;height:clamp(110px,10vw,150px)}
.ft3 .wrap{position:relative;z-index:1}
.ft3-cols{display:grid;grid-template-columns:1.25fr 1fr 1fr 1fr;gap:clamp(20px,3vw,48px)}
.ft3-h{display:flex;align-items:center;justify-content:space-between;padding-bottom:14px;margin-bottom:22px;border-bottom:1px solid rgba(191,206,215,.25);font:500 clamp(22px,1.9vw,28px)/1.1 var(--fserif);letter-spacing:-.02em;color:#fff}
.ft3-h svg,.ft3-gh svg{width:15px;height:15px;transition:transform .2s}
.ft3-h:hover svg,.ft3-gh:hover svg{transform:translateX(3px)}
.ft3-g{margin-bottom:22px}
.ft3-gh{display:inline-flex;align-items:center;gap:6px;font:600 13.5px/1.3 var(--fs);color:#fff}
.ft3-g ul{list-style:none;margin:8px 0 0;padding:0;display:grid;gap:6px}
.ft3-g a{color:#91a3ae;font-size:13.5px;transition:color .15s}
.ft3-g li a:hover{color:#fff}
.ft3-act{display:grid;gap:10px;justify-items:start;margin-top:8px}
.ft3-act .btn{border-radius:2px;height:42px}
.ft3-bot{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap;margin-top:56px;padding-top:28px;border-top:1px solid rgba(191,206,215,.18)}
.ft3-brand{display:grid;gap:12px}
.ft3-brand img{height:40px;width:auto}
.ft3-brand span,.ft3-legal span{font-size:12.5px;color:#798c98}
.ft3-legal{display:grid;gap:4px;text-align:right}
@media (max-width:900px){.ft3-cols{grid-template-columns:repeat(2,minmax(0,1fr))}.ft3-legal{text-align:left}}
@media (max-width:560px){.ft3-cols{grid-template-columns:minmax(0,1fr)}}
.fx h2{max-width:22ch}
.ft3{padding-top:clamp(190px,17vw,260px)}.ft3-stair{height:clamp(150px,14vw,220px)}
.sec.sx{padding-bottom:48px}

/* ===== r7: the floating nav sits over the hero, not on top of its edge ===== */
.kh,.hx.hj{margin-top:-72px}
.kh-copy{padding-top:170px}
.hx.hj{padding-top:190px}
@media (max-width:900px){.kh-copy{padding-top:140px}}

/* a mockup centred in a panel grid must still take the panel's width (container queries collapse a shrink-to-fit .win to nothing) */
.gpanel>div[style*="justify-items:center"]>.win,.gpanel>div[style*="display:grid"]>.win{justify-self:stretch;width:100%}

/* ===== r7: deployment cards in the printed kit ===== */
.dcards{gap:0;border-top:1px solid #c8d4db;border-left:1px solid #c8d4db}
.dcard{border-radius:0;border:0;border-right:1px solid #c8d4db;border-bottom:1px solid #c8d4db;background:#fff;min-height:0;padding:0;transition:box-shadow .3s var(--ease),transform .3s var(--ease)}
.dcard:hover{transform:translateY(-4px);box-shadow:8px 8px 0 var(--dc)}
.dcard:nth-child(1){--dc:#7fb8d4;--ds:#e1eff7}.dcard:nth-child(2){--dc:#4fb894;--ds:#dcf2e8}.dcard:nth-child(3){--dc:#e0785f;--ds:#fbe2da}.dcard:nth-child(4){--dc:#f0c73f;--ds:#fbf0c6}
.dcard .d-topo{background-color:#eef2f4;background-image:linear-gradient(rgba(6,16,22,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(6,16,22,.06) 1px,transparent 1px);background-size:22px 22px;border-bottom:1px solid #c8d4db}
.dcard .d-topo svg text{fill:#061016}
.dcard .t-line{stroke:#061016}
.dcard .t-dash{stroke:#061016}
.dcard .t-box{fill:#fff;stroke:#061016}
.dcard .t-box.lit{fill:var(--dc);stroke:#061016}
.dcard .t-flow{stroke:#3f7ea6}
.dcard .t-dot{fill:#3f7ea6}
.dcard .t-pack{fill:#f0c73f;stroke:#061016}
.dcard .t-led{fill:#061016}
.dcard .d-tag{display:block;margin:0;padding:18px 22px 0;background:var(--ds);color:#061016;opacity:.8}
.dcard h3{margin:0;padding:8px 22px 0;background:var(--ds);color:#061016}
.dcard p{margin:0;padding:8px 22px 24px;background:var(--ds);color:var(--ink2);flex:1}

/* ===== r7: integrations catalog ===== */
.icat{margin-top:52px;border-top:1px solid #c8d4db}
.icat-row{display:grid;grid-template-columns:minmax(220px,.32fr) minmax(0,1fr);border-bottom:1px solid #c8d4db}
.icat-h{position:relative;padding:26px 24px 26px 0;display:grid;align-content:start;gap:12px}
.icat-ic{display:grid;place-items:center;width:34px;height:34px;background:var(--c);color:#061016}
.icat-ic svg{width:17px;height:17px}
.icat-h h3{font:500 clamp(24px,2.1vw,32px)/1.05 var(--fserif);letter-spacing:-.025em}
.icat-h h3 span{background:var(--s);padding:0 .12em .06em;box-decoration-break:clone;-webkit-box-decoration-break:clone}
.icat-h em{font:500 11px/1 var(--fm);font-style:normal;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.icat-cells{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(230px,100%),1fr));border-left:1px solid #c8d4db}
.icat-c{position:relative;padding:24px 22px 26px;border-right:1px solid #e1e8ec;border-bottom:1px solid #e1e8ec;transition:background .2s}
.icat-c:hover{background:var(--s)}
.icat-c b{display:block;font:600 18px/1.2 var(--fs);letter-spacing:-.01em;color:var(--i)}
.icat-c p{margin:8px 0 0;font-size:14px;line-height:1.5;color:var(--body)}
.icat-paid{display:inline-block;margin-top:12px;padding:4px 8px;background:#061016;color:#fff;font:500 10.5px/1 var(--fm);letter-spacing:.08em;text-transform:uppercase}
@media (max-width:760px){.icat-row{grid-template-columns:minmax(0,1fr)}.icat-h{padding:22px 0 12px}.icat-cells{border-left:0}}

/* ===== r7: pricing in the printed kit ===== */
.plans{gap:0;border-top:1px solid #c8d4db;border-left:1px solid #c8d4db}
.plan{border-radius:0;border:0;border-right:1px solid #c8d4db;border-bottom:1px solid #c8d4db;padding:0 0 26px;box-shadow:none}
.plan:hover{transform:translateY(-4px);box-shadow:8px 8px 0 var(--pc)}
.plan.pop{border-color:#c8d4db;box-shadow:8px 8px 0 var(--pc);z-index:1}
.plan h3{margin:0;padding:22px 24px 16px;background:var(--ps);border-bottom:1px solid #c8d4db;font:500 26px/1.1 var(--fserif);letter-spacing:-.02em}
.plan .who,.plan .price,.plan .was,.plan .btn,.plan .inc,.plan ul{margin-left:24px;margin-right:24px;width:auto}
.plan .who{margin-top:16px}
.plan .price b{font:500 50px/1 var(--fserif);letter-spacing:-.035em}
.plan.pop .price b{background:var(--pc);color:#061016;padding:0 .12em .04em}
.plan .badge{top:16px;left:auto;right:16px;border-radius:0;background:#061016;color:#fff}
.plan .btn{border-radius:2px}
.plan li .dotc{border-radius:0}
.unl span{padding:6px 10px;border:1px solid #c8d4db;background:#fff}
.bmods{gap:0;border-top:1px solid #c8d4db;border-left:1px solid #c8d4db}
.bm{border-radius:0;border:0;border-right:1px solid #c8d4db;border-bottom:1px solid #c8d4db;padding:16px}
.bm:hover{transform:none;background:#f3f6f8}
.bm .tile{border-radius:0;color:#061016}
.bm .box{border-radius:0}
.bm[aria-pressed="true"]{background:color-mix(in oklab,var(--tc) 16%,#fff);box-shadow:inset 4px 0 0 var(--tc)}
.bsum{border-radius:0;background-color:#061016;background-image:linear-gradient(rgba(127,184,212,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(127,184,212,.08) 1px,transparent 1px);background-size:24px 24px;box-shadow:8px 8px 0 #7fb8d4;top:100px}
.bsum::before{display:none}
.bsum .tot{display:inline-block;background:#7fb8d4;color:#061016;padding:2px 10px 6px;font:500 50px/1 var(--fserif);letter-spacing:-.035em}
.bsum .btn{border-radius:2px}
.cmp-wrap{border-radius:0;border-color:#c8d4db}
.cmp thead th{top:82px}
.cmp thead th b{font:500 19px/1.2 var(--fserif)}
.cmp tbody tr.grp td{background:#eef2f4}
.cmp tbody tr.grp .tile{border-radius:0}
.cmp .yes{border-radius:0;background:#dcf2e8;color:#2e8a6a}

/* ===== r7: a few more printed textures ===== */
/* a marker stroke behind the hero's second line */
.hj h1 em{color:#061016;padding:0 .1em;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 60' preserveAspectRatio='none'%3E%3Cpath d='M6 14 C 80 6, 200 10, 394 6 L 396 50 C 300 56, 120 52, 4 54 Z' fill='%23f0c73f' fill-opacity='.75'/%3E%3C/svg%3E") 0 62%/100% 70% no-repeat}
/* a grid of solid circles, the motif from the closing band, set into the photo band and the story stage */
.circ{position:absolute;z-index:3;display:grid;grid-template-columns:repeat(2,1fr);gap:0;pointer-events:none}
.circ i{aspect-ratio:1;border-radius:50%;background:var(--cc,#2e8a6a)}
.pb .circ{left:0;bottom:46px;width:clamp(90px,9vw,140px);--cc:#4fb894}
.sx-stage .circ{right:1%;top:0;width:clamp(70px,6vw,96px);--cc:#3f7ea6;grid-template-columns:repeat(3,1fr)}
/* a halftone dot field drifting behind the story stage */
.sx{position:relative;overflow:hidden}
.sx::before{content:"";position:absolute;inset:auto 0 0 0;height:70%;background-image:radial-gradient(circle,rgba(63,126,166,.22) 1.4px,transparent 1.6px);background-size:12px 12px;-webkit-mask-image:linear-gradient(to top,#000,transparent);mask-image:linear-gradient(to top,#000,transparent);animation:dotDrift 18s linear infinite;pointer-events:none}
@keyframes dotDrift{to{background-position:120px 0}}
.pb-photo .kh-px{width:34%}
@media (prefers-reduced-motion:reduce){.sx::before{animation:none}}
@media (max-width:900px){.plans,.bmods{border-left:0}.sx-stage .circ{display:none}}
.gpanel>div[style*="display:grid"]:has(>.win){width:100%}

/* ===== r8: hero with tiles (grid paper, person on a pixel block) ===== */
.ht{position:relative;margin-top:-72px;padding:150px 0 90px;overflow:hidden;background:#fff}
.ht-paper{position:absolute;inset:0;background-color:#e6f2f9;background-image:linear-gradient(rgba(255,255,255,.95) 1.5px,transparent 1.5px),linear-gradient(90deg,rgba(255,255,255,.95) 1.5px,transparent 1.5px);background-size:30px 24px;clip-path:polygon(0 0,100% 0,100% 82%,96% 82%,96% 88%,84% 88%,84% 94%,18% 94%,18% 90%,6% 90%,6% 84%,0 84%)}
.ht-in{position:relative;max-width:var(--wrap);margin:0 auto;padding:0 28px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:clamp(24px,4vw,60px);align-items:center}
.ht-tag{font:500 13px/1 var(--fm);color:var(--ink)}
.ht h1{font-size:clamp(44px,5.6vw,92px);line-height:.96;letter-spacing:-.04em;margin-top:22px;color:#061016}
.ht h1 em{font-style:italic;color:#3f7ea6}
.ht .lead{margin-top:26px;max-width:48ch}
.ht .acts{margin-top:30px}
.ht .btn{border-radius:2px}
.ht-art{position:relative;height:clamp(440px,40vw,600px)}
.ht-block{position:absolute;left:16%;right:6%;top:6%;bottom:14%;background-color:#3f7ea6;background-image:linear-gradient(rgba(255,255,255,.18) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.18) 1px,transparent 1px);background-size:12px 12px;clip-path:polygon(22% 0,62% 0,62% 8%,80% 8%,80% 16%,92% 16%,92% 30%,100% 30%,100% 78%,90% 78%,90% 100%,10% 100%,10% 88%,0 88%,0 16%,10% 16%,10% 8%,22% 8%)}
.ht-circ{position:absolute;left:10%;top:16%;width:30%;fill:#4fb894;opacity:.95;animation:htSpin 40s linear infinite}
.ht-str{position:absolute;right:2%;top:20%;width:30%;overflow:visible}
.ht-str path{fill:none;stroke:#f0c73f;stroke-width:16}
@keyframes htSpin{to{transform:rotate(360deg)}}
.ht-photo{position:absolute;left:34%;right:16%;top:10%;bottom:14%;overflow:hidden;clip-path:polygon(0 6%,8% 6%,8% 0,100% 0,100% 100%,0 100%)}
.ht-photo img{width:100%;height:100%;object-fit:cover}
.ht-call{position:absolute;z-index:3;left:4%;top:18%;width:clamp(220px,40%,300px);padding:14px 16px 16px 18px;background:#f3f6ff;border:1px solid #c8d4db;box-shadow:0 18px 30px -18px rgba(6,16,22,.4)}
.ht-call i{position:absolute;left:12px;top:19px;width:10px;height:10px;border-radius:50%;background:#e0785f}
.ht-call p{margin:0 0 0 14px;font:500 clamp(19px,1.7vw,26px)/1.12 var(--fserif);letter-spacing:-.02em;color:#061016}
.ht-call span{position:absolute;left:30px;bottom:-14px;padding:3px 7px;background:#3f7ea6;color:#fff;font:500 12px/1.2 var(--fs)}
.ht-cur{position:absolute;left:12px;bottom:-26px;width:18px;fill:#061016;stroke:#fff;stroke-width:1.5}
.ht-tiles{position:absolute;z-index:3;left:10%;right:0;bottom:4%;display:grid;grid-template-columns:repeat(4,1fr)}
.ht-tiles>div{display:grid;grid-template-rows:auto 1fr auto;aspect-ratio:1/1;padding:8px 9px;background:rgba(10,40,26,.88);color:#cfe9db;border-right:1px solid rgba(255,255,255,.12);transition:background .4s}
.ht-tiles em{display:flex;justify-content:space-between;align-items:center;padding-bottom:6px;border-bottom:1px solid rgba(255,255,255,.25);font:500 10.5px/1 var(--fm);font-style:normal;letter-spacing:.06em;text-transform:uppercase}
.ht-tiles em svg{width:13px;height:13px}
.ht-tiles>div>svg{justify-self:center;align-self:center;width:38%;height:auto;opacity:.75}
.ht-tiles b{padding-top:6px;border-top:1px solid rgba(255,255,255,.25);font:500 11px/1.1 var(--fm)}
.ht-tiles>div.on{background:#4fb894;color:#061016}
.ht-tiles>div.on>svg{opacity:1}
@media (max-width:900px){.ht-in{grid-template-columns:minmax(0,1fr)}.ht{padding-top:130px}.ht-art{height:440px}.ht-call{left:0}}

/* ===== r8: hero on a ruled sheet ===== */
.hr{margin-top:-72px;padding:110px 0 60px;background:#fff}
.hr-sheet{position:relative;max-width:1540px;margin:0 auto;border:1px solid #2b3f63;display:grid;grid-template-columns:repeat(11,1fr);grid-auto-rows:minmax(84px,auto)}
.hr-cells{position:absolute;inset:0;display:grid;grid-template-columns:repeat(11,1fr);grid-auto-rows:84px;pointer-events:none;overflow:hidden}
.hr-cells i{border-right:1px solid rgba(43,63,99,.35);border-bottom:1px solid rgba(43,63,99,.35)}
.hr-h{position:relative;grid-column:2/6;grid-row:2/5;background:#cfe6f3;padding:clamp(20px,2.4vw,36px);border:1px solid #2b3f63;display:grid;align-content:space-between;gap:20px}
.hr-h .tag2{justify-self:start}
.hr h1{font-size:clamp(38px,4.4vw,72px);line-height:.98;letter-spacing:-.04em;color:#061016}
.hr h1 em{font-style:italic;color:#3f7ea6}
.hr-p{position:relative;grid-column:6/11;grid-row:2/4;background:#cfe6f3;padding:clamp(20px,2.4vw,36px);border:1px solid #2b3f63;border-left:0}
.hr-p p{margin:0;max-width:52ch;font-size:clamp(15px,1.15vw,17.5px);color:#1c2a33}
.hr-a{position:relative;grid-column:8/11;grid-row:4/5;display:flex;align-items:center;justify-content:flex-end;gap:8px;padding:0 12px}
.hr-a .btn{border-radius:2px}
.hr-win{position:relative;grid-column:2/11;grid-row:5/9;margin-top:28px;background:#eef0f2;border:1px solid #2b3f63}
.hr-tb{display:flex;align-items:center;gap:10px;padding:10px 14px;background:#fff;border-bottom:1px solid #d6dde2}
.hr-logo{display:grid;place-items:center;width:28px;height:28px;background:#061016}
.hr-logo img{filter:brightness(0) invert(1)}
.hr-chip{display:inline-flex;align-items:center;gap:6px;padding:5px 10px;background:#eef2f4;font:500 12.5px/1 var(--fs);color:#061016}
.hr-chip svg{width:13px;height:13px}
.hr-share{margin-left:auto;padding:6px 12px;border:1px solid #d6dde2;font:500 12.5px/1 var(--fs)}
.hr-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,3vw,50px);padding:clamp(24px,3vw,44px)}
.hr-s b{display:block;margin-top:18px;font:500 clamp(22px,2vw,30px)/1.1 var(--fs);letter-spacing:-.02em;color:#e0785f}
.hr-s p{margin:8px 0 0;font-size:14px;line-height:1.5;color:#1c2a33;max-width:40ch}
.hr-v{height:150px;display:grid;place-items:center}
.sa{position:relative;width:min(240px,90%);height:130px}
.sa-in .sa-list{position:absolute;left:0;top:10px;width:58%;height:110px;background:#fff;border:1px solid #f0b6a6;display:grid;align-content:start;gap:7px;padding:10px}
.sa-in .sa-list i{height:8px;background:#fbe2da}
.sa-in .sa-tile{position:absolute;right:0;top:0;width:52%;height:120px;background:#e0785f;display:grid;place-items:center;color:#fff;animation:saBob 3s ease-in-out infinite}
.sa-in .sa-tile svg{width:42%;height:auto}
.sa-rule{display:grid;grid-template-columns:1fr 1fr 1fr;gap:6px;align-items:stretch}
.sa-rule>div{background:#fff;border:1px solid #f0b6a6;display:grid;place-items:center;padding:8px;color:#e0785f}
.sa-rule em{display:inline-block;width:16px;height:16px;background:#f3a48f;margin:2px}
.sa-rule small{font:500 9px/1 var(--fm);color:#c4573e}
.sa-rule .big{font:500 46px/1 var(--fs)}
.sa-rule svg{width:34px;height:34px}
.sa-out>div{position:absolute;width:56%;height:92px;background:#fff;border:1px solid #f0b6a6;left:calc(var(--k) * 20%);top:calc(var(--k) * 12px);display:grid;place-items:center;color:#e0785f;animation:saBob 3s ease-in-out infinite;animation-delay:calc(var(--k) * .3s)}
.sa-out span{position:absolute;left:8px;top:6px;font:500 11px/1 var(--fs);color:#c4573e;text-decoration:underline}
.sa-out svg{width:30px;height:30px}
@keyframes saBob{50%{transform:translateY(-6px)}}
@media (max-width:900px){.hr-sheet{grid-template-columns:minmax(0,1fr);border:0}.hr-cells{display:none}.hr-h,.hr-p,.hr-a,.hr-win{grid-column:1;grid-row:auto;border-left:1px solid #2b3f63}.hr-a{justify-content:flex-start;padding:16px 0}.hr-steps{grid-template-columns:minmax(0,1fr)}}

/* ===== r8: everyday tools ===== */
.tg{padding:clamp(60px,7vw,110px) 0;background:#fff}
.tg-sheet{max-width:1540px;margin:0 auto;border-top:1px solid #2b3f63;border-bottom:1px solid #2b3f63;background:#cfe6f3;padding:0 clamp(16px,5vw,90px)}
.tg-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:30px;align-items:end;padding:clamp(28px,3vw,44px) 0;border-bottom:1px solid #2b3f63}
.tg-head h2{font-size:clamp(32px,3.4vw,54px);line-height:1;letter-spacing:-.035em}
.tg-head p{margin:0;max-width:52ch;color:#1c2a33}
.tg-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(12px,1.6vw,22px);padding:clamp(18px,2vw,30px) 0}
.tg-c{display:flex;flex-direction:column;background:#fff;border:1px solid #2b3f63;color:#061016;transition:transform .3s var(--ease),box-shadow .3s var(--ease)}
.tg-c:hover{transform:translateY(-4px);box-shadow:8px 8px 0 #3f7ea6}
.tg-v{height:220px;display:grid;place-items:center;overflow:hidden;background-color:#f3f6f8;background-image:radial-gradient(circle,rgba(43,63,99,.18) 1px,transparent 1.3px);background-size:14px 14px;border-bottom:1px solid #d6dde2}
.tg-t{padding:18px 20px 20px;display:grid;gap:8px;flex:1;align-content:start}
.tg-t h3{font:500 clamp(22px,1.9vw,28px)/1.08 var(--fserif);letter-spacing:-.025em}
.tg-t p{margin:0;font-size:14px;line-height:1.5;color:#3d4c56}
.tg-t span{display:inline-flex;align-items:center;gap:6px;margin-top:6px;font:500 13px/1 var(--fm);color:#061016}
.tg-t span svg{width:14px;height:14px;transition:transform .2s}
.tg-c:hover .tg-t span svg{transform:translateX(4px)}
@media (max-width:1000px){.tg-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.tg-head{grid-template-columns:minmax(0,1fr)}}
@media (max-width:620px){.tg-grid{grid-template-columns:minmax(0,1fr)}}
/* the small working pictures */
.ta{width:86%;font:400 12px/1.35 var(--fs);color:#061016}
.ta-ocr{display:grid;grid-template-columns:1fr 1.1fr;gap:10px;align-items:center}
.ta-doc{background:#fff;border:1px solid #c8d4db;padding:10px;display:grid;gap:5px;box-shadow:4px 4px 0 #e1eff7}
.ta-doc b{font:600 10px/1 var(--fm);letter-spacing:.1em}
.ta-doc i{display:block;height:7px;background:#eef2f4;font-style:normal;font-size:0}
.ta-doc i.hl{height:auto;padding:2px 4px;font-size:9.5px;line-height:1.2;background:transparent;outline:1.5px solid var(--hc);background:color-mix(in oklab,var(--hc) 14%,#fff)}
.ta-doc .a{--hc:#3f7ea6}.ta-doc .b{--hc:#4fb894}.ta-doc .c{--hc:#e0785f}
.ta-fields{display:grid;gap:6px}
.ta-fields div{display:grid;grid-template-columns:1fr auto;padding:6px 8px;background:#fff;border:1px solid #c8d4db;animation:taIn .6s var(--ease) both}
.ta-fields div:nth-child(2){animation-delay:.3s}.ta-fields div:nth-child(3){animation-delay:.6s}
.ta-fields span{grid-column:1/-1;font:500 9px/1 var(--fm);letter-spacing:.08em;text-transform:uppercase;color:#54646f}
.ta-fields b{font-weight:600;font-size:12px}
.ta-fields em{font:600 10px/1 var(--fm);font-style:normal;color:#2e8a6a;align-self:center}
@keyframes taIn{from{opacity:0;transform:translateX(8px)}to{opacity:1;transform:none}}
.ta-chat{display:grid;gap:8px}
.ta-q{justify-self:end;max-width:78%;padding:7px 10px;background:#061016;color:#fff;font-size:12px}
.ta-a{display:grid;grid-template-columns:auto 1fr;gap:8px;align-items:start}
.ta-bot{display:grid;place-items:center;width:24px;height:24px;background:#7fb8d4;color:#061016;font:700 12px/1 var(--fs)}
.ta-a>div{background:#fff;border:1px solid #c8d4db;padding:8px 10px;display:grid;gap:6px}
.ta-a p{margin:0}
.ta-btn{display:inline-flex;align-items:center;gap:6px;justify-self:start;padding:5px 8px;background:#e1eff7;color:#2b6f93;font-weight:600;font-size:11.5px}
.ta-btn.alt{background:#fbe2da;color:#c4573e}
.ta-btn svg{width:13px;height:13px}
.ta-in{display:flex;justify-content:space-between;align-items:center;padding:7px 10px;background:#fff;border:1px solid #c8d4db;color:#798c98}
.ta-in kbd{font:500 10px/1 var(--fm);padding:3px 5px;border:1px solid #c8d4db}
.ta-drop{position:relative;height:150px}
.ta-file{position:absolute;left:4%;top:6%;display:inline-flex;align-items:center;gap:6px;padding:8px 10px;background:#fff;border:1px dashed #3f7ea6;font-weight:600;animation:taDrag 3.2s ease-in-out infinite}
.ta-file svg{width:15px;height:15px}
@keyframes taDrag{0%{transform:translate(0,0)}45%,100%{transform:translate(30px,28px);opacity:.0}50%{opacity:0}}
.ta-card{position:absolute;right:0;bottom:4%;width:72%;background:#fff;border:1px solid #c8d4db;box-shadow:5px 5px 0 #4fb894;padding:10px 12px;display:grid;gap:4px}
.ta-card b{font-size:13px}
.ta-card span{color:#54646f}
.ta-card div{display:flex;gap:6px;margin-top:4px}
.ta-card em{font-style:normal;padding:4px 8px;background:#061016;color:#fff;font-size:11px}
.ta-card em+em{background:#eef2f4;color:#061016}
.ta-teams{background:#fff;border:1px solid #c8d4db;padding:10px 12px;display:grid;gap:8px;box-shadow:5px 5px 0 #7fb8d4}
.ta-tt{display:flex;align-items:center;gap:6px;font:600 10.5px/1 var(--fm);letter-spacing:.06em;color:#3f7ea6}
.ta-tt svg{width:14px;height:14px}
.ta-kv{display:grid;grid-template-columns:auto 1fr;gap:3px 10px}
.ta-kv span{color:#54646f}
.ta-kv b{text-align:right}
.ta-bt{display:flex;gap:6px}
.ta-bt em{flex:1;text-align:center;font-style:normal;padding:6px;border:1px solid #c8d4db;font-weight:600}
.ta-bt em.ok{background:#4fb894;border-color:#4fb894}
.ta-scan{display:grid;grid-template-columns:1fr auto;gap:12px;align-items:center}
.ta-ph{background:#061016;padding:10px;display:grid;gap:8px}
.ta-vf{position:relative;height:84px;border:1.5px solid #7fb8d4;background:repeating-linear-gradient(90deg,#fff 0 3px,transparent 3px 5px,#fff 5px 6px,transparent 6px 10px) center/70% 40% no-repeat}
.ta-vf i{position:absolute;left:6%;right:6%;height:2px;background:#e0785f;top:10%;animation:taScan 1.8s ease-in-out infinite alternate}
@keyframes taScan{to{top:88%}}
.ta-hit{display:flex;align-items:center;gap:6px;color:#7fb8d4;font-weight:600;font-size:11px}
.ta-hit svg{width:13px;height:13px}
.ta-count b{display:block;font:500 40px/1 var(--fserif);letter-spacing:-.03em}
.ta-count span{color:#54646f}
.ta-list{background:#fff;border:1px solid #c8d4db;padding:10px 12px;display:grid;gap:6px;box-shadow:5px 5px 0 #f0c73f}
.ta-list>b{font-size:13px;margin-bottom:2px}
.ta-list div{display:flex;justify-content:space-between;gap:8px;padding-top:6px;border-top:1px solid #eef2f4}
.ta-list span{display:inline-flex;align-items:center;gap:6px;font-weight:600}
.ta-list span svg{width:13px;height:13px;color:#2e8a6a}
.ta-list em{font-style:normal;color:#54646f}
.ta-ups{display:grid;grid-template-columns:auto 1fr;gap:12px;align-items:center;background:#fff;border:1px solid #c8d4db;padding:12px;box-shadow:5px 5px 0 #e0785f}
.ta-qr{display:grid;grid-template-columns:repeat(7,10px);gap:1px}
.ta-qr i{width:10px;height:10px;background:#eef2f4}
.ta-qr i.k{background:#061016}
.ta-ups>div:last-child{display:grid;gap:3px}
.ta-ups span{color:#54646f}
.ta-renew{display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:center}
.ta-days{background:#061016;color:#fff;padding:12px 14px;text-align:center}
.ta-days b{display:block;font:500 44px/1 var(--fserif);background:#7fb8d4;color:#061016;padding:0 6px}
.ta-days span{display:block;margin-top:6px;font-size:11px}
.ta-renew .ta-kv{background:#fff;border:1px solid #c8d4db;padding:10px}
@media (prefers-reduced-motion:reduce){.ta *{animation:none!important}}

/* ===== r8: the numbers ===== */
.nb{padding:clamp(70px,8vw,120px) 0;background:#fff;overflow:hidden}
.nb-g{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(24px,4vw,60px);align-items:center}
.nb-copy h2{font-size:clamp(36px,4.2vw,66px);line-height:.98;letter-spacing:-.04em;margin-top:18px}
.nb-copy .lead{margin-top:20px;max-width:46ch}
.nb-art{position:relative;height:clamp(520px,46vw,660px)}
.nb-paper{position:absolute;left:8%;right:-10%;top:8%;bottom:4%;background-color:#e1eff7;background-image:linear-gradient(rgba(63,126,166,.45) 1.5px,transparent 1.5px),linear-gradient(90deg,rgba(63,126,166,.45) 1.5px,transparent 1.5px);background-size:30px 30px;clip-path:polygon(30% 0,100% 0,100% 100%,40% 100%,40% 86%,0 86%,0 40%,12% 40%,12% 14%,30% 14%)}
.nb-p{position:absolute;width:clamp(150px,15vw,220px)}
.nb-p.p0{left:4%;top:4%}.nb-p.p1{left:46%;top:0}.nb-p.p2{left:10%;top:52%}.nb-p.p3{left:52%;top:50%}
.nb-ph{aspect-ratio:4/5;background:var(--bg);overflow:hidden}
.nb-ph img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.08);mix-blend-mode:multiply}
.nb-st{position:absolute;left:-14%;top:-8%;max-width:78%;background:#061016;color:#fff;padding:6px 10px 8px}
.nb-p.p1 .nb-st,.nb-p.p3 .nb-st{left:auto;right:-30%;top:10%}
.nb-st b{display:block;margin:-2px -4px 6px;padding:0 6px;background:var(--bg);color:var(--ink);font:500 clamp(30px,3vw,46px)/1.05 var(--fserif);letter-spacing:-.03em;white-space:nowrap}
.nb-st span{display:block;font-size:12.5px;line-height:1.3;color:#d6e1e7}
.nb-p>em{position:absolute;left:8px;bottom:-12px;padding:3px 7px;background:var(--bg);color:var(--ink);font:600 12px/1.2 var(--fs);font-style:normal;border:1px solid rgba(6,16,22,.15)}
.nb-note{position:absolute;right:0;bottom:-8px;margin:0;font-size:12px;color:#798c98}
.calc{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);margin-top:clamp(40px,5vw,70px);border:1px solid #2b3f63}
.calc-in{padding:clamp(20px,2.4vw,34px);display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 24px;background:#f3f6f8}
.calc-in h3{grid-column:1/-1;font:500 clamp(24px,2vw,30px)/1.1 var(--fserif);letter-spacing:-.02em}
.calc-in label{display:grid;gap:6px}
.calc-in label span{font-weight:600;font-size:14px;color:#061016}
.calc-in input{height:44px;padding:0 12px;border:1px solid #2b3f63;background:#fff;font:500 18px/1 var(--fm);color:#061016;border-radius:0}
.calc-in input:focus{outline:3px solid #7fb8d4;outline-offset:0}
.calc-in small{font-size:12px;color:#54646f}
.calc-out{padding:clamp(20px,2.4vw,34px);background:#061016;color:#fff;display:grid;align-content:center;gap:10px}
.calc-out>span{font:500 11px/1.3 var(--fm);letter-spacing:.12em;text-transform:uppercase;color:#91a3ae}
.calc-out b{justify-self:start;padding:0 10px 4px;background:#4fb894;color:#061016;font:500 clamp(46px,4.6vw,72px)/1.05 var(--fserif);letter-spacing:-.04em}
.calc-out em{font-style:normal;font-size:15px;color:#d6e1e7}
.calc-out p{margin:6px 0 0;font-size:12.5px;color:#91a3ae}
@media (max-width:900px){.nb-g,.calc{grid-template-columns:minmax(0,1fr)}.nb-art{height:620px}.calc-in{grid-template-columns:minmax(0,1fr)}.nb-st{left:0}.nb-p.p1 .nb-st,.nb-p.p3 .nb-st{right:0}}
.pg-t>b{background:#e9f3f9;padding:0 8px 4px 0;box-shadow:0 0 0 6px #e9f3f9}

/* ===== r9: mockup panels in the printed kit ===== */
.gpanel{border-radius:0;background:var(--ts,#e6ebee);background-image:none;border:1px solid #c8d4db;padding:clamp(28px,4vw,52px);overflow:hidden}
.gpanel::before{background-image:linear-gradient(rgba(6,16,22,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(6,16,22,.08) 1px,transparent 1px);background-size:24px 24px;opacity:1}
/* solid brand shapes behind the screen: a half sun and a stripe set, in the family colour */
.gpanel::after{content:"";position:absolute;right:-8%;top:-14%;width:38%;aspect-ratio:1;border-radius:50%;background:var(--tc,#3f7ea6);opacity:.9;z-index:0}
.gpanel>*{position:relative;z-index:1}
.gpanel .win{border-radius:0;border:1.5px solid #061016;box-shadow:10px 10px 0 #061016}
.gpanel .card-f,.gpanel .phone,.gpanel .doc{box-shadow:8px 8px 0 #061016}
/* every other row prints its screen: greyscale, then a halftone screen over it, like the object prints */
.show:nth-of-type(even) .gpanel .win{position:relative;filter:grayscale(1) contrast(1.12)}
.show:nth-of-type(even) .gpanel .win::after{content:"";position:absolute;inset:0;pointer-events:none;background-image:radial-gradient(circle,rgba(6,16,22,.22) 1px,transparent 1.3px);background-size:4px 4px;mix-blend-mode:multiply}
.show:nth-of-type(even) .gpanel::after{border-radius:0;width:26%;aspect-ratio:auto;height:70%;top:auto;bottom:-6%;right:-4%;background:repeating-linear-gradient(135deg,var(--tc) 0 14px,transparent 14px 30px);opacity:1}
/* a margin note: the first point of the row, pointing at the screen */
.gp-note{position:relative;z-index:2;display:flex;align-items:flex-start;gap:6px;margin:-26px 0 0 18px;max-width:80%}
.gp-note svg{flex:none;width:46px;height:32px;margin-top:-10px;overflow:visible}
.gp-note svg path{fill:none;stroke:#061016;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.gp-note span{padding:4px 9px 5px;background:#f0c73f;color:#061016;font:500 clamp(15px,1.2vw,18px)/1.25 var(--fserif);font-style:italic;letter-spacing:-.01em;box-shadow:4px 4px 0 #061016}
.show-t h3{font-family:var(--fserif);font-weight:500}

/* ===== r9: the home showcase in the printed kit ===== */
.xpanel{background:#fff;border:1.5px solid #061016;border-radius:0;box-shadow:10px 10px 0 var(--c)}
.xp-t h3{color:#061016}
.xticks li{color:#1c2a33}
.xp-v{border-radius:0;border:1px solid #c8d4db;background:var(--s,#e1eff7);background-image:linear-gradient(rgba(6,16,22,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(6,16,22,.07) 1px,transparent 1px);background-size:24px 24px}
.xp-v .win{border-radius:0;border:1.5px solid #061016}
.xt-tabs .mtab{border-radius:0}

/* ===== r9: feature grids and data tables in the printed kit ===== */
.fgrid{gap:0;border-top:1px solid #c8d4db;border-left:1px solid #c8d4db}
.fc{border-radius:0;border:0;border-right:1px solid #c8d4db;border-bottom:1px solid #c8d4db;padding:28px 26px 30px;background:#fff;position:relative}
.fc::before{content:"";position:absolute;left:0;top:0;width:100%;height:6px;background:var(--tc,#3f7ea6)}
.fc:hover{transform:translateY(-4px);box-shadow:8px 8px 0 var(--tc,#3f7ea6);z-index:1}
.fc .tile{border-radius:0;background:var(--tc,#3f7ea6);color:#061016;width:44px;height:44px}
.fc h4,.fc .fc-h{font:500 clamp(20px,1.6vw,24px)/1.15 var(--fserif);letter-spacing:-.02em;margin-top:4px}
.fc p{color:#3d4c56}
.fgrid .fc:nth-child(6n+1){--tc:#7fb8d4}.fgrid .fc:nth-child(6n+2){--tc:#4fb894}.fgrid .fc:nth-child(6n+3){--tc:#f0c73f}.fgrid .fc:nth-child(6n+4){--tc:#e0785f}.fgrid .fc:nth-child(6n+5){--tc:#3f7ea6}.fgrid .fc:nth-child(6n+6){--tc:#8ea6b4}
.dt{border-radius:0;border:1.5px solid #061016;box-shadow:10px 10px 0 #7fb8d4}
.dt thead th{background:#061016;color:#bfced7}
.dt td:first-child{background:#e1eff7;font:500 17px/1.3 var(--fserif);color:#061016}
.dt tbody tr:hover td{background:#f3f6f8}
.dt tbody tr:hover td:first-child{background:#cfe6f3}

/* ===== r9: riso trio, buttons on one line ===== */
.jx-riso{align-items:stretch}
.jx-r{grid-template-rows:auto auto 1fr auto;height:100%}
.jx-r .btn{align-self:end}

/* ===== r9: numbers, tags off the faces ===== */
.nb-st{top:auto;bottom:-6%;left:-18%}
.nb-p.p1 .nb-st,.nb-p.p3 .nb-st{top:auto;bottom:-6%;right:-26%}
.nb-p>em{bottom:auto;top:-12px}
.nb-ph img{object-position:50% 18%!important}
@media (max-width:900px){.nb-st{left:0}.nb-p.p1 .nb-st,.nb-p.p3 .nb-st{right:0}}

/* ===== r9: page colour themes ===== */
body.theme-ink{background:#061016}
body.theme-blue{background:#3f7ea6}
body.theme-sky{background:#e1eff7}
.theme-ink main .sec,.theme-blue main .sec,.theme-sky main .sec{background:transparent}
.theme-ink main .sec.alt{background:#0b1c26}
.theme-blue main .sec.alt{background:#35709a}
.theme-sky main .sec.alt{background:#cfe6f3}
:is(.theme-ink,.theme-blue) :is(.sec-head h2,.h2wrap h2,.show-t h3,.rel-h h2,.faq summary){color:#fff}
:is(.theme-ink,.theme-blue) :is(.sec-head .lead,.h2wrap .lead,.show-t>p,.ticks li,.faq .ans,.pts4 p){color:#d6e1e7}
:is(.theme-ink,.theme-blue) :is(.sec-head .kicker,.show-t .lbl){color:#bfced7}
:is(.theme-ink,.theme-blue) .pts4 b{color:#fff}
:is(.theme-ink,.theme-blue) .pts4{border-top-color:rgba(191,206,215,.3)}
:is(.theme-ink,.theme-blue) .pts4>div+div{border-left-color:rgba(191,206,215,.3)}
:is(.theme-ink,.theme-blue) .tag2{background:transparent;color:#fff;border-color:rgba(255,255,255,.6)}
:is(.theme-ink,.theme-blue) .faq details{border-bottom-color:rgba(191,206,215,.3)}
:is(.theme-ink,.theme-blue) .ticks .ic{color:#061016}
:is(.theme-ink,.theme-blue) .wrap::before,:is(.theme-ink,.theme-blue) .wrap::after{opacity:.15}
:is(.theme-ink,.theme-blue) .hr{background:transparent}
:is(.theme-ink,.theme-blue) .hr-sheet{border-color:rgba(191,206,215,.6)}
:is(.theme-ink,.theme-blue) .hr-cells i{border-color:rgba(191,206,215,.25)}
:is(.theme-ink,.theme-blue) .sx::before{background-image:radial-gradient(circle,rgba(191,206,215,.25) 1.4px,transparent 1.6px)}
:is(.theme-ink,.theme-blue) .sx-meter{box-shadow:0 0 0 1px rgba(191,206,215,.4)}
.theme-blue .hr-h,.theme-blue .hr-p{background:#e1eff7}
.theme-ink .dt{box-shadow:10px 10px 0 #4fb894}

/* ===== r9: contact ===== */
.ct{position:relative;margin-top:-72px;padding:140px 0 90px;overflow:hidden;background-color:#e1eff7;background-image:linear-gradient(rgba(255,255,255,.9) 1.5px,transparent 1.5px),linear-gradient(90deg,rgba(255,255,255,.9) 1.5px,transparent 1.5px);background-size:30px 24px}
.ct-in{position:relative;z-index:2;max-width:var(--wrap);margin:0 auto;padding:0 28px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.95fr);gap:clamp(30px,5vw,80px);align-items:start}
.ct h1{font-size:clamp(44px,5.4vw,84px);line-height:.96;letter-spacing:-.04em;margin-top:22px;color:#061016}
.ct h1 em{font-style:italic;padding:0 .08em;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 60' preserveAspectRatio='none'%3E%3Cpath d='M6 14 C 80 6, 200 10, 394 6 L 396 50 C 300 56, 120 52, 4 54 Z' fill='%23f0c73f' fill-opacity='.8'/%3E%3C/svg%3E") 0 62%/100% 70% no-repeat}
.ct .lead{margin-top:24px;max-width:46ch;color:#1c2a33}
.ct-steps{list-style:none;padding:0;margin:30px 0 0;display:grid;gap:8px;max-width:520px}
.ct-steps li{display:grid;background:var(--bg);border:1px solid rgba(6,16,22,.12)}
.ct-steps b{padding:11px 16px;border-bottom:1px solid rgba(6,16,22,.15);font:500 21px/1.1 var(--fserif);color:#061016}
.ct-steps span{padding:10px 16px 12px;font-size:14.5px;color:#1c2a33}
.ct-facts{list-style:none;padding:0;margin:26px 0 0;display:flex;flex-wrap:wrap;gap:8px}
.ct-facts li{display:inline-flex;align-items:center;gap:7px;padding:7px 11px;background:#fff;border:1px solid #c8d4db;font-size:13.5px;color:#061016}
.ct-facts svg{width:15px;height:15px}
.ct-form{background:#fff;border:1.5px solid #061016;box-shadow:12px 12px 0 #e0785f}
.ct-fh{display:flex;justify-content:space-between;align-items:baseline;gap:12px;flex-wrap:wrap;padding:18px 24px;background:#fbe2da;border-bottom:1.5px solid #061016}
.ct-fh b{font:500 26px/1.1 var(--fserif);letter-spacing:-.02em;color:#061016}
.ct-fh span{font:500 11px/1 var(--fm);letter-spacing:.1em;text-transform:uppercase;color:#c4573e}
.ct-form .form{padding:24px;margin:0}
.ct-form .field input,.ct-form .field select,.ct-form .field textarea{border-radius:0;border:1.5px solid #061016}
.ct-form .btn{border-radius:2px;width:100%}
.ct-mail{margin:0;padding:0 24px 22px;font-size:14px;color:#3d4c56}
.ct-mail a{color:#061016;border-bottom:1px solid #061016}
.ct-art{position:absolute;inset:0;pointer-events:none}
.ct-tri{position:absolute;left:-4%;bottom:0;width:30%;height:46%;fill:#e0785f}
.ct-circ{left:auto!important;right:0;top:110px;width:clamp(80px,7vw,110px);--cc:#4fb894}
.ct-bot{position:absolute;left:12%;bottom:-10px;width:clamp(200px,18vw,280px);height:clamp(240px,22vw,330px);min-height:0}
.ct-bot.is-3d{height:clamp(240px,22vw,330px)}
.ct-bot .login-bot{height:100%}
.ct-copy{padding-bottom:clamp(160px,18vw,260px)}
@media (max-width:900px){.ct-in{grid-template-columns:minmax(0,1fr)}.ct-copy{padding-bottom:20px}.ct-bot,.ct-tri{display:none}.ct-circ{display:none}}

/* ===== r10: a bigger, printed menu bar ===== */
.hdr{top:12px}
.hdr .wrap{height:74px;margin-top:12px;border-radius:0;border:1.5px solid #061016;background:#fff;box-shadow:6px 6px 0 #7fb8d4;padding:0 12px 0 22px;backdrop-filter:none;-webkit-backdrop-filter:none}
.hdr.scrolled .wrap{background:#fff;box-shadow:6px 6px 0 #3f7ea6}
.brand img{height:38px}
.nav{gap:4px;margin-left:10px}
.nav>a,.nav>.dd>button{padding:12px 14px;border-radius:0;font:500 15.5px/1 var(--fs);color:#061016;position:relative}
.nav>a::after,.nav>.dd>button::after{content:"";position:absolute;left:14px;right:14px;bottom:6px;height:3px;background:#f0c73f;transform:scaleX(0);transform-origin:left;transition:transform .25s var(--ease)}
.nav>a:hover,.nav>.dd>button:hover,.nav>.dd.open>button{background:#e1eff7}
.nav>a:hover::after,.nav>.dd>button:hover::after,.nav>.dd.open>button::after{transform:scaleX(1)}
.hdr-cta .btn{height:46px;border-radius:0;padding:0 18px;font-size:15px}
.hdr-cta .btn-p{box-shadow:4px 4px 0 #f0c73f}
.mega,.mega-wrap .mega{border-radius:0!important;border:1.5px solid #061016!important;box-shadow:8px 8px 0 #7fb8d4!important}
/* every hero that runs under the bar moves up by its new height */
.kh,.hx.hj,.ht,.hr,.ct{margin-top:-98px}
.kh-copy{padding-top:190px}
.hx.hj{padding-top:210px}
.ht{padding-top:170px}
.hr{padding-top:132px}
.ct{padding-top:160px}
.bsum{top:110px}
.cmp thead th{top:100px}
@media (max-width:900px){.hdr .wrap{height:64px}.brand img{height:32px}.kh,.hx.hj,.ht,.hr,.ct{margin-top:-88px}}

/* ===== r10: the robot in cameo ===== */
.cameo{position:absolute;z-index:6;width:clamp(110px,10vw,150px);outline:0;cursor:default}
.cameo img{display:block;width:100%;height:auto;animation:cmBob 3.6s ease-in-out infinite;transform-origin:50% 90%;transition:transform .35s var(--ease)}
.cameo:hover img,.cameo:focus-visible img{animation-play-state:paused;transform:rotate(-7deg) translateY(-8px) scale(1.04)}
.cameo-say{position:absolute;left:62%;top:4%;width:max-content;max-width:220px;padding:8px 11px;background:#fff;border:1.5px solid #061016;box-shadow:4px 4px 0 #f0c73f;font:500 14px/1.3 var(--fserif);color:#061016;opacity:0;transform:translateY(6px) scale(.96);transform-origin:0 100%;transition:opacity .25s,transform .25s var(--ease);pointer-events:none}
.cameo-say::before{content:"";position:absolute;left:-9px;bottom:10px;width:14px;height:14px;background:#fff;border-left:1.5px solid #061016;border-bottom:1.5px solid #061016;transform:rotate(45deg)}
.cameo:hover .cameo-say,.cameo:focus-visible .cameo-say{opacity:1;transform:none}
.cameo:focus-visible{outline:3px solid #7fb8d4;outline-offset:2px}
@keyframes cmBob{50%{transform:translateY(-5px)}}
.tg-head{position:relative}
.cm-tools{right:-10px;top:-118px}
.calc-out{position:relative}
.cm-calc{right:8px;bottom:6px;width:clamp(90px,8vw,120px)}
.cm-calc .cameo-say{left:auto;right:70%;top:-20%}
.cm-calc .cameo-say::before{left:auto;right:-9px;border-left:0;border-right:1.5px solid #061016}
.cm-foot{left:3%;top:-8px;width:clamp(100px,9vw,140px);z-index:2}
.builder{position:relative}
.cm-price{right:-40px;top:-150px;width:clamp(100px,9vw,130px)}
.cm-price .cameo-say{left:auto;right:72%}
.cm-price .cameo-say::before{left:auto;right:-9px;border-left:0;border-right:1.5px solid #061016}
.icat{position:relative}
.cm-int{right:-6px;top:-150px}
.cm-int .cameo-say{left:auto;right:72%}
.cm-int .cameo-say::before{left:auto;right:-9px;border-left:0;border-right:1.5px solid #061016}
.cm-404{position:relative;width:clamp(180px,20vw,280px)}
.cm-404 .cameo-say{opacity:1;transform:none}
@media (max-width:900px){.cm-tools,.cm-price,.cm-int{display:none}.cm-calc{position:relative;right:auto;bottom:auto;margin-top:10px}}
@media (prefers-reduced-motion:reduce){.cameo img{animation:none}}

/* ===== r10: 404 ===== */
.nf{margin-top:-98px;padding:190px 0 120px;background-color:#e1eff7;background-image:linear-gradient(rgba(255,255,255,.9) 1.5px,transparent 1.5px),linear-gradient(90deg,rgba(255,255,255,.9) 1.5px,transparent 1.5px);background-size:30px 24px}
.nf-in{max-width:1100px;margin:0 auto;padding:0 28px;display:grid;grid-template-columns:auto minmax(0,1fr);gap:clamp(20px,4vw,60px);align-items:center}
.nf h1{font-size:clamp(40px,5vw,76px);line-height:.98;letter-spacing:-.04em;margin-top:20px}
.nf h1 em{font-style:italic;color:#3f7ea6}
.nf .lead{margin-top:20px}
.nf .acts{margin-top:28px}
.nf .btn{border-radius:2px}
@media (max-width:760px){.nf-in{grid-template-columns:minmax(0,1fr)}}

/* ===== r10: the record ticker ===== */
.tick{overflow:hidden;background:#061016;border-top:1px solid #173d55;border-bottom:1px solid #173d55;padding:14px 0}
.tick-run{display:flex;width:max-content;animation:tickRun 60s linear infinite}
.tick:hover .tick-run{animation-play-state:paused}
.tick span{display:inline-flex;align-items:center;gap:10px;padding:0 28px;font:500 13px/1 var(--fm);letter-spacing:.04em;color:#bfced7;white-space:nowrap;border-right:1px solid #173d55}
.tick i{width:9px;height:9px}
@keyframes tickRun{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.tick-run{animation:none}}

/* ===== r10: the connection map ===== */
.cx{padding:clamp(70px,8vw,120px) 0;background:#fff}
.cx-map{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr) minmax(0,1fr);gap:clamp(30px,6vw,110px);margin-top:46px;padding:clamp(24px,3vw,44px);background-color:#eef2f4;background-image:linear-gradient(rgba(6,16,22,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(6,16,22,.07) 1px,transparent 1px);background-size:24px 24px;border:1px solid #c8d4db}
.cx-wires{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible;z-index:0}
.cx-wires path{fill:none;stroke:#8ea6b4;stroke-width:2;stroke-dasharray:6 5}
.cx-wires path.on{stroke:#061016;stroke-width:3;stroke-dasharray:none}
.cx-wires rect{shape-rendering:crispEdges}
.cx-col{position:relative;z-index:1;display:grid;gap:12px;align-content:center}
.cx-col h3{font:500 11px/1 var(--fm);letter-spacing:.14em;text-transform:uppercase;color:#54646f;margin-bottom:4px}
.cx-n{display:grid;grid-template-columns:auto 1fr;gap:2px 12px;align-items:center;padding:12px 14px;background:#fff;border:1.5px solid #061016;box-shadow:5px 5px 0 var(--c,#8ea6b4);cursor:default;transition:transform .2s var(--ease),box-shadow .2s var(--ease);outline:0}
.cx-n:hover,.cx-n:focus-visible,.cx-n.on{transform:translate(-2px,-2px);box-shadow:8px 8px 0 var(--c,#3f7ea6)}
.cx-n span{grid-row:1/3;display:grid;place-items:center;width:38px;height:38px;background:var(--c,#061016);color:#061016}
.cx-n.sys span{color:#fff}
.cx-n span svg{width:18px;height:18px}
.cx-n b{font:500 18px/1.15 var(--fserif);color:#061016}
.cx-n em{font-style:normal;font-size:13px;color:#54646f}
.cx-rec{position:relative;z-index:1;align-self:center;background:#fff;border:1.5px solid #061016;box-shadow:10px 10px 0 #061016;padding:18px}
.cx-rh{display:flex;justify-content:space-between;align-items:center}
.cx-bot{display:block;width:44%;height:auto;margin:-10px auto -6px}
.cx-steps{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.cx-steps div{background:var(--bg);padding:10px 12px;border:1px solid rgba(6,16,22,.12);transition:transform .3s var(--ease)}
.cx-steps div.on{transform:translateY(-3px);box-shadow:4px 4px 0 #061016}
.cx-steps em{display:block;font:500 11px/1 var(--fm);font-style:normal;color:#54646f}
.cx-steps b{display:block;margin-top:4px;font:500 19px/1.1 var(--fserif);color:#061016}
.cx-foot{margin:14px 0 0;font:500 10.5px/1.5 var(--fm);letter-spacing:.1em;text-transform:uppercase;color:#54646f}
.cx-note{margin:18px 0 0;text-align:center;font:500 12px/1.4 var(--fm);letter-spacing:.12em;text-transform:uppercase;color:#54646f}
@media (max-width:1000px){.cx-map{grid-template-columns:minmax(0,1fr)}.cx-wires{display:none}}

/* ===== r10: hover touches ===== */
/* a pixel spotlight that follows the cursor across the halftone pictures */
.htc-pic::after,.tg-v{--sx:50%;--sy:50%}
.htc-pic::after{content:"";position:absolute;inset:0;z-index:4;pointer-events:none;opacity:0;transition:opacity .3s;background:radial-gradient(circle 90px at var(--sx) var(--sy),rgba(255,255,255,.45),transparent 70%)}
.htc:hover .htc-pic::after{opacity:1}
.tg-v{position:relative}
.tg-v::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .3s;background-image:radial-gradient(circle,rgba(63,126,166,.55) 1.4px,transparent 1.7px);background-size:14px 14px;-webkit-mask-image:radial-gradient(circle 110px at var(--sx) var(--sy),#000,transparent);mask-image:radial-gradient(circle 110px at var(--sx) var(--sy),#000,transparent)}
.tg-c:hover .tg-v::after{opacity:1}
/* parallax on the hero collages: each layer moves a little with the cursor */
.hj-art>*,.ht-art>*{transition:translate .5s cubic-bezier(.2,.8,.2,1)}
.hj-tri{translate:calc(var(--mx,0) * -22px) calc(var(--my,0) * -10px)}
.hj-bar{translate:calc(var(--mx,0) * -12px) 0}
.hj-str{translate:calc(var(--mx,0) * 26px) calc(var(--my,0) * 10px)}
.hj-stat{translate:calc(var(--mx,0) * 14px) calc(var(--my,0) * 12px)}
.hj-call{translate:calc(var(--mx,0) * -16px) calc(var(--my,0) * -12px)}
.hj-pix{translate:calc(var(--mx,0) * 6px) calc(var(--my,0) * 4px)}
.ht-circ{translate:calc(var(--mx,0) * -24px) calc(var(--my,0) * -14px)}
.ht-str{translate:calc(var(--mx,0) * 22px) calc(var(--my,0) * 12px)}
.ht-call{translate:calc(var(--mx,0) * -12px) calc(var(--my,0) * -10px)}
.ht-tiles{translate:calc(var(--mx,0) * 8px) 0}
/* the trail canvas under the cursor on grid-paper areas */
.pixtrail{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;display:block}
@media (prefers-reduced-motion:reduce){.hj-art>*,.ht-art>*{translate:none!important}}
.cameo{width:clamp(170px,15vw,230px)}
.cameo-say{left:66%;top:14%}
.cm-tools{right:-24px;top:-196px;width:clamp(180px,15vw,230px)}
.cm-calc{width:clamp(130px,11vw,170px);right:-6px;bottom:-14px}
.cm-foot{width:clamp(170px,13vw,210px);top:-92px;left:2%}
.cm-price{right:-50px;top:-210px;width:clamp(170px,14vw,220px)}
.cm-int{right:-20px;top:-210px;width:clamp(180px,15vw,230px)}
.cm-404{width:clamp(240px,26vw,360px)}
.cameo-say{font-size:15px}
.cm-foot{top:18px}
.cm-404 .cameo-say{left:8%;top:-14%}
.cm-404 .cameo-say::before{left:30px;bottom:-9px;transform:rotate(-45deg)}

/* ===== r11: no eyebrows. A label in tracked capitals over a heading says nothing the heading does not. ===== */
.kicker,.sec-head .kicker,.h2wrap>.tag2,.hx-copy>.tag2,.kh-tag,.ht-tag,.hr-h>.tag2,.show-t .lbl,.ct-copy>.tag2,.nf-copy>.tag2,.jx-plat-g .tag2,.nb-copy>.tag2,.pg-head>.tag2,.fx-tag,.jx-ft>.tag2,.d-tag,.mega h6,.rel-h>.tag2,.mcard .fm{display:none!important}
.h2wrap h2,.sec-head h2{margin-top:0}
.kh h1,.ht h1,.hx-copy h1,.ct h1,.nf h1,.fx h2,.nb-copy h2,.jx-plat-g h2,.pg-head h2,.jx-ft h3{margin-top:0}
.hr-h{align-content:center}
.htc-k{font:600 13px/1.2 var(--fs);letter-spacing:0;text-transform:none;opacity:1;color:#3d4c56}
.dcard h3{padding-top:20px}

/* ===== r11: square, pixel menu ===== */
.mega{border-radius:0;gap:2px}
.mi{border-radius:0;padding:10px 12px;transition:background .18s,box-shadow .18s,transform .18s}
.mi:hover{background:#e1eff7;box-shadow:4px 4px 0 #061016;transform:translate(-2px,-2px)}
.mi .tile,.mi .tile.soft{position:relative;border-radius:0!important;width:40px;height:40px;background:var(--fi)!important;color:#fff!important;display:grid;place-items:center;box-shadow:inset 0 0 0 1.5px #061016}
/* a corner of pixels knocked out of each tile */
.mi .tile::before{content:"";position:absolute;right:0;top:0;width:10px;height:10px;background:linear-gradient(#fff 0 5px,transparent 5px) 0 0/10px 10px,linear-gradient(90deg,transparent 5px,#fff 5px) 0 0/10px 10px;background-repeat:no-repeat}
.mi .tile .ic{color:#fff;stroke-width:2.2}
.new{border-radius:0!important;box-shadow:2px 2px 0 #061016}
.mnav .mi .tile{background:var(--fi)!important}

/* ===== r11: platform module grid in the printed kit ===== */
.mgrid{gap:0;border-top:1px solid #c8d4db;border-left:1px solid #c8d4db}
.mcard{position:relative;border-radius:0;border:0;border-right:1px solid #c8d4db;border-bottom:1px solid #c8d4db;padding:30px 26px 26px}
.mcard::before{height:6px}
.mcard:hover{transform:translate(-3px,-3px);box-shadow:8px 8px 0 var(--tc);z-index:1}
.mcard .tile{border-radius:0;color:#061016;box-shadow:inset 0 0 0 1.5px #061016}
.mcard h4,.mcard .mc-h{font:500 21px/1.15 var(--fserif);letter-spacing:-.02em}

/* ===== r11: the footer heading rule, drawn in pixels ===== */
.ft3-h{justify-content:flex-start;gap:12px;border-bottom:0;padding-bottom:16px;position:relative}
.ft3-h::after{content:"";position:absolute;left:0;right:0;bottom:0;height:4px;background:repeating-linear-gradient(90deg,#3f7ea6 0 8px,transparent 8px 12px);background-size:12px 4px;opacity:.7;transition:opacity .3s}
.ft3-h:hover::after{opacity:1;animation:pxRule .9s linear infinite;background-image:repeating-linear-gradient(90deg,#7fb8d4 0 8px,transparent 8px 12px)}
@keyframes pxRule{to{background-position:24px 0}}
.ft3-g li a{position:relative;display:inline-block;transition:color .15s,transform .2s var(--ease)}
.ft3-g li a::before{content:"";position:absolute;left:-14px;top:50%;width:6px;height:6px;margin-top:-3px;background:#f0c73f;transform:scale(0);transition:transform .2s var(--ease)}
.ft3-g li a:hover{transform:translateX(4px)}
.ft3-g li a:hover::before{transform:scale(1)}
@media (prefers-reduced-motion:reduce){.ft3-h:hover::after{animation:none}}

/* ===== r11: the home showcase, printed and pixelled ===== */
.xp-v{background:#fff;overflow:hidden}
.xp-v::before{content:"";position:absolute;inset:auto 0 0 0;height:78%;background-color:var(--c);background-image:linear-gradient(rgba(255,255,255,.35) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.35) 1px,transparent 1px);background-size:14px 14px;clip-path:polygon(0 30%,10% 30%,10% 18%,24% 18%,24% 8%,46% 8%,46% 0,70% 0,70% 12%,84% 12%,84% 26%,100% 26%,100% 100%,0 100%);z-index:0}
.xp-v>*{position:relative;z-index:1}
.xp-main .win{position:relative;filter:grayscale(1) contrast(1.15);box-shadow:10px 10px 0 #061016}
.xp-main .win::after{content:"";position:absolute;inset:0;pointer-events:none;background-image:radial-gradient(circle,rgba(6,16,22,.24) 1px,transparent 1.3px);background-size:4px 4px;mix-blend-mode:multiply}
.xp-float .card-f{box-shadow:8px 8px 0 #061016;border-radius:0}

/* ===== r11: a phone that looks like a phone ===== */
.phone{width:250px;border-radius:44px;background:#0b0d10;padding:9px;box-shadow:inset 0 0 0 1.5px #3b434c,0 0 0 1.5px #061016,10px 10px 0 rgba(6,16,22,.85)}
.phone .scr{border-radius:36px;height:530px}
.phone .notch{top:19px;width:88px;height:25px;background:#000;z-index:4}
.phone .scr::after{content:"";position:absolute;left:50%;bottom:7px;width:104px;height:4px;margin-left:-52px;border-radius:4px;background:#061016;opacity:.85;z-index:4}
.ph-btn{position:absolute;width:3px;background:#2a2f35;border-radius:2px}
.ph-btn.ph-a{left:-3px;top:104px;height:28px}.ph-btn.ph-b{left:-3px;top:146px;height:48px}.ph-btn.ph-c{right:-3px;top:150px;height:70px}
.ph-sb{position:relative;z-index:3;display:flex;justify-content:space-between;align-items:center;height:46px;padding:12px 26px 0 30px;font:600 13px/1 var(--fs);color:#061016}
.ph-sb span{display:flex;align-items:center;gap:5px}
.ph-sig{display:flex;align-items:flex-end;gap:1.5px;height:10px}
.ph-sig em{width:3px;background:#061016;border-radius:1px}
.ph-sig em:nth-child(1){height:4px}.ph-sig em:nth-child(2){height:6px}.ph-sig em:nth-child(3){height:8px}.ph-sig em:nth-child(4){height:10px}
.ph-wifi{width:14px;height:10px;background:radial-gradient(circle at 50% 100%,#061016 0 2.5px,transparent 3px),radial-gradient(circle at 50% 100%,transparent 0 4.5px,#061016 4.5px 6px,transparent 6.5px),radial-gradient(circle at 50% 100%,transparent 0 8px,#061016 8px 9.5px,transparent 10px);clip-path:polygon(0 0,100% 0,50% 100%)}
.ph-bat{position:relative;width:23px;height:11px;border:1.4px solid #061016;border-radius:3px;padding:1.2px}
.ph-bat::after{content:"";position:absolute;right:-3.5px;top:3px;width:2px;height:4px;background:#061016;border-radius:0 1px 1px 0}
.ph-bat em{display:block;width:78%;height:100%;background:#061016;border-radius:1px}
.xp-float .phone{transform:scale(.88)}

/* ===== r11: more hover touches ===== */
/* buttons press like a printed key: lift on hover with a hard shadow, press on click */
.btn-p,.btn-o,.btn-w,.btn-g{transition:transform .15s var(--ease),box-shadow .15s var(--ease),background .2s}
.btn-p:hover,.btn-o:hover,.btn-w:hover,.btn-g:hover{transform:translate(-2px,-2px);box-shadow:4px 4px 0 #f0c73f}
.btn-o:hover{box-shadow:4px 4px 0 #061016}
.btn-p:active,.btn-o:active,.btn-w:active,.btn-g:active{transform:translate(1px,1px);box-shadow:0 0 0 #061016}
/* portraits come into colour under the cursor */
.nb-ph img{transition:filter .4s,mix-blend-mode .4s}
.nb-p:hover .nb-ph img{filter:none;mix-blend-mode:normal}
.nb-p{transition:transform .3s var(--ease)}
.nb-p:hover{transform:translateY(-6px);z-index:3}
/* knockout tiles shuffle their lines */
.jx-tile .ko>span{transition:transform .35s var(--ease)}
.jx-tile:hover .ko>span:nth-of-type(1){transform:translateX(-10px)}
.jx-tile:hover .ko>span:nth-of-type(2){transform:translateX(8px)}
.jx-tile:hover .ko>span:nth-of-type(3){transform:translateX(-6px)}
/* story photo: a hard shadow appears and the photo warms up */
.sx-photo img{transition:transform .6s var(--ease)}
.sx-stage:hover .sx-photo img{transform:scale(1.04)}
/* lifecycle steps slide forward */
.jx-step{transition:transform .25s var(--ease),box-shadow .25s var(--ease)}
.jx-step:hover{transform:translateX(8px);box-shadow:-6px 0 0 #061016}
/* integrations catalog cells */
.icat-c{transition:background .2s,box-shadow .2s,transform .2s}
.icat-c:hover{box-shadow:inset 0 -4px 0 var(--c)}
@media (prefers-reduced-motion:reduce){.btn-p:hover,.btn-o:hover,.btn-w:hover,.btn-g:hover,.nb-p:hover,.jx-step:hover{transform:none}}
.xp-v>.xp-float{position:absolute;z-index:2}
.phone .notch{width:34%;top:17px;height:24px}
.ph-sb{padding:13px 8% 0 11%;font-size:12.5px}
.ph-sb span{gap:4px}
.phone .notch{width:30%}

/* ===== r12: contact keeps one robot ===== */
.page-contact .cm-foot{display:none}

/* ===== r12: the dark stats band, as stepped printed cells under a flowing stair ===== */
.sec.night{position:relative;overflow:hidden;background:#061016;padding-top:clamp(200px,18vw,260px)}
.sec.night>.wrap{position:relative;z-index:1}
.nt-top{top:0;right:0;width:72%;height:clamp(150px,15vw,220px)}
.night .sec-head h2{color:#fff}
.night .sec-head .lead{color:#bfced7}
.night .stats{gap:18px;background:transparent;border:0;border-radius:0;overflow:visible;align-items:start}
.night .stat{background:#061016;border:1px solid rgba(127,184,212,.45);padding:26px 24px 28px}
.night .stat:nth-child(2){margin-top:48px}.night .stat:nth-child(3){margin-top:96px}.night .stat:nth-child(4){margin-top:144px}
.night .stat b{display:inline-block;font:300 clamp(48px,4.8vw,76px)/.95 var(--fs);letter-spacing:-.04em;color:#fff}
.night .stat span{color:#7fb8d4;font-size:15px;line-height:1.4}
.night .stat:hover{border-color:#7fb8d4;box-shadow:6px 6px 0 #3f7ea6}
@media (max-width:900px){.night .stat:nth-child(n){margin-top:0}.night .stats{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* ===== r12: feature index ===== */
.fi-sec{background:#fff}
.fi{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin-top:40px;border-top:1px solid #c8d4db;border-left:1px solid #c8d4db}
.fi-c{position:relative;padding:22px 20px 24px;border-right:1px solid #c8d4db;border-bottom:1px solid #c8d4db;background:#fff;transition:background .2s,box-shadow .2s,transform .2s}
.fi-c span{display:grid;place-items:center;width:34px;height:34px;background:var(--fc);color:#fff;box-shadow:inset 0 0 0 1.5px #061016}
.fi-c span svg{width:17px;height:17px}
.fi-c b{display:block;margin-top:14px;font:500 19px/1.15 var(--fserif);letter-spacing:-.015em;color:#061016}
.fi-c p{margin:6px 0 0;font-size:14px;line-height:1.5;color:#3d4c56}
.fi-c:hover{background:#f3f6f8;transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--fc);z-index:1}
.fi-c:nth-child(3n+2) span{background:#7fb8d4;color:#061016}
.fi-c:nth-child(3n) span{background:#f0c73f;color:#061016}
@media (max-width:1000px){.fi{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.fi{grid-template-columns:minmax(0,1fr)}}

/* ===== r12: new mockups ===== */
.m5-rack{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:14px;margin-top:12px}
.m5-photo{position:relative;background:#eef2f4;border:1px solid #c8d4db;overflow:hidden;min-height:250px}
.m5-photo img{position:absolute;left:50%;top:50%;width:120%;max-width:none;height:auto;transform:translate(-50%,-50%)}
.m5-photo i{position:absolute;left:20%;right:20%;height:9%;border:2px solid #4fb894;background:rgba(79,184,148,.12);animation:m5Box 2.4s ease-in-out infinite}
.m5-photo i:nth-child(3){animation-delay:.3s}.m5-photo i:nth-child(4){animation-delay:.6s}.m5-photo i:nth-child(5){animation-delay:.9s}
@keyframes m5Box{0%,100%{opacity:.3}50%{opacity:1}}
.m5-photo span{position:absolute;left:8px;bottom:8px;padding:3px 7px;background:#061016;color:#fff;font:500 10px/1 var(--fm);letter-spacing:.06em}
.m5-elev{display:grid;gap:3px;padding:8px;background:#1c2027;border:1px solid #061016}
.m5-u{display:grid;grid-template-columns:34px 1fr auto;align-items:center;gap:6px;height:22px;padding:0 6px;background:#2a2f35;color:#798c98;font-size:10.5px}
.m5-u em{font:500 9.5px/1 var(--fm);font-style:normal;color:#91a3ae}
.m5-u.f{background:#fff;color:#061016;box-shadow:inset 4px 0 0 var(--t);font-weight:600}
.m5-u svg{width:12px;height:12px;color:#2e8a6a}
.m5-bar,.m5-sla{position:relative;display:flex;align-items:center;gap:8px;width:100%}
.m5-bar i,.m5-sla i{display:block;height:8px;flex:1;background:linear-gradient(90deg,var(--c) var(--p),#e6ebee var(--p))}
.m5-sla em{font:600 11px/1 var(--fm);font-style:normal;color:#061016;min-width:48px;text-align:right}
.m5-cam{position:relative;height:220px;margin:0 10px;background:#1c2027;display:grid;place-items:center;overflow:hidden}
.m5-label{width:70%;padding:10px;background:#fff;display:grid;gap:4px;transform:rotate(-3deg);font-size:10px}
.m5-label b{font:800 14px/1 var(--fs);letter-spacing:.06em}
.m5-code{display:flex;height:26px;gap:1px}
.m5-code i{flex:1;background:#fff}.m5-code i.k{background:#061016}
.m5-frame{position:absolute;inset:16%;border:2px solid #4fb894;box-shadow:0 0 0 999px rgba(6,16,22,.35);animation:m5Box 2s ease-in-out infinite}
.m5-read{margin:10px;padding:10px;border:1px solid #c8d4db;display:grid;gap:6px;font-size:11.5px}
.m5-read>b{font-size:12.5px}
.m5-read div{display:flex;justify-content:space-between;gap:8px;border-top:1px solid #eef2f4;padding-top:5px}
.m5-read span{color:#54646f}
.m5-read em{font-style:normal;font-weight:600}
.m5-go{display:inline-flex;align-items:center;justify-content:center;gap:6px;margin-top:4px;padding:8px;background:#061016;color:#fff;font-weight:600}
.m5-go svg{width:13px;height:13px}
.m5-msg{margin-top:10px;padding:9px 11px;border:1px solid #c8d4db;font-size:12px}
.m5-msg b{display:block;font-size:11px;color:#54646f;margin-bottom:3px}
.m5-msg p{margin:0}
.m5-msg.out{background:#e1eff7;margin-left:24px}
.m5-msg.in{background:#fff;margin-right:24px}
.m5-msg.note{background:#fbf0c6;border-style:dashed}
.m5-st{display:flex;justify-content:space-between;gap:10px;padding:8px 0;border-top:1px solid #eef2f4;font-size:12.5px}
.m5-st em{display:inline-flex;align-items:center;gap:6px;font-style:normal;font-weight:600}
.m5-st em i{width:8px;height:8px}
.m5-upd{margin-top:8px;padding:9px 11px;background:#fbe2da;font-size:12px}
.m5-upd p{margin:3px 0 0}
.m5-q{margin-top:10px;margin-left:auto;max-width:82%;width:max-content;padding:7px 10px;background:#061016;color:#fff;font-size:12px}
.m5-a{margin-top:8px;padding:9px 11px;border:1px solid #c8d4db;display:grid;gap:6px;font-size:12px}
.m5-a p{margin:0}
.m5-chart{display:flex;align-items:flex-end;gap:6px;height:120px;margin-top:14px;padding:10px;background:#f3f6f8;border:1px solid #e1e8ec}
.m5-chart i{flex:1;background:#3f7ea6;transform-origin:bottom;animation:m5Grow .8s var(--ease) both;animation-delay:calc(var(--d) * .05s)}
.m5-chart i:nth-child(3n){background:#7fb8d4}
@keyframes m5Grow{from{transform:scaleY(0)}}
@media (prefers-reduced-motion:reduce){.m5-photo i,.m5-frame,.m5-chart i{animation:none}}

/* ===== r13: contrast. The brand's mid tones are fills; small text takes a darker shade of the same hue.
   blue ink #2b6a8f · green ink #1f6b52 · coral ink #a8432c · gold ink #6b5400 · muted #5f6f7a (all 4.5:1+) ===== */
:root{--faint:#5f6f7a;--muted:#4e5d67}
.pg-cat{color:#2b6a8f;border-color:rgba(43,106,143,.6)}
.cmp .addon{color:#2b6a8f}
.pg-say .btn,.pg-say .btn-w{color:#2b6a8f}
.hj-note>i{color:#1f6b52}
.sxc-save{color:#1f6b52}
.ta-btn{color:#215f80}
.ta-btn.alt{color:#a8432c}
.ta-fields em{color:#1f6b52}
.m5-st em[style*="2e8a6a"]{color:#1f6b52!important}
.m5-st em[style*="c4573e"]{color:#a8432c!important}
.icat-paid{background:#061016}
.jx-ft .tlink{color:#a8432c}
.grad2{color:#c4573e}
.night .grad2{color:var(--gold)}
.hr-s b{color:#a8432c}
.sa-out span,.sa-rule small{color:#a8432c}
.sa-rule .big,.sa-rule>div{color:#b8482f}
.nb-note,.plan .was,.plan .inc,.bm span.dep,.calc-in small{color:#5f6f7a}
.ct-fh span{color:#a8432c}
.jcta-who i{color:#061016!important}
.mbtn.o,.mbtn[style*="4fb894"]{color:#061016}
.ta-bt em.ok{color:#061016}
/* white small text needs the deeper blue behind it (white on #3f7ea6 is 4.4:1) */
body.theme-blue{background:#2f6487}
.theme-blue main .sec.alt{background:#2a5a79}
.theme-blue .hr-h,.theme-blue .hr-p{background:#e1eff7}
.pg-head,.pg-say{background:#2f6487}
.ht-call span{background:#2f6487}
.jx-ai .ko>span[style*="3f7ea6"]{background:#2f6487}
.icat-c b{filter:brightness(.82)}
.fi-c:nth-child(3n+1) span{background:#2f6487}
.cx-steps em,.cx-foot,.cx-note,.cx-col h3,.cx-n em{color:#4e5d67}
.tg-t p,.fi-c p,.htc-k{color:#3d4c56}
.m5-u em{color:#c8d4db}
.ph-sb{color:#061016}
.jcta-who i[style*="3f7ea6"]{background:#2f6487!important;color:#fff!important}
@media (max-width:900px){
  .pg-head{grid-column:1/-1;aspect-ratio:auto;padding:28px 22px}
  .pg-head h2{font-size:34px}
  .hj-bot,.hj-bot.is-3d{left:50%;width:76%}
  .hj-stat{right:10px;bottom:12px;width:132px;padding:10px 12px}
  .hj-stat b{font-size:24px}
  .sx .sx-stage{padding-right:14px}
  .sxc-ui{box-shadow:5px 5px 0 var(--c)}
  .sxc.on .sxc-ui{box-shadow:7px 7px 0 var(--c)}
}
.kcol .h6x{margin:4px 4px 8px;font:500 11px/1 var(--fs);color:var(--muted);display:flex;justify-content:space-between}
.side .grp{color:#91a3ae}
.theme-blue .sec-head .lead,.theme-blue .h2wrap .lead,.theme-blue .show-t>p{color:#eef4f8}
.icat-row[style*="#e0785f"] .icat-c b{color:#a8432c}
.icat-row[style*="#3f7ea6"] .icat-c b{color:#2b6a8f}
.icat-row[style*="#4fb894"] .icat-c b{color:#1f6b52}
.icat-row[style*="#7fb8d4"] .icat-c b{color:#215f80}
.icat-row[style*="#f0c73f"] .icat-c b{color:#6b5400}
.icat-c b{filter:none}
.cmp thead th.pop b{color:#2b6a8f}
@media (min-width:901px){.calc-out{padding-right:clamp(160px,14vw,200px)}.cm-calc{right:4px}}

/* ===== r14: note arrow points at its note; category headings keep their descenders; icon tiles are square ===== */
.gp-note{align-items:center;gap:4px}
.gp-note svg{margin-top:0;width:44px;height:30px}
.icat-h h3{line-height:1.22}
.icat-h h3 span{padding:.02em .14em .08em}
.icat-row[style*="--c:#061016"] .icat-ic{color:#fff}
/* every icon tile: square, filled, inked edge, as in the feature index */
.pts4 span{border-radius:0;border:0;width:38px;height:38px;background:#2f6487;color:#fff;box-shadow:inset 0 0 0 1.5px #061016}
.pts4>div:nth-child(4n+2) span{background:#7fb8d4;color:#061016}
.pts4>div:nth-child(4n+3) span{background:#f0c73f;color:#061016}
.pts4>div:nth-child(4n) span{background:#e0785f;color:#061016}
.bx .tile,.pl .tile,.crumb .tile,.card-f .hd .tile,.cmp tbody tr.grp .tile,.bm .tile,.mcard .tile,.fc .tile{border-radius:0!important;box-shadow:inset 0 0 0 1.5px #061016}
.pl .tile{background:#bfced7}
.rs-h span{border-radius:0;box-shadow:inset 0 0 0 1.5px var(--i)}
.dcard span,.fl-node>span{border-radius:0}
.ticks li .ic,.xticks .ic{border-radius:0;box-shadow:inset 0 0 0 1.5px #061016}
.mc-f span{border-radius:0}
.icat-h h3 span{background:linear-gradient(transparent 52%,var(--s) 52%);padding:0 .1em}

/* ===== r15: the tilted-screen band on its own; Vendor 360, places and Project Lite; the all-in-one sheet ===== */
.iso-sec .jx-float{margin-top:0}
.iso-sec .jx-ft h3{margin-top:0}
.iso-sec .jx-ft .tlink{display:inline-flex;align-items:center;gap:8px}
.sec.alt.iso-sec .jx-float{background:#fff}
.new.soon{color:#061016;background:#bfced7;border-color:#8ea6b4}
.m6-tabs{display:flex;gap:2px;margin:12px 0 2px;border-bottom:1px solid #e6ebee;overflow:hidden}
.m6-tabs span{padding:6px 10px;font-size:11px;color:#54646f;white-space:nowrap;border-bottom:2px solid transparent;margin-bottom:-1px}
.m6-tabs span.on{color:#08141c;font-weight:600;border-bottom-color:#3f7ea6}
/* Project Lite: eleven stages as one ruled strip, gates shaded */
.pl-flow{display:grid;grid-template-columns:repeat(11,minmax(0,1fr));margin-top:40px;border:1.5px solid #061016;background:#fff}
.pl-st{padding:16px 12px 18px;border-right:1px solid #c8d4db;display:grid;gap:6px;align-content:start}
.pl-st:last-child{border-right:0}
.pl-st em{font:500 11px/1 var(--fm);font-style:normal;color:#5f6f7a}
.pl-st b{font:500 17px/1.15 var(--fserif);color:var(--ink);letter-spacing:-.01em}
.pl-st p{margin:0;font-size:12.5px;line-height:1.4;color:#3d4c56}
.pl-st.gate{background:#fdf4d5}
.pl-st.gate em::after{content:' · gate';color:#6b5400}
.pl-foot{display:flex;gap:10px;align-items:center;margin-top:18px;font-size:14.5px;color:#3d4c56}
.pl-foot svg{width:18px;height:18px;flex:none;color:#1f6b52}
@media (max-width:1100px){.pl-flow{grid-template-columns:repeat(4,minmax(0,1fr))}.pl-st{border-bottom:1px solid #c8d4db}.pl-st:nth-child(4n){border-right:0}.pl-st:last-child{border-right:1px solid #c8d4db}}
@media (max-width:560px){.pl-flow{grid-template-columns:repeat(2,minmax(0,1fr))}.pl-st:nth-child(4n){border-right:1px solid #c8d4db}.pl-st:nth-child(2n){border-right:0}}
/* all in one: what a team would otherwise run, struck through, and the module that replaces it */
.aio-g{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));margin-top:40px;border-top:1.5px solid #061016;border-left:1.5px solid #061016}
.aio-c{display:grid;gap:8px;align-content:start;padding:20px 18px 22px;border-right:1.5px solid #061016;border-bottom:1.5px solid #061016;background:#fff;color:inherit;text-decoration:none;transition:background .25s,transform .25s var(--ease)}
.aio-c:hover{background:#e1eff7}
.aio-ic{display:grid;place-items:center;width:34px;height:34px;background:#2f6487;color:#fff;box-shadow:inset 0 0 0 1.5px #061016}
.aio-c:nth-child(5n+2) .aio-ic{background:#7fb8d4;color:#061016}
.aio-c:nth-child(5n+3) .aio-ic{background:#f0c73f;color:#061016}
.aio-c:nth-child(5n+4) .aio-ic{background:#e0785f;color:#061016}
.aio-c:nth-child(5n) .aio-ic{background:#4fb894;color:#061016}
.aio-ic svg{width:17px;height:17px}
.aio-c s{font-size:13px;color:#5f6f7a;text-decoration-color:#a8432c;text-decoration-thickness:1.5px}
.aio-c b{font:500 19px/1.15 var(--fserif);color:var(--ink);letter-spacing:-.01em}
.aio-foot{display:flex;flex-wrap:wrap;gap:10px 28px;margin-top:22px;font-size:14.5px;color:#3d4c56}
.aio-foot span{display:inline-flex;align-items:center;gap:8px}
.aio-foot svg{width:17px;height:17px;color:#1f6b52}
@media (max-width:1000px){.aio-g{grid-template-columns:repeat(2,minmax(0,1fr))}.aio-c:nth-child(n) .aio-ic{background:#2f6487;color:#fff}.aio-c:nth-child(4n+2) .aio-ic{background:#7fb8d4;color:#061016}.aio-c:nth-child(4n+3) .aio-ic{background:#f0c73f;color:#061016}.aio-c:nth-child(4n) .aio-ic{background:#e0785f;color:#061016}}

/* ===== r16: the module films ===== */
.film-sec{padding-top:clamp(40px,5vw,70px)}
.film-head{display:grid;gap:12px;margin-bottom:28px}
.film-head h2{font-size:clamp(30px,3.2vw,46px)}
.film{position:relative;aspect-ratio:16/9;background:#061016;border:1.5px solid #061016;box-shadow:12px 12px 0 #061016}
.film video{display:block;width:100%;height:100%;background:#061016}
.film-play{position:absolute;inset:0;display:flex;align-items:flex-end;justify-content:flex-start;gap:16px;padding:clamp(16px,3vw,36px);border:0;background:linear-gradient(0deg,rgba(6,16,22,.55),rgba(6,16,22,0) 45%);cursor:pointer;text-align:left}
.film-btn{display:grid;place-items:center;width:clamp(64px,7vw,92px);height:clamp(64px,7vw,92px);background:#4fb894;color:#061016;box-shadow:inset 0 0 0 2px #061016,6px 6px 0 #061016;transition:transform .25s var(--ease),box-shadow .25s var(--ease)}
.film-btn svg{width:42%;height:42%;margin-left:6%}
.film-play:hover .film-btn,.film-play:focus-visible .film-btn{transform:translate(-3px,-3px);box-shadow:inset 0 0 0 2px #061016,9px 9px 0 #061016}
.film-play:focus-visible{outline:3px solid #f0c73f;outline-offset:4px}
.film-meta{display:grid;gap:6px;padding:10px 14px;background:#fff;box-shadow:inset 0 0 0 1.5px #061016}
.film-meta b{font:500 clamp(16px,1.5vw,21px)/1.1 var(--fserif);color:#061016}
.film-meta em{font:500 12px/1 var(--fm);font-style:normal;color:#4e5d67}
.film.on .film-play{display:none}
.film-tx{margin-top:26px;border-top:1.5px solid #061016}
.film-tx summary{display:flex;align-items:center;gap:8px;padding:14px 0;font:500 15px/1 var(--fs);color:#061016;cursor:pointer;list-style:none}
.film-tx summary::-webkit-details-marker{display:none}
.film-tx summary svg{width:16px;height:16px;transition:transform .25s}
.film-tx[open] summary svg{transform:rotate(180deg)}
.film-tx div{display:grid;gap:12px;max-width:72ch;padding-bottom:10px}
.film-tx p{margin:0;font-size:15.5px;line-height:1.6;color:#3d4c56}
:is(.theme-ink,.theme-blue) .film-tx{border-top-color:rgba(191,206,215,.4)}
:is(.theme-ink,.theme-blue) .film-tx summary{color:#fff}
:is(.theme-ink,.theme-blue) .film-tx p{color:#d6e1e7}
@media (max-width:640px){.film{box-shadow:6px 6px 0 #061016}.film-meta{display:none}}

/* ===== r17: the full width of the page; people cut out of their photos; a print texture per hero; the feature index as a sheet, not buttons ===== */
:root{--wrap:1680px}
.hdr .wrap{max-width:none;margin:12px clamp(10px,1.4vw,22px) 0}
.rails{display:none}
.hr-sheet,.tg-sheet{max-width:none}

/* the story stage runs edge to edge: stepped grid paper, a dark pixel block with stripes, the person standing in front of it */
.sx .sx-stage{margin-inline:calc(50% - min(50vw, 980px) + 12px)}
.sx-paper{left:2%;right:2%;clip-path:polygon(0 8%,6% 8%,6% 0,30% 0,30% 4%,62% 4%,62% 0,90% 0,90% 6%,100% 6%,100% 92%,94% 92%,94% 100%,8% 100%,8% 96%,0 96%)}
.sx-block{left:33%;right:33%;top:12%}
.sx-photo{left:50%;right:auto;top:3%;bottom:0;width:auto;height:97%;transform:translateX(-50%);overflow:visible;z-index:2;pointer-events:none}
.sx-photo img{width:auto;height:100%;object-fit:contain;object-position:bottom center;filter:drop-shadow(0 18px 0 rgba(6,16,22,.08))}
.sx-stage:hover .sx-photo img{transform:none}
.sx .sxc{z-index:3}
@media (max-width:900px){.sx-photo{left:50%;right:auto;top:20px;height:290px;transform:translateX(-50%)}.sx-block{left:22%;right:22%}}

/* photo heroes: the pixels stay at the panel's edge so the people show, and each hero wears its own print */
.kh-px{width:30%}
.kh-tx{position:absolute;inset:0;z-index:1;pointer-events:none}
.tx-dots .kh-tx{background-image:radial-gradient(circle,var(--kp) 1.3px,transparent 1.7px);background-size:7px 7px;opacity:.55;mix-blend-mode:multiply;-webkit-mask-image:linear-gradient(90deg,#000 0,#000 18%,transparent 55%);mask-image:linear-gradient(90deg,#000 0,#000 18%,transparent 55%);animation:txDrift 14s linear infinite}
.tx-grain .kh-tx{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 .6 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");opacity:.42;mix-blend-mode:overlay;animation:txGrain .9s steps(5) infinite}
.tx-grain img{filter:contrast(1.08) saturate(.9)}
.tx-scan .kh-tx{background:repeating-linear-gradient(0deg,rgba(6,16,22,.16) 0 1px,transparent 1px 4px),linear-gradient(180deg,transparent 0,rgba(127,184,212,.22) 48%,rgba(255,255,255,.28) 50%,rgba(127,184,212,.22) 52%,transparent 100%);background-size:100% 100%,100% 300%;mix-blend-mode:multiply;animation:txScan 7s cubic-bezier(.45,0,.55,1) infinite}
.tx-riso img{filter:grayscale(1) contrast(1.12) brightness(1.04)}
.tx-riso .kh-tx{background:var(--kp);mix-blend-mode:multiply;opacity:.55;-webkit-mask-image:linear-gradient(90deg,#000 0,rgba(0,0,0,.65) 40%,rgba(0,0,0,.25) 100%);mask-image:linear-gradient(90deg,#000 0,rgba(0,0,0,.65) 40%,rgba(0,0,0,.25) 100%)}
.tx-riso::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background-image:radial-gradient(circle,rgba(6,16,22,.5) .9px,transparent 1.3px);background-size:5px 5px;mix-blend-mode:multiply;opacity:.35}
@keyframes txDrift{to{background-position:56px 28px}}
@keyframes txGrain{0%{background-position:0 0}20%{background-position:-60px 30px}40%{background-position:40px -50px}60%{background-position:-30px -20px}80%{background-position:70px 40px}100%{background-position:0 0}}
@keyframes txScan{0%{background-position:0 0,0 100%}100%{background-position:0 0,0 0}}
@media (prefers-reduced-motion:reduce){.kh-tx{animation:none!important}}

/* the feature index: a written intro and a fact panel, then a numbered sheet. Nothing on it moves or lifts: it is read, not pressed */
.fi-head{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:clamp(24px,4vw,70px);align-items:end}
.fi-head h2{font-size:clamp(34px,3.6vw,56px)}
.fi-head .lead{margin-top:18px;max-width:62ch;font-size:clamp(16px,1.2vw,18.5px);line-height:1.6;color:#3d4c56}
.fi-facts{margin:0;display:grid;border:1.5px solid #061016;background:#fff;box-shadow:8px 8px 0 var(--fc)}
.fi-facts div{display:grid;grid-template-columns:64px minmax(0,1fr);align-items:center;gap:14px;padding:12px 16px;border-bottom:1px solid #c8d4db}
.fi-facts div:last-child{border-bottom:0}
.fi-facts dt{display:grid;place-items:center;height:44px;background:#061016;color:#fff;font:500 26px/1 var(--fserif)}
.fi-facts dt svg{width:20px;height:20px}
.fi-facts dd{margin:0;font-size:14.5px;line-height:1.4;color:#061016}
ol.fi{list-style:none;padding:0;background-color:#f6f9fb;background-image:linear-gradient(rgba(63,126,166,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(63,126,166,.08) 1px,transparent 1px);background-size:24px 24px}
.fi-c{background:transparent;cursor:default;transition:none;padding:24px 22px 26px}
.fi-c:hover{background:transparent;transform:none;box-shadow:none}
.fi-c em{position:absolute;top:24px;right:22px;font:500 12px/1 var(--fm);font-style:normal;color:#5f6f7a}
.fi-c span{width:30px;height:30px}
.fi-c span svg{width:15px;height:15px}
.fi-c b{margin-top:16px;font-size:20px}
.fi-c p{margin-top:8px;font-size:14.5px;line-height:1.55}
:is(.theme-ink,.theme-blue) .fi-head .lead{color:#d6e1e7}
:is(.theme-ink,.theme-blue) ol.fi{background-color:transparent}
@media (max-width:900px){.fi-head{grid-template-columns:minmax(0,1fr)}}
.kh-px{width:21%}
.tx-grain .kh-tx{opacity:.58}
.tx-dots .kh-px i{border-radius:50%;transform:scale(.86)}
.tx-scan .kh-px i{transform:scaleY(.42)}
@media (max-width:900px){.kh-px{width:100%}}

/* ===== r18: the menu sits in the middle of the full-width bar: brand left, links centred, actions right ===== */
@media (min-width:1101px){
  .hdr .wrap{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr)}
  .hdr .brand{justify-self:start}
  .hdr .nav{flex:none;margin:0;justify-self:center}
  .hdr .hdr-cta{justify-self:end}
  .hdr .burger{display:none}
}

/* ===== r19: four equal footer columns, so every title and its rule is the same width; a cut-out person in the tiles hero ===== */
.ft3-cols{grid-template-columns:repeat(4,minmax(0,1fr))}
.ht-cut{left:28%;right:10%;top:-6%;bottom:12%;overflow:visible;clip-path:none;z-index:2}
.ht-cut img{width:100%;height:100%;object-fit:contain;object-position:bottom center}
.ht-call{z-index:4}

/* ===== r20: integration tiles in alternating colours, each drawing its mark its own way ===== */
.pg-t{background:var(--pbg,#e9f3f9);transition:background .5s}
.pg-t>b{color:var(--pc,#2b6a8f);background:var(--pbg,#e9f3f9);box-shadow:0 0 0 6px var(--pbg,#e9f3f9);transition:color .5s,background .5s}
.pg-cat{color:var(--pc,#2b6a8f);border-color:var(--pc,#2b6a8f);background:var(--pbg,#e9f3f9)}
.pg-t.pg-head{background:#2f6487}
.pg-t.pg-say{background:#2f6487}

/* ===== r23: the person on the story stage wears the print: a brand colour wash, a halftone settling at the feet and a fine photo grain, all clipped to the figure ===== */
.sx-photo{isolation:isolate}
.sx-photo img{filter:contrast(1.04) saturate(.92) brightness(1.04) drop-shadow(0 18px 0 rgba(6,16,22,.08))}
.sx-tx{position:absolute;inset:0;z-index:1;pointer-events:none;-webkit-mask:var(--cut) bottom center/contain no-repeat;mask:var(--cut) bottom center/contain no-repeat}
.sx-tx::before,.sx-tx::after{content:"";position:absolute;inset:0}
.sx-tx::before{background:linear-gradient(160deg,var(--t1) 0%,transparent 55%,var(--t2) 115%);mix-blend-mode:soft-light;opacity:.8}
.sx-tx::after{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 .7 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");background-size:220px 220px;mix-blend-mode:overlay;opacity:.55;animation:txGrain 1.1s steps(5) infinite}
.sx-photo::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background-image:radial-gradient(circle,var(--t3) 1.2px,transparent 1.6px);background-size:6px 6px;opacity:.45;mix-blend-mode:multiply;-webkit-mask:linear-gradient(0deg,#000 0,transparent 26%),var(--cut) bottom center/contain no-repeat;-webkit-mask-composite:source-in;mask:linear-gradient(0deg,#000 0,transparent 30%) 0 0/100% 100%,var(--cut) bottom center/contain no-repeat;mask-composite:intersect}
.sx-tone-blue{--t1:#7fb8d4;--t2:#2b6a8f;--t3:#2b6a8f}
.sx-tone-green{--t1:#bfe6d6;--t2:#1f6b52;--t3:#1f6b52}
.sx-tone-coral{--t1:#f6cbbd;--t2:#a8432c;--t3:#a8432c}
.sx-tone-gold{--t1:#f8e6a6;--t2:#6b5400;--t3:#6b5400}
@media (prefers-reduced-motion:reduce){.sx-tx::after{animation:none}}

/* ===== r24: the closing band's left rule ran through the headline; it now stands between the dots and the words ===== */
.pb-rules{background:linear-gradient(rgba(127,184,212,.4),rgba(127,184,212,.4)) 0 46px/100% 1px no-repeat,linear-gradient(rgba(127,184,212,.4),rgba(127,184,212,.4)) 0 calc(100% - 46px)/100% 1px no-repeat,linear-gradient(rgba(127,184,212,.4),rgba(127,184,212,.4)) 7.4% 0/1px 100% no-repeat,linear-gradient(rgba(127,184,212,.4),rgba(127,184,212,.4)) 50% 0/1px 100% no-repeat,linear-gradient(rgba(127,184,212,.4),rgba(127,184,212,.4)) 83.3% 0/1px 100% no-repeat}
@media (max-width:900px){.pb-rules{background:linear-gradient(rgba(127,184,212,.4),rgba(127,184,212,.4)) 0 calc(100% - 46px)/100% 1px no-repeat}}

/* ===== r25: the figure's grade is blue, warm or steel (the green read as sickly); the footer's faint column lines run down the gaps between the columns ===== */
.sx-tone-warm{--t1:#f8e6a6;--t2:#a8432c;--t3:#a8432c}
.sx-tone-steel{--t1:#e6eef3;--t2:#3d4c56;--t3:#3d4c56}
.ft3{background-image:none}
.ft3-cols{--fg:clamp(20px,3vw,48px);gap:var(--fg)}
.ft3-cols>*{position:relative}
.ft3-cols>*::before,.ft3-cols>:last-child::after{content:"";position:absolute;top:-600px;bottom:-600px;left:calc(var(--fg) / -2);width:1px;background:rgba(127,184,212,.09);pointer-events:none}
.ft3-cols>:last-child::after{left:auto;right:calc(var(--fg) / -2)}
@media (max-width:900px){.ft3-cols>*::before,.ft3-cols>:last-child::after{display:none}}
.sx-tx::before{opacity:.6}
.sx-tone-warm{--t2:#c4573e}

/* ===== r26: the story cutouts are shown as photographed: no grade, grain or halftone (they read old and faded) ===== */
.sx-photo img{filter:drop-shadow(0 18px 0 rgba(6,16,22,.08))}
.sx-photo::after{content:none}

/* ===== r28: the walkthrough band at each page's foot wears that page's colour: paper, block grid, stripes, corner and dots ===== */
.close-blue{--cb:#7fb8d4;--cl:rgba(127,184,212,.35);--cs:#e0785f;--ct:#4fb894;--cd:#1d5b45}
.close-green{--cb:#4fb894;--cl:rgba(79,184,148,.4);--cs:#f0c73f;--ct:#3f7ea6;--cd:#1c4f6e}
.close-coral{--cb:#e0785f;--cl:rgba(224,120,95,.4);--cs:#f0c73f;--ct:#3f7ea6;--cd:#1c4f6e}
.close-gold{--cb:#f0c73f;--cl:rgba(240,199,63,.4);--cs:#3f7ea6;--ct:#e0785f;--cd:#8a3422}
.close-steel{--cb:#8ea6b4;--cl:rgba(142,166,180,.4);--cs:#f0c73f;--ct:#e0785f;--cd:#8a3422}
.jcta{background-color:var(--cb,#7fb8d4)}
.jcta-pix{background-image:linear-gradient(var(--cl) 1px,transparent 1px),linear-gradient(90deg,var(--cl) 1px,transparent 1px)}
.jcta-str path{stroke:var(--cs,#e0785f)}
.jcta-tri svg{fill:var(--ct,#4fb894)}
.jcta-dots b{background:var(--cd,#1d5b45)}
/* and its own shapes: green steps up in squares, coral rises in a stair, gold rings, steel a half moon with diamonds */
.close-green .jcta-dots b{border-radius:2px}
.close-green .jcta-tri svg{clip-path:polygon(0 30%,100% 0,100% 100%,0 100%)}
.close-coral .jcta-tri svg{clip-path:polygon(0 60%,20% 60%,20% 42%,40% 42%,40% 24%,60% 24%,60% 8%,100% 8%,100% 100%,0 100%)}
.close-coral .jcta-str{transform:scaleY(.6) skewX(-12deg);transform-origin:bottom left}
.close-gold .jcta-dots b{background:transparent;box-shadow:inset 0 0 0 4px var(--cd)}
.close-gold .jcta-tri svg{clip-path:polygon(0 0,100% 30%,100% 100%,0 100%)}
.close-steel .jcta-tri svg{clip-path:ellipse(70% 100% at 70% 100%)}
.close-steel .jcta-dots b{border-radius:0;transform:rotate(45deg) scale(.72)}
.close-steel .jcta-str{transform:rotate(-24deg);transform-origin:bottom left}

/* ===== r29: the note's arrow is bigger and hand-drawn with a loop, starting out past the screenshot's edge ===== */
.gp-note{align-items:flex-end;gap:2px}
.gp-note svg{width:clamp(96px,8vw,124px);height:auto;aspect-ratio:3/2;margin:0 0 -6px clamp(-96px,-6vw,-60px)}
.gp-note svg path{stroke-width:2.4}
@media (max-width:700px){.gp-note svg{margin-left:-20px;width:84px}}

/* ===== r30: the shapes behind the walkthrough window differ by page ===== */
.jcta-pix.sq{aspect-ratio:1;height:auto!important;background-image:none;background-color:#061016}
.jcta-pix.sq:nth-child(3n){background-color:#fff}
.jcta-pix.br{transform-origin:top;background-image:none}
.jcta-pix.st{background-size:22px 22px}
.jcta-ring{position:absolute;aspect-ratio:1;border-radius:50%;border:clamp(14px,1.6vw,26px) solid #061016;box-shadow:inset 0 0 0 clamp(10px,1.2vw,18px) var(--cb,#7fb8d4),inset 0 0 0 calc(clamp(10px,1.2vw,18px) + 3px) #061016;animation:hjPop .7s var(--ease) both}
@media (max-width:700px){.jcta-ring{display:none}}

/* ===== r31: the footer follows the page's closing colour: the heading rules, their hover, the link marker, the column lines and the cursor trail ===== */
.close-blue{--fa:#3f7ea6;--fa2:#7fb8d4;--fdot:#f0c73f;--fl:rgba(127,184,212,.09);--ftr:rgba(63,126,166,.45)}
.close-green{--fa:#2e8a6a;--fa2:#4fb894;--fdot:#f0c73f;--fl:rgba(79,184,148,.1);--ftr:rgba(46,138,106,.5)}
.close-coral{--fa:#c4573e;--fa2:#e0785f;--fdot:#f0c73f;--fl:rgba(224,120,95,.1);--ftr:rgba(196,87,62,.5)}
.close-gold{--fa:#b08a0e;--fa2:#f0c73f;--fdot:#e0785f;--fl:rgba(240,199,63,.09);--ftr:rgba(176,138,14,.5)}
.close-steel{--fa:#6d818c;--fa2:#bfced7;--fdot:#f0c73f;--fl:rgba(191,206,215,.08);--ftr:rgba(109,129,140,.5)}
.ft3{--trail:var(--ftr,rgba(63,126,166,.45))}
.ft3-h::after{background-image:repeating-linear-gradient(90deg,var(--fa,#3f7ea6) 0 8px,transparent 8px 12px)}
.ft3-h:hover::after{background-image:repeating-linear-gradient(90deg,var(--fa2,#7fb8d4) 0 8px,transparent 8px 12px)}
.ft3-g li a::before{background:var(--fdot,#f0c73f)}
.ft3-cols>*::before,.ft3-cols>:last-child::after{background:var(--fl,rgba(127,184,212,.09))}

/* ===== r32: the menu bar's offset shadow follows the page's closing colour, light at rest and deeper once scrolled ===== */
.close-blue{--hs:#7fb8d4;--hs2:#3f7ea6}
.close-green{--hs:#4fb894;--hs2:#2e8a6a}
.close-coral{--hs:#e0785f;--hs2:#c4573e}
.close-gold{--hs:#f0c73f;--hs2:#b08a0e}
.close-steel{--hs:#bfced7;--hs2:#6d818c}
.hdr .wrap{box-shadow:6px 6px 0 var(--hs,#7fb8d4)}
.hdr.scrolled .wrap{box-shadow:6px 6px 0 var(--hs2,#3f7ea6)}

/* ===== r33: the hero follows the page's closing colour. Blue pages are untouched; the rest of each page keeps its blue ===== */
.close-green{--hp:#e8f6ef;--hb:#2e8a6a;--hc:#7fb8d4;--hs3:#f0c73f;--hk:#1f6b52;--ht:rgba(10,40,26,.9);--ht2:#4fb894;--htx:#cfe9db;--hpa:#d4efe3;--hln:#1f4d3c;--hln2:rgba(31,77,60,.3);--sa:#2e8a6a;--sa2:#9fd6c1;--sa3:#d4efe3}
.close-coral{--hp:#fcefea;--hb:#c4573e;--hc:#4fb894;--hs3:#f0c73f;--hk:#a8432c;--ht:rgba(58,22,14,.9);--ht2:#e0785f;--htx:#f6cbbd;--hpa:#f8ddd3;--hln:#6b2a1c;--hln2:rgba(107,42,28,.3);--sa:#c4573e;--sa2:#f0b6a6;--sa3:#fbe2da}
.close-gold{--hp:#fdf6dc;--hb:#b08a0e;--hc:#4fb894;--hs3:#e0785f;--hk:#6b5400;--ht:rgba(46,36,4,.9);--ht2:#f0c73f;--htx:#f8e6a6;--hpa:#f8ecbf;--hln:#4d3d00;--hln2:rgba(77,61,0,.3);--sa:#b08a0e;--sa2:#e8cf74;--sa3:#f8ecbf}
.close-steel{--hp:#eef2f4;--hb:#6d818c;--hc:#4fb894;--hs3:#f0c73f;--hk:#3d4c56;--ht:rgba(6,16,22,.9);--ht2:#bfced7;--htx:#d3dee5;--hpa:#dde6eb;--hln:#2b3a44;--hln2:rgba(43,58,68,.3);--sa:#4e6573;--sa2:#b6c6cf;--sa3:#dde6eb}

/* grid-paper hero: the paper, the gridded block, the circles and stripes, the caption tag and the dark tiles */
:is(.close-green,.close-coral,.close-gold,.close-steel) .ht-paper{background-color:var(--hp)}
:is(.close-green,.close-coral,.close-gold,.close-steel) .ht-block{background-color:var(--hb)}
:is(.close-green,.close-coral,.close-gold,.close-steel) .ht-circ{fill:var(--hc)}
:is(.close-green,.close-coral,.close-gold,.close-steel) .ht-str path{stroke:var(--hs3)}
:is(.close-green,.close-coral,.close-gold,.close-steel) .ht h1 em{color:var(--hk)}
:is(.close-green,.close-coral,.close-gold,.close-steel) .ht-call span{background:var(--hk)}
:is(.close-green,.close-coral,.close-gold,.close-steel) .ht-tiles>div{background:var(--ht);color:var(--htx)}
:is(.close-green,.close-coral,.close-gold,.close-steel) .ht-tiles>div.on{background:var(--ht2);color:#061016}

/* ruled hero: the tinted cells, the sheet's rules, the emphasis and the step drawings */
:is(.close-green,.close-coral,.close-gold,.close-steel) :is(.hr-h,.hr-p){background:var(--hpa);border-color:var(--hln)}
:is(.close-green,.close-coral,.close-gold,.close-steel) :is(.hr-sheet,.hr-win){border-color:var(--hln)}
:is(.close-green,.close-coral,.close-gold,.close-steel) .hr-cells i{border-color:var(--hln2)}
:is(.close-green,.close-coral,.close-gold,.close-steel) .hr h1 em,
:is(.close-green,.close-coral,.close-gold,.close-steel) .hr-s b,
:is(.close-green,.close-coral,.close-gold,.close-steel) :is(.sa-out span,.sa-rule small){color:var(--hk)}
:is(.close-green,.close-coral,.close-gold,.close-steel) :is(.sa-rule .big,.sa-rule>div,.sa-out>div){color:var(--sa)}
:is(.close-green,.close-coral,.close-gold,.close-steel) :is(.sa-in .sa-list,.sa-rule>div,.sa-out>div){border-color:var(--sa2)}
:is(.close-green,.close-coral,.close-gold,.close-steel) .sa-in .sa-list i{background:var(--sa3)}
:is(.close-green,.close-coral,.close-gold,.close-steel) .sa-in .sa-tile{background:var(--sa)}
:is(.close-green,.close-coral,.close-gold,.close-steel) .sa-rule em{background:var(--sa2)}
/* on a dark page the ruled sheet keeps its light rules */
:is(.theme-ink,.theme-blue):is(.close-green,.close-coral,.close-gold,.close-steel) .hr-sheet{border-color:rgba(191,206,215,.6)}
:is(.theme-ink,.theme-blue):is(.close-green,.close-coral,.close-gold,.close-steel) .hr-cells i{border-color:rgba(191,206,215,.25)}
.theme-ink .hr-a .btn-p{border:1.5px solid rgba(255,255,255,.75)}

/* ===== r34: the ruled hero's three steps read as one centred column each, with cleaner printed drawings; a stitched ribbon parts the closing band from the footer ===== */
.hr-s{text-align:center;display:grid;justify-items:center}
.hr-s p{margin-inline:auto;max-width:34ch}
.hr-v{height:170px;width:100%}
.sb{position:relative;width:220px;height:140px;--a:var(--sa,#c4573e);--a2:var(--sa2,#f0b6a6);--a3:var(--sa3,#fbe2da)}
.sb-card{position:absolute;background:#fff;border:1.5px solid #061016;box-shadow:6px 6px 0 var(--a3)}
.sb svg{display:block}
/* a record and its module's badge */
.sb-in .sb-card{left:14px;top:10px;width:146px;height:112px;display:grid;align-content:start;gap:9px;padding:0 0 12px}
.sb-head{display:flex;gap:5px;align-items:center;height:20px;padding:0 9px;background:var(--a3);border-bottom:1.5px solid #061016}
.sb-head em{width:7px;height:7px;border-radius:50%;background:var(--a)}
.sb-head em+em{background:var(--a2)}
.sb-l{height:7px;margin:0 12px;background:var(--a2)}
.sb-l:nth-child(3){width:58%}.sb-l:nth-child(4){width:38%}
.sb-badge{position:absolute;right:14px;bottom:2px;width:78px;height:78px;display:grid;place-items:center;background:var(--a);color:#fff;border:1.5px solid #061016;box-shadow:6px 6px 0 #061016;animation:saBob 3.2s ease-in-out infinite}
.sb-badge svg{width:34px;height:34px}
/* a rule card: two rows met, one waiting */
.sb-rule .sb-card{left:20px;top:16px;width:170px;height:110px;display:grid;align-content:center;gap:12px;padding:0 16px}
.sb-row{display:flex;align-items:center;gap:10px}
.sb-row span{flex:none;width:18px;height:18px;display:grid;place-items:center;border:1.5px solid #061016;background:#fff}
.sb-row.on span{background:var(--a);color:#fff}
.sb-row span svg{width:12px;height:12px;stroke-width:3}
.sb-row i{flex:1;height:7px;background:var(--a2)}
.sb-row:not(.on) i{background:repeating-linear-gradient(90deg,var(--a2) 0 8px,transparent 8px 13px)}
.sb-row:not(.on) span{animation:sbWait 1.6s ease-in-out infinite}
.sb-chip{position:absolute;right:6px;top:0;width:52px;height:52px;border-radius:50%;display:grid;place-items:center;background:#fff;color:var(--a);border:1.5px solid #061016;box-shadow:4px 4px 0 var(--a)}
.sb-chip svg{width:24px;height:24px}
/* a fan of finished results */
.sb-out .sb-card{width:120px;height:92px;left:calc(18px + var(--k) * 30px);top:calc(4px + var(--k) * 14px);background:var(--a3);box-shadow:none}
.sb-out .sb-card[style*="--k:2"]{background:#fff;box-shadow:6px 6px 0 var(--a3);display:grid;place-items:center;animation:saBob 3.2s ease-in-out infinite}
.sb-done{position:absolute;left:8px;top:7px;padding:2px 6px;background:var(--a3);font:600 10.5px/1.2 var(--fm);color:var(--hk,#a8432c)}
.sb-out b{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;background:var(--a);color:#fff;margin-top:10px}
.sb-out b svg{width:20px;height:20px;stroke-width:3}
.sb-tag{position:absolute;left:4px;bottom:4px;width:40px;height:40px;display:grid;place-items:center;background:#061016;color:#fff}
.sb-tag svg{width:20px;height:20px}
@keyframes sbWait{50%{background:var(--a3)}}
@media (prefers-reduced-motion:reduce){.sb *{animation:none!important}}

/* the ribbon between the closing band and the footer: an ink rule, a band in the page's colour, a stitched row */
.jcta::after{content:"";position:absolute;left:0;right:0;bottom:0;height:16px;z-index:2;pointer-events:none;border-top:3px solid #061016;background-color:var(--fa,#3f7ea6);background-image:repeating-linear-gradient(90deg,var(--fa2,#7fb8d4) 0 14px,transparent 14px 24px);background-size:100% 3px;background-position:0 50%;background-repeat:no-repeat}
.jcta{padding-bottom:16px}
.jcta::after{height:26px;border-top:3px solid #061016;border-bottom:3px solid #061016;background-color:var(--fa,#3f7ea6);background-image:repeating-linear-gradient(90deg,#061016 0 8px,transparent 8px 16px,var(--fa2,#7fb8d4) 16px 24px,transparent 24px 32px);background-size:100% 8px;background-position:0 50%;background-repeat:no-repeat}
.jcta{padding-bottom:26px}

/* ===== r35: no labels over headings, names never cut by the page edge, phone layouts that breathe ===== */
/* the integration tiles: the name is the only label */
.pg-cat{display:none!important}
/* the outer columns run past the page edge, so their names sit in the half that shows */
@media (min-width:901px){
  .pg-grid>.pg-t:nth-child(5n+1)>b{left:auto;right:clamp(14px,1.6vw,24px);text-align:right;max-width:46%;padding:0 0 4px 8px}
  .pg-grid>.pg-t:nth-child(5n)>b{max-width:46%}
}
/* the module cards: the module is the heading, the line under it says what it does */
.htc-cap b{font:500 clamp(20px,1.6vw,25px)/1.1 var(--fserif)}
.htc-d{font-size:14.5px;line-height:1.45;color:#3d4c56;padding-right:28px}
/* phone: one card a row, the picture a band rather than a square */
@media (max-width:560px){
  .htgrid{grid-template-columns:minmax(0,1fr)}
  .htc-pic{aspect-ratio:16/9}
  .htc-cap{min-height:0}
  .htc-cap b{font-size:21px}
  .hj-call{display:none}
}
/* one photo language: every person in full colour, never a grayscale print */
.nb-ph img,.nb-p:hover .nb-ph img{filter:none;mix-blend-mode:normal}
/* the riso heroes keep their colour wash over a colour photo, and product screens show the product as it is */
.tx-riso img{filter:contrast(1.04) saturate(.95)}
.tx-riso .kh-tx{opacity:.32}
.xp-main .win,.show:nth-of-type(even) .gpanel .win{filter:none}
/* the feature index: one icon colour per page (the page's own), large enough to read as a picture */
.fi-c span{width:44px;height:44px;background:var(--fa,#3f7ea6);box-shadow:inset 0 0 0 1.5px #061016,4px 4px 0 var(--fa2,#7fb8d4)}
.fi-c span svg{width:22px;height:22px}
.fi-c b{margin-top:20px}
ol.fi .fi-c:nth-child(n) span{background:var(--fa,#3f7ea6);color:#fff}
/* phone: a module card is a row, the picture beside its name, so eight modules fit in two screens */
@media (max-width:560px){
  .htc{display:grid;grid-template-columns:38% minmax(0,1fr)}
  .htc-pic{aspect-ratio:1/1}
  .htc-cap{align-content:center;padding:14px 16px}
  .htc-cap b{font-size:19px}
  .htc-d{font-size:14px;padding-right:22px}
}
/* the first screen paints at once: the hero's words never wait on the scroll reveal */
:is(.hx,.kh,.ht,.hr,.ct,.nf) :is(.rv,h1,.lead,.acts){opacity:1!important;transform:none!important;transition:none!important}
/* the footer's four columns fold on smaller screens (a later rule had pinned them at four everywhere) */
@media (max-width:900px){.ft3-cols{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:420px){.ft3-cols{grid-template-columns:minmax(0,1fr)}}
/* a narrow phone fits the logo, the walkthrough button and the menu on one bar */
@media (max-width:400px){
  .hdr .wrap{padding:0 4px 0 12px;gap:6px}
  .hdr-cta .btn{height:42px;padding:0 12px;font-size:14px}
  .hdr .brand img,.hdr .brand svg{width:112px;height:auto}
  .burger{padding:8px 6px}
}
.ct-fh span{font-size:12.5px}
.calc-out>span,.icat-paid,.bm span.dep{font-size:12.5px}

/* ===== r36: one robot. Stills rendered from the 3D model in the page's colour stand where he stands until the 3D one loads (desktop) or for good (phones) ===== */
.robot-anchor img.bot-still{position:absolute;inset:0;width:100%!important;height:100%!important;object-fit:contain;object-position:center;pointer-events:none}
.robot-anchor.is-3d img.bot-still{display:none}

/* ===== r38: the contact form: interests as chips, the reply promise in plain words, the circles behind the form ===== */
.ct-pick{border:0;margin:0;padding:0;min-width:0}
.ct-pick legend{padding:0;margin-bottom:8px;font:500 13.5px/1.3 var(--fs);color:#061016}
.ct-chips{display:flex;flex-wrap:wrap;gap:8px}
.ct-chip{position:relative;cursor:pointer}
.ct-chip input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.ct-chip span{display:inline-flex;align-items:center;min-height:40px;padding:0 14px;border:1.5px solid #061016;background:#fff;font:500 14px/1.2 var(--fs);color:#061016;transition:background .15s,box-shadow .15s,transform .15s}
.ct-chip:hover span{background:#f3f6f8}
.ct-chip input:checked+span{background:#061016;color:#fff;box-shadow:3px 3px 0 var(--fa2,#7fb8d4)}
.ct-chip input:focus-visible+span{outline:2px solid var(--fa,#3f7ea6);outline-offset:2px}
.ct-fh span{font:500 14px/1.2 var(--fs);letter-spacing:0;text-transform:none;color:#a8432c}
.ct-circ{z-index:0}
.ct-form{position:relative;z-index:2}
/* the dark stats band follows the page's colour: its stair (build.mjs), the cell edges, the figures' words and the hover shadow */
.night .stat{border-color:color-mix(in oklab,var(--fa2,#7fb8d4) 45%,transparent)}
.night .stat span{color:var(--fa2,#7fb8d4)}
.night .stat:hover{border-color:var(--fa2,#7fb8d4);box-shadow:6px 6px 0 var(--fa,#3f7ea6)}

/* ===== r39: a feature index fills its last row whatever its count (9 sits 3 x 3; 10 widens its last two) ===== */
@media (min-width:1001px){
  .fi.c3{grid-template-columns:repeat(3,minmax(0,1fr))}
  .fi.r1>li:last-child{grid-column:span 4}
  .fi.r2>li:nth-last-child(-n+2){grid-column:span 2}
  .fi.r3>li:nth-last-child(3){grid-column:span 2}
}
@media (min-width:561px) and (max-width:1000px){.fi.odd>li:last-child{grid-column:span 2}}

/* ===== r40: production pass. Headings never strand a word; product screens shown as they are; a dark tile's glyph is light;
   phone layouts for the mockups, the tables, the ruled hero, the integration grid and the stats band ===== */
h1,h2,h3,.fc-h,.show-t h3,.hr-s b,.htc-cap b,.cameo-say,.jcta-body h2{text-wrap:balance}
p,.lead,li{text-wrap:pretty}

/* the halftone screen over alternate product screens is the print effect the photos dropped; the screens are shown clean */
.show .gpanel .win::after,.xp-main .win::after{content:none}

/* a tile on the ink colour (platform core, studio, the audit tiles) draws its glyph light, or it vanishes */
[style*="--tc:#061016"] .tile,.tile[style*="background:#061016"],.tile[style*="background: #061016"]{color:#fff!important}

/* the gray button read as disabled; the showcase and plan buttons are solid ink */
.btn-g{background:#061016;color:#fff}
.btn-g:hover{background:#1c2a33;color:#fff}

/* a showcase that carries a handwritten note does not repeat it as the first tick beside it */
.show:has(.gp-note) .show-t .ticks li:first-child{display:none}

/* with motion reduced the story does not step, so every saved-time chip shows */
@media (prefers-reduced-motion:reduce){.sxc-save{opacity:1!important}}

/* the "other lines" and deployment tables become one card per line on a phone (labels come from the header, v3.js) */
@media (max-width:700px){
  .dt{display:block;overflow:visible;border-radius:0}
  .dt thead{display:none}
  .dt tbody,.dt tr,.dt td{display:block;width:auto}
  .dt tr{padding:14px 16px;border-top:1px solid var(--line)}
  .dt tbody tr:first-child{border-top:0}
  .dt td{padding:4px 0;border:0;white-space:normal!important;background:none!important}
  .dt td:first-child{font:500 18px/1.25 var(--fserif);color:#061016;padding-bottom:6px}
  .dt td[data-label]:not(:first-child)::before{content:attr(data-label);display:block;margin-bottom:2px;font:600 12px/1.3 var(--fs);color:#3d4c56}
}

/* the plan comparison on a phone: a narrow sticky first column so the four plans scroll beside it, and a hint that they do */
@media (max-width:700px){
  .cmp{min-width:600px;font-size:13.5px}
  .cmp th:first-child,.cmp td:first-child{position:sticky;left:0;z-index:2;width:150px;min-width:150px;max-width:150px;background:#fff;box-shadow:1px 0 0 #c8d4db}
  .cmp tr.grp td{position:static}
  .cmp tr.grp td>div{position:sticky;left:0;width:max-content}
  .cmp-wrap::before{content:"Swipe to compare the plans \2192";display:block;padding:10px 14px;font:500 13px/1.3 var(--fs);color:#3d4c56;background:#f3f6f8;border-bottom:1px solid #c8d4db;position:sticky;left:0}
}

/* the ruled hero's buttons keep the page gutter on a phone and wrap rather than run off */
@media (max-width:900px){.hr-a{padding:16px;flex-wrap:wrap;justify-content:flex-start}.hr-a .btn{flex:1 1 auto;justify-content:center}}
/* a tile hero's caption card sits over the photo's faces on a phone; the photo carries it alone there */
@media (max-width:560px){.ht-call{display:none}}

/* integration grid on a phone: the heading first and an even number of tiles, so no row is half empty */
@media (max-width:900px){.pg-head{order:-1;grid-column:1/-1}.pg-grid>.pg-t:not(.pg-head):not(.pg-say):nth-child(n+6){display:none}.pg-say{order:9}}

/* the story stage's step meter floats beside the first card once the cards stack */
@media (max-width:900px){.sx-meter{display:none}}

/* the dark stats band on a phone: two even columns, no stagger, figures that fit */
@media (max-width:700px){
  .night .stats{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .night .stat{transform:none!important;margin:0!important;height:100%}
  .night .stat b{font-size:clamp(30px,9vw,40px)!important;white-space:nowrap}
}

/* contact chips: two to a row on a phone */
@media (max-width:560px){.ct-chip span{min-height:38px;padding:0 10px;font-size:13.5px}}

/* a phone grid with an odd count widens its last cell (the eleven project stages) */
@media (max-width:700px){.pl-flow>.pl-st:last-child:nth-child(odd){grid-column:1/-1}}

/* pricing: a two-word type never breaks mid-word */
.dt td:last-child{hyphens:none}
/* tile hero chips never hyphen-break a two-word label (On-prem, Air-gapped) */
.ht-tiles em,.ht-tiles b{hyphens:none;overflow-wrap:normal;word-break:keep-all}
@media (max-width:560px){.ht-tiles em{font-size:9.5px;letter-spacing:.03em}}
/* the tile hero's strip of four shrinks to the screen instead of pushing past it */
.ht-tiles{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:560px){.ht-tiles{left:0}.ht-tiles>div{padding:6px}.ht-tiles em{font-size:9px;letter-spacing:.02em;overflow-wrap:anywhere}.ht-tiles b{font-size:10px}}
@media (max-width:700px){
  .cmp thead th{position:static;top:auto;padding:14px 12px}
  .cmp thead th:first-child{position:sticky;left:0;top:auto;z-index:3}
  .cmp td:not(:first-child),.cmp th:not(:first-child){white-space:nowrap;padding-left:10px;padding-right:10px}
}
.show:nth-of-type(even) .gpanel .win::after,.show .gpanel .win::after,.xp-main .win::after{content:none!important;display:none!important}
/* r42: pricing by company size. The size picker sits beside the yearly/monthly switch and wraps under it on a phone. */
.prc-ctl{display:flex;flex-wrap:wrap;justify-content:center;gap:10px 14px;margin-top:32px}
.prc-ctl .bill{margin-top:0}
.band-more{text-align:center;margin:22px auto 0;font-size:14.5px;color:var(--muted);max-width:640px}
.band-more a{color:#2b6a8f;font-weight:600;text-decoration:underline;text-underline-offset:3px}
@media (max-width:560px){
  .prc-ctl .bill{max-width:100%}
  .prc-ctl .bill.band button{padding:0 11px;font-size:13px}
  .prc-ctl .bill:not(.band) button{padding:0 14px}
}
/* r43: the size picker says what it counts */
.bill.band .bl{font:500 13px/1 var(--fs);color:var(--ink);padding:0 8px 0 12px}
@media (max-width:560px){
  .bill.band{flex-wrap:wrap;justify-content:center;border-radius:22px}
  .bill.band .bl{flex-basis:100%;text-align:center;padding:6px 0 4px}
}
/* r44: integration tile options. Every option keeps all five columns on screen (no half tiles at the edges). */
.pg[data-pgv] .pg-grid{width:100%;margin-left:0}
.pg[data-pgv="b"] .pg-t:not(.pg-head):not(.pg-say){border-color:rgba(255,255,255,.35)}
.pv-lbl{max-width:1200px;margin:0 auto;padding:56px 24px 18px;font:600 28px/1.2 var(--fs);color:#061016}
.pv-lbl span{display:block;font:400 16px/1.5 var(--fs);color:#54646f;margin-top:6px}
.pg[data-pgv] .pg-head h2{font-size:clamp(26px,2.4vw,44px)}
.pg[data-pgv] .pg-grid>.pg-t:nth-child(5n+1)>b{left:clamp(18px,2.4vw,34px);right:auto;text-align:left;max-width:80%;padding:0 8px 4px 0}
.pg[data-pgv="b"] .pg-t>b{background:var(--pbg);box-shadow:0 0 0 6px var(--pbg)}
/* r45: three options on the REAL mark. The vector holder is off unless an option draws it. */
.pg-logo{display:none}
.pg[data-pgv="d"] .pg-logo,.pg[data-pgv="f"] .pg-logo{display:grid;place-items:center;position:absolute;z-index:1;color:var(--pc)}
.pg-logo svg{width:100%;height:100%;display:block}
.pg-logo.pg-in{animation:pgIn .55s cubic-bezier(.2,.8,.2,1) both}
@keyframes pgIn{from{opacity:0;transform:translateY(10px) scale(.96)}to{opacity:1;transform:none}}

/* D: printed. The mark solid in ink, a second color plate set off behind it, and a halftone screen
   that is densest in the lower right and fades out under the name. */
.pg[data-pgv="d"] .pg-t:not(.pg-head):not(.pg-say)::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(circle,var(--pc2) 1.6px,transparent 2.1px) 0 0/9px 9px;opacity:.55;
  -webkit-mask:radial-gradient(120% 110% at 100% 100%,#000 30%,transparent 75%);mask:radial-gradient(120% 110% at 100% 100%,#000 30%,transparent 75%)}
.pg[data-pgv="d"] .pg-logo{right:11%;bottom:11%;width:50%;height:50%;filter:drop-shadow(6px 6px 0 var(--pc3))}
.pg[data-pgv="d"] .pg-logo svg{-webkit-mask:repeating-linear-gradient(-45deg,#000 0 3px,rgba(0,0,0,.72) 3px 4px);mask:repeating-linear-gradient(-45deg,#000 0 3px,rgba(0,0,0,.72) 3px 4px)}

/* F: a label card. Ruled paper behind (the hero's grid), the mark on a white card with a 2px ink edge and
   a solid offset block in the tile's second color, like the floating cards on every hero. A fine line
   screen runs through the mark. */
.pg[data-pgv="f"] .pg-t:not(.pg-head):not(.pg-say){background-image:linear-gradient(var(--grid-c,rgba(63,126,166,.16)) 1px,transparent 1px),linear-gradient(90deg,var(--grid-c,rgba(63,126,166,.16)) 1px,transparent 1px);background-size:24px 24px}
.pg[data-pgv="f"] .pg-logo{right:12%;bottom:10%;width:42%;aspect-ratio:1;padding:9%;background:#fff;border:2px solid var(--pc);box-shadow:9px 9px 0 var(--pc2)}
.pg[data-pgv="f"] .pg-logo svg{-webkit-mask:repeating-linear-gradient(0deg,#000 0 2px,rgba(0,0,0,.6) 2px 3px);mask:repeating-linear-gradient(0deg,#000 0 2px,rgba(0,0,0,.6) 2px 3px)}
@media (prefers-reduced-motion:reduce){.pg-logo.pg-in{animation:none}}
/* r46: the real marks, untouched, on a white card; the tile's background carries the design.
   G = halftone dots rising from the corner, H = ruled grid paper, I = the pixel staircase. */
.pg[data-pgv="g"] .pg-logo,.pg[data-pgv="h"] .pg-logo,.pg[data-pgv="i"] .pg-logo{display:grid;place-items:center;position:absolute;z-index:1;right:10%;bottom:12%;width:52%;aspect-ratio:4/3;padding:8% 9%;background:#fff}
.pg[data-pgv="g"] .pg-logo svg,.pg[data-pgv="h"] .pg-logo svg,.pg[data-pgv="i"] .pg-logo svg{width:100%;height:100%;max-height:100%}
.pg-word{font:600 clamp(14px,1.35vw,22px)/1.15 var(--fs);letter-spacing:-.01em;color:#061016;text-align:center}
.pg[data-pgv] .pg-t.nologo>b{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

.pg[data-pgv="g"] .pg-t:not(.pg-head):not(.pg-say)::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(circle,var(--pc2) 2px,transparent 2.6px) 0 0/11px 11px;opacity:.5;
  -webkit-mask:radial-gradient(130% 120% at 100% 100%,#000 25%,transparent 72%);mask:radial-gradient(130% 120% at 100% 100%,#000 25%,transparent 72%)}
.pg[data-pgv="g"] .pg-logo{box-shadow:10px 10px 0 var(--pc3)}

.pg[data-pgv="h"] .pg-t:not(.pg-head):not(.pg-say){background-image:linear-gradient(rgba(6,16,22,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(6,16,22,.08) 1px,transparent 1px);background-size:24px 24px}
.pg[data-pgv="h"] .pg-logo{border:2px solid var(--pc);box-shadow:9px 9px 0 var(--pc2)}

.pg[data-pgv="i"] .pg-logo{border:2px solid var(--pc);bottom:16%;width:44%;box-shadow:7px 7px 0 var(--pc)}
.pg-logo img{display:block;max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain}
/* the card keeps its 4:3 shape whatever the mark is; the mark fits inside its padding */
.pg[data-pgv="g"] .pg-logo img,.pg[data-pgv="h"] .pg-logo img,.pg[data-pgv="i"] .pg-logo img{position:absolute;left:12%;top:14%;width:76%;height:72%}
/* r47: the last column's names had a 46% cap from the cropped-mark layout; the card sits below them now */
.pg[data-pgv] .pg-grid>.pg-t:nth-child(5n)>b{max-width:80%}
/* r48: brand carousel options J, K, L. Every card: white, 2px ink edge, a solid block in its family behind it. */
.brc{position:relative;overflow:hidden;background:#f3f7fa}
.brc h2{font-size:clamp(30px,3.2vw,52px);line-height:1.02;letter-spacing:-.035em;color:#061016;margin:0}
.brc p{color:#54646f;font-size:clamp(15px,1.15vw,17px);line-height:1.55;margin:14px 0 22px;max-width:46ch}
.brc-i{margin:0;flex:0 0 auto;width:clamp(132px,11vw,172px);display:grid;gap:10px;justify-items:center}
.brc-logo{position:relative;display:block;width:100%;aspect-ratio:16/10;background:#fff;border:2px solid var(--ci);box-shadow:6px 6px 0 var(--c);box-sizing:border-box}
/* the card keeps its shape whatever the mark is; the mark fits inside its padding */
.brc-logo img,.brc-logo svg{position:absolute;left:15%;top:16%;width:70%;height:68%;object-fit:contain;display:block}
.brc-i figcaption{font:500 12.5px/1.2 var(--fs);color:#3d4c56;text-align:center}
@keyframes lcX{to{transform:translateX(-50%)}}
@keyframes lcY{to{transform:translateY(-50%)}}

/* J: two ribbons */
.brc-j{padding:clamp(56px,7vw,96px) 0 0}
.brc-top{text-align:center;display:grid;justify-items:center}
.brc-top p{margin-left:auto;margin-right:auto}
.brc-rows{display:grid;gap:22px;margin:44px 0 36px;-webkit-mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.brc-row{overflow:hidden;padding:4px 0 8px}
.brc-track{display:flex;gap:28px;width:max-content;padding-right:28px;animation:lcX 60s linear infinite}
.brc-row.rev .brc-track{animation-direction:reverse;animation-duration:70s}
.brc-rows:hover .brc-track{animation-play-state:paused}
.brc-j .brc-stair{position:relative;display:block;width:100%;height:clamp(56px,6vw,90px)}

/* K: step carousel */
.brc-k{padding:clamp(56px,7vw,96px) 0;background:#fff}
.brc-k-in{display:grid;grid-template-columns:minmax(260px,1fr) 2.2fr;gap:clamp(24px,4vw,64px);align-items:center}
.brc-k-nav{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.brc-k-nav button{width:44px;height:44px;display:grid;place-items:center;background:#fff;border:2px solid #061016;color:#061016;box-shadow:4px 4px 0 #3f7ea6;cursor:pointer}
.brc-k-nav button svg{width:18px;height:18px}
.brc-k-prev svg{transform:scaleX(-1)}
.brc-k-nav .btn{margin-left:8px}
.brc-k-view{list-style:none;margin:0;padding:6px 10px 14px 4px;display:flex;gap:18px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;scrollbar-width:none;min-width:0}
.brc-k-view::-webkit-scrollbar{display:none}
.brc-k-t{flex:0 0 clamp(150px,13vw,190px);aspect-ratio:1;scroll-snap-align:start;position:relative;background-color:var(--cs);background-repeat:no-repeat;background-position:bottom;background-size:100% auto;border:1px solid var(--c);display:grid;grid-template-rows:auto 1fr;padding:14px;box-sizing:border-box}
.brc-k-t b{grid-row:1;font:600 14px/1.2 var(--fs);color:var(--ci)}
.brc-k-t .brc-logo{grid-row:2}
.brc-k-t .brc-logo{align-self:end;justify-self:end;width:76%;box-shadow:5px 5px 0 var(--ci)}

/* L: moving wall */
.brc-l{padding:clamp(56px,7vw,96px) 0;background-color:#f3f7fa;background-image:linear-gradient(rgba(6,16,22,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(6,16,22,.07) 1px,transparent 1px);background-size:24px 24px}
.brc-l-in{display:grid;grid-template-columns:1fr 1.25fr;gap:clamp(24px,4vw,64px);align-items:center}
.brc-l-wall{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;height:460px;overflow:hidden;-webkit-mask:linear-gradient(transparent,#000 14%,#000 86%,transparent);mask:linear-gradient(transparent,#000 14%,#000 86%,transparent)}
.brc-col{overflow:hidden;min-width:0}
.brc-ctrack{display:grid;gap:22px;justify-items:center;padding:4px 8px 22px 0;animation:lcY 34s linear infinite}
.brc-col.c1 .brc-ctrack{animation-duration:44s;animation-direction:reverse}
.brc-col.c2 .brc-ctrack{animation-duration:39s}
.brc-l-wall:hover .brc-ctrack{animation-play-state:paused}
.brc-l .brc-i{width:100%;max-width:178px}

@media (max-width:900px){
  .brc-k-in,.brc-l-in{grid-template-columns:1fr}
  .brc-l-wall{height:360px}
}
@media (max-width:560px){.brc-l-wall{grid-template-columns:repeat(2,1fr)}.brc-col.c2{display:none}}
@media (prefers-reduced-motion:reduce){.brc-track,.brc-ctrack{animation:none}.brc-row{overflow-x:auto}}
/* r49: brand carousel options M, N, O */
/* M: dark band */
.brc-m{background:#061016;padding:clamp(120px,12vw,180px) 0 clamp(120px,12vw,170px)}
.brc-m .stair{position:absolute}
.brc-m-top{top:0;right:0;width:70%;height:clamp(110px,10vw,160px)}
.brc-m-bot{bottom:0;left:0;width:60%;height:clamp(100px,9vw,150px)}
.brc-m-in{position:relative;z-index:1}
.brc-m h2{color:#fff;max-width:16ch}
.brc-m p{color:#bfced7}
.brc-m-rows{position:relative;z-index:1;margin:40px 0 0}
.brc-m .brc-i figcaption{color:#bfced7}
.brc-m .brc-logo{border-color:#fff}

/* N: by category */
.brc-n{padding:clamp(56px,7vw,96px) 0;background:#fff}
.brc-n-tabs{margin:26px auto 0;flex-wrap:wrap;justify-content:center;max-width:100%}
.brc-n-tabs button{cursor:pointer}
.brc-n-p{display:grid;justify-items:center}
.brc-n-p[hidden]{display:none}
.brc-n-p.on{animation:brcIn .5s cubic-bezier(.2,.8,.2,1) both}
@keyframes brcIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.brc-n-d{text-align:center;margin:22px auto 30px!important}
.brc-n-cards{display:flex;gap:30px;justify-content:center;flex-wrap:wrap}
.brc-n-cta{margin-top:40px}

/* O: orbit. The stage is a size container: ring radii and card sizes are fractions of its width. */
.brc-o{padding:clamp(56px,7vw,96px) 0;background-color:#f3f7fa;background-image:radial-gradient(circle,rgba(63,126,166,.18) 1.4px,transparent 1.8px);background-size:16px 16px}
.brc-o-stage{position:relative;width:min(100%,560px);aspect-ratio:1;margin:0 auto;container-type:inline-size}
.brc-o-c1,.brc-o-c2{position:absolute;left:50%;top:50%;border:2px dashed rgba(63,126,166,.35);border-radius:50%;translate:-50% -50%}
.brc-o-c1{width:50cqw;height:50cqw}
.brc-o-c2{width:88cqw;height:88cqw}
.brc-ring{position:absolute;inset:0;animation:brcSpin 80s linear infinite}
.brc-ring.r2{animation-duration:120s;animation-direction:reverse}
.brc-slot{position:absolute;left:50%;top:50%;width:0;height:0;transform:rotate(var(--a)) translateY(-25cqw) rotate(calc(var(--a) * -1))}
.brc-ring.r2 .brc-slot{transform:rotate(var(--a)) translateY(-44cqw) rotate(calc(var(--a) * -1))}
.brc-o-i{position:absolute;margin:0;width:15cqw;translate:-50% -50%;animation:brcSpin 80s linear infinite reverse}
.brc-ring.r2 .brc-o-i{width:13cqw;animation-duration:120s;animation-direction:normal}
.brc-o-i .brc-logo{box-shadow:4px 4px 0 var(--c)}
.brc-o-i figcaption{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.brc-o-hub{position:absolute;left:50%;top:50%;translate:-50% -50%;width:21cqw;aspect-ratio:1;background:#061016;display:grid;place-items:center;align-content:center;gap:6px;box-shadow:7px 7px 0 #3f7ea6}
.brc-o-hub img{width:52%}
.brc-o-hub b{font:600 clamp(10px,2.4cqw,14px)/1 var(--fs);color:#fff}
.brc-o-stage:hover .brc-ring,.brc-o-stage:hover .brc-o-i{animation-play-state:paused}
@keyframes brcSpin{to{rotate:360deg}}
@media (prefers-reduced-motion:reduce){.brc-ring,.brc-o-i,.brc-n-p.on{animation:none}}
/* r50: the dark integrations band, polished. A blueprint grid strongest on the right, a ruled facts panel in the
   space beside the copy, the second half of the headline in the light accent, and the ribbon on a ruled rail. */
.brc-m-grid{position:absolute;inset:0;pointer-events:none;
  background-image:linear-gradient(rgba(127,184,212,.11) 1px,transparent 1px),linear-gradient(90deg,rgba(127,184,212,.11) 1px,transparent 1px);background-size:32px 32px;background-position:center top;
  -webkit-mask:linear-gradient(100deg,transparent 18%,#000 62%);mask:linear-gradient(100deg,transparent 18%,#000 62%)}
.brc-m-in{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:clamp(28px,5vw,96px);align-items:center}
.brc-m h2 em{font-style:normal;color:#7fb8d4}
.brc-m-facts{margin:0;display:grid;grid-template-columns:max-content 1fr;column-gap:32px;border-top:1px solid rgba(127,184,212,.35);background:rgba(6,16,22,.72)}
.brc-m-facts div{display:grid;grid-column:1/-1;grid-template-columns:subgrid;align-items:baseline;padding:18px 4px;border-bottom:1px solid rgba(127,184,212,.35)}
.brc-m-facts dt{font:600 clamp(24px,2.4vw,36px)/1 var(--fs);letter-spacing:-.03em;color:#fff}
.brc-m-facts div:nth-child(1) dt{color:#7fb8d4}
.brc-m-facts div:nth-child(2) dt{color:#4fb894}
.brc-m-facts div:nth-child(3) dt{color:#f0c73f}
.brc-m-facts dd{margin:0;color:#bfced7;font-size:15px;line-height:1.45}
/* the rail: a rule above and below the ribbon, with a tick every 32px riding the grid */
.brc-m-rows{padding:22px 0 18px;margin-top:56px;
  background:linear-gradient(rgba(127,184,212,.35),rgba(127,184,212,.35)) 0 0/100% 1px no-repeat,linear-gradient(rgba(127,184,212,.35),rgba(127,184,212,.35)) 0 100%/100% 1px no-repeat,
  repeating-linear-gradient(90deg,rgba(127,184,212,.5) 0 1px,transparent 1px 32px) 0 0/100% 8px no-repeat,repeating-linear-gradient(90deg,rgba(127,184,212,.5) 0 1px,transparent 1px 32px) 0 100%/100% 8px no-repeat}
.brc-m .brc-i{transition:transform .25s cubic-bezier(.2,.8,.2,1)}
.brc-m .brc-i:hover{transform:translateY(-4px)}
.brc-m .brc-i:hover .brc-logo{box-shadow:9px 9px 0 var(--c)}
.brc-m .brc-logo{transition:box-shadow .25s}
@media (max-width:900px){.brc-m-in{grid-template-columns:minmax(0,1fr)}.brc-m-facts{margin-top:8px}}
@media (max-width:560px){.brc-m-facts{grid-template-columns:1fr}.brc-m-facts div{gap:4px;padding:14px 2px}}
@media (prefers-reduced-motion:reduce){.brc-m .brc-i,.brc-m .brc-logo{transition:none}}
/* the ribbon is focusable (it scrolls by hand under reduced motion); its focus ring sits inside the rail */
.brc-row:focus-visible{outline:2px solid #7fb8d4;outline-offset:-2px}
/* r51: space between the hero and the dark band, and the band rising out of the page through the pixel dissolve
   (the same one the photo band uses), turned over so it is solid at the band and scatters upward */
.brc-m-rise{position:relative;height:clamp(150px,14vw,220px);overflow:hidden}
.brc-m-rise canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.brc-m{padding-top:clamp(64px,7vw,104px);padding-bottom:clamp(64px,7vw,104px)}
.brc-m .brc-track{animation-duration:80s}
/* r52: the trademark line under the logo rail, wherever the logos appear */
.brc-m-tm{position:relative;z-index:1;max-width:var(--wrap)!important;margin:18px auto 0!important;padding:0 28px;font-size:12.5px!important;line-height:1.5;color:#8ea6b4!important;text-align:right}
@media (max-width:560px){.brc-m-tm{text-align:left;padding:0 16px}}
/* r53: the feature-index header lines its heading up with the top of the facts card (it was aligned to the
   bottom, so a short lead left the heading ~45px below the card's top edge) */
.fi-head{align-items:start}
.fi-head h2{margin-top:0}
/* r54: the product windows on the home "See the work" tabs were 118% of their panel and cut off at the right
   (Snooze, the requester column). Show the whole window, with room on the right for its offset block. */
@media (min-width:901px){
  .xp-v{padding:28px 40px 38px 28px}
  .xp-main{width:100%}
}
/* r55: the footer's column lines stop at the base rule; the base row (logo, copyright, notes) sits on plain ink */
.ft3-bot{position:relative;z-index:0}
.ft3-bot::before{content:"";position:absolute;z-index:-1;top:0;bottom:-80px;left:-100vw;right:-100vw;background:#061016;pointer-events:none}
/* r56: the Projects lifecycle shows as many stages as the page lists (it was fixed at eleven) */
@media (min-width:1101px){.pl-flow{grid-template-columns:repeat(var(--n,11),minmax(0,1fr))}}
/* r57: a system with no logo on file (Syslog & SIEM) shows its name, centred on the card like a mark */
.brc-logo .pg-word{position:absolute;inset:0;display:grid;place-items:center;padding:0 10%;font-size:clamp(14px,1.15vw,17px)}
/* r58: the contact confirmation. It takes the form's place: a card with an ink edge and a green offset block,
   a check mark built square by square, what happens next, and two ways onward. */
.ct-done{position:relative;margin-top:6px;padding:clamp(26px,3vw,40px);background:#fff;border:2px solid #061016;box-shadow:10px 10px 0 #4fb894;outline:none}
.ct-done[hidden]{display:none}
.ct-done:focus-visible{box-shadow:10px 10px 0 #4fb894,0 0 0 4px #7fb8d4}
.ct-done-px{display:grid;grid-template-columns:repeat(8,10px);grid-auto-rows:10px;gap:2px;width:max-content;padding:12px;background:#e3f5ec;border:1.5px solid #1f6b52;margin-bottom:20px}
.ct-done-px i{background:transparent}
.ct-done-px i.on{background:#1f6b52}
.ct-done.in .ct-done-px i.on{animation:ctPx .26s steps(1) both;animation-delay:calc(var(--k) * 45ms + 120ms)}
@keyframes ctPx{from{background:transparent}to{background:#1f6b52}}
.ct-done h3{margin:0;font:500 clamp(30px,3vw,42px)/1.05 var(--fserif);letter-spacing:-.03em;color:#061016}
.ct-done p{margin:12px 0 0;font-size:16.5px;line-height:1.55;color:#3d4c56;max-width:44ch}
.ct-done .ct-done-sub{font-size:15px;color:#54646f}
.ct-done .ct-done-sub b{color:#061016;font-weight:600;overflow-wrap:anywhere}
.ct-done-acts{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px}
.ct-again{margin-top:18px;padding:6px 0;background:none;border:0;font:500 14.5px/1.4 var(--fs);color:#2b6a8f;text-decoration:underline;text-underline-offset:3px;cursor:pointer;min-height:44px}
.ct-again:hover{color:#061016}
.ct-done.in{animation:ctIn .45s cubic-bezier(.2,.8,.2,1) both}
@keyframes ctIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.ct-done.in,.ct-done.in .ct-done-px i.on{animation:none}}
/* r59: optional questions on the contact form say so, quietly */
.ct-opt{font-style:normal;font-weight:400;color:#54646f;margin-left:4px}
/* r60: the contact form really hides once sent (.form{display:grid} beat the hidden attribute, so the panel
   stacked under the form and ran out of the box), and each field shows its own problem in words. */
#cf[hidden],.form[hidden]{display:none!important}
.ct-err{display:block;margin-top:7px;font:500 13.5px/1.35 var(--fs);color:#a8432c}
.ct-err[hidden]{display:none}
.ct-form .field input[aria-invalid="true"]{border-color:#a8432c;box-shadow:0 0 0 3px rgba(168,67,44,.14)}
/* the confirmation sits inside the form box with room for its offset block, clear of the email line below */
.ct-form .ct-done{margin:24px 34px 30px 24px}
@media (max-width:560px){.ct-form .ct-done{margin:16px 26px 24px 16px}}

/* r61: the grid-paper hero's cursor trail follows the page's colour. The paper took the page theme
   (close-coral paints it coral) but the trail stayed the blue it was drawn for, so a coral page lit
   blue squares under the pointer. Each theme's trail is its footer trail's ink at the hero's strength. */
.ht{--trail:var(--htr,rgba(63,126,166,.35))}
.close-coral{--htr:rgba(196,87,62,.28)}
.close-green{--htr:rgba(46,138,106,.28)}
.close-gold{--htr:rgba(176,138,14,.3)}
.close-steel{--htr:rgba(109,129,140,.3)}

/* r62: the gold theme is the brand yellow #FDC300, not mustard. Yellow is a FILL (the hero block, the lit
   card, the photo panel, the step tiles); anything that must be read on or beside it is the dark ink, and
   the headline's italic words wear a yellow marker instead of olive type. */
.close-gold{--hp:#fff4cc;--hb:#FDC300;--hk:#061016;--ht:rgba(6,16,22,.9);--ht2:#FDC300;--htx:#fff4cc;--hpa:#fff0bf;--hln:#061016;--hln2:rgba(6,16,22,.16);--sa:#FDC300;--sa2:#FDC300;--sa3:#fff0bf;--htr:rgba(253,195,0,.5);--hs:#FDC300;--hs2:#d9a700}
.close-gold :is(.ht,.hr) h1 em{color:#061016;background:linear-gradient(transparent 58%,#FDC300 58%,#FDC300 92%,transparent 92%);-webkit-box-decoration-break:clone;box-decoration-break:clone;padding:0 .06em}
.close-gold :is(.sa-rule .big,.sa-rule>div,.sa-out>div){color:#061016}
.close-gold .sa-in .sa-tile{color:#061016}
.close-gold .ht-call span{color:#fff4cc}
/* the photo hero on a yellow panel: dark words and dark buttons */
.kh.kh-light{color:#061016}
.kh.kh-light h1{color:#061016}
.kh.kh-light h1 em{color:#061016}
.kh.kh-light .lead{color:rgba(6,16,22,.82)}
.kh.kh-light .kh-tag{color:#061016;border-color:rgba(6,16,22,.55)}
.kh.kh-light .btn-p{background:#061016;color:#fff;border-color:#061016}
.kh.kh-light .btn-p:hover{background:#1c2a33}
.kh.kh-light .btn-o{color:#061016;border-color:rgba(6,16,22,.6)}
.kh.kh-light .btn-o:hover{background:rgba(6,16,22,.08)}
/* a menu tile in yellow takes the dark glyph */
.mi .tile,.mi .tile.soft{color:var(--fo,#fff)!important}

/* ===== r63: the phone mockup keeps a real phone's shape ===== */
/* the island sits clear of the time and the status icons on every phone */
.phone .notch{width:23%}
.ph-sb{padding:13px 8% 0 12%}
.ph-sb span{gap:3px}
/* a row's second line stays one line: it ellipsizes rather than wrapping beside its pill */
.ph-row .t span{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* home showcase: full size with a real phone's proportions (about 2:1, it was 2.7:1 after two scale-downs),
   inside the panel's lower right corner (the panel clips), under the figures rather than over them */
.xp-float .phone{width:232px;transform:none}
.xp-float .phone .scr{height:416px}
.xp-v>.xp-float{right:16px;bottom:14px}
/* the header's 40px top pad predates the status bar build.mjs adds; under the bar it leaves an empty band */
.ph-sb+.ph-h{padding-top:10px}
/* a phone row reads left to right on every page, whatever the panel around it centres */
.phone .scr{text-align:left}

/* ===== r64: drawn scenes in place of the stock photos ===== */
/* each page's colours for its drawings, from its closing theme: ink for words, c the page colour, soft its paper,
   deep and mid its dark blueprint, lt the line colour on that dark */
.close-blue{--sc-ink:#2b6a8f;--sc-c:#3f7ea6;--sc-soft:#e1eef6;--sc-deep:#0c2230;--sc-mid:#173d55;--sc-lt:#a9cfe3}
.close-green{--sc-ink:#1f6b52;--sc-c:#4fb894;--sc-soft:#e3f5ec;--sc-deep:#0b2620;--sc-mid:#15493a;--sc-lt:#a6dcc6}
.close-coral{--sc-ink:#a8432c;--sc-c:#e0785f;--sc-soft:#fbe7e1;--sc-deep:#2a1410;--sc-mid:#5a2a1f;--sc-lt:#f3b9a9}
.close-gold{--sc-ink:#6b5400;--sc-c:#FDC300;--sc-soft:#fdf4d5;--sc-deep:#2a2208;--sc-mid:#5c4a0d;--sc-lt:#f1db8a}
.close-steel{--sc-ink:#3d4c56;--sc-c:#8ea6b4;--sc-soft:#e6ebee;--sc-deep:#111a20;--sc-mid:#2c3b45;--sc-lt:#bccdd7}

/* the scene's half of the hero: the page's paper on grid lines, the drawing laid out at its own size and scaled to
   the frame (data-fit, v3.js r64), the page's print texture over it and the panel's pixels breaking across its edge */
.kh-scene{overflow:hidden;background:var(--sc-soft)}
.sc-ground{position:absolute;inset:0;background-image:linear-gradient(color-mix(in oklab,var(--sc-ink) 11%,transparent) 1px,transparent 1px),linear-gradient(90deg,color-mix(in oklab,var(--sc-ink) 11%,transparent) 1px,transparent 1px);background-size:28px 28px;background-position:-1px -1px}
.sc-fit{position:absolute;inset:122px 32px 36px 23%;z-index:1}
.sc-box{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) scale(var(--s,1));transform-origin:center;font-family:var(--fs);color:#061016;text-align:left}
.kh-scene .sc-ground{z-index:0}
.kh-scene .kh-tx{z-index:0}
.kh-scene.tx-riso::after{z-index:0}
/* the panel's pixels break across the paper, under the drawing, so they never cover its words */
.kh-scene .kh-px{z-index:0}
@media (max-width:900px){.kh-scene{height:460px}.sc-fit{inset:34px 12px 18px}.kh-scene .kh-px{height:12%}}
@media (prefers-reduced-motion:reduce){.kh-scene *{animation:none!important}}

/* --- the chain --- */
.ch-line{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.ch-line path{fill:none;stroke:var(--sc-ink);stroke-width:2.6;stroke-dasharray:1 10;stroke-linecap:round;opacity:.6}
/* the record moving along the chain: a bright run of the line travelling once per cycle, as each person lights */
.ch-line .ch-flow{stroke:var(--sc-ink);stroke-width:4;stroke-dasharray:7 93;stroke-dashoffset:7;opacity:.9;animation:ch-flow linear infinite}
@keyframes ch-flow{from{stroke-dashoffset:7}to{stroke-dashoffset:-93}}
.ch-n{position:absolute;width:180px;margin:-40px 0 0 -90px;display:flex;flex-direction:column;align-items:center;text-align:center;z-index:2}
.ch-a{position:relative;width:76px;height:76px;border-radius:50%;border:2.5px solid #061016;background:#fff;box-shadow:4px 4px 0 var(--sc-c)}
.ch-a svg{display:block;width:100%;height:100%;border-radius:50%}
.ch-ring{position:absolute;inset:-10px;border-radius:50%;border:3px solid var(--sc-c);opacity:0;animation:ch-ring var(--t) infinite;animation-delay:var(--d)}
@keyframes ch-ring{0%{opacity:0;transform:scale(.86)}4%{opacity:1;transform:scale(1)}15%{opacity:1;transform:scale(1)}21%{opacity:0;transform:scale(1.1)}100%{opacity:0}}
.ch-n b{margin-top:10px;font:600 14px/1.2 var(--fs)}
.ch-n em{font:500 11.5px/1.3 var(--fs);font-style:normal;color:#4d5f69;margin-top:2px}
.ch-n p{margin:8px 0 0;background:#fff;border:1.5px solid #061016;padding:7px 10px;font:500 12.5px/1.35 var(--fs);color:#061016;box-shadow:3px 3px 0 color-mix(in oklab,var(--sc-ink) 30%,transparent)}
.ch-mid{position:absolute;left:166px;top:238px;width:268px;padding:11px 14px;background:var(--sc-ink);color:#fff;border:2px solid #061016;box-shadow:6px 6px 0 #061016;display:flex;flex-direction:column;gap:4px;z-index:1}
.ch-mid span{display:inline-flex;align-items:center;gap:6px;font:600 11.5px/1 var(--fm);color:color-mix(in oklab,#fff 78%,var(--sc-c))}
.ch-mid .ic{width:13px;height:13px}
.ch-mid b{font:600 16px/1.25 var(--fs)}
.ch-mid em{font:500 12px/1.3 var(--fm);font-style:normal;color:color-mix(in oklab,#fff 80%,transparent)}

/* --- the paper trail --- */
.ptr{position:absolute;background:#fff;border:2px solid #061016;box-shadow:7px 7px 0 #061016;padding:15px 18px 17px;transform:rotate(var(--r));font-family:var(--fs);box-sizing:border-box}
.ptr-h{display:flex;align-items:center;gap:8px;font:600 12px/1 var(--fm);color:var(--sc-ink)}
.ptr-h em{font-style:normal;margin-left:auto;color:#061016}
.ptr-t{display:block;margin-top:9px;font:600 17px/1.25 var(--fs)}
.ptr-rows{margin-top:10px;display:grid;gap:5px}
.ptr-rows div{display:flex;justify-content:space-between;gap:12px;font-size:12.5px;line-height:1.3;border-top:1px dashed #c9d6dd;padding-top:5px}
.ptr-rows span{color:#54646f}.ptr-rows b{font-weight:600;text-align:right}
.ptr-sheet{padding-bottom:86px}
.ptr-slip{background:#fbfbf8;box-shadow:6px 6px 0 var(--sc-c)}
.ptr-band .ptr-h{margin:-15px -18px 0;padding:11px 18px;background:var(--sc-c);color:#061016;border-bottom:2px solid #061016}
.ptr-band .ptr-h em{color:#061016}
.ptr-therm{border:0;background:#fbfaf4;box-shadow:none;filter:drop-shadow(5px 6px 0 rgba(6,16,22,.2));padding-bottom:28px;
  -webkit-mask:linear-gradient(#000 0 0) top/100% calc(100% - 9px) no-repeat,conic-gradient(from -45deg at bottom,#0000,#000 1deg 89deg,#0000 90deg) bottom/14px 9px repeat-x;
  mask:linear-gradient(#000 0 0) top/100% calc(100% - 9px) no-repeat,conic-gradient(from -45deg at bottom,#0000,#000 1deg 89deg,#0000 90deg) bottom/14px 9px repeat-x}
.ptr-therm .ptr-t,.ptr-therm .ptr-rows{font-family:var(--fm)}
.ptr-therm .ptr-t{font-size:15px}
.ptr-therm .ptr-rows div{border-top-style:dotted;font-size:12px}
.ptr-tag{box-shadow:6px 6px 0 var(--sc-c)}
.ptr-ok{margin-left:auto;width:22px;height:22px;border-radius:50%;background:var(--sc-ink);color:#fff;display:grid;place-items:center;flex:none}
.ptr-ok .ic{width:13px;height:13px;stroke-width:3}
.ptr-stamp{position:absolute;right:16px;bottom:16px;border:3px solid var(--sc-ink);color:var(--sc-ink);padding:7px 11px 6px;text-align:center;font-family:var(--fm);background:color-mix(in oklab,#fff 75%,transparent);transform:rotate(-12deg);animation:ptr-stamp .5s cubic-bezier(.2,.9,.3,1.35) 1.1s both}
.ptr-stamp b{display:block;font:600 18px/1 var(--fm);letter-spacing:.14em;text-transform:uppercase}
.ptr-stamp span{display:block;font-size:10.5px;margin-top:4px}
@keyframes ptr-stamp{from{opacity:0;transform:rotate(-12deg) scale(1.9)}to{opacity:.94;transform:rotate(-12deg) scale(1)}}

/* --- a record's life --- */
.lf-head{display:flex;flex-direction:column;padding:6px 0 16px 4px}
.lf-no{font:600 48px/1 var(--fm);color:var(--sc-ink);letter-spacing:-.02em}
.lf-head b{font:600 21px/1.2 var(--fs);margin-top:8px}
.lf-list{position:relative;display:grid;gap:8px}
.lf-list::before{content:"";position:absolute;left:103px;top:20px;bottom:20px;width:2px;background:color-mix(in oklab,var(--sc-ink) 32%,transparent)}
.lf-r{display:grid;grid-template-columns:86px 16px minmax(0,1fr);align-items:center;gap:0 10px;min-height:56px}
.lf-k{font:600 12px/1.2 var(--fm);color:#4d5f69;text-align:right}
.lf-dot{width:16px;height:16px;box-sizing:border-box;border-radius:50%;background:#fff;border:3px solid var(--sc-ink);position:relative;z-index:1;animation:lf-dot var(--t) infinite;animation-delay:var(--d)}
@keyframes lf-dot{0%,100%{background:#fff}5%,62%{background:var(--sc-c)}}
.lf-c{display:flex;align-items:center;gap:12px;background:#fff;border:1.5px solid #061016;box-shadow:4px 4px 0 color-mix(in oklab,var(--sc-ink) 32%,transparent);padding:7px 12px 7px 8px;min-width:0}
.lf-a{flex:none}.lf-a svg{width:38px;height:38px;display:block}
.lf-t{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.lf-t b{font:600 13.5px/1.3 var(--fs)}
.lf-t em{font:500 11.5px/1.3 var(--fs);font-style:normal;color:#54646f}
.lf-s{flex:none;font:600 11.5px/1 var(--fm);color:var(--sc-ink);background:var(--sc-soft);padding:6px 8px;white-space:nowrap}
.lf-r.last .lf-c{border-width:2px;box-shadow:5px 5px 0 var(--sc-c)}
.lf-foot{display:flex;justify-content:space-between;align-items:center;margin-top:18px;padding-left:112px}
.lf-foot>span:first-child{display:inline-flex;gap:7px;align-items:center;font:600 13px/1 var(--fm);color:var(--sc-ink)}
.lf-foot .ic{width:15px;height:15px}
.lf-seal{display:inline-flex;align-items:center;gap:7px;border:2.5px solid var(--sc-ink);color:var(--sc-ink);padding:7px 12px;font:600 13px/1 var(--fm);transform:rotate(-4deg);background:#fff}

/* --- the floor plan: an architect's sheet on the page's own dark --- */
.kh-scene.sc-plan{background:var(--sc-deep)}
.sc-plan .sc-ground{background-image:linear-gradient(color-mix(in oklab,var(--sc-lt) 7%,transparent) 1px,transparent 1px),linear-gradient(90deg,color-mix(in oklab,var(--sc-lt) 7%,transparent) 1px,transparent 1px),linear-gradient(color-mix(in oklab,var(--sc-lt) 14%,transparent) 1px,transparent 1px),linear-gradient(90deg,color-mix(in oklab,var(--sc-lt) 14%,transparent) 1px,transparent 1px);background-size:12px 12px,12px 12px,60px 60px,60px 60px}
.pl-svg{position:absolute;left:0;top:0;width:600px;height:440px;overflow:visible}
.pl-svg stop{stop-color:#4fb894}
.pl-floor{fill:color-mix(in oklab,var(--sc-lt) 6%,transparent)}
.pl-rm{fill:color-mix(in oklab,var(--sc-lt) 4%,transparent)}
.pl-w{fill:none;stroke:var(--sc-lt);stroke-width:7;stroke-linecap:square}
.pl-w2{fill:none;stroke:var(--sc-lt);stroke-width:4;stroke-linecap:square}
.pl-win{fill:none;stroke:var(--sc-lt);stroke-width:1.1}
.pl-leaf{stroke:var(--sc-lt);stroke-width:2;stroke-linecap:round}
.pl-swing{fill:none;stroke:var(--sc-lt);stroke-width:1;stroke-dasharray:3 3;opacity:.7}
.pl-desk{fill:color-mix(in oklab,var(--sc-lt) 11%,transparent);stroke:var(--sc-lt);stroke-width:1.2}
.pl-dn{fill:var(--sc-lt);font:500 8px var(--fm);text-anchor:middle;opacity:.75}
.pl-ch{fill:none;stroke:var(--sc-lt);stroke-width:1.1;opacity:.75}
.pl-rack{fill:color-mix(in oklab,var(--sc-lt) 22%,transparent);stroke:var(--sc-lt);stroke-width:1.2}
.pl-fine{stroke:var(--sc-lt);stroke-width:.8;opacity:.6}
.pl-shelf{fill:color-mix(in oklab,var(--sc-lt) 8%,transparent);stroke:var(--sc-lt);stroke-width:1.2}
.pl-lb{fill:var(--sc-lt);font:600 9.5px var(--fm);letter-spacing:.14em}
.pl-dim{stroke:var(--sc-lt);stroke-width:1;fill:none;opacity:.75}
.pl-dt{fill:var(--sc-lt);font:500 10px var(--fm);text-anchor:middle;opacity:.85}
.pl-n circle{fill:none;stroke:var(--sc-lt);stroke-width:1.2}.pl-n path{fill:var(--sc-lt)}.pl-n text{fill:var(--sc-lt);font:600 9px var(--fm);text-anchor:middle}
.pl-mk{fill:none;stroke:var(--sc-lt);stroke-width:1.2}
.pl-mf{fill:#4fb894;opacity:0;animation:pl-mf 8s infinite}
@keyframes pl-mf{0%{opacity:0}1.5%{opacity:1}86%{opacity:1}94%,100%{opacity:0}}
.pl-miss{fill:#e0785f}
.pl-miss-r{fill:none;stroke:#e0785f;stroke-width:2;transform-box:fill-box;transform-origin:center;animation:pl-ping 1.8s ease-out infinite}
@keyframes pl-ping{from{transform:scale(1);opacity:.9}to{transform:scale(2.8);opacity:0}}
.pl-mv{fill:#FDC300}
.pl-mvp{fill:none;stroke:#FDC300;stroke-width:1.5;stroke-dasharray:4 3}
.pl-sweep{animation:pl-sweep linear infinite}
.pl-sweep path{stroke:#4fb894;stroke-width:1.6}
.pl-glow{fill:url(#plg)}
@keyframes pl-sweep{0%{transform:translateX(40px);opacity:1}87.5%{transform:translateX(560px);opacity:1}88%,100%{transform:translateX(560px);opacity:0}}
.pl-tag{position:absolute;padding:6px 10px;background:#fff;border:2px solid #061016;display:flex;flex-direction:column;gap:2px;z-index:2;white-space:nowrap}
.pl-tag b{font:600 12px/1.1 var(--fm)}.pl-tag span{font-size:11.5px;color:#54646f}
.pl-tag-mv{box-shadow:4px 4px 0 #FDC300}.pl-tag-miss{box-shadow:4px 4px 0 #e0785f}
.pl-card{position:absolute;left:30px;top:458px;width:372px;box-sizing:border-box;background:#fff;border:2px solid #061016;box-shadow:6px 6px 0 #4fb894;padding:11px 14px}
.pl-ch2{display:flex;gap:10px;align-items:baseline}
.pl-ch2 span{display:inline-flex;align-items:center;gap:5px;font:600 11.5px/1 var(--fm);color:var(--sc-ink)}
.pl-ch2 .ic{width:13px;height:13px}
.pl-ch2 b{font:600 14px/1.2 var(--fs)}
.pl-bar{height:6px;background:#e6ebee;margin:9px 0 8px}.pl-bar i{display:block;height:100%;background:#4fb894}
.pl-kv{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.pl-kv span{display:flex;flex-direction:column;gap:1px;min-width:0}
.pl-kv em{font:500 10.5px/1.2 var(--fs);font-style:normal;color:#54646f}.pl-kv b{font:600 12.5px/1.2 var(--fs)}
.pl-block{position:absolute;right:26px;top:458px;width:148px;box-sizing:border-box;border:1.5px solid var(--sc-lt);color:var(--sc-lt);font:500 11px/1.55 var(--fm);padding:8px 11px;display:flex;flex-direction:column}
.pl-block b{font:600 12.5px/1.4 var(--fm)}

/* --- the rack --- */
.rk-cab{position:relative;width:228px;box-sizing:border-box;background:#0d1216;border:2px solid #061016;border-radius:6px;box-shadow:10px 10px 0 var(--sc-c)}
.rk-top{height:22px;display:flex;align-items:center;justify-content:space-between;padding:0 10px;font:600 10px/1 var(--fm);color:#bccdd7;background:#1a2228;border-bottom:1px solid #05080a;border-radius:4px 4px 0 0}
.rk-top i{width:5px;height:5px;border-radius:50%;background:#4fb894}
.rk-in{position:absolute;left:8px;right:8px;top:28px;bottom:12px}
.rk-rail{position:absolute;top:0;bottom:0;width:12px;background-color:#2a343b;background-image:radial-gradient(circle,#0d1216 1.6px,transparent 2.1px);background-size:12px var(--u,11.4px)}
.sc-rack .rk-cab{position:absolute;left:34px;top:0}
.rk-rail.l{left:0}.rk-rail.r{right:0}
.rk-units{position:absolute;left:14px;right:14px;top:0;bottom:0}
.rk-d{position:absolute;left:0;right:0;display:flex;align-items:center;gap:5px;padding:0 6px;box-sizing:border-box;overflow:hidden}
.rk-patch{background:#20292f}
.rk-ports{display:flex;gap:1.5px}.rk-ports i{width:4px;height:4px;background:#0a0e11;box-shadow:inset 0 0 0 .6px #46525a}
.rk-switch{background:#11171b;box-shadow:inset 0 1px 0 #2d3840}
.rk-leds{margin-left:auto;display:flex;gap:2px}
.rk-leds i{width:3px;height:3px;border-radius:50%;background:#4fb894;animation:rk-blink 1.3s steps(2) infinite}
@keyframes rk-blink{50%{opacity:.2}}
.rk-brush{background:#151c21}.rk-slit{flex:1;height:2px;background:#05080a}
.rk-blank{background-color:#1b2328;background-image:repeating-linear-gradient(90deg,transparent 0 6px,rgba(0,0,0,.35) 6px 8px)}
.rk-server,.rk-eol{background:#bcc7cd;box-shadow:inset 0 1px 0 #dfe6ea,inset 0 -1px 0 #8796a0}
.rk-bays{display:flex;gap:2px}.rk-bays i{width:9px;height:8px;background:#8796a0;box-shadow:inset 0 0 0 1px #6c7a83}
.rk-lab{font:600 8.5px/1 var(--fm);color:#1b2328;margin-left:auto;white-space:nowrap}
.rk-ok{width:5px;height:5px;border-radius:50%;background:#4fb894;flex:none}
.rk-eol{outline:2.5px solid #e0785f;outline-offset:-1px;z-index:1}
.rk-warn{width:6px;height:6px;border-radius:50%;background:#e0785f;flex:none;animation:rk-blink .8s steps(2) infinite}
.rk-new{border:1.5px dashed #FDC300;background:rgba(253,195,0,.08)}.rk-new .rk-lab{color:#f1db8a;margin:0 auto}
.rk-storage{background:#1e272d}.rk-storage .rk-lab{color:#8796a0}
.rk-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:2px;flex:1}.rk-grid i{height:17px;background:#2f3a41;box-shadow:inset 0 0 0 1px #46525a}
.rk-ups{background:#11171b}.rk-ups .rk-lab{color:#8796a0}
.rk-lcd{font:600 9px/1 var(--fm);color:#4fb894;background:#05080a;padding:3px 5px}
.rk-pdu{background:#20292f}.rk-outs{display:flex;gap:3px}.rk-outs i{width:7px;height:9px;background:#05080a;border-radius:1px}
.rk-nums{position:absolute;left:-28px;top:28px;bottom:12px;width:22px}
.rk-nums i{position:absolute;right:0;font:500 9px/1 var(--fm);color:var(--sc-ink);font-style:normal}
.rk-lead{position:absolute;left:0;top:0;width:600px;height:560px;overflow:visible;pointer-events:none;z-index:1}
.rk-lead path{fill:none;stroke:#e0785f;stroke-width:2;stroke-dasharray:5 4}.rk-lead circle{fill:#e0785f}
.rk-card{position:absolute;left:330px;width:256px;box-sizing:border-box;background:#fff;border:2px solid #061016;box-shadow:6px 6px 0 var(--sc-c);padding:11px 13px;z-index:2}
.rk-host{box-shadow:6px 6px 0 #e0785f}
.rk-ch{display:flex;flex-direction:column;gap:3px;margin-bottom:9px}
.rk-ch span{display:inline-flex;align-items:center;gap:6px;font:600 12px/1 var(--fm);color:var(--sc-ink)}
.rk-ch .ic{width:13px;height:13px}
.rk-ch em{font:600 14px/1.25 var(--fs);font-style:normal;color:#061016}
.rk-kv{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px 12px}
.rk-kv span{display:flex;flex-direction:column;gap:1px;min-width:0}
.rk-kv em{font:500 10.5px/1.2 var(--fs);font-style:normal;color:#54646f}.rk-kv b{font:600 12.5px/1.25 var(--fs)}
.rk-app{display:flex;align-items:center;gap:8px;font-size:12.5px;padding:5px 0;border-top:1px solid #e6ebee}
.rk-app i{width:8px;height:8px;border-radius:50%;flex:none}.rk-app i.c{background:#e0785f}.rk-app i.h{background:#FDC300}.rk-app i.m{background:#8ea6b4}.rk-app i.n{background:#c9d6dd}
.rk-app b{margin-left:auto;font-weight:600}

/* --- the supplier's file --- */
.fd-back{position:absolute;left:24px;right:24px;top:34px;bottom:12px;background:var(--sc-c);border:2px solid #061016;border-radius:0 10px 10px 10px;box-shadow:8px 8px 0 #061016}
.fd-back::before{content:"";position:absolute;left:-2px;top:-28px;width:200px;height:30px;background:var(--sc-c);border:2px solid #061016;border-bottom:0;border-radius:9px 9px 0 0}
.fd-name{position:absolute;left:16px;top:-20px;font:600 13px/1 var(--fm);color:#061016;z-index:1}
.fd-c{position:absolute;left:48px;right:48px;height:300px;background:#fffdf6;border:2px solid #061016}
.fd-tab{position:absolute;left:var(--tx);top:-31px;height:31px;padding:0 13px;display:inline-flex;align-items:center;gap:6px;background:#fffdf6;border:2px solid #061016;border-bottom:0;border-radius:7px 7px 0 0;font:600 12.5px/1 var(--fs);white-space:nowrap}
.fd-tab .ic{width:14px;height:14px}
.fd-line{padding:11px 16px;display:flex;justify-content:space-between;align-items:baseline;gap:12px;font-size:13px}
.fd-line b{font:600 13.5px/1.3 var(--fs);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fd-line b em{font:600 12px var(--fm);font-style:normal;color:var(--sc-ink);margin-right:7px}
.fd-line span{color:#54646f;white-space:nowrap}
.fd-front{height:auto;bottom:30px;box-shadow:0 -3px 0 rgba(6,16,22,.05)}
.fd-front .fd-tab{background:var(--sc-soft)}
.fd-body{padding:18px 20px}
.fd-head{display:flex;gap:16px;align-items:center}
.fd-ring{width:76px;height:76px;border-radius:50%;background:conic-gradient(var(--sc-ink) calc(var(--v) * 1%),#e8e2cf 0);display:flex;flex-direction:column;align-items:center;justify-content:center;position:relative;flex:none}
.fd-ring::before{content:"";position:absolute;inset:8px;border-radius:50%;background:#fffdf6}
.fd-ring b{position:relative;font:600 22px/1 var(--fm)}.fd-ring span{position:relative;font-size:10px;color:#54646f;margin-top:2px}
.fd-t{display:block;font:600 21px/1.2 var(--fs)}
.fd-head em{font:600 12px var(--fm);font-style:normal;color:var(--sc-ink)}
.fd-kv{margin-top:16px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px 20px}
.fd-kv span{display:flex;flex-direction:column;gap:2px;border-top:1px solid #e8e2cf;padding-top:8px;min-width:0}
.fd-kv em{font:500 11.5px/1.2 var(--fs);font-style:normal;color:#54646f}.fd-kv b{font:600 16px/1.25 var(--fs)}
.fd-renew{margin-top:16px;display:flex;align-items:center;gap:8px;flex-wrap:wrap;background:var(--sc-soft);border:1.5px solid #061016;padding:9px 12px;font-size:13px}
.fd-renew .ic{width:15px;height:15px;color:var(--sc-ink)}
.fd-renew b{font:600 12.5px var(--fm);color:var(--sc-ink)}
.fd-renew span{font-weight:600}
.fd-renew em{margin-left:auto;font-style:normal;color:#54646f;font-size:12.5px}
.fd-clip{position:absolute;right:66px;width:20px;height:62px;border:3px solid #6c7a83;border-radius:10px;z-index:10}
.fd-clip::after{content:"";position:absolute;left:3px;right:3px;top:8px;bottom:-12px;border:3px solid #6c7a83;border-top:0;border-radius:0 0 8px 8px}

/* --- the product screen, printed --- */
.scw{position:absolute;left:30px;top:4px;width:560px;transform:rotate(-1.2deg) scale(.82);transform-origin:0 0;border:2px solid #061016;box-shadow:10px 10px 0 var(--sc-c);background:#fff}
.scw .win{box-shadow:none!important;border-radius:0!important;border:0!important;margin:0!important}
.scn{position:absolute;width:292px;box-sizing:border-box;background:#fff;border:2px solid #061016;box-shadow:6px 6px 0 var(--sc-ink);padding:12px 14px;z-index:2}
/* the first step on the left, the last on the right, read in order */
.scn-a{left:14px;bottom:4px}
.scn-b{right:6px;bottom:16px;box-shadow:6px 6px 0 var(--sc-c)}
.scn-h{display:flex;gap:10px;align-items:center}
.scn-h svg{width:34px;height:34px;flex:none}
.scn-h span{display:flex;flex-direction:column}
.scn-h b{font:600 13.5px/1.2 var(--fs)}.scn-h em{font:500 11px/1.3 var(--fs);font-style:normal;color:#54646f}
.scn p{margin:8px 0 0;font:500 13.5px/1.35 var(--fs)}
.scn i{display:inline-flex;gap:5px;align-items:center;margin-top:8px;font:600 11px/1 var(--fm);color:var(--sc-ink);font-style:normal}
.scn i .ic{width:13px;height:13px}

/* tile heroes: the person on the card, drawn, on the page's paper */
.ht-drawn{background:var(--sc-soft)}
.ht-drawn svg{display:block;width:100%;height:100%}
/* the tile row is translucent; over a drawn portrait its lines showed through, so the tiles get a solid ink backing */
.ht-art:has(.ht-drawn) .ht-tiles>div:not(.on){background-image:linear-gradient(var(--ht),var(--ht));background-color:#061016}

/* the numbers band: four drawn people */
.nb-drawn svg{display:block;width:100%;height:100%}

/* the home page's closing band: the cast, one person lit at a time */
.pb-cast{overflow:hidden}
.cw{position:absolute;inset:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-template-rows:repeat(3,minmax(0,1fr));gap:2px;background:#061016}
.cw-p{position:relative;overflow:hidden;background:#0f1a21}
.cw-p svg{display:block;width:100%;height:100%}
.cw-p::after{content:"";position:absolute;inset:0;background:rgba(6,16,22,.5);animation:cw-on 10.8s infinite;animation-delay:var(--d);pointer-events:none}
@keyframes cw-on{0%,100%{opacity:1}4%,13%{opacity:0}19%{opacity:1}}
.cw-p:hover::after{animation:none;opacity:0}
.cw-p span{position:absolute;left:8px;bottom:8px;display:flex;flex-direction:column;background:#061016;padding:5px 8px;z-index:1;max-width:calc(100% - 16px)}
.cw-p b{font:600 12.5px/1.2 var(--fs);color:#fff}.cw-p em{font:500 11px/1.3 var(--fs);font-style:normal;color:#bccdd7}
@media (prefers-reduced-motion:reduce){.cw-p::after{animation:none;opacity:.25}}
@media (max-width:560px){.cw-p span{left:4px;bottom:4px;padding:3px 5px}.cw-p em{display:none}}

/* the story stage: the robot holding the record stands on the time-saved tile */
.sx-photo.sx-bot{top:2%;bottom:19%;height:auto}
.sx-photo.sx-bot img{height:100%;filter:none}
@media (max-width:900px){.sx-photo.sx-bot{top:16px;bottom:auto;height:300px}}

/* ===== r65: the floor plan screen and the rack card, drawn like the product ===== */
/* the plan's layers as toggles, a zoom control, and the floor on a dotted canvas */
.fp-bar{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:12px}
.fp-chip{display:inline-flex;align-items:center;gap:6px;height:26px;padding:0 9px;border:1px solid #dfe7ec;border-radius:999px;font:500 11.5px/1 var(--fs);color:#6d818c;background:#fff}
.fp-chip.on{border-color:#bccdd7;color:#08141c}
.fp-chip i{width:8px;height:8px;border-radius:2px}
.fp-chip:not(.on) i{opacity:.4}
.fp-chip b{font:600 11px/1 var(--fm);color:#798c98}
.fp-zoom{margin-left:auto;display:inline-flex;align-items:center;gap:8px;height:26px;padding:0 3px;border:1px solid #dfe7ec;border-radius:8px;font:600 11px/1 var(--fm);color:#3d4c56;background:#fff}
.fp-zoom b{display:grid;place-items:center;width:20px;height:20px;border-radius:5px;background:#f3f6f8}
.fp-zoom .ic{width:12px;height:12px}
.fp-stage{position:relative;margin-top:10px;border:1px solid #dfe7ec;border-radius:10px;background-color:#fbfcfd;background-image:radial-gradient(#e1e8ec 1px,transparent 1.2px);background-size:14px 14px;padding:4px 2px 0;overflow:hidden}
/* the same floor as the hero's blueprint (plan.mjs), in the product's light style: rooms tinted by what they are */
.pl-svg.fp-svg{position:static;display:block;width:100%;height:auto}
.fp-svg .pl-floor{fill:#fff}
.fp-svg .pl-rm{fill:none}.fp-svg .pl-rm-mdf{fill:#eaf7f1}.fp-svg .pl-rm-store{fill:#fdf6dc}.fp-svg .pl-rm-conf{fill:#eaf3f9}
.fp-svg .pl-w{stroke:#2c3b45;stroke-width:6}
.fp-svg .pl-w2{stroke:#2c3b45;stroke-width:3.5}
.fp-svg .pl-win{stroke:#7fb8d4;stroke-width:1.2}
.fp-svg .pl-leaf{stroke:#6d818c;stroke-width:1.6}
.fp-svg .pl-swing{stroke:#a7b6bf;opacity:1}
.fp-svg .pl-desk{fill:#f6f8f9;stroke:#a7b6bf;stroke-width:1.1}
.fp-svg .pl-dn{fill:#8a9aa3;opacity:1}
.fp-svg .pl-ch{stroke:#c3cfd6;opacity:1}
.fp-svg .pl-rack{fill:#dcf2e8;stroke:#2e8a6a}
.fp-svg .pl-fine{stroke:#2e8a6a;opacity:.7}
.fp-svg .pl-shelf{fill:#fbefc4;stroke:#b08a0e}
.fp-svg .pl-lb{fill:#54646f;font-size:9px}
.fp-svg .pl-dim{stroke:#a7b6bf;opacity:1}
.fp-svg .pl-dt{fill:#798c98;opacity:1}
.fp-svg .pl-n circle{stroke:#a7b6bf}.fp-svg .pl-n path,.fp-svg .pl-n text{fill:#6d818c}
/* what is placed on it: laptops on their desks, printers, access points, the selected rack and the open desk */
.fp-lap{fill:#3f7ea6;stroke:#fff;stroke-width:1.5}
.fp-prn{fill:#f0c73f;stroke:#8a6d00;stroke-width:1}
.fp-ap{fill:#7fb8d4}
.fp-ap-r{fill:none;stroke:#7fb8d4;stroke-width:1.2;stroke-dasharray:2 2.5}
.fp-rsel{fill:none;stroke:#2e8a6a;stroke-width:2;stroke-dasharray:4 3}
.fp-sel{fill:rgba(63,126,166,.14);stroke:#3f7ea6;stroke-width:2}
.fp-stem{stroke:#3f7ea6;stroke-width:1.5;fill:none}
.fp-pop{position:absolute;left:17%;top:40.5%;width:38%;min-width:170px;box-sizing:border-box;background:#fff;border:1px solid #bccdd7;border-radius:8px;box-shadow:0 8px 22px -10px rgba(6,16,22,.35);padding:8px 10px;display:flex;flex-direction:column;gap:2px;font-size:11px;line-height:1.35;color:#54646f}
.fp-pop b{font:600 12.5px/1.2 var(--fs);color:#08141c}
.fp-pop .mono{font:500 10.5px/1.3 var(--fm);color:#2b6a8f}
.fp-rtag{position:absolute;left:71%;top:2.5%;background:#2e8a6a;color:#fff;border-radius:5px;padding:3px 7px;font:500 10.5px/1.2 var(--fs);white-space:nowrap}
.fp-rtag b{font:600 10.5px var(--fm)}

/* the rack card: the cabinet front-on (rack.mjs, small) beside what the important units hold */
.rkc{width:400px;max-width:100%;box-sizing:border-box}
.rkc-b{display:flex;gap:16px;margin-top:12px;align-items:flex-start}
.rk-cab.rk-sm{width:150px;flex:none;margin-left:28px;border-radius:5px;box-shadow:5px 5px 0 #4fb894}
.rk-sm .rk-top{font-size:9px}
.rk-sm .rk-lab{display:none}
.rk-sm .rk-d{gap:3px;padding:0 4px}
.rk-sm .rk-ports{gap:1px}.rk-sm .rk-ports i{width:2.6px;height:2.6px}
.rk-sm .rk-bays{gap:1.5px}.rk-sm .rk-bays i{width:6px;height:4px}
.rk-sm .rk-grid{gap:1.5px}.rk-sm .rk-grid i{height:10px}
.rk-sm .rk-lcd{font-size:6.5px;padding:1px 3px}
.rk-sm .rk-outs{gap:2px}.rk-sm .rk-outs i{width:5px;height:6px}
.rk-sm .rk-ok,.rk-sm .rk-warn{margin-left:auto}
.rk-sm .rk-nums{left:-27px}.rk-sm .rk-nums i{font-size:8.5px;color:#798c98}
.rkc-l{flex:1;min-width:0;display:grid;gap:4px}
.rkc-l div{display:flex;align-items:center;gap:8px;padding:5px 8px;border-radius:6px;background:#f3f6f8;font-size:11.5px;min-width:0}
.rkc-l .mono{font:500 10.5px/1 var(--fm);color:#798c98;flex:none}
.rkc-l b{font-weight:500;color:#08141c;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rkc-l .eol{background:#fbe7e1}
.rkc-l em{margin-left:auto;font:600 10px/1 var(--fm);font-style:normal;color:#a8432c;white-space:nowrap}
@media (max-width:560px){.rkc-b{flex-direction:column}.rk-cab.rk-sm{margin-left:24px}}