/* ===== HERO VISUAL (v3): search result -> that same account =====
Front end then back end. Every contractor can read a Google search result;
almost none can read an LSA console, and half this audience does not run LSA.
The console half is the page's OWN .lsa-rep component (real Google surface
tokens), so nothing here is a new invented dashboard. */
/* Hero opener, ported from the sequence that already converts on meta.homeservicedirect.net:
eyebrow, headline, one-line trust sub, three concrete bullets, then the CTA. */
.lps-s1 .lps-s1-sub{margin-bottom:24px}
/* the H1's hard break holds clause 2 / clause 3 apart on desktop; at 390px it would force a
short line, so the phone lets the three clauses wrap naturally */
.lps-s1 .h1-br{display:inline}
/* the existing .lps-s1-bullets rule is white-space:nowrap at 20px, which overflows a 390px
phone. Let them wrap and step the size down there. */
/* VERTICAL RHYTHM (2026-07-26, David: "you're supposed to be taking someone through a
journey with spacing"). The gap SIZE encodes how related two things are:
eyebrow+headline are one unit (12px) < headline->sub (18) < visual->its caption (28)
< text->its visual (40) < caption->next beat (52) < SECTION BREAK (110).
Before this pass every gap was 12-40px and the section break equalled an intra-block gap. */
.lps-s1 .lps-s1-bullets{margin:0 auto}
/* ===== THE GUARANTEE CARD (v3) =====
Same chrome as the page's "Prefer to Call?" box (2.5px ink border + 4px hard offset), so
the hero speaks ONE visual language instead of importing a competitor's. Banner is solid
green with white type: one green structural accent, not a wash (M18). */
.lps-s1 .lps-s1-gcard{max-width:640px;margin:26px auto 0;background:#fff;border:2.5px solid #0F172A;border-radius:8px;box-shadow:5px 5px 0 #0F172A;overflow:hidden;text-align:left}
.lps-s1 .lps-s1-gcard-banner{background:#0ab463;color:#fff;font-family:'Poppins',sans-serif;font-size:20px;font-weight:800;letter-spacing:1.2px;text-transform:uppercase;text-align:center;padding:13px 16px;line-height:1.25}
.lps-s1 .lps-s1-gcard .lps-s1-bullets{display:flex;flex-direction:column;gap:15px;margin:0;padding:20px 24px 21px;max-width:none;list-style:none}
.lps-s1 .lps-s1-gcard .lps-s1-bullets li{display:flex;align-items:flex-start;gap:13px;font-family:'Inter',sans-serif;font-size:19px;font-weight:500;color:#1a1a1a;line-height:1.38;white-space:normal;text-align:left}
.lps-s1 .lps-s1-gcard .lps-s1-bullets li b{font-weight:800;color:#000}
.lps-s1 .lps-s1-gcard .lps-s1-bullets .chk{flex:none;width:24px;height:24px;margin-top:2px}
.lps-s1 .lps-s1-gcard .lps-s1-bullets .chk svg{width:14px;height:14px}
/* Section 2 sits on the house off-white (same band treatment as How It Works) so the
chapter change is VISIBLE before a word is read. Full-bleed via negative margins that
exactly mirror .lps-s1's own padding (24px desktop / 18px mobile - measured, not guessed). */
.hx-band{background:#FAFAF6;border-top:1px solid #eceee8;border-bottom:1px solid #eceee8;margin:40px -24px 0;padding:72px 24px 72px}
/* the chapter breathes the SAME above its headline as below its screenshot (David 2026-07-26:
"you have a big space below the screenshot... just make it the same amount of margin as
above that headline"). .hx's own 48px bottom margin was stacking on the band's padding. */
.hx-band .hx{margin-bottom:0}
.hx{max-width:1100px;margin:0 auto 48px;padding:0 24px;text-align:left}
/* the console block inside the white hero: bullets -> visual is the text->its-visual gap (40),
visual -> CTA is the visual->ask gap (48). No band, no headline: it belongs to the H1. */
.hx-hero{margin:40px auto 48px}
/* the SERP band is the LAST thing in the hero section, so it runs flush into the stats bar
instead of leaving .lps-s1's 30px bottom padding as a white sliver under it */
.hx-band-last{border-bottom:0;margin-bottom:-30px}
.hx-step{display:flex;flex-direction:column;align-items:center}
.hx-step + .hx-step{margin-top:52px}
/* DESKTOP SCALE: these two headlines carry the page's most important proof, and they were
38px - the SMALLEST on the page, against 50px for "Why It Isn't You Up There" / "How It
Works" and 54px for Client Results. They read as sub-sections instead of chapters.
Matched to .pb-h2/.hw-h2 exactly (50px / -1.2px / 900px column) so the whole page has
one chapter scale. (David 2026-07-26: "very small text for headlines on desktop".) */
.hx-head{text-align:center;max-width:900px;margin:0 auto 40px}
.hx-h2{font-family:'Poppins',sans-serif;font-size:50px;font-weight:800;color:#000;line-height:1.06;letter-spacing:-1.2px;margin-bottom:18px}
.hx-h2 .hl{color:#000;padding:0 2px;background-image:url("data:image/svg+xml;utf8,");background-repeat:no-repeat;background-position:0 100%;background-size:100% 12px;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.hx-sub{font-family:'Inter',sans-serif;font-size:19px;font-weight:500;color:#0F172A;line-height:1.55;max-width:760px;margin:0 auto}
.hx-note{font-family:'Inter',sans-serif;font-size:17px;font-weight:500;color:#0F172A;line-height:1.5;margin-top:28px;text-align:center;max-width:640px}
.hx-note strong{font-weight:800;color:#000}
/* --- the Google mobile SERP, as a plain screenshot --- */
/* 1:1 with the Script 8 ad beat (hf-lsa45-serp-b.html), re-authored at NATIVE mobile px so
the type stays crisp (transform:scale() blurs it). No device bezel: David's note was that
the fat black frame reads fake. A screenshot should look like a screenshot, so it gets a
hairline #dadce0 border and a soft shadow, nothing else. */
/* 430px was a postage stamp in a 1500px window next to a 1052px console. 480 gives the
phone screenshot presence without scaling it (transform:scale blurs the type). */
.hx-shot{width:100%;max-width:480px}
.sr{width:100%;background:#fff;border:1px solid #dadce0;border-radius:12px;overflow:hidden;font-family:'Roboto',arial,Helvetica,sans-serif;color:#202124;box-shadow:0 18px 44px -14px rgba(15,23,42,.32),0 2px 8px rgba(15,23,42,.10);text-align:left}
.sr-wrap{padding:0 12px}
.sr-chrome{display:flex;align-items:center;gap:10px;height:40px;padding:0 12px}
.sr-home{width:17px;height:17px;color:#202124;flex:none}
.sr-url{flex:1;min-width:0;display:flex;align-items:center;background:#ebedef;border-radius:999px;height:26px;padding:0 13px;font-size:12px;color:#3c4043}
.sr-url span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sr-mic{width:14px;height:14px;flex:none}
.sr-tabs-n{flex:none;min-width:20px;height:20px;padding:0 3px;border:1.5px solid #202124;border-radius:4px;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700}
.sr-menu{width:14px;height:14px;color:#202124;flex:none}
.sr-gs{display:flex;align-items:center;gap:9px;border:1px solid #e4e6e9;border-radius:999px;padding:7px 12px;box-shadow:0 1px 5px rgba(32,33,36,.14);margin:6px 0 8px}
.sr-mag{width:14px;height:14px;color:#5f6368;flex:none}
.sr-q{font-size:14px;color:#202124;flex:1;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.sr-x{width:13px;height:13px;color:#5f6368;flex:none}
.sr-sepr{width:1px;height:15px;background:#dadce0;flex:none}
.sr-mic2{width:12px;height:12px;flex:none}
.sr-tabs{display:flex;align-items:flex-end;gap:16px;font-size:12px;color:#5f6368;border-bottom:1px solid #ebebeb;overflow:hidden}
.sr-tabs span{padding-bottom:7px;white-space:nowrap}
.sr-tabs span.on{color:#202124;font-weight:700;border-bottom:2px solid #202124;padding-bottom:6px}
.sr-chips{display:flex;gap:9px;padding:8px 0 7px;overflow:hidden}
.sr-chip{border:1px solid #dadce0;border-radius:999px;padding:5px 13px;font-size:11.5px;color:#3c4043;white-space:nowrap}
.sr-loc{display:flex;align-items:center;gap:6px;font-size:12.5px;padding:1px 0 8px}
.sr-pin{width:13px;height:13px;color:#5f6368;flex:none}
.sr-city{font-weight:700}
.sr-sep{color:#5f6368}
.sr-ca{color:#1a73e8}
.sr-dots{margin-left:auto;width:13px;height:13px;color:#5f6368;flex:none}
.sr-band{height:6px;background:#f1f3f4}
.sr-sphead{display:flex;align-items:center;padding:9px 0 6px}
.sr-spttl{font-size:14px;font-weight:700}
.sr-gcq{display:flex;align-items:center;gap:8px;border:1px solid #dadce0;border-radius:8px;padding:9px 12px;margin-bottom:2px}
.sr-gcq-t{flex:1;min-width:0}
.sr-gcq-h{font-size:12.5px;color:#1a73e8;font-weight:700}
.sr-gcq-s{font-size:11.5px;color:#5f6368;margin-top:2px}
.sr-chat{width:18px;height:18px;color:#1a73e8;flex:none}
.sr-prov{padding:10px 0 9px;border-top:1px solid #ececec;position:relative}
.sr-provtop{display:flex;align-items:flex-start;gap:9px}
.sr-info{flex:1;min-width:0}
.sr-nm{font-size:14.5px;color:#202124;font-weight:500;line-height:1.15}
.sr-rrow{display:flex;align-items:center;gap:5px;font-size:11.5px;color:#5f6368;margin-top:5px}
.sr-rrow .sr-rn{color:#202124}
.sr-stars{position:relative;display:inline-block;color:#dadce0;font-size:12px;letter-spacing:1px;line-height:1}
.sr-stars .sr-fill{position:absolute;top:0;left:0;white-space:nowrap;overflow:hidden;color:#fbbc04}
.sr-yrs,.sr-open,.sr-extra{font-size:11.5px;color:#5f6368;margin-top:4px}
.sr-open b{color:#1e8e3e;font-weight:400}
.sr-extra{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sr-thumb{flex:none;width:92px;height:68px;border-radius:5px;overflow:hidden}
.sr-thumb img{width:92px;height:68px;object-fit:cover;display:block}
.sr-pills{display:flex;gap:10px;margin-top:9px}
.sr-pill{display:inline-flex;align-items:center;gap:6px;border:1px solid #dadce0;border-radius:999px;padding:6px 18px;color:#1a73e8;font-size:12px;font-weight:500}
.sr-pill i{font-size:11px}
/* the hand-drawn marker: red ellipse on the #1 name + a Caveat note with a curved arrow */
.sr-nmw{position:relative;display:inline-block}
/* SIZED TO THE DRAWN STROKE, NOT THE SVG BOX. The path's leftmost point is x=11 of a 200
viewBox, so 5.5% of the box is empty margin: an ellipse box that merely reaches the name's
left edge draws its stroke ~8px INSIDE the name and slices the "A" off. At 119% the box
overhangs each side by ~9.5% of the name width, which puts the stroke just outside the
text. The box itself may hang past the screenshot edge; only the stroke has to be visible.
overflow:visible on the svg keeps the stroke from being clipped by its own box.
(No backticks in these comments - the whole block is a JS template literal.) */
.sr-el{position:absolute;left:50%;top:50%;transform:translate(-48%,-62%) rotate(-2deg) scaleX(-1);width:130%;height:200%;pointer-events:none;overflow:visible}
/* NOTE PLACEMENT (2026-07-26 spacing pass): the note lives in OPEN WHITE SPACE, not wedged
between the circle and the photo. With the thumbnail at Google's real 92px there is no
free patch inside the row, so the marked row gets extra bottom padding (screenshots get
cropped with slack all the time; a hand-drawn note in it reads natural) and the note sits
bottom-right, below the photo and right of the Call/Get-quote pills. The arrow travels the
empty vertical channel between the pills (end x~225) and the photo (left edge ~265),
a long lazy curve up to the circled name - which is what a real scrawl looks like. */
.sr-mark{padding-bottom:36px}
.sr-note{position:absolute;left:calc(100% + 58px);right:auto;top:98px;z-index:3;font-family:'Caveat',cursive;font-weight:700;font-size:19px;color:#e2261f;transform:rotate(-4deg);line-height:.9;white-space:nowrap;pointer-events:none;text-align:left}
.sr-arr{position:absolute;left:-38px;top:-72px;width:46px;height:70px;overflow:visible}
/* --- the console half --- */
/* the SAME red marker as the SERP, on the SAME number, so the two halves visibly tie
together: he is #1 up there, and this is the 170 that came out of it down here */
.hx-circ{position:relative;display:inline-block}
.hx-circ-el{position:absolute;left:50%;top:50%;transform:translate(-50%,-52%) rotate(-2deg);width:150%;height:170%;pointer-events:none;overflow:visible}
/* David 2026-07-27: "it's pretty small, both on the desktop and the mobile. There's room to
make that text a bit bigger and just say 170 leads in the last 30 days." Two lines now, so
white-space:nowrap comes off and line-height opens to .95 to keep the scrawl tight. */
.hx-circ-note{position:absolute;left:calc(100% + 44px);top:50%;font-family:'Caveat',cursive;font-weight:700;font-size:32px;color:#e2261f;transform:translateY(-60%) rotate(-4deg);white-space:nowrap;pointer-events:none;line-height:.95}
/* one column for the whole section: headlines 900, console 900, screenshot centred inside it */
.hx-frame{margin:0 auto;width:100%;max-width:900px}
.hx-frame .lsa-rep-body{padding:15px 15px 17px}
.hx-frame .lsa-rep-bar{flex:0 0 150px}
/* WIDE DESKTOP (>=1200px). Real traffic is 74% phone / 3% tablet / 23% desktop, and the
dominant desktop width is 2047px - where a 480px screenshot centred in a stacked column
left ~780px of empty band on each side and read as a phone layout on a huge canvas.
Beat 1 goes side by side (text left, phone right); beat 2's console is landscape so it
stays stacked and takes the full 1100px column instead. Gated at 1200 so the real tablet
width in the data (980px) keeps the stacked layout, which already reads well there. */
/* The two-column (text left / phone right) was tried and REVERTED 2026-07-26: David -
"all you did was just move it to the left of that, you might as well move it back to
the center, that doesn't look good at all". Everything stays centred; desktop presence
comes from the type scale and the wider console, not from a split. */
@media(min-width:1200px){
.hx-step + .hx-step{margin-top:72px}
.hx-frame{max-width:1100px}
}
@media(max-width:768px){
/* Fold budget, measured not guessed: the #1 listing with the red marker on it IS the hook,
so it has to land inside 844px. Everything above it is trimmed to buy that room, and the
first step's subhead is dropped entirely (its eyebrow + headline already say it). */
/* pre-scoped by hand: these two already have their own mobile rule inside the hero's style
block further down, so they need the extra class to win (scope() only rewrites .hx/.sr) */
.lps-s1 .lps-s1-toprow{margin-bottom:10px}
.lps-s1 .lps-s1-h1{margin-bottom:12px}
.lps-s1 .h1-br{display:none}
.lps-s1 .lps-s1-sub{margin-bottom:16px}
.lps-s1 .lps-s1-bullets{margin-bottom:0;max-width:348px;gap:9px} /* 330 wrapped "Ads" onto its own line */
.lps-s1 .lps-s1-bullets li{font-size:16px;white-space:normal;gap:10px}
.lps-s1 .lps-s1-bullets .chk{width:21px;height:21px}
.lps-s1 .lps-s1-bullets .chk svg{width:12px;height:12px}
/* the card owns its own scale on mobile; the rules above are the old loose-list ones and
would shrink the bullets back to fine print inside it */
.lps-s1 .lps-s1-gcard{margin-top:20px;box-shadow:4px 4px 0 #0F172A}
/* 16px/.8 wrapped the banner to two lines at 390px - measured, and the probe fails on it */
.lps-s1 .lps-s1-gcard-banner{font-size:15px;letter-spacing:.4px;padding:11px 9px}
.lps-s1 .lps-s1-gcard .lps-s1-bullets{gap:13px;padding:16px 15px 17px;max-width:none}
.lps-s1 .lps-s1-gcard .lps-s1-bullets li{font-size:17px;gap:11px;line-height:1.34}
.lps-s1 .lps-s1-gcard .lps-s1-bullets .chk{width:22px;height:22px}
.lps-s1 .lps-s1-gcard .lps-s1-bullets .chk svg{width:13px;height:13px}
.hx-band{margin:28px -18px 0;padding:44px 16px 44px}
/* this shorthand resets .hx-band-last's negative bottom margin (same specificity, later in
source), which left the 30px white sliver under the band that David saw above the green
trust bar. It has to be restated inside the media block. */
.hx-band-last{margin-bottom:-30px}
.hx{padding:0 2px;margin-bottom:36px}
.hx-hero{margin:26px auto 34px}
.hx-head{margin-bottom:28px}
.hx-h2{font-size:30px;letter-spacing:-.5px;line-height:1.15;margin-bottom:14px}
.hx-br{display:none} /* the hard break holds the desktop phrase boundary; at 390px it would force 3 lines */
.hx-h2 .hl{background-size:100% 9px}
.hx-sub{font-size:16px}
.hx-note{font-size:15.5px;margin-top:22px}
.hx-step + .hx-step{margin-top:36px}
/* the screenshot keeps its native type size; the marker is fixed-px inside it */
.sr{box-shadow:0 14px 32px -12px rgba(15,23,42,.30),0 2px 6px rgba(15,23,42,.10)}
.hx-frame{box-shadow:5px 5px 0 #0F172A,0 14px 34px -12px rgba(15,23,42,.18)}
.hx-frame .lsa-rep-header{padding:10px 13px}
.hx-frame .lsa-rep-header-title{font-size:14.5px}
.hx-frame .lsa-rep-body{padding:11px 11px 13px}
/* the date range is BACK on mobile (it was hidden for height). The console is now the
first proof on the page and "170" means nothing without a window - the real UI's own
"Jun 27 - Jul 26" is the honest way to say "a month", so it stays, just compact. */
.hx-frame .lsa-rep-overview-row{margin-bottom:10px}
.hx-frame .lsa-rep-overview-title{font-size:14px}
.hx-frame .lsa-rep-overview-date{font-size:11.5px;padding:5px 9px;gap:5px}
.hx-frame .lsa-rep-bigcard{padding:14px 16px 12px}
.hx-frame .lsa-rep-bigcard-num{font-size:40px;margin-bottom:10px}
.hx-circ-note{font-size:25px;left:calc(100% + 22px);top:50%;transform:translateY(-52%) rotate(-4deg)}
.hx-frame .lsa-rep-bar{flex:0 0 84px;height:12px}
.hx-frame .lsa-rep-bar-text{font-size:12.5px}
/* mobile: the two lead/spend cards ARE the story; the impressions strip is Google
trivia that stretched the visual (David 2026-07-26) - desktop keeps it */
.hx-frame .lsa-rep-strip{display:none}
}
.lps-s3b,.lps-s3b *{box-sizing:border-box;margin:0;padding:0}
.lps-s3b{width:100%;background:#FAFAF6;padding:80px 0;border-top:1px solid #e5e7eb;border-bottom:1px solid #e5e7eb}
.lps-s3b-inner{max-width:1240px;margin:0 auto;padding:0 24px}
.lps-s3b-eyebrow{font-family:'Poppins',sans-serif;font-size:14px;font-weight:800;letter-spacing:3px;text-transform:uppercase;color:#F16625;text-align:center;margin-bottom:14px}
.lps-s3b-headline{font-family:'Poppins',sans-serif;font-size:54px;font-weight:800;color:#000;text-align:center;line-height:1.05;margin-bottom:16px;letter-spacing:-1.2px;max-width:900px;margin-left:auto;margin-right:auto}
.lps-s3b-headline .hl{color:#000;padding:0 2px;background-image:url("data:image/svg+xml;utf8,");background-repeat:no-repeat;background-position:0 100%;background-size:100% 12px;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.lps-s3b-sub{font-family:'Inter',sans-serif;font-size:19px;color:#0F172A;text-align:center;font-weight:500;margin-bottom:48px;max-width:780px;margin-left:auto;margin-right:auto;line-height:1.55}
/* "Click the arrows / swipe" cue reused above sliders (same style as the S1 hero cue) */
.slidecue-row{text-align:center;margin:-28px 0 24px}
.slidecue-row .lps-s1-swipe-cue{margin-bottom:0}
/* Big dashboard image card */
.lps-s3b-frame{background:#fff;border:1.5px solid #0F172A;border-radius:14px;overflow:visible;box-shadow:8px 8px 0 #0F172A,0 24px 60px -16px rgba(15,23,42,.18);margin-bottom:40px;position:relative}
.lps-s3b-frame .lsa-rep{border-radius:13px;overflow:hidden}
.lps-s3b-frame img{width:100%;height:auto;display:block}
/* ===== LSA Reports HTML/CSS replica ===== */
.lsa-rep{font-family:'Roboto','Inter',sans-serif;color:#202124;background:#f1f3f4;width:100%;display:block}
.lsa-rep-header{display:flex;align-items:center;justify-content:space-between;background:#fff;padding:14px 24px;border-bottom:1px solid #e8eaed}
.lsa-rep-header-left{display:flex;align-items:center;gap:18px;color:#5f6368}
.lsa-rep-header-left i{font-size:18px}
.lsa-rep-header-title{font-size:20px;color:#000;font-weight:600}
.lsa-rep-header-right{display:flex;align-items:center;gap:18px}
.lsa-rep-header-apps{font-size:18px;color:#5f6368}
.lsa-rep-header-avatar{width:32px;height:32px;border-radius:50%;background:#f57c00;color:#fff;display:flex;align-items:center;justify-content:center;font-size:14px}
.lsa-rep-body{padding:18px 18px 22px;max-width:none;margin:0}
.lsa-rep-overview-row{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
.lsa-rep-overview-title{font-size:17px;color:#3c4043;font-weight:400}
.lsa-rep-overview-date{font-size:14px;color:#3c4043;display:flex;align-items:center;gap:7px;padding:7px 14px;border:1px solid #dadce0;border-radius:4px;background:#fff;cursor:default}
.lsa-rep-overview-date i{font-size:11px;color:#5f6368}
.lsa-rep-bigcards{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:14px}
.lsa-rep-bigcard{background:#fff;border-radius:8px;padding:20px 24px 16px;box-shadow:0 1px 2px rgba(60,64,67,.1)}
.lsa-rep-bigcard-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:6px}
.lsa-rep-bigcard-label{font-size:14px;color:#5f6368;font-weight:400}
.lsa-rep-bigcard-filter{font-size:14px;color:#3c4043;display:flex;align-items:center;gap:6px;cursor:default}
.lsa-rep-bigcard-filter i{font-size:11px;color:#5f6368}
.lsa-rep-bigcard-num{font-size:34px;color:#202124;font-weight:400;letter-spacing:-.5px;margin-bottom:16px}
.lsa-rep-bigcard-bars{display:flex;flex-direction:column;gap:7px;margin-bottom:18px}
.lsa-rep-bar-row{display:flex;align-items:center;gap:14px}
.lsa-rep-bar{flex:0 0 220px;height:14px;background:transparent;border-radius:2px;overflow:hidden}
.lsa-rep-bar span{display:block;height:100%;background:#aecbfa;border-radius:2px}
.lsa-rep-bar-text{font-size:13.5px;color:#5f6368}
.lsa-rep-bar-text b{color:#202124;font-weight:500}
.lsa-rep-bigcard-foot{border-top:1px solid #e8eaed;padding-top:12px;display:flex;align-items:flex-start;justify-content:space-between;gap:14px}
.lsa-rep-bigcard-foottext{font-size:13px;color:#5f6368;line-height:1.5;flex:1}
.lsa-rep-bigcard-link{font-size:13px;font-weight:500;color:#1a73e8;letter-spacing:.4px;flex-shrink:0;align-self:flex-end;cursor:default}
.lsa-rep-strip{background:#fff;border-radius:8px;display:grid;grid-template-columns:repeat(3,1fr);box-shadow:0 1px 2px rgba(60,64,67,.1);margin-bottom:14px}
.lsa-rep-strip-cell{padding:22px 24px;border-right:1px solid #e8eaed}
.lsa-rep-strip-cell:last-child{border-right:none}
.lsa-rep-strip-label{font-size:14px;color:#5f6368;margin-bottom:8px}
.lsa-rep-strip-num{font-size:34px;color:#202124;font-weight:400;letter-spacing:-.5px}
.lsa-rep-strip-num span{font-size:22px;color:#202124;margin-left:1px}
.lsa-rep-chart-card{background:#fff;border-radius:8px;padding:20px 24px 16px;box-shadow:0 1px 2px rgba(60,64,67,.1)}
.lsa-rep-chart-title{font-size:15px;color:#3c4043;margin-bottom:14px}
.lsa-rep-chart{position:relative;padding-left:34px;padding-bottom:24px;height:200px}
.lsa-rep-chart-yaxis{position:absolute;left:0;top:0;bottom:24px;display:flex;flex-direction:column;justify-content:space-between;font-size:10.5px;color:#5f6368;text-align:right;width:24px}
.lsa-rep-chart-svg{display:block;width:100%;height:calc(100% - 24px);overflow:visible}
.lsa-rep-chart-xaxis{position:absolute;left:34px;right:0;bottom:0;display:flex;justify-content:space-around;font-size:10.5px;color:#5f6368}
.lsa-rep-chart-ylabel{position:absolute;left:-8px;top:50%;transform:rotate(-90deg) translateX(50%);transform-origin:left center;font-size:10.5px;color:#5f6368}
.lsa-rep-chart-foot{padding-top:14px;border-top:1px solid #e8eaed;font-size:13px;color:#1a73e8;display:flex;align-items:center;gap:8px;margin-top:6px;cursor:default}
.lsa-rep-chart-foot i{font-size:14px}
/* Client carousel — visible on both desktop + mobile */
.lsa-rep-client{display:none}
.lsa-rep-client.is-active{display:block;animation:lsaRepFade .4s ease-out}
@keyframes lsaRepFade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}
.lsa-rep-cnav{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:14px 0 4px;margin-top:2px}
.lsa-rep-cnav-btn{display:flex;align-items:center;justify-content:center;width:42px;height:42px;border-radius:50%;border:2px solid #0F172A;background:#fff;color:#0F172A;font-size:14px;cursor:pointer;box-shadow:3px 3px 0 #0F172A;flex-shrink:0;-webkit-tap-highlight-color:transparent;transition:transform .15s,box-shadow .15s,background .2s,color .2s;padding:0}
.lsa-rep-cnav-btn:hover{background:#0ab463;color:#fff;border-color:#0ab463}
.lsa-rep-cnav-btn:active{transform:translate(2px,2px);box-shadow:1px 1px 0 #0F172A}
.lsa-rep-cnav-dots{display:flex;gap:8px;align-items:center;justify-content:center;flex:1}
.lsa-rep-cnav-dot{width:9px;height:9px;border-radius:50%;background:#cbd5e1;border:none;padding:0;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:background .2s,width .2s}
.lsa-rep-cnav-dot.active{background:#F16625;width:26px;border-radius:5px}
/* Client logo in header — high specificity to beat .lps-s3b-frame img */
.lps-s3b-frame .lsa-rep-header-logo{width:40px;height:40px;border-radius:50%;background:#fff;border:1px solid #e8eaed;object-fit:contain;flex-shrink:0;display:block}
/* Orange overlay arrows on the report visual — desktop: vertically centered outside frame */
.lsa-rep-overlay-arrow{display:flex;position:absolute;top:50%;transform:translateY(-50%);width:46px;height:46px;border-radius:50%;border:2.5px solid #0F172A;background:#F16625;color:#fff;align-items:center;justify-content:center;cursor:pointer;box-shadow:3px 3px 0 #0F172A;transition:transform .12s ease,background .15s ease;z-index:9;padding:0;-webkit-tap-highlight-color:transparent}
.lsa-rep-overlay-arrow:hover{background:#d4571a;box-shadow:3px 3px 0 #0F172A}
.lsa-rep-overlay-arrow:active{background:#d4571a;box-shadow:3px 3px 0 #0F172A;transform:translateY(-50%) scale(.94)}
.lsa-rep-overlay-arrow:focus{outline:none;background:#F16625;box-shadow:3px 3px 0 #0F172A}
.lsa-rep-overlay-arrow svg{width:20px;height:20px}
.lsa-rep-overlay-arrow-prev{left:-26px}
.lsa-rep-overlay-arrow-next{right:-26px}
.lsa-rep-overlay-arrow:disabled{opacity:.4;cursor:default}
/* Hide cnav prev/next buttons on desktop too — keep only dots since overlay arrows handle navigation */
.lsa-rep-cnav .lsa-rep-cnav-btn{display:none}
@media(max-width:1024px){
.lsa-rep-body{padding:24px 28px 28px}
.lsa-rep-bar{flex-basis:140px}
}
@media(max-width:768px){
.lsa-rep-body{padding:18px 14px 22px}
.lsa-rep-bigcards{grid-template-columns:1fr;gap:12px}
.lsa-rep-strip{grid-template-columns:1fr}
.lsa-rep-strip-cell{border-right:none;border-bottom:1px solid #e8eaed}
.lsa-rep-strip-cell:last-child{border-bottom:none}
.lsa-rep-bigcard-num,.lsa-rep-strip-num{font-size:30px}
.lsa-rep-bigcard-label,.lsa-rep-strip-label{font-size:14px}
.lsa-rep-header{padding:11px 14px}
.lsa-rep-bar{flex-basis:130px;height:16px}
.lsa-rep-bar-text{font-size:14px;font-weight:500}
.lsa-rep-bar-text b{font-size:14.5px}
.lsa-rep-bigcard-foottext{font-size:13px}
.lsa-rep-bigcard-link{font-size:13px}
/* Mobile: hide chart card + entire strip (replaced with mobile twin block per client) */
.lsa-rep-client.is-active .lsa-rep-chart-card{display:none}
.lsa-rep-client.is-active .lsa-rep-strip{display:none}
.lsa-rep-client.is-active .lsa-rep-mobile-twin{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:14px}
.lsa-rep-mobile-stat{background:#fff;border:1px solid #e8eaed;border-radius:8px;padding:20px 12px 18px;text-align:center;box-shadow:0 1px 2px rgba(60,64,67,.06)}
.lsa-rep-mobile-num{font-family:'Poppins',sans-serif;font-size:38px;font-weight:800;color:#F16625;line-height:1;letter-spacing:-1px;margin-bottom:10px;font-variant-numeric:tabular-nums}
.lsa-rep-mobile-label{font-family:'Poppins',sans-serif;font-size:15px;font-weight:800;color:#0F172A;line-height:1.2;letter-spacing:-.2px}
.lsa-rep-mobile-label small{display:block;font-family:'Inter',sans-serif;font-weight:600;color:#0F172A;font-size:12.5px;margin-top:5px;line-height:1.3}
.lsa-rep-cnav{padding:14px 0 4px}
.lsa-rep-cnav-btn{width:42px;height:42px;font-size:14px}
.lps-s3b-frame .lsa-rep-header-logo{width:34px;height:34px}
.lsa-rep-header-title{font-size:15px}
/* Mobile: overlay arrows vertically centered ON the visual edge (half on, half off) */
.lsa-rep-overlay-arrow{width:38px;height:38px;top:50%;transform:translateY(-50%);margin:0}
.lsa-rep-overlay-arrow:active{transform:translateY(-50%) scale(.94)}
.lsa-rep-overlay-arrow svg{width:16px;height:16px}
.lsa-rep-overlay-arrow-prev{left:-12px;right:auto}
.lsa-rep-overlay-arrow-next{right:-12px;left:auto}
}
/* 3 highlight callouts under the dashboard */
.lps-s3b-callouts{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-bottom:36px;max-width:1100px;margin-left:auto;margin-right:auto}
.lps-s3b-callout{background:#fff;border:1.5px solid #0F172A;border-radius:10px;padding:24px 22px 22px;display:flex;flex-direction:column;align-items:center;gap:0;box-shadow:5px 5px 0 #0F172A;text-align:center}
.lps-s3b-callout-logo{height:42px;width:auto;max-width:160px;object-fit:contain;display:block;margin-bottom:18px}
.lps-s3b-callout-twin{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:14px;width:100%}
.lps-s3b-callout-twin-sep{width:1px;height:48px;background:#e5e7eb}
.lps-s3b-callout-stat{display:flex;flex-direction:column;align-items:center;gap:5px;min-width:0}
.lps-s3b-callout-stat-num{font-family:'Poppins',sans-serif;font-size:34px;font-weight:800;color:#0ab463;line-height:1;letter-spacing:-1px}
.lps-s3b-callout-stat-num .small{font-size:22px;color:#0ab463;letter-spacing:-.5px}
.lps-s3b-callout-stat-label{font-family:'Poppins',sans-serif;font-size:11px;font-weight:800;color:#F16625;text-transform:uppercase;letter-spacing:1.4px;line-height:1.2;text-align:center}
.lps-s3b-callout-desc{margin-top:18px;padding-top:16px;border-top:1px solid #e5e7eb;font-family:'Inter',sans-serif;font-size:14px;color:#0F172A;line-height:1.5;font-weight:500;text-align:center;width:100%}
/* Mobile-only client highlight (Lead Growth + Money Saved) inside each report slide */
.lsa-rep-mobile-twin{display:none}
.lps-s3b-cta-wrap{text-align:center}
.lps-s3b-cta{display:inline-flex;align-items:center;gap:12px;background:#F16625;color:#fff !important;font-family:'Poppins',sans-serif;font-size:19px;font-weight:800;padding:20px 48px;border-radius:4px;border:2.5px solid #0F172A;box-shadow:5px 5px 0 #0F172A,0 10px 24px rgba(241,102,37,.25);transition:transform .15s,box-shadow .15s;letter-spacing:.5px;text-transform:uppercase}
.lps-s3b-cta:hover{background:#d4571a;transform:translate(-2px,-2px);box-shadow:7px 7px 0 #0F172A,0 14px 28px rgba(241,102,37,.35)}
@media(max-width:1024px){
.lps-s3b-callouts{grid-template-columns:1fr;gap:14px}
}
@media(max-width:768px){
.lps-s3b{padding:48px 0}
.lps-s3b-inner{padding:0 14px}
.lps-s3b-headline{font-size:30px;letter-spacing:-.5px;line-height:1.1}
.lps-s3b-headline .hl{padding-bottom:0;background-size:100% 10px}
.lps-s3b-sub{font-size:16px;margin-bottom:32px}
.lps-s3b-frame{margin-bottom:28px;box-shadow:5px 5px 0 #0F172A;border-radius:10px}
.lps-s3b-callouts{display:none}
.lps-s3b-callout{padding:22px 18px 20px}
.lps-s3b-callout-logo{height:36px;margin-bottom:14px}
.lps-s3b-callout-stat-num{font-size:28px}
.lps-s3b-callout-stat-num .small{font-size:18px}
.lps-s3b-callout-stat-label{font-size:10.5px;letter-spacing:1.2px}
.lps-s3b-callout-twin{gap:10px}
.lps-s3b-callout-twin-sep{height:40px}
.lps-s3b-cta{width:100%;justify-content:center;font-size:17px;padding:18px 24px}
}
/* ===== LSA Command client portal replica (v3) =====
Replaces 5 mocks of GOOGLE's console with the reporting WE hand the client.
Tokens taken from the real portal at lsa-command/public (green #0ab463 marks,
white cards on #f5f7f9, per-tile accent top rule, Poppins numbers). */
.pt{font-family:'Inter',sans-serif;background:#f5f7f9;width:100%;display:block;padding:16px 16px 20px}
.pt-client{display:none}
.pt-client.is-active{display:block;animation:ptFade .35s ease-out}
@keyframes ptFade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}
.pt-head{display:flex;align-items:center;justify-content:space-between;gap:14px;background:#fff;border-radius:10px;padding:12px 16px;margin-bottom:12px;box-shadow:0 1px 2px rgba(15,23,42,.08)}
.pt-head-left{display:flex;align-items:center;gap:12px;min-width:0}
.pt-mark{width:38px;height:38px;border-radius:9px;color:#fff;font-family:'Poppins',sans-serif;font-size:19px;font-weight:800;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.pt-head-txt{display:flex;flex-direction:column;min-width:0}
.pt-head-txt b{font-family:'Poppins',sans-serif;font-size:18px;font-weight:800;color:#0F172A;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pt-head-txt small{font-size:13px;color:#64748B;font-weight:500}
.pt-range{display:flex;gap:2px;background:#f1f5f9;border-radius:8px;padding:3px;flex-shrink:0}
.pt-range span{font-size:13px;font-weight:600;color:#64748B;padding:6px 12px;border-radius:6px}
.pt-range span.on{background:#fff;color:#0F172A;box-shadow:0 1px 2px rgba(15,23,42,.12)}
.pt-meta{font-size:13.5px;color:#64748B;font-weight:500;padding:0 4px 12px}
.pt-summary{background:#fff;border-left:5px solid #0ab463;border-radius:10px;padding:20px 22px;font-size:20px;font-weight:600;color:#0F172A;line-height:1.45;margin-bottom:14px;box-shadow:0 1px 2px rgba(15,23,42,.08)}
.pt-summary .b{color:#1a73e8;font-weight:800}
.pt-summary .g{color:#0ab463;font-weight:800}
.pt-tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:14px}
.pt-tile{background:#fff;border-radius:10px;border-top:3px solid var(--pt-a);padding:16px 16px 15px;box-shadow:0 1px 2px rgba(15,23,42,.08)}
.pt-tile-top{display:flex;align-items:center;gap:10px;margin-bottom:11px;flex-wrap:wrap}
.pt-ic{width:36px;height:36px;border-radius:10px;border:1px solid;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0}
.pt-emo{font-size:19px;line-height:1}
.pt-num{font-family:'Poppins',sans-serif;font-size:32px;font-weight:800;color:#0F172A;line-height:1;letter-spacing:-1px}
.pt-trend{font-size:12px;font-weight:800;color:#0ab463;background:#e6f7ef;border-radius:999px;padding:4px 9px;white-space:nowrap}
.pt-lbl{font-family:'Poppins',sans-serif;font-size:13px;font-weight:800;color:#0F172A;text-transform:uppercase;letter-spacing:.6px;line-height:1.25;margin-bottom:6px;color:#10161f}
.pt-sub{font-size:13.5px;color:#10161f;font-weight:500;line-height:1.4}
.pt-chart-card{background:#fff;border-radius:10px;padding:16px 18px 14px;box-shadow:0 1px 2px rgba(15,23,42,.08)}
.pt-chart-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}
.pt-chart-title{font-family:'Poppins',sans-serif;font-size:13px;font-weight:800;color:#0F172A;text-transform:uppercase;letter-spacing:.6px}
.pt-chart-note{font-family:'Poppins',sans-serif;font-size:12.5px;font-weight:800;color:#0ab463;letter-spacing:.6px;white-space:nowrap}
.pt-chart{height:132px}
.pt-chart-svg{width:100%;height:100%;display:block;overflow:visible}
.pt-chart-key{display:flex;gap:20px;padding-top:11px;margin-top:10px;border-top:1px solid #eef2f6;font-size:12.5px;color:#475569;font-weight:600}
.pt-chart-key span{display:inline-flex;align-items:center;gap:7px}
/* the portal's bottom app nav (real portal shows it under 900px; on the landing page it is
part of what makes the replica read as an app rather than a chart) */
.pt-tabbar{display:flex;background:#fff;border-top:1px solid #e6e9ee;border-radius:0 0 10px 10px;box-shadow:0 -2px 12px rgba(16,24,40,.06);margin-top:14px}
.pt-tab{flex:1;min-height:58px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;color:#64748B;font-size:11.5px;font-weight:600;font-family:'Inter',sans-serif;padding:7px 0}
.pt-tab svg{width:21px;height:21px}
.pt-tab.on{color:#0ab463;font-weight:800}
.pt-tab-ic{position:relative;display:inline-flex}
.pt-badge{position:absolute;top:-6px;left:12px;background:#e5484d;color:#fff;font-size:9.5px;font-weight:800;line-height:1;padding:3px 5px;border-radius:999px}
.pt-dot{width:9px;height:9px;border-radius:2px;display:inline-block}
@media(max-width:768px){
.pt{padding:11px 10px 14px}
.pt-head{padding:10px 12px;gap:10px}
.pt-mark{width:34px;height:34px;font-size:17px;border-radius:8px}
/* let the company name wrap instead of ellipsis-truncating ("Anthony's Tree
Company" clipped to 136px of 204px at 390px wide) */
.pt-head-txt b{font-size:15.5px;white-space:normal;line-height:1.15}
.pt-head-txt small{font-size:12px}
.pt-range span{font-size:12px;padding:5px 9px}
.pt-meta{font-size:12.5px;padding:0 2px 10px}
.pt-summary{font-size:17px;padding:16px 16px;border-left-width:4px;margin-bottom:11px}
.pt-tiles{grid-template-columns:1fr 1fr;gap:9px;margin-bottom:11px}
.pt-tile{padding:13px 12px 12px}
.pt-tile-top{gap:8px;margin-bottom:9px}
.pt-ic{width:32px;height:32px;border-radius:9px}
.pt-emo{font-size:17px}
.pt-num{font-size:26px;letter-spacing:-.8px}
.pt-trend{font-size:11px;padding:3px 7px}
.pt-lbl{font-size:12px;letter-spacing:.4px}
.pt-sub{font-size:12.5px}
.pt-chart-card{padding:13px 13px 12px}
.pt-chart{height:104px}
.pt-chart-key{font-size:12px;gap:16px}
}