/* Midas Store Report — VERSION 2 "Instrument Cluster"
   Layout: dark dashboard, 12-column rows (score+insights / YoY tiles / gauge cluster /
   rings+change chart / weekly+techs), collapsing to one column on phones.
   Dark-first (like a dashboard at night); light mode mirrors it. */
:root {
  --g2-bg: #0d0e10;
  --g2-panel: #16181b;
  --g2-panel-2: #1c1f23;
  --g2-line: #272b31;
  --g2-grid: #23272c;
  --g2-ink: #f1f2f4;
  --g2-muted: #9097a1;
  --g2-accent: #ffd100;
  --g2-red: #ff4b3e;
  --g2-good: #34d27b;
  --g2-warn: #ffb020;
  --g2-bad: #ff5a4f;
  --g2-bar: #6b7480;
  --g2-bar-fade: #3a4048;
  --g2-part: #2a2e34;
  --g2-tip: #f1f2f4;
  --g2-star-empty: #474c55;
  --g2-tip-ink: #0d0e10;
  --g2-c0: #ffd100; --g2-c1: #ff7a45; --g2-c2: #3fb6e8; --g2-c3: #a78bfa; --g2-c4: #34d27b; --g2-c5: #e2e5e9;
  --g2-t0: #f4a28c; --g2-t1: #5fd08a; --g2-t2: #6cc4f0; --g2-t3: #ff8a5c;
  --g2-font-display: "Chakra Petch", "Rajdhani", "Arial Narrow", sans-serif;
  --g2-font-body: "Manrope", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  color-scheme: dark;
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --g2-bg: #e9ebee; --g2-panel: #ffffff; --g2-panel-2: #f4f5f7; --g2-line: #dcdfe4; --g2-grid: #e8eaee;
    --g2-ink: #121417; --g2-muted: #5c636d; --g2-good: #138a47; --g2-warn: #b47300; --g2-bad: #d02c21; --g2-red: #d7261b;
    --g2-bar: #4b525c; --g2-bar-fade: #aab0b8; --g2-part: #eef0f3; --g2-tip: #121417; --g2-tip-ink: #ffffff; --g2-star-empty: #cfd3d9;
    --g2-c0: #e0b400; --g2-c1: #f06a32; --g2-c2: #1f8fc4; --g2-c3: #7c5cf0; --g2-c4: #138a47; --g2-c5: #4b525c;
  --g2-t0: #d9735a; --g2-t1: #1e8f4b; --g2-t2: #1f8fc4; --g2-t3: #c8461c;
    --g2-t0: #d9735a; --g2-t1: #1e8f4b; --g2-t2: #1f8fc4; --g2-t3: #c8461c;
    color-scheme: light;
  }
}
:root[data-theme="light"] {
  --g2-bg: #e9ebee; --g2-panel: #ffffff; --g2-panel-2: #f4f5f7; --g2-line: #dcdfe4; --g2-grid: #e8eaee;
  --g2-ink: #121417; --g2-muted: #5c636d; --g2-good: #138a47; --g2-warn: #b47300; --g2-bad: #d02c21; --g2-red: #d7261b;
  --g2-bar: #4b525c; --g2-bar-fade: #aab0b8; --g2-part: #eef0f3; --g2-tip: #121417; --g2-tip-ink: #ffffff; --g2-star-empty: #cfd3d9;
  --g2-c0: #e0b400; --g2-c1: #f06a32; --g2-c2: #1f8fc4; --g2-c3: #7c5cf0; --g2-c4: #138a47; --g2-c5: #4b525c;
  color-scheme: light;
}

* { box-sizing: border-box; }
body { margin: 0; background: var(--g2-bg); color: var(--g2-ink); font-family: var(--g2-font-body); font-size: 15px; line-height: 1.45; }

