/* Home: one day at the greenhouse (round 2 storyboard, beats 01 to 10).
   world.js crossfades the scene as each beat's words rise; this sheet adds
   the board's visual under each beat's words, on glass or light panels with
   the place showing between them. Night: the Today board. Dawn: the broken
   tag and the line in the sand. Soil: six root events. Roots: Vitals. Day:
   the seven signals, the apps, and the honest states. Sunset: three steps
   and the ask. Motion is CSS first, transform and opacity, and runs once
   when world.js adds "in" to a .reveal panel. Loaded after world.css. */

[data-place="home"] {
  --c-reach: #9A84E0; --c-visits: #5FB2DE; --c-interest: #B26CB8; --c-wins: #D97E9C; --c-money: #6F92D6; --c-exp: #2FB8B1;
  --glass-green: linear-gradient(160deg, rgba(111,211,166,0.16), rgba(14,21,18,0.82) 45%);
  --app-2: #46524C; --paper-line: #DCD6C4;
  --ease-out: cubic-bezier(.2,.7,.2,1);
}
@media (prefers-reduced-motion: no-preference) { html[data-place="home"] { scroll-behavior: smooth; } }
[data-place="home"] h3 { margin: 0; font: 500 clamp(26px, 2.9vw, 36px)/1.1 var(--serif); letter-spacing: -0.01em; text-wrap: balance; }
[data-place="home"] [id] { scroll-margin-top: 88px; }
[data-place="home"] #day { scroll-margin-top: 112px; }

/* ------------------------------------------------------------ the beats
   Each beat: its words, then its panels, with the scene showing between.
   Desktop: the words arrive in the lower half of the screen, so the scene
   is whole when they do. Phones keep world.css: words below the 38% line. */
.beat > .panel { width: 100%; max-width: 1080px; margin: clamp(28px, 4vw, 40px) 0 0; padding: clamp(20px, 3.4vw, 40px); border-radius: 24px; text-shadow: none; }
.beat > .panel + .panel { margin-top: clamp(64px, 12svh, 140px); }
@media (min-width: 721px) {
  [data-place="home"] .beat:not(.hero) { justify-content: flex-start; padding-top: 52svh; padding-bottom: 18svh; }
  [data-place="home"] .beat.below { padding-top: calc(var(--soil) + 48px); }
  [data-place="home"] .beat.hm-hero { justify-content: flex-start; padding-bottom: 14svh; }
  .hm-hero .hero-copy { min-height: calc(var(--soil) - 36px); justify-content: flex-end; padding-top: 96px; }
}
@media (min-width: 721px) and (max-aspect-ratio: 4/5) {
  [data-place="home"] .beat.hm-hero { padding-bottom: 12svh; }
  .hm-hero .hero-copy { min-height: 0; padding-top: 0; }
}
@media (max-width: 720px) {
  .beat > .panel + .panel { margin-top: 10svh; }
  .beat > .panel { border-radius: 20px; }
}

/* The Example tag: every app screen, number and chart here is illustrative. */
.hm-ex { flex: none; display: inline-block; padding: 3px 9px; border-radius: 999px; background: rgba(246,243,234,0.12); color: var(--muted); font: 600 10.5px/1.4 var(--sans); letter-spacing: 0.08em; text-transform: uppercase; text-shadow: none; }
.hm-ex.light, .panel.light .hm-ex { background: rgba(17,26,23,0.07); color: var(--app-2); }

.hm-ghost { display: inline-flex; align-items: center; min-height: 52px; padding: 0 24px; border-radius: 999px; border: 1px solid rgba(246,243,234,0.38); color: var(--ivory); font-size: 16px; font-weight: 500; text-decoration: none; background: rgba(8,14,12,0.25); transition: border-color 160ms ease, background 160ms ease; }
.hm-ghost:hover { border-color: var(--mint); background: rgba(8,14,12,0.4); }
.hm-ghost:focus-visible, .hm-quiet:focus-visible, .hm-app:focus-visible, .hm-chip:focus-visible, .panel button:focus-visible, .hm-s:focus-visible, .hm-ev-card a:focus-visible, .hm-hc summary:focus-visible { outline: 2px solid var(--mint); outline-offset: 3px; }
.panel.light .hm-quiet:focus-visible, .panel.light .hm-app:focus-visible, .panel.light summary:focus-visible { outline-color: var(--mint-d); }
.hm-quiet { justify-self: start; display: inline-flex; align-items: center; gap: 6px; min-height: 44px; font-size: 15px; font-weight: 600; color: var(--mint); text-decoration: none; }
.hm-quiet:hover { text-decoration: underline; text-underline-offset: 4px; }
.panel.light .hm-quiet, .hm-sand-sky .hm-quiet { color: var(--mint-d); }
.panel button { font: inherit; color: inherit; }

