/*
 * iht.tools shared theme.
 *
 * Every page loads this one file, with a path relative to its own folder:
 *   css/theme.css         the home page
 *   ../css/theme.css      team/, dashboard/ and wellnesswallet/
 *   ../../css/theme.css   the Wellness Wallet subpages
 * The patient pages first load what they use from the template they were built on, Bootstrap
 * and its main.css (wellnesswallet/css/template.css), and load this after it. Where a comment
 * below says "main.css", it means that file's part of template.css.
 *
 * Nothing here applies until a page opts in:
 *   <body class="iht">                 site pages (home, team, dashboard)
 *   <body class="iht iht--patient">    patient pages (the Wellness Wallet)
 * Every rule is scoped to body.iht, body.iht--patient or an iht- class.
 *
 * Colour is vocabulary: blue is IHT and "go on", red means a person needs follow-up, green
 * means a reward or done. Nothing else is coloured. The only blue is the light IHT blue and
 * its pale tints; text is a neutral near-black, not navy.
 *
 * Sections: 1 tokens, 2 base, 3 header, 4 buttons, 5 site pages and the footer, 6 patient
 * pages, 7 motion. Page-specific CSS stays in each page (see .claude/CLAUDE.md).
 */
/* The fonts are kept in the site (../fonts/), so a page needs no other server: Archivo (weights
   700 to 800 in one file) and Atkinson Hyperlegible Next (400 and 700 in one file). These are
   the files and the rules Google Fonts serves. Each face is split by alphabet, and a browser
   fetches only the parts a page has characters for: today, the two "latin" files. Every page
   also asks for those two straight away, with <link rel="preload"> tags in its head. Both
   families are under the SIL Open Font License (../fonts/OFL-*.txt). */
