/* =========================================================
   hlssoftware.com — design tokens
   Slate-and-charcoal panels with a warm orange accent: a floating
   glass pill for the nav, large rounded panels, a lit grey-blue
   "stage" behind screenshots, big light headlines and plenty of
   space between sections instead of rules.
   ========================================================= */

@font-face {
  font-family: "Manrope";
  src: url("../fonts/manrope-variable.woff2") format("woff2");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}

:root {
  /* colour: Mist, the light theme (hs-app-design skill, references/design-system.md): the dark theme with the
     lights on. Cool light greys, slate ink and a navy accent (Slate keeps the site's orange). */
  color-scheme: light;
  --bg: #eef1f2;
  --panel: #ffffff;
  --panel-2: #f6f8f8;
  --border: rgba(28, 32, 35, 0.09);
  --border-strong: rgba(28, 32, 35, 0.16);
  --glass: rgba(255, 255, 255, 0.88);
  --card: rgba(255, 255, 255, 0.88);
  --text: #1c2023;
  --text-dim: #4a5357;
  --text-faint: #626c71;
  /* Mist's accent is navy, #1e4f8f: fills with white text (8.2:1), icons, focus rings and accent text, small text
     included (7.2:1 on the page). */
  --accent: #1e4f8f;
  --accent-2: #1e4f8f;
  --accent-hover: #163c6e;
  --accent-rgb: 30, 79, 143;
  --focus: #1e4f8f;
  --on-accent: #ffffff;
  --obj-1: #dbe7f8; --obj-2: #8fb6ea; --obj-3: #4a78b8; --obj-4: #102a4d;
  --good: #0f7654;
  --warn: #8f5200;
  --bad: #c2353a;
  --wash: 28, 32, 35;
  --inset: rgba(28, 32, 35, 0.04);
  --glow-1: rgba(154, 170, 178, 0.35);
  --glow-2: rgba(30, 79, 143, 0.10);
  --shadow: 0 2px 4px rgba(28, 32, 35, 0.05), 0 26px 50px -30px rgba(28, 32, 35, 0.32);
  --header-shadow: 0 12px 30px -18px rgba(28, 32, 35, 0.28);
  --deco-glass: linear-gradient(140deg, rgba(255,255,255,.95), rgba(255,255,255,.45) 50%, rgba(214,224,229,.6));
  --deco-edge: rgba(255, 255, 255, 0.95);
  --deco-shadow: inset 0 2px 0 #fff, inset 0 -14px 26px rgba(109,124,132,.18), 0 30px 50px -22px rgba(28,32,35,.35);
  /* fixed brand colours, the same in both themes */
  --orange: #e8793b;
  --orange-2: #f39a63;
  --slate: #1c2023;

  /* the lit grey-blue panel screenshots sit on */
  --surface-lit:
    radial-gradient(120% 90% at 75% 0%, #9aaab2 0%, #74848c 38%, rgba(82, 96, 103, 0.4) 100%),
    linear-gradient(180deg, #6d7c84 0%, #46525a 100%);

  /* type */
  --font-display: "Manrope", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-body: "Manrope", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-mono: Consolas, "Cascadia Mono", "SFMono-Regular", monospace;

  /* scale */
  --step--1: 0.83rem;
  --step-0: 1rem;
  --step-1: 1.2rem;
  --step-2: 1.45rem;
  --step-3: clamp(1.8rem, 1.3rem + 1.6vw, 2.5rem);
  --step-4: clamp(2.5rem, 1.6rem + 3.6vw, 4.4rem);

  --content-max: 70ch;
  --page-max: 1240px;

  --radius: 28px;
  --radius-md: 18px;
  --radius-sm: 12px;
  --pill: 999px;

  --gutter: clamp(1rem, 3vw, 2rem);
  --section-pad: clamp(3.5rem, 2rem + 5vw, 6.5rem);
  --shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.6), 0 10px 24px -12px rgba(0, 0, 0, 0.35);
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
}

/* Slate, the dark theme: the site's own palette. Mist and Slate follow the system's setting, and the switch in the
   header can pin either theme (<html data-theme="light|dark">, js/theme.js). */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #1c2023;
    --panel: #262c30;
    --panel-2: #30373c;
    --border: rgba(255, 255, 255, 0.08);
    --border-strong: rgba(255, 255, 255, 0.14);
    --glass: rgba(38, 44, 48, 0.82);
    --card: rgba(38, 44, 48, 0.82);
    --text: #eef1f2;
    --text-dim: #a9b3b8;
    --text-faint: #97a1a6;
    --accent: #e8793b;
    --accent-2: #f39a63;
    --accent-hover: #f39a63;
    --focus: #e8793b;
    --accent-rgb: 232, 121, 59;
    --obj-1: #ffd2b4; --obj-2: #f39a63; --obj-3: #e8793b; --obj-4: #8c3a10;
    --on-accent: #16191b;
    --good: #3ecf8e;
    --warn: #f5b942;
    --bad: #ff7a72;
    --wash: 255, 255, 255;
    --inset: rgba(0, 0, 0, 0.18);
    --glow-1: rgba(232, 121, 59, 0.16);
    --glow-2: rgba(154, 170, 178, 0.16);
    --shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.6), 0 10px 24px -12px rgba(0, 0, 0, 0.35);
    --header-shadow: 0 12px 30px -16px rgba(0, 0, 0, 0.6);
    --deco-glass: linear-gradient(140deg, rgba(255,255,255,.26), rgba(255,255,255,.06) 50%, rgba(232,121,59,.18));
    --deco-edge: rgba(255, 255, 255, 0.22);
    --deco-shadow: inset 0 1px 0 rgba(255,255,255,.35), inset 0 -14px 26px rgba(232,121,59,.18), 0 30px 50px -22px rgba(0,0,0,.6);
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #1c2023;
  --panel: #262c30;
  --panel-2: #30373c;
  --border: rgba(255, 255, 255, 0.08);
  --border-strong: rgba(255, 255, 255, 0.14);
  --glass: rgba(38, 44, 48, 0.82);
  --card: rgba(38, 44, 48, 0.82);
  --text: #eef1f2;
  --text-dim: #a9b3b8;
  --text-faint: #97a1a6;
  --accent: #e8793b;
  --accent-2: #f39a63;
  --accent-hover: #f39a63;
  --focus: #e8793b;
  --accent-rgb: 232, 121, 59;
  --obj-1: #ffd2b4; --obj-2: #f39a63; --obj-3: #e8793b; --obj-4: #8c3a10;
  --on-accent: #16191b;
  --good: #3ecf8e;
  --warn: #f5b942;
  --bad: #ff7a72;
  --wash: 255, 255, 255;
  --inset: rgba(0, 0, 0, 0.18);
  --glow-1: rgba(232, 121, 59, 0.16);
  --glow-2: rgba(154, 170, 178, 0.16);
  --shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.6), 0 10px 24px -12px rgba(0, 0, 0, 0.35);
  --header-shadow: 0 12px 30px -16px rgba(0, 0, 0, 0.6);
  --deco-glass: linear-gradient(140deg, rgba(255,255,255,.26), rgba(255,255,255,.06) 50%, rgba(232,121,59,.18));
  --deco-edge: rgba(255, 255, 255, 0.22);
  --deco-shadow: inset 0 1px 0 rgba(255,255,255,.35), inset 0 -14px 26px rgba(232,121,59,.18), 0 30px 50px -22px rgba(0,0,0,.6);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  background:
    radial-gradient(60rem 40rem at 85% -10rem, var(--glow-1), transparent 70%),
    radial-gradient(50rem 30rem at -10% 20rem, var(--glow-2), transparent 70%),
    var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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

