/* MapSorix Care website. Same tokens and look as the app (UI guidelines v2, Sept 16, 2026). */

@font-face {
  font-family: 'Atkinson Hyperlegible Next';
  font-style: normal; font-weight: 200 800; font-display: swap;
  src: url('/assets/fonts/atkinson-next.woff2') format('woff2-variations'), url('/assets/fonts/atkinson-next.woff2') format('woff2');
}

:root {
  --ink: #111827; --muted: #4b5563; --paper: #ffffff; --surface: #f3f4f6; --line: #e5e7eb;
  --primary: #1d4ed8; --on-primary: #ffffff;
  --done: #047857; --done-bg: #d1fae5; --due: #b45309; --due-bg: #fef3c7; --alert: #b91c1c; --alert-bg: #fee2e2;
  --primary-soft: color-mix(in srgb, var(--primary) 10%, var(--paper));
  --primary-hover: color-mix(in srgb, var(--primary) 88%, #000);
  --hover: color-mix(in srgb, var(--ink) 4%, var(--paper));
  --shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.06);
  --shadow-md: 0 1px 3px rgba(16, 24, 40, 0.08), 0 8px 24px rgba(16, 24, 40, 0.06);
  --shadow-shot: 0 24px 60px -12px rgba(16, 40, 56, 0.28), 0 4px 12px rgba(16, 24, 40, 0.08);
  --radius-sm: 10px; --radius: 16px;
  --ease: cubic-bezier(0.2, 0, 0, 1);
  color-scheme: light;
}
:root[data-theme='dark'] {
  --ink: #f0f2f5; --muted: #9ca3af; --paper: #1c1f24; --surface: #121417; --line: #2f353d;
  --primary: #60a5fa; --on-primary: #0a192f;
  --done: #4ade80; --done-bg: #132a1a; --due: #f59e0b; --due-bg: #2d2008; --alert: #f87171; --alert-bg: #2e1212;
  --primary-soft: color-mix(in srgb, var(--primary) 14%, var(--paper));
  --primary-hover: color-mix(in srgb, var(--primary) 88%, #fff);
  --hover: color-mix(in srgb, var(--ink) 6%, var(--paper));
  --shadow-sm: none; --shadow-md: none;
  --shadow-shot: 0 0 0 1px var(--line), 0 24px 60px -12px rgba(0, 0, 0, 0.6);
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0; font-family: 'Atkinson Hyperlegible Next', 'Atkinson Hyperlegible', system-ui, sans-serif;
  font-size: 18px; line-height: 1.6; color: var(--ink); background: var(--paper);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; scroll-behavior: auto !important; } }

a { color: var(--primary); text-underline-offset: 3px; }
:focus-visible { outline: 3px solid var(--primary); outline-offset: 3px; border-radius: 6px; }
img { max-width: 100%; height: auto; display: block; }
.icon { flex: none; width: 1.2em; height: 1.2em; }
h1, h2, h3 { line-height: 1.15; margin: 0 0 16px; letter-spacing: -0.02em; }
h1 { font-size: clamp(36px, 5.2vw, 56px); font-weight: 750; }
h2 { font-size: clamp(26px, 3.4vw, 36px); font-weight: 700; }
h3 { font-size: 21px; font-weight: 650; letter-spacing: -0.01em; }
/* An <h2> set at the <h3> size: a sub-heading straight under the page's <h1> (the hero's "What happens
   next", the security page's cards) is second level to a screen reader, whatever size it looks. */
h2.h3 { font-size: 21px; font-weight: 650; letter-spacing: -0.01em; }
p { margin: 0 0 16px; max-width: 68ch; }
.lead { font-size: clamp(19px, 2vw, 21px); color: var(--muted); }
.muted { color: var(--muted); }
.fine { font-size: 15px; color: var(--muted); max-width: none; }

.wrap { max-width: 1180px; margin: 0 auto; padding: 0 24px; }
.skip { position: absolute; left: -9999px; }
.skip:focus { left: 16px; top: 16px; background: var(--paper); padding: 12px 16px; z-index: 50; border-radius: var(--radius-sm); }