/* latin-ext */
@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 700 800;
  font-stretch: 100%;
  font-display: swap;
  src: url("../fonts/archivo-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 700 800;
  font-stretch: 100%;
  font-display: swap;
  src: url("../fonts/archivo-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: "Atkinson Hyperlegible Next";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/atkinson-hyperlegible-next-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: "Atkinson Hyperlegible Next";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/atkinson-hyperlegible-next-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: "Atkinson Hyperlegible Next";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/atkinson-hyperlegible-next-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: "Atkinson Hyperlegible Next";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/atkinson-hyperlegible-next-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---------- 1. Tokens ---------- */

body.iht {
  /* Colour */
  --iht-blue: #466eb6;       /* the brand, the bar, filled buttons, links, answer outlines. White on it 5.0:1 */
  --iht-blue-deep: #34589c;  /* hover and pressed */
  --iht-ink: #1f2328;        /* all text on light grounds: neutral near-black, 15.8:1 */
  --iht-ink-muted: #555c66;  /* secondary text and quiet outlines, 6.8:1 */
  --iht-mist: #edf1f8;       /* pale bands and stripes */
  --iht-rule: #c4d1ea;       /* borders */
  --iht-followup: #b42318;   /* needs follow-up, and nothing else. 6.6:1 */
  --iht-reward: #1e7b4f;     /* reward or done, and nothing else. White on it 5.3:1 */
  --iht-reward-deep: #17623f;

  /* Ordinal data ramp, pale to IHT blue = less to more severe (the dashboard's bars). The
     two palest are under 3:1 against white, so the dashboard outlines them in IHT blue. */
  --iht-data-1: #d3def2;
  --iht-data-2: #a6bce5;
  --iht-data-3: #7393cf;
  --iht-data-4: #466eb6;

  /* Type */
  --iht-display: "Archivo", "Arial Black", system-ui, sans-serif;  /* titles and figures */
  --iht-text: "Atkinson Hyperlegible Next", "Atkinson Hyperlegible", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Layout */
  --iht-max: 75rem;          /* the 1200px page grid */
  --iht-gutter: 2.5rem;
  /* The bar's height. It grows with the browser's font size, but only so far, so a larger
     default font doesn't eat the window. The quiz layout maths read it. */
  --iht-header-h: min(4.5rem, 56px + 2.5vw);   /* 72px at the default font */
  --iht-radius-control: 6px;
  --iht-radius-answer: 16px;
  --iht-radius-band: 12px;

  /* Dialogs and the open menu: the page behind is dimmed, and a dialog floats on a shadow.
     The only shadows in the theme. */
  --iht-scrim: rgba(31, 35, 40, 0.55);
  --iht-shadow-dialog: 0 24px 64px rgba(31, 35, 40, 0.3);

  /* Focus ring colour: Ink on light grounds; the blue regions set it to white. */
  --focus: var(--iht-ink);
}

@media (max-width: 991.98px) {
  body.iht {
    --iht-gutter: min(1rem, 20px);
    --iht-header-h: min(4rem, 48px + 6vw);     /* 64px at the default font */
  }
}

/* Patient pages. */
body.iht--patient {
  /* Go Back's height. The quizzes' --back-height reads it. Capped, so a larger default font
     doesn't turn it into a wall at the bottom of a phone. */
  --iht-back-h: min(3.5rem, 72px);
  /* The end screen's text column: the quizzes' 75vw, capped by Bootstrap's .container (720px
     below 992px, 1320px at most). Go Back lines up under Finish with it (section 6). */
  --iht-end-col: min(75vw, 1320px);
}

@media (min-width: 768px) and (max-width: 991.98px) {
  body.iht--patient {
    --iht-end-col: min(75vw, 720px);
  }
}

/* ---------- 2. Base ---------- */

body.iht {
  margin: 0;
  background: #fff;
  color: var(--iht-ink);
  font-family: var(--iht-text);
  font-size: 1rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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

/* sweetalert draws its icons in content-box sizing. Keep it, or the rings and ticks fall out of
   line (the gift-card page's dialogs). */
body.iht .swal-icon,
body.iht .swal-icon *,
body.iht .swal-icon::before,
body.iht .swal-icon::after {
  box-sizing: content-box;
}

body.iht img {
  max-width: 100%;
  height: auto;
}

/* Links */
body.iht a {
  color: var(--iht-blue);
  text-decoration-thickness: 2px;
  text-underline-offset: 0.2em;
}

body.iht a:hover {
  color: var(--iht-blue-deep);
}

/* Focus: a 3px ring for keyboard focus, never removed. Only focus the browser wouldn't mark
   (a mouse click) loses its outline; a browser without :focus-visible keeps its own. */
body.iht :focus:not(:focus-visible) {
  outline: none;
}

body.iht :focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
  box-shadow: none;
}

/* What a script moves focus to (the skip link's target, a quiz's new question or screen) isn't a
   control, so it takes focus without a ring: screen readers read it, and Tab goes on from it. */
body.iht [tabindex="-1"]:focus-visible {
  outline: none;
}

/* Text for screen readers only. */
.iht-sr-only {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Skip link: the first thing in the page, shown when it gets focus. */
.iht-skip {
  position: absolute;
  top: 0.5rem;
  left: 0.5rem;
  z-index: 1100;
  padding: 0.625rem 1rem;
  border-radius: var(--iht-radius-control);
  background: #fff;
  font-weight: 700;
  text-decoration: none;
  transform: translateY(-200%);
}

body.iht .iht-skip {
  --focus: #fff;
  color: var(--iht-ink);
}

body.iht .iht-skip:focus {
  transform: none;
}

/* The page grid */
.iht-wrap {
  max-width: var(--iht-max);
  margin: 0 auto;
  padding: 0 var(--iht-gutter);
}

/* ---------- 3. Header: one component on every page ---------- */

.iht-header {
  --focus: #fff;
  position: relative;
  z-index: 50;
  background: var(--iht-blue);
  color: #fff;
}

.iht-header--sticky {
  position: sticky;
  top: 0;
}

/* The sticky bar covers the top of the window, so wherever the browser scrolls a control into
   view (Tab, Shift+Tab, the skip link), it stops clear of the bar instead of under it. The
   header's own links stay in the bar and need none. */
body.iht:not(.iht--patient) :is(a, button, select, input, textarea, summary, [tabindex]):not(.iht-header *) {
  scroll-margin-top: calc(var(--iht-header-h) + 0.5rem);
}

.iht-header__inner {
  display: flex;
  align-items: center;
  gap: 1rem;
  max-width: var(--iht-max);
  height: var(--iht-header-h);
  margin: 0 auto;
  padding: 0 var(--iht-gutter);
}

/* The brand: a link to the top on site pages, a plain heading on patient pages. */
.iht-brand {
  display: inline-flex;
  align-items: center;
  gap: 0.875rem;
  min-height: 44px;
  margin: 0;
  border-radius: var(--iht-radius-control);
  line-height: 1;
  white-space: nowrap;
}

body.iht .iht-brand,
body.iht .iht-brand:hover {
  color: #fff;
  text-decoration: none;
}

/* The wordmark: Archivo at its heaviest. */
.iht-wordmark {
  margin: 0;
  color: #fff;
  font-family: var(--iht-display);
  font-weight: 800;
  font-size: 1.75rem;
  line-height: 1;
  letter-spacing: 0.02em;
}

/* Patient pages: "IHT | Wellness Wallet". */
.iht-brand__app {
  padding-left: 0.875rem;
  border-left: 2px solid rgba(255, 255, 255, 0.6);
  color: #fff;
  font-family: var(--iht-text);
  font-weight: 700;
  font-size: 1.375rem;
  line-height: 1.15;
  letter-spacing: 0;
}

/* Site menu, from 992px up: the links sit in the bar. */
.iht-header .menu-block-wrapper {
  margin-left: auto;
}

.iht-header .site-menu-main {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.iht-header .nav-item {
  margin: 0;
}

.iht-header .nav-link-item {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 0.875rem;
  border-radius: var(--iht-radius-control);
  color: #fff;
  font-family: var(--iht-text);
  font-weight: 700;
  font-size: 1.0625rem;
  line-height: 1.2;
  text-decoration: none;
}

body.iht .iht-header .nav-link-item:hover {
  color: #fff;
  text-decoration: underline;
}

.iht-header [aria-current="page"] {
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 0.3em;
}

/* "Request a Demo": outlined in white in the bar, so on home it doesn't repeat the hero's white
   button just below it; it fills on hover. In the phone menu it's the filled blue button. */
body.iht .iht-header .iht-nav-cta {
  margin-left: 0.25rem;
  padding: 0.5rem 1.125rem;
  border: 2px solid #fff;
  background: transparent;
  color: #fff;
}

body.iht .iht-header .iht-nav-cta:hover {
  border-color: #fff;
  background: #fff;
  color: var(--iht-blue);
  text-decoration: none;
}

.iht-header .mobile-menu-head,
.iht-header .menu-overlay,
.iht-header .mobile-menu-trigger {
  display: none;
}

/* Below 992px: only the wordmark and the menu button are in the bar. menu.js opens the menu
   (.menu-block) from the right, next to its button, over a dimmed page (.menu-overlay). */
@media (max-width: 991.98px) {
  .iht-header .menu-block-wrapper {
    margin-left: 0;
  }

  .iht-header .mobile-menu-trigger {
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    margin-left: auto;
    margin-right: -4px;
    border-radius: var(--iht-radius-control);
    cursor: pointer;
  }

  .iht-header .mobile-menu-trigger span,
  .iht-header .mobile-menu-trigger span::before,
  .iht-header .mobile-menu-trigger span::after {
    display: block;
    width: 24px;
    height: 3px;
    border-radius: 2px;
    background: #fff;
  }

  .iht-header .mobile-menu-trigger span {
    position: relative;
  }

  .iht-header .mobile-menu-trigger span::before,
  .iht-header .mobile-menu-trigger span::after {
    content: "";
    position: absolute;
    left: 0;
  }

  .iht-header .mobile-menu-trigger span::before {
    top: -8px;
  }

  .iht-header .mobile-menu-trigger span::after {
    top: 8px;
  }

  .iht-header .menu-overlay {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 1000;
    background: var(--iht-scrim);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, visibility 0s linear 0.2s;
  }

  .iht-header .menu-overlay.active {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.2s ease;
  }

  .iht-header .menu-block {
    --focus: var(--iht-ink);
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 1001;
    width: min(20rem, 86vw);
    overflow-y: auto;
    background: #fff;
    color: var(--iht-ink);
    box-shadow: -16px 0 40px rgba(31, 35, 40, 0.28);
    transform: translateX(100%);
    visibility: hidden;
    transition: transform 0.25s ease, visibility 0s linear 0.25s;
  }

  .iht-header .menu-block.active {
    transform: none;
    visibility: visible;
    transition: transform 0.25s ease;
  }

  /* The open menu starts with its own strip of header blue, so it reads as part of the bar. */
  .iht-header .mobile-menu-head {
    --focus: #fff;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    height: var(--iht-header-h);
    padding: 0 var(--iht-gutter);
    background: var(--iht-blue);
  }

  .iht-header .mobile-menu-close {
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    margin-right: -4px;
    border-radius: var(--iht-radius-control);
    color: #fff;
    font-size: 2.25rem;
    line-height: 1;
    cursor: pointer;
  }

  .iht-header .site-menu-main {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 0.5rem 0;
  }

  .iht-header .menu-block .nav-item + .nav-item {
    border-top: 2px solid var(--iht-mist);
  }

  .iht-header .menu-block .nav-link-item,
  body.iht .iht-header .menu-block .nav-link-item:hover {
    width: 100%;
    min-height: 56px;
    padding: 0.5rem var(--iht-gutter);
    border-radius: 0;
    color: var(--iht-ink);
    font-size: 1.375rem;
  }

  /* The rows span the panel, so their focus ring is drawn inside them. */
  body.iht .iht-header .menu-block .nav-link-item:not(.iht-nav-cta):focus-visible {
    outline-offset: -3px;
  }

  /* In the menu, "Request a Demo" is the one filled button, under "Our Team". */
  .iht-header .menu-block .nav-item.iht-nav-item--cta {
    padding: 1rem var(--iht-gutter) 0.5rem;
    border-top: 0;
  }

  body.iht .iht-header .menu-block .iht-nav-cta,
  body.iht .iht-header .menu-block .iht-nav-cta:hover {
    justify-content: center;
    margin: 0;
    padding: 0.625rem 1rem;
    border: 2px solid var(--iht-blue);
    border-radius: var(--iht-radius-control);
    background: var(--iht-blue);
    color: #fff;
    text-decoration: none;
  }

  body.iht .iht-header .menu-block .iht-nav-cta:hover {
    border-color: var(--iht-blue-deep);
    background: var(--iht-blue-deep);
  }

  /* The bar can't wrap, so its text is capped by the width too: a larger browser font can't
     push it off the side. */
  .iht-wordmark {
    font-size: min(1.5rem, 7vw);
  }

  .iht-brand {
    gap: min(0.875rem, 3.6vw);
  }

  .iht-brand__app {
    padding-left: min(0.875rem, 3.6vw);
    font-size: min(1.25rem, 5.2vw);
  }
}

/* Patient header: laid over the screen, as the old bar was; fixed from 992px up, so the quiz
   maths hold while a screen scrolls. */
.iht-header--patient {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 999;
}

@media (min-width: 992px) {
  .iht-header--patient {
    position: fixed;
  }
}

/* ---------- 4. Buttons ---------- */

.iht-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0.75rem 1.375rem;
  border: 2px solid transparent;
  border-radius: var(--iht-radius-control);
  font-family: var(--iht-text);
  font-weight: 700;
  font-size: 1.0625rem;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease,
    box-shadow 0.2s ease, transform 0.2s ease;
}

body.iht .iht-btn:hover {
  text-decoration: none;
}

/* Filled blue: go on. */
body.iht .iht-btn--primary {
  border-color: var(--iht-blue);
  background: var(--iht-blue);
  color: #fff;
}

body.iht .iht-btn--primary:hover {
  border-color: var(--iht-blue-deep);
  background: var(--iht-blue-deep);
  color: #fff;
}

/* White, on a blue band. */
body.iht .iht-btn--onblue {
  border-color: #fff;
  background: #fff;
  color: var(--iht-blue);
}

body.iht .iht-btn--onblue:hover {
  border-color: var(--iht-mist);
  background: var(--iht-mist);
  color: var(--iht-ink);
}

/* Patient actions are pills: Get Started on the start page, Submit on the gift-card page. */
body.iht .iht-btn--pill {
  border-radius: 999px;
}

/* ---------- 5. Site pages: home and team, and the footer ---------- */

/* The blue hero band (home) and title band (team). */
.iht-hero {
  --focus: #fff;
  background: var(--iht-blue);
  color: #fff;
}

.iht-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: 3rem;
  align-items: end;
  padding-top: clamp(2.5rem, 6vw, 4.5rem);
}

.iht-hero__text {
  padding-bottom: clamp(3rem, 7vw, 5.5rem);
  /* Its width sizes the title (cqi, below). */
  container-type: inline-size;
}

/* The one bold thing: Archivo, heavy, at its normal width. */
.iht-display {
  margin: 0 0 1.5rem;
  color: inherit;
  font-family: var(--iht-display);
  font-weight: 800;
  /* Capped by the width too: "Wellness" can't wrap. */
  font-size: min(clamp(2.625rem, 1.2rem + 4.6vw, 4.75rem), 14vw);
  line-height: 0.98;
  letter-spacing: -0.015em;
}

/* The hero's title is also capped by its column, so "Pro-Active" (6.37em wide) stays on one
   line and the title takes two lines, as before. Browsers without container units keep the
   size above. */
.iht-hero__text .iht-display {
  font-size: min(clamp(2.625rem, 1.2rem + 4.6vw, 4.75rem), 14vw, 100cqi / 6.4);
}

.iht-lede {
  max-width: 34rem;
  margin: 0 0 2rem;
  font-size: clamp(1.125rem, 1rem + 0.4vw, 1.3125rem);
  line-height: 1.6;
}

.iht-hero .iht-btn {
  min-height: 52px;
  padding: 0.75rem 1.75rem;
  font-size: 1.125rem;
}

/* The illustration stands on the band's lower edge. */
.iht-hero__art {
  align-self: end;
  margin: 0;
}

.iht-hero__art img {
  display: block;
  width: 100%;
}

/* Team: a compact title band, with a short intro under the title. */
.iht-hero--title .iht-wrap {
  padding-block: clamp(2.5rem, 6vw, 4.5rem);
}

.iht-hero--title .iht-display {
  margin: 0 0 1.25rem;
}

.iht-hero--title .iht-lede {
  max-width: 40rem;
  margin: 0;
}

/* Long words in headings break with a hyphen rather than push past a narrow screen. */
.iht-h2,
.iht-spec dt,
.iht-person h3 {
  overflow-wrap: break-word;
  hyphens: auto;
}

/* Section headings are IHT blue (5.0:1 on white; large text, so Mist's 4.4:1 passes too), and
   white on a blue band. */
.iht-h2 {
  margin: 0 0 1.25rem;
  color: var(--iht-blue);
  font-family: var(--iht-display);
  font-weight: 700;
  font-size: clamp(2rem, 1.4rem + 2vw, 3rem);
  line-height: 1.05;
  letter-spacing: -0.01em;
}

/* A picture beside a short text: "Not Just Rewards", and the Request a Demo block. */
.iht-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2rem, 6vw, 6rem);
  align-items: center;
  padding-block: clamp(3.5rem, 8vw, 7rem);
}

