/* ============================================================
   HOME.CSS — the home page (index.html) only
   ============================================================
   Built 2026-10-08 from design H on the "Medivoca home page
   directions" canvas, which Nick chose ("Great, let's use this").
   The look: one flowing page in the manner of Duolingo, one strong
   brand blue for headings and buttons, Nunito Black headings, lots of
   white space, and the characters drawn into each section instead of
   sitting in boxes.

   This page does NOT load style.css or skins.css (those carry the
   Affix Dex's and Word Lab's own page rules, starting with a 27px body
   margin). Everything it needs is here, including its own styling of
   the shared cookie banner and feedback form, whose markup and
   scripts (tracking-consent.js, feedback-widget.js) are the same as on
   the other pages.

   2026-10-08, later: tool first. Nick: the characters should stay
   noticeable, but the emphasis belongs on learning, so people take the
   site seriously as a tool. So the hero leads with the search (copy on
   the left, the trio smaller on the right), a row of the four
   tools follows the language strip, the characters no longer perch on
   the Dictionary and Glossary previews, and the crew showcase became a
   compact closing band.

   2026-10-08, easier to scan. Nick: "I find myself not able to actually
   read the text... too many moving parts and too many things for my eyes
   to follow." So: the hero is headline, one sentence, search and four
   suggestions only (the eyebrow and the stats row went); the "Pick a
   tool" cards went (they repeated the sections below); every section
   now reads the same way, text on the left and its picture on the right
   (no zigzag), with a small label naming the tool above each headline;
   body text is darker and lines are shorter; the scattered, tilted
   word-part tiles and the second floating Brix became one worked
   example read left to right (cardi + o + megaly = Cardiomegaly). The
   only thing that moves by itself is Brix in the hero.

   Phones: nothing floats over the content (the rule from 2026-10-07).
   Send feedback and Cookie settings live in the footer and the Menu.
   ============================================================ */

:root {
  --hm-blue: #1A7BE0;
  --hm-blue-press: #135EAF;
  --hm-blue-text: #1667C2;
  --hm-ink: #0B3B6E;
  --hm-body: #24384B;
  --hm-muted: #4A5D70;
  --hm-faint: #7A8EA2;
  --hm-line: #EDF2F7;
  --hm-line-strong: #D6E3EE;
  --hm-tint: #F4F9FF;
  --hm-teal: #0E8A6E;
  --hm-teal-dot: #14B38D;
  --hm-navy: #0B3B6E;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html.home-page {
  scroll-behavior: smooth;
}

html.home-page body {
  margin: 0;
  background: #FFFFFF;
  color: var(--hm-body);
  font-family: 'Nunito', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 18px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

.home-page img {
  max-width: 100%;
}

.home-page a {
  color: var(--hm-blue-text);
}

.home-page a:hover {
  color: var(--hm-ink);
}

.home-page h1,
.home-page h2,
.home-page h3 {
  font-family: inherit;
}

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

.hm-skip {
  position: absolute;
  left: 12px;
  top: -48px;
  z-index: 50;
  padding: 10px 16px;
  background: var(--hm-ink);
  color: #FFFFFF !important;
  border-radius: 10px;
  font-weight: 800;
  text-decoration: none;
}

.hm-skip:focus {
  top: 12px;
}

.hm-wrap {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 32px;
}

.hm-wrap-narrow {
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 32px;
}

.home-page :focus-visible {
  outline: 3px solid #8CC4F5;
  outline-offset: 2px;
}

/* ---------- Buttons ---------- */
.hm-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 50px;
  padding: 0 24px;
  border-radius: 14px;
  border: none;
  font-family: inherit;
  font-weight: 900;
  font-size: 15px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.08s ease, box-shadow 0.08s ease, background-color 0.15s ease;
}

.hm-btn:active {
  transform: translateY(3px);
}

.hm-btn-primary {
  background: var(--hm-blue);
  color: #FFFFFF !important;
  box-shadow: 0 4px 0 var(--hm-blue-press);
}

.hm-btn-primary:hover {
  background: #1F86EE;
}

.hm-btn-primary:active {
  box-shadow: 0 1px 0 var(--hm-blue-press);
}

.hm-btn-ghost {
  background: #FFFFFF;
  color: var(--hm-blue-text) !important;
  border: 2px solid var(--hm-line-strong);
  box-shadow: 0 4px 0 var(--hm-line-strong);
  padding: 0 22px;
}

.hm-btn-ghost:hover {
  background: #F7FBFF;
}

