body{margin:0;background:var(--paper)}
/* only the page frame fills the screen; editor previews wrap each block in .hp and size to it */
body>.hp{min-height:100vh}

/* skip link: hidden until focused */
.skip-link{position:absolute;left:0;top:0;z-index:100;background:var(--ink);color:var(--paper);padding:12px 18px;font-family:var(--display);font-weight:500;font-size:14px;text-decoration:none;transform:translateY(-120%)}
.skip-link:focus{transform:none;outline:2px solid var(--green);outline-offset:-4px}
/* footer link columns sit in a nav that does not take part in the grid */
.hp footer .footer-nav{display:contents}

/* Header. The topnav sits above the megamenu scrim (28) and the phone menu (29). */
.hp .topnav{z-index:30}
.hp .topnav .brand{display:flex;align-items:center;border:0;background:none}
.hp .topnav .brand img{display:block;width:auto;height:40px}
.hp .topnav>.btn{padding:9px 15px;font-size:13.5px}
.hp .topnav .l{align-self:stretch;align-items:center}
.hp .topnav .l>a,.hp .topnav .nav-item>a{color:inherit;text-decoration:none}
.hp .topnav .l>a,.hp .topnav .nav-item>a{position:relative;padding:6px 0}
.hp .topnav .l>a:hover,.hp .topnav .l>a.on,.hp .topnav .nav-item>a:hover,.hp .topnav .nav-item>a.on,.hp .topnav .nav-item.open>a{color:var(--ink)}
/* Nav indicator: a short green bar grows from the left on hover and focus, and stays on the current section. */
.hp .topnav .l>a::after,.hp .topnav .nav-item>a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;border-radius:2px;background:var(--green);transform:scaleX(0);transform-origin:0 50%;transition:transform .35s cubic-bezier(.2,.8,.2,1)}
.hp .topnav .l>a:hover::after,.hp .topnav .l>a:focus-visible::after,.hp .topnav .l>a.on::after,.hp .topnav .nav-item>a:hover::after,.hp .topnav .nav-item>a:focus-visible::after,.hp .topnav .nav-item>a.on::after,.hp .topnav .nav-item.open>a::after{transform:scaleX(1)}
.hp .topnav .l a:focus-visible,.hp .topnav .mega-toggle:focus-visible{outline:2px solid var(--green);outline-offset:4px;border-radius:4px}
.hp footer .footer-legal{display:flex;gap:14px}
.hp footer .footer-legal a{display:inline;padding:0;color:#ffffff99}

/* Megamenu (desktop, assets/src/megamenu.js). Each trigger is the section link plus a chevron
   disclosure button; the panel spans the header under the topnav. */
.hp .topnav .nav-item{display:flex;align-items:center;gap:3px;align-self:stretch;margin:-16px 0;padding:16px 0}
.hp .mega-toggle{display:inline-grid;place-items:center;width:24px;height:24px;margin-right:-6px;padding:0;border:0;border-radius:6px;background:transparent;color:#0B0B0B99;cursor:pointer;transition:color .2s,background .2s}
.hp .mega-toggle:hover,.hp .nav-item.open .mega-toggle{color:var(--ink);background:#0B0B0B0d}
.hp .mega-toggle .chev{width:12px;height:12px;transition:transform .3s cubic-bezier(.2,.8,.2,1)}
.hp .mega-toggle[aria-expanded="true"] .chev{transform:rotate(180deg)}
.hp .mega{position:absolute;left:0;right:0;top:100%;margin-top:1px;background-color:#fff;border-radius:0 0 22px 22px;box-shadow:0 34px 60px -34px #0B0B0B59,0 10px 24px -18px #0B0B0B26;font-family:var(--body);font-size:14px;line-height:1.45;color:var(--ink);cursor:auto}
.hp .mega[hidden]{display:none}
.hp .mega-in{max-width:1160px;margin:0 auto;padding:26px 32px 22px;display:grid;gap:30px}
.hp .mega-in--services{grid-template-columns:minmax(0,1fr) 300px}
.hp .mega-cols{display:grid;grid-template-columns:1fr 1fr;gap:16px 26px}
.hp .mega-cols .mega-group:nth-child(3):last-child{grid-column:2;grid-row:1/span 2}
.hp .mega-h{margin:0 0 6px 12px;font-family:var(--display);font-weight:500;font-size:12.5px;letter-spacing:.02em;color:var(--muted)}
.hp .mega-group ul{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.hp .mega-group li{margin:0;padding:0}
.hp .mega-link{display:flex;align-items:flex-start;gap:12px;padding:10px 12px;border-radius:12px;color:var(--ink);text-decoration:none;transition:background .2s}
.hp .mega-link .ic{flex:none;width:20px;height:20px;margin-top:1px;color:var(--green);transition:transform .3s cubic-bezier(.2,.8,.2,1)}
.hp .mega-link:hover,.hp .mega-link:focus-visible{background:#39B54A14}
.hp .mega-link:hover .ic,.hp .mega-link:focus-visible .ic{transform:translateX(2px)}
.hp .mega-link:focus-visible,.hp .mega-prod:focus-visible,.hp .mega a:focus-visible{outline:2px solid var(--green);outline-offset:2px}
.hp .mega-link[aria-current] .mega-n{color:var(--deep-text)}
.hp .mega-t{display:flex;flex-direction:column;gap:1px;min-width:0}
.hp .mega-n{font-family:var(--display);font-weight:500;font-size:15px;letter-spacing:-.01em}
.hp .mega-d{font-size:13px;color:var(--muted);text-wrap:pretty}
.hp .mega-foot{display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap;margin-top:14px;padding:14px 12px 0;border-top:1px solid var(--line)}
.hp .mega-areas{display:flex;align-items:center;flex-wrap:wrap;gap:6px 14px;font-size:13.5px}
.hp .mega-areas .ic{width:16px;height:16px;color:var(--green);margin-right:-6px}
.hp .mega-areas-h{font-family:var(--display);font-weight:500;color:var(--muted)}
.hp .mega-areas a{color:var(--ink);text-decoration:none}
.hp .mega-areas a[aria-current]{color:var(--deep-text)}
.hp .mega-all,.hp .mega-note-t{display:inline-flex;align-items:center;gap:7px;font-family:var(--display);font-weight:500;font-size:14px;color:var(--ink);text-decoration:none}
.hp .mega-note-t{font-family:var(--body);font-weight:400;font-size:13.5px;color:var(--muted)}
.hp .mega-all .ic{width:15px;height:15px;color:var(--green);transition:transform .3s cubic-bezier(.2,.8,.2,1)}
.hp .mega-all:hover .ic,.hp .mega-all:focus-visible .ic{transform:translateX(3px)}
.hp .mega-all:hover{color:var(--deep-text)}
/* Free Website Audit card */
.hp .mega-feat{display:flex;flex-direction:column;align-items:flex-start;gap:6px;padding:16px;border:1px solid var(--line);border-radius:18px;background:var(--paper)}
.hp .mega-win{align-self:stretch;margin-bottom:8px;background:#fff;border:1px solid var(--line);border-radius:12px;overflow:hidden;box-shadow:0 14px 30px -22px #0B0B0B59}
.hp .mega-bar{display:flex;align-items:center;gap:5px;padding:7px 10px;border-bottom:1px solid var(--line);font-size:11px;color:var(--muted)}
.hp .mega-bar i{width:7px;height:7px;border-radius:50%;background:#0B0B0B1f}
.hp .mega-bar span{margin-left:6px}
.hp .mega-viz{display:flex;align-items:center;gap:14px;padding:12px 12px 6px}
.hp .mega-score{position:relative;flex:none;width:58px;height:58px}
.hp .mega-score svg{width:100%;height:100%;transform:rotate(-90deg)}
.hp .mega-score circle{fill:none;stroke-width:6}
.hp .mega-score .trk{stroke:#0B0B0B12}
.hp .mega-score .val{stroke:var(--green);stroke-linecap:round;stroke-dasharray:100;stroke-dashoffset:8}
.hp .mega-score b{position:absolute;inset:0;display:grid;place-items:center;font-family:var(--display);font-weight:500;font-size:18px}
.hp .mega-trend{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px;font-size:11.5px;color:var(--muted)}
.hp .mega-trend svg{width:100%;height:36px;overflow:visible}
.hp .mega-trend .mega-ln{fill:none;stroke:var(--green);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:0;vector-effect:non-scaling-stroke}
.hp .mega-trend .mega-area{fill:#39B54A1a}
.hp .mega-checks{list-style:none;margin:0;padding:4px 12px 12px;display:grid;gap:4px;font-size:12px;color:#0B0B0Bcc}
.hp .mega-checks li{display:flex;align-items:center;gap:7px;margin:0}
.hp .mega-checks .ic{width:13px;height:13px;color:var(--green)}
.hp .mega-feat-t{margin:0;font-family:var(--display);font-weight:500;font-size:18px;letter-spacing:-.02em}
.hp .mega-feat-d{margin:0 0 8px;font-size:13.5px;color:var(--muted)}
.hp .mega-feat .btn{padding:10px 15px;font-size:13.5px}
/* Software cards */
.hp .mega-in--software{gap:0}
.hp .mega-in--software .mega-foot{margin-top:20px}
.hp .mega-prods{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.hp .mega-prod{display:flex;flex-direction:column;gap:12px;padding:16px;border:1px solid var(--line);border-radius:18px;background:var(--paper);color:var(--ink);text-decoration:none;transition:border-color .25s,box-shadow .25s,transform .3s cubic-bezier(.2,.8,.2,1)}
.hp .mega-prod:hover,.hp .mega-prod:focus-visible{border-color:#0B0B0B33;box-shadow:0 20px 40px -30px #0B0B0B66;transform:translateY(-2px)}
.hp .mega-prod-h{display:flex;align-items:center;gap:10px}
.hp .mega-prod-h>.ic{flex:none;width:22px;height:22px;color:var(--green)}
.hp .mega-prod-h>span{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 8px}
.hp .mega-prod .mega-n{font-size:17px}
.hp .mega-k{font-size:12.5px;color:var(--muted)}
.hp .mega-prod .mega-d{font-size:13.5px}
.hp .mega-prev{display:grid;gap:8px;min-height:98px;box-sizing:border-box;padding:12px;background:#fff;border:1px solid var(--line);border-radius:12px;box-shadow:0 14px 30px -24px #0B0B0B59;font-size:11.5px}
.hp .mega-prev--signal{grid-template-columns:1.3fr 1fr;align-items:center}
.hp .mega-serp{display:flex;flex-direction:column;gap:3px;min-width:0}
.hp .mega-serp .su{color:var(--muted);font-size:10.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hp .mega-serp .st{color:#1a0dab;font-size:12.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hp .mega-serp .sl{height:5px;border-radius:3px;background:#0B0B0B14}
.hp .mega-serp .sl.sh{width:70%}
.hp .mega-rows{display:grid;gap:5px}
.hp .mega-rows span{display:flex;justify-content:space-between;gap:6px;padding:5px 8px;border:1px solid var(--line);border-radius:7px}
.hp .mega-rows em{font-style:normal;color:#0B0B0Bcc}
.hp .mega-rows b{font-weight:500;color:var(--deep-text)}
.hp .mega-prev--access{grid-template-columns:1.2fr 1fr;align-items:center}
.hp .mega-note{display:flex;align-items:center;gap:8px;padding:7px 9px;border:1px solid var(--line);border-radius:9px}
.hp .mega-note .ic{flex:none;width:16px;height:16px;color:var(--green)}
.hp .mega-note span{display:flex;flex-direction:column;min-width:0}
.hp .mega-note b{font-weight:500}
.hp .mega-note em{font-style:normal;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hp .mega-tasks{display:grid;gap:7px}
.hp .mega-tasks .mega-task-h{height:auto;background:none;border-radius:0;color:var(--muted);font-size:11px}
.hp .mega-tasks span{height:7px;border-radius:4px;background:#0B0B0B0f;overflow:hidden}
.hp .mega-tasks i{display:block;height:100%;width:var(--w);border-radius:4px;background:var(--green);transform-origin:0 50%}
/* The page under an open panel dims a little. */
.mega-scrim{position:fixed;inset:0;z-index:28;background:#0B0B0B66;opacity:0;visibility:hidden;transition:opacity .25s,visibility 0s .25s}
.mega-scrim.on{opacity:1;visibility:visible;transition:opacity .25s}
.hp .topnav.mega-open{background:var(--paper)}
@media (max-width:900px){.hp .mega,.mega-scrim{display:none!important}}

/* Phone menu (assets/src/menu.js): a fixed full-screen overlay under the header. */
.menu-toggle{display:none;width:44px;height:44px;padding:0;border:0;border-radius:10px;background:transparent;cursor:pointer;flex-direction:column;align-items:center;justify-content:center;gap:5px}
.menu-toggle span{display:block;width:22px;height:2px;background:var(--ink);border-radius:2px;transition:transform .3s cubic-bezier(.2,.8,.2,1),opacity .2s}
.menu-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.menu-toggle[aria-expanded="true"] span:nth-child(2){opacity:0;transform:scaleX(.3)}
.menu-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.menu-toggle:focus-visible{outline:2px solid var(--green);outline-offset:2px}
.menu-panel[hidden]{display:none}
.hp .menu-panel{position:fixed;inset:0;z-index:29;display:flex;flex-direction:column;background-color:var(--paper);overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;padding:calc(var(--um-nav-h,69px) + 10px) calc(20px + env(safe-area-inset-right)) calc(26px + env(safe-area-inset-bottom)) calc(20px + env(safe-area-inset-left))}
.hp .menu-panel[hidden]{display:none}
.hp .mm-in{display:flex;flex-direction:column;gap:30px;flex:1;width:100%;max-width:560px;margin:0 auto}
.hp .mm-list{list-style:none;margin:0;padding:0}
.hp .mm-row{margin:0;padding:0;border-bottom:1px solid var(--line)}
.hp .mm-head{display:flex;align-items:center;justify-content:space-between;gap:12px}
.hp .mm-link{display:block;flex:1;padding:14px 0;font-family:var(--display);font-weight:500;font-size:30px;line-height:1.15;letter-spacing:-.03em;color:var(--ink);text-decoration:none}
.hp .mm-link.on{color:var(--deep-text)}
.hp .mm-link:focus-visible,.hp .mm-acc:focus-visible,.hp .menu-panel a:focus-visible{outline:2px solid var(--green);outline-offset:3px;border-radius:6px}
.hp .mm-acc{flex:none;display:grid;place-items:center;width:44px;height:44px;padding:0;border:1px solid #0B0B0B26;border-radius:50%;background:#fff;color:var(--ink);cursor:pointer}
.hp .mm-acc .ic{width:16px;height:16px;transition:transform .3s cubic-bezier(.2,.8,.2,1)}
.hp .mm-acc[aria-expanded="true"]{background:var(--green);border-color:var(--green)}
.hp .mm-acc[aria-expanded="true"] .ic{transform:rotate(45deg)}
.hp .mm-sub{overflow:hidden}
.hp .mm-sub[hidden]{display:none}
.hp .mm-sub .mega-group{padding:2px 0 10px}
.hp .mm-sub .mega-group:first-child{padding-top:4px}
.hp .mm-sub .mega-h{margin:4px 0 2px}
.hp .mm-sub .mega-group ul{gap:0}
.hp .mm-sub .mega-link{padding:9px 0;border-radius:8px;align-items:center}
.hp .mm-sub .mega-link:hover{background:none}
.hp .mm-sub .mega-n{font-size:17px}
.hp .mm-sub .mega-areas{padding:6px 0 18px}
.hp .mm-foot{display:flex;flex-direction:column;gap:18px;margin-top:auto}
.hp .mm-foot .btn{justify-content:center;padding:15px 18px;font-size:16px}
.hp .mm-contact{display:flex;flex-wrap:wrap;gap:10px 22px;font-size:15px}
.hp .mm-contact a{display:inline-flex;align-items:center;gap:8px;min-height:44px;color:var(--ink);text-decoration:none}
.hp .mm-contact .ic{width:16px;height:16px;color:var(--green)}
/* While the phone menu is open the header is fixed on top of it and the page cannot scroll. */
html.menu-open,html.menu-open body{overflow:hidden}
html.menu-open .hp{padding-top:var(--um-nav-h,69px)}
html.menu-open .hp .topnav{position:fixed;top:0;left:0;right:0;background:var(--paper)}
/* header CTA: the short label shows only on small phones (Ruling L); the link's aria-label keeps the full name */
.hp .topnav>.btn .cta-short{display:none}
@media (max-width:900px){
  .menu-toggle{display:flex}
  .hp .topnav{padding:12px 20px;gap:12px}
  .hp .topnav .brand,.menu-toggle{flex-shrink:0}
  .hp .topnav .brand img{height:34px}
  .hp .topnav>.btn{white-space:nowrap;margin-left:auto}
}
@media (max-width:420px){
  .hp .topnav>.btn .cta-long{display:none}
  .hp .topnav>.btn .cta-short{display:inline}
}
@media (max-width:374px){
  .hp .topnav{padding:12px 16px}
  .hp .topnav .brand img{height:30px}
  .hp .mm-link{font-size:27px}
}
@media (max-width:340px){
  .hp .topnav{padding:12px 14px;gap:10px}
  .hp .topnav>.btn{padding:9px 12px}
  .hp .topnav>.btn svg{display:none}
}
@media (min-width:901px){
  .hp .menu-panel{display:none}
}
@media (prefers-reduced-motion:reduce){
  .menu-toggle span,.hp .mega-toggle .chev,.hp .mm-acc .ic,.hp .topnav .l>a::after,.hp .topnav .nav-item>a::after,.mega-scrim,.hp .mega-prod,.hp .mega-link .ic{transition:none!important}
}

/* Back to top (assets/src/to-top.js): appears after 600px, with a ring that follows the scroll. */
.hp .to-top{position:fixed;z-index:25;right:calc(22px + env(safe-area-inset-right));bottom:calc(22px + env(safe-area-inset-bottom));display:grid;place-items:center;width:50px;height:50px;padding:0;border:1px solid var(--line);border-radius:50%;background:#fffffff2;color:var(--ink);box-shadow:0 14px 30px -16px #0B0B0B59;cursor:pointer;opacity:0;scale:.8;visibility:hidden;transition:opacity .3s,scale .35s cubic-bezier(.2,.8,.2,1),visibility 0s .35s,background .2s}
.hp .to-top.show{opacity:1;scale:1;visibility:visible;transition:opacity .3s,scale .35s cubic-bezier(.2,.8,.2,1),background .2s}
.hp .to-top:hover{background:#fff}
.hp .to-top:focus-visible{outline:2px solid var(--green);outline-offset:3px}
.hp .to-top svg{grid-area:1/1}
.hp .to-top .ring{width:50px;height:50px;transform:rotate(-90deg)}
.hp .to-top .ring circle{fill:none;stroke-width:2}
.hp .to-top .ring .val{stroke:var(--green);stroke-linecap:round;stroke-dasharray:100;stroke-dashoffset:100}
.hp .to-top .ic{width:18px;height:18px;transform:rotate(-90deg);color:var(--ink)}
html.menu-open .hp .to-top{display:none}
@media (max-width:900px){
  .hp .to-top{right:calc(14px + env(safe-area-inset-right));bottom:calc(16px + env(safe-area-inset-bottom));width:44px;height:44px}
  .hp .to-top .ring{width:44px;height:44px}
  /* out of the way while someone types in a form */
  body:has(input:focus,textarea:focus,select:focus) .hp .to-top{opacity:0;visibility:hidden}
}
@media (prefers-reduced-motion:reduce){.hp .to-top,.hp .to-top.show{transition:none}}
@media print{.hp .to-top,.mega-scrim{display:none!important}}

/* breadcrumbs (Unrivaled Signal markup in the mockup look) */
.hp .crumbs nav{all:unset;display:block;margin-bottom:16px}
.hp .crumbs .usig-breadcrumbs__list{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:8px;margin:0;padding:0;list-style:none;font-size:13.5px;color:#0B0B0B99}
.hp .crumbs .usig-breadcrumbs__item{display:inline-flex;align-items:center;gap:8px;margin:0;padding:0;list-style:none}
.hp .crumbs .usig-breadcrumbs__item::marker{content:""}
.hp .crumbs .usig-breadcrumbs__item a{color:inherit;text-decoration:none}
.hp .crumbs .usig-breadcrumbs__item a:hover{color:var(--ink)}
.hp .crumbs [aria-current="page"]{font-weight:500;color:var(--ink)}
.hp .crumbs .usig-breadcrumbs__sep{font-size:0;display:inline-block;width:10px;height:10px;opacity:.5;margin:0}
.hp .crumbs .usig-breadcrumbs__sep::before{content:"";display:block;width:10px;height:10px;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M13.2 4.8l7.2 7.2-7.2 7.2-1.4-1.4 4.8-4.8H3.6v-2h13l-4.8-4.8z'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M13.2 4.8l7.2 7.2-7.2 7.2-1.4-1.4 4.8-4.8H3.6v-2h13l-4.8-4.8z'/%3E%3C/svg%3E") center/contain no-repeat}

/* long-form layout (from the article mockup) */
.hp .ahero{max-width:900px;margin:0 auto;padding:60px 32px 34px;text-align:center;position:relative}
.hp .ahero .hero{display:block;padding:0}
.hp .ahero .hero > div{display:flex;flex-direction:column;align-items:center}
.hp .ahero h1{font-size:50px;max-width:860px;margin:14px 0 14px}
.hp .ahero .lead{max-width:660px;margin:0 auto 22px}
.hp .longform{display:grid;grid-template-columns:220px 1fr 300px;gap:44px;align-items:start}
.hp .longform--no-toc{grid-template-columns:1fr 300px}
/* Legal pages (page.php, um_is_legal_page): the contents list and the article only, centred */
.hp .longform--plain{grid-template-columns:220px minmax(0,680px);justify-content:center}
.hp .longform--plain.longform--no-toc{grid-template-columns:minmax(0,680px)}
.hp .toc{position:sticky;top:24px;font-size:14px}
.hp .toc .eyebrow{margin-bottom:12px}
.hp .toc a{display:block;color:#0B0B0B99;text-decoration:none;padding:7px 0 7px 14px;border-left:2px solid var(--line);transition:color .2s,border-color .2s}
.hp .toc a:hover{color:var(--ink)}
.hp .toc a.on{color:var(--ink);border-color:var(--green);font-weight:500}
.hp .article{font-size:17px;line-height:1.7;max-width:680px;--font-satoshi:Satoshi;--font-instrument-serif:Fractul}
.hp .article h2{font-size:32px;margin:0 0 12px;scroll-margin-top:90px}
.hp .article h2:not(:first-child){margin-top:44px}
.hp .article h3{font-size:21px;font-weight:500;letter-spacing:-.02em;margin:26px 0 8px}
.hp .article p{color:#0B0B0Bcc;margin:0 0 14px}
.hp .article a{text-decoration:underline;text-decoration-color:#39B54A66;text-underline-offset:3px}
.hp .article strong{color:var(--ink);font-weight:500}
.hp .wp-block-um-longform .article ul{list-style:none;padding:0;margin:0 0 16px}
.hp .wp-block-um-longform .article ul li{display:flex;gap:10px;padding:6px 0;color:#0B0B0Bcc}
.hp .wp-block-um-longform .article ul li svg{width:17px;height:17px;color:var(--green);flex:none;margin-top:5px}
.hp .wp-block-um-longform .article ul li b{color:var(--ink);font-weight:500}
/* Scoped to the long-form block so plain long-form pages (page.php) keep ordinary bullets and numbers. Core list items have no svg, so draw the same check icon (sprite i-check) with a mask. Their text and <b> are loose inline children, so they stay in normal flow instead of becoming flex items. */
.hp .wp-block-um-longform .article ul li:not(:has(> svg)){display:block;position:relative;padding-left:27px}
.hp .wp-block-um-longform .article ul li:not(:has(> svg))::before{content:"";position:absolute;left:0;top:11px;width:17px;height:17px;background:var(--green);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M12 1a11 11 0 1 1 0 22 11 11 0 0 1 0-22zm5.2 7.3l-1.4-1.4-5.3 5.3-2.3-2.3-1.4 1.4 3.7 3.7z'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M12 1a11 11 0 1 1 0 22 11 11 0 0 1 0-22zm5.2 7.3l-1.4-1.4-5.3 5.3-2.3-2.3-1.4 1.4 3.7 3.7z'/%3E%3C/svg%3E") center/contain no-repeat}
.hp .wp-block-um-longform .article ul li strong{color:var(--ink);font-weight:500}
.hp .article figure{margin:26px 0;padding:18px;background:#fff;border:1px solid var(--line);border-radius:16px}
.hp .article figcaption{font-size:13.5px;color:#0B0B0B99;margin-top:10px;text-align:center}
.hp .aside{position:sticky;top:24px;display:flex;flex-direction:column;gap:14px}
.hp .aside .talk{padding:24px}
@media (max-width:1060px){.hp .longform,.hp .longform--no-toc,.hp .longform--plain,.hp .longform--plain.longform--no-toc{grid-template-columns:1fr}.hp .toc,.hp .aside{position:static}.hp .toc{display:none}.hp .aside{max-width:680px}}
@media (max-width:900px){.hp .ahero h1{font-size:34px}.hp .ahero{padding:44px 20px 26px}.hp .article h2{font-size:26px}.hp .article figure{padding:10px}}

/* 404 and the search form */
.hp .notfound .ahero{padding-bottom:70px}
.hp .search-form{display:flex;align-items:center;gap:8px;background:#fff;border:1px solid #0B0B0B26;border-radius:999px;padding:8px 8px 8px 20px;width:min(560px,100%);margin:6px 0 26px;box-shadow:0 18px 40px -28px #0B0B0B55}
.hp .search-form:focus-within{border-color:var(--green);box-shadow:0 0 0 4px #39B54A26}
.hp .search-form label{flex:1;display:flex}
.hp .search-form .search-field{all:unset;flex:1;font-size:16px;text-align:left;min-width:0}
.hp .search-form .search-submit{border:0;border-radius:999px;background:var(--green);color:var(--ink);font:inherit;font-weight:500;font-size:14.5px;padding:10px 18px;cursor:pointer}
.hp .search-form .search-submit:hover{background:#4fcb60}

/* contrast fixes for small text */
/* small green text uses --deep-text for WCAG AA; icons and large numbers keep --deep.
   These overrides are for light backgrounds only. Dark sections rely on brand.css's
   .dark ... rules, which win on specificity, so any new dark section must carry .dark
   or its own eyebrow and tag override. */
.hp .eyebrow,.hp .tag,.hp .article a,.hp .toc .eyebrow,.hp .ver,.hp .cats span,.hp .up,.hp .ok,.hp .fld label i,.hp .mt em,.hp .fstepno,.hp .alts b,.hp .atab .who4,.hp .redir .r .st.good{color:var(--deep-text)}
/* marquee eyebrow: brand.css has 50% ink (3.6:1 on paper); b3 is about 6:1 */
.hp .mq .eyebrow{color:#0B0B0Bb3}
/* footer text contrast override lives here because brand.css is a copy of the mockup */
.hp footer .base{color:#ffffffa6}
.hp .aside .crow a{color:inherit;text-decoration:none}
.hp .aside .crow a:hover,.hp .share button:hover,.hp .loadmore:hover,.hp .stat a:hover,.hp .src:hover{color:var(--deep-text)}

/* search results */
.hp .search-results{list-style:none;margin:0;padding:0;max-width:760px;display:grid;gap:28px}
.hp .search-result h3{margin:8px 0 6px}
.hp .search-result h3 a{color:var(--ink);text-decoration:none}
.hp .search-result h3 a:hover{color:var(--deep-text)}
.hp .search-result p{margin:0;color:var(--muted)}
.hp main:focus{outline:none}

/* Hero entrance runs in CSS from first paint, so the largest text never waits on the bundle.
   The head script adds .js only when motion is allowed. */
@keyframes um-rise{from{opacity:0;transform:translateY(18px)}}
@keyframes um-mask{from{clip-path:inset(0 0 100% 0);transform:translateY(24px)}to{clip-path:inset(0);transform:none}}
@media (prefers-reduced-motion: no-preference){
.js .herosec .hero > div:first-child > *{animation:um-rise .7s cubic-bezier(.215,.61,.355,1) backwards}
.js .herosec .hero > div:first-child > h1{animation:um-mask 1s cubic-bezier(.16,1,.3,1) backwards}
.js .herosec .hero > div:first-child > :nth-child(1){animation-delay:0s}
.js .herosec .hero > div:first-child > :nth-child(2){animation-delay:.08s}
.js .herosec .hero > div:first-child > :nth-child(3){animation-delay:.18s}
.js .herosec .hero > div:first-child > :nth-child(4){animation-delay:.26s}
.js .herosec .hero > div:first-child > :nth-child(5){animation-delay:.34s}
.js .herosec .hero > div:first-child > :nth-child(n+6){animation-delay:.42s}
}

/* services bento: the mockup's span.go and span.pill are real anchors here */
.hp a.go{color:inherit}
.hp a.go,.hp a.pill{text-decoration:none}

/* reviews pause button (Ruling M): shown only once the motion core runs, so never under reduced motion or without JS */
.hp .um-pause{display:none;align-items:center;gap:8px;min-height:32px;padding:6px 14px;border:1px solid var(--line);border-radius:999px;background:transparent;color:var(--muted);font:500 13px/1 var(--display);cursor:pointer;transition:color .2s,border-color .2s}
.hp.motion-ready .um-pause{display:inline-flex}
.hp .um-pause:hover{color:var(--ink);border-color:#0B0B0B40}
.hp .um-pause:focus-visible{outline:2px solid var(--green);outline-offset:2px}
.hp .um-pause-ic{display:block;box-sizing:border-box;width:8px;height:10px;border-left:3px solid currentColor;border-right:3px solid currentColor}
.hp .um-pause[data-paused] .um-pause-ic{width:0;height:0;border-style:solid;border-width:5px 0 5px 8px;border-color:transparent transparent transparent currentColor}
@media (prefers-reduced-motion:reduce){.hp .um-pause{display:none!important}}
/* reviews: the button sits on its own row under the quotes, at the right */
.hp .qs .um-pause{grid-column:1/-1;justify-self:end}
/* the logo marquee pauses for keyboard focus as it does for hover */
.hp .mq:focus-within .track{animation-play-state:paused}

/* Visually hidden text for screen readers, such as the "opens in a new tab" cue from um_link (Ruling P) */
.screen-reader-text{border:0;clip:rect(1px,1px,1px,1px);clip-path:inset(50%);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute!important;width:1px;word-wrap:normal!important}
.screen-reader-text:focus{background:#fff;clip:auto!important;clip-path:none;color:var(--ink);display:block;height:auto;left:5px;padding:12px 20px;top:5px;width:auto;z-index:100000}

/* Process step titles are H3 (under the section H2), styled exactly as brand.css styles .step h4 */
.hp .step h3{font-size:21px;font-weight:500;letter-spacing:-.02em;margin:0}
/* Breadcrumbs aligned left in the service and location heroes (um_breadcrumbs( 'crumbs--left' )) */
.hp .crumbs.crumbs--left .usig-breadcrumbs__list{justify-content:flex-start}

/* Ruling R20: the brand.css .float chips float once, not forever. The fl keyframes only set the
   50% step, so each cycle starts and ends at the chip's own position and it comes to rest there
   with no jump. Plain chips run 4.8s, and .b chips start .4s later and run 4.4s, so every chip
   ends by 4.8s. brand.css stays verbatim, and its reduced-motion rule still turns them off. */
.hp .float{animation-duration:4.8s;animation-iteration-count:1}
.hp .float.b{animation-delay:.4s;animation-duration:4.4s}

/* Form states shared by the contact and audit forms (inc/form-markup.php, assets/src/forms).
   None of these classes are in the mockup, which faked the send. */
.hp .fcard .flabel i{color:var(--deep-text)}
/* Choices are real fieldsets with a legend, styled as the mockup's span.flabel. */
.hp .fcard fieldset.fld{border:0;margin:0;padding:0;min-width:0}
.hp .fcard legend.flabel{padding:0;float:none;width:auto}
/* Errors. The slot under each field is empty until form.js fills it. */
.hp .fcard .ferr{margin:6px 0 0;font-size:13px;color:#B42318}
.hp .fcard .ferr:empty{display:none}
.hp .fcard .fld [aria-invalid="true"]{border-color:#B42318}
.hp .fcard .fld [role="radiogroup"][aria-invalid="true"] .opt span{border-color:#B42318}
.hp .fcard .ferror{margin-top:16px;padding:12px 14px;border-radius:10px;background:#FEF3F2;border:1px solid #FDA29B;color:#B42318;font-size:14px}
.hp .fcard .ferror[hidden]{display:none}
.hp .fcard .ferror:focus{outline:none}
.hp .fcard .ferror:focus-visible{outline:2px solid var(--green);outline-offset:2px}
.hp .fcard .fnojs{margin:16px 0 0;font-size:14px;color:var(--ink)}
.hp .fcard .fnote a{color:inherit;text-decoration:underline}
.hp .fcard [type=submit][disabled]{cursor:progress;opacity:.75}
.hp .fcard .fdone h3:focus{outline:none}
.hp .fcard .fdone h3:focus-visible{outline:2px solid var(--green);outline-offset:4px}
/* The honeypot is off screen and out of the tab order. */
.hp .um-hp{position:absolute!important;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden}

/* Print shows every entrance at its end state. The scroll reveals hide items inline (opacity 0, a small
   offset, heading lines pushed below their masks) until they scroll into view, so a page printed before
   it is scrolled would print blank text. core/reveal.js also clears those inline styles on beforeprint. */
@media print{
.hp .article :is(h2,h3,p,ul),
.hp :is(.head p,.lead,.eyebrow,.tag,.ctas,.proof,.also,.crumbs),
.hp :is(.bento .svc,.qs .q,.prods .prod,.strip > div,.faq details,.rev .gcard,.incl .inc,.plans .plan,.stats .stat,.related .rel,.thrive .tc,.workwrap .site,.team .mem,.nums .num),
.hp .herosec .hero > div:first-child > *,
.hp .fimg{opacity:1!important;transform:none!important;clip-path:none!important;animation:none!important}
.hp :is(h1,h2) [style*="translate"]{transform:none!important}
.hp [style*="opacity"]{opacity:1!important}
}

/* Text link hover. Inline links grow a brand-green underline from the left on hover and keyboard
   focus. It is a background gradient, so it follows the text across line breaks. Links in running
   text keep a faint resting underline under it; navigation links (breadcrumbs, the footer, the
   areas row) have none at rest. Buttons, cards, tiles and icon links are left out. */
.hp :is(p,li,dd,figcaption,blockquote,td,details,.article,.crumbs,footer,.mega-areas) a:not(.btn,.src,.go,.pill,.mega-link,.mega-prod,.mega-all,.mm-link,.wp-block-button__link,:has(img,svg:only-child)){text-decoration:none;background-image:linear-gradient(var(--green),var(--green));background-position:0 100%;background-repeat:no-repeat;background-size:var(--ul,0%) 2px;padding-bottom:1px;transition:background-size .4s cubic-bezier(.2,.8,.2,1),color .2s}
.hp :is(p,li,dd,figcaption,blockquote,td,details,.article) a:not(.btn,.src,.go,.pill,.mega-link,.mega-prod,.mega-all,.mm-link,.wp-block-button__link,:has(img,svg:only-child)):not(.crumbs a,footer a,.mega-areas a){background-image:linear-gradient(var(--green),var(--green)),linear-gradient(#39B54A66,#39B54A66);background-size:var(--ul,0%) 2px,100% 1px}
.hp a:is(:hover,:focus-visible){--ul:100%}
.hp footer .footer-nav a{width:fit-content}
.hp footer a:hover{color:#fff}
@media (prefers-reduced-motion:reduce){.hp :is(p,li,dd,figcaption,blockquote,td,details,.article,.crumbs,footer,.mega-areas) a{transition:none!important}}

/* Hero H1 on small phones: scales with the screen so a long single word such as
   "Optimization" never runs wider than the column (it clipped at 375px). */
@media (max-width:400px){.hp .hero h1{font-size:clamp(30px,9.8vw,42px)}}

/* Eyebrow labels have no green dot before them (EJ, 2026-11-06). brand.css stays a mockup copy. */
.hp .eyebrow:before,.hp .mq .eyebrow:before{content:none;display:none}