/* ==========================================================================
   Onyx Insights public homepage, in Onyx Next (the design prototype's home.html, built on the product's own layer).
   Tokens, buttons, chips, status pills, badges, provenance chips, sparklines and the chart primitives come from
   /assets/next/next.css (linked first), so the public site and the signed-in app share one product language. This
   file holds only the page layout.
   Dark-first with a light theme (the rule is theme.js). Every colour is a token, so both themes follow.
   Motion is transform and opacity only, never under prefers-reduced-motion, and never needed to read the page:
   every section is visible without script (controls that need script appear with html.js / html.hm-ready).
   ========================================================================== */

:root {
  --font-display: "Geist", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body: "Geist", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --hm-nav-h: 64px;
  --hm-wrap: 1240px;
  --hm-gutter: 24px;
  --hm-sec: clamp(72px, 9vw, 128px);
  --hm-ease: cubic-bezier(0.16, 1, 0.3, 1);
}

* { box-sizing: border-box; }
html { scroll-padding-top: calc(var(--hm-nav-h) + 16px); }
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}
body { margin: 0; font-family: var(--font-body); font-size: 16px; line-height: 1.55; overflow-x: clip; }
h1, h2, h3, p, ul, ol, figure, pre { margin: 0; padding: 0; }
ul, ol { list-style: none; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; height: auto; }
button { font: inherit; }

.skip-link {
  position: absolute; left: 12px; top: -56px; z-index: 60; padding: 10px 14px;
  background: var(--s1); color: var(--ink); border: 1px solid var(--hairline-strong); border-radius: var(--r-ctl);
}
.skip-link:focus { top: 12px; }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.hm-wrap { width: 100%; max-width: var(--hm-wrap); margin: 0 auto; padding-inline: var(--hm-gutter); }
.hm-spacer { flex: 1; }
.hm-right { margin-left: auto; }
.hm-muted { color: var(--ink-3); }

/* ---------- Type ---------- */
.hm-h1 { font-size: clamp(34px, 3.9vw, 56px); line-height: 1.04; letter-spacing: -0.045em; font-weight: 600; }
.hm-line { display: block; }
.hm-accent { color: var(--accent); }
.hm-kicker { display: flex; align-items: center; gap: 10px; color: var(--ink-3); font-size: 12px; line-height: 1.3; font-weight: 650; letter-spacing: 0.11em; text-transform: uppercase; }
.hm-kicker::before { content: ""; width: 22px; height: 2px; flex: none; background: var(--accent); border-radius: 2px; }
.nowrap { white-space: nowrap; }
.hm-h2 { font-size: clamp(30px, 3.4vw, 46px); line-height: 1.06; letter-spacing: -0.04em; font-weight: 600; text-wrap: balance; }
.hm-lead { font-size: clamp(17px, 1.35vw, 19px); line-height: 1.5; color: var(--ink-2); max-width: 56ch; text-wrap: pretty; }
.hm-sub { margin-top: 16px; font-size: 18px; line-height: 1.5; color: var(--ink-2); max-width: 56ch; text-wrap: pretty; }
.hm-note { display: flex; align-items: center; gap: 8px; font-size: 13px; line-height: 1.4; color: var(--ink-3); }
.hm-note .ph { font-size: 15px; }

/* ---------- Sections ---------- */
.hm-sec { padding-block: var(--hm-sec); }
.hm-sec-tight { padding-top: 0; }
.hm-head { max-width: 720px; margin-bottom: clamp(32px, 4vw, 56px); }
.hm-band { background: var(--s1); border-block: 1px solid var(--hairline); }
.hm-i1 { --i: 1; }
.hm-i2 { --i: 2; }

/* ---------- Illustrative brand stories ---------- */
.hm-brand-stories { padding-block: clamp(56px, 7vw, 96px); background: var(--s1); border-block: 1px solid var(--hairline); }
.hm-brand-stories-heading { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(260px, 0.85fr); align-items: end; gap: 32px; }
.hm-brand-stories-heading .hm-h2 { max-width: 19ch; margin-top: 14px; }
.hm-brand-stories-intro { max-width: 48ch; color: var(--ink-2); }
.hm-brand-stories-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 32px; }
.hm-brand-story { min-width: 0; padding: 24px; border: 1px solid var(--hairline); border-radius: var(--r-panel); background: var(--canvas); box-shadow: inset 0 1px 0 var(--edge-hi); }
.hm-brand-story-brand { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.hm-brand-story-name { color: var(--ink); font-size: 16px; font-weight: 650; letter-spacing: -0.02em; }
.hm-brand-story-sector { padding: 3px 9px; border: 1px solid var(--hairline); border-radius: 999px; color: var(--ink-3); font-size: 11px; line-height: 1.4; }
.hm-brand-story h3 { margin-top: 18px; color: var(--ink); font-size: 20px; line-height: 1.2; letter-spacing: -0.025em; font-weight: 570; }
.hm-brand-story-evidence { display: grid; gap: 0; margin-top: 18px; border-top: 1px solid var(--hairline); }
.hm-brand-story-evidence li { display: grid; grid-template-columns: 82px minmax(0, 1fr); gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--hairline); }
.hm-brand-story-evidence b { color: var(--accent); font-size: 11px; font-weight: 650; }
.hm-brand-story-evidence span { color: var(--ink-2); font-size: 13px; line-height: 1.45; }
.hm-brand-stories-disclaimer { margin-top: 18px; color: var(--ink-3); font-size: 12px; line-height: 1.5; }