.iht-split p {
  max-width: 32rem;
  margin: 0;
  font-size: 1.1875rem;
  line-height: 1.65;
}

.iht-split__art {
  margin: 0;
}

.iht-split__art img {
  display: block;
  width: 100%;
}

/* The Request a Demo block. Its id is the target of every "Request a Demo" link. */
.iht-demo {
  scroll-margin-top: var(--iht-header-h);
}

.iht-email {
  font-weight: 700;
}

/* The home features as a striped term/description table, like the dashboard's patient table.
   Not numbered: they aren't a sequence. */
.iht-spec {
  margin: 0;
  border-radius: var(--iht-radius-band);
  overflow: hidden;
}

.iht-spec__row {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 1rem 3rem;
  padding: 1.75rem 2rem;
}

.iht-spec__row:nth-child(odd) {
  background: var(--iht-mist);
}

.iht-spec dt {
  margin: 0;
  color: var(--iht-ink);
  font-family: var(--iht-display);
  font-weight: 700;
  font-size: 1.375rem;
  line-height: 1.2;
}

.iht-spec dd {
  max-width: 36rem;
  margin: 0;
  font-size: 1.0625rem;
  line-height: 1.6;
}

/* Full-width bands, so neighbouring sections read as separate: home runs blue (the hero), Mist,
   white, Mist, white, blue (the finding), white, then the blue footer. The content sits in an
   .iht-wrap inside. */
.iht-band--mist {
  background: var(--iht-mist);
}

.iht-band--blue {
  --focus: #fff;
  background: var(--iht-blue);
  color: #fff;
}

.iht-band--blue .iht-h2 {
  color: #fff;
}

body.iht .iht-band--blue a,
body.iht .iht-band--blue a:hover {
  color: #fff;
}

/* Home: the four features, under their own heading. */
.iht-features {
  padding-block: clamp(3.5rem, 8vw, 6rem);
}

/* A section's one-line intro, under its heading. */
.iht-section-lede {
  max-width: 40rem;
  margin: -0.25rem 0 2.25rem;
  font-size: 1.1875rem;
  line-height: 1.6;
}

/* Home, "Why check in early": three sourced figures on a Mist band. The figures are large text,
   so IHT blue on Mist (4.4:1) passes; the small source links take the deeper blue (6.1:1). */
.iht-stats {
  background: var(--iht-mist);
}

.iht-stats > .iht-wrap {
  padding-block: clamp(3rem, 7vw, 5.5rem);
}

.iht-stats__list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 2rem clamp(1.5rem, 4vw, 3.5rem);
  margin: 0;
  padding: 0;
  list-style: none;
}

/* The blue line above each figure is drawn by ::before, so it can draw in (section 7). */
.iht-stat {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding-top: 1.25rem;
}

.iht-stat::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--iht-blue);
  transform-origin: left;
}

.iht-stat p {
  margin: 0;
}

.iht-stat__figure {
  color: var(--iht-blue);
  font-family: var(--iht-display);
  font-weight: 800;
  font-size: clamp(2.75rem, 2rem + 2.5vw, 3.75rem);
  line-height: 1;
  letter-spacing: -0.01em;
}

.iht-stat__text {
  font-size: 1.125rem;
  line-height: 1.5;
}

.iht-stat p.iht-stat__source {
  margin-top: auto;
  padding-top: 0.5rem;
  color: var(--iht-ink-muted);
  font-size: 0.9375rem;
}

body.iht .iht-stats a {
  color: var(--iht-blue-deep);
}

/* Home, "How it works": three numbered steps (they are a sequence) beside a drawing of the
   patient screen. */
.iht-how {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: clamp(2rem, 6vw, 6rem);
  align-items: center;
  padding-block: clamp(3.5rem, 8vw, 7rem);
}

