/* kwd — the public site (app/lib/marketing.php, app/views/site/layout.php). The sign-in page's look — the deep
   teal, the lime, the drifting mark, the wandering glow, the shimmering headline — as a full-width header and
   footer, with white between them. Teal comes back only as boxes set into the white (.inset, the report
   pictures) to lead the eye. Colours are the tokens only. Animation comes in as things scroll into view
   (marketing.js adds .in); all of it stops for anyone who asks their system for less motion. */
@font-face{font-family:"Inter";src:url("/assets/fonts/inter-latin.woff2") format("woff2");font-weight:100 900;font-display:swap}
:root{color-scheme:dark;
  --deep:var(--surface-hero-2);--ease:cubic-bezier(.2,.7,.2,1);--spring:cubic-bezier(.3,.7,.2,1.25);
  --glass:color-mix(in srgb,var(--white) 6%,transparent);--glass-line:color-mix(in srgb,var(--white) 11%,transparent);
  --lime-glow:color-mix(in srgb,var(--highlight) 40%,transparent);--r:18px}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:96px;-webkit-text-size-adjust:100%}
body{margin:0;font-family:Inter,system-ui,-apple-system,"Segoe UI",sans-serif;font-size:17px;line-height:1.6;color:var(--ink-hero);background:var(--deep);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden}
img,svg{display:block;max-width:100%}
a{color:inherit}
.wrap{width:100%;max-width:1220px;margin:0 auto;padding:0 28px;position:relative;z-index:1}
.wrap.narrow{max-width:860px}
.skip{position:absolute;left:12px;top:-60px;z-index:100;background:var(--highlight);color:var(--deep);padding:10px 16px;border-radius:10px;font-weight:700;text-decoration:none}
.skip:focus{top:12px}
:focus-visible{outline:2px solid var(--highlight-light);outline-offset:3px;border-radius:6px}

/* ---- type ---- */
h1,h2,h3{margin:0;color:var(--white);font-weight:760;letter-spacing:-.03em;line-height:1.08;text-wrap:balance}
h1{font-size:clamp(40px,5.6vw,72px);letter-spacing:-.04em}
h2{font-size:clamp(30px,3.7vw,50px)}
h3{font-size:19px;letter-spacing:-.015em;line-height:1.3;font-weight:680}
h1 span,h2 span,.cta h2 span{background:linear-gradient(90deg,transparent,var(--highlight-light)),var(--accent-light);background-size:220% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;
  animation:shimmer 12s ease-in-out infinite alternate}
@keyframes shimmer{from{background-position:0% 0}to{background-position:100% 0}}
.kicker{display:inline-flex;align-items:center;gap:10px;font-size:12.5px;font-weight:720;letter-spacing:.14em;text-transform:uppercase;color:var(--highlight-light);margin-bottom:16px}
.kicker::before{content:"";width:26px;height:2px;border-radius:2px;background:linear-gradient(90deg,var(--accent-light),var(--highlight-light))}
.lede{font-size:clamp(17px,1.5vw,20px);line-height:1.6;color:var(--ink-hero);max-width:620px;margin:22px 0 0}
.intro{font-size:18px;color:var(--ink-hero-2);max-width:680px;margin:18px auto 0}
p{margin:0 0 1em}

/* ---- the sections' grounds ---- */
.s{position:relative;padding:clamp(80px,10vw,132px) 0;overflow:hidden;isolation:isolate}
.t-deep{background:radial-gradient(1200px 600px at 85% -10%,color-mix(in srgb,var(--accent-2) 38%,transparent),transparent 60%),
  radial-gradient(900px 500px at 0% 110%,color-mix(in srgb,var(--surface-hero-green) 55%,transparent),transparent 60%),linear-gradient(170deg,var(--surface-hero),var(--deep))}
.t-ink{background:linear-gradient(180deg,color-mix(in srgb,var(--black) 30%,var(--deep)),var(--deep))}
.t-teal{background:linear-gradient(135deg,color-mix(in srgb,var(--black) 62%,transparent),color-mix(in srgb,var(--black) 30%,transparent) 50%,transparent),var(--accent-2)}
/* everything after the hero: white, one section flowing into the next (no stripes); teal returns only as
   boxes set into the white (.inset, the report pictures) to lead the eye */
.t-light{color:var(--ink-2);background:var(--white)}
.t-light + .t-light{padding-top:0}
.s-marquee + .t-light{padding-top:clamp(64px,8vw,104px)}
.t-light h1,.t-light h2,.t-light h3{color:var(--surface-hero-2)}
.t-light h1 span,.t-light h2 span{background:linear-gradient(90deg,var(--accent),var(--accent-green),var(--accent-2));background-size:220% 100%;-webkit-background-clip:text;background-clip:text}
.t-light .kicker{color:var(--accent)}
.t-light .intro,.t-light .lede{color:var(--ink-3)}
.t-light a:not(.btn):not(.card){color:var(--accent)}

/* the moving background: the big mark, two glows, a fine grid — as on the sign-in page */
.hero-bg{position:absolute;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
.hero-bg .mark{position:absolute;right:-140px;top:-120px;width:640px;height:640px;opacity:.07;background:url("/assets/img/mark-light.svg") center/contain no-repeat;animation:drift 28s ease-in-out infinite alternate}
.hero-bg .glow{position:absolute;border-radius:50%;filter:blur(10px)}
.hero-bg .g1{left:-200px;bottom:-260px;width:720px;height:720px;background:radial-gradient(circle,color-mix(in srgb,var(--highlight) 20%,transparent),transparent 65%);animation:wander 34s ease-in-out infinite alternate}
.hero-bg .g2{right:10%;top:-240px;width:620px;height:620px;background:radial-gradient(circle,color-mix(in srgb,var(--accent-light) 18%,transparent),transparent 65%);animation:wander2 40s ease-in-out infinite alternate}
.hero-bg .grid{position:absolute;inset:-60px;background:linear-gradient(color-mix(in srgb,var(--white) 4.5%,transparent) 1px,transparent 1px) 0 0/64px 64px,linear-gradient(90deg,color-mix(in srgb,var(--white) 4.5%,transparent) 1px,transparent 1px) 0 0/64px 64px;
  -webkit-mask:radial-gradient(ellipse 70% 60% at 60% 40%,var(--black),transparent 75%);mask:radial-gradient(ellipse 70% 60% at 60% 40%,var(--black),transparent 75%);animation:gridmove 24s linear infinite}
@keyframes drift{from{transform:translate(0,0) rotate(0) scale(1)}to{transform:translate(-40px,26px) rotate(-5deg) scale(1.05)}}
@keyframes wander{0%{transform:translate(0,0);opacity:.85}50%{transform:translate(180px,-80px);opacity:1}100%{transform:translate(80px,-170px);opacity:.75}}
@keyframes wander2{0%{transform:translate(0,0)}100%{transform:translate(-160px,120px)}}
@keyframes gridmove{to{background-position:64px 64px,64px 64px}}

/* ---- the top bar ---- */
.progress{position:fixed;left:0;right:0;top:0;height:3px;z-index:60;pointer-events:none}
.progress i{display:block;height:100%;transform-origin:0 50%;transform:scaleX(var(--p,0));background:linear-gradient(90deg,var(--accent-green),var(--highlight-light))}
.logo{display:flex;align-items:center;gap:11px;text-decoration:none;color:var(--white);font-weight:760;font-size:22px;letter-spacing:-.02em;flex:none}
.logo img{width:38px;height:38px;transition:transform .5s var(--spring)}
.logo:hover img{transform:rotate(-8deg) scale(1.06)}
.logo b{color:var(--highlight-light);font-weight:720}
.logo span{position:relative;padding-bottom:.14em}
/* the underline: on hover it reaches half a character past the name at each end */
.logo span::after{content:"";position:absolute;left:0;right:0;bottom:0;height:.1em;pointer-events:none;background:linear-gradient(90deg,transparent,var(--highlight-soft)),linear-gradient(var(--accent-light) 0 0);transition:left .5s var(--spring),right .5s var(--spring)}
.logo:hover span::after{left:-.5ch;right:-.5ch}

/* ---- buttons ---- */
.btns{display:flex;flex-wrap:wrap;gap:14px;margin-top:34px}
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:15px 24px;border-radius:13px;font:inherit;font-size:16px;font-weight:680;
  text-decoration:none;cursor:pointer;border:0;overflow:hidden;isolation:isolate;transition:transform .35s var(--spring),box-shadow .35s,background-color .25s,color .25s,border-color .25s}