/* Header */
.site-header {
  position: sticky;
  top: 14px;
  z-index: 50;
  padding: 0 20px;
  transition: padding 200ms var(--ease), top 200ms var(--ease);
}
.header-row {
  max-width: 1180px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 64px;
  padding: 8px 16px 8px 12px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--paper) 86%, transparent);
  backdrop-filter: blur(18px) saturate(1.7);
  -webkit-backdrop-filter: blur(18px) saturate(1.7);
  border: 1px solid color-mix(in srgb, var(--line) 85%, transparent);
  box-shadow: 0 8px 30px rgba(15, 23, 42, 0.07), 0 1px 3px rgba(15, 23, 42, 0.04);
}
:root[data-theme='dark'] .header-row {
  background: color-mix(in srgb, var(--paper) 82%, transparent);
  border-color: color-mix(in srgb, var(--line) 60%, rgba(255, 255, 255, 0.08));
  box-shadow: 0 10px 32px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(255, 255, 255, 0.06);
}
.brand {
  display: inline-flex;
  align-items: center;
  /* A gloved finger needs 44px, and the brand is the way back to the home page. */
  min-height: 44px;
  gap: 12px;
  font-weight: 700;
  text-decoration: none;
  margin: 0;
  flex-shrink: 0;
}
.brand-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 11px;
  flex-shrink: 0;
}
.brand-mark .brand-logo-img,
.brand-mark img,
.brand-mark .icon {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}
/* "MapSorix Care" on one line, both words the same size, never wrapped (UI_GUIDELINES.md 6b). */
.brand-name {
  font-size: 18px;
  font-weight: 750;
  letter-spacing: -0.02em;
  line-height: 1.15;
  white-space: nowrap;
  color: var(--ink);
}
.header-nav-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1 1 auto;
  justify-content: flex-end;
  min-width: 0;
}
.site-header nav { min-width: 0; }
.nav-container {
  position: relative;
  display: flex;
  align-items: center;
  min-width: 0;
}
.nav-indicator {
  position: absolute;
  top: 0;
  left: 0;
  height: 44px;
  border-radius: 999px;
  background: var(--primary-soft);
  pointer-events: none;
  z-index: 0;
  opacity: 0;
  transform: translate3d(0, 0, 0);
  transition: transform 220ms var(--ease), width 220ms var(--ease), height 220ms var(--ease), opacity 180ms var(--ease);
  will-change: transform, width, height, opacity;
}
.nav {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 4px 6px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.theme-toggle-btn {
  position: relative;
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  min-width: 44px;
  min-height: 44px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: var(--paper);
  color: var(--ink);
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  flex-shrink: 0;
  padding: 0;
  margin-left: 4px;
  transition: background-color 150ms var(--ease), border-color 150ms var(--ease), transform 150ms var(--ease), color 150ms var(--ease), box-shadow 150ms var(--ease);
}
.theme-toggle-btn:hover {
  background: var(--hover);
  border-color: var(--primary);
  color: var(--primary);
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}
.theme-toggle-btn:active {
  transform: translateY(1px);
}
.theme-toggle-btn .theme-icon {
  grid-area: 1 / 1;
  display: grid;
  place-items: center;
  transition: opacity 220ms var(--ease), transform 220ms var(--ease);
}
.theme-toggle-btn .icon {
  width: 19px;
  height: 19px;
}
:root:not([data-theme='dark']) .theme-toggle-btn .icon-sun {
  opacity: 0;
  transform: rotate(-90deg) scale(0.5);
  pointer-events: none;
}
:root:not([data-theme='dark']) .theme-toggle-btn .icon-moon {
  opacity: 1;
  transform: rotate(0deg) scale(1);
}
:root[data-theme='dark'] .theme-toggle-btn .icon-sun {
  opacity: 1;
  transform: rotate(0deg) scale(1);
}
:root[data-theme='dark'] .theme-toggle-btn .icon-moon {
  opacity: 0;
  transform: rotate(90deg) scale(0.5);
  pointer-events: none;
}
.nav a {
  position: relative;
  z-index: 1;
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px; border-radius: 999px;
  color: var(--ink); text-decoration: none; font-size: 14.5px; font-weight: 550;
  transition: background-color 150ms var(--ease), color 150ms var(--ease), transform 120ms var(--ease);
}
.nav a:hover {
  color: var(--primary);
  background: var(--primary-soft);
}
.nav a[aria-current='page'] {
  color: var(--primary);
  background: var(--primary-soft);
  font-weight: 650;
}
.nav-container.has-indicator .nav a:not(.nav-signin) {
  background: transparent;
}
.nav-container.has-indicator .nav a:not(.nav-signin):hover,
.nav-container.has-indicator .nav a[aria-current='page'] {
  color: var(--primary);
}
.nav a.nav-cta {
  background: var(--primary); color: var(--on-primary); font-weight: 650;
  box-shadow: 0 2px 8px color-mix(in srgb, var(--primary) 30%, transparent);
}
.nav a.nav-cta:hover { background: var(--primary-hover); transform: translateY(-1px); }
.nav a.nav-signin {
  border: 1px solid var(--line); background: var(--paper); font-weight: 650;
  box-shadow: var(--shadow-sm);
}
.nav a.nav-signin:hover { border-color: var(--primary); color: var(--primary); }
.nav a.nav-signin .icon { width: 17px; height: 17px; }

/* Buttons */
.actions { display: flex; flex-wrap: wrap; gap: 14px; margin: 28px 0 16px; }
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 50px; padding: 12px 24px;
  border-radius: 12px; font-weight: 650; font-size: 15.5px; text-decoration: none; border: 1px solid var(--line); color: var(--ink); background: var(--paper);
  box-shadow: var(--shadow-sm);
  transition: background-color 150ms var(--ease), border-color 150ms var(--ease), transform 120ms var(--ease), box-shadow 150ms var(--ease);
}
.btn:hover { border-color: color-mix(in srgb, var(--ink) 25%, var(--line)); background: var(--hover); transform: translateY(-1px); }
.btn:active { transform: translateY(1px); }
.btn .icon { width: 19px; height: 19px; transition: transform 150ms var(--ease); }
.btn:hover .icon { transform: translateX(3px); }
.btn-primary { background: var(--primary); color: var(--on-primary); border-color: var(--primary); box-shadow: 0 4px 14px color-mix(in srgb, var(--primary) 35%, transparent); }
.btn-primary:hover { background: var(--primary-hover); border-color: var(--primary-hover); box-shadow: 0 6px 20px color-mix(in srgb, var(--primary) 45%, transparent); }
.btn-hero { min-height: 52px; padding: 13px 26px; border-radius: 14px; font-size: 16px; }

/* Theme switch (footer) */
.theme { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px; margin: 24px 0 16px; padding: 4px; border-radius: 12px; background: var(--paper); border: 1px solid var(--line); }
.theme .fine { margin: 0 6px 0 8px; }
.theme button {
  min-height: 40px; padding: 4px 12px; font: inherit; font-size: 15px; font-weight: 600; color: var(--muted);
  background: transparent; border: 0; border-radius: 9px; cursor: pointer;
}
.theme button[aria-pressed='true'] { background: var(--primary-soft); color: var(--primary); }