.hm-btn-ghost:active {
  box-shadow: 0 1px 0 var(--hm-line-strong);
}

.hm-btn-white {
  background: #FFFFFF;
  color: var(--hm-blue) !important;
  height: 54px;
  padding: 0 30px;
  border-radius: 16px;
  font-size: 16px;
  box-shadow: 0 5px 0 #0F5BAD;
}

.hm-btn-white:active {
  box-shadow: 0 2px 0 #0F5BAD;
}

.hm-btn-pill {
  border-radius: 999px;
}

/* ---------- Header ---------- */
.hm-header {
  position: relative;
  z-index: 20;
  background: #FFFFFF;
  border-bottom: 2px solid var(--hm-line);
}

.hm-header-inner {
  max-width: 1180px;
  margin: 0 auto;
  padding: 10px 32px;
  display: flex;
  align-items: center;
  gap: 32px;
}

/* The logo: Images/MediVoca-Logo-5.png, the wide MediVoca logo, on every
   screen size. The file has wide empty margins, so home.js trims it to
   the artwork and adds .is-trimmed; the heights below then measure the
   artwork itself (shield and name). To make it bigger or smaller, change
   the .is-trimmed heights: 72px here and 50px in the phone section
   further down. The plain heights are only the fallback for the
   untrimmed file. (Nick, 2026-10-08: the logo looked small next to the
   rest of the page, twice.) */
.hm-brand {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  text-decoration: none;
  border-radius: 8px;
}

.hm-logo {
  display: block;
  height: 84px;
  width: auto;
  max-width: 60vw;
  object-fit: contain;
  object-position: left center;
}

.hm-logo.is-trimmed {
  height: 72px;
  max-width: 62vw;
}

.hm-nav {
  display: flex;
  align-items: center;
  gap: 30px;
  margin-left: auto;
  font-weight: 800;
  font-size: 15px;
  letter-spacing: 0.02em;
}

.hm-nav a {
  color: var(--hm-muted);
  text-decoration: none;
  padding: 6px 0;
  border-bottom: 2px solid transparent;
}

.hm-nav a:hover {
  color: var(--hm-blue);
  border-bottom-color: var(--hm-blue);
}

.hm-nav-sep {
  width: 2px;
  height: 22px;
  background: var(--hm-line);
  border-radius: 2px;
}

/* "Soon" — the same badge the site menu shows on the other pages
   (skins.css .menu-coming-badge), so the two read as one menu. */
.hm-soon-badge {
  display: inline-block;
  margin-left: 4px;
  padding: 2px 7px;
  border-radius: 6px;
  background: #E6F2FF;
  color: var(--hm-blue-text);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: none;
  vertical-align: 1px;
}

.hm-soon-badge-dark {
  background: rgba(255, 255, 255, 0.14);
  color: #DCEBFB;
}

.hm-menu-btn {
  display: none;
  margin-left: auto;
  height: 44px;
  padding: 0 14px;
  background: #FFFFFF;
  color: var(--hm-blue);
  border: 2px solid var(--hm-line-strong);
  border-radius: 12px;
  box-shadow: 0 3px 0 var(--hm-line-strong);
  font-family: inherit;
  font-weight: 900;
  font-size: 14px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}

.hm-menu-panel {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  background: #FFFFFF;
  border-bottom: 2px solid var(--hm-line);
  box-shadow: 0 16px 32px rgba(11, 59, 110, 0.10);
  padding: 8px 20px 16px;
  display: flex;
  flex-direction: column;
}

.hm-menu-panel[hidden] {
  display: none;
}

.hm-menu-panel a,
.hm-menu-panel button {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  text-align: left;
  padding: 13px 4px;
  font-family: inherit;
  font-weight: 800;
  font-size: 17px;
  color: var(--hm-ink);
  text-decoration: none;
  background: none;
  border: none;
  border-bottom: 1px solid var(--hm-line);
  cursor: pointer;
}

.hm-menu-panel button {
  color: var(--hm-muted);
  font-weight: 700;
  font-size: 16px;
}

.hm-menu-panel> :last-child {
  border-bottom: none;
}

.hm-menu-panel svg {
  flex-shrink: 0;
  stroke: currentColor;
  opacity: 0.7;
}

.hm-menu-panel .hm-soon-badge {
  margin-left: auto;
}

.hm-menu-label {
  display: block;
  padding: 14px 4px 4px;
  font-weight: 800;
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--hm-faint);
}

.hm-menu-sep {
  display: block;
  height: 2px;
  margin: 10px 0 2px;
  background: var(--hm-line);
}

