/* Client portal: sign-in and the account page. Sits on site.css (tokens, header,
   actions, close band, footer) and adds only what the account screens need. */

.account-hero { padding:clamp(40px,5vw,64px) var(--gutter) clamp(36px,4.4vw,56px); }
.account-hero h1 { max-width:18ch; text-wrap:balance; font-size:clamp(2.6rem,5.6vw,4.8rem); font-weight:700; line-height:.96; letter-spacing:-.045em; }
.account-hero .page-note { margin-top:16px; }
.account-hero .hero-actions { margin-top:24px; }

/* The account's own pages, one row at the foot of the blue band on every signed-in
   page: Overview, Billing, Visitors, Messages, Account. The current one is underlined
   in white. On a phone the row scrolls sideways rather than wrapping. */
.account-nav { display:flex; gap:0 30px; padding:0 var(--gutter); border-top:1px solid rgba(255,255,255,.24); overflow-x:auto; scrollbar-width:none; }
.account-nav::-webkit-scrollbar { display:none; }
.account-nav a { position:relative; flex:0 0 auto; padding:17px 0 15px; color:#dfe5ff; font-size:15px; font-weight:600; text-decoration:none; white-space:nowrap; }
.account-nav a:hover { color:var(--white); }
.account-nav a[aria-current="page"] { color:var(--white); }
.account-nav a[aria-current="page"]::after { content:''; position:absolute; left:0; right:0; bottom:0; height:3px; background:var(--white); }
.account-nav .count { display:inline-block; min-width:22px; margin-left:6px; padding:1px 7px; border-radius:999px; background:rgba(255,255,255,.18); color:var(--white); font-size:12.5px; font-weight:700; text-align:center; font-variant-numeric:tabular-nums; }
.lead:has(.account-nav) .account-hero { padding-bottom:clamp(28px,3.4vw,44px); }

.account { padding:clamp(28px,3.6vw,48px) var(--gutter) clamp(56px,6vw,88px); }
.account-grid { display:grid; grid-template-columns:minmax(0,1.5fr) minmax(300px,1fr); gap:22px; align-items:start; }
.account-col { display:grid; gap:22px; min-width:0; }

.panel { padding:28px 28px 30px; background:var(--white); border-radius:var(--radius); }
/* The Styles page's controls also use .panel in site.css (a grid that spans its row
   under 1080px); the account pages' panels keep their own shape regardless. */
.account-page .panel { display:block; grid-column:auto; }
.panel > h2 { font-size:22px; font-weight:600; letter-spacing:-.03em; line-height:1.15; }
.panel > h2 + p, .panel-lede { margin-top:10px; color:var(--muted); font-size:15px; }
.panel .action { margin-top:18px; }
.panel .action + .action { margin-left:10px; }
.panel-actions { display:flex; flex-wrap:wrap; gap:10px; margin-top:18px; }
.panel-actions .action { margin:0; }

.status-line { margin-top:14px; font-size:17px; font-weight:600; letter-spacing:-.01em; }
.status-line small { display:block; margin-top:4px; color:var(--muted); font-size:15px; font-weight:400; }

.facts { display:grid; grid-template-columns:max-content minmax(0,1fr); gap:10px 22px; margin-top:18px; font-size:15px; }
.facts dt { color:var(--muted); }
.facts dd { margin:0; font-weight:500; overflow-wrap:anywhere; }
.facts a { color:var(--blue); font-weight:600; text-decoration:underline; text-underline-offset:4px; }

.money-list { margin-top:16px; }
.money-list li { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:6px 18px; align-items:center; padding:14px 0; border-top:1px solid var(--rule); }
.money-list li:first-child { border-top:0; padding-top:4px; }
.money-list .what { font-weight:500; }
.money-list .when { display:block; margin-top:2px; color:var(--muted); font-size:14px; }
.money-list .amount { font-size:20px; font-weight:700; letter-spacing:-.03em; font-variant-numeric:tabular-nums; white-space:nowrap; text-align:right; }
.money-list .action { grid-column:1 / -1; justify-self:start; margin-top:4px; }
.money-list.paid .amount { color:var(--muted); font-weight:600; }
.money-total { display:flex; justify-content:space-between; gap:16px; margin-top:12px; padding-top:14px; border-top:1.5px solid var(--ink); font-weight:600; }
.money-total b { font-size:22px; letter-spacing:-.03em; font-variant-numeric:tabular-nums; }

.usage { margin-top:14px; font-size:17px; }
.usage b { font-size:2.4rem; font-weight:700; letter-spacing:-.05em; line-height:1; font-variant-numeric:tabular-nums; margin-right:6px; }

.request-form { display:grid; gap:14px; margin-top:20px; }
.request-form label { display:block; margin-bottom:6px; font-size:15px; font-weight:600; }
.request-form select, .request-form textarea, .signin-form input, .settings-form input, .settings-form select {
  display:block; width:100%; padding:13px 14px;
  border:1.5px solid #b9bfd2; border-radius:var(--radius-sm);
  background:var(--white); color:var(--ink); font:inherit;
}
.request-form textarea { min-height:120px; resize:vertical; }
.request-form select:focus-visible, .request-form textarea:focus-visible, .signin-form input:focus-visible, .settings-form input:focus-visible, .settings-form select:focus-visible { outline:3px solid var(--ink); outline-offset:2px; border-color:var(--ink); }
.request-form .action { justify-self:start; margin-top:4px; }
.form-msg { margin-top:12px; font-size:15px; }
.form-msg.error { color:#a7192f; font-weight:600; }
.form-msg.ok { color:#0f6b3f; font-weight:600; }

.request-list { margin-top:20px; }
.request-list li { padding:14px 0; border-top:1px solid var(--rule); }
.request-list .req-head { display:flex; flex-wrap:wrap; justify-content:space-between; gap:6px 16px; font-size:14px; color:var(--muted); }
.request-list .req-head b { color:var(--ink); font-weight:600; }
.request-list p { margin-top:6px; white-space:pre-line; }
.request-list .reply { margin-top:8px; padding:10px 14px; background:var(--ground); border-radius:var(--radius-sm); font-size:15px; }
.request-list .reply b { display:block; margin-bottom:2px; font-size:13px; color:var(--muted); font-weight:600; }

.care-options { display:grid; gap:12px; margin-top:18px; }
.care-options li { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:4px 16px; align-items:center; padding:16px 18px; background:var(--ground); border-radius:var(--radius-sm); }
.care-options b { font-size:17px; }
.care-options span { color:var(--muted); font-size:14px; }
.care-options .action { grid-row:1 / 3; margin:0; }

/* Sign-in and verify: one centered column, a card under a centered title, the
   way a sign-in screen reads. The dashboard keeps the left-aligned page layout. */
.signin-page .account-hero { text-align:center; }
.signin-page .account-hero h1 { max-width:none; margin-inline:auto; }
.signin-page .account-hero .page-note { margin-inline:auto; }
.signin { padding:clamp(28px,3.6vw,48px) var(--gutter) clamp(72px,8vw,120px); }
.signin .panel { max-width:520px; margin-inline:auto; }
.signin .panel > h2, .signin .panel > p { text-align:center; }
.signin-form { display:grid; gap:14px; margin-top:22px; }
.signin-form label { display:block; margin-bottom:6px; font-size:15px; font-weight:600; }
.signin-form .action { justify-self:stretch; width:100%; }
.signin-form .form-msg { text-align:center; }
.signin-note { margin-top:20px; color:var(--muted); font-size:15px; }
.signin-note a { color:var(--blue); font-weight:600; }
.dev-link { margin-top:14px; padding:12px 14px; background:#fff3bf; border-radius:var(--radius-sm); font-size:14px; overflow-wrap:anywhere; }

.banner { margin:0 var(--gutter); margin-top:22px; padding:14px 18px; background:#dff5e8; color:#0f4d2e; border-radius:var(--radius-sm); font-weight:600; }
.banner.warn { background:#fff3bf; color:#5c4300; }

.account .sign-out { background:none; border:0; padding:0; color:var(--blue); font-size:15px; font-weight:700; text-decoration:underline; text-underline-offset:5px; text-decoration-thickness:2px; cursor:pointer; }
.empty { margin-top:14px; color:var(--muted); font-size:15px; }
.hidden, .account-page [hidden] { display:none !important; }

/* Visitors page. One filter row scopes everything under it; six headline numbers
   lead (visitors biggest) each with its change on the range before; every chart is
   a single series in the site blue with a table twin; the rest is tables under
   plain group headings. */
.stats-filters { display:flex; flex-wrap:wrap; align-items:center; gap:10px 16px; margin-bottom:22px; }
.range-tabs { display:flex; flex-wrap:wrap; gap:2px; padding:4px; background:var(--white); border-radius:var(--radius-sm); }
.range-tabs button { border:0; background:none; padding:9px 14px; border-radius:4px; font:inherit; font-size:14.5px; font-weight:600; color:var(--muted); cursor:pointer; }
.range-tabs button:hover { color:var(--ink); background:var(--ground); }
.range-tabs button[aria-pressed="true"] { background:var(--ink); color:var(--white); }
.custom-range { display:flex; flex-wrap:wrap; align-items:center; gap:8px 10px; font-size:14.5px; color:var(--muted); }
.custom-range input, .site-pick select { padding:8px 12px; border:1.5px solid #b9bfd2; border-radius:var(--radius-sm); background:var(--white); color:var(--ink); font:inherit; font-size:14.5px; }
.custom-range input:focus-visible, .site-pick select:focus-visible { outline:3px solid var(--ink); outline-offset:2px; border-color:var(--ink); }
.action-xs { min-height:40px; padding:0 16px; font-size:14px; }
.site-pick { margin-left:auto; }
.stats.loading .panel, .messages.loading .panel { opacity:.55; transition:opacity .15s ease; }

.stats-lead { padding-bottom:26px; }
.kpis { display:grid; grid-template-columns:minmax(0,1.5fr) repeat(5, minmax(0,1fr)); gap:18px 22px; align-items:end; }
.kpi { display:flex; flex-direction:column; gap:4px; min-width:0; }
.kpi-label { font-size:13.5px; font-weight:600; color:var(--muted); }
.kpi-value { color:var(--ink); font-size:clamp(1.7rem,2.4vw,2.1rem); font-weight:700; letter-spacing:-.035em; line-height:1.05; }
.kpi-hero .kpi-value { font-size:clamp(2.8rem,5vw,3.8rem); letter-spacing:-.045em; line-height:1; }
.kpi-delta { min-height:1.3em; font-size:13.5px; font-weight:600; color:var(--muted); font-variant-numeric:tabular-nums; }
.kpi-delta.better { color:#0f7a45; }
.kpi-delta.worse { color:#b3261e; }
.kpi-delta.same { font-weight:400; }
.kpi-split { font-size:13.5px; color:var(--muted); }
.map-panel { padding:0; overflow:hidden; }
.map { height:380px; background:var(--ground); }
.map-note { margin:14px 28px 22px; }
.map-panel .map-note:empty { display:none; }
.map-panel .map.hidden + .map-note { margin-top:22px; }
.leaflet-container { font:inherit; }
.leaflet-tooltip { font-size:13.5px; line-height:1.3; }
.stats-lead .hero-sub { margin-top:16px; color:var(--muted); font-size:15px; }
.live-line { display:flex; align-items:center; gap:8px; margin-top:10px; font-size:15px; font-weight:600; color:var(--ink); }
.live-dot { width:9px; height:9px; border-radius:50%; background:#0f7a45; box-shadow:0 0 0 3px #dff5e8; }
.chart-head { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:10px; margin-top:22px; }
.metric-tabs { display:flex; gap:2px; padding:3px; background:var(--ground); border-radius:var(--radius-sm); }
.metric-tabs button { border:0; background:none; padding:6px 12px; border-radius:4px; font:inherit; font-size:13.5px; font-weight:600; color:var(--muted); cursor:pointer; }
.metric-tabs button:hover { color:var(--ink); }
.metric-tabs button[aria-pressed="true"] { background:var(--white); color:var(--ink); box-shadow:0 1px 2px rgba(16,26,46,.08); }
.stats-heading { margin-top:34px; font-size:clamp(1.3rem,2vw,1.6rem); font-weight:700; letter-spacing:-.03em; line-height:1.15; }
.stats-heading + .panel, .stats-heading + .stats-grid { margin-top:14px; }
.actions-panel .panel-lede { margin-top:0; }
.actions-table tr.has-detail td { border-bottom:0; padding-bottom:2px; }
.actions-table tr.detail td { padding-top:0; font-size:13px; color:var(--muted); overflow-wrap:break-word; }
.stats-download { margin-top:18px; }
.stats-download .action { margin:0; }

.chart { position:relative; margin-top:12px; }
.chart-small { margin-top:16px; }
.chart svg { display:block; width:100%; height:auto; overflow:visible; }
.chart .bar { fill:var(--blue); }
.chart .bar.is-hot { fill:var(--blue-deep); }
.chart .hit { fill:transparent; }
.chart .grid { stroke:var(--rule); stroke-width:1; }
.chart .axis { stroke:var(--rule); stroke-width:1; }
.chart .tick { fill:var(--muted); font-size:12.5px; font-variant-numeric:tabular-nums; }
.chart-tip { position:absolute; z-index:2; pointer-events:none; padding:8px 12px; background:var(--ink); color:var(--white); border-radius:var(--radius-sm); font-size:13.5px; line-height:1.3; white-space:nowrap; transform:translate(-50%, calc(-100% - 10px)); }
.chart-tip b { display:block; font-size:15px; }
.chart-table { margin-top:14px; font-size:15px; }
.chart-table summary { cursor:pointer; color:var(--muted); font-weight:600; }
.chart-table .stat-table { max-width:420px; }

.stats-grid { display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:22px; margin-top:22px; }
.stats-grid.two { grid-template-columns:repeat(2, minmax(0,1fr)); }
/* The basic level of the Visitors page (a plan without the full page, or none yet): the parts the
   plan does not unlock are marked data-full in the markup and simply do not show;
   the three headline numbers and the pages panel fill the space. */
.stats.analytics-basic [data-full] { display:none; }
.analytics-basic .kpis { grid-template-columns:minmax(0,1.5fr) repeat(2, minmax(0,1fr)); }
.analytics-basic .stats-grid { grid-template-columns:minmax(0,1fr); }
.upgrade-panel { margin-top:22px; }
.upgrade-panel > p { max-width:64ch; }
.stat-table { width:100%; margin-top:14px; border-collapse:collapse; font-size:15px; }
.stat-table th { padding:0 0 8px; border-bottom:1px solid var(--rule); font-size:13px; font-weight:600; color:var(--muted); text-align:left; }
.stat-table td { padding:9px 0; border-bottom:1px solid var(--ground); vertical-align:top; }
.stat-table tr:last-child td { border-bottom:0; }
.stat-table th.num, .stat-table td.num { padding-left:12px; text-align:right; white-space:nowrap; font-variant-numeric:tabular-nums; }
.stat-table td.num { font-weight:600; }
.stat-table td.num + td.num { color:var(--muted); font-weight:400; }
.stat-table td.name { overflow-wrap:anywhere; }
.stats-note { max-width:72ch; margin-top:26px; }

/* ---- Billing page ---------------------------------------------------------- */
.kpis-billing { grid-template-columns:minmax(0,1.4fr) repeat(3, minmax(0,1fr)); }
.kpi-value.kpi-small { font-size:clamp(1.15rem,1.6vw,1.35rem); letter-spacing:-.02em; padding-top:6px; }
.stats-lead .panel-actions { margin-top:22px; }
.stats-lead .panel-actions:empty { display:none; }
.billing-filters { justify-content:space-between; }
.billing-filters .range-tabs[hidden] { display:none; }
.billing-download { margin-left:auto; }
.billing-download .action { margin:0; }
.panel-link { margin-top:16px; font-size:15px; }
.panel-link a { color:var(--blue); font-weight:600; text-decoration:underline; text-underline-offset:4px; }
.table-scroll { overflow-x:auto; -webkit-overflow-scrolling:touch; }
.billing-table { min-width:640px; }
.billing-table th:nth-child(2) { width:40%; }
.billing-table th, .billing-table td { padding-right:16px; }
.billing-table th:last-child, .billing-table td:last-child { padding-right:0; }
.billing-table th.num, .billing-table td.num { padding-right:22px; }
.billing-table td { vertical-align:middle; }
.billing-table td small { display:block; margin-top:2px; color:var(--muted); font-size:13px; }
.billing-table td.date { white-space:nowrap; color:var(--muted); }
.billing-table tr.is-open td.date { color:var(--ink); font-weight:600; }
.billing-table td.num { font-size:16px; }
.billing-table a { color:var(--blue); font-weight:600; text-decoration:underline; text-underline-offset:4px; }
.pill { display:inline-block; padding:3px 9px; border-radius:999px; background:var(--ground); color:var(--muted); font-size:12.5px; font-weight:600; white-space:nowrap; }
.pill-ok { background:#dff5e8; color:#0f4d2e; }
.pill-open { background:#dfe5ff; color:#1f2f6b; }
.pill-warn { background:#fff3bf; color:#5c4300; }
.link-button { background:none; border:0; padding:0; color:var(--blue); font:inherit; font-size:15px; font-weight:600; text-decoration:underline; text-underline-offset:4px; cursor:pointer; }
.signin-form[hidden] { display:none; }
.code-form { margin-top:18px; padding-top:18px; border-top:1px solid var(--rule); }
.code-form input { letter-spacing:.14em; font-size:20px; font-variant-numeric:tabular-nums; }
.visually-hidden { position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }

/* ---- Receipt page ---------------------------------------------------------- */
.receipt .receipt-sheet { max-width:680px; margin-inline:auto; }
.receipt-head { display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap; }
.receipt-from { font-size:15px; line-height:1.5; color:var(--muted); }
.receipt-from b { color:var(--ink); font-size:18px; }
.receipt-meta p { display:grid; grid-template-columns:auto auto; gap:2px 14px; font-size:15px; text-align:right; }
.receipt-meta p + p { margin-top:4px; }
.receipt-meta span { color:var(--muted); }
.receipt-meta b { font-variant-numeric:tabular-nums; }
.receipt-to { margin-top:26px; }
.receipt-lines { margin-top:26px; }
.receipt-lines th:first-child, .receipt-lines td:first-child { padding-right:16px; }
.receipt-lines td small { display:block; margin-top:2px; color:var(--muted); font-size:13px; }
.receipt-lines tfoot td { padding-top:12px; border-top:1px solid var(--rule); border-bottom:0; font-size:17px; }
.receipt-lines tfoot tr:first-child td { border-top:1px solid var(--rule); }
.receipt-lines tfoot tr + tr td { border-top:0; padding-top:4px; }
.receipt-how { margin-top:22px; }
.receipt-note { margin-top:26px; color:var(--muted); font-size:14px; }
.receipt .panel-actions .action { margin:0; }

/* ---- Account page ---------------------------------------------------------- */
.settings-form { display:grid; gap:16px; margin-top:20px; }
.settings-form label { display:block; margin-bottom:6px; font-size:15px; font-weight:600; }
.settings-form .hint { margin-top:6px; color:var(--muted); font-size:14px; }
.settings-form input[readonly] { background:var(--ground); color:var(--muted); border-color:transparent; }
.settings-form .check { display:flex; align-items:flex-start; gap:12px; font-size:15px; }
.settings-form .check input { width:20px; height:20px; margin:2px 0 0; padding:0; accent-color:var(--blue); flex:0 0 auto; }
.settings-form .check label { margin:0; font-weight:500; }
.settings-form .check .hint { margin-top:2px; }
.settings-form .form-row { display:flex; flex-wrap:wrap; align-items:center; gap:10px 16px; }
.settings-form .form-row .action { margin:0; }
.settings-form .form-row .form-msg { margin:0; }
.session-list { margin-top:16px; }
.session-list li { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:4px 14px; align-items:center; padding:13px 0; border-top:1px solid var(--rule); font-size:15px; }
.session-list li:first-child { border-top:0; padding-top:4px; }
.session-list b { font-weight:600; }
.session-list small { display:block; margin-top:2px; color:var(--muted); font-size:13.5px; }
.site-settings { margin-top:22px; }
.site-settings + .site-settings { margin-top:26px; padding-top:22px; border-top:1px solid var(--rule); }
.site-settings h3 { font-size:17px; font-weight:600; letter-spacing:-.02em; }

/* ---- Messages page --------------------------------------------------------- */
.msg-filters { justify-content:space-between; }
.msg-list { margin-top:8px; }
.msg-list li { padding:20px 0 22px; border-top:1px solid var(--rule); }
.msg-list li:first-child { border-top:0; padding-top:10px; }
.msg-head { display:flex; flex-wrap:wrap; justify-content:space-between; align-items:baseline; gap:6px 16px; }
.msg-who { display:flex; flex-wrap:wrap; align-items:baseline; gap:6px 12px; font-size:17px; font-weight:600; letter-spacing:-.01em; }
.msg-when { color:var(--muted); font-size:14px; white-space:nowrap; }
.msg-contact { margin-top:6px; font-size:15px; }
.msg-contact a { color:var(--blue); font-weight:600; text-decoration:underline; text-underline-offset:4px; }
.msg-contact > * + *::before { content:' · '; color:var(--muted); }
.msg-body { margin-top:10px; max-width:72ch; white-space:pre-line; overflow-wrap:anywhere; }
.msg-foot { margin-top:10px; color:var(--muted); font-size:13.5px; }
.msg-foot.failed { color:#a7192f; font-weight:600; }
.msg-count { margin-top:10px; color:var(--muted); font-size:15px; }

@media print {
  .site-header, .site-footer, .skip-link, .lead, .banner, .no-print, .nav-toggle { display:none !important; }
  body, .account-page { background:#fff !important; color:#000; }
  .account, .receipt { padding:0 !important; }
  .receipt .receipt-sheet { max-width:none; margin:0; padding:0 !important; border-radius:0; box-shadow:none; }
  .receipt-lines th, .receipt-lines td { border-color:#ccc; }
  a { color:inherit; text-decoration:none; }
}

@media (max-width:960px) {
  .account-grid { grid-template-columns:minmax(0,1fr); }
  .stats-grid { grid-template-columns:repeat(2, minmax(0,1fr)); }
  .kpis { grid-template-columns:repeat(3, minmax(0,1fr)); }
  .analytics-basic .kpis { grid-template-columns:repeat(2, minmax(0,1fr)); }
  .kpi-hero { grid-column:1 / -1; }
  .kpis-billing { grid-template-columns:repeat(3, minmax(0,1fr)); }
}
@media (max-width:760px) {
  .account-hero { padding:36px 18px 32px; }
  /* Five tabs do not fit a phone in one row; wrap to two rather than cut one off. */
  .account-nav { flex-wrap:wrap; gap:0 22px; padding:4px 18px 0; overflow:visible; }
  .account-nav a { padding:12px 0 11px; font-size:14.5px; }
  .session-list li { grid-template-columns:minmax(0,1fr); }
  .msg-filters .range-tabs { width:100%; }
  .account, .signin { padding-left:18px; padding-right:18px; }
  .panel { padding:22px 20px 24px; }
  .facts { grid-template-columns:minmax(0,1fr); gap:2px 0; }
  .facts dt { margin-top:10px; }
  .facts dt:first-child { margin-top:0; }
  .money-list li { grid-template-columns:minmax(0,1fr); }
  .money-list .amount { text-align:left; }
  .care-options li { grid-template-columns:minmax(0,1fr); }
  .care-options .action { grid-row:auto; margin-top:8px; }
  .banner { margin-left:18px; margin-right:18px; }
  .stats-grid, .stats-grid.two { grid-template-columns:minmax(0,1fr); gap:16px; }
  .kpis, .kpis-billing { grid-template-columns:repeat(2, minmax(0,1fr)); gap:16px 14px; }
  .billing-download { margin-left:0; width:100%; }
  .billing-download .action { width:100%; }
  .receipt-meta p { text-align:left; }
  /* Each invoice as a small card: date and status up top, what it was, then the
     amount beside the card, and the receipt link last. */
  .billing-table { min-width:0; }
  .billing-table thead { display:none; }
  .billing-table tr { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:4px 14px; align-items:center; padding:14px 0; border-bottom:1px solid var(--ground); }
  .billing-table tr:last-child { border-bottom:0; }
  .billing-table td, .billing-table th { display:block; padding:0; border:0; }
  .billing-table td.date { grid-area:1 / 1; font-size:13.5px; }
  .billing-table td.date small { display:inline; margin-left:4px; }
  .billing-table td.status { grid-area:1 / 2; justify-self:end; }
  .billing-table td.name { grid-area:2 / 1 / 3 / 3; font-weight:500; }
  .billing-table td.num { grid-area:3 / 1; padding-left:0; text-align:left; font-size:18px; }
  .billing-table td.card { grid-area:3 / 2; justify-self:end; color:var(--muted); font-size:13.5px; }
  .billing-table td.receipt { grid-area:4 / 1 / 5 / 3; }
  .billing-table td.receipt:empty { display:none; }
  .kpi-hero .kpi-value { font-size:2.6rem; }
  .map { height:300px; }
  .map-note { margin:12px 20px 18px; }
  .metric-tabs { width:100%; }
  .metric-tabs button { flex:1 1 auto; padding:7px 6px; font-size:13px; }
  .range-tabs { width:100%; }
  .range-tabs button { flex:1 1 auto; padding:9px 10px; font-size:14px; }
  .site-pick { margin-left:0; width:100%; }
  .site-pick select { width:100%; }
  .hero-figure { font-size:2.6rem; }
}