/* Sections */
section { padding: 88px 0; }
section.alt { background: var(--surface); }
.hero { padding: 72px 0 64px; }
.hero-home {
  padding: 68px 0 88px;
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(800px 500px at 80% 25%, color-mix(in srgb, var(--primary) 10%, transparent), transparent 70%),
    radial-gradient(600px 500px at 10% 85%, color-mix(in srgb, var(--primary) 6%, transparent), transparent 70%),
    var(--paper);
}
.hero-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1.15fr); gap: 48px; align-items: center; }

/* Beacon Pill */
.beacon-pill {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 6px 14px 6px 11px;
  margin-bottom: 22px;
  border-radius: 999px;
  font-size: 13.5px;
  font-weight: 650;
  color: var(--primary);
  background: color-mix(in srgb, var(--primary) 10%, var(--paper));
  border: 1px solid color-mix(in srgb, var(--primary) 22%, transparent);
}
.beacon-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--primary);
  display: inline-block;
  box-shadow: 0 0 0 0 color-mix(in srgb, var(--primary) 50%, transparent);
  animation: beacon-pulse 2s infinite cubic-bezier(0.4, 0, 0.6, 1);
}
@keyframes beacon-pulse {
  0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--primary) 50%, transparent); }
  70% { box-shadow: 0 0 0 8px transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}

.hero-home h1 {
  font-size: clamp(34px, 3.8vw, 50px);
  font-weight: 800;
  line-height: 1.14;
  letter-spacing: -0.025em;
  margin: 0 0 20px;
  color: var(--ink);
}
.hero-home .lead {
  font-size: clamp(17px, 1.7vw, 19.5px);
  line-height: 1.56;
  color: var(--muted);
  margin: 0 0 28px;
  max-width: 54ch;
}
.section-head { max-width: 760px; margin-bottom: 48px; }

/* Trust Capsules */
.trust-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 32px;
  padding-top: 24px;
  border-top: 1px solid color-mix(in srgb, var(--line) 70%, transparent);
}
.trust-pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 14px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--surface) 80%, var(--paper));
  border: 1px solid var(--line);
  font-size: 13.5px;
  font-weight: 600;
  color: var(--muted);
  transition: all 180ms var(--ease);
}
.trust-pill:hover {
  color: var(--ink);
  border-color: color-mix(in srgb, var(--primary) 35%, var(--line));
  transform: translateY(-1px);
}
.trust-pill .icon {
  width: 16px;
  height: 16px;
  color: var(--primary);
  flex-shrink: 0;
}

/* The 90-second video in the home page hero (home.js puts the play button on its cover) */
.hero-video {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  background: #0b0f19;
  box-shadow: 0 25px 60px -15px rgba(15, 23, 42, 0.28), 0 0 0 1px var(--line);
}
:root[data-theme='dark'] .hero-video { box-shadow: 0 25px 70px -15px rgba(0, 0, 0, 0.65), 0 0 0 1px rgba(255, 255, 255, 0.1); }
.hero-video video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; }
/* Bottom left, where the cover is empty, so it hides none of the app on the tablet */
.video-play {
  position: absolute;
  left: 6%;
  bottom: 8%;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  padding: 6px 20px 6px 6px;
  border: 0;
  border-radius: 999px;
  font: inherit;
  font-size: 15px;
  font-weight: 700;
  color: var(--on-primary);
  background: var(--primary);
  box-shadow: 0 10px 26px -6px color-mix(in srgb, var(--primary) 60%, transparent);
  cursor: pointer;
  transition: transform 160ms var(--ease), box-shadow 160ms var(--ease);
}
.video-play[hidden] { display: none; }
.video-play .icon { width: 36px; height: 36px; padding: 10px 9px 10px 11px; border-radius: 50%; background: color-mix(in srgb, var(--on-primary) 20%, transparent); }
.video-play:hover { transform: translateY(-1px); box-shadow: 0 14px 30px -6px color-mix(in srgb, var(--primary) 70%, transparent); }

figure { margin: 0; }
.shot { border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: var(--surface); box-shadow: var(--shadow-shot); }
.shot img { width: 100%; }
figcaption { font-size: 15px; color: var(--muted); padding: 10px 16px; border-top: 1px solid var(--line); background: var(--paper); }
/* Show the screenshot that matches the site theme */
:root[data-theme='dark'] .shot-light, :root:not([data-theme='dark']) .shot-dark { display: none; }

.grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.card {
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 32px;
  box-shadow: var(--shadow-sm); transition: box-shadow 180ms var(--ease), transform 180ms var(--ease), border-color 180ms var(--ease);
}
.grid-3 .card:hover, .grid-2 .card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); border-color: color-mix(in srgb, var(--primary) 25%, var(--line)); }
.card h3 { margin-bottom: 10px; }
.card h2 { font-size: clamp(24px, 2.6vw, 30px); }
.card h2.h3 { font-size: 21px; margin-bottom: 10px; }
.card p:last-child, .card ul:last-child { margin-bottom: 0; }
.icon-tile {
  display: grid; place-items: center; width: 48px; height: 48px; margin-bottom: 20px; border-radius: 12px;
  background: var(--primary-soft); color: var(--primary);
}
.icon-tile .icon { width: 24px; height: 24px; }

.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; align-items: center; }
.ticks { list-style: none; padding: 0; margin: 0 0 20px; }
.ticks li { position: relative; padding-left: 36px; margin-bottom: 12px; line-height: 1.5; }
.ticks li::before {
  content: ''; position: absolute; left: 0; top: 3px; width: 22px; height: 22px; border-radius: 50%;
  background-color: var(--done-bg);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23047857' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
  background-position: center;
  background-size: 13px 13px;
  background-repeat: no-repeat;
}
:root[data-theme='dark'] .ticks li::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234ade80' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
}