/* ---------- top bar ---------- */
.g2-top { background: linear-gradient(180deg, #000 0%, #121417 100%); color: #fff; border-bottom: 1px solid #2a2e34; position: relative; }
.g2-top::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 3px; background: repeating-linear-gradient(-45deg, var(--g2-accent) 0 14px, #000 14px 28px); }
.g2-top-in { max-width: 1240px; margin: 0 auto; padding: 20px 20px 22px; display: flex; flex-wrap: wrap; gap: 14px 24px; align-items: center; justify-content: space-between; }
.g2-id { display: flex; align-items: center; gap: 16px; min-width: 0; }
.g2-logo { height: 50px; width: auto; display: block; flex: none; }
.g2-wordmark { background: var(--g2-accent); color: #000; font-family: var(--g2-font-display); padding: 4px 10px; }
.g2-eyebrow { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: #9aa1ab; }
.g2-store { font-family: var(--g2-font-display); font-weight: 700; font-size: clamp(28px, 4.6vw, 42px); line-height: 1.05; margin: 2px 0 0; letter-spacing: .02em; text-transform: uppercase; }
.g2-chips { display: flex; gap: 8px; flex-wrap: wrap; }
.g2-chip { font-size: 13px; padding: 6px 12px; border-radius: 999px; background: #1f2226; border: 1px solid #33373e; color: #e6e8eb; }

/* ---------- layout ---------- */
.g2-main { max-width: 1240px; margin: 0 auto; padding-inline: 20px; padding-block: 26px 36px; display: grid; gap: 28px; }
.g2-row { display: grid; gap: 18px; min-width: 0; }
.g2-r1 { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); }
.g2-r4 { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
.g2-r5 { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.g2-col, .g2-block { min-width: 0; display: grid; gap: 10px; align-content: start; }
.g2-panel { background: var(--g2-panel); border: 1px solid var(--g2-line); border-radius: 10px; padding: 18px; min-width: 0; }
.g2-h { font-family: var(--g2-font-display); font-weight: 600; font-size: 15px; letter-spacing: .16em; text-transform: uppercase; color: var(--g2-muted); margin: 0; display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; }
.g2-h small { font-family: var(--g2-font-body); letter-spacing: 0; text-transform: none; font-size: 13px; }
.g2-k { font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--g2-muted); }
.g2-banner { background: var(--g2-panel); border: 1px solid var(--g2-warn); color: var(--g2-warn); border-radius: 8px; padding: 10px 14px; font-weight: 700; font-size: 14px; }

/* ---------- score ---------- */
.g2-score-big { font-family: var(--g2-font-display); font-weight: 700; font-size: 64px; line-height: 1; margin: 10px 0 12px; font-variant-numeric: tabular-nums; }
.g2-score-big small { font-size: 26px; color: var(--g2-muted); margin-left: 6px; }
.g2-score.good .g2-score-big span { color: var(--g2-good); } .g2-score.warn .g2-score-big span { color: var(--g2-warn); } .g2-score.bad .g2-score-big span { color: var(--g2-bad); }
.g2-score-bar { height: 8px; border-radius: 4px; background: var(--g2-panel-2); overflow: hidden; }
.g2-score-bar i { display: block; height: 100%; border-radius: 4px; background: var(--g2-accent); }
.g2-score-note { color: var(--g2-muted); font-size: 13px; margin: 10px 0 8px; }
.g2-signals { list-style: none; margin: 12px 0 0; padding: 12px 0 0; border-top: 1px solid var(--g2-line); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 12px; font-size: 13px; }
.g2-signals li { display: flex; gap: 8px; align-items: center; min-width: 0; }
.g2-signals li::before { content: ""; width: 8px; height: 8px; border-radius: 50%; flex: none; }
.g2-signals li.ok::before { background: var(--g2-good); } .g2-signals li.no::before { background: var(--g2-bad); }

/* ---------- insights ---------- */
.g2-ins-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 12px; }
.g2-ins { background: var(--g2-panel-2); border-radius: 8px; padding: 14px 14px 14px 16px; border-left: 3px solid var(--g2-line); }
.g2-ins.good { border-left-color: var(--g2-good); } .g2-ins.warn { border-left-color: var(--g2-warn); } .g2-ins.bad { border-left-color: var(--g2-bad); }
.g2-ins h3 { margin: 0 0 4px; font-size: 16px; font-weight: 800; text-wrap: balance; }
.g2-ins p { margin: 0; font-size: 14px; color: var(--g2-muted); }

/* ---------- YoY tiles ---------- */
.g2-tiles { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; }
.g2-tile { background: var(--g2-panel); border: 1px solid var(--g2-line); border-radius: 10px; padding: 14px 16px; min-width: 0; }
.g2-tile-val { font-family: var(--g2-font-display); font-weight: 700; font-size: 30px; line-height: 1.1; margin: 8px 0 6px; font-variant-numeric: tabular-nums; }
.g2-tile-row { display: flex; justify-content: space-between; gap: 6px; flex-wrap: wrap; font-size: 13px; color: var(--g2-muted); font-variant-numeric: tabular-nums; }
.g2-delta { font-weight: 800; }
.g2-delta.good { color: var(--g2-good); } .g2-delta.warn { color: var(--g2-warn); } .g2-delta.bad { color: var(--g2-bad); }
.g2-tile-note { margin-top: 8px; font-size: 11px; color: var(--g2-muted); letter-spacing: .02em; }

/* ---------- gauges ---------- */
.g2-cluster { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; background: radial-gradient(120% 140% at 50% 0%, var(--g2-panel-2) 0%, var(--g2-panel) 60%); }
.g2-gauge { text-align: center; min-width: 0; padding: 4px 6px; }
.g2-gauge svg { width: 100%; max-width: 250px; height: auto; display: block; margin: 0 auto; overflow: visible; }
.g2-band { fill: none; stroke-width: 12; }
.g2-band.good { stroke: var(--g2-good); } .g2-band.warn { stroke: var(--g2-warn); } .g2-band.bad { stroke: var(--g2-bad); }
.g2-tick { stroke: var(--g2-muted); stroke-width: 1.5; }
.g2-ticklab { fill: var(--g2-muted); font-size: 10px; font-family: var(--g2-font-body); }
.g2-needle path { fill: var(--g2-ink); }
.g2-needle { transform-box: view-box; transform-origin: 110px 112px; transform: rotate(-90deg); transition: transform 1.2s cubic-bezier(.2, 1.3, .4, 1); }
.g2-ready .g2-needle { transform: rotate(var(--a)); }
.g2-hub { fill: var(--g2-accent); stroke: var(--g2-panel); stroke-width: 3; }
.g2-gval { font-family: var(--g2-font-display); font-weight: 700; font-size: 34px; line-height: 1; margin-top: -2px; font-variant-numeric: tabular-nums; }
.g2-glabel { font-weight: 800; margin-top: 6px; }
.g2-gsub { font-size: 12px; color: var(--g2-muted); margin-top: 2px; display: flex; gap: 6px; align-items: center; justify-content: center; flex-wrap: wrap; }
.g2-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--g2-muted); }
.g2-gauge.good .g2-dot { background: var(--g2-good); } .g2-gauge.warn .g2-dot { background: var(--g2-warn); } .g2-gauge.bad .g2-dot { background: var(--g2-bad); }

/* ---------- rings ---------- */
.g2-rings { display: grid; gap: 14px; }
.g2-ring { display: grid; grid-template-columns: 124px minmax(0, 1fr); gap: 16px; align-items: center; }
.g2-ring + .g2-ring { border-top: 1px solid var(--g2-line); padding-top: 14px; }
.g2-ring svg { width: 124px; height: 124px; display: block; }
.g2-ring-track { fill: none; stroke: var(--g2-panel-2); stroke-width: 12; }
.g2-ring-fill { fill: none; stroke-width: 12; stroke-linecap: round; stroke-dasharray: 0 var(--c); transition: stroke-dasharray 1.2s ease-out; }
.g2-ready .g2-ring-fill { stroke-dasharray: var(--len) var(--c); }
.g2-ring.good .g2-ring-fill { stroke: var(--g2-good); } .g2-ring.warn .g2-ring-fill { stroke: var(--g2-warn); } .g2-ring.bad .g2-ring-fill { stroke: var(--g2-bad); }
.g2-ring-pct { fill: var(--g2-ink); font-family: var(--g2-font-display); font-weight: 700; font-size: 28px; }
.g2-ring-sub { fill: var(--g2-muted); font-size: 11px; font-family: var(--g2-font-body); }
.g2-ring-val { font-family: var(--g2-font-display); font-weight: 700; font-size: 28px; line-height: 1.1; margin: 4px 0; font-variant-numeric: tabular-nums; }
.g2-ring-val span { font-size: 17px; color: var(--g2-muted); }
.g2-ring-note { font-size: 13px; color: var(--g2-muted); }
.g2-ring-pace { font-size: 13px; margin-top: 6px; padding: 6px 10px; background: var(--g2-panel-2); border-radius: 6px; display: inline-block; }

/* ---------- charts ---------- */
.g2-chartbox { padding: 14px 14px 10px; }
.g2-canvas { position: relative; width: 100%; }
.g2-legend { display: flex; gap: 14px; flex-wrap: wrap; font-size: 12px; color: var(--g2-muted); margin-bottom: 8px; }
.g2-legend i { display: inline-block; width: 14px; height: 10px; border-radius: 2px; margin-right: 6px; vertical-align: -1px; }
.lg-bar { background: var(--g2-bar); } .lg-best { background: var(--g2-accent); }
.lg-part { background: var(--g2-part); border: 1px dashed var(--g2-muted); }
.lg-avg { height: 0 !important; border-top: 2px dashed var(--g2-red); vertical-align: 3px !important; }

/* ---------- read check chip ---------- */
.g2-readchip.good { border-color: var(--g2-good); color: var(--g2-good); }
.g2-readchip.warn { border-color: var(--g2-warn); color: var(--g2-warn); }
.g2-banner b { color: var(--g2-ink); }
.g2-banner { font-weight: 500; line-height: 1.5; }

/* ---------- weekly row ---------- */
.g2-weekrow { display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: 22px; padding: 16px 18px 12px; }
.g2-weekchart { min-width: 0; }
.g2-wstats { display: grid; gap: 10px; align-content: start; border-left: 1px solid var(--g2-line); padding-left: 20px; }
.g2-wstat .v { font-family: var(--g2-font-display); font-weight: 700; font-size: 24px; font-variant-numeric: tabular-nums; line-height: 1.15; margin-top: 2px; }
.g2-wstat .s { font-size: 12.5px; color: var(--g2-muted); }
.g2-wstat.good .v { color: var(--g2-good); }
.g2-wpend { font-size: 12.5px; color: var(--g2-muted); border-top: 1px dashed var(--g2-line); padding-top: 10px; }

/* ---------- GP bonus ---------- */
.lg-bonus { height: 0 !important; border-top: 2px dotted var(--g2-t3); vertical-align: 3px !important; }
.g2-bonus { display: grid; grid-template-columns: minmax(200px, 300px) minmax(0, 1fr); gap: 22px; align-items: start; margin-top: 12px; }
.g2-bgroup { font-family: var(--g2-font-display); font-weight: 700; font-size: 20px; margin-top: 6px; }
.g2-bgroup span { font-family: var(--g2-font-body); font-weight: 600; font-size: 14px; color: var(--g2-muted); }
.g2-bweekly { font-size: 13.5px; color: var(--g2-muted); margin-top: 2px; }
.g2-bweekly b { color: var(--g2-accent); }
.g2-blevel { font-weight: 700; margin-left: 6px; }
.g2-bonus-head p { margin: 6px 0 0; font-size: 14px; line-height: 1.5; color: var(--g2-muted); }
.g2-bonus-head b { color: var(--g2-ink); }
.g2-bonus-wrap { overflow-x: auto; }
.g2-btable { width: 100%; border-collapse: collapse; font-size: 14px; font-variant-numeric: tabular-nums; }
.g2-btable th { font-size: 11.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--g2-muted); text-align: left; padding: 0 10px 8px; border-bottom: 1px solid var(--g2-line); white-space: nowrap; }
.g2-btable th small { text-transform: none; letter-spacing: 0; font-weight: 500; }
.g2-btable td { padding: 9px 10px; border-bottom: 1px solid var(--g2-line); white-space: nowrap; }
.g2-btable tr:last-child td { border-bottom: 0; }
.g2-btable .n { text-align: right; }
.g2-btable tr.cur td { background: var(--g2-panel-2); }
.g2-btier { display: inline-block; min-width: 42px; text-align: center; font-weight: 800; font-size: 13px; padding: 2px 8px; border-radius: 999px; border: 1.5px dotted currentColor; }
.g2-btier.t0 { color: var(--g2-t0); } .g2-btier.t1 { color: var(--g2-t1); } .g2-btier.t2 { color: var(--g2-t2); } .g2-btier.t3 { color: var(--g2-t3); }

/* ---------- technicians row ---------- */
.g2-techs2 { display: grid; gap: 16px; }
.g2-ttiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.g2-ttile { background: var(--g2-panel-2); border-radius: 8px; padding: 12px 14px; min-width: 0; }
.g2-ttile .v { font-family: var(--g2-font-display); font-weight: 700; font-size: 22px; font-variant-numeric: tabular-nums; margin-top: 4px; overflow-wrap: anywhere; }
.g2-ttile .s { font-size: 12.5px; color: var(--g2-muted); margin-top: 2px; }
.g2-tlegend { display: flex; gap: 16px; flex-wrap: wrap; font-size: 12px; color: var(--g2-muted); }
.g2-tlegend i { display: inline-block; width: 14px; height: 10px; border-radius: 2px; margin-right: 6px; vertical-align: -1px; }
.lg-core, .g2-tbar .core { background: var(--g2-c2); }
.lg-tb, .g2-tbar .tb { background: var(--g2-accent); }
.g2-tbars { display: grid; }
.g2-tbar { display: grid; grid-template-columns: 26px minmax(130px, 190px) minmax(120px, 1fr) 110px 54px 110px 110px; gap: 12px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--g2-line); font-size: 14px; }
.g2-tbar:last-child { border-bottom: 0; }
.g2-tbar.head { font-size: 11.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--g2-muted); padding-top: 0; }
.g2-tbar .rk { width: 24px; height: 24px; border-radius: 50%; background: var(--g2-panel-2); display: grid; place-items: center; font-size: 12px; font-weight: 800; color: var(--g2-muted); }
.g2-tbar.head .rk, .g2-tbar.head span:first-child { background: none; }
.g2-tbar.lead .rk { background: var(--g2-accent); color: #111; }
.g2-tbar .nm { font-weight: 700; overflow-wrap: anywhere; }
.g2-tbar .track { display: flex; height: 14px; border-radius: 4px; background: var(--g2-panel-2); overflow: hidden; }
.g2-tbar .track i { display: block; height: 100%; }
.g2-tbar .n { text-align: right; font-variant-numeric: tabular-nums; }
.g2-tbar .am { font-weight: 800; }
.g2-tbar .sh { color: var(--g2-muted); }
.g2-tbar.head .n { text-align: right; }

/* ---------- techs ---------- */
.g2-techs { display: grid; grid-template-columns: 190px minmax(0, 1fr); gap: 18px; align-items: center; }
.g2-donut { position: relative; }
.g2-donut-mid { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; pointer-events: none; }
.g2-donut-mid b { font-family: var(--g2-font-display); font-size: 22px; font-variant-numeric: tabular-nums; }
.g2-donut-mid span { font-size: 11px; color: var(--g2-muted); text-transform: uppercase; letter-spacing: .12em; }
.g2-techlist { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; min-width: 0; }
.g2-techlist li { display: grid; grid-template-columns: 12px minmax(0, 1fr) 40px auto; gap: 10px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--g2-line); font-size: 14px; }
.g2-techlist li:last-child { border-bottom: 0; }
.g2-techlist .nm { font-weight: 700; overflow-wrap: anywhere; }
.g2-techlist .sh { color: var(--g2-muted); text-align: right; font-variant-numeric: tabular-nums; }
.g2-techlist .am { font-weight: 800; text-align: right; font-variant-numeric: tabular-nums; }
.sw { width: 12px; height: 12px; border-radius: 3px; display: block; }
.sw0 { background: var(--g2-c0); } .sw1 { background: var(--g2-c1); } .sw2 { background: var(--g2-c2); } .sw3 { background: var(--g2-c3); } .sw4 { background: var(--g2-c4); } .sw5 { background: var(--g2-c5); }