/* ---------- Hero ---------- */
.hm-hero {
  overflow: hidden;
}

.hm-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: 56px;
  align-items: center;
  padding-top: clamp(40px, 5.5vw, 84px);
  padding-bottom: clamp(28px, 3.5vw, 48px);
}

/* Supporting art: smaller than the copy column, so the search leads. */
.hm-hero-art {
  position: relative;
  height: clamp(280px, 27vw, 380px);
}

.hm-hero-shape {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.hm-pulse {
  fill: none;
  stroke-linejoin: round;
  stroke-linecap: round;
}

.hm-pulse-under {
  stroke: #FFFFFF;
  stroke-width: 6;
}

.hm-pulse-line {
  stroke: #8CC4F5;
  stroke-width: 2.5;
}

/* Characters: one shadow for everyone. The pictures themselves carry no
   shadow (Leo's was tan, Jun's purple; both removed 2026-10-08), so every
   character on the page gets this same soft ellipse. .hm-char-air is for a
   jumping or floating character: the shadow drops lower and fades. */
.hm-char {
  position: absolute;
  display: block;
}

.hm-char img {
  position: relative;
  z-index: 1;
  display: block;
  height: 100%;
  width: auto;
  /* a faint contour so white coats never melt into a pale background */
  filter: drop-shadow(0 0 1px rgba(11, 59, 110, 0.45));
}

.hm-char::after {
  content: "";
  position: absolute;
  z-index: 0;
  left: 14%;
  right: 14%;
  bottom: -2.5%;
  height: 8%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(11, 59, 110, 0.38), rgba(11, 59, 110, 0));
}

.hm-char-air::after {
  left: 22%;
  right: 22%;
  bottom: -12%;
  opacity: 0.8;
}

.hm-hero-warm {
  left: 9%;
  bottom: 17%;
  height: 60%;
}

.hm-hero-cool {
  right: 9%;
  bottom: 7%;
  height: 64%;
}

/* Brix floats above the two doctors: the trio stays (Nick liked it). */
.hm-hero-brix {
  position: absolute;
  left: 44%;
  top: 2%;
  width: 17%;
  height: auto;
  transform: rotate(-8deg);
}

.hm-hero-copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
  min-width: 0;
}

.hm-eyebrow {
  font-weight: 800;
  font-size: 13px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--hm-teal);
}

.hm-hero-copy h1 {
  margin: 0;
  font-weight: 900;
  font-size: clamp(38px, 4.4vw, 58px);
  line-height: 1.08;
  letter-spacing: -0.02em;
  color: var(--hm-ink);
}

.hm-lead {
  margin: 0;
  max-width: 26em;
  font-size: clamp(17px, 1.35vw, 20px);
  line-height: 1.6;
  color: var(--hm-body);
}