.iht-steps {
  display: grid;
  gap: 0.5rem;
  margin: 0.5rem 0 0;
  padding: 0;
  list-style: none;
  counter-reset: iht-step;
}

/* Each step has room for a Mist highlight, lit while the phone shows that step (section 7). */
.iht-steps li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: 1.25rem;
  margin: 0 -1rem;
  padding: 0.875rem 1rem;
  border-radius: var(--iht-radius-band);
  counter-increment: iht-step;
}

.iht-steps li::before {
  content: counter(iht-step);
  grid-row: span 2;
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  background: var(--iht-blue);
  color: #fff;
  font-family: var(--iht-display);
  font-weight: 800;
  font-size: 1.25rem;
}

.iht-steps h3 {
  margin: 0.4rem 0 0.25rem;
  color: var(--iht-ink);
  font-family: var(--iht-display);
  font-weight: 700;
  font-size: 1.375rem;
  line-height: 1.2;
}

.iht-steps p {
  max-width: 34rem;
  margin: 0;
  font-size: 1.0625rem;
  line-height: 1.6;
}

/* The patient screen, drawn in HTML: a white phone with a pale frame, the patient header, one
   question and the two outlined answers, at the quizzes' proportions. */
.iht-phone-wrap {
  justify-self: center;
  width: min(100%, 17.5rem);
  margin: 0;
}

.iht-phone {
  aspect-ratio: 9 / 18;
  padding: 0.625rem;
  border: 2px solid var(--iht-rule);
  border-radius: 2.25rem;
  background: var(--iht-mist);
}

.iht-phone__screen {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  border-radius: 1.75rem;
  background: #fff;
}

.iht-phone__bar {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 1.5rem 1rem 0.75rem;
  background: var(--iht-blue);
  color: #fff;
  line-height: 1;
}

/* The top of the screen: the app's blue bar, with the Messages app's grey bar laid over it while
   the text message shows (section 7). Still, only the blue bar shows. */
.iht-phone__top {
  position: relative;
}

.iht-phone__bar.iht-phone__bar--msg {
  position: absolute;
  inset: 0;
  justify-content: center;
  background: #f1f3f6;
  color: var(--iht-ink);
  font-weight: 700;
  font-size: 0.9375rem;
  opacity: 0;
}

.iht-phone__brand {
  font-family: var(--iht-display);
  font-weight: 800;
  font-size: 1.125rem;
  letter-spacing: 0.02em;
}

.iht-phone__app {
  padding-left: 0.5rem;
  border-left: 2px solid rgba(255, 255, 255, 0.6);
  font-weight: 700;
  font-size: 0.9375rem;
}

/* Three screens in one place: the first question, the second, the thank-you. Only the first
   shows unless the loop runs (section 7); the others wait off to the right. */
.iht-phone__body {
  position: relative;
  flex: 1;
  overflow: hidden;
}

.iht-phone__step {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.25rem;
  padding: 1rem;
  text-align: center;
}

.iht-phone__step--2,
.iht-phone__step--3 {
  transform: translateX(100%);
}

/* The text message, which only the loop shows: a bubble from IHT at the top of the screen. */
.iht-phone__step--0 {
  justify-content: flex-start;
  padding-top: 1.5rem;
  transform: translateX(-100%);
}

.iht-phone__msg {
  position: relative;
  max-width: 92%;
  margin: 0;
  padding: 0.75rem 0.875rem;
  border-radius: 1.125rem 1.125rem 1.125rem 0.25rem;
  background: var(--iht-mist);
  color: var(--iht-ink);
  font-size: 1rem;
  line-height: 1.35;
  text-align: left;
}

.iht-phone__msg-from {
  display: block;
  margin-bottom: 0.25rem;
  color: var(--iht-blue-deep);
  font-weight: 700;
  font-size: 0.875rem;
}

.iht-phone__step--3 {
  gap: 0.75rem;
}

/* The thank-you's tick: white on Reward green, as on the quizzes' end screen. */
.iht-phone__check {
  position: relative;
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 50%;
  background: var(--iht-reward);
}

.iht-phone__check::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 46%;
  width: 0.95rem;
  height: 1.8rem;
  border: solid #fff;
  border-width: 0 0.35rem 0.35rem 0;
  transform: translate(-50%, -50%) rotate(45deg);
}

.iht-phone__note {
  margin: 0;
  color: var(--iht-ink);
  font-size: 1.125rem;
  line-height: 1.35;
}

.iht-phone__question {
  margin: 0;
  color: var(--iht-ink);
  font-weight: 700;
  font-size: 1.625rem;
  line-height: 1.2;
  text-wrap: balance;
}

.iht-phone__answers {
  display: flex;
  justify-content: center;
  gap: 0.75rem;
}

.iht-phone__answers span {
  position: relative;
  min-width: 4.5rem;
  padding: 0.25rem 0.75rem;
  border: 3px solid var(--iht-blue);
  border-radius: var(--iht-radius-answer);
  background: #fff;
  color: var(--iht-blue);
  font-weight: 700;
  font-size: 1.5rem;
}

/* The finger's tap: a ring that spreads from the answer and fades (section 7). */
.iht-phone__tap::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 3.25rem;
  height: 3.25rem;
  margin: -1.625rem 0 0 -1.625rem;
  border: 3px solid var(--iht-blue-deep);
  border-radius: 50%;
  opacity: 0;
  pointer-events: none;
}

.iht-phone-wrap figcaption {
  margin-top: 1rem;
  color: var(--iht-ink-muted);
  font-size: 1rem;
  text-align: center;
}

/* Pause/Play for the loop: a quiet outlined pill under the caption. */
.iht-phone__toggle {
  display: block;
  min-height: 44px;
  margin: 0.75rem auto 0;
  padding: 0.5rem 1.25rem;
  border: 2px solid var(--iht-ink-muted);
  border-radius: 999px;
  background: #fff;
  color: var(--iht-ink);
  font-family: var(--iht-text);
  font-weight: 700;
  font-size: 1rem;
  line-height: 1.2;
  cursor: pointer;
}

.iht-phone__toggle[hidden] {
  display: none;
}

@media (hover: hover) {
  .iht-phone__toggle:hover {
    border-color: var(--iht-ink);
    background: var(--iht-mist);
  }
}

/* Figures that count up keep their width while they do. */
.iht-stat__figure,
.iht-evidence__figure {
  font-variant-numeric: tabular-nums;
}

/* Home, "Rewards get people to show up": one cited finding, with its figure large beside it. */
.iht-evidence {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 1rem clamp(2rem, 5vw, 4rem);
  align-items: center;
  padding-block: clamp(3rem, 7vw, 5.5rem);
}

.iht-evidence p.iht-evidence__figure {
  max-width: none;
  margin: 0;
  color: var(--iht-blue);
  font-family: var(--iht-display);
  font-weight: 800;
  font-size: clamp(4rem, 2.5rem + 6vw, 7rem);
  line-height: 0.9;
  letter-spacing: -0.02em;
}

.iht-evidence p {
  max-width: 36rem;
  margin: 0;
  font-size: 1.1875rem;
  line-height: 1.6;
}

.iht-evidence p.iht-evidence__source {
  margin-top: 0.75rem;
  color: var(--iht-ink-muted);
  font-size: 0.9375rem;
}

/* On the blue band everything is white (5.0:1). */
.iht-band--blue .iht-evidence p.iht-evidence__figure,
.iht-band--blue .iht-evidence p.iht-evidence__source {
  color: #fff;
}

/* Gentle hover feedback, for a mouse only: the filled buttons lift on a soft shadow, and a
   feature row deepens a shade. Nothing moves on its own. */
