/* Shared public-page tokens, typography and browser surfaces. The homepage presents actual study screens
   and a concise workflow; the deeper product tour and reading pages retain their own layouts.
   Graphite neutrals, ink-indigo, and green/amber/red only for acceptance outcomes. */

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

/* The public pages follow the browser's display choice: display.js reads the stored preference and theme.css's
   --lm-* tokens do the rest, as in the application and the manual. Every colour, size, space, corner, shadow and curve
   below comes from theme.css; report sheets stay white paper on both canvases. The few tokens here belong to the
   public illustrations alone. */
:root {
  color-scheme: light dark;
  /* Chart paper under the deeper product tour's closing actions. */
  --grid-minor: light-dark(rgb(22 25 31 / 4.5%), rgb(231 233 237 / 4%));
  --grid-major: light-dark(rgb(22 25 31 / 7%), rgb(231 233 237 / 6.5%));
  /* The family marks and icons: observations darkest, limits a step lighter, the fit in the accent. */
  --glyph-obs: light-dark(#2e333c, #dfe2e7);
  --glyph-limit: light-dark(#a3a9b3, #6f7680);
  --glyph-axis: light-dark(#c3c8d0, #4f545d);
  --glyph-fit: var(--lm-color-fg-accent);
}

/* Public buttons stand a little taller than the application's. */
.home-landing {
  --lm-button-height: 2.5rem;
  --lm-button-padding-x: 1.125rem;
}

html {
  scroll-behavior: smooth;
  scrollbar-color: var(--lm-color-border-rule) var(--lm-color-bg-canvas);
  -webkit-text-size-adjust: 100%;
}

::selection {
  background: var(--lm-color-selection-bg);
  color: var(--lm-color-fg-default);
}

body {
  margin: 0;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  background: var(--lm-color-bg-canvas);
  color: var(--lm-color-fg-body);
  font: var(--lm-type-body);
  caret-color: var(--lm-color-bg-accent);
}

/* The home page reads a step larger than the public reading pages that share this stylesheet. */
.home {
  font-size: 1.0625rem;
  line-height: 1.65;
}

/* Headlines and section headings in Piazzolla, the report's title face; h3 and everything smaller in Archivo. */
h1,
h2,
h3 {
  margin: 0;
  color: var(--lm-color-fg-default);
  font-family: var(--lm-font-family-display);
  font-weight: 500;
  letter-spacing: var(--lm-tracking-heading);
  line-height: var(--lm-leading-heading);
  text-wrap: balance;
}

h1 {
  font: var(--lm-type-display-1);
  letter-spacing: var(--lm-tracking-display);
}

/* Each section's heading; the home page's are larger than the public reading pages'. */
main h2 {
  font-size: clamp(var(--lm-font-size-3xl), 1.2rem + 1.5vw, 2.375rem);
}

.home h2 {
  font: var(--lm-type-display-2);
  letter-spacing: var(--lm-tracking-display);
}

h3 {
  font-family: var(--lm-font-family-ui);
  font-weight: 600;
}

p {
  text-wrap: pretty;
}

p,
ul,
ol,
dl,
dd,
figure {
  margin: 0;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

strong {
  color: var(--lm-color-fg-default);
  font-weight: 600;
}

a {
  color: var(--lm-color-fg-accent);
  text-decoration-line: underline;
  text-decoration-thickness: 1px;
  text-decoration-color: color-mix(in srgb, currentColor 35%, transparent);
  text-underline-offset: 0.24em;
  transition: color var(--lm-duration-1) var(--ease-out), text-decoration-color var(--lm-duration-1) var(--ease-out);
}

a:hover {
  color: var(--lm-color-fg-accent-hover);
  text-decoration-color: currentColor;
}

:focus-visible {
  outline: var(--lm-focus-width) solid var(--lm-color-focus-ring);
  outline-offset: var(--lm-focus-offset);
}

section[id] {
  scroll-margin-top: 4.5rem;
}

.wrap {
  width: min(74rem, 100% - 2.5rem);
  margin-inline: auto;
}

/* The skip link waits wholly above the page with no shadow, so nothing marks the top-left corner, and drops in as a
   56 px bordered control when the keyboard reaches it, covering the LabRuns lockup (as on every public page). */
.skip-link {
  position: fixed;
  left: var(--lm-space-2);
  top: 0;
  z-index: 10;
  display: inline-flex;
  align-items: center;
  min-height: 3.5rem;
  padding: 0 var(--lm-space-5);
  border: 1px solid var(--lm-color-border-strong);
  border-radius: var(--lm-radius-control);
  background: var(--lm-color-bg-surface);
  box-shadow: none;
  color: var(--lm-color-fg-default);
  font: 600 var(--lm-font-size-md) / 1 var(--lm-font-family-ui);
  text-decoration: none;
  translate: 0 calc(-100% - 2rem);
  transition: translate calc(var(--lm-duration-4) / 2) var(--ease-out);
}

.skip-link:focus {
  translate: 0 0.5rem;
  box-shadow: var(--lm-shadow-popover);
}

@media (prefers-reduced-motion: reduce) {
  .skip-link {
    transition: none;
  }
}

/* A line icon beside a fact. */
.icon {
  display: block;
  width: 1.5rem;
  height: 1.5rem;
  fill: none;
  stroke: var(--lm-color-fg-accent);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Screens are the application's own pages in the reader's theme. */
.theme-dusk {
  display: none;
}

:root[data-theme="dusk"] .theme-day {
  display: none;
}

:root[data-theme="dusk"] .theme-dusk {
  display: block;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="day"]) .theme-day {
    display: none;
  }

  :root:not([data-theme="day"]) .theme-dusk {
    display: block;
  }
}
/* ---------- Buttons ---------- */

/* One primary and one secondary button, the application's own: a crisp 3 px rectangle, weight 600, no shadow. The
   fill moves from accent to accent-hover and a press settles the button by 2 %. Public pages stand them 40 px tall. */
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--lm-space-2);
  min-height: var(--lm-button-height);
  padding: 0 var(--lm-button-padding-x);
  border: 1px solid transparent;
  border-radius: var(--lm-radius-control);
  font: var(--lm-button-weight) var(--lm-font-size-md) / 1 var(--lm-font-family-ui);
  text-decoration: none;
  white-space: nowrap;
  transition: background-color var(--lm-duration-1) var(--ease-out), border-color var(--lm-duration-1) var(--ease-out),
    color var(--lm-duration-1) var(--ease-out), transform var(--lm-duration-1) var(--ease-out);
}

.btn:active {
  transform: var(--lm-button-press);
}

.btn-small {
  min-height: var(--lm-density-control-height);
  padding: 0 var(--lm-density-control-padding-x);
  font-size: var(--lm-font-size-sm);
}

.btn-large {
  padding: 0 var(--lm-space-5);
}

.btn-primary {
  border-color: var(--lm-color-bg-accent);
  background: var(--lm-color-bg-accent);
  color: var(--lm-color-fg-on-accent);
}

.btn-primary:hover {
  border-color: var(--lm-color-bg-accent-hover);
  background: var(--lm-color-bg-accent-hover);
  color: var(--lm-color-fg-on-accent);
}

.btn-secondary {
  border-color: var(--lm-color-border-strong);
  background: transparent;
  color: var(--lm-color-fg-default);
}

.btn-secondary:hover {
  background: var(--lm-color-bg-hover);
  color: var(--lm-color-fg-default);
}

/* A quiet text action beside the primary one (Sign in). */
.btn-quiet {
  background: transparent;
  color: var(--lm-color-fg-default);
}

.btn-quiet:hover {
  background: var(--lm-color-bg-hover);
  color: var(--lm-color-fg-default);
}

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--lm-space-3);
}
/* ---------- Header ---------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 5;
  background: color-mix(in srgb, var(--lm-color-bg-canvas) 86%, transparent);
  backdrop-filter: blur(14px) saturate(1.4);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  border-bottom: 1px solid var(--lm-color-border-default);
}

/* At the top of the page the header lies flat on the canvas; its rule and shadow arrive over the first scroll. */
@supports (animation-timeline: scroll()) {
  .site-header {
    animation: header-lift linear both;
    animation-timeline: scroll(root);
    animation-range: 0 5rem;
  }

  @keyframes header-lift {
    from {
      border-bottom-color: transparent;
      box-shadow: 0 0 0 transparent;
    }

    to {
      border-bottom-color: var(--lm-color-border-default);
      box-shadow: 0 10px 30px -24px light-dark(rgb(22 25 31 / 40%), rgb(0 0 0 / 80%));
    }
  }
}