.hm-search {
  width: 100%;
  max-width: 540px;
  margin-top: 4px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 7px 7px 20px;
  background: #FFFFFF;
  border: 2px solid var(--hm-line-strong);
  border-radius: 999px;
  box-shadow: 0 12px 32px rgba(11, 59, 110, 0.10);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.hm-search:focus-within {
  border-color: #8CC4F5;
  box-shadow: 0 12px 32px rgba(11, 59, 110, 0.14), 0 0 0 4px rgba(26, 123, 224, 0.12);
}

.hm-search svg {
  flex-shrink: 0;
}

.hm-search input {
  flex: 1;
  min-width: 0;
  height: 50px;
  border: none;
  outline: none;
  background: transparent;
  font-family: inherit;
  font-size: 18px;
  color: var(--hm-body);
}

.hm-search input::placeholder {
  color: #6E8296;
}

.hm-search input::-webkit-search-cancel-button {
  cursor: pointer;
}

.hm-search .hm-btn {
  height: 50px;
}

.hm-try {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.hm-try a {
  padding: 7px 14px;
  border: 2px solid #E3EBF2;
  border-radius: 999px;
  font-weight: 800;
  font-size: 15px;
  color: var(--hm-blue-text);
  text-decoration: none;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}

.hm-try a:hover {
  border-color: #B9D6F2;
  background: #F4F9FF;
}

/* What is inside: three real counts under the search. */
.hm-stats {
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 0;
}

.hm-stats li {
  display: flex;
  flex-direction: column;
  padding: 0 26px;
  border-left: 2px solid var(--hm-line);
}

.hm-stats li:first-child {
  padding-left: 0;
  border-left: none;
}

.hm-stats strong {
  font-weight: 900;
  font-size: 28px;
  line-height: 1.1;
  color: var(--hm-ink);
  letter-spacing: -0.01em;
}

.hm-stats span {
  font-size: 14px;
  font-weight: 700;
  color: var(--hm-faint);
}

/* ---------- The four tools ---------- */
.hm-tools-sec {
  padding-top: clamp(48px, 6vw, 80px);
}

.hm-section-label {
  margin: 0 0 18px;
  font-weight: 800;
  font-size: 13px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--hm-faint);
}

.hm-tools {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}

.hm-tool {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 22px 22px 24px;
  background: #FFFFFF;
  border: 2px solid #E3EBF2;
  border-radius: 20px;
  box-shadow: 0 4px 0 #E3EBF2;
  text-decoration: none;
  color: var(--hm-body) !important;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

.hm-tool:hover {
  border-color: #9CCAF3;
  box-shadow: 0 4px 0 #9CCAF3;
  transform: translateY(-2px);
}

.hm-tool:active {
  transform: translateY(2px);
  box-shadow: 0 1px 0 #9CCAF3;
}

.hm-tool-icon {
  width: 46px;
  height: 46px;
  border-radius: 14px;
  background: #E4F2FF;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 6px;
}

.hm-tool-icon svg {
  stroke: var(--hm-blue);
}

.hm-tool-name {
  font-weight: 900;
  font-size: 19px;
  color: var(--hm-ink);
}

.hm-tool-desc {
  font-size: 15px;
  line-height: 1.45;
  color: var(--hm-muted);
}

/* ---------- Jump to a tool ---------- */
/* One quiet line at the foot of the hero: no cards, no descriptions, no
   motion. Plain icon-and-name links in the body colour that turn blue on
   hover, so it reads as a shortcut, not as another thing to study. */
.hm-jump {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 28px;
  padding-top: 18px;
  padding-bottom: 26px;
}

.hm-jump-label {
  font-weight: 800;
  font-size: 13px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--hm-faint);
  margin-right: 4px;
}

.hm-jump a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 0;
  font-weight: 800;
  font-size: 16px;
  color: var(--hm-ink);
  text-decoration: none;
  border-bottom: 2px solid transparent;
}

.hm-jump a:hover {
  color: var(--hm-blue);
  border-bottom-color: var(--hm-blue);
}

.hm-jump svg {
  stroke: var(--hm-blue);
  flex-shrink: 0;
}

.hm-jump .hm-soon-badge {
  margin-left: 0;
}

/* ---------- Language strip ---------- */
.hm-langs {
  border-top: 2px solid var(--hm-line);
  border-bottom: 2px solid var(--hm-line);
}

.hm-langs-inner {
  padding-top: 22px;
  padding-bottom: 22px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px 40px;
}

.hm-langs-label {
  font-weight: 800;
  font-size: 13px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--hm-faint);
}

.hm-langs-list {
  display: contents;
}

.hm-langs-list span {
  font-weight: 900;
  font-size: 19px;
  color: var(--hm-muted);
}

/* ---------- Feature sections ---------- */
.hm-feature-tint {
  background: var(--hm-tint);
}

.hm-feature-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(40px, 6vw, 96px);
  align-items: center;
  padding-top: clamp(64px, 8vw, 120px);
  padding-bottom: clamp(64px, 8vw, 120px);
}

.hm-feature-copy {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.hm-feature-copy h2 {
  margin: 0;
  font-weight: 900;
  font-size: clamp(32px, 3.4vw, 46px);
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--hm-blue);
}

.hm-feature-copy p {
  margin: 0;
  max-width: 26em;
  line-height: 1.65;
  color: var(--hm-body);
}

/* A small label naming the tool, so each section says what it is at a glance. */
.hm-kicker {
  font-weight: 800;
  font-size: 13px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--hm-teal);
  margin-bottom: -6px;
}

.hm-soon {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 800;
  font-size: 14px;
  color: var(--hm-teal);
}

.hm-soon-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--hm-teal-dot);
}

.hm-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 4px;
}

.hm-feature-visual {
  position: relative;
}

.hm-feature-visual-dict {
  padding-left: clamp(0px, 4vw, 56px);
}

.hm-feature-visual-gloss {
  padding-right: clamp(0px, 4vw, 56px);
}

.hm-card {
  position: relative;
  background: #FFFFFF;
  border: 2px solid #E3EBF2;
  border-radius: 24px;
  box-shadow: 0 24px 60px rgba(11, 59, 110, 0.10);
  overflow: hidden;
}

