/*
  Homepage styles. Linked through asset_v('css/home.css'): /static is served as immutable
  for a year, so an unversioned link would keep serving an old copy after an edit.
  Every class is prefixed hm-. Colours come from the variables in /static/style.css.
*/

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

.hm-wrap { width: 100%; max-width: 1120px; margin: 0 auto; padding: 0 20px; }
.hm-sec { padding: 64px 0; scroll-margin-top: 72px; }
.hm-sec--band {
  background: linear-gradient(180deg, rgba(18, 30, 51, .55) 0%, rgba(10, 17, 40, .3) 100%);
  border-block: 1px solid var(--border-light);
}
.hm-eyebrow { margin: 0 0 8px; font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--accent-soft); }
.hm-h2 { margin: 0 0 12px; font-size: clamp(24px, 3.4vw, 34px); font-weight: 800; line-height: 1.16; letter-spacing: -.02em; color: var(--text-main); text-wrap: balance; }
.hm-lead { margin: 0 0 28px; max-width: 64ch; font-size: 16px; line-height: 1.65; color: var(--text-muted); }
.hm-link { color: var(--accent-soft); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.hm-link:hover { color: #86efac; }
.hm-sec-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 6px 24px; margin-bottom: 26px; }
.hm-sec-head .hm-h2 { margin-bottom: 0; }
.hm-more {
  display: inline-flex; align-items: center; gap: 6px; min-height: 44px;
  font-size: 14.5px; font-weight: 700; text-decoration: none; color: var(--accent-soft);
}
.hm-more:hover { color: #86efac; }
.hm-more span { transition: transform .18s; }
.hm-more:hover span { transform: translateX(3px); }

:where(.hm a, .hm button, .hm summary, .hm input):focus-visible { outline: 2px solid #86efac; outline-offset: 3px; }

/* style.css makes every .btn-primary/.btn-secondary full width (with extra margin and padding)
   at 768px and below, for the full-screen mobile menu. Buttons on this page size themselves. */
.hm .btn { width: auto; margin-top: 0; }

/* ── Hero: the report form on the left, what is trending on the right ───── */
.hm-hero { position: relative; padding: 40px 0 52px; isolation: isolate; }
.hm-hero::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(50% 62% at 16% 0%, rgba(34, 197, 94, .17), transparent 70%),
    radial-gradient(42% 52% at 94% 14%, rgba(59, 130, 246, .11), transparent 72%);
}
.hm-hero::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image:
    linear-gradient(rgba(148, 163, 184, .055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(148, 163, 184, .055) 1px, transparent 1px);
  background-size: 56px 56px;
  -webkit-mask-image: radial-gradient(72% 92% at 50% 0%, #000 0%, transparent 78%);
  mask-image: radial-gradient(72% 92% at 50% 0%, #000 0%, transparent 78%);
}
.hm-hero-grid { display: grid; gap: 34px; grid-template-columns: minmax(0, 1fr); align-items: start; }
.hm-hero-copy { min-width: 0; text-align: left; }
.hm-kicker {
  display: inline-flex; align-items: center; gap: 8px; margin: 0 0 16px; padding: 5px 13px;
  font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--accent-soft);
  background: rgba(34, 197, 94, .08); border: 1px solid rgba(34, 197, 94, .28); border-radius: 999px;
}
.hm-kicker::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 3px rgba(34, 197, 94, .2); }
.hm-hero h1 { margin: 0 0 16px; font-size: clamp(32px, 4.6vw, 52px); font-weight: 800; line-height: 1.07; letter-spacing: -.03em; color: var(--text-main); text-wrap: balance; }
.hm-hero h1 em { font-style: normal; color: var(--accent-soft); }
.hm-hero-lede { margin: 0 0 24px; max-width: 54ch; font-size: clamp(15px, 1.8vw, 17.5px); line-height: 1.62; color: var(--text-muted); }

.hm-form { max-width: 580px; }
.hm-label { display: block; margin: 0 0 6px; font-size: 13px; font-weight: 600; color: var(--text-secondary); }
.hm-row { display: flex; flex-direction: column; gap: 10px; }
.hm-input {
  display: block; width: 100%; min-width: 0; height: 52px; padding: 0 16px;
  font-family: inherit; font-size: 16px; font-weight: 600; line-height: 1.2; letter-spacing: .03em; text-transform: uppercase;
  color: var(--text-main); background: rgba(3, 8, 18, .65);
  border: 1px solid rgba(148, 163, 184, .32); border-radius: 12px;
  transition: border-color .18s, box-shadow .18s;
}
.hm-input::placeholder { color: #8b9ab0; opacity: 1; font-weight: 500; letter-spacing: 0; text-transform: none; }
.hm-input:hover { border-color: rgba(148, 163, 184, .5); }
.hm-input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 4px rgba(34, 197, 94, .18); }
.hm .hm-primary { height: 52px; padding: 0 24px; border-radius: 12px; font-size: 16px; font-weight: 700; white-space: nowrap; box-shadow: 0 8px 24px rgba(34, 197, 94, .22); }
.hm .hm-primary:disabled { cursor: progress; filter: saturate(.7) brightness(.92); box-shadow: none; transform: none; }
/* The policy line and the status block that replaces it share a top margin, so the swap in
   home.js moves nothing below the form (it also keeps the line's height; see home.js). */
.hm-policy { margin: 12px 0 0; font-size: 13px; line-height: 1.5; color: var(--text-muted); }
.hm-status { max-width: 580px; margin: 12px 0 0; text-align: left; }
.hm-secondary-row { display: flex; justify-content: flex-start; margin-top: 14px; }
.hm .hm-secondary { height: 44px; padding: 0 22px; border-radius: 10px; font-size: 15px; }

@media (min-width: 640px) {
  .hm-hero { padding: 52px 0 60px; }
  .hm-row { flex-direction: row; align-items: stretch; }
  .hm-row .hm-input { flex: 1 1 auto; }
  .hm .hm-row .hm-primary { flex: 0 0 auto; }
}
@media (min-width: 980px) {
  .hm-hero { padding: 64px 0 72px; }
  /* Top-aligned, not centred: the card fills in after the page paints, and a centred card
     would move up as it grew. Its top edge stays where it is. */
  .hm-hero-grid { grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); gap: 52px; align-items: start; }
}

/* ── Compact announcement: in the page flow, never an overlay ───────────── */
.hm-banner {
  position: relative; max-width: 580px; margin: 22px 0 0; padding: 12px 52px 12px 16px;
  text-align: left; font-size: 14px; line-height: 1.55; color: var(--text-secondary);
  background: rgba(168, 85, 247, .08); border: 1px solid rgba(168, 85, 247, .3); border-radius: 12px;
}
.hm-banner p { margin: 0; }
.hm-banner a { color: #d8b4fe; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.hm-banner a:hover { color: #e9d5ff; }
.hm-banner-close {
  position: absolute; top: 4px; right: 4px; display: grid; place-items: center; width: 40px; height: 40px;
  padding: 0; border: 0; border-radius: 10px; background: transparent; color: var(--text-muted); cursor: pointer;
}
.hm-banner-close:hover { background: rgba(148, 163, 184, .14); color: var(--text-main); }
.hm-banner-close svg { width: 16px; height: 16px; }
.hm-banner[hidden], .hm-banner-off .hm-banner { display: none; }

/* ── Live blocks (the trending card and the headlines) ──────────────────────
   home-live.js sets data-state on the block. No state means the plain fallback shows: that is
   the page without scripts, or after a failed load. loading and warming show the skeleton;
   ok and unavailable show the server's fragment. */
.hm-live .hm-live-skeleton, .hm-live .hm-live-result { display: none; }
.hm-live .hm-live-skeleton { pointer-events: none; }
.hm-live[data-state="loading"] .hm-live-fallback,
.hm-live[data-state="warming"] .hm-live-fallback,
.hm-live[data-state="ok"] .hm-live-fallback,
.hm-live[data-state="unavailable"] .hm-live-fallback { display: none; }
.hm-live[data-state="loading"] .hm-live-skeleton,
.hm-live[data-state="warming"] .hm-live-skeleton { display: grid; }
.hm-live[data-state="ok"] .hm-live-result,
.hm-live[data-state="unavailable"] .hm-live-result { display: block; }

.hm-live-fallback p { margin: 0 0 4px; font-size: 14.5px; line-height: 1.6; color: var(--text-muted); }
.hm-live-msg {
  margin: 0; padding: 16px 18px; font-size: 14.5px; line-height: 1.6; color: var(--text-muted);
  border: 1px dashed rgba(148, 163, 184, .28); border-radius: 12px;
}
.hm-live-msg--col { padding: 12px 14px; font-size: 13.5px; }

/* Loading placeholders. They are the size of the loaded block, so nothing below a block (and
   not the card itself) moves when the data arrives. The trending placeholder reuses the real
   column, row, chip and note classes, which keeps it that size at every width; only the paint
   is its own. The headlines placeholder cards are sized like loaded cards. */
.hm-live { --hm-skel: rgba(148, 163, 184, .15); }
.hm-skel-trend { grid-template-columns: minmax(0, 1fr); }
.hm-skel-label, .hm-skel-shared-h, .hm-skel-chip, .hm-skel-meta, .hm-skel-row, .hm-skel-card span {
  animation: hm-pulse 1.6s ease-in-out infinite;
}
.hm-skel-label { width: 44%; background: linear-gradient(var(--hm-skel), var(--hm-skel)) 0 center / 100% 9px no-repeat; }
.hm-skel-row {
  background-repeat: no-repeat;
  background-image:
    linear-gradient(var(--hm-skel), var(--hm-skel)), linear-gradient(var(--hm-skel), var(--hm-skel)),
    linear-gradient(var(--hm-skel), var(--hm-skel)), linear-gradient(var(--hm-skel), var(--hm-skel));
  background-size: 10px 10px, 64px 12px, 112px 9px, 46px 14px;
  background-position: 12px center, 34px 9px, 34px 26px, right 8px center;
}
.hm-skel-shared-h { flex: 0 0 100%; height: 15px; background: linear-gradient(var(--hm-skel), var(--hm-skel)) 0 center / 124px 9px no-repeat; }
.hm-skel-chip { flex: none; width: 150px; height: 40px; border-radius: 999px; background: var(--hm-skel); }
.hm-skel-meta {
  height: calc(3 * 1.55em);
  background:
    linear-gradient(var(--hm-skel), var(--hm-skel)) 0 5px / 100% 9px no-repeat,
    linear-gradient(var(--hm-skel), var(--hm-skel)) 0 24px / 86% 9px no-repeat,
    linear-gradient(var(--hm-skel), var(--hm-skel)) 0 43px / 52% 9px no-repeat;
}
@keyframes hm-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .5; } }