/* ---------- Buttons: the product's own, a little larger for a landing page ---------- */
.hm-btn { transition: transform 0.4s var(--hm-ease), background 0.12s, border-color 0.12s; }
.hm-btn:hover { transform: translateY(-2px); }
.hm-btn:active { transform: translateY(1px) scale(0.98); transition-duration: 0.08s; }
.hm-btn .ph { transition: transform 0.4s var(--hm-ease); }
.hm-btn:hover .ph-arrow-right, .hm-btn:hover .ph-arrow-up-right { transform: translateX(4px); }
.hm-btn-lg { min-height: 48px; padding: 0 20px; font-size: 15px; white-space: nowrap; }
.primary-btn.hm-btn { box-shadow: inset 0 1px 0 var(--edge-hi); }

/* ---------- Navigation ---------- */
.hm-nav {
  position: sticky; top: 0; z-index: 30; min-height: var(--hm-nav-h);
  background: color-mix(in srgb, var(--canvas) 86%, transparent);
  backdrop-filter: blur(12px) saturate(1.2); -webkit-backdrop-filter: blur(12px) saturate(1.2);
  border-bottom: 1px solid var(--hairline);
}
.hm-nav-in { display: flex; align-items: center; gap: 24px; min-height: var(--hm-nav-h); }
.hm-brand { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; flex: none; font-weight: 600; font-size: 15px; letter-spacing: -0.02em; color: var(--ink); }
/* Emblem: a crop of the existing logo poster, the same one the app sidebar uses. */
.hm-emblem {
  --em: 28px; width: var(--em); height: var(--em); flex: none; border-radius: var(--r-ctl);
  background: var(--canvas) url("/assets/logo-onyx-insights.jpg") no-repeat;
  background-size: calc(var(--em) * 101 / 28) auto;
  background-position: calc(var(--em) * -37 / 28) calc(var(--em) * -13 / 28);
  border: 1px solid var(--hairline-strong);
}
.hm-panel { display: flex; align-items: center; flex: 1; gap: 24px; min-width: 0; }
.hm-links { display: flex; gap: 2px; }
.hm-links a {
  display: inline-flex; align-items: center; min-height: 36px; padding: 0 12px; border-radius: var(--r-ctl);
  color: var(--ink-2); font-weight: 500; font-size: 14.5px; transition: color 0.12s, background 0.12s;
}
.hm-links a:hover { color: var(--ink); background: var(--s2); }
.hm-tools { margin-left: auto; display: flex; align-items: center; gap: 4px; }
.hm-nav .ghost-btn { background: transparent; border-color: transparent; }
.hm-nav .ghost-btn:hover { background: var(--s2); border-color: var(--hairline-strong); }
.hm-icon-btn { min-width: 36px; padding: 0; font-size: 17px; }
.hm-theme { display: none; }
.js .hm-theme { display: inline-flex; }
.hm-theme .ph::before { content: "\e472"; }                              /* sun: shown in dark, offers light */
html[data-theme="light"] .hm-theme .ph::before { content: "\e330"; }      /* moon: shown in light, offers dark */
.hm-menu { display: none; }
.hm-cta-short { display: none; }

/* ---------- Hero: asymmetric split, the sample workspace's Overview bleeds off the right and bottom edges ---------- */
.hm-hero {
  --hm-hero-h: clamp(600px, calc(100dvh - var(--hm-nav-h)), 780px);
  display: grid; grid-template-columns: minmax(0, 560px) minmax(0, 1fr); column-gap: 48px; height: var(--hm-hero-h);
  padding: 56px 0 0 max(var(--hm-gutter), calc((100% - var(--hm-wrap)) / 2 + var(--hm-gutter)));
  overflow: hidden;
}
.hm-hero-copy { align-self: center; padding-bottom: 56px; display: flex; flex-direction: column; align-items: flex-start; gap: 24px; min-width: 0; }
.hm-hero-copy .hm-lead { max-width: 44ch; }
.hm-hero-note { margin-top: -10px; }
.hm-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.hm-hero-copy .hm-actions { margin-top: 8px; }
.hm-hero-shot { display: flex; flex-direction: column; gap: 12px; min-width: 0; min-height: 0; }
.hm-hero-shot .hm-note { padding-bottom: 2px; }
/* The Overview is clipped at the right and the bottom; both edges fade so no glyph is cut mid-stroke. overflow: clip,
   not hidden: a clipped box is not a scroll container, so focusing or clicking a control near the edge can never
   scroll the panel sideways. The controls (the trend tabs, the provenance chip) sit in the part that is always visible. */
.hm-crop {
  position: relative; flex: 1; min-height: 0; overflow: clip; background: var(--canvas);
  border: 1px solid var(--hairline-strong); border-right: 0; border-bottom: 0; border-top-left-radius: var(--r-frame);
  -webkit-mask-image: linear-gradient(to bottom, black calc(100% - 80px), transparent), linear-gradient(to right, black calc(100% - 72px), transparent);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to bottom, black calc(100% - 80px), transparent), linear-gradient(to right, black calc(100% - 72px), transparent);
  mask-composite: intersect;
}

/* The sample workspace: the Overview page's own panels, labelled as sample data. */
.hm-ws { container-type: inline-size; width: max(100%, 860px); background: var(--canvas); font-size: 13px; line-height: 1.45; }
.hm-ws-bar {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-height: 52px; padding: 8px 20px;
  background: color-mix(in srgb, var(--canvas) 86%, transparent); border-bottom: 1px solid var(--hairline);
}
.hm-ws-name { display: inline-flex; align-items: center; gap: 10px; font-weight: 600; font-size: 14px; letter-spacing: -0.01em; }
.hm-ws-name .hm-emblem { --em: 26px; }
.hm-ws-env { padding: 1px 8px; border-radius: 99px; background: var(--s3); color: var(--ink-2); border: 1px solid var(--hairline-strong); font-size: 11.5px; font-weight: 500; }
.hm-ws-body { display: grid; gap: 14px; padding: 20px 24px 24px; }
.hm-ws-title { font-size: 26px; line-height: 1.15; letter-spacing: -0.03em; font-weight: 600; }
.hm-ws-sub { margin-top: 4px; color: var(--ink-3); font-size: 13.5px; }
.hm-box { background: var(--s1); border: 1px solid var(--hairline); border-radius: var(--r-panel); padding: 14px 16px; min-width: 0; box-shadow: inset 0 1px 0 var(--edge-hi); }
.hm-box-title { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; font-size: 13.5px; font-weight: 600; letter-spacing: -0.01em; }

