/*
 * Clear Cut Digital client portal: the one stylesheet for every page (the CSP allows no inline styles).
 * The brand's own colours, flat: white and soft gray with its blue by day, its navy by night, following the
 * device's light or dark setting. The dashboard opens with a summary band (the business, whether the site is up,
 * this month's numbers as big flat tiles) and keeps the detail in cards below it.
 * The font and pattern file names below are swapped for their hashed asset paths when the portal starts (src/portal/assets.ts).
 */

@font-face { font-family: "Poppins"; font-style: normal; font-weight: 700; font-display: swap; src: url("/assets/fonts/poppins-v24-latin-700-9338e65fc077.woff2") format("woff2"); }
@font-face { font-family: "Lato"; font-style: normal; font-weight: 400; font-display: swap; src: url("/assets/fonts/lato-v25-latin-regular-918b7dc3e2e2.woff2") format("woff2"); }
@font-face { font-family: "Lato"; font-style: normal; font-weight: 700; font-display: swap; src: url("/assets/fonts/lato-v25-latin-700-c447dd7677b4.woff2") format("woff2"); }

/* Light: clearcutdigital.com's light palette (its page gray, ink and text), with the button blue. */
:root {
  color-scheme: light;
  --bg: #f2f4f7;
  --pane: #ffffff;
  --band: #ffffff;
  --surface: #ffffff;
  --surface-2: #f3f6f9;
  --field: #ffffff;
  --line: #e1e7ee;
  --line-2: #b7c4d1;
  --heading: #07121a;
  --text: #34465a;
  --muted: #5a6b7d;
  --subtle: #6b7b8c;
  --accent: #0a72bd;
  --accent-hover: #085f9f;
  --on-accent: #ffffff;
  --link: #0b62a4;
  --tint: #e9f3fb;
  --tint-2: #d9eaf8;
  --lead: #0a72bd;
  --quiet: #ffffff;
  --quiet-hover: #f3f6f9;
  --ring: rgba(10, 114, 189, 0.26);
  --ok: #17784a;
  --ok-soft: #e4f4ea;
  --warn: #8a5300;
  --warn-soft: #fcf0d9;
  --bad: #b3261e;
  --bad-soft: #fcecea;
  --card: 0 0 0 1px rgba(7, 18, 26, 0.06), 0 1px 2px rgba(7, 18, 26, 0.04), 0 12px 28px -18px rgba(7, 18, 26, 0.22);
  --raised: 0 0 0 1px rgba(7, 18, 26, 0.06), 0 2px 4px rgba(7, 18, 26, 0.04), 0 24px 48px -24px rgba(7, 18, 26, 0.28);
  --showcase: #e7eef6;
  --hexagons: 0.38;
  --font-head: Poppins, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-body: Lato, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  --wrap: 1160px;
}

/* Dark: the website's navy, with its light blue for links, bars and the main button. */
@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --bg: #07121a;
    --pane: #07121a;
    --band: #0e1d2c;
    --surface: #0e1d2c;
    --surface-2: #142639;
    --field: #0a1723;
    --line: #1d3145;
    --line-2: #3a556f;
    --heading: #ffffff;
    --text: #c9d8e6;
    --muted: #9fb3c6;
    --subtle: #8396aa;
    --accent: #62c2ff;
    --accent-hover: #8ed3ff;
    --on-accent: #07121a;
    --link: #62c2ff;
    --tint: #142a40;
    --tint-2: #1b3651;
    --lead: #0a72bd;
    --quiet: #1a3148;
    --quiet-hover: #223d59;
    --ring: rgba(98, 194, 255, 0.36);
    --ok: #62d49c;
    --ok-soft: rgba(98, 212, 156, 0.14);
    --warn: #f0c36a;
    --warn-soft: rgba(240, 195, 106, 0.14);
    --bad: #ff9d94;
    --bad-soft: rgba(255, 125, 115, 0.14);
    --card: 0 0 0 1px rgba(98, 194, 255, 0.13);
    --raised: 0 0 0 1px rgba(98, 194, 255, 0.16), 0 24px 48px -20px rgba(0, 0, 0, 0.6);
    --showcase: #0e1d2c;
    --hexagons: 0.2;
  }
}