a {
  color: var(--accent-2);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color 0.2s ease;
}
a:hover { color: var(--text); }

::selection { background: var(--accent); color: var(--on-accent); }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.08;
  margin: 0 0 0.5em;
  letter-spacing: -0.025em;
}
h1 { font-size: var(--step-4); font-weight: 500; letter-spacing: -0.035em; }
h2 { font-size: var(--step-3); font-weight: 500; }
h3 { font-size: var(--step-2); }
h4 { font-size: var(--step-1); }

p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

.mono { font-family: var(--font-mono); }

.wrap {
  max-width: var(--page-max);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.prose { max-width: var(--content-max); }
/* A .wrap that is also .prose keeps the page's left edge (so its text
   lines up with headings and sections around it) and caps line length
   on the children instead of centring a narrow column. */
.wrap.prose { max-width: var(--page-max); }
.wrap.prose > * { max-width: var(--content-max); }

hr, .rule {
  border: none;
  border-top: 1px solid var(--border);
  margin: 0;
}

/* ---------- skip link / focus ---------- */
.skip-link {
  position: absolute;
  left: -999px;
  top: auto;
  background: var(--accent);
  color: var(--on-accent);
  padding: 0.6em 1em;
  border-radius: var(--pill);
  z-index: 100;
}
.skip-link:focus {
  left: 1rem;
  top: 1rem;
}
:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 3px;
}

/* ---------- header: floating glass pill ---------- */
.site-header {
  position: sticky;
  top: 14px;
  z-index: 20;
  margin: 14px 0 0;
  padding: 0 var(--gutter);
}
.site-header .wrap {
  display: flex;
  align-items: center;
  gap: 1rem;
  max-width: 1000px;
  padding: 0.45rem 0.45rem 0.45rem 0.9rem;
  background: var(--glass);
  border: 1px solid var(--border);
  border-radius: var(--pill);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  backdrop-filter: blur(16px) saturate(140%);
  box-shadow: var(--header-shadow);
}
.brand {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  text-decoration: none;
  color: var(--text);
  flex-shrink: 0;
}
.brand:hover { color: var(--text); }
.brand-mark {
  display: inline-grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 0.72rem;
  letter-spacing: 0.02em;
  color: var(--orange);
  background: linear-gradient(160deg, rgba(232, 121, 59, 0.3), rgba(232, 121, 59, 0.08)), var(--slate);
  border: 1px solid rgba(232, 121, 59, 0.45);
  border-radius: 10px;
  line-height: 1;
}
.brand-text {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.95rem;
  letter-spacing: -0.01em;
}
.brand-sub { display: none; }

nav.primary-nav { flex: 1; }
nav.primary-nav ul {
  list-style: none;
  display: flex;
  align-items: center;
  gap: 0.25rem;
  margin: 0;
  padding: 0;
}
nav.primary-nav li:first-child { margin-left: auto; }
nav.primary-nav li:last-child { margin-left: auto; }
nav.primary-nav a {
  display: block;
  color: var(--text-dim);
  text-decoration: none;
  font-size: 0.9rem;
  font-weight: 500;
  padding: 0.5em 0.95em;
  border-radius: var(--pill);
  transition: color 0.2s ease, background-color 0.2s ease;
}
nav.primary-nav a:hover,
nav.primary-nav a[aria-current="page"] {
  color: var(--text);
  background: rgba(var(--wash), 0.06);
}
nav.primary-nav a.nav-cta {
  background: var(--accent);
  color: var(--on-accent);
  font-weight: 700;
  padding: 0.62em 1.25em;
}
nav.primary-nav a.nav-cta:hover,
nav.primary-nav a.nav-cta[aria-current="page"] {
  background: var(--accent-hover);
  color: var(--on-accent);
}

.nav-toggle {
  display: none;
  margin-left: auto;
  background: var(--card);
  border: 1px solid var(--border-strong);
  border-radius: var(--pill);
  padding: 0.55em 1em;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.85rem;
  color: var(--text);
  cursor: pointer;
}

@media (max-width: 760px) {
  .site-header .wrap {
    flex-wrap: wrap;
    border-radius: 24px;
    gap: 0.5rem;
  }
  .nav-toggle { display: inline-flex; }
  nav.primary-nav {
    display: none;
    flex-basis: 100%;
    order: 3;
  }
  nav.primary-nav.open { display: block; }
  nav.primary-nav ul {
    flex-direction: column;
    align-items: stretch;
    gap: 0.2rem;
    padding: 0.5rem 0 0.2rem;
    border-top: 1px solid var(--border);
    margin-top: 0.3rem;
  }
  nav.primary-nav li:first-child,
  nav.primary-nav li:last-child { margin-left: 0; }
  nav.primary-nav a { padding: 0.8em 1em; border-radius: 14px; }
  nav.primary-nav a.nav-cta { text-align: center; margin-top: 0.3rem; }
}

/* ---------- hero ---------- */
.hero {
  padding: clamp(3.5rem, 2rem + 6vw, 7rem) 0 clamp(2rem, 1rem + 3vw, 3.5rem);
}
.hero .wrap > * { animation: rise 0.8s var(--ease) both; }
.hero .wrap > *:nth-child(2) { animation-delay: 0.06s; }
.hero .wrap > *:nth-child(3) { animation-delay: 0.12s; }
.hero .wrap > *:nth-child(4) { animation-delay: 0.18s; }
.hero .wrap > *:nth-child(5) { animation-delay: 0.24s; }
@keyframes rise {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: none; }
}

.hero-eyebrow {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--text-faint);
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 1.6rem;
  letter-spacing: 0.02em;
}
.hero-eyebrow::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 4px rgba(var(--accent-rgb), 0.18);
  flex-shrink: 0;
}
.hero-eyebrow a { color: var(--text-dim); }
.hero-eyebrow a:hover { color: var(--text); }
.hero-eyebrow .tc {
  color: var(--accent-2);
  min-width: 11ch;
  display: inline-block;
}
.hero h1 { max-width: 18ch; }
.hero .lede {
  font-size: clamp(1.05rem, 1rem + 0.3vw, 1.2rem);
  line-height: 1.65;
  color: var(--text-dim);
  max-width: 58ch;
  margin-top: 1.4rem;
}
.hero-actions {
  display: flex;
  gap: 0.75rem;
  margin-top: 2.2rem;
  flex-wrap: wrap;
}

/* ---------- homepage split hero ---------- */
.hero-home { padding-top: clamp(1.5rem, 1rem + 2vw, 2.5rem); }
.hero-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr);
  gap: 14px;
}
.hero-home .wrap > * { animation: rise 0.9s var(--ease) both; }
.hero-home .wrap > *:nth-child(2) { animation-delay: 0.1s; }