@media (hover: hover) {
  body.iht .iht-btn--primary:hover,
  body.iht .iht-btn--onblue:hover {
    box-shadow: 0 6px 18px rgba(31, 35, 40, 0.18);
    transform: translateY(-1px);
  }

  .iht-spec__row {
    transition: background-color 0.2s ease;
  }

  .iht-spec .iht-spec__row:hover {
    background: #e3e9f4;
  }
}

/* Team: people in two columns. Circles are for people only. */
.iht-people {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  column-gap: clamp(2rem, 5vw, 4.5rem);
  padding-top: clamp(1.5rem, 4vw, 3rem);
}

/* The photo beside the text, or above it when the text would get less than 10rem: the longest
   name ("Christopher", 8.7rem) then never breaks, whatever the default font. */
.iht-person {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  align-items: flex-start;
  padding: 2rem 0;
  border-bottom: 2px solid var(--iht-mist);
}

.iht-person img {
  flex: none;
  width: 6.5rem;
  height: 6.5rem;
  border-radius: 50%;
  object-fit: cover;
}

.iht-person > div {
  flex: 1 1 10rem;
  min-width: 0;
}

.iht-person h3 {
  margin: 0.25rem 0 0.5rem;
  color: var(--iht-ink);
  font-family: var(--iht-display);
  font-weight: 700;
  font-size: 1.375rem;
  line-height: 1.2;
}

.iht-person p {
  max-width: 34rem;
  margin: 0;
  font-size: 1.0625rem;
  line-height: 1.6;
  /* Only a word too long for a phone with a large default font breaks. */
  overflow-wrap: break-word;
}

/* Footer: the company name on IHT blue, like the header. Home, team and the dashboard use it as
   it is; the start page and the gift-card page use the slim version (section 6). White on the
   blue is 5.0:1. */
.iht-footer {
  --focus: #fff;
  padding: 1.5rem 0;
  background: var(--iht-blue);
  color: #fff;
  font-size: 0.9375rem;
  line-height: 1.5;
}

.iht-footer__inner {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.5rem 2rem;
}

body.iht .iht-footer a {
  color: #fff;
}

body.iht .iht-footer a:hover {
  color: #fff;
  text-decoration-thickness: 3px;
}

/* The page blocks switch at em widths: 992px and 768px at the default font, wider with a larger
   one, so a larger font gets one column instead of narrow ones. (Media-query em follow the
   browser's default font size.) The header keeps its px breakpoint, which menu.js shares. */
@media (max-width: 61.99875em) {
  .iht-hero__grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 2rem;
  }

  .iht-hero__text {
    padding-bottom: 0;
  }

  .iht-hero__art {
    justify-self: center;
    max-width: 34rem;
  }

  .iht-split {
    grid-template-columns: minmax(0, 1fr);
  }

  /* Text first on phones; the picture follows, centred, as the hero's is. */
  .iht-split__art {
    order: 2;
    justify-self: center;
    max-width: 34rem;
  }

  .iht-people {
    grid-template-columns: minmax(0, 1fr);
  }

  /* The steps, then the phone under them. */
  .iht-how {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 47.99875em) {
  .iht-spec__row {
    grid-template-columns: minmax(0, 1fr);
    gap: 0.5rem;
    /* Capped by the width, like the term, so the longest word ("Deterministic", 7.2em) fits a
       phone with a 32px default font. */
    padding: 1.375rem min(1.25rem, 5.6vw);
  }

  .iht-spec dt {
    font-size: min(1.25rem, 11vw);
  }

  /* The figures stack, and the finding sits under its figure. */
  .iht-stats__list,
  .iht-evidence {
    grid-template-columns: minmax(0, 1fr);
  }

  /* The steps' highlight stays inside the page gutter. */
  .iht-steps li {
    margin: 0 -0.5rem;
    padding: 0.75rem 0.5rem;
  }

}

@media (max-width: 767.98px) {
  .iht-spec {
    margin-inline: calc(-1 * var(--iht-gutter) / 2);
  }

  .iht-footer__inner {
    flex-direction: column;
  }
}

/* Phones: smaller photos, capped by the width so a larger default font leaves room for
   the text. */
@media (max-width: 479.98px) {
  .iht-person {
    gap: min(1rem, 4vw);
  }

  .iht-person img {
    width: min(4.5rem, 20vw);
    height: min(4.5rem, 20vw);
  }
}

/* ---------- 6. Patient pages (the Wellness Wallet) ----------
   These pages keep what they use of Bootstrap and the template's main.css underneath
   (template.css), and each keeps its own layout maths at the end of its <style> block. This
   section is the look and the type sizes they share. Large print: no size here is below what
   the pages showed before at the default font. */

/* main.css starts with "* { font-family: Rubik; }", which stops every element inheriting its
   font, and Rubik is no longer loaded, so anything the theme doesn't name (a link, a span, a
   label) would fall back to a serif. This puts inheritance back. :where() keeps it at zero
   specificity, like main.css's rule, so it only replaces that one; any class rule, such as an
   icon font's, still wins. main.css's other font-family rules name classes, so a page that uses
   those classes overrides them itself. */
:where(body.iht--patient) * {
  font-family: inherit;
}

/* main.css also gives .btn "transition: all 0.4s", so the keyboard focus ring slid in from
   white and reached its colour and offset only after 0.4s. A button here fades only its
   colours; the answers and Go Back also fade in and out (their own rules, below). */
body.iht--patient .btn {
  transition: background-color 0.15s ease, color 0.15s ease;
}

/* The question: the reading face, heavy, in Ink. Its size comes from renderQuestion()
   (2em, or 1.8em on PHQ-9) of #questionnaire-form, whose size each page sets. */
.iht--patient #question p {
  margin: 0;
  color: var(--iht-ink);
  font-family: var(--iht-text);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.005em;
  text-wrap: balance;
}

/* PHQ-9's crisis note under question 9 is body text, not part of the question: drawn like the
   end screen's #crisisHelp. Its size, line height, padding and margins stay in the page. */
.iht--patient #question p.crisis {
  font-weight: 400;
  letter-spacing: 0;
  text-wrap: wrap;
}

.iht--patient #questionnaire-form {
  background: transparent;
}

/* The answers sit in a row with a gap, and wrap when they must. */
.iht--patient #choices {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: max(0.5em, 12px);
  margin-top: 0.5rem;
}

/* Answers are outlined: a choice, not a step. Their size is --iht-answer-size of the form's
   size (2em, as before; PHQ-9 sets 1.8em). The !important colours beat main.css's
   ".btn:hover { color: #fff !important; background-color: #466eb6 !important }"; the borders
   need none, since main.css's border there isn't !important. */
.iht--patient #choices .btn {
  flex: 0 1 auto;
  height: auto;
  min-width: min(2.75em, calc(50% - 0.5rem));
  min-height: 48px;
  margin: 0;
  padding: 0.2em 0.35em;
  border: 3px solid var(--iht-blue);
  border-radius: var(--iht-radius-answer);
  background: #fff !important;
  color: var(--iht-blue) !important;
  font-family: var(--iht-text);
  font-weight: 700;
  font-size: var(--iht-answer-size, 2em);
  line-height: 1.1;
  letter-spacing: 0;
  text-align: center;
  box-shadow: none;
  cursor: pointer;
  transition: opacity 0.5s ease-in-out, border-color 0.15s ease, background-color 0.15s ease, color 0.15s ease;
  -webkit-tap-highlight-color: transparent;
}

/* Hover never looks like a choice: the next question's answer can be under the pointer.
   With a mouse the ring only darkens; touch screens get nothing (they keep :hover after a
   tap). Only a press fills it. */
@media (hover: hover) {
  .iht--patient #choices .btn:hover {
    border-color: var(--iht-blue-deep);
  }
}

.iht--patient #choices .btn:active {
  border-color: var(--iht-blue-deep);
  background: var(--iht-blue-deep) !important;
  color: #fff !important;
}