.ticks-icons li {
  padding-left: 0;
  display: flex;
  align-items: flex-start;
  gap: 12px;
}
.ticks-icons li::before {
  display: none;
}

/* Feature list with status words (never colour alone) */
.module { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 16px; padding: 20px 0; border-bottom: 1px solid var(--line); align-items: start; }
.module:first-child { padding-top: 0; }
.module:last-child { border-bottom: 0; padding-bottom: 0; }
.module h3 { font-size: 20px; margin: 0 0 6px; }
.module p { margin: 0; color: var(--muted); }
.tag { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; padding: 4px 12px; border-radius: 999px; font-weight: 650; font-size: 15px; }
.tag::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.tag-ready { color: var(--done); background: var(--done-bg); }
.tag-planned { color: var(--muted); background: var(--surface); border: 1px solid var(--line); }
.legend { display: flex; flex-wrap: wrap; gap: 12px 16px; align-items: center; margin-bottom: 24px; }

/* Stats Ribbon */
.stats-ribbon {
  padding: 36px 0;
  background: var(--surface);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px;
}
.stat-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 6px 18px;
  border-left: 3px solid color-mix(in srgb, var(--primary) 45%, transparent);
}
.stat-number {
  font-size: clamp(26px, 3vw, 36px);
  font-weight: 850;
  letter-spacing: -0.03em;
  color: var(--primary);
  line-height: 1.1;
  margin-bottom: 4px;
}
.stat-label {
  font-size: 15px;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 2px;
}
.stat-sub {
  font-size: 13px;
  color: var(--muted);
  line-height: 1.35;
}

/* Comparison Section */
.comparison-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 28px;
  margin-top: 36px;
}
.compare-card {
  background: var(--paper);
  border-radius: var(--radius);
  border: 1px solid var(--line);
  padding: 36px;
  box-shadow: var(--shadow-sm);
  transition: transform 180ms var(--ease), box-shadow 180ms var(--ease);
}
.compare-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}
.compare-old {
  border-top: 4px solid var(--alert);
}
.compare-new {
  border-top: 4px solid var(--done);
  position: relative;
}
.compare-header {
  margin-bottom: 24px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--line);
}
.compare-badge {
  display: inline-block;
  font-size: 11.5px;
  font-weight: 750;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 4px 10px;
  border-radius: 999px;
  margin-bottom: 10px;
}
.badge-old {
  background: var(--alert-bg);
  color: var(--alert);
}
.badge-new {
  background: var(--done-bg);
  color: var(--done);
}
.compare-card h3 {
  font-size: 21px;
  margin: 0;
}
.compare-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.compare-list li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 15px;
  line-height: 1.5;
  color: var(--ink);
}
.compare-icon {
  display: inline-grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  flex-shrink: 0;
  margin-top: 2px;
}
.compare-icon .icon {
  width: 13px;
  height: 13px;
}
.icon-cross {
  background: var(--alert-bg);
  color: var(--alert);
}
.icon-check {
  background: var(--done-bg);
  color: var(--done);
}

/* Modern CTA Banner */
.cta-banner {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 0.85fr);
  gap: 40px;
  align-items: center;
  padding: 48px 48px;
  border-radius: 24px;
  border: 1px solid color-mix(in srgb, var(--primary) 25%, var(--line));
  background: linear-gradient(135deg, color-mix(in srgb, var(--primary-soft) 85%, var(--paper)), var(--paper) 70%);
  box-shadow: 0 20px 40px -15px rgba(15, 23, 42, 0.08);
}
:root[data-theme='dark'] .cta-banner {
  background: linear-gradient(135deg, color-mix(in srgb, var(--primary) 14%, var(--paper)), var(--paper) 70%);
  border-color: color-mix(in srgb, var(--primary) 30%, var(--line));
  box-shadow: 0 20px 40px -15px rgba(0, 0, 0, 0.5);
}
.cta-banner h2 {
  font-size: clamp(26px, 2.6vw, 34px);
  margin: 14px 0 14px;
  letter-spacing: -0.02em;
}
.cta-banner .lead {
  font-size: 17px;
  color: var(--muted);
  margin-bottom: 22px;
}
.cta-reassurance {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 20px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink);
}
.cta-reassurance span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.cta-reassurance .icon {
  width: 15px;
  height: 15px;
  color: var(--done);
}
.cta-side {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
}
.cta-side .fine a {
  color: var(--primary);
  text-decoration: underline;
}

dl.qa dt { font-weight: 650; margin-top: 28px; }
dl.qa dd { margin: 6px 0 0; max-width: 68ch; }

/* QA Accordions */
.qa-accordion {
  margin: 28px 0 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.qa-item {
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--paper);
  overflow: hidden;
  transition: border-color 150ms var(--ease), box-shadow 150ms var(--ease);
}
.qa-item[open] {
  border-color: color-mix(in srgb, var(--primary) 40%, var(--line));
  box-shadow: var(--shadow-sm);
}
.qa-q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  font-weight: 650;
  font-size: 18px;
  color: var(--ink);
  cursor: pointer;
  list-style: none;
  user-select: none;
}
.qa-q::-webkit-details-marker {
  display: none;
}
.qa-q::after {
  content: '';
  width: 9px;
  height: 9px;
  border-right: 2px solid var(--muted);
  border-bottom: 2px solid var(--muted);
  transform: rotate(45deg);
  transition: transform 180ms var(--ease), border-color 180ms var(--ease);
  flex-shrink: 0;
  margin-left: 16px;
}
.qa-item[open] .qa-q::after {
  transform: rotate(-135deg);
  border-color: var(--primary);
}
.qa-a {
  padding: 0 20px 18px;
  color: var(--muted);
  font-size: 16.5px;
  line-height: 1.6;
}
.qa-a p {
  margin: 0;
  max-width: 68ch;
}
.qa-a p + p {
  margin-top: 10px;
}