.hm-verdict { display: grid; gap: 16px; padding: 20px; }
.hm-verdict-main { display: flex; gap: 16px; align-items: flex-start; min-width: 0; }
.hm-verdict-icon { width: 44px; height: 44px; flex: none; border-radius: var(--r-panel); display: grid; place-items: center; font-size: 24px; background: var(--crit-soft); color: var(--crit); }
.hm-verdict-title { font-size: 24px; line-height: 1.15; font-weight: 600; letter-spacing: -0.03em; }
.hm-verdict-text { margin-top: 6px; color: var(--ink-2); font-size: 13.5px; max-width: 64ch; text-wrap: pretty; }
.hm-asof { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 12px; font-size: 12.5px; color: var(--ink-3); }
.hm-vstats { display: flex; flex-wrap: wrap; gap: 16px 28px; padding-top: 16px; border-top: 1px solid var(--hairline); }
.hm-vstat { display: flex; flex-direction: column; gap: 4px; }
.hm-vstat b { font-size: 26px; line-height: 1; font-weight: 550; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.hm-vstat span { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: var(--ink-3); white-space: nowrap; }
.hm-vstat.is-ok b { color: var(--ok); }
.hm-vstat.is-warn b { color: var(--warn); }
.hm-vstat.is-crit b { color: var(--crit); }

.hm-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.hm-kpi { display: flex; flex-direction: column; gap: 6px; }
.hm-kpi-top { display: flex; align-items: center; gap: 8px; color: var(--ink-3); font-size: 12.5px; font-weight: 500; }
.hm-kpi-value { font-size: 30px; line-height: 1.1; letter-spacing: -0.035em; font-weight: 550; font-variant-numeric: tabular-nums; }
.hm-kpi-value small { margin-left: 2px; font-size: 14px; letter-spacing: 0; color: var(--ink-3); font-weight: 450; }
.hm-kpi-sub { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 12.5px; color: var(--ink-3); }
.hm-kpi .spark { margin-top: 4px; }

.hm-trend { padding: 14px 16px 12px; }
.hm-trend-head { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; margin-bottom: 10px; }   /* tabs under the title: always inside the visible part of the crop */
.hm-trend [role="tabpanel"][hidden] { display: none; }
.hm-trend-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: 10px; font-size: 12px; color: var(--ink-3); }

/* ---------- Photos: one on-brand treatment, CSS only (grayscale, contrast, accent tint); both themes are tokens ---------- */
.hm-photo { position: relative; overflow: hidden; background: var(--canvas); isolation: isolate; }
.hm-photo img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.18) brightness(var(--ph-b, 0.85)); }
.hm-photo::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(140deg, var(--accent) 0%, color-mix(in srgb, var(--accent) 35%, var(--canvas)) 100%); mix-blend-mode: color; opacity: 0.9; }

/* ---------- Product bento: five cells, two of them the sample workspace's own panels ---------- */
.hm-bento { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 16px; }
.hm-cell {
  position: relative; display: flex; flex-direction: column; min-width: 0; overflow: hidden;
  background: var(--s1); border: 1px solid var(--hairline); border-radius: var(--r-frame); box-shadow: inset 0 1px 0 var(--edge-hi);
}
.hm-cell-text h3 { font-size: 22px; line-height: 1.15; letter-spacing: -0.03em; font-weight: 600; text-wrap: balance; }
.hm-cell-text p { margin-top: 10px; color: var(--ink-2); font-size: 15.5px; line-height: 1.5; max-width: 46ch; text-wrap: pretty; }
.hm-cell-text { padding: 28px; }
.hm-cell--shot .hm-cell-text { padding-bottom: 0; }
.hm-cell--shot .hm-frame { flex: 1; margin: 24px 0 0 28px; border-right: 0; border-bottom: 0; border-radius: var(--r-panel) 0 0 0; }
.hm-cell-a { grid-column: 1 / span 8; grid-row: 1; }
.hm-cell-b { grid-column: 9 / span 4; grid-row: 1 / span 2; }
.hm-cell-a .hm-frame { min-height: 400px; }
.hm-cell-b .hm-frame { min-height: 560px; }
.hm-cell-c { grid-column: 1 / span 3; grid-row: 2; padding: 28px; background: var(--accent-soft); border-color: var(--accent-line); justify-content: space-between; gap: 32px; }
.hm-cell-c .hm-cell-text { padding: 0; }
.hm-cell-icon { width: 48px; height: 48px; border-radius: var(--r-panel); display: grid; place-items: center; font-size: 26px; background: var(--accent); color: var(--accent-ink); }
.hm-cell-d { grid-column: 4 / span 5; grid-row: 2; }
.hm-cell-d .hm-photo { height: 150px; flex: none; border-bottom: 1px solid var(--hairline); --ph-b: 0.62; }
.hm-cell-d .hm-photo img { object-position: 50% 42%; }
.hm-cell-e { grid-column: 1 / -1; grid-row: 3; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); min-height: 300px; }
.hm-cell-e .hm-cell-text { align-self: center; padding: 40px; }
.hm-cell-e .hm-photo { min-height: 100%; }
.hm-cell-e .hm-photo::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(to right, var(--s1) 0%, transparent 38%); }
.hm-bento-note { margin-top: 24px; }

/* product frames: the sample pages' own panels at reading size */
.hm-frame { background: var(--canvas); border: 1px solid var(--hairline-strong); border-radius: var(--r-panel); overflow: hidden; font-size: 13px; line-height: 1.45; }
.hm-frame-bar { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 6px 14px; flex-wrap: wrap; background: var(--s1); border-bottom: 1px solid var(--hairline); }
.hm-frame-title { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; font-size: 13.5px; letter-spacing: -0.01em; }
.hm-frame-title .ph { color: var(--ink-3); font-size: 16px; }
.hm-frame-sub { color: var(--ink-3); font-size: 12.5px; }