/* ── What is trending ───────────────────────────────────────────────────── */
.hm-trend {
  position: relative; min-width: 0; padding: 20px 18px 18px; overflow: hidden;
  border: 1px solid var(--border); border-radius: 20px;
  background: linear-gradient(165deg, rgba(20, 33, 56, .96) 0%, rgba(9, 16, 31, .96) 100%);
  box-shadow: var(--shadow-xl), 0 24px 70px rgba(34, 197, 94, .07);
}
.hm-trend::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; background: var(--accent-gradient); }
.hm-trend-head h2 { margin: 0; font-size: 20px; font-weight: 800; letter-spacing: -.015em; color: var(--text-main); }
.hm-trend-head p { margin: 4px 0 0; font-size: 13.5px; color: var(--text-muted); }
.hm-trend .hm-live-body { margin-top: 14px; }

.hm-trend-cols { display: grid; gap: 18px; grid-template-columns: minmax(0, 1fr); }
.hm-trend-col { min-width: 0; }
.hm-trend-col-h {
  display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin: 0 0 4px;
  font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--text-secondary);
}
.hm-trend-col-h span { font-size: 12px; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--text-muted); }
.hm-trend-list { margin: 0; padding: 0; list-style: none; }
.hm-trend-list li + li { border-top: 1px solid var(--border-light); }
.hm-trend-row {
  display: grid; grid-template-columns: 18px minmax(0, 1fr) auto; align-items: center; gap: 8px;
  min-height: 46px; margin: 0 -8px; padding: 6px 8px; border-radius: 10px; color: inherit; text-decoration: none;
  transition: background .15s;
}
.hm-trend-row:hover { background: rgba(148, 163, 184, .09); }
.hm-trend-rank { font-size: 12px; font-weight: 700; text-align: center; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.hm-trend-id { display: flex; flex-direction: column; min-width: 0; }
.hm-trend-id b { font-size: 14px; font-weight: 800; line-height: 1.3; letter-spacing: .02em; color: var(--text-main); }
.hm-trend-id small { overflow: hidden; font-size: 11.5px; line-height: 1.3; color: var(--text-muted); text-overflow: ellipsis; white-space: nowrap; }
.hm-trend-metric { display: flex; flex-direction: column; align-items: flex-end; font-variant-numeric: tabular-nums; }
.hm-trend-metric b { font-size: 14px; font-weight: 700; line-height: 1.3; color: var(--text-main); }
.hm-delta { font-size: 11.5px; font-weight: 700; line-height: 1.3; }
.hm-delta--up { color: var(--accent-soft); }
.hm-delta--down, .hm-delta--flat { color: var(--text-muted); }

.hm-trend-shared { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--border); }
.hm-trend-shared-h { margin: 0; font-size: 12px; font-weight: 700; color: var(--text-muted); }
.hm-trend-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.hm-chip--sm { gap: 8px; padding: 0 12px; font-size: 13px; }
.hm-chip--sm b { font-weight: 800; color: var(--text-main); }
.hm-chip--sm small { font-size: 11.5px; font-weight: 600; color: var(--text-muted); }
.hm-trend-meta { margin: 14px 0 0; font-size: 12.5px; line-height: 1.55; color: var(--text-muted); }