.panel {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: clamp(1.6rem, 1rem + 2.5vw, 3rem);
}
.panel-lit {
  background: var(--surface-lit);
  border-color: rgba(255, 255, 255, 0.12);
}
.hero-copy {
  display: flex;
  flex-direction: column;
}
.hero-copy h1 { font-size: clamp(2.2rem, 1.5rem + 2vw, 3.2rem); max-width: 16ch; }
.hero-copy .lede { margin-top: 1rem; font-size: 1.02rem; }
.hero-copy .hero-actions { margin-top: auto; padding-top: 2rem; }

.stat-list {
  list-style: none;
  margin: 2rem 0 0;
  padding: 0;
}
.stat-list li {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 1rem;
  padding: 0.9rem 0 0.8rem;
  border-bottom: 1px solid var(--border-strong);
}
.stat-num {
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 1.8rem + 2vw, 3.4rem);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.04em;
}
.stat-label {
  font-size: 0.88rem;
  color: var(--text-dim);
  text-align: right;
  padding-bottom: 0.3em;
}

.hero-visual {
  display: flex;
  flex-direction: column;
  gap: 1.4rem;
  overflow: hidden;
}
.hero-stack {
  flex: 1;
  display: grid;
  align-content: center;
}
/* the two screenshots share one grid cell and are offset so they overlap */
.hero-stack a {
  grid-area: 1 / 1;
  position: relative;
  width: 84%;
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow);
  border: 1px solid rgba(255, 255, 255, 0.18);
  transition: transform 0.5s var(--ease);
}
.hero-stack a:first-child { justify-self: end; }
.hero-stack a:last-child { justify-self: start; margin-top: 32%; }
.hero-stack a:hover { transform: translateY(-4px); z-index: 1; }
.hero-stack img {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  object-position: top left;
}
.glass-card {
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.18);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border-radius: var(--radius-md);
  padding: 1rem 1.3rem;
  text-align: center;
  color: #f5f7f8;
  font-size: 0.95rem;
  line-height: 1.55;
  margin: 0;
}

@media (max-width: 900px) {
  .hero-split { grid-template-columns: 1fr; }
}

/* ---------- buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.65em;
  padding: 0.75em 1.35em;
  font-family: var(--font-body);
  font-size: 0.93rem;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  border: 1px solid var(--border-strong);
  border-radius: var(--pill);
  color: var(--text);
  background: var(--card);
  cursor: pointer;
  transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}
.btn:hover {
  color: var(--text);
  background: var(--panel);
  border-color: rgba(var(--wash), 0.25);
}
.btn:active { transform: translateY(1px); }
.btn-primary {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--on-accent);
}
.btn-primary:hover {
  background: var(--accent-hover);
  border-color: var(--accent-hover);
  color: var(--on-accent);
}
/* "↗ Label" button: a small orange chip in front of the text */
.btn-icon {
  display: inline-grid;
  place-items: center;
  width: 1.9em;
  height: 1.9em;
  margin: -0.35em 0 -0.35em -0.75em;
  border-radius: 9px;
  background: var(--accent);
  color: var(--on-accent);
  font-size: 0.95em;
  font-weight: 700;
  transition: transform 0.25s var(--ease);
}
.btn:hover .btn-icon { transform: rotate(45deg); }
.btn-primary .btn-icon { background: rgba(0, 0, 0, 0.14); color: var(--on-accent); }

/* latest release / last updated line under a tool page's buttons */
.tool-status {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--text-faint);
  margin: 1.2rem 0 0;
}

/* short demo clip in place of a screenshot: <video> inside .shot */
.shot video {
  display: block;
  width: 100%;
  height: auto;
  background: var(--bg);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow);
}
/* a product photo beside its text (FIT Reader's Home Office boards) */
.boards-feature {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  gap: clamp(1.4rem, 1rem + 2vw, 3rem);
  align-items: center;
}
.boards-feature .shot img { aspect-ratio: auto; object-fit: contain; }
.boards-feature h2 { margin-top: 0; }
@media (max-width: 860px) { .boards-feature { grid-template-columns: 1fr; } }

/* a figure that spans both columns of .exhibit-shots (e.g. a longer walkthrough clip) */
.shot-wide { grid-column: 1 / -1; }
/* annotated 16:9 screens, shown whole: their callouts run to the right-hand edge */
.shot.shot-169 img { aspect-ratio: 16 / 9; }

/* a chapter clip in a .showcase row, in place of its screenshot */
.showcase-shot video {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  background: var(--bg);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow);
}
.showcase-body h3 { font-size: var(--step-2); font-weight: 600; line-height: 1.25; margin: 0.3rem 0 0.8rem; }
.step-label {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent-2);
}
/* "what to click" steps, numbered like the callouts in the clips */
.click-steps {
  list-style: none;
  counter-reset: step;
  margin: 1.2rem 0 0;
  padding: 0;
  display: grid;
  gap: 0.7rem;
  font-size: 0.95rem;
  color: var(--text-dim);
}
.click-steps li {
  counter-increment: step;
  display: grid;
  grid-template-columns: 1.9rem 1fr;
  gap: 0.75rem;
  align-items: start;
}
.click-steps li::before {
  content: counter(step);
  display: grid;
  place-items: center;
  width: 1.9rem;
  height: 1.9rem;
  border-radius: 9px;
  background: var(--accent);
  color: var(--on-accent);
  font-weight: 800;
  font-size: 0.85rem;
}
.click-steps strong { color: var(--text); font-weight: 600; }

/* ---------- section scaffolding ---------- */
.section { padding: var(--section-pad) 0 0; }
.section:last-of-type { padding-bottom: var(--section-pad); }
.section-tight { padding-top: 1rem; }
.section-flush { padding-top: 0; }
.section-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  margin-bottom: 2rem;
  flex-wrap: wrap;
}
.section-head h2 { margin: 0; }
.section-head .label {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--text-faint);
}
.section-head .label a { color: var(--text-dim); }
.section-head .label a:hover { color: var(--accent-2); }

/* two panels side by side (homepage "why" + "suggest") */
.split-panels {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  gap: 14px;
}
.split-panels .panel h2 { margin-bottom: 1rem; }
.split-panels .panel p { color: var(--text-dim); }
.panel-accent {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background:
    radial-gradient(70% 80% at 100% 0%, rgba(var(--accent-rgb), 0.32), transparent 70%),
    var(--panel);
}
.panel-accent .hero-actions { margin-top: auto; padding-top: 2rem; }
@media (max-width: 900px) {
  .split-panels { grid-template-columns: 1fr; }
}

/* ---------- exhibit / tool cards (tools page) ---------- */
.exhibit-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.exhibit {
  display: grid;
  grid-template-columns: 7rem 1fr auto;
  gap: 1.2rem 2rem;
  padding: clamp(1.4rem, 1rem + 1.5vw, 2.2rem);
  align-items: start;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  transition: border-color 0.25s ease;
}
.exhibit:hover { border-color: var(--border-strong); }
.exhibit-id {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  color: var(--accent-2);
  padding-top: 0.45em;
  letter-spacing: 0.02em;
}
.exhibit h3 { margin-bottom: 0.45em; }
.exhibit h3 a { color: var(--text); text-decoration: none; }
.exhibit h3 a:hover { color: var(--accent-2); }
.exhibit .desc { color: var(--text-dim); max-width: 60ch; }
.exhibit .meta,
.feature-body .meta {
  margin-top: 1em;
  display: flex;
  gap: 0.4em;
  flex-wrap: wrap;
}
.exhibit .meta span,
.feature-body .meta span,
.tag {
  font-family: var(--font-body);
  font-size: 0.74rem;
  font-weight: 500;
  color: var(--text-dim);
  background: rgba(var(--wash), 0.05);
  border: 1px solid var(--border);
  border-radius: var(--pill);
  padding: 0.3em 0.8em;
  white-space: nowrap;
}
.exhibit .actions {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  align-items: flex-end;
}