/* Base */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; background: var(--bg); }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 400 16px/1.6 var(--font-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
h1, h2, h3 { margin: 0; color: var(--heading); font-family: var(--font-head); font-weight: 700; letter-spacing: -0.02em; }
p { margin: 0; }
a { color: var(--link); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { text-decoration-thickness: 2px; }
strong { color: var(--heading); font-weight: 700; }
img, svg { display: block; }
::selection { background: var(--ring); }
:focus-visible { outline: 2px solid var(--link); outline-offset: 3px; border-radius: 4px; }
.visually { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: -9999px; z-index: 10; }
.skip:focus { left: 16px; top: 12px; padding: 8px 14px; border-radius: 8px; background: var(--surface); color: var(--heading); box-shadow: var(--raised); }

/* The logo: dark lettering on light, light lettering on dark (the <picture> picks). */
.logo { display: inline-flex; border-radius: 6px; }
.logo img { width: auto; height: 36px; }

/* Buttons: the main one in the brand's blue, the others solid too, so each reads as a button on any background. */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  padding: 0 22px;
  border: 1px solid transparent;
  border-radius: 12px;
  font: 700 16px/1.2 var(--font-body);
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease, transform 0.05s ease;
}
.btn:hover { text-decoration: none; }
.btn:active { transform: translateY(1px); }
.btn svg { flex: none; transition: transform 0.15s ease; }
.btn:hover .go { transform: translateX(3px); }
.btn-primary { background: var(--accent); color: var(--on-accent); }
.btn-primary:hover { background: var(--accent-hover); }
.btn-quiet { background: var(--quiet); color: var(--heading); border-color: var(--line-2); }
.btn-quiet:hover { background: var(--quiet-hover); border-color: var(--subtle); }
.btn-block { width: 100%; }
.btn-block + .btn-block { margin-top: 10px; }

/* Form fields */
.field { margin: 0 0 16px; }
.field label { display: block; margin: 0 0 8px; color: var(--heading); font-size: 15px; font-weight: 700; }
.input {
  display: block;
  width: 100%;
  min-height: 50px;
  padding: 11px 14px;
  border: 1px solid var(--line-2);
  border-radius: 12px;
  background: var(--field);
  color: var(--heading);
  font: 400 16px/1.4 var(--font-body);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.input::placeholder { color: var(--subtle); opacity: 1; }
.input:hover { border-color: var(--subtle); }
.input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 4px var(--ring); }
.input.code {
  min-height: 64px;
  padding-left: calc(14px + 0.32em);
  font: 700 28px/1 var(--font-mono);
  letter-spacing: 0.32em;
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.input.code::placeholder { font: 400 16px/1 var(--font-body); letter-spacing: 0; }
textarea.input { resize: vertical; }

/* Messages above a form: red for a problem, green for "done". */
.notice {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 0 0 20px;
  padding: 13px 16px;
  border-radius: 12px;
  background: var(--bad-soft);
  color: var(--bad);
  font-size: 15px;
  line-height: 1.5;
}
.notice.ok { background: var(--ok-soft); color: var(--ok); }
.notice svg { flex: none; margin-top: 2px; }

/* Sign-in: the form on the left; on wide screens a look at the dashboard on the right, drawn flat in a browser window. */
.signin { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr); min-height: 100vh; min-height: 100dvh; background: var(--pane); }
.signin-pane { display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh; padding: 28px clamp(24px, 5vw, 64px) 24px; }
.signin-main { flex: 1; display: flex; align-items: center; justify-content: center; padding: 48px 0; }
.signin-form { width: 100%; max-width: 400px; }
.signin h1 { font-size: 34px; line-height: 1.15; letter-spacing: -0.03em; }
.lede { margin: 14px 0 30px; color: var(--text); font-size: 17px; line-height: 1.6; }
.lede strong { overflow-wrap: anywhere; }
.signin .btn-block { min-height: 52px; }
.fine { display: flex; align-items: flex-start; gap: 8px; margin: 22px 0 0; color: var(--muted); font-size: 14.5px; line-height: 1.5; }
.fine svg { flex: none; margin-top: 2px; color: var(--subtle); }
/* Under "Check Your Email": where to look when the code doesn't arrive (owner, 2026-11-11). */
.spam-tip { display: flex; align-items: flex-start; gap: 10px; margin: -12px 0 26px; padding: 12px 14px; border-radius: 12px; background: var(--tint); color: var(--text); font-size: 15px; line-height: 1.5; }
.spam-tip svg { flex: none; margin-top: 3px; color: var(--link); }
.after { margin: 12px 0 0; }
.back { display: inline-flex; align-items: center; gap: 6px; margin: 0 0 28px; color: var(--muted); font-size: 15px; font-weight: 700; text-decoration: none; }
.back:hover { color: var(--heading); }
.badge { display: grid; place-items: center; width: 56px; height: 56px; margin: 0 0 22px; border-radius: 50%; background: var(--tint); color: var(--link); }
.signin-foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 20px; color: var(--muted); font-size: 14px; }
.signin-foot a { color: var(--muted); }