/* Footer */
.site-footer { border-top: 1px solid var(--line); background: var(--surface); padding: 56px 0 28px; }
.footer-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 32px; }
.site-footer .brand { margin-bottom: 12px; }
/* The company credit carries the MapSorix leaf, the company's mark; the product keeps its own above. */
.footer-maker { display: flex; align-items: center; gap: 8px; }
.footer-maker img { width: 22px; height: 22px; flex-shrink: 0; }
.footer-links { list-style: none; margin: 0; padding: 0; columns: 2; }
.footer-links li { break-inside: avoid; }
.footer-links a { display: inline-flex; min-height: 44px; min-width: 44px; align-items: center; color: var(--ink); text-decoration: none; font-weight: 550; }
.footer-links a:hover { color: var(--primary); text-decoration: underline; }
.footer-bottom { margin-top: 24px; padding-top: 8px; border-top: 1px solid var(--line); }

@media (max-width: 960px) {
  .site-header { padding: 0 16px; top: 8px; }
  .header-row { border-radius: 20px; }
  .nav li:nth-last-child(2) { margin-left: 0; }
}
@media (max-width: 900px) {
  .hero-grid, .split, .grid-2, .grid-3, .footer-grid { grid-template-columns: minmax(0, 1fr); }
  .stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
  .comparison-grid { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .cta-banner { grid-template-columns: minmax(0, 1fr); padding: 36px 28px; gap: 28px; }
  section { padding: 56px 0; }
  .hero-home { padding: 44px 0 64px; }
  .card, .cta .card { padding: 24px; }
  .hero-video { max-width: 640px; margin: 0 auto; }
}
@media (max-width: 640px) {
  .site-header { padding: 0 10px; top: 6px; }
  .header-row { border-radius: 16px; padding: 8px 12px; }
  /* A round play button in the middle: the words would cover most of a phone-sized cover. They stay for screen readers. */
  .video-play { left: 50%; bottom: 50%; transform: translate(-50%, 50%); min-height: 64px; padding: 6px; }
  .video-play:hover { transform: translate(-50%, 50%); }
  .video-play .icon { width: 52px; height: 52px; padding: 15px 13px 15px 17px; }
  .video-play span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .stats-grid { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .compare-card { padding: 24px; }
  .cta-banner { padding: 28px 20px; }
}
/* Phones and narrow tablets: the name and the theme switch share the top row and the links get a row
   of their own, on one line, scrolling sideways when they don't fit. Without it the links piled up
   beside the name and the sticky header grew to a third of a phone's screen. */
@media (max-width: 900px) {
  .header-row { flex-wrap: wrap; row-gap: 2px; border-radius: 22px; padding: 6px 10px 6px 12px; }
  .header-nav-wrap { display: contents; }
  .theme-toggle-btn { order: 2; margin-left: auto; }
  .site-header nav { order: 3; flex: 1 1 100%; }
  /* The right edge fades out, so a row that runs past the screen shows there is more to swipe to;
     the padding lets the last link scroll clear of the fade. */
  .nav-container {
    overflow-x: auto; scrollbar-width: none; margin: 0 -4px; padding: 0 4px;
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent);
    mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent);
  }
  .nav-container::-webkit-scrollbar { display: none; }
  .nav { flex-wrap: nowrap; justify-content: flex-start; padding-right: 28px; }
  .nav a { white-space: nowrap; }
  /* The sliding highlight measures positions that move as the row scrolls, so the current page is
     marked by its own background instead. */
  .nav-indicator { display: none; }
  .nav-container.has-indicator .nav a[aria-current='page'] { background: var(--primary-soft); }
}
@media (max-width: 520px) {
  .wrap { padding: 0 16px; }
  .module { grid-template-columns: minmax(0, 1fr); }
  .footer-links { columns: 1; }
  .nav a { padding: 0 10px; font-size: 14px; }
}

@media print {
  .site-header nav, .theme-toggle-btn, .theme, .actions { display: none; }
  .site-header { position: static; }
  :root, :root[data-theme='dark'] { --ink: #000; --muted: #333; --paper: #fff; --surface: #fff; --shadow-shot: none; --shadow-sm: none; --shadow-md: none; }
}

/* Book a demo form */
.contact-split { align-items: start; }
.contact-card h2 { margin-bottom: 6px; }
.contact-form .muted { margin-bottom: 20px; }
.form-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 16px; align-items: end; }
.form-field { display: block; margin-bottom: 16px; }
.form-field > span { display: block; font-size: 16px; font-weight: 600; margin-bottom: 6px; }
/* A required field's red star; screen readers hear the hidden "(required)" instead. */
.req::after { content: '*'; content: '*' / ''; color: var(--alert); font-weight: 700; }
.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; }
.form-field input, .form-field textarea {
  width: 100%; min-height: 48px; padding: 10px 14px; border-radius: var(--radius-sm);
  border: 1px solid color-mix(in srgb, var(--ink) 40%, var(--paper)); background: var(--paper); color: var(--ink);
  font: inherit; font-size: 17px;
}
.form-field textarea { min-height: 128px; resize: vertical; }
.form-field input:focus-visible, .form-field textarea:focus-visible { outline: 3px solid var(--primary); outline-offset: 1px; border-color: var(--primary); }
.form-warning { font-size: 15px; font-weight: 600; color: var(--due); margin: -4px 0 16px; }
.form-trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-check { display: flex; align-items: flex-start; gap: 12px; min-height: 48px; margin-bottom: 12px; font-size: 16px; cursor: pointer; }
.form-check input { width: 24px; height: 24px; margin: 2px 0 0; accent-color: var(--primary); flex: none; }
.form-status { min-height: 1.6em; margin: 0 0 12px; font-weight: 600; }
.form-status.is-error { color: var(--alert); }
.form-submit { width: 100%; justify-content: center; }
.form-submit:disabled { opacity: 0.6; cursor: progress; }
.contact-form .fine { margin: 14px 0 0; }
.contact-done:focus { outline: none; }
@media (max-width: 640px) {
  .form-row { grid-template-columns: minmax(0, 1fr); }
  .contact-card { padding: 24px 18px; }
}
.form-submit { font-family: inherit; cursor: pointer; }
[hidden] { display: none !important; }