/* screenshots on the lit stage, spanning the full card width */
.exhibit-shots {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(0.8rem, 0.5rem + 1.5vw, 1.6rem);
  margin: 0;
  padding: clamp(1rem, 0.5rem + 2.5vw, 2.4rem);
  background: var(--surface-lit);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: calc(var(--radius) - 6px);
}
.shot {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}
.shot a { display: block; border-radius: var(--radius-sm); }
.shot img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  object-position: top left;
  background: var(--bg);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow);
  transition: transform 0.4s var(--ease);
}
.shot a:hover img,
.shot a:focus-visible img { transform: translateY(-3px); }
.shot figcaption {
  font-size: 0.8rem;
  color: #eef2f3;
  opacity: 0.85;
}

@media (max-width: 680px) {
  .exhibit { grid-template-columns: 1fr; }
  .exhibit .actions { align-items: center; flex-direction: row; flex-wrap: wrap; }
  .exhibit-shots { grid-template-columns: 1fr; }
}

/* ---------- featured tool cards (homepage) ---------- */
.featured-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}
.feature-card {
  display: flex;
  flex-direction: column;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  padding: 10px;
  transition: border-color 0.25s ease, transform 0.35s var(--ease);
}
.feature-card:hover { border-color: var(--border-strong); transform: translateY(-3px); }
.feature-card .feature-shot {
  display: block;
  padding: 1.4rem 1.4rem 0;
  background: var(--surface-lit);
  border-radius: calc(var(--radius) - 8px);
  overflow: hidden;
}
.feature-card .feature-shot img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  object-position: top left;
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  box-shadow: var(--shadow);
  transition: transform 0.5s var(--ease);
}
.feature-card:hover .feature-shot img { transform: translateY(-4px); }
.feature-body {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  flex: 1;
  padding: 1.3rem 1rem 1rem;
}
.feature-body .exhibit-id { padding-top: 0; }
.feature-body h3 { margin: 0; }
.feature-body .desc { color: var(--text-dim); margin: 0; font-size: 0.95rem; }
.feature-body .meta { margin-top: 0.4rem; }
.feature-body .actions {
  margin-top: auto;
  padding-top: 1rem;
  display: flex;
  gap: 0.6rem;
  flex-wrap: wrap;
}

@media (max-width: 960px) {
  .featured-grid { grid-template-columns: 1fr; }
}

/* ---------- blog / log entries: one panel, hairline rows ---------- */
.log-list {
  display: flex;
  flex-direction: column;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0.5rem clamp(1.2rem, 0.8rem + 1.5vw, 2.2rem);
}
.log-entry {
  display: grid;
  grid-template-columns: 9rem 1fr;
  gap: 1.5rem;
  padding: 1.6rem 0;
  border-bottom: 1px solid var(--border);
}
.log-entry:last-child { border-bottom: none; }
.log-entry time {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  color: var(--text-faint);
  padding-top: 0.35em;
}
.log-entry h3 { margin-bottom: 0.35em; font-size: 1.3rem; }
.log-entry h3 a { color: var(--text); text-decoration: none; }
.log-entry h3 a:hover { color: var(--accent-2); }
.log-entry p { color: var(--text-dim); }
.log-list .empty-state { padding: 1.6rem 0; }
@media (max-width: 620px) {
  .log-entry { grid-template-columns: 1fr; gap: 0.4rem; }
}

/* ---------- about / credentials strip ---------- */
.creds {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.creds > div {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 1.5rem 1.6rem;
}
.creds dt {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--accent-2);
  margin-bottom: 0.8em;
}
.creds dd { margin: 0; color: var(--text); font-size: 1.05rem; line-height: 1.45; }

/* ---------- forms ---------- */
.field {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  margin-bottom: 1.4rem;
}
.field label {
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--text-dim);
}
.field input,
.field textarea,
.field select {
  font-family: var(--font-body);
  font-size: 1rem;
  padding: 0.85em 1em;
  border: 1px solid var(--border-strong);
  border-radius: 14px;
  background: var(--panel);
  color: var(--text);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.field input:focus,
.field textarea:focus,
.field select:focus {
  outline: none;
  border-color: var(--focus);
  box-shadow: 0 0 0 4px rgba(var(--accent-rgb), 0.18);
}
.form-note {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--text-faint);
  margin-top: 1rem;
}
#form-status[data-state="success"] { color: var(--good); }
#form-status[data-state="error"] { color: var(--bad); }

/* ---------- post ---------- */
.post-header {
  padding: clamp(3.5rem, 2rem + 6vw, 7rem) 0 2.5rem;
  border-bottom: 1px solid var(--border);
}
.post-meta {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  color: var(--text-faint);
  margin-bottom: 1.4rem;
}
.post-body { padding-top: 2.5rem; padding-bottom: var(--section-pad); line-height: 1.75; }
.section .post-body { padding-bottom: 0; }
.post-body h2 { margin-top: 1.8em; font-size: clamp(1.5rem, 1.2rem + 1vw, 1.9rem); }
.post-body li { margin-bottom: 0.55em; }
.post-body li::marker { color: var(--accent-2); }
.post-body pre {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 1rem 1.2rem;
  overflow-x: auto;
  font-family: var(--font-mono);
  font-size: 0.85rem;
  line-height: 1.6;
}
.post-body code {
  font-family: var(--font-mono);
  background: var(--panel-2);
  border-radius: 6px;
  padding: 0.12em 0.4em;
  font-size: 0.88em;
}
.post-body pre code { background: none; padding: 0; }
.post-body blockquote {
  border-left: 2px solid var(--accent);
  margin: 1.5em 0;
  padding-left: 1.2em;
  color: var(--text-dim);
}

/* ---------- footer ---------- */
.site-footer {
  padding: 2rem 0 2.5rem;
  color: var(--text-faint);
  font-size: 0.85rem;
}
.site-footer .wrap {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  padding-top: 1.6rem;
  /* hairline across the content width only, not the gutters */
  background: linear-gradient(var(--border), var(--border)) no-repeat center top / calc(100% - 2 * var(--gutter)) 1px;
}
.site-footer a { color: var(--text-dim); text-decoration: none; }
.site-footer a:hover { color: var(--accent-2); }

/* ---------- misc ---------- */
.empty-state {
  padding: 2.5rem 0;
  color: var(--text-faint);
  font-family: var(--font-mono);
  font-size: 0.9rem;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation: none !important; transition: none !important; }
}

/* =========================================================
   Shop components
   ========================================================= */