.hm-qs-body { display: grid; gap: 12px; padding: 14px; }
.hm-code { padding: 12px 14px; background: var(--s1); border: 1px solid var(--hairline); border-radius: var(--r-ctl); font-family: var(--font-mono); font-size: 12.5px; line-height: 1.7; white-space: pre; overflow-x: auto; color: var(--ink); }
.hm-qs-result { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; padding: 12px 14px; background: var(--s1); border: 1px solid var(--hairline); border-radius: var(--r-ctl); }
.hm-qs-big { font-size: 34px; line-height: 1; letter-spacing: -0.04em; font-weight: 550; font-variant-numeric: tabular-nums; color: var(--warn); }
.hm-qs-big small { font-size: 15px; letter-spacing: 0; margin-left: 2px; }
.hm-qs-line { font-size: 14px; font-weight: 550; }
.hm-qs-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 4px; font-size: 12px; color: var(--ink-3); }
.hm-qs-result .prov { margin-left: auto; }
.hm-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 12.5px; background: var(--s1); border: 1px solid var(--hairline); border-radius: var(--r-ctl); overflow: hidden; }
.hm-table th { text-align: left; font-weight: 500; font-size: 11.5px; color: var(--ink-3); padding: 8px 12px; border-bottom: 1px solid var(--hairline); white-space: nowrap; }
.hm-table td { padding: 10px 12px; }
.hm-table .cell-num { text-align: right; font-family: var(--font-mono); font-variant-numeric: tabular-nums; white-space: nowrap; }
.hm-sub-role { margin-left: 6px; color: var(--ink-3); font-size: 11.5px; font-family: var(--font-mono); }

.hm-subhead { display: flex; align-items: center; gap: 8px; padding: 9px 14px; font-size: 12px; font-weight: 500; color: var(--ink-3); background: var(--s2); border-bottom: 1px solid var(--hairline); }
.hm-feed { background: var(--s1); }
.hm-feed li { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border-bottom: 1px solid var(--hairline); }
.hm-feed > li > .ph, .hm-feed > li > .ph-fill { font-size: 18px; margin-top: 2px; color: var(--ink-3); }
.hm-feed .is-crit { color: var(--crit); }
.hm-feed .is-warn { color: var(--warn); }
.hm-feed-title { font-size: 13.5px; font-weight: 550; line-height: 1.35; }
.hm-feed-sub { margin-top: 2px; color: var(--ink-3); font-size: 12.5px; }
.hm-slos { display: grid; gap: 12px; padding: 6px 14px 14px; background: var(--s1); }
.hm-slos li { display: grid; grid-template-columns: minmax(0, 1fr) 84px; gap: 12px; align-items: center; }

/* ---------- Industries ---------- */
.industry-filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 24px; }
.industry-chip {
  flex: 0 0 auto; min-height: 36px; padding: 0 14px; border-radius: 99px; cursor: pointer; font-size: 13.5px; font-weight: 500;
  background: var(--s2); color: var(--ink-2); border: 1px solid var(--hairline-strong); transition: background 0.12s, color 0.12s, border-color 0.12s;
}
.industry-chip:hover { background: var(--s3); color: var(--ink); border-color: var(--hairline-hi); }
.industry-chip.is-active { background: var(--ink); color: var(--canvas); border-color: var(--ink); }
.industry-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }
.industry-card { padding: 20px; background: var(--canvas); border: 1px solid var(--hairline); border-radius: var(--r-panel); transition: border-color 0.12s; }
.industry-card:hover { border-color: var(--hairline-hi); }
.industry-card h3 { font-size: 16px; line-height: 1.25; letter-spacing: -0.02em; font-weight: 600; margin-bottom: 8px; }
.industry-card p { color: var(--ink-3); font-size: 14px; line-height: 1.5; }
.industry-grid.is-collapsed .industry-card:nth-child(n + 9) { display: none; }
.industry-card[hidden] { display: none; }
.hm-more { margin-top: 24px; }
.hm-more [hidden] { display: none; }

/* ---------- One counting rule: full-width band, one figure, one definition ---------- */
.hm-rule { background: var(--s1); border-block: 1px solid var(--hairline); }
.hm-rule-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(40px, 6vw, 96px); align-items: start; }
.hm-fig { margin-top: clamp(32px, 4vw, 48px); display: flex; flex-direction: column; gap: 12px; }
.hm-fig-big { font-size: clamp(56px, 7.2vw, 104px); line-height: 0.95; letter-spacing: -0.055em; font-weight: 550; font-variant-numeric: tabular-nums; white-space: nowrap; }
.hm-fig-big .of { font-size: 0.4em; letter-spacing: -0.02em; color: var(--ink-3); margin: 0 0.04em; font-weight: 450; }
.hm-fig-cap { color: var(--ink-2); font-size: 15.5px; line-height: 1.45; }
.hm-fig-cap b { font-weight: 600; color: var(--ink); }
.hm-rule .pop { margin-top: 4px; }
.hm-rule .pop-card { width: min(340px, 86vw); }
.hm-ledger-title { font-size: 15px; font-weight: 600; letter-spacing: -0.01em; margin-bottom: 8px; }
.hm-ledger { border-top: 1px solid var(--hairline-strong); }
.hm-ledger li { border-bottom: 1px solid var(--hairline); }
.hm-ledger a { display: grid; grid-template-columns: minmax(0, 1fr) auto auto 20px; align-items: center; gap: 16px; min-height: 64px; padding: 8px 4px; transition: background 0.12s, padding 0.3s var(--hm-ease); }
.hm-ledger a:hover { background: var(--s2); padding-inline: 12px; }
.hm-l-name { display: flex; align-items: center; gap: 12px; font-weight: 550; font-size: 16px; }
.hm-l-name .ph { font-size: 20px; color: var(--ink-3); }
.hm-l-val { font-size: 20px; letter-spacing: -0.03em; font-weight: 550; font-variant-numeric: tabular-nums; white-space: nowrap; }
.hm-l-pct { color: var(--ink-3); font-size: 13px; white-space: nowrap; min-width: 52px; text-align: right; }
.hm-l-go { color: var(--ink-3); font-size: 18px; transition: transform 0.3s var(--hm-ease), color 0.12s; }
.hm-ledger a:hover .hm-l-go { transform: translate(2px, -2px); color: var(--ink); }
.hm-compare { margin-top: 40px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 clamp(24px, 4vw, 48px); }
.hm-cmp { padding-top: 20px; border-top: 1px solid var(--hairline-strong); }
.hm-cmp h3 { display: flex; align-items: center; gap: 10px; font-size: 15px; font-weight: 600; letter-spacing: -0.01em; }
.hm-cmp h3 .ph { font-size: 20px; color: var(--ink-3); }
.hm-cmp ul { margin-top: 14px; display: flex; flex-direction: column; gap: 10px; color: var(--ink-2); font-size: 15px; line-height: 1.45; }
.hm-cmp p { margin-top: 14px; font-size: 15px; color: var(--ink-2); }