.hm-entry-head {
  padding: 26px 28px 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.hm-entry-title {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px 12px;
}

.hm-entry-word {
  font-weight: 900;
  font-size: 32px;
  letter-spacing: -0.01em;
  color: var(--hm-ink);
}

.hm-entry-meta {
  color: var(--hm-faint);
}

.hm-entry-def {
  margin: 0;
  font-size: 18px;
  color: var(--hm-body);
}

.hm-parts {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 6px;
}

.hm-part {
  padding: 6px 12px;
  border-radius: 10px;
  font-weight: 800;
  font-size: 15px;
  color: var(--hm-ink);
}

.hm-part span {
  font-weight: 600;
  color: var(--hm-muted);
  margin-left: 4px;
}

.hm-part-root {
  background: #E4F2FF;
}

.hm-part-suffix {
  background: #FFF1D6;
}

.hm-entry-tr {
  margin: 0;
  background: #F7FAFD;
  border-top: 2px solid var(--hm-line);
  padding: 8px 28px 14px;
  font-size: 16px;
}

.hm-entry-tr>div {
  display: flex;
  align-items: baseline;
  gap: 0 12px;
  padding: 9px 0;
  border-bottom: 1px solid #E8EFF5;
}

.hm-entry-tr>div:last-child {
  border-bottom: none;
}

.hm-entry-tr dt {
  flex: 0 0 64px;
  font-weight: 800;
  font-size: 13px;
  color: var(--hm-faint);
}

.hm-entry-tr dd {
  margin: 0;
  flex: 1;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0 12px;
}

.hm-entry-tr dd span {
  font-size: 13px;
  color: var(--hm-faint);
}

.hm-gloss-head {
  padding: 20px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-bottom: 2px solid var(--hm-line);
}

.hm-gloss-head>span:first-child {
  display: flex;
  flex-direction: column;
}

.hm-gloss-head strong {
  font-weight: 900;
  font-size: 20px;
  color: var(--hm-ink);
}

.hm-gloss-head>span:first-child>span {
  font-size: 14px;
  color: var(--hm-faint);
}

.hm-gloss-count {
  font-weight: 900;
  font-size: 13px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--hm-teal);
  background: #DDF6EF;
  border-radius: 999px;
  padding: 4px 10px;
  white-space: nowrap;
}

.hm-gloss-list {
  list-style: none;
  margin: 0;
  padding: 6px 24px 12px;
  font-size: 17px;
}

.hm-gloss-list li {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 11px 0;
  border-bottom: 1px solid var(--hm-line);
}

.hm-gloss-list li:last-child {
  border-bottom: none;
}

.hm-gloss-list strong {
  color: var(--hm-ink);
}

/* ---------- Worked example: cardi + o + megaly ---------- */
.hm-example {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 22px;
  padding: 40px 24px;
  background: #FFF8EA;
  border-radius: 28px;
}

.hm-example-parts {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
}

.hm-example .hm-tile {
  position: static;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  transform: none;
}

.hm-example .hm-tile small {
  margin-top: 2px;
  font-size: 13px;
  font-weight: 700;
  color: rgba(11, 42, 74, 0.75);
}

.hm-example-plus {
  align-self: center;
  font-weight: 900;
  font-size: 22px;
  color: var(--hm-faint);
  margin-top: -14px;
}

.hm-example-result {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  text-align: center;
}

.hm-example-arrow {
  width: 2px;
  height: 22px;
  margin-bottom: 8px;
  background: var(--hm-line-strong);
  position: relative;
}

.hm-example-arrow::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -2px;
  width: 9px;
  height: 9px;
  border-right: 2px solid var(--hm-line-strong);
  border-bottom: 2px solid var(--hm-line-strong);
  transform: translateX(-50%) rotate(45deg);
}

.hm-example-result strong {
  font-weight: 900;
  font-size: 30px;
  color: var(--hm-ink);
  letter-spacing: -0.01em;
}

.hm-example-result span {
  font-size: 17px;
  color: var(--hm-muted);
}

/* ---------- Word-part tiles ---------- */
.hm-blocks {
  position: relative;
  height: 340px;
}