.showcase {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 12px;
  padding: 56px clamp(32px, 4.5vw, 72px);
  overflow: hidden;
  border-radius: 28px;
  background: var(--showcase);
}
/* The website's hexagons, faint, in the corner. */
.showcase::before, .summary::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: -110px;
  right: -90px;
  width: min(420px, 56%);
  aspect-ratio: 485 / 572;
  background: url("/assets/hexagons-9f93f7d4bc92.svg") center / 100% 100% no-repeat;
  opacity: var(--hexagons);
  -webkit-mask-image: radial-gradient(circle at 100% 0%, #000 30%, transparent 74%);
  mask-image: radial-gradient(circle at 100% 0%, #000 30%, transparent 74%);
  pointer-events: none;
}
.showcase-inner { width: 100%; max-width: 520px; }
.showcase h2 { font-size: clamp(30px, 2.7vw, 42px); line-height: 1.12; letter-spacing: -0.03em; }
.showcase-inner > p { max-width: 30em; margin: 16px 0 0; color: var(--text); font-size: 17px; line-height: 1.6; }

/* The look inside: the dashboard in a browser window, drawn with made-up numbers and hidden from screen readers. */
.peek { margin: 40px 0 0; overflow: hidden; border-radius: 16px; background: var(--surface); box-shadow: var(--raised); }
.peek-bar { display: flex; align-items: center; gap: 7px; padding: 12px 16px; background: var(--surface-2); box-shadow: 0 1px 0 var(--line); }
.peek-bar span { width: 10px; height: 10px; border-radius: 50%; background: var(--line-2); }
.peek-address { flex: 1; margin: 0 0 0 10px; padding: 5px 14px; border-radius: 999px; background: var(--surface); color: var(--muted); font-size: 13px; box-shadow: inset 0 0 0 1px var(--line); }
.peek-body { padding: 22px 24px 8px; }
.peek-name { color: var(--heading); font: 700 21px/1.2 var(--font-head); letter-spacing: -0.02em; }
.peek-status { display: flex; align-items: center; gap: 9px; margin: 10px 0 0; color: var(--heading); font-size: 14.5px; font-weight: 700; }
.peek-status small { color: var(--muted); font-size: 13.5px; font-weight: 400; }
.peek-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 18px 0 8px; }
.peek-tile { padding: 14px 16px; border-radius: 12px; background: var(--tint); }
.peek-label { color: var(--heading); font-size: 12.5px; font-weight: 700; white-space: nowrap; }
.peek-big { margin: 2px 0 0; color: var(--heading); font: 700 26px/1.15 var(--font-head); letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.peek-delta { margin: 2px 0 0; color: var(--ok); font-size: 12.5px; font-weight: 700; }
.peek-tile.lead { background: var(--lead); }
.peek-tile.lead > * { color: #fff; }
.peek-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 0; border-top: 1px solid var(--line); }
.peek-tiles + .peek-row { border-top: 0; }
.peek-what { min-width: 0; color: var(--heading); font-size: 14px; }
.peek-what small { display: block; color: var(--muted); font-size: 12.5px; }

/* Message pages: one calm card in the middle. */
.simple { display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh; padding: 28px clamp(20px, 5vw, 48px) 24px; }
.simple-main { flex: 1; display: grid; place-items: center; padding: 48px 0; }
.sheet { width: 100%; max-width: 460px; padding: 44px 40px; border-radius: 24px; background: var(--surface); box-shadow: var(--raised); text-align: center; }
.sheet .badge { margin: 0 auto 22px; }
.sheet h1 { font-size: 27px; line-height: 1.2; letter-spacing: -0.025em; }
.sheet .lede { margin: 12px 0 0; font-size: 16.5px; }
.sheet .btn { min-width: 11rem; margin: 28px 0 0; }
.simple-foot { color: var(--muted); font-size: 14px; text-align: center; }

/* Dashboard. The header stays at the top; under it the summary band, then the detail cards on the page's gray. */
header.top { position: sticky; top: 0; z-index: 5; background: var(--band); box-shadow: 0 1px 0 var(--line); }
.top-inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; max-width: var(--wrap); margin: 0 auto; padding: 13px 24px; }
header.top .logo img { height: 32px; }
.who { display: flex; align-items: center; justify-content: flex-end; gap: 14px; min-width: 0; color: var(--muted); font-size: 14.5px; }
.who span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.who form { margin: 0; }
.linklike {
  min-height: 38px;
  padding: 0 16px;
  border: 1px solid var(--line-2);
  border-radius: 10px;
  background: var(--quiet);
  color: var(--heading);
  font: 700 14.5px/1 var(--font-body);
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}
.linklike:hover { background: var(--quiet-hover); border-color: var(--subtle); }
.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 24px; }
.summary { position: relative; isolation: isolate; overflow: hidden; padding: 44px 0 48px; background: var(--band); box-shadow: 0 1px 0 var(--line); }
.summary::before { top: -150px; right: max(-60px, calc(50% - 820px)); width: 400px; }
.details { padding: 36px 0 72px; }

