/* MiSAFE Site Kit: site.css, the whole visual design (mockup style.css, build guide section 4). Every rule sits under body.misafe-kit so other plugins' stylesheets cannot override it Generated by kit-build from mockup 3.2 (MISAFE-MKT-WEB01-3.2). Do not edit by hand: change the mockup, then rebuild. Copyright MiSAFE Solutions Pty Ltd. GPL-2.0-or-later. */ /* Self-hosted fonts (SIL Open Font License 1.1, see assets/fonts/OFL.txt). Plus Jakarta Sans is the variable font, so the mockup's in-between weights (650, 750) render exactly as they do from Google Fonts. */ @font-face{font-family:'Plus Jakarta Sans';font-style:normal;font-display:swap;font-weight:200 800;src:url(../fonts/plus-jakarta-sans-latin-ext-wght-normal.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF} @font-face{font-family:'Plus Jakarta Sans';font-style:normal;font-display:swap;font-weight:200 800;src:url(../fonts/plus-jakarta-sans-latin-wght-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD} /* ===== guard against other plugins' Bootstrap-style CSS (Site Kit 1.1): browser values the kit relies on ===== */ body.misafe-kit{text-align:start} body.misafe-kit a{text-decoration:underline} body.misafe-kit a:hover{color:inherit} body.misafe-kit img,body.misafe-kit svg{vertical-align:baseline} body.misafe-kit label{display:inline;margin-bottom:0} body.misafe-kit legend{max-width:none;margin-bottom:0;font-size:inherit;line-height:inherit;white-space:normal} body.misafe-kit dl{margin-top:1em;margin-bottom:1em} body.misafe-kit summary{cursor:auto} body.misafe-kit select{overflow-wrap:inherit} body.misafe-kit .btn{width:auto;vertical-align:baseline;user-select:auto;-webkit-user-select:auto} body.misafe-kit .btn-ghost:focus{box-shadow:none} body.misafe-kit .btn-primary,body.misafe-kit .btn-dark,body.misafe-kit .btn-sm{width:auto;border-radius:var(--pill)} body.misafe-kit .btn-primary:not(:disabled):not(.disabled):active,body.misafe-kit .btn-primary:not(:disabled):not(.disabled).active{background-color:var(--orange);border-color:transparent;color:var(--ink);box-shadow:0 16px 28px -12px rgba(247,148,30,.95)} body.misafe-kit .btn-dark:not(:disabled):not(.disabled):active,body.misafe-kit .btn-dark:not(:disabled):not(.disabled).active{background-color:var(--ch-800);border-color:transparent;color:#FFFFFF;box-shadow:0 10px 22px -14px rgba(31,40,46,.8)} body.misafe-kit .nav{flex-wrap:nowrap;padding-left:0;list-style:disc outside none} body.misafe-kit .card{position:static;min-width:auto;word-wrap:normal;background-clip:border-box} body.misafe-kit .lead{font-size:inherit;font-weight:inherit} body.misafe-kit .modal{overflow:visible} body.misafe-kit .toast{flex-basis:auto;border:0 none;margin-bottom:0;background-clip:border-box;overflow:visible} body.misafe-kit .text-danger{color:var(--bad)!important} body.misafe-kit .bg-white{background-color:#FFFFFF!important} /* ===== mockup 2.0 style.css ===== */ :root,body.misafe-kit{color-scheme:light; --charcoal:#42515A;--ch-700:#36434B;--ch-800:#2B353B;--ch-900:#222A2F; --ink:#1F282E;--text:#4A5860;--muted:#5F6E78;--faint:#9EABB2; --line:#E3E7EA;--line-2:#D5DCE0;--tint:#EEF1F3;--soft:#F6F8F9;--white:#FFFFFF; --orange:#F7941E; --ok:#1D7A3E;--ok-bg:#EAF6EF;--warn:#B07000;--warn-bg:#FFF4E5;--bad:#C0392B;--bad-bg:#FBEDEB;--high:#D9631E;--high-bg:#FCEFE6; --font:'Plus Jakarta Sans',Arial,Helvetica,sans-serif; --mono:'Plus Jakarta Sans',Arial,Helvetica,sans-serif; /* one font site-wide (owner direction 19/10/2026); references and IDs use tabular figures */ --wrap:1240px;--gut:clamp(18px,4vw,40px); --r-xl:36px;--r-lg:28px;--r:22px;--r-sm:14px;--pill:999px; --sh-xs:0 1px 2px rgba(31,40,46,.06); --sh-sm:0 1px 2px rgba(31,40,46,.05),0 6px 16px -8px rgba(31,40,46,.14); --sh:0 2px 6px rgba(31,40,46,.05),0 24px 46px -24px rgba(31,40,46,.30); --sh-lg:0 4px 12px rgba(31,40,46,.07),0 40px 80px -32px rgba(31,40,46,.42); --ease:cubic-bezier(.2,.7,.2,1); --dark-bg:radial-gradient(900px 520px at 88% 0%,rgba(255,255,255,.13),rgba(255,255,255,0) 60%),radial-gradient(700px 420px at 0% 100%,rgba(255,255,255,.07),rgba(255,255,255,0) 60%),linear-gradient(155deg,#4C5C66 0%,#42515A 40%,#2B353B 100%);} body.misafe-kit *,body.misafe-kit *::before,body.misafe-kit *::after{box-sizing:border-box} html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;overflow-x:hidden} body.misafe-kit{margin:0;background:#FFFFFF;color:var(--text);font-family:var(--font);font-size:16.5px;line-height:1.65;-webkit-font-smoothing:antialiased;overflow-x:clip} body.misafe-kit img,body.misafe-kit svg{display:block;max-width:100%} body.misafe-kit a{color:inherit} body.misafe-kit button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer} body.misafe-kit input,body.misafe-kit select,body.misafe-kit textarea{font:inherit;color:var(--ink)} body.misafe-kit h1,body.misafe-kit h2,body.misafe-kit h3,body.misafe-kit h4,body.misafe-kit h5{font-family:var(--font);color:var(--ink);margin:0} body.misafe-kit h1{font-size:clamp(38px,5vw,64px);font-weight:800;line-height:1.04;letter-spacing:-.032em} body.misafe-kit h2{font-size:clamp(30px,3.4vw,46px);font-weight:800;line-height:1.08;letter-spacing:-.026em} body.misafe-kit h3{font-size:19px;font-weight:750;line-height:1.3;letter-spacing:-.012em} body.misafe-kit h4{font-size:16px;font-weight:700;line-height:1.35} body.misafe-kit p{margin:0 0 16px} body.misafe-kit p:last-child{margin-bottom:0} body.misafe-kit .mono{font-family:var(--mono);font-size:.86em} body.misafe-kit .mono,body.misafe-kit .ref,body.misafe-kit .obl-ref,body.misafe-kit .tag.mono,body.misafe-kit .doc-table .id,body.misafe-kit .vg-row .id,body.misafe-kit .dlv-t small,body.misafe-kit .doccard .band,body.misafe-kit .lx-code,body.misafe-kit .aw-tbl td.id{font-variant-numeric:tabular-nums;letter-spacing:0} body.misafe-kit .ref,body.misafe-kit .obl-ref{font-weight:600} body.misafe-kit .wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--gut)} body.misafe-kit .sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap} body.misafe-kit :focus-visible{outline:3px solid rgba(247,148,30,.6);outline-offset:3px;border-radius:10px} body.misafe-kit .ic{width:20px;height:20px;flex:none} /* ---------- sections ---------- */ body.misafe-kit .sec{padding:clamp(72px,9vw,118px) 0} body.misafe-kit .sec.tight{padding:clamp(52px,6vw,80px) 0} body.misafe-kit .sec.top0{padding-top:0} body.misafe-kit .bg-soft{background:var(--soft)} body.misafe-kit .bg-white{background:#FFFFFF} body.misafe-kit .rounded-band{margin:0 12px;border-radius:var(--r-xl)} body.misafe-kit .dark{background:var(--dark-bg);color:rgba(255,255,255,.78);position:relative;overflow:hidden} body.misafe-kit .dark h1,body.misafe-kit .dark h2,body.misafe-kit .dark h3,body.misafe-kit .dark h4,body.misafe-kit .dark h5{color:#FFFFFF} body.misafe-kit .dark::before{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(255,255,255,.085) 1px,transparent 1.3px);background-size:22px 22px;-webkit-mask-image:linear-gradient(180deg,#000 0%,rgba(0,0,0,0) 80%);mask-image:linear-gradient(180deg,#000 0%,rgba(0,0,0,0) 80%);pointer-events:none} body.misafe-kit .dark>*{position:relative} body.misafe-kit .sec-head{display:flex;justify-content:space-between;align-items:flex-end;gap:28px;margin-bottom:clamp(34px,4vw,52px);flex-wrap:wrap} body.misafe-kit .sec-head.center{flex-direction:column;align-items:center;text-align:center} body.misafe-kit .sec-head .lead{max-width:760px} body.misafe-kit .sec-head.center .lead{margin:0 auto} body.misafe-kit .lead p,body.misafe-kit .lead-p{font-size:18.5px;line-height:1.6;color:var(--muted);max-width:700px;margin-top:16px} body.misafe-kit .sec-head.center .lead p{margin-left:auto;margin-right:auto} body.misafe-kit .dark .lead p,body.misafe-kit .dark .lead-p{color:rgba(255,255,255,.72)} body.misafe-kit .eyebrow{display:inline-flex;width:fit-content;max-width:100%;align-items:center;gap:8px;padding:6px 13px 6px 11px;border-radius:var(--pill);background:var(--tint);color:var(--charcoal);font-size:12.5px;font-weight:750;letter-spacing:.02em;margin-bottom:18px;line-height:1.3} body.misafe-kit .eyebrow::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--orange);flex:none} body.misafe-kit .dark .eyebrow{background:rgba(255,255,255,.1);color:#FFFFFF} body.misafe-kit .h2-gap{margin-bottom:16px} body.misafe-kit .muted{color:var(--muted)} body.misafe-kit .dark .soft{color:rgba(255,255,255,.7)} /* ---------- buttons ---------- */ body.misafe-kit .btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:50px;padding:0 24px;border-radius:var(--pill);font:750 15px/1.15 var(--font);letter-spacing:-.005em;text-decoration:none;border:1.5px solid transparent;cursor:pointer;white-space:nowrap;transition:transform .2s var(--ease),box-shadow .2s var(--ease),background .2s,color .2s,border-color .2s;text-align:center} body.misafe-kit .btn svg{width:17px;height:17px;flex:none;transition:transform .2s var(--ease)} body.misafe-kit .btn:hover svg.ar{transform:translateX(3px)} body.misafe-kit .btn-primary{background:var(--orange);color:var(--ink);box-shadow:0 10px 22px -12px rgba(247,148,30,.9)} body.misafe-kit .btn-primary:hover{transform:translateY(-2px);box-shadow:0 16px 28px -12px rgba(247,148,30,.95)} body.misafe-kit .btn-dark{background:var(--charcoal);color:#FFFFFF;box-shadow:0 10px 22px -14px rgba(31,40,46,.8)} body.misafe-kit .btn-dark:hover{background:var(--ch-800);transform:translateY(-2px)} body.misafe-kit .btn-ghost{background:#FFFFFF;color:var(--ink);border-color:var(--line-2)} body.misafe-kit .btn-ghost:hover{border-color:var(--charcoal);transform:translateY(-2px);box-shadow:var(--sh-sm)} body.misafe-kit .dark .btn-ghost{background:rgba(255,255,255,.08);color:#FFFFFF;border-color:rgba(255,255,255,.26)} body.misafe-kit .dark .btn-ghost:hover{background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.5)} body.misafe-kit .btn-sm{min-height:40px;padding:0 17px;font-size:14px} body.misafe-kit .btn-row{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px} body.misafe-kit .txt-link{font-weight:750;color:var(--ink);text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1.5px;text-decoration-color:var(--line-2);transition:text-decoration-color .2s} body.misafe-kit .txt-link:hover{text-decoration-color:var(--charcoal)} body.misafe-kit .dark .txt-link{color:#FFFFFF;text-decoration-color:rgba(255,255,255,.35)} body.misafe-kit .arrow-link{display:inline-flex;align-items:center;gap:8px;font-weight:750;color:var(--ink);text-decoration:none;font-size:15px} body.misafe-kit .arrow-link svg{width:16px;height:16px;transition:transform .2s var(--ease)} body.misafe-kit .arrow-link:hover svg{transform:translateX(4px)} body.misafe-kit .dark .arrow-link{color:#FFFFFF} /* ---------- utility bar + header ---------- */ body.misafe-kit .utility{background:var(--soft);font-size:13px;color:var(--muted)} body.misafe-kit .utility .wrap{display:flex;justify-content:space-between;align-items:center;gap:16px;min-height:38px} body.misafe-kit .u-left,body.misafe-kit .u-right{display:flex;align-items:center;gap:20px;flex-wrap:wrap} body.misafe-kit .copy-inline{display:inline-flex;align-items:center;gap:7px;color:inherit;font-size:13px;font-weight:600} body.misafe-kit .copy-inline svg{width:14px;height:14px;opacity:.8} body.misafe-kit .copy-inline:hover span{text-decoration:underline;text-underline-offset:3px} body.misafe-kit .utility a{color:var(--ink);text-decoration:none;font-weight:700} body.misafe-kit .utility a:hover{text-decoration:underline;text-underline-offset:3px} body.misafe-kit #shell-top{display:contents} /* mockup wrapper: lets the header stick to the page, not to the wrapper */ body.misafe-kit .site-header{position:sticky;top:0;z-index:60;background:rgba(255,255,255,.86);-webkit-backdrop-filter:saturate(1.6) blur(14px);backdrop-filter:saturate(1.6) blur(14px);border-bottom:1px solid transparent;transition:border-color .2s,box-shadow .2s} body.misafe-kit .site-header.scrolled{border-bottom-color:var(--line);box-shadow:0 8px 24px -18px rgba(31,40,46,.35)} body.misafe-kit .site-header .wrap{display:flex;align-items:center;gap:18px;min-height:78px} body.misafe-kit .logo-link{display:block;flex:none;border-radius:8px} body.misafe-kit .logo-link img{width:150px;height:auto} body.misafe-kit .nav{display:flex;align-items:center;gap:2px;margin-left:auto;position:relative} body.misafe-kit .nav-item{position:relative;display:flex;align-items:center} body.misafe-kit .nav-link{display:flex;align-items:center;gap:6px;padding:9px 14px;font-size:15px;font-weight:650;color:var(--ink);text-decoration:none;border-radius:var(--pill);white-space:nowrap;transition:background .15s,color .15s} body.misafe-kit .nav-link .chev{width:10px;height:10px;opacity:.7;transition:transform .2s} body.misafe-kit .nav-item:hover>.nav-link,body.misafe-kit .nav-item:focus-within>.nav-link{background:var(--tint)} body.misafe-kit .nav-item:hover>.nav-link .chev,body.misafe-kit .nav-item:focus-within>.nav-link .chev{transform:rotate(180deg)} body.misafe-kit .nav-link.active,body.misafe-kit .nav-item:hover>.nav-link.active,body.misafe-kit .nav-item:focus-within>.nav-link.active{background:var(--charcoal);color:#FFFFFF} /* the page you are on, inside its menu */ body.misafe-kit .drop a[aria-current="page"]{background:var(--soft)} body.misafe-kit .drop a[aria-current="page"] .mi{background:var(--charcoal);color:var(--orange)} body.misafe-kit .drop{position:absolute;top:calc(100% + 12px);left:0;min-width:330px;background:#FFFFFF;border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--sh-lg);padding:10px;opacity:0;visibility:hidden;transform:translateY(6px);transition:opacity .18s,transform .18s var(--ease),visibility .18s;z-index:70} body.misafe-kit .drop::before{content:"";position:absolute;left:0;right:0;top:-14px;height:14px} body.misafe-kit .nav-item:hover>.drop,body.misafe-kit .nav-item:focus-within>.drop{opacity:1;visibility:visible;transform:none} body.misafe-kit .drop a{display:grid;grid-template-columns:36px 1fr;gap:12px;align-items:center;padding:9px 10px;text-decoration:none;border-radius:14px;color:var(--text);transition:background .15s} body.misafe-kit .drop a b{display:block;color:var(--ink);font-size:14.5px;font-weight:700;line-height:1.3} body.misafe-kit .drop a small{display:block;color:var(--muted);font-size:12.5px;line-height:1.35;margin-top:2px} body.misafe-kit .drop a .mi{width:36px;height:36px;border-radius:11px;background:var(--tint);color:var(--charcoal);display:flex;align-items:center;justify-content:center;transition:background .15s,color .15s} body.misafe-kit .drop a .mi svg{width:18px;height:18px} body.misafe-kit .drop a:hover{background:var(--soft)} body.misafe-kit .drop a:hover .mi{background:var(--charcoal);color:var(--orange)} body.misafe-kit .drop .drop-head{font-size:11.5px;font-weight:750;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);padding:8px 10px 6px} body.misafe-kit .drop .drop-all{display:flex;justify-content:space-between;align-items:center;margin-top:6px;padding:12px 14px;background:var(--soft);border-radius:14px;font-weight:700;color:var(--ink);font-size:14px} body.misafe-kit .drop .drop-all svg{width:15px;height:15px} body.misafe-kit .drop.right{left:auto;right:0} body.misafe-kit .nav-item.static{position:static} body.misafe-kit .mega{left:50%;right:auto;width:min(1040px,calc(100vw - 48px));transform:translate(-50%,6px);display:grid;grid-template-columns:repeat(4,1fr);gap:4px;padding:14px} body.misafe-kit .nav-item:hover>.mega,body.misafe-kit .nav-item:focus-within>.mega{transform:translate(-50%,0)} body.misafe-kit .mega a{grid-template-columns:32px 1fr;padding:8px 9px} body.misafe-kit .mega a .mi{width:32px;height:32px;border-radius:10px} body.misafe-kit .mega a b{font-size:13.5px} body.misafe-kit .mega .mfoot{grid-column:1/-1;display:flex;justify-content:space-between;align-items:center;gap:16px;margin-top:8px;padding:14px 16px;background:var(--soft);border-radius:16px;font-size:14px} body.misafe-kit .mega .mfoot .mf-links{display:flex;gap:18px;flex-wrap:wrap} body.misafe-kit .header-cta{flex:none} body.misafe-kit .burger{display:none;width:46px;height:46px;border-radius:50%;background:var(--tint);align-items:center;justify-content:center;margin-left:auto;color:var(--ink)} body.misafe-kit .burger svg{width:22px;height:22px} body.misafe-kit .mnav{display:none} /* LP minimal header */ body.misafe-kit .lp-header{background:#FFFFFF;border-bottom:1px solid var(--line)} body.misafe-kit .lp-header .wrap{display:flex;justify-content:space-between;align-items:center;min-height:76px;gap:16px} body.misafe-kit .lp-header img{width:150px} body.misafe-kit .lp-header .copy-inline{color:var(--ink);font-weight:700;font-size:15px} /* ---------- hero ---------- */ body.misafe-kit .hero{margin:12px 12px 0;border-radius:var(--r-xl);padding:clamp(56px,7vw,100px) 0 clamp(56px,7vw,96px)} body.misafe-kit .hero.dark .sub{color:rgba(255,255,255,.78)} body.misafe-kit .hero.light{background:radial-gradient(800px 420px at 92% 0%,#FFFFFF,rgba(255,255,255,0) 62%),linear-gradient(180deg,#EDF0F2 0%,#F6F8F9 100%);position:relative;overflow:hidden} body.misafe-kit .hero.light::before{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(66,81,90,.09) 1px,transparent 1.3px);background-size:22px 22px;-webkit-mask-image:linear-gradient(180deg,#000,rgba(0,0,0,0) 85%);mask-image:linear-gradient(180deg,#000,rgba(0,0,0,0) 85%);pointer-events:none} body.misafe-kit .hero.light>*{position:relative} body.misafe-kit .hero-grid{display:grid;grid-template-columns:1.02fr 1fr;gap:clamp(36px,5vw,72px);align-items:center} body.misafe-kit .hero .sub{font-size:19px;line-height:1.6;max-width:600px;margin-top:22px;color:var(--muted)} body.misafe-kit .hero .note{margin-top:26px;display:flex;flex-wrap:wrap;gap:10px 22px;font-size:14px;font-weight:600} body.misafe-kit .hero .note span{display:inline-flex;align-items:center;gap:8px} body.misafe-kit .hero .note svg{width:18px;height:18px;padding:3px;border-radius:50%;background:rgba(255,255,255,.12);color:#FFFFFF} body.misafe-kit .hero.light .note svg{background:var(--tint);color:var(--charcoal)} body.misafe-kit .hero .trust{margin-top:clamp(44px,6vw,72px);padding-top:26px;border-top:1px solid rgba(255,255,255,.12);display:flex;align-items:center;gap:18px 36px;flex-wrap:wrap} body.misafe-kit .hero .trust small{font-size:12.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.55)} body.misafe-kit .crumbs{font-size:13.5px;margin-bottom:22px;display:flex;flex-wrap:wrap;gap:8px;align-items:center;font-weight:600;color:var(--muted)} body.misafe-kit .crumbs a{text-decoration:none;color:var(--ink)} body.misafe-kit .crumbs a:hover{text-decoration:underline;text-underline-offset:3px} body.misafe-kit .crumbs .sep{opacity:.45} body.misafe-kit .dark .crumbs{color:rgba(255,255,255,.6)} body.misafe-kit .dark .crumbs a{color:#FFFFFF} /* collage */ body.misafe-kit .collage{position:relative;min-height:500px} body.misafe-kit .collage .aw-wrap{position:absolute;right:0;top:34px;width:calc(100% - 120px);z-index:1} body.misafe-kit .collage .phone{position:absolute;left:-60px;bottom:0;z-index:2;transform:scale(.78);transform-origin:bottom left} body.misafe-kit .fchip{position:absolute;z-index:3;display:flex;align-items:center;gap:10px;background:#FFFFFF;border-radius:14px;padding:10px 14px 10px 10px;box-shadow:var(--sh-lg);font-size:13px;color:var(--ink);font-weight:700;line-height:1.3;max-width:250px;border:1px solid var(--line);white-space:nowrap} body.misafe-kit .fchip small{display:block;font-weight:600;color:var(--muted);font-size:11.5px} body.misafe-kit .fchip .disc{width:32px;height:32px;border-radius:10px} body.misafe-kit .fchip .disc svg{width:16px;height:16px} body.misafe-kit .aw-wrap .fchip.c1{top:-24px;left:-20px} body.misafe-kit .aw-wrap .fchip.c2{bottom:-28px;right:-16px} @media (prefers-reduced-motion:no-preference){ body.misafe-kit .float-a{animation:floaty 7s ease-in-out infinite} body.misafe-kit .float-b{animation:floaty 8.5s ease-in-out -2s infinite} @keyframes floaty{0%,100%{translate:0 0}50%{translate:0 -8px}} } /* video slot */ body.misafe-kit .video-slot{position:relative;width:100%;aspect-ratio:16/10;background:linear-gradient(150deg,#55656F,#2B353B);border-radius:var(--r-lg);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;color:#FFFFFF;text-align:center;padding:24px;box-shadow:var(--sh-lg);overflow:hidden} body.misafe-kit .video-slot .play{width:78px;height:78px;border-radius:50%;background:#FFFFFF;color:var(--ink);display:flex;align-items:center;justify-content:center;transition:transform .2s var(--ease);box-shadow:0 0 0 12px rgba(255,255,255,.12)} body.misafe-kit .video-slot .play svg{width:26px;height:26px;margin-left:4px} body.misafe-kit .video-slot:hover .play{transform:scale(1.07)} body.misafe-kit .video-slot .vs-cap{font-size:14.5px;color:rgba(255,255,255,.72);max-width:340px} /* photo slot */ body.misafe-kit .photo{position:relative;width:100%;aspect-ratio:4/3;border-radius:var(--r-lg);background:radial-gradient(circle at 28% 22%,#FFFFFF 0,rgba(255,255,255,0) 52%),linear-gradient(140deg,#E3E8EB 0%,#F4F6F7 100%);display:flex;align-items:center;justify-content:center;overflow:hidden;border:1px solid var(--line)} body.misafe-kit .photo.wide{aspect-ratio:16/10} body.misafe-kit .photo.short{aspect-ratio:16/7} body.misafe-kit .photo.sq{aspect-ratio:1/1} body.misafe-kit .photo .ph-ic{width:58px;height:58px;border-radius:18px;background:#FFFFFF;color:var(--faint);display:flex;align-items:center;justify-content:center;box-shadow:var(--sh-sm)} body.misafe-kit .photo .ph-ic svg{width:26px;height:26px} body.misafe-kit .photo .cap{position:absolute;left:12px;right:12px;bottom:12px;background:rgba(255,255,255,.92);border-radius:12px;padding:8px 12px;font-size:12.5px;line-height:1.4;color:var(--muted)} body.misafe-kit .photo .cap b{color:var(--ink);font-weight:750} body.misafe-kit .dark .photo{border-color:rgba(255,255,255,.12)} /* ---------- grids + cards ---------- */ body.misafe-kit .g2{display:grid;grid-template-columns:repeat(2,1fr);gap:20px} body.misafe-kit .g3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px} body.misafe-kit .g4{display:grid;grid-template-columns:repeat(4,1fr);gap:20px} body.misafe-kit .split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(36px,5vw,76px);align-items:start} body.misafe-kit .split.wide-left{grid-template-columns:1.2fr 1fr} body.misafe-kit .split.r125{grid-template-columns:1fr 1.25fr} body.misafe-kit .split.mid{align-items:center} body.misafe-kit .card{background:#FFFFFF;border:1px solid var(--line);border-radius:var(--r);padding:26px;color:var(--text);display:flex;flex-direction:column;gap:12px;text-decoration:none;box-shadow:var(--sh-xs);transition:transform .25s var(--ease),box-shadow .25s var(--ease),border-color .25s} body.misafe-kit a.card:hover,body.misafe-kit button.card:hover{transform:translateY(-4px);box-shadow:var(--sh);border-color:var(--line-2)} body.misafe-kit .card h3{color:var(--ink)} body.misafe-kit .card p{font-size:15.5px} body.misafe-kit .card .more{margin-top:auto;padding-top:8px;font-weight:750;font-size:14.5px;color:var(--ink);display:inline-flex;gap:8px;align-items:center} body.misafe-kit .card .more svg{width:16px;height:16px;transition:transform .2s var(--ease)} body.misafe-kit a.card:hover .more svg{transform:translateX(4px)} body.misafe-kit .card .num{font-size:12.5px;font-weight:750;color:var(--muted);letter-spacing:.04em} body.misafe-kit .card-dark{background:var(--dark-bg);border-color:transparent;color:rgba(255,255,255,.76);position:relative;overflow:hidden} body.misafe-kit .card-dark h3,body.misafe-kit .card-dark .more{color:#FFFFFF} body.misafe-kit .card-dark .soft{color:rgba(255,255,255,.72)} body.misafe-kit .dark .card{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.12);color:rgba(255,255,255,.76);box-shadow:none} body.misafe-kit .dark .card h3,body.misafe-kit .dark .card .more{color:#FFFFFF} body.misafe-kit .dark a.card:hover{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.22)} body.misafe-kit .disc{width:48px;height:48px;border-radius:15px;background:var(--charcoal);color:var(--orange);display:inline-flex;align-items:center;justify-content:center;flex:none;box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 6px 14px -8px rgba(31,40,46,.6)} body.misafe-kit .disc svg{width:24px;height:24px} body.misafe-kit .disc.sm{width:38px;height:38px;border-radius:12px} body.misafe-kit .disc.sm svg{width:19px;height:19px} body.misafe-kit .disc.lt{background:var(--tint);color:var(--charcoal);box-shadow:none} body.misafe-kit .disc.bad{background:var(--bad-bg);color:var(--bad);box-shadow:none} body.misafe-kit .disc.okc{background:var(--ok-bg);color:var(--ok);box-shadow:none} body.misafe-kit .dark .disc,body.misafe-kit .card-dark .disc{background:rgba(255,255,255,.1);color:var(--orange);box-shadow:inset 0 1px 0 rgba(255,255,255,.1)} body.misafe-kit .card-head{display:flex;align-items:center;gap:14px} body.misafe-kit .feat{background:var(--soft);border-radius:var(--r);padding:26px;display:flex;flex-direction:column;gap:12px} body.misafe-kit .bg-soft .feat{background:#FFFFFF;border:1px solid var(--line)} body.misafe-kit .feat h3{font-size:18px} body.misafe-kit .feat p{font-size:15.5px} body.misafe-kit .dark .feat{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1)} body.misafe-kit .dark .feat p{color:rgba(255,255,255,.72)} /* steps */ body.misafe-kit .steps{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;counter-reset:st} body.misafe-kit .step{position:relative;background:#FFFFFF;border:1px solid var(--line);border-radius:var(--r);padding:24px;box-shadow:var(--sh-xs)} body.misafe-kit .step .n{width:38px;height:38px;border-radius:50%;background:var(--charcoal);color:#FFFFFF;font-weight:800;font-size:14.5px;display:flex;align-items:center;justify-content:center;margin-bottom:16px} body.misafe-kit .step:not(:last-child)::after{content:"";position:absolute;top:42px;right:-19px;width:20px;height:2px;background:var(--line-2);border-radius:2px} body.misafe-kit .step h3{font-size:18px;margin-bottom:8px} body.misafe-kit .step p{font-size:15px} body.misafe-kit .bg-soft .step{background:#FFFFFF} /* ticks */ body.misafe-kit .ticks{list-style:none;margin:0;padding:0;display:grid;gap:13px} body.misafe-kit .ticks li{position:relative;padding-left:36px;font-size:16px;line-height:1.5;color:var(--ink)} body.misafe-kit .ticks li::before{content:"";position:absolute;left:0;top:-1px;width:24px;height:24px;border-radius:50%;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2342515A' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6.5 12.5l3.8 3.8 7.2-8'/%3E%3C/svg%3E") center/13px no-repeat,var(--tint)} body.misafe-kit .dark .ticks li,body.misafe-kit .card-dark .ticks li{color:rgba(255,255,255,.88)} body.misafe-kit .dark .ticks li::before,body.misafe-kit .card-dark .ticks li::before{background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFFFFF' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6.5 12.5l3.8 3.8 7.2-8'/%3E%3C/svg%3E") center/13px no-repeat,rgba(255,255,255,.14)} body.misafe-kit .ticks.sm li{font-size:15px;padding-left:32px} body.misafe-kit .ticks.sm li::before{width:21px;height:21px;background-size:11px} /* tags */ body.misafe-kit .tags{display:flex;flex-wrap:wrap;gap:8px} body.misafe-kit .tag{display:inline-flex;align-items:center;gap:7px;padding:8px 14px;font-size:14px;font-weight:650;border:1px solid var(--line);border-radius:var(--pill);background:#FFFFFF;color:var(--ink);text-decoration:none;line-height:1.25;transition:background .15s,border-color .15s,transform .15s} body.misafe-kit .tag svg{width:15px;height:15px} body.misafe-kit a.tag:hover{background:var(--soft);border-color:var(--line-2);transform:translateY(-1px)} body.misafe-kit .tag.mono{font-family:var(--mono);font-size:12.5px;font-weight:500} body.misafe-kit .tag.current{background:var(--charcoal);border-color:var(--charcoal);color:#FFFFFF} body.misafe-kit .tag.soft{background:var(--tint);border-color:var(--tint)} body.misafe-kit .dark .tag{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.14);color:#FFFFFF} body.misafe-kit .dark a.tag:hover{background:rgba(255,255,255,.14)} body.misafe-kit .dark .tag.current{background:#FFFFFF;color:var(--ink);border-color:#FFFFFF} /* status pills */ body.misafe-kit .pill{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:var(--pill);font-size:11.5px;font-weight:750;white-space:nowrap;line-height:1.4} body.misafe-kit .pill::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;flex:none} body.misafe-kit .pill.ok{color:var(--ok);background:var(--ok-bg)} body.misafe-kit .pill.warn{color:var(--warn);background:var(--warn-bg)} body.misafe-kit .pill.warn::before{background:var(--orange)} body.misafe-kit .pill.bad{color:var(--bad);background:var(--bad-bg)} body.misafe-kit .pill.high{color:var(--high);background:var(--high-bg)} body.misafe-kit .pill.neu{color:var(--muted);background:var(--tint)} /* tables */ body.misafe-kit .tbl-wrap{border:1px solid var(--line);border-radius:var(--r);overflow:auto;background:#FFFFFF;box-shadow:var(--sh-xs);-webkit-overflow-scrolling:touch} body.misafe-kit .doc-table{width:100%;border-collapse:collapse;font-size:15px} body.misafe-kit .doc-table th{background:var(--charcoal);color:#FFFFFF;text-align:left;font-weight:700;font-size:12px;letter-spacing:.06em;text-transform:uppercase;padding:14px 18px;white-space:nowrap} body.misafe-kit .doc-table td{padding:14px 18px;border-top:1px solid var(--line);vertical-align:top;color:var(--ink)} body.misafe-kit .doc-table tbody tr:nth-child(even) td{background:var(--soft)} body.misafe-kit .doc-table .id{font-family:var(--mono);font-size:13px;white-space:nowrap;color:var(--ink)} body.misafe-kit .doc-table .wrap-id{white-space:normal} body.misafe-kit .ref{font-family:var(--mono);font-size:12.5px;color:var(--charcoal);background:var(--tint);padding:5px 11px;border-radius:var(--pill);line-height:1.35;text-align:right} /* compliance rows */ body.misafe-kit .comply{display:grid;gap:10px} body.misafe-kit .comply-row{display:flex;justify-content:space-between;align-items:center;gap:16px;background:#FFFFFF;border:1px solid var(--line);border-radius:16px;padding:13px 14px 13px 18px;color:var(--ink);font-size:15px;font-weight:600;line-height:1.4} body.misafe-kit .comply-row .ref{flex:none;max-width:48%} /* industry legislation, in plain words (Micah, 19/10/2026) */ body.misafe-kit .obl-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px} body.misafe-kit .obl{background:#FFFFFF;border:1px solid var(--line);border-radius:var(--r-lg);padding:22px 24px;display:flex;flex-direction:column;gap:10px;box-shadow:var(--sh-xs)} body.misafe-kit .obl-ref{align-self:flex-start;display:inline-flex;align-items:center;gap:7px;font-family:var(--mono);font-size:12px;line-height:1.35;color:var(--charcoal);background:var(--soft);border:1px solid var(--line);border-radius:10px;padding:5px 10px} body.misafe-kit .obl-ref svg{width:14px;height:14px;flex:none;color:var(--muted)} body.misafe-kit .obl h3{font-size:18px;line-height:1.35;letter-spacing:-.01em} body.misafe-kit .obl-how{display:flex;gap:10px;align-items:flex-start;margin:0;font-size:15px;line-height:1.55;color:var(--text)} body.misafe-kit .obl-how svg{width:18px;height:18px;flex:none;margin-top:2px;color:var(--ok)} body.misafe-kit .obl-how b{color:var(--ink)} @media (max-width:880px){ body.misafe-kit .obl-grid{grid-template-columns:1fr} } /* consulting on industry pages */ body.misafe-kit .cons2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px} body.misafe-kit .cons-card{display:flex;flex-direction:column;gap:16px;background:#FFFFFF;border:1px solid var(--line);border-radius:var(--r-lg);padding:32px;box-shadow:var(--sh-xs)} body.misafe-kit .cons-card.dark{background:var(--dark-bg);border-color:transparent;color:rgba(255,255,255,.78)} body.misafe-kit .cons-card.dark h3{color:#FFFFFF} body.misafe-kit .cons-card.dark .tagline{color:rgba(255,255,255,.6)} body.misafe-kit .cons-card.dark .ticks li{color:rgba(255,255,255,.92)} body.misafe-kit .cons-top{display:flex;gap:14px;align-items:center} body.misafe-kit .cons-top .tagline{display:block;font-size:12.5px;font-weight:750;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)} body.misafe-kit .cons-top h3{font-size:24px;letter-spacing:-.02em;margin-top:2px} body.misafe-kit .cons-card p{margin:0;font-size:16px;line-height:1.55} body.misafe-kit .cons-svcs{display:flex;flex-direction:column;gap:10px} body.misafe-kit .cons-svc{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:14px;align-items:center;padding:14px 16px;border:1px solid var(--line);border-radius:16px;background:var(--soft);color:var(--ink);text-decoration:none;transition:border-color .15s,background .15s,transform .2s var(--ease)} body.misafe-kit .cons-svc:hover{background:#FFFFFF;border-color:var(--charcoal);transform:translateX(3px)} body.misafe-kit .cons-svc b{display:block;font-size:15.5px;line-height:1.3} body.misafe-kit .cons-svc small{display:block;font-size:13.5px;line-height:1.45;color:var(--muted);margin-top:2px} body.misafe-kit .cons-svc>svg{width:16px;height:16px;color:var(--muted)} body.misafe-kit .cons-card .btn-row{margin-top:auto;padding-top:6px} @media (max-width:880px){ body.misafe-kit .cons2{grid-template-columns:1fr} body.misafe-kit .cons-card{padding:24px} } body.misafe-kit .comply-lead{font-size:16px;color:var(--muted);margin:-4px 0 18px;max-width:620px} body.misafe-kit .comply-row{align-items:flex-start} body.misafe-kit .cr-t{display:flex;flex-direction:column;gap:6px;min-width:0} body.misafe-kit .cr-t b{font-weight:700;color:var(--ink);font-size:15.5px;line-height:1.4} body.misafe-kit .cr-how{display:flex;gap:8px;align-items:flex-start;font-size:14.5px;line-height:1.5;color:var(--text)} body.misafe-kit .cr-how svg{width:16px;height:16px;flex:none;margin-top:3px;color:var(--ok)} body.misafe-kit .comply-row .ref{margin-top:1px} /* ratings */ body.misafe-kit .rating-key{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px} body.misafe-kit .rating-strip{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:18px} body.misafe-kit .rating{background:#FFFFFF;border:1px solid var(--line);border-radius:16px;padding:14px;display:flex;flex-direction:column;gap:8px;align-items:flex-start} body.misafe-kit .rating b{font-size:24px;color:var(--ink);font-weight:800;line-height:1} body.misafe-kit .rating small{font-size:12.5px;color:var(--muted)} /* bento */ body.misafe-kit .bento{display:grid;grid-template-columns:repeat(12,1fr);gap:20px} body.misafe-kit .bt{grid-column:span 4;background:var(--soft);border:1px solid transparent;border-radius:var(--r-lg);padding:28px;display:flex;flex-direction:column;gap:12px;text-decoration:none;color:var(--text);overflow:hidden;position:relative;transition:transform .25s var(--ease),box-shadow .25s var(--ease),background .25s,border-color .25s;min-height:300px} body.misafe-kit .bt.w5{grid-column:span 5} body.misafe-kit .bt.w6{grid-column:span 6} body.misafe-kit .bt.w7{grid-column:span 7} body.misafe-kit .bt.w8{grid-column:span 8} body.misafe-kit .bt:hover{transform:translateY(-4px);background:#FFFFFF;border-color:var(--line);box-shadow:var(--sh)} body.misafe-kit .bt h3{font-size:21px} body.misafe-kit .bt p{font-size:15.5px;max-width:460px} body.misafe-kit .bt .bt-vis{margin-top:auto;padding-top:14px;display:flex;justify-content:flex-end} body.misafe-kit .bt .bt-vis .vg{box-shadow:var(--sh);width:100%;max-width:420px;transform:translateY(18px);transition:transform .3s var(--ease)} body.misafe-kit .bt:hover .bt-vis .vg{transform:translateY(8px)} body.misafe-kit .bt .more{font-weight:750;font-size:14.5px;color:var(--ink);display:inline-flex;gap:8px;align-items:center} body.misafe-kit .bt .more svg{width:16px;height:16px;transition:transform .2s} body.misafe-kit .bt:hover .more svg{transform:translateX(4px)} /* capability columns */ body.misafe-kit .capcols{display:grid;grid-template-columns:repeat(4,1fr);gap:20px} body.misafe-kit .capcol{background:#FFFFFF;border:1px solid var(--line);border-radius:var(--r);padding:22px 16px 14px;box-shadow:var(--sh-xs)} body.misafe-kit .capcol .ch{display:flex;align-items:center;gap:12px;padding:0 8px 12px;margin-bottom:6px;border-bottom:1px solid var(--line)} body.misafe-kit .capcol .ch h4{font-size:15.5px} body.misafe-kit .capcol a{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:9px 10px;border-radius:12px;text-decoration:none;color:var(--ink);font-size:14.5px;font-weight:600;transition:background .15s} body.misafe-kit .capcol a svg{width:15px;height:15px;color:var(--faint);transition:transform .2s,color .2s;flex:none} body.misafe-kit .capcol a:hover{background:var(--soft)} body.misafe-kit .capcol a:hover svg{transform:translateX(3px);color:var(--charcoal)} body.misafe-kit .capcol a.current{background:var(--tint)} /* industry tabs */ body.misafe-kit .itabs{display:inline-flex;flex-wrap:wrap;gap:4px;background:var(--tint);padding:6px;border-radius:var(--pill);margin:0 auto} body.misafe-kit .itab{padding:10px 18px;border-radius:var(--pill);font-weight:750;font-size:14.5px;color:var(--muted);display:inline-flex;gap:8px;align-items:center;transition:background .2s,color .2s,box-shadow .2s} body.misafe-kit .itab svg{width:18px;height:18px} body.misafe-kit .itab:hover{color:var(--ink)} body.misafe-kit .itab.on{background:#FFFFFF;color:var(--ink);box-shadow:var(--sh-sm)} body.misafe-kit .ipanels{margin-top:28px} body.misafe-kit .ipanel{display:none;grid-template-columns:1fr 1fr;gap:clamp(28px,4vw,56px);align-items:center;background:#FFFFFF;border:1px solid var(--line);border-radius:var(--r-lg);padding:clamp(24px,4vw,44px);box-shadow:var(--sh)} body.misafe-kit .ipanel.on{display:grid;animation:fadeup .35s var(--ease)} @keyframes fadeup{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}} body.misafe-kit .ipanel h3{font-size:clamp(24px,2.4vw,30px);letter-spacing:-.02em;line-height:1.15} body.misafe-kit .ipanel .ilist{display:grid;gap:12px;margin-top:22px} body.misafe-kit .ipanel .ilist a{display:grid;grid-template-columns:38px 1fr;gap:12px;align-items:start;text-decoration:none;color:var(--text);padding:10px;border-radius:16px;transition:background .15s} body.misafe-kit .ipanel .ilist a:hover{background:var(--soft)} body.misafe-kit .ipanel .ilist b{display:block;color:var(--ink);font-size:15px} body.misafe-kit .ipanel .ilist span{font-size:14.5px;line-height:1.45} /* ways to work */ body.misafe-kit .way{display:flex;flex-direction:column;gap:14px;background:#FFFFFF;border:1px solid var(--line);border-radius:var(--r-lg);padding:30px;box-shadow:var(--sh-xs);transition:transform .25s var(--ease),box-shadow .25s} body.misafe-kit .way:hover{transform:translateY(-4px);box-shadow:var(--sh)} body.misafe-kit .way .tagline{font-size:12.5px;font-weight:750;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)} body.misafe-kit .way h3{font-size:24px;letter-spacing:-.02em} body.misafe-kit .way .btn-row{margin-top:auto;padding-top:10px} body.misafe-kit .way.feature{background:var(--dark-bg);border-color:transparent;color:rgba(255,255,255,.76)} body.misafe-kit .way.feature h3{color:#FFFFFF} body.misafe-kit .way.feature .tagline{color:rgba(255,255,255,.55)} body.misafe-kit .way.feature .ticks li{color:rgba(255,255,255,.9)} body.misafe-kit .way.feature .ticks li::before{background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFFFFF' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6.5 12.5l3.8 3.8 7.2-8'/%3E%3C/svg%3E") center/11px no-repeat,rgba(255,255,255,.14)} body.misafe-kit .way.feature .btn-ghost{background:rgba(255,255,255,.08);color:#FFFFFF;border-color:rgba(255,255,255,.26)} /* references cloud */ body.misafe-kit .refcloud{display:flex;flex-wrap:wrap;gap:10px;justify-content:center} body.misafe-kit .refcloud span{display:inline-flex;align-items:center;gap:8px;padding:10px 16px;border-radius:var(--pill);background:#FFFFFF;border:1px solid var(--line);font-size:14px;font-weight:650;color:var(--ink);box-shadow:var(--sh-xs)} body.misafe-kit .refcloud span svg{width:16px;height:16px;color:var(--charcoal)} /* sysmap */ body.misafe-kit .sysmap{width:100%;max-width:620px;margin:0 auto} body.misafe-kit .sysmap .ln{stroke:var(--line-2);stroke-width:1.5;fill:none} body.misafe-kit .sysmap .orbit{stroke:var(--line-2);stroke-width:1.2;stroke-dasharray:2 7;fill:none;stroke-linecap:round} body.misafe-kit .sysmap .node rect{fill:#FFFFFF;stroke:var(--line-2);stroke-width:1.2;filter:drop-shadow(0 6px 10px rgba(31,40,46,.12));transition:stroke .2s} body.misafe-kit .sysmap .node text{font-family:var(--font);font-size:13px;font-weight:700;fill:var(--ink)} body.misafe-kit .sysmap .node{cursor:pointer} body.misafe-kit .sysmap .node:hover rect,body.misafe-kit .sysmap .node:focus rect{stroke:var(--charcoal);stroke-width:2} body.misafe-kit .sysmap .node:focus{outline:none} body.misafe-kit .sysmap .core circle.c1{fill:var(--charcoal)} body.misafe-kit .sysmap .core circle.c2{fill:none;stroke:rgba(66,81,90,.18);stroke-width:10} body.misafe-kit .sysmap .core text{font-family:var(--font);font-weight:800;fill:#FFFFFF} body.misafe-kit .sysmap .core text.csub{font-size:10px;letter-spacing:-.01em;font-weight:650;fill:rgba(255,255,255,.78);max-width:none;margin:0} body.misafe-kit .sysmap .pulse{fill:var(--orange)} @media (prefers-reduced-motion:reduce){ body.misafe-kit .sysmap .pulse{display:none} html{scroll-behavior:auto} } /* clients + testimonials */ body.misafe-kit .logos{display:flex;flex-wrap:wrap;gap:14px 40px;align-items:center} body.misafe-kit .logos span{font-weight:800;font-size:17px;letter-spacing:-.015em;color:var(--muted)} body.misafe-kit .dark .logos span{color:rgba(255,255,255,.58)} body.misafe-kit .quote{background:#FFFFFF;border:1px solid var(--line);border-radius:var(--r-lg);padding:32px;display:flex;flex-direction:column;gap:20px;box-shadow:var(--sh-xs);margin:0} body.misafe-kit .quote .qm{font-size:64px;line-height:.6;font-weight:800;color:var(--line-2);height:28px} body.misafe-kit .quote blockquote{margin:0;font-size:20px;font-weight:650;line-height:1.45;color:var(--ink);letter-spacing:-.01em} body.misafe-kit .quote .who{display:flex;align-items:center;gap:14px;font-size:14px;margin-top:auto} body.misafe-kit .quote .av{width:46px;height:46px;border-radius:50%;background:var(--charcoal);color:#FFFFFF;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:15px;flex:none} body.misafe-kit .quote .who strong{display:block;color:var(--ink)} body.misafe-kit .quote.empty blockquote{font-size:16px;font-weight:500;color:var(--muted)} /* post cards */ body.misafe-kit .post-card{padding:0;overflow:hidden} body.misafe-kit .post-card .photo{border:0;border-radius:0;aspect-ratio:16/9} body.misafe-kit .post-card .body{padding:22px 24px 24px;display:flex;flex-direction:column;gap:10px;flex:1} body.misafe-kit .series{display:flex;gap:10px;flex-wrap:wrap;align-items:center;font-size:12.5px;font-weight:700;color:var(--muted)} body.misafe-kit .series span:first-child{background:var(--tint);color:var(--charcoal);padding:4px 10px;border-radius:var(--pill)} /* pricing */ body.misafe-kit .price-card{gap:16px;padding:32px;border-radius:var(--r-lg)} body.misafe-kit .price-card .tagline{font-size:12.5px;font-weight:750;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)} body.misafe-kit .price-card h3{font-size:26px;letter-spacing:-.02em} body.misafe-kit .price{font-size:20px;font-weight:800;color:var(--ink);line-height:1.2;letter-spacing:-.01em} body.misafe-kit .price small{display:block;font-size:14px;font-weight:600;color:var(--muted);margin-top:4px;letter-spacing:0} body.misafe-kit .price-card .btn{margin-top:auto;align-self:flex-start} body.misafe-kit .price-card.feature{background:var(--dark-bg);border-color:transparent;color:rgba(255,255,255,.76)} body.misafe-kit .price-card.feature h3,body.misafe-kit .price-card.feature .price{color:#FFFFFF} body.misafe-kit .price-card.feature .price small,body.misafe-kit .price-card.feature .tagline{color:rgba(255,255,255,.6)} body.misafe-kit .price-card .divide{height:1px;background:var(--line);margin:4px 0} body.misafe-kit .price-card.feature .divide{background:rgba(255,255,255,.14)} /* faq */ body.misafe-kit .faq{display:grid;gap:10px} body.misafe-kit .faq details{background:#FFFFFF;border:1px solid var(--line);border-radius:18px;transition:box-shadow .2s,border-color .2s} body.misafe-kit .faq details[open]{box-shadow:var(--sh-sm);border-color:var(--line-2)} body.misafe-kit .faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:18px;padding:18px 18px 18px 22px;font-weight:750;font-size:16.5px;color:var(--ink);line-height:1.4} body.misafe-kit .faq summary::-webkit-details-marker{display:none} body.misafe-kit .faq .pm{flex:none;width:32px;height:32px;border-radius:50%;background:var(--tint);color:var(--charcoal);display:flex;align-items:center;justify-content:center;transition:transform .25s var(--ease),background .2s,color .2s} body.misafe-kit .faq .pm svg{width:14px;height:14px} body.misafe-kit .faq details[open] .pm{transform:rotate(45deg);background:var(--charcoal);color:#FFFFFF} body.misafe-kit .faq .ans{padding:0 22px 22px;max-width:820px} body.misafe-kit .faq-group+.faq-group{margin-top:44px} body.misafe-kit .faq-group h3{margin-bottom:14px;display:flex;align-items:center;gap:12px;font-size:22px} /* CTA band */ body.misafe-kit .cta{padding:12px 12px 0} body.misafe-kit .cta-panel{border-radius:var(--r-xl);padding:clamp(40px,6vw,76px) clamp(24px,5vw,72px);display:flex;justify-content:space-between;align-items:center;gap:32px;flex-wrap:wrap} body.misafe-kit .cta-panel h2{max-width:640px;font-size:clamp(28px,3vw,40px)} body.misafe-kit .cta-panel p{color:rgba(255,255,255,.72);margin-top:14px;max-width:600px;font-size:17.5px} body.misafe-kit .cta-panel .btn-row{margin-top:0} /* callout */ body.misafe-kit .callout{display:flex;gap:16px;align-items:flex-start;background:var(--tint);border-radius:var(--r);padding:20px 22px;color:var(--ink);font-size:15.5px;line-height:1.55} body.misafe-kit .callout .disc{width:40px;height:40px;border-radius:13px} body.misafe-kit .callout .disc svg{width:20px;height:20px} body.misafe-kit .callout b{color:var(--ink)} body.misafe-kit .stat-row{display:grid;grid-template-columns:repeat(3,1fr);gap:16px} body.misafe-kit .stat{background:#FFFFFF;border:1px solid var(--line);border-radius:var(--r);padding:22px} body.misafe-kit .stat b{display:block;font-size:30px;font-weight:800;color:var(--ink);letter-spacing:-.02em;line-height:1.1} body.misafe-kit .stat span{font-size:14.5px;color:var(--muted)} /* forms */ body.misafe-kit .form{display:grid;gap:16px} body.misafe-kit .form .row2{display:grid;grid-template-columns:1fr 1fr;gap:16px} body.misafe-kit .field label{display:block;font-weight:700;font-size:14px;color:var(--ink);margin-bottom:7px} body.misafe-kit .field label .req{color:var(--bad)} body.misafe-kit .field input,body.misafe-kit .field select,body.misafe-kit .field textarea{width:100%;min-height:50px;padding:12px 15px;border:1.5px solid var(--line);border-radius:14px;background:var(--soft);font-size:16px;color:var(--ink);transition:border-color .15s,background .15s,box-shadow .15s} body.misafe-kit .field select{appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10' fill='none' stroke='%2342515A' stroke-width='1.6'%3E%3Cpath d='M2 3.5 5 6.5 8 3.5'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 16px center;background-size:12px;padding-right:40px} body.misafe-kit .field textarea{min-height:130px;resize:vertical} body.misafe-kit .field input:focus,body.misafe-kit .field select:focus,body.misafe-kit .field textarea:focus{outline:none;border-color:var(--charcoal);background:#FFFFFF;box-shadow:0 0 0 4px rgba(66,81,90,.12)} body.misafe-kit .field.err input,body.misafe-kit .field.err select,body.misafe-kit .field.err textarea{border-color:var(--bad);background:#FFFFFF} body.misafe-kit .field .msg{display:none;font-size:13px;color:var(--bad);margin-top:6px;font-weight:650} body.misafe-kit .field.err .msg{display:block} body.misafe-kit .check{display:flex;gap:11px;align-items:flex-start;font-size:14px} body.misafe-kit .field label.check{font-weight:500;color:var(--text)} body.misafe-kit .field .check input{width:20px;height:20px;min-height:0;padding:0;margin:2px 0 0;border:0;accent-color:var(--charcoal);flex:none} body.misafe-kit .form-note{font-size:13.5px;color:var(--muted)} body.misafe-kit .form-box{background:#FFFFFF;border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--sh)} body.misafe-kit .form-box .fb-head{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:18px clamp(20px,3vw,32px);border-bottom:1px solid var(--line);font-weight:800;color:var(--ink);font-size:16px} body.misafe-kit .form-box .fb-head span:last-child{font-size:12.5px;font-weight:700;color:var(--muted);background:var(--tint);padding:5px 11px;border-radius:var(--pill);white-space:nowrap;flex:none} body.misafe-kit .form-box .in{padding:clamp(20px,3vw,32px)} body.misafe-kit .success{border-radius:var(--r);background:#FFFFFF;border:1px solid var(--line);padding:26px} body.misafe-kit .success .ok{display:flex;align-items:center;gap:12px;font-weight:800;font-size:21px;color:var(--ink);margin-bottom:10px} body.misafe-kit .success .ok i{width:36px;height:36px;background:var(--ok);border-radius:50%;display:flex;align-items:center;justify-content:center;flex:none;color:#FFFFFF} body.misafe-kit .success .ok i svg{width:17px;height:17px} body.misafe-kit .inline-form{display:flex;gap:10px;flex-wrap:wrap;align-items:flex-start} body.misafe-kit .inline-form .field{flex:1 1 240px} body.misafe-kit .inline-form .btn{margin-top:29px} /* booking */ /* filters */ body.misafe-kit .filters{display:flex;flex-wrap:wrap;gap:8px;align-items:center} body.misafe-kit .fbtn{padding:9px 16px;border:1.5px solid var(--line);border-radius:var(--pill);font-weight:700;font-size:14px;color:var(--ink);background:#FFFFFF;transition:background .15s,border-color .15s} body.misafe-kit .fbtn:hover{border-color:var(--charcoal)} body.misafe-kit .fbtn.on{background:var(--charcoal);color:#FFFFFF;border-color:var(--charcoal)} body.misafe-kit .search{position:relative;flex:1 1 300px;max-width:440px} body.misafe-kit .search input{width:100%;min-height:48px;padding:10px 16px 10px 46px;border:1.5px solid var(--line);border-radius:var(--pill);font-size:16px;background:var(--soft)} body.misafe-kit .search input:focus{outline:none;border-color:var(--charcoal);background:#FFFFFF;box-shadow:0 0 0 4px rgba(66,81,90,.12)} body.misafe-kit .search svg{position:absolute;left:17px;top:50%;transform:translateY(-50%);width:18px;height:18px;color:var(--charcoal)} body.misafe-kit .empty{display:none;padding:28px;border:1px dashed var(--line-2);border-radius:var(--r);text-align:center;margin-top:12px} /* article */ body.misafe-kit .article{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:clamp(32px,5vw,72px);align-items:start} body.misafe-kit .prose{font-size:18px;line-height:1.75;max-width:760px;color:var(--text)} body.misafe-kit .prose h2{font-size:27px;margin:38px 0 12px} body.misafe-kit .prose p{margin-bottom:18px} body.misafe-kit .aside{display:grid;gap:18px;position:sticky;top:110px} body.misafe-kit .meta-line{font-size:14px;color:var(--muted);margin-top:18px;font-weight:600} /* modal */ body.misafe-kit .modal{position:fixed;inset:0;z-index:200;display:none;align-items:center;justify-content:center;padding:16px;background:rgba(31,40,46,.55);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)} body.misafe-kit .modal.open{display:flex} body.misafe-kit .modal .panel{background:#FFFFFF;border-radius:var(--r-lg);width:min(560px,100%);max-height:calc(100vh - 32px);overflow:auto;box-shadow:var(--sh-lg);animation:fadeup .25s var(--ease)} body.misafe-kit .modal .panel.video{width:min(960px,100%);background:var(--ch-900);color:#FFFFFF} body.misafe-kit .modal .mhead{display:flex;justify-content:space-between;align-items:center;padding:16px 16px 16px 26px;border-bottom:1px solid var(--line);font-weight:800;color:var(--ink);font-size:15px} body.misafe-kit .modal .panel.video .mhead{color:#FFFFFF;border-color:rgba(255,255,255,.12)} body.misafe-kit .mclose{width:38px;height:38px;display:flex;align-items:center;justify-content:center;border-radius:50%;background:var(--tint);color:var(--ink);transition:background .15s} body.misafe-kit .mclose:hover{background:var(--line)} body.misafe-kit .mclose svg{width:15px;height:15px} body.misafe-kit .modal .panel.video .mclose{background:rgba(255,255,255,.12);color:#FFFFFF} body.misafe-kit .modal .mbody{padding:24px 26px 28px} body.misafe-kit .modal .vbox{aspect-ratio:16/9;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;text-align:center;padding:24px} body.misafe-kit .modal .vbox strong{font-size:24px;font-weight:800} body.misafe-kit .modal .vbox span{color:rgba(255,255,255,.7);max-width:460px} /* toast */ body.misafe-kit .toast{position:fixed;left:50%;bottom:26px;transform:translateX(-50%) translateY(20px);background:var(--ink);color:#FFFFFF;padding:12px 20px;border-radius:var(--pill);font-size:14px;font-weight:650;opacity:0;pointer-events:none;transition:opacity .2s,transform .2s var(--ease);z-index:300;max-width:calc(100vw - 32px);text-align:center;box-shadow:var(--sh-lg)} body.misafe-kit .toast.show{opacity:1;transform:translateX(-50%) translateY(0)} /* mockup notes */ /* footer */ body.misafe-kit .site-footer{margin:12px;border-radius:var(--r-xl);padding:76px 0 0;font-size:15px} body.misafe-kit .fgrid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr 1fr;gap:36px} body.misafe-kit .site-footer h4{color:#FFFFFF;font-size:12.5px;font-weight:750;letter-spacing:.08em;text-transform:uppercase;margin-bottom:16px} body.misafe-kit .site-footer ul{list-style:none;margin:0;padding:0;display:grid;gap:10px} body.misafe-kit .site-footer a{color:rgba(255,255,255,.86);text-decoration:none} body.misafe-kit .site-footer a:hover{color:#FFFFFF;text-decoration:underline;text-underline-offset:3px} body.misafe-kit .site-footer p{color:rgba(255,255,255,.66);font-size:14.5px} body.misafe-kit .site-footer .flogo{width:160px;margin-bottom:18px} body.misafe-kit .fcontact{display:grid;gap:9px;margin-top:16px;color:#FFFFFF} body.misafe-kit .fcontact .copy-inline{font-size:14.5px} body.misafe-kit .fbottom{margin-top:56px;border-top:1px solid rgba(255,255,255,.12);padding:22px 0 26px;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:13px;color:rgba(255,255,255,.6)} body.misafe-kit .lp-footer{background:var(--ch-800);color:rgba(255,255,255,.65);font-size:13px;padding:22px 0;margin:12px;border-radius:var(--r)} body.misafe-kit .lp-footer .wrap{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap} body.misafe-kit .lp-footer a{color:#FFFFFF} /* misc */ body.misafe-kit .page-404{min-height:56vh;display:flex;align-items:center} body.misafe-kit .sitemap-table td:first-child{font-weight:700} body.misafe-kit .stack{display:grid;gap:12px} body.misafe-kit .divider{height:1px;background:var(--line);margin:28px 0} body.misafe-kit .kv{display:grid;grid-template-columns:130px 1fr;gap:0;background:#FFFFFF;border:1px solid var(--line);border-radius:var(--r);padding:6px 20px;box-shadow:var(--sh-xs)} body.misafe-kit .kv>*{padding:14px 0;border-bottom:1px solid var(--line)} body.misafe-kit .kv>*:nth-last-child(-n+2){border-bottom:0} body.misafe-kit .kv dt{font-size:12px;font-weight:750;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);padding-top:17px} body.misafe-kit .kv dd{margin:0;display:flex;gap:10px;align-items:center;flex-wrap:wrap;color:var(--ink);font-weight:600} body.misafe-kit .copy-btn{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line-2);border-radius:var(--pill);padding:5px 11px;font-size:12.5px;font-weight:700;color:var(--charcoal);background:#FFFFFF;transition:background .15s} body.misafe-kit .copy-btn:hover{background:var(--tint)} body.misafe-kit .copy-btn svg{width:13px;height:13px} body.misafe-kit .person .photo{aspect-ratio:1/1;margin-bottom:8px} body.misafe-kit .role{font-size:13px;font-weight:700;color:var(--muted)} body.misafe-kit .hide-sm{} body.misafe-kit .center{text-align:center} body.misafe-kit .mt24{margin-top:24px} body.misafe-kit .mt32{margin-top:32px} body.misafe-kit .mt48{margin-top:48px} /* ======================= VIGNETTES (illustrative product views) ======================= */ body.misafe-kit .vg{background:#FFFFFF;border:1px solid var(--line);border-radius:18px;box-shadow:var(--sh-lg);padding:18px;color:var(--text);font-size:13px;line-height:1.45;text-align:left;position:relative} body.misafe-kit .vg h5{font-size:14.5px;font-weight:800;letter-spacing:-.01em;color:var(--ink);line-height:1.3} body.misafe-kit .vg-top{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:14px} body.misafe-kit .vg-top .lft{display:flex;align-items:center;gap:10px;min-width:0} body.misafe-kit .vg-top .lft .disc{width:34px;height:34px;border-radius:11px} body.misafe-kit .vg-top .lft .disc svg{width:17px;height:17px} body.misafe-kit .vg-sub{font-size:11.5px;color:var(--muted);font-weight:600} body.misafe-kit .vg-kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:8px} body.misafe-kit .kpi{background:#FFFFFF;border:1px solid var(--line);border-radius:12px;padding:10px;display:grid;grid-template-columns:28px 1fr 10px;column-gap:9px;align-items:center} body.misafe-kit .kpi .kch{grid-column:3;grid-row:1/span 2;color:var(--faint);display:flex} body.misafe-kit .kpi .kch svg{width:10px;height:10px;transform:rotate(-90deg)} body.misafe-kit .kpi .disc{width:28px;height:28px;border-radius:9px;grid-row:span 2} body.misafe-kit .kpi .disc svg{width:14px;height:14px} body.misafe-kit .kpi b{font-size:19px;color:var(--ink);font-weight:800;line-height:1.05} body.misafe-kit .kpi small{font-size:10.5px;color:var(--muted);font-weight:600;line-height:1.2} body.misafe-kit .kpi b.r{color:var(--bad)} body.misafe-kit .kpi b.a{color:var(--warn)} body.misafe-kit .vg-chart{display:flex;align-items:flex-end;gap:7px;height:78px;padding:10px 2px 0;margin:12px 0 4px;border-bottom:1px solid var(--line)} body.misafe-kit .vg-chart i{flex:1;background:#D9DFE3;border-radius:6px 6px 2px 2px;display:block} body.misafe-kit .vg-chart i.hi{background:var(--charcoal)} body.misafe-kit .vg-axis{display:flex;justify-content:space-between;font-size:10px;color:var(--faint);font-weight:600;margin-bottom:12px} body.misafe-kit .vg-rows{display:grid;gap:7px} body.misafe-kit .vg-row{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:12px;background:var(--soft)} body.misafe-kit .vg-row .id{font-family:var(--mono);font-size:10.5px;color:var(--muted);flex:none} body.misafe-kit .vg-row .t{flex:1;min-width:0;color:var(--ink);font-weight:650;font-size:12.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} body.misafe-kit .vg-row .av,body.misafe-kit .av-s{width:28px;height:28px;border-radius:50%;background:var(--charcoal);color:#FFFFFF;font-weight:800;font-size:10.5px;display:flex;align-items:center;justify-content:center;flex:none} body.misafe-kit .vg-row .t small{display:block;font-weight:600;color:var(--muted);font-size:11px} body.misafe-kit .vg-foot{margin-top:12px;font-size:11.5px;color:var(--muted);font-weight:600;display:flex;justify-content:space-between;gap:8px;align-items:center} body.misafe-kit .bar{height:8px;border-radius:8px;background:var(--tint);overflow:hidden} body.misafe-kit .bar i{display:block;height:100%;background:var(--charcoal);border-radius:8px} /* phone */ body.misafe-kit .phone{width:236px;border-radius:40px;background:#1F282E;padding:9px;box-shadow:var(--sh-lg);flex:none} body.misafe-kit .phone .scr{background:#F6F7F8;border-radius:32px;overflow:hidden;position:relative;text-align:left;padding-bottom:62px} body.misafe-kit .phone .notch{width:82px;height:20px;background:#1F282E;border-radius:0 0 14px 14px;margin:0 auto} body.misafe-kit .ph-head{padding:12px 16px 4px;display:flex;justify-content:space-between;align-items:center} body.misafe-kit .ph-head small{display:block;font-size:10.5px;color:var(--muted);font-weight:600} body.misafe-kit .ph-head b{font-size:15px;color:var(--ink);font-weight:800} body.misafe-kit .ph-head .av-s{width:30px;height:30px} body.misafe-kit .ph-qr{margin:10px 12px;background:var(--charcoal);border-radius:20px;padding:12px;color:#FFFFFF;display:flex;gap:12px;align-items:center} body.misafe-kit .ph-qr .qr{width:62px;height:62px;background:#FFFFFF;border-radius:10px;padding:5px;flex:none} body.misafe-kit .ph-qr b{display:block;font-size:13px;font-weight:800} body.misafe-kit .ph-qr small{font-size:10.5px;color:rgba(255,255,255,.7);line-height:1.35;display:block;margin-top:3px} body.misafe-kit .ph-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:4px 12px} body.misafe-kit .ph-btn{background:#FFFFFF;border-radius:16px;padding:11px;display:flex;flex-direction:column;gap:8px;font-weight:750;color:var(--ink);font-size:11.5px;line-height:1.25;box-shadow:var(--sh-xs)} body.misafe-kit .ph-btn .disc{width:30px;height:30px;border-radius:10px} body.misafe-kit .ph-btn .disc svg{width:15px;height:15px} body.misafe-kit .ph-list{padding:10px 12px 14px} body.misafe-kit .ph-list .vg-row{background:#FFFFFF;padding:8px 9px;box-shadow:var(--sh-xs)} body.misafe-kit .ph-list .vg-row .t{font-size:11.5px} body.misafe-kit .ph-tab{position:absolute;left:10px;right:10px;bottom:10px;background:#FFFFFF;border-radius:18px;display:flex;justify-content:space-around;padding:9px 6px;box-shadow:var(--sh-sm)} body.misafe-kit .ph-tab span{width:20px;height:20px;color:var(--faint)} body.misafe-kit .ph-tab span.on{color:var(--charcoal)} /* incident */ body.misafe-kit .inc-band{display:grid;grid-template-columns:repeat(4,1fr);gap:7px;margin-bottom:14px} body.misafe-kit .inc-band div{background:var(--soft);border-radius:12px;padding:8px 9px} body.misafe-kit .inc-band small{display:block;font-size:10px;color:var(--muted);font-weight:650} body.misafe-kit .inc-band b{font-size:12.5px;color:var(--ink);font-weight:800} body.misafe-kit .track{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-bottom:14px} body.misafe-kit .track span{display:flex;flex-direction:column;gap:6px;font-size:10.5px;font-weight:700;color:var(--muted)} body.misafe-kit .track span::before{content:"";height:6px;border-radius:6px;background:var(--tint)} body.misafe-kit .track span.d{color:var(--ink)} body.misafe-kit .track span.d::before{background:var(--charcoal)} body.misafe-kit .track span.c{color:var(--ink)} body.misafe-kit .track span.c::before{background:linear-gradient(90deg,var(--charcoal) 50%,var(--tint) 50%)} body.misafe-kit .bodymap{display:flex;gap:12px;align-items:center;background:var(--soft);border-radius:14px;padding:10px 12px} body.misafe-kit .bodymap svg{width:42px;height:66px;flex:none} /* risk matrix */ body.misafe-kit .mx-wrap{display:grid;grid-template-columns:16px 1fr;gap:8px;align-items:stretch} body.misafe-kit .mx-y{writing-mode:vertical-rl;transform:rotate(180deg);font-size:10px;font-weight:700;color:var(--faint);text-align:center} body.misafe-kit .mx{display:grid;grid-template-columns:repeat(5,1fr);gap:4px} body.misafe-kit .mx span{aspect-ratio:1.25;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:10.5px;font-weight:750;color:rgba(31,40,46,.55)} body.misafe-kit .mx .l{background:#DCEFE3} body.misafe-kit .mx .m{background:#FFEBC7} body.misafe-kit .mx .h{background:#FAD5BA} body.misafe-kit .mx .e{background:#F5C6C0} body.misafe-kit .mx span.sel{box-shadow:0 0 0 2.5px var(--charcoal);color:var(--ink)} body.misafe-kit .mx span.res{box-shadow:0 0 0 2.5px var(--ok);color:var(--ink)} body.misafe-kit .mx-x{font-size:10px;font-weight:700;color:var(--faint);text-align:center;margin:6px 0 0 24px} body.misafe-kit .mx-legend{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px;align-items:center;font-size:11.5px;font-weight:650} /* calendar */ body.misafe-kit .cal-head{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;font-size:9.5px;font-weight:750;color:var(--faint);text-align:center;margin-bottom:4px} body.misafe-kit .cal{display:grid;grid-template-columns:repeat(7,1fr);gap:4px} body.misafe-kit .cal span{aspect-ratio:1.05;border-radius:9px;background:var(--soft);font-size:10px;font-weight:650;padding:4px 5px;color:var(--muted);position:relative} body.misafe-kit .cal span.o{background:transparent;color:var(--line-2)} body.misafe-kit .cal span.ev::after{content:"";position:absolute;left:5px;bottom:5px;width:7px;height:7px;border-radius:50%;background:var(--charcoal)} body.misafe-kit .cal span.due::after{background:var(--orange)} body.misafe-kit .cal span.over::after{background:var(--bad)} body.misafe-kit .cal span.today{background:var(--charcoal);color:#FFFFFF} body.misafe-kit .cal span.today::after{background:#FFFFFF} body.misafe-kit .cal-legend{display:flex;gap:12px;flex-wrap:wrap;margin-top:12px;font-size:11px;font-weight:650;color:var(--muted)} body.misafe-kit .cal-legend span{display:inline-flex;align-items:center;gap:6px} body.misafe-kit .cal-legend i{width:8px;height:8px;border-radius:50%;background:var(--charcoal);display:inline-block} body.misafe-kit .cal-legend i.d{background:var(--orange)} body.misafe-kit .cal-legend i.x{background:var(--bad)} /* heat map */ body.misafe-kit .heat{position:relative;aspect-ratio:16/11;border-radius:18px;background:#EEF2F4;overflow:hidden;border:1px solid var(--line)} body.misafe-kit .heat .bld{position:absolute;background:#FFFFFF;border:1px solid var(--line-2);border-radius:10px;font-size:9.5px;font-weight:700;color:var(--muted);padding:5px 7px;line-height:1.2} body.misafe-kit .heat .path{position:absolute;background:#E2E8EB;border-radius:6px} body.misafe-kit .heat .glow{position:absolute;border-radius:50%;transform:translate(-50%,-50%);pointer-events:none} body.misafe-kit .heat .glow.r{background:radial-gradient(circle,rgba(192,57,43,.62) 0%,rgba(192,57,43,.25) 38%,rgba(192,57,43,0) 70%)} body.misafe-kit .heat .glow.a{background:radial-gradient(circle,rgba(247,148,30,.62) 0%,rgba(247,148,30,.22) 40%,rgba(247,148,30,0) 70%)} body.misafe-kit .heat .glow.g{background:radial-gradient(circle,rgba(29,122,62,.45) 0%,rgba(29,122,62,.16) 40%,rgba(29,122,62,0) 70%)} body.misafe-kit .heat .pin{position:absolute;width:13px;height:13px;border-radius:50%;background:var(--charcoal);border:2.5px solid #FFFFFF;box-shadow:0 2px 6px rgba(31,40,46,.35);transform:translate(-50%,-50%)} body.misafe-kit .heat .hcard{position:absolute;right:10px;top:10px;background:#FFFFFF;border-radius:12px;padding:8px 10px;box-shadow:var(--sh-sm);font-size:10.5px;font-weight:650;color:var(--muted);max-width:46%} body.misafe-kit .heat .hcard b{display:block;color:var(--ink);font-size:11.5px} body.misafe-kit .heat-legend{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px} /* readiness */ body.misafe-kit .ready{display:grid;grid-template-columns:118px 1fr;gap:18px;align-items:center} body.misafe-kit .donut{width:118px;height:118px;border-radius:50%;background:conic-gradient(var(--charcoal) 0 82%,var(--tint) 0);display:grid;place-items:center} body.misafe-kit .donut div{width:88px;height:88px;border-radius:50%;background:#FFFFFF;display:flex;flex-direction:column;align-items:center;justify-content:center} body.misafe-kit .donut b{font-size:24px;font-weight:800;color:var(--ink);line-height:1} body.misafe-kit .donut small{font-size:10px;color:var(--muted);font-weight:650} body.misafe-kit .std-rows{display:grid;gap:9px} body.misafe-kit .std-rows div{display:grid;grid-template-columns:1fr 34px;gap:4px 8px;align-items:center;font-size:11.5px;font-weight:700;color:var(--ink)} body.misafe-kit .std-rows div span:nth-child(2){text-align:right;color:var(--muted)} body.misafe-kit .std-rows .bar{grid-column:1/-1;height:6px} /* docs */ body.misafe-kit .docstack{position:relative;height:420px;max-width:500px;margin-left:auto;width:100%} body.misafe-kit .dlv{display:flex;flex-direction:column;gap:14px} body.misafe-kit .dlv .vg-top{margin-bottom:0} body.misafe-kit .dlv-list{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:12px;overflow:hidden;background:#FFFFFF} body.misafe-kit .dlv-row{display:grid;grid-template-columns:34px minmax(0,1fr) auto;gap:12px;align-items:center;padding:11px 14px} body.misafe-kit .dlv-row+.dlv-row{border-top:1px solid var(--line)} body.misafe-kit .dlv-ic{width:34px;height:34px;border-radius:9px;background:var(--soft);display:flex;align-items:center;justify-content:center;color:var(--charcoal)} body.misafe-kit .dlv-ic svg{width:17px;height:17px} body.misafe-kit .dlv-t b{display:block;font-size:14px;line-height:1.3;color:var(--ink);font-weight:700} body.misafe-kit .dlv-t small{display:block;font-family:var(--mono);font-size:11px;color:var(--muted);margin-top:2px} body.misafe-kit .dlv-f{display:flex;gap:6px} body.misafe-kit .dlv-f span{font-size:11px;font-weight:700;padding:3px 8px;border-radius:var(--pill);background:var(--soft);color:var(--charcoal);border:1px solid var(--line)} body.misafe-kit .dlv-steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px} body.misafe-kit .dlv-steps span{text-align:center;font-size:11.5px;font-weight:700;line-height:1.25;padding:8px 6px;border-radius:10px;background:var(--soft);color:var(--muted)} body.misafe-kit .dlv-steps span.on{background:var(--charcoal);color:#FFFFFF} @media (max-width:640px){ body.misafe-kit .dlv-f span:last-child{display:none} body.misafe-kit .dlv-steps{grid-template-columns:repeat(2,minmax(0,1fr))} } body.misafe-kit .doccard{position:absolute;width:76%;background:#FFFFFF;border:1px solid var(--line);border-radius:20px;color:var(--ink);overflow:hidden;box-shadow:var(--sh-lg)} body.misafe-kit .doccard .band{background:var(--charcoal);color:#FFFFFF;font-family:var(--mono);font-size:11px;padding:10px 16px;display:flex;justify-content:space-between;gap:10px} body.misafe-kit .doccard .in{padding:16px 18px 18px} body.misafe-kit .doccard h4{font-size:16px;margin-bottom:12px;font-weight:800} body.misafe-kit .doccard .ln{height:7px;background:var(--tint);margin:8px 0;border-radius:6px} body.misafe-kit .doccard .ln.s{width:58%} body.misafe-kit .doccard .ln.m{width:82%} body.misafe-kit .doccard .foot{display:flex;justify-content:space-between;font-size:10px;color:var(--muted);margin-top:14px;border-top:1px solid var(--line);padding-top:8px;font-weight:600} body.misafe-kit .doccard:nth-child(1){top:0;left:0} body.misafe-kit .doccard:nth-child(2){top:84px;left:11%} body.misafe-kit .doccard:nth-child(3){top:168px;left:22%} body.misafe-kit .doccard .stamp{display:inline-flex;margin-top:4px} /* gantt */ body.misafe-kit .gantt{display:grid;gap:8px} body.misafe-kit .gantt .gr{display:grid;grid-template-columns:84px 1fr;gap:10px;align-items:center;font-size:11.5px;font-weight:700;color:var(--ink)} body.misafe-kit .gantt .tr{position:relative;height:18px;background:var(--soft);border-radius:9px} body.misafe-kit .gantt .tr i{position:absolute;top:3px;bottom:3px;border-radius:7px;background:#AEBAC1} body.misafe-kit .gantt .tr i.hi{background:var(--charcoal)} body.misafe-kit .gantt .tr i.dn{background:var(--ok)} body.misafe-kit .gantt .tr b{position:absolute;top:2px;width:14px;height:14px;background:var(--charcoal);transform:rotate(45deg);border-radius:3px} body.misafe-kit .gantt-ax{display:grid;grid-template-columns:84px 1fr;gap:10px;font-size:9.5px;color:var(--faint);font-weight:700;margin-bottom:6px} body.misafe-kit .gantt-ax div{display:flex;justify-content:space-between} /* chat */ body.misafe-kit .chat{display:flex;flex-direction:column;gap:9px} body.misafe-kit .bub{max-width:86%;padding:10px 13px;border-radius:16px;font-size:12.5px;line-height:1.45} body.misafe-kit .bub.me{align-self:flex-end;background:var(--charcoal);color:#FFFFFF;border-bottom-right-radius:6px} body.misafe-kit .bub.bot{align-self:flex-start;background:var(--soft);color:var(--ink);border-bottom-left-radius:6px} body.misafe-kit .bub .att{display:inline-flex;align-items:center;gap:6px;background:rgba(255,255,255,.14);padding:5px 9px;border-radius:9px;font-weight:700;font-size:11.5px} body.misafe-kit .bub .att svg{width:14px;height:14px} body.misafe-kit .chat-in{margin-top:12px;display:flex;align-items:center;gap:8px;background:var(--soft);border-radius:var(--pill);padding:7px 7px 7px 14px;font-size:12px;color:var(--faint);font-weight:600} body.misafe-kit .chat-in span{flex:1} body.misafe-kit .chat-in i{width:30px;height:30px;border-radius:50%;background:var(--charcoal);color:var(--orange);display:flex;align-items:center;justify-content:center} body.misafe-kit .chat-in i svg{width:15px;height:15px} /* check */ body.misafe-kit .ck-row{display:grid;grid-template-columns:1fr auto;gap:10px;align-items:center;padding:9px 10px;border-radius:12px;background:var(--soft);font-size:12px;font-weight:650;color:var(--ink)} body.misafe-kit .seg{display:flex;gap:3px;background:#FFFFFF;border-radius:var(--pill);padding:3px} body.misafe-kit .seg span{font-size:10px;font-weight:800;padding:4px 8px;border-radius:var(--pill);color:var(--faint)} body.misafe-kit .seg span.p{background:var(--ok);color:#FFFFFF} body.misafe-kit .seg span.f{background:var(--bad);color:#FFFFFF} body.misafe-kit .seg span.n{background:var(--charcoal);color:#FFFFFF} body.misafe-kit .ring{width:46px;height:46px;border-radius:50%;background:conic-gradient(var(--charcoal) 0 75%,var(--tint) 0);display:grid;place-items:center;flex:none} body.misafe-kit .ring b{width:34px;height:34px;border-radius:50%;background:#FFFFFF;display:flex;align-items:center;justify-content:center;font-size:10.5px;font-weight:800;color:var(--ink)} /* alert */ body.misafe-kit .al-msg{background:var(--soft);border-radius:14px;padding:12px;font-size:12.5px;color:var(--ink);font-weight:600;margin-bottom:12px} body.misafe-kit .al-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;margin-bottom:12px} body.misafe-kit .al-stats div{border:1px solid var(--line);border-radius:12px;padding:8px 10px} body.misafe-kit .al-stats b{display:block;font-size:18px;font-weight:800;color:var(--ink);line-height:1.1} body.misafe-kit .al-stats small{font-size:10px;color:var(--muted);font-weight:650} /* kiosk */ body.misafe-kit .tablet{background:#1F282E;border-radius:28px;padding:11px;box-shadow:var(--sh-lg);width:100%;max-width:470px} body.misafe-kit .tablet .scr{background:var(--soft);border-radius:19px;padding:18px;min-height:250px;text-align:left} body.misafe-kit .k-title{font-size:17px;font-weight:800;color:var(--ink)} body.misafe-kit .k-sub{font-size:11.5px;color:var(--muted);font-weight:600;margin-bottom:14px} body.misafe-kit .k-opts{display:grid;grid-template-columns:repeat(3,1fr);gap:9px} body.misafe-kit .k-opt{background:#FFFFFF;border-radius:16px;padding:12px;display:flex;flex-direction:column;gap:9px;font-size:12px;font-weight:800;color:var(--ink);box-shadow:var(--sh-xs)} body.misafe-kit .k-opt .disc{width:32px;height:32px;border-radius:10px} body.misafe-kit .k-opt .disc svg{width:16px;height:16px} body.misafe-kit .k-opt small{font-size:10px;color:var(--muted);font-weight:600} body.misafe-kit .k-foot{display:flex;justify-content:space-between;align-items:center;margin-top:14px;font-size:11px;font-weight:700;color:var(--muted)} /* toolbox slide */ body.misafe-kit .slide{background:var(--dark-bg);border-radius:16px;aspect-ratio:16/8.4;padding:16px 18px;color:#FFFFFF;display:flex;flex-direction:column;gap:7px;position:relative;overflow:hidden} body.misafe-kit .slide small{font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.6)} body.misafe-kit .slide b{font-size:16px;font-weight:800;line-height:1.25;max-width:80%} body.misafe-kit .slide i{display:block;height:6px;border-radius:6px;background:rgba(255,255,255,.18);width:62%} body.misafe-kit .slide i.s{width:44%} body.misafe-kit .avs{display:flex;align-items:center;margin-top:12px} body.misafe-kit .avs span{width:28px;height:28px;border-radius:50%;background:var(--charcoal);color:#FFFFFF;font-size:10px;font-weight:800;display:flex;align-items:center;justify-content:center;border:2px solid #FFFFFF;margin-left:-7px} body.misafe-kit .avs span:first-child{margin-left:0} body.misafe-kit .avs em{font-style:normal;margin-left:10px;font-size:12px;font-weight:700;color:var(--ink)} /* ======================= responsive ======================= */ @media (max-width:1180px){ body.misafe-kit .nav,body.misafe-kit .header-cta{display:none} body.misafe-kit .burger{display:flex} body.misafe-kit .mnav{display:block;position:fixed;left:0;right:0;bottom:0;top:116px;background:#FFFFFF;overflow:auto;overscroll-behavior:contain;transform:translateX(100%);visibility:hidden;transition:transform .25s var(--ease),visibility 0s linear .25s;z-index:59;padding:12px var(--gut) calc(40px + env(safe-area-inset-bottom))} body.misafe-kit.menu-open .mnav{transform:none;visibility:visible;transition:transform .25s var(--ease),visibility 0s} body.misafe-kit .mnav:focus{outline:none} /* 23/10/2026: the page is held still on the root element, not on body; overflow on body made it a box of its own, so the sticky header scrolled away whenever the menu was opened part way down a page */ html.menu-open{overflow:hidden} body.misafe-kit .mnav>a{display:block;color:var(--ink);text-decoration:none;padding:14px 4px;font-size:17px;font-weight:700;border-bottom:1px solid var(--line)} body.misafe-kit .mnav a.active{color:var(--charcoal)} body.misafe-kit .mnav details{border-bottom:1px solid var(--line)} body.misafe-kit .mnav summary{list-style:none;display:flex;justify-content:space-between;align-items:center;color:var(--ink);padding:14px 4px;font-size:17px;font-weight:700;cursor:pointer} body.misafe-kit .mnav summary::-webkit-details-marker{display:none} body.misafe-kit .mnav summary::after{content:"+";font-size:22px;font-weight:500;color:var(--muted)} body.misafe-kit .mnav details[open] summary::after{content:"\2212"} body.misafe-kit .mnav details a{display:block;padding:10px 4px 10px 14px;font-size:15.5px;color:var(--text);text-decoration:none;border-radius:12px} body.misafe-kit .mnav details a:hover{background:var(--soft)} body.misafe-kit .mnav details div{padding-bottom:10px} body.misafe-kit .mnav .btn{margin-top:22px;width:100%} body.misafe-kit .fgrid{grid-template-columns:1fr 1fr 1fr} body.misafe-kit .fgrid>div:first-child{grid-column:1/-1} } @media (max-width:1060px){ body.misafe-kit .g4,body.misafe-kit .steps,body.misafe-kit .capcols{grid-template-columns:repeat(2,1fr)} body.misafe-kit .step:nth-child(2n)::after{display:none} body.misafe-kit .bt,body.misafe-kit .bt.w5,body.misafe-kit .bt.w7,body.misafe-kit .bt.w4{grid-column:span 6} body.misafe-kit .bt.w8,body.misafe-kit .bt.w6{grid-column:span 12} body.misafe-kit .article{grid-template-columns:1fr} body.misafe-kit .aside{position:static} body.misafe-kit .collage{min-height:0} body.misafe-kit .collage .phone,body.misafe-kit .fchip{display:none} body.misafe-kit .collage .aw-wrap{position:relative;top:0;width:100%;max-width:560px;margin:0 auto} } @media (max-width:880px){ body.misafe-kit .hero-grid,body.misafe-kit .split,body.misafe-kit .split.wide-left,body.misafe-kit .split.r125,body.misafe-kit .ipanel.on{grid-template-columns:1fr} body.misafe-kit .g3,body.misafe-kit .g2{grid-template-columns:1fr} body.misafe-kit .stat-row{grid-template-columns:1fr} body.misafe-kit .docstack{margin:0 auto;height:400px} body.misafe-kit .bt,body.misafe-kit .bt.w5,body.misafe-kit .bt.w7,body.misafe-kit .bt.w4,body.misafe-kit .bt.w6,body.misafe-kit .bt.w8{grid-column:span 12} body.misafe-kit .hide-sm{display:none!important} body.misafe-kit .rounded-band,body.misafe-kit .hero,body.misafe-kit .site-footer,body.misafe-kit .cta{margin-left:8px;margin-right:8px} body.misafe-kit .cta{padding-left:8px;padding-right:8px} } @media (max-width:640px){ body.misafe-kit{font-size:16px} body.misafe-kit .g4,body.misafe-kit .steps,body.misafe-kit .capcols{grid-template-columns:1fr} body.misafe-kit .step::after{display:none} body.misafe-kit .fgrid{grid-template-columns:1fr 1fr} body.misafe-kit .form .row2{grid-template-columns:1fr} body.misafe-kit .rating-strip{grid-template-columns:repeat(2,1fr)} body.misafe-kit .comply-row{flex-direction:column;align-items:flex-start} body.misafe-kit .comply-row .ref{max-width:100%;text-align:left} body.misafe-kit .kv{grid-template-columns:1fr} body.misafe-kit .kv dt{padding-bottom:0;border-bottom:0} body.misafe-kit .utility .u-note{display:none} body.misafe-kit .utility .copy-inline.mail span{display:none} body.misafe-kit .logo-link img{width:128px} body.misafe-kit .site-header .wrap{min-height:68px} body.misafe-kit .mnav{top:106px} body.misafe-kit .hero .sub{font-size:17px} body.misafe-kit .btn-row .btn{flex:1 1 100%;white-space:normal} body.misafe-kit .doccard{width:84%} body.misafe-kit .doccard:nth-child(2){left:8%;top:80px} body.misafe-kit .doccard:nth-child(3){left:16%;top:160px} body.misafe-kit .itabs{border-radius:22px} body.misafe-kit .itab{padding:9px 13px;font-size:13.5px} body.misafe-kit .k-opts{grid-template-columns:1fr 1fr} body.misafe-kit .sec-head{align-items:flex-start} body.misafe-kit .ready{grid-template-columns:1fr} } body.misafe-kit.lp-mode .utility,body.misafe-kit.lp-mode .site-header,body.misafe-kit.lp-mode .site-footer,body.misafe-kit.lp-mode .mnav{display:none} body.misafe-kit h1:focus{outline:none} /* 23/10/2026 (Kevin Hanna's phone review): no word left on its own on the last line. Headings, titles and buttons are balanced across their lines; running text is wrapped so the last line keeps company. Browsers that do not know these rules simply wrap as before. */ body.misafe-kit h1,body.misafe-kit h2,body.misafe-kit h3,body.misafe-kit h4,body.misafe-kit h5,body.misafe-kit h6,body.misafe-kit .eyebrow,body.misafe-kit .btn,body.misafe-kit summary,body.misafe-kit dt,body.misafe-kit th,body.misafe-kit td,body.misafe-kit b,body.misafe-kit strong{text-wrap:balance} body.misafe-kit p,body.misafe-kit li,body.misafe-kit dd,body.misafe-kit blockquote,body.misafe-kit figcaption,body.misafe-kit label,body.misafe-kit small,body.misafe-kit span,body.misafe-kit .sub,body.misafe-kit .lead{text-wrap:pretty} body.misafe-kit section[id]{scroll-margin-top:110px} body.misafe-kit .skip{position:absolute;left:-9999px;top:0;z-index:400;background:var(--ink);color:#FFFFFF;padding:10px 16px;font-weight:700;border-radius:var(--pill)} body.misafe-kit .skip:focus{left:10px;top:10px} /* additions */ body.misafe-kit .drop.cols2{display:grid;grid-template-columns:1fr 1.15fr;gap:6px;width:min(700px,calc(100vw - 48px));left:50%;transform:translate(-50%,6px)} body.misafe-kit .nav-item:hover>.drop.cols2,body.misafe-kit .nav-item:focus-within>.drop.cols2{transform:translate(-50%,0)} body.misafe-kit .drop.cols2>div+div{border-left:1px solid var(--line);padding-left:8px} body.misafe-kit .drop.cols2 a{padding:7px 9px} body.misafe-kit .stack .step::after{display:none} body.misafe-kit .stack>.step{padding:20px} body.misafe-kit .way .disc{margin:2px 0 0} body.misafe-kit .fcontact .copy-inline{color:#FFFFFF} /* scope, works for you, Risk Library foundation, library explorer, jump nav */ body.misafe-kit .scope-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:16px} body.misafe-kit .sstat{background:#FFFFFF;border:1px solid var(--line);border-radius:var(--r);padding:22px 24px;display:block;width:100%;text-align:left;box-shadow:var(--sh-xs);transition:transform .25s var(--ease),box-shadow .25s var(--ease)} body.misafe-kit .sstat .disc{width:52px;height:52px;border-radius:16px} body.misafe-kit .sstat .ss-in{display:flex;gap:16px;align-items:center} body.misafe-kit .sstat .ss-t{display:flex;flex-direction:column;gap:4px} body.misafe-kit .sstat b{font-size:42px;font-weight:800;color:var(--ink);line-height:1;letter-spacing:-.035em} body.misafe-kit .sstat .ss-t span{font-size:14.5px;font-weight:700;color:var(--muted)} body.misafe-kit .sstat:hover{transform:translateY(-3px);box-shadow:var(--sh)} body.misafe-kit .scope-foot{display:flex;gap:10px;align-items:center;justify-content:center;margin-top:20px;font-size:15px;color:var(--muted);font-weight:600;text-align:center} body.misafe-kit .scope-foot svg{width:22px;height:22px;padding:4px;border-radius:50%;background:var(--tint);color:var(--charcoal);flex:none} body.misafe-kit .area-card{background:#FFFFFF;border:1px solid var(--line);border-radius:var(--r);padding:24px;display:flex;flex-direction:column;gap:10px;text-align:left;box-shadow:var(--sh-xs);transition:transform .25s var(--ease),box-shadow .25s var(--ease)} body.misafe-kit .area-card:hover{transform:translateY(-4px);box-shadow:var(--sh)} body.misafe-kit .area-card .ac-n{display:flex;flex-wrap:wrap;gap:6px} body.misafe-kit .area-card .ac-n span{font-size:12px;font-weight:750;color:var(--charcoal);background:var(--tint);padding:4px 10px;border-radius:var(--pill);white-space:nowrap} body.misafe-kit .area-card h3{color:var(--ink)} body.misafe-kit .area-card p{font-size:15px;margin:0} body.misafe-kit .area-card .more{margin-top:auto;padding-top:6px;font-weight:750;font-size:14.5px;color:var(--ink);display:inline-flex;gap:8px;align-items:center} body.misafe-kit .area-card .more svg{width:16px;height:16px;transition:transform .2s} body.misafe-kit .area-card:hover .more svg{transform:translateX(4px)} body.misafe-kit .wfy .feat{background:var(--soft)} body.misafe-kit .bg-soft .wfy .feat{background:#FFFFFF} body.misafe-kit .flow3{display:grid;grid-template-columns:1fr 44px 1.05fr 44px 1fr;gap:10px;align-items:center} body.misafe-kit .fl-col{background:#FFFFFF;border:1px solid var(--line);border-radius:var(--r);padding:20px;display:flex;flex-direction:column;gap:11px;box-shadow:var(--sh-xs);height:100%} body.misafe-kit .fl-h{font-size:12px;font-weight:750;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin-bottom:2px} body.misafe-kit .fl-i{display:flex;gap:9px;align-items:flex-start;font-size:14.5px;font-weight:650;color:var(--ink);line-height:1.4} body.misafe-kit .fl-i svg{width:17px;height:17px;flex:none;margin-top:2px;color:var(--charcoal)} body.misafe-kit .fl-ar{width:40px;height:40px;border-radius:50%;background:var(--tint);color:var(--charcoal);display:flex;align-items:center;justify-content:center;justify-self:center} body.misafe-kit .fl-ar svg{width:18px;height:18px} body.misafe-kit .fl-core{background:var(--dark-bg);color:#FFFFFF;border-radius:var(--r-lg);padding:26px 18px;display:flex;flex-direction:column;align-items:center;text-align:center;gap:12px;box-shadow:var(--sh-lg);position:relative;overflow:hidden} body.misafe-kit .fl-core .disc{background:rgba(255,255,255,.12);box-shadow:none} body.misafe-kit .fl-core b{font-size:21px;font-weight:800;letter-spacing:-.01em} body.misafe-kit .fl-tier{display:flex;flex-direction:column;align-items:center;gap:3px} body.misafe-kit .fl-tier span{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.14);border-radius:var(--pill);padding:5px 14px;font-size:13px;font-weight:700} body.misafe-kit .fl-tier svg{width:14px;height:14px;opacity:.55} body.misafe-kit .fl-core small{color:rgba(255,255,255,.65);font-size:12.5px;font-weight:600} body.misafe-kit .lx{background:#FFFFFF;border:1px solid var(--line);border-radius:var(--r-lg);padding:clamp(18px,3vw,28px);box-shadow:var(--sh)} body.misafe-kit .lx-bar{display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;align-items:center} body.misafe-kit .lx-bar .itabs{margin:0} body.misafe-kit .lx-n{font-size:11.5px;font-weight:800;background:var(--line);color:var(--ink);padding:2px 8px;border-radius:var(--pill)} body.misafe-kit .itab.on .lx-n{background:var(--charcoal);color:#FFFFFF} body.misafe-kit .lx-areas{margin:16px 0 4px} body.misafe-kit .lx-line{font-size:13.5px;color:var(--muted);font-weight:600;margin:12px 0} body.misafe-kit .lx-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;max-height:560px;overflow:auto;padding:2px 6px 2px 2px} body.misafe-kit .lx-item{display:grid;grid-template-columns:36px 1fr;gap:12px;align-items:center;padding:12px 14px;border:1px solid var(--line);border-radius:16px;background:var(--soft)} body.misafe-kit .lx-item .mi{width:36px;height:36px;border-radius:11px;background:var(--charcoal);color:var(--orange);display:flex;align-items:center;justify-content:center} body.misafe-kit .lx-item .mi svg{width:18px;height:18px} body.misafe-kit .lx-item b{display:block;font-size:14px;color:var(--ink);line-height:1.3;font-weight:700} body.misafe-kit .lx-sub{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:4px} body.misafe-kit .lx-tag{font-size:11px;font-weight:750;background:#FFFFFF;border:1px solid var(--line);color:var(--charcoal);padding:2px 9px;border-radius:var(--pill)} body.misafe-kit .lx-code{font-family:var(--mono);font-size:11px;color:var(--muted)} body.misafe-kit .lx-empty{grid-column:1/-1;padding:28px;text-align:center;color:var(--muted)} body.misafe-kit .jump{position:sticky;top:78px;z-index:40;background:rgba(255,255,255,.9);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-bottom:1px solid var(--line);margin-top:12px} body.misafe-kit .jump-in{display:flex;gap:4px;overflow-x:auto;padding:10px 0;scrollbar-width:none} body.misafe-kit .jump-in::-webkit-scrollbar{display:none} body.misafe-kit .jump button{flex:none;padding:8px 14px;border-radius:var(--pill);font-size:13.5px;font-weight:700;color:var(--muted);transition:background .15s,color .15s} body.misafe-kit .jump button:hover{background:var(--tint);color:var(--ink)} @media (max-width:1060px){ body.misafe-kit .scope-stats{grid-template-columns:repeat(2,1fr)} body.misafe-kit .lx-grid{grid-template-columns:repeat(2,1fr)} body.misafe-kit .flow3{grid-template-columns:1fr} body.misafe-kit .fl-ar{transform:rotate(90deg)} } @media (max-width:880px){ body.misafe-kit .areas{grid-template-columns:1fr} } @media (max-width:640px){ body.misafe-kit .lx-grid{grid-template-columns:1fr} body.misafe-kit .scope-stats{grid-template-columns:1fr 1fr} body.misafe-kit .sstat .ss-in{flex-direction:column;align-items:flex-start;gap:10px} body.misafe-kit .sstat b{font-size:34px} body.misafe-kit .jump{top:68px} } /* home chooser and zones */ body.misafe-kit .choose{margin-top:30px} body.misafe-kit .choose-q{display:block;font-size:12.5px;font-weight:750;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.62);margin-bottom:12px} body.misafe-kit .choose-opt{display:flex;flex-direction:column;gap:8px;text-align:left;padding:18px 18px 20px;border-radius:var(--r);background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.2);color:#FFFFFF;transition:transform .25s var(--ease),background .2s,border-color .2s,box-shadow .25s} body.misafe-kit .choose-opt .co-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px} body.misafe-kit .choose-opt b{display:block;font-size:18px;font-weight:800;line-height:1.25;letter-spacing:-.01em} body.misafe-kit .choose-opt small{display:block;font-size:13.5px;color:rgba(255,255,255,.72);line-height:1.45} body.misafe-kit .choose-opt .go{width:38px;height:38px;border-radius:50%;background:#FFFFFF;color:var(--ink);display:flex;align-items:center;justify-content:center;transition:transform .2s var(--ease)} body.misafe-kit .choose-opt .go svg{width:17px;height:17px;transform:rotate(90deg)} body.misafe-kit .choose-opt:hover{background:rgba(255,255,255,.15);border-color:rgba(255,255,255,.4);transform:translateY(-3px);box-shadow:0 20px 40px -24px rgba(0,0,0,.6)} body.misafe-kit .choose-opt:hover .go{transform:translateY(3px)} body.misafe-kit .choose-alt{margin:14px 0 0;font-size:14px;color:rgba(255,255,255,.66)} body.misafe-kit .choose-alt a{color:#FFFFFF;font-weight:700;text-underline-offset:3px} body.misafe-kit .zone{padding:clamp(44px,5vw,68px) 0 0;scroll-margin-top:96px} body.misafe-kit .zone-in{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;background:var(--soft);border:1px solid var(--line);border-radius:var(--r-lg);padding:24px 28px} body.misafe-kit .zone-l{display:flex;align-items:center;gap:18px;min-width:0} body.misafe-kit .zone-k{display:block;font-size:12.5px;font-weight:750;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-bottom:6px} body.misafe-kit .zone-in h2{font-size:clamp(23px,2.5vw,32px);line-height:1.15} body.misafe-kit .zone-switch{display:inline-flex;align-items:center;gap:10px;padding:11px 18px;border-radius:var(--pill);border:1.5px solid var(--line-2);background:#FFFFFF;font-weight:750;font-size:14.5px;color:var(--ink);transition:border-color .15s,transform .2s var(--ease);white-space:nowrap} body.misafe-kit .zone-switch svg{width:16px;height:16px;transition:transform .2s var(--ease)} body.misafe-kit .zone-switch.down svg{transform:rotate(90deg)} body.misafe-kit .zone-switch.up svg{transform:rotate(-90deg)} body.misafe-kit .zone-switch:hover{border-color:var(--charcoal);transform:translateY(-2px)} body.misafe-kit .sec.zone-first{padding-top:clamp(40px,5vw,60px)} @media (max-width:640px){ body.misafe-kit .zone-in{padding:20px} body.misafe-kit .zone-l{align-items:flex-start} } /* product views keep the system's own colours inside dark sections */ body.misafe-kit .dark .vg .disc,body.misafe-kit .dark .phone .disc,body.misafe-kit .dark .tablet .disc,body.misafe-kit .dark .fchip .disc,body.misafe-kit .dark .appwin .disc{background:var(--charcoal);color:var(--orange);box-shadow:inset 0 1px 0 rgba(255,255,255,.14)} body.misafe-kit .dark .vg .disc.bad{background:var(--bad-bg);color:var(--bad);box-shadow:none} body.misafe-kit .dark .vg .disc.lt{background:var(--tint);color:var(--charcoal);box-shadow:none} body.misafe-kit .dark .fchip .disc.okc,body.misafe-kit .dark .vg .disc.okc{background:var(--ok-bg);color:var(--ok);box-shadow:none} body.misafe-kit .dark .vg .tag{background:var(--tint);border-color:var(--tint);color:var(--ink)} body.misafe-kit .dark .vg h5,body.misafe-kit .dark .appwin b{color:var(--ink)} /* app window: mirrors the MiSAFE QHSE page pattern (back card, header card, snapshot tiles, register) */ body.misafe-kit .appwin{background:#FFFFFF;border-radius:16px;box-shadow:var(--sh-lg);overflow:hidden;border:1px solid var(--line);font-size:11px;line-height:1.35;color:var(--text);text-align:left} body.misafe-kit .aw-bar{display:flex;align-items:center;gap:10px;padding:9px 12px;background:#FFFFFF;border-bottom:1px solid var(--line)} body.misafe-kit .aw-dots{display:flex;gap:5px} body.misafe-kit .aw-dots i{width:8px;height:8px;border-radius:50%;background:var(--line-2);display:block} body.misafe-kit .aw-url{flex:1;display:flex;align-items:center;justify-content:center;gap:6px;background:#F6F7F8;border-radius:var(--pill);padding:4px 10px;font-size:10.5px;color:var(--muted);font-weight:650} body.misafe-kit .aw-url svg{width:11px;height:11px} body.misafe-kit .aw-bar .av-s{width:22px;height:22px;font-size:8.5px} body.misafe-kit .aw-body{display:grid;grid-template-columns:44px 1fr;background:#F6F7F8} body.misafe-kit .aw-rail{background:#FFFFFF;border-right:1px solid var(--line);display:flex;flex-direction:column;align-items:center;gap:7px;padding:12px 0} body.misafe-kit .aw-rail span{width:28px;height:28px;border-radius:9px;display:flex;align-items:center;justify-content:center;color:var(--faint)} body.misafe-kit .aw-rail span svg{width:15px;height:15px} body.misafe-kit .aw-rail span.on{background:var(--charcoal);color:var(--orange)} body.misafe-kit .aw-main{padding:12px;display:flex;flex-direction:column;gap:10px;min-width:0} body.misafe-kit .aw-row1{display:grid;grid-template-columns:100px 1fr;gap:8px} body.misafe-kit .aw-first{display:flex;flex-direction:column;gap:6px} body.misafe-kit .aw-back{flex:1;background:var(--charcoal);color:#FFFFFF;border-radius:10px;font-weight:700;font-size:9.5px;display:flex;align-items:center;justify-content:center;gap:5px;padding:6px;text-align:center;line-height:1.2} body.misafe-kit .aw-back svg{width:11px;height:11px;transform:rotate(180deg);flex:none} body.misafe-kit .aw-help{background:var(--orange);color:var(--ink);border-radius:10px;font-size:9px;font-weight:700;padding:5px 4px;text-align:center} body.misafe-kit .aw-head{background:#FFFFFF;border:1px solid var(--line);border-radius:12px;padding:10px;display:flex;align-items:center;gap:9px;min-width:0} body.misafe-kit .aw-head .disc{width:28px;height:28px;border-radius:9px} body.misafe-kit .aw-head .disc svg{width:14px;height:14px} body.misafe-kit .aw-head>div{flex:1;min-width:0} body.misafe-kit .aw-head b{display:block;font-size:12.5px;color:var(--ink);font-weight:800} body.misafe-kit .aw-head small{display:block;font-size:9.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} body.misafe-kit .aw-btn{background:var(--charcoal);color:#FFFFFF;border-radius:50%;width:24px;height:24px;display:flex;align-items:center;justify-content:center;flex:none} body.misafe-kit .aw-btn svg{width:11px;height:11px} body.misafe-kit .aw-card{background:#FFFFFF;border:1px solid var(--line);border-radius:12px;padding:10px} body.misafe-kit .aw-ch{display:flex;align-items:center;gap:8px;margin-bottom:8px} body.misafe-kit .aw-ch b{font-size:11.5px;color:var(--ink);font-weight:800} body.misafe-kit .aw-ch small{font-size:9.5px;color:var(--muted)} body.misafe-kit .aw-count{background:var(--charcoal);color:#FFFFFF;border-radius:var(--pill);font-size:9px;font-weight:800;padding:2px 8px} body.misafe-kit .aw-tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:7px} body.misafe-kit .aw-tile{border:1px solid var(--line);border-radius:10px;padding:8px;display:grid;grid-template-columns:22px 1fr 8px;column-gap:7px;row-gap:2px;align-items:center} body.misafe-kit .aw-tile .disc{width:22px;height:22px;border-radius:7px;grid-row:1/span 2} body.misafe-kit .aw-tile .disc svg{width:12px;height:12px} body.misafe-kit .aw-tile b{font-size:16px;font-weight:800;color:var(--ink);line-height:1} body.misafe-kit .aw-tile b.a{color:var(--warn)} body.misafe-kit .aw-tile b.g{color:var(--ok)} body.misafe-kit .aw-tile small{font-size:9px;color:var(--muted);grid-column:2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} body.misafe-kit .aw-tile .ch{grid-row:1/span 2;grid-column:3;color:var(--faint);display:flex} body.misafe-kit .aw-tile .ch svg{width:10px;height:10px;transform:rotate(-90deg)} body.misafe-kit .aw-tbl{width:100%;border-collapse:separate;border-spacing:0;font-size:10px;border-radius:8px;overflow:hidden;table-layout:fixed} body.misafe-kit .aw-tbl th{background:var(--charcoal);color:#FFFFFF;font-size:8px;text-transform:uppercase;letter-spacing:.05em;text-align:left;padding:6px 7px;font-weight:700} body.misafe-kit .aw-tbl th:nth-child(1){width:58px} body.misafe-kit .aw-tbl th:nth-child(3){width:58px} body.misafe-kit .aw-tbl th:nth-child(4){width:82px} body.misafe-kit .aw-tbl td{padding:6px 7px;border-top:1px solid var(--line);color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} body.misafe-kit .aw-tbl tbody tr:nth-child(even) td{background:#FAFBFB} body.misafe-kit .aw-tbl td.id{font-family:var(--mono);font-size:9px;color:var(--muted)} body.misafe-kit .aw-tbl td.t{font-weight:600} body.misafe-kit .aw-tbl .pill{font-size:8.5px;padding:2px 6px;gap:4px} body.misafe-kit .aw-tbl .pill::before{width:5px;height:5px} /* mega menu footer links: never squeeze into the icon column */ body.misafe-kit .drop .mfoot a.arrow-link{display:inline-flex;grid-template-columns:none;align-items:center;gap:8px;padding:8px 12px;border-radius:var(--pill);white-space:nowrap;font-size:14px;color:var(--ink)} body.misafe-kit .drop .mfoot a.arrow-link:hover{background:#FFFFFF} body.misafe-kit .mega .mfoot>span{flex:1;min-width:0} body.misafe-kit .mega .mfoot .mf-links{flex:none} /* organisation logo strip */ body.misafe-kit .logos-band{padding:clamp(28px,4vw,40px) 0 0} body.misafe-kit .logo-strip{display:flex;flex-direction:column;align-items:center;gap:16px} body.misafe-kit .ls-label{font-size:12.5px;font-weight:750;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);text-align:center} body.misafe-kit .ls-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:14px;width:100%} body.misafe-kit .ls-row.ls-left{margin-top:8px;grid-template-columns:repeat(auto-fill,minmax(190px,1fr))} body.misafe-kit .logo-tile{height:84px;background:#FFFFFF;border:1px solid var(--line);border-radius:16px;display:flex;align-items:center;justify-content:center;padding:14px 18px;transition:box-shadow .2s,transform .2s var(--ease)} body.misafe-kit .logo-tile img{max-height:52px;max-width:100%;width:auto;height:auto;object-fit:contain;filter:grayscale(1);opacity:.78;transition:filter .25s,opacity .25s} body.misafe-kit .logo-tile:hover{box-shadow:var(--sh-sm);transform:translateY(-2px)} body.misafe-kit .logo-tile:hover img{filter:none;opacity:1} body.misafe-kit .lt-name{display:flex;flex-direction:column;align-items:center;text-align:center;line-height:1.2} body.misafe-kit .lt-name b{font-size:14px;font-weight:800;color:var(--charcoal);letter-spacing:-.01em} body.misafe-kit .lt-name small{font-size:11.5px;font-weight:650;color:var(--muted);margin-top:3px} /* home hero: start-here panel instead of product screens */ body.misafe-kit .hero-facts{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px} body.misafe-kit .hero-facts{gap:10px 24px} body.misafe-kit .hf{display:inline-flex;align-items:center;gap:9px;color:rgba(255,255,255,.88);font-size:14.5px;font-weight:700;white-space:nowrap} body.misafe-kit .hf svg{width:22px;height:22px;padding:4px;border-radius:50%;background:rgba(255,255,255,.14);color:#FFFFFF;flex:none} body.misafe-kit .pathcard{background:#FFFFFF;border-radius:var(--r-lg);padding:clamp(20px,2.4vw,30px);box-shadow:0 40px 80px -32px rgba(0,0,0,.55);color:var(--text)} body.misafe-kit .pc-head{margin-bottom:16px} body.misafe-kit .pc-k{display:inline-flex;align-items:center;gap:8px;font-size:12.5px;font-weight:750;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-bottom:6px} body.misafe-kit .pc-k::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--orange)} body.misafe-kit .dark .pathcard h2{color:var(--ink);font-size:clamp(22px,2.2vw,28px);letter-spacing:-.02em} body.misafe-kit .pc-paths{display:grid;gap:10px} body.misafe-kit .path{display:block;width:100%;text-align:left;padding:14px;border-radius:18px;background:var(--soft);border:1px solid var(--line);transition:background .2s,border-color .2s,transform .25s var(--ease),box-shadow .25s var(--ease)} body.misafe-kit .dark .pathcard .disc{background:var(--charcoal);color:var(--orange);box-shadow:inset 0 1px 0 rgba(255,255,255,.14)} body.misafe-kit .path-in{display:grid;grid-template-columns:48px 1fr 38px;gap:14px;align-items:center} body.misafe-kit .path .pt b{display:block;font-size:16.5px;font-weight:800;color:var(--ink);line-height:1.3} body.misafe-kit .path .pt small{display:block;font-size:13.5px;color:var(--muted);line-height:1.45;margin-top:3px} body.misafe-kit .path .go{width:38px;height:38px;border-radius:50%;background:#FFFFFF;border:1px solid var(--line-2);color:var(--ink);display:flex;align-items:center;justify-content:center;transition:background .2s,color .2s,transform .2s var(--ease)} body.misafe-kit .path .go svg{width:16px;height:16px;transform:rotate(90deg)} body.misafe-kit .path:hover{background:#FFFFFF;border-color:var(--line-2);transform:translateY(-2px);box-shadow:var(--sh)} body.misafe-kit .path:hover .go{background:var(--charcoal);color:#FFFFFF;border-color:var(--charcoal);transform:translateY(2px)} body.misafe-kit .pc-foot{margin:16px 0 0;font-size:13.5px;color:var(--muted)} body.misafe-kit .pc-foot a{color:var(--ink);font-weight:750;text-underline-offset:3px} /* both, from one team */ body.misafe-kit .flowlist{list-style:none;margin:0;padding:0;display:grid;gap:14px;position:relative} body.misafe-kit .flowlist li{display:grid;grid-template-columns:44px 1fr;gap:16px;align-items:start;background:#FFFFFF;border:1px solid var(--line);border-radius:var(--r);padding:20px 22px;box-shadow:var(--sh-xs);position:relative} body.misafe-kit .flowlist li:not(:last-child)::after{content:"";position:absolute;left:43px;bottom:-15px;width:2px;height:16px;background:var(--line-2)} body.misafe-kit .fl-n{width:44px;height:44px;border-radius:50%;background:var(--charcoal);color:#FFFFFF;font-weight:800;font-size:16px;display:flex;align-items:center;justify-content:center} body.misafe-kit .flowlist h3{font-size:18px;margin-bottom:4px} body.misafe-kit .flowlist p{font-size:15px;margin:0} /* on this page navigator */ body.misafe-kit .pagenav[hidden]{display:none} body.misafe-kit .pn-rail{position:fixed;right:14px;top:50%;transform:translateY(-50%);z-index:140;display:flex;flex-direction:column;align-items:center;gap:6px;padding:8px 6px;background:rgba(255,255,255,.94);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid var(--line);border-radius:var(--pill);box-shadow:var(--sh)} body.misafe-kit .pn-btn{width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--ink);transition:background .15s} body.misafe-kit .pn-btn:hover{background:var(--tint)} body.misafe-kit .pn-btn svg{width:15px;height:15px} body.misafe-kit .pn-rail>.pn-btn:first-child svg{transform:rotate(-90deg)} body.misafe-kit .pn-rail>.pn-btn:last-child svg{transform:rotate(90deg)} body.misafe-kit .pn-dots{list-style:none;margin:2px 0;padding:0;display:flex;flex-direction:column;align-items:center;gap:2px} body.misafe-kit .pn-dot{position:relative;width:24px;height:18px;display:flex;align-items:center;justify-content:center} body.misafe-kit .pn-dot::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--line-2);transition:background .2s,height .2s} body.misafe-kit .pn-dot:hover::before{background:var(--muted)} body.misafe-kit .pn-dot.on::before{background:var(--charcoal);height:16px;border-radius:6px} body.misafe-kit .pn-tip{position:absolute;right:34px;top:50%;transform:translate(6px,-50%);white-space:nowrap;background:var(--charcoal);color:#FFFFFF;font-size:12.5px;font-weight:700;padding:6px 11px;border-radius:var(--pill);opacity:0;pointer-events:none;transition:opacity .15s,transform .15s var(--ease);box-shadow:var(--sh-sm)} body.misafe-kit .pn-dot:hover .pn-tip,body.misafe-kit .pn-dot:focus-visible .pn-tip{opacity:1;transform:translate(0,-50%)} body.misafe-kit .pn-fab{display:none} body.misafe-kit .pn-panel{position:fixed;right:62px;top:50%;transform:translateY(-50%) translateX(8px);z-index:141;width:min(320px,calc(100vw - 32px));max-height:min(72vh,620px);overflow:auto;background:#FFFFFF;border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--sh-lg);opacity:0;visibility:hidden;transition:opacity .18s,transform .18s var(--ease),visibility .18s} body.misafe-kit .pagenav.open .pn-panel{opacity:1;visibility:visible;transform:translateY(-50%)} body.misafe-kit .pn-ph{display:flex;justify-content:space-between;align-items:center;padding:12px 12px 12px 18px;border-bottom:1px solid var(--line);position:sticky;top:0;background:#FFFFFF} body.misafe-kit .pn-ph b{color:var(--ink);font-size:15px} body.misafe-kit .pn-list{list-style:none;margin:0;padding:8px} body.misafe-kit .pn-list button{width:100%;display:grid;grid-template-columns:26px 1fr;gap:10px;align-items:center;text-align:left;padding:9px 10px;border-radius:12px;font-size:14px;font-weight:650;color:var(--text);transition:background .15s} body.misafe-kit .pn-list button:hover{background:var(--soft)} body.misafe-kit .pn-list button.on{background:var(--tint);color:var(--ink)} body.misafe-kit .pn-num{width:26px;height:26px;border-radius:50%;background:var(--soft);border:1px solid var(--line);display:flex;align-items:center;justify-content:center;font-size:11.5px;font-weight:800;color:var(--muted)} body.misafe-kit .pn-list button.on .pn-num{background:var(--charcoal);border-color:var(--charcoal);color:#FFFFFF} body.misafe-kit .pn-pf{display:flex;gap:8px;padding:10px 12px 12px;border-top:1px solid var(--line);position:sticky;bottom:0;background:#FFFFFF} body.misafe-kit .pn-pf button{flex:1;display:flex;align-items:center;justify-content:center;gap:6px;padding:9px;border-radius:var(--pill);border:1.5px solid var(--line-2);font-weight:750;font-size:13.5px;color:var(--ink)} body.misafe-kit .pn-pf button:hover{border-color:var(--charcoal)} body.misafe-kit .pn-pf button svg{width:14px;height:14px} body.misafe-kit .pn-pf button:first-child svg{transform:rotate(-90deg)} body.misafe-kit .pn-pf button:last-child svg{transform:rotate(90deg)} @media (max-width:1320px){ body.misafe-kit .pn-rail{display:none} body.misafe-kit .pn-fab{display:inline-flex;position:fixed;left:16px;bottom:18px;z-index:140;align-items:center;gap:8px;padding:11px 16px;border-radius:var(--pill);background:#FFFFFF;color:var(--ink);border:1px solid var(--line);box-shadow:var(--sh-lg);font-weight:750;font-size:13.5px} body.misafe-kit .pn-fab svg{width:16px;height:16px} body.misafe-kit .pn-panel{left:12px;right:12px;bottom:72px;top:auto;width:auto;max-height:65vh;transform:translateY(10px)} body.misafe-kit .pagenav.open .pn-panel{transform:none} } body.misafe-kit.menu-open .pagenav{display:none} /* phones (23/10/2026): the On this page button waits until the hero has scrolled up past it, so it never covers the hero's buttons or text on arrival; it also steps aside while the cookie banner is open */ @media (max-width:640px){ body.misafe-kit .pn-fab{opacity:0;visibility:hidden;transform:translateY(10px);transition:opacity .2s,transform .2s,visibility 0s linear .2s} body.misafe-kit.past-hero .pn-fab{opacity:1;visibility:visible;transform:none;transition:opacity .2s,transform .2s,visibility 0s} } body.misafe-kit.lp-mode .pn-rail{right:10px} /* story band, readiness */ body.misafe-kit .story-ai .card{background:#FFFFFF;border-color:#FFFFFF;color:var(--text);gap:14px;padding:32px;box-shadow:var(--sh)} body.misafe-kit .dark .story-ai .card h3{color:var(--ink)} body.misafe-kit .dark .story-ai .card .disc{background:var(--charcoal);color:var(--orange)} body.misafe-kit .dark .story-ai .card .ticks li{color:var(--text)} body.misafe-kit .dark .story-ai .card .ticks li::before{background:var(--ok-bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231D7A3E' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.2 4.2L19 7'/%3E%3C/svg%3E") center/12px no-repeat} body.misafe-kit .dark .story-ai .btn-ghost{background:#FFFFFF;color:var(--ink);border-color:var(--line)} body.misafe-kit .dark .story-ai .btn-ghost:hover{border-color:var(--charcoal)} body.misafe-kit .sec-line{display:flex;gap:10px;align-items:flex-start;background:var(--tint);border-radius:14px;padding:12px 14px;font-size:14px;font-weight:650;color:var(--ink)} body.misafe-kit .sec-line svg{width:18px;height:18px;flex:none;margin-top:1px;color:var(--charcoal)} body.misafe-kit .rd-fw{margin-top:22px} body.misafe-kit .rd-l{display:block;font-size:12.5px;font-weight:750;color:var(--muted);letter-spacing:.02em;margin-bottom:10px} body.misafe-kit .rd-fw .tag{cursor:default} body.misafe-kit .rd-fw .tag svg{color:var(--charcoal)} body.misafe-kit .bg-soft .bt{background:#FFFFFF;border-color:var(--line)} body.misafe-kit .bg-soft .rd-fw .tag{background:#FFFFFF} /* ===== real screens ===== */ body.misafe-kit .shot{margin:0} body.misafe-kit .shot-btn{display:block;width:100%;padding:0;border:1px solid var(--line);border-radius:18px;overflow:hidden;background:#FFFFFF;box-shadow:var(--sh);cursor:zoom-in;position:relative;transition:transform .25s var(--ease),box-shadow .25s var(--ease)} body.misafe-kit .shot-btn img{display:block;width:100%;height:auto} body.misafe-kit .shot-btn:hover{transform:translateY(-3px);box-shadow:var(--sh-lg)} body.misafe-kit .shot-btn:focus-visible{outline:3px solid var(--charcoal);outline-offset:3px} body.misafe-kit .shot-zoom{position:absolute;right:12px;bottom:12px;display:inline-flex;align-items:center;gap:6px;background:rgba(31,40,46,.82);color:#FFFFFF;font-size:12px;font-weight:750;padding:6px 11px;border-radius:999px;opacity:0;transition:opacity .2s} body.misafe-kit .shot-zoom svg{width:13px;height:13px} body.misafe-kit .shot-btn:hover .shot-zoom,body.misafe-kit .shot-btn:focus-visible .shot-zoom{opacity:1} body.misafe-kit .shot figcaption{font-size:13px;color:var(--muted);margin-top:10px;line-height:1.45} body.misafe-kit .shot-wide{max-width:1120px;margin-left:auto;margin-right:auto} body.misafe-kit .shot-phone{max-width:360px;margin:0 auto} body.misafe-kit .faq-side .lead-p{margin-top:12px} @media (min-width:881px){ body.misafe-kit .faq-side{position:sticky;top:110px;align-self:start} } body.misafe-kit .shot-cap{font-size:13px;color:var(--muted);margin:12px auto 0;line-height:1.45;max-width:340px;text-align:center} body.misafe-kit .dark .shot-cap{color:rgba(255,255,255,.66)} /* real screens in a plain product window (no window bar), opening larger on click */ body.misafe-kit .pw{margin:0;background:#FFFFFF;border:1px solid var(--line);border-radius:16px;box-shadow:var(--sh-lg);overflow:hidden;text-align:left;min-width:0;max-width:100%} body.misafe-kit .pw-btn{display:block;width:100%;padding:0;margin:0;border:0;border-radius:0;background:#F6F7F8;cursor:zoom-in;position:relative;font:inherit;color:inherit;text-align:left} body.misafe-kit .pw-btn img,body.misafe-kit .pw-img img{display:block;width:100%;height:auto} body.misafe-kit .pw-btn:hover .shot-zoom,body.misafe-kit .pw-btn:focus-visible .shot-zoom{opacity:1} body.misafe-kit .pw-btn:focus-visible{outline:3px solid var(--charcoal);outline-offset:-3px} body.misafe-kit .pw-phone{width:100%;max-width:286px;background:#1F282E;border:0;border-radius:42px;padding:9px;box-shadow:var(--sh-lg);margin-left:auto;margin-right:auto} body.misafe-kit .pw-phone .pw-btn,body.misafe-kit .pw-phone .pw-img{border-radius:33px;overflow:hidden;background:#F6F7F8} body.misafe-kit .pw-tablet{width:100%;max-width:600px;background:#1F282E;border:0;border-radius:28px;padding:11px;box-shadow:var(--sh-lg)} body.misafe-kit .pw-tablet .pw-btn,body.misafe-kit .pw-tablet .pw-img{border-radius:18px;overflow:hidden;background:#FFFFFF} body.misafe-kit .pw-pair{display:flex;justify-content:center;align-items:flex-start;gap:24px;width:100%} body.misafe-kit .pw-pair .pw-phone{max-width:262px;margin:0} body.misafe-kit .pw-pair .pw-phone+.pw-phone{margin-top:56px} /* screenshots side by side keep the same shape so their captions line up */ body.misafe-kit .shots-row.g2{align-items:start} /* full-width screenshots, one under the other, so each is big enough to read */ body.misafe-kit .shots-stack{display:grid;gap:40px;max-width:1120px;margin-left:auto;margin-right:auto} /* screenshots side by side: never cropped (Micah, 19/10/2026: show the whole matrix); each one is shown whole and the pair sits on a common top line */ /* a wide screen beside a phone: the wide screen takes most of the row (Micah, 19/10/2026: bigger heat map) */ @media (min-width:881px){ body.misafe-kit .shots-row.g2.has-phone{grid-template-columns:minmax(0,2.4fr) minmax(0,1fr);align-items:center} } body.misafe-kit .bt .bt-vis .pw{width:100%;box-shadow:var(--sh-sm);display:flex;flex-direction:column} body.misafe-kit .bt .bt-vis .pw-img{height:250px;overflow:hidden;background:#F6F7F8} body.misafe-kit .bt .bt-vis .pw-img img{width:100%;height:100%;object-fit:cover;object-position:left top} body.misafe-kit .dark .shot figcaption{color:rgba(255,255,255,.66)} body.misafe-kit .modal .panel.zoom{width:min(1280px,100%);padding:0} body.misafe-kit .zoom-body{padding:14px;background:var(--soft)} body.misafe-kit .zoom-body img{display:block;width:100%;height:auto;border-radius:12px;border:1px solid var(--line)} /* ===== work area cards list their hubs ===== */ body.misafe-kit .ac-hubs{display:block;font-size:13.5px;color:var(--muted);line-height:1.55} body.misafe-kit .ac-hubs b{color:var(--ink);font-weight:750} /* ===== menu map ===== */ body.misafe-kit .mm{display:grid;grid-template-columns:300px 1fr;gap:28px;align-items:start} body.misafe-kit .mm-side{background:var(--charcoal);border-radius:24px;padding:10px 10px 16px;max-height:calc(100vh - 120px);overflow:auto;position:sticky;top:96px;box-shadow:var(--sh)} body.misafe-kit .mm-g{display:block;font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.55);font-weight:800;padding:14px 12px 6px} body.misafe-kit .mm-i{display:flex;gap:10px;align-items:center;width:100%;padding:8px 12px;border-radius:12px;color:rgba(255,255,255,.86);font-size:14px;font-weight:650;text-align:left;transition:background .15s} body.misafe-kit .mm-i svg{width:16px;height:16px;flex:none;opacity:.85} body.misafe-kit .mm-i:hover{background:rgba(255,255,255,.08)} body.misafe-kit .mm-i.on{background:rgba(255,255,255,.14);color:#FFFFFF} body.misafe-kit .mm-i.on svg{color:var(--orange);opacity:1} body.misafe-kit .mm-i:focus-visible{outline:2px solid #FFFFFF;outline-offset:-2px} body.misafe-kit .mmd{display:none;background:#FFFFFF;border:1px solid var(--line);border-radius:var(--r-lg);padding:clamp(22px,3vw,34px);box-shadow:var(--sh-xs)} body.misafe-kit .mmd.on{display:block;animation:fadeup .25s var(--ease)} body.misafe-kit .mmd .card-head{margin:6px 0 10px} body.misafe-kit .mmd .card-head h3{font-size:24px} body.misafe-kit .mmd .lead-p{margin:0 0 14px} body.misafe-kit .mmd .shot{margin-top:22px} body.misafe-kit .mmd .btn-row{margin-top:18px} /* ===== hub explorer and hub panels ===== */ body.misafe-kit .hx{background:#FFFFFF;border:1px solid var(--line);border-radius:var(--r-lg);padding:clamp(16px,2.5vw,26px);box-shadow:var(--sh)} body.misafe-kit .hx-areas{display:flex;flex-wrap:wrap;gap:8px} body.misafe-kit .hx-a{display:inline-flex;align-items:center;gap:8px;padding:10px 16px;border-radius:999px;font-weight:750;font-size:14px;color:var(--muted);background:var(--soft);border:1px solid transparent;transition:background .2s,color .2s} body.misafe-kit .hx-a svg{width:16px;height:16px} body.misafe-kit .hx-a:hover{color:var(--ink);background:var(--tint)} body.misafe-kit .hx-a.on{background:var(--charcoal);color:#FFFFFF} body.misafe-kit .hx-a.on .lx-n{background:rgba(255,255,255,.18);color:#FFFFFF} body.misafe-kit .hx-body{display:grid;grid-template-columns:290px 1fr;gap:24px;margin-top:22px;align-items:start} body.misafe-kit .hx-group{display:none;flex-direction:column;gap:8px} body.misafe-kit .hx-group.on{display:flex} body.misafe-kit .hx-hub{display:flex;gap:12px;align-items:center;padding:11px 12px;border:1px solid var(--line);border-radius:16px;background:var(--soft);text-align:left;font-weight:750;font-size:14.5px;color:var(--ink);transition:background .15s,border-color .15s,box-shadow .15s} body.misafe-kit .hx-hub>span{flex:1;min-width:0} body.misafe-kit .hx-hub>svg{width:15px;height:15px;color:var(--faint);flex:none} body.misafe-kit .hx-hub:hover{background:#FFFFFF;border-color:var(--line-2)} body.misafe-kit .hx-hub.on{background:#FFFFFF;border-color:var(--charcoal);box-shadow:var(--sh-xs)} body.misafe-kit .hx-hub.on>svg{color:var(--charcoal)} body.misafe-kit .hub{display:none} body.misafe-kit .hub.on,body.misafe-kit .hub.static{display:block} body.misafe-kit .hx .hub.on{animation:fadeup .25s var(--ease)} body.misafe-kit .hub.static{background:#FFFFFF;border:1px solid var(--line);border-radius:var(--r-lg);padding:clamp(20px,3vw,32px);box-shadow:var(--sh-xs)} body.misafe-kit .hub.static+.hub.static{margin-top:24px} body.misafe-kit .hub-h{display:flex;gap:14px;align-items:flex-start} body.misafe-kit .hub-area{display:block;font-size:12px;font-weight:750;color:var(--muted);letter-spacing:.02em} body.misafe-kit .hub-h h3{font-size:24px;margin:2px 0 6px} body.misafe-kit .hub-h p{margin:0;color:var(--text)} body.misafe-kit .hub-g{display:grid;grid-template-columns:1.15fr 1fr;gap:26px;margin-top:22px} body.misafe-kit .hub-l{display:block;font-size:12.5px;font-weight:800;color:var(--muted);letter-spacing:.03em;margin-bottom:10px} body.misafe-kit .hub-watch{display:flex;flex-wrap:wrap;gap:8px} body.misafe-kit .hub-watch span{display:inline-flex;align-items:center;gap:8px;padding:7px 12px;border-radius:999px;background:var(--soft);border:1px solid var(--line);font-size:13px;font-weight:650;color:var(--ink)} body.misafe-kit .hub-watch span::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--charcoal);flex:none} body.misafe-kit .bg-soft .hub-watch span{background:#FFFFFF} body.misafe-kit .hub-red{display:flex;gap:12px;margin-top:18px;padding:14px 16px;border-radius:16px;background:var(--bad-bg);color:var(--ink);font-size:14.5px;line-height:1.5} body.misafe-kit .hub-red svg{width:18px;height:18px;color:var(--bad);flex:none;margin-top:2px} body.misafe-kit .hub-red b{display:block;margin-bottom:2px} body.misafe-kit .hub-red.how{background:var(--soft);border:1px solid var(--line)} body.misafe-kit .hub-red.how svg{color:var(--charcoal)} body.misafe-kit .hub .shot{margin-top:22px} body.misafe-kit .hub-refs{display:flex;gap:8px;align-items:flex-start;margin-top:16px;font-size:13px;color:var(--muted);line-height:1.5} body.misafe-kit .hub-refs svg{width:15px;height:15px;flex:none;margin-top:2px;color:var(--charcoal)} /* ===== readiness path ===== */ body.misafe-kit .path5{display:grid;grid-template-columns:repeat(5,1fr);gap:12px} body.misafe-kit .p5{background:var(--soft);border:1px solid var(--line);border-radius:18px;padding:18px;position:relative} body.misafe-kit .bg-soft .p5{background:#FFFFFF} body.misafe-kit .p5-n{display:inline-flex;width:30px;height:30px;border-radius:10px;background:var(--charcoal);color:#FFFFFF;font-weight:800;font-size:14px;align-items:center;justify-content:center;margin-bottom:10px} body.misafe-kit .p5 h3{font-size:17px;margin-bottom:4px} body.misafe-kit .p5 p{font-size:14px;margin:0} body.misafe-kit .p5-foot{display:flex;gap:10px;align-items:flex-start;font-size:14px;color:var(--muted);margin:14px 0 0} body.misafe-kit .p5-foot svg{width:16px;height:16px;flex:none;margin-top:2px;color:var(--charcoal)} body.misafe-kit .cpages{display:grid;gap:8px} body.misafe-kit .cpages>div{display:flex;gap:12px;align-items:center;padding:10px 12px;border:1px solid var(--line);border-radius:14px;background:#FFFFFF} body.misafe-kit .cpages b{display:block;font-size:14.5px;color:var(--ink)} body.misafe-kit .cpages small{display:block;font-size:12.5px;color:var(--muted)} /* ===== reports ===== */ body.misafe-kit .rparts{list-style:none;margin:20px 0 0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:8px 18px;counter-reset:none} body.misafe-kit .rparts li{display:flex;gap:10px;align-items:flex-start;font-size:14.5px;color:var(--ink);font-weight:600;line-height:1.4} body.misafe-kit .rparts li span{display:inline-flex;width:24px;height:24px;border-radius:8px;background:var(--tint);color:var(--charcoal);font-weight:800;font-size:12px;align-items:center;justify-content:center;flex:none} body.misafe-kit .mt64{margin-top:64px} body.misafe-kit .mt16{margin-top:16px} /* ===== AI Gate ===== */ body.misafe-kit .gate-rules{list-style:none;margin:0;padding:0;display:grid;gap:12px} body.misafe-kit .gate-rules li{display:flex;gap:14px;align-items:flex-start;background:var(--soft);border:1px solid var(--line);border-radius:18px;padding:16px 18px;font-size:15px;line-height:1.5} body.misafe-kit .gate-rules li>span{display:inline-flex;width:30px;height:30px;border-radius:10px;background:var(--charcoal);color:#FFFFFF;font-weight:800;font-size:14px;align-items:center;justify-content:center;flex:none} body.misafe-kit .gate-rules b{color:var(--ink)} /* ===== performance review vignette ===== */ body.misafe-kit .rv-band{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;margin-bottom:12px} body.misafe-kit .rv-band div{background:var(--soft);border-radius:12px;padding:8px 9px} body.misafe-kit .rv-band small{display:block;font-size:10px;color:var(--muted);font-weight:650} body.misafe-kit .rv-band b{display:block;font-size:12px;color:var(--ink);font-weight:800} @media (max-width:1100px){ body.misafe-kit .path5{grid-template-columns:repeat(3,1fr)} } @media (max-width:900px){ body.misafe-kit .mm{grid-template-columns:1fr} body.misafe-kit .mm-side{position:relative;top:0;max-height:none;display:flex;flex-wrap:nowrap;overflow-x:auto;gap:4px;padding:10px} body.misafe-kit .mm-g{display:none} body.misafe-kit .mm-i{width:auto;white-space:nowrap;flex:none} body.misafe-kit .hx-body{grid-template-columns:1fr} body.misafe-kit .hx-group.on{flex-direction:row;overflow-x:auto;padding-bottom:4px} body.misafe-kit .hx-hub{flex:none;white-space:nowrap} body.misafe-kit .hub-g{grid-template-columns:1fr} body.misafe-kit .rparts{grid-template-columns:1fr} body.misafe-kit .path5{grid-template-columns:1fr 1fr} } @media (max-width:560px){ body.misafe-kit .path5{grid-template-columns:1fr} } /* ===== system explorer (the real menu, categories open to hubs) ===== */ body.misafe-kit .sx .mm-side{position:sticky;top:92px;max-height:calc(100vh - 110px);overflow-y:auto;overscroll-behavior:contain} body.misafe-kit .sx .mm-cat .mm-chev{margin-left:auto;width:14px;height:14px;opacity:.6;transition:transform .2s} body.misafe-kit .sx .mm-cat.open .mm-chev{transform:rotate(180deg);opacity:1} body.misafe-kit .sx .mm-cat.open{color:#FFFFFF} body.misafe-kit .mm-sub{display:none;flex-direction:column;gap:2px;margin:2px 0 6px 14px;padding-left:12px;border-left:1px solid rgba(255,255,255,.16)} body.misafe-kit .mm-sub.open{display:flex} body.misafe-kit .mm-sub .mm-i{font-size:13px;padding:7px 10px;color:rgba(255,255,255,.78)} body.misafe-kit .mm-sub .mm-i svg{width:14px;height:14px} body.misafe-kit .sxp{display:none;background:#FFFFFF;border:1px solid var(--line);border-radius:var(--r-lg);padding:clamp(22px,3vw,34px);box-shadow:var(--sh-xs)} body.misafe-kit .sxp.on{display:block;animation:fadeup .25s var(--ease)} body.misafe-kit .sxp .card-head{margin:6px 0 10px} body.misafe-kit .sxp .card-head h3{font-size:24px} body.misafe-kit .sxp .lead-p{margin:0 0 14px} body.misafe-kit .sxp .shot{margin-top:22px} body.misafe-kit .sxp .hub.flat{display:block;padding:0;border:0;box-shadow:none;background:transparent} body.misafe-kit .sx-n{margin:4px 0 18px} body.misafe-kit .sx-hubs{display:grid;gap:10px} body.misafe-kit .sx-hub{display:flex;gap:14px;align-items:center;text-align:left;padding:14px 16px;border:1px solid var(--line);border-radius:16px;background:var(--soft);transition:background .15s,border-color .15s,box-shadow .15s} body.misafe-kit .sx-hub:hover,body.misafe-kit .sx-hub:focus-visible{background:#FFFFFF;border-color:var(--charcoal);box-shadow:var(--sh-xs);outline:none} body.misafe-kit .sx-hub>span{flex:1;min-width:0} body.misafe-kit .sx-hub b{display:block;color:var(--ink);font-size:15px} body.misafe-kit .sx-hub small{display:block;color:var(--muted);font-size:13.5px;line-height:1.45;margin-top:2px} body.misafe-kit .sx-hub>svg{width:16px;height:16px;color:var(--faint);flex:none} body.misafe-kit .hub-more{display:flex;flex-wrap:wrap;gap:10px 22px;margin-top:16px} body.misafe-kit .hub-more .arrow-link{font-size:14.5px} /* ===== library: the numbers are the tabs ===== */ body.misafe-kit .sstat.on{border-color:var(--charcoal);box-shadow:var(--sh)} body.misafe-kit .sstat.on .ss-t b{color:var(--ink)} body.misafe-kit .lx-now{font-weight:750;color:var(--ink);font-size:15px} /* ===== previous and next ===== */ body.misafe-kit .pn2{display:grid;grid-template-columns:1fr 1fr;gap:16px} body.misafe-kit .pn2-c{display:flex;flex-direction:column;gap:6px;padding:22px 24px;border:1px solid var(--line);border-radius:var(--r);background:#FFFFFF;text-decoration:none;color:var(--text);transition:border-color .2s,box-shadow .2s,transform .2s} body.misafe-kit .pn2-c:hover{border-color:var(--line-2);box-shadow:var(--sh);transform:translateY(-2px)} body.misafe-kit .pn2-c.next{text-align:right;align-items:flex-end} body.misafe-kit .pn2-k{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:800;color:var(--muted);letter-spacing:.03em} body.misafe-kit .pn2-k svg{width:14px;height:14px} body.misafe-kit .pn2-c.prev .pn2-k svg{transform:rotate(180deg)} body.misafe-kit .pn2-c b{font-size:18px;color:var(--ink)} body.misafe-kit .pn2-c small{font-size:14px;color:var(--muted);line-height:1.45} /* ===== keep reading inside the closing band ===== */ body.misafe-kit .cta-next{flex-basis:100%;display:flex;flex-wrap:wrap;align-items:center;gap:10px 12px;padding-top:22px;border-top:1px solid rgba(255,255,255,.14)} body.misafe-kit .cta-next span{font-size:12.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:rgba(255,255,255,.6);margin-right:6px} body.misafe-kit .cta-next a{display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border-radius:999px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18);color:#FFFFFF;font-weight:700;font-size:14px;text-decoration:none;transition:background .2s} body.misafe-kit .cta-next a:hover{background:rgba(255,255,255,.16)} body.misafe-kit .cta-next a svg{width:14px;height:14px} body.misafe-kit .hub-l.center{text-align:center;margin-bottom:16px} @media (max-width:900px){ body.misafe-kit .sx .mm-side{position:relative;top:0;max-height:none;display:block;overflow:visible} body.misafe-kit .sx .mm-g{display:block} body.misafe-kit .sx .mm-i{width:100%;white-space:normal} body.misafe-kit .pn2{grid-template-columns:1fr} body.misafe-kit .pn2-c.next{text-align:left;align-items:flex-start} } body.misafe-kit .faqp{display:none;margin-top:28px} body.misafe-kit .faqp.on{display:block;animation:fadeup .25s var(--ease)} /* ===== QA fixes 07/10/2026 ===== */ body.misafe-kit .pill.warn{color:#8F5B00} body.misafe-kit .pill.high{color:#A9480F} @media (min-width:901px){ body.misafe-kit .split.img-left>div:last-child{order:-1} } body.misafe-kit .sx-toggle{display:none} @media (max-width:900px){ body.misafe-kit .sx-toggle{display:flex;align-items:center;gap:10px;width:100%;padding:14px 16px;border-radius:18px;background:var(--charcoal);color:#FFFFFF;font-weight:700;font-size:15px;text-align:left} body.misafe-kit .sx-toggle svg{width:18px;height:18px;flex:none} body.misafe-kit .sx-toggle span{color:rgba(255,255,255,.7);font-weight:650} body.misafe-kit .sx-toggle b{flex:1;font-weight:800} body.misafe-kit .sx-toggle .sx-tchev{transition:transform .2s} body.misafe-kit .sx.menu-open .sx-toggle .sx-tchev{transform:rotate(180deg)} body.misafe-kit .sx .mm-side{display:none;margin-top:-10px;border-top-left-radius:0;border-top-right-radius:0} body.misafe-kit .sx.menu-open .mm-side{display:block} body.misafe-kit .sx{gap:14px} } @media (max-width:560px){ body.misafe-kit .ls-row,body.misafe-kit .ls-row.ls-left{grid-template-columns:repeat(2,1fr)} } /* director's note */ body.misafe-kit .dnote{margin:0 auto;max-width:880px;display:flex;gap:24px;align-items:flex-start} body.misafe-kit .dn-av{flex:none;width:64px;height:64px;border-radius:50%;background:var(--charcoal);color:#FFFFFF;font-weight:800;font-size:20px;display:flex;align-items:center;justify-content:center;letter-spacing:.02em} body.misafe-kit .dnote blockquote{margin:0} body.misafe-kit .dnote blockquote p{font-size:clamp(20px,2.1vw,26px);line-height:1.5;color:var(--ink);font-weight:600;letter-spacing:-.01em;margin:0} body.misafe-kit .dnote figcaption{display:flex;flex-direction:column;gap:2px;margin-top:16px} body.misafe-kit .dnote figcaption b{color:var(--ink);font-size:16px} body.misafe-kit .dnote figcaption span{color:var(--muted);font-size:14px} @media (max-width:560px){ body.misafe-kit .dnote{flex-direction:column;gap:14px} } /* ===== 07/10/2026 layout pass: white full-width heroes, wider page, one rule for product windows ===== */ :root,body.misafe-kit{--wrap:1440px;--gut:clamp(18px,4vw,56px)} body.misafe-kit .sec{padding:clamp(56px,6.5vw,96px) 0} body.misafe-kit .sec.tight{padding:clamp(44px,5vw,68px) 0} /* every hero: white, edge to edge, no grey band */ body.misafe-kit .hero,body.misafe-kit .hero.light,body.misafe-kit .hero.dark{margin:0;border-radius:0;background:#FFFFFF;color:var(--text);position:relative;overflow:hidden;padding:clamp(40px,5vw,76px) 0 clamp(44px,5.5vw,80px);border-bottom:1px solid var(--line)} body.misafe-kit .hero::before,body.misafe-kit .hero.light::before{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(66,81,90,.10) 1px,transparent 1.3px);background-size:26px 26px;-webkit-mask-image:radial-gradient(120% 90% at 85% 10%,#000 30%,rgba(0,0,0,0) 75%);mask-image:radial-gradient(120% 90% at 85% 10%,#000 30%,rgba(0,0,0,0) 75%);pointer-events:none} body.misafe-kit .hero>*{position:relative} body.misafe-kit .hero h1{font-size:clamp(36px,4vw,58px);line-height:1.05;max-width:16.5em} body.misafe-kit .hero .sub{font-size:clamp(17px,1.35vw,19.5px);max-width:640px;color:var(--muted)} body.misafe-kit .hero .note svg{background:var(--tint);color:var(--charcoal)} body.misafe-kit .hero-grid{grid-template-columns:1.1fr .9fr;gap:clamp(32px,4.5vw,80px)} body.misafe-kit .hf{color:var(--ink)} body.misafe-kit .hf svg{background:var(--tint);color:var(--charcoal)} body.misafe-kit .pathcard{border:1px solid var(--line);box-shadow:var(--sh-lg)} body.misafe-kit .pathcard h2{color:var(--ink);font-size:clamp(22px,2.2vw,28px);letter-spacing:-.02em} body.misafe-kit .hero.has-field::before{display:none} body.misafe-kit .hero>.hero-field{position:absolute;inset:0;z-index:0;width:100%;height:100%;pointer-events:none;-webkit-mask-image:linear-gradient(180deg,rgba(0,0,0,.55),#000 18%,#000 80%,rgba(0,0,0,0));mask-image:linear-gradient(180deg,rgba(0,0,0,.55),#000 18%,#000 80%,rgba(0,0,0,0))} body.misafe-kit .hero.has-field>.wrap{position:relative;z-index:1} /* home feature cards: equal cards, one background, windows the same width and position */ body.misafe-kit .bento{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px} body.misafe-kit .bt,body.misafe-kit .bt.w4,body.misafe-kit .bt.w5,body.misafe-kit .bt.w6,body.misafe-kit .bt.w7,body.misafe-kit .bt.w8{grid-column:auto;background:#FFFFFF;border:1px solid var(--line);box-shadow:var(--sh-xs);padding:28px 28px 28px;transition:transform .25s var(--ease),border-color .15s,box-shadow .15s} body.misafe-kit .bt:hover,body.misafe-kit .bt:focus-visible{transform:translateY(-3px);background:#FFFFFF;border-color:var(--orange);box-shadow:0 0 0 1px rgba(247,148,30,.25),0 0 14px rgba(247,148,30,.22);outline:none} body.misafe-kit .bt p{max-width:none;min-height:3.2em} body.misafe-kit .bt .bt-vis{flex:1;display:flex;margin-top:6px;padding-top:12px;justify-content:stretch} body.misafe-kit .bt .bt-vis .vg,body.misafe-kit .bt:hover .bt-vis .vg{width:100%;max-width:none;transform:none;box-shadow:var(--sh-sm);display:flex;flex-direction:column} body.misafe-kit .bt .bt-vis .vg>:last-child{margin-top:auto!important} body.misafe-kit .bt .bt-vis .vg>:nth-last-child(2){margin-bottom:12px} body.misafe-kit .bt .cal span{aspect-ratio:1.15;height:auto;min-height:34px;padding:6px 7px;font-size:11px} body.misafe-kit .bt .cal{gap:6px} body.misafe-kit .bt .cal-head{gap:6px;font-size:10.5px;margin-bottom:6px} body.misafe-kit .bt .cal-legend{margin-top:14px} body.misafe-kit .bt .vg{padding:24px} body.misafe-kit .bt .vg-top{margin-bottom:18px} body.misafe-kit .bt .vg-rows{gap:9px} body.misafe-kit .bt .vg-row{padding:11px 12px} body.misafe-kit .bt .inc-band{gap:9px;margin-bottom:16px} body.misafe-kit .bt .inc-band div{padding:10px 11px} body.misafe-kit .bt .track{margin-bottom:16px} body.misafe-kit .bt .ready{gap:22px} body.misafe-kit .bt .donut{width:130px;height:130px} body.misafe-kit .bt .donut div{width:96px;height:96px} body.misafe-kit .bt .std-rows{gap:11px} body.misafe-kit .bt .bt-vis .vg>:nth-last-child(2){margin-bottom:16px} body.misafe-kit .bg-soft .bt{background:#FFFFFF} /* grid columns never grow past the screen because of a long line inside a window */ body.misafe-kit .hero-grid>*,body.misafe-kit .split>*,body.misafe-kit .ipanel>*,body.misafe-kit .bento>*{min-width:0} /* one rule for product windows beside text: fill the column up to 600px, sit on the page's outer edge, centred against the text */ body.misafe-kit .hero-grid>.vg,body.misafe-kit .hero-grid>div>.vg,body.misafe-kit .split>div>.vg,body.misafe-kit .ipanel>div>.vg,body.misafe-kit .hero-grid>div>.docstack,body.misafe-kit .hero-grid>.docstack,body.misafe-kit .hero-grid>div>.tablet{width:100%;max-width:600px;margin-left:auto;margin-right:0} body.misafe-kit .hero-grid>div>.pw,body.misafe-kit .split>div>.pw,body.misafe-kit .ipanel>div>.pw{width:100%;max-width:620px;margin-left:auto;margin-right:0} body.misafe-kit .hero-grid>div>.pw-phone,body.misafe-kit .split>div>.pw-phone,body.misafe-kit .ipanel>div>.pw-phone{max-width:286px;margin-left:auto;margin-right:auto} body.misafe-kit .split.img-left>div>.pw{margin-left:0;margin-right:auto} body.misafe-kit .hero-grid>div>.docstack{height:420px} body.misafe-kit .split.img-left>div>.vg,body.misafe-kit .split.img-left>div>.tablet{margin-left:0;margin-right:auto} @media (max-width:1060px){ body.misafe-kit .bento{grid-template-columns:1fr} } @media (max-width:880px){ body.misafe-kit .hero-grid{grid-template-columns:1fr} body.misafe-kit .hero-grid>.vg,body.misafe-kit .hero-grid>div>.vg,body.misafe-kit .split>div>.vg,body.misafe-kit .ipanel>div>.vg,body.misafe-kit .hero-grid>div>.docstack,body.misafe-kit .hero-grid>.docstack,body.misafe-kit .hero-grid>div>.tablet{margin-left:auto;margin-right:auto} body.misafe-kit .hero-grid>div>.pw,body.misafe-kit .split>div>.pw,body.misafe-kit .ipanel>div>.pw{margin-left:auto;margin-right:auto} body.misafe-kit .hero h1{max-width:none} } /* ===== 07/10/2026 responsive hardening: every screen from 320px phones to 1920px+ desktops ===== */ html{max-width:100%;overflow-x:hidden} body.misafe-kit{max-width:100%;overflow-x:clip} body.misafe-kit #main,body.misafe-kit .wrap,body.misafe-kit section{min-width:0} body.misafe-kit img,body.misafe-kit svg,body.misafe-kit video,body.misafe-kit canvas{max-width:100%;height:auto} body.misafe-kit .vg{min-width:0} body.misafe-kit .vg,body.misafe-kit .card,body.misafe-kit .feat,body.misafe-kit .way,body.misafe-kit .bt,body.misafe-kit .ipanel,body.misafe-kit .pathcard,body.misafe-kit .form-box,body.misafe-kit .hub,body.misafe-kit .sxp{overflow-wrap:anywhere} body.misafe-kit .vg h5,body.misafe-kit .vg .t,body.misafe-kit .pill,body.misafe-kit .tag{overflow-wrap:normal} /* small grids inside product windows can shrink below their content so the window never pushes the page wider */ body.misafe-kit .inc-band,body.misafe-kit .track,body.misafe-kit .vg-kpis,body.misafe-kit .cal,body.misafe-kit .cal-head,body.misafe-kit .mx,body.misafe-kit .ready,body.misafe-kit .std-rows div{grid-template-columns:repeat(auto-fit,minmax(0,1fr))} body.misafe-kit .inc-band{grid-template-columns:repeat(4,minmax(0,1fr))} body.misafe-kit .track{grid-template-columns:repeat(4,minmax(0,1fr))} body.misafe-kit .vg-kpis{grid-template-columns:repeat(3,minmax(0,1fr))} body.misafe-kit .cal,body.misafe-kit .cal-head{grid-template-columns:repeat(7,minmax(0,1fr))} body.misafe-kit .mx{grid-template-columns:repeat(5,minmax(0,1fr))} body.misafe-kit .ready{grid-template-columns:118px minmax(0,1fr)} body.misafe-kit .std-rows div{grid-template-columns:minmax(0,1fr) 34px} body.misafe-kit .vg-top{flex-wrap:wrap} body.misafe-kit .g2,body.misafe-kit .g3,body.misafe-kit .g4,body.misafe-kit .steps,body.misafe-kit .capcols,body.misafe-kit .split,body.misafe-kit .hero-grid,body.misafe-kit .ipanel,body.misafe-kit .bento,body.misafe-kit .fgrid,body.misafe-kit .kv,body.misafe-kit .cpages,body.misafe-kit .path5,body.misafe-kit .flowlist,body.misafe-kit .gate-rules{min-width:0} body.misafe-kit .g2>*,body.misafe-kit .g3>*,body.misafe-kit .g4>*,body.misafe-kit .steps>*,body.misafe-kit .fgrid>*{min-width:0} body.misafe-kit .tbl-wrap{max-width:100%} body.misafe-kit .tbl-wrap table{min-width:520px} body.misafe-kit .utility .wrap{flex-wrap:nowrap;gap:12px} body.misafe-kit .utility .copy-inline span{white-space:nowrap} /* tablets and small laptops */ @media (max-width:1180px){ :root,body.misafe-kit{--gut:clamp(18px,3.5vw,36px)} } @media (max-width:1060px){ body.misafe-kit .hero h1{font-size:clamp(34px,5vw,48px)} body.misafe-kit .path5{grid-template-columns:repeat(3,1fr)} body.misafe-kit .cpages{grid-template-columns:1fr 1fr} } /* 23/10/2026: the rule above came after the phone rules for the five-step path, so phones kept three narrow columns (about 56px of text per line, nine lines for a short sentence, and a card past the screen edge) */ @media (max-width:880px){ body.misafe-kit .path5{grid-template-columns:1fr 1fr} } @media (max-width:560px){ body.misafe-kit .path5{grid-template-columns:1fr} } /* phones and small tablets */ @media (max-width:880px){ body.misafe-kit .hero{padding:clamp(28px,6vw,44px) 0 clamp(32px,6vw,48px)} body.misafe-kit .sec{padding:clamp(40px,7vw,64px) 0} body.misafe-kit .sec.tight{padding:clamp(32px,6vw,48px) 0} body.misafe-kit .hero-grid>*,body.misafe-kit .split>*,body.misafe-kit .ipanel>*{max-width:100%} body.misafe-kit .hero-grid>.vg,body.misafe-kit .hero-grid>div>.vg,body.misafe-kit .split>div>.vg,body.misafe-kit .ipanel>div>.vg,body.misafe-kit .hero-grid>div>.docstack,body.misafe-kit .hero-grid>.docstack,body.misafe-kit .hero-grid>div>.tablet{max-width:100%} body.misafe-kit .logos-band .ls-row{grid-template-columns:repeat(3,1fr)} body.misafe-kit .pathcard{box-shadow:var(--sh)} body.misafe-kit .bt{padding:22px} body.misafe-kit .bt p{min-height:0} body.misafe-kit .cpages{grid-template-columns:1fr} body.misafe-kit .flowlist li{grid-template-columns:40px 1fr} } @media (max-width:640px){ body.misafe-kit h1{font-size:clamp(30px,8.4vw,38px)} body.misafe-kit h2{font-size:clamp(25px,6.6vw,30px)} body.misafe-kit .hero h1{font-size:clamp(30px,8.4vw,38px)} body.misafe-kit .hero .sub,body.misafe-kit .lead p,body.misafe-kit .lead-p{font-size:16.5px} body.misafe-kit .sec-head{margin-bottom:26px} body.misafe-kit .eyebrow{font-size:12px} body.misafe-kit .btn{min-height:48px;padding:0 20px;font-size:14.5px} body.misafe-kit .btn-row{gap:10px} body.misafe-kit .hero-facts{gap:8px 16px} body.misafe-kit .hf{font-size:13.5px;white-space:normal} body.misafe-kit .utility{font-size:12.5px} body.misafe-kit .utility .wrap{min-height:36px} body.misafe-kit .u-left,body.misafe-kit .u-right{flex-wrap:nowrap;gap:12px} body.misafe-kit .utility a{white-space:nowrap} body.misafe-kit .utility .copy-inline.mail{display:none} body.misafe-kit .pc-paths{gap:8px} body.misafe-kit .path{padding:12px} body.misafe-kit .path-in{grid-template-columns:42px 1fr 34px;gap:10px} body.misafe-kit .path .pt b{font-size:15px} body.misafe-kit .path .pt small{font-size:12.5px} body.misafe-kit .bento{gap:14px} body.misafe-kit .bt{padding:18px} body.misafe-kit .bt .vg{padding:16px} body.misafe-kit .pw-pair .pw-phone+.pw-phone{display:none} body.misafe-kit .bt .bt-vis .pw-img{height:200px} body.misafe-kit .bt .cal span{min-height:30px;padding:4px 5px} body.misafe-kit .bt h3{font-size:19px} body.misafe-kit .bt p{font-size:14.5px} body.misafe-kit .vg{padding:14px;border-radius:14px;font-size:12.5px;overflow:hidden;max-width:100%} body.misafe-kit .inc-band{grid-template-columns:repeat(2,minmax(0,1fr))} body.misafe-kit .ready{grid-template-columns:96px minmax(0,1fr);gap:12px} body.misafe-kit .donut{width:96px;height:96px} body.misafe-kit .donut div{width:70px;height:70px} body.misafe-kit .donut b{font-size:20px} body.misafe-kit .scope-stats{grid-template-columns:1fr 1fr} body.misafe-kit .zone-in{flex-direction:column;align-items:flex-start} body.misafe-kit .zone-in h2{font-size:22px} body.misafe-kit .itabs{display:flex;width:100%;overflow-x:auto;flex-wrap:nowrap;border-radius:18px;-webkit-overflow-scrolling:touch;scrollbar-width:none} body.misafe-kit .itabs::-webkit-scrollbar{display:none} body.misafe-kit .itab{flex:none} body.misafe-kit .ipanel{padding:18px} body.misafe-kit .ipanel h3{font-size:22px} body.misafe-kit .cta .wrap{padding-left:var(--gut);padding-right:var(--gut)} body.misafe-kit .kv{padding:6px 14px} body.misafe-kit .fgrid{grid-template-columns:1fr 1fr;gap:24px} body.misafe-kit .fbottom{flex-direction:column;align-items:flex-start;gap:8px} body.misafe-kit .feat,body.misafe-kit .card{padding:18px} body.misafe-kit .way{padding:22px} body.misafe-kit .price-card .price{font-size:18px} body.misafe-kit .dnote blockquote p{font-size:16px} body.misafe-kit .prose{font-size:16px} body.misafe-kit .article{gap:28px} body.misafe-kit .sx-detail,body.misafe-kit .sxp{padding:14px} body.misafe-kit .lx-bar{flex-direction:column;align-items:stretch} body.misafe-kit .search{width:100%} } @media (max-width:400px){ :root,body.misafe-kit{--gut:14px} body.misafe-kit .hero h1{font-size:clamp(28px,8.6vw,34px)} body.misafe-kit .logos-band .ls-row,body.misafe-kit .ls-row,body.misafe-kit .ls-row.ls-left{grid-template-columns:repeat(2,1fr)} body.misafe-kit .scope-stats{grid-template-columns:1fr} body.misafe-kit .g2,body.misafe-kit .g3,body.misafe-kit .g4{gap:14px} body.misafe-kit .fgrid{grid-template-columns:1fr} body.misafe-kit .path-in{grid-template-columns:40px 1fr 32px} body.misafe-kit .pill{font-size:11px;padding:3px 8px} body.misafe-kit .inc-band div{padding:7px 8px} body.misafe-kit .track span{font-size:10px} } /* large and very large screens: keep lines readable, let the page breathe */ @media (min-width:1700px){ :root,body.misafe-kit{--wrap:1560px} body.misafe-kit{font-size:17px} body.misafe-kit .hero h1{font-size:clamp(48px,3.6vw,64px)} body.misafe-kit .hero .sub{max-width:680px;font-size:20px} body.misafe-kit .sec{padding:clamp(72px,6vw,112px) 0} } @media (min-width:2200px){ :root,body.misafe-kit{--wrap:1720px} } /* touch devices: larger tap targets, no hover-only affordances */ @media (hover:none) and (pointer:coarse){ body.misafe-kit .btn,body.misafe-kit .path,body.misafe-kit .itab,body.misafe-kit .fbtn,body.misafe-kit .copy-inline,body.misafe-kit .nav-link,body.misafe-kit .mm-i,body.misafe-kit .sx-hub,body.misafe-kit .lx-item,body.misafe-kit .faq summary{min-height:44px} body.misafe-kit .bt:hover,body.misafe-kit .card:hover,body.misafe-kit .path:hover{transform:none} } /* landscape phones: shorter heroes */ @media (max-height:480px) and (orientation:landscape){ body.misafe-kit .hero{padding:24px 0 28px} body.misafe-kit .mnav{top:68px} } /* ===== logo marquee (08/10/2026): scrolls right continuously, never stops for the visitor ===== */ body.misafe-kit .ls-marquee{width:100%;overflow:hidden;position:relative;-webkit-mask-image:linear-gradient(90deg,rgba(0,0,0,0),#000 8%,#000 92%,rgba(0,0,0,0));mask-image:linear-gradient(90deg,rgba(0,0,0,0),#000 8%,#000 92%,rgba(0,0,0,0))} body.misafe-kit .ls-track{display:flex;gap:14px;width:max-content;animation:ls-scroll 90s linear infinite;will-change:transform} body.misafe-kit .ls-track .logo-tile{flex:none;width:230px;height:84px} body.misafe-kit .ls-marquee:hover .ls-track,body.misafe-kit .ls-marquee:focus-within .ls-track{animation-play-state:paused} body.misafe-kit .ls-track .logo-tile:hover{transform:none;box-shadow:var(--sh-sm)} @keyframes ls-scroll{from{transform:translateX(0)}to{transform:translateX(-50%)}} @media (max-width:640px){ body.misafe-kit .ls-track .logo-tile{width:180px;height:72px} body.misafe-kit .ls-track{gap:10px;animation-duration:60s} } @media (prefers-reduced-motion:reduce){ body.misafe-kit .ls-track{animation:none;flex-wrap:wrap;width:100%;justify-content:center} body.misafe-kit .ls-track .logo-tile:nth-child(n+10){display:none} } /* ===== cookie banner and privacy page (08/10/2026) ===== */ body.misafe-kit .ck-row{display:flex;gap:12px;align-items:flex-start;padding:10px 12px;margin-top:8px;border:1px solid var(--line);border-radius:14px;background:var(--soft);cursor:pointer} body.misafe-kit .ck-row input{width:18px;height:18px;margin-top:2px;accent-color:var(--charcoal)} body.misafe-kit .ck-row b{display:block;font-size:14px;color:var(--ink)} body.misafe-kit .ck-row small{display:block;font-size:12.5px;color:var(--muted)} body.misafe-kit .flink{color:inherit;font:inherit;text-align:left;padding:0;cursor:pointer} body.misafe-kit .flink:hover{text-decoration:underline} body.misafe-kit .toc{margin:10px 0 0;padding-left:20px;font-size:14px;line-height:1.5;display:grid;gap:4px} body.misafe-kit .toc a{color:var(--text);text-decoration:none} body.misafe-kit .toc a:hover{color:var(--ink);text-decoration:underline} body.misafe-kit .prose ul{padding-left:22px;margin:0 0 18px} body.misafe-kit .prose li{margin-bottom:8px} body.misafe-kit .prose h2{scroll-margin-top:110px} /* ===== Start here panel: charcoal so it cannot be missed (08/10/2026) ===== */ body.misafe-kit .hero.light .pathcard{background:linear-gradient(160deg,var(--ch-700) 0%,var(--charcoal) 55%,var(--ch-800) 100%);border:1px solid rgba(255,255,255,.08);color:#FFFFFF;box-shadow:0 6px 16px rgba(31,40,46,.12),0 48px 90px -30px rgba(31,40,46,.6);position:relative;overflow:hidden;animation:pcIn .9s var(--ease) both} body.misafe-kit .hero.light .pathcard::after{content:"";position:absolute;width:420px;height:420px;right:-180px;top:-200px;border-radius:50%;background:radial-gradient(circle,rgba(247,148,30,.22),rgba(247,148,30,0) 62%);pointer-events:none} body.misafe-kit .hero.light .pathcard>*{position:relative;z-index:1} body.misafe-kit .hero.light .pc-k{color:var(--orange);font-size:13px;letter-spacing:.12em} body.misafe-kit .hero.light .pc-k::before{background:var(--orange);box-shadow:0 0 0 4px rgba(247,148,30,.22)} body.misafe-kit .hero.light .pathcard h2{color:#FFFFFF;font-size:clamp(24px,2.4vw,30px)} body.misafe-kit .hero.light .path{background:#FFFFFF;border:1px solid #FFFFFF;box-shadow:0 2px 6px rgba(0,0,0,.18)} body.misafe-kit .hero.light .path .disc{background:var(--charcoal);color:var(--orange)} body.misafe-kit .hero.light .path .pt b{color:var(--ink);font-size:17px} body.misafe-kit .hero.light .path .pt small{color:var(--text)} body.misafe-kit .hero.light .path .go{background:var(--tint);border-color:transparent;color:var(--charcoal)} body.misafe-kit .hero.light .path:hover,body.misafe-kit .hero.light .path:focus-visible{background:#FFFFFF;border-color:var(--orange);box-shadow:0 0 0 3px rgba(247,148,30,.25),0 14px 28px -12px rgba(0,0,0,.45);transform:translateY(-3px);outline:none} body.misafe-kit .hero.light .path:hover .go,body.misafe-kit .hero.light .path:focus-visible .go{background:var(--orange);color:#FFFFFF;border-color:var(--orange);transform:translateY(2px)} body.misafe-kit .hero.light .path:hover .disc{background:var(--orange);color:#FFFFFF} body.misafe-kit .hero.light .pc-foot{color:rgba(255,255,255,.78)} body.misafe-kit .hero.light .pc-foot a{color:#FFFFFF} @keyframes pcIn{from{opacity:0;transform:translateY(18px) scale(.985)}to{opacity:1;transform:none}} @media (prefers-reduced-motion:reduce){ body.misafe-kit .hero.light .pathcard{animation:none} } /* ===== Calendly embed on Book a demo (08/10/2026) ===== */ body.misafe-kit .cal-box .cal-in{padding:0} body.misafe-kit .cal-wrap{position:relative;width:100%;min-height:700px;background:#FFFFFF} body.misafe-kit .cal-frame{display:block;width:100%;height:700px;border:0} body.misafe-kit .cal-fallback{margin:0;padding:14px clamp(20px,3vw,32px);border-top:1px solid var(--line);font-size:13.5px;color:var(--muted)} body.misafe-kit .cal-fallback a{color:var(--ink);font-weight:750;text-underline-offset:3px} @media (max-width:640px){ body.misafe-kit .cal-wrap{min-height:960px} body.misafe-kit .cal-frame{height:960px} } /* ===== Pricing cards (08/10/2026): readable on the charcoal card, equal blocks, same divider line ===== */ body.misafe-kit .price-card{display:flex;flex-direction:column;gap:14px;border:1px solid var(--line);transition:border-color .2s,box-shadow .2s,transform .25s var(--ease)} body.misafe-kit .price-card:hover{border-color:var(--line-2);box-shadow:var(--sh-lg);transform:translateY(-3px)} body.misafe-kit .price-card h3{margin:0} body.misafe-kit .price-card .price{min-height:92px;display:flex;flex-direction:column;justify-content:flex-start} body.misafe-kit .price-card .ticks{gap:12px;margin-bottom:10px} body.misafe-kit .price-card .ticks li{color:var(--text)} body.misafe-kit .price-card.feature{background:var(--charcoal);border-color:var(--charcoal);color:rgba(255,255,255,.86)} body.misafe-kit .price-card.feature .tagline{color:var(--orange)} body.misafe-kit .price-card.feature .ticks li{color:#FFFFFF} body.misafe-kit .price-card.feature .ticks li::before{background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2342515A' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6.5 12.5l3.8 3.8 7.2-8'/%3E%3C/svg%3E") center/11px no-repeat #FFFFFF} body.misafe-kit .price-card.feature:hover{border-color:var(--orange);box-shadow:0 0 0 3px rgba(247,148,30,.22),var(--sh-lg)} body.misafe-kit .price-card .btn{margin-top:auto;align-self:flex-start;width:auto} /* ===== Book a time: topic pills, option cards, pricing card actions (08/10/2026) ===== */ body.misafe-kit .bt-pills{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:22px} body.misafe-kit .bt-lbl{font-size:13px;font-weight:750;color:var(--muted);margin-right:4px} body.misafe-kit .bt-pill{display:inline-flex;align-items:center;gap:8px;padding:10px 16px;border-radius:var(--pill);background:#FFFFFF;border:1px solid var(--line-2);color:var(--ink);font-size:14px;font-weight:700;text-decoration:none;transition:border-color .2s,box-shadow .2s,background .2s} body.misafe-kit .bt-pill svg{width:16px;height:16px;color:var(--charcoal)} body.misafe-kit .bt-pill:hover{border-color:var(--orange);box-shadow:0 0 8px rgba(247,148,30,.28)} body.misafe-kit .bt-pill.on{background:var(--charcoal);border-color:var(--charcoal);color:#FFFFFF} body.misafe-kit .bt-pill.on svg{color:var(--orange)} body.misafe-kit .book-opt{display:flex;flex-direction:column;gap:12px;text-decoration:none;color:inherit} body.misafe-kit .book-opt .more{margin-top:auto;display:inline-flex;align-items:center;gap:6px;font-weight:750;color:var(--ink);white-space:nowrap} body.misafe-kit .book-opt .more svg{width:16px;height:16px} body.misafe-kit .book-opt:hover{border-color:var(--orange);box-shadow:0 0 0 3px rgba(247,148,30,.2),var(--sh-lg);transform:translateY(-3px)} body.misafe-kit .price-card .pc-act{margin-top:auto;display:flex;flex-direction:column;align-items:flex-start;gap:10px} body.misafe-kit .price-card .pc-act .btn{margin-top:0} body.misafe-kit .price-card .pc-alt{font-size:14px;font-weight:700;color:var(--muted);text-underline-offset:3px} body.misafe-kit .price-card.feature .pc-alt{color:rgba(255,255,255,.8)} /* ===== Insights: the live blog index (08/10/2026) ===== */ body.misafe-kit .bl-series-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:28px} body.misafe-kit .bl-sc{display:grid;grid-template-columns:44px 1fr 18px;align-items:center;gap:14px;padding:16px 18px;background:#FFFFFF;border:1px solid var(--line);border-radius:var(--r-lg);text-decoration:none;color:inherit;transition:border-color .2s,box-shadow .2s,transform .25s var(--ease)} body.misafe-kit .bl-sc b{display:block;font-size:15.5px;color:var(--ink)} body.misafe-kit .bl-sc div>span{display:block;font-size:13px;color:var(--muted);line-height:1.45;margin-top:2px} body.misafe-kit .bl-sc .disc{width:44px;height:44px;border-radius:14px} body.misafe-kit .bl-sc .disc svg{width:22px;height:22px} body.misafe-kit .bl-sc>svg{width:18px;height:18px;color:var(--charcoal)} body.misafe-kit .bl-sc:hover{border-color:var(--orange);box-shadow:0 0 0 3px rgba(247,148,30,.2),var(--sh);transform:translateY(-2px)} body.misafe-kit .bl-tools{display:flex;flex-wrap:wrap;gap:14px;align-items:center;justify-content:space-between;margin-bottom:22px} body.misafe-kit .bl-tools .fbtn small{font-weight:700;font-size:12px;opacity:.7;margin-left:4px} body.misafe-kit .bl-tools-r{display:flex;flex-wrap:wrap;gap:10px;align-items:center} body.misafe-kit .bl-search{display:inline-flex;align-items:center;gap:8px;padding:0 14px;height:42px;border:1.5px solid var(--line);border-radius:var(--pill);background:#FFFFFF;min-width:240px} body.misafe-kit .bl-search svg{width:16px;height:16px;color:var(--muted)} body.misafe-kit .bl-search input{border:0;outline:0;font:inherit;font-size:14px;width:100%;background:transparent;color:var(--ink)} body.misafe-kit .bl-search:focus-within{border-color:var(--charcoal)} body.misafe-kit .bl-sel{height:42px;padding:0 36px 0 14px;border:1.5px solid var(--line);border-radius:var(--pill);background:#FFFFFF url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2342515A' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") right 12px center/14px no-repeat;font:inherit;font-size:14px;font-weight:700;color:var(--ink);appearance:none;-webkit-appearance:none} body.misafe-kit .bl-count{font-size:13.5px;color:var(--muted);margin:0 0 16px} body.misafe-kit .bl-count .txt-link{margin-left:6px} body.misafe-kit .bl-grid{align-items:stretch} body.misafe-kit .bl-year{grid-column:1/-1;font-size:13px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin:14px 0 -4px;display:flex;align-items:center;gap:12px} body.misafe-kit .bl-year::after{content:"";flex:1;height:1px;background:var(--line)} body.misafe-kit .bl-card .body{gap:9px} body.misafe-kit .bl-card h3{font-size:17px;line-height:1.35} body.misafe-kit .bl-meta{display:flex;flex-wrap:wrap;align-items:center;gap:8px} body.misafe-kit .bl-series{font-size:11.5px;font-weight:800;padding:4px 9px;border-radius:var(--pill);background:var(--charcoal);color:#FFFFFF;letter-spacing:.02em} body.misafe-kit .bl-series.im{background:var(--ink)} body.misafe-kit .bl-series.gd{background:var(--tint);color:var(--charcoal)} body.misafe-kit .bl-topic{font-size:12px;font-weight:700;color:var(--muted)} body.misafe-kit .bl-date{margin-left:auto;font-size:12px;color:var(--faint);font-weight:600} body.misafe-kit .bl-inds{display:flex;flex-wrap:wrap;gap:6px} body.misafe-kit .bl-inds span{font-size:11.5px;font-weight:700;color:var(--muted);background:var(--soft);border:1px solid var(--line);padding:3px 9px;border-radius:var(--pill)} body.misafe-kit .bl-more{display:flex;justify-content:center;margin-top:28px} body.misafe-kit .bl-empty{font-size:15px;color:var(--muted)} @media (max-width:880px){ body.misafe-kit .bl-series-cards{grid-template-columns:1fr} body.misafe-kit .bl-tools{flex-direction:column;align-items:stretch} body.misafe-kit .bl-search{min-width:0;flex:1} } /* ===== WhatsApp and social links (08/10/2026) ===== */ body.misafe-kit .wa-inline{text-decoration:none} body.misafe-kit .social{display:flex;flex-wrap:wrap;gap:8px} body.misafe-kit .social a{width:38px;height:38px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--line-2);color:var(--charcoal);background:#FFFFFF;transition:border-color .2s,color .2s,background .2s,transform .2s var(--ease)} body.misafe-kit .social a svg{width:18px;height:18px} body.misafe-kit .social a:hover{border-color:var(--orange);color:var(--orange);transform:translateY(-2px)} body.misafe-kit .site-footer .fsocial{margin-top:18px} body.misafe-kit .site-footer .fsocial a{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.18);color:#FFFFFF} body.misafe-kit .site-footer .fsocial a:hover{border-color:var(--orange);color:var(--orange);background:rgba(247,148,30,.12)} body.misafe-kit .site-footer .fsocial-b{display:none} body.misafe-kit .site-footer .fcontact .wa-inline{color:#FFFFFF} body.misafe-kit .kv .csocial a{width:34px;height:34px} @media (max-width:880px){ body.misafe-kit .site-footer .fsocial{justify-content:flex-start} } /* ===== At a glance panels (About hero, Retainer) replacing photo placeholders (08/10/2026) ===== */ body.misafe-kit .glance{background:linear-gradient(160deg,var(--ch-700) 0%,var(--charcoal) 55%,var(--ch-800) 100%);border:1px solid rgba(255,255,255,.08);border-radius:var(--r-lg);padding:clamp(20px,2.4vw,30px);color:#FFFFFF;box-shadow:0 6px 16px rgba(31,40,46,.12),0 48px 90px -30px rgba(31,40,46,.6);position:relative;overflow:hidden} body.misafe-kit .glance::after{content:"";position:absolute;width:420px;height:420px;right:-180px;top:-200px;border-radius:50%;background:radial-gradient(circle,rgba(247,148,30,.22),rgba(247,148,30,0) 62%);pointer-events:none} body.misafe-kit .glance>*{position:relative;z-index:1} body.misafe-kit .glance .pc-k{color:var(--orange);font-size:13px;letter-spacing:.12em} body.misafe-kit .glance .pc-k::before{background:var(--orange);box-shadow:0 0 0 4px rgba(247,148,30,.22)} body.misafe-kit .glance h2{color:#FFFFFF;font-size:clamp(22px,2.2vw,28px);letter-spacing:-.02em;margin:0} body.misafe-kit .glance-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px} body.misafe-kit .gl{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);border-radius:16px;padding:14px;display:flex;align-items:flex-start;gap:12px} body.misafe-kit .gl .disc{flex:0 0 40px;width:40px;height:40px;background:#FFFFFF;color:var(--orange);margin:0} body.misafe-kit .gl .gl-t{display:flex;flex-direction:column;gap:2px;min-width:0} body.misafe-kit .gl b{font-size:14.5px;color:#FFFFFF;line-height:1.3} body.misafe-kit .gl span{font-size:12.5px;color:rgba(255,255,255,.78);line-height:1.45} body.misafe-kit .glance.light{background:#FFFFFF;color:var(--ink);border-color:var(--line);box-shadow:var(--sh-lg)} body.misafe-kit .glance.light::after{display:none} body.misafe-kit .glance.light h2{color:var(--ink)} body.misafe-kit .glance.light .gl{background:var(--soft);border-color:var(--line)} body.misafe-kit .glance.light .gl .disc{background:var(--charcoal)} body.misafe-kit .glance.light .gl b{color:var(--ink)} body.misafe-kit .glance.light .gl span{color:var(--muted)} @media (max-width:640px){ body.misafe-kit .glance-grid{grid-template-columns:1fr} } /* ===== Why MiSAFE is different: balanced layout (08/10/2026) ===== */ body.misafe-kit .story-top{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(28px,4vw,64px);align-items:start} body.misafe-kit .story-pts{margin-top:40px} body.misafe-kit .dark .story-pts .feat{height:100%} @media (max-width:1060px){ body.misafe-kit .story-top{grid-template-columns:1fr} body.misafe-kit .story-pts{margin-top:32px} } body.misafe-kit .person .person-av{width:64px;height:64px;font-size:22px;margin-bottom:16px} /* ---------- 2.3: one size for every page-top screen, and "See it working" rows (owner, 19/10/2026) ---------- */ body.misafe-kit .hero-grid.hg-shot{grid-template-columns:minmax(0,.94fr) minmax(0,1.06fr)} body.misafe-kit .hero-grid>div>.pw.hero-frame,body.misafe-kit .hero-frame{width:100%;max-width:680px;margin-left:auto;margin-right:0} body.misafe-kit .hero-frame .pw-btn,body.misafe-kit .hero-frame .pw-img{aspect-ratio:4/3;overflow:hidden;background:#F6F7F8} body.misafe-kit .hero-frame .pw-btn img,body.misafe-kit .hero-frame .pw-img img{width:100%;height:100%;object-fit:cover;object-position:left top} body.misafe-kit .spot{display:grid;gap:clamp(40px,6vw,72px);margin-top:8px} body.misafe-kit .spot-row{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);gap:clamp(28px,4vw,56px);align-items:center} body.misafe-kit .spot-row.rev{grid-template-columns:minmax(0,.75fr) minmax(0,1.25fr)} body.misafe-kit .spot-row.rev .spot-vis{order:2} body.misafe-kit .spot-vis .pw{max-width:none;width:100%} body.misafe-kit .spot-n{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:12px;background:var(--charcoal);color:#FFFFFF;font-weight:800;font-size:15px;font-variant-numeric:tabular-nums;margin-bottom:14px} body.misafe-kit .spot-txt h3{font-size:clamp(21px,2vw,26px);margin-bottom:10px} body.misafe-kit .spot-txt p{margin:0;font-size:16.5px} @media(max-width:880px){ body.misafe-kit .hero-grid.hg-shot{grid-template-columns:1fr} body.misafe-kit .hero-grid>div>.pw.hero-frame,body.misafe-kit .hero-frame{margin-left:auto;margin-right:auto} body.misafe-kit .spot-row,body.misafe-kit .spot-row.rev{grid-template-columns:1fr} body.misafe-kit .spot-row.rev .spot-vis{order:0} } /* ===== Kevin Hanna review, 20/10/2026, agreed by Micah (mockup 2.8) ===== 1. Labels above headings are plain text: no pill behind them and no glowing dot in front ("These pills on the site and the little glowing dots are a telltale sign"). 2. Screenshots sit inside their frame with a margin ("add a bit of a margin to the screenshots"), so no screen runs into the frame's edge. Phone and tablet frames already have their own bezel. 3. The published testimonial card on the schools page. No coloured edge line (house rule: no orange lines). */ body.misafe-kit .eyebrow{display:block;width:auto;max-width:100%;padding:0;border-radius:0;background:none;color:var(--charcoal);font-size:12.5px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;margin-bottom:14px;line-height:1.4} body.misafe-kit .eyebrow::before{content:none;display:none} body.misafe-kit .dark .eyebrow{background:none;color:rgba(255,255,255,.78)} body.misafe-kit .pc-k::before,body.misafe-kit .hero.light .pc-k::before{content:none;display:none} body.misafe-kit .pw:not(.pw-phone):not(.pw-tablet){padding:16px;background:#FFFFFF} body.misafe-kit .pw:not(.pw-phone):not(.pw-tablet)>.pw-btn,body.misafe-kit .pw:not(.pw-phone):not(.pw-tablet)>.pw-img{border-radius:6px;overflow:hidden;background:#FFFFFF} body.misafe-kit .shot-btn{padding:16px} body.misafe-kit .shot-btn img{border-radius:6px} body.misafe-kit .testimonial{margin:0;max-width:900px;background:#FFFFFF;border:1px solid var(--line);border-radius:var(--r-lg);padding:clamp(24px,3.2vw,44px);box-shadow:var(--sh-sm)} body.misafe-kit .testimonial .tm-text{margin:0;font-size:clamp(18px,1.6vw,21px);line-height:1.6;color:var(--ink);font-weight:600;letter-spacing:-.005em} body.misafe-kit .testimonial .tm-who{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 14px;margin-top:22px;padding-top:18px;border-top:1px solid var(--line);font-size:14.5px;color:var(--muted)} body.misafe-kit .testimonial .tm-name{font-weight:800;color:var(--ink)} body.misafe-kit .testimonial .tm-about{flex-basis:100%;font-size:13.5px} body.misafe-kit .testimonial .txt-link{display:inline-flex;align-items:center;gap:6px;font-weight:750} body.misafe-kit .testimonial .txt-link svg{width:15px;height:15px} @media (max-width:640px){ body.misafe-kit .pw:not(.pw-phone):not(.pw-tablet),body.misafe-kit .shot-btn{padding:9px} } /* ===== Videos (owner direction 21/10/2026): video posts in the Blog, the Videos page cards and the click-to-play player in a video post. Nothing loads from YouTube until the visitor presses play. ===== */ body.misafe-kit .bl-series.vd{background:var(--tint);color:var(--charcoal)} body.misafe-kit .vid-grid>.form-note{grid-column:1/-1;margin:0} body.misafe-kit .vid-card{padding:16px 16px 20px} body.misafe-kit .vid-card .bl-meta{margin:2px 4px 0} body.misafe-kit .vid-card h3,body.misafe-kit .vid-card p,body.misafe-kit .vid-card .more{margin-left:4px;margin-right:4px} body.misafe-kit .vid-thumb{position:relative;aspect-ratio:16/9;border-radius:12px;overflow:hidden;background:var(--charcoal);margin-bottom:14px} body.misafe-kit .vid-thumb img{width:100%;height:100%;max-width:none;object-fit:cover;display:block} body.misafe-kit .vid-play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:56px;height:56px;border-radius:50%;background:rgba(31,40,46,.84);color:#FFFFFF;display:flex;align-items:center;justify-content:center;transition:background .2s,transform .25s var(--ease)} body.misafe-kit .vid-play svg{width:24px;height:24px;margin-left:3px} body.misafe-kit .vid-card:hover .vid-play,body.misafe-kit .ms-video-btn:hover .vid-play,body.misafe-kit .ms-video-btn:focus-visible .vid-play{background:var(--orange);color:var(--charcoal);transform:translate(-50%,-50%) scale(1.06)} body.misafe-kit .ms-video{position:relative;aspect-ratio:16/9;border-radius:14px;overflow:hidden;background:var(--charcoal);margin:0 0 10px} body.misafe-kit .ms-video-btn{appearance:none;border:0;padding:0;margin:0;background:none;cursor:pointer;display:block;width:100%;height:100%;position:relative;color:inherit;font:inherit} body.misafe-kit .ms-video-btn img{width:100%;height:100%;max-width:none;object-fit:cover;display:block} body.misafe-kit .ms-video-btn .vid-play{width:76px;height:76px} body.misafe-kit .ms-video-btn .vid-play svg{width:32px;height:32px;margin-left:4px} body.misafe-kit .ms-video-title{position:absolute;left:0;right:0;bottom:0;padding:28px 20px 16px;background:linear-gradient(transparent,rgba(31,40,46,.82));color:#FFFFFF;font-weight:700;font-size:16px;text-align:left} body.misafe-kit .ms-video iframe{position:absolute;inset:0;width:100%;height:100%;border:0} body.misafe-kit .ms-video-note{font-size:12.5px;color:var(--muted);margin:0 0 24px} /* ===== mockup inline styles, as classes (the converter gives blocks these classes; they win like inline styles do) ===== */ body.misafe-kit .mss-53896af7{margin-top:0!important} body.misafe-kit .mss-b5ef888d{font-size:22px!important} body.misafe-kit .mss-a18ac805{margin-top:4px!important} body.misafe-kit .mss-16d9de5c{padding:32px!important;gap:16px!important} body.misafe-kit .mss-7c43527a{background:#FFFFFF!important;border:1px solid var(--line)!important} body.misafe-kit .mss-4a909ea7{margin-top:18px!important} body.misafe-kit .mss-b6e0017f{font-size:24px!important;margin:10px 0 8px!important} body.misafe-kit .mss-08fbdf40{display:flex!important;justify-content:center!important;position:relative!important} body.misafe-kit .mss-be254048{margin-bottom:18px!important} body.misafe-kit .mss-40116834{padding:32px!important;flex-direction:row!important;flex-wrap:wrap!important;align-items:center!important;justify-content:space-between!important;gap:20px!important} body.misafe-kit .mss-9e3c4ccb{margin-top:6px!important} body.misafe-kit .mss-002535c2{margin-top:12px!important} body.misafe-kit .mss-bf83cf1c{font-size:18px!important} body.misafe-kit .mss-10efeeeb{max-width:900px!important} body.misafe-kit .mss-1a694ab8{margin-left:auto!important;margin-right:auto!important} body.misafe-kit .mss-c1aa9d44{max-width:1040px!important} body.misafe-kit .mss-9628acb1{font-size:32px!important} body.misafe-kit .mss-1d2118d8{margin:32px 0 10px!important} body.misafe-kit .mss-3dd9b4c5{font-size:15px!important} body.misafe-kit .mss-5d38b659{margin:8px 0 22px!important} body.misafe-kit .mss-6e862d79{font-size:26px!important;margin:44px 0 14px!important} body.misafe-kit .mss-b0043ef4{margin-top:16px!important} body.misafe-kit .mss-52200a6b{font-size:clamp(34px,4.3vw,56px)!important} body.misafe-kit .mss-4b089cab{margin:20px 0 0!important;font-size:15px!important} body.misafe-kit .mss-47c857f6{margin-top:28px!important} body.misafe-kit .mss-e4b0d373{max-width:1100px!important} body.misafe-kit .mss-a33aad11{font-size:clamp(32px,3.8vw,52px)!important} body.misafe-kit .mss-daae847f{justify-content:space-between!important} body.misafe-kit .mss-cd220878{padding:4px 10px!important} /* ===================================================================================================================== MiSAFE Site Kit 1.0: WordPress layer (not in the mockup). Copyright MiSAFE Solutions Pty Ltd. GPL-2.0-or-later. Everything above this line is the mockup 2.0 stylesheet (style.css) unchanged, apart from the mockup-only parts removed by kit-build (mockup notes, mockup cookie banner, booking simulation, mockup flags). This layer only resets what WordPress adds around core blocks, styles things WordPress produces that the mockup never had (pagination, aligned images, form plugins), and keeps the same colour rules: orange only for the small dot, icons, the hover glow and the focus ring. ===================================================================================================================== */ /* core block wrappers carry no styling of their own inside kit pages. Zero specificity (:where), so every mockup rule wins */ body.misafe-kit :where(.misafe-kit figure){margin:0} body.misafe-kit :where(.misafe-kit .wp-block-image img){box-sizing:border-box;height:auto;max-width:100%;vertical-align:bottom} body.misafe-kit :where(.misafe-kit .wp-element-caption){font-size:13px;color:var(--muted);margin-top:10px;line-height:1.45} body.misafe-kit h2.sr,body.misafe-kit .screen-reader-text{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0} body.misafe-kit p:empty:not(.disc){display:none} /* bold text written in the editor (strong) reads the same as the mockup's b */ body.misafe-kit .gate-rules strong,body.misafe-kit .callout strong,body.misafe-kit .cpages strong,body.misafe-kit .gl-t strong,body.misafe-kit .ilist strong,body.misafe-kit .hub-red strong,body.misafe-kit .comply-row strong,body.misafe-kit .prose strong,body.misafe-kit .kv strong,body.misafe-kit .flowlist strong,body.misafe-kit .p5 strong{color:var(--ink)} body.misafe-kit .dark .callout strong,body.misafe-kit .card-dark strong{color:#FFFFFF} /* text in the article and policy templates. The mockup rules for .prose stay in charge; these only cover what an editor can add that the mockup never had (numbered lists, plain links, editor images, quotes, plain tables, embeds) */ body.misafe-kit .prose h2[id],body.misafe-kit .prose h3[id],body.misafe-kit section[id],body.misafe-kit .sec[id]{scroll-margin-top:110px} body.misafe-kit :where(.prose) ol:not([class]){padding-left:22px;margin:0 0 18px} body.misafe-kit .prose a:not([class]){font-weight:750;color:var(--ink);text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1.5px;text-decoration-color:var(--line-2);transition:text-decoration-color .2s} body.misafe-kit .prose a:not([class]):hover{text-decoration-color:var(--charcoal)} body.misafe-kit .prose .wp-block-image,body.misafe-kit .prose .wp-block-embed,body.misafe-kit .prose .wp-block-video{margin:28px 0} body.misafe-kit .prose .wp-block-image img{border-radius:var(--r-sm);height:auto} body.misafe-kit .prose .wp-block-quote{margin:28px 0;padding:18px 22px;background:var(--soft);border-radius:var(--r);color:var(--ink);font-weight:600} body.misafe-kit .prose .wp-block-table{margin:8px 0 22px;border:1px solid var(--line);border-radius:var(--r);overflow:auto;background:#FFFFFF} body.misafe-kit .prose .wp-block-table table{width:100%;border-collapse:collapse;font-size:15px} body.misafe-kit .prose .wp-block-table th{background:var(--charcoal);color:#FFFFFF;text-align:left;font-weight:700;font-size:12px;letter-spacing:.06em;text-transform:uppercase;padding:14px 18px} body.misafe-kit .prose .wp-block-table td{padding:14px 18px;border-top:1px solid var(--line);vertical-align:top;color:var(--ink)} body.misafe-kit .prose > .meta-line:last-child{margin-top:32px} body.misafe-kit .photo.ms-photo{display:block;aspect-ratio:auto;padding:0} body.misafe-kit .photo.ms-photo img{display:block;width:100%;height:100%;object-fit:cover} body.misafe-kit .post-card .photo.ms-photo{aspect-ratio:16/9} /* table columns holding document numbers, references or URLs (the mockup's td.id) */ body.misafe-kit .doc-table.id-first td:first-child{font-family:var(--mono);font-size:13px;color:var(--ink)} body.misafe-kit .doc-table.id-first.nowrap td:first-child{white-space:nowrap} body.misafe-kit .doc-table.id-c2 td:nth-child(2),body.misafe-kit .doc-table.id-c3 td:nth-child(3),body.misafe-kit .doc-table.id-c4 td:nth-child(4){font-family:var(--mono);font-size:13px;white-space:nowrap;color:var(--ink)} body.misafe-kit .doc-table.wrap-c2 td:nth-child(2),body.misafe-kit .doc-table.wrap-c3 td:nth-child(3),body.misafe-kit .doc-table.wrap-c4 td:nth-child(4){white-space:normal} /* aligned images and embeds added in the editor */ body.misafe-kit .alignleft{float:left;margin:6px 24px 16px 0} body.misafe-kit .alignright{float:right;margin:6px 0 16px 24px} body.misafe-kit .aligncenter{margin-left:auto;margin-right:auto;text-align:center} body.misafe-kit .wp-block-embed__wrapper{position:relative} body.misafe-kit .wp-embed-aspect-16-9 .wp-block-embed__wrapper::before{content:"";display:block;padding-top:56.25%} body.misafe-kit .wp-has-aspect-ratio .wp-block-embed__wrapper iframe{position:absolute;inset:0;width:100%;height:100%;border:0;border-radius:var(--r)} /* tabs built from blocks: the tab list is added when the page is drawn */ body.misafe-kit [data-ms-tabs] .itab:focus-visible{outline:3px solid rgba(247,148,30,.6);outline-offset:3px} /* archive pagination */ body.misafe-kit .ms-pagination{margin-top:36px} body.misafe-kit .ms-pagination .nav-links{display:flex;flex-wrap:wrap;gap:8px;justify-content:center} body.misafe-kit .ms-pagination .page-numbers{display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;padding:0 16px;border:1.5px solid var(--line);border-radius:var(--pill);background:#FFFFFF;color:var(--ink);font-weight:750;font-size:14.5px;text-decoration:none;transition:border-color .15s} body.misafe-kit .ms-pagination .page-numbers:hover{border-color:var(--charcoal)} body.misafe-kit .ms-pagination .page-numbers.current{background:var(--charcoal);border-color:var(--charcoal);color:#FFFFFF} /* Fluent Forms, drawn like the mockup forms (build guide 9.1). The kit's form files (forms/*.json) put the mockup's own classes on the form ("form" or "inline-form"), each field ("field", "row2") and the button ("btn btn-primary"), so the mockup rules above draw them; these rules only undo Fluent Forms' own layout and map its states (required star, error, consent box, thank-you message). Fluent Forms' default look is not loaded on kit pages. */ body.misafe-kit .fluentform form.ms-ff fieldset{display:contents} body.misafe-kit .fluentform form.ms-ff legend.ff_screen_reader_title{position:absolute!important} body.misafe-kit .fluentform form.ms-ff .ff-el-group{margin:0} body.misafe-kit .fluentform form.ms-ff .ff-t-container.row2{display:grid;grid-template-columns:1fr 1fr;gap:16px;width:100%} body.misafe-kit .fluentform form.ms-ff .ff-t-container.row2>.ff-t-cell{padding:0;min-width:0} body.misafe-kit .fluentform form.ms-ff .ff-el-input--label{display:block;margin:0} body.misafe-kit .fluentform form.ms-ff .ff-el-input--label label{margin-bottom:7px} body.misafe-kit .fluentform form.ms-ff .ff-el-input--label.ff-el-is-required.asterisk-right label:after{content:" *";margin-left:0;color:var(--bad)} body.misafe-kit .fluentform form.ms-ff .ff-el-form-control::placeholder{color:#757575} body.misafe-kit .fluentform form.ms-ff .ff-el-form-control{display:inline-block;vertical-align:baseline} body.misafe-kit .fluentform form.ms-ff .field .error.text-danger{display:block;font-size:13px;color:var(--bad);margin-top:6px;font-weight:650} body.misafe-kit .fluentform form.ms-ff .field.ff-el-is-error input,body.misafe-kit .fluentform form.ms-ff .field.ff-el-is-error select,body.misafe-kit .fluentform form.ms-ff .field.ff-el-is-error textarea{border-color:var(--bad);background:#FFFFFF} body.misafe-kit .fluentform form.ms-ff .ff-el-tc{display:block;margin:0} body.misafe-kit .fluentform form.ms-ff .ff-el-tc label.ff_tc_label{display:block;font-size:14px;font-weight:500;color:var(--text);margin:0 0 7px} body.misafe-kit .fluentform form.ms-ff .ff-el-tc label.ff_tc_label>span,body.misafe-kit .fluentform form.ms-ff .ff-el-tc label.ff_tc_label>div{display:inline;padding:0!important;width:auto} body.misafe-kit .fluentform form.ms-ff .ff-el-tc label.ff_tc_label>div{margin-left:-.174em} body.misafe-kit .fluentform form.ms-ff .field input[type=checkbox]{width:20px;height:20px;min-height:0;padding:0;margin:2px 0 0;border:0;position:static;top:0;vertical-align:baseline;accent-color:var(--charcoal)} body.misafe-kit .fluentform form.ms-ff .ff-el-is-error .ff-el-form-check-label,body.misafe-kit .fluentform form.ms-ff .ff-el-is-error .ff-el-form-check-label a.txt-link{color:inherit} body.misafe-kit .fluentform form.ms-ff .ff-el-is-error .ff-el-form-check-label a.txt-link{color:var(--ink)} body.misafe-kit .fluentform form.ms-ff .ms-ff-label{font-weight:700;font-size:14px;color:var(--ink);margin:0 0 7px} body.misafe-kit .fluentform form.ms-ff .ff_submit_btn_wrapper{margin:0} body.misafe-kit .fluentform form.ms-ff .ms-btn-block{width:100%} body.misafe-kit .fluentform form.ms-ff .ff-btn.ff-working{opacity:.8} @media (max-width:640px){ body.misafe-kit .fluentform form.ms-ff .ff-t-container.row2{grid-template-columns:1fr} } body.misafe-kit .fluentform .ff-message-success{border-radius:var(--r);background:#FFFFFF;border:1px solid var(--line);padding:26px;margin:0;box-shadow:none;color:var(--text)} body.misafe-kit .fluentform .ff-message-success p{margin:0 0 16px} body.misafe-kit .fluentform .ff-message-success p.ok{display:flex;align-items:center;gap:12px;font-weight:800;font-size:21px;color:var(--ink);margin-bottom:10px} body.misafe-kit .fluentform .ff-message-success p.ok::before{content:"";width:36px;height:36px;border-radius:50%;flex:none;background:var(--ok) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFFFFF' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.2 4.2L19 7'/%3E%3C/svg%3E") center/17px no-repeat} /* forms built by hand in Fluent Forms (without the kit's files) still pick up the kit look */ body.misafe-kit .fluentform form:not(.ms-ff) .ff-el-input--label label{display:block;font-weight:700;font-size:14px;color:var(--ink);margin-bottom:7px} body.misafe-kit .fluentform form:not(.ms-ff) .ff-el-form-control{width:100%;min-height:50px;padding:12px 15px;border:1.5px solid var(--line);border-radius:14px;background:var(--soft);font:inherit;font-size:16px;color:var(--ink);box-shadow:none} body.misafe-kit .fluentform form:not(.ms-ff) .ff-el-form-control:focus{outline:none;border-color:var(--charcoal);background:#FFFFFF;box-shadow:0 0 0 4px rgba(66,81,90,.12)} body.misafe-kit .fluentform form:not(.ms-ff) .ff-btn-submit{display:inline-flex;align-items:center;justify-content:center;min-height:50px;padding:0 24px;border:0;border-radius:var(--pill);background:var(--orange);color:var(--ink);font:750 15px/1.15 var(--font);cursor:pointer} /* old page content (classic editor or Divi text) drawn by the Standard template, before or without the import */ body.misafe-kit .ms-legacy .prose img{max-width:100%;height:auto} body.misafe-kit .ms-legacy .prose :is(h1,h2,h3,h4){color:var(--ink);line-height:1.25;margin:32px 0 12px} body.misafe-kit .ms-legacy .prose h1{font-size:clamp(30px,3.4vw,44px)} body.misafe-kit .ms-legacy .prose :is(ul,ol){padding-left:22px;margin:0 0 18px} body.misafe-kit .ms-legacy .prose a{color:var(--ink);font-weight:650} body.misafe-kit .ms-legacy .prose table{width:100%;border-collapse:collapse;margin:0 0 18px} body.misafe-kit .ms-legacy .prose :is(td,th){border:1px solid var(--line);padding:8px 10px;text-align:left} body.misafe-kit .ms-legacy .prose iframe{max-width:100%} /* WPConsent (owner decision 18/10/2026: the site's cookie tool) drawn like the mockup's #cookie-banner: white card, 22px corners, the large soft shadow, the kit font, the primary button orange with dark text and the other two white with dark text, the orange focus ring. WPConsent draws its banner and preferences panel inside a shadow root, so only its documented custom properties on #wpconsent-container reach them; its blocking logic is not touched. */ body.misafe-kit #wpconsent-container{ --wpconsent-background:#FFFFFF;--wpconsent-text:#4A5860; --wpconsent-accept-bg:#F7941E;--wpconsent-accept-color:#1F282E; --wpconsent-cancel-bg:#FFFFFF;--wpconsent-cancel-color:#1F282E; --wpconsent-preferences-bg:#FFFFFF;--wpconsent-preferences-color:#1F282E; --wpconsent-outline-color:#E3E7EA; --wpconsent-border-radius:22px;--wpconsent-shadow:0 4px 12px rgba(31,40,46,.07),0 40px 80px -32px rgba(31,40,46,.42); --wpconsent-padding:18px 20px;--wpconsent-min-width:min(1040px,calc(100vw - 24px)); --wpconsent-font-size:14.5px;--wpconsent-line-height:1.5; --wpconsent-close-color:#1F282E; --wpconsent-focus-outline-color:#F7941E;--wpconsent-focus-outline-width:3px;--wpconsent-focus-outline-offset:2px; --wpconsent-z-index:200; font-family:var(--font)} @media (max-width:640px){ body.misafe-kit #wpconsent-container{--wpconsent-padding:14px;--wpconsent-min-width:calc(100vw - 16px)} } body.misafe-kit #wpconsent-container::part(wpconsent-settings-button){background-color:#FFFFFF!important;color:#1F282E;border-radius:999px;box-shadow:0 4px 12px rgba(31,40,46,.07),0 24px 46px -24px rgba(31,40,46,.30)} /* 1.1.1: WPConsent's banner ignores the custom properties above on staging, so the mockup's #cookie-banner card is drawn through WPConsent's exposed ::part() hooks instead: centred white card (max 1040px, 12px off the edges), 22px corners, large soft shadow, kit font, pill buttons in the mockup's order (Accept all primary, then Essential only and Choose as ghost buttons). !important only where WPConsent writes inline styles from its settings. */ body.misafe-kit #wpconsent-container::part(wpconsent-banner){left:12px;right:12px;bottom:12px;width:auto;max-width:1040px;margin:0 auto;box-sizing:border-box;background:#FFFFFF!important;border:1px solid #E3E7EA;border-radius:22px;box-shadow:0 4px 12px rgba(31,40,46,.07),0 40px 80px -32px rgba(31,40,46,.42);padding:18px 20px;gap:20px;align-items:center;justify-content:space-between;flex-wrap:wrap;font-family:'Plus Jakarta Sans',Arial,Helvetica,sans-serif} body.misafe-kit #wpconsent-container::part(wpconsent-banner-body){flex:1 1 420px;min-width:0;padding:0;font-size:14.5px;line-height:1.5;color:#4A5860!important;text-align:left} body.misafe-kit #wpconsent-container::part(wpconsent-banner-footer){display:flex;flex-direction:row;flex:0 0 auto;gap:10px;flex-wrap:wrap;align-items:center;width:auto} body.misafe-kit #wpconsent-container::part(wpconsent-button-accept),body.misafe-kit #wpconsent-container::part(wpconsent-button-cancel),body.misafe-kit #wpconsent-container::part(wpconsent-button-preferences){display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 18px;border-radius:999px;font:750 14px/1.15 'Plus Jakarta Sans',Arial,Helvetica,sans-serif;letter-spacing:-.005em;white-space:nowrap;cursor:pointer;width:auto;flex:0 0 auto;margin:0;background:#FFFFFF!important;color:#1F282E!important;border:1.5px solid #D5DCE0!important;box-shadow:none;transition:transform .2s cubic-bezier(.2,.7,.2,1),box-shadow .2s cubic-bezier(.2,.7,.2,1),border-color .2s} body.misafe-kit #wpconsent-container::part(wpconsent-button-accept){order:1;background:#F7941E!important;border-color:transparent!important;box-shadow:0 10px 22px -12px rgba(247,148,30,.9)} body.misafe-kit #wpconsent-container::part(wpconsent-button-cancel){order:2} body.misafe-kit #wpconsent-container::part(wpconsent-button-preferences){order:3} body.misafe-kit #wpconsent-container::part(wpconsent-button-accept):hover,body.misafe-kit #wpconsent-container::part(wpconsent-button-cancel):hover,body.misafe-kit #wpconsent-container::part(wpconsent-button-preferences):hover{transform:translateY(-2px)} body.misafe-kit #wpconsent-container::part(wpconsent-button-cancel):hover,body.misafe-kit #wpconsent-container::part(wpconsent-button-preferences):hover{border-color:#42515A!important} body.misafe-kit #wpconsent-container::part(wpconsent-button-accept):focus-visible,body.misafe-kit #wpconsent-container::part(wpconsent-button-cancel):focus-visible,body.misafe-kit #wpconsent-container::part(wpconsent-button-preferences):focus-visible{outline:3px solid #F7941E;outline-offset:2px} body.misafe-kit #wpconsent-container::part(wpconsent-preferences-content){border-radius:22px;font-family:'Plus Jakarta Sans',Arial,Helvetica,sans-serif} @media (max-width:640px){ body.misafe-kit #wpconsent-container::part(wpconsent-banner){left:8px;right:8px;bottom:8px;padding:14px} body.misafe-kit #wpconsent-container::part(wpconsent-banner-footer){width:100%} body.misafe-kit #wpconsent-container::part(wpconsent-button-accept),body.misafe-kit #wpconsent-container::part(wpconsent-button-cancel),body.misafe-kit #wpconsent-container::part(wpconsent-button-preferences){flex:1 1 auto} } /* 1.5.2 (owner, 23/10/2026, from a phone): below 768px wide WPConsent stacks its banner as a column, where the text's 420px flex basis became its height and left a large empty gap above the buttons. There the text now takes its own height. The banner sits above the floating On this page and assistant buttons (z-index 140 and 160), and they step aside while it shows (site.js sets body.ck-open while #wpconsent-container is displayed). */ @media (max-width:767px){ body.misafe-kit #wpconsent-container::part(wpconsent-banner-body){flex:0 0 auto} } body.misafe-kit #wpconsent-container::part(wpconsent-banner){z-index:200} body.misafe-kit.ck-open .pn-fab,body.misafe-kit.ck-open .msc-launch{display:none} /* Complianz banner (fallback only): rounded like the mockup banner; the assistant steps aside while it is open */ body.misafe-kit .cmplz-cookiebanner{border-radius:22px!important;box-shadow:var(--sh-lg)!important;font-family:var(--font)!important} body.misafe-kit:has(.cmplz-cookiebanner.cmplz-show) .msc-launch{display:none} /* Yoast breadcrumbs, if placed by hand, look like the kit breadcrumbs */ body.misafe-kit .yoast-breadcrumbs,body.misafe-kit #breadcrumbs{font-size:13.5px;margin-bottom:22px;font-weight:600;color:var(--muted)} body.misafe-kit .yoast-breadcrumbs a,body.misafe-kit #breadcrumbs a{color:var(--ink);text-decoration:none} /* the header "Book a demo" button keeps its own size whatever other plugins' stylesheets say about buttons, links or flex items (a stretched button was seen once on staging, where several form and popup plugins load CSS) */ body.misafe-kit .site-header .wrap>.header-cta{flex:0 0 auto!important;width:auto!important;max-width:max-content;min-width:0;align-self:center;white-space:nowrap;float:none;margin:0} /* keep the WordPress admin bar from covering the sticky header */ body.misafe-kit.admin-bar .site-header{top:32px} @media (max-width:782px){ body.misafe-kit.admin-bar .site-header{top:46px} } @media (max-width:600px){ body.misafe-kit.admin-bar .site-header{top:0} } /* 1.1.2: anything the kit script hides with the hidden attribute stays hidden, whatever display a class gives it (the Insights grid cards are .card, display:flex) */ body.misafe-kit [hidden]{display:none!important}