/* ---------- Featured incident story: a step list drives the sample investigation ---------- */
.hm-story { background: var(--s1); border-block: 1px solid var(--hairline); }
.hm-ask { display: grid; grid-template-columns: minmax(0, 7.4fr) minmax(0, 4.6fr); gap: clamp(32px, 5vw, 80px); align-items: start; }
.hm-ask-copy { position: sticky; top: calc(var(--hm-nav-h) + 40px); }
/* the step list is script only: without it the four panels simply follow one another */
.hm-steps { display: none; }
.js .hm-steps { display: flex; flex-direction: column; margin: 32px 0 28px; border-left: 1px solid var(--hairline-strong); }
.hm-step {
  position: relative; display: flex; gap: 14px; align-items: flex-start; text-align: left; width: 100%;
  padding: 14px 8px 14px 22px; border: 0; background: transparent; cursor: pointer; color: var(--ink-3); border-radius: 0 var(--r-ctl) var(--r-ctl) 0;
  transition: background 0.12s, color 0.12s;
}
.hm-step::before { content: ""; position: absolute; left: -1px; top: 10px; bottom: 10px; width: 2px; background: var(--accent); transform: scaleY(0); transform-origin: top; transition: transform 0.4s var(--hm-ease); }
.hm-step:hover { background: var(--s2); }
.hm-step[aria-selected="true"]::before { transform: scaleY(1); }
.hm-step > .ph { font-size: 22px; margin-top: 2px; color: var(--ink-3); transition: color 0.12s; }
.hm-step[aria-selected="true"] > .ph { color: var(--accent); }
.hm-step-title { display: block; font-size: 17px; font-weight: 600; letter-spacing: -0.02em; color: var(--ink-2); }
.hm-step[aria-selected="true"] .hm-step-title { color: var(--ink); }
.hm-step-desc { display: block; margin-top: 4px; font-size: 15px; line-height: 1.45; color: var(--ink-3); }
.hm-step[aria-selected="true"] .hm-step-desc { color: var(--ink-2); }
.hm-ask-copy .hm-sub { max-width: 44ch; }
.hm-ask-copy > .secondary-btn { margin-top: 0; }
.hm-ask-shot { display: flex; flex-direction: column; gap: 12px; min-width: 0; position: sticky; top: calc(var(--hm-nav-h) + 40px); }
.hm-ask-frame { min-height: 440px; background: var(--canvas); border: 1px solid var(--hairline-strong); border-radius: var(--r-frame); overflow: hidden; font-size: 13px; line-height: 1.45; }
.hm-ask-frame .hm-frame-bar { padding-inline: 18px; }
.js .hm-ask:not(.is-ready) .hm-inv:not(#ask-p1) { display: none; }   /* the first paint matches the ready state */
.hm-inv[hidden] { display: none; }
.hm-inv:focus-visible { outline-offset: -4px; }
.hm-inv { display: grid; gap: 14px; padding: 18px; }
.hm-inv-label { font-size: 12.5px; font-weight: 500; color: var(--ink-2); }
.hm-inv-eyebrow { font-size: 12px; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-3); }
.hm-inv-composer { display: flex; gap: 8px; align-items: stretch; }
.hm-inv-q { flex: 1; min-width: 0; display: flex; align-items: center; min-height: 48px; padding: 10px 12px; background: var(--s1); border: 1px solid var(--hairline-strong); border-radius: var(--r-ctl); font-size: 14px; }
.hm-inv-ask { min-height: 48px; }
.hm-inv-help { font-size: 12px; color: var(--ink-3); }
.hm-inv-scope { display: flex; flex-wrap: wrap; gap: 6px; }
.hm-inv-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; font-size: 14px; font-weight: 600; }
.hm-inv-answer { font-size: 17px; line-height: 1.45; letter-spacing: -0.015em; font-weight: 450; max-width: 60ch; }
.hm-inv-conf { display: grid; gap: 6px; padding: 12px 14px; background: var(--s1); border: 1px solid var(--hairline-strong); border-radius: var(--r-panel); }
.hm-inv-conf p { color: var(--ink-2); font-size: 13px; max-width: 70ch; }
.hm-inv-conf-head { display: flex; align-items: center; gap: 10px; font-weight: 550; color: var(--ink); }
.hm-inv-meter { display: inline-flex; gap: 3px; }
.hm-inv-meter i { display: block; width: 16px; height: 6px; border-radius: 2px; background: var(--s4); }
.hm-inv-meter i.on { background: var(--accent); }
.hm-inv-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.hm-inv-chip { display: inline-flex; align-items: center; gap: 8px; min-height: 32px; padding: 4px 10px; border-radius: 6px; font-size: 12.5px; background: var(--s1); border: 1px solid var(--hairline-strong); color: var(--ink); transition: border-color 0.12s, background 0.12s; }
.hm-inv-chip .ph { color: var(--accent); font-size: 14px; }
.hm-inv-chip:hover { border-color: var(--accent-line); background: var(--s3); }
.hm-inv-unk li { display: flex; gap: 10px; align-items: flex-start; padding: 8px 0; border-bottom: 1px solid var(--hairline); color: var(--ink-2); }
.hm-inv-unk li:last-child { border-bottom: 0; }
.hm-inv-unk .ph { margin-top: 2px; color: var(--ink-3); font-size: 16px; }
.hm-inv-unk b { color: var(--ink); font-weight: 550; }
.hm-inv-acts li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--hairline); }
.hm-inv-acts li:last-child { border-bottom: 0; }
.hm-inv-acts .chip { margin-left: 6px; vertical-align: middle; }
.hm-inv-act { min-height: 34px; font-size: 12.5px; white-space: nowrap; }
.hm-inv-timer { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 400; color: var(--ink-3); }
.hm-inv-timer .num { color: var(--ink); font-weight: 500; }
.hm-inv-status { font-size: 13px; color: var(--ink-2); margin-top: -8px; }
.hm-inv-steps { display: flex; flex-direction: column; gap: 2px; }
.hm-inv-steps li { display: flex; gap: 12px; align-items: flex-start; padding: 10px 6px; }
.hm-inv-steps > li > .ph-fill { color: var(--ok); font-size: 20px; margin-top: 1px; }
.hm-inv-steps li > div { min-width: 0; flex: 1; }
.hm-inv-step { display: flex; align-items: baseline; gap: 8px; font-weight: 550; font-size: 14px; }
.hm-inv-step > .num:first-child { font-size: 12px; color: var(--ink-3); font-weight: 400; }
.hm-inv-dur { margin-left: auto; font-family: var(--font-mono); font-size: 12px; color: var(--ink-2); font-weight: 400; white-space: nowrap; }
.hm-inv-read { display: flex; flex-wrap: wrap; gap: 6px 8px; align-items: center; margin-top: 6px; font-size: 12px; color: var(--ink-3); }
@media (prefers-reduced-motion: no-preference) {
  .js .hm-ask.is-ready .hm-inv:not([hidden]) { animation: hm-fade 0.5s var(--hm-ease) both; }
}