@media (min-width: 560px) {
  .hm-trend-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
}
@media (min-width: 560px) and (max-width: 979px) {
  /* Wide enough that the real note is two lines and the chips share a row with their label. */
  .hm-skel-meta { height: calc(2 * 1.55em); }
  .hm-skel-shared-h { flex: 0 0 124px; }
}
@media (max-width: 559px) {
  .hm-trend-list li:nth-child(n+6) { display: none; }
  .hm-skel-meta { height: calc(4 * 1.55em); }
}

/* The card sits beside the form from 980px. Narrower, it would push the sample report a screen or
   two down the page, so the hero leaves it out and the same card is shown after the FAQ instead
   (#trending-stocks-narrow). A block that is not displayed is never near the screen, so
   home-live.js fetches only the copy that is on show. */
.hm-hero .hm-trend { display: none; }
.hm-narrow-only { padding-bottom: 0; }
@media (min-width: 980px) {
  .hm-hero .hm-trend { display: block; }
  .hm-narrow-only { display: none; }
}

/* ── Headlines ──────────────────────────────────────────────────────────── */
.hm-news-grid { display: grid; gap: 14px; margin: 0; padding: 0; list-style: none; grid-template-columns: minmax(0, 1fr); }
.hm-news-card {
  position: relative; display: flex; flex-direction: column; gap: 9px; min-width: 0; padding: 18px;
  background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-lg);
  transition: background .18s, border-color .18s, transform .18s;
}
.hm-news-card:hover, .hm-news-card:focus-within { background: var(--card-hover); border-color: var(--border-accent); transform: translateY(-2px); }
.hm-news-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin: 0; font-size: 12.5px; color: var(--text-muted); }
.hm-news-source {
  padding: 2px 10px; border-radius: 999px; font-weight: 700; color: var(--accent-soft);
  background: rgba(34, 197, 94, .09); border: 1px solid rgba(34, 197, 94, .24);
}
.hm-news-title {
  display: -webkit-box; margin: 0; overflow: hidden; font-size: 16.5px; font-weight: 700; line-height: 1.38; color: var(--text-main);
  -webkit-line-clamp: 3; -webkit-box-orient: vertical;
}
.hm-news-title a { color: inherit; text-decoration: none; }
.hm-news-title a:hover { color: #86efac; }
.hm-news-title a::after { content: ""; position: absolute; inset: 0; border-radius: var(--radius-lg); }
.hm-news-title a:focus-visible { outline: none; }
.hm-news-title a:focus-visible::after { outline: 2px solid #86efac; outline-offset: 2px; }
.hm-news-excerpt {
  display: -webkit-box; margin: 0; overflow: hidden; font-size: 14px; line-height: 1.55; color: var(--text-muted);
  -webkit-line-clamp: 3; -webkit-box-orient: vertical;
}
.hm-news-foot { margin: 18px 0 0; font-size: 13px; line-height: 1.55; color: var(--text-muted); }
.hm-skel-card { min-height: 205px; }
.hm-skel-card span { border-radius: 8px; background: var(--hm-skel); }
.hm-skel-card span:nth-child(1) { width: 38%; height: 26px; }
.hm-skel-card span:nth-child(2) { width: 94%; height: 46px; }
.hm-skel-card span:nth-child(3) { height: 65px; }

@media (min-width: 640px) {
  .hm-news-grid { gap: 16px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 980px) {
  .hm-news-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ── Room for the live blocks ────────────────────────────────────────────────
   With scripts on, each block keeps the height of its typical loaded content from the first
   paint, so the plain fallback, the placeholder and the data all take the same room and nothing
   below moves (the page after it would otherwise jump on a tall screen). Without scripts the
   fallback keeps its own small size. A block with more or less than the typical content moves
   only what is under it. */
@media (scripting: enabled) {
  .hm-trend .hm-live-body { min-height: 690px; }
  .hm-news .hm-live-body { min-height: 1440px; }
}
@media (scripting: enabled) and (min-width: 560px) {
  .hm-trend .hm-live-body { min-height: 400px; }
}
@media (scripting: enabled) and (min-width: 640px) {
  .hm-news .hm-live-body { min-height: 730px; }
}
@media (scripting: enabled) and (min-width: 980px) {
  .hm-trend .hm-live-body { min-height: 450px; }
  .hm-news .hm-live-body { min-height: 485px; }
}

/* ── Sample report ──────────────────────────────────────────────────────── */
.hm-sample { display: grid; gap: 28px; align-items: center; }
.hm-doc {
  padding: 24px; border: 1px solid rgba(34, 197, 94, .22); border-radius: 18px;
  background: linear-gradient(160deg, #12213a 0%, #0a1322 100%);
  box-shadow: var(--shadow-lg), 0 24px 70px rgba(34, 197, 94, .08);
}
.hm-doc-tag {
  display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
  color: #fbbf24; background: rgba(251, 191, 36, .1); border: 1px solid rgba(251, 191, 36, .38);
}
.hm-doc h3 { margin: 14px 0 4px; font-size: 20px; font-weight: 800; line-height: 1.25; color: var(--text-main); }
.hm-doc-sub { margin: 0; font-size: 14px; color: var(--text-muted); }
.hm-doc-rows { display: grid; margin: 16px 0 0; padding: 0; list-style: none; }
.hm-doc-rows li { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-top: 1px solid var(--border); font-size: 14px; color: var(--text-secondary); }
.hm-doc-rows li::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }
.hm-doc-note { margin: 14px 0 0; font-size: 12.5px; line-height: 1.5; color: var(--text-muted); }
.hm-sample-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 4px; }
.hm .hm-sample-actions .btn { height: 44px; padding: 0 20px; border-radius: 10px; font-size: 15px; }

@media (min-width: 860px) {
  .hm-sample { grid-template-columns: minmax(0, 1fr) minmax(0, .9fr); gap: 56px; }
}

/* ── Benefits, workflow, plans: shared card grid ────────────────────────── */
.hm-grid { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); }
.hm-card {
  min-width: 0; padding: 24px; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-lg);
  transition: border-color .18s, transform .18s, background .18s;
}
.hm-grid--3 .hm-card:hover { background: var(--card-hover); border-color: var(--border-accent); transform: translateY(-3px); }
.hm-card h3 { margin: 0 0 8px; font-size: 17px; font-weight: 700; line-height: 1.3; color: var(--text-main); }
.hm-card p { margin: 0; font-size: 15px; line-height: 1.6; color: var(--text-muted); }
.hm-icon {
  display: grid; place-items: center; width: 44px; height: 44px; margin-bottom: 16px; border-radius: 12px;
  color: var(--accent-soft); background: linear-gradient(145deg, rgba(34, 197, 94, .16), rgba(34, 197, 94, .05)); border: 1px solid rgba(34, 197, 94, .3);
}
.hm-icon svg { width: 22px; height: 22px; }

@media (min-width: 700px) {
  .hm-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .hm-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ── Research workflow ──────────────────────────────────────────────────── */
.hm-steps { display: grid; gap: 14px; margin: 0; padding: 0; list-style: none; counter-reset: hm-step; grid-template-columns: minmax(0, 1fr); }
.hm-steps li { position: relative; min-width: 0; padding: 18px 18px 18px 62px; counter-increment: hm-step; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-lg); }
.hm-steps li::before {
  content: counter(hm-step); position: absolute; top: 18px; left: 18px; display: grid; place-items: center; width: 32px; height: 32px;
  border-radius: 50%; font-size: 14px; font-weight: 800; color: #022c22; background: var(--accent-gradient);
  box-shadow: 0 6px 16px rgba(34, 197, 94, .25);
}
.hm-steps h3 { margin: 0 0 4px; font-size: 16px; font-weight: 700; color: var(--text-main); }
.hm-steps p { margin: 0; font-size: 14.5px; line-height: 1.55; color: var(--text-muted); }
.hm-tools { display: flex; flex-wrap: wrap; gap: 8px; margin: 22px 0 0; padding: 0; list-style: none; }
.hm-tools-lead { margin: 24px 0 0; font-size: 14px; color: var(--text-muted); }
.hm-tools-lead + .hm-tools { margin-top: 10px; }
.hm-chip {
  display: inline-flex; align-items: center; min-height: 40px; padding: 0 16px; border-radius: 999px; font-size: 14px; font-weight: 600; text-decoration: none;
  color: var(--text-secondary); background: rgba(148, 163, 184, .07); border: 1px solid rgba(148, 163, 184, .2);
  transition: color .18s, background .18s, border-color .18s;
}
.hm-chip:hover { color: #86efac; background: rgba(34, 197, 94, .1); border-color: rgba(34, 197, 94, .45); }

@media (min-width: 640px) { .hm-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .hm-steps { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* ── Plan invitation ────────────────────────────────────────────────────── */
.hm-plan { display: flex; flex-direction: column; background: linear-gradient(170deg, var(--card-elevated) 0%, var(--card) 100%); }
.hm-plan-name { margin: 0 0 2px; font-size: 20px; font-weight: 800; color: var(--text-main); }
.hm-plan-for { margin: 0 0 14px; font-size: 14px; color: var(--text-muted); }
.hm-price { margin: 0; font-size: 15px; color: var(--text-secondary); }
.hm-price strong { font-size: 34px; font-weight: 800; letter-spacing: -.02em; color: var(--text-main); }
.hm-price s { margin-left: 6px; color: var(--text-dim); }
.hm-price-terms { margin: 4px 0 0; font-size: 13.5px; line-height: 1.5; color: var(--text-muted); }
.hm-price-annual { margin: 10px 0 0; padding-top: 10px; border-top: 1px solid var(--border); font-size: 13.5px; line-height: 1.5; color: var(--text-muted); }
.hm-plan-lead { margin: 16px 0 6px; font-size: 13px; font-weight: 700; color: var(--text-secondary); }
.hm-plan ul { margin: 0; padding: 0 0 0 18px; font-size: 14.5px; line-height: 1.55; color: var(--text-muted); }
.hm-plan li + li { margin-top: 4px; }
.hm-card p.hm-plan-paused { margin-top: 14px; padding: 12px 14px; font-size: 13px; line-height: 1.5; border: 1px dashed rgba(251, 191, 36, .4); border-radius: 12px; background: rgba(251, 191, 36, .05); }
.hm-pill {
  display: inline-block; margin-right: 4px; padding: 1px 8px; border: 1px solid rgba(251, 191, 36, .55); border-radius: 999px;
  font-size: 10.5px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: #fbbf24; white-space: nowrap;
}
.hm .hm-plan-cta { align-self: flex-start; margin-top: auto; height: 44px; padding: 0 22px; border-radius: 10px; font-size: 15px; }
.hm-plan > ul, .hm-plan-paused { margin-bottom: 18px; }
.hm-plans-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin-top: 22px; }
.hm .hm-plans-foot .btn { height: 44px; padding: 0 22px; border-radius: 10px; font-size: 15px; }
.hm-plans-foot p { margin: 0; font-size: 13.5px; color: var(--text-muted); }
.hm-free-line { margin: 0 0 18px; font-size: 15px; line-height: 1.6; color: var(--text-muted); }

/* ── Author and methodology ─────────────────────────────────────────────── */
.hm-about { display: grid; gap: 26px; }
.hm-person { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 12px; margin-bottom: 14px; }
.hm-person-name { font-size: 18px; font-weight: 700; color: var(--text-main); }
.hm-person-role { font-size: 14px; color: var(--text-muted); }
.hm-about p { margin: 0 0 12px; font-size: 15px; line-height: 1.65; color: var(--text-muted); }
.hm-method { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.hm-method a {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 48px; padding: 10px 16px; border-radius: 12px; text-decoration: none;
  font-size: 15px; font-weight: 600; color: var(--text-main); background: var(--card); border: 1px solid var(--border);
  transition: border-color .18s, background .18s;
}
.hm-method a:hover { border-color: var(--border-accent); background: var(--card-hover); }
.hm-disclaimer { margin-top: 6px; font-size: 13px; line-height: 1.55; color: var(--text-dim); }

@media (min-width: 860px) { .hm-about { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 52px; } }

/* ── FAQ: native details elements, no script needed ─────────────────────── */
.hm-faq { max-width: 820px; }
.hm-faq details { margin: 0 0 10px; background: var(--card); border: 1px solid var(--border); border-radius: 12px; transition: border-color .18s; }
.hm-faq details:hover { border-color: rgba(148, 163, 184, .24); }
.hm-faq details[open] { border-color: var(--border-accent); }
.hm-faq summary {
  display: flex; align-items: center; justify-content: space-between; gap: 14px; min-height: 52px; padding: 12px 18px; cursor: pointer; list-style: none;
  font-size: 16px; font-weight: 600; line-height: 1.4; color: var(--text-main);
}
.hm-faq summary::-webkit-details-marker { display: none; }
.hm-faq summary::after { content: "+"; flex: none; font-size: 22px; font-weight: 400; line-height: 1; color: var(--accent-soft); }
.hm-faq details[open] summary::after { content: "\2212"; }
.hm-faq details p { margin: 0; padding: 0 18px 16px; font-size: 15px; line-height: 1.65; color: var(--text-muted); }

@media (max-width: 480px) {
  .hm-wrap { padding: 0 16px; }
  .hm-sec { padding: 44px 0; }
  .hm-card, .hm-doc { padding: 18px; }
  .hm-trend { padding: 18px 14px 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .hm * { transition: none !important; }
  .hm-skel-label, .hm-skel-shared-h, .hm-skel-chip, .hm-skel-meta, .hm-skel-row, .hm-skel-card span { animation: none !important; }
  .hm-news-card:hover, .hm-news-card:focus-within, .hm-grid--3 .hm-card:hover { transform: none !important; }
}