/* Homepage E4 (spec docs/archive/superpowers/specs/2026-09-28-homepage-e4-design.md).
   Ported from the approved prototype concept-e4. Every selector carries an hm-
   class, so nothing here reaches another page: `.hm-page` is the page's <main>,
   and the thumb bar and footer (outside <main>) are reached by their own hm-
   class or as `main.hm-page ~ …`. Tokens are declared on .hm-page (not :root).
   Every animation and transition lives in the one prefers-reduced-motion:
   no-preference block at the end, and only transform, opacity and clip-path
   animate. Resting states outside that block are the finished page: without JS
   or under reduced motion, everything simply shows. Controls are at least 48 px. */

.hm-page, .hm-thumbbar {
  --hm-morning: #EDF1F4; --hm-warm: #F6F1E8; --hm-warm-2: #EDE3D2; --hm-gold: #F2D49C; --hm-night: #231E36;
  --hm-card: #FFFFFF; --hm-ink: #1A1712; --hm-ink-soft: #45403A; --hm-line: rgb(26 23 18 / .16);
  --hm-blue: #166B9E; --hm-blue-deep: #0F4F76; --hm-gold-deep: #B7791A;
  --hm-night-ink: #F6F3EE; --hm-night-soft: #D3CDE0; --hm-mist: #CFE3F0;
  --hm-display: "League Gothic", "Arial Narrow", Impact, sans-serif;
  --hm-body: "Inter", "Inter Fallback", -apple-system, "Segoe UI", sans-serif;
  --hm-wrap: 1340px; --hm-g: 16px; --hm-bar: 76px;
}
@media (min-width: 700px) { .hm-page, .hm-thumbbar { --hm-g: 32px; } }
/* The shared public topbar sits outside <main>, so it cannot see --hm-wrap: give it
   the same column (landing.css reads --lp-bar-maxw from 1200px), so its logo and
   buttons line up with the page's content (both inset 32px, as --hm-g is here). Keep it
   equal to --hm-wrap; test_site_shell_browser checks they line up. home.css loads on the
   homepage only, so no other page's bar changes. */
:root { --lp-bar-maxw: 1340px; }  /* home.css loads only on the homepage */

/* ---------- scope and reset (the prototype got these from base.css) ---------- */
.hm-page { overflow-x: clip; color-scheme: light; background: var(--hm-morning); color: var(--hm-ink);
  font-family: var(--hm-body); font-size: 16px; line-height: 1.55; }