.g { width: 30px; height: 30px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.hm-sun { width: 20px; height: 20px; flex: none; fill: none; stroke: var(--gold); stroke-width: 2; stroke-linecap: round; }
.hm-s-reach { --c: var(--c-reach); } .hm-s-visits { --c: var(--c-visits); } .hm-s-interest { --c: var(--c-interest); }
.hm-s-roots { --c: var(--ivory); } .hm-s-wins { --c: var(--c-wins); } .hm-s-money { --c: var(--c-money); } .hm-s-exp { --c: var(--c-exp); }
.hm-ring { position: relative; flex: none; width: 70px; height: 70px; border-radius: 50%; display: grid; place-items: center; border: 2px solid var(--c); background: rgba(255,255,255,0.03); color: var(--c); box-shadow: 0 0 0 6px rgba(255,255,255,0.02); transition: border-color 400ms ease, background 400ms ease, color 400ms ease, box-shadow 300ms ease; }
.seed .hm-ring { width: 108px; height: 108px; background: var(--ivory); border-color: var(--ivory); color: var(--ink); display: flex; flex-direction: column; gap: 2px; box-shadow: 0 0 0 8px rgba(246,243,234,0.06), 0 0 40px rgba(111,211,166,0.18); }
.seed .hm-ring { --fs: 32px; --gs: 18px; }
.hm-score { font: 500 32px/1 var(--mono); font-variant-numeric: tabular-nums; }

/* ------------------------------------------------------------ 01 night: the Today board */
.hm-today { width: min(100%, 1000px); max-width: 1000px; margin-top: 72px; text-align: left; gap: 14px; padding: clamp(18px, 2.4vw, 26px) clamp(18px, 2.6vw, 30px) clamp(16px, 2vw, 22px); background: var(--glass-green); border-color: rgba(111,211,166,0.32); box-shadow: 0 30px 80px rgba(0,0,0,0.45), inset 0 1px 0 rgba(255,255,255,0.08); }
.hm-today-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px 16px; }
.hm-today-t, .hm-today-r { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.hm-today-t b { font-size: 15px; font-weight: 600; }
.hm-meta { font-size: 13px; color: var(--muted); }
.hm-today-say { margin: 0 0 4px; font: 400 clamp(20px, 2vw, 24px)/1.25 var(--serif); }
.hm-sigrow { position: relative; }
.hm-sigs { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.hm-s { position: relative; display: grid; grid-template-rows: 112px auto auto; justify-items: center; align-content: start; gap: 6px; text-align: center; border-radius: 14px; outline-offset: 2px; cursor: default; }
.hm-s .hm-ring { align-self: center; }
.hm-name { font-size: 14px; font-weight: 600; line-height: 1.25; }
.hm-st { font-size: 12px; line-height: 1.2; }
.hm-st.warn { color: var(--amber); }
/* Every signal carries its status on one shared line; healthy ones sit in
   muted mint so the one amber word is where the eye lands. */
.hm-st.ok { color: rgba(111,211,166,0.72); }
.hm-s.seed .hm-st { white-space: nowrap; }
.hm-line { position: absolute; top: calc(100% + 4px); left: 50%; z-index: 3; width: max-content; max-width: 160px; padding: 5px 10px; border-radius: 999px; background: rgba(8,14,12,0.92); border: 1px solid var(--line); font-size: 12px; color: var(--ivory); opacity: 0; transform: translate(-50%, -4px); transition: opacity 180ms ease, transform 180ms ease; pointer-events: none; }
.hm-s:hover .hm-line, .hm-s:focus-visible .hm-line { opacity: 1; transform: translate(-50%, 0); }
.hm-s:hover .hm-ring { box-shadow: 0 0 0 6px rgba(255,255,255,0.06); }
.hm-sigrow { padding-bottom: 84px; }
.hm-sigs { position: relative; z-index: 1; }
/* Tablets and up (Nathanael's iPad, Nov 3: Money sat on the seed). The seed
   gets a wider column of its own and its status wraps under it, so Money
   stays right beside Healthy roots with real space between them. */
@media (min-width: 721px) {
  .hm-sigs { grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(0, 1.6fr) repeat(3, minmax(0, 1fr)); column-gap: 4px; }
  .hm-s.seed .hm-st { white-space: normal; max-width: 13em; text-wrap: balance; }
  .hm-s .hm-name, .hm-s .hm-st { max-width: 100%; }
}
@media (min-width: 721px) and (max-width: 959px) {
  .hm-s { grid-template-rows: 100px auto auto; }
  .seed .hm-ring { width: 96px; height: 96px; }
  .seed .hm-score { font-size: 28px; }
  .hm-s:not(.seed) .hm-ring { width: 62px; height: 62px; }
  .hm-s .g { width: 26px; height: 26px; }
  .hm-name { font-size: 13px; }
}
@media (max-width: 720px) {
  /* Phones (Nathanael, Nov 3: too many words, hard to read): the board
     reads in about three seconds. Healthy roots, its 92 inside the seed,
     and six signals as icon and name, larger. The one signal that needs a
     look keeps its amber word. No "Checked" line; Example stays as one
     quiet word. Every label sits on the far side of its ring from the
     seed, so a root only ever runs ring edge to seed edge, never under text. */
  .hm-today { margin-top: 28px; gap: 10px; }
  .hm-today > * { min-width: 0; }
  .hm-today-head { flex-wrap: nowrap; align-items: center; }
  /* Nov 4: the business name stays on phone (his five names everywhere);
     the weekday and time give way to it, so it is still one short line. */
  .hm-today-t .hm-stamp { display: none; }
  .hm-today-t { flex-wrap: nowrap; min-width: 0; gap: 8px; }
  .hm-today-t b { font-size: 16px; }
  .hm-today-t .hm-meta { font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .hm-today-r [data-clock="checked"] { display: none; }
  .hm-today .hm-ex { padding: 0; background: none; font-size: 14px; font-weight: 500; letter-spacing: 0; text-transform: none; }
  .hm-today-say { font-size: 22px; margin: 0; }
  .hm-today-say .hm-say-more { display: none; }
  .hm-sigrow { padding-bottom: 0; }
  .hm-sigs { display: block; position: relative; width: 100%; max-width: 360px; height: 0; padding-bottom: 122%; margin: 8px auto 4px; container-type: inline-size; }
  .hm-s { position: absolute; left: calc(50% + var(--px, 0) * 1cqw); top: calc(50% + var(--py, 0) * 1cqw); width: 0; height: 0; display: block; outline: 0; }
  .hm-s-money { --py: -40; } .hm-s-visits { --px: 33; --py: -19; } .hm-s-interest { --px: 33; --py: 22; }
  .hm-s-wins { --py: 40; } .hm-s-reach { --px: -33; --py: 22; } .hm-s-exp { --px: -33; --py: -19; }
  .hm-s .hm-ring { position: absolute; left: 0; top: 0; width: 17cqw; height: 17cqw; min-width: 54px; min-height: 54px; translate: -50% -50%; }
  .hm-s .g { width: 26px; height: 26px; }
  .hm-s .hm-line { display: none; }
  .hm-s .hm-st { display: none; }
  .hm-s-money .hm-st.warn { display: block; }
  /* Labels: above the ring for the top three, below for the bottom three. */
  .hm-s .hm-name, .hm-s-money .hm-st { position: absolute; left: 0; translate: -50% 0; white-space: nowrap; text-align: center; font-size: 15px; line-height: 20px; }
  .hm-s-visits .hm-name, .hm-s-exp .hm-name { bottom: calc(max(8.5cqw, 27px) + 6px); }
  .hm-s-money .hm-name { bottom: calc(max(8.5cqw, 27px) + 26px); }
  .hm-s-money .hm-st { bottom: calc(max(8.5cqw, 27px) + 6px); font-size: 14px; }
  .hm-s-interest .hm-name, .hm-s-reach .hm-name, .hm-s-wins .hm-name { top: calc(max(8.5cqw, 27px) + 6px); }
  /* The seed: its name inside, under the 92. */
  /* Optical centre: the 92's cap top to the name's baseline sits on the
     circle's centre (ink measured: 92 is 29px tall, a 4px gap, then the name), a hair above true centre so it reads centred. */
  .hm-s.seed .hm-ring { width: 38cqw; height: 38cqw; min-width: 116px; min-height: 116px; display: block; padding: 0; }
  .hm-s.seed .hm-ring .g { display: none; }
  .hm-s.seed .hm-ring > .hm-score { top: calc(50% - 23px); transform: none; font-size: 32px; line-height: 32px; }
  .hm-s.seed .hm-name { top: 4px; bottom: auto; color: var(--ink); font-size: 13px; line-height: 18px; font-weight: 600; z-index: 2; }
  .hm-s:focus-visible .hm-ring { outline: 2px solid var(--mint); outline-offset: 3px; }
}
@media (prefers-reduced-motion: no-preference) {
  .hm-today .hm-s { opacity: 0; transform: translateY(10px) scale(0.92); transition: opacity 500ms ease calc(var(--i) * 70ms + 200ms), transform 650ms var(--ease-out) calc(var(--i) * 70ms + 200ms); }
  .hm-today.in .hm-s { opacity: 1; transform: none; }
  .hm-today .hm-s .g { transition: transform 600ms var(--ease-out) calc(var(--i) * 70ms + 450ms); transform: rotate(-24deg) scale(0.7); }
  .hm-today.in .hm-s .g { transform: none; }
  .hm-today .fr-root { opacity: 0; transition: opacity 700ms ease calc(var(--i) * 90ms + 820ms); }
  .hm-today.in .fr-root { opacity: 1; }
}

/* ------------------------------------------------------------ 02 before dawn: the broken tag */
.hm-problem { gap: 22px 28px; align-items: start; }
@media (min-width: 900px) { .hm-problem { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); } .hm-problem-close, .hm-problem-ask { grid-column: 1 / -1; } }
/* A generic dashboard, deliberately not Feder's look. */
.hm-dash { margin: 0; padding: 20px 22px 16px; border-radius: 16px; background: #F3F4F6; color: #1F2937; font-family: Arial, Helvetica, sans-serif; box-shadow: 0 24px 60px rgba(0,0,0,0.35); min-width: 0; }
.hm-dash-top { display: flex; justify-content: space-between; align-items: center; gap: 10px; font-size: 13px; color: #5F6672; }
.hm-dash-r { display: inline-flex; align-items: center; gap: 8px; }
.hm-dash-big { margin: 6px 0 12px; font-size: clamp(28px, 3vw, 34px); font-weight: 700; }
.hm-dash-big span { font-size: 15px; color: #047857; }
.hm-dash-plot { position: relative; height: clamp(150px, 18vw, 210px); overflow: hidden; }
.hm-dash-plot svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.hm-dash-grid line { stroke: #E5E7EB; stroke-width: 1; vector-effect: non-scaling-stroke; }
.hm-dash-drew { fill: none; stroke: #7D8A84; stroke-width: 2.6; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.hm-dash-real { fill: none; stroke: var(--coral); stroke-width: 2.4; stroke-dasharray: 5 6; vector-effect: non-scaling-stroke; }
.hm-dash-wash { fill: rgba(229,115,95,0.13); }
.hm-dash-break { position: absolute; top: 0; bottom: 0; width: 0; border-left: 1px solid rgba(229,115,95,0.65); }
.hm-dash-break span { position: absolute; top: 2px; left: 6px; white-space: nowrap; font-size: 11px; font-weight: 700; color: #C2513C; }
.hm-dash-cover { position: absolute; inset: 0; background: #F3F4F6; transform-origin: 100% 50%; transform: scaleX(0); }
.hm-dash-x { display: flex; justify-content: space-between; margin-top: 8px; font-size: 12px; color: #636A76; }
.hm-dash-key { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 12px; font-size: 13px; }
.hm-dash-key span { display: inline-flex; align-items: center; gap: 8px; }
.hm-dash-key span::before { content: ""; width: 20px; border-top: 2.5px solid #7D8A84; }
.hm-dash-key .k-drew { color: #4B5563; }
.hm-dash-key .k-real { color: #B0472F; }
.hm-dash-key .k-real::before { border-top: 2.5px dashed var(--coral); }
.hm-stories { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.hm-stories li { display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: baseline; padding: 16px 18px; border-radius: 14px; background: rgba(246,243,234,0.05); border: 1px solid rgba(246,243,234,0.12); }
.hm-story-n { font: 500 12px/1 var(--mono); color: var(--gold); }
.hm-stories p { margin: 0; font-size: 16px; line-height: 1.5; color: #DCE3DF; text-wrap: pretty; }
.hm-problem-close { margin: 4px 0 0; font: 400 clamp(21px, 2.3vw, 28px)/1.3 var(--serif); text-wrap: balance; }
.hm-problem-close em { font-style: normal; color: var(--dawn); }
.hm-problem-ask:empty, .hm-problem-ask { margin: 0; }
@media (prefers-reduced-motion: no-preference) {
  .hm-problem .hm-dash-cover { transform: scaleX(1); transition: transform 1500ms cubic-bezier(.45,.05,.3,1) 350ms; }
  .hm-problem.in .hm-dash-cover { transform: scaleX(0); }
  .hm-problem .hm-dash-real, .hm-problem .hm-dash-wash, .hm-problem .hm-dash-break { opacity: 0; transition: opacity 700ms ease 1500ms; }
  .hm-problem .hm-dash-break { transition-delay: 800ms; }
  .hm-problem.in .hm-dash-real, .hm-problem.in .hm-dash-wash, .hm-problem.in .hm-dash-break { opacity: 1; }
  .hm-problem .hm-stories li { opacity: 0; transform: translateX(18px); transition: opacity 600ms ease calc(var(--i) * 160ms + 1900ms), transform 700ms var(--ease-out) calc(var(--i) * 160ms + 1900ms); }
  .hm-problem.in .hm-stories li { opacity: 1; transform: none; }
  .hm-problem .hm-problem-close { opacity: 0; transition: opacity 800ms ease 2500ms; }
  .hm-problem.in .hm-problem-close { opacity: 1; }
}

/* ------------------------------------------------------------ 03 sunrise: the line in the sand */
.hm-sand { padding: 0 !important; gap: 0; overflow: hidden; background: none; border-color: rgba(246,243,234,0.28); backdrop-filter: none; -webkit-backdrop-filter: none; }
.hm-sand-sky { display: grid; justify-items: center; gap: 12px; text-align: center; padding: clamp(28px, 4vw, 48px) clamp(20px, 4vw, 44px) 18px; color: var(--ink2); background: linear-gradient(180deg, rgba(242,185,138,0.95) 0%, rgba(246,221,191,0.96) 45%, rgba(246,243,234,0.97) 100%); }
.hm-sand-sky .eyebrow { color: #0B3D2E; }
.hm-sand-sky h3 { font-size: clamp(28px, 3.7vw, 46px); line-height: 1.08; }
.hm-sand-sky p { margin: 0; max-width: 640px; font-size: clamp(16px, 1.4vw, 18px); line-height: 1.5; color: #2F3A35; text-wrap: pretty; }
.hm-sand-sky .hm-quiet { justify-self: center; }
.hm-surface { width: 100%; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 10px 16px; margin-top: 10px; }
.hm-tiles { display: flex; gap: 10px; }
.hm-tile { width: 132px; padding: 10px 12px; border-radius: 12px; background: rgba(255,255,255,0.55); border: 1px solid rgba(17,26,23,0.12); font-size: 12px; color: #46524C; text-align: left; }
.hm-tile i { display: block; height: 22px; margin-top: 8px; border-radius: 4px; background: linear-gradient(90deg, rgba(17,26,23,0.1), rgba(17,26,23,0.2)); }
.hm-sand-k { font: 500 11.5px/1.3 var(--mono); letter-spacing: 0.06em; text-transform: uppercase; color: #46524C; }
.hm-sand-k.gold { position: absolute; right: clamp(16px, 3vw, 32px); top: 14px; color: var(--gold); }
.hm-sand-soil { position: relative; height: clamp(130px, 14vw, 170px); border-top: 3px solid #0B3D2E; background: linear-gradient(180deg, #3A2C1E 0%, #2B2117 60%, #1C150F 100%); }
.hm-sand-soil svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.hm-sand-soil path { fill: none; stroke: rgba(246,243,234,0.62); stroke-width: 2; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.hm-sand-soil path.thin { stroke: rgba(246,243,234,0.36); stroke-width: 1.4; }
@media (max-width: 720px) {
  .hm-surface { justify-content: center; }
  .hm-tiles { width: 100%; }
  .hm-tile { flex: 1; width: auto; min-width: 0; padding: 8px 9px; font-size: 11px; }
  .hm-sand-k.gold { left: 50%; right: auto; top: auto; bottom: 12px; transform: translateX(-50%); white-space: nowrap; padding: 3px 8px; border-radius: 6px; background: rgba(28,21,15,0.9); }
}
@media (prefers-reduced-motion: no-preference) {
  .hm-sand .hm-sand-soil path { transform-box: fill-box; transform-origin: 50% 0; transform: scaleY(0); opacity: 0; transition: transform 900ms var(--ease-out) calc(var(--i) * 180ms + 500ms), opacity 400ms ease calc(var(--i) * 180ms + 500ms); }
  .hm-sand.in .hm-sand-soil path { transform: none; opacity: 1; }
  .hm-sand .hm-tile { opacity: 0; transform: translateY(8px); transition: opacity 500ms ease calc(var(--i) * 90ms + 300ms), transform 600ms var(--ease-out) calc(var(--i) * 90ms + 300ms); }
  .hm-sand.in .hm-tile { opacity: 1; transform: none; }
}

/* ------------------------------------------------------------ 04 underground: root events */
.hm-under { background: linear-gradient(180deg, rgba(28,21,15,0.84), rgba(14,11,8,0.88)); border-color: rgba(220,199,142,0.22); gap: 18px; }
.hm-under-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.hm-under-t { font: 500 12px/1.3 var(--mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold); }
.hm-under-map { position: relative; }
.hm-under-roots path { fill: none; stroke: rgba(246,243,234,0.55); stroke-width: 2; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.hm-under-roots path.bad { stroke: var(--coral); stroke-width: 2.4; stroke-dasharray: 5 6; }
.hm-evs { list-style: none; margin: 0; padding: 0; }
.hm-tipbtn { background: none; border: 0; padding: 0; cursor: pointer; text-align: center; }
.hm-dot { position: relative; display: block; width: 14px; height: 14px; border-radius: 50%; background: var(--ivory); }
.hm-dot::after { content: ""; position: absolute; inset: -8px; border-radius: 50%; background: currentColor; opacity: 0.18; color: var(--ivory); }
.hm-ev-n { font-size: 14px; font-weight: 600; line-height: 1.3; }
.hm-ev-flag { font: 600 10.5px/1.3 var(--sans); letter-spacing: 0.08em; text-transform: uppercase; color: var(--coral); }
.hm-ev.bad .hm-dot { background: var(--coral); }
.hm-ev.bad .hm-dot::after { color: var(--coral); background: var(--coral); }
.hm-ev.bad .hm-ev-n { color: var(--coral); }
.hm-ev-card { font-size: 13px; line-height: 1.45; color: var(--muted); }
.hm-ev-card a { color: var(--ivory); text-underline-offset: 3px; }
.hm-ev-k { font: 500 10.5px/1.3 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--gold); }
.hm-under-foot { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 14px 24px; }
.hm-callout { margin: 0; max-width: 560px; padding: 16px 18px; border-radius: 14px; background: rgba(229,115,95,0.12); border: 1px solid var(--coral); color: #F6D6CC; font-size: 15px; line-height: 1.5; }
.hm-callout b { color: var(--coral); }
.hm-hint { margin: 0; font-size: 13px; color: var(--muted); }
/* Wide: the roots fan out from the surface to six tips; a tip's apps on hover or tap. */
@media (min-width: 960px) {
  .hm-under-map { height: 380px; }
  .hm-under-roots { position: absolute; inset: 0; width: 100%; height: 100%; }
  .hm-ev { position: absolute; left: var(--x); top: var(--y); transform: translate(-50%, -7px); z-index: 1; }
  .hm-ev:hover, .hm-ev:focus-within { z-index: 4; }
  .hm-tipbtn { display: grid; justify-items: center; gap: 8px; min-width: 44px; min-height: 44px; }
  .hm-ev-n { white-space: nowrap; }
  .hm-ev-card { position: absolute; bottom: 100%; left: 50%; width: max-content; max-width: 240px; padding-bottom: 10px; opacity: 0; pointer-events: none; transform: translate(-50%, 6px); transition: opacity 180ms ease, transform 180ms ease; text-align: left; }
  .hm-ev-in { display: block; padding: 10px 12px; border-radius: 12px; background: rgba(8,14,12,0.95); border: 1px solid var(--line); box-shadow: 0 12px 30px rgba(0,0,0,0.4); }
  .hm-ev:hover .hm-ev-card, .hm-ev:focus-within .hm-ev-card, .hm-tipbtn[aria-expanded="true"] + .hm-ev-card { opacity: 1; pointer-events: auto; transform: translate(-50%, 0); }
  .hm-ev-k { display: block; margin-bottom: 2px; }
}
/* Narrower: one root runs down the left and each event hangs off it, apps shown. */
@media (max-width: 959px) {
  .hm-under-roots { display: none; }
  .hm-evs { position: relative; padding-left: 28px; display: grid; gap: 4px; }
  .hm-evs::before { content: ""; position: absolute; left: 6px; top: 8px; bottom: 8px; width: 2px; border-radius: 2px; background: linear-gradient(180deg, rgba(246,243,234,0.5), rgba(246,243,234,0.15)); }
  .hm-ev { padding: 6px 0; }
  .hm-tipbtn { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; min-height: 36px; width: 100%; text-align: left; cursor: default; }
  .hm-dot { margin-left: -28px; width: 14px; height: 14px; }
  .hm-dot::after { inset: -5px; }
  .hm-ev-n { font-size: 15px; }
  .hm-ev-card { display: block; padding-left: 0; margin-top: 2px; }
  .hm-ev-k { margin-right: 4px; }
  .hm-ev.bad { padding: 10px 12px; margin-left: -12px; border-radius: 12px; background: rgba(229,115,95,0.08); }
  .hm-hint { display: none; }
}
@media (prefers-reduced-motion: no-preference) {
  .hm-under .hm-under-roots path { transform-box: fill-box; transform-origin: 50% 0; transform: scaleY(0); opacity: 0; transition: transform 1000ms var(--ease-out) calc(var(--i) * 140ms + 300ms), opacity 300ms ease calc(var(--i) * 140ms + 300ms); }
  .hm-under.in .hm-under-roots path { transform: none; opacity: 1; }
  .hm-under .hm-ev { opacity: 0; transition: opacity 500ms ease calc(var(--i) * 140ms + 1000ms); }
  .hm-under.in .hm-ev { opacity: 1; }
  .hm-under.in .hm-ev.bad .hm-dot::after { animation: hm-beat 900ms ease-out 2200ms 1 both; }
  .hm-under .hm-callout { opacity: 0; transform: translateY(10px); transition: opacity 700ms ease 2500ms, transform 700ms var(--ease-out) 2500ms; }
  .hm-under.in .hm-callout { opacity: 1; transform: none; }
}
@keyframes hm-beat { 0% { transform: scale(1); opacity: 0.18; } 40% { transform: scale(1.9); opacity: 0.32; } 100% { transform: scale(1); opacity: 0.18; } }

/* ------------------------------------------------------------ 05 through the roots: Vitals */
.hm-vitals { background: var(--glass-green); border-color: rgba(111,211,166,0.32); box-shadow: 0 30px 80px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.08); }
.hm-vit-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.hm-vit-head h3 { font-size: clamp(24px, 2.4vw, 28px); }
.hm-vit-grid { display: grid; gap: 28px 40px; }
@media (min-width: 860px) { .hm-vit-grid { grid-template-columns: 1fr 1fr; } }
.hm-vit { margin: 0; min-width: 0; }
.hm-vit-t { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.hm-vit-t b { font-size: 16px; font-weight: 600; }
.hm-vit-t .ok { font-size: 13px; color: var(--mint); }
.hm-vit-t .bad { font-size: 13px; color: var(--coral); }
.hm-vit-m { margin: 4px 0 14px; font-size: 13px; color: var(--muted); }
.hm-plot { position: relative; height: 150px; touch-action: pan-y; }
.hm-band { position: absolute; left: 0; right: 0; background: rgba(111,211,166,0.12); border-top: 1px dashed rgba(111,211,166,0.5); border-bottom: 1px dashed rgba(111,211,166,0.5); pointer-events: none; }
.hm-bars { display: flex; align-items: stretch; gap: 4px; }
.hm-bar { position: relative; flex: 1; min-width: 0; height: 100%; padding: 0; border: 0; background: none; cursor: pointer; border-radius: 3px; }
.hm-bar i { position: absolute; left: 0; right: 0; bottom: 0; height: var(--h); border-radius: 3px 3px 1px 1px; background: var(--mint); opacity: 0.72; transform-origin: 50% 100%; transition: opacity 160ms ease; }
.hm-bar:last-child i, .hm-bar.on i, .hm-bar:hover i { opacity: 1; }
.hm-bar.on i { box-shadow: 0 0 0 2px rgba(246,243,234,0.5); }
.hm-linec svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.hm-linec path { fill: none; stroke-width: 2.4; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.hm-linec path.ok { stroke: var(--mint); }
.hm-linec path.bad { stroke: var(--coral); stroke-width: 2.6; }
.hm-end { position: absolute; width: 11px; height: 11px; margin: -5.5px 0 0 -5.5px; border-radius: 50%; background: var(--coral); box-shadow: 0 0 0 5px rgba(229,115,95,0.2); }
.hm-hits { position: absolute; inset: 0; display: flex; }
.hm-hit { position: relative; flex: 1; padding: 0; border: 0; background: none; cursor: pointer; }
.hm-hit::after { content: ""; position: absolute; top: 0; bottom: 0; left: 50%; width: 1px; background: rgba(246,243,234,0.35); opacity: 0; transition: opacity 140ms ease; }
.hm-hit.on::after, .hm-hit:hover::after { opacity: 1; }
.hm-hit:first-child::after { left: 0; } .hm-hit:last-child::after { left: auto; right: 0; }
.hm-vit-x { display: flex; justify-content: space-between; margin-top: 8px; font-size: 12px; color: var(--muted); }
.hm-read { margin: 8px 0 12px; min-height: 2.9em; font-size: 13.5px; line-height: 1.45; color: var(--ivory); }
.hm-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.hm-chips-k { font-size: 12px; color: var(--muted); }
.hm-chip { position: relative; display: inline-flex; align-items: center; min-height: 34px; padding: 0 12px; border-radius: 999px; background: rgba(246,243,234,0.08); border: 1px solid rgba(246,243,234,0.12); font-size: 12.5px; text-decoration: none; transition: border-color 160ms ease; }
.hm-chip::before { content: ""; position: absolute; inset: -5px -2px; }
.hm-chip:hover { border-color: var(--mint); }
@media (prefers-reduced-motion: no-preference) {
  .hm-vitals .hm-bar i { transform: scaleY(0); transition: transform 600ms var(--ease-out) calc(var(--i) * 30ms + 300ms), opacity 160ms ease; }
  .hm-vitals.in .hm-bar i { transform: none; }
  .hm-vitals .hm-band { opacity: 0; transition: opacity 700ms ease 1000ms; }
  .hm-vitals.in .hm-band { opacity: 1; }
  .hm-vitals .hm-linec svg { opacity: 0; transform: translateY(8px); transition: opacity 700ms ease 400ms, transform 800ms var(--ease-out) 400ms; }
  .hm-vitals.in .hm-linec svg { opacity: 1; transform: none; }
  .hm-vitals .hm-linec path.bad, .hm-vitals .hm-vit-t .bad { opacity: 0; transition: opacity 500ms ease 1400ms; }
  .hm-vitals.in .hm-linec path.bad, .hm-vitals.in .hm-vit-t .bad { opacity: 1; }
  .hm-vitals .hm-end { opacity: 0; transform: scale(0); transition: opacity 300ms ease 1700ms, transform 500ms cubic-bezier(.3,1.6,.5,1) 1700ms; }
  .hm-vitals.in .hm-end { opacity: 1; transform: none; }
}

/* ------------------------------------------------------------ 06 back up: the seven signals */
.hm-bloom { background: rgba(10,18,15,0.86); align-items: center; gap: 28px 44px; }
@media (min-width: 900px) { .hm-bloom { grid-template-columns: minmax(0, 460px) minmax(0, 1fr); } }
.hm-bloom-fig { position: relative; width: 100%; max-width: 460px; aspect-ratio: 1; margin: 0 auto 26px; --r: 64px; --seed: 124px; }
.hm-petals { position: absolute; inset: 0; z-index: 1; }
.hm-petals { list-style: none; margin: 0; padding: 0; }
.hm-p { position: absolute; left: calc(50% + var(--dx, 0%) * var(--k, 1)); top: calc(50% + var(--dy, 0%) * var(--k, 1)); transform: translate(-50%, calc(var(--r) / -2)); }
.hm-p.seed { transform: translate(-50%, calc(var(--seed) / -2)); z-index: 1; }
.hm-p button { display: grid; justify-items: center; gap: 6px; padding: 0; border: 0; background: none; cursor: pointer; border-radius: 16px; }
.hm-p .hm-ring { width: var(--r); height: var(--r); }
.hm-p .g { width: 28px; height: 28px; }
.hm-p.seed .hm-ring { width: var(--seed); height: var(--seed); }
.hm-p.seed .hm-ring { --fs: 36px; --gs: 20px; }
.hm-p .hm-name { font-size: 13px; white-space: nowrap; }
.hm-p button:hover .hm-ring { box-shadow: 0 0 0 6px rgba(255,255,255,0.07); }
.hm-p button[aria-pressed="true"] .hm-ring { box-shadow: 0 0 0 6px color-mix(in srgb, var(--c) 30%, transparent); }
.hm-p.seed button[aria-pressed="true"] .hm-ring { box-shadow: 0 0 0 8px rgba(246,243,234,0.12), 0 0 46px rgba(111,211,166,0.28); }
/* A root breaks: Healthy roots goes coral; the two signals built on it stop being vouched for. */
.is-bad .hm-p.seed .hm-ring { background: #3A221D; border-color: var(--coral); color: var(--coral); box-shadow: 0 0 0 8px rgba(229,115,95,0.12), 0 0 40px rgba(229,115,95,0.22); }
.is-bad .hm-s-interest .hm-ring, .is-bad .hm-s-wins .hm-ring { border-style: dashed; border-color: #7E8984; color: #7E8984; }
.is-bad .fr-k-interest .fr-base, .is-bad .fr-k-wins .fr-base, .is-bad .fr-k-interest .fr-hair, .is-bad .fr-k-wins .fr-hair { stroke: var(--coral); stroke-dasharray: 3 4; }
.is-bad .fr-k-interest .fr-flow, .is-bad .fr-k-wins .fr-flow { animation: none; opacity: 0; }
.is-bad .fr-k-interest .fr-base, .is-bad .fr-k-wins .fr-base { opacity: 1; }
.is-bad .fr-k-interest .fr-body, .is-bad .fr-k-wins .fr-body, .is-bad .fr-k-interest .fr-tip, .is-bad .fr-k-wins .fr-tip { opacity: 0; }
.is-bad .hm-p.seed .hm-ring { animation: none; }
.hm-bloom-side { display: grid; gap: 14px; align-content: start; min-width: 0; }
.hm-bloom-say { margin: 0; font-size: 16px; line-height: 1.55; color: var(--muted); }
.hm-state { justify-self: start; display: inline-flex; flex-wrap: wrap; gap: 4px; padding: 4px; border-radius: 999px; border: 1px solid var(--line); background: rgba(246,243,234,0.04); }
.hm-state button { min-height: 44px; padding: 0 18px; border: 0; border-radius: 999px; background: none; font-size: 14px; font-weight: 600; cursor: pointer; transition: background 200ms ease, color 200ms ease; }
.hm-state button[aria-pressed="true"] { background: var(--ivory); color: var(--ink); }
.hm-state button[data-state="bad"][aria-pressed="true"] { background: var(--coral); color: var(--ink); }
.hm-readout { display: grid; gap: 4px; padding: 16px 18px; border-radius: 16px; border: 1px solid var(--line); background: rgba(246,243,234,0.04); }
.hm-readout-t { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.hm-readout-t b { font: 500 22px/1.2 var(--serif); }
.hm-readout p { margin: 0; font-size: 15px; line-height: 1.5; color: var(--muted); }
.hm-readout .hm-readout-f { color: var(--ivory); font-size: 14px; }
.is-bad .hm-readout { border-color: rgba(229,115,95,0.5); }
.hm-bloom-note { margin: 0; font-size: 13px; color: var(--muted); }
@media (max-width: 720px) {
  .hm-bloom-fig { --r: 48px; --seed: 80px; --k: 1.11; max-width: 340px; margin-bottom: 34px; }
  .hm-p .g { width: 22px; height: 22px; }
  .hm-p.seed .hm-ring { --fs: 25px; --gs: 15px; }
  .hm-p .hm-name { font-size: 12px; }
  .hm-state { justify-self: stretch; }
  .hm-state button { flex: 1; padding: 0 12px; }
}
@media (prefers-reduced-motion: no-preference) {
  .hm-bloom .hm-p:not(.seed) { opacity: 0; transform: translate(-50%, calc(var(--r) / -2)) translate(calc(var(--ux) * -110px), calc(var(--uy) * -110px)) scale(0.4); transition: opacity 500ms ease calc(var(--i) * 110ms + 500ms), transform 800ms var(--ease-out) calc(var(--i) * 110ms + 500ms); }
  .hm-bloom.in .hm-p:not(.seed) { opacity: 1; transform: translate(-50%, calc(var(--r) / -2)); }
  .hm-bloom .hm-p.seed .hm-ring { transform: translateY(40px) scale(0.6); opacity: 0; transition: transform 800ms var(--ease-out) 150ms, opacity 500ms ease 150ms, background 400ms ease, border-color 400ms ease, color 400ms ease, box-shadow 300ms ease; }
  .hm-bloom.in .hm-p.seed .hm-ring { transform: none; opacity: 1; }
  .hm-bloom .fr-root { opacity: 0; transition: opacity 600ms ease calc(var(--i) * 110ms + 1300ms); }
  .hm-bloom.in .fr-root { opacity: 1; }
  .hm-bloom.in .hm-p:not(.seed) .g { animation: hm-open 700ms var(--ease-out) calc(var(--i) * 110ms + 900ms) 1 both; }
}
@keyframes hm-open { from { transform: rotate(-30deg) scale(0.5); opacity: 0; } to { transform: none; opacity: 1; } }

/* ------------------------------------------------------------ 07 midday: the apps */
.hm-apps { gap: 20px; overflow: hidden; grid-template-columns: minmax(0, 1fr); }
.hm-apps-head { display: grid; gap: 10px; justify-items: center; text-align: center; }
.hm-apps-head p { margin: 0; max-width: 560px; font-size: clamp(16px, 1.4vw, 18px); line-height: 1.5; color: #3D4A44; }
.hm-apps > .hm-quiet { justify-self: center; }
.hm-marquee { display: grid; gap: 12px; min-width: 0; overflow: hidden; margin: 0 calc(-1 * clamp(20px, 3.4vw, 40px)); -webkit-mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent); mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent); }
.hm-mrow { list-style: none; margin: 0; padding: 4px 0; display: flex; width: max-content; }
.hm-mrow li { padding-right: 12px; }
.hm-app { display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 18px; border-radius: 14px; background: #fff; border: 1px solid var(--paper-line); color: var(--ink2); font-size: 15px; font-weight: 500; white-space: nowrap; text-decoration: none; transition: border-color 160ms ease, transform 160ms ease; }
.hm-app i { width: 7px; height: 7px; border-radius: 50%; background: var(--mint); box-shadow: 0 0 0 3px rgba(111,211,166,0.2); }
.hm-app:hover { border-color: var(--mint-d); transform: translateY(-1px); }
@media (prefers-reduced-motion: no-preference) {
  .hm-mrow { animation: hm-drift 70s linear infinite; }
  .hm-mrow.rev { animation-direction: reverse; animation-duration: 80s; }
  .hm-marquee:hover .hm-mrow, .hm-marquee:focus-within .hm-mrow { animation-play-state: paused; }
}
@keyframes hm-drift { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .hm-marquee { margin: 0; -webkit-mask-image: none; mask-image: none; }
  .hm-mrow { width: auto; flex-wrap: wrap; justify-content: center; gap: 10px; }
  .hm-mrow li { padding: 0; }
  .hm-mrow li[aria-hidden="true"] { display: none; }
}

/* ------------------------------------------------------------ 08 afternoon: the honest states */
.hm-honest { gap: 14px; }
.hm-honest-lead { margin: 0 0 8px; max-width: 720px; font-size: clamp(16px, 1.4vw, 18px); line-height: 1.5; color: #3D4A44; }
.hm-hcs { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
@media (min-width: 900px) { .hm-hcs { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; } }
.hm-hc { display: grid; gap: 10px; align-content: start; padding: 20px 22px 8px; border-radius: 16px; background: #fff; border: 1px solid var(--paper-line); }
.hm-hc-t { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.hm-hc-t b { font-size: 15px; font-weight: 600; }
.hm-hc-w { display: inline-flex; align-items: center; gap: 10px; font: 500 24px/1.15 var(--serif); }
.hm-hc-w i { flex: none; width: 16px; height: 16px; border-radius: 50%; }
.hm-hc.learn .hm-hc-w { color: #8A6A1F; }
.hm-hc.learn .hm-hc-w i { border: 2px solid #B8862B; background: conic-gradient(#B8862B 0 43%, transparent 43% 100%); }
.hm-hc.unc .hm-hc-w { color: #55625C; }
.hm-hc.unc .hm-hc-w i { border: 2px dashed #7E8984; }
.hm-hc.off .hm-hc-w { color: #6F7A75; }
.hm-hc.off .hm-hc-w i { border: 2px solid #B9BFBC; }
.hm-hc p { margin: 0; font-size: 14.5px; line-height: 1.5; color: var(--app-2); }
.hm-count { font-family: var(--mono); font-weight: 500; color: var(--ink2); }
.hm-hc details { border-top: 1px solid rgba(17,26,23,0.08); }
.hm-hc summary { display: flex; align-items: center; justify-content: space-between; min-height: 44px; list-style: none; cursor: pointer; font-size: 14px; font-weight: 600; color: var(--mint-d); }
.hm-hc summary::-webkit-details-marker { display: none; }
.hm-hc summary::after { content: ""; width: 8px; height: 8px; margin-right: 4px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg) translateY(-2px); transition: transform 200ms ease; }
.hm-hc details[open] summary::after { transform: rotate(225deg) translate(-2px, 0); }
.hm-hc details p { padding-bottom: 14px; }
@media (prefers-reduced-motion: no-preference) {
  .hm-honest .hm-hc { opacity: 0; transform: translateY(14px); transition: opacity 600ms ease calc(var(--i) * 60ms + 250ms), transform 700ms var(--ease-out) calc(var(--i) * 60ms + 250ms); }
  .hm-honest.in .hm-hc { opacity: 1; transform: none; }
}

/* ------------------------------------------------------------ 09 late afternoon: three steps */
.hm-steps { background: linear-gradient(180deg, rgba(246,243,234,0.95), rgba(247,230,207,0.95)); }
.hm-steplist { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
@media (min-width: 860px) { .hm-steplist { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; } }
.hm-steplist li { display: grid; gap: 10px; align-content: start; padding: 24px; border-radius: 18px; background: rgba(255,255,255,0.72); border: 1px solid var(--paper-line); }
.hm-step-n { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: #0B3D2E; color: var(--ivory); font: 500 16px/1 var(--mono); }
.hm-steplist b { display: flex; align-items: center; gap: 8px; font: 500 clamp(22px, 2.1vw, 26px)/1.15 var(--serif); }
.hm-steplist b .hm-sun { width: 22px; height: 22px; stroke: #B8862B; }
.hm-steplist p { margin: 0; font-size: 15px; line-height: 1.5; color: var(--app-2); }
@media (prefers-reduced-motion: no-preference) {
  .hm-steps .hm-steplist li { opacity: 0.35; transform: translateY(10px); transition: opacity 600ms ease calc(var(--i) * 420ms + 300ms), transform 700ms var(--ease-out) calc(var(--i) * 420ms + 300ms); }
  .hm-steps.in .hm-steplist li { opacity: 1; transform: none; }
  .hm-steps .hm-step-n { transform: scale(0.6); transition: transform 500ms cubic-bezier(.3,1.5,.5,1) calc(var(--i) * 420ms + 450ms); }
  .hm-steps.in .hm-step-n { transform: none; }
}

/* ------------------------------------------------------------ 10 sunset: the ask */
.hm-close { justify-items: center; text-align: center; gap: 20px; padding: clamp(32px, 5vw, 56px) clamp(20px, 4vw, 48px) !important; background: rgba(14,21,18,0.58); }
.hm-close-line { margin: 0; font: 500 clamp(30px, 4.4vw, 58px)/1.08 var(--serif); letter-spacing: -0.01em; text-wrap: balance; }
.hm-close-actions { justify-content: center; }
@media (max-width: 720px) {
  .hm-close-line br { display: none; }
  .hm-close-actions { flex-direction: column; align-items: stretch; width: 100%; }
  .hm-close-actions .btn, .hm-close-actions .hm-ghost { text-align: center; justify-content: center; }
}

/* On the hero, the ghost button sits beside the main one and wraps under it on a phone. */
@media (max-width: 720px) {
  .hm-hero .actions { flex-direction: column; align-items: stretch; width: 100%; max-width: 360px; }
  .hm-hero .actions .btn, .hm-hero .actions .hm-ghost { text-align: center; justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
  .hm-dash-cover { display: none; }
}

/* Round 6: scroll-linked dawn panels (home.js). The JS owns the motion, so the
   one-shot reveals step aside once it takes over. */
.hm-problem.hm-scrub .hm-dash-cover, .hm-problem.hm-scrub .hm-dash-real, .hm-problem.hm-scrub .hm-dash-wash, .hm-problem.hm-scrub .hm-dash-break,
.hm-problem.hm-scrub .hm-stories li, .hm-problem.hm-scrub .hm-problem-close, .hm-sand.hm-scrub .hm-sand-soil path { transition: none !important; }
.hm-problem.hm-scrub .hm-dash-break { transition: opacity 300ms ease !important; }
.hm-sand.hm-scrub .hm-sand-soil path { transform: none !important; opacity: 1 !important; }
.hm-sand-flow { fill: none; stroke: #F6F3EA; stroke-width: 3; stroke-linecap: round; vector-effect: non-scaling-stroke; stroke-dasharray: 5 95; stroke-dashoffset: 100; opacity: 0; filter: drop-shadow(0 0 3px rgba(220,199,142,0.9)); }
.hm-sand.flowing .hm-sand-flow { animation: hm-sand-flow 3.2s linear infinite; }
/* Up from the roots to the surface: the roots feed what the dashboard shows. */
@keyframes hm-sand-flow { 0% { stroke-dashoffset: 0; opacity: 0; } 12% { opacity: 0.95; } 85% { opacity: 0.95; } 100% { stroke-dashoffset: 100; opacity: 0; } }

/* Round 6: after the hero, every beat sits in one centred column, so the
   copy and its panel share the width instead of all hugging the left. */
@media (min-width: 900px) {
  [data-place="home"] .beat:not(.hero) { padding-inline: max(var(--gutter), calc((100% - 1080px) / 2)); }
}
[data-place="home"] #day h2:focus { outline: none; }

/* Hold the roots: after the Vitals board scrolls away the full roots stay in
   view, and the climb back to the surface runs through this space instead of
   under the roots copy (Nathanael, Nov 3: "you barely see the full roots"). */
[data-place="home"] .beat[data-beat="home-day"] { margin-top: 170svh; }
@media (max-width: 720px) { [data-place="home"] .beat[data-beat="home-day"] { margin-top: 185svh; } }

/* Phones: the seven signals as a spine, not a second round board. Healthy
   roots heads the list and its roots run down the left edge, peeling off
   one by one into each signal it vouches for (roots.js 'spine'). */
@media (max-width: 720px) {
  .hm-bloom-fig { aspect-ratio: auto; max-width: 360px; margin: 0 auto 8px; --r: 44px; --seed: 72px; }
  .hm-petals { position: relative; inset: auto; display: flex; flex-direction: column; gap: 12px; margin: 0; padding: 0; list-style: none; }
  .hm-bloom-fig .hm-p { position: relative; left: auto; top: auto; transform: none; }
  .hm-bloom-fig .hm-p.seed { order: -1; margin-bottom: 8px; transform: none; }
  .hm-bloom-fig .hm-p:not(.seed) { margin-left: 76px; }
  .hm-bloom-fig .hm-p button { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 14px; row-gap: 2px; justify-items: start; align-items: center; width: 100%; text-align: left; padding: 4px 8px 4px 0; }
  .hm-bloom-fig .hm-p .hm-ring { grid-row: 1 / 3; }
  .hm-bloom-fig .hm-p .hm-name { align-self: end; font-size: 15px; }
  .hm-bloom-fig .hm-p button::after { content: attr(data-line); align-self: start; font-size: 13px; line-height: 1.3; color: var(--muted); }
  .hm-bloom-fig .hm-p.seed .hm-name { font-size: 17px; }
  .hm-bloom-fig .hm-p.seed button::after { content: "Vouches for the six below"; }
  .hm-bloom-fig .hm-p.seed .hm-ring { --fs: 24px; --gs: 14px; }
}
@media (max-width: 720px) and (prefers-reduced-motion: no-preference) {
  .hm-bloom .hm-bloom-fig .hm-p:not(.seed) { transform: translateX(-14px); transition: opacity 500ms ease calc(var(--i) * 90ms + 400ms), transform 700ms var(--ease-out) calc(var(--i) * 90ms + 400ms); }
  .hm-bloom.in .hm-bloom-fig .hm-p:not(.seed) { transform: none; }
}
/* Nov 4: each example names its business (his easter-egg names). */
.hm-vit-biz { display: block; margin-top: 4px; font-family: inherit; font-size: 14px; font-weight: 400; letter-spacing: 0; color: var(--muted, rgba(240, 236, 224, 0.72)); }

/* Keep your tools (Nov 5): "I already have analytics" answered once, about money. */
.hm-keep { gap: 22px; }
.hm-keep-head { display: grid; gap: 10px; max-width: 760px; }
.hm-keep-head h3 { margin: 0; font: 500 clamp(26px, 3.2vw, 38px)/1.15 var(--serif); }
.hm-keep-head p { margin: 0; font-size: clamp(16px, 1.4vw, 18px); line-height: 1.55; color: var(--muted); }
.hm-keep-qs { margin: 0; padding: 0; list-style: none; display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.hm-keep-qs li { padding: 20px 22px; border-radius: 18px; border: 1px solid var(--line); background: rgba(246,243,234,0.04); display: grid; gap: 8px; align-content: start; }
.hm-keep-qs b { font: 500 19px/1.25 var(--serif); color: var(--ivory); }
.hm-keep-qs p { margin: 0; font-size: 15px; line-height: 1.55; color: var(--muted); }
.hm-keep-tools { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 10px; }
.hm-keep-tools a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--line); color: var(--ivory); font-size: 15px; font-weight: 500; text-decoration: none; transition: border-color 160ms ease; }
.hm-keep-tools a:hover { border-color: var(--mint); }
.hm-keep-tools a:focus-visible, .hm-keep .hm-quiet:focus-visible { outline: 2px solid var(--mint); outline-offset: 3px; }
.hm-keep-tools .hm-keep-all { color: var(--mint); border-style: dashed; }
.hm-keep > .hm-quiet { justify-self: start; color: var(--mint); }
@media (max-width: 720px) {
  .hm-keep-tools { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 0 calc(-1 * clamp(28px, 4vw, 48px)); padding: 2px clamp(28px, 4vw, 48px); }
  .hm-keep-tools::-webkit-scrollbar { display: none; }
  .hm-keep-tools a { white-space: nowrap; }
}
@media (prefers-reduced-motion: no-preference) {
  .hm-keep.in .hm-keep-qs li { animation: hm-keep-in 520ms cubic-bezier(.2,.7,.2,1) both; animation-delay: calc(var(--i) * 90ms + 120ms); }
  @keyframes hm-keep-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
}