/* ==========================================================================
   appshot.css  ·  the app-screen replicas the marketing pages show
   --------------------------------------------------------------------------
   Each block copies the visual signature of one live app template, named in its
   own comment. The markup is NOT the app's markup: this site loads no Bootstrap,
   so no app class name can be borrowed. What is copied is what someone
   recognises - colours, proportions, chip shapes and type scale.

   The --a-* token block is the app's own (aero-app.css:15-28), declared on
   .appshot rather than on :root so it cannot leak into the marketing tokens
   (which are unprefixed: --bg, --text-1) or be leaked into. Both themes are
   declared and the replicas FOLLOW the page, because the app is not a light-only
   product and every screenshot of it running is dark.

   The report deck has its own block at the foot of the file: it is a document
   with its own palette, and it follows the page for the same reason - the real
   report ships a theme toggle that persists the same rt-theme key this site uses.

   Markup comes from appshot.js. Loaded only by the pages that show a replica.
   ========================================================================== */

/* A pin is an absolutely placed wrapper around GG.nodeSVG's own <svg>. */
.gv-pin{ position:absolute; transform:translate(-50%,-50%); line-height:0; pointer-events:none; }
.gv-pin svg{ display:block; }

.feed .when{margin-left:auto;color:var(--muted);font-size:.7rem;white-space:nowrap}
.play{display:inline-grid;place-items:center;width:18px;height:18px;border-radius:50%;flex:0 0 auto;
  background:var(--accent-weak);color:var(--accent-ink);font-size:.5rem;padding-left:1px}