.header-inner {
  display: flex;
  align-items: center;
  gap: var(--lm-space-5);
  min-height: 4rem;
}

/* The lockup: the 32 px mark and "LabRuns" in Archivo Bold, drawn as one outlined picture (brand-lockup.svg). */
.brand {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  border-radius: var(--lm-radius-control);
}

.site-navigation {
  display: flex;
  align-items: center;
  gap: var(--lm-space-5);
  margin-left: auto;
}

.site-start[hidden] { display: none; }

.site-nav {
  display: flex;
  gap: var(--lm-space-1);
}

.site-nav a {
  position: relative;
  padding: 0.625rem 0.875rem;
  color: var(--lm-color-fg-body);
  font: 500 var(--lm-font-size-sm) / 1 var(--lm-font-family-ui);
  text-decoration: none;
  transition: color var(--lm-duration-2) var(--ease-out);
}

/* A short ink rule draws under the hovered link. */
.site-nav a::before {
  content: "";
  position: absolute;
  left: 0.875rem;
  right: 0.875rem;
  bottom: var(--lm-space-1);
  height: 1.5px;
  border-radius: 1px;
  background: var(--lm-color-bg-accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--lm-duration-3) var(--ease-out);
}

.site-nav a:hover {
  color: var(--lm-color-fg-default);
}

.site-nav a:hover::before {
  transform: scaleX(1);
}

.menu-toggle,
.site-menu-backdrop {
  display: none;
}

@media (max-width: 62rem) {
  /* With no script, the links remain available in the page. */
  .header-inner,
  .site-navigation {
    flex-wrap: wrap;
  }

  .header-inner {
    justify-content: space-between;
    gap: 0;
    padding-block: 0.625rem;
  }

  .site-navigation {
    width: 100%;
    gap: var(--lm-space-4);
    padding-block: var(--lm-space-3);
  }

  .site-nav {
    flex-wrap: wrap;
  }

  .site-header[data-menu-open] {
    background: var(--lm-color-bg-canvas);
  }

  .menu-toggle-icon {
    position: relative;
    width: 1rem;
    height: 1rem;
  }

  .menu-toggle-icon::before,
  .menu-toggle-icon::after {
    content: "";
    position: absolute;
    inset: calc(50% - 1px) 0 auto;
    height: 2px;
    border-radius: 1px;
    background: currentColor;
    transform: translateY(-3px);
    transition: transform var(--lm-duration-3) var(--ease-out);
  }

  .menu-toggle-icon::after {
    transform: translateY(3px);
  }

  [data-menu-open] .menu-toggle-icon::before {
    transform: rotate(45deg);
  }

  [data-menu-open] .menu-toggle-icon::after {
    transform: rotate(-45deg);
  }

  .site-menu-backdrop {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 4;
    background: var(--lm-color-scrim);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--lm-duration-3) var(--ease-out), visibility var(--lm-duration-3);
  }

  body:has([data-menu-open]) {
    overflow: hidden;
  }
}

/* With scripts on, the phone header is the compact Menu bar from the first frame (public-nav.js wires the button), so
   the wrapped no-script layout never paints first and then collapses over the hero. */
@media (max-width: 62rem) and (scripting: enabled) {
  :root .header-inner {
    flex-wrap: nowrap;
  }

  :root .menu-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.625rem;
    min-height: 2.75rem;
    min-width: 5.25rem;
    padding: 0 var(--lm-space-3);
    border: 1px solid var(--lm-color-border-strong);
    border-radius: var(--lm-radius-control);
    background: transparent;
    color: var(--lm-color-fg-default);
    font: var(--lm-button-weight) var(--lm-font-size-sm) / 1 var(--lm-font-family-ui);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }

  :root .site-navigation {
    position: absolute;
    inset: 100% 0 auto;
    display: block;
    width: auto;
    max-height: calc(100dvh - 4.125rem);
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: var(--lm-space-2) max(1.25rem, calc((100% - 74rem) / 2)) max(var(--lm-space-5), env(safe-area-inset-bottom));
    border-bottom: 1px solid var(--lm-color-border-default);
    border-radius: 0 0 var(--lm-radius-frame) var(--lm-radius-frame);
    background: var(--lm-color-bg-canvas);
    box-shadow: var(--lm-shadow-popover);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-0.5rem);
    transition: opacity var(--lm-duration-2) var(--ease-out), transform var(--lm-duration-3) var(--ease-out), visibility var(--lm-duration-3);
  }

  :root .site-nav {
    display: grid;
    gap: 0;
  }

  :root .site-nav a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--lm-space-4);
    min-height: 3.5rem;
    padding: var(--lm-space-3) var(--lm-space-2);
    border-bottom: 1px solid var(--lm-color-border-default);
    border-radius: 0;
    font-size: var(--lm-font-size-xl);
    line-height: 1.3;
    opacity: 0;
    transform: translateY(-0.25rem);
    transition: opacity var(--lm-duration-2) var(--ease-out), transform var(--lm-duration-3) var(--ease-out);
  }

  :root .site-nav a::before {
    display: none;
  }

  :root .site-nav a::after {
    content: "";
    width: 0.4rem;
    height: 0.4rem;
    margin-right: var(--lm-space-1);
    border-top: 1.5px solid currentColor;
    border-right: 1.5px solid currentColor;
    color: var(--lm-color-fg-muted);
    transform: rotate(45deg);
  }

  /* Signed out, Sign in is the outlined action beside the solid Start free; signed in, Start free is hidden and the
     one remaining action (Open the application) is solid. */
  :root .site-signin {
    width: 100%;
    min-height: 2.75rem;
    margin-top: var(--lm-space-5);
    border-color: var(--lm-color-border-strong);
    background: transparent;
    color: var(--lm-color-fg-default);
  }

  :root .site-signin:hover {
    background: var(--lm-color-bg-hover);
    color: var(--lm-color-fg-default);
  }

  :root .site-signin:has(+ .site-start[hidden]) {
    border-color: transparent;
    background: var(--lm-color-bg-accent);
    color: var(--lm-color-fg-on-accent);
  }

  :root .site-signin:has(+ .site-start[hidden]):hover {
    background: var(--lm-color-bg-accent-hover);
  }

  :root .site-start { width: 100%; min-height: 2.75rem; margin-top: var(--lm-space-3); }

  /* Open: after the closed state above, so it wins. */
  [data-menu-open] .site-navigation,
  [data-menu-open] .site-nav a,
  [data-menu-open] + .site-menu-backdrop {
    opacity: 1;
    visibility: visible;
    transform: none;
  }

  [data-menu-open] .site-nav a:nth-child(2) { transition-delay: 25ms; }
  [data-menu-open] .site-nav a:nth-child(3) { transition-delay: 50ms; }
  [data-menu-open] .site-nav a:nth-child(4) { transition-delay: 75ms; }
}

/* The header is the same on every public page: Sign in as a quiet text action beside Start free. */
.site-header .site-signin { padding-inline: var(--lm-space-3); }
/* Homepage: what LabRuns is in the headline, whole application windows set in a quiet indigo field, the study
   catalogue, numbered steps, feature rows and whole report sheets. Screens are never cropped to their text: a window
   shows the full 1440 × 900 application and a report shows the printed page with its paper margins. */