/* Go Back: a quiet outlined pill. Its place (centred at the foot of the quiz, above the
   footer) is in each quiz's own layout block. */
.iht--patient #prevAnswer {
  height: var(--iht-back-h);
  min-width: 0;
  padding: 0 1.4em;
  border: 2px solid var(--iht-ink-muted);
  border-radius: 999px;
  background: #fff !important;
  color: var(--iht-ink) !important;
  font-family: var(--iht-text);
  font-weight: 700;
  font-size: min(1.25rem, 32px);
  line-height: 1;
  letter-spacing: 0;
  white-space: nowrap;
  box-shadow: none;
  transition: opacity 0.5s ease-in-out, background-color 0.15s ease;
}

@media (hover: hover) {
  .iht--patient #prevAnswer:hover {
    border-color: var(--iht-ink);
    background: var(--iht-mist) !important;
  }
}

/* From 768px up the end screen's text is a left-aligned column, so there Go Back lines up
   under Finish instead of sitting alone in the middle. --iht-end-col (section 1) is that
   column's width. (goToEnd() shows #end with style="display: block".) */
@media (min-width: 768px) {
  .iht--patient .testFhir:has(> #end[style*="display: block"]) #prevAnswer {
    left: calc(50% - var(--iht-end-col) / 2 + 12px);
    right: auto;
    margin: 0;
  }
}

/* Phones: the quiz's screens start at the page gutter, like the header and the other patient
   pages, instead of Bootstrap's 12px (the container's padding, less the row's negative margin,
   plus the column's padding). The end screen also takes the whole width rather than shrinking
   to fit "Remember:", which can't wrap; it's capped below instead, so in a very narrow window
   the column no longer runs off both sides. */
@media (max-width: 767.98px) {
  body.iht--patient .testFhir > .container,
  body.iht--patient #end > .container {
    padding-left: var(--iht-gutter);
    padding-right: var(--iht-gutter);
  }

  body.iht--patient .testFhir > .container > .row,
  body.iht--patient #end > .container > .row {
    margin-left: 0;
    margin-right: 0;
  }

  body.iht--patient .testFhir > .container > .row > [class*="col-"],
  body.iht--patient #end > .container > .row > [class*="col-"] {
    padding-left: 0;
    padding-right: 0;
  }

  body.iht--patient #end {
    align-self: stretch;
  }
}

/* The video screen */
.iht--patient #video h1 {
  color: var(--iht-ink);
  font-family: var(--iht-text);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0;
  text-wrap: balance;
}

.iht--patient #video1 {
  border-radius: var(--iht-radius-band);
  background: var(--iht-ink);
}

/* Moving on is a filled pill: blue to continue, green to finish. */
.iht--patient #video .btn,
.iht--patient #end .content .btn {
  position: static;
  height: auto;
  min-width: 0;
  margin: 0;
  border: 0;
  border-radius: 999px;
  color: #fff !important;
  font-family: var(--iht-text);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: 0;
  text-align: center;
  transform: none;
  cursor: pointer;
}

/* Continue: 2rem (32px), as before, but never wider than a phone. */
.iht--patient #video .btn {
  min-height: min(4rem, 72px);
  padding: 0.3em min(1.1em, 4vw);
  background: var(--iht-blue) !important;
  font-size: min(2rem, 16vw);
}

@media (hover: hover) {
  .iht--patient #video .btn:hover {
    background: var(--iht-blue-deep) !important;
  }
}

/* End screen: "Remember:" in Archivo, a check list, then Finish under it.
   Sizes are in em of #end .content: 1rem on desktop; on phones its size follows the width. */
.iht--patient #end .content {
  color: var(--iht-ink);
}

@media (max-width: 767.98px) {
  /* Capped by the width too, so a larger default font can't push "Remember:", which can't
     wrap, off the sides. */
  .iht--patient #end .content {
    font-size: min(clamp(0.6875rem, 3.2vw, 0.8125rem), max(3.2vw, 11px));
  }
}

/* "Remember:" is 5em, as on master: 80px on desktop at the default font, and more with a larger
   one. It's one word, 5.71em wide, so where 5em wouldn't fit, the room it has caps its size
   (--iht-remember-room, set below for phones and for wider windows).

   Its box is as wide as the word, up to that room and 6px more, so it never breaks at its
   proper size. Only if something makes the word wider all the same (a reader's own wider letter
   spacing, WCAG 1.4.12) does it break onto a second line, rather than run off the window's edge
   and be cut off. The second limit is that edge: the column is centred in the window, so
   50% + 50vw from the column's left side is the window's right side. */
.iht--patient #end .content h1 {
  width: max-content;
  max-width: min(calc(var(--iht-remember-room) + 6px), calc(50% + 50vw - 2px));
  margin: 0 0 0.2em;
  color: var(--iht-ink);
  font-family: var(--iht-display);
  font-weight: 800;
  font-size: 5em;
  line-height: 1;
  letter-spacing: -0.015em;
  overflow-wrap: anywhere;
}

/* Phones: 5em of the capped #end .content (62px at 390px), as on master. Below 360px that would
   be wider than the window, so there the width caps it: it may run into the right-hand gutter,
   but stops 8px short of the window's edge. */
@media (max-width: 767.98px) {
  .iht--patient #end .content h1 {
    --iht-remember-room: calc(100vw - 24px);
    font-size: min(5em, var(--iht-remember-room) / 5.72);
  }
}

/* From 768px. With a larger default font it can be wider than its column; it may then run into
   the right margin, as master's did, but it stops short of the window's edge: the room from the
   column's left edge (50vw - --iht-end-col / 2 + 0.75rem) to 1rem from the window's right edge,
   less 10px for a scrollbar. */
@media (min-width: 768px) {
  .iht--patient #end .content h1 {
    --iht-remember-room: calc(50vw + var(--iht-end-col) / 2 - 1.75rem - 10px);
    font-size: min(5em, var(--iht-remember-room) / 5.8);
  }
}

.iht--patient #end .content h2 {
  color: var(--iht-ink);
  font-family: var(--iht-text);
  letter-spacing: 0;
}

.iht--patient #end .content > h2 {
  margin: 0 0 0.3em;
  font-weight: 700;
  font-size: 3em;
  line-height: 1.15;
}

.iht--patient #end .content ul {
  margin: 0 0 1.25em;
  padding: 0;
  list-style: none;
}

/* The tips: a list, drawn as large as the headings they used to be. */
.iht--patient #end .content ul li {
  display: flex;
  align-items: flex-start;
  gap: 0.35em;
  margin: 0;
  padding: 0.1em 0;
  border-top: 2px solid var(--iht-mist);
  color: var(--iht-ink);
  font-weight: 400;
  font-size: 2.9em;
  line-height: 1.2;
  text-wrap: pretty;
}

.iht--patient #end .content ul li:last-child {
  border-bottom: 2px solid var(--iht-mist);
}

/* The check: white on Reward green, drawn in CSS. It's decoration (aria-hidden in the markup),
   and the ✔ is pushed out of sight, because a phone may draw it as a colour emoji. */
.iht--patient #end .content ul li i {
  position: relative;
  flex: none;
  display: block;
  width: 1.1em;
  height: 1.1em;
  margin: 0.05em 0 0;
  padding: 0;
  overflow: hidden;
  border-radius: 50%;
  background: var(--iht-reward);
  color: #fff;
  font-size: 1em;
  font-style: normal;
  line-height: 1;
  text-indent: 200%;
  white-space: nowrap;
}

.iht--patient #end .content ul li i::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 46%;
  width: 0.27em;
  height: 0.52em;
  border: solid #fff;
  border-width: 0 0.11em 0.11em 0;
  transform: translate(-50%, -50%) rotate(45deg);
}