.deck-rail .dl.on{background:var(--accent-weak);color:var(--accent-ink);font-weight:600}
.deck-rail .dl.on b{background:var(--accent);color:#fff}
/* ==========================================================================
   appshot  ·  faithful replicas of the real app screens
   --------------------------------------------------------------------------
   Each block copies the visual signature of one live template, named in its own
   comment. The markup is NOT the app's markup: the marketing site loads no
   Bootstrap, so no app class name can be borrowed. What is copied is what
   someone recognises: colours, proportions, chip shapes and type scale.

   The --a-* token block is lifted from aero-app.css:15-28 and declared HERE,
   on .appshot, not on :root, so it cannot leak into the marketing tokens (which
   are unprefixed: --bg, --text-1) or be leaked into. Both themes are declared,
   and the replicas FOLLOW THE PAGE: the app is not a light-only product, and
   every screenshot of it running is dark. The dark block is further down, after
   the components, so it wins as the default.
   ========================================================================== */
.appshot{
  --a-bg:#EAEFF6; --a-bg-2:#F3F6FB;
  --a-ink:#0F1B2D; --a-text-2:#3E4C60; --a-muted:#6C7A90;
  --a-border:rgba(15,27,45,.10); --a-border-2:rgba(15,27,45,.16);
  --a-surface:#FFFFFF;
  --a-accent:#E11D48; --a-accent-ink:#C50E38; --a-accent-weak:rgba(225,29,72,.10);
  --a-good:#16A34A; --a-mid:#B45309; --a-low:#DC2626; --a-info:#2563EB;
  --a-shadow-sm:0 1px 2px rgba(27,40,56,.06);
  --a-shadow:0 1px 2px rgba(27,40,56,.06), 0 14px 34px -14px rgba(27,40,56,.18);
  --a-tray:rgba(15,27,45,.035); --a-tray-line:rgba(15,27,45,.07);
  background:var(--a-bg); color:var(--a-ink);
  border-radius:12px; padding:16px; overflow:hidden;
  font-size:14px; line-height:1.45;
  /* Fills whatever the frame gives it, down to its design width; below that the
     frame scrolls. A screenshot does not reflow. */
  width:100%; min-width:700px;
}
.appshot--flush{ padding:0; }
.appshot *{ box-sizing:border-box; }
.appshot a{ color:var(--a-accent); text-decoration:none; }
.appshot h4{ font-size:.95rem; font-weight:700; margin:0 0 .5rem; color:var(--a-ink); letter-spacing:-.01em;
  display:flex; align-items:center; gap:6px; }
.appshot h4 svg{ opacity:.7; }
.appshot .as-card{ background:var(--a-surface); border:1px solid var(--a-border);
  border-radius:12px; box-shadow:var(--a-shadow-sm); padding:14px 16px; }
.appshot .as-muted{ color:var(--a-muted); }
.appshot .as-sub{ font-size:.8rem; color:var(--a-muted); }
.appshot .as-head{ display:flex; align-items:baseline; justify-content:space-between; gap:10px; margin-bottom:9px; }
/* the app's small segmented range switch (btn-group, brand active state) */
.appshot .as-seg{ display:inline-flex; border:1px solid var(--a-border); border-radius:7px; overflow:hidden; flex-shrink:0; }
.appshot .as-seg i{ font-style:normal; font-size:.7rem; font-weight:600; padding:2px 8px; color:var(--a-muted); }
.appshot .as-seg i+i{ border-left:1px solid var(--a-border); }
.appshot .as-seg i.on{ background:var(--a-accent); color:#fff; }
/* the inline note the app uses for a finding, not a warning */
.appshot .as-note{ display:flex; gap:8px; align-items:flex-start; font-size:.75rem;
  color:var(--a-text-2); background:rgba(37,99,235,.07); border:1px solid rgba(37,99,235,.18);
  border-radius:9px; padding:7px 10px; margin-bottom:10px; }
.appshot .as-note svg{ color:var(--a-info); flex-shrink:0; margin-top:1px; }
/* chart legend: Chart.js with usePointStyle 'line' draws a short rule, not a box */
.appshot .as-key{ display:flex; flex-wrap:wrap; gap:6px 14px; margin-top:9px; font-size:.7rem; color:var(--a-text-2); }
.appshot .as-key span{ display:inline-flex; align-items:center; gap:6px; }
.appshot .as-key i{ width:14px; height:2px; border-radius:2px; flex-shrink:0; }
/* ── stat tiles ── brand-theme.css:176-234 + :415-421 ── */
.appshot .as-tiles{ display:grid; grid-template-columns:repeat(5,1fr); gap:10px; }
.appshot .as-tiles--6{ grid-template-columns:repeat(5,1fr); }
.appshot .as-tile{ display:flex; flex-direction:column; padding:.8rem 1rem .85rem;
  background:var(--a-surface); border:1px solid var(--a-border); border-radius:14px;
  box-shadow:0 1px 2px rgba(16,24,40,.04); }
.appshot .as-tile__top{ display:flex; align-items:center; justify-content:space-between; margin-bottom:.8rem; }
.appshot .as-tile__chip{ display:inline-flex; align-items:center; justify-content:center;
  width:36px; height:36px; border-radius:10px; background:#FBE7EC; color:#E11D48; font-size:1.05rem; flex-shrink:0; }
.appshot .as-tile__chev{ display:inline-flex; align-items:center; justify-content:center;
  width:26px; height:26px; border-radius:50%; border:1px solid var(--a-border); color:#98A2B3; font-size:.8rem; }
.appshot .as-tile__label{ text-transform:uppercase; font-size:.64rem; letter-spacing:.05em;
  font-weight:600; color:#6B7685; margin-bottom:.15rem; white-space:nowrap; }
.appshot .as-tile__count{ font-size:1.4rem; font-weight:700; line-height:1.05;
  color:var(--a-ink); letter-spacing:-.02em; }
/* An info tile is a different SHAPE, not a different skin: dashed hairline, no
   hover lift, and the chip sits beside the number rather than above it, because
   it filters nothing (search_ranks/list.html:130-137). */
.appshot .as-tile--info{ background:transparent; border:1px dashed var(--a-border);
  box-shadow:none; justify-content:center; }
.appshot .as-tile--info .as-tile__chip{ background:#EEF1F5; color:#6B7685; }
.appshot .as-inforow{ display:flex; align-items:center; gap:9px; }
.appshot .as-inforow .as-tile__label{ white-space:normal; }
.appshot table{ width:100%; border-collapse:collapse; font-size:.8rem; }
.appshot th{ text-align:left; font-weight:600; font-size:.68rem; text-transform:uppercase;
  letter-spacing:.05em; color:var(--a-muted); padding:0 8px 7px; border-bottom:1px solid var(--a-border); white-space:nowrap; }
.appshot td{ padding:8px; border-bottom:1px solid var(--a-tray-line); vertical-align:middle; }
.appshot tr:last-child td{ border-bottom:none; }
.appshot .num{ text-align:right; font-variant-numeric:tabular-nums; }
/* ── rank badges ── brand-theme.css:273-277. Darker is better; this is the ORGANIC
   scale and is deliberately not the geogrid's five tiers. ── */
.appshot .as-rank{ display:inline-block; min-width:26px; text-align:center;
  padding:.16rem .4rem; border-radius:6px; font-size:.74rem; font-weight:700; font-variant-numeric:tabular-nums; }
.appshot .rt1{ background:#7E0F24; color:#fff; }
.appshot .rt2{ background:#E11D48; color:#fff; }
.appshot .rt3{ background:#F2B4C1; color:#7E0F24; }
.appshot .rt4{ background:#FBE7EC; color:#B3162F; }
.appshot .rt5{ background:#EEF1F5; color:#5B6675; }
.appshot .as-up{ color:var(--a-good); font-weight:600; font-size:.78rem; }
.appshot .as-down{ color:var(--a-low); font-weight:600; font-size:.78rem; }
.appshot .as-badge{ display:inline-block; padding:.14rem .5rem; border-radius:6px;
  font-size:.7rem; font-weight:600; white-space:nowrap; }
.appshot .bs-good{ background:rgba(22,163,74,.12); color:#15803D; }
.appshot .bs-teal{ background:rgba(14,116,144,.12); color:#0E7490; }
.appshot .bs-amber{ background:rgba(180,83,9,.12); color:#B45309; }
.appshot .bs-muted{ background:#EEF1F5; color:#5B6675; }
/* ── geogrid scan viewer ── scans/view.html:29-122 + :247-303 ──────────────
   Every alpha here is the template's own: --gv-glass-rest is .55, not a guess,
   and the timeline is a full-width strip beside the card (left:360px;right:16px),
   not a box in the corner. ── */
.appshot .gv{ position:relative; border-radius:12px; overflow:hidden;
  background:#E8EDF3; height:560px; }
/* The map is drawn as geometry in mapSVG(), not as CSS gradients: soft-edged
   radial gradients for parks and water read as blurred nodes smeared over the
   map. These are only the colours it uses, low-contrast so the pins stay the
   subject. */
.appshot .gv-map{ position:absolute; inset:0; overflow:hidden;
  --m-land:#0F141C; --m-park:#15251B; --m-water:#132338; --m-block:rgba(255,255,255,.035);
  --m-minor:rgba(255,255,255,.045); --m-road:rgba(255,255,255,.10); --m-casing:rgba(255,255,255,.04); }
.light .appshot .gv-map,
:root[data-theme="light"] .appshot .gv-map{
  --m-land:#EDECE4; --m-park:#D3E7CC; --m-water:#B7D6EA; --m-block:rgba(15,27,45,.045);
  --m-minor:#F7F7F3; --m-road:#FFFFFF; --m-casing:rgba(15,27,45,.055); }
.appshot .gv-mapsvg{ display:block; width:100%; height:100%; }
.appshot .gv-pins{ position:absolute; left:0; top:0; pointer-events:none; }
/* A panel is SOLID white only for the scan card; everything else is the frosted
   recipe at --gv-glass-rest. */
.appshot .gv-card{ position:absolute; top:16px; left:16px; width:330px;
  padding:14px 16px; border-radius:14px; z-index:6;
  background:radial-gradient(120% 90% at 0% 0%,var(--gv-wash) 0%,transparent 55%),var(--a-surface);
  border:1px solid var(--a-border); box-shadow:var(--a-shadow); }
.appshot .gv-panel-g{ position:absolute; z-index:5; border-radius:14px;
  background:rgba(255,255,255,.55);
  -webkit-backdrop-filter:blur(18px) saturate(1.7); backdrop-filter:blur(18px) saturate(1.7);
  border:1px solid var(--a-border);
  box-shadow:var(--a-shadow), inset 0 1px 0 rgba(255,255,255,.95); }
.appshot .gv-top{ display:flex; align-items:center; justify-content:space-between;
  gap:8px; font-size:.74rem; color:var(--a-muted); }
.appshot .gv-kw{ font-size:.95rem; font-weight:600; margin:.35rem 0 0; }
.appshot .gv-nums{ display:flex; align-items:flex-end; gap:12px; margin-top:12px; }
.appshot .gv-metric{ font-size:1.75rem; font-weight:700; line-height:1; letter-spacing:-.02em; }
.appshot .gv-mlabel{ font-size:.7rem; color:var(--a-muted); }
.appshot .gv-donut{ margin-left:auto; }
.appshot .gv-legend{ display:flex; flex-wrap:wrap; gap:5px 9px; margin-top:9px;
  font-size:.66rem; color:var(--a-text-2); }
.appshot .gv-legend span{ display:inline-flex; align-items:center; gap:4px; }
.appshot .gv-grid-line{ font-size:.7rem; color:var(--a-muted); margin-top:7px; }
/* timeline strip: beside the card, running to the right edge */
.appshot .gv-time{ top:16px; left:360px; right:16px; padding:9px 14px 5px; }
.appshot .gv-time-head{ display:flex; align-items:center; justify-content:space-between;
  gap:10px; font-size:.72rem; color:var(--a-text-2); font-weight:600; margin-bottom:5px; }
.appshot .gv-seg{ display:inline-flex; border:1px solid var(--a-border); border-radius:7px; overflow:hidden; }
.appshot .gv-seg i{ font-style:normal; font-size:.66rem; font-weight:600; padding:1px 7px; color:var(--a-muted); }
.appshot .gv-seg i+i{ border-left:1px solid var(--a-border); }
.appshot .gv-seg i.on{ background:var(--a-accent); color:#fff; }
.appshot .gv-time-axis{ display:flex; justify-content:space-between; font-size:.62rem; color:var(--a-muted); }
/* competitors drawer, closed, bottom-left under the card */
.appshot .gv-comp{ bottom:16px; left:16px; width:330px; padding:9px 12px; }
.appshot .gv-comp-head{ display:flex; align-items:center; gap:7px; font-size:.78rem; font-weight:700; }
.appshot .gv-comp-head b{ color:var(--a-muted); font-weight:600; }
.appshot .gv-ico{ color:var(--a-muted); display:inline-flex; }
.appshot .gv-comp-head .gv-ico:nth-of-type(2){ margin-left:auto; }
.appshot .gv-comp-sub{ font-size:.68rem; color:var(--a-muted); margin:1px 0 6px; }
.appshot .gv-comp-row{ display:flex; align-items:center; gap:7px; padding:3px 0; font-size:.74rem; }
.appshot .gv-comp-row .nm{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.appshot .gv-hot{ color:#B3162F; background:rgba(225,29,72,.10);
  border-radius:999px; padding:1px 7px; font-size:.66rem; font-weight:600; margin-left:auto; white-space:nowrap; }
.appshot .gv-cool{ color:var(--a-muted); background:#EEF1F5;
  border-radius:999px; padding:1px 7px; font-size:.66rem; font-weight:600; margin-left:auto; white-space:nowrap; }
/* Drawn solid, not glass: this replica shows the rail OPEN, and view.html:78
   firms an open panel up to --gv-glass-on (.76 light / .70 dark). Solid also means
   the pins it covers are hidden cleanly instead of smeared through the frost. */
.appshot .gv-actions{ right:16px; bottom:16px; width:186px; padding:6px;
  display:flex; flex-direction:column; gap:4px;
  background:var(--a-surface); -webkit-backdrop-filter:none; backdrop-filter:none; }
.appshot .gv-rail{ display:flex; align-items:center; height:34px; border-radius:999px;
  font-size:.8rem; font-weight:500; color:var(--a-ink); white-space:nowrap; }
.appshot .gv-rail .ico{ width:34px; display:grid; place-items:center; flex-shrink:0; font-style:normal; }
.appshot .gv-rail.primary{ background:var(--a-accent); color:#fff; }
.appshot .gv-rail.danger{ color:var(--a-low); }
/* ── call tracking ── call_tracking/client.html:49-81, values verbatim ── */
.appshot .ct-disp{ display:inline-block; padding:.1rem .5rem; border-radius:999px;
  font-size:.74rem; font-weight:600; white-space:nowrap;
  border:1px solid var(--a-border); color:var(--a-text-2); }
.appshot .ct-disp--lead{ border-color:var(--a-good); color:var(--a-good);
  background:color-mix(in srgb,var(--a-good) 10%,transparent); }
.appshot .ct-disp--spam{ border-color:var(--a-low); color:var(--a-low);
  background:color-mix(in srgb,var(--a-low) 10%,transparent); }
.appshot .ct-row2{ display:flex; flex-wrap:wrap; gap:.25rem; margin-top:.3rem; }
.appshot .ct-retained{ display:inline-flex; align-items:center; gap:.3rem;
  padding:.1rem .55rem .1rem .45rem; border-radius:999px; white-space:nowrap;
  font-size:.7rem; font-weight:700; letter-spacing:.02em; color:var(--a-good);
  background:color-mix(in srgb,var(--a-good) 15%,transparent);
  border:1px solid color-mix(in srgb,var(--a-good) 50%,transparent);
  box-shadow:inset 0 1px 0 color-mix(in srgb,#fff 35%,transparent); }
.appshot .ct-quality,.appshot .ct-review{ display:inline-flex; align-items:center; gap:.3rem;
  padding:.1rem .5rem .1rem .4rem; border-radius:999px; white-space:nowrap;
  font-size:.7rem; font-weight:600; border:1px solid var(--a-border);
  color:var(--a-text-2); background:transparent; }
.appshot .ct-quality--good{ color:var(--a-good);
  border-color:color-mix(in srgb,var(--a-good) 45%,transparent);
  background:color-mix(in srgb,var(--a-good) 7%,transparent); }
.appshot .ct-review{ color:var(--a-mid);
  border-color:color-mix(in srgb,var(--a-mid) 55%,transparent);
  background:color-mix(in srgb,var(--a-mid) 12%,transparent); }
.appshot .ct-play{ display:inline-grid; place-items:center; width:22px; height:22px;
  border-radius:50%; background:var(--a-accent-weak); color:var(--a-accent); flex-shrink:0; }
/* ── GBP ── gbp/client.html:5-22 + locations/edit_gbp.html:60-141 ── */
.appshot .gbp-tiles{ display:grid; grid-template-columns:repeat(7,1fr); gap:8px; }
.appshot .gbp-tile{ text-align:left; padding:.7rem .75rem; background:var(--a-surface);
  border:1px solid var(--a-border); border-radius:12px; box-shadow:var(--a-shadow-sm); }
.appshot .gbp-tile__top{ display:flex; align-items:center; justify-content:space-between; margin-bottom:.5rem; }
.appshot .gbp-tile__chip{ display:inline-flex; align-items:center; justify-content:center;
  width:28px; height:28px; border-radius:9px; flex-shrink:0; }
.appshot .gbp-tile__num{ font-size:1.15rem; font-weight:700; line-height:1.05;
  letter-spacing:-.02em; color:var(--a-ink); }
.appshot .gbp-tile__label{ color:var(--a-muted); font-size:.68rem; margin-top:.1rem; }
.appshot .gbp-delta{ display:inline-flex; align-items:center; gap:2px; font-size:.66rem;
  font-weight:600; padding:1px 5px; border-radius:999px; }
.appshot .gbp-delta.up{ color:var(--a-good); background:color-mix(in srgb,var(--a-good) 12%,transparent); }
.appshot .gbp-delta.down{ color:var(--a-low); background:color-mix(in srgb,var(--a-low) 12%,transparent); }
/* the profile editor. Google can suspend a listing over four of these fields, and
   the form says so on each one; that warning is what the screen is known by. */
.appshot .as-fields{ display:grid; grid-template-columns:repeat(12,1fr); gap:9px; }
.appshot .as-fld label{ display:flex; align-items:center; gap:6px; flex-wrap:wrap;
  text-transform:uppercase; font-size:.6rem; letter-spacing:.05em; font-weight:600;
  color:var(--a-muted); margin-bottom:3px; }
.appshot .as-risk{ text-transform:none; letter-spacing:0; font-size:.6rem; font-weight:600;
  color:#B42318; background:rgba(220,38,38,.10); border:1px solid rgba(220,38,38,.28);
  border-radius:5px; padding:0 5px; }
.appshot .as-input{ border:1px solid var(--a-border-2); border-radius:7px;
  padding:5px 9px; font-size:.78rem; background:var(--a-surface); }
.appshot .rv-stars{ color:#F5A524; line-height:1; display:inline-flex; gap:1px; }
.appshot .rv-reply{ background:#F6F8FA; border-left:3px solid var(--a-accent);
  border-radius:0 8px 8px 0; padding:9px 12px; font-size:.79rem; color:var(--a-text-2); line-height:1.5; }
.appshot .as-btn{ display:inline-flex; align-items:center; gap:5px; padding:.3rem .7rem;
  border-radius:7px; font-size:.75rem; font-weight:600; border:1px solid var(--a-accent);
  background:var(--a-accent); color:#fff; white-space:nowrap; }
.appshot .as-btn--ghost{ background:transparent; color:var(--a-text-2); border-color:var(--a-border-2); }
/* ── AI visibility ── llm/client.html:82-92 (surfaces), :143-153, :181-190 ── */
.appshot .as-surfrow{ display:flex; flex-wrap:wrap; align-items:center; gap:6px; margin-bottom:11px; }
.appshot .as-surf{ display:inline-flex; align-items:center; gap:5px; font-size:.72rem;
  font-weight:500; padding:2px 9px 2px 6px; border-radius:999px;
  background:var(--a-accent-weak); border:1px solid rgba(225,29,72,.22); color:var(--a-ink); }
.appshot .as-surf b{ color:var(--a-muted); font-weight:600; }
.appshot .as-surf.off{ background:var(--a-track); border-color:var(--a-border);
  color:var(--a-muted); opacity:.75; }
.appshot .dom-bar{ display:block; height:6px; border-radius:999px; overflow:hidden; margin-top:3px; }
.appshot .dom-bar i{ display:block; height:6px; border-radius:999px; }
.appshot .dom-bar i.own{ background:var(--a-accent); }
.appshot .dom-row{ display:flex; justify-content:space-between; font-size:.74rem; }
/* The stored answer. Full text as the assistant wrote it, with the brand marked
   where it is named; the app never injects markup into an answer it did not write,
   so the highlight is a <mark> over the matched run and nothing else. */
.appshot .as-answer{ margin-top:10px; border:1px solid var(--a-border);
  border-left:3px solid var(--a-info); border-radius:0 10px 10px 0;
  background:#F7F9FC; padding:10px 13px; }
.appshot .as-answer-head{ display:flex; align-items:center; gap:7px; flex-wrap:wrap;
  font-size:.76rem; margin-bottom:6px; }
.appshot .as-answer-head svg{ color:var(--a-info); }
.appshot .as-answer p{ margin:0; font-size:.79rem; line-height:1.6; color:var(--a-text-2); }
.appshot .as-answer mark{ background:rgba(225,29,72,.16); color:var(--a-accent-ink);
  font-weight:600; border-radius:3px; padding:0 2px; }
.appshot .as-sources{ display:flex; flex-wrap:wrap; align-items:center; gap:6px; margin-top:9px; }
.appshot .as-src{ display:inline-flex; align-items:center; gap:4px; font-size:.68rem;
  color:var(--a-text-2); background:var(--a-surface); border:1px solid var(--a-border);
  border-radius:999px; padding:1px 9px; }
.appshot .as-src svg{ opacity:.55; }
/* ── the dashboard spend card ── dashboard/index.html. Shown on its own: no
   sidebar, no greeting, because the breakdown is the point. ── */
.appshot .sp-stat{ display:flex; flex-wrap:wrap; gap:6px 20px; font-size:.8rem;
  color:var(--a-muted); margin-bottom:12px; }
.appshot .sp-stat b{ color:var(--a-ink); font-weight:700; margin-right:5px; }
.appshot .sp-total{ font-size:1.6rem; font-weight:700; letter-spacing:-.02em; }
.appshot .sp-cat{ display:grid; grid-template-columns:1fr 2.4fr auto 44px;
  align-items:center; gap:12px; padding:5px 0; font-size:.79rem; }
.appshot .sp-cat .nm{ display:inline-flex; align-items:center; gap:7px; white-space:nowrap; }
.appshot .sw{ width:9px; height:9px; border-radius:3px; flex-shrink:0; display:inline-block; }
.appshot .sp-bar{ height:7px; border-radius:999px; background:#EEF1F5; overflow:hidden; }
.appshot .sp-bar i{ display:block; height:100%; border-radius:999px; }
.appshot .sp-pct{ text-align:right; color:var(--a-muted); font-variant-numeric:tabular-nums; }
.appshot .sp-amt{ text-align:right; font-weight:600; font-variant-numeric:tabular-nums; }
.appshot .sp-foot{ display:flex; justify-content:space-between; font-size:.76rem;
  color:var(--a-muted); border-top:1px solid var(--a-tray-line); margin-top:9px; padding-top:8px; }
.appshot .est{ font-size:.6rem; font-weight:700; text-transform:uppercase; letter-spacing:.05em;
  background:#EEF1F5; color:#6B7685; border-radius:4px; padding:1px 4px; }
.appshot .sp-sub{ margin-top:12px; background:var(--a-tray); border:1px solid var(--a-tray-line);
  border-radius:10px; padding:10px 12px; }
/* ── report deck ── static/report_template/serp_comparison.html ────────────
   This one FOLLOWS the page. The real report ships a theme toggle and persists
   the same `rt-theme` key the marketing site uses, so a reader on the light site
   opens a light report. Tokens are the report's own (:28-80). ── */
.appshot-deck{
  --d-bg:#0B1120; --d-text:#EDF1F7; --d-text2:#AEB9C9; --d-muted:#78849A;
  --d-border:rgba(255,255,255,.10); --d-glass:rgba(20,28,46,.55);
  --d-glass-raised:rgba(28,38,60,.62); --d-glass-inner:rgba(20,28,46,.40);
  --d-glass-page:rgba(20,28,46,.62); --d-glass-hi:rgba(255,255,255,.22);
  --d-row-hover:rgba(255,255,255,.05);
  --d-em:#10B981; --d-em-deep:#047857; --d-royal:#2563EB; --d-accent:#E11D48;
  --d-yellow:#FACC15; --d-orange:#F97316; --d-crimson:#DC2626; --d-ink-dark:#04121F;
  --d-accent-ink:#FB7185; --d-royal-ink:#3B82F6; --d-em-ink:#10B981;
  --d-aura:.20;
  background:
    radial-gradient(70% 90% at 12% 0%,color-mix(in srgb,var(--d-accent) 34%,transparent) 0%,transparent 60%),
    radial-gradient(60% 80% at 92% 12%,color-mix(in srgb,var(--d-royal) 30%,transparent) 0%,transparent 62%),
    var(--d-bg);
  color:var(--d-text); border-radius:12px; overflow:hidden;
  font-size:14px; line-height:1.45; width:100%; min-width:0;
}
:root[data-theme="light"] .appshot-deck,
.light .appshot-deck{
  --d-bg:#EAEFF6; --d-text:#0F1B2D; --d-text2:#3E4C60; --d-muted:#6C7A90;
  --d-border:rgba(15,27,45,.10); --d-glass:rgba(255,255,255,.62);
  --d-glass-raised:rgba(255,255,255,.74); --d-glass-inner:rgba(255,255,255,.46);
  --d-glass-page:rgba(255,255,255,.58); --d-glass-hi:rgba(255,255,255,.95);
  --d-row-hover:rgba(15,27,45,.04);
  --d-em-deep:#047857; --d-accent-ink:#C50E38; --d-royal-ink:#2563EB; --d-em-ink:#047857;
  --d-aura:.11;
}
.appshot-deck *{ box-sizing:border-box; }
/* per-page hue: THREE, not six (serp_comparison.html:456-458) */
.appshot-deck[data-hue="accent"]{ --pg:var(--d-accent); --pg-ink:var(--d-accent-ink); }
.appshot-deck[data-hue="royal"]{ --pg:var(--d-royal); --pg-ink:var(--d-royal-ink); }
.appshot-deck[data-hue="em"]{ --pg:var(--d-em); --pg-ink:var(--d-em-ink); }
.appshot-deck .dk-sec[data-hue="accent"]{ --sg:var(--d-accent); }
.appshot-deck .dk-sec[data-hue="royal"]{ --sg:var(--d-royal); }
.appshot-deck .dk-sec[data-hue="em"]{ --sg:var(--d-em); }
.appshot-deck .dk-url{ display:flex; align-items:center; gap:9px; padding:8px 13px;
  border-bottom:1px solid var(--d-border); font-size:.72rem; color:var(--d-muted);
  background:color-mix(in srgb,var(--d-bg) 70%,transparent); }
.appshot-deck .dk-url svg{ display:block; flex-shrink:0; }
.appshot-deck .dk-url .pillbox{ flex:1; background:var(--d-glass-inner); border-radius:999px;
  padding:3px 12px; color:var(--d-text2); border:1px solid var(--d-border); }
.appshot-deck .dk-body{ display:grid; grid-template-columns:186px minmax(0,1fr); gap:16px; padding:16px; }
.appshot-deck .dk-rail{ display:flex; flex-direction:column; gap:12px; }
.appshot-deck .dk-brandbar{ display:flex; align-items:center; gap:9px; padding:11px;
  border:1px solid var(--d-border); border-radius:14px; background:var(--d-glass);
  box-shadow:inset 0 1px 0 var(--d-glass-hi); }
.appshot-deck .dk-brandbar .mono{ display:grid; place-items:center; width:26px; height:26px;
  border-radius:8px; background:color-mix(in srgb,var(--d-accent) 24%,transparent);
  color:var(--d-accent-ink); font-size:.64rem; font-weight:700; flex-shrink:0; }
.appshot-deck .dk-brandbar .bn{ font-family:Jost,Inter,sans-serif; font-weight:700; font-size:.88rem; }
.appshot-deck .dk-nav{ display:flex; flex-direction:column; gap:3px; padding:8px;
  border:1px solid var(--d-border); border-radius:14px; background:var(--d-glass);
  box-shadow:inset 0 1px 0 var(--d-glass-hi); }
.appshot-deck .dk-nav-lab{ font-size:.62rem; letter-spacing:.09em; text-transform:uppercase;
  color:var(--d-muted); padding:6px 9px 3px; }
.appshot-deck .dk-sec{ display:flex; align-items:center; gap:9px; padding:7px 9px;
  border-radius:10px; color:var(--d-text2); font-size:.8rem; font-weight:500; }
.appshot-deck .dk-sec .k{ width:21px; height:21px; border-radius:7px; display:grid;
  place-items:center; font-size:.64rem; font-weight:700; flex-shrink:0;
  background:var(--d-glass-raised); border:1px solid var(--d-border); }
.appshot-deck .dk-sec.active{ color:var(--d-text);
  background:color-mix(in srgb,var(--sg) 14%,transparent);
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--sg) 45%,transparent); }
.appshot-deck .dk-sec.active .k{ background:var(--sg); border-color:transparent; color:#fff; }
.appshot-deck .dk-sec[data-hue="em"].active .k{ color:var(--d-ink-dark); }
.appshot-deck .dk-railnote{ font-size:.72rem; color:var(--d-muted); padding:0 6px; line-height:1.45; }
/* the page: 22px radius, glass, a radial wash in the page hue from the top-left */
.appshot-deck .dk-page{ border:1px solid var(--d-border); border-radius:22px;
  padding:20px 22px 22px; min-width:0;
  background:radial-gradient(60% 45% at 0% 0%,color-mix(in srgb,var(--pg) 10%,transparent),transparent 70%),var(--d-glass-page);
  box-shadow:0 12px 32px rgba(0,0,0,.28), inset 0 1px 0 var(--d-glass-hi); }
.appshot-deck .dk-eyebrow{ font-size:.64rem; text-transform:uppercase; letter-spacing:.09em;
  color:var(--pg-ink); font-weight:700; }
.appshot-deck .dk-h{ font-size:1.12rem; font-weight:700; margin:3px 0 4px; letter-spacing:-.015em;
  padding-bottom:9px;
  background:linear-gradient(90deg,var(--pg),color-mix(in srgb,var(--pg) 30%,transparent) 240px,transparent 60%) 0 100%/100% 2px no-repeat; }
.appshot-deck .dk-lede{ margin:10px 0 14px; font-size:.78rem; color:var(--d-muted); line-height:1.5; }
.appshot-deck .dk-stats{ display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-top:14px; }
.appshot-deck .dk-stat .v{ font-size:1.5rem; font-weight:800; letter-spacing:-.02em; line-height:1.05; }
.appshot-deck .dk-stat .l{ font-size:.67rem; color:var(--d-muted); margin-top:1px; }
.appshot-deck .dk-stat .d{ font-size:.7rem; font-weight:700; margin-top:2px; }
.appshot-deck .dk-stat .d.pos{ color:var(--d-em); }
.appshot-deck .dk-stat .d.neg{ color:var(--d-crimson); }
.appshot-deck .dk-note{ margin-top:14px; border-left:2px solid color-mix(in srgb,var(--pg) 80%,transparent);
  padding:2px 0 2px 11px; font-size:.77rem; color:var(--d-text2); line-height:1.55; }
.appshot-deck .dk-lab{ margin-top:14px; font-size:.64rem; text-transform:uppercase;
  letter-spacing:.09em; color:var(--d-muted); font-weight:700; }
.appshot-deck .dk-ai{ display:flex; align-items:center; gap:9px; padding:3px 0; font-size:.75rem; }
.appshot-deck .dk-ai .who{ width:80px; flex-shrink:0; }
.appshot-deck .dk-ai .bar{ flex:1; height:7px; border-radius:999px;
  background:color-mix(in srgb,var(--d-text) 12%,transparent); overflow:hidden; }
.appshot-deck .dk-ai .bar i{ display:block; height:7px; border-radius:999px; background:#2DD4BF; }
.appshot-deck .dk-ai .n{ width:32px; text-align:right; color:var(--d-muted); font-variant-numeric:tabular-nums; }
.appshot-deck .dk-srcs{ display:flex; flex-wrap:wrap; gap:6px; margin-top:10px; }
/* ── Overview page ── report_overview.html + serp_comparison.html:154-159,
   :416-435, :486-496. The platform marks are drawn rather than the report's own
   base64 PNGs: a marketing page should not carry six embedded logo bitmaps. */
.appshot-deck .ov-head{ display:flex; flex-wrap:wrap; align-items:flex-end;
  justify-content:space-between; gap:12px 24px; padding-bottom:16px;
  border-bottom:1px solid var(--d-border); margin-bottom:18px; }
.appshot-deck .ov-name{ display:flex; align-items:center; gap:11px; margin:3px 0 0;
  font-size:1.55rem; font-weight:800; line-height:1.1; letter-spacing:-.02em; }
.appshot-deck .ov-mark{ display:grid; place-items:center; width:32px; height:32px;
  border-radius:8px; flex:none; font-size:.68rem; font-weight:700;
  background:color-mix(in srgb,var(--d-accent) 26%,transparent); color:var(--d-accent-ink); }
.appshot-deck .ov-window{ font-size:.74rem; color:var(--d-text2); text-align:right; line-height:1.5; }
.appshot-deck .ov-window b{ color:var(--d-text); font-weight:600; }
.appshot-deck .ov-tiles{ display:grid; grid-template-columns:repeat(6,1fr); gap:11px; }
.appshot-deck .ov-card{ border:1px solid var(--d-border); border-radius:14px; padding:11px 13px;
  background:var(--d-glass-inner); box-shadow:inset 0 1px 0 var(--d-glass-hi); }
.appshot-deck .ov-label{ color:var(--d-muted); font-size:.66rem; margin-bottom:5px;
  line-height:1.3; min-height:2.4em; }
.appshot-deck .ov-value{ font-size:1.5rem; font-weight:800; line-height:1.05;
  letter-spacing:-.02em; font-variant-numeric:tabular-nums; }
.appshot-deck .ov-sub{ font-size:.68rem; font-weight:700; margin-top:3px; }
.appshot-deck .ov-sub.pos{ color:var(--d-em); }
.appshot-deck .ov-sub.neg{ color:var(--d-crimson); }
/* The summary is the one paragraph a client actually reads, so it is centred and
   its measure is held: centred text set to the full width of the page is harder
   to read than left-aligned text, not easier. */
.appshot-deck .ov-exec{ margin-top:16px; text-align:center; }
.appshot-deck .ov-exec h3{ margin:0 0 5px; font-size:.78rem; font-weight:700; }
.appshot-deck .ov-exec p{ margin:0 auto; max-width:74ch; font-size:.79rem;
  color:var(--d-text2); line-height:1.6; }
.appshot-deck .ov-srcs{ display:flex; flex-wrap:wrap; gap:7px; margin-top:16px; align-items:center; }
.appshot-deck .ov-srcs__lab{ font-size:.62rem; letter-spacing:.09em; text-transform:uppercase;
  color:var(--d-muted); margin-right:3px; }
.appshot-deck .ov-src{ display:inline-flex; align-items:center; gap:6px;
  padding:3px 10px 3px 5px; border-radius:999px; border:1px solid var(--d-border);
  background:var(--d-glass-inner); font-size:.7rem; color:var(--d-text2); white-space:nowrap; }
/* The platform logos, lifted verbatim out of the report template
   (serp_comparison.html:487-497) - these are the real inlined assets a client
   sees, not lookalikes. Regenerate with scratchpad/real_source_marks.py rather
   than editing by hand.

   The base rule is the report's too, with ONE deviation: 15px rather than 18px,
   because the replica is drawn smaller than the document it copies. font-size:0
   is in it because the report's markup puts the label text INSIDE the span; the
   replica uses an empty <i>, but carrying the rule keeps the two from diverging. */
.appshot-deck .mk{width:15px;height:15px;flex:none;display:inline-block;background-repeat:no-repeat; background-position:center;background-size:contain;font-size:0;line-height:0;color:transparent;overflow:hidden}
.appshot-deck .mk--serp{background-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij48cGF0aCBmaWxsPSIjNDI4NUY0IiBkPSJNMjIuNTYgMTIuMjVjMC0uNzgtLjA3LTEuNTMtLjItMi4yNUgxMnY0LjI2aDUuOTJjLS4yNiAxLjM3LTEuMDQgMi41My0yLjIxIDMuMzF2Mi43N2gzLjU3YzIuMDgtMS45MiAzLjI4LTQuNzQgMy4yOC04LjA5eiIvPjxwYXRoIGZpbGw9IiMzNEE4NTMiIGQ9Ik0xMiAyM2MyLjk3IDAgNS40Ni0uOTggNy4yOC0yLjY2bC0zLjU3LTIuNzdjLS45OC42Ni0yLjIzIDEuMDYtMy43MSAxLjA2LTIuODYgMC01LjI5LTEuOTMtNi4xNi00LjUzSDIuMTh2Mi44NEMzLjk5IDIwLjUzIDcuNyAyMyAxMiAyM3oiLz48cGF0aCBmaWxsPSIjRkJCQzA1IiBkPSJNNS44NCAxNC4wOWMtLjIyLS42Ni0uMzUtMS4zNi0uMzUtMi4wOXMuMTMtMS40My4zNS0yLjA5VjcuMDdIMi4xOEMxLjQzIDguNTUgMSAxMC4yMiAxIDEycy40MyAzLjQ1IDEuMTggNC45M2wyLjg1LTIuMjIuODEtLjYyeiIvPjxwYXRoIGZpbGw9IiNFQTQzMzUiIGQ9Ik0xMiA1LjM4YzEuNjIgMCAzLjA2LjU2IDQuMjEgMS42NGwzLjE1LTMuMTVDMTcuNDUgMi4wOSAxNC45NyAxIDEyIDEgNy43IDEgMy45OSAzLjQ3IDIuMTggNy4wN2wzLjY2IDIuODRjLjg3LTIuNiAzLjMtNC41MyA2LjE2LTQuNTN6Ii8+PHBhdGggZmlsbD0ibm9uZSIgZD0iTTEgMWgyMnYyMkgxeiIvPjwvc3ZnPg==")}
.appshot-deck .mk--gbp{background-image:url("data:image/png;base64,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")}
.appshot-deck .mk--maps{background-image:url("data:image/png;base64,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")}
.appshot-deck .mk--ga{background-image:url("data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IiB3aWR0aD0iMTkycHgiIGhlaWdodD0iMTkycHgiIHZpZXdCb3g9IjAgMCAxOTIgMTkyIiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCAxOTIgMTkyIiB4bWw6c3BhY2U9InByZXNlcnZlIj4gPGc+IDxnPiA8cGF0aCBmaWxsPSIjRjlBQjAwIiBkPSJNMTMwLDI5djEzMmMwLDE0Ljc3LDEwLjE5LDIzLDIxLDIzYzEwLDAsMjEtNywyMS0yM1YzMGMwLTEzLjU0LTEwLTIyLTIxLTIyUzEzMCwxNy4zMywxMzAsMjl6Ii8+IDwvZz4gPGc+IDxwYXRoIGZpbGw9IiNFMzc0MDAiIGQ9Ik03NSw5NnY2NWMwLDE0Ljc3LDEwLjE5LDIzLDIxLDIzYzEwLDAsMjEtNywyMS0yM1Y5N2MwLTEzLjU0LTEwLTIyLTIxLTIyUzc1LDg0LjMzLDc1LDk2eiIvPiA8L2c+IDxnPiA8Y2lyY2xlIGZpbGw9IiNFMzc0MDAiIGN4PSI0MSIgY3k9IjE2MyIgcj0iMjEiLz4gPC9nPiA8L2c+IDwvc3ZnPg==")}
.appshot-deck .mk--gsc{background-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0MCA0MCI+PHBhdGggZD0iTTExLjA4MSAzMC41MjdsLTQuNzIgNC43MjFhLjkzMy45MzMgMCAwIDEtMS4zMTcgMGwtLjI5Mi0uMjkyYS45MzMuOTMzIDAgMCAxIDAtMS4zMTZsNC43Mi00LjcyMWEuOTMzLjkzMyAwIDAgMSAxLjMxOCAwbC4yOTEuMjkxYS45My45MyAwIDAgMSAwIDEuMzE3eiIgZmlsbD0iI0ZCQkMwNCIvPjxwYXRoIGQ9Ik0yMy43NSAzMi41aDYuMDQyYTYuMDQgNi4wNCAwIDAgMCA2LjA0MS02LjA0MnYtMTYuMjVhNi4wNCA2LjA0IDAgMCAwLTYuMDQxLTYuMDQxIDYuMDQgNi4wNCAwIDAgMC02LjA0MiA2LjA0MVYzMi41eiIgZmlsbD0iIzQyODVGNCIvPjxwYXRoIGQ9Ik0xMy43NSAzMi41YTYuMDQgNi4wNCAwIDAgMCA2LjA0Mi02LjA0MiA2LjA0IDYuMDQgMCAwIDAtNi4wNDItNi4wNDEgNi4wNCA2LjA0IDAgMCAwLTYuMDQyIDYuMDQxQTYuMDQgNi4wNCAwIDAgMCAxMy43NSAzMi41eiIgZmlsbD0iI0ZCQkMwNCIvPjxwYXRoIGQ9Ik0yNy45NyAzMi41aC01Ljg4N2E2LjA0IDYuMDQgMCAwIDEtNi4wNDEtNi4wNDJ2LTcuOTE2YTYuMDQgNi4wNCAwIDAgMSA2LjA0MS02LjA0MiA2LjA0IDYuMDQgMCAwIDEgNi4wNDIgNi4wNDJ2MTMuODA0YS4xNTQuMTU0IDAgMCAxLS4xNTQuMTU0eiIgZmlsbD0iIzM0QTg1MyIvPjxwYXRoIGQ9Ik0yOC4xMjUgMzIuMzQ2VjE4LjU0MmE2LjA0MiA2LjA0MiAwIDAgMC00LjM3NS01LjgwN1YzMi41aDQuMjJhLjE1NC4xNTQgMCAwIDAgLjE1NS0uMTU0eiIgZmlsbD0iIzE5NjdEMiIvPjxwYXRoIGQ9Ik0xOS43OTIgMjYuNTc1YTYuMDQgNi4wNCAwIDAgMC0zLjc1LTUuNTl2NS41OWMwIDEuNzIuNzIgMy4yNzMgMS44NzUgNC4zNzNhNi4wMjQgNi4wMjQgMCAwIDAgMS44NzUtNC4zNzN6IiBmaWxsPSIjRUE0MzM1Ii8+PC9zdmc+")}
.appshot-deck .mk--cr{background-image:url("data:image/png;base64,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")}
.appshot-deck .ov-index{ display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-top:18px; }
.appshot-deck .ov-idx{ display:flex; flex-direction:column; gap:5px; padding:12px 14px;
  border-radius:14px; border:1px solid var(--d-border); box-shadow:inset 0 1px 0 var(--d-glass-hi);
  background:var(--d-glass-inner); }
.appshot-deck .ov-idx__k{ font-size:.61rem; letter-spacing:.09em; text-transform:uppercase; color:var(--d-muted); }
.appshot-deck .ov-idx__h{ font-size:.86rem; font-weight:700; color:var(--d-text); line-height:1.35; }
.appshot-deck .ov-idx__s{ font-size:.71rem; color:var(--d-text2); }
@media (max-width:900px){
.appshot-deck .ov-tiles{ grid-template-columns:repeat(3,1fr); }
.appshot-deck .ov-index{ grid-template-columns:repeat(2,1fr); }
.appshot-deck .ov-window{ text-align:left; }
}
.appshot-deck .dk-2up{ display:grid; grid-template-columns:1.35fr 1fr; gap:20px; margin-top:14px; }
.appshot-deck .dk-sub{ font-size:.68rem; color:var(--d-muted); margin:1px 0 8px; }
.appshot-deck .dk-key{ display:flex; flex-wrap:wrap; gap:5px 12px; margin-top:7px; font-size:.67rem; color:var(--d-text2); }
.appshot-deck .dk-key span{ display:inline-flex; align-items:center; gap:5px; }
.appshot-deck .dk-key i{ width:9px; height:9px; border-radius:3px; flex-shrink:0; }
@media (max-width:720px){
.appshot-deck .dk-2up{ grid-template-columns:1fr; gap:14px; }
}
.appshot-deck .dk-srcs span{ font-size:.67rem; color:var(--d-muted); border:1px solid var(--d-border);
  border-radius:999px; padding:1px 9px; }
.appshot-deck .dk-theme{ display:inline-flex; color:var(--d-muted); }
/* the grid that gained ground: numbered circles in a CSS grid, the report's own
   stripped-down drawing, not the map pins (serp_comparison.html:528-551) */
.appshot-deck .geo-hl{ border:1px solid var(--d-border); border-radius:16px; overflow:hidden;
  background:var(--d-glass-inner); box-shadow:0 12px 32px rgba(0,0,0,.22), inset 0 1px 0 var(--d-glass-hi); }
.appshot-deck .geo-hl__top{ display:grid; grid-template-columns:1fr 1fr; }
.appshot-deck .geo-hl__side{ padding:12px 14px; }
.appshot-deck .geo-hl__side+.geo-hl__side{ border-left:1px solid var(--d-border); }
.appshot-deck .geo-hl__lab{ display:flex; justify-content:space-between; gap:8px;
  font-size:.6rem; letter-spacing:.08em; text-transform:uppercase; color:var(--d-muted); margin-bottom:8px; }
.appshot-deck .gg{ display:grid; gap:5px; aspect-ratio:1; max-width:186px; margin:0 auto; }
.appshot-deck .gg span{ display:grid; place-items:center; border-radius:50%; aspect-ratio:1;
  color:#fff; font-size:.62rem; font-weight:700; font-variant-numeric:tabular-nums; }
.appshot-deck .gg .r1{ background:var(--d-em-deep); }
.appshot-deck .gg .r2{ background:var(--d-em); }
.appshot-deck .gg .r3{ background:var(--d-yellow); color:var(--d-ink-dark); }
.appshot-deck .gg .r4{ background:var(--d-orange); }
.appshot-deck .gg .r5{ background:var(--d-crimson); }
.appshot-deck .gg .r6{ background:color-mix(in srgb,var(--d-crimson) 55%,#000); font-size:.54rem; }
.appshot-deck .geo-hl__stats{ display:grid; grid-template-columns:repeat(3,1fr); border-top:1px solid var(--d-border); }
.appshot-deck .geo-hl__stat{ padding:9px 12px; text-align:center; }
.appshot-deck .geo-hl__stat+.geo-hl__stat{ border-left:1px solid var(--d-border); }
.appshot-deck .geo-hl__stat .l{ font-size:.6rem; letter-spacing:.08em; text-transform:uppercase; color:var(--d-muted); }
.appshot-deck .geo-hl__stat .v{ font-weight:800; font-size:.95rem; font-variant-numeric:tabular-nums; white-space:nowrap; }
.appshot-deck .geo-hl__stat .v small{ font-weight:500; color:var(--d-muted); font-size:.76em; }
.appshot-deck .geo-hl__stat .pos{ color:var(--d-em); }
.appshot-deck .geo-hl__kw{ padding:9px 14px; border-top:1px solid var(--d-border);
  font-style:italic; color:var(--d-text); font-size:.82rem; }
.appshot-deck .geo-hl__loc{ font-style:normal; color:var(--d-muted); }
@media (max-width:720px){
.appshot-deck .dk-body{ grid-template-columns:1fr; gap:11px; padding:12px; }
.appshot-deck .dk-nav{ flex-direction:row; flex-wrap:wrap; }
.appshot-deck .dk-nav-lab{ display:none; }
.appshot-deck .dk-railnote{ display:none; }
.appshot-deck .dk-stats{ grid-template-columns:repeat(2,1fr); }
.appshot-deck .geo-hl__top{ grid-template-columns:1fr; }
.appshot-deck .geo-hl__side+.geo-hl__side{ border-left:0; border-top:1px solid var(--d-border); }
}
/* ── The replicas follow the page theme ───────────────────────────────────────
   The app is not a light-only product: aero-app.css:48-60 carries a full dark
   token set and the sidebar has a theme toggle. Every screenshot of the running
   app is dark, so a light replica on the dark marketing site was showing a
   screen nobody actually looks at. These are the app's own dark tokens, plus
   five of its hardcoded surfaces expressed as tokens so they can flip too. ── */
.light .appshot,
:root[data-theme="light"] .appshot{
  --a-chip-bg:#FBE7EC; --a-track:#EEF1F5; --a-quote:#F6F8FA; --a-answer:#F7F9FC;
  --a-grid:rgba(15,27,45,.07); --a-axis:#8A94A3; --a-chev:#98A2B3;
  --a-glass:rgba(255,255,255,.55); --a-glass-hi:rgba(255,255,255,.95);
}
.appshot{
  --a-bg:#070B14; --a-bg-2:#0B1120;
  --a-ink:#EDF1F7; --a-text-2:#AEB9C9; --a-muted:#78849A;
  --a-border:rgba(255,255,255,.10); --a-border-2:rgba(255,255,255,.17);
  --a-surface:#111A2B;
  --a-accent:#E11D48; --a-accent-ink:#FB7185; --a-accent-weak:rgba(244,63,94,.14);
  --a-good:#16A34A; --a-mid:#B45309; --a-low:#DC2626; --a-info:#2563EB;
  --a-shadow-sm:0 1px 2px rgba(0,0,0,.4);
  --a-shadow:0 1px 2px rgba(0,0,0,.4), 0 18px 40px -14px rgba(0,0,0,.5);
  --a-tray:rgba(255,255,255,.035); --a-tray-line:rgba(255,255,255,.06);
  --a-chip-bg:rgba(244,63,94,.16); --a-track:rgba(255,255,255,.08);
  --a-quote:rgba(255,255,255,.05); --a-answer:rgba(255,255,255,.04);
  --a-grid:rgba(255,255,255,.07); --a-axis:#78849A; --a-chev:#5B6980;
  --a-glass:rgba(20,28,46,.48); --a-glass-hi:rgba(255,255,255,.10);
  /* the app's ground is an aurora over the base, not a flat fill */
  background:
    radial-gradient(60% 50% at 8% 0%,rgba(225,29,72,.10) 0%,transparent 62%),
    radial-gradient(50% 45% at 95% 8%,rgba(37,99,235,.09) 0%,transparent 64%),
    var(--a-bg-2);
}
.light .appshot,
:root[data-theme="light"] .appshot{
  --a-bg:#EAEFF6; --a-bg-2:#F3F6FB;
  --a-ink:#0F1B2D; --a-text-2:#3E4C60; --a-muted:#6C7A90;
  --a-border:rgba(15,27,45,.10); --a-border-2:rgba(15,27,45,.16);
  --a-surface:#FFFFFF;
  --a-accent-ink:#C50E38; --a-accent-weak:rgba(225,29,72,.10);
  --a-shadow-sm:0 1px 2px rgba(27,40,56,.06);
  --a-shadow:0 1px 2px rgba(27,40,56,.06), 0 14px 34px -14px rgba(27,40,56,.18);
  --a-tray:rgba(15,27,45,.035); --a-tray-line:rgba(15,27,45,.07);
  background:
    radial-gradient(60% 50% at 8% 0%,rgba(225,29,72,.06) 0%,transparent 62%),
    radial-gradient(50% 45% at 95% 8%,rgba(37,99,235,.05) 0%,transparent 64%),
    var(--a-bg);
}
/* Surfaces that were hardcoded light, now on the tokens above. */
.appshot .as-tile__chip{ background:var(--a-chip-bg); color:var(--a-accent-ink); }
.appshot .as-tile__chev{ color:var(--a-chev); }
.appshot .as-tile__label,.appshot .as-tile--info .as-tile__chip{ color:var(--a-muted); }
.appshot .as-tile--info .as-tile__chip{ background:var(--a-track); }
.appshot .as-tile{ background:var(--a-surface); border-color:var(--a-border); box-shadow:var(--a-shadow-sm); }
.appshot .bs-muted{ background:var(--a-track); color:var(--a-muted); }
.appshot .dom-bar{ background:var(--a-track); }
.appshot .dom-bar i{ background:color-mix(in srgb,var(--a-ink) 22%,transparent); }
.appshot .sp-bar{ background:var(--a-track); }
.appshot .est{ background:var(--a-track); color:var(--a-muted); }
.appshot .rv-reply{ background:var(--a-quote); }
.appshot .as-answer{ background:var(--a-answer); }
.appshot .as-src{ background:var(--a-surface); }
.appshot .as-input{ background:var(--a-surface); color:var(--a-ink); }
.appshot .gv{ background:var(--a-bg-2); }
/* Panel glass: view.html:34 gives the dark viewer its own alphas. */
.appshot .gv-panel-g{ background:var(--a-glass); box-shadow:var(--a-shadow), inset 0 1px 0 var(--a-glass-hi); }
.appshot .gv-card{ background:radial-gradient(120% 90% at 0% 0%,var(--gv-wash) 0%,transparent 55%),var(--a-surface); }
.appshot .gv-cool{ background:var(--a-track); }
.appshot .gv-hot{ color:var(--a-accent-ink); }
/* ── page chrome the real screens carry above the content ── */
.appshot .as-crumb{ font-size:.74rem; color:var(--a-muted); margin-bottom:5px; }
.appshot .as-pagehead{ display:flex; align-items:flex-start; justify-content:space-between;
  gap:14px; flex-wrap:wrap; margin-bottom:10px; }
.appshot .as-pagehead h3{ margin:0; font-size:1.3rem; font-weight:700; letter-spacing:-.02em; }
.appshot .as-pagehead h3 span{ font-weight:400; color:var(--a-muted); font-size:.95rem; }
.appshot .as-pagebtns{ display:flex; flex-wrap:wrap; gap:6px; }
.appshot .as-btn--out{ background:transparent; color:var(--a-accent); border-color:var(--a-accent); }
.appshot .as-seg--lg i{ font-size:.75rem; padding:4px 11px; }
.appshot .as-link{ display:inline-block; margin-top:8px; font-size:.76rem; color:var(--a-accent); }
/* the switch beside the range buttons (gbp/client.html:60-64), shown off */
.appshot .as-toggle{ display:inline-flex; align-items:center; gap:7px;
  font-size:.74rem; color:var(--a-muted); white-space:nowrap; }
.appshot .as-toggle i{ width:28px; height:16px; border-radius:999px; flex-shrink:0;
  background:var(--a-track); border:1px solid var(--a-border); position:relative; }
.appshot .as-toggle i::after{ content:""; position:absolute; left:2px; top:1px;
  width:12px; height:12px; border-radius:50%; background:var(--a-muted); }
/* ── client hub nav tiles ── clients/view.html:43-90. All seven in the brand red,
   each one a door into a different part of what is tracked for that client. ── */
.appshot .cl-nav{ display:grid; grid-template-columns:repeat(7,1fr); gap:9px; }
.appshot .cl-tile{ padding:.7rem .8rem .75rem; border-radius:14px;
  background:var(--a-surface); border:1px solid var(--a-border); box-shadow:var(--a-shadow-sm); }
.appshot .cl-tile.on{ border-color:var(--a-accent); box-shadow:inset 0 0 0 1px var(--a-accent); }
.appshot .cl-tile__top{ display:flex; align-items:center; justify-content:space-between; margin-bottom:.6rem; }
.appshot .cl-chip{ display:inline-flex; align-items:center; justify-content:center;
  width:32px; height:32px; border-radius:10px; background:var(--a-chip-bg); color:var(--a-accent-ink); flex-shrink:0; }
.appshot .cl-arrow{ display:inline-flex; align-items:center; justify-content:center;
  width:22px; height:22px; border-radius:50%; border:1px solid var(--a-border); color:var(--a-chev); }
.appshot .cl-label{ text-transform:uppercase; font-size:.6rem; letter-spacing:.05em;
  font-weight:600; color:var(--a-muted); }
.appshot .cl-count{ font-size:1.25rem; font-weight:700; letter-spacing:-.02em; line-height:1.1; }
.appshot .cl-desc{ font-size:.63rem; color:var(--a-muted); margin-top:.15rem; line-height:1.3; }
/* GBP tiles: four then three, and the one being charted is outlined */
.appshot .gbp-tiles{ grid-template-columns:repeat(4,1fr); }
.appshot .gbp-tile.on{ border-color:var(--a-accent); box-shadow:inset 0 0 0 1px var(--a-accent); }
.appshot .gbp-tile{ background:var(--a-surface); border-color:var(--a-border); }
/* ── call tracking ── client.html:18-37. No icon chip on these tiles: label,
   value, then the move and a note under it. ── */
.appshot .ct-tiles{ display:grid; grid-template-columns:repeat(6,1fr); gap:.6rem; margin-bottom:12px; }
.appshot .ct-tile{ padding:.7rem .85rem; border-radius:12px;
  border:1px solid var(--a-border); background:var(--a-surface); }
.appshot .ct-tile.on{ border-color:var(--a-accent); background:var(--a-accent-weak); }
.appshot .ct-tile__label{ color:var(--a-muted); font-size:.64rem; font-weight:600;
  text-transform:uppercase; letter-spacing:.04em; }
.appshot .ct-tile__val{ font-size:1.45rem; font-weight:700; line-height:1.2;
  letter-spacing:-.02em; margin-top:.1rem; }
.appshot .ct-tile__foot{ font-size:.68rem; color:var(--a-muted); margin-top:.15rem;
  display:flex; align-items:center; gap:.3rem; flex-wrap:wrap; }
.appshot .ct-d{ font-weight:700; border-radius:5px; padding:0 4px; }
.appshot .ct-d.up{ color:var(--a-good); background:color-mix(in srgb,var(--a-good) 14%,transparent); }
.appshot .ct-d.down{ color:var(--a-low); background:color-mix(in srgb,var(--a-low) 14%,transparent); }
.appshot .ct-aggrid{ display:grid; grid-template-columns:1.5fr 1fr; gap:12px; align-items:start; }
.appshot .as-key--top{ justify-content:center; margin:0 0 4px; }
.appshot .ct-srctable td,.appshot .ct-srctable th{ padding:5px 6px; font-size:.72rem; }
.appshot .ct-srctable td:first-child{ white-space:nowrap; max-width:130px; overflow:hidden; text-overflow:ellipsis; }
.appshot .ct-srctable .dom-bar{ margin-top:0; }
.appshot .an-delta{ font-weight:600; border-radius:5px; padding:0 4px; font-size:.68rem; }
.appshot .an-delta.up{ color:var(--a-good); background:color-mix(in srgb,var(--a-good) 14%,transparent); }
.appshot .an-delta.down{ color:var(--a-low); background:color-mix(in srgb,var(--a-low) 14%,transparent); }
.appshot .an-delta.flat{ color:var(--a-muted); background:var(--a-track); }
.appshot .ct-name{ font-weight:600; font-size:.78rem; }
.appshot .ct-rep{ font-size:.6rem; font-weight:600; border-radius:5px; padding:0 5px;
  background:var(--a-track); color:var(--a-muted); }
.appshot .ct-rep.first{ background:color-mix(in srgb,var(--a-good) 16%,transparent); color:var(--a-good); }
.appshot .ct-ans{ display:inline-flex; align-items:center; gap:4px; font-size:.74rem; color:var(--a-good); }
.appshot .as-filters{ display:flex; flex-wrap:wrap; align-items:center; gap:7px; margin-top:12px; }
.appshot .as-drop{ display:inline-flex; align-items:center; gap:6px; font-size:.74rem;
  border:1px solid var(--a-border-2); border-radius:7px; padding:3px 10px; color:var(--a-text-2); }
.appshot .as-drop i{ font-style:normal; opacity:.6; }
@media (max-width:900px){
.appshot .cl-nav{ grid-template-columns:repeat(4,1fr); }
.appshot .ct-tiles{ grid-template-columns:repeat(3,1fr); }
.appshot .ct-aggrid{ grid-template-columns:1fr; }
}
/* inline Bootstrap Icons sit on the text baseline wherever they appear */
.appshot .as-tile__chip svg,.appshot .gbp-tile__chip svg,
.appshot .ct-play svg{ display:block; }
.appshot .ct-retained svg,.appshot .ct-quality svg,
.appshot .ct-review svg,.appshot .rv-stars svg{ display:inline-block; vertical-align:-1px; }
.appshot .rv-stars{ line-height:1; display:inline-flex; gap:1px; }
.appshot-deck .dk-url svg{ display:block; }