/* hero3.css — the minimal hero (branch muse-hero, 2026-10-20), after Meta Muse's landing:
   one mark, one headline with William's live face set into it, one rotating word, one quiet
   ask. Loaded after hero2.css and scoped under .mh, so it reuses hero2's tokens, the form's
   field styles and the answer card. js/hero.js drives it unchanged (same ids); the ring only
   shows once a run starts, as a compact result card under the bar. */
.mh-bg { position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background: radial-gradient(520px 300px at 50% 120px, rgba(60,110,246,.14), transparent 70%); }
.mh {
  --mh-ghost: rgba(255,255,255,.28); --mh-mute: rgba(255,255,255,.55);
  --mh-field: #232326; --mh-field-hi: #2b2b2f; --mh-line: rgba(255,255,255,.08);
  display: flex; flex-direction: column; align-items: center; grid-template-columns: none;
  min-height: calc(100svh - 110px); padding: clamp(28px, 7vh, 80px) 0 32px; gap: 0; text-align: center;
}
.hero-section .hero-section-holder:has(.mh) { padding-top: 72px; }

/* ── mark ── */
.mh-mark { width: clamp(84px, 9vw, 120px); height: auto; margin-bottom: clamp(18px, 3.5vh, 34px);
  filter: drop-shadow(0 10px 30px rgba(60,110,246,.35)); animation: mhIn .8s cubic-bezier(.2,.7,.2,1) both; }

/* ── headline: "William [face], AI that / <rotating word>" ── */
.mh-h1 { margin: 0; display: flex; flex-direction: column; align-items: center; gap: .02em;
  font: 600 clamp(40px, 6.2vw, 84px)/1.04 var(--f-d); letter-spacing: -.045em; color: var(--ink);
  animation: mhIn .8s .08s cubic-bezier(.2,.7,.2,1) both; }
.mh-l1 { display: inline-flex; align-items: center; flex-wrap: wrap; justify-content: center; }
.mh-face { display: inline-block; width: 1.02em; height: 1.02em; margin: 0 .1em 0 .14em; border-radius: 50%;
  overflow: hidden; background: #e9eaee; box-shadow: 0 0 0 .045em rgba(255,255,255,.08), 0 .12em .4em rgba(0,0,0,.45);
  transform: translateY(.04em); flex: none; }
.mh-face video { display: block; width: 100%; height: 100%; object-fit: cover; transform: scale(1.18) translateY(4%); }
.mh-rot { display: inline-grid; justify-items: center; color: var(--mh-ghost); }
.mh-rot .w { grid-area: 1 / 1; white-space: nowrap; opacity: 0; transform: translateY(.55em); filter: blur(6px);
  transition: opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1), filter .7s, color .7s; }
.mh-rot .w i { font-style: normal; font-size: .72em; vertical-align: .08em; margin-left: .06em; }
.mh-rot .w.is-on { opacity: 1; transform: none; filter: none; color: #8e8e95; }
.mh-rot .w.is-out { opacity: 0; transform: translateY(-.5em) translateX(-.18em); filter: blur(4px); color: var(--mh-ghost); }
.mh-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* ── the quiet ask ── */
.mh-q { margin: clamp(26px, 5vh, 52px) 0 14px; font: 400 15px/1.4 var(--f-t); color: var(--mh-mute); text-wrap: balance;
  animation: mhIn .8s .16s cubic-bezier(.2,.7,.2,1) both; }
.mh .nh-ask { width: min(100%, 620px); display: flex; flex-direction: column; align-items: center;
  animation: mhIn .8s .22s cubic-bezier(.2,.7,.2,1) both; }
/* one slim pill: three numbers + a round arrow; the two switches sit outside it, quiet */
.mh .nh-bar { position: relative; display: grid; grid-template-columns: .62fr 1fr 1fr 64px; grid-template-rows: 64px auto;
  width: 100%; padding: 0; gap: 0; border: 0; border-radius: 0; background: none; box-shadow: none; overflow: visible; }
.mh .nh-bar::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 64px; border-radius: 999px;
  background: var(--mh-field); border: 1px solid var(--mh-line); transition: background .2s, border-color .2s; pointer-events: none; }