/* Finish: green, done. 2em, as before; on phones, the main buttons' rule below. */
.iht--patient #end .content .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: min(3.5rem, 64px);
  padding: 0.35em 1.5em;
  background: var(--iht-reward) !important;
  font-size: 2em;
}

@media (hover: hover) {
  .iht--patient #end .content .btn:hover {
    background: var(--iht-reward-deep) !important;
  }
}

/* Phones: the patient pages' main buttons share one rule: Get Started, Continue, Finish and the
   gift-card Submit. They span the column at the page gutter, and their label
   is 2rem, as Continue's and Submit's were, capped by the width so the longest, "Get Started",
   stays inside its pill with a larger default font. */
@media (max-width: 767.98px) {
  body.iht--patient #getStarted,
  body.iht--patient #video .btn,
  body.iht--patient #end .content .btn,
  body.iht--patient .iht-btn.sub {
    width: 100%;
    font-size: min(2rem, (100vw - 2 * var(--iht-gutter)) / 7.5);
  }
}

/* PHQ-9's crisis note (question 9, and the end screen's #crisisHelp): Follow-up red, the one
   colour that means "needs follow-up". Its size and spacing stay in the PHQ-9 page. */
.iht--patient .crisis {
  border: 3px solid var(--iht-followup);
  border-left-width: 10px;
  border-radius: var(--iht-radius-band);
  background: #fff;
  color: var(--iht-ink);
  font-family: var(--iht-text);
  font-weight: 400;
  text-align: left;
}

body.iht--patient .crisis a {
  color: var(--iht-followup);
  font-weight: 700;
  text-decoration: underline;
  text-decoration-thickness: 2px;
}

/* The quiz footer (main.css fixes it to the bottom; the quizzes put it at the foot of the
   page). One line, at most 20px, so it's at most 40px tall: the quizzes keep that much room
   for it under Go Back, and a larger default font can't make it a band over the answers.
   "Incentive Health Technologies, LLC" is 15.5em wide, so it keeps 16px down to a 280px
   window and only gets smaller below that. */
.iht--patient .testFhir footer {
  padding: 0.3em min(1rem, 12px);
  border-top: 0;
  background: var(--iht-blue);
  color: #fff;
  font-family: var(--iht-text);
  font-size: min(1rem, 20px, (100vw - 24px) / 15.5);
  line-height: 1.4;
  white-space: nowrap;
}

/* The start page's and the gift-card page's footer: the site footer's blue band (section 5),
   slim, and the same size as the quizzes', so the bar doesn't change from page to page. */
.iht-footer.iht-footer--slim {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0 1.5em;
  padding: 0.3em min(1rem, 12px);
  font-size: min(1rem, 20px, (100vw - 24px) / 15.5);
  line-height: 1.4;
  text-align: center;
}

/* main.css takes the underline off every link; the credit keeps it. */
body.iht .iht-footer--slim a {
  text-decoration: underline;
}

/* The dialogs (sweetalert 1): "Resume Video?" on the quizzes, and "Oops!" and "Submitted!" on
   the gift-card page. Resume Video (the cancel button) is green, the reward; Move On and OK
   are blue. The type follows the window's height, as before, but never gets smaller than it
   was on small windows, except on a short window with a large default font: there the height
   caps it too (12vh and 8vh), so the dialog still fits. That only happens below 467px tall
   with a 32px font, or 350px with 24px. A page caps a title that can't wrap by setting
   --iht-swal-title-max. */
/* The same dimmed page and shadow as the open menu. sweetalert keeps a closed dialog in the
   page, only transparent, so Tab could reach its buttons and screen readers could read it;
   hidden, it's out of reach until it opens. It hides once its fade-out has finished. */
.iht--patient .swal-overlay {
  background-color: var(--iht-scrim);
  visibility: hidden;
  transition: opacity 0.3s, visibility 0s linear 0.3s;
}

.iht--patient .swal-overlay.swal-overlay--show-modal {
  visibility: visible;
  transition: opacity 0.3s, visibility 0s;
}

.iht--patient .swal-modal {
  border-radius: var(--iht-radius-band);
  font-family: var(--iht-text);
  box-shadow: var(--iht-shadow-dialog);
}

.iht--patient .swal-title {
  color: var(--iht-ink);
  font-family: var(--iht-text);
  font-weight: 700;
  font-size: min(max(7vh, 1.75rem), 12vh, var(--iht-swal-title-max, 100vw));
  line-height: 1.15;
}

.iht--patient .swal-text {
  color: var(--iht-ink);
  font-family: var(--iht-text);
  font-size: min(max(3vh, 1rem), 8vh);
  line-height: 1.3;
  text-align: center;
}

/* The buttons sit in a centred row, 10px apart. ("Resume Video" and "Move On" need 298px, so
   they share a row from a 360px window up.) Narrower, they stack at equal widths. */
.iht--patient .swal-footer {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  padding-left: 12px;
  padding-right: 12px;
  text-align: center;
}

.iht--patient .swal-footer .swal-button-container {
  margin: 0;
}

@media (max-width: 359.98px) {
  .iht--patient .swal-footer {
    flex-direction: column;
    align-items: stretch;
  }

  .iht--patient .swal-footer .swal-button {
    width: 100%;
  }
}

/* Capped, so with a larger default font both buttons still fit a phone's dialog. */
.iht--patient .swal-button {
  min-height: min(3.5rem, 56px);
  padding: 0 min(1.5rem, 18px);
  border-radius: 999px;
  color: #fff;
  font-family: var(--iht-text);
  font-weight: 700;
  font-size: min(1.25rem, 20px);
}

.iht--patient .swal-button:focus {
  box-shadow: none;
}

/* sweetalert's own :hover and :active colours apply everywhere, touch screens included (a tap
   leaves :hover behind), and they're pale blue and red. These keep each button in its own
   colour, a shade deeper while pressed; the deeper hover is for mice only (below). */
.iht--patient .swal-button--cancel,
.iht--patient .swal-button--cancel:not([disabled]):hover {
  background-color: var(--iht-reward);
  color: #fff;
}

.iht--patient .swal-button--danger,
.iht--patient .swal-button--confirm,
.iht--patient .swal-button--danger:not([disabled]):hover,
.iht--patient .swal-button--confirm:not([disabled]):hover {
  background-color: var(--iht-blue);
}

.iht--patient .swal-button--cancel:not([disabled]):active {
  background-color: var(--iht-reward-deep);
}

.iht--patient .swal-button--danger:not([disabled]):active,
.iht--patient .swal-button--confirm:not([disabled]):active {
  background-color: var(--iht-blue-deep);
}

@media (hover: hover) {
  .iht--patient .swal-button--cancel:not([disabled]):hover {
    background-color: var(--iht-reward-deep);
  }

  .iht--patient .swal-button--danger:not([disabled]):hover,
  .iht--patient .swal-button--confirm:not([disabled]):hover {
    background-color: var(--iht-blue-deep);
  }
}

/* A short window, such as a phone on its side: the dialog tightens its spacing and shrinks its
   icon, so all of it, buttons included, fits the window without scrolling. */
@media (max-height: 499.98px) {
  .iht--patient .swal-modal {
    margin-block: 8px;
  }

  .iht--patient .swal-icon {
    zoom: 0.6;
  }

  .iht--patient .swal-title {
    padding-top: 4px;
    padding-bottom: 4px;
  }

  .iht--patient .swal-title:first-child {
    margin-top: 12px;
  }

  .iht--patient .swal-title:not(:last-child) {
    margin-bottom: 8px;
  }

  .iht--patient .swal-footer {
    margin-top: 0;
    padding-block: 8px;
  }
}