/* status badge: available now / coming soon / free */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
  font-family: var(--font-body);
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  border-radius: var(--pill);
  padding: 0.3em 0.85em;
  white-space: nowrap;
  border: 1px solid var(--border-strong);
  color: var(--text-dim);
  background: rgba(var(--wash), 0.04);
}
.badge::before {
  content: "";
  width: 0.5em;
  height: 0.5em;
  border-radius: 50%;
  background: currentColor;
}
.badge-live { color: var(--good); border-color: rgba(62, 207, 142, 0.35); background: rgba(62, 207, 142, 0.08); }
.badge-soon { color: var(--accent-2); border-color: rgba(var(--accent-rgb), 0.35); background: rgba(var(--accent-rgb), 0.12); }
.feature-body .badge, .exhibit .badge { margin-bottom: 0.9rem; }

/* value grid: four short reasons */
.value-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 14px;
}
.value-grid .panel { padding: clamp(1.4rem, 1rem + 1vw, 2rem); }
.value-grid h3 { font-size: var(--step-1); margin-bottom: 0.6rem; }
.value-grid p { color: var(--text-dim); font-size: 0.95rem; }
.value-icon {
  display: inline-grid;
  place-items: center;
  width: 2.4rem;
  height: 2.4rem;
  margin-bottom: 1.1rem;
  border-radius: 12px;
  background: rgba(var(--accent-rgb), 0.14);
  color: var(--accent-2);
}
.value-icon svg { width: 1.25rem; height: 1.25rem; }

/* numbered steps */
.steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px;
  counter-reset: step;
}
.steps li {
  counter-increment: step;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 1.5rem 1.6rem;
}
.steps li::before {
  content: counter(step, decimal-leading-zero);
  display: block;
  font-family: var(--font-mono);
  font-size: 0.8rem;
  color: var(--accent-2);
  margin-bottom: 0.8rem;
}
.steps strong { display: block; font-size: 1.05rem; margin-bottom: 0.35rem; }
.steps span { color: var(--text-dim); font-size: 0.95rem; }

/* ticked feature list */
.feature-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 0.9rem 2.2rem;
}
.feature-list li {
  position: relative;
  padding-left: 1.9rem;
  color: var(--text-dim);
}
.feature-list li strong { color: var(--text); font-weight: 600; }
.feature-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.32em;
  width: 1.05rem;
  height: 1.05rem;
  border-radius: 50%;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.4l2.6 2.5L12 5.3' fill='none' stroke='%2316191b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 80% no-repeat,
    var(--accent);
}

/* buy panel on product pages and plan cards on the licensing page */
.buy-panel {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  gap: clamp(1.5rem, 1rem + 2vw, 3rem);
  align-items: center;
}
.buy-panel h2 { margin-bottom: 0.8rem; }
.buy-panel p { color: var(--text-dim); }
.buy-box {
  background: var(--inset);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  padding: 1.6rem;
}
.price {
  font-family: var(--font-display);
  font-size: clamp(2rem, 1.6rem + 1.4vw, 2.7rem);
  font-weight: 500;
  letter-spacing: -0.03em;
  line-height: 1;
  margin-bottom: 0.4rem;
}
.price-note { font-size: 0.85rem; color: var(--text-faint); margin-bottom: 1.2rem; }
.buy-box .feature-list { grid-template-columns: 1fr; gap: 0.55rem; margin-bottom: 1.4rem; font-size: 0.93rem; }
.buy-box .hero-actions { margin-top: 0; }
@media (max-width: 860px) {
  .buy-panel { grid-template-columns: 1fr; }
}

.plan-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 14px;
}
.plan {
  display: flex;
  flex-direction: column;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: clamp(1.5rem, 1rem + 1vw, 2.1rem);
}
.plan-featured {
  border-color: rgba(var(--accent-rgb), 0.45);
  background:
    radial-gradient(80% 60% at 100% 0%, rgba(var(--accent-rgb), 0.18), transparent 70%),
    var(--panel);
}
.plan-kicker {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--accent-2);
  margin-bottom: 0.8rem;
}
.plan h3 { margin-bottom: 0.5rem; }
.plan > p { color: var(--text-dim); font-size: 0.95rem; }
.plan .feature-list { grid-template-columns: 1fr; gap: 0.6rem; margin: 1.2rem 0 1.6rem; font-size: 0.93rem; }
.plan .hero-actions { margin-top: auto; }

/* FAQ */
.faq { display: flex; flex-direction: column; gap: 10px; max-width: 900px; }
.faq details {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 0 1.5rem;
  transition: border-color 0.2s ease;
}
.faq details[open] { border-color: var(--border-strong); }
.faq summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding: 1.15rem 0;
  font-weight: 600;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+";
  font-family: var(--font-mono);
  font-size: 1.2rem;
  color: var(--accent-2);
  transition: transform 0.2s var(--ease);
}
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details > div { padding: 0 0 1.3rem; color: var(--text-dim); }

/* lifecycle diagram on the licensing page */
.lifecycle { width: 100%; height: auto; display: block; }
.lifecycle-wrap {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: clamp(1rem, 0.6rem + 1.5vw, 2rem);
  overflow-x: auto;
}
.lifecycle-wrap svg { min-width: 640px; }

/* two-column form rows */
.field-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1rem; }
@media (max-width: 620px) { .field-pair { grid-template-columns: 1fr; } }
.field-hint { font-size: 0.8rem; color: var(--text-faint); }
.notice {
  border-left: 3px solid var(--warn);
  background: rgba(245, 185, 66, 0.06);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  padding: 0.9rem 1.2rem;
  color: var(--text-dim);
  margin-bottom: 1.8rem;
}
.notice strong { color: var(--text); }

/* legal pages */
.legal h2 { font-size: var(--step-2); margin-top: 2.2rem; }
.legal p, .legal li { color: var(--text-dim); }
.legal .updated { font-family: var(--font-mono); font-size: 0.8rem; color: var(--text-faint); }

