/* ZERO FAFF SEO page: its own moving parts, on top of case.css and location.css. Every animation name starts with sv,
   so nothing clashes with the shared stylesheets. The page is one climb: the bar fixed at the top shows the level you've
   reached and where Bright Homes ranks, and each level has something to play with. Built by tools/build_seo.py. */

/* ===================================================================== the opening: a search, and a climb to the top */
.sv-hv{width:106%;max-width:680px;justify-self:end;margin-right:-3%;aspect-ratio:6/5.4;position:relative;container-type:inline-size}
.srch{position:absolute;left:0;right:8%;top:2%;border:var(--border);border-radius:22px;background:var(--paper);color:var(--ink);box-shadow:10px 10px 0 #000;padding:3.2cqw;opacity:0;transform:translateY(20px) rotate(-1deg)}
.sv-hv.on .srch{animation:svin .6s cubic-bezier(.2,1.3,.4,1) .15s forwards}
@keyframes svin{to{opacity:1;transform:none}}
.srch-bar{display:flex;align-items:center;gap:2cqw;padding:2.2cqw 3cqw;border:2.5px solid var(--ink);border-radius:999px;background:#fff;font-size:3.4cqw;font-weight:700}
.srch-bar svg{width:4cqw;height:4cqw;flex:0 0 auto;color:var(--ink)}
.srch-q{white-space:nowrap;overflow:hidden}
.srch-caret{width:2px;height:4.2cqw;background:var(--ink);animation:svblink 1s steps(1) infinite}
@keyframes svblink{50%{opacity:0}}
.srch-list{list-style:none;position:relative;height:66cqw;margin-top:3cqw}
.srch-r{position:absolute;left:0;right:0;top:calc(var(--p) * 25%);height:23%;display:grid;align-content:center;gap:.8cqw;padding:0 2.4cqw;border-radius:12px;transition:top .9s cubic-bezier(.5,0,.2,1),background .4s,box-shadow .4s;opacity:0}
.sv-hv.on .srch-r{animation:svfade .4s ease forwards;animation-delay:calc(1.7s + var(--p) * .12s)}
@keyframes svfade{to{opacity:1}}
.srch-u{display:flex;align-items:center;gap:1.4cqw;font-size:2.5cqw;color:rgba(17,23,27,.6)}
.srch-u i{display:grid;place-items:center;width:3.6cqw;height:3.6cqw;border-radius:50%;background:#D7D0C5;font-style:normal;font-size:2.2cqw;font-weight:900;color:var(--ink)}
.srch-u em{display:block;width:22%;height:1.6cqw;border-radius:9px;background:#E3DDD0}
.srch-r b{font-size:3.6cqw;font-weight:800;color:#1A4C8A;line-height:1.1}
.srch-r small{font-size:2.6cqw;line-height:1.3;color:rgba(17,23,27,.7);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding-right:9cqw}
.srch-r b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding-right:9cqw}
.sk{display:block;width:var(--w);height:2.4cqw;border-radius:9px;background:#E3DDD0}
.srch-r b.sk{height:3cqw;background:#C9D6E6}
.srch-r.you{background:#FFF3D6;box-shadow:inset 0 0 0 2.5px var(--ink)}
.srch-r.you .srch-u i{background:var(--brass)}
.srch-up{position:absolute;right:2.4cqw;top:50%;translate:0 -50%;padding:.6cqw 2cqw;border:2px solid var(--ink);border-radius:999px;background:#B7E5B2;font-size:2.6cqw;font-weight:900;opacity:0;scale:.5}
.sv-hv.climbed .srch-r.you{--p:0!important}
.sv-hv.climbed .srch-r.c0{--p:1!important}.sv-hv.climbed .srch-r.c1{--p:2!important}.sv-hv.climbed .srch-r.c2{--p:3!important}
.sv-hv.climbed .srch-up{animation:svpop .45s cubic-bezier(.3,1.6,.5,1) .7s forwards}
@keyframes svpop{to{opacity:1;scale:1}}
.ai-card{position:absolute;right:0;bottom:3%;width:62%;padding:3cqw;border:var(--border);border-radius:20px;background:#26364A;color:var(--canvas);box-shadow:8px 8px 0 #000;opacity:0;transform:translateY(24px) rotate(1.5deg)}
.sv-hv.climbed .ai-card{animation:svin .6s cubic-bezier(.2,1.3,.4,1) 1.4s forwards}
.ai-card p{font-size:3cqw;line-height:1.4;margin:1.6cqw 0 2cqw}
.ai-card p b{color:#F2C46B}
.ai-h{display:inline-flex;align-items:center;gap:1.2cqw;font-size:2.5cqw;font-weight:900;letter-spacing:.06em;text-transform:uppercase;color:#7FB0CC}
.ai-h svg{width:3.2cqw;height:3.2cqw}
.ai-src{display:inline-flex;align-items:center;gap:1.2cqw;padding:.8cqw 2cqw .8cqw 1cqw;border:2px solid var(--canvas);border-radius:999px;font-size:2.4cqw;font-weight:800}
.ai-src i{display:grid;place-items:center;width:3.4cqw;height:3.4cqw;border-radius:50%;background:var(--brass);color:var(--ink);font-style:normal;font-weight:900;font-size:2cqw}
.sv-badge{position:absolute;left:-3%;bottom:19%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.6cqw;width:23cqw;aspect-ratio:1;padding:2cqw;border:var(--border);border-radius:50%;background:var(--brass);color:var(--ink);box-shadow:6px 6px 0 #000;line-height:.9;text-align:center;opacity:0;transform:scale(.3) rotate(-20deg)}
.sv-badge b{font-family:"Big Shoulders",system-ui,sans-serif;font-size:8cqw;font-weight:900;line-height:.85}
.sv-badge small{font-size:max(2cqw,9.5px);font-weight:900;line-height:1;text-transform:uppercase;letter-spacing:.06em;white-space:nowrap}
.sv-hv.climbed .sv-badge{animation:svstamp .5s cubic-bezier(.3,1.6,.5,1) 1.1s forwards}
@keyframes svstamp{to{opacity:1;transform:rotate(-8deg)}}

/* ===================================================================== the climb bar */
.sv-bar{position:fixed;left:50%;top:calc(var(--bar,60px) + 10px);z-index:90;width:min(940px,calc(100% - 2 * var(--fp) - 24px));translate:-50% -160%;transition:translate .5s cubic-bezier(.3,1.3,.5,1);pointer-events:none}
.sv-bar.show{translate:-50% 0}
.sv-in{display:flex;align-items:center;gap:12px;padding:7px 8px 7px 16px;border:var(--border);border-radius:999px;background:var(--paper);color:var(--ink);box-shadow:5px 5px 0 #000}
.sv-lbl{flex:0 0 auto;font-size:13px;font-weight:900;letter-spacing:.07em;text-transform:uppercase;color:rgba(17,23,27,.6)}
.sv-track{flex:1;display:grid;grid-template-columns:repeat(6,1fr);gap:4px}
.sv-st{display:flex;align-items:center;justify-content:center;gap:6px;height:38px;border-radius:999px;font-size:13.5px;font-weight:850;white-space:nowrap;color:rgba(17,23,27,.45);transition:color .3s,background .3s}
.sv-st i{display:grid;place-items:center;width:20px;height:20px;border:2px solid currentColor;border-radius:50%;font-style:normal;font-size:11px;font-weight:900}
.sv-st.done{color:var(--ink)}
.sv-st.done i{background:#B7E5B2;border-color:var(--ink)}
.sv-st.now{color:var(--ink);background:var(--brass);box-shadow:inset 0 0 0 2.5px var(--ink)}
.sv-st.now i{background:var(--paper);border-color:var(--ink)}
.sv-rank{flex:0 0 auto;display:flex;align-items:center;gap:8px;padding:4px 6px 4px 14px;border:2.5px solid var(--ink);border-radius:999px;background:#26364A;color:var(--canvas)}
.sv-rank small{font-size:12px;font-weight:800;letter-spacing:.04em;text-transform:uppercase}
.sv-rn{display:grid;place-items:center;min-width:46px;height:30px;padding:0 8px;border-radius:999px;background:#F2C46B;color:var(--ink);font-family:"Big Shoulders",system-ui,sans-serif;font-size:19px;font-weight:900;font-variant-numeric:tabular-nums}
.sv-rn.hop{animation:svhop .5s ease}
@keyframes svhop{40%{transform:translateY(-6px) scale(1.15)}}

/* ===================================================================== the levels */
.sl-grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(30px,5vw,80px);align-items:center}
.sl-grid > *,.sl-vis > *,.gl > *,.mp > *,.rb > *,.sd > *,.sd-grid > *,.ah-track > *{min-width:0}
.sl-copy h2{font-family:"Melodrama",serif;font-weight:500;font-size:clamp(40px,4.4vw,68px);line-height:.98;margin:18px 0 14px}
.sl-copy .sec-lede{margin:0 0 18px}
.sl-copy .body p{max-width:54ch}
.sl-copy .body p + p{margin-top:12px}
.sl-vis{position:relative;display:grid;gap:22px;container-type:inline-size}
.sl-vis button{font:inherit;cursor:pointer}
.sl-vis button:focus-visible{outline:3px solid #F2C46B;outline-offset:2px}
.hc,.gl,.mp,.sd,.rb{padding:20px;border:var(--border);border-radius:20px;background:var(--paper);color:var(--ink);box-shadow:8px 8px 0 #000}
.gl-t,.rb-t{font-size:13px;font-weight:900;letter-spacing:.07em;text-transform:uppercase;color:rgba(17,23,27,.55)}

/* level 1: the health check */
.hc-h{display:flex;align-items:center;gap:16px;margin-bottom:14px}
.hc-ring{position:relative;flex:0 0 auto;width:92px;height:92px;--v:42}
.hc-ring svg{width:100%;height:100%;transform:rotate(-90deg)}
.hc-ring circle{fill:none;stroke-width:12}
.hc-ring .bg{stroke:#E3DDD0}
.hc-ring .fg{stroke:var(--c,#D9734E);stroke-dasharray:100;stroke-dashoffset:calc(100 - var(--v));stroke-linecap:round;transition:stroke-dashoffset .6s cubic-bezier(.3,1.2,.5,1),stroke .4s}
.hc-ring b{position:absolute;inset:0;display:grid;place-items:center;font-family:"Big Shoulders",system-ui,sans-serif;font-size:32px;font-weight:900;font-variant-numeric:tabular-nums}
.hc-t{display:grid;gap:2px}
.hc-t b{font-size:22px;font-weight:900;text-transform:uppercase;letter-spacing:.03em}
.hc-t small{font-size:15px;font-weight:700;color:rgba(17,23,27,.65)}
.hc-list{list-style:none;display:grid;gap:7px}
.hc-list li{display:grid;grid-template-columns:24px 1fr auto;align-items:center;gap:10px;padding:8px 8px 8px 10px;border:2px solid rgba(17,23,27,.14);border-radius:12px;background:#fff;transition:background .3s,border-color .3s}
.hc-x{position:relative;width:22px;height:22px;border:2px solid var(--ink);border-radius:50%;background:#F4C7B5}
.hc-x::before,.hc-x::after{content:"";position:absolute;left:50%;top:50%;width:10px;height:2.5px;background:var(--ink);translate:-50% -50%;rotate:45deg}
.hc-x::after{rotate:-45deg}
.hc-l{display:grid;line-height:1.15}
.hc-l b{font-size:15.5px;font-weight:800}
.hc-l small{font-size:13px;color:rgba(17,23,27,.6)}
.hc-fix{padding:6px 12px;border:2px solid var(--ink);border-radius:999px;background:var(--paper);color:var(--ink);font-size:13.5px!important;font-weight:850;transition:transform .2s,box-shadow .2s,background .2s}
.hc-fix:hover{transform:translate(-1px,-2px);box-shadow:2px 3px 0 var(--ink);background:var(--brass)}
.hc-list li.ok{background:#EAF6E8;border-color:#8FC489}
.hc-list li.ok .hc-x{background:#B7E5B2}
.hc-list li.ok .hc-x::before{width:6px;rotate:45deg;translate:-90% -10%}
.hc-list li.ok .hc-x::after{width:11px;translate:-30% -60%}
.hc-list li.ok .hc-l b{text-decoration:line-through;text-decoration-thickness:2px;opacity:.6}
.hc-list li.ok .hc-fix{visibility:hidden}
.hc-all{margin-top:12px;padding:10px 18px;border:2.5px solid var(--ink);border-radius:999px;background:var(--brass);color:var(--ink);font-size:15px!important;font-weight:900;text-transform:uppercase;letter-spacing:.04em;box-shadow:3px 3px 0 var(--ink);transition:transform .2s,box-shadow .2s}
.hc-all:hover{transform:translate(-1px,-2px);box-shadow:4px 5px 0 var(--ink)}
.hc-all[hidden]{display:none}
.hc-done{margin-top:10px;font-size:15.5px;font-weight:800;color:#2F6A2A;min-height:1px}

/* level 2: the Google listing */
.gl{display:grid;gap:12px}
.gl-f{display:grid;gap:6px}
.gl-f > span{display:flex;justify-content:space-between;font-size:13.5px;font-weight:900;text-transform:uppercase;letter-spacing:.04em}
.gl-c{font-style:normal;font-variant-numeric:tabular-nums;color:#2F6A2A}
.gl-c.over{color:#B3402A}
.gl-in{width:100%;padding:10px 12px;border:2.5px solid var(--ink);border-radius:12px;background:#fff;color:var(--ink);font:inherit;font-size:16px;line-height:1.35;resize:vertical}
.gl-in:focus{outline:3px solid #7FB0CC;outline-offset:1px}
.gl-prev{padding:14px 16px;border:2px dashed rgba(17,23,27,.3);border-radius:14px;background:#fff;font-family:Arial,Helvetica,sans-serif}
.gl-u{display:flex;align-items:center;gap:10px;margin-bottom:6px}
.gl-u i{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--brass);font-style:normal;font-weight:900;font-size:13px;color:var(--ink)}
.gl-u span{display:grid;line-height:1.2}
.gl-u b{font-size:14px;font-weight:400;color:#202124}
.gl-u small{font-size:12px;color:#4D5156}
.gl-pt{display:block;font-size:20px;font-weight:400;line-height:1.3;color:#1A0DAB;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.gl-pd{display:block;margin-top:4px;font-size:14px;line-height:1.55;color:#4D5156}
.gl-tip{font-size:15px;font-weight:700;line-height:1.35}

/* level 3: the map pack */
.mp{display:grid;gap:12px}
.mp-map{height:110px;border:2.5px solid var(--ink);border-radius:14px;overflow:hidden}
.mp-map svg{width:100%;height:100%;display:block}
.mp-me{transform-box:fill-box;transform-origin:50% 100%;transition:transform .5s cubic-bezier(.3,1.6,.5,1)}
.mp.top3 .mp-me{transform:scale(1.35)}
.mp-list{list-style:none;position:relative;height:calc(5 * 64px - 6px + 18px)}
.mp-list::after{content:"Top three";position:absolute;right:10px;top:calc(3 * 64px - 6px + 12px);translate:0 -50%;padding:0 8px;background:var(--paper);font-size:11px;font-weight:900;letter-spacing:.08em;line-height:1;text-transform:uppercase;color:rgba(17,23,27,.55);z-index:1}
.mp-list::before{content:"";position:absolute;left:-6px;right:-6px;top:calc(3 * 64px - 6px + 12px);border-top:2.5px dashed rgba(17,23,27,.4)}
.mp-r{position:absolute;left:0;right:0;top:calc(var(--p) * 64px + clamp(0px,(var(--p) - 2.5) * 999px,18px));height:58px;display:grid;grid-template-columns:1fr auto;grid-template-rows:auto auto;align-content:center;column-gap:10px;row-gap:3px;padding:0 12px;border:2px solid rgba(17,23,27,.14);border-radius:12px;background:#fff;transition:top .7s cubic-bezier(.5,0,.2,1),opacity .4s}
.mp-r b{font-size:16px;font-weight:850}
.mp-r b.sk{height:12px;align-self:center;background:#C9D6E6}
.mp-r small{font-size:13px;color:rgba(17,23,27,.6)}
.mp-r small.sk{height:9px}
.mp-st{grid-row:span 2;display:grid;justify-items:end;gap:3px}
.mp-stars{display:flex;gap:1px;color:#E7A33E}
.mp-stars svg{width:14px;height:14px;fill:currentColor}
.mp-stars.dim{color:#D7D0C5}
.mp-rv{font-style:normal;font-size:12.5px;font-weight:700;color:rgba(17,23,27,.6)}
.mp-rv.sk,.mp-st .sk{width:44px;height:9px}
.mp-r.you{border:2.5px solid var(--ink);background:#FFF3D6;box-shadow:3px 3px 0 var(--ink);z-index:2}
.mp-pos{font-size:16px;font-weight:700}
.mp-pos b{font-weight:900}
.mp-tog{display:flex;flex-wrap:wrap;gap:7px}
.mp-t{display:inline-flex;align-items:center;gap:8px;padding:8px 13px 8px 9px;border:2px solid var(--ink);border-radius:999px;background:var(--paper);color:var(--ink);font-size:14px!important;font-weight:800;transition:background .2s,transform .2s,box-shadow .2s}
.mp-t i{position:relative;width:30px;height:18px;border:2px solid var(--ink);border-radius:999px;background:#D7D0C5;transition:background .25s}
.mp-t i::after{content:"";position:absolute;left:2px;top:2px;width:10px;height:10px;border-radius:50%;background:var(--ink);transition:translate .25s cubic-bezier(.3,1.5,.5,1)}
.mp-t[aria-pressed="true"]{background:var(--brass);box-shadow:3px 3px 0 var(--ink)}
.mp-t[aria-pressed="true"] i{background:#B7E5B2}
.mp-t[aria-pressed="true"] i::after{translate:12px 0}
.mp-t:hover{transform:translate(-1px,-2px)}

/* level 4: links arrive */
.au{position:relative;aspect-ratio:1.1;max-width:560px;width:100%;justify-self:center}
.au-lines{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.au-lines line{stroke:var(--fg);stroke-width:.45;stroke-dasharray:100;stroke-dashoffset:100;opacity:.55}
.au.on .au-lines line{animation:svdraw .6s ease forwards;animation-delay:calc(.6s + var(--i) * .35s)}
@keyframes svdraw{to{stroke-dashoffset:0}}
.au-n{position:absolute;left:var(--x);top:var(--y);translate:-50% -50%;padding:7px 12px;border:2.5px solid var(--ink);border-radius:999px;background:var(--paper);color:var(--ink);font-size:clamp(12px,2.6cqw,15px);font-weight:850;white-space:nowrap;box-shadow:3px 3px 0 #000;opacity:0;scale:.5}
.au.on .au-n{animation:svpop .45s cubic-bezier(.3,1.6,.5,1) forwards;animation-delay:calc(.4s + var(--i) * .35s)}
.au-me{position:absolute;left:50%;top:52%;translate:-50% -50%;display:inline-flex;align-items:center;gap:8px;padding:12px 18px 12px 12px;border:var(--border);border-radius:999px;background:#FFF3D6;color:var(--ink);font-size:clamp(14px,3cqw,18px);font-weight:900;box-shadow:6px 6px 0 #000;z-index:2}
.au-me i{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--brass);font-style:normal}
.au.on .au-me{animation:svthrob 3.5s ease 3.3s 1}
@keyframes svthrob{0%,100%{scale:1}10%{scale:1.1}20%{scale:1}}
.au-m{justify-self:center;display:grid;grid-template-columns:auto 1fr;gap:4px 10px;align-items:center;width:min(360px,80%);padding:10px 14px;border:2.5px solid var(--ink);border-radius:14px;background:var(--paper);color:var(--ink);box-shadow:4px 4px 0 #000;z-index:2}
.au-m > span{font-size:13px;font-weight:900;text-transform:uppercase;letter-spacing:.06em}
.au-m > i{display:block;height:12px;border:2px solid var(--ink);border-radius:999px;background:#E3DDD0;overflow:hidden}
.au-m > i > i{display:block;width:12%;height:100%;background:#46553A;transition:width 2.6s cubic-bezier(.3,0,.3,1) .6s}
.au-m.on > i > i{width:86%}
.au-m > b{grid-column:1/-1;font-size:14px;font-weight:800}

/* level 5: structured data */
.sd{display:grid;gap:14px}
.sd-tabs{display:flex;flex-wrap:wrap;gap:6px}
.sd-b{padding:8px 14px;border:2px solid var(--ink);border-radius:999px;background:var(--paper);color:var(--ink);font-size:14px!important;font-weight:850;transition:background .2s,box-shadow .2s,transform .2s}
.sd-b:hover{transform:translate(-1px,-2px)}
.sd-b.on{background:var(--brass);box-shadow:3px 3px 0 var(--ink)}
.sd-grid{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1.05fr);gap:10px;align-items:center}
.sd-code{margin:0;padding:14px;border:2.5px solid var(--ink);border-radius:14px;background:#11171B;color:#DCE8EC;font:500 12.5px/1.5 ui-monospace,SFMono-Regular,Menlo,monospace;white-space:pre-wrap;overflow-wrap:anywhere}
.sd-code code[hidden]{display:none}
.sd-ar svg{width:26px;height:26px;fill:none;stroke:var(--ink);stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.rr{padding:14px;border:2px dashed rgba(17,23,27,.3);border-radius:14px;background:#fff;font-family:Arial,Helvetica,sans-serif;display:grid;gap:5px;animation:svin .45s cubic-bezier(.3,1.4,.5,1)}
.rr[hidden]{display:none}
.rr-u{display:flex;align-items:center;gap:8px;font-size:12.5px;color:#4D5156}
.rr-u i{display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:var(--brass);font-style:normal;font-weight:900;font-size:11px;color:var(--ink)}
.rr-t{font-size:17px;font-weight:400;line-height:1.3;color:#1A0DAB}
.rr-d{font-size:13.5px;line-height:1.5;color:#4D5156}
.rr-d em,.rr-pr{font-style:normal;font-weight:700;color:#202124}
.rr-links{display:flex;flex-wrap:wrap;gap:6px}
.rr-links em{padding:3px 10px;border:1px solid #DADCE0;border-radius:999px;font-style:normal;font-size:12.5px;color:#1A0DAB}
.rr-ev{display:flex;align-items:center;gap:10px;padding:8px;border:1px solid #DADCE0;border-radius:10px}
.rr-ev em{padding:6px 8px;border-radius:8px;background:#E8F0FE;font-style:normal;font-weight:700;font-size:12.5px;color:#1A4C8A;white-space:nowrap}
.rr-ev span{display:grid;font-size:14px;color:#202124}
.rr-ev small{font-size:12.5px;color:#4D5156}
.sd-note{font-size:13.5px;line-height:1.4;color:rgba(17,23,27,.62)}
.adv{display:flex;flex-wrap:wrap;gap:8px}
.adv span{padding:8px 14px;border:2px solid var(--fg);border-radius:999px;font-size:14.5px;font-weight:800;color:var(--fg)}

/* level 6: the crawler switchboard and an AI answer */
.rb{display:grid;gap:10px}
.rb-list{list-style:none;display:grid;gap:5px}
.rb-r{display:grid;grid-template-columns:1fr auto;align-items:center;gap:10px;padding:7px 8px 7px 12px;border:2px solid rgba(17,23,27,.14);border-radius:12px;background:#fff;transition:background .25s,border-color .25s}
.rb-r.train{background:#F7F4EC}
.rb-r.train:first-of-type{margin-top:0}
.rb-n{display:grid;line-height:1.2}
.rb-n b{font:800 14.5px/1.2 ui-monospace,SFMono-Regular,Menlo,monospace}
.rb-n small{font-size:13px;color:rgba(17,23,27,.62)}
.rb-s{position:relative;width:52px;height:30px;border:2.5px solid var(--ink);border-radius:999px;background:#F4C7B5;transition:background .25s}
.rb-s i{position:absolute;left:3px;top:3px;width:19px;height:19px;border:2px solid var(--ink);border-radius:50%;background:var(--paper);transition:translate .25s cubic-bezier(.3,1.5,.5,1)}
.rb-s.on{background:#B7E5B2}
.rb-s.on i{translate:21px 0}
.rb-r.off{background:#FCEDE7;border-color:#E2A893}
.rb-txt{margin:0;padding:12px 14px;border:2.5px solid var(--ink);border-radius:12px;background:#11171B;color:#DCE8EC;font:500 13px/1.5 ui-monospace,SFMono-Regular,Menlo,monospace;white-space:pre-wrap;min-height:4.6em}
.rb-v{font-size:15px;font-weight:700;line-height:1.4;min-height:1.4em}
.rb-v.bad{color:#B3402A}
.ac{display:grid;gap:10px;justify-items:end}
.ac-q{padding:10px 16px;border:2.5px solid var(--ink);border-radius:18px 18px 4px 18px;background:var(--paper);color:var(--ink);font-size:16px;font-weight:700;box-shadow:4px 4px 0 #000}
.ac-a{justify-self:start;max-width:92%;padding:14px 16px;border:2.5px solid var(--canvas);border-radius:18px 18px 18px 4px;background:#26364A;color:var(--canvas);box-shadow:5px 5px 0 #000;transition:opacity .4s,filter .4s}
.ac-a p{font-size:15.5px;line-height:1.45;margin:8px 0 10px}
.ac-a p b{color:#F2C46B}
.ac-a .ai-h,.ac-a .ai-src{font-size:12px}
.ac-a .ai-h svg{width:14px;height:14px}
.ac-a .ai-src{margin-right:6px;padding:3px 10px 3px 4px}
.ac-a .ai-src i{width:18px;height:18px;font-size:10px}
.ac-a .ai-src.gr{padding-left:10px}
.ac-a.gone{opacity:.35;filter:grayscale(1)}
.ac-a.gone p b{color:inherit;text-decoration:line-through}

/* ===================================================================== ahead of the curve */
.ah-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin-top:clamp(24px,3vw,36px)}
.ah-c{display:grid;align-content:start;gap:8px;padding:20px;border:var(--border);border-radius:20px;background:var(--paper);color:var(--ink);box-shadow:7px 7px 0 #000;opacity:0;transform:translateY(20px)}
.ah-grid.on .ah-c{animation:svin .5s cubic-bezier(.3,1.4,.5,1) forwards;animation-delay:calc(.15s + var(--i) * .15s)}
.ah-c b{font-size:21px;font-weight:900;line-height:1.1}
.ah-c p{font-size:15.5px;line-height:1.4}
.ah-s{justify-self:start;padding:4px 11px;border:2px solid var(--ink);border-radius:999px;background:#B7E5B2;font-size:12.5px;font-weight:900;text-transform:uppercase;letter-spacing:.06em}
.ah-s.soon{background:#F2C46B;animation:svsoon 2s ease-in-out infinite}
@keyframes svsoon{50%{box-shadow:0 0 0 5px rgba(242,196,107,.45)}}
.ah-c.ah-c{border-style:solid}
.ah-c.ah-c:last-child{border-style:dashed;background:#FFF8E6}
.ah-track{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.9fr);gap:clamp(20px,4vw,50px);align-items:end;margin-top:clamp(28px,4vw,44px)}
.ah-tx b{display:block;font-size:22px;font-weight:900;margin-bottom:6px}
.ah-tx p{max-width:56ch}
.ah-bars{position:relative;display:flex;align-items:flex-end;gap:8px;height:150px;padding:12px 14px 30px;border:var(--border);border-radius:18px;background:var(--paper);box-shadow:6px 6px 0 #000}
.ah-bars span{flex:1;height:var(--h);border:2px solid var(--ink);border-radius:6px 6px 0 0;background:#7FB0CC;transform:scaleY(0);transform-origin:bottom}
.ah-bars span:last-of-type{background:#F2C46B}
.ah-bars.on span{animation:svgrow .6s cubic-bezier(.3,1.3,.5,1) forwards;animation-delay:calc(.2s + var(--i) * .12s)}
@keyframes svgrow{to{transform:none}}
.ah-bars em{position:absolute;left:14px;bottom:7px;font-style:normal;font-size:12.5px;font-weight:900;text-transform:uppercase;letter-spacing:.05em;color:rgba(17,23,27,.6)}

/* ===================================================================== how we work: the step icons */
.ci{overflow:visible}
.ci *{transform-box:fill-box;transform-origin:center}
.ci-aud .mg{animation:svscan 3.2s ease-in-out infinite}
@keyframes svscan{0%,100%{transform:translate(-14px,-24px)}50%{transform:translate(0,0)}}
.ci-plan .rt{animation:svdash 1.6s linear infinite}
@keyframes svdash{to{stroke-dashoffset:-24}}
.ci-plan .fl{transform-origin:0 100%;animation:svwave 1.6s ease-in-out infinite}
@keyframes svwave{50%{transform:skewY(-6deg)}}
.ci-fix .g1{animation:svspin 5s linear infinite}.ci-fix .g2{animation:svspin 3.4s linear infinite reverse}
@keyframes svspin{to{transform:rotate(360deg)}}
.ci-make .ln{stroke-dasharray:100;stroke-dashoffset:100;animation:3.6s linear infinite}
.ci-make .l1{animation-name:svw1}.ci-make .l2{animation-name:svw2}.ci-make .l3{animation-name:svw3}
@keyframes svw1{0%,6%{stroke-dashoffset:100;opacity:1}24%,84%{stroke-dashoffset:0;opacity:1}94%,100%{stroke-dashoffset:0;opacity:0}}
@keyframes svw2{0%,28%{stroke-dashoffset:100;opacity:1}44%,84%{stroke-dashoffset:0;opacity:1}94%,100%{stroke-dashoffset:0;opacity:0}}
@keyframes svw3{0%,48%{stroke-dashoffset:100;opacity:1}66%,84%{stroke-dashoffset:0;opacity:1}94%,100%{stroke-dashoffset:0;opacity:0}}
/* the pencil's tip is at (58,80); each step puts it on the start or end of a line: (32,36)-(74,36), (32,50)-(68,50), (32,64)-(72,64) */
.ci-make .pen{transform-box:view-box;transform-origin:0 0;animation:svpen 3.6s linear infinite}
@keyframes svpen{0%{transform:translate(-14px,-34px)}6%{transform:translate(-26px,-44px)}24%{transform:translate(16px,-44px)}28%{transform:translate(-26px,-30px)}44%{transform:translate(10px,-30px)}48%{transform:translate(-26px,-16px)}66%{transform:translate(14px,-16px)}76%,100%{transform:translate(-14px,-34px)}}
.ci-link .c1{animation:svlinkl 2.8s ease-in-out infinite}.ci-link .c2{animation:svlinkr 2.8s ease-in-out infinite}
@keyframes svlinkl{0%,100%{transform:translateX(-8px)}40%,70%{transform:none}}
@keyframes svlinkr{0%,100%{transform:translateX(8px)}40%,70%{transform:none}}
.ci-ai .sp{animation:svtwk 2.4s ease-in-out infinite}
@keyframes svtwk{0%,100%{transform:scale(.8) rotate(0)}50%{transform:scale(1.15) rotate(45deg)}}
@keyframes svwrite{0%,10%{stroke-dashoffset:100}35%,85%{stroke-dashoffset:0}100%{stroke-dashoffset:0;opacity:0}}
.ci-rep .cv{stroke-dasharray:100;stroke-dashoffset:100;animation:svwrite 3.6s ease infinite}
.ci-top .tw{animation:svtwk 2s ease-in-out infinite}

/* ===================================================================== smaller screens */
@media (max-width:980px){
  .sv-hv{width:100%;max-width:600px;margin:clamp(10px,3vw,30px) auto 0;justify-self:center}
  .seo-hero .scroll-cue{display:none}
  .ah-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:1000px){
  .sl-grid,.ah-track{grid-template-columns:1fr}
}
@media (max-width:720px){
  .sv-hv{max-width:460px}
  .sv-bar{width:calc(100% - 2 * var(--fp) - 16px);top:calc(var(--bar,60px) + 6px)}
  .sv-in{padding:5px;gap:6px}
  .sv-lbl{display:none}
  .sv-st{height:32px;font-size:0;gap:0}
  .sv-st i{width:22px;height:22px;font-size:11px}
  .sv-rank{padding:3px}
  .sv-rank small{display:none}
  .sv-rn{min-width:40px;height:26px;font-size:16px}
  .hc,.gl,.mp,.sd,.rb{padding:14px}
  .hc-ring{width:74px;height:74px}
  .hc-ring b{font-size:26px}
  .hc-list li{grid-template-columns:22px 1fr auto;gap:8px}
  .sd-grid{grid-template-columns:1fr}
  .sd-ar{justify-self:center;rotate:90deg}
  .ah-grid{grid-template-columns:1fr}
  .au{aspect-ratio:.9}
  .au-n{padding:5px 9px}
  .mp-t{font-size:13px!important}
}
@media (prefers-reduced-motion:reduce){
  .sv-hv *,.sl-vis *,.ah-grid *,.ah-bars *,.ci *,.sv-rn{animation:none!important;transition:none!important}
  .sv-hv *,.au-n,.ah-c{opacity:1!important;transform:none!important;scale:1!important}
  .au-lines line{stroke-dashoffset:0}
  .au-m > i > i{width:86%}
  .au-lines line{stroke-dashoffset:0}
  .ah-bars span{transform:none}
}
.cta-ch .cta-sub{max-width:52ch}