/* ---------- Pricing: the trial leads, the paid tiers form a ladder (cards are drawn by the server from the plans it bills) ---------- */
.pricing-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 16px; align-items: stretch; }
.plan {
  display: flex; flex-direction: column; gap: 16px; padding: 28px; min-width: 0;
  background: var(--s1); border: 1px solid var(--hairline); border-radius: var(--r-frame); box-shadow: inset 0 1px 0 var(--edge-hi);
}
.plan .badge.info { color: var(--accent-strong); }   /* AA on the recommended card's tinted surface in the light theme */
.plan-head { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 10px; }
.plan h3 { font-size: 20px; line-height: 1.2; letter-spacing: -0.025em; font-weight: 600; }
.plan-price { font-size: clamp(26px, 2.6vw, 34px); line-height: 1.1; letter-spacing: -0.04em; font-weight: 550; font-variant-numeric: tabular-nums; }
.plan-list { display: flex; flex-direction: column; gap: 10px; padding-top: 16px; border-top: 1px solid var(--hairline); color: var(--ink-2); font-size: 15px; }
.plan-list li { display: flex; align-items: flex-start; gap: 10px; }
.plan-list .ph { color: var(--accent); margin-top: 3px; }
.plan-cta { margin-top: auto; width: 100%; min-height: 44px; }
/* the first plan is the trial: the featured panel */
.plan:first-child { grid-row: 1 / span var(--paid-span, 3); gap: 24px; padding: clamp(24px, 3vw, 40px); background: var(--s2); border-color: var(--accent-line); border-radius: var(--r-frame); }
.plan:first-child h3 { font-size: 22px; }
.plan:first-child .plan-price { font-size: clamp(36px, 4.4vw, 56px); line-height: 1; letter-spacing: -0.05em; }
.plan:first-child .plan-list { font-size: 16px; gap: 12px; }
/* the paid tiers: one row each, name and features left, the price and the action right */
.plan:not(:first-child) {
  display: grid; grid-template-columns: minmax(0, 1fr) auto auto; grid-template-areas: "head price cta" "list price cta";
  align-items: center; gap: 10px 28px; padding: 22px 26px; border-radius: var(--r-panel);
}
.plan:not(:first-child) .plan-head { grid-area: head; }
.plan:not(:first-child) .plan-list { grid-area: list; flex-direction: row; flex-wrap: wrap; gap: 6px; padding-top: 0; border-top: 0; }
.plan:not(:first-child) .plan-list li { display: inline-flex; align-items: center; padding: 2px 8px; border-radius: 6px; background: var(--s2); border: 1px solid var(--hairline); font-size: 12px; line-height: 1.5; color: var(--ink-2); }
.plan:not(:first-child) .plan-list .ph { display: none; }
.plan:not(:first-child) .plan-price { grid-area: price; font-size: 32px; justify-self: end; white-space: nowrap; }
.plan:not(:first-child) .plan-cta { grid-area: cta; width: auto; margin-top: 0; min-height: 40px; white-space: nowrap; }
.consent-note { margin-top: 20px; color: var(--ink-3); font-size: 14px; max-width: 72ch; }
.consent-note a { display: inline-block; padding-block: 12px; margin-block: -12px; color: var(--ink-2); text-decoration: underline; text-underline-offset: 3px; }
.consent-note a:hover { color: var(--ink); }