/* footer with columns */
.site-footer.footer-cols { padding-top: 3.5rem; }
.footer-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr));
  gap: 2rem;
  padding-bottom: 2.2rem;
  margin-bottom: 1.6rem;
  border-bottom: 1px solid var(--border);
}
.footer-grid h2 {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-faint);
  margin-bottom: 0.9rem;
}
.footer-grid ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.45rem; }
.footer-grid a { color: var(--text-dim); text-decoration: none; }
.footer-grid a:hover { color: var(--text); }
.footer-about p { color: var(--text-faint); max-width: 34ch; margin-top: 0.9rem; }
.footer-cols .footer-base { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
@media (max-width: 820px) {
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .footer-about { grid-column: 1 / -1; }
}
.footer-cols .wrap { display: block; background: none; padding-top: 0; }
.footer-brand { display: inline-flex; align-items: center; gap: 0.6rem; color: var(--text); font-weight: 700; text-decoration: none; }
.badge { align-self: flex-start; width: fit-content; }
.hero .badge { margin-bottom: 1.1rem; }

/* =========================================================
   Product suite: icons, category chips, homepage showcase
   ========================================================= */
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.dim { color: var(--text-faint); }

/* product colours: none. Every tool uses the suite's one orange (the hs-app-design skill: no per-product
   colours); a tool is told apart by its name and its icon. --c stays so the rules that use it
   keep working. */
.tool-fit-reader, .tool-forgery-lens, .tool-ground-truth, .tool-quick-capture, .tool-deep-table,
.tool-simgo, .tool-frame-guard, .tool-case-file, .tool-scout { --c: var(--accent-2); }

.p-icon {
  flex: none;
  display: inline-grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 12px;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 0.82rem;
  letter-spacing: 0.02em;
  color: var(--orange);
  background: linear-gradient(160deg, rgba(232, 121, 59, 0.3), rgba(232, 121, 59, 0.08)), var(--slate);
  border: 1px solid rgba(232, 121, 59, 0.45);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
.p-icon-lg { width: 3.4rem; height: 3.4rem; border-radius: 16px; font-size: 1.05rem; }
.p-icon-xl { width: 5rem; height: 5rem; border-radius: 22px; font-size: 1.5rem; }

/* product icons: each tool's line glyph on its own, in the theme's orange (--focus: the deeper orange in Mist, the
   bright orange in Slate), drawn as a CSS mask of img/icons/<slug>-glyph.svg (-glyph-sm under 32 px), made by the
   hs-app-design skill's make_icons.mjs. The orange tile is only for the apps' own icons. The letters stay in the
   markup for when masks or images aren't supported. */
.tool-fit-reader { --icon: url("../img/icons/fit-reader-glyph.svg"); --icon-sm: url("../img/icons/fit-reader-glyph-sm.svg"); }
.tool-frame-guard { --icon: url("../img/icons/frame-guard-glyph.svg"); --icon-sm: url("../img/icons/frame-guard-glyph-sm.svg"); }
.tool-scout { --icon: url("../img/icons/scout-glyph.svg"); --icon-sm: url("../img/icons/scout-glyph-sm.svg"); }
.tool-forgery-lens { --icon: url("../img/icons/forgery-lens-glyph.svg"); --icon-sm: url("../img/icons/forgery-lens-glyph-sm.svg"); }
.tool-quick-capture { --icon: url("../img/icons/quick-capture-glyph.svg"); --icon-sm: url("../img/icons/quick-capture-glyph-sm.svg"); }
.tool-simgo { --icon: url("../img/icons/simgo-glyph.svg"); --icon-sm: url("../img/icons/simgo-glyph-sm.svg"); }
.tool-deep-table { --icon: url("../img/icons/deep-table-glyph.svg"); --icon-sm: url("../img/icons/deep-table-glyph-sm.svg"); }
.tool-ground-truth { --icon: url("../img/icons/ground-truth-glyph.svg"); --icon-sm: url("../img/icons/ground-truth-glyph-sm.svg"); }
.tool-case-file { --icon: url("../img/icons/case-file-glyph.svg"); --icon-sm: url("../img/icons/case-file-glyph-sm.svg"); }
.p-icon[class*="tool-"] { color: transparent; border: 0; border-radius: 0; box-shadow: none; overflow: hidden;
  background: var(--focus); -webkit-mask: var(--icon) center / 88% 88% no-repeat; mask: var(--icon) center / 88% 88% no-repeat; }
.p-icon[class*="tool-"]:not(.p-icon-lg):not(.p-icon-xl) { -webkit-mask-image: var(--icon-sm); mask-image: var(--icon-sm); }

.cat-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 400;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-dim);
}
.cat-chip::before { content: ""; width: 0.55em; height: 0.55em; border-radius: 2px; background: var(--text-faint); }

.showcase-tag {
  font-weight: 600;
  color: var(--c, var(--accent-2));
  margin-bottom: 0.6rem;
}

/* hero */
.hero-suite { padding-bottom: clamp(1.5rem, 1rem + 2.5vw, 3.5rem); }
.hero-suite-panel {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: clamp(1.5rem, 1rem + 2vw, 3rem);
  align-items: center;
  padding: clamp(1.6rem, 1rem + 3vw, 3.5rem);
  background:
    radial-gradient(70% 90% at 100% 0%, rgba(var(--accent-rgb), 0.22), transparent 70%),
    var(--panel);
  overflow: hidden;
}
.hero-suite-copy h1 { font-size: clamp(2.3rem, 1.5rem + 3vw, 3.9rem); }
.hero-mosaic {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  transform: rotate(-3deg) translateX(4%);
}
.hero-mosaic img {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 11;
  object-fit: cover;
  object-position: top left;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-strong);
  box-shadow: var(--shadow);
}
.hero-mosaic img:nth-child(2) { transform: translateY(18%); }
.hero-mosaic img:nth-child(4) { transform: translateY(18%); }
@media (max-width: 900px) {
  .hero-suite-panel { grid-template-columns: 1fr; }
  .hero-mosaic { transform: none; }
}

.trust-row {
  list-style: none;
  margin: 14px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}
.trust-row li {
  padding: 1.1rem 1.3rem;
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  font-size: 0.88rem;
  color: var(--text-faint);
}
.trust-row strong { display: block; color: var(--text); font-size: 0.98rem; margin-bottom: 0.15rem; }
@media (max-width: 900px) { .trust-row { grid-template-columns: 1fr 1fr; } }

/* the suite at a glance */
.suite-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}
.suite-col {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.5rem 1.3rem 1.2rem;
  display: flex;
  flex-direction: column;
}
.suite-col h3 { margin-bottom: 0.6rem; }
.suite-col > p { color: var(--text-faint); font-size: 0.88rem; margin-bottom: 1.1rem; }
.suite-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.suite-col a {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 0.6rem;
  margin: 0 -0.35rem;
  border-radius: 14px;
  text-decoration: none;
  color: var(--text);
  transition: background 0.2s ease;
}
.suite-col a:hover { background: rgba(var(--wash), 0.05); color: var(--text); }
.suite-col a > span:not(.p-icon) { display: flex; flex-direction: column; min-width: 0; }
.suite-col strong { font-size: 0.97rem; }
.suite-col em { font-style: normal; font-size: 0.82rem; color: var(--text-faint); }
.suite-col small {
  margin-left: auto;
  font-size: 0.68rem;
  font-weight: 600;
  color: var(--warn);
  border: 1px solid rgba(245, 185, 66, 0.35);
  border-radius: var(--pill);
  padding: 0.15em 0.6em;
}
@media (max-width: 900px) { .suite-grid { grid-template-columns: 1fr; } }

/* large alternating product rows */
.showcase-list { display: flex; flex-direction: column; gap: 14px; }
.showcase {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: clamp(1.5rem, 1rem + 2.5vw, 3.5rem);
  align-items: center;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 12px clamp(1.4rem, 1rem + 2vw, 3rem) 12px 12px;
}
.showcase-flip { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); padding: 12px 12px 12px clamp(1.4rem, 1rem + 2vw, 3rem); }
.showcase-flip .showcase-shot { order: 2; }
.showcase-shot {
  display: block;
  background: var(--surface-lit);
  border-radius: calc(var(--radius) - 8px);
  padding: clamp(1rem, 0.6rem + 1.5vw, 2rem);
  overflow: hidden;
}
.showcase-shot img {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 11;
  object-fit: cover;
  object-position: top left;
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow);
  transition: transform 0.5s var(--ease);
}
.showcase-shot:hover img { transform: scale(1.02); }
.showcase-body { padding: 1.2rem 0; }
.showcase-head { display: flex; align-items: center; gap: 1rem; margin-bottom: 1rem; }
.showcase-head h3 { font-size: var(--step-3); font-weight: 500; margin: 0.25rem 0 0; }
.showcase-head .badge { margin-bottom: 0.3rem; }
.showcase-body .desc { color: var(--text-dim); }
.showcase-body .feature-list { grid-template-columns: 1fr; gap: 0.5rem; margin: 1.2rem 0 1.5rem; font-size: 0.95rem; }
.showcase-foot { display: flex; flex-direction: column; gap: 1rem; }
.showcase-foot .hero-actions { margin-top: 0; }
.showcase-compact { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1fr); }
@media (max-width: 900px) {
  .showcase, .showcase-flip, .showcase-compact { grid-template-columns: 1fr; padding: 12px 12px 0; }
  .showcase-flip .showcase-shot { order: 0; }
  .showcase-body { padding: 0.6rem 0.8rem 1.6rem; }
}