.hm-blocks-shape {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.hm-tile {
  position: absolute;
  padding: 10px 18px;
  border-radius: 14px;
  font-weight: 900;
  font-size: 22px;
  color: #0B2A4A;
}

.hm-tile-root {
  background: #4CAEEF;
  box-shadow: 0 4px 0 #2F86C7;
}

.hm-tile-vowel {
  background: #8FE0C4;
  box-shadow: 0 4px 0 #5DBE9D;
  padding: 10px 16px;
}

.hm-tile-suffix {
  background: #FFC13D;
  box-shadow: 0 4px 0 #D9A02A;
}

.hm-tile-prefix {
  background: #FF8A57;
  box-shadow: 0 4px 0 #D9673A;
}

.hm-tile-a {
  left: 8%;
  top: 14%;
  transform: rotate(-6deg);
}

.hm-tile-b {
  left: 44%;
  top: 6%;
  transform: rotate(4deg);
}

.hm-tile-c {
  right: 6%;
  top: 18%;
  transform: rotate(7deg);
}

.hm-tile-d {
  left: 4%;
  bottom: 20%;
  font-size: 19px;
  padding: 9px 16px;
  transform: rotate(5deg);
}

.hm-tile-e {
  right: 4%;
  bottom: 22%;
  font-size: 19px;
  padding: 9px 16px;
  transform: rotate(-5deg);
}

.hm-blocks-brix {
  position: absolute;
  left: 50%;
  top: 56%;
  width: 112px;
  height: auto;
  transform: translate(-50%, -50%);
}

/* ---------- Crew band ---------- */
.hm-crew {
  background: var(--hm-blue);
  color: #FFFFFF;
  overflow: hidden;
}

.hm-crew-inner {
  padding-top: clamp(64px, 7vw, 104px);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 16px;
}

.hm-crew h2 {
  margin: 0;
  font-weight: 900;
  font-size: clamp(32px, 3.6vw, 48px);
  line-height: 1.1;
  letter-spacing: -0.02em;
}

.hm-crew p {
  margin: 0;
  max-width: 32em;
  color: #DCEBFB;
}

.hm-crew .hm-btn-white {
  margin-top: 8px;
}

.hm-crew-row {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: 0 clamp(6px, 4vw, 64px);
  margin-top: clamp(24px, 4vw, 48px);
}

.hm-crew-row figure {
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.hm-crew-row figcaption {
  margin: 8px 0 18px;
  font-weight: 900;
  font-size: 16px;
}

.hm-crew-row .hm-char {
  position: relative;
}

.hm-crew-row .hm-char::after {
  background: radial-gradient(closest-side, rgba(4, 30, 70, 0.38), rgba(4, 30, 70, 0));
}

.hm-crew-warm {
  height: clamp(104px, 13vw, 176px);
  margin-bottom: 18px;
}

/* Brix is a floating head, so at the doctors' full-body height he read as
   a giant (Nick, 2026-10-08: "disproportionately big"). He is now about
   the size he is next to them in the hero, floating at head height with
   the same slight tilt, and uses the same picture as the hero so he is
   one character everywhere. */
.hm-crew-brix {
  height: clamp(54px, 5.8vw, 80px);
  margin-bottom: clamp(40px, 5vw, 76px);
  transform: rotate(-8deg);
}

.hm-crew-cool {
  height: clamp(120px, 15vw, 200px);
}

/* ---------- Footer ---------- */
.hm-footer {
  background: var(--hm-navy);
  color: #C7DAEE;
  font-size: 15.5px;
}

.hm-footer-grid {
  padding-top: 52px;
  padding-bottom: 28px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 28px;
}

.hm-footer-brand {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.hm-footer-brand span:first-child {
  font-weight: 900;
  font-size: 24px;
  letter-spacing: -0.02em;
  color: #FFFFFF;
}

.hm-footer-col {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
}

.hm-footer-col h3 {
  margin: 0 0 2px;
  font-weight: 900;
  font-size: 13px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #FFFFFF;
}

.hm-footer a,
.hm-footer-col button {
  color: #C7DAEE;
  text-decoration: none;
}

.hm-footer a:hover,
.hm-footer-col button:hover {
  color: #FFFFFF;
  text-decoration: underline;
}

.hm-footer-col button {
  padding: 0;
  border: none;
  background: none;
  font: inherit;
  cursor: pointer;
  text-align: left;
}

.hm-footer-note {
  padding-top: 18px;
  padding-bottom: 30px;
  border-top: 1px solid #1E4E82;
  font-size: 14px;
  color: #A8C2DD;
}

/* ---------- Gentle motion (off when the visitor asks for less) ---------- */
@media (prefers-reduced-motion: no-preference) {
  .hm-hero-brix {
    animation: hmFloat 4.5s ease-in-out infinite;
  }

  .hm-pulse-line,
  .hm-pulse-under {
    stroke-dasharray: 700;
    stroke-dashoffset: 700;
    animation: hmDraw 1.6s 0.3s ease-out forwards;
  }
}

@keyframes hmFloat {

  0%,
  100% {
    transform: rotate(-8deg) translateY(0);
  }

  50% {
    transform: rotate(-6deg) translateY(-10px);
  }
}

@keyframes hmFloatCentered {

  0%,
  100% {
    transform: translate(-50%, -50%);
  }

  50% {
    transform: translate(-50%, calc(-50% - 8px));
  }
}

@keyframes hmDraw {
  to {
    stroke-dashoffset: 0;
  }
}

/* ---------- Tablet and phone ---------- */
@media (max-width: 900px) {
  .hm-nav {
    display: none;
  }

  .hm-menu-btn {
    display: inline-flex;
  }

  .hm-hero-grid,
  .hm-feature-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .hm-hero-grid {
    gap: 28px;
  }

  .hm-hero-art {
    height: clamp(220px, 52vw, 340px);
  }

  .hm-tools {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .hm-feature-grid-flip .hm-feature-visual {
    order: 2;
  }

  .hm-feature-visual-dict,
  .hm-feature-visual-gloss {
    padding: 0;
  }

  .hm-footer-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 560px) {
  html.home-page body {
    font-size: 17px;
  }

  .hm-logo {
    height: 58px;
  }

  .hm-logo.is-trimmed {
    height: 50px;
  }

  .hm-wrap,
  .hm-wrap-narrow,
  .hm-header-inner {
    padding-left: 20px;
    padding-right: 20px;
  }

  .hm-search {
    padding-left: 16px;
  }

  .hm-search .hm-btn {
    padding: 0 18px;
  }

  .hm-langs-inner {
    gap: 6px 22px;
  }

  .hm-langs-label {
    flex-basis: 100%;
    text-align: center;
  }

  .hm-blocks {
    height: 300px;
  }

  /* Phones: the four shortcuts as a tidy 2 x 2 grid under a label. */
  .hm-jump {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px 16px;
    padding-top: 4px;
  }

  .hm-jump-label {
    grid-column: 1 / -1;
    margin-bottom: 2px;
  }

  .hm-jump a {
    font-size: 15px;
  }

  .hm-example {
    padding: 28px 12px;
    gap: 18px;
  }

  .hm-example-parts {
    flex-wrap: nowrap;
    gap: 6px;
  }

  .hm-example .hm-tile {
    font-size: 18px;
    padding: 8px 12px;
  }

  .hm-example .hm-tile small {
    font-size: 11.5px;
  }

  .hm-example-plus {
    font-size: 18px;
  }

  .hm-example-result strong {
    font-size: 26px;
  }

  .hm-stats {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .hm-stats li {
    padding: 0 12px;
  }

  .hm-stats strong {
    font-size: 24px;
  }

  .hm-stats span {
    font-size: 13px;
    line-height: 1.3;
  }

  /* Phones: the four tools as a compact 2 x 2 grid of icon and name. */
  .hm-tools {
    gap: 10px;
  }

  .hm-tool {
    padding: 16px;
    gap: 6px;
  }

  .hm-tool-icon {
    margin-bottom: 2px;
    width: 40px;
    height: 40px;
    border-radius: 12px;
  }

  .hm-tool-name {
    font-size: 17px;
  }

  .hm-tool-name .hm-soon-badge {
    display: table;
    margin: 4px 0 0;
  }

  .hm-tool-desc {
    display: none;
  }

  .hm-footer-grid {
    grid-template-columns: 1fr;
  }
}

/* ============================================================
   Shared widgets, styled for this page
   ============================================================ */

/* The corner buttons stay hidden here at every width; the footer and the
   phone Menu press them (home.js), so feedback-widget.js and
   tracking-consent.js work unchanged. */
.home-page .feedback-icon-btn,
.home-page .cookie-settings-btn {
  display: none !important;
}

/* Cookie banner */
.cookie-consent-banner {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 500;
  display: flex;
  justify-content: center;
  padding: 16px;
  pointer-events: none;
}

.cookie-consent-banner.hidden {
  display: none;
}

.cookie-consent-inner {
  pointer-events: auto;
  width: 100%;
  max-width: 560px;
  background: #FFFFFF;
  border: 2px solid var(--hm-line-strong);
  border-radius: 20px;
  padding: 18px 20px;
  box-shadow: 0 16px 40px rgba(11, 59, 110, 0.18);
}

.cookie-consent-text {
  margin: 0 0 14px;
  font-size: 14px;
  line-height: 1.55;
  color: var(--hm-muted);
}

.cookie-consent-text strong {
  color: var(--hm-ink);
}

.cookie-consent-actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
}

.cookie-consent-btn {
  flex: 1;
  max-width: 180px;
  height: 46px;
  border-radius: 12px;
  font-family: inherit;
  font-weight: 900;
  font-size: 14px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
}

.cookie-consent-btn-reject {
  background: #FFFFFF;
  color: var(--hm-blue-text);
  border: 2px solid var(--hm-line-strong);
  box-shadow: 0 3px 0 var(--hm-line-strong);
}

.cookie-consent-btn-accept {
  background: var(--hm-blue);
  color: #FFFFFF;
  border: 2px solid var(--hm-blue);
  box-shadow: 0 3px 0 var(--hm-blue-press);
}

/* Feedback form */
.home-page .modal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 1000;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgba(11, 30, 52, 0.5);
}

.home-page .modal.show {
  display: flex;
}

.home-page .feedback-box {
  position: relative;
  width: 100%;
  max-width: 440px;
  max-height: calc(100vh - 32px);
  overflow-y: auto;
  background: #FFFFFF;
  border-radius: 22px;
  padding: 26px 26px 24px;
  box-shadow: 0 24px 60px rgba(11, 30, 52, 0.3);
}

.home-page .close-feedback {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 40px;
  height: 40px;
  border: none;
  border-radius: 12px;
  background: #F1F5F9;
  color: var(--hm-muted);
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
}

.home-page .header-info-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 6px;
  padding-right: 40px;
}

.home-page .feedback-icon {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: #E4F2FF;
  color: var(--hm-blue);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.home-page .feedback-box h2 {
  margin: 0;
  font-weight: 900;
  font-size: 22px;
  color: var(--hm-ink);
}

.home-page .feedback-subtitle {
  margin: 0 0 16px;
  font-size: 15px;
  color: var(--hm-muted);
}

.home-page .feedback-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 14px;
}

.home-page .feedback-type-chip {
  padding: 8px 14px;
  border: 2px solid #E3EBF2;
  border-radius: 999px;
  background: #FFFFFF;
  font-family: inherit;
  font-weight: 800;
  font-size: 14px;
  color: var(--hm-muted);
  cursor: pointer;
}

.home-page .feedback-type-chip.is-active {
  border-color: var(--hm-blue);
  background: #E4F2FF;
  color: var(--hm-ink);
}

.home-page .feedback-label {
  display: block;
  margin: 10px 0 6px;
  font-weight: 800;
  font-size: 14px;
  color: var(--hm-ink);
}

.home-page .feedback-optional {
  font-weight: 600;
  color: var(--hm-faint);
}

.home-page .feedback-box textarea,
.home-page .feedback-box input[type="email"] {
  width: 100%;
  padding: 12px 14px;
  border: 2px solid var(--hm-line-strong);
  border-radius: 12px;
  font-family: inherit;
  font-size: 16px;
  color: var(--hm-body);
  background: #FFFFFF;
  resize: vertical;
}

.home-page .feedback-box textarea:focus,
.home-page .feedback-box input[type="email"]:focus {
  outline: none;
  border-color: #8CC4F5;
  box-shadow: 0 0 0 4px rgba(26, 123, 224, 0.12);
}

.home-page .feedback-honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.home-page .feedback-error {
  margin: 10px 0 0;
  font-size: 14px;
  font-weight: 700;
  color: #B42318;
}

.home-page .feedback-submit {
  width: 100%;
  height: 50px;
  margin-top: 16px;
  border: none;
  border-radius: 14px;
  background: var(--hm-blue);
  color: #FFFFFF;
  box-shadow: 0 4px 0 var(--hm-blue-press);
  font-family: inherit;
  font-weight: 900;
  font-size: 15px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
}

.home-page .feedback-submit:disabled {
  opacity: 0.7;
  cursor: default;
}

.home-page .feedback-success {
  text-align: center;
  padding: 12px 0 4px;
}

.home-page .feedback-success-icon {
  width: 64px;
  height: 64px;
  margin: 0 auto 12px;
  border-radius: 50%;
  background: #DDF6EF;
  color: var(--hm-teal);
  display: flex;
  align-items: center;
  justify-content: center;
}

.home-page .feedback-success p {
  margin: 6px 0 0;
  color: var(--hm-muted);
}