/* More than one business or website: which one this is. */
.switch { margin: 0 0 14px; }
.switch:last-of-type { margin-bottom: 28px; }
.pills { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.pills a { display: inline-flex; align-items: center; min-height: 40px; padding: 0 16px; border-radius: 999px; background: var(--surface-2); color: var(--text); font-size: 15px; font-weight: 700; text-decoration: none; box-shadow: inset 0 0 0 1px var(--line); }
.pills a:hover { box-shadow: inset 0 0 0 1px var(--subtle); }
.pills a[aria-current=page] { background: var(--heading); color: var(--band); box-shadow: none; }

/* The business, its buttons, and whether the site is up as one strip of facts. */
/* The name gets the full width; its address and the buttons share the line under it (.hero-text only groups the two
   for the markup, so its children are laid out here). */
.hero { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "title title" "domain actions" "facts facts"; align-items: center; column-gap: 32px; }
.hero-text { display: contents; }
.hero h1 { grid-area: title; font-size: clamp(30px, 3.5vw, 42px); line-height: 1.1; letter-spacing: -0.03em; overflow-wrap: anywhere; }
.hero-domain { grid-area: domain; display: flex; align-items: center; gap: 8px; min-width: 0; margin: 14px 0 0; color: var(--muted); font-size: 17px; line-height: 1.4; overflow-wrap: anywhere; }
.hero-domain svg { flex: none; color: var(--subtle); }
.hero-actions { grid-area: actions; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px; margin: 14px 0 0; }
.hero-actions form { margin: 0; }
.facts { grid-area: facts; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 1px; margin: 26px 0 0; padding: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 16px; background: var(--line); list-style: none; }
.facts li { display: flex; flex-direction: column; justify-content: center; gap: 2px; min-width: 0; padding: 16px 22px; background: var(--band); color: var(--text); font-size: 15px; line-height: 1.45; }
.facts .state { flex-direction: row; align-items: center; justify-content: flex-start; gap: 12px; color: var(--heading); font: 700 19px/1.3 var(--font-head); letter-spacing: -0.015em; }
/* A site that is down says so on red, where browsers can tell (the dot says it everywhere). */
.facts .state:has(.dot.down) { background: var(--bad-soft); color: var(--bad); }
.fact-label { color: var(--muted); font-size: 13.5px; }
.fact-value { color: var(--heading); font-size: 16.5px; font-weight: 700; }
.soft { color: var(--muted); }

.dot { display: inline-block; flex: none; width: 12px; height: 12px; border-radius: 50%; background: var(--subtle); }
.dot.up { background: var(--ok); box-shadow: 0 0 0 5px var(--ok-soft); }
.dot.down { background: var(--bad); box-shadow: 0 0 0 5px var(--bad-soft); }
.dot.maintenance, .dot.pending { background: var(--warn); box-shadow: 0 0 0 5px var(--warn-soft); }

/* Cards */
.card { position: relative; min-width: 0; margin: 0; padding: 26px 28px; border-radius: 18px; background: var(--surface); box-shadow: var(--card); }
.card-title { margin: 0; color: var(--heading); font: 700 19px/1.3 var(--font-head); letter-spacing: -0.015em; }
.card-note { margin: 6px 0 16px; color: var(--muted); font-size: 14.5px; line-height: 1.5; }
.card .btn { margin-top: 18px; }
.empty { margin: 10px 0 0; color: var(--muted); font-size: 15px; line-height: 1.55; }
.card-text { margin: 10px 0 0; color: var(--text); font-size: 15px; line-height: 1.6; }
p.card.empty { margin: 0; }
/* In the summary band a lone line is a flat tile, not a card on a card. */
.summary p.card.empty { margin: 28px 0 0; padding: 20px 22px; background: var(--surface-2); box-shadow: none; }
.summary .month p.card.empty { margin: 0; }

/* This Month So Far: big numbers on flat tiles, the contact actions on the brand's blue. */
.month { margin: 44px 0 0; }
.section-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 16px; margin: 0 0 18px; }
.section-head h2 { font-size: 25px; line-height: 1.25; letter-spacing: -0.025em; }
.range { margin: 0; color: var(--muted); font-size: 15px; }
.kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin: 0; }
.kpi { min-width: 0; padding: 24px 26px; border-radius: 18px; background: var(--tint); }
.kpi-label { margin: 0; color: var(--heading); font-size: 15.5px; font-weight: 700; }
.kpi-value { margin: 4px 0 0; color: var(--heading); font: 700 clamp(40px, 4.6vw, 54px)/1.08 var(--font-head); letter-spacing: -0.04em; font-variant-numeric: tabular-nums; }
.delta { margin: 8px 0 0; color: var(--muted); font-size: 14.5px; font-weight: 700; }
.delta.up { color: var(--ok); }
.delta .vs { color: var(--muted); font-weight: 400; }
.split { margin: 14px 0 0; color: var(--text); font-size: 14.5px; }
.before { margin: 2px 0 0; color: var(--muted); font-size: 13.5px; }
.kpi.lead { background: var(--lead); }
.kpi.lead .kpi-label, .kpi.lead .kpi-value, .kpi.lead .delta, .kpi.lead .delta .vs, .kpi.lead .contacts strong { color: #fff; }
.contacts { display: flex; flex-wrap: wrap; gap: 6px 20px; margin: 14px 0 0; padding: 0; list-style: none; color: #fff; font-size: 14.5px; }
.contacts li { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; }
.contacts svg { flex: none; opacity: 0.85; }
.filter-note { max-width: 62em; margin: 16px 0 0; font-size: 14px; line-height: 1.55; }

/* A name, its number, and a bar against the busiest one. */
.bars { margin: 0; padding: 0; list-style: none; }
.bars li { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: 8px 16px; padding: 16px 0 0; }
.bars li:first-child { padding-top: 2px; }
.bar-name { min-width: 0; overflow: hidden; color: var(--heading); font-size: 15.5px; text-overflow: ellipsis; white-space: nowrap; }
.bar-value { color: var(--muted); font-size: 14.5px; font-variant-numeric: tabular-nums; }
.bar { grid-column: 1 / -1; display: block; height: 8px; overflow: hidden; border-radius: 4px; background: var(--surface-2); }
.bar rect { fill: var(--accent); }

/* Google Search: its two numbers side by side, then the searches as bars like the pages above. */
.search-numbers { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 0 0 22px; }
.search-number { min-width: 0; padding: 18px 20px; border-radius: 14px; background: var(--surface-2); }
.search-number .kpi-label { font-size: 14.5px; }
.search-value { margin: 2px 0 0; color: var(--heading); font: 700 34px/1.12 var(--font-head); letter-spacing: -0.035em; font-variant-numeric: tabular-nums; }
.search-number .delta { margin-top: 6px; font-size: 14px; }
.search-sub { font: 700 16px/1.4 var(--font-body); letter-spacing: 0; }
.search .search-sub + .card-note { margin: 2px 0 14px; }
.search-foot { margin: 18px 0 0; padding: 14px 0 0; border-top: 1px solid var(--line); color: var(--muted); font-size: 13.5px; line-height: 1.5; }
/* On a phone each search gets the full width, with how often it was shown on the line below. */
@media (max-width: 560px) {
  .search .bars li { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .search .bar-name { white-space: normal; overflow-wrap: anywhere; }
  .search .bar { margin-top: 4px; }
}

.layout { display: grid; grid-template-columns: minmax(0, 1.75fr) minmax(0, 1fr); gap: 24px; align-items: start; }
.col { display: grid; gap: 24px; min-width: 0; }
.layout.single { grid-template-columns: minmax(0, 1fr); }
.layout.single .col { grid-template-columns: repeat(auto-fill, minmax(min(340px, 100%), 1fr)); align-items: start; }
/* A site being built, for someone with no side cards: the one column, kept to a readable width. */
.layout.solo { grid-template-columns: minmax(0, 860px); }

.list { margin: 6px 0 0; padding: 0; list-style: none; }
.list li { display: flex; justify-content: space-between; align-items: center; gap: 14px; padding: 14px 0; border-top: 1px solid var(--line); font-size: 15px; }
.list li:first-child { border-top: 0; padding-top: 6px; }
.list li:last-child { padding-bottom: 2px; }
.list .what { min-width: 0; color: var(--heading); }
.list .what small { display: block; margin-top: 2px; color: var(--muted); font-size: 13.5px; overflow-wrap: anywhere; }
.requests .what { font-weight: 700; }
.requests .what small { font-weight: 400; }
/* A report's "View": a button to tap, not a word to hit. */
.reports li { padding: 9px 0; }
.reports li:first-child { padding-top: 2px; }
.reports a { display: inline-flex; align-items: center; min-height: 38px; padding: 0 16px; border-radius: 10px; background: var(--tint); font-size: 14.5px; font-weight: 700; text-decoration: none; }
.reports a:hover { background: var(--tint-2); }
.pill { flex: none; padding: 4px 11px; border-radius: 999px; background: var(--surface-2); color: var(--muted); font-size: 13px; font-weight: 700; line-height: 1.4; white-space: nowrap; box-shadow: inset 0 0 0 1px var(--line); }
.pill.done { background: var(--ok-soft); color: var(--ok); box-shadow: none; }
.pill.active { background: var(--tint); color: var(--link); box-shadow: none; }
.pill.info { background: var(--warn-soft); color: var(--warn); box-shadow: none; }

/* Form messages: what visitors typed, line breaks kept, long words and links broken to fit a phone. */
.messages { margin: 0; padding: 0; list-style: none; }
.messages > li + li { margin-top: 22px; padding-top: 22px; border-top: 1px solid var(--line); }
.message-head { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
.message-from { min-width: 0; color: var(--heading); font: 700 16.5px/1.4 var(--font-body); letter-spacing: 0; overflow-wrap: anywhere; }
.message-head .pill { max-width: 100%; white-space: normal; overflow-wrap: anywhere; }
.message-when { margin-left: auto; color: var(--muted); font-size: 13.5px; white-space: nowrap; }
/* The visitor's email and phone: one tap to write or call. */
.message-contact { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 0; font-size: 14.5px; }
.message-contact a { display: inline-flex; align-items: center; gap: 8px; min-width: 0; min-height: 40px; padding: 6px 14px; border-radius: 999px; background: var(--tint); font-weight: 700; text-decoration: none; overflow-wrap: anywhere; }
.message-contact a:hover { background: var(--tint-2); }
.message-contact svg { flex: none; }
.message-fields { margin: 12px 0 0; padding: 14px 16px; border-radius: 12px; background: var(--surface-2); }
.message-fields div + div { margin-top: 10px; }
.message-fields dt { color: var(--muted); font-size: 13.5px; font-weight: 700; overflow-wrap: anywhere; }
.message-fields dd { margin: 2px 0 0; color: var(--heading); font-size: 15px; line-height: 1.55; white-space: pre-wrap; overflow-wrap: anywhere; }
/* Three at a time: newer on the left, older on the right, which ones these are in the middle. */
.pager { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 10px; margin: 22px 0 0; padding: 18px 0 0; border-top: 1px solid var(--line); }
.card .pager .btn { min-height: 44px; margin: 0; padding: 0 16px; }
.pager .newer { grid-column: 1; justify-self: start; }
.pager .older { grid-column: 3; justify-self: end; }
.pager-count { grid-column: 2; color: var(--muted); font-size: 14.5px; white-space: nowrap; }
/* The pager's links come back to the card's title, clear of the header that stays at the top. */
.card-title { scroll-margin-top: 96px; }

.billing .notice { margin: 14px 0 0; }
.plans { margin: 14px 0 0; padding: 0; list-style: none; }
.plan + .plan { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--line); }
.plan-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.plan-name { min-width: 0; color: var(--heading); font-weight: 700; }
.plan-price { margin: 4px 0 0; color: var(--heading); font: 700 30px/1.25 var(--font-head); letter-spacing: -0.03em; }
.plan-price .per { color: var(--muted); font: 400 15px var(--font-body); letter-spacing: 0; }
.plan-when { margin: 2px 0 0; color: var(--muted); font-size: 14.5px; }
.billing form { margin: 0; }
.billing .card-note { margin: 12px 0 0; font-size: 14px; }

/* "Refer a business": the one card on a flat blue, its two buttons side by side, stacked when too narrow for both. */
.card.refer { background: var(--tint-2); box-shadow: none; }
.refer-actions { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: 10px; margin: 18px 0 0; }
.card .refer-actions .btn { width: 100%; margin: 0; padding: 0 12px; }
/* On a blue panel the quiet buttons are solid white with dark words, light or dark, so they never fade into it. */
.refer .btn-quiet, .build .next .btn-quiet { background: #fff; border-color: #fff; color: #07121a; }
.refer .btn-quiet:hover, .build .next .btn-quiet:hover { background: #f3f6f9; border-color: #f3f6f9; }
.refer-note { margin: 14px 0 0; color: var(--muted); font-size: 14px; line-height: 1.5; }
.refer .card-text, .refer .refer-note { color: var(--text); }

/* "People": who can sign in; a manager's Remove opens a second button (the page runs no script), then the form to add one. */
.people .notice { margin: 4px 0 12px; }
.people .list li { flex-wrap: wrap; }
.people .what { flex: 1 1 10rem; overflow-wrap: anywhere; }
.person-remove { flex-basis: 100%; margin: -4px 0 0; }
.person-remove summary { display: inline-block; padding: 4px 0; color: var(--link); font-size: 14.5px; font-weight: 700; cursor: pointer; list-style: none; }
.person-remove summary::-webkit-details-marker { display: none; }
.person-remove summary:hover { text-decoration: underline; }
.person-remove[open] summary { color: var(--muted); }
.person-remove form { margin: 8px 0 0; padding: 14px 16px; border-radius: 12px; background: var(--surface-2); }
.person-remove p { margin: 0; color: var(--text); font-size: 14.5px; line-height: 1.5; }
.card .person-remove .btn { min-height: 44px; margin-top: 12px; }
.people-sub { margin: 18px 0 0; padding: 18px 0 0; border-top: 1px solid var(--line); color: var(--heading); font: 700 16px/1.4 var(--font-body); letter-spacing: 0; }
.people .people-sub + .card-text { margin-top: 4px; font-size: 14.5px; }
.people-add { margin: 16px 0 0; }
.people-add .field { margin: 0 0 12px; }
.people-add .field label { font-size: 14.5px; }
.optional { color: var(--muted); font-weight: 400; }
.card .people-add .btn { margin-top: 4px; }

/* "Ask for a Review" (Listing Care Plus): the form to add a customer after a job, then each customer's line. */
.reviews .notice { margin: 12px 0 0; }
.reviews .list { margin-top: 16px; }
.reviews .what { flex: 1 1 10rem; overflow-wrap: anywhere; }

/* "Notifications": email or this device. Its script shows the buttons that fit; a hidden one stays hidden although .btn sets display. */
.notify-card [hidden] { display: none; }
.notify-card .empty { color: var(--text); }
.notify-card .steps { margin: 12px 0 0; color: var(--text); font-size: 15px; line-height: 1.6; }
.notify-actions { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: 10px; margin: 18px 0 0; }
.card .notify-actions .btn { width: 100%; margin: 0; padding: 0 12px; }

/* "Need something?": the band that closes the page, on the brand's blue, with Zack beside it. Its buttons are solid
   white, so they read on the blue. Where it is the only thing on the page it sits in the layout, with no gap above. */
.help { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 16px 22px; margin: 24px 0 0; padding: 26px 30px; border-radius: 18px; background: var(--lead); }
.layout .help { margin: 0; }
.help.no-photo { grid-template-columns: minmax(0, 1fr) auto; }
.help-photo { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.9); }
.help .card-title { color: #fff; font-size: 21px; }
.help-text p { margin: 4px 0 0; color: #fff; font-size: 16px; line-height: 1.5; overflow-wrap: anywhere; }
.help-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px; }
.help .btn { min-width: 9.5rem; margin: 0; background: #fff; border-color: #fff; color: #07121a; }
.help .btn:hover { background: #e9f3fb; border-color: #e9f3fb; }
.help :focus-visible { outline-color: #fff; }

/* "Add to your home screen": under the business name on phones and tablets only (an iPad's Safari says it is a Mac,
   so those steps wait for a touch screen). The whole row opens the steps, with no script; the arrow turns when open. */
.card.app-card { margin: 28px 0 0; padding: 0; background: var(--surface-2); box-shadow: none; }
.app-card summary { padding: 14px 18px; cursor: pointer; list-style: none; }
.app-card summary::-webkit-details-marker { display: none; }
.app-card summary:focus-visible { outline-offset: -2px; border-radius: 18px; }
/* The layout sits on a span inside the summary: older Safari ignores grid on a summary itself. */
.app-row { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 2px 14px; }
.app-icon { grid-row: span 2; width: 46px; height: 46px; border-radius: 11px; }
.app-row .card-title { align-self: end; font: 700 16.5px/1.35 var(--font-body); letter-spacing: 0; }
.app-how { display: inline-flex; align-items: center; gap: 4px; align-self: start; color: var(--link); font-size: 14.5px; font-weight: 700; }
.app-how svg { transition: transform 0.15s; }
.app-card[open] .app-how svg { transform: rotate(180deg); }
.app-card:not([open]) .app-less, .app-card[open] .app-more { display: none; }
.app-steps { margin: 0 18px; padding: 14px 0 18px; border-top: 1px solid var(--line); color: var(--text); font-size: 15px; line-height: 1.6; }
.app-steps > * { max-width: 38rem; }
.app-why { margin: 0 0 10px; color: var(--muted); }
.app-steps ol { margin: 0; padding: 0 0 0 1.3em; }
.app-steps li { padding-left: 2px; }
.app-steps li + li { margin-top: 8px; }
.app-note { margin: 12px 0 0; color: var(--muted); font-size: 14.5px; }
@media (pointer: fine) {
  .app-card.touch-only { display: none; }
}
/* Opened from the home screen: no card asking for that, and a Refresh button, since there is no browser bar to reload with. */
a.linklike { align-items: center; text-decoration: none; }
.app-only { display: none; }
@media (display-mode: standalone), (display-mode: fullscreen) {
  .app-only { display: inline-flex; }
  .app-card { display: none; }
}

footer.base { padding: 0 24px 40px; color: var(--muted); font-size: 14px; text-align: center; }

/* A site being built (src/portal/build.ts): the "Your new website" card, its trail and "Next" box, Zack's note, and
   the approval page. Flat colours from the palette above, light and dark alike. */
.dot.building { background: var(--accent); box-shadow: 0 0 0 5px var(--tint-2); }
.build .trail { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin: 22px 0 24px; padding: 0; list-style: none; counter-reset: none; }
.build .trail li { position: relative; display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; min-width: 0; }
.build .trail li + li::before { content: ""; position: absolute; top: 17px; right: 50%; width: 100%; height: 2px; background: var(--line); z-index: 0; }
.build .trail li.done + li::before, .build .trail li.done + li.now::before { background: var(--accent); }
.build .trail .hex { position: relative; z-index: 1; display: block; width: 36px; height: 36px; }
.build .trail .hex svg { display: block; width: 36px; height: 36px; }
.build .trail .hex path:first-child { fill: var(--surface); stroke: var(--line-2); stroke-width: 1.5; }
.build .trail .hex text { fill: var(--muted); font: 700 10px/1 var(--font-body); }
.build .trail li.done .hex path:first-child { fill: var(--accent); stroke: var(--accent); }
.build .trail li.done .hex .tick { fill: none; stroke: var(--on-accent); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.build .trail li.now .hex path:first-child { fill: var(--tint); stroke: var(--accent); }
.build .trail li.now .hex text { fill: var(--link); }
.build .trail .step strong { display: block; color: var(--heading); font-size: 14.5px; line-height: 1.3; }
.build .trail .step small { display: block; margin-top: 2px; color: var(--muted); font-size: 13.5px; line-height: 1.35; }
.build .trail li.now .step small { color: var(--link); font-weight: 700; }
.build .next { margin: 0 0 20px; padding: 22px 24px; border-radius: 16px; background: var(--tint); color: var(--text); }
.build .next strong { display: block; color: var(--heading); font: 700 18px/1.35 var(--font-head); letter-spacing: -0.015em; }
.build .next p { margin: 8px 0 0; font-size: 15.5px; line-height: 1.6; }
.build .next.paused { background: var(--surface-2); }
.build .next.paused .btn-quiet { border-color: var(--line-2); }
.build .next-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.build .next-actions .btn, .build .next-actions form { margin: 0; }
.build .payment { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; margin-top: 16px; padding: 14px 16px; border-radius: 12px; background: var(--surface); }
.build .payment strong { font: 700 15px/1.4 var(--font-body); letter-spacing: 0; }
.build .payment small { display: block; margin-top: 2px; color: var(--muted); font-size: 13.5px; }
.build .payment > a { display: inline-flex; }
.build .build-sub { margin: 24px 0 6px; color: var(--heading); font: 700 16px/1.4 var(--font-body); letter-spacing: 0; }
.build .received { margin-top: 10px; }
.build .week { padding: 12px 0; border-top: 1px solid var(--line); }
.build .card-note + .week { border-top: 0; padding-top: 0; }
.build .week strong { color: var(--heading); font-size: 14.5px; }
.build .week-lines { margin: 6px 0 0; padding-left: 20px; font-size: 15px; line-height: 1.6; }
.build .week .empty { margin-top: 4px; }
.build .owner-note { display: flex; gap: 16px; align-items: center; margin-top: 22px; padding: 18px 20px; border-radius: 16px; background: var(--surface-2); }
.build .owner-note img { flex: none; width: 60px; height: 60px; border-radius: 50%; object-fit: cover; }
.build .owner-note p { margin: 0; color: var(--heading); font-size: 15.5px; line-height: 1.55; }
.build .owner-note small { display: block; margin-top: 4px; color: var(--muted); font-size: 14px; }
.went-live { margin: 28px 0 0; }
.sheet.approve { max-width: 540px; text-align: left; }
.sheet.approve h1 { text-align: center; }
.sheet.approve .lede { text-align: center; }
.approve-list { display: grid; grid-template-columns: max-content 1fr; gap: 12px 20px; margin: 28px 0 0; padding: 20px 22px; border-radius: 14px; background: var(--surface-2); font-size: 15px; }
.approve-list dt { color: var(--muted); }
.approve-list dd { margin: 0; color: var(--heading); overflow-wrap: anywhere; }
.sheet .confirm { margin: 22px 0 0; padding: 16px 18px; border: 0; border-radius: 14px; background: var(--tint); }
.sheet .confirm legend { padding: 0; float: left; width: 100%; margin-bottom: 10px; color: var(--heading); font-weight: 700; }
.sheet .confirm label { display: flex; gap: 10px; align-items: center; clear: both; font-size: 15px; }
.sheet .confirm input { width: 20px; height: 20px; accent-color: var(--accent); }
.sheet.approve .btn { width: 100%; margin-top: 18px; }
.sheet .fine { margin: 14px 0 0; color: var(--muted); font-size: 13.5px; line-height: 1.5; }
.sheet.approve p:last-child { margin: 16px 0 0; text-align: center; font-size: 14.5px; }
.badge.ok { background: var(--ok-soft); color: var(--ok); }

/* Smaller screens */
@media (max-width: 1023px) {
  .signin { grid-template-columns: minmax(0, 1fr); }
  .showcase { display: none; }
}
@media (max-width: 960px) {
  .layout { grid-template-columns: minmax(0, 1fr); }
  .summary::before { display: none; }
}
@media (max-width: 720px) {
  /* The business, then whether the site is up, then the buttons: the main one across, the others side by side. */
  .hero { grid-template-columns: minmax(0, 1fr); grid-template-areas: "title" "domain" "facts" "actions"; }
  .hero-domain { margin-top: 10px; }
  .facts { margin-top: 20px; }
  .hero-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 18px; }
  .hero-actions > :first-child:nth-last-child(odd) { grid-column: 1 / -1; }
  .hero-actions .btn { width: 100%; padding: 0 12px; }
  .facts { grid-auto-flow: row; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .facts li:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kpis .kpi:last-child { grid-column: 1 / -1; }
  .help { grid-template-columns: auto minmax(0, 1fr); }
  .help.no-photo { grid-template-columns: minmax(0, 1fr); }
  .help-actions { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); }
  .help .btn { width: 100%; min-width: 0; }
}
@media (max-width: 560px) {
  .signin-pane { padding: 20px 20px 22px; }
  .signin-main { align-items: flex-start; padding: 8vh 0 40px; }
  .signin h1 { font-size: 29px; }
  .logo img { height: 32px; }
  .signin-foot { justify-content: center; text-align: center; }
  .sheet { padding: 34px 22px; border-radius: 20px; }
  .sheet h1 { font-size: 24px; }
  .top-inner { padding: 10px 16px; }
  header.top .logo img { height: 28px; }
  .who span { display: none; }
  .wrap { padding: 0 16px; }
  .summary { padding: 26px 0 30px; }
  .details { padding: 24px 0 48px; }
  .switch:last-of-type { margin-bottom: 20px; }
  .hero h1 { font-size: 28px; }
  .hero-domain { margin-top: 8px; font-size: 16px; }
  .facts { margin-top: 18px; }
  .hero-actions { margin-top: 16px; }
  /* Two buttons side by side keep their words on one line: the new-tab arrow is left to wider screens. */
  .hero-actions .btn { padding: 0 8px; }
  .hero-actions .btn svg { display: none; }
  .pills a { min-height: 36px; padding: 0 14px; font-size: 14.5px; }
  .facts { border-radius: 14px; }
  .facts li { padding: 12px 14px; }
  .facts .state { gap: 10px; font-size: 17px; }
  .fact-label { font-size: 13px; }
  .fact-value { font-size: 15.5px; }
  .card.app-card { margin-top: 20px; }
  .month { margin-top: 30px; }
  .section-head { margin-bottom: 14px; }
  .section-head h2 { font-size: 22px; }
  .kpis { gap: 10px; }
  .kpi { padding: 16px 16px 18px; border-radius: 16px; }
  .kpi-label { font-size: 15px; }
  .kpi-value { font-size: 36px; }
  .delta { font-size: 14px; }
  .kpi.lead { padding: 18px; }
  .kpi.lead .kpi-value { font-size: 40px; }
  .layout, .col { gap: 16px; }
  .card { padding: 22px 18px; border-radius: 16px; }
  .search-number { padding: 14px 16px; }
  .search-value { font-size: 28px; }
  .help { margin-top: 16px; padding: 22px 18px; border-radius: 16px; }
  .help-photo { width: 56px; height: 56px; }
  .build .trail { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 18px; }
  .build .trail li:nth-child(3)::before { display: none; }
  .build .next { padding: 18px; }
  .build .next-actions > * { flex: 1 1 100%; }
  .build .next-actions .btn { width: 100%; }
  .approve-list { grid-template-columns: 1fr; gap: 2px; }
  .approve-list dd { margin-bottom: 10px; }
}
@media (max-width: 380px) {
  .kpis { grid-template-columns: minmax(0, 1fr); }
  .search-numbers { grid-template-columns: minmax(0, 1fr); }
  .hero-actions { grid-template-columns: minmax(0, 1fr); }
  .requests li { flex-direction: column; align-items: flex-start; gap: 8px; }
  /* Which ones these are on a line of its own, the links below it. */
  .pager { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .pager-count { grid-column: 1 / -1; grid-row: 1; text-align: center; }
  .pager .older { grid-column: 2; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; }
}

@media (forced-colors: active) {
  .input:focus { outline: 2px solid; }
  .btn, .linklike { border-color: ButtonText; }
  .bar rect { fill: CanvasText; }
  .kpi, .help, .facts, .card { border: 1px solid CanvasText; }
}