/* ---------- 7. Motion ----------
   No fade-ins. The quiz fades between screens, the dashboard's bars grow in, and on the home
   page the phone preview plays with its step lit, the figures count up, and the lines above them
   draw in. All of it stops under reduced motion: the home page's script doesn't start any of it.
   (Hover feedback is in section 5.) */

/* The phone preview's loop, 14 seconds, with the matching step lit beside it: the text message
   arrives and is tapped (step 1), two questions are answered "No" (step 2), then the thank-you
   (step 3), then back to the start. The script adds is-animated to the section only when motion
   is allowed; is-held (off screen) and is-paused (the Pause button) freeze it. Times are in % of
   14s: 1s = 7.14%. */
.iht-how.is-animated .iht-phone__step--0 {
  animation: iht-phone-step0 14s infinite;
}

.iht-how.is-animated .iht-phone__step--1 {
  animation: iht-phone-step1 14s infinite;
}

.iht-how.is-animated .iht-phone__step--2 {
  animation: iht-phone-step2 14s infinite;
}

.iht-how.is-animated .iht-phone__step--3 {
  animation: iht-phone-step3 14s infinite;
}

.iht-how.is-animated .iht-phone__bar--msg {
  animation: iht-phone-msgbar 14s infinite;
}

.iht-how.is-animated .iht-phone__step--0 .iht-phone__tap::after {
  animation: iht-phone-ring0 14s infinite;
}

.iht-how.is-animated .iht-phone__step--1 .iht-phone__tap {
  animation: iht-phone-tap1 14s infinite;
}

.iht-how.is-animated .iht-phone__step--2 .iht-phone__tap {
  animation: iht-phone-tap2 14s infinite;
}

.iht-how.is-animated .iht-phone__step--1 .iht-phone__tap::after {
  animation: iht-phone-ring1 14s infinite;
}

.iht-how.is-animated .iht-phone__step--2 .iht-phone__tap::after {
  animation: iht-phone-ring2 14s infinite;
}

.iht-how.is-animated .iht-phone__check {
  animation: iht-phone-check 14s infinite;
}

.iht-how.is-animated .iht-steps li:nth-child(1) {
  animation: iht-step-lit1 14s infinite;
}

.iht-how.is-animated .iht-steps li:nth-child(2) {
  animation: iht-step-lit2 14s infinite;
}

.iht-how.is-animated .iht-steps li:nth-child(3) {
  animation: iht-step-lit3 14s infinite;
}

/* !important: the animation shorthands above are more specific, and would reset this. */
.iht-how.is-held *,
.iht-how.is-held *::after,
.iht-how.is-paused *,
.iht-how.is-paused *::after {
  animation-play-state: paused !important;
}

/* The text message: shown until 2.4s, slides out by 2.9s; back at 12.6-13.1s for the next loop. */
@keyframes iht-phone-step0 {
  0%, 17.14% { transform: translateX(0); opacity: 1; }
  20.71%, 90% { transform: translateX(-100%); opacity: 1; }
  90.01% { transform: translateX(0); opacity: 0; }
  93.57%, 100% { transform: translateX(0); opacity: 1; }
}

/* Question 1: in by 2.9s, out from 4.9s to 5.4s. */
@keyframes iht-phone-step1 {
  0%, 17.14% { transform: translateX(100%); }
  20.71%, 35% { transform: translateX(0); }
  38.57%, 100% { transform: translateX(-100%); }
}

/* Question 2: in by 5.4s, out from 7.4s to 7.9s. */
@keyframes iht-phone-step2 {
  0%, 35% { transform: translateX(100%); }
  38.57%, 52.86% { transform: translateX(0); }
  56.43%, 100% { transform: translateX(-100%); }
}

/* The thank-you: in by 7.9s, fades out from 12.6s to 13.1s. */
@keyframes iht-phone-step3 {
  0%, 52.86% { transform: translateX(100%); opacity: 1; }
  56.43%, 90% { transform: translateX(0); opacity: 1; }
  93.57% { transform: translateX(0); opacity: 0; }
  93.58%, 100% { transform: translateX(100%); opacity: 0; }
}

/* The Messages bar shows with the text message. */
@keyframes iht-phone-msgbar {
  0%, 17.14% { opacity: 1; }
  20.71%, 90% { opacity: 0; }
  93.57%, 100% { opacity: 1; }
}

/* The taps: the message at 1.8s, then "No" at 4.3s and 6.8s, which fills and stays filled while
   its screen leaves. */
@keyframes iht-phone-ring0 {
  0%, 12% { transform: scale(0.4); opacity: 0; }
  12.86% { transform: scale(0.6); opacity: 0.9; }
  16.5%, 100% { transform: scale(1.8); opacity: 0; }
}

@keyframes iht-phone-tap1 {
  0%, 30.6% { background: #fff; color: var(--iht-blue); }
  31.4%, 38.57% { background: var(--iht-blue); color: #fff; }
  38.6%, 100% { background: #fff; color: var(--iht-blue); }
}

@keyframes iht-phone-tap2 {
  0%, 48.5% { background: #fff; color: var(--iht-blue); }
  49.3%, 56.43% { background: var(--iht-blue); color: #fff; }
  56.5%, 100% { background: #fff; color: var(--iht-blue); }
}

@keyframes iht-phone-ring1 {
  0%, 29.9% { transform: scale(0.4); opacity: 0; }
  30.71% { transform: scale(0.6); opacity: 0.9; }
  34.3%, 100% { transform: scale(1.8); opacity: 0; }
}

@keyframes iht-phone-ring2 {
  0%, 47.8% { transform: scale(0.4); opacity: 0; }
  48.57% { transform: scale(0.6); opacity: 0.9; }
  52.1%, 100% { transform: scale(1.8); opacity: 0; }
}

/* The tick pops in as the thank-you arrives. */
@keyframes iht-phone-check {
  0%, 56.43% { transform: scale(0.4); }
  59.29%, 100% { transform: scale(1); }
}

/* The lit step: a Mist highlight, on while the phone shows that step. */
@keyframes iht-step-lit1 {
  0%, 18.93% { background-color: var(--iht-mist); }
  20.5%, 91.79% { background-color: transparent; }
  93.4%, 100% { background-color: var(--iht-mist); }
}

@keyframes iht-step-lit2 {
  0%, 18.93% { background-color: transparent; }
  20.5%, 54.64% { background-color: var(--iht-mist); }
  56.2%, 100% { background-color: transparent; }
}

@keyframes iht-step-lit3 {
  0%, 54.64% { background-color: transparent; }
  56.2%, 91.79% { background-color: var(--iht-mist); }
  93.4%, 100% { background-color: transparent; }
}

/* The lines above the figures draw in once, when the script marks the list is-drawn. Without the
   script, or with reduced motion, they're simply there. */
.iht-stats__list.is-waiting .iht-stat::before {
  transform: scaleX(0);
}

.iht-stats__list.is-drawn .iht-stat::before {
  transition: transform 0.9s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.iht-stats__list.is-drawn .iht-stat:nth-child(2)::before {
  transition-delay: 0.2s;
}

.iht-stats__list.is-drawn .iht-stat:nth-child(3)::before {
  transition-delay: 0.4s;
}

/* "Request a Demo" links to #request-a-demo; with motion allowed the page glides there. */
@media (prefers-reduced-motion: no-preference) {
  html:has(> body.iht) {
    scroll-behavior: smooth;
  }
}

@media (prefers-reduced-motion: reduce) {
  html:has(> body.iht) {
    scroll-behavior: auto;
  }

  /* A zero duration and delay start no transition at all. (Even 0.01ms would: then the menu's
     close button is still "visibility: hidden" when menu.js focuses it, and focus stays behind
     on the menu button.) */
  body.iht *,
  body.iht *::before,
  body.iht *::after {
    transition-duration: 0s !important;
    transition-delay: 0s !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
  }
}