.home-landing {
  font-family: var(--lm-font-family-ui);
}
.home-landing .wrap { width: min(80rem, 100% - 5rem); }
.home-landing .site-header { border-bottom-color: transparent; background: var(--lm-color-bg-canvas); backdrop-filter: none; -webkit-backdrop-filter: none; animation: none; }
.home-landing .header-inner { min-height: 5rem; }
.home-landing .site-nav a { font-size: var(--lm-font-size-sm); }
.home-redesign { overflow: clip; font-size: 1.0625rem; line-height: 1.65; }
/* Public type: h1 and h2 in Piazzolla at the display tier, the whole headline in ink; h3, the lede, body, navigation
   and buttons in Archivo. */
.home-redesign :is(h1, h2) { font-family: var(--lm-font-family-display); font-weight: 500; letter-spacing: var(--lm-tracking-display); text-wrap: balance; }
.home-redesign h1 { font-size: var(--lm-font-size-display-1); line-height: var(--lm-leading-display-1); }
.home-redesign h2 { font-size: var(--lm-font-size-display-2); line-height: var(--lm-leading-display-2); }
.home-redesign h3 { font-family: var(--lm-font-family-ui); font-weight: 600; letter-spacing: var(--lm-tracking-heading); line-height: 1.25; text-wrap: balance; }
.home-redesign svg { width: 1.25rem; height: 1.25rem; flex: none; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.home-redesign a:has(> svg) { display: inline-flex; align-items: center; gap: var(--lm-space-3); }
.home-redesign a > svg { transition: transform var(--lm-duration-3) var(--ease-out); }
.home-redesign a:hover > svg { transform: translateX(3px); }

/* An application window: a browser bar above the whole 1440 × 900 screen. */
.hp-window { overflow: hidden; border-radius: var(--lm-radius-frame); background: var(--lm-color-bg-surface); box-shadow: 0 0 0 1px var(--lm-color-border-default), var(--lm-elevation-far); }
.hp-window-bar { display: flex; align-items: center; gap: var(--lm-space-4); height: 2.375rem; padding-inline: 0.875rem; border-bottom: 1px solid var(--lm-color-border-default); background: light-dark(#f3f4f7, #26282e); }
.hp-window-dots { display: flex; gap: 0.4375rem; }
.hp-window-dots i { width: 0.625rem; height: 0.625rem; border-radius: 50%; background: light-dark(#d5d8df, #454951); }
.hp-window-address { flex: 1; max-width: 22rem; margin-inline: auto; padding: 0.1875rem var(--lm-space-3); border-radius: var(--lm-radius-control); background: light-dark(#e6e8ed, #1c1e23); color: var(--lm-color-fg-muted); font-size: 0.6875rem; text-align: center; translate: -1.6rem 0; }
.hp-window :is(img, picture) { width: 100%; }
/* Display only the Day picture's box here; .theme-dusk keeps its own Day/Dusk switch from 01-base.css. */
.hp-window :is(img, picture):not(.theme-dusk) { display: block; }

/* The first screen says what LabRuns is and shows it. */
.hp-title-line { display: block; overflow: clip; padding-bottom: 0.13em; margin-bottom: -0.13em; }
.hp-title-line > span { display: inline-block; }
.hp-nowrap { white-space: nowrap; }
.hp-lede { max-width: 46rem; margin: 1.75rem auto 0; font-size: 1.1875rem; line-height: 1.65; color: var(--lm-color-fg-body); }
.hp-lede a, .hp-feature-grid p a { color: inherit; }
.hp-lede a:hover, .hp-feature-grid p a:hover { color: var(--lm-color-fg-accent); }
.hp-access { margin-top: var(--lm-space-4); color: var(--lm-color-fg-muted); font-size: var(--lm-font-size-xs); }

/* Sections share one heading layout. */
.hp-section-head { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 5rem; align-items: end; margin-bottom: 3.5rem; }
.hp-section-head h2 { max-width: 16ch; }
.hp-section-head p { max-width: 31rem; color: var(--lm-color-fg-muted); padding-bottom: 0.125rem; }

/* How it works: numbered steps beside the window for the chosen step. */
.hp-stage-tabs { position: sticky; top: var(--lm-space-9); display: flex; flex-direction: column; isolation: isolate; }
.hp-stage-tabs button { position: relative; z-index: 1; display: flex; align-items: center; gap: var(--lm-space-4); min-height: 5.25rem; padding: var(--lm-space-4) var(--lm-space-3); border: 0; border-bottom: 1px solid var(--lm-color-border-default); border-radius: 0; background: transparent; text-align: left; color: var(--lm-color-fg-muted); font-family: inherit; cursor: pointer; transition: color var(--lm-duration-3) var(--ease-out); }
.hp-stage-tabs button:hover { color: var(--lm-color-fg-default); }
.hp-stage-tabs button[aria-selected="true"] { color: var(--lm-color-fg-accent); }
.hp-step-text { display: grid; gap: 0.1875rem; }
.hp-step-title { font-size: var(--lm-font-size-base); font-weight: 500; }
.hp-tab-indicator { display: none; }
.js .hp-tab-indicator { position: absolute; z-index: 0; display: block; top: 0; left: 0; width: var(--tab-width); height: 2px; background: var(--lm-color-bg-accent); transform: translate(var(--tab-x), var(--tab-y)); transition: transform var(--lm-duration-5) var(--ease-out); }
.hp-stage-panels { min-width: 0; }
.hp-stage[hidden] { display: none; }
.hp-stage + .hp-stage { margin-top: var(--lm-space-7); }
.js .hp-stage + .hp-stage { margin-top: 0; }
.hp-stage-copy { min-height: 5.5rem; padding: var(--lm-space-1) 0 var(--lm-space-5); font-size: var(--lm-font-size-base); line-height: 1.7; }
.hp-stage-copy p { max-width: 46rem; }
.hp-feature-field { padding: clamp(var(--lm-space-4), 2.5vw, 2.25rem); border: 1px solid var(--lm-color-border-field); border-radius: var(--lm-radius-field); background: var(--lm-field); }

/* Features: two rows with their real screens, then the rest in a ruled grid. */
.hp-feature-field { padding: clamp(1.75rem, 4.5vw, var(--lm-space-8)) clamp(var(--lm-space-5), 7vw, 7rem); }
/* An eyebrow that adds information (a study's family): sentence case, quiet, 0.75rem above its heading. */
.hp-eyebrow { margin-bottom: var(--lm-space-3); color: var(--lm-color-fg-muted); font: 500 var(--lm-font-size-md) / 1.4 var(--lm-font-family-ui); letter-spacing: 0; }
.hp-feature-grid { margin-bottom: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: var(--lm-space-9); border-top: 1px solid var(--lm-color-border-rule); }
.hp-feature-grid li { padding: 1.75rem 1.75rem var(--lm-space-6) 0; border-bottom: 1px solid var(--lm-color-border-default); }
.hp-feature-grid li:not(:nth-child(4n + 1)) { padding-left: 1.75rem; border-left: 1px solid var(--lm-color-border-default); }
.hp-feature-grid h3 { font-size: 1.0625rem; font-weight: 600; }
.hp-feature-grid p { margin-top: 0.625rem; color: var(--lm-color-fg-muted); font-size: var(--lm-font-size-md); line-height: 1.65; }

/* Reports: page 1 of each as the printed sheet, with the rest of the report stacked behind. */
.hp-sheet { position: relative; display: block; isolation: isolate; }
.hp-sheet::before, .hp-sheet::after { content: ""; position: absolute; z-index: -1; inset: 0; border-radius: 0.1875rem; background: #fff; box-shadow: 0 1px 2px rgb(0 0 0 / 10%), 0 8px 18px -10px rgb(22 25 31 / 25%); }
.hp-sheet::before { transform: translate(0.75rem, 0.75rem); background: #f3f4f6; }
.hp-sheet::after { transform: translate(0.375rem, 0.375rem); background: #f9fafb; }
.hp-sheet img { display: block; width: 100%; border-radius: 0.1875rem; background: #fff; box-shadow: 0 1px 2px rgb(0 0 0 / 12%), 0 16px 32px -16px rgb(22 25 31 / 35%); }

/* A single indigo field carries the scientific proof, with direct routes into every record. */
.hp-evidence { padding-block: var(--lm-space-section); background: var(--lm-color-bg-accent-deep); color: var(--lm-color-fg-on-accent-muted); }
.hp-evidence-inner { display: grid; grid-template-columns: 1fr 1fr; gap: 7rem; align-items: start; }
.hp-evidence-intro h2 { max-width: 13ch; color: var(--lm-color-fg-on-accent); }
.hp-evidence-intro p { max-width: 29rem; margin-top: 1.75rem; }
.hp-evidence a { color: var(--lm-color-fg-on-accent); }
.hp-evidence a:hover { color: #fff; }
.hp-evidence a:focus-visible { outline-color: #fff; }
.hp-evidence-intro > a { margin-top: var(--lm-space-6); font-size: var(--lm-font-size-xs); text-decoration-color: rgb(246 247 255 / 45%); }
.hp-evidence-list > div { padding-block: var(--lm-space-5); border-bottom: 1px solid rgb(246 247 255 / 23%); }
.hp-evidence-list > div:first-child { padding-top: 0; }
.hp-evidence-list > div:last-child { border-bottom: 0; padding-bottom: 0; }
.hp-evidence-list dt { font-size: 1.0625rem; font-weight: 500; }
.hp-evidence-list dt a { display: flex; align-items: center; justify-content: space-between; width: 100%; text-decoration: none; }
.hp-evidence-list dd { max-width: 30rem; margin-top: 0.625rem; font-size: var(--lm-font-size-md); line-height: 1.7; }

.hp-closing { padding-block: calc(var(--lm-space-section) * 1.15); }
.hp-closing-inner { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--lm-space-8); }
.hp-closing p { max-width: 31rem; margin-top: 1.75rem; color: var(--lm-color-fg-muted); }
.hp-closing .actions { flex-direction: column; flex: none; padding-bottom: var(--lm-space-1); }
.home-landing .site-footer { padding-bottom: var(--lm-space-7); }
.home-landing .footer-inner { flex-wrap: nowrap; align-items: start; gap: var(--lm-space-8); padding-top: var(--lm-space-7); }
.hp-footer-brand { flex: none; display: grid; gap: var(--lm-space-4); }
.hp-footer-brand p { font-size: var(--lm-font-size-2xs); }
/* Four short columns of links under small headings: the product, the study pages, the resources and the company. */
.home-landing .site-footer nav { display: grid; grid-template-columns: repeat(4, minmax(0, auto)); gap: var(--lm-space-6) clamp(2.5rem, 5vw, 5rem); font-size: var(--lm-font-size-xs); }
.footer-columns > div { display: grid; align-content: start; gap: 0.625rem; }
.footer-columns h2 { margin: 0 0 0.375rem; color: var(--lm-color-fg-muted); font: var(--lm-type-label); letter-spacing: var(--lm-tracking-label); }

@media (max-width: 70rem) {
  .home-landing .wrap { width: calc(100% - 3rem); }
  .hp-section-head { gap: var(--lm-space-7); }
  .hp-feature-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hp-feature-grid li:not(:nth-child(4n + 1)) { padding-left: 0; border-left: 0; }
  .hp-feature-grid li:nth-child(2n) { padding-left: 1.75rem; border-left: 1px solid var(--lm-color-border-default); }
  .hp-evidence-inner { gap: var(--lm-space-8); }
}
@media (max-width: 62rem) {
  .home-landing .header-inner { min-height: 4.25rem; }
  .hp-stage-tabs { position: static; flex-direction: row; }
  .hp-stage-tabs button { flex: 1; min-width: 0; min-height: 4.5rem; justify-content: center; padding: 0.875rem var(--lm-space-2); gap: 0.625rem; }
  .hp-evidence-inner { gap: var(--lm-space-7); }
  .hp-closing-inner { gap: var(--lm-space-6); }
  .home-landing .footer-inner { flex-wrap: wrap; gap: 2.5rem; }
  .home-landing .site-footer nav { grid-template-columns: repeat(2, minmax(0, auto)); gap: var(--lm-space-6) var(--lm-space-7); }
}
@media (max-width: 44rem) {
  .home-landing .wrap { width: calc(100% - 2rem); }
  .home-landing .header-inner { min-height: 4rem; }
  .hp-title-line > span { display: inline; }
  .hp-lede { margin-top: 1.25rem; font-size: var(--lm-font-size-base); line-height: 1.7; }
  .hp-window-bar { height: 1.5rem; padding-inline: var(--lm-space-2); }
  .hp-window-dots i { width: 0.375rem; height: 0.375rem; }
  .hp-window-dots { gap: var(--lm-space-1); }
  .hp-window-address { display: none; }
  .hp-section-head { grid-template-columns: minmax(0, 1fr); gap: 1.25rem; margin-bottom: var(--lm-space-6); }
  .hp-section-head p { font-size: var(--lm-font-size-base); }
  .hp-stage-tabs button { flex-direction: column; gap: 0.375rem; padding: 0.625rem 0.125rem; min-height: 3.75rem; }
  .hp-step-title { font-size: 0.6875rem; text-align: center; }
  .hp-stage-copy { min-height: 9rem; font-size: var(--lm-font-size-md); }
  .hp-feature-field { padding: var(--lm-space-3); }
  .hp-feature-grid { grid-template-columns: minmax(0, 1fr); margin-top: var(--lm-space-8); }
  .hp-feature-grid li:nth-child(n) { padding: var(--lm-space-5) 0; border-left: 0; }
  .hp-evidence-inner { grid-template-columns: minmax(0, 1fr); gap: var(--lm-space-7); }
  .hp-evidence-intro h2 { max-width: 15ch; }
  .hp-evidence-intro p { font-size: var(--lm-font-size-base); }
  .hp-evidence-list dt { font-size: var(--lm-font-size-base); }
  .hp-evidence-list dd { font-size: var(--lm-font-size-sm); }
  .hp-closing-inner { display: block; }
  .hp-closing .actions { align-items: stretch; margin-top: var(--lm-space-6); }
  .hp-closing .btn { white-space: normal; line-height: 1.4; }
  .home-landing .footer-inner { display: block; }
  .home-landing .site-footer nav { grid-template-columns: 1fr 1fr; gap: var(--lm-space-6) var(--lm-space-5); margin-top: var(--lm-space-6); }
}
@media (prefers-reduced-motion: reduce) {
  /* Nothing travels; colour and opacity still ease (a button's hover, a link's underline). */
  .home-landing .home-redesign:not(.hm) *, .home-landing .home-redesign:not(.hm) *::before, .home-landing .home-redesign:not(.hm) *::after { animation: none; transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, opacity; }
}

/* ===== The homepage (public/home.html, .hm): Decision First =====
   The first screen puts the owner's headline beside page 1 of a real report, above the live Results window of the
   example method comparison at its own size (1440 × 900 at 1.0× from 1680 px; scaled to the column below that).
   home.js swaps the captured picture for the live window and makes specimen 00012 draggable. Then every study as a
   ruled index by family, the five steps beside the linearity windows, the features with two colleagues' windows,
   the four report sheets fanned on a tint, the evidence and the closing run chart. */
.home-landing { --hm-bench: min(1840px, 100% - 5rem); }
.hm .wrap, .home-landing :is(.site-header, .site-footer) .wrap { width: var(--hm-bench); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.hm-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 34rem); gap: var(--lm-space-6) var(--lm-space-9); align-items: end; margin-bottom: var(--lm-space-8); }
.hm-head h2 { max-width: 18ch; }
.hm-head p { color: var(--lm-color-fg-muted); }
.hm-head a, .hm-grid p a { color: inherit; }
.hm-head a:hover, .hm-grid p a:hover { color: var(--lm-color-fg-accent); }

/* --- First screen: one headline over the introduction, report and whole Results window --- */
.home-landing .site-header .wrap { width: min(110rem, var(--hm-bench)); }
.hm-hero { padding: var(--lm-space-7) 0 var(--lm-space-section); }
.hm-bench { width: min(110rem, var(--hm-bench)); margin-inline: auto; display: grid; grid-template-columns: minmax(0, 0.475fr) minmax(0, 1fr); grid-template-rows: auto auto 1fr; grid-template-areas: "headline headline" "copy window" "page window"; gap: var(--lm-space-6) var(--lm-space-8); align-items: start; }
.hm-bench > h1 { grid-area: headline; }
.hm-hero-copy { grid-area: copy; min-width: 0; }
.hm-hero h1 { font-size: clamp(2.75rem, 3vw, 3.5rem); line-height: 1.08; }
.hm-hero .hp-lede { max-width: 34rem; margin: 0; font-size: var(--lm-font-size-lg); line-height: 1.6; }
.hm-hero .actions { justify-content: flex-start; margin-top: var(--lm-space-5); }
.hm-hero .hp-access { margin: var(--lm-space-4) 0 0; }
/* The paper and window mat share a baseline; the live status has its own space below the mat. */
.hm-page { grid-area: page; align-self: end; justify-self: end; width: min(22rem, 100%); margin: 0 0 calc(1.5rem + var(--lm-space-4)); position: relative; }
.hm-page-sheet { position: relative; border-radius: var(--lm-radius-control); background: #fff; box-shadow: var(--lm-elevation-paper), 0 28px 48px -24px rgb(22 25 31 / 40%); }
.hm-page-sheet img { display: block; width: 100%; height: auto; }
.hm-page-sheet iframe { position: absolute; top: 0; left: 0; width: 816px; height: 1056px; border: 0; background: #fff; transform-origin: 0 0; opacity: 0; transition: opacity var(--lm-duration-3) var(--ease-out); pointer-events: none; }
.hm-page-sheet iframe.is-shown { opacity: 1; }
.hm-window { grid-area: window; margin: 0; position: relative; min-width: 0; }
.hm-window-stage { padding: var(--lm-space-5); border-radius: var(--lm-radius-field); background: var(--lm-field); }
.hm-window .hp-window { width: 100%; box-shadow: 0 0 0 1px var(--lm-color-border-default), var(--lm-elevation-far); }
.hm-viewport { position: relative; aspect-ratio: 1440 / 900; overflow: hidden; background: var(--lm-color-bg-canvas); }
.hm-viewport > :is(img, picture), .hm-viewport > picture img { display: block; width: 100%; height: 100%; }
.hm-viewport iframe { position: absolute; top: 0; left: 0; width: 1440px; height: 900px; border: 0; transform-origin: 0 0; opacity: 0; transition: opacity var(--lm-duration-3) var(--ease-out); color-scheme: normal; }
.hm-viewport iframe.is-shown { opacity: 1; }
.hm-hint { position: absolute; z-index: 3; display: flex; align-items: center; gap: var(--lm-space-2); margin: 0; padding: var(--lm-space-1) var(--lm-space-3); border-radius: var(--lm-radius-control); background: var(--lm-color-bg-accent); color: var(--lm-color-fg-on-accent); font: 500 var(--lm-font-size-xs) / 1.4 var(--lm-font-family-ui); white-space: nowrap; pointer-events: none; translate: -50% 0.875rem; transition: opacity var(--lm-duration-3) var(--ease-out); }
.hm-hint::after { content: ""; position: absolute; left: 50%; top: -0.3125rem; width: 0.625rem; height: 0.625rem; background: inherit; translate: -50% 0; rotate: 45deg; }
.hm-hint.is-gone { opacity: 0; }
.hm-hint[hidden] { display: none; }
.hm-status { min-height: 1.5rem; margin: var(--lm-space-4) 0 0; color: var(--lm-color-fg-muted); font-size: var(--lm-font-size-md); }
.hm-status.is-refused { color: var(--lm-color-fg-default); }
.hp-window-who { flex: none; color: var(--lm-color-fg-muted); font-size: 0.6875rem; }
/* --- Every study, a ruled index by family ---
   Two shelves of ruled rows, like the contents of a methods binder: each family under a strong rule, each study one
   row with its name and what it calculates. The left shelf holds the families most laboratories open first, and its
   four headline studies carry a small picture of their Results window in the shelf's margin, beside their row. On a
   phone each family folds to its name and count (home/studies.js), so the whole index fits about one screen. */
.hm-studies { --hm-plate: 10.5rem; padding-block: var(--lm-space-8); border-top: 1px solid var(--lm-color-border-default); }
.hm-studies .hm-head { margin-bottom: var(--lm-space-7); }
.hm-studies .hm-head h2 { max-width: none; }
.hm-index { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 0 var(--lm-space-8); align-items: start; }
.hm-shelf { display: grid; gap: var(--lm-space-5); }
.hm-family { border-top: 1px solid var(--lm-color-border-strong); }
.hm-family h3 { padding: var(--lm-space-3) 0 var(--lm-space-2); font: 500 var(--lm-font-size-xl) / 1.3 var(--lm-font-family-display); letter-spacing: var(--lm-tracking-heading); }
.hm-family-toggle { display: none; }
.hm-family ul { margin: 0; padding: 0; list-style: none; }
.hm-family li { position: relative; }
.hm-family a { display: grid; grid-template-columns: 12.5rem minmax(0, 1fr); gap: 0 var(--lm-space-5); align-items: baseline; padding-block: var(--lm-space-2); border-top: 1px solid var(--lm-color-border-default); color: var(--lm-color-fg-muted); text-decoration: none; }
.hm-family strong { color: var(--lm-color-fg-default); font-size: var(--lm-font-size-md); font-weight: 600; line-height: 1.45; transition: color var(--lm-duration-2) var(--ease-out); }
.hm-family a > span { font-size: var(--lm-font-size-sm); line-height: 1.5; }
.hm-family a:hover strong { color: var(--lm-color-fg-accent); text-decoration: underline; text-underline-offset: 0.2em; }
.hm-shelf:last-child .hm-family a { grid-template-columns: 16rem minmax(0, 1fr); }
/* The headline studies' pictures: the whole Results window, in the shelf's right margin at the top of its row. */
.hm-shelf:first-child .hm-family a { margin-right: calc(var(--hm-plate) + var(--lm-space-5)); }
.hm-plate { position: absolute; top: var(--lm-space-2); right: 0; width: var(--hm-plate); aspect-ratio: 1440 / 900; overflow: hidden; border-radius: var(--lm-radius-xs); background: var(--lm-color-bg-surface); box-shadow: 0 0 0 1px var(--lm-color-border-default), var(--lm-elevation-near); transition: box-shadow var(--lm-duration-2) var(--ease-out); }
.hm-plate img { width: 100%; height: 100%; }
.hm-plate img:not(.theme-dusk) { display: block; }
.hm-family a:hover .hm-plate { box-shadow: 0 0 0 2px var(--lm-color-bg-accent), var(--lm-elevation-near); }
/* A family whose first study carries a picture keeps room for the whole picture. */
.hm-family ul:has(> li:first-child .hm-plate) { min-height: calc(var(--hm-plate) * 0.625 + var(--lm-space-4)); }
.hm-more { margin-top: var(--lm-space-6); }
.hm-more a { font-size: var(--lm-font-size-md); text-decoration: none; }

/* --- Five steps beside the linearity windows --- */
.hm-workflow { padding-block: var(--lm-space-section); background: var(--lm-color-bg-sunken); }
.hm-steps { width: var(--hm-bench); margin-inline: auto; display: grid; gap: var(--lm-space-6); }
.hm-rail { position: relative; top: auto; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); isolation: isolate; border-bottom: 1px solid var(--lm-color-border-rule); }
.hm-rail button { position: relative; display: flex; align-items: flex-start; gap: var(--lm-space-3); min-height: 4.5rem; padding: var(--lm-space-4) var(--lm-space-3) var(--lm-space-4) 0; border: 0; background: transparent; color: var(--lm-color-fg-muted); text-align: left; font-family: inherit; cursor: pointer; transition: color var(--lm-duration-2) var(--ease-out); }
.hm-rail button:hover { color: var(--lm-color-fg-default); }
.hm-rail button[aria-selected="true"] { color: var(--lm-color-fg-default); }
.hm-step-number { flex: none; min-width: 1.5rem; color: var(--lm-color-fg-muted); font: 500 1.375rem / 1 var(--lm-font-family-display); font-variant-numeric: tabular-nums; }
.hm-rail button[aria-selected="true"] .hm-step-number { color: var(--lm-color-fg-accent); }
.hm-rail .hp-step-title { font-size: var(--lm-font-size-base); font-weight: 600; }
.hm-rail .hp-tab-indicator { position: absolute; z-index: 1; display: none; left: 0; bottom: -1px; width: 1px; height: 2px; background: var(--lm-color-bg-accent); transform-origin: 0 0; }
.js .hm-rail .hp-tab-indicator { display: block; }
.hm-panels { min-width: 0; }
.hm-stage { display: grid; gap: var(--lm-space-5); }
.hm-stage[hidden] { display: none; }
.hm-stage .hp-stage-copy { min-height: 0; padding: 0; }
.hm-stage .hp-stage-copy p { max-width: 50rem; font-size: 1.0625rem; }
.hm-stage-window .hp-window { max-width: 1440px; }
.js .hm-stage + .hm-stage, .hm-stage + .hm-stage { margin-top: 0; }
:root:not(.js) .hm-stage + .hm-stage { margin-top: var(--lm-space-8); }
@media (min-width: 115rem) {
  .hm-steps { grid-template-columns: minmax(0, 1fr) 1440px; align-items: start; gap: var(--lm-space-6); }
  .hm-rail { position: sticky; top: 6.5rem; grid-template-columns: minmax(0, 1fr); border-bottom: 0; border-left: 1px solid var(--lm-color-border-rule); }
  .hm-rail button { min-height: 5.5rem; padding: var(--lm-space-4) var(--lm-space-4) var(--lm-space-4) var(--lm-space-5); border-bottom: 1px solid var(--lm-color-border-default); }
  .hm-rail .hp-tab-indicator { left: -1px; bottom: auto; top: 0; width: 2px; height: 1px; }
  .hm-stage { grid-template-rows: auto auto; }
}

/* --- Features: two colleagues in one study, the Studies window, the rest in a ruled grid --- */
.hm-features { padding-block: var(--lm-space-section); }
.hm-together { display: grid; grid-template-columns: minmax(0, 22rem) minmax(0, 1fr); gap: var(--lm-space-8); align-items: center; }
.hm-feature-copy h3 { font: 500 var(--lm-font-size-3xl) / 1.2 var(--lm-font-family-display); letter-spacing: var(--lm-tracking-heading); }
.hm-feature-copy p { margin-top: var(--lm-space-4); color: var(--lm-color-fg-muted); font-size: var(--lm-font-size-base); line-height: 1.7; }
.hm-feature-copy > a { margin-top: var(--lm-space-5); font-size: var(--lm-font-size-md); text-decoration: none; }
.hm-feature-copy > a svg { width: 1rem; height: 1rem; }
.hm-switch { display: inline-flex; margin-top: var(--lm-space-5); padding: 3px; border: 1px solid var(--lm-color-border-default); border-radius: var(--lm-radius-control); background: var(--lm-color-bg-sunken); }
.hm-switch button { min-height: 2.25rem; padding: 0 var(--lm-space-4); border: 0; border-radius: var(--lm-radius-xs); background: transparent; color: var(--lm-color-fg-muted); font: 500 var(--lm-font-size-sm) / 1 var(--lm-font-family-ui); cursor: pointer; transition: background-color var(--lm-duration-2) var(--ease-out), color var(--lm-duration-2) var(--ease-out); }
.hm-switch button[aria-pressed="true"] { background: var(--lm-color-bg-surface); color: var(--lm-color-fg-default); box-shadow: var(--lm-elevation-near); }
:root:not(.js) .hm-switch { display: none; }
.hm-pair { position: relative; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-template-rows: auto; padding-block: var(--lm-space-6) 0; }
.hm-pair-window { margin: 0; min-width: 0; }
.hm-pair-window:first-child { grid-column: 1 / span 8; grid-row: 1; margin-top: 20%; z-index: 2; }
.hm-pair-window:last-child { grid-column: 5 / span 8; grid-row: 1; z-index: 1; }
.hm-pair.is-saved .hm-pair-window:last-child { z-index: 3; }
.hm-pair-window .hp-window { box-shadow: 0 0 0 1px var(--lm-color-border-default), var(--lm-elevation-far), 0 40px 80px -40px rgb(22 25 31 / 45%); }
[data-moment-shows][hidden] { display: none; }
:root:not(.js) [data-moment-shows][hidden] { display: block; margin-top: var(--lm-space-5); }
.hm-feature-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 22rem); gap: var(--lm-space-8); align-items: center; margin-top: var(--lm-space-9); }
.hm-feature-row .hm-feature-copy { order: 2; }
.hm-feature-window { min-width: 0; }
.hm-grid { margin-top: var(--lm-space-9); }

/* --- Reports: the lead sheet with three fanned behind it on a tint --- */
.hm-reports { padding-block: var(--lm-space-section); background: var(--lm-color-bg-accent-wash); overflow: clip; }
.hm-reports-grid { display: grid; grid-template-columns: minmax(0, 26rem) minmax(0, 1fr); gap: var(--lm-space-8); align-items: center; }
.hm-reports-copy p { margin-top: var(--lm-space-5); color: var(--lm-color-fg-body); }
.hm-report-list { margin: var(--lm-space-7) 0 0; padding: 0; list-style: none; border-top: 1px solid var(--lm-color-border-rule); }
.hm-report-list li { display: flex; align-items: center; justify-content: space-between; gap: var(--lm-space-4); border-bottom: 1px solid var(--lm-color-border-rule); }
.hm-report-list button { flex: 1; min-height: 3.25rem; padding: 0; border: 0; background: transparent; color: var(--lm-color-fg-body); text-align: left; font: 500 var(--lm-font-size-base) / 1.3 var(--lm-font-family-ui); cursor: pointer; transition: color var(--lm-duration-2) var(--ease-out); }
.hm-report-list button:hover, .hm-report-list button[aria-pressed="true"] { color: var(--lm-color-fg-accent); }
:root:not(.js) .hm-report-list button { cursor: default; color: var(--lm-color-fg-default); }
.hm-report-list a { flex: none; font-size: var(--lm-font-size-sm); text-decoration: none; }
.hm-report-list a svg { width: 1rem; height: 1rem; }
.hm-fan { position: relative; display: grid; justify-items: start; min-height: 0; padding-block: var(--lm-space-6); padding-inline-start: max(0px, calc((100% - 46rem) / 2)); }
.hm-fan .hm-sheet { grid-area: 1 / 1; width: min(560px, 100%); margin: 0; transform: translate(calc(var(--slot, 0) * 3.5rem), calc(var(--slot, 0) * -0.75rem)) rotate(calc(var(--slot, 0) * 2.5deg)); transition: transform var(--lm-duration-4) var(--ease-in-out); z-index: calc(10 - var(--slot, 0)); }
.hm-fan .hm-sheet:not([data-front]) .hp-sheet img { filter: none; }
.hm-fan .hp-sheet::before, .hm-fan .hp-sheet::after { display: none; }
.hm-fan .hp-sheet img { box-shadow: var(--lm-elevation-paper), 0 30px 60px -30px rgb(22 25 31 / 40%); }
.hm-fan .hm-sheet:not([data-front]) .hp-sheet-ring { display: none; }

/* --- Closing: the seated Lab watching a run chart the width of the page --- */
.hm-closing { padding-block: var(--lm-space-section) 0; overflow: clip; }
.hm-closing-inner { display: grid; gap: var(--lm-space-7); }
.hm-closing-copy { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--lm-space-5) var(--lm-space-8); align-items: end; }
.hm-closing-copy h2 { grid-column: 1; }
.hm-closing-copy p { grid-column: 1; max-width: 34rem; color: var(--lm-color-fg-muted); }
.hm-closing-copy .actions { grid-column: 2; grid-row: 1 / span 2; align-self: end; }
.hm-watch.hp-watch { margin-top: 0; }
.hm-watch .hp-watch-lab { width: 100%; height: clamp(13rem, 16vw, 19rem); aspect-ratio: auto; margin: 0; }
.hm-watch .hm-past-line { stroke: light-dark(#a3a9b3, #5c626c); }
.hm-watch .hm-past-dot { fill: light-dark(#a3a9b3, #5c626c); stroke: var(--lm-color-bg-canvas); }

/* --- Full size, on phones --- */
.hm [data-zoomable] { cursor: zoom-in; }
.hm [data-zoomable]:focus-visible { outline: 2px solid var(--lm-color-border-focus, var(--lm-color-bg-accent)); outline-offset: 3px; }
.hm-viewer { width: 100vw; max-width: none; height: 100dvh; max-height: none; margin: 0; padding: 0; border: 0; background: var(--lm-color-bg-canvas); color: var(--lm-color-fg-body); }
.hm-viewer::backdrop { background: rgb(12 14 18 / 60%); }
.hm-viewer[open] { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); animation: hm-fade var(--lm-duration-3) var(--ease-out); }
.hm-viewer-bar { display: flex; align-items: center; justify-content: space-between; gap: var(--lm-space-4); padding: var(--lm-space-3) var(--lm-space-4); border-bottom: 1px solid var(--lm-color-border-default); }
.hm-viewer-title { overflow: hidden; color: var(--lm-color-fg-default); font-size: var(--lm-font-size-sm); font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
.hm-viewer-body { overflow: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; background: var(--lm-color-bg-sunken); }
.hm-viewer-body img { display: block; max-width: none; }
.hm-viewer-body .is-window { width: 1440px; height: auto; }
.hm-viewer-body .is-sheet { width: 816px; height: auto; margin: var(--lm-space-4); background: #fff; box-shadow: var(--lm-elevation-paper); }
@keyframes hm-fade { from { opacity: 0; } }

@media (max-width: 105rem) {
  .hm-index .hm-shelf .hm-family a { grid-template-columns: minmax(0, 1fr); gap: 0.125rem; }
}
@media (max-width: 70rem) {
  .home-landing { --hm-bench: calc(100% - 3rem); }
  .hm-head { grid-template-columns: minmax(0, 1fr); gap: var(--lm-space-4); margin-bottom: var(--lm-space-7); }
  .hm-together, .hm-feature-row, .hm-reports-grid { grid-template-columns: minmax(0, 1fr); gap: var(--lm-space-7); }
  .hm-feature-row .hm-feature-copy { order: 0; }
}
@media (max-width: 62rem) {
  .hm-bench { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto; grid-template-areas: "headline" "copy" "window" "page"; gap: var(--lm-space-6); }
  .hm-window-stage { padding: var(--lm-space-3); }
  .hm-page { width: min(18rem, 70%); margin: 0 auto; }
  .hm-index { grid-template-columns: minmax(0, 1fr); }
  .hm-index .hm-shelf + .hm-shelf { margin-top: var(--lm-space-5); }
  .hm-index .hm-shelf .hm-family a { grid-template-columns: 13rem minmax(0, 1fr); gap: 0 var(--lm-space-5); }
  .hm-closing-copy { grid-template-columns: minmax(0, 1fr); }
  .hm-closing-copy .actions { grid-column: 1; grid-row: auto; }
}
@media (max-width: 44rem) {
  .home-landing { --hm-bench: calc(100% - 2rem); }
  .hm-hero { padding-top: var(--lm-space-6); }
  .hm-hero h1 { font-size: 2.375rem; line-height: 1.08; }
  .hm-hero .hp-lede { font-size: var(--lm-font-size-base); }
  .hm-hero .actions { flex-direction: column; align-items: stretch; }
  .hm-hero .btn { width: 100%; }
  /* The index folds: each family is its name and count, and opens its studies on a tap. */
  .hm-studies { padding-block: var(--lm-space-7); }
  .hm-studies .hm-head { margin-bottom: var(--lm-space-5); }
  .hm-index .hm-shelf, .hm-index .hm-shelf + .hm-shelf { gap: 0; margin-top: 0; }
  .hm-index .hm-shelf .hm-family a { grid-template-columns: minmax(0, 1fr); gap: 0.125rem; margin-right: 0; padding-block: var(--lm-space-3); }
  .hm-plate { display: none; }
  .hm-family ul:has(> li:first-child .hm-plate) { min-height: 0; }
  .hm-index[data-folds] .hm-family { border-top-color: var(--lm-color-border-default); }
  .hm-index[data-folds] .hm-shelf:first-child .hm-family:first-child { border-top-color: var(--lm-color-border-strong); }
  .hm-index[data-folds] .hm-shelf:last-child .hm-family:last-child { border-bottom: 1px solid var(--lm-color-border-default); }
  .hm-index[data-folds] .hm-family h3 { padding: 0; }
  .hm-index[data-folds] .hm-family-name { display: none; }
  .hm-index[data-folds] .hm-family-toggle:not([hidden]) { display: flex; align-items: baseline; gap: var(--lm-space-3); width: 100%; padding: var(--lm-space-3) 0; border: 0; background: transparent; color: var(--lm-color-fg-default); font: inherit; text-align: left; cursor: pointer; }
  .hm-family-count { margin-left: auto; color: var(--lm-color-fg-muted); font: 400 var(--lm-font-size-sm) / 1.4 var(--lm-font-family-ui); font-variant-numeric: tabular-nums; }
  .hm-family-toggle::after { content: ""; flex: none; width: 0.4375rem; height: 0.4375rem; margin: 0 0.25rem 0.25rem 0; border: solid var(--lm-color-fg-muted); border-width: 0 1.5px 1.5px 0; align-self: center; rotate: 45deg; transition: rotate var(--lm-duration-2) var(--ease-out); }
  .hm-family-toggle[aria-expanded="true"]::after { rotate: 225deg; margin-bottom: -0.25rem; }
  .hm-index[data-folds] .hm-family:has(.hm-family-toggle[aria-expanded="false"]) ul { display: none; }
  .hm-index[data-folds] .hm-family ul { padding-bottom: var(--lm-space-2); }
  .hm-rail { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .hm-rail button { flex-direction: column; gap: var(--lm-space-1); min-height: 3.75rem; padding: var(--lm-space-3) var(--lm-space-1); }
  .hm-rail .hp-step-title { font-size: 0.6875rem; font-weight: 500; }
  .hm-stage .hp-stage-copy p { font-size: var(--lm-font-size-md); }
  .hm-pair { padding-top: 0; }
  .hm-fan .hm-sheet { width: 82%; transform: translate(calc(var(--slot, 0) * 1.25rem), calc(var(--slot, 0) * -0.375rem)) rotate(calc(var(--slot, 0) * 2deg)); }
  .hm-watch .hp-watch-lab { height: 9rem; }
}
/* ---------- Footer ---------- */

.site-footer {
  padding: 0 0 2.5rem;
  color: var(--lm-color-fg-muted);
  font-size: var(--lm-font-size-sm);
}

.footer-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--lm-space-4);
  padding-top: var(--lm-space-6);
  border-top: 1px solid var(--lm-color-border-default);
}

.site-footer nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--lm-space-2) var(--lm-space-5);
}

.site-footer a {
  color: var(--lm-color-fg-muted);
  text-decoration-color: transparent;
}

.site-footer a:hover {
  color: var(--lm-color-fg-default);
  text-decoration-color: currentColor;
}
/* ---------- Narrower screens ---------- */

@media (max-width: 44rem) {
  .actions .btn {
    flex: 1 1 100%;
  }
}

/* ---------- Reduced motion: everything is already in place; only colour and opacity changes remain ---------- */

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .site-header {
    animation: none;
  }

  .btn,
  .site-nav a::before,
  .menu-toggle-icon::before,
  .menu-toggle-icon::after,
  :root .site-navigation,
  :root .site-nav a,
  .site-menu-backdrop {
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, opacity;
  }

  .btn:active {
    transform: none;
  }

  [data-menu-open] .site-nav a {
    transition-delay: 0s;
  }
}
/* Homepage motion (home/motion.js): the signed report sheets rise one by one with the page's scroll and an indigo ring
   draws round each outcome; in the closing section the seated Lab watches its QC run come in, once. With reduced
   motion the sheets rest in place with their rings drawn, and the Lab sits as drawn beside its finished chart. */
/* ----- The report sheets ----- */

.hp-sheet-ring rect {
  fill: none;
  stroke: var(--lm-color-bg-accent);
  stroke-width: 2;
  stroke-dasharray: 1;
  stroke-dashoffset: 0;
  vector-effect: non-scaling-stroke;
}

@media (prefers-reduced-motion: no-preference) {
  .js .hp-sheet:not(.is-ringed) .hp-sheet-ring rect {
    stroke-dashoffset: 1;
  }

  .js .hp-sheet-ring rect {
    transition: stroke-dashoffset var(--lm-duration-5) var(--ease-out) var(--ring-delay, 0ms);
  }

  /* Each sheet has its own view timeline; the later ones start a little later, so on a wide screen they come up
     left to right as the section rises. */
  @supports (animation-timeline: view()) {
    .hp-sheet {
      animation: hp-sheet-out linear both;
      animation-timing-function: var(--ease-out);
      animation-timeline: --hp-sheet;
      animation-range: entry 0% cover 18%;
    }
  }
}

@keyframes hp-sheet-out {
  from {
    translate: 0 6rem;
    rotate: var(--sheet-turn, -2.5deg);
  }

  to {
    translate: 0 0;
    rotate: 0deg;
  }
}

/* ----- The Lab watching its run in the closing section ----- */

/* The drawing (home/watch-lab.svg, 520 × 256 units) sits at the right under the closing actions, in a seat that keeps
   its space before the drawing loads. */
.hp-watch {
  margin-top: var(--lm-space-7);
}

.hp-watch-lab {
  width: min(100%, 26rem);
  aspect-ratio: 520 / 256;
  margin-left: auto;
}

/* Without the script there is no drawing, so the space is not kept. */
:root:not(.js) .hp-watch {
  display: none;
}

.home-redesign .hp-watch svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
  fill: #000;
  stroke: none;
  stroke-width: 1;
}

/* The Lab and its chart are drawn once, in their Day colours. Dusk turns the coat pale and the contour into a cut the
   colour of the canvas, as labruns-marketing/brand/mascot/watch/watch-dusk.svg does, and lightens the chart. */
.hp-watch [data-bone="dog"] [stroke="#16191f"] { stroke: light-dark(#16191f, #1c1e23); }
.hp-watch [data-bone="dog"] [fill="#16191f"] { fill: light-dark(#16191f, #1c1e23); }
.hp-watch [data-bone="dog"] [fill="#ffffff"] { fill: light-dark(#ffffff, #f1f2f6); }
.hp-watch [data-bone="dog"] [fill="#e6e8ee"] { fill: light-dark(#e6e8ee, #c9cdd4); }
.hp-watch [data-bone="dog"] [fill="#3d47b8"] { fill: light-dark(#3d47b8, #525dcc); }
.hp-watch svg > [stroke="#dfe2e8"] { stroke: var(--lm-color-border-default); }
.hp-watch [data-bone="chart"] [stroke="#555c68"] { stroke: var(--lm-color-fg-muted); }
.hp-watch [data-bone="chart"] [stroke="#c9cdd4"] { stroke: light-dark(#c9cdd4, #4a4f59); }
.hp-watch [data-bone="chart"] [stroke="#3d47b8"] { stroke: light-dark(#3d47b8, #a9b1f2); }
.hp-watch [data-bone="chart"] [fill="#3d47b8"] { fill: light-dark(#3d47b8, #a9b1f2); }
.hp-watch [data-bone="chart"] [stroke="#f5f6f8"] { stroke: var(--lm-color-bg-canvas); }

@media (max-width: 44rem) {
  .hp-watch {
    margin-top: 2.5rem;
  }
}

/* ----- The homepage's opening (.hm): one sequence, drawn from the first paint ----- */
/* The headline lines rise out of their clip, then the lede, the actions and page 1 settle. Each animation holds its
   first frame before it starts (fill both), so nothing is drawn and then taken away. With reduced motion everything
   fades in place. */
@media (prefers-reduced-motion: no-preference) {
  .hm-hero .hp-title-line > span { animation: hm-rise var(--lm-duration-5) var(--ease-out) both; }
  .hm-hero .hp-title-line + .hp-title-line > span { animation-delay: 80ms; }
  .hm-hero .hp-lede { animation: hm-lift var(--lm-duration-4) var(--ease-out) 160ms both; }
  .hm-hero .actions { animation: hm-lift var(--lm-duration-4) var(--ease-out) 220ms both; }
  .hm-hero .hp-access { animation: hm-lift var(--lm-duration-4) var(--ease-out) 260ms both; }
  .hm-page-sheet { animation: hm-sheet var(--lm-duration-5) var(--ease-out) 200ms both; }
}
@media (prefers-reduced-motion: reduce) {
  .hm-hero :is(.hp-title-line > span, .hp-lede, .actions, .hp-access), .hm-page-sheet { animation: hm-soften var(--lm-duration-3) var(--ease-out) both; }
  .hm .hm-fan .hm-sheet, .hm .hm-rail .hp-tab-indicator { transition: none; }
}
@keyframes hm-rise { from { transform: translateY(105%); } }
@keyframes hm-lift { from { opacity: 0.4; translate: 0 0.75rem; } }
@keyframes hm-soften { from { opacity: 0.4; } }
@keyframes hm-sheet { from { opacity: 0; translate: 0 1.5rem; rotate: 3deg; } }
@media (max-width: 44rem) {
  .hm-hero .hp-title-line { display: inline; overflow: visible; }
  .hm-hero .hp-title-line > span { display: inline; animation-name: hm-soften; }
}

/* ----- The report fan: the sheets open out as the section rises, then the front page's outcome is ringed -----
   The fan opens while the front sheet's top travels from three quarters of the way down the window to just below the
   middle, where the reader is looking, and moves at the pace of the scroll. The cover range starts when the fan's top
   meets the window's bottom edge; the sheets sit 2rem inside the fan and start 4rem lower. The ring follows once the
   whole front page is in view (home/motion.js). */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .hm-fan { view-timeline: --hm-fan block; }
    .hm-fan .hm-sheet { animation: hm-fan-open linear both; animation-timeline: --hm-fan; animation-range: cover calc(25vh + 6rem) cover calc(55vh + 2rem); }
  }
  .js .hm-fan .hp-sheet:not(.is-ringed) .hp-sheet-ring rect { stroke-dashoffset: 1; }
  .js .hm-fan .hp-sheet-ring rect { transition: stroke-dashoffset var(--lm-duration-5) var(--ease-out) var(--ring-delay, 0ms); }
}
@keyframes hm-fan-open { from { translate: calc(var(--slot, 0) * -3.5rem) calc(4rem + var(--slot, 0) * 0.75rem); rotate: calc(var(--slot, 0) * -2.5deg); } }
.hm-fan .hp-sheet-ring { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; overflow: visible; pointer-events: none; }