/* ---------- FAQ: two independent columns of native disclosures ---------- */
.hm-faq-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 clamp(24px, 5vw, 72px); align-items: start; }
.hm-faq-col { border-top: 1px solid var(--hairline-strong); }
.hm-faq details { border-bottom: 1px solid var(--hairline); }
.hm-faq summary {
  list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 64px; padding: 14px 0;
  cursor: pointer; font-weight: 550; font-size: 17px; letter-spacing: -0.015em; line-height: 1.3;
}
.hm-faq summary::-webkit-details-marker { display: none; }
.hm-faq summary .ph { font-size: 20px; color: var(--ink-3); transition: transform 0.35s var(--hm-ease); }
.hm-faq summary:hover { color: var(--accent); }
.hm-faq details[open] summary .ph { transform: rotate(180deg); }
.hm-ans { padding: 0 32px 20px 0; color: var(--ink-2); font-size: 16px; line-height: 1.55; max-width: 62ch; text-wrap: pretty; }
.hm-ans a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
@media (prefers-reduced-motion: no-preference) {
  .hm-faq details[open] .hm-ans { animation: hm-fade 0.4s var(--hm-ease) both; }
}

/* ---------- Closing call to action ---------- */
.hm-close { position: relative; isolation: isolate; overflow: hidden; border-top: 1px solid var(--hairline); }
.hm-close .hm-photo { position: absolute; inset: 0; z-index: -2; }
.hm-close .hm-photo img { object-position: 60% 62%; }
/* light theme: the night photo is inverted so the band reads as light paper with blue city veins, not a dark slab */
html[data-theme="light"] .hm-close .hm-photo img { filter: grayscale(1) invert(1) contrast(1.3) brightness(0.98); }
.hm-close::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(90deg, var(--canvas) 0%, color-mix(in srgb, var(--canvas) 92%, transparent) 40%, color-mix(in srgb, var(--canvas) 28%, transparent) 75%, transparent 100%);
}
.hm-close-in { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; max-width: 640px; padding-block: clamp(80px, 11vw, 144px); }
.hm-close-in .hm-actions { margin-top: 8px; }

/* ---------- Footer ---------- */
.hm-foot { padding: 64px 0 32px; background: var(--canvas); border-top: 1px solid var(--hairline); }
.hm-foot-grid { display: grid; grid-template-columns: minmax(0, 4fr) repeat(4, minmax(0, 2fr)); gap: 40px 32px; }
.hm-foot-brand p { margin-top: 12px; color: var(--ink-3); font-size: 15px; max-width: 30ch; }
.hm-foot h2 { margin-bottom: 8px; font-size: 13px; font-weight: 600; letter-spacing: 0.01em; color: var(--ink-3); }
.hm-foot li a { display: flex; align-items: center; flex-wrap: wrap; gap: 0 4px; min-height: 44px; color: var(--ink-2); font-size: 15px; transition: color 0.12s; }
.hm-foot li a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 4px; }
.separate-site { color: var(--ink-3); font-size: 0.9em; white-space: nowrap; }
.hm-foot-bottom { margin-top: 48px; padding-top: 24px; border-top: 1px solid var(--hairline); display: flex; justify-content: space-between; gap: 8px 24px; flex-wrap: wrap; color: var(--ink-3); font-size: 13.5px; }