.btn .ic{transition:transform .35s var(--spring)}
.btn:hover .ic{transform:translateX(4px)}
.btn:active{transform:translateY(1px) scale(.99)}
.btn-primary{color:var(--deep);background:linear-gradient(135deg,var(--highlight-soft),var(--highlight) 55%,var(--accent-green));background-size:180% 180%;background-position:0 0;
  box-shadow:0 1px 0 color-mix(in srgb,var(--white) 60%,transparent) inset,0 12px 32px -12px var(--lime-glow)}
.btn-primary:hover{background-position:100% 100%;transform:translateY(-2px);box-shadow:0 1px 0 color-mix(in srgb,var(--white) 60%,transparent) inset,0 18px 42px -12px var(--lime-glow)}
/* a band of light sweeping across, on hover */
.btn-primary::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(105deg,transparent 30%,color-mix(in srgb,var(--white) 55%,transparent) 50%,transparent 70%);transform:translateX(-120%)}
.btn-primary:hover::after{transform:translateX(120%);transition:transform .8s var(--ease)}
.btn-ghost{color:var(--white);background:var(--glass);border:1px solid color-mix(in srgb,var(--white) 26%,transparent)}
.btn-ghost:hover{background:color-mix(in srgb,var(--white) 12%,transparent);border-color:color-mix(in srgb,var(--white) 45%,transparent);transform:translateY(-2px)}
.btn-phone{color:var(--white);background:color-mix(in srgb,var(--black) 18%,transparent);border:1px solid var(--glass-line);font-variant-numeric:tabular-nums}
.btn-phone .ic{order:-1;color:var(--highlight-light);animation:ring 4s ease-in-out infinite}
.btn-phone:hover{border-color:color-mix(in srgb,var(--highlight-light) 50%,transparent);transform:translateY(-2px)}
.btn-phone:hover .ic{transform:none}
@keyframes ring{0%,86%,100%{transform:rotate(0)}88%{transform:rotate(-14deg)}90%{transform:rotate(12deg)}92%{transform:rotate(-10deg)}94%{transform:rotate(6deg)}}
.btn.sm{padding:10px 16px;font-size:14.5px;border-radius:11px}
.btn.wide{width:100%}
.t-light .btn-ghost{color:var(--accent-strong);background:color-mix(in srgb,var(--white) 70%,transparent);border-color:color-mix(in srgb,var(--accent) 30%,transparent)}
.t-light .btn-ghost:hover{border-color:var(--accent);background:var(--white)}
.t-light .btn-phone{color:var(--surface-hero-2);background:color-mix(in srgb,var(--white) 70%,transparent);border-color:var(--border-soft)}
.t-light .btn-phone .ic{color:var(--accent)}

/* ---- the hero ---- */
.s-hero{padding:clamp(150px,17vw,200px) 0 clamp(90px,10vw,130px);min-height:min(92vh,980px);display:flex;align-items:center}
.s-hero:has(.compact){min-height:0;padding:clamp(140px,14vw,170px) 0 clamp(56px,7vw,84px)}
.hero{display:grid;grid-template-columns:1fr;gap:56px;align-items:center}
.hero.has-vis{grid-template-columns:minmax(0,1.04fr) minmax(0,.96fr)}
.hero.compact h1{font-size:clamp(36px,4.6vw,58px)}
.crumbs{display:flex;flex-wrap:wrap;gap:8px;font-size:13.5px;color:var(--ink-hero-3);margin-bottom:20px}
.crumbs a{color:var(--ink-hero-2);text-decoration:none}.crumbs a:hover{color:var(--highlight-light)}
.points{display:flex;flex-wrap:wrap;gap:10px 22px;list-style:none;padding:0;margin:30px 0 0;font-size:15px;color:var(--ink-hero-2)}
.points li{display:flex;align-items:center;gap:8px}
.points .ic{color:var(--highlight-light)}
.hero-vis{perspective:1400px}

/* ---- windows: the pictures of the reports ---- */
.win{--rx:0deg;--ry:0deg;position:relative;border-radius:var(--r);background:linear-gradient(160deg,var(--surface-hero),var(--deep));
  border:1px solid color-mix(in srgb,var(--white) 13%,transparent);color:var(--ink-hero);font-size:14px;
  box-shadow:0 1px 0 color-mix(in srgb,var(--white) 12%,transparent) inset,0 40px 80px -30px color-mix(in srgb,var(--black) 75%,transparent),0 0 0 1px color-mix(in srgb,var(--black) 30%,transparent);
  transform:rotateX(var(--rx)) rotateY(var(--ry));transition:transform .5s var(--ease);transform-style:preserve-3d}
