/* Google review scanner.
   These rules used to be split between site.css (the ladder) and content-pages.css (the search and the result
   card), which meant every page on the site carried them and the two halves drifted: the result heading was
   left on the global h2 size and rendered at 42px next to 15px body copy, which is what made the page look
   unstyled. One page, one stylesheet, loaded through ViewData["PageCss"]. */

/* ---- hero -------------------------------------------------------------------------------------------- */
/* Same warm opening as the home hero. The page is a selling feature, so the search is the hero, not a form
   dropped on white below a breadcrumb. */
/* A gradient rather than the home hero's decorative circles. Those need overflow:hidden to stay inside the
   band, and that clipped the type-ahead list the moment it grew past the bottom edge. */
.scan-hero{position:relative;background:linear-gradient(118deg,#fff9f8,#fdf1ed 58%,#fbf1f3);padding:30px 0 66px}
/* The layout prints the breadcrumb above the page body, so without this the warm band starts below a white
   strip. The padding reproduces .container's gutter while the nav itself goes full-bleed. Browsers without
   :has just keep the strip, which is how every other page already looks. */
main:has(>.scan-hero)>.breadcrumbs{background:#fff9f8;width:100%;padding-inline:max(32px,(100% - 1160px) / 2)}
.scan-hero-inner{display:grid;grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr);gap:54px;align-items:center}
.scan-hero h1{font-size:clamp(34px,3.7vw,52px);letter-spacing:-2px}
.scan-lede{font-size:17px;line-height:1.8;max-width:470px;margin:22px 0 0}
.scan-points{list-style:none;margin:24px 0 0;padding:0;display:grid;gap:11px}
.scan-points li{display:flex;align-items:center;gap:10px;font-size:14px;font-weight:600;color:var(--ink)}
.scan-points .icon{width:19px;height:19px;color:var(--accent)}

/* ---- search panel ------------------------------------------------------------------------------------ */
.scan-panel{background:#fff;border:1px solid var(--line);border-radius:16px;padding:30px 30px 26px;
  box-shadow:0 18px 44px rgba(37,46,75,.09)}
.scan-form{display:grid;gap:18px}
.scan-form label{display:block;font-size:13px;font-weight:800;letter-spacing:.03em;text-transform:uppercase;
  color:var(--ink);margin-bottom:9px}
.scan-form input{width:100%;padding:15px 16px;font:inherit;font-size:16px;color:var(--ink);background:#fff;
  border:1px solid #d9dce5;border-radius:10px}
.scan-form input::placeholder{color:#9ba1af}
.scan-form input:focus{outline:2px solid var(--accent);outline-offset:1px;border-color:var(--accent)}
.scan-form .button{width:100%}
.scan-panel-note{margin:16px 0 0;font-size:13px;line-height:1.6;color:var(--copy);text-align:center}

/* Type-ahead list. Ours, not a <datalist>: browsers draw that as an unstyleable dark popover that clips long
   addresses. Anchored to the field so it sits under the input like a normal dropdown. */
.scanner-field{position:relative}
.scanner-options{position:absolute;z-index:40;left:0;right:0;top:calc(100% + 4px);margin:0;padding:6px;
  list-style:none;background:#fff;border:1px solid var(--line);border-radius:10px;
  box-shadow:0 12px 30px rgba(37,46,75,.14);max-height:360px;overflow-y:auto}
.scanner-option{padding:10px 12px;border-radius:7px;cursor:pointer;font-size:15px;color:var(--ink);line-height:1.35}
.scanner-option:hover,.scanner-option.is-active{background:var(--warm);color:var(--accent)}

/* ---- body -------------------------------------------------------------------------------------------- */
.scan-body{padding:64px 0 72px}
/* One column width for everything below the hero. The ladder used to cap at 640 under a full-width result
   card, which left the page looking like two different layouts stacked. */
.scanner-wrap{max-width:900px}
/* The site zeroes every p margin, so a bordered box built on a <p> needs its own gap or it butts straight into
   the next line of copy (the "not enough rating information" branch sits right above the fine print). */
.scan-notice{margin:0 0 22px;padding:16px 20px;border:1px solid var(--line);border-left:3px solid var(--accent);
  border-radius:10px;background:var(--warm);font-size:15px;color:var(--ink);max-width:680px}
.scan-notice:last-child{margin-bottom:0}
.scan-notice a{color:var(--accent);text-decoration:underline;text-underline-offset:3px}
.scan-notice-alert{border-left-color:#a82f3b;background:#fdf3f4}

/* ---- the report card --------------------------------------------------------------------------------- */
/* Score and estimates are one report in one card. They used to be a framed card with the estimates floating
   loose on the page below it, which read as two unrelated blocks. */
.scan-report{background:#fff;border:1px solid var(--line);border-radius:18px;padding:34px 36px;
  box-shadow:0 14px 38px rgba(37,46,75,.07);overflow-wrap:anywhere}
/* 26px, not the global h2 clamp: a business name here sits beside 15px labels, and long legal names such as
   "... Plumbing, Heating & Electrical" wrap to three enormous lines at the page-heading size. */
.scan-score .eyebrow{margin-bottom:12px}
.scan-score h2{font-size:26px;letter-spacing:-.6px;line-height:1.3}
.scan-address{margin:8px 0 0;font-size:15px;color:var(--copy)}
.scan-stats{display:flex;flex-wrap:wrap;gap:20px;margin:26px 0 0}
.scan-stat{flex:1 1 210px;padding:22px 24px;background:var(--warm);border:1px solid #f3dcdd;border-radius:14px}
.scan-stat-label{display:block;font-size:11px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;
  color:var(--copy);margin-bottom:8px}
.scan-stat strong{display:block;font-size:46px;font-weight:800;color:var(--ink);line-height:1;letter-spacing:-1.5px}
.scan-stat strong small{font-size:20px;font-weight:700;color:var(--copy);letter-spacing:0}
.scan-stat-none{font-size:26px !important;letter-spacing:-.5px !important}
.scan-stat-sub{display:block;margin-top:9px;font-size:13px;color:var(--copy)}
/* One element clipped to a width rather than five icons, so a 4.8 shows four-and-most-of-a-star honestly. */
.scan-stars{position:relative;display:inline-block;margin-top:9px;font-size:19px;line-height:1;letter-spacing:2px;
  color:#e3e5ec;white-space:nowrap}
.scan-stars::before{content:"\2605\2605\2605\2605\2605"}
.scan-stars>span{position:absolute;left:0;top:0;overflow:hidden;white-space:nowrap;color:#e8a33d}
.scan-stars>span::before{content:"\2605\2605\2605\2605\2605"}
/* Required by the Places terms. It earns its quietness from POSITION — last, under a rule, after the content —
   not from being faded: the supplied Google mark has to be shown unaltered at its own size, and the
   html_attributions have to stay readable, so no opacity trick and no sub-4.5:1 grey here. */
.scanner-attribution{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-top:22px;padding-top:16px;
  border-top:1px solid var(--line);font-size:12px;color:var(--copy)}
.scanner-attribution img{height:18px;width:auto}

/* ---- candidate matches ------------------------------------------------------------------------------- */
.scan-matches-title{font-size:26px;letter-spacing:-.6px;margin-bottom:20px}
.scan-match-list{display:grid;gap:14px}
.scan-match{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:22px 24px;
  background:#fff;border:1px solid var(--line);border-radius:14px;overflow-wrap:anywhere}
.scan-match h3{font-size:19px;line-height:1.35}
.scan-match p{margin:6px 0 0;font-size:14px;color:var(--copy)}
.scan-match .button{flex:none}

/* ---- waiting state ----------------------------------------------------------------------------------- */
/* An empty page under the search box reads as broken, so this says what comes back. */
.scan-preview h2{font-size:26px;letter-spacing:-.6px;margin-bottom:24px}
.scan-preview-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.scan-preview-grid article{padding:26px 24px;background:#f9fafc;border:1px solid var(--line);border-radius:14px}
.scan-preview-mark{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:#fff1ed;
  color:var(--accent);font-size:15px;font-weight:800;margin-bottom:16px}
.scan-preview-grid h3{font-size:17px;margin-bottom:9px}
.scan-preview-grid p{font-size:14.5px;line-height:1.7}

/* ---- the ladder -------------------------------------------------------------------------------------- */
/* The analyser's point: what the next tenth of a star costs, and the one after that. */
.scanner-estimates{margin-top:32px;padding-top:30px;border-top:1px solid var(--line)}
.scanner-estimates>h2{font-size:26px;letter-spacing:-.7px;margin-bottom:18px}
/* Prose keeps a reading measure even though the card around it went full width — the card widened to match the
   ladder, not to stretch sentences to a hundred characters. */
.scanner-ladder-lede{margin:0 0 20px;color:var(--copy);max-width:68ch}
.ladder{list-style:none;margin:0 0 18px;padding:0;display:grid;gap:10px;max-width:none}
/* Tinted, not white: these rungs now sit on the white report card, where a white row is invisible. */
.ladder-step{display:grid;grid-template-columns:62px 1fr auto;align-items:center;gap:16px;padding:14px 18px;
  background:#f9fafc;border:1px solid var(--line);border-radius:12px}
.ladder-step.is-next{background:#fff}
.ladder-step.is-next{border-color:var(--accent);box-shadow:0 8px 22px rgba(181,75,89,.13);position:relative}
.ladder-rating{font-size:24px;font-weight:800;color:var(--ink);line-height:1}
.ladder-step.is-next .ladder-rating{color:var(--accent)}
.ladder-bar{display:block;height:8px;border-radius:99px;background:#eef0f5;overflow:hidden}
.ladder-bar>span{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,var(--coral),var(--accent))}
.ladder-count{font-size:15px;color:var(--copy);white-space:nowrap}
.ladder-count strong{color:var(--ink);font-size:17px}
.ladder-flag{position:absolute;top:-10px;left:16px;background:var(--accent);color:#fff;font-size:11px;
  font-weight:800;letter-spacing:.05em;text-transform:uppercase;padding:3px 9px;border-radius:99px}
.ladder-note{color:var(--copy);margin:0 0 20px;max-width:68ch}
.ladder-risk{display:flex;align-items:center;gap:20px;flex-wrap:wrap;max-width:none;margin:0 0 16px;
  padding:20px 22px;background:#f9fafc;border:1px solid var(--line);border-radius:14px}
/* Grow to fill: the card is full width now, and without this the two figures huddle at the left edge with a
   third of the box empty. */
.ladder-risk-now,.ladder-risk-after{flex:1 1 150px;display:flex;flex-direction:column;gap:3px;min-width:150px}
.ladder-risk-now strong{font-size:34px;font-weight:800;color:var(--ink);line-height:1}
.ladder-risk-after strong{font-size:34px;font-weight:800;color:var(--accent);line-height:1}
.ladder-risk-label{font-size:11px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--copy)}
.ladder-risk-now span:last-child,.ladder-risk-after span:last-child{font-size:14px;color:var(--copy)}
.ladder-risk-arrow{font-size:24px;color:var(--copy)}
.ladder-cta{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;max-width:none;
  margin:0 0 20px;padding:24px 26px;background:var(--warm);border:1px solid #f3dcdd;border-radius:14px}
.ladder-cta h3{margin:0 0 6px;font-size:21px}
.ladder-cta p{margin:0;color:var(--copy);max-width:44ch}
.scanner-fine{font-size:13px;line-height:1.7;color:var(--copy);max-width:680px}

/* ---- narrow ------------------------------------------------------------------------------------------ */
@media(max-width:980px){
 .scan-hero-inner{grid-template-columns:1fr;gap:34px}
 .scan-hero{padding:22px 0 52px}
 .scan-lede{max-width:none}
 .scan-panel{max-width:520px}
 .scan-preview-grid{grid-template-columns:1fr}
}
@media(max-width:650px){
 main:has(>.scan-hero)>.breadcrumbs{padding-inline:20px}
 .scan-body{padding:44px 0 52px}
 .scan-report{padding:24px 22px}
 .scan-stat strong{font-size:38px}
 .scan-match{flex-direction:column;align-items:flex-start;gap:16px}
 .scan-match .button{width:100%}
 .scanner-estimates>h2{font-size:26px}
}
@media(max-width:560px){
 .ladder-step{grid-template-columns:52px 1fr;gap:10px}
 .ladder-count{grid-column:1/-1;white-space:normal}
 .ladder-cta{flex-direction:column;align-items:flex-start}
}