/* ---------- Motion: transform and opacity only, and none of it under prefers-reduced-motion ---------- */
@keyframes hm-fade { from { opacity: 0; transform: translateY(6px); } }
@keyframes hm-rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes hm-slide { from { opacity: 0; transform: translateX(40px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: no-preference) {
  /* hero entry tells the reading order: headline, promise, actions, then the product */
  .hm-hero-copy > * { animation: hm-rise 0.6s var(--hm-ease) both; }
  .hm-hero-copy > :nth-child(2) { animation-delay: 70ms; }
  .hm-hero-copy > :nth-child(3) { animation-delay: 140ms; }
  .hm-hero-shot { animation: hm-slide 0.8s var(--hm-ease) 0.12s both; }
}
/* Scroll reveal is CSS only: a view timeline, no scroll listeners. fill-mode is forwards only, so anything not yet in
   range, or in a browser without view timelines, is simply visible (also true for print and full-page captures).
   Siblings stagger by stretching their range with --i (.hm-i1, .hm-i2). */
@keyframes hm-reveal { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .reveal { animation: hm-reveal linear forwards; animation-timeline: view(); animation-range: entry 0% entry calc(34% + var(--i, 0) * 12%); }
  }
}
@media (prefers-reduced-motion: reduce) {
  .hm-btn, .hm-btn .ph, .hm-faq summary .ph, .hm-step::before, .hm-l-go { transition: none; }
  .hm-btn:hover, .hm-btn:hover .ph, .hm-ledger a:hover .hm-l-go { transform: none; }
}

/* ---------- Responsive ---------- */
@container (max-width: 760px) {
  .hm-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@container (max-width: 480px) {
  .hm-ws-body { padding: 14px; gap: 12px; }
  .hm-ws-bar { padding-inline: 14px; }
  .hm-verdict { padding: 16px; gap: 14px; }
  .hm-verdict-title { font-size: 20px; }
  .hm-vstats { gap: 12px 20px; }
  .hm-kpis { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .hm-kpi-value { font-size: 26px; }
}
@media (max-width: 1100px) {
  .hm-foot-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .hm-foot-brand { grid-column: 1 / -1; }
}
@media (max-width: 1000px) {
  .hm-hero { display: flex; flex-direction: column; height: auto; padding: 40px 0 0 var(--hm-gutter); }
  .hm-hero-copy { padding: 0 var(--hm-gutter) 40px 0; align-self: stretch; }
  .hm-crop { flex: none; height: 460px; }
  .hm-ws { width: 100%; }
  .hm-bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hm-cell-a, .hm-cell-b, .hm-cell-e { grid-column: 1 / -1; grid-row: auto; }
  .hm-cell-c { grid-column: 1; grid-row: auto; }
  .hm-cell-d { grid-column: 2; grid-row: auto; }
  .hm-cell-b .hm-frame { min-height: 380px; }
  .hm-rule-grid, .pricing-grid { grid-template-columns: minmax(0, 1fr); }
  .hm-brand-stories-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .plan:first-child { grid-row: auto; }
  .hm-ask { display: flex; flex-direction: column; gap: 32px; }
  .hm-ask-copy { display: contents; }
  .hm-ask-head { order: 1; }
  .hm-ask-shot { order: 2; position: static; }
  .js .hm-steps { order: 3; margin: 0; }
  .hm-ask-copy > .secondary-btn { order: 4; align-self: flex-start; }
}
@media (max-width: 620px) {
  .hm-brand-stories-heading { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .hm-brand-stories-grid { grid-template-columns: minmax(0, 1fr); margin-top: 24px; }
  .hm-brand-story { padding: 20px; }
}
@media (max-width: 900px) {
  /* without script the links simply wrap under the brand; with it they fold into the menu */
  .hm-nav-in { flex-wrap: wrap; gap: 8px; }
  .hm-panel { order: 5; flex: 1 0 100%; flex-direction: column; align-items: stretch; gap: 8px; padding: 8px 0 16px; }
  .hm-links { flex-direction: column; }
  .hm-links a { min-height: 48px; font-size: 16px; }
  .hm-tools { margin-left: 0; justify-content: space-between; padding-top: 8px; border-top: 1px solid var(--hairline); }
  .hm-cta { margin-left: auto; }
  .hm-nav .primary-btn, .hm-nav .ghost-btn { min-height: 44px; }
  .hm-icon-btn { min-width: 44px; }
  .has-menu .hm-nav-in { flex-wrap: nowrap; }
  .has-menu .hm-panel {
    display: none; position: absolute; top: 100%; left: 0; right: 0; padding: 8px var(--hm-gutter) 16px;
    background: var(--s1); border-bottom: 1px solid var(--hairline);
  }
  .has-menu .hm-panel.is-open { display: flex; }
  .has-menu .hm-menu { display: inline-flex; }
  .plan:not(:first-child) { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "head price" "list list" "cta cta"; }
  .plan:not(:first-child) .plan-cta { width: 100%; }
}
@media (max-width: 760px) {
  .hm-faq-grid { grid-template-columns: minmax(0, 1fr); }
  .hm-faq-col + .hm-faq-col { border-top: 0; }
  .hm-foot-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hm-cell-e { grid-template-columns: minmax(0, 1fr); }
  .hm-cell-e .hm-photo { min-height: 200px; order: -1; }
  .hm-cell-e .hm-photo::before { background: linear-gradient(to top, var(--s1) 0%, transparent 38%); }
  .hm-compare { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .hm-inv-acts li { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  :root { --hm-gutter: 16px; }
  .hm-cta-long { display: none; }
  .hm-cta-short { display: inline; }
  .hm-hero { padding-top: 28px; }
  .hm-hero-copy { padding-bottom: 28px; gap: 16px; }
  .hm-actions { flex-direction: column; align-self: stretch; }
  .hm-actions .hm-btn { width: 100%; }
  .hm-hero-shot { gap: 10px; }
  .hm-crop { height: 400px; border-left: 0; border-radius: 0; -webkit-mask-image: linear-gradient(to bottom, black calc(100% - 80px), transparent); mask-image: linear-gradient(to bottom, black calc(100% - 80px), transparent); }
  .hm-sub { font-size: 17px; }
  .hm-cell-text, .hm-cell-e .hm-cell-text { padding: 24px; }
  .hm-cell-c { padding: 24px; gap: 24px; }
  .hm-cell--shot .hm-frame { margin-left: 24px; margin-top: 20px; }
  .hm-cell-a .hm-frame { min-height: 320px; }
  .hm-bento { grid-template-columns: minmax(0, 1fr); }
  .hm-cell-c, .hm-cell-d { grid-column: 1; }
  .hm-ledger a { grid-template-columns: minmax(0, 1fr) auto 18px; gap: 12px; }
  .hm-l-pct { display: none; }
  .hm-l-val { font-size: 18px; }
  .hm-inv { padding: 14px; }
  .hm-inv-composer { flex-direction: column; }
  .hm-inv-answer { font-size: 16px; }
  .industry-filters { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-inline: calc(var(--hm-gutter) * -1); padding-inline: var(--hm-gutter); padding-bottom: 4px; }
  .industry-filters::-webkit-scrollbar { display: none; }
  .industry-chip { min-height: 44px; padding: 0 16px; }
  .hm-more .secondary-btn { width: 100%; }
  .plan, .plan:not(:first-child) { padding: 20px; }
  .plan:not(:first-child) .plan-price { font-size: 28px; }
  .hm-faq summary { font-size: 16.5px; }
  .hm-ans { padding-right: 0; }
  .hm-close-in .hm-btn { width: 100%; }
  .hm-foot { padding-top: 48px; }
  .hm-foot-grid { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .hm-foot-bottom { margin-top: 32px; }
  .hm-close::after { background: linear-gradient(180deg, var(--canvas) 0%, color-mix(in srgb, var(--canvas) 90%, transparent) 42%, color-mix(in srgb, var(--canvas) 20%, transparent) 100%); }
  /* explanatory popovers open inline on phones so they can never overflow the viewport */
  .pop { display: block; }
  .pop-card { position: static; width: auto; margin-top: 8px; display: none; opacity: 1; visibility: visible; transform: none; }
  .pop:focus-within .pop-card { display: block; }
}
@media (max-width: 359px) { .hm-nav .hm-brand-name { display: none; } }