.win::before{content:"";position:absolute;inset:-1px;border-radius:inherit;pointer-events:none;background:radial-gradient(500px circle at var(--gx,50%) var(--gy,0%),color-mix(in srgb,var(--highlight-light) 14%,transparent),transparent 45%)}
.win-bar{display:flex;align-items:center;gap:7px;padding:13px 16px;border-bottom:1px solid var(--glass-line);font-size:12.5px;color:var(--ink-hero-3)}
.win-bar i{width:10px;height:10px;border-radius:50%;background:color-mix(in srgb,var(--white) 16%,transparent)}
.win-bar i:first-child{background:color-mix(in srgb,var(--danger-light) 70%,transparent)}.win-bar i:nth-child(2){background:color-mix(in srgb,var(--caution) 75%,transparent)}.win-bar i:nth-child(3){background:color-mix(in srgb,var(--success-bright) 80%,transparent)}
.win-bar span{margin-left:8px;font-weight:600;color:var(--ink-hero-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.win-bar em{margin-left:auto;font-style:normal;font-size:10.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:2px 8px;border-radius:99px;color:var(--ink-hero-3);border:1px solid var(--glass-line)}
.win-body{padding:18px 20px 20px}
/* the home page's three, stacked and floating */
.stack{position:relative;display:grid;min-height:470px}
.stack .win{grid-area:1/1;align-self:start;width:88%}
.stack .win:nth-child(1){z-index:3;margin-top:150px;animation:float1 9s ease-in-out infinite}
.stack .win:nth-child(2){z-index:2;justify-self:end;width:78%;animation:float2 11s ease-in-out infinite}
.stack .win:nth-child(3){z-index:1;margin-top:300px;justify-self:end;width:62%;opacity:.95;animation:float3 13s ease-in-out infinite}
.stack .win:nth-child(2),.stack .win:nth-child(3){filter:saturate(.95) brightness(.93)}
@keyframes float1{0%,100%{translate:0 0}50%{translate:0 -12px}}
@keyframes float2{0%,100%{translate:0 0;rotate:1.5deg}50%{translate:-6px 10px;rotate:.5deg}}
@keyframes float3{0%,100%{translate:0 0;rotate:-1deg}50%{translate:8px -8px;rotate:-2deg}}

/* rank */
.loc{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;color:var(--ink-hero-2);padding:5px 10px;border-radius:99px;background:var(--glass);border:1px solid var(--glass-line);margin-bottom:14px}
.loc .ic{color:var(--highlight-light)}
.rk-h,.rk-r{display:grid;grid-template-columns:1fr 58px 58px 58px;align-items:center;gap:6px;text-align:center}
.rk-h{font-size:10.5px;text-transform:uppercase;letter-spacing:.09em;color:var(--ink-hero-3);font-weight:680;padding-bottom:8px}
.rk-h span:first-child,.rk-r span{text-align:left}
.rk-r{padding:10px 0;border-top:1px solid color-mix(in srgb,var(--white) 7%,transparent)}
.rk-r span{color:var(--white);font-weight:550;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rk-r em{font-style:normal;justify-self:center;min-width:32px;padding:2px 8px;border-radius:99px;font-size:12.5px;font-weight:760;font-variant-numeric:tabular-nums}
.r1{background:var(--accent-green);color:var(--deep)}.r2{background:var(--accent-2);color:var(--white)}.r3{background:color-mix(in srgb,var(--white) 12%,transparent);color:var(--ink-hero)}.r0{color:var(--ink-hero-3)}
.rk-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:12px;padding-top:12px;border-top:1px solid var(--glass-line);font-size:13px;color:var(--ink-hero-2)}
.rk-foot b{color:var(--highlight-light);font-size:15px}
.spark{width:120px;height:30px;flex:none}
.spark polyline{fill:none;stroke:var(--highlight-light);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:100;stroke-dashoffset:100;transition:stroke-dashoffset 1.8s var(--ease) .5s}
.in .spark polyline{stroke-dashoffset:0}
/* health */
.rings{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:18px}
.ring{position:relative;display:flex;flex-direction:column;align-items:center;gap:6px}
.ring svg{width:70px;height:70px;transform:rotate(-90deg)}
.ring circle{fill:none;stroke-width:4.5}
.ring .bg{stroke:color-mix(in srgb,var(--white) 10%,transparent)}
.ring .fg{stroke:var(--success-bright);stroke-linecap:round;stroke-dasharray:100;stroke-dashoffset:100;transition:stroke-dashoffset 1.6s var(--ease) .3s}
.ring.ok .fg{stroke:var(--caution)}.ring.warn .fg{stroke:var(--warning)}
.in .ring .fg{stroke-dashoffset:calc(100 - var(--v))}
.ring b{position:absolute;top:0;width:70px;height:70px;display:grid;place-items:center;font-size:19px;font-weight:780;color:var(--white);font-variant-numeric:tabular-nums}
.ring span{font-size:11.5px;color:var(--ink-hero-3)}
.bars{display:grid;gap:9px;margin-bottom:18px}
.bars div{display:grid;grid-template-columns:104px 1fr 56px;align-items:center;gap:10px;font-size:12.5px}
.bars span{color:var(--ink-hero-2)}.bars em{font-style:normal;text-align:right;font-weight:650;color:var(--white);font-variant-numeric:tabular-nums}
.bars b{height:6px;border-radius:6px;background:linear-gradient(90deg,var(--accent-green),var(--highlight-light)) 0 0/var(--w) 100% no-repeat,color-mix(in srgb,var(--white) 9%,transparent);background-size:0 100%,100% 100%;transition:background-size 1.4s var(--ease) .6s}
.bars b.w{background-image:linear-gradient(90deg,var(--caution),var(--warning)),linear-gradient(color-mix(in srgb,var(--white) 9%,transparent),color-mix(in srgb,var(--white) 9%,transparent))}
.in .bars b{background-size:var(--w) 100%,100% 100%}
.segs-l span{display:block;font-size:12.5px;color:var(--ink-hero-2);margin-bottom:8px}.segs-l b{color:var(--white)}
.segs{display:flex;gap:4px}
.segs i{flex:1;height:9px;border-radius:3px;background:var(--accent-green);transform:scaleY(0);transform-origin:50% 100%;transition:transform .5s var(--spring)}
.segs i.w{background:var(--warning)}
.in .segs i{transform:none}
.segs i:nth-child(2){transition-delay:.08s}.segs i:nth-child(3){transition-delay:.16s}.segs i:nth-child(4){transition-delay:.24s}.segs i:nth-child(5){transition-delay:.32s}.segs i:nth-child(6){transition-delay:.4s}
/* security */
.grade{display:flex;align-items:center;gap:18px;margin-bottom:16px}
.grade .g{position:relative;flex:none;width:84px;height:84px;border-radius:50%;display:grid;place-items:center;align-content:center;
  background:radial-gradient(closest-side,var(--deep) 79%,transparent 80% 100%),conic-gradient(var(--accent-green) calc(var(--gp,0) * 1%),color-mix(in srgb,var(--white) 10%,transparent) 0);transition:--gp 1.6s var(--ease)}
.in .grade .g{--gp:92}
.grade .g b{font-size:34px;font-weight:800;color:var(--white);line-height:1}
.grade .g span{font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-hero-3)}
.grade .gl{font-size:14px;color:var(--ink-hero-2)}.grade .gl b{color:var(--white)}
.grade .gl span{display:block;font-size:12.5px;color:var(--ink-hero-3);margin-top:4px}
@property --gp{syntax:"<number>";inherits:false;initial-value:0}
.sec{list-style:none;margin:0;padding:0;display:grid;gap:7px}
.sec li,.mrow,.kr{opacity:0;transform:translateX(-12px);transition:opacity .5s var(--ease),transform .5s var(--ease);transition-delay:calc(.4s + var(--i,0) * .12s)}
.in .sec li,.in .mrow,.in .kr,.in .rk-r{opacity:1;transform:none}
.rk-r{opacity:0;transform:translateY(10px);transition:opacity .5s var(--ease),transform .5s var(--ease);transition-delay:calc(.3s + var(--i,0) * .12s)}
.sec li{display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:10px;background:var(--glass);font-size:13.5px}
.sec li .ic{flex:none;color:var(--accent-green)}
.sec li.warn .ic{color:var(--caution)}
/* email */
.mailhead{display:flex;align-items:center;gap:9px;font-size:13px;color:var(--ink-hero-2);margin-bottom:12px}.mailhead .ic{color:var(--highlight-light)}
.mrow{display:grid;grid-template-columns:86px 1fr auto;align-items:center;gap:12px;padding:11px 0;border-top:1px solid color-mix(in srgb,var(--white) 7%,transparent)}
.mrow b{font-size:14px;color:var(--white);letter-spacing:.02em}.mrow span{font-size:13px;color:var(--ink-hero-2)}
.mrow em{font-style:normal;font-size:11.5px;font-weight:720;padding:3px 10px;border-radius:99px;background:color-mix(in srgb,var(--accent-green) 22%,transparent);color:var(--success-light)}
.mrow.warn em{background:color-mix(in srgb,var(--warning) 25%,transparent);color:var(--highlight-soft)}
/* scout */
.tree{width:100%;height:auto;margin-bottom:14px}
.tree .edges path{fill:none;stroke:color-mix(in srgb,var(--accent-light) 45%,transparent);stroke-width:1.6;stroke-dasharray:130;stroke-dashoffset:130;transition:stroke-dashoffset 1.4s var(--ease) .3s}
.in .tree .edges path{stroke-dashoffset:0}
.tree .nodes circle{fill:var(--accent-light);transform-box:fill-box;transform-origin:center;transform:scale(0);transition:transform .5s var(--spring)}
.tree .nodes circle.home{fill:var(--highlight-light)}
.tree .nodes circle.bad{fill:var(--danger-light)}
.in .tree .nodes circle{transform:none}
.in .tree .nodes circle.bad{animation:pulse 2.2s ease-in-out 1.6s infinite}
.tree .nodes circle:nth-child(n+2){transition-delay:.6s}.tree .nodes circle:nth-child(n+5){transition-delay:1s}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}}
.tally{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.tally div{padding:12px;border-radius:12px;background:var(--glass);border:1px solid var(--glass-line)}
.tally b{display:block;font-size:22px;font-weight:780;color:var(--white);font-variant-numeric:tabular-nums}
.tally span{font-size:12px;color:var(--ink-hero-3)}
.tally .bad b{color:var(--danger-light)}
/* ai */
.aio{padding:14px;border-radius:13px;background:linear-gradient(135deg,color-mix(in srgb,var(--you) 22%,transparent),color-mix(in srgb,var(--accent-2) 16%,transparent));border:1px solid var(--glass-line);margin-bottom:16px}
.aio-h{display:flex;align-items:center;gap:7px;font-size:12.5px;font-weight:700;color:var(--white);margin-bottom:12px}
.aio > i{display:block;height:8px;width:var(--w);border-radius:5px;margin-bottom:8px;background:linear-gradient(90deg,color-mix(in srgb,var(--white) 12%,transparent),color-mix(in srgb,var(--white) 26%,transparent),color-mix(in srgb,var(--white) 12%,transparent));background-size:200% 100%;animation:skel 2.4s linear infinite}
@keyframes skel{to{background-position:-200% 0}}
.srcs{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:12px;font-size:12px;color:var(--ink-hero-3)}
.srcs em{font-style:normal;padding:3px 9px;border-radius:99px;background:var(--glass);border:1px solid var(--glass-line);color:var(--ink-hero-2)}
.srcs em.you{background:color-mix(in srgb,var(--highlight) 22%,transparent);border-color:color-mix(in srgb,var(--highlight) 50%,transparent);color:var(--highlight-soft);animation:glowpill 3s ease-in-out infinite}
@keyframes glowpill{0%,100%{box-shadow:0 0 0 0 transparent}50%{box-shadow:0 0 0 5px color-mix(in srgb,var(--highlight) 14%,transparent)}}
.aistat{margin-top:16px;font-size:13.5px;color:var(--ink-hero-2)}.aistat b{font-size:22px;color:var(--white)}
/* keywords */
.kr{display:grid;grid-template-columns:20px 1fr 88px 50px;align-items:center;gap:10px;padding:11px 0;border-top:1px solid color-mix(in srgb,var(--white) 7%,transparent)}
.kr:first-child{border-top:0}
.kr i{font-style:normal;width:18px;height:18px;border-radius:5px;display:grid;place-items:center;font-size:11px;font-weight:800;background:var(--accent-green);color:var(--deep)}
.kr span{color:var(--white);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kr b{height:6px;border-radius:4px;background:linear-gradient(90deg,var(--demand),var(--caution)) 0 0/0 100% no-repeat,color-mix(in srgb,var(--white) 10%,transparent);transition:background-size 1.2s var(--ease) .8s}
.in .kr b{background-size:var(--w) 100%,100% 100%}
.kr em{font-style:normal;text-align:right;font-weight:680;font-variant-numeric:tabular-nums;color:var(--ink-hero)}
.kr.off span{color:var(--ink-hero-3)}.kr.off i{background:color-mix(in srgb,var(--white) 14%,transparent);color:var(--ink-hero-3)}
.kr.off small{grid-column:3/5;justify-self:end;font-size:11px;padding:2px 8px;border-radius:5px;background:color-mix(in srgb,var(--danger-light) 15%,transparent);color:var(--danger-light)}
/* the technical audit and accessibility findings */
.arow{padding:12px 0;border-top:1px solid color-mix(in srgb,var(--white) 7%,transparent);opacity:0;transform:translateX(-12px);transition:opacity .5s var(--ease),transform .5s var(--ease);transition-delay:calc(.35s + var(--i,0) * .14s)}
.arow:first-child{border-top:0;padding-top:0}
.in .arow{opacity:1;transform:none}
.atags{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:6px}
.atags em{font-style:normal;font-size:11px;font-weight:700;letter-spacing:.03em;padding:2px 8px;border-radius:6px;background:var(--glass);border:1px solid var(--glass-line);color:var(--ink-hero-2);font-variant-numeric:tabular-nums}
.atags .sev.high{background:color-mix(in srgb,var(--danger-light) 18%,transparent);border-color:color-mix(in srgb,var(--danger-light) 35%,transparent);color:var(--danger-light)}
.atags .sev.med{background:color-mix(in srgb,var(--caution) 18%,transparent);border-color:color-mix(in srgb,var(--caution) 35%,transparent);color:var(--highlight-soft)}
.atags .sev.low{background:color-mix(in srgb,var(--info) 18%,transparent);border-color:color-mix(in srgb,var(--info) 35%,transparent);color:var(--ink-hero)}
.arow > b{display:block;color:var(--white);font-weight:620;font-size:14px}
.arow small{font-size:12.5px;color:var(--ink-hero-3)}
.arow code{display:block;margin-top:7px;padding:7px 10px;border-radius:8px;background:color-mix(in srgb,var(--black) 30%,transparent);font:12px ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--highlight-soft);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.a11y-h{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:16px}
.a11y-h div{padding:11px 12px;border-radius:12px;background:var(--glass);border:1px solid var(--glass-line)}
.a11y-h b{display:block;font-size:20px;font-weight:780;color:var(--white)}.a11y-h span{font-size:12px;color:var(--ink-hero-3)}
.a11y-h .bad b{color:var(--caution)}
/* the call card */
.callcard{display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px;padding:44px 32px;border-radius:24px;background:linear-gradient(160deg,color-mix(in srgb,var(--accent-2) 60%,transparent),color-mix(in srgb,var(--deep) 80%,transparent));
  border:1px solid var(--glass-line);box-shadow:0 40px 80px -30px color-mix(in srgb,var(--black) 70%,transparent)}
.callcard > i{width:76px;height:76px;border-radius:50%;display:grid;place-items:center;color:var(--deep);background:linear-gradient(135deg,var(--highlight-soft),var(--highlight));margin-bottom:12px;box-shadow:0 0 0 0 var(--lime-glow);animation:callpulse 2.6s ease-out infinite}
@keyframes callpulse{0%{box-shadow:0 0 0 0 var(--lime-glow)}80%,100%{box-shadow:0 0 0 26px transparent}}
.callcard > span{font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-hero-3);font-weight:700}
.callcard > a:not(.mail){font-size:clamp(28px,3vw,38px);font-weight:800;color:var(--white);text-decoration:none;letter-spacing:-.02em}
.callcard small{color:var(--ink-hero-2);font-size:14px}
.callcard .mail{display:inline-flex;align-items:center;gap:8px;margin-top:16px;color:var(--highlight-light);text-decoration:none;font-weight:600}

/* ---- section headings ---- */
.sh{text-align:center;max-width:820px;margin:0 auto 60px}
.sh.left{text-align:left;margin:0 0 26px;max-width:none}
.sh.left .intro{margin-left:0}

/* ---- cards ---- */
.cards{display:grid;gap:20px}
.cards.c1{grid-template-columns:minmax(0,560px);justify-content:center}.cards.c2{grid-template-columns:repeat(2,1fr)}.cards.c3{grid-template-columns:repeat(3,1fr)}.cards.c4{grid-template-columns:repeat(4,1fr)}
.card{--mx:50%;--my:0%;position:relative;display:flex;flex-direction:column;padding:30px 28px;border-radius:var(--r);background:var(--glass);border:1px solid var(--glass-line);text-decoration:none;color:inherit;overflow:hidden;
  transition:transform .45s var(--spring),border-color .3s,box-shadow .45s,background-color .3s}
.card::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .4s;background:radial-gradient(420px circle at var(--mx) var(--my),color-mix(in srgb,var(--highlight-light) 13%,transparent),transparent 50%)}
.card:hover::before{opacity:1}
a.card:hover,.card:hover{transform:translateY(-5px);border-color:color-mix(in srgb,var(--highlight-light) 32%,transparent);box-shadow:0 30px 60px -30px color-mix(in srgb,var(--black) 70%,transparent)}
.card .ci{width:52px;height:52px;border-radius:15px;display:grid;place-items:center;margin-bottom:22px;color:var(--deep);
  background:linear-gradient(135deg,var(--highlight-soft),var(--accent-light));box-shadow:0 12px 28px -12px var(--lime-glow);transition:transform .5s var(--spring)}