.mh .nh-bar:focus-within::before { background: var(--mh-field-hi); border-color: rgba(255,255,255,.16); }
.mh .nh-f { position: relative; display: flex; flex-direction: column; justify-content: center; gap: 3px; height: 64px;
  padding: 0 18px; border: 0; border-radius: 0; background: none; text-align: left; min-width: 0; }
.mh .nh-f:first-of-type { padding-left: 26px; }
.mh .nh-f + .nh-f::before { content: ""; position: absolute; left: 0; top: 18px; bottom: 18px; width: 1px; background: var(--mh-line); }
.mh .nh-f .lb { font: 500 12px/1 var(--f-t); letter-spacing: 0; text-transform: none; color: rgba(255,255,255,.56); white-space: nowrap; }
.mh .nh-f .in { font-size: 17px; gap: 2px; }
.mh .nh-f .in b { font-weight: 500; color: rgba(255,255,255,.5); }
.mh .nh-f .in i { display: none; }
.mh .nh-f input { font: 500 17px/1.2 var(--f-t); color: #fff; padding: 0; }
.mh .nh-f input::placeholder { color: rgba(255,255,255,.3); }
.mh .nh-go { position: relative; grid-column: 4; grid-row: 1; align-self: center; justify-self: end; width: 52px; height: 52px; min-height: 0;
  margin: 0 6px 0 0; padding: 0; border-radius: 50%; display: grid; place-items: center; background: #fff; color: #111;
  box-shadow: none; transition: transform .15s, background .2s; }
.mh .nh-go:hover { background: #e8ecff; transform: translateX(2px); }
.mh .nh-go::before, .mh .nh-go::after { display: none; }
.mh .nh-go .go-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.mh .nh-go .mh-arr { width: 22px; height: 22px; }
.mh .nh-go.running { background: #3c6ef6; color: #fff; }
.mh .nh-go.running .mh-arr { display: none; }
.mh .nh-go .sp { grid-area: 1 / 1; }
.mh .nh-opts { grid-column: 1 / -1; grid-row: 2; display: flex; justify-content: center; gap: 20px; margin-top: 14px; padding: 0; border: 0; background: none; }
.mh .nh-opt { display: inline-flex; gap: 2px; padding: 2px; border: 0; border-radius: 999px; background: rgba(255,255,255,.04); }
.mh .nh-opt button { padding: 5px 11px; border: 0; border-radius: 999px; font: 500 12.5px/1 var(--f-t); color: rgba(255,255,255,.45); background: none; box-shadow: none; }
.mh .nh-opt button:hover { color: rgba(255,255,255,.75); }
.mh .nh-opt button[aria-pressed="true"] { color: #fff; background: rgba(255,255,255,.1); }
.mh .nh-f.miss .lb { color: #ff9d94; }
.mh .nh-f.miss input::placeholder { color: rgba(255,157,148,.45); }
.mh .nh-bar.err .nh-go, .mh form.err .nh-go { animation: mhNudge .35s; }
@keyframes mhNudge { 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }
.mh .nh-note { margin-top: 12px; font-size: 12.5px; color: rgba(255,255,255,.5); text-align: center; }
.mh .nh-answer { width: 100%; margin-top: 4px; text-align: left; }

/* ── the result: hidden until a run; then a compact ring + answer card ── */
.mh .nh-ring.idle { display: none; }
.mh .nh-ring { position: relative; width: 100%; aspect-ratio: auto; margin-top: 18px; display: flex; flex-direction: column; align-items: center;
  gap: 14px; padding: 28px clamp(18px, 5vw, 44px) 30px; border-radius: 26px; background: var(--mh-field); border: 1px solid var(--mh-line);
  container-type: normal; text-align: center; animation: mhIn .6s cubic-bezier(.2,.7,.2,1) both; }
.mh #nh-svg, .mh .nh-glow { position: relative; inset: auto; width: 112px; height: 112px; flex: none; }
.mh .nh-glow { position: absolute; top: 28px; left: 50%; margin-left: -56px; }
.mh .nh-center { position: static; inset: auto; width: 100%; max-width: 520px; align-items: center; text-align: center; gap: 10px; }
.mh .nh-center .eye { font-size: 11px; }
.mh .nh-center .big { font-size: 40px; }
.mh .nh-center .of { font-size: 13px; }
.mh .nh-center .tag { font-size: 12px; }
.mh .nh-center h2 { margin: 2px 0 0; font: 600 clamp(24px, 3vw, 30px)/1.12 var(--f-d); letter-spacing: -.035em; color: #fff; text-wrap: balance; }
.mh .nh-center .ex { margin: 0; font: 400 14px/1.55 var(--f-t); color: var(--mh-mute); text-wrap: pretty; }

.mh .nh-ring.done { overflow: hidden; }
.mh .nh-ring.done::before { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(420px 220px at 50% 0%, rgba(63,220,143,.10), transparent 70%), radial-gradient(520px 260px at 50% 100%, rgba(60,110,246,.16), transparent 70%); }
.mh .nh-ring.done.close::before { background: radial-gradient(420px 220px at 50% 0%, rgba(243,199,122,.10), transparent 70%), radial-gradient(520px 260px at 50% 100%, rgba(60,110,246,.16), transparent 70%); }
.mh .nh-ring.done.fail::before { background: radial-gradient(420px 220px at 50% 0%, rgba(255,157,148,.09), transparent 70%), radial-gradient(520px 260px at 50% 100%, rgba(60,110,246,.16), transparent 70%); }
.mh .nh-ring > :not(.nh-glow) { position: relative; }
.mh-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin-top: 4px; }
.mh-chips > span { display: inline-flex; align-items: baseline; gap: 6px; padding: 6px 11px; border-radius: 999px; background: rgba(255,255,255,.05);
  border: 1px solid var(--mh-line); font: 500 13px/1 var(--f-t); color: #fff; font-variant-numeric: tabular-nums; }
.mh-chips small { font: 500 10.5px/1 var(--f-t); letter-spacing: .08em; text-transform: uppercase; color: rgba(255,255,255,.42); }
.mh-perks { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 18px; margin: 0 0 6px; padding: 0; list-style: none; }
.mh-perks li { display: inline-flex; align-items: center; gap: 6px; font: 500 13px/1.3 var(--f-t); color: rgba(255,255,255,.7); }
.mh-perks li::before { content: ""; width: 14px; height: 14px; flex: none; border-radius: 50%; background: rgba(63,220,143,.16)
  url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.5l4 4 8-9' fill='none' stroke='%237be8b3' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/10px no-repeat; }
/* the one next step: the $1 trial */
.mh-trial { display: flex; flex-direction: column; align-items: center; gap: 10px; width: 100%; margin-top: 12px; padding-top: 22px;
  border-top: 1px solid var(--mh-line); animation: mhIn .6s .1s cubic-bezier(.2,.7,.2,1) both; }
.mh-trial-go { display: inline-flex; align-items: center; justify-content: center; gap: 10px; width: min(100%, 340px); height: 54px; padding: 0 26px;
  border: 0; border-radius: 999px; cursor: pointer; color: #fff; font: 600 16px/1 var(--f-t);
  background: linear-gradient(135deg, #4d7cff, #3c5ef0 55%, #6a4dff); box-shadow: 0 10px 30px rgba(60,110,246,.38), inset 0 1px 0 rgba(255,255,255,.22);
  transition: transform .15s, box-shadow .2s, filter .2s; }
.mh-trial-go svg { width: 18px; height: 18px; transition: transform .15s; }
.mh-trial-go:hover { transform: translateY(-1px); filter: brightness(1.08); box-shadow: 0 14px 36px rgba(60,110,246,.5), inset 0 1px 0 rgba(255,255,255,.22); }
.mh-trial-go:hover svg { transform: translateX(3px); }
.mh-trial-go:focus-visible { outline: 2px solid #c9d6ff; outline-offset: 3px; }
/* William introduces the next step: his live mark + what he'll do for this answer */
.mh-will { display: flex; gap: 14px; align-items: flex-start; width: 100%; max-width: 480px; margin-bottom: 6px; padding: 16px 18px 16px 16px; border-radius: 20px; text-align: left;
  background: linear-gradient(135deg, rgba(77,124,255,.14), rgba(106,77,255,.08)); border: 1px solid rgba(124,140,255,.3); box-shadow: 0 8px 28px rgba(60,110,246,.12); }
.mh-will .cs-wmk { width: 42px; height: 42px; margin: 2px 0 0 2px; }
.mh-will-nm { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; margin-bottom: 5px; font: 500 12px/1.2 var(--f-t); color: rgba(255,255,255,.45); }
.mh-will-nm b { font: 600 14px/1.2 var(--f-t); color: #fff; }
.mh-will-nm i { display: inline-flex; align-items: center; gap: 5px; margin-left: auto; font-style: normal; color: #7be8b3; }
.mh-will-nm i::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #3fdc8f; box-shadow: 0 0 0 3px rgba(63,220,143,.18); }
.mh-will p { margin: 0; font: 400 14px/1.5 var(--f-t); color: rgba(255,255,255,.8); text-wrap: pretty; }
.mh-will p b { font-weight: 600; color: #fff; }
.mh-trial .mh-perks { margin: 2px 0 0; }
@media (max-width: 480px) { .mh-will { padding: 14px; gap: 12px; } .mh-will-nm i { margin-left: 0; } }
.mh-trial .fine { font: 400 12.5px/1.4 var(--f-t); color: rgba(255,255,255,.42); }
/* the trial button IS the call to action here, so the second "Save my plan" card steps aside */
.mh .nh-answer .nh-cta { display: none; }
.mh .nh-answer > .nh-note { margin-top: 12px; }

/* ── the trial line and "Learn more" ── */
.mh-more { margin-top: auto; display: inline-flex; gap: 8px; align-items: center; padding: 11px 18px; border-radius: 999px;
  background: var(--mh-field); border: 1px solid var(--mh-line); color: #fff; font: 500 14px/1 var(--f-t); text-decoration: none; }
.mh-more:hover { background: var(--mh-field-hi); }
.mh .mh-more { margin-top: clamp(32px, 8vh, 90px); }
.mh-more { transition: opacity .12s linear, transform .12s linear, background .2s; will-change: opacity, transform; }

@keyframes mhIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

@media (max-width: 760px) {
  .mh { min-height: 0; padding-top: 20px; }
  .mh-h1 { font-size: clamp(34px, 10.5vw, 48px); }
  .mh .nh-bar { grid-template-columns: .6fr 1fr 1fr; grid-template-rows: 60px auto auto; }
  .mh .nh-bar::before { height: 60px; border-radius: 20px; }
  .mh .nh-f { height: 60px; padding: 0 12px; }
  .mh .nh-f:first-of-type { padding-left: 16px; }
  .mh .nh-f .in, .mh .nh-f input { font-size: 16px; }
  .mh .nh-go { grid-column: 1 / -1; grid-row: 2; width: 100%; height: 50px; margin: 10px 0 0; border-radius: 999px; justify-self: stretch; }
  .mh .nh-opts { grid-row: 3; gap: 10px; }
  .mh .nh-go { display: flex; gap: 8px; justify-content: center; align-items: center; font: 600 15px/1 var(--f-t); }
  .mh .nh-go .go-label { position: static; width: auto; height: auto; clip-path: none; }
  .mh .nh-go .mh-arr { width: 18px; height: 18px; }
  .mh .nh-opts { flex-wrap: wrap; }
}
@media (prefers-reduced-motion: reduce) {
  .mh-mark, .mh-h1, .mh-q, .mh .nh-ask, .mh .nh-ring, .mh-trial { animation: none; }
  .mh-rot .w { transition: none; }
}
.mh .nh-answer .ans-assume { text-align: center; }
.mh .nh-answer .ans-assume ul { text-align: left; max-width: 520px; margin-inline: auto; }
.mh .nh-answer > .nh-note { text-align: center; }
/* the finished card: ring (with its % in the middle) | the answer, 50/50; chips + trial run full width below.
   .nh-center becomes display:contents so its children (eye, tag, h2, ex, chips, trial) are the grid's items. */
.mh-pct { display: none; }
.mh .nh-ring.done { display: grid; grid-template-columns: 1fr 1fr; column-gap: clamp(20px, 4vw, 40px); row-gap: 10px; align-items: center; text-align: left; }
.mh .nh-ring.done .nh-center { display: contents; }
.mh .nh-ring.done #nh-svg, .mh .nh-ring.done .nh-glow, .mh .nh-ring.done .mh-pct { grid-column: 1; grid-row: 1 / 5; place-self: center; }
.mh .nh-ring.done #nh-svg, .mh .nh-ring.done .nh-glow { width: clamp(150px, 20vw, 196px); height: clamp(150px, 20vw, 196px); position: relative; top: auto; left: auto; margin: 0; }
.mh .nh-ring.done .mh-pct { display: block; z-index: 1; font: 600 clamp(38px, 5vw, 50px)/1 var(--f-d); letter-spacing: -.04em; color: #fff; font-variant-numeric: tabular-nums; pointer-events: none; }
.mh .nh-ring.done .mh-pct small { font-size: .5em; margin-left: 1px; color: rgba(255,255,255,.6); }
.mh .nh-ring.done .nh-center > .eye, .mh .nh-ring.done .nh-center > .tag, .mh .nh-ring.done .nh-center > h2, .mh .nh-ring.done .nh-center > .ex { grid-column: 2; justify-self: start; }
.mh .nh-ring.done .nh-center { text-align: left; }
.mh .nh-ring.done .nh-center > h2, .mh .nh-ring.done .nh-center > .ex { justify-self: stretch; max-width: none; }
.mh .nh-ring.done .nh-center > .eye { align-self: end; }
.mh .nh-ring.done .nh-center > .ex { align-self: start; }
.mh .nh-ring.done .nh-center > .mh-chips, .mh .nh-ring.done .nh-center > .mh-trial { grid-column: 1 / -1; }
.mh .nh-ring.done .nh-center > .mh-chips { margin-top: 14px; }
@media (max-width: 760px) {
  /* a phone keeps the stack (half of 340px is too narrow for the headline); the % still sits in the ring */
  .mh .nh-ring.done, .mh .nh-ring.done .nh-center { grid-template-columns: 1fr; text-align: center; }
  .mh .nh-ring.done #nh-svg, .mh .nh-ring.done .nh-glow, .mh .nh-ring.done .mh-pct { grid-row: 1; }
  .mh .nh-ring.done #nh-svg, .mh .nh-ring.done .nh-glow { width: 150px; height: 150px; }
  .mh .nh-ring.done .nh-center > .eye, .mh .nh-ring.done .nh-center > .tag, .mh .nh-ring.done .nh-center > h2, .mh .nh-ring.done .nh-center > .ex { grid-column: 1; justify-self: center; }
}
/* hero2's `.nh-ring svg` (absolute, spinning) must not catch the button's arrow */
.mh .nh-ring .mh-trial-go svg { position: static; inset: auto; width: 18px; height: 18px; animation: none; pointer-events: none; }

/* ── the closing ask (2026-10-21): the hero's mark + pill, once more, at the foot of the page.
   The pill is a link: it scrolls back to the hero and puts the cursor in Age (js/hero.js). ── */
.mc-end-section { position: relative; overflow: hidden; }
.mc-end { --e-ink: #fff; --e-mute: rgba(255,255,255,.55); --e-ghost: rgba(255,255,255,.3); --e-line: rgba(255,255,255,.08);
  --e-d: Sora, Outfit, system-ui, sans-serif; --e-t: 'Public Sans', system-ui, sans-serif;
  position: relative; display: flex; flex-direction: column; align-items: center; text-align: center;
  padding: clamp(72px, 12vh, 140px) 0 clamp(64px, 10vh, 120px); font-family: var(--e-t); color: var(--e-ink); }
.mc-end > * { position: relative; z-index: 1; }
.mc-end-glow { position: absolute; z-index: 0; left: 50%; top: 0; width: min(1100px, 140%); height: 100%; transform: translateX(-50%);
  pointer-events: none;
  background: radial-gradient(closest-side at 50% 28%, rgba(60,110,246,.22), rgba(122,76,240,.08) 55%, transparent 80%); }
.mc-end-glow::before { content: ""; position: absolute; left: 12%; right: 12%; top: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(124,156,255,.45), transparent); }
.mc-end-mark { width: clamp(64px, 7vw, 92px); height: auto; margin-bottom: clamp(20px, 3.5vh, 32px);
  filter: drop-shadow(0 10px 30px rgba(60,110,246,.4)); }
.mc-end-h { margin: 0; display: flex; flex-direction: column; align-items: center;
  font: 600 clamp(38px, 5.6vw, 76px)/1.04 var(--e-d); letter-spacing: -.045em; color: var(--e-ink); }
.mc-end-h span { color: #8e8e95; }
.mc-end-q { max-width: 460px; margin: clamp(20px, 3.5vh, 28px) 0 clamp(28px, 5vh, 44px); font: 400 15px/1.5 var(--e-t);
  color: var(--e-mute); text-wrap: balance; }
/* the pill: same shape as the hero's bar, read-only */
.mc-end-bar { display: grid; grid-template-columns: .62fr 1fr 1fr auto; align-items: center; width: min(100%, 620px); height: 64px;
  border-radius: 999px; background: #232326; border: 1px solid var(--e-line); text-decoration: none; color: inherit; text-align: left;
  transition: background .2s, border-color .2s, transform .2s; }
.mc-end-bar:hover { background: #2b2b2f; border-color: rgba(255,255,255,.16); }
.mc-end-bar:focus-visible { outline: 2px solid #7c9cff; outline-offset: 3px; }
.mc-end-bar .f { position: relative; display: flex; flex-direction: column; gap: 3px; padding: 0 18px; min-width: 0; }
.mc-end-bar .f:first-child { padding-left: 26px; }
.mc-end-bar .f + .f::before { content: ""; position: absolute; left: 0; top: -4px; bottom: -4px; width: 1px; background: var(--e-line); }
.mc-end-bar small { font: 500 12px/1 var(--e-t); color: rgba(255,255,255,.56); white-space: nowrap; }
.mc-end-bar i { font: 500 17px/1.2 var(--e-t); font-style: normal; color: var(--e-ghost); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mc-end-bar .go { display: inline-flex; align-items: center; gap: 8px; height: 52px; margin-right: 6px; padding: 0 15px 0 20px;
  border-radius: 999px; background: #fff; color: #111; font: 600 14.5px/1 var(--e-t); white-space: nowrap; transition: background .2s; }
.mc-end-bar:hover .go { background: #e8ecff; }
.mc-end-bar .go svg { width: 20px; height: 20px; transition: transform .2s; }
.mc-end-bar:hover .go svg { transform: translateX(3px); }
.mc-end-bar i b { font-weight: 500; color: rgba(255,255,255,.5); margin-right: 2px; }
.mc-end-fine { margin: 16px 0 0; font-size: 12.5px; color: rgba(255,255,255,.5); }
@media (max-width: 760px) {
  .mc-end-bar .go-l { display: none; }
  .mc-end-bar .go { width: 52px; padding: 0; justify-content: center; }
}
@media (max-width: 520px) {
  /* phones: the pill becomes one button */
  .mc-end-bar { grid-template-columns: 1fr; height: 56px; width: min(100%, 320px); background: #fff; border: 0; }
  .mc-end-bar:hover { background: #e8ecff; }
  .mc-end-bar .f { display: none; }
  .mc-end-bar .go { justify-content: center; width: auto; margin: 0; padding: 0; background: none; height: 56px; }
  .mc-end-bar .go-l { display: inline; }
}

/* tablet pass (T2.5): the result card's small labels reach 12px; "Learn more" is a 44px target for a finger */
@media (min-width: 700px) and (max-width: 1099px), (min-width: 700px) and (hover: none), (min-width: 700px) and (pointer: coarse) {
  .mh-chips small, .mh .nh-center .eye { font-size: 12px; }
}
@media (hover: none), (pointer: coarse) {
  .mh-more { min-height: 44px; }
  /* the answer's two quiet controls keep their look and get a finger-sized reach */
  .mh .nh-note button, .mh .ans-assume summary { position: relative; }
  .mh .nh-note button::after { content: ""; position: absolute; inset: -13px -4px; }
  .mh .ans-assume summary::after { content: ""; position: absolute; inset: -15px 0; }
}