/* Pricing */
.price-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; margin-top: 28px; }
.price-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.price-card {
  position: relative; display: flex; flex-direction: column; gap: 6px; padding: 28px 24px;
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-sm);
}
.price-card h3 { margin: 0; font-size: 22px; }
.price-card .btn { margin-top: auto; width: 100%; font-family: inherit; }
.price-card .price-ticks { margin: 12px 0 20px; }
.price-card .price-ticks li { font-size: 16px; }
.price-card { cursor: pointer; transition: border-color 150ms ease, box-shadow 150ms ease; }
.price-card.is-selected { border: 2px solid var(--primary); box-shadow: var(--shadow-md); }
.cycle-toggle { display: inline-flex; gap: 4px; padding: 4px; margin: 16px 0 8px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line); align-self: flex-start; }
.cycle-btn { min-height: 44px; min-width: 96px; padding: 8px 16px; border: 0; border-radius: 999px; background: transparent; color: var(--muted); font: inherit; font-weight: 700; font-size: 15px; cursor: pointer; }
.cycle-btn[aria-pressed="true"] { background: var(--paper); color: var(--ink); box-shadow: var(--shadow-sm); outline: 1px solid var(--line); }
.cycle-btn:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.price-card.is-selected .price-buy { background: var(--primary); border-color: var(--primary); color: var(--on-primary); }
.price-flag {
  position: absolute; top: -14px; left: 24px; margin: 0; padding: 3px 12px; border-radius: 999px;
  background: var(--primary); color: var(--on-primary); font-size: 14px; font-weight: 700;
}
.price-size { margin: 0; color: var(--muted); font-size: 16px; min-height: 2.9em; }
.price { margin: 8px 0 20px; display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px; }
.price-amount { font-size: 38px; font-weight: 800; letter-spacing: -0.02em; line-height: 1.1; font-variant-numeric: tabular-nums; }
.price-quote { font-size: 28px; }
.price-term { color: var(--muted); font-size: 16px; font-weight: 600; }
.price-included {
  margin-top: 24px; padding: 24px 28px; border-radius: var(--radius); border: 1px solid var(--line); background: var(--paper);
}
.price-included h3 { margin: 0 0 12px; font-size: 19px; }
.price-included .price-ticks { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px 24px; margin: 0 0 12px; }
.price-included .price-ticks li { font-size: 16px; }
.price-more { margin: 20px 0 0; font-weight: 600; }
.price-list { margin: 0 0 16px; }
.price-list dt { font-weight: 700; margin-top: 12px; }
.price-list dd { margin: 4px 0 0; }
.partner-card { display: flex; align-items: flex-start; gap: 24px; }
.partner-card .icon-tile { flex: none; }
@media (max-width: 1100px) {
  .price-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 28px; }
  .price-grid-3 { grid-template-columns: minmax(0, 1fr); max-width: 560px; }
  .price-included .price-ticks { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .price-grid { grid-template-columns: minmax(0, 1fr); }
  .price-included { padding: 20px 18px; }
  .price-included .price-ticks { grid-template-columns: minmax(0, 1fr); }
  .price-size { min-height: 0; }
  .partner-card { flex-direction: column; gap: 12px; }
}
.price-yearly { margin: -14px 0 20px; color: var(--muted); font-size: 15px; min-height: 1.5em; }
.price-group { margin: 20px 0 0; font-size: 17px; }
/* The first payment, beside the price */
.price-today { margin: 0 0 8px; font-weight: 650; }
.offer-banner {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px 32px;
  padding: 32px; border-radius: var(--radius); border: 2px solid var(--primary); background: var(--primary-soft);
}
.offer-banner h2 { margin: 0 0 8px; font-size: clamp(24px, 2.6vw, 30px); }
.offer-banner p { margin: 0; }
.offer-label { font-size: 15px; font-weight: 700; color: var(--primary); text-transform: none; margin-bottom: 6px !important; }
@media (min-width: 1101px) { .price-grid-3 { max-width: none; } }
@media (max-width: 640px) { .offer-banner { padding: 24px 18px; } .offer-banner .btn { width: 100%; } }

/* Founding licence, in full: the terms, what costs extra, and how many are left */
.offer-full { display: block; }
.hero + section.founding { padding-top: 0; }
.offer-head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 20px 32px; }
.offer-head > div { flex: 1 1 420px; }
.offer-head h2 { margin-bottom: 10px; }
.offer-count {
  flex: 0 0 auto; display: flex; flex-direction: column; gap: 2px; margin: 0; padding: 16px 20px;
  border-radius: var(--radius); background: var(--paper); border: 1px solid var(--line);
}
.offer-count-number { font-size: 32px; font-weight: 700; line-height: 1.1; color: var(--ink); }
.offer-count-label { font-size: 16px; font-weight: 600; color: var(--ink); }
.offer-columns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 40px; margin-top: 28px; }
.offer-columns h3 { margin: 0 0 12px; }
.offer-columns .ticks { margin-bottom: 0; }
.offer-list { margin: 0; padding-left: 20px; }
.offer-list li { margin-bottom: 10px; line-height: 1.5; }
.offer-list li:last-child { margin-bottom: 0; }
.offer-full > .btn { margin-top: 28px; }
@media (max-width: 800px) { .offer-columns { grid-template-columns: 1fr; } .offer-count { width: 100%; } }