.hm-page :where(h1), .hm-page :where(h2), .hm-page :where(h3), .hm-page :where(h4), .hm-page :where(p), .hm-page :where(ul), .hm-page :where(ol), .hm-page :where(figure), .hm-page :where(blockquote), .hm-page :where(dl), .hm-page :where(dd) { margin: 0; }
.hm-page :where(h1), .hm-page :where(h2), .hm-page :where(h3), .hm-page :where(h4) { font-family: inherit; font-size: inherit; font-weight: 600; line-height: 1.25; letter-spacing: normal; }
.hm-page :where(ul), .hm-page :where(ol) { padding: 0; list-style: none; }
.hm-page :where(img), .hm-page :where(svg) { display: block; max-width: 100%; }
.hm-page :where(img) { height: auto; border-radius: 0; }
.hm-page :where(picture) { display: contents; }
.hm-page :where(source) { display: none; }   /* else a <source> becomes a grid item once <picture> is display: contents */
.hm-page :where(a) { color: inherit; }
.hm-page :where(button) { font: inherit; color: inherit; background: none; border: 0; padding: 0; border-radius: 0; cursor: pointer; text-align: inherit; }
.hm-page :where(button):hover { background: none; }
.hm-page :where(:focus-visible), .hm-thumbbar :where(:focus-visible) { outline: 3px solid var(--hm-blue); outline-offset: 3px; box-shadow: none; }
.hm-mandate :where(:focus-visible), .hm-close :where(:focus-visible) { outline-color: #fff; }
.hm-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.hm-wrap { max-width: var(--hm-wrap); margin: 0 auto; padding-inline: var(--hm-g); }

/* ---------- buttons and links: every one at least 48 px ---------- */
.hm-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 0 22px; border-radius: 12px;
  font-weight: 600; font-size: 17px; line-height: 1.2; text-decoration: none; border: 0; background: var(--hm-blue); color: #fff; text-align: center; }
.hm-btn:hover { background: var(--hm-blue-deep); color: #fff; text-decoration: none; }
.hm-btn .hm-price { font-family: var(--hm-display); font-weight: 400; font-size: 1.4em; letter-spacing: .02em; line-height: 1; padding-left: 10px; border-left: 1px solid rgb(255 255 255 / .45); }
.hm-btn-ghost { background: transparent; color: var(--hm-blue); box-shadow: inset 0 0 0 2px var(--hm-blue); }
.hm-btn-ghost:hover { background: rgb(255 255 255 / .6); color: var(--hm-blue); }
.hm-tlink { display: inline-flex; align-items: center; min-height: 48px; color: var(--hm-blue); font-weight: 600; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }
.hm-intro a, .hm-fnb a, .hm-src a, .hm-stat a, .hm-form .field-hint a {
  display: inline-flex; align-items: center; justify-content: center; min-height: 48px; min-width: 48px; color: var(--hm-blue); font-weight: 600; }

/* ---------- section scaffolding ---------- */
.hm-sec { padding: 56px 0; }
@media (min-width: 980px) { .hm-sec { padding: 104px 0; } }
.hm-h2 { font-family: var(--hm-display); font-weight: 400; font-size: clamp(2.35rem, 8.6vw, 4.6rem); line-height: .95; text-wrap: balance; max-width: 19ch; }
.hm-intro { margin-top: 14px; font-size: 17px; color: var(--hm-ink-soft); max-width: 34rem; }
@media (min-width: 700px) { .hm-intro { font-size: 18px; } }

/* ---------- hero: their listing as the portal's featured card ---------- */
.hm-hero { padding: 16px 0 40px; }
.hm-hero .hm-wrap { display: grid; gap: 18px; }
.hm-hero .hm-wrap > * { min-width: 0; }
/* phone: headline, then the featured card, then the button; the rest follows */
.hm-hero-left { display: contents; }
.hm-hero h1 { order: 1; } .hm-results { order: 2; } .hm-hero-cta { order: 3; } .hm-lede { order: 4; } .hm-facts { order: 5; }
@media (min-width: 980px) {
  .hm-hero { padding: 48px 0 72px; }
  .hm-hero .hm-wrap { grid-template-columns: 1.08fr .92fr; column-gap: 64px; align-items: center; }
  .hm-hero-left { display: flex; flex-direction: column; gap: 22px; }
  .hm-hero .hm-hero-left > * { order: 0; }
}
@media (min-width: 1280px) { .hm-hero .hm-wrap { column-gap: 80px; } }
.hm-hero h1 { font-family: var(--hm-display); font-weight: 400; font-size: clamp(2.8rem, 12vw, 6.2rem); line-height: .92; text-wrap: balance; }
@media (min-width: 980px) { .hm-hero h1 { max-width: 5.3em; } .hm-hero h1 .hm-kicker { white-space: nowrap; } }
@media (min-width: 1280px) { .hm-hero h1 { font-size: clamp(6.2rem, 6.9vw, 8.2rem); line-height: .88; } }
.hm-hero h1 .hm-kicker { display: block; font-family: var(--hm-body); font-weight: 600; font-size: clamp(1rem, 4.2vw, 1.25rem); line-height: 1.3; letter-spacing: -.01em; color: var(--hm-blue); margin-bottom: 10px; }
.hm-lede { font-size: 17px; color: var(--hm-ink-soft); max-width: 34rem; }
@media (min-width: 700px) { .hm-lede { font-size: 18px; } }
.hm-hero-cta { display: grid; gap: 8px; }
/* The free-room offer: a ghost button with a second, smaller line (2026-10-10). */
.hm-btn-wa { padding-block: 8px; }
.hm-btn-wa svg { width: 24px; height: 24px; flex: none; }
.hm-btn-wa span { display: flex; flex-direction: column; align-items: flex-start; text-align: left; }
.hm-btn-wa small { font-size: 14px; font-weight: 500; color: var(--hm-ink-soft); }
.hm-hero-cta .hm-btn { width: 100%; }
.hm-hero-cta .hm-tlink { justify-content: center; }
@media (min-width: 560px) { .hm-hero-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 20px; } .hm-hero-cta .hm-btn { width: auto; } }
.hm-facts { display: flex; flex-wrap: wrap; gap: 6px 20px; font-size: 15px; color: var(--hm-ink-soft); }
.hm-facts li { display: flex; align-items: center; gap: 8px; }
.hm-facts svg { width: 18px; height: 18px; color: var(--hm-blue); flex: none; }

.hm-results-bar { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; font-size: 13.5px; color: var(--hm-ink-soft); margin: 0 2px 8px; }
.hm-results-bar b { color: var(--hm-ink); font-weight: 600; }
.hm-feat { position: relative; background: #fff; border-radius: 16px; box-shadow: 0 0 0 2px var(--hm-gold-deep), 0 26px 50px -26px rgb(120 80 10 / .5); z-index: 1; }
.hm-feat .hm-ph { position: relative; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 15px 15px 0 0; background: #cfd4d8; }
.hm-feat .hm-ph img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hm-badges { position: absolute; left: 10px; top: 10px; right: 64px; z-index: 2; display: flex; flex-wrap: wrap; gap: 6px; }
.hm-yours { background: var(--hm-gold); color: var(--hm-ink); font-weight: 600; font-size: 13px; line-height: 1; padding: 6px 10px; border-radius: 999px; box-shadow: 0 2px 6px rgb(0 0 0 / .15); }
.hm-chip { font-size: 12.5px; font-weight: 600; line-height: 1.3; background: rgb(255 255 255 / .95); color: var(--hm-ink); padding: 4px 9px; border-radius: 7px; display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.hm-chip svg { width: 13px; height: 13px; color: var(--hm-blue); }
.hm-count { position: absolute; right: 10px; top: 10px; z-index: 2; font-size: 12.5px; font-weight: 500; line-height: 1.3; background: rgb(26 23 18 / .72); color: #fff; padding: 4px 8px; border-radius: 7px; }
.hm-feat .hm-bd { padding: 12px 14px 14px; display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; align-items: end; }
@media (min-width: 700px) { .hm-feat .hm-bd { padding: 16px 18px 18px; } }
.hm-feat .hm-pr { font-family: var(--hm-display); font-size: 30px; line-height: 1; letter-spacing: .02em; }
@media (min-width: 700px) { .hm-feat .hm-pr { font-size: 38px; } }
.hm-feat .hm-ti { font-weight: 600; font-size: 16px; line-height: 1.3; grid-column: 1; }
.hm-feat .hm-su { font-size: 13.5px; color: var(--hm-ink-soft); grid-column: 1; }
.hm-specs { display: flex; gap: 12px; font-size: 13.5px; color: var(--hm-ink-soft); }
.hm-specs span { display: inline-flex; align-items: center; gap: 4px; }
.hm-specs svg { width: 17px; height: 17px; }
.hm-feat .hm-specs { grid-column: 2; grid-row: 1 / span 3; align-self: end; }
@media (max-width: 400px) { .hm-feat .hm-specs { gap: 8px; font-size: 12.5px; } }
.hm-rows { margin-top: 8px; display: grid; gap: 6px; }
@media (min-width: 700px) { .hm-rows { margin-top: 10px; gap: 8px; } }
.hm-row { display: grid; grid-template-columns: 72px minmax(0, 1fr); align-items: center; gap: 12px; padding: 5px; border-radius: 10px; background: rgb(255 255 255 / .55); border: 1px solid var(--hm-line); opacity: .78; }
@media (min-width: 700px) { .hm-row { grid-template-columns: 112px minmax(0, 1fr); } }
.hm-row .hm-orow { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 6px; filter: grayscale(.55) brightness(.97); }
.hm-row .hm-t { display: grid; grid-template-columns: auto 1fr; column-gap: 12px; align-items: baseline; min-width: 0; }
.hm-row .hm-ti { grid-column: 1 / -1; font-size: 13.5px; font-weight: 600; color: var(--hm-ink-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hm-row .hm-specs { grid-column: 2; grid-row: 1; justify-content: flex-end; gap: 10px; font-size: 12.5px; }
.hm-row .hm-specs svg { width: 14px; height: 14px; }
@media (min-width: 700px) { .hm-row .hm-t { grid-template-columns: 1fr; gap: 1px; } .hm-row .hm-specs { grid-column: 1; grid-row: auto; justify-content: flex-start; } }
.hm-row .hm-pr { font-family: var(--hm-display); font-size: 20px; line-height: 1; letter-spacing: .02em; color: var(--hm-ink-soft); }
.hm-results-note { font-size: 12.5px; color: var(--hm-ink-soft); margin: 8px 2px 0; }

/* ---------- the whole listing: mosaic beside the heading, benefits below ---------- */
.hm-whole { background: var(--hm-warm); }
.hm-whole-grid { display: grid; gap: 22px; }
.hm-whole-grid > * { min-width: 0; }
.hm-whole-grid .hm-h2 { max-width: 12ch; }
@media (min-width: 980px) { .hm-whole-grid { grid-template-columns: minmax(280px, .55fr) 1.85fr; column-gap: 56px; align-items: center; } }
.hm-wh-head .hm-intro { margin-top: 10px; }
.hm-tap-hint { display: inline-flex; align-items: center; gap: 8px; margin-top: 14px; font-size: 15px; font-weight: 600; color: var(--hm-blue); }
.hm-tap-hint svg { width: 20px; height: 20px; }
.hm-mosaic { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; }
@media (min-width: 700px) { .hm-mosaic { gap: 10px; } }
/* flip = two stacked photos, opacity only; nothing about the tile's box changes */
.hm-tile { position: relative; display: block; width: 100%; min-height: 48px; aspect-ratio: 16 / 9; border-radius: 10px; overflow: hidden; background: #cfd4d8; contain: layout paint; transform: translateZ(0); }
.hm-tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: var(--op, 50% 50%); }
.hm-tile.hm-lead img { object-position: var(--op, 100% 100%); }
.hm-tile .hm-o { opacity: 0; }
/* JS-only photos stay out of layout (so never fetched) until home.js marks them near */
.hm-mosaic:not(.is-warm) .hm-o { display: none; }
.hm-tile[aria-pressed="true"] .hm-o { opacity: 1; }
.hm-lab { position: absolute; left: 6px; top: 6px; max-width: calc(100% - 48px); display: grid; justify-items: start; font-size: 12px; font-weight: 600; line-height: 1.25; text-align: left; }
.hm-lab span { grid-area: 1 / 1; background: rgb(255 255 255 / .94); color: var(--hm-ink); padding: 3px 8px; border-radius: 6px; white-space: nowrap; }
.hm-lab .hm-p { opacity: 0; background: var(--hm-ink); color: #fff; }
.hm-tile[aria-pressed="true"] .hm-lab .hm-s { opacity: 0; }
.hm-tile[aria-pressed="true"] .hm-lab .hm-p { opacity: 1; }
.hm-fl { position: absolute; right: 6px; top: 6px; width: 30px; height: 30px; border-radius: 50%; background: rgb(255 255 255 / .94); color: var(--hm-blue); display: grid; place-items: center; box-shadow: 0 1px 4px rgb(0 0 0 / .2); }
.hm-fl svg { width: 16px; height: 16px; }
.hm-tile:hover .hm-fl { background: #fff; }
@media (min-width: 700px) { .hm-lab { font-size: 13px; left: 8px; top: 8px; } .hm-fl { right: 8px; top: 8px; } }
/* every source is 16:9, so every tile is 16:9 except the lead, which spans two rows on desktop */
.hm-m1 { grid-column: span 6; } .hm-m2, .hm-m3, .hm-m4, .hm-m5 { grid-column: span 3; } .hm-m6 { grid-column: span 6; }
@media (min-width: 700px) {
  .hm-m1 { grid-column: span 4; grid-row: span 2; aspect-ratio: auto; }
  .hm-m2, .hm-m3, .hm-m4, .hm-m5, .hm-m6 { grid-column: span 2; }
}
/* the first-view demo's cue (home.js adds it to the lead tile) */
.hm-cue { position: absolute; left: 50%; top: 50%; width: 64px; height: 64px; margin: -32px 0 0 -32px; border-radius: 50%; pointer-events: none; opacity: 0; z-index: 3; }
.hm-cue::before, .hm-cue::after { content: ""; position: absolute; inset: 0; border-radius: 50%; }
.hm-cue::before { background: rgb(255 255 255 / .9); box-shadow: 0 4px 16px rgb(0 0 0 / .3); transform: scale(.42); }
.hm-cue::after { border: 3px solid #fff; }
.hm-cue.is-on { opacity: 1; }
.hm-mosaic-foot { margin-top: 12px; display: flex; flex-wrap: wrap; gap: 4px 18px; align-items: center; font-size: 14px; color: var(--hm-ink-soft); }
.hm-mosaic-foot button { min-height: 48px; min-width: 48px; color: var(--hm-blue); font-weight: 600; font-size: 15px; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }
.hm-benefits { margin-top: 32px; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
@media (min-width: 980px) { .hm-benefits { grid-template-columns: repeat(6, 1fr); gap: 12px; } }
.hm-benefits li { background: rgb(255 255 255 / .7); border-radius: 14px; padding: 14px 12px; display: grid; gap: 8px; align-content: start; }
.hm-benefits svg { width: 30px; height: 30px; color: var(--hm-blue); }
.hm-benefits b { font-weight: 600; font-size: 15.5px; line-height: 1.3; }
.hm-benefits span { font-size: 13.5px; color: var(--hm-ink-soft); line-height: 1.35; }
.hm-wh-foot { margin-top: 18px; display: grid; gap: 12px; }
@media (min-width: 700px) { .hm-wh-foot { display: flex; align-items: center; justify-content: space-between; gap: 24px; } .hm-wh-foot > div:only-child { margin-left: auto; } }
.hm-wh-foot p { font-size: 14.5px; color: var(--hm-ink-soft); max-width: 40rem; }
.hm-wh-foot .hm-btn { width: 100%; }
@media (min-width: 560px) { .hm-wh-foot .hm-btn { width: auto; } }

/* ---------- every angle, same furniture: the showpiece ---------- */
.hm-cont { background: var(--hm-card); }
.hm-cont-head, .hm-pricing-head { display: grid; gap: 12px; }
@media (min-width: 980px) {
  .hm-cont-head, .hm-pricing-head { grid-template-columns: 1fr 1fr; align-items: end; gap: 56px; }
  .hm-cont-head .hm-intro, .hm-pricing-head .hm-intro { margin-top: 0; }
}
.hm-show { margin-top: 24px; display: grid; gap: 14px; }
.hm-show > * { min-width: 0; }
@media (min-width: 980px) { .hm-show { grid-template-columns: 1.7fr .8fr; gap: 28px; align-items: center; } }
.hm-stage3 { position: relative; aspect-ratio: 16 / 9; border-radius: 14px; overflow: hidden; background: #d6d9dc; }
.hm-stage3 figure { position: absolute; inset: 0; opacity: 0; }
.hm-stage3 figure.on { opacity: 1; }
.hm-stage3:not(.is-warm) figure:not(.on) { display: none; }
.hm-stage3 img { width: 100%; height: 100%; object-fit: cover; }
.hm-mk { position: absolute; width: 28px; height: 28px; margin: -14px 0 0 -14px; border-radius: 50%; background: var(--hm-gold); color: var(--hm-ink); border: 2px solid #fff;
  display: grid; place-items: center; font-size: 13px; font-weight: 700; line-height: 1; box-shadow: 0 2px 8px rgb(0 0 0 / .35); }
@media (min-width: 700px) { .hm-mk { width: 32px; height: 32px; margin: -16px 0 0 -16px; font-size: 14px; } }
.hm-which { position: absolute; left: 10px; top: 10px; background: rgb(255 255 255 / .95); font-size: 13px; font-weight: 600; line-height: 1.3; padding: 4px 10px; border-radius: 999px; }
.hm-legend { display: grid; gap: 10px; }
.hm-pick3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.hm-pick3 button { position: relative; min-height: 48px; display: grid; align-content: start; text-align: left; border-radius: 10px; overflow: hidden; }
.hm-pick3 img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 10px; opacity: .7; }
.hm-pick3 span { font-size: 13px; font-weight: 600; line-height: 1.3; padding: 6px 2px 0; color: var(--hm-ink-soft); }
.hm-pick3 i { position: absolute; left: 0; right: 0; top: 0; z-index: 1; height: 3px; background: var(--hm-blue); transform: scaleX(0); transform-origin: left; }
.hm-pick3 button[aria-pressed="true"] img { opacity: 1; outline: 3px solid var(--hm-blue); outline-offset: -3px; }
.hm-pick3 button[aria-pressed="true"] span { color: var(--hm-ink); }
.hm-legend ol { display: flex; flex-wrap: wrap; gap: 8px 18px; }
.hm-legend li { display: flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 600; }
.hm-legend li b { flex: none; width: 26px; height: 26px; border-radius: 50%; background: var(--hm-gold); display: grid; place-items: center; font-size: 13px; }
@media (min-width: 980px) { .hm-legend ol { display: grid; gap: 12px; } .hm-legend { gap: 16px; } }

/* ---------- how done for you works: sticky card (desktop), a picture per step (phone) ---------- */
.hm-story { background: var(--hm-card); }
.hm-story-grid { margin-top: 32px; display: grid; }
.hm-story-grid > * { min-width: 0; }
.hm-stage { display: none; }
@media (min-width: 980px) {
  .hm-story-grid { grid-template-columns: 1.1fr .9fr; gap: 64px; }
  .hm-stage { display: block; position: sticky; top: 104px; align-self: start; }
  .hm-step .hm-sfig { display: none; }
}
.hm-pcard { position: relative; border: 1px solid var(--hm-line); border-radius: 16px; overflow: hidden; background: #fff; box-shadow: 0 24px 60px -34px rgb(20 40 60 / .35); }
.hm-pcard-main { position: relative; aspect-ratio: 16 / 9; background: #cfd4d8; overflow: hidden; }
.hm-pcard-main img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.04); }
.hm-pcard-main img.on { opacity: 1; transform: none; }
.hm-thumbs { display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; padding: 4px; }
.hm-thumbs .hm-t { position: relative; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 4px; background: #d7dbdf; }
.hm-thumbs img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hm-thumbs .hm-s { opacity: 0; }
.hm-pcard:not([data-step="1"]) .hm-thumbs .hm-s { opacity: 1; }
.hm-pcard-bd { padding: 14px 16px 16px; display: grid; gap: 6px; }
.hm-pcard-row, .hm-mini-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.hm-pcard .hm-pr { font-family: var(--hm-display); font-size: 32px; line-height: 1; letter-spacing: .02em; }
.hm-pcard .hm-ti { font-weight: 600; }
.hm-status { font-size: 13px; font-weight: 600; line-height: 1.3; padding: 4px 10px; border-radius: 999px; background: var(--hm-morning); color: var(--hm-ink-soft); white-space: nowrap; }
.hm-pcard[data-step="5"] .hm-status, .hm-status.hm-ok { background: #E4F3EA; color: #146B38; }
.hm-thumbs, .hm-desc { position: relative; }
.hm-desc { font-size: 14px; color: var(--hm-ink-soft); min-height: 4.7em; }
.hm-ph-line { display: block; height: 10px; border-radius: 4px; background: var(--hm-morning); margin: 6px 0; }
.hm-ph-line:nth-child(2) { width: 86%; } .hm-ph-line:nth-child(3) { width: 62%; }
.hm-caret { display: inline-block; width: 2px; height: 1em; background: var(--hm-blue); vertical-align: -2px; margin-left: 1px; }
.hm-upd { position: absolute; z-index: 4; top: 12px; right: 12px; background: var(--hm-blue); color: #fff; font-size: 12.5px; font-weight: 600; line-height: 1.3; padding: 4px 10px; border-radius: 999px; opacity: 0; transform: translateY(4px); pointer-events: none; }
.hm-steps { display: grid; gap: 36px; }
@media (min-width: 980px) { .hm-steps { gap: 0; } }
.hm-step { display: grid; gap: 14px; }
@media (min-width: 980px) { .hm-step { min-height: 50vh; align-content: center; padding: 40px 0; border-top: 1px solid var(--hm-line); } .hm-step:first-child { border-top: 0; } }
.hm-n { font-family: var(--hm-display); font-size: 22px; line-height: 1; color: var(--hm-blue); letter-spacing: .03em; }
.hm-step h3 { font-family: var(--hm-display); font-weight: 400; font-size: clamp(1.9rem, 7vw, 2.8rem); line-height: 1; margin-top: 4px; }
.hm-step > p { font-size: 16.5px; color: var(--hm-ink-soft); max-width: 26rem; }
.hm-step > p b { color: var(--hm-ink); font-weight: 600; }
.hm-sfig { position: relative; border-radius: 12px; overflow: hidden; background: #fff; border: 1px solid var(--hm-line); box-shadow: 0 14px 30px -22px rgb(20 40 60 / .5); }
.hm-sfig > picture img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.hm-tag { position: absolute; left: 8px; top: 8px; font-size: 12.5px; font-weight: 600; line-height: 1.3; background: rgb(255 255 255 / .94); padding: 3px 9px; border-radius: 999px; }
.hm-sgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 3px; background: #fff; }
.hm-sgrid img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.hm-mini { padding: 12px 14px 14px; display: grid; gap: 4px; }
.hm-mini .hm-pr { font-family: var(--hm-display); font-size: 26px; line-height: 1; }
.hm-mini .hm-ti { font-weight: 600; font-size: 15px; }
.hm-mini p { font-size: 14px; color: var(--hm-ink-soft); }
.hm-mini .hm-status { font-size: 12.5px; }

/* ---------- the listing video: a phone beside the points (only while reel.marketed()) ----------
   The phone is the mandate tablet's bezel at phone proportions. The video's width and
   height attributes and its aspect-ratio hold the box before anything loads (no shift). */
.hm-reel { background: var(--hm-night); color: var(--hm-night-ink); }
.hm-reel :where(:focus-visible) { outline-color: #fff; }
.hm-reel .hm-intro { color: var(--hm-night-soft); }
.hm-reel-grid { display: grid; gap: 28px; }
.hm-reel-grid > * { min-width: 0; }
@media (min-width: 980px) {
  .hm-reel-grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); grid-template-areas: "head fig" "body fig"; column-gap: 72px; row-gap: 32px; }
  .hm-reel-head { grid-area: head; align-self: end; }
  .hm-reel-fig { grid-area: fig; align-self: center; }
  .hm-reel-body { grid-area: body; align-self: start; }
  .hm-reel-grid.hm-reel-solo { grid-template-columns: minmax(0, 880px); grid-template-areas: "head" "body"; }
}
.hm-reel-fig { justify-self: center; width: min(100%, 300px); }
@media (min-width: 980px) { .hm-reel-fig { width: 340px; } }
.hm-phone { padding: 10px; border-radius: 40px; background: #0B0A10; line-height: 0; box-shadow: 0 0 0 1.5px #3A3650, 0 30px 60px -30px rgb(0 0 0 / .8); }
.hm-reel-video { display: block; width: 100%; height: auto; aspect-ratio: 9 / 16; border-radius: 30px; background: #000; object-fit: cover; }
.hm-reel-note { margin-top: 12px; font-size: 13px; line-height: 1.4; color: var(--hm-night-soft); text-align: center; }
.hm-reel-points { display: grid; gap: 16px; }
@media (min-width: 700px) and (max-width: 979px) { .hm-reel-points { grid-template-columns: 1fr 1fr; gap: 18px 28px; } }
.hm-reel-points li { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 12px; font-size: 15.5px; line-height: 1.45; color: var(--hm-night-soft); }
.hm-reel-points b { display: block; color: #fff; font-weight: 600; font-size: 17px; line-height: 1.3; }
.hm-reel-points svg { width: 26px; height: 26px; color: var(--hm-gold); }
.hm-reel-sound { margin-top: 22px; font-size: 15px; color: var(--hm-night-soft); border-left: 3px solid var(--hm-gold); padding-left: 12px; max-width: 34rem; }
.hm-reel-cta { margin-top: 26px; }
.hm-reel-cta .hm-btn { width: 100%; }
@media (min-width: 560px) { .hm-reel-cta .hm-btn { width: auto; } }

/* ---------- eight styles: tap to swap one room ---------- */
.hm-sty { background: var(--hm-morning); }
.hm-sty-grid { display: grid; gap: 22px; }
.hm-sty-grid > * { min-width: 0; }
@media (min-width: 980px) { .hm-sty-grid { grid-template-columns: .8fr 1.6fr; gap: 56px; align-items: center; } }
.hm-leave { margin-top: 14px; display: flex; gap: 10px; align-items: flex-start; font-size: 15.5px; color: var(--hm-ink-soft); }
.hm-leave b { color: var(--hm-ink); font-weight: 600; }
.hm-leave svg { width: 20px; height: 20px; color: var(--hm-blue); flex: none; margin-top: 2px; }
.hm-styview { position: relative; aspect-ratio: 16 / 9; border-radius: 14px; overflow: hidden; background: #cfd4d8; }
.hm-styview img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hm-styview .hm-back { opacity: 0; }
.hm-now { position: absolute; left: 10px; top: 10px; z-index: 1; background: rgb(255 255 255 / .95); font-size: 13px; font-weight: 600; line-height: 1.3; padding: 4px 10px; border-radius: 999px; }
.hm-sstripwrap { position: relative; margin-top: 12px; }
.hm-sstrip { display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x proximity; overscroll-behavior-x: contain; padding: 3px 3px 6px; scrollbar-width: none; }
.hm-sstrip::-webkit-scrollbar { display: none; }
.hm-sstrip button { scroll-snap-align: start; flex: 0 0 104px; min-height: 48px; display: grid; gap: 6px; align-content: start; text-align: left; border-radius: 8px; }
.hm-sstrip img { width: 104px; height: 59px; object-fit: cover; border-radius: 8px; box-shadow: 0 0 0 1px var(--hm-line); }
.hm-sstrip span { font-size: 13.5px; font-weight: 500; line-height: 1.3; color: var(--hm-ink-soft); white-space: nowrap; padding-left: 2px; }
.hm-sstrip button:focus-visible { outline-offset: -3px; }   /* the scroll strip would clip an outer ring */
.hm-sstrip button[aria-pressed="true"] img { box-shadow: 0 0 0 3px var(--hm-blue); }
.hm-sstrip button[aria-pressed="true"] span { color: var(--hm-ink); font-weight: 600; }
.hm-sstripwrap::after { content: ""; position: absolute; top: 0; right: 0; bottom: 0; width: 56px; pointer-events: none; background: linear-gradient(90deg, rgb(237 241 244 / 0), var(--hm-morning) 85%); }
.hm-more { position: absolute; right: 0; top: 8px; z-index: 1; width: 48px; height: 48px; border-radius: 50%; background: #fff; color: var(--hm-ink); box-shadow: 0 2px 10px rgb(0 0 0 / .18); display: grid; place-items: center; }
.hm-page .hm-more:hover { background: #fff; }
.hm-more svg { width: 20px; height: 20px; }
.hm-sstripwrap.is-end::after, .hm-sstripwrap.is-end .hm-more { opacity: 0; pointer-events: none; }
@media (min-width: 1100px) {
  .hm-sstrip { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); overflow: visible; padding: 0; }
  .hm-sstrip button { flex: none; }
  .hm-sstrip img { width: 100%; height: auto; aspect-ratio: 16 / 9; }
  .hm-sstrip span { white-space: normal; font-size: 13px; }
  .hm-sstripwrap::after, .hm-more { display: none; }
}

/* ---------- price list, honesty strip beneath ---------- */
.hm-pricing { background: var(--hm-warm); }
.hm-plans { margin-top: 32px; display: grid; gap: 16px; }
@media (min-width: 980px) {
  .hm-plans { grid-template-columns: 1.6fr 1fr; gap: 24px; align-items: stretch; }
  .hm-plans-solo { grid-template-columns: minmax(0, 880px); }
}
.hm-plan { border-radius: 20px; padding: 22px 18px; border: 1px solid var(--hm-line); display: flex; flex-direction: column; gap: 16px; min-width: 0; background: rgb(255 255 255 / .5); }
@media (min-width: 560px) { .hm-plan { padding: 32px; } }
.hm-plan-main { background: #fff; border: 0; box-shadow: inset 0 0 0 2px var(--hm-blue), 0 20px 40px -30px rgb(60 40 10 / .4); }
.hm-plan h3 { font-size: 20px; font-weight: 600; }
.hm-who { color: var(--hm-ink-soft); margin-top: -8px; }
.hm-amount { display: flex; align-items: baseline; gap: 6px 10px; flex-wrap: wrap; }
.hm-big { font-family: var(--hm-display); font-size: 4.4rem; line-height: .85; letter-spacing: .01em; }
@media (min-width: 700px) { .hm-big { font-size: 5rem; } }
.hm-per { color: var(--hm-ink-soft); font-size: 16px; }
.hm-bundle { background: var(--hm-warm); border-radius: 12px; padding: 12px 14px; font-size: 15px; display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: center; }
.hm-bundle b { font-weight: 600; }
.hm-save { margin-left: auto; font-family: var(--hm-display); font-size: 1.6rem; line-height: 1.1; color: var(--hm-blue); letter-spacing: .02em; white-space: nowrap; }
.hm-incl { display: grid; gap: 10px; }
@media (min-width: 560px) { .hm-plan-main .hm-incl { grid-template-columns: 1fr 1fr; } }
.hm-incl li { display: flex; gap: 10px; font-size: 15.5px; }
.hm-incl svg { width: 20px; height: 20px; flex: none; color: var(--hm-blue); margin-top: 2px; }
.hm-remedy { font-size: 15px; background: var(--hm-warm); border-radius: 12px; padding: 12px 14px; }
.hm-plan-foot { margin-top: auto; display: grid; gap: 6px; }
.hm-plan-foot .hm-btn { width: 100%; }
@media (min-width: 560px) { .hm-plan-foot { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; } .hm-plan-foot .hm-btn { width: auto; } }
.hm-free { display: flex; gap: 10px; align-items: center; font-weight: 600; }
.hm-free svg { width: 22px; height: 22px; color: var(--hm-gold-deep); flex: none; }
.hm-packs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.hm-packs li { background: #fff; border-radius: 12px; padding: 12px 6px; text-align: center; }
.hm-pp { font-family: var(--hm-display); font-size: 1.9rem; line-height: 1; letter-spacing: .02em; }
.hm-pq { font-size: 13.5px; color: var(--hm-ink-soft); margin-top: 2px; }
.hm-trust { margin-top: 28px; display: grid; gap: 16px; padding: 20px 18px; border-radius: 18px; background: var(--hm-warm-2); }
@media (min-width: 700px) { .hm-trust { grid-template-columns: 199px minmax(0, 1fr); gap: 12px 28px; padding: 24px 28px; align-items: center; } }
.hm-trust-top { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
@media (min-width: 700px) { .hm-trust-top { display: contents; } }
/* the loupe crops the real mark off a staged photo: 199 x 75, never scaled */
.hm-loupe img { width: 199px; height: 75px; flex: none; object-fit: cover; border-radius: 12px; box-shadow: 0 0 0 3px #fff, 0 6px 16px rgb(0 0 0 / .22); }
@media (min-width: 700px) { .hm-trust-top img { grid-row: 1 / span 2; } }
.hm-trust h3 { font-family: var(--hm-display); font-weight: 400; font-size: 2rem; line-height: 1; }
.hm-trust ul { display: grid; gap: 10px; }
@media (min-width: 980px) { .hm-trust ul { grid-template-columns: repeat(3, 1fr); gap: 20px; } }
.hm-trust li { display: grid; grid-template-columns: 24px 1fr; gap: 10px; font-size: 15px; color: var(--hm-ink-soft); }
.hm-trust li b { color: var(--hm-ink); font-weight: 600; }
.hm-trust li svg { width: 22px; height: 22px; color: var(--hm-blue); }
.hm-trust .hm-tlink { grid-column: 1 / -1; justify-self: start; }
@media (min-width: 700px) { .hm-trust .hm-tlink { grid-column: 2; } }

/* ---------- mandate: tablet left, text right ---------- */
.hm-mandate { background: var(--hm-blue-deep); color: #fff; }
.hm-mandate .hm-wrap { display: grid; gap: 32px; align-items: start; }
.hm-mandate .hm-wrap > * { min-width: 0; }
@media (min-width: 980px) { .hm-mandate .hm-wrap { grid-template-columns: 1.1fr .9fr; gap: 72px; } .hm-tabwrap { order: -1; } }
.hm-mandate .hm-h2 { margin-top: -4px; }
@media (min-width: 980px) { .hm-mandate .hm-h2 { margin-top: -6px; } }
.hm-mlist { margin-top: 24px; display: grid; gap: 12px; }
.hm-mlist li { display: flex; gap: 12px; font-size: 16.5px; }
.hm-mlist svg { width: 22px; height: 22px; flex: none; color: var(--hm-gold); margin-top: 2px; }
.hm-stat { margin-top: 24px; font-size: 15px; color: var(--hm-mist); border-left: 3px solid var(--hm-gold); padding-left: 14px; max-width: 34rem; }
.hm-stat b { color: #fff; font-weight: 600; }
.hm-stat small { display: block; margin-top: 4px; font-size: 13.5px; }
.hm-stat a { color: #fff; text-decoration-color: var(--hm-gold); }
.hm-tablet { border-radius: 30px; padding: 12px; background: #0B0A10; line-height: 0; box-shadow: 0 0 0 1.5px #3A3650, 0 30px 60px -30px rgb(0 0 0 / .7); }
@media (min-width: 700px) { .hm-tablet { padding: 16px; border-radius: 36px; } }
.hm-ba { border-radius: 14px; background: #1b1a22; }
.hm-ba img { object-fit: cover; }
.hm-ba .ba-divider::before { inset: 0 -24px; }
.hm-ba .ba-knob { width: 44px; height: 44px; font-size: 1.1rem; line-height: 1; }

/* ---------- sourced stats ---------- */
.hm-stats { background: var(--hm-card); }
.hm-stats-lead { font-family: var(--hm-display); font-weight: 400; font-size: clamp(2rem, 6vw, 3.2rem); line-height: 1; max-width: 20ch; text-wrap: balance; }
.hm-stats-lead b { font-weight: 400; color: var(--hm-blue); }
.hm-fnb { margin-top: 16px; font-size: 14px; color: var(--hm-ink-soft); }
.hm-figs { margin-top: 28px; display: grid; gap: 14px; }
@media (min-width: 700px) { .hm-figs { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; } }
.hm-fig { background: var(--hm-warm); border-radius: 16px; padding: 20px 18px 10px; display: flex; flex-direction: column; gap: 8px; }
.hm-v { font-family: var(--hm-display); font-size: 3.4rem; line-height: .9; }
.hm-fig p { font-size: 15px; }
.hm-fig .hm-src { margin-top: auto; font-size: 13.5px; color: var(--hm-ink-soft); }
.hm-region { font-weight: 600; color: var(--hm-ink); }
.hm-stat .hm-region { color: #fff; }

/* ---------- questions ---------- */
.hm-faq { background: var(--hm-morning); }
.hm-faq .hm-wrap { display: grid; gap: 24px; }
.hm-faq .hm-wrap > * { min-width: 0; }
@media (min-width: 980px) { .hm-faq .hm-wrap { grid-template-columns: .8fr 1.2fr; gap: 72px; } }
.hm-faq details { border-top: 1px solid var(--hm-line); }
.hm-faq details:last-child { border-bottom: 1px solid var(--hm-line); }
.hm-faq-q { list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: 16px; align-items: center; padding: 14px 0; min-height: 60px;
  font-weight: 600; font-size: 17px; line-height: 1.35; color: var(--hm-ink); }
.hm-faq-q::-webkit-details-marker { display: none; }
.hm-faq-q svg { width: 22px; height: 22px; flex: none; color: var(--hm-blue); }
.hm-faq details[open] .hm-faq-q svg { transform: rotate(45deg); }
.hm-faq details p { padding: 0 0 18px; color: var(--hm-ink-soft); max-width: 66ch; }

/* ---------- the close, at dusk ---------- */
.hm-close { position: relative; background: var(--hm-night); color: var(--hm-night-ink); overflow: hidden; }
.hm-close-img { position: absolute; inset: 0; }
.hm-close-img img { width: 100%; height: 100%; object-fit: cover; opacity: .55; }
.hm-close-img::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgb(35 30 54 / .72), rgb(35 30 54 / .94) 70%); }
@media (min-width: 980px) { .hm-close-img::after { background: linear-gradient(90deg, rgb(35 30 54 / .96), rgb(35 30 54 / .78) 50%, rgb(35 30 54 / .25)); } }
.hm-close .hm-wrap { position: relative; padding-block: 72px; }
@media (min-width: 980px) { .hm-close .hm-wrap { padding-block: 112px; } }
.hm-close .hm-h2 { max-width: 12ch; }
.hm-close .hm-intro { color: var(--hm-night-soft); }
.hm-close-cta { margin-top: 28px; display: grid; gap: 10px; }
.hm-close-cta .hm-btn { width: 100%; }
@media (min-width: 560px) { .hm-close-cta { display: flex; flex-wrap: wrap; gap: 12px; } .hm-close-cta .hm-btn { width: auto; } }
.hm-close .hm-btn-ghost { color: #fff; box-shadow: inset 0 0 0 2px rgb(255 255 255 / .75); }
.hm-close .hm-btn-ghost:hover { background: rgb(255 255 255 / .1); color: #fff; }
.hm-tlink.hm-light { margin-top: 8px; color: #fff; text-decoration-color: var(--hm-gold); overflow-wrap: anywhere; }
/* signups closed: the enquiry form (legacy card lp-form classes) as a light card on the dusk */
.hm-form { margin: 28px 0 0; max-width: 30rem; padding: 22px 18px; border: 0; border-radius: 16px; background: #fff; color: var(--hm-ink); box-shadow: 0 30px 60px -30px rgb(0 0 0 / .6); }
@media (min-width: 560px) { .hm-form { padding: 28px; } }
.hm-form label { color: var(--hm-ink-soft); font-size: 15px; }
.hm-form input:not([type=hidden]) { min-height: 48px; max-width: none; font-size: 16px; border-radius: 10px; }
.hm-form .lp-form-submit { margin-top: 18px; }
.hm-form .lp-form-submit .hm-btn { width: 100%; }
.hm-form .field-hint { font-size: 13.5px; color: var(--hm-ink-soft); margin-top: 10px; }

/* ---------- phone thumb bar (fixed; hidden from 900 px) ---------- */
.hm-thumbbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; padding: 10px var(--hm-g) calc(10px + env(safe-area-inset-bottom)); background: rgb(255 255 255 / .97);
  border-top: 1px solid var(--hm-line); display: grid; grid-template-columns: 1fr auto; gap: 8px; align-items: center; font-family: var(--hm-body); }
.hm-thumbbar .hm-alt { display: grid; place-items: center; min-width: 76px; min-height: 52px; padding: 0 8px; border-radius: 12px; font-size: 14px; font-weight: 600; line-height: 1.2; text-align: center; color: var(--hm-blue); text-decoration: none; box-shadow: inset 0 0 0 2px var(--hm-blue); }
.hm-thumbbar.is-hidden { transform: translateY(110%); visibility: hidden; }
@media (min-width: 900px) { .hm-thumbbar { display: none; } }
@media (max-width: 899px) {
  main.hm-page ~ .lp-footer { padding-bottom: calc(var(--hm-bar, 76px) + 32px); }
  html:has(main.hm-page) { scroll-padding-bottom: calc(76px + 12px); }
}

/* ======================= motion ======================= */
@media (prefers-reduced-motion: no-preference) {
  html:has(main.hm-page) { scroll-behavior: smooth; }

  /* hero: the one orchestrated moment. home.js adds .is-go once the staged photo
     is decoded (fallback 1.5 s); without home.js the CSS-only wipe runs at 2.5 s,
     and the lift, badges and dimming follow it either way. */
  html.hm-motion .hm-staged { clip-path: inset(0 100% 0 0);
    animation: hm-wipe .8s 2.5s cubic-bezier(.65,0,.35,1) forwards; }   /* CSS-only fallback */
  /* the gold edge is a pseudo-element that fades in: only transform and opacity animate */
  html.hm-motion .hm-feat { box-shadow: 0 0 0 1px var(--hm-line); animation: hm-lift .3s 3.25s ease-out forwards; }
  html.hm-motion .hm-feat::after { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: 16px; pointer-events: none;
    box-shadow: 0 0 0 2px var(--hm-gold-deep), 0 26px 50px -26px rgb(120 80 10 / .5); opacity: 0; animation: hm-fade .3s 3.25s ease-out forwards; }
  html.hm-motion .hm-yours, html.hm-motion .hm-chip { opacity: 0; animation: hm-fade .25s 3.3s forwards; }
  html.hm-motion .hm-row { opacity: 1; animation: hm-dim .3s 3.25s forwards; }
  html.hm-motion .hm-results.is-go .hm-staged { animation-delay: .05s; }
  html.hm-motion .hm-results.is-go .hm-feat,
  html.hm-motion .hm-results.is-go .hm-feat::after { animation-delay: .8s; }
  html.hm-motion .hm-results.is-go .hm-yours,
  html.hm-motion .hm-results.is-go .hm-chip { animation-delay: .85s; }
  html.hm-motion .hm-results.is-go .hm-row { animation-delay: .8s; }
  /* home.js holds the whole moment (the CSS-only wipe included) while the staged photo
     is still loading, then .is-go replays it: never a staged badge over the original */
  html.hm-motion .hm-results.is-wait :is(.hm-staged, .hm-feat, .hm-yours, .hm-chip, .hm-row),
  html.hm-motion .hm-results.is-wait .hm-feat::after { animation: none; }
  @keyframes hm-wipe { to { clip-path: inset(0 0 0 0); } }
  @keyframes hm-lift { to { transform: translateY(-4px); } }
  @keyframes hm-fade { to { opacity: 1; } }
  @keyframes hm-dim { to { opacity: .78; } }

  /* mosaic: a flip is two stacked photos cross-fading */
  .hm-tile img { transition: opacity .4s ease; }
  .hm-lab span { transition: opacity .2s ease; }
  .hm-cue { transition: opacity .25s ease; }   /* fades in and out */
  .hm-cue.is-on::after { animation: hm-ring 1.1s ease-out 2; }
  @keyframes hm-ring { from { transform: scale(.4); opacity: 1; } to { transform: scale(1.25); opacity: 0; } }

  /* every angle */
  .hm-stage3 figure { transition: opacity 1s ease; }
  .hm-stage3 figure.on .hm-mk { animation: hm-pop .5s .4s both; }
  .hm-stage3 figure.on .hm-mk:nth-of-type(2) { animation-delay: .52s; }
  .hm-stage3 figure.on .hm-mk:nth-of-type(3) { animation-delay: .64s; }
  .hm-pick3 img { transition: opacity .2s ease; }
  .hm-pick3.is-run button[aria-pressed="true"] i { animation: hm-fill var(--dwell, 5.4s) linear forwards; }
  @keyframes hm-pop { from { transform: scale(.5); opacity: 0; } to { transform: none; opacity: 1; } }
  @keyframes hm-fill { to { transform: scaleX(1); } }

  /* story: the card shows what just changed */
  .hm-pcard-main img { transition: opacity .5s ease, transform .7s cubic-bezier(.2,.7,.2,1); }
  .hm-thumbs img { transition: opacity .25s ease; }
  .hm-thumbs .hm-t:nth-child(2) .hm-s { transition-delay: .05s; } .hm-thumbs .hm-t:nth-child(3) .hm-s { transition-delay: .1s; }
  .hm-thumbs .hm-t:nth-child(4) .hm-s { transition-delay: .15s; } .hm-thumbs .hm-t:nth-child(5) .hm-s { transition-delay: .2s; }
  .hm-status.is-pop { animation: hm-pillpop .4s ease-out; }
  .hm-upd.is-show { animation: hm-upd 1.7s ease-out; }
  .hm-pcard .is-flash::after { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 3; box-shadow: inset 0 0 0 3px rgb(51 167 222 / .9); animation: hm-flash 1.4s ease-out forwards; }
  @keyframes hm-pillpop { 40% { transform: scale(1.14); } 100% { transform: none; } }
  @keyframes hm-upd { 0% { opacity: 0; transform: translateY(4px); } 15%, 75% { opacity: 1; transform: none; } 100% { opacity: 0; transform: none; } }
  @keyframes hm-flash { to { opacity: 0; } }
  /* phones: in-flow step pictures revealed as they arrive (only once home.js runs) */
  html.hm-motion.hm-js .hm-rv { opacity: 0; transform: translateY(14px); transition: opacity .6s ease, transform .7s ease; }
  html.hm-motion.hm-js .hm-rv.is-in { opacity: 1; transform: none; }

  /* styles: two stacked layers, 250 ms cross-fade */
  .hm-styview img { transition: opacity .25s ease; }
  .hm-sstripwrap::after, .hm-more { transition: opacity .2s; }

  .hm-faq-q svg { transition: transform .25s; }
  .hm-thumbbar { transition: transform .25s ease, visibility .25s; }
}