.card:hover .ci{transform:rotate(-6deg) scale(1.07)}
.card h3{margin-bottom:10px}
.card p{margin:0;font-size:15.5px;color:var(--ink-hero-2);line-height:1.6}
.card .more{display:inline-flex;align-items:center;gap:7px;margin-top:auto;padding-top:22px;font-size:15px;font-weight:660;color:var(--highlight-light)}
.card .more .ic{transition:transform .35s var(--spring)}.card:hover .more .ic{transform:translateX(5px)}
.t-light .card{background:var(--white);border-color:var(--border-soft);
  box-shadow:0 1px 0 var(--white) inset,0 20px 40px -32px color-mix(in srgb,var(--surface-hero) 60%,transparent)}
.t-light .card::before{background:radial-gradient(420px circle at var(--mx) var(--my),color-mix(in srgb,var(--accent-light) 22%,transparent),transparent 50%)}
.t-light .card:hover{border-color:color-mix(in srgb,var(--accent) 35%,transparent);box-shadow:0 1px 0 var(--white) inset,0 30px 60px -30px color-mix(in srgb,var(--surface-hero) 55%,transparent)}
.t-light .card .ci{color:var(--white);background:linear-gradient(135deg,var(--accent-green),var(--accent-strong));box-shadow:0 12px 28px -12px color-mix(in srgb,var(--accent) 60%,transparent)}
.t-light .card p{color:var(--ink-3)}
.t-light .card .more{color:var(--accent)}
.card p a{color:var(--highlight-light);font-weight:650;text-decoration:none}
.t-light .card p a{color:var(--accent)}