.offer-roi {
  background: var(--paper);
  border: 1px solid color-mix(in srgb, var(--primary) 30%, var(--line));
  border-radius: var(--radius-sm);
  padding: 20px 24px;
  margin-top: 24px;
}
.offer-roi h3 {
  margin: 0 0 8px;
  font-size: 18px;
  font-weight: 700;
  color: var(--primary);
}
.offer-roi p {
  margin: 0;
  font-size: 16px;
  color: var(--ink);
  line-height: 1.55;
}

/* Contact form: field flagged by the check before sending */
.form-field [aria-invalid="true"] { border-color: var(--alert); box-shadow: 0 0 0 1px var(--alert); }

/* Buy page */
.form-choice { border: 0; padding: 0; margin: 0 0 16px; }
.form-choice legend { font-size: 16px; font-weight: 600; margin-bottom: 6px; }
.choice { display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 8px 12px; margin-bottom: 8px; border: 1px solid var(--line); border-radius: var(--radius-sm); cursor: pointer; }
.choice:has(input:checked) { border-color: var(--primary); background: var(--primary-soft); }
.choice input { width: 22px; height: 22px; accent-color: var(--primary); flex: none; }
.buy-total { font-weight: 700; margin: 0 0 24px; }
.steps-list { padding-left: 1.3em; }
.steps-list li { margin-bottom: 8px; }
.buy-done h2 { margin-top: 0; }

/* Pricing calculator (per licensed bed): full width, bands on the left, calculator on the right.
   Stacks on narrow screens so nothing is squeezed. */
.price-calc {
  display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 0;
  padding: 0; overflow: hidden;
}
.price-calc-bands, .price-calc-quote { padding: 28px 32px; min-width: 0; }
.price-calc-quote { border-left: 1px solid var(--line); display: flex; flex-direction: column; }
.price-calc-quote .cycle-toggle { margin-top: 4px; }
.price-calc .price-beds { max-width: none; margin-top: 8px; }
.bed-presets {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin: 10px 0 8px;
}
.bed-presets .fine {
  margin: 0 4px 0 0;
  font-weight: 600;
}
.bed-preset-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* 44px: the smallest target a finger can hit reliably (WCAG 2.5.5), as for every other control. */
  min-height: 44px;
  padding: 4px 10px;
  font: inherit;
  font-size: 13.5px;
  font-weight: 600;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: var(--paper);
  color: var(--ink);
  cursor: pointer;
  transition: background-color 120ms var(--ease), border-color 120ms var(--ease), color 120ms var(--ease);
}
.bed-preset-btn:hover {
  border-color: var(--primary);
  color: var(--primary);
  background: var(--primary-soft);
}
.bed-preset-btn.is-active {
  border-color: var(--primary);
  background: var(--primary);
  color: var(--on-primary);
}
.price-savings {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: -4px 0 12px;
  padding: 6px 12px;
  font-size: 14.5px;
  font-weight: 650;
  color: var(--done);
  background: var(--done-bg);
  border-radius: 8px;
}
.price-calc .price { margin-bottom: 8px; }
.price-calc .price-buy { width: 100%; margin-top: auto; }
.price-calc #price-note { margin-bottom: 20px; }
.price-calc .price-tiers { margin-top: 12px; }
.price-calc .price-calc-bands .fine { margin-bottom: 0; }
@media (max-width: 900px) {
  .price-calc { grid-template-columns: minmax(0, 1fr); }
  .price-calc-quote { border-left: 0; border-top: 1px solid var(--line); }
}
@media (max-width: 640px) {
  .price-calc-bands, .price-calc-quote { padding: 22px 18px; }
}

/* Graduated price bands */
.price-tiers { width: 100%; border-collapse: collapse; margin: 16px 0 8px; font-size: 16px; }
.price-tiers caption { text-align: left; font-weight: 700; padding-bottom: 8px; }
.price-tiers th, .price-tiers td { text-align: left; padding: 8px 12px 8px 0; border-bottom: 1px solid var(--line); }
.price-tiers th { font-weight: 700; color: var(--muted); font-size: 15px; }
.price-tiers td { font-variant-numeric: tabular-nums; }

/* Help: one readable column, steps a care aide can follow on a tablet. */
.wrap.narrow { max-width: 760px; }
section.help-hero { padding-bottom: 24px; }
section.help-article { padding-top: 24px; }
.help-article h2 { font-size: clamp(22px, 2.6vw, 28px); margin-top: 48px; }
.help-article h2:first-child { margin-top: 0; }
.help-article ol, .help-article ul:not(.help-list) { padding-left: 1.4em; }
.help-article li { margin: 0 0 10px; }
.help-article .shot { margin: 24px 0; }
.help-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.help-list li { margin: 0; }
.help-list h3 { font-size: 20px; margin: 0 0 8px; }
.help-list p { margin: 0; color: var(--muted); }
.help-links { padding-left: 1.4em; columns: 2 280px; column-gap: 32px; }
.help-links li { margin: 0 0 10px; break-inside: avoid; }
.help-table { width: 100%; border-collapse: collapse; margin: 16px 0 8px; }
.help-table caption { text-align: left; font-weight: 700; padding-bottom: 8px; }
.help-table th, .help-table td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--line); }
section.help-more { padding: 56px 0; }

/* Search (October 21, 2026). A round button floating at the right of the screen, outside the bar, by
   Om's decision; the one other icon-only control on the site besides the light/dark switch. It carries
   "Search the website" for screen readers and "Search" as its tooltip, and is 52px (48px on phones),
   over the 44px target. The bar leaves room for it wherever the two would otherwise meet. */