/* ---------- Google reviews ---------- */
.g2-google { display: grid; grid-template-columns: minmax(220px, 280px) minmax(0, 1fr); gap: 22px; position: relative; padding-bottom: 34px; }
.g2-google .g2-revs { grid-column: 1 / -1; border-top: 1px solid var(--g2-line); padding-top: 16px; }
.g2-google.norecap .g2-revs { grid-column: 2; border-top: 0; padding-top: 0; }
.g2-recap { display: grid; gap: 12px; align-content: start; min-width: 0; }
.g2-recap-head { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.g2-sent { font-size: 12.5px; font-weight: 800; padding: 3px 10px; border-radius: 999px; border: 1px solid currentColor; }
.g2-sent.good { color: var(--g2-good); } .g2-sent.warn { color: var(--g2-warn); } .g2-sent.bad { color: var(--g2-bad); }
.g2-recap-watch { border: 1px solid var(--g2-bad); border-radius: 8px; padding: 9px 12px; font-size: 13.5px; color: var(--g2-ink); }
.g2-recap-watch b { color: var(--g2-bad); }
.g2-recap-sum { margin: 0; font-size: 16px; line-height: 1.45; font-weight: 600; max-width: 80ch; }
.g2-recap-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.g2-recap-col { background: var(--g2-panel-2); border-radius: 8px; padding: 12px 14px; border-top: 3px solid var(--g2-line); min-width: 0; }
.g2-recap-col.good { border-top-color: var(--g2-good); } .g2-recap-col.bad { border-top-color: var(--g2-bad); } .g2-recap-col.act { border-top-color: var(--g2-accent); }
.g2-recap-col ul { margin: 8px 0 0; padding-left: 18px; display: grid; gap: 5px; font-size: 13.5px; line-height: 1.4; }
.g2-recap-col p { margin: 8px 0 0; font-size: 13.5px; line-height: 1.45; }
.g2-recap-meta { font-size: 12px; color: var(--g2-muted); }
.g2-gscore { display: grid; gap: 6px; align-content: start; padding-right: 22px; border-right: 1px solid var(--g2-line); }
.g2-gbig { font-family: var(--g2-font-display); font-weight: 700; font-size: 60px; line-height: 1; font-variant-numeric: tabular-nums; }
.g2-gbig small { font-size: 22px; color: var(--g2-muted); margin-left: 6px; }
.g2-google.good .g2-gbig span { color: var(--g2-good); } .g2-google.warn .g2-gbig span { color: var(--g2-warn); } .g2-google.bad .g2-gbig span { color: var(--g2-bad); }
.g2-stars { display: inline-flex; gap: 3px; }
.g2-stars i { width: 22px; height: 22px; display: block; background: linear-gradient(90deg, #fbbc04 var(--f), var(--g2-star-empty) var(--f));
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2l2.9 6.9 7.1.6-5.4 4.7 1.6 7.1L12 17.6 5.8 21.3l1.6-7.1L2 9.5l7.1-.6z'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2l2.9 6.9 7.1.6-5.4 4.7 1.6 7.1L12 17.6 5.8 21.3l1.6-7.1L2 9.5l7.1-.6z'/%3E%3C/svg%3E") center / contain no-repeat; }
.g2-stars.sm i { width: 14px; height: 14px; }
.g2-gmeta { font-size: 13.5px; color: var(--g2-muted); }
.g2-gmeta b { color: var(--g2-ink); }
.g2-gword { font-weight: 800; }
.g2-google.good .g2-gword { color: var(--g2-good); } .g2-google.warn .g2-gword { color: var(--g2-warn); } .g2-google.bad .g2-gword { color: var(--g2-bad); }
.g2-gsrc { font-size: 12px; }
.g2-glinks { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 6px; font-size: 13.5px; font-weight: 700; }
.g2-glinks a, .g2-rev a { color: var(--g2-ink); text-underline-offset: 3px; }
.g2-glinks a:focus-visible, .g2-rev a:focus-visible { outline: 2px solid var(--g2-accent); outline-offset: 2px; }
.g2-revs { display: grid; gap: 10px; min-width: 0; }
.g2-rev-list { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
.g2-rev-list .g2-rev p { font-size: 13px; }
.g2-rev { background: var(--g2-panel-2); border-radius: 8px; padding: 12px 14px; display: grid; gap: 6px; align-content: start; min-width: 0; }
.g2-rev-top { display: flex; justify-content: space-between; gap: 8px; align-items: center; flex-wrap: wrap; }
.g2-rev-when { font-size: 12px; color: var(--g2-muted); }
.g2-rev p { margin: 0; font-size: 13.5px; line-height: 1.45; overflow-wrap: anywhere; }
.g2-rev-empty { color: var(--g2-muted); font-style: italic; }
.g2-rev-who { font-size: 12.5px; font-weight: 700; color: var(--g2-muted); }
.g2-gattr { position: absolute; right: 18px; bottom: 10px; font-size: 11.5px; color: var(--g2-muted); }
.g2-gnote { color: var(--g2-muted); font-size: 14px; }
@media (max-width: 960px) {
  .g2-google { grid-template-columns: minmax(0, 1fr); }
  .g2-gscore { border-right: 0; padding-right: 0; border-bottom: 1px solid var(--g2-line); padding-bottom: 16px; }
  .g2-google.norecap .g2-revs { grid-column: 1; }
  .g2-recap-cols { grid-template-columns: minmax(0, 1fr); }
  .g2-rev-list { grid-template-columns: repeat(5, minmax(220px, 1fr)); overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 6px; }
  .g2-rev-list .g2-rev { scroll-snap-align: start; }
}

/* ---------- footer / states ---------- */
.g2-foot { max-width: 1240px; margin: 0 auto; padding-inline: 20px; padding-block: 0 30px; display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; color: var(--g2-muted); font-size: 13px; }
.g2-foot a { color: var(--g2-muted); }
.g2-loading { text-align: center; padding: 80px 20px; color: var(--g2-muted); }
.g2-spin { width: 40px; height: 40px; border: 4px solid var(--g2-panel-2); border-top-color: var(--g2-accent); border-radius: 50%; margin: 0 auto 14px; animation: g2spin .9s linear infinite; }
@keyframes g2spin { to { transform: rotate(360deg); } }
.g2-pdf canvas { display: block; width: 100%; height: auto; margin: 0 auto 12px; background: #fff; border-radius: 6px; }

@media (prefers-reduced-motion: reduce) {
  .g2-needle, .g2-ring-fill { transition: none; }
  .g2-spin { animation: none; }
}

/* ---------- responsive ---------- */
@media (max-width: 1100px) { .g2-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 960px) {
  .g2-r1, .g2-r4, .g2-r5 { grid-template-columns: minmax(0, 1fr); }
  .g2-cluster { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 620px) {
  .g2-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .g2-ins-grid { grid-template-columns: minmax(0, 1fr); }
  .g2-techs { grid-template-columns: minmax(0, 1fr); }
  .g2-donut { max-width: 220px; margin: 0 auto; width: 100%; }
  .g2-ring { grid-template-columns: 96px minmax(0, 1fr); }
  .g2-ring svg { width: 96px; height: 96px; }
  .g2-tile-val { font-size: 24px; }
  .g2-logo { height: 40px; }
  .g2-panel { padding: 14px; }
}
@media (max-width: 380px) { .g2-cluster { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 960px) {
  .g2-weekrow { grid-template-columns: minmax(0, 1fr); }
  .g2-wstats { border-left: 0; padding-left: 0; border-top: 1px solid var(--g2-line); padding-top: 14px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .g2-wpend { grid-column: 1 / -1; }
  .g2-bonus { grid-template-columns: minmax(0, 1fr); }
  .g2-ttiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .g2-tbar { grid-template-columns: 26px minmax(0, 1fr) 100px 48px; }
  .g2-tbar .bar { grid-column: 2 / -1; grid-row: 2; }
  .g2-tbar .n[data-l] { display: none; }
  .g2-tbar.head .n:nth-last-child(-n+2) { display: none; }
  .g2-tbar.head .bar { display: none; }
}
@media (max-width: 420px) {
  .g2-ttiles { grid-template-columns: minmax(0, 1fr); }
  .g2-wstats { grid-template-columns: minmax(0, 1fr); }
}

/* 2026 vs 2025 tiles: 2025 and change on their own labelled lines */
.g2-tile-cmp { margin: 10px 0 0; padding-top: 8px; border-top: 1px solid var(--g2-line); display: grid; gap: 4px; }
.g2-tile-cmp > div { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.g2-tile-cmp dt { font-size: 11.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--g2-muted); }
.g2-tile-cmp dd { margin: 0; font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--g2-ink); }
.g2-tile-cmp dd.g2-delta { font-weight: 800; }

/* Google: last 30 days from the Qualtrics review feed */
.g2-g30 { margin-top: 8px; padding-top: 10px; border-top: 1px solid var(--g2-line); display: grid; gap: 6px; }
.g2-g30row { font-size: 13.5px; color: var(--g2-muted); } .g2-g30row b { color: var(--g2-ink); }
.g2-g30stars { display: grid; gap: 3px; }
.g2-g30stars span { display: grid; grid-template-columns: 26px 1fr 30px; gap: 6px; align-items: center; font-size: 12px; color: var(--g2-muted); }
.g2-g30stars i { font-style: normal; } .g2-g30stars b { text-align: right; color: var(--g2-ink); }
.g2-g30stars em { display: block; height: 7px; border-radius: 4px; background: linear-gradient(90deg, #fbbc04 var(--w), var(--g2-panel-2) var(--w)); }
.g2-ok { color: var(--g2-good); font-weight: 700; } .g2-no { color: var(--g2-bad); font-weight: 700; }
/* Print button in the header */
button.g2-print { cursor: pointer; font: inherit; font-size: 13px; font-weight: 700; display: inline-flex; align-items: center; gap: 6px; background: #ffd100; color: #16171a; border-color: #ffd100; }
button.g2-print svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; }
button.g2-print:hover { filter: brightness(1.06); }
button.g2-print:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