/* ---- split ---- */
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(40px,6vw,88px);align-items:center}
.split.flip .split-copy{order:2}
.split-vis{perspective:1400px}
.prose{font-size:17.5px;color:var(--ink-hero-2)}
.t-light .prose{color:var(--ink-3)}
.ticks{list-style:none;margin:24px 0 0;padding:0;display:grid;gap:13px}
.ticks li{display:flex;align-items:flex-start;gap:13px;font-size:16.5px;color:var(--ink-hero)}
.ticks .ic{flex:none;width:26px;height:26px;padding:5px;border-radius:50%;color:var(--deep);background:var(--highlight-light);margin-top:1px}
.t-light .ticks li{color:var(--ink-2)}.t-light .ticks .ic{color:var(--white);background:var(--accent-green)}

/* ---- steps ---- */
.steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:28px;position:relative}
.steps::before{content:"";position:absolute;left:28px;right:12%;top:28px;height:2px;background:linear-gradient(90deg,var(--accent-green),var(--highlight-light));transform:scaleX(0);transform-origin:0 50%;transition:transform 1.8s var(--ease) .3s;opacity:.8}
.steps.in-view::before{transform:scaleX(1)}
.steps li{position:relative}
.num{position:relative;z-index:1;display:grid;place-items:center;width:58px;height:58px;border-radius:50%;margin-bottom:22px;font-size:22px;font-weight:800;color:var(--deep);
  background:linear-gradient(135deg,var(--highlight-soft),var(--accent-light));box-shadow:0 0 0 7px var(--deep),0 14px 30px -10px var(--lime-glow)}
.t-light .num{color:var(--white);background:linear-gradient(135deg,var(--accent-green),var(--accent-strong));box-shadow:0 0 0 7px var(--white),0 14px 30px -12px color-mix(in srgb,var(--accent) 60%,transparent)}
.steps h3{margin-bottom:8px}
.steps p{font-size:15.5px;color:var(--ink-hero-2)}
.t-light .steps p{color:var(--ink-3)}

/* ---- checklist ---- */
.checks{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.cgroup{padding:26px 26px 22px;border-radius:var(--r);background:var(--glass);border:1px solid var(--glass-line)}
.cgroup h3{display:flex;align-items:center;gap:10px;margin-bottom:14px;font-size:18px}
.cgroup h3 .ic{color:var(--highlight-light)}
.cgroup ul{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.cgroup li{display:flex;gap:10px;font-size:15px;color:var(--ink-hero-2);line-height:1.45}
.cgroup li .ic{flex:none;margin-top:3px;color:var(--accent-green)}
.t-light .cgroup{background:color-mix(in srgb,var(--white) 72%,transparent);border-color:color-mix(in srgb,var(--accent) 13%,transparent);box-shadow:0 20px 40px -32px color-mix(in srgb,var(--surface-hero) 60%,transparent)}
.t-light .cgroup h3 .ic{color:var(--accent)}.t-light .cgroup li{color:var(--ink-3)}

/* ---- stats ---- */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.stat{padding:30px 26px;border-radius:var(--r);background:linear-gradient(160deg,var(--glass),transparent);border:1px solid var(--glass-line);text-align:center}
.stat b{display:block;font-size:clamp(46px,5vw,66px);font-weight:820;letter-spacing:-.05em;line-height:1;margin-bottom:12px;font-variant-numeric:tabular-nums;
  background:linear-gradient(135deg,var(--white),var(--highlight-light));-webkit-background-clip:text;background-clip:text;color:transparent}
.stat > span{font-size:15px;color:var(--ink-hero-2)}
.t-light .stat{background:color-mix(in srgb,var(--white) 70%,transparent);border-color:color-mix(in srgb,var(--accent) 13%,transparent)}
.t-light .stat b{background-image:linear-gradient(135deg,var(--accent-strong),var(--accent-green))}
.t-light .stat > span{color:var(--ink-3)}

/* ---- faq ---- */
.faq{display:grid;gap:12px}
.faq details{border-radius:16px;background:var(--glass);border:1px solid var(--glass-line);transition:border-color .3s,background-color .3s}
.faq details[open]{border-color:color-mix(in srgb,var(--highlight-light) 28%,transparent)}
.faq summary{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:21px 24px;cursor:pointer;font-size:17px;font-weight:650;color:var(--white)}
.faq summary::-webkit-details-marker{display:none}
.faq summary i{flex:none;width:32px;height:32px;border-radius:50%;display:grid;place-items:center;background:var(--glass);transition:transform .4s var(--spring),background-color .3s}
.faq details[open] summary i{transform:rotate(180deg);background:color-mix(in srgb,var(--highlight-light) 18%,transparent);color:var(--highlight-light)}
.faq .a{display:grid;grid-template-rows:0fr;transition:grid-template-rows .45s var(--ease)}
.faq details[open] .a{grid-template-rows:1fr}
.faq details.closing .a{grid-template-rows:0fr}
.faq .a > div{overflow:hidden;padding:0 24px;color:var(--ink-hero-2);font-size:16px}
.faq details[open] .a > div{padding-bottom:22px}
.faq .a a{color:var(--highlight-light)}
.t-light .faq details{background:color-mix(in srgb,var(--white) 72%,transparent);border-color:color-mix(in srgb,var(--accent) 13%,transparent)}
.t-light .faq details[open]{border-color:color-mix(in srgb,var(--accent) 35%,transparent)}
.t-light .faq summary{color:var(--surface-hero-2)}
.t-light .faq summary i{background:var(--success-soft);color:var(--accent)}
.t-light .faq details[open] summary i{background:var(--accent);color:var(--white)}   /* open, on white: solid teal (the dark sections' lime vanished here) */
.t-light .faq .a > div{color:var(--ink-3)}

/* ---- the teal box set into the white: the stats, the call to action ---- */
.inset{position:relative;overflow:hidden;isolation:isolate;border-radius:28px;padding:clamp(40px,6vw,76px) clamp(26px,5vw,72px);color:var(--ink-hero);
  background:linear-gradient(135deg,color-mix(in srgb,var(--black) 55%,transparent),color-mix(in srgb,var(--black) 22%,transparent) 55%,transparent),var(--accent-2);
  box-shadow:0 40px 80px -40px color-mix(in srgb,var(--surface-hero) 70%,transparent)}
.inset .hero-bg .mark{width:520px;height:520px;right:-120px;top:-140px}
.t-light .inset h2,.t-light .inset h3{color:var(--white)}
.t-light .inset h2 span{background:linear-gradient(90deg,transparent,var(--highlight-light)),var(--accent-light);background-size:220% 100%;-webkit-background-clip:text;background-clip:text}
.t-light .inset .kicker{color:var(--highlight-light)}
.t-light .inset .intro,.t-light .inset p{color:var(--ink-hero)}
.t-light .inset .sh{margin-bottom:44px}
.t-light .inset .stat{background:color-mix(in srgb,var(--white) 8%,transparent);border-color:color-mix(in srgb,var(--white) 16%,transparent)}
.t-light .inset .stat b{background-image:linear-gradient(135deg,var(--white),var(--highlight-light))}
.t-light .inset .stat > span{color:var(--ink-hero-2)}
.t-light .inset .btn-phone{color:var(--white);background:color-mix(in srgb,var(--black) 18%,transparent);border-color:color-mix(in srgb,var(--white) 18%,transparent)}
.t-light .inset .btn-phone .ic{color:var(--highlight-light)}
.t-light .inset .btn-ghost{color:var(--white);background:var(--glass);border-color:color-mix(in srgb,var(--white) 26%,transparent)}

/* ---- cta band ---- */
.s-cta{padding-bottom:clamp(80px,9vw,120px)}
.cta{display:flex;align-items:center;justify-content:space-between;gap:40px;flex-wrap:wrap}
.cta > .hero-bg + div{max-width:640px}
.cta h2{font-size:clamp(32px,4vw,54px)}
.cta p{margin:18px 0 0;font-size:18px;color:var(--ink-hero)}
.cta .btns{margin:0}

/* ---- marquee ---- */
.s-marquee{padding:26px 0;border-block:1px solid var(--glass-line)}
.s-marquee.t-light{padding:30px 0;border-block:0}
.t-light .track span{background:var(--surface-2);border-color:var(--border-soft);color:var(--ink-2)}
.t-light .track .ic{color:var(--accent)}
.marquee{overflow:hidden;-webkit-mask:linear-gradient(90deg,transparent,var(--black) 10%,var(--black) 90%,transparent);mask:linear-gradient(90deg,transparent,var(--black) 10%,var(--black) 90%,transparent)}
.track{display:flex;gap:14px;width:max-content;animation:marquee 46s linear infinite}
.marquee:hover .track{animation-play-state:paused}
.track span{display:inline-flex;align-items:center;gap:9px;white-space:nowrap;padding:10px 18px;border-radius:99px;background:var(--glass);border:1px solid var(--glass-line);font-size:15px;font-weight:560;color:var(--ink-hero)}
.track .ic{color:var(--highlight-light)}
@keyframes marquee{to{transform:translateX(calc(-50% - 7px))}}

/* ---- long reads ---- */
.read{max-width:820px}
.read.has-toc{max-width:1220px;display:grid;grid-template-columns:260px minmax(0,780px);gap:64px;justify-content:center}
.toc{position:sticky;top:100px;align-self:start;font-size:14.5px}
.toc b{display:block;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--accent);margin-bottom:12px}
.toc nav{display:grid;gap:2px;border-left:2px solid color-mix(in srgb,var(--accent) 18%,transparent)}
.toc nav a{padding:6px 0 6px 14px;margin-left:-2px;border-left:2px solid transparent;color:var(--ink-3)!important;text-decoration:none;transition:color .2s,border-color .2s}
.toc nav a:hover,.toc nav a.on{color:var(--accent-strong)!important;border-left-color:var(--accent-green)}
.toc-cta{margin-top:28px;padding:20px;border-radius:16px;color:var(--ink-hero)}
/* the small teal boxes (the guide's report box, the form's call box): the inset's gradient and drifting mark, scaled down */
.toc-cta,.callbox{position:relative;overflow:hidden;isolation:isolate;
  background:linear-gradient(135deg,color-mix(in srgb,var(--black) 55%,transparent),color-mix(in srgb,var(--black) 22%,transparent) 55%,transparent),var(--accent-2);
  box-shadow:0 24px 48px -28px color-mix(in srgb,var(--surface-hero) 70%,transparent)}
.toc-cta .hero-bg .mark,.callbox .hero-bg .mark{width:220px;height:220px;right:-70px;top:-80px;opacity:.12}
.toc-cta .hero-bg .g1,.callbox .hero-bg .g1{left:-120px;bottom:-160px;width:320px;height:320px}
.toc-cta p{margin:0 0 14px;font-weight:650;color:var(--white)}
.toc-cta .btn{width:100%;padding:12px 16px;font-size:14.5px}
.prose.long{font-size:18px;line-height:1.75}
.prose.long h2{font-size:clamp(24px,2.6vw,32px);margin:2em 0 .6em;scroll-margin-top:100px}
.prose.long h2:first-child{margin-top:0}
.prose.long ul{padding-left:1.2em}.prose.long li{margin-bottom:.5em}
.prose.long b{color:var(--surface-hero-2)}
.prose.long .meta{font-size:14px;color:var(--ink-4)}
.prose.long pre{margin:1.2em 0 1.6em;padding:16px 18px;border-radius:14px;background:var(--surface-hero-2);color:var(--highlight-soft);overflow-x:auto;font-size:14.5px;line-height:1.6;box-shadow:0 20px 40px -28px color-mix(in srgb,var(--black) 60%,transparent)}
.prose.long code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.88em}
.prose.long :not(pre) > code{padding:2px 6px;border-radius:6px;background:color-mix(in srgb,var(--accent) 10%,transparent);color:var(--accent-strong)}
.prose.long a{font-weight:600;text-decoration-thickness:1px;text-underline-offset:3px}

