/* First Mention blog (Arcade). Shared by /blog/ and every article. Charts are HTML tables drawn as bars,
   so the numbers stay readable text for screen readers and AI engines. Red = AI engines, sky = Google. */
.bl-hero .wrap{position:relative;z-index:1}
.bl-in{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:48px;align-items:center}
.bl-hero h1{font-size:clamp(36px,4.8vw,72px);max-width:16ch}
.bl-crumb{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 14px;font:900 12px/1 var(--body);letter-spacing:.12em}
.bl-crumb a{color:var(--ink);text-decoration-thickness:2px;text-underline-offset:3px}
.bl-crumb span{opacity:.55}
.bl-meta{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 18px;padding:0;list-style:none}
.bl-meta li{display:inline-flex;align-items:center;gap:6px;padding:7px 9px;background:#fff;border:3px solid var(--ink);font:400 11px/1 var(--pix);letter-spacing:.06em}
.bl-meta li:first-child{background:var(--ink);color:var(--yel)}
.bl-meta .i{font-size:14px}

/* ---------- hero: out of every 100 local businesses ---------- */
.wf{position:relative;margin:0;background:#fff;border:var(--bw) solid var(--ink);box-shadow:10px 10px 0 var(--ink);padding:18px 18px 14px}
.wf-t{margin:0 0 14px;font:900 15px/1.2 var(--body);letter-spacing:.08em}
.wf-pair{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.wf-g{display:grid;grid-template-columns:repeat(10,minmax(0,1fr));gap:3px}
.wf-g i{display:block;aspect-ratio:1;background:#F1E8FF;border:2px solid #DCD0EE}
.wf-g i.on{background:var(--sky);border-color:var(--ink)}
.wf-ai .wf-g i.on{background:var(--red)}
.wf-n{display:flex;align-items:baseline;gap:8px;margin-top:10px}
.wf-n b{font:400 clamp(38px,4vw,54px)/.9 var(--disp);font-variant-numeric:tabular-nums}
.wf-n span{font:900 12px/1.15 var(--body);letter-spacing:.08em}
.wf-k{display:inline-block;width:14px;height:14px;border:2px solid var(--ink);background:var(--sky);vertical-align:-2px;margin-right:6px}
.wf-ai .wf-k{background:var(--red)}
.wf-src{margin:14px 0 0;padding-top:10px;border-top:3px dashed var(--ink);font:400 10.5px/1.4 var(--pix);letter-spacing:.03em}
.grow .wf-g i.on{animation:wfpop .34s cubic-bezier(.2,1.6,.4,1) both;animation-delay:calc(var(--i) * 14ms)}
@keyframes wfpop{from{transform:scale(0);opacity:0}}

/* ---------- the five numbers ---------- */
.bl-five-band{padding:64px 0}
.bl-five-band .wrap{position:relative;z-index:1}
.bl-five-band .sec-head{color:#fff;font-size:clamp(34px,4vw,58px)}
.bl-five{list-style:none;margin:28px 0 0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:16px}
.bl-five a{height:100%;display:flex;flex-direction:column;gap:12px;padding:16px;background:var(--c);color:var(--ink);border:var(--bw) solid #fff;box-shadow:6px 6px 0 var(--red);text-decoration:none;transition:transform .12s,box-shadow .12s}
.bl-five li:nth-child(1) a{--c:var(--yel)} .bl-five li:nth-child(2) a{--c:var(--sky)} .bl-five li:nth-child(3) a{--c:var(--mint)}
.bl-five li:nth-child(4) a{--c:#fff} .bl-five li:nth-child(5) a{--c:var(--lav)}
.bl-five a:hover{transform:translate(-2px,-3px);box-shadow:8px 9px 0 var(--red)}
.bl-five a:active{transform:translate(4px,4px);box-shadow:0 0 0 var(--red)}
.bl-five a:focus-visible{outline:4px solid var(--yel);outline-offset:4px}
.bl-five b{font:400 clamp(40px,3.6vw,52px)/.9 var(--disp);font-variant-numeric:tabular-nums}
.bl-five span{font:800 13.5px/1.4 var(--body);letter-spacing:.04em}
.bl-five em{margin-top:auto;display:inline-flex;align-items:center;gap:6px;font:400 10px/1 var(--pix);font-style:normal;letter-spacing:.06em}
.bl-five em .i{transition:transform .15s}
.bl-five a:hover em .i{transform:translateY(3px)}

/* ---------- the article column ---------- */
.bl-body{background:var(--paper);padding:24px 0 72px}
.bl-col{max-width:780px;margin:0 auto}
.bl-body .bl-sec{padding:56px 0 0;border-top:0;background:none;scroll-margin-top:calc(var(--nav) + 16px)}
.bl-sec h2{display:flex;align-items:flex-start;gap:14px;font-size:clamp(32px,4vw,52px);line-height:1;text-wrap:balance}
.bl-ico{flex:none;width:48px;height:48px;display:grid;place-items:center;background:var(--c,var(--red));border:var(--bw) solid var(--ink);box-shadow:4px 4px 0 var(--ink);color:var(--ink);font-size:22px;margin-top:-4px}
.bl-sec p{margin:18px 0 0;max-width:62ch;font-size:17px;font-weight:700;line-height:1.62;letter-spacing:.03em}
.bl-sec p b{font-weight:900}
.bl-sec a:not(.btn){color:var(--ink);text-decoration-thickness:3px;text-underline-offset:3px;text-decoration-color:var(--red)}
.bl-sec a:not(.btn):hover{background:var(--yel)}
.bl-sec .bl-pull{position:relative;max-width:none;margin:30px 0 4px;padding:20px 22px;background:var(--red);color:#fff;border:var(--bw) solid var(--ink);box-shadow:8px 8px 0 var(--ink);font:400 clamp(24px,3vw,36px)/1.08 var(--disp);text-wrap:balance;transform:rotate(-1deg)}
.bl-pull span{text-shadow:3px 3px 0 var(--ink)}

/* ---------- figures: bar charts drawn as tables ---------- */
.bl-fig{position:relative;margin:28px 0 0;background:#fff;border:var(--bw) solid var(--ink);box-shadow:8px 8px 0 var(--ink);padding:18px 18px 14px}
.bl-fig .bl-ft{max-width:none;margin:0;font:900 15px/1.25 var(--body);letter-spacing:.08em}
.bl-fig .bl-fs{max-width:none;margin:4px 0 0;font:800 12px/1.35 var(--body);letter-spacing:.06em;color:var(--muted)}
.bl-key{display:flex;flex-wrap:wrap;gap:6px 16px;margin:12px 0 0;padding:0;list-style:none;font:900 11.5px/1 var(--body);letter-spacing:.08em}
.bl-key li{display:inline-flex;align-items:center;gap:7px}
.bl-key i{width:16px;height:16px;border:3px solid var(--ink);background:var(--red)}
.bl-key i.g{background:var(--sky)}
.bars{--max:100;display:grid;gap:10px;margin:16px 0 0;width:100%;border-collapse:collapse}
.bars tbody{display:grid;gap:10px}
.bars tr{display:grid;grid-template-columns:minmax(0,10.5em) minmax(0,1fr);align-items:center;gap:12px;padding:3px 4px;margin:0 -4px;outline:0;cursor:default}
.bars tr:focus-visible{outline:3px solid var(--ink);outline-offset:2px}
.bars tr.hot{background:#FFF6CF}
.bars th{text-align:left;font:900 12.5px/1.2 var(--body);letter-spacing:.08em}
.bars td{padding:0}
.trk{display:flex;align-items:center;gap:10px;min-height:40px}
.bar{flex:none;display:block;height:34px;width:max(9px,calc(var(--v) / var(--max) * (100% - 96px)));background:var(--red);border:3px solid var(--ink);box-shadow:3px 3px 0 var(--ink);transform-origin:left center}
.bar.g{background:var(--sky)}
.val{font:400 clamp(22px,2.4vw,28px)/1 var(--disp);font-variant-numeric:tabular-nums;white-space:nowrap}
.grow .bar{animation:blgrow .9s cubic-bezier(.2,1.25,.4,1) both;animation-delay:calc(var(--r,0) * 120ms)}
@keyframes blgrow{from{transform:scaleX(0)}}
.bl-sec .bl-src,.bl-src{max-width:none;margin:14px 0 0;padding-top:10px;border-top:3px dashed var(--ink);font:400 10.5px/1.45 var(--pix);letter-spacing:.03em}
.bl-src a{color:var(--ink)}
.bl-tip{position:absolute;z-index:5;left:0;top:0;max-width:min(300px,calc(100% - 24px));padding:9px 11px;background:var(--ink);color:#fff;border:3px solid var(--yel);box-shadow:4px 4px 0 var(--red);font:800 12px/1.35 var(--body);letter-spacing:.05em;pointer-events:none;opacity:0;transform:translateY(4px);transition:opacity .12s,transform .12s}
.bl-tip.on{opacity:1;transform:none}

/* ---------- stat tiles ---------- */
.bl-stats{list-style:none;margin:28px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.bl-stats li{display:flex;flex-direction:column;gap:8px;padding:16px;background:var(--c,#fff);border:var(--bw) solid var(--ink);box-shadow:6px 6px 0 var(--ink)}
.bl-stats li:nth-child(1){--c:var(--yel)} .bl-stats li:nth-child(2){--c:#fff} .bl-stats li:nth-child(3){--c:var(--mint)}
.bl-stats b{font:400 clamp(34px,3.6vw,46px)/.95 var(--disp)}
.bl-stats b small{display:block;margin-bottom:4px;font:900 11px/1 var(--body);letter-spacing:.12em}
.bl-stats span{font:800 13px/1.35 var(--body);letter-spacing:.05em}
.bl-sec .bl-stats+.bl-src{border-top:0;padding-top:0}
.bl-inline{display:flex;flex-wrap:wrap;align-items:center;gap:12px 18px;margin-top:24px}
.bl-inline small{font:400 11px/1.4 var(--pix);letter-spacing:.04em}

/* ---------- price tags: a $10 click at 3.3% a month ---------- */
.pt-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:10px 16px;margin:18px 0 4px}
.pt{width:min(240px,100%);height:auto;overflow:visible}
.pt-mid{display:grid;justify-items:center;gap:6px;font:400 11px/1 var(--pix);letter-spacing:.05em;text-align:center}
.pt-mid .i{font-size:30px;color:var(--red)}
.grow .pt2{animation:ptswing 1.4s cubic-bezier(.2,1.5,.4,1) .3s both;transform-origin:34px 55px}
@keyframes ptswing{0%{transform:rotate(-14deg) translateY(-8px);opacity:0}40%{opacity:1}100%{transform:none}}

/* ---------- what to do this week ---------- */
.bl-do{background:var(--mint);padding:64px 0;border-top:var(--bw) solid var(--ink);border-bottom:var(--bw) solid var(--ink)}
.bl-do .sec-head{font-size:clamp(34px,4.4vw,62px)}
.bl-steps{list-style:none;margin:28px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;counter-reset:s}
.bl-steps li{position:relative;display:flex;flex-direction:column;gap:10px;padding:20px 18px 18px;background:#fff;border:var(--bw) solid var(--ink);box-shadow:8px 8px 0 var(--ink)}
.bl-steps li::before{counter-increment:s;content:counter(s);position:absolute;top:-18px;left:14px;width:40px;height:40px;display:grid;place-items:center;background:var(--red);color:#fff;border:var(--bw) solid var(--ink);font:900 20px/1 "Archivo",sans-serif;font-stretch:125%}
.bl-steps h3{margin-top:12px;font-size:26px}
.bl-steps p{margin:0;font-size:14.5px;font-weight:700;line-height:1.5}
.bl-steps a:not(.btn){color:var(--ink);text-decoration-thickness:3px;text-underline-offset:3px;text-decoration-color:var(--red)}
.bl-steps .btn{align-self:flex-start;margin-top:auto;font-size:13px;padding:12px 14px}

/* ---------- we tested it on ourselves ---------- */
.bl-proof{background:var(--sky);padding:64px 0}
.bl-proof .sec-head{font-size:clamp(34px,4.4vw,62px)}
.bl-proof .sec-lede{font-size:16px}
.bl-pc{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;margin-top:28px}
.bl-pc article{display:flex;flex-direction:column;gap:10px;padding:20px 18px 18px;background:#fff;border:var(--bw) solid var(--ink);box-shadow:8px 8px 0 var(--ink)}
.bl-pc .tag{align-self:flex-start;font:400 11px/1 var(--pix);padding:5px 7px;background:var(--ink);color:var(--yel)}
.bl-pc b.n{font:400 clamp(46px,5vw,68px)/.9 var(--disp);font-variant-numeric:tabular-nums}
.bl-pc p{margin:0;font-size:14.5px;font-weight:700;line-height:1.5}
.bl-pc a{color:var(--ink);text-decoration-thickness:3px;text-underline-offset:3px;text-decoration-color:var(--red)}
.meter{display:block;height:26px;background:#F1E8FF;border:3px solid var(--ink);position:relative}
.meter i{position:absolute;inset:0 auto 0 0;width:var(--w);background:var(--red);border-right:3px solid var(--ink);transform-origin:left}
.pips{display:flex;gap:6px}
.pips i{flex:1;height:26px;background:#F1E8FF;border:3px solid var(--ink)}
.pips i.on{background:var(--red)}
.pips i.first{background:var(--yel)}
.pips-k{display:flex;flex-wrap:wrap;gap:4px 14px;font:900 11px/1 var(--body);letter-spacing:.08em}
.pips-k span{display:inline-flex;align-items:center;gap:6px}
.pips-k i{width:13px;height:13px;border:2px solid var(--ink);background:var(--red)}
.pips-k i.first{background:var(--yel)}
.grow .meter i{animation:blgrow 1s cubic-bezier(.2,1.25,.4,1) both}
.grow .pips i.on{animation:wfpop .3s cubic-bezier(.2,1.6,.4,1) both;animation-delay:calc(var(--i) * 110ms)}

/* ---------- sources ---------- */
.bl-refs{background:var(--paper);padding:56px 0 64px}
.bl-refs h2{font-size:clamp(28px,3vw,40px)}
.bl-refs ul{list-style:none;margin:20px 0 0;padding:0;display:grid;gap:10px}
.bl-refs li{display:grid;grid-template-columns:auto minmax(0,1fr);gap:12px;align-items:start;padding:12px 14px;background:#fff;border:3px solid var(--ink)}
.bl-refs li .i{font-size:20px;margin-top:1px}
.bl-refs li b{display:block;font:900 14px/1.3 var(--body);letter-spacing:.06em}
.bl-refs li span{display:block;margin-top:3px;font:800 12.5px/1.4 var(--body);letter-spacing:.04em;color:var(--muted)}
.bl-refs li a{display:inline-flex;align-items:center;gap:6px;margin-top:6px;color:var(--ink);font:900 12px/1 var(--body);letter-spacing:.1em;text-decoration-thickness:3px;text-underline-offset:3px;text-decoration-color:var(--red);overflow-wrap:anywhere}
.bl-by{margin:26px 0 0;font:400 11px/1.5 var(--pix);letter-spacing:.04em}
.bl-next{display:flex;flex-wrap:wrap;gap:12px;margin-top:22px}

/* ---------- blog index ---------- */
.bi-list{background:var(--paper);padding:56px 0 72px}
.bi-post{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);background:#fff;border:var(--bw) solid var(--ink);box-shadow:10px 10px 0 var(--ink);color:var(--ink);text-decoration:none;transition:transform .15s,box-shadow .15s}
.bi-post:hover{transform:translate(-3px,-3px);box-shadow:13px 13px 0 var(--ink)}
.bi-post:active{transform:translate(6px,6px);box-shadow:0 0 0 var(--ink)}
.bi-post:focus-visible{outline:4px solid var(--red);outline-offset:4px}
.bi-img{display:block;width:100%;height:100%;object-fit:cover;aspect-ratio:1200/630;border-right:var(--bw) solid var(--ink)}
.bi-txt{display:flex;flex-direction:column;gap:12px;padding:22px 22px 20px}
.bi-txt .bl-meta{margin:0}
.bi-txt h2{font-size:clamp(28px,3vw,42px);line-height:1;text-wrap:balance}
.bi-txt p{margin:0;font-size:15px;font-weight:700;line-height:1.5}
.bi-go{margin-top:auto;display:inline-flex;align-items:center;gap:8px;align-self:flex-start;padding:11px 14px;background:var(--red);color:#fff;border:3px solid var(--ink);box-shadow:4px 4px 0 var(--ink);font:900 13px/1 var(--body);letter-spacing:.1em}
.bi-go .i{transition:transform .15s}
.bi-post:hover .bi-go .i{transform:translateX(4px)}

/* ---------- phone ---------- */
@media (max-width:1040px){
  .bl-five{grid-template-columns:1fr;gap:12px}
  .bl-five a{flex-direction:row;align-items:center;gap:14px;padding:12px 14px}
  .bl-five b{flex:none;min-width:3.1em}
  .bl-five em{display:none}
}
@media (max-width:900px){
  .bl-in{grid-template-columns:1fr;gap:34px}
  .bl-steps,.bl-pc{grid-template-columns:1fr;gap:26px}
  .bl-stats{grid-template-columns:1fr;gap:12px}
  .bl-stats li{flex-direction:row;align-items:center;gap:14px}
  .bl-stats b{flex:none;min-width:3.2em}
  .bi-post{grid-template-columns:1fr}
  .bi-img{border-right:0;border-bottom:var(--bw) solid var(--ink);height:auto}
}
@media (max-width:560px){
  .bl-hero h1{font-size:34px}
  .wf{padding:14px 12px 12px;box-shadow:7px 7px 0 var(--ink)}
  .wf-pair{gap:12px}
  .wf-g{gap:2px}
  .wf-g i{border-width:1.5px}
  .bl-five-band,.bl-do,.bl-proof{padding:48px 0}
  .bl-body .bl-sec{padding-top:44px}
  .bl-sec h2{gap:10px;font-size:30px}
  .bl-ico{width:40px;height:40px;font-size:18px;margin-top:-3px}
  .bl-sec p{font-size:16px;line-height:1.6}
  .bl-fig{padding:14px 12px 12px;box-shadow:6px 6px 0 var(--ink)}
  .bars tr{grid-template-columns:1fr;gap:4px}
  .trk{min-height:36px}
  .bar{height:30px;width:max(9px,calc(var(--v) / var(--max) * (100% - 84px)))}
  .bl-sec .bl-pull{padding:16px;box-shadow:6px 6px 0 var(--ink)}
  .bl-refs li{padding:10px 12px}
}
html.a11y-rm .grow .bar,html.a11y-rm .grow .wf-g i.on,html.a11y-rm .grow .pt2,html.a11y-rm .grow .meter i,html.a11y-rm .grow .pips i.on{animation:none}
@media (prefers-reduced-motion:reduce){.grow .bar,.grow .wf-g i.on,.grow .pt2,.grow .meter i,.grow .pips i.on{animation:none}.bl-pull{transform:none}}
.nw{white-space:nowrap}