/* workflow */
.flow {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  position: relative;
}
.flow li {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 1.5rem 1.5rem 1.3rem;
}
.flow li:not(:last-child)::after {
  content: "→";
  position: absolute;
  right: -12px;
  top: 1.45rem;
  z-index: 1;
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--bg);
  border: 1px solid var(--border-strong);
  color: var(--accent-2);
  font-size: 0.8rem;
}
.flow-n { font-size: 0.78rem; color: var(--accent-2); }
.flow strong { font-size: var(--step-1); }
.flow li > span:not(.flow-n) { color: var(--text-dim); font-size: 0.93rem; }
.flow-icons { display: flex; gap: 8px; margin-top: auto; padding-top: 1rem; }
.flow-icons a { text-decoration: none; }
.flow-icons a:hover .p-icon { transform: translateY(-2px); }
.flow-icons .p-icon { transition: transform 0.2s var(--ease); }
@media (max-width: 900px) {
  .flow { grid-template-columns: 1fr 1fr; }
  .flow li::after { display: none; }
}
@media (max-width: 560px) { .flow { grid-template-columns: 1fr; } }

/* pricing teaser */
.pricing-teaser {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(1.5rem, 1rem + 3vw, 4rem);
  align-items: center;
  padding: clamp(1.6rem, 1rem + 3vw, 3.2rem);
}
.pricing-teaser p { color: var(--text-dim); }
.price-path { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.price-path li {
  display: grid;
  gap: 0.1rem;
  padding: 1rem 1.3rem;
  border-radius: var(--radius-md);
  background: var(--inset);
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
}
.price-path li:nth-child(2) { border-left-style: dashed; }
.price-path li:nth-child(3) { border-left-color: var(--good); }
.price-path span { font-size: 0.72rem; color: var(--text-faint); text-transform: uppercase; letter-spacing: 0.08em; }
.price-path strong { font-size: 1.05rem; }
.price-path em { font-style: normal; color: var(--text-dim); font-size: 0.9rem; }
@media (max-width: 860px) { .pricing-teaser { grid-template-columns: 1fr; } }

.closing-cta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 1.5rem 3rem;
  flex-direction: row;
  padding: clamp(1.8rem, 1rem + 3vw, 3.2rem);
}
.closing-cta > div:first-child { max-width: 52ch; }
.closing-cta p { color: var(--text-dim); }
.closing-cta .hero-actions { margin-top: 0; padding-top: 0; }

/* product page title + buy box pricing */
.product-title { display: flex; align-items: center; gap: 1.4rem; margin-bottom: 1rem; }
.product-title h1 { margin: 0.2rem 0 0.2rem; }
.product-title .showcase-tag { margin: 0; font-size: var(--step-1); }
.product-title .badge { margin-bottom: 0.3rem; }
@media (max-width: 560px) { .product-title { flex-direction: column; align-items: flex-start; } }
.price-label {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--accent-2);
  margin-bottom: 0.5rem;
}
.price-sub { color: var(--text-dim); margin-bottom: 0.3rem; }
.price-sub span { color: var(--text); font-weight: 600; }

/* price table */
.price-table-wrap {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0.4rem clamp(1rem, 0.6rem + 1.5vw, 2rem);
}
.price-table { width: 100%; border-collapse: collapse; }
.price-table th, .price-table td { text-align: left; padding: 1rem 0.6rem; border-bottom: 1px solid var(--border); }
.price-table tr:last-child th, .price-table tr:last-child td { border-bottom: 0; }
.price-table thead th { font-family: var(--font-mono); font-size: 0.72rem; font-weight: 400; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-faint); vertical-align: bottom; }
.price-table thead small { text-transform: none; letter-spacing: 0; }
.price-table td { font-weight: 600; }
.price-table td:last-child { text-align: right; font-weight: 500; }
.price-prod { display: inline-flex; align-items: center; gap: 0.8rem; color: var(--text); text-decoration: none; font-weight: 600; }
@media (max-width: 620px) {
  .price-table thead { display: none; }
  .price-table tr { display: grid; grid-template-columns: 1fr 1fr; padding: 0.8rem 0; border-bottom: 1px solid var(--border); }
  .price-table tr:last-child { border-bottom: 0; }
  .price-table th, .price-table td { border: 0; padding: 0.35rem 0.2rem; }
  .price-table th { grid-column: 1 / -1; }
  .price-table td[data-label]::before { content: attr(data-label); display: block; font-family: var(--font-mono); font-size: 0.68rem; font-weight: 400; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-faint); }
  .price-table td:last-child { grid-column: 1 / -1; text-align: left; }
}

/* catalogue: icon in the exhibit id column */
.exhibit-id .p-icon { margin-top: 0.2rem; }

/* ---------- prices: two options, table extras ---------- */
.price-options { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 0.9rem; }
.price-option {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 0.9rem 1rem;
  background: rgba(var(--wash), 0.02);
}
.price-option .price { font-size: clamp(1.6rem, 1.3rem + 1vw, 2.1rem); }
.price-option .price-sub { font-size: 0.86rem; margin: 0; }
.price-option .price-label { margin-bottom: 0.4rem; }
@media (max-width: 420px) { .price-options { grid-template-columns: 1fr; } }
.price-table td small, .price-prod small { display: block; font-weight: 500; font-size: 0.8rem; color: var(--text-faint); }
.price-prod small.dim { display: inline; margin-left: 0.3rem; }
.price-suite th, .price-suite td { background: rgba(var(--accent-rgb), 0.06); }
.price-suite .p-icon { --c: var(--accent); }
.showcase-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 0.6rem 1rem; }
.from-price { font-size: 0.9rem; color: var(--text-faint); }
.from-price strong { color: var(--text); }
.exhibit .actions .tag { order: -1; }
.suite-col small { white-space: nowrap; }

/* trial page: the issued licence key */
.field input.mono { font-family: var(--font-mono); letter-spacing: 0.06em; }
.trial-result { scroll-margin-top: 6rem; }
.trial-result h2 { font-size: var(--step-2); }
.licence-key {
  width: 100%;
  font-family: var(--font-mono);
  font-size: 0.85rem;
  line-height: 1.5;
  padding: 0.9em 1em;
  border: 1px solid var(--border-strong);
  border-radius: 14px;
  background: var(--bg);
  color: var(--text);
  word-break: break-all;
  resize: vertical;
}