/* ---- the free report form ---- */
.form-wrap{align-items:start}
.form-side .ticks{margin-bottom:28px}
.callbox{display:flex;align-items:center;gap:16px;padding:20px 22px;border-radius:16px;color:var(--ink-hero)}
.callbox > .ic{flex:none;width:48px;height:48px;padding:12px;border-radius:50%;color:var(--deep);background:var(--highlight-light)}
.callbox span{display:block;font-size:13px;color:var(--ink-hero-3)}
.callbox a{font-size:22px;font-weight:780;color:var(--white)!important;text-decoration:none}
.fbox{position:relative;padding:clamp(26px,3.4vw,40px);border-radius:24px;background:color-mix(in srgb,var(--white) 82%,transparent);border:1px solid color-mix(in srgb,var(--accent) 14%,transparent);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:0 1px 0 var(--white) inset,0 40px 80px -40px color-mix(in srgb,var(--surface-hero) 60%,transparent);color:var(--ink-2)}
.fbox label{display:block;font-size:14px;font-weight:620;color:var(--ink-2);margin-bottom:18px}
.fbox label small,.fbox legend small{font-weight:500;color:var(--ink-4)}
.frow.two{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.fbox input:not([type=checkbox]),.fbox textarea{display:block;width:100%;margin-top:7px;font:inherit;font-size:16px;padding:13px 15px;border-radius:12px;border:1px solid var(--border-soft);background:var(--white);color:var(--ink);
  transition:border-color .2s,box-shadow .2s}
.fbox textarea{resize:vertical;min-height:90px}
.fbox input:focus,.fbox textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 15%,transparent)}
.fbox fieldset{border:0;margin:0 0 18px;padding:0}
.fbox legend{font-size:14px;font-weight:620;color:var(--ink-2);margin-bottom:10px;padding:0}
.picks{display:flex;flex-wrap:wrap;gap:8px}
.pick{margin:0!important;cursor:pointer}
.pick input{position:absolute;opacity:0;pointer-events:none}
.pick span{display:inline-flex;align-items:center;gap:7px;padding:9px 14px;border-radius:99px;border:1px solid var(--border-soft);background:var(--white);font-size:14px;font-weight:560;color:var(--ink-2);transition:all .2s}
.pick span::before{content:"";width:14px;height:14px;border-radius:4px;border:1.5px solid var(--border);transition:all .2s}
.pick:hover span{border-color:var(--accent)}
.pick input:checked + span{background:var(--success-soft);border-color:var(--accent-green);color:var(--accent-strong)}
.pick input:checked + span::before{background:var(--accent-green) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/11px no-repeat;border-color:var(--accent-green)}
.pick input:focus-visible + span{outline:2px solid var(--accent);outline-offset:2px}
.hp{position:absolute!important;left:-9999px;width:1px;height:1px;overflow:hidden}
.ferr{display:block;margin-top:6px;font-size:13px;font-weight:600;color:var(--danger)}
.fmsg{margin-bottom:18px;padding:12px 15px;border-radius:12px;background:var(--danger-soft);color:var(--danger-strong);font-size:14.5px}
.fine{margin:14px 0 0;font-size:13px;color:var(--ink-4);text-align:center}
.fbox.sent{text-align:center;padding:56px 40px}
.fbox.sent .ok{display:grid;place-items:center;width:84px;height:84px;margin:0 auto 22px;border-radius:50%;color:var(--white);background:linear-gradient(135deg,var(--accent-green),var(--accent-strong));
  box-shadow:0 18px 40px -14px color-mix(in srgb,var(--accent) 70%,transparent);animation:pop .7s var(--spring) both}
.fbox.sent h3{font-size:28px;color:var(--surface-hero-2);margin-bottom:10px}
.fbox.sent p{max-width:420px;margin:0 auto 24px}
@keyframes pop{from{transform:scale(.4);opacity:0}to{transform:none;opacity:1}}
.fbox button[disabled]{opacity:.75;cursor:wait}

/* ---- the footer ---- */
.foot{position:relative;overflow:hidden;isolation:isolate;padding:90px 0 0;background:linear-gradient(180deg,var(--deep),color-mix(in srgb,var(--black) 35%,var(--deep)));border-top:1px solid var(--glass-line)}
.foot .hero-bg .mark{right:auto;left:-180px;top:auto;bottom:-260px}
.foot-in{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:48px}
.foot-brand p{margin:20px 0 22px;color:var(--ink-hero-3);font-size:15px;max-width:360px}
.foot-tel,.foot-mail{display:flex;align-items:center;gap:10px;color:var(--white);text-decoration:none;font-weight:650;margin-bottom:10px}
.foot-tel{font-size:20px}.foot-tel .ic,.foot-mail .ic{color:var(--highlight-light)}
.foot-mail{font-size:15px;color:var(--ink-hero-2)}
.foot-col{display:flex;flex-direction:column;gap:10px;font-size:15px}
.foot-col b{font-size:12.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--highlight-light);margin-bottom:6px}
.foot-col a{color:var(--ink-hero-2);text-decoration:none;width:fit-content;background:linear-gradient(var(--highlight-light),var(--highlight-light)) 0 100%/0 1px no-repeat;transition:color .2s,background-size .35s var(--ease)}
.foot-col a:hover{color:var(--white);background-size:100% 1px}
.foot-base{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-top:70px;padding-top:24px;padding-bottom:30px;border-top:1px solid var(--glass-line);font-size:13.5px;color:var(--ink-hero-3)}
.foot-base a.co{color:inherit}
.callbar{display:none}