.search-fab {
  position: fixed;
  top: 20px;
  right: 16px;
  z-index: 51;
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  color: var(--ink);
  text-decoration: none;
  background: color-mix(in srgb, var(--paper) 86%, transparent);
  backdrop-filter: blur(18px) saturate(1.7);
  -webkit-backdrop-filter: blur(18px) saturate(1.7);
  border: 1px solid color-mix(in srgb, var(--ink) 22%, var(--line));
  box-shadow: 0 8px 30px rgba(15, 23, 42, 0.1), 0 1px 3px rgba(15, 23, 42, 0.06);
  transition: color 150ms var(--ease), border-color 150ms var(--ease), transform 150ms var(--ease), box-shadow 150ms var(--ease);
}
.search-fab .icon { width: 22px; height: 22px; }
.search-fab:hover { color: var(--primary); border-color: var(--primary); transform: translateY(-1px); }
.search-fab:focus-visible { outline: 3px solid var(--primary); outline-offset: 3px; border-radius: 50%; }
:root[data-theme='dark'] .search-fab {
  background: color-mix(in srgb, var(--paper) 82%, transparent);
  border-color: color-mix(in srgb, var(--ink) 28%, var(--line));
  box-shadow: 0 10px 32px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(255, 255, 255, 0.06);
}
html.search-open { overflow: hidden; }
@media (max-width: 1340px) { .site-header { padding-right: 88px; } }
@media (max-width: 960px) {
  .site-header { padding-right: 80px; }
  .search-fab { top: 14px; }
}
@media (max-width: 900px) {
  .search-fab { top: 12px; width: 48px; height: 48px; }
  .site-header { padding-right: 74px; }
}
@media (max-width: 640px) {
  .search-fab { top: 10px; right: 10px; }
  .site-header { padding-right: 66px; }
}
@media print { .search-fab { display: none; } }

.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; }

/* The search box: in the dialog, on the Help page and on /search. */
.search-form { margin: 24px 0 0; }
.search-form[hidden] { display: none; }
.search-label { display: block; font-size: 17px; font-weight: 650; margin-bottom: 8px; }
.search-row { display: flex; gap: 10px; }
.search-input {
  flex: 1 1 auto; min-width: 0; width: 100%; min-height: 52px; padding: 12px 16px; border-radius: 12px;
  border: 1px solid color-mix(in srgb, var(--ink) 40%, var(--paper)); background: var(--paper); color: var(--ink);
  font: inherit; font-size: 18px;
}
.search-input:focus-visible { outline: 3px solid var(--primary); outline-offset: 1px; border-color: var(--primary); }
.search-input::placeholder { color: var(--muted); opacity: 1; }
.search-submit { flex: none; min-height: 52px; font-family: inherit; cursor: pointer; }
.search-status { min-height: 1.6em; margin: 12px 0 8px; font-size: 15px; color: var(--muted); max-width: none; }
.search-status:empty { margin: 0; min-height: 0; }
.search-results { list-style: none; margin: 0; padding: 0; }
.search-results li + li { margin-top: 4px; }
.search-results a {
  display: block; padding: 12px 14px; border-radius: 12px; color: var(--ink); text-decoration: none;
  border: 1px solid transparent; transition: background-color 120ms var(--ease), border-color 120ms var(--ease);
}
.search-results a:hover, .search-results a:focus-visible { background: var(--primary-soft); border-color: color-mix(in srgb, var(--primary) 35%, transparent); }
.search-results a:focus-visible { outline: 3px solid var(--primary); outline-offset: 1px; }
.search-result-title { display: block; font-weight: 650; color: var(--primary); line-height: 1.3; }
.search-result-page { display: block; font-size: 14px; color: var(--muted); margin-top: 2px; }
.search-result-snippet { display: block; font-size: 15.5px; line-height: 1.5; margin-top: 4px; }
.search-results mark { background: var(--due-bg); color: var(--ink); border-radius: 3px; padding: 0 2px; }
.search-contact { font-size: 15px; margin: 12px 0 0; }

.search-dialog {
  width: min(720px, calc(100vw - 32px)); max-height: min(80vh, 760px); margin: 88px auto auto; padding: 0;
  border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper); color: var(--ink);
  box-shadow: var(--shadow-shot);
}
.search-dialog::backdrop { background: rgba(15, 23, 42, 0.5); }
.search-dialog-inner { display: flex; flex-direction: column; max-height: inherit; padding: 20px 20px 16px; }
.search-dialog .search-form { margin: 0; display: flex; flex-direction: column; min-height: 0; flex: 1 1 auto; }
.search-dialog .search-results { overflow-y: auto; min-height: 0; margin: 0 -6px; padding: 0 6px 4px; }
.search-dialog-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.search-dialog-top h2 { margin: 0; }
.search-close { min-height: 44px; padding: 8px 18px; font-family: inherit; cursor: pointer; }
@media (max-width: 640px) {
  .search-dialog { margin: 12px auto auto; width: calc(100vw - 20px); max-height: calc(100vh - 24px); }
  .search-dialog-inner { padding: 16px 14px 12px; }
  .search-row { flex-direction: column; }
  .search-submit { width: 100%; }
}

/* /search: every page, as plain links (what it shows without JavaScript). */
.search-all h3 { margin: 28px 0 8px; }
.search-all-list { list-style: none; margin: 0; padding: 0; columns: 2; column-gap: 24px; }
.search-all-list li { break-inside: avoid; }
.search-all-list a { display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; font-weight: 550; }
@media (max-width: 640px) { .search-all-list { columns: 1; } }
.search-all-contact { margin-top: 32px; }