/* a tick box with its label beside it (trial form) */
.field .check { display: flex; align-items: flex-start; gap: 0.6rem; cursor: pointer; }
.field .check input {
  flex: none;
  width: 1.1rem;
  height: 1.1rem;
  margin-top: 0.15rem;
  padding: 0;
  accent-color: var(--accent);
}

/* ---- /account: customers' licences (api/account.js) ---- */
.account h1 { font-size: var(--step-3); margin-bottom: 1rem; }
.account-licence { margin-top: 2rem; }
.account-licence h2 { margin-bottom: 0.75rem; }
.account-licence h3 { font-size: 1.05rem; margin: 2rem 0 0.5rem; }
.account-licence .hero-actions { margin: 1rem 0 1.5rem; }
.account .scroll { overflow-x: auto; }
.account-table { width: 100%; min-width: 44rem; border-collapse: collapse; font-size: 0.92rem; margin: 1rem 0; }
.account-table td.mono { white-space: nowrap; }
.account-table th, .account-table td { text-align: left; padding: 0.6rem 0.75rem 0.6rem 0; border-bottom: 1px solid var(--border); vertical-align: top; }
.account-table th { color: var(--text-faint); font-weight: 600; font-size: 0.8rem; }
.account .dim { color: var(--text-faint); }
.account textarea.key { width: 100%; min-width: 16rem; margin-top: 0.5rem; font: 0.8rem/1.45 var(--font-mono); word-break: break-all; background: var(--panel-2); color: var(--text); border: 1px solid var(--border); border-radius: 10px; padding: 0.6rem; }
.account summary { cursor: pointer; color: var(--accent-2); }
.account form.inline { display: inline; }
.account .btn-small { padding: 0.4rem 0.9rem; font-size: 0.85rem; }
.account .notice-bad { border-color: var(--bad); }
.account .link-button { background: none; border: 0; padding: 0; font: inherit; color: var(--accent-2); text-decoration: underline; cursor: pointer; }
.account .account-subhead { margin-top: 2.5rem; font-size: 1.2rem; }
.account .account-requests { color: var(--text-dim); padding-left: 1.2rem; }
.account .prose h2 { margin-top: 2.5rem; }
.account .account-licence h2 { font-size: var(--step-2); }

/* =========================================================
   Light and dark: the switch in the header (js/theme.js)
   ========================================================= */
.theme-switch { display: flex; flex-shrink: 0; padding: 3px; border-radius: var(--pill); border: 1px solid var(--border); background: rgba(var(--wash), 0.04); }
.theme-switch button { width: 32px; height: 32px; border: 0; border-radius: 50%; background: none; color: var(--text-faint); cursor: pointer; display: grid; place-items: center; }
.theme-switch button:hover { color: var(--text); }
.theme-switch button[aria-pressed="true"] { background: var(--panel); color: var(--focus); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15); }
.theme-switch svg { width: 16px; height: 16px; }
/* on phones the page simply follows the system setting, as the home page does */
@media (max-width: 760px) { .site-header .theme-switch { display: none; } }

/* =========================================================
   Decorative glass tiles and pills (hs-app-design, references/website.md):
   a pair in the empty side of a page's hero and, on product pages, one tile on
   the buy panel's corner. Never on screenshots, product cards or text; they
   hide on narrow screens and stand still with reduced motion.
   ========================================================= */
.hero { position: relative; }
.hero > .wrap { position: relative; }
.deco { position: absolute; top: 0; right: var(--gutter); width: min(34vw, 380px); height: 100%; pointer-events: none; z-index: 0; }
.hero .wrap > :not(.deco) { position: relative; z-index: 1; }
.deco-tile, .deco-pill, .deco-corner { position: absolute; display: block; pointer-events: none; }
.deco-tile, .deco-corner {
  border-radius: 22px; background: var(--deco-glass); border: 1px solid var(--deco-edge); box-shadow: var(--deco-shadow); overflow: hidden;
  -webkit-backdrop-filter: blur(12px) saturate(1.4); backdrop-filter: blur(12px) saturate(1.4);
}
.deco-tile::before, .deco-corner::before { content: ""; position: absolute; inset: 0; background: linear-gradient(120deg, transparent 22%, rgba(255, 255, 255, 0.5) 32%, transparent 40%); opacity: 0.7; }
.deco-pill { border-radius: var(--pill); box-shadow: inset 0 6px 8px rgba(255, 255, 255, 0.55), inset 0 -8px 12px rgba(0, 0, 0, 0.14), 0 18px 30px -14px rgba(28, 32, 35, 0.45); }
.deco-pill::after { content: ""; position: absolute; left: 14%; right: 30%; top: 16%; height: 22%; border-radius: var(--pill); background: rgba(255, 255, 255, 0.65); filter: blur(1.5px); }
.deco-pill.steel { background: linear-gradient(180deg, #d7e0e4, #9aaab2 60%, #6d7c84); }
.deco-pill.orange { background: linear-gradient(180deg, var(--obj-1), var(--obj-2) 45%, var(--obj-3) 70%, var(--obj-4)); }
/* three arrangements, so the pages don't all look the same */
.deco-a .deco-tile { width: 112px; height: 112px; right: 12%; top: 8%; --rot: -10deg; transform: rotate(-10deg); }
.deco-a .deco-pill { width: 150px; height: 46px; right: 38%; bottom: 10%; --rot: -22deg; transform: rotate(-22deg); }
.deco-b .deco-tile { width: 92px; height: 120px; right: 34%; top: 14%; --rot: 8deg; transform: rotate(8deg); }
.deco-b .deco-pill { width: 130px; height: 40px; right: 4%; bottom: 24%; --rot: 16deg; transform: rotate(16deg); }
.deco-c .deco-tile { width: 100px; height: 100px; right: 6%; bottom: 12%; --rot: 12deg; transform: rotate(12deg); }
.deco-c .deco-pill { width: 140px; height: 42px; right: 30%; top: 16%; --rot: -14deg; transform: rotate(-14deg); }
/* one tile over a panel's top-right corner */
.has-corner { position: relative; overflow: visible; }
.deco-corner { width: 78px; height: 78px; right: -26px; top: -28px; --rot: -10deg; transform: rotate(-10deg); z-index: 2; }
.deco-float { animation: deco-float 8s ease-in-out infinite; }
.deco-float.slow { animation-duration: 10s; animation-delay: -3s; }
@keyframes deco-float { 50% { transform: translateY(-12px) rotate(var(--rot, 0deg)); } }
@media (max-width: 1100px) { .deco { width: 28vw; } .deco-a .deco-pill, .deco-c .deco-pill { right: 46%; } }
@media (max-width: 900px) { .deco { display: none; } }
@media (max-width: 600px) { .deco-corner { width: 56px; height: 56px; right: -8px; top: -22px; } }
@media (prefers-reduced-motion: reduce) { .deco-float { animation: none; } }
html { overflow-x: clip; }

/* the HLS Software mark: a braille-like grid of dots (hs-app-design, design-system.md section 7). Inline SVG in the
   text colour, so it follows the theme; the orange dots are the brand orange in both themes. */
.logo { width: 2rem; height: 2rem; flex: none; display: block; color: var(--text); }