/* ---- arriving: things rise into place as they scroll into view (marketing.js) ---- */
.js [data-reveal]{opacity:0;transform:translateY(28px);transition:opacity .9s var(--ease),transform .9s var(--ease);transition-delay:calc(var(--d,0) * 90ms)}
.js [data-reveal].in{opacity:1;transform:none}
.js .hero-vis[data-reveal]{transform:translateY(40px) scale(.97)}
.js .hero-vis[data-reveal].in{transform:none}
.js .split-vis[data-reveal]{transform:translateY(34px) rotate(-1deg)}
.js .split-vis[data-reveal].in{transform:none}
/* the page itself fades in */
.js body{animation:pagein .6s var(--ease) both}
@keyframes pagein{from{opacity:0}to{opacity:1}}

/* ---- smaller screens ---- */
@media (max-width:1100px){
  .stats{grid-template-columns:repeat(2,1fr)}
  .cards.c4{grid-template-columns:repeat(2,1fr)}
  .read.has-toc{grid-template-columns:1fr}.toc{display:none}
}
@media (max-width:980px){
  .hero.has-vis,.split{grid-template-columns:1fr}
  .split.flip .split-copy{order:0}
  .s-hero{min-height:0}
  .stack{min-height:400px;max-width:560px}
  .cards.c3,.checks{grid-template-columns:repeat(2,1fr)}
  .steps{grid-template-columns:repeat(2,1fr);gap:36px 28px}.steps::before{display:none}
  .foot-in{grid-template-columns:1fr 1fr}
  .foot-brand{grid-column:1/-1}
}
@media (max-width:640px){
  body{font-size:16px}
  .wrap{padding:0 18px}
  .cards.c2,.cards.c3,.cards.c4,.checks,.steps,.frow.two{grid-template-columns:1fr}
  .stats{grid-template-columns:1fr 1fr;gap:12px}.stat{padding:22px 14px}
  .btns{flex-direction:column}.btns .btn{width:100%}
  .rings{grid-template-columns:repeat(2,1fr)}
  .stack .win{width:100%}.stack .win:nth-child(2),.stack .win:nth-child(3){display:none}.stack .win:nth-child(1){margin-top:0}.stack{min-height:0}
  .rk-h,.rk-r{grid-template-columns:1fr 44px 44px 44px}
  .cta{flex-direction:column;align-items:flex-start}
  .foot-in{grid-template-columns:1fr}
  .callbar{display:flex;position:fixed;left:12px;right:12px;bottom:12px;z-index:40;align-items:center;justify-content:center;gap:10px;padding:15px;border-radius:16px;font-weight:700;
    color:var(--deep);text-decoration:none;background:linear-gradient(135deg,var(--highlight-soft),var(--highlight));box-shadow:0 16px 40px -10px color-mix(in srgb,var(--black) 60%,transparent);
    transform:translateY(140%);transition:transform .45s var(--spring)}
  .callbar.show{transform:none}
  .foot{padding-bottom:80px}
}

/* ---- less motion, asked for: everything simply there ---- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .js [data-reveal]{opacity:1;transform:none}
  .ring .fg{stroke-dashoffset:calc(100 - var(--v))}
  .bars b{background-size:var(--w) 100%,100% 100%}.kr b{background-size:var(--w) 100%,100% 100%}
  .segs i,.tree .nodes circle{transform:none}.tree .edges path,.spark polyline{stroke-dashoffset:0}
  .sec li,.mrow,.kr,.rk-r,.arow{opacity:1;transform:none}
  .grade .g{--gp:92}.steps::before{transform:scaleX(1)}
}

/* ---- a guide's way back to the list: above its title, atop "On this page", and at its end ---- */
.back{display:inline-flex;align-items:center;gap:8px;width:fit-content;padding:7px 14px 7px 11px;border-radius:99px;font-size:14px;font-weight:620;text-decoration:none;
  color:var(--white);background:var(--glass);border:1px solid color-mix(in srgb,var(--white) 20%,transparent);transition:background-color .2s,border-color .2s}
.back .ic{transform:rotate(180deg);transition:transform .35s var(--spring)}
.back:hover{background:color-mix(in srgb,var(--white) 13%,transparent);border-color:color-mix(in srgb,var(--highlight-light) 45%,transparent)}
.back:hover .ic{transform:rotate(180deg) translateX(4px)}
.hero-copy > .back{display:flex;margin-bottom:22px}
.hero-copy > .back + .crumbs{display:none}
.t-light .back{color:var(--accent-strong)!important;background:var(--surface-2);border-color:var(--border-soft)}
.t-light .back:hover{border-color:var(--accent);background:var(--success-soft)}
.toc > .back{margin-bottom:26px}
.read-main{min-width:0}
.guide-end{margin-top:64px;padding-top:36px;border-top:1px solid var(--border-soft)}
.guide-end > b{display:block;font-size:12.5px;font-weight:720;letter-spacing:.13em;text-transform:uppercase;color:var(--accent);margin-bottom:16px}
.ge-list{display:grid;gap:12px;margin-bottom:26px}
.ge-list a{display:flex;align-items:center;gap:16px;padding:18px 20px;border-radius:16px;border:1px solid var(--border-soft);background:var(--white);text-decoration:none;color:inherit!important;
  transition:border-color .25s,transform .35s var(--spring),box-shadow .35s}
.ge-list a:hover{border-color:color-mix(in srgb,var(--accent) 40%,transparent);transform:translateY(-2px);box-shadow:0 18px 36px -24px color-mix(in srgb,var(--surface-hero) 60%,transparent)}
.ge-list i{flex:none;width:44px;height:44px;border-radius:12px;display:grid;place-items:center;color:var(--white);background:linear-gradient(135deg,var(--accent-green),var(--accent-strong))}
.ge-list span{flex:1;min-width:0}
.ge-list strong{display:block;font-size:16.5px;color:var(--surface-hero-2)}
.ge-list small{display:block;font-size:14px;color:var(--ink-3)}
.ge-list a > .ic{flex:none;color:var(--accent);transition:transform .35s var(--spring)}
.ge-list a:hover > .ic{transform:translateX(4px)}
@media (prefers-reduced-motion:reduce){.back .ic,.back:hover .ic{transform:rotate(180deg)}}
/* hovering Services opens its menu with or without the script (a desktop pointer only; phones use the arrow) */

/* ---- a grid that doesn't fill its last row centres that row (five groups: three, then two in the middle) ---- */
.cards.c2,.cards.c3,.cards.c4,.checks{display:flex;flex-wrap:wrap;justify-content:center}
.cards.c2 > *{flex:0 1 calc((100% - 20px) / 2)}
.cards.c3 > *,.checks > *{flex:0 1 calc((100% - 40px) / 3)}
.cards.c4 > *{flex:0 1 calc((100% - 60px) / 4)}
@media (max-width:1100px){.cards.c4 > *{flex-basis:calc((100% - 20px) / 2)}}
@media (max-width:980px){.cards.c3 > *,.checks > *{flex-basis:calc((100% - 20px) / 2)}}
@media (max-width:640px){.cards.c2 > *,.cards.c3 > *,.cards.c4 > *,.checks > *{flex-basis:100%}}

/* the robots.txt picture (AI search): answer crawlers let in, training crawlers turned away */
.rb-key{display:flex;gap:8px;margin-bottom:12px}
.rb-key span{font-size:11.5px;font-weight:700;padding:3px 10px;border-radius:99px}
.rb-key .ans,.rb.ans em{background:color-mix(in srgb,var(--accent-green) 22%,transparent);color:var(--success-light)}
.rb-key .trn,.rb.trn em{background:color-mix(in srgb,var(--caution) 20%,transparent);color:var(--highlight-soft)}
.rb{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:11px 0;border-top:1px solid color-mix(in srgb,var(--white) 7%,transparent);
  opacity:0;transform:translateX(-12px);transition:opacity .5s var(--ease),transform .5s var(--ease);transition-delay:calc(.35s + var(--i,0) * .14s)}
.in .rb{opacity:1;transform:none}
.rb code{font:12.5px/1.55 ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--white)}
.rb code span{color:var(--ink-hero-3)}
.rb.ans code b{color:var(--success-bright);font-weight:600}.rb.trn code b{color:var(--caution);font-weight:600}
.rb em{flex:none;font-style:normal;font-size:11.5px;font-weight:650;padding:3px 9px;border-radius:7px}
@media (prefers-reduced-motion:reduce){.rb{opacity:1;transform:none}}

/* the service-area picture (keyword research): towns served, and what that keeps or sets aside */
.area-h{display:flex;flex-wrap:wrap;align-items:center;gap:7px;margin-bottom:14px;font-size:12.5px;color:var(--ink-hero-3)}
.area-h span{margin-right:4px}
.area-h em{font-style:normal;font-weight:650;font-size:12.5px;padding:4px 11px;border-radius:99px;background:color-mix(in srgb,var(--accent-green) 22%,transparent);border:1px solid color-mix(in srgb,var(--accent-green) 40%,transparent);color:var(--success-light)}
.area-h em.add{background:none;border-style:dashed;border-color:color-mix(in srgb,var(--white) 25%,transparent);color:var(--ink-hero-2)}
.ar-on > b::before{content:"✓";display:inline-grid;place-items:center;width:16px;height:16px;margin-right:9px;border-radius:4px;font-size:10px;background:var(--accent-green);color:var(--deep)}
.ar-off > b{color:var(--ink-hero-3)}
.ar-off > b::before{content:"–";display:inline-grid;place-items:center;width:16px;height:16px;margin-right:9px;border-radius:4px;font-size:10px;background:color-mix(in srgb,var(--white) 14%,transparent);color:var(--ink-hero-3)}
.ar-on small{color:var(--success-bright)}.ar-off small{color:var(--caution)}
.v-area .arow small{display:block;margin:4px 0 0 25px}

/* ---- a page laid out like the sign-in page (contact, free report): the brand on the left, the form on white ---- */
body.is-split{background:var(--white);--embed-w:min(55vw,calc(100vw - 460px))}   /* the laid-in menu as wide as the teal (1.1fr | min 460px .9fr) */
.splitpage{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(460px,.9fr);min-height:100vh}
.sp-brand{position:relative;overflow:hidden;isolation:isolate;display:flex;color:var(--ink-hero);padding:172px 64px 60px;   /* under the laid-in menu (.top.embed), in line with its logo */
  background:linear-gradient(90deg,transparent,var(--highlight)) left bottom/100% 4px no-repeat,linear-gradient(var(--accent-green) 0 0) left bottom/100% 4px no-repeat,
    linear-gradient(135deg,color-mix(in srgb,var(--black) 76%,transparent) 0%,color-mix(in srgb,var(--black) 51%,transparent) 42%,color-mix(in srgb,var(--black) 22%,transparent) 78%,transparent 100%),var(--accent-2)}
.sp-in{margin:auto 0;max-width:580px;width:100%}
.sp-brand h1{font-size:clamp(32px,3.5vw,50px)}
.sp-brand .lede{margin-top:18px}
.sp-brand .ticks{margin-top:26px}
.sp-next{margin-top:30px;padding:20px 22px;border-radius:16px;background:color-mix(in srgb,var(--black) 18%,transparent);border:1px solid var(--glass-line)}
.sp-next > b{display:block;font-size:12px;font-weight:720;letter-spacing:.13em;text-transform:uppercase;color:var(--highlight-light);margin-bottom:12px}
.sp-next ol{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.sp-next li{display:flex;gap:12px;font-size:14.5px;line-height:1.5;color:var(--ink-hero-2)}
.sp-next li > span{flex:none;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;font-size:13px;font-weight:800;color:var(--deep);background:linear-gradient(135deg,var(--highlight-soft),var(--accent-light))}
.sp-next strong{display:block;color:var(--white);font-weight:650}
.sp-reach{display:flex;flex-wrap:wrap;gap:10px;margin-top:30px}
.sp-reach > *{flex:1 1 auto}   /* each sized to what it says, so an email address never breaks mid-word */
.sp-reach > *{display:flex;align-items:center;gap:11px;padding:12px 14px;border-radius:13px;background:var(--glass);border:1px solid var(--glass-line);color:var(--white);text-decoration:none;font-size:14px;font-weight:600;min-width:0}
.sp-reach a:hover{border-color:color-mix(in srgb,var(--highlight-light) 45%,transparent)}
.sp-reach .ic{flex:none;color:var(--highlight-light)}
.sp-reach span{min-width:0;white-space:nowrap}
.sp-reach small{display:block;font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-hero-3)}
/* the form side: white, the form on its own (no card), as the sign-in form */
.sp-side{background:var(--white);color:var(--ink-2);display:flex;flex-direction:column;justify-content:center;padding:56px clamp(28px,5vw,84px);border-left:1px solid var(--border-soft)}   /* the menu is on the teal: nothing to clear here */
.sp-box{width:100%;max-width:520px;margin:0 auto}
.fhead{margin-bottom:26px}
.fhead h2{font-size:clamp(28px,2.6vw,34px);color:var(--surface-hero-2);letter-spacing:-.025em}
.fhead h2 span{background:linear-gradient(90deg,var(--accent),var(--accent-green));-webkit-background-clip:text;background-clip:text;color:transparent;animation:none}
.fhead p{margin:8px 0 0;color:var(--ink-3);font-size:15.5px}
.sp-side .fbox{padding:0;background:none;border:0;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none;border-radius:0}
.sp-side .fbox.sent{padding:20px 0}
.sp-side a:not(.btn){color:var(--accent)}
@media (max-width:980px){
  .splitpage{grid-template-columns:1fr;min-height:0}
  .sp-brand{padding:112px 24px 40px}
  .sp-side{padding:40px 20px 56px;border-left:0}
}

/* the form on a split page: tighter, so the page fits a screen without scrolling */
.sp-side .fhead{margin-bottom:20px}
.sp-side .fbox label{margin-bottom:13px}
.sp-side .fbox input:not([type=checkbox]),.sp-side .fbox textarea{margin-top:5px;padding:10px 13px;font-size:15.5px}
.sp-side .fbox textarea{min-height:64px}
.sp-side .fbox fieldset{margin-bottom:13px}
.sp-side .fbox legend{margin-bottom:8px}
.sp-side .picks{gap:6px}.sp-side .pick span{padding:7px 12px;font-size:13.5px}
.sp-side .btn.wide{padding:13px 22px}
.sp-side .fine{margin-top:10px}
.sp-next{margin-top:24px;padding:16px 18px}.sp-next ol{gap:9px}

/* a long read's "On this page" sticks beside it as you scroll: its section mustn't hide overflow (that turns sticky off) */
.s-prose{overflow:visible}
/* split pages: the teal side sits above the white one (as on the client portal and the sign-in page) */
.sp-brand{z-index:2;box-shadow:8px 0 26px -6px rgba(0,0,0,.26),2px 0 6px rgba(0,0,0,.13)}
.sp-side{border-left:0}
@media (max-width:980px){.sp-brand{box-shadow:0 8px 26px -6px rgba(0,0,0,.26),0 2px 6px rgba(0,0,0,.13)}}
/* the form's boxes and choices easier to see on white */
.fbox input:not([type=checkbox]),.fbox textarea,.pick span{border-color:color-mix(in srgb,var(--ink-4) 55%,var(--border))}
.pick span::before{border-color:var(--ink-4)}
/* the white tiles: no green spotlight following the pointer (it read as a smudge on white); the lift, border and shadow stay */
.t-light .card::before{display:none}
/* the white tiles grow a little as they lift */
.t-light a.card:hover,.t-light .card:hover{transform:translateY(-5px) scale(1.025)}
@media (prefers-reduced-motion:reduce){.t-light a.card:hover,.t-light .card:hover{transform:none}}
/* arrived (marketing.js adds .settled): no entrance delay left over, and the cards back on their own quick hover */
.js [data-reveal].settled{transition-delay:0s}
.js .card[data-reveal].settled{transition:transform .35s var(--spring),border-color .25s,box-